// Slide 1 — Real chat-panel cascade. // Matches the actual product UI: chat panel on the left (header bar, // user bubble, tool-call stack, agent answer), Research Overview-style // sidebar on the right that updates as the pipeline runs. const { useState: s1use, useEffect: s1eff, useRef: s1ref } = React; const { ToolCallCard, Typewriter, CitationChip, ChatBubble, AppChatPanel, pitchC, pitchMono, Reveal, } = window; // Each step's "View" pill becomes available once it's `done`. // `phase` labels the analyst loop; `model` shows which Claude model the // orchestrator routes that step to. const SCRIPT = [ { id: 'orch', phase: 'Orient', name: 'Orient · scope the question', sub: 'route → research · time → P11-13 Q4 25/26', model: 'sonnet-4-6', start: 300, dur: 900 }, { id: 'plan', phase: 'Plan', name: 'Plan the investigation', sub: '4 angles · 7 hypotheses', model: 'sonnet-4-6', start: 1500, dur: 1100 }, { id: 'run', phase: 'Investigate', name: 'Investigate · run research', sub: '7 queries via MCP → DuckDB · 148.1s', model: 'haiku-4-5', start: 3000, dur: 2400 }, { id: 'gate', phase: 'Assess', name: 'Assess the evidence', sub: 'Enough evidence? Go deeper, or synthesize.', start: 5600, dur: 900 }, { id: 'consol', phase: 'Assess', name: 'Consolidate blocks', sub: '2 hero charts assembled', start: 6700, dur: 900 }, { id: 'answer', phase: 'Synthesize', name: 'Synthesize the answer', sub: '5 claims · 5 citations · 0 hallucinated', model: 'opus-4-8', start: 7800, dur: 1400 }, ]; const TOTAL_MS = 9400; const QUESTION = "Are we known more for furniture or homeware? Where should we focus to build presence?"; const ANSWER_TEXT = [ { kind: 'text', value: 'Habitat is modestly better known for homeware than furniture, and the gap is wider — and more actionable — on consideration and perception. On category association, 60% of consumers link Habitat to homeware vs 53% to furniture' }, { kind: 'cite', n: 1 }, { kind: 'text', value: '. But the bigger signal is conversion: homeware future consideration sits at 22% against just 9% for furniture' }, { kind: 'cite', n: 2 }, { kind: 'text', value: '. Habitat captures 4.2% of last-homeware-purchases vs 3.9% in furniture' }, { kind: 'cite', n: 3 }, { kind: 'text', value: ' — in a much more concentrated category where IKEA (20%) and Dunelm (14%) dominate. Recommendation: double down on homeware to compound existing traction.' }, ]; function Slide1Cascade() { const [t, setT] = s1use(0); const [questionDone, setQuestionDone] = s1use(false); const [phase, setPhase] = s1use('intro'); const startedAt = s1ref(null); const rafRef = s1ref(null); s1eff(() => { if (!questionDone) return; setPhase('running'); startedAt.current = performance.now(); const tick = (now) => { const elapsed = now - startedAt.current; setT(elapsed); if (elapsed >= TOTAL_MS) { setPhase('answer'); return; } rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); }, [questionDone]); function stateAt(step) { if (t < step.start) return 'queued'; if (t < step.start + step.dur) return 'running'; return 'done'; } const visible = (step) => t >= step.start - 250; const showAnswer = phase === 'answer' || phase === 'done'; // Sidebar values update as tool calls complete const research = stateAt(SCRIPT[2]) === 'done' ? '7 packages' : stateAt(SCRIPT[2]) === 'running' ? 'Running…' : stateAt(SCRIPT[1]) === 'done' ? '7 planned' : 'Pending'; const storyboard = stateAt(SCRIPT[3]) === 'done' ? '4 sections' : stateAt(SCRIPT[3]) === 'running' ? 'Building…' : 'Pending'; const deck = showAnswer ? 'Ready' : stateAt(SCRIPT[4]) === 'running' ? 'Synthesizing…' : '—'; return (
setQuestionDone(true)} /> {/* Tool call stack — always visible, scrollable when the answer arrives so the full trail stays reachable below the streamed answer */}
{SCRIPT.map((step) => { if (!visible(step)) return null; const st = stateAt(step); if (step.id === 'gate') { return (
); } return (
); })}
{showAnswer && (
)} {/* Right sidebar — research overview */}
); } function OverviewSidebar({ research, dataset, storyboard, deck, elapsed, questionDone, answerDone }) { return (
Research Overview
{/* Live metrics */}
Pipeline
3000 ? `${Math.min(7, Math.floor((elapsed - 3000) / 350))}` : '0')} />
{answerDone ? 'every claim traces to evidence' : questionDone ? 'orchestrating tool calls…' : 'awaiting question'}
); } function OverviewCard({ label, value, accent, state }) { const pending = state === 'Pending' || value === '—'; return (
{label}
{value}
); } function Metric({ k, v, accent }) { return (
{k} {v}
); } // Stream the answer text token-by-token with citations becoming chips. // ───────────────────────────────────────────────────────────────────── // AnalystThought — the "thinking like an analyst" card. Renders for the // Quality gate step. Three questions cycle through while running; when // done, shows the verdict (continue / synthesize) with quiet authority. // ───────────────────────────────────────────────────────────────────── const ANALYST_QUESTIONS = [ 'Do we have enough evidence to answer?', 'Are there gaps a stakeholder would push back on?', 'Is the methodology airtight?', ]; function AnalystThought({ state }) { const [qIdx, setQIdx] = s1use(0); const running = state === 'running'; const done = state === 'done'; // Cycle the questions while running s1eff(() => { if (!running) return; const t = setInterval(() => { setQIdx((i) => (i + 1) % ANALYST_QUESTIONS.length); }, 700); return () => clearInterval(t); }, [running]); const accent = done ? pitchC.moss : pitchC.orange; const accentBg = done ? '#f3fbf7' : '#fff7f3'; const accentBd = done ? `${pitchC.moss}33` : '#ffd9c9'; return (
{/* Brain / thought icon */}
Thinking like an analyst {running && ( {[0, 1, 2].map(i => ( ))} )}
{running && ( "{ANALYST_QUESTIONS[qIdx]}" )} {done && ( Coverage sufficient — synthesize. )}
); } // ───────────────────────────────────────────────────────────────────── // Stream the answer text in word-chunks, with citations becoming clickable as // they appear. Just visual flair — no real interaction needed in this slide. // ───────────────────────────────────────────────────────────────────── function AnswerStream({ parts }) { const tokens = []; parts.forEach((p) => { if (p.kind === 'text') { const words = p.value.split(/(\s+)/); for (let j = 0; j < words.length; j += 4) { tokens.push({ kind: 'text', value: words.slice(j, j + 4).join('') }); } } else { tokens.push(p); } }); const [n, setN] = s1use(0); s1eff(() => { if (n >= tokens.length) return; const t = setTimeout(() => setN(n + 1), 32); return () => clearTimeout(t); }, [n, tokens.length]); return (
{tokens.slice(0, n).map((tk, i) => { if (tk.kind === 'text') return {tk.value}; return {}} />; })} {n < tokens.length && ( )}
); } window.Slide1Cascade = Slide1Cascade;