/** * THE CHAIN TABLE — SSR render pins (the render-suite discipline: pure * bodies, renderToStaticMarkup, testids). The owner redesign * (2026-09-29 evening): full-bleed table (blur + translucency IS the * surface), cluster → chain → statement hierarchy (a chain lives in its * CONCLUSION's birth cluster; expanding a chain reveals statements * directly — names live in the line, never twice), proposition CHIPS + * → 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"; (globalThis as Record).React = React; import assert from "node:assert/strict"; import { renderToStaticMarkup } from "react-dom/server"; import { describe, it } from "node:test"; import { ChainTableBody } from "../components/chain-table.tsx"; import type { ChainSort } 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 (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 { return { id, name, statement, aliases: [] as string[], 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"), node("orphan", "Orphan", "Statement O.", null), ]; const EDGES: GraphEdge[] = [ { from: "a", to: "c1", type: "follows" }, { from: "b", to: "c1", type: "follows" }, { from: "d", to: "e", type: "follows" }, ] as GraphEdge[]; const BASE = { nodes: NODES, edges: EDGES, sessions: { chat1: "Ethics lesson", chat2: "Second chat" }, fileSources: { notes1: "notes/raw/ethics.md" }, query: "", onQuery: () => {}, sort: { col: "name", dir: 1 } as ChainSort, onSort: () => {}, selection: new Set(), expandedClusters: new Set(), expandedChains: new Set(), onToggleCluster: () => {}, onToggleChain: () => {}, onToggleNodes: () => {}, onClear: () => {}, onGenerate: () => {}, onClose: () => {}, }; function render(props: Partial = {}) { return renderToStaticMarkup(React.createElement(ChainTableBody, { ...BASE, ...props })); } describe("ChainTableBody — clusters (the outermost layer)", () => { it("collapsed by default: cluster rows render, chain rows do not", () => { const html = render(); assert.ok(html.includes('data-testid="cluster-group-chat1"'), "the chat cluster"); assert.ok(html.includes('data-testid="cluster-group-notes1"'), "the notes cluster"); assert.ok(html.includes("Ethics lesson"), "chat label"); assert.ok(html.includes("notes/raw/ethics.md"), "notes label"); assert.ok(html.includes("lucide-folder"), "the closed folder icon"); assert.ok(!html.includes('data-testid="chain-row-c1"'), "no chain row when collapsed"); assert.ok(!html.includes("Premise one"), "no chips when collapsed"); }); it("a premise-only birth never becomes a group — chains live in their CONCLUSION's cluster", () => { const html = render(); assert.ok(!html.includes("cluster-group-chat2"), "chat2 births only a premise"); assert.ok(!html.includes("Second chat"), "its label never renders"); }); it("an unnameable CONCLUSION birth forms one honest muted unlabeled group", () => { const html = render(); assert.ok(html.includes("unlabeled"), "the muted label"); // orphan (birth null) concludes its own singleton chain → the group exists; // d (also birth null) is a premise of e and never forms one 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"), "chat1's proposition count"); assert.ok(html.includes("2026-09-20"), "the newest-member date"); assert.ok(html.includes(">notes"), "the notes kind tag"); }); }); describe("ChainTableBody — chain rows (chips + connectors)", () => { it("names render as outlined chips with → connectors BETWEEN them", () => { const html = render({ expandedClusters: new Set(["chat1"]) }); assert.ok(html.includes('data-testid="chain-row-c1"')); 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 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"]) }); assert.ok(html.includes('data-testid="chain-selection-bar"')); assert.ok(html.includes('data-testid="chain-selected-summary"')); assert.ok(html.includes("3 propositions → 1 chain")); 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", () => { const html = render({ selection: new Set(["a", "d"]) }); assert.ok(html.includes("2 propositions → 2 chains"), "no follows-edge survives inside the selection"); }); }); describe("ChainTableBody — the fuzzy search (grouped + auto-expand)", () => { it("matching clusters auto-expand to reveal their chains; others hide; the bar is unaffected", () => { 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"'), "auto-expanded cluster reveals 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("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")); }); 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.")); }); });