practice: the chain table — every reasoning chain in one selectable overlay (owner-approved plan, 2026-09-29)

- core formatChainLine: names + arrow one-liner, singleton marker, pure
- graph-view Chains button (chrome row, empty-graph hidden) opens the
  overlay: fuzzy search (names/aliases/statements), collapsible chain →
  member → statement rows, birth-session + created columns, no
  understanding-levels column
- pinned Selected section derives the agents' actual input live
  (chainsForSelection over the selection; premise without its
  conclusion shows as the singleton it becomes)
- Generate opens the creation dialog in CUSTOM mode: selection summary
  + dated default title, posts {nodeIds, params, note}; cluster mode
  untouched on /practice
- live-verified on the owner's dev server: 219 chains, derived preview,
  search-never-filters-Selected, dialog handoff (selection pass-through
  bug caught + fixed en route), Esc/backdrop dismiss, zero writes
- practice UI files re-normalized to tabs (my earlier prettier runs had
  drifted them to the 2-space default; whitespace-only)

17 render/unit pins added; gates: tsc 0, 1174/1174, lint 0, build 0

README.md

@@ -156,7 +156,7 @@ data/                           chats/ · graph/ (six ledgers + positions/source
 
 **The knowledge graph (two channels, one writer).** The write channel: the extraction pipeline — extractor (LLM: sees only the session, rendered as readable markdown by the shared `core/session-markdown.ts` engine — propositions as true statements, `follows`/`supports` edges with verbatim evidence; fully trusted, graph-blind) → auditor (LLM, an agentic loop that never sees the source: explores the existing graph through `find` / `list_sessions` / `list_propositions` tools, stamps each proposition with an identity verdict — link to an existing node (equivalence bias: paraphrases merge) or create — and may draw bridging edges between existing nodes and the new batch) → merger (`mergeFindings`, deterministic: applies the verdicts, link-appends phrasings/provenance, resolves and dedupes edges, checkpoints coverage) → layout settle. No quiz outcomes or understanding assessments live in the graph (2026-09-27 cleanup); practice (`/practice`) consumes the graph as feedback-only problem sets and writes nothing back. Triggered when a chat's **uncovered tokens** (message-view fingerprints, `coverage.jsonl`) cross `graph.extractionChunkTokens` (a settings knob, default 4096, floor 500 — read fresh per turn); failure checkpoints nothing, the next trigger re-runs. The same pipeline serves the **notes front door** (`POST /api/graph/import`: any `*.md`/`*.txt` becomes a source; re-imports are idempotent by path hash). The read channel: `GET /api/graph` derives the snapshot from the ledgers — a pure read; the home view is a hand-rolled Canvas 2D renderer (one rAF loop, dirty-flag idle, d3-zoom camera, zoom-gated labels, cluster hulls) over a d3-force layout, with server-persisted render settings and drag-committed positions. Clusters are **birth-session groupings**: a node joins the cluster of the session that birthed it (a chat, or an imported notes file as a file-kind session), derived at read — no embedding pass, no naming pass. The teacher reaches the graph on its own terms through the gated prober tools (`list_sessions` / `list_propositions`, the `agent.graphTools` setting) — there is no automatic context injection.
 
-**Practice (problem sets).** The graph's `follows`-edges become reasoning chains; the `/practice` creation dialog picks a birth-session cluster (the graph view's own groups) and freezes its propositions + chains into a self-contained `ProblemSet`. Three named-level axes steer generation (ladder rung 0–4, cue distance 0–2, Theory|Application — never a number to interpolate; defaults Direct exercise · Adjacent context · Theory), plus an optional free-form note the agents weigh but need not follow. A partitioner agent covers every chain exactly once, one generator per partition writes problems against the owner's problem-engineering framework (commit-before-pose: statement + solution + rubric together), and grading is **strengthening, not assessment** — one attempt per problem with its own submit button, instant solution/rubric reveal, then a score 0–10 with brief reasoning landing live; nothing ever written back to the graph. Runs are registry-backed background jobs on the activity dock (no steer, never wakes the teacher); sets live in `data/practice`, crash-swept on boot.
+**Practice (problem sets).** The graph's `follows`-edges become reasoning chains; the `/practice` creation dialog picks a birth-session cluster (the graph view's own groups) and freezes its propositions + chains into a self-contained `ProblemSet`. Three named-level axes steer generation (ladder rung 0–4, cue distance 0–2, Theory|Application — never a number to interpolate; defaults Direct exercise · Adjacent context · Theory), plus an optional free-form note the agents weigh but need not follow. Creation has two entries: the cluster picker on `/practice`, or the graph view's chain table — every reasoning chain in one selectable overlay whose pinned preview shows the exact `N propositions → M chains` the agents will receive — handing a free-form node selection to the same dialog. A partitioner agent covers every chain exactly once, one generator per partition writes problems against the owner's problem-engineering framework (commit-before-pose: statement + solution + rubric together), and grading is **strengthening, not assessment** — one attempt per problem with its own submit button, instant solution/rubric reveal, then a score 0–10 with brief reasoning landing live; nothing ever written back to the graph. Runs are registry-backed background jobs on the activity dock (no steer, never wakes the teacher); sets live in `data/practice`, crash-swept on boot.
 
 **Dictation.** Optional speech-to-text: the server mints short-lived Deepgram tokens; audio streams browser→Deepgram over WebSocket, never through the server.
 

components/chain-table.tsx

@@ -0,0 +1,519 @@
+"use client";
+
+/**
+ * THE CHAIN TABLE (chains overlay, owner-approved plan 2026-09-29): every
+ * reasoning chain of the graph in one selectable table — the graph view's
+ * practice entry for FREE-FORM selections, complementing the cluster
+ * picker (which stays the /practice page's only creation mode). Read-only
+ * toward the graph: it renders the snapshot it is handed, selects node
+ * ids, and hands the selection to the practice dialog's CUSTOM mode.
+ *
+ * MOUNT IDIOM (the session-overlay precedent, session-overlay.tsx): the
+ * overlay is ABSOLUTE INSIDE the graph area (never a body portal) —
+ * inset-0, z-40, bg-background/80 + backdrop blur — so the app chrome
+ * (drag bar, sidebar) stays sharp and reachable; Esc and backdrop clicks
+ * dismiss.
+ *
+ * STRUCTURE: a fuzzy search box (names, aliases, statements — core's
+ * fuzzyScore) at the very top filters the chain list only; the SELECTED
+ * section is pinned beneath it, never filtered — N propositions → M
+ * chains via chainsForSelection over the selection (the agents' ACTUAL
+ * input: a selected premise without its conclusion shows as the singleton
+ * it becomes). Chain rows (the core formatter's name line) expand to
+ * indented member proposition rows; each member expands its full
+ * statement inline. Columns: checkbox | chain/proposition tree | birth
+ * session(s) | created. NO understanding-levels column (explicitly not
+ * built — no dead markup).
+ *
+ * Named neutrally (ChainTable, not Practice*) — the table is a
+ * graph-surface; only the Generate handoff knows about practice.
+ */
+
+import { useEffect, useMemo, useState } from "react";
+import { ListTreeIcon, SearchIcon, XIcon } from "lucide-react";
+import { chainsForSelection, formatChainLine, fuzzyScore } from "@/src/core";
+import type { GraphEdge, GraphNode } from "@/src/core";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { PracticeDialog } from "@/components/practice-dialog";
+
+/** The grid every row shares: checkbox | tree | birth | date. */
+const ROW_COLS = "grid-cols-[1.5rem_minmax(0,1fr)_9rem_5.5rem]";
+
+/** A node's birth-session label, mirroring the clusters' honesty join:
+ *  the first surviving provenance point's chatId → chat title / notes
+ *  file path, null when unnameable (rendered muted "unlabeled", never
+ *  guessed). Inlined here (one line) because session-clusters.ts is not
+ *  barrel-exported — the graph stream owns it; the shape is contract-
+ *  pinned (provenance[0] is the birth by the getGraph fold order). */
+function birthLabelOf(
+	node: Pick<GraphNode, "provenance">,
+	sessions: Record<string, string>,
+	fileSources: Record<string, string>,
+): string | null {
+	const birth = node.provenance[0]?.chatId ?? null;
+	if (birth === null) return null;
+	return sessions[birth] ?? fileSources[birth] ?? null;
+}
+
+/** One chain's birth labels — unique over its members, sorted by session
+ *  id (deterministic); a member with no nameable birth contributes a
+ *  muted "unlabeled" entry (honest, per the clusters law). */
+function chainBirthLabels(
+	chain: { premises: string[]; conclusion: string },
+	byId: Map<string, GraphNode>,
+	sessions: Record<string, string>,
+	fileSources: Record<string, string>,
+): string[] {
+	const labels = new Map<string, string>();
+	for (const id of [...chain.premises, chain.conclusion]) {
+		const node = byId.get(id);
+		if (!node) continue;
+		const birth = node.provenance[0]?.chatId ?? null;
+		if (birth === null) {
+			labels.set("\0unlabeled", "unlabeled");
+			continue;
+		}
+		labels.set(birth, sessions[birth] ?? fileSources[birth] ?? "unlabeled");
+	}
+	return [...labels.entries()]
+		.sort((a, b) => (a[0] < b[0] ? -1 : 1))
+		.map(([, label]) => label);
+}
+
+/** The checkbox — checked/indeterminate (a chain with SOME members
+ *  selected); clicks stop at the checkbox so they never toggle the
+ *  surrounding Collapsible row. */
+function RowCheckbox({
+	checked,
+	indeterminate = false,
+	onToggle,
+	testid,
+	label,
+}: {
+	checked: boolean;
+	indeterminate?: boolean;
+	onToggle: (next: boolean) => void;
+	testid: string;
+	label: string;
+}) {
+	return (
+		<input
+			type="checkbox"
+			checked={checked}
+			// `indeterminate` is a DOM property React does not expose — set it
+			// on the node directly (the chain rows' partial state).
+			ref={(el) => {
+				if (el) el.indeterminate = indeterminate;
+			}}
+			data-testid={testid}
+			aria-label={label}
+			onClick={(e) => e.stopPropagation()}
+			onChange={(e) => onToggle(e.target.checked)}
+			className="size-3.5 accent-primary"
+		/>
+	);
+}
+
+/** The table's pure body — exported for SSR pins (the render-suite
+ *  discipline). All state (query, selection) arrives via props; the
+ *  overlay wrapper below owns it. */
+export function ChainTableBody({
+	nodes,
+	edges,
+	sessions,
+	fileSources,
+	query,
+	onQuery,
+	selection,
+	onToggleNode,
+	onToggleChain,
+	onClear,
+	onGenerate,
+	onClose,
+}: {
+	nodes: GraphNode[];
+	edges: GraphEdge[];
+	sessions: Record<string, string>;
+	fileSources: Record<string, string>;
+	query: string;
+	onQuery: (v: string) => void;
+	selection: ReadonlySet<string>;
+	onToggleNode: (id: string, next: boolean) => void;
+	onToggleChain: (ids: string[], next: boolean) => void;
+	onClear: () => void;
+	onGenerate: () => void;
+	onClose: () => void;
+}) {
+	const byId = useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
+	const chains = useMemo(
+		() => chainsForSelection(nodes, edges),
+		[nodes, edges],
+	);
+	const nameOf = (id: string) => byId.get(id)?.name ?? id;
+
+	// The fuzzy filter: a chain is visible when ANY member matches the
+	// query on name, aliases, or statement; chains rank by their best
+	// member's score (desc), ties by chain id — deterministic.
+	const visibleChains = useMemo(() => {
+		const scored = chains.map((chain) => {
+			const memberIds = [...chain.premises, chain.conclusion];
+			// Empty query matches everything at score 0; a non-empty query
+			// starts at null (no match) and takes the best member score.
+			let best: number | null = query.trim() === "" ? 0 : null;
+			for (const id of memberIds) {
+				const node = byId.get(id);
+				if (!node) continue;
+				const s = fuzzyScore(query, node.name, node.statement, ...node.aliases);
+				if (s === null) continue;
+				if (best === null || s > best) best = s;
+			}
+			return { chain, best };
+		});
+		return scored
+			.filter((row): row is { chain: (typeof chains)[number]; best: number } => row.best !== null)
+			.sort((a, b) => b.best - a.best || (a.chain.id < b.chain.id ? -1 : 1))
+			.map(({ chain }) => chain);
+	}, [chains, byId, query]);
+
+	// The agents' ACTUAL input: chainsForSelection over the selection —
+	// a selected premise without its conclusion shows as the singleton it
+	// becomes. This is the pinned preview, never search-filtered.
+	const derived = useMemo(() => {
+		const selectedNodes = [...selection]
+			.map((id) => byId.get(id))
+			.filter((n): n is GraphNode => n !== undefined);
+		return chainsForSelection(selectedNodes, edges);
+	}, [selection, byId, edges]);
+	const propositions = useMemo(() => {
+		const known = new Set([...selection].filter((id) => byId.has(id)));
+		return known;
+	}, [selection, byId]);
+
+	return (
+		<div data-testid="chain-table" className="flex h-full min-h-0 flex-col">
+			{/* Header: title + count + close (the session-overlay chrome). */}
+			<div className="flex shrink-0 items-center gap-2 px-4 pb-2 pt-3">
+				<ListTreeIcon className="size-4 text-muted-foreground" />
+				<span className="font-title text-lg tracking-tight">Chains</span>
+				<span className="text-xs text-muted-foreground">
+					{chains.length} {chains.length === 1 ? "chain" : "chains"} ·{" "}
+					{nodes.length} propositions
+				</span>
+				<div className="flex-1" />
+				<button
+					type="button"
+					data-testid="chain-table-close"
+					onClick={onClose}
+					aria-label="Close chains"
+					className="flex size-7 items-center justify-center rounded-md border border-border/70 bg-card/80 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+				>
+					<XIcon className="size-4" />
+				</button>
+			</div>
+
+			{/* The fuzzy search — very top; filters the LIST only. */}
+			<div className="shrink-0 px-4 pb-2">
+				<div className="relative">
+					<SearchIcon className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+					<input
+						value={query}
+						data-testid="chain-table-search"
+						onChange={(e) => onQuery(e.target.value)}
+						placeholder="Search propositions…"
+						aria-label="Search propositions"
+						spellCheck={false}
+						className="h-8 w-full rounded-lg border bg-background pl-8 pr-3 text-xs outline-none placeholder:text-muted-foreground focus:border-ring"
+					/>
+				</div>
+			</div>
+
+			{/* The SELECTED section — pinned, always visible, never filtered. */}
+			<div
+				data-testid="chain-table-selected"
+				className="mx-4 mb-2 shrink-0 rounded-lg border bg-accent/30 px-3 py-2"
+			>
+				{propositions.size === 0 ? (
+					<div className="text-xs text-muted-foreground">
+						Nothing selected — check whole chains or single propositions below.
+					</div>
+				) : (
+					<div className="flex items-start gap-3">
+						<div className="min-w-0 flex-1">
+							<div
+								data-testid="chain-selected-summary"
+								className="text-xs font-medium"
+							>
+								{propositions.size}{" "}
+								{propositions.size === 1 ? "proposition" : "propositions"} →{" "}
+								{derived.length} {derived.length === 1 ? "chain" : "chains"}
+							</div>
+							<ul
+								data-testid="chain-derived-list"
+								className="mt-1 max-h-20 overflow-y-auto text-xs leading-relaxed text-muted-foreground"
+							>
+								{derived.map((chain) => (
+									<li key={chain.id} data-testid={`chain-derived-${chain.id}`}>
+										{formatChainLine(
+											chain,
+											Object.fromEntries(
+												[...byId.entries()].map(([id, n]) => [
+													id,
+													{ name: n.name },
+												]),
+											),
+										)}
+									</li>
+								))}
+							</ul>
+						</div>
+						<div className="flex shrink-0 flex-col gap-1.5">
+							<button
+								type="button"
+								data-testid="chain-generate"
+								onClick={onGenerate}
+								className="rounded-md bg-primary px-2.5 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+							>
+								Generate problem set
+							</button>
+							<button
+								type="button"
+								data-testid="chain-clear"
+								onClick={onClear}
+								className="rounded-md px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+							>
+								Clear
+							</button>
+						</div>
+					</div>
+				)}
+			</div>
+
+			{/* Column headers + the chain rows (scrollable). */}
+			<div className="min-h-0 flex-1 overflow-y-auto px-4 pb-4">
+				<div
+					className={`grid ${ROW_COLS} gap-2 px-1 pb-1 text-[11px] uppercase tracking-widest text-muted-foreground/70`}
+				>
+					<span />
+					<span>Chain</span>
+					<span className="truncate">Born in</span>
+					<span>Created</span>
+				</div>
+				{visibleChains.length === 0 && (
+					<div
+						data-testid="chain-table-nomatch"
+						className="px-1 pt-2 text-xs text-muted-foreground"
+					>
+						No matching chains.
+					</div>
+				)}
+				<div className="flex flex-col gap-1">
+					{visibleChains.map((chain, index) => {
+						const memberIds = [...chain.premises, chain.conclusion];
+						const selectedCount = memberIds.filter((id) =>
+							selection.has(id),
+						).length;
+						const conclusion = byId.get(chain.conclusion);
+						return (
+							<Collapsible key={chain.id} defaultOpen={index === 0}>
+								<CollapsibleTrigger
+									data-testid={`chain-row-${chain.id}`}
+									className={`grid ${ROW_COLS} w-full items-center gap-2 rounded-lg px-1 py-1.5 text-left text-sm transition-colors hover:bg-accent`}
+								>
+									<RowCheckbox
+										checked={
+											selectedCount === memberIds.length && memberIds.length > 0
+										}
+										indeterminate={
+											selectedCount > 0 && selectedCount < memberIds.length
+										}
+										onToggle={(next) => onToggleChain(memberIds, next)}
+										testid={`chain-checkbox-${chain.id}`}
+										label={`Select chain ${nameOf(chain.conclusion)}`}
+									/>
+									<span className="min-w-0 truncate">
+										{formatChainLine(
+											chain,
+											Object.fromEntries(
+												[...byId.entries()].map(([id, n]) => [
+													id,
+													{ name: n.name },
+												]),
+											),
+										)}
+									</span>
+									<span
+										className="truncate text-xs text-muted-foreground"
+										data-testid={`chain-birth-${chain.id}`}
+									>
+										{chainBirthLabels(chain, byId, sessions, fileSources)
+											.map((label) =>
+												label === "unlabeled" ? "unlabeled" : label,
+											)
+											.join(" · ")}
+									</span>
+									<span
+										className="truncate text-xs tabular-nums text-muted-foreground"
+										data-testid={`chain-date-${chain.id}`}
+									>
+										{conclusion ? conclusion.createdAt.slice(0, 10) : ""}
+									</span>
+								</CollapsibleTrigger>
+								<CollapsibleContent>
+									<div className="flex flex-col gap-0.5 py-0.5">
+										{memberIds.map((id) => {
+											const node = byId.get(id);
+											if (!node) return null;
+											const isConclusion = id === chain.conclusion;
+											return (
+												<Collapsible key={id}>
+													<CollapsibleTrigger
+														data-testid={`prop-row-${id}`}
+														className={`grid ${ROW_COLS} w-full items-center gap-2 rounded-md px-1 py-1 text-left text-xs transition-colors hover:bg-accent`}
+													>
+														<span className="pl-3">
+															<RowCheckbox
+																checked={selection.has(id)}
+																onToggle={(next) => onToggleNode(id, next)}
+																testid={`prop-checkbox-${id}`}
+																label={`Select proposition ${node.name}`}
+															/>
+														</span>
+														<span className="min-w-0 truncate pl-6 text-muted-foreground">
+															{isConclusion && (
+																<span className="mr-1 text-foreground/70">
+																	→
+																</span>
+															)}
+															{node.name}
+														</span>
+														<span />
+														<span />
+													</CollapsibleTrigger>
+													<CollapsibleContent>
+														<div
+															data-testid={`prop-statement-${id}`}
+															className="ml-[calc(1.5rem+1rem+1.25rem)] rounded-md bg-muted/40 px-3 py-1.5 text-xs leading-relaxed text-muted-foreground"
+														>
+															{node.statement}
+														</div>
+													</CollapsibleContent>
+												</Collapsible>
+											);
+										})}
+									</div>
+								</CollapsibleContent>
+							</Collapsible>
+						);
+					})}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+/** The graph view's overlay wrapper: owns query + selection + the custom
+ *  practice dialog; mounts ABSOLUTE INSIDE the graph area (the
+ *  session-overlay idiom — never a body portal). Read-only toward the
+ *  graph — selection lives in component state only. */
+export function ChainTableOverlay({
+	open,
+	nodes,
+	edges,
+	sessions,
+	fileSources,
+	onClose,
+}: {
+	open: boolean;
+	nodes: GraphNode[];
+	edges: GraphEdge[];
+	sessions: Record<string, string>;
+	fileSources: Record<string, string>;
+	onClose: () => void;
+}) {
+	const [query, setQuery] = useState("");
+	const [selection, setSelection] = useState<ReadonlySet<string>>(
+		() => new Set(),
+	);
+	const [dialogOpen, setDialogOpen] = useState(false);
+
+	// Esc dismisses (unless the practice dialog has focus — its own Esc
+	// owns that layer; both listen on window, so the guard is explicit).
+	useEffect(() => {
+		if (!open || dialogOpen) return;
+		const onKeyDown = (e: KeyboardEvent) => {
+			if (e.key === "Escape") onClose();
+		};
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [open, dialogOpen, onClose]);
+
+	if (!open) return null;
+
+	const byId = new Map(nodes.map((n) => [n.id, n]));
+	const selectedNodes = [...selection]
+		.map((id) => byId.get(id))
+		.filter((n): n is GraphNode => n !== undefined);
+	const derived = chainsForSelection(selectedNodes, edges);
+	const nodeIds = [...selection].sort();
+
+	return (
+		<>
+			<div
+				data-testid="chain-table-overlay"
+				className="absolute inset-0 z-40 flex items-center justify-center bg-background/80 p-4 backdrop-blur-sm"
+				onClick={onClose}
+			>
+				<div
+					className="flex h-full w-full max-w-4xl flex-col overflow-hidden rounded-xl border bg-card shadow-xl"
+					onClick={(e) => e.stopPropagation()}
+				>
+					<ChainTableBody
+						nodes={nodes}
+						edges={edges}
+						sessions={sessions}
+						fileSources={fileSources}
+						query={query}
+						onQuery={setQuery}
+						selection={selection}
+						onToggleNode={(id, next) =>
+							setSelection((prev) => {
+								const s = new Set(prev);
+								if (next) s.add(id);
+								else s.delete(id);
+								return s;
+							})
+						}
+						onToggleChain={(ids, next) =>
+							setSelection((prev) => {
+								const s = new Set(prev);
+								for (const id of ids) {
+									if (next) s.add(id);
+									else s.delete(id);
+								}
+								return s;
+							})
+						}
+						onClear={() => setSelection(new Set())}
+						onGenerate={() => setDialogOpen(true)}
+						onClose={onClose}
+					/>
+				</div>
+			</div>
+			{dialogOpen && (
+				<PracticeDialog
+					mode="custom"
+					selection={{
+						nodeIds,
+						propositions: selectedNodes.length,
+						chains: derived.length,
+					}}
+					onClose={() => setDialogOpen(false)}
+				/>
+			)}
+		</>
+	);
+}

components/graph-view.tsx

@@ -66,13 +66,14 @@
 
 import { useCallback, useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import Link from "next/link";
-import { FileTextIcon, Loader2Icon, SearchIcon, SettingsIcon, UploadIcon, WaypointsIcon } from "lucide-react";
+import { FileTextIcon, ListTreeIcon, Loader2Icon, SearchIcon, SettingsIcon, UploadIcon, WaypointsIcon } from "lucide-react";
 import { incrementalLayout, type GraphCostSummary, type GraphNode, type GraphSnapshot } from "@/src/core";
 import { GraphCanvasRenderer, type GraphRenderSettings } from "./graph-canvas.ts";
 import { usePopoverDismiss } from "@/components/popover-dismiss";
 import { useActivity } from "@/components/activity-dock";
 import { MenuShell } from "@/components/menu-shell.tsx";
 import { DeleteNodeDialog } from "@/components/delete-node-dialog.tsx";
+import { ChainTableOverlay } from "@/components/chain-table.tsx";
 import { Hint } from "@/components/ui/hint";
 import {
 	ARROW_LENGTH_LADDER,
@@ -860,6 +861,7 @@ export function GraphChromeRow({
 	onImportFiles,
 	settings,
 	changeSettings,
+	onOpenChains,
 }: {
 	isEmpty: boolean;
 	query: string;
@@ -873,6 +875,9 @@ export function GraphChromeRow({
 	onImportFiles: (files: FileList | null) => void;
 	settings: GraphRenderSettings;
 	changeSettings: (update: (cur: RenderSettings) => RenderSettings) => void;
+	/** Opens the chain table overlay (the chains-overlay plan,
+	 *  2026-09-29). */
+	onOpenChains: () => void;
 }) {
 	return (
 		<>
@@ -902,6 +907,24 @@ export function GraphChromeRow({
 					)}
 				</div>
 			)}
+			{/* The chain table (chains overlay, owner plan 2026-09-29) — the
+			    graph's free-form practice entry. Own container (36px band),
+			    between the search and Import. */}
+			{!isEmpty && (
+				<div className="graph-chrome-fade-in shrink-0 rounded-xl border bg-card/85 px-1 py-[3px] shadow-lg backdrop-blur">
+					<Hint label="Every reasoning chain, selectable for practice" side="bottom">
+						<button
+							type="button"
+							onClick={onOpenChains}
+							data-testid="open-chain-table"
+							className="flex h-7 items-center gap-1.5 rounded-lg px-2.5 text-xs text-muted-foreground transition-colors hover:bg-accent"
+						>
+							<ListTreeIcon className="size-3" />
+							Chains
+						</button>
+					</Hint>
+				</div>
+			)}
 			{/* Import notes — its own container (36px, header band); ALWAYS
 			    rendered (the empty-graph ruling above — the entry point). */}
 			<div className="shrink-0 rounded-xl border bg-card/85 px-1 py-[3px] shadow-lg backdrop-blur">
@@ -1050,6 +1073,9 @@ export function GraphView() {
 	// Fetch the derived graph. Re-runs when a background pipeline run
 	// finishes (refreshTick) — its merges just landed in the ledger.
 	const [refreshTick, setRefreshTick] = useState(0);
+	// The chain table overlay (chains-overlay plan, 2026-09-29) —
+	// component-local: a browsing surface, not graph state.
+	const [chainsOpen, setChainsOpen] = useState(false);
 	useEffect(() => {
 		let cancelled = false;
 		fetch("/api/graph")
@@ -1529,6 +1555,20 @@ export function GraphView() {
 				}}
 			/>
 
+			{/* The chain table overlay (chains-overlay plan, 2026-09-29):
+			    ABSOLUTE INSIDE the graph area (the session-overlay idiom —
+			    never a body portal) so the app chrome stays sharp and
+			    reachable; the overlay itself is read-only toward the graph
+			    and owns its selection + the custom practice dialog. */}
+			<ChainTableOverlay
+				open={chainsOpen && !isEmpty}
+				nodes={snapshot?.nodes ?? []}
+				edges={snapshot?.edges ?? []}
+				sessions={snapshot?.sessions ?? {}}
+				fileSources={snapshot?.fileSources ?? {}}
+				onClose={() => setChainsOpen(false)}
+			/>
+
 			{/* Legend + filters: search box and per-state toggle rows. */}
 			{/* Top-right controls — separate floating containers (owner,
 			    graph-view round 2). Row order (2026-09-17): search,
@@ -1576,6 +1616,7 @@ export function GraphView() {
 					onImportFiles={onImportFiles}
 					settings={settings}
 					changeSettings={changeSettings}
+					onOpenChains={() => setChainsOpen(true)}
 				/>
 			</div>
 

components/practice-dialog.tsx

@@ -38,6 +38,21 @@ export const DEFAULT_PRACTICE_PARAMS: PracticeParams = {
 	presentation: "theory",
 };
 
+/** The two creation modes (chains overlay, owner plan 2026-09-29):
+ *  "cluster" — the /practice page's picker (stays cluster-ONLY, owner
+ *  ruling 2026-09-29); "custom" — the graph view's chain table hands in
+ *  a free-form node selection; no picker, a selection summary instead. */
+export type PracticeDialogMode = "cluster" | "custom";
+
+/** The custom mode's handoff: the flat node-id selection + the derived
+ *  shape (chainsForSelection over the selection — the overlay computes
+ *  it for its pinned preview and passes the same numbers here). */
+export interface PracticeSelection {
+	nodeIds: string[];
+	propositions: number;
+	chains: number;
+}
+
 export interface PracticeFailure {
 	status: number;
 	error: string;
@@ -47,6 +62,7 @@ export interface PracticeFailure {
 /** The dialog's pure body — exported for SSR pins (the delete-session /
  *  settings body pattern). The wrapper owns state + fetch + portal. */
 export function PracticeDialogBody({
+	mode = "cluster",
 	params,
 	onParam,
 	note,
@@ -54,12 +70,14 @@ export function PracticeDialogBody({
 	clusters,
 	selectedKey,
 	onSelect,
+	selection,
 	busy,
 	failure,
 	onOpenSettings,
 	onClose,
 	onRun,
 }: {
+	mode?: PracticeDialogMode;
 	params: PracticeParams;
 	onParam: (patch: Partial<PracticeParams>) => void;
 	/** The learner's free-form note (owner, 2026-09-29) — optional,
@@ -70,13 +88,15 @@ export function PracticeDialogBody({
 	clusters: GraphClusterGroup[];
 	selectedKey: string | null;
 	onSelect: (key: string) => void;
+	/** The custom mode's handoff (chain-table selections). */
+	selection?: PracticeSelection;
 	busy: boolean;
 	failure: PracticeFailure | null;
 	onOpenSettings: () => void;
 	onClose: () => void;
 	onRun: () => void;
 }) {
-  const canRun = !busy && selectedKey !== null;
+	const canRun = !busy && (mode === "custom" ? (selection?.nodeIds.length ?? 0) > 0 : selectedKey !== null);
 	return (
 		<div
 			role="dialog"
@@ -88,8 +108,11 @@ export function PracticeDialogBody({
 		>
 			<h2 className="font-title text-2xl tracking-tight">New problem set</h2>
 
-      {/* The cluster: a birth-session group of the graph, resolved to
+			{/* The cluster picker — CLUSTER mode only (custom mode replaces
-			    node ids on create (graph-domain, owner 2026-09-29). */}
+			    it with the selection summary below): a birth-session group of
+			    the graph, resolved to node ids on create (graph-domain, owner
+			    2026-09-29). */}
+			{mode === "cluster" && (
 				<div className="mt-4 flex flex-col gap-1">
 				<span className="text-xs uppercase tracking-widest text-muted-foreground/70">
 					Cluster
@@ -129,6 +152,26 @@ export function PracticeDialogBody({
 					)}
 				</div>
 			</div>
+			)}
+
+			{/* CUSTOM mode: no picker — the chain table already chose. The
+			    dated default title (the pipeline's own `Practice — date`,
+			    stamped server-side when no title is posted) + the derived
+			    shape of the handoff. */}
+			{mode === "custom" && (
+				<div className="mt-4 flex flex-col gap-1" data-testid="practice-dialog-selection">
+					<span className="text-xs uppercase tracking-widest text-muted-foreground/70">
+						Selection
+					</span>
+					<div className="rounded-lg border bg-accent/30 px-3 py-2 text-sm">
+						<div className="text-muted-foreground">Practice — {new Date().toISOString().slice(0, 10)}</div>
+						<div data-testid="practice-dialog-selection-line">
+							{selection?.propositions ?? 0} {selection?.propositions === 1 ? "proposition" : "propositions"} →{" "}
+							{selection?.chains ?? 0} {selection?.chains === 1 ? "chain" : "chains"}
+						</div>
+					</div>
+				</div>
+			)}
 
 			{/* The three parameters — named levels, never a number to
 			    interpolate (owner, 2026-09-29). Stepped sliders snap to the
@@ -289,7 +332,15 @@ export function PracticeDialogBody({
 
 /** The stateful wrapper: fetches the cluster list, runs the create POST
  *  (nodeIds + the cluster's label as title + params), navigates on 202. */
-export function PracticeDialog({ onClose }: { onClose: () => void }) {
+export function PracticeDialog({
+	mode = "cluster",
+	selection,
+	onClose,
+}: {
+	mode?: PracticeDialogMode;
+	selection?: PracticeSelection;
+	onClose: () => void;
+}) {
 	const router = useRouter();
 	const { open: openSettings } = useSettingsDialog();
 	const [params, setParams] = useState<PracticeParams>({
@@ -302,7 +353,10 @@ export function PracticeDialog({ onClose }: { onClose: () => void }) {
 	const [failure, setFailure] = useState<PracticeFailure | null>(null);
 
 	// The picker's truth is the graph's clustering (fresh on open).
+	// The picker's truth is the graph's clustering (fresh on open) —
+	// cluster mode only; custom mode arrives with its selection in hand.
 	useEffect(() => {
+		if (mode !== "cluster") return;
 		let alive = true;
 		fetch("/api/graph/clusters", { cache: "no-store" })
 			.then((res) => res.json() as Promise<{ clusters: GraphClusterGroup[] }>)
@@ -330,8 +384,22 @@ export function PracticeDialog({ onClose }: { onClose: () => void }) {
 	}, [onClose]);
 
 	const run = useCallback(async () => {
+		if (busy) return;
+		// The POST payload, by mode: custom mode sends the chain table's
+		// nodeIds with NO title (the pipeline stamps its dated default);
+		// cluster mode resolves the group + posts its label as title.
+		let postNodeIds: string[];
+		let postTitle: string | undefined;
+		if (mode === "custom") {
+			if (!selection || selection.nodeIds.length === 0) return;
+			postNodeIds = selection.nodeIds;
+			postTitle = undefined;
+		} else {
 			const picked = (clusters ?? []).find((c) => c.key === selectedKey);
-    if (!picked || busy) return;
+			if (!picked) return;
+			postNodeIds = picked.nodeIds;
+			postTitle = picked.label ?? undefined;
+		}
 		setBusy(true);
 		setFailure(null);
 		try {
@@ -339,9 +407,9 @@ export function PracticeDialog({ onClose }: { onClose: () => void }) {
 				method: "POST",
 				headers: { "content-type": "application/json" },
 				body: JSON.stringify({
-          nodeIds: picked.nodeIds,
+					nodeIds: postNodeIds,
 					params,
-          title: picked.label ?? undefined,
+					title: postTitle,
 					note: note.trim() || undefined,
 				}),
 			});
@@ -367,7 +435,7 @@ export function PracticeDialog({ onClose }: { onClose: () => void }) {
 			});
 			setBusy(false);
 		}
-  }, [clusters, selectedKey, busy, params, note, router]);
+	}, [mode, selection, clusters, selectedKey, busy, params, note, router]);
 
 	return createPortal(
 		<div
@@ -377,7 +445,9 @@ export function PracticeDialog({ onClose }: { onClose: () => void }) {
 			}}
 		>
 			<PracticeDialogBody
+				mode={mode}
 				params={params}
+				selection={selection}
 				onParam={(patch) => setParams((prev) => ({ ...prev, ...patch }))}
 				note={note}
 				onNote={setNote}

docs/architecture.md

@@ -382,7 +382,7 @@ Practice turns the graph into problem sets the learner reasons through out loud.
 
 **The jobs pattern — registry, not JobRecords.** Practice runs are NOT Workbench jobs: no `JobStore` records, no steer messages, nothing ever wakes the teacher — a practice run isn't chat-scoped (a set outlives its birth session and has no lesson to re-enter; its result is itself, persisted in its own store and read by its own page). What it shares with the Workbench is the observability surface: a `globalThis` run registry (the module-instance idiom — `__lhPracticeRuns`) with PER-PROBLEM ROWS (owner ruling, 2026-09-29 — matching the extraction per-chunk pattern): `setId:partition` while the partitioner runs ("Partitioning — title"), then one `setId:gen:problemId` per problem ("queued"→"generating", label "Problem i/N — title"), and one `setId:grade:problemId` per graded answer ("queued"→"grading", "Grading i/N — title") — each row its OWN abort controller and its OWN usage accumulation; the row key IS the feed id (the dock dup-key law) and the abort target. ABORT ROUTES BY ROW SHAPE: a gen-row abort kills THAT problem only (siblings continue; the set still settles `ready` with one errored problem), a partition-row abort ends the whole run, a grade-row abort drops that grade (answer kept — one attempt, the problem stays done); set-level abort (delete) composes from row aborts plus the synchronous persisted marks. Model calls — partitioner included — run under the SHARED background-LLM semaphore (`bg-llm-semaphore.ts`): one process-wide pool of 3 permits for ALL background LLM jobs, extraction chunks included (total background LLM concurrency bounded at 3, whoever calls). A boot sweep marks orphaned `partitioning`/`generating` sets as `error "Interrupted (server restarted)"` — once per process, and only when the set's `updatedAt` heartbeat is >120s stale (a live run's 30s FILE watchdog keeps the heartbeat fresh even across dev's per-worker processes — the registry is not shared between them; the guard trio closed a live-stamping bug from the first live test) — the job runner's crash-honesty at set grain. Store writes serialize behind a per-set mutex; the pipeline is the sole writer of `data/practice`.
 
-**API + UI.** Creation is GRAPH-DOMAIN, not chat-domain (owner ruling 2026-09-29: "problem sets always take in nodes — graph objects"): `POST /api/practice/sets` takes `{nodeIds, params, title?, note?}` ONLY — no chatId, no clusterId; the UI resolves a picked cluster to its member node ids and passes the cluster's label as the title. The `note` is the learner's optional free-form creation input (owner, same evening: more learner control, no other purpose): trimmed, capped at 2000 characters, persisted on the set, and carried to the partitioner and every generator as `THE LEARNER'S NOTE` — an additional input the agents WEIGH but are never obliged to follow (the doctrine pins the stance: it never moves a problem off its rung or out of its band, and the partition laws always win). `GET /api/graph/clusters` serves the picker: the birth-session partition itself (`birthSessionPartition`, same ordering — size desc, ties by id) — EVERY group regardless of size (owner ruling, same evening: MIN_CLUSTER_SIZE is a hull-drawing rule; practice availability must not inherit a visual threshold), each as `{key, kind: "chat"|"notes", label, nodeIds, nodeCount}`; a cluster whose naming record is gone keeps `label: null` — honest, never guessed. 202 `{id}` with generation fire-and-forget; 400 empty selection (empty intersection with live nodes — the vanished-nodes edge) / bad params; 503 model/key refusal. `GET /api/practice/sets` · `GET/DELETE /api/practice/sets/[id]` (delete aborts live runs first) · `POST /api/practice/sets/[id]/answers` (202; 409 when not ready; 400 re-answering a submitted problem — one attempt). Surfaces: `/practice` (the list — the chat-pattern top bar with the sidebar reopen toggle and the New action at the right edge, status/counts rows, delete confirm, the new-set dialog with the named-level controls (a 5-detent ladder slider, a 3-detent cue slider, a Theory|Application toggle — each showing the level's name + definition), the cluster picker, and the optional free-form note textarea (typing-only) — the ONLY creation entry for now; the graph-view cluster entry comes later with the free-form selection UI) and `/practice/[id]` (the exam page — the chat-pattern top bar, a levels + status line, numbered problems, markdown statements with math healing at the display seam, a textarea + focus-gated dictation bar per problem with its OWN Submit button — one attempt per problem, instant solution/rubric reveal, the score landing live). Entry: the sidebar's Practice nav row.
+**API + UI.** Creation is GRAPH-DOMAIN, not chat-domain (owner ruling 2026-09-29: "problem sets always take in nodes — graph objects"): `POST /api/practice/sets` takes `{nodeIds, params, title?, note?}` ONLY — no chatId, no clusterId; the UI resolves a picked cluster to its member node ids and passes the cluster's label as the title. The `note` is the learner's optional free-form creation input (owner, same evening: more learner control, no other purpose): trimmed, capped at 2000 characters, persisted on the set, and carried to the partitioner and every generator as `THE LEARNER'S NOTE` — an additional input the agents WEIGH but are never obliged to follow (the doctrine pins the stance: it never moves a problem off its rung or out of its band, and the partition laws always win). `GET /api/graph/clusters` serves the picker: the birth-session partition itself (`birthSessionPartition`, same ordering — size desc, ties by id) — EVERY group regardless of size (owner ruling, same evening: MIN_CLUSTER_SIZE is a hull-drawing rule; practice availability must not inherit a visual threshold), each as `{key, kind: "chat"|"notes", label, nodeIds, nodeCount}`; a cluster whose naming record is gone keeps `label: null` — honest, never guessed. 202 `{id}` with generation fire-and-forget; 400 empty selection (empty intersection with live nodes — the vanished-nodes edge) / bad params; 503 model/key refusal. `GET /api/practice/sets` · `GET/DELETE /api/practice/sets/[id]` (delete aborts live runs first) · `POST /api/practice/sets/[id]/answers` (202; 409 when not ready; 400 re-answering a submitted problem — one attempt). Surfaces: `/practice` (the list — the chat-pattern top bar with the sidebar reopen toggle and the New action at the right edge, status/counts rows, delete confirm, the new-set dialog with the named-level controls (a 5-detent ladder slider, a 3-detent cue slider, a Theory|Application toggle — each showing the level's name + definition), the cluster picker, and the optional free-form note textarea (typing-only). The SECOND creation entry (owner plan, same evening): the graph view's **chain table** — a `Chains` button in the graph chrome (empty graph: hidden) opens a full-screen overlay (the session-overlay idiom: absolute inside the graph area, Esc/backdrop dismiss) listing EVERY reasoning chain via the core `formatChainLine` one-liner (`"Premise one, Premise two → Conclusion"`, singletons marked `"(no premises)"`), each row expanding to its member propositions and each member to its full statement; columns are birth session(s) (the clusters' honest label join — chat title / notes path / muted `unlabeled`) and created date; NO understanding-levels column (explicitly not built). Selection is checkboxes on whole chains or single propositions — a flat node-id set (a node in several chains is one selection) — with a fuzzy search (names, aliases, statements) that filters the LIST only. The pinned Selected section derives the agents' ACTUAL input live (`chainsForSelection` over the selection: a premise picked without its conclusion shows as the singleton it becomes) as `N propositions → M chains` + the derived lines, with Clear and **Generate problem set**, which opens the SAME creation dialog in **custom mode**: no cluster picker — a selection summary (the derived shape + the dated default title the pipeline will stamp) — posting `{nodeIds, params, note}` with no title. The overlay is read-only toward the graph and `/practice/[id]` (the exam page — the chat-pattern top bar, a levels + status line, numbered problems, markdown statements with math healing at the display seam, a textarea + focus-gated dictation bar per problem with its OWN Submit button — one attempt per problem, instant solution/rubric reveal, the score landing live). Entry: the sidebar's Practice nav row.
 
 **Model wiring.** Three roles — `partitioner`, `problemGenerator`, `grader` — all pinned to the **strong** slot (quality-critical, one settings edit from cheap) and in `BACKGROUND_MODEL_ROLES` (per-role overrides). The stage agents are single-submit loops on the shared `runSubmitAgent` seam (`submit-agent.ts`, extracted from extraction for exactly this): a `validate` hook turns a bad submit into a tool-input error the model retries against, within `maxTurns 4`; exhaustion fails the stage honestly (the set says so, the chains re-run cleanly on a new set).
 
@@ -469,7 +469,7 @@ All deterministic, no network: engines are injected (pi-ai's **faux provider**
 1. **Pure core units** — merger via real adapters, derivation, coverage, question grading, plan tree, phases, clusters, layout, tool-parts, prices, fuzzy search.
 2. **Server flows** — `handleChatRequest` driven end-to-end with scripted faux engines: persistence, liveness, steer claiming, the wake pipeline (409 retry, quiz deferral, idempotency), crash recovery, the data-dir seam (including a fresh child process).
 3. **Sub-agent loops** — researcher/demo-builder/visual-maker with fake headless APIs; the extraction pipeline end-to-end (audit drops, failure-checkpoints-nothing, single-flight, abort); the practice pipeline end-to-end (partition echo/coverage retries, failure isolation, semaphore width, abort mid-generation, grading, boot sweep).
-4. **Render tests** — transcript, cards, docks, composer, sidebar, coverage, stats, practice surfaces (creation dialog, list, exam states) via React server-side rendering (`renderToStaticMarkup`), no DOM library.
+4. **Render tests** — transcript, cards, docks, composer, sidebar, coverage, stats, practice surfaces (creation dialog both modes, chain table, list, exam states) via React server-side rendering (`renderToStaticMarkup`), no DOM library.
 
 Gates on every change: `tsc` clean, all tests, `eslint` clean, `next build` clean.
 

src/core/practice.ts

@@ -91,6 +91,24 @@ export function chainsToGraph(
 	return { nodeIds: [...nodeIds].sort(), edges };
 }
 
+/** A chain as one world-facing line — the propositions' NAMES joined
+ *  by the derivation arrow: "Premise one, Premise two → Conclusion"; a
+ *  singleton shows its "(no premises)" marker. Pure + browser-safe:
+ *  the shell (chain table, derived previews) cannot import the agent
+ *  module — the level tables set this precedent. Unknown ids fall back
+ *  to the raw id (honest, never guessed). Premises sort by id — the
+ *  same determinism law as chainsForSelection. */
+export function formatChainLine(
+	chain: Pick<ReasoningChain, "premises" | "conclusion">,
+	propositions: Readonly<Record<string, { name: string }>>,
+): string {
+	const nameOf = (id: string) => propositions[id]?.name ?? id;
+	const premises = [...chain.premises].sort().map(nameOf).join(", ");
+	return premises !== ""
+		? `${premises} → ${nameOf(chain.conclusion)}`
+		: `${nameOf(chain.conclusion)} (no premises)`;
+}
+
 /** chainCoverage()'s report. `missing` fails the partition; `duplicated`
  *  is informational — a chain MAY legitimately be exercised by several
  *  problems (the operations make that sound). */

tests/practice.test.ts

@@ -9,7 +9,7 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import type { EdgeType } from "../src/core/contracts.ts";
-import { chainCoverage, chainsForSelection, chainsToGraph } from "../src/core/practice.ts";
+import { chainCoverage, chainsForSelection, chainsToGraph, formatChainLine } from "../src/core/practice.ts";
 
 // ─── fixtures ────────────────────────────────────────────────────────────────
 
@@ -138,3 +138,24 @@ describe("chainCoverage", () => {
 		assert.deepEqual(chainCoverage(set), { missing: [], duplicated: [] });
 	});
 });
+
+describe("formatChainLine (the chain table's one-line shape, 2026-09-29)", () => {
+	const props = {
+		p1: { name: "Premise one" },
+		p2: { name: "Premise two" },
+		c1: { name: "Conclusion" },
+		solo: { name: "Standalone" },
+	};
+
+	it("joins sorted premise NAMES by the derivation arrow", () => {
+		assert.equal(formatChainLine({ premises: ["p2", "p1"], conclusion: "c1" }, props), "Premise one, Premise two → Conclusion");
+	});
+
+	it("a singleton shows its (no premises) marker", () => {
+		assert.equal(formatChainLine({ premises: [], conclusion: "solo" }, props), "Standalone (no premises)");
+	});
+
+	it("unknown ids fall back to the raw id (honest, never guessed)", () => {
+		assert.equal(formatChainLine({ premises: ["ghost"], conclusion: "c1" }, props), "ghost → Conclusion");
+	});
+});

tests/render-chain-table.test.tsx

@@ -0,0 +1,169 @@
+/**
+ * THE CHAIN TABLE — SSR render pins (the render-suite discipline: pure
+ * bodies, renderToStaticMarkup, testids). The chains overlay (owner-
+ * approved plan, 2026-09-29): every reasoning chain in one selectable
+ * table; the pinned Selected section derives N propositions → M chains
+ * via chainsForSelection over the selection (the agents' ACTUAL input);
+ * fuzzy search filters the list only; the practice dialog opens in
+ * CUSTOM mode from the Generate button.
+ */
+
+import React from "react";
+(globalThis as Record<string, unknown>).React = React;
+
+import assert from "node:assert/strict";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, it } from "node:test";
+import { ChainTableBody } from "../components/chain-table.tsx";
+import type { GraphEdge, GraphNode } from "../src/core/contracts.ts";
+
+/** The fixture graph — two follows-chains + one standalone:
+ *  a → c1, b → c1  (chain one), d → e (chain two), solo (singleton). */
+function node(id: string, name: string, statement: string, chatId: string | null): GraphNode {
+	return {
+		id,
+		name,
+		statement,
+		aliases: [],
+		state: "new",
+		createdAt: "2026-09-20T10:00:00.000Z",
+		provenance: chatId === null ? [] : [{ chatId, messageId: `m_${id}` }],
+	} as unknown as GraphNode;
+}
+
+const NODES: GraphNode[] = [
+	node("a", "Premise one", "Statement A.", "chat1"),
+	node("b", "Premise two", "Statement B.", "chat2"),
+	node("c1", "Conclusion", "Statement C.", "chat1"),
+	node("d", "Support", "Statement D.", null),
+	node("e", "Follow-up", "Statement E with keyword zebra.", "notes1"),
+	node("solo", "Standalone", "Statement S.", "chat1"),
+];
+
+const EDGES: GraphEdge[] = [
+	{ from: "a", to: "c1", type: "follows" },
+	{ from: "b", to: "c1", type: "follows" },
+	{ from: "d", to: "e", type: "follows" },
+] as GraphEdge[];
+
+const SESSIONS = { chat1: "Ethics lesson", chat2: "Second chat" };
+const FILE_SOURCES = { notes1: "notes/raw/ethics.md" };
+
+const BASE = {
+	nodes: NODES,
+	edges: EDGES,
+	sessions: SESSIONS,
+	fileSources: FILE_SOURCES,
+	query: "",
+	onQuery: () => {},
+	selection: new Set<string>(),
+	onToggleNode: () => {},
+	onToggleChain: () => {},
+	onClear: () => {},
+	onGenerate: () => {},
+	onClose: () => {},
+};
+
+function render(props: Partial<typeof BASE> = {}) {
+	return renderToStaticMarkup(createElement(ChainTableBody, { ...BASE, ...props }));
+}
+
+describe("ChainTableBody — the chain rows", () => {
+	it("renders every chain as a formatted name line, with birth + created columns", () => {
+		const html = render();
+		// chain ids are the conclusion ids (chainsForSelection's law)
+		assert.ok(html.includes('data-testid="chain-row-c1"'), "chain row for c1");
+		assert.ok(html.includes('data-testid="chain-row-e"'), "chain row for e");
+		assert.ok(html.includes('data-testid="chain-row-solo"'), "the singleton renders as its own chain");
+		assert.ok(html.includes("Premise one, Premise two → Conclusion"), "the two-premise line");
+		assert.ok(html.includes("Support → Follow-up"), "the one-premise line");
+		assert.ok(html.includes("Standalone (no premises)"), "the singleton marker");
+		// birth labels: the union of member labels, honest "unlabeled" included
+		assert.ok(html.includes("Ethics lesson · Second chat"), "chain one spans two labeled sessions");
+		assert.ok(html.includes("notes/raw/ethics.md"), "a notes birth shows the file path");
+		assert.ok(html.includes("unlabeled"), "an unnameable birth is honest about it");
+		// created = the conclusion's createdAt (the practice-list date shape)
+		assert.ok(html.includes('data-testid="chain-date-c1"'));
+		assert.ok(html.includes("2026-09-20"), "the date column renders");
+	});
+
+	it("the first chain row expands by default to member proposition rows; closed members keep their statements unmounted", () => {
+		const html = render();
+		assert.ok(html.includes('data-testid="prop-row-a"'), "premise row a");
+		assert.ok(html.includes('data-testid="prop-row-c1"'), "conclusion row");
+		// member statements expand on click — Radix unmounts closed
+		// content, so SSR honestly does not contain them
+		assert.ok(!html.includes("Statement A."), "statements wait for their click");
+	});
+
+	it("every chain has a checkbox; expanded chains expose member checkboxes", () => {
+		const html = render();
+		assert.ok(html.includes('data-testid="chain-checkbox-c1"'));
+		assert.ok(html.includes('data-testid="chain-checkbox-e"'));
+		assert.ok(html.includes('data-testid="chain-checkbox-solo"'));
+		assert.ok(html.includes('data-testid="prop-checkbox-a"'), "inside the default-open chain");
+	});
+});
+
+describe("ChainTableBody — the pinned Selected section", () => {
+	it("empty selection: guidance, no summary, no generate enablement pins", () => {
+		const html = render();
+		assert.ok(html.includes("Nothing selected"));
+		assert.ok(!html.includes('data-testid="chain-selected-summary"'));
+	});
+
+	it("a full chain selection: N propositions → M chains + derived line", () => {
+		const html = render({ selection: new Set(["a", "b", "c1"]) });
+		assert.ok(html.includes('data-testid="chain-selected-summary"'));
+		assert.ok(html.includes("3 propositions → 1 chain"), "the derived shape, exactly");
+		assert.ok(html.includes("Premise one, Premise two → Conclusion"), "the derived chain line");
+	});
+
+	it("a premise WITHOUT its conclusion derives as the singleton it becomes", () => {
+		const html = render({ selection: new Set(["a", "d"]) });
+		assert.ok(html.includes("2 propositions → 2 chains"), "no follows-edge survives inside the selection");
+		assert.ok(html.includes("Premise one (no premises)"), "regrouped singleton a");
+		assert.ok(html.includes("Support (no premises)"), "regrouped singleton d");
+	});
+
+	it("a node in several chains is ONE flat selection wherever it appears", () => {
+		// e is conclusion of d→e; picking e alone = 1 proposition, 1 singleton chain
+		const html = render({ selection: new Set(["e"]) });
+		assert.ok(html.includes("1 proposition → 1 chain"));
+		assert.ok(html.includes("Follow-up (no premises)"));
+	});
+
+	it("Clear + Generate problem set render in the pinned section", () => {
+		const html = render({ selection: new Set(["a"]) });
+		assert.ok(html.includes('data-testid="chain-clear"'));
+		assert.ok(html.includes('data-testid="chain-generate"'));
+		assert.ok(html.includes("Generate problem set"));
+	});
+});
+
+describe("ChainTableBody — the fuzzy search (list only, never Selected)", () => {
+	it("filters chains by member name / statement / alias; the pinned selection survives", () => {
+		const aliased = NODES.map((n) =>
+			n.id === "b" ? { ...n, aliases: ["zebra alias"] } : n,
+		);
+		const html = render({
+			nodes: aliased,
+			query: "zebra",
+			selection: new Set(["a", "b", "c1"]), // selection spans BOTH chains
+		});
+		// zebra hits: chain e (statement) + chain c1 (alias on b)
+		assert.ok(html.includes('data-testid="chain-row-c1"'), "alias match keeps the chain");
+		assert.ok(html.includes('data-testid="chain-row-e"'), "statement match keeps the chain");
+		assert.ok(!html.includes('data-testid="chain-row-solo"'), "non-matching chain hidden");
+		// the pinned section is never filtered — it still shows the full derived line
+		assert.ok(html.includes("3 propositions → 1 chain"));
+		assert.ok(html.includes("Premise one, Premise two → Conclusion"));
+	});
+
+	it("no matches: the honest empty line", () => {
+		const html = render({ query: "qqqq" });
+		assert.ok(html.includes('data-testid="chain-table-nomatch"'));
+		assert.ok(html.includes("No matching chains."));
+	});
+});

tests/render-graph-chrome.test.tsx

@@ -31,6 +31,7 @@ const PROPS = {
 	onImportFiles: () => {},
 	settings: {} as GraphRenderSettings,
 	changeSettings: () => {},
+	onOpenChains: () => {},
 };
 
 describe("GraphChromeRow — the empty-graph ruling (owner, 2026-09-25)", () => {
@@ -42,16 +43,18 @@ describe("GraphChromeRow — the empty-graph ruling (owner, 2026-09-25)", () =>
 		// the settings gear is the lucide-settings svg (tooltip wave: its old
 		// native title is gone — the styled tooltip carries the label now)
 		assert.ok(!html.includes("lucide-settings"), "settings is a lie on an empty graph");
+		assert.ok(!html.includes('data-testid="open-chain-table"'), "chains is a lie on an empty graph");
 		assert.ok(!html.includes("graph-chrome-fade-in"), "nothing gated = nothing fading in");
 	});
 
-	it("POPULATED graph: all three render, the gated pair carries the fade", () => {
+	it("POPULATED graph: all four render, the gated trio carries the fade", () => {
 		const html = renderToStaticMarkup(createElement(GraphChromeRow, { ...PROPS, isEmpty: false }));
 		assert.ok(html.includes('data-testid="import-notes"'));
 		assert.ok(html.includes("Search nodes…"));
 		assert.ok(html.includes("lucide-settings"), "the settings gear renders");
-		// the appear-once fade rides exactly the two gated controls, never Import Notes
+		assert.ok(html.includes('data-testid="open-chain-table"'), "the chains entry renders");
-		assert.equal(html.split("graph-chrome-fade-in").length - 1, 2, "two fade carriers: search + settings");
+		// the appear-once fade rides exactly the three gated controls, never Import Notes
+		assert.equal(html.split("graph-chrome-fade-in").length - 1, 3, "three fade carriers: search + chains + settings");
 	});
 
 	it("the no-match note renders only when the wrapper says so (its truth stays upstream)", () => {

tests/render-practice.test.tsx

@@ -189,6 +189,49 @@ describe("PracticeDialogBody — creation (cluster picker)", () => {
 	});
 });
 
+describe("PracticeDialogBody — creation (CUSTOM mode, the chains overlay's handoff)", () => {
+	const base = {
+		params: { ...DEFAULT_PRACTICE_PARAMS },
+		onParam: () => {},
+		note: "",
+		onNote: () => {},
+		clusters: clusters(),
+		selectedKey: null,
+		onSelect: () => {},
+		busy: false,
+		failure: null as PracticeFailure | null,
+		onOpenSettings: () => {},
+		onClose: () => {},
+		onRun: () => {},
+	};
+
+	it("no cluster picker — the selection summary + dated default title instead", () => {
+		const html = renderToStaticMarkup(
+			<PracticeDialogBody
+				{...base}
+				mode="custom"
+				selection={{ nodeIds: ["n1", "n2", "n3", "n4"], propositions: 4, chains: 2 }}
+			/>,
+		);
+		assert.ok(!html.includes('data-testid="practice-dialog-clusters"'), "custom mode has no picker");
+		assert.ok(html.includes('data-testid="practice-dialog-selection"'));
+		assert.match(html, /Practice — (<!-- -->)?\d{4}-\d{2}-\d{2}/, "the dated default title (the pipeline's own stamp)");
+		assert.ok(html.includes('data-testid="practice-dialog-selection-line"'));
+		assert.ok(html.includes("4 propositions"));
+		assert.ok(html.includes("2 chains"));
+		assert.ok(!html.includes('disabled=""'), "a non-empty selection enables Create immediately");
+	});
+
+	it("dials + note still ride along — the params/note laws are mode-independent", () => {
+		const html = renderToStaticMarkup(
+			<PracticeDialogBody {...base} mode="custom" selection={{ nodeIds: ["n1"], propositions: 1, chains: 1 }} />,
+		);
+		assert.ok(html.includes('data-testid="param-ladder"'));
+		assert.ok(html.includes('data-testid="practice-note"'));
+		assert.ok(html.includes("1 proposition →"));
+	});
+});
+
 // ─── the list page ───────────────────────────────────────────────────────────
 
 describe("PracticeListBody — the set list", () => {