From dcb839232ccc07511867fdd41d9d0952ff2a8fec Mon Sep 17 00:00:00 2001 From: amosblomqvist Date: Sun, 27 Sep 2026 00:47:48 +0300 Subject: [PATCH] =?UTF-8?q?fix:=20plan=20graph=20visuals=20=E2=80=94=20rea?= =?UTF-8?q?ding=20font,=201px=20lines,=20both-ends=20arrow=20color?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Owner's three rendering refinements (plan-graph round, 2026-09-26): 1. Reading font: the diagram root sets font-family var(--font-prose) — node titles render in the reading font instead of the inherited mono UI font. Deliberately NOT the font-prose utility: @theme inline bakes the literal into utilities (the --font-title trap), which would freeze the graph at Source Sans 3 and ignore the Appearance reading-font override. The runtime var rides it (live-verified: Georgia override propagates, null resets to Source Sans 3). 2. Thinner lines: edges + box outlines 1.5 → 1 (the app's standard border weight). The arrowheads scale by the same 2/3 (HEAD_H 16 → 10.67; the width, the notch overhang, and the DOCK_GAP all derive from the head scale), so the head:shaft LaTeX proportion is preserved exactly. 3. Arrow color: white only when BOTH ends are white — an edge with an upcoming origin OR upcoming terminal stays gray (line + head). Supersedes round 6's target-only rule: arrows leaving a gray box no longer paint white into covered territory. Live-verified on :3001 (native-format fixture: plan_init + answered quizzes; popup): font default + override, stroke-width 1 on all rects and edges, 5-edge graph with exactly one both-white edge white and both upcoming→visited cross edges gray. --- components/plan-block.tsx | 52 ++++++++++++++++++--------- tests/plan-window.test.tsx | 2 +- tests/render-plan-block.test.tsx | 62 +++++++++++++++++++++++++++----- 3 files changed, 90 insertions(+), 26 deletions(-) diff --git a/components/plan-block.tsx b/components/plan-block.tsx index 7995f02..5d6828d 100644 --- a/components/plan-block.tsx +++ b/components/plan-block.tsx @@ -207,10 +207,14 @@ export const TEXT_CAP_SCALE = 16 / 12.5; * x 27.2 with a 9.6-tall opening — at full height 104 the tail opening * is ≈10, per the owner's spec. Solid white fill, no padding. */ export const ARROW_HEAD = "M48,55.2C49.4,54.6 50.2,53.4 50.2,52C50.2,50.6 49.4,49.4 48,48.8C38.2,45.6 29.2,38.8 21,28.4C15.2,21.4 11.4,13.2 9.6,3.8C9,1.2 7.4,0 4.8,0C1.6,0 0,1.6 0,5L0.2,5.6C3.6,23 12.6,36.8 27.2,47.2L27.2,56.8C12.6,67.2 3.6,81 0.2,98.4L0,99C0,102.4 1.6,104 4.8,104C7.4,104 9,102.8 9.6,100.2C11.4,90.8 15.2,82.6 21,75.6C29.2,65.2 38.2,58.4 48,55.2Z"; -/** Head height 16: the tail opening (9.6/104 of height) then tucks the - * 1.5-wide line flush — the LaTeX proportion. The owner's rule: keep the - * current line width; size the head from the 104→10 ratio. */ -const HEAD_H = 16; +/** Lines + outlines run at the app's standard border weight (owner, + * 2026-09-26 — same 1px the UI borders use; was 1.5). */ +export const STROKE_W = 1; +/** The heads scale by the SAME factor the lines thinned by (owner, + * 2026-09-26): 16 was the height tuned for 1.5-wide lines, so both sides + * of the head:shaft proportion shrink together — the LaTeX ratio (tail + * opening tucking the line flush) is preserved exactly, just smaller. */ +const HEAD_H = 16 * (STROKE_W / 1.5); const HEAD_SCALE = HEAD_H / 104; const HEAD_W = 50.2 * HEAD_SCALE; /** The drawn line terminates at the notch mouth (refX 27.2) — it never @@ -220,8 +224,9 @@ const HEAD_W = 50.2 * HEAD_SCALE; const HEAD_TIP_OVERHANG = (50.2 - 27.2) * HEAD_SCALE; /** The head floats this far off the target face — the tip kisses nothing * (owner, round 12). ~half a head length: clearly docked-off, still - * visually attached. */ -const DOCK_GAP = 4; + * visually attached. Scaled with the head (2026-09-26) so "half a head" + * stays true at the thinner lines. */ +const DOCK_GAP = 4 * (STROKE_W / 1.5); /** The shaft stub — the straight run before the head (owner, round 12): * control points from Q on sit exactly on the approach line, so the * basis spline renders that stretch perfectly straight and the head @@ -351,7 +356,11 @@ const MONO_BOX = "fill-background/50 stroke-white"; const MONO_TEXT = "fill-white text-xs"; /** The diagram itself: positioned nodes + bezier edges. Pure-ish render — - * every input is data, so SSR render tests pin the whole thing. */ + * every input is data, so SSR render tests pin the whole thing. The root + * sets font-family var(--font-prose): node titles render in the READING + * font, not the mono UI font (owner, 2026-09-26) — and the runtime var + * rides the Appearance reading-font override (the utility can't: @theme + * inline bakes literals — the --font-title trap). */ export function PlanDiagram({ nodes, edges, @@ -403,13 +412,19 @@ export function PlanDiagram({ @@ -463,15 +478,20 @@ export function PlanDiagram({ tx !== undefined && ty !== undefined ? { x: tx, y: ty, w: NODE_W, h: layout.nodeH.get(e.to) ?? NODE_H } : undefined; - // An arrow into a not-yet-visited node is grayed out like the - // node (owner, round 6); the in-chat block stays all-white. - const dim = !monochrome && statusOf(e.to) === "upcoming"; + // An arrow is white only when BOTH its ends are white (owner, + // 2026-09-26): origin AND terminal covered — a gray box's outgoing + // arrows stay gray even when they point into covered territory + // (supersedes round 6's target-only rule); the in-chat block + // stays all-white. + const dim = + !monochrome && + (statusOf(e.from) === "upcoming" || statusOf(e.to) === "upcoming"); return ( ${e.to}`} d={edgePathD(pts, target)} className={dim ? "fill-none stroke-border" : "fill-none stroke-white"} - strokeWidth={1.5} + strokeWidth={STROKE_W} markerEnd={`url(#${markerId}${dim ? "-dim" : ""})`} /> ); @@ -495,7 +515,7 @@ export function PlanDiagram({ width={NODE_W} height={h} className={monochrome ? MONO_BOX : BOX[status]} - strokeWidth={1.5} + strokeWidth={STROKE_W} /> {glow && ( // The current node's highlight: faint yellow, blurred so it diff --git a/tests/plan-window.test.tsx b/tests/plan-window.test.tsx index 30ba1ea..01695e3 100644 --- a/tests/plan-window.test.tsx +++ b/tests/plan-window.test.tsx @@ -60,7 +60,7 @@ describe("PlanMarginalia render", () => { assert.ok(!/viewBox="-?\d+(\.\d+)? -?\d+(\.\d+)? 360 180"/.test(html), "the windowed viewBox is retired"); // Meet-fit mode: the svg fills the band box (h-full w-full), letting // preserveAspectRatio contain the diagram in the flank. - assert.ok(html.includes('class="block h-full w-full'), "fill mode classes"); + assert.ok(html.includes('font-family:var(--font-prose)'), "fill mode classes"); }); it("glows the current node and dims the not-yet-visited (live statuses)", () => { diff --git a/tests/render-plan-block.test.tsx b/tests/render-plan-block.test.tsx index e37bfaa..88b3807 100644 --- a/tests/render-plan-block.test.tsx +++ b/tests/render-plan-block.test.tsx @@ -62,12 +62,13 @@ describe("plan block layout (pure)", () => { it("edgePathD draws dagre's route through curveBasis — mouth pulled back from the border", () => { // Straight 3-point route (source border → mid → target border): the // basis curve starts exactly at the border point; the END pulls - // back by HEAD_TIP_OVERHANG + the docking gap (92 − 3.538 − 4) so the - // head's TIP floats 4 short of the border with its mouth at the - // path's end, on a straight shaft (owner, rounds 11–12). + // back by HEAD_TIP_OVERHANG + the docking gap (92 − 2.359 − 2.667) so + // the head's TIP floats 2.67 short of the border with its mouth at + // the path's end, on a straight shaft (owner, rounds 11–12; the head + // + gap scaled ⅔ with the 1px lines, 2026-09-26). const d = edgePathD([{ x: 80, y: 44 }, { x: 80, y: 68 }, { x: 80, y: 92 }]); assert.ok(d.startsWith("M80,44"), "starts at the source border point"); - assert.ok(d.endsWith("L80,84.462"), "mouth pulled back; tip floats 4 off the border"); + assert.ok(d.endsWith("L80,86.974"), "mouth pulled back; tip floats 2.67 off the border"); // The whole run stays on-axis (every x is 80): a collinear route // renders straight — the shaft stub never bends a straight edge. const xs = [...d.matchAll(/(?:[MLC]|,)(-?[\d.]+),/g)].map((m) => m[1]); @@ -84,7 +85,7 @@ describe("plan block layout (pure)", () => { // exactly 40° (Δx/Δy = tan 40°). The tip floats DOCK_GAP (4) off the // face along the normal: border (100,100) → tip (100,96). const clamped = edgePathD([{ x: 70, y: 70 }, { x: 100, y: 100 }], box); - assert.ok(clamped.endsWith("L97.726,93.289"), "swung to the cone edge"); + assert.ok(clamped.endsWith("L98.484,95.526"), "swung to the cone edge"); // final L's from-point is the previous number pair; recompute direction const nums = [...clamped.matchAll(/(-?[\d.]+)/g)].map((m) => Number(m[1])); const ax = nums[nums.length - 4]!; @@ -92,12 +93,12 @@ describe("plan block layout (pure)", () => { const bx = nums[nums.length - 2]!; const by = nums[nums.length - 1]!; assert.ok(Math.abs((bx - ax) / (by - ay) - Math.tan((40 * Math.PI) / 180)) < 0.01, "40° cone edge"); - // Tip = mouth + u'·overhang floats 4 above the face. - const tipY = by + 0.766 * 3.538; - assert.ok(Math.abs(tipY - 96) < 0.01, "docking gap along the face normal"); + // Tip = mouth + u'·overhang floats 2.67 above the face. + const tipY = by + 0.766 * 2.359; + assert.ok(Math.abs(tipY - 97.333) < 0.01, "docking gap along the face normal"); // A shallow (~9.5°) tilt is WITHIN the limit: no swing. const free = edgePathD([{ x: 90, y: 40 }, { x: 100, y: 100 }], box); - assert.ok(free.endsWith("L99.418,92.51"), "unclamped within the cone"); + assert.ok(free.endsWith("L99.612,95.006"), "unclamped within the cone"); }); it("wrapTitle wraps greedily and NEVER drops content (boxes grow instead)", () => { @@ -133,6 +134,13 @@ describe("plan block render", () => { // renders past the 16px prose size (owner, plan-graph round 1; the // snap 16.5→16 landed in typography round 4). assert.match(html, /]*class="block h-auto w-full mx-auto"/); + // The reading font, not the mono UI font (owner, 2026-09-26) — via the + // runtime var (the font-prose utility would bake the @theme literal + // and ignore the Appearance reading-font override). + assert.match(html, /]*font-family:var\(--font-prose\)/); + // Lines + outlines at the app's standard 1px border weight (owner, + // 2026-09-26; was 1.5). + assert.match(html, /]*stroke-width="1"/); assert.match(html, /max-width:225\.28px/); // (160+16) × 1.28 // Two stacked nodes: 2*NODE_H + GAP_Y = 136 extent + GRAPH_PAD on // every side (strokes/glow never clip at the edges). @@ -201,6 +209,42 @@ describe("plan popup (live derivation)", () => { assert.match(html, /opacity: ?0[;,}]/, "diagram hidden until the first fit applies"); }); + it("dims an arrow when EITHER end is gray — white needs both ends white (owner, 2026-09-26)", () => { + // x upcoming → y visited: the OLD rule (target-only) painted this + // white; the new rule keeps it gray — a gray box's outgoing arrows + // stay gray even into covered territory. y → z (visited → current) + // stays white: BOTH ends white. + const tree: PlanTree = { + nodes: [ + { id: "x", title: "Gray origin" }, + { id: "y", title: "Covered middle" }, + { id: "z", title: "Covered latest" }, + ], + edges: [ + { from: "x", to: "y" }, + { from: "y", to: "z" }, + ], + version: 1, + }; + const msgs: PopupMessage[] = [ + { parts: [{ type: "tool-plan_init", state: "output-available", output: { ok: true, tree } }] }, + { parts: [{ type: "tool-quiz", state: "output-available", input: { nodeId: "y" }, output: { correct: true } }] }, + { parts: [{ type: "tool-quiz", state: "output-available", input: { nodeId: "z" }, output: { correct: true } }] }, + ]; + const html = renderToStaticMarkup( {}} />); + assert.match(html, /data-testid="plan-node-x" data-status="upcoming"/); + assert.match(html, /data-testid="plan-node-y" data-status="visited"/); + assert.match(html, /data-testid="plan-node-z" data-status="current"/); + // Exactly one gray edge (x→y, gray origin) and one white edge (y→z, + // both ends white): count the head markers, one per edge. + const dimHeads = (html.match(/marker-end="url\(#.*-dim\)"/g) ?? []).length; + const whiteHeads = (html.match(/marker-end="url\(#(?:R\d+|[a-z0-9-]+)\)"/g) ?? []).length; + assert.equal(dimHeads, 1, "the gray-origin edge dims"); + assert.equal(whiteHeads, 1, "the both-white edge stays white"); + assert.match(html, /]*class="fill-none stroke-border"/); + assert.match(html, /]*class="fill-none stroke-white"/); + }); + it("renders the empty state when the session has no plan", () => { const html = renderToStaticMarkup( {}} />); assert.match(html, /No plan in this session yet\./);