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

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.44",
       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.44",
   "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,29 +1,14 @@
 /* @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";
+import { AgentRow } from "../ui/agent-row.jsx";
 import { KeyHint } from "../ui/key-hint.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 { createAgentStatusMarker } from "../ui/agent-status-marker.js";
 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));
-    return clipped + " ".repeat(Math.max(0, width - terminalDisplayWidth(clipped)));
-}
-function statusTone(row) {
-    if (row.activity === "waiting" || row.activity === "failed")
-        return "blocked";
-    if (row.activity === "running")
-        return "working";
-    if (row.activity === "complete")
-        return "done";
-    return row.activity === "idle" ? "idle" : "unknown";
-}
 /** A flat projected roster; no subscriptions, navigation effects, or terminal input ingress. */
 export function HomeAgentRoster(props) {
     const [hovered, setHovered] = createSignal(null);
@@ -36,10 +21,12 @@ export function HomeAgentRoster(props) {
     const showRecovery = () => Boolean(((props.snapshot.phase === "unavailable" || props.snapshot.unavailableSessions > 0) &&
         props.onRetry) ||
         (props.snapshot.truncatedSessions > 0 && props.onLoadMore));
-    const rowHeight = () => (width() >= 60 && height() >= 16 ? 2 : 1);
-    const filterRows = () => (props.onSetActivityFilter && width() < 70 ? 2 : 1);
-    const searchRows = () => (props.onQueryChange ? 2 : 0);
-    const visibleCount = () => Math.max(0, Math.floor((height() - 4 - filterRows() - searchRows() - (showRecovery() ? 1 : 0)) / rowHeight()));
+    const rowHeight = () => (height() >= 14 ? 2 : 1);
+    const compact = () => height() < 8;
+    const filterRows = () => (compact() ? 0 : props.onSetActivityFilter && width() < 70 ? 2 : 1);
+    const searchRows = () => (props.onQueryChange ? (compact() ? 1 : 2) : 0);
+    const visibleCount = () => Math.max(0, Math.floor((height() - (compact() ? 1 : 4) - filterRows() - searchRows() - (showRecovery() ? 1 : 0)) /
+        rowHeight()));
     const openSelected = (source = "keyboard") => {
         const row = props.snapshot.rows.find((row) => row.key === props.selection.selectedKey);
         if (props.inputActive && visibleCount() > 0 && row?.paneId && !stale(row))
@@ -52,12 +39,6 @@ export function HomeAgentRoster(props) {
     const keys = createMemo(() => visible().map((row) => row.key), undefined, {
         equals: (a, b) => a.length === b.length && a.every((key, index) => key === b[index]),
     });
-    const columns = () => {
-        const status = Math.min(12, Math.max(0, width() - 4));
-        const label = Math.max(0, width() - status - 3);
-        const session = width() >= 44 ? Math.floor(label * 0.43) : 0;
-        return { status, agent: label - session, session };
-    };
     const filtered = () => Boolean(props.query || (props.activityFilter && props.activityFilter !== "all"));
     const title = () => {
         if (props.snapshot.phase === "unavailable")
@@ -100,13 +81,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) {
@@ -142,7 +123,9 @@ export function HomeAgentRoster(props) {
         props.onMove(delta);
         return true;
     });
-    return (<box position="relative" width={width()} height={height()} flexShrink={0} flexDirection="column" overflow="hidden" onMouseScroll={(event) => {
+    return (<box position="relative" width={width()} height={props.fitContent && props.snapshot.rows.length > 0
+            ? height() - (visibleCount() - visible().length) * rowHeight()
+            : height()} flexShrink={0} flexDirection="column" overflow="hidden" onMouseScroll={(event) => {
             if (!props.inputActive)
                 return;
             const direction = event.scroll?.direction;
@@ -153,16 +136,19 @@ export function HomeAgentRoster(props) {
             props.onMove(direction === "up" ? -1 : 1);
         }} onMouseOut={() => setHovered(null)}>
       <box height={searchRows()} 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.muted}>
-          {clipTerminal(title(), width())}
-        </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
+      <Show when={!compact()}>
+        <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.muted}>
+            {clipTerminal(title(), width())}
+          </text>
+        </box>
+      </Show>
+      <Show when={!compact()}>
+        <box width={width()} height={filterRows()} flexShrink={0} flexDirection={filterRows() > 1 ? "column" : "row"} overflow="hidden">
+          <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)
@@ -170,24 +156,21 @@ export function HomeAgentRoster(props) {
             if (props.inputActive)
                 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={() => {
+          <box height={1} flexShrink={0} flexDirection="row" overflow="hidden" width={Math.min(width(), 47)}>
+            <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);
             }}/>)}
-            </For>
-          </Show>
+              </For>
+            </Show>
+          </box>
         </box>
-      </box>
+      </Show>
       <Show when={props.snapshot.rows.length > 0} fallback={<box height={Math.max(0, visibleCount() * rowHeight() + 1)} flexShrink={0} flexDirection="column" overflow="hidden">
             <Show when={props.snapshot.phase === "live" && !props.query}>
               <text height={1} width={width()} fg={props.theme.roles.text.primary}>
@@ -200,51 +183,20 @@ export function HomeAgentRoster(props) {
               </text>
             </Show>
           </box>}>
-        <box height={1} flexShrink={0}/>
-        <box height={visibleCount() * rowHeight()} width={width()} flexShrink={0} flexDirection="column" overflow="hidden">
+        <box height={compact() ? 0 : 1} flexShrink={0}/>
+        <box height={(props.fitContent ? visible().length : visibleCount()) * rowHeight()} width={width()} flexShrink={0} flexDirection="column" overflow="hidden">
           <For each={keys()}>
             {(key) => {
             const row = () => byKey().get(key);
-            const marker = createAgentStatusMarker({
-                theme: () => props.theme,
-                status: () => row().activity,
-                attention: () => row().attention,
-                unavailable: () => stale(row()),
-            });
-            return (<box height={rowHeight()} flexDirection="column" backgroundColor={componentPalette(props.theme, {
-                    selected: props.selection.selectedKey === key,
-                    hovered: hovered() === 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={rowHeight() > 1
-                    ? row().name
-                    : padCells(row().name, columns().agent) +
-                        padCells([row().machineLabel, row().serverLabel, row().sessionName]
-                            .filter(Boolean)
-                            .join(" / "), columns().session)} detail={padCells(`${marker()} ${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) => {
+            return (<box height={rowHeight()} width={width()} flexShrink={0} onMouseOver={() => setHovered(key)} onMouseMove={() => setHovered(key)}>
+                  <AgentRow surface="canvas" theme={props.theme} id={`home-agent:${key}`} name={row().name} context={[row().machineLabel, row().serverLabel, row().sessionName]
+                    .filter(Boolean)
+                    .join(" · ")} width={width()} compact={rowHeight() === 1} activity={row().activity} attention={row().attention} unavailable={row().paneId === null || stale(row())} selected={props.selection.selectedKey === key} focused={props.inputActive && !editing() && props.selection.selectedKey === key} hovered={hovered() === key} onOpen={(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,
-                    hovered: hovered() === key,
-                    disabled: row().paneId === null || stale(row()),
-                }).background}>
-                      {clipTerminal(`  ${[row().sessionName, row().machineLabel, row().serverLabel, row().harness].filter(Boolean).join(" · ")}`, width())}
-                    </text>
-                  </Show>
                 </box>);
         }}
           </For>
@@ -262,14 +214,16 @@ export function HomeAgentRoster(props) {
       <text width={width()} height={1} flexShrink={0} fg={props.theme.roles.text.muted}>
         {clipTerminal(coverage(), width())}
       </text>
-      <box width={width()} height={1} flexShrink={0} flexDirection="row" overflow="hidden">
-        <text width={Math.min(Math.max(0, width() - (footer().endsWith("Enter open") && width() >= 20 ? 12 : 0)), terminalDisplayWidth(footer().replace(/ Enter open$/u, "")))} fg={props.theme.roles.text.muted}>
-          {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")}/>
-        </Show>
-      </box>
+      <Show when={!compact()}>
+        <box width={width()} height={1} flexShrink={0} flexDirection="row" overflow="hidden">
+          <text width={Math.min(Math.max(0, width() - (footer().endsWith("Enter open") && width() >= 20 ? 12 : 0)), terminalDisplayWidth(footer().replace(/ Enter open$/u, "")))} fg={props.theme.roles.text.muted}>
+            {clipTerminal(footer().replace(/ Enter open$/u, ""), width())}
+          </text>
+          <Show when={footer().endsWith("Enter open") && width() >= 20}>
+            <KeyHint theme={props.theme} keys={HOME_ACTIONS.open.keys} label={HOME_ACTIONS.open.label} quiet button onPress={() => openSelected("mouse")}/>
+          </Show>
+        </box>
+      </Show>
       <Show when={showRecovery()}>
         <box height={1} width={width()} flexShrink={0} flexDirection="row" gap={1}>
           <Show when={(props.snapshot.phase === "unavailable" || props.snapshot.unavailableSessions > 0) &&

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);