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

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.41",
+      version: "2.9.0-beta.44",
       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.41",
+  "version": "2.9.0-beta.44",
   "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-home-agent-roster.jsx

@@ -2,29 +2,13 @@
 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);
@@ -37,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))
@@ -53,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")
@@ -143,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;
@@ -154,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={HOME_ACTIONS.machine.keys} 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)
@@ -171,20 +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={HOME_ACTIONS.attention.keys} 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={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={() => {
+              <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}>
@@ -197,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>
@@ -259,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={HOME_ACTIONS.open.keys} label={HOME_ACTIONS.open.label} 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-machine-sidebar.jsx

@@ -1,12 +1,10 @@
 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 { WorkingSessions } from "../ui/working-sessions.jsx";
+import { AgentRow } from "../ui/agent-row.jsx";
+import { fleetHostColor } from "./fleet-presentation.js";
 /* @jsxImportSource @opentui/solid */
 import { fleetConnectionMessage, } from "@tmux-ide/daemon-client/fleet-connection-status";
-import { terminalAgentStatusLabel } from "./application-terminal-workspace-policy.js";
 import { For, Show, createEffect, createMemo, createSignal, } from "solid-js";
-import { clipTerminal, friendlySessionLabel } from "../terminal-text.js";
+import { friendlySessionLabel } from "../terminal-text.js";
 import { KeyHint } from "../ui/key-hint.jsx";
 import { NavigationRow } from "../ui/navigation-row.jsx";
 import { Surface } from "../ui/surface.jsx";
@@ -24,22 +22,16 @@ 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 [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) -
         agentHeight() -
         controlsHeight() -
-        searchHeight() -
-        tabHeight());
+        searchHeight());
     const active = (row) => row.group.id === props.model.activeMachineId() &&
         (row.agent
             ? row.group.state === "ready" &&
+                row.group.agentsAvailable !== false &&
                 !row.agent.disabled &&
                 row.agent.sessionName === props.model.activeSessionName() &&
                 (!props.model.activeSessionKey ||
@@ -52,44 +44,50 @@ export function ApplicationMachineSidebar(props) {
                 ? row.session?.id === props.model.activeSessionKey()
                 : row.session?.name === props.model.activeSessionName());
     const preferenceKey = (group) => group.environmentId ?? group.id;
-    const rows = createMemo(() => props.model.groups().flatMap((group) => [
-        { key: JSON.stringify([group.id]), group },
-        ...group.sessions
-            .filter((session) => !collapsed().has(preferenceKey(group)) ||
-            props.model.favorites?.().includes(session.id) ||
-            (group.id === props.model.activeMachineId() &&
-                (props.model.activeSessionKey
-                    ? session.id === props.model.activeSessionKey()
-                    : session.name === props.model.activeSessionName())))
-            .map((session, index, sessions) => ({
-            serverHeading: (group.servers?.length ??
-                new Set(group.sessions.map((row) => row.server?.serverId)).size) > 1 &&
-                session.server &&
-                (index === 0 || sessions[index - 1]?.server?.serverId !== session.server.serverId)
-                ? `${session.serverLabel ?? "Server"} · ${session.server.serverId.slice(-6)}`
-                : undefined,
-            key: JSON.stringify([group.id, "session", session.id]),
+    const rows = createMemo(() => [
+        ...props.model.groups().flatMap((group) => (group.agents ?? []).map((agent) => ({
+            key: JSON.stringify([
+                group.id,
+                "agent",
+                agent.server?.serverId,
+                agent.server?.generation,
+                agent.id,
+            ]),
             group,
-            session,
-        })),
-        ...(collapsed().has(preferenceKey(group))
-            ? []
-            : (group.servers ?? [])
-                .filter((server) => !group.sessions.some((session) => session.server?.serverId === server.serverId))
-                .map((server) => ({
-                key: JSON.stringify([group.id, "server", server.serverId]),
-                group,
-                server,
-            }))),
-        ...(!collapsed().has(preferenceKey(group))
-            ? (group.agents ?? []).map((agent, index) => ({
-                key: JSON.stringify([group.id, "agent", agent.id]),
+            agent,
+        }))),
+        ...props.model.groups().flatMap((group) => [
+            { key: JSON.stringify([group.id]), group },
+            ...group.sessions
+                .filter((session) => !collapsed().has(preferenceKey(group)) ||
+                props.model.favorites?.().includes(session.id) ||
+                (group.id === props.model.activeMachineId() &&
+                    (props.model.activeSessionKey
+                        ? session.id === props.model.activeSessionKey()
+                        : session.name === props.model.activeSessionName())))
+                .map((session, index, sessions) => ({
+                serverHeading: (group.servers?.length ??
+                    new Set(group.sessions.map((row) => row.server?.serverId)).size) > 1 &&
+                    session.server &&
+                    (index === 0 || sessions[index - 1]?.server?.serverId !== session.server.serverId)
+                    ? `${session.serverLabel ?? "Server"} · ${session.server.serverId.slice(-6)}`
+                    : undefined,
+                key: JSON.stringify([group.id, "session", session.id]),
                 group,
-                agent,
-                agentHeading: index === 0,
-            }))
-            : []),
-    ]));
+                session,
+            })),
+            ...(collapsed().has(preferenceKey(group))
+                ? []
+                : (group.servers ?? [])
+                    .filter((server) => !group.sessions.some((session) => session.server?.serverId === server.serverId))
+                    .map((server) => ({
+                    key: JSON.stringify([group.id, "server", server.serverId]),
+                    group,
+                    server,
+                }))),
+        ]),
+    ]);
+    const hasAgents = createMemo(() => rows().some((row) => row.agent));
     const rowsByKey = createMemo(() => new Map(rows().map((row) => [row.key, row])));
     const index = () => Math.max(0, rows().findIndex((row) => row.key === selectedKey()));
     const controlGroup = () => {
@@ -101,10 +99,6 @@ export function ApplicationMachineSidebar(props) {
             ? group
             : null;
     };
-    const activity = (row) => summarizeFleetActivity((row.group.agents ?? []).filter((agent) => !row.session ||
-        (agent.sessionName === row.session.name &&
-            agent.server?.serverId === row.session.server?.serverId &&
-            agent.server?.generation === row.session.server?.generation)), row.group.state === "ready" && row.group.agentsAvailable !== false && !row.session?.disabled);
     const connectionDetail = (group) => {
         const diagnostic = group.diagnostic;
         if (!diagnostic)
@@ -133,7 +127,6 @@ export function ApplicationMachineSidebar(props) {
         props.model.onCollapse?.(preferenceKey(group), value);
     };
     const activate = (row, source) => {
-        setWorkingFocused(false);
         setSelectedKey(row.key);
         setLocalFocused(true);
         props.model.onFocus?.();
@@ -147,6 +140,7 @@ export function ApplicationMachineSidebar(props) {
         }
         if (row.agent) {
             if (row.group.state === "ready" &&
+                row.group.agentsAvailable !== false &&
                 !row.agent.disabled &&
                 row.agent.paneId &&
                 props.model.onOpenAgent) {
@@ -165,12 +159,12 @@ 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 sectionGap = (row) => (!row.session && !row.agent && !row.server ? 1 : 0);
+    const rowHeight = (row) => (row.agent ? 2 : row.serverHeading ? 2 : 1) +
+        sectionGap(row) +
+        (hasAgents() && row.key === JSON.stringify([props.model.groups()[0]?.id]) ? 1 : 0);
     const revealFocusedRow = () => {
-        if (!focused() || (workingFocused() && tabHeight()) || !scroll)
+        if (!focused() || !scroll)
             return;
         const y = rows()
             .slice(0, index())
@@ -192,14 +186,16 @@ 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);
+        if (key === "tab") {
+            const target = rows()[index()]?.agent
+                ? rows().find((row) => !row.agent)
+                : rows().find((row) => row.agent);
+            if (target)
+                setSelectedKey(target.key);
             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")
@@ -306,22 +302,10 @@ 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}>
-          {tabHeight() ? " Workspace" : " Machines"}
-        </text>
+        <text fg={props.theme.roles.text.secondary}>{hasAgents() ? " Agents" : " Machines"}</text>
         <box flexGrow={1}/>
-        <Show when={props.model.tabs?.().length && props.width >= 28}>
-          <KeyHint theme={props.theme} keys={CHROME_ACTIONS.tabs.keys} label={CHROME_ACTIONS.tabs.label} quiet/>
-        </Show>
         <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>
-      <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;
@@ -352,16 +336,7 @@ export function ApplicationMachineSidebar(props) {
                 get serverHeading() {
                     return current().serverHeading;
                 },
-                get agentHeading() {
-                    return current().agentHeading;
-                },
             };
-            const agentMarker = createAgentStatusMarker({
-                theme: () => props.theme,
-                status: () => row.agent?.activity,
-                attention: () => Boolean(row.agent?.attention),
-                unavailable: () => row.group.state !== "ready" || Boolean(row.agent?.disabled),
-            });
             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}>
@@ -370,22 +345,18 @@ export function ApplicationMachineSidebar(props) {
                         props.model.onSelectServer?.(row.group.id, row.session.server);
                 }}/>
                 </Show>
-                <Show when={row.agentHeading}>
+                <Show when={hasAgents() && row.key === JSON.stringify([props.model.groups()[0]?.id])}>
                   <text height={1} fg={props.theme.roles.text.secondary}>
                     {" "}
-                    Agents
+                    Machines
                   </text>
                 </Show>
-                <NavigationRow theme={props.theme} id={`machine:${row.key}`} width={Math.max(1, props.width - 1)} labelColor={!row.agent && !row.session ? fleetHostColor(row.group) : undefined} label={row.server
-                    ? `  ${row.server.label} · ${row.server.serverId.slice(-6)}`
-                    : row.agent
-                        ? row.agent.name
+                <Show when={row.agent} fallback={<NavigationRow theme={props.theme} id={`machine:${row.key}`} width={Math.max(1, props.width - 1)} labelColor={!row.session ? fleetHostColor(row.group) : undefined} label={row.server
+                        ? `  ${row.server.label} · ${row.server.serverId.slice(-6)}`
                         : row.session
                             ? friendlySessionLabel(row.session.name)
                             : row.group.label} marker={row.server
-                    ? "  "
-                    : row.agent
-                        ? agentMarker()
+                        ? "  "
                         : row.session
                             ? props.model.favorites?.().includes(row.session.id)
                                 ? " ★"
@@ -393,24 +364,26 @@ export function ApplicationMachineSidebar(props) {
                             : collapsed().has(preferenceKey(row.group))
                                 ? "▸"
                                 : "▾"} detail={row.server
-                    ? row.server.state === "offline"
-                        ? "offline"
-                        : "empty"
-                    : row.agent
-                        ? row.group.state !== "ready" || row.agent.disabled
-                            ? "unavailable"
-                            : terminalAgentStatusLabel(row.agent.activity).toLowerCase()
+                        ? row.server.state === "offline"
+                            ? "offline"
+                            : "empty"
                         : 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() && !(workingFocused() && tabHeight()) && 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))}/>)}
+                                : `${row.session.paneCount}p`
+                            : row.group.state === "ready"
+                                ? undefined
+                                : connectionDetail(row.group)} selected={Boolean(row.session && active(row))} focused={focused() && row.key === selectedKey()} onActivate={(source) => activate(row, source)}/>}>
+                  {(agent) => (<AgentRow theme={props.theme} id={`machine:${row.key}`} name={agent().name} context={[
+                        row.group.label,
+                        row.group.sessions.find((session) => session.server?.serverId === agent().server?.serverId)?.serverLabel,
+                        friendlySessionLabel(agent().sessionName),
+                    ]
+                        .filter(Boolean)
+                        .join(" · ")} width={Math.max(1, props.width - 1)} activity={agent().activity} attention={agent().attention} unavailable={row.group.state !== "ready" ||
+                        row.group.agentsAvailable === false ||
+                        !!agent().disabled ||
+                        !agent().paneId} selected={active(row)} focused={focused() && row.key === selectedKey()} onOpen={(source) => activate(row, source)}/>)}
                 </Show>
               </box>);
         }}