From 3360181e410fe2522c335d3d44081e7cbaf10ceb Mon Sep 17 00:00:00 2001
From: amosblomqvist <amosblomqvist@gmail.com>
Date: Sat, 12 Sep 2026 23:48:27 +0300
Subject: [PATCH] Wave-5 reskin batch 5: normalize stray pixel text sizes onto
 the declared ladder
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--text-xxs (10px) joins the ladder; every component-level text-[9|10|11px]
literal in owned components now pulls from the ladder (graph-view.tsx and
home.tsx untouched — graph stream). Cosmetic pins updated where touched.
---
 app/globals.css                     | 2 ++
 components/activity-dock.tsx        | 2 +-
 components/answered-card.tsx        | 2 +-
 components/artifacts/steer-card.tsx | 4 ++--
 components/composer.tsx             | 4 ++--
 components/model-picker.tsx         | 8 ++++----
 components/plan-block.tsx           | 2 +-
 components/plan-window.tsx          | 2 +-
 components/question-dock.tsx        | 8 ++++----
 components/sidebar.tsx              | 2 +-
 components/stats-bar.tsx            | 6 +++---
 11 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 16f2673..dd14142 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -88,6 +88,8 @@
 	--font-title: "lh-cmu", 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;
 	--text-xs: 11px;
 	--text-xs--line-height: 1.4;
 	--text-sm: 12.5px;
diff --git a/components/activity-dock.tsx b/components/activity-dock.tsx
index cdf349d..3eab877 100644
--- a/components/activity-dock.tsx
+++ b/components/activity-dock.tsx
@@ -294,7 +294,7 @@ export function ActivityDock({ feed: feedProp }: { feed?: ActivityFeed }) {
 				narrow && "max-h-[60dvh] overflow-y-auto",
 			)}
 		>
-			<div className="flex items-center gap-2 px-1 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+			<div className="flex items-center gap-2 px-1 pb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
 				<ActivityIcon className="size-3.5" />
 				Background activity
 				<span className="ml-auto tabular-nums" data-testid="activity-total-cost" title="Total running cost (inferred)">
diff --git a/components/answered-card.tsx b/components/answered-card.tsx
index d444290..a3f039a 100644
--- a/components/answered-card.tsx
+++ b/components/answered-card.tsx
@@ -89,7 +89,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-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+					<span className="mb-0.5 block text-xxs font-medium uppercase tracking-wide text-muted-foreground">
 						Your thinking
 					</span>
 					<span className="block whitespace-pre-wrap text-sm text-foreground/90">{answer.note}</span>
diff --git a/components/artifacts/steer-card.tsx b/components/artifacts/steer-card.tsx
index 62e9415..ffa50c7 100644
--- a/components/artifacts/steer-card.tsx
+++ b/components/artifacts/steer-card.tsx
@@ -81,8 +81,8 @@ function ResearchCompleteBadge({ result }: { result: ResearchResult }) {
 				<span className="font-medium uppercase tracking-wide">Research</span>
 				<span>complete</span>
 				{result.sources.length > 0 && <span>· {result.sources.length} sources</span>}
-				<span className="ml-1 text-[11px] text-muted-foreground/70 group-open:hidden">view brief</span>
-				<span className="ml-1 hidden text-[11px] text-muted-foreground/70 group-open:inline">hide brief</span>
+				<span className="ml-1 text-xs text-muted-foreground/70 group-open:hidden">view brief</span>
+				<span className="ml-1 hidden text-xs text-muted-foreground/70 group-open:inline">hide brief</span>
 			</summary>
 			<div className="mt-2">
 				<ResearchBriefCard output={result} />
diff --git a/components/composer.tsx b/components/composer.tsx
index 2192d9b..1736f42 100644
--- a/components/composer.tsx
+++ b/components/composer.tsx
@@ -70,14 +70,14 @@ export function Composer({
 					<button
 						type="button"
 						onClick={verdict.onAccept}
-						className="flex h-[19px] items-center justify-center gap-1 rounded-md bg-emerald-600 px-3 text-[11px] font-medium text-white transition-colors hover:bg-emerald-500"
+						className="flex h-[19px] items-center justify-center gap-1 rounded-md bg-emerald-600 px-3 text-xs font-medium text-white transition-colors hover:bg-emerald-500"
 					>
 						<CheckIcon className="size-3" /> Accept plan
 					</button>
 					<button
 						type="button"
 						onClick={verdict.onDecline}
-						className="flex h-[19px] items-center justify-center gap-1 rounded-md bg-destructive px-3 text-[11px] font-medium text-destructive-foreground transition-colors hover:opacity-90"
+						className="flex h-[19px] items-center justify-center gap-1 rounded-md bg-destructive px-3 text-xs font-medium text-destructive-foreground transition-colors hover:opacity-90"
 					>
 						<XIcon className="size-3" /> Decline
 					</button>
diff --git a/components/model-picker.tsx b/components/model-picker.tsx
index 89adc43..64c6d21 100644
--- a/components/model-picker.tsx
+++ b/components/model-picker.tsx
@@ -160,7 +160,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-[9px] text-muted-foreground">▾</span>
+				<span aria-hidden className="text-xxs text-muted-foreground">▾</span>
 			</button>
 			<span aria-hidden>·</span>
 			<button
@@ -177,7 +177,7 @@ export function ModelControl({
 				<span className="text-card-foreground">
 					{effectiveLevel === undefined ? "Thinking —" : `Thinking: ${LEVEL_LABEL[effectiveLevel] ?? effectiveLevel}`}
 				</span>
-				<span aria-hidden className="text-[9px] text-muted-foreground">▾</span>
+				<span aria-hidden className="text-xxs text-muted-foreground">▾</span>
 			</button>
 
 			{open === "model" && (
@@ -234,7 +234,7 @@ export function ModelControl({
 							</li>
 						))}
 					</ul>
-					<div className="mt-1 border-t px-2 pt-1.5 text-[10px] text-muted-foreground">
+					<div className="mt-1 border-t px-2 pt-1.5 text-xxs text-muted-foreground">
 						Applies to the next turn · background agents stay config-pinned
 					</div>
 				</div>
@@ -266,7 +266,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-[10px] text-muted-foreground">
+					<div className="mt-1 border-t px-2 pt-1.5 text-xxs text-muted-foreground">
 						Levels this model actually supports
 					</div>
 				</div>
diff --git a/components/plan-block.tsx b/components/plan-block.tsx
index db859fb..77db98b 100644
--- a/components/plan-block.tsx
+++ b/components/plan-block.tsx
@@ -473,7 +473,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-[10px] text-muted-foreground/60">Drag to pan · scroll to zoom</span>
+							<span className="text-xxs text-muted-foreground/60">Drag to pan · scroll to zoom</span>
 							<div className="flex gap-1">
 								<button
 									type="button"
diff --git a/components/plan-window.tsx b/components/plan-window.tsx
index 9b99613..385b3bd 100644
--- a/components/plan-window.tsx
+++ b/components/plan-window.tsx
@@ -82,7 +82,7 @@ export function PlanWindow({ messages, onOpen }: { messages: readonly PopupMessa
 			title="Open the full plan"
 			className="fixed bottom-3 left-3 z-30 hidden w-80 flex-col gap-1 rounded-xl border bg-card/95 p-2 text-left shadow-lg backdrop-blur sm:flex"
 		>
-			<div className="flex items-center gap-2 px-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+			<div className="flex items-center gap-2 px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
 				<WaypointsIcon className="size-3.5 text-primary" />
 				The plan
 				<span className="ml-auto min-w-0 truncate font-normal normal-case" title={currentTitle ?? undefined}>
diff --git a/components/question-dock.tsx b/components/question-dock.tsx
index db19e2b..bb7c3e7 100644
--- a/components/question-dock.tsx
+++ b/components/question-dock.tsx
@@ -307,7 +307,7 @@ function QuestionDockForm({
 										)}
 									>
 										{isSel && (
-											<span className={cn(qd.mode === "multi-select" ? "text-[10px]" : "size-1.5 rounded-full bg-current")}>
+											<span className={cn(qd.mode === "multi-select" ? "text-xxs" : "size-1.5 rounded-full bg-current")}>
 												{qd.mode === "multi-select" ? "✓" : ""}
 											</span>
 										)}
@@ -357,7 +357,7 @@ function QuestionDockForm({
 									)}
 								>
 									{sel.otherSelected && (
-										<span className={cn(qd.mode === "multi-select" ? "text-[10px]" : "size-1.5 rounded-full bg-current")}>
+										<span className={cn(qd.mode === "multi-select" ? "text-xxs" : "size-1.5 rounded-full bg-current")}>
 											{qd.mode === "multi-select" ? "✓" : ""}
 										</span>
 									)}
@@ -396,7 +396,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-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+					<div className="px-2.5 pt-2 text-xxs font-medium uppercase tracking-wide text-muted-foreground">
 						{qd.mode === "text" ? "Your answer" : "Your thinking"}
 					</div>
 					{qd.mode === "text" ? (
@@ -439,7 +439,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-[10px] text-muted-foreground">
+							<span aria-hidden className="pl-1.5 text-xxs text-muted-foreground">
 								⌘/Ctrl + ↵ submits
 							</span>
 						)}
diff --git a/components/sidebar.tsx b/components/sidebar.tsx
index 072e119..a527ff3 100644
--- a/components/sidebar.tsx
+++ b/components/sidebar.tsx
@@ -253,7 +253,7 @@ function SessionsSidebar() {
 				</button>
 
 				<div className="mx-3 mb-1 flex items-center gap-2">
-					<span className="text-[10px] uppercase tracking-widest text-muted-foreground/70">Sessions</span>
+					<span className="text-xxs uppercase tracking-widest text-muted-foreground/70">Sessions</span>
 					<span className="relative flex-1">
 						<Input
 							data-testid="session-search"
diff --git a/components/stats-bar.tsx b/components/stats-bar.tsx
index bade4c5..7716ca7 100644
--- a/components/stats-bar.tsx
+++ b/components/stats-bar.tsx
@@ -48,7 +48,7 @@ export function StatsBar({
 			// (so its transparent gradient area never blocks scrolling) — this row
 			// must re-enable events or every control on it is dead (the model-
 			// control wave caught this live: buttons rendered, clicks never landed).
-			className="pointer-events-auto relative flex items-center justify-between gap-3 px-3 pt-1.5 text-[11px] text-muted-foreground"
+			className="pointer-events-auto relative flex items-center justify-between gap-3 px-3 pt-1.5 text-xs text-muted-foreground"
 		>
 			<button
 				type="button"
@@ -79,7 +79,7 @@ export function StatsBar({
 					data-testid="stats-detail"
 					className="absolute bottom-full left-0 z-40 mb-1.5 w-72 rounded-xl border bg-card p-3 text-xs shadow-xl"
 				>
-					<div className="mb-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+					<div className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
 						Session stats
 					</div>
 					<div className="flex flex-col gap-1 text-muted-foreground">
@@ -102,7 +102,7 @@ export function StatsBar({
 					</div>
 					{turns.length > 0 && (
 						<>
-							<div className="mb-1 mt-2.5 border-t pt-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+							<div className="mb-1 mt-2.5 border-t pt-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
 								Turns
 							</div>
 							<ul className="flex max-h-56 flex-col gap-1 overflow-y-auto">