From aa461bd13416b7674082b7b0ec63333124af8057 Mon Sep 17 00:00:00 2001
From: Adam Stankiewicz <agstanki@gmail.com>
Date: Sun, 23 Aug 2026 13:53:03 -0400
Subject: [PATCH 01/14] design: Practice Pathways tokens and type system
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The handoff's palette lands in globals.css with the shadcn token names
kept so every existing component re-skins for free: warm graphite ink +
the highlighter as primary (marker-never-surface rule noted where the
1px ink border must ride along), semantic verified/warning/error with
their tint+edge pairs, warm-biased neutrals, and dark as a sibling (ink
on the highlighter in both themes). Teacher register goes square
(--radius: 0); .register-student raises it — the one systematic
difference between registers. Guest-hue machinery ships as
.activity-skin: four derived colors from a single --activity-h at fixed
lightness/chroma per theme. Focus becomes 3px ink everywhere; the
purpose-tag pairs land as tokens. Type: Archivo (with the width axis),
IBM Plex Sans/Mono, Source Serif 4 for student reading — Geist and
Lexend retire. Every pair matches the handoff's measured AA ratios.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/app/globals.css               | 316 ++++++++++++++++++------------
 src/app/layout.tsx                |  51 +++--
 src/components/PathwayBuilder.tsx |   2 +-
 3 files changed, 225 insertions(+), 144 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 960ba3a9..29bafcce 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -7,9 +7,10 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-  --font-heading: var(--font-sans);
+  --font-sans: var(--font-plex-sans);
+  --font-mono: var(--font-plex-mono);
+  --font-heading: var(--font-archivo);
+  --font-serif: var(--font-source-serif);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -44,6 +45,20 @@
   --color-popover: var(--popover);
   --color-card-foreground: var(--card-foreground);
   --color-card: var(--card);
+  /* Practice Pathways design tokens — the handoff palette, beyond shadcn's roles. */
+  --color-sunk: var(--sunk);
+  --color-ink: var(--foreground);
+  --color-ink-2: var(--ink-2);
+  --color-ink-3: var(--muted-foreground);
+  --color-brand-fill: var(--brand-fill);
+  --color-brand-fill-hover: var(--brand-fill-hover);
+  --color-brand-press: var(--brand-press);
+  --color-brand-text: var(--primary-tint-foreground);
+  --color-verified: var(--success);
+  --color-verified-tint: var(--verified-tint);
+  --color-verified-edge: var(--verified-edge);
+  --color-warning-tint: var(--warning-tint);
+  --color-warning-edge: var(--warning-edge);
   --radius-sm: calc(var(--radius) * 0.6);
   --radius-md: calc(var(--radius) * 0.8);
   --radius-lg: var(--radius);
@@ -54,138 +69,183 @@
 }
 
 /*
- * `.light-surface` re-declares this same palette for one subtree. The student
- * surfaces (/learn and a shared pathway) hard-code pastel light chrome — a
- * violet/pink gradient and white cards, with no dark variants — but the widgets
- * they host are token-themed. Without this, a student in dark mode gets
- * `--foreground` near-white on those hard-coded white cards, i.e. invisible
- * feedback text, and `bg-card` chips render near-black.
+ * Practice Pathways palette: warm graphite ink + one highlighter, semantic
+ * colours that never double as decoration, warm-biased neutrals, and light and
+ * dark designed as siblings. Every text/surface pair below was checked against
+ * WCAG 2.2 AA (4.5:1 body, 3:1 large/UI) — the ratios live in the design
+ * handoff; re-check any substitution.
+ *
+ * Two rules that are not stylistic:
+ * 1. The highlighter (--brand-fill) is a marker, never a surface: as a fill it
+ *    always carries a 1px ink border, and it never appears in chip/status form.
+ * 2. Semantic colours always ship with an icon and a word; colour alone never
+ *    conveys verification state.
+ *
+ * `.light-surface` still re-declares the light palette for the student
+ * subtree; it is scheduled for deletion in the walkthrough redesign slice,
+ * when /learn's hard-coded pastel chrome becomes token-themed.
  */
 :root,
 .light-surface {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  /*
-   * The one confident brand hue. The base shadcn theme this builds on ships
-   * pure greyscale; this app has two faces — a teacher-facing builder and a
-   * student-facing /learn — and they need to read as the same product.
-   * /learn already has a violet identity (its gradient background, its mic
-   * button), so primary is built around that hue rather than introducing a
-   * third color language. Chosen for contrast, not just vibe: 6.31:1 against
-   * --primary-foreground, comfortably past the 4.5:1 text floor everything
-   * else in this file holds to.
-   */
-  --primary: oklch(0.5 0.2 292);
-  --primary-foreground: oklch(0.985 0 0);
-  /* For brand-hued text sitting on a light primary-tinted surface (a badge,
-     not a solid button) — identical to --primary in light mode, where it
-     already clears 4.5:1; dark mode needs its own lighter value below. */
-  --primary-tint-foreground: var(--primary);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  /* Widget feedback and manipulative fills. The base theme's palette is
-     greyscale, so these are the only chromatic tokens: correct,
-     needs-another-look, and the "student selected this part" fill shared
-     by every manipulative. */
-  /* Lightness is set so feedback text clears WCAG AA (4.5:1) against --card,
-     matching the shipped --destructive. The obvious emerald/amber sit at
-     ~3.5:1 and fail — this is student-facing copy, so it has to hold. */
-  --success: oklch(0.528 0.145 163.225);
-  --warning: oklch(0.56 0.153 70.08);
-  /* Selected vs unselected parts differ only by fill, so the pair has to clear
-     the 3:1 non-text contrast bar (WCAG 1.4.11) on its own. */
+  --background: #fcfaf7; /* paper */
+  --foreground: #1f1915; /* ink */
+  --ink-2: #58514c;
+  --card: #ffffff;
+  --card-foreground: #1f1915;
+  --popover: #ffffff;
+  --popover-foreground: #1f1915;
+  --sunk: #f6f3ef;
+  /* Primary action = the highlighter with ink text (12.33:1). The mandatory
+     1px ink border is applied by the button styles, not the token. */
+  --primary: #e3df41;
+  --primary-foreground: #1f1915;
+  --brand-fill: #e3df41;
+  --brand-fill-hover: #f2ef63;
+  --brand-press: #8e8b0f;
+  /* Brand-coloured text on light surfaces (7.62:1). */
+  --primary-tint-foreground: #595600;
+  --secondary: #f6f3ef;
+  --secondary-foreground: #1f1915;
+  --muted: #f6f3ef;
+  --muted-foreground: #736c66; /* ink-3, 5.18:1 on card */
+  --accent: #f6f3ef;
+  --accent-foreground: #1f1915;
+  --destructive: #bd093f; /* 6.41:1 on card */
+  --success: #1c6d26; /* verified, 6.45:1 on card */
+  --verified-tint: #dbf3db;
+  --verified-edge: #b6e3b8;
+  --warning: #775400; /* unverified / needs review, 6.87:1 on card */
+  --warning-tint: #fcebc7;
+  --warning-edge: #eed49a;
+  /* Manipulative selection fill — kept from the previous system; its hue
+     (237°) sits safely outside the brand/warning band the guest hues avoid. */
   --selected: oklch(0.639 0.169 237.323);
-  --selected-foreground: oklch(0.985 0 0);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  /* Focus rings pick up the brand hue too, at low chroma — a warm glow
-     instead of a flat grey outline, without competing with --primary itself. */
-  --ring: oklch(0.708 0.08 292);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  /* Rounder than the base theme's default (10px), short of /learn's explicit
-     rounded-2xl/3xl treatments on its own bespoke elements — the "same
-     warmth, calmer register" the builder and /learn are meant to share.
-     Radius alone never affects text contrast, so this is safe to raise
-     without re-checking any of the ratios documented above. */
-  --radius: 0.875rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --selected-foreground: #ffffff;
+  --border: #e1ddd8; /* rule — decorative separation only */
+  --input: #e1ddd8;
+  /* Focus is always visible and always ink: the highlighter is too
+     low-contrast (1.41:1) to be a focus ring. */
+  --ring: #1f1915;
+  --chart-1: #e1ddd8;
+  --chart-2: #736c66;
+  --chart-3: #58514c;
+  --chart-4: #3d3731;
+  --chart-5: #1f1915;
+  /* Teacher register is square. The student register raises this via
+     `.register-student` below — the only systematic difference between the
+     two registers. */
+  --radius: 0rem;
+  --sidebar: #fcfaf7;
+  --sidebar-foreground: #1f1915;
+  --sidebar-primary: #1f1915;
+  --sidebar-primary-foreground: #fcfaf7;
+  --sidebar-accent: #f6f3ef;
+  --sidebar-accent-foreground: #1f1915;
+  --sidebar-border: #e1ddd8;
+  --sidebar-ring: #1f1915;
+  /* Purpose tags for PathwayPlan.steps[].purpose — fills and AA-checked text. */
+  --purpose-activate-bg: #fcebc7;
+  --purpose-activate-fg: #775400;
+  --purpose-model-bg: #e5e9f6;
+  --purpose-model-fg: #33477f;
+  --purpose-practice-bg: #dbf3db;
+  --purpose-practice-fg: #1c6d26;
+  --purpose-check-bg: #f6e3ea;
+  --purpose-check-fg: #9b1745;
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  /*
-   * The base theme's dark mode default inverts to a near-white button with
-   * dark text — a convention for a *monochrome* primary. A hued one reads
-   * better the conventional way: a rich, visible fill with light text on
-   * top. Lightened
-   * from the light-mode value to stay legible against a near-black page
-   * (3.63:1 against --card) while still clearing 4.5:1 against its own
-   * --primary-foreground text.
-   */
-  --primary: oklch(0.565 0.19 292);
-  --primary-foreground: oklch(0.985 0 0);
-  /* --primary itself is tuned to sit under light text as a button fill
-     (3.63:1 against --card is fine for a large filled area, but text this
-     small needs 4.5:1) — too dark to also work as small text on a dark,
-     lightly-tinted card. Lightened until it clears 4.5:1 in that role. */
-  --primary-tint-foreground: oklch(0.65 0.16 292);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --success: oklch(0.765 0.177 163.223);
-  --warning: oklch(0.828 0.189 84.429);
+  --background: #13100d; /* ground — warm charcoal, not an inverted document */
+  --foreground: #f5f3f1;
+  --ink-2: #bbb7b2;
+  --card: #1f1b18;
+  --card-foreground: #f5f3f1;
+  --popover: #1f1b18;
+  --popover-foreground: #f5f3f1;
+  --sunk: #292623; /* card-2 */
+  /* The highlighter is identical in both themes; its text flips to the dark
+     ground (13.45:1) so "ink on the marker" stays true as a sibling rule. */
+  --primary: #e3df41;
+  --primary-foreground: #13100d;
+  --brand-fill: #e3df41;
+  --brand-fill-hover: #f2ef63;
+  --brand-press: #797600;
+  --primary-tint-foreground: #dcd848; /* brand text, 11.37:1 on card */
+  --secondary: #292623;
+  --secondary-foreground: #f5f3f1;
+  --muted: #292623;
+  --muted-foreground: #98938d; /* 5.60:1 on card */
+  --accent: #292623;
+  --accent-foreground: #f5f3f1;
+  --destructive: #f65b72; /* 5.42:1 on card */
+  --success: #70d482; /* 9.36:1 on card */
+  --verified-tint: #16361c;
+  --verified-edge: #2c5c34;
+  --warning: #e7ba54; /* 9.42:1 on card */
+  --warning-tint: #3a2b07;
+  --warning-edge: #6e5310;
   --selected: oklch(0.746 0.16 232.661);
-  --selected-foreground: oklch(0.205 0 0);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0.08 292);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --selected-foreground: #13100d;
+  --border: #393430;
+  --input: #393430;
+  --ring: #f5f3f1;
+  --chart-1: #393430;
+  --chart-2: #98938d;
+  --chart-3: #bbb7b2;
+  --chart-4: #d8d4d0;
+  --chart-5: #f5f3f1;
+  --sidebar: #13100d;
+  --sidebar-foreground: #f5f3f1;
+  --sidebar-primary: #f5f3f1;
+  --sidebar-primary-foreground: #13100d;
+  --sidebar-accent: #292623;
+  --sidebar-accent-foreground: #f5f3f1;
+  --sidebar-border: #393430;
+  --sidebar-ring: #f5f3f1;
+  --purpose-activate-bg: #3a2b07;
+  --purpose-activate-fg: #e7ba54;
+  --purpose-model-bg: #232b40;
+  --purpose-model-fg: #a9bcf0;
+  --purpose-practice-bg: #16361c;
+  --purpose-practice-fg: #70d482;
+  --purpose-check-bg: #3c1220;
+  --purpose-check-fg: #f2a2bc;
+}
+
+/*
+ * The student register: same palette, same type, same semantics — rounded.
+ * Cards 18–22px, inner elements 10–16px. Applied on the student subtree
+ * (/learn, shared pathways) alongside the register's own press-shadow
+ * button treatment.
+ */
+.register-student {
+  --radius: 1.25rem;
+}
+
+/*
+ * Guest hue: each generated activity carries one model-chosen hue
+ * (--activity-h, a number), rendered at fixed lightness/chroma so contrast
+ * cannot move (any hue: 5.6–7.1:1 text-on-card light, 8.0–9.0:1 dark). The
+ * hue appears only on the activity's own skin — frame border, header fill,
+ * active drop target, kind label, score dial — never on chrome, buttons,
+ * chips, or states.
+ */
+.activity-skin {
+  --activity-text: oklch(0.48 0.14 var(--activity-h, 220));
+  --activity-fill: oklch(0.62 0.16 var(--activity-h, 220));
+  --activity-tint: oklch(0.95 0.04 var(--activity-h, 220));
+  --activity-edge: oklch(0.85 0.06 var(--activity-h, 220));
+}
+.dark .activity-skin {
+  --activity-text: oklch(0.78 0.13 var(--activity-h, 220));
+  --activity-fill: oklch(0.7 0.15 var(--activity-h, 220));
+  --activity-tint: oklch(0.3 0.05 var(--activity-h, 220));
+  --activity-edge: oklch(0.42 0.11 var(--activity-h, 220));
 }
 
 @layer base {
   * {
-    @apply border-border outline-ring/50;
+    @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
@@ -193,4 +253,12 @@
   html {
     @apply font-sans;
   }
-}
\ No newline at end of file
+  /* Focus is always visible: 3px ink, offset 2 — on everything interactive. */
+  :focus-visible {
+    outline: 3px solid var(--ring);
+    outline-offset: 2px;
+  }
+  h1, h2, h3, h4 {
+    font-family: var(--font-heading), var(--font-plex-sans), sans-serif;
+  }
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0e0a4d44..7ef65530 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,45 +1,58 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono, Lexend } from "next/font/google";
+import { Archivo, IBM_Plex_Mono, IBM_Plex_Sans, Source_Serif_4 } from "next/font/google";
 import "./globals.css";
 
 import { cn } from "@/lib/utils";
 import { THEME_SCRIPT } from "@/lib/theme";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+/**
+ * The Practice Pathways type system, per the design handoff:
+ * Archivo carries headlines, UI labels and every numeral (its width axis is
+ * loaded so headlines can stretch 106–118%); IBM Plex Sans carries body copy
+ * and tables; IBM Plex Mono carries standard codes, timings and micro-labels;
+ * Source Serif 4 exists for student reading passages only — remediation
+ * prose, activity prompts, the student's own draft.
+ */
+const archivo = Archivo({
+  variable: "--font-archivo",
   subsets: ["latin"],
+  axes: ["wdth"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const plexSans = IBM_Plex_Sans({
+  variable: "--font-plex-sans",
   subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
 });
 
-/**
- * Registered globally (fonts load once, here) but applied only locally on
- * the pathway builder's own headings via `font-[family-name:var(--font-lexend)]`
- * — not wired into the shared `--font-heading` token, which the Pathways
- * dashboard, Roster, Upload, Nav, and the Crossword widget all still use.
- * Lexend specifically: it's a typeface engineered and studied for reading
- * proficiency, including K-12 classroom trials — an unusually literal fit
- * for a tool that builds reading/learning pathways, not a default pick.
- */
-const lexend = Lexend({
-  variable: "--font-lexend",
+const plexMono = IBM_Plex_Mono({
+  variable: "--font-plex-mono",
+  subsets: ["latin"],
+  weight: ["400", "500", "600"],
+});
+
+const sourceSerif = Source_Serif_4({
+  variable: "--font-source-serif",
   subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Topic to student pathway",
+  title: "Practice Pathways",
   description:
-    "Turn a topic into a standards-grounded learning pathway with an interactive widget.",
+    "Turn a topic into a standards-verified learning pathway of interactive activities.",
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html
       lang="en"
-      className={cn(geistSans.variable, geistMono.variable, lexend.variable, 'h-full antialiased')}
+      className={cn(
+        archivo.variable,
+        plexSans.variable,
+        plexMono.variable,
+        sourceSerif.variable,
+        'h-full antialiased',
+      )}
       suppressHydrationWarning
     >
       <head>
diff --git a/src/components/PathwayBuilder.tsx b/src/components/PathwayBuilder.tsx
index 092260d1..8102ce5b 100644
--- a/src/components/PathwayBuilder.tsx
+++ b/src/components/PathwayBuilder.tsx
@@ -136,7 +136,7 @@ export function PathwayBuilder() {
               initial={{ scale: 0.92, opacity: 0 }}
               animate={{ scale: 1, opacity: 1 }}
               transition={{ type: "spring", stiffness: 260, damping: 20 }}
-              className="font-(family-name:--font-lexend) text-4xl font-black tracking-tight text-balance sm:text-5xl"
+              className="font-heading text-4xl font-black tracking-tight text-balance sm:text-5xl"
             >
               Turn a topic into a lesson{" "}
               <span className="bg-gradient-to-r from-violet-600 to-pink-500 bg-clip-text text-transparent dark:from-violet-400 dark:to-pink-400">

From 40d8a3d7e8a6a0b53ca6b4b3b21363eaaa5187ba Mon Sep 17 00:00:00 2001
From: Adam Stankiewicz <agstanki@gmail.com>
Date: Sun, 23 Aug 2026 13:55:11 -0400
Subject: [PATCH 02/14] design: teacher chrome and dashboard in the new
 register (1b)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The nav goes flat-card with a 1px rule: the highlighter brand mark wears
its mandatory ink border, the active item is an inset brand-fill
underline, and the active standards source shows in verified mono
(derived server-side from STANDARDS_SOURCE, so it stays truthful when a
deployment swaps graphs). The dashboard becomes the spec's table:
quick-create bar handing off to the builder's existing ?topic=&grade=,
reuse chips from recent topics, mono uppercase column headers, rows with
verification chips (icon + word, never colour alone — EXPLORATION gets
the honest warning), tabular counts, and completion as the row's only
emphasised figure with an ink progress bar. Empty/loading/error states
restyled square.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/app/(teacher)/layout.tsx                  |  11 +-
 src/app/(teacher)/pathways/page.tsx           |   3 +-
 src/components/Nav.tsx                        |  40 ++-
 src/components/pathways/PathwaysDashboard.tsx | 235 +++++++++++++-----
 4 files changed, 211 insertions(+), 78 deletions(-)

diff --git a/src/app/(teacher)/layout.tsx b/src/app/(teacher)/layout.tsx
index 9ed4c4b4..6c0b2a1f 100644
--- a/src/app/(teacher)/layout.tsx
+++ b/src/app/(teacher)/layout.tsx
@@ -1,9 +1,18 @@
 import { Nav } from '@/components/Nav';
 
+/** "learning-commons" → "Learning Commons" for the nav's source indicator. */
+function activeSourceLabel(): string {
+  const id = (process.env.STANDARDS_SOURCE ?? 'learning-commons').split(',')[0]?.trim() ?? '';
+  return id
+    .split('-')
+    .map((word) => (word ? word[0].toUpperCase() + word.slice(1) : word))
+    .join(' ');
+}
+
 export default function TeacherLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex min-h-full flex-col">
-      <Nav />
+      <Nav sourceLabel={activeSourceLabel()} />
       {children}
     </div>
   );
diff --git a/src/app/(teacher)/pathways/page.tsx b/src/app/(teacher)/pathways/page.tsx
index 5cd8f1b7..602f3eb6 100644
--- a/src/app/(teacher)/pathways/page.tsx
+++ b/src/app/(teacher)/pathways/page.tsx
@@ -4,8 +4,7 @@ export const metadata = { title: 'Pathways' };
 
 export default function PathwaysPage() {
   return (
-    <main className="mx-auto w-full max-w-3xl px-6 py-10">
-      <h1 className="font-heading text-2xl font-bold mb-6">Pathways</h1>
+    <main className="mx-auto w-full max-w-6xl px-6 py-10">
       <PathwaysDashboard />
     </main>
   );
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 5162f244..3a5905b1 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -5,33 +5,44 @@ import { usePathname } from 'next/navigation';
 import { ThemeToggle } from '@/components/pathway/ThemeToggle';
 
 const LINKS = [
-  { href: '/', label: 'Pathway Builder' },
+  { href: '/', label: 'Builder' },
   { href: '/pathways', label: 'Pathways' },
   { href: '/roster', label: 'Roster' },
   { href: '/games', label: 'Games' },
 ];
 
-export function Nav() {
+/**
+ * Teacher-register chrome: flat card surface, 1px rule, square. The brand
+ * mark is the highlighter as a marker — a small filled square that always
+ * carries its 1px ink border (the fill is 1.41:1 on its own and never
+ * appears un-bordered). The active nav item is underlined by an inset
+ * brand-fill bar rather than a filled pill.
+ */
+export function Nav({ sourceLabel }: { sourceLabel?: string }) {
   const pathname = usePathname();
 
   return (
-    <header className="sticky top-0 z-10 border-b border-border bg-background/80 backdrop-blur">
-      <div className="mx-auto flex w-full max-w-3xl items-center gap-1 px-6 py-3">
-        <span className="font-heading text-sm font-semibold tracking-tight text-primary mr-3">
-          Pathways
-        </span>
+    <header className="sticky top-0 z-10 border-b border-border bg-card">
+      <div className="mx-auto flex w-full max-w-6xl items-center gap-1 px-6 py-3.5">
+        <Link href="/pathways" className="mr-4 flex items-center gap-2">
+          <span
+            aria-hidden="true"
+            className="inline-block size-[13px] border border-foreground bg-brand-fill"
+          />
+          <span className="font-heading text-sm font-bold tracking-tight">Practice Pathways</span>
+        </Link>
 
-        <nav className="flex items-center gap-1">
+        <nav className="flex items-center gap-0.5">
           {LINKS.map(({ href, label }) => {
             const active = href === '/' ? pathname === '/' : pathname.startsWith(href);
             return (
               <Link
                 key={href}
                 href={href}
-                className={`rounded-md px-3 py-1.5 text-sm transition-colors ${
+                className={`px-3 py-2 text-[12.5px] transition-colors ${
                   active
-                    ? 'bg-accent text-accent-foreground font-medium'
-                    : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
+                    ? 'bg-sunk font-semibold text-foreground shadow-[inset_0_-2px_0_var(--brand-fill)]'
+                    : 'text-muted-foreground hover:bg-sunk hover:text-foreground'
                 }`}
               >
                 {label}
@@ -40,7 +51,12 @@ export function Nav() {
           })}
         </nav>
 
-        <div className="ml-auto">
+        <div className="ml-auto flex items-center gap-4">
+          {sourceLabel && (
+            <span className="hidden font-mono text-[10px] uppercase tracking-[0.14em] text-verified sm:inline">
+              ✓ {sourceLabel}
+            </span>
+          )}
           <ThemeToggle />
         </div>
       </div>
diff --git a/src/components/pathways/PathwaysDashboard.tsx b/src/components/pathways/PathwaysDashboard.tsx
index 9475a2b9..f3a3e4f4 100644
--- a/src/components/pathways/PathwaysDashboard.tsx
+++ b/src/components/pathways/PathwaysDashboard.tsx
@@ -1,75 +1,161 @@
 'use client';
 
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
 import type { SessionSummary } from '@/lib/storage/types';
 
 function formatDate(iso: string) {
-  return new Date(iso).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+  return new Date(iso).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
 }
 
-function GradePill({ grade }: { grade: string | null }) {
-  if (!grade) return null;
+/**
+ * Verification chips carry an icon and a word — colour alone never conveys
+ * state. `EXPLORATION` is the pipeline's honest sentinel for "nothing
+ * verified"; it gets the warning treatment, stated plainly.
+ */
+function StandardChip({ code }: { code: string | null }) {
+  const unverified = !code || code === 'EXPLORATION';
+  if (unverified) {
+    return (
+      <span className="inline-flex items-center gap-1 border border-warning-edge bg-warning-tint px-1.5 py-px font-mono text-[10.5px] text-warning">
+        ⚠ no standard matched
+      </span>
+    );
+  }
   return (
-    <span className="rounded-full bg-accent px-2 py-0.5 text-xs font-medium text-accent-foreground">
-      Grade {grade}
+    <span className="inline-flex items-center gap-1 border border-verified-edge bg-verified-tint px-1.5 py-px font-mono text-[10.5px] text-verified">
+      ✓ {code}
     </span>
   );
 }
 
-function StatBox({ label, value }: { label: string; value: number }) {
+const GRADES = ['K', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
+
+/**
+ * The quick-create bar: one ink-bordered strip whose primary is the
+ * highlighter with its mandatory ink border. Submitting hands off to the
+ * builder, which already accepts ?topic=&grade=.
+ */
+function QuickCreate({ recentTopics }: { recentTopics: string[] }) {
+  const router = useRouter();
+  const [topic, setTopic] = useState('');
+  const [grade, setGrade] = useState('');
+
+  function build() {
+    const params = new URLSearchParams();
+    if (topic.trim()) params.set('topic', topic.trim());
+    if (grade) params.set('grade', grade);
+    router.push(params.size ? `/?${params}` : '/');
+  }
+
   return (
-    <div className="flex flex-col items-center gap-0.5">
-      <span className="text-lg font-bold tabular-nums">{value}</span>
-      <span className="text-xs text-muted-foreground">{label}</span>
+    <div>
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          build();
+        }}
+        className="flex items-stretch border border-foreground bg-card"
+      >
+        <input
+          value={topic}
+          onChange={(event) => setTopic(event.target.value)}
+          placeholder="What should your students learn next?"
+          aria-label="Pathway topic"
+          className="min-w-0 flex-1 bg-transparent px-3.5 py-2.5 text-[15px] outline-none placeholder:text-muted-foreground"
+        />
+        <select
+          value={grade}
+          onChange={(event) => setGrade(event.target.value)}
+          aria-label="Grade"
+          className="border-l border-border bg-transparent px-2.5 text-[12.5px] text-ink-2 outline-none"
+        >
+          <option value="">Grade</option>
+          {GRADES.map((g) => (
+            <option key={g} value={g}>
+              {g}
+            </option>
+          ))}
+        </select>
+        <button
+          type="submit"
+          className="border-l border-foreground bg-brand-fill px-4 font-heading text-sm font-bold text-foreground transition-colors hover:bg-brand-fill-hover"
+        >
+          Build pathway →
+        </button>
+      </form>
+      {recentTopics.length > 0 && (
+        <div className="mt-2 flex flex-wrap items-center gap-1.5">
+          <span className="font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
+            Reuse
+          </span>
+          {recentTopics.map((t) => (
+            <Link
+              key={t}
+              href={`/?topic=${encodeURIComponent(t)}`}
+              className="max-w-56 truncate border border-border bg-card px-2 py-0.5 text-[12px] text-ink-2 transition-colors hover:border-foreground hover:text-foreground"
+            >
+              {t}
+            </Link>
+          ))}
+        </div>
+      )}
     </div>
   );
 }
 
-function SessionCard({ session }: { session: SessionSummary }) {
+const ROW_GRID = 'grid grid-cols-[minmax(0,1fr)_90px_100px_150px_20px] items-center gap-4';
+
+function SessionRow({ session }: { session: SessionSummary }) {
+  const completion =
+    session.openCount > 0 ? Math.round((session.completionCount / session.openCount) * 100) : null;
+
   return (
     <Link
       href={`/pathways/${session.id}`}
-      className="group block rounded-xl border border-border bg-card p-5 shadow-sm transition-shadow hover:shadow-md"
+      className={`${ROW_GRID} border-b border-border bg-card px-3.5 py-2.5 transition-colors hover:bg-sunk`}
     >
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0 flex-1">
-          <h2 className="truncate font-semibold leading-snug group-hover:text-primary transition-colors">
-            {session.topic}
-          </h2>
-          <div className="mt-1 flex flex-wrap items-center gap-2">
-            {session.standardCode && (
-              <span className="text-xs font-mono text-muted-foreground">{session.standardCode}</span>
-            )}
-            <GradePill grade={session.gradeHint} />
-            <span className="text-xs text-muted-foreground">{formatDate(session.createdAt)}</span>
-          </div>
-        </div>
-        <span className="shrink-0 text-muted-foreground text-sm group-hover:text-primary transition-colors">→</span>
-      </div>
-
-      <div className="mt-4 flex items-center gap-6 border-t border-border pt-4">
-        <StatBox label="opens" value={session.openCount} />
-        <StatBox label="completions" value={session.completionCount} />
-        {session.openCount > 0 && (
-          <div className="flex flex-col items-center gap-0.5">
-            <span className="text-lg font-bold tabular-nums">
-              {Math.round((session.completionCount / session.openCount) * 100)}%
-            </span>
-            <span className="text-xs text-muted-foreground">completion</span>
-          </div>
-        )}
-      </div>
+      <span className="min-w-0">
+        <span className="block truncate font-heading text-[15px] font-semibold">{session.topic}</span>
+        <span className="mt-1 flex flex-wrap items-center gap-2">
+          <StandardChip code={session.standardCode} />
+          {session.gradeHint && (
+            <span className="text-[11.5px] text-muted-foreground">Grade {session.gradeHint}</span>
+          )}
+          <span className="text-[11.5px] text-muted-foreground">{formatDate(session.createdAt)}</span>
+        </span>
+      </span>
+      <span className="text-right text-[13.5px] tabular-nums text-ink-2">{session.openCount}</span>
+      <span className="text-right text-[13.5px] tabular-nums text-ink-2">
+        {session.completionCount}
+      </span>
+      {completion === null ? (
+        <span className="text-right text-[12.5px] text-muted-foreground">Waiting for students</span>
+      ) : (
+        <span className="flex items-center justify-end gap-2">
+          <span className="font-heading text-base font-bold tabular-nums">{completion}%</span>
+          <span aria-hidden="true" className="h-1.5 w-14 bg-sunk">
+            <span
+              className="block h-full bg-foreground"
+              style={{ width: `${Math.min(completion, 100)}%` }}
+            />
+          </span>
+        </span>
+      )}
+      <span aria-hidden="true" className="text-right text-muted-foreground">
+        →
+      </span>
     </Link>
   );
 }
 
 function LoadingSkeleton() {
   return (
-    <div className="space-y-4">
-      {[...Array(3)].map((_, i) => (
-        <div key={i} className="h-32 rounded-xl border border-border bg-card animate-pulse" />
+    <div className="border-t border-border">
+      {[...Array(4)].map((_, i) => (
+        <div key={i} className="h-16 animate-pulse border-b border-border bg-sunk/60" />
       ))}
     </div>
   );
@@ -89,31 +175,54 @@ export function PathwaysDashboard() {
       .catch(() => setError('Failed to load pathways.'));
   }, []);
 
-  if (error) {
-    return <p className="text-destructive text-sm">{error}</p>;
-  }
+  const today = new Date().toLocaleDateString(undefined, {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+  });
 
-  if (!sessions) return <LoadingSkeleton />;
+  const recentTopics = [...new Set((sessions ?? []).map((s) => s.topic))].slice(0, 3);
 
-  if (sessions.length === 0) {
-    return (
-      <div className="rounded-xl border border-dashed border-border p-12 text-center">
-        <p className="text-muted-foreground">No pathways yet. Build one from the Pathway Builder.</p>
-        <Link
-          href="/"
-          className="mt-4 inline-block rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
-        >
-          Go to Pathway Builder
-        </Link>
+  return (
+    <div>
+      <div className="mb-5 flex flex-wrap items-baseline justify-between gap-2">
+        <h1 className="font-heading text-[25px] font-bold tracking-tight">Your pathways</h1>
+        <span className="font-mono text-[11px] uppercase tracking-[0.14em] text-muted-foreground">
+          {today}
+        </span>
       </div>
-    );
-  }
 
-  return (
-    <div className="space-y-4">
-      {sessions.map((s) => (
-        <SessionCard key={s.id} session={s} />
-      ))}
+      <QuickCreate recentTopics={recentTopics} />
+
+      <div className="mt-8">
+        <div
+          className={`${ROW_GRID} border-b-2 border-border px-3.5 pb-1.5 font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground`}
+        >
+          <span>Pathway</span>
+          <span className="text-right">Opens</span>
+          <span className="text-right">Completed</span>
+          <span className="text-right">Completion</span>
+          <span />
+        </div>
+
+        {error && (
+          <p className="border-b border-border bg-card px-3.5 py-4 text-sm text-destructive">
+            ⚠ {error}
+          </p>
+        )}
+
+        {!error && !sessions && <LoadingSkeleton />}
+
+        {sessions && sessions.length === 0 && (
+          <div className="border border-dashed border-border p-12 text-center">
+            <p className="text-muted-foreground">
+              No pathways yet — build the first one from the bar above.
+            </p>
+          </div>
+        )}
+
+        {sessions && sessions.map((s) => <SessionRow key={s.id} session={s} />)}
+      </div>
     </div>
   );
 }

From 6e67019036068fcec00881aed1dfefb73e7e3793 Mon Sep 17 00:00:00 2001
From: Adam Stankiewicz <agstanki@gmail.com>
Date: Sun, 23 Aug 2026 13:58:59 -0400
Subject: [PATCH 03/14] design: the create screen's ink plane and honest build
 narrative (1c, 1i)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The hero becomes the spec's ink plane — literal ink in both themes, mono
overline, the headline's emphasis in highlighter — with the form as the
white card floating on it (scoped .light-surface so its tokens hold in
dark mode, 6px hard shadow, ink border). The CTA becomes the
highlighter-with-ink-border primary; examples and grade select go square
and quiet. ActivityTrail is restyled to the spec: square 7px strip
segments (verified when done, pulsing ink while active, warning when
skipped), the headline in brand text while running and verified when
done, 19px square stage markers, 'The graph votes' as a labeled verdict
row where rejections stay on screen, the provenance panel open by
default during a run, and motion-reduce variants on every pulse. The
degraded run gets its banner: exploration pathways name their cost
plainly and keep the rejected codes on the record.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/PathwayBuilder.tsx        |  87 +++++++++-----
 src/components/pathway/ActivityTrail.tsx | 146 ++++++++++++-----------
 2 files changed, 136 insertions(+), 97 deletions(-)

diff --git a/src/components/PathwayBuilder.tsx b/src/components/PathwayBuilder.tsx
index 8102ce5b..f920ea63 100644
--- a/src/components/PathwayBuilder.tsx
+++ b/src/components/PathwayBuilder.tsx
@@ -128,32 +128,48 @@ export function PathwayBuilder() {
   }
 
   return (
-    <div className="flex min-h-dvh flex-col bg-gradient-to-br from-violet-100/80 via-pink-50/60 to-amber-50/70 dark:from-violet-950/50 dark:via-fuchsia-950/25 dark:to-amber-950/20">
-      <main className="mx-auto w-full max-w-3xl flex-1 px-6 pb-20">
-        {!started && (
-          <div className="pt-14">
+    <div className="flex min-h-dvh flex-col bg-background">
+      {/* The ink plane: the hero is one input, floating on ink. Literal ink in
+          both themes — the plane is the same object day and night, which is
+          why the card inside scopes itself `.light-surface`. */}
+      {!started && (
+        <div className="bg-[#1f1915] pb-20">
+          <div className="mx-auto w-full max-w-3xl px-6 pt-12">
+            <motion.p
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              className="font-mono text-[10px] uppercase tracking-[0.16em] text-[#98938d]"
+            >
+              New pathway
+            </motion.p>
             <motion.h1
-              initial={{ scale: 0.92, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-              transition={{ type: "spring", stiffness: 260, damping: 20 }}
-              className="font-heading text-4xl font-black tracking-tight text-balance sm:text-5xl"
+              initial={{ opacity: 0, y: 6 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.25 }}
+              className="mt-2 font-heading text-4xl font-black tracking-tight text-balance text-[#f5f3f1] sm:text-5xl"
             >
               Turn a topic into a lesson{" "}
-              <span className="bg-gradient-to-r from-violet-600 to-pink-500 bg-clip-text text-transparent dark:from-violet-400 dark:to-pink-400">
-                students can do
-              </span>
-              .
+              <span className="text-brand-fill">students can do</span>.
             </motion.h1>
-            <p className="mt-3 max-w-xl text-base leading-relaxed text-muted-foreground">
+            <p className="mt-3 max-w-xl text-base leading-relaxed text-[#bbb7b2]">
               Name what you&rsquo;re teaching. We find the standard it maps to
-              in the Learning Commons knowledge graph, then build a pathway from
-              its verified learning components — with interactive activities
-              your students work through.
+              in the standards graph, then build a pathway from its verified
+              learning components — with interactive activities your students
+              work through.
             </p>
           </div>
-        )}
+        </div>
+      )}
 
-        <form onSubmit={submit} className={started ? "pt-8" : "mt-8"}>
+      <main className="mx-auto w-full max-w-3xl flex-1 px-6 pb-20">
+        <form
+          onSubmit={submit}
+          className={
+            started
+              ? "pt-8"
+              : "light-surface -mt-14 border border-[#1f1915] bg-card p-5 text-foreground shadow-[6px_6px_0_rgba(31,25,21,.22)]"
+          }
+        >
           {/* One question first: what. Grade, the submit action, and every
               optional field only earn space once there's a topic to hang
               them off — the opening moment is a single focused decision,
@@ -172,13 +188,13 @@ export function PathwayBuilder() {
             placeholder="What are you teaching?"
             aria-label="Topic"
             rows={1}
-            className="min-h-16 w-full resize-none rounded-2xl border-3 border-violet-200 bg-white/70 px-5 py-4 text-lg font-semibold placeholder:font-normal placeholder:text-violet-300 focus-visible:border-violet-400 focus-visible:ring-violet-300/50 dark:border-violet-800 dark:bg-white/5 dark:placeholder:text-violet-700 dark:focus-visible:border-violet-500"
+            className="min-h-16 w-full resize-none border-border bg-transparent px-4 py-3.5 text-[16.5px] font-semibold placeholder:font-normal placeholder:text-muted-foreground focus-visible:border-foreground"
           />
 
           {!engaged && (
             <div className="mt-4">
-              <p className="text-xs text-muted-foreground">
-                ✨ Or start from an example
+              <p className="font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
+                Or start from an example
               </p>
               <div className="mt-2 flex flex-wrap gap-2">
                 {EXAMPLES.map((example) => (
@@ -194,10 +210,10 @@ export function PathwayBuilder() {
                       // so building from one must not cite it.
                       setLessonPlan(null);
                     }}
-                    className="rounded-full border-2 border-violet-200 font-normal text-violet-600 hover:border-violet-300 hover:bg-violet-50 dark:border-violet-800 dark:text-violet-300 dark:hover:bg-violet-950/40"
+                    className="border border-border font-normal text-ink-2 hover:border-foreground hover:bg-sunk hover:text-foreground"
                   >
                     {example.topic}
-                    <span className="text-violet-400 dark:text-violet-500">
+                    <span className="text-muted-foreground">
                       · Gr {example.grade}
                     </span>
                   </Button>
@@ -242,10 +258,8 @@ export function PathwayBuilder() {
                   >
                     <SelectTrigger
                       className={cn(
-                        "h-12! w-full rounded-xl border-2 border-violet-200 bg-white/70 px-4 text-sm font-semibold hover:bg-white/90 dark:border-violet-800 dark:bg-white/5 dark:hover:bg-white/10 sm:w-40",
-                        !gradeHint
-                          ? "text-muted-foreground"
-                          : "text-violet-700 dark:text-violet-300",
+                        "h-12! w-full border border-border bg-card px-4 text-sm font-semibold hover:border-foreground sm:w-40",
+                        !gradeHint ? "text-muted-foreground" : "text-foreground",
                       )}
                       aria-label="Grade level"
                     >
@@ -277,7 +291,7 @@ export function PathwayBuilder() {
                     <button
                       type="submit"
                       disabled={!topic.trim()}
-                      className="h-12 shrink-0 rounded-xl bg-emerald-500 px-6 text-sm font-black text-white shadow-[0_4px_0_0_#047857] transition-transform hover:bg-emerald-400 active:translate-y-1 active:shadow-[0_1px_0_0_#047857] disabled:pointer-events-none disabled:opacity-40"
+                      className="h-12 shrink-0 border border-foreground bg-brand-fill px-6 font-heading text-sm font-bold text-foreground transition-colors hover:bg-brand-fill-hover disabled:pointer-events-none disabled:opacity-40"
                     >
                       {started ? "Rebuild ↻" : "Build pathway →"}
                     </button>
@@ -330,6 +344,23 @@ export function PathwayBuilder() {
           </Alert>
         )}
 
+        {/* The degraded run, stated plainly: nothing verified, so this is an
+            exploration pathway. The cost is named — no mastery rollup, no
+            standards alignment — and the pathway is still built and playable. */}
+        {state.anchor && !state.anchor.standard.verified && (
+          <div className="mt-6 border-l-[3px] border-warning bg-warning-tint p-3.5">
+            <p className="text-sm font-semibold text-warning">
+              ⚠ This is an exploration pathway. It is not standards-aligned.
+            </p>
+            <p className="mt-1 text-xs text-warning/90">
+              No proposed code survived the graph. The pathway is still built and
+              playable, but there is no mastery rollup, and students will see
+              &ldquo;exploring&rdquo; where a standard code would be. The rejected
+              codes stay on the session record.
+            </p>
+          </div>
+        )}
+
         <PathwayCompletionStrip state={state} />
 
         {state.status === "done" && (
diff --git a/src/components/pathway/ActivityTrail.tsx b/src/components/pathway/ActivityTrail.tsx
index 669857e5..26e625be 100644
--- a/src/components/pathway/ActivityTrail.tsx
+++ b/src/components/pathway/ActivityTrail.tsx
@@ -1,39 +1,25 @@
 'use client';
 
-import { Check, ChevronDown, Minus, X } from 'lucide-react';
+import { ChevronDown } from 'lucide-react';
 import { AnimatePresence, motion } from 'motion/react';
 import { useEffect, useState } from 'react';
 
-import { Badge } from '@/components/ui/badge';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { cn } from '@/lib/utils';
 import { STAGES } from '@/lib/pathway/events';
-import type { StageId } from '@/lib/pathway/events';
 import type { PathwayState, StageStatus } from '@/lib/pathway/use-pathway-stream';
 
-/** A small warmth accent on top of each stage's real copy — not a substitute for it. */
-const STAGE_EMOJI: Record<StageId, string> = {
-  propose: '🔍',
-  verify: '✅',
-  graph: '🕸️',
-  plan: '🧠',
-  widget: '🛠️',
-};
-
 /**
- * The run's own progress, shown as work happens rather than as a spinner.
- *
- * A slim segmented strip is the primary, always-visible view — it doesn't
- * compete with the document forming below it for attention. The full stage
- * list (candidate codes, verdicts) a teacher doesn't need mid-wait moves
- * behind "How this was built", collapsed by default even while streaming —
- * demoted, not removed, the same "provenance stays reachable, not upfront"
- * rule `DocumentHeader`'s "Why this standard" already follows.
+ * The run's own progress, shown as work happens rather than as a spinner —
+ * the in-progress state is the design. A square segmented strip is the
+ * always-visible summary; the stage rows and the graph's verdicts sit in a
+ * collapsible that opens itself during a run (the trust beat should be seen)
+ * and stays reachable afterwards.
  */
 export function ActivityTrail({ state }: { state: PathwayState }) {
   const streaming = state.status === 'streaming';
   const elapsed = useElapsed(state.startedAt, state.finishedAt);
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(true);
 
   const rejected = Object.values(state.verdicts).filter((ok) => !ok).length;
   const activeStage = STAGES.find((stage) => state.stages[stage.id].status === 'active');
@@ -43,20 +29,21 @@ export function ActivityTrail({ state }: { state: PathwayState }) {
     : state.status === 'error'
       ? 'Stopped'
       : 'Built the pathway';
-  const emoji = streaming ? STAGE_EMOJI[activeStage?.id ?? 'propose'] : state.status === 'error' ? '🙃' : '🎉';
 
   return (
     <div className="mt-8">
       <div className="flex items-center gap-2.5">
-        <ol className="flex flex-1 gap-1.5" aria-label="Build progress">
+        <ol className="flex flex-1 gap-[5px]" aria-label="Build progress">
           {STAGES.map((stage) => (
-            <li key={stage.id} className="h-2 flex-1 overflow-hidden rounded-full bg-violet-100 dark:bg-violet-950/50">
+            <li key={stage.id} className="h-[7px] flex-1 overflow-hidden bg-sunk">
               <span
                 className={cn(
-                  'block h-full rounded-full transition-colors',
-                  state.stages[stage.id].status === 'done' && 'bg-emerald-400',
-                  state.stages[stage.id].status === 'active' && 'w-full animate-pulse bg-violet-400',
-                  state.stages[stage.id].status === 'skipped' && 'bg-muted-foreground/30',
+                  'block h-full transition-[width] duration-100',
+                  state.stages[stage.id].status === 'done' && 'w-full bg-verified',
+                  state.stages[stage.id].status === 'active' &&
+                    'w-full animate-pulse bg-foreground motion-reduce:animate-none',
+                  state.stages[stage.id].status === 'skipped' && 'w-full bg-warning-edge',
+                  state.stages[stage.id].status === 'pending' && 'w-0',
                 )}
               />
             </li>
@@ -75,9 +62,18 @@ export function ActivityTrail({ state }: { state: PathwayState }) {
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -4 }}
             transition={{ duration: 0.2 }}
-            className="flex-1 text-sm font-medium text-violet-700 dark:text-violet-300"
+            className={cn(
+              'flex-1 text-sm font-semibold',
+              streaming
+                ? 'text-brand-text'
+                : state.status === 'error'
+                  ? 'text-destructive'
+                  : 'text-verified',
+            )}
           >
-            <span aria-hidden>{emoji}</span> {headline}
+            {!streaming && state.status !== 'error' && <span aria-hidden>✓ </span>}
+            {state.status === 'error' && <span aria-hidden>⚠ </span>}
+            {headline}
             {!streaming && rejected > 0 && (
               <span className="font-normal text-muted-foreground">
                 {' '}
@@ -94,7 +90,7 @@ export function ActivityTrail({ state }: { state: PathwayState }) {
           How this was built
         </CollapsibleTrigger>
         <CollapsibleContent>
-          <ol className="mt-2 space-y-0 border-l-2 border-border pl-3">
+          <ol className="mt-2 space-y-0 border-l border-border pl-3.5">
             {STAGES.map((stage) => {
               const entry = state.stages[stage.id];
               const isVerify = stage.id === 'verify';
@@ -102,33 +98,47 @@ export function ActivityTrail({ state }: { state: PathwayState }) {
 
               return (
                 <li key={stage.id} className="flex gap-3 py-1.5">
-                  <StatusDot status={entry.status} />
+                  <StatusMarker status={entry.status} />
                   <div className="min-w-0 flex-1">
                     <div className="flex flex-wrap items-baseline gap-x-2">
                       <span
                         className={cn(
                           'text-sm',
                           entry.status === 'pending'
-                            ? 'text-muted-foreground/50'
+                            ? 'text-muted-foreground/60'
                             : entry.status === 'active'
-                              ? 'font-medium'
-                              : 'text-muted-foreground',
+                              ? 'font-semibold'
+                              : entry.status === 'skipped'
+                                ? 'text-warning'
+                                : 'text-ink-2',
                         )}
                       >
                         {stage.label}
                       </span>
-                      {entry.detail && <span className="text-xs text-muted-foreground">{entry.detail}</span>}
+                      <span className="text-xs text-muted-foreground">
+                        {entry.detail ??
+                          (entry.status === 'skipped'
+                            ? 'Skipped — there is no anchor to walk'
+                            : entry.status === 'pending'
+                              ? 'waiting'
+                              : null)}
+                      </span>
                     </div>
 
                     {showCandidates && (
-                      <div className="mt-1.5 flex flex-wrap gap-1.5">
-                        {state.candidates.map((candidate) => (
-                          <Verdict
-                            key={candidate.statementCode}
-                            code={candidate.statementCode}
-                            verdict={state.verdicts[candidate.statementCode]}
-                          />
-                        ))}
+                      <div className="mt-1.5">
+                        <p className="font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
+                          The graph votes
+                        </p>
+                        <div className="mt-1 flex flex-wrap gap-1.5">
+                          {state.candidates.map((candidate) => (
+                            <Verdict
+                              key={candidate.statementCode}
+                              code={candidate.statementCode}
+                              verdict={state.verdicts[candidate.statementCode]}
+                            />
+                          ))}
+                        </div>
                       </div>
                     )}
                   </div>
@@ -144,59 +154,57 @@ export function ActivityTrail({ state }: { state: PathwayState }) {
 
 /**
  * A code the model proposed and the graph's answer. Undefined means the graph
- * has not been asked yet — the resolution loop short-circuits on the first hit,
- * so trailing codes stay unchecked and should not read as rejected.
+ * has not been asked yet — the resolution loop short-circuits on the first
+ * hit, so trailing codes stay unchecked and must not read as rejected.
+ * Rejections stay on screen: provenance, not embarrassment.
  */
 function Verdict({ code, verdict }: { code: string; verdict: boolean | undefined }) {
   if (verdict === undefined) {
     return (
-      <Badge variant="outline" className="font-mono text-muted-foreground/50">
+      <span className="inline-flex animate-pulse items-center gap-1 border border-dashed border-border px-1.5 py-px font-mono text-[11px] text-muted-foreground/70 motion-reduce:animate-none">
         {code}
-      </Badge>
+      </span>
     );
   }
 
   return verdict ? (
-    <Badge variant="outline" className="border-success/40 font-mono text-success">
-      <Check aria-hidden />
-      {code}
-    </Badge>
+    <span className="inline-flex items-center gap-1 border border-verified-edge bg-verified-tint px-1.5 py-px font-mono text-[11px] text-verified">
+      ✓ {code}
+    </span>
   ) : (
-    <Badge variant="outline" className="font-mono text-muted-foreground line-through decoration-1">
-      <X aria-hidden />
-      {code}
-    </Badge>
+    <span className="inline-flex items-center gap-1 border border-border px-1.5 py-px font-mono text-[11px] text-muted-foreground line-through decoration-1">
+      ✗ {code}
+    </span>
   );
 }
 
-function StatusDot({ status }: { status: StageStatus }) {
-  const base = 'mt-1 flex size-3.5 shrink-0 items-center justify-center rounded-full';
+/** 19px square stage markers: verified tint when done, pulsing highlighter while active, rule outline while pending. */
+function StatusMarker({ status }: { status: StageStatus }) {
+  const base = 'mt-0.5 flex size-[19px] shrink-0 items-center justify-center text-[11px]';
 
   if (status === 'done') {
     return (
-      <span className={cn(base, 'bg-success/15 text-success')} aria-label="done">
-        <Check className="size-2.5" aria-hidden />
+      <span className={cn(base, 'border border-verified-edge bg-verified-tint text-verified')} role="img" aria-label="done">
+        ✓
       </span>
     );
   }
   if (status === 'skipped') {
     return (
-      <span className={cn(base, 'bg-muted text-muted-foreground')} aria-label="skipped">
-        <Minus className="size-2.5" aria-hidden />
+      <span className={cn(base, 'border border-warning-edge bg-warning-tint text-warning')} role="img" aria-label="skipped">
+        –
       </span>
     );
   }
   if (status === 'active') {
     return (
-      <span className={cn(base, 'relative')} aria-label="in progress">
-        <span className="absolute inline-flex size-3.5 animate-ping rounded-full bg-primary/25" />
-        <span className="relative size-2 rounded-full bg-primary" />
-      </span>
+      <span
+        className={cn(base, 'animate-pulse border border-foreground bg-brand-fill motion-reduce:animate-none')}
+        aria-label="in progress"
+      />
     );
   }
-  return (
-    <span className={cn(base, 'border border-muted-foreground/30')} aria-label="pending" />
-  );
+  return <span className={cn(base, 'border border-border')} role="img" aria-label="pending" />;
 }
 
 /**

From efe473398aa4721485ff628d7cddb3f49f561770 Mon Sep 17 00:00:00 2001
From: Adam Stankiewicz <agstanki@gmail.com>
Date: Sun, 23 Aug 2026 14:02:30 -0400
Subject: [PATCH 04/14] design: the student register and the activity frame
 (1g, 1h)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The student surfaces stop hard-coding pastel chrome: /learn and shared
pathways become .register-student on tokens — dark mode finally real for
students — with the rounded radius as the register's one systematic
difference. The walkthrough header becomes the spec's three things: the
verified/exploring chip in honest mono, a quiet break link, and the star
as ink-on-highlighter with a tabular count. Progress segments speak the
palette (verified done, highlighter current, injected slots outlined in
brand-press), and every press-shadow button moves to the
highlighter-with-ink-border treatment with motion-reduce variants.

ActivityFrame lands as the chrome around every widget kind: 2px edge-hue
border, tint header with a fill-hue marker bar, title + kind label, and
a state slot (review shows '✓ done', injected remediation announces
'just added'). The guest hue derives per-kind through the reserved-band
mapping until the spec carries a model-chosen hue; it renders only on
the frame, never on page chrome. The continue button now states its
reason — waiting, ready, or no-finish-line — instead of implying it.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/app/learn/page.tsx                        |  29 ++--
 src/components/pathway/ActivityFrame.tsx      |  88 +++++++++++
 src/components/pathway/PathwayWalkthrough.tsx | 146 ++++++++++++------
 src/components/pathway/SharedPathwayView.tsx  |   6 +-
 4 files changed, 202 insertions(+), 67 deletions(-)
 create mode 100644 src/components/pathway/ActivityFrame.tsx

diff --git a/src/app/learn/page.tsx b/src/app/learn/page.tsx
index c606e354..20fd9d53 100644
--- a/src/app/learn/page.tsx
+++ b/src/app/learn/page.tsx
@@ -138,7 +138,7 @@ export default function LearnPage() {
   });
 
   return (
-    <div className="light-surface min-h-dvh bg-gradient-to-br from-violet-100 via-pink-100 to-amber-100 text-slate-900">
+    <div className="register-student min-h-dvh bg-background text-foreground">
       <main className="mx-auto flex min-h-dvh max-w-2xl flex-col items-center gap-6 px-5 py-10">
         {!session && (
           <AnimatePresence mode="wait">
@@ -149,10 +149,7 @@ export default function LearnPage() {
               transition={{ type: 'spring', stiffness: 260, damping: 18 }}
               className="mt-12 text-center text-5xl font-black tracking-tight text-balance"
             >
-              What do you want to{' '}
-              <span className="bg-gradient-to-r from-violet-600 to-pink-500 bg-clip-text text-transparent">
-                learn?
-              </span>
+              What do you want to <span className="text-brand-text">learn?</span>
             </motion.h1>
           </AnimatePresence>
         )}
@@ -171,21 +168,21 @@ export default function LearnPage() {
                   ? { repeat: Infinity, duration: 1.6 }
                   : { type: 'spring', stiffness: 300, damping: 14 }
               }
-              className="flex size-36 flex-col items-center justify-center gap-1 rounded-full bg-gradient-to-br from-violet-500 to-pink-500 text-white shadow-[0_8px_0_0_#6d28d9] transition-transform active:translate-y-1 active:shadow-[0_3px_0_0_#6d28d9] disabled:opacity-50"
+              className="flex size-36 flex-col items-center justify-center gap-1 rounded-full border-2 border-foreground bg-brand-fill text-foreground shadow-[0_8px_0_0_var(--brand-press)] transition-transform active:translate-y-1 active:shadow-[0_3px_0_0_var(--brand-press)] disabled:opacity-50 motion-reduce:transition-none"
             >
-              <span className="text-4xl">{busy ? '✨' : voice.listening ? '👂' : '🎤'}</span>
+              <span className="text-4xl">{busy ? '…' : voice.listening ? '●' : '🎤'}</span>
               <span className="text-sm font-black">
                 {busy ? 'Building' : voice.listening ? 'Listening' : 'Tap & talk'}
               </span>
             </motion.button>
 
             <div className="min-h-8 text-center">
-              {busy && <p className="text-lg font-bold text-violet-600">{BUILDING_LINES[line]}</p>}
+              {busy && <p className="text-lg font-bold text-brand-text">{BUILDING_LINES[line]}</p>}
               {!busy && voice.interim && (
-                <p className="text-lg font-bold text-violet-500 italic">&ldquo;{voice.interim}&rdquo;</p>
+                <p className="text-lg font-bold text-ink-2 italic">&ldquo;{voice.interim}&rdquo;</p>
               )}
               {!busy && (error || voice.error) && (
-                <p className="text-base font-bold text-rose-500">🙃 {voice.error ?? error}</p>
+                <p className="text-base font-bold text-destructive">⚠ {voice.error ?? error}</p>
               )}
             </div>
 
@@ -193,15 +190,15 @@ export default function LearnPage() {
               <motion.div
                 initial={{ scale: 0.9, opacity: 0 }}
                 animate={{ scale: 1, opacity: 1 }}
-                className="w-full rounded-2xl border-4 border-violet-300 bg-white p-6 shadow-lg"
+                className="w-full rounded-2xl border border-foreground bg-card p-6 shadow-[6px_6px_0_rgba(31,25,21,.18)]"
               >
-                <p className="mb-2 text-sm font-bold text-violet-600">Did you say:</p>
-                <p className="mb-4 text-xl font-bold text-slate-900">&ldquo;{voiceCapture}&rdquo;</p>
+                <p className="mb-2 text-sm font-bold text-muted-foreground">Did you say:</p>
+                <p className="mb-4 text-xl font-bold">&ldquo;{voiceCapture}&rdquo;</p>
                 <div className="flex gap-2">
                   <button
                     type="button"
                     onClick={() => void build(voiceCapture)}
-                    className="flex-1 rounded-xl bg-emerald-500 py-3 font-black text-white shadow-[0_4px_0_0_#047857] active:translate-y-1 active:shadow-[0_2px_0_0_#047857]"
+                    className="flex-1 rounded-xl border border-foreground bg-brand-fill py-3 font-heading font-black text-foreground shadow-[0_4px_0_0_var(--brand-press)] active:translate-y-1 active:shadow-[0_2px_0_0_var(--brand-press)]"
                   >
                     ✓ Yes, let&apos;s go!
                   </button>
@@ -232,12 +229,12 @@ export default function LearnPage() {
                   onChange={(event) => setTyped(event.target.value)}
                   placeholder={voice.supported ? '…or type it here' : 'Type what you want to learn'}
                   maxLength={200}
-                  className="min-w-0 flex-1 rounded-2xl border-4 border-violet-200 bg-white px-5 py-3 font-semibold outline-none placeholder:text-violet-300 focus:border-violet-400"
+                  className="min-w-0 flex-1 rounded-2xl border border-border bg-card px-5 py-3 font-semibold placeholder:text-muted-foreground focus:border-foreground"
                 />
                 <button
                   type="submit"
                   disabled={busy || typed.trim().length < 3}
-                  className="shrink-0 rounded-2xl bg-emerald-500 px-6 font-black text-white shadow-[0_5px_0_0_#047857] active:translate-y-1 active:shadow-[0_2px_0_0_#047857] disabled:opacity-40"
+                  className="shrink-0 rounded-2xl border border-foreground bg-brand-fill px-6 font-heading font-black text-foreground shadow-[0_5px_0_0_var(--brand-press)] active:translate-y-1 active:shadow-[0_2px_0_0_var(--brand-press)] disabled:opacity-40"
                 >
                   Go!
                 </button>
diff --git a/src/components/pathway/ActivityFrame.tsx b/src/components/pathway/ActivityFrame.tsx
new file mode 100644
index 00000000..40242925
--- /dev/null
+++ b/src/components/pathway/ActivityFrame.tsx
@@ -0,0 +1,88 @@
+'use client';
+
+import type { CSSProperties, ReactNode } from 'react';
+
+/**
+ * The chrome that wraps every activity kind (design 1h): a 2px border in the
+ * activity's edge hue, a header bar on its tint with a fill-hue marker bar,
+ * the title, and a state slot. The body belongs entirely to the activity —
+ * it never draws its own header or picks its own radius.
+ *
+ * The guest hue renders through `.activity-skin` (globals.css): four derived
+ * colors from one hue at fixed lightness/chroma, so any hue keeps AA
+ * contrast. The hue appears only on this frame and the activity's own skin,
+ * never on page chrome.
+ *
+ * Hue source: the design calls for a model-chosen hue on the widget spec.
+ * Until that field ships, the hue derives deterministically from the kind —
+ * stable across renders, mapped around the 85–130° band the brand highlighter
+ * and warning amber reserve.
+ */
+const RESERVED_START = 85;
+const RESERVED_END = 130;
+
+function safeHue(x: number): number {
+  const span = 360 - (RESERVED_END - RESERVED_START);
+  let v = (x - RESERVED_END) % span;
+  if (v < 0) v += span;
+  return (RESERVED_END + v) % 360;
+}
+
+export function hueForActivity(kind: string, explicit?: number): number {
+  if (typeof explicit === 'number' && Number.isFinite(explicit)) return safeHue(explicit);
+  let h = 0x811c9dc5;
+  for (let i = 0; i < kind.length; i += 1) {
+    h ^= kind.charCodeAt(i);
+    h = Math.imul(h, 0x01000193);
+  }
+  return safeHue((h >>> 0) % 360);
+}
+
+export function kindLabel(kind: string): string {
+  return kind.replace(/-/g, ' ');
+}
+
+export function ActivityFrame({
+  kind,
+  title,
+  hue,
+  state,
+  children,
+}: {
+  kind: string;
+  title: string;
+  /** Model-chosen hue when the spec carries one; falls back to a stable per-kind hue. */
+  hue?: number;
+  /** Right-hand header slot — completion state, a review badge. */
+  state?: ReactNode;
+  children: ReactNode;
+}) {
+  const activityHue = hueForActivity(kind, hue);
+
+  return (
+    <div
+      className="activity-skin w-full overflow-hidden rounded-[18px] border-2 bg-card"
+      style={{ '--activity-h': activityHue, borderColor: 'var(--activity-edge)' } as CSSProperties}
+    >
+      <div
+        className="flex items-center gap-2.5 px-4 py-2.5"
+        style={{ background: 'var(--activity-tint)' }}
+      >
+        <span
+          aria-hidden="true"
+          className="h-5 w-2 shrink-0 rounded-full"
+          style={{ background: 'var(--activity-fill)' }}
+        />
+        <span className="min-w-0 flex-1 truncate font-heading text-base font-bold">{title}</span>
+        <span
+          className="shrink-0 font-mono text-[10px] uppercase tracking-[0.14em]"
+          style={{ color: 'var(--activity-text)' }}
+        >
+          {kindLabel(kind)}
+        </span>
+        {state}
+      </div>
+      <div className="p-4">{children}</div>
+    </div>
+  );
+}
diff --git a/src/components/pathway/PathwayWalkthrough.tsx b/src/components/pathway/PathwayWalkthrough.tsx
index 78422cc1..c3d29603 100644
--- a/src/components/pathway/PathwayWalkthrough.tsx
+++ b/src/components/pathway/PathwayWalkthrough.tsx
@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
 
+import { ActivityFrame } from '@/components/pathway/ActivityFrame';
 import { WidgetRenderer } from '@/components/widgets/registry';
 import { WidgetTelemetryProvider } from '@/components/widgets/telemetry-context';
 import { useTelemetry, type RemediationPayload } from '@/hooks/useTelemetry';
@@ -150,6 +151,13 @@ export function PathwayWalkthrough({
   // Total step count = original steps + one per injected widget.
   const totalSteps = session.steps.length + Object.keys(injectedWidgets).length;
 
+  // Absolute-index helpers over the injected slots — the same mapping the
+  // progress bar does inline, shared with the activity frame's header.
+  const injectedIndexList = Object.keys(injectedWidgets).map(Number).sort((a, b) => a - b);
+  const isInjectedStep = (index: number) => injectedIndexList.includes(index);
+  const originalStepIndex = (index: number) =>
+    index - injectedIndexList.filter((i) => i < index).length;
+
   const advanceStep = useCallback(() => {
     setViewingStep(null);
     setStars((n) => n + 1);
@@ -201,27 +209,34 @@ export function PathwayWalkthrough({
   return (
     <div className="flex w-full flex-col items-center gap-6">
       <div className="flex w-full items-center justify-between">
-        <span className="rounded-full border-2 border-violet-200 bg-white/80 px-3 py-1 text-xs font-bold text-violet-600">
-          {session.standardCode ?? '✨ exploring'}
-        </span>
+        {session.standardCode ? (
+          <span className="rounded-full border border-verified-edge bg-verified-tint px-3 py-1 font-mono text-xs font-semibold text-verified">
+            ✓ {session.standardCode}
+          </span>
+        ) : (
+          <span className="rounded-full border border-warning-edge bg-warning-tint px-3 py-1 font-mono text-xs font-semibold text-warning">
+            exploring
+          </span>
+        )}
         <div className="flex items-center gap-2">
           <a
             href="/games"
-            className="rounded-full border-2 border-pink-200 bg-white/80 px-3 py-1 text-xs font-bold text-pink-600 hover:bg-pink-50 transition-colors"
+            className="rounded-full border border-border bg-card px-3 py-1 text-xs font-bold text-ink-2 transition-colors hover:border-foreground hover:text-foreground"
           >
-            🎮 Take a break
+            Take a break
           </a>
-          <span className="flex items-center gap-1 rounded-full border-2 border-amber-200 bg-white/80 px-4 py-1">
+          <span className="flex items-center gap-1.5 rounded-full border border-foreground bg-card py-1 pr-3.5 pl-1.5">
             <motion.span
               key={stars}
-              initial={{ scale: 1.8, rotate: -20 }}
+              initial={{ scale: 1.6, rotate: -16 }}
               animate={{ scale: 1, rotate: 0 }}
               transition={{ type: 'spring', stiffness: 400, damping: 12 }}
-              className="text-xl"
+              className="flex size-6 items-center justify-center rounded-full border border-foreground bg-brand-fill text-sm text-foreground motion-reduce:transition-none"
+              aria-hidden="true"
             >
-              ⭐
+              ★
             </motion.span>
-            <span className="text-lg font-black text-amber-600">{stars}</span>
+            <span className="font-heading text-lg font-black tabular-nums">{stars}</span>
           </span>
         </div>
       </div>
@@ -281,24 +296,24 @@ export function PathwayWalkthrough({
                         : { type: 'spring', stiffness: 400, damping: 30 }
                       }
                       className={[
-                        'relative w-full rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400',
+                        'relative w-full rounded-full',
                         isViewing
-                          ? 'h-3 bg-emerald-400/70 shadow-[0_0_0_3px_rgba(52,211,153,0.6)] cursor-pointer'
+                          ? 'h-3 bg-verified/70 shadow-[0_0_0_2px_var(--verified-edge)] cursor-pointer'
                           : isCurrent
                             ? isReviewing
-                              ? 'h-3 bg-violet-400 cursor-pointer'
-                              : 'h-3 bg-violet-400 shadow-[0_0_0_3px_rgba(139,92,246,0.5)] cursor-pointer'
+                              ? 'h-3 border border-foreground bg-brand-fill cursor-pointer'
+                              : 'h-3 border border-foreground bg-brand-fill shadow-[0_0_0_2px_var(--brand-press)] cursor-pointer'
                             : isDone
-                              ? 'h-3 bg-emerald-400/70 cursor-pointer hover:bg-emerald-400'
-                              : 'h-3 bg-white/25 cursor-default',
-                        '',
+                              ? 'h-3 bg-verified/70 cursor-pointer hover:bg-verified'
+                              : 'h-3 bg-sunk cursor-default',
+                        isInjected && !isDone ? 'outline-2 outline-offset-1 outline-brand-press' : '',
                         'transition-[height,background-color] duration-300',
                       ].join(' ')}
                     >
                       {/* Completion sweep — fills left-to-right when a step is done */}
                       {isDone && !isViewing && (
                         <motion.span
-                          className="absolute inset-0 rounded-full bg-emerald-400/70 origin-left"
+                          className="absolute inset-0 rounded-full bg-verified/70 origin-left"
                           initial={{ scaleX: 0 }}
                           animate={{ scaleX: 1 }}
                           transition={{ type: 'spring', stiffness: 260, damping: 24 }}
@@ -313,7 +328,7 @@ export function PathwayWalkthrough({
                           animate={{ opacity: 1, scale: 1 }}
                           transition={{ type: 'spring', stiffness: 400, damping: 18 }}
                         >
-                          <span className={`h-2 w-2 rounded-full ${isViewing ? 'bg-emerald-500' : 'bg-violet-500'}`} />
+                          <span className={`h-2 w-2 rounded-full ${isViewing ? 'bg-verified' : 'bg-foreground'}`} />
                         </motion.span>
                       )}
                     </motion.button>
@@ -328,42 +343,72 @@ export function PathwayWalkthrough({
             <button
               type="button"
               onClick={() => setViewingStep(null)}
-              className="self-start rounded-xl border-2 border-violet-200 bg-white/80 px-3 py-1 text-sm font-bold text-violet-600 hover:bg-violet-50"
+              className="self-start rounded-xl border border-border bg-card px-3 py-1 text-sm font-bold text-ink-2 hover:border-foreground hover:text-foreground"
             >
               ← Back to current
             </button>
           )}
 
           {currentWidget ? (
-            <div className={`w-full rounded-3xl border-4 bg-white/80 p-4 ${isReviewing ? 'border-emerald-200 opacity-90' : 'border-violet-200'}`}>
-              <WidgetTelemetryProvider telemetry={telemetry} standardCode={session.standardCode} stepIndex={currentStep}>
-                <WidgetRenderer
-                  key={displayStep}
-                  spec={currentWidget}
-                  onComplete={
-                    isReviewing ? undefined
-                    : HAS_OWN_CTA.has(currentKind ?? '') ? advanceStep
-                    : markWidgetDone
-                  }
-                />
-              </WidgetTelemetryProvider>
+            <div className="w-full">
+              <ActivityFrame
+                kind={currentKind ?? 'activity'}
+                title={
+                  isInjectedStep(displayStep)
+                    ? 'Extra practice'
+                    : (session.steps[originalStepIndex(displayStep)]?.title ?? `Activity ${displayStep + 1}`)
+                }
+                state={
+                  isReviewing ? (
+                    <span className="shrink-0 rounded-full border border-verified-edge bg-verified-tint px-2 py-px font-mono text-[10px] uppercase tracking-[0.12em] text-verified">
+                      ✓ done
+                    </span>
+                  ) : isInjectedStep(displayStep) ? (
+                    <span className="shrink-0 rounded-full border border-foreground bg-brand-fill px-2 py-px font-mono text-[10px] uppercase tracking-[0.12em] text-foreground">
+                      just added
+                    </span>
+                  ) : undefined
+                }
+              >
+                <WidgetTelemetryProvider telemetry={telemetry} standardCode={session.standardCode} stepIndex={currentStep}>
+                  <WidgetRenderer
+                    key={displayStep}
+                    spec={currentWidget}
+                    onComplete={
+                      isReviewing ? undefined
+                      : HAS_OWN_CTA.has(currentKind ?? '') ? advanceStep
+                      : markWidgetDone
+                    }
+                  />
+                </WidgetTelemetryProvider>
+              </ActivityFrame>
 
               {/* External button for widgets that fire onComplete silently (no internal CTA),
-                  and for the three widgets that never fire onComplete at all. */}
+                  and for the three widgets that never fire onComplete at all. The reason a
+                  button is live or waiting is stated, not implied. */}
               {!isReviewing && !HAS_OWN_CTA.has(currentKind ?? '') && (
-                <button
-                  type="button"
-                  onClick={advanceStep}
-                  disabled={!widgetDone && !ALWAYS_ENABLED.has(currentKind ?? '')}
-                  className="mt-4 w-full rounded-2xl bg-emerald-500 py-3 font-black text-white shadow-[0_5px_0_0_#047857] transition-opacity active:translate-y-1 active:shadow-[0_2px_0_0_#047857] disabled:opacity-30 disabled:shadow-[0_5px_0_0_#047857] disabled:active:translate-y-0"
-                >
-                  {currentStep + 1 === totalSteps ? "I'm done! 🎉" : 'Next activity →'}
-                </button>
+                <div className="mt-4">
+                  <button
+                    type="button"
+                    onClick={advanceStep}
+                    disabled={!widgetDone && !ALWAYS_ENABLED.has(currentKind ?? '')}
+                    className="w-full rounded-2xl border border-foreground bg-brand-fill py-3 font-heading font-black text-foreground shadow-[0_5px_0_0_var(--brand-press)] transition-all hover:bg-brand-fill-hover active:translate-y-[2px] active:shadow-[0_2px_0_0_var(--brand-press)] disabled:opacity-40 disabled:shadow-[0_5px_0_0_var(--brand-press)] disabled:active:translate-y-0 motion-reduce:transition-none"
+                  >
+                    {currentStep + 1 === totalSteps ? "I'm done!" : 'Next activity →'}
+                  </button>
+                  <p className="mt-1.5 text-center text-xs text-muted-foreground">
+                    {ALWAYS_ENABLED.has(currentKind ?? '')
+                      ? 'No finish line on this one — move on whenever you want.'
+                      : widgetDone
+                        ? 'Nice — ready when you are.'
+                        : 'Finish the activity to keep going.'}
+                  </p>
+                </div>
               )}
             </div>
           ) : (
-            <p className="rounded-2xl border-4 border-violet-200 bg-white/80 p-4 text-center font-bold text-violet-500">
-              ✨ Building this activity…
+            <p className="w-full rounded-2xl border border-dashed border-border bg-card p-4 text-center font-bold text-muted-foreground">
+              Building this activity…
             </p>
           )}
         </motion.div>
@@ -376,8 +421,13 @@ export function PathwayWalkthrough({
           transition={{ type: 'spring', stiffness: 280, damping: 26 }}
           className="flex w-full flex-col items-center gap-5"
         >
-          <p className="text-center text-4xl">🎉</p>
-          <p className="text-center text-xl font-black text-balance">
+          <p
+            className="flex size-14 items-center justify-center rounded-full border border-foreground bg-brand-fill text-2xl text-foreground"
+            aria-hidden="true"
+          >
+            ★
+          </p>
+          <p className="text-center font-heading text-xl font-black text-balance">
             All done — {totalSteps} activities, {stars} stars!
           </p>
 
@@ -387,14 +437,14 @@ export function PathwayWalkthrough({
                 type="button"
                 onClick={onRestart.another}
                 disabled={onRestart.busy}
-                className="rounded-2xl bg-amber-400 px-7 py-3 font-black text-amber-950 shadow-[0_5px_0_0_#b45309] active:translate-y-1 active:shadow-[0_2px_0_0_#b45309] disabled:opacity-50"
+                className="rounded-2xl border border-foreground bg-brand-fill px-7 py-3 font-heading font-black text-foreground shadow-[0_5px_0_0_var(--brand-press)] transition-all hover:bg-brand-fill-hover active:translate-y-0.5 active:shadow-[0_2px_0_0_var(--brand-press)] disabled:opacity-50 motion-reduce:transition-none"
               >
-                {onRestart.busy ? 'Building…' : 'Another one! 🚀'}
+                {onRestart.busy ? 'Building…' : 'Another one!'}
               </button>
               <button
                 type="button"
                 onClick={onRestart.newTopic}
-                className="rounded-2xl border-4 border-violet-200 bg-white px-5 py-3 font-black text-violet-600"
+                className="rounded-2xl border border-border bg-card px-5 py-3 font-heading font-black text-ink-2 hover:border-foreground hover:text-foreground"
               >
                 New topic
               </button>
diff --git a/src/components/pathway/SharedPathwayView.tsx b/src/components/pathway/SharedPathwayView.tsx
index 7f4efe6b..cdfadd46 100644
--- a/src/components/pathway/SharedPathwayView.tsx
+++ b/src/components/pathway/SharedPathwayView.tsx
@@ -40,13 +40,13 @@ export function SharedPathwayView({ session }: { session: WalkthroughSession })
   }, [session.sessionId, studentId]);
 
   return (
-    <div className="light-surface min-h-dvh bg-gradient-to-br from-violet-100 via-pink-100 to-amber-100 text-slate-900">
+    <div className="register-student min-h-dvh bg-background text-foreground">
       <main className="mx-auto flex min-h-dvh max-w-2xl flex-col items-center gap-6 px-5 py-10">
-        <p className="text-center text-lg font-black text-balance">{session.topic}</p>
+        <p className="text-center font-heading text-lg font-black text-balance">{session.topic}</p>
 
         <PathwayWalkthrough session={session} studentId={studentId} />
 
-        <Link href="/learn" className="text-xs font-bold text-violet-500 underline underline-offset-2">
+        <Link href="/learn" className="text-xs font-bold text-brand-text underline underline-offset-2">
           Build your own pathway →
         </Link>
       </main>

From de1c05aaf31864991f91d5a43b4733581cef2717 Mon Sep 17 00:00:00 2001
From: Adam Stankiewicz <agstanki@gmail.com>
Date: Sun, 23 Aug 2026 14:04:49 -0400
Subject: [PATCH 05/14] design: plan review and session report join the token
 system (1d, 1e)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The four purpose tags across the plan document and the report previews
move onto the AA-checked purpose tokens (one definition in globals.css,
both themes), replacing three separate raw-palette copies. Step widget
previews in the plan document render inside the ActivityFrame, so a
step's activity carries its guest hue in review exactly as it does for
the student. Provenance and share affordances go verified-tinted; the
report's status badge becomes the icon-and-word chip pair
(✓ Completed / In progress on the warning pair).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/pathway/PathwayDocument.tsx    | 76 +++++++++++--------
 src/components/pathways/PathwayPreview.tsx    |  8 +-
 src/components/pathways/SessionReportPage.tsx |  8 +-
 3 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/src/components/pathway/PathwayDocument.tsx b/src/components/pathway/PathwayDocument.tsx
index d64448c2..4fd2cb45 100644
--- a/src/components/pathway/PathwayDocument.tsx
+++ b/src/components/pathway/PathwayDocument.tsx
@@ -19,6 +19,7 @@ import { Badge } from '@/components/ui/badge';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Textarea } from '@/components/ui/textarea';
+import { ActivityFrame } from '@/components/pathway/ActivityFrame';
 import { WidgetRenderer } from '@/components/widgets/registry';
 import { plainMath } from '@/lib/learning-commons/format';
 import type { Anchor, DeepPartial } from '@/lib/pathway/events';
@@ -32,14 +33,11 @@ type RegenerateStep = (anchor: Anchor, plan: PathwayPlan, stepIndex: number) =>
 type EditPlan = (plan: PathwayPlan) => void;
 
 /**
- * Each step purpose gets its own icon and stage color — the same violet/
- * pink/amber/emerald family `/learn` builds its whole identity from — so the
- * four kinds read as distinct at a glance and a teacher scanning the list
- * sees a step's category from its border alone, not just a small label.
- * Raw Tailwind palette classes rather than the token system, on purpose:
- * this is the same "local, literal color" approach `/learn` and
- * `PathwayWalkthrough` already use, deliberately separate from the app's
- * quieter shadcn token layer.
+ * Each step purpose gets its own icon and stage color from the design
+ * system's purpose-tag tokens (globals.css) — AA-checked fill/text pairs in
+ * both themes — so the four kinds read as distinct at a glance and a teacher
+ * scanning the list sees a step's category from its border alone, not just a
+ * small label.
  */
 const PURPOSE_META: Record<
   string,
@@ -48,30 +46,30 @@ const PURPOSE_META: Record<
   activate: {
     label: 'Activate',
     Icon: Sparkles,
-    border: 'border-pink-200 dark:border-pink-900',
-    tint: 'bg-pink-100 dark:bg-pink-950/50',
-    icon: 'text-pink-500 dark:text-pink-400',
+    border: 'border-(--purpose-activate-fg)/25',
+    tint: 'bg-(--purpose-activate-bg)',
+    icon: 'text-(--purpose-activate-fg)',
   },
   model: {
     label: 'Model',
     Icon: BookOpen,
-    border: 'border-violet-200 dark:border-violet-900',
-    tint: 'bg-violet-100 dark:bg-violet-950/50',
-    icon: 'text-violet-500 dark:text-violet-400',
+    border: 'border-(--purpose-model-fg)/25',
+    tint: 'bg-(--purpose-model-bg)',
+    icon: 'text-(--purpose-model-fg)',
   },
   practice: {
     label: 'Practice',
     Icon: Repeat,
-    border: 'border-amber-200 dark:border-amber-900',
-    tint: 'bg-amber-100 dark:bg-amber-950/50',
-    icon: 'text-amber-600 dark:text-amber-400',
+    border: 'border-(--purpose-practice-fg)/25',
+    tint: 'bg-(--purpose-practice-bg)',
+    icon: 'text-(--purpose-practice-fg)',
   },
   check: {
     label: 'Check',
     Icon: CircleCheck,
-    border: 'border-emerald-200 dark:border-emerald-900',
-    tint: 'bg-emerald-100 dark:bg-emerald-950/50',
-    icon: 'text-emerald-600 dark:text-emerald-400',
+    border: 'border-(--purpose-check-fg)/25',
+    tint: 'bg-(--purpose-check-bg)',
+    icon: 'text-(--purpose-check-fg)',
   },
 };
 
@@ -82,10 +80,10 @@ const PURPOSE_META: Record<
  * the card) carry the hue, so a step's category reads once, not three times.
  */
 const WAYPOINT_META: Record<string, { dot: string }> = {
-  activate: { dot: 'bg-pink-400' },
-  model: { dot: 'bg-violet-400' },
-  practice: { dot: 'bg-amber-400' },
-  check: { dot: 'bg-emerald-400' },
+  activate: { dot: 'bg-(--purpose-activate-fg)' },
+  model: { dot: 'bg-(--purpose-model-fg)' },
+  practice: { dot: 'bg-(--purpose-practice-fg)' },
+  check: { dot: 'bg-(--purpose-check-fg)' },
 };
 
 /** A preview cycle of the four purposes' waypoint dots, for the skeleton — real steps aren't known yet. */
@@ -117,6 +115,12 @@ const WIDGET_KIND_LABEL: Record<string, string> = {
 
 type PartialStep = DeepPartial<PathwayPlan>['steps'] extends (infer S)[] | undefined ? S : never;
 
+function widgetKindOfSpec(widget: unknown): string | null {
+  return widget && typeof widget === 'object' && 'kind' in widget && typeof widget.kind === 'string'
+    ? widget.kind
+    : null;
+}
+
 /**
  * The generated pathway, as the artifact a teacher actually reads.
  *
@@ -258,11 +262,11 @@ export function PathwayDocument({
             {plan?.outcomes?.map((outcome, index) => (
               <li
                 key={index}
-                className="flex items-start gap-3 rounded-2xl border-3 border-emerald-200 bg-card px-4 py-3.5 shadow-sm dark:border-emerald-900"
+                className="flex items-start gap-3 rounded-2xl border border-verified-edge bg-card px-4 py-3.5"
               >
                 <span
                   aria-hidden
-                  className="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-950/50 dark:text-emerald-400"
+                  className="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full bg-verified-tint text-verified"
                 >
                   <Target className="size-3.5" />
                 </span>
@@ -463,10 +467,10 @@ export function PathwayCompletionStrip({ state }: { state: PathwayState }) {
       initial={{ opacity: 0, y: 20, scale: 0.96 }}
       animate={{ opacity: 1, y: 0, scale: 1 }}
       transition={{ type: 'spring', stiffness: 280, damping: 24 }}
-      className="mt-6 rounded-3xl border-3 border-emerald-200 bg-gradient-to-br from-emerald-50 via-white to-amber-50 p-5 dark:border-emerald-900 dark:from-emerald-950/40 dark:via-transparent dark:to-amber-950/10"
+      className="mt-6 rounded-3xl border border-verified-edge bg-verified-tint p-5"
     >
       <div className="flex flex-wrap items-center gap-4">
-        <span className="relative flex size-12 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-900/60 dark:text-emerald-300">
+        <span className="relative flex size-12 shrink-0 items-center justify-center rounded-full border border-verified-edge bg-card text-verified">
           <Check className="size-6" aria-hidden />
           {CONFETTI.map((p, i) => (
             <motion.span
@@ -487,7 +491,7 @@ export function PathwayCompletionStrip({ state }: { state: PathwayState }) {
         </div>
       </div>
 
-      <div className="mt-4 flex flex-wrap items-center gap-3 rounded-2xl border-2 border-violet-100 bg-white/70 px-4 py-3 dark:border-violet-900 dark:bg-white/5">
+      <div className="mt-4 flex flex-wrap items-center gap-3 rounded-2xl border border-border bg-card px-4 py-3">
         <ShareLink sessionId={state.sessionId} />
       </div>
     </motion.div>
@@ -497,7 +501,7 @@ export function PathwayCompletionStrip({ state }: { state: PathwayState }) {
 /** One placeholder outcome row — shared by the full pre-anchor skeleton and the real document's own outcomes section while `plan` is still in flight. */
 function OutcomeSkeletonRow() {
   return (
-    <div className="flex items-start gap-3 rounded-2xl border-3 border-emerald-100 bg-card px-4 py-3.5 dark:border-emerald-950">
+    <div className="flex items-start gap-3 rounded-2xl border border-verified-edge bg-card px-4 py-3.5">
       <Skeleton className="mt-0.5 size-6 shrink-0 rounded-full" />
       <Skeleton className="h-4 w-2/3" />
     </div>
@@ -588,7 +592,7 @@ function DocumentHeader({
       <div className="flex flex-wrap items-center gap-2">
         {standard.verified ? (
           <>
-            <span className="rounded-full border-2 border-violet-200 bg-white/80 px-3 py-1 font-mono text-xs font-bold text-violet-600 dark:border-violet-800 dark:bg-white/5 dark:text-violet-300">
+            <span className="rounded-full border border-verified-edge bg-verified-tint px-3 py-1 font-mono text-xs font-bold text-verified">
               {standard.code}
             </span>
             <span className="text-xs text-muted-foreground">
@@ -754,7 +758,15 @@ const StepCard = memo(function StepCard({
         >
 
           {hasWidget ? (
-            <WidgetRenderer key={widgetSeq} spec={widget} />
+            <ActivityFrame
+              kind={widgetKindOfSpec(widget) ?? step?.widgetKind ?? 'activity'}
+              title={
+                (step?.widgetKind && WIDGET_KIND_LABEL[step.widgetKind]) ??
+                'Interactive activity'
+              }
+            >
+              <WidgetRenderer key={widgetSeq} spec={widget} />
+            </ActivityFrame>
           ) : pending ? (
             <div className="flex flex-col items-center gap-3 py-6 text-center">
               <motion.span
diff --git a/src/components/pathways/PathwayPreview.tsx b/src/components/pathways/PathwayPreview.tsx
index 5cb8acd4..34c461ec 100644
--- a/src/components/pathways/PathwayPreview.tsx
+++ b/src/components/pathways/PathwayPreview.tsx
@@ -259,10 +259,10 @@ const PURPOSE_LABEL: Record<string, string> = {
 };
 
 const PURPOSE_COLOR: Record<string, string> = {
-  activate: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
-  model: 'bg-violet-100 text-violet-800 dark:bg-violet-900/40 dark:text-violet-300',
-  practice: 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300',
-  check: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+  activate: 'bg-(--purpose-activate-bg) text-(--purpose-activate-fg)',
+  model: 'bg-(--purpose-model-bg) text-(--purpose-model-fg)',
+  practice: 'bg-(--purpose-practice-bg) text-(--purpose-practice-fg)',
+  check: 'bg-(--purpose-check-bg) text-(--purpose-check-fg)',
 };
 
 export type PathwayPreviewData = {
diff --git a/src/components/pathways/SessionReportPage.tsx b/src/components/pathways/SessionReportPage.tsx
index 413fae9b..aa3f88e7 100644
--- a/src/components/pathways/SessionReportPage.tsx
+++ b/src/components/pathways/SessionReportPage.tsx
@@ -56,10 +56,10 @@ function AccuracyBar({ correct, attempts }: { correct: number; attempts: number
 
 function StatusBadge({ completed }: { completed: boolean }) {
   return (
-    <span className={`whitespace-nowrap rounded-full px-2 py-0.5 text-xs font-medium ${completed
-      ? 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300'
-      : 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300'}`}>
-      {completed ? 'Completed' : 'In Progress'}
+    <span className={`whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-medium ${completed
+      ? 'border-verified-edge bg-verified-tint text-verified'
+      : 'border-warning-edge bg-warning-tint text-warning'}`}>
+      {completed ? '✓ Completed' : 'In progress'}
     </span>
   );
 }

From b03f87756825d9bd6db66bb2243167880113bc07 Mon Sep 17 00:00:00 2001
From: Adam Stankiewicz <agstanki@gmail.com>
Date: Sun, 23 Aug 2026 14:14:18 -0400
Subject: [PATCH 06/14] design: full-fidelity build narrative and plan rail
 (1c, 1d structure)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The create screen gets the spec's two-column layout while a run streams:
a 430px left column with the five stage rows and 'The graph votes' as
settling verdict rows (pending dashed, verified tinted with source +
anchor/companion labels, rejections struck and kept), and a right column
where the anchor card slides in — chip, description, decomposition,
prerequisites — and plan steps appear one at a time, each with a
guest-hue activity cell reading 'configuring…' until its widget arrives,
then the kind and its completion behaviour in words. The narrative
retires when the run finishes and the document takes over; the trail's
disclosure becomes after-the-fact provenance.

Plan review gets its 316px rail: assignment first, provenance (anchor +
companions + struck rejected codes, kept on the record), and coverage
bars per outcome computed from the plan itself, with the honest '· thin'
note. The builder widens to the spec's canvas with the form still a
centered 3xl card.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/PathwayBuilder.tsx         |  33 +--
 src/components/pathway/ActivityTrail.tsx  |   7 +-
 src/components/pathway/BuildNarrative.tsx | 267 ++++++++++++++++++++++
 src/components/pathway/PlanRail.tsx       |  99 ++++++++
 4 files changed, 388 insertions(+), 18 deletions(-)
 create mode 100644 src/components/pathway/BuildNarrative.tsx
 create mode 100644 src/components/pathway/PlanRail.tsx

diff --git a/src/components/PathwayBuilder.tsx b/src/components/PathwayBuilder.tsx
index f920ea63..32f6bd0c 100644
--- a/src/components/PathwayBuilder.tsx
+++ b/src/components/PathwayBuilder.tsx
@@ -5,12 +5,13 @@ import { AnimatePresence, motion } from "motion/react";
 import { Plus } from "lucide-react";
 
 import { ActivityTrail } from "@/components/pathway/ActivityTrail";
+import { BuildNarrative } from "@/components/pathway/BuildNarrative";
 import {
   LessonPlanUpload,
   type LessonPlanPick,
 } from "@/components/pathway/LessonPlanUpload";
 import { PathwayCompletionStrip, PathwayDocument } from "@/components/pathway/PathwayDocument";
-import { AssignToStudents } from "@/components/roster/AssignToStudents";
+import { PlanRail } from "@/components/pathway/PlanRail";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
@@ -161,13 +162,13 @@ export function PathwayBuilder() {
         </div>
       )}
 
-      <main className="mx-auto w-full max-w-3xl flex-1 px-6 pb-20">
+      <main className="mx-auto w-full max-w-6xl flex-1 px-6 pb-20">
         <form
           onSubmit={submit}
           className={
             started
-              ? "pt-8"
-              : "light-surface -mt-14 border border-[#1f1915] bg-card p-5 text-foreground shadow-[6px_6px_0_rgba(31,25,21,.22)]"
+              ? "mx-auto w-full max-w-3xl pt-8"
+              : "light-surface mx-auto -mt-14 w-full max-w-3xl border border-[#1f1915] bg-card p-5 text-foreground shadow-[6px_6px_0_rgba(31,25,21,.22)]"
           }
         >
           {/* One question first: what. Grade, the submit action, and every
@@ -337,6 +338,7 @@ export function PathwayBuilder() {
         </form>
 
         {started && <ActivityTrail state={state} />}
+        {started && <BuildNarrative state={state} />}
 
         {state.error && (
           <Alert variant="destructive" className="mt-6">
@@ -363,19 +365,18 @@ export function PathwayBuilder() {
 
         <PathwayCompletionStrip state={state} />
 
-        {state.status === "done" && (
-          <AssignToStudents
-            topic={state.topic}
-            gradeHint={gradeHint || undefined}
-            parentSessionId={state.sessionId ?? undefined}
+        {/* Design 1d: document + 316px rail. The rail carries assignment,
+            provenance, and coverage; the document stays the readable artifact. */}
+        <div className="lg:grid lg:grid-cols-[minmax(0,1fr)_316px] lg:gap-8">
+          <PathwayDocument
+            state={state}
+            onRegenerateStep={regenerateStep}
+            onEditPlan={editPlan}
           />
-        )}
-
-        <PathwayDocument
-          state={state}
-          onRegenerateStep={regenerateStep}
-          onEditPlan={editPlan}
-        />
+          <div className="mt-8">
+            <PlanRail state={state} gradeHint={gradeHint || undefined} />
+          </div>
+        </div>
       </main>
     </div>
   );
diff --git a/src/components/pathway/ActivityTrail.tsx b/src/components/pathway/ActivityTrail.tsx
index 26e625be..bdd92480 100644
--- a/src/components/pathway/ActivityTrail.tsx
+++ b/src/components/pathway/ActivityTrail.tsx
@@ -19,7 +19,7 @@ import type { PathwayState, StageStatus } from '@/lib/pathway/use-pathway-stream
 export function ActivityTrail({ state }: { state: PathwayState }) {
   const streaming = state.status === 'streaming';
   const elapsed = useElapsed(state.startedAt, state.finishedAt);
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
 
   const rejected = Object.values(state.verdicts).filter((ok) => !ok).length;
   const activeStage = STAGES.find((stage) => state.stages[stage.id].status === 'active');
@@ -84,7 +84,9 @@ export function ActivityTrail({ state }: { state: PathwayState }) {
         </AnimatePresence>
       </div>
 
-      <Collapsible open={open} onOpenChange={setOpen} className="mt-1.5">
+      {/* While streaming, the two-column BuildNarrative owns the stage rows
+          and verdicts; this disclosure is the after-the-fact provenance. */}
+      <Collapsible open={open && !streaming} onOpenChange={setOpen} className={streaming ? 'hidden' : 'mt-1.5'}>
         <CollapsibleTrigger className="group/why flex items-center gap-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground">
           <ChevronDown className="size-3.5 transition-transform group-data-panel-open/why:rotate-180" />
           How this was built
@@ -200,6 +202,7 @@ function StatusMarker({ status }: { status: StageStatus }) {
     return (
       <span
         className={cn(base, 'animate-pulse border border-foreground bg-brand-fill motion-reduce:animate-none')}
+        role="img"
         aria-label="in progress"
       />
     );
diff --git a/src/components/pathway/BuildNarrative.tsx b/src/components/pathway/BuildNarrative.tsx
new file mode 100644
index 00000000..cc3a7d82
--- /dev/null
+++ b/src/components/pathway/BuildNarrative.tsx
@@ -0,0 +1,267 @@
+'use client';
+
+import { motion } from 'motion/react';
+import type { CSSProperties } from 'react';
+
+import { hueForActivity, kindLabel } from '@/components/pathway/ActivityFrame';
+import { STAGES } from '@/lib/pathway/events';
+import type { PathwayState, StageStatus } from '@/lib/pathway/use-pathway-stream';
+import { cn } from '@/lib/utils';
+
+/**
+ * The two-column build narrative (design 1c): the in-progress state is the
+ * design. Left column, the five pipeline stages and the graph's verdicts as
+ * rows that settle and stay. Right column, the anchor card sliding in and
+ * plan steps appearing one at a time, each with an activity cell in its
+ * guest hue that reads "configuring…" until the widget arrives.
+ *
+ * Rendered only while a run streams — once it finishes, the plan document
+ * below is the artifact and this narrative retires; provenance stays
+ * reachable through the document's own disclosure.
+ */
+
+/** How each completion behaviour reads in the activity cell, in words. */
+const COMPLETION_COPY: Record<string, string> = {
+  'markdown-card': 'advances itself',
+  flashcard: 'advances itself',
+  'step-reveal': 'advances itself',
+  'narrated-card': 'advances itself',
+  'swiper-flashcard': 'advances itself',
+  'drag-sort': 'advances itself',
+  'drag-categorize': 'advances itself',
+  'timeline-builder': 'advances itself',
+  'fraction-area-model': 'open-ended',
+  'draft-meter': 'open-ended',
+  crossword: 'open-ended',
+};
+
+function completionCopy(kind: string): string {
+  return COMPLETION_COPY[kind] ?? 'signals done';
+}
+
+/** Static classes — Tailwind only compiles class names it can see. */
+const PURPOSE_TAG: Record<string, string> = {
+  activate: 'bg-(--purpose-activate-bg) text-(--purpose-activate-fg)',
+  model: 'bg-(--purpose-model-bg) text-(--purpose-model-fg)',
+  practice: 'bg-(--purpose-practice-bg) text-(--purpose-practice-fg)',
+  check: 'bg-(--purpose-check-bg) text-(--purpose-check-fg)',
+};
+
+export function BuildNarrative({ state }: { state: PathwayState }) {
+  if (state.status !== 'streaming') return null;
+
+  const anchorCode = state.anchor?.standard.code ?? null;
+  const steps = state.plan?.steps ?? [];
+
+  return (
+    <div className="mt-6 grid gap-6 border-t border-border pt-6 lg:grid-cols-[430px_minmax(0,1fr)] lg:gap-0">
+      {/* Left: the stages, and the trust beat. */}
+      <div className="lg:border-r lg:border-border lg:pr-6">
+        <ol>
+          {STAGES.map((stage) => {
+            const entry = state.stages[stage.id];
+            return (
+              <li key={stage.id} className="flex gap-3 py-2">
+                <Marker status={entry.status} />
+                <div className="min-w-0 flex-1">
+                  <p
+                    className={cn(
+                      'text-sm',
+                      entry.status === 'pending'
+                        ? 'text-muted-foreground/60'
+                        : entry.status === 'active'
+                          ? 'font-semibold'
+                          : entry.status === 'skipped'
+                            ? 'text-warning'
+                            : 'text-ink-2',
+                    )}
+                  >
+                    {stage.label}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {entry.status === 'active'
+                      ? stage.active
+                      : (entry.detail ??
+                        (entry.status === 'skipped'
+                          ? 'Skipped — there is no anchor to walk'
+                          : entry.status === 'pending'
+                            ? 'waiting'
+                            : ''))}
+                  </p>
+                </div>
+              </li>
+            );
+          })}
+        </ol>
+
+        {state.candidates.length > 0 && (
+          <div className="mt-3">
+            <p className="font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
+              The graph votes
+            </p>
+            <ul className="mt-1.5 space-y-1">
+              {state.candidates.map((candidate) => {
+                const verdict = state.verdicts[candidate.statementCode];
+                const isAnchor = candidate.statementCode === anchorCode;
+                if (verdict === undefined) {
+                  return (
+                    <li
+                      key={candidate.statementCode}
+                      className="animate-pulse border border-dashed border-border px-2.5 py-1.5 font-mono text-xs text-muted-foreground/70 motion-reduce:animate-none"
+                    >
+                      {candidate.statementCode}
+                    </li>
+                  );
+                }
+                return (
+                  <motion.li
+                    key={candidate.statementCode}
+                    initial={{ scale: 0.94, opacity: 0 }}
+                    animate={{ scale: 1, opacity: 1 }}
+                    transition={{ duration: 0.32, ease: 'easeOut' }}
+                    className={cn(
+                      'flex items-baseline gap-2 border px-2.5 py-1.5 font-mono text-xs',
+                      verdict
+                        ? 'border-verified-edge bg-verified-tint text-verified'
+                        : 'border-border text-muted-foreground',
+                    )}
+                  >
+                    <span className={cn(!verdict && 'line-through decoration-1')}>
+                      {verdict ? '✓' : '✗'} {candidate.statementCode}
+                    </span>
+                    <span className="font-sans text-[11px] normal-case">
+                      {verdict
+                        ? isAnchor
+                          ? `${state.anchor?.standard.sourceLabel ?? 'verified'} · anchor`
+                          : 'verified · companion'
+                        : 'no such code'}
+                    </span>
+                  </motion.li>
+                );
+              })}
+            </ul>
+          </div>
+        )}
+      </div>
+
+      {/* Right: the pathway forming. */}
+      <div className="lg:pl-6">
+        {state.anchor ? (
+          <motion.div
+            initial={{ y: -6, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{ duration: 0.3, ease: 'easeOut' }}
+            className="border border-border bg-card p-4"
+          >
+            <div className="flex flex-wrap items-center gap-2">
+              {state.anchor.standard.verified ? (
+                <span className="inline-flex items-center gap-1 border border-verified-edge bg-verified-tint px-1.5 py-px font-mono text-[10.5px] text-verified">
+                  ✓ {state.anchor.standard.code}
+                </span>
+              ) : (
+                <span className="inline-flex items-center gap-1 border border-warning-edge bg-warning-tint px-1.5 py-px font-mono text-[10.5px] text-warning">
+                  ⚠ no standard matched
+                </span>
+              )}
+              <span className="font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
+                {state.anchor.standard.sourceLabel}
+              </span>
+            </div>
+            <p className="mt-2 text-sm text-ink-2">{state.anchor.standard.description}</p>
+
+            {state.anchor.learningComponents.length > 0 && (
+              <div className="mt-3">
+                <p className="font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
+                  Breaks down into
+                </p>
+                <ul className="mt-1 space-y-0.5 text-xs text-ink-2">
+                  {state.anchor.learningComponents.slice(0, 4).map((component) => (
+                    <li key={component.id}>· {component.description}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+
+            {state.anchor.prerequisites.length > 0 && (
+              <p className="mt-2 text-xs text-muted-foreground">
+                Builds on {state.anchor.prerequisites.map((p) => p.code).join(', ')}
+              </p>
+            )}
+          </motion.div>
+        ) : (
+          <div className="border border-dashed border-border p-4 text-sm text-muted-foreground">
+            Waiting for the graph…
+          </div>
+        )}
+
+        {steps.length > 0 && (
+          <ol className="mt-4 space-y-2">
+            {steps.map((step, index) => {
+              if (!step?.title) return null;
+              const widget = state.stepWidgets[index];
+              const widgetKind = step.widgetKind ?? '';
+              const hue = hueForActivity(widgetKind || `step-${index}`);
+              return (
+                <motion.li
+                  key={step.title}
+                  initial={{ y: -6, opacity: 0 }}
+                  animate={{ y: 0, opacity: 1 }}
+                  transition={{ duration: 0.3, ease: 'easeOut' }}
+                  className="flex items-stretch gap-3 border border-border bg-card"
+                >
+                  <div className="min-w-0 flex-1 px-3.5 py-2.5">
+                    {step.purpose && (
+                      <span
+                        className={cn(
+                          'inline-block px-1.5 py-px font-mono text-[9.5px] uppercase tracking-[0.12em]',
+                          PURPOSE_TAG[step.purpose] ?? 'bg-sunk text-muted-foreground',
+                        )}
+                      >
+                        {step.purpose}
+                      </span>
+                    )}
+                    <p className="mt-1 truncate text-sm font-semibold">{step.title}</p>
+                  </div>
+                  <div
+                    className="activity-skin flex w-40 shrink-0 flex-col justify-center border-l-[3px] px-3 py-2"
+                    style={
+                      {
+                        '--activity-h': hue,
+                        borderLeftColor: 'var(--activity-fill)',
+                        background: 'var(--activity-tint)',
+                      } as CSSProperties
+                    }
+                  >
+                    {widget ? (
+                      <>
+                        <span className="truncate font-mono text-[10px] uppercase tracking-[0.12em]" style={{ color: 'var(--activity-text)' }}>
+                          {kindLabel(widgetKind || 'activity')}
+                        </span>
+                        <span className="text-[11px] text-ink-2">{completionCopy(widgetKind)}</span>
+                      </>
+                    ) : (
+                      <span className="animate-pulse text-[11px] text-muted-foreground motion-reduce:animate-none">
+                        configuring…
+                      </span>
+                    )}
+                  </div>
+                </motion.li>
+              );
+            })}
+          </ol>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Marker({ status }: { status: StageStatus }) {
+  const base = 'mt-0.5 flex size-[19px] shrink-0 items-center justify-center text-[11px]';
+  if (status === 'done')
+    return <span className={cn(base, 'border border-verified-edge bg-verified-tint text-verified')} role="img" aria-label="done">✓</span>;
+  if (status === 'skipped')
+    return <span className={cn(base, 'border border-warning-edge bg-warning-tint text-warning')} role="img" aria-label="skipped">–</span>;
+  if (status === 'active')
+    return <span className={cn(base, 'animate-pulse border border-foreground bg-brand-fill motion-reduce:animate-none')} role="img" aria-label="in progress" />;
+  return <span className={cn(base, 'border border-border')} role="img" aria-label="pending" />;
+}
diff --git a/src/components/pathway/PlanRail.tsx b/src/components/pathway/PlanRail.tsx
new file mode 100644
index 00000000..9639bbfc
--- /dev/null
+++ b/src/components/pathway/PlanRail.tsx
@@ -0,0 +1,99 @@
+'use client';
+
+import { AssignToStudents } from '@/components/roster/AssignToStudents';
+import type { PathwayPlan } from '@/lib/pathway/schema';
+import type { PathwayState } from '@/lib/pathway/use-pathway-stream';
+
+/**
+ * The plan review rail (design 1d): assignment first, then provenance —
+ * the anchor, its companions, and the codes the graph rejected, kept as a
+ * record — then coverage per outcome with an honest note where it runs thin.
+ * Rendered only once a run is done; the document owns the left column.
+ */
+export function PlanRail({ state, gradeHint }: { state: PathwayState; gradeHint?: string }) {
+  if (state.status !== 'done' || !state.anchor) return null;
+
+  const plan = state.plan as PathwayPlan | null;
+  const rejected = Object.entries(state.verdicts)
+    .filter(([, ok]) => !ok)
+    .map(([code]) => code);
+
+  return (
+    <aside className="space-y-4 lg:sticky lg:top-20 lg:self-start">
+      <AssignToStudents
+        topic={state.topic}
+        gradeHint={gradeHint}
+        parentSessionId={state.sessionId ?? undefined}
+      />
+
+      <section className="border border-border bg-card p-4">
+        <h3 className="font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
+          Provenance
+        </h3>
+        <div className="mt-2 flex flex-wrap items-center gap-1.5">
+          {state.anchor.standard.verified ? (
+            <span className="inline-flex items-center gap-1 border border-verified-edge bg-verified-tint px-1.5 py-px font-mono text-[10.5px] text-verified">
+              ✓ {state.anchor.standard.code}
+            </span>
+          ) : (
+            <span className="inline-flex items-center gap-1 border border-warning-edge bg-warning-tint px-1.5 py-px font-mono text-[10.5px] text-warning">
+              ⚠ no standard matched
+            </span>
+          )}
+          {state.anchor.companions.map((companion) => (
+            <span
+              key={companion.code}
+              className="inline-flex items-center gap-1 border border-verified-edge px-1.5 py-px font-mono text-[10.5px] text-verified"
+            >
+              {companion.code}
+            </span>
+          ))}
+        </div>
+        {rejected.length > 0 && (
+          <p className="mt-2 text-xs text-muted-foreground">
+            Rejected by the graph:{' '}
+            {rejected.map((code) => (
+              <span key={code} className="mr-1.5 font-mono line-through decoration-1">
+                {code}
+              </span>
+            ))}
+            <span className="block">Kept on the session record.</span>
+          </p>
+        )}
+      </section>
+
+      {plan && plan.outcomes.length > 0 && (
+        <section className="border border-border bg-card p-4">
+          <h3 className="font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
+            Coverage by outcome
+          </h3>
+          <ul className="mt-2 space-y-2.5">
+            {plan.outcomes.map((outcome, index) => {
+              const count = plan.steps.filter((step) => step.outcomeIndex === index).length;
+              const max = Math.max(1, ...plan.outcomes.map((_, i) => plan.steps.filter((s) => s.outcomeIndex === i).length));
+              return (
+                <li key={outcome.statement}>
+                  <p className="truncate text-xs text-ink-2" title={outcome.statement}>
+                    {outcome.statement}
+                  </p>
+                  <div className="mt-1 flex items-center gap-2">
+                    <span aria-hidden="true" className="h-1.5 flex-1 bg-sunk">
+                      <span
+                        className="block h-full bg-foreground"
+                        style={{ width: `${Math.round((count / max) * 100)}%` }}
+                      />
+                    </span>
+                    <span className="shrink-0 font-mono text-[10px] tabular-nums text-muted-foreground">
+                      {count} step{count === 1 ? '' : 's'}
+                      {count <= 1 ? ' · thin' : ''}
+                    </span>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        </section>
+      )}
+    </aside>
+  );
+}

From 27168289fa40edb89cb3db94026bcf76683032c1 Mon Sep 17 00:00:00 2001
From: Adam Stankiewicz <agstanki@gmail.com>
Date: Sun, 23 Aug 2026 14:15:58 -0400
Subject: [PATCH 07/14] design: exact dashboard grid and the continuous
 walkthrough bar (1b, 1g)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The dashboard adopts the spec's six-track grid (1fr 122 96 108 128 20)
with Built as its own column and the spec's 15px row padding. The
student walkthrough replaces the segmented progress row with the spec's
single continuous 14px bar: a highlighter fill tracking progress,
brand-press notches marking injected remediation (pulsing on arrival),
and invisible per-step buttons overlaid so tap-to-review survives the
visual change. The quiet line beneath states position or 'just added ·
extra practice', with topic and standard on the right.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/pathway/PathwayWalkthrough.tsx | 152 ++++++++----------
 src/components/pathways/PathwaysDashboard.tsx |  10 +-
 2 files changed, 72 insertions(+), 90 deletions(-)

diff --git a/src/components/pathway/PathwayWalkthrough.tsx b/src/components/pathway/PathwayWalkthrough.tsx
index c3d29603..55bfc79c 100644
--- a/src/components/pathway/PathwayWalkthrough.tsx
+++ b/src/components/pathway/PathwayWalkthrough.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { AnimatePresence, motion } from 'motion/react';
+import { motion } from 'motion/react';
 
 import { ActivityFrame } from '@/components/pathway/ActivityFrame';
 import { WidgetRenderer } from '@/components/widgets/registry';
@@ -251,91 +251,71 @@ export function PathwayWalkthrough({
           <p className="text-center text-xl font-black text-balance">{session.bigIdea}</p>
 
           {totalSteps > 1 && (
-            <div className="flex w-full items-center gap-1.5 py-1" role="progressbar" aria-valuenow={currentStep} aria-valuemax={totalSteps}>
-              <AnimatePresence initial={false}>
-                {Array.from({ length: totalSteps }, (_, index) => {
-                  const isDone = index < currentStep;
-                  const isCurrent = index === currentStep;
-                  const isViewing = index === viewingStep;
-                  const isNewlyInjected = index === lastInjectedAt;
-                  // Map the absolute index back to an original step title, accounting
-                  // for injected slots shifting the originals forward.
-                  const injectedIndices = Object.keys(injectedWidgets).map(Number).sort((a, b) => a - b);
-                  const originalIndex = index - injectedIndices.filter((i) => i < index).length;
-                  const isInjected = injectedIndices.includes(index);
-                  const stepTitle = isInjected
-                    ? 'Extra practice'
-                    : (session.steps[originalIndex]?.title ?? `Activity ${index + 1}`);
-                  const tooltipText = (isDone || isCurrent) ? stepTitle : null;
-                  return (
-                    <div key={`step-${index}-of-${totalSteps}`} className="group relative min-w-0 flex-1 flex flex-col items-center">
-                      {tooltipText && (
-                        <div className="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-lg bg-gray-900/90 px-2 py-1 text-xs font-medium text-white opacity-0 transition-opacity duration-150 group-hover:opacity-100 z-10">
-                          {tooltipText}
-                        </div>
-                      )}
-                    <motion.button
-                      type="button"
-                      aria-label={isDone ? `Review activity ${index + 1}` : `Activity ${index + 1}`}
-                      disabled={!isDone && !isCurrent}
-                      onClick={
-                        isDone ? () => setViewingStep(isViewing ? null : index)
-                        : isCurrent ? () => setViewingStep(null)
-                        : undefined
-                      }
-                      // Entry: new segments pop in from scale 0
-                      initial={{ scaleX: 0, opacity: 0 }}
-                      animate={{
-                        scaleX: 1,
-                        opacity: 1,
-                        // Newly injected segment gets an attention pulse
-                        scale: isNewlyInjected ? [1, 1.15, 0.95, 1.05, 1] : 1,
-                      }}
-                      transition={isNewlyInjected
-                        ? { duration: 0.5, ease: 'easeOut', scale: { duration: 0.6, delay: 0.15 } }
-                        : { type: 'spring', stiffness: 400, damping: 30 }
-                      }
-                      className={[
-                        'relative w-full rounded-full',
-                        isViewing
-                          ? 'h-3 bg-verified/70 shadow-[0_0_0_2px_var(--verified-edge)] cursor-pointer'
-                          : isCurrent
-                            ? isReviewing
-                              ? 'h-3 border border-foreground bg-brand-fill cursor-pointer'
-                              : 'h-3 border border-foreground bg-brand-fill shadow-[0_0_0_2px_var(--brand-press)] cursor-pointer'
-                            : isDone
-                              ? 'h-3 bg-verified/70 cursor-pointer hover:bg-verified'
-                              : 'h-3 bg-sunk cursor-default',
-                        isInjected && !isDone ? 'outline-2 outline-offset-1 outline-brand-press' : '',
-                        'transition-[height,background-color] duration-300',
-                      ].join(' ')}
-                    >
-                      {/* Completion sweep — fills left-to-right when a step is done */}
-                      {isDone && !isViewing && (
-                        <motion.span
-                          className="absolute inset-0 rounded-full bg-verified/70 origin-left"
-                          initial={{ scaleX: 0 }}
-                          animate={{ scaleX: 1 }}
-                          transition={{ type: 'spring', stiffness: 260, damping: 24 }}
-                        />
-                      )}
-                      {/* Dot on whichever step is currently displayed */}
-                      {index === displayStep && (
-                        <motion.span
-                          key={displayStep}
-                          className="absolute inset-0 flex items-center justify-center"
-                          initial={{ opacity: 0, scale: 0.4 }}
-                          animate={{ opacity: 1, scale: 1 }}
-                          transition={{ type: 'spring', stiffness: 400, damping: 18 }}
-                        >
-                          <span className={`h-2 w-2 rounded-full ${isViewing ? 'bg-verified' : 'bg-foreground'}`} />
-                        </motion.span>
-                      )}
-                    </motion.button>
-                    </div>
-                  );
-                })}
-              </AnimatePresence>
+            <div className="w-full">
+              {/* Design 1g: one continuous 14px bar. The fill tracks progress;
+                  invisible per-step buttons on top keep the tap-to-review
+                  behaviour. Injected steps notch the track in brand-press. */}
+              <div
+                className="relative h-3.5 w-full overflow-hidden rounded-full border border-border bg-sunk"
+                role="progressbar"
+                aria-valuenow={currentStep}
+                aria-valuemin={0}
+                aria-valuemax={totalSteps}
+                aria-label={`Activity ${Math.min(currentStep + 1, totalSteps)} of ${totalSteps}`}
+              >
+                <motion.span
+                  className="absolute inset-y-0 left-0 border-r border-foreground bg-brand-fill"
+                  initial={false}
+                  animate={{ width: `${(Math.min(currentStep, totalSteps) / totalSteps) * 100}%` }}
+                  transition={{ type: 'spring', stiffness: 260, damping: 30 }}
+                />
+                {injectedIndexList.map((index) => (
+                  <span
+                    key={`notch-${index}`}
+                    aria-hidden="true"
+                    className={`absolute inset-y-0 w-1 bg-brand-press ${index === lastInjectedAt ? 'animate-pulse motion-reduce:animate-none' : ''}`}
+                    style={{ left: `${(index / totalSteps) * 100}%` }}
+                  />
+                ))}
+                <span className="absolute inset-0 flex">
+                  {Array.from({ length: totalSteps }, (_, index) => {
+                    const isDone = index < currentStep;
+                    const isCurrent = index === currentStep;
+                    const isViewing = index === viewingStep;
+                    const stepTitle = isInjectedStep(index)
+                      ? 'Extra practice'
+                      : (session.steps[originalStepIndex(index)]?.title ?? `Activity ${index + 1}`);
+                    return (
+                      <button
+                        key={`step-${index}-of-${totalSteps}`}
+                        type="button"
+                        title={isDone || isCurrent ? stepTitle : undefined}
+                        aria-label={isDone ? `Review: ${stepTitle}` : stepTitle}
+                        disabled={!isDone && !isCurrent}
+                        onClick={
+                          isDone ? () => setViewingStep(isViewing ? null : index)
+                          : isCurrent ? () => setViewingStep(null)
+                          : undefined
+                        }
+                        className={`h-full min-w-0 flex-1 ${isDone || isCurrent ? 'cursor-pointer' : 'cursor-default'} ${isViewing ? 'bg-verified/30' : 'bg-transparent'}`}
+                      />
+                    );
+                  })}
+                </span>
+              </div>
+              <div className="mt-1.5 flex items-baseline justify-between gap-2">
+                <span className="text-xs text-muted-foreground">
+                  {isReviewing
+                    ? 'Looking back at a finished activity'
+                    : isInjectedStep(currentStep)
+                      ? 'just added · extra practice'
+                      : `Activity ${Math.min(currentStep + 1, totalSteps)} of ${totalSteps}`}
+                </span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {session.topic}
+                  {session.standardCode ? ` · ${session.standardCode}` : ''}
+                </span>
+              </div>
             </div>
           )}
 
diff --git a/src/components/pathways/PathwaysDashboard.tsx b/src/components/pathways/PathwaysDashboard.tsx
index f3a3e4f4..98be5555 100644
--- a/src/components/pathways/PathwaysDashboard.tsx
+++ b/src/components/pathways/PathwaysDashboard.tsx
@@ -106,7 +106,8 @@ function QuickCreate({ recentTopics }: { recentTopics: string[] }) {
   );
 }
 
-const ROW_GRID = 'grid grid-cols-[minmax(0,1fr)_90px_100px_150px_20px] items-center gap-4';
+const ROW_GRID =
+  'grid grid-cols-[minmax(0,1fr)_122px_96px_108px_128px_20px] items-center gap-4';
 
 function SessionRow({ session }: { session: SessionSummary }) {
   const completion =
@@ -115,7 +116,7 @@ function SessionRow({ session }: { session: SessionSummary }) {
   return (
     <Link
       href={`/pathways/${session.id}`}
-      className={`${ROW_GRID} border-b border-border bg-card px-3.5 py-2.5 transition-colors hover:bg-sunk`}
+      className={`${ROW_GRID} border-b border-border bg-card px-[15px] py-2 transition-colors hover:bg-sunk`}
     >
       <span className="min-w-0">
         <span className="block truncate font-heading text-[15px] font-semibold">{session.topic}</span>
@@ -124,9 +125,9 @@ function SessionRow({ session }: { session: SessionSummary }) {
           {session.gradeHint && (
             <span className="text-[11.5px] text-muted-foreground">Grade {session.gradeHint}</span>
           )}
-          <span className="text-[11.5px] text-muted-foreground">{formatDate(session.createdAt)}</span>
         </span>
       </span>
+      <span className="text-right text-[13.5px] text-ink-2">{formatDate(session.createdAt)}</span>
       <span className="text-right text-[13.5px] tabular-nums text-ink-2">{session.openCount}</span>
       <span className="text-right text-[13.5px] tabular-nums text-ink-2">
         {session.completionCount}
@@ -196,9 +197,10 @@ export function PathwaysDashboard() {
 
       <div className="mt-8">
         <div
-          className={`${ROW_GRID} border-b-2 border-border px-3.5 pb-1.5 font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground`}
+          className={`${ROW_GRID} border-b-2 border-border px-[15px] pb-1.5 font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground`}
         >
           <span>Pathway</span>
+          <span className="text-right">Built</span>
           <span className="text-right">Opens</span>
           <span className="text-right">Completed</span>
           <span className="text-right">Completion</span>

From 33f6d2cd6596b440f8e0053da27a1fa056b1305e Mon Sep 17 00:00:00 2001
From: Adam Stankiewicz <agstanki@gmail.com>
Date: Sun, 23 Aug 2026 14:17:10 -0400
Subject: [PATCH 08/14] design: session summaries carry step and activity
 counts (tier-2 data)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The dashboard's chip line was specced to show step and activity-type
counts; the data now exists. SessionSummary gains stepCount and
activityKinds, derived from the plan's own steps in both adapters —
Supabase selects just plan->steps to keep the listing payload small, and
the memory adapter reads the stored plan directly. Zero steps (a build
that never finished) simply shows no counts.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/pathways/PathwaysDashboard.tsx | 6 ++++++
 src/lib/storage/memory.ts                     | 4 ++++
 src/lib/storage/supabase.ts                   | 5 ++++-
 src/lib/storage/types.ts                      | 4 ++++
 4 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/pathways/PathwaysDashboard.tsx b/src/components/pathways/PathwaysDashboard.tsx
index 98be5555..9b8eccd3 100644
--- a/src/components/pathways/PathwaysDashboard.tsx
+++ b/src/components/pathways/PathwaysDashboard.tsx
@@ -125,6 +125,12 @@ function SessionRow({ session }: { session: SessionSummary }) {
           {session.gradeHint && (
             <span className="text-[11.5px] text-muted-foreground">Grade {session.gradeHint}</span>
           )}
+          {session.stepCount > 0 && (
+            <span className="text-[11.5px] text-muted-foreground">
+              {session.stepCount} steps · {session.activityKinds.length} activity type
+              {session.activityKinds.length === 1 ? '' : 's'}
+            </span>
+          )}
         </span>
       </span>
       <span className="text-right text-[13.5px] text-ink-2">{formatDate(session.createdAt)}</span>
diff --git a/src/lib/storage/memory.ts b/src/lib/storage/memory.ts
index b26181c7..a1e5d062 100644
--- a/src/lib/storage/memory.ts
+++ b/src/lib/storage/memory.ts
@@ -281,6 +281,8 @@ export const memoryStorageAdapter: StorageAdapter = {
         const childIds = childrenByParent.get(s.id) ?? [];
         const childCompletions = childIds.reduce((sum, cid) => sum + (sessions.get(cid)?.completionCount ?? 0), 0);
         const childOpens = childIds.reduce((sum, cid) => sum + [...sessionOpens].filter((k) => k.startsWith(`${cid}:`)).length, 0);
+        const steps =
+          ((s.plan as { steps?: { widgetKind?: string }[] } | null)?.steps ?? []).filter(Boolean);
         return {
           id: s.id,
           topic: s.topic,
@@ -289,6 +291,8 @@ export const memoryStorageAdapter: StorageAdapter = {
           openCount: [...sessionOpens].filter((k) => k.startsWith(`${s.id}:`)).length + childOpens,
           completionCount: s.completionCount + childCompletions,
           createdAt: s.createdAt ?? new Date().toISOString(),
+          stepCount: steps.length,
+          activityKinds: [...new Set(steps.map((step) => step.widgetKind).filter((k): k is string => Boolean(k)))],
         };
       });
   },
diff --git a/src/lib/storage/supabase.ts b/src/lib/storage/supabase.ts
index 4ca92e87..9d1b02e1 100644
--- a/src/lib/storage/supabase.ts
+++ b/src/lib/storage/supabase.ts
@@ -358,7 +358,7 @@ export const supabaseStorageAdapter: StorageAdapter = {
 
     let query = supabaseAdmin()
       .from('pathway_sessions')
-      .select('id, topic, standard_code, grade_hint, completion_count, created_at, session_opens(count)')
+      .select('id, topic, standard_code, grade_hint, completion_count, created_at, steps:plan->steps, session_opens(count)')
       .order('created_at', { ascending: false })
       .limit(limit);
     const childIds = [...childIdSet];
@@ -395,6 +395,7 @@ export const supabaseStorageAdapter: StorageAdapter = {
       const kids = childrenByParent.get(pid) ?? [];
       const childCompletionsTotal = kids.reduce((s, cid) => s + (childCompletionById.get(cid) ?? 0), 0);
       const childOpensTotal = kids.reduce((s, cid) => s + (childOpenCount.get(cid) ?? 0), 0);
+      const steps = (Array.isArray(row.steps) ? row.steps : []) as { widgetKind?: string }[];
       return {
         id: pid,
         topic: String(row.topic),
@@ -403,6 +404,8 @@ export const supabaseStorageAdapter: StorageAdapter = {
         openCount: Number((row.session_opens as unknown as { count: number }[])?.[0]?.count ?? 0) + childOpensTotal,
         completionCount: Number(row.completion_count ?? 0) + childCompletionsTotal,
         createdAt: String(row.created_at),
+        stepCount: steps.length,
+        activityKinds: [...new Set(steps.map((step) => step.widgetKind).filter((k): k is string => Boolean(k)))],
       };
     });
   },
diff --git a/src/lib/storage/types.ts b/src/lib/storage/types.ts
index 424278b9..94ca04ce 100644
--- a/src/lib/storage/types.ts
+++ b/src/lib/storage/types.ts
@@ -62,6 +62,10 @@ export type SessionSummary = {
   openCount: number;
   completionCount: number;
   createdAt: string;
+  /** Steps in the plan — 0 when the plan never finished. */
+  stepCount: number;
+  /** Distinct widget kinds across the plan's steps, for the dashboard's chip line. */
+  activityKinds: string[];
 };
 
 /** Per-student performance row for the session report view. */

From 168abe680ca3725a0885d646a1fcca181dd73b3b Mon Sep 17 00:00:00 2001
From: Adam Stankiewicz <agstanki@gmail.com>
Date: Sun, 23 Aug 2026 14:21:40 -0400
Subject: [PATCH 09/14] design: per-step evidence strips in the session report
 (1e, tier-2 data)

The spec's step strip needed data nobody was keeping: stepIndex reached
the telemetry route on every widget_completed event and was dropped at
persistence. It now rides inside the interaction payload, and both
adapters aggregate it per student per step into a StepOutcome strip
(first-try / needed attempts / still wrong / unreached) via one shared
pure helper. The report table gains the strip column with a legend and
per-cell words for tooltips and screen readers; events recorded before
stepIndex persisted honestly render as unreached rather than guessed.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/app/api/telemetry/route.ts                |  9 +++-
 src/components/pathways/SessionReportPage.tsx | 51 ++++++++++++++++++-
 src/lib/storage/memory.ts                     | 15 ++++--
 src/lib/storage/supabase.ts                   | 20 ++++++--
 src/lib/storage/types.ts                      | 22 ++++++++
 5 files changed, 108 insertions(+), 9 deletions(-)

diff --git a/src/app/api/telemetry/route.ts b/src/app/api/telemetry/route.ts
index 085774b5..b1599456 100644
--- a/src/app/api/telemetry/route.ts
+++ b/src/app/api/telemetry/route.ts
@@ -42,7 +42,14 @@ export async function POST(request: Request) {
         learningComponentId: event.learningComponentId,
         elapsedMs: event.elapsedMs,
         correct: event.correct,
-        payload: truncate(event.payload),
+        // stepIndex rides inside payload — the interactions table has no
+        // column for it, and the report's per-step evidence strip reads it
+        // back out. Dropping it here is what made per-step reporting
+        // impossible before.
+        payload:
+          event.stepIndex != null
+            ? { ...truncate(event.payload), stepIndex: event.stepIndex }
+            : truncate(event.payload),
       })),
     );
   } catch (error) {
diff --git a/src/components/pathways/SessionReportPage.tsx b/src/components/pathways/SessionReportPage.tsx
index aa3f88e7..8b359388 100644
--- a/src/components/pathways/SessionReportPage.tsx
+++ b/src/components/pathways/SessionReportPage.tsx
@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
 import { PathwayPreview, type PathwayPreviewData } from '@/components/pathways/PathwayPreview';
 import type { PathwayPlan } from '@/lib/pathway/schema';
 import { widgetSpec } from '@/lib/pathway/schema';
-import type { SessionStudentRow } from '@/lib/storage/types';
+import type { SessionStudentRow, StepOutcome } from '@/lib/storage/types';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -54,6 +54,50 @@ function AccuracyBar({ correct, attempts }: { correct: number; attempts: number
   );
 }
 
+/**
+ * The per-step evidence strip (design 1e): one cell per plan step. Verified
+ * fill = first try, warning edge = needed attempts, error = still wrong,
+ * sunk = not reached (which also covers events recorded before stepIndex was
+ * persisted — the strip never guesses). Each cell carries its word in the
+ * tooltip and for screen readers.
+ */
+const STRIP_CELL: Record<StepOutcome, { className: string; label: string }> = {
+  'first-try': { className: 'bg-verified', label: 'first try' },
+  attempts: { className: 'border border-warning-edge bg-warning-tint', label: 'needed attempts' },
+  wrong: { className: 'bg-destructive', label: 'still wrong' },
+  unreached: { className: 'bg-sunk', label: 'not reached' },
+};
+
+function StepStrip({ strip }: { strip: StepOutcome[] }) {
+  if (strip.length === 0) return <span className="text-xs text-muted-foreground">—</span>;
+  return (
+    <span className="flex items-center gap-1">
+      {strip.map((outcome, index) => (
+        <span
+          key={`${index}-${outcome}`}
+          role="img"
+          aria-label={`Step ${index + 1}: ${STRIP_CELL[outcome].label}`}
+          title={`Step ${index + 1}: ${STRIP_CELL[outcome].label}`}
+          className={`h-3 w-4 ${STRIP_CELL[outcome].className}`}
+        />
+      ))}
+    </span>
+  );
+}
+
+export function StepStripLegend() {
+  return (
+    <div className="flex flex-wrap items-center gap-3 text-[11px] text-muted-foreground">
+      {(Object.keys(STRIP_CELL) as StepOutcome[]).map((outcome) => (
+        <span key={outcome} className="flex items-center gap-1.5">
+          <span aria-hidden="true" className={`h-2.5 w-3.5 ${STRIP_CELL[outcome].className}`} />
+          {STRIP_CELL[outcome].label}
+        </span>
+      ))}
+    </div>
+  );
+}
+
 function StatusBadge({ completed }: { completed: boolean }) {
   return (
     <span className={`whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-medium ${completed
@@ -81,11 +125,15 @@ function PerformanceTable({ rows, children }: { rows: SessionStudentRow[]; child
 
   return (
     <div className="overflow-x-auto rounded-xl border border-border">
+      <div className="border-b border-border px-4 py-2">
+        <StepStripLegend />
+      </div>
       <table className="w-full text-sm">
         <thead>
           <tr className="border-b border-border bg-accent/50">
             <th className="px-4 py-3 text-left font-medium text-muted-foreground">Student</th>
             <th className="px-4 py-3 text-left font-medium text-muted-foreground">Status</th>
+            <th className="px-4 py-3 text-left font-medium text-muted-foreground">Steps</th>
             <th className="px-4 py-3 text-left font-medium text-muted-foreground">Accuracy</th>
             <th className="px-4 py-3 text-right font-medium text-muted-foreground">Attempts</th>
             <th className="px-4 py-3 text-right font-medium text-muted-foreground">Hints</th>
@@ -103,6 +151,7 @@ function PerformanceTable({ rows, children }: { rows: SessionStudentRow[]; child
                   : <span className="font-mono text-xs text-muted-foreground">{row.studentId.slice(0, 12)}…</span>}
               </td>
               <td className="px-4 py-3"><StatusBadge completed={row.completed} /></td>
+              <td className="px-4 py-3"><StepStrip strip={row.stepStrip} /></td>
               <td className="px-4 py-3"><AccuracyBar correct={row.correctCount} attempts={row.attempts} /></td>
               <td className="px-4 py-3 text-right tabular-nums">{row.attempts}</td>
               <td className="px-4 py-3 text-right tabular-nums">{row.hintsUsed || '—'}</td>
diff --git a/src/lib/storage/memory.ts b/src/lib/storage/memory.ts
index a1e5d062..87565c9a 100644
--- a/src/lib/storage/memory.ts
+++ b/src/lib/storage/memory.ts
@@ -3,6 +3,7 @@ import { randomUUID } from 'node:crypto';
 import { SEED_STUDENTS } from '@/lib/roster/seed';
 import type { Assignment, RosterStudent } from '@/lib/roster/types';
 import { EMPTY_PROFILE, type StudentProfile } from '@/lib/student/schema';
+import { buildStepStrip } from '@/lib/storage/types';
 import type {
   InteractionEvent,
   MasteryRollupRow,
@@ -326,14 +327,21 @@ export const memoryStorageAdapter: StorageAdapter = {
     const byStudent = new Map<string, {
       attempts: number; correctCount: number; hintsUsed: number;
       elapsedMs: number[]; lastSeenAt: string;
+      perStep: Map<number, { right: boolean; wrong: boolean }>;
     }>();
 
     for (const event of interactions) {
       if (!relevantSessionIds.has(event.sessionId)) continue;
-      const row = byStudent.get(event.studentId) ?? { attempts: 0, correctCount: 0, hintsUsed: 0, elapsedMs: [], lastSeenAt: new Date(0).toISOString() };
+      const row = byStudent.get(event.studentId) ?? { attempts: 0, correctCount: 0, hintsUsed: 0, elapsedMs: [], lastSeenAt: new Date(0).toISOString(), perStep: new Map<number, { right: boolean; wrong: boolean }>() };
       if (event.correct !== null) row.attempts += 1;
       if (event.correct === true) row.correctCount += 1;
       if (event.eventType === 'hint_requested') row.hintsUsed += 1;
+      if (event.eventType === 'widget_completed' && typeof event.payload?.stepIndex === 'number') {
+        const cell = row.perStep.get(event.payload.stepIndex) ?? { right: false, wrong: false };
+        if (event.correct === true) cell.right = true;
+        if (event.correct === false) cell.wrong = true;
+        row.perStep.set(event.payload.stepIndex, cell);
+      }
       row.elapsedMs.push(event.elapsedMs);
       row.lastSeenAt = new Date().toISOString();
       byStudent.set(event.studentId, row);
@@ -343,13 +351,13 @@ export const memoryStorageAdapter: StorageAdapter = {
     for (const a of childAssignments) {
       const childSession = sessions.get(a.sessionId);
       if (childSession && !byStudent.has(childSession.studentId)) {
-        byStudent.set(childSession.studentId, { attempts: 0, correctCount: 0, hintsUsed: 0, elapsedMs: [], lastSeenAt: childSession.createdAt ?? new Date().toISOString() });
+        byStudent.set(childSession.studentId, { attempts: 0, correctCount: 0, hintsUsed: 0, elapsedMs: [], lastSeenAt: childSession.createdAt ?? new Date().toISOString(), perStep: new Map<number, { right: boolean; wrong: boolean }>() });
       }
     }
 
     // Include the parent session's own anon student (the teacher who built it).
     if (sessionObj && !byStudent.has(sessionObj.studentId)) {
-      byStudent.set(sessionObj.studentId, { attempts: 0, correctCount: 0, hintsUsed: 0, elapsedMs: [], lastSeenAt: sessionObj.createdAt ?? new Date().toISOString() });
+      byStudent.set(sessionObj.studentId, { attempts: 0, correctCount: 0, hintsUsed: 0, elapsedMs: [], lastSeenAt: sessionObj.createdAt ?? new Date().toISOString(), perStep: new Map<number, { right: boolean; wrong: boolean }>() });
     }
 
     return [...byStudent.entries()].map(([studentId, row]) => {
@@ -367,6 +375,7 @@ export const memoryStorageAdapter: StorageAdapter = {
         completed: row.attempts >= (sessionObj?.plan?.steps?.length ?? 0) && row.attempts > 0,
         medianElapsedMs: median,
         lastSeenAt: row.lastSeenAt,
+        stepStrip: buildStepStrip(sessionObj?.plan?.steps?.length ?? 0, row.perStep),
       };
     });
   },
diff --git a/src/lib/storage/supabase.ts b/src/lib/storage/supabase.ts
index 9d1b02e1..9c462834 100644
--- a/src/lib/storage/supabase.ts
+++ b/src/lib/storage/supabase.ts
@@ -1,6 +1,7 @@
 import { supabaseAdmin, supabaseConfigured } from '@/lib/supabase/client';
 import type { Assignment, RosterStudent } from '@/lib/roster/types';
 import { EMPTY_PROFILE, studentProfile, type StudentProfile } from '@/lib/student/schema';
+import { buildStepStrip } from '@/lib/storage/types';
 import type {
   InteractionEvent,
   MasteryRollupRow,
@@ -457,7 +458,7 @@ export const supabaseStorageAdapter: StorageAdapter = {
     const allSessionIds = [sessionId, ...childSessionIds];
     const { data: interactionRows, error: interactionError } = await supabaseAdmin()
       .from('interactions')
-      .select('student_id, event_type, correct, elapsed_ms')
+      .select('student_id, event_type, correct, elapsed_ms, stepIndex:payload->stepIndex')
       .in('session_id', allSessionIds);
     // Every number in the report comes from these rows, so a failure here is a
     // wrong report rather than an empty one.
@@ -468,14 +469,24 @@ export const supabaseStorageAdapter: StorageAdapter = {
     const byStudent = new Map<string, {
       attempts: number; correctCount: number; hintsUsed: number;
       elapsedMs: number[]; lastSeenAt: string;
+      perStep: Map<number, { right: boolean; wrong: boolean }>;
     }>();
 
     for (const row of interactionRows ?? []) {
       const sid = String(row.student_id);
-      const entry = byStudent.get(sid) ?? { attempts: 0, correctCount: 0, hintsUsed: 0, elapsedMs: [], lastSeenAt: new Date(0).toISOString() };
+      const entry = byStudent.get(sid) ?? { attempts: 0, correctCount: 0, hintsUsed: 0, elapsedMs: [], lastSeenAt: new Date(0).toISOString(), perStep: new Map<number, { right: boolean; wrong: boolean }>() };
       if (row.correct !== null) entry.attempts += 1;
       if (row.correct === true) entry.correctCount += 1;
       if (row.event_type === 'hint_requested') entry.hintsUsed += 1;
+      if (row.event_type === 'widget_completed' && row.stepIndex != null) {
+        const stepIndex = Number(row.stepIndex);
+        if (Number.isFinite(stepIndex)) {
+          const cell = entry.perStep.get(stepIndex) ?? { right: false, wrong: false };
+          if (row.correct === true) cell.right = true;
+          if (row.correct === false) cell.wrong = true;
+          entry.perStep.set(stepIndex, cell);
+        }
+      }
       if (row.elapsed_ms != null) entry.elapsedMs.push(Number(row.elapsed_ms));
       entry.lastSeenAt = new Date().toISOString();
       byStudent.set(sid, entry);
@@ -484,13 +495,13 @@ export const supabaseStorageAdapter: StorageAdapter = {
     // Include roster students from child assignments even with no interactions yet.
     for (const [anonId] of anonToRoster) {
       if (!byStudent.has(anonId)) {
-        byStudent.set(anonId, { attempts: 0, correctCount: 0, hintsUsed: 0, elapsedMs: [], lastSeenAt: new Date().toISOString() });
+        byStudent.set(anonId, { attempts: 0, correctCount: 0, hintsUsed: 0, elapsedMs: [], lastSeenAt: new Date().toISOString(), perStep: new Map<number, { right: boolean; wrong: boolean }>() });
       }
     }
 
     // Include session owner even with no interactions.
     if (sessionRow && !byStudent.has(String(sessionRow.student_id))) {
-      byStudent.set(String(sessionRow.student_id), { attempts: 0, correctCount: 0, hintsUsed: 0, elapsedMs: [], lastSeenAt: new Date().toISOString() });
+      byStudent.set(String(sessionRow.student_id), { attempts: 0, correctCount: 0, hintsUsed: 0, elapsedMs: [], lastSeenAt: new Date().toISOString(), perStep: new Map<number, { right: boolean; wrong: boolean }>() });
     }
 
     const stepCount = (sessionRow?.plan as { steps?: unknown[] } | null)?.steps?.length ?? 0;
@@ -510,6 +521,7 @@ export const supabaseStorageAdapter: StorageAdapter = {
         completed: stepCount > 0 && row.attempts >= stepCount,
         medianElapsedMs: median,
         lastSeenAt: row.lastSeenAt,
+        stepStrip: buildStepStrip(stepCount, row.perStep),
       };
     });
   },
diff --git a/src/lib/storage/types.ts b/src/lib/storage/types.ts
index 94ca04ce..d33a5f97 100644
--- a/src/lib/storage/types.ts
+++ b/src/lib/storage/types.ts
@@ -68,6 +68,26 @@ export type SessionSummary = {
   activityKinds: string[];
 };
 
+/**
+ * One cell of the report's per-step evidence strip: what happened at that
+ * step, in one word. 'unreached' covers both "never got there" and events
+ * recorded before stepIndex was persisted — the strip never guesses.
+ */
+export type StepOutcome = 'first-try' | 'attempts' | 'wrong' | 'unreached';
+
+/** Fold per-step completion evidence into strip cells. Pure; shared by both adapters. */
+export function buildStepStrip(
+  stepCount: number,
+  perStep: Map<number, { right: boolean; wrong: boolean }>,
+): StepOutcome[] {
+  return Array.from({ length: stepCount }, (_, index) => {
+    const cell = perStep.get(index);
+    if (!cell) return 'unreached';
+    if (cell.right) return cell.wrong ? 'attempts' : 'first-try';
+    return 'wrong';
+  });
+}
+
 /** Per-student performance row for the session report view. */
 export type SessionStudentRow = {
   studentId: string;
@@ -80,6 +100,8 @@ export type SessionStudentRow = {
   completed: boolean;
   medianElapsedMs: number | null;
   lastSeenAt: string;
+  /** One outcome per plan step — the report's evidence strip. */
+  stepStrip: StepOutcome[];
 };
 
 export interface StorageAdapter {

From df6e644238de2809018653b833ca5bae43f2eb87 Mon Sep 17 00:00:00 2001
From: Adam Stankiewicz <agstanki@gmail.com>
Date: Sun, 23 Aug 2026 14:24:21 -0400
Subject: [PATCH 10/14] design: sentence case across all UI copy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Buttons, labels, headings, modal titles, page metadata, widget and game
display names — Add student, Class roster, Save changes, Pathway report,
In progress, Draft meter, Timeline builder, Memory match, and the rest.
Content strings keep their real capitalization (Magna Carta, Frederick
Douglass, the San Andreas Fault, a planetary mnemonic); proper nouns
like Practice Pathways, Learning Commons, and Debate AI stay proper.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../(teacher)/pathways/[sessionId]/page.tsx   |  2 +-
 src/app/(teacher)/roster/page.tsx             |  2 +-
 src/app/demo/defend-claim/page.tsx            |  2 +-
 src/app/demo/draft-meter/page.tsx             |  2 +-
 src/app/demo/draw-the-curve/page.tsx          |  2 +-
 src/app/demo/find-the-flaw/page.tsx           |  2 +-
 src/app/demo/fraction-area-model/page.tsx     |  2 +-
 src/app/demo/markdown-card/page.tsx           |  2 +-
 src/app/demo/narrated-card/page.tsx           |  2 +-
 src/app/demo/page.tsx                         | 22 +++++++++----------
 src/app/demo/step-reveal/page.tsx             |  2 +-
 src/app/demo/swiper-flashcard/page.tsx        |  2 +-
 src/app/demo/timeline-builder/page.tsx        |  2 +-
 src/app/demo/writing-workshop/page.tsx        |  2 +-
 src/app/games/page.tsx                        |  4 ++--
 src/components/games/MemoryMatch.tsx          |  2 +-
 src/components/games/WordScramble.tsx         |  2 +-
 src/components/pathways/SessionReport.tsx     |  2 +-
 src/components/roster/AddStudentModal.tsx     |  4 ++--
 src/components/roster/RosterPage.tsx          |  6 ++---
 20 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/app/(teacher)/pathways/[sessionId]/page.tsx b/src/app/(teacher)/pathways/[sessionId]/page.tsx
index 35662c21..cdf6bbf7 100644
--- a/src/app/(teacher)/pathways/[sessionId]/page.tsx
+++ b/src/app/(teacher)/pathways/[sessionId]/page.tsx
@@ -26,7 +26,7 @@ export default async function PathwayReportPage({
           ← All Pathways
         </Link>
         <h1 className="font-heading text-2xl font-bold mt-2">
-          {session?.topic ?? 'Pathway Report'}
+          {session?.topic ?? 'Pathway report'}
         </h1>
       </div>
 
diff --git a/src/app/(teacher)/roster/page.tsx b/src/app/(teacher)/roster/page.tsx
index 21cf3505..9c6b9192 100644
--- a/src/app/(teacher)/roster/page.tsx
+++ b/src/app/(teacher)/roster/page.tsx
@@ -1,7 +1,7 @@
 import { Suspense } from 'react';
 import { RosterPage } from '@/components/roster/RosterPage';
 
-export const metadata = { title: 'Class Roster' };
+export const metadata = { title: 'Class roster' };
 
 export default function Page() {
   return (
diff --git a/src/app/demo/defend-claim/page.tsx b/src/app/demo/defend-claim/page.tsx
index 44c249fa..e37e09e8 100644
--- a/src/app/demo/defend-claim/page.tsx
+++ b/src/app/demo/defend-claim/page.tsx
@@ -118,7 +118,7 @@ export default function DefendClaimDemo() {
         >
           <span aria-hidden="true">←</span> Widget gallery
         </Link>
-        <h1 className="text-3xl font-semibold tracking-tight">Defend a Claim</h1>
+        <h1 className="text-3xl font-semibold tracking-tight">Defend a claim</h1>
         <p className="mt-2 text-muted-foreground">
           Take a side on a claim historians argue about, defend it from the sources, then ask for
           feedback and revise. Nothing is judged until you press the button — and every reading
diff --git a/src/app/demo/draft-meter/page.tsx b/src/app/demo/draft-meter/page.tsx
index 9f7a902a..e767e54e 100644
--- a/src/app/demo/draft-meter/page.tsx
+++ b/src/app/demo/draft-meter/page.tsx
@@ -167,7 +167,7 @@ export default function DraftMeterDemo() {
         >
           <span aria-hidden="true">←</span> Widget gallery
         </Link>
-        <h1 className="text-3xl font-semibold tracking-tight">Draft Meter</h1>
+        <h1 className="text-3xl font-semibold tracking-tight">Draft meter</h1>
         <p className="mt-2 text-muted-foreground">
           Question, textbox, one line. Same component and same scoring call in all four of these —
           what changes is the three things each one is looking for, and those come from the standard.
diff --git a/src/app/demo/draw-the-curve/page.tsx b/src/app/demo/draw-the-curve/page.tsx
index b11cc562..81e37293 100644
--- a/src/app/demo/draw-the-curve/page.tsx
+++ b/src/app/demo/draw-the-curve/page.tsx
@@ -156,7 +156,7 @@ export default function DrawTheCurveDemo() {
         >
           <span aria-hidden="true">←</span> Widget gallery
         </Link>
-        <h1 className="text-2xl font-semibold tracking-tight">Draw the Curve</h1>
+        <h1 className="text-2xl font-semibold tracking-tight">Draw the curve</h1>
         <p className="mt-1 text-sm text-muted-foreground">
           Shape the line by dragging its points, then see the real one drawn over your guess. Checked
           on shape, not numbers — so a story&apos;s tension arc works the same way a motion graph does.
diff --git a/src/app/demo/find-the-flaw/page.tsx b/src/app/demo/find-the-flaw/page.tsx
index b9202290..6ac1d54c 100644
--- a/src/app/demo/find-the-flaw/page.tsx
+++ b/src/app/demo/find-the-flaw/page.tsx
@@ -151,7 +151,7 @@ export default function FindTheFlawDemo() {
         >
           <span aria-hidden="true">←</span> Widget gallery
         </Link>
-        <h1 className="text-2xl font-semibold tracking-tight">Find the Flaw</h1>
+        <h1 className="text-2xl font-semibold tracking-tight">Find the flaw</h1>
         <p className="mt-1 text-sm text-muted-foreground">
           A worked example with one mistake in it. Find where it goes wrong, then say why — the same
           interaction whether the work is a calculation, an experiment, an argument or an explanation.
diff --git a/src/app/demo/fraction-area-model/page.tsx b/src/app/demo/fraction-area-model/page.tsx
index c280ccbf..f90d3356 100644
--- a/src/app/demo/fraction-area-model/page.tsx
+++ b/src/app/demo/fraction-area-model/page.tsx
@@ -44,7 +44,7 @@ export default function FractionAreaModelDemo() {
         >
           <span aria-hidden="true">←</span> Widget gallery
         </Link>
-        <h1 className="mt-2 text-2xl font-semibold tracking-tight">Fraction Area Model</h1>
+        <h1 className="mt-2 text-2xl font-semibold tracking-tight">Fraction area model</h1>
         <p className="mt-1 text-sm text-muted-foreground">
           Partition a whole into equal parts and select segments to build a target fraction.
           Switch denominator choices to explore equivalent forms.
diff --git a/src/app/demo/markdown-card/page.tsx b/src/app/demo/markdown-card/page.tsx
index 2103482f..9dda7dd9 100644
--- a/src/app/demo/markdown-card/page.tsx
+++ b/src/app/demo/markdown-card/page.tsx
@@ -95,7 +95,7 @@ export default function MarkdownCardDemo() {
         >
           <span aria-hidden="true">←</span> Widget gallery
         </Link>
-        <h1 className="text-2xl font-semibold tracking-tight">Markdown Card</h1>
+        <h1 className="text-2xl font-semibold tracking-tight">Markdown card</h1>
         <p className="mt-1 text-sm text-muted-foreground">
           Renders LLM-generated markdown as a reading card for reinforcement.
         </p>
diff --git a/src/app/demo/narrated-card/page.tsx b/src/app/demo/narrated-card/page.tsx
index b730f23f..f7a468d7 100644
--- a/src/app/demo/narrated-card/page.tsx
+++ b/src/app/demo/narrated-card/page.tsx
@@ -47,7 +47,7 @@ export default function NarratedCardDemo() {
         >
           <span aria-hidden="true">←</span> Widget gallery
         </Link>
-        <h1 className="text-2xl font-semibold tracking-tight">Narrated Card</h1>
+        <h1 className="text-2xl font-semibold tracking-tight">Narrated card</h1>
         <p className="mt-1 text-sm text-muted-foreground">
           Reads content aloud sentence by sentence, highlighting each sentence as it is spoken.
         </p>
diff --git a/src/app/demo/page.tsx b/src/app/demo/page.tsx
index a18c92fb..1b370ca9 100644
--- a/src/app/demo/page.tsx
+++ b/src/app/demo/page.tsx
@@ -6,28 +6,28 @@ import { WidgetThumb } from '@/components/demo/WidgetThumb';
 const WIDGETS = [
   {
     slug: 'fraction-area-model',
-    name: 'Fraction Area Model',
+    name: 'Fraction area model',
     description:
       'Partition a whole into equal parts and select segments to build a target fraction. Supports bar and circle representations with equivalent-fraction detection.',
     tags: ['fractions', 'visual', 'manipulative'],
   },
   {
     slug: 'swiper-flashcard',
-    name: 'Swiper Flashcard',
+    name: 'Swiper flashcard',
     description:
       'Swipe a card up or down to answer a question or sort a statement into a category. Supports drag gestures and emits a completion event with per-card results.',
     tags: ['flashcards', 'true/false', 'sorting'],
   },
   {
     slug: 'draft-meter',
-    name: 'Draft Meter',
+    name: 'Draft meter',
     description:
       'Write a short response and one line scores how strong the argument is, from a live model call on a debounce. Optionally supplies a source passage, so "evidence" means citing the text.',
     tags: ['writing', 'argument', 'live scoring'],
   },
   {
     slug: 'draw-the-curve',
-    name: 'Draw the Curve',
+    name: 'Draw the curve',
     description:
       'Shape a line by dragging its points to predict how something changes, then see the real curve drawn over your guess. Checked on shape rather than numbers, so a story arc works the same way a motion graph does.',
     tags: ['predict-then-reveal', 'any subject', 'chart'],
@@ -41,28 +41,28 @@ const WIDGETS = [
   },
   {
     slug: 'writing-workshop',
-    name: 'Writing Workshop',
+    name: 'Writing workshop',
     description:
       'Long-form writing — essay, lab report, research proposal, short story — reviewed only when the student asks, and marked up on the sentences themselves with a note on each.',
     tags: ['long-form', 'on demand', 'annotation'],
   },
   {
     slug: 'find-the-flaw',
-    name: 'Find the Flaw',
+    name: 'Find the flaw',
     description:
       'A worked example with one deliberate mistake — a solution, an experiment, an argument, an explanation. The student finds the step where it goes wrong, then diagnoses why. Checked locally, so there is no wait.',
     tags: ['error analysis', 'any subject', 'metacognition'],
   },
   {
     slug: 'defend-claim',
-    name: 'Defend a Claim',
+    name: 'Defend a claim',
     description:
       'Take a side on a contestable historical claim, defend it from two conflicting sources, then request feedback and revise. Every reading answers with a counterargument. Typed or dictated. History, grade 7+.',
     tags: ['history', 'argument', 'voice', 'revision'],
   },
   {
     slug: 'timeline-builder',
-    name: 'Timeline Builder',
+    name: 'Timeline builder',
     description:
       'Drag historical events from a bank into labeled period zones on a horizontal timeline. Supports 3–5 zones with per-event correctness feedback.',
     tags: ['history', 'sequencing', 'timeline'],
@@ -90,20 +90,20 @@ const WIDGETS = [
   },
   {
     slug: 'narrated-card',
-    name: 'Narrated Card',
+    name: 'Narrated card',
     description:
       'Reads content aloud using the browser\'s text-to-speech engine, revealing each sentence as it is spoken. Steps stack up as they complete.',
     tags: ['audio', 'narration', 'accessibility'],
   },
   {
     slug: 'step-reveal',
-    name: 'Step Reveal',
+    name: 'Step reveal',
     description: 'Walk through a concept or worked example one step at a time. Each step stacks up so students can follow the full chain of reasoning.',
     tags: ['worked example', 'step-by-step', 'reasoning'],
   },
   {
     slug: 'markdown-card',
-    name: 'Markdown Card',
+    name: 'Markdown card',
     description:
       'Renders LLM-generated markdown as a clean reading card — headings, bold, bullets, blockquotes, and an optional tip callout. Used to re-teach a concept a student is struggling with.',
     tags: ['reading', 'remediation', 'markdown'],
diff --git a/src/app/demo/step-reveal/page.tsx b/src/app/demo/step-reveal/page.tsx
index 8074d6d1..b58bb6f5 100644
--- a/src/app/demo/step-reveal/page.tsx
+++ b/src/app/demo/step-reveal/page.tsx
@@ -71,7 +71,7 @@ export default function StepRevealDemo() {
         >
           <span aria-hidden="true">←</span> Widget gallery
         </Link>
-        <h1 className="text-2xl font-semibold tracking-tight">Step Reveal</h1>
+        <h1 className="text-2xl font-semibold tracking-tight">Step reveal</h1>
         <p className="mt-1 text-sm text-muted-foreground">
           Walk through a worked example one step at a time. Each step stacks up so students can follow the full chain of reasoning.
         </p>
diff --git a/src/app/demo/swiper-flashcard/page.tsx b/src/app/demo/swiper-flashcard/page.tsx
index 1c12f958..dc679d09 100644
--- a/src/app/demo/swiper-flashcard/page.tsx
+++ b/src/app/demo/swiper-flashcard/page.tsx
@@ -83,7 +83,7 @@ export default function SwiperFlashcardDemo() {
         >
           <span aria-hidden="true">←</span> Widget gallery
         </Link>
-        <h1 className="mt-2 text-2xl font-semibold tracking-tight">Swiper Flashcard</h1>
+        <h1 className="mt-2 text-2xl font-semibold tracking-tight">Swiper flashcard</h1>
         <p className="mt-1 text-sm text-muted-foreground">
           Sort each clue into the correct plate boundary type. Drag the card up or down — or use the buttons. An{' '}
           <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs">onComplete</code>{' '}
diff --git a/src/app/demo/timeline-builder/page.tsx b/src/app/demo/timeline-builder/page.tsx
index 4e21fc74..700edfa0 100644
--- a/src/app/demo/timeline-builder/page.tsx
+++ b/src/app/demo/timeline-builder/page.tsx
@@ -39,7 +39,7 @@ export default function TimelineBuilderDemo() {
         >
           <span aria-hidden="true">←</span> Widget gallery
         </Link>
-        <h1 className="text-2xl font-semibold tracking-tight">Timeline Builder</h1>
+        <h1 className="text-2xl font-semibold tracking-tight">Timeline builder</h1>
         <p className="mt-1 text-sm text-muted-foreground">
           Drag events from the bank into the correct period on the timeline.
         </p>
diff --git a/src/app/demo/writing-workshop/page.tsx b/src/app/demo/writing-workshop/page.tsx
index c4d5b7ea..c185def3 100644
--- a/src/app/demo/writing-workshop/page.tsx
+++ b/src/app/demo/writing-workshop/page.tsx
@@ -118,7 +118,7 @@ export default function WritingWorkshopDemo() {
         >
           <span aria-hidden="true">←</span> Widget gallery
         </Link>
-        <h1 className="text-2xl font-semibold tracking-tight">Writing Workshop</h1>
+        <h1 className="text-2xl font-semibold tracking-tight">Writing workshop</h1>
         <p className="mt-1 text-sm text-muted-foreground">
           Long-form writing, marked up when <em>you</em> ask. Nothing watches while you draft — then
           the read comes back on the sentences themselves, underlined where they work and where they
diff --git a/src/app/games/page.tsx b/src/app/games/page.tsx
index e526af72..c24bda3b 100644
--- a/src/app/games/page.tsx
+++ b/src/app/games/page.tsx
@@ -11,14 +11,14 @@ type GameType = 'menu' | 'memory' | 'scramble' | 'pacman';
 const GAMES = [
   {
     id: 'memory' as const,
-    name: 'Memory Match',
+    name: 'Memory match',
     emoji: '🎴',
     description: 'Find matching pairs',
     component: MemoryMatch,
   },
   {
     id: 'scramble' as const,
-    name: 'Word Scramble',
+    name: 'Word scramble',
     emoji: '🔤',
     description: 'Unscramble the letters',
     component: WordScramble,
diff --git a/src/components/games/MemoryMatch.tsx b/src/components/games/MemoryMatch.tsx
index 6471fa7b..888aa766 100644
--- a/src/components/games/MemoryMatch.tsx
+++ b/src/components/games/MemoryMatch.tsx
@@ -93,7 +93,7 @@ export function MemoryMatch({ onComplete }: { onComplete?: () => void }) {
   return (
     <div className="flex min-h-[500px] flex-col items-center gap-6 p-6">
       <div className="text-center">
-        <h2 className="mb-2 text-3xl font-black text-violet-600">Memory Match</h2>
+        <h2 className="mb-2 text-3xl font-black text-violet-600">Memory match</h2>
         <p className="text-lg font-bold text-slate-600">
           Moves: {moves} | Matched: {matchedPairs}/{EMOJI_PAIRS.length}
         </p>
diff --git a/src/components/games/WordScramble.tsx b/src/components/games/WordScramble.tsx
index 0bdf7b60..43dc7650 100644
--- a/src/components/games/WordScramble.tsx
+++ b/src/components/games/WordScramble.tsx
@@ -109,7 +109,7 @@ export function WordScramble({ onComplete }: { onComplete?: () => void }) {
   return (
     <div className="flex min-h-[500px] flex-col items-center gap-6 p-6">
       <div className="text-center">
-        <h2 className="mb-2 text-3xl font-black text-violet-600">Word Scramble</h2>
+        <h2 className="mb-2 text-3xl font-black text-violet-600">Word scramble</h2>
         <p className="text-lg font-bold text-slate-600">
           Score: {score} | Word {currentWordIndex + 1}/{WORDS.length}
         </p>
diff --git a/src/components/pathways/SessionReport.tsx b/src/components/pathways/SessionReport.tsx
index a58b5643..fc0965b1 100644
--- a/src/components/pathways/SessionReport.tsx
+++ b/src/components/pathways/SessionReport.tsx
@@ -50,7 +50,7 @@ function StatusBadge({ completed }: { completed: boolean }) {
           : 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300'
       }`}
     >
-      {completed ? 'Completed' : 'In Progress'}
+      {completed ? 'Completed' : 'In progress'}
     </span>
   );
 }
diff --git a/src/components/roster/AddStudentModal.tsx b/src/components/roster/AddStudentModal.tsx
index 0b4478e2..aca16650 100644
--- a/src/components/roster/AddStudentModal.tsx
+++ b/src/components/roster/AddStudentModal.tsx
@@ -122,7 +122,7 @@ export function AddStudentModal({ existing, onClose, onSaved }: Props) {
       >
         <div className="sticky top-0 bg-white dark:bg-slate-900 px-6 pt-6 pb-4 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between">
           <h2 className="text-base font-semibold text-slate-900 dark:text-slate-100">
-            {existing ? 'Edit Student' : 'Add Student'}
+            {existing ? 'Edit student' : 'Add student'}
           </h2>
           <button onClick={dismiss} className="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 text-lg leading-none">✕</button>
         </div>
@@ -242,7 +242,7 @@ export function AddStudentModal({ existing, onClose, onSaved }: Props) {
         <div className="sticky bottom-0 bg-white dark:bg-slate-900 px-6 pb-6 pt-4 border-t border-slate-100 dark:border-slate-800 flex justify-end gap-3">
           <Button variant="ghost" onClick={dismiss} disabled={saving}>Cancel</Button>
           <Button onClick={handleSave} disabled={saving}>
-            {saving ? 'Saving…' : existing ? 'Save Changes' : 'Add Student'}
+            {saving ? 'Saving…' : existing ? 'Save changes' : 'Add student'}
           </Button>
         </div>
       </div>
diff --git a/src/components/roster/RosterPage.tsx b/src/components/roster/RosterPage.tsx
index 32ba5420..60c849f8 100644
--- a/src/components/roster/RosterPage.tsx
+++ b/src/components/roster/RosterPage.tsx
@@ -35,12 +35,12 @@ export function RosterPage() {
     <div className="flex-1 max-w-3xl mx-auto w-full px-6 pb-20 pt-8">
       <div className="flex items-center justify-between mb-6">
         <div className="flex items-center gap-3">
-          <h1 className="text-xl font-semibold text-foreground">Class Roster</h1>
+          <h1 className="text-xl font-semibold text-foreground">Class roster</h1>
           {!loading && (
             <Badge variant="secondary">{students.length} student{students.length !== 1 ? 's' : ''}</Badge>
           )}
         </div>
-        <Button size="sm" onClick={() => setAddOpen(true)}>+ Add Student</Button>
+        <Button size="sm" onClick={() => setAddOpen(true)}>+ Add student</Button>
       </div>
 
       {loading ? (
@@ -55,7 +55,7 @@ export function RosterPage() {
           <p className="text-muted-foreground text-sm max-w-xs">
             No students yet. Add your first student to start building personalized pathways.
           </p>
-          <Button onClick={() => setAddOpen(true)}>Add First Student</Button>
+          <Button onClick={() => setAddOpen(true)}>Add first student</Button>
         </div>
       ) : (
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">

From 4f07c4124abfc769360be9c6dedcef4911a4f3ef Mon Sep 17 00:00:00 2001
From: Adam Stankiewicz <agstanki@gmail.com>
Date: Sun, 23 Aug 2026 14:33:38 -0400
Subject: [PATCH 11/14] fix: close the remaining fidelity gaps against the
 1c/1e/1g artboards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Ink plane goes quiet: mono overline + grey sub-line only, the white card
  is the hero; grade and the primary CTA are visible up front, with the
  example chips moved below the controls row.
- Headings pick up Archivo's width axis (font-stretch 112%).
- Build strip: dedicated --track token for progress tracks, and the active
  segment fills proportionally instead of pulsing at full width.
- Walkthrough header is three things — a 30px circular exit, the continuous
  14px bar, and the star count — with state, topic, standard chip, and the
  break link relocated to the quiet line beneath.
- Dashboard: no-opens rows read 'Needs your review'; quick-create gains the
  blinking caret and a lesson-plan attach control.
- Build narrative activity cells show the activity's human name, not the
  slug.
- Report leads with its four figures: opens, completed, completion %, and
  remediations in the warning colour.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../(teacher)/pathways/[sessionId]/page.tsx   |   3 +-
 src/app/globals.css                           |  22 ++
 src/components/PathwayBuilder.tsx             | 113 +++++-----
 src/components/pathway/ActivityTrail.tsx      |   4 +-
 src/components/pathway/BuildNarrative.tsx     |   7 +-
 src/components/pathway/PathwayWalkthrough.tsx | 201 +++++++++---------
 src/components/pathways/PathwaysDashboard.tsx |  38 +++-
 src/components/pathways/SessionReportPage.tsx |  67 +++++-
 8 files changed, 283 insertions(+), 172 deletions(-)

diff --git a/src/app/(teacher)/pathways/[sessionId]/page.tsx b/src/app/(teacher)/pathways/[sessionId]/page.tsx
index cdf6bbf7..308c6930 100644
--- a/src/app/(teacher)/pathways/[sessionId]/page.tsx
+++ b/src/app/(teacher)/pathways/[sessionId]/page.tsx
@@ -23,7 +23,7 @@ export default async function PathwayReportPage({
           href="/pathways"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
         >
-          ← All Pathways
+          ← All pathways
         </Link>
         <h1 className="font-heading text-2xl font-bold mt-2">
           {session?.topic ?? 'Pathway report'}
@@ -32,7 +32,6 @@ export default async function PathwayReportPage({
 
       <SessionReportPage
         sessionId={sessionId}
-        topic={session?.topic ?? ''}
         parentPreview={parentPreview}
       />
     </main>
diff --git a/src/app/globals.css b/src/app/globals.css
index 29bafcce..2e35fb73 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -47,6 +47,7 @@
   --color-card: var(--card);
   /* Practice Pathways design tokens — the handoff palette, beyond shadcn's roles. */
   --color-sunk: var(--sunk);
+  --color-track: var(--track);
   --color-ink: var(--foreground);
   --color-ink-2: var(--ink-2);
   --color-ink-3: var(--muted-foreground);
@@ -95,6 +96,7 @@
   --popover: #ffffff;
   --popover-foreground: #1f1915;
   --sunk: #f6f3ef;
+  --track: #e8e4dd; /* progress tracks — one step deeper than sunk */
   /* Primary action = the highlighter with ink text (12.33:1). The mandatory
      1px ink border is applied by the button styles, not the token. */
   --primary: #e3df41;
@@ -163,6 +165,7 @@
   --popover: #1f1b18;
   --popover-foreground: #f5f3f1;
   --sunk: #292623; /* card-2 */
+  --track: #393430;
   /* The highlighter is identical in both themes; its text flips to the dark
      ground (13.45:1) so "ink on the marker" stays true as a sibling rule. */
   --primary: #e3df41;
@@ -260,5 +263,24 @@
   }
   h1, h2, h3, h4 {
     font-family: var(--font-heading), var(--font-plex-sans), sans-serif;
+    font-stretch: 112%;
   }
 }
+
+@keyframes caret-blink {
+  0%, 45% { opacity: 1; }
+  50%, 95% { opacity: 0; }
+}
+.caret-blink { animation: caret-blink 1.1s steps(1) infinite; }
+@media (prefers-reduced-motion: reduce) {
+  .caret-blink { animation: none; }
+}
+
+@keyframes segment-grow {
+  from { width: 4%; }
+  to { width: 92%; }
+}
+.segment-grow { animation: segment-grow 9s cubic-bezier(0.2, 0.6, 0.3, 1) forwards; }
+@media (prefers-reduced-motion: reduce) {
+  .segment-grow { animation: none; width: 100%; }
+}
diff --git a/src/components/PathwayBuilder.tsx b/src/components/PathwayBuilder.tsx
index 32f6bd0c..ad81f138 100644
--- a/src/components/PathwayBuilder.tsx
+++ b/src/components/PathwayBuilder.tsx
@@ -93,11 +93,9 @@ export function PathwayBuilder() {
 
   const streaming = state.status === "streaming";
   const started = state.status !== "idle";
-  // Topic is the one thing this page asks first — it's the variable a
-  // teacher is actively deciding day to day; grade is usually a fixed fact
-  // about them, so it (and the submit action) only earns screen space once
-  // there's actually a topic to attach it to. Mirrors `/learn`'s one-question
-  // focus rather than presenting every field as equally important at once.
+  // The card shows everything it asks up front (design 1c): topic, grade,
+  // and the primary are always visible. `engaged` only decides when the
+  // example chips step aside for a topic the teacher is actually typing.
   const engaged = started || Boolean(topic.trim());
 
   function runSubmit() {
@@ -136,6 +134,8 @@ export function PathwayBuilder() {
       {!started && (
         <div className="bg-[#1f1915] pb-20">
           <div className="mx-auto w-full max-w-3xl px-6 pt-12">
+            {/* Quiet by design (1c): a mono overline and one grey sub-line —
+                no headline. The white card is the hero. */}
             <motion.p
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
@@ -143,20 +143,10 @@ export function PathwayBuilder() {
             >
               New pathway
             </motion.p>
-            <motion.h1
-              initial={{ opacity: 0, y: 6 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.25 }}
-              className="mt-2 font-heading text-4xl font-black tracking-tight text-balance text-[#f5f3f1] sm:text-5xl"
-            >
-              Turn a topic into a lesson{" "}
-              <span className="text-brand-fill">students can do</span>.
-            </motion.h1>
-            <p className="mt-3 max-w-xl text-base leading-relaxed text-[#bbb7b2]">
+            <p className="mt-2 max-w-xl text-base leading-relaxed text-[#bbb7b2]">
               Name what you&rsquo;re teaching. We find the standard it maps to
               in the standards graph, then build a pathway from its verified
-              learning components — with interactive activities your students
-              work through.
+              learning components.
             </p>
           </div>
         </div>
@@ -192,51 +182,8 @@ export function PathwayBuilder() {
             className="min-h-16 w-full resize-none border-border bg-transparent px-4 py-3.5 text-[16.5px] font-semibold placeholder:font-normal placeholder:text-muted-foreground focus-visible:border-foreground"
           />
 
-          {!engaged && (
-            <div className="mt-4">
-              <p className="font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
-                Or start from an example
-              </p>
-              <div className="mt-2 flex flex-wrap gap-2">
-                {EXAMPLES.map((example) => (
-                  <Button
-                    key={example.topic}
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={() => {
-                      setTopic(example.topic);
-                      setGradeHint(example.grade);
-                      // An example has nothing to do with the uploaded plan,
-                      // so building from one must not cite it.
-                      setLessonPlan(null);
-                    }}
-                    className="border border-border font-normal text-ink-2 hover:border-foreground hover:bg-sunk hover:text-foreground"
-                  >
-                    {example.topic}
-                    <span className="text-muted-foreground">
-                      · Gr {example.grade}
-                    </span>
-                  </Button>
-                ))}
-              </div>
-              <LessonPlanUpload
-                disabled={streaming}
-                onPick={pickFromLessonPlan}
-                onClear={() => setLessonPlan(null)}
-              />
-              {lessonPlan && (
-                <p className="mt-2 text-xs text-muted-foreground">
-                  Building with{" "}
-                  <span className="font-medium text-foreground">{lessonPlan.filename}</span>{" "}
-                  as context — the pathway follows how your plan teaches this.
-                </p>
-              )}
-            </div>
-          )}
-
           <AnimatePresence initial={false}>
-            {engaged && (
+            {(engaged || !started) && (
               <motion.div
                 initial={{ opacity: 0, height: 0 }}
                 animate={{ opacity: 1, height: "auto" }}
@@ -310,6 +257,50 @@ export function PathwayBuilder() {
             )}
           </AnimatePresence>
 
+          {!engaged && (
+            <div className="mt-4">
+              <p className="font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
+                Or start from an example
+              </p>
+              <div className="mt-2 flex flex-wrap gap-2">
+                {EXAMPLES.map((example) => (
+                  <Button
+                    key={example.topic}
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      setTopic(example.topic);
+                      setGradeHint(example.grade);
+                      // An example has nothing to do with the uploaded plan,
+                      // so building from one must not cite it.
+                      setLessonPlan(null);
+                    }}
+                    className="border border-border font-normal text-ink-2 hover:border-foreground hover:bg-sunk hover:text-foreground"
+                  >
+                    {example.topic}
+                    <span className="text-muted-foreground">
+                      · Gr {example.grade}
+                    </span>
+                  </Button>
+                ))}
+              </div>
+              <LessonPlanUpload
+                disabled={streaming}
+                onPick={pickFromLessonPlan}
+                onClear={() => setLessonPlan(null)}
+              />
+              {lessonPlan && (
+                <p className="mt-2 text-xs text-muted-foreground">
+                  Building with{" "}
+                  <span className="font-medium text-foreground">{lessonPlan.filename}</span>{" "}
+                  as context — the pathway follows how your plan teaches this.
+                </p>
+              )}
+            </div>
+          )}
+
+
           {!started && (
             <Collapsible className="mt-4">
               <CollapsibleTrigger className="group/detail flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground">
diff --git a/src/components/pathway/ActivityTrail.tsx b/src/components/pathway/ActivityTrail.tsx
index bdd92480..638ee54f 100644
--- a/src/components/pathway/ActivityTrail.tsx
+++ b/src/components/pathway/ActivityTrail.tsx
@@ -35,13 +35,13 @@ export function ActivityTrail({ state }: { state: PathwayState }) {
       <div className="flex items-center gap-2.5">
         <ol className="flex flex-1 gap-[5px]" aria-label="Build progress">
           {STAGES.map((stage) => (
-            <li key={stage.id} className="h-[7px] flex-1 overflow-hidden bg-sunk">
+            <li key={stage.id} className="h-[7px] flex-1 overflow-hidden bg-track">
               <span
                 className={cn(
                   'block h-full transition-[width] duration-100',
                   state.stages[stage.id].status === 'done' && 'w-full bg-verified',
                   state.stages[stage.id].status === 'active' &&
-                    'w-full animate-pulse bg-foreground motion-reduce:animate-none',
+                    'segment-grow bg-foreground',
                   state.stages[stage.id].status === 'skipped' && 'w-full bg-warning-edge',
                   state.stages[stage.id].status === 'pending' && 'w-0',
                 )}
diff --git a/src/components/pathway/BuildNarrative.tsx b/src/components/pathway/BuildNarrative.tsx
index cc3a7d82..1e54bc21 100644
--- a/src/components/pathway/BuildNarrative.tsx
+++ b/src/components/pathway/BuildNarrative.tsx
@@ -35,6 +35,11 @@ const COMPLETION_COPY: Record<string, string> = {
   crossword: 'open-ended',
 };
 
+function humanName(kind: string): string {
+  const label = kindLabel(kind);
+  return label[0].toUpperCase() + label.slice(1);
+}
+
 function completionCopy(kind: string): string {
   return COMPLETION_COPY[kind] ?? 'signals done';
 }
@@ -235,7 +240,7 @@ export function BuildNarrative({ state }: { state: PathwayState }) {
                     {widget ? (
                       <>
                         <span className="truncate font-mono text-[10px] uppercase tracking-[0.12em]" style={{ color: 'var(--activity-text)' }}>
-                          {kindLabel(widgetKind || 'activity')}
+                          {humanName(widgetKind || 'activity')}
                         </span>
                         <span className="text-[11px] text-ink-2">{completionCopy(widgetKind)}</span>
                       </>
diff --git a/src/components/pathway/PathwayWalkthrough.tsx b/src/components/pathway/PathwayWalkthrough.tsx
index 55bfc79c..1602d409 100644
--- a/src/components/pathway/PathwayWalkthrough.tsx
+++ b/src/components/pathway/PathwayWalkthrough.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useRef, useState } from 'react';
+import Link from 'next/link';
 import { motion } from 'motion/react';
 
 import { ActivityFrame } from '@/components/pathway/ActivityFrame';
@@ -208,37 +209,116 @@ export function PathwayWalkthrough({
 
   return (
     <div className="flex w-full flex-col items-center gap-6">
-      <div className="flex w-full items-center justify-between">
-        {session.standardCode ? (
-          <span className="rounded-full border border-verified-edge bg-verified-tint px-3 py-1 font-mono text-xs font-semibold text-verified">
-            ✓ {session.standardCode}
-          </span>
+      {/* Design 1g header: three things only — a 30px circular exit, one
+          continuous 14px progress bar, and the star count. State, topic, and
+          the standard live in the quiet line beneath. */}
+      <div className="flex w-full items-center gap-3">
+        <Link
+          href="/learn"
+          aria-label="Exit pathway"
+          className="flex size-[30px] shrink-0 items-center justify-center rounded-full border border-foreground bg-card text-sm font-bold text-foreground transition-colors hover:bg-sunk"
+        >
+          ✕
+        </Link>
+        {totalSteps > 1 ? (
+          <div
+            className="relative h-3.5 min-w-0 flex-1 overflow-hidden rounded-full border border-border bg-track"
+            role="progressbar"
+            aria-valuenow={currentStep}
+            aria-valuemin={0}
+            aria-valuemax={totalSteps}
+            aria-label={`Activity ${Math.min(currentStep + 1, totalSteps)} of ${totalSteps}`}
+          >
+            <motion.span
+              className="absolute inset-y-0 left-0 border-r border-foreground bg-brand-fill"
+              initial={false}
+              animate={{ width: `${(Math.min(currentStep, totalSteps) / totalSteps) * 100}%` }}
+              transition={{ type: 'spring', stiffness: 260, damping: 30 }}
+            />
+            {injectedIndexList.map((index) => (
+              <span
+                key={`notch-${index}`}
+                aria-hidden="true"
+                className={`absolute inset-y-0 w-1 bg-brand-press ${index === lastInjectedAt ? 'animate-pulse motion-reduce:animate-none' : ''}`}
+                style={{ left: `${(index / totalSteps) * 100}%` }}
+              />
+            ))}
+            {/* Invisible per-step buttons keep tap-to-review under the
+                continuous bar. */}
+            <span className="absolute inset-0 flex">
+              {Array.from({ length: totalSteps }, (_, index) => {
+                const isDone = index < currentStep;
+                const isCurrent = index === currentStep;
+                const isViewing = index === viewingStep;
+                const stepTitle = isInjectedStep(index)
+                  ? 'Extra practice'
+                  : (session.steps[originalStepIndex(index)]?.title ?? `Activity ${index + 1}`);
+                return (
+                  <button
+                    key={`step-${index}-of-${totalSteps}`}
+                    type="button"
+                    title={isDone || isCurrent ? stepTitle : undefined}
+                    aria-label={isDone ? `Review: ${stepTitle}` : stepTitle}
+                    disabled={finished || (!isDone && !isCurrent)}
+                    onClick={
+                      isDone ? () => setViewingStep(isViewing ? null : index)
+                      : isCurrent ? () => setViewingStep(null)
+                      : undefined
+                    }
+                    className={`h-full min-w-0 flex-1 ${!finished && (isDone || isCurrent) ? 'cursor-pointer' : 'cursor-default'} ${isViewing ? 'bg-verified/30' : 'bg-transparent'}`}
+                  />
+                );
+              })}
+            </span>
+          </div>
         ) : (
-          <span className="rounded-full border border-warning-edge bg-warning-tint px-3 py-1 font-mono text-xs font-semibold text-warning">
-            exploring
-          </span>
+          <span className="min-w-0 flex-1" aria-hidden="true" />
         )}
-        <div className="flex items-center gap-2">
-          <a
+        <span className="flex shrink-0 items-center gap-1.5 rounded-full border border-foreground bg-card py-1 pr-3.5 pl-1.5">
+          <motion.span
+            key={stars}
+            initial={{ scale: 1.6, rotate: -16 }}
+            animate={{ scale: 1, rotate: 0 }}
+            transition={{ type: 'spring', stiffness: 400, damping: 12 }}
+            className="flex size-6 items-center justify-center rounded-full border border-foreground bg-brand-fill text-sm text-foreground motion-reduce:transition-none"
+            aria-hidden="true"
+          >
+            ★
+          </motion.span>
+          <span className="font-heading text-lg font-black tabular-nums">{stars}</span>
+        </span>
+      </div>
+
+      {/* The quiet line: state on the left; topic, standard, and the break
+          link on the right. */}
+      <div className="-mt-2 flex w-full flex-wrap items-center justify-between gap-x-3 gap-y-1">
+        <span className="text-xs text-muted-foreground">
+          {finished
+            ? 'All done'
+            : isReviewing
+              ? 'Looking back at a finished activity'
+              : isInjectedStep(currentStep)
+                ? 'Just added · extra practice'
+                : `Activity ${Math.min(currentStep + 1, totalSteps)} of ${totalSteps}`}
+        </span>
+        <span className="flex min-w-0 flex-wrap items-center gap-2">
+          <span className="max-w-56 truncate text-xs text-muted-foreground">{session.topic}</span>
+          {session.standardCode ? (
+            <span className="rounded-full border border-verified-edge bg-verified-tint px-2 py-px font-mono text-[10px] font-semibold text-verified">
+              ✓ {session.standardCode}
+            </span>
+          ) : (
+            <span className="rounded-full border border-warning-edge bg-warning-tint px-2 py-px font-mono text-[10px] font-semibold text-warning">
+              Exploring
+            </span>
+          )}
+          <Link
             href="/games"
-            className="rounded-full border border-border bg-card px-3 py-1 text-xs font-bold text-ink-2 transition-colors hover:border-foreground hover:text-foreground"
+            className="text-xs font-bold text-ink-2 underline-offset-2 transition-colors hover:text-foreground hover:underline"
           >
             Take a break
-          </a>
-          <span className="flex items-center gap-1.5 rounded-full border border-foreground bg-card py-1 pr-3.5 pl-1.5">
-            <motion.span
-              key={stars}
-              initial={{ scale: 1.6, rotate: -16 }}
-              animate={{ scale: 1, rotate: 0 }}
-              transition={{ type: 'spring', stiffness: 400, damping: 12 }}
-              className="flex size-6 items-center justify-center rounded-full border border-foreground bg-brand-fill text-sm text-foreground motion-reduce:transition-none"
-              aria-hidden="true"
-            >
-              ★
-            </motion.span>
-            <span className="font-heading text-lg font-black tabular-nums">{stars}</span>
-          </span>
-        </div>
+          </Link>
+        </span>
       </div>
 
       {!finished && (
@@ -250,75 +330,6 @@ export function PathwayWalkthrough({
         >
           <p className="text-center text-xl font-black text-balance">{session.bigIdea}</p>
 
-          {totalSteps > 1 && (
-            <div className="w-full">
-              {/* Design 1g: one continuous 14px bar. The fill tracks progress;
-                  invisible per-step buttons on top keep the tap-to-review
-                  behaviour. Injected steps notch the track in brand-press. */}
-              <div
-                className="relative h-3.5 w-full overflow-hidden rounded-full border border-border bg-sunk"
-                role="progressbar"
-                aria-valuenow={currentStep}
-                aria-valuemin={0}
-                aria-valuemax={totalSteps}
-                aria-label={`Activity ${Math.min(currentStep + 1, totalSteps)} of ${totalSteps}`}
-              >
-                <motion.span
-                  className="absolute inset-y-0 left-0 border-r border-foreground bg-brand-fill"
-                  initial={false}
-                  animate={{ width: `${(Math.min(currentStep, totalSteps) / totalSteps) * 100}%` }}
-                  transition={{ type: 'spring', stiffness: 260, damping: 30 }}
-                />
-                {injectedIndexList.map((index) => (
-                  <span
-                    key={`notch-${index}`}
-                    aria-hidden="true"
-                    className={`absolute inset-y-0 w-1 bg-brand-press ${index === lastInjectedAt ? 'animate-pulse motion-reduce:animate-none' : ''}`}
-                    style={{ left: `${(index / totalSteps) * 100}%` }}
-                  />
-                ))}
-                <span className="absolute inset-0 flex">
-                  {Array.from({ length: totalSteps }, (_, index) => {
-                    const isDone = index < currentStep;
-                    const isCurrent = index === currentStep;
-                    const isViewing = index === viewingStep;
-                    const stepTitle = isInjectedStep(index)
-                      ? 'Extra practice'
-                      : (session.steps[originalStepIndex(index)]?.title ?? `Activity ${index + 1}`);
-                    return (
-                      <button
-                        key={`step-${index}-of-${totalSteps}`}
-                        type="button"
-                        title={isDone || isCurrent ? stepTitle : undefined}
-                        aria-label={isDone ? `Review: ${stepTitle}` : stepTitle}
-                        disabled={!isDone && !isCurrent}
-                        onClick={
-                          isDone ? () => setViewingStep(isViewing ? null : index)
-                          : isCurrent ? () => setViewingStep(null)
-                          : undefined
-                        }
-                        className={`h-full min-w-0 flex-1 ${isDone || isCurrent ? 'cursor-pointer' : 'cursor-default'} ${isViewing ? 'bg-verified/30' : 'bg-transparent'}`}
-                      />
-                    );
-                  })}
-                </span>
-              </div>
-              <div className="mt-1.5 flex items-baseline justify-between gap-2">
-                <span className="text-xs text-muted-foreground">
-                  {isReviewing
-                    ? 'Looking back at a finished activity'
-                    : isInjectedStep(currentStep)
-                      ? 'just added · extra practice'
-                      : `Activity ${Math.min(currentStep + 1, totalSteps)} of ${totalSteps}`}
-                </span>
-                <span className="truncate text-xs text-muted-foreground">
-                  {session.topic}
-                  {session.standardCode ? ` · ${session.standardCode}` : ''}
-                </span>
-              </div>
-            </div>
-          )}
-
           {isReviewing && (
             <button
               type="button"
diff --git a/src/components/pathways/PathwaysDashboard.tsx b/src/components/pathways/PathwaysDashboard.tsx
index 9b8eccd3..46f00a22 100644
--- a/src/components/pathways/PathwaysDashboard.tsx
+++ b/src/components/pathways/PathwaysDashboard.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import Link from 'next/link';
+import { Paperclip } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
@@ -42,6 +43,7 @@ function QuickCreate({ recentTopics }: { recentTopics: string[] }) {
   const router = useRouter();
   const [topic, setTopic] = useState('');
   const [grade, setGrade] = useState('');
+  const [focused, setFocused] = useState(false);
 
   function build() {
     const params = new URLSearchParams();
@@ -59,13 +61,33 @@ function QuickCreate({ recentTopics }: { recentTopics: string[] }) {
         }}
         className="flex items-stretch border border-foreground bg-card"
       >
-        <input
-          value={topic}
-          onChange={(event) => setTopic(event.target.value)}
-          placeholder="What should your students learn next?"
-          aria-label="Pathway topic"
-          className="min-w-0 flex-1 bg-transparent px-3.5 py-2.5 text-[15px] outline-none placeholder:text-muted-foreground"
-        />
+        <span className="relative min-w-0 flex-1">
+          {/* The bar invites typing before it is touched: a blinking caret
+              sits ahead of the placeholder until focus brings the real one. */}
+          {!topic && !focused && (
+            <span
+              aria-hidden="true"
+              className="caret-blink pointer-events-none absolute top-1/2 left-3.5 h-[1.1em] w-px -translate-y-1/2 bg-foreground"
+            />
+          )}
+          <input
+            value={topic}
+            onChange={(event) => setTopic(event.target.value)}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            placeholder="What should your students learn next?"
+            aria-label="Pathway topic"
+            className="w-full bg-transparent px-3.5 py-2.5 pl-4.75 text-[15px] outline-none placeholder:text-muted-foreground"
+          />
+        </span>
+        <Link
+          href="/"
+          aria-label="Attach a lesson plan"
+          title="Attach a lesson plan"
+          className="flex items-center border-l border-border px-3 text-[15px] text-muted-foreground transition-colors hover:bg-sunk hover:text-foreground"
+        >
+          <Paperclip aria-hidden="true" className="size-4" />
+        </Link>
         <select
           value={grade}
           onChange={(event) => setGrade(event.target.value)}
@@ -139,7 +161,7 @@ function SessionRow({ session }: { session: SessionSummary }) {
         {session.completionCount}
       </span>
       {completion === null ? (
-        <span className="text-right text-[12.5px] text-muted-foreground">Waiting for students</span>
+        <span className="text-right text-[12.5px] text-muted-foreground">Needs your review</span>
       ) : (
         <span className="flex items-center justify-end gap-2">
           <span className="font-heading text-base font-bold tabular-nums">{completion}%</span>
diff --git a/src/components/pathways/SessionReportPage.tsx b/src/components/pathways/SessionReportPage.tsx
index 8b359388..257a55cf 100644
--- a/src/components/pathways/SessionReportPage.tsx
+++ b/src/components/pathways/SessionReportPage.tsx
@@ -5,7 +5,6 @@ import { useEffect, useState } from 'react';
 
 import { PathwayPreview, type PathwayPreviewData } from '@/components/pathways/PathwayPreview';
 import type { PathwayPlan } from '@/lib/pathway/schema';
-import { widgetSpec } from '@/lib/pathway/schema';
 import type { SessionStudentRow, StepOutcome } from '@/lib/storage/types';
 
 // ---------------------------------------------------------------------------
@@ -98,6 +97,69 @@ export function StepStripLegend() {
   );
 }
 
+/**
+ * The report's four figures (design 1e): opens, completed, completion %, and
+ * remediations — the last in the warning colour, because it is the number
+ * that asks for the teacher's attention. Remediations are counted as widgets
+ * the server injected beyond the plan's own steps.
+ */
+function ReportFigures({
+  rows,
+  childSessions,
+}: {
+  rows: SessionStudentRow[] | null;
+  childSessions: ChildSession[] | null;
+}) {
+  const opens = rows?.length ?? null;
+  const completed = rows ? rows.filter((row) => row.completed).length : null;
+  const completion =
+    opens != null && completed != null && opens > 0
+      ? `${Math.round((completed / opens) * 100)}%`
+      : null;
+  const remediations = childSessions
+    ? childSessions.reduce(
+        (sum, child) =>
+          sum +
+          Math.max(0, Object.keys(child.stepWidgets).length - (child.plan?.steps.length ?? 0)),
+        0,
+      )
+    : null;
+
+  const figures: { label: string; value: string; warning?: boolean }[] = [
+    { label: 'Opens', value: opens != null ? String(opens) : '—' },
+    { label: 'Completed', value: completed != null ? String(completed) : '—' },
+    { label: 'Completion', value: completion ?? '—' },
+    {
+      label: 'Remediations',
+      value: remediations != null ? String(remediations) : '—',
+      warning: remediations != null && remediations > 0,
+    },
+  ];
+
+  return (
+    <div className="mb-6 grid grid-cols-2 border border-border bg-card sm:grid-cols-4">
+      {figures.map((figure) => (
+        <div
+          key={figure.label}
+          className="border-b border-r border-border p-3.5 last:border-r-0 sm:border-b-0 nth-2:border-r-0 sm:nth-2:border-r"
+        >
+          <p className="font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
+            {figure.label}
+          </p>
+          <p
+            className={`mt-1 font-heading text-[26px] font-bold tabular-nums ${
+              figure.warning ? 'text-warning' : 'text-foreground'
+            }`}
+          >
+            {figure.warning && <span aria-hidden>⚠ </span>}
+            {figure.value}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 function StatusBadge({ completed }: { completed: boolean }) {
   return (
     <span className={`whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-medium ${completed
@@ -245,11 +307,9 @@ function TabBar({ tabs, active, onChange }: { tabs: string[]; active: string; on
 
 export function SessionReportPage({
   sessionId,
-  topic,
   parentPreview,
 }: {
   sessionId: string;
-  topic: string;
   parentPreview: PathwayPreviewData | null;
 }) {
   const [tab, setTab] = useState<'Performance' | 'Students' | 'Preview'>('Performance');
@@ -286,6 +346,7 @@ export function SessionReportPage({
 
   return (
     <div>
+      <ReportFigures rows={reportRows} childSessions={children} />
       <TabBar tabs={tabs} active={tab} onChange={(t) => setTab(t as typeof tab)} />
 
       {tab === 'Performance' && (

From 6751150fd18d5fee374708ae7c86555d6d5c6c3a Mon Sep 17 00:00:00 2001
From: Adam Stankiewicz <agstanki@gmail.com>
Date: Sun, 23 Aug 2026 14:34:51 -0400
Subject: [PATCH 12/14] feat: wire Source Serif 4 into the student reading
 surfaces

Reading passages (markdown-card body, 17px/1.65) and the student's own
draft (draft-meter and writing-workshop textareas, 15px/1.65) move to the
serif per the type spec; surrounding UI chrome stays IBM Plex Sans.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/widgets/DraftMeter.tsx      | 2 +-
 src/components/widgets/MarkdownCard.tsx    | 4 +++-
 src/components/widgets/WritingWorkshop.tsx | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/widgets/DraftMeter.tsx b/src/components/widgets/DraftMeter.tsx
index 384cc935..1f5ba717 100644
--- a/src/components/widgets/DraftMeter.tsx
+++ b/src/components/widgets/DraftMeter.tsx
@@ -283,7 +283,7 @@ export function DraftMeter({ spec }: { spec: DraftMeterSpec }) {
           aria-labelledby={questionId}
           placeholder={spec.placeholder}
           rows={3}
-          className="mt-4 block min-h-[92px] w-full resize-y rounded-lg border border-input bg-transparent p-3.5 text-sm leading-[1.6] outline-none transition-colors placeholder:text-muted-foreground focus:border-ring focus:ring-1 focus:ring-ring"
+          className="mt-4 block min-h-[92px] w-full resize-y rounded-lg border border-input bg-transparent p-3.5 font-serif text-[15px] leading-[1.65] outline-none transition-colors placeholder:text-muted-foreground focus:border-ring focus:ring-1 focus:ring-ring"
         />
 
         <div className="mt-5 flex items-center gap-3.5">
diff --git a/src/components/widgets/MarkdownCard.tsx b/src/components/widgets/MarkdownCard.tsx
index daf29960..410c5b21 100644
--- a/src/components/widgets/MarkdownCard.tsx
+++ b/src/components/widgets/MarkdownCard.tsx
@@ -14,7 +14,9 @@ export function MarkdownCard({ spec, onComplete }: Props) {
       <div className="rounded-xl border border-border bg-card p-5 shadow-sm">
         <h2 className="mb-3 text-base font-semibold text-foreground">{spec.title}</h2>
 
-        <div className="flex flex-col gap-3 text-sm text-foreground leading-relaxed">
+        {/* Student reading passages are the one Source Serif surface:
+            17px/1.65 per the type spec. UI chrome around them stays sans. */}
+        <div className="flex flex-col gap-3 font-serif text-[17px] leading-[1.65] text-foreground">
           <ReactMarkdown
             remarkPlugins={[remarkGfm]}
             components={{
diff --git a/src/components/widgets/WritingWorkshop.tsx b/src/components/widgets/WritingWorkshop.tsx
index 7c98815a..d159e50c 100644
--- a/src/components/widgets/WritingWorkshop.tsx
+++ b/src/components/widgets/WritingWorkshop.tsx
@@ -172,7 +172,7 @@ export function WritingWorkshop({ spec, onComplete }: Props) {
           placeholder={spec.placeholder}
           rows={14}
           disabled={pending}
-          className="block min-h-[320px] w-full resize-y rounded-lg border border-input bg-transparent p-4 text-sm leading-[1.75] outline-none transition-colors placeholder:text-muted-foreground focus:border-ring focus:ring-1 focus:ring-ring disabled:opacity-60"
+          className="block min-h-[320px] w-full resize-y rounded-lg border border-input bg-transparent p-4 font-serif text-[15px] leading-[1.65] outline-none transition-colors placeholder:text-muted-foreground focus:border-ring focus:ring-1 focus:ring-ring disabled:opacity-60"
         />
       ) : (
         <div className="rounded-lg border border-border bg-card p-4">

From 1d695f24f67100f2132a0621fa1c4e226935f348 Mon Sep 17 00:00:00 2001
From: Adam Stankiewicz <agstanki@gmail.com>
Date: Sun, 23 Aug 2026 14:38:44 -0400
Subject: [PATCH 13/14] fix: the narrative's right column is the only
 in-progress view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

While a run streams, PathwayDocument (skeleton and streaming content alike)
no longer renders below the two-column BuildNarrative — design 1c makes the
narrative's right panel where the pathway forms, and the document the
after-the-run artifact. The completion strip picks up the specced footer
line: nothing assigned yet, rejected codes kept on the session record.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/PathwayBuilder.tsx          | 25 +++++++++++++---------
 src/components/pathway/PathwayDocument.tsx |  6 ++++++
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/components/PathwayBuilder.tsx b/src/components/PathwayBuilder.tsx
index ad81f138..b1146fc6 100644
--- a/src/components/PathwayBuilder.tsx
+++ b/src/components/PathwayBuilder.tsx
@@ -357,17 +357,22 @@ export function PathwayBuilder() {
         <PathwayCompletionStrip state={state} />
 
         {/* Design 1d: document + 316px rail. The rail carries assignment,
-            provenance, and coverage; the document stays the readable artifact. */}
-        <div className="lg:grid lg:grid-cols-[minmax(0,1fr)_316px] lg:gap-8">
-          <PathwayDocument
-            state={state}
-            onRegenerateStep={regenerateStep}
-            onEditPlan={editPlan}
-          />
-          <div className="mt-8">
-            <PlanRail state={state} gradeHint={gradeHint || undefined} />
+            provenance, and coverage; the document stays the readable artifact.
+            While a run streams, the BuildNarrative's right column above is
+            where the pathway forms (design 1c) — the document only exists
+            once the run settles, never as a parallel copy below it. */}
+        {!streaming && (
+          <div className="lg:grid lg:grid-cols-[minmax(0,1fr)_316px] lg:gap-8">
+            <PathwayDocument
+              state={state}
+              onRegenerateStep={regenerateStep}
+              onEditPlan={editPlan}
+            />
+            <div className="mt-8">
+              <PlanRail state={state} gradeHint={gradeHint || undefined} />
+            </div>
           </div>
-        </div>
+        )}
       </main>
     </div>
   );
diff --git a/src/components/pathway/PathwayDocument.tsx b/src/components/pathway/PathwayDocument.tsx
index 4fd2cb45..042332ba 100644
--- a/src/components/pathway/PathwayDocument.tsx
+++ b/src/components/pathway/PathwayDocument.tsx
@@ -452,6 +452,7 @@ export function PathwayCompletionStrip({ state }: { state: PathwayState }) {
 
   const stepCount = state.plan?.steps?.length ?? 0;
   const code = state.anchor?.standard.verified ? state.anchor.standard.code : null;
+  const rejectedCount = Object.values(state.verdicts).filter((ok) => !ok).length;
   const elapsedMs = state.startedAt !== null && state.finishedAt !== null ? state.finishedAt - state.startedAt : null;
 
   const summary = [
@@ -488,6 +489,11 @@ export function PathwayCompletionStrip({ state }: { state: PathwayState }) {
         <div className="min-w-0 flex-1">
           <p className="font-heading text-lg font-black text-balance">Your pathway is ready! 🎉</p>
           {summary && <p className="text-sm text-muted-foreground">{summary}</p>}
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            Nothing is assigned yet.
+            {rejectedCount > 0 &&
+              ` ${rejectedCount} rejected code${rejectedCount === 1 ? ' is' : 's are'} kept on the session record.`}
+          </p>
         </div>
       </div>
 

From b9c6c0fe5b22906c1a93986c9abe56c826fe6ff5 Mon Sep 17 00:00:00 2001
From: Adam Stankiewicz <agstanki@gmail.com>
Date: Sun, 23 Aug 2026 14:53:10 -0400
Subject: [PATCH 14/14] feat: remaining fidelity items from the 1d/1g/1h boards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Injected remediation steps cost no star, the frame shows their real
  "Let's revisit: …" title, and a reassurance line states both (1g).
- Student surfaces widen to the specced 940px.
- Editable document text shows the specced dashed underline on hover
  instead of a background wash; the step being regenerated is highlighted
  with an inset brand-fill edge (1d).
- MarkdownCard stops drawing its own card chrome and header — the
  ActivityFrame owns both at every render site (1h) — and the document's
  frame previews lead with the step title rather than the kind label.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/app/learn/page.tsx                        |  2 +-
 src/components/pathway/PathwayDocument.tsx    | 10 +++++--
 src/components/pathway/PathwayWalkthrough.tsx | 28 +++++++++++++++++--
 src/components/pathway/SharedPathwayView.tsx  |  2 +-
 src/components/widgets/MarkdownCard.tsx       |  6 ++--
 5 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/app/learn/page.tsx b/src/app/learn/page.tsx
index 20fd9d53..18dd6178 100644
--- a/src/app/learn/page.tsx
+++ b/src/app/learn/page.tsx
@@ -139,7 +139,7 @@ export default function LearnPage() {
 
   return (
     <div className="register-student min-h-dvh bg-background text-foreground">
-      <main className="mx-auto flex min-h-dvh max-w-2xl flex-col items-center gap-6 px-5 py-10">
+      <main className="mx-auto flex min-h-dvh max-w-235 flex-col items-center gap-6 px-5 py-10">
         {!session && (
           <AnimatePresence mode="wait">
             <motion.h1
diff --git a/src/components/pathway/PathwayDocument.tsx b/src/components/pathway/PathwayDocument.tsx
index 042332ba..6584ad47 100644
--- a/src/components/pathway/PathwayDocument.tsx
+++ b/src/components/pathway/PathwayDocument.tsx
@@ -701,7 +701,12 @@ const StepCard = memo(function StepCard({
     // Quiet on purpose: the waypoint dot and the pill below already say which
     // kind of step this is — a colored border on top of both just repeats
     // the same signal a third time and reads as noise, not information.
-    <div className="overflow-hidden rounded-2xl bg-card shadow-sm ring-1 ring-foreground/10 transition-colors">
+    <div
+      className={cn(
+        'overflow-hidden rounded-2xl bg-card shadow-sm ring-1 ring-foreground/10 transition-colors',
+        regenerating && 'shadow-[inset_3px_0_0_var(--brand-fill)]',
+      )}
+    >
       <div className="flex flex-col gap-1.5 px-4 py-3.5 sm:flex-row sm:gap-4">
         <span className="shrink-0">
           <span
@@ -767,6 +772,7 @@ const StepCard = memo(function StepCard({
             <ActivityFrame
               kind={widgetKindOfSpec(widget) ?? step?.widgetKind ?? 'activity'}
               title={
+                step?.title ??
                 (step?.widgetKind && WIDGET_KIND_LABEL[step.widgetKind]) ??
                 'Interactive activity'
               }
@@ -893,7 +899,7 @@ function EditableText({
         setEditing(true);
       }}
       className={cn(
-        'cursor-text rounded text-left outline-none transition-colors hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-ring/50',
+        'cursor-text border-b-2 border-dashed border-transparent text-left outline-none transition-colors hover:border-border focus-visible:ring-2 focus-visible:ring-ring/50',
         as === 'p' && 'block w-full',
         className,
       )}
diff --git a/src/components/pathway/PathwayWalkthrough.tsx b/src/components/pathway/PathwayWalkthrough.tsx
index 1602d409..8db8ed75 100644
--- a/src/components/pathway/PathwayWalkthrough.tsx
+++ b/src/components/pathway/PathwayWalkthrough.tsx
@@ -63,6 +63,13 @@ function widgetKindOf(widget: unknown): string | null {
     : null;
 }
 
+/** An injected remediation widget carries its own "Let's revisit: …" title. */
+function widgetTitleOf(widget: unknown): string | null {
+  return widget && typeof widget === 'object' && 'title' in widget && typeof widget.title === 'string'
+    ? widget.title
+    : null;
+}
+
 function stepKey(sessionId: string) { return `pathway:step:${sessionId}`; }
 function doneKey(sessionId: string) { return `pathway:done:${sessionId}`; }
 
@@ -159,9 +166,19 @@ export function PathwayWalkthrough({
   const originalStepIndex = (index: number) =>
     index - injectedIndexList.filter((i) => i < index).length;
 
+  // Same ref idiom as currentStepRef: advanceStep runs from event handlers,
+  // so reading the latest injected slots through a ref keeps its identity
+  // stable without depending on a per-render derived array.
+  const injectedIndexRef = useRef(injectedIndexList);
+  useEffect(() => { injectedIndexRef.current = injectedIndexList; });
+
   const advanceStep = useCallback(() => {
     setViewingStep(null);
-    setStars((n) => n + 1);
+    // Injected remediation steps cost no star (design 1g) — help, not a
+    // penalty, and the star total still matches the pathway's own length.
+    if (!injectedIndexRef.current.includes(currentStepRef.current)) {
+      setStars((n) => n + 1);
+    }
     telemetry.flush();
     setCurrentStep((n) => {
       const next = n + 1;
@@ -346,7 +363,7 @@ export function PathwayWalkthrough({
                 kind={currentKind ?? 'activity'}
                 title={
                   isInjectedStep(displayStep)
-                    ? 'Extra practice'
+                    ? (widgetTitleOf(currentWidget) ?? 'Extra practice')
                     : (session.steps[originalStepIndex(displayStep)]?.title ?? `Activity ${displayStep + 1}`)
                 }
                 state={
@@ -374,6 +391,13 @@ export function PathwayWalkthrough({
                 </WidgetTelemetryProvider>
               </ActivityFrame>
 
+              {!isReviewing && isInjectedStep(displayStep) && (
+                <p className="mt-2 text-center text-xs text-muted-foreground">
+                  This one doesn&rsquo;t cost you a star. Your pathway is waiting
+                  exactly where you left it.
+                </p>
+              )}
+
               {/* External button for widgets that fire onComplete silently (no internal CTA),
                   and for the three widgets that never fire onComplete at all. The reason a
                   button is live or waiting is stated, not implied. */}
diff --git a/src/components/pathway/SharedPathwayView.tsx b/src/components/pathway/SharedPathwayView.tsx
index cdfadd46..d772a219 100644
--- a/src/components/pathway/SharedPathwayView.tsx
+++ b/src/components/pathway/SharedPathwayView.tsx
@@ -41,7 +41,7 @@ export function SharedPathwayView({ session }: { session: WalkthroughSession })
 
   return (
     <div className="register-student min-h-dvh bg-background text-foreground">
-      <main className="mx-auto flex min-h-dvh max-w-2xl flex-col items-center gap-6 px-5 py-10">
+      <main className="mx-auto flex min-h-dvh max-w-235 flex-col items-center gap-6 px-5 py-10">
         <p className="text-center font-heading text-lg font-black text-balance">{session.topic}</p>
 
         <PathwayWalkthrough session={session} studentId={studentId} />
diff --git a/src/components/widgets/MarkdownCard.tsx b/src/components/widgets/MarkdownCard.tsx
index 410c5b21..2cb13fff 100644
--- a/src/components/widgets/MarkdownCard.tsx
+++ b/src/components/widgets/MarkdownCard.tsx
@@ -11,9 +11,9 @@ type Props = { spec: MarkdownCardSpec; onComplete?: (correct: boolean) => void }
 export function MarkdownCard({ spec, onComplete }: Props) {
   return (
     <div className="flex flex-col gap-4">
-      <div className="rounded-xl border border-border bg-card p-5 shadow-sm">
-        <h2 className="mb-3 text-base font-semibold text-foreground">{spec.title}</h2>
-
+      {/* No card chrome or header of its own — the ActivityFrame around every
+          render site already draws both (design 1h). The body is the reading. */}
+      <div className="p-1">
         {/* Student reading passages are the one Source Serif surface:
             17px/1.65 per the type spec. UI chrome around them stays sans. */}
         <div className="flex flex-col gap-3 font-serif text-[17px] leading-[1.65] text-foreground">