}

{label} · {step+1} / {total}

{s.title}

{s.body}

{step < total-1 ? : }

, document.body ); } // Trigger a client-side file download from an in-memory string (no backend). function downloadBlob(filename, content, mime) { const url = URL.createObjectURL(new Blob([content], { type: mime })); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); setTimeout(() => URL.revokeObjectURL(url), 1000); } const SHEET_LABELS = { income:'Income statement', balance:'Balance sheet', cashflow:'Cash flow' }; function DashFinancials({ data, c, isMobile }) { const [sheet, setSheet] = React.useState('income'); const [period, setPeriod] = React.useState('annual'); const [unit, setUnit] = React.useState('relative'); // 'relative' ($94.8B) | 'thousands' (94,846,000) const [showPct, setShowPct] = React.useState(false); // %Δ — percentage change vs prior period const [showAbs, setShowAbs] = React.useState(false); // $Δ — absolute change vs prior period const [legend, setLegend] = React.useState(false); // "reading the financials" popup const [exportOpen, setExportOpen] = React.useState(false); // CSV/Excel export popup const [analysisOpen, setAnalysisOpen] = React.useState(false); const [tutorialOpen, setTutorialOpen] = React.useState(false); const analysisBtnRef = React.useRef(null); // Real "financials as reported" (SEC filings via Finnhub) when available for // this ticker/period; otherwise fall back to the curated mock (data). const fin = typeof useVMFinancials === 'function' ? useVMFinancials(c.ticker, period) : { data:null, loading:false, live:false }; const D = fin.data || data; const rows = { income:D.income, balance:D.balance, cashflow:D.cashflow }[sheet]; const periods = D.periods; const showDelta = showPct || showAbs; const deltaCols = showPct + showAbs; // Values are stored in USD millions. 'thousands' mode shows plain numbers in // thousands (no $, no B/M suffix), like Yahoo; 'relative' auto-scales to $B/$M. // No $ in the cells — the "Currency in USD" caption states it once. 'thousands' // = plain numbers in thousands; 'relative' = auto-scaled with a B/M size letter. function fmt(v, fmtType) { if (fmtType === 'eps') return v.toFixed(2); if (unit === 'thousands') { const t = Math.round(v * 1000); return t < 0 ? `(${Math.abs(t).toLocaleString()})` : t.toLocaleString(); } if (fmtType === 'shares') { const a = Math.abs(v); return a >= 1000 ? `${(a/1000).toFixed(2)}B` : `${a.toFixed(0)}M`; } const abs = Math.abs(v); const s = abs >= 1000 ? `${(abs/1000).toFixed(1)}B` : `${abs.toFixed(0)}M`; return v < 0 ? `(${s})` : s; } function fmtAbsDelta(diff, fmtType) { const sign = diff < 0 ? '-' : '+'; if (fmtType === 'eps') return `${sign}${Math.abs(diff).toFixed(2)}`; if (unit === 'thousands') return `${sign}${Math.round(Math.abs(diff) * 1000).toLocaleString()}`; const abs = Math.abs(diff); const s = abs >= 1000 ? `${(abs/1000).toFixed(1)}B` : `${abs.toFixed(0)}M`; return `${sign}${s}`; } // negative → orange (terra), positive → green (teal), flat → muted. const deltaColor = (x) => x < 0 ? VM.terra : (x > 0 ? VM.teal : VM.ink3); // Build a grid ({header, body}) of raw numbers for one statement, with the Δ // columns interleaved between periods (so the export mirrors the on-screen // table). Values stay computable: USD millions, except per-share rows. function buildGrid(sheetId, pct, abs) { const sheetRows = { income:D.income, balance:D.balance, cashflow:D.cashflow }[sheetId]; const header = ['Breakdown']; periods.forEach((p, pi) => { header.push(p); if (pi < periods.length - 1) { const range = `${periods[pi + 1]} → ${p}`; if (pct) header.push(`%Δ ${range}`); if (abs) header.push(`$Δ ${range}`); } }); const body = sheetRows.map(r => { const line = [r.k]; periods.forEach((p, pi) => { line.push(r.v[pi] == null ? '' : r.v[pi]); if (pi < periods.length - 1) { const nv = r.v[pi], ov = r.v[pi + 1]; const diff = (nv == null || ov == null) ? null : nv - ov; // Store %Δ as a fraction (2% → 0.02) so a spreadsheet's "%" number // format renders it correctly instead of ×100 (200%). const frac = (diff == null || ov === 0) ? null : diff / Math.abs(ov); if (pct) line.push(frac == null ? '' : +frac.toFixed(4)); if (abs) line.push(diff == null ? '' : diff); } }); return line; }); return { header, body }; } // Export the chosen statement(s) as CSV or Excel. // multiple sheets → CSV: stacked sections (extra rows); Excel: separate tabs. function runExport(kind, sheetIds, pct, abs) { if (typeof vmCapture === 'function') vmCapture('feature', { name: 'export_financials', ticker: c.ticker, kind, sheets: sheetIds.length }); const perLabel = period === 'annual' ? 'Annual' : 'Quarterly'; const tag = sheetIds.length === 3 ? 'all' : sheetIds.join('-'); const base = `${c.ticker}_${tag}_${period}_financials`; const pctNote = pct ? ' · %Δ as fraction (format cell as %)' : ''; const title = `${c.ticker} — Financials (${perLabel}) · USD millions, except per-share${pctNote}`; if (kind === 'csv') { const rowsOut = [[title]]; sheetIds.forEach((sid, idx) => { const { header, body } = buildGrid(sid, pct, abs); rowsOut.push([], [SHEET_LABELS[sid]], header, ...body); }); const csv = rowsOut.map(row => row.map(cell => { const s = String(cell == null ? '' : cell); return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s; }).join(',')).join('\r\n'); downloadBlob(`${base}.csv`, '' + csv, 'text/csv;charset=utf-8'); } else { const esc = (s) => String(s == null ? '' : s).replace(/&/g, '&').replace(//g, '>'); const sheetsXml = sheetIds.map(sid => `${esc(SHEET_LABELS[sid])}`).join(''); const tables = sheetIds.map(sid => { const { header, body } = buildGrid(sid, pct, abs); const isPctCol = header.map(h => typeof h === 'string' && h.startsWith('%Δ')); const head = header.map(h => `${esc(h)}`).join(''); const tb = body.map(r => '' + r.map((cell, i) => `${esc(cell)}`).join('') + '').join(''); return `` + `${head}${tb}

`; }).join('
'); const html = `` + `` + `${tables}`; downloadBlob(`${base}.xls`, html, 'application/vnd.ms-excel'); } setExportOpen(false); } // Column model: each period, with a Δ slot inserted between adjacent periods. const cols = []; periods.forEach((p, pi) => { cols.push({ type:'period', label:p, pi }); if (showDelta && pi < periods.length - 1) cols.push({ type:'delta', newIdx:pi, oldIdx:pi + 1, range:`${periods[pi + 1]} → ${p}` }); }); const hair = `1px solid ${VM.borderHair}`; const dPad = { padding:'7px 10px', textAlign:'right', whiteSpace:'nowrap', fontFamily:VM.mono, fontSize:11 }; // Grab-and-drag to scroll the (wide) table sideways with the mouse, like the ticker. const scrollRef = React.useRef(null); const dragRef = React.useRef(null); const onDragDown = (e) => { const el = scrollRef.current; if (!el) return; dragRef.current = { x: e.clientX, sl: el.scrollLeft }; el.style.cursor = 'grabbing'; if (el.setPointerCapture) el.setPointerCapture(e.pointerId); }; const onDragMove = (e) => { if (!dragRef.current || !scrollRef.current) return; scrollRef.current.scrollLeft = dragRef.current.sl - (e.clientX - dragRef.current.x); }; const onDragUp = (e) => { if (!dragRef.current) return; dragRef.current = null; const el = scrollRef.current; if (el) { el.style.cursor = 'grab'; if (el.releasePointerCapture) el.releasePointerCapture(e.pointerId); } }; return (

{[['income','Income statement'],['balance','Balance sheet'],['cashflow','Cash flow']].map(([id,lbl]) => ( setSheet(id)} style={{ fontFamily:VM.serif, fontSize:14, padding:'6px 16px 10px', cursor:'pointer', whiteSpace:'nowrap', color: sheet===id ? VM.ink : VM.ink3, fontWeight: sheet===id ? 700 : 400, borderBottom: sheet===id ? `2px solid ${VM.forest}` : '2px solid transparent', marginBottom:-1, }}>{lbl} ))}

{/* change-vs-prior-period toggles (independent) */} {!isMobile && (

{[['pct','%Δ', showPct, setShowPct, 'Show % change vs prior period'], ['abs','$Δ', showAbs, setShowAbs, 'Show $ change vs prior period']].map(([id,lbl,on,set,title]) => ( ))}

)} {!isMobile && }

{[['annual','Annual'],['quarterly','Quarterly']].map(([id,lbl]) => ( setPeriod(id)} style={{ fontFamily:VM.mono, fontSize:10, padding:'4px 10px', borderRadius:5, cursor:'pointer', border:`1px solid ${period===id ? VM.forest : VM.border}`, background: period===id ? VM.forest : VM.paper, color: period===id ? VM.paperWarm : VM.ink3, }}>{lbl} ))}

Show in {[['relative','Relative'],['thousands','Thousands']].map(([id,lbl]) => ( setUnit(id)} style={{ fontFamily:VM.mono, fontSize:10, padding:'4px 10px', borderRadius:5, cursor:'pointer', border:`1px solid ${unit===id ? VM.forest : VM.border}`, background: unit===id ? VM.forest : VM.paper, color: unit===id ? VM.paperWarm : VM.ink3, }}>{lbl} ))}

{/* Source line: real SEC filings when available, else the illustrative mock. */}

{fin.loading ? <>Loading filings… : fin.live ? <> As reported · SEC filings via Finnhub{D.filedDate ? ` · latest filed ${String(D.filedDate).slice(0,10)}` : ''} · USD : <>Illustrative figures (live filings unavailable for this ticker)}

{/* Units caption — states currency/scale so the cells don't repeat $ or B. */}

Currency in USD · {unit === 'thousands' ? 'all numbers in thousands' : 'figures in billions (B) / millions (M)'}

{cols.map((col, ci) => col.type === 'period' ? : )} {showDelta && ( {cols.filter(c => c.type === 'delta').map((col, di) => ( {showPct && } {showAbs && } ))} )} {rows.map((row, i) => ( {cols.map((col, ci) => { if (col.type === 'period') { const v = row.v[col.pi]; return ( ); } const nv = row.v[col.newIdx], ov = row.v[col.oldIdx]; const diff = (nv == null || ov == null) ? null : nv - ov; const pct = (diff == null || ov === 0) ? null : (diff / Math.abs(ov)) * 100; return ( {showPct && ( )} {showAbs && ( )} ); })} ))}

Breakdown	{col.label}	{col.range}
%Δ	$Δ
{row.k}	{fmt(v, row.fmt)}	{pct == null ? '—' : `${pct >= 0 ? '+' : ''}${pct.toFixed(1)}%`}	{diff == null ? '—' : fmtAbsDelta(diff, row.fmt)}

All figures USD · {fin.live ? 'as reported (SEC filings via Finnhub)' : 'illustrative mock data'}{unit === 'thousands' ? ' · all numbers in thousands' : ''} · not financial advice{showDelta ? ' · Δ vs prior period' : ''} {legend && setLegend(false)} />} {exportOpen && setExportOpen(false)} />} {analysisOpen && setAnalysisOpen(false)} data={data} c={c} analysisButtonRef={analysisBtnRef} />} {tutorialOpen && setTutorialOpen(false)} />}

); } // Export wizard — step 1: choose CSV/Excel · step 2: pick sheet + Δ columns, // preview the output, then download. function FinExportModal({ ticker, curSheet, period, initPct, initAbs, buildGrid, onExport, onClose }) { const SHEET_ORDER = ['income', 'balance', 'cashflow']; const [step, setStep] = React.useState('format'); // 'format' → 'configure' const [kind, setKind] = React.useState(null); // 'csv' | 'excel' const [sheets, setSheets] = React.useState([curSheet]); // multi-select: subset of SHEET_ORDER const [pct, setPct] = React.useState(initPct); const [abs, setAbs] = React.useState(initAbs); React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose]); // Toggle a statement on/off; always keep canonical order and ≥1 selected. const toggleSheet = (id) => setSheets(prev => { if (prev.includes(id)) return prev.length === 1 ? prev : prev.filter(x => x !== id); return SHEET_ORDER.filter(x => x === id || prev.includes(x)); }); const allOn = sheets.length === 3; const formatOpts = [ ['csv', 'ti-file-text', 'CSV', 'Comma-separated values — opens in Excel, Sheets, Numbers or any text editor.'], ['excel', 'ti-file-spreadsheet', 'Excel', 'Formatted workbook (.xls) that opens straight into Microsoft Excel.'], ]; const sheetOpts = [['income','Income statement'],['balance','Balance sheet'],['cashflow','Cash flow']]; return (

e.stopPropagation()} style={{ width:'100%', maxWidth: step==='format' ? 440 : 600, maxHeight:'88vh', display:'flex', flexDirection:'column', background:VM.paper, border:`1px solid ${VM.border}`, borderRadius:14, boxShadow:'0 24px 60px rgba(31,29,26,0.3)' }}> {/* Header */}

{step === 'configure' && ( setStep('format')} title="Back" style={{ fontSize:18, color:VM.ink3, cursor:'pointer' }}> )} {step === 'format' ? 'Export financials.' : `Export to ${kind === 'csv' ? 'CSV' : 'Excel'}.`}

{/* Step 1 — format */} {step === 'format' && (

{ticker} · {period}

{formatOpts.map(([id, icon, lbl, desc]) => ( ))}

)} {/* Step 2 — configure + preview */} {step === 'configure' && (

{/* Sheet selector — multi-select */}

Statements — pick one or more setSheets(allOn ? [curSheet] : [...SHEET_ORDER])} style={{ fontFamily:VM.mono, fontSize:10, color:VM.teal, cursor:'pointer', textTransform:'uppercase', letterSpacing:'0.04em' }}> {allOn ? 'Clear' : 'Select all'}

{sheetOpts.map(([id, lbl]) => { const on = sheets.includes(id); return ( ); })}

{/* Δ columns */} Change columns (vs prior period)

{[['%Δ', pct, setPct, 'Percentage change'],['$Δ', abs, setAbs, 'Absolute change']].map(([lbl, on, set, title]) => ( ))}

{/* Preview */} Preview {sheets.length > 1 && — {kind === 'csv' ? 'stacked into one file' : 'one tab per statement'}}

{sheets.map((sid, idx) => { const { header, body } = buildGrid(sid, pct, abs); const isPctCol = header.map(h => typeof h === 'string' && h.startsWith('%Δ')); // %Δ is stored as a fraction; show it as a percent in the preview. const showCell = (cell, ci) => cell === '' ? '—' : (isPctCol[ci] ? `${(cell * 100).toFixed(1)}%` : cell); return (

{SHEET_LABELS[sid]} {header.map((h, i) => ( ))} {body.slice(0, 5).map((r, ri) => ( {r.map((cell, ci) => ( ))} ))}

{h}
{showCell(cell, ci)}

{body.length > 5 && + {body.length - 5} more rows}

); })}

USD millions, except per-share · {period}{pct ? ' · %Δ exported as a fraction (e.g. 1.5% → 0.015), pre-formatted as % in Excel' : ''}

)} {/* Footer (step 2 only) */} {step === 'configure' && (

)}

); } // "Reading the financials" — legend popup for the statement table (rows, columns, buttons). function FinLegendModal({ onClose }) { React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose]); const Section = ({ title, items }) => ( {title} {items.map(([k, d]) => (

{k} {d}

))} ); return (

e.stopPropagation()} style={{ width:'100%', maxWidth:560, maxHeight:'85vh', overflowY:'auto', background:VM.paper, border:`1px solid ${VM.border}`, borderRadius:14, boxShadow:'0 24px 60px rgba(31,29,26,0.3)' }}>

Reading the financials.

); } // ── Patents ─────────────────────────────────────────────────────────────────── const PAT_STEPS = [ { sel:'[data-tour="vm-patents-stats"]', title:'Portfolio at a glance.', body:'Four headline numbers: total active patents, grants in the last 12 months, pending applications, and the year the earliest filing was made. Together they size the IP position and show whether the company is growing or harvesting its portfolio.' }, { sel:'[data-tour="vm-patents-portfolio"]', title:'Portfolio by technology.', body:'Breaks the full portfolio into technology domains — semiconductors, AI/ML, networking, etc. The bar width is the share of total patents; the count is on the right. A concentrated portfolio signals deep specialisation; a broad one signals diversification of IP bets.' }, { sel:'[data-tour="vm-patents-trend"]', title:'Filing trend.', body:'Annual new filings from FY20 to FY25. An accelerating trend usually precedes a product cycle — companies file before they ship. A asterisk (*) marks a partial or estimated year. Compare the peak year against the company\'s R&D spend history for context.' }, { sel:'[data-tour="vm-patents-grants"]', title:'Notable recent grants.', body:'A curated list of high-signal grants from the last 12–18 months. Patent ID links to the USPTO record. The area tag shows which technology domain each grant falls into — useful for spotting emerging bets before they show up in revenue.' }, ]; function DashPatents({ data, isMobile }) { const [tutorialOpen, setTutorialOpen] = React.useState(false); const { stats, cats, filings, notable } = data; return (

{stats.map(([k,v]) => (

{k}

{v}

))}

Portfolio by technology

{cats.map((r, i) => (

{r.k} {r.pct}% {r.n.toLocaleString()}

))}

Filing trend

FY20–FY25 ∂

Notable recent grants

{notable.map((p, i) => (

{p.id} {p.granted}

{p.title}

{p.area}

))}

{tutorialOpen && setTutorialOpen(false)} />}

); } function PatentFilingChart({ filings }) { const max = Math.max(...filings.map(d => d.n)); return (

{filings.map((d, i) => (

{d.partial ? `${d.n}*` : d.n.toLocaleString()}

{d.y}

))}

); } // ── History ─────────────────────────────────────────────────────────────────── function DashHistory({ c, data, isMobile }) { const [section, setSection] = React.useState('past'); const [query, setQuery] = React.useState(''); const [aiResult, setAiResult] = React.useState(null); const [aiLoading, setAiLoading] = React.useState(false); function handleAsk() { if (!query.trim()) return; setAiLoading(true); setAiResult(null); // TODO: wire to Claude.ai setTimeout(() => { setAiLoading(false); setAiResult('Claude.ai integration coming in the next phase. This will surface pattern matches, historical analogues, and AI-generated insights for ' + c.ticker + ' based on your question.'); }, 900); } return (

{[['past','Past'],['present','Present'],['future','Future']].map(([id,lbl]) => ( setSection(id)} style={{ fontFamily:VM.serif, fontSize:15, padding:'5px 24px 10px', cursor:'pointer', color: section===id ? VM.ink : VM.ink3, fontWeight: section===id ? 700 : 400, borderBottom: section===id ? `2px solid ${VM.terra}` : '2px solid transparent', marginBottom:-1, }}>{lbl} ))}

{section === 'past' && } {section === 'present' && } {section === 'future' && }

Ask History · AI

Ask what history says about {c.ticker} — analogues, turning points, what happened next.

setQuery(e.target.value)} onKeyDown={e=>e.key==='Enter'&&handleAsk()} placeholder={`e.g. "When ${c.ticker} looked like this, what happened to margins?"`} style={{ flex:1, width: isMobile?'100%':undefined, fontFamily:VM.serif, fontSize:14, padding:'10px 14px', border:`1px solid ${VM.border}`, borderRadius:8, background:VM.paper, outline:'none', color:VM.ink }} /> {aiLoading ? 'Searching…' : 'Ask'}

{aiResult && (

Result

{aiResult}

)}

); } function HistoryPast({ data }) { const { timeline } = data; return (

COMPANY TIMELINE · KEY MOMENTS

{timeline.map((item, i) => (

{item.y}

{item.e}

))}

); } function HistoryPresent({ data, c, isMobile }) { const { closestAnalogue, patternMatch, patternDiff } = data; return (

CLOSEST ANALOGUE · PATTERN MATCH

{closestAnalogue.ticker} · {closestAnalogue.year}

{closestAnalogue.what}

{closestAnalogue.match}%

MATCH

What matches

{patternMatch.map((p, i) => (

{p.k} {p.v}%

))} {c.ticker} · {patternMatch[0]?.note}

WHERE IT DIVERGES

{patternDiff.map((d, i) => (

{d.k}

{d.note}

))}

); } function HistoryFuture({ data, c, isMobile }) { const { analogues } = data; const col = { CLOSEST:VM.teal, ECHO:VM.tealInk, MIXED:VM.terra, WARNING:VM.downInk }; return (

ANALOGUES · WEIGHTED OUTCOMES

The {analogues.length} closest historical matches for {c.ticker}, ranked by pattern similarity. Not a forecast — a base rate.

{analogues.map((a, i) => (

{a.ticker}

{a.year}

{a.match}% match {a.ret}

{a.what}

{a.outcome}

))}

); } // ── Shared helpers ──────────────────────────────────────────────────────────── function MetaPair({ k, v }) { return ( {k} {v} ); } function Panel({ title, meta, children }) { return (

{title}

{meta && {meta}}

{children}

); } Object.assign(window, { Dashboard, TutorialOverlay });

What's moving {c.name.split(' ')[0]}.

{c.name.split(' ')[0]} — what they actually do.

Price · 5Y +218%{' '} · split-adjusted

Portfolio by technology

Filing trend

Notable recent grants

What matches

{title}