Interactive research article

.gitattributes

@@ -0,0 +1,5 @@
+public/index.json filter=lfs diff=lfs merge=lfs -text
+public/datasets/*.json filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+package.json -filter -diff -merge text
+package-lock.json -filter -diff -merge text

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Dockerfile

@@ -0,0 +1,14 @@
+FROM node:20-slim AS build
+WORKDIR /app
+RUN apt-get update && apt-get install -y git git-lfs && git lfs install && apt-get clean
+COPY package*.json ./
+RUN npm install
+COPY . .
+ENV ASG_BASE=/
+RUN npm run build
+FROM nginx:alpine
+RUN mkdir -p /var/cache/nginx /tmp && chmod -R 777 /var/cache/nginx /tmp
+COPY nginx.conf /etc/nginx/nginx.conf
+COPY --from=build /app/dist /app/dist
+EXPOSE 7860
+CMD ["nginx","-g","daemon off;"]

README.md

@@ -0,0 +1,19 @@
+---
+title: 'Agent State Graph — Dashboard'
+short_desc: 'Interactive dashboard for FSMs extracted from LLM agent traces'
+emoji: 📊
+colorFrom: blue
+colorTo: gray
+sdk: docker
+pinned: false
+app_port: 7860
+tags:
+  - data visualization
+  - agents
+  - interpretability
+---
+
+# Agent State Graph — Dashboard
+
+Interactive explorer for the automata extracted from LLM agent traces (12 datasets).
+Also served under seongland.com/article/asg/browser.

eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

index.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Agent State Graph — FSMs from LLM Agent Traces</title>
+    <meta name="description" content="Interactive dashboard for Agent State Graph: compact finite-state machines extracted from LLM agent traces across 14 datasets. Failure prediction, workflow memory, cross-model transfer, runtime monitoring, and counterfactual paths." />
+    <meta name="theme-color" content="#c4553a" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Agent State Graph" />
+    <meta property="og:description" content="Compact FSMs from LLM agent traces. 14 datasets, ≥0.993 fitness, AUROC up to 0.94, runtime monitor F1=0.904." />
+    <meta property="og:image" content="/og.png" />
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Agent State Graph" />
+    <meta name="twitter:description" content="Compact FSMs from LLM agent traces. 14 datasets, ≥0.993 fitness, AUROC up to 0.94, runtime monitor F1=0.904." />
+    <meta name="twitter:image" content="/og.png" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

nginx.conf

@@ -0,0 +1,16 @@
+worker_processes auto;
+pid /tmp/nginx.pid;
+events { worker_connections 1024; }
+http {
+  include /etc/nginx/mime.types;
+  default_type application/octet-stream;
+  access_log /tmp/access.log; error_log /tmp/error.log;
+  sendfile on; keepalive_timeout 65;
+  gzip on; gzip_types text/plain text/css application/javascript application/json image/svg+xml;
+  server {
+    listen 7860; server_name localhost; root /app/dist; index index.html;
+    location = /health { return 200 "ok"; add_header Content-Type text/plain; }
+    location /assets/ { expires 30d; add_header Cache-Control "public, max-age=2592000, immutable"; }
+    location / { try_files $uri $uri/ /index.html; }
+  }
+}

public/datasets/agentnet.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:86bf210622b292aa7b746ab12ce89a9f27d2f980a85835602c5d132fc00da5fb
+size 19506736

public/datasets/atbench.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:468adac6e2b9f513fcdab0ef78d1acae46c79669997670f50470dab805cf2f7d
+size 1725154

public/datasets/gui-odyssey.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:aef9b8213b2e0cd8d3397ad9199988d904f02124ea032fe747c73666a1b5fd5c
+size 20065720

public/datasets/mind2web.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9e78c4259203c215ca79f62a1b5b592ac7296196ae81775f60777245be9a3541
+size 773930

public/datasets/osworld.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e32250027c128841090dd8e4f1ffe1cb7e3d2d81990a060a302a0145bf28b02f
+size 11839535

public/datasets/sweagent.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:119367306756c922e6fe22992df6b0465f60c60af5aef788ef98d946ee10c6dd
+size 14925458

public/datasets/swesmith.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3dd570ebeb7457e7b9aeba5db3807ac95bc13786890e89bc52b56030bfc652fc
+size 4534928

public/datasets/tau2bench-airline.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c2f3e34b12323ccac31e8e9de24e9b8e9567887755e670d0db7c9fd4e6d6063e
+size 3613561

public/datasets/tau2bench-retail.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dfcc37e9ff3ce5666514221279e31b86027fcae2755d822626099bd595f451c9
+size 9047686

public/datasets/tau2bench-telecom.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:909001cd3fd4096a11b4fea7c10ebb6ec50e657f8fed75972819f53bb14de327
+size 20071500

public/datasets/taubench-airline.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0acd64ab4d074017d3244012edf63fe3ec33e39ae8f958e11f9860914eaf74bb
+size 965257

public/datasets/taubench-retail.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4de6585056fd42afa05313358c1dd4537e280e3a92c752a390c3b6fef4e2a42b
+size 2413095

public/datasets/webarena.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ded3ec8df89329af6854f27288897e5d423958cb0b2d2f15cb219979801d79cb
+size 16829352

public/datasets/whoandwhen.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f97049802bc737bf836a9aeceffef3c27abf8e752cffb01fccdb136bb0253276
+size 682956

public/index.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:def1c48a6c2cfeb58fa2fb3fd2250784420fceb6319104255ff3e6457c3b008f
+size 2402173

scripts/build-data.ts

@@ -0,0 +1,996 @@
+/**
+ * Preprocesses experiment results into a single JSON for the browser.
+ * Computes per-trace FSM traversals for the interpretability view.
+ * Run: npx tsx scripts/build-data.ts
+ */
+import { readFileSync, writeFileSync, mkdirSync } from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const ROOT = path.resolve(__dirname, '../..')
+// Active 12 datasets (paper set). tau-bench v1 (taubench-airline/retail) was dropped
+// and replaced by tau2-bench; excluded here so the dashboard reflects 12, not 14.
+const DATASETS = [
+  'swesmith', 'whoandwhen', 'mind2web',
+  'sweagent',
+  'gui-odyssey', 'webarena', 'agentnet',
+  'tau2bench-airline', 'tau2bench-retail', 'tau2bench-telecom',
+  'atbench', 'osworld',
+] as const
+
+// ---------- Types ----------
+
+interface TraceStep {
+  idx: number
+  role: string
+  activity: string
+  fromState: string
+  toState: string | null  // null = FSM failure
+  consumed: boolean
+}
+
+interface TraceDetail {
+  id: string
+  split: 'train' | 'test'
+  success: boolean | null
+  fullFitness: number | null
+  successFitness: number | null
+  steps: TraceStep[]
+  stateSequence: string[]
+  fitness: number
+  consumed: number
+  total: number
+  firstFailIdx: number  // -1 if no failure
+  stateVisits: Record<string, number>
+}
+
+interface DatasetBundle {
+  id: string
+  meta: {
+    name: string
+    shortName: string
+    venue: string
+    traces: number
+    trainSize: number
+    testSize: number
+    activities: number
+    description: string
+  }
+  baselines: Array<{
+    method: string
+    label: string
+    trainFitness: number
+    testFitness: number
+    states: number | null
+    transitions: number | null
+    randomAcceptRate: number | null
+    permutedAcceptRate: number | null
+    pmPrecision: number | null
+    category: string
+    note: string
+  }>
+  convergence: {
+    stateConvergenceAt: number
+    transitionConvergenceAt: number
+    fitnessConvergenceAt: number
+    curve: Array<{ n: number; states: number; transitions: number; fitness: number }>
+  }
+  traces: TraceDetail[]
+  downstream: {
+    fitnessProfile: {
+      mean: number; std: number; min: number; max: number
+      anomalyCount: number; anomalies: string[]
+      histogram: Array<{ min: number; max: number; count: number }>
+    } | null
+    behavioralProfiling: {
+      stateVisitDistribution: Array<{ state: string; count: number; fraction: number }>
+      transitionFrequency: Array<{ transition: string; count: number; fraction: number }>
+      deadTransitions: string[]
+      transitionCoverage: number
+      avgUniqueStatesPerTrace: number
+    } | null
+    structuralAnalysis: {
+      density: number
+      hubs: Array<{ id: string; outDegree: number; inDegree: number }>
+      sinks: string[]
+      sources: string[]
+      selfLoops: string[]
+      nonTrivialSCCs: string[][]
+    } | null
+    differentialFSM: {
+      successOnlyTransitions: string[]
+      failureOnlyTransitions: string[]
+      sharedTransitions: string[]
+    } | null
+    failurePrediction: Record<string, unknown> | null
+    mistakeLocalization: Record<string, unknown> | null
+    neuralProbe: {
+      seq_mlp: { cv: number; std: number; holdout: number }
+      fsm_mlp: { cv: number; std: number; holdout: number }
+      seq_gru: { cv: number; std: number; holdout: number }
+      fsm_gru: { cv: number; std: number; holdout: number }
+      seq_transf: { cv: number; std: number; holdout: number }
+      fsm_transf: { cv: number; std: number; holdout: number }
+    } | null
+    workflowMemory: {
+      n: number
+      noMemory: { accuracy: number; correct: number }
+      awm: { accuracy: number; correct: number }
+      fsm: { accuracy: number; correct: number }
+      fsmGain: number
+    } | null
+    crossModel: {
+      models: Array<{ name: string; shortName: string; traces: number; successRate: number }>
+      matrices: {
+        fitness: number[][]
+        auroc: number[][]
+        stateCount: number[][]
+      }
+      summary: {
+        diagonalAUROC: { mean: number; std: number }
+        offDiagonalAUROC: { mean: number; std: number }
+        aurocTransferGap: number
+      }
+    } | null
+    monitor: {
+      trainSize: number; testSize: number; succSize: number; failSize: number
+      configs: Array<{
+        config: string; gamma: number; window: number
+        monitoringCurve: Array<{ point: number; threshold: number; f1: number; precision: number; recall: number }>
+      }>
+      baselines: Record<string, { auroc: number; curve?: Array<{ point: number; f1: number }> }>
+    } | null
+    counterfactual: {
+      nSuccess: number; nFailure: number
+      decisionPoints: Array<{ state: string; branching: number; targets: string[] }>
+      pathDiversity: { uniqueSuccPaths: number; uniqueFailPaths: number; overlap: number }
+      dpDivergence: Array<{ state: string; jsd: number }>
+      editDistance: { meanInternal?: number; meanCross?: number } | null
+    } | null
+  }
+  multiseed: {
+    numSeeds: number
+    ourFSM: { testFitness: { mean: number; std: number }; states: { mean: number; std: number } }
+    rpni: { testFitness: { mean: number; std: number }; states: { mean: number; std: number } }
+    awm: { testFitness: { mean: number; std: number } }
+  } | null
+  graph: {
+    states: Array<{ id: string }>
+    transitions: Array<{ source: string; target: string; subject: string }>
+  }
+}
+
+const META: Record<string, DatasetBundle['meta']> = {
+  swesmith: {
+    name: 'SWE-smith',
+    shortName: 'SWE',
+    venue: 'NeurIPS 2025 D&B',
+    traces: 500,
+    trainSize: 400,
+    testSize: 100,
+    activities: 9,
+    description: 'Coding agent trajectories with tool calls (bash, str_replace_editor, submit)',
+  },
+  whoandwhen: {
+    name: 'Who & When to Delegate',
+    shortName: 'W&W',
+    venue: 'arXiv 2505.00212',
+    traces: 184,
+    trainSize: 147,
+    testSize: 37,
+    activities: 8,
+    description: 'Multi-agent delegation failures across 8 specialized actors',
+  },
+  mind2web: {
+    name: 'Mind2Web',
+    shortName: 'M2W',
+    venue: 'NeurIPS 2023',
+    traces: 500,
+    trainSize: 400,
+    testSize: 100,
+    activities: 7,
+    description: 'Web navigation agent traces with click, type, select, hover, enter actions',
+  },
+  'taubench-airline': {
+    name: 'tau-bench (airline)',
+    shortName: 'tau-air',
+    venue: 'Sierra 2024',
+    traces: 200,
+    trainSize: 160,
+    testSize: 40,
+    activities: 5,
+    description: 'Customer service agent traces for airline booking/cancellation with 12 APIs',
+  },
+  'taubench-retail': {
+    name: 'tau-bench (retail)',
+    shortName: 'tau-ret',
+    venue: 'Sierra 2024',
+    traces: 460,
+    trainSize: 368,
+    testSize: 92,
+    activities: 5,
+    description: 'Customer service agent traces for retail order management with 14 APIs',
+  },
+  sweagent: {
+    name: 'SWE-agent',
+    shortName: 'SWE-a',
+    venue: 'NeurIPS 2024',
+    traces: 2000,
+    trainSize: 1600,
+    testSize: 400,
+    activities: 68,
+    description: 'SWE-agent coding trajectories with 68 unique bash/editor commands',
+  },
+  atbench: {
+    name: 'ATBench',
+    shortName: 'ATBench',
+    venue: 'arXiv 2604.02022',
+    traces: 1000,
+    trainSize: 800,
+    testSize: 200,
+    activities: 14,
+    description: 'Agent trajectory safety benchmark with balanced safe/unsafe outcomes (503 safe / 497 unsafe)',
+  },
+  osworld: {
+    name: 'OSWorld',
+    shortName: 'OSWorld',
+    venue: 'NeurIPS 2024',
+    traces: 2166,
+    trainSize: 1732,
+    testSize: 434,
+    activities: 27,
+    description: 'Desktop GUI agent traces (Gelato-30B, GTA1-32B) across real OS applications',
+  },
+  'gui-odyssey': {
+    name: 'GUI-Odyssey',
+    shortName: 'GUI',
+    venue: 'CVPR 2025',
+    traces: 7735,
+    trainSize: 6188,
+    testSize: 1547,
+    activities: 6,
+    description: 'Mobile GUI agent traces with click, type, scroll, swipe, enter, home actions',
+  },
+  webarena: {
+    name: 'WebArena',
+    shortName: 'WA',
+    venue: 'ICLR 2024 Oral',
+    traces: 8337,
+    trainSize: 6670,
+    testSize: 1667,
+    activities: 24,
+    description: 'Web agent traces on realistic websites with navigation, form-filling, and content extraction',
+  },
+  agentnet: {
+    name: 'AgentNet',
+    shortName: 'ANet',
+    venue: 'NeurIPS 2024',
+    traces: 5000,
+    trainSize: 4000,
+    testSize: 1000,
+    activities: 24,
+    description: 'Desktop GUI agent traces across diverse applications',
+  },
+  'tau2bench-airline': {
+    name: 'tau2-bench (airline)',
+    shortName: 'tau2-air',
+    venue: 'arXiv 2506.07982',
+    traces: 800,
+    trainSize: 640,
+    testSize: 160,
+    activities: 17,
+    description: 'Customer service agent traces (4 LLMs) for airline booking with 12 APIs',
+  },
+  'tau2bench-retail': {
+    name: 'tau2-bench (retail)',
+    shortName: 'tau2-ret',
+    venue: 'arXiv 2506.07982',
+    traces: 1824,
+    trainSize: 1459,
+    testSize: 365,
+    activities: 18,
+    description: 'Customer service agent traces (4 LLMs) for retail order management with 14 APIs',
+  },
+  'tau2bench-telecom': {
+    name: 'tau2-bench (telecom)',
+    shortName: 'tau2-tel',
+    venue: 'arXiv 2506.07982',
+    traces: 1824,
+    trainSize: 1459,
+    testSize: 365,
+    activities: 4,
+    description: 'Customer service agent traces (4 LLMs) for telecom workflows',
+  },
+}
+
+// ---------- Activity extraction (must match shared.ts exactly) ----------
+
+function extractActivity(role: string, content: string, agentName?: string): string {
+  const actor = agentName || role
+  const c = content.trim()
+  const bracketMatch = c.match(/^\[(\w+)\]/)
+  if (bracketMatch) return `${actor}:${bracketMatch[1].toLowerCase()}`
+  if (c.includes('function_call') || c.includes('tool_call')) {
+    // Match "tool_call:toolname" anywhere in content (loader format)
+    const prefixMatch = c.match(/tool_call:(\w+)/)
+    if (prefixMatch) return `${actor}:tool:${prefixMatch[1]}`
+    // Match "name='toolname'" or "name: toolname" (OpenAI/generic format)
+    const nameMatch = c.match(/name['"=:\s]+(\w+)/)
+    return nameMatch ? `${actor}:tool:${nameMatch[1]}` : `${actor}:tool_call`
+  }
+  return `${actor}:text`
+}
+
+// ---------- FSM replay ----------
+
+type TransitionFn = (state: string, symbol: string) => string | null
+
+function graphToTransitionFn(graph: { transitions: Array<{ source: string; target: string }> }): TransitionFn {
+  const valid = new Set<string>()
+  for (const t of graph.transitions) {
+    valid.add(`${t.source}|${t.target}`)
+  }
+  return (current: string, symbol: string) =>
+    valid.has(`${current}|${symbol}`) ? symbol : null
+}
+
+function replayTrace(
+  transitionFn: TransitionFn,
+  messages: Array<{ role: string; content: string; name?: string }>,
+): { steps: TraceStep[]; stateSequence: string[]; fitness: number; consumed: number; total: number; firstFailIdx: number; stateVisits: Record<string, number> } {
+  let current = 'init'
+  const steps: TraceStep[] = []
+  const stateSequence: string[] = ['init']
+  const stateVisits: Record<string, number> = { init: 1 }
+  let consumed = 0
+  let firstFailIdx = -1
+
+  for (let i = 0; i < messages.length; i++) {
+    const msg = messages[i]
+    const activity = extractActivity(msg.role, msg.content, msg.name)
+    const next = transitionFn(current, activity)
+
+    if (next !== null) {
+      steps.push({ idx: i, role: msg.role, activity, fromState: current, toState: next, consumed: true })
+      stateSequence.push(next)
+      stateVisits[next] = (stateVisits[next] || 0) + 1
+      current = next
+      consumed++
+    } else {
+      steps.push({ idx: i, role: msg.role, activity, fromState: current, toState: null, consumed: false })
+      stateSequence.push(`FAIL:${activity}`)
+      if (firstFailIdx === -1) firstFailIdx = i
+    }
+  }
+
+  return {
+    steps,
+    stateSequence,
+    fitness: messages.length > 0 ? consumed / messages.length : 1,
+    consumed,
+    total: messages.length,
+    firstFailIdx,
+    stateVisits,
+  }
+}
+
+// ---------- Main ----------
+
+function loadJSON(p: string) {
+  return JSON.parse(readFileSync(path.join(ROOT, p), 'utf-8'))
+}
+
+function tryLoadJSON(p: string): Record<string, unknown> | null {
+  try { return loadJSON(p) } catch { return null }
+}
+
+function loadTauBenchRaw(domain: string): Array<{ id: string; messages: Array<{ role: string; content: string; name?: string }>; annotations?: { success?: boolean } }> {
+  const raw: Array<{ task_id: number; reward: number; traj: Array<{ role: string; content: string; tool_calls?: Array<{ function: { name: string } }> }> }> =
+    loadJSON(`data/taubench/${domain}.json`)
+  return raw.map(entry => ({
+    id: `taubench-${domain}-${entry.task_id}`,
+    messages: entry.traj.map(step => {
+      if (step.role === 'assistant' && step.tool_calls && step.tool_calls.length > 0) {
+        return { role: 'assistant', content: `tool_call:${step.tool_calls[0].function.name}` }
+      }
+      if (step.role === 'tool') {
+        const c = step.content || ''
+        return { role: 'tool', content: c.length > 500 ? c.slice(0, 500) : c }
+      }
+      return { role: step.role || 'user', content: step.content || '' }
+    }),
+    annotations: { success: entry.reward === 1.0 },
+  }))
+}
+
+const TAU2_FILES: Record<string, string[]> = {
+  airline: [
+    'data/tau2bench/gpt-4.1-2025-04-14_airline_default_gpt-4.1-2025-04-14_4trials.json',
+    'data/tau2bench/claude-3-7-sonnet-20250219_airline_default_gpt-4.1-2025-04-14_4trials.json',
+    'data/tau2bench/gpt-4.1-mini-2025-04-14_airline_base_gpt-4.1-2025-04-14_4trials.json',
+    'data/tau2bench/o4-mini-2025-04-16_airline_default_gpt-4.1-2025-04-14_4trials.json',
+  ],
+  retail: [
+    'data/tau2bench/gpt-4.1-2025-04-14_retail_default_gpt-4.1-2025-04-14_4trials.json',
+    'data/tau2bench/claude-3-7-sonnet-20250219_retail_default_gpt-4.1-2025-04-14_4trials.json',
+    'data/tau2bench/gpt-4.1-mini-2025-04-14_retail_base_gpt-4.1-2025-04-14_4trials.json',
+    'data/tau2bench/o4-mini-2025-04-16_retail_default_gpt-4.1-2025-04-14_4trials.json',
+  ],
+  telecom: [
+    'data/tau2bench/telecom_gpt41.json',
+    'data/tau2bench/claude-3-7-sonnet-20250219_telecom_default_gpt-4.1-2025-04-14_4trials.json',
+    'data/tau2bench/gpt-4.1-mini-2025-04-14_telecom_base_gpt-4.1-2025-04-14_4trials.json',
+    'data/tau2bench/o4-mini-2025-04-16_telecom-workflow_default_gpt-4.1-2025-04-14_4trials.json',
+  ],
+}
+
+function loadTau2BenchRaw(domain: string): Array<{ id: string; messages: Array<{ role: string; content: string; name?: string }>; annotations?: { success?: boolean } }> {
+  const files = TAU2_FILES[domain] || []
+  const allTraces: Array<{ id: string; messages: Array<{ role: string; content: string; name?: string }>; annotations?: { success?: boolean } }> = []
+  for (const f of files) {
+    try {
+      const data: { simulations: Array<{ task_id: string; messages: Array<{ role: string; content: string; tool_calls?: Array<{ name?: string; function?: { name: string } }> }>; reward_info: { reward: number } }> } = loadJSON(f)
+      const modelTag = f.replace(/.*\//, '').replace(/\.json$/, '').slice(0, 30)
+      for (let idx = 0; idx < data.simulations.length; idx++) {
+        const sim = data.simulations[idx]
+        const messages = sim.messages
+          .filter((m: { role: string }) => m.role !== 'system')
+          .map((step: { role: string; content: string; tool_calls?: Array<{ name?: string; function?: { name: string } }> }) => {
+            if (step.tool_calls && step.tool_calls.length > 0) {
+              const tc = step.tool_calls[0]
+              const toolName = tc.name || tc.function?.name || 'unknown'
+              return { role: 'assistant', content: `tool_call:${toolName}` }
+            }
+            if (step.role === 'tool') {
+              const c = step.content || ''
+              return { role: 'tool', content: c.length > 500 ? c.slice(0, 500) : c }
+            }
+            return { role: step.role || 'user', content: step.content || '' }
+          })
+        allTraces.push({
+          id: `tau2bench-${domain}-${modelTag}-${sim.task_id}-${idx}`,
+          messages,
+          annotations: { success: sim.reward_info.reward === 1.0 },
+        })
+      }
+    } catch { console.log(`  Warning: could not load ${f}`) }
+  }
+  return allTraces
+}
+
+const neuralProbe: Record<string, DatasetBundle['downstream']['neuralProbe']> =
+  tryLoadJSON('experiments/fsm-neural-probe/results.json') || {}
+
+// Paper Table 4 (LLM-judged top-1, gpt-4.1-mini, fsmWorkflow format, FULL validation split).
+// Authoritative for the 8 datasets in the paper; older poc-fsm-memory JSONs used gpt-4o-mini
+// with a different prompt format and are not directly comparable.
+const PAPER_TABLE_4: Record<string, { n: number; awm: number; fsm: number }> = {
+  webarena: { n: 4800, awm: 0.655, fsm: 0.812 },
+  swesmith: { n: 300, awm: 0.747, fsm: 1.000 },
+  sweagent: { n: 1200, awm: 0.677, fsm: 0.705 },
+  'tau2bench-telecom': { n: 1095, awm: 0.285, fsm: 0.456 },
+  'tau2bench-retail': { n: 1095, awm: 0.529, fsm: 0.651 },
+  'tau2bench-airline': { n: 480, awm: 0.565, fsm: 0.573 },
+  atbench: { n: 600, awm: 0.478, fsm: 0.625 },
+  osworld: { n: 1286, awm: 0.550, fsm: 0.707 },
+}
+
+const monitorRoot: Record<string, DatasetBundle['downstream']['monitor']> =
+  tryLoadJSON('experiments/poc-online-monitor/online-monitor-results.json') || {}
+
+const cfRoot: Record<string, DatasetBundle['downstream']['counterfactual']> =
+  tryLoadJSON('experiments/counterfactual/counterfactual-results.json') || {}
+
+// Incremental-convergence runs (6 datasets). The per-dataset evolution-vN folders are
+// LFS stubs for everything except atbench/osworld, so the dashboard convergence tab only
+// saw 2 of 6 — the same 'taubench-*' vs 'tau2bench-*' keying issue. Build the curve from
+// this file (fitnessTrajectory + final state/edge counts) when evolution snapshots are absent.
+const convRateRoot: Record<string, {
+  finalStates: number; finalEdges: number; trainTraces: number
+  fitnessTrajectory: Array<{ pctData: number; fitness: number }>
+}> = tryLoadJSON('experiments/convergence-rate/convergence-results.json') || {}
+
+function convRateCurve(id: string): { curve: DatasetBundle['convergence']['curve']; fitnessAt: number } | null {
+  const c = convRateRoot[id] || convRateRoot[monitorKey(id)]
+  if (!c || !c.fitnessTrajectory?.length) return null
+  const curve = c.fitnessTrajectory.map(p => ({
+    n: Math.round(p.pctData * c.trainTraces),
+    states: c.finalStates,        // per-point counts unavailable; state count converges near-instantly
+    transitions: c.finalEdges,
+    fitness: p.fitness,
+  }))
+  const hit = c.fitnessTrajectory.find(p => p.fitness >= 0.95)
+  return { curve, fitnessAt: hit ? Math.round(hit.pctData * c.trainTraces) : 0 }
+}
+
+// monitor/counterfactual JSONs key tau2-bench suites as 'taubench-*' (legacy
+// single-tau); the dataset registry uses 'tau2bench-*'. Map before lookup so all
+// four evaluated datasets (swesmith, sweagent, retail, airline) resolve, not just two.
+function monitorKey(id: string): string {
+  return id.replace(/^tau2bench-/, 'taubench-')
+}
+
+function loadMonitor(id: string): DatasetBundle['downstream']['monitor'] {
+  return monitorRoot[id] || monitorRoot[monitorKey(id)] || null
+}
+
+function loadCounterfactual(id: string): DatasetBundle['downstream']['counterfactual'] {
+  return cfRoot[id] || cfRoot[monitorKey(id)] || null
+}
+
+function loadCrossModel(id: string): DatasetBundle['downstream']['crossModel'] {
+  const d = tryLoadJSON(`experiments/${id}-cross-model/transfer-matrix.json`)
+  if (!d || typeof d !== 'object') return null
+  // Matrices in the experiment JSON are stored as {labels, values}; extract the 2-D values
+  // (older files may already be a raw number[][]).
+  type Mat = number[][] | { values?: number[][] }
+  const matVals = (m: Mat | undefined): number[][] =>
+    Array.isArray(m) ? m : (m?.values || [])
+  const obj = d as {
+    models?: Array<{ name: string; shortName: string; totalTraces: number; successRate: number }>
+    matrices?: { fitness?: Mat; auroc?: Mat; stateCount?: Mat }
+    summary?: {
+      diagonalAUROC?: { mean: number; std: number }
+      offDiagonalAUROC?: { mean: number; std: number }
+      aurocTransferGap?: number
+    }
+  }
+  if (!obj.models || !obj.matrices || !obj.summary) return null
+  return {
+    models: obj.models.map(m => ({
+      name: m.name, shortName: m.shortName, traces: m.totalTraces, successRate: m.successRate,
+    })),
+    matrices: {
+      fitness: matVals(obj.matrices.fitness),
+      auroc: matVals(obj.matrices.auroc),
+      stateCount: matVals(obj.matrices.stateCount),
+    },
+    summary: {
+      diagonalAUROC: obj.summary.diagonalAUROC || { mean: 0, std: 0 },
+      offDiagonalAUROC: obj.summary.offDiagonalAUROC || { mean: 0, std: 0 },
+      aurocTransferGap: obj.summary.aurocTransferGap || 0,
+    },
+  }
+}
+
+function loadWorkflowMemory(id: string): DatasetBundle['downstream']['workflowMemory'] {
+  const paper = PAPER_TABLE_4[id]
+  if (paper) {
+    // Use paper-authoritative numbers; pull noMemory from the older JSON if available.
+    const json = tryLoadJSON(`experiments/poc-fsm-memory/${id}-results.json`)
+    const noMem = (json && typeof json === 'object'
+      ? ((json as { llm?: { noMemory?: { accuracy: number } } }).llm?.noMemory?.accuracy ?? null)
+      : null)
+    return {
+      n: paper.n,
+      noMemory: { accuracy: noMem ?? 0, correct: noMem != null ? Math.round(noMem * paper.n) : 0 },
+      awm: { accuracy: paper.awm, correct: Math.round(paper.awm * paper.n) },
+      fsm: { accuracy: paper.fsm, correct: Math.round(paper.fsm * paper.n) },
+      fsmGain: paper.fsm - paper.awm,
+    }
+  }
+  return null
+}
+
+function buildDataset(id: string): DatasetBundle {
+  // tau2-bench: the combined 4-model run lives in the UNVERSIONED folder; the versioned
+  // (-v11) folders are stale single-model runs (telecom 5 states vs combined 43). Prefer
+  // the combined run for tau2 so baselines/graph match the paper.
+  const combinedFirst = id.startsWith('tau2bench-')
+
+  // Load baselines: (tau2: unversioned combined first) → v12 → v11 → v8 → v7 → v6 → unversioned
+  const baseline = (combinedFirst ? tryLoadJSON(`experiments/${id}-baselines/baseline-comparison.json`) : null)
+    || tryLoadJSON(`experiments/${id}-baselines-v12/baseline-comparison.json`)
+    || tryLoadJSON(`experiments/${id}-baselines-v11/baseline-comparison.json`)
+    || tryLoadJSON(`experiments/${id}-baselines-v8/baseline-comparison.json`)
+    || tryLoadJSON(`experiments/${id}-baselines-v7/baseline-comparison.json`)
+    || tryLoadJSON(`experiments/${id}-baselines-v6/baseline-comparison.json`)
+    || loadJSON(`experiments/${id}-baselines/baseline-comparison.json`)
+
+  // Load evolution: v9 → v8 → v7 → v6 → v5
+  let evolution: Record<string, unknown>
+  const ev = tryLoadJSON(`experiments/${id}-evolution-v9/evolution-results.json`)
+    || tryLoadJSON(`experiments/${id}-evolution-v8/evolution-results.json`)
+    || tryLoadJSON(`experiments/${id}-evolution-v7/evolution-results.json`)
+    || tryLoadJSON(`experiments/${id}-evolution-v6/evolution-results.json`)
+    || tryLoadJSON(`experiments/${id}-evolution-v5/evolution-results.json`)
+  evolution = ev || {}
+  if (ev) console.log(`  Loaded evolution for ${id}`)
+  else console.log(`  No evolution data for ${id}`)
+
+  // Load downstream: v15 → v14 → v13 → v12 → v11 → v10-fixed → v9 → v8 → v7 → v2 → v6 → v5
+  const downstream: Record<string, unknown> = tryLoadJSON(`experiments/${id}-downstream-v15/downstream-eval.json`)
+    || tryLoadJSON(`experiments/${id}-downstream-v14/downstream-eval.json`)
+    || tryLoadJSON(`experiments/${id}-downstream-v13/downstream-eval.json`)
+    || tryLoadJSON(`experiments/${id}-downstream-v12/downstream-eval.json`)
+    || tryLoadJSON(`experiments/${id}-downstream-v11/downstream-eval.json`)
+    || tryLoadJSON(`experiments/${id}-downstream-v10-fixed/downstream-eval.json`)
+    || tryLoadJSON(`experiments/${id}-downstream-v9/downstream-eval.json`)
+    || tryLoadJSON(`experiments/${id}-downstream-v8/downstream-eval.json`)
+    || tryLoadJSON(`experiments/${id}-downstream-v7/downstream-eval.json`)
+    || tryLoadJSON(`experiments/${id}-downstream-v2/downstream-eval.json`)
+    || tryLoadJSON(`experiments/${id}-downstream-v6/downstream-eval.json`)
+    || tryLoadJSON(`experiments/${id}-downstream-v5/downstream-eval.json`)
+    || {}
+  if (Object.keys(downstream).length > 0) console.log(`  Loaded downstream for ${id}`)
+  else console.log(`  No downstream data for ${id}`)
+
+  // Load graph: (tau2: unversioned combined first) → v12 → v11 → v8 → v7 → v6 → unversioned
+  const graph = (combinedFirst ? tryLoadJSON(`experiments/${id}-baselines/train-graph.json`) : null)
+    || tryLoadJSON(`experiments/${id}-baselines-v12/train-graph.json`)
+    || tryLoadJSON(`experiments/${id}-baselines-v11/train-graph.json`)
+    || tryLoadJSON(`experiments/${id}-baselines-v8/train-graph.json`)
+    || tryLoadJSON(`experiments/${id}-baselines-v7/train-graph.json`)
+    || tryLoadJSON(`experiments/${id}-baselines-v6/train-graph.json`)
+    || loadJSON(`experiments/${id}-baselines/train-graph.json`)
+
+  // Load raw traces for FSM replay
+  type RawTrace = { id: string; messages: Array<{ role: string; content: string; name?: string }>; annotations?: { success?: boolean } }
+  let rawTraces: RawTrace[]
+  if (id === 'taubench-airline') {
+    rawTraces = loadTauBenchRaw('airline')
+  } else if (id === 'taubench-retail') {
+    rawTraces = loadTauBenchRaw('retail')
+  } else if (id.startsWith('tau2bench-')) {
+    const domain = id.replace('tau2bench-', '')
+    rawTraces = loadTau2BenchRaw(domain)
+  } else {
+    rawTraces = loadJSON(`data/${id}/traces.json`)
+  }
+  const traceMap = new Map(rawTraces.map(t => [t.id, t]))
+
+  // For tau2bench: also register traces under the old ID format (without modelTag)
+  // so baselines generated with the old loader still match.
+  // Old format: tau2bench-{domain}-{task_id}-{idx}
+  // New format: tau2bench-{domain}-{modelTag}-{task_id}-{idx}
+  if (id.startsWith('tau2bench-')) {
+    const domain = id.replace('tau2bench-', '')
+    const files = TAU2_FILES[domain] || []
+    for (const f of files) {
+      try {
+        const data: { simulations: Array<{ task_id: string }> } = loadJSON(f)
+        for (let idx = 0; idx < data.simulations.length; idx++) {
+          const sim = data.simulations[idx]
+          const modelTag = f.replace(/.*\//, '').replace(/\.json$/, '').slice(0, 30)
+          const newId = `tau2bench-${domain}-${modelTag}-${sim.task_id}-${idx}`
+          const oldId = `tau2bench-${domain}-${sim.task_id}-${idx}`
+          const trace = traceMap.get(newId)
+          if (trace && !traceMap.has(oldId)) {
+            traceMap.set(oldId, trace)
+          }
+        }
+      } catch { /* skip */ }
+    }
+  }
+
+  console.log(`  Loaded ${rawTraces.length} raw traces for replay (traceMap: ${traceMap.size} keys)`)
+
+  // Build transition function from graph
+  const transitionFn = graphToTransitionFn(graph)
+
+  // Extract baselines
+  const baselines: DatasetBundle['baselines'] = []
+
+  // Our FSM
+  const sg = baseline.stateGraph
+  baselines.push({
+    method: 'stateGraph',
+    label: 'Our FSM',
+    trainFitness: sg.trainFitness,
+    testFitness: sg.testFitness,
+    states: sg.stateCount,
+    transitions: sg.transitionCount,
+    randomAcceptRate: sg.precision?.randomAcceptanceRate ?? null,
+    permutedAcceptRate: sg.precision?.permutedAcceptanceRate ?? null,
+    pmPrecision: null,
+    category: 'ours',
+    note: sg.note,
+  })
+
+  // RPNI
+  const rpni = baseline.rpni
+  baselines.push({
+    method: 'rpni',
+    label: 'RPNI',
+    trainFitness: rpni.trainFitness,
+    testFitness: rpni.testFitness,
+    states: rpni.stateCount,
+    transitions: rpni.transitionCount,
+    randomAcceptRate: rpni.precision?.randomAcceptanceRate ?? null,
+    permutedAcceptRate: rpni.precision?.permutedAcceptanceRate ?? null,
+    pmPrecision: null,
+    category: 'automata',
+    note: rpni.note,
+  })
+
+  // PM4Py miners
+  const pm4py = baseline.pm4py?.miners || {}
+  for (const [name, m] of Object.entries(pm4py) as [string, Record<string, unknown>][]) {
+    if (!m.success) continue
+    const label = name.charAt(0).toUpperCase() + name.slice(1) + ' Miner'
+    baselines.push({
+      method: name,
+      label,
+      trainFitness: m.train_fitness as number,
+      testFitness: m.test_fitness as number,
+      states: null,
+      transitions: (m.transitions as number) || null,
+      randomAcceptRate: null,
+      permutedAcceptRate: null,
+      pmPrecision: (m.test_precision as number) ?? null,
+      category: 'process-mining',
+      note: `${m.places || '?'}p, ${m.transitions || '?'}t`,
+    })
+  }
+
+  // AWM
+  if (baseline.awm) {
+    const awm = baseline.awm
+    baselines.push({
+      method: 'awm',
+      label: 'AWM',
+      trainFitness: awm.trainCoverage || 0,
+      testFitness: awm.testAvgMatchScore || 0,
+      states: null,
+      transitions: null,
+      randomAcceptRate: null,
+      permutedAcceptRate: null,
+      pmPrecision: null,
+      category: 'workflow',
+      note: `${awm.count} workflows (success-only)`,
+    })
+  }
+
+  if (baseline.awm_all) {
+    const awm = baseline.awm_all
+    baselines.push({
+      method: 'awm_all',
+      label: 'AWM-all',
+      trainFitness: awm.trainCoverage || 0,
+      testFitness: awm.testAvgMatchScore || 0,
+      states: null,
+      transitions: null,
+      randomAcceptRate: null,
+      permutedAcceptRate: null,
+      pmPrecision: null,
+      category: 'workflow',
+      note: `${awm.count} workflows (all traces)`,
+    })
+  }
+
+  // EDSM
+  if (baseline.edsm && (baseline.edsm as Record<string, unknown>).success) {
+    const edsm = baseline.edsm as Record<string, unknown>
+    baselines.push({
+      method: 'edsm',
+      label: 'EDSM',
+      trainFitness: (edsm.train_fitness as number) || 0,
+      testFitness: (edsm.test_fitness as number) || 0,
+      states: (edsm.state_count as number) || null,
+      transitions: (edsm.transition_count as number) || null,
+      randomAcceptRate: null,
+      permutedAcceptRate: null,
+      pmPrecision: null,
+      category: 'automata',
+      note: `EDSM (AALpy): ${edsm.state_count}S, ${edsm.alphabet_size || '?'} alphabet`,
+    })
+  }
+
+  // Evolution curve
+  const snapshots = evolution.snapshots || evolution.curve || []
+  let curve = snapshots.map((p: Record<string, number>) => ({
+    n: p.traceCount,
+    states: p.states || p.stateCount,
+    transitions: p.transitions || p.transitionCount,
+    fitness: p.testFitness || p.fitness,
+  }))
+  const conv = evolution.convergence || {}
+  // Fall back to the incremental-convergence-rate run when the evolution file is a stub.
+  if (curve.length === 0) {
+    const cr = convRateCurve(id)
+    if (cr) {
+      curve = cr.curve
+      conv.fitnessConvergenceAt = conv.fitnessConvergenceAt || cr.fitnessAt
+      console.log(`  Convergence curve from convergence-rate run for ${id}`)
+    }
+  }
+
+  // Per-trace data with FSM traversal
+  const trainIds: string[] = baseline.config?.trainIds || []
+  const testIds: string[] = baseline.config?.testIds || []
+  const perTrace: Record<string, { success: boolean; fullFitness: number; successFitness: number }> = {}
+  for (const t of ((downstream as any).failurePrediction?.perTrace || [])) {
+    perTrace[t.id] = { success: t.success, fullFitness: t.fullFitness, successFitness: t.successFitness }
+  }
+
+  const traces: TraceDetail[] = []
+  let replayCount = 0
+
+  function buildTraceDetail(tid: string, split: 'train' | 'test'): TraceDetail {
+    const pt = perTrace[tid]
+    const raw = traceMap.get(tid)
+
+    if (raw) {
+      const replay = replayTrace(transitionFn, raw.messages)
+      replayCount++
+      return {
+        id: tid,
+        split,
+        success: pt?.success ?? raw.annotations?.success ?? null,
+        fullFitness: pt?.fullFitness ?? null,
+        successFitness: pt?.successFitness ?? null,
+        steps: replay.steps,
+        stateSequence: replay.stateSequence,
+        fitness: replay.fitness,
+        consumed: replay.consumed,
+        total: replay.total,
+        firstFailIdx: replay.firstFailIdx,
+        stateVisits: replay.stateVisits,
+      }
+    }
+
+    // Fallback: no raw trace data
+    return {
+      id: tid,
+      split,
+      success: pt?.success ?? null,
+      fullFitness: pt?.fullFitness ?? null,
+      successFitness: pt?.successFitness ?? null,
+      steps: [],
+      stateSequence: [],
+      fitness: 0,
+      consumed: 0,
+      total: 0,
+      firstFailIdx: -1,
+      stateVisits: {},
+    }
+  }
+
+  for (const tid of trainIds) traces.push(buildTraceDetail(tid, 'train'))
+  for (const tid of testIds) traces.push(buildTraceDetail(tid, 'test'))
+  console.log(`  Replayed ${replayCount}/${traces.length} traces through FSM`)
+
+  // Load multi-seed data
+  let multiseed: DatasetBundle['multiseed'] = null
+  try {
+    const ms = loadJSON(`experiments/${id}-multiseed/multiseed-results.json`)
+    multiseed = {
+      numSeeds: ms.config?.numSeeds || 5,
+      ourFSM: ms.aggregated?.ourFSM || { testFitness: { mean: 0, std: 0 }, states: { mean: 0, std: 0 } },
+      rpni: ms.aggregated?.rpni || { testFitness: { mean: 0, std: 0 }, states: { mean: 0, std: 0 } },
+      awm: ms.aggregated?.awm || { testFitness: { mean: 0, std: 0 } },
+    }
+    console.log(`  Loaded multi-seed (${multiseed.numSeeds} seeds)`)
+  } catch { console.log(`  No multi-seed data for ${id}`) }
+
+  // Build full downstream
+  const ds = downstream as Record<string, any>
+  const fp = ds.fitnessProfile || null
+  const bp = ds.behavioralProfiling || null
+  const sa = ds.structuralAnalysis || null
+  const df = ds.differentialFSM?.skipped ? null : (ds.differentialFSM || null)
+  // Failure prediction is a labeled task; the 3 unlabeled datasets have no trustworthy
+  // success labels (gui-odyssey yields a degenerate AUROC 1.000), so null them out to
+  // match the paper's 9-labeled-dataset failure-prediction set.
+  const UNLABELED = new Set(['gui-odyssey', 'mind2web', 'whoandwhen'])
+  const pred = (UNLABELED.has(id) || ds.failurePrediction?.skipped) ? null : (ds.failurePrediction || null)
+  const ml = ds.mistakeLocalization || null
+
+  return {
+    id,
+    meta: META[id],
+    baselines,
+    traces,
+    convergence: {
+      stateConvergenceAt: conv.stateConvergenceAt || 0,
+      transitionConvergenceAt: conv.transitionConvergenceAt || 0,
+      fitnessConvergenceAt: conv.fitnessConvergenceAt || 0,
+      curve,
+    },
+    downstream: {
+      fitnessProfile: fp ? {
+        mean: fp.mean, std: fp.std, min: fp.min, max: fp.max,
+        anomalyCount: fp.anomalyCount, anomalies: fp.anomalies?.map((a: any) => a.id || a) || [],
+        histogram: fp.histogram || [],
+      } : null,
+      behavioralProfiling: bp ? {
+        stateVisitDistribution: bp.stateVisitDistribution || [],
+        transitionFrequency: bp.transitionFrequency || [],
+        deadTransitions: bp.deadTransitions || [],
+        transitionCoverage: bp.transitionCoverage ?? 1,
+        avgUniqueStatesPerTrace: bp.avgUniqueStatesPerTrace ?? 0,
+      } : null,
+      structuralAnalysis: sa ? {
+        density: sa.density,
+        hubs: sa.hubs || [],
+        sinks: sa.sinks || [],
+        sources: sa.sources || [],
+        selfLoops: sa.selfLoops || [],
+        nonTrivialSCCs: sa.nonTrivialSCCs || [],
+      } : null,
+      differentialFSM: df ? {
+        successOnlyTransitions: df.successOnlyTransitions || [],
+        failureOnlyTransitions: df.failureOnlyTransitions || [],
+        sharedTransitions: typeof df.sharedTransitions === 'number'
+          ? [] : (df.sharedTransitions || []),
+      } : null,
+      failurePrediction: pred,
+      mistakeLocalization: ml,
+      neuralProbe: neuralProbe[id] || null,
+      workflowMemory: loadWorkflowMemory(id),
+      crossModel: loadCrossModel(id),
+      monitor: loadMonitor(id),
+      counterfactual: loadCounterfactual(id),
+    },
+    multiseed,
+    graph: {
+      states: (graph.states || []).map((s: Record<string, string>) => ({ id: s.id })),
+      transitions: (graph.transitions || []).map((t: Record<string, string>) => ({
+        source: t.source,
+        target: t.target,
+        subject: t.subject || '',
+      })),
+    },
+  }
+}
+
+// Cap heaviest datasets to keep each shard under 22 MB
+// (Cloudflare Pages / Netlify hard limit is 25 MB per static file).
+// Traces are sampled deterministically from the full set, preserving train/test split balance.
+const SHARD_TRACE_CAP: Record<string, number> = {
+  agentnet: 3500,
+}
+
+function capTraces(d: DatasetBundle): DatasetBundle {
+  const cap = SHARD_TRACE_CAP[d.id]
+  if (!cap || d.traces.length <= cap) return d
+  const train = d.traces.filter(t => t.split === 'train')
+  const test = d.traces.filter(t => t.split === 'test')
+  const ratio = train.length / (train.length + test.length)
+  const trainKeep = Math.round(cap * ratio)
+  const testKeep = cap - trainKeep
+  // Deterministic: keep the first N of each split (already shuffled by trainTestSplit seed).
+  const truncated = [...train.slice(0, trainKeep), ...test.slice(0, testKeep)]
+  return { ...d, traces: truncated }
+}
+
+function main() {
+  const data = DATASETS.map(buildDataset).map(capTraces)
+  const pub = path.join(__dirname, '../public')
+  const shardDir = path.join(pub, 'datasets')
+  mkdirSync(pub, { recursive: true })
+  mkdirSync(shardDir, { recursive: true })
+
+  // Per-dataset shards (lets deploy hosts with ≤25MB-per-file limits accept the build).
+  for (const d of data) {
+    writeFileSync(path.join(shardDir, `${d.id}.json`), JSON.stringify(d))
+  }
+
+  // Slim index for the landing/list views (everything except per-trace replay details).
+  const index = data.map(d => ({
+    id: d.id, meta: d.meta, baselines: d.baselines,
+    convergence: d.convergence, multiseed: d.multiseed, graph: d.graph,
+    downstream: {
+      ...d.downstream,
+      // Drop the largest passthrough blobs from the index to keep it < ~2MB.
+      failurePrediction: d.downstream.failurePrediction
+        ? { ...d.downstream.failurePrediction, perTrace: undefined }
+        : null,
+      mistakeLocalization: null,
+    },
+    traceCount: d.traces.length,
+  }))
+  writeFileSync(path.join(pub, 'index.json'), JSON.stringify(index))
+
+  // Legacy monolithic file (kept for back-compat with older App.tsx).
+  writeFileSync(path.join(pub, 'data.json'), JSON.stringify(data))
+
+  console.log(`\nBuilt data.json + index.json + ${data.length} per-dataset shards`)
+  for (const d of data) {
+    const withSteps = d.traces.filter(t => t.steps.length > 0).length
+    console.log(`  ${d.meta.name}: ${d.baselines.length} baselines, ${withSteps}/${d.traces.length} traces with FSM replay`)
+  }
+}
+
+main()

src/LandingView.tsx

@@ -0,0 +1,940 @@
+/**
+ * Landing page: Turing machine tape feeds into evolving FSM graph.
+ * Receipt-like tape feeds from top-left into the graph that grows in the center.
+ * All traces concatenated — drag the tape to scrub, or play to auto-advance through all traces.
+ */
+import { useRef, useMemo, useState, useEffect, useCallback } from 'react'
+
+// ---------- Types ----------
+
+interface GraphState { id: string }
+interface GraphTransition { source: string; target: string; subject: string }
+interface TraceStep {
+  idx: number; role: string; activity: string
+  fromState: string; toState: string | null; consumed: boolean
+}
+interface Trace {
+  id: string; steps: TraceStep[]; success: boolean | null
+  fitness: number; total: number
+}
+interface Dataset {
+  id: string
+  meta: { name: string; shortName: string; traces: number; activities: number; description: string }
+  graph: { states: GraphState[]; transitions: GraphTransition[] }
+  traces: Trace[]
+  convergence: { curve: Array<{ n: number; states: number; transitions: number; fitness: number }> }
+}
+
+// ---------- Palette ----------
+
+const RUST = '#c4553a'
+const SLATE = '#3d5a80'
+const OCHRE = '#c49a3a'
+const PAPER = '#f5f0e8'
+const INK = '#1a1714'
+const INK3 = '#8a8478'
+const INK4 = '#b5afa5'
+
+// ---------- Force layout ----------
+
+function computeLayout(
+  states: GraphState[], transitions: GraphTransition[], w = 400, h = 400
+): Record<string, { x: number; y: number }> {
+  const n = states.length
+  if (n === 0) return {}
+  const cx = w / 2, cy = h / 2
+  const pos: Record<string, { x: number; y: number }> = {}
+  const vel: Record<string, { x: number; y: number }> = {}
+  const initIdx = states.findIndex(s => s.id === 'init')
+  const r0 = Math.min(140, n * 18)
+  states.forEach((s, i) => {
+    const idx = initIdx >= 0 ? (i - initIdx + n) % n : i
+    const angle = (idx / n) * 2 * Math.PI - Math.PI / 2
+    pos[s.id] = { x: cx + r0 * Math.cos(angle), y: cy + r0 * Math.sin(angle) }
+    vel[s.id] = { x: 0, y: 0 }
+  })
+  const adj = new Map<string, Set<string>>()
+  for (const s of states) adj.set(s.id, new Set())
+  for (const t of transitions) {
+    if (t.source !== t.target) {
+      adj.get(t.source)?.add(t.target)
+      adj.get(t.target)?.add(t.source)
+    }
+  }
+  for (let iter = 0; iter < 200; iter++) {
+    const temp = 1 - iter / 200
+    for (const a of states) {
+      let fx = 0, fy = 0
+      for (const b of states) {
+        if (a.id === b.id) continue
+        const dx = pos[a.id].x - pos[b.id].x, dy = pos[a.id].y - pos[b.id].y
+        const d2 = dx * dx + dy * dy + 1, f = 6000 / d2
+        fx += f * dx / Math.sqrt(d2); fy += f * dy / Math.sqrt(d2)
+      }
+      const neighbors = adj.get(a.id)
+      if (neighbors) for (const bId of neighbors) {
+        const dx = pos[bId].x - pos[a.id].x, dy = pos[bId].y - pos[a.id].y
+        const d = Math.sqrt(dx * dx + dy * dy), f = 0.008 * (d - 80)
+        fx += f * dx / (d + 0.1); fy += f * dy / (d + 0.1)
+      }
+      fx += (cx - pos[a.id].x) * 0.002; fy += (cy - pos[a.id].y) * 0.002
+      vel[a.id].x = (vel[a.id].x + fx) * 0.85 * temp
+      vel[a.id].y = (vel[a.id].y + fy) * 0.85 * temp
+    }
+    for (const s of states) {
+      pos[s.id].x = Math.max(40, Math.min(w - 40, pos[s.id].x + vel[s.id].x))
+      pos[s.id].y = Math.max(40, Math.min(h - 40, pos[s.id].y + vel[s.id].y))
+    }
+  }
+  return pos
+}
+
+// ---------- Concatenated step with trace boundary info ----------
+
+interface FlatStep {
+  activity: string
+  consumed: boolean
+  fromState: string
+  toState: string | null
+  traceIdx: number
+  traceId: string
+  stepInTrace: number
+  isTraceStart: boolean
+}
+
+function flattenTraces(traces: Trace[]): FlatStep[] {
+  const out: FlatStep[] = []
+  const subset = traces.filter(t => t.steps.length > 3)
+  for (let ti = 0; ti < subset.length; ti++) {
+    const trace = subset[ti]
+    for (let si = 0; si < trace.steps.length; si++) {
+      const s = trace.steps[si]
+      out.push({
+        activity: s.activity,
+        consumed: s.consumed,
+        fromState: s.fromState,
+        toState: s.toState,
+        traceIdx: ti,
+        traceId: trace.id,
+        stepInTrace: si,
+        isTraceStart: si === 0,
+      })
+    }
+  }
+  return out
+}
+
+// ---------- Vertical Receipt Tape with drag ----------
+
+const CELL_H = 28
+const CELL_W = 160
+
+const TRACE_HEADER_H = 18
+
+/** Precompute Y offsets for all steps.
+ *  offsets[i] = Y of the CELL top (after any trace header).
+ *  headerBefore[i] = extra header height before this cell.
+ */
+function buildStepOffsets(steps: FlatStep[]): { cellTop: number[]; totalH: number } {
+  const cellTop = new Array(steps.length + 1)
+  let y = 0
+  for (let i = 0; i < steps.length; i++) {
+    if (steps[i].isTraceStart) y += TRACE_HEADER_H
+    cellTop[i] = y // Y of the cell itself, after header
+    y += CELL_H
+  }
+  cellTop[steps.length] = y
+  return { cellTop, totalH: y }
+}
+
+/** Y of everything above step i (headers + cells), for virtualization top-pad */
+function blockTop(steps: FlatStep[], cellTop: number[], i: number): number {
+  if (i <= 0) return 0
+  // blockTop = cellTop of step i, minus header if step i has one
+  return steps[i]?.isTraceStart ? cellTop[i] - TRACE_HEADER_H : cellTop[i]
+}
+
+function ReceiptTape({ steps, readHead, onScrub }: {
+  steps: FlatStep[]
+  readHead: number
+  onScrub: (newHead: number) => void
+}) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const dragging = useRef(false)
+  const dragStartY = useRef(0)
+  const dragStartHead = useRef(0)
+  const didDrag = useRef(false)
+
+  // Use 100% of container height via ref
+  const [containerH, setContainerH] = useState(600)
+  useEffect(() => {
+    const el = containerRef.current?.parentElement
+    if (el) {
+      const ro = new ResizeObserver(entries => {
+        for (const entry of entries) setContainerH(entry.contentRect.height)
+      })
+      ro.observe(el)
+      setContainerH(el.clientHeight)
+      return () => ro.disconnect()
+    }
+  }, [])
+
+  const headOffset = Math.round(containerH * 0.4)
+
+  // Precompute offsets O(n) once, then O(1) lookup
+  const { cellTop: stepOffsets, totalH: tapeTotalH } = useMemo(() => buildStepOffsets(steps), [steps])
+  const scrollY = (stepOffsets[readHead] ?? 0) - headOffset
+
+  const handlePointerDown = useCallback((e: React.PointerEvent) => {
+    dragging.current = true
+    didDrag.current = false
+    dragStartY.current = e.clientY
+    dragStartHead.current = readHead
+    ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
+  }, [readHead])
+
+  const handlePointerMove = useCallback((e: React.PointerEvent) => {
+    if (!dragging.current) return
+    const dy = dragStartY.current - e.clientY
+    if (Math.abs(dy) > 3) didDrag.current = true
+    const delta = Math.round(dy / CELL_H)
+    const newHead = Math.max(0, Math.min(steps.length, dragStartHead.current + delta))
+    onScrub(newHead)
+  }, [steps.length, onScrub])
+
+  const handlePointerUp = useCallback(() => {
+    dragging.current = false
+  }, [])
+
+  const handleWheel = useCallback((e: React.WheelEvent) => {
+    e.preventDefault()
+    const delta = Math.sign(e.deltaY)
+    onScrub(Math.max(0, Math.min(steps.length, readHead + delta)))
+  }, [readHead, steps.length, onScrub])
+
+  // Click on a cell to jump
+  const handleCellClick = useCallback((i: number) => {
+    if (didDrag.current) return // was a drag, not a click
+    onScrub(i)
+  }, [onScrub])
+
+  return (
+    <div
+      ref={containerRef}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      onPointerCancel={handlePointerUp}
+      onWheel={handleWheel}
+      style={{
+        width: CELL_W + 16,
+        height: '100%',
+        overflow: 'hidden',
+        position: 'relative',
+        borderRight: `2px solid ${INK}20`,
+        cursor: 'grab',
+        userSelect: 'none',
+        touchAction: 'none',
+      }}
+    >
+      {/* Tape strip — virtualized: only render visible steps */}
+      {(() => {
+        // Find visible range
+        const viewTop = scrollY - 100 // buffer
+        const viewBot = scrollY + containerH + 100
+        let startIdx = 0, endIdx = steps.length
+        // Binary search for start
+        let lo = 0, hi = steps.length
+        while (lo < hi) {
+          const mid = (lo + hi) >> 1
+          if (stepOffsets[mid] + CELL_H + TRACE_HEADER_H < viewTop) lo = mid + 1
+          else hi = mid
+        }
+        startIdx = Math.max(0, lo - 1)
+        lo = startIdx; hi = steps.length
+        while (lo < hi) {
+          const mid = (lo + hi) >> 1
+          if (stepOffsets[mid] > viewBot) hi = mid
+          else lo = mid + 1
+        }
+        endIdx = Math.min(steps.length, lo + 1)
+
+        const topPad = blockTop(steps, stepOffsets, startIdx)
+        const totalH = tapeTotalH
+
+        return (
+          <div style={{
+            position: 'absolute',
+            left: 8,
+            top: 0,
+            width: CELL_W,
+            height: totalH,
+            transform: `translateY(${-scrollY}px)`,
+          }}>
+            <div style={{ height: topPad }} />
+            {steps.slice(startIdx, endIdx).map((step, idx) => {
+              const i = startIdx + idx
+              const isRead = i < readHead
+              const isCurrent = i === readHead
+              const label = step.activity.length > 14 ? step.activity.slice(0, 12) + '..' : step.activity
+
+              return (
+                <div key={i} onClick={() => handleCellClick(i)}>
+                  {step.isTraceStart && (
+                    <div style={{
+                      height: TRACE_HEADER_H,
+                      display: 'flex',
+                      alignItems: 'center',
+                      paddingLeft: 6,
+                      background: isRead ? PAPER : '#f8f5ef',
+                      borderTop: i > 0 ? `1.5px solid ${isRead ? `${RUST}40` : INK4}` : 'none',
+                      opacity: isRead ? 0.5 : 1,
+                    }}>
+                      <span style={{
+                        fontFamily: "'IBM Plex Mono', monospace",
+                        fontSize: 7,
+                        color: isRead ? INK4 : OCHRE,
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.5px',
+                      }}>
+                        trace {step.traceIdx + 1}: {step.traceId.slice(0, 18)}
+                      </span>
+                    </div>
+                  )}
+                  <div style={{
+                    width: CELL_W,
+                    height: CELL_H,
+                    display: 'flex',
+                    alignItems: 'center',
+                    paddingLeft: 10,
+                    borderBottom: `1px solid ${isRead ? '#d5cfc520' : '#d5cfc5'}`,
+                    background: isCurrent ? '#fffcf3' : isRead ? PAPER : '#fffdf9',
+                    opacity: isRead ? Math.max(0.2, 1 - (readHead - i) * 0.04) : 1,
+                    cursor: 'pointer',
+                  }}>
+                    <span style={{
+                      fontFamily: "'IBM Plex Mono', monospace",
+                      fontSize: 8,
+                      color: isCurrent ? RUST : INK4,
+                      width: 20,
+                      textAlign: 'right',
+                      marginRight: 8,
+                      flexShrink: 0,
+                    }}>
+                      {step.stepInTrace + 1}
+                    </span>
+                    <span style={{
+                      fontFamily: "'IBM Plex Mono', monospace",
+                      fontSize: 10,
+                      color: isCurrent ? RUST : isRead ? INK4 : INK3,
+                      fontWeight: isCurrent ? 700 : 400,
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}>
+                      {label}
+                    </span>
+                    {isRead && (
+                      <span style={{
+                        marginLeft: 'auto',
+                        marginRight: 6,
+                        width: 5,
+                        height: 5,
+                        borderRadius: '50%',
+                        background: step.consumed ? RUST : `${SLATE}60`,
+                        flexShrink: 0,
+                      }} />
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )
+      })()}
+
+      {/* Reading head bracket — fixed at headOffset */}
+      <div style={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: headOffset - 1,
+        height: CELL_H + 2,
+        border: `2px solid ${RUST}`,
+        borderRadius: 2,
+        pointerEvents: 'none',
+        zIndex: 2,
+      }} />
+      {/* Arrow to graph */}
+      <div style={{
+        position: 'absolute',
+        right: -12,
+        top: headOffset + CELL_H / 2 - 6,
+        width: 0, height: 0,
+        borderTop: '6px solid transparent',
+        borderBottom: '6px solid transparent',
+        borderLeft: `8px solid ${RUST}`,
+        zIndex: 2,
+      }} />
+
+      {/* Fades */}
+      <div style={{
+        position: 'absolute', left: 0, right: 0, top: 0, height: 40,
+        background: `linear-gradient(180deg, ${PAPER}, transparent)`,
+        pointerEvents: 'none', zIndex: 1,
+      }} />
+      <div style={{
+        position: 'absolute', left: 0, right: 0, bottom: 0, height: 30,
+        background: `linear-gradient(0deg, ${PAPER}, transparent)`,
+        pointerEvents: 'none', zIndex: 1,
+      }} />
+    </div>
+  )
+}
+
+// ---------- Zoomable container ----------
+
+function ZoomableGraph({ children }: { children: React.ReactNode }) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [zoom, setZoom] = useState(1)
+  const [pan, setPan] = useState({ x: 0, y: 0 })
+  const dragging = useRef(false)
+  const lastPos = useRef({ x: 0, y: 0 })
+
+  const handleWheel = useCallback((e: React.WheelEvent) => {
+    e.preventDefault()
+    const delta = e.deltaY > 0 ? 0.9 : 1.1
+    setZoom(z => Math.max(0.3, Math.min(5, z * delta)))
+  }, [])
+
+  const handlePointerDown = useCallback((e: React.PointerEvent) => {
+    dragging.current = true
+    lastPos.current = { x: e.clientX, y: e.clientY }
+    ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
+  }, [])
+
+  const handlePointerMove = useCallback((e: React.PointerEvent) => {
+    if (!dragging.current) return
+    const dx = e.clientX - lastPos.current.x
+    const dy = e.clientY - lastPos.current.y
+    lastPos.current = { x: e.clientX, y: e.clientY }
+    setPan(p => ({ x: p.x + dx, y: p.y + dy }))
+  }, [])
+
+  const handlePointerUp = useCallback(() => {
+    dragging.current = false
+  }, [])
+
+  const handleDoubleClick = useCallback(() => {
+    setZoom(1)
+    setPan({ x: 0, y: 0 })
+  }, [])
+
+  return (
+    <div
+      ref={containerRef}
+      onWheel={handleWheel}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      onPointerCancel={handlePointerUp}
+      onDoubleClick={handleDoubleClick}
+      style={{
+        flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
+        minWidth: 0, overflow: 'hidden', cursor: 'grab', touchAction: 'none',
+      }}
+    >
+      <div style={{
+        transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+        transformOrigin: 'center center',
+      }}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+// ---------- SVG Graph ----------
+
+function GraphView({
+  states, transitions, revealedStates, revealedTransitions, layout, size, currentState, activeEdge, onNodeDrag
+}: {
+  states: GraphState[]
+  transitions: GraphTransition[]
+  revealedStates: Set<string>
+  revealedTransitions: Set<string>
+  layout: Record<string, { x: number; y: number }>
+  size: number
+  currentState: string
+  activeEdge: string | null
+  onNodeDrag?: (id: string, x: number, y: number) => void
+}) {
+  const edgeSet = useMemo(() => {
+    const s = new Set<string>()
+    for (const t of transitions) s.add(`${t.source}|${t.target}`)
+    return s
+  }, [transitions])
+
+  const svgRef = useRef<SVGSVGElement>(null)
+  const dragNode = useRef<string | null>(null)
+
+  const toSVG = useCallback((clientX: number, clientY: number) => {
+    const svg = svgRef.current
+    if (!svg) return { x: 0, y: 0 }
+    const pt = svg.createSVGPoint()
+    pt.x = clientX; pt.y = clientY
+    const ctm = svg.getScreenCTM()
+    if (!ctm) return { x: 0, y: 0 }
+    const svgPt = pt.matrixTransform(ctm.inverse())
+    return { x: svgPt.x, y: svgPt.y }
+  }, [])
+
+  const handlePointerDown = useCallback((e: React.PointerEvent, id: string) => {
+    if (!onNodeDrag) return
+    e.stopPropagation()
+    dragNode.current = id
+    ;(e.target as Element).setPointerCapture(e.pointerId)
+  }, [onNodeDrag])
+
+  const handlePointerMove = useCallback((e: React.PointerEvent) => {
+    if (!dragNode.current || !onNodeDrag) return
+    const { x, y } = toSVG(e.clientX, e.clientY)
+    onNodeDrag(dragNode.current, x, y)
+  }, [onNodeDrag, toSVG])
+
+  const handlePointerUp = useCallback(() => {
+    dragNode.current = null
+  }, [])
+
+  return (
+    <svg ref={svgRef} viewBox="-20 -20 440 440" width={size} height={size} style={{ overflow: 'visible' }}
+      onPointerMove={handlePointerMove} onPointerUp={handlePointerUp} onPointerCancel={handlePointerUp}>
+      <defs>
+        <marker id="la" viewBox="0 0 10 7" refX="0" refY="3.5" markerWidth="10" markerHeight="7" orient="auto" markerUnits="userSpaceOnUse">
+          <path d="M0,0 L10,3.5 L0,7" fill={INK4} />
+        </marker>
+        <marker id="la-r" viewBox="0 0 10 7" refX="0" refY="3.5" markerWidth="10" markerHeight="7" orient="auto" markerUnits="userSpaceOnUse">
+          <path d="M0,0 L10,3.5 L0,7" fill={RUST} />
+        </marker>
+        <filter id="glow" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="3" result="b" /><feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge></filter>
+      </defs>
+
+      {transitions.map((t, i) => {
+        const key = `${t.source}|${t.target}`
+        if (!revealedTransitions.has(key)) return null
+        const from = layout[t.source], to = layout[t.target]
+        if (!from || !to) return null
+        const isNew = revealedTransitions.has(`new:${key}`)
+        const isActive = key === activeEdge
+        const stroke = isActive || isNew ? RUST : INK4
+        const sw = isActive ? 3 : isNew ? 2 : 1
+        const op = isActive ? 1 : isNew ? 0.8 : 0.4
+        const marker = isActive || isNew ? 'url(#la-r)' : 'url(#la)'
+
+        const al = 10 // arrow length (userSpaceOnUse)
+
+        if (t.source === t.target) {
+          const nr = 16, loopR = 35
+          const cx1 = from.x - loopR, cy1 = from.y - loopR * 1.5
+          const cx2 = from.x + loopR, cy2 = from.y - loopR * 1.5
+          // Start handle: angle from center to first control point
+          const sa = Math.atan2(cy1 - from.y, cx1 - from.x)
+          const sx = from.x + nr * Math.cos(sa), sy = from.y + nr * Math.sin(sa)
+          // End handle: angle from center to second control point, pull back by al
+          const ea = Math.atan2(cy2 - from.y, cx2 - from.x)
+          const epx = from.x + nr * Math.cos(ea), epy = from.y + nr * Math.sin(ea)
+          const tdx = epx - cx2, tdy = epy - cy2, td = Math.sqrt(tdx * tdx + tdy * tdy)
+          const ex = epx - (tdx / td) * al, ey = epy - (tdy / td) * al
+          return <path key={i} d={`M${sx},${sy} C${cx1},${cy1} ${cx2},${cy2} ${ex},${ey}`}
+            fill="none" stroke={stroke} strokeWidth={sw} strokeOpacity={op} strokeLinecap="round" markerEnd={marker} />
+        }
+        const dx = to.x - from.x, dy = to.y - from.y, dist = Math.sqrt(dx * dx + dy * dy)
+        const nx = dx / dist, ny = dy / dist, nr = 16
+        if (edgeSet.has(`${t.target}|${t.source}`)) {
+          const c = 20
+          const mx = (from.x + to.x) / 2 - ny * c, my = (from.y + to.y) / 2 + nx * c
+          const sa = Math.atan2(my - from.y, mx - from.x)
+          const ea = Math.atan2(my - to.y, mx - to.x)
+          const sx = from.x + nr * Math.cos(sa), sy = from.y + nr * Math.sin(sa)
+          const epx = to.x + nr * Math.cos(ea), epy = to.y + nr * Math.sin(ea)
+          const tdx = epx - mx, tdy = epy - my, td = Math.sqrt(tdx * tdx + tdy * tdy)
+          const ex = epx - (tdx / td) * al, ey = epy - (tdy / td) * al
+          return <path key={i} d={`M${sx},${sy} Q${mx},${my} ${ex},${ey}`}
+            fill="none" stroke={stroke} strokeWidth={sw} strokeOpacity={op} strokeLinecap="round" markerEnd={marker} />
+        }
+        return <line key={i} x1={from.x + nx * nr} y1={from.y + ny * nr} x2={to.x - nx * (nr + al)} y2={to.y - ny * (nr + al)}
+          stroke={stroke} strokeWidth={sw} strokeOpacity={op} strokeLinecap="round" markerEnd={marker} />
+      })}
+
+      {states.map((s) => {
+        if (!revealedStates.has(s.id)) return null
+        const pos = layout[s.id]
+        if (!pos) return null
+        const isInit = s.id === 'init'
+        const isNew = revealedStates.has(`new:${s.id}`)
+        const isCurrent = s.id === currentState
+        const r = isInit ? 16 : 14
+        const label = s.id.length > 14 ? s.id.slice(0, 12) + '..' : s.id
+        return (
+          <g key={s.id} filter={isCurrent && !isInit ? 'url(#glow)' : undefined}
+            style={{ cursor: onNodeDrag ? 'grab' : undefined }}
+            onPointerDown={onNodeDrag ? (e) => handlePointerDown(e, s.id) : undefined}>
+            <circle cx={pos.x} cy={pos.y} r={r}
+              fill={isCurrent ? `${RUST}30` : isNew ? `${RUST}18` : '#fffdf9'}
+              stroke={isCurrent ? RUST : isNew ? RUST : isInit ? RUST : INK4}
+              strokeWidth={isCurrent ? 3 : isNew ? 2.5 : isInit ? 2.5 : 1.5} />
+            {isInit && <circle cx={pos.x} cy={pos.y} r={r - 4} fill="none" stroke={RUST} strokeWidth={1} />}
+            <text x={pos.x} y={pos.y + r + 13} textAnchor="middle"
+              fill={isCurrent ? RUST : isNew ? RUST : INK3} fontSize="10" fontFamily="IBM Plex Mono, monospace"
+              fontWeight={isCurrent || isNew ? 700 : 400}>{label}</text>
+          </g>
+        )
+      })}
+    </svg>
+  )
+}
+
+// ---------- Editable Stat ----------
+
+function EditableStat({ label, value, total, color, onSubmit }: {
+  label: string; value: number; total: number; color: string
+  onSubmit: (v: number) => void
+}) {
+  const [editing, setEditing] = useState(false)
+  const [draft, setDraft] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const startEdit = useCallback(() => {
+    setDraft(String(value))
+    setEditing(true)
+  }, [value])
+
+  useEffect(() => {
+    if (editing) inputRef.current?.select()
+  }, [editing])
+
+  const commit = useCallback(() => {
+    setEditing(false)
+    const n = parseInt(draft, 10)
+    if (!isNaN(n)) onSubmit(n)
+  }, [draft, onSubmit])
+
+  return (
+    <div style={{ textAlign: 'right' }}>
+      <div style={{ fontSize: 8, color: INK4, textTransform: 'uppercase', letterSpacing: '0.8px' }}>{label}</div>
+      {editing ? (
+        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'flex-end', gap: 1 }}>
+          <input ref={inputRef} value={draft} onChange={e => setDraft(e.target.value)}
+            onKeyDown={e => { if (e.key === 'Enter') commit(); if (e.key === 'Escape') setEditing(false) }}
+            onBlur={commit}
+            style={{
+              width: `${Math.max(2, String(total).length)}ch`, fontSize: 14, fontWeight: 500,
+              fontFamily: "'IBM Plex Mono', monospace",
+              color, textAlign: 'right', border: 'none', borderBottom: `2px solid ${RUST}`,
+              background: 'transparent', outline: 'none', padding: 0,
+            }} />
+          <span style={{ fontSize: 10, color: INK4 }}>/{total}</span>
+        </div>
+      ) : (
+        <div onClick={startEdit} style={{
+          fontSize: 14, fontWeight: 500, fontFamily: "'IBM Plex Mono', monospace",
+          color, cursor: 'text', borderBottom: `1px dashed ${INK4}40`, paddingBottom: 1,
+        }}>
+          {value}<span style={{ fontSize: 10, color: INK4 }}>/{total}</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ---------- Main Landing View ----------
+
+export default function LandingView({ ds, datasets, onSelectDataset, onEnterDashboard }: {
+  ds: Dataset; datasets: Dataset[]
+  onSelectDataset: (i: number) => void; onEnterDashboard: () => void
+}) {
+  const [playing, setPlaying] = useState(true)
+  const [speed, setSpeed] = useState(1)
+  const [readHead, setReadHead] = useState(0)
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  // Flatten all traces into one continuous tape
+  const allSteps = useMemo(() => flattenTraces(ds.traces), [ds.traces])
+
+  // Current trace info
+  const currentStep = allSteps[Math.min(readHead, allSteps.length - 1)]
+  const currentTraceIdx = currentStep?.traceIdx ?? 0
+  const totalTraces = useMemo(() => {
+    const last = allSteps[allSteps.length - 1]
+    return last ? last.traceIdx + 1 : 0
+  }, [allSteps])
+
+  const initialLayout = useMemo(() => computeLayout(ds.graph.states, ds.graph.transitions), [ds.graph])
+  const [fullLayout, setFullLayout] = useState(initialLayout)
+  useEffect(() => setFullLayout(initialLayout), [initialLayout])
+
+  const handleNodeDrag = useCallback((id: string, x: number, y: number) => {
+    setFullLayout(prev => ({ ...prev, [id]: { x, y } }))
+  }, [])
+
+  // Animation timer
+  useEffect(() => {
+    if (playing) {
+      const ms = Math.max(30, Math.round(180 / speed))
+      timerRef.current = setInterval(() => {
+        setReadHead(prev => {
+          if (prev >= allSteps.length) {
+            setPlaying(false)
+            return prev
+          }
+          return prev + 1
+        })
+      }, ms)
+    }
+    return () => { if (timerRef.current) clearInterval(timerRef.current) }
+  }, [playing, speed, allSteps.length])
+
+  // Current state: the state the machine is sitting in RIGHT NOW
+  // = fromState of the next step to read (where we are before consuming it)
+  const currentState = useMemo(() => {
+    if (readHead < allSteps.length) return allSteps[readHead].fromState
+    // All steps consumed: return toState of last step
+    const last = allSteps[allSteps.length - 1]
+    return last?.toState || last?.fromState || 'init'
+  }, [readHead, allSteps])
+
+  // Incremental revealed sets — cache forward progress, recompute only on backward jumps
+  const revealCache = useRef<{
+    rs: Set<string>; rt: Set<string>; consumed: number; total: number
+    knownStates: Set<string>; head: number; stepsRef: FlatStep[]
+  } | null>(null)
+
+  const { revealedStates, revealedTransitions, statesCount, transitionsCount, currentFitness, activeEdge } = useMemo(() => {
+    const cap = Math.min(readHead, allSteps.length)
+    let cache = revealCache.current
+
+    // Invalidate cache if dataset changed or scrubbed backward
+    if (!cache || cache.stepsRef !== allSteps || cache.head > cap) {
+      cache = { rs: new Set(['init']), rt: new Set(), consumed: 0, total: 0, knownStates: new Set(), head: 0, stepsRef: allSteps }
+    }
+
+    // Process only new steps since last cached position
+    for (let i = cache.head; i < cap; i++) {
+      const step = allSteps[i]
+      cache.total++
+      cache.rs.add(step.fromState)
+      cache.knownStates.add(step.fromState)
+      if (step.toState) {
+        cache.rs.add(step.toState)
+        cache.rt.add(`${step.fromState}|${step.toState}`)
+        cache.consumed++
+        cache.knownStates.add(step.toState)
+      }
+    }
+    cache.head = cap
+
+    // Clean previous frame's new: markers
+    for (const k of cache.rs) if (k.startsWith('new:')) cache.rs.delete(k)
+    for (const k of cache.rt) if (k.startsWith('new:')) cache.rt.delete(k)
+
+    // Active edge + new markers for current step
+    let lastEdge: string | null = null
+    if (cap > 0) {
+      const lastStep = allSteps[cap - 1]
+      const nextStep = allSteps[cap]
+      const crossingTrace = nextStep && nextStep.isTraceStart
+      if (!crossingTrace && lastStep.toState) {
+        const edgeKey = `${lastStep.fromState}|${lastStep.toState}`
+        lastEdge = edgeKey
+        // Check if this state/edge appeared before this step
+        // (knownStates already has it, but "new" means it was JUST added at this exact step)
+        cache.rt.add(`new:${edgeKey}`)
+      }
+    }
+
+    revealCache.current = cache
+
+    const realStates = [...cache.rs].filter(s => !s.startsWith('new:'))
+    const realTrans = [...cache.rt].filter(s => !s.startsWith('new:'))
+    return {
+      revealedStates: cache.rs, revealedTransitions: cache.rt,
+      statesCount: realStates.length, transitionsCount: realTrans.length,
+      currentFitness: cache.total > 0 ? cache.consumed / cache.total : 1,
+      activeEdge: lastEdge,
+    }
+  }, [readHead, allSteps])
+
+  const onScrub = useCallback((newHead: number) => {
+    setReadHead(newHead)
+  }, [])
+
+  // Arrow key navigation
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.target as HTMLElement).tagName === 'INPUT') return
+      if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+        e.preventDefault()
+        setReadHead(prev => Math.min(prev + 1, allSteps.length))
+      } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+        e.preventDefault()
+        setReadHead(prev => Math.max(prev - 1, 0))
+      } else if (e.key === ' ') {
+        e.preventDefault()
+        setPlaying(p => !p)
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [allSteps.length])
+
+  const advance = useCallback(() => {
+    setReadHead(prev => Math.min(prev + 1, allSteps.length))
+  }, [allSteps.length])
+
+  const reset = useCallback(() => {
+    setPlaying(false)
+    setReadHead(0)
+  }, [])
+
+  useEffect(() => { setReadHead(0); setPlaying(false) }, [ds])
+
+  const graphSize = Math.min(480, typeof window !== 'undefined' ? Math.min(window.innerHeight * 0.65, window.innerWidth * 0.55) : 480)
+
+  return (
+    <div style={{ height: '100vh', display: 'flex', flexDirection: 'column', background: PAPER, overflow: 'hidden' }}>
+      {/* Top bar: title + stats + current step */}
+      <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 16px', borderBottom: `1px solid #d5cfc5`, gap: 8, overflowX: 'auto' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0, flexShrink: 1 }}>
+          <h1 className="serif" style={{ fontSize: 18, lineHeight: 1, letterSpacing: '-0.3px', color: INK, whiteSpace: 'nowrap' }}>
+            Agent State Graph
+          </h1>
+          {readHead > 0 && readHead <= allSteps.length && (
+            <div style={{
+              fontFamily: "'IBM Plex Mono', monospace", fontSize: 10,
+              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+              minWidth: 0, flexShrink: 1,
+            }}>
+              <span style={{ color: allSteps[readHead - 1]?.consumed ? RUST : INK3 }}>
+                {allSteps[readHead - 1]?.activity}
+              </span>
+              <span style={{ color: INK4, margin: '0 4px' }}>{'\u2192'}</span>
+              <span style={{ color: SLATE }}>
+                {allSteps[readHead - 1]?.toState || 'REJECT'}
+              </span>
+            </div>
+          )}
+        </div>
+        <div style={{ display: 'flex', gap: 20, flexShrink: 0 }}>
+          {/* Static stats */}
+          {[
+            ['States', statesCount, ds.graph.states.length, RUST],
+            ['Trans', transitionsCount, ds.graph.transitions.length, SLATE],
+          ].map(([label, val, total, color]) => (
+            <div key={label as string} style={{ textAlign: 'right' }}>
+              <div style={{ fontSize: 8, color: INK4, textTransform: 'uppercase', letterSpacing: '0.8px' }}>{label}</div>
+              <div style={{ fontSize: 14, fontWeight: 500, fontFamily: "'IBM Plex Mono', monospace", color: color as string }}>
+                {val}<span style={{ fontSize: 10, color: INK4 }}>/{total}</span>
+              </div>
+            </div>
+          ))}
+          {/* Editable: Trace */}
+          <EditableStat label="Trace" value={currentTraceIdx + 1} total={totalTraces} color={OCHRE}
+            onSubmit={(v) => {
+              const ti = Math.max(1, Math.min(totalTraces, v)) - 1
+              const idx = allSteps.findIndex(s => s.traceIdx === ti)
+              if (idx >= 0) onScrub(idx)
+            }} />
+          {/* Editable: Steps */}
+          <EditableStat label="Steps" value={readHead} total={allSteps.length} color={INK}
+            onSubmit={(v) => onScrub(Math.max(0, Math.min(allSteps.length, v)))} />
+          {/* Static: Fitness */}
+          <div style={{ textAlign: 'right' }}>
+            <div style={{ fontSize: 8, color: INK4, textTransform: 'uppercase', letterSpacing: '0.8px' }}>Fitness</div>
+            <div style={{ fontSize: 14, fontWeight: 500, fontFamily: "'IBM Plex Mono', monospace", color: INK }}>
+              {currentFitness.toFixed(3)}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Main: tape (full height left) + graph (right) */}
+      <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
+        {/* Tape column — fills full vertical space */}
+        <div style={{ width: CELL_W + 40, flexShrink: 0, height: '100%' }}>
+          <ReceiptTape steps={allSteps} readHead={readHead} onScrub={onScrub} />
+        </div>
+
+        {/* Graph — zoomable/pannable */}
+        <ZoomableGraph>
+          <GraphView
+            states={ds.graph.states} transitions={ds.graph.transitions}
+            revealedStates={revealedStates} revealedTransitions={revealedTransitions}
+            layout={fullLayout} size={graphSize}
+            currentState={currentState} activeEdge={activeEdge}
+            onNodeDrag={handleNodeDrag}
+          />
+        </ZoomableGraph>
+      </div>
+
+      {/* Control bar */}
+      <div style={{ borderTop: `2px solid ${INK}`, flexShrink: 0 }}>
+        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '10px 24px' }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10 }}>
+            {/* Playback */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+              {[
+                { label: playing ? 'Pause' : 'Play', onClick: () => setPlaying(p => !p), accent: playing },
+                { label: 'Step', onClick: advance, accent: false },
+                { label: 'Reset', onClick: reset, accent: false },
+              ].map(({ label, onClick, accent }) => (
+                <button key={label} onClick={onClick} style={{
+                  padding: '4px 12px', fontSize: 10, letterSpacing: '0.5px', textTransform: 'uppercase' as const,
+                  border: `1px solid ${INK4}`, background: 'transparent', cursor: 'pointer',
+                  color: accent ? RUST : INK, fontFamily: 'inherit',
+                }}>{label}</button>
+              ))}
+              <div style={{ display: 'flex', alignItems: 'center', gap: 3, marginLeft: 6 }}>
+                <span style={{ fontSize: 8, color: INK4, textTransform: 'uppercase', letterSpacing: '0.8px' }}>Speed</span>
+                {[1, 2, 4, 8].map(s => (
+                  <button key={s} onClick={() => setSpeed(s)} style={{
+                    padding: '2px 5px', fontSize: 9, fontFamily: "'IBM Plex Mono', monospace",
+                    border: `1px solid ${INK4}`, cursor: 'pointer',
+                    background: speed === s ? INK : 'transparent', color: speed === s ? PAPER : INK,
+                  }}>{s}x</button>
+                ))}
+              </div>
+            </div>
+
+            {/* Dataset + enter */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
+              <div style={{ display: 'flex', border: `1px solid ${INK4}`, overflowX: 'auto', minWidth: 0, flexShrink: 1 }}>
+                {datasets.map((d, i) => (
+                  <button key={d.id} onClick={() => onSelectDataset(i)} style={{
+                    padding: '3px 8px', fontSize: 10, cursor: 'pointer', whiteSpace: 'nowrap', flexShrink: 0,
+                    borderRight: i < datasets.length - 1 ? `1px solid ${INK4}` : 'none',
+                    background: ds.id === d.id ? INK : 'transparent',
+                    color: ds.id === d.id ? PAPER : INK, fontFamily: 'inherit',
+                  }}>{d.meta.shortName}</button>
+                ))}
+              </div>
+              <button onClick={onEnterDashboard} style={{
+                padding: '4px 14px', fontSize: 10, letterSpacing: '0.5px', textTransform: 'uppercase' as const,
+                border: `2px solid ${INK}`, background: 'transparent', cursor: 'pointer',
+                fontWeight: 600, fontFamily: 'inherit', flexShrink: 0,
+              }}>Dashboard {'\u2192'}</button>
+            </div>
+          </div>
+
+          {/* Progress */}
+          <div style={{ marginTop: 6, height: 3, background: '#e8e3db', borderRadius: 2, overflow: 'hidden' }}>
+            <div style={{
+              height: '100%', borderRadius: 2, transition: 'width 120ms',
+              width: `${(readHead / Math.max(allSteps.length, 1)) * 100}%`,
+              background: `linear-gradient(90deg, ${RUST}, ${SLATE})`,
+            }} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/index.css

@@ -0,0 +1,101 @@
+@import "tailwindcss";
+
+@theme {
+  --color-paper: #f5f0e8;
+  --color-paper-warm: #efe9de;
+  --color-ink: #1a1714;
+  --color-ink-2: #4a4540;
+  --color-ink-3: #8a8478;
+  --color-ink-4: #b5afa5;
+  --color-rule: #d5cfc5;
+  --color-rule-light: #e5e0d6;
+  --color-rust: #c4553a;
+  --color-rust-dim: rgba(196, 85, 58, 0.08);
+  --color-slate: #3d5a80;
+  --color-slate-dim: rgba(61, 90, 128, 0.08);
+  --color-ochre: #c49a3a;
+  --color-ochre-dim: rgba(196, 154, 58, 0.08);
+  --color-charcoal: #2d2926;
+  --font-serif: 'Instrument Serif', Georgia, serif;
+  --font-sans: 'DM Sans', system-ui, sans-serif;
+  --font-mono: 'IBM Plex Mono', 'Menlo', monospace;
+}
+
+@layer base {
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  html {
+    background: var(--color-paper);
+    color: var(--color-ink);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: 14px;
+    line-height: 1.65;
+  }
+
+  body {
+    min-height: 100vh;
+    background: var(--color-paper);
+  }
+
+  ::selection {
+    background: var(--color-rust);
+    color: var(--color-paper);
+  }
+
+  ::-webkit-scrollbar { width: 6px; height: 6px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--color-rule); border-radius: 0; }
+}
+
+@layer components {
+  .mono {
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    letter-spacing: -0.03em;
+    font-size: 0.92em;
+  }
+
+  .serif {
+    font-family: var(--font-serif);
+  }
+
+  .ruled {
+    border-bottom: 1px solid var(--color-rule);
+  }
+
+  .ruled-top {
+    border-top: 1px solid var(--color-rule);
+  }
+
+  .thick-rule {
+    border-bottom: 2px solid var(--color-ink);
+  }
+}
+
+@keyframes reveal {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fold-open {
+  from { opacity: 0; max-height: 0; }
+  to { opacity: 1; max-height: 2000px; }
+}
+
+.fold-open {
+  animation: fold-open 0.35s cubic-bezier(0.25, 1, 0.5, 1) both;
+  overflow: hidden;
+}
+
+.anim {
+  animation: reveal 0.4s cubic-bezier(0.25, 1, 0.5, 1) both;
+}
+
+.d1 { animation-delay: 50ms; }
+.d2 { animation-delay: 100ms; }
+.d3 { animation-delay: 150ms; }
+.d4 { animation-delay: 200ms; }
+.d5 { animation-delay: 250ms; }
+.d6 { animation-delay: 300ms; }

src/lib/utils.ts

@@ -0,0 +1,24 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function fmt(n: number, d = 3): string {
+  if (n === 0) return '0'
+  return n.toFixed(d)
+}
+
+export function fmtInt(n: number): string {
+  return n.toLocaleString()
+}
+
+export function pct(n: number): string {
+  return (n * 100).toFixed(1) + '%'
+}
+
+export function compression(ours: number, theirs: number): string {
+  if (theirs <= 0 || ours <= 0) return '--'
+  return Math.round(theirs / ours) + 'x'
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+
+// Base resolution: seongland builds with no env -> served at /article/asg/browser/;
+// the standalone HF Space sets ASG_BASE=/ so it serves at the Space root; dev stays
+// at /. Routing is query-arg based (?tab=…) so only asset URLs depend on the base.
+export default defineConfig(({ command }) => ({
+  base: process.env.ASG_BASE ?? (command === 'build' ? '/article/asg/browser/' : '/'),
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          recharts: ['recharts'],
+        },
+      },
+    },
+  },
+}))