// SQSEO Performance screen (Phase 7): surfaces the Search Console data the sync
// writes — top pages, queries, topics, and device/country/appearance breakdowns.
// Live: GET /api/performance. Sync now + CSV export wired.
(function init(){
if(!window.LongtailIQDesignSystem_ae8f12 || !window.LTQ || !window.LTQ.useApi || !window.LTQ.TrendChart){return setTimeout(init,30);}
const React = window.React;
const DS = window.LongtailIQDesignSystem_ae8f12;
const { Card, Icon, Badge, Button } = DS;
const { useApi, api, toast, reloadBoot, TrendChart, fmtCompact, SectionTitle, EmptyState, Popover, MenuItem } = window.LTQ;
const t = (k, v) => (window.LTQ.t ? window.LTQ.t(k, v) : k);
const STATUS = {
"Top performer": "var(--viz-green)", Rising: "var(--viz-blue)", Steady: "var(--text-faint)",
"Needs attention": "var(--viz-amber)", New: "var(--viz-violet)",
};
const STATUS_KEY = { "Top performer": "top", Rising: "rising", Steady: "steady", "Needs attention": "attention", New: "new" };
const fmtPct = (v) => window.LTQ.fmtPct1(v);
const StatusPill = ({ s }) => (
{STATUS_KEY[s] ? t("perf.status_" + STATUS_KEY[s]) : s}
);
const Skel = ({ h = 16, w = "100%" }) => ;
// AI-interception risk for a page (impression-weighted, from the GEO model).
const AiRisk = ({ v }) => {
if (!v) return —;
const tone = v >= 60 ? "var(--viz-red)" : v >= 35 ? "var(--viz-amber)" : "var(--text-faint)";
return {v};
};
function StatCard({ label, value, sub, icon, tone }) {
return (
{label}
{value}
{sub && {sub}}
);
}
function MiniBars({ rows, label }) {
const max = Math.max(1, ...rows.map((r) => r.clicks));
return (
{label}
{rows.length === 0 ?
{t("perf.no_data")} : rows.map((r, i) => (
{r.name}
{fmtCompact(r.clicks)}
))}
);
}
function ExportMenu() {
const dl = (path) => { const a = document.createElement("a"); a.href = path; document.body.appendChild(a); a.click(); a.remove(); toast(t("chrome.export_started"), { tone: "success" }); };
return (
(
)}>
{(close) => (<>
);
}
function Th({ children, right }) {
return {children} | ;
}
function Performance({ onNavigate }) {
const { loading, data, reload } = useApi("/api/performance");
const [syncing, setSyncing] = React.useState(false);
const [drillQ, setDrillQ] = React.useState(null); // query row → drill-down drawer
const d = data || {};
const sum = d.summary;
const sample = d.lastSync && d.lastSync.source === "sample";
const syncNow = async () => {
setSyncing(true);
const r = await api.post("/api/sync");
setSyncing(false);
const o = r.data || {};
if (r.ok && o.ok) { await reloadBoot(); reload(); toast(t("wizard.search.pages_queries", { pages: o.pages, queries: o.queries }), { tone: "success" }); }
else if (o.error === "not_connected") toast(t("wizard.search.title"), { tone: "warning" });
else toast(r.error || t("wizard.search.sync_failed"), { tone: "error" });
};
const SyncBtn = ;
const empty = !sum || sum.pages === 0;
return (
} />
{!loading && (!sum || sum.pages === 0) ? (
{ window.location.href = "/oauth/google/authorize"; }}>{t("wizard.search.connect_title")}} />
) : (
<>
{sample && (
{t("perf.sample_1")} {t("dash.sample_bold")} {t("perf.sample_2")}
)}
{/* summary */}
{loading || !sum ? [0,1,2,3].map((i)=>) : <>
}
{/* pages table */}
{t("perf.top_pages")}
| {t("perf.col_page")} | {t("perf.col_status")} | {t("dash.metric.clicks")} | {t("perf.col_impr")} | CTR | {t("perf.col_pos")} | {t("perf.col_ai_risk")} | {t("perf.col_trend")} |
|---|
{loading ? [0,1,2,3,4].map((i)=> |
)
: d.pages.slice(0, 25).map((p, i) => {
const bd = { padding: "12px 14px", borderBottom: i < Math.min(25, d.pages.length) - 1 ? "1px solid var(--border-subtle)" : "none" };
return (
e.currentTarget.style.background="var(--ink-50)"} onMouseLeave={(e)=>e.currentTarget.style.background="transparent"}>
|
{p.title}
{p.url}
|
|
{fmtCompact(p.clicks)} |
{fmtCompact(p.impressions)} |
{fmtPct(p.ctr)} |
{p.pos} |
|
{p.trend && p.trend.length > 1 ?
: —} |
);
})}
{/* queries + side column */}
{t("perf.top_queries")}
| {t("gaps.col_query")} | {t("dash.metric.clicks")} | {t("perf.col_impr")} | CTR | {t("perf.col_pos")} |
|---|
{loading ? [0,1,2,3,4].map((i)=> |
)
: d.queries.slice(0, 18).map((q, i) => {
const bd = { padding: "11px 14px", borderBottom: i < Math.min(18, d.queries.length) - 1 ? "1px solid var(--border-subtle)" : "none" };
return (
window.LTQ.QueryDrawer && setDrillQ(q)} style={{ cursor: window.LTQ.QueryDrawer ? "pointer" : "default" }}
onMouseEnter={(e)=>e.currentTarget.style.background="var(--ink-50)"} onMouseLeave={(e)=>e.currentTarget.style.background="transparent"}>
| {q.query} |
{fmtCompact(q.clicks)} |
{fmtCompact(q.impressions)} |
{fmtPct(q.ctr)} |
{q.pos} |
);
})}
({ name: t.name, clicks: t.clicks }))} />
)}
{drillQ && window.LTQ.QueryDrawer && (
setDrillQ(null)} />
)}
);
}
window.LTQ.Performance = Performance;
})();