tmux-ide 2.9.0-beta.21 → 2.9.0-beta.26

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

@@ -7,6 +7,16 @@ import { 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";
+/** Exact attached authority; an unscoped default connection still proves its incarnation. */
+function attachedMachineNavigationTarget(active) {
+    if (active?.status !== "live" || !active.connection?.liveSessionId || !active.daemonGeneration)
+        return null;
+    return {
+        liveSessionId: active.connection.liveSessionId,
+        daemonGeneration: active.daemonGeneration,
+        ...(active.connection.server ? { server: active.connection.server } : {}),
+    };
+}
 export function createApplicationMachineNavigation(options) {
     const preferences = createApplicationFleetPreferences({
         onError: options.setNote,
@@ -31,10 +41,12 @@ export function createApplicationMachineNavigation(options) {
     const [snapshot, setSnapshot] = createSignal(catalog.getSnapshot());
     const [focused, setFocused] = createSignal(false);
     const [switching, setSwitching] = createSignal(false);
+    const [serverFocus, setServerFocus] = createSignal(null);
     const [attentionOnly, setAttentionOnly] = createSignal(false);
     const showSwitcher = (attention) => {
         navigation++;
         options.cancelOpen();
+        setServerFocus(null);
         setAttentionOnly(attention);
         setFocused(false);
         setSwitching(true);
@@ -42,39 +54,80 @@ export function createApplicationMachineNavigation(options) {
     const [adding, setAdding] = createSignal(false);
     const [alias, setAlias] = createSignal("");
     const [error, setError] = createSignal(null);
-    const stop = catalog.subscribe(setSnapshot);
+    let attemptStartup = null;
+    const stop = catalog.subscribe((value) => {
+        setSnapshot(value);
+        attemptStartup?.();
+    });
     let navigation = 0;
+    const [activeSessionKey, setActiveSessionKey] = createSignal(null);
     const [tabRevision, setTabRevision] = createSignal(0);
     const history = [...saved().recent].reverse();
     let historyIndex = history.length - 1;
-    const select = (id, expectedLiveSessionId) => {
+    const select = (id, expectedLiveSessionId, server) => {
         if (!manager.getMachine(id))
             return false;
         if (manager.snapshot().selectedMachineId !== id) {
             navigation++;
             options.cancelOpen();
             // Synchronously remove the old input/shell owner before changing the route.
-            options.resetWorkspace(id, expectedLiveSessionId);
+            if (server)
+                options.resetWorkspace(id, expectedLiveSessionId, server);
+            else
+                options.resetWorkspace(id, expectedLiveSessionId);
             manager.select(id);
         }
         else if (expectedLiveSessionId) {
-            options.resetWorkspace(id, expectedLiveSessionId);
+            const attached = options.attachedTarget?.() ??
+                attachedMachineNavigationTarget(options.attachedGeneration?.() ?? null);
+            const sameAuthority = attached?.liveSessionId === expectedLiveSessionId &&
+                (server
+                    ? attached.server
+                        ? attached.server.serverId === server.serverId &&
+                            attached.server.generation === server.generation
+                        : attached.daemonGeneration === server.generation &&
+                            manager.getMachine(id)?.read()?.instanceId === server.generation
+                    : !attached.server);
+            if (sameAuthority)
+                return true;
+            if (server)
+                options.resetWorkspace(id, expectedLiveSessionId, server);
+            else
+                options.resetWorkspace(id, expectedLiveSessionId);
         }
         return true;
     };
-    const open = async (id, name, source, remember = true, expectedLiveSessionId) => {
+    const open = async (id, name, source, remember = true, expectedLiveSessionId, server, sessionKey) => {
         // A same-machine session click supersedes any pending exact-agent focus too.
         if (manager.snapshot().selectedMachineId === id)
             options.cancelOpen();
         // A sidebar selection can leave a tab whose route is pinned to a different
         // live incarnation on this same machine. Select a new exact owner before
         // preparation; never apply that old tab's identity fence to the new name.
-        if (!expectedLiveSessionId && options.sessionName() !== name) {
-            expectedLiveSessionId = snapshot()
-                .groups.find((group) => group.id === id || group.routeIds?.includes(id))
-                ?.sessions.find((row) => row.name === name && !row.disabled)?.liveSessionId;
+        if (manager.getMachine(id)?.endpoint().state !== "ready") {
+            select(id);
+            options.setNote("This machine is disconnected. Select the session after reconnecting.");
+            return false;
         }
-        if (!select(id, expectedLiveSessionId))
+        const candidates = snapshot()
+            .groups.find((group) => group.id === id || group.routeIds?.includes(id))
+            ?.sessions.filter((row) => row.name === name &&
+            !row.disabled &&
+            (!sessionKey || row.id === sessionKey) &&
+            (!expectedLiveSessionId || row.liveSessionId === expectedLiveSessionId) &&
+            (!server ||
+                (row.server?.serverId === server.serverId &&
+                    row.server.generation === server.generation))) ?? [];
+        if (candidates.length !== 1) {
+            options.setNote("Select the session under its tmux server; this target is ambiguous or has changed.");
+            return false;
+        }
+        const selected = candidates[0];
+        const sameSelection = activeSessionKey() === selected.id && options.sessionName() === name;
+        setActiveSessionKey(selected.id);
+        expectedLiveSessionId = selected.liveSessionId;
+        server = selected.server;
+        if (!select(id, sameSelection ? undefined : expectedLiveSessionId, server))
             return;
         const token = ++navigation;
         setFocused(false);
@@ -92,15 +145,21 @@ export function createApplicationMachineNavigation(options) {
         if (token === navigation) {
             const session = snapshot()
                 .groups.find((group) => group.id === id || group.routeIds?.includes(id))
-                ?.sessions.find((row) => row.name === name && !row.disabled);
+                ?.sessions.find((row) => row.id === selected.id && !row.disabled);
             if (session) {
                 if (session.liveSessionId)
                     tabs.remember({
-                        key: JSON.stringify([id, session.liveSessionId]),
+                        key: JSON.stringify([
+                            id,
+                            session.server?.serverId,
+                            session.server?.generation,
+                            session.liveSessionId,
+                        ]),
+                        server: session.server,
                         machineId: id,
                         liveSessionId: session.liveSessionId,
                         label: session.name,
-                        hostLabel: manager.getMachine(id)?.label ?? id,
+                        hostLabel: `${manager.getMachine(id)?.label ?? id}${session.serverLabel ? ` / ${session.serverLabel}` : ""}`,
                     });
                 preferences.change({ type: "visit", key: session.id });
                 if (remember && history[historyIndex] !== session.id) {
@@ -118,26 +177,39 @@ export function createApplicationMachineNavigation(options) {
         if (manager.getMachine(target.machineId)?.endpoint().state !== "ready")
             return null;
         const group = snapshot().groups.find((g) => g.id === target.machineId || g.routeIds?.includes(target.machineId));
-        const row = group?.sessions.find((s) => s.liveSessionId === target.liveSessionId && !s.disabled);
+        const row = group?.sessions.find((s) => s.liveSessionId === target.liveSessionId &&
+            !s.disabled &&
+            s.server?.serverId === target.server?.serverId &&
+            s.server?.generation === target.server?.generation);
         return row ? { ...target, label: row.name } : null;
     };
     const tabs = createFleetTabs({
         resolve: resolveTab,
         retireActive: () => {
+            setActiveSessionKey(null);
             navigation++;
             options.cancelOpen();
             options.resetWorkspace(manager.snapshot().selectedMachineId);
             options.setSurface("home");
         },
-        open: async (target) => !!(await open(target.machineId, target.label, "keyboard", true, target.liveSessionId)),
+        open: async (target) => !!(await open(target.machineId, target.label, "keyboard", true, target.liveSessionId, target.server)),
         publish: () => setTabRevision((value) => value + 1),
         unavailable: () => options.setNote("That tab's session is unavailable or has been replaced."),
     });
+    const isDefaultSession = (machineId, session) => !session.server ||
+        session.server.generation === manager.getMachine(machineId)?.read()?.instanceId;
     const sidebar = {
         groups: () => snapshot().groups.map((group) => ({
             ...group,
-            agentsAvailable: agentGroups().find((value) => value.machineId === group.id)?.available ?? false,
-            agents: agentGroups().find((value) => value.machineId === group.id)?.agents ?? [],
+            agentsAvailable: group.sessions.some((session) => isDefaultSession(group.id, session)) &&
+                (agentGroups().find((value) => value.machineId === group.id)?.available ?? false),
+            agents: !group.sessions.some((session) => isDefaultSession(group.id, session))
+                ? []
+                : (agentGroups().find((value) => value.machineId === group.id)?.agents ?? []).map((agent) => ({
+                    ...agent,
+                    server: group.sessions.find((session) => session.liveSessionId === agent.liveSessionId &&
+                        isDefaultSession(group.id, session))?.server,
+                })),
         })),
         tabs: () => {
             tabRevision();
@@ -158,6 +230,7 @@ export function createApplicationMachineNavigation(options) {
         onCollapse: (key, enabled) => preferences.change({ type: "collapse", key, enabled }),
         activeMachineId: () => snapshot().selectedMachineId,
         activeSessionName: options.sessionName,
+        activeSessionKey,
         activePaneId: options.activePaneId,
         focused,
         onFocus: () => {
@@ -166,8 +239,14 @@ export function createApplicationMachineNavigation(options) {
             setFocused(true);
         },
         onBlur: () => setFocused(false),
-        onOpen: (id, name, source) => void open(id, name, source),
+        onOpen: (id, name, source, sessionKey) => void open(id, name, source, true, undefined, undefined, sessionKey),
         onOpenAgent: (id, sessionName, paneId, source) => {
+            const sessions = snapshot().groups.find((group) => group.id === id)?.sessions ?? [];
+            const selectedSession = sessions.find((session) => session.name === sessionName && isDefaultSession(id, session));
+            if (sessions.length && !selectedSession) {
+                options.setNote("Open this agent through its server session first.");
+                return;
+            }
             const row = agentGroups()
                 .find((group) => group.machineId === id)
                 ?.agents.find((agent) => agent.sessionName === sessionName && agent.paneId === paneId);
@@ -176,12 +255,18 @@ export function createApplicationMachineNavigation(options) {
                 return;
             }
             options.cancelOpen();
-            if (!select(id))
+            if (!select(id, selectedSession?.liveSessionId, selectedSession?.server))
                 return;
+            if (selectedSession)
+                setActiveSessionKey(selectedSession.id);
             navigation++;
             setFocused(false);
             void options.openAgent?.(row, source);
         },
+        onSelectServer: (machineId, server) => {
+            showSwitcher(false);
+            setServerFocus({ machineId, server });
+        },
         onSelectMachine: (id) => {
             tabs.suspend();
             navigation++;
@@ -217,6 +302,28 @@ export function createApplicationMachineNavigation(options) {
         catalog,
         agents,
         selectedMachineId: () => manager.snapshot().selectedMachineId,
+        openHomeAgent: (row, source) => {
+            if (!agents.isCurrentTarget(row.machineId, row) || row.disabled)
+                return;
+            const session = snapshot()
+                .groups.find((group) => group.id === row.machineId)
+                ?.sessions.find((session) => session.liveSessionId === row.liveSessionId &&
+                !session.disabled &&
+                session.server?.serverId === row.server?.serverId &&
+                session.server?.generation === row.server?.generation);
+            if (!session) {
+                options.setNote("That agent session has changed. Select it again.");
+                return;
+            }
+            options.cancelOpen();
+            if (!select(row.machineId, row.liveSessionId, row.server))
+                return;
+            setActiveSessionKey(session.id);
+            navigation++;
+            setFocused(false);
+            return options.openAgent?.(row, source);
+        },
+        openSelectedSession: (name, source, key) => open(manager.snapshot().selectedMachineId, name, source, true, undefined, undefined, key),
         automaticOpen: manager.snapshot().machines.length === 1,
         automaticOpenAllowed: () => navigation === 0 && manager.snapshot().selectedMachineId === "local",
         sidebar,
@@ -235,7 +342,7 @@ export function createApplicationMachineNavigation(options) {
                 options.setNote("That session is unavailable or has been replaced.");
                 return;
             }
-            if (await open(group.id, session.name, "keyboard", false))
+            if (await open(group.id, session.name, "keyboard", false, session.liveSessionId, session.server, session.id))
                 historyIndex = next;
         },
         cycleTab(direction, close = false) {
@@ -253,10 +360,20 @@ export function createApplicationMachineNavigation(options) {
                 void tabs.activate(target.key);
         },
         closeSwitcher: () => setSwitching(false),
+        switcherFilter: (command) => {
+            const focus = serverFocus();
+            return (!focus ||
+                (typeof command === "object" &&
+                    command.fleet?.machineId === focus.machineId &&
+                    command.fleet?.server?.serverId === focus.server.serverId &&
+                    command.fleet?.server?.generation === focus.server.generation));
+        },
         paletteCommands() {
             const groupsById = new Map(agentGroups().map((group) => [group.machineId, group]));
             return snapshot().groups.flatMap((group) => {
-                const agentGroup = groupsById.get(group.id);
+                const agentGroup = !group.sessions.some((session) => isDefaultSession(group.id, session))
+                    ? undefined
+                    : groupsById.get(group.id);
                 const agentsBySession = new Map();
                 for (const agent of agentGroup?.agents ?? []) {
                     if (!agent.liveSessionId || !agent.paneId)
@@ -276,8 +393,9 @@ export function createApplicationMachineNavigation(options) {
                             ? saved().recent.indexOf(session.id)
                             : 1000,
                         liveSessionId: session.liveSessionId,
-                        hostLabel: group.label,
-                        agentActivities: agentGroup?.available
+                        server: session.server,
+                        hostLabel: `${group.label}${session.serverLabel ? ` / ${session.serverLabel}` : ""}`,
+                        agentActivities: isDefaultSession(group.id, session) && agentGroup?.available
                             ? (agentsBySession.get(session.liveSessionId) ?? []).map((a) => ({
                                 paneId: a.paneId,
                                 attention: a.attention,
@@ -289,7 +407,9 @@ export function createApplicationMachineNavigation(options) {
                     };
                     return [
                         { kind: "open-session", sessionName: session.name, label: session.name, fleet },
-                        ...(agentsBySession.get(session.liveSessionId) ?? []).map((a) => ({
+                        ...(isDefaultSession(group.id, session)
+                            ? (agentsBySession.get(session.liveSessionId) ?? [])
+                            : []).map((a) => ({
                             kind: "jump-agent",
                             sessionName: session.name,
                             paneId: a.paneId,
@@ -311,6 +431,21 @@ export function createApplicationMachineNavigation(options) {
                             disabled: group.state !== "ready",
                         },
                     },
+                    ...(group.servers ?? []).map((server) => ({
+                        kind: "open-machine",
+                        sessionName: "",
+                        label: `${server.label} · ${server.serverId.slice(-6)} · New session ^N`,
+                        fleet: {
+                            machineId: group.id,
+                            hostLabel: `${group.label} / ${server.label}`,
+                            liveSessionId: "",
+                            daemonInstanceId: daemon?.instanceId ?? "",
+                            disabled: group.state !== "ready" || server.state !== "online",
+                            ...(server.state === "online"
+                                ? { server: { serverId: server.serverId, generation: server.generation } }
+                                : {}),
+                        },
+                    })),
                     ...sessions,
                 ];
             });
@@ -321,7 +456,9 @@ export function createApplicationMachineNavigation(options) {
             const target = command.fleet;
             const session = snapshot()
                 .groups.find((g) => g.id === target.machineId)
-                ?.sessions.find((s) => s.liveSessionId === target.liveSessionId);
+                ?.sessions.find((s) => s.liveSessionId === target.liveSessionId &&
+                s.server?.serverId === target.server?.serverId &&
+                s.server?.generation === target.server?.generation);
             if (session)
                 preferences.change({
                     type: "favorite",
@@ -335,6 +472,19 @@ export function createApplicationMachineNavigation(options) {
                 return;
             const handle = manager.getMachine(target.machineId);
             if (command.kind === "open-machine") {
+                if (target.server) {
+                    const descriptor = snapshot()
+                        .groups.find((group) => group.id === target.machineId)
+                        ?.servers?.find((server) => server.serverId === target.server?.serverId &&
+                        server.generation === target.server.generation &&
+                        server.state === "online");
+                    if (!descriptor || handle?.read()?.instanceId !== target.daemonInstanceId) {
+                        options.setNote("That server has changed. Select it again.");
+                        return;
+                    }
+                    sidebar.onSelectServer?.(target.machineId, target.server);
+                    return;
+                }
                 if (handle?.endpoint().state === "ready" &&
                     handle.read()?.instanceId === target.daemonInstanceId)
                     sidebar.onSelectMachine(target.machineId, source);
@@ -343,7 +493,10 @@ export function createApplicationMachineNavigation(options) {
                 return;
             }
             const group = snapshot().groups.find((g) => g.id === target.machineId || g.routeIds?.includes(target.machineId));
-            const session = group?.sessions.find((s) => s.liveSessionId === target.liveSessionId && !s.disabled);
+            const session = group?.sessions.find((s) => s.liveSessionId === target.liveSessionId &&
+                !s.disabled &&
+                s.server?.serverId === target.server?.serverId &&
+                s.server?.generation === target.server?.generation);
             if (!session ||
                 handle?.endpoint().state !== "ready" ||
                 handle.read()?.instanceId !== target.daemonInstanceId) {
@@ -353,7 +506,7 @@ export function createApplicationMachineNavigation(options) {
             if (command.kind === "jump-agent")
                 sidebar.onOpenAgent?.(target.machineId, session.name, command.paneId, source);
             else
-                await open(target.machineId, session.name, source, true, target.liveSessionId);
+                await open(target.machineId, session.name, source, true, target.liveSessionId, target.server);
         },
         adding,
         alias,
@@ -402,17 +555,44 @@ export function createApplicationMachineNavigation(options) {
                 setError(cause instanceof Error ? cause.message : "Could not add this machine.");
             }
         },
-        start(target) {
+        start(target, serverId) {
             agents.start();
             catalog.start();
-            if (!target)
+            if (!target && !serverId)
                 return;
             const id = manager.snapshot().selectedMachineId;
             const token = navigation;
+            let machineReady = false;
+            const attempt = () => {
+                if (!machineReady)
+                    return;
+                if (token !== navigation) {
+                    attemptStartup = null;
+                    return;
+                }
+                const group = snapshot().groups.find((group) => group.id === id);
+                if (group?.state !== "ready")
+                    return;
+                const matches = group.sessions.filter((row) => !row.disabled &&
+                    (!serverId || row.server?.serverId === serverId) &&
+                    (!target || row.name === target));
+                if (matches.length !== 1) {
+                    options.setNote(matches.length
+                        ? "Select a session under the requested tmux server."
+                        : "Requested server or session is unavailable. Select it again.");
+                    attemptStartup = null;
+                    return;
+                }
+                const row = matches[0];
+                attemptStartup = null;
+                void open(id, row.name, "keyboard", true, row.liveSessionId, row.server, row.id);
+            };
+            attemptStartup = attempt;
             void manager.getMachine(id)?.ready.then((ready) => {
-                if (ready && token === navigation && manager.snapshot().selectedMachineId === id)
-                    void open(id, target, "keyboard");
+                machineReady = ready;
+                attemptStartup?.();
             });
+            attempt();
         },
     };
 }

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

@@ -43,9 +43,15 @@ export function ApplicationMachineSidebar(props) {
             ? row.group.state === "ready" &&
                 !row.agent.disabled &&
                 row.agent.sessionName === props.model.activeSessionName() &&
+                (!props.model.activeSessionKey ||
+                    row.group.sessions.some((session) => session.id === props.model.activeSessionKey?.() &&
+                        session.server?.serverId === row.agent?.server?.serverId &&
+                        session.server?.generation === row.agent?.server?.generation)) &&
                 row.agent.paneId !== null &&
                 row.agent.paneId === props.model.activePaneId?.()
-            : row.session?.name === props.model.activeSessionName());
+            : props.model.activeSessionKey
+                ? 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 },
@@ -53,12 +59,29 @@ export function ApplicationMachineSidebar(props) {
             .filter((session) => !collapsed().has(preferenceKey(group)) ||
             props.model.favorites?.().includes(session.id) ||
             (group.id === props.model.activeMachineId() &&
-                session.name === props.model.activeSessionName()))
-            .map((session) => ({
+                (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,
             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]),
@@ -79,7 +102,10 @@ export function ApplicationMachineSidebar(props) {
             ? group
             : null;
     };
-    const activity = (row) => summarizeFleetActivity((row.group.agents ?? []).filter((agent) => !row.session || agent.sessionName === row.session.name), row.group.state === "ready" && row.group.agentsAvailable !== false && !row.session?.disabled);
+    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)
@@ -111,6 +137,14 @@ export function ApplicationMachineSidebar(props) {
         setSelectedKey(row.key);
         setLocalFocused(true);
         props.model.onFocus?.();
+        if (row.server) {
+            if (row.server.state === "online")
+                props.model.onSelectServer?.(row.group.id, {
+                    serverId: row.server.serverId,
+                    generation: row.server.generation,
+                });
+            return;
+        }
         if (row.agent) {
             if (row.group.state === "ready" &&
                 !row.agent.disabled &&
@@ -123,7 +157,7 @@ export function ApplicationMachineSidebar(props) {
         }
         else if (row.session) {
             if (row.group.state === "ready" && !row.session.disabled)
-                props.model.onOpen(row.group.id, row.session.name, source);
+                props.model.onOpen(row.group.id, row.session.name, source, row.session.id);
         }
         else if (row.group.state !== "ready" ||
             (row.group.sessions.length === 0 && !row.group.agents?.length))
@@ -134,7 +168,7 @@ export function ApplicationMachineSidebar(props) {
     const revealFocusedRow = () => {
         if (!focused() || !scroll)
             return;
-        const rowHeight = (row) => (row.agent ? (row.agentHeading ? 3 : 2) : 1);
+        const rowHeight = (row) => row.agent ? (row.agentHeading ? 3 : 2) : row.serverHeading ? 2 : 1;
         const y = rows()
             .slice(0, index())
             .reduce((sum, row) => sum + rowHeight(row), 0);
@@ -298,48 +332,68 @@ export function ApplicationMachineSidebar(props) {
                 get agent() {
                     return current().agent;
                 },
+                get server() {
+                    return current().server;
+                },
+                get serverHeading() {
+                    return current().serverHeading;
+                },
                 get agentHeading() {
                     return current().agentHeading;
                 },
             };
-            return (<box width={Math.max(1, props.width - 1)} height={row.agent ? (row.agentHeading ? 3 : 2) : 1} flexShrink={0} flexDirection="column">
+            return (<box width={Math.max(1, props.width - 1)} height={row.agent ? (row.agentHeading ? 3 : 2) : row.serverHeading ? 2 : 1} flexShrink={0} flexDirection="column">
+                <Show when={row.serverHeading}>
+                  <NavigationRow theme={props.theme} width={Math.max(1, props.width - 1)} id={`server:${row.group.id}:${row.session?.server?.serverId}`} label={row.serverHeading ?? "Server"} marker=" ▾" onActivate={() => {
+                    if (row.session?.server)
+                        props.model.onSelectServer?.(row.group.id, row.session.server);
+                }}/>
+                </Show>
                 <Show when={row.agentHeading}>
                   <text height={1} fg={props.theme.roles.text.secondary}>
                     {" "}
                     Agents
                   </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.agent
-                    ? row.agent.name
-                    : row.session
-                        ? friendlySessionLabel(row.session.name)
-                        : row.group.label} marker={row.agent
-                    ? active(row)
-                        ? row.agent.attention
-                            ? "›!"
-                            : "›"
-                        : row.agent.attention
-                            ? "!"
-                            : "•"
-                    : row.session
-                        ? props.model.favorites?.().includes(row.session.id)
-                            ? " ★"
-                            : active(row)
-                                ? " ›"
-                                : "  "
-                        : collapsed().has(preferenceKey(row.group))
-                            ? "▸"
-                            : "▾"} detail={row.agent
-                    ? row.group.state !== "ready" || row.agent.disabled
-                        ? "unavailable"
-                        : `[${terminalAgentStatusLabel(row.agent.activity)}]`
-                    : row.session
-                        ? row.group.state !== "ready" || row.session.disabled
+                <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
+                        : row.session
+                            ? friendlySessionLabel(row.session.name)
+                            : row.group.label} marker={row.server
+                    ? "  "
+                    : row.agent
+                        ? active(row)
+                            ? row.agent.attention
+                                ? "›!"
+                                : "›"
+                            : row.agent.attention
+                                ? "!"
+                                : "•"
+                        : row.session
+                            ? props.model.favorites?.().includes(row.session.id)
+                                ? " ★"
+                                : active(row)
+                                    ? " ›"
+                                    : "  "
+                            : collapsed().has(preferenceKey(row.group))
+                                ? "▸"
+                                : "▾"} detail={row.server
+                    ? row.server.state === "offline"
+                        ? "offline"
+                        : "empty"
+                    : row.agent
+                        ? row.group.state !== "ready" || row.agent.disabled
                             ? "unavailable"
-                            : `${row.session.paneCount}p${row.group.agents?.length ? ` ${activity(row).label}` : ""}`
-                        : row.group.agents?.length && row.group.state === "ready"
-                            ? activity(row).label
-                            : `${connectionDetail(row.group)}${row.group.agents?.length ? " ?" : ""}`} selected={Boolean((row.session || row.agent) && active(row))} focused={Boolean(focused() && row.key === selectedKey())} attention={row.agent?.attention ?? activity(row).kind === "attention"} onActivate={(source) => activate(row, source)}/>
+                            : `[${terminalAgentStatusLabel(row.agent.activity)}]`
+                        : row.session
+                            ? row.group.state !== "ready" || row.session.disabled
+                                ? "unavailable"
+                                : `${row.session.paneCount}p${row.group.agents?.length ? ` ${activity(row).label}` : ""}`
+                            : row.group.agents?.length && row.group.state === "ready"
+                                ? activity(row).label
+                                : `${connectionDetail(row.group)}${row.group.agents?.length ? " ?" : ""}`} selected={Boolean((row.session || row.agent) && active(row))} focused={Boolean(focused() && row.key === selectedKey())} attention={row.agent?.attention ?? activity(row).kind === "attention"} onActivate={(source) => activate(row, source)}/>
                 <Show when={row.agent}>
                   {(agent) => (<text height={1} fg={props.theme.roles.text.muted} content={clipTerminal(`  ${friendlySessionLabel(agent().sessionName)}`, Math.max(1, props.width - 1))}/>)}
                 </Show>