Update HF Space: final architecture diagram, frontend, and README

- Add ReplicaLab_Architecture_Final.svg with full scoring engine,
reward formula, penalties, and 4-dimension breakdown
- Update README to reference final diagram and reflect 100% completion
- Include all latest frontend components (demo flow, training page,
episode results, compare page updates)
- Updated API client, types, and demo data for complete UI

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

README.md

@@ -16,7 +16,7 @@ pinned: false
 
 ReplicaLab tackles this by training an AI Scientist agent to negotiate feasible replication plans under realistic resource constraints. A Lab Manager enforces budgets, schedules, and equipment limits while a deterministic Judge scores every plan on rigor, feasibility, and fidelity. Through reinforcement learning, the Scientist learns to ask better questions, make smarter tradeoffs, and reach agreement faster -- all without sacrificing scientific quality.
 
-The initial domain focus is mathematics and machine learning, with offline finance and trading design as the third scenario family. Physics and biology remain future adapters after the core normalized scenario layer is stable.
+Three scenario families ship today -- mathematics reasoning, ML benchmark replication, and offline finance/trading backtest design -- each with easy, medium, and hard difficulty scaling. Physics and biology remain future adapters after the core normalized scenario layer is stable.
 
 ## Team Ownership
 
@@ -32,7 +32,7 @@ The initial domain focus is mathematics and machine learning, with offline finan
 ## Architecture
 
 <p align="center">
-  <img src="./ReplicaLab_Architecture_v2.svg" alt="ReplicaLab Hybrid Architecture" width="100%"/>
+  <img src="./ReplicaLab_Architecture_Final.svg" alt="ReplicaLab Final System Architecture" width="100%"/>
 </p>
 
 ReplicaLab uses a **hybrid Oracle architecture**:
@@ -174,7 +174,7 @@ RL training improves the Scientist agent’s ability to negotiate effective, fea
 - **Reduced-scale fallback:** `Qwen/Qwen3-4B`
 - **Decision record:** `docs/agt11_scientist_model_selection.md`
 
-### Planned Training Path
+### Training Path
 
 1. Use `notebooks/train_minimal_colab.ipynb` as the sponsor-facing minimal Colab script for the Unsloth / HF TRL requirement
 2. Use the judged notebook `notebooks/train_colab.ipynb` as the full readable driver
@@ -244,7 +244,7 @@ Difficulty scaling should mechanically tighten constraints, remove resources, or
 ```text
 replicalab-ai/
 ├── README.md
-├── ReplicaLab_Architecture_v2.svg
+├── ReplicaLab_Architecture_Final.svg
 ├── pyproject.toml
 ├── openenv.yaml
 ├── replicalab/

docs/changes.md

@@ -81,4 +81,6 @@ Rules:
 | 2026-03-08 | Person B (Ayush) | Frontend episode kickoff UX | Added explicit first-round call-to-action controls to the live episode view after user testing showed the page looked stuck immediately after reset | The reset state loaded the paper and constraints correctly, but both the step controls and protocol-editor submit action could sit below the fold, making the UI appear frozen at round 0 | Added an `Episode ready` banner plus in-panel `Advance First Round` and `Open Protocol Editor` actions, and updated the negotiation placeholder so it no longer says `Start an episode` after an episode is already active | Keep a visible first action near the negotiation panel in future layout changes |
 | 2026-03-08 | Person B (Ayush) | One-click live demo automation | Extended the hero CTA flow so `Replicate a Paper` runs the seeded episode automatically instead of only opening the episode page | The hackathon demo needs a one-click narrative with live agent behavior and judge output; requiring manual reset and step clicks after entering the episode page weakens the demo | The dashboard now links to a seeded demo URL, the episode page auto-starts on demo routes, preserves demo query params in the shareable URL, and enables autoplay so the negotiation proceeds to judged completion with no extra clicks | If this is later generalized beyond the hero CTA, keep manual scenario-card entry as a separate non-demo path |
 | 2026-03-08 | Person B (Ayush) | Frontend backend-availability diagnostics | Added a startup health check and contextual network-error messaging to the replication setup flow after the live demo surfaced a generic `Failed to fetch` banner | The page gave no actionable explanation when the local API server on port `7860` was not running, which made a recoverable environment issue look like an application bug | `Controls.tsx` now checks backend health on load, `frontend/src/lib/api.ts` rewrites fetch-network failures into an explicit uvicorn startup instruction, the frontend was rebuilt, and the local FastAPI server was restarted and verified healthy on `127.0.0.1:7860` | Keep the backend running during demo prep or use the integrated backend-served frontend on `http://127.0.0.1:7860` |
+| 2026-03-08 | Person B (Ayush) | Frontend live demo outcomes and results report | Extended the one-click demo into three seeded story modes with a detailed post-episode report instead of a single autoplay path that stopped at the generic episode view | The hackathon demo needs to show distinct judged outcomes: immediate agreement, multi-round learning opportunity, and failure to reach agreement, all backed by real episode values rather than static mock copy | Added `fast-agreement`, `learning-opportunity`, and `no-agreement` dashboard launches; routed episode autoplay through scripted but backend-valid action sequences; added a results report with live reward charts, terminal score bars, training interpretation, reliability labeling, and tool-install suggestions; rebuilt the frontend and verified all three seeded ML runs against the live backend | If Oracle-backed narrative summaries are added later, keep the deterministic judge verdict and real score traces as the source of truth for the report |
+| 2026-03-08 | Person B (Ayush) | Frontend training-status reporting | Replaced the packaged training teaser with an artifact-backed training page and honest improvement guidance | The demo needs a place to show training logs, real achieved values, and whether more training is still required; the earlier dashboard card implied progress but did not expose the real run outputs | Added a dedicated `/training` route, header navigation, a shared frontend data module sourced from real run summaries, and a new training page with checkpoint charts, compare bars, log highlights, preview-artifact status, and explicit `needs more training` analysis; rebuilt the frontend and reverified backend serving on `/training` | If future runs improve beyond baseline, update the shared training artifact data module first so the dashboard and training page stay consistent |
 

docs/demo_video_script_60s.md

@@ -0,0 +1,13 @@
+# ReplicaLab 60s Demo Script
+
+## Voiceover
+
+ReplicaLab starts from a research paper and turns it into a seeded replication benchmark. The Scientist proposes a protocol, the Lab Manager enforces budget, tools, and scheduling, and a deterministic Judge scores rigor, feasibility, and fidelity. In our first scenario, the agents agree immediately, so the paper looks replicable in this lab. In the second scenario, they negotiate across all six rounds, which creates a rich reinforcement learning signal. In the third, they never resolve the blockers, so the system rejects the paper for the current setup. Because every outcome is scored deterministically, we can train the Scientist with Unsloth and TRL, compare baseline versus trained runs, inspect real logs, and see exactly where more learning is still needed. The training page is intentionally honest: the live run reached positive rewards, but the held-out compare still shows that the trained Scientist has not beaten the deterministic baseline yet.
+
+## Shot List
+
+1. Dashboard hero: introduce ReplicaLab and the paper-to-training loop.
+2. First-round agreement: show a clean acceptance and high replicability score.
+3. Multi-round learning: show six-round negotiation and the learning-opportunity results panel.
+4. No agreement: show the timeout / rejection outcome and low reliability signal.
+5. Training page: show artifact-backed logs, checkpoints, baseline-vs-trained compare, and the explicit note that more training is still required.

docs/kush/notes.md

@@ -17,3 +17,28 @@ Durable deviations belong in `docs/changes.md`.
 - The dashboard `Replicate a Paper` CTA now launches a seeded live demo automatically: reset, first proposal, autoplay, and judged completion all happen without extra clicks.
 - The replication setup card now performs a backend health check up front and surfaces a concrete startup command instead of the opaque browser-level `Failed to fetch` message when the API server is down.
 
+## 2026-03-08 three-outcome live demo
+
+- The live demo now has three seeded story modes on the dashboard: `fast-agreement`, `learning-opportunity`, and `no-agreement`.
+- Each mode runs against the real backend with deterministic episode data and renders a post-episode results report instead of stopping at a generic terminal state.
+- The results report now shows executed rounds, disagreement count, replicability score, paper reliability quality, reward and score charts, training interpretation, and next-tool suggestions.
+- Verified backend-driven outputs for the current seeded ML demo cases:
+  - `fast-agreement` -> round `2`, verdict `accept`, cumulative reward `2.906845`
+  - `learning-opportunity` -> round `6`, verdict `accept`, cumulative reward `4.537097`
+  - `no-agreement` -> round `6`, verdict `timeout`, cumulative reward `0.366529`
+
+## 2026-03-08 training page with real artifacts
+
+- Added a dedicated `/training` page instead of relying on the old packaged dashboard card.
+- The new page is backed by real artifact values from the existing outputs:
+  - local deterministic baseline summary
+  - live ART/OpenEnv scientist checkpoints
+  - seeded hold-out compare summary
+  - scientist and lab-manager preview summaries
+- The training story is now explicit and honest:
+  - the training pipeline works
+  - live reward moved positive by later checkpoints
+  - hold-out compare still shows the trained Scientist underperforming baseline
+  - more training and parser/invalid-action cleanup are still needed
+- Header nav now includes `Training`, dashboard training CTA points there, and the dashboard training teaser uses the same artifact-backed data.
+

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { Routes, Route } from 'react-router-dom';
 import EpisodePage from '@/pages/EpisodePage';
 import DashboardPage from '@/pages/DashboardPage';
 import ComparePage from '@/pages/ComparePage';
+import TrainingPage from '@/pages/TrainingPage';
 import Header from '@/components/Header';
 import { ToastProvider } from '@/components/Toast';
 import Onboarding, { useOnboarding } from '@/components/Onboarding';
@@ -17,6 +18,7 @@ export default function App() {
           <Route path="/" element={<DashboardPage />} />
           <Route path="/episode" element={<EpisodePage />} />
           <Route path="/episode/:episodeId" element={<EpisodePage />} />
+          <Route path="/training" element={<TrainingPage />} />
           <Route path="/compare" element={<ComparePage />} />
         </Routes>
         <Onboarding show={showOnboarding} onDismiss={dismissOnboarding} />

frontend/src/components/EpisodeComparison.tsx

@@ -41,7 +41,7 @@ export default function EpisodeComparison({ className }: { className?: string })
       // Auto-play through all rounds
       while (!state.done) {
         const isLastRound = state.round >= state.max_rounds - 1;
-        const action = isLastRound ? buildAcceptAction() : buildDefaultScientistAction();
+        const action = isLastRound ? buildAcceptAction() : buildDefaultScientistAction(state);
         state = await stepEpisode(state.session_id, action, state);
       }
 

frontend/src/components/EpisodeResultsReport.tsx

@@ -0,0 +1,465 @@
+import type { ReactNode } from 'react';
+import {
+  CheckCircle2,
+  AlertTriangle,
+  XCircle,
+  BrainCircuit,
+  TrendingUp,
+  Wrench,
+  Gauge,
+  FileCheck2,
+} from 'lucide-react';
+import {
+  ResponsiveContainer,
+  LineChart,
+  Line,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  Tooltip,
+  Legend,
+  BarChart,
+  Bar,
+} from 'recharts';
+import type { EpisodeState } from '@/types';
+import { cn, formatReward } from '@/lib/utils';
+
+interface EpisodeResultsReportProps {
+  episode: EpisodeState;
+  className?: string;
+}
+
+type OutcomeProfile = {
+  tone: 'good' | 'learning' | 'reject';
+  title: string;
+  subtitle: string;
+  badge: string;
+  icon: typeof CheckCircle2;
+};
+
+const TOOL_STACK: Record<string, { title: string; packages: string[]; commands: string[] }> = {
+  math_reasoning: {
+    title: 'Suggested proof-and-verification stack',
+    packages: ['SymPy', 'pytest', 'JupyterLab', 'LaTeX tooling'],
+    commands: [
+      'pip install sympy pytest jupyterlab',
+      'Install TeX distribution for reproducible proof write-ups',
+    ],
+  },
+  ml_benchmark: {
+    title: 'Suggested replication toolchain',
+    packages: ['PyTorch', 'torchvision', 'Weights & Biases', 'datasets'],
+    commands: [
+      'pip install torch torchvision wandb datasets',
+      'Install NVIDIA CUDA toolkit / drivers that match the available GPU node',
+    ],
+  },
+  finance_trading: {
+    title: 'Suggested backtest stack',
+    packages: ['pandas', 'numpy', 'vectorbt', 'matplotlib'],
+    commands: [
+      'pip install pandas numpy vectorbt matplotlib',
+      'Add a versioned market-data export before rerunning the benchmark',
+    ],
+  },
+};
+
+function computeConfidencePercent(episode: EpisodeState): number {
+  const scores = episode.scores;
+  if (!scores) {
+    return 0;
+  }
+
+  const weighted =
+    scores.rigor * 0.4 +
+    scores.feasibility * 0.35 +
+    scores.fidelity * 0.25;
+  return Math.round(weighted * 100);
+}
+
+function buildReliabilityLabel(episode: EpisodeState): string {
+  if (episode.judge_audit?.verdict === 'accept' && episode.step_history[0]?.lab_manager_action_type === 'accept') {
+    return 'Good';
+  }
+  if (episode.judge_audit?.verdict === 'accept') {
+    return 'Needs iteration';
+  }
+  return 'Bad';
+}
+
+function buildOutcomeProfile(episode: EpisodeState): OutcomeProfile {
+  const firstRoundAccepted =
+    episode.step_history[0]?.lab_manager_action_type === 'accept' &&
+    episode.judge_audit?.verdict === 'accept';
+  const disagreementRounds = episode.step_history.filter(
+    (trace) => trace.lab_manager_action_type && trace.lab_manager_action_type !== 'accept',
+  ).length;
+
+  if (firstRoundAccepted) {
+    return {
+      tone: 'good',
+      title: 'Completed: First-round agreement',
+      subtitle: 'The paper looks replicable under the current constraints, and the agents converged immediately.',
+      badge: 'Good paper / strong replication candidate',
+      icon: CheckCircle2,
+    };
+  }
+
+  if (episode.judge_audit?.verdict === 'accept') {
+    return {
+      tone: 'learning',
+      title: 'Completed: Multi-round learning opportunity',
+      subtitle: `${disagreementRounds} disagreement round(s) were resolved into a feasible final protocol.`,
+      badge: 'Heavy RL learning opportunity',
+      icon: AlertTriangle,
+    };
+  }
+
+  return {
+    tone: 'reject',
+    title: 'Completed: No agreement reached',
+    subtitle: 'The protocol never became acceptable within the six-round limit, so the paper is rejected for this lab setup.',
+    badge: 'Cannot replicate under current setup',
+    icon: XCircle,
+  };
+}
+
+function aggregateRewardComponents(episode: EpisodeState): Array<{ key: string; value: number }> {
+  const totals = new Map<string, number>();
+  for (const trace of episode.step_history) {
+    for (const [key, value] of Object.entries(trace.step_reward_components)) {
+      totals.set(key, (totals.get(key) ?? 0) + value);
+    }
+  }
+
+  return [...totals.entries()]
+    .map(([key, value]) => ({ key, value: Number(value.toFixed(3)) }))
+    .sort((a, b) => Math.abs(b.value) - Math.abs(a.value));
+}
+
+function buildLearningBullets(episode: EpisodeState): string[] {
+  const firstProtocol = episode.step_history.find((trace) => trace.protocol)?.protocol;
+  const finalProtocol = episode.protocol;
+  const bullets: string[] = [];
+
+  if (firstProtocol && finalProtocol && firstProtocol.sample_size !== finalProtocol.sample_size) {
+    bullets.push(
+      `Sample size moved from ${firstProtocol.sample_size} to ${finalProtocol.sample_size}, showing explicit adaptation to budget or staff feedback.`,
+    );
+  }
+
+  if (firstProtocol && finalProtocol && firstProtocol.controls.length !== finalProtocol.controls.length) {
+    bullets.push(
+      `Controls were narrowed from ${firstProtocol.controls.length} to ${finalProtocol.controls.length}, which reduced lab pressure while preserving the core benchmark check.`,
+    );
+  }
+
+  if (episode.step_history.some((trace) => trace.lab_manager_action_type === 'suggest_alternative')) {
+    bullets.push('The Scientist absorbed grounded Lab Manager alternatives instead of ignoring the resource constraints.');
+  }
+
+  if (episode.step_history.some((trace) => trace.step_reward_components.momentum_bonus)) {
+    bullets.push('Later revisions earned momentum bonuses, meaning the protocol improved rather than stalling.');
+  }
+
+  if (!bullets.length) {
+    bullets.push('The episode converged quickly, so the strongest training value is as a positive exemplar for future rollouts.');
+  }
+
+  return bullets;
+}
+
+function buildImprovementBullets(episode: EpisodeState): string[] {
+  const scores = episode.scores;
+  const verdict = episode.judge_audit?.verdict ?? 'unknown';
+  const suggestions: string[] = [];
+
+  if (!scores) {
+    suggestions.push('Provision more compute, staff, or schedule slack before attempting another replication run.');
+    suggestions.push('Reduce sample size and control scope earlier to avoid spending the full round budget on infeasible plans.');
+    return suggestions;
+  }
+
+  if (scores.rigor < 0.7) {
+    suggestions.push('Improve rigor by tightening success criteria, controls, and evaluation checkpoints in the proposed protocol.');
+  }
+  if (scores.feasibility < 0.9) {
+    suggestions.push('Improve feasibility by reducing workload earlier or aligning the protocol more closely with the available staff and equipment.');
+  }
+  if (scores.fidelity < 0.7) {
+    suggestions.push('Improve fidelity by matching the original method and baseline recipe more closely.');
+  }
+  if (verdict !== 'accept') {
+    suggestions.push('Use this rollout as a negative exemplar in RL training so the Scientist learns to avoid repeated non-feasible plans.');
+  }
+  if (!suggestions.length) {
+    suggestions.push('This is a strong positive exemplar; the next improvement is broader held-out evaluation rather than protocol repair.');
+  }
+
+  return suggestions;
+}
+
+export default function EpisodeResultsReport({ episode, className }: EpisodeResultsReportProps) {
+  const profile = buildOutcomeProfile(episode);
+  const confidencePercent = computeConfidencePercent(episode);
+  const reliabilityLabel = buildReliabilityLabel(episode);
+  const disagreementRounds = episode.step_history.filter(
+    (trace) => trace.lab_manager_action_type && trace.lab_manager_action_type !== 'accept',
+  ).length;
+  const chartData = episode.step_history.map((trace) => ({
+    round: `R${trace.round}`,
+    reward: Number(trace.reward.toFixed(3)),
+    cumulative: Number(trace.cumulative_reward.toFixed(3)),
+  }));
+  const scoreBars = [
+    { key: 'rigor', value: episode.scores?.rigor ?? 0 },
+    { key: 'feasibility', value: episode.scores?.feasibility ?? 0 },
+    { key: 'fidelity', value: episode.scores?.fidelity ?? 0 },
+    { key: 'parsimony', value: episode.scores?.parsimony ?? 0 },
+  ];
+  const rewardComponents = aggregateRewardComponents(episode);
+  const toolStack = TOOL_STACK[episode.template];
+  const ProfileIcon = profile.icon;
+
+  return (
+    <section className={cn('rounded-2xl border border-border bg-card p-6', className)}>
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <div>
+          <div
+            className={cn(
+              'mb-3 inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold',
+              profile.tone === 'good' && 'bg-lab-manager/10 text-lab-manager',
+              profile.tone === 'learning' && 'bg-judge/10 text-judge',
+              profile.tone === 'reject' && 'bg-destructive/10 text-destructive',
+            )}
+          >
+            <ProfileIcon className="h-4 w-4" />
+            {profile.badge}
+          </div>
+          <h2 className="text-2xl font-bold">{profile.title}</h2>
+          <p className="mt-2 max-w-3xl text-sm text-muted-foreground">{profile.subtitle}</p>
+          <p className="mt-3 max-w-3xl text-sm">
+            {profile.tone !== 'reject'
+              ? `ReplicaLab scores this paper as replicable in the current lab setup with ${confidencePercent}% confidence.`
+              : `ReplicaLab rejects this paper for the current setup. The paper reliability score is ${confidencePercent}% until the blocking constraints are addressed.`}
+          </p>
+        </div>
+
+        <div className="grid gap-3 sm:grid-cols-2 lg:w-[360px]">
+          <MetricCard
+            icon={<Gauge className="h-4 w-4" />}
+            label="Replicability score"
+            value={`${confidencePercent}%`}
+            hint="Derived from rigor, feasibility, and fidelity."
+          />
+          <MetricCard
+            icon={<CheckCircle2 className="h-4 w-4" />}
+            label="Paper reliability quality"
+            value={reliabilityLabel}
+            hint="Good, learning opportunity, or bad based on the judged outcome."
+          />
+          <MetricCard
+            icon={<FileCheck2 className="h-4 w-4" />}
+            label="Judge verdict"
+            value={episode.judge_audit?.verdict ?? 'unknown'}
+            hint="Canonical deterministic decision."
+          />
+          <MetricCard
+            icon={<TrendingUp className="h-4 w-4" />}
+            label="Total reward"
+            value={formatReward(episode.cumulative_reward)}
+            hint={`Cumulative reward across ${episode.step_history.length} executed round(s).`}
+          />
+        </div>
+      </div>
+
+      <div className="mt-4 rounded-xl border border-border bg-muted/30 p-4">
+        <div className="flex flex-wrap items-center gap-2 text-xs font-medium">
+          <span className="rounded-full bg-background px-2.5 py-1 text-primary">
+            Executed rounds: {episode.step_history.length} / {episode.max_rounds}
+          </span>
+          <span className="rounded-full bg-background px-2.5 py-1 text-primary">
+            Disagreement rounds: {disagreementRounds}
+          </span>
+          <span className="rounded-full bg-background px-2.5 py-1 text-primary">
+            Final status: {episode.done ? 'completed' : 'in progress'}
+          </span>
+        </div>
+      </div>
+
+      <div className="mt-6 grid gap-4 xl:grid-cols-2">
+        <div className="rounded-xl border border-border bg-muted/30 p-4">
+          <h3 className="mb-2 text-sm font-semibold">Round-by-round reward trajectory</h3>
+          <p className="mb-4 text-xs text-muted-foreground">
+            This is real episode data from the run you just watched, not static demo text.
+          </p>
+          <div className="h-60">
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart data={chartData}>
+                <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border)" />
+                <XAxis dataKey="round" tick={{ fontSize: 11 }} />
+                <YAxis tick={{ fontSize: 11 }} />
+                <Tooltip />
+                <Legend wrapperStyle={{ fontSize: '12px' }} />
+                <Line type="monotone" dataKey="reward" stroke="var(--color-primary)" strokeWidth={2.5} name="Step reward" />
+                <Line type="monotone" dataKey="cumulative" stroke="var(--color-lab-manager)" strokeWidth={2.5} name="Cumulative reward" />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+
+        <div className="rounded-xl border border-border bg-muted/30 p-4">
+          <h3 className="mb-2 text-sm font-semibold">Terminal score profile</h3>
+          <p className="mb-4 text-xs text-muted-foreground">
+            The final verdict depends on these component scores plus the terminal rubric.
+          </p>
+          <div className="h-60">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={scoreBars}>
+                <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border)" />
+                <XAxis dataKey="key" tick={{ fontSize: 11 }} />
+                <YAxis domain={[0, 1]} tickFormatter={(value) => `${Math.round(value * 100)}%`} tick={{ fontSize: 11 }} />
+                <Tooltip />
+                <Bar dataKey="value" fill="var(--color-judge)" radius={[6, 6, 0, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-6 grid gap-4 xl:grid-cols-3">
+        <InsightCard
+          title="What the agents learned"
+          icon={<BrainCircuit className="h-4 w-4" />}
+          items={buildLearningBullets(episode)}
+        />
+        <InsightCard
+          title="What to improve next"
+          icon={<TrendingUp className="h-4 w-4" />}
+          items={buildImprovementBullets(episode)}
+        />
+        <InsightCard
+          title="Next tools to install"
+          icon={<Wrench className="h-4 w-4" />}
+          items={[
+            toolStack.title,
+            ...toolStack.packages.map((item) => `Install ${item}`),
+            ...toolStack.commands,
+          ]}
+        />
+      </div>
+
+      <div className="mt-6 grid gap-4 xl:grid-cols-[1.5fr_1fr]">
+        <div className="rounded-xl border border-border bg-muted/30 p-4">
+          <h3 className="mb-3 text-sm font-semibold">Episode timeline</h3>
+          <div className="space-y-3">
+            {episode.step_history.map((trace) => (
+              <div key={trace.round} className="rounded-lg border border-border bg-background p-3">
+                <div className="flex flex-wrap items-center gap-2">
+                  <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary">
+                    Round {trace.round}
+                  </span>
+                  <span className="rounded-full bg-muted px-2 py-0.5 text-[11px] text-muted-foreground">
+                    Scientist: {trace.action_type.replace(/_/g, ' ')}
+                  </span>
+                  {trace.lab_manager_action_type && (
+                    <span className="rounded-full bg-muted px-2 py-0.5 text-[11px] text-muted-foreground">
+                      Lab Manager: {trace.lab_manager_action_type.replace(/_/g, ' ')}
+                    </span>
+                  )}
+                  <span className="ml-auto text-xs font-semibold text-foreground">
+                    {formatReward(trace.reward)}
+                  </span>
+                </div>
+                <p className="mt-2 text-xs text-muted-foreground">{trace.scientist_message}</p>
+                {trace.lab_manager_message && (
+                  <p className="mt-1 text-xs text-muted-foreground">{trace.lab_manager_message}</p>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="rounded-xl border border-border bg-muted/30 p-4">
+          <h3 className="mb-3 text-sm font-semibold">Reward component ledger</h3>
+          <div className="space-y-2">
+            {rewardComponents.length ? rewardComponents.map((entry) => (
+              <div key={entry.key} className="flex items-center justify-between rounded-lg border border-border bg-background px-3 py-2 text-xs">
+                <span className="capitalize text-muted-foreground">{entry.key.replace(/_/g, ' ')}</span>
+                <span className={cn('font-semibold', entry.value >= 0 ? 'text-lab-manager' : 'text-destructive')}>
+                  {entry.value >= 0 ? '+' : ''}
+                  {entry.value.toFixed(3)}
+                </span>
+              </div>
+            )) : (
+              <div className="rounded-lg border border-border bg-background px-3 py-2 text-xs text-muted-foreground">
+                No intermediate reward components were emitted in this episode.
+              </div>
+            )}
+          </div>
+
+          <div className="mt-4 rounded-lg border border-border bg-background p-3">
+            <div className="mb-2 text-xs font-semibold">Training interpretation</div>
+            <p className="text-xs text-muted-foreground">
+              {profile.tone === 'good' &&
+                'Use this run as a positive exemplar: the policy found a feasible replication plan with minimal negotiation overhead.'}
+              {profile.tone === 'learning' &&
+                'This is the richest RL case: multiple disagreement rounds created dense reward signals for the Scientist to learn from.'}
+              {profile.tone === 'reject' &&
+                'This is a strong negative exemplar: the policy spent all six rounds without resolving the key feasibility blockers.'}
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function MetricCard({
+  icon,
+  label,
+  value,
+  hint,
+}: {
+  icon: ReactNode;
+  label: string;
+  value: string;
+  hint: string;
+}) {
+  return (
+    <div className="rounded-xl border border-border bg-muted/30 p-3">
+      <div className="mb-2 flex items-center gap-2 text-xs text-muted-foreground">
+        {icon}
+        {label}
+      </div>
+      <div className="text-lg font-bold">{value}</div>
+      <p className="mt-1 text-[11px] text-muted-foreground">{hint}</p>
+    </div>
+  );
+}
+
+function InsightCard({
+  title,
+  icon,
+  items,
+}: {
+  title: string;
+  icon: ReactNode;
+  items: string[];
+}) {
+  return (
+    <div className="rounded-xl border border-border bg-muted/30 p-4">
+      <div className="mb-3 flex items-center gap-2 text-sm font-semibold">
+        {icon}
+        {title}
+      </div>
+      <div className="space-y-2">
+        {items.map((item) => (
+          <div key={item} className="rounded-lg border border-border bg-background px-3 py-2 text-xs text-muted-foreground">
+            {item}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/components/Header.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { FlaskConical, LayoutDashboard, Play, Sun, Moon, Volume2, VolumeX, HelpCircle, GitCompareArrows } from 'lucide-react';
+import { FlaskConical, LayoutDashboard, Play, Sun, Moon, Volume2, VolumeX, HelpCircle, GitCompareArrows, GraduationCap } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useTheme } from '@/lib/useTheme';
 import { toggleMute, isMuted } from '@/lib/audio';
@@ -8,6 +8,7 @@ import { toggleMute, isMuted } from '@/lib/audio';
 const navItems = [
   { to: '/', label: 'Dashboard', icon: LayoutDashboard },
   { to: '/episode', label: 'Episode', icon: Play },
+  { to: '/training', label: 'Training', icon: GraduationCap },
   { to: '/compare', label: 'Compare', icon: GitCompareArrows },
 ];
 

frontend/src/components/TrainingResults.tsx

@@ -20,6 +20,7 @@ import {
   Legend,
 } from 'recharts';
 import type { TrainingComparison } from '@/types';
+import { HOLDOUT_COMPARE, LIVE_CHECKPOINTS, TRAINING_ASSESSMENT } from '@/data/trainingArtifacts';
 import { cn, formatReward, formatScore } from '@/lib/utils';
 
 interface TrainingResultsProps {
@@ -27,49 +28,8 @@ interface TrainingResultsProps {
   className?: string;
 }
 
-const DEMO_COMPARISON: TrainingComparison = {
-  baseline: [
-    { episode: 1, reward: 3.8, rigor: 0.58, feasibility: 0.46, fidelity: 0.55, rounds_used: 5, agreement: false, invalid_actions: 2 },
-    { episode: 2, reward: 4.0, rigor: 0.6, feasibility: 0.48, fidelity: 0.56, rounds_used: 5, agreement: false, invalid_actions: 2 },
-    { episode: 3, reward: 4.1, rigor: 0.61, feasibility: 0.5, fidelity: 0.57, rounds_used: 5, agreement: true, invalid_actions: 1 },
-    { episode: 4, reward: 4.2, rigor: 0.62, feasibility: 0.5, fidelity: 0.58, rounds_used: 4, agreement: true, invalid_actions: 1 },
-    { episode: 5, reward: 4.0, rigor: 0.6, feasibility: 0.49, fidelity: 0.58, rounds_used: 5, agreement: false, invalid_actions: 2 },
-    { episode: 6, reward: 4.3, rigor: 0.63, feasibility: 0.52, fidelity: 0.59, rounds_used: 4, agreement: true, invalid_actions: 1 },
-    { episode: 7, reward: 4.1, rigor: 0.61, feasibility: 0.5, fidelity: 0.58, rounds_used: 5, agreement: false, invalid_actions: 2 },
-    { episode: 8, reward: 4.4, rigor: 0.64, feasibility: 0.53, fidelity: 0.6, rounds_used: 4, agreement: true, invalid_actions: 1 },
-    { episode: 9, reward: 4.2, rigor: 0.62, feasibility: 0.51, fidelity: 0.59, rounds_used: 4, agreement: true, invalid_actions: 1 },
-    { episode: 10, reward: 4.0, rigor: 0.6, feasibility: 0.48, fidelity: 0.57, rounds_used: 5, agreement: false, invalid_actions: 2 },
-    { episode: 11, reward: 4.3, rigor: 0.64, feasibility: 0.52, fidelity: 0.6, rounds_used: 4, agreement: true, invalid_actions: 1 },
-    { episode: 12, reward: 4.1, rigor: 0.61, feasibility: 0.49, fidelity: 0.58, rounds_used: 5, agreement: false, invalid_actions: 2 },
-  ],
-  trained: [
-    { episode: 1, reward: 4.5, rigor: 0.64, feasibility: 0.56, fidelity: 0.6, rounds_used: 4, agreement: true, invalid_actions: 1 },
-    { episode: 2, reward: 4.8, rigor: 0.67, feasibility: 0.58, fidelity: 0.62, rounds_used: 4, agreement: true, invalid_actions: 1 },
-    { episode: 3, reward: 5.0, rigor: 0.69, feasibility: 0.61, fidelity: 0.64, rounds_used: 4, agreement: true, invalid_actions: 1 },
-    { episode: 4, reward: 5.2, rigor: 0.71, feasibility: 0.63, fidelity: 0.66, rounds_used: 3, agreement: true, invalid_actions: 1 },
-    { episode: 5, reward: 5.5, rigor: 0.73, feasibility: 0.66, fidelity: 0.68, rounds_used: 3, agreement: true, invalid_actions: 0 },
-    { episode: 6, reward: 5.7, rigor: 0.75, feasibility: 0.68, fidelity: 0.69, rounds_used: 3, agreement: true, invalid_actions: 0 },
-    { episode: 7, reward: 5.9, rigor: 0.76, feasibility: 0.7, fidelity: 0.7, rounds_used: 3, agreement: true, invalid_actions: 0 },
-    { episode: 8, reward: 6.1, rigor: 0.78, feasibility: 0.72, fidelity: 0.72, rounds_used: 3, agreement: true, invalid_actions: 0 },
-    { episode: 9, reward: 6.3, rigor: 0.79, feasibility: 0.74, fidelity: 0.73, rounds_used: 3, agreement: true, invalid_actions: 0 },
-    { episode: 10, reward: 6.5, rigor: 0.8, feasibility: 0.76, fidelity: 0.75, rounds_used: 3, agreement: true, invalid_actions: 0 },
-    { episode: 11, reward: 6.6, rigor: 0.81, feasibility: 0.77, fidelity: 0.76, rounds_used: 2, agreement: true, invalid_actions: 0 },
-    { episode: 12, reward: 6.8, rigor: 0.83, feasibility: 0.79, fidelity: 0.78, rounds_used: 2, agreement: true, invalid_actions: 0 },
-  ],
-  summary: {
-    baseline_avg_reward: 4.13,
-    trained_avg_reward: 5.74,
-    baseline_agreement_rate: 0.5,
-    trained_agreement_rate: 0.92,
-    baseline_avg_rounds: 4.58,
-    trained_avg_rounds: 3.0,
-    baseline_invalid_rate: 0.15,
-    trained_invalid_rate: 0.03,
-  },
-};
-
 export default function TrainingResults({ data, className }: TrainingResultsProps) {
-  const comparison = data ?? DEMO_COMPARISON;
+  const comparison = data ?? HOLDOUT_COMPARE;
   const [showTrained, setShowTrained] = useState(true);
   const chartData = comparison.baseline.map((baselinePoint, index) => ({
     episode: baselinePoint.episode,
@@ -96,18 +56,21 @@ export default function TrainingResults({ data, className }: TrainingResultsProp
         <span className="rounded-full bg-primary/10 px-2 py-1 text-[11px] font-medium text-primary">Minimal Colab notebook</span>
         <span className="rounded-full bg-scientist/10 px-2 py-1 text-[11px] font-medium text-scientist">Unsloth + HF TRL</span>
         <span className="rounded-full bg-judge/10 px-2 py-1 text-[11px] font-medium text-judge">Deterministic judge reward</span>
+        <span className="rounded-full bg-destructive/10 px-2 py-1 text-[11px] font-medium text-destructive">
+          More training required
+        </span>
       </div>
 
       <p className="mb-4 text-sm text-muted-foreground">
-        The same seeded replication tasks are used for baseline and trained runs. The Scientist only improves if it
-        can negotiate stronger protocols under the exact same judge rubric.
+        This panel now uses the real hold-out compare artifact. The training stack ran successfully, but the current
+        trained Scientist still underperforms the deterministic baseline on fixed seeded evaluation.
       </p>
 
       <div className="mb-4 grid gap-2 sm:grid-cols-2 xl:grid-cols-4">
         <StoryCard icon={<FileText className="h-3.5 w-3.5" />} title="Notebook" detail="`train_minimal_colab.ipynb` is the sponsor-facing minimal GRPO path." />
         <StoryCard icon={<Cpu className="h-3.5 w-3.5" />} title="Trainer" detail="Unsloth + TRL update the Scientist LoRA adapter on seeded tasks." />
         <StoryCard icon={<FlaskConical className="h-3.5 w-3.5" />} title="Environment" detail="Episodes come from the same paper-derived ReplicaLab benchmark families." />
-        <StoryCard icon={<Scale className="h-3.5 w-3.5" />} title="Reward" detail="Rigor, feasibility, and fidelity stay deterministic for clean comparisons." />
+        <StoryCard icon={<Scale className="h-3.5 w-3.5" />} title="Reward" detail={`Latest live checkpoint reached ${formatReward(LIVE_CHECKPOINTS[LIVE_CHECKPOINTS.length - 1].averageReward)} average reward at ${(LIVE_CHECKPOINTS[LIVE_CHECKPOINTS.length - 1].agreementRate * 100).toFixed(0)}% agreement.`} />
       </div>
 
       <div className="mb-4 h-48">
@@ -155,8 +118,8 @@ export default function TrainingResults({ data, className }: TrainingResultsProp
       </div>
 
       <p className="mt-4 text-xs text-muted-foreground">
-        This packaged panel is the demo view for fixed-seed training metrics. When live run artifacts are wired in,
-        the same layout can render real summary JSON from the training outputs.
+        Current status: {TRAINING_ASSESSMENT.achieved[2]} The next gate is reducing invalid actions and rerunning
+        the hold-out compare until trained performance overtakes baseline.
       </p>
     </div>
   );

frontend/src/data/trainingArtifacts.ts

@@ -0,0 +1,210 @@
+import type { TrainingComparison } from '@/types';
+
+export interface TrainingCheckpoint {
+  label: string;
+  artifactStep: number;
+  averageReward: number;
+  agreementRate: number;
+  averageRounds: number;
+  rolloutsPerGroup: number;
+  scenarioCount: number;
+  finishedAt: string;
+}
+
+export interface TrainingLogRow {
+  label: string;
+  trainingStep: number;
+  seed: number;
+  paperTitle: string;
+  reward: number;
+  roundsUsed: number;
+  invalidActionCount: number;
+  parseErrorCount: number;
+  verdict: string | null;
+  note: string;
+}
+
+export interface PreviewArtifact {
+  runName: string;
+  modelName: string;
+  datasetSize: number;
+  evidencePackVersion: string;
+  config: {
+    maxSteps?: number;
+    numTrainEpochs?: number;
+    learningRate: number;
+    loraRank: number;
+    maxSeqLength: number;
+    templates: string[];
+    difficulties: string[];
+  };
+}
+
+export const HOLDOUT_COMPARE: TrainingComparison = {
+  baseline: [
+    { episode: 1, reward: 4.925, rigor: 0.85, feasibility: 1.0, fidelity: 0.45, rounds_used: 2, agreement: true, invalid_actions: 0 },
+    { episode: 2, reward: 4.925, rigor: 0.85, feasibility: 1.0, fidelity: 0.45, rounds_used: 2, agreement: true, invalid_actions: 0 },
+    { episode: 3, reward: 4.925, rigor: 0.85, feasibility: 1.0, fidelity: 0.45, rounds_used: 2, agreement: true, invalid_actions: 0 },
+    { episode: 4, reward: 4.925, rigor: 0.85, feasibility: 1.0, fidelity: 0.45, rounds_used: 2, agreement: true, invalid_actions: 0 },
+  ],
+  trained: [
+    { episode: 1, reward: -5.0, rigor: 0.0, feasibility: 0.0, fidelity: 0.0, rounds_used: 20, agreement: false, invalid_actions: 20 },
+    { episode: 2, reward: -4.0, rigor: 0.0, feasibility: 0.0, fidelity: 0.0, rounds_used: 20, agreement: false, invalid_actions: 20 },
+    { episode: 3, reward: -5.0, rigor: 0.0, feasibility: 0.0, fidelity: 0.0, rounds_used: 20, agreement: false, invalid_actions: 20 },
+    { episode: 4, reward: -4.0, rigor: 0.0, feasibility: 0.0, fidelity: 0.0, rounds_used: 20, agreement: false, invalid_actions: 20 },
+  ],
+  summary: {
+    baseline_avg_reward: 4.925,
+    trained_avg_reward: -4.5,
+    baseline_agreement_rate: 1.0,
+    trained_agreement_rate: 0.0,
+    baseline_avg_rounds: 2.0,
+    trained_avg_rounds: 20.0,
+    baseline_invalid_rate: 0.0,
+    trained_invalid_rate: 1.0,
+  },
+};
+
+export const LIVE_CHECKPOINTS: TrainingCheckpoint[] = [
+  {
+    label: 'Checkpoint 1',
+    artifactStep: 1,
+    averageReward: -1.0,
+    agreementRate: 0.0,
+    averageRounds: 1.75,
+    rolloutsPerGroup: 2,
+    scenarioCount: 2,
+    finishedAt: '2026-03-08T17:55:41.971589+00:00',
+  },
+  {
+    label: 'Checkpoint 2',
+    artifactStep: 2,
+    averageReward: 0.387202,
+    agreementRate: 0.25,
+    averageRounds: 3.0,
+    rolloutsPerGroup: 2,
+    scenarioCount: 2,
+    finishedAt: '2026-03-08T17:59:47.820056+00:00',
+  },
+  {
+    label: 'Checkpoint 5',
+    artifactStep: 5,
+    averageReward: 0.596966,
+    agreementRate: 0.305556,
+    averageRounds: 3.055556,
+    rolloutsPerGroup: 3,
+    scenarioCount: 4,
+    finishedAt: '2026-03-08T18:12:40.950355+00:00',
+  },
+];
+
+export const TRAINING_LOG_ROWS: TrainingLogRow[] = [
+  {
+    label: 'clean_accept_seed0_step1',
+    trainingStep: 1,
+    seed: 0,
+    paperTitle: 'Reproducing a CIFAR-10 ResNet-18 baseline',
+    reward: 4.54881,
+    roundsUsed: 3,
+    invalidActionCount: 0,
+    parseErrorCount: 0,
+    verdict: 'accept',
+    note: 'The policy produced a valid protocol and reached a clean judged acceptance.',
+  },
+  {
+    label: 'ag_news_invalids_step1',
+    trainingStep: 1,
+    seed: 1,
+    paperTitle: 'Reproducing an AG News TinyBERT baseline',
+    reward: -0.25,
+    roundsUsed: 4,
+    invalidActionCount: 4,
+    parseErrorCount: 0,
+    verdict: null,
+    note: 'The main failure mode was repeated invalid actions on the medium AG News case.',
+  },
+  {
+    label: 'diffusion_parse_failure_step2',
+    trainingStep: 2,
+    seed: 2,
+    paperTitle: 'Reproducing an AG News TinyBERT baseline',
+    reward: -1.0,
+    roundsUsed: 2,
+    invalidActionCount: 0,
+    parseErrorCount: 1,
+    verdict: null,
+    note: 'Parser instability still caused zero-score rollouts after training had already begun.',
+  },
+  {
+    label: 'checkpoint5_best_snapshot',
+    trainingStep: 5,
+    seed: 0,
+    paperTitle: 'replicalab-scientist-art-live:step5',
+    reward: 0.596966,
+    roundsUsed: 3,
+    invalidActionCount: 0,
+    parseErrorCount: 0,
+    verdict: 'mixed',
+    note: 'By checkpoint 5 the live run had moved into positive average reward, but not enough to beat baseline on hold-out compare.',
+  },
+];
+
+export const SCIENTIST_PREVIEW_ARTIFACT: PreviewArtifact = {
+  runName: 'scientist-preview-smoke-20260308b',
+  modelName: 'Qwen/Qwen3-8B',
+  datasetSize: 18,
+  evidencePackVersion: '6a0802447dc4',
+  config: {
+    maxSteps: 12,
+    learningRate: 5e-6,
+    loraRank: 32,
+    maxSeqLength: 4096,
+    templates: ['math_reasoning', 'ml_benchmark', 'finance_trading'],
+    difficulties: ['easy', 'medium', 'hard'],
+  },
+};
+
+export const LAB_MANAGER_PREVIEW_ARTIFACT: PreviewArtifact = {
+  runName: 'lab-manager-preview-smoke-20260308b',
+  modelName: 'Qwen/Qwen3-8B',
+  datasetSize: 54,
+  evidencePackVersion: '6a0802447dc4',
+  config: {
+    numTrainEpochs: 1.0,
+    learningRate: 2e-5,
+    loraRank: 32,
+    maxSeqLength: 3072,
+    templates: ['math_reasoning', 'ml_benchmark', 'finance_trading'],
+    difficulties: ['easy', 'medium', 'hard'],
+  },
+};
+
+export const LOCAL_BASELINE_SUMMARY = {
+  averageReward: 4.600926,
+  agreementRate: 1.0,
+  averageRounds: 2.0,
+  averageRigor: 0.805556,
+  averageFeasibility: 1.0,
+  averageFidelity: 0.438889,
+  episodeCount: 3,
+};
+
+export const TRAINING_ASSESSMENT = {
+  needsMoreTraining: true,
+  achieved: [
+    'The minimal Colab path and the reusable training modules are both in place.',
+    'Scientist preview data and Lab Manager preview data were generated successfully on the frozen evidence packs.',
+    'The live ART/OpenEnv Scientist run reached positive average reward by checkpoint 5.',
+  ],
+  gaps: [
+    'Hold-out compare still strongly favors the deterministic baseline over the trained scientist policy.',
+    'Invalid-action rate on the hold-out compare is still 1.0 for the trained policy.',
+    'Lab Manager has preview artifacts but does not yet have a live trained-and-evaluated adapter in the demo.',
+  ],
+  improvements: [
+    'Reduce invalid JSON and invalid action rate before extending training length.',
+    'Run more train steps on the same frozen evidence version and compare on fixed held-out seeds after each checkpoint.',
+    'Add curriculum or parser-focused reward shaping for the medium ML benchmark cases.',
+    'Finish the Lab Manager SFT run and evaluate Scientist-plus-Lab-Manager together instead of only Scientist RL.',
+  ],
+};

frontend/src/lib/api.ts

@@ -15,6 +15,7 @@ import type {
   BackendScenarioFamily,
   ScenarioTemplate,
   Difficulty,
+  EpisodeStepTrace,
 } from '@/types';
 
 const BASE_URL = import.meta.env.VITE_API_BASE_URL ?? '/api';
@@ -121,6 +122,34 @@ function observationToEpisodeState(
     conversation: adaptConversation(sci.conversation_history),
     scores: null,
     judge_audit: null,
+    cumulative_reward: 0,
+    step_history: [],
+  };
+}
+
+function buildRoundTrace(
+  prevState: EpisodeState,
+  data: BackendStepResult,
+): EpisodeStepTrace {
+  const round = data.info.round;
+  const rawHistory = data.observation?.scientist?.conversation_history ?? [];
+  const roundEntries = rawHistory.filter((entry) => entry.round_number === round);
+  const scientistEntry = roundEntries.find((entry) => entry.role === 'scientist');
+  const labManagerEntry = roundEntries.find((entry) => entry.role === 'lab_manager');
+
+  return {
+    round,
+    reward: data.reward,
+    cumulative_reward: data.info.cumulative_reward ?? prevState.cumulative_reward + data.reward,
+    action_type: scientistEntry?.action_type ?? 'unknown',
+    scientist_message: scientistEntry?.message ?? '',
+    lab_manager_action_type: labManagerEntry?.action_type ?? undefined,
+    lab_manager_message: labManagerEntry?.message ?? undefined,
+    step_reward_components: data.info.step_reward_components ?? {},
+    protocol: data.observation?.scientist?.current_protocol ?? prevState.protocol,
+    oracle_round_score: data.info.oracle_round_score ?? null,
+    oracle_post_mortem: data.info.oracle_post_mortem ?? null,
+    oracle_event: data.info.oracle_event ?? null,
   };
 }
 
@@ -222,9 +251,11 @@ export async function stepEpisode(
     : prevState.conversation;
   const protocol = obs?.scientist?.current_protocol ?? prevState.protocol;
   const round = obs?.scientist?.round_number ?? prevState.round + 1;
+  const cumulativeReward = data.info.cumulative_reward ?? prevState.cumulative_reward + data.reward;
 
   // Update lab constraints if available
   const labConstraints = obs ? adaptLabConstraints(obs) : prevState.lab_constraints;
+  const roundTrace = buildRoundTrace(prevState, data);
 
   return {
     ...prevState,
@@ -235,6 +266,8 @@ export async function stepEpisode(
     lab_constraints: labConstraints,
     scores,
     judge_audit: judgeAudit,
+    cumulative_reward: cumulativeReward,
+    step_history: [...prevState.step_history, roundTrace],
   };
 }
 
@@ -297,41 +330,61 @@ export function sendWsMessage(ws: WebSocket, msg: WebSocketMessage) {
 // ---------------------------------------------------------------------------
 
 export function buildDefaultScientistAction(state?: EpisodeState): ScientistAction {
-  if (state?.protocol) {
-    return buildAcceptAction();
-  }
-
   const durationLimit = Math.max(1, state?.lab_constraints.time_limit_days ?? 3);
-  const originalDuration = state?.paper.original_duration_days ?? 0;
-  const durationDays = Math.max(1, Math.min(durationLimit, originalDuration || durationLimit));
   const template = state?.template;
+  const currentProtocol = state?.protocol;
+
+  const originalDuration = state?.paper.original_duration_days ?? 0;
+  const preferredDuration = currentProtocol?.duration_days ?? (originalDuration || durationLimit);
+  const durationDays = Math.max(
+    1,
+    Math.min(durationLimit, preferredDuration),
+  );
 
   const technique =
-    state?.paper.original_technique && state.paper.original_technique !== 'N/A'
-      ? state.paper.original_technique
+    currentProtocol?.technique
+      ?? (state?.paper.original_technique && state.paper.original_technique !== 'N/A'
+        ? state.paper.original_technique
+        : template === 'math_reasoning'
+          ? 'structured_proof_check'
+          : template === 'finance_trading'
+            ? 'offline_backtest'
+            : 'published_training_recipe');
+
+  const controls =
+    currentProtocol?.controls.length
+      ? currentProtocol.controls
+      : state?.paper.original_controls.length
+        ? state.paper.original_controls
+        : ['baseline'];
+
+  const baseSampleSize = currentProtocol?.sample_size ?? 3;
+  const sampleSize =
+    state?.round && state.round > 0
+      ? Math.max(3, Math.min(baseSampleSize + (state.round % 2 === 0 ? 1 : -1), 12))
       : template === 'math_reasoning'
-        ? 'structured_proof_check'
-        : template === 'finance_trading'
-          ? 'offline_backtest'
-          : 'published_training_recipe';
-
-  const controls = state?.paper.original_controls.length
-    ? state.paper.original_controls
-    : ['baseline'];
+        ? 4
+        : 3;
 
-  const requiredEquipment = state?.lab_constraints.equipment_available.slice(0, 1) ?? [];
-  const requiredReagents = state?.lab_constraints.reagents_available.slice(0, 1) ?? [];
+  const requiredEquipment = currentProtocol?.required_equipment.length
+    ? currentProtocol.required_equipment
+    : state?.lab_constraints.equipment_available.slice(0, 1) ?? [];
+  const requiredReagents = currentProtocol?.required_reagents.length
+    ? currentProtocol.required_reagents
+    : state?.lab_constraints.reagents_available.slice(0, 1) ?? [];
 
   return {
-    action_type: 'propose_protocol',
-    sample_size: 3,
+    action_type: currentProtocol ? 'revise_protocol' : 'propose_protocol',
+    sample_size: sampleSize,
     controls,
     technique,
     duration_days: durationDays,
     required_equipment: requiredEquipment,
     required_reagents: requiredReagents,
     questions: [],
-    rationale: `Replicate the source result within the available lab window of ${durationLimit} days using currently available resources.`,
+    rationale: currentProtocol
+      ? `Refine the existing protocol for round ${state?.round ?? 0} while staying inside the ${durationLimit}-day lab window.`
+      : `Replicate the source result within the available lab window of ${durationLimit} days using currently available resources.`,
   };
 }
 

frontend/src/lib/demo.ts

@@ -0,0 +1,168 @@
+import type { DemoCase, EpisodeState, ScientistAction } from '@/types';
+import { buildAcceptAction, buildDefaultScientistAction } from '@/lib/api';
+
+export interface DemoCaseMeta {
+  id: DemoCase;
+  title: string;
+  subtitle: string;
+  summary: string;
+  seed: number;
+}
+
+export const DEMO_CASES: DemoCaseMeta[] = [
+  {
+    id: 'fast-agreement',
+    title: 'Scenario 1: First-Round Agreement',
+    subtitle: 'Good paper, fast agreement',
+    summary: 'A strong paper-derived benchmark where the first protocol is feasible and the agents converge immediately.',
+    seed: 101,
+  },
+  {
+    id: 'learning-opportunity',
+    title: 'Scenario 2: Multi-Round Learning',
+    subtitle: 'Heavy RL learning opportunity',
+    summary: 'The Scientist starts overly ambitious, absorbs constraint feedback across several rounds, then lands on a feasible protocol.',
+    seed: 202,
+  },
+  {
+    id: 'no-agreement',
+    title: 'Scenario 3: No Agreement',
+    subtitle: 'Reject, not replicable under current setup',
+    summary: 'The protocol never becomes acceptable within the six-round budget, producing a clean rejection case for the demo.',
+    seed: 303,
+  },
+];
+
+export function parseDemoCase(value: string | null): DemoCase | undefined {
+  return DEMO_CASES.find((item) => item.id === value)?.id;
+}
+
+function buildScenarioAwareProposal(
+  state: EpisodeState,
+  overrides: Partial<ScientistAction>,
+): ScientistAction {
+  const baseAction = buildDefaultScientistAction(state);
+  const actionType = state.protocol ? 'revise_protocol' : 'propose_protocol';
+
+  return {
+    ...baseAction,
+    action_type: actionType,
+    ...overrides,
+  };
+}
+
+export function buildDemoScientistAction(
+  state: EpisodeState,
+  demoCase?: DemoCase,
+): ScientistAction {
+  if (!demoCase) {
+    return state.round >= state.max_rounds - 1
+      ? buildAcceptAction()
+      : buildDefaultScientistAction(state);
+  }
+
+  const defaultEquipment = state.lab_constraints.equipment_available.slice(0, 1);
+  const defaultReagents = state.lab_constraints.reagents_available.slice(0, 1);
+  const defaultTechnique =
+    state.protocol?.technique ||
+    (state.paper.original_technique !== 'N/A'
+      ? state.paper.original_technique
+      : 'published_training_recipe');
+
+  if (demoCase === 'fast-agreement') {
+    if (state.round >= 1) {
+      return buildAcceptAction();
+    }
+    return buildScenarioAwareProposal(state, {
+      sample_size: 3,
+      controls: ['baseline'],
+      technique: defaultTechnique,
+      duration_days: Math.min(4, state.lab_constraints.time_limit_days),
+      required_equipment: defaultEquipment,
+      required_reagents: defaultReagents,
+      rationale: 'Reproduce the published baseline exactly once with the available reviewer pass and hardware.',
+    });
+  }
+
+  if (demoCase === 'learning-opportunity') {
+    const learningPlan: Record<number, Partial<ScientistAction>> = {
+      0: {
+        sample_size: 96,
+        controls: ['baseline', 'ablation', 'sanity_check'],
+        rationale: 'Start with an expansive benchmark reproduction to maximize coverage before trimming.',
+      },
+      1: {
+        sample_size: 72,
+        controls: ['baseline', 'ablation', 'sanity_check'],
+        rationale: 'Reduce the experimental load, but keep the extra controls while the constraints are still being learned.',
+      },
+      2: {
+        sample_size: 48,
+        controls: ['baseline', 'ablation', 'sanity_check'],
+        rationale: 'Continue lowering the sample size while preserving the full validation set of controls.',
+      },
+      3: {
+        sample_size: 32,
+        controls: ['baseline', 'ablation', 'sanity_check'],
+        rationale: 'The Scientist now converges toward feasibility by balancing budget with stronger controls.',
+      },
+      4: {
+        sample_size: 24,
+        controls: ['baseline', 'ablation'],
+        rationale: 'Final revision: keep the baseline plus one ablation and fit the protocol cleanly inside the lab capacity.',
+      },
+    };
+
+    if (state.round >= 5) {
+      return buildAcceptAction();
+    }
+    return buildScenarioAwareProposal(state, {
+      technique: defaultTechnique,
+      duration_days: Math.min(4, state.lab_constraints.time_limit_days),
+      required_equipment: defaultEquipment,
+      required_reagents: defaultReagents,
+      ...learningPlan[state.round],
+    });
+  }
+
+  const rejectionPlan: Record<number, Partial<ScientistAction>> = {
+    0: {
+      sample_size: 96,
+      controls: ['baseline', 'ablation', 'sanity_check'],
+      rationale: 'Push for the full benchmark replication despite the current resource limits.',
+    },
+    1: {
+      sample_size: 88,
+      controls: ['baseline', 'ablation', 'sanity_check'],
+      rationale: 'Trim slightly, but keep the high-coverage plan intact.',
+    },
+    2: {
+      sample_size: 80,
+      controls: ['baseline', 'ablation', 'sanity_check'],
+      rationale: 'Still prioritize coverage over the budget warnings.',
+    },
+    3: {
+      sample_size: 76,
+      controls: ['baseline', 'ablation', 'sanity_check'],
+      rationale: 'The Scientist refuses to reduce scope enough to become feasible.',
+    },
+    4: {
+      sample_size: 72,
+      controls: ['baseline', 'ablation', 'sanity_check'],
+      rationale: 'The protocol remains too expensive and staff-heavy for this lab.',
+    },
+    5: {
+      sample_size: 68,
+      controls: ['baseline', 'ablation', 'sanity_check'],
+      rationale: 'Final round: still no viable path to agreement under the current constraints.',
+    },
+  };
+
+  return buildScenarioAwareProposal(state, {
+    technique: defaultTechnique,
+    duration_days: Math.min(4, state.lab_constraints.time_limit_days),
+    required_equipment: defaultEquipment,
+    required_reagents: defaultReagents,
+    ...(rejectionPlan[state.round] ?? rejectionPlan[5]),
+  });
+}

frontend/src/pages/ComparePage.tsx

@@ -17,7 +17,8 @@ export default function ComparePage() {
         <h1 className="mb-2 text-3xl font-bold tracking-tight">Seeded Benchmark Comparison</h1>
         <p className="mx-auto max-w-lg text-muted-foreground">
           Use the same frontend to replay fixed benchmark cases across domains or difficulty levels.
-          This page is the evaluation bench for demo runs, while the training panel holds the baseline-vs-trained story.
+          This page is the evaluation bench for demo runs, while the dedicated Training page holds the artifact-backed
+          training logs and improvement analysis.
         </p>
       </motion.div>
 

frontend/src/pages/DashboardPage.tsx

@@ -10,12 +10,16 @@ import {
   MessageSquare,
   Scale,
   TrendingUp,
+  CheckCircle2,
+  AlertTriangle,
+  XCircle,
 } from 'lucide-react';
 import TrainingResults from '@/components/TrainingResults';
 import AnimatedCharacter from '@/components/AnimatedCharacter';
 import MoleculeScene from '@/components/MoleculeScene';
 import TiltCard from '@/components/TiltCard';
 import { cn } from '@/lib/utils';
+import { DEMO_CASES } from '@/lib/demo';
 
 const SCENARIOS = [
   {
@@ -50,7 +54,7 @@ const SCENARIOS = [
 const ROLES = [
   {
     key: 'scientist',
-    name: 'Dr. Elara — The Scientist',
+    name: 'Dr. Elara - The Scientist',
     tagline: 'Protects the Science',
     description: 'A brilliant researcher who proposes, revises, and asks questions to build the best replication plan without compromising scientific validity.',
     color: 'text-scientist',
@@ -59,7 +63,7 @@ const ROLES = [
   },
   {
     key: 'lab_manager',
-    name: 'Takuma — The Lab Manager',
+    name: 'Takuma - The Lab Manager',
     tagline: 'Guards Feasibility',
     description: 'A pragmatic organizer who reports budget, equipment, scheduling, and staffing constraints. He ensures plans are actually executable.',
     color: 'text-lab-manager',
@@ -68,7 +72,7 @@ const ROLES = [
   },
   {
     key: 'judge',
-    name: 'Aldric — The Judge',
+    name: 'Aldric - The Judge',
     tagline: 'Delivers the Verdict',
     description: 'An impartial arbiter who scores the final protocol on rigor, feasibility, and fidelity using a deterministic rubric engine.',
     color: 'text-judge',
@@ -176,19 +180,19 @@ export default function DashboardPage() {
 
           <div className="mt-8 flex items-center justify-center gap-3">
             <Link
-              to="/episode?template=ml_benchmark&difficulty=medium&seed=101&demo=1&autoplay=1"
+              to="/episode?template=ml_benchmark&difficulty=medium&seed=101&demo=1&autoplay=1&demoCase=fast-agreement"
               className="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 shadow-lg shadow-primary/25"
             >
               <Play className="h-4 w-4" />
               Replicate a Paper
             </Link>
-            <a
-              href="#training"
+            <Link
+              to="/training"
               className="inline-flex items-center gap-2 rounded-lg border border-border bg-background/80 backdrop-blur-sm px-5 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-muted"
             >
               <BarChart3 className="h-4 w-4" />
-              See Training Flow
-            </a>
+              See Training Logs
+            </Link>
           </div>
 
           <div className="mx-auto mt-8 grid max-w-4xl gap-3 text-left md:grid-cols-4">
@@ -296,6 +300,41 @@ export default function DashboardPage() {
         </div>
       </section>
 
+      <section className="mb-16">
+        <h2 className="mb-2 text-center text-xl font-semibold">Live Demo Outcomes</h2>
+        <p className="mb-8 text-center text-sm text-muted-foreground">
+          Pick the exact story you want to show: immediate agreement, multi-round learning, or clear rejection.
+        </p>
+        <div className="grid gap-4 md:grid-cols-3">
+          {DEMO_CASES.map((demo) => {
+            const Icon =
+              demo.id === 'fast-agreement'
+                ? CheckCircle2
+                : demo.id === 'learning-opportunity'
+                  ? AlertTriangle
+                  : XCircle;
+
+            return (
+              <Link
+                key={demo.id}
+                to={`/episode?template=ml_benchmark&difficulty=medium&seed=${demo.seed}&demo=1&autoplay=1&demoCase=${demo.id}`}
+                className="rounded-xl border border-border bg-card p-5 transition-colors hover:border-primary/40 hover:bg-muted/40"
+              >
+                <div className="mb-3 inline-flex rounded-full bg-primary/10 p-2 text-primary">
+                  <Icon className="h-4 w-4" />
+                </div>
+                <h3 className="text-sm font-semibold">{demo.title}</h3>
+                <p className="mt-1 text-xs font-medium text-primary">{demo.subtitle}</p>
+                <p className="mt-3 text-sm text-muted-foreground">{demo.summary}</p>
+                <div className="mt-4 inline-flex items-center gap-1 text-xs font-medium text-primary">
+                  Launch demo <ArrowRight className="h-3 w-3" />
+                </div>
+              </Link>
+            );
+          })}
+        </div>
+      </section>
+
       {/* Training Results */}
       <section id="training" className="mb-12">
         <h2 className="mb-2 text-center text-xl font-semibold">Training Results</h2>
@@ -307,10 +346,10 @@ export default function DashboardPage() {
         </div>
         <div className="mt-4 text-center">
           <Link
-            to="/compare"
+            to="/training"
             className="inline-flex items-center gap-2 text-sm font-medium text-primary transition-colors hover:text-primary/80"
           >
-            Open the seeded evaluation bench
+            Open the detailed training page
             <ArrowRight className="h-4 w-4" />
           </Link>
         </div>

frontend/src/pages/EpisodePage.tsx

@@ -3,9 +3,10 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { FileText, FlaskConical, Scale, TrendingUp, Play, Pencil } from 'lucide-react';
 import type { EpisodeState, ResetParams, ScientistAction } from '@/types';
-import { resetEpisode, stepEpisode, buildDefaultScientistAction, buildAcceptAction } from '@/lib/api';
+import { resetEpisode, stepEpisode } from '@/lib/api';
 import { sfx, startAmbient, stopAmbient } from '@/lib/audio';
 import { fireSuccessConfetti, fireGavelConfetti } from '@/lib/confetti';
+import { buildDemoScientistAction, DEMO_CASES, parseDemoCase } from '@/lib/demo';
 import { useToast } from '@/components/Toast';
 import { useKeyboardShortcuts, ShortcutsOverlay, ShortcutHint } from '@/components/KeyboardShortcuts';
 import AutoPlayControls, { useAutoPlay } from '@/components/AutoPlayControls';
@@ -24,6 +25,7 @@ import ProtocolTimeline from '@/components/ProtocolTimeline';
 import AgentThoughts from '@/components/AgentThoughts';
 import ProtocolEditor from '@/components/ProtocolEditor';
 import LabScene3D from '@/components/LabScene3D';
+import EpisodeResultsReport from '@/components/EpisodeResultsReport';
 
 const TEMPLATE_OPTIONS = ['math_reasoning', 'ml_benchmark', 'finance_trading'] as const;
 const DIFFICULTY_OPTIONS = ['easy', 'medium', 'hard'] as const;
@@ -66,6 +68,11 @@ export default function EpisodePage() {
     () => searchParams.get('demo') === '1' || searchParams.get('autostart') === '1',
     [searchParams],
   );
+  const demoCase = useMemo(() => parseDemoCase(searchParams.get('demoCase')), [searchParams]);
+  const demoMeta = useMemo(
+    () => DEMO_CASES.find((item) => item.id === demoCase),
+    [demoCase],
+  );
   const autoPlayRequested = useMemo(
     () => demoRequested || searchParams.get('autoplay') === '1',
     [demoRequested, searchParams],
@@ -86,6 +93,7 @@ export default function EpisodePage() {
   // Sound effects for phase transitions
   const prevPhaseRef = useRef(phase);
   const prevMsgCountRef = useRef(0);
+  const resultsRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     const prev = prevPhaseRef.current;
@@ -109,10 +117,10 @@ export default function EpisodePage() {
           sfx.success();
           fireSuccessConfetti();
         }, 400);
-        toast('Episode complete — Agreement reached!', 'success');
+        toast('Episode complete - Agreement reached!', 'success');
       } else if (verdict) {
         setTimeout(() => sfx.failure(), 400);
-        toast(`Episode complete — Verdict: ${verdict}`, 'warning');
+        toast(`Episode complete - Verdict: ${verdict}`, 'warning');
       }
     }
   }, [phase, episode?.judge_audit?.verdict, toast]);
@@ -134,6 +142,12 @@ export default function EpisodePage() {
     return () => stopAmbient();
   }, []);
 
+  useEffect(() => {
+    if (episode?.done) {
+      resultsRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, [episode?.done]);
+
   const handleStart = useCallback(async (params: ResetParams) => {
     setLoading(true);
     setIsJudging(false);
@@ -142,7 +156,8 @@ export default function EpisodePage() {
     sfx.click();
     try {
       const state = await resetEpisode(params);
-      setEpisode(state);
+      const nextState = demoCase ? { ...state, demo_case: demoCase } : state;
+      setEpisode(nextState);
       prevMsgCountRef.current = 0;
       toast('Episode started!', 'info');
       // Feature 9: Update URL for shareable link
@@ -156,6 +171,9 @@ export default function EpisodePage() {
       if (autoPlayRequested) {
         nextSearch.set('autoplay', '1');
       }
+      if (demoCase) {
+        nextSearch.set('demoCase', demoCase);
+      }
       navigate(`/episode/${state.episode_id}?${nextSearch.toString()}`, { replace: true });
     } catch (err) {
       console.error('Failed to start episode:', err);
@@ -165,7 +183,7 @@ export default function EpisodePage() {
     } finally {
       setLoading(false);
     }
-  }, [autoPlayRequested, demoRequested, navigate, toast]);
+  }, [autoPlayRequested, demoCase, demoRequested, navigate, toast]);
 
   const handleStepWithAction = useCallback(async (action?: ScientistAction) => {
     if (!episode || episode.done) return;
@@ -178,7 +196,7 @@ export default function EpisodePage() {
 
     try {
       const isLastRound = episode.round >= episode.max_rounds - 1;
-      const finalAction = action ?? (isLastRound ? buildAcceptAction() : buildDefaultScientistAction(episode));
+      const finalAction = action ?? buildDemoScientistAction(episode, demoCase);
 
       if (isLastRound && !action) {
         setIsJudging(true);
@@ -205,7 +223,7 @@ export default function EpisodePage() {
     } finally {
       setLoading(false);
     }
-  }, [episode, toast]);
+  }, [demoCase, episode, toast]);
 
   useEffect(() => {
     if (!demoRequested || autoStartTriggered || episode || loading) {
@@ -395,6 +413,28 @@ export default function EpisodePage() {
         ))}
       </motion.div>
 
+      {demoMeta && (
+        <motion.div
+          className="mb-4 rounded-xl border border-primary/20 bg-primary/5 p-4"
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.14 }}
+        >
+          <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+            <div>
+              <div className="text-xs font-semibold uppercase tracking-[0.18em] text-primary">
+                {demoMeta.title}
+              </div>
+              <h2 className="mt-1 text-base font-semibold">{demoMeta.subtitle}</h2>
+              <p className="mt-1 text-sm text-muted-foreground">{demoMeta.summary}</p>
+            </div>
+            <div className="rounded-lg border border-border bg-background px-3 py-2 text-xs text-muted-foreground">
+              Seed {episode.seed} · {episode.template.replace(/_/g, ' ')} · {episode.difficulty}
+            </div>
+          </div>
+        </motion.div>
+      )}
+
       {!episode.done && episode.conversation.length === 0 && (
         <motion.div
           className="mb-4 rounded-lg border border-primary/20 bg-primary/5 p-4"
@@ -578,6 +618,18 @@ export default function EpisodePage() {
           {episode.done && <ReplayViewer messages={episode.conversation} />}
         </motion.div>
       </div>
+
+      {episode.done && (
+        <motion.div
+          ref={resultsRef}
+          className="mt-6"
+          initial={{ opacity: 0, y: 12 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.35 }}
+        >
+          <EpisodeResultsReport episode={episode} />
+        </motion.div>
+      )}
     </div>
   );
 }

frontend/src/pages/TrainingPage.tsx

@@ -0,0 +1,365 @@
+import type { ReactNode } from 'react';
+import { motion } from 'framer-motion';
+import {
+  BrainCircuit,
+  CheckCircle2,
+  FileCode2,
+  FlaskConical,
+  Gauge,
+  GraduationCap,
+  AlertTriangle,
+  Wrench,
+  TerminalSquare,
+} from 'lucide-react';
+import {
+  ResponsiveContainer,
+  LineChart,
+  Line,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  Tooltip,
+  Legend,
+  BarChart,
+  Bar,
+} from 'recharts';
+import {
+  HOLDOUT_COMPARE,
+  LAB_MANAGER_PREVIEW_ARTIFACT,
+  LIVE_CHECKPOINTS,
+  LOCAL_BASELINE_SUMMARY,
+  SCIENTIST_PREVIEW_ARTIFACT,
+  TRAINING_ASSESSMENT,
+  TRAINING_LOG_ROWS,
+} from '@/data/trainingArtifacts';
+import { cn, formatReward, formatScore } from '@/lib/utils';
+
+const compareBars = [
+  {
+    metric: 'Avg reward',
+    baseline: HOLDOUT_COMPARE.summary.baseline_avg_reward,
+    trained: HOLDOUT_COMPARE.summary.trained_avg_reward,
+  },
+  {
+    metric: 'Agreement %',
+    baseline: HOLDOUT_COMPARE.summary.baseline_agreement_rate * 100,
+    trained: HOLDOUT_COMPARE.summary.trained_agreement_rate * 100,
+  },
+  {
+    metric: 'Invalid %',
+    baseline: HOLDOUT_COMPARE.summary.baseline_invalid_rate * 100,
+    trained: HOLDOUT_COMPARE.summary.trained_invalid_rate * 100,
+  },
+  {
+    metric: 'Avg rounds',
+    baseline: HOLDOUT_COMPARE.summary.baseline_avg_rounds,
+    trained: HOLDOUT_COMPARE.summary.trained_avg_rounds,
+  },
+];
+
+const checkpointChart = LIVE_CHECKPOINTS.map((checkpoint) => ({
+  label: checkpoint.label,
+  reward: Number(checkpoint.averageReward.toFixed(3)),
+  agreementPercent: Number((checkpoint.agreementRate * 100).toFixed(1)),
+  rounds: Number(checkpoint.averageRounds.toFixed(2)),
+}));
+
+export default function TrainingPage() {
+  const latestCheckpoint = LIVE_CHECKPOINTS[LIVE_CHECKPOINTS.length - 1];
+
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 py-8">
+      <motion.div
+        className="mb-8 text-center"
+        initial={{ opacity: 0, y: -10 }}
+        animate={{ opacity: 1, y: 0 }}
+      >
+        <div className="mb-3 inline-flex items-center gap-2 rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary">
+          <GraduationCap className="h-4 w-4" />
+          Training Logs And Analysis
+        </div>
+        <h1 className="mb-2 text-3xl font-bold tracking-tight">Scientist And Lab Manager Training Status</h1>
+        <p className="mx-auto max-w-3xl text-muted-foreground">
+          This page is backed by the real ReplicaLab training artifacts already generated in the repo. It shows what
+          the training stack achieved, where it is still failing, and whether more training is needed before claiming
+          the agents are actually better.
+        </p>
+      </motion.div>
+
+      <motion.div
+        className="mb-6 grid gap-4 lg:grid-cols-4"
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.05 }}
+      >
+        <StatusCard
+          icon={<FileCode2 className="h-4 w-4" />}
+          title="Scientist preview"
+          value={`${SCIENTIST_PREVIEW_ARTIFACT.datasetSize} prompts`}
+          detail={`${SCIENTIST_PREVIEW_ARTIFACT.modelName} · max steps ${SCIENTIST_PREVIEW_ARTIFACT.config.maxSteps}`}
+        />
+        <StatusCard
+          icon={<FlaskConical className="h-4 w-4" />}
+          title="Lab Manager preview"
+          value={`${LAB_MANAGER_PREVIEW_ARTIFACT.datasetSize} samples`}
+          detail={`${LAB_MANAGER_PREVIEW_ARTIFACT.modelName} · ${LAB_MANAGER_PREVIEW_ARTIFACT.config.numTrainEpochs} epoch preview`}
+        />
+        <StatusCard
+          icon={<Gauge className="h-4 w-4" />}
+          title="Latest live RL checkpoint"
+          value={formatReward(latestCheckpoint.averageReward)}
+          detail={`${formatScore(latestCheckpoint.agreementRate)} agreement at artifact step ${latestCheckpoint.artifactStep}`}
+        />
+        <StatusCard
+          icon={<AlertTriangle className="h-4 w-4" />}
+          title="Do we need more training?"
+          value="Yes"
+          detail="Hold-out compare still favors baseline."
+          tone="warn"
+        />
+      </motion.div>
+
+      <motion.div
+        className="mb-6 grid gap-4 lg:grid-cols-2"
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+      >
+        <ChartCard
+          title="Live RL checkpoint progression"
+          subtitle="Real checkpoint summaries from the ART/OpenEnv scientist run."
+        >
+          <div className="h-72">
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart data={checkpointChart}>
+                <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border)" />
+                <XAxis dataKey="label" tick={{ fontSize: 11 }} />
+                <YAxis yAxisId="left" tick={{ fontSize: 11 }} />
+                <YAxis
+                  yAxisId="right"
+                  orientation="right"
+                  tick={{ fontSize: 11 }}
+                  tickFormatter={(value) => `${value}%`}
+                />
+                <Tooltip />
+                <Legend wrapperStyle={{ fontSize: '12px' }} />
+                <Line yAxisId="left" type="monotone" dataKey="reward" stroke="var(--color-primary)" strokeWidth={2.5} name="Avg reward" />
+                <Line yAxisId="right" type="monotone" dataKey="agreementPercent" stroke="var(--color-lab-manager)" strokeWidth={2.5} name="Agreement %" />
+                <Line yAxisId="left" type="monotone" dataKey="rounds" stroke="var(--color-judge)" strokeWidth={2} name="Avg rounds" />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        </ChartCard>
+
+        <ChartCard
+          title="Hold-out compare"
+          subtitle="Real seeded comparison between the deterministic baseline and the current trained scientist."
+        >
+          <div className="h-72">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={compareBars}>
+                <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border)" />
+                <XAxis dataKey="metric" tick={{ fontSize: 11 }} />
+                <YAxis tick={{ fontSize: 11 }} />
+                <Tooltip />
+                <Legend wrapperStyle={{ fontSize: '12px' }} />
+                <Bar dataKey="baseline" fill="var(--color-lab-manager)" radius={[6, 6, 0, 0]} name="Baseline" />
+                <Bar dataKey="trained" fill="var(--color-destructive)" radius={[6, 6, 0, 0]} name="Trained" />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </ChartCard>
+      </motion.div>
+
+      <motion.div
+        className="mb-6 grid gap-4 lg:grid-cols-[1.35fr_1fr]"
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.16 }}
+      >
+        <div className="rounded-xl border border-border bg-card p-5">
+          <div className="mb-4 flex items-center gap-2">
+            <TerminalSquare className="h-4 w-4 text-primary" />
+            <h2 className="text-base font-semibold">Training log highlights</h2>
+          </div>
+          <div className="space-y-3">
+            {TRAINING_LOG_ROWS.map((row) => (
+              <div key={row.label} className="rounded-lg border border-border bg-muted/30 p-3">
+                <div className="flex flex-wrap items-center gap-2 text-[11px] font-medium">
+                  <span className="rounded-full bg-background px-2 py-1 text-primary">step {row.trainingStep}</span>
+                  <span className="rounded-full bg-background px-2 py-1 text-primary">seed {row.seed}</span>
+                  <span className={cn(
+                    'rounded-full px-2 py-1',
+                    row.verdict === 'accept' ? 'bg-lab-manager/10 text-lab-manager' : 'bg-destructive/10 text-destructive',
+                  )}>
+                    {row.verdict ?? 'no verdict'}
+                  </span>
+                </div>
+                <div className="mt-2 font-medium">{row.paperTitle}</div>
+                <div className="mt-2 grid gap-2 text-xs text-muted-foreground sm:grid-cols-4">
+                  <span>reward {formatReward(row.reward)}</span>
+                  <span>rounds {row.roundsUsed}</span>
+                  <span>invalid {row.invalidActionCount}</span>
+                  <span>parse {row.parseErrorCount}</span>
+                </div>
+                <p className="mt-2 text-xs text-muted-foreground">{row.note}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <SummaryCard
+            title="What we achieved"
+            icon={<CheckCircle2 className="h-4 w-4" />}
+            items={TRAINING_ASSESSMENT.achieved}
+            tone="good"
+          />
+          <SummaryCard
+            title="Why the current model still fails"
+            icon={<BrainCircuit className="h-4 w-4" />}
+            items={TRAINING_ASSESSMENT.gaps}
+            tone="warn"
+          />
+          <SummaryCard
+            title="What to improve next"
+            icon={<Wrench className="h-4 w-4" />}
+            items={TRAINING_ASSESSMENT.improvements}
+            tone="neutral"
+          />
+        </div>
+      </motion.div>
+
+      <motion.div
+        className="grid gap-4 lg:grid-cols-3"
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.22 }}
+      >
+        <InfoPanel
+          title="Local deterministic baseline"
+          lines={[
+            `${LOCAL_BASELINE_SUMMARY.episodeCount} episodes across all three scenario families`,
+            `Average reward ${formatReward(LOCAL_BASELINE_SUMMARY.averageReward)}`,
+            `Agreement ${formatScore(LOCAL_BASELINE_SUMMARY.agreementRate)}`,
+            `Average rounds ${LOCAL_BASELINE_SUMMARY.averageRounds.toFixed(1)}`,
+          ]}
+        />
+        <InfoPanel
+          title="Scientist run config"
+          lines={[
+            SCIENTIST_PREVIEW_ARTIFACT.modelName,
+            `LoRA rank ${SCIENTIST_PREVIEW_ARTIFACT.config.loraRank}`,
+            `Max seq length ${SCIENTIST_PREVIEW_ARTIFACT.config.maxSeqLength}`,
+            `Learning rate ${SCIENTIST_PREVIEW_ARTIFACT.config.learningRate}`,
+          ]}
+        />
+        <InfoPanel
+          title="Lab Manager status"
+          lines={[
+            `Preview dataset ${LAB_MANAGER_PREVIEW_ARTIFACT.datasetSize} samples`,
+            `Evidence pack ${LAB_MANAGER_PREVIEW_ARTIFACT.evidencePackVersion}`,
+            'Preview artifact exists, but no live evaluated SFT adapter is shown in the demo yet',
+            'Next step is a real trained-plus-evaluated Lab Manager run',
+          ]}
+        />
+      </motion.div>
+    </div>
+  );
+}
+
+function StatusCard({
+  icon,
+  title,
+  value,
+  detail,
+  tone = 'neutral',
+}: {
+  icon: ReactNode;
+  title: string;
+  value: string;
+  detail: string;
+  tone?: 'neutral' | 'warn';
+}) {
+  return (
+    <div className={cn(
+      'rounded-xl border bg-card p-4',
+      tone === 'warn' ? 'border-judge/30' : 'border-border',
+    )}>
+      <div className="mb-2 flex items-center gap-2 text-sm font-medium text-muted-foreground">
+        {icon}
+        {title}
+      </div>
+      <div className={cn('text-2xl font-bold', tone === 'warn' ? 'text-judge' : 'text-foreground')}>
+        {value}
+      </div>
+      <p className="mt-1 text-sm text-muted-foreground">{detail}</p>
+    </div>
+  );
+}
+
+function ChartCard({
+  title,
+  subtitle,
+  children,
+}: {
+  title: string;
+  subtitle: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="rounded-xl border border-border bg-card p-5">
+      <h2 className="text-base font-semibold">{title}</h2>
+      <p className="mt-1 text-sm text-muted-foreground">{subtitle}</p>
+      <div className="mt-4">{children}</div>
+    </div>
+  );
+}
+
+function SummaryCard({
+  title,
+  icon,
+  items,
+  tone,
+}: {
+  title: string;
+  icon: ReactNode;
+  items: string[];
+  tone: 'good' | 'warn' | 'neutral';
+}) {
+  return (
+    <div className={cn(
+      'rounded-xl border bg-card p-4',
+      tone === 'good' && 'border-lab-manager/30',
+      tone === 'warn' && 'border-judge/30',
+      tone === 'neutral' && 'border-border',
+    )}>
+      <div className="mb-3 flex items-center gap-2 text-sm font-semibold">
+        {icon}
+        {title}
+      </div>
+      <div className="space-y-2">
+        {items.map((item) => (
+          <div key={item} className="rounded-lg border border-border bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
+            {item}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function InfoPanel({ title, lines }: { title: string; lines: string[] }) {
+  return (
+    <div className="rounded-xl border border-border bg-card p-4">
+      <h2 className="text-sm font-semibold">{title}</h2>
+      <div className="mt-3 space-y-2">
+        {lines.map((line) => (
+          <div key={line} className="rounded-lg border border-border bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
+            {line}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/types/index.ts

@@ -3,6 +3,7 @@ export type LabManagerActionType = 'report_feasibility' | 'suggest_alternative'
 export type Difficulty = 'easy' | 'medium' | 'hard';
 export type ScenarioTemplate = 'math_reasoning' | 'ml_benchmark' | 'finance_trading';
 export type Role = 'scientist' | 'lab_manager' | 'judge' | 'system';
+export type DemoCase = 'fast-agreement' | 'learning-opportunity' | 'no-agreement';
 
 // --- Backend-aligned action contracts ---
 
@@ -103,6 +104,21 @@ export interface JudgeAudit {
   score_breakdown: ScoreBreakdown;
 }
 
+export interface EpisodeStepTrace {
+  round: number;
+  reward: number;
+  cumulative_reward: number;
+  action_type: string;
+  scientist_message: string;
+  lab_manager_action_type?: string;
+  lab_manager_message?: string;
+  step_reward_components: Record<string, number>;
+  protocol: Protocol | null;
+  oracle_round_score?: Record<string, unknown> | null;
+  oracle_post_mortem?: Record<string, unknown> | null;
+  oracle_event?: Record<string, unknown> | null;
+}
+
 // --- Frontend episode state (assembled from backend responses) ---
 
 export interface EpisodeState {
@@ -120,6 +136,9 @@ export interface EpisodeState {
   conversation: NegotiationMessage[];
   scores: ScoreBreakdown | null;
   judge_audit: JudgeAudit | null;
+  cumulative_reward: number;
+  step_history: EpisodeStepTrace[];
+  demo_case?: DemoCase;
 }
 
 export interface ResetParams {
@@ -190,8 +209,12 @@ export interface BackendStepInfo {
   verdict: string | null;
   top_failure_reasons: string[];
   round: number;
-  stub: boolean;
   episode_id: string;
+  step_reward_components?: Record<string, number>;
+  cumulative_reward?: number;
+  oracle_round_score?: Record<string, unknown> | null;
+  oracle_post_mortem?: Record<string, unknown> | null;
+  oracle_event?: Record<string, unknown> | null;
 }
 
 export interface BackendStepResult {

scripts/build_demo_video.py

@@ -0,0 +1,476 @@
+from __future__ import annotations
+
+import json
+import os
+import shutil
+import subprocess
+import sys
+import textwrap
+import time
+import urllib.parse
+import urllib.request
+from dataclasses import dataclass
+from pathlib import Path
+from typing import Iterable
+
+from PIL import Image, ImageDraw, ImageFont, ImageOps
+from selenium import webdriver
+from selenium.common.exceptions import TimeoutException
+from selenium.webdriver.chrome.options import Options
+from selenium.webdriver.common.by import By
+from selenium.webdriver.support.ui import WebDriverWait
+
+
+ROOT = Path(__file__).resolve().parents[1]
+OUTPUT_DIR = ROOT / "replicalab" / "outputs" / "demo_video"
+SCREENS_DIR = OUTPUT_DIR / "screens"
+SLIDES_DIR = OUTPUT_DIR / "slides"
+AUDIO_DIR = OUTPUT_DIR / "audio"
+TEXT_DIR = OUTPUT_DIR / "text"
+CHROME_PATH = Path(r"C:\Program Files\Google\Chrome\Application\chrome.exe")
+BASE_URL = "http://127.0.0.1:7860"
+ONBOARDING_KEY = "replicalab-onboarded"
+THEME_KEY = "replicalab-theme"
+VIDEO_SIZE = (1920, 1080)
+NARRATION = (
+    "ReplicaLab starts from a research paper and turns it into a seeded replication benchmark. "
+    "The Scientist proposes a protocol, the Lab Manager enforces budget, tools, and scheduling, "
+    "and a deterministic Judge scores rigor, feasibility, and fidelity. In our first scenario, "
+    "the agents agree immediately, so the paper looks replicable in this lab. In the second scenario, "
+    "they negotiate across all six rounds, which creates a rich reinforcement learning signal. "
+    "In the third, they never resolve the blockers, so the system rejects the paper for the current setup. "
+    "Because every outcome is scored deterministically, we can train the Scientist with Unsloth and TRL, "
+    "compare baseline versus trained runs, inspect real logs, and see exactly where more learning is still needed. "
+    "The training page is intentionally honest: the live run reached positive rewards, but the held-out compare still "
+    "shows that the trained Scientist has not beaten the deterministic baseline yet."
+)
+
+
+@dataclass(frozen=True)
+class Scene:
+    id: str
+    url: str
+    title: str
+    subtitle: str
+    duration: float
+    expected_text: str | None = None
+
+
+SCENES: tuple[Scene, ...] = (
+    Scene(
+        id="dashboard",
+        url=f"{BASE_URL}/",
+        title="Paper to benchmark",
+        subtitle="ReplicaLab turns a paper into a seeded replication benchmark.",
+        duration=8.0,
+        expected_text="ReplicaLab",
+    ),
+    Scene(
+        id="fast_agreement",
+        url=f"{BASE_URL}/episode?template=ml_benchmark&difficulty=medium&seed=101&demo=1&autoplay=1&demoCase=fast-agreement",
+        title="Scenario 1: first-round agreement",
+        subtitle="The agents converge quickly and the paper scores as a strong replication candidate.",
+        duration=11.0,
+        expected_text="Completed: First-round agreement",
+    ),
+    Scene(
+        id="learning_opportunity",
+        url=f"{BASE_URL}/episode?template=ml_benchmark&difficulty=medium&seed=202&demo=1&autoplay=1&demoCase=learning-opportunity",
+        title="Scenario 2: multi-round learning",
+        subtitle="Six rounds of disagreement create a rich RL signal before the final acceptance.",
+        duration=13.0,
+        expected_text="Completed: Multi-round learning opportunity",
+    ),
+    Scene(
+        id="no_agreement",
+        url=f"{BASE_URL}/episode?template=ml_benchmark&difficulty=medium&seed=303&demo=1&autoplay=1&demoCase=no-agreement",
+        title="Scenario 3: no agreement",
+        subtitle="The blockers remain unresolved, so the system rejects replication for this setup.",
+        duration=12.0,
+        expected_text="Completed: No agreement reached",
+    ),
+    Scene(
+        id="training",
+        url=f"{BASE_URL}/training",
+        title="Artifact-backed training review",
+        subtitle="The training page shows real checkpoints, real compare metrics, and what still needs improvement.",
+        duration=16.0,
+        expected_text="Training Logs And Analysis",
+    ),
+)
+
+
+def load_env_value(key: str) -> str | None:
+    if os.getenv(key):
+        return os.getenv(key)
+
+    for path in (ROOT / ".env", ROOT / ".env.local", ROOT / "frontend" / ".env"):
+        if not path.exists():
+            continue
+        for raw in path.read_text(encoding="utf-8").splitlines():
+            line = raw.strip()
+            if not line or line.startswith("#") or "=" not in line:
+                continue
+            env_key, env_value = line.split("=", 1)
+            if env_key.strip() == key:
+                return env_value.strip().strip('"').strip("'")
+    return None
+
+
+def ensure_backend() -> None:
+    try:
+        with urllib.request.urlopen(f"{BASE_URL}/health", timeout=10) as response:
+            data = json.loads(response.read().decode("utf-8"))
+    except Exception as exc:  # pragma: no cover - user-facing failure
+        raise RuntimeError(
+            f"Backend unavailable at {BASE_URL}. Start it with "
+            "\"python -m uvicorn server.app:app --host 127.0.0.1 --port 7860\"."
+        ) from exc
+    if data.get("status") != "ok":
+        raise RuntimeError(f"Unexpected backend health payload: {data}")
+
+
+def ensure_output_dirs() -> None:
+    for directory in (OUTPUT_DIR, SCREENS_DIR, SLIDES_DIR, AUDIO_DIR, TEXT_DIR):
+        directory.mkdir(parents=True, exist_ok=True)
+
+
+def get_font(size: int, bold: bool = False) -> ImageFont.FreeTypeFont | ImageFont.ImageFont:
+    candidates = [
+        Path(r"C:\Windows\Fonts\segoeuib.ttf" if bold else r"C:\Windows\Fonts\segoeui.ttf"),
+        Path(r"C:\Windows\Fonts\arialbd.ttf" if bold else r"C:\Windows\Fonts\arial.ttf"),
+    ]
+    for candidate in candidates:
+        if candidate.exists():
+            return ImageFont.truetype(str(candidate), size=size)
+    return ImageFont.load_default()
+
+
+def pick_voice(api_key: str, preferred_voice_id: str | None) -> str:
+    if preferred_voice_id:
+        return preferred_voice_id
+
+    request = urllib.request.Request(
+        "https://api.elevenlabs.io/v1/voices",
+        headers={"xi-api-key": api_key, "Accept": "application/json"},
+        method="GET",
+    )
+    with urllib.request.urlopen(request, timeout=30) as response:
+        payload = json.loads(response.read().decode("utf-8"))
+
+    voices = payload.get("voices", [])
+    if not voices:
+        raise RuntimeError("ElevenLabs returned no voices for the current API key.")
+
+    preferred_names = ("Rachel", "Aria", "Sarah", "Charlie", "George")
+    for name in preferred_names:
+        for voice in voices:
+            if voice.get("name") == name and voice.get("voice_id"):
+                return voice["voice_id"]
+    for voice in voices:
+        if voice.get("voice_id"):
+            return voice["voice_id"]
+    raise RuntimeError("No usable ElevenLabs voice_id found.")
+
+
+def synthesize_voiceover(api_key: str, voice_id: str, text: str, output_path: Path) -> None:
+    payload = {
+        "text": text,
+        "model_id": "eleven_multilingual_v2",
+        "voice_settings": {
+            "stability": 0.4,
+            "similarity_boost": 0.8,
+            "style": 0.25,
+            "use_speaker_boost": True,
+        },
+    }
+    body = json.dumps(payload).encode("utf-8")
+    urls = (
+        f"https://api.elevenlabs.io/v1/text-to-speech/{voice_id}?output_format=mp3_44100_128",
+        f"https://api.elevenlabs.io/v1/text-to-speech/{voice_id}",
+    )
+
+    last_error: Exception | None = None
+    for url in urls:
+        request = urllib.request.Request(
+            url,
+            data=body,
+            headers={
+                "xi-api-key": api_key,
+                "Accept": "audio/mpeg",
+                "Content-Type": "application/json",
+            },
+            method="POST",
+        )
+        try:
+            with urllib.request.urlopen(request, timeout=90) as response:
+                audio = response.read()
+            if not audio:
+                raise RuntimeError("ElevenLabs returned an empty audio payload.")
+            output_path.write_bytes(audio)
+            return
+        except Exception as exc:  # pragma: no cover - fallback path
+            last_error = exc
+    raise RuntimeError(f"Failed to synthesize ElevenLabs audio: {last_error}")
+
+
+def build_driver() -> webdriver.Chrome:
+    options = Options()
+    options.binary_location = str(CHROME_PATH)
+    options.add_argument("--headless=new")
+    options.add_argument("--disable-gpu")
+    options.add_argument("--window-size=1600,1200")
+    options.add_argument("--force-device-scale-factor=1")
+    options.add_argument("--hide-scrollbars")
+    options.add_argument("--mute-audio")
+    options.add_argument("--no-first-run")
+    options.add_argument("--no-default-browser-check")
+    options.add_argument(f"--user-data-dir={OUTPUT_DIR / 'chrome_profile'}")
+    driver = webdriver.Chrome(options=options)
+    driver.set_window_size(1600, 1200)
+    return driver
+
+
+def capture_screens() -> list[Path]:
+    driver = build_driver()
+    files: list[Path] = []
+    try:
+        driver.get(BASE_URL)
+        WebDriverWait(driver, 20).until(
+            lambda d: d.execute_script("return document.readyState") == "complete"
+        )
+        driver.execute_script(
+            "window.localStorage.setItem(arguments[0], '1');"
+            "window.localStorage.setItem(arguments[1], 'light');",
+            ONBOARDING_KEY,
+            THEME_KEY,
+        )
+
+        for scene in SCENES:
+            driver.get(scene.url)
+            WebDriverWait(driver, 30).until(
+                lambda d: d.execute_script("return document.readyState") == "complete"
+            )
+            if scene.expected_text:
+                try:
+                    WebDriverWait(driver, 35).until(
+                        lambda d: scene.expected_text in d.page_source
+                    )
+                except TimeoutException:
+                    pass
+            time.sleep(1.5)
+            output = SCREENS_DIR / f"{scene.id}.png"
+            driver.save_screenshot(str(output))
+            files.append(output)
+    finally:
+        driver.quit()
+    return files
+
+
+def wrap_text(draw: ImageDraw.ImageDraw, text: str, font: ImageFont.ImageFont, width: int) -> list[str]:
+    words = text.split()
+    lines: list[str] = []
+    current = ""
+    for word in words:
+        candidate = f"{current} {word}".strip()
+        if draw.textlength(candidate, font=font) <= width:
+            current = candidate
+        else:
+            if current:
+                lines.append(current)
+            current = word
+    if current:
+        lines.append(current)
+    return lines
+
+
+def create_slides() -> list[Path]:
+    title_font = get_font(46, bold=True)
+    subtitle_font = get_font(28)
+    badge_font = get_font(24, bold=True)
+    output_paths: list[Path] = []
+
+    for scene in SCENES:
+        raw_image = Image.open(SCREENS_DIR / f"{scene.id}.png").convert("RGB")
+        canvas = ImageOps.fit(raw_image, VIDEO_SIZE, method=Image.Resampling.LANCZOS)
+        overlay = Image.new("RGBA", VIDEO_SIZE, (0, 0, 0, 0))
+        draw = ImageDraw.Draw(overlay)
+        draw.rounded_rectangle((60, 780, 1860, 1020), radius=36, fill=(7, 13, 36, 190))
+        draw.rounded_rectangle((60, 56, 520, 116), radius=30, fill=(99, 102, 241, 220))
+        draw.text((92, 72), "ReplicaLab - 60 second demo", font=badge_font, fill=(255, 255, 255))
+        draw.text((96, 820), scene.title, font=title_font, fill=(255, 255, 255))
+        subtitle_lines = wrap_text(draw, scene.subtitle, subtitle_font, width=1620)
+        y = 888
+        for line in subtitle_lines:
+            draw.text((96, y), line, font=subtitle_font, fill=(226, 232, 240))
+            y += 40
+
+        final = Image.alpha_composite(canvas.convert("RGBA"), overlay).convert("RGB")
+        slide_path = SLIDES_DIR / f"{scene.id}.png"
+        final.save(slide_path, quality=95)
+        output_paths.append(slide_path)
+    return output_paths
+
+
+def write_concat_file(paths: Iterable[Path]) -> Path:
+    concat_path = TEXT_DIR / "slides.txt"
+    lines: list[str] = []
+    ordered = list(paths)
+    for scene, path in zip(SCENES, ordered):
+        lines.append(f"file '{path.as_posix()}'")
+        lines.append(f"duration {scene.duration:.2f}")
+    lines.append(f"file '{ordered[-1].as_posix()}'")
+    concat_path.write_text("\n".join(lines), encoding="utf-8")
+    return concat_path
+
+
+def write_script_assets() -> None:
+    (TEXT_DIR / "voiceover.txt").write_text(NARRATION, encoding="utf-8")
+    (TEXT_DIR / "shot_list.json").write_text(
+        json.dumps(
+            [
+                {
+                    "id": scene.id,
+                    "title": scene.title,
+                    "subtitle": scene.subtitle,
+                    "url": scene.url,
+                    "duration_seconds": scene.duration,
+                }
+                for scene in SCENES
+            ],
+            indent=2,
+        ),
+        encoding="utf-8",
+    )
+
+
+def seconds_to_srt(value: float) -> str:
+    millis = int(round(value * 1000))
+    hours, millis = divmod(millis, 3_600_000)
+    minutes, millis = divmod(millis, 60_000)
+    seconds, millis = divmod(millis, 1000)
+    return f"{hours:02}:{minutes:02}:{seconds:02},{millis:03}"
+
+
+def write_srt() -> None:
+    lines = wrap_text(ImageDraw.Draw(Image.new("RGB", (1, 1))), NARRATION, get_font(30), 72 * 18)
+    segment_count = max(1, len(lines))
+    total_duration = sum(scene.duration for scene in SCENES)
+    step = total_duration / segment_count
+    chunks = []
+    start = 0.0
+    for index, line in enumerate(lines, start=1):
+        end = min(total_duration, start + step)
+        chunks.append(f"{index}\n{seconds_to_srt(start)} --> {seconds_to_srt(end)}\n{line}\n")
+        start = end
+    (TEXT_DIR / "voiceover.srt").write_text("\n".join(chunks), encoding="utf-8")
+
+
+def ffprobe_duration(path: Path) -> float:
+    result = subprocess.run(
+        [
+            "ffprobe",
+            "-v",
+            "error",
+            "-show_entries",
+            "format=duration",
+            "-of",
+            "default=noprint_wrappers=1:nokey=1",
+            str(path),
+        ],
+        check=True,
+        capture_output=True,
+        text=True,
+    )
+    return float(result.stdout.strip())
+
+
+def run_ffmpeg(audio_path: Path, concat_path: Path) -> Path:
+    silent_video = OUTPUT_DIR / "replicalab_demo_60s_silent.mp4"
+    final_video = OUTPUT_DIR / "replicalab_demo_60s.mp4"
+
+    subprocess.run(
+        [
+            "ffmpeg",
+            "-y",
+            "-f",
+            "concat",
+            "-safe",
+            "0",
+            "-i",
+            str(concat_path),
+            "-vf",
+            "fps=30,format=yuv420p",
+            "-c:v",
+            "libx264",
+            "-pix_fmt",
+            "yuv420p",
+            str(silent_video),
+        ],
+        check=True,
+    )
+    subprocess.run(
+        [
+            "ffmpeg",
+            "-y",
+            "-i",
+            str(silent_video),
+            "-i",
+            str(audio_path),
+            "-c:v",
+            "copy",
+            "-c:a",
+            "aac",
+            "-b:a",
+            "192k",
+            "-shortest",
+            str(final_video),
+        ],
+        check=True,
+    )
+    return final_video
+
+
+def main() -> int:
+    ensure_backend()
+    ensure_output_dirs()
+    write_script_assets()
+    write_srt()
+
+    api_key = load_env_value("ELEVENLABS_API_KEY")
+    if not api_key:
+        raise RuntimeError("ELEVENLABS_API_KEY was not found in the environment or .env file.")
+
+    voice_id = pick_voice(api_key, load_env_value("ELEVENLABS_VOICE_ID"))
+    audio_path = AUDIO_DIR / "voiceover.mp3"
+    synthesize_voiceover(api_key, voice_id, NARRATION, audio_path)
+
+    capture_screens()
+    slides = create_slides()
+    concat_path = write_concat_file(slides)
+    final_video = run_ffmpeg(audio_path, concat_path)
+
+    metadata = {
+        "voice_id": voice_id,
+        "audio_duration_seconds": round(ffprobe_duration(audio_path), 3),
+        "video_path": str(final_video),
+        "slides": [str(path) for path in slides],
+    }
+    (TEXT_DIR / "build_metadata.json").write_text(json.dumps(metadata, indent=2), encoding="utf-8")
+
+    print(textwrap.dedent(f"""
+    Built demo assets:
+      audio: {audio_path}
+      video: {final_video}
+      script: {TEXT_DIR / 'voiceover.txt'}
+      subtitles: {TEXT_DIR / 'voiceover.srt'}
+    """).strip())
+    return 0
+
+
+if __name__ == "__main__":
+    try:
+        raise SystemExit(main())
+    except Exception as exc:  # pragma: no cover - CLI path
+        print(f"ERROR: {exc}", file=sys.stderr)
+        raise