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

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.30",
       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.30",
   "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-agent-roster.jsx

@@ -4,6 +4,10 @@ import { clipTerminal, terminalDisplayWidth } from "../terminal-text.js";
 import { NavigationRow } from "../ui/navigation-row.jsx";
 import { TuiButton } from "../ui/button.jsx";
 import { useKeyboardRoute } from "../ui/keyboard-router.jsx";
+import { applicationPaneRenameKeyAction, applicationPaneRenamePaste, } from "./application-pane-rename-input.js";
+import { HomeAgentSearch } from "../ui/home-agent-search.jsx";
+import { ActivityIndicator } from "../ui/activity-indicator.jsx";
+import { componentPalette } from "../ui/state.js";
 import { homeAgentStatusLabel, } from "./application-home-agents.js";
 function padCells(text, width) {
     const clipped = clipTerminal(text, Math.max(0, width));
@@ -21,6 +25,7 @@ function statusTone(row) {
 /** A flat projected roster; no subscriptions, navigation effects, or terminal input ingress. */
 export function HomeAgentRoster(props) {
     const [hovered, setHovered] = createSignal(null);
+    const [editing, setEditing] = createSignal(false);
     const width = () => Math.max(0, Math.floor(props.width));
     const height = () => Math.max(0, Math.floor(props.height));
     const stale = (row) => row.disabled ||
@@ -29,7 +34,14 @@ export function HomeAgentRoster(props) {
     const showRecovery = () => Boolean(((props.snapshot.phase === "unavailable" || props.snapshot.unavailableSessions > 0) &&
         props.onRetry) ||
         (props.snapshot.truncatedSessions > 0 && props.onLoadMore));
-    const visibleCount = () => Math.max(0, height() - 5 - (showRecovery() ? 1 : 0));
+    const rowHeight = () => (width() >= 60 && height() >= 16 ? 2 : 1);
+    const searchRows = () => (props.onQueryChange ? 2 : 0);
+    const visibleCount = () => Math.max(0, Math.floor((height() - 5 - searchRows() - (showRecovery() ? 1 : 0)) / rowHeight()));
+    const openSelected = () => {
+        const row = props.snapshot.rows.find((row) => row.key === props.selection.selectedKey);
+        if (props.inputActive && visibleCount() > 0 && row?.paneId && !stale(row))
+            props.onOpen(row, "keyboard");
+    };
     createEffect(() => props.onViewport(visibleCount()));
     const offset = () => Math.max(0, Math.min(props.selection.scrollOffset, Math.max(0, props.snapshot.rows.length - visibleCount())));
     const visible = createMemo(() => props.snapshot.rows.slice(offset(), offset() + visibleCount()));
@@ -48,6 +60,8 @@ export function HomeAgentRoster(props) {
             return "Agent overview unavailable";
         if (props.snapshot.phase === "loading" && props.snapshot.rows.length === 0)
             return "Loading agent overview…";
+        if (props.query && props.snapshot.rows.length === 0)
+            return "No matching agents";
         if (props.snapshot.phase === "live" && props.snapshot.rows.length === 0)
             return "No agents reported";
         const count = props.snapshot.rows.length;
@@ -59,6 +73,8 @@ export function HomeAgentRoster(props) {
     const footer = () => {
         if (props.snapshot.note)
             return props.snapshot.note;
+        if (props.query && props.snapshot.rows.length === 0)
+            return "Search covers loaded observations · Esc clears search";
         if (props.snapshot.rows.length === 0) {
             if (props.snapshot.phase === "live")
                 return "Observed sessions have no agent entries. F2 opens terminals.";
@@ -79,17 +95,19 @@ export function HomeAgentRoster(props) {
         if (!props.inputActive || event.eventType !== "press" || event.ctrl || event.meta)
             return false;
         const key = event.name.toLowerCase();
-        const filter = key === "f" ? props.onCycleMachine : key === "a" ? props.onToggleAttention : undefined;
+        const filter = !editing() &&
+            (key === "f" ? props.onCycleMachine : key === "a" ? props.onToggleAttention : undefined);
         if (filter) {
             event.preventDefault();
             event.stopPropagation();
             filter();
             return true;
         }
-        const retry = key === "r" &&
+        const retry = !editing() &&
+            key === "r" &&
             (props.snapshot.phase === "unavailable" || props.snapshot.unavailableSessions > 0) &&
             props.onRetry;
-        const more = key === "m" && props.snapshot.truncatedSessions > 0 && props.onLoadMore;
+        const more = !editing() && key === "m" && props.snapshot.truncatedSessions > 0 && props.onLoadMore;
         const recovery = retry || more;
         if (recovery) {
             event.preventDefault();
@@ -112,7 +130,7 @@ export function HomeAgentRoster(props) {
         props.onMove(delta);
         return true;
     });
-    return (<box width={width()} height={height()} flexShrink={0} flexDirection="column" overflow="hidden" onMouseScroll={(event) => {
+    return (<box position="relative" width={width()} height={height()} flexShrink={0} flexDirection="column" overflow="hidden" onMouseScroll={(event) => {
             if (!props.inputActive)
                 return;
             const direction = event.scroll?.direction;
@@ -122,38 +140,89 @@ export function HomeAgentRoster(props) {
             event.stopPropagation();
             props.onMove(direction === "up" ? -1 : 1);
         }} onMouseOut={() => setHovered(null)}>
-      <text width={width()} height={1} flexShrink={0} fg={props.theme.roles.text.primary}>
-        {clipTerminal(title(), width())}
-      </text>
-      <text width={width()} height={1} flexShrink={0} fg={props.theme.roles.text.muted}>
-        {clipTerminal(coverage(), width())}
-      </text>
-      <text width={width()} height={1} flexShrink={0} fg={props.theme.roles.text.secondary}>
-        {clipTerminal(props.filterLabel ? `${props.filterLabel} · f machine · a attention` : "", width())}
-      </text>
-      <Show when={props.snapshot.rows.length > 0} fallback={<box height={Math.max(0, visibleCount() + 1)} flexShrink={0}/>}>
+      <box width={width()} height={1} flexShrink={0} flexDirection="row">
+        <Show when={props.snapshot.phase === "loading" || props.snapshot.loadingSessions > 0}>
+          <ActivityIndicator theme={props.theme} active={props.inputActive}/>
+        </Show>
+        <text height={1} flexGrow={1} fg={props.theme.roles.text.primary}>
+          {clipTerminal(title(), width())}
+        </text>
+      </box>
+      <box height={searchRows()} flexShrink={0}/>
+      <box width={width()} height={1} flexShrink={0} flexDirection="row">
+        <text width={Math.max(0, width() - (props.onToggleAttention ? 16 : 0))} height={1} fg={props.theme.roles.text.secondary} onMouseDown={(event) => {
+            if (!props.inputActive || event.button !== 0)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            props.onCycleMachine?.();
+        }}>
+          {clipTerminal(props.filterLabel ? `${props.filterLabel} · f machine` : "", Math.max(0, width() - (props.onToggleAttention ? 16 : 0)))}
+        </text>
+        <Show when={props.onToggleAttention}>
+          <TuiButton theme={props.theme} label="Attention" shortcut="a" size="compact" variant="ghost" background={props.theme.roles.surfaces.canvas} width={Math.min(16, width())} onPress={() => {
+            if (props.inputActive)
+                props.onToggleAttention?.();
+        }}/>
+        </Show>
+      </box>
+      <Show when={props.snapshot.rows.length > 0} fallback={<box height={Math.max(0, visibleCount() * rowHeight() + 1)} flexShrink={0}/>}>
         <text width={width()} height={1} flexShrink={0} fg={props.theme.roles.text.muted}>
-          {clipTerminal(`  ${padCells("AGENT", columns().agent)}${padCells(props.filterLabel ? "MACHINE / SERVER / SESSION" : "SESSION", columns().session)} ${padCells("STATUS", columns().status)}`, width())}
+          {clipTerminal(`  ${padCells("Agent", columns().agent)}${padCells(props.filterLabel ? "Workspace / machine" : "Session", columns().session)} ${padCells("Status", columns().status)}`, width())}
         </text>
-        <box height={visibleCount()} width={width()} flexShrink={0} flexDirection="column" overflow="hidden">
+        <box height={visibleCount() * rowHeight()} width={width()} flexShrink={0} flexDirection="column" overflow="hidden">
           <For each={keys()}>
             {(key) => {
             const row = () => byKey().get(key);
-            return (<box height={1} width={width()} flexShrink={0} onMouseOver={() => setHovered(key)} onMouseMove={() => setHovered(key)}>
+            return (<box height={rowHeight()} flexDirection="column" backgroundColor={componentPalette(props.theme, {
+                    selected: props.selection.selectedKey === key,
+                    disabled: row().paneId === null || stale(row()),
+                }).background} width={width()} flexShrink={0} onMouseDown={(event) => {
+                    if (!props.inputActive || event.button !== 0 || !row().paneId || stale(row()))
+                        return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    props.onSelect(key);
+                    props.onOpen(row(), "mouse");
+                }} onMouseOver={() => setHovered(key)} onMouseMove={() => setHovered(key)}>
                   <NavigationRow theme={props.theme} id={`home-agent:${key}`} width={width()} label={padCells(row().name, columns().agent) +
-                    padCells([row().machineLabel, row().serverLabel, row().sessionName]
-                        .filter(Boolean)
-                        .join(" / "), columns().session)} detail={padCells(`${!stale(row()) && row().attention ? "! " : ""}${stale(row()) ? "last seen" : homeAgentStatusLabel(row().activity)}`, columns().status)} detailAlign="end" marker={props.selection.selectedKey === key ? "›" : " "} selected={props.selection.selectedKey === key} focused={props.inputActive && props.selection.selectedKey === key} hovered={hovered() === key} attention={!stale(row()) && row().attention} status={stale(row()) ? "unknown" : statusTone(row())} disabled={row().paneId === null || stale(row())} onActivate={(source) => {
+                    padCells(rowHeight() > 1
+                        ? row().sessionName
+                        : [row().machineLabel, row().serverLabel, row().sessionName]
+                            .filter(Boolean)
+                            .join(" / "), columns().session)} detail={padCells(`${!stale(row()) && row().attention ? "! " : ""}${stale(row()) ? "last seen" : homeAgentStatusLabel(row().activity).toLowerCase()}`, columns().status)} detailAlign="end" marker=" " selected={props.selection.selectedKey === key} focused={props.inputActive && !editing() && props.selection.selectedKey === key} hovered={hovered() === key} status={stale(row()) ? "unknown" : statusTone(row())} disabled={row().paneId === null || stale(row())} onActivate={(source) => {
                     if (!props.inputActive || row().paneId === null || stale(row()))
                         return;
                     props.onSelect(key);
                     props.onOpen(row(), source);
                 }}/>
+                  <Show when={rowHeight() > 1}>
+                    <text width={width()} height={1} fg={props.selection.selectedKey === key
+                    ? props.theme.roles.selection.selectionText
+                    : props.theme.roles.text.muted} bg={componentPalette(props.theme, {
+                    selected: props.selection.selectedKey === key,
+                    disabled: row().paneId === null || stale(row()),
+                }).background}>
+                      {clipTerminal(`  ${padCells(row().harness, columns().agent)}${[row().machineLabel, row().serverLabel].filter(Boolean).join(" / ")}`, width())}
+                    </text>
+                  </Show>
                 </box>);
         }}
           </For>
         </box>
       </Show>
+      <Show when={props.onQueryChange}>
+        {(onQueryChange) => (<box position="absolute" top={1} left={0} width={width()} height={1}>
+            <HomeAgentSearch theme={props.theme} width={width()} query={props.query ?? ""} active={props.inputActive} onChange={onQueryChange()} onEdit={(event) => {
+                const action = applicationPaneRenameKeyAction(event, props.query ?? "");
+                if (action.kind === "update")
+                    onQueryChange()(action.value);
+            }} onPaste={(bytes) => onQueryChange()(applicationPaneRenamePaste(props.query ?? "", bytes))} onEditing={setEditing} onSubmit={openSelected}/>
+          </box>)}
+      </Show>
+      <text width={width()} height={1} flexShrink={0} fg={props.theme.roles.text.muted}>
+        {clipTerminal(coverage(), width())}
+      </text>
       <text width={width()} height={1} flexShrink={0} fg={props.theme.roles.text.muted}>
         {clipTerminal(footer(), width())}
       </text>

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

@@ -189,12 +189,21 @@ export function createApplicationHomeNavigationOwner(options) {
         observer: options.observer,
     });
     const paletteCommands = createApplicationPaletteCommandOwner({
-        commands: () => options.fleetCommands
-            ? [
-                ...applicationPaletteCommands(options.shell().semantic).filter((c) => typeof c === "string"),
-                ...options.fleetCommands(),
-            ]
-            : applicationPaletteCommands(options.shell().semantic, options.catalog.sessionNames()),
+        commands: () => [
+            ...(options.fleetCommands
+                ? [
+                    ...applicationPaletteCommands(options.shell().semantic).filter((c) => typeof c === "string"),
+                    ...options.fleetCommands(),
+                ]
+                : applicationPaletteCommands(options.shell().semantic, options.catalog.sessionNames())),
+            ...(options.toggleSidebar
+                ? [
+                    options.sidebarVisible?.() === false
+                        ? "show-sidebar"
+                        : "hide-sidebar",
+                ]
+                : []),
+        ],
         isOpen: () => Boolean(options.shell().semantic?.focus.palette.open ?? options.shell().localPaletteOpen),
         targetKey: () => `${applicationGenerationNavigationKey(options.sessionOwner()?.snapshot() ?? null)}:${options.focusedPane()}`,
         disabledReason: (command) => {
@@ -203,7 +212,12 @@ export function createApplicationHomeNavigationOwner(options) {
             if (typeof command === "object" ||
                 command === "home" ||
                 command === "terminals" ||
-                command === "appearance")
+                command === "appearance" ||
+                command === "hide-sidebar" ||
+                command === "show-sidebar" ||
+                command === "shortcuts" ||
+                command === "whats-new" ||
+                command === "switch-session")
                 return null;
             if (options.sessionOwner()?.snapshot()?.status !== "live")
                 return "Open a live session first";
@@ -215,6 +229,8 @@ export function createApplicationHomeNavigationOwner(options) {
         setSurface: options.setSurface,
         setNote: options.setNote,
         openAppearance: options.openAppearance,
+        toggleSidebar: options.toggleSidebar,
+        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

@@ -1,9 +1,18 @@
+import { createEffect } from "solid-js";
 import { createApplicationHomeFleetOwner } from "./application-home-fleet.js";
 import { createApplicationHomeNavigationOwner } from "./application-home-agents-owner.js";
 import { createApplicationGuidedTourIntegration } from "./application-guided-tour-integration.jsx";
+/** A late modal dismissal must not restore focus into Home's hidden sidebar. */
+export function createHomeSidebarFocusGuard(surface, focused, blur, sidebarVisible = () => true) {
+    createEffect(() => {
+        if ((surface() === "home" || !sidebarVisible()) && focused())
+            blur();
+    });
+}
 /** Compose Home's fleet, navigation and learning experience without additional transports. */
 export function createApplicationHomeExperience(options) {
     const { machines, appearance } = options;
+    createHomeSidebarFocusGuard(options.activeSurface, machines.focused, () => machines.sidebar.onBlur?.(), options.sidebarVisible);
     const paletteOpen = () => options.shell().semantic?.focus.palette.open ?? options.shell().localPaletteOpen;
     const fleetHome = createApplicationHomeFleetOwner({
         catalog: machines.catalog,
@@ -23,6 +32,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-home-fleet.js

@@ -41,6 +41,17 @@ export function projectHomeFleet(catalog, groups, filter) {
     rows.sort((a, b) => a.key.localeCompare(b.key));
     const missing = machines.filter((machine) => machine.state !== "ready" ||
         !groups.find((group) => group.machineId === machine.id)?.available);
+    const query = filter.query?.trim().toLocaleLowerCase() ?? "";
+    const matching = query
+        ? rows.filter((row) => [
+            row.name,
+            row.harness,
+            row.projectName,
+            row.sessionName,
+            row.machineLabel,
+            row.serverLabel,
+        ].some((value) => value?.toLocaleLowerCase().includes(query)))
+        : rows;
     return {
         phase: missing.length
             ? rows.length || observedSessions
@@ -49,7 +60,7 @@ export function projectHomeFleet(catalog, groups, filter) {
                     ? "loading"
                     : "unavailable"
             : "live",
-        rows,
+        rows: matching,
         observedSessions,
         totalSessions,
         loadingSessions,
@@ -92,6 +103,12 @@ export function createApplicationHomeFleetOwner(options) {
         selection.dispose();
     });
     const presentation = {
+        get agentQuery() {
+            return filter().query ?? "";
+        },
+        onAgentQueryChange(query) {
+            setFilter((value) => ({ ...value, query }));
+        },
         get agentRoster() {
             return snapshot();
         },

package/packages/daemon/dist/tui/mirror/runtime/application-machine-sidebar.jsx

@@ -165,10 +165,13 @@ export function ApplicationMachineSidebar(props) {
         else
             toggle(row.group);
     };
+    const sectionGap = (row) => !row.session && !row.agent && !row.server && row.group.id !== props.model.groups()[0]?.id
+        ? 1
+        : 0;
+    const rowHeight = (row) => (row.agent ? (row.agentHeading ? 3 : 2) : row.serverHeading ? 2 : 1) + sectionGap(row);
     const revealFocusedRow = () => {
         if (!focused() || !scroll)
             return;
-        const rowHeight = (row) => row.agent ? (row.agentHeading ? 3 : 2) : row.serverHeading ? 2 : 1;
         const y = rows()
             .slice(0, index())
             .reduce((sum, row) => sum + rowHeight(row), 0);
@@ -342,7 +345,8 @@ export function ApplicationMachineSidebar(props) {
                     return current().agentHeading;
                 },
             };
-            return (<box width={Math.max(1, props.width - 1)} height={row.agent ? (row.agentHeading ? 3 : 2) : row.serverHeading ? 2 : 1} flexShrink={0} flexDirection="column">
+            return (<box width={Math.max(1, props.width - 1)} height={rowHeight(row)} flexShrink={0} flexDirection="column">
+                <box height={sectionGap(row)} flexShrink={0}/>
                 <Show when={row.serverHeading}>
                   <NavigationRow theme={props.theme} width={Math.max(1, props.width - 1)} id={`server:${row.group.id}:${row.session?.server?.serverId}`} label={row.serverHeading ?? "Server"} marker=" ▾" onActivate={() => {
                     if (row.session?.server)
@@ -364,19 +368,13 @@ export function ApplicationMachineSidebar(props) {
                             : row.group.label} marker={row.server
                     ? "  "
                     : row.agent
-                        ? active(row)
-                            ? row.agent.attention
-                                ? "›!"
-                                : "›"
-                            : row.agent.attention
-                                ? "!"
-                                : "•"
+                        ? row.agent.attention
+                            ? "!"
+                            : " "
                         : row.session
                             ? props.model.favorites?.().includes(row.session.id)
                                 ? " ★"
-                                : active(row)
-                                    ? " ›"
-                                    : "  "
+                                : "  "
                             : collapsed().has(preferenceKey(row.group))
                                 ? "▸"
                                 : "▾"} detail={row.server
@@ -386,14 +384,16 @@ export function ApplicationMachineSidebar(props) {
                     : row.agent
                         ? row.group.state !== "ready" || row.agent.disabled
                             ? "unavailable"
-                            : `[${terminalAgentStatusLabel(row.agent.activity)}]`
+                            : terminalAgentStatusLabel(row.agent.activity).toLowerCase()
                         : row.session
                             ? row.group.state !== "ready" || row.session.disabled
                                 ? "unavailable"
                                 : `${row.session.paneCount}p${row.group.agents?.length ? ` ${activity(row).label}` : ""}`
                             : row.group.agents?.length && row.group.state === "ready"
                                 ? activity(row).label
-                                : `${connectionDetail(row.group)}${row.group.agents?.length ? " ?" : ""}`} selected={Boolean((row.session || row.agent) && active(row))} focused={Boolean(focused() && row.key === selectedKey())} attention={row.agent?.attention ?? activity(row).kind === "attention"} onActivate={(source) => activate(row, source)}/>
+                                : `${connectionDetail(row.group)}${row.group.agents?.length ? " ?" : ""}`} selected={Boolean((row.session || row.agent) && active(row))} focused={Boolean(focused() && row.key === selectedKey())} status={(row.agent?.attention ?? activity(row).kind === "attention")
+                    ? "blocked"
+                    : undefined} onActivate={(source) => activate(row, source)}/>
                 <Show when={row.agent}>
                   {(agent) => (<text height={1} fg={props.theme.roles.text.muted} content={clipTerminal(`  ${friendlySessionLabel(agent().sessionName)}`, Math.max(1, props.width - 1))}/>)}
                 </Show>
@@ -412,7 +412,7 @@ export function ApplicationMachineSidebar(props) {
         </text>
       </Show>
       <Show when={props.model.onOpenSwitcher}>
-        <NavigationRow theme={props.theme} id="machine:switcher" label="Search fleet (F6)" marker="/" width={props.width} onActivate={() => props.model.onOpenSwitcher?.()}/>
+        <NavigationRow theme={props.theme} id="machine:switcher" label="Sessions" detail="F6" marker=" " width={props.width} onActivate={() => props.model.onOpenSwitcher?.()}/>
       </Show>
       <Show when={props.model.onOpenAttention}>
         <NavigationRow theme={props.theme} id="machine:attention" label={`Attention (${props.model.groups().reduce((sum, group) => sum + (group.state === "ready" ? (group.agents ?? []).filter((agent) => agent.attention && !agent.disabled).length : 0), 0)}) · F7`} marker="!" width={props.width} onActivate={() => props.model.onOpenAttention?.()}/>
@@ -429,7 +429,7 @@ export function ApplicationMachineSidebar(props) {
           </>)}
       </Show>
       <For each={props.model.onAddMachine ? [props.model.onAddMachine] : []}>
-        {(add) => (<NavigationRow theme={props.theme} id="machine:add" label="Add machine (A)" marker="+" width={props.width} onActivate={add}/>)}
+        {(add) => (<NavigationRow theme={props.theme} id="machine:add" label="Add machine" detail="A" marker=" " width={props.width} onActivate={add}/>)}
       </For>
     </Surface>);
 }

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,25 @@ 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 === "hide-sidebar" || command === "show-sidebar") {
+            setOpen(false, source);
+            options.toggleSidebar?.();
+            return;
+        }
         if (command === "appearance") {
             setOpen(false, source);
             options.openAppearance?.();
@@ -124,6 +145,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/runtime/application-shell-home.jsx

@@ -11,10 +11,12 @@ export function applicationHomeBrandVariant(_width, _height) {
 export function ApplicationHomeSurface(props) {
     const width = () => Math.max(0, Math.floor(props.width));
     const height = () => Math.max(0, Math.floor(props.height));
-    const inset = () => (width() >= 40 ? 2 : width() >= 12 ? 1 : 0);
+    const inset = () => Math.max(width() >= 40 ? 2 : width() >= 12 ? 1 : 0, props.branded ? Math.floor((width() - 96) / 2) : 0);
     const bodyWidth = () => Math.max(0, width() - inset() * 2);
     const spacious = () => height() >= 14;
-    const context = () => clipTerminal(`${props.session ?? "No session selected"} · ${props.status}`, bodyWidth());
+    const context = () => clipTerminal(props.branded && props.agentRoster
+        ? "Across your machines"
+        : `${props.session ?? "No session selected"} · ${props.status}`, bodyWidth());
     const summary = () => {
         if (!props.session || props.agents === undefined)
             return "Agent signals unavailable";
@@ -24,7 +26,7 @@ export function ApplicationHomeSurface(props) {
     };
     const themeLabel = () => `Theme: ${props.theme.setting}`;
     // Use the existing TuiButton cell budget for both its label and hit target.
-    const naturalButtonWidth = (label, shortcut) => terminalDisplayWidth(label) + (shortcut ? terminalDisplayWidth(shortcut) + 1 : 0) + 4;
+    const naturalButtonWidth = (label, shortcut) => terminalDisplayWidth(label) + (shortcut ? terminalDisplayWidth(shortcut) + 1 : 0) + 2;
     const buttonWidth = (label, shortcut) => Math.min(bodyWidth(), naturalButtonWidth(label, shortcut));
     const actionsInRow = () => bodyWidth() >=
         naturalButtonWidth("Open terminals", "F2") +
@@ -64,7 +66,7 @@ export function ApplicationHomeSurface(props) {
     const rosterHeight = () => Math.max(0, height() - reservedRows() - activityHeight());
     return (<box id="application-home" width={width()} height={height()} paddingLeft={inset()} paddingRight={inset()} paddingTop={spacious() ? 1 : 0} flexDirection="column" alignItems="flex-start" backgroundColor={props.theme.roles.surfaces.canvas} overflow="hidden">
       <text width={bodyWidth()} height={1} flexShrink={0} fg={props.theme.roles.text.primary}>
-        <strong>{clipTerminal(props.branded ? "tmux-ide" : props.project, bodyWidth())}</strong>
+        <strong>{clipTerminal(props.branded ? "Your agents" : props.project, bodyWidth())}</strong>
       </text>
       <box height={spacious() ? 1 : 0} flexShrink={0}/>
       <text width={bodyWidth()} height={1} flexShrink={0} fg={props.theme.roles.text.secondary}>
@@ -79,7 +81,7 @@ export function ApplicationHomeSurface(props) {
                 {clipTerminal(summary(), bodyWidth())}
               </text>
             </>}>
-          {(snapshot) => (<HomeAgentRoster filterLabel={props.agentFilterLabel} onCycleMachine={props.onCycleAgentMachine} onToggleAttention={props.onToggleAgentAttention} theme={props.theme} width={bodyWidth()} height={rosterHeight()} snapshot={snapshot()} selection={props.agentSelection ?? { selectedKey: null, scrollOffset: 0 }} inputActive={props.agentInputActive ?? false} onSelect={(key) => props.onSelectAgent?.(key)} onMove={(delta) => props.onMoveAgent?.(delta)} onViewport={(rows) => props.onAgentViewport?.(rows)} onOpen={(row, source) => props.onOpenAgent?.(row, source)} onRetry={props.onRetryAgents} onLoadMore={props.onLoadMoreAgents}/>)}
+          {(snapshot) => (<HomeAgentRoster query={props.agentQuery} onQueryChange={props.onAgentQueryChange} filterLabel={props.agentFilterLabel} onCycleMachine={props.onCycleAgentMachine} onToggleAttention={props.onToggleAgentAttention} theme={props.theme} width={bodyWidth()} height={rosterHeight()} snapshot={snapshot()} selection={props.agentSelection ?? { selectedKey: null, scrollOffset: 0 }} inputActive={props.agentInputActive ?? false} onSelect={(key) => props.onSelectAgent?.(key)} onMove={(delta) => props.onMoveAgent?.(delta)} onViewport={(rows) => props.onAgentViewport?.(rows)} onOpen={(row, source) => props.onOpenAgent?.(row, source)} onRetry={props.onRetryAgents} onLoadMore={props.onLoadMoreAgents}/>)}
         </Show>
         <Show when={activityHeight() > 0}>
           <box width={bodyWidth()} height={activityHeight()} flexShrink={0} flexDirection="column" overflow="hidden">
@@ -98,13 +100,13 @@ export function ApplicationHomeSurface(props) {
         </Show>
         <box height={spacious() ? 1 : 0} flexShrink={0}/>
         <box width={bodyWidth()} flexShrink={0} flexDirection={actionsInRow() ? "row" : "column"} alignItems="flex-start" gap={actionsInRow() ? 2 : 0}>
-          <TuiButton theme={props.theme} label="Open terminals" shortcut="F2" width={buttonWidth("Open terminals", "F2")} variant="primary" onPress={props.onOpenTerminals}/>
-          <TuiButton theme={props.theme} label="Commands" shortcut="F5" width={buttonWidth("Commands", "F5")} onPress={props.onOpenCommands}/>
+          <TuiButton theme={props.theme} label="Open terminals" shortcut="F2" width={buttonWidth("Open terminals", "F2")} size="compact" variant="ghost" background={props.theme.roles.surfaces.canvas} onPress={props.onOpenTerminals}/>
+          <TuiButton theme={props.theme} label="Commands" size="compact" variant="ghost" background={props.theme.roles.surfaces.canvas} shortcut="F5" width={buttonWidth("Commands", "F5")} onPress={props.onOpenCommands}/>
           <Show when={props.onOpenTutorial}>
-            {(open) => (<TuiButton theme={props.theme} label={props.tutorialLabel ?? "Learn tmux-ide"} width={buttonWidth(props.tutorialLabel ?? "Learn tmux-ide")} onPress={open()}/>)}
+            {(open) => (<TuiButton theme={props.theme} label={props.tutorialLabel ?? "Learn tmux-ide"} size="compact" variant="ghost" background={props.theme.roles.surfaces.canvas} width={buttonWidth(props.tutorialLabel ?? "Learn tmux-ide")} onPress={open()}/>)}
           </Show>
           <Show when={props.onCycleTheme}>
-            {(onCycleTheme) => (<TuiButton theme={props.theme} label={themeLabel()} width={buttonWidth(themeLabel())} variant="ghost" background={props.theme.roles.surfaces.canvas} onPress={onCycleTheme()}/>)}
+            {(onCycleTheme) => (<TuiButton theme={props.theme} label={themeLabel()} width={buttonWidth(themeLabel())} size="compact" variant="ghost" background={props.theme.roles.surfaces.canvas} onPress={onCycleTheme()}/>)}
           </Show>
         </box>
       </Show>

package/packages/daemon/dist/tui/mirror/runtime/application-shell-viewport.js

@@ -1,12 +1,12 @@
 import { shellChromeLayout } from "../shell-chrome.js";
 /** The one physical terminal viewport after production shell chrome. */
-export function applicationShellViewport(dimensions, hasSemanticShell) {
+export function applicationShellViewport(dimensions, hasSemanticShell, sidebarVisible = true) {
     if (!hasSemanticShell)
         return {
             width: Math.max(1, dimensions.width),
             height: Math.max(2, dimensions.height - 2),
         };
-    const shell = shellChromeLayout(dimensions.width, dimensions.height, 28);
+    const shell = shellChromeLayout(dimensions.width, dimensions.height, sidebarVisible ? 28 : 0);
     return {
         width: Math.max(1, shell.main.width),
         height: Math.max(2, shell.main.height - shell.status.height - 1),

package/packages/daemon/dist/tui/mirror/runtime/semantic-shell-viewport-resize.js

@@ -3,7 +3,7 @@ import { applicationShellViewport } from "./application-shell-viewport.js";
  * Owns the one semantic-shell viewport resize for the current generation.
  * Provisional local chrome is intentionally not terminal geometry authority.
  */
-export function createSemanticShellViewportResizeOwner(getLayout = () => ({ current: { paneBorderStatus: "top" } })) {
+export function createSemanticShellViewportResizeOwner(getLayout = () => ({ current: { paneBorderStatus: "top" } }), sidebarVisible = () => true) {
     let disposed = false;
     let applied = null;
     let pending = null;
@@ -118,7 +118,7 @@ export function createSemanticShellViewportResizeOwner(getLayout = () => ({ curr
                             retry?.();
                     }) ?? null;
             }
-            const viewport = applicationShellViewport(dimensions, true);
+            const viewport = applicationShellViewport(dimensions, true, sidebarVisible());
             const lane = generation.fastLane;
             const target = Object.freeze({
                 lane,