diff --git a/src/chrome/BranchPicker.tsx b/src/chrome/BranchPicker.tsx
index 450f34d5..9154ff2b 100644
--- a/src/chrome/BranchPicker.tsx
+++ b/src/chrome/BranchPicker.tsx
@@ -345,7 +345,7 @@ export function BranchPicker({
                 ref={search}
                 type="text"
                 value={query}
-                placeholder="Search or create a branch..."
+                placeholder="Search or create a branch…"
                 aria-label="Search or create a branch"
                 spellCheck={false}
                 autoComplete="off"
diff --git a/src/chrome/ColorPickerPopover.test.ts b/src/chrome/ColorPickerPopover.test.ts
new file mode 100644
index 00000000..8a727b62
--- /dev/null
+++ b/src/chrome/ColorPickerPopover.test.ts
@@ -0,0 +1,151 @@
+// @vitest-environment happy-dom
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ColorPickerPopover } from "./ColorPickerPopover";
+
+let container: HTMLDivElement;
+let root: ReturnType<typeof createRoot>;
+
+beforeEach(() => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  container = document.createElement("div");
+  document.body.append(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+function key(target: Element, value: string, shiftKey = false) {
+  act(() => {
+    target.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: value,
+        shiftKey,
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+  });
+}
+
+describe("ColorPickerPopover keyboard controls", () => {
+  it("focuses the hex input when requested", () => {
+    act(() => {
+      root.render(
+        createElement(ColorPickerPopover, {
+          value: "#ff0000",
+          onChange: vi.fn(),
+          autoFocus: true,
+        }),
+      );
+    });
+
+    expect(document.activeElement).toBe(
+      container.querySelector('input[aria-label="Hex color"]'),
+    );
+  });
+
+  it("updates saturation, brightness, and hue with arrow keys", () => {
+    const onChange = vi.fn();
+    act(() => {
+      root.render(
+        createElement(ColorPickerPopover, {
+          value: "#ff0000",
+          onChange,
+        }),
+      );
+    });
+
+    const saturation = container.querySelector(
+      '[role="slider"][aria-label="Saturation and brightness"]',
+    )!;
+    const hue = container.querySelector('[role="slider"][aria-label="Hue"]')!;
+    key(saturation, "ArrowLeft");
+    expect(saturation.getAttribute("aria-valuenow")).toBe("99");
+    key(saturation, "ArrowDown", true);
+    expect(saturation.getAttribute("aria-valuetext")).toContain(
+      "90% brightness",
+    );
+    key(hue, "ArrowRight");
+    expect(hue.getAttribute("aria-valuenow")).toBe("1");
+    expect(onChange).toHaveBeenCalledTimes(3);
+  });
+});
+
+describe("ColorPickerPopover pointer controls", () => {
+  it.each(["Saturation and brightness", "Hue"])(
+    "stops the %s drag when unmounted",
+    (label) => {
+      const onChange = vi.fn();
+      const addListener = vi.spyOn(window, "addEventListener");
+      const removeListener = vi.spyOn(window, "removeEventListener");
+      act(() => {
+        root.render(
+          createElement(ColorPickerPopover, {
+            value: "#ff0000",
+            onChange,
+          }),
+        );
+      });
+
+      const slider = container.querySelector<HTMLElement>(
+        `[role="slider"][aria-label="${label}"]`,
+      )!;
+      vi.spyOn(slider, "getBoundingClientRect").mockReturnValue({
+        left: 0,
+        top: 0,
+        width: 100,
+        height: 100,
+        right: 100,
+        bottom: 100,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      });
+      vi.spyOn(slider, "setPointerCapture").mockImplementation(() => {});
+
+      act(() => {
+        slider.dispatchEvent(
+          new PointerEvent("pointerdown", {
+            pointerId: 1,
+            clientX: 50,
+            clientY: 50,
+            bubbles: true,
+            cancelable: true,
+          }),
+        );
+      });
+      onChange.mockClear();
+      const pointerTypes = [
+        "pointermove",
+        "pointerup",
+        "pointercancel",
+      ] as const;
+      const pointerListeners = new Map(
+        addListener.mock.calls.filter(([type]) =>
+          pointerTypes.includes(type as (typeof pointerTypes)[number]),
+        ),
+      );
+      expect(pointerListeners.size).toBe(pointerTypes.length);
+
+      act(() => root.render(null));
+      for (const type of pointerTypes) {
+        expect(removeListener).toHaveBeenCalledWith(
+          type,
+          pointerListeners.get(type),
+        );
+      }
+      window.dispatchEvent(
+        new PointerEvent("pointermove", { clientX: 75, clientY: 25 }),
+      );
+
+      expect(onChange).not.toHaveBeenCalled();
+    },
+  );
+});
diff --git a/src/chrome/ColorPickerPopover.tsx b/src/chrome/ColorPickerPopover.tsx
index 32fa0ec4..560f48ba 100644
--- a/src/chrome/ColorPickerPopover.tsx
+++ b/src/chrome/ColorPickerPopover.tsx
@@ -3,6 +3,7 @@ import {
   useEffect,
   useRef,
   useState,
+  type KeyboardEvent as ReactKeyboardEvent,
   type PointerEvent as ReactPointerEvent,
 } from "react";
 import { hexToHsv, hsvToHex, normalizeHex, type Hsv } from "../lib/colorUtils";
@@ -11,6 +12,8 @@ import { Pipette } from "./icons";
 type Props = {
   value: string;
   onChange: (hex: string) => void;
+  className?: string;
+  autoFocus?: boolean;
 };
 
 export function ColorSwatchRow({
@@ -28,9 +31,10 @@ export function ColorSwatchRow({
   customPickerOpen: boolean;
   customHighlighted?: boolean;
   onPickIndex: (index: number) => void;
-  onToggleCustom?: () => void;
+  onToggleCustom?: (anchor: HTMLButtonElement) => void;
 }) {
-  const pipetteActive = customHighlighted ?? (customColor != null || customPickerOpen);
+  const pipetteActive =
+    customHighlighted ?? (customColor != null || customPickerOpen);
   return (
     <div className="flex items-center justify-between gap-1 px-0.5">
       {colors.map((color, index) => {
@@ -66,7 +70,7 @@ export function ColorSwatchRow({
         aria-expanded={customPickerOpen}
         aria-pressed={customColor != null}
         onMouseDown={(event) => event.preventDefault()}
-        onClick={onToggleCustom}
+        onClick={(event) => onToggleCustom?.(event.currentTarget)}
         className="grid size-5 place-items-center rounded-full"
       >
         <span
@@ -85,7 +89,10 @@ export function ColorSwatchRow({
           }
         >
           {!customColor ? (
-            <Pipette className="size-2 text-white drop-shadow-sm" strokeWidth={2.25} />
+            <Pipette
+              className="size-2 text-white drop-shadow-sm"
+              strokeWidth={2.25}
+            />
           ) : null}
         </span>
       </button>
@@ -93,10 +100,39 @@ export function ColorSwatchRow({
   );
 }
 
-export function ColorPickerPopover({ value, onChange }: Props) {
+export function ColorPickerPopover({
+  value,
+  onChange,
+  className = "mt-2 rounded-lg border border-content/10 bg-content/5 p-2",
+  autoFocus = false,
+}: Props) {
   const [hsv, setHsv] = useState<Hsv>(() => hexToHsv(value));
   const svRef = useRef<HTMLDivElement>(null);
   const hueRef = useRef<HTMLDivElement>(null);
+  const hexRef = useRef<HTMLInputElement>(null);
+  const pointerCleanupRef = useRef<(() => void) | null>(null);
+
+  const startPointerDrag = (onMove: (event: PointerEvent) => void) => {
+    pointerCleanupRef.current?.();
+    const cleanup = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", cleanup);
+      window.removeEventListener("pointercancel", cleanup);
+      if (pointerCleanupRef.current === cleanup) {
+        pointerCleanupRef.current = null;
+      }
+    };
+    pointerCleanupRef.current = cleanup;
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", cleanup);
+    window.addEventListener("pointercancel", cleanup);
+  };
+
+  useEffect(() => () => pointerCleanupRef.current?.(), []);
+
+  useEffect(() => {
+    if (autoFocus) hexRef.current?.focus();
+  }, [autoFocus]);
 
   useEffect(() => {
     const hex = normalizeHex(value);
@@ -140,14 +176,7 @@ export function ColorPickerPopover({ value, onChange }: Props) {
 
     update(event.clientX, event.clientY);
     const onMove = (e: PointerEvent) => update(e.clientX, e.clientY);
-    const onUp = () => {
-      window.removeEventListener("pointermove", onMove);
-      window.removeEventListener("pointerup", onUp);
-      window.removeEventListener("pointercancel", onUp);
-    };
-    window.addEventListener("pointermove", onMove);
-    window.addEventListener("pointerup", onUp);
-    window.addEventListener("pointercancel", onUp);
+    startPointerDrag(onMove);
   };
 
   const onHuePointer = (event: ReactPointerEvent<HTMLDivElement>) => {
@@ -164,21 +193,50 @@ export function ColorPickerPopover({ value, onChange }: Props) {
 
     update(event.clientX);
     const onMove = (e: PointerEvent) => update(e.clientX);
-    const onUp = () => {
-      window.removeEventListener("pointermove", onMove);
-      window.removeEventListener("pointerup", onUp);
-      window.removeEventListener("pointercancel", onUp);
-    };
-    window.addEventListener("pointermove", onMove);
-    window.addEventListener("pointerup", onUp);
-    window.addEventListener("pointercancel", onUp);
+    startPointerDrag(onMove);
+  };
+
+  const onSvKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
+    const step = event.shiftKey ? 10 : 1;
+    if (event.key === "ArrowLeft") {
+      applyHsv((prev) => ({ ...prev, s: Math.max(0, prev.s - step) }));
+    } else if (event.key === "ArrowRight") {
+      applyHsv((prev) => ({ ...prev, s: Math.min(100, prev.s + step) }));
+    } else if (event.key === "ArrowDown") {
+      applyHsv((prev) => ({ ...prev, v: Math.max(0, prev.v - step) }));
+    } else if (event.key === "ArrowUp") {
+      applyHsv((prev) => ({ ...prev, v: Math.min(100, prev.v + step) }));
+    } else if (event.key === "Home") {
+      applyHsv((prev) => ({ ...prev, s: 0 }));
+    } else if (event.key === "End") {
+      applyHsv((prev) => ({ ...prev, s: 100 }));
+    } else {
+      return;
+    }
+    event.preventDefault();
+  };
+
+  const onHueKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
+    const step = event.shiftKey ? 10 : 1;
+    if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+      applyHsv((prev) => ({ ...prev, h: Math.max(0, prev.h - step) }));
+    } else if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+      applyHsv((prev) => ({ ...prev, h: Math.min(360, prev.h + step) }));
+    } else if (event.key === "Home") {
+      applyHsv((prev) => ({ ...prev, h: 0 }));
+    } else if (event.key === "End") {
+      applyHsv((prev) => ({ ...prev, h: 360 }));
+    } else {
+      return;
+    }
+    event.preventDefault();
   };
 
   const preview = hsvToHex(hsv.h, hsv.s, hsv.v);
   const hueColor = hsvToHex(hsv.h, 100, 100);
 
   return (
-    <div className="mt-2 rounded-lg border border-content/10 bg-content/5 p-2">
+    <div className={className}>
       <div
         ref={svRef}
         role="slider"
@@ -186,11 +244,14 @@ export function ColorPickerPopover({ value, onChange }: Props) {
         aria-valuemin={0}
         aria-valuemax={100}
         aria-valuenow={Math.round(hsv.s)}
+        aria-valuetext={`${Math.round(hsv.s)}% saturation, ${Math.round(hsv.v)}% brightness`}
+        tabIndex={0}
         className="relative h-28 w-full cursor-crosshair touch-none rounded-md"
         style={{
           background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${hueColor})`,
         }}
         onPointerDown={onSvPointer}
+        onKeyDown={onSvKeyDown}
       >
         <span
           className="pointer-events-none absolute size-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-md"
@@ -209,12 +270,15 @@ export function ColorPickerPopover({ value, onChange }: Props) {
         aria-valuemin={0}
         aria-valuemax={360}
         aria-valuenow={Math.round(hsv.h)}
+        aria-valuetext={`${Math.round(hsv.h)}° hue`}
+        tabIndex={0}
         className="relative mt-2 h-3 w-full cursor-ew-resize touch-none rounded-full"
         style={{
           background:
             "linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)",
         }}
         onPointerDown={onHuePointer}
+        onKeyDown={onHueKeyDown}
       >
         <span
           className="pointer-events-none absolute top-1/2 size-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-md"
@@ -232,6 +296,7 @@ export function ColorPickerPopover({ value, onChange }: Props) {
           aria-hidden
         />
         <input
+          ref={hexRef}
           type="text"
           value={preview}
           spellCheck={false}
diff --git a/src/chrome/Composer.tsx b/src/chrome/Composer.tsx
index d2a0283a..73c90a24 100644
--- a/src/chrome/Composer.tsx
+++ b/src/chrome/Composer.tsx
@@ -1367,6 +1367,7 @@ export function Composer({
             </div>
             <textarea
               ref={ref}
+              data-focus-quiet
               data-composer-empty={navigationEmpty ? "true" : undefined}
               rows={1}
               spellCheck={false}
@@ -1378,9 +1379,7 @@ export function Composer({
                     ? "Add a message, or send…"
                     : handoffCard
                       ? "Add context, or send to continue…"
-                      : shell
-                        ? "Ask, build, / for commands, @ for references... "
-                        : "Ask, build, / for commands, @ for references... "
+                      : "Ask, build, / for commands, @ for references…"
               }
               className={`composer-field scrollbar-none relative max-h-40 w-full resize-none overflow-x-hidden whitespace-pre-wrap break-words bg-transparent px-3 text-sm leading-5.5 outline-none placeholder:overflow-hidden placeholder:text-ellipsis placeholder:whitespace-nowrap font-sans ${
                 shell ? "py-4" : "py-3"
@@ -1425,11 +1424,8 @@ export function Composer({
                   width={250}
                   onDismiss={() => setPlusOpen(false)}
                   data-composer-plus
-                  className="p-1.5"
+                  className="p-1"
                 >
-                  <p className="px-2 pb-1 pt-0.5 text-[10px] font-medium uppercase tracking-wide text-content/40">
-                    Add to message
-                  </p>
                   <button
                     type="button"
                     disabled={!attachmentsSupported}
@@ -1438,14 +1434,19 @@ export function Composer({
                       setPlusOpen(false);
                       attachFromPicker();
                     }}
-                    className="flex w-full items-start gap-2.5 rounded-lg px-2 py-2 text-left text-content hover:bg-content/10 disabled:cursor-not-allowed disabled:opacity-40"
+                    className="flex w-full items-start gap-2.5 rounded-lg px-2 py-2 text-left text-content hover:bg-content/5 focus-visible:bg-content/10 disabled:cursor-not-allowed disabled:opacity-40"
                   >
-                    <FilePlus className="mt-0.5 size-4 shrink-0" />
+                    <FilePlus
+                      className="mt-0.5 size-3.5 shrink-0 text-content/70"
+                      strokeWidth={1.75}
+                    />
                     <span className="min-w-0">
-                      <span className="block text-[13px]">Upload file</span>
-                      <span className="block text-[11px] leading-4 text-content/45">
+                      <span className="block text-[13px] font-medium leading-5">
+                        Upload files
+                      </span>
+                      <span className="mt-0.5 block text-[11px] leading-4 text-content/50">
                         {attachmentsSupported
-                          ? "Attach files or images to this message"
+                          ? "Attach files or images"
                           : `${HARNESS_TITLE[harness]} does not support attachments`}
                       </span>
                     </span>
@@ -1459,17 +1460,22 @@ export function Composer({
                       setPlusOpen(false);
                       ref.current?.focus();
                     }}
-                    className="flex w-full items-start gap-2.5 rounded-lg px-2 py-2 text-left text-content hover:bg-content/10"
+                    className="flex w-full items-start gap-2.5 rounded-lg px-2 py-2 text-left text-content hover:bg-content/5 focus-visible:bg-content/10"
                   >
-                    <AiIdea className="mt-0.5 size-4 shrink-0 text-yellow-300/80" />
+                    <AiIdea
+                      className="mt-0.5 size-3.5 shrink-0 text-content"
+                      strokeWidth={1.75}
+                    />
                     <span className="min-w-0 flex-1">
-                      <span className="block text-[13px]">Plan mode</span>
-                      <span className="block text-[11px] leading-4 text-content/45">
-                        Create a plan to review before building
+                      <span className="block text-[13px] font-medium leading-5">
+                        Plan mode
+                      </span>
+                      <span className="mt-0.5 block text-[11px] leading-4 text-content/50">
+                        Plan changes before building
                       </span>
                     </span>
                     {planSelected ? (
-                      <Check className="mt-0.5 size-3.5 shrink-0 text-accent" />
+                      <Check className="mt-0.5 size-3.5 shrink-0 text-content" />
                     ) : null}
                   </button>
                 </Popover>
@@ -1484,11 +1490,11 @@ export function Composer({
                   setPlanSelected(false);
                   ref.current?.focus();
                 }}
-                className="flex h-6.5 shrink-0 items-center gap-1 rounded-md bg-yellow-300/12 px-1.5 text-[11px] text-yellow-200/90 hover:bg-yellow-300/18"
+                className="group flex h-6.5 shrink-0 items-center gap-1.5 rounded-md bg-content/8 px-2 text-[11px] font-medium text-content/70 hover:bg-content/12 hover:text-content focus-visible:bg-content/12"
               >
-                <AiIdea className="size-3.5" />
-                Plan
-                <X className="size-3" />
+                <AiIdea className="size-3.5 text-content" strokeWidth={1.75} />
+                Plan mode
+                <X className="size-3 text-content/45 group-hover:text-content/70" />
               </button>
             ) : null}
             <div
diff --git a/src/chrome/ContextMeter.tsx b/src/chrome/ContextMeter.tsx
index 98d89c9d..df26d954 100644
--- a/src/chrome/ContextMeter.tsx
+++ b/src/chrome/ContextMeter.tsx
@@ -81,7 +81,7 @@ export function ContextMeter({
               title={
                 compactDisabled
                   ? "Wait for the current operation to finish"
-                  : "Compact this conversation's context"
+                  : "Compact this session's context"
               }
               onClick={() => {
                 setOpen(false);
diff --git a/src/chrome/GitChangesPanel.tsx b/src/chrome/GitChangesPanel.tsx
index 7b087e42..c0960af3 100644
--- a/src/chrome/GitChangesPanel.tsx
+++ b/src/chrome/GitChangesPanel.tsx
@@ -765,7 +765,7 @@ function GitSyncActions({
     index.upstream ?? `${index.remote ?? "origin"}/${index.branch ?? "HEAD"}`;
   const syncing = busy === "sync";
   const syncTitle = syncing
-    ? "Synchronizing Changes..."
+    ? "Synchronizing changes…"
     : canPublish
       ? index.branch
         ? `Publish Branch "${index.branch}"`
diff --git a/src/chrome/Modal.test.ts b/src/chrome/Modal.test.ts
index cf37547f..d71ce881 100644
--- a/src/chrome/Modal.test.ts
+++ b/src/chrome/Modal.test.ts
@@ -9,6 +9,7 @@ describe("ModalPanel", () => {
       createElement(ModalPanel, {
         title: "Example",
         description: "A reusable shell",
+        closeDisabled: true,
         onClose: vi.fn(),
         children: "Body",
       }),
@@ -18,7 +19,9 @@ describe("ModalPanel", () => {
     expect(markup).toContain("modal-panel");
     expect(markup).toContain("Example");
     expect(markup).toContain("A reusable shell");
+    expect(markup).toContain('title="A reusable shell"');
     expect(markup).toContain("Body");
     expect(markup).toContain('aria-label="Close"');
+    expect(markup).toContain('aria-disabled="true"');
   });
 });
diff --git a/src/chrome/Modal.tsx b/src/chrome/Modal.tsx
index 80bb9f1a..a420ad82 100644
--- a/src/chrome/Modal.tsx
+++ b/src/chrome/Modal.tsx
@@ -1,5 +1,12 @@
 import { X } from "./icons";
-import { useEffect, useId, useRef, type ReactNode } from "react";
+import {
+  useEffect,
+  useId,
+  useRef,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type ReactNode,
+  type RefObject,
+} from "react";
 import { createPortal } from "react-dom";
 import { useLockOverscroll } from "../hooks/useLockOverscroll";
 import { LAYER } from "../lib/layers";
@@ -23,6 +30,8 @@ type Props = {
   size?: ModalSize;
   /** Extra classes on the panel (fixed height, etc). */
   className?: string;
+  initialFocusRef?: RefObject<HTMLElement | null>;
+  closeDisabled?: boolean;
   children: ReactNode;
 };
 
@@ -32,38 +41,76 @@ export function ModalPanel({
   description,
   size = "md",
   className,
+  initialFocusRef,
+  closeDisabled = false,
   children,
 }: Props) {
   const closeRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
   const lockOverscroll = useLockOverscroll<HTMLDivElement>();
   const uid = useId();
   const titleId = `${uid}-title`;
   const descriptionId = description ? `${uid}-desc` : undefined;
 
   useEffect(() => {
-    closeRef.current?.focus();
-  }, []);
+    const previous =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    const initial = initialFocusRef?.current;
+    (initial && !initial.matches(":disabled")
+      ? initial
+      : closeRef.current
+    )?.focus();
+    return () => {
+      if (previous?.isConnected) previous.focus();
+    };
+  }, [initialFocusRef]);
+
+  useEffect(() => {
+    if (closeDisabled) closeRef.current?.focus();
+  }, [closeDisabled]);
 
   useEffect(() => {
     const onKey = (event: KeyboardEvent) => {
       if (event.key !== "Escape") return;
       event.preventDefault();
       event.stopPropagation();
+      if (closeDisabled) return;
       onClose();
     };
     window.addEventListener("keydown", onKey, true);
     return () => window.removeEventListener("keydown", onKey, true);
-  }, [onClose]);
+  }, [closeDisabled, onClose]);
+
+  const onDialogKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== "Tab") return;
+    const focusable = panelRef.current?.querySelectorAll<HTMLElement>(
+      'button:not(:disabled), input:not(:disabled), textarea:not(:disabled), select:not(:disabled), a[href], [tabindex]:not([tabindex="-1"])',
+    );
+    if (!focusable?.length) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
 
   return (
     <div
       className={`absolute left-1/2 ${TOP[size]} ${WIDTH[size]} -translate-x-1/2`}
     >
       <div
+        ref={panelRef}
         role="dialog"
         aria-modal="true"
         aria-labelledby={titleId}
         aria-describedby={descriptionId}
+        onKeyDown={onDialogKeyDown}
         onMouseDown={(event) => event.stopPropagation()}
         className={`modal-panel flex flex-col overflow-hidden rounded-2xl border border-content/10 bg-background-base/55 shadow-2xl backdrop-blur-xl ${className ?? ""}`}
       >
@@ -78,6 +125,7 @@ export function ModalPanel({
             {description ? (
               <p
                 id={descriptionId}
+                title={description}
                 className="mt-0.5 truncate text-[12px] leading-snug text-content/50"
               >
                 {description}
@@ -88,8 +136,9 @@ export function ModalPanel({
             ref={closeRef}
             type="button"
             aria-label="Close"
-            onClick={onClose}
-            className="grid size-7 shrink-0 place-items-center rounded-md text-content/45 hover:bg-content/8 hover:text-content focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+            aria-disabled={closeDisabled || undefined}
+            onClick={closeDisabled ? undefined : onClose}
+            className="grid size-7 shrink-0 place-items-center rounded-md text-content/45 hover:bg-content/8 hover:text-content focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent aria-disabled:cursor-default aria-disabled:opacity-30 aria-disabled:hover:bg-transparent aria-disabled:hover:text-content/45"
           >
             <X className="size-3.5" strokeWidth={1.75} />
           </button>
@@ -110,7 +159,7 @@ export function Modal(props: Props) {
     <div className="fixed inset-0" style={{ zIndex: LAYER.dialog }}>
       <div
         className="modal-backdrop absolute inset-0 bg-black/40"
-        onMouseDown={props.onClose}
+        onMouseDown={props.closeDisabled ? undefined : props.onClose}
       />
       <ModalPanel {...props} />
     </div>,
diff --git a/src/chrome/ModalFocus.test.ts b/src/chrome/ModalFocus.test.ts
new file mode 100644
index 00000000..6485ed8e
--- /dev/null
+++ b/src/chrome/ModalFocus.test.ts
@@ -0,0 +1,160 @@
+// @vitest-environment happy-dom
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { describe, expect, it, vi } from "vitest";
+import { ModalPanel } from "./Modal";
+
+describe("ModalPanel focus", () => {
+  it("wraps keyboard focus inside the dialog", () => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    const container = document.createElement("div");
+    document.body.append(container);
+    const root = createRoot(container);
+
+    act(() => {
+      root.render(
+        createElement(
+          ModalPanel,
+          { title: "Example", onClose: vi.fn() },
+          createElement("button", { type: "button" }, "Action"),
+        ),
+      );
+    });
+
+    const close = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Close"]',
+    );
+    const action = [...container.querySelectorAll("button")].find(
+      (button) => button.textContent === "Action",
+    );
+    expect(close).toBeTruthy();
+    expect(action).toBeTruthy();
+
+    action!.focus();
+    act(() => {
+      action!.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "Tab",
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+    });
+    expect(document.activeElement).toBe(close);
+
+    close!.focus();
+    act(() => {
+      close!.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "Tab",
+          shiftKey: true,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+    });
+    expect(document.activeElement).toBe(action);
+
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("restores focus to the trigger when the dialog unmounts", () => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    const trigger = document.createElement("button");
+    const container = document.createElement("div");
+    document.body.append(trigger, container);
+    trigger.focus();
+    const root = createRoot(container);
+
+    act(() => {
+      root.render(
+        createElement(ModalPanel, {
+          title: "Example",
+          onClose: vi.fn(),
+          children: "Body",
+        }),
+      );
+    });
+    expect(document.activeElement).not.toBe(trigger);
+
+    act(() => root.unmount());
+    expect(document.activeElement).toBe(trigger);
+
+    trigger.remove();
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("uses Close as the focus fallback while the modal is locked", () => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    const container = document.createElement("div");
+    document.body.append(container);
+    const root = createRoot(container);
+    const onClose = vi.fn();
+
+    act(() => {
+      root.render(
+        createElement(
+          ModalPanel,
+          { title: "Example", closeDisabled: true, onClose },
+          createElement("button", { type: "button", disabled: true }, "Busy"),
+        ),
+      );
+    });
+
+    const close = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Close"]',
+    )!;
+    expect(close.disabled).toBe(false);
+    expect(close.getAttribute("aria-disabled")).toBe("true");
+    expect(document.activeElement).toBe(close);
+    close.click();
+    expect(onClose).not.toHaveBeenCalled();
+
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("contains Escape while the modal is locked", () => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    const container = document.createElement("div");
+    document.body.append(container);
+    const root = createRoot(container);
+    const onClose = vi.fn();
+    const outsideKeyDown = vi.fn();
+    document.addEventListener("keydown", outsideKeyDown);
+
+    act(() => {
+      root.render(
+        createElement(ModalPanel, {
+          title: "Example",
+          closeDisabled: true,
+          onClose,
+          children: "Body",
+        }),
+      );
+    });
+
+    const close = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Close"]',
+    )!;
+    const event = new KeyboardEvent("keydown", {
+      key: "Escape",
+      bubbles: true,
+      cancelable: true,
+    });
+    act(() => close.dispatchEvent(event));
+
+    expect(event.defaultPrevented).toBe(true);
+    expect(outsideKeyDown).not.toHaveBeenCalled();
+    expect(onClose).not.toHaveBeenCalled();
+
+    document.removeEventListener("keydown", outsideKeyDown);
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+});
diff --git a/src/chrome/ProjectRail.tsx b/src/chrome/ProjectRail.tsx
index 6818b586..b274fbc6 100644
--- a/src/chrome/ProjectRail.tsx
+++ b/src/chrome/ProjectRail.tsx
@@ -705,7 +705,7 @@ function LiveAgentCard({
       ? formatLiveElapsed(agent.startedAt, now)
       : "";
   const activity = agent.needsApproval
-    ? "Need approval"
+    ? "Needs approval"
     : agent.done
       ? "Done"
       : agent.activity;
@@ -913,6 +913,7 @@ function ProjectCard({
   return (
     <div
       ref={(el) => sortable.setItemRef(item.path, el)}
+      data-project-card
       data-selected={selected || undefined}
       className={`reorder-item project-reorder-item group relative flex touch-none items-stretch rounded-md px-2 h-8 ${
         selected
@@ -940,7 +941,9 @@ function ProjectCard({
         title={cardTitle}
         aria-label={cardAriaLabel}
         aria-current={selected ? "true" : undefined}
-        className="flex min-w-0 flex-1 cursor-default items-center gap-2 text-left group-hover:pr-6"
+        data-focus-quiet
+        data-project-main
+        className="flex min-w-0 flex-1 cursor-default items-center gap-2 rounded-md text-left group-hover:pr-6 focus-visible:outline-none"
       >
         <div className="project-card-logo grid size-4 shrink-0 place-items-center transition-opacity group-hover:opacity-0">
           {logoPath && !busy ? (
@@ -983,7 +986,7 @@ function ProjectCard({
           event.stopPropagation();
           onOpenMenu(item.path, event.clientX, event.clientY);
         }}
-        className="absolute right-1 top-1/2 hidden size-6 -translate-y-1/2 place-items-center rounded-md text-content/55 hover:bg-content/8 hover:text-content group-hover:grid"
+        className="pointer-events-none absolute right-1 top-1/2 grid size-6 -translate-y-1/2 place-items-center rounded-md text-content/55 opacity-0 hover:bg-content/8 hover:text-content group-hover:pointer-events-auto group-hover:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100"
       >
         <MoreHorizontal className="size-4" strokeWidth={1.75} />
       </button>
@@ -997,7 +1000,7 @@ function ProjectCard({
           event.stopPropagation();
           onTogglePin(item.path);
         }}
-        className="absolute left-2 top-1/2 grid size-4 -translate-y-1/2 place-items-center rounded-sm text-content/55 opacity-0 pointer-events-none transition-opacity hover:text-content group-hover:pointer-events-auto group-hover:opacity-100"
+        className="pointer-events-none absolute left-2 top-1/2 grid size-4 -translate-y-1/2 place-items-center rounded-sm text-content/55 opacity-0 transition-opacity hover:text-content group-hover:pointer-events-auto group-hover:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100"
       >
         {pinned ? (
           <PinOff className="size-3.5" strokeWidth={1.75} />
diff --git a/src/chrome/RailAction.tsx b/src/chrome/RailAction.tsx
index e6e8323f..224ffd2b 100644
--- a/src/chrome/RailAction.tsx
+++ b/src/chrome/RailAction.tsx
@@ -27,7 +27,8 @@ export function RailAction({
       onClick={onClick}
       disabled={!onClick}
       aria-label={ariaLabel ?? label}
-      className={`relative flex w-full items-center gap-2 rounded-md px-2 h-8  text-left ${
+      aria-current={active ? "page" : undefined}
+      className={`relative flex h-8 w-full items-center gap-2 rounded-md px-2 text-left ${
         active
           ? "bg-content/10 text-content"
           : "text-content/50 hover:bg-content/10 hover:text-content"
@@ -80,7 +81,7 @@ export function RailSearch({
       onClick={onClick}
       disabled={!onClick}
       aria-label={ariaLabel ?? label}
-      className={`relative flex w-full items-center gap-2 rounded-md border border-content/8 px-1.5 shadow-sm h-8 text-left ${
+      className={`relative flex h-8 w-full items-center gap-2 rounded-md border border-content/8 px-1.5 text-left shadow-sm ${
         active
           ? "bg-content/10 text-content"
           : "text-content/50 hover:bg-content/10 hover:text-content"
diff --git a/src/chrome/RemoveProjectDialog.tsx b/src/chrome/RemoveProjectDialog.tsx
index 08382e91..f0b10012 100644
--- a/src/chrome/RemoveProjectDialog.tsx
+++ b/src/chrome/RemoveProjectDialog.tsx
@@ -1,8 +1,7 @@
-import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { LAYER } from "../lib/layers";
+import { useEffect, useState } from "react";
 import { prettyCwd } from "../lib/paths";
 import { projectSessionCount } from "../lib/projectData";
+import { Modal } from "./Modal";
 
 type Props = {
   name: string;
@@ -15,13 +14,13 @@ type Props = {
  * Delete drops the project from the rail and its saved chats. The folder on
  * disk is left alone; opening it again brings the project back empty.
  */
-export function RemoveProjectDialog({ name, path, onCancel, onConfirm }: Props) {
+export function RemoveProjectDialog({
+  name,
+  path,
+  onCancel,
+  onConfirm,
+}: Props) {
   const [sessions, setSessions] = useState<number | null>(null);
-  const cancelRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    cancelRef.current?.focus();
-  }, []);
 
   useEffect(() => {
     let cancelled = false;
@@ -33,51 +32,31 @@ export function RemoveProjectDialog({ name, path, onCancel, onConfirm }: Props)
     };
   }, [path]);
 
-  useEffect(() => {
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") return;
-      event.preventDefault();
-      event.stopPropagation();
-      onCancel();
-    };
-    window.addEventListener("keydown", onKey, true);
-    return () => window.removeEventListener("keydown", onKey, true);
-  }, [onCancel]);
-
-  return createPortal(
-    <div className="fixed inset-0" style={{ zIndex: LAYER.dialog }}>
-      <div className="absolute inset-0 bg-black/30" onMouseDown={onCancel} />
-      <div
-        role="dialog"
-        aria-modal="true"
-        aria-label={`Delete ${name}`}
-        onMouseDown={(event) => event.stopPropagation()}
-        className="absolute left-1/2 top-[22%] flex w-[min(420px,calc(100vw-24px))] -translate-x-1/2 flex-col gap-3 rounded-lg border border-content/10 bg-content/5 p-4 shadow-xl backdrop-blur-xl"
-      >
-        <div className="flex flex-col gap-1">
-          <h2 className="text-[13px] font-medium leading-tight text-content">
-            Delete “{name}”?
-          </h2>
-          <p className="text-[12px] leading-snug text-content/55">
-            All conversations for this project will be deleted. It also
-            leaves the sidebar. The folder on disk stays put, and opening it
-            again brings the project back empty.
+  return (
+    <Modal
+      title={`Delete “${name}”?`}
+      description={prettyCwd(path)}
+      size="sm"
+      onClose={onCancel}
+    >
+      <div className="flex flex-col gap-4 p-4">
+        <div className="flex flex-col gap-2">
+          <p className="text-[13px] leading-relaxed text-content/60">
+            This deletes all sessions for the project and removes it from the
+            sidebar. The folder on disk stays intact; reopening it adds the
+            project back empty.
           </p>
           {sessions != null && sessions > 0 ? (
             <p className="text-[12px] leading-snug text-content/45">
               {sessions === 1
-                ? "1 saved conversation will be removed."
-                : `${sessions} saved conversations will be removed.`}
+                ? "1 saved session will be removed."
+                : `${sessions} saved sessions will be removed.`}
             </p>
           ) : null}
-          <p className="truncate text-[11px] leading-tight text-content/40">
-            {prettyCwd(path)}
-          </p>
         </div>
 
         <div className="flex justify-end gap-2">
           <button
-            ref={cancelRef}
             type="button"
             onClick={onCancel}
             className="rounded-md px-3 py-1.5 text-[12px] text-content/70 hover:bg-content/8 hover:text-content"
@@ -93,7 +72,6 @@ export function RemoveProjectDialog({ name, path, onCancel, onConfirm }: Props)
           </button>
         </div>
       </div>
-    </div>,
-    document.body,
+    </Modal>
   );
 }
diff --git a/src/chrome/SettingsRail.tsx b/src/chrome/SettingsRail.tsx
index 0394b595..637233ae 100644
--- a/src/chrome/SettingsRail.tsx
+++ b/src/chrome/SettingsRail.tsx
@@ -11,6 +11,7 @@ import {
 } from "./icons";
 import { useLockOverscroll } from "../hooks/useLockOverscroll";
 import { SETTINGS_SECTIONS, type SettingsSectionId } from "../lib/settings";
+import { RailAction } from "./RailAction";
 
 const SECTION_ICONS: Record<SettingsSectionId, IconComponent> = {
   general: SlidersHorizontal,
@@ -40,7 +41,7 @@ export function SettingsNav({ section, onSelect, onClose }: Props) {
         className="flex min-h-0 flex-1 flex-col gap-px overflow-y-auto overscroll-none px-2 pb-2"
       >
         {SETTINGS_SECTIONS.map((item) => (
-          <NavRow
+          <RailAction
             key={item.id}
             label={item.label}
             icon={SECTION_ICONS[item.id]}
@@ -50,38 +51,8 @@ export function SettingsNav({ section, onSelect, onClose }: Props) {
         ))}
       </div>
       <div className="flex shrink-0 flex-col gap-px p-2">
-        <NavRow label="Back" icon={ArrowLeft} onClick={onClose} />
+        <RailAction label="Back" icon={ArrowLeft} onClick={onClose} />
       </div>
     </>
   );
 }
-
-function NavRow({
-  label,
-  icon: Icon,
-  active = false,
-  onClick,
-}: {
-  label: string;
-  icon: IconComponent;
-  active?: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      aria-current={active ? "true" : undefined}
-      className={`flex w-full items-center gap-2 rounded-md px-2 py-2 text-left ${
-        active
-          ? "bg-content/10 text-content"
-          : "text-content/50 hover:bg-content/5 hover:text-content"
-      }`}
-    >
-      <Icon className="size-4 shrink-0 opacity-70" strokeWidth={1.75} />
-      <span className="min-w-0 flex-1 truncate text-sm font-medium leading-tight">
-        {label}
-      </span>
-    </button>
-  );
-}
diff --git a/src/chrome/Sidebar.tsx b/src/chrome/Sidebar.tsx
index 2599be7b..663ef4ab 100644
--- a/src/chrome/Sidebar.tsx
+++ b/src/chrome/Sidebar.tsx
@@ -1063,8 +1063,8 @@ function SidebarComponent({
       ref={searchInputRef}
       type="text"
       value={searchQuery}
-      placeholder="Search conversations..."
-      aria-label="Search conversations"
+      placeholder="Search sessions…"
+      aria-label="Search sessions"
       spellCheck={false}
       autoComplete="off"
       autoCorrect="off"
@@ -1866,7 +1866,7 @@ function SidebarProjectPicker({
                   setQuery(event.target.value);
                   setActive(0);
                 }}
-                placeholder="Search projects..."
+                placeholder="Search projects…"
                 className="min-w-0 flex-1 bg-transparent text-[13px] text-content outline-none placeholder:text-content/35"
               />
             </label>
@@ -2355,12 +2355,12 @@ function SessionCard({
       {needsApproval ? (
         <>
           <CircleAlert className="size-3" strokeWidth={1.75} />
-          <span>Need approval</span>
+          <span>Needs approval</span>
         </>
       ) : busy ? (
         <>
           <TerminalSpinner className="inline-block w-3 select-none text-center text-[11px] leading-none text-accent" />
-          <span>Working...</span>
+          <span>Working…</span>
         </>
       ) : done ? (
         <>
diff --git a/src/chrome/SurfaceTabs.tsx b/src/chrome/SurfaceTabs.tsx
index eb42884b..3995683d 100644
--- a/src/chrome/SurfaceTabs.tsx
+++ b/src/chrome/SurfaceTabs.tsx
@@ -358,7 +358,9 @@ export function SurfaceTabs({
                 onCloseFile(file.id);
               }}
               className={`absolute right-1.5 top-1/2 grid size-5 -translate-y-1/2 place-items-center rounded text-content/50 hover:bg-content/10 hover:text-content ${
-                active ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+                active
+                  ? "opacity-100"
+                  : "opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
               }`}
             >
               <X className="size-3" strokeWidth={1.75} />
diff --git a/src/chrome/SwitchBranchDialog.tsx b/src/chrome/SwitchBranchDialog.tsx
index 5b6504b7..0fe1edc8 100644
--- a/src/chrome/SwitchBranchDialog.tsx
+++ b/src/chrome/SwitchBranchDialog.tsx
@@ -1,9 +1,8 @@
 import { Loader, WandSparkles } from "./icons";
 import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
 import { generateCommitMessage } from "../lib/harness";
-import { LAYER } from "../lib/layers";
 import { MOD } from "../lib/platform";
+import { Modal } from "./Modal";
 
 type Busy = "stash" | "commit" | null;
 
@@ -32,11 +31,8 @@ export function SwitchBranchDialog({
   const [generating, setGenerating] = useState(false);
   const messageRef = useRef<HTMLTextAreaElement>(null);
   const trimmed = message.trim();
-  const canCommit = trimmed.length > 0 && !busy && !generating;
-
-  useEffect(() => {
-    messageRef.current?.focus();
-  }, []);
+  const locked = Boolean(busy) || generating;
+  const canCommit = trimmed.length > 0 && !locked;
 
   useEffect(() => {
     const el = messageRef.current;
@@ -45,19 +41,8 @@ export function SwitchBranchDialog({
     el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
   }, [message]);
 
-  useEffect(() => {
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") return;
-      event.preventDefault();
-      event.stopPropagation();
-      if (!busy && !generating) onCancel();
-    };
-    window.addEventListener("keydown", onKey, true);
-    return () => window.removeEventListener("keydown", onKey, true);
-  }, [busy, generating, onCancel]);
-
   const generate = async () => {
-    if (busy || generating) return;
+    if (locked) return;
     setGenerating(true);
     try {
       setMessage(await generateCommitMessage(cwd));
@@ -69,32 +54,23 @@ export function SwitchBranchDialog({
     }
   };
 
-  return createPortal(
-    <div className="fixed inset-0" style={{ zIndex: LAYER.dialog }}>
-      <div
-        className="absolute inset-0 bg-black/30"
-        onMouseDown={() => {
-          if (!busy && !generating) onCancel();
-        }}
-      />
-      <div
-        role="dialog"
-        aria-modal="true"
-        aria-busy={Boolean(busy) || generating}
-        aria-label={creating ? `Create ${branch}` : `Switch to ${branch}`}
-        onMouseDown={(event) => event.stopPropagation()}
-        className="absolute left-1/2 top-[22%] flex w-[min(420px,calc(100vw-24px))] -translate-x-1/2 flex-col gap-3 rounded-lg border border-content/10 bg-content/5 p-4 shadow-xl backdrop-blur-xl"
-      >
-        <div className="flex flex-col gap-1">
-          <h2 className="text-[13px] font-medium leading-tight text-content">
-            Uncommitted changes
-          </h2>
-          <p className="text-[12px] leading-snug text-content/55">
-            {creating
-              ? `Creating “${branch}” would overwrite your local changes. Stash them for later, or commit them on this branch first.`
-              : `Switching to “${branch}” would overwrite your local changes. Stash them for later, or commit them on this branch first.`}
-          </p>
-        </div>
+  return (
+    <Modal
+      title="Uncommitted changes"
+      description={
+        creating
+          ? `Creating “${branch}” would overwrite your local changes.`
+          : `Switching to “${branch}” would overwrite your local changes.`
+      }
+      size="sm"
+      initialFocusRef={messageRef}
+      closeDisabled={locked}
+      onClose={onCancel}
+    >
+      <div className="flex flex-col gap-4 p-4" aria-busy={locked}>
+        <p className="text-[13px] leading-relaxed text-content/60">
+          Stash the changes for later, or commit them on this branch first.
+        </p>
 
         <div className="relative">
           <textarea
@@ -102,7 +78,7 @@ export function SwitchBranchDialog({
             rows={1}
             value={message}
             placeholder={`Message (${MOD}↩ to commit)`}
-            disabled={Boolean(busy) || generating}
+            disabled={locked}
             aria-label="Commit message"
             className="max-h-40 w-full resize-none overflow-y-auto rounded-md bg-content/10 py-1 pr-8 pl-2 text-[13px] leading-5 text-content outline-none placeholder:text-content/35 disabled:opacity-40"
             onChange={(event) => setMessage(event.target.value)}
@@ -121,7 +97,7 @@ export function SwitchBranchDialog({
             type="button"
             title="Generate commit message"
             aria-label="Generate commit message"
-            disabled={Boolean(busy) || generating}
+            disabled={locked}
             onClick={() => void generate()}
             className="absolute top-1 right-1 grid size-5 place-items-center rounded-md bg-content/10 text-content hover:bg-content/20 hover:text-content disabled:opacity-40"
           >
@@ -134,7 +110,10 @@ export function SwitchBranchDialog({
         </div>
 
         {error ? (
-          <p className="whitespace-pre-wrap text-[11px] leading-4 text-red-400/90">
+          <p
+            role="alert"
+            className="whitespace-pre-wrap text-[11px] leading-4 text-red-400/90"
+          >
             {error}
           </p>
         ) : null}
@@ -142,7 +121,7 @@ export function SwitchBranchDialog({
         <div className="flex flex-wrap justify-end gap-2">
           <button
             type="button"
-            disabled={Boolean(busy) || generating}
+            disabled={locked}
             onClick={onCancel}
             className="rounded-md px-3 py-1.5 text-[12px] text-content/70 hover:bg-content/8 hover:text-content disabled:opacity-40"
           >
@@ -161,7 +140,7 @@ export function SwitchBranchDialog({
           </button>
           <button
             type="button"
-            disabled={Boolean(busy) || generating}
+            disabled={locked}
             onClick={onStash}
             className="inline-flex items-center gap-1.5 rounded-md bg-content px-3 py-1.5 text-[12px] font-medium text-background-base hover:bg-content/80 disabled:opacity-40"
           >
@@ -172,7 +151,6 @@ export function SwitchBranchDialog({
           </button>
         </div>
       </div>
-    </div>,
-    document.body,
+    </Modal>
   );
 }
diff --git a/src/chrome/TabGroupMenu.tsx b/src/chrome/TabGroupMenu.tsx
index 46fd2357..13bb4f3e 100644
--- a/src/chrome/TabGroupMenu.tsx
+++ b/src/chrome/TabGroupMenu.tsx
@@ -16,6 +16,7 @@ import {
   type ReactNode,
 } from "react";
 import { normalizeHex } from "../lib/colorUtils";
+import { LAYER } from "../lib/layers";
 import { projectKey } from "../lib/paths";
 import { clearProjectLogo, pickAndSetProjectLogo } from "../lib/projectLogos";
 import { PROJECT_MASCOTS, projectMascot } from "../lib/projectMascots";
@@ -135,7 +136,8 @@ export function TabGroupMenu({
 }: Props) {
   const input = useRef<HTMLInputElement>(null);
   const [name, setName] = useState(label);
-  const [customPickerOpen, setCustomPickerOpen] = useState(false);
+  const [customPickerAnchor, setCustomPickerAnchor] =
+    useState<HTMLButtonElement | null>(null);
 
   useEffect(() => {
     input.current?.focus();
@@ -161,6 +163,8 @@ export function TabGroupMenu({
       anchor={{ x, y }}
       gap={0}
       width={MENU_WIDTH}
+      ignore="[data-custom-color-picker]"
+      dismissOnEscape={customPickerAnchor == null}
       onDismiss={onClose}
       role="menu"
       tabIndex={-1}
@@ -235,20 +239,43 @@ export function TabGroupMenu({
           colors={TAB_GROUP_COLORS}
           colorIndex={colorIndex}
           customColor={customColor}
-          customPickerOpen={customPickerOpen}
+          customPickerOpen={customPickerAnchor != null}
           onPickIndex={(index) => {
-            setCustomPickerOpen(false);
+            setCustomPickerAnchor(null);
             onColorChange(groupId, index === 0 ? null : index);
           }}
-          onToggleCustom={() => setCustomPickerOpen((open) => !open)}
+          onToggleCustom={(anchor) =>
+            setCustomPickerAnchor((current) =>
+              current == null ? anchor : null,
+            )
+          }
         />
       </div>
 
-      {customPickerOpen ? (
-        <ColorPickerPopover
-          value={customColor ?? normalizeHex(currentColor)}
-          onChange={(color) => onCustomColorChange(groupId, color)}
-        />
+      {customPickerAnchor ? (
+        <Popover
+          anchor={customPickerAnchor}
+          side="right"
+          align="start"
+          gap={6}
+          width={240}
+          layer={LAYER.submenu}
+          onDismiss={(reason) => {
+            const anchor = customPickerAnchor;
+            setCustomPickerAnchor(null);
+            if (reason === "escape") anchor.focus();
+          }}
+          data-custom-color-picker
+          aria-label="Custom color picker"
+          className="p-2"
+        >
+          <ColorPickerPopover
+            value={customColor ?? normalizeHex(currentColor)}
+            onChange={(color) => onCustomColorChange(groupId, color)}
+            className=""
+            autoFocus
+          />
+        </Popover>
       ) : null}
 
       <div className="mb-2 px-0.5">
diff --git a/src/chrome/TitleBar.tsx b/src/chrome/TitleBar.tsx
index 715814ac..95ae798d 100644
--- a/src/chrome/TitleBar.tsx
+++ b/src/chrome/TitleBar.tsx
@@ -345,7 +345,7 @@ function TitleTabItem({
             e.stopPropagation();
             onClose(tab.id);
           }}
-          className="absolute right-1 top-1/2 grid size-5 -translate-y-1/2 place-items-center rounded text-content/50 opacity-0 hover:bg-content/10 hover:text-content group-hover:opacity-100"
+          className="absolute right-1 top-1/2 grid size-5 -translate-y-1/2 place-items-center rounded text-content/50 opacity-0 hover:bg-content/10 hover:text-content group-hover:opacity-100 focus-visible:opacity-100"
         >
           <X className="size-3" strokeWidth={1.75} />
         </button>
diff --git a/src/index.css b/src/index.css
index 58c67b03..e06cb2ca 100644
--- a/src/index.css
+++ b/src/index.css
@@ -56,6 +56,23 @@ html.theme-light {
   color-scheme: light;
 }
 
+button:not([data-focus-quiet]):focus-visible,
+input:focus-visible,
+textarea:not([data-focus-quiet]):focus-visible,
+select:focus-visible,
+[role="button"]:focus-visible,
+[role="slider"]:focus-visible,
+[tabindex]:not([tabindex="-1"]):focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--color-content) 32%, transparent);
+}
+
+[data-project-card]:has([data-project-main]:focus-visible) {
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--color-content) 22%, transparent);
+}
+
 html,
 body,
 #root {
@@ -428,6 +445,16 @@ header[data-tauri-drag-region] button {
   outline: none;
 }
 
+.sidebar-opacity-slider:focus-visible {
+  box-shadow: none;
+}
+
+.sidebar-opacity-slider:focus-visible::-webkit-slider-thumb {
+  box-shadow:
+    0 0 0 2px var(--color-background-base),
+    0 0 0 4px color-mix(in srgb, var(--color-content) 38%, transparent);
+}
+
 .sidebar-opacity-slider::-webkit-slider-thumb {
   appearance: none;
   width: 12px;
diff --git a/src/lib/harness/availability.test.ts b/src/lib/harness/availability.test.ts
new file mode 100644
index 00000000..a82926d3
--- /dev/null
+++ b/src/lib/harness/availability.test.ts
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { HARNESSES } from "../session";
+import { harnessUnavailableHint } from "./availability";
+
+describe("harnessUnavailableHint", () => {
+  it("uses the same command-free guidance for every provider", () => {
+    for (const harness of HARNESSES) {
+      const hint = harnessUnavailableHint(harness);
+      expect(hint).toContain(
+        "not found. Install it, or restart MonoCode if it is already installed.",
+      );
+      expect(hint).not.toContain("`");
+      expect(hint).not.toContain("curl ");
+      expect(hint).not.toContain("npm ");
+    }
+  });
+});
diff --git a/src/lib/harness/availability.ts b/src/lib/harness/availability.ts
index f7d5df20..598bd031 100644
--- a/src/lib/harness/availability.ts
+++ b/src/lib/harness/availability.ts
@@ -18,18 +18,15 @@ export type HarnessAvailability = Record<HarnessId, boolean>;
  * We only ever check whether the binary exists, never whether it is
  * authenticated, so the hint must not blame a login.
  */
-const CLI: Record<HarnessId, { name: string; install?: string }> = {
+const CLI: Record<HarnessId, { name: string }> = {
   claude: { name: "Claude Code CLI" },
   codex: { name: "Codex CLI" },
   cursor: { name: "Cursor CLI" },
-  grok: {
-    name: "Grok Build CLI",
-    install: "curl -fsSL https://x.ai/cli/install.sh | bash",
-  },
+  grok: { name: "Grok Build CLI" },
   opencode: { name: "OpenCode CLI" },
-  pi: { name: "Pi CLI", install: "npm i -g @earendil-works/pi-coding-agent" },
-  omp: { name: "omp CLI", install: "curl -fsSL https://omp.sh/install | sh" },
-  fx: { name: "fx CLI", install: "curl -fsSL https://fx.sh/setup.sh | bash" },
+  pi: { name: "Pi CLI" },
+  omp: { name: "omp CLI" },
+  fx: { name: "fx CLI" },
 };
 
 let availability: HarnessAvailability = {
@@ -60,7 +57,9 @@ function emit() {
   for (const listener of listeners) listener();
 }
 
-export function subscribeHarnessAvailability(onStoreChange: () => void): () => void {
+export function subscribeHarnessAvailability(
+  onStoreChange: () => void,
+): () => void {
   listeners.add(onStoreChange);
   return () => {
     listeners.delete(onStoreChange);
@@ -80,14 +79,12 @@ export function isHarnessAvailable(id: HarnessId): boolean {
 }
 
 export function harnessUnavailableHint(id: HarnessId): string {
-  const { name, install } = CLI[id];
-  const how = install ? ` (\`${install}\`)` : "";
-  return `${name} not found${how}. Install it, or restart MonoCode if it is already installed.`;
+  return `${CLI[id].name} not found. Install it, or restart MonoCode if it is already installed.`;
 }
 
-export function probeHarnessAvailability(
-  options?: { force?: boolean },
-): Promise<void> {
+export function probeHarnessAvailability(options?: {
+  force?: boolean;
+}): Promise<void> {
   if (inflight) return inflight;
   if (!options?.force && probedAt > 0 && Date.now() - probedAt < PROBE_TTL_MS) {
     return Promise.resolve();
diff --git a/src/lib/settings.ts b/src/lib/settings.ts
index 83e3600e..368120cd 100644
--- a/src/lib/settings.ts
+++ b/src/lib/settings.ts
@@ -35,8 +35,7 @@ export const SETTINGS_SECTIONS: {
   {
     id: "providers",
     label: "Providers",
-    description:
-      "Agent CLIs MonoCode can drive, and the model new sessions start with.",
+    description: "Choose the default agent CLI and model for new sessions.",
   },
   {
     id: "inbox",
@@ -52,7 +51,7 @@ export const SETTINGS_SECTIONS: {
   {
     id: "archive",
     label: "Archive",
-    description: "Projects and conversations you have archived.",
+    description: "Projects and sessions you have archived.",
   },
 ];
 
diff --git a/src/surfaces/InboxComments.tsx b/src/surfaces/InboxComments.tsx
index 03a9edd5..5008e0b6 100644
--- a/src/surfaces/InboxComments.tsx
+++ b/src/surfaces/InboxComments.tsx
@@ -209,7 +209,7 @@ export function InboxCommentForm({
             disabled={!canPost}
             className="inline-flex h-7 items-center rounded-md bg-content px-3 text-[12px] text-background-base hover:bg-content/80 disabled:cursor-default disabled:opacity-40"
           >
-            {posting ? "Posting..." : replyTo ? "Reply" : "Comment"}
+            {posting ? "Posting…" : replyTo ? "Reply" : "Comment"}
           </button>
         </div>
       </div>
diff --git a/src/surfaces/InboxDiscussionPanel.tsx b/src/surfaces/InboxDiscussionPanel.tsx
index ef1c1e80..a10893ca 100644
--- a/src/surfaces/InboxDiscussionPanel.tsx
+++ b/src/surfaces/InboxDiscussionPanel.tsx
@@ -77,7 +77,7 @@ export function InboxDiscussionPanel({
           Ask · {inboxItemRef(item)}
         </span>
         <IconButton
-          label="Restart conversation"
+          label="Restart session"
           disabled={loading}
           onClick={() => {
             setLoading(true);
diff --git a/src/surfaces/InboxView.tsx b/src/surfaces/InboxView.tsx
index dc9e745a..09e28586 100644
--- a/src/surfaces/InboxView.tsx
+++ b/src/surfaces/InboxView.tsx
@@ -829,9 +829,11 @@ export function InboxView({
           </button>
           <button
             type="button"
-            aria-label="Refresh"
+            title="Refresh inbox"
+            aria-label="Refresh inbox"
+            disabled={loading || revalidating}
             onClick={() => setRefresh((value) => value + 1)}
-            className="grid size-6 shrink-0 place-items-center rounded-md text-content/45 hover:bg-content/10 hover:text-content"
+            className="grid size-6 shrink-0 place-items-center rounded-md text-content/45 hover:bg-content/10 hover:text-content disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-content/45"
           >
             {loading || revalidating ? (
               <LoaderCircle
@@ -1762,7 +1764,7 @@ export function InboxDetail({
                     }}
                     className={`${ACTION_FILLED} disabled:cursor-default disabled:opacity-40`}
                   >
-                    {starting ? "Sending..." : "Send to agent"}
+                    {starting ? "Sending…" : "Send to agent"}
                   </button>
                   {chooseStartProject ? (
                     <InboxProjectPicker
diff --git a/src/surfaces/SearchView.tsx b/src/surfaces/SearchView.tsx
index fb9b4077..bfed8b90 100644
--- a/src/surfaces/SearchView.tsx
+++ b/src/surfaces/SearchView.tsx
@@ -44,7 +44,7 @@ import { searchSessions, type SessionSummary } from "../lib/sessionStore";
 
 const SCOPES: { id: SearchScope; label: string }[] = [
   { id: "all", label: "All" },
-  { id: "conversations", label: "Conversations" },
+  { id: "conversations", label: "Sessions" },
   { id: "files", label: "Files" },
   { id: "projects", label: "Projects" },
 ];
@@ -339,7 +339,7 @@ export function SearchView({
             value={query}
             onChange={(event) => setQuery(event.target.value)}
             onKeyDown={onQueryKeyDown}
-            placeholder="Search everything..."
+            placeholder="Search everything…"
             aria-label="Search"
             spellCheck={false}
             autoComplete="off"
@@ -436,7 +436,7 @@ function EmptyState() {
       </div>
 
       <p className="max-w-xs text-center text-[13px] text-content/45">
-        Find files, conversations, messages, and projects.
+        Find files, sessions, messages, and projects.
       </p>
     </div>
   );
diff --git a/src/surfaces/SettingsView.tsx b/src/surfaces/SettingsView.tsx
index 1a996105..e69a07fe 100644
--- a/src/surfaces/SettingsView.tsx
+++ b/src/surfaces/SettingsView.tsx
@@ -1440,7 +1440,7 @@ function ChatBackgroundCard({
               <div className="min-w-0">
                 <div className="text-[12px] text-content">Show on</div>
                 <p className="text-[11px] text-content/40">
-                  Empty sessions only, or every conversation.
+                  Empty sessions only, or all sessions.
                 </p>
               </div>
               <Segmented
@@ -1477,7 +1477,7 @@ function ChatBackgroundCard({
                   Session visibility
                 </div>
                 <p className="text-[11px] text-content/40">
-                  Background strength once the conversation has messages.
+                  Background strength once the session has messages.
                 </p>
               </div>
               <Slider
@@ -1592,28 +1592,27 @@ function ProvidersPage() {
 
   return (
     <>
-      <p className="pb-2 text-[12px] leading-relaxed text-content/45">
-        A provider is listed as installed once its CLI is found on your PATH.
-        Uninstalled CLIs stay listed here but are omitted from the model picker.
-        Turn off Show in picker to hide an installed provider from those tabs.
-        The model beside each provider is what new conversations use when that
-        provider is selected; Use by default picks the provider itself.
+      <p className="max-w-2xl pb-4 text-[12px] leading-relaxed text-content/45">
+        Installed providers can appear in the composer model picker. Missing
+        CLIs remain listed with installation instructions.
       </p>
-      {HARNESSES.map((harness) => (
-        <ProviderRow
-          key={harness}
-          harness={harness}
-          selectedModel={
-            defaultModels[harness] ??
-            (choice?.harness === harness
-              ? choice.model
-              : defaultModelId(harness))
-          }
-          isDefault={choice?.harness === harness}
-          onDefault={onDefault}
-          onModelChange={onModelChange}
-        />
-      ))}
+      <div className="overflow-hidden rounded-xl border border-content/10">
+        {HARNESSES.map((harness) => (
+          <ProviderRow
+            key={harness}
+            harness={harness}
+            selectedModel={
+              defaultModels[harness] ??
+              (choice?.harness === harness
+                ? choice.model
+                : defaultModelId(harness))
+            }
+            isDefault={choice?.harness === harness}
+            onDefault={onDefault}
+            onModelChange={onModelChange}
+          />
+        ))}
+      </div>
     </>
   );
 }
@@ -1650,52 +1649,62 @@ function ProviderRow({
   };
 
   return (
-    <Row
-      label={
-        <span className="flex items-center gap-2">
+    <div className="flex items-center gap-6 border-b border-content/8 px-4 py-3.5 last:border-b-0 max-[900px]:flex-col max-[900px]:items-stretch max-[900px]:gap-3">
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2 text-[13px] font-medium text-content">
           <HarnessIcon harness={harness} className="size-4 shrink-0" />
-          {HARNESS_TITLE[harness]}
+          <span>{HARNESS_TITLE[harness]}</span>
           {isDefault ? (
-            <span className="rounded-full bg-content/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-content/60">
+            <span className="rounded-full bg-accent/10 px-1.5 py-0.5 text-[10px] font-medium text-accent">
               Default
             </span>
           ) : null}
-        </span>
-      }
-      description={
-        available
-          ? `${models.length} ${models.length === 1 ? "model" : "models"} available.`
-          : harnessUnavailableHint(harness)
-      }
-    >
-      {current ? (
-        <Select
-          label={`${HARNESS_TITLE[harness]} model`}
-          value={current.id}
-          onChange={(next) => onModelChange(harness, next)}
-          options={models.map((item) => ({
-            value: item.id,
-            label: item.name,
-          }))}
-        />
-      ) : null}
-      <SecondaryButton
-        onClick={() => current && onDefault(harness, current.id)}
-        disabled={isDefault || !current}
-      >
-        {isDefault ? "Default" : "Use by default"}
-      </SecondaryButton>
-      {available ? (
-        <div className="flex items-center gap-2">
-          <span className="text-[12px] text-content/50">Show in picker</span>
+        </div>
+        <p className="mt-1 text-[12px] leading-relaxed text-content/45">
+          {available
+            ? `${models.length} ${models.length === 1 ? "model" : "models"} available`
+            : harnessUnavailableHint(harness)}
+        </p>
+      </div>
+
+      <div className="grid shrink-0 grid-cols-[11rem_8.5rem_7rem] items-center gap-3 max-[900px]:w-full max-[900px]:grid-cols-1">
+        {current ? (
+          <Select
+            label={`${HARNESS_TITLE[harness]} model`}
+            value={current.id}
+            disabled={!available}
+            onChange={(next) => onModelChange(harness, next)}
+            options={models.map((item) => ({
+              value: item.id,
+              label: item.name,
+            }))}
+            className="w-44"
+          />
+        ) : (
+          <span />
+        )}
+        <div
+          className={`flex items-center justify-end gap-2 ${available ? "" : "opacity-40"}`}
+        >
+          <span className="whitespace-nowrap text-[12px] text-content/50">
+            In picker
+          </span>
           <Toggle
             label={`Show ${HARNESS_TITLE[harness]} in the model picker`}
             on={inPicker}
             onChange={onPickerVisible}
+            disabled={!available}
           />
         </div>
-      ) : null}
-    </Row>
+        <SecondaryButton
+          onClick={() => current && onDefault(harness, current.id)}
+          disabled={isDefault || !available || !current}
+          className="w-28 justify-center"
+        >
+          {isDefault ? "Default" : "Set default"}
+        </SecondaryButton>
+      </div>
+    </div>
   );
 }
 
@@ -1790,7 +1799,7 @@ function ArchivePage({
 
       <Row
         label="Show archived in the sidebar"
-        description="Keep archived conversations listed alongside the active ones."
+        description="Keep archived sessions listed alongside the active ones."
       >
         <Toggle
           label="Show archived in the sidebar"
@@ -1803,17 +1812,17 @@ function ArchivePage({
         title={
           looksLikeProject(cwd)
             ? `Archived in ${projectName(cwd)}`
-            : "Archived conversations"
+            : "Archived sessions"
         }
       />
 
       {!looksLikeProject(cwd) ? (
         <p className="py-3 text-[12px] text-content/45">
-          Open a project to see its archived conversations.
+          Open a project to see its archived sessions.
         </p>
       ) : archived.length === 0 ? (
         <p className="py-3 text-[12px] text-content/45">
-          No archived conversations in this project.
+          No archived sessions in this project.
         </p>
       ) : (
         <div className="overflow-hidden rounded-lg border border-content/10">
@@ -2092,11 +2101,15 @@ function Select({
   value,
   options,
   onChange,
+  disabled = false,
+  className,
 }: {
   label: string;
   value: string;
   options: { value: string; label: string }[];
   onChange: (value: string) => void;
+  disabled?: boolean;
+  className?: string;
 }) {
   const [open, setOpen] = useState(false);
   const [active, setActive] = useState(() =>
@@ -2170,15 +2183,16 @@ function Select({
   };
 
   return (
-    <div ref={root} className="relative max-w-52">
+    <div ref={root} className={`relative max-w-52 ${className ?? ""}`}>
       <button
         type="button"
         ref={trigger}
         aria-label={`${label}: ${selected?.label ?? value}`}
         aria-expanded={open}
         aria-haspopup="listbox"
+        disabled={disabled}
         onClick={() => setOpen((prev) => !prev)}
-        className="flex w-full items-center justify-between gap-2 rounded-md border border-content/10 bg-content/5 px-2 py-1 text-left text-[12px] text-content outline-none hover:border-content/20"
+        className="flex w-full items-center justify-between gap-2 rounded-md border border-content/10 bg-content/5 px-2 py-1 text-left text-[12px] text-content outline-none hover:border-content/20 disabled:cursor-default disabled:opacity-40 disabled:hover:border-content/10"
       >
         <span className="min-w-0 flex-1 truncate">
           {selected ? selected.label : value}
@@ -2245,11 +2259,13 @@ function SecondaryButton({
   onClick,
   disabled = false,
   danger = false,
+  className,
   children,
 }: {
   onClick: () => void;
   disabled?: boolean;
   danger?: boolean;
+  className?: string;
   children: ReactNode;
 }) {
   return (
@@ -2261,7 +2277,7 @@ function SecondaryButton({
         danger
           ? "text-red-400 hover:border-red-400/40 hover:bg-red-400/10"
           : "text-content/70 hover:bg-content/10 hover:text-content"
-      } disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent`}
+      } disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent ${className ?? ""}`}
     >
       {children}
     </button>