tmux-ide 2.9.0-beta.40 → 2.9.0-beta.41

package/README.md

@@ -146,6 +146,11 @@ environment.
 
 Regenerate the production-renderer demo with `pnpm demo:tui`.
 
+Explore real Home, sidebar, Help, pane-header and footer components with `pnpm gallery:tui`. The
+development gallery uses fixture data and local actions, so it does not connect
+to your daemon or change live tmux sessions. See the
+[gallery controls and checks](scripts/tui-gallery/README.md).
+
 - [Documentation](https://github.com/wavyrai/tmux-ide/tree/main/docs)
 - [Contributing](CONTRIBUTING.md)
 - [Release checklist](RELEASE.md)

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.40",
+      version: "2.9.0-beta.41",
       description: "A visual, agent-aware IDE for any tmux session, with optional workspace presets",
       type: "module",
       bin: {
@@ -11339,7 +11339,7 @@ var require_package = __commonJS({
         "test:pack-installed": "node scripts/pack-check-run.mjs",
         "release:opentui:check": "node scripts/opentui-release-check.mjs",
         "check:native-deps": "node packages/daemon/scripts/check-native-deps.mjs",
-        check: "pnpm run lint:workspace && pnpm run check:control-bytes && pnpm run format:check && pnpm run typecheck:workspace && pnpm run test:postinstall && pnpm run test:portable-release-contract && pnpm run test:benchmark-comparative && pnpm run test:contracts-initializer-purity && pnpm run test:unit && pnpm run test:tui-testdrive && pnpm run test:product-test-rig && pnpm run test:daemon-bun && pnpm run test:tui-renderer && pnpm run test:workbench-dock-package && pnpm run test:pane-frame-package && pnpm run docs:build && pnpm run pack:check && pnpm run test:pack-installed && pnpm run check:native-deps && pnpm run smoke:desktop",
+        check: "pnpm run lint:workspace && pnpm run check:control-bytes && pnpm run format:check && pnpm run typecheck:workspace && pnpm run test:postinstall && pnpm run test:portable-release-contract && pnpm run test:benchmark-comparative && pnpm run test:contracts-initializer-purity && pnpm run test:unit && pnpm run test:tui-testdrive && pnpm run test:product-test-rig && pnpm run test:daemon-bun && pnpm run test:tui-renderer && pnpm run typecheck:tui-gallery && pnpm run test:tui-gallery && pnpm run test:workbench-dock-package && pnpm run test:pane-frame-package && pnpm run docs:build && pnpm run pack:check && pnpm run test:pack-installed && pnpm run check:native-deps && pnpm run smoke:desktop",
         postinstall: "node scripts/postinstall.js",
         docs: "turbo run dev --filter=@tmux-ide/docs",
         "demo:tui": "bun --preload @opentui/solid/preload docs/scripts/render-tui-demo.tsx",
@@ -11374,7 +11374,10 @@ var require_package = __commonJS({
         "test:postinstall": "node --test scripts/postinstall-daemon-upgrade.test.mjs",
         "test:development-isolation": "tsx scripts/lib/development-isolation-qualification.ts",
         "test:development-isolation-unit": "node --test scripts/lib/development-isolation-resources.test.mjs",
-        "test:development-ci": "node --test scripts/lib/development-ci.test.mjs"
+        "test:development-ci": "node --test scripts/lib/development-ci.test.mjs",
+        "gallery:tui": "bun --preload @opentui/solid/preload scripts/tui-gallery/index.tsx",
+        "test:tui-gallery": "bun test --preload @opentui/solid/preload --preload ./packages/daemon/test-support/opentui-renderer-preload.ts ./scripts/tui-gallery/gallery.test.tsx",
+        "typecheck:tui-gallery": "tsc --noEmit -p scripts/tsconfig.tui-gallery.json"
       },
       keywords: [
         "tmux",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tmux-ide",
-  "version": "2.9.0-beta.40",
+  "version": "2.9.0-beta.41",
   "description": "A visual, agent-aware IDE for any tmux session, with optional workspace presets",
   "type": "module",
   "bin": {
@@ -60,7 +60,7 @@
     "test:pack-installed": "node scripts/pack-check-run.mjs",
     "release:opentui:check": "node scripts/opentui-release-check.mjs",
     "check:native-deps": "node packages/daemon/scripts/check-native-deps.mjs",
-    "check": "pnpm run lint:workspace && pnpm run check:control-bytes && pnpm run format:check && pnpm run typecheck:workspace && pnpm run test:postinstall && pnpm run test:portable-release-contract && pnpm run test:benchmark-comparative && pnpm run test:contracts-initializer-purity && pnpm run test:unit && pnpm run test:tui-testdrive && pnpm run test:product-test-rig && pnpm run test:daemon-bun && pnpm run test:tui-renderer && pnpm run test:workbench-dock-package && pnpm run test:pane-frame-package && pnpm run docs:build && pnpm run pack:check && pnpm run test:pack-installed && pnpm run check:native-deps && pnpm run smoke:desktop",
+    "check": "pnpm run lint:workspace && pnpm run check:control-bytes && pnpm run format:check && pnpm run typecheck:workspace && pnpm run test:postinstall && pnpm run test:portable-release-contract && pnpm run test:benchmark-comparative && pnpm run test:contracts-initializer-purity && pnpm run test:unit && pnpm run test:tui-testdrive && pnpm run test:product-test-rig && pnpm run test:daemon-bun && pnpm run test:tui-renderer && pnpm run typecheck:tui-gallery && pnpm run test:tui-gallery && pnpm run test:workbench-dock-package && pnpm run test:pane-frame-package && pnpm run docs:build && pnpm run pack:check && pnpm run test:pack-installed && pnpm run check:native-deps && pnpm run smoke:desktop",
     "postinstall": "node scripts/postinstall.js",
     "docs": "turbo run dev --filter=@tmux-ide/docs",
     "demo:tui": "bun --preload @opentui/solid/preload docs/scripts/render-tui-demo.tsx",
@@ -95,7 +95,10 @@
     "test:postinstall": "node --test scripts/postinstall-daemon-upgrade.test.mjs",
     "test:development-isolation": "tsx scripts/lib/development-isolation-qualification.ts",
     "test:development-isolation-unit": "node --test scripts/lib/development-isolation-resources.test.mjs",
-    "test:development-ci": "node --test scripts/lib/development-ci.test.mjs"
+    "test:development-ci": "node --test scripts/lib/development-ci.test.mjs",
+    "gallery:tui": "bun --preload @opentui/solid/preload scripts/tui-gallery/index.tsx",
+    "test:tui-gallery": "bun test --preload @opentui/solid/preload --preload ./packages/daemon/test-support/opentui-renderer-preload.ts ./scripts/tui-gallery/gallery.test.tsx",
+    "typecheck:tui-gallery": "tsc --noEmit -p scripts/tsconfig.tui-gallery.json"
   },
   "keywords": [
     "tmux",

package/packages/daemon/dist/tui/mirror/runtime/application-fleet-tabs.js

@@ -1,21 +1,43 @@
 /** Retained targets, with at most one active terminal owner. Suspended tabs own no streams. */
 export function createFleetTabs(options) {
     const tabs = new Map();
+    const unread = new Set();
+    const observations = new Map();
     let active = null;
     let pending = null;
     let epoch = 0;
     let disposed = false;
     return {
-        snapshot: () => ({ tabs: [...tabs.values()], active }),
+        snapshot: () => ({ tabs: [...tabs.values()], active, unread: [...unread] }),
+        observe(key, agents) {
+            if (disposed || !tabs.has(key))
+                return;
+            if (!agents) {
+                observations.delete(key);
+                return;
+            }
+            const previous = observations.get(key);
+            observations.set(key, new Map(agents.map((agent) => [agent.id, agent.activity])));
+            if (active !== key &&
+                !unread.has(key) &&
+                agents.some((agent) => agent.activity === "complete" && previous?.get(agent.id) === "running")) {
+                unread.add(key);
+                options.publish();
+            }
+        },
         remember(target) {
             if (disposed)
                 return;
             if (!tabs.has(target.key) && tabs.size >= 8) {
                 const removable = [...tabs.keys()].find((key) => key !== active);
-                if (removable)
+                if (removable) {
                     tabs.delete(removable);
+                    unread.delete(removable);
+                    observations.delete(removable);
+                }
             }
             tabs.set(target.key, Object.freeze({ ...target }));
+            unread.delete(target.key);
             active = target.key;
             options.publish();
         },
@@ -41,6 +63,7 @@ export function createFleetTabs(options) {
                 options.unavailable();
                 return false;
             }
+            unread.delete(key);
             active = key;
             options.publish();
             return true;
@@ -55,6 +78,8 @@ export function createFleetTabs(options) {
                 pending = null;
             }
             tabs.delete(key);
+            unread.delete(key);
+            observations.delete(key);
             options.publish();
         },
         suspend() {
@@ -70,6 +95,8 @@ export function createFleetTabs(options) {
             disposed = true;
             epoch++;
             tabs.clear();
+            unread.clear();
+            observations.clear();
             active = null;
         },
     };

package/packages/daemon/dist/tui/mirror/runtime/application-home-agent-roster.jsx

@@ -1,4 +1,5 @@
 /* @jsxImportSource @opentui/solid */
+import { HOME_ACTIONS, HOME_ACTIVITY_ACTIONS, } from "../workspace/application-action-descriptions.js";
 import { createEffect, createMemo, createSignal, For, Show } from "solid-js";
 import { clipTerminal, terminalDisplayWidth } from "../terminal-text.js";
 import { NavigationRow } from "../ui/navigation-row.jsx";
@@ -100,13 +101,13 @@ export function HomeAgentRoster(props) {
             return false;
         const key = event.name.toLowerCase();
         const filter = !editing() &&
-            (key === "f"
+            (key === HOME_ACTIONS.machine.key
                 ? props.onCycleMachine
-                : key === "a"
+                : key === HOME_ACTIONS.attention.key
                     ? props.onToggleAttention
-                    : key === "w" && props.onSetActivityFilter
+                    : key === HOME_ACTIONS.working.key && props.onSetActivityFilter
                         ? () => props.onSetActivityFilter?.("working")
-                        : key === "0" && props.onSetActivityFilter
+                        : key === HOME_ACTIONS.all.key && props.onSetActivityFilter
                             ? () => props.onSetActivityFilter?.("all")
                             : undefined);
         if (filter) {
@@ -162,7 +163,7 @@ export function HomeAgentRoster(props) {
         </text>
       </box>
       <box width={width()} height={filterRows()} flexShrink={0} flexDirection={filterRows() > 1 ? "column" : "row"} overflow="hidden">
-        <KeyHint theme={props.theme} keys="f" label={props.filterLabel?.split(" · ")[0] ?? "All machines"} width={props.onSetActivityFilter && filterRows() === 1
+        <KeyHint theme={props.theme} keys={HOME_ACTIONS.machine.keys} label={props.filterLabel?.split(" · ")[0] ?? "All machines"} width={props.onSetActivityFilter && filterRows() === 1
             ? Math.max(1, width() - 47)
             : props.onSetActivityFilter
                 ? Math.min(width(), 28)
@@ -171,16 +172,12 @@ export function HomeAgentRoster(props) {
                 props.onCycleMachine?.();
         }}/>
         <box height={1} flexShrink={0} flexDirection="row" overflow="hidden" width={Math.min(width(), 47)}>
-          <Show when={props.onSetActivityFilter} fallback={<KeyHint theme={props.theme} keys="a" label="Attention" quiet button onPress={() => {
+          <Show when={props.onSetActivityFilter} fallback={<KeyHint theme={props.theme} keys={HOME_ACTIONS.attention.keys} label="Attention" quiet button onPress={() => {
                 if (props.inputActive)
                     props.onToggleAttention?.();
             }}/>}>
-            <For each={[
-            { key: "0", label: "All", value: "all" },
-            { key: "w", label: "Working", value: "working" },
-            { key: "a", label: "Needs attention", value: "attention" },
-        ]}>
-              {(filter) => (<KeyHint theme={props.theme} keys={filter.key} label={filter.value === "attention" && width() < 47 ? "Attention" : filter.label} quiet button selected={(props.activityFilter ?? "all") === filter.value} onPress={() => {
+            <For each={HOME_ACTIVITY_ACTIONS}>
+              {(filter) => (<KeyHint theme={props.theme} keys={filter.keys} label={filter.value === "attention" && width() < 47 ? "Attention" : filter.label} quiet button selected={(props.activityFilter ?? "all") === filter.value} onPress={() => {
                 if (props.inputActive)
                     props.onSetActivityFilter?.(filter.value);
             }}/>)}
@@ -267,7 +264,7 @@ export function HomeAgentRoster(props) {
           {clipTerminal(footer().replace(/ Enter open$/u, ""), width())}
         </text>
         <Show when={footer().endsWith("Enter open") && width() >= 20}>
-          <KeyHint theme={props.theme} keys="Enter" label="open" quiet button onPress={() => openSelected("mouse")}/>
+          <KeyHint theme={props.theme} keys={HOME_ACTIONS.open.keys} label={HOME_ACTIONS.open.label} quiet button onPress={() => openSelected("mouse")}/>
         </Show>
       </box>
       <Show when={showRecovery()}>

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

@@ -215,6 +215,7 @@ export function createApplicationHomeNavigationOwner(options) {
                 command === "appearance" ||
                 command === "hide-sidebar" ||
                 command === "show-sidebar" ||
+                command === "help" ||
                 command === "shortcuts" ||
                 command === "whats-new" ||
                 command === "switch-session")

package/packages/daemon/dist/tui/mirror/runtime/application-machine-navigation.js

@@ -3,7 +3,7 @@ import { createFleetTabs } from "./application-fleet-tabs.js";
 import { saveMachineProfiles } from "../../../lib/local-fleet-request.js";
 import { createApplicationFleetPreferences } from "./application-fleet-preferences.js";
 import { createApplicationMachineAgents, } from "./application-machine-agents.js";
-import { createSignal, onCleanup } from "solid-js";
+import { createEffect, createSignal, onCleanup } from "solid-js";
 import { applicationMachineAuthorityManager as manager } from "./application-machine-authority.js";
 import { createApplicationMachineCatalog } from "./application-machine-catalog.js";
 import { ephemeralMachineProfile } from "./application-machine-startup.js";
@@ -159,7 +159,8 @@ export function createApplicationMachineNavigation(options) {
                         machineId: id,
                         liveSessionId: session.liveSessionId,
                         label: session.name,
-                        hostLabel: `${manager.getMachine(id)?.label ?? id}${session.serverLabel ? ` / ${session.serverLabel}` : ""}`,
+                        hostLabel: manager.getMachine(id)?.label ?? id,
+                        serverLabel: session.serverLabel ?? "default",
                     });
                 preferences.change({ type: "visit", key: session.id });
                 if (remember && history[historyIndex] !== session.id) {
@@ -198,6 +199,28 @@ export function createApplicationMachineNavigation(options) {
     });
     const isDefaultSession = (machineId, session) => !session.server ||
         session.server.generation === manager.getMachine(machineId)?.read()?.instanceId;
+    const tabAgents = (tab) => {
+        const group = agentGroups().find((value) => value.machineId === tab.machineId);
+        // This observer covers only the default tmux server; never guess for other scopes.
+        if (!resolveTab(tab) || !group?.available || !isDefaultSession(tab.machineId, tab))
+            return null;
+        const observation = group.observation;
+        if (observation &&
+            (observation.loadingSessions > 0 ||
+                observation.unavailableSessions > 0 ||
+                observation.truncatedSessions > 0 ||
+                observation.refreshingSessionKeys.length > 0))
+            return null;
+        const rows = group.agents.filter((agent) => agent.liveSessionId === tab.liveSessionId);
+        if (rows.some((agent) => agent.disabled))
+            return null;
+        return rows;
+    };
+    createEffect(() => {
+        tabRevision();
+        for (const tab of tabs.snapshot().tabs)
+            tabs.observe(tab.key, tabAgents(tab));
+    });
     const sidebar = {
         groups: () => snapshot().groups.map((group) => ({
             ...group,
@@ -214,11 +237,26 @@ export function createApplicationMachineNavigation(options) {
         tabs: () => {
             tabRevision();
             const value = tabs.snapshot();
-            return value.tabs.map((tab) => ({
-                ...tab,
-                active: value.active === tab.key,
-                available: !!resolveTab(tab),
-            }));
+            return value.tabs.map((tab) => {
+                const agents = tabAgents(tab);
+                const activity = !agents
+                    ? undefined
+                    : agents.some((agent) => agent.activity === "failed")
+                        ? "failed"
+                        : agents.some((agent) => agent.attention || agent.activity === "waiting")
+                            ? "waiting"
+                            : agents.some((agent) => agent.activity === "running")
+                                ? "running"
+                                : "idle";
+                return {
+                    ...tab,
+                    active: value.active === tab.key,
+                    available: !!resolveTab(tab),
+                    activity,
+                    attention: agents?.some((agent) => agent.attention || agent.activity === "waiting"),
+                    unread: value.unread.includes(tab.key),
+                };
+            });
         },
         onOpenTab: (key) => {
             void tabs.activate(key);

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

@@ -1,6 +1,7 @@
+import { CHROME_ACTIONS, SIDEBAR_ACTIONS } from "../workspace/application-action-descriptions.js";
 import { createAgentStatusMarker } from "../ui/agent-status-marker.js";
 import { fleetHostColor, summarizeFleetActivity } from "./fleet-presentation.js";
-import { TuiButton } from "../ui/button.jsx";
+import { WorkingSessions } from "../ui/working-sessions.jsx";
 /* @jsxImportSource @opentui/solid */
 import { fleetConnectionMessage, } from "@tmux-ide/daemon-client/fleet-connection-status";
 import { terminalAgentStatusLabel } from "./application-terminal-workspace-policy.js";
@@ -23,13 +24,12 @@ export function ApplicationMachineSidebar(props) {
         : 0;
     const controlsHeight = () => (props.height >= 8 && controlGroup() ? 4 : 0);
     const searchHeight = () => (props.model.onOpenSwitcher ? 1 : 0) + (props.model.onOpenAttention ? 1 : 0);
-    const tabHeight = () => Math.min(props.model.tabs?.().length ?? 0, Math.max(0, Math.floor(props.height / 3)));
-    const visibleTabs = () => {
-        const tabs = props.model.tabs?.() ?? [];
-        const active = tabs.findIndex((tab) => tab.active);
-        const start = Math.max(0, active - tabHeight() + 1);
-        return tabs.slice(start, start + tabHeight());
-    };
+    const [workingFocused, setWorkingFocused] = createSignal(true);
+    const tabHeight = () => (props.model.tabs?.().length ?? 0) > 0 && props.height >= 12
+        ? 1 +
+            Math.min(props.model.tabs().length, Math.max(1, Math.floor((props.height / 2 - 1) / 3))) *
+                3
+        : 0;
     const machineHeight = () => Math.max(0, props.height -
         1 -
         (props.model.onAddMachine ? 1 : 0) -
@@ -133,6 +133,7 @@ export function ApplicationMachineSidebar(props) {
         props.model.onCollapse?.(preferenceKey(group), value);
     };
     const activate = (row, source) => {
+        setWorkingFocused(false);
         setSelectedKey(row.key);
         setLocalFocused(true);
         props.model.onFocus?.();
@@ -169,7 +170,7 @@ export function ApplicationMachineSidebar(props) {
         : 0;
     const rowHeight = (row) => (row.agent ? (row.agentHeading ? 3 : 2) : row.serverHeading ? 2 : 1) + sectionGap(row);
     const revealFocusedRow = () => {
-        if (!focused() || !scroll)
+        if (!focused() || (workingFocused() && tabHeight()) || !scroll)
             return;
         const y = rows()
             .slice(0, index())
@@ -191,6 +192,14 @@ export function ApplicationMachineSidebar(props) {
         if (!focused() || event.eventType !== "press" || event.meta)
             return false;
         let key = event.name.toLowerCase();
+        if (key === "tab" && tabHeight()) {
+            setWorkingFocused((value) => !value);
+            event.preventDefault();
+            event.stopPropagation();
+            return true;
+        }
+        if (workingFocused() && tabHeight() && !["escape", "?", "question", "/", "a"].includes(key))
+            return false;
         if (event.ctrl && key === "d")
             key = "halfdown";
         else if (event.ctrl && key === "u")
@@ -204,7 +213,7 @@ export function ApplicationMachineSidebar(props) {
                     l: "right",
                     g: event.shift ? "end" : "home",
                     "/": "search",
-                    "?": "help",
+                    [SIDEBAR_ACTIONS.help.key]: "help",
                     question: "help",
                 }[key] ?? key;
         if (event.ctrl && !["halfdown", "halfup"].includes(key))
@@ -226,9 +235,9 @@ export function ApplicationMachineSidebar(props) {
             "return",
             "space",
             "escape",
-            "a",
-            "r",
-            "d",
+            SIDEBAR_ACTIONS.add.key,
+            SIDEBAR_ACTIONS.retry.key,
+            SIDEBAR_ACTIONS.disconnect.key,
             "f",
         ].includes(key))
             return false;
@@ -247,7 +256,7 @@ export function ApplicationMachineSidebar(props) {
             props.model.onBlur?.();
             return true;
         }
-        if (key === "a") {
+        if (key === SIDEBAR_ACTIONS.add.key) {
             props.model.onAddMachine?.();
             return true;
         }
@@ -260,9 +269,9 @@ export function ApplicationMachineSidebar(props) {
                 props.model.onFavorite?.(row.session.id, !props.model.favorites?.().includes(row.session.id));
             return true;
         }
-        if (key === "r" || key === "d") {
+        if (key === SIDEBAR_ACTIONS.retry.key || key === SIDEBAR_ACTIONS.disconnect.key) {
             if (row.group.id !== "local") {
-                if (key === "r")
+                if (key === SIDEBAR_ACTIONS.retry.key)
                     props.model.onRetryMachine?.(row.group.id);
                 else
                     props.model.onDisconnectMachine?.(row.group.id);
@@ -297,19 +306,22 @@ export function ApplicationMachineSidebar(props) {
     });
     return (<Surface id="application-machine-sidebar" theme={props.theme} variant="panel" width={props.width} height={props.height} flexShrink={0} flexDirection="column" overflow="hidden">
       <box height={1} flexShrink={0} flexDirection="row" overflow="hidden">
-        <text fg={props.theme.roles.text.secondary}>{" Machines"}</text>
+        <text fg={props.theme.roles.text.secondary}>
+          {tabHeight() ? " Workspace" : " Machines"}
+        </text>
         <box flexGrow={1}/>
         <Show when={props.model.tabs?.().length && props.width >= 28}>
-          <KeyHint theme={props.theme} keys="F9" label="Tabs" quiet/>
+          <KeyHint theme={props.theme} keys={CHROME_ACTIONS.tabs.keys} label={CHROME_ACTIONS.tabs.label} quiet/>
         </Show>
-        <KeyHint theme={props.theme} keys="?" label={props.width >= 20 ? "Help" : undefined} quiet button onPress={() => props.onHelp?.("mouse")}/>
+        <KeyHint theme={props.theme} keys={SIDEBAR_ACTIONS.help.keys} label={props.width >= 20 ? SIDEBAR_ACTIONS.help.label : undefined} quiet button onPress={() => props.onHelp?.("mouse")}/>
       </box>
-      <For each={visibleTabs()}>
-        {(tab) => (<box height={1} flexDirection="row">
-            <NavigationRow theme={props.theme} width={Math.max(1, props.width - 4)} id={`fleet-tab:${tab.key}`} label={`${tab.hostLabel} / ${tab.label}`} marker={tab.active ? "●" : "○"} detail={tab.available ? "" : "offline"} focused={false} onActivate={() => props.model.onOpenTab?.(tab.key)}/>
-            <TuiButton theme={props.theme} label="×" size="compact" width={3} onPress={() => props.model.onCloseTab?.(tab.key)}/>
-          </box>)}
-      </For>
+      <Show when={tabHeight() > 0}>
+        <WorkingSessions theme={props.theme} rows={props.model.tabs?.() ?? []} width={props.width} height={tabHeight()} focused={focused() && workingFocused()} onFocus={() => {
+            setWorkingFocused(true);
+            setLocalFocused(true);
+            props.model.onFocus?.();
+        }} onOpen={(key) => props.model.onOpenTab?.(key)} onClose={props.model.onCloseTab}/>
+      </Show>
       <scrollbox ref={(value) => {
             scroll = value;
             const resized = value.content.onSizeChange;
@@ -394,7 +406,7 @@ export function ApplicationMachineSidebar(props) {
                                 : `${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())} status={(row.agent?.attention ?? activity(row).kind === "attention")
+                                : `${connectionDetail(row.group)}${row.group.agents?.length ? " ?" : ""}`} selected={Boolean((row.session || row.agent) && active(row))} focused={Boolean(focused() && !(workingFocused() && tabHeight()) && row.key === selectedKey())} status={(row.agent?.attention ?? activity(row).kind === "attention")
                     ? "blocked"
                     : undefined} onActivate={(source) => activate(row, source)}/>
                 <Show when={row.agent}>
@@ -410,10 +422,10 @@ export function ApplicationMachineSidebar(props) {
           </scrollbox>)}
       </For>
       <Show when={props.model.onOpenSwitcher}>
-        <KeyHint theme={props.theme} keys="F6" label="Sessions" width={props.width} quiet button onPress={() => props.model.onOpenSwitcher?.()}/>
+        <KeyHint theme={props.theme} keys={CHROME_ACTIONS.sessions.keys} label="Browse all sessions" width={props.width} quiet button onPress={() => props.model.onOpenSwitcher?.()}/>
       </Show>
       <Show when={props.model.onOpenAttention}>
-        <KeyHint theme={props.theme} keys="F7" label={`Attention (${props.model.groups().reduce((sum, group) => sum + (group.state === "ready" ? (group.agents ?? []).filter((agent) => agent.attention && !agent.disabled).length : 0), 0)})`} width={props.width} quiet button onPress={() => props.model.onOpenAttention?.()}/>
+        <KeyHint theme={props.theme} keys={CHROME_ACTIONS.attention.keys} label={`${CHROME_ACTIONS.attention.label} (${props.model.groups().reduce((sum, group) => sum + (group.state === "ready" ? (group.agents ?? []).filter((agent) => agent.attention && !agent.disabled).length : 0), 0)})`} width={props.width} quiet button onPress={() => props.model.onOpenAttention?.()}/>
       </Show>
       <Show when={controlsHeight() > 0 && controlGroup()}>
         {(group) => (<>
@@ -422,12 +434,12 @@ export function ApplicationMachineSidebar(props) {
                 ? fleetConnectionMessage(group().diagnostic)
                 : connectionDetail(group())}
             </text>
-            <KeyHint theme={props.theme} keys="R" label="Retry connection" width={props.width} quiet button onPress={() => props.model.onRetryMachine?.(group().id)}/>
-            <KeyHint theme={props.theme} keys="D" label="Disconnect" width={props.width} quiet button onPress={() => props.model.onDisconnectMachine?.(group().id)}/>
+            <KeyHint theme={props.theme} keys={SIDEBAR_ACTIONS.retry.keys} label={SIDEBAR_ACTIONS.retry.label} width={props.width} quiet button onPress={() => props.model.onRetryMachine?.(group().id)}/>
+            <KeyHint theme={props.theme} keys={SIDEBAR_ACTIONS.disconnect.keys} label={SIDEBAR_ACTIONS.disconnect.label} width={props.width} quiet button onPress={() => props.model.onDisconnectMachine?.(group().id)}/>
           </>)}
       </Show>
       <For each={props.model.onAddMachine ? [props.model.onAddMachine] : []}>
-        {(add) => (<KeyHint theme={props.theme} keys="A" label="Add machine" width={props.width} quiet button onPress={add}/>)}
+        {(add) => (<KeyHint theme={props.theme} keys={SIDEBAR_ACTIONS.add.keys} label={SIDEBAR_ACTIONS.add.label} width={props.width} quiet button onPress={add}/>)}
       </For>
     </Surface>);
 }

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

@@ -27,9 +27,9 @@ export function createApplicationPaletteCommandOwner(options) {
     const activate = (command, source, confirmed = false) => {
         if (busy())
             return;
-        if (command === "shortcuts" || command === "whats-new") {
+        if (command === "help" || command === "shortcuts" || command === "whats-new") {
             setCloseArmed(false);
-            setReferencePage(command === "shortcuts" ? "shortcuts" : "changes");
+            setReferencePage(command === "help" ? "help" : command === "shortcuts" ? "shortcuts" : "changes");
             return;
         }
         if (command === "switch-session") {

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

@@ -10,6 +10,7 @@ const BASE_COMMANDS = [
     "close-pane",
     "zoom-pane",
     "appearance",
+    "help",
     "shortcuts",
     "whats-new",
     "switch-session",

package/packages/daemon/dist/tui/mirror/ui/agent-status-marker.js

@@ -1,4 +1,5 @@
 import { batch, createEffect, createSignal, onCleanup } from "solid-js";
+import { UI_ICONS } from "./icons.js";
 const FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 const listeners = new Set();
 let timer;
@@ -37,25 +38,25 @@ export function createAgentStatusMarker(options) {
     });
     return () => {
         if (options.unavailable?.())
-            return "·";
+            return UI_ICONS.unknown;
         if (options.attention?.())
-            return "!";
+            return UI_ICONS.attention;
         switch (options.status()) {
             case "running":
             case "working":
                 return animated() ? FRAMES[current()] : options.theme().glyphs.active;
             case "waiting":
             case "blocked":
-                return "!";
+                return UI_ICONS.attention;
             case "complete":
             case "done":
                 return options.theme().glyphs.check;
             case "failed":
-                return "×";
+                return UI_ICONS.failed;
             case "idle":
                 return options.theme().glyphs.inactive;
             default:
-                return "·";
+                return UI_ICONS.unknown;
         }
     };
 }

package/packages/daemon/dist/tui/mirror/ui/icons.js

@@ -0,0 +1,9 @@
+/** Shared semantic glyphs; theme-specific active/idle/check glyphs stay in the theme. */
+export const UI_ICONS = {
+    attention: "!",
+    failed: "×",
+    unknown: "·",
+    offline: "○",
+    newResult: "•",
+    close: "×",
+};

package/packages/daemon/dist/tui/mirror/ui/index.js

@@ -14,3 +14,6 @@ export { componentPalette, } from "./state.js";
 export { Tabs } from "./tabs.jsx";
 export { Surface } from "./surface.jsx";
 export { StatusBar, StatusBarAction, StatusBarGroup, StatusBarSegment, StatusSegment, } from "./status-bar.jsx";
+export { UI_ICONS } from "./icons.js";
+export { SessionRow, sessionRowStatus } from "./session-row.jsx";
+export { WorkingSessions } from "./working-sessions.jsx";

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

@@ -0,0 +1,71 @@
+import { Show } from "solid-js";
+import { clipTerminal } from "../terminal-text.js";
+import { NavigationRow } from "./navigation-row.jsx";
+import { TuiButton } from "./button.jsx";
+import { componentPalette } from "./state.js";
+import { createAgentStatusMarker } from "./agent-status-marker.js";
+import { UI_ICONS } from "./icons.js";
+export function sessionRowStatus(row) {
+    if (!row.available)
+        return "offline";
+    if (row.attention || row.activity === "waiting")
+        return "needs input";
+    if (row.activity === "failed")
+        return "failed";
+    if (row.activity === "running")
+        return "working";
+    if (row.unread)
+        return "new result";
+    if (!row.activity || row.activity === "disconnected")
+        return "unknown";
+    return "idle";
+}
+/** Shared two-line session identity. Pure presentation: opening/closing belongs to its owner. */
+export function SessionRow(props) {
+    const marker = createAgentStatusMarker({
+        theme: () => props.theme,
+        status: () => (sessionRowStatus(props.row) === "idle" ? "idle" : props.row.activity),
+        attention: () => !!props.row.attention,
+        unavailable: () => !props.row.available,
+    });
+    const tone = () => {
+        const status = sessionRowStatus(props.row);
+        return status === "needs input" || status === "failed"
+            ? "blocked"
+            : status === "working"
+                ? "working"
+                : status === "new result"
+                    ? "done"
+                    : "neutral";
+    };
+    const glyph = () => !props.row.available
+        ? UI_ICONS.offline
+        : sessionRowStatus(props.row) === "new result"
+            ? UI_ICONS.newResult
+            : marker();
+    const palette = () => componentPalette(props.theme, {
+        selected: props.selected,
+        focused: props.focused,
+        disabled: !props.row.available,
+    });
+    const detail = () => `${props.row.hostLabel} · ${props.row.serverLabel ?? "default"}${props.row.active ? " · current" : ""}`;
+    return (<box id={`session-row:${props.row.key}`} width={props.width} height={2} flexDirection="column" overflow="hidden">
+      <box height={1} flexDirection="row">
+        <NavigationRow theme={props.theme} id={`fleet-tab:${props.row.key}`} width={Math.max(1, props.width - (props.onClose ? 3 : 0))} label={props.row.label} tone={tone()} marker={glyph()} detail={sessionRowStatus(props.row)} selected={props.selected} focused={props.focused} disabled={!props.row.available} onActivate={props.onOpen}/>
+        <Show when={props.onClose}>
+          <TuiButton theme={props.theme} label={UI_ICONS.close} size="compact" width={3} onPress={props.onClose}/>
+        </Show>
+      </box>
+      <box height={1} backgroundColor={palette().background} onMouseDown={(event) => {
+            if (event.button !== 0 || !props.row.available)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            props.onOpen();
+        }}>
+        <text fg={props.selected || props.focused ? palette().foreground : props.theme.roles.text.muted}>
+          {clipTerminal(`  ${detail()}`, props.width)}
+        </text>
+      </box>
+    </box>);
+}