Minimal-color round 1 (owner): phase color retired — the braille spinner is the one working indicator

Nothing exists purely for decoration: phase color-coding is retired
app-wide (phases only advance — every session ends Teaching — so
phase-as-signal was decoration with a one-time function), and what
state genuinely deserved — 'a turn is in flight' — is now carried by
MOTION alone, in the terminal's own glyph language.

- BrailleSpinner (components/braille-spinner.tsx): the canonical
  cli-spinner sequence (⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏) as exact dot bitmaps in a 2×4
  braille cell, 80ms/frame (800ms cycle). Pure CSS: one shared keyframes,
  frames staggered via animation-delay; no JS timer, no re-render per
  frame — cheaper than the old breathing dot. Static contexts (SSR,
  prefers-reduced-motion) show frame 0 — a legible glyph, not a blank.
- Sidebar rows: spinner ONLY while a teach turn is in flight; idle and
  question-pending render NOTHING (a resting state has no scan value —
  the meta line's 'Waiting for your answer' text carries it). The
  three-state phase dot (pulse/solid/hollow) and PHASE_FILL/RING maps
  are gone.
- Top bar PhaseChip: label-only pill; the old dot slot becomes the
  spinner's home while a turn is in flight (busy prop wired from
  ChatView's busy = localStream || turnInFlight). Transcript
  PhaseDividers drop phase colors for monochrome rules + labels.
- API narrowing (app/api/chats/route.ts + ChatListItem contract):
  busy = isTurnRunning ONLY — background jobs no longer count (the
  sidebar's Background agents section is their channel; a per-row
  spinner would double-signal them).
- globals.css: --phase-* tokens + lh-dot-breathe removed (dead after
  the sweep — no remaining users).

Live-verified: idle/pending rows render no indicator, /chat/new chip is
label-only, 10 CSSAnimations at 800ms with correct 80ms stagger, static
frame 0 under reduced motion. Gates: typecheck, lint, 470/470, build.

Lane crossings to flag at merge: app/api/chats/route.ts + the
ChatListItem contract comment (src/core) — the busy-semantics narrowing;
components/chat.tsx one-line busy prop.

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>
+	);
+}