// Main app — channel switcher + Tweaks panel + real /api/analyze wiring.
const { useState: useStateApp, useEffect: useEffectApp, useCallback: useCallbackApp } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"channel": "landing",
"accent": "phosphor",
"density": "default",
"scanlines": false,
"grid": false,
"highlightCited": true
}/*EDITMODE-END*/;
// Imperative scan-overlay control. Lives outside React so we can show/hide
// it from inside an async handler without re-rendering the whole tree.
const scanOverlay = {
show(domain) {
const el = document.getElementById('scanOverlay');
const dom = document.getElementById('scanOverlayDomain');
const phase = document.getElementById('scanOverlayPhase');
if (dom) dom.textContent = domain || '—';
if (phase) phase.textContent = 'awaiting response…';
if (el) el.hidden = false;
},
phase(text) {
const phase = document.getElementById('scanOverlayPhase');
if (phase) phase.textContent = text;
},
hide() {
const el = document.getElementById('scanOverlay');
if (el) el.hidden = true;
}
};
function App() {
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [channel, setChannel] = useStateApp(tweaks.channel || "landing");
const [data, setData] = useStateApp(window.ANSWENA_DATA);
const [scanError, setScanError] = useStateApp(null);
// Sync visual data attrs onto so the CSS variables react to tweaks.
useEffectApp(() => {
const accentMap = { phosphor: "", amber: "amber", cyan: "cyan", magenta: "magenta", paper: "paper" };
document.body.dataset.accent = accentMap[tweaks.accent] || "";
document.body.dataset.density = tweaks.density === "default" ? "" : tweaks.density;
document.body.dataset.scanlines = tweaks.scanlines ? "on" : "off";
document.body.dataset.grid = tweaks.grid ? "on" : "off";
}, [tweaks]);
useEffectApp(() => {
if (tweaks.channel && tweaks.channel !== channel) setChannel(tweaks.channel);
// eslint-disable-next-line
}, [tweaks.channel]);
// Keep the global mirror in sync so any non-React helper (PDF export, etc.)
// can still read the active dataset off window.
useEffectApp(() => {
window.ANSWENA_DATA = data;
}, [data]);
// TweaksPanel is gated on receiving __activate_edit_mode from a parent
// frame (Claude design-system host protocol). In standalone production we
// have no host, so dispatch it to ourselves on mount so the panel becomes
// available and the bottom-right close (✕) is visible.
useEffectApp(() => {
if (window.parent === window) {
window.postMessage({ type: '__activate_edit_mode' }, '*');
}
}, []);
const switchChannel = (c) => {
setChannel(c);
setTweak("channel", c);
window.scrollTo(0, 0);
};
// Real scan wiring — Landing's form calls this. Shows overlay, hits
// /api/analyze, swaps the dataset, jumps to the report channel.
const handleScan = useCallbackApp(async ({ domain, brand } = {}) => {
const cleanDomain = String(domain || '').trim().replace(/^https?:\/\//, '').replace(/\/.*$/, '');
if (!cleanDomain) { setScanError('Domain is required.'); return; }
setScanError(null);
scanOverlay.show(cleanDomain);
try {
const shaped = await window.AnswenaData.runScan({
domain: cleanDomain,
brand: String(brand || '').trim() || undefined,
queryLimit: 8,
onPhase: (p) => scanOverlay.phase(p)
});
setData(shaped);
switchChannel('report');
} catch (err) {
console.error('[scan] failed:', err);
const msg = err?.unparseable
? `Couldn't parse ${cleanDomain} — looks like a JS-only SPA. Try a server-rendered URL.`
: (err?.message || 'scan failed');
setScanError(msg);
} finally {
scanOverlay.hide();
}
}, []);
return (
<>
{/* TOP BAR */}
/ GEO · AEO SCORER
OPS · LIVE
{[
{ id: "landing", label: "01 LANDING" },
{ id: "report", label: "02 REPORT" },
{ id: "agents", label: "03 AGENTS" },
].map(c => (
switchChannel(c.id)}>
{c.label}
))}
{data.domain}
SCORE {data.score}
⌘K
{/* TOOLS STRIP — links to legacy sub-pages still served as plain HTML.
Each link breaks out of the React tree and loads the dedicated page;
the page's .subnav has a "← Home" link back here. Without this strip
the sub-pages exist but are unreachable from /. */}
// TOOLS
methodology
why this score
timeline
diff
validation
developers
api · docs
ai-ping
admin
{scanError && (
Scan failed: {scanError}
(showing previous data)
)}
{channel === "landing" &&
{/* TWEAKS */}
{ setTweak("channel", v); switchChannel(v); }}
options={[
{ value: "landing", label: "Landing" },
{ value: "report", label: "Report" },
{ value: "agents", label: "Agents" },
]} />
setTweak("accent", v)}
options={[
{ value: "phosphor", label: "Phosphor" },
{ value: "amber", label: "Amber" },
{ value: "cyan", label: "Cyan" },
{ value: "magenta", label: "Magenta" },
{ value: "paper", label: "Paper" },
]} />
setTweak("density", v)}
options={[
{ value: "compact", label: "Compact" },
{ value: "default", label: "Default" },
{ value: "comfortable", label: "Comfort" },
]} />
setTweak("scanlines", v)} />
setTweak("grid", v)} />
setTweak("highlightCited", v)} />
);
}
ReactDOM.createRoot(document.getElementById("root")).render(