tmux-ide 2.9.0-beta.29 → 2.9.0-beta.31

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.29",
+      version: "2.9.0-beta.31",
       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.29",
+  "version": "2.9.0-beta.31",
   "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

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

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

@@ -189,12 +189,21 @@ export function createApplicationHomeNavigationOwner(options) {
         observer: options.observer,
     });
     const paletteCommands = createApplicationPaletteCommandOwner({
-        commands: () => options.fleetCommands
-            ? [
-                ...applicationPaletteCommands(options.shell().semantic).filter((c) => typeof c === "string"),
-                ...options.fleetCommands(),
-            ]
-            : applicationPaletteCommands(options.shell().semantic, options.catalog.sessionNames()),
+        commands: () => [
+            ...(options.fleetCommands
+                ? [
+                    ...applicationPaletteCommands(options.shell().semantic).filter((c) => typeof c === "string"),
+                    ...options.fleetCommands(),
+                ]
+                : applicationPaletteCommands(options.shell().semantic, options.catalog.sessionNames())),
+            ...(options.toggleSidebar
+                ? [
+                    options.sidebarVisible?.() === false
+                        ? "show-sidebar"
+                        : "hide-sidebar",
+                ]
+                : []),
+        ],
         isOpen: () => Boolean(options.shell().semantic?.focus.palette.open ?? options.shell().localPaletteOpen),
         targetKey: () => `${applicationGenerationNavigationKey(options.sessionOwner()?.snapshot() ?? null)}:${options.focusedPane()}`,
         disabledReason: (command) => {
@@ -204,6 +213,8 @@ export function createApplicationHomeNavigationOwner(options) {
                 command === "home" ||
                 command === "terminals" ||
                 command === "appearance" ||
+                command === "hide-sidebar" ||
+                command === "show-sidebar" ||
                 command === "shortcuts" ||
                 command === "whats-new" ||
                 command === "switch-session")
@@ -218,6 +229,7 @@ export function createApplicationHomeNavigationOwner(options) {
         setSurface: options.setSurface,
         setNote: options.setNote,
         openAppearance: options.openAppearance,
+        toggleSidebar: options.toggleSidebar,
         openSessions: options.openSessions,
         zoomPane: options.zoomPane,
         newWindow: options.interaction.newWindow,

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

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

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

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

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

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

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

@@ -41,6 +41,11 @@ export function createApplicationPaletteCommandOwner(options) {
             options.openSessions();
             return;
         }
+        if (command === "hide-sidebar" || command === "show-sidebar") {
+            setOpen(false, source);
+            options.toggleSidebar?.();
+            return;
+        }
         if (command === "appearance") {
             setOpen(false, source);
             options.openAppearance?.();

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

@@ -1,20 +1,30 @@
 import { interactionReceiptTargetLabel } from "@tmux-ide/core";
 import { For, Show } from "solid-js";
 import { clipTerminal, terminalDisplayWidth } from "../terminal-text.js";
+import { DetailRow } from "../ui/detail-row.jsx";
 import { TuiButton } from "../ui/button.jsx";
 import { HomeAgentRoster } from "./application-home-agent-roster.jsx";
-/** Home reserves its cells for workspace information at every terminal size. */
-export function applicationHomeBrandVariant(_width, _height) {
-    return "wordmark";
+import { APPLICATION_HOME_WORDMARK, APPLICATION_HOME_WORDMARK_WIDTH } from "../ui/home-wordmark.js";
+/** Keep the marketing wordmark intact, falling back when the agent list needs the room. */
+export function applicationHomeBrandVariant(width, height) {
+    return width >= APPLICATION_HOME_WORDMARK_WIDTH && height >= 28 ? "ascii" : "wordmark";
 }
 /** Presentation only: session data, commands, and keyboard admission stay with the shell. */
 export function ApplicationHomeSurface(props) {
     const width = () => Math.max(0, Math.floor(props.width));
     const height = () => Math.max(0, Math.floor(props.height));
-    const inset = () => (width() >= 40 ? 2 : width() >= 12 ? 1 : 0);
+    const inset = () => Math.max(width() >= 40 ? 2 : width() >= 12 ? 1 : 0, props.branded ? Math.floor((width() - 96) / 2) : 0);
     const bodyWidth = () => Math.max(0, width() - inset() * 2);
+    const showAscii = () => props.branded &&
+        props.agentRoster?.phase === "live" &&
+        props.agentRoster.rows.length === 0 &&
+        !props.agentQuery &&
+        applicationHomeBrandVariant(bodyWidth(), height()) === "ascii";
+    const brandRows = () => (showAscii() ? APPLICATION_HOME_WORDMARK.length : 1);
     const spacious = () => height() >= 14;
-    const context = () => clipTerminal(`${props.session ?? "No session selected"} · ${props.status}`, bodyWidth());
+    const context = () => clipTerminal(props.branded && props.agentRoster
+        ? "Your agents, across your machines"
+        : `${props.session ?? "No session selected"} · ${props.status}`, bodyWidth());
     const summary = () => {
         if (!props.session || props.agents === undefined)
             return "Agent signals unavailable";
@@ -24,7 +34,7 @@ export function ApplicationHomeSurface(props) {
     };
     const themeLabel = () => `Theme: ${props.theme.setting}`;
     // Use the existing TuiButton cell budget for both its label and hit target.
-    const naturalButtonWidth = (label, shortcut) => terminalDisplayWidth(label) + (shortcut ? terminalDisplayWidth(shortcut) + 1 : 0) + 4;
+    const naturalButtonWidth = (label, shortcut) => terminalDisplayWidth(label) + (shortcut ? terminalDisplayWidth(shortcut) + 1 : 0) + 2;
     const buttonWidth = (label, shortcut) => Math.min(bodyWidth(), naturalButtonWidth(label, shortcut));
     const actionsInRow = () => bodyWidth() >=
         naturalButtonWidth("Open terminals", "F2") +
@@ -32,14 +42,31 @@ export function ApplicationHomeSurface(props) {
             (props.onCycleTheme ? naturalButtonWidth(themeLabel()) + 2 : 0) +
             (props.onOpenTutorial ? naturalButtonWidth(props.tutorialLabel ?? "Learn tmux-ide") + 2 : 0) +
             2;
-    const reservedRows = () => (spacious() ? 4 : 2) +
+    const reservedRows = () => brandRows() -
+        1 +
+        (spacious() ? 4 : 2) +
         (actionsInRow() ? 1 : 2 + (props.onCycleTheme ? 1 : 0) + (props.onOpenTutorial ? 1 : 0)) +
         (spacious() ? 1 : 0) +
         (props.note ? (spacious() ? 2 : 1) : 0);
-    const recentActivity = () => (props.recentPaneActivity ?? []).slice(0, spacious()
-        ? Math.max(0, Math.min(3, height() - reservedRows() - (props.agentRoster ? 4 : 2) - 2))
+    const activityRows = () => (height() >= 24 && bodyWidth() >= 48 ? 2 : 1);
+    const selectedAgent = () => props.agentRoster?.rows.find((row) => row.key === props.agentSelection?.selectedKey);
+    // Receipts lack a fleet-wide machine identity. Never attribute a same-named
+    // workspace/pane collision to the selected agent.
+    const selectedActivity = () => {
+        const selected = selectedAgent();
+        if (!selected?.paneId || selected.daemonInstanceId !== props.activityDaemonId)
+            return [];
+        const matches = props.agentRoster?.rows.filter((row) => row.sessionName === selected.sessionName && row.paneId === selected.paneId);
+        if (matches?.length !== 1)
+            return [];
+        return (props.recentPaneActivity ?? []).filter((receipt) => receipt.workspaceName === selected.sessionName &&
+            receipt.target.kind === "pane" &&
+            receipt.target.semanticPaneId === selected.paneId);
+    };
+    const recentActivity = () => selectedActivity().slice(0, spacious()
+        ? Math.max(0, Math.min(1, Math.floor((height() - reservedRows() - (props.agentRoster ? 12 : 2) - 2) / activityRows())))
         : 0);
-    const activityHeight = () => (recentActivity().length > 0 ? recentActivity().length + 2 : 0);
+    const activityHeight = () => recentActivity().length > 0 ? recentActivity().length * activityRows() + 2 : 0;
     const paneLabel = (paneId) => {
         const matches = props.agentRoster?.rows.filter((row) => row.paneId === paneId) ?? [];
         return matches.length === 1 ? matches[0].name : paneId;
@@ -63,9 +90,19 @@ export function ApplicationHomeSurface(props) {
                 : "timed out";
     const rosterHeight = () => Math.max(0, height() - reservedRows() - activityHeight());
     return (<box id="application-home" width={width()} height={height()} paddingLeft={inset()} paddingRight={inset()} paddingTop={spacious() ? 1 : 0} flexDirection="column" alignItems="flex-start" backgroundColor={props.theme.roles.surfaces.canvas} overflow="hidden">
-      <text width={bodyWidth()} height={1} flexShrink={0} fg={props.theme.roles.text.primary}>
-        <strong>{clipTerminal(props.branded ? "tmux-ide" : props.project, bodyWidth())}</strong>
-      </text>
+      <box height={brandRows()} width={bodyWidth()} flexShrink={0} flexDirection="column">
+        <Show when={showAscii()} fallback={<text width={bodyWidth()} height={1} fg={props.theme.roles.text.primary}>
+              <strong>
+                {clipTerminal(props.branded ? "tmux-ide" : props.project, bodyWidth())}
+              </strong>
+            </text>}>
+          <For each={APPLICATION_HOME_WORDMARK}>
+            {(line) => (<text width={bodyWidth()} height={1} flexShrink={0} fg={props.theme.roles.text.primary}>
+                {" ".repeat(Math.max(0, Math.floor((bodyWidth() - APPLICATION_HOME_WORDMARK_WIDTH) / 2))) + line}
+              </text>)}
+          </For>
+        </Show>
+      </box>
       <box height={spacious() ? 1 : 0} flexShrink={0}/>
       <text width={bodyWidth()} height={1} flexShrink={0} fg={props.theme.roles.text.secondary}>
         {context()}
@@ -79,17 +116,15 @@ export function ApplicationHomeSurface(props) {
                 {clipTerminal(summary(), bodyWidth())}
               </text>
             </>}>
-          {(snapshot) => (<HomeAgentRoster filterLabel={props.agentFilterLabel} onCycleMachine={props.onCycleAgentMachine} onToggleAttention={props.onToggleAgentAttention} theme={props.theme} width={bodyWidth()} height={rosterHeight()} snapshot={snapshot()} selection={props.agentSelection ?? { selectedKey: null, scrollOffset: 0 }} inputActive={props.agentInputActive ?? false} onSelect={(key) => props.onSelectAgent?.(key)} onMove={(delta) => props.onMoveAgent?.(delta)} onViewport={(rows) => props.onAgentViewport?.(rows)} onOpen={(row, source) => props.onOpenAgent?.(row, source)} onRetry={props.onRetryAgents} onLoadMore={props.onLoadMoreAgents}/>)}
+          {(snapshot) => (<HomeAgentRoster query={props.agentQuery} onQueryChange={props.onAgentQueryChange} filterLabel={props.agentFilterLabel} onCycleMachine={props.onCycleAgentMachine} onToggleAttention={props.onToggleAgentAttention} theme={props.theme} width={bodyWidth()} height={rosterHeight()} snapshot={snapshot()} selection={props.agentSelection ?? { selectedKey: null, scrollOffset: 0 }} inputActive={props.agentInputActive ?? false} onSelect={(key) => props.onSelectAgent?.(key)} onMove={(delta) => props.onMoveAgent?.(delta)} onViewport={(rows) => props.onAgentViewport?.(rows)} onOpen={(row, source) => props.onOpenAgent?.(row, source)} onRetry={props.onRetryAgents} onLoadMore={props.onLoadMoreAgents}/>)}
         </Show>
         <Show when={activityHeight() > 0}>
           <box width={bodyWidth()} height={activityHeight()} flexShrink={0} flexDirection="column" overflow="hidden">
             <text height={1} width={bodyWidth()} fg={props.theme.roles.text.secondary}>
-              {clipTerminal("Recent pane activity", bodyWidth())}
+              {clipTerminal(`${selectedAgent()?.name ?? "Agent"} · latest activity`, bodyWidth())}
             </text>
             <For each={recentActivity()}>
-              {(receipt) => (<text height={1} width={bodyWidth()} fg={props.theme.roles.text.primary}>
-                  {clipTerminal(`${activityTime(receipt)} · ${interactionReceiptTargetLabel(receipt, paneLabel)} · ${activityPhase(receipt)}`, bodyWidth())}
-                </text>)}
+              {(receipt) => (<DetailRow theme={props.theme} width={bodyWidth()} label={interactionReceiptTargetLabel(receipt, paneLabel)} detail={activityPhase(receipt)} description={activityRows() === 2 ? activityTime(receipt) : undefined} attention={receipt.phase === "rejected" || receipt.phase === "timed-out"}/>)}
             </For>
             <text height={1} width={bodyWidth()} fg={props.theme.roles.text.muted}>
               {clipTerminal("Activity reported through tmux-ide", bodyWidth())}
@@ -98,13 +133,13 @@ export function ApplicationHomeSurface(props) {
         </Show>
         <box height={spacious() ? 1 : 0} flexShrink={0}/>
         <box width={bodyWidth()} flexShrink={0} flexDirection={actionsInRow() ? "row" : "column"} alignItems="flex-start" gap={actionsInRow() ? 2 : 0}>
-          <TuiButton theme={props.theme} label="Open terminals" shortcut="F2" width={buttonWidth("Open terminals", "F2")} variant="primary" onPress={props.onOpenTerminals}/>
-          <TuiButton theme={props.theme} label="Commands" shortcut="F5" width={buttonWidth("Commands", "F5")} onPress={props.onOpenCommands}/>
+          <TuiButton theme={props.theme} label="Open terminals" shortcut="F2" width={buttonWidth("Open terminals", "F2")} size="compact" variant="ghost" background={props.theme.roles.surfaces.canvas} onPress={props.onOpenTerminals}/>
+          <TuiButton theme={props.theme} label="Commands" size="compact" variant="ghost" background={props.theme.roles.surfaces.canvas} shortcut="F5" width={buttonWidth("Commands", "F5")} onPress={props.onOpenCommands}/>
           <Show when={props.onOpenTutorial}>
-            {(open) => (<TuiButton theme={props.theme} label={props.tutorialLabel ?? "Learn tmux-ide"} width={buttonWidth(props.tutorialLabel ?? "Learn tmux-ide")} onPress={open()}/>)}
+            {(open) => (<TuiButton theme={props.theme} label={props.tutorialLabel ?? "Learn tmux-ide"} size="compact" variant="ghost" background={props.theme.roles.surfaces.canvas} width={buttonWidth(props.tutorialLabel ?? "Learn tmux-ide")} onPress={open()}/>)}
           </Show>
           <Show when={props.onCycleTheme}>
-            {(onCycleTheme) => (<TuiButton theme={props.theme} label={themeLabel()} width={buttonWidth(themeLabel())} variant="ghost" background={props.theme.roles.surfaces.canvas} onPress={onCycleTheme()}/>)}
+            {(onCycleTheme) => (<TuiButton theme={props.theme} label={themeLabel()} width={buttonWidth(themeLabel())} size="compact" variant="ghost" background={props.theme.roles.surfaces.canvas} onPress={onCycleTheme()}/>)}
           </Show>
         </box>
       </Show>

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

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

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

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

package/packages/daemon/dist/tui/mirror/shell-chrome.js

@@ -15,6 +15,8 @@ export function shellOverlayWidth(terminalWidth, variant, kind) {
     return Math.min(safe, Math.max(1, Math.min(preferred, safe - margin)));
 }
 export function shellSidebarWidth(terminalWidth, preferredWidth, variant = shellChromeVariant(terminalWidth, 24)) {
+    if (preferredWidth === 0)
+        return 0;
     const safe = Math.max(0, Math.floor(terminalWidth));
     const preferred = Math.max(16, Math.min(48, Math.floor(preferredWidth)));
     if (variant === "compact")