// S — Inside the storyboard: how the case gets built. // Faithful to the product flow: from the business question the agent derives // the story SPINE (sub-questions in narrative order), verdicts what the pool // already supports, asks the user, researches the gaps, then writes FLOWING // headlines — each carrying how well it's backed (✓ Done / Research gap / // Editorial review). Left: the flow. Right: the real Storyboard table view. const { useState: seUse, useEffect: seEff } = React; const { pitchC, pitchMono } = window; // Flow stages (canonical order from mcp_server/tools/storyboard.py) const FLOW = [ { k: 'ask', label: 'Ask', sub: 'the business question' }, { k: 'survey', label: 'Survey', sub: 'decompose → story spine' }, { k: 'approve',label: 'Approve', sub: 'you greenlight or reshape', human: true }, { k: 'research',label: 'Research', sub: 'close the gaps it found' }, { k: 'write', label: 'Headlines', sub: 'flowing, each one earned' }, ]; const BQ = 'Should Habitat lead with furniture or homeware?'; // The storyboard spine: sections = sub-questions, rows = flowing headlines const SPINE = [ { band: 'Where does awareness already convert?', rows: [ { n: '1', conn: null, headline: 'Homeware is where awareness already converts', badge: 'done', chart: 'bar' }, ], }, { band: 'How big is the gap — and is it moving?', rows: [ { n: '2', conn: 'therefore', headline: 'so the conversion gap runs 2.4× against furniture', badge: 'done', chart: 'bar' }, { n: '3', conn: 'but', headline: 'furniture momentum is quietly building', badge: 'gap', chart: 'line' }, ], }, { band: 'Can we win the category we’d lead with?', rows: [ { n: '4', conn: 'because', headline: 'no rival has locked up homeware yet', badge: 'done', chart: 'stack' }, ], }, { band: 'recommendations', isRec: true, rows: [ { n: 'R', conn: 'which is why', headline: 'shift the next flight behind homeware', badge: 'review', chart: 'text' }, ], }, ]; function SlideStoryEval() { // step: 1 ask · 2 survey/spine · 3 headlines drafted · 4 approve+research · 5 done const [step, setStep] = seUse(0); seEff(() => { const ts = [ setTimeout(() => setStep(1), 300), setTimeout(() => setStep(2), 1000), setTimeout(() => setStep(3), 1900), setTimeout(() => setStep(4), 2900), setTimeout(() => setStep(5), 3800), ]; return () => ts.forEach(clearTimeout); }, []); return (
); } // ───────────────────────────────────────────────────────────────────── // LEFT — the build flow // ───────────────────────────────────────────────────────────────────── function FlowRail({ step }) { // ribbon highlight: ask@1, survey@2, approve@3, research@4, write@5 const reached = { ask: 1, survey: 2, approve: 3, research: 4, write: 5 }; return (
How it builds
{FLOW.map((f, i) => { const on = step >= reached[f.k]; const active = step === reached[f.k]; const accent = f.human ? pitchC.orange : pitchC.sea; return (
{/* connector line */} {i < FLOW.length - 1 && (
reached[f.k] ? accent : pitchC.hair, transition: 'background 360ms ease', }} /> )}
{f.label} {f.human && you}
{f.sub}
); })}
); } function FlowIcon({ kind, on }) { const c = on ? '#fff' : pitchC.muted2; const p = { width: 17, height: 17, viewBox: '0 0 24 24', fill: 'none', stroke: c, strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' }; if (kind === 'ask') return ; if (kind === 'survey') return ; if (kind === 'approve') return ; if (kind === 'research')return ; return ; } // ───────────────────────────────────────────────────────────────────── // RIGHT — the Storyboard table (mirrors StoryboardTable.jsx) // ───────────────────────────────────────────────────────────────────── const BADGE = { done: { label: '✓ Done', color: pitchC.moss, bg: pitchC.mossBg }, gap: { label: 'Research gap', color: pitchC.orange, bg: '#fff1ec' }, review: { label: 'Editorial review',color: pitchC.sea, bg: pitchC.seaBg }, }; function StoryboardView({ step }) { const showSpine = step >= 2; const showRows = step >= 3; const researching = step === 4; const closed = step >= 5; let slideNo = 0; const gapCount = closed ? 0 : 1; return (
{/* header */}
Storyboard Habitat — Furniture vs Homeware {gapCount ? `${gapCount} research gap` : 'all earned'}
{/* business question band */}
= 1 ? 1 : 0, transition: 'opacity 360ms ease', }}> Business question {BQ}
{/* column headers */}
No.StoryEvidenceChart
{/* spine + rows */}
{SPINE.map((sec, si) => ( {sec.rows.map((r) => { slideNo += 1; return ( ); })} ))}
); } function SectionBand({ sec, visible, delay }) { return (
{sec.isRec ? ( recommendations ) : ( {sec.band} )}
); } function HeadlineRow({ r, no, visible, delay, researching, closed }) { const isGap = r.badge === 'gap'; const running = isGap && researching; const badgeKey = isGap && closed ? 'done' : r.badge; const b = BADGE[badgeKey]; return (
{/* No. */} {r.n} {/* Story — connective + flowing headline */} {r.conn && ( {r.conn} )} {r.headline} {/* Evidence badge */} {running ? ( researching… ) : ( {b.label} )} {/* Chart glyph */} {r.chart === 'text' ? 'text' : r.chart}
); } function ChartGlyph({ kind }) { const c = pitchC.muted2; const p = { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'none', stroke: c, strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' }; if (kind === 'bar') return ; if (kind === 'line') return ; if (kind === 'stack') return ; return ; } window.SlideStoryEval = SlideStoryEval;