EXPLORATION 07 / 07
Agents in motion

What this showsA deterministic mock replay of omp fan-out: one main session, parallel subagents, sibling hub messages, an advisor span, a blocked branch, and verified returns.
seat / session operator 1 agent
seat / session operator/main 4 agents
seat / session operator/main/task-review 1 agent
seat / session operator/main/advisor 1 agent
main session 0s
Main session seat operator
□
lifetime span
task agent 0s
Research subagent seat …/main
□
lifetime span
scout agent 0s
Surface subagent seat …/main
□
lifetime span
designer agent 0s
Design subagent seat …/main
□
lifetime span
task agent 0s
Review subagent seat …/main
□
lifetime span
scout agent 0s
Nested review scout seat …/task-review
□
lifetime span
advisor agent 0s
Advisor span seat …/advisor
□
Svelte Flow
MOCK DATAstatic scene
signalreceipt
0:00operator seat starts
0 running0 blocked
What this shows
This is a mock, deterministic replay, not a live omp session. Spawn, hub message, and result are recorded as different relations. The signal is only a wake-up; the receipt readback is the moment completion becomes verified.
Read the agent-flow concept
Seat and session containment · 0 running · 0 completed · 0 relations shown
Wake-up is not proof
Signalwake-up only
Receipt readbacknot verified yet
No wake-up yet
Relation grammar
Spawnsolid fork · closed arrow
Hub messagedashed arc · open arrow · travelling pulse
Resultthick return · double chevron
Advisor spandotted tether · open circle
State shapes
Runningopen activity ring
Doneterminal check
Blockedhatch + pause glyph
Waitingdashed ring, no spinner
Event ledger
state at 0:00
0:00seat.startoperator seat starts
0:00agent.startmain session startsupcoming
0:01agent.spawnmain → research subagentupcoming
0:01agent.spawnmain → surface subagentupcoming
0:01agent.spawnmain → design subagentupcoming
0:01agent.spawnmain → review subagentupcoming
0:01agent.startresearch session startsupcoming
0:01agent.startsurface session startsupcoming
0:01agent.startdesign session startsupcoming
0:01agent.startreview session startsupcoming
0:03advisor.spanadvisor attached to mainupcoming
0:04agent.spawnreview → nested scoutupcoming
0:04agent.startnested scout session startsupcoming
0:05hub.messageresearch ↔ surface hub exchangeupcoming
0:05hub.messagesurface ↔ research hub exchangeupcoming
0:07agent.blocksurface session awaits operatorupcoming
0:09agent.resultresearch session resultupcoming
0:10agent.resultdesign session resultupcoming
0:11agent.resultnested scout resultupcoming
0:13agent.unblockoperator decision receivedupcoming
0:15agent.resultsurface session resultupcoming
0:16agent.resultreview session resultupcoming
0:20agent.resultmain session resultupcoming
0:21signalsignal wakes the seatupcoming
0:22receipt.readbackseat reads completion receiptupcoming
Focused agent
select a node
The graph stays readable without a selection. Choose an agent to inspect its role, seat, parent, and state-at-time.
Under the hood SVELTE 5View source
src/routes/demo/agents/+page.svelte
<script lang="ts">
  import { goto } from '$app/navigation';
  import { page } from '$app/state';
  import { onMount } from 'svelte';
  import {
    Background,
    BackgroundVariant,
    Controls,
    MiniMap,
    Panel,
    SvelteFlow,
    type Node
  } from '@xyflow/svelte';
  import DemoShell from '$lib/components/DemoShell.svelte';
  import AgentEdge from '$lib/components/agentviz/AgentEdge.svelte';
  import AgentNode from '$lib/components/agentviz/AgentNode.svelte';
  import AgentViewport from '$lib/components/agentviz/AgentViewport.svelte';
  import SeatGroupNode from '$lib/components/agentviz/SeatGroupNode.svelte';
  import { hierarchyGeometry, waveGeometry, type AgentPlacement } from '$lib/components/agentviz/layout';
  import type {
    AgentCanvasNode,
    AgentEdgeData,
    AgentFlowEdge,
    AgentFlowNode,
    AgentNodeData,
    AgentRelationKind,
    AgentView,
    SeatFlowNode
  } from '$lib/components/agentviz/types';
  import { frameAt, getScene, scenes } from '$lib/agentviz';
  import type { Frame, FrameAgent, Scene, SceneAgent, SceneEvent } from '$lib/agentviz/types';
  import source from './+page.svelte?raw';

  type Speed = 0.5 | 1 | 2 | 4;

  const waveScene: Scene = getScene('delegation-wave') ?? scenes[0];
  const hierarchyScene: Scene = getScene('seat-hierarchy') ?? waveScene;
  const nodeTypes = { agent: AgentNode, seat: SeatGroupNode };
  const edgeTypes = { 'agent-relation': AgentEdge };
  // Symmetric horizontal padding keeps the graph centred; the deeper bottom band
  // keeps the lowest row clear of the controls and minimap that float over it.
  const fitOptions = { padding: { x: 0.1, top: '4%', bottom: '13%' }, maxZoom: 1 } as const;

  let timeMs = $state(0);
  let playing = $state(false);
  let speed = $state<Speed>(1);
  let reducedMotion = $state(false);
  let focusedAgentId = $state<string | null>(null);
  let playbackFrame: number | null = null;

  let view = $derived.by((): AgentView => (page.url.searchParams.get('view') === 'hierarchy' ? 'hierarchy' : 'waves'));
  let scene = $derived(view === 'hierarchy' ? hierarchyScene : waveScene);
  let agentMap = $derived(new Map(scene.agents.map((agent) => [agent.id, agent])));
  let parentMap = $derived(new Map(scene.agents.map((agent) => [agent.id, agent.parent])));
  let startTimeMap = $derived.by(() => {
    const map = new Map<string, number>();
    for (const event of scene.events) {
      if (event.kind === 'agent.start') map.set(event.actor, event.t);
      if (event.kind === 'agent.spawn' && event.target && !map.has(event.target)) map.set(event.target, event.t);
    }
    return map;
  });
  let eventMap = $derived(new Map(scene.events.map((event) => [event.id, event])));
  let geometry = $derived(view === 'hierarchy' ? hierarchyGeometry(scene.agents, startTimeMap) : waveGeometry(scene.agents, startTimeMap));
  let agentIds = $derived(new Set(scene.agents.map((agent) => agent.id)));

  let frame = $derived(frameAt(scene, Math.round(timeMs)));
  let nodes = $derived.by(() => buildNodes(frame, view));
  let edges = $derived.by(() => buildEdges(frame));
  let currentEvent = $derived.by(() => {
    let latest: SceneEvent | null = null;
    for (const event of scene.events) {
      if (event.t <= frame.t && (!latest || event.t >= latest.t)) latest = event;
    }
    return latest;
  });
  let focusedAgent = $derived(focusedAgentId ? agentMap.get(focusedAgentId) ?? null : null);
  let focusedFrameAgent = $derived(focusedAgentId ? frame.agents[focusedAgentId] ?? null : null);
  let activeAgents = $derived(Object.values(frame.agents).filter((agent) => agent.status === 'running').length);
  let completedAgents = $derived(frame.completed.length);
  let visibleRelations = $derived(edges.filter((edge) => !edge.hidden).length);
  let timeLabel = $derived(formatTime(frame.t));
  let durationLabel = $derived(formatTime(scene.durationMs));
  let signalLabel = $derived(frame.receiptVerified ? 'Receipt readback verified' : frame.signalled ? 'Signal sent · wake-up only' : 'No wake-up yet');
  let viewSummary = $derived(view === 'waves' ? 'Time-forward fan-out' : 'Seat and session containment');

  onMount(() => {
    const media = window.matchMedia('(prefers-reduced-motion: reduce)');
    const handleMotion = () => {
      reducedMotion = media.matches;
      if (reducedMotion) stopPlayback();
    };
    handleMotion();
    media.addEventListener?.('change', handleMotion);
    return () => {
      stopPlayback();
      media.removeEventListener?.('change', handleMotion);
    };
  });

  function stopPlayback() {
    playing = false;
    if (playbackFrame !== null) cancelAnimationFrame(playbackFrame);
    playbackFrame = null;
  }

  function startPlayback() {
    if (reducedMotion) return;
    if (timeMs >= scene.durationMs) timeMs = 0;
    playing = true;
    let previous = performance.now();
    const tick = (now: number) => {
      if (!playing) return;
      const delta = Math.min(120, Math.max(0, now - previous));
      previous = now;
      const next = Math.min(scene.durationMs, timeMs + delta * speed);
      timeMs = next;
      if (next >= scene.durationMs) {
        stopPlayback();
        return;
      }
      playbackFrame = requestAnimationFrame(tick);
    };
    playbackFrame = requestAnimationFrame(tick);
  }

  function togglePlayback() {
    if (playing) stopPlayback();
    else startPlayback();
  }

  function replay() {
    stopPlayback();
    timeMs = 0;
  }

  function seekFromInput(event: Event) {
    timeMs = Math.max(0, Math.min(scene.durationMs, Number((event.currentTarget as HTMLInputElement).value)));
  }

  function changeSpeed(event: Event) {
    const value = Number((event.currentTarget as HTMLSelectElement).value);
    if (value === 0.5 || value === 1 || value === 2 || value === 4) speed = value;
  }

  function stepEvent(direction: -1 | 1) {
    stopPlayback();
    const times = [...new Set(scene.events.map((event) => event.t))].sort((a, b) => a - b);
    if (direction > 0) {
      timeMs = times.find((time) => time > timeMs + 1) ?? scene.durationMs;
    } else {
      timeMs = [...times].reverse().find((time) => time < timeMs - 1) ?? 0;
    }
  }

  async function setView(next: AgentView) {
    if (next === view) return;
    await goto(`/demo/agents?view=${next}`, { replaceState: true, keepFocus: true, noScroll: true });
  }

  function handleNodeClick(event: { node: Node }) {
    if (event.node.type === 'agent') focusedAgentId = event.node.id;
  }

  function handlePaneClick() {
    focusedAgentId = null;
  }

  function advisorForAgent(agent: SceneAgent, currentFrame: Frame) {
    return currentFrame.advisors.filter((advisor) => {
      if (advisor.target === agent.id || advisor.id === agent.id) return true;
      const event = eventMap.get(advisor.id);
      return event?.actor === agent.id || event?.target === agent.id;
    });
  }

  function stateForAgent(agent: SceneAgent, currentFrame: Frame): FrameAgent {
    const state = currentFrame.agents[agent.id];
    if (state) return state;
    const advisorEvent = scene.events.find((event) => event.kind === 'advisor.span' && (event.actor === agent.id || event.target === agent.id));
    if (agent.role !== 'advisor' || !advisorEvent || advisorEvent.t > currentFrame.t) return { id: agent.id, status: 'pending' };
    const end = advisorEvent.durationMs === undefined ? undefined : advisorEvent.t + advisorEvent.durationMs;
    return { id: agent.id, status: end !== undefined && currentFrame.t >= end ? 'done' : 'running', startedAt: advisorEvent.t, endedAt: end };
  }

  function createAgentNode(placement: AgentPlacement, currentFrame: Frame, currentView: AgentView): AgentFlowNode {
    const { agent, compact } = placement;
    const state = stateForAgent(agent, currentFrame);
    const advisors = advisorForAgent(agent, currentFrame);
    const hasStartEvent = scene.events.some((event) => {
      if (event.t > currentFrame.t) return false;
      if (event.kind === 'agent.start') return event.actor === agent.id;
      if (event.kind === 'agent.spawn') return event.target === agent.id;
      if (event.kind === 'advisor.span') return event.actor === agent.id || event.target === agent.id;
      return false;
    });
    const revealed = agent.role === 'main' || hasStartEvent || currentFrame.spawned.includes(agent.id) || state.status !== 'pending';
    const start = state.startedAt;
    const end = state.endedAt;
    const elapsed = start === undefined ? 0 : Math.max(0, Math.min(currentFrame.t, end ?? currentFrame.t) - start);
    const completedAt = scene.events.find((event) => event.kind === 'agent.result' && event.actor === agent.id)?.t;
    const justCompleted = currentFrame.completed.includes(agent.id) && completedAt !== undefined && currentFrame.t - completedAt < 650;
    return {
      id: agent.id,
      type: 'agent',
      position: { x: placement.x, y: placement.y },
      width: placement.width,
      height: placement.height,
      draggable: false,
      // The replay is inspectable, never a destructive graph editor.
      deletable: false,
      data: {
        agent,
        state,
        revealed,
        elapsedMs: elapsed,
        sceneDurationMs: scene.durationMs,
        view: currentView,
        verified: currentFrame.receiptVerified,
        justCompleted,
        spanStart: start,
        spanEnd: end,
        advisorSpans: advisors,
        compact
      }
    };
  }

  function buildNodes(currentFrame: Frame, currentView: AgentView): AgentCanvasNode[] {
    // Seat boxes first and back to front: a nested box paints over the one that holds it.
    const seatNodes: SeatFlowNode[] = geometry.seats.map((seat) => ({
      id: `seat-${seat.seat}`,
      type: 'seat',
      position: { x: seat.x, y: seat.y },
      width: seat.width,
      height: seat.height,
      draggable: false,
      selectable: false,
      zIndex: seat.depth - 10,
      data: { seat: seat.seat, label: seat.label, depth: seat.depth, agentCount: seat.agentCount }
    }));
    return [...seatNodes, ...geometry.agents.map((placement) => createAgentNode(placement, currentFrame, currentView))];
  }

  function relationFor(event: SceneEvent): { kind: AgentRelationKind; source: string; target: string; label: string } | null {
    if (event.kind === 'agent.spawn' && event.target) return { kind: 'spawn', source: event.actor, target: event.target, label: 'spawn' };
    if (event.kind === 'hub.message' && event.target) return { kind: 'message', source: event.actor, target: event.target, label: event.label || 'hub message' };
    if (event.kind === 'agent.result') {
      const target = event.target ?? parentMap.get(event.actor);
      return target ? { kind: 'result', source: event.actor, target, label: event.label || 'result' } : null;
    }
    if (event.kind === 'advisor.span' && event.target) return { kind: 'advisor', source: event.actor, target: event.target, label: event.label || 'advisor span' };
    if (event.kind === 'signal' && event.target) return { kind: 'signal', source: event.actor, target: event.target, label: 'signal · wake-up' };
    return null;
  }

  function buildEdges(currentFrame: Frame): AgentFlowEdge[] {
    const result: AgentFlowEdge[] = [];
    for (const event of scene.events) {
      const relation = relationFor(event);
      if (!relation || !agentIds.has(relation.source) || !agentIds.has(relation.target)) continue;
      const visible = event.t <= currentFrame.t;
      const message = currentFrame.messages.find((entry) => entry.id === event.id || (entry.from === relation.source && entry.to === relation.target && entry.label === event.label));
      const data: AgentEdgeData = {
        kind: relation.kind,
        label: relation.label,
        eventTime: event.t,
        visible,
        inFlight: relation.kind === 'message' && message !== undefined,
        progress: message?.progress ?? 0.5,
        reducedMotion
      };
      result.push({
        id: `relation-${event.id}`,
        source: relation.source,
        target: relation.target,
        sourceHandle: 'out',
        targetHandle: 'in',
        type: 'agent-relation',
        hidden: !visible,
        focusable: false,
        selectable: false,
        data
      });
    }
    return result;
  }

  function minimapNodeColor(node: { type?: string; data?: unknown }) {
    if (node.type === 'seat') return 'var(--accent-soft)';
    const data = node.data as Partial<AgentNodeData> | undefined;
    if (data?.state?.status === 'blocked') return 'var(--color-warning)';
    if (data?.state?.status === 'done') return 'var(--color-success)';
    if (data?.state?.status === 'failed') return 'var(--color-error)';
    return 'var(--accent)';
  }

  function formatTime(value: number) {
    const seconds = Math.max(0, Math.floor(value / 1000));
    return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;
  }
</script>

<DemoShell
  slug="agents"
  title="Agents in motion"
  description="A deterministic mock replay of omp fan-out: one main session, parallel subagents, sibling hub messages, an advisor span, a blocked branch, and verified returns."
  {source}
>
  {#snippet toolbar()}
    <div class="agent-toolbar" aria-label="Agent replay controls">
      <div class="mock-badge"><span class="mock-mark" aria-hidden="true">M</span><span>MOCK DATA</span><small>illustrative scene · not a live feed</small></div>
      <div class="view-switch" role="group" aria-label="Agent visualization view">
        <button class:active={view === 'waves'} type="button" aria-pressed={view === 'waves'} onclick={() => void setView('waves')}>Waves</button>
        <button class:active={view === 'hierarchy'} type="button" aria-pressed={view === 'hierarchy'} onclick={() => void setView('hierarchy')}>Hierarchy</button>
      </div>
      <div class="transport" aria-label="Replay transport">
        <button class="btn btn-sm btn-primary transport-play" type="button" onclick={togglePlayback} disabled={reducedMotion} aria-label={reducedMotion ? 'Continuous playback disabled for reduced motion' : playing ? 'Pause replay' : 'Play replay'}>
          <span aria-hidden="true">{playing ? 'Ⅱ' : '▶'}</span>{reducedMotion ? 'Step mode' : playing ? 'Pause' : 'Play'}
        </button>
        <button class="btn btn-sm btn-outline" type="button" onclick={replay}>Replay</button>
        <button class="step-button" type="button" onclick={() => stepEvent(-1)} aria-label="Previous event">←</button>
        <button class="step-button" type="button" onclick={() => stepEvent(1)} aria-label="Next event">→</button>
        <label class="speed-control" for="agent-speed"><span>Speed</span><select id="agent-speed" class="select select-xs" value={speed} onchange={changeSpeed}>
          <option value="0.5">0.5×</option><option value="1">1×</option><option value="2">2×</option><option value="4">4×</option>
        </select></label>
        <span class="time-readout" aria-live="off"><strong>{timeLabel}</strong><span>/ {durationLabel}</span></span>
      </div>
      <label class="timeline-control" for="agent-timeline"><span>Scene time</span><input id="agent-timeline" type="range" min="0" max={scene.durationMs} step="50" value={timeMs} oninput={seekFromInput} /><span class="timeline-end">{durationLabel}</span></label>
      {#if reducedMotion}<span class="reduced-note" role="status">Reduced motion is on: use step buttons or scrub; the story remains fully inspectable.</span>{/if}
    </div>
  {/snippet}

  {#snippet info()}
    <div class="info-grid">
      <section class="story-copy">
        <p class="eyebrow">What this shows</p>
        <p>This is a <strong>mock, deterministic replay</strong>, not a live omp session. Spawn, hub message, and result are recorded as different relations. The signal is only a wake-up; the receipt readback is the moment completion becomes verified.</p>
        <a class="concept-link" href="https://wiki.sflw.loca.zone/agent-flow-concept" target="_blank" rel="noreferrer">Read the agent-flow concept <span aria-hidden="true">↗</span></a>
        <div class="transport-summary" aria-live="polite"><span class="summary-dot" aria-hidden="true"></span><span>{viewSummary} · {activeAgents} running · {completedAgents} completed · {visibleRelations} relations shown</span></div>
      </section>
      <section class="signal-card" aria-label="Signal and receipt status">
        <p class="eyebrow">Wake-up is not proof</p>
        <div class="signal-steps">
          <div class:step-active={frame.signalled} class:step-done={frame.signalled}><span class="signal-shape" aria-hidden="true">↗</span><span><strong>Signal</strong><small>wake-up only</small></span></div>
          <span class="step-connector" aria-hidden="true"></span>
          <div class:step-active={frame.receiptVerified} class:step-done={frame.receiptVerified}><span class="receipt-shape" aria-hidden="true">✓</span><span><strong>Receipt readback</strong><small>{frame.receiptVerified ? 'verified completion' : 'not verified yet'}</small></span></div>
        </div>
        <p class="signal-status" role="status">{signalLabel}</p>
      </section>
    </div>
    <div class="legend-layout">
      <section>
        <p class="eyebrow">Relation grammar</p>
        <ul class="legend-list" aria-label="Relation legend">
          <li><span class="legend-line spawn-line" aria-hidden="true"><i></i></span><span><strong>Spawn</strong><small>solid fork · closed arrow</small></span></li>
          <li><span class="legend-line message-line" aria-hidden="true"><i></i></span><span><strong>Hub message</strong><small>dashed arc · open arrow · travelling pulse</small></span></li>
          <li><span class="legend-line result-line" aria-hidden="true"><i></i></span><span><strong>Result</strong><small>thick return · double chevron</small></span></li>
          <li><span class="legend-line advisor-line" aria-hidden="true"><i></i></span><span><strong>Advisor span</strong><small>dotted tether · open circle</small></span></li>
        </ul>
      </section>
      <section>
        <p class="eyebrow">State shapes</p>
        <ul class="status-list" aria-label="Agent status legend">
          <li><span class="status-key key-running" aria-hidden="true">|||</span><span><strong>Running</strong><small>open activity ring</small></span></li>
          <li><span class="status-key key-done" aria-hidden="true">✓</span><span><strong>Done</strong><small>terminal check</small></span></li>
          <li><span class="status-key key-blocked" aria-hidden="true">Ⅱ</span><span><strong>Blocked</strong><small>hatch + pause glyph</small></span></li>
          <li><span class="status-key key-waiting" aria-hidden="true">···</span><span><strong>Waiting</strong><small>dashed ring, no spinner</small></span></li>
        </ul>
      </section>
    </div>
    <div class="detail-grid">
      <section class="event-ledger">
        <div class="detail-heading"><p class="eyebrow">Event ledger</p><span>state at {timeLabel}</span></div>
        <ol aria-label="Scene event ledger">
          {#each scene.events as event}
            {@const happened = event.t <= frame.t}
            <li class:happened class:current={currentEvent?.id === event.id}>
              <span class="event-time">{formatTime(event.t)}</span><span class="event-kind">{event.kind}</span><span class="event-label">{event.label}</span>{#if !happened}<span class="upcoming">upcoming</span>{/if}
            </li>
          {/each}
        </ol>
      </section>
      <section class="agent-detail" aria-live="polite">
        <div class="detail-heading"><p class="eyebrow">Focused agent</p><span>{focusedAgent ? 'selected on canvas' : 'select a node'}</span></div>
        {#if focusedAgent}
          <h2>{focusedAgent.label}</h2>
          <dl><div><dt>role</dt><dd>{focusedAgent.role}</dd></div><div><dt>seat</dt><dd>{focusedAgent.seat}</dd></div><div><dt>status</dt><dd>{focusedFrameAgent?.status ?? 'advisor span'}</dd></div><div><dt>parent</dt><dd>{focusedAgent.parent ?? 'session root'}</dd></div></dl>
          {#if focusedFrameAgent?.blockedReason}<p class="detail-blocked">Ⅱ {focusedFrameAgent.blockedReason}</p>{/if}
        {:else}
          <p class="empty-detail">The graph stays readable without a selection. Choose an agent to inspect its role, seat, parent, and state-at-time.</p>
        {/if}
      </section>
    </div>
  {/snippet}

  <SvelteFlow
    id="demo-agents"
    {nodes}
    {edges}
    {nodeTypes}
    {edgeTypes}
    fitViewOptions={fitOptions}
    minZoom={0.2}
    nodesDraggable={false}
    nodesConnectable={false}
    deleteKey={null}
    onnodeclick={handleNodeClick}
    onpaneclick={handlePaneClick}
    aria-label={`${viewSummary} agent graph, mock data`}
  >
    <Background variant={BackgroundVariant.Dots} patternColor="var(--line)" gap={24} size={1.2} />
    <Controls />
    <MiniMap nodeColor={minimapNodeColor} pannable zoomable />
    <AgentViewport revision={view} options={fitOptions} animate={!reducedMotion} />
    <Panel position="top-left">
      <div class="stage-mock"><span class="mock-mark" aria-hidden="true">M</span><strong>MOCK DATA</strong><span>static scene</span></div>
    </Panel>
    <Panel position="top-right">
      <div class="stage-chain" aria-label={signalLabel}><span class:active={frame.signalled}>signal</span><i aria-hidden="true">→</i><span class:active={frame.receiptVerified}>receipt</span></div>
    </Panel>
    <Panel position="bottom-left">
      <div class="stage-event" aria-live="polite"><span>{currentEvent ? formatTime(currentEvent.t) : '0:00'}</span><strong>{currentEvent?.label ?? 'Scene ready'}</strong></div>
    </Panel>
    <Panel position="bottom-right">
      <div class="stage-counts"><span>{activeAgents} running</span><span>{frame.blocked.length} blocked</span></div>
    </Panel>
  </SvelteFlow>
</DemoShell>

<style>
  .agent-toolbar { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px 18px; width: 100%; }
  .mock-badge { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 10px; font-weight: 760; letter-spacing: .08em; white-space: nowrap; }
  .mock-badge small { color: var(--muted); font-size: 8px; font-weight: 450; letter-spacing: 0; }
  .mock-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--accent); border-radius: 5px; color: var(--accent); font-size: 9px; font-weight: 800; }
  .view-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
  .view-switch button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 680; }
  .view-switch button.active { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 8%, transparent); }
  .transport { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; min-width: 0; }
  .transport .btn { min-height: 29px; font-size: 10px; }
  .transport-play { display: inline-flex; align-items: center; gap: 6px; }
  .transport-play span { width: 10px; font-size: 10px; }
  .step-button { display: inline-grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 15px; }
  .step-button:hover { border-color: var(--accent); color: var(--accent); }
  .speed-control { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 650; }
  .speed-control select { width: 62px; min-height: 29px; font-size: 10px; }
  .time-readout { display: inline-flex; align-items: baseline; gap: 3px; margin-left: 4px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .time-readout strong { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
  .timeline-control { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(80px, 1fr) auto; align-items: center; gap: 10px; color: var(--muted); font-size: 9px; font-weight: 650; }
  .timeline-control input { width: 100%; accent-color: var(--accent); }
  .timeline-end { font-variant-numeric: tabular-nums; }
  .reduced-note { grid-column: 1 / -1; padding: 6px 9px; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); font-size: 9px; }
  .stage-mock, .stage-chain, .stage-event, .stage-counts { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 7px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 3px 10px color-mix(in srgb, var(--ink) 7%, transparent); }
  .stage-mock { padding: 7px 9px; color: var(--muted); font-size: 8px; font-weight: 680; letter-spacing: .08em; }
  .stage-mock .mock-mark { width: 17px; height: 17px; font-size: 8px; }
  .stage-chain { padding: 7px 9px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .stage-chain span.active { color: var(--accent); }
  .stage-chain i { color: var(--line); font-style: normal; }
  .stage-event { max-width: 270px; padding: 7px 9px; color: var(--muted); font-size: 8px; }
  .stage-event > span { flex-shrink: 0; color: var(--accent); font-variant-numeric: tabular-nums; }
  .stage-event strong { overflow: hidden; color: var(--ink); font-size: 9px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
  .stage-counts { padding: 7px 9px; color: var(--muted); font-size: 8px; font-variant-numeric: tabular-nums; }
  .info-grid, .legend-layout, .detail-grid { display: grid; gap: 22px; }
  .info-grid { grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); }
  .legend-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 16px; border-top: 1px solid var(--line); }
  .detail-grid { grid-template-columns: minmax(0, 1.2fr) minmax(230px, .8fr); padding-top: 16px; border-top: 1px solid var(--line); }
  .eyebrow { margin: 0; color: var(--accent); font-size: 9px; font-weight: 740; letter-spacing: .12em; text-transform: uppercase; }
  .story-copy > p:not(.eyebrow) { max-width: 680px; margin: 7px 0 10px; color: var(--muted); font-size: 12px; line-height: 1.75; }
  .story-copy strong { color: var(--ink); font-weight: 700; }
  .concept-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 10px; font-weight: 680; text-decoration: none; }
  .concept-link:hover { text-decoration: underline; }
  .transport-summary { display: flex; align-items: center; gap: 7px; margin-top: 15px; color: var(--muted); font-size: 9px; }
  .summary-dot { width: 6px; height: 6px; border: 1px solid var(--accent); border-radius: 50%; }
  .signal-card { padding: 13px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
  .signal-steps { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
  .signal-steps > div { display: flex; align-items: center; gap: 7px; min-width: 0; }
  .signal-steps strong { display: block; color: var(--ink); font-size: 10px; font-weight: 700; white-space: nowrap; }
  .signal-steps small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; white-space: nowrap; }
  .signal-shape, .receipt-shape { display: grid; place-items: center; width: 25px; height: 25px; flex-shrink: 0; border: 1px solid var(--muted); color: var(--muted); font-size: 13px; font-weight: 750; }
  .signal-shape { border-radius: 50%; }
  .receipt-shape { border-radius: 5px; }
  .step-active .signal-shape { border-color: var(--accent); color: var(--accent); }
  .step-done .receipt-shape { border-color: var(--color-success); color: var(--color-success); }
  .step-connector { width: 18px; height: 1px; flex-shrink: 0; background: var(--line); }
  .signal-status { margin: 11px 0 0; color: var(--muted); font-size: 9px; }
  .legend-list, .status-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 10px 0 0; padding: 0; list-style: none; }
  .legend-list li, .status-list li { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .legend-list strong, .status-list strong { display: block; color: var(--ink); font-size: 10px; font-weight: 700; }
  .legend-list small, .status-list small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.3; }
  .legend-line { position: relative; display: block; width: 42px; height: 18px; flex-shrink: 0; }
  .legend-line::before { content: ''; position: absolute; top: 9px; left: 0; right: 8px; border-top: 2px solid var(--accent); }
  .legend-line::after { position: absolute; top: 3px; right: 0; color: var(--accent); font-size: 12px; font-weight: 800; }
  .spawn-line::after { content: '▶'; }
  .message-line::before { border-top-style: dashed; border-top-width: 1px; }
  .message-line::after { content: '›'; }
  .result-line::before { border-top-width: 3px; border-top-color: var(--color-success); }
  .result-line::after { content: '»'; color: var(--color-success); }
  .advisor-line::before { border-top-style: dotted; border-top-color: var(--color-info); }
  .advisor-line::after { content: '○'; color: var(--color-info); }
  .status-key { display: inline-grid; place-items: center; width: 25px; height: 25px; flex-shrink: 0; border: 1px solid var(--muted); color: var(--muted); font-size: 10px; font-weight: 750; }
  .key-running { border-radius: 50%; border-color: var(--accent); color: var(--accent); letter-spacing: -2px; }
  .key-done { border-radius: 5px; border-color: var(--color-success); color: var(--color-success); font-size: 13px; }
  .key-blocked { border-radius: 5px; border-color: var(--color-warning); color: var(--color-warning); background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-warning) 10%, transparent) 0 2px, transparent 2px 6px); }
  .key-waiting { border-style: dashed; border-radius: 50%; }
  .detail-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .detail-heading > span { color: var(--muted); font-size: 8px; }
  .event-ledger ol { display: grid; gap: 2px; max-height: 245px; margin: 9px 0 0; padding: 0; overflow-y: auto; list-style: none; }
  .event-ledger li { display: grid; grid-template-columns: 36px 90px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 25px; padding: 3px 6px; border-left: 2px solid transparent; color: var(--muted); font-size: 9px; }
  .event-ledger li.happened { color: var(--ink); }
  .event-ledger li.current { border-left-color: var(--accent); background: var(--accent-soft); }
  .event-time { color: var(--accent); font-variant-numeric: tabular-nums; }
  .event-kind { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .event-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .upcoming { color: var(--muted); font-size: 8px; }
  .agent-detail { min-width: 0; }
  .agent-detail h2 { margin: 9px 0 8px; color: var(--ink); font-size: 17px; letter-spacing: -.3px; }
  .agent-detail dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 15px; margin: 0; }
  .agent-detail dl div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 5px; }
  dt { color: var(--muted); font-size: 8px; text-transform: uppercase; }
  dd { margin: 0; overflow: hidden; color: var(--ink); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .empty-detail { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
  .detail-blocked { margin: 11px 0 0; color: var(--color-warning); font-size: 9px; }
  :global(.demo-stage .svelte-flow) { --xy-background-color: var(--surface-2); --xy-background-pattern-dots-color: color-mix(in srgb, var(--muted) 28%, transparent); --xy-controls-button-background-color: var(--surface); --xy-controls-button-background-color-hover: var(--accent-soft); --xy-controls-button-color: var(--muted); --xy-controls-button-border-color: var(--line); --xy-minimap-background-color: var(--surface); --xy-minimap-mask-background-color: color-mix(in srgb, var(--surface-2) 75%, transparent); }
  :global(.demo-stage .svelte-flow__node-seat) { pointer-events: none; }
  :global(.demo-stage .svelte-flow__node-agent) { z-index: 1; }
  :global(.demo-stage .svelte-flow__panel) { margin: 12px; }
  @media (max-width: 980px) { .agent-toolbar { grid-template-columns: auto 1fr; } .transport { grid-column: 1 / -1; justify-content: flex-start; } .info-grid, .detail-grid { grid-template-columns: 1fr; } }
  @media (max-width: 620px) { .agent-toolbar { display: flex; align-items: stretch; flex-wrap: wrap; gap: 9px; } .mock-badge { flex: 1 1 100%; flex-wrap: wrap; } .mock-badge small { width: 100%; margin-left: 27px; } .transport { width: 100%; } .timeline-control { width: 100%; } .legend-list, .status-list { grid-template-columns: 1fr; } .signal-steps { align-items: flex-start; flex-wrap: wrap; } .step-connector { display: none; } .event-ledger li { grid-template-columns: 32px minmax(0, 1fr) auto; } .event-kind { display: none; } }
  @media (max-width: 440px) { .stage-chain { padding: 6px 7px; } .stage-chain span { font-size: 7px; } :global(.demo-stage .svelte-flow__panel) { margin: 8px; } :global(.demo-stage .svelte-flow__controls) { transform: scale(.9); transform-origin: bottom left; } }
</style>
The actual route source, imported with ?raw. Shared components and graph utilities live in src/lib.