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
2026-09-29 22:41:52 +03:00
parent 06032769d2
commit 155d065fd1
12 changed files with 1845 additions and 961 deletions
@@ -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."));
+	});
+});