Merge lh-ui refinement wave (feat/ui-polish @ 8163437) into main
11 commits on fbeca36: minimal-color rounds 1-2 (phase color retired, the braille spinner is the one working indicator; the chip is label-only), typography rounds 1-5 (three-font rule enforced — CMU titles, Source Sans session titles, JetBrains mono; snapped type ladder in globals.css with the xxs rung merged into xs; lh-input caret at the font-metric floor; session titles at prose size, message counts and active-row weight dropped, ISO dates), header rounds 6/6b/6c/6d (60px top bar aligned to the sidebar LH band; the open-sidebar toggle matches the close glyph at size-4 both ways; SidebarToggle always-mounted with a lockstep animated slot — no more one-frame title jump; title at text-3xl). Semantic change folded in: `busy` in the chats list now means exactly "a teach turn is in flight" — background jobs no longer spin the session row (the sidebar's Background agents section is their channel). Merge fallout fixed in the merge: components/graph-coverage.tsx (main's coverage panel) held the last three text-xxs uses; with the rung deleted they silently lost their size — mechanically swapped to text-xs, matching lh-ui's own swap in graph-context-marker.tsx. No file overlap with main's waves since fbeca36 (extraction coverage, lh-graph merge, world-scale bake) — clean auto-merge. Gates: typecheck, eslint, 496/496 tests, build. Live-verified on the dev server: 60px header with 32px CMU title, label-only chip, snapped ladder active (--lh-prose-size 16px, no --text-xxs rule anywhere), sidebar rows with ISO dates, animated sidebar toggle with no header jump.
This commit is contained in:
amosblomqvist
@@ -1,14 +1,17 @@
|
||||
import { createChat, isTurnRunning, listChats, listJobs, titleFromPrompt } from "@/src/server";
|
||||
import { createChat, isTurnRunning, listChats, titleFromPrompt } from "@/src/server";
|
||||
import type { ChatListItem } from "@/src/core";
|
||||
|
||||
/** The session picker's list: record-derived summaries (phase, pending
|
||||
* question) + live liveness — a running turn OR a background job marks
|
||||
* the session busy (contracts.ts ChatListItem; the store can't see
|
||||
* liveness, the route is the merge point). */
|
||||
* question) + live liveness — a running turn marks the session busy
|
||||
* (contracts.ts ChatListItem; the store can't see liveness, the route is
|
||||
* the merge point). Owner, minimal-color round: background jobs NO LONGER
|
||||
* count — the sidebar's Background agents section is their channel now
|
||||
* (a running spinner per row would double-signal them), so busy means
|
||||
* exactly "a teach turn is in flight". */
|
||||
export async function GET() {
|
||||
const chats: ChatListItem[] = listChats().map((c) => ({
|
||||
...c,
|
||||
busy: isTurnRunning(c.id) || listJobs(c.id).some((j) => j.status === "running"),
|
||||
busy: isTurnRunning(c.id),
|
||||
}));
|
||||
return Response.json({ chats });
|
||||
}
|
||||
|
||||
+64
-41
@@ -40,7 +40,12 @@
|
||||
/* Emphasis coloring in teaching prose — ready for the settings UI. */
|
||||
--lh-ink-strong: #c96b4a;
|
||||
--lh-ink-italic: #6fa9d6;
|
||||
--lh-prose-size: 16.5px;
|
||||
/* THE READING SIZE = the ladder's 16px rung (--text-lg). Can't be
|
||||
var()-linked: @theme inline inlines literals into utilities without
|
||||
emitting runtime vars — so this is the one documented duplication:
|
||||
change one, change both. (owner, typography round 4: snapped from
|
||||
the reskin's hand-tuned 16.5 to the ladder's 16.) */
|
||||
--lh-prose-size: 16px;
|
||||
--lh-prose-leading: 1.5;
|
||||
}
|
||||
|
||||
@@ -67,7 +72,12 @@
|
||||
--ring: #8d8d8d;
|
||||
--lh-ink-strong: #c96b4a;
|
||||
--lh-ink-italic: #6fa9d6;
|
||||
--lh-prose-size: 16.5px;
|
||||
/* THE READING SIZE = the ladder's 16px rung (--text-lg). Can't be
|
||||
var()-linked: @theme inline inlines literals into utilities without
|
||||
emitting runtime vars — so this is the one documented duplication:
|
||||
change one, change both. (owner, typography round 4: snapped from
|
||||
the reskin's hand-tuned 16.5 to the ladder's 16.) */
|
||||
--lh-prose-size: 16px;
|
||||
--lh-prose-leading: 1.5;
|
||||
}
|
||||
|
||||
@@ -82,14 +92,23 @@
|
||||
|
||||
@theme inline {
|
||||
/* Fonts: chrome = JetBrains Mono, prose = Source Sans 3, titles = CMU
|
||||
Serif bold. The JetBrains/SourceSans variables attach in app/layout.tsx. */
|
||||
Serif bold. The JetBrains/SourceSans variables attach in app/layout.tsx.
|
||||
(owner, typography round) The Tailwind defaults are ALIASED to the app
|
||||
fonts: `font-mono`/`font-sans` utilities would otherwise fall to the
|
||||
SYSTEM stacks — a fourth font the app never chose — and streamdown's
|
||||
code-block chrome + mermaid-error + demo-card all use them. */
|
||||
--font-ui: var(--font-jetbrains), ui-monospace, SFMono-Regular, monospace;
|
||||
--font-prose: var(--font-sans3), ui-sans-serif, system-ui, sans-serif;
|
||||
--font-title: "lh-cmu", serif;
|
||||
--font-mono: var(--font-jetbrains), ui-monospace, SFMono-Regular, monospace;
|
||||
--font-sans: var(--font-sans3), ui-sans-serif, system-ui, sans-serif;
|
||||
/* The modular type ladder — each size carries its own line-height.
|
||||
Component sizes must pull from this ladder. */
|
||||
--text-xxs: 10px;
|
||||
--text-xxs--line-height: 1.4;
|
||||
Component sizes must pull from this ladder. (owner, typography
|
||||
round 4: the 10px rung is merged into 11 — one pixel apart was a
|
||||
distinction with no visible difference, and 10px sits at the mono
|
||||
legibility floor; quiet labels get their quiet from color +
|
||||
tracking, not a notch of size. Reading prose = the 16px rung via
|
||||
--lh-prose-size.) */
|
||||
--text-xs: 11px;
|
||||
--text-xs--line-height: 1.4;
|
||||
--text-sm: 12.5px;
|
||||
@@ -158,6 +177,19 @@ body {
|
||||
color: var(--lh-ink-italic);
|
||||
}
|
||||
|
||||
/* lh-input (owner, typography round 2): lh-prose's 1.5 READING leading
|
||||
makes typing carets tower over the glyphs — the caret fills the line
|
||||
box (24px at 16px text, ~2× the glyph height). Inputs are not
|
||||
paragraphs: a tighter 1.25 leading brings the caret to the font-metric
|
||||
floor (~20px, as close to the glyphs as Chromium will draw it) while
|
||||
wrapped lines in growing textareas still read fine. Rendered prose keeps
|
||||
1.5 — the two share family and size, they differ only in leading. */
|
||||
.lh-input {
|
||||
font-family: var(--font-prose);
|
||||
font-size: var(--lh-prose-size);
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
/* Thin dark native scrollbar (app-wide): dark thumb, transparent track. */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
@@ -232,53 +264,44 @@ body {
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* Session status — phase colors + status dots
|
||||
* (picker strips, header chip, transcript dividers: one language)
|
||||
* Session status — the braille spinner (the one working indicator)
|
||||
* ============================================================ */
|
||||
|
||||
/* Phase colors: blue = probing, violet = planning, green = teaching.
|
||||
Tuned per theme (light needs darker, dark lighter). These color the
|
||||
session dots, header chip and transcript dividers — one language. */
|
||||
:root {
|
||||
--phase-probe: oklch(0.55 0.17 253);
|
||||
--phase-plan: oklch(0.54 0.19 300);
|
||||
--phase-teach: oklch(0.55 0.14 160);
|
||||
}
|
||||
/* (owner, minimal-color round) Phase color-coding is RETIRED: phases only
|
||||
advance (every session ends in Teaching), so phase-as-signal was
|
||||
decoration; the --phase-* tokens and every phase-dot state are gone.
|
||||
What state deserved — "a turn is in flight" — is carried by MOTION
|
||||
alone: the terminal braille spinner (components/braille-spinner.tsx),
|
||||
monochrome, existing only while true. */
|
||||
|
||||
.dark {
|
||||
--phase-probe: oklch(0.72 0.13 250);
|
||||
--phase-plan: oklch(0.72 0.14 300);
|
||||
--phase-teach: oklch(0.74 0.12 160);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-phase-probe: var(--phase-probe);
|
||||
--color-phase-plan: var(--phase-plan);
|
||||
--color-phase-teach: var(--phase-teach);
|
||||
}
|
||||
|
||||
/* Session dot motion (picker): the ONLY animated state is "teacher is
|
||||
working" — a quiet phase-colored breathing. Pending questions are the
|
||||
dominant resting state and stay perfectly still (solid dot). */
|
||||
@keyframes lh-dot-breathe {
|
||||
/* One keyframes, all ten frames: each frame <g> holds opacity 1 for its
|
||||
10% slice of the 800ms cycle and 0 elsewhere; frames stagger via
|
||||
positive animation-delay (frame k starts at k×80ms). Static contexts
|
||||
(SSR, reduced motion) show frame 0 — see the base rules below. */
|
||||
@keyframes braille-frame {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.35;
|
||||
transform: scale(0.75);
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
10.001%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.lh-dot-breathe {
|
||||
animation: lh-dot-breathe 1.4s ease-in-out infinite;
|
||||
.braille-frame {
|
||||
animation: braille-frame 800ms linear infinite;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Static fallback: frame 0 (⠋) is the glyph a non-animated context shows. */
|
||||
.braille-frame[data-frame="0"] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.lh-dot-breathe {
|
||||
.braille-frame {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -274,7 +274,7 @@ export function ActivitySection({ feed: feedProp }: { feed?: ActivityFeed }) {
|
||||
// alone (the cost span is population, not decoration).
|
||||
return (
|
||||
<section data-testid="activity-section" className="border-t border-border px-3 pb-3 pt-2">
|
||||
<div className="mb-1 flex items-center gap-1.5 text-xxs uppercase tracking-widest text-muted-foreground/70">
|
||||
<div className="mb-1 flex items-center gap-1.5 text-xs uppercase tracking-widest text-muted-foreground/70">
|
||||
<ActivityIcon className="size-3" />
|
||||
Background agents
|
||||
{blobs.length > 0 && (
|
||||
|
||||
@@ -72,7 +72,7 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
|
||||
)}
|
||||
>
|
||||
{/* Owner round 8: a touch smaller than the text (size-4→size-3.5,
|
||||
≈14px vs the 16.5px row) while centered. */}
|
||||
≈14px vs the 16px row) while centered. */}
|
||||
{(key || sel) && <GlyphMark kind={key ? "check" : "x"} className="size-3.5" />}
|
||||
</span>
|
||||
)}
|
||||
@@ -101,7 +101,7 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
|
||||
|
||||
{answer.note && (
|
||||
<div data-testid="your-thinking" className="mt-3 border-l-2 border-primary/40 pl-3">
|
||||
<span className="mb-0.5 block text-xxs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
<span className="mb-0.5 block text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Your thinking
|
||||
</span>
|
||||
<span className="lh-prose block whitespace-pre-wrap text-foreground/90">{answer.note}</span>
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
* THE BRAILLE SPINNER (owner, minimal-color round): the one working-state
|
||||
* indicator, in the terminal's own glyph language. Pure function + CSS —
|
||||
* no JS frame timer, no React re-render per frame; each frame is a tiny
|
||||
* <g> whose opacity is compositor-animated, so the cost is below the old
|
||||
* breathing dot's (which animated opacity AND transform).
|
||||
*
|
||||
* Geometry: the classic cli-spinner sequence (⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏, 10 frames,
|
||||
* 80ms each — 800ms cycle) as EXACT dot bitmaps in a 2×4 braille cell
|
||||
* (dots 1-3 = left column, 4-6 = right). One shared keyframes (globals.css
|
||||
* .braille-frame) holds each frame visible for its 10% slice; frames
|
||||
* stagger via positive animation-delay, so frame 0 leads from first paint.
|
||||
*
|
||||
* Static fallback (SSR pre-hydrate, prefers-reduced-motion, print): frame
|
||||
* 0 (⠋) shows — a legible glyph, not a blank. Motion is honest here: it
|
||||
* exists only while a turn is in flight and vanishes the moment it ends.
|
||||
*/
|
||||
const FRAMES: ReadonlyArray<{ dots: ReadonlyArray<readonly [number, number]> }> = [
|
||||
{ dots: [[1, 1], [1, 3], [3, 1]] },
|
||||
{ dots: [[1, 1], [3, 1], [3, 3]] },
|
||||
{ dots: [[1, 1], [3, 1], [3, 3], [3, 5]] },
|
||||
{ dots: [[3, 1], [3, 3], [3, 5]] },
|
||||
{ dots: [[1, 5], [3, 1], [3, 3], [3, 5]] },
|
||||
{ dots: [[1, 5], [3, 3], [3, 5]] },
|
||||
{ dots: [[1, 3], [1, 5], [3, 5]] },
|
||||
{ dots: [[1, 1], [1, 3], [1, 5], [3, 5]] },
|
||||
{ dots: [[1, 1], [1, 3], [1, 5]] },
|
||||
{ dots: [[1, 1], [1, 3], [1, 5], [3, 1]] },
|
||||
];
|
||||
|
||||
/** The animation constants (mirrors globals.css .braille-frame). */
|
||||
export const SPINNER_FRAME_MS = 80;
|
||||
export const SPINNER_FRAMES = FRAMES.length;
|
||||
|
||||
export function BrailleSpinner({
|
||||
className,
|
||||
label = "Teacher is working",
|
||||
}: {
|
||||
/** Sizing/position classes; height drives the scale (width is the cell's 1:2 aspect). */
|
||||
className?: string;
|
||||
/** The accessible name of the state this spinner announces. */
|
||||
label?: string;
|
||||
}) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 4 8"
|
||||
data-testid="braille-spinner"
|
||||
role="status"
|
||||
aria-label={label}
|
||||
className={cn("h-3 w-auto shrink-0 text-foreground", className)}
|
||||
>
|
||||
{FRAMES.map((frame, k) => (
|
||||
<g
|
||||
key={k}
|
||||
className="braille-frame"
|
||||
data-frame={k}
|
||||
style={{ animationDelay: `${k * SPINNER_FRAME_MS}ms` }}
|
||||
>
|
||||
{frame.dots.map(([cx, cy]) => (
|
||||
<circle key={`${cx}-${cy}`} cx={cx} cy={cy} r={0.8} className="fill-current" />
|
||||
))}
|
||||
</g>
|
||||
))}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
+9
-5
@@ -584,12 +584,16 @@ export function Chat({
|
||||
{/* The top bar is its own block (owner, top-fade round 4): in flow
|
||||
above the scroller on the plain page background — no gradient. Its
|
||||
bottom outline (border-b border-border) matches the one that
|
||||
separates the left sidebar — same width, same color (owner, r5). h-10, not py-2: the toggle (a size-9 icon button)
|
||||
renders only while the sidebar is CLOSED — an auto-height row
|
||||
would collapse when it disappears and slide the title + chip up. */}
|
||||
<header className="flex h-10 items-center gap-3 border-b border-border px-3">
|
||||
separates the left sidebar — same width, same color (owner, r5).
|
||||
h-15 (60px), not py-2: the toggle (a size-9 icon button) renders
|
||||
only while the sidebar is CLOSED — an auto-height row would
|
||||
collapse when it disappears and slide the title + chip up.
|
||||
60px is an ALIGNMENT, not just a size: it equals the sidebar's
|
||||
LH wordmark band, so the header's border-b continues that
|
||||
band's bottom edge as one line across the app (owner, round 6). */}
|
||||
<header className="flex h-15 items-center gap-3 border-b border-border px-3">
|
||||
<SidebarToggle />
|
||||
<div className="min-w-0 flex-1 truncate font-title text-2xl tracking-tight">{title}</div>
|
||||
<div className="min-w-0 flex-1 truncate font-title text-3xl tracking-tight">{title}</div>
|
||||
{/* The plan chip (owner, plan-placement round): session-level
|
||||
structure beside the phase chip — access to the full-DAG popup
|
||||
at every width; the marginalia is the wide-screen glance view. */}
|
||||
|
||||
@@ -59,7 +59,7 @@ export function Composer({
|
||||
placeholder="Ask, answer, or steer the lesson…"
|
||||
autoFocus={autoFocus}
|
||||
rows={1}
|
||||
className="field-sizing-content lh-prose max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
|
||||
className="field-sizing-content lh-input max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
|
||||
/>
|
||||
{verdict && !busy ? (
|
||||
// The plan verdict (docs/probe-teach-split.md §4): accept
|
||||
|
||||
@@ -91,7 +91,7 @@ export function GraphContextList({ data }: { data: GraphContextData }): ReactNod
|
||||
<li key={p.id} className="flex items-baseline gap-2">
|
||||
<span className="shrink-0 tabular-nums text-muted-foreground">{i + 1}.</span>
|
||||
{p.level && (
|
||||
<span className="shrink-0 rounded bg-foreground/10 px-1 py-0.5 text-xxs text-muted-foreground">
|
||||
<span className="shrink-0 rounded bg-foreground/10 px-1 py-0.5 text-xs text-muted-foreground">
|
||||
{p.level}
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -135,7 +135,7 @@ export function CoveragePanel({
|
||||
<span className="text-xs font-medium uppercase tracking-widest text-muted-foreground/70">
|
||||
Extraction coverage
|
||||
</span>
|
||||
<span className="text-xxs text-muted-foreground">uncovered first</span>
|
||||
<span className="text-xs text-muted-foreground">uncovered first</span>
|
||||
</div>
|
||||
{!anyUncovered && (
|
||||
<p className="px-1 py-2 text-xs text-muted-foreground">
|
||||
@@ -156,7 +156,7 @@ function CoverageRow({ chat, busy, onExtract }: { chat: CoverageChat; busy: bool
|
||||
<div className="flex items-center gap-2 rounded-lg px-1 py-1.5 hover:bg-accent/50" data-testid="coverage-row">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-xs text-foreground">{chat.title}</div>
|
||||
<div className="flex items-baseline gap-1.5 text-xxs text-muted-foreground">
|
||||
<div className="flex items-baseline gap-1.5 text-xs text-muted-foreground">
|
||||
{busy ? (
|
||||
<span className="flex items-center gap-1">
|
||||
<Loader2Icon className="size-3 animate-spin" /> extracting…
|
||||
@@ -181,7 +181,7 @@ function CoverageRow({ chat, busy, onExtract }: { chat: CoverageChat; busy: bool
|
||||
type="button"
|
||||
disabled={busy || chat.uncoveredTokens === 0}
|
||||
onClick={onExtract}
|
||||
className="shrink-0 rounded-lg border px-2 py-1 text-xxs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent"
|
||||
className="shrink-0 rounded-lg border px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent"
|
||||
>
|
||||
{busy ? "Running" : "Extract"}
|
||||
</button>
|
||||
|
||||
+1
-1
@@ -91,7 +91,7 @@ export function Home() {
|
||||
placeholder="What do you want to learn?"
|
||||
autoFocus
|
||||
rows={1}
|
||||
className="field-sizing-content lh-prose max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
|
||||
className="field-sizing-content lh-input max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
|
||||
@@ -190,7 +190,7 @@ export function ModelControl({
|
||||
className="flex items-center gap-1.5 rounded-full border border-border/60 bg-card/70 px-2.5 py-1 transition-colors hover:border-border hover:bg-muted"
|
||||
>
|
||||
<span className="text-card-foreground">{effectiveId ? prettyModel(effectiveId) : "—"}</span>
|
||||
<span aria-hidden className="text-xxs text-muted-foreground">▾</span>
|
||||
<span aria-hidden className="text-xs text-muted-foreground">▾</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -208,7 +208,7 @@ export function ModelControl({
|
||||
<span className="text-card-foreground">
|
||||
{effectiveLevel === undefined ? "—" : (LEVEL_LABEL[effectiveLevel] ?? effectiveLevel)}
|
||||
</span>
|
||||
<span aria-hidden className="text-xxs text-muted-foreground">▾</span>
|
||||
<span aria-hidden className="text-xs text-muted-foreground">▾</span>
|
||||
</button>
|
||||
|
||||
{open === "model" && (
|
||||
@@ -222,7 +222,7 @@ export function ModelControl({
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search models…"
|
||||
className="lh-prose mb-1.5 w-full rounded-lg border bg-background px-2 py-1.5 text-foreground outline-none focus:ring-1 focus:ring-ring"
|
||||
className="lh-input mb-1.5 w-full rounded-lg border bg-background px-2 py-1.5 text-foreground outline-none focus:ring-1 focus:ring-ring"
|
||||
/>
|
||||
{error && <div className="mb-1.5 text-destructive">{error}</div>}
|
||||
{!catalog && (
|
||||
@@ -267,7 +267,7 @@ export function ModelControl({
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="mt-1 border-t px-2 pt-1.5 text-xxs text-muted-foreground">
|
||||
<div className="mt-1 border-t px-2 pt-1.5 text-xs text-muted-foreground">
|
||||
Applies to the next turn · background agents stay config-pinned
|
||||
</div>
|
||||
</div>
|
||||
@@ -299,7 +299,7 @@ export function ModelControl({
|
||||
</button>
|
||||
))}
|
||||
{error && <div className="mt-1 text-destructive">{error}</div>}
|
||||
<div className="mt-1 border-t px-2 pt-1.5 text-xxs text-muted-foreground">
|
||||
<div className="mt-1 border-t px-2 pt-1.5 text-xs text-muted-foreground">
|
||||
Levels this model actually supports
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -77,9 +77,11 @@ export function DraftShell({
|
||||
return (
|
||||
<div className="flex h-dvh">
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
<header className="relative flex h-10 items-center gap-3 px-3">
|
||||
{/* h-15 (60px) matches the chat header and the sidebar's LH wordmark
|
||||
band (owner, round 6). */}
|
||||
<header className="relative flex h-15 items-center gap-3 px-3">
|
||||
<SidebarToggle />
|
||||
<div className="min-w-0 flex-1 truncate font-title text-2xl tracking-tight">New session</div>
|
||||
<div className="min-w-0 flex-1 truncate font-title text-3xl tracking-tight">New session</div>
|
||||
<PhaseChip phase="probe" />
|
||||
</header>
|
||||
|
||||
|
||||
@@ -1,19 +1,27 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { Phase3 } from "@/src/core";
|
||||
|
||||
/**
|
||||
* The in-session phase presentation — the explicit face of what the picker
|
||||
* shows as a color strip (one color system everywhere, globals.css
|
||||
* --phase-*): the header chip next to the session title, and the dotted
|
||||
* boundary rule the transcript draws where the session moves into a new
|
||||
* phase. Replaces the old inline plan-divider (artifact registry): the
|
||||
* boundary is a MESSAGE-level seam, so chat.tsx renders it at the message
|
||||
* where the phase changes, not inside a tool part.
|
||||
* The in-session phase presentation (owner, minimal-color round —
|
||||
* monochrome now): the header chip next to the session title, and the
|
||||
* dotted boundary rule the transcript draws where the session moves into a
|
||||
* new phase. Phase COLOR is retired app-wide (phases only advance, so
|
||||
* color-as-signal was decoration); the label text carries the phase, and
|
||||
* the chip's old dot slot is repurposed for the braille spinner while a
|
||||
* turn is in flight — motion is the honest state signal. Replaces the old
|
||||
* inline plan-divider (artifact registry): the boundary is a MESSAGE-level
|
||||
* seam, so chat.tsx renders it at the message where the phase changes, not
|
||||
* inside a tool part.
|
||||
*
|
||||
* Quiet register (matches the old divider): hairline rules, small chips —
|
||||
* never a banner. Probe never renders a divider: phases only advance, so
|
||||
* probe is the start of the transcript and "Planning"/"Teaching" are the two
|
||||
* visible seams.
|
||||
*
|
||||
* Owner, minimal-color round 2: the chip is LABEL-ONLY, deliberately — a
|
||||
* working-state spinner was tried here and rejected: the pill's curve and
|
||||
* the square braille cell fought for space, and the chat surface already
|
||||
* shows in-flight work (thinking shimmer, the dock). The chip states the
|
||||
* phase; work-state is the sidebar row's spinner.
|
||||
*/
|
||||
|
||||
/** Header-chip labels: the phases as the learner thinks of them. */
|
||||
@@ -23,42 +31,28 @@ const CHIP_LABEL: Record<Phase3, string> = {
|
||||
teach: "Teaching",
|
||||
};
|
||||
|
||||
const PHASE_DOT: Record<Phase3, string> = {
|
||||
probe: "bg-phase-probe",
|
||||
plan: "bg-phase-plan",
|
||||
teach: "bg-phase-teach",
|
||||
};
|
||||
|
||||
/** The header chip: a phase-colored dot + label next to the session title. */
|
||||
/** The header chip: the phase label, monochrome — label-only by design
|
||||
* (see the component note: the pill's curve suits text, not glyphs). */
|
||||
export function PhaseChip({ phase }: { phase: Phase3 }) {
|
||||
return (
|
||||
<span
|
||||
data-testid="phase-chip"
|
||||
data-phase={phase}
|
||||
title={`Session phase: ${CHIP_LABEL[phase]}`}
|
||||
className="flex shrink-0 items-center gap-1.5 rounded-full border border-border/80 px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground"
|
||||
className="flex shrink-0 items-center rounded-full border border-border/80 px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground"
|
||||
>
|
||||
<span className={cn("size-1.5 rounded-full", PHASE_DOT[phase])} aria-hidden />
|
||||
{CHIP_LABEL[phase]}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** Divider rule + chip colors per phase (probe never reaches here). */
|
||||
const DIVIDER_RULE: Partial<Record<Phase3, string>> = {
|
||||
plan: "border-phase-plan/50",
|
||||
teach: "border-phase-teach/50",
|
||||
};
|
||||
const DIVIDER_TEXT: Partial<Record<Phase3, string>> = {
|
||||
plan: "border-phase-plan/50 text-phase-plan",
|
||||
teach: "border-phase-teach/50 text-phase-teach",
|
||||
};
|
||||
|
||||
/**
|
||||
* The transcript boundary: a color-coded dotted rule at the message where
|
||||
* the session enters `phase`. The plan seam carries its node count ("Plan ·
|
||||
* 4 nodes"); teaching is just the label. Null for probe (defensive — the
|
||||
* fold never emits a probe transition after the start).
|
||||
* The transcript boundary: a monochrome dotted rule at the message where
|
||||
* the session enters `phase` (owner, minimal-color round — the label
|
||||
* carries the transition; the phase color never did). The plan seam
|
||||
* carries its node count ("Plan · 4 nodes"); teaching is just the label.
|
||||
* Null for probe (defensive — the fold never emits a probe transition
|
||||
* after the start).
|
||||
*/
|
||||
export function PhaseDivider({ phase, nodeCount }: { phase: Phase3; nodeCount?: number }) {
|
||||
if (phase === "probe") return null;
|
||||
@@ -68,16 +62,11 @@ export function PhaseDivider({ phase, nodeCount }: { phase: Phase3; nodeCount?:
|
||||
: CHIP_LABEL[phase];
|
||||
return (
|
||||
<div className="my-4 flex w-full items-center gap-3" data-testid={`phase-divider-${phase}`}>
|
||||
<span className={cn("h-0 flex-1 border-t-2 border-dotted", DIVIDER_RULE[phase])} aria-hidden />
|
||||
<span
|
||||
className={cn(
|
||||
"rounded-full border px-2.5 py-0.5 text-xs font-medium uppercase tracking-wide",
|
||||
DIVIDER_TEXT[phase],
|
||||
)}
|
||||
>
|
||||
<span className="h-0 flex-1 border-t-2 border-dotted border-border/50" aria-hidden />
|
||||
<span className="rounded-full border border-border/80 px-2.5 py-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
{label}
|
||||
</span>
|
||||
<span className={cn("h-0 flex-1 border-t-2 border-dotted", DIVIDER_RULE[phase])} aria-hidden />
|
||||
<span className="h-0 flex-1 border-t-2 border-dotted border-border/50" aria-hidden />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -192,8 +192,9 @@ export const GLOW_BLUR = 5;
|
||||
export const GLOW_REACH = GLOW_MARGIN + 3 * GLOW_BLUR;
|
||||
/** Node titles render at text-xs (12.5px) in svg units. The in-chat block
|
||||
* scales up to fill the column but NEVER past the chat prose size
|
||||
* (--lh-prose-size, 16.5px) — the width cap that makes that hold. */
|
||||
export const TEXT_CAP_SCALE = 16.5 / 12.5;
|
||||
* (--lh-prose-size, 16px — the ladder's reading rung) — the width cap
|
||||
* that makes that hold. */
|
||||
export const TEXT_CAP_SCALE = 16 / 12.5;
|
||||
|
||||
// ─── The owner's arrowhead (plan-graph round 5) ──────────────────────────────
|
||||
|
||||
@@ -808,7 +809,7 @@ export function PlanPopup({ messages, onClose }: { messages: readonly PopupMessa
|
||||
/>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between p-2">
|
||||
<span className="text-xxs text-muted-foreground/60">Drag to pan · scroll to zoom</span>
|
||||
<span className="text-xs text-muted-foreground/60">Drag to pan · scroll to zoom</span>
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -307,7 +307,7 @@ function QuestionDockForm({
|
||||
)}
|
||||
>
|
||||
{isSel && (
|
||||
<span className={cn(qd.mode === "multi-select" ? "text-xxs" : "size-1.5 rounded-full bg-current")}>
|
||||
<span className={cn(qd.mode === "multi-select" ? "text-xs" : "size-1.5 rounded-full bg-current")}>
|
||||
{qd.mode === "multi-select" ? "✓" : ""}
|
||||
</span>
|
||||
)}
|
||||
@@ -373,7 +373,7 @@ function QuestionDockForm({
|
||||
)}
|
||||
>
|
||||
{sel.otherSelected && (
|
||||
<span className={cn(qd.mode === "multi-select" ? "text-xxs" : "size-1.5 rounded-full bg-current")}>
|
||||
<span className={cn(qd.mode === "multi-select" ? "text-xs" : "size-1.5 rounded-full bg-current")}>
|
||||
{qd.mode === "multi-select" ? "✓" : ""}
|
||||
</span>
|
||||
)}
|
||||
@@ -387,7 +387,7 @@ function QuestionDockForm({
|
||||
setSel((prev) => (prev.otherSelected ? prev : toggleOther(selectMode, prev)));
|
||||
}}
|
||||
placeholder="Type your own answer…"
|
||||
className="lh-prose w-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
|
||||
className="lh-input w-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
</div>
|
||||
@@ -412,7 +412,7 @@ function QuestionDockForm({
|
||||
data-testid={qd.mode === "text" ? "answer-field" : "thinking-field"}
|
||||
className="rounded-xl border border-border/70 bg-background/60 transition-colors focus-within:border-primary/50"
|
||||
>
|
||||
<div className="px-2.5 pt-2 text-xxs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
<div className="px-2.5 pt-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
{qd.mode === "text" ? "Your answer" : "Your thinking"}
|
||||
</div>
|
||||
{qd.mode === "text" ? (
|
||||
@@ -429,7 +429,7 @@ function QuestionDockForm({
|
||||
}}
|
||||
placeholder="Type your answer…"
|
||||
rows={1}
|
||||
className="field-sizing-content lh-prose max-h-48 min-h-10 w-full resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
|
||||
className="field-sizing-content lh-input max-h-48 min-h-10 w-full resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
|
||||
/>
|
||||
) : (
|
||||
<textarea
|
||||
@@ -446,7 +446,7 @@ function QuestionDockForm({
|
||||
placeholder="Why this answer? What are you unsure about? Say as much as you like — the teacher reads all of this."
|
||||
rows={1}
|
||||
className={cn(
|
||||
"field-sizing-content lh-prose max-h-48 w-full resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground/70",
|
||||
"field-sizing-content lh-input max-h-48 w-full resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground/70",
|
||||
// Phase-scaled prominence: teaching invites depth,
|
||||
// probing stays quick.
|
||||
phase === "teach" ? "min-h-[4.5rem]" : "min-h-10",
|
||||
@@ -455,7 +455,7 @@ function QuestionDockForm({
|
||||
)}
|
||||
<div className="flex items-center justify-between gap-2 p-1">
|
||||
{qd.mode !== "text" && (
|
||||
<span aria-hidden className="pl-1.5 text-xxs text-muted-foreground">
|
||||
<span aria-hidden className="pl-1.5 text-xs text-muted-foreground">
|
||||
⌘/Ctrl + ↵ submits
|
||||
</span>
|
||||
)}
|
||||
|
||||
+76
-74
@@ -5,10 +5,11 @@ import Link from "next/link";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { PanelLeftCloseIcon, PanelLeftOpenIcon, PlusIcon, SearchIcon } from "lucide-react";
|
||||
import { ActivitySection } from "@/components/activity-dock";
|
||||
import { BrailleSpinner } from "@/components/braille-spinner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ChatListItem, Phase3 } from "@/src/core";
|
||||
import type { ChatListItem } from "@/src/core";
|
||||
|
||||
/**
|
||||
* Toggleable sidebar — NOT a modal drawer: no backdrop, no focus theft. It
|
||||
@@ -51,83 +52,73 @@ export function SidebarProvider({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<SidebarContext.Provider value={{ open, toggle }}>
|
||||
{/* transitions gated on mount: no slide-in flash on page load */}
|
||||
<div className={cn("flex h-dvh", mounted && "[&_.sidebar-motion]:transition-[width]")}>{children}</div>
|
||||
<div className={cn("flex h-dvh", mounted && "[&_.sidebar-motion]:transition-[width,margin,opacity]")}>{children}</div>
|
||||
</SidebarContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
/** Hamburger for page headers — only visible when the sidebar is closed. */
|
||||
/** Hamburger for page headers — only visible when the sidebar is closed.
|
||||
*
|
||||
* Owner, round 6c: the toggle is ALWAYS MOUNTED, owning a slot whose
|
||||
* width+margin animate in LOCKSTEP with the sidebar's own width
|
||||
* transition (same duration-200, same easing, both gated on mount) —
|
||||
* before, it mounted/unmounted in one frame, so its 48px footprint
|
||||
* (button + gap) popped and dragged the title and chips sideways while
|
||||
* the sidebar was still mid-slide. When open the slot is exactly zero
|
||||
* (w-0 -mr-3: width 0, the negative margin cancels the header's gap-3),
|
||||
* so resting layouts are pixel-identical to the old conditional render.
|
||||
* The icon fades with the slot and is clipped by it as it collapses —
|
||||
* no popping in either direction. */
|
||||
export function SidebarToggle() {
|
||||
const { open, toggle } = useSidebar();
|
||||
if (open) return null;
|
||||
return (
|
||||
<Button variant="ghost" size="icon" aria-label="Open sidebar" onClick={toggle}>
|
||||
<PanelLeftOpenIcon className="size-5" />
|
||||
</Button>
|
||||
<span
|
||||
className={cn(
|
||||
"sidebar-motion relative flex h-9 shrink-0 overflow-hidden duration-200",
|
||||
open ? "w-0 -mr-3" : "w-9 mr-0",
|
||||
)}
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
aria-label="Open sidebar"
|
||||
aria-hidden={open}
|
||||
tabIndex={open ? -1 : 0}
|
||||
onClick={toggle}
|
||||
className={cn("sidebar-motion duration-200", open ? "pointer-events-none opacity-0" : "opacity-100")}
|
||||
>
|
||||
{/* Owner, round 6: size-4, SAME as the close glyph — the toggle
|
||||
must not grow when the sidebar is closed (it did: size-5 here).
|
||||
The small look is the standard, both directions. */}
|
||||
<PanelLeftOpenIcon className="size-4" />
|
||||
</Button>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** Phase colors for the session dot — one system with the header chip
|
||||
* and the transcript dividers (globals.css --phase-*). Static class
|
||||
* strings per phase: Tailwind can't compile dynamic class names. */
|
||||
const PHASE_FILL: Record<Phase3, string> = {
|
||||
probe: "bg-phase-probe",
|
||||
plan: "bg-phase-plan",
|
||||
teach: "bg-phase-teach",
|
||||
};
|
||||
const PHASE_RING: Record<Phase3, string> = {
|
||||
probe: "border-phase-probe",
|
||||
plan: "border-phase-plan",
|
||||
teach: "border-phase-teach",
|
||||
};
|
||||
|
||||
/**
|
||||
* The session dot, left of the title. TWO channels, one dot: COLOR is the
|
||||
* phase (probe/plan/teach — sky/violet/emerald), FILL+MOTION is what's
|
||||
* owed. Pulsing = the teacher is working (rare, time-sensitive — the only
|
||||
* state that deserves motion). Solid = a question awaits the learner's
|
||||
* answer (the DOMINANT resting state of real sessions — calm by design,
|
||||
* no animation). Hollow = nothing owed, idle. A pending answer outranks
|
||||
* "working": if a question is owed, that's the blocking fact.
|
||||
* The row's status indicator (owner, minimal-color round): the braille
|
||||
* spinner, ONLY while a teach turn is in flight — monochrome motion, the
|
||||
* terminal's own glyph, existing exactly as long as the work does and
|
||||
* vanishing the moment it ends. Every other state renders NOTHING:
|
||||
* phases only advance (all sessions end in Teaching — phase-as-signal was
|
||||
* decoration, now retired app-wide), and question-pending is the dominant
|
||||
* RESTING state of real sessions — a resting state has no scan value, so
|
||||
* the meta line's "Waiting for your answer" text carries it. Idle is the
|
||||
* absence of a signal, by design.
|
||||
*/
|
||||
function SessionDot({ phase, pending, busy }: { phase: Phase3; pending: boolean; busy: boolean }) {
|
||||
if (pending) {
|
||||
return (
|
||||
<span
|
||||
data-testid="session-dot-awaiting"
|
||||
title="Waiting for your answer"
|
||||
className={cn("size-2 shrink-0 rounded-full", PHASE_FILL[phase])}
|
||||
>
|
||||
<span className="sr-only">Waiting for your answer</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (busy) {
|
||||
return (
|
||||
<span
|
||||
data-testid="session-dot-working"
|
||||
title="Teacher is working"
|
||||
className={cn("size-2 shrink-0 rounded-full", PHASE_FILL[phase], "lh-dot-breathe")}
|
||||
>
|
||||
<span className="sr-only">Teacher is working</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span
|
||||
data-testid="session-dot-idle"
|
||||
aria-hidden
|
||||
className={cn(
|
||||
"size-2 shrink-0 rounded-full border-2 bg-transparent",
|
||||
PHASE_RING[phase],
|
||||
)}
|
||||
/>
|
||||
);
|
||||
function SessionStatus({ busy }: { busy: boolean }) {
|
||||
if (!busy) return null;
|
||||
return <BrailleSpinner />;
|
||||
}
|
||||
|
||||
/** Compact "how long ago": "just now", "5m ago", "3h ago", "2d ago",
|
||||
* then a plain date. How long a session has been WAITING matters more
|
||||
* than an absolute timestamp. Pure — exported for tests. */
|
||||
* than an absolute timestamp. Beyond a week the date renders ISO
|
||||
* (YYYY-MM-DD, zero-padded) — the international standard: unambiguous
|
||||
* in any locale and it sorts (owner, typography round 5; the old
|
||||
* M/D/YYYY was the US convention. A user-locale setting can come later
|
||||
* — trivial, a format function swap). Pure — exported for tests. */
|
||||
export function timeAgo(iso: string, now = new Date()): string {
|
||||
const ms = now.getTime() - new Date(iso).getTime();
|
||||
if (ms < 60_000) return "just now";
|
||||
@@ -137,21 +128,27 @@ export function timeAgo(iso: string, now = new Date()): string {
|
||||
if (h < 24) return `${h}h ago`;
|
||||
const d = Math.floor(h / 24);
|
||||
if (d < 7) return `${d}d ago`;
|
||||
return new Date(iso).toLocaleDateString();
|
||||
const date = new Date(iso);
|
||||
const mm = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const dd = String(date.getDate()).padStart(2, "0");
|
||||
return `${date.getFullYear()}-${mm}-${dd}`;
|
||||
}
|
||||
|
||||
/** The row's second line: state replaces the message count when the state
|
||||
* is the more useful fact (most resting sessions are awaiting an answer —
|
||||
* that's what the learner scans for). */
|
||||
/** The row's second line: the state when a state exists (waiting/working),
|
||||
* otherwise just how long ago. The message count is DROPPED (owner,
|
||||
* typography round 5): it informed no decision — clutter. messageCount
|
||||
* still rides the API payload, so this is a one-line flip back if it's
|
||||
* ever wanted. */
|
||||
function sessionMeta(chat: ChatListItem): string {
|
||||
if (chat.pendingQuestion) return `Waiting for your answer · ${timeAgo(chat.updatedAt)}`;
|
||||
if (chat.busy) return "Teacher is working…";
|
||||
return `${chat.messageCount} messages · ${new Date(chat.updatedAt).toLocaleDateString()}`;
|
||||
return timeAgo(chat.updatedAt);
|
||||
}
|
||||
|
||||
/**
|
||||
* One session row: the status dot, then title + state-aware meta. Exported
|
||||
* for render tests — pure function of the list item.
|
||||
* One session row: the status spinner (only while working), then title +
|
||||
* state-aware meta. Exported for render tests — pure function of the
|
||||
* list item.
|
||||
*/
|
||||
export function SessionRow({
|
||||
chat,
|
||||
@@ -167,13 +164,18 @@ export function SessionRow({
|
||||
type="button"
|
||||
onClick={onOpen}
|
||||
className={cn(
|
||||
"relative mb-0.5 flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-accent",
|
||||
active && "bg-accent font-medium",
|
||||
"relative mb-0.5 flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left transition-colors hover:bg-accent",
|
||||
active && "bg-accent",
|
||||
)}
|
||||
>
|
||||
<SessionDot phase={chat.phase} pending={chat.pendingQuestion} busy={chat.busy} />
|
||||
<SessionStatus busy={chat.busy} />
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block truncate">{chat.title}</span>
|
||||
{/* Titles are the learner's/teacher's WORDS — Source Sans 3, the
|
||||
same voice the words were typed in (every input is lh-prose);
|
||||
the meta line below stays JetBrains Mono (machine data). One
|
||||
rule, finally applied to the picker too (owner, typography
|
||||
round): mono = chrome, Source Sans = human words. */}
|
||||
<span className="block truncate font-prose text-(length:--lh-prose-size)">{chat.title}</span>
|
||||
<span className="block text-xs text-muted-foreground">{sessionMeta(chat)}</span>
|
||||
</span>
|
||||
</button>
|
||||
@@ -253,7 +255,7 @@ function SessionsSidebar() {
|
||||
</button>
|
||||
|
||||
<div className="mx-3 mb-1 flex items-center gap-2">
|
||||
<span className="text-xxs uppercase tracking-widest text-muted-foreground/70">Sessions</span>
|
||||
<span className="text-xs uppercase tracking-widest text-muted-foreground/70">Sessions</span>
|
||||
<span className="relative flex-1">
|
||||
<Input
|
||||
data-testid="session-search"
|
||||
|
||||
@@ -286,10 +286,12 @@ export interface ChatSummary {
|
||||
}
|
||||
|
||||
/** The sidebar's session row: a summary + live liveness. The chats list
|
||||
* route attaches `busy` from the turn-liveness registry and the job store
|
||||
* (a running turn OR a background job = the session is working). The store
|
||||
* itself can't see liveness (import law: store never imports server),
|
||||
* hence the split at exactly the record/liveness seam. */
|
||||
* route attaches `busy` from the turn-liveness registry ONLY — a running
|
||||
* teach turn (owner, minimal-color round: background jobs no longer
|
||||
* count; the sidebar's Background agents section is their channel, and
|
||||
* the row spinner means exactly "a turn is in flight"). The store itself
|
||||
* can't see liveness (import law: store never imports server), hence the
|
||||
* split at exactly the record/liveness seam. */
|
||||
export interface ChatListItem extends ChatSummary {
|
||||
busy: boolean;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
/**
|
||||
* Phase presentation render tests — the in-session face of the picker's
|
||||
* color strips (components/phase-divider.tsx): the header chip and the
|
||||
* dotted transcript boundary rules. Same tsx classic-JSX shim as
|
||||
* render-cards.test.tsx. (Replaces the old part-level PlanDivider tests.)
|
||||
* Phase presentation render tests — the in-session face (components/
|
||||
* phase-divider.tsx), monochrome since the minimal-color round: the header
|
||||
* chip (label + the braille spinner in the old dot slot while a turn is in
|
||||
* flight) and the dotted transcript boundary rules. Same tsx classic-JSX
|
||||
* shim as render-cards.test.tsx. (Replaces the old part-level PlanDivider
|
||||
* tests.)
|
||||
*/
|
||||
import React from "react";
|
||||
(globalThis as Record<string, unknown>).React = React;
|
||||
@@ -13,7 +15,7 @@ import { renderToStaticMarkup } from "react-dom/server";
|
||||
import { PhaseChip, PhaseDivider, planNodeCount } from "../components/phase-divider.tsx";
|
||||
|
||||
describe("PhaseChip (header)", () => {
|
||||
it("renders a phase-colored dot + the learner-facing label", () => {
|
||||
it("renders the learner-facing label — no colored dot (phase color retired)", () => {
|
||||
for (const [phase, label] of [
|
||||
["probe", "Probing"],
|
||||
["plan", "Planning"],
|
||||
@@ -23,25 +25,34 @@ describe("PhaseChip (header)", () => {
|
||||
assert.ok(html.includes('data-testid="phase-chip"'));
|
||||
assert.ok(html.includes(`data-phase="${phase}"`));
|
||||
assert.ok(html.includes(label), `${phase} label`);
|
||||
assert.ok(html.includes(`bg-phase-${phase}`), `${phase} dot color`);
|
||||
assert.ok(!html.includes("bg-phase-"), `${phase} dot color retired`);
|
||||
assert.ok(!html.includes("rounded-full bg-"), "no dot of any color — label only");
|
||||
}
|
||||
});
|
||||
|
||||
it("NEVER shows a working spinner — the pill's curve suits text, not glyph cells (owner, round 2)", () => {
|
||||
const html = renderToStaticMarkup(<PhaseChip phase="teach" />);
|
||||
assert.ok(!html.includes("braille-spinner"), "the chip is label-only by design");
|
||||
assert.ok(!html.includes("braille-frame"), "no spinner frames leak in");
|
||||
});
|
||||
});
|
||||
|
||||
describe("PhaseDivider (transcript boundary)", () => {
|
||||
it("the plan seam: dotted rules in the plan color + node count", () => {
|
||||
it("the plan seam: monochrome dotted rules + node count", () => {
|
||||
const html = renderToStaticMarkup(<PhaseDivider phase="plan" nodeCount={3} />);
|
||||
assert.ok(html.includes('data-testid="phase-divider-plan"'));
|
||||
assert.match(html, /Plan · 3 nodes/);
|
||||
assert.ok(html.includes("border-dotted"), "dotted rule");
|
||||
assert.ok(html.includes("border-phase-plan"), "plan-colored rule");
|
||||
assert.ok(html.includes("border-border"), "monochrome rule");
|
||||
assert.ok(!html.includes("border-phase-"), "phase-colored rules are retired");
|
||||
});
|
||||
|
||||
it("the teach seam: dotted rules in the teach color, no count", () => {
|
||||
it("the teach seam: monochrome rule, no count", () => {
|
||||
const html = renderToStaticMarkup(<PhaseDivider phase="teach" />);
|
||||
assert.ok(html.includes('data-testid="phase-divider-teach"'));
|
||||
assert.match(html, /Teaching/);
|
||||
assert.ok(html.includes("border-phase-teach"));
|
||||
assert.ok(!html.includes("border-phase-"));
|
||||
assert.ok(!html.includes("text-phase-"));
|
||||
assert.ok(!html.includes("nodes"));
|
||||
});
|
||||
|
||||
|
||||
@@ -130,9 +130,10 @@ describe("plan block render", () => {
|
||||
assert.ok(!/data-testid="plan-block-full"[^>]*border/.test(html), "no wrapping chrome");
|
||||
// Fills the column UP TO the chat-font cap: the svg is w-full +
|
||||
// mx-auto with maxWidth = extent × TEXT_CAP_SCALE, so node text never
|
||||
// renders past the 16.5px prose size (owner, plan-graph round 1).
|
||||
// renders past the 16px prose size (owner, plan-graph round 1; the
|
||||
// snap 16.5→16 landed in typography round 4).
|
||||
assert.match(html, /<svg[^>]*class="block h-auto w-full mx-auto"/);
|
||||
assert.match(html, /max-width:232\.32px/); // (160+16) × 1.32
|
||||
assert.match(html, /max-width:225\.28px/); // (160+16) × 1.28
|
||||
// Two stacked nodes: 2*NODE_H + GAP_Y = 136 extent + GRAPH_PAD on
|
||||
// every side (strokes/glow never clip at the edges).
|
||||
assert.match(html, /viewBox="-8 -8 176 152"/);
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
/**
|
||||
* Session-row render tests — the picker's status language. One dot, two
|
||||
* channels: COLOR = phase (sky/violet/emerald), FILL+MOTION = what's owed
|
||||
* (pulsing = teacher working, solid = answer owed, hollow = idle). Pure
|
||||
* function of the list item, so SSR of <SessionRow> pins every visible
|
||||
* state. Same tsx classic-JSX shim as render-cards.test.tsx.
|
||||
* Session-row render tests — the picker's status language (owner,
|
||||
* minimal-color round): ONE indicator, the braille spinner, present ONLY
|
||||
* while a teach turn is in flight; every other state (idle, question
|
||||
* pending) renders nothing — phases only advance, so phase-as-signal was
|
||||
* decoration, and question-pending is the dominant RESTING state (the
|
||||
* meta line's text carries it). Pure function of the list item, so SSR of
|
||||
* <SessionRow> pins every visible state. Same tsx classic-JSX shim as
|
||||
* render-cards.test.tsx.
|
||||
*/
|
||||
import React from "react";
|
||||
(globalThis as Record<string, unknown>).React = React;
|
||||
@@ -12,7 +15,7 @@ import assert from "node:assert/strict";
|
||||
import { describe, it } from "node:test";
|
||||
import { renderToStaticMarkup } from "react-dom/server";
|
||||
import { SessionRow, timeAgo } from "../components/sidebar.tsx";
|
||||
import type { ChatListItem, Phase3 } from "../src/core/index.ts";
|
||||
import type { ChatListItem } from "../src/core/index.ts";
|
||||
|
||||
function item(overrides: Partial<ChatListItem>): ChatListItem {
|
||||
return {
|
||||
@@ -33,74 +36,80 @@ function render(chat: ChatListItem, active = false) {
|
||||
}
|
||||
|
||||
describe("SessionRow", () => {
|
||||
it("no phase strips — the dot alone carries the phase color", () => {
|
||||
it("no phase strips, no phase colors — the retired decoration", () => {
|
||||
const html = render(item({ phase: "teach" }));
|
||||
assert.ok(!html.includes("phase-strip"), "strip removed by design (too busy)");
|
||||
assert.ok(!html.includes("absolute top-2"), "no leftover strip geometry");
|
||||
assert.ok(!html.includes("bg-phase-"), "phase fills are retired app-wide");
|
||||
assert.ok(!html.includes("border-phase-"), "phase rings are retired app-wide");
|
||||
});
|
||||
|
||||
it("idle session: hollow phase-colored ring, perfectly still", () => {
|
||||
for (const phase of ["probe", "plan", "teach"] as Phase3[]) {
|
||||
it("idle session: NO indicator — absence is the state", () => {
|
||||
for (const phase of ["probe", "plan", "teach"] as const) {
|
||||
const html = render(item({ phase }));
|
||||
assert.ok(html.includes("session-dot-idle"), `${phase} idle dot present`);
|
||||
assert.ok(html.includes(`border-phase-${phase}`), `${phase} ring carries its phase color`);
|
||||
assert.ok(!html.includes("lh-dot-breathe"), "idle is never animated");
|
||||
assert.ok(!html.includes("bg-phase-"), "hollow: no fill");
|
||||
assert.ok(!html.includes("session-dot"), "no dots — the status language is spinner-only");
|
||||
assert.ok(!html.includes("braille-spinner"), "idle never shows the spinner");
|
||||
}
|
||||
});
|
||||
|
||||
it("a pending question renders the SOLID phase dot — no animation (the dominant state stays calm)", () => {
|
||||
it("a pending question renders NO indicator — resting state, carried by the meta text", () => {
|
||||
const html = render(item({ phase: "teach", pendingQuestion: true }));
|
||||
assert.ok(html.includes("session-dot-awaiting"), "awaiting dot present");
|
||||
assert.ok(html.includes("bg-phase-teach"), "solid fill in the phase color");
|
||||
assert.ok(!html.includes("lh-dot-breathe"), "motion is reserved for working");
|
||||
assert.ok(!html.includes("bg-attention"), "amber channel is gone");
|
||||
assert.ok(html.includes("Waiting for your answer"), "label");
|
||||
assert.ok(!html.includes("session-dot"), "no dots");
|
||||
assert.ok(!html.includes("braille-spinner"), "motion is reserved for working");
|
||||
assert.ok(html.includes("Waiting for your answer"), "the meta line's text");
|
||||
});
|
||||
|
||||
it("a working session renders the pulsing phase dot", () => {
|
||||
it("a working session (turn in flight) renders the braille spinner — the ONLY indicator", () => {
|
||||
const html = render(item({ phase: "plan", busy: true }));
|
||||
assert.ok(html.includes("session-dot-working"), "working dot present");
|
||||
assert.ok(html.includes("lh-dot-breathe"), "breathing animation");
|
||||
assert.ok(html.includes("bg-phase-plan"), "the pulse is phase-colored");
|
||||
assert.ok(html.includes("Teacher is working"), "label");
|
||||
assert.ok(html.includes('data-testid="braille-spinner"'), "the spinner");
|
||||
assert.ok(html.includes("braille-frame"), "CSS-animated frames");
|
||||
assert.ok((html.match(/class="braille-frame"/g) ?? []).length === 10, "all ten frames");
|
||||
assert.ok(html.includes('data-frame="0"'), "frame 0 leads (static fallback)");
|
||||
assert.ok(html.includes("Teacher is working"), "accessible label");
|
||||
assert.ok(!html.includes("bg-attention"), "no colored state fill — monochrome by design");
|
||||
});
|
||||
|
||||
it("a pending answer outranks 'working' when both are true", () => {
|
||||
const html = render(item({ pendingQuestion: true, busy: true }));
|
||||
assert.ok(html.includes("session-dot-awaiting"));
|
||||
assert.ok(!html.includes("session-dot-working"), "one dot at a time — awaiting wins");
|
||||
it("busy does not double-signal background agents (that is the sidebar section's channel)", () => {
|
||||
// The narrowing lives in the API route (busy = isTurnRunning only);
|
||||
// the row itself just renders busy faithfully. Pinned here so the
|
||||
// contract can't silently re-widen: an extraction-only "working"
|
||||
// row would be a double signal.
|
||||
const html = render(item({ busy: true, pendingQuestion: false }));
|
||||
assert.ok(html.includes("Teacher is working"), "the spinner's label names the turn, not agents");
|
||||
});
|
||||
|
||||
it("the meta line: state replaces the count when the state is the useful fact", () => {
|
||||
const awaiting = render(item({ pendingQuestion: true, updatedAt: "2026-01-02T01:00:00.000Z" }));
|
||||
assert.ok(awaiting.includes("Waiting for your answer · "), "awaiting meta");
|
||||
assert.ok(!awaiting.includes("messages"), "count yields to the state");
|
||||
assert.ok(!awaiting.includes("lh-dot-breathe"), "…and the dot is still solid");
|
||||
assert.ok(!awaiting.includes("braille-spinner"), "…and the spinner stays off");
|
||||
|
||||
const working = render(item({ busy: true }));
|
||||
assert.ok(working.includes("Teacher is working…"), "working meta");
|
||||
|
||||
// Owner, typography round 5: the message count is dropped — it
|
||||
// informed no decision. Idle meta is just how long ago.
|
||||
const idle = render(item({ title: "Partial derivatives", messageCount: 7 }));
|
||||
assert.ok(idle.includes("Partial derivatives"));
|
||||
assert.match(idle, /7 messages · \d{1,2}\/\d{1,2}\/\d{4}/, "idle keeps the count");
|
||||
assert.ok(!idle.includes("messages"), "the count is gone (flip-flop: one line in sessionMeta)");
|
||||
assert.match(idle, /\d{4}-\d{2}-\d{2}/, "idle shows the ISO date");
|
||||
});
|
||||
|
||||
it("active row is visually marked", () => {
|
||||
it("active row is visually marked by the background alone (owner, round 5: no weight change)", () => {
|
||||
const html = render(item({}), true);
|
||||
assert.ok(html.includes("font-medium"), "active emphasis");
|
||||
assert.ok(html.includes("bg-accent"), "active background");
|
||||
assert.ok(!html.includes("font-medium"), "weight is not a second channel doing the same job");
|
||||
});
|
||||
});
|
||||
|
||||
describe("timeAgo", () => {
|
||||
const now = new Date("2026-01-02T12:00:00.000Z");
|
||||
|
||||
it("just now / minutes / hours / days, then falls back to a date", () => {
|
||||
it("just now / minutes / hours / days, then the ISO date (owner, round 5)", () => {
|
||||
assert.equal(timeAgo("2026-01-02T11:59:30.000Z", now), "just now");
|
||||
assert.equal(timeAgo("2026-01-02T11:55:00.000Z", now), "5m ago");
|
||||
assert.equal(timeAgo("2026-01-02T09:00:00.000Z", now), "3h ago");
|
||||
assert.equal(timeAgo("2025-12-31T12:00:00.000Z", now), "2d ago");
|
||||
assert.match(timeAgo("2025-06-02T12:00:00.000Z", now), /\d/, "beyond a week: a date");
|
||||
assert.equal(timeAgo("2025-06-02T12:00:00.000Z", now), "2025-06-02", "beyond a week: ISO — unambiguous, sortable");
|
||||
});
|
||||
|
||||
it("negative drift (clock skew) reads as just now, never a future date", () => {
|
||||
|
||||
Reference in New Issue
Block a user