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

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

@@ -12,7 +12,6 @@ import { Surface } from "../ui/surface.jsx";
 import { useKeyboardRoute } from "../ui/keyboard-router.jsx";
 /** Pure machine navigation. All connection and session authority stays with the caller. */
 export function ApplicationMachineSidebar(props) {
-    const [showHelp, setShowHelp] = createSignal(false);
     const [localFocused, setLocalFocused] = createSignal(false);
     const focused = () => props.model.focused?.() ?? localFocused();
     const [localCollapsed, setCollapsed] = createSignal(new Set());
@@ -31,14 +30,12 @@ export function ApplicationMachineSidebar(props) {
         const start = Math.max(0, active - tabHeight() + 1);
         return tabs.slice(start, start + tabHeight());
     };
-    const helpHeight = () => showHelp() ? Math.min(5, Math.max(0, Math.floor(props.height / 3))) : 0;
     const machineHeight = () => Math.max(0, props.height -
         1 -
         (props.model.onAddMachine ? 1 : 0) -
         agentHeight() -
         controlsHeight() -
         searchHeight() -
-        helpHeight() -
         tabHeight());
     const active = (row) => row.group.id === props.model.activeMachineId() &&
         (row.agent
@@ -238,7 +235,7 @@ export function ApplicationMachineSidebar(props) {
         event.preventDefault();
         event.stopPropagation();
         if (key === "help") {
-            setShowHelp(!showHelp());
+            props.onHelp?.("keyboard");
             return true;
         }
         if (key === "search") {
@@ -246,10 +243,6 @@ export function ApplicationMachineSidebar(props) {
             return true;
         }
         if (key === "escape") {
-            if (showHelp()) {
-                setShowHelp(false);
-                return true;
-            }
             setLocalFocused(false);
             props.model.onBlur?.();
             return true;
@@ -309,7 +302,7 @@ export function ApplicationMachineSidebar(props) {
         <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())}/>
+        <KeyHint theme={props.theme} keys="?" label={props.width >= 20 ? "Help" : undefined} quiet button onPress={() => props.onHelp?.("mouse")}/>
       </box>
       <For each={visibleTabs()}>
         {(tab) => (<box height={1} flexDirection="row">
@@ -416,11 +409,6 @@ export function ApplicationMachineSidebar(props) {
             {props.agents}
           </scrollbox>)}
       </For>
-      <Show when={helpHeight() > 0}>
-        <text height={helpHeight()} fg={props.theme.roles.text.secondary}>
-          {"j/k ↑↓ move · g/G ends\nPgUp/Dn · Ctrl-U/D half\nh/l ←→ collapse/expand\nEnter open · / search\nf favorite · Esc terminal"}
-        </text>
-      </Show>
       <Show when={props.model.onOpenSwitcher}>
         <KeyHint theme={props.theme} keys="F6" label="Sessions" width={props.width} quiet button onPress={() => props.model.onOpenSwitcher?.()}/>
       </Show>

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

@@ -117,8 +117,8 @@ export function ApplicationMachineSidebar(props: {
   readonly theme: SemanticThemeSnapshot;
   readonly agents?: JSX.Element;
   readonly agentRows?: number;
+  readonly onHelp?: (source: "keyboard" | "mouse") => void;
 }) {
-  const [showHelp, setShowHelp] = createSignal(false);
   const [localFocused, setLocalFocused] = createSignal(false);
   const focused = () => props.model.focused?.() ?? localFocused();
   const [localCollapsed, setCollapsed] = createSignal<ReadonlySet<string>>(new Set());
@@ -141,8 +141,6 @@ export function ApplicationMachineSidebar(props: {
     const start = Math.max(0, active - tabHeight() + 1);
     return tabs.slice(start, start + tabHeight());
   };
-  const helpHeight = () =>
-    showHelp() ? Math.min(5, Math.max(0, Math.floor(props.height / 3))) : 0;
   const machineHeight = () =>
     Math.max(
       0,
@@ -152,7 +150,6 @@ export function ApplicationMachineSidebar(props: {
         agentHeight() -
         controlsHeight() -
         searchHeight() -
-        helpHeight() -
         tabHeight(),
     );
   const active = (row: Row) =>
@@ -378,7 +375,7 @@ export function ApplicationMachineSidebar(props: {
     event.preventDefault();
     event.stopPropagation();
     if (key === "help") {
-      setShowHelp(!showHelp());
+      props.onHelp?.("keyboard");
       return true;
     }
     if (key === "search") {
@@ -386,10 +383,6 @@ export function ApplicationMachineSidebar(props: {
       return true;
     }
     if (key === "escape") {
-      if (showHelp()) {
-        setShowHelp(false);
-        return true;
-      }
       setLocalFocused(false);
       props.model.onBlur?.();
       return true;
@@ -471,7 +464,7 @@ export function ApplicationMachineSidebar(props: {
           label={props.width >= 20 ? "Help" : undefined}
           quiet
           button
-          onPress={() => setShowHelp(!showHelp())}
+          onPress={() => props.onHelp?.("mouse")}
         />
       </box>
       <For each={visibleTabs()}>
@@ -657,13 +650,6 @@ export function ApplicationMachineSidebar(props: {
           </scrollbox>
         )}
       </For>
-      <Show when={helpHeight() > 0}>
-        <text height={helpHeight()} fg={props.theme.roles.text.secondary}>
-          {
-            "j/k ↑↓ move · g/G ends\nPgUp/Dn · Ctrl-U/D half\nh/l ←→ collapse/expand\nEnter open · / search\nf favorite · Esc terminal"
-          }
-        </text>
-      </Show>
       <Show when={props.model.onOpenSwitcher}>
         <KeyHint
           theme={props.theme}

package/packages/daemon/src/tui/mirror/runtime/application-palette-command-owner.ts

@@ -39,7 +39,7 @@ export function createApplicationPaletteCommandOwner(options: {
   readonly disabledReason?: (command: ApplicationPaletteCommand) => string | null;
   readonly targetKey?: () => string;
 }) {
-  const [referencePage, setReferencePage] = createSignal<"shortcuts" | "changes">();
+  const [referencePage, setReferencePage] = createSignal<"shortcuts" | "changes" | "help">();
   const [closeArmed, setCloseArmed] = createSignal(false);
   const [busy, setBusy] = createSignal(false);
   let armedTarget: string | undefined;

package/packages/daemon/src/tui/mirror/runtime/application-reference-sheet.tsx

@@ -44,7 +44,7 @@ const releases = [
 type Row = { kind: "heading" | "text" | "action" | "gap"; label: string; detail?: string };
 
 export function ApplicationReferenceSheet(props: {
-  page: "shortcuts" | "changes";
+  page: "shortcuts" | "changes" | "help";
   width: number;
   height: number;
   theme: SemanticThemeSnapshot;
@@ -78,7 +78,48 @@ export function ApplicationReferenceSheet(props: {
       }
       if (!result.length) result.push({ kind: "text", label: "No matching shortcuts" });
     } else {
-      for (const release of releases) {
+      const sections =
+        page() === "help"
+          ? [
+              {
+                version: "Find your work",
+                lines: [
+                  "Machines are your local computer and connected SSH hosts. Each session contains terminal windows and panes.",
+                  "Open a session or agent in the sidebar to jump to its terminal. Home brings agents from your connected machines together.",
+                ],
+              },
+              {
+                version: "Move around",
+                lines: [
+                  "F1 Home · F2 Terminals · F6 Sessions · F7 Attention",
+                  "F10 shows or hides the sidebar. F5 opens Commands for actions, appearance and keyboard shortcuts.",
+                ],
+              },
+              {
+                version: "Use the sidebar",
+                lines: [
+                  "Click a row to open it. With the sidebar focused, use ↑↓ or j/k to move and Enter to open.",
+                  "←→ or h/l collapse/expand machines. / searches sessions. f toggles a session favorite. Esc returns to the terminal.",
+                  "PgUp/PgDn scroll a page; Ctrl-U/D scroll half a page. g/G jump to the first or last row.",
+                ],
+              },
+              {
+                version: "Follow your agents",
+                lines: [
+                  "On Home, search by name and choose All, Working or Needs attention. Select an agent and press Enter to open its pane.",
+                  "Unavailable means the connection or observation is missing; it does not mean the agent has stopped.",
+                ],
+              },
+              {
+                version: "Connect another machine",
+                lines: [
+                  "Choose Add machine in the sidebar and enter an SSH alias or user@host. Set up SSH key access and host trust first.",
+                  "Run tmux-ide --headless on the remote machine before connecting.",
+                ],
+              },
+            ]
+          : releases;
+      for (const release of sections) {
         if (result.length) result.push({ kind: "gap", label: "" });
         result.push({ kind: "heading", label: release.version });
         for (const line of release.lines) {
@@ -139,8 +180,18 @@ export function ApplicationReferenceSheet(props: {
       viewportHeight={props.height}
       width={metrics().width}
       height={metrics().height}
-      title={page() === "shortcuts" ? "Keyboard shortcuts" : "What's new"}
-      footer="Tab switch sheet · ↑↓ scroll · Esc back"
+      title={
+        page() === "help"
+          ? "Using tmux-ide"
+          : page() === "shortcuts"
+            ? "Keyboard shortcuts"
+            : "What's new"
+      }
+      footer={
+        page() === "help"
+          ? "Tab shortcuts · ↑↓ scroll · Esc back"
+          : "Tab switch sheet · ↑↓ scroll · Esc back"
+      }
       zIndex={100}
       onDismiss={props.onClose}
     >

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

@@ -51,8 +51,8 @@ export interface ApplicationCatalogShellProps {
   readonly paletteSelection?: Accessor<number>;
   readonly palettePreviewActive?: Accessor<boolean>;
   readonly onPaletteModalChange?: (open: boolean) => void;
-  readonly paletteReferencePage?: Accessor<"shortcuts" | "changes" | undefined>;
-  readonly onPaletteReferenceChange?: (page: "shortcuts" | "changes" | undefined) => void;
+  readonly paletteReferencePage?: Accessor<"shortcuts" | "changes" | "help" | undefined>;
+  readonly onPaletteReferenceChange?: (page: "shortcuts" | "changes" | "help" | undefined) => void;
   readonly paletteKeyboardHint?: Accessor<string>;
   readonly paletteQuery?: Accessor<string>;
   readonly paletteDisabledReason?: (command: ApplicationPaletteCommand) => string | null;
@@ -418,6 +418,10 @@ export function ApplicationCatalogShell(props: ApplicationCatalogShellProps): JS
               {(model) => (
                 <ApplicationMachineSidebar
                   model={model()}
+                  onHelp={(source) => {
+                    props.onSetPaletteOpen(true, source);
+                    props.onPaletteReferenceChange?.("help");
+                  }}
                   width={chrome().sidebar.width}
                   height={chrome().sidebar.height}
                   theme={props.theme}

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-overlays.tsx

@@ -106,8 +106,8 @@ export function MinimalPalette(props: {
   readonly title?: string;
   readonly onViewport?: (rows: number) => void;
   readonly onFavorite?: (command: ApplicationPaletteCommand) => void;
-  readonly referencePage?: "shortcuts" | "changes";
-  readonly onReferenceChange?: (page: "shortcuts" | "changes" | undefined) => void;
+  readonly referencePage?: "shortcuts" | "changes" | "help";
+  readonly onReferenceChange?: (page: "shortcuts" | "changes" | "help" | undefined) => void;
   readonly keyboardHint?: string;
   readonly previewActive?: boolean;
   readonly onModalChange?: (open: boolean) => void;
@@ -123,8 +123,8 @@ export function MinimalPalette(props: {
 }): JSX.Element {
   const [expanded, setExpanded] = createSignal(false);
   const [modal, setModal] = createSignal(false);
-  const [sheet, setSheet] = createSignal<"shortcuts" | "changes">();
-  const openSheet = (page: "shortcuts" | "changes" | undefined) => {
+  const [sheet, setSheet] = createSignal<"shortcuts" | "changes" | "help">();
+  const openSheet = (page: "shortcuts" | "changes" | "help" | undefined) => {
     props.onReferenceChange?.(page);
     setSheet(page);
     setModal(!!page);

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

@@ -100,8 +100,8 @@ export interface ApplicationShellViewProps {
   readonly paletteOpen: Accessor<boolean>;
   readonly paneRenameDialog?: Accessor<ApplicationPaneRenameDraft | null>;
   readonly paletteSelection?: Accessor<number>;
-  readonly paletteReferencePage?: Accessor<"shortcuts" | "changes" | undefined>;
-  readonly onPaletteReferenceChange?: (page: "shortcuts" | "changes" | undefined) => void;
+  readonly paletteReferencePage?: Accessor<"shortcuts" | "changes" | "help" | undefined>;
+  readonly onPaletteReferenceChange?: (page: "shortcuts" | "changes" | "help" | undefined) => void;
   readonly paletteKeyboardHint?: Accessor<string>;
   readonly palettePreviewActive?: Accessor<boolean>;
   readonly onPaletteModalChange?: (open: boolean) => void;
@@ -455,6 +455,10 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
                   {(model) => (
                     <ApplicationMachineSidebar
                       model={model()}
+                      onHelp={(source) => {
+                        props.onSetPaletteOpen(true, source);
+                        props.onPaletteReferenceChange?.("help");
+                      }}
                       agentRows={
                         model()
                           .groups()

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