Round 5b: frontend wiring — live progress, pause/resume, role overrides, doc upload, constraint manager

Two parallel streams merged cleanly via separate banners in api.ts:

LIVE UX (live-ux teammate):
- LiveProgress.tsx — SSE-driven step rail (Deliberation → Critic →
Pre-mortem → Adjudication → Evaluator → World update → Next briefing),
live deliberation feed, verdict cards coloured by outcome, rAF-debounced
cost meter, paused banner, error toast, 2s reconnect-after-double-fail.
- GameView replaces the fake-ticker terminal with <LiveProgress> while
advance is in flight or status==paused. Pause button mid-advance,
Resume button when paused. Handles /advance status="paused" the same
as the SSE paused event.
- api.ts: pauseGame, resumeGame, streamUrl, PhaseEvent union.
- frontend/scripts/sse-smoke.mjs + README — stdlib-fetch SSE smoke client.

FORMS (forms teammate):
- NewGame.tsx — collapsible "Per-role model routing" panel iterating
models.roles with fallback list. Role overrides flow through createGame.
- SetupCase.tsx — drag-and-drop "Grounding documents" zone (10 docs cap,
25 MB each, pdf/docx/md/txt). Inline error rendering, refetch after
add/remove.
- GameView.tsx — collapsed "Hard constraints" panel under MetricStrip
with HARD/SOFT and SCENARIO/DOCUMENT/MANUAL badges, inline add form,
forced confirmation for non-manual deletes. Preflight checkAction
before submitAction; 409 detail.violations rendered inline above
submit and disable the button.
- api.ts: role_model_overrides on createGame, listConstraints, addConstraint,
deleteConstraint, checkAction, listDocuments, uploadDocument,
deleteDocument; ModelsResponse.roles.

Backend untouched. 288 tests pass; frontend npm run build succeeds
(293 modules, 0 TS errors).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/README.md

@@ -43,6 +43,7 @@ src/
   App.tsx                   # hash router + shell
   main.tsx                  # entry
   components/Shell.tsx      # TopBar, PhaseRail, Dossier, Panel, Spinner
+  components/LiveProgress.tsx  # Round 5b — SSE-driven in-turn UX (step rail, deliberation feed, verdict cards, cost meter)
   screens/GamesList.tsx     # GET /games + GET /scenarios
   screens/NewGame.tsx       # POST /games
   screens/GameView.tsx      # GET /state, /briefing; POST /recon, /actions, /advance
@@ -60,7 +61,10 @@ src/
 | Game view · briefing| `GET /games/{id}/briefing`, `GET /games/{id}/state` | loaded together on mount             |
 | Game view · recon   | `POST /games/{id}/recon`                        | consumes 1 of 3 budget                   |
 | Game view · action  | `POST /games/{id}/actions`                      | 3 anchors required                       |
-| Game view · advance | `POST /games/{id}/advance`                      | 2–5 min; live terminal polled via ticker |
+| Game view · advance | `POST /games/{id}/advance`                      | 2–5 min; SSE-driven step rail + cost meter via `LiveProgress` |
+| Game view · pause   | `POST /games/{id}/pause`                        | mid-turn checkpoint; confirmed via `paused` SSE event |
+| Game view · resume  | `POST /games/{id}/resume`                       | re-enters `loop.advance`; same shape as advance |
+| Game view · stream  | `GET /games/{id}/stream` (SSE)                  | `LiveProgress` subscribes; `PhaseEvent` envelopes per `frontend/CONTRACT.md` |
 | Debrief             | `GET /games/{id}/debrief`                       | markdown                                 |
 
 ## Error handling
@@ -75,6 +79,21 @@ npm run preview  # serve dist on :4173
 npm run lint     # tsc --noEmit
 ```
 
+## SSE smoke test (Round 5b)
+
+`scripts/sse-smoke.mjs` connects to `/games/<id>/stream` and prints each
+`PhaseEvent`'s kind + label as it lands — the same one-liner check the
+backend's `wargame stream` CLI provides. Useful for sanity-checking the
+backend feed without spinning up the React app.
+
+```bash
+node scripts/sse-smoke.mjs <game-id>                       # default backend on :8080
+node scripts/sse-smoke.mjs <game-id> http://host:port/api  # override base URL
+```
+
+The script falls back to a stdlib `fetch` parser if the optional
+`eventsource` polyfill isn't installed.
+
 ## Design system
 
 Tokens live in `src/styles/colors_and_type.css`. The visual language is inherited from the prototype: paper cream canvas (`--paper`), oxblood accent (`--oxblood`), Fraunces serif for headlines, Inter Tight for body, JetBrains Mono for metadata. Class names are prefixed `nh-` (Norhard) for isolation.

frontend/scripts/sse-smoke.mjs

@@ -0,0 +1,88 @@
+#!/usr/bin/env node
+// sse-smoke.mjs — connect to /games/<id>/stream and print every event's
+// kind + label as it lands. Mirrors the backend `wargame stream` CLI smoke.
+//
+// Usage:
+//   node scripts/sse-smoke.mjs <game-id> [base-url]
+//
+// `base-url` defaults to http://localhost:8080/api. Press Ctrl+C to exit.
+
+const [, , gameId, rawBase] = process.argv;
+if (!gameId) {
+  console.error('usage: node scripts/sse-smoke.mjs <game-id> [base-url]');
+  process.exit(1);
+}
+const base = (rawBase ?? 'http://localhost:8080/api').replace(/\/$/, '');
+const url = `${base}/games/${gameId}/stream`;
+console.error(`# connecting to ${url}`);
+
+// Prefer the optional `eventsource` polyfill if it's already installed
+// alongside the Vite dev deps. Otherwise fall back to a raw fetch +
+// readable-stream parser — Node 18+ has streaming fetch built in.
+let useFetchFallback = true;
+try {
+  const mod = await import('eventsource');
+  globalThis.EventSource ??= mod.default ?? mod.EventSource ?? mod;
+  useFetchFallback = false;
+} catch {
+  // eventsource not installed — use raw fetch parser.
+}
+
+if (!useFetchFallback && typeof globalThis.EventSource === 'function') {
+  const es = new globalThis.EventSource(url);
+  const KINDS = [
+    'phase_started', 'phase_completed', 'deliberation_complete',
+    'critic_complete', 'premortem_complete', 'verdict_complete',
+    'evaluator_complete', 'world_updated', 'briefing_ready',
+    'usage_tick', 'paused', 'resumed', 'error',
+  ];
+  for (const k of KINDS) {
+    es.addEventListener(k, (e) => {
+      try {
+        const ev = JSON.parse(e.data);
+        console.log(`${ev.kind.padEnd(22)} ${ev.label}`);
+      } catch (err) {
+        console.log(`${k.padEnd(22)} <unparseable: ${err.message}>`);
+      }
+    });
+  }
+  es.onerror = (e) => {
+    console.error('# stream error', e?.message ?? '');
+  };
+} else {
+  // Raw fetch + line-buffered SSE parser. Spec: events are separated by
+  // a blank line; each event has lines like `event: <kind>` and
+  // `data: <json>`. Comments start with `:`.
+  const res = await fetch(url, { headers: { Accept: 'text/event-stream' } });
+  if (!res.ok || !res.body) {
+    console.error(`# stream connect failed: ${res.status} ${res.statusText}`);
+    process.exit(2);
+  }
+  const decoder = new TextDecoder('utf-8');
+  let buffer = '';
+  let kind = '';
+  let dataLines = [];
+  for await (const chunk of res.body) {
+    buffer += decoder.decode(chunk, { stream: true });
+    let nl;
+    while ((nl = buffer.indexOf('\n')) !== -1) {
+      const line = buffer.slice(0, nl).replace(/\r$/, '');
+      buffer = buffer.slice(nl + 1);
+      if (line === '') {
+        if (kind && dataLines.length) {
+          try {
+            const ev = JSON.parse(dataLines.join('\n'));
+            console.log(`${kind.padEnd(22)} ${ev.label}`);
+          } catch (err) {
+            console.log(`${kind.padEnd(22)} <unparseable: ${err.message}>`);
+          }
+        }
+        kind = ''; dataLines = [];
+        continue;
+      }
+      if (line.startsWith(':')) continue;
+      if (line.startsWith('event:')) kind = line.slice(6).trim();
+      else if (line.startsWith('data:')) dataLines.push(line.slice(5).trimStart());
+    }
+  }
+}

frontend/src/api.ts

@@ -20,11 +20,21 @@ export const api = {
   listModels: () => req<ModelsResponse>('/models'),
   listAgents: (scenario_id: string) =>
     req<AgentsResponse>(`/scenarios/${scenario_id}/agents`),
-  createGame: (scenario_id: string, model?: string) =>
-    req<{ game_id: string; turn: number; briefing: Briefing }>(`/games`, {
+  createGame: (
+    scenario_id: string,
+    model?: string,
+    role_model_overrides?: Record<string, string>,
+  ) => {
+    const body: Record<string, unknown> = { scenario_id };
+    if (model) body.model = model;
+    if (role_model_overrides && Object.keys(role_model_overrides).length > 0) {
+      body.role_model_overrides = role_model_overrides;
+    }
+    return req<{ game_id: string; turn: number; briefing: Briefing }>(`/games`, {
       method: 'POST',
-      body: JSON.stringify(model ? { scenario_id, model } : { scenario_id }),
-    }),
+      body: JSON.stringify(body),
+    });
+  },
   getState: (id: string) => req<StateResponse>(`/games/${id}/state`),
   getBriefing: (id: string) => req<BriefingResponse>(`/games/${id}/briefing`),
   recon: (id: string, agent_id: string, question: string) =>
@@ -86,6 +96,58 @@ export const api = {
     req<ActionAcceptedResponse>(`/games/${game_id}/actions/coach/${session_id}/commit`, {
       method: 'POST',
     }),
+
+  // ---- forms (5b) ----
+  addConstraint: (game_id: string, body: HardConstraintInput) =>
+    req<HardConstraintListResponse>(`/games/${game_id}/constraints`, {
+      method: 'POST',
+      body: JSON.stringify(body),
+    }),
+  checkAction: (game_id: string, action: ActionRequest) =>
+    req<ConstraintCheckResponse>(`/games/${game_id}/check_action`, {
+      method: 'POST',
+      body: JSON.stringify(action),
+    }),
+  deleteConstraint: (game_id: string, constraint_id: string, force = false) =>
+    req<HardConstraintListResponse>(
+      `/games/${game_id}/constraints/${encodeURIComponent(constraint_id)}${force ? '?force=true' : ''}`,
+      { method: 'DELETE' },
+    ),
+  deleteDocument: (session_id: string, filename: string) =>
+    req<void>(
+      `/scenarios/setup/${session_id}/documents/${encodeURIComponent(filename)}`,
+      { method: 'DELETE' },
+    ),
+  listConstraints: (game_id: string) =>
+    req<HardConstraintListResponse>(`/games/${game_id}/constraints`),
+  listDocuments: (session_id: string) =>
+    req<DocumentListResponse>(`/scenarios/setup/${session_id}/documents`),
+  uploadDocument: (session_id: string, file: File) => {
+    const fd = new FormData();
+    fd.append('file', file);
+    // NOTE: don't set Content-Type — the browser fills in the multipart
+    // boundary. `req()` defaults to JSON, so we call fetch directly here.
+    return fetch(`${BASE}/scenarios/setup/${session_id}/documents`, {
+      method: 'POST',
+      body: fd,
+    }).then(async (res) => {
+      if (!res.ok) {
+        const body = await res.text().catch(() => '');
+        throw Object.assign(
+          new Error(`${res.status} ${res.statusText}: ${body}`),
+          { status: res.status },
+        );
+      }
+      return res.json() as Promise<UploadedDocument>;
+    });
+  },
+
+  // ---- live (5b) ----
+  pauseGame: (id: string) =>
+    req<StateResponse>(`/games/${id}/pause`, { method: 'POST' }),
+  resumeGame: (id: string) =>
+    req<AdvanceResponse>(`/games/${id}/resume`, { method: 'POST' }),
+  streamUrl: (id: string) => `${BASE}/games/${id}/stream`,
 };
 
 export type AnchorKind = 'prior_analogue' | 'stated_capability' | 'resource_committed';
@@ -95,7 +157,7 @@ export interface ActionAcceptedResponse { game_id: string; turn: number; action:
 export interface Scenario { scenario_id: string; company_name: string; rival_name: string; industry: string; player_role: string; agent_count: number }
 export interface GameSummary { id: string; scenario_id: string; turn: number; max_turns: number; status: 'active' | 'complete'; updated_at: string; llm_model?: string | null }
 export interface ModelInfo { id: string; display_name: string; provider: string }
-export interface ModelsResponse { models: ModelInfo[]; default: string }
+export interface ModelsResponse { models: ModelInfo[]; default: string; roles?: string[] }
 export interface AgentInfo { id: string; label: string; kind: string; posture: string }
 export interface AgentsResponse { scenario_id: string; agents: AgentInfo[] }
 export interface BriefingSection { heading: string; body: string; fog_of_war?: string | null }
@@ -116,6 +178,7 @@ export interface SetupSession {
   synthesized_brief: string | null;
   committed_scenario_id: string | null;
   messages: SetupMessage[];
+  doc_filenames?: string[];
 }
 export interface ScaffoldResponse {
   scenario_id: string;
@@ -194,3 +257,139 @@ export interface ActionCoachSession {
   committed: boolean;
   messages: CoachMessage[];
 }
+
+// ---- forms (5b) ----
+// Hard constraints + uploaded documents + check-action shapes (Round 4 backend).
+export type ConstraintSeverity = 'hard' | 'soft';
+export type ConstraintSource = 'scenario' | 'document' | 'manual';
+export interface HardConstraint {
+  id: string;
+  description: string;
+  rationale: string;
+  test_question: string;
+  severity: ConstraintSeverity;
+  source: ConstraintSource;
+  source_ref?: string | null;
+}
+export interface HardConstraintInput {
+  description: string;
+  rationale: string;
+  test_question: string;
+  severity?: ConstraintSeverity;
+  source_ref?: string | null;
+}
+export interface HardConstraintListResponse {
+  game_id: string;
+  constraints: HardConstraint[];
+}
+export interface ConstraintViolation {
+  constraint_id: string;
+  constraint_description: string;
+  reason: string;
+}
+export interface ConstraintCheckResult {
+  passes: boolean;
+  violations: ConstraintViolation[];
+}
+export interface ConstraintCheckResponse {
+  game_id: string;
+  result: ConstraintCheckResult;
+}
+export interface UploadedDocument {
+  filename: string;
+  bytes_stored: number;
+}
+export interface DocumentListResponse {
+  session_id: string;
+  documents: UploadedDocument[];
+}
+
+// ---- live (5b) ----
+// PhaseEvent — server-sent events that fire on the engine bus during an
+// advance. Discriminated by `kind`. Wire format documented in CONTRACT.md.
+export type PhaseEventKind =
+  | 'phase_started'
+  | 'phase_completed'
+  | 'deliberation_complete'
+  | 'critic_complete'
+  | 'premortem_complete'
+  | 'verdict_complete'
+  | 'evaluator_complete'
+  | 'world_updated'
+  | 'briefing_ready'
+  | 'usage_tick'
+  | 'paused'
+  | 'resumed'
+  | 'error';
+
+export type VerdictOutcome =
+  | 'effect_major'
+  | 'effect_minor'
+  | 'no_effect'
+  | 'backfires';
+
+interface PhaseEventBase {
+  game_id: string;
+  turn: number;
+  label: string;
+  at: string;
+  payload: Record<string, unknown> & { dropped?: number };
+}
+
+export type PhaseEvent =
+  | (PhaseEventBase & { kind: 'phase_started'; payload: { dropped?: number } })
+  | (PhaseEventBase & { kind: 'phase_completed'; payload: { dropped?: number } })
+  | (PhaseEventBase & {
+      kind: 'deliberation_complete';
+      payload: { agent_id: string; expects: string; fears: string; dropped?: number };
+    })
+  | (PhaseEventBase & {
+      kind: 'critic_complete';
+      payload: { count: number; issue_count: number; dropped?: number };
+    })
+  | (PhaseEventBase & {
+      kind: 'premortem_complete';
+      payload: { count: number; dropped?: number };
+    })
+  | (PhaseEventBase & {
+      kind: 'verdict_complete';
+      payload: {
+        actor: string;
+        plausibility: number;
+        outcome: VerdictOutcome;
+        dropped?: number;
+      };
+    })
+  | (PhaseEventBase & {
+      kind: 'evaluator_complete';
+      payload: { scored: number; dropped?: number };
+    })
+  | (PhaseEventBase & {
+      kind: 'world_updated';
+      payload: { media_tone: string; public_narrative: string; dropped?: number };
+    })
+  | (PhaseEventBase & {
+      kind: 'briefing_ready';
+      payload: { turn: number; dropped?: number };
+    })
+  | (PhaseEventBase & {
+      kind: 'usage_tick';
+      payload: {
+        cost_usd_so_far: number;
+        input_tokens_so_far: number;
+        output_tokens_so_far: number;
+        dropped?: number;
+      };
+    })
+  | (PhaseEventBase & {
+      kind: 'paused';
+      payload: { turn: number; dropped?: number };
+    })
+  | (PhaseEventBase & {
+      kind: 'resumed';
+      payload: { dropped?: number };
+    })
+  | (PhaseEventBase & {
+      kind: 'error';
+      payload: Record<string, unknown> & { dropped?: number };
+    });

frontend/src/components/LiveProgress.tsx

@@ -0,0 +1,376 @@
+import { useEffect, useRef, useState } from 'react';
+import { api, PhaseEvent, VerdictOutcome } from '../api';
+import { Spinner } from './Shell';
+
+// ---------------------------------------------------------------------------
+// LiveProgress — SSE-driven in-turn UX. Mounts an EventSource on the game's
+// `/stream` endpoint, drives a horizontal step rail, a deliberation feed,
+// verdict cards, and a live cost meter. Surfaces pause + briefing-ready
+// callbacks for the parent to react to.
+// ---------------------------------------------------------------------------
+
+type StepState = 'idle' | 'running' | 'done' | 'failed';
+
+interface Step {
+  key: string;
+  label: string;
+  // Backend `phase_started`/`phase_completed` `label` values that map to
+  // this rail step. Match is case-insensitive substring.
+  match: string[];
+}
+
+const STEPS: Step[] = [
+  { key: 'deliberation', label: 'Deliberation', match: ['deliberation'] },
+  { key: 'critic', label: 'Critic', match: ['critic'] },
+  { key: 'premortem', label: 'Pre-mortem', match: ['premortem', 'pre-mortem'] },
+  { key: 'adjudication', label: 'Adjudication', match: ['adjudication'] },
+  { key: 'evaluator', label: 'Evaluator', match: ['evaluator'] },
+  { key: 'world_update', label: 'World update', match: ['world_update', 'world update'] },
+  { key: 'next_briefing', label: 'Next briefing', match: ['briefing'] },
+];
+
+interface DeliberationRow {
+  id: string;
+  label: string;
+  expects: string;
+  fears: string;
+}
+
+interface VerdictCard {
+  id: string;
+  actor: string;
+  outcome: VerdictOutcome;
+  plausibility: number;
+}
+
+interface Props {
+  gameId: string;
+  onPaused?: () => void;
+  onBriefingReady?: (turn: number) => void;
+  onAdvanceComplete?: () => void;
+}
+
+export function LiveProgress({
+  gameId, onPaused, onBriefingReady, onAdvanceComplete,
+}: Props) {
+  // Phase rail state — keyed by Step.key.
+  const [stepStates, setStepStates] = useState<Record<string, StepState>>(
+    () => Object.fromEntries(STEPS.map((s) => [s.key, 'idle'])),
+  );
+  const [deliberations, setDeliberations] = useState<DeliberationRow[]>([]);
+  const [verdicts, setVerdicts] = useState<VerdictCard[]>([]);
+  const [pausedAt, setPausedAt] = useState<string | null>(null);
+  const [streamErr, setStreamErr] = useState<string | null>(null);
+
+  // Cost meter — debounced via rAF to avoid React thrash on bursty ticks.
+  const [cost, setCost] = useState<number>(0);
+  const pendingCostRef = useRef<number | null>(null);
+  const rafRef = useRef<number | null>(null);
+
+  // Reconnect bookkeeping.
+  const failedReconnectsRef = useRef(0);
+  const reconnectTimerRef = useRef<number | null>(null);
+  const sseRef = useRef<EventSource | null>(null);
+
+  // Track whether we've seen the "next briefing" arrive so we can fire
+  // onAdvanceComplete once both world_updated and briefing_ready have
+  // landed. Either signal alone is not enough — world_updated fires
+  // before the next briefing is generated.
+  const completionRef = useRef({ world: false, briefing: false });
+
+  // Keep the latest callback refs so we don't tear down + remount the
+  // EventSource every time the parent rerenders.
+  const onPausedRef = useRef(onPaused);
+  const onBriefingReadyRef = useRef(onBriefingReady);
+  const onAdvanceCompleteRef = useRef(onAdvanceComplete);
+  useEffect(() => { onPausedRef.current = onPaused; }, [onPaused]);
+  useEffect(() => { onBriefingReadyRef.current = onBriefingReady; }, [onBriefingReady]);
+  useEffect(() => { onAdvanceCompleteRef.current = onAdvanceComplete; }, [onAdvanceComplete]);
+
+  function applyCostTick(usd: number) {
+    pendingCostRef.current = usd;
+    if (rafRef.current != null) return;
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = null;
+      if (pendingCostRef.current != null) {
+        setCost(pendingCostRef.current);
+        pendingCostRef.current = null;
+      }
+    });
+  }
+
+  function matchedStep(label: string): Step | null {
+    const lc = label.toLowerCase();
+    for (const s of STEPS) {
+      for (const m of s.match) {
+        if (lc.includes(m)) return s;
+      }
+    }
+    return null;
+  }
+
+  function setStep(key: string, st: StepState) {
+    setStepStates((prev) => (prev[key] === st ? prev : { ...prev, [key]: st }));
+  }
+
+  function maybeFireComplete() {
+    if (completionRef.current.world && completionRef.current.briefing) {
+      onAdvanceCompleteRef.current?.();
+    }
+  }
+
+  function handleEvent(ev: PhaseEvent) {
+    switch (ev.kind) {
+      case 'phase_started': {
+        const s = matchedStep(ev.label);
+        if (s) setStep(s.key, 'running');
+        if (s?.key === 'deliberation') setDeliberations([]);
+        return;
+      }
+      case 'phase_completed': {
+        const s = matchedStep(ev.label);
+        if (s) setStep(s.key, 'done');
+        return;
+      }
+      case 'deliberation_complete': {
+        const p = ev.payload;
+        const row: DeliberationRow = {
+          id: `${ev.turn}:${p.agent_id}:${ev.at}`,
+          label: ev.label,
+          expects: String(p.expects ?? '').slice(0, 240),
+          fears: String(p.fears ?? '').slice(0, 240),
+        };
+        setDeliberations((rows) => [...rows, row]);
+        return;
+      }
+      case 'critic_complete':
+        setStep('critic', 'done');
+        return;
+      case 'premortem_complete':
+        setStep('premortem', 'done');
+        return;
+      case 'verdict_complete': {
+        const p = ev.payload;
+        const card: VerdictCard = {
+          id: `${ev.turn}:${p.actor}:${ev.at}`,
+          actor: p.actor,
+          outcome: p.outcome,
+          plausibility: p.plausibility,
+        };
+        setVerdicts((cards) => [...cards, card]);
+        return;
+      }
+      case 'evaluator_complete':
+        setStep('evaluator', 'done');
+        return;
+      case 'world_updated':
+        setStep('world_update', 'done');
+        completionRef.current.world = true;
+        maybeFireComplete();
+        return;
+      case 'briefing_ready':
+        setStep('next_briefing', 'done');
+        completionRef.current.briefing = true;
+        onBriefingReadyRef.current?.(ev.payload.turn);
+        maybeFireComplete();
+        return;
+      case 'usage_tick':
+        applyCostTick(Number(ev.payload.cost_usd_so_far ?? 0));
+        return;
+      case 'paused':
+        setPausedAt(ev.label);
+        onPausedRef.current?.();
+        return;
+      case 'resumed':
+        setPausedAt(null);
+        return;
+      case 'error':
+        setStreamErr(ev.label || 'Engine reported an error.');
+        return;
+      default:
+        return;
+    }
+  }
+
+  useEffect(() => {
+    let cancelled = false;
+
+    function open() {
+      if (cancelled) return;
+      const es = new EventSource(api.streamUrl(gameId));
+      sseRef.current = es;
+
+      const KINDS: PhaseEvent['kind'][] = [
+        'phase_started', 'phase_completed', 'deliberation_complete',
+        'critic_complete', 'premortem_complete', 'verdict_complete',
+        'evaluator_complete', 'world_updated', 'briefing_ready',
+        'usage_tick', 'paused', 'resumed', 'error',
+      ];
+      const listener = (e: MessageEvent) => {
+        try {
+          const data = JSON.parse(e.data) as PhaseEvent;
+          handleEvent(data);
+          // Reset reconnect counter on any successful event.
+          failedReconnectsRef.current = 0;
+        } catch {
+          // Drop — invalid JSON is best ignored.
+        }
+      };
+      KINDS.forEach((k) => es.addEventListener(k, listener as any));
+
+      es.onerror = () => {
+        // EventSource will auto-reconnect on most browsers. We treat the
+        // error as a hint that we should reset our local view if the
+        // browser fails twice in a row.
+        if (cancelled) return;
+        failedReconnectsRef.current += 1;
+        if (failedReconnectsRef.current >= 2) {
+          setStreamErr('Live stream disconnected — refresh to reconnect.');
+          es.close();
+          sseRef.current = null;
+          // Schedule a single retry after ~2 s. Browser handles intermediate
+          // reconnects; we only intervene on persistent failure.
+          if (reconnectTimerRef.current == null) {
+            reconnectTimerRef.current = window.setTimeout(() => {
+              reconnectTimerRef.current = null;
+              setStreamErr(null);
+              open();
+            }, 2000);
+          }
+        }
+      };
+    }
+
+    open();
+
+    return () => {
+      cancelled = true;
+      sseRef.current?.close();
+      sseRef.current = null;
+      if (reconnectTimerRef.current != null) {
+        window.clearTimeout(reconnectTimerRef.current);
+        reconnectTimerRef.current = null;
+      }
+      if (rafRef.current != null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [gameId]);
+
+  return (
+    <section className="nh-live">
+      <div className="nh-live__hd">
+        <div>
+          <span className="eyebrow">Live · turn in flight</span>
+          <h3 className="nh-serif-h" style={{ margin: '4px 0 0' }}>
+            {pausedAt
+              ? `Paused — ${pausedAt}`
+              : 'Tracking deliberations and verdicts in real time.'}
+          </h3>
+        </div>
+        <div className="nh-live__cost mono" aria-label="cumulative cost">
+          ${cost.toFixed(4)} <span className="fg-3">spent</span>
+        </div>
+      </div>
+
+      {pausedAt && (
+        <div className="nh-live__paused">
+          <span className="eyebrow">Paused</span>
+          <span className="fg-2">Paused at end of {pausedAt}. Resume to continue.</span>
+        </div>
+      )}
+
+      {streamErr && (
+        <div className="nh-live__err mono">{streamErr}</div>
+      )}
+
+      <ol className="nh-live__rail" aria-label="phase progress">
+        {STEPS.map((s) => {
+          const st = stepStates[s.key];
+          return (
+            <li key={s.key} className={`nh-live__pill ${st}`}>
+              <span className="dot" aria-hidden />
+              <span className="t">{s.label}</span>
+              <span className="st mono">
+                {st === 'idle' && '—'}
+                {st === 'running' && <Spinner />}
+                {st === 'done' && '✓'}
+                {st === 'failed' && '!'}
+              </span>
+            </li>
+          );
+        })}
+      </ol>
+
+      <div className="nh-live__grid">
+        <div className="nh-live__panel">
+          <span className="eyebrow">Deliberations</span>
+          {deliberations.length === 0 ? (
+            <p className="fg-3 body-sm" style={{ marginTop: 8 }}>
+              {stepStates.deliberation === 'running'
+                ? <><Spinner /> Agents thinking…</>
+                : 'No agent deliberations yet.'}
+            </p>
+          ) : (
+            <ul className="nh-live__delibs">
+              {deliberations.map((d) => (
+                <li key={d.id}>
+                  <div className="who mono">{d.label}</div>
+                  {d.expects && (
+                    <div className="ex"><span className="k mono">expects</span> {d.expects}</div>
+                  )}
+                  {d.fears && (
+                    <div className="fe"><span className="k mono">fears</span> {d.fears}</div>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+
+        <div className="nh-live__panel">
+          <span className="eyebrow">Verdicts</span>
+          {verdicts.length === 0 ? (
+            <p className="fg-3 body-sm" style={{ marginTop: 8 }}>
+              No verdicts adjudicated yet this turn.
+            </p>
+          ) : (
+            <ul className="nh-live__verdicts">
+              {verdicts.map((v) => (
+                <li key={v.id} className={`nh-live__verdict outcome-${outcomeToClass(v.outcome)}`}>
+                  <div className="hd">
+                    <span className="actor mono">{v.actor}</span>
+                    <span className="pl mono">P{v.plausibility}</span>
+                  </div>
+                  <div className="oc mono">{outcomeLabel(v.outcome)}</div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function outcomeToClass(o: VerdictOutcome): string {
+  switch (o) {
+    case 'effect_major': return 'major';
+    case 'effect_minor': return 'minor';
+    case 'no_effect':    return 'noeffect';
+    case 'backfires':    return 'backfire';
+    default:             return 'noeffect';
+  }
+}
+
+function outcomeLabel(o: VerdictOutcome): string {
+  switch (o) {
+    case 'effect_major': return 'effect · major';
+    case 'effect_minor': return 'effect · minor';
+    case 'no_effect':    return 'no effect';
+    case 'backfires':    return 'backfires';
+    default:             return o;
+  }
+}

frontend/src/screens/GameView.tsx

@@ -1,9 +1,14 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { api, Briefing, Anchor, AnchorKind, ScenarioMap, AgentInfo, ActionCoachSession, CoachMessage } from '../api';
+import {
+  api, Briefing, Anchor, AnchorKind, ScenarioMap, AgentInfo,
+  ActionCoachSession, CoachMessage,
+  HardConstraint, ConstraintViolation, ConstraintSeverity,
+} from '../api';
 import { navigate } from '../App';
 import { Dossier, Panel, PhaseRail, Spinner } from '../components/Shell';
+import { LiveProgress } from '../components/LiveProgress';
 
 interface Props {
   id: string;
@@ -59,6 +64,10 @@ export function GameView({ id, onMeta }: Props) {
   // Advance
   const [advanceBusy, setAdvanceBusy] = useState(false);
   const [advanceLog, setAdvanceLog] = useState<string[]>([]);
+  // Pause / Resume (5b) — controlled by SSE events on the live stream.
+  const [pauseBusy, setPauseBusy] = useState(false);
+  const [resumeBusy, setResumeBusy] = useState(false);
+  const [showLive, setShowLive] = useState(false);
 
   // Orchestrator
   const [orchMap, setOrchMap] = useState<ScenarioMap | null>(null);
@@ -67,6 +76,13 @@ export function GameView({ id, onMeta }: Props) {
   const [forkBusy, setForkBusy] = useState<number | null>(null);
   const pollRef = useRef<number | null>(null);
 
+  // Hard constraints (Round 4)
+  const [constraints, setConstraints] = useState<HardConstraint[]>([]);
+  const [constraintsOpen, setConstraintsOpen] = useState(false);
+  const [constraintsErr, setConstraintsErr] = useState<string | null>(null);
+  const [violations, setViolations] = useState<ConstraintViolation[]>([]);
+  const [preflightBusy, setPreflightBusy] = useState(false);
+
   // Load state + briefing on mount / id change
   async function loadAll() {
     try {
@@ -77,6 +93,8 @@ export function GameView({ id, onMeta }: Props) {
       setTurn(br.turn);
       setMaxTurns((st?.turns?.length && 5) || 5);
       setPhase((st.current_phase as Phase) || 'briefing');
+      // Paused mid-turn — keep the actionSent UI mounted so Resume is visible.
+      if (st?.status === 'paused') setActionSent(true);
       if (st?.scenario_id) {
         try {
           const a = await api.listAgents(st.scenario_id);
@@ -95,6 +113,18 @@ export function GameView({ id, onMeta }: Props) {
   }
   useEffect(() => { loadAll(); /* eslint-disable-next-line */ }, [id]);
 
+  // Hard constraints — load at mount so the panel + preflight stay in sync.
+  async function loadConstraints() {
+    try {
+      const r = await api.listConstraints(id);
+      setConstraints(r.constraints);
+    } catch (e: any) {
+      // 404 is unexpected for an existing game; surface it but don't break the screen.
+      setConstraintsErr(String(e));
+    }
+  }
+  useEffect(() => { loadConstraints(); /* eslint-disable-next-line */ }, [id]);
+
   // Orchestrator hydrate + polling — /orchestrate/result is authoritative and
   // now returns partial maps while running, so clients can progressively render
   // vectors + branches as they land.
@@ -197,16 +227,44 @@ export function GameView({ id, onMeta }: Props) {
   async function submitAction() {
     if (!canSubmit) return;
     setSubmitBusy(true);
+    setViolations([]);
+    const draft = {
+      intent: intent.trim(),
+      justification: why.trim(),
+      anchors: anchors.filter((a) => a.detail.trim()),
+    };
     try {
-      await api.submitAction(id, {
-        intent: intent.trim(),
-        justification: why.trim(),
-        anchors: anchors.filter((a) => a.detail.trim()),
-      });
+      // Preflight only when the game has constraints declared. Without
+      // constraints the backend short-circuits to passes=true anyway, but
+      // skipping the call locally also saves a round-trip.
+      if (constraints.length > 0) {
+        setPreflightBusy(true);
+        try {
+          const r = await api.checkAction(id, draft);
+          if (!r.result.passes && r.result.violations.length > 0) {
+            setViolations(r.result.violations);
+            setSubmitBusy(false);
+            setPreflightBusy(false);
+            return;
+          }
+        } finally {
+          setPreflightBusy(false);
+        }
+      }
+
+      await api.submitAction(id, draft);
       setActionSent(true);
       setPhase('action');
-    } catch (e) {
-      setErr(String(e));
+    } catch (e: any) {
+      // 409 from /actions can carry violations the same way preflight does.
+      const status = e?.status;
+      const msg = String(e?.message ?? e);
+      const parsed = parseViolations(msg);
+      if (status === 409 && parsed.length > 0) {
+        setViolations(parsed);
+      } else {
+        setErr(msg);
+      }
     }
     setSubmitBusy(false);
   }
@@ -245,7 +303,7 @@ export function GameView({ id, onMeta }: Props) {
 
   async function commitCoach() {
     if (!coachSession || coachSession.status !== 'ready' || coachBusy) return;
-    setCoachBusy(true); setCoachErr(null);
+    setCoachBusy(true); setCoachErr(null); setViolations([]);
     try {
       await api.actionCoachCommit(id, coachSession.session_id);
       // Mirror submitAction: flip to 'submitted' UI and let the user advance
@@ -253,8 +311,16 @@ export function GameView({ id, onMeta }: Props) {
       setPhase('action');
       // Clear the coach session locally (server still has it for reference)
       setCoachSession(null);
-    } catch (e) {
-      setCoachErr(String(e));
+    } catch (e: any) {
+      const status = e?.status;
+      const msg = String(e?.message ?? e);
+      const parsed = parseViolations(msg);
+      if (status === 409 && parsed.length > 0) {
+        setViolations(parsed);
+        setCoachErr('Action blocked by hard constraints — see panel above the composer.');
+      } else {
+        setCoachErr(msg);
+      }
     }
     setCoachBusy(false);
   }
@@ -272,19 +338,53 @@ export function GameView({ id, onMeta }: Props) {
     }
   }, [coachSession?.messages.length, coachBusy]);
 
+  async function addConstraint(input: {
+    description: string; rationale: string; test_question: string; severity: ConstraintSeverity;
+  }) {
+    setConstraintsErr(null);
+    try {
+      const r = await api.addConstraint(id, input);
+      setConstraints(r.constraints);
+    } catch (e: any) {
+      setConstraintsErr(String(e?.message ?? e));
+      throw e;
+    }
+  }
+
+  async function deleteConstraint(constraint: HardConstraint) {
+    setConstraintsErr(null);
+    const force = constraint.source !== 'manual';
+    if (force) {
+      const ok = window.confirm(
+        `This constraint came from ${constraint.source === 'scenario' ? 'the scenario file' : 'an uploaded document'}.\n\nRemoving it bypasses an explicitly authored knowledge-base intent. Continue?`,
+      );
+      if (!ok) return;
+    }
+    try {
+      const r = await api.deleteConstraint(id, constraint.id, force);
+      setConstraints(r.constraints);
+    } catch (e: any) {
+      setConstraintsErr(String(e?.message ?? e));
+    }
+  }
+
   async function advance() {
     setAdvanceBusy(true);
+    setShowLive(true);
     setPhase('deliberation');
     setAdvanceLog([`[${nowHM()}] Orchestrator: seeding agent deliberations for turn ${turn}…`]);
-    const ticker = setInterval(() => {
-      setAdvanceLog((L) => [...L, `[${nowHM()}] … still running (this takes 2–5 minutes)`]);
-      setPhase((p) => (p === 'deliberation' ? 'adjudication' : p));
-    }, 15000);
     try {
       const r = await api.advance(id);
-      clearInterval(ticker);
       setAdvanceLog((L) => [...L, `[${nowHM()}] ✓ Turn ${r.turn_resolved} resolved`]);
+      if (r.status === 'paused') {
+        // Engine hit a pause checkpoint; treat the same as a `paused` SSE
+        // event. Refresh state so status flips and the Resume button shows.
+        setAdvanceBusy(false);
+        await loadAll();
+        return;
+      }
       if (r.status === 'complete') {
+        setShowLive(false);
         navigate(`/games/${id}/debrief`);
         return;
       }
@@ -302,13 +402,67 @@ export function GameView({ id, onMeta }: Props) {
       resetCoach();
       await loadAll();
       setAdvanceLog([]);
+      setShowLive(false);
     } catch (e) {
-      clearInterval(ticker);
       setErr(String(e));
+      setShowLive(false);
     }
     setAdvanceBusy(false);
   }
 
+  async function pauseAdvance() {
+    if (pauseBusy) return;
+    setPauseBusy(true);
+    try {
+      await api.pauseGame(id);
+      // Confirmation arrives via the `paused` SSE event; onLivePaused()
+      // clears the spinner and reloads state.
+    } catch (e) {
+      setErr(String(e));
+      setPauseBusy(false);
+    }
+  }
+
+  async function resumeAdvance() {
+    if (resumeBusy) return;
+    setResumeBusy(true);
+    setShowLive(true);
+    try {
+      const r = await api.resumeGame(id);
+      if (r.status === 'paused') {
+        await loadAll();
+      } else if (r.status === 'complete') {
+        setShowLive(false);
+        navigate(`/games/${id}/debrief`);
+        return;
+      } else {
+        setBriefing(r.briefing ?? null);
+        if (r.next_turn) setTurn(r.next_turn);
+        setActionSent(false);
+        setIntent(''); setWhy('');
+        setAnchors([
+          { kind: 'prior_analogue', detail: '' },
+          { kind: 'stated_capability', detail: '' },
+          { kind: 'resource_committed', detail: '' },
+        ]);
+        setReconLog([]);
+        setPhase('briefing');
+        resetCoach();
+        await loadAll();
+        setShowLive(false);
+      }
+    } catch (e) {
+      setErr(String(e));
+      setShowLive(false);
+    }
+    setResumeBusy(false);
+  }
+
+  async function onLivePaused() {
+    setPauseBusy(false);
+    try { await loadAll(); } catch { /* non-fatal */ }
+  }
+
   if (err) {
     return (
       <Dossier tag="Error" title="Case could not be loaded">
@@ -331,11 +485,15 @@ export function GameView({ id, onMeta }: Props) {
           <span>Case <span className="mono">{id.slice(0, 8)}…</span></span>
           <span>·</span>
           <b>
-            {phase === 'briefing' && 'Action phase open'}
-            {phase === 'recon' && 'Recon phase'}
-            {phase === 'action' && 'Action submitted — ready to advance'}
-            {phase === 'deliberation' && 'Agents deliberating'}
-            {phase === 'adjudication' && 'Adjudicating'}
+            {state?.status === 'paused' ? 'Paused — ready to resume' : (
+              <>
+                {phase === 'briefing' && 'Action phase open'}
+                {phase === 'recon' && 'Recon phase'}
+                {phase === 'action' && 'Action submitted — ready to advance'}
+                {phase === 'deliberation' && 'Agents deliberating'}
+                {phase === 'adjudication' && 'Adjudicating'}
+              </>
+            )}
           </b>
         </div>
         <h1>{briefing.headline}</h1>
@@ -351,6 +509,16 @@ export function GameView({ id, onMeta }: Props) {
       {/* World metrics */}
       {state?.world && <MetricStrip world={state.world} />}
 
+      {/* HARD CONSTRAINTS (Round 4) */}
+      <ConstraintsPanel
+        constraints={constraints}
+        open={constraintsOpen}
+        err={constraintsErr}
+        onToggle={() => setConstraintsOpen((v) => !v)}
+        onAdd={addConstraint}
+        onDelete={deleteConstraint}
+      />
+
       {/* MAIN GRID */}
       <div className="nh-grid">
         <div className="nh-narrative">
@@ -520,13 +688,44 @@ export function GameView({ id, onMeta }: Props) {
             </p>
             <div className="nh-submit">
               <span className="hint mono fg-3">Advancing is irreversible. Make sure your anchors are complete.</span>
-              <button className="btn primary" onClick={advance} disabled={advanceBusy}>
-                {advanceBusy ? <><Spinner /> Resolving turn…</> : 'Advance turn →'}
-              </button>
+              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                {state?.status === 'paused' ? (
+                  <button
+                    className="btn primary"
+                    onClick={resumeAdvance}
+                    disabled={resumeBusy}
+                  >
+                    {resumeBusy ? <><Spinner /> Resuming…</> : 'Resume turn →'}
+                  </button>
+                ) : (
+                  <>
+                    {advanceBusy && (
+                      <button
+                        className="btn ghost sm"
+                        onClick={pauseAdvance}
+                        disabled={pauseBusy}
+                        title="Stop at the next phase checkpoint"
+                      >
+                        {pauseBusy ? <><Spinner /> Pausing…</> : 'Pause'}
+                      </button>
+                    )}
+                    <button className="btn primary" onClick={advance} disabled={advanceBusy}>
+                      {advanceBusy ? <><Spinner /> Resolving turn…</> : 'Advance turn →'}
+                    </button>
+                  </>
+                )}
+              </div>
             </div>
           </>
         ) : composerMode === 'coach' ? (
-          <ActionCoachThread
+          <>
+            {violations.length > 0 && (
+              <ViolationsBanner
+                violations={violations}
+                onDismiss={() => setViolations([])}
+              />
+            )}
+            <ActionCoachThread
             session={coachSession}
             input={coachInput}
             setInput={setCoachInput}
@@ -551,6 +750,7 @@ export function GameView({ id, onMeta }: Props) {
             }}
             turn={turn}
           />
+          </>
         ) : (
           <>
             <div className="nh-formrow">
@@ -622,31 +822,43 @@ export function GameView({ id, onMeta }: Props) {
               )}
             </div>
 
+            {violations.length > 0 && (
+              <ViolationsBanner
+                violations={violations}
+                onDismiss={() => setViolations([])}
+              />
+            )}
+
             <div className="nh-submit">
               <span className="hint mono fg-3">
-                Submitting locks your move for Turn {turn}. Advance after submission.
+                {violations.length > 0
+                  ? 'Resolve the constraint violations above to unlock submit.'
+                  : preflightBusy
+                    ? 'Checking against hard constraints…'
+                    : `Submitting locks your move for Turn ${turn}. Advance after submission.`}
               </span>
               <button
                 className="btn primary"
-                disabled={!canSubmit || submitBusy}
+                disabled={!canSubmit || submitBusy || violations.length > 0}
                 onClick={submitAction}
-              >{submitBusy ? <><Spinner /> Submitting…</> : 'Submit action →'}</button>
+              >
+                {submitBusy
+                  ? <><Spinner /> {preflightBusy ? 'Checking…' : 'Submitting…'}</>
+                  : 'Submit action →'}
+              </button>
             </div>
           </>
         )}
       </section>
 
-      {/* ADVANCE LIVE TERMINAL */}
-      {(phase === 'deliberation' || phase === 'adjudication' || advanceBusy) && advanceLog.length > 0 && (
-        <div className="nh-terminal">
-          <div className="nh-terminal__hd">
-            <span className="tag mono">● LIVE · orchestrator</span>
-            <span className="fg-3 mono">{phase === 'deliberation' ? 'deliberating' : 'adjudicating'}</span>
-          </div>
-          <div className="nh-terminal__body">
-            {advanceLog.map((l, i) => <div key={i} className="line">{l}</div>)}
-          </div>
-        </div>
+      {/* ADVANCE LIVE PROGRESS — SSE-driven step rail + deliberation feed +
+          verdict cards + cost meter. Mounted while an advance is in flight
+          OR while the game is paused mid-turn. */}
+      {(showLive || advanceBusy || state?.status === 'paused') && (
+        <LiveProgress
+          gameId={id}
+          onPaused={onLivePaused}
+        />
       )}
 
       {/* PRIOR TURN VERDICTS */}
@@ -1200,3 +1412,256 @@ function fmtCoachAt(at: string) {
     return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
   } catch { return ''; }
 }
+
+function ConstraintsPanel({
+  constraints, open, err, onToggle, onAdd, onDelete,
+}: {
+  constraints: HardConstraint[];
+  open: boolean;
+  err: string | null;
+  onToggle: () => void;
+  onAdd: (input: { description: string; rationale: string; test_question: string; severity: ConstraintSeverity }) => Promise<void>;
+  onDelete: (constraint: HardConstraint) => void | Promise<void>;
+}) {
+  const [adding, setAdding] = useState(false);
+  const [draft, setDraft] = useState({
+    description: '',
+    rationale: '',
+    test_question: '',
+    severity: 'hard' as ConstraintSeverity,
+  });
+  const [busy, setBusy] = useState(false);
+  const [localErr, setLocalErr] = useState<string | null>(null);
+
+  const draftValid =
+    draft.description.trim().length >= 10 &&
+    draft.rationale.trim().length >= 5 &&
+    draft.test_question.trim().length >= 10;
+
+  async function submit() {
+    if (!draftValid || busy) return;
+    setBusy(true); setLocalErr(null);
+    try {
+      await onAdd({
+        description: draft.description.trim(),
+        rationale: draft.rationale.trim(),
+        test_question: draft.test_question.trim(),
+        severity: draft.severity,
+      });
+      setDraft({ description: '', rationale: '', test_question: '', severity: 'hard' });
+      setAdding(false);
+    } catch (e: any) {
+      setLocalErr(String(e?.message ?? e));
+    }
+    setBusy(false);
+  }
+
+  const hardCount = constraints.filter((c) => c.severity === 'hard').length;
+  const softCount = constraints.length - hardCount;
+
+  return (
+    <section className="nh-constraints">
+      <button
+        type="button"
+        className="nh-constraints__hd"
+        onClick={onToggle}
+        aria-expanded={open}
+      >
+        <div>
+          <span className="eyebrow">Hard constraints</span>
+          <div className="hd">
+            {constraints.length === 0
+              ? 'No constraints declared on this game'
+              : `${hardCount} hard${softCount > 0 ? ` · ${softCount} soft` : ''} · enforced at submit time`}
+          </div>
+        </div>
+        <span className="mono fg-3">{open ? 'Hide ↑' : 'Show ↓'}</span>
+      </button>
+
+      {open && (
+        <div className="nh-constraints__body">
+          {err && <p className="nh-constraints__err">{err}</p>}
+          {constraints.length === 0 ? (
+            <p className="fg-3" style={{ margin: '0 0 12px' }}>
+              No hard constraints are active. Add one below, or upload grounding documents at setup time
+              and let the setup agent extract them automatically.
+            </p>
+          ) : (
+            <ul className="nh-constraint-list">
+              {constraints.map((c) => (
+                <ConstraintRow key={c.id} c={c} onDelete={() => onDelete(c)} />
+              ))}
+            </ul>
+          )}
+
+          {adding ? (
+            <div className="nh-constraint-add">
+              <div className="nh-formrow">
+                <label>Description <span className="ct mono">{draft.description.length} / 400</span></label>
+                <textarea
+                  value={draft.description}
+                  maxLength={400}
+                  rows={2}
+                  onChange={(e) => setDraft({ ...draft, description: e.target.value })}
+                  placeholder="e.g. The Helvetia MSA forbids price increases above 4% YoY without 90-day notice."
+                />
+              </div>
+              <div className="nh-formrow">
+                <label>Rationale <span className="ct mono">{draft.rationale.length} / 400</span></label>
+                <textarea
+                  value={draft.rationale}
+                  maxLength={400}
+                  rows={2}
+                  onChange={(e) => setDraft({ ...draft, rationale: e.target.value })}
+                  placeholder="e.g. Breach triggers a EUR 12M penalty clause and a public arbitration filing."
+                />
+              </div>
+              <div className="nh-formrow">
+                <label>Test question <span className="ct mono">{draft.test_question.length} / 300</span></label>
+                <textarea
+                  value={draft.test_question}
+                  maxLength={300}
+                  rows={2}
+                  onChange={(e) => setDraft({ ...draft, test_question: e.target.value })}
+                  placeholder='e.g. "Does this action raise prices on the Helvetia contract by more than 4% without 90-day notice?"'
+                />
+              </div>
+              <div className="nh-formrow">
+                <label>Severity</label>
+                <select
+                  value={draft.severity}
+                  onChange={(e) => setDraft({ ...draft, severity: e.target.value as ConstraintSeverity })}
+                  style={{ font: 'inherit' }}
+                >
+                  <option value="hard">Hard - block any action that breaches</option>
+                  <option value="soft">Soft - flag but allow</option>
+                </select>
+              </div>
+              {localErr && <p className="nh-constraints__err">{localErr}</p>}
+              <div className="nh-constraint-add__ft">
+                <button
+                  type="button"
+                  className="btn ghost sm"
+                  onClick={() => { setAdding(false); setLocalErr(null); }}
+                  disabled={busy}
+                >Cancel</button>
+                <button
+                  type="button"
+                  className="btn primary"
+                  onClick={submit}
+                  disabled={!draftValid || busy}
+                >
+                  {busy ? <><Spinner /> Adding…</> : 'Add constraint →'}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="nh-constraints__addbar">
+              <span className="hint mono fg-3">
+                Hard constraints block any action that breaches them at submission time.
+              </span>
+              <button type="button" className="btn ghost sm" onClick={() => setAdding(true)}>
+                + Add constraint
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function ConstraintRow({
+  c, onDelete,
+}: {
+  c: HardConstraint;
+  onDelete: () => void | Promise<void>;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const long = c.description.length > 120;
+  const display = expanded || !long ? c.description : `${c.description.slice(0, 117)}…`;
+  return (
+    <li className="nh-constraint">
+      <div className="nh-constraint__row">
+        <span className={`nh-badge sev sev-${c.severity}`}>{c.severity.toUpperCase()}</span>
+        <span className={`nh-badge src src-${c.source}`}>{c.source}</span>
+        <button
+          type="button"
+          className="nh-constraint__desc"
+          onClick={() => long && setExpanded((v) => !v)}
+          title={long ? (expanded ? 'Click to collapse' : 'Click to expand') : c.description}
+        >
+          {display}
+        </button>
+        <button
+          type="button"
+          className="nh-constraint__rm"
+          onClick={onDelete}
+          title="Remove constraint"
+        >
+          remove
+        </button>
+      </div>
+      {expanded && (
+        <div className="nh-constraint__detail">
+          <div><span className="eyebrow">Rationale</span> {c.rationale}</div>
+          <div><span className="eyebrow">Test question</span> <span className="mono">{c.test_question}</span></div>
+          {c.source_ref && (
+            <div><span className="eyebrow">Source ref</span> <span className="mono">{c.source_ref}</span></div>
+          )}
+        </div>
+      )}
+    </li>
+  );
+}
+
+function ViolationsBanner({
+  violations, onDismiss,
+}: {
+  violations: ConstraintViolation[];
+  onDismiss: () => void;
+}) {
+  return (
+    <div className="nh-violations" role="alert">
+      <div className="nh-violations__hd">
+        <span className="eyebrow">Hard constraint violation · action blocked</span>
+        <button type="button" className="nh-violations__rm" onClick={onDismiss}>dismiss</button>
+      </div>
+      <ul>
+        {violations.map((v, i) => (
+          <li key={i}>
+            <div className="nh-violations__cd">{v.constraint_description}</div>
+            <div className="nh-violations__rs">{v.reason}</div>
+          </li>
+        ))}
+      </ul>
+      <p className="hint mono fg-3" style={{ marginTop: 6 }}>
+        Revise the action above and the next submit attempt will be re-checked.
+      </p>
+    </div>
+  );
+}
+
+// Parse the JSON-ish detail body the FastAPI handler emits on a 409 hard-constraint
+// rejection. The error message looks like:
+//   `409 Conflict: {"detail":{"message":"…","violations":[{...}, ...]}}`
+function parseViolations(message: string): ConstraintViolation[] {
+  if (!message) return [];
+  const colon = message.indexOf(':');
+  const tail = colon >= 0 ? message.slice(colon + 1).trim() : message;
+  try {
+    const parsed = JSON.parse(tail);
+    const detail = parsed?.detail ?? parsed;
+    const arr = detail?.violations;
+    if (!Array.isArray(arr)) return [];
+    return arr
+      .filter((v: any) => v && typeof v === 'object')
+      .map((v: any) => ({
+        constraint_id: String(v.constraint_id ?? ''),
+        constraint_description: String(v.constraint_description ?? ''),
+        reason: String(v.reason ?? ''),
+      }));
+  } catch {
+    return [];
+  }
+}

frontend/src/screens/NewGame.tsx

@@ -2,11 +2,27 @@ import { useEffect, useState } from 'react';
 import { api, Scenario, ModelInfo } from '../api';
 import { navigate } from '../App';
 
+// Fallback role list when an older backend returns ModelsResponse without
+// `roles[]`. Mirrors `wargame.agents.roles.CANONICAL_ROLES`.
+const FALLBACK_ROLES = ['control', 'agent', 'rival', 'critic', 'premortem', 'evaluator'];
+
+const ROLE_BLURBS: Record<string, string> = {
+  control: 'Briefings, adjudication, world updates',
+  agent: 'Advisory voices in the room',
+  rival: 'Rival CEO planner',
+  critic: 'Critic agent',
+  premortem: 'Pre-mortem agent',
+  evaluator: 'Independent rubric scorer',
+};
+
 export function NewGame() {
   const [scenarios, setScenarios] = useState<Scenario[] | null>(null);
   const [picked, setPicked] = useState<string>('');
   const [models, setModels] = useState<ModelInfo[]>([]);
   const [model, setModel] = useState<string>('');
+  const [roles, setRoles] = useState<string[]>([]);
+  const [overrides, setOverrides] = useState<Record<string, string>>({});
+  const [overridesOpen, setOverridesOpen] = useState(false);
   const [busy, setBusy] = useState(false);
   const [err, setErr] = useState<string | null>(null);
 
@@ -18,13 +34,33 @@ export function NewGame() {
     api.listModels().then((r) => {
       setModels(r.models);
       setModel(r.default);
+      if (r.roles && r.roles.length > 0) {
+        setRoles(r.roles);
+      } else {
+        // eslint-disable-next-line no-console
+        console.warn('GET /models did not return roles[]; using fallback list.');
+        setRoles(FALLBACK_ROLES);
+      }
     }).catch(() => { /* non-fatal — backend will use its default */ });
   }, []);
 
+  function setRoleOverride(role: string, modelId: string) {
+    setOverrides((prev) => {
+      const next = { ...prev };
+      if (!modelId) delete next[role];
+      else next[role] = modelId;
+      return next;
+    });
+  }
+
   async function create() {
     setBusy(true); setErr(null);
     try {
-      const r = await api.createGame(picked, model || undefined);
+      const r = await api.createGame(
+        picked,
+        model || undefined,
+        Object.keys(overrides).length > 0 ? overrides : undefined,
+      );
       navigate(`/games/${r.game_id}`);
     } catch (e) { setErr(String(e)); setBusy(false); }
   }
@@ -101,6 +137,100 @@ export function NewGame() {
           {busy ? 'Generating briefing…' : 'Open case →'}
         </button>
       </div>
+
+      {models.length > 0 && roles.length > 0 && (
+        <RoleOverrides
+          roles={roles}
+          models={models}
+          overrides={overrides}
+          open={overridesOpen}
+          onToggle={() => setOverridesOpen((v) => !v)}
+          onSet={setRoleOverride}
+          onReset={() => setOverrides({})}
+          gameDefault={model}
+        />
+      )}
     </>
   );
 }
+
+function RoleOverrides({
+  roles, models, overrides, open, onToggle, onSet, onReset, gameDefault,
+}: {
+  roles: string[];
+  models: ModelInfo[];
+  overrides: Record<string, string>;
+  open: boolean;
+  onToggle: () => void;
+  onSet: (role: string, modelId: string) => void;
+  onReset: () => void;
+  gameDefault: string;
+}) {
+  const overrideCount = Object.keys(overrides).length;
+  return (
+    <section className="nh-role-overrides">
+      <button
+        type="button"
+        className="nh-role-overrides__hd"
+        onClick={onToggle}
+        aria-expanded={open}
+      >
+        <div>
+          <span className="eyebrow">Per-role model routing</span>
+          <div className="hd">
+            {overrideCount === 0
+              ? 'All roles use the game default'
+              : `${overrideCount} role${overrideCount === 1 ? '' : 's'} routed to a different model`}
+          </div>
+        </div>
+        <span className="mono fg-3">{open ? 'Hide ↑' : 'Configure ↓'}</span>
+      </button>
+      {open && (
+        <div className="nh-role-overrides__body">
+          <p className="fg-3" style={{ margin: '0 0 12px' }}>
+            Each role can be pinned to a specific model — leave on the default to use{' '}
+            <span className="mono">{gameDefault || '(server default)'}</span>. Useful for routing
+            cheap planning to small models and reserving the flagship for adjudication.
+          </p>
+          <div className="nh-role-overrides__rows">
+            {roles.map((role) => {
+              const current = overrides[role] ?? '';
+              return (
+                <div className="nh-role-row" key={role}>
+                  <div className="nh-role-row__name">
+                    <span className="code mono">{role}</span>
+                    {ROLE_BLURBS[role] && (
+                      <span className="hint">{ROLE_BLURBS[role]}</span>
+                    )}
+                  </div>
+                  <select
+                    value={current}
+                    onChange={(e) => onSet(role, e.target.value)}
+                    style={{ font: 'inherit' }}
+                  >
+                    <option value="">(use game default)</option>
+                    {models.map((m) => (
+                      <option key={m.id} value={m.id}>
+                        {m.display_name} · {m.provider}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              );
+            })}
+          </div>
+          <div className="nh-role-overrides__ft">
+            <button
+              type="button"
+              className="btn ghost sm"
+              onClick={onReset}
+              disabled={overrideCount === 0}
+            >
+              Reset to defaults
+            </button>
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}

frontend/src/screens/SetupCase.tsx

@@ -1,17 +1,32 @@
 import { useEffect, useRef, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { api, SetupSession, SetupMessage } from '../api';
+import { api, SetupSession, SetupMessage, UploadedDocument } from '../api';
 import { navigate } from '../App';
 import { Spinner } from '../components/Shell';
 
 type Phase = 'intro' | 'chat' | 'committing';
 
+const DOC_MAX_BYTES = 25 * 1024 * 1024;  // 25 MiB — mirrors backend cap
+const DOC_MAX_COUNT = 10;
+const DOC_ALLOWED_EXT = ['.pdf', '.docx', '.md', '.txt'];
+
 function defaultScenarioId(): string {
   // e.g. case_lx4q3p9 — matches ^[a-z][a-z0-9_]{2,59}$
   return `case_${Date.now().toString(36)}`;
 }
 
+function fmtBytes(n: number): string {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function isAllowedExt(name: string): boolean {
+  const lower = name.toLowerCase();
+  return DOC_ALLOWED_EXT.some((ext) => lower.endsWith(ext));
+}
+
 export function SetupCase() {
   const [phase, setPhase] = useState<Phase>('intro');
   const [scenarioId, setScenarioId] = useState(defaultScenarioId);
@@ -21,6 +36,9 @@ export function SetupCase() {
   const [busy, setBusy] = useState(false);
   const [err, setErr] = useState<string | null>(null);
   const threadRef = useRef<HTMLDivElement | null>(null);
+  const [docs, setDocs] = useState<UploadedDocument[]>([]);
+  const [docErr, setDocErr] = useState<string | null>(null);
+  const [docBusy, setDocBusy] = useState(false);
 
   useEffect(() => {
     if (threadRef.current) {
@@ -57,6 +75,67 @@ export function SetupCase() {
     setBusy(false);
   }
 
+  async function refreshDocs(sessionId: string) {
+    try {
+      const r = await api.listDocuments(sessionId);
+      setDocs(r.documents);
+    } catch (e) {
+      // Non-fatal — leave the prior list visible.
+      // eslint-disable-next-line no-console
+      console.warn('listDocuments failed', e);
+    }
+  }
+
+  async function uploadFiles(files: FileList | File[]) {
+    if (!session) return;
+    setDocErr(null);
+    const list = Array.from(files);
+    if (list.length === 0) return;
+    if (docs.length + list.length > DOC_MAX_COUNT) {
+      setDocErr(`Cap is ${DOC_MAX_COUNT} documents per session — currently ${docs.length} uploaded.`);
+      return;
+    }
+    setDocBusy(true);
+    try {
+      for (const file of list) {
+        if (!isAllowedExt(file.name)) {
+          setDocErr(`"${file.name}": only ${DOC_ALLOWED_EXT.join(', ')} are accepted.`);
+          continue;
+        }
+        if (file.size > DOC_MAX_BYTES) {
+          setDocErr(`"${file.name}": exceeds the 25 MB cap (${fmtBytes(file.size)}).`);
+          continue;
+        }
+        try {
+          await api.uploadDocument(session.session_id, file);
+        } catch (e: any) {
+          setDocErr(`"${file.name}": ${e?.message ?? String(e)}`);
+        }
+      }
+      await refreshDocs(session.session_id);
+    } finally {
+      setDocBusy(false);
+    }
+  }
+
+  async function removeDoc(filename: string) {
+    if (!session) return;
+    setDocErr(null);
+    try {
+      await api.deleteDocument(session.session_id, filename);
+      await refreshDocs(session.session_id);
+    } catch (e: any) {
+      setDocErr(`Could not remove "${filename}": ${e?.message ?? String(e)}`);
+    }
+  }
+
+  // Hydrate the doc list whenever a session arrives or its id changes.
+  useEffect(() => {
+    if (session?.session_id) {
+      refreshDocs(session.session_id);
+    }
+  }, [session?.session_id]);
+
   async function commitAndLaunch() {
     if (!session) return;
     setPhase('committing'); setErr(null);
@@ -160,6 +239,16 @@ export function SetupCase() {
 
       {err && <div className="nh-dossier"><p style={{ color: 'var(--oxblood)' }}>{err}</p></div>}
 
+      {session && phase !== 'committing' && (
+        <DocUploadPanel
+          docs={docs}
+          err={docErr}
+          busy={docBusy}
+          onUpload={uploadFiles}
+          onRemove={removeDoc}
+        />
+      )}
+
       <section className="nh-chat-app">
         <div className="nh-chat">
           <div className="nh-chat__thread" ref={threadRef}>
@@ -268,3 +357,106 @@ function fmtAt(at: string) {
     return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
   } catch { return ''; }
 }
+
+function DocUploadPanel({
+  docs, err, busy, onUpload, onRemove,
+}: {
+  docs: UploadedDocument[];
+  err: string | null;
+  busy: boolean;
+  onUpload: (files: FileList | File[]) => void | Promise<void>;
+  onRemove: (filename: string) => void | Promise<void>;
+}) {
+  const [drag, setDrag] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const remaining = DOC_MAX_COUNT - docs.length;
+
+  return (
+    <section className="nh-doc-upload">
+      <div className="nh-doc-upload__hd">
+        <div>
+          <span className="eyebrow">Grounding documents</span>
+          <div className="hd">
+            Drop in source materials — the setup agent extracts hard constraints from these at commit time.
+          </div>
+        </div>
+        <span className="mono fg-3">{docs.length} / {DOC_MAX_COUNT}</span>
+      </div>
+
+      <div
+        className={`nh-doc-drop ${drag ? 'over' : ''} ${remaining <= 0 || busy ? 'disabled' : ''}`}
+        onDragOver={(e) => {
+          e.preventDefault();
+          if (remaining > 0 && !busy) setDrag(true);
+        }}
+        onDragLeave={() => setDrag(false)}
+        onDrop={(e) => {
+          e.preventDefault();
+          setDrag(false);
+          if (remaining <= 0 || busy) return;
+          if (e.dataTransfer?.files?.length) {
+            onUpload(e.dataTransfer.files);
+          }
+        }}
+        onClick={() => {
+          if (remaining > 0 && !busy) fileInputRef.current?.click();
+        }}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if ((e.key === 'Enter' || e.key === ' ') && remaining > 0 && !busy) {
+            e.preventDefault();
+            fileInputRef.current?.click();
+          }
+        }}
+      >
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          accept={DOC_ALLOWED_EXT.join(',')}
+          style={{ display: 'none' }}
+          onChange={(e) => {
+            if (e.target.files?.length) {
+              onUpload(e.target.files);
+              e.target.value = '';
+            }
+          }}
+        />
+        <div className="nh-doc-drop__cta">
+          {busy ? (
+            <><Spinner /> Uploading…</>
+          ) : remaining <= 0 ? (
+            <span>Limit reached — remove a document to upload another.</span>
+          ) : (
+            <>
+              <strong>Drop documents here</strong> or click to browse —
+              <span className="mono"> {DOC_ALLOWED_EXT.join(' · ')}</span> · max 25 MB each.
+            </>
+          )}
+        </div>
+      </div>
+
+      {err && <p className="nh-doc-upload__err">{err}</p>}
+
+      {docs.length > 0 && (
+        <ul className="nh-doc-list">
+          {docs.map((d) => (
+            <li key={d.filename}>
+              <span className="nm mono">{d.filename}</span>
+              <span className="sz mono fg-3">{fmtBytes(d.bytes_stored)}</span>
+              <button
+                type="button"
+                className="rm"
+                onClick={() => onRemove(d.filename)}
+                disabled={busy}
+              >
+                remove
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}

frontend/src/styles/app.css

@@ -940,3 +940,231 @@ input, textarea, select { font: inherit; color: inherit; }
 
 .nh-orch__ft { margin-top: 16px; padding-top: 10px; border-top: 1px dashed var(--vellum);
   display: flex; justify-content: flex-end; }
+
+/* ============================================================
+   LiveProgress (5b) — SSE-driven in-turn UX
+   ============================================================ */
+.nh-live { background: var(--paper); border: 1px solid var(--ink); border-radius: 2px;
+  padding: 24px; margin-bottom: 32px; position: relative;
+  box-shadow: 0 0 0 6px var(--dossier), var(--shadow-sheet); }
+.nh-live::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px;
+  height: 2px; background: var(--oxblood); }
+.nh-live__hd { display: flex; justify-content: space-between; align-items: center;
+  gap: 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--vellum); }
+.nh-live__hd .eyebrow { display: block; }
+.nh-live__cost { font-size: 13px; color: var(--ink); white-space: nowrap;
+  font-variant-numeric: tabular-nums; }
+.nh-live__cost .fg-3 { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
+
+.nh-live__paused { display: flex; gap: 12px; align-items: baseline;
+  background: var(--dossier); border: 1px solid var(--amber); border-radius: 2px;
+  padding: 10px 14px; margin-bottom: 16px; }
+.nh-live__paused .eyebrow { color: var(--amber); }
+
+.nh-live__err { padding: 10px 14px; background: rgba(122,31,31,0.06);
+  border: 1px dashed var(--oxblood); border-radius: 2px; color: var(--oxblood);
+  font-size: 12px; margin-bottom: 14px; }
+
+.nh-live__rail { list-style: none; padding: 0; margin: 0 0 20px;
+  display: flex; gap: 0; border: 1px solid var(--vellum); border-radius: 2px;
+  background: var(--dossier); overflow: hidden; flex-wrap: wrap; }
+.nh-live__pill { flex: 1 1 140px; min-width: 120px;
+  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
+  border-right: 1px solid var(--vellum); position: relative;
+  font-size: 12.5px; color: var(--slate); }
+.nh-live__pill:last-child { border-right: 0; }
+.nh-live__pill .dot { width: 7px; height: 7px; border-radius: 50%;
+  background: var(--vellum); flex: 0 0 auto; }
+.nh-live__pill .t { font-weight: 500; }
+.nh-live__pill .st { font-size: 11px; margin-left: auto; color: var(--slate); }
+.nh-live__pill.running { background: var(--paper); color: var(--ink);
+  box-shadow: inset 0 -2px 0 var(--oxblood); }
+.nh-live__pill.running .dot { background: var(--oxblood);
+  box-shadow: 0 0 0 3px rgba(122,31,31,0.18); animation: nh-live-pulse 1.6s ease-in-out infinite; }
+.nh-live__pill.running .st { color: var(--oxblood); }
+.nh-live__pill.done { color: var(--graphite); }
+.nh-live__pill.done .dot { background: var(--moss); }
+.nh-live__pill.done .st { color: var(--moss); }
+.nh-live__pill.failed { color: var(--oxblood); }
+.nh-live__pill.failed .dot { background: var(--oxblood); }
+.nh-live__pill.failed .st { color: var(--oxblood); }
+@keyframes nh-live-pulse {
+  0%, 100% { box-shadow: 0 0 0 3px rgba(122,31,31,0.18); }
+  50%      { box-shadow: 0 0 0 6px rgba(122,31,31,0.05); }
+}
+
+.nh-live__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
+@media (max-width: 900px) { .nh-live__grid { grid-template-columns: 1fr; } }
+.nh-live__panel { background: var(--dossier); border: 1px solid var(--vellum);
+  border-radius: 2px; padding: 16px 18px; min-height: 120px; position: relative; }
+.nh-live__panel::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px;
+  height: 2px; background: var(--ink); }
+
+.nh-live__delibs { list-style: none; margin: 12px 0 0; padding: 0;
+  display: flex; flex-direction: column; gap: 0; max-height: 360px; overflow-y: auto; }
+.nh-live__delibs li { padding: 10px 0; border-top: 1px dashed var(--vellum);
+  animation: nh-fade 240ms cubic-bezier(.2,.6,.2,1); }
+.nh-live__delibs li:first-child { border-top: 1px solid var(--ink); }
+.nh-live__delibs .who { font-size: 11.5px; color: var(--ink); font-weight: 500;
+  letter-spacing: 0; margin-bottom: 4px; }
+.nh-live__delibs .ex, .nh-live__delibs .fe { font-size: 13px; line-height: 1.5;
+  color: var(--graphite); margin-top: 4px; }
+.nh-live__delibs .k { font-size: 10.5px; color: var(--slate); margin-right: 6px;
+  letter-spacing: 0.06em; text-transform: uppercase; }
+.nh-live__delibs .fe .k { color: var(--oxblood); }
+
+.nh-live__verdicts { list-style: none; margin: 12px 0 0; padding: 0;
+  display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; }
+.nh-live__verdict { padding: 10px 12px; border: 1px solid var(--vellum);
+  border-left: 3px solid var(--slate); border-radius: 2px; background: var(--paper);
+  animation: nh-fade 240ms cubic-bezier(.2,.6,.2,1); }
+.nh-live__verdict .hd { display: flex; justify-content: space-between; align-items: baseline; }
+.nh-live__verdict .actor { font-size: 12.5px; color: var(--ink); font-weight: 500; }
+.nh-live__verdict .pl { font-size: 11px; color: var(--slate); letter-spacing: 0.04em; }
+.nh-live__verdict .oc { font-size: 11px; margin-top: 4px; letter-spacing: 0.04em;
+  text-transform: uppercase; }
+.nh-live__verdict.outcome-major    { border-left-color: var(--moss); }
+.nh-live__verdict.outcome-major    .oc { color: var(--moss); }
+.nh-live__verdict.outcome-minor    { border-left-color: var(--ice); }
+.nh-live__verdict.outcome-minor    .oc { color: var(--ice); }
+.nh-live__verdict.outcome-noeffect { border-left-color: var(--amber); }
+.nh-live__verdict.outcome-noeffect .oc { color: var(--amber); }
+.nh-live__verdict.outcome-backfire { border-left-color: var(--oxblood); }
+.nh-live__verdict.outcome-backfire .oc { color: var(--oxblood); }
+
+/* ============================================================
+   Forms (5b) — role overrides, doc upload, constraint manager,
+   violations banner. Paper/ink dossier, vellum dashed rules,
+   oxblood for blocking states.
+   ============================================================ */
+
+/* Per-role overrides (NewGame) */
+.nh-role-overrides { background: var(--dossier); border: 1px solid var(--vellum);
+  border-radius: 2px; margin-top: 14px; padding: 0; overflow: hidden; }
+.nh-role-overrides__hd { width: 100%; display: flex; align-items: center;
+  justify-content: space-between; gap: 12px; padding: 14px 18px;
+  background: transparent; border: 0; text-align: left; cursor: pointer;
+  font: inherit; color: var(--ink); }
+.nh-role-overrides__hd:hover { background: var(--paper); }
+.nh-role-overrides__hd .eyebrow { display: block; margin-bottom: 4px; }
+.nh-role-overrides__hd .hd { font-size: 14px; font-weight: 500; }
+.nh-role-overrides__body { border-top: 1px solid var(--vellum);
+  padding: 14px 18px 16px; }
+.nh-role-overrides__rows { display: grid; grid-template-columns: 1fr; gap: 0;
+  border-top: 1px solid var(--ink); }
+.nh-role-row { display: grid; grid-template-columns: 1fr auto; gap: 12px;
+  align-items: center; padding: 10px 0;
+  border-bottom: 1px dashed var(--vellum); }
+.nh-role-row:last-child { border-bottom: 0; }
+.nh-role-row__name .code { font-size: 12.5px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); }
+.nh-role-row__name .hint { display: block; font-size: 11.5px;
+  color: var(--slate); margin-top: 2px; }
+.nh-role-row select { font: inherit; padding: 6px 8px; min-width: 220px;
+  border: 1px solid var(--vellum); background: var(--paper); }
+.nh-role-overrides__ft { margin-top: 10px; padding-top: 10px;
+  border-top: 1px dashed var(--vellum);
+  display: flex; justify-content: flex-end; }
+
+/* Document upload (SetupCase) */
+.nh-doc-upload { background: var(--dossier); border: 1px solid var(--vellum);
+  border-radius: 2px; padding: 16px 18px; margin-bottom: 16px; }
+.nh-doc-upload__hd { display: flex; align-items: flex-start;
+  justify-content: space-between; gap: 16px; margin-bottom: 12px; }
+.nh-doc-upload__hd .eyebrow { display: block; margin-bottom: 4px; }
+.nh-doc-upload__hd .hd { font-size: 14px; color: var(--graphite); line-height: 1.5; }
+.nh-doc-drop { border: 2px dashed var(--vellum); border-radius: 2px;
+  padding: 28px 16px; text-align: center; cursor: pointer;
+  background: var(--paper); transition: all 120ms ease; }
+.nh-doc-drop:hover, .nh-doc-drop:focus { border-color: var(--ink);
+  outline: none; }
+.nh-doc-drop.over { border-color: var(--ink); background: #FFFCF4; }
+.nh-doc-drop.disabled { cursor: not-allowed; opacity: 0.55; }
+.nh-doc-drop__cta { font-size: 13.5px; color: var(--graphite); }
+.nh-doc-drop__cta strong { color: var(--ink); font-weight: 600; }
+.nh-doc-upload__err { color: var(--oxblood); font-size: 12.5px;
+  margin: 10px 0 0; padding: 8px 10px;
+  background: rgba(122,31,31,0.04); border-left: 2px solid var(--oxblood); }
+.nh-doc-list { list-style: none; margin: 12px 0 0; padding: 0;
+  border-top: 1px solid var(--ink); }
+.nh-doc-list li { display: grid; grid-template-columns: 1fr auto auto;
+  gap: 12px; align-items: center; padding: 8px 0;
+  border-bottom: 1px dashed var(--vellum); }
+.nh-doc-list li:last-child { border-bottom: 0; }
+.nh-doc-list .nm { font-size: 13px; color: var(--ink); word-break: break-all; }
+.nh-doc-list .sz { font-size: 11.5px; }
+.nh-doc-list .rm { background: none; border: 0; cursor: pointer;
+  font-size: 11px; color: var(--slate); letter-spacing: 0.04em;
+  text-transform: uppercase; padding: 2px 4px; }
+.nh-doc-list .rm:hover { color: var(--oxblood); }
+.nh-doc-list .rm:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* Hard-constraint manager (GameView) */
+.nh-constraints { background: var(--dossier); border: 1px solid var(--vellum);
+  border-radius: 2px; margin: 14px 0; overflow: hidden; }
+.nh-constraints__hd { width: 100%; display: flex; align-items: center;
+  justify-content: space-between; gap: 12px; padding: 14px 18px;
+  background: transparent; border: 0; text-align: left; cursor: pointer;
+  font: inherit; color: var(--ink); }
+.nh-constraints__hd:hover { background: var(--paper); }
+.nh-constraints__hd .eyebrow { display: block; margin-bottom: 4px; }
+.nh-constraints__hd .hd { font-size: 14px; font-weight: 500; }
+.nh-constraints__body { border-top: 1px solid var(--vellum);
+  padding: 14px 18px 16px; }
+.nh-constraints__err { color: var(--oxblood); font-size: 12.5px;
+  margin: 0 0 10px; padding: 8px 10px;
+  background: rgba(122,31,31,0.04); border-left: 2px solid var(--oxblood); }
+.nh-constraints__addbar { display: flex; justify-content: space-between;
+  align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px;
+  border-top: 1px dashed var(--vellum); }
+.nh-constraint-list { list-style: none; margin: 0 0 12px; padding: 0;
+  border-top: 1px solid var(--ink); }
+.nh-constraint { padding: 10px 0; border-bottom: 1px dashed var(--vellum); }
+.nh-constraint:last-child { border-bottom: 0; }
+.nh-constraint__row { display: flex; align-items: center; gap: 10px;
+  flex-wrap: wrap; }
+.nh-constraint__desc { flex: 1; min-width: 220px; text-align: left;
+  background: none; border: 0; cursor: text; font: inherit;
+  font-size: 13.5px; color: var(--ink); padding: 0; line-height: 1.5; }
+.nh-constraint__desc:hover { color: var(--oxblood); }
+.nh-constraint__rm { background: none; border: 0; cursor: pointer;
+  font-size: 11px; color: var(--slate); letter-spacing: 0.04em;
+  text-transform: uppercase; padding: 2px 4px; }
+.nh-constraint__rm:hover { color: var(--oxblood); }
+.nh-constraint__detail { margin-top: 8px; padding: 8px 10px;
+  background: var(--paper); border: 1px solid var(--vellum);
+  font-size: 12.5px; color: var(--graphite); display: grid; gap: 6px; }
+.nh-constraint__detail .eyebrow { margin-right: 6px; }
+.nh-constraint-add { margin-top: 14px; padding-top: 12px;
+  border-top: 1px dashed var(--vellum); }
+.nh-constraint-add__ft { display: flex; justify-content: flex-end;
+  gap: 10px; margin-top: 6px; }
+
+/* Severity / source badges */
+.nh-badge { display: inline-block; font-family: var(--font-mono);
+  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
+  text-transform: uppercase; padding: 2px 6px; border-radius: 2px;
+  border: 1px solid currentColor; line-height: 1.4; white-space: nowrap; }
+.nh-badge.sev-hard { color: var(--oxblood); }
+.nh-badge.sev-soft { color: var(--amber); }
+.nh-badge.src-scenario { color: var(--ink); }
+.nh-badge.src-document { color: var(--graphite); }
+.nh-badge.src-manual   { color: var(--slate); }
+
+/* Violations banner */
+.nh-violations { margin: 12px 0; padding: 12px 14px;
+  background: rgba(122,31,31,0.05); border: 1px solid var(--oxblood);
+  border-radius: 2px; }
+.nh-violations__hd { display: flex; justify-content: space-between;
+  align-items: center; margin-bottom: 8px; }
+.nh-violations__hd .eyebrow { color: var(--oxblood); }
+.nh-violations__rm { background: none; border: 0; cursor: pointer;
+  font-size: 11px; color: var(--slate); letter-spacing: 0.04em;
+  text-transform: uppercase; padding: 2px 4px; }
+.nh-violations__rm:hover { color: var(--oxblood); }
+.nh-violations ul { list-style: none; margin: 0; padding: 0; }
+.nh-violations li { padding: 6px 0; border-top: 1px dashed var(--oxblood-weak); }
+.nh-violations li:first-child { border-top: 1px solid var(--oxblood); }
+.nh-violations__cd { font-size: 13px; color: var(--ink); font-weight: 500; }
+.nh-violations__rs { font-size: 12.5px; color: var(--graphite);
+  margin-top: 2px; line-height: 1.5; }