// chat-light.jsx — Immersive light-mode chat (Ask α) // // This is the room where the analyst converses with the corpus. // Different vocabulary from the rest of the app: cream stage, dark // warm carbon ink, generous editorial typography. The axis chips // become large topic cards — they're the conversational starting // points and they earn that visual weight. // ──────────────────────────────────────────────────────────── // TOPIC CARDS — big axis-coded conversation starters // ──────────────────────────────────────────────────────────── function TopicCards({ companyId, onPick, dense = false }) { const c = COMPANIES.find(x => x.id === companyId); if (!c) return null; // worst-first so the most-needed conversation is first const order = worstFirst(c).slice(0, dense ? 5 : 6); return (
{order.map((axisIdx, i) => { const axis = AXES[axisIdx]; const score = c.axes[axisIdx]; const rag = ragOf(score); return ( ); })}
); } // ──────────────────────────────────────────────────────────── // IMMERSIVE BRIEF — light-mode AI response, magazine voice // ──────────────────────────────────────────────────────────── function ImmersiveBrief({ m }) { const b = m.brief; return (
{/* α masthead */}
AlphaSuite. Intelligence Briefing · {m.time}
● Confidence {b.confidence} · {b.sources} docs · {b.atoms} atoms
{/* Lead — drop cap optional */}
{b.lead}
{/* Inline axis card on light surface */} {b.axis && ( )} {/* Signals as a numbered editorial list */} {b.signals && b.signals.length > 0 && (
Signals from the corpus {b.signals.length} cited
{b.signals.map((s, i) => (
{String(i+1).padStart(2,'0')} {s.t} {s.ref > 0 && ( [{s.ref}] )} {s.src}
))}
)} {/* Cluster + Comparison row */}
{b.cluster && } {b.compareAxis && a.key === b.compareAxis)?.label} />}
{/* Citation table (light) */} {b.citedAtoms && } {/* Recommendation — featured pull-quote */} {b.verdict && (
Recommendation
{b.verdict}
)}
); } // Light-version axis card (used inside the brief) function BriefAxisCard({ axis }) { const ragColor = { red: 'var(--red)', amber: 'var(--amber)', green: 'var(--green)' }[axis.rag]; return (
● {axis.rag} · AXIS
{axis.name}
{axis.note && (
{axis.note}
)}
{axis.score}
/ 100
); } // Light-version cluster (atoms mini-graph) function BriefCluster({ atoms }) { const width = 420, height = 200; const nodes = atoms.map(aid => ATOM_BY_ID[aid]).filter(Boolean); const minX = Math.min(...nodes.map(n => n.x)); const maxX = Math.max(...nodes.map(n => n.x)); const minY = Math.min(...nodes.map(n => n.y)); const maxY = Math.max(...nodes.map(n => n.y)); const rngX = Math.max(0.1, maxX - minX); const rngY = Math.max(0.1, maxY - minY); const mapX = (x) => 32 + ((x - minX) / rngX) * (width - 200); const mapY = (y) => 30 + ((y - minY) / rngY) * (height - 70); const edges = []; nodes.forEach(a => (a.edges || []).forEach(e => { if (atoms.includes(e)) edges.push({ a, b: ATOM_BY_ID[e] }); })); const ragColor = { red: 'var(--red)', amber: 'var(--amber)', green: 'var(--green)' }; return (
Atom cluster · {nodes.length} nodes From the corpus
{edges.map((e, i) => ( ))} {nodes.map((a) => ( {a.label} ))}
); } // Light-version portfolio comparison function BriefComparison({ axisKey, focusCompanyId, label }) { const axisIdx = AXES.findIndex(a => a.key === axisKey); if (axisIdx < 0) return null; const rows = COMPANIES.map(c => ({ id: c.id, name: c.name, score: c.axes[axisIdx], rag: ragOf(c.axes[axisIdx]), primary: c.id === focusCompanyId, })).sort((a, b) => b.score - a.score); return (
Portfolio · {label} 5 holdings
{rows.map(r => { const ragColor = { red: 'var(--red)', amber: 'var(--amber)', green: 'var(--green)' }[r.rag]; return (
{r.name}
{r.score}
); })}
); } // Light-version citation table function BriefCitationTable({ atoms, compact = false }) { return (
Provenance {atoms.length} atoms
KindAtom · Axis {!compact && Conf} Source
{atoms.map((aid, i) => { const a = ATOM_BY_ID[aid]; if (!a) return null; const s = SOURCE_BY_ID[a.src]; return (
{KIND_LABEL[s?.kind] || 'ATOM'}
{a.label}
{!compact && (
{AXES.find(x => x.key === a.axis)?.label || a.axis}
)} {!compact && ( {Math.round(a.conf * 100)}% )} {(s?.title || '—').slice(0, compact ? 14 : 26)}
); })}
); } // User message — light, journal-entry style function UserPrompt({ m }) { return (
You · {m.time}
"{m.text}"
); } // Big composer with claim-the-frame feel — uses the prompt-shell CSS module // `dense` mode (mobile): hides starter chips, single-line input, compact button — // because the topic cards above the conversation already carry that role. function ImmersiveComposer({ onSend, companyName = 'Smithfield Digital', dense = false }) { const [text, setText] = React.useState(''); // Conversational starter prompts — locked, always visible above the input. const starters = [ `What's the single biggest risk before Series B?`, `How does ${companyName} compare to Helix on AI durability?`, `What's changed in the last 7 days?`, `Summarise the Tech Audit in 5 bullets.`, ]; const submit = () => { if (!text.trim()) return; onSend(text); setText(''); }; const onKey = (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); submit(); } }; if (dense) { return (
setText(e.target.value)} onKeyDown={onKey} placeholder={`Ask α about ${companyName}…`} className="prompt-input" style={{ fontSize: 16 }} />
); } return (
Ask α · About {companyName} · Try one of these
{starters.map(s => ( ))}
α  Prompt