/* VC product-first page — bilingual edition. */ const { useState: vUseState, useEffect: vUseEffect, useRef: vUseRef, useMemo: vUseMemo } = React; const T = (s) => window.tr(s); const LangToggle = () => window.MR.LangToggle(); /* ──────────────────────────────────────────────────────────── */ function VcApp() { const [so, setSo] = vUseState(null); window.MR.useLang(); // re-render on lang change vUseEffect(() => { window.MR.installRevealObserver(); }, []); vUseEffect(() => { document.querySelectorAll(".magnetic:not([data-magnetized])").forEach(btn => { btn.setAttribute("data-magnetized", "1"); btn.addEventListener("mousemove", (e) => { const r = btn.getBoundingClientRect(); const dx = (e.clientX - (r.left + r.width / 2)) * 0.2; const dy = (e.clientY - (r.top + r.height / 2)) * 0.22; btn.style.transform = `translate(${dx}px, ${dy}px)`; }); btn.addEventListener("mouseleave", () => { btn.style.transform = ""; }); }); }, []); return ( <> setSo({ kind: k, id: i })} /> setSo({ kind: k, id: i })} /> setSo(null)} /> ); } /* ──────────────────────────────────────────────────────────── */ function VcNav() { return ( ); } /* ──────────────────────────────────────────────────────────── */ function VcHero() { return (
{T("matrix·riven · v0.2 · live demo")}

{T("下面就是 Matrix·Riven —— ")}{T("真实在跑")}{T("。")}
{T("没有截图，没有概念图。")}

{T("下面 4 个模块都是仓库源码直接渲染的真实组件 —— 点 attention 行开抽屉、点 step 看终端 log、改输入看 PII 脱敏。 你触摸到的每一像素，都是 prod 部署后客户会看到的同一份代码。")}

); } /* ──────────────────────────────────────────────────────────── */ function LiveDashboard({ openSlideover }) { return (

{T("① Dashboard")}
{T("点 attention 行 / 任意成员 tile —— 抽屉从右滑入。")}

{T("源码：")}packages/collector-server/src/leadership/views/。 {T("页面里的所有 KPI、attention 卡、成员 tile 来自同一份 React 渲染。")}
https://collector.riven.internal:8443/overview
live · v0.2.x
{T("↗ 上方 4 个 KPI 来自 leadership/aggregator.ts")} {T("↗ Attention 文案来自 LLM T4 prompt")} {T("↗ 成员两行短文来自 T2 prompt")}
); } /* ──────────────────────────────────────────────────────────── */ function LiveFlow() { const [active, setActive] = vUseState(0); const [playing, setPlaying] = vUseState(true); const [swap, setSwap] = vUseState(false); const timer = vUseRef(null); const steps = window.DEMO.flowSteps; const goTo = (i) => { setSwap(true); setTimeout(() => { setActive(i); setSwap(false); }, 220); }; vUseEffect(() => { if (!playing) return; timer.current = setInterval(() => goTo((active + 1) % steps.length), 3000); return () => clearInterval(timer.current); }, [playing, active, steps.length]); const step = steps[active]; return (

{T("② 数据管线")}
{T("从 Claude Code Stop hook 到看板 —— 30 秒。")}

{T("每一步都是源码里真实可点：tap.cjs → 队列 → redactor → gzip → /v1/cc-sessions → aggregator。")}
{steps.map((s, i) => ( ))}
step {active + 1} / {steps.length} · {step.sub}

{T(step.title)}

{step.metrics.map(([k, v], i) => (
{T(k)}
{T(v)}
))}
); } const FLOW_TERM = { stop: [ ["c", "# Claude Code → Stop hook fires"], ["k", "$ node ~/.riven/bin/bin-digital-twin-tap.cjs"], ["", "▸ session: ses_8f3a2c…"], ["", "▸ messages: 47 tools: 12"], ["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"] ], redact: [ ["c", "# before"], ["", "authorization: \"Bearer sk-ant-abc…\""], ["", "cwd: \"/Users/alex/repo/teambrain\""], ["c", "# after"], ["s", "authorization: \"\""], ["s", "cwd: \"/Users//repo/teambrain\""] ], gzip: [ ["k", "$ daemon flush rec_ses_8f3a2c"], ["", "▸ raw: 12.4 KB → gzip: 1.3 KB (10.5×)"], ["k", "POST /v1/cc-sessions"], ["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"], ["n", "200 OK { ok: true, dropped: 'inject-mock' }"] ], render: [ ["k", "GET /api/overview?date=2026-05-20"], ["d", "{ kpis: {…}, attention: [...], members: [...], llmBrief: [...] }"], ["c", "# ETag → 304 on unchanged poll. <200 bytes wire cost."] ] }; function FlowTerminal({ step }) { const lines = FLOW_TERM[step] || []; const [visible, setVisible] = vUseState([]); vUseEffect(() => { setVisible([]); const ts = lines.map((_, i) => setTimeout(() => setVisible(v => [...v, i]), 180 * i + 80)); return () => ts.forEach(clearTimeout); }, [step]); return (
{lines.map((l, i) => (
{l[1]}
))}
); } /* ──────────────────────────────────────────────────────────── */ const SAMPLE_ZH = `用户在 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。`; const SAMPLE_EN = `Developer ran in Bash: curl -H "Authorization: Bearer sk-ant-api03-aBcD1234567890XyZ" \\ https://api.example.com/v1/users cwd was /Users/alex/work/teambrain/packages/server, contact email alex.example@company.io, temp key AKIA1234567890ABCDEF.`; const RR = [ { 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 LiveRedactor() { const lang = window.LANG; const [input, setInput] = vUseState(lang === "en" ? SAMPLE_EN : SAMPLE_ZH); const [enabled, setEnabled] = vUseState({ bearer: true, apikey: true, email: true, userpath: true }); vUseEffect(() => { setInput(window.LANG === "en" ? SAMPLE_EN : SAMPLE_ZH); }, [lang]); const { output, hits } = vUseMemo(() => { let text = input; const counts = {}; RR.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 = vUseMemo(() => { const matches = []; RR.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 (

{T("③ PII 脱敏")}
{T("改输入 / 关任一规则 —— 实时看右侧产物。")}

{T("源码：")}packages/shared/src/pii/redactor.ts。 {T("守护进程上送前在客户端跑过一遍，原文不出网。")}
{T("raw · 开发者本地")}