); } // ──────────────────────────────────────────────────────────── // Top-of-screen "instrument header" — kicker row + title // ──────────────────────────────────────────────────────────── function MAppHeader({ kicker, right }) { return (

{kicker}

{right}

); } // ──────────────────────────────────────────────────────────── // Notifications panel — slides down from bell tap // ──────────────────────────────────────────────────────────── function MNotificationsPanel({ notifs, onClose, onMarkRead }) { const unread = notifs.filter(n => !n.read).length; // Portal to document.body so overflow:hidden ancestors don't clip the panel return ReactDOM.createPortal(

e.stopPropagation()} style={{ position: 'fixed', top: 0, left: 0, right: 0, background: 'var(--surface)', boxShadow: '0 8px 32px rgba(0,0,0,0.4)', maxHeight: '72vh', display: 'flex', flexDirection: 'column', }} > {/* Panel header */}

Alerts {unread > 0 && ( {unread} new )}

{unread > 0 && ( )}

{/* Notification list */}

{notifs.map((n, i) => { const ragColor = { red: 'var(--red)', amber: 'var(--amber)', green: 'var(--green)' }[n.rag]; return (

{n.tag} · {n.co}

{n.time}

{n.title}

{n.body}

); })}

, document.body ); } // ──────────────────────────────────────────────────────────── // Portfolio screen — editorial "instrument list" of holdings // ──────────────────────────────────────────────────────────── function MPortfolio({ goCompany }) { const ranked = [...COMPANIES].sort((a, b) => a.score - b.score); const [notifs, setNotifs] = React.useState(NOTIFICATIONS); const [notifOpen, setNotifOpen] = React.useState(false); const unreadCount = notifs.filter(n => !n.read).length; const markAllRead = () => setNotifs(ns => ns.map(n => ({ ...n, read: true }))); return (

{notifOpen && ( setNotifOpen(false)} onMarkRead={markAllRead} /> )} AlphaSuite.HARLOW & STONE} right={ } /> {/* Hero title */}

Portfolio
ranked by risk.

{/* Index summary row */}

{[ { k: 'HOLDINGS', v: '5' }, { k: 'WEIGHTED AI', v: '708' }, { k: 'ALPHA Δ / WK', v: '+17' }, ].map((c, i) => (

{c.k}

{c.v}

))}

{/* Instrument rows */}

{ranked.map((c, i) => ( goCompany(c.id)} /> ))}

{/* Signal feed teaser */}

What's Changed · 24 H

{[ { c: 'Volta', t: 'Commercial Engine → Red · Q1 missed 22%', tag: 'COMM', tone: 'red' }, { c: 'Smithfield', t: 'SOC2 Type II passed · Tech moved to Green', tag: 'TECH', tone: 'green' }, { c: 'Helix', t: 'NHS integration delayed 6 months', tag: 'AI', tone: 'amber' }, ].map((s, index) => (

{s.c}

{s.t}

{s.tag}

))}

); } // One portfolio row — editorial "instrument" card function CompanyRow({ c, idx, onClick }) { const ragColor = { red: 'var(--red)', amber: 'var(--amber)', green: 'var(--green)' }[c.rag]; const negative = c.delta < 0; const [hovered, setHovered] = React.useState(false); return ( ); } // ──────────────────────────────────────────────────────────── // Score screen — large hero + worst-first axis list // ──────────────────────────────────────────────────────────── function MScore({ companyId, back, goChat, goNotebook }) { const c = COMPANIES.find(x => x.id === companyId); const order = worstFirst(c); const negDelta = c.delta < 0; const ragColor = { red: 'var(--red)', amber: 'var(--amber)', green: 'var(--green)' }[c.rag]; return (

{/* Compact header */}

12 MAY · 09:41

{/* Title block */}

{c.sector} · {c.stage}

{c.name}

ARR {c.arr} · YoY {c.growth} · NRR {c.nrr} · {c.runway} runway

{/* Hero score block */}

Alpha Index · {c.weighting} Weighting

{c.score}

/ 1000

Δ Week

{negDelta ? '' : '+'}{c.delta}

PTS

10-week trail

{/* AI summary */}

AI Assessment

"{c.headline}"

{/* Tab strip */} {/* Axis list — worst first */}

Ten Axes · Worst First VC Weighting

{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, score, rag })} /> ); })}

Last ingest 12 May · 6 docs · 135 atoms ·{' '} Tap axis to interrogate →

); } function AxisRow({ rank, label, score, rag, note, onClick }) { const [hovered, setHovered] = React.useState(false); return (

setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ padding: 'var(--m-axis-row-pad)', borderTop: '1px solid var(--elev-1)', display: 'grid', gridTemplateColumns: '1fr auto', gap: 'var(--m-axis-row-gap)', alignItems: 'start', cursor: onClick ? 'pointer' : 'default', background: hovered && onClick ? 'var(--elev-1)' : 'transparent', transition: 'background 80ms', animation: 'alpha-fade-up 180ms ease-out both', animationDelay: (rank * 28) + 'ms', }}>

{String(rank).padStart(2, '0')} {rag}

{label}

{note}

{score}

/100

); } // ──────────────────────────────────────────────────────────── // Chat screen — intelligence briefing // ──────────────────────────────────────────────────────────── function MChat({ companyId, chatContext, onContextConsumed, back, 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 scrollRef = React.useRef(null); const onPickAxis = (axis, score, rag) => { const q = `What is the state of ${axis.label}?`; setMessages(m => [ ...m, makeUserMsg(q, '09:42'), makeAlphaPlaceholder(axis.key, axis.label, score, rag, '09:42'), ]); setTimeout(() => scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' }), 60); }; React.useEffect(() => { if (!chatContext) return; onPickAxis(chatContext.axis, chatContext.score, chatContext.rag); onContextConsumed?.(); }, [chatContext]); const onSendText = async (text) => { const time = new Date().toTimeString().slice(0, 5); setMessages(m => [...m, makeUserMsg(text, time), { role: 'alpha', time, brief: { lead: `Querying Alpha Spine for "${text}"…`, signals: [{ t: 'Searching corpus…', src: 'Alpha Spine', ref: 0 }], citedAtoms: [], confidence: '—', atoms: 0, sources: 0, }, }]); 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 || []; setMessages(m => [...m.slice(0, -1), { role: 'alpha', time, 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, }}]); } catch (err) { setMessages(m => [...m.slice(0, -1), { role: 'alpha', time, brief: { lead: `Could not reach Alpha Spine: ${err.message}`, signals: [], citedAtoms: [], confidence: '—', atoms: 0, sources: 0, }}]); } setTimeout(() => scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' }), 120); }; return (

{/* Dark chrome top — keeps the iPhone nav consistent */}

Ask α

{c.sector} · {c.stage}

{c.name}{' '} Digital

{/* LIGHT immersive chat surface */}

{/* Conversation + topic starters in scrollable area */}

{/* Topic cards at top — scroll away as conversation grows */}

Open a thread 10 axes

{messages.map((m, i) => m.role === 'user' ? : )}

{/* Composer — dense single-line, like the proto */}

); } function UserMsg({ m }) { return (

You · {m.time}

{m.text}

); } function AlphaBrief({ m }) { const b = m.brief; return (

α Briefing

{m.time}

{/* Lead */}

{b.lead}

{/* Inline axis card */} {b.axis && (

)} {/* Signals */} {b.signals && b.signals.length > 0 && (

Signals · {b.signals.length} {b.signals.map((s, i) => (

— {s.t} {s.ref > 0 && ( ^[{s.ref}] )} {s.src.split(' ')[0]}

))}

)} {/* Inline atom cluster — visual proof of provenance */} {b.cluster && (

)} {/* Inline portfolio comparison */} {b.compareAxis && (

a.key === b.compareAxis)?.label} />

)} {/* Citation table */} {b.citedAtoms && (

)} {/* Verdict */} {b.verdict && (

Recommendation

{b.verdict}

)} {/* Footer */}

Confidence · {b.confidence} {b.sources} docs · {b.atoms} atoms

); } function MComposer({ text, setText, onSend }) { return (

› setText(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && onSend(text)} placeholder="Ask Alpha about Smithfield..." style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', color: 'var(--ink)', fontFamily: 'var(--sans)', fontSize: 'var(--m-composer-input-size)', }} />

); } // ──────────────────────────────────────────────────────────── // Sub-tab strip (Score / Chat / Signal) within the company view // ──────────────────────────────────────────────────────────── function MTabStrip({ active, goChat, goScore, goNotebook }) { const tabs = [ { id: 'score', label: 'Score', onClick: goScore }, { id: 'chat', label: 'Ask α', onClick: goChat }, ]; return (

{tabs.map(t => ( ))}

); } // ──────────────────────────────────────────────────────────── // Bottom tab bar (Index / Signal / Sources / Ask) // ──────────────────────────────────────────────────────────── function MTabBar({ active, onTab }) { const tabs = [ { id: 'index', label: 'Score' }, { id: 'sources', label: 'Source' }, { id: 'ask', label: 'Ask' }, ]; return (

{tabs.map(t => ( ))}

); } // ──────────────────────────────────────────────────────────── // MobileApp — orchestrates screen state // ──────────────────────────────────────────────────────────── function parseHash() { var h = location.hash.replace('#', ''); var parts = h.split('/'); return { screen: parts[0] || 'portfolio', company: parts[1] || 'smithfield' }; } function MobileApp({ initial = 'portfolio', initialCompany = 'smithfield', initialQuery = null, toggleTheme, theme }) { var init = parseHash(); const [screen, setScreenRaw] = React.useState(init.screen || initial); const [company, setCompany] = React.useState(init.company || initialCompany); const [chatContext, setChatContext] = React.useState(null); const setScreen = (s) => { setScreenRaw(s); }; const activeTab = screen === 'chat' ? 'ask' : screen === 'notebook' ? 'sources' : 'index'; // Sync hash whenever screen or company changes React.useEffect(() => { var newHash = screen === 'portfolio' ? '#portfolio' : '#' + screen + '/' + company; if (location.hash !== newHash) history.replaceState(null, '', newHash); document.documentElement.setAttribute('data-active-screen', screen); }, [screen, company]); // Back/forward support React.useEffect(() => { var handler = function() { var parsed = parseHash(); setScreenRaw(parsed.screen || 'portfolio'); setCompany(parsed.company || 'smithfield'); }; window.addEventListener('popstate', handler); return function() { window.removeEventListener('popstate', handler); }; }, []); const handleTab = (id) => { if (id === 'index') setScreen('score'); else if (id === 'ask') setScreen(company ? 'chat' : 'portfolio'); else if (id === 'sources') setScreen(company ? 'notebook' : 'portfolio'); }; return (

{/* All screens always in DOM so the picker's Sections tab can find [data-screen] elements */}

{ setCompany(id); setScreenRaw('score'); }} />

setScreen('portfolio')} goChat={(ctx) => { setChatContext(ctx || null); setScreen('chat'); }} goNotebook={() => setScreen('notebook')} />

setChatContext(null)} back={() => setScreen('portfolio')} goScore={() => setScreen('score')} goNotebook={() => setScreen('notebook')} />

setScreen('portfolio')} goScore={() => setScreen('score')} goChat={() => setScreen('chat')} />

{screen !== 'portfolio' && }

); } Object.assign(window, { MobileApp });

Portfolio ranked by risk.

Portfolio
ranked by risk.