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

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

@@ -1,7 +1,9 @@
+import { CHROME_ACTIONS, SIDEBAR_ACTIONS } from "../workspace/application-action-descriptions.ts";
 import { createAgentStatusMarker } from "../ui/agent-status-marker.ts";
 import type { TmuxServerDescriptor, TmuxServerScope } from "@tmux-ide/contracts";
 import { fleetHostColor, summarizeFleetActivity } from "./fleet-presentation.ts";
-import { TuiButton } from "../ui/button.tsx";
+import { WorkingSessions } from "../ui/working-sessions.tsx";
+import type { SessionRowModel } from "../ui/session-row.tsx";
 /* @jsxImportSource @opentui/solid */
 import {
   fleetConnectionMessage,
@@ -79,15 +81,7 @@ export interface ApplicationMachineSidebarModel {
     paneId: string,
     source: "keyboard" | "mouse",
   ) => void;
-  readonly tabs?: Accessor<
-    readonly {
-      key: string;
-      label: string;
-      hostLabel: string;
-      active: boolean;
-      available: boolean;
-    }[]
-  >;
+  readonly tabs?: Accessor<readonly SessionRowModel[]>;
   readonly onOpenTab?: (key: string) => void;
   readonly onCloseTab?: (key: string) => void;
   readonly onOpenSwitcher?: () => void;
@@ -117,8 +111,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());
@@ -133,16 +127,13 @@ export function ApplicationMachineSidebar(props: {
   const controlsHeight = () => (props.height >= 8 && controlGroup() ? 4 : 0);
   const searchHeight = () =>
     (props.model.onOpenSwitcher ? 1 : 0) + (props.model.onOpenAttention ? 1 : 0);
+  const [workingFocused, setWorkingFocused] = createSignal(true);
   const tabHeight = () =>
-    Math.min(props.model.tabs?.().length ?? 0, Math.max(0, Math.floor(props.height / 3)));
-  const visibleTabs = () => {
-    const tabs = props.model.tabs?.() ?? [];
-    const active = tabs.findIndex((tab) => tab.active);
-    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;
+    (props.model.tabs?.().length ?? 0) > 0 && props.height >= 12
+      ? 1 +
+        Math.min(props.model.tabs!().length, Math.max(1, Math.floor((props.height / 2 - 1) / 3))) *
+          3
+      : 0;
   const machineHeight = () =>
     Math.max(
       0,
@@ -152,7 +143,6 @@ export function ApplicationMachineSidebar(props: {
         agentHeight() -
         controlsHeight() -
         searchHeight() -
-        helpHeight() -
         tabHeight(),
     );
   const active = (row: Row) =>
@@ -276,6 +266,7 @@ export function ApplicationMachineSidebar(props: {
     props.model.onCollapse?.(preferenceKey(group), value);
   };
   const activate = (row: Row, source: "keyboard" | "mouse") => {
+    setWorkingFocused(false);
     setSelectedKey(row.key);
     setLocalFocused(true);
     props.model.onFocus?.();
@@ -315,7 +306,7 @@ export function ApplicationMachineSidebar(props: {
   const rowHeight = (row: Row) =>
     (row.agent ? (row.agentHeading ? 3 : 2) : row.serverHeading ? 2 : 1) + sectionGap(row);
   const revealFocusedRow = () => {
-    if (!focused() || !scroll) return;
+    if (!focused() || (workingFocused() && tabHeight()) || !scroll) return;
     const y = rows()
       .slice(0, index())
       .reduce((sum, row) => sum + rowHeight(row), 0);
@@ -333,6 +324,14 @@ export function ApplicationMachineSidebar(props: {
   useKeyboardRoute((event) => {
     if (!focused() || event.eventType !== "press" || event.meta) return false;
     let key = event.name.toLowerCase();
+    if (key === "tab" && tabHeight()) {
+      setWorkingFocused((value) => !value);
+      event.preventDefault();
+      event.stopPropagation();
+      return true;
+    }
+    if (workingFocused() && tabHeight() && !["escape", "?", "question", "/", "a"].includes(key))
+      return false;
     if (event.ctrl && key === "d") key = "halfdown";
     else if (event.ctrl && key === "u") key = "halfup";
     else if (!event.ctrl && !event.meta)
@@ -345,7 +344,7 @@ export function ApplicationMachineSidebar(props: {
             l: "right",
             g: event.shift ? "end" : "home",
             "/": "search",
-            "?": "help",
+            [SIDEBAR_ACTIONS.help.key]: "help",
             question: "help",
           } as Record<string, string>
         )[key] ?? key;
@@ -368,9 +367,9 @@ export function ApplicationMachineSidebar(props: {
         "return",
         "space",
         "escape",
-        "a",
-        "r",
-        "d",
+        SIDEBAR_ACTIONS.add.key,
+        SIDEBAR_ACTIONS.retry.key,
+        SIDEBAR_ACTIONS.disconnect.key,
         "f",
       ].includes(key)
     )
@@ -378,7 +377,7 @@ export function ApplicationMachineSidebar(props: {
     event.preventDefault();
     event.stopPropagation();
     if (key === "help") {
-      setShowHelp(!showHelp());
+      props.onHelp?.("keyboard");
       return true;
     }
     if (key === "search") {
@@ -386,15 +385,11 @@ export function ApplicationMachineSidebar(props: {
       return true;
     }
     if (key === "escape") {
-      if (showHelp()) {
-        setShowHelp(false);
-        return true;
-      }
       setLocalFocused(false);
       props.model.onBlur?.();
       return true;
     }
-    if (key === "a") {
+    if (key === SIDEBAR_ACTIONS.add.key) {
       props.model.onAddMachine?.();
       return true;
     }
@@ -409,9 +404,9 @@ export function ApplicationMachineSidebar(props: {
         );
       return true;
     }
-    if (key === "r" || key === "d") {
+    if (key === SIDEBAR_ACTIONS.retry.key || key === SIDEBAR_ACTIONS.disconnect.key) {
       if (row.group.id !== "local") {
-        if (key === "r") props.model.onRetryMachine?.(row.group.id);
+        if (key === SIDEBAR_ACTIONS.retry.key) props.model.onRetryMachine?.(row.group.id);
         else props.model.onDisconnectMachine?.(row.group.id);
       }
       return true;
@@ -460,43 +455,43 @@ export function ApplicationMachineSidebar(props: {
       overflow="hidden"
     >
       <box height={1} flexShrink={0} flexDirection="row" overflow="hidden">
-        <text fg={props.theme.roles.text.secondary}>{" Machines"}</text>
+        <text fg={props.theme.roles.text.secondary}>
+          {tabHeight() ? " Workspace" : " Machines"}
+        </text>
         <box flexGrow={1} />
         <Show when={props.model.tabs?.().length && props.width >= 28}>
-          <KeyHint theme={props.theme} keys="F9" label="Tabs" quiet />
+          <KeyHint
+            theme={props.theme}
+            keys={CHROME_ACTIONS.tabs.keys}
+            label={CHROME_ACTIONS.tabs.label}
+            quiet
+          />
         </Show>
         <KeyHint
           theme={props.theme}
-          keys="?"
-          label={props.width >= 20 ? "Help" : undefined}
+          keys={SIDEBAR_ACTIONS.help.keys}
+          label={props.width >= 20 ? SIDEBAR_ACTIONS.help.label : undefined}
           quiet
           button
-          onPress={() => setShowHelp(!showHelp())}
+          onPress={() => props.onHelp?.("mouse")}
         />
       </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)}
-            />
-            <TuiButton
-              theme={props.theme}
-              label="×"
-              size="compact"
-              width={3}
-              onPress={() => props.model.onCloseTab?.(tab.key)}
-            />
-          </box>
-        )}
-      </For>
+      <Show when={tabHeight() > 0}>
+        <WorkingSessions
+          theme={props.theme}
+          rows={props.model.tabs?.() ?? []}
+          width={props.width}
+          height={tabHeight()}
+          focused={focused() && workingFocused()}
+          onFocus={() => {
+            setWorkingFocused(true);
+            setLocalFocused(true);
+            props.model.onFocus?.();
+          }}
+          onOpen={(key) => props.model.onOpenTab?.(key)}
+          onClose={props.model.onCloseTab}
+        />
+      </Show>
       <scrollbox
         ref={(value) => {
           scroll = value;
@@ -619,7 +614,9 @@ export function ApplicationMachineSidebar(props: {
                             : `${connectionDetail(row.group)}${row.group.agents?.length ? " ?" : ""}`
                   }
                   selected={Boolean((row.session || row.agent) && active(row))}
-                  focused={Boolean(focused() && row.key === selectedKey())}
+                  focused={Boolean(
+                    focused() && !(workingFocused() && tabHeight()) && row.key === selectedKey(),
+                  )}
                   status={
                     (row.agent?.attention ?? activity(row).kind === "attention")
                       ? "blocked"
@@ -657,18 +654,11 @@ 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}
-          keys="F6"
-          label="Sessions"
+          keys={CHROME_ACTIONS.sessions.keys}
+          label="Browse all sessions"
           width={props.width}
           quiet
           button
@@ -678,8 +668,8 @@ export function ApplicationMachineSidebar(props: {
       <Show when={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)})`}
+          keys={CHROME_ACTIONS.attention.keys}
+          label={`${CHROME_ACTIONS.attention.label} (${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
@@ -696,8 +686,8 @@ export function ApplicationMachineSidebar(props: {
             </text>
             <KeyHint
               theme={props.theme}
-              keys="R"
-              label="Retry connection"
+              keys={SIDEBAR_ACTIONS.retry.keys}
+              label={SIDEBAR_ACTIONS.retry.label}
               width={props.width}
               quiet
               button
@@ -705,8 +695,8 @@ export function ApplicationMachineSidebar(props: {
             />
             <KeyHint
               theme={props.theme}
-              keys="D"
-              label="Disconnect"
+              keys={SIDEBAR_ACTIONS.disconnect.keys}
+              label={SIDEBAR_ACTIONS.disconnect.label}
               width={props.width}
               quiet
               button
@@ -719,8 +709,8 @@ export function ApplicationMachineSidebar(props: {
         {(add) => (
           <KeyHint
             theme={props.theme}
-            keys="A"
-            label="Add machine"
+            keys={SIDEBAR_ACTIONS.add.keys}
+            label={SIDEBAR_ACTIONS.add.label}
             width={props.width}
             quiet
             button

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;
@@ -66,9 +66,11 @@ export function createApplicationPaletteCommandOwner(options: {
     confirmed = false,
   ): void => {
     if (busy()) return;
-    if (command === "shortcuts" || command === "whats-new") {
+    if (command === "help" || command === "shortcuts" || command === "whats-new") {
       setCloseArmed(false);
-      setReferencePage(command === "shortcuts" ? "shortcuts" : "changes");
+      setReferencePage(
+        command === "help" ? "help" : command === "shortcuts" ? "shortcuts" : "changes",
+      );
       return;
     }
     if (command === "switch-session") {

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

@@ -26,6 +26,7 @@ const BASE_COMMANDS: readonly ApplicationPaletteCommand[] = [
   "close-pane",
   "zoom-pane",
   "appearance",
+  "help",
   "shortcuts",
   "whats-new",
   "switch-session",

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

@@ -7,6 +7,7 @@ import { OverlaySearchField } from "../ui/overlay-search-field.tsx";
 import { overlaySurfaceMetrics } from "../ui/overlay-model.ts";
 import { useKeyboardRoute, usePasteRoute } from "../ui/keyboard-router.tsx";
 import { clipTerminal, terminalDisplayWidth } from "../terminal-text.ts";
+import { CHROME_ACTIONS } from "../workspace/application-action-descriptions.ts";
 import { APPLICATION_SHORTCUTS } from "../workspace/application-shortcuts.ts";
 import { commandSearchMatch } from "../workspace/application-command-description.ts";
 import {
@@ -15,6 +16,24 @@ import {
 } from "./application-pane-rename-input.ts";
 
 const releases = [
+  {
+    version: "2.9.0-beta.41",
+    lines: [
+      "Working sessions with clear machine/server context and shared status icons.",
+      "New-result markers for observed background completions; open to acknowledge.",
+      "Tab switches sidebar sections. Browse all sessions with F6.",
+      "Using tmux-ide in Commands, with reversible Help and shortcut navigation.",
+    ],
+  },
+  {
+    version: "2.9.0-beta.40",
+    lines: [
+      "Using tmux-ide: a scrollable guide to machines, sessions and agents.",
+      "Home filters for All, Working and Needs attention, with a clear Open action.",
+      "Consistent shortcut buttons in the sidebar and footer.",
+      "Segmented pane headers and dimmed backgrounds for dialogs.",
+    ],
+  },
   {
     version: "2.9.0-beta.30",
     lines: [
@@ -44,7 +63,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 +97,55 @@ 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: [
+                  [
+                    CHROME_ACTIONS.home,
+                    CHROME_ACTIONS.terminals,
+                    CHROME_ACTIONS.sessions,
+                    CHROME_ACTIONS.attention,
+                  ]
+                    .map((action) => `${action.keys} ${action.label}`)
+                    .join(" · "),
+                  `${CHROME_ACTIONS.sidebar.keys} shows or hides the sidebar. ${CHROME_ACTIONS.commands.keys} 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) {
@@ -115,7 +182,8 @@ export function ApplicationReferenceSheet(props: {
     const key = event.name.toLowerCase();
     if (key === "escape") props.onClose();
     else if (key === "tab") {
-      setPage(page() === "shortcuts" ? "changes" : "shortcuts");
+      const pages = ["help", "shortcuts", "changes"] as const;
+      setPage(pages[(pages.indexOf(page()) + (event.shift ? 2 : 1)) % pages.length]!);
       setOffset(0);
     } else if (key === "down") move(1);
     else if (key === "up") move(-1);
@@ -139,8 +207,14 @@ 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={`Tab ${page() === "help" ? "shortcuts" : page() === "shortcuts" ? "what’s new" : "help"} · ↑↓ scroll · Esc back`}
       zIndex={100}
       onDismiss={props.onClose}
     >
@@ -160,6 +234,7 @@ export function ApplicationReferenceSheet(props: {
         flexDirection="column"
         overflow="hidden"
         onMouseScroll={(event) => {
+          if (!event.scroll) return;
           event.preventDefault();
           move(event.scroll.direction === "up" ? -3 : 3);
         }}

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-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);
@@ -344,7 +344,8 @@ export function MinimalPalette(props: {
                           onPress={() => {
                             props.onSelect?.(row().index);
                             const command = row().command;
-                            if (command === "shortcuts" || command === "whats-new")
+                            if (command === "help") openSheet("help");
+                            else if (command === "shortcuts" || command === "whats-new")
                               openSheet(PALETTE_REFERENCE_COMMANDS[command].page);
                             else props.onActivate(command);
                           }}

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/agent-status-marker.ts

@@ -2,6 +2,8 @@ import { batch, createEffect, createSignal, onCleanup } from "solid-js";
 import type { AgentActivity } from "@tmux-ide/contracts";
 import type { SemanticThemeSnapshot } from "../theme.ts";
 
+import { UI_ICONS } from "./icons.ts";
+
 const FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 const listeners = new Set<(frame: number) => void>();
 let timer: ReturnType<typeof setInterval> | undefined;
@@ -46,24 +48,24 @@ export function createAgentStatusMarker(options: {
     if (animated()) onCleanup(subscribe(setCurrent));
   });
   return () => {
-    if (options.unavailable?.()) return "·";
-    if (options.attention?.()) return "!";
+    if (options.unavailable?.()) return UI_ICONS.unknown;
+    if (options.attention?.()) return UI_ICONS.attention;
     switch (options.status()) {
       case "running":
       case "working":
         return animated() ? FRAMES[current()]! : options.theme().glyphs.active;
       case "waiting":
       case "blocked":
-        return "!";
+        return UI_ICONS.attention;
       case "complete":
       case "done":
         return options.theme().glyphs.check;
       case "failed":
-        return "×";
+        return UI_ICONS.failed;
       case "idle":
         return options.theme().glyphs.inactive;
       default:
-        return "·";
+        return UI_ICONS.unknown;
     }
   };
 }

package/packages/daemon/src/tui/mirror/ui/icons.ts

@@ -0,0 +1,9 @@
+/** Shared semantic glyphs; theme-specific active/idle/check glyphs stay in the theme. */
+export const UI_ICONS = {
+  attention: "!",
+  failed: "×",
+  unknown: "·",
+  offline: "○",
+  newResult: "•",
+  close: "×",
+} as const;

package/packages/daemon/src/tui/mirror/ui/index.ts

@@ -57,3 +57,7 @@ export {
   type StatusBarSegmentProps,
   type StatusSegmentProps,
 } from "./status-bar.tsx";
+
+export { UI_ICONS } from "./icons.ts";
+export { SessionRow, sessionRowStatus, type SessionRowModel } from "./session-row.tsx";
+export { WorkingSessions } from "./working-sessions.tsx";