Minimal-color round 1 (owner): phase color retired — the braille spinner is the one working indicator
Nothing exists purely for decoration: phase color-coding is retired app-wide (phases only advance — every session ends Teaching — so phase-as-signal was decoration with a one-time function), and what state genuinely deserved — 'a turn is in flight' — is now carried by MOTION alone, in the terminal's own glyph language. - BrailleSpinner (components/braille-spinner.tsx): the canonical cli-spinner sequence (⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏) as exact dot bitmaps in a 2×4 braille cell, 80ms/frame (800ms cycle). Pure CSS: one shared keyframes, frames staggered via animation-delay; no JS timer, no re-render per frame — cheaper than the old breathing dot. Static contexts (SSR, prefers-reduced-motion) show frame 0 — a legible glyph, not a blank. - Sidebar rows: spinner ONLY while a teach turn is in flight; idle and question-pending render NOTHING (a resting state has no scan value — the meta line's 'Waiting for your answer' text carries it). The three-state phase dot (pulse/solid/hollow) and PHASE_FILL/RING maps are gone. - Top bar PhaseChip: label-only pill; the old dot slot becomes the spinner's home while a turn is in flight (busy prop wired from ChatView's busy = localStream || turnInFlight). Transcript PhaseDividers drop phase colors for monochrome rules + labels. - API narrowing (app/api/chats/route.ts + ChatListItem contract): busy = isTurnRunning ONLY — background jobs no longer count (the sidebar's Background agents section is their channel; a per-row spinner would double-signal them). - globals.css: --phase-* tokens + lh-dot-breathe removed (dead after the sweep — no remaining users). Live-verified: idle/pending rows render no indicator, /chat/new chip is label-only, 10 CSSAnimations at 800ms with correct 80ms stagger, static frame 0 under reduced motion. Gates: typecheck, lint, 470/470, build. Lane crossings to flag at merge: app/api/chats/route.ts + the ChatListItem contract comment (src/core) — the busy-semantics narrowing; components/chat.tsx one-line busy prop.
This commit is contained in:
amosblomqvist
@@ -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>
|
||||
);
|
||||
}
|
||||
+1
-1
@@ -605,7 +605,7 @@ export function Chat({
|
||||
Plan
|
||||
</button>
|
||||
)}
|
||||
<PhaseChip phase={phases.at(-1) ?? "probe"} />
|
||||
<PhaseChip phase={phases.at(-1) ?? "probe"} busy={busy} />
|
||||
</header>
|
||||
|
||||
<div className="relative flex min-h-0 flex-1">
|
||||
|
||||
@@ -1,14 +1,17 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import { BrailleSpinner } from "@/components/braille-spinner";
|
||||
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
|
||||
@@ -23,14 +26,10 @@ 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. */
|
||||
export function PhaseChip({ phase }: { phase: Phase3 }) {
|
||||
/** The header chip: the phase label, monochrome; while a turn is in
|
||||
* flight the old dot slot shows the braille spinner (motion = the honest
|
||||
* state signal — see BrailleSpinner). */
|
||||
export function PhaseChip({ phase, busy = false }: { phase: Phase3; busy?: boolean }) {
|
||||
return (
|
||||
<span
|
||||
data-testid="phase-chip"
|
||||
@@ -38,27 +37,19 @@ export function PhaseChip({ phase }: { phase: Phase3 }) {
|
||||
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"
|
||||
>
|
||||
<span className={cn("size-1.5 rounded-full", PHASE_DOT[phase])} aria-hidden />
|
||||
{busy && <BrailleSpinner className="h-3.5" />}
|
||||
{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 +59,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>
|
||||
);
|
||||
}
|
||||
|
||||
+18
-58
@@ -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
|
||||
@@ -67,62 +68,20 @@ export function SidebarToggle() {
|
||||
);
|
||||
}
|
||||
|
||||
/** 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",
|
||||
@@ -150,8 +109,9 @@ function sessionMeta(chat: ChatListItem): string {
|
||||
}
|
||||
|
||||
/**
|
||||
* 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,
|
||||
@@ -171,7 +131,7 @@ export function SessionRow({
|
||||
active && "bg-accent font-medium",
|
||||
)}
|
||||
>
|
||||
<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>
|
||||
<span className="block text-xs text-muted-foreground">{sessionMeta(chat)}</span>
|
||||
|
||||
Reference in New Issue
Block a user