fix(desktop): keep icons on the design scale and say this computer

apps/desktop/src/design.test.ts

@@ -268,6 +268,26 @@ describe("design system", () => {
     expect([...used].map(([, , why]) => `allowlist entry no longer matches a line: ${why}`)).toEqual([]);
   });
 
+  test("icons take a size from the scale (docs/design.md › Icons)", () => {
+    // 10 a glyph in a status dot or a caption's spinner, 12 chips and captions, 13 menus, 14
+    // toolbars and composer buttons, 16 page headers and tool rows, 18 empty states, 24 a page's
+    // own mark.
+    const SCALE = new Set([10, 12, 13, 14, 16, 18, 24]);
+    const found: string[] = [];
+    for (const path of files(join(SRC, "ui"))) {
+      const file = relative(SRC, path);
+      readFileSync(path, "utf8")
+        .split("\n")
+        .forEach((line, i) => {
+          for (const match of line.matchAll(/\bsize=\{(\d+)\}/g)) {
+            if (!SCALE.has(Number(match[1])))
+              found.push(`${file}:${i + 1} icon size ${match[1]}: ${line.trim()}`);
+          }
+        });
+    }
+    expect(found).toEqual([]);
+  });
+
   test("the engine's built-in themes carry the same surfaces", () => {
     // The app applies a theme's tokens inline, so an engine built-in that still
     // holds an old fill shadows index.css: the real app shows the theme file's

apps/desktop/src/ui/AddHarness.tsx

@@ -153,7 +153,7 @@ export function AddHarnessForm({ onClose }: { onClose: () => void }) {
       )}
       <div className="flex items-center gap-2">
         <Action type="submit" prominent disabled={!!busy}>
-          {busy && <Spinner size={11} />}
+          {busy && <Spinner size={12} />}
           {busy === "adding" ? "Adding…" : busy === "verifying" ? "Verifying…" : "Add and verify"}
         </Action>
         <Action quiet disabled={!!busy} onClick={onClose}>
@@ -216,7 +216,7 @@ export function HarnessCommandFields({
             onClick={() => patch({ args: [...form.args, ""] })}
             className="flex items-center gap-1 self-start text-caption text-accent hover:underline"
           >
-            <Plus size={11} />
+            <Plus size={12} />
             Add argument
           </button>
         </div>
@@ -263,7 +263,7 @@ export function HarnessCommandFields({
             onClick={() => patch({ env: [...form.env, { name: "", value: "" }] })}
             className="flex items-center gap-1 self-start text-caption text-accent hover:underline"
           >
-            <Plus size={11} />
+            <Plus size={12} />
             Add variable
           </button>
         </div>

apps/desktop/src/ui/AgentViews.tsx

@@ -122,13 +122,13 @@ export function AgentAvatar({
           className="-right-1 -bottom-1 absolute flex size-3 items-center justify-center rounded-full bg-bg ring-2 ring-bg"
         >
           {state === "working" ? (
-            <Spinner size={8} className="text-accent" />
+            <Spinner size={10} className="text-accent" />
           ) : state === "failed" ? (
-            <X size={9} strokeWidth={3} className="text-danger" />
+            <X size={10} strokeWidth={3} className="text-danger" />
           ) : state === "stopped" ? (
-            <Minus size={9} strokeWidth={3} className="text-fg-faint" />
+            <Minus size={10} strokeWidth={3} className="text-fg-faint" />
           ) : (
-            <Check size={9} strokeWidth={3} className="text-success rc-dot-in" />
+            <Check size={10} strokeWidth={3} className="text-success rc-dot-in" />
           )}
         </span>
       )}

apps/desktop/src/ui/Attachments.tsx

@@ -146,7 +146,7 @@ export function AttachmentStrip({
               onClick={() => onRemove(a.id)}
               className="rc-glass absolute top-1.5 right-1.5 flex size-[20px] items-center justify-center rounded-full text-fg opacity-0 shadow-1 hover:bg-surface-3 group-hover:opacity-100 focus-visible:opacity-100"
             >
-              <X size={11} strokeWidth={2.5} />
+              <X size={12} strokeWidth={2.5} />
             </button>
           </div>
         ) : null,

apps/desktop/src/ui/AttentionCards.tsx

@@ -175,7 +175,7 @@ function ApprovalActions({
         <DropdownMenu.Root modal={false}>
           <DropdownMenu.Trigger asChild>
             <Pill size="sm" quiet aria-label={plan ? "More ways to build" : "Allow for longer"}>
-              {grants.length > 0 ? "Grant" : "More"} <ChevronDown size={11} />
+              {grants.length > 0 ? "Grant" : "More"} <ChevronDown size={12} />
             </Pill>
           </DropdownMenu.Trigger>
           <MenuContent side="top" align="end" className="max-w-[360px] min-w-[220px]">
@@ -676,7 +676,7 @@ export function QuestionCard({
       }}
     >
       <div className="flex min-w-0 items-center gap-2">
-        <MessageCircleQuestion size={15} className="shrink-0 text-accent" aria-hidden />
+        <MessageCircleQuestion size={16} className="shrink-0 text-accent" aria-hidden />
         <h2 id={headId} className="m-0 min-w-0 flex-1 truncate font-semibold text-accent text-body">
           {from ? `From ${from}: ` : ""}
           {q.header || "RustCode has a question"}
@@ -928,7 +928,7 @@ export function ChildRequestCard({
           From <span className="font-medium text-fg">{from}</span>
         </span>
         <ArrowUpRight
-          size={11}
+          size={12}
           className="shrink-0 text-fg-faint opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"
         />
       </button>

apps/desktop/src/ui/Board.tsx

@@ -113,7 +113,7 @@ function Card({
         <span className="mt-1.5 flex flex-wrap items-center gap-1 text-caption text-fg-muted">
           {wt ? (
             <span className="flex max-w-full items-center gap-0.5 rounded-sm bg-fill-subtle px-1 font-mono text-[10px]">
-              <GitBranch size={9} className="shrink-0" />
+              <GitBranch size={10} className="shrink-0" />
               <span className="truncate">{wt.branch}</span>
             </span>
           ) : (
@@ -129,7 +129,7 @@ function Card({
           {status === "review" ? (
             <Tooltip label="Settle">
               <Pill size="sm" aria-label="Settle" onClick={() => settleThread(session.id)}>
-                <CircleCheck size={11} /> Settle
+                <CircleCheck size={12} /> Settle
               </Pill>
             </Tooltip>
           ) : (
@@ -139,7 +139,7 @@ function Card({
                 aria-label="Back to review"
                 onClick={() => void setThreadStatus(session.id, "review")}
               >
-                <Eye size={11} /> Review
+                <Eye size={12} /> Review
               </Pill>
             </Tooltip>
           )}
@@ -150,7 +150,7 @@ function Card({
               onClick={() => void setThreadStatus(session.id, "idle")}
               className="flex size-6 items-center justify-center rounded-full bg-fill hover:bg-fill-strong"
             >
-              <Undo2 size={11} />
+              <Undo2 size={12} />
             </button>
           </Tooltip>
         </div>

apps/desktop/src/ui/Branches.tsx

@@ -26,7 +26,7 @@ export function OriginChip({ threadId }: { threadId: string }) {
       onClick={() => open && selectThread(open)}
       className="flex min-w-0 max-w-[260px] shrink items-center gap-1 rounded-sm px-1 text-caption text-fg-muted enabled:hover:bg-fill-subtle enabled:hover:text-fg disabled:cursor-default"
     >
-      <Glyph kind={origin.kind} size={11} />
+      <Glyph kind={origin.kind} size={12} />
       <span className="shrink-0">{line.label}</span>
       <span className="min-w-0 truncate font-medium">{line.title}</span>
       {open && <CornerUpLeft size={10} className="shrink-0 text-fg-faint" />}
@@ -46,7 +46,7 @@ export function BranchRow({ branch }: { branch: Branch }) {
   const line = branchLine(branch);
   return (
     <div className="flex h-6 items-center justify-center gap-1.5 text-caption text-fg-faint">
-      <Glyph kind={branch.kind} size={11} />
+      <Glyph kind={branch.kind} size={12} />
       <span>{line.label}</span>
       <Tooltip label={branch.kind === "fork" ? "Open the fork" : "Open the side chat beside this thread"}>
         <button

apps/desktop/src/ui/Capabilities.tsx

@@ -195,7 +195,7 @@ export function CapabilitiesPage() {
         )
       : null;
     if (reason && !local) {
-      toast(`Not added: ${reason}, and this machine is not in the chosen scope.`, "error");
+      toast(`Not added: ${reason}, and this computer is not in the chosen scope.`, "error");
       return false;
     }
     const recipients = reason && local ? [local] : writes;
@@ -206,16 +206,16 @@ export function CapabilitiesPage() {
     for (const failure of result.failures) toast(`${failure.name}: ${failure.message}`, "error");
     if (reason && local && result.succeeded.length) {
       toast(
-        `Added to ${local.name} only: ${reason}. The other machines did not get it; set it up there yourself.`,
+        `Added to ${local.name} only: ${reason}. The other environments did not get it; set it up there yourself.`,
         "info",
       );
     } else if (isAdd && result.succeeded.length) {
       const keys = mcpSecretKeys(params);
       const blanked = keys.length > 0 && result.succeeded.some((machine) => !machine.local);
       toast(
         blanked
-          ? `Added to ${result.succeeded.length} machines. ${keys.join(", ")} ${keys.length === 1 ? "stays" : "stay"} on this machine; set ${keys.length === 1 ? "it" : "them"} on the others.`
-          : `Added to ${result.succeeded.length} ${result.succeeded.length === 1 ? "machine" : "machines"}.`,
+          ? `Added to ${result.succeeded.length} environments. ${keys.join(", ")} ${keys.length === 1 ? "stays" : "stay"} on this computer; set ${keys.length === 1 ? "it" : "them"} on the others.`
+          : `Added to ${result.succeeded.length} ${result.succeeded.length === 1 ? "environment" : "environments"}.`,
         "success",
       );
     }
@@ -249,7 +249,7 @@ export function CapabilitiesPage() {
       )}
       {writes.length > 1 && (
         <Group
-          title="Add to all machines"
+          title="Add to all environments"
           action={
             <Action size="sm" onClick={() => setAddingAll(!addingAll)} aria-expanded={addingAll}>
               <Plus size={12} /> Add server to all
@@ -395,7 +395,7 @@ function CopyMenu({
       value: `machine:${machine.host}`,
       label: `Copy to ${machine.name}`,
     })),
-    ...(others.length > 1 ? [{ value: "all", label: "Copy to all machines" }] : []),
+    ...(others.length > 1 ? [{ value: "all", label: "Copy to all environments" }] : []),
   ];
   return (
     <Select
@@ -565,7 +565,7 @@ function McpRow({
           className="-mx-1.5 flex min-w-0 flex-1 items-center gap-2 rounded-md px-1.5 py-1 text-left hover:bg-fill-subtle"
         >
           <ChevronRight
-            size={11}
+            size={12}
             strokeWidth={2.5}
             className={cx("shrink-0 text-fg-faint transition-transform duration-150", open && "rotate-90")}
           />
@@ -640,7 +640,7 @@ function McpRow({
               <>
                 <dt className="text-fg-faint">Set here</dt>
                 <dd className="m-0 text-fg-muted">
-                  {[...s.envKeys, ...s.headerKeys].join(", ")}. Values stay on this machine.
+                  {[...s.envKeys, ...s.headerKeys].join(", ")}. Values stay on this computer.
                 </dd>
               </>
             )}

apps/desktop/src/ui/ChangesPanel.tsx

@@ -96,7 +96,7 @@ function FileSection({
         className="sticky top-0 z-10 -mx-3 flex w-[calc(100%+1.5rem)] items-center gap-2 bg-surface-2 px-4 py-1.5 text-left hover:bg-fill-subtle"
       >
         <ChevronRight
-          size={11}
+          size={12}
           strokeWidth={2.5}
           className={cx(
             "shrink-0 text-fg-faint transition-transform duration-150",
@@ -247,7 +247,7 @@ export function ChangesPanel() {
             </p>
             {!data.files.length && (
               <div className="flex flex-col items-center gap-2 py-10 text-callout text-fg-muted">
-                <CircleCheck size={20} />
+                <CircleCheck size={18} />
                 No uncommitted changes
               </div>
             )}

apps/desktop/src/ui/ChatView.tsx

@@ -172,7 +172,7 @@ function ThreadStatusMenu({ threadId }: { threadId: string }) {
         >
           {wt && (
             <span className="flex max-w-[160px] items-center gap-1 font-mono text-caption">
-              <GitBranch size={11} className="shrink-0" />
+              <GitBranch size={12} className="shrink-0" />
               <span className="truncate">{wt.branch}</span>
             </span>
           )}
@@ -673,7 +673,7 @@ function SettledBar({ threadId }: { threadId: string }) {
       <CircleCheck size={12} className="shrink-0 text-success" />
       <span className="min-w-0 flex-1 truncate font-medium text-fg-muted">Settled</span>
       <Pill size="sm" quiet onClick={() => void setThreadStatus(threadId, "idle")}>
-        <CircleDashed size={11} /> Unsettle
+        <CircleDashed size={12} /> Unsettle
       </Pill>
     </div>
   );

apps/desktop/src/ui/CommandPalette.tsx

@@ -398,7 +398,7 @@ export function CommandPalette() {
         >
           <Dialog.Title className="sr-only">Command palette</Dialog.Title>
           <div className="flex h-[52px] items-center gap-3 px-4">
-            <Search size={17} className="text-fg-muted" />
+            <Search size={16} className="text-fg-muted" />
             <input
               autoFocus
               value={query}

apps/desktop/src/ui/Compare.tsx

@@ -77,7 +77,7 @@ function CompareCard({ link, fanOut, kept }: { link: Link; fanOut: string; kept?
       </header>
       {wt && (
         <span className="flex items-center gap-1 truncate font-mono text-caption text-fg-muted">
-          <GitBranch size={11} className="shrink-0" />
+          <GitBranch size={12} className="shrink-0" />
           {wt.branch}
         </span>
       )}

apps/desktop/src/ui/Composer.tsx

@@ -1497,7 +1497,7 @@ export const Composer = memo(function Composer({
             // A queued message is edited here, not in an input of its own: its text, command, links
             // and attachments are the composer's while it is open, and ⏎ saves them where it waits.
             <div className="flex items-center gap-1.5 px-5 pt-2 text-caption text-accent">
-              <Pencil size={11} />
+              <Pencil size={12} />
               <b>Editing a queued message</b>
               <span className="text-fg-muted">· ⏎ saves it in the queue, esc leaves it</span>
               <Pill quiet size="sm" className="ml-auto" onClick={() => cancelQueuedEdit()}>
@@ -1507,7 +1507,7 @@ export const Composer = memo(function Composer({
           )}
           {editing && (
             <div className="flex items-center gap-1.5 px-5 pt-2 text-caption text-accent">
-              <Pencil size={11} />
+              <Pencil size={12} />
               <b>Editing a sent message</b>
               <span className="text-fg-muted">· sending takes the thread back to it</span>
               <Pill
@@ -1850,7 +1850,7 @@ function LimitWaitRow({ threadId }: { threadId: string }) {
         : "";
   return (
     <div className="flex items-center gap-1.5 px-5 pt-2 text-caption text-fg-muted">
-      {offline ? <WifiOff size={11} className="shrink-0" /> : <Clock size={11} className="shrink-0" />}
+      {offline ? <WifiOff size={12} className="shrink-0" /> : <Clock size={12} className="shrink-0" />}
       <span className="min-w-0 truncate">{text}</span>
       <Pill quiet size="sm" className="ml-auto shrink-0" onClick={() => resumeWaitNow(threadId)}>
         Send now

apps/desktop/src/ui/ComputerUseGroup.tsx

@@ -54,7 +54,7 @@ export function ComputerUseGroup() {
       {settings.browser_available !== true && (
         <Row
           title="Chrome/Chromium not found"
-          subtitle="Install Google Chrome or Chromium on this machine."
+          subtitle="Install Google Chrome or Chromium on this computer."
           hint="For a custom location, set computer_use.executable in config.toml."
         />
       )}

apps/desktop/src/ui/ConnectRequests.tsx

@@ -136,7 +136,7 @@ function RequestCard({
             {request.remoteAddr ? ` at ${request.remoteAddr}` : ""}
           </div>
           <p className="m-0 pt-2 text-caption text-fg-faint leading-normal">
-            {request.deviceKind === "desktop" && <>Can see and run all threads on this machine. </>}
+            {request.deviceKind === "desktop" && <>Can see and run all threads on this computer. </>}
             Accept only a device you have with you. This computer then shows a code to enter on it.
           </p>
         </div>

apps/desktop/src/ui/DelegateStatus.tsx

@@ -200,7 +200,7 @@ export function DelegateStatusPanel({ threadId }: { threadId: string }) {
             >
               {panelLabel(rows)}
             </span>
-            {rows.some((row) => row.state === "working") && <Spinner size={9} className="text-accent" />}
+            {rows.some((row) => row.state === "working") && <Spinner size={10} className="text-accent" />}
           </button>
           {!folded && (
             <div id={rowsId} className="flex max-h-[min(240px,35vh)] flex-col gap-0.5 overflow-y-auto">
@@ -230,7 +230,7 @@ export function StatusReplyRow({ rows }: { rows: readonly DelegateStatusRow[] })
   return (
     <div className="flex flex-col gap-1 rounded-xl border border-border bg-fill-subtle px-1 py-1.5">
       <div className="flex items-center gap-1.5 px-2 text-caption text-fg-muted">
-        <Layers size={11} aria-hidden className="shrink-0 text-fg-faint" />
+        <Layers size={12} aria-hidden className="shrink-0 text-fg-faint" />
         <span className="font-medium text-fg">Status</span>
         <span className="min-w-0 truncate">· {statusSummary(rows)}</span>
         <span className="ml-auto shrink-0 text-fg-faint">Local reply · no model turn</span>

apps/desktop/src/ui/DelegateTree.tsx

@@ -341,7 +341,7 @@ export function DelegateTree({
     return (
       <Tooltip label={<DelegateTip views={views} />}>
         <span className="mt-1 flex min-w-0 items-center gap-1 text-caption text-fg-muted">
-          <ListTree size={11} aria-hidden className="shrink-0 text-fg-faint" />
+          <ListTree size={12} aria-hidden className="shrink-0 text-fg-faint" />
           <span className="shrink-0 tabular">
             {total.threads} {total.threads === 1 ? "delegate" : "delegates"}
           </span>

apps/desktop/src/ui/Dictation.tsx

@@ -404,7 +404,7 @@ export function DictationButton({ dictation }: { dictation: Dictation }) {
             onPointerUp={hold ? dictation.release : undefined}
             className="flex size-7 items-center justify-center rounded-full bg-danger text-accent-fg hover:bg-danger/85"
           >
-            <Square size={9} fill="currentColor" strokeWidth={0} />
+            <Square size={10} fill="currentColor" strokeWidth={0} />
           </button>
         </Tooltip>
       </div>

apps/desktop/src/ui/EarlierAttempts.tsx

@@ -85,7 +85,7 @@ function EarlierAttempt({
     <section aria-label="Earlier attempt" className="flex flex-col gap-3">
       <div className="flex items-center gap-2 text-caption text-fg-faint">
         <span className="h-px flex-1 bg-border" />
-        <History size={11} />
+        <History size={12} />
         <span className="font-medium">Earlier attempt</span>
         <span className="tabular">
           {turns} turn{turns === 1 ? "" : "s"}
@@ -114,7 +114,7 @@ function AttemptAction({ threadId, attempt }: { threadId: string; attempt: Attem
   if (attempt.head === undefined)
     return (
       <span className="flex items-center gap-1">
-        <TriangleAlert size={11} />
+        <TriangleAlert size={12} />
         The state it left was not kept
       </span>
     );