tmux-ide 2.9.0-beta.28 → 2.9.0-beta.29

package/bin/cli.js

@@ -11279,7 +11279,7 @@ var require_package = __commonJS({
   "package.json"(exports, module) {
     module.exports = {
       name: "tmux-ide",
-      version: "2.9.0-beta.28",
+      version: "2.9.0-beta.29",
       description: "A visual, agent-aware IDE for any tmux session, with optional workspace presets",
       type: "module",
       bin: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tmux-ide",
-  "version": "2.9.0-beta.28",
+  "version": "2.9.0-beta.29",
   "description": "A visual, agent-aware IDE for any tmux session, with optional workspace presets",
   "type": "module",
   "bin": {

package/packages/daemon/dist/tui/mirror/runtime/application-appearance-owner.js

@@ -77,7 +77,7 @@ export function createAppearanceOwner(config, renderer, terminalPaletteOwner) {
         { id: "system", name: "System · follow terminal" },
         { id: "dark", name: "Dark" },
         { id: "light", name: "Light" },
-        ...VISUAL_THEME_PRESETS,
+        ...[...VISUAL_THEME_PRESETS].sort((a, b) => a.name.localeCompare(b.name)),
     ];
     const pickerOptions = () => options.filter((p) => `${p.id} ${p.name}`.toLowerCase().includes(pickerQuery().toLowerCase()));
     const apply = (id) => {
@@ -102,6 +102,14 @@ export function createAppearanceOwner(config, renderer, terminalPaletteOwner) {
         if (options.some((p) => p.id === id))
             apply(id);
     };
+    const filterPicker = (query) => {
+        setPickerQuery(query);
+        const first = pickerOptions()[0];
+        if (!query)
+            preview(originalSelection);
+        else if (first)
+            preview(first.id);
+    };
     const cancelPicker = () => {
         if (!pickerOpen())
             return;
@@ -111,7 +119,7 @@ export function createAppearanceOwner(config, renderer, terminalPaletteOwner) {
         setPickerError(null);
     };
     const savePicker = () => {
-        if (!pickerOpen())
+        if (!pickerOpen() || !pickerOptions().some((option) => option.id === pickerSelection()))
             return;
         try {
             updateAppConfig({
@@ -150,6 +158,7 @@ export function createAppearanceOwner(config, renderer, terminalPaletteOwner) {
         pickerError,
         pickerQuery,
         pickerSelection,
+        pickerOriginalSelection: () => originalSelection,
         pickerOptions,
         openPicker() {
             if (pickerOpen())
@@ -188,12 +197,12 @@ export function createAppearanceOwner(config, renderer, terminalPaletteOwner) {
                 }
             }
             else if (name === "backspace") {
-                setPickerQuery((q) => q.slice(0, -1));
+                filterPicker(pickerQuery().slice(0, -1));
             }
             else if (!event.ctrl && !event.meta) {
                 const text = event.sequence ?? (name.length === 1 ? name : "");
                 if (text.length === 1 && text >= " ")
-                    setPickerQuery((q) => (q + text).slice(0, 80));
+                    filterPicker((pickerQuery() + text).slice(0, 80));
             }
             return true;
         },

package/packages/daemon/dist/tui/mirror/runtime/application-home-agents-owner.js

@@ -203,7 +203,10 @@ export function createApplicationHomeNavigationOwner(options) {
             if (typeof command === "object" ||
                 command === "home" ||
                 command === "terminals" ||
-                command === "appearance")
+                command === "appearance" ||
+                command === "shortcuts" ||
+                command === "whats-new" ||
+                command === "switch-session")
                 return null;
             if (options.sessionOwner()?.snapshot()?.status !== "live")
                 return "Open a live session first";
@@ -215,6 +218,7 @@ export function createApplicationHomeNavigationOwner(options) {
         setSurface: options.setSurface,
         setNote: options.setNote,
         openAppearance: options.openAppearance,
+        openSessions: options.openSessions,
         zoomPane: options.zoomPane,
         newWindow: options.interaction.newWindow,
         splitPane: options.interaction.splitPane,

package/packages/daemon/dist/tui/mirror/runtime/application-home-experience.js

@@ -23,6 +23,7 @@ export function createApplicationHomeExperience(options) {
         fleetHome: fleetHome.presentation,
         fleetCommands: machines.paletteCommands,
         openFleet: machines.openPalette,
+        openSessions: () => machines.showSwitcher(false),
     });
     const tour = createApplicationGuidedTourIntegration({
         ...options,

package/packages/daemon/dist/tui/mirror/runtime/application-palette-command-owner.js

@@ -2,6 +2,7 @@ import { createSignal } from "solid-js";
 import { applicationPaletteCommands } from "./application-palette-input.js";
 import { createApplicationPaletteSearchOwner } from "./application-palette-search-owner.js";
 export function createApplicationPaletteCommandOwner(options) {
+    const [referencePage, setReferencePage] = createSignal();
     const [closeArmed, setCloseArmed] = createSignal(false);
     const [busy, setBusy] = createSignal(false);
     let armedTarget;
@@ -14,6 +15,7 @@ export function createApplicationPaletteCommandOwner(options) {
         onChange: () => setCloseArmed(false),
     });
     const setOpen = (open, source) => {
+        setReferencePage(undefined);
         openRevision += 1;
         setCloseArmed(false);
         if (open)
@@ -25,6 +27,20 @@ export function createApplicationPaletteCommandOwner(options) {
     const activate = (command, source, confirmed = false) => {
         if (busy())
             return;
+        if (command === "shortcuts" || command === "whats-new") {
+            setCloseArmed(false);
+            setReferencePage(command === "shortcuts" ? "shortcuts" : "changes");
+            return;
+        }
+        if (command === "switch-session") {
+            if (!options.openSessions) {
+                options.setNote("Session switching is unavailable.");
+                return;
+            }
+            setOpen(false, source);
+            options.openSessions();
+            return;
+        }
         if (command === "appearance") {
             setOpen(false, source);
             options.openAppearance?.();
@@ -124,6 +140,8 @@ export function createApplicationPaletteCommandOwner(options) {
     };
     return {
         ...search,
+        referencePage,
+        setReferencePage,
         busy,
         disabledReason: options.disabledReason ?? (() => null),
         closeArmed: () => closeArmed() && armedTarget === options.targetKey?.(),

package/packages/daemon/dist/tui/mirror/runtime/application-palette-input.js

@@ -8,8 +8,11 @@ const BASE_COMMANDS = [
     "split-right",
     "split-down",
     "close-pane",
-    "appearance",
     "zoom-pane",
+    "appearance",
+    "shortcuts",
+    "whats-new",
+    "switch-session",
 ];
 /** Agent commands are derived from the same semantic rows as the sidebar. */
 export function applicationPaletteCommands(semantic, liveSessions = []) {

package/packages/daemon/dist/tui/mirror/ui/dialog.jsx

@@ -1,6 +1,6 @@
 import { OverlayFrame } from "./overlay-frame.jsx";
 export function Dialog(props) {
-    return (<OverlayFrame theme={props.theme} viewportWidth={props.viewportWidth} viewportHeight={props.viewportHeight} width={props.width} height={props.height} {...(props.title ? { title: props.title } : {})} {...(props.footer ? { footer: props.footer } : {})} {...(props.placement ? { placement: props.placement } : {})} {...(props.active !== undefined ? { active: props.active } : {})} {...(props.zIndex !== undefined ? { zIndex: props.zIndex } : {})} {...(props.dismissOnOutsidePress !== undefined
+    return (<OverlayFrame surface={props.surface} theme={props.theme} viewportWidth={props.viewportWidth} viewportHeight={props.viewportHeight} width={props.width} height={props.height} {...(props.title ? { title: props.title } : {})} {...(props.footer ? { footer: props.footer } : {})} {...(props.placement ? { placement: props.placement } : {})} {...(props.active !== undefined ? { active: props.active } : {})} {...(props.zIndex !== undefined ? { zIndex: props.zIndex } : {})} {...(props.dismissOnOutsidePress !== undefined
         ? { dismissOnOutsidePress: props.dismissOnOutsidePress }
         : {})} onDismiss={props.onDismiss}>
       {props.children}

package/packages/daemon/dist/tui/mirror/ui/overlay-frame.jsx

@@ -1,5 +1,5 @@
 import { clipTerminal } from "../terminal-text.js";
-import { overlayFrameSize } from "./overlay-model.js";
+import { overlayFrameSize, overlaySurfacePadding } from "./overlay-model.js";
 /** Owns modal geometry and pointer capture without owning commands or renderer lifecycle. */
 export function OverlayFrame(props) {
     const viewportWidth = () => Math.max(1, Math.floor(props.viewportWidth));
@@ -13,8 +13,9 @@ export function OverlayFrame(props) {
     const width = () => size().width;
     const height = () => size().height;
     // Empty border sides below keep OpenTUI border styling from enabling a frame.
-    const bordered = () => width() >= 4 && height() >= 3;
-    const innerWidth = () => Math.max(1, width() - (bordered() ? 2 : 0));
+    const bordered = () => !props.surface && width() >= 4 && height() >= 3;
+    const padding = () => overlaySurfacePadding(width(), height());
+    const innerWidth = () => Math.max(1, width() - (props.surface ? padding().horizontal * 2 : bordered() ? 2 : 0));
     const left = () => {
         if (props.placement === "anchor")
             return Math.max(0, Math.min(props.anchor?.x ?? 0, viewportWidth() - width()));
@@ -29,15 +30,30 @@ export function OverlayFrame(props) {
             return Math.min(1, viewportHeight() - height());
         return Math.max(0, Math.floor((viewportHeight() - height()) / 2));
     };
-    const frame = () => (<box id="ui-overlay-frame" position="absolute" left={left()} top={top()} width={width()} height={height()} zIndex={props.zIndex ?? 100} border={bordered() ? true : []} borderStyle="rounded" borderColor={props.theme.roles.borders.focused} backgroundColor={props.theme.roles.surfaces.panelRaised} flexDirection="column" paddingLeft={bordered() ? 1 : 0} overflow="hidden" onMouseDown={(event) => {
+    const frame = () => (<box id="ui-overlay-frame" position="absolute" left={left()} top={top()} width={width()} height={height()} zIndex={props.zIndex ?? 100} border={bordered() ? true : []} borderStyle="rounded" borderColor={props.theme.roles.borders.focused} backgroundColor={props.surface ? props.theme.roles.surfaces.command : props.theme.roles.surfaces.panelRaised} flexDirection="column" paddingLeft={props.surface ? padding().horizontal : bordered() ? 1 : 0} paddingRight={props.surface ? padding().horizontal : 0} paddingTop={props.surface ? padding().vertical : 0} paddingBottom={props.surface ? padding().vertical : 0} overflow="hidden" onMouseDown={(event) => {
             event.preventDefault();
             event.stopPropagation();
         }}>
-      {props.title && height() >= 4 ? (<text width={innerWidth()} fg={props.theme.roles.text.primary} bg={props.theme.roles.surfaces.panelRaised} overflow="hidden">
-          <strong>{clipTerminal(props.title, innerWidth())}</strong>
-        </text>) : null}
+      {props.title && height() >= 4 ? (<box width={innerWidth()} height={1} flexShrink={0} flexDirection="row">
+          <text width={Math.max(1, innerWidth() - (props.surface && innerWidth() >= 20 ? 4 : 0))} fg={props.theme.roles.text.primary} overflow="hidden">
+            <strong>
+              {clipTerminal(props.title, Math.max(1, innerWidth() - (props.surface && innerWidth() >= 20 ? 4 : 0)))}
+            </strong>
+          </text>
+          {props.surface && innerWidth() >= 20 ? (<text width={4} fg={props.theme.roles.text.muted} onMouseDown={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (event.button === 0 && props.active !== false)
+                        props.onDismiss?.();
+                }}>
+              {" "}
+              esc
+            </text>) : null}
+        </box>) : null}
       {props.children}
-      {props.footer && height() >= 5 ? (<text width={innerWidth()} fg={props.theme.roles.text.muted} bg={props.theme.roles.surfaces.panelRaised} overflow="hidden">
+      {props.footer && height() >= 5 ? (<text width={innerWidth()} height={1} flexShrink={0} fg={props.theme.roles.text.muted} bg={props.surface
+                ? props.theme.roles.surfaces.command
+                : props.theme.roles.surfaces.panelRaised} overflow="hidden">
           {clipTerminal(props.footer, innerWidth())}
         </text>) : null}
     </box>);

package/packages/daemon/dist/tui/mirror/ui/overlay-list-row.jsx

@@ -2,22 +2,46 @@
 import { For, createMemo } from "solid-js";
 import { fuzzyTermsMatch as commandSearchMatch } from "../../team/fuzzy.js";
 import { clipTerminal, terminalDisplayWidth } from "../terminal-text.js";
+import { overlayRowPalette } from "./overlay-surface.js";
 import { componentPalette } from "./state.js";
 export function OverlayListRow(props) {
-    const palette = () => componentPalette(props.theme, { selected: props.selected, disabled: props.disabled, attention: props.danger }, props.danger ? "blocked" : "neutral");
+    const palette = () => props.surface
+        ? overlayRowPalette(props.theme, {
+            selected: props.selected,
+            disabled: props.disabled,
+            attention: props.danger,
+        })
+        : componentPalette(props.theme, { selected: props.selected, disabled: props.disabled, attention: props.danger }, props.danger ? "blocked" : "neutral");
     const content = () => {
-        const shortcut = props.shortcut ? ` ${props.shortcut}` : "";
-        const prefix = props.selected ? "› " : props.reserveMarker ? "  " : "";
+        const prefix = props.current !== undefined
+            ? props.current
+                ? "● "
+                : "  "
+            : props.selected
+                ? props.surface
+                    ? "  "
+                    : "› "
+                : props.reserveMarker
+                    ? "  "
+                    : "";
+        const shortcut = props.shortcut &&
+            props.width >=
+                terminalDisplayWidth(prefix) +
+                    terminalDisplayWidth(props.label) +
+                    terminalDisplayWidth(props.shortcut) +
+                    2
+            ? ` ${props.shortcut}`
+            : "";
         const available = Math.max(1, props.width - terminalDisplayWidth(prefix) - terminalDisplayWidth(shortcut));
         const label = clipTerminal(props.label, available);
         const gap = Math.max(0, props.width -
             terminalDisplayWidth(prefix) -
             terminalDisplayWidth(label) -
             terminalDisplayWidth(shortcut));
-        return clipTerminal(`${prefix}${label}${" ".repeat(gap)}${shortcut}`, props.width);
+        return { body: clipTerminal(`${prefix}${label}${" ".repeat(gap)}`, props.width), shortcut };
     };
     const segments = createMemo(() => {
-        const value = content();
+        const value = content().body;
         const matches = new Set(props.query ? (commandSearchMatch(value, props.query)?.indices ?? []) : []);
         const runs = [];
         for (const [index, character] of Array.from(value).entries()) {
@@ -48,5 +72,10 @@ export function OverlayListRow(props) {
               <u>{segment.text}</u>
             </strong>) : (segment.text)}
       </For>
+      <span style={{
+            fg: props.selected && !props.disabled ? palette().foreground : props.theme.roles.text.muted,
+        }}>
+        {content().shortcut}
+      </span>
     </text>);
 }

package/packages/daemon/dist/tui/mirror/ui/overlay-model.js

@@ -43,3 +43,10 @@ export function createOverlayFocusCoordinator(options) {
         },
     };
 }
+/** Cell padding collapses before labels become unusable in tiny terminals. */
+export function overlaySurfacePadding(width, height) {
+    return {
+        horizontal: height < 6 ? 0 : width >= 48 ? 3 : width >= 12 ? 2 : 0,
+        vertical: height >= 8 ? 1 : 0,
+    };
+}

package/packages/daemon/dist/tui/mirror/ui/overlay-surface.js

@@ -0,0 +1,13 @@
+import { componentPalette } from "./state.js";
+/** Shared surface treatment for command and appearance lists. */
+export function overlayRowPalette(theme, state = {}) {
+    const palette = componentPalette(theme, state);
+    return {
+        ...palette,
+        // Current is a marker, not a second selection background.
+        background: state.selected || state.disabled || state.attention
+            ? palette.background
+            : theme.roles.surfaces.command,
+        accent: state.selected && !state.disabled ? palette.foreground : palette.accent,
+    };
+}

package/packages/daemon/dist/tui/mirror/workspace/application-command-description.js

@@ -1,8 +1,21 @@
 import { fuzzyTermsMatch as commandSearchMatch } from "../../team/fuzzy.js";
 export { fuzzyTermsMatch as commandSearchMatch } from "../../team/fuzzy.js";
 import { PANE_ACTION_MENU_ITEMS } from "./pane-action-menu-model.js";
+export const PALETTE_REFERENCE_COMMANDS = {
+    shortcuts: { label: "Keyboard shortcuts", shortcut: "Ctrl+K", key: "k", page: "shortcuts" },
+    "whats-new": { label: "What's new", shortcut: "Ctrl+B", key: "b", page: "changes" },
+};
 /** Presentation only: execution remains in the existing application owners. */
 export function applicationCommandDescription(command) {
+    if (command === "switch-session")
+        return {
+            id: command,
+            label: "Switch session",
+            shortcut: "F6",
+            detail: "Sessions across machines",
+        };
+    if (command === "shortcuts" || command === "whats-new")
+        return { id: command, ...PALETTE_REFERENCE_COMMANDS[command], detail: "Help and reference" };
     if (typeof command === "object" && command.kind === "open-machine")
         return {
             id: JSON.stringify([
@@ -50,11 +63,8 @@ export function applicationCommandDescription(command) {
                 : command === "zoom-pane"
                     ? "Zoom / unzoom pane"
                     : undefined) ??
-            (command === "home"
-                ? "F1 Home"
-                : command === "terminals"
-                    ? "F2 Terminals"
-                    : "New terminal window"),
+            (command === "home" ? "Home" : command === "terminals" ? "Terminals" : "New terminal window"),
+        shortcut: command === "home" ? "F1" : command === "terminals" ? "F2" : undefined,
         detail: command === "home"
             ? "sessions and agent state"
             : command === "terminals"
@@ -65,8 +75,8 @@ export function applicationCommandDescription(command) {
 export function filterApplicationCommands(commands, query) {
     return commands
         .map((command, index) => {
-        const { label, detail } = applicationCommandDescription(command);
-        const score = commandSearchMatch(`${label} ${detail}`, query)?.score;
+        const { label, detail, shortcut } = applicationCommandDescription(command);
+        const score = commandSearchMatch(`${label} ${detail} ${shortcut ?? ""}`, query)?.score;
         const fleet = typeof command === "object" ? command.fleet : undefined;
         return {
             command,

package/packages/daemon/dist/tui/mirror/workspace/command-palette-surface-view.jsx

@@ -1,7 +1,7 @@
 /* @jsxImportSource @opentui/solid */
 import { createMemo, For, Show } from "solid-js";
 import { terminalDisplayWidth } from "../panel-host.js";
-import { recipePalette } from "../recipes.js";
+import { overlayRowPalette } from "../ui/overlay-surface.js";
 import { workspaceIcon } from "./icons.js";
 import { clipWorkspaceText } from "./text.js";
 function sameIds(left, right) {
@@ -14,7 +14,7 @@ function localY(projection, y) {
     return y - projection.overlay.y - (projection.bordered ? 1 : 0);
 }
 function commandRowPalette(theme, row) {
-    return recipePalette(theme, {
+    return overlayRowPalette(theme, {
         disabled: row.disabled,
         selected: row.selected,
         focused: row.current,
@@ -27,7 +27,9 @@ function CommandRow(props) {
         <text fg={palette().accent}>{props.row.markerSpan.text}</text>
       </box>
       <box position="absolute" left={props.row.iconSpan.x - props.row.rect.x} top={0} width={props.row.iconSpan.width} height={1}>
-        <text fg={props.row.current && !props.row.disabled ? props.theme.colors.focus : palette().accent}>
+        <text fg={props.row.current && !props.row.disabled && !props.row.selected
+            ? props.theme.colors.focus
+            : palette().accent}>
           {props.row.iconSpan.text}
         </text>
       </box>
@@ -36,15 +38,17 @@ function CommandRow(props) {
       </box>
       <Show when={props.row.trailingSpan !== null}>
         <box position="absolute" left={props.row.trailingSpan.x - props.row.rect.x} top={0} width={props.row.trailingSpan.width} height={1}>
-          <text fg={props.row.disabled ? props.theme.colors.mutedForeground : props.theme.colors.accent}>
+          <text fg={props.row.selected && !props.row.disabled
+            ? palette().foreground
+            : props.theme.colors.mutedForeground}>
             {props.row.trailingSpan.text}
           </text>
         </box>
       </Show>
       <Show when={props.row.detailSpan !== null}>
         <box position="absolute" left={props.row.detailSpan.x - props.row.rect.x} top={1} width={props.row.detailSpan.width} height={1}>
-          <text fg={props.row.disabled
-            ? props.theme.colors.status.blocked
+          <text fg={props.row.selected && !props.row.disabled
+            ? palette().foreground
             : props.theme.colors.mutedForeground}>
             {props.row.detailSpan.text}
           </text>
@@ -53,7 +57,7 @@ function CommandRow(props) {
     </box>);
 }
 function StateRow(props) {
-    const palette = () => recipePalette(props.theme, {
+    const palette = () => overlayRowPalette(props.theme, {
         loading: props.row.state === "loading",
         empty: props.row.state === "empty" || props.row.state === "no-match",
         attention: props.row.state === "error",
@@ -73,7 +77,7 @@ function StateRow(props) {
     </box>);
 }
 function Row(props) {
-    return (<Show when={props.row.kind === "command"} fallback={<Show when={props.row.kind === "state"} fallback={<box position="absolute" left={localX(props.projection, props.row.rect.x)} top={localY(props.projection, props.row.rect.y)} width={props.row.rect.width} height={1} backgroundColor={props.theme.colors.surface} overflow="hidden">
+    return (<Show when={props.row.kind === "command"} fallback={<Show when={props.row.kind === "state"} fallback={<box position="absolute" left={localX(props.projection, props.row.rect.x)} top={localY(props.projection, props.row.rect.y)} width={props.row.rect.width} height={1} backgroundColor={props.theme.roles.surfaces.command} overflow="hidden">
               <box position="absolute" left={props.row.labelSpan.x - props.row.rect.x} top={0} width={props.row.labelSpan.width} height={1}>
                 <text fg={props.theme.colors.mutedForeground}>{props.row.labelSpan.text}</text>
               </box>
@@ -106,9 +110,9 @@ function footerRight(projection) {
 export function CommandPaletteSurface(props) {
     const entries = createMemo(() => new Map(props.projection.rows.map((row) => [row.id, row])));
     const rowIds = createMemo(() => props.projection.rowIds, undefined, { equals: sameIds });
-    const count = () => `${props.projection.commandCount}`;
+    const count = () => "esc";
     const countWidth = () => terminalDisplayWidth(count());
-    const headerTitle = () => clipWorkspaceText(` ${workspaceIcon("command")} ${props.projection.title}`, Math.max(0, props.projection.header.width - countWidth() - 2));
+    const headerTitle = () => clipWorkspaceText(props.projection.title, Math.max(0, props.projection.header.width - countWidth() - 2));
     const leftFooter = () => clipWorkspaceText(footerLeft(props.projection), props.projection.footer.width);
     const rightFooter = () => {
         const leftWidth = terminalDisplayWidth(leftFooter());
@@ -116,17 +120,19 @@ export function CommandPaletteSurface(props) {
     };
     const footerRightWidth = () => terminalDisplayWidth(rightFooter());
     return (<box width={props.projection.width} height={props.projection.height} position="absolute" left={0} top={0} overflow="hidden">
-      <box position="absolute" left={props.projection.overlay.x} top={props.projection.overlay.y} width={props.projection.overlay.width} height={props.projection.overlay.height} border={props.projection.bordered ? true : []} borderStyle="rounded" borderColor={props.theme.colors.focusBorder} backgroundColor={props.theme.colors.surface} overflow="hidden">
+      <box position="absolute" left={props.projection.overlay.x} top={props.projection.overlay.y} width={props.projection.overlay.width} height={props.projection.overlay.height} border={props.projection.bordered ? true : []} borderStyle="rounded" borderColor={props.theme.colors.focusBorder} backgroundColor={props.theme.roles.surfaces.command} overflow="hidden">
         <Show when={props.projection.header.height > 0}>
-          <box position="absolute" left={localX(props.projection, props.projection.header.x)} top={localY(props.projection, props.projection.header.y)} width={props.projection.header.width} height={1} backgroundColor={props.theme.colors.surfaceRaised} overflow="hidden">
-            <text fg={props.theme.colors.foreground}>{headerTitle()}</text>
+          <box position="absolute" left={localX(props.projection, props.projection.header.x)} top={localY(props.projection, props.projection.header.y)} width={props.projection.header.width} height={1} backgroundColor={props.theme.roles.surfaces.command} overflow="hidden">
+            <text fg={props.theme.colors.foreground}>
+              <strong>{headerTitle()}</strong>
+            </text>
             <box position="absolute" right={0} top={0} width={countWidth()} height={1}>
               <text fg={props.theme.colors.mutedForeground}>{count()}</text>
             </box>
           </box>
         </Show>
         <Show when={props.projection.query.height > 0}>
-          <box position="absolute" left={localX(props.projection, props.projection.query.x)} top={localY(props.projection, props.projection.query.y)} width={props.projection.query.width} height={1} backgroundColor={props.theme.colors.background} overflow="hidden" flexDirection="row">
+          <box position="absolute" left={localX(props.projection, props.projection.query.x)} top={localY(props.projection, props.projection.query.y)} width={props.projection.query.width} height={1} backgroundColor={props.theme.roles.surfaces.panel} overflow="hidden" flexDirection="row">
             <text fg={props.theme.colors.accent}>{` ${workspaceIcon("search")} `}</text>
             <text fg={props.projection.queryText
             ? props.theme.colors.foreground
@@ -137,14 +143,14 @@ export function CommandPaletteSurface(props) {
         </Show>
         <Show when={props.projection.divider.height > 0}>
           <box position="absolute" left={localX(props.projection, props.projection.divider.x)} top={localY(props.projection, props.projection.divider.y)} width={props.projection.divider.width} height={1} overflow="hidden">
-            <text fg={props.theme.colors.border}>{"─".repeat(props.projection.divider.width)}</text>
+            {/* Space separates search from results without a rule. */}
           </box>
         </Show>
         <For each={rowIds()}>
           {(rowId) => (<Row theme={props.theme} projection={props.projection} row={entries().get(rowId)}/>)}
         </For>
         <Show when={props.projection.footer.height > 0}>
-          <box position="absolute" left={localX(props.projection, props.projection.footer.x)} top={localY(props.projection, props.projection.footer.y)} width={props.projection.footer.width} height={1} backgroundColor={props.theme.colors.surfaceRaised} overflow="hidden">
+          <box position="absolute" left={localX(props.projection, props.projection.footer.x)} top={localY(props.projection, props.projection.footer.y)} width={props.projection.footer.width} height={1} backgroundColor={props.theme.roles.surfaces.command} overflow="hidden">
             <text fg={props.theme.colors.mutedForeground}>{leftFooter()}</text>
             <Show when={footerRightWidth() > 0}>
               <box position="absolute" right={0} top={0} width={footerRightWidth()} height={1}>

package/packages/daemon/dist/tui/mirror/workspace/command-palette-surface.js

@@ -1,3 +1,4 @@
+import { overlaySurfacePadding } from "../ui/overlay-model.js";
 import { terminalDisplayWidth } from "../panel-host.js";
 import { workspaceIcon } from "./icons.js";
 import { clipWorkspaceText } from "./text.js";
@@ -29,13 +30,13 @@ function paletteGeometry(width, height, variant) {
         width: overlayWidth,
         height: overlayHeight,
     };
-    const bordered = overlay.width >= 8 && overlay.height >= 6;
-    const inset = bordered ? 1 : 0;
+    const bordered = false;
+    const padding = overlaySurfacePadding(overlay.width, overlay.height);
     const inner = {
-        x: overlay.x + inset,
-        y: overlay.y + inset,
-        width: Math.max(0, overlay.width - inset * 2),
-        height: Math.max(0, overlay.height - inset * 2),
+        x: overlay.x + padding.horizontal,
+        y: overlay.y + padding.vertical,
+        width: Math.max(0, overlay.width - padding.horizontal * 2),
+        height: Math.max(0, overlay.height - padding.vertical * 2),
     };
     const headerHeight = inner.height >= 3 ? 1 : 0;
     const queryHeight = inner.height >= 2 ? 1 : 0;
@@ -182,13 +183,7 @@ function projectCommandRow(candidate, rect, selectedCommandId) {
     const disabledReason = command.disabledReason?.trim() ?? "";
     const disabled = disabledReason.length > 0;
     const left = rect.x;
-    const markerText = disabled
-        ? "×"
-        : selected
-            ? workspaceIcon("command")
-            : command.current
-                ? "✓"
-                : " ";
+    const markerText = disabled ? "×" : selected ? " " : command.current ? "✓" : " ";
     const markerSpan = span(markerText, left, rect.y, Math.min(1, rect.width));
     const iconX = left + Math.min(2, rect.width);
     const iconSpan = span(workspaceIcon(command.icon), iconX, rect.y, Math.max(0, rect.width - 2));
@@ -231,7 +226,7 @@ function projectCommandRow(candidate, rect, selectedCommandId) {
 }
 function projectStateRow(candidate, rect, selectedCommandId, retryCommandId) {
     const selected = candidate.actionable && selectedCommandId === retryCommandId;
-    const prefix = `${selected ? workspaceIcon("command") : " "} ${candidate.icon} `;
+    const prefix = `${selected ? " " : " "} ${candidate.icon} `;
     const labelSpan = span(`${prefix}${candidate.title}`, rect.x, rect.y, rect.width);
     const detailSpan = rect.height > 1
         ? span(candidate.detail, rect.x + Math.min(4, rect.width), rect.y + 1, Math.max(0, rect.width - 4))

package/packages/daemon/dist/tui/mirror/workspace/palette-list-layout.js

@@ -0,0 +1,47 @@
+export function paletteSection(command) {
+    if (command === "switch-session")
+        return "Sessions";
+    if (typeof command === "object")
+        return command.kind === "jump-agent"
+            ? "Agents"
+            : command.kind === "open-machine"
+                ? "Machines"
+                : "Sessions";
+    if (command === "home" || command === "terminals")
+        return "Navigation";
+    if (command === "appearance")
+        return "Appearance";
+    if (command === "shortcuts" || command === "whats-new")
+        return "Help";
+    return "Panes";
+}
+/** Headings consume cells, never command indices or keyboard stops. */
+export function paletteListLayout(commands, selected, capacity, grouped) {
+    const limit = Math.max(1, capacity);
+    const sections = commands.map(paletteSection);
+    const useGroups = grouped && limit >= 6;
+    const focus = Math.max(0, Math.min(selected, commands.length - 1));
+    let start = focus;
+    let used = useGroups ? 2 : 1;
+    while (start > 0) {
+        const cost = 1 + (useGroups && sections[start - 1] !== sections[start] ? 2 : 0);
+        if (used + cost > limit)
+            break;
+        used += cost;
+        start--;
+    }
+    const rows = [];
+    used = 0;
+    for (let index = start; index < commands.length; index++) {
+        const heading = useGroups && (index === start || sections[index] !== sections[index - 1])
+            ? sections[index]
+            : null;
+        const gap = Boolean(heading && index !== start);
+        const cost = 1 + (heading ? 1 : 0) + (gap ? 1 : 0);
+        if (used + cost > limit)
+            break;
+        used += cost;
+        rows.push({ command: commands[index], index, heading, gap });
+    }
+    return rows;
+}

package/packages/daemon/src/tui/mirror/runtime/__snapshots__/application-shell-view-renderer.test.tsx.snap

@@ -50,23 +50,23 @@ exports[`production ApplicationShellView retains shell, window strip, pane chrom
 
 exports[`production ApplicationShellView reacts palette geometry through narrow live resizes 1`] = `
 "  ⌂  ●❯                live
- t╭──────────────────────╮
- m│ Command palette      │
- 2│ / Search commands…   │
- C│ › F1 Home            │…
-  │   F2 Terminals       │
-  │   New terminal wind… │
-  ╰──────────────────────╯
+ t  Command palette  esc
+ m   Search commands…
+ 2    Home            F1
+ C    Terminals       F2  …
+      New terminal wind…
+
+
  main  Live              F5"
 `;
 
 exports[`production ApplicationShellView reacts palette geometry through narrow live resizes 2`] = `
 "  ⌂  ●❯        live
- t╭──────────────╮
- m│ Commands     │
- 2│ / Search co… │w
- C│ › F1 Home    │…
-  ╰──────────────╯…
+ tCommand palette
+ m …rch commands…
+ 2  Home        F1w
+ C                …
+                  …
   ○ Commands F5"
 `;