From 44c583020696595bf53d28a8b47e6d64aafaaf6c Mon Sep 17 00:00:00 2001
From: Edgar Twigg <ned.twigg@diffplug.com>
Date: Thu, 30 Apr 2026 10:07:36 -0700
Subject: [PATCH 01/12] Use platform-specific command mode hint

---
 lib/src/components/Baseboard.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/lib/src/components/Baseboard.tsx b/lib/src/components/Baseboard.tsx
index e145857..b3ac7f9 100644
--- a/lib/src/components/Baseboard.tsx
+++ b/lib/src/components/Baseboard.tsx
@@ -3,6 +3,7 @@ import { CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react';
 import { Door } from './Door';
 import { DoorElementsContext } from './wall/wall-context';
 import type { DooredItem } from './wall/wall-types';
+import { IS_MAC } from '../lib/platform';
 import { DEFAULT_ACTIVITY_STATE, getActivitySnapshot, subscribeToActivity } from '../lib/terminal-registry';
 
 export interface BaseboardProps {
@@ -60,7 +61,9 @@ export function Baseboard({ items, onReattach, notice }: BaseboardProps) {
   }, [itemKey]);
 
   // Keyboard shortcut hint — only show when there's enough space and no doors
-  const shortcutHint = 'LCmd → RCmd to enter command mode';
+  const shortcutHint = IS_MAC
+    ? 'LCmd → RCmd to enter command mode'
+    : 'LShift → RShift to enter command mode';
   const showHint = items.length === 0 && containerWidth > 350;
 
   // Calculate which doors fit

From 88bdc4320f4cec9ed67aaebf9bb70b1f605b905c Mon Sep 17 00:00:00 2001
From: Edgar Twigg <ned.twigg@diffplug.com>
Date: Thu, 30 Apr 2026 10:16:53 -0700
Subject: [PATCH 02/12] Use shared small text size for update banner

---
 standalone/src/UpdateBanner.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/standalone/src/UpdateBanner.tsx b/standalone/src/UpdateBanner.tsx
index ad67b5a..e080902 100644
--- a/standalone/src/UpdateBanner.tsx
+++ b/standalone/src/UpdateBanner.tsx
@@ -34,7 +34,7 @@ export function UpdateBanner({ state, onDismiss, onOpenChangelog }: UpdateBanner
   }
 
   return (
-    <span className="flex items-center gap-1.5 pb-1 text-[9px] font-mono tracking-[0.06em] text-muted">
+    <span className="flex items-center gap-1.5 pb-1 text-sm font-mono tracking-[0.06em] text-muted">
       <span className="truncate">{message}</span>
       {showChangelog && (
         <button

From 8f966a4c8c4806dba68875c4c6caf0bb7e3c65a0 Mon Sep 17 00:00:00 2001
From: Edgar Twigg <ned.twigg@diffplug.com>
Date: Thu, 30 Apr 2026 10:37:51 -0700
Subject: [PATCH 03/12] Align standalone app bar with inactive pane chrome

---
 lib/src/components/ThemePicker.tsx |  2 +-
 standalone/src/AppBar.tsx          | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/lib/src/components/ThemePicker.tsx b/lib/src/components/ThemePicker.tsx
index 1921a56..1441fc3 100644
--- a/lib/src/components/ThemePicker.tsx
+++ b/lib/src/components/ThemePicker.tsx
@@ -84,7 +84,7 @@ export function ThemePicker({ variant, className = '', defaultThemeId }: ThemePi
     : 'relative flex items-center';
   const triggerClass = isPlayground
     ? 'flex w-[116px] min-w-0 cursor-pointer items-baseline justify-end gap-1.5 rounded-md bg-[var(--color-header-inactive-bg)] text-right text-sm text-[var(--color-header-inactive-fg)] sm:w-40 md:w-56'
-    : 'flex h-6 cursor-pointer items-center gap-1 rounded px-2 text-xs text-muted transition-colors hover:bg-surface-raised hover:text-foreground';
+    : 'flex h-5 cursor-pointer items-center gap-1 rounded px-1.5 text-xs text-inherit transition-colors hover:bg-current/10';
   const menuClass = isPlayground
     ? 'fixed top-16 right-4 left-4 z-50 overflow-hidden rounded border font-mono shadow-2xl md:absolute md:top-full md:right-0 md:left-auto md:mt-2 md:w-[22rem]'
     : 'absolute right-0 top-full z-50 mt-1 w-[280px] overflow-hidden rounded border font-mono shadow-2xl';
diff --git a/standalone/src/AppBar.tsx b/standalone/src/AppBar.tsx
index 03689fa..f0e4056 100644
--- a/standalone/src/AppBar.tsx
+++ b/standalone/src/AppBar.tsx
@@ -19,6 +19,8 @@ const IS_MAC = typeof (navigator as any).userAgentData?.platform === 'string'
   ? (navigator as any).userAgentData.platform === 'macOS'
   : /Mac/.test(navigator.platform);
 const appWindow = getCurrentWindow();
+const APP_BAR_BUTTON_CLASS = 'flex h-5 min-w-5 items-center justify-center rounded transition-colors hover:bg-current/10';
+const WINDOW_CONTROL_BUTTON_CLASS = 'flex w-11 items-center justify-center text-inherit transition-colors hover:bg-current/10';
 
 // ── Tooltip wrapper ────────────────────────────────────────────────────────
 
@@ -52,7 +54,7 @@ function WinControls() {
     <div className="flex items-stretch self-stretch">
       <Tip label="Minimize">
         <button
-          className="flex w-11 items-center justify-center text-muted transition-colors hover:bg-surface-raised hover:text-foreground"
+          className={WINDOW_CONTROL_BUTTON_CLASS}
           onClick={() => appWindow.minimize()}
           aria-label="Minimize"
         >
@@ -61,7 +63,7 @@ function WinControls() {
       </Tip>
       <Tip label={maximized ? 'Restore' : 'Maximize'}>
         <button
-          className="flex w-11 items-center justify-center text-muted transition-colors hover:bg-surface-raised hover:text-foreground"
+          className={WINDOW_CONTROL_BUTTON_CLASS}
           onClick={() => { appWindow.toggleMaximize(); }}
           aria-label={maximized ? 'Restore' : 'Maximize'}
         >
@@ -72,7 +74,7 @@ function WinControls() {
       </Tip>
       <Tip label="Close">
         <button
-          className="flex w-11 items-center justify-center text-muted transition-colors hover:bg-error/90 hover:text-white"
+          className="flex w-11 items-center justify-center text-inherit transition-colors hover:bg-error/10 hover:text-error"
           onClick={() => appWindow.close()}
           aria-label="Close"
         >
@@ -124,7 +126,7 @@ function ShellDropdown({ shells }: { shells: ShellEntry[] }) {
       {/* Primary action: [+] spawns a new terminal with the selected shell */}
       <Tip label={`New ${selected?.name ?? 'terminal'}`}>
         <button
-          className="flex h-6 items-center rounded-l px-1.5 text-xs text-muted transition-colors hover:bg-surface-raised hover:text-foreground"
+          className={APP_BAR_BUTTON_CLASS}
           onClick={() => selected && spawn(selected)}
           aria-label={`New ${selected?.name ?? 'terminal'}`}
         >
@@ -134,7 +136,7 @@ function ShellDropdown({ shells }: { shells: ShellEntry[] }) {
       {/* Selector: shows current shell name + caret; click to choose a different shell */}
       <Tip label="Choose shell">
         <button
-          className="flex h-6 items-center gap-1 rounded-r px-2 text-xs text-muted transition-colors hover:bg-surface-raised hover:text-foreground"
+          className="flex h-5 min-w-5 items-center gap-1 rounded px-1.5 text-xs transition-colors hover:bg-current/10"
           onClick={() => setOpen(!open)}
           aria-expanded={open}
           aria-haspopup="menu"
@@ -180,7 +182,7 @@ export function AppBar({ shells }: AppBarProps) {
   return (
     <div
       data-tauri-drag-region
-      className={`flex h-[30px] shrink-0 select-none items-center border-b border-border bg-app-bg text-app-fg text-xs ${
+      className={`flex h-[30px] shrink-0 select-none items-center bg-header-inactive-bg text-header-inactive-fg text-xs ${
         IS_MAC ? 'pl-[78px]' : ''
       }`}
     >

From 76194b30b755598bb43c4645ea4f2250f9da541d Mon Sep 17 00:00:00 2001
From: Edgar Twigg <ned.twigg@diffplug.com>
Date: Thu, 30 Apr 2026 10:48:45 -0700
Subject: [PATCH 04/12] Use pane active colors for focused app bar

---
 standalone/src/AppBar.tsx | 37 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/standalone/src/AppBar.tsx b/standalone/src/AppBar.tsx
index f0e4056..cdb5e9f 100644
--- a/standalone/src/AppBar.tsx
+++ b/standalone/src/AppBar.tsx
@@ -22,6 +22,35 @@ const appWindow = getCurrentWindow();
 const APP_BAR_BUTTON_CLASS = 'flex h-5 min-w-5 items-center justify-center rounded transition-colors hover:bg-current/10';
 const WINDOW_CONTROL_BUTTON_CLASS = 'flex w-11 items-center justify-center text-inherit transition-colors hover:bg-current/10';
 
+function useAppWindowFocused(): boolean {
+  const [focused, setFocused] = useState(() => document.hasFocus());
+
+  useEffect(() => {
+    let mounted = true;
+    appWindow.isFocused().then((value) => {
+      if (mounted) setFocused(value);
+    });
+
+    const unlistenFocusChanged = appWindow.onFocusChanged(({ payload }) => {
+      setFocused(payload);
+    });
+    const onFocus = () => setFocused(true);
+    const onBlur = () => setFocused(false);
+
+    window.addEventListener('focus', onFocus);
+    window.addEventListener('blur', onBlur);
+
+    return () => {
+      mounted = false;
+      unlistenFocusChanged.then((unlisten) => unlisten());
+      window.removeEventListener('focus', onFocus);
+      window.removeEventListener('blur', onBlur);
+    };
+  }, []);
+
+  return focused;
+}
+
 // ── Tooltip wrapper ────────────────────────────────────────────────────────
 
 function Tip({ label, children }: { label: string; children: React.ReactNode }) {
@@ -179,10 +208,16 @@ function ShellDropdown({ shells }: { shells: ShellEntry[] }) {
 // ── AppBar ─────────────────────────────────────────────────────────────────
 
 export function AppBar({ shells }: AppBarProps) {
+  const windowFocused = useAppWindowFocused();
+
   return (
     <div
       data-tauri-drag-region
-      className={`flex h-[30px] shrink-0 select-none items-center bg-header-inactive-bg text-header-inactive-fg text-xs ${
+      className={`flex h-[30px] shrink-0 select-none items-center text-xs ${
+        windowFocused
+          ? 'bg-header-active-bg text-header-active-fg'
+          : 'bg-header-inactive-bg text-header-inactive-fg'
+      } ${
         IS_MAC ? 'pl-[78px]' : ''
       }`}
     >

From db4b56a050963a4f55a40cfcdf87ecba5299476a Mon Sep 17 00:00:00 2001
From: Edgar Twigg <ned.twigg@diffplug.com>
Date: Thu, 30 Apr 2026 10:50:00 -0700
Subject: [PATCH 05/12] Match shell menu font size to theme menu

---
 standalone/src/AppBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/standalone/src/AppBar.tsx b/standalone/src/AppBar.tsx
index cdb5e9f..28d191b 100644
--- a/standalone/src/AppBar.tsx
+++ b/standalone/src/AppBar.tsx
@@ -186,7 +186,7 @@ function ShellDropdown({ shells }: { shells: ShellEntry[] }) {
                 key={shell.name}
                 role="menuitemradio"
                 aria-checked={isSelected}
-                className="flex w-full items-center gap-2 whitespace-nowrap px-3 py-1.5 text-left text-xs text-foreground transition-colors hover:bg-surface-raised"
+                className="flex w-full items-center gap-2 whitespace-nowrap px-3 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-surface-raised"
                 onClick={() => {
                   setSelected(shell);
                   setOpen(false);

From 084701e067846fe02ac1aee9a13187c47942753b Mon Sep 17 00:00:00 2001
From: Edgar Twigg <ned.twigg@diffplug.com>
Date: Thu, 30 Apr 2026 11:01:03 -0700
Subject: [PATCH 06/12] Reuse shared IS_MAC and align focus hook with
 WinControls pattern
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drop the local navigator-platform check in AppBar in favor of the canonical
IS_MAC export from lib/platform. Simplify useAppWindowFocused to mirror the
fetch-then-listen pattern already used by WinControls — Tauri's onFocusChanged
covers what the redundant DOM focus/blur listeners were doing.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 standalone/src/AppBar.tsx | 27 ++++-----------------------
 1 file changed, 4 insertions(+), 23 deletions(-)

diff --git a/standalone/src/AppBar.tsx b/standalone/src/AppBar.tsx
index 28d191b..ceab70d 100644
--- a/standalone/src/AppBar.tsx
+++ b/standalone/src/AppBar.tsx
@@ -4,6 +4,7 @@ import { CaretDownIcon, MinusIcon, CornersOutIcon, CornersInIcon, XIcon, PlusIco
 import { ThemePicker } from '../../lib/src/components/ThemePicker';
 import { PopupButtonRow } from '../../lib/src/components/design';
 import { setDefaultShellOpts } from '../../lib/src/lib/shell-defaults';
+import { IS_MAC } from '../../lib/src/lib/platform';
 
 export interface ShellEntry {
   name: string;
@@ -15,9 +16,6 @@ interface AppBarProps {
   shells: ShellEntry[];
 }
 
-const IS_MAC = typeof (navigator as any).userAgentData?.platform === 'string'
-  ? (navigator as any).userAgentData.platform === 'macOS'
-  : /Mac/.test(navigator.platform);
 const appWindow = getCurrentWindow();
 const APP_BAR_BUTTON_CLASS = 'flex h-5 min-w-5 items-center justify-center rounded transition-colors hover:bg-current/10';
 const WINDOW_CONTROL_BUTTON_CLASS = 'flex w-11 items-center justify-center text-inherit transition-colors hover:bg-current/10';
@@ -26,26 +24,9 @@ function useAppWindowFocused(): boolean {
   const [focused, setFocused] = useState(() => document.hasFocus());
 
   useEffect(() => {
-    let mounted = true;
-    appWindow.isFocused().then((value) => {
-      if (mounted) setFocused(value);
-    });
-
-    const unlistenFocusChanged = appWindow.onFocusChanged(({ payload }) => {
-      setFocused(payload);
-    });
-    const onFocus = () => setFocused(true);
-    const onBlur = () => setFocused(false);
-
-    window.addEventListener('focus', onFocus);
-    window.addEventListener('blur', onBlur);
-
-    return () => {
-      mounted = false;
-      unlistenFocusChanged.then((unlisten) => unlisten());
-      window.removeEventListener('focus', onFocus);
-      window.removeEventListener('blur', onBlur);
-    };
+    appWindow.isFocused().then(setFocused);
+    const unlisten = appWindow.onFocusChanged(({ payload }) => setFocused(payload));
+    return () => { unlisten.then(fn => fn()); };
   }, []);
 
   return focused;

From 236e8b3ba5b4267d8c9377a5621772bd56a3169a Mon Sep 17 00:00:00 2001
From: Edgar Twigg <ned.twigg@diffplug.com>
Date: Thu, 30 Apr 2026 11:05:42 -0700
Subject: [PATCH 07/12] Extract chromeButton design primitive for app-bar
 buttons

Five button variants across AppBar (standalone) and the ThemePicker
non-playground trigger (lib) shared the same compact "h-5, hover:bg-current/10"
pattern with small deltas: icon-only vs labeled, window-control sizing, danger
hover for the close button. Collapse them into a tailwind-variants primitive
in design.tsx alongside popupButton.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 lib/src/components/ThemePicker.tsx |  3 ++-
 lib/src/components/design.tsx      | 22 ++++++++++++++++++++++
 standalone/src/AppBar.tsx          | 14 ++++++--------
 3 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/lib/src/components/ThemePicker.tsx b/lib/src/components/ThemePicker.tsx
index 1441fc3..cc11464 100644
--- a/lib/src/components/ThemePicker.tsx
+++ b/lib/src/components/ThemePicker.tsx
@@ -14,6 +14,7 @@ import { ThemeSwatch } from './theme-picker/ThemeSwatch';
 import { ThemeStoreDialog } from './theme-picker/ThemeStoreDialog';
 import { useCloseOnOutsideAndEscape } from './theme-picker/use-close-on-outside';
 import { themePickerStyles as styles } from './theme-picker/styles';
+import { chromeButton } from './design';
 
 export type ThemePickerVariant = 'playground-header' | 'standalone-appbar';
 
@@ -84,7 +85,7 @@ export function ThemePicker({ variant, className = '', defaultThemeId }: ThemePi
     : 'relative flex items-center';
   const triggerClass = isPlayground
     ? 'flex w-[116px] min-w-0 cursor-pointer items-baseline justify-end gap-1.5 rounded-md bg-[var(--color-header-inactive-bg)] text-right text-sm text-[var(--color-header-inactive-fg)] sm:w-40 md:w-56'
-    : 'flex h-5 cursor-pointer items-center gap-1 rounded px-1.5 text-xs text-inherit transition-colors hover:bg-current/10';
+    : chromeButton({ kind: 'labeled' });
   const menuClass = isPlayground
     ? 'fixed top-16 right-4 left-4 z-50 overflow-hidden rounded border font-mono shadow-2xl md:absolute md:top-full md:right-0 md:left-auto md:mt-2 md:w-[22rem]'
     : 'absolute right-0 top-full z-50 mt-1 w-[280px] overflow-hidden rounded border font-mono shadow-2xl';
diff --git a/lib/src/components/design.tsx b/lib/src/components/design.tsx
index 3a8aa47..7823e95 100644
--- a/lib/src/components/design.tsx
+++ b/lib/src/components/design.tsx
@@ -50,6 +50,28 @@ export const popupButton = tv({
 
 export type PopupButtonVariants = VariantProps<typeof popupButton>;
 
+// Chrome buttons: icon-only and labeled triggers used in the standalone app
+// bar, plus the Windows/Linux native-style window controls. All inherit text
+// color from the surrounding chrome so they tint with the active/inactive
+// header palette.
+export const chromeButton = tv({
+  base: 'flex items-center transition-colors',
+  variants: {
+    kind: {
+      icon: 'h-5 min-w-5 justify-center rounded',
+      labeled: 'h-5 min-w-5 gap-1 rounded px-1.5 text-xs text-inherit',
+      window: 'w-11 justify-center text-inherit',
+    },
+    tone: {
+      neutral: 'hover:bg-current/10',
+      danger: 'hover:bg-error/10 hover:text-error',
+    },
+  },
+  defaultVariants: { kind: 'icon', tone: 'neutral' },
+});
+
+export type ChromeButtonVariants = VariantProps<typeof chromeButton>;
+
 /** Keyboard shortcut rendered as `[keys]` in muted color. Use everywhere key
  *  bindings appear in UI text so the bracket convention is consistent. */
 export function Shortcut({
diff --git a/standalone/src/AppBar.tsx b/standalone/src/AppBar.tsx
index ceab70d..f20272d 100644
--- a/standalone/src/AppBar.tsx
+++ b/standalone/src/AppBar.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect, useRef, useCallback } from 'react';
 import { getCurrentWindow } from '@tauri-apps/api/window';
 import { CaretDownIcon, MinusIcon, CornersOutIcon, CornersInIcon, XIcon, PlusIcon, CheckIcon } from '@phosphor-icons/react';
 import { ThemePicker } from '../../lib/src/components/ThemePicker';
-import { PopupButtonRow } from '../../lib/src/components/design';
+import { PopupButtonRow, chromeButton } from '../../lib/src/components/design';
 import { setDefaultShellOpts } from '../../lib/src/lib/shell-defaults';
 import { IS_MAC } from '../../lib/src/lib/platform';
 
@@ -17,8 +17,6 @@ interface AppBarProps {
 }
 
 const appWindow = getCurrentWindow();
-const APP_BAR_BUTTON_CLASS = 'flex h-5 min-w-5 items-center justify-center rounded transition-colors hover:bg-current/10';
-const WINDOW_CONTROL_BUTTON_CLASS = 'flex w-11 items-center justify-center text-inherit transition-colors hover:bg-current/10';
 
 function useAppWindowFocused(): boolean {
   const [focused, setFocused] = useState(() => document.hasFocus());
@@ -64,7 +62,7 @@ function WinControls() {
     <div className="flex items-stretch self-stretch">
       <Tip label="Minimize">
         <button
-          className={WINDOW_CONTROL_BUTTON_CLASS}
+          className={chromeButton({ kind: 'window' })}
           onClick={() => appWindow.minimize()}
           aria-label="Minimize"
         >
@@ -73,7 +71,7 @@ function WinControls() {
       </Tip>
       <Tip label={maximized ? 'Restore' : 'Maximize'}>
         <button
-          className={WINDOW_CONTROL_BUTTON_CLASS}
+          className={chromeButton({ kind: 'window' })}
           onClick={() => { appWindow.toggleMaximize(); }}
           aria-label={maximized ? 'Restore' : 'Maximize'}
         >
@@ -84,7 +82,7 @@ function WinControls() {
       </Tip>
       <Tip label="Close">
         <button
-          className="flex w-11 items-center justify-center text-inherit transition-colors hover:bg-error/10 hover:text-error"
+          className={chromeButton({ kind: 'window', tone: 'danger' })}
           onClick={() => appWindow.close()}
           aria-label="Close"
         >
@@ -136,7 +134,7 @@ function ShellDropdown({ shells }: { shells: ShellEntry[] }) {
       {/* Primary action: [+] spawns a new terminal with the selected shell */}
       <Tip label={`New ${selected?.name ?? 'terminal'}`}>
         <button
-          className={APP_BAR_BUTTON_CLASS}
+          className={chromeButton({ kind: 'icon' })}
           onClick={() => selected && spawn(selected)}
           aria-label={`New ${selected?.name ?? 'terminal'}`}
         >
@@ -146,7 +144,7 @@ function ShellDropdown({ shells }: { shells: ShellEntry[] }) {
       {/* Selector: shows current shell name + caret; click to choose a different shell */}
       <Tip label="Choose shell">
         <button
-          className="flex h-5 min-w-5 items-center gap-1 rounded px-1.5 text-xs transition-colors hover:bg-current/10"
+          className={chromeButton({ kind: 'labeled' })}
           onClick={() => setOpen(!open)}
           aria-expanded={open}
           aria-haspopup="menu"

From c0ba61f567fa6966c25b0e6eda3a18e6a6b9dfc5 Mon Sep 17 00:00:00 2001
From: Edgar Twigg <ned.twigg@diffplug.com>
Date: Thu, 30 Apr 2026 11:10:16 -0700
Subject: [PATCH 08/12] Use fixed OS close-button colors regardless of theme

The window close button hover should always be the native OS red
(#b92a1b on white), not a theme-tinted error color. Drop the generic
`tone: danger` variant in favor of a dedicated `windowClose` kind so
the special-case colors live with their only consumer.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 lib/src/components/design.tsx | 16 +++++++---------
 standalone/src/AppBar.tsx     |  2 +-
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/lib/src/components/design.tsx b/lib/src/components/design.tsx
index 7823e95..c431003 100644
--- a/lib/src/components/design.tsx
+++ b/lib/src/components/design.tsx
@@ -53,21 +53,19 @@ export type PopupButtonVariants = VariantProps<typeof popupButton>;
 // Chrome buttons: icon-only and labeled triggers used in the standalone app
 // bar, plus the Windows/Linux native-style window controls. All inherit text
 // color from the surrounding chrome so they tint with the active/inactive
-// header palette.
+// header palette — except `windowClose`, whose hover red matches the native
+// OS close button across themes.
 export const chromeButton = tv({
   base: 'flex items-center transition-colors',
   variants: {
     kind: {
-      icon: 'h-5 min-w-5 justify-center rounded',
-      labeled: 'h-5 min-w-5 gap-1 rounded px-1.5 text-xs text-inherit',
-      window: 'w-11 justify-center text-inherit',
-    },
-    tone: {
-      neutral: 'hover:bg-current/10',
-      danger: 'hover:bg-error/10 hover:text-error',
+      icon: 'h-5 min-w-5 justify-center rounded hover:bg-current/10',
+      labeled: 'h-5 min-w-5 gap-1 rounded px-1.5 text-xs text-inherit hover:bg-current/10',
+      window: 'w-11 justify-center text-inherit hover:bg-current/10',
+      windowClose: 'w-11 justify-center text-inherit hover:bg-[#b92a1b] hover:text-white',
     },
   },
-  defaultVariants: { kind: 'icon', tone: 'neutral' },
+  defaultVariants: { kind: 'icon' },
 });
 
 export type ChromeButtonVariants = VariantProps<typeof chromeButton>;
diff --git a/standalone/src/AppBar.tsx b/standalone/src/AppBar.tsx
index f20272d..ecd796d 100644
--- a/standalone/src/AppBar.tsx
+++ b/standalone/src/AppBar.tsx
@@ -82,7 +82,7 @@ function WinControls() {
       </Tip>
       <Tip label="Close">
         <button
-          className={chromeButton({ kind: 'window', tone: 'danger' })}
+          className={chromeButton({ kind: 'windowClose' })}
           onClick={() => appWindow.close()}
           aria-label="Close"
         >

From 1fb04a488a860da3db38d6f8168c8b8e5b40887c Mon Sep 17 00:00:00 2001
From: Edgar Twigg <ned.twigg@diffplug.com>
Date: Thu, 30 Apr 2026 11:27:04 -0700
Subject: [PATCH 09/12] Re-stage sidecar resources when source files change

tauri-build doesn't expand bundle.resources globs into rerun-if-changed
entries, so editing standalone/sidecar/*.js doesn't rerun build.rs and
the staged copy under target/<profile>/_up_/sidecar/ goes stale. That
silently defeated the parent-PID watchdog from 8e60dd4: the source had
the fix but already-built dev artifacts didn't, so newly-spawned
sidecars still ran pre-watchdog code and got orphaned anyway.
---
 standalone/src-tauri/build.rs | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/standalone/src-tauri/build.rs b/standalone/src-tauri/build.rs
index 4bb43c6..cafde16 100644
--- a/standalone/src-tauri/build.rs
+++ b/standalone/src-tauri/build.rs
@@ -11,6 +11,11 @@ fn main() {
     println!("cargo:rerun-if-env-changed=NODE_BINARY");
     println!("cargo:rerun-if-env-changed=PATH");
 
+    // tauri-build doesn't expand bundle.resources globs into rerun-if-changed
+    // entries, so edits to ../sidecar/*.js wouldn't rerun this script and the
+    // staged copy under target/<profile>/_up_/sidecar/ would go stale.
+    println!("cargo:rerun-if-changed=../sidecar");
+
     bundle_node_runtime().expect("failed to prepare bundled Node.js runtime");
     tauri_build::build()
 }

From c0f1a0ebe94b123553efd56a8f1dc3c82116680f Mon Sep 17 00:00:00 2001
From: Edgar Twigg <ned.twigg@diffplug.com>
Date: Thu, 30 Apr 2026 11:29:47 -0700
Subject: [PATCH 10/12] Mock isFocused/onFocusChanged for Storybook AppBar
 story

useAppWindowFocused now calls appWindow.isFocused() and onFocusChanged().
Add stub implementations to the Tauri window mock so the AppBar story
doesn't throw when rendered in Storybook/Chromatic.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 lib/.storybook/tauri-window-mock.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/lib/.storybook/tauri-window-mock.ts b/lib/.storybook/tauri-window-mock.ts
index f12e622..78a2ef5 100644
--- a/lib/.storybook/tauri-window-mock.ts
+++ b/lib/.storybook/tauri-window-mock.ts
@@ -1,6 +1,9 @@
 const mockWindow = {
   isMaximized: () => Promise.resolve(false),
   onResized: (_callback: () => void) => Promise.resolve(() => {}),
+  isFocused: () => Promise.resolve(true),
+  onFocusChanged: (_callback: (event: { payload: boolean }) => void) =>
+    Promise.resolve(() => {}),
   minimize: () => Promise.resolve(),
   toggleMaximize: () => Promise.resolve(),
   close: () => Promise.resolve(),

From a963babed50d780217c41f98915314483779d1bd Mon Sep 17 00:00:00 2001
From: Edgar Twigg <ned.twigg@diffplug.com>
Date: Thu, 30 Apr 2026 11:42:12 -0700
Subject: [PATCH 11/12] Drop tracking-[0.06em] from mono text

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 lib/src/components/Baseboard.tsx | 8 ++++----
 standalone/src/UpdateBanner.tsx  | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/src/components/Baseboard.tsx b/lib/src/components/Baseboard.tsx
index b3ac7f9..a986956 100644
--- a/lib/src/components/Baseboard.tsx
+++ b/lib/src/components/Baseboard.tsx
@@ -151,19 +151,19 @@ export function Baseboard({ items, onReattach, notice }: BaseboardProps) {
           );
         })}
       </div>
-      <button ref={arrowMeasureEl} className="absolute -left-[9999px] flex h-5 shrink-0 items-center gap-1 rounded px-1.5 pb-px text-sm font-medium font-mono tracking-[0.06em] text-muted" aria-hidden tabIndex={-1}>
+      <button ref={arrowMeasureEl} className="absolute -left-[9999px] flex h-5 shrink-0 items-center gap-1 rounded px-1.5 pb-px text-sm font-medium font-mono text-muted" aria-hidden tabIndex={-1}>
         9 more <CaretRightIcon size={10} weight="bold" />
       </button>
 
       {items.length === 0 && showHint && (
-        <span className="truncate pb-1 text-sm font-mono tracking-[0.06em] text-muted">
+        <span className="truncate pb-1 text-sm font-mono text-muted">
           {shortcutHint}
         </span>
       )}
 
       {hiddenLeft > 0 && (
         <button
-          className="flex h-5 shrink-0 items-center gap-1 rounded px-1.5 pb-px text-sm font-medium font-mono tracking-[0.06em] text-muted transition-colors hover:bg-surface-raised hover:text-foreground"
+          className="flex h-5 shrink-0 items-center gap-1 rounded px-1.5 pb-px text-sm font-medium font-mono text-muted transition-colors hover:bg-surface-raised hover:text-foreground"
           onClick={scrollLeft}
         >
           <CaretLeftIcon size={10} weight="bold" />
@@ -187,7 +187,7 @@ export function Baseboard({ items, onReattach, notice }: BaseboardProps) {
 
       {hiddenRight > 0 && (
         <button
-          className="ml-auto flex h-5 shrink-0 items-center gap-1 rounded px-1.5 pb-px text-sm font-medium font-mono tracking-[0.06em] text-muted transition-colors hover:bg-surface-raised hover:text-foreground"
+          className="ml-auto flex h-5 shrink-0 items-center gap-1 rounded px-1.5 pb-px text-sm font-medium font-mono text-muted transition-colors hover:bg-surface-raised hover:text-foreground"
           onClick={scrollRight}
         >
           {hiddenRight} more
diff --git a/standalone/src/UpdateBanner.tsx b/standalone/src/UpdateBanner.tsx
index e080902..6793041 100644
--- a/standalone/src/UpdateBanner.tsx
+++ b/standalone/src/UpdateBanner.tsx
@@ -34,7 +34,7 @@ export function UpdateBanner({ state, onDismiss, onOpenChangelog }: UpdateBanner
   }
 
   return (
-    <span className="flex items-center gap-1.5 pb-1 text-sm font-mono tracking-[0.06em] text-muted">
+    <span className="flex items-center gap-1.5 pb-1 text-sm font-mono text-muted">
       <span className="truncate">{message}</span>
       {showChangelog && (
         <button

From 935fd17651c7c5c50f8cbfd386e1793adc348613 Mon Sep 17 00:00:00 2001
From: Edgar Twigg <ned.twigg@diffplug.com>
Date: Thu, 30 Apr 2026 11:45:18 -0700
Subject: [PATCH 12/12] Share TODO pill tracking via design constant

Drops two tracking-normal resets and a Door title tracking-[0.02em]
that weren't pulling weight, and routes the remaining 0.08em on the
TODO pills through a single TODO_PILL_TRACKING_CLASS in design.tsx
so both pill sites stay in sync.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 lib/src/components/Door.tsx                    | 6 +++---
 lib/src/components/design.tsx                  | 4 ++++
 lib/src/components/wall/TerminalPaneHeader.tsx | 8 ++++----
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/lib/src/components/Door.tsx b/lib/src/components/Door.tsx
index c8b88ad..56a18a8 100644
--- a/lib/src/components/Door.tsx
+++ b/lib/src/components/Door.tsx
@@ -2,7 +2,7 @@ import { BellIcon } from '@phosphor-icons/react';
 import type { SessionStatus, TodoState } from '../lib/terminal-registry';
 import { useTodoPillContent } from './TodoPillBody';
 import { bellIconClass } from './bell-icon-class';
-import { TERMINAL_TOP_RADIUS_CLASS } from './design';
+import { TERMINAL_TOP_RADIUS_CLASS, TODO_PILL_TRACKING_CLASS } from './design';
 
 export interface DoorProps {
   doorId?: string;
@@ -30,7 +30,7 @@ export function Door({
         'relative flex h-6 max-w-[220px] min-w-[68px] items-center gap-2 overflow-hidden px-2.5',
         TERMINAL_TOP_RADIUS_CLASS,
         'bg-door-bg text-door-fg',
-        'text-sm font-medium font-mono tracking-[0.02em]',
+        'text-sm font-medium font-mono',
       ].join(' ')}
       onClick={onClick}
       title={title}
@@ -42,7 +42,7 @@ export function Door({
         <span className="flex shrink-0 items-center gap-1.5">
           {todoPill.visible && (
             <span
-              className="todo-pill-shell text-xs font-semibold tracking-[0.08em]"
+              className={`todo-pill-shell text-xs font-semibold ${TODO_PILL_TRACKING_CLASS}`}
               data-flourishing={todoPill.flourishing ? 'true' : 'false'}
             >
               {todoPill.body}
diff --git a/lib/src/components/design.tsx b/lib/src/components/design.tsx
index c431003..7793a86 100644
--- a/lib/src/components/design.tsx
+++ b/lib/src/components/design.tsx
@@ -18,6 +18,10 @@ export const TERMINAL_BOTTOM_RADIUS_CLASS = 'rounded-b-lg';
 export const TERMINAL_SELECTION_BORDER_RADIUS = `${TERMINAL_BORDER_RADIUS_REM}rem`;
 export const DOOR_SELECTION_BORDER_RADIUS = `${TERMINAL_BORDER_RADIUS_REM}rem ${TERMINAL_BORDER_RADIUS_REM}rem 0 0`;
 
+// Letter-spacing for the small semibold TODO pill — wider tracking keeps the
+// tiny label legible. Shared so both pill sites stay in sync.
+export const TODO_PILL_TRACKING_CLASS = 'tracking-[0.08em]';
+
 export function PopupButtonRow({
   className,
   ...props
diff --git a/lib/src/components/wall/TerminalPaneHeader.tsx b/lib/src/components/wall/TerminalPaneHeader.tsx
index febe36e..83ab65b 100644
--- a/lib/src/components/wall/TerminalPaneHeader.tsx
+++ b/lib/src/components/wall/TerminalPaneHeader.tsx
@@ -15,7 +15,7 @@ import {
 } from '@phosphor-icons/react';
 import { HeaderActionButton } from '../HeaderActionButton';
 import { TodoAlertDialog } from '../TodoAlertDialog';
-import { TERMINAL_TOP_RADIUS_CLASS } from '../design';
+import { TERMINAL_TOP_RADIUS_CLASS, TODO_PILL_TRACKING_CLASS } from '../design';
 import { bellIconClass } from '../bell-icon-class';
 import { useTodoPillContent } from '../TodoPillBody';
 import {
@@ -43,7 +43,7 @@ import {
 import { MouseOverrideBanner } from './MouseOverrideBanner';
 
 const tabVariant = tv({
-  base: `flex h-full w-full cursor-grab items-center gap-1.5 ${TERMINAL_TOP_RADIUS_CLASS} pl-2 pr-[5px] text-sm leading-none font-mono tracking-normal select-none active:cursor-grabbing`,
+  base: `flex h-full w-full cursor-grab items-center gap-1.5 ${TERMINAL_TOP_RADIUS_CLASS} pl-2 pr-[5px] text-sm leading-none font-mono select-none active:cursor-grabbing`,
   variants: {
     state: {
       active: 'bg-header-active-bg text-header-active-fg',
@@ -127,7 +127,7 @@ export function TerminalPaneHeader({ api }: IDockviewPanelHeaderProps) {
       <div className="flex flex-1 min-w-0 items-center gap-2">
         {isRenaming ? (
           <input
-            className="bg-transparent outline-none border-none text-inherit font-medium font-mono tracking-normal w-full min-w-0 p-0 m-0"
+            className="bg-transparent outline-none border-none text-inherit font-medium font-mono w-full min-w-0 p-0 m-0"
             defaultValue={api.title}
             autoFocus
             ref={(el) => el?.select()}
@@ -194,7 +194,7 @@ export function TerminalPaneHeader({ api }: IDockviewPanelHeaderProps) {
             type="button"
             data-session-todo-for={api.id}
             data-flourishing={todoPill.flourishing ? 'true' : 'false'}
-            className="todo-pill-shell shrink-0 rounded border border-current px-1.5 py-px text-xs font-semibold tracking-[0.08em] transition-colors hover:bg-current/10"
+            className={`todo-pill-shell shrink-0 rounded border border-current px-1.5 py-px text-xs font-semibold ${TODO_PILL_TRACKING_CLASS} transition-colors hover:bg-current/10`}
             aria-label="Dismiss TODO"
             aria-hidden={todoPill.flourishing ? true : undefined}
             onMouseDown={(e) => e.stopPropagation()}