Merge lh-ui refinement wave (feat/ui-polish @ 8163437) into main

11 commits on fbeca36: minimal-color rounds 1-2 (phase color retired,
the braille spinner is the one working indicator; the chip is label-only),
typography rounds 1-5 (three-font rule enforced — CMU titles, Source Sans
session titles, JetBrains mono; snapped type ladder in globals.css with
the xxs rung merged into xs; lh-input caret at the font-metric floor;
session titles at prose size, message counts and active-row weight dropped,
ISO dates), header rounds 6/6b/6c/6d (60px top bar aligned to the sidebar
LH band; the open-sidebar toggle matches the close glyph at size-4 both
ways; SidebarToggle always-mounted with a lockstep animated slot — no more
one-frame title jump; title at text-3xl).

Semantic change folded in: `busy` in the chats list now means exactly "a
teach turn is in flight" — background jobs no longer spin the session row
(the sidebar's Background agents section is their channel).

Merge fallout fixed in the merge: components/graph-coverage.tsx (main's
coverage panel) held the last three text-xxs uses; with the rung deleted
they silently lost their size — mechanically swapped to text-xs, matching
lh-ui's own swap in graph-context-marker.tsx.

No file overlap with main's waves since fbeca36 (extraction coverage,
lh-graph merge, world-scale bake) — clean auto-merge. Gates: typecheck,
eslint, 496/496 tests, build. Live-verified on the dev server: 60px
header with 32px CMU title, label-only chip, snapped ladder active
(--lh-prose-size 16px, no --text-xxs rule anywhere), sidebar rows with
ISO dates, animated sidebar toggle with no header jump.

app/api/chats/route.ts

@@ -1,14 +1,17 @@
-import { createChat, isTurnRunning, listChats, listJobs, titleFromPrompt } from "@/src/server";
+import { createChat, isTurnRunning, listChats, titleFromPrompt } from "@/src/server";
 import type { ChatListItem } from "@/src/core";
 
 /** The session picker's list: record-derived summaries (phase, pending
- *  question) + live liveness — a running turn OR a background job marks
+ *  question) + live liveness — a running turn marks the session busy
- *  the session busy (contracts.ts ChatListItem; the store can't see
+ *  (contracts.ts ChatListItem; the store can't see liveness, the route is
- *  liveness, the route is the merge point). */
+ *  the merge point). Owner, minimal-color round: background jobs NO LONGER
+ *  count — the sidebar's Background agents section is their channel now
+ *  (a running spinner per row would double-signal them), so busy means
+ *  exactly "a teach turn is in flight". */
 export async function GET() {
 	const chats: ChatListItem[] = listChats().map((c) => ({
 		...c,
-		busy: isTurnRunning(c.id) || listJobs(c.id).some((j) => j.status === "running"),
+		busy: isTurnRunning(c.id),
 	}));
 	return Response.json({ chats });
 }

app/globals.css

@@ -40,7 +40,12 @@
 	/* Emphasis coloring in teaching prose — ready for the settings UI. */
 	--lh-ink-strong: #c96b4a;
 	--lh-ink-italic: #6fa9d6;
-	--lh-prose-size: 16.5px;
+	/* THE READING SIZE = the ladder's 16px rung (--text-lg). Can't be
+	   var()-linked: @theme inline inlines literals into utilities without
+	   emitting runtime vars — so this is the one documented duplication:
+	   change one, change both. (owner, typography round 4: snapped from
+	   the reskin's hand-tuned 16.5 to the ladder's 16.) */
+	--lh-prose-size: 16px;
 	--lh-prose-leading: 1.5;
 }
 
@@ -67,7 +72,12 @@
 	--ring: #8d8d8d;
 	--lh-ink-strong: #c96b4a;
 	--lh-ink-italic: #6fa9d6;
-	--lh-prose-size: 16.5px;
+	/* THE READING SIZE = the ladder's 16px rung (--text-lg). Can't be
+	   var()-linked: @theme inline inlines literals into utilities without
+	   emitting runtime vars — so this is the one documented duplication:
+	   change one, change both. (owner, typography round 4: snapped from
+	   the reskin's hand-tuned 16.5 to the ladder's 16.) */
+	--lh-prose-size: 16px;
 	--lh-prose-leading: 1.5;
 }
 
@@ -82,14 +92,23 @@
 
 @theme inline {
 	/* Fonts: chrome = JetBrains Mono, prose = Source Sans 3, titles = CMU
-	   Serif bold. The JetBrains/SourceSans variables attach in app/layout.tsx. */
+	   Serif bold. The JetBrains/SourceSans variables attach in app/layout.tsx.
+	   (owner, typography round) The Tailwind defaults are ALIASED to the app
+	   fonts: `font-mono`/`font-sans` utilities would otherwise fall to the
+	   SYSTEM stacks — a fourth font the app never chose — and streamdown's
+	   code-block chrome + mermaid-error + demo-card all use them. */
 	--font-ui: var(--font-jetbrains), ui-monospace, SFMono-Regular, monospace;
 	--font-prose: var(--font-sans3), ui-sans-serif, system-ui, sans-serif;
 	--font-title: "lh-cmu", serif;
+	--font-mono: var(--font-jetbrains), ui-monospace, SFMono-Regular, monospace;
+	--font-sans: var(--font-sans3), ui-sans-serif, system-ui, sans-serif;
 	/* The modular type ladder — each size carries its own line-height.
-	   Component sizes must pull from this ladder. */
+	   Component sizes must pull from this ladder. (owner, typography
-	--text-xxs: 10px;
+	   round 4: the 10px rung is merged into 11 — one pixel apart was a
-	--text-xxs--line-height: 1.4;
+	   distinction with no visible difference, and 10px sits at the mono
+	   legibility floor; quiet labels get their quiet from color +
+	   tracking, not a notch of size. Reading prose = the 16px rung via
+	   --lh-prose-size.) */
 	--text-xs: 11px;
 	--text-xs--line-height: 1.4;
 	--text-sm: 12.5px;
@@ -158,6 +177,19 @@ body {
 	color: var(--lh-ink-italic);
 }
 
+/* lh-input (owner, typography round 2): lh-prose's 1.5 READING leading
+   makes typing carets tower over the glyphs — the caret fills the line
+   box (24px at 16px text, ~2× the glyph height). Inputs are not
+   paragraphs: a tighter 1.25 leading brings the caret to the font-metric
+   floor (~20px, as close to the glyphs as Chromium will draw it) while
+   wrapped lines in growing textareas still read fine. Rendered prose keeps
+   1.5 — the two share family and size, they differ only in leading. */
+.lh-input {
+	font-family: var(--font-prose);
+	font-size: var(--lh-prose-size);
+	line-height: 1.25;
+}
+
 /* Thin dark native scrollbar (app-wide): dark thumb, transparent track. */
 * {
 	scrollbar-width: thin;
@@ -232,53 +264,44 @@ body {
 }
 
 /* ============================================================
- * Session status — phase colors + status dots
+ * Session status — the braille spinner (the one working indicator)
- * (picker strips, header chip, transcript dividers: one language)
  * ============================================================ */
 
-/* Phase colors: blue = probing, violet = planning, green = teaching.
+/* (owner, minimal-color round) Phase color-coding is RETIRED: phases only
-   Tuned per theme (light needs darker, dark lighter). These color the
+   advance (every session ends in Teaching), so phase-as-signal was
-   session dots, header chip and transcript dividers — one language. */
+   decoration; the --phase-* tokens and every phase-dot state are gone.
-:root {
+   What state deserved — "a turn is in flight" — is carried by MOTION
-	--phase-probe: oklch(0.55 0.17 253);
+   alone: the terminal braille spinner (components/braille-spinner.tsx),
-	--phase-plan: oklch(0.54 0.19 300);
+   monochrome, existing only while true. */
-	--phase-teach: oklch(0.55 0.14 160);
-}
 
-.dark {
+/* One keyframes, all ten frames: each frame <g> holds opacity 1 for its
-	--phase-probe: oklch(0.72 0.13 250);
+   10% slice of the 800ms cycle and 0 elsewhere; frames stagger via
-	--phase-plan: oklch(0.72 0.14 300);
+   positive animation-delay (frame k starts at k×80ms). Static contexts
-	--phase-teach: oklch(0.74 0.12 160);
+   (SSR, reduced motion) show frame 0 — see the base rules below. */
-}
+@keyframes braille-frame {
-
-@theme inline {
-	--color-phase-probe: var(--phase-probe);
-	--color-phase-plan: var(--phase-plan);
-	--color-phase-teach: var(--phase-teach);
-}
-
-/* Session dot motion (picker): the ONLY animated state is "teacher is
-   working" — a quiet phase-colored breathing. Pending questions are the
-   dominant resting state and stay perfectly still (solid dot). */
-@keyframes lh-dot-breathe {
 	0%,
-	100% {
+	10% {
-		opacity: 0.35;
+		opacity: 1;
-		transform: scale(0.75);
 	}
 
-	50% {
+	10.001%,
-		opacity: 1;
+	100% {
-		transform: scale(1);
+		opacity: 0;
 	}
 }
 
-.lh-dot-breathe {
+.braille-frame {
-	animation: lh-dot-breathe 1.4s ease-in-out infinite;
+	animation: braille-frame 800ms linear infinite;
+	opacity: 0;
+}
+
+/* Static fallback: frame 0 (⠋) is the glyph a non-animated context shows. */
+.braille-frame[data-frame="0"] {
+	opacity: 1;
 }
 
 @media (prefers-reduced-motion: reduce) {
-	.lh-dot-breathe {
+	.braille-frame {
 		animation: none;
 	}
 }

components/activity-dock.tsx

@@ -274,7 +274,7 @@ export function ActivitySection({ feed: feedProp }: { feed?: ActivityFeed }) {
 	// alone (the cost span is population, not decoration).
 	return (
 		<section data-testid="activity-section" className="border-t border-border px-3 pb-3 pt-2">
-			<div className="mb-1 flex items-center gap-1.5 text-xxs uppercase tracking-widest text-muted-foreground/70">
+			<div className="mb-1 flex items-center gap-1.5 text-xs uppercase tracking-widest text-muted-foreground/70">
 				<ActivityIcon className="size-3" />
 				Background agents
 				{blobs.length > 0 && (

components/answered-card.tsx

@@ -72,7 +72,7 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
 										)}
 									>
 										{/* Owner round 8: a touch smaller than the text (size-4→size-3.5,
-											   ≈14px vs the 16.5px row) while centered. */}
+											   ≈14px vs the 16px row) while centered. */}
 										{(key || sel) && <GlyphMark kind={key ? "check" : "x"} className="size-3.5" />}
 									</span>
 								)}
@@ -101,7 +101,7 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
 
 			{answer.note && (
 				<div data-testid="your-thinking" className="mt-3 border-l-2 border-primary/40 pl-3">
-					<span className="mb-0.5 block text-xxs font-medium uppercase tracking-wide text-muted-foreground">
+					<span className="mb-0.5 block text-xs font-medium uppercase tracking-wide text-muted-foreground">
 						Your thinking
 					</span>
 					<span className="lh-prose block whitespace-pre-wrap text-foreground/90">{answer.note}</span>

components/braille-spinner.tsx

@@ -0,0 +1,68 @@
+import { cn } from "@/lib/utils";
+
+/**
+ * THE BRAILLE SPINNER (owner, minimal-color round): the one working-state
+ * indicator, in the terminal's own glyph language. Pure function + CSS —
+ * no JS frame timer, no React re-render per frame; each frame is a tiny
+ * <g> whose opacity is compositor-animated, so the cost is below the old
+ * breathing dot's (which animated opacity AND transform).
+ *
+ * Geometry: the classic cli-spinner sequence (⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏, 10 frames,
+ * 80ms each — 800ms cycle) as EXACT dot bitmaps in a 2×4 braille cell
+ * (dots 1-3 = left column, 4-6 = right). One shared keyframes (globals.css
+ * .braille-frame) holds each frame visible for its 10% slice; frames
+ * stagger via positive animation-delay, so frame 0 leads from first paint.
+ *
+ * Static fallback (SSR pre-hydrate, prefers-reduced-motion, print): frame
+ * 0 (⠋) shows — a legible glyph, not a blank. Motion is honest here: it
+ * exists only while a turn is in flight and vanishes the moment it ends.
+ */
+const FRAMES: ReadonlyArray<{ dots: ReadonlyArray<readonly [number, number]> }> = [
+	{ dots: [[1, 1], [1, 3], [3, 1]] },
+	{ dots: [[1, 1], [3, 1], [3, 3]] },
+	{ dots: [[1, 1], [3, 1], [3, 3], [3, 5]] },
+	{ dots: [[3, 1], [3, 3], [3, 5]] },
+	{ dots: [[1, 5], [3, 1], [3, 3], [3, 5]] },
+	{ dots: [[1, 5], [3, 3], [3, 5]] },
+	{ dots: [[1, 3], [1, 5], [3, 5]] },
+	{ dots: [[1, 1], [1, 3], [1, 5], [3, 5]] },
+	{ dots: [[1, 1], [1, 3], [1, 5]] },
+	{ dots: [[1, 1], [1, 3], [1, 5], [3, 1]] },
+];
+
+/** The animation constants (mirrors globals.css .braille-frame). */
+export const SPINNER_FRAME_MS = 80;
+export const SPINNER_FRAMES = FRAMES.length;
+
+export function BrailleSpinner({
+	className,
+	label = "Teacher is working",
+}: {
+	/** Sizing/position classes; height drives the scale (width is the cell's 1:2 aspect). */
+	className?: string;
+	/** The accessible name of the state this spinner announces. */
+	label?: string;
+}) {
+	return (
+		<svg
+			viewBox="0 0 4 8"
+			data-testid="braille-spinner"
+			role="status"
+			aria-label={label}
+			className={cn("h-3 w-auto shrink-0 text-foreground", className)}
+		>
+			{FRAMES.map((frame, k) => (
+				<g
+					key={k}
+					className="braille-frame"
+					data-frame={k}
+					style={{ animationDelay: `${k * SPINNER_FRAME_MS}ms` }}
+				>
+					{frame.dots.map(([cx, cy]) => (
+						<circle key={`${cx}-${cy}`} cx={cx} cy={cy} r={0.8} className="fill-current" />
+					))}
+				</g>
+			))}
+		</svg>
+	);
+}

components/chat.tsx

@@ -584,12 +584,16 @@ export function Chat({
 				{/* The top bar is its own block (owner, top-fade round 4): in flow
 				    above the scroller on the plain page background — no gradient. Its
 				    bottom outline (border-b border-border) matches the one that
-				    separates the left sidebar — same width, same color (owner, r5). h-10, not py-2: the toggle (a size-9 icon button)
+				    separates the left sidebar — same width, same color (owner, r5).
-				    renders only while the sidebar is CLOSED — an auto-height row
+				    h-15 (60px), not py-2: the toggle (a size-9 icon button) renders
-				    would collapse when it disappears and slide the title + chip up. */}
+				    only while the sidebar is CLOSED — an auto-height row would
-				<header className="flex h-10 items-center gap-3 border-b border-border px-3">
+				    collapse when it disappears and slide the title + chip up.
+				    60px is an ALIGNMENT, not just a size: it equals the sidebar's
+				    LH wordmark band, so the header's border-b continues that
+				    band's bottom edge as one line across the app (owner, round 6). */}
+				<header className="flex h-15 items-center gap-3 border-b border-border px-3">
 					<SidebarToggle />
-					<div className="min-w-0 flex-1 truncate font-title text-2xl tracking-tight">{title}</div>
+					<div className="min-w-0 flex-1 truncate font-title text-3xl tracking-tight">{title}</div>
 					{/* The plan chip (owner, plan-placement round): session-level
 					    structure beside the phase chip — access to the full-DAG popup
 					    at every width; the marginalia is the wide-screen glance view. */}

components/composer.tsx

@@ -59,7 +59,7 @@ export function Composer({
 				placeholder="Ask, answer, or steer the lesson…"
 				autoFocus={autoFocus}
 				rows={1}
-				className="field-sizing-content lh-prose max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
+				className="field-sizing-content lh-input max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
 			/>
 			{verdict && !busy ? (
 				// The plan verdict (docs/probe-teach-split.md §4): accept

components/graph-context-marker.tsx

@@ -91,7 +91,7 @@ export function GraphContextList({ data }: { data: GraphContextData }): ReactNod
 					<li key={p.id} className="flex items-baseline gap-2">
 						<span className="shrink-0 tabular-nums text-muted-foreground">{i + 1}.</span>
 						{p.level && (
-							<span className="shrink-0 rounded bg-foreground/10 px-1 py-0.5 text-xxs text-muted-foreground">
+							<span className="shrink-0 rounded bg-foreground/10 px-1 py-0.5 text-xs text-muted-foreground">
 								{p.level}
 							</span>
 						)}

components/graph-coverage.tsx

@@ -135,7 +135,7 @@ export function CoveragePanel({
 				<span className="text-xs font-medium uppercase tracking-widest text-muted-foreground/70">
 					Extraction coverage
 				</span>
-				<span className="text-xxs text-muted-foreground">uncovered first</span>
+				<span className="text-xs text-muted-foreground">uncovered first</span>
 			</div>
 			{!anyUncovered && (
 				<p className="px-1 py-2 text-xs text-muted-foreground">
@@ -156,7 +156,7 @@ function CoverageRow({ chat, busy, onExtract }: { chat: CoverageChat; busy: bool
 		<div className="flex items-center gap-2 rounded-lg px-1 py-1.5 hover:bg-accent/50" data-testid="coverage-row">
 			<div className="min-w-0 flex-1">
 				<div className="truncate text-xs text-foreground">{chat.title}</div>
-				<div className="flex items-baseline gap-1.5 text-xxs text-muted-foreground">
+				<div className="flex items-baseline gap-1.5 text-xs text-muted-foreground">
 					{busy ? (
 						<span className="flex items-center gap-1">
 							<Loader2Icon className="size-3 animate-spin" /> extracting…
@@ -181,7 +181,7 @@ function CoverageRow({ chat, busy, onExtract }: { chat: CoverageChat; busy: bool
 				type="button"
 				disabled={busy || chat.uncoveredTokens === 0}
 				onClick={onExtract}
-				className="shrink-0 rounded-lg border px-2 py-1 text-xxs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent"
+				className="shrink-0 rounded-lg border px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent"
 			>
 				{busy ? "Running" : "Extract"}
 			</button>

components/home.tsx

@@ -91,7 +91,7 @@ export function Home() {
 						placeholder="What do you want to learn?"
 						autoFocus
 						rows={1}
-						className="field-sizing-content lh-prose max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
+						className="field-sizing-content lh-input max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
 					/>
 					<button
 						type="submit"

components/model-picker.tsx

@@ -190,7 +190,7 @@ export function ModelControl({
 				className="flex items-center gap-1.5 rounded-full border border-border/60 bg-card/70 px-2.5 py-1 transition-colors hover:border-border hover:bg-muted"
 			>
 				<span className="text-card-foreground">{effectiveId ? prettyModel(effectiveId) : "—"}</span>
-					<span aria-hidden className="text-xxs text-muted-foreground">▾</span>
+					<span aria-hidden className="text-xs text-muted-foreground">▾</span>
 			</button>
 			<button
 				type="button"
@@ -208,7 +208,7 @@ export function ModelControl({
 				<span className="text-card-foreground">
 					{effectiveLevel === undefined ? "—" : (LEVEL_LABEL[effectiveLevel] ?? effectiveLevel)}
 				</span>
-				<span aria-hidden className="text-xxs text-muted-foreground">▾</span>
+				<span aria-hidden className="text-xs text-muted-foreground">▾</span>
 			</button>
 
 			{open === "model" && (
@@ -222,7 +222,7 @@ export function ModelControl({
 						value={query}
 						onChange={(e) => setQuery(e.target.value)}
 						placeholder="Search models…"
-						className="lh-prose mb-1.5 w-full rounded-lg border bg-background px-2 py-1.5 text-foreground outline-none focus:ring-1 focus:ring-ring"
+						className="lh-input mb-1.5 w-full rounded-lg border bg-background px-2 py-1.5 text-foreground outline-none focus:ring-1 focus:ring-ring"
 					/>
 					{error && <div className="mb-1.5 text-destructive">{error}</div>}
 					{!catalog && (
@@ -267,7 +267,7 @@ export function ModelControl({
 							</li>
 						))}
 					</ul>
-					<div className="mt-1 border-t px-2 pt-1.5 text-xxs text-muted-foreground">
+					<div className="mt-1 border-t px-2 pt-1.5 text-xs text-muted-foreground">
 						Applies to the next turn · background agents stay config-pinned
 					</div>
 				</div>
@@ -299,7 +299,7 @@ export function ModelControl({
 						</button>
 					))}
 					{error && <div className="mt-1 text-destructive">{error}</div>}
-					<div className="mt-1 border-t px-2 pt-1.5 text-xxs text-muted-foreground">
+					<div className="mt-1 border-t px-2 pt-1.5 text-xs text-muted-foreground">
 						Levels this model actually supports
 					</div>
 				</div>

components/new-session.tsx

@@ -77,9 +77,11 @@ export function DraftShell({
 	return (
 		<div className="flex h-dvh">
 			<div className="flex min-w-0 flex-1 flex-col">
-				<header className="relative flex h-10 items-center gap-3 px-3">
+				{/* h-15 (60px) matches the chat header and the sidebar's LH wordmark
+			    band (owner, round 6). */}
+			<header className="relative flex h-15 items-center gap-3 px-3">
 					<SidebarToggle />
-					<div className="min-w-0 flex-1 truncate font-title text-2xl tracking-tight">New session</div>
+					<div className="min-w-0 flex-1 truncate font-title text-3xl tracking-tight">New session</div>
 					<PhaseChip phase="probe" />
 				</header>
 

components/phase-divider.tsx

@@ -1,19 +1,27 @@
-import { cn } from "@/lib/utils";
 import type { Phase3 } from "@/src/core";
 
 /**
- * The in-session phase presentation — the explicit face of what the picker
+ * The in-session phase presentation (owner, minimal-color round —
- * shows as a color strip (one color system everywhere, globals.css
+ * monochrome now): the header chip next to the session title, and the
- * --phase-*): the header chip next to the session title, and the dotted
+ * dotted boundary rule the transcript draws where the session moves into a
- * boundary rule the transcript draws where the session moves into a new
+ * new phase. Phase COLOR is retired app-wide (phases only advance, so
- * phase. Replaces the old inline plan-divider (artifact registry): the
+ * color-as-signal was decoration); the label text carries the phase, and
- * boundary is a MESSAGE-level seam, so chat.tsx renders it at the message
+ * the chip's old dot slot is repurposed for the braille spinner while a
- * where the phase changes, not inside a tool part.
+ * turn is in flight — motion is the honest state signal. Replaces the old
+ * inline plan-divider (artifact registry): the boundary is a MESSAGE-level
+ * seam, so chat.tsx renders it at the message where the phase changes, not
+ * inside a tool part.
  *
  * Quiet register (matches the old divider): hairline rules, small chips —
  * never a banner. Probe never renders a divider: phases only advance, so
  * probe is the start of the transcript and "Planning"/"Teaching" are the two
  * visible seams.
+ *
+ * Owner, minimal-color round 2: the chip is LABEL-ONLY, deliberately — a
+ * working-state spinner was tried here and rejected: the pill's curve and
+ * the square braille cell fought for space, and the chat surface already
+ * shows in-flight work (thinking shimmer, the dock). The chip states the
+ * phase; work-state is the sidebar row's spinner.
  */
 
 /** Header-chip labels: the phases as the learner thinks of them. */
@@ -23,42 +31,28 @@ const CHIP_LABEL: Record<Phase3, string> = {
 	teach: "Teaching",
 };
 
-const PHASE_DOT: Record<Phase3, string> = {
+/** The header chip: the phase label, monochrome — label-only by design
-	probe: "bg-phase-probe",
+ *  (see the component note: the pill's curve suits text, not glyphs). */
-	plan: "bg-phase-plan",
-	teach: "bg-phase-teach",
-};
-
-/** The header chip: a phase-colored dot + label next to the session title. */
 export function PhaseChip({ phase }: { phase: Phase3 }) {
 	return (
 		<span
 			data-testid="phase-chip"
 			data-phase={phase}
 			title={`Session phase: ${CHIP_LABEL[phase]}`}
-			className="flex shrink-0 items-center gap-1.5 rounded-full border border-border/80 px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground"
+			className="flex shrink-0 items-center rounded-full border border-border/80 px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground"
 		>
-			<span className={cn("size-1.5 rounded-full", PHASE_DOT[phase])} aria-hidden />
 			{CHIP_LABEL[phase]}
 		</span>
 	);
 }
 
-/** Divider rule + chip colors per phase (probe never reaches here). */
-const DIVIDER_RULE: Partial<Record<Phase3, string>> = {
-	plan: "border-phase-plan/50",
-	teach: "border-phase-teach/50",
-};
-const DIVIDER_TEXT: Partial<Record<Phase3, string>> = {
-	plan: "border-phase-plan/50 text-phase-plan",
-	teach: "border-phase-teach/50 text-phase-teach",
-};
-
 /**
- * The transcript boundary: a color-coded dotted rule at the message where
+ * The transcript boundary: a monochrome dotted rule at the message where
- * the session enters `phase`. The plan seam carries its node count ("Plan ·
+ * the session enters `phase` (owner, minimal-color round — the label
- * 4 nodes"); teaching is just the label. Null for probe (defensive — the
+ * carries the transition; the phase color never did). The plan seam
- * fold never emits a probe transition after the start).
+ * carries its node count ("Plan · 4 nodes"); teaching is just the label.
+ * Null for probe (defensive — the fold never emits a probe transition
+ * after the start).
  */
 export function PhaseDivider({ phase, nodeCount }: { phase: Phase3; nodeCount?: number }) {
 	if (phase === "probe") return null;
@@ -68,16 +62,11 @@ export function PhaseDivider({ phase, nodeCount }: { phase: Phase3; nodeCount?:
 			: CHIP_LABEL[phase];
 	return (
 		<div className="my-4 flex w-full items-center gap-3" data-testid={`phase-divider-${phase}`}>
-			<span className={cn("h-0 flex-1 border-t-2 border-dotted", DIVIDER_RULE[phase])} aria-hidden />
+			<span className="h-0 flex-1 border-t-2 border-dotted border-border/50" aria-hidden />
-			<span
+			<span className="rounded-full border border-border/80 px-2.5 py-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-				className={cn(
-					"rounded-full border px-2.5 py-0.5 text-xs font-medium uppercase tracking-wide",
-					DIVIDER_TEXT[phase],
-				)}
-			>
 				{label}
 			</span>
-			<span className={cn("h-0 flex-1 border-t-2 border-dotted", DIVIDER_RULE[phase])} aria-hidden />
+			<span className="h-0 flex-1 border-t-2 border-dotted border-border/50" aria-hidden />
 		</div>
 	);
 }

components/plan-block.tsx

@@ -192,8 +192,9 @@ export const GLOW_BLUR = 5;
 export const GLOW_REACH = GLOW_MARGIN + 3 * GLOW_BLUR;
 /** Node titles render at text-xs (12.5px) in svg units. The in-chat block
  *  scales up to fill the column but NEVER past the chat prose size
- *  (--lh-prose-size, 16.5px) — the width cap that makes that hold. */
+ *  (--lh-prose-size, 16px — the ladder's reading rung) — the width cap
-export const TEXT_CAP_SCALE = 16.5 / 12.5;
+ *  that makes that hold. */
+export const TEXT_CAP_SCALE = 16 / 12.5;
 
 // ─── The owner's arrowhead (plan-graph round 5) ──────────────────────────────
 
@@ -808,7 +809,7 @@ export function PlanPopup({ messages, onClose }: { messages: readonly PopupMessa
 							/>
 						</div>
 						<div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between p-2">
-							<span className="text-xxs text-muted-foreground/60">Drag to pan · scroll to zoom</span>
+							<span className="text-xs text-muted-foreground/60">Drag to pan · scroll to zoom</span>
 							<div className="flex gap-1">
 								<button
 									type="button"

components/question-dock.tsx

@@ -307,7 +307,7 @@ function QuestionDockForm({
 										)}
 									>
 										{isSel && (
-											<span className={cn(qd.mode === "multi-select" ? "text-xxs" : "size-1.5 rounded-full bg-current")}>
+											<span className={cn(qd.mode === "multi-select" ? "text-xs" : "size-1.5 rounded-full bg-current")}>
 												{qd.mode === "multi-select" ? "✓" : ""}
 											</span>
 										)}
@@ -373,7 +373,7 @@ function QuestionDockForm({
 									)}
 								>
 									{sel.otherSelected && (
-										<span className={cn(qd.mode === "multi-select" ? "text-xxs" : "size-1.5 rounded-full bg-current")}>
+										<span className={cn(qd.mode === "multi-select" ? "text-xs" : "size-1.5 rounded-full bg-current")}>
 											{qd.mode === "multi-select" ? "✓" : ""}
 										</span>
 									)}
@@ -387,7 +387,7 @@ function QuestionDockForm({
 										setSel((prev) => (prev.otherSelected ? prev : toggleOther(selectMode, prev)));
 									}}
 									placeholder="Type your own answer…"
-									className="lh-prose w-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
+									className="lh-input w-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
 									onClick={(e) => e.stopPropagation()}
 								/>
 							</div>
@@ -412,7 +412,7 @@ function QuestionDockForm({
 					data-testid={qd.mode === "text" ? "answer-field" : "thinking-field"}
 					className="rounded-xl border border-border/70 bg-background/60 transition-colors focus-within:border-primary/50"
 				>
-					<div className="px-2.5 pt-2 text-xxs font-medium uppercase tracking-wide text-muted-foreground">
+					<div className="px-2.5 pt-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
 						{qd.mode === "text" ? "Your answer" : "Your thinking"}
 					</div>
 					{qd.mode === "text" ? (
@@ -429,7 +429,7 @@ function QuestionDockForm({
 							}}
 							placeholder="Type your answer…"
 							rows={1}
-							className="field-sizing-content lh-prose max-h-48 min-h-10 w-full resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
+							className="field-sizing-content lh-input max-h-48 min-h-10 w-full resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
 						/>
 					) : (
 						<textarea
@@ -446,7 +446,7 @@ function QuestionDockForm({
 							placeholder="Why this answer? What are you unsure about? Say as much as you like — the teacher reads all of this."
 							rows={1}
 							className={cn(
-								"field-sizing-content lh-prose max-h-48 w-full resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground/70",
+								"field-sizing-content lh-input max-h-48 w-full resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground/70",
 								// Phase-scaled prominence: teaching invites depth,
 								// probing stays quick.
 								phase === "teach" ? "min-h-[4.5rem]" : "min-h-10",
@@ -455,7 +455,7 @@ function QuestionDockForm({
 					)}
 					<div className="flex items-center justify-between gap-2 p-1">
 						{qd.mode !== "text" && (
-							<span aria-hidden className="pl-1.5 text-xxs text-muted-foreground">
+							<span aria-hidden className="pl-1.5 text-xs text-muted-foreground">
 								⌘/Ctrl + ↵ submits
 							</span>
 						)}

components/sidebar.tsx

@@ -5,10 +5,11 @@ import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { PanelLeftCloseIcon, PanelLeftOpenIcon, PlusIcon, SearchIcon } from "lucide-react";
 import { ActivitySection } from "@/components/activity-dock";
+import { BrailleSpinner } from "@/components/braille-spinner";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
-import type { ChatListItem, Phase3 } from "@/src/core";
+import type { ChatListItem } from "@/src/core";
 
 /**
  * Toggleable sidebar — NOT a modal drawer: no backdrop, no focus theft. It
@@ -51,83 +52,73 @@ export function SidebarProvider({ children }: { children: React.ReactNode }) {
 	return (
 		<SidebarContext.Provider value={{ open, toggle }}>
 			{/* transitions gated on mount: no slide-in flash on page load */}
-			<div className={cn("flex h-dvh", mounted && "[&_.sidebar-motion]:transition-[width]")}>{children}</div>
+			<div className={cn("flex h-dvh", mounted && "[&_.sidebar-motion]:transition-[width,margin,opacity]")}>{children}</div>
 		</SidebarContext.Provider>
 	);
 }
 
-/** Hamburger for page headers — only visible when the sidebar is closed. */
+/** Hamburger for page headers — only visible when the sidebar is closed.
+ *
+ *  Owner, round 6c: the toggle is ALWAYS MOUNTED, owning a slot whose
+ *  width+margin animate in LOCKSTEP with the sidebar's own width
+ *  transition (same duration-200, same easing, both gated on mount) —
+ *  before, it mounted/unmounted in one frame, so its 48px footprint
+ *  (button + gap) popped and dragged the title and chips sideways while
+ *  the sidebar was still mid-slide. When open the slot is exactly zero
+ *  (w-0 -mr-3: width 0, the negative margin cancels the header's gap-3),
+ *  so resting layouts are pixel-identical to the old conditional render.
+ *  The icon fades with the slot and is clipped by it as it collapses —
+ *  no popping in either direction. */
 export function SidebarToggle() {
 	const { open, toggle } = useSidebar();
-	if (open) return null;
 	return (
-		<Button variant="ghost" size="icon" aria-label="Open sidebar" onClick={toggle}>
+		<span
-			<PanelLeftOpenIcon className="size-5" />
+			className={cn(
-		</Button>
+				"sidebar-motion relative flex h-9 shrink-0 overflow-hidden duration-200",
+				open ? "w-0 -mr-3" : "w-9 mr-0",
+			)}
+		>
+			<Button
+				variant="ghost"
+				size="icon"
+				aria-label="Open sidebar"
+				aria-hidden={open}
+				tabIndex={open ? -1 : 0}
+				onClick={toggle}
+				className={cn("sidebar-motion duration-200", open ? "pointer-events-none opacity-0" : "opacity-100")}
+			>
+				{/* Owner, round 6: size-4, SAME as the close glyph — the toggle
+				    must not grow when the sidebar is closed (it did: size-5 here).
+				    The small look is the standard, both directions. */}
+				<PanelLeftOpenIcon className="size-4" />
+			</Button>
+		</span>
 	);
 }
 
-/** Phase colors for the session dot — one system with the header chip
- *  and the transcript dividers (globals.css --phase-*). Static class
- *  strings per phase: Tailwind can't compile dynamic class names. */
-const PHASE_FILL: Record<Phase3, string> = {
-	probe: "bg-phase-probe",
-	plan: "bg-phase-plan",
-	teach: "bg-phase-teach",
-};
-const PHASE_RING: Record<Phase3, string> = {
-	probe: "border-phase-probe",
-	plan: "border-phase-plan",
-	teach: "border-phase-teach",
-};
-
 /**
- * The session dot, left of the title. TWO channels, one dot: COLOR is the
+ * The row's status indicator (owner, minimal-color round): the braille
- * phase (probe/plan/teach — sky/violet/emerald), FILL+MOTION is what's
+ * spinner, ONLY while a teach turn is in flight — monochrome motion, the
- * owed. Pulsing = the teacher is working (rare, time-sensitive — the only
+ * terminal's own glyph, existing exactly as long as the work does and
- * state that deserves motion). Solid = a question awaits the learner's
+ * vanishing the moment it ends. Every other state renders NOTHING:
- * answer (the DOMINANT resting state of real sessions — calm by design,
+ * phases only advance (all sessions end in Teaching — phase-as-signal was
- * no animation). Hollow = nothing owed, idle. A pending answer outranks
+ * decoration, now retired app-wide), and question-pending is the dominant
- * "working": if a question is owed, that's the blocking fact.
+ * RESTING state of real sessions — a resting state has no scan value, so
+ * the meta line's "Waiting for your answer" text carries it. Idle is the
+ * absence of a signal, by design.
  */
-function SessionDot({ phase, pending, busy }: { phase: Phase3; pending: boolean; busy: boolean }) {
+function SessionStatus({ busy }: { busy: boolean }) {
-	if (pending) {
+	if (!busy) return null;
-		return (
+	return <BrailleSpinner />;
-			<span
-				data-testid="session-dot-awaiting"
-				title="Waiting for your answer"
-				className={cn("size-2 shrink-0 rounded-full", PHASE_FILL[phase])}
-			>
-				<span className="sr-only">Waiting for your answer</span>
-			</span>
-		);
-	}
-	if (busy) {
-		return (
-			<span
-				data-testid="session-dot-working"
-				title="Teacher is working"
-				className={cn("size-2 shrink-0 rounded-full", PHASE_FILL[phase], "lh-dot-breathe")}
-			>
-				<span className="sr-only">Teacher is working</span>
-			</span>
-		);
-	}
-	return (
-		<span
-			data-testid="session-dot-idle"
-			aria-hidden
-			className={cn(
-				"size-2 shrink-0 rounded-full border-2 bg-transparent",
-				PHASE_RING[phase],
-			)}
-		/>
-	);
 }
 
 /** Compact "how long ago": "just now", "5m ago", "3h ago", "2d ago",
  *  then a plain date. How long a session has been WAITING matters more
- *  than an absolute timestamp. Pure — exported for tests. */
+ *  than an absolute timestamp. Beyond a week the date renders ISO
+ *  (YYYY-MM-DD, zero-padded) — the international standard: unambiguous
+ *  in any locale and it sorts (owner, typography round 5; the old
+ *  M/D/YYYY was the US convention. A user-locale setting can come later
+ *  — trivial, a format function swap). Pure — exported for tests. */
 export function timeAgo(iso: string, now = new Date()): string {
 	const ms = now.getTime() - new Date(iso).getTime();
 	if (ms < 60_000) return "just now";
@@ -137,21 +128,27 @@ export function timeAgo(iso: string, now = new Date()): string {
 	if (h < 24) return `${h}h ago`;
 	const d = Math.floor(h / 24);
 	if (d < 7) return `${d}d ago`;
-	return new Date(iso).toLocaleDateString();
+	const date = new Date(iso);
+	const mm = String(date.getMonth() + 1).padStart(2, "0");
+	const dd = String(date.getDate()).padStart(2, "0");
+	return `${date.getFullYear()}-${mm}-${dd}`;
 }
 
-/** The row's second line: state replaces the message count when the state
+/** The row's second line: the state when a state exists (waiting/working),
- *  is the more useful fact (most resting sessions are awaiting an answer —
+ *  otherwise just how long ago. The message count is DROPPED (owner,
- *  that's what the learner scans for). */
+ *  typography round 5): it informed no decision — clutter. messageCount
+ *  still rides the API payload, so this is a one-line flip back if it's
+ *  ever wanted. */
 function sessionMeta(chat: ChatListItem): string {
 	if (chat.pendingQuestion) return `Waiting for your answer · ${timeAgo(chat.updatedAt)}`;
 	if (chat.busy) return "Teacher is working…";
-	return `${chat.messageCount} messages · ${new Date(chat.updatedAt).toLocaleDateString()}`;
+	return timeAgo(chat.updatedAt);
 }
 
 /**
- * One session row: the status dot, then title + state-aware meta. Exported
+ * One session row: the status spinner (only while working), then title +
- * for render tests — pure function of the list item.
+ * state-aware meta. Exported for render tests — pure function of the
+ * list item.
  */
 export function SessionRow({
 	chat,
@@ -167,13 +164,18 @@ export function SessionRow({
 			type="button"
 			onClick={onOpen}
 			className={cn(
-				"relative mb-0.5 flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-accent",
+				"relative mb-0.5 flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left transition-colors hover:bg-accent",
-				active && "bg-accent font-medium",
+				active && "bg-accent",
 			)}
 		>
-			<SessionDot phase={chat.phase} pending={chat.pendingQuestion} busy={chat.busy} />
+			<SessionStatus busy={chat.busy} />
 			<span className="min-w-0 flex-1">
-				<span className="block truncate">{chat.title}</span>
+				{/* Titles are the learner's/teacher's WORDS — Source Sans 3, the
+				    same voice the words were typed in (every input is lh-prose);
+				    the meta line below stays JetBrains Mono (machine data). One
+				    rule, finally applied to the picker too (owner, typography
+				    round): mono = chrome, Source Sans = human words. */}
+				<span className="block truncate font-prose text-(length:--lh-prose-size)">{chat.title}</span>
 				<span className="block text-xs text-muted-foreground">{sessionMeta(chat)}</span>
 			</span>
 		</button>
@@ -253,7 +255,7 @@ function SessionsSidebar() {
 				</button>
 
 				<div className="mx-3 mb-1 flex items-center gap-2">
-					<span className="text-xxs uppercase tracking-widest text-muted-foreground/70">Sessions</span>
+					<span className="text-xs uppercase tracking-widest text-muted-foreground/70">Sessions</span>
 					<span className="relative flex-1">
 						<Input
 							data-testid="session-search"

src/core/contracts/chat.ts

@@ -286,10 +286,12 @@ export interface ChatSummary {
 }
 
 /** The sidebar's session row: a summary + live liveness. The chats list
- *  route attaches `busy` from the turn-liveness registry and the job store
+ *  route attaches `busy` from the turn-liveness registry ONLY — a running
- *  (a running turn OR a background job = the session is working). The store
+ *  teach turn (owner, minimal-color round: background jobs no longer
- *  itself can't see liveness (import law: store never imports server),
+ *  count; the sidebar's Background agents section is their channel, and
- *  hence the split at exactly the record/liveness seam. */
+ *  the row spinner means exactly "a turn is in flight"). The store itself
+ *  can't see liveness (import law: store never imports server), hence the
+ *  split at exactly the record/liveness seam. */
 export interface ChatListItem extends ChatSummary {
 	busy: boolean;
 }

tests/render-phase-divider.test.tsx

@@ -1,8 +1,10 @@
 /**
- * Phase presentation render tests — the in-session face of the picker's
+ * Phase presentation render tests — the in-session face (components/
- * color strips (components/phase-divider.tsx): the header chip and the
+ * phase-divider.tsx), monochrome since the minimal-color round: the header
- * dotted transcript boundary rules. Same tsx classic-JSX shim as
+ * chip (label + the braille spinner in the old dot slot while a turn is in
- * render-cards.test.tsx. (Replaces the old part-level PlanDivider tests.)
+ * flight) 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;
@@ -13,7 +15,7 @@ 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", () => {
+	it("renders the learner-facing label — no colored dot (phase color retired)", () => {
 		for (const [phase, label] of [
 			["probe", "Probing"],
 			["plan", "Planning"],
@@ -23,25 +25,34 @@ describe("PhaseChip (header)", () => {
 			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`);
+			assert.ok(!html.includes("bg-phase-"), `${phase} dot color retired`);
+			assert.ok(!html.includes("rounded-full bg-"), "no dot of any color — label only");
 		}
 	});
+
+	it("NEVER shows a working spinner — the pill's curve suits text, not glyph cells (owner, round 2)", () => {
+		const html = renderToStaticMarkup(<PhaseChip phase="teach" />);
+		assert.ok(!html.includes("braille-spinner"), "the chip is label-only by design");
+		assert.ok(!html.includes("braille-frame"), "no spinner frames leak in");
+	});
 });
 
 describe("PhaseDivider (transcript boundary)", () => {
-	it("the plan seam: dotted rules in the plan color + node count", () => {
+	it("the plan seam: monochrome dotted rules + 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");
+		assert.ok(html.includes("border-border"), "monochrome rule");
+		assert.ok(!html.includes("border-phase-"), "phase-colored rules are retired");
 	});
 
-	it("the teach seam: dotted rules in the teach color, no count", () => {
+	it("the teach seam: monochrome rule, 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("border-phase-"));
+		assert.ok(!html.includes("text-phase-"));
 		assert.ok(!html.includes("nodes"));
 	});
 

tests/render-plan-block.test.tsx

@@ -130,9 +130,10 @@ describe("plan block render", () => {
 		assert.ok(!/data-testid="plan-block-full"[^>]*border/.test(html), "no wrapping chrome");
 		// Fills the column UP TO the chat-font cap: the svg is w-full +
 		// mx-auto with maxWidth = extent × TEXT_CAP_SCALE, so node text never
-		// renders past the 16.5px prose size (owner, plan-graph round 1).
+		// renders past the 16px prose size (owner, plan-graph round 1; the
+		// snap 16.5→16 landed in typography round 4).
 		assert.match(html, /<svg[^>]*class="block h-auto w-full mx-auto"/);
-		assert.match(html, /max-width:232\.32px/); // (160+16) × 1.32
+		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).
 		assert.match(html, /viewBox="-8 -8 176 152"/);

tests/render-sidebar.test.tsx

@@ -1,9 +1,12 @@
 /**
- * Session-row render tests — the picker's status language. One dot, two
+ * Session-row render tests — the picker's status language (owner,
- * channels: COLOR = phase (sky/violet/emerald), FILL+MOTION = what's owed
+ * minimal-color round): ONE indicator, the braille spinner, present ONLY
- * (pulsing = teacher working, solid = answer owed, hollow = idle). Pure
+ * while a teach turn is in flight; every other state (idle, question
- * function of the list item, so SSR of <SessionRow> pins every visible
+ * pending) renders nothing — phases only advance, so phase-as-signal was
- * state. Same tsx classic-JSX shim as render-cards.test.tsx.
+ * decoration, and question-pending is the dominant RESTING state (the
+ * meta line's text carries it). Pure function of the list item, so SSR of
+ * <SessionRow> pins every visible state. Same tsx classic-JSX shim as
+ * render-cards.test.tsx.
  */
 import React from "react";
 (globalThis as Record<string, unknown>).React = React;
@@ -12,7 +15,7 @@ import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import { renderToStaticMarkup } from "react-dom/server";
 import { SessionRow, timeAgo } from "../components/sidebar.tsx";
-import type { ChatListItem, Phase3 } from "../src/core/index.ts";
+import type { ChatListItem } from "../src/core/index.ts";
 
 function item(overrides: Partial<ChatListItem>): ChatListItem {
 	return {
@@ -33,74 +36,80 @@ function render(chat: ChatListItem, active = false) {
 }
 
 describe("SessionRow", () => {
-	it("no phase strips — the dot alone carries the phase color", () => {
+	it("no phase strips, no phase colors — the retired decoration", () => {
 		const html = render(item({ phase: "teach" }));
 		assert.ok(!html.includes("phase-strip"), "strip removed by design (too busy)");
-		assert.ok(!html.includes("absolute top-2"), "no leftover strip geometry");
+		assert.ok(!html.includes("bg-phase-"), "phase fills are retired app-wide");
+		assert.ok(!html.includes("border-phase-"), "phase rings are retired app-wide");
 	});
 
-	it("idle session: hollow phase-colored ring, perfectly still", () => {
+	it("idle session: NO indicator — absence is the state", () => {
-		for (const phase of ["probe", "plan", "teach"] as Phase3[]) {
+		for (const phase of ["probe", "plan", "teach"] as const) {
 			const html = render(item({ phase }));
-			assert.ok(html.includes("session-dot-idle"), `${phase} idle dot present`);
+			assert.ok(!html.includes("session-dot"), "no dots — the status language is spinner-only");
-			assert.ok(html.includes(`border-phase-${phase}`), `${phase} ring carries its phase color`);
+			assert.ok(!html.includes("braille-spinner"), "idle never shows the spinner");
-			assert.ok(!html.includes("lh-dot-breathe"), "idle is never animated");
-			assert.ok(!html.includes("bg-phase-"), "hollow: no fill");
 		}
 	});
 
-	it("a pending question renders the SOLID phase dot — no animation (the dominant state stays calm)", () => {
+	it("a pending question renders NO indicator — resting state, carried by the meta text", () => {
 		const html = render(item({ phase: "teach", pendingQuestion: true }));
-		assert.ok(html.includes("session-dot-awaiting"), "awaiting dot present");
+		assert.ok(!html.includes("session-dot"), "no dots");
-		assert.ok(html.includes("bg-phase-teach"), "solid fill in the phase color");
+		assert.ok(!html.includes("braille-spinner"), "motion is reserved for working");
-		assert.ok(!html.includes("lh-dot-breathe"), "motion is reserved for working");
+		assert.ok(html.includes("Waiting for your answer"), "the meta line's text");
-		assert.ok(!html.includes("bg-attention"), "amber channel is gone");
-		assert.ok(html.includes("Waiting for your answer"), "label");
 	});
 
-	it("a working session renders the pulsing phase dot", () => {
+	it("a working session (turn in flight) renders the braille spinner — the ONLY indicator", () => {
 		const html = render(item({ phase: "plan", busy: true }));
-		assert.ok(html.includes("session-dot-working"), "working dot present");
+		assert.ok(html.includes('data-testid="braille-spinner"'), "the spinner");
-		assert.ok(html.includes("lh-dot-breathe"), "breathing animation");
+		assert.ok(html.includes("braille-frame"), "CSS-animated frames");
-		assert.ok(html.includes("bg-phase-plan"), "the pulse is phase-colored");
+		assert.ok((html.match(/class="braille-frame"/g) ?? []).length === 10, "all ten frames");
-		assert.ok(html.includes("Teacher is working"), "label");
+		assert.ok(html.includes('data-frame="0"'), "frame 0 leads (static fallback)");
+		assert.ok(html.includes("Teacher is working"), "accessible label");
+		assert.ok(!html.includes("bg-attention"), "no colored state fill — monochrome by design");
 	});
 
-	it("a pending answer outranks 'working' when both are true", () => {
+	it("busy does not double-signal background agents (that is the sidebar section's channel)", () => {
-		const html = render(item({ pendingQuestion: true, busy: true }));
+		// The narrowing lives in the API route (busy = isTurnRunning only);
-		assert.ok(html.includes("session-dot-awaiting"));
+		// the row itself just renders busy faithfully. Pinned here so the
-		assert.ok(!html.includes("session-dot-working"), "one dot at a time — awaiting wins");
+		// contract can't silently re-widen: an extraction-only "working"
+		// row would be a double signal.
+		const html = render(item({ busy: true, pendingQuestion: false }));
+		assert.ok(html.includes("Teacher is working"), "the spinner's label names the turn, not agents");
 	});
 
 	it("the meta line: state replaces the count when the state is the useful fact", () => {
 		const awaiting = render(item({ pendingQuestion: true, updatedAt: "2026-01-02T01:00:00.000Z" }));
 		assert.ok(awaiting.includes("Waiting for your answer · "), "awaiting meta");
 		assert.ok(!awaiting.includes("messages"), "count yields to the state");
-		assert.ok(!awaiting.includes("lh-dot-breathe"), "…and the dot is still solid");
+		assert.ok(!awaiting.includes("braille-spinner"), "…and the spinner stays off");
 
 		const working = render(item({ busy: true }));
 		assert.ok(working.includes("Teacher is working…"), "working meta");
 
+		// Owner, typography round 5: the message count is dropped — it
+		// informed no decision. Idle meta is just how long ago.
 		const idle = render(item({ title: "Partial derivatives", messageCount: 7 }));
 		assert.ok(idle.includes("Partial derivatives"));
-		assert.match(idle, /7 messages · \d{1,2}\/\d{1,2}\/\d{4}/, "idle keeps the count");
+		assert.ok(!idle.includes("messages"), "the count is gone (flip-flop: one line in sessionMeta)");
+		assert.match(idle, /\d{4}-\d{2}-\d{2}/, "idle shows the ISO date");
 	});
 
-	it("active row is visually marked", () => {
+	it("active row is visually marked by the background alone (owner, round 5: no weight change)", () => {
 		const html = render(item({}), true);
-		assert.ok(html.includes("font-medium"), "active emphasis");
+		assert.ok(html.includes("bg-accent"), "active background");
+		assert.ok(!html.includes("font-medium"), "weight is not a second channel doing the same job");
 	});
 });
 
 describe("timeAgo", () => {
 	const now = new Date("2026-01-02T12:00:00.000Z");
 
-	it("just now / minutes / hours / days, then falls back to a date", () => {
+	it("just now / minutes / hours / days, then the ISO date (owner, round 5)", () => {
 		assert.equal(timeAgo("2026-01-02T11:59:30.000Z", now), "just now");
 		assert.equal(timeAgo("2026-01-02T11:55:00.000Z", now), "5m ago");
 		assert.equal(timeAgo("2026-01-02T09:00:00.000Z", now), "3h ago");
 		assert.equal(timeAgo("2025-12-31T12:00:00.000Z", now), "2d ago");
-		assert.match(timeAgo("2025-06-02T12:00:00.000Z", now), /\d/, "beyond a week: a date");
+		assert.equal(timeAgo("2025-06-02T12:00:00.000Z", now), "2025-06-02", "beyond a week: ISO — unambiguous, sortable");
 	});
 
 	it("negative drift (clock skew) reads as just now, never a future date", () => {