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
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user