chain table redesign (owner refinements, 2026-09-29 evening)
- full-bleed: blur + translucent surface IS the overlay, no inner card; own top bar (info + search + close, lh-no-drag so home's drag mask never eats the X — the clickability bug) - three levels, one click each: cluster (birth session; a chain lives in its CONCLUSION's cluster) → chain → proposition STATEMENTS revealed directly (names never twice; singletons one click); all collapsed by default - proposition names as outlined chips, → connectors between; lonely chip = standalone proposition — the '(no premises)' annotation is dead in the visible UI (survives only as aria-label); Folder/Waypoints icons; rotating chevrons; deep statement indent - real table look: hairline row + column lines; sortable Name + Created headers (click toggles asc/desc; size is text, not a control) - selection never shifts layout: floating bottom bar (Google-Photos pattern) with N propositions → M chains + Clear + Generate - fuzzy search grouped + auto-expanding clusters live-verified end-to-end on the owner's dev server; 15 rewritten render pins; gates: tsc 0, 1179/1179, lint 0, build 0
This commit is contained in:
amosblomqvist
@@ -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.
|
**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. 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.
|
**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 — a full-bleed sortable table of every reasoning chain, grouped by birth cluster, selecting chips, chains, or whole clusters, whose floating selection bar 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.
|
**Dictation.** Optional speech-to-text: the server mints short-lived Deepgram tokens; audio streams browser→Deepgram over WebSocket, never through the server.
|
||||||
|
|
||||||
|
|||||||
+496
-422
@@ -1,92 +1,465 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* THE CHAIN TABLE (chains overlay, owner-approved plan 2026-09-29): every
|
* THE CHAIN TABLE (chains overlay; owner redesign, 2026-09-29 evening):
|
||||||
* reasoning chain of the graph in one selectable table — the graph view's
|
* every reasoning chain of the graph in one FULL-BLEED table — the blur
|
||||||
* practice entry for FREE-FORM selections, complementing the cluster
|
* + translucent background IS the surface, no inner card (owner ruling:
|
||||||
* picker (which stays the /practice page's only creation mode). Read-only
|
* "full width of the area"). The overlay's own top bar carries the info
|
||||||
* toward the graph: it renders the snapshot it is handed, selects node
|
* + the close button (lh-no-drag — it lives inside home's 52px drag
|
||||||
* ids, and hands the selection to the practice dialog's CUSTOM mode.
|
* mask, and being later in the DOM the carve-out sticks; that mask was
|
||||||
|
* what ate the old card's X clicks).
|
||||||
*
|
*
|
||||||
* MOUNT IDIOM (the session-overlay precedent, session-overlay.tsx): the
|
* HIERARCHY (three levels, one click each): CLUSTER (the birth session —
|
||||||
* overlay is ABSOLUTE INSIDE the graph area (never a body portal) —
|
* a chat or a notes file; a chain lives where its CONCLUSION was born,
|
||||||
* inset-0, z-40, bg-background/80 + backdrop blur — so the app chrome
|
* owner ruling) → REASONING CHAIN → PROPOSITION STATEMENTS. Expanding a
|
||||||
* (drag bar, sidebar) stays sharp and reachable; Esc and backdrop clicks
|
* chain reveals its members' statement TEXT directly — the names already
|
||||||
* dismiss.
|
* live in the chain line, so they never render twice; a singleton chain
|
||||||
|
* reveals its one statement in a single click. Everything starts
|
||||||
|
* COLLAPSED (owner ruling — no arbitrary default expansion).
|
||||||
*
|
*
|
||||||
* STRUCTURE: a fuzzy search box (names, aliases, statements — core's
|
* THE TABLE LOOK: drawn hairline row + column lines; sortable column
|
||||||
* fuzzyScore) at the very top filters the chain list only; the SELECTED
|
* headers (Name + Created clickable, owner ruling — the size column is
|
||||||
* section is pinned beneath it, never filtered — N propositions → M
|
* text, not a control). In the chain line every proposition name is a
|
||||||
* chains via chainsForSelection over the selection (the agents' ACTUAL
|
* faint-outlined CHIP and the → a clearly separated connector between
|
||||||
* input: a selected premise without its conclusion shows as the singleton
|
* chips (owner ruling) — a lonely chip with no connector reads as a
|
||||||
* it becomes). Chain rows (the core formatter's name line) expand to
|
* standalone proposition; the "(no premises)" text annotation is dead.
|
||||||
* indented member proposition rows; each member expands its full
|
* Icons: clusters FolderIcon (opens when expanded), chains WaypointsIcon
|
||||||
* statement inline. Columns: checkbox | chain/proposition tree | birth
|
* (the sidebar's graph glyph), propositions chip-only. Chevrons rotate
|
||||||
* session(s) | created. NO understanding-levels column (explicitly not
|
* with expansion state.
|
||||||
* built — no dead markup).
|
|
||||||
*
|
*
|
||||||
* Named neutrally (ChainTable, not Practice*) — the table is a
|
* SELECTION never shifts layout (owner ruling): a floating bottom bar —
|
||||||
* graph-surface; only the Generate handoff knows about practice.
|
* the Google-Photos pattern — appears only when something is selected,
|
||||||
|
* showing the agents' ACTUAL input (chainsForSelection over the flat
|
||||||
|
* node-id selection: a premise without its conclusion counts as the
|
||||||
|
* singleton it becomes) + Clear + Generate problem set (the one action
|
||||||
|
* for now; the bar is a neutral action slot for future ones). The fuzzy
|
||||||
|
* search (names, aliases, statements) filters chains; clusters with
|
||||||
|
* matches auto-expand, others hide — the collapsed grouped view returns
|
||||||
|
* when the query clears.
|
||||||
|
*
|
||||||
|
* Read-only toward the graph. Named neutrally (ChainTable, not
|
||||||
|
* Practice*) — only the Generate handoff knows about practice.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { useEffect, useMemo, useState } from "react";
|
import { useEffect, useMemo, useState } from "react";
|
||||||
import { ListTreeIcon, SearchIcon, XIcon } from "lucide-react";
|
import {
|
||||||
|
ChevronRightIcon,
|
||||||
|
FolderIcon,
|
||||||
|
FolderOpenIcon,
|
||||||
|
ListTreeIcon,
|
||||||
|
SearchIcon,
|
||||||
|
WaypointsIcon,
|
||||||
|
XIcon,
|
||||||
|
} from "lucide-react";
|
||||||
import { chainsForSelection, formatChainLine, fuzzyScore } from "@/src/core";
|
import { chainsForSelection, formatChainLine, fuzzyScore } from "@/src/core";
|
||||||
import type { GraphEdge, GraphNode } from "@/src/core";
|
import type { GraphEdge, GraphNode } from "@/src/core";
|
||||||
import {
|
|
||||||
Collapsible,
|
|
||||||
CollapsibleContent,
|
|
||||||
CollapsibleTrigger,
|
|
||||||
} from "@/components/ui/collapsible";
|
|
||||||
import { PracticeDialog } from "@/components/practice-dialog";
|
import { PracticeDialog } from "@/components/practice-dialog";
|
||||||
|
|
||||||
/** The grid every row shares: checkbox | tree | birth | date. */
|
/** The shared row grid: checkbox | chevron | icon | content | props | created. */
|
||||||
const ROW_COLS = "grid-cols-[1.5rem_minmax(0,1fr)_9rem_5.5rem]";
|
const ROW_COLS = "grid-cols-[1.75rem_1.25rem_1.5rem_minmax(0,1fr)_5.5rem_6rem]";
|
||||||
|
|
||||||
/** A node's birth-session label, mirroring the clusters' honesty join:
|
/** The sortable columns (owner ruling: Name + Created only — size is text). */
|
||||||
* the first surviving provenance point's chatId → chat title / notes
|
export type ChainSortCol = "name" | "created";
|
||||||
* file path, null when unnameable (rendered muted "unlabeled", never
|
export interface ChainSort {
|
||||||
* guessed). Inlined here (one line) because session-clusters.ts is not
|
col: ChainSortCol;
|
||||||
* barrel-exported — the graph stream owns it; the shape is contract-
|
/** 1 = ascending (A→Z, oldest-first), -1 = descending. */
|
||||||
* pinned (provenance[0] is the birth by the getGraph fold order). */
|
dir: 1 | -1;
|
||||||
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
|
/** A cluster's chains share the conclusion's birth (owner ruling). This
|
||||||
* id (deterministic); a member with no nameable birth contributes a
|
* record is assembled per render from the visible chains. */
|
||||||
* muted "unlabeled" entry (honest, per the clusters law). */
|
interface ClusterGroup {
|
||||||
function chainBirthLabels(
|
key: string;
|
||||||
chain: { premises: string[]; conclusion: string },
|
birth: string | null;
|
||||||
byId: Map<string, GraphNode>,
|
label: string | null;
|
||||||
sessions: Record<string, string>,
|
kind: "chat" | "notes" | null;
|
||||||
fileSources: Record<string, string>,
|
chains: ReturnType<typeof chainsForSelection>;
|
||||||
): string[] {
|
nodeIds: string[];
|
||||||
const labels = new Map<string, string>();
|
newestCreatedAt: string;
|
||||||
for (const id of [...chain.premises, chain.conclusion]) {
|
}
|
||||||
const node = byId.get(id);
|
|
||||||
if (!node) continue;
|
/** The table's pure body — exported for SSR pins (the render-suite
|
||||||
const birth = node.provenance[0]?.chatId ?? null;
|
* discipline). All state (query, sort, selection, expansion) arrives
|
||||||
if (birth === null) {
|
* via props; the overlay wrapper below owns it. */
|
||||||
labels.set("\0unlabeled", "unlabeled");
|
export function ChainTableBody({
|
||||||
continue;
|
nodes,
|
||||||
|
edges,
|
||||||
|
sessions,
|
||||||
|
fileSources,
|
||||||
|
query,
|
||||||
|
onQuery,
|
||||||
|
sort,
|
||||||
|
onSort,
|
||||||
|
selection,
|
||||||
|
expandedClusters,
|
||||||
|
expandedChains,
|
||||||
|
onToggleCluster,
|
||||||
|
onToggleChain,
|
||||||
|
onToggleNodes,
|
||||||
|
onClear,
|
||||||
|
onGenerate,
|
||||||
|
onClose,
|
||||||
|
}: {
|
||||||
|
nodes: GraphNode[];
|
||||||
|
edges: GraphEdge[];
|
||||||
|
sessions: Record<string, string>;
|
||||||
|
fileSources: Record<string, string>;
|
||||||
|
query: string;
|
||||||
|
onQuery: (v: string) => void;
|
||||||
|
sort: ChainSort;
|
||||||
|
onSort: (col: ChainSortCol) => void;
|
||||||
|
selection: ReadonlySet<string>;
|
||||||
|
expandedClusters: ReadonlySet<string>;
|
||||||
|
expandedChains: ReadonlySet<string>;
|
||||||
|
onToggleCluster: (key: string) => void;
|
||||||
|
onToggleChain: (id: string) => void;
|
||||||
|
/** Selection is ALWAYS a flat node-id set — cluster, chain, and single
|
||||||
|
* proposition checks all reduce to this. */
|
||||||
|
onToggleNodes: (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 searching = query.trim() !== "";
|
||||||
|
|
||||||
|
// The fuzzy filter: a chain is visible when ANY member matches on
|
||||||
|
// name, aliases, or statement; chains rank by best member score.
|
||||||
|
const visibleChains = useMemo(() => {
|
||||||
|
if (!searching) return chains;
|
||||||
|
const scored = chains
|
||||||
|
.map((chain) => {
|
||||||
|
let best: number | null = null;
|
||||||
|
for (const id of [...chain.premises, chain.conclusion]) {
|
||||||
|
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 best === null ? null : { chain, best };
|
||||||
|
})
|
||||||
|
.filter((r): r is { chain: (typeof chains)[number]; best: number } => r !== null);
|
||||||
|
return scored
|
||||||
|
.sort((a, b) => b.best - a.best || (a.chain.id < b.chain.id ? -1 : 1))
|
||||||
|
.map(({ chain }) => chain);
|
||||||
|
}, [chains, byId, query, searching]);
|
||||||
|
|
||||||
|
// Group the visible chains by their CONCLUSION's birth (owner ruling).
|
||||||
|
// Unlabeled births (provenance gone / never named) form one honest
|
||||||
|
// muted group, sorted last under name-sort.
|
||||||
|
const groups = useMemo(() => {
|
||||||
|
const map = new Map<string, ClusterGroup>();
|
||||||
|
for (const chain of visibleChains) {
|
||||||
|
const conclusion = byId.get(chain.conclusion);
|
||||||
|
const birth = conclusion?.provenance[0]?.chatId ?? null;
|
||||||
|
const key = birth ?? "\0unlabeled";
|
||||||
|
let group = map.get(key);
|
||||||
|
if (!group) {
|
||||||
|
const label = birth === null ? null : (sessions[birth] ?? fileSources[birth] ?? null);
|
||||||
|
const kind = birth === null ? null : sessions[birth] !== undefined ? "chat" : fileSources[birth] !== undefined ? "notes" : null;
|
||||||
|
group = { key, birth, label, kind, chains: [], nodeIds: [], newestCreatedAt: "" };
|
||||||
|
map.set(key, group);
|
||||||
|
}
|
||||||
|
group.chains.push(chain);
|
||||||
|
for (const id of [...chain.premises, chain.conclusion]) {
|
||||||
|
if (!group.nodeIds.includes(id)) group.nodeIds.push(id);
|
||||||
|
const createdAt = byId.get(id)?.createdAt ?? "";
|
||||||
|
if (createdAt > group.newestCreatedAt) group.newestCreatedAt = createdAt;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
labels.set(birth, sessions[birth] ?? fileSources[birth] ?? "unlabeled");
|
const collator = new Intl.Collator(undefined, { sensitivity: "base", numeric: true });
|
||||||
}
|
const nameKey = (g: ClusterGroup) => g.label ?? "\uffff"; // unlabeled last
|
||||||
return [...labels.entries()]
|
const list = [...map.values()];
|
||||||
.sort((a, b) => (a[0] < b[0] ? -1 : 1))
|
if (sort.col === "created") {
|
||||||
.map(([, label]) => label);
|
list.sort((a, b) =>
|
||||||
|
sort.dir === -1
|
||||||
|
? b.newestCreatedAt.localeCompare(a.newestCreatedAt)
|
||||||
|
: a.newestCreatedAt.localeCompare(b.newestCreatedAt),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
list.sort((a, b) => collator.compare(nameKey(a), nameKey(b)) * sort.dir);
|
||||||
|
}
|
||||||
|
for (const group of list) {
|
||||||
|
if (sort.col === "created") {
|
||||||
|
group.chains.sort((a, b) => {
|
||||||
|
const da = byId.get(a.conclusion)?.createdAt ?? "";
|
||||||
|
const db = byId.get(b.conclusion)?.createdAt ?? "";
|
||||||
|
return sort.dir === -1 ? db.localeCompare(da) : da.localeCompare(db);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
group.chains.sort((a, b) => {
|
||||||
|
const na = byId.get(a.conclusion)?.name ?? a.conclusion;
|
||||||
|
const nb = byId.get(b.conclusion)?.name ?? b.conclusion;
|
||||||
|
return collator.compare(na, nb) * sort.dir;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return list;
|
||||||
|
}, [visibleChains, byId, sessions, fileSources, sort]);
|
||||||
|
|
||||||
|
// The derived shape under the floating bar (the agents' ACTUAL input).
|
||||||
|
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 nameOf = (id: string) => byId.get(id)?.name ?? id;
|
||||||
|
const dateOf = (id: string) => byId.get(id)?.createdAt.slice(0, 10) ?? "";
|
||||||
|
const sortArrow = (col: ChainSortCol) =>
|
||||||
|
sort.col !== col ? "" : sort.dir === 1 ? "▲" : "▼";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div data-testid="chain-table" className="relative flex h-full min-h-0 flex-col">
|
||||||
|
{/* The overlay's own top bar (owner ruling): info + search + close.
|
||||||
|
lh-no-drag — this strip sits inside home's 52px window-drag mask,
|
||||||
|
and being later in the DOM the carve-out sticks (the mask law,
|
||||||
|
home.tsx). pl-12 clears the floating sidebar toggle (top-left). */}
|
||||||
|
<div className="lh-no-drag flex h-13 shrink-0 items-center gap-3 border-b border-border/60 pl-12 pr-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" />
|
||||||
|
<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-64 rounded-lg border bg-background pl-8 pr-3 text-xs outline-none placeholder:text-muted-foreground focus:border-ring"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-testid="chain-table-close"
|
||||||
|
onClick={onClose}
|
||||||
|
aria-label="Close chains"
|
||||||
|
className="flex size-8 items-center justify-center rounded-lg 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 table: hairline column + row lines (owner ruling — a real
|
||||||
|
table look). Sortable headers on Name + Created only. */}
|
||||||
|
<div className="min-h-0 flex-1 overflow-y-auto">
|
||||||
|
<div className={`sticky top-0 z-10 grid ${ROW_COLS} items-center gap-1 border-b border-border/60 bg-background/95 px-3 py-1.5 text-[11px] uppercase tracking-widest text-muted-foreground/70 backdrop-blur`}>
|
||||||
|
<span />
|
||||||
|
<span />
|
||||||
|
<span />
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-testid="sort-name"
|
||||||
|
onClick={() => onSort("name")}
|
||||||
|
aria-sort={sort.col === "name" ? (sort.dir === 1 ? "ascending" : "descending") : "none"}
|
||||||
|
className="flex items-center gap-1 text-left uppercase tracking-widest transition-colors hover:text-foreground"
|
||||||
|
>
|
||||||
|
Name <span aria-hidden="true">{sortArrow("name")}</span>
|
||||||
|
</button>
|
||||||
|
<span className="border-l border-border/40 pl-2">Props</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-testid="sort-created"
|
||||||
|
onClick={() => onSort("created")}
|
||||||
|
aria-sort={sort.col === "created" ? (sort.dir === 1 ? "ascending" : "descending") : "none"}
|
||||||
|
className="flex items-center gap-1 border-l border-border/40 pl-2 text-left uppercase tracking-widest transition-colors hover:text-foreground"
|
||||||
|
>
|
||||||
|
Created <span aria-hidden="true">{sortArrow("created")}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{groups.length === 0 && (
|
||||||
|
<div data-testid="chain-table-nomatch" className="px-4 pt-3 text-xs text-muted-foreground">
|
||||||
|
No matching chains.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{groups.map((group) => {
|
||||||
|
const open = searching || expandedClusters.has(group.key);
|
||||||
|
const selectedCount = group.nodeIds.filter((id) => selection.has(id)).length;
|
||||||
|
return (
|
||||||
|
<div key={group.key} data-testid={`cluster-group-${group.key}`}>
|
||||||
|
{/* The cluster row: birth-session group header. */}
|
||||||
|
<div className={`grid ${ROW_COLS} items-center gap-1 border-b border-border/40 px-3 py-1.5`}>
|
||||||
|
<span>
|
||||||
|
<RowCheckbox
|
||||||
|
checked={selectedCount === group.nodeIds.length && group.nodeIds.length > 0}
|
||||||
|
indeterminate={selectedCount > 0 && selectedCount < group.nodeIds.length}
|
||||||
|
onToggle={(next) => onToggleNodes(group.nodeIds, next)}
|
||||||
|
testid={`cluster-checkbox-${group.key}`}
|
||||||
|
label={`Select everything born in ${group.label ?? "unlabeled"}`}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<Expander open={open} onClick={() => onToggleCluster(group.key)} testid={`cluster-toggle-${group.key}`} label={`Expand cluster ${group.label ?? "unlabeled"}`} />
|
||||||
|
<span className="flex items-center justify-center text-muted-foreground">
|
||||||
|
{open ? <FolderOpenIcon className="size-3.5" /> : <FolderIcon className="size-3.5" />}
|
||||||
|
</span>
|
||||||
|
<span className="min-w-0 truncate text-sm font-medium">
|
||||||
|
{group.label ?? <span className="text-muted-foreground/60">unlabeled</span>}
|
||||||
|
{group.kind === "notes" && <span className="ml-2 text-[11px] uppercase tracking-widest text-muted-foreground/60">notes</span>}
|
||||||
|
</span>
|
||||||
|
<span className="border-l border-border/40 pl-2 text-xs tabular-nums text-muted-foreground">
|
||||||
|
{group.nodeIds.length}
|
||||||
|
</span>
|
||||||
|
<span className="border-l border-border/40 pl-2 text-xs tabular-nums text-muted-foreground">
|
||||||
|
{group.newestCreatedAt.slice(0, 10)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* The chain rows (visible only when the cluster is open —
|
||||||
|
searching auto-expands, owner ruling). */}
|
||||||
|
{open &&
|
||||||
|
group.chains.map((chain) => {
|
||||||
|
const memberIds = [...chain.premises, chain.conclusion];
|
||||||
|
const chainOpen = expandedChains.has(chain.id);
|
||||||
|
const selectedInChain = memberIds.filter((id) => selection.has(id)).length;
|
||||||
|
return (
|
||||||
|
<div key={chain.id} data-testid={`chain-block-${chain.id}`}>
|
||||||
|
<div
|
||||||
|
data-testid={`chain-row-${chain.id}`}
|
||||||
|
aria-label={formatChainLine(chain, Object.fromEntries([...byId.entries()].map(([id, n]) => [id, { name: n.name }])))}
|
||||||
|
className={`grid ${ROW_COLS} items-center gap-1 border-b border-border/40 px-3 py-1.5`}
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<RowCheckbox
|
||||||
|
checked={selectedInChain === memberIds.length && memberIds.length > 0}
|
||||||
|
indeterminate={selectedInChain > 0 && selectedInChain < memberIds.length}
|
||||||
|
onToggle={(next) => onToggleNodes(memberIds, next)}
|
||||||
|
testid={`chain-checkbox-${chain.id}`}
|
||||||
|
label={`Select chain ${nameOf(chain.conclusion)}`}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<Expander open={chainOpen} onClick={() => onToggleChain(chain.id)} testid={`chain-toggle-${chain.id}`} label={`Expand chain ${nameOf(chain.conclusion)}`} />
|
||||||
|
<span className="flex items-center justify-center text-muted-foreground">
|
||||||
|
<WaypointsIcon className="size-3.5" />
|
||||||
|
</span>
|
||||||
|
{/* The chain line: proposition names as faint-outlined
|
||||||
|
chips, → the connector BETWEEN them (owner ruling) — a
|
||||||
|
lonely chip reads as a standalone proposition. */}
|
||||||
|
<span className="flex min-w-0 flex-wrap items-center gap-x-0.5 gap-y-1 text-[13px] leading-tight">
|
||||||
|
{memberIds.map((id, i) => (
|
||||||
|
<span key={id} className="flex items-center">
|
||||||
|
{i > 0 && <span data-testid={`chain-arrow-${chain.id}-${i}`} className="px-1.5 text-muted-foreground/50">→</span>}
|
||||||
|
<span
|
||||||
|
data-testid={`prop-chip-${id}`}
|
||||||
|
className="rounded border border-border/70 bg-muted/30 px-1.5 py-0.5"
|
||||||
|
>
|
||||||
|
{nameOf(id)}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</span>
|
||||||
|
<span className="border-l border-border/40 pl-2 text-xs tabular-nums text-muted-foreground">
|
||||||
|
{memberIds.length}
|
||||||
|
</span>
|
||||||
|
<span className="border-l border-border/40 pl-2 text-xs tabular-nums text-muted-foreground">
|
||||||
|
{dateOf(chain.conclusion)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* The propositions — their STATEMENT text directly (owner
|
||||||
|
ruling: names already live in the line; never shown twice;
|
||||||
|
a singleton reveals its one statement in a single click).
|
||||||
|
Deep indent under the chain. */}
|
||||||
|
{chainOpen &&
|
||||||
|
memberIds.map((id) => {
|
||||||
|
const node = byId.get(id);
|
||||||
|
if (!node) return null;
|
||||||
|
const isConclusion = id === chain.conclusion;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={id}
|
||||||
|
data-testid={`prop-row-${id}`}
|
||||||
|
className={`grid ${ROW_COLS} items-start gap-1 border-b border-border/40 bg-muted/10 px-3 py-1.5`}
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<RowCheckbox
|
||||||
|
checked={selection.has(id)}
|
||||||
|
onToggle={(next) => onToggleNodes([id], next)}
|
||||||
|
testid={`prop-checkbox-${id}`}
|
||||||
|
label={`Select proposition ${node.name}`}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span />
|
||||||
|
<span />
|
||||||
|
<span className="min-w-0 pl-10 text-xs leading-relaxed text-muted-foreground">
|
||||||
|
{isConclusion && <span data-testid={`prop-conclusion-${id}`} className="mr-1.5 text-foreground/60">→</span>}
|
||||||
|
{node.statement}
|
||||||
|
</span>
|
||||||
|
<span className="border-l border-border/40" />
|
||||||
|
<span className="border-l border-border/40" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* The floating selection bar (owner ruling: never shifts layout —
|
||||||
|
the Google-Photos pattern). Appears only when something is
|
||||||
|
selected; floats over the table's bottom edge. */}
|
||||||
|
{selection.size > 0 && (
|
||||||
|
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 flex justify-center pb-4">
|
||||||
|
<div
|
||||||
|
data-testid="chain-selection-bar"
|
||||||
|
className="pointer-events-auto flex items-center gap-3 rounded-full border bg-card px-4 py-2 shadow-lg"
|
||||||
|
>
|
||||||
|
<span data-testid="chain-selected-summary" className="text-xs font-medium">
|
||||||
|
{selection.size} {selection.size === 1 ? "proposition" : "propositions"} →{" "}
|
||||||
|
{derived.length} {derived.length === 1 ? "chain" : "chains"}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-testid="chain-clear"
|
||||||
|
onClick={onClear}
|
||||||
|
className="rounded-full px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||||
|
>
|
||||||
|
Clear
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-testid="chain-generate"
|
||||||
|
onClick={onGenerate}
|
||||||
|
className="rounded-full bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
|
||||||
|
>
|
||||||
|
Generate problem set
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/** The checkbox — checked/indeterminate (a chain with SOME members
|
/** The rotating chevron — collapsed points right, expanded rotates down
|
||||||
* selected); clicks stop at the checkbox so they never toggle the
|
* (owner ruling: the affordance must read on every expandable row). */
|
||||||
* surrounding Collapsible row. */
|
function Expander({ open, onClick, testid, label }: { open: boolean; onClick: () => void; testid: string; label: string }) {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-testid={testid}
|
||||||
|
onClick={onClick}
|
||||||
|
aria-label={label}
|
||||||
|
aria-expanded={open}
|
||||||
|
className="flex size-5 items-center justify-center rounded text-muted-foreground/70 transition-colors hover:bg-accent hover:text-foreground"
|
||||||
|
>
|
||||||
|
<ChevronRightIcon className={`size-3.5 transition-transform ${open ? "rotate-90" : ""}`} />
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** The checkbox — checked/indeterminate (partial chains/clusters); DOM
|
||||||
|
* property set via ref (React does not expose `indeterminate`). */
|
||||||
function RowCheckbox({
|
function RowCheckbox({
|
||||||
checked,
|
checked,
|
||||||
indeterminate = false,
|
indeterminate = false,
|
||||||
@@ -104,321 +477,22 @@ function RowCheckbox({
|
|||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={checked}
|
checked={checked}
|
||||||
// `indeterminate` is a DOM property React does not expose — set it
|
|
||||||
// on the node directly (the chain rows' partial state).
|
|
||||||
ref={(el) => {
|
ref={(el) => {
|
||||||
if (el) el.indeterminate = indeterminate;
|
if (el) el.indeterminate = indeterminate;
|
||||||
}}
|
}}
|
||||||
data-testid={testid}
|
data-testid={testid}
|
||||||
aria-label={label}
|
aria-label={label}
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
onChange={(e) => onToggle(e.target.checked)}
|
onChange={(e) => onToggle(e.target.checked)}
|
||||||
className="size-3.5 accent-primary"
|
className="size-3.5 accent-primary"
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/** The table's pure body — exported for SSR pins (the render-suite
|
/** The graph view's overlay wrapper: owns query + sort + selection +
|
||||||
* discipline). All state (query, selection) arrives via props; the
|
* expansion + the custom practice dialog; mounts ABSOLUTE INSIDE the
|
||||||
* overlay wrapper below owns it. */
|
* graph area, full-bleed (owner ruling: the translucent blurred surface
|
||||||
export function ChainTableBody({
|
* IS the overlay — no inner card). Esc + the top-bar X dismiss (there
|
||||||
nodes,
|
* is no backdrop margin to click anymore). Read-only toward the graph. */
|
||||||
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({
|
export function ChainTableOverlay({
|
||||||
open,
|
open,
|
||||||
nodes,
|
nodes,
|
||||||
@@ -435,9 +509,10 @@ export function ChainTableOverlay({
|
|||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
}) {
|
}) {
|
||||||
const [query, setQuery] = useState("");
|
const [query, setQuery] = useState("");
|
||||||
const [selection, setSelection] = useState<ReadonlySet<string>>(
|
const [sort, setSort] = useState<ChainSort>({ col: "name", dir: 1 });
|
||||||
() => new Set(),
|
const [selection, setSelection] = useState<ReadonlySet<string>>(() => new Set());
|
||||||
);
|
const [expandedClusters, setExpandedClusters] = useState<ReadonlySet<string>>(() => new Set());
|
||||||
|
const [expandedChains, setExpandedChains] = useState<ReadonlySet<string>>(() => new Set());
|
||||||
const [dialogOpen, setDialogOpen] = useState(false);
|
const [dialogOpen, setDialogOpen] = useState(false);
|
||||||
|
|
||||||
// Esc dismisses (unless the practice dialog has focus — its own Esc
|
// Esc dismisses (unless the practice dialog has focus — its own Esc
|
||||||
@@ -454,63 +529,62 @@ export function ChainTableOverlay({
|
|||||||
if (!open) return null;
|
if (!open) return null;
|
||||||
|
|
||||||
const byId = new Map(nodes.map((n) => [n.id, n]));
|
const byId = new Map(nodes.map((n) => [n.id, n]));
|
||||||
const selectedNodes = [...selection]
|
const selectedNodes = [...selection].map((id) => byId.get(id)).filter((n): n is GraphNode => n !== undefined);
|
||||||
.map((id) => byId.get(id))
|
|
||||||
.filter((n): n is GraphNode => n !== undefined);
|
|
||||||
const derived = chainsForSelection(selectedNodes, edges);
|
const derived = chainsForSelection(selectedNodes, edges);
|
||||||
const nodeIds = [...selection].sort();
|
const nodeIds = [...selection].sort();
|
||||||
|
|
||||||
|
const toggleNodes = (ids: string[], next: boolean) =>
|
||||||
|
setSelection((prev) => {
|
||||||
|
const s = new Set(prev);
|
||||||
|
for (const id of ids) {
|
||||||
|
if (next) s.add(id);
|
||||||
|
else s.delete(id);
|
||||||
|
}
|
||||||
|
return s;
|
||||||
|
});
|
||||||
|
const toggleIn = (set: ReadonlySet<string>, id: string) => {
|
||||||
|
const s = new Set(set);
|
||||||
|
if (s.has(id)) s.delete(id);
|
||||||
|
else s.add(id);
|
||||||
|
return s;
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
data-testid="chain-table-overlay"
|
data-testid="chain-table-overlay"
|
||||||
className="absolute inset-0 z-40 flex items-center justify-center bg-background/80 p-4 backdrop-blur-sm"
|
className="absolute inset-0 z-40 flex flex-col bg-background/80 backdrop-blur-sm"
|
||||||
onClick={onClose}
|
|
||||||
>
|
>
|
||||||
<div
|
<ChainTableBody
|
||||||
className="flex h-full w-full max-w-4xl flex-col overflow-hidden rounded-xl border bg-card shadow-xl"
|
nodes={nodes}
|
||||||
onClick={(e) => e.stopPropagation()}
|
edges={edges}
|
||||||
>
|
sessions={sessions}
|
||||||
<ChainTableBody
|
fileSources={fileSources}
|
||||||
nodes={nodes}
|
query={query}
|
||||||
edges={edges}
|
onQuery={setQuery}
|
||||||
sessions={sessions}
|
sort={sort}
|
||||||
fileSources={fileSources}
|
onSort={(col) =>
|
||||||
query={query}
|
setSort((prev) =>
|
||||||
onQuery={setQuery}
|
prev.col === col
|
||||||
selection={selection}
|
? { col, dir: prev.dir === 1 ? -1 : 1 }
|
||||||
onToggleNode={(id, next) =>
|
: { col, dir: col === "created" ? -1 : 1 },
|
||||||
setSelection((prev) => {
|
)
|
||||||
const s = new Set(prev);
|
}
|
||||||
if (next) s.add(id);
|
selection={selection}
|
||||||
else s.delete(id);
|
expandedClusters={expandedClusters}
|
||||||
return s;
|
expandedChains={expandedChains}
|
||||||
})
|
onToggleCluster={(key) => setExpandedClusters((prev) => toggleIn(prev, key))}
|
||||||
}
|
onToggleChain={(id) => setExpandedChains((prev) => toggleIn(prev, id))}
|
||||||
onToggleChain={(ids, next) =>
|
onToggleNodes={toggleNodes}
|
||||||
setSelection((prev) => {
|
onClear={() => setSelection(new Set())}
|
||||||
const s = new Set(prev);
|
onGenerate={() => setDialogOpen(true)}
|
||||||
for (const id of ids) {
|
onClose={onClose}
|
||||||
if (next) s.add(id);
|
/>
|
||||||
else s.delete(id);
|
|
||||||
}
|
|
||||||
return s;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
onClear={() => setSelection(new Set())}
|
|
||||||
onGenerate={() => setDialogOpen(true)}
|
|
||||||
onClose={onClose}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{dialogOpen && (
|
{dialogOpen && (
|
||||||
<PracticeDialog
|
<PracticeDialog
|
||||||
mode="custom"
|
mode="custom"
|
||||||
selection={{
|
selection={{ nodeIds, propositions: selectedNodes.length, chains: derived.length }}
|
||||||
nodeIds,
|
|
||||||
propositions: selectedNodes.length,
|
|
||||||
chains: derived.length,
|
|
||||||
}}
|
|
||||||
onClose={() => setDialogOpen(false)}
|
onClose={() => setDialogOpen(false)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -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`.
|
**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 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.
|
**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 redesign, same evening): the graph view's **chain table** — a `Chains` button in the graph chrome (empty graph: hidden) opens a FULL-BLEED table overlay (absolute inside the graph area; the blur + translucent background IS the surface, no inner card; its own top bar carries the info + the close button, `lh-no-drag` so home's window-drag mask never eats it; Esc or X dismiss). The hierarchy is three levels, one click each: CLUSTER (the birth session — a chat or a notes file; a chain lives where its CONCLUSION was born) → REASONING CHAIN → PROPOSITION STATEMENTS — expanding a chain reveals its members' statement text directly (names live in the chain line, never twice; a singleton reveals its one statement in a single click); everything starts collapsed. The table look (owner ruling: "it should really resemble a table"): drawn hairline row + column lines, sortable column headers on Name + Created (click toggles asc/desc; the size column is text, not a control; default Name A→Z). In the chain line every proposition name is a faint-outlined CHIP with the → a clearly separated connector between chips — a lonely chip reads as a standalone proposition (the "(no premises)" annotation is dead in the visible UI; it survives only as the row's aria-label); icons: clusters FolderIcon (open-folder when expanded), chains WaypointsIcon, propositions chip-only; chevrons rotate with expansion. Selection is checkboxes on whole clusters, chains, or single propositions — a flat node-id set (a node in several chains is one selection) — accumulated in a FLOATING BOTTOM BAR (the Google-Photos pattern: appears only when something is selected, never shifts the table layout) showing the agents' ACTUAL input (`chainsForSelection` over the selection: a premise picked without its conclusion counts as the singleton it becomes) as `N propositions → M chains`, with Clear and **Generate problem set** (the one action for now — the bar is a neutral action slot), 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. A fuzzy search (names, aliases, statements) filters chains grouped + auto-expanded under their clusters (non-matching clusters hide; the collapsed view returns on clear). NO understanding-levels column (explicitly not built). 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).
|
**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).
|
||||||
|
|
||||||
|
|||||||
@@ -1,31 +1,38 @@
|
|||||||
/**
|
/**
|
||||||
* THE CHAIN TABLE — SSR render pins (the render-suite discipline: pure
|
* THE CHAIN TABLE — SSR render pins (the render-suite discipline: pure
|
||||||
* bodies, renderToStaticMarkup, testids). The chains overlay (owner-
|
* bodies, renderToStaticMarkup, testids). The owner redesign
|
||||||
* approved plan, 2026-09-29): every reasoning chain in one selectable
|
* (2026-09-29 evening): full-bleed table (blur + translucency IS the
|
||||||
* table; the pinned Selected section derives N propositions → M chains
|
* surface), cluster → chain → statement hierarchy (a chain lives in its
|
||||||
* via chainsForSelection over the selection (the agents' ACTUAL input);
|
* CONCLUSION's birth cluster; expanding a chain reveals statements
|
||||||
* fuzzy search filters the list only; the practice dialog opens in
|
* directly — names live in the line, never twice), proposition CHIPS +
|
||||||
* CUSTOM mode from the Generate button.
|
* → connectors (a lonely chip = a standalone proposition; the "(no
|
||||||
|
* premises)" annotation is dead), rotating chevrons, folder/waypoints
|
||||||
|
* icons, hairline table lines, sortable Name + Created headers, a
|
||||||
|
* floating bottom selection bar that never shifts layout, and a fuzzy
|
||||||
|
* search that auto-expands matching clusters.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
(globalThis as Record<string, unknown>).React = React;
|
(globalThis as Record<string, unknown>).React = React;
|
||||||
|
|
||||||
import assert from "node:assert/strict";
|
import assert from "node:assert/strict";
|
||||||
import { createElement } from "react";
|
|
||||||
import { renderToStaticMarkup } from "react-dom/server";
|
import { renderToStaticMarkup } from "react-dom/server";
|
||||||
import { describe, it } from "node:test";
|
import { describe, it } from "node:test";
|
||||||
import { ChainTableBody } from "../components/chain-table.tsx";
|
import { ChainTableBody } from "../components/chain-table.tsx";
|
||||||
|
import type { ChainSort } from "../components/chain-table.tsx";
|
||||||
import type { GraphEdge, GraphNode } from "../src/core/contracts.ts";
|
import type { GraphEdge, GraphNode } from "../src/core/contracts.ts";
|
||||||
|
|
||||||
/** The fixture graph — two follows-chains + one standalone:
|
/** The fixture graph — two follows-chains + one standalone:
|
||||||
* a → c1, b → c1 (chain one), d → e (chain two), solo (singleton). */
|
* a → c1 ← b (chain one, conclusion born chat1), d → e (chain two,
|
||||||
|
* conclusion born notes1), solo (singleton born chat1). b is born
|
||||||
|
* chat2 — a PREMISE-only birth: no chain concludes there, so chat2
|
||||||
|
* never appears as a group (the conclusion's-cluster law). */
|
||||||
function node(id: string, name: string, statement: string, chatId: string | null): GraphNode {
|
function node(id: string, name: string, statement: string, chatId: string | null): GraphNode {
|
||||||
return {
|
return {
|
||||||
id,
|
id,
|
||||||
name,
|
name,
|
||||||
statement,
|
statement,
|
||||||
aliases: [],
|
aliases: [] as string[],
|
||||||
state: "new",
|
state: "new",
|
||||||
createdAt: "2026-09-20T10:00:00.000Z",
|
createdAt: "2026-09-20T10:00:00.000Z",
|
||||||
provenance: chatId === null ? [] : [{ chatId, messageId: `m_${id}` }],
|
provenance: chatId === null ? [] : [{ chatId, messageId: `m_${id}` }],
|
||||||
@@ -39,6 +46,7 @@ const NODES: GraphNode[] = [
|
|||||||
node("d", "Support", "Statement D.", null),
|
node("d", "Support", "Statement D.", null),
|
||||||
node("e", "Follow-up", "Statement E with keyword zebra.", "notes1"),
|
node("e", "Follow-up", "Statement E with keyword zebra.", "notes1"),
|
||||||
node("solo", "Standalone", "Statement S.", "chat1"),
|
node("solo", "Standalone", "Statement S.", "chat1"),
|
||||||
|
node("orphan", "Orphan", "Statement O.", null),
|
||||||
];
|
];
|
||||||
|
|
||||||
const EDGES: GraphEdge[] = [
|
const EDGES: GraphEdge[] = [
|
||||||
@@ -47,118 +55,163 @@ const EDGES: GraphEdge[] = [
|
|||||||
{ from: "d", to: "e", type: "follows" },
|
{ from: "d", to: "e", type: "follows" },
|
||||||
] as GraphEdge[];
|
] as GraphEdge[];
|
||||||
|
|
||||||
const SESSIONS = { chat1: "Ethics lesson", chat2: "Second chat" };
|
|
||||||
const FILE_SOURCES = { notes1: "notes/raw/ethics.md" };
|
|
||||||
|
|
||||||
const BASE = {
|
const BASE = {
|
||||||
nodes: NODES,
|
nodes: NODES,
|
||||||
edges: EDGES,
|
edges: EDGES,
|
||||||
sessions: SESSIONS,
|
sessions: { chat1: "Ethics lesson", chat2: "Second chat" },
|
||||||
fileSources: FILE_SOURCES,
|
fileSources: { notes1: "notes/raw/ethics.md" },
|
||||||
query: "",
|
query: "",
|
||||||
onQuery: () => {},
|
onQuery: () => {},
|
||||||
|
sort: { col: "name", dir: 1 } as ChainSort,
|
||||||
|
onSort: () => {},
|
||||||
selection: new Set<string>(),
|
selection: new Set<string>(),
|
||||||
onToggleNode: () => {},
|
expandedClusters: new Set<string>(),
|
||||||
|
expandedChains: new Set<string>(),
|
||||||
|
onToggleCluster: () => {},
|
||||||
onToggleChain: () => {},
|
onToggleChain: () => {},
|
||||||
|
onToggleNodes: () => {},
|
||||||
onClear: () => {},
|
onClear: () => {},
|
||||||
onGenerate: () => {},
|
onGenerate: () => {},
|
||||||
onClose: () => {},
|
onClose: () => {},
|
||||||
};
|
};
|
||||||
|
|
||||||
function render(props: Partial<typeof BASE> = {}) {
|
function render(props: Partial<typeof BASE> = {}) {
|
||||||
return renderToStaticMarkup(createElement(ChainTableBody, { ...BASE, ...props }));
|
return renderToStaticMarkup(React.createElement(ChainTableBody, { ...BASE, ...props }));
|
||||||
}
|
}
|
||||||
|
|
||||||
describe("ChainTableBody — the chain rows", () => {
|
describe("ChainTableBody — clusters (the outermost layer)", () => {
|
||||||
it("renders every chain as a formatted name line, with birth + created columns", () => {
|
it("collapsed by default: cluster rows render, chain rows do not", () => {
|
||||||
const html = render();
|
const html = render();
|
||||||
// chain ids are the conclusion ids (chainsForSelection's law)
|
assert.ok(html.includes('data-testid="cluster-group-chat1"'), "the chat cluster");
|
||||||
assert.ok(html.includes('data-testid="chain-row-c1"'), "chain row for c1");
|
assert.ok(html.includes('data-testid="cluster-group-notes1"'), "the notes cluster");
|
||||||
assert.ok(html.includes('data-testid="chain-row-e"'), "chain row for e");
|
assert.ok(html.includes("Ethics lesson"), "chat label");
|
||||||
assert.ok(html.includes('data-testid="chain-row-solo"'), "the singleton renders as its own chain");
|
assert.ok(html.includes("notes/raw/ethics.md"), "notes label");
|
||||||
assert.ok(html.includes("Premise one, Premise two → Conclusion"), "the two-premise line");
|
assert.ok(html.includes("lucide-folder"), "the closed folder icon");
|
||||||
assert.ok(html.includes("Support → Follow-up"), "the one-premise line");
|
assert.ok(!html.includes('data-testid="chain-row-c1"'), "no chain row when collapsed");
|
||||||
assert.ok(html.includes("Standalone (no premises)"), "the singleton marker");
|
assert.ok(!html.includes("Premise one"), "no chips when collapsed");
|
||||||
// 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", () => {
|
it("a premise-only birth never becomes a group — chains live in their CONCLUSION's cluster", () => {
|
||||||
const html = render();
|
const html = render();
|
||||||
assert.ok(html.includes('data-testid="prop-row-a"'), "premise row a");
|
assert.ok(!html.includes("cluster-group-chat2"), "chat2 births only a premise");
|
||||||
assert.ok(html.includes('data-testid="prop-row-c1"'), "conclusion row");
|
assert.ok(!html.includes("Second chat"), "its label never renders");
|
||||||
// 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", () => {
|
it("an unnameable CONCLUSION birth forms one honest muted unlabeled group", () => {
|
||||||
const html = render();
|
const html = render();
|
||||||
assert.ok(html.includes('data-testid="chain-checkbox-c1"'));
|
assert.ok(html.includes("unlabeled"), "the muted label");
|
||||||
assert.ok(html.includes('data-testid="chain-checkbox-e"'));
|
// orphan (birth null) concludes its own singleton chain → the group exists;
|
||||||
assert.ok(html.includes('data-testid="chain-checkbox-solo"'));
|
// d (also birth null) is a premise of e and never forms one
|
||||||
assert.ok(html.includes('data-testid="prop-checkbox-a"'), "inside the default-open chain");
|
assert.ok(html.includes('data-testid="chain-row-orphan"') === false, "collapsed, like every group");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("cluster rows carry checkbox + counts + newest date; notes kind marked", () => {
|
||||||
|
const html = render();
|
||||||
|
assert.ok(html.includes('data-testid="cluster-checkbox-chat1"'));
|
||||||
|
// chat1: chains c1 (a, b, c1) + solo (solo) → 4 member ids
|
||||||
|
assert.ok(html.includes(">4</span>"), "chat1's proposition count");
|
||||||
|
assert.ok(html.includes("2026-09-20"), "the newest-member date");
|
||||||
|
assert.ok(html.includes(">notes</span>"), "the notes kind tag");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("ChainTableBody — the pinned Selected section", () => {
|
describe("ChainTableBody — chain rows (chips + connectors)", () => {
|
||||||
it("empty selection: guidance, no summary, no generate enablement pins", () => {
|
it("names render as outlined chips with → connectors BETWEEN them", () => {
|
||||||
const html = render();
|
const html = render({ expandedClusters: new Set(["chat1"]) });
|
||||||
assert.ok(html.includes("Nothing selected"));
|
assert.ok(html.includes('data-testid="chain-row-c1"'));
|
||||||
assert.ok(!html.includes('data-testid="chain-selected-summary"'));
|
assert.ok(html.includes('data-testid="prop-chip-a"'), "premise chip");
|
||||||
|
assert.ok(html.includes('data-testid="prop-chip-c1"'), "conclusion chip");
|
||||||
|
assert.ok(html.includes("Premise one"), "chip text");
|
||||||
|
assert.ok(html.includes('data-testid="chain-arrow-c1-1"'), "the connector");
|
||||||
|
assert.ok(html.includes("→"), "the arrow glyph");
|
||||||
|
assert.ok(html.includes("lucide-waypoints"), "the chain icon");
|
||||||
});
|
});
|
||||||
|
|
||||||
it("a full chain selection: N propositions → M chains + derived line", () => {
|
it("a singleton renders ONE lonely chip, no connector; the annotation survives only for screen readers", () => {
|
||||||
|
const html = render({ expandedClusters: new Set(["chat1"]) });
|
||||||
|
assert.ok(html.includes('data-testid="chain-row-solo"'));
|
||||||
|
assert.ok(html.includes('data-testid="prop-chip-solo"'));
|
||||||
|
assert.ok(!html.includes('data-testid="chain-arrow-solo-1"'), "no connector on a singleton");
|
||||||
|
// the visible line is the chip alone; "(no premises)" exists ONLY as the
|
||||||
|
// row's aria-label (the a11y one-liner) — exactly one occurrence
|
||||||
|
assert.equal(html.split("no premises").length - 1, 1, "aria-label only, never visible text");
|
||||||
|
assert.ok(html.includes('aria-label="Standalone (no premises)"'));
|
||||||
|
});
|
||||||
|
|
||||||
|
it("the row carries the one-line derivation as its aria-label (core formatChainLine)", () => {
|
||||||
|
const html = render({ expandedClusters: new Set(["chat1"]) });
|
||||||
|
assert.ok(html.includes('aria-label="Premise one, Premise two → Conclusion"'));
|
||||||
|
});
|
||||||
|
|
||||||
|
it("expanding a chain reveals member STATEMENTS directly — names never twice, conclusion marked", () => {
|
||||||
|
const html = render({
|
||||||
|
expandedClusters: new Set(["chat1"]),
|
||||||
|
expandedChains: new Set(["c1"]),
|
||||||
|
});
|
||||||
|
assert.ok(html.includes('data-testid="prop-row-a"'), "premise statement row");
|
||||||
|
assert.ok(html.includes("Statement A."), "the statement text, one click deep");
|
||||||
|
assert.ok(html.includes("Statement C."), "the conclusion statement");
|
||||||
|
assert.ok(html.includes('data-testid="prop-conclusion-c1"'), "the conclusion marker");
|
||||||
|
// premise rows carry no conclusion marker
|
||||||
|
const aRow = html.split('data-testid="prop-row-a"')[1]?.split('data-testid="prop-row-')[0] ?? "";
|
||||||
|
assert.ok(!aRow.includes("prop-conclusion"), "premises unmarked");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("ChainTableBody — the sortable table headers", () => {
|
||||||
|
it("Name + Created are sort controls with aria-sort; Props is plain text", () => {
|
||||||
|
const html = render();
|
||||||
|
assert.ok(html.includes('data-testid="sort-name"'));
|
||||||
|
assert.ok(html.includes('data-testid="sort-created"'));
|
||||||
|
assert.ok(html.includes('aria-sort="ascending"'), "default name A→Z");
|
||||||
|
assert.ok(!html.includes('data-testid="sort-props"'), "size is text, not a control");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("descending state shows on the active header only", () => {
|
||||||
|
const html = render({ sort: { col: "created", dir: -1 } });
|
||||||
|
assert.ok(html.includes('data-testid="sort-created"'));
|
||||||
|
assert.ok(html.includes('aria-sort="descending"'));
|
||||||
|
assert.ok(html.includes('aria-sort="none"'), "the inactive column");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("ChainTableBody — the floating selection bar (never shifts layout)", () => {
|
||||||
|
it("absent when nothing is selected", () => {
|
||||||
|
const html = render({ expandedClusters: new Set(["chat1"]) });
|
||||||
|
assert.ok(!html.includes('data-testid="chain-selection-bar"'));
|
||||||
|
});
|
||||||
|
|
||||||
|
it("appears with the derived N propositions → M chains + Clear + Generate", () => {
|
||||||
const html = render({ selection: new Set(["a", "b", "c1"]) });
|
const html = render({ selection: new Set(["a", "b", "c1"]) });
|
||||||
|
assert.ok(html.includes('data-testid="chain-selection-bar"'));
|
||||||
assert.ok(html.includes('data-testid="chain-selected-summary"'));
|
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("3 propositions → 1 chain"));
|
||||||
assert.ok(html.includes("Premise one, Premise two → Conclusion"), "the derived chain line");
|
assert.ok(html.includes('data-testid="chain-clear"'));
|
||||||
|
assert.ok(html.includes('data-testid="chain-generate"'));
|
||||||
});
|
});
|
||||||
|
|
||||||
it("a premise WITHOUT its conclusion derives as the singleton it becomes", () => {
|
it("a premise WITHOUT its conclusion derives as the singleton it becomes", () => {
|
||||||
const html = render({ selection: new Set(["a", "d"]) });
|
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("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)", () => {
|
describe("ChainTableBody — the fuzzy search (grouped + auto-expand)", () => {
|
||||||
it("filters chains by member name / statement / alias; the pinned selection survives", () => {
|
it("matching clusters auto-expand to reveal their chains; others hide; the bar is unaffected", () => {
|
||||||
const aliased = NODES.map((n) =>
|
const aliased = NODES.map((n) => (n.id === "b" ? { ...n, aliases: ["zebra alias"] } : n));
|
||||||
n.id === "b" ? { ...n, aliases: ["zebra alias"] } : n,
|
|
||||||
);
|
|
||||||
const html = render({
|
const html = render({
|
||||||
nodes: aliased,
|
nodes: aliased,
|
||||||
query: "zebra",
|
query: "zebra",
|
||||||
selection: new Set(["a", "b", "c1"]), // selection spans BOTH chains
|
selection: new Set(["a", "b", "c1"]), // selection spans BOTH chains
|
||||||
});
|
});
|
||||||
// zebra hits: chain e (statement) + chain c1 (alias on b)
|
// 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-c1"'), "auto-expanded cluster reveals the chain");
|
||||||
assert.ok(html.includes('data-testid="chain-row-e"'), "statement match keeps the chain");
|
assert.ok(html.includes('data-testid="chain-row-e"'), "statement match");
|
||||||
assert.ok(!html.includes('data-testid="chain-row-solo"'), "non-matching chain hidden");
|
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("cluster-group-notes1") === false, "notes1 still renders (it has a match)");
|
||||||
|
assert.ok(!html.includes("Ethics lesson") === false, "chat1 still renders (it has a match)");
|
||||||
|
// the floating bar is never search-filtered
|
||||||
assert.ok(html.includes("3 propositions → 1 chain"));
|
assert.ok(html.includes("3 propositions → 1 chain"));
|
||||||
assert.ok(html.includes("Premise one, Premise two → Conclusion"));
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it("no matches: the honest empty line", () => {
|
it("no matches: the honest empty line", () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user