availsync 0.1.0

package/frontend/components/marketing/AgentCoordinationStory.tsx

@@ -0,0 +1,1530 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import {
+  Check,
+  Clock3,
+  GitBranch,
+  ListChecks,
+  Lock,
+  RadioTower,
+  ShieldCheck,
+  Zap,
+} from 'lucide-react';
+import ClaudeIcon from '@lobehub/icons/es/Claude/components/Color';
+import CodexIcon from '@lobehub/icons/es/Codex/components/Color';
+import CursorIcon from '@lobehub/icons/es/Cursor/components/Mono';
+import MCPIcon from '@lobehub/icons/es/MCP/components/Mono';
+import VercelIcon from '@lobehub/icons/es/Vercel/components/Mono';
+import type { IconType } from '@lobehub/icons/es/types';
+
+type Agent = {
+  id: string;
+  name: string;
+  icon: IconType;
+  task: string;
+  resource: ResourceLane;
+  outcome: 'proceed' | 'skip_run';
+  reason: string;
+  hue: string;
+};
+
+type ScenarioId = 'priority' | 'reservations' | 'history';
+type ResourceLane = 'primary' | 'secondary';
+
+type ResourceCopy = {
+  title: string;
+  idleLabel: string;
+  claimedLabel: string;
+};
+
+type Scenario = {
+  id: ScenarioId;
+  title: string;
+  body: string;
+  heading: string;
+  intro: string;
+  detail: string;
+  eyebrow: string;
+  live: string;
+  settled: string;
+  gateSettled: string;
+  resources: Record<ResourceLane, ResourceCopy>;
+  agents: Agent[];
+};
+
+const scenarios: Scenario[] = [
+  {
+    id: 'priority',
+    title: 'Priority',
+    body: 'Deploys, migrations, reviews, and customer-facing work can win deterministically.',
+    heading: 'Let the right agent win before work starts.',
+    intro:
+      'Several coding agents can wake up with the same repo state and all believe their run is safe. Availsync turns that invisible race into a deterministic decision.',
+    detail:
+      'Each agent checks in with the same resource. The gate compares active claims and priority rules, then returns proceed to the winner and skip_run to the rest.',
+    eyebrow: 'Priority arbitration',
+    live: 'Availsync is comparing priority rules in real time.',
+    settled: 'Deploy wins the repo. Lower-priority agents skip cleanly.',
+    gateSettled: '1 proceed · 3 skip_run',
+    resources: {
+      primary: { title: 'owner/repo', idleLabel: 'awaiting claim', claimedLabel: 'claimed' },
+      secondary: { title: 'docs-site', idleLabel: 'awaiting claim', claimedLabel: 'claimed' },
+    },
+    agents: [
+      {
+        id: 'codex',
+        name: 'Codex',
+        icon: CodexIcon,
+        task: 'Homepage update',
+        resource: 'primary',
+        outcome: 'skip_run',
+        reason: 'Deploy owns repo',
+        hue: '#60a5fa',
+      },
+      {
+        id: 'claude',
+        name: 'Claude',
+        icon: ClaudeIcon,
+        task: 'Product catalog',
+        resource: 'primary',
+        outcome: 'skip_run',
+        reason: 'stale context risk',
+        hue: '#c084fc',
+      },
+      {
+        id: 'deploy',
+        name: 'Deploy',
+        icon: VercelIcon,
+        task: 'Release window',
+        resource: 'primary',
+        outcome: 'proceed',
+        reason: 'highest priority',
+        hue: '#fb923c',
+      },
+      {
+        id: 'mcp',
+        name: 'MCP docs',
+        icon: MCPIcon,
+        task: 'Docs refresh',
+        resource: 'secondary',
+        outcome: 'proceed',
+        reason: 'different resource',
+        hue: '#34d399',
+      },
+      {
+        id: 'cursor',
+        name: 'Cursor',
+        icon: CursorIcon,
+        task: 'Dependency cleanup',
+        resource: 'primary',
+        outcome: 'skip_run',
+        reason: 'lower priority',
+        hue: '#94a3b8',
+      },
+    ],
+  },
+  {
+    id: 'reservations',
+    title: 'Reservations',
+    body: 'Every integrated agent checks the same shared claim state before touching a repo or project.',
+    heading: 'Protect repos, projects, and time windows with one claim model.',
+    intro:
+      'A deploy slot, repo, or project can be held before an agent acts. Other agents see that reservation instead of discovering the conflict after they have already started.',
+    detail:
+      'Use repo-level claims for safety, or reserve narrower project and time-window resources when streams are independent.',
+    eyebrow: 'Shared reservations',
+    live: 'Availsync is checking active leases before agents start.',
+    settled: 'The protected slot is held. Independent work can continue.',
+    gateSettled: 'slot held · repo free',
+    resources: {
+      primary: { title: 'deploy-window 10:00', idleLabel: 'checking slot', claimedLabel: 'held' },
+      secondary: { title: 'owner/docs', idleLabel: 'checking repo', claimedLabel: 'claimed' },
+    },
+    agents: [
+      {
+        id: 'release-bot',
+        name: 'Release bot',
+        icon: VercelIcon,
+        task: 'Book deploy slot',
+        resource: 'primary',
+        outcome: 'proceed',
+        reason: 'slot available',
+        hue: '#fb923c',
+      },
+      {
+        id: 'migration',
+        name: 'Migration',
+        icon: CodexIcon,
+        task: 'Needs 10:00 window',
+        resource: 'primary',
+        outcome: 'skip_run',
+        reason: 'slot already held',
+        hue: '#60a5fa',
+      },
+      {
+        id: 'support',
+        name: 'Support bot',
+        icon: ClaudeIcon,
+        task: 'Customer hotfix',
+        resource: 'primary',
+        outcome: 'skip_run',
+        reason: 'release protected',
+        hue: '#c084fc',
+      },
+      {
+        id: 'docs',
+        name: 'Docs agent',
+        icon: MCPIcon,
+        task: 'Update runbook',
+        resource: 'secondary',
+        outcome: 'proceed',
+        reason: 'independent repo',
+        hue: '#34d399',
+      },
+      {
+        id: 'cleanup',
+        name: 'Cron cleanup',
+        icon: CursorIcon,
+        task: 'Dependency sweep',
+        resource: 'primary',
+        outcome: 'skip_run',
+        reason: 'wait for release',
+        hue: '#94a3b8',
+      },
+    ],
+  },
+  {
+    id: 'history',
+    title: 'History',
+    body: 'Checks, claims, skip_run decisions, extensions, releases, and actors stay reviewable.',
+    heading: 'See what happened after your agents finish.',
+    intro:
+      'Coordination is only useful if you can review the decisions later. Availsync records checks, claims, blocked runs, extensions, releases, and actors as runtime history.',
+    detail:
+      'Activity shows live agent traffic. Audit gives you the governance trail when you need to understand why a run proceeded or skipped.',
+    eyebrow: 'Runtime history',
+    live: 'Availsync is turning runtime decisions into reviewable events.',
+    settled: 'Every decision is captured for Activity and Audit review.',
+    gateSettled: 'activity · audit',
+    resources: {
+      primary: { title: 'Activity log', idleLabel: 'waiting events', claimedLabel: 'recorded' },
+      secondary: { title: 'Audit trail', idleLabel: 'waiting events', claimedLabel: 'recorded' },
+    },
+    agents: [
+      {
+        id: 'check',
+        name: 'Check',
+        icon: CodexIcon,
+        task: 'work/run/start',
+        resource: 'primary',
+        outcome: 'proceed',
+        reason: 'available',
+        hue: '#60a5fa',
+      },
+      {
+        id: 'claim',
+        name: 'Claim',
+        icon: VercelIcon,
+        task: 'repo claimed',
+        resource: 'primary',
+        outcome: 'proceed',
+        reason: 'lease active',
+        hue: '#fb923c',
+      },
+      {
+        id: 'skip',
+        name: 'Skip',
+        icon: ClaudeIcon,
+        task: 'blocked run',
+        resource: 'primary',
+        outcome: 'skip_run',
+        reason: 'conflict saved',
+        hue: '#f87171',
+      },
+      {
+        id: 'extend',
+        name: 'Extend',
+        icon: CursorIcon,
+        task: 'lease renewed',
+        resource: 'secondary',
+        outcome: 'proceed',
+        reason: 'still working',
+        hue: '#94a3b8',
+      },
+      {
+        id: 'release',
+        name: 'Release',
+        icon: MCPIcon,
+        task: 'work finished',
+        resource: 'secondary',
+        outcome: 'proceed',
+        reason: 'resource freed',
+        hue: '#34d399',
+      },
+    ],
+  },
+];
+
+const defaultScenario = scenarios[0];
+
+// --- Coordinate system (SVG viewBox) ---
+const VIEW_W = 820;
+const VIEW_H = 560;
+
+const AGENT_X = 20;
+const AGENT_W = 190;
+const AGENT_H = 58;
+const AGENT_PITCH = 78;
+const AGENT_COUNT = 5;
+const AGENT_FIRST_TOP = (VIEW_H - (AGENT_COUNT - 1) * AGENT_PITCH - AGENT_H) / 2;
+const agentTop = (i: number) => AGENT_FIRST_TOP + i * AGENT_PITCH;
+const agentCenterY = (i: number) => agentTop(i) + AGENT_H / 2;
+const AGENT_RIGHT_EDGE = AGENT_X + AGENT_W;
+
+const GATE_CX = 410;
+const GATE_CY = VIEW_H / 2;
+const GATE_R = 54;
+
+const RES_W = 190;
+const RES_H = 86;
+const RES_X = VIEW_W - RES_W - 20;
+const RES_PRIMARY_TOP = 140;
+const RES_SECONDARY_TOP = 336;
+const resourceTop = (r: ResourceLane) => (r === 'primary' ? RES_PRIMARY_TOP : RES_SECONDARY_TOP);
+const resourceCenterY = (r: ResourceLane) => resourceTop(r) + RES_H / 2;
+
+function pathAgentToGate(i: number): string {
+  const sx = AGENT_RIGHT_EDGE;
+  const sy = agentCenterY(i);
+  const ex = GATE_CX - GATE_R;
+  const ey = GATE_CY;
+  const dx = ex - sx;
+  return `M ${sx} ${sy} C ${sx + dx * 0.55} ${sy}, ${ex - dx * 0.45} ${ey}, ${ex} ${ey}`;
+}
+
+function pathGateToResource(r: ResourceLane): string {
+  const sx = GATE_CX + GATE_R;
+  const sy = GATE_CY;
+  const ex = RES_X;
+  const ey = resourceCenterY(r);
+  const dx = ex - sx;
+  return `M ${sx} ${sy} C ${sx + dx * 0.5} ${sy}, ${ex - dx * 0.5} ${ey}, ${ex} ${ey}`;
+}
+
+// --- Scenario phases ---
+type Phase = 'idle' | 'request' | 'decide' | 'route' | 'settled';
+
+const PHASE_ORDER: Phase[] = ['idle', 'request', 'decide', 'route', 'settled'];
+const PHASE_MS: Record<Phase, number> = {
+  idle: 900,
+  request: 2300,
+  decide: 1700,
+  route: 2300,
+  settled: 2700,
+};
+const LOOP_MS = PHASE_ORDER.reduce((total, p) => total + PHASE_MS[p], 0);
+const LOOP_SECONDS = LOOP_MS / 1000;
+
+function useScenario(reduced: boolean) {
+  const [phase, setPhase] = useState<Phase>(reduced ? 'settled' : 'idle');
+  const [cycle, setCycle] = useState(0);
+
+  useEffect(() => {
+    if (reduced) {
+      setPhase('settled');
+      return;
+    }
+    let cancelled = false;
+    let timer: number | undefined;
+    let pi = 0;
+    let ci = 0;
+
+    const tick = () => {
+      if (cancelled) return;
+      const p = PHASE_ORDER[pi];
+      setPhase(p);
+      setCycle(ci);
+      timer = window.setTimeout(() => {
+        pi += 1;
+        if (pi >= PHASE_ORDER.length) {
+          pi = 0;
+          ci += 1;
+        }
+        tick();
+      }, PHASE_MS[p]);
+    };
+
+    tick();
+    return () => {
+      cancelled = true;
+      if (timer) window.clearTimeout(timer);
+    };
+  }, [reduced]);
+
+  return { phase, cycle };
+}
+
+// --- Packet that travels along an SVG path ---
+function Packet({
+  pathId,
+  start,
+  end,
+  visibleUntil,
+  color,
+  size = 5,
+  reverse = false,
+}: {
+  pathId: string;
+  start: number;
+  end: number;
+  visibleUntil?: number;
+  color: string;
+  size?: number;
+  reverse?: boolean;
+}) {
+  const fadeIn = Math.min(start + 0.025, end);
+  const holdUntil = Math.max(end, Math.min(visibleUntil ?? end, 0.965));
+  const fadeOut = Math.min(holdUntil + 0.04, 0.985);
+  const keyTimes = `0;${start};${end};1`;
+  const keyPoints = reverse ? '1;1;0;0' : '0;0;1;1';
+  const opacityTimes = `0;${start};${fadeIn};${holdUntil};${fadeOut};1`;
+
+  return (
+    <g style={{ pointerEvents: 'none', willChange: 'opacity' }}>
+      <circle r={size + 5} fill={color} opacity={0.18}>
+        <animateMotion
+          dur={`${LOOP_SECONDS}s`}
+          repeatCount="indefinite"
+          calcMode="linear"
+          keyTimes={keyTimes}
+          keyPoints={keyPoints}
+        >
+          <mpath href={`#${pathId}`} />
+        </animateMotion>
+        <animate
+          attributeName="opacity"
+          dur={`${LOOP_SECONDS}s`}
+          repeatCount="indefinite"
+          keyTimes={opacityTimes}
+          values="0;0;0.18;0.18;0;0"
+        />
+      </circle>
+      <circle r={size} fill={color}>
+        <animateMotion
+          dur={`${LOOP_SECONDS}s`}
+          repeatCount="indefinite"
+          calcMode="linear"
+          keyTimes={keyTimes}
+          keyPoints={keyPoints}
+        >
+          <mpath href={`#${pathId}`} />
+        </animateMotion>
+        <animate
+          attributeName="opacity"
+          dur={`${LOOP_SECONDS}s`}
+          repeatCount="indefinite"
+          keyTimes={opacityTimes}
+          values="0;0;1;1;0;0"
+        />
+      </circle>
+    </g>
+  );
+}
+
+// --- Gate node ---
+function GateNode({ phase, scenario }: { phase: Phase; scenario: Scenario }) {
+  const deciding = phase === 'decide' || phase === 'route';
+  const active = phase === 'request' || phase === 'decide' || phase === 'route';
+
+  return (
+    <g>
+      {/* Pulsing rings (group is translated to gate center so we can scale around origin (0,0)) */}
+      {active && (
+        <g>
+          <circle
+            cx={GATE_CX}
+            cy={GATE_CY}
+            r={GATE_R}
+            fill="none"
+            stroke="rgba(125,140,240,0.55)"
+            strokeWidth={1}
+          >
+            <animate attributeName="r" values={`${GATE_R - 4};${GATE_R + 46}`} dur="1.9s" repeatCount="indefinite" />
+            <animate attributeName="opacity" values="0.7;0" dur="1.9s" repeatCount="indefinite" />
+          </circle>
+          <circle
+            cx={GATE_CX}
+            cy={GATE_CY}
+            r={GATE_R}
+            fill="none"
+            stroke="rgba(125,140,240,0.35)"
+            strokeWidth={1}
+          >
+            <animate attributeName="r" values={`${GATE_R - 4};${GATE_R + 46}`} dur="1.9s" begin="0.95s" repeatCount="indefinite" />
+            <animate attributeName="opacity" values="0.55;0" dur="1.9s" begin="0.95s" repeatCount="indefinite" />
+          </circle>
+        </g>
+      )}
+
+      {/* Gate body */}
+      <circle
+        cx={GATE_CX}
+        cy={GATE_CY}
+        r={GATE_R}
+        fill="url(#gate-grad)"
+        stroke={deciding ? '#a5b4fc' : 'rgba(125,140,240,0.55)'}
+        strokeWidth={deciding ? 2 : 1}
+        style={{
+          filter: deciding
+            ? 'drop-shadow(0 0 26px rgba(125,140,240,0.65))'
+            : 'drop-shadow(0 0 10px rgba(94,106,210,0.3))',
+          transition: 'filter 450ms ease, stroke 450ms ease',
+        }}
+      />
+
+      {/* Scanner sweep. Native SVG rotation keeps the pivot exact inside the clipped gate. */}
+      {deciding && (
+        <g clipPath="url(#gate-inner-clip)">
+          <g transform={`translate(${GATE_CX} ${GATE_CY})`}>
+            <g>
+              <animateTransform
+                attributeName="transform"
+                type="rotate"
+                from="0"
+                to="360"
+                dur="1.35s"
+                repeatCount="indefinite"
+              />
+              <path
+                d={`M 0 0 L ${GATE_R - 2} -14 A ${GATE_R - 2} ${GATE_R - 2} 0 0 1 ${GATE_R - 2} 14 Z`}
+                fill="url(#sweep-grad)"
+              />
+              <line
+                x1="6"
+                y1="0"
+                x2={GATE_R - 5}
+                y2="0"
+                stroke="rgba(199,210,254,0.55)"
+                strokeLinecap="round"
+                strokeWidth="1.2"
+              />
+            </g>
+          </g>
+        </g>
+      )}
+
+      {/* Shield icon */}
+      <circle
+        cx={GATE_CX}
+        cy={GATE_CY}
+        r={16}
+        fill="rgba(9,11,18,0.42)"
+        stroke="rgba(255,255,255,0.08)"
+        strokeWidth={1}
+      />
+      <g transform={`translate(${GATE_CX - 13} ${GATE_CY - 14})`}>
+        <ShieldCheck color={deciding ? '#c7d2fe' : '#a5b4fc'} size={26} />
+      </g>
+
+      {/* Label */}
+      <text
+        x={GATE_CX}
+        y={GATE_CY + GATE_R + 26}
+        textAnchor="middle"
+        fill="#a3a3ad"
+        fontSize={10}
+        letterSpacing={1.4}
+        fontFamily="system-ui,-apple-system,sans-serif"
+      >
+        AVAILSYNC · GATE
+      </text>
+      <text
+        x={GATE_CX}
+        y={GATE_CY + GATE_R + 43}
+        textAnchor="middle"
+        fill={deciding ? '#c7d2fe' : '#7a7f95'}
+        fontSize={11}
+        fontFamily="ui-monospace,SFMono-Regular,monospace"
+      >
+        {phase === 'idle' && 'awaiting check-ins'}
+        {phase === 'request' && 'receiving claims'}
+        {phase === 'decide' && 'evaluating'}
+        {phase === 'route' && 'routing decisions'}
+        {phase === 'settled' && scenario.gateSettled}
+      </text>
+    </g>
+  );
+}
+
+// --- Agent card (inside SVG via foreignObject) ---
+function AgentCard({
+  agent,
+  index,
+  phase,
+}: {
+  agent: Agent;
+  index: number;
+  phase: Phase;
+}) {
+  const Icon = agent.icon;
+  const verdictShown = phase === 'route' || phase === 'settled';
+  const settled = phase === 'settled';
+  const dimmed = settled && agent.outcome === 'skip_run';
+  const wakingUp = phase === 'request' || phase === 'decide';
+
+  return (
+    <foreignObject x={AGENT_X} y={agentTop(index)} width={AGENT_W} height={AGENT_H}>
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          boxSizing: 'border-box',
+          padding: '8px 10px',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 9,
+          borderRadius: 8,
+          border: `1px solid ${dimmed ? 'rgba(255,255,255,0.08)' : `${agent.hue}40`}`,
+          background: dimmed
+            ? 'rgba(20,22,32,0.6)'
+            : `linear-gradient(135deg, ${agent.hue}14, rgba(18,20,30,0.92))`,
+          boxShadow: wakingUp ? `0 0 18px ${agent.hue}30` : 'none',
+          transition: 'all 500ms cubic-bezier(0.4,0,0.2,1)',
+          color: '#e5e7eb',
+          fontFamily: 'system-ui,-apple-system,sans-serif',
+          opacity: dimmed ? 0.65 : 1,
+        }}
+      >
+        <div
+          style={{
+            width: 32,
+            height: 32,
+            flexShrink: 0,
+            borderRadius: 6,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: `${agent.hue}1f`,
+            border: `1px solid ${agent.hue}55`,
+          }}
+        >
+          <Icon size={18} />
+        </div>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ fontSize: 12, fontWeight: 600, lineHeight: 1.2 }}>{agent.name}</div>
+          <div
+            style={{
+              fontSize: 10.5,
+              color: '#9ca3af',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              marginTop: 1,
+            }}
+          >
+            {agent.task}
+          </div>
+        </div>
+        {verdictShown && (
+          <div
+            style={{
+              fontSize: 9.5,
+              fontFamily: 'ui-monospace,SFMono-Regular,monospace',
+              padding: '3px 6px',
+              borderRadius: 4,
+              flexShrink: 0,
+              background:
+                agent.outcome === 'proceed'
+                  ? 'rgba(52,211,153,0.18)'
+                  : 'rgba(255,255,255,0.06)',
+              color: agent.outcome === 'proceed' ? '#34d399' : '#94a3b8',
+              border:
+                agent.outcome === 'proceed'
+                  ? '1px solid rgba(52,211,153,0.35)'
+                  : '1px solid rgba(255,255,255,0.08)',
+            }}
+          >
+            {agent.outcome}
+          </div>
+        )}
+      </div>
+    </foreignObject>
+  );
+}
+
+// --- Resource card ---
+function ResourceCard({
+  resource,
+  phase,
+  claimer,
+  copy,
+}: {
+  resource: ResourceLane;
+  phase: Phase;
+  claimer: Agent | undefined;
+  copy: ResourceCopy;
+}) {
+  const claimed = (phase === 'route' || phase === 'settled') && claimer !== undefined;
+  const ClaimerIcon = claimer?.icon;
+  const accent = claimer?.hue ?? '#34d399';
+
+  return (
+    <foreignObject x={RES_X} y={resourceTop(resource)} width={RES_W} height={RES_H}>
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          boxSizing: 'border-box',
+          padding: 12,
+          borderRadius: 8,
+          border: claimed
+            ? `1px solid ${accent}55`
+            : '1px solid rgba(255,255,255,0.1)',
+          background: claimed
+            ? `linear-gradient(135deg, ${accent}14, rgba(16,18,26,0.92))`
+            : 'rgba(16,18,26,0.7)',
+          boxShadow: claimed ? `0 0 24px ${accent}26` : 'none',
+          transition: 'all 500ms cubic-bezier(0.4,0,0.2,1)',
+          color: '#e5e7eb',
+          fontFamily: 'system-ui,-apple-system,sans-serif',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 8,
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+            <GitBranch size={13} color="#9ca3af" />
+            <span
+              style={{
+                fontSize: 12.5,
+                fontFamily: 'ui-monospace,SFMono-Regular,monospace',
+                color: '#e5e7eb',
+              }}
+            >
+              {copy.title}
+            </span>
+          </div>
+          {claimed ? (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 4,
+                fontSize: 10,
+                fontFamily: 'ui-monospace,SFMono-Regular,monospace',
+                color: accent,
+                padding: '2px 6px',
+                borderRadius: 4,
+                background: `${accent}1a`,
+                border: `1px solid ${accent}40`,
+              }}
+            >
+              <Lock size={10} />
+              <span>{copy.claimedLabel}</span>
+            </div>
+          ) : (
+            <span
+              style={{
+                fontSize: 10,
+                fontFamily: 'ui-monospace,SFMono-Regular,monospace',
+                color: '#6b7280',
+                padding: '2px 6px',
+                borderRadius: 4,
+                border: '1px solid rgba(255,255,255,0.08)',
+              }}
+            >
+              free
+            </span>
+          )}
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, minHeight: 22 }}>
+          {claimed && ClaimerIcon ? (
+            <>
+              <div
+                style={{
+                  width: 22,
+                  height: 22,
+                  borderRadius: 4,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  background: `${accent}1f`,
+                  border: `1px solid ${accent}55`,
+                }}
+              >
+                <ClaimerIcon size={13} />
+              </div>
+              <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+                <span style={{ fontSize: 10.5, color: '#d1d5db', lineHeight: 1.2 }}>
+                  {claimer?.task}
+                </span>
+                <span
+                  style={{
+                    fontSize: 9.5,
+                    color: '#9ca3af',
+                    fontFamily: 'ui-monospace,SFMono-Regular,monospace',
+                    marginTop: 1,
+                  }}
+                >
+                  by {claimer?.name}
+                </span>
+              </div>
+            </>
+          ) : (
+            <span style={{ fontSize: 10.5, color: '#6b7280' }}>{copy.idleLabel}</span>
+          )}
+        </div>
+      </div>
+    </foreignObject>
+  );
+}
+
+function ScenarioFlowLayer({
+  scenario,
+  phase,
+  primaryClaimer,
+  secondaryClaimer,
+}: {
+  scenario: Scenario;
+  phase: Phase;
+  primaryClaimer: Agent | undefined;
+  secondaryClaimer: Agent | undefined;
+}) {
+  const routed = phase === 'route' || phase === 'settled';
+
+  if (scenario.id === 'reservations') {
+    const slotHeld = routed && primaryClaimer !== undefined;
+    const docsHeld = routed && secondaryClaimer !== undefined;
+
+    return (
+      <g>
+        <rect
+          x={RES_X - 16}
+          y={RES_PRIMARY_TOP - 18}
+          width={RES_W + 32}
+          height={RES_H + 36}
+          rx={14}
+          fill="none"
+          stroke={slotHeld ? 'rgba(251,146,60,0.58)' : 'rgba(251,146,60,0.16)'}
+          strokeWidth={slotHeld ? 1.6 : 1}
+          strokeDasharray="5 7"
+          opacity={phase === 'idle' ? 0.45 : 1}
+        >
+          <animate
+            attributeName="stroke-dashoffset"
+            from="0"
+            to="-48"
+            dur="4s"
+            repeatCount="indefinite"
+          />
+        </rect>
+
+        {slotHeld && (
+          <g>
+            <circle cx={RES_X - 16} cy={resourceCenterY('primary')} r="4" fill="#fb923c">
+              <animate
+                attributeName="r"
+                values="4;10;4"
+                dur="1.7s"
+                repeatCount="indefinite"
+              />
+              <animate
+                attributeName="opacity"
+                values="1;0.15;1"
+                dur="1.7s"
+                repeatCount="indefinite"
+              />
+            </circle>
+            <text
+              x={RES_X + RES_W / 2}
+              y={RES_PRIMARY_TOP - 28}
+              textAnchor="middle"
+              fill="#fed7aa"
+              fontSize={10}
+              fontFamily="ui-monospace,SFMono-Regular,monospace"
+            >
+              lease active until 10:30
+            </text>
+          </g>
+        )}
+
+        <foreignObject x={252} y={398} width={318} height={126}>
+          <div
+            style={{
+              width: '100%',
+              height: '100%',
+              boxSizing: 'border-box',
+              borderRadius: 10,
+              border: '1px solid rgba(251,146,60,0.28)',
+              background:
+                'linear-gradient(135deg, rgba(251,146,60,0.12), rgba(14,16,24,0.92))',
+              boxShadow: slotHeld ? '0 0 28px rgba(251,146,60,0.12)' : 'none',
+              padding: '11px 12px',
+              fontFamily: 'system-ui,-apple-system,sans-serif',
+              color: '#e5e7eb',
+              transition: 'box-shadow 500ms ease',
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+              <span
+                style={{
+                  fontSize: 10,
+                  letterSpacing: 1.2,
+                  textTransform: 'uppercase',
+                  color: '#fed7aa',
+                }}
+              >
+                Reservation ledger
+              </span>
+              <span
+                style={{
+                  borderRadius: 999,
+                  border: '1px solid rgba(251,146,60,0.35)',
+                  padding: '2px 7px',
+                  fontSize: 10,
+                  fontFamily: 'ui-monospace,SFMono-Regular,monospace',
+                  color: slotHeld ? '#fb923c' : '#787b8d',
+                }}
+              >
+                {slotHeld ? 'slot held' : 'checking'}
+              </span>
+            </div>
+
+            <div style={{ marginTop: 10, display: 'grid', gap: 7 }}>
+              {[
+                {
+                  label: 'deploy-window 10:00',
+                  value: slotHeld ? `held by ${primaryClaimer?.name}` : 'open',
+                  color: '#fb923c',
+                  active: slotHeld,
+                },
+                {
+                  label: 'overlapping deploy asks',
+                  value: slotHeld ? 'return skip_run' : 'waiting',
+                  color: '#f87171',
+                  active: slotHeld,
+                },
+                {
+                  label: 'owner/docs',
+                  value: docsHeld ? `proceed for ${secondaryClaimer?.name}` : 'independent',
+                  color: '#34d399',
+                  active: docsHeld,
+                },
+              ].map((row) => (
+                <div
+                  key={row.label}
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: '9px 1fr auto',
+                    alignItems: 'center',
+                    gap: 8,
+                    fontSize: 10.5,
+                  }}
+                >
+                  <span
+                    style={{
+                      width: 7,
+                      height: 7,
+                      borderRadius: 999,
+                      background: row.active ? row.color : 'rgba(255,255,255,0.14)',
+                      boxShadow: row.active ? `0 0 12px ${row.color}66` : 'none',
+                    }}
+                  />
+                  <span style={{ color: '#cbd5e1', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                    {row.label}
+                  </span>
+                  <span
+                    style={{
+                      color: row.active ? row.color : '#7a7f95',
+                      fontFamily: 'ui-monospace,SFMono-Regular,monospace',
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
+                    {row.value}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </foreignObject>
+      </g>
+    );
+  }
+
+  if (scenario.id === 'history') {
+    const events = [
+      { phase: 'request', label: 'check', detail: 'work/run/start', color: '#60a5fa' },
+      { phase: 'route', label: 'claim', detail: 'repo claimed', color: '#34d399' },
+      { phase: 'route', label: 'skip_run', detail: 'blocked overlap', color: '#f87171' },
+      { phase: 'settled', label: 'release', detail: 'resource freed', color: '#a5b4fc' },
+    ] as const;
+    const phaseRank: Record<Phase, number> = {
+      idle: 0,
+      request: 1,
+      decide: 1,
+      route: 2,
+      settled: 3,
+    };
+
+    return (
+      <g>
+        <foreignObject x={245} y={388} width={332} height={138}>
+          <div
+            style={{
+              width: '100%',
+              height: '100%',
+              boxSizing: 'border-box',
+              borderRadius: 10,
+              border: '1px solid rgba(52,211,153,0.26)',
+              background:
+                'linear-gradient(135deg, rgba(52,211,153,0.1), rgba(14,16,24,0.94))',
+              boxShadow: phase === 'settled' ? '0 0 28px rgba(52,211,153,0.12)' : 'none',
+              padding: '11px 12px',
+              fontFamily: 'system-ui,-apple-system,sans-serif',
+              color: '#e5e7eb',
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+              <span
+                style={{
+                  fontSize: 10,
+                  letterSpacing: 1.2,
+                  textTransform: 'uppercase',
+                  color: '#86efac',
+                }}
+              >
+                Activity stream
+              </span>
+              <span
+                style={{
+                  color: phase === 'settled' ? '#34d399' : '#7a7f95',
+                  fontSize: 10,
+                  fontFamily: 'ui-monospace,SFMono-Regular,monospace',
+                }}
+              >
+                {phase === 'settled' ? 'reviewable' : 'recording'}
+              </span>
+            </div>
+
+            <div style={{ marginTop: 10, display: 'grid', gap: 6 }}>
+              {events.map((event, index) => {
+                const visible = phaseRank[phase] >= phaseRank[event.phase as Phase];
+                return (
+                  <div
+                    key={event.label}
+                    style={{
+                      display: 'grid',
+                      gridTemplateColumns: '42px 1fr auto',
+                      alignItems: 'center',
+                      gap: 8,
+                      borderRadius: 6,
+                      border: visible
+                        ? `1px solid ${event.color}35`
+                        : '1px solid rgba(255,255,255,0.06)',
+                      background: visible ? `${event.color}12` : 'rgba(255,255,255,0.025)',
+                      padding: '5px 7px',
+                      opacity: visible ? 1 : 0.42,
+                      transform: visible ? 'translateX(0)' : 'translateX(-6px)',
+                      transition: `opacity 450ms ease ${index * 80}ms, transform 450ms ease ${index * 80}ms, border-color 450ms ease`,
+                    }}
+                  >
+                    <span
+                      style={{
+                        color: visible ? event.color : '#7a7f95',
+                        fontSize: 9.5,
+                        fontFamily: 'ui-monospace,SFMono-Regular,monospace',
+                      }}
+                    >
+                      {String(index + 1).padStart(2, '0')}
+                    </span>
+                    <span
+                      style={{
+                        color: visible ? '#e5e7eb' : '#8b91a3',
+                        fontSize: 10.5,
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                      }}
+                    >
+                      {event.detail}
+                    </span>
+                    <span
+                      style={{
+                        color: visible ? event.color : '#7a7f95',
+                        fontSize: 9.5,
+                        fontFamily: 'ui-monospace,SFMono-Regular,monospace',
+                      }}
+                    >
+                      {event.label}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </foreignObject>
+      </g>
+    );
+  }
+
+  return null;
+}
+
+// --- Connector path (the static dim line + dynamic highlight) ---
+function ConnectorPath({
+  d,
+  highlighted,
+  color,
+}: {
+  d: string;
+  highlighted: boolean;
+  color: string;
+}) {
+  return (
+    <g>
+      <path
+        d={d}
+        fill="none"
+        stroke="rgba(125,140,240,0.13)"
+        strokeWidth={1}
+        strokeDasharray="3 4"
+      />
+      <path
+        d={d}
+        fill="none"
+        stroke={color}
+        strokeWidth={1.4}
+        strokeLinecap="round"
+        opacity={highlighted ? 0.76 : 0}
+        strokeDasharray="8 10"
+        style={{
+          transition: 'opacity 650ms cubic-bezier(0.25,1,0.5,1)',
+        }}
+      >
+        <animate
+          attributeName="stroke-dashoffset"
+          from="0"
+          to="-54"
+          dur="2.2s"
+          repeatCount="indefinite"
+        />
+      </path>
+    </g>
+  );
+}
+
+// --- Background grid ---
+function BackgroundGrid() {
+  return (
+    <g opacity={0.6}>
+      <defs>
+        <pattern id="grid-dots" width="32" height="32" patternUnits="userSpaceOnUse">
+          <circle cx="1" cy="1" r="0.7" fill="rgba(125,140,240,0.12)" />
+        </pattern>
+        <radialGradient id="bg-glow" cx="50%" cy="50%" r="55%">
+          <stop offset="0%" stopColor="rgba(94,106,210,0.18)" />
+          <stop offset="60%" stopColor="rgba(94,106,210,0.04)" />
+          <stop offset="100%" stopColor="rgba(0,0,0,0)" />
+        </radialGradient>
+      </defs>
+      <rect x="0" y="0" width={VIEW_W} height={VIEW_H} fill="url(#grid-dots)" />
+      <rect x="0" y="0" width={VIEW_W} height={VIEW_H} fill="url(#bg-glow)" />
+    </g>
+  );
+}
+
+// --- Main animated stage ---
+function CoordinationStage({ phase, scenario }: { phase: Phase; scenario: Scenario }) {
+  const primaryClaimer = scenario.agents.find(
+    (a) => a.resource === 'primary' && a.outcome === 'proceed',
+  );
+  const secondaryClaimer = scenario.agents.find(
+    (a) => a.resource === 'secondary' && a.outcome === 'proceed',
+  );
+
+  return (
+    <svg
+      viewBox={`0 0 ${VIEW_W} ${VIEW_H}`}
+      className="block h-auto w-full"
+      role="img"
+      aria-label="Availsync coordinates agent claims before they touch shared resources"
+    >
+      <defs>
+        <radialGradient id="gate-grad" cx="50%" cy="50%" r="50%">
+          <stop offset="0%" stopColor="rgba(165,180,252,0.45)" />
+          <stop offset="55%" stopColor="rgba(78,84,138,0.55)" />
+          <stop offset="100%" stopColor="rgba(28,30,46,0.95)" />
+        </radialGradient>
+        <clipPath id="gate-inner-clip">
+          <circle cx={GATE_CX} cy={GATE_CY} r={GATE_R - 3} />
+        </clipPath>
+        <linearGradient id="sweep-grad" x1="0" x2="1" y1="0" y2="0">
+          <stop offset="0%" stopColor="rgba(165,180,252,0)" />
+          <stop offset="55%" stopColor="rgba(165,180,252,0.18)" />
+          <stop offset="100%" stopColor="rgba(199,210,254,0.76)" />
+        </linearGradient>
+
+        {/* Reusable path definitions referenced by mpath */}
+        {scenario.agents.map((agent, i) => (
+          <path
+            key={`def-a-${scenario.id}-${agent.id}`}
+            id={`path-a2g-${scenario.id}-${agent.id}`}
+            d={pathAgentToGate(i)}
+          />
+        ))}
+        <path id={`path-g2r-${scenario.id}-primary`} d={pathGateToResource('primary')} />
+        <path id={`path-g2r-${scenario.id}-secondary`} d={pathGateToResource('secondary')} />
+      </defs>
+
+      <BackgroundGrid />
+
+      {/* Connector lines (agent → gate) */}
+      {scenario.agents.map((agent, i) => (
+        <ConnectorPath
+          key={`conn-a-${agent.id}`}
+          d={pathAgentToGate(i)}
+          highlighted={phase === 'request' || phase === 'decide' || phase === 'route'}
+          color={agent.hue}
+        />
+      ))}
+
+      {/* Connector lines (gate → resources) */}
+      <ConnectorPath
+        d={pathGateToResource('primary')}
+        highlighted={phase === 'route' || phase === 'settled'}
+        color={primaryClaimer?.hue ?? '#34d399'}
+      />
+      <ConnectorPath
+        d={pathGateToResource('secondary')}
+        highlighted={phase === 'route' || phase === 'settled'}
+        color={secondaryClaimer?.hue ?? '#34d399'}
+      />
+
+      {/* Request packets: agent → gate */}
+      {scenario.agents.map((agent) => (
+        <Packet
+          key={`req-${agent.id}`}
+          pathId={`path-a2g-${scenario.id}-${agent.id}`}
+          start={0.12}
+          end={0.39}
+          visibleUntil={0.52}
+          color={agent.hue}
+          size={5}
+        />
+      ))}
+
+      {/* Route packets: proceed agents → resources */}
+      {scenario.agents
+        .filter((a) => a.outcome === 'proceed')
+        .map((agent) => (
+          <Packet
+            key={`route-fwd-${agent.id}`}
+            pathId={`path-g2r-${scenario.id}-${agent.resource}`}
+            start={0.5}
+            end={0.73}
+            color="#34d399"
+            size={6}
+          />
+        ))}
+
+      {/* Route packets: skip_run agents (bounce back gate → agent in red) */}
+      {scenario.agents
+        .filter((a) => a.outcome === 'skip_run')
+        .map((agent) => (
+          <Packet
+            key={`route-back-${agent.id}`}
+            pathId={`path-a2g-${scenario.id}-${agent.id}`}
+            start={0.5}
+            end={0.73}
+            color="#f87171"
+            size={5}
+            reverse
+          />
+        ))}
+
+      {/* Gate */}
+      <GateNode phase={phase} scenario={scenario} />
+
+      {/* Agent cards */}
+      {scenario.agents.map((agent, i) => (
+        <AgentCard key={agent.id} agent={agent} index={i} phase={phase} />
+      ))}
+
+      {/* Resource cards */}
+      <ResourceCard
+        resource="primary"
+        phase={phase}
+        claimer={primaryClaimer}
+        copy={scenario.resources.primary}
+      />
+      <ResourceCard
+        resource="secondary"
+        phase={phase}
+        claimer={secondaryClaimer}
+        copy={scenario.resources.secondary}
+      />
+
+      <ScenarioFlowLayer
+        scenario={scenario}
+        phase={phase}
+        primaryClaimer={primaryClaimer}
+        secondaryClaimer={secondaryClaimer}
+      />
+    </svg>
+  );
+}
+
+// --- Live phase ticker (under the stage) ---
+function PhaseTicker({ phase }: { phase: Phase }) {
+  const steps: Array<{ id: Phase; label: string }> = [
+    { id: 'request', label: 'Agents check in' },
+    { id: 'decide', label: 'Gate evaluates' },
+    { id: 'route', label: 'Decisions routed' },
+    { id: 'settled', label: 'Resources protected' },
+  ];
+  const activeIdx = steps.findIndex((s) => s.id === phase);
+
+  return (
+    <div className="mt-4 flex flex-wrap items-center gap-2 rounded border border-border bg-bg/60 px-3 py-2">
+      {steps.map((step, i) => {
+        const reached = activeIdx >= i;
+        const current = activeIdx === i;
+        return (
+          <div className="flex items-center gap-2" key={step.id}>
+            <div className="flex items-center gap-2">
+              <span
+                className={`flex h-4 w-4 items-center justify-center rounded-full border text-[9px] font-mono transition-colors duration-500 ${
+                  current
+                    ? 'border-accent bg-accent/30 text-accent'
+                    : reached
+                      ? 'border-success/60 bg-success/20 text-success'
+                      : 'border-border bg-bg text-text-tertiary'
+                }`}
+              >
+                {reached && !current ? <Check className="h-2.5 w-2.5" /> : i + 1}
+              </span>
+              <span
+                className={`text-[11px] transition-colors duration-500 ${
+                  current
+                    ? 'text-text-primary'
+                    : reached
+                      ? 'text-text-secondary'
+                      : 'text-text-tertiary'
+                }`}
+              >
+                {step.label}
+              </span>
+            </div>
+            {i < steps.length - 1 && (
+              <div className="h-px w-6 bg-border" aria-hidden="true" />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function ScenarioPreview({
+  scenario,
+  active,
+}: {
+  scenario: Scenario;
+  active: boolean;
+}) {
+  if (scenario.id === 'reservations') {
+    return (
+      <span
+        className={`grid h-14 w-24 shrink-0 grid-rows-[auto_1fr] rounded border px-2 py-1.5 transition-colors duration-300 ${
+          active
+            ? 'border-warning/45 bg-warning/10'
+            : 'border-border bg-surface group-hover:border-warning/25'
+        }`}
+        aria-hidden="true"
+      >
+        <span className="flex items-center justify-between">
+          <Clock3 className={`h-3 w-3 ${active ? 'text-warning' : 'text-text-tertiary'}`} />
+          <span className="font-mono text-[8px] text-text-tertiary">10:00</span>
+        </span>
+        <span className="mt-1 grid grid-cols-4 items-end gap-1">
+          {[0, 1, 2, 3].map((item) => (
+            <span
+              className={`rounded-sm transition-all duration-500 ${
+                item === 1
+                  ? active
+                    ? 'h-6 bg-warning shadow-[0_0_12px_rgba(251,146,60,0.45)]'
+                    : 'h-5 bg-warning/45'
+                  : item === 2
+                    ? 'h-3 bg-error/45'
+                    : 'h-2 bg-border'
+              }`}
+              key={item}
+            />
+          ))}
+        </span>
+      </span>
+    );
+  }
+
+  if (scenario.id === 'history') {
+    return (
+      <span
+        className={`grid h-14 w-24 shrink-0 gap-1 rounded border px-2 py-1.5 transition-colors duration-300 ${
+          active
+            ? 'border-success/45 bg-success/10'
+            : 'border-border bg-surface group-hover:border-success/25'
+        }`}
+        aria-hidden="true"
+      >
+        {['check', 'claim', 'skip'].map((event, index) => (
+          <span className="flex items-center gap-1.5" key={event}>
+            <span
+              className={`h-1.5 w-1.5 rounded-full ${
+                index === 2 ? 'bg-error' : active ? 'bg-success' : 'bg-text-tertiary'
+              } ${active && index !== 2 ? 'animate-pulse' : ''}`}
+            />
+            <span
+              className={`h-1.5 rounded-full ${
+                active ? 'bg-success/35' : 'bg-border'
+              }`}
+              style={{ width: `${34 + index * 12}px` }}
+            />
+          </span>
+        ))}
+      </span>
+    );
+  }
+
+  return (
+    <span
+      className={`grid h-14 w-24 shrink-0 place-items-center rounded border transition-colors duration-300 ${
+        active
+          ? 'border-accent/45 bg-accent/10'
+          : 'border-border bg-surface group-hover:border-accent/25'
+      }`}
+      aria-hidden="true"
+    >
+      <span className="flex items-center gap-1.5 font-mono text-[9px]">
+        <span className={active ? 'text-warning' : 'text-text-tertiary'}>20</span>
+        <span className="text-text-tertiary">&gt;</span>
+        <span className={active ? 'text-accent' : 'text-text-tertiary'}>10</span>
+        <span className="text-text-tertiary">&gt;</span>
+        <span className={active ? 'text-success' : 'text-text-tertiary'}>0</span>
+      </span>
+      <Zap className={`h-3.5 w-3.5 ${active ? 'text-warning' : 'text-text-tertiary'}`} />
+    </span>
+  );
+}
+
+export function AgentCoordinationStory() {
+  const [reduced, setReduced] = useState(false);
+  const [selectedScenarioId, setSelectedScenarioId] = useState<ScenarioId>('priority');
+
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setReduced(mq.matches);
+    const handler = () => setReduced(mq.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
+
+  const { phase } = useScenario(reduced);
+  const settled = phase === 'settled';
+  const selectedScenario =
+    scenarios.find((scenario) => scenario.id === selectedScenarioId) ?? defaultScenario;
+
+  return (
+    <section className="border-b border-border bg-surface">
+      <div className="mx-auto grid max-w-7xl gap-10 px-4 py-20 lg:grid-cols-[0.55fr_1.45fr]">
+        <div>
+          <p className="text-label uppercase text-text-tertiary">Agent traffic control</p>
+          <h2 className="mt-3 max-w-xl text-3xl font-semibold leading-tight text-text-primary">
+            {selectedScenario.heading}
+          </h2>
+          <p className="mt-5 max-w-xl text-heading leading-7 text-text-secondary">
+            {selectedScenario.intro}
+          </p>
+          <p className="mt-4 max-w-xl text-body leading-6 text-text-secondary">
+            {selectedScenario.detail}
+          </p>
+          <div className="mt-8 grid gap-3">
+            {scenarios.map((scenario) => (
+              <button
+                type="button"
+                className={`group relative overflow-hidden rounded border px-4 py-3 text-left transition-all duration-300 ${
+                  selectedScenario.id === scenario.id
+                    ? 'border-accent/60 bg-accent/10 shadow-[0_0_28px_rgba(94,106,210,0.16)]'
+                    : 'border-border bg-bg hover:border-accent/30 hover:bg-surface-raised'
+                }`}
+                key={scenario.id}
+                onClick={() => setSelectedScenarioId(scenario.id)}
+                aria-pressed={selectedScenario.id === scenario.id}
+              >
+                <span
+                  className={`absolute left-0 top-0 h-full w-0.5 transition-colors duration-300 ${
+                    selectedScenario.id === scenario.id ? 'bg-accent' : 'bg-transparent'
+                  }`}
+                  aria-hidden="true"
+                />
+                <span className="flex items-start justify-between gap-4">
+                  <span className="min-w-0">
+                    <span className="flex items-center gap-2 text-body font-medium text-text-primary">
+                      {scenario.id === 'history' && <ListChecks className="h-3.5 w-3.5 text-success" />}
+                      {scenario.id === 'reservations' && <Clock3 className="h-3.5 w-3.5 text-warning" />}
+                      {scenario.id === 'priority' && <Zap className="h-3.5 w-3.5 text-accent" />}
+                      {scenario.title}
+                    </span>
+                    <span className="mt-1 block text-body leading-6 text-text-secondary">
+                      {scenario.body}
+                    </span>
+                  </span>
+                  <ScenarioPreview scenario={scenario} active={selectedScenario.id === scenario.id} />
+                </span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="relative overflow-hidden rounded border border-border bg-[linear-gradient(135deg,rgba(20,20,28,0.98),rgba(14,16,24,0.98))] p-4 shadow-[0_28px_90px_rgba(0,0,0,0.38)]">
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_8%,rgba(94,106,210,0.22),transparent_38%),radial-gradient(circle_at_85%_82%,rgba(42,179,123,0.12),transparent_30%)]" />
+          <div className="relative">
+            <div className="mb-3 flex flex-wrap items-center justify-between gap-3 rounded border border-accent/30 bg-accent/10 px-4 py-3">
+              <div className="flex items-center gap-3">
+                <div className="flex h-10 w-10 items-center justify-center rounded border border-accent/40 bg-bg text-accent">
+                  <RadioTower className="h-4 w-4" />
+                </div>
+                <div>
+                  <p className="text-label uppercase text-text-tertiary">
+                    {selectedScenario.eyebrow}
+                  </p>
+                  <p className="text-body font-medium text-text-primary">
+                    {settled
+                      ? selectedScenario.settled
+                      : selectedScenario.live}
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-center gap-2 rounded bg-bg px-3 py-2">
+                {settled ? (
+                  <Check className="h-4 w-4 text-success" />
+                ) : (
+                  <Zap className="h-4 w-4 text-warning" />
+                )}
+                <span
+                  className={`font-mono text-[11px] ${settled ? 'text-success' : 'text-warning'}`}
+                >
+                  {settled ? 'protected' : phase}
+                </span>
+              </div>
+            </div>
+
+            <CoordinationStage phase={phase} scenario={selectedScenario} />
+            <PhaseTicker phase={phase} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}