// desktop.jsx — AlphaSuite desktop screens (modified: real API + full-screen) const D_W = 1440; const D_H = 900; function getCurrentTime() { const d = new Date(); return String(d.getHours()).padStart(2,'0') + ':' + String(d.getMinutes()).padStart(2,'0'); } // ── Top chrome ───────────────────────────────────────────── function DChrome({ goPortfolio, current, goScreen, company }) { const c = COMPANIES.find(x => x.id === company); const TabBtn = ({ id, label, sub }) => ( ); return (
{c && } {c && } {c && }
WGT-AI 708 +17 HOLDINGS 5 FLAGS 3 1 {new Date().toLocaleDateString('en-GB',{day:'2-digit',month:'short',year:'2-digit'}).toUpperCase()} {' '}{getCurrentTime()} GMT
); } // ── Portfolio ─────────────────────────────────────────────── function DPortfolio({ goCompany }) { const ranked = [...COMPANIES].sort((a, b) => a.score - b.score); return (
01 — Portfolio · Q2 2026 · 5 Holdings

Ranked by risk.

{[ { k: 'WEIGHTED', v: '708', sub: '/1000' }, { k: 'PORTFOLIO Δ', v: '+17', sub: 'pts / wk', tone: 'green' }, { k: 'COVERAGE', v: '5/5', sub: 'live' }, { k: 'CORPUS', v: '746', sub: 'atoms · 32 docs' }, ].map((stat, i) => (
{stat.k}
{stat.v}
{stat.sub}
))}
Alpha Matrix · Ten Axes · Worst → Best
Cards 5 of 5 visible
{ranked.map((c, i) => ( goCompany(c.id)} idx={i+1} /> ))}
); } function MatrixTable({ companies, onSelect }) { return (
Company {AXES.map(a => {AXIS_SHORT[a.key]})} α Δ wk
{companies.map((c, index) => { const [hovered, setHovered] = React.useState(false); const ragColor = { red: 'var(--red)', amber: 'var(--amber)', green: 'var(--green)' }[c.rag]; return ( ); })}
); } function DPortfolioCard({ c, idx, onClick }) { const ragColor = { red: 'var(--red)', amber: 'var(--amber)', green: 'var(--green)' }[c.rag]; const [hovered, setHovered] = React.useState(false); return ( ); } // ── Score ─────────────────────────────────────────────────── function DScore({ companyId, goChat, goPortfolio, goNotebook }) { const c = COMPANIES.find(x => x.id === companyId); const order = worstFirst(c); const negDelta = c.delta < 0; const deltaColor = negDelta ? 'var(--red)' : 'var(--green)'; const ragColor = { red: 'var(--red)', amber: 'var(--amber)', green: 'var(--green)' }[c.rag]; return (
{c.sector} · {c.stage}
{c.name}
{[['ARR', c.arr], ['YoY Growth', c.growth], ['NRR', c.nrr], ['Runway', c.runway]].map(([k, v]) => (
{k}
{v}
))}
Alpha Index · {c.weighting} Weighting
{c.score}
/ 1000
{negDelta ? '' : '+'}{c.delta} Δ wk
α · Assessment
"{c.headline}"
Ten Axes · Worst First
Score / 100 RAG
{order.map((axisIdx, rank) => { const score = c.axes[axisIdx]; const rag = ragOf(score); const axis = AXES[axisIdx]; const note = AXIS_NOTES[c.id]?.[axisIdx] ?? ''; return goChat(axis)} />; })}
Methodology v3.4 · last recomputed 09:00 GMT · click axis to interrogate
); } function DAxisRow({ rank, label, score, rag, note, onClick }) { const ragColor = { red: 'var(--red)', amber: 'var(--amber)', green: 'var(--green)' }[rag]; const [hovered, setHovered] = React.useState(false); return (
setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ padding: 'var(--m-ax-pad, 20px 26px)', borderBottom: '1px solid var(--elev-1)', display: 'grid', gridTemplateColumns: '32px 1fr 120px 80px', gap: 22, alignItems: 'center', cursor: onClick ? 'pointer' : 'default', background: hovered && onClick ? 'var(--elev-1)' : 'transparent', transition: 'background 80ms', animation: 'alpha-fade-up 180ms ease-out both', animationDelay: (rank * 30) + 'ms', }}>
{String(rank).padStart(2, '0')}
{label}
{note}
{score}
{rag}
); } // ── Chat (desktop) ────────────────────────────────────────── function DChat({ companyId, initialAxis, onAxisConsumed, goPortfolio, goScore, goNotebook }) { const c = COMPANIES.find(x => x.id === companyId); const [messages, setMessages] = React.useState(() => ([ { role: 'user', text: 'What is the AI durability risk and how should I think about it ahead of Series B?', time: '09:38' }, { role: 'alpha', time: '09:38', brief: RICH_BRIEF_AI }, ])); const [showRails, setShowRails] = React.useState(true); const scrollRef = React.useRef(null); React.useEffect(() => { if (!initialAxis) return; onPickAxis(initialAxis, null, null); onAxisConsumed?.(); }, [initialAxis]); const onPickAxis = (axis, score, rag) => { const q = `What is the state of ${axis.label} and what should I do about it?`; setMessages(m => [ ...m, makeUserMsg(q, getCurrentTime()), makeAlphaPlaceholder(axis.key, axis.label, score, rag, getCurrentTime()), ]); setTimeout(() => scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' }), 60); }; const onSendText = async (text) => { const time = getCurrentTime(); const loadingBrief = { lead: `Querying Alpha Spine for "${text}"…`, signals: [{ t: 'Searching corpus…', src: 'Alpha Spine', ref: 0 }], citedAtoms: [], confidence: '—', atoms: 0, sources: 0, }; setMessages(m => [...m, makeUserMsg(text, time), { role: 'alpha', time, brief: loadingBrief }]); setTimeout(() => scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' }), 60); try { const resp = await fetch(`${window.BACKEND_URL}/query`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ question: text, corpus_id: companyId, top_k: 6 }), }); if (!resp.ok) throw new Error(`HTTP ${resp.status}`); const data = await resp.json(); const cits = data.citations || []; const brief = { lead: data.answer || 'No answer returned.', signals: cits.map((cit, i) => ({ t: cit.text ? cit.text.slice(0, 200) : '', src: cit.title ? cit.title.slice(0, 28) : `Source ${i+1}`, ref: i + 1, })), citedAtoms: [], confidence: cits.length > 3 ? 'high' : cits.length > 1 ? 'medium' : 'low', atoms: data.atom_count || 0, sources: cits.length, }; setMessages(m => [...m.slice(0, -1), { role: 'alpha', time, brief }]); } catch (err) { const errBrief = { lead: `Could not reach Alpha Spine: ${err.message}. Check the backend connection.`, signals: [], citedAtoms: [], confidence: '—', atoms: 0, sources: 0, }; setMessages(m => [...m.slice(0, -1), { role: 'alpha', time, brief: errBrief }]); } setTimeout(() => scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' }), 120); }; return (
α
Ask about {c.name}
α index {c.score} Δ {c.delta > 0 ? '+' : ''}{c.delta} wk
Open a thread · worst first 10 axes · 135 atoms
{messages.map((m, i) => m.role === 'user' ? : )}
); } // ── Full-screen app orchestrator ──────────────────────────── function AlphaSuiteApp() { const [screen, setScreen] = React.useState('portfolio'); const [company, setCompany] = React.useState('smithfield'); const [chatAxis, setChatAxis] = React.useState(null); return (
setScreen('portfolio')} goScreen={(s) => setScreen(s)} />
{screen === 'portfolio' && ( { setCompany(id); setScreen('score'); }} /> )} {screen === 'score' && ( setScreen('portfolio')} goChat={(axis) => { setChatAxis(axis || null); setScreen('chat'); }} goNotebook={() => setScreen('notebook')} /> )} {screen === 'chat' && ( setChatAxis(null)} goPortfolio={() => setScreen('portfolio')} goScore={() => setScreen('score')} goNotebook={() => setScreen('notebook')} /> )} {screen === 'notebook' && ( setScreen('portfolio')} goScore={() => setScreen('score')} goChat={() => setScreen('chat')} /> )}
); } Object.assign(window, { DesktopApp, AlphaSuiteApp });