/* reports.jsx — branded, shareable, printable visibility reports * * Two views: * 1) List of generated reports (one per scan in history, plus on-demand generation) * 2) A "tear sheet" detail view: branded, timestamped, print/PDF-ready, with shareable URL * * Source of truth: localStorage history (recorded by time-series.jsx on every real scan). * No new persistence here — we just project that data into a presentation layer. */ const { useState: useStateRep, useEffect: useEffectRep, useMemo: useMemoRep, useRef: useRefRep } = React; const REPORT_MODELS = [ { id: 'anthropic', name: 'Claude', short: 'CL', hue: 28 }, { id: 'openai', name: 'OpenAI', short: 'GPT', hue: 158 }, { id: 'google', name: 'Gemini', short: 'GE', hue: 252 }, { id: 'perplexity', name: 'Perplexity', short: 'PP', hue: 200 }, { id: 'xai', name: 'Grok', short: 'GR', hue: 340 }, { id: 'deepseek', name: 'DeepSeek', short: 'DS', hue: 90 }, ]; function fmtDate(ts) { const d = new Date(ts); return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); } function fmtDateLong(ts) { const d = new Date(ts); return d.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }); } function fmtTime(ts) { const d = new Date(ts); return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }); } function relTime(ts) { const diff = Date.now() - ts; if (diff < 60_000) return 'just now'; if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`; if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`; return `${Math.floor(diff / 86_400_000)}d ago`; } // Pull every recorded scan across all sites, projected into report rows. function gatherReports(sites) { const out = []; (sites || []).forEach((site) => { const hist = (window.getHistoryForSite && window.getHistoryForSite(site.id)) || []; hist.forEach((entry, idx) => { out.push({ id: `${site.id}-${entry.at}`, siteId: site.id, siteName: site.name, siteDomain: site.domain, site, at: entry.at, score: entry.score, prevScore: idx > 0 ? hist[idx - 1].score : null, perModel: entry.perModel || {}, configured: entry.configured || [], totalCalls: entry.totalCalls, index: idx, total: hist.length, history: hist, }); }); }); return out.sort((a, b) => b.at - a.at); } // Synthesize a "draft" report from current discovery + scan state, even before // any history exists. This is what "Generate new report" produces. function draftReportFor(site, scanResult, fixes) { if (!site) return null; const at = scanResult?.runAt || Date.now(); return { id: `draft-${site.id}-${at}`, isDraft: !scanResult, siteId: site.id, siteName: site.name, siteDomain: site.domain, site, at, score: scanResult?.score ?? null, prevScore: null, perModel: scanResult?.perModel || {}, configured: scanResult?.configured || [], totalCalls: scanResult?.totalCalls, totalMentions: scanResult?.totalMentions, rank: scanResult?.rank, competitors: scanResult?.competitors || [], fixes: fixes || [], history: (window.getHistoryForSite && window.getHistoryForSite(site.id)) || [], }; } // ──────────────────────────────────────────────────────────────────────────── // LIST VIEW // ──────────────────────────────────────────────────────────────────────────── function Reports({ profile, sites, activeSite, scanState, realFixes, onOpenSettings, onBack, initialReportId }) { const [openId, setOpenId] = useStateRep(initialReportId || null); const [siteFilter, setSiteFilter] = useStateRep('all'); const [tick, setTick] = useStateRep(0); useEffectRep(() => { const onCh = () => setTick(t => t + 1); window.addEventListener('aiso:scan-recorded', onCh); window.addEventListener('focus', onCh); return () => { window.removeEventListener('aiso:scan-recorded', onCh); window.removeEventListener('focus', onCh); }; }, []); // Read share-link param on first mount useEffectRep(() => { const m = (location.hash.match(/report=([^&]+)/) || [])[1]; if (m) setOpenId(decodeURIComponent(m)); }, []); const allReports = useMemoRep(() => gatherReports(sites), [sites, tick]); const filtered = siteFilter === 'all' ? allReports : allReports.filter(r => r.siteId === siteFilter); const draft = useMemoRep(() => { if (!activeSite) return null; return draftReportFor(activeSite, scanState?.result, realFixes); }, [activeSite, scanState?.result, realFixes]); // If user opens by id, prefer history match; fall back to draft. const openReport = useMemoRep(() => { if (!openId) return null; return allReports.find(r => r.id === openId) || (draft?.id === openId ? draft : null); }, [openId, allReports, draft]); if (openReport) { return ( { setOpenId(null); if (location.hash.includes('report=')) history.replaceState(null, '', location.pathname); }} /> ); } return (
Reports · branded, timestamped, shareable

Every scan, packaged for the people who pay.

One-click PDF or share link — the deliverable agencies bill for, and the receipt teams need to prove visibility moved. Pulled live from your own scan history.

{draft && ( )}
{/* Filters */} {sites && sites.length > 1 && (
Site {sites.map(s => { const count = allReports.filter(r => r.siteId === s.id).length; return ( ); })}
)} {filtered.length === 0 ? (
—

No reports yet.

Every real scan you run gets archived here as a branded, shareable report.{' '} {draft ? <>Generate one now from your current scan, or run a fresh scan from the main report. : null}

{draft && ( )}
) : (
{/* Draft "generate now" card always at top if active site has data */} {draft && ( )} {filtered.map((r) => ( setOpenId(r.id)} /> ))}
)}
); } function ReportCard({ report, onOpen }) { const delta = report.prevScore != null ? report.score - report.prevScore : null; const ms = (report.configured || []).length; return ( ); } function ReportSparkline({ history, highlightAt }) { if (!history || history.length === 0) return
; const tail = history.slice(-12); const w = 280, h = 36, pad = 4; const min = Math.min(...tail.map(p => p.score), 0); const max = Math.max(...tail.map(p => p.score), 100); const range = Math.max(1, max - min); const pts = tail.map((p, i) => { const x = pad + (i / Math.max(1, tail.length - 1)) * (w - pad * 2); const y = h - pad - ((p.score - min) / range) * (h - pad * 2); return [x, y, p]; }); const d = pts.map(([x, y], i) => `${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`).join(' '); return ( {pts.map(([x, y, p], i) => ( ))} ); } // ──────────────────────────────────────────────────────────────────────────── // DETAIL — the branded tear sheet // ──────────────────────────────────────────────────────────────────────────── function ReportSheet({ report, profile, onBack }) { const [copied, setCopied] = useStateRep(false); const [savingPdf, setSavingPdf] = useStateRep(false); const shareUrl = useMemoRep(() => `${location.origin}${location.pathname}#report=${encodeURIComponent(report.id)}`, [report.id]); const onPrint = () => { setSavingPdf(true); // Let the spinner paint before window.print() (which blocks while the dialog is open). setTimeout(() => { try { window.print(); } finally { setSavingPdf(false); } }, 80); }; const onShare = async () => { try { await navigator.clipboard.writeText(shareUrl); setCopied(true); setTimeout(() => setCopied(false), 1800); } catch { prompt('Copy this link:', shareUrl); } }; const score = report.score ?? 0; const delta = report.prevScore != null ? score - report.prevScore : null; const ms = (report.configured || []).length || REPORT_MODELS.length; const fixes = report.fixes || []; const completedFixes = fixes.filter(f => f.shipping || f.deployed); const remainingFixes = fixes.filter(f => !f.shipping && !f.deployed); const competitors = (report.competitors || []).slice(0, 6); // Synthesize "best lift" — top deployed fix(es) with projected gain const bestLifts = completedFixes.slice(0, 3); return (
{/* sheet toolbar — hidden in print */}
{/* sheet header */}
AISO observatory · monthly report
Issued
{fmtDateLong(report.at)} · {fmtTime(report.at)}
{(report.siteName || '·')[0]}
Visibility report · {ms} models · {report.totalCalls ?? '—'} prompts

{report.siteName}

{report.siteDomain}
{score}%
Visibility score
{delta != null ? (
0 ? 'up' : delta < 0 ? 'down' : ''}`}> {delta > 0 ? '↑' : delta < 0 ? '↓' : '·'} {Math.abs(delta)} since last
) : (
baseline
)}
{/* TL;DR strip */}
Mentioned
{report.totalMentions != null ? report.totalMentions : (Math.round(score * (report.totalCalls || 0) / 100) || '—')}/{report.totalCalls ?? '—'}
prompts across {ms} models
Rank
{report.rank ? `#${report.rank}` : '—'}
in your category
Fixes shipped
{completedFixes.length}/{fixes.length || '—'}
{remainingFixes.length} remaining
Period
{report.history && report.history.length > 1 ? `${report.history.length} scans` : '1 scan'}
on file
{/* Per-model breakdown */}

How each model sees you

Mention rate across the wired AI assistants for {report.siteName}-style prompts.

{REPORT_MODELS.map(m => { const v = report.perModel?.[m.id]; const color = `oklch(80% 0.14 ${m.hue})`; const has = v != null; return (
{m.name} {m.short}
{has ? <>{v}% : —}
); })}
{/* Trend chart */} {report.history && report.history.length >= 2 && (

Trajectory

Visibility over the last {report.history.length} scans. The dot marks this report.

)} {/* Competitors */} {competitors.length > 0 && (

Who AI recommends

Brands extracted from {report.totalCalls ?? 'the'} model responses — ranked by mention count.

{[...competitors, { name: report.siteName, us: true, count: report.totalMentions || 0, rank: report.rank }] .sort((a, b) => (b.count || 0) - (a.count || 0)) .map((c, i) => (
{i + 1}
{c.name} {c.us && YOU}
{c.count ?? '—'} mention{c.count === 1 ? '' : 's'}
))}
)} {/* Fixes ledger */} {fixes.length > 0 && (

Fixes — completed & remaining

Highest-impact technical changes detected on {report.siteDomain}, ranked by projected lift.

{completedFixes.length > 0 && (
Completed · {completedFixes.length}
{completedFixes.slice(0, 5).map((f, i) => ( ))}
)} {remainingFixes.length > 0 && (
Remaining · {remainingFixes.length}
{remainingFixes.slice(0, 5).map((f, i) => ( ))}
)}
)} {/* Before/after */} {bestLifts.length > 0 && bestLifts.some(f => f.aiContent?.beforeAfter?.length) && (

Before & after — what changed

A real prompt, and how the answer moved.

{bestLifts.flatMap(f => (f.aiContent?.beforeAfter || []).slice(0, 1).map((ba, i) => (
Claude · prompt "{ba.prompt}"
Before
{ba.before}
After · +{f.gain || 0} visibility
{ba.after}
))).slice(0, 2)}
)} {/* footer */}
AISO Observatory — generated for {profile?.name || profile?.email || 'your team'}
Method: 142 vertical-aware prompts × {ms} models. Mention rate is the share of responses naming the brand. Rank is computed from competitor extraction.
); } function ScoreRing({ value }) { const r = 48; const c = 2 * Math.PI * r; const off = c - (Math.max(0, Math.min(100, value)) / 100) * c; return ( ); } function ReportTrend({ history, highlightAt }) { const w = 880, h = 180, padX = 28, padY = 22; const pts = history.map((p, i) => ({ ...p, i })); const min = Math.min(...pts.map(p => p.score)) - 4; const max = Math.max(...pts.map(p => p.score)) + 4; const range = Math.max(8, max - min); const xy = (p) => { const x = padX + (p.i / Math.max(1, pts.length - 1)) * (w - padX * 2); const y = h - padY - ((p.score - min) / range) * (h - padY * 2); return [x, y]; }; const path = pts.map((p, i) => { const [x, y] = xy(p); return `${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`; }).join(' '); const area = `${path} L ${(w - padX).toFixed(1)} ${h - padY} L ${padX} ${h - padY} Z`; return (
{/* gridlines */} {[0, 0.25, 0.5, 0.75, 1].map((p, i) => ( ))} {pts.map((p) => { const [x, y] = xy(p); const hi = p.at === highlightAt; return ( {hi && ( {p.score} )} ); })}
{fmtDate(pts[0].at)} {fmtDate(pts[pts.length - 1].at)}
); } function FixLedgerRow({ fix, done }) { return (
{done ? '✓' : '·'}
{fix.title}
{fix.category}
+{fix.gain || 0}
); } // ──────────────────────────────────────────────────────────────────────────── // Inline icons // ──────────────────────────────────────────────────────────────────────────── function ReportIcon() { return ; } function LinkIcon() { return ; } function PrintIcon() { return ; } Object.assign(window, { Reports });