// System running demo for Project 1 — visualizes a multi-turn conversation
// flowing through the LangGraph pipeline. Reads global Stage timeline.
// Duration target: ~92s.
// ── Timeline config ────────────────────────────────────────────────────────
// Each chat message has t_appear (when bubble slides in) and t_stream (when
// content begins streaming char-by-char). Each node activation has start/end.
const P01_SYS = {
messages: [
{ t: 1.2, stream: 1.2, role: 'user', text: 'Lactose-free breakfast options for kids, under $10. At least 4 picks.' },
{ t: 23.5, stream: 24.5, role: 'assistant', text:
'Found 5 options matching dietary and price filters. Ranked by rerank score:\n\n' +
'1. Almond Breeze Unsweetened Vanilla — $4.49 · 4.6★\n' +
'2. Cheerios Original 12oz — $5.29 · 4.7★ · naturally lactose-free\n' +
'3. Chobani Oat Vanilla Blend 32oz — $4.99 · 4.4★\n' +
'4. So Delicious Coconut Yogurt 4-pack — $5.49 · 4.3★\n' +
'5. Bob\'s Red Mill Steel-Cut Oats — $7.99 · 4.8★',
citations: ['P-24193', 'P-04412', 'P-39271', 'P-18044', 'P-02810'] },
{ t: 38.4, stream: 38.4, role: 'user', text: 'Add picks 1 and 2 to my cart.' },
{ t: 50.4, stream: 51.2, role: 'assistant', text:
'Added 2 items to cart:\n• Almond Breeze Unsweetened Vanilla — $4.49\n• Cheerios Original 12oz — $5.29\n\nCart total: $9.78 (1 free shipping eligible at $35)' },
{ t: 58.0, stream: 58.0, role: 'user', text: 'Actually, refund the organic bananas from last week\'s order.' },
{ t: 71.6, stream: 72.4, role: 'assistant', text:
'Refund issued for Organic Bananas 3lb — $4.99. Reason: produce return window (7 days).\n\nCredit will appear within 1–3 business days. Confirmation #RF-209814.' },
{ t: 77.0, stream: 77.0, role: 'user', text: 'The Blue Diamond almonds you sold me triggered a severe allergic reaction in my son. I want a full refund and damages.' },
{ t: 87.5, stream: 88.3, role: 'assistant', text:
'⚠ Escalated to human supervisor.\n\nThis case involves health impact + compensation request, both of which exceed automated policy bounds. A specialist will reach out within 1 hour. Conversation context preserved.' },
],
// Node activations [node-id, start, end, label-when-active]
activations: [
// Turn 1: product search
['intent', 3.0, 7.5, 'product_search · filters: { price<10, lactose_free, breakfast }'],
['sem', 10.5, 22.5, ''],
['sem.bm25', 10.8, 13.0, '47 hits over product_name + aisle'],
['sem.dense', 11.4, 13.8, '23 hits · top cos-sim 0.847'],
['sem.rrf', 13.0, 15.2, 'k=60 fusion · top-20 emitted'],
['sem.rerank', 15.2, 18.6, 'Cohere v3 · top-5 · 0.92 → 0.71'],
['synth', 18.6, 23.0, 'Claude · 5 citations · 412 tokens'],
// Turn 2: cart op
['intent', 40.0, 43.6, 'cart_op · add_items([P-24193, P-04412])'],
['cart', 43.6, 49.6, 'cart.add → 2 items · subtotal $9.78'],
['synth', 49.6, 52.4, 'Claude · short response · 84 tokens'],
// Turn 3: refund (auto-approved)
['intent', 59.0, 62.6, 'refund_request · item: bananas'],
['refund', 62.6, 70.8, 'policy check ✓ · value<$100 · within 7-day window'],
['synth', 70.8, 73.4, 'Claude · confirmation · 96 tokens'],
// Turn 4: refund (escalate)
['intent', 78.0, 81.4, 'refund_request · health_impact: true · compensation: true'],
['refund', 81.4, 86.4, 'policy: SENSITIVE_CATEGORY · health_claim · ESCALATE'],
['escalate', 85.4, 90.0, 'human handoff · supervisor notified · context preserved'],
],
// Turn markers (for top bar)
turns: [
{ start: 4.0, end: 35.5, label: 'Turn 1 · product_search', tools: 5, latency: '2.8s', cost: '$0.0063' },
{ start: 38.0, end: 56.0, label: 'Turn 2 · cart_op', tools: 2, latency: '1.6s', cost: '$0.0019' },
{ start: 58.0, end: 75.5, label: 'Turn 3 · refund · auto', tools: 3, latency: '2.1s', cost: '$0.0031' },
{ start: 77.0, end: 92.0, label: 'Turn 4 · refund · escalate', tools: 2, latency: '1.9s', cost: '$0.0028' },
],
};
// ── Helpers ────────────────────────────────────────────────────────────────
function nodeState(activations, nodeId, t) {
const acts = activations.filter(a => a[0] === nodeId);
if (!acts.length) return { state: 'idle', label: '' };
let last = null;
for (const [, s, e, label] of acts) {
if (t >= s && t <= e) return { state: 'active', label, progress: (t-s)/(e-s) };
if (t > e) last = { state: 'done', label };
}
return last || { state: 'idle', label: '' };
}
function currentTurn(t) {
return P01_SYS.turns.findIndex(turn => t >= turn.start && t < turn.end);
}
// ── Main demo ──────────────────────────────────────────────────────────────
function P01SystemDemo() {
return (
);
}
function SystemBackdrop() {
return (
);
}
function SystemTopBar() {
const t = useTime();
const turnIdx = currentTurn(t);
const turn = turnIdx >= 0 ? P01_SYS.turns[turnIdx] : null;
return (
live trace · langsmith
·
tr_8f3a92e1c4b0
{turn ? (
<>
{turn.label}
·
) : (
standby
)}
);
}
function Stat({ label, value }) {
return (
);
}
function SystemBottomBar() {
const t = useTime();
const finished = t > 90;
return (
e-commerce-assistant · langgraph 0.2 · claude-sonnet-4-5-20250929
{finished ? '4 turns · 1 escalation · 8.4s total · $0.0141' : 'streaming...'}
);
}
// ── Chat panel ─────────────────────────────────────────────────────────────
function ChatPanel() {
const t = useTime();
const scrollRef = React.useRef(null);
// Build visible message list with streaming progress
const visible = P01_SYS.messages
.filter(m => t >= m.t)
.map(m => {
if (t < m.stream) return { ...m, text: '', streaming: false };
const elapsed = t - m.stream;
const dur = m.text.length / 80; // chars per second
const ratio = Math.min(1, elapsed / dur);
return { ...m, text: m.text.slice(0, Math.floor(m.text.length * ratio)), streaming: ratio < 1 };
});
React.useEffect(() => {
if (!scrollRef.current) return;
scrollRef.current.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' });
}, [visible.length, visible.length ? visible[visible.length-1].text.length : 0]);
return (
chat · user_4421
session_live
{visible.map((m, i) => )}
);
}
function ChatBubble({ msg }) {
const isUser = msg.role === 'user';
return (
{isUser ? 'you' : 'assistant'}
{msg.text}{msg.streaming && }
{msg.citations && msg.text.length > msg.text.length * 0.95 && !msg.streaming && (
{msg.citations.map((c, i) => (
{c}
))}
)}
);
}
// ── Architecture canvas ────────────────────────────────────────────────────
function ArchitectureCanvas() {
const t = useTime();
return (
langgraph · stateflow
checkpoint: postgres
);
}
function Edges({ t }) {
// Active edges based on current node states
const intent = nodeState(P01_SYS.activations, 'intent', t);
const sem = nodeState(P01_SYS.activations, 'sem', t);
const cart = nodeState(P01_SYS.activations, 'cart', t);
const refund = nodeState(P01_SYS.activations, 'refund', t);
const synth = nodeState(P01_SYS.activations, 'synth', t);
const escal = nodeState(P01_SYS.activations, 'escalate', t);
return (
{/* user → intent */}
{/* intent → branches */}
{/* branches → synth */}
{/* refund → escalate */}
{/* synth → out */}
{/* escalate → out */}
);
}
function Edge({ from, to, active, curve, variant = 'default' }) {
const [x1, y1] = from; const [x2, y2] = to;
const stroke = variant === 'warn' ? '#fbbf24' : (active ? '#7c5cff' : '#1c2030');
const opacity = active ? 1 : 0.35;
const w = active ? 1.6 : 1;
let d;
if (curve) {
const my = (y1 + y2) / 2;
d = `M ${x1} ${y1} C ${x1} ${my}, ${x2} ${my}, ${x2} ${y2}`;
} else {
d = `M ${x1} ${y1} L ${x2} ${y2}`;
}
return (
{active && (
)}
);
}
function ArchNode({ x, y, w, h, id, label, subtitle, small, subSteps, variant, t }) {
const state = nodeState(P01_SYS.activations, id, t);
const isActive = state.state === 'active';
const isDone = state.state === 'done';
// colors
const baseStroke =
variant === 'warn' ? '#fbbf24' :
isActive ? '#7c5cff' :
isDone ? '#34d399' : '#222838';
const fillBg =
variant === 'warn' && (isActive || isDone) ? 'rgba(251,191,36,0.06)' :
isActive ? 'rgba(124,92,255,0.08)' :
isDone ? 'rgba(52,211,153,0.04)' :
'rgba(255,255,255,0.015)';
return (
{isActive && (
)}
{label}
{isDone && !isActive && (
✓
)}
{subtitle && !small && (
{subtitle}
)}
{subSteps && (
{subSteps.map((s, i) => {
const ss = nodeState(P01_SYS.activations, s.id, t);
const sActive = ss.state === 'active';
const sDone = ss.state === 'done';
const yy = y + 55 + i * 26;
const color = sActive ? '#7c5cff' : sDone ? '#34d399' : '#3a4258';
return (
{sActive && }
{s.label}
{sDone && !sActive && ✓}
);
})}
)}
{/* active label below */}
{isActive && state.label && (
→ {state.label}
)}
);
}
Object.assign(window, { P01SystemDemo });