tmux-ide 2.9.0-beta.37 → 2.9.0-beta.39

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.37",
+      version: "2.9.0-beta.39",
       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.37",
+  "version": "2.9.0-beta.39",
   "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,6 +2,7 @@
 import { createEffect, createMemo, createSignal, For, Show } from "solid-js";
 import { clipTerminal, terminalDisplayWidth } from "../terminal-text.js";
 import { NavigationRow } from "../ui/navigation-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";
@@ -36,12 +37,13 @@ export function HomeAgentRoster(props) {
         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() - 5 - searchRows() - (showRecovery() ? 1 : 0)) / rowHeight()));
-    const openSelected = () => {
+    const visibleCount = () => Math.max(0, Math.floor((height() - 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))
-            props.onOpen(row, "keyboard");
+            props.onOpen(row, source);
     };
     createEffect(() => props.onViewport(visibleCount()));
     const offset = () => Math.max(0, Math.min(props.selection.scrollOffset, Math.max(0, props.snapshot.rows.length - visibleCount())));
@@ -56,12 +58,13 @@ export function HomeAgentRoster(props) {
         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")
             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)
+        if (filtered() && props.snapshot.rows.length === 0)
             return "No matching agents";
         if (props.snapshot.phase === "live" && props.snapshot.rows.length === 0)
             return "No agents reported";
@@ -97,7 +100,15 @@ export function HomeAgentRoster(props) {
             return false;
         const key = event.name.toLowerCase();
         const filter = !editing() &&
-            (key === "f" ? props.onCycleMachine : key === "a" ? props.onToggleAttention : undefined);
+            (key === "f"
+                ? props.onCycleMachine
+                : key === "a"
+                    ? props.onToggleAttention
+                    : key === "w" && props.onSetActivityFilter
+                        ? () => props.onSetActivityFilter?.("working")
+                        : key === "0" && props.onSetActivityFilter
+                            ? () => props.onSetActivityFilter?.("all")
+                            : undefined);
         if (filter) {
             event.preventDefault();
             event.stopPropagation();
@@ -150,30 +161,42 @@ export function HomeAgentRoster(props) {
           {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>
-        <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={() => {
+      <box width={width()} height={filterRows()} flexShrink={0} flexDirection={filterRows() > 1 ? "column" : "row"} overflow="hidden">
+        <KeyHint theme={props.theme} keys="f" label={props.filterLabel?.split(" · ")[0] ?? "All machines"} width={props.onSetActivityFilter && filterRows() === 1
+            ? Math.max(1, width() - 47)
+            : props.onSetActivityFilter
+                ? Math.min(width(), 28)
+                : Math.max(1, Math.min(28, width() - 16))} quiet button onPress={() => {
             if (props.inputActive)
-                props.onToggleAttention?.();
+                props.onCycleMachine?.();
         }}/>
-        </Show>
+        <box height={1} flexShrink={0} flexDirection="row" overflow="hidden" width={Math.min(width(), 47)}>
+          <Show when={props.onSetActivityFilter} fallback={<KeyHint theme={props.theme} keys="a" label="Attention" quiet button onPress={() => {
+                if (props.inputActive)
+                    props.onToggleAttention?.();
+            }}/>}>
+            <For each={[
+            { key: "0", label: "All", value: "all" },
+            { key: "w", label: "Working", value: "working" },
+            { key: "a", label: "Needs attention", value: "attention" },
+        ]}>
+              {(filter) => (<KeyHint theme={props.theme} keys={filter.key} label={filter.value === "attention" && width() < 47 ? "Attention" : filter.label} quiet button selected={(props.activityFilter ?? "all") === filter.value} onPress={() => {
+                if (props.inputActive)
+                    props.onSetActivityFilter?.(filter.value);
+            }}/>)}
+            </For>
+          </Show>
+        </box>
       </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())}
+                {clipTerminal(filtered() ? "No agents match these filters" : "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())}
+                {clipTerminal(filtered()
+                ? "Choose All or change the machine filter to see more agents."
+                : "Open terminals, or use Commands to connect a machine.", width())}
               </text>
             </Show>
           </box>}>
@@ -190,6 +213,7 @@ export function HomeAgentRoster(props) {
             });
             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()))
@@ -215,6 +239,7 @@ export function HomeAgentRoster(props) {
                     ? 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())}
@@ -231,15 +256,20 @@ export function HomeAgentRoster(props) {
                 const action = applicationPaneRenameKeyAction(event, props.query ?? "");
                 if (action.kind === "update")
                     onQueryChange()(action.value);
-            }} onPaste={(bytes) => onQueryChange()(applicationPaneRenamePaste(props.query ?? "", bytes))} onEditing={setEditing} onSubmit={openSelected}/>
+            }} 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>
+      <box width={width()} height={1} flexShrink={0} flexDirection="row" overflow="hidden">
+        <text width={Math.min(Math.max(0, width() - (footer().endsWith("Enter open") && width() >= 20 ? 12 : 0)), terminalDisplayWidth(footer().replace(/ Enter open$/u, "")))} fg={props.theme.roles.text.muted}>
+          {clipTerminal(footer().replace(/ Enter open$/u, ""), width())}
+        </text>
+        <Show when={footer().endsWith("Enter open") && width() >= 20}>
+          <KeyHint theme={props.theme} keys="Enter" label="open" quiet button onPress={() => openSelected("mouse")}/>
+        </Show>
+      </box>
       <Show when={showRecovery()}>
         <box height={1} width={width()} flexShrink={0} flexDirection="row" gap={1}>
           <Show when={(props.snapshot.phase === "unavailable" || props.snapshot.unavailableSessions > 0) &&

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

@@ -28,6 +28,13 @@ export function projectHomeFleet(catalog, groups, filter) {
             if (filter.attentionOnly &&
                 !(agent.attention || agent.activity === "waiting" || agent.activity === "failed"))
                 continue;
+            if (filter.workingOnly &&
+                (agent.disabled ||
+                    group?.available === false ||
+                    unavailable.has(sessionKey) ||
+                    machine.state !== "ready" ||
+                    agent.activity !== "running"))
+                continue;
             const paneKey = agent.paneId
                 ? JSON.stringify([machine.id, agent.server?.serverId, agent.daemonInstanceId, agent.paneId])
                 : agent.id;
@@ -119,7 +126,7 @@ export function createApplicationHomeFleetOwner(options) {
             return options.inputActive();
         },
         get agentFilterLabel() {
-            return `${catalog().groups.find((group) => group.id === filter().machineId)?.label ?? "All machines"} · ${filter().attentionOnly ? "Needs attention" : "All agents"}`;
+            return `${catalog().groups.find((group) => group.id === filter().machineId)?.label ?? "All machines"} · ${filter().attentionOnly ? "Needs attention" : filter().workingOnly ? "Working" : "All agents"}`;
         },
         onCycleAgentMachine() {
             const ids = [null, ...catalog().groups.map((group) => group.id)];
@@ -128,8 +135,18 @@ export function createApplicationHomeFleetOwner(options) {
                 machineId: ids[(ids.indexOf(value.machineId) + 1) % ids.length],
             }));
         },
+        get agentActivityFilter() {
+            return filter().attentionOnly ? "attention" : filter().workingOnly ? "working" : "all";
+        },
+        onSetAgentActivityFilter(activity) {
+            setFilter((value) => ({
+                ...value,
+                attentionOnly: activity === "attention",
+                workingOnly: activity === "working",
+            }));
+        },
         onToggleAgentAttention() {
-            setFilter((value) => ({ ...value, attentionOnly: !value.attentionOnly }));
+            setFilter((value) => ({ ...value, attentionOnly: !value.attentionOnly, workingOnly: false }));
         },
         onRetryAgents: () => options.agents.retry?.(),
         onLoadMoreAgents: () => options.agents.loadMore?.(),

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

@@ -6,6 +6,7 @@ import { fleetConnectionMessage, } from "@tmux-ide/daemon-client/fleet-connectio
 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 { KeyHint } from "../ui/key-hint.jsx";
 import { NavigationRow } from "../ui/navigation-row.jsx";
 import { Surface } from "../ui/surface.jsx";
 import { useKeyboardRoute } from "../ui/keyboard-router.jsx";
@@ -302,10 +303,14 @@ export function ApplicationMachineSidebar(props) {
         return true;
     });
     return (<Surface id="application-machine-sidebar" theme={props.theme} variant="panel" width={props.width} height={props.height} flexShrink={0} flexDirection="column" overflow="hidden">
-      <text height={1} fg={props.theme.roles.text.secondary}>
-        {" "}
-        {props.model.tabs?.().length ? "Machines · F9 tabs · ?" : "Machines · ? help"}
-      </text>
+      <box height={1} flexShrink={0} flexDirection="row" overflow="hidden">
+        <text fg={props.theme.roles.text.secondary}>{" Machines"}</text>
+        <box flexGrow={1}/>
+        <Show when={props.model.tabs?.().length && props.width >= 28}>
+          <KeyHint theme={props.theme} keys="F9" label="Tabs" quiet/>
+        </Show>
+        <KeyHint theme={props.theme} keys="?" label={props.width >= 20 ? "Help" : undefined} quiet button onPress={() => setShowHelp(!showHelp())}/>
+      </box>
       <For each={visibleTabs()}>
         {(tab) => (<box height={1} flexDirection="row">
             <NavigationRow theme={props.theme} width={Math.max(1, props.width - 4)} id={`fleet-tab:${tab.key}`} label={`${tab.hostLabel} / ${tab.label}`} marker={tab.active ? "●" : "○"} detail={tab.available ? "" : "offline"} focused={false} onActivate={() => props.model.onOpenTab?.(tab.key)}/>
@@ -417,10 +422,10 @@ export function ApplicationMachineSidebar(props) {
         </text>
       </Show>
       <Show when={props.model.onOpenSwitcher}>
-        <NavigationRow theme={props.theme} id="machine:switcher" label="Sessions" detail="F6" marker=" " width={props.width} onActivate={() => props.model.onOpenSwitcher?.()}/>
+        <KeyHint theme={props.theme} keys="F6" label="Sessions" width={props.width} quiet button onPress={() => 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?.()}/>
+        <KeyHint theme={props.theme} keys="F7" label={`Attention (${props.model.groups().reduce((sum, group) => sum + (group.state === "ready" ? (group.agents ?? []).filter((agent) => agent.attention && !agent.disabled).length : 0), 0)})`} width={props.width} quiet button onPress={() => props.model.onOpenAttention?.()}/>
       </Show>
       <Show when={controlsHeight() > 0 && controlGroup()}>
         {(group) => (<>
@@ -429,12 +434,12 @@ export function ApplicationMachineSidebar(props) {
                 ? fleetConnectionMessage(group().diagnostic)
                 : connectionDetail(group())}
             </text>
-            <NavigationRow theme={props.theme} id="machine:retry" label="Retry connection (R)" marker="↻" width={props.width} onActivate={() => props.model.onRetryMachine?.(group().id)}/>
-            <NavigationRow theme={props.theme} id="machine:disconnect" label="Disconnect (D)" marker="×" width={props.width} onActivate={() => props.model.onDisconnectMachine?.(group().id)}/>
+            <KeyHint theme={props.theme} keys="R" label="Retry connection" width={props.width} quiet button onPress={() => props.model.onRetryMachine?.(group().id)}/>
+            <KeyHint theme={props.theme} keys="D" label="Disconnect" width={props.width} quiet button onPress={() => props.model.onDisconnectMachine?.(group().id)}/>
           </>)}
       </Show>
       <For each={props.model.onAddMachine ? [props.model.onAddMachine] : []}>
-        {(add) => (<NavigationRow theme={props.theme} id="machine:add" label="Add machine" detail="A" marker=" " width={props.width} onActivate={add}/>)}
+        {(add) => (<KeyHint theme={props.theme} keys="A" label="Add machine" width={props.width} quiet button onPress={add}/>)}
       </For>
     </Surface>);
 }

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

@@ -19,6 +19,7 @@ export function ApplicationHomeSurface(props) {
         props.agentRoster?.phase === "live" &&
         props.agentRoster.rows.length === 0 &&
         !props.agentQuery &&
+        (!props.agentActivityFilter || props.agentActivityFilter === "all") &&
         applicationHomeBrandVariant(bodyWidth(), height()) === "ascii";
     const brandRows = () => (showAscii() ? APPLICATION_HOME_WORDMARK.length : 1);
     const spacious = () => height() >= 14;
@@ -116,7 +117,7 @@ export function ApplicationHomeSurface(props) {
                 {clipTerminal(summary(), bodyWidth())}
               </text>
             </>}>
-          {(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}/>)}
+          {(snapshot) => (<HomeAgentRoster query={props.agentQuery} onQueryChange={props.onAgentQueryChange} filterLabel={props.agentFilterLabel} activityFilter={props.agentActivityFilter} onSetActivityFilter={props.onSetAgentActivityFilter} 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">

package/packages/daemon/dist/tui/mirror/ui/key-hint.jsx

@@ -6,13 +6,17 @@ import { useKeyboardRoute } from "./keyboard-router.jsx";
 export function KeyHint(props) {
     const palette = () => componentPalette(props.theme, props, "neutral");
     const background = () => props.button
-        ? props.theme.roles.surfaces.panelRaised
+        ? props.selected
+            ? props.theme.roles.selection.selection
+            : props.theme.roles.surfaces.panelRaised
         : props.quiet && !props.focused && !props.hovered
             ? props.theme.roles.surfaces.panel
             : palette().background;
-    const foreground = () => props.quiet && !props.focused && !props.hovered
-        ? props.theme.roles.text.muted
-        : palette().foreground;
+    const foreground = () => props.selected
+        ? props.theme.roles.selection.selectionText
+        : props.quiet && !props.focused && !props.hovered
+            ? props.theme.roles.text.muted
+            : palette().foreground;
     const text = () => props.presentation ?? `${props.keys}${props.label ? ` ${props.label}` : ""}`;
     const width = () => Math.max(1, Math.floor(props.width ?? terminalDisplayWidth(text()) + 2));
     const content = () => clipTerminal(props.presentation ?? ` ${text()} `, width());

package/packages/daemon/src/tui/mirror/runtime/application-home-agent-roster.tsx

@@ -3,6 +3,7 @@ import { createEffect, createMemo, createSignal, For, Show } from "solid-js";
 import type { SemanticThemeSnapshot } from "../theme.ts";
 import { clipTerminal, terminalDisplayWidth } from "../terminal-text.ts";
 import { NavigationRow } from "../ui/navigation-row.tsx";
+import { KeyHint } from "../ui/key-hint.tsx";
 import { TuiButton } from "../ui/button.tsx";
 import { useKeyboardRoute } from "../ui/keyboard-router.tsx";
 import {
@@ -24,6 +25,8 @@ export interface HomeAgentRosterProps {
   readonly query?: string;
   readonly onQueryChange?: (query: string) => void;
   readonly filterLabel?: string;
+  readonly activityFilter?: "all" | "working" | "attention";
+  readonly onSetActivityFilter?: (value: "all" | "working" | "attention") => void;
   readonly onCycleMachine?: () => void;
   readonly onToggleAttention?: () => void;
   readonly theme: SemanticThemeSnapshot;
@@ -69,13 +72,19 @@ export function HomeAgentRoster(props: HomeAgentRosterProps) {
       (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() - 5 - searchRows() - (showRecovery() ? 1 : 0)) / rowHeight()));
-  const openSelected = () => {
+    Math.max(
+      0,
+      Math.floor(
+        (height() - 4 - filterRows() - searchRows() - (showRecovery() ? 1 : 0)) / rowHeight(),
+      ),
+    );
+  const openSelected = (source: "keyboard" | "mouse" = "keyboard") => {
     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");
+      props.onOpen(row, source);
   };
   createEffect(() => props.onViewport(visibleCount()));
   const offset = () =>
@@ -97,11 +106,13 @@ export function HomeAgentRoster(props: HomeAgentRosterProps) {
     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") 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 (filtered() && 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;
@@ -140,7 +151,15 @@ export function HomeAgentRoster(props: HomeAgentRosterProps) {
     const key = event.name.toLowerCase();
     const filter =
       !editing() &&
-      (key === "f" ? props.onCycleMachine : key === "a" ? props.onToggleAttention : undefined);
+      (key === "f"
+        ? props.onCycleMachine
+        : key === "a"
+          ? props.onToggleAttention
+          : key === "w" && props.onSetActivityFilter
+            ? () => props.onSetActivityFilter?.("working")
+            : key === "0" && props.onSetActivityFilter
+              ? () => props.onSetActivityFilter?.("all")
+              : undefined);
     if (filter) {
       event.preventDefault();
       event.stopPropagation();
@@ -204,37 +223,77 @@ export function HomeAgentRoster(props: HomeAgentRosterProps) {
           {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?.();
+      <box
+        width={width()}
+        height={filterRows()}
+        flexShrink={0}
+        flexDirection={filterRows() > 1 ? "column" : "row"}
+        overflow="hidden"
+      >
+        <KeyHint
+          theme={props.theme}
+          keys="f"
+          label={props.filterLabel?.split(" · ")[0] ?? "All machines"}
+          width={
+            props.onSetActivityFilter && filterRows() === 1
+              ? Math.max(1, width() - 47)
+              : props.onSetActivityFilter
+                ? Math.min(width(), 28)
+                : Math.max(1, Math.min(28, width() - 16))
+          }
+          quiet
+          button
+          onPress={() => {
+            if (props.inputActive) props.onCycleMachine?.();
           }}
+        />
+        <box
+          height={1}
+          flexShrink={0}
+          flexDirection="row"
+          overflow="hidden"
+          width={Math.min(width(), 47)}
         >
-          {clipTerminal(
-            props.filterLabel ? `${props.filterLabel} · f machine` : "",
-            Math.max(0, width() - (props.onToggleAttention ? 16 : 0)),
-          )}
-        </text>
-        <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>
+          <Show
+            when={props.onSetActivityFilter}
+            fallback={
+              <KeyHint
+                theme={props.theme}
+                keys="a"
+                label="Attention"
+                quiet
+                button
+                onPress={() => {
+                  if (props.inputActive) props.onToggleAttention?.();
+                }}
+              />
+            }
+          >
+            <For
+              each={
+                [
+                  { key: "0", label: "All", value: "all" },
+                  { key: "w", label: "Working", value: "working" },
+                  { key: "a", label: "Needs attention", value: "attention" },
+                ] as const
+              }
+            >
+              {(filter) => (
+                <KeyHint
+                  theme={props.theme}
+                  keys={filter.key}
+                  label={filter.value === "attention" && width() < 47 ? "Attention" : filter.label}
+                  quiet
+                  button
+                  selected={(props.activityFilter ?? "all") === filter.value}
+                  onPress={() => {
+                    if (props.inputActive) props.onSetActivityFilter?.(filter.value);
+                  }}
+                />
+              )}
+            </For>
+          </Show>
+        </box>
       </box>
       <Show
         when={props.snapshot.rows.length > 0}
@@ -247,10 +306,18 @@ export function HomeAgentRoster(props: HomeAgentRosterProps) {
           >
             <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())}
+                {clipTerminal(
+                  filtered() ? "No agents match these filters" : "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())}
+                {clipTerminal(
+                  filtered()
+                    ? "Choose All or change the machine filter to see more agents."
+                    : "Open terminals, or use Commands to connect a machine.",
+                  width(),
+                )}
               </text>
             </Show>
           </box>
@@ -280,6 +347,7 @@ export function HomeAgentRoster(props: HomeAgentRosterProps) {
                   backgroundColor={
                     componentPalette(props.theme, {
                       selected: props.selection.selectedKey === key,
+                      hovered: hovered() === key,
                       disabled: row().paneId === null || stale(row()),
                     }).background
                   }
@@ -340,6 +408,7 @@ export function HomeAgentRoster(props: HomeAgentRosterProps) {
                       bg={
                         componentPalette(props.theme, {
                           selected: props.selection.selectedKey === key,
+                          hovered: hovered() === key,
                           disabled: row().paneId === null || stale(row()),
                         }).background
                       }
@@ -373,7 +442,7 @@ export function HomeAgentRoster(props: HomeAgentRosterProps) {
                 onQueryChange()(applicationPaneRenamePaste(props.query ?? "", bytes))
               }
               onEditing={setEditing}
-              onSubmit={openSelected}
+              onSubmit={() => openSelected()}
             />
           </box>
         )}
@@ -381,9 +450,27 @@ export function HomeAgentRoster(props: HomeAgentRosterProps) {
       <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>
+      <box width={width()} height={1} flexShrink={0} flexDirection="row" overflow="hidden">
+        <text
+          width={Math.min(
+            Math.max(0, width() - (footer().endsWith("Enter open") && width() >= 20 ? 12 : 0)),
+            terminalDisplayWidth(footer().replace(/ Enter open$/u, "")),
+          )}
+          fg={props.theme.roles.text.muted}
+        >
+          {clipTerminal(footer().replace(/ Enter open$/u, ""), width())}
+        </text>
+        <Show when={footer().endsWith("Enter open") && width() >= 20}>
+          <KeyHint
+            theme={props.theme}
+            keys="Enter"
+            label="open"
+            quiet
+            button
+            onPress={() => openSelected("mouse")}
+          />
+        </Show>
+      </box>
       <Show when={showRecovery()}>
         <box height={1} width={width()} flexShrink={0} flexDirection="row" gap={1}>
           <Show

package/packages/daemon/src/tui/mirror/runtime/application-home-agents-owner.ts

@@ -30,6 +30,8 @@ export type ApplicationHomeAgentPresentation = Pick<
   | "agentQuery"
   | "onAgentQueryChange"
   | "agentFilterLabel"
+  | "agentActivityFilter"
+  | "onSetAgentActivityFilter"
   | "onCycleAgentMachine"
   | "onToggleAgentAttention"
   | "agentRoster"

package/packages/daemon/src/tui/mirror/runtime/application-home-fleet.ts

@@ -11,6 +11,7 @@ import type { ApplicationHomeAgentPresentation } from "./application-home-agents
 export interface HomeFleetFilter {
   readonly machineId: string | null;
   readonly attentionOnly: boolean;
+  readonly workingOnly?: boolean;
   readonly query?: string;
 }
 export function projectHomeFleet(
@@ -54,6 +55,15 @@ export function projectHomeFleet(
         !(agent.attention || agent.activity === "waiting" || agent.activity === "failed")
       )
         continue;
+      if (
+        filter.workingOnly &&
+        (agent.disabled ||
+          group?.available === false ||
+          unavailable.has(sessionKey) ||
+          machine.state !== "ready" ||
+          agent.activity !== "running")
+      )
+        continue;
       const paneKey = agent.paneId
         ? JSON.stringify([machine.id, agent.server?.serverId, agent.daemonInstanceId, agent.paneId])
         : agent.id;
@@ -166,7 +176,7 @@ export function createApplicationHomeFleetOwner(options: {
       return options.inputActive();
     },
     get agentFilterLabel() {
-      return `${catalog().groups.find((group) => group.id === filter().machineId)?.label ?? "All machines"} · ${filter().attentionOnly ? "Needs attention" : "All agents"}`;
+      return `${catalog().groups.find((group) => group.id === filter().machineId)?.label ?? "All machines"} · ${filter().attentionOnly ? "Needs attention" : filter().workingOnly ? "Working" : "All agents"}`;
     },
     onCycleAgentMachine() {
       const ids = [null, ...catalog().groups.map((group) => group.id)];
@@ -175,8 +185,18 @@ export function createApplicationHomeFleetOwner(options: {
         machineId: ids[(ids.indexOf(value.machineId) + 1) % ids.length]!,
       }));
     },
+    get agentActivityFilter() {
+      return filter().attentionOnly ? "attention" : filter().workingOnly ? "working" : "all";
+    },
+    onSetAgentActivityFilter(activity) {
+      setFilter((value) => ({
+        ...value,
+        attentionOnly: activity === "attention",
+        workingOnly: activity === "working",
+      }));
+    },
     onToggleAgentAttention() {
-      setFilter((value) => ({ ...value, attentionOnly: !value.attentionOnly }));
+      setFilter((value) => ({ ...value, attentionOnly: !value.attentionOnly, workingOnly: false }));
     },
     onRetryAgents: () => options.agents.retry?.(),
     onLoadMoreAgents: () => options.agents.loadMore?.(),

package/packages/daemon/src/tui/mirror/runtime/application-machine-sidebar.tsx

@@ -21,6 +21,7 @@ import {
 } from "solid-js";
 import { clipTerminal, friendlySessionLabel } from "../terminal-text.ts";
 import type { SemanticThemeSnapshot } from "../theme.ts";
+import { KeyHint } from "../ui/key-hint.tsx";
 import { NavigationRow } from "../ui/navigation-row.tsx";
 import { Surface } from "../ui/surface.tsx";
 import { useKeyboardRoute } from "../ui/keyboard-router.tsx";
@@ -458,10 +459,21 @@ export function ApplicationMachineSidebar(props: {
       flexDirection="column"
       overflow="hidden"
     >
-      <text height={1} fg={props.theme.roles.text.secondary}>
-        {" "}
-        {props.model.tabs?.().length ? "Machines · F9 tabs · ?" : "Machines · ? help"}
-      </text>
+      <box height={1} flexShrink={0} flexDirection="row" overflow="hidden">
+        <text fg={props.theme.roles.text.secondary}>{" Machines"}</text>
+        <box flexGrow={1} />
+        <Show when={props.model.tabs?.().length && props.width >= 28}>
+          <KeyHint theme={props.theme} keys="F9" label="Tabs" quiet />
+        </Show>
+        <KeyHint
+          theme={props.theme}
+          keys="?"
+          label={props.width >= 20 ? "Help" : undefined}
+          quiet
+          button
+          onPress={() => setShowHelp(!showHelp())}
+        />
+      </box>
       <For each={visibleTabs()}>
         {(tab) => (
           <box height={1} flexDirection="row">
@@ -653,24 +665,25 @@ export function ApplicationMachineSidebar(props: {
         </text>
       </Show>
       <Show when={props.model.onOpenSwitcher}>
-        <NavigationRow
+        <KeyHint
           theme={props.theme}
-          id="machine:switcher"
+          keys="F6"
           label="Sessions"
-          detail="F6"
-          marker=" "
           width={props.width}
-          onActivate={() => props.model.onOpenSwitcher?.()}
+          quiet
+          button
+          onPress={() => props.model.onOpenSwitcher?.()}
         />
       </Show>
       <Show when={props.model.onOpenAttention}>
-        <NavigationRow
+        <KeyHint
           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="!"
+          keys="F7"
+          label={`Attention (${props.model.groups().reduce((sum, group) => sum + (group.state === "ready" ? (group.agents ?? []).filter((agent) => agent.attention && !agent.disabled).length : 0), 0)})`}
           width={props.width}
-          onActivate={() => props.model.onOpenAttention?.()}
+          quiet
+          button
+          onPress={() => props.model.onOpenAttention?.()}
         />
       </Show>
       <Show when={controlsHeight() > 0 && controlGroup()}>
@@ -681,35 +694,37 @@ export function ApplicationMachineSidebar(props: {
                 ? fleetConnectionMessage(group().diagnostic!)
                 : connectionDetail(group())}
             </text>
-            <NavigationRow
+            <KeyHint
               theme={props.theme}
-              id="machine:retry"
-              label="Retry connection (R)"
-              marker="↻"
+              keys="R"
+              label="Retry connection"
               width={props.width}
-              onActivate={() => props.model.onRetryMachine?.(group().id)}
+              quiet
+              button
+              onPress={() => props.model.onRetryMachine?.(group().id)}
             />
-            <NavigationRow
+            <KeyHint
               theme={props.theme}
-              id="machine:disconnect"
-              label="Disconnect (D)"
-              marker="×"
+              keys="D"
+              label="Disconnect"
               width={props.width}
-              onActivate={() => props.model.onDisconnectMachine?.(group().id)}
+              quiet
+              button
+              onPress={() => props.model.onDisconnectMachine?.(group().id)}
             />
           </>
         )}
       </Show>
       <For each={props.model.onAddMachine ? [props.model.onAddMachine] : []}>
         {(add) => (
-          <NavigationRow
+          <KeyHint
             theme={props.theme}
-            id="machine:add"
+            keys="A"
             label="Add machine"
-            detail="A"
-            marker=" "
             width={props.width}
-            onActivate={add}
+            quiet
+            button
+            onPress={add}
           />
         )}
       </For>

package/packages/daemon/src/tui/mirror/runtime/application-shell-home.tsx

@@ -44,6 +44,8 @@ export interface ApplicationHomeSurfaceProps {
   readonly agentQuery?: string;
   readonly onAgentQueryChange?: (query: string) => void;
   readonly agentFilterLabel?: string;
+  readonly agentActivityFilter?: "all" | "working" | "attention";
+  readonly onSetAgentActivityFilter?: (value: "all" | "working" | "attention") => void;
   readonly onCycleAgentMachine?: () => void;
   readonly onToggleAgentAttention?: () => void;
   readonly agentRoster?: HomeAgentSnapshot;
@@ -74,6 +76,7 @@ export function ApplicationHomeSurface(props: ApplicationHomeSurfaceProps): JSX.
     props.agentRoster?.phase === "live" &&
     props.agentRoster.rows.length === 0 &&
     !props.agentQuery &&
+    (!props.agentActivityFilter || props.agentActivityFilter === "all") &&
     applicationHomeBrandVariant(bodyWidth(), height()) === "ascii";
   const brandRows = () => (showAscii() ? APPLICATION_HOME_WORDMARK.length : 1);
   const spacious = () => height() >= 14;
@@ -241,6 +244,8 @@ export function ApplicationHomeSurface(props: ApplicationHomeSurfaceProps): JSX.
               query={props.agentQuery}
               onQueryChange={props.onAgentQueryChange}
               filterLabel={props.agentFilterLabel}
+              activityFilter={props.agentActivityFilter}
+              onSetActivityFilter={props.onSetAgentActivityFilter}
               onCycleMachine={props.onCycleAgentMachine}
               onToggleAttention={props.onToggleAgentAttention}
               theme={props.theme}

package/packages/daemon/src/tui/mirror/runtime/application-shell-view.tsx

@@ -395,6 +395,16 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
             }}
           >
             <ApplicationShell
+              onFooterAction={(key) => {
+                props.machineSidebar?.onBlur?.();
+                if (key === "F6") props.machineSidebar?.onOpenSwitcher?.();
+                else if (key === "F7") props.machineSidebar?.onOpenAttention?.();
+                else
+                  props.onPaletteActivate?.(
+                    props.sidebarVisible === false ? "show-sidebar" : "hide-sidebar",
+                    "mouse",
+                  );
+              }}
               footerContext={props.surface() === "home" ? "home" : "terminals"}
               scrollback={props.surface() === "terminals" && scrollback()}
               rightChips={

package/packages/daemon/src/tui/mirror/shell-chrome-view.tsx

@@ -164,6 +164,7 @@ export interface ShellStatusStripProps {
   tool?: string | null;
   dockMode?: string | null;
   focus?: string | null;
+  onFooterAction?: (key: "F6" | "F7" | "F10") => void;
   scrollback?: boolean;
   notification: string | null;
   transient?: string | null;
@@ -219,7 +220,26 @@ export function ContextStatusBar(props: ShellStatusStripProps) {
           when={showMessage()}
           fallback={
             <For each={hints()}>
-              {(hint) => <KeyHint theme={props.theme} keys={hint.keys} label={hint.label} quiet />}
+              {(hint) => {
+                const action = () =>
+                  hint.keys === "F6" || hint.keys === "F7" || hint.keys === "F10"
+                    ? hint.keys
+                    : null;
+                return (
+                  <KeyHint
+                    theme={props.theme}
+                    keys={hint.keys}
+                    label={hint.label}
+                    quiet
+                    button={action() !== null}
+                    onPress={
+                      action() && props.onFooterAction
+                        ? () => props.onFooterAction?.(action()!)
+                        : undefined
+                    }
+                  />
+                );
+              }}
             </For>
           }
         >

package/packages/daemon/src/tui/mirror/ui/key-hint.tsx

@@ -23,14 +23,18 @@ export function KeyHint(props: KeyHintProps) {
   const palette = () => componentPalette(props.theme, props, "neutral");
   const background = () =>
     props.button
-      ? props.theme.roles.surfaces.panelRaised
+      ? props.selected
+        ? props.theme.roles.selection.selection
+        : props.theme.roles.surfaces.panelRaised
       : props.quiet && !props.focused && !props.hovered
         ? props.theme.roles.surfaces.panel
         : palette().background;
   const foreground = () =>
-    props.quiet && !props.focused && !props.hovered
-      ? props.theme.roles.text.muted
-      : palette().foreground;
+    props.selected
+      ? props.theme.roles.selection.selectionText
+      : props.quiet && !props.focused && !props.hovered
+        ? props.theme.roles.text.muted
+        : palette().foreground;
   const text = () => props.presentation ?? `${props.keys}${props.label ? ` ${props.label}` : ""}`;
   const width = () => Math.max(1, Math.floor(props.width ?? terminalDisplayWidth(text()) + 2));
   const content = () => clipTerminal(props.presentation ?? ` ${text()} `, width());

package/packages/daemon/src/tui/mirror/workspace/application-shell-view.tsx

@@ -11,6 +11,7 @@ import type { SemanticThemeSnapshot } from "../theme.ts";
 import type { ApplicationShellProjection } from "./application-shell.ts";
 
 export interface ApplicationShellProps {
+  onFooterAction?: (key: "F6" | "F7" | "F10") => void;
   scrollback?: boolean;
   footerContext?: "home" | "terminals";
   theme: SemanticThemeSnapshot;
@@ -145,6 +146,7 @@ export function ApplicationShell(props: ApplicationShellProps) {
               props.showToolStatus === false ? null : props.projection.semantic.bottomDock.mode
             }
             focus={props.focusLabel ?? applicationShellFocusLabel(props.projection)}
+            onFooterAction={props.onFooterAction}
             scrollback={props.scrollback}
             notification={props.projection.semantic.statusStrip.message}
             transient={props.note}