@@ -266,8 +266,34 @@ excludes on purpose. The ~84 ordinary ones were simply unmigrated, and separatin
 per-screen work: the Board's chips look migratable and are not, because `size="sm"` would raise
 their type step and change the radius in the densest rows in the app.
 
-**The console is now at 69**, and the excluded third is most of what is left — `BoardTab` (18),
-`AgentDetail` (15) and `InstanceDetail` (11) hold three quarters of it. When migrating the rest:
+**The console is now at 42 and every one of those is in an excluded class** — 10 below the smallest
+step's type size, 5 pills, 5 card-shaped, 4 overlaid, 3 segmented, 15 recorded judgements. So the
+console is finished against this vocabulary, and the next question about it is whether the table
+should *grow* a step, not which call sites are left.
+
+**`agents/coder/web` is at 23, and the table is vendored there** (`agents/coder/web/src/control-classes.ts`).
+It could not import the console's: `store/console` depends on `@proagentstore/coder-web`, so the
+arrow only goes one way, and the SDK is not a home for it because Tailwind v4 skips `node_modules`
+— the same reason `index.css` carries an explicit `@source` for that directory. The region between
+the `vendored:button-vocabulary` markers is held byte-identical by `control-classes.test.ts`, the
+bargain §4 already strikes for the tokens in `store/admin`.
+
+### What may be handed to `<Button className>`, measured (#366)
+
+The docstring said "colour handed in there does not reliably win" without saying how to tell. The
+test:
+
+- **Safe** if the vocabulary sets no rule for that CSS property — `border-dashed` (the variant sets
+  border *width* and *colour*, not style), `active:scale-95`, every position utility.
+- **Otherwise**, the incoming utility only wins if it is emitted later in the built stylesheet.
+  `.hidden{display:none}` is emitted **before** `.inline-flex`, so `className="hidden sm:flex"` on a
+  `<Button>` does not hide it: `BUTTON_BASE` wins, silently, on mobile only, and it looks right on
+  the desktop the author is testing on. Eight controls in the Coder session header are responsive
+  that way and stay hand-written for that reason — a gap in the table, not unmigrated work.
+  `.transition-transform` does win over `.transition-colors`, but it *replaces* `transition-property`
+  rather than adding to it, so the hover colour transition goes with it.
+
+When migrating the rest:
 
 - **Preserve the rendered type step; collapse padding and radius.** `text-sm` → `size="lg"`,
   `text-xs` → `md` or `sm` by padding. Mapping every `px-3 py-1.5` onto `md` regardless would shrink
 
@@ -1,3 +1,5 @@
+import Button from "./Button";
+
 /**
  * "Point this agent at a repo" — ONE form, wherever the question is asked (#411).
  *
@@ -35,7 +37,7 @@ export default function AddRepoForm({ value, onChange, onAdd, heading, className
 					autoCorrect="off"
 					className="flex-1 min-w-[180px] bg-panel border border-line rounded-xl px-3 py-2 text-sm"
 				/>
-				<button type="button" onClick={onAdd} className="text-xs px-3 py-1.5 rounded-lg bg-accent text-white font-bold">Add</button>
+				<Button variant="primary" size="md" onClick={onAdd}>Add</Button>
 			</div>
 			<p className="text-xs text-muted mt-1.5 text-left">
 				<b>Best for dev:</b> point at a repo you already have (<code>~/dev/my-repo</code>) — the agent works in your real checkout.
 
@@ -0,0 +1,50 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import { type ButtonSize, type ButtonVariant, buttonClass } from "./control-classes";
+
+/**
+ * The Coder UI's button. Shape and colour come from the vendored table in `control-classes.ts`;
+ * nothing about either is decided here (#366).
+ *
+ * This is a copy of `store/console/src/components/Button.tsx` for the reason set out in
+ * `control-classes.ts`'s header — the console depends on this package, not the other way round.
+ * The table is held byte-identical by a test; this wrapper is not, because it is nine lines of
+ * plumbing rather than a decision. What matters is that both render `buttonClass(variant, size)`.
+ *
+ * `type="button"` is the default on purpose. React does not override the HTML default of
+ * `submit`, so a bare `<button>` inside a `<form>` submits it, which here means a full page
+ * reload — the reason nearly every existing call site writes `type="button"` by hand.
+ *
+ * `className` is passthrough for POSITION only — `shrink-0`, `ml-auto`, `w-full`, `self-start`.
+ * Do not pass padding, radius or colour: Tailwind resolves same-property utilities by their order
+ * in the generated stylesheet, not by their order in the class attribute, so a `px-4` handed in
+ * here does not reliably beat the size's `px-3`. If a shape is missing, add a step to the table —
+ * in BOTH copies.
+ *
+ * ── Why eight controls in this package still draw their own box
+ *
+ * `.hidden{display:none}` is emitted BEFORE `.inline-flex` in the built stylesheet, so
+ * `className="hidden sm:flex"` on a Button does NOT hide it on mobile — `BUTTON_BASE`'s
+ * `inline-flex` wins, silently, and it looks right on the desktop the author is testing on. The
+ * session header's controls are all responsive that way (`hidden sm:flex`, `sm:hidden`), so they
+ * are hand-written on purpose until the table grows a way to say it. Measured in
+ * `store/console/dist/assets/index.css`, not reasoned about; the same note is in the console's copy.
+ */
+export default function Button({
+	variant = "secondary",
+	size = "md",
+	className = "",
+	type = "button",
+	children,
+	...rest
+}: Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className"> & {
+	variant?: ButtonVariant;
+	size?: ButtonSize;
+	className?: string;
+	children?: ReactNode;
+}) {
+	return (
+		<button type={type} className={buttonClass(variant, size, className)} {...rest}>
+			{children}
+		</button>
+	);
+}
@@ -28,6 +28,7 @@ import BuildsPanel from "./BuildsPanel";
 import PullsPanel from "./PullsPanel";
 import { engineAuthBadge, isClaudeSignedOut, type EngineAuthReport } from "./engine-auth-view";
 import { ArrowLeft, Copy, Settings, FolderCog, ChevronDown, Eye, Square, SquareTerminal, Plus, FolderGit2, Hammer, CircleDot, GitPullRequest, Cpu, RotateCw } from "lucide-react";
+import Button from "./Button";
 
 interface Props {
 	instanceId: string;
@@ -1021,13 +1022,13 @@ export default function CodingTab({ instanceId, initialSessionId, onHeaderOverri
 					    the table and the one-line assertion are in `e2e/console.spec.ts`'s #431 block. */}
 					{solo && <span title={`${repoTitle(solo)} · ${repoLabel(solo)}`} className="text-xs text-muted truncate min-w-0 flex-1 basis-0">{repoTitle(solo)} · {repoLabel(solo)}</span>}
 					<div className="ml-auto flex gap-1 shrink-0">
-						<button type="button" onClick={() => setShowEngines(true)} title="CLI engines & sign-in" aria-label="CLI engines" className="text-xs px-1.5 py-1 rounded-md border border-line text-muted hover:border-accent hover:text-accent"><Cpu size={13} /></button>
-						{solo && <button type="button" onClick={() => setSettingsRepoId(solo.id)} title="Repo settings" aria-label="Repo settings" className="text-xs px-1.5 py-1 rounded-md border border-line text-muted hover:border-accent hover:text-accent"><FolderCog size={13} /></button>}
+						<Button size="icon" onClick={() => setShowEngines(true)} title="CLI engines & sign-in" aria-label="CLI engines"><Cpu size={13} /></Button>
+						{solo && <Button size="icon" onClick={() => setSettingsRepoId(solo.id)} title="Repo settings" aria-label="Repo settings"><FolderCog size={13} /></Button>}
 						{/* The session actions the header takeover used to hold. Without these the solo
 						    view could start a session and never stop it. */}
-						{openSession && <button type="button" onClick={copySummaryJson} title="Copy conversation as JSON" aria-label="Copy conversation as JSON" className="text-xs px-1.5 py-1 rounded-md border border-line text-muted hover:border-accent hover:text-accent"><Copy size={13} /></button>}
-						{openSession && <button type="button" onClick={restartSession} title="Restart the CLI" aria-label="Restart the CLI" className="text-xs px-1.5 py-1 rounded-md border border-line text-muted hover:border-accent hover:text-accent"><RotateCw size={13} /></button>}
-						{openSession && <button type="button" onClick={endSession} title="End session" aria-label="End session" className="text-xs px-1.5 py-1 rounded-md border border-danger text-danger font-semibold"><Square size={13} /></button>}
+						{openSession && <Button size="icon" onClick={copySummaryJson} title="Copy conversation as JSON" aria-label="Copy conversation as JSON"><Copy size={13} /></Button>}
+						{openSession && <Button size="icon" onClick={restartSession} title="Restart the CLI" aria-label="Restart the CLI"><RotateCw size={13} /></Button>}
+						{openSession && <Button variant="danger" size="icon" onClick={endSession} title="End session" aria-label="End session"><Square size={13} /></Button>}
 					</div>
 				</div>
 
@@ -1073,10 +1074,9 @@ export default function CodingTab({ instanceId, initialSessionId, onHeaderOverri
 										{(() => {
 											const a = repoOpenAction({ hasActiveSession: false, opening: openingRepoId === solo.id, runnerOnline });
 											return (
-												<button type="button" onClick={() => openRepoSession(solo.id)} disabled={a.disabled} title={a.title}
-													className="text-sm px-3 py-1.5 rounded-lg bg-accent text-white font-bold disabled:opacity-60">
+												<Button variant="primary" size="lg" onClick={() => openRepoSession(solo.id)} disabled={a.disabled} title={a.title}>
 													{a.label}
-												</button>
+												</Button>
 											);
 										})()}
 										{/* The runner warning goes BESIDE the action, never instead of it (#241).
@@ -1202,13 +1202,9 @@ export default function CodingTab({ instanceId, initialSessionId, onHeaderOverri
 							<pre className="text-2xs text-muted mt-1 whitespace-pre-wrap break-all">{authPrompt.evidence}</pre>
 						)}
 						{authPrompt.kind === "oauth-url" && (
-							<button
-								type="button"
-								onClick={startSignin}
-								className="mt-2 text-xs px-3 py-1.5 rounded-lg bg-accent text-white font-bold"
-							>
+							<Button variant="primary" size="md" className="mt-2" onClick={startSignin}>
 								Open sign-in on my runner
-							</button>
+							</Button>
 						)}
 						{signinMsg && <div className="text-xs text-muted mt-1.5">{signinMsg}</div>}
 					</div>
 
@@ -5,6 +5,7 @@ import { resolveComposer, resolveVoiceStatus } from "@proagentstore/sdk/hooks";
 import { API, getToken } from "@proagentstore/sdk/client";
 import type { LoopPreset } from "./types";
 import { Trash2, Copy, Check, Repeat, Square, Mic, MicOff, Volume2, MessageSquare, Headphones, Send, Wrench, Settings, Loader2, Pencil, CircleDot, ArrowDown, X } from "lucide-react";
+import Button from "./Button";
 
 /** Double-tap a message: replay its SAVED voice recording (voice turns), else speak
  *  the text via TTS. Owner-scoped fetch of the R2 blob. */
@@ -311,8 +312,8 @@ export default function CopilotView({
 					<div className="flex items-center gap-2 justify-between">
 						<label className="text-xs text-muted flex items-center gap-1.5">Max iterations: <input type="number" value={loop.loopMax} onChange={(e) => loop.setLoopMax(Math.max(1, Math.min(50, parseInt(e.target.value, 10) || 10)))} className="w-14 bg-panel border border-line rounded px-2 py-1 text-xs" min={1} max={50} /></label>
 						<div className="flex gap-1.5">
-							<button type="button" onClick={() => loop.setShowLoopForm(false)} className="text-xs px-3 py-1.5 rounded-lg border border-line text-muted font-semibold">Cancel</button>
-							<button type="button" onClick={loop.start} disabled={!loop.loopObjective.trim()} className="text-xs px-3 py-1.5 rounded-lg bg-accent text-white font-bold disabled:opacity-40">Start Loop</button>
+							<Button size="md" onClick={() => loop.setShowLoopForm(false)}>Cancel</Button>
+							<Button variant="primary" size="md" onClick={loop.start} disabled={!loop.loopObjective.trim()}>Start Loop</Button>
 						</div>
 					</div>
 				</div>
@@ -336,17 +337,17 @@ export default function CopilotView({
 							<div className="flex items-center gap-2 justify-between">
 								<label className="text-xs text-muted flex items-center gap-1.5">Max iterations: <input type="number" value={loop.loopMax} onChange={(e) => loop.setLoopMax(Math.max(1, Math.min(50, parseInt(e.target.value, 10) || 10)))} className="w-14 bg-panel border border-line rounded px-2 py-1 text-xs" min={1} max={50} /></label>
 								<div className="flex gap-1.5">
-									<button type="button" onClick={loop.skipProposedIssue} className="text-xs px-3 py-1.5 rounded-lg border border-line text-muted font-semibold">Skip</button>
-									<button type="button" onClick={loop.approveProposedIssue} className="text-xs px-3 py-1.5 rounded-lg bg-accent text-white font-bold">Approve &amp; run #{loop.proposedIssue.number}</button>
+									<Button size="md" onClick={loop.skipProposedIssue}>Skip</Button>
+									<Button variant="primary" size="md" onClick={loop.approveProposedIssue}>Approve &amp; run #{loop.proposedIssue.number}</Button>
 								</div>
 							</div>
 						</>
 					) : (
 						<div className="flex items-center justify-between gap-2">
 							<div className="text-xs text-muted">No open issue to work — the backlog looks clear.</div>
 							<div className="flex gap-1.5 shrink-0">
-								<button type="button" onClick={() => loop.setShowLoopForm(false)} className="text-xs px-3 py-1.5 rounded-lg border border-line text-muted font-semibold">Close</button>
-								<button type="button" onClick={loop.proposeNextIssue} className="text-xs px-3 py-1.5 rounded-lg bg-accent text-white font-bold">Check again</button>
+								<Button size="md" onClick={() => loop.setShowLoopForm(false)}>Close</Button>
+								<Button variant="primary" size="md" onClick={loop.proposeNextIssue}>Check again</Button>
 							</div>
 						</div>
 					)}
 
@@ -4,6 +4,7 @@ import { isClaudeEngine, missingWriteFlag } from "@proagentstore/sdk/ui";
 import type { CodingEngine, EngineAuth } from "./types";
 import { engineContinuityNote } from "./engine-continuity";
 import { Cpu, History, Trash2 } from "lucide-react";
+import Button from "./Button";
 
 /** The engine's vault-key name shown in the api-key option label. */
 function apiKeyName(command: string): string {
@@ -156,17 +157,13 @@ export default function EnginesModal({ instanceId, engines: initial, defaultEngi
 					})}
 				</div>
 
-				<button
-					type="button"
-					onClick={() => setEngines((prev) => [...prev, { id: `engine-${prev.length + 1}`, label: "", command: "" }])}
-					className="text-xs px-2.5 py-1.5 rounded-lg border border-line text-muted font-semibold mt-2"
-				>
+				<Button size="md" className="mt-2" onClick={() => setEngines((prev) => [...prev, { id: `engine-${prev.length + 1}`, label: "", command: "" }])}>
 					+ Add engine
-				</button>
+				</Button>
 
 				<div className="flex gap-2 justify-end mt-4">
-					<button type="button" onClick={onClose} className="text-xs px-3 py-1.5 rounded-md border border-line text-muted font-semibold">Cancel</button>
-					<button type="button" onClick={save} disabled={saving} className="text-xs px-3 py-1.5 rounded-md bg-accent text-white font-bold disabled:opacity-50">{saving ? "Saving…" : "Save"}</button>
+					<Button size="md" onClick={onClose}>Cancel</Button>
+					<Button variant="primary" size="md" onClick={save} disabled={saving}>{saving ? "Saving…" : "Save"}</Button>
 				</div>
 			</div>
 		</div>
 
@@ -3,6 +3,7 @@ import { api } from "@proagentstore/sdk/client";
 import type { CodingRepo } from "./types";
 import { repoProviderLabel } from "./repo-title";
 import { Settings, Trash2, Lock } from "lucide-react";
+import Button from "./Button";
 
 /**
  * Per-repo settings sheet: name, FOLDER, special instructions (rules), launch URLs, and delete.
@@ -175,10 +176,10 @@ export default function RepoSettingsModal({ repo, instanceId, onClose, onSaved,
 				<input id="repo-settings-production-url" value={prod} onChange={(e) => setProd(e.target.value)} placeholder="Production URL" className="w-full bg-panel border border-line rounded-lg px-3 py-2 text-xs" />
 
 				<div className="flex gap-2 justify-between items-center mt-4">
-					<button type="button" onClick={del} disabled={deleting || saving} className="text-xs px-3 py-1.5 rounded-md text-danger font-semibold hover:bg-danger-soft disabled:opacity-50 flex items-center gap-1"><Trash2 size={13} />{deleting ? "Deleting…" : "Delete"}</button>
+					<Button variant="danger" size="md" onClick={del} disabled={deleting || saving}><Trash2 size={13} />{deleting ? "Deleting…" : "Delete"}</Button>
 					<div className="flex gap-2">
-						<button type="button" onClick={onClose} className="text-xs px-3 py-1.5 rounded-md border border-line text-muted font-semibold">Cancel</button>
-						<button type="button" onClick={save} disabled={saving || deleting} className="text-xs px-3 py-1.5 rounded-md bg-accent text-white font-bold disabled:opacity-50">{saving ? "Saving…" : "Save"}</button>
+						<Button size="md" onClick={onClose}>Cancel</Button>
+						<Button variant="primary" size="md" onClick={save} disabled={saving || deleting}>{saving ? "Saving…" : "Save"}</Button>
 					</div>
 				</div>
 			</div>
 
@@ -10,6 +10,7 @@ import { repoProviderBadge, repoTitle } from "./repo-title";
 import { isEngineBusy } from "./engine-busy";
 import { repoOpenAction } from "./repo-open";
 import { repoFreshnessLabel, staleListNotice, type RecheckReport } from "./repo-freshness";
+import Button from "./Button";
 
 type TimelineEntry = { type?: string; content?: string; text?: string };
 
@@ -178,10 +179,9 @@ export default function ReposList({
 								// No aria-label: the visible word IS the accessible name, and overriding it with
 								// "Open <repo>" would make the control unaddressable by the name a user (or a
 								// test) reads off the screen — the row already announces which repo it is.
-								<button type="button" onClick={() => openRepo(r.id)} disabled={a.disabled} title={a.title}
-									className="text-xs px-2.5 py-1 rounded-md bg-accent text-white font-bold disabled:opacity-60">
+								<Button variant="primary" size="sm" onClick={() => openRepo(r.id)} disabled={a.disabled} title={a.title}>
 									{a.label}
-								</button>
+								</Button>
 							);
 						})()}
 						<button
@@ -194,7 +194,7 @@ export default function ReposList({
 						>
 							{phase === "loading" ? <Loader2 size={14} className="animate-spin" /> : phase === "playing" ? <Square size={14} /> : <Play size={14} />}
 						</button>
-						<button type="button" onClick={() => setSettingsRepoId(r.id)} title="Repo settings" className="text-xs px-1.5 py-1 rounded-md border border-line text-muted hover:border-accent hover:text-accent"><Settings size={14} /></button>
+						<Button size="icon" onClick={() => setSettingsRepoId(r.id)} title="Repo settings"><Settings size={14} /></Button>
 					</div>
 				</div>
 				{playErr?.id === r.id && (
@@ -260,9 +260,9 @@ export default function ReposList({
 	);
 
 	const enginesButton = (
-		<button type="button" onClick={onOpenEngines} title="CLI engines & sign-in" className="text-xs px-2.5 py-1.5 rounded-lg border border-line text-muted font-semibold flex items-center gap-1">
+		<Button size="md" onClick={onOpenEngines} title="CLI engines & sign-in">
 			<Cpu size={13} /><span className="hidden sm:inline">Engines</span>
-		</button>
+		</Button>
 	);
 
 	/**
@@ -284,7 +284,7 @@ export default function ReposList({
 						{enginesButton}
 						{/* A one-repo agent that HAS its repo cannot use this — one is its maximum. */}
 						{!singleRepo && (
-							<button type="button" onClick={() => setShowAddRepo(!showAddRepo)} className="text-xs px-2.5 py-1.5 rounded-lg border border-line text-muted font-semibold">+ Add</button>
+							<Button size="md" onClick={() => setShowAddRepo(!showAddRepo)}>+ Add</Button>
 						)}
 					</div>
 				</div>