/* Pitch site — editorial sections, part B Narrative (T1-T5 worked example) · Signals · Flow · Safety */ const { useState: bUseState, useEffect: bUseEffect, useRef: bUseRef, useMemo: bUseMemo } = React; /* ==================================================================== 6. NARRATIVE — T1-T5 as editorial chapter Each tier gets its own block showing how the same session's content gets progressively compressed up the layers. ==================================================================== */ function PitchNarrative() { return (
chapter v. · five layers

从单次会话到一句领导日报 ——
五层 LLM 叙事，逐层凝缩。

原始 transcript 太碎、太多、太脏，没人会读。我们用 5 层 LLM prompt 把它逐层压缩 —— T1 在一次会话结束时落地，T5 是每天给 CEO 的 3 行简报。 每层独立缓存、按 tier 计费、daily budget 守护。 下方是同一条 session 顺着 T1 → T5 完整凝缩的真实样本。

{window.DEMO.llmTiers.map((t, i) => (
{t.key}
{t.model}

{t.name}

{t.desc}
{t.sub} cache hit ≈ 60%
input · 喂给 prompt
{t.input}
output · 渲染到看板
{t.output}
))}

—— 同一条 session 沿五层凝缩：47 条工具调用 → 80 字 T1 → 2 行成员 digest → 2 行项目 digest → 1 句 attention 改写 → 1 行领导日报。 每一层都有缓存、单测、tier 预算；任何一层失败，下面那层只是降级为模板，不会把整套关停。

); } /* ==================================================================== 7. SIGNALS — categorized editorial ==================================================================== */ function PitchSignals() { return (
chapter vi. · sixteen signals

16 个结构化信号 ——
不是关键词检索，是检测器。

每个信号都是独立的 TypeScript 函数，喂团队 7 日窗口的会话快照、吐回一组命中。 它们组合起来回答 4 个领导级问题：谁在跑、谁在卡、谁在帮、谁在飘。 按 6 大类组织如下 —— 每条都附本次 demo dataset 的真实命中样本。

{window.DEMO.signalCategories.map((cat, i) => (
{cat.signals.length} signals
{cat.intro}
{cat.signals.map(s => (
{s.glyph}
{s.name}
{s.id}
{s.desc}
↪ {s.example}
))}
))}
); } /* ==================================================================== 8. FLOW — sticky timeline + editorial detail ==================================================================== */ function PitchFlow() { const [active, setActive] = bUseState(0); const [playing, setPlaying] = bUseState(false); const [swap, setSwap] = bUseState(false); const timer = bUseRef(null); const goTo = (i) => { setSwap(true); setTimeout(() => { setActive(i); setSwap(false); }, 220); }; bUseEffect(() => { if (!playing) return; timer.current = setInterval(() => { goTo((active + 1) % window.DEMO.flowSteps.length); }, 2800); return () => clearInterval(timer.current); }, [playing, active]); const step = window.DEMO.flowSteps[active]; return (
chapter vii. · the pipeline

一个 Stop hook 到看板 ——
30 秒，6 步。

每位开发者的会话结束都会触发一次完整的 6 步管线。 每一步独立、可重启、可重放，崩溃从不影响 Claude Code 主流程。 点左侧任一步骤查看细节，或开自动播放。

{window.DEMO.flowSteps.map((s, i) => ( ))}
step {active + 1} of {window.DEMO.flowSteps.length} · {step.sub}

{step.title}

{step.metrics.map(([k, v], i) => (
{k}
{v}
))}
); } const FLOW_TERMINAL = { stop: [ ["c", "# Claude Code → Stop hook fires"], ["k", "$ node ~/.riven/bin/bin-digital-twin-tap.cjs"], ["", "▸ session: ses_8f3a2c…"], ["", "▸ messages: 47 tools: 12"], ["", "▸ cwd: /Users/alex/work/matrix-riven"], ["s", "✓ enqueued → ~/.riven/digital-twin/queue/"] ], queue: [ ["c", "# queue snapshot — daemon detached, drains in background"], ["k", "$ ls ~/.riven/digital-twin/queue/"], ["", "rec_ses_8f3a2c.jsonl 12.4 KB"], ["", "rec_ses_8e9b14.jsonl 8.1 KB"], ["", "rec_ses_8d72fa.jsonl 31.2 KB"], ["c", "# offline-resilient. FIFO. fsync per write."] ], redact: [ ["c", "# before redaction"], ["", "headers.authorization: \"Bearer sk-ant-abc…\""], ["", "cwd: \"/Users/alex/repo/teambrain\""], ["", "tool.bash.cmd: \"AKIA1234… s3 cp …\""], ["c", "# after"], ["s", "headers.authorization: \"\""], ["s", "cwd: \"/Users//repo/teambrain\""], ["s", "tool.bash.cmd: \" s3 cp …\""] ], gzip: [ ["k", "$ daemon flush rec_ses_8f3a2c"], ["", "▸ raw: 12.4 KB"], ["", "▸ gzip: 1.3 KB (10.5×)"], ["k", "POST /v1/cc-sessions"], ["", " Authorization: Bearer ************"], ["", " Content-Encoding: gzip"], ["s", " ← 200 OK { ok: true, stored: 1 }"] ], persist: [ ["k", "$ tree ~/riven-collector/alex/2026-05-20/"], ["", "├── ses_8f3a2c.jsonl"], ["", "├── ses_8e9b14.jsonl"], ["", "└── .leadership-index.json"], ["c", "# inject-mock content is auto-rejected"], ["n", "← 200 OK { ok: true, dropped: 'inject-mock' }"] ], render: [ ["k", "GET /api/overview?date=2026-05-20"], ["", "{"], ["d", " \"kpis\": { team_total_usd: 4.32, ... },"], ["d", " \"attention\": [ { kind: \"member\", refId: ... } ],"], ["d", " \"members\": [ ... ],"], ["d", " \"projects\": [ ... ],"], ["d", " \"llmBrief\": [ \"今日团队推进顺利…\" ]"], ["", "}"], ["c", "# ETag → 304 on unchanged poll. <200 bytes wire cost."] ] }; function FlowTerminal({ step }) { const lines = FLOW_TERMINAL[step] || []; const [visible, setVisible] = bUseState([]); bUseEffect(() => { setVisible([]); const ts = lines.map((_, i) => setTimeout(() => setVisible(v => [...v, i]), 160 * i + 80)); return () => ts.forEach(clearTimeout); }, [step]); return (
{lines.map((l, i) => (
{l[1]}
))}
); } /* ==================================================================== 9. SAFETY — The Pact (6 numbered commitments) + live demo as evidence ==================================================================== */ function PitchSafety() { return (
chapter viii. · the pact

团队的工程数据是
非常敏感的资产。

这是我们和你的 6 条契约。每一条在仓库里都有对应的代码路径、单测、launch audit 记录。 说到做到 —— 出处可查。

{window.DEMO.pact.map((p, i) => (
{p.num}
))}
live evidence

上面那条「敏感字段在源头被拦下」是怎么发生的 ——
下方实时演示。

改改左侧输入或开关任一规则，看右侧脱敏产物如何变化。 这正是 shared/pii/redactor 在守护进程里跑的逻辑。

); } const SAMPLE_INPUT = `用户在 Bash 工具里执行了: curl -H "Authorization: Bearer sk-ant-api03-aBcD1234567890XyZ" \\ https://api.example.com/v1/users 我的 cwd 是 /Users/alex/work/teambrain/packages/server， 联系邮箱 alex.example@company.io， 临时密钥 AKIA1234567890ABCDEF， git hash 是 8f3a2c1d7e4b6f9a0c2d5e8b1f4a7c3d (sha 不该被脱敏)。`; const RED_RULES = [ { key: "bearer", label: "Bearer Token", color: "#B0625A", pattern: /Bearer\s+([A-Za-z0-9_\-]+)/g, replace: () => "Bearer " }, { key: "apikey", label: "API Key", color: "#B0625A", pattern: /\b(sk-[a-zA-Z0-9_\-]+|AKIA[0-9A-Z]{16})\b/g, replace: () => "" }, { key: "email", label: "Email", color: "#8B6B9C", pattern: /\b[A-Za-z0-9._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}\b/g, replace: () => "" }, { key: "userpath",label: "User Path", color: "#C8924B", pattern: /\/(Users|home)\/([A-Za-z0-9_.\-]+)/g, replace: (_, p1) => `/${p1}/` } ]; function Redactor() { const [input, setInput] = bUseState(SAMPLE_INPUT); const [enabled, setEnabled] = bUseState({ bearer: true, apikey: true, email: true, userpath: true }); const { output, hits } = bUseMemo(() => { let text = input; const counts = {}; RED_RULES.forEach(r => { counts[r.key] = 0; if (!enabled[r.key]) return; text = text.replace(r.pattern, (...args) => { counts[r.key]++; return r.replace(...args); }); }); return { output: text, hits: counts }; }, [input, enabled]); const highlighted = bUseMemo(() => { const matches = []; RED_RULES.forEach(r => { if (!enabled[r.key]) return; const re = new RegExp(r.pattern.source, r.pattern.flags); let m; while ((m = re.exec(input)) !== null) matches.push({ start: m.index, end: m.index + m[0].length, rule: r }); }); matches.sort((a, b) => a.start - b.start); const parts = []; let cursor = 0; matches.forEach(m => { if (m.start < cursor) return; if (m.start > cursor) parts.push({ text: input.slice(cursor, m.start), rule: null }); parts.push({ text: input.slice(m.start, m.end), rule: m.rule }); cursor = m.end; }); if (cursor < input.length) parts.push({ text: input.slice(cursor), rule: null }); return parts; }, [input, enabled]); const totalHits = Object.values(hits).reduce((a, b) => a + b, 0); return ( <>
raw transcript · 开发者本地