In-session phase presentation: header chip + dotted boundary dividers

- components/phase-divider.tsx: PhaseChip (header, next to the session
  title: phase-colored dot + Probing/Planning/Teaching) and PhaseDivider
  (the transcript boundary: color-coded dotted rules + a small chip —
  'Plan · N nodes' at the plan seam, 'Teaching' at the teach seam; probe
  never renders, phases only advance). planNodeCount reads the seam
  message's first plan tree.
- chat.tsx: dividers render at MESSAGE boundaries (phaseTimeline, one
  linear fold) — the seam is the transition to the message's phase, so
  the seam message's prose sits below its divider. requiresReveal now
  uses phaseAt3 teach (an occupied node), so probe- AND plan-phase
  questions auto-open.
- Retired the part-level plan-divider (artifact registry): the boundary
  is message-level, not part-level. Its tests replaced by
  render-phase-divider tests; core/phases gains tested phaseTimeline.

tests/phases.test.ts

@@ -12,6 +12,7 @@ import {
 	phaseAt,
 	phaseAt3,
 	phaseOfTree,
+	phaseTimeline,
 	type Phase3Message,
 	type PhaseMessage,
 } from "../src/core/phases.ts";
@@ -194,3 +195,26 @@ describe("phaseAt3", () => {
 		assert.equal(phaseAt3(messages, -1), "probe", "empty scan range → probe");
 	});
 });
+
+describe("phaseTimeline", () => {
+	it("equals phaseAt3 at every index (the linear fold is the same derivation)", () => {
+		const messages: Phase3Message[] = [
+			msg("text"),
+			planMsg({ tool: "plan_init", ok: false, tree: tree([], null) }),
+			planMsg({ tool: "plan_init", ok: true, tree: tree(["a", "b"], null) }),
+			msg("text"),
+			planMsg({ tool: "plan_set_current", ok: true, tree: tree(["a", "b"], "a") }),
+			msg("text"),
+		];
+		const timeline = phaseTimeline(messages);
+		assert.equal(timeline.length, messages.length);
+		for (let i = 0; i < messages.length; i++) {
+			assert.equal(timeline[i], phaseAt3(messages, i), `index ${i}`);
+		}
+		assert.deepEqual(timeline, ["probe", "probe", "plan", "plan", "teach", "teach"]);
+	});
+
+	it("empty transcript → empty timeline", () => {
+		assert.deepEqual(phaseTimeline([]), []);
+	});
+});

tests/render-cards.test.tsx

@@ -18,7 +18,6 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { MessageResponse } from "../components/ai-elements/message.tsx";
 import { QuestionDock } from "../components/question-dock.tsx";
 import { AnsweredCard } from "../components/answered-card.tsx";
-import { PlanDivider } from "../components/artifacts/plan-divider.tsx";
 import { buildAnswer, coerceCorrectAnswer, normalizeOptions, resolveCorrect, type QuestionData } from "../src/core/question-core.ts";
 
 const quizInput = {
@@ -42,7 +41,6 @@ function quizQD(): QuestionData {
 	};
 }
 
-
 function renderDock(props: { toolName: "quiz" | "ask_user_question"; toolCallId: string; input: never; onSubmit?: () => void }) {
 	// expanded=true renders the full form (the collapsed bar is covered by the
 	// QuestionDockBar test below). No scroll context needed — the DockOverlay
@@ -220,44 +218,3 @@ describe("teach-check reveal (W5 phase separation)", () => {
 	});
 });
 
-describe("PlanDivider (the probe→teach seam)", () => {
-	const tree = {
-		nodes: [
-			{ id: "a", title: "A" },
-			{ id: "b", title: "B" },
-			{ id: "c", title: "C" },
-		],
-		edges: [{ from: "a", to: "b" }],
-		currentNodeId: null,
-		doneNodeIds: [],
-		version: 1,
-	};
-
-	it("renders the quiet divider with the node count once output-available", () => {
-		const html = renderToStaticMarkup(
-				<PlanDivider part={{ type: "tool-plan_init", state: "output-available", toolCallId: "p1", output: { ok: true, tree } }} />,
-		);
-		assert.ok(html.includes('data-testid="plan-divider"'));
-		assert.match(html, /Teaching/);
-		assert.match(html, /3 nodes/, "node count from the output tree");
-		assert.ok(!html.includes("banner"), "never a loud banner");
-	});
-
-	it("renders null while the tool streams and on a failed init", () => {
-		const streaming = renderToStaticMarkup(
-				<PlanDivider part={{ type: "tool-plan_init", state: "input-streaming", toolCallId: "p1" }} />,
-		);
-		assert.equal(streaming, "", "null while input-streaming");
-		const failed = renderToStaticMarkup(
-				<PlanDivider
-					part={{
-						type: "tool-plan_init",
-						state: "output-available",
-						toolCallId: "p1",
-						output: { ok: false, error: "Tree already initialized", tree },
-					}}
-				/>,
-		);
-		assert.equal(failed, "", "a refused re-init must not draw a second seam");
-	});
-});

tests/render-phase-divider.test.tsx

@@ -0,0 +1,95 @@
+/**
+ * Phase presentation render tests — the in-session face of the picker's
+ * color strips (components/phase-divider.tsx): the header chip and the
+ * dotted transcript boundary rules. Same tsx classic-JSX shim as
+ * render-cards.test.tsx. (Replaces the old part-level PlanDivider tests.)
+ */
+import React from "react";
+(globalThis as Record<string, unknown>).React = React;
+
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { renderToStaticMarkup } from "react-dom/server";
+import { PhaseChip, PhaseDivider, planNodeCount } from "../components/phase-divider.tsx";
+
+describe("PhaseChip (header)", () => {
+	it("renders a phase-colored dot + the learner-facing label", () => {
+		for (const [phase, label] of [
+			["probe", "Probing"],
+			["plan", "Planning"],
+			["teach", "Teaching"],
+		] as const) {
+			const html = renderToStaticMarkup(<PhaseChip phase={phase} />);
+			assert.ok(html.includes('data-testid="phase-chip"'));
+			assert.ok(html.includes(`data-phase="${phase}"`));
+			assert.ok(html.includes(label), `${phase} label`);
+			assert.ok(html.includes(`bg-phase-${phase}`), `${phase} dot color`);
+		}
+	});
+});
+
+describe("PhaseDivider (transcript boundary)", () => {
+	it("the plan seam: dotted rules in the plan color + node count", () => {
+		const html = renderToStaticMarkup(<PhaseDivider phase="plan" nodeCount={3} />);
+		assert.ok(html.includes('data-testid="phase-divider-plan"'));
+		assert.match(html, /Plan · 3 nodes/);
+		assert.ok(html.includes("border-dotted"), "dotted rule");
+		assert.ok(html.includes("border-phase-plan"), "plan-colored rule");
+	});
+
+	it("the teach seam: dotted rules in the teach color, no count", () => {
+		const html = renderToStaticMarkup(<PhaseDivider phase="teach" />);
+		assert.ok(html.includes('data-testid="phase-divider-teach"'));
+		assert.match(html, /Teaching/);
+		assert.ok(html.includes("border-phase-teach"));
+		assert.ok(!html.includes("nodes"));
+	});
+
+	it("singular node count", () => {
+		const html = renderToStaticMarkup(<PhaseDivider phase="plan" nodeCount={1} />);
+		assert.match(html, /Plan · 1 node\b/);
+	});
+
+	it("a plan seam without a count still labels itself", () => {
+		const html = renderToStaticMarkup(<PhaseDivider phase="plan" />);
+		assert.match(html, /Planning/);
+	});
+
+	it("probe renders null (never a boundary — phases only advance)", () => {
+		assert.equal(renderToStaticMarkup(<PhaseDivider phase="probe" />), "");
+	});
+});
+
+describe("planNodeCount (the seam message's tree)", () => {
+	it("counts the first output-available plan tree in the message", () => {
+		const count = planNodeCount({
+			parts: [
+				{ type: "text", text: "Here's your plan." },
+				{
+					type: "tool-plan_init",
+					state: "output-available",
+					toolCallId: "p1",
+					output: { ok: true, tree: { nodes: [{ id: "a" }, { id: "b" }], edges: [], currentNodeId: null, doneNodeIds: [], version: 1 } },
+				},
+			],
+		});
+		assert.equal(count, 2);
+	});
+
+	it("skips streaming/failed parts (an empty or failed tree gives no count)", () => {
+		assert.equal(
+			planNodeCount({ parts: [{ type: "tool-plan_init", state: "input-streaming" }] }),
+			undefined,
+		);
+		assert.equal(
+			planNodeCount({
+				parts: [
+					{ type: "tool-plan_init", state: "output-available", toolCallId: "p1", output: { ok: false, tree: { nodes: [], edges: [], currentNodeId: null, doneNodeIds: [], version: 0 } } },
+				],
+			}),
+			undefined,
+			"an empty tree (failed init) carries no count",
+		);
+		assert.equal(planNodeCount({ parts: [{ type: "text" }] }), undefined);
+	});
+});