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

package/packages/daemon/src/tui/mirror/ui/session-row.tsx

@@ -0,0 +1,122 @@
+/* @jsxImportSource @opentui/solid */
+import type { AgentActivity } from "@tmux-ide/contracts";
+import { Show } from "solid-js";
+import type { SemanticThemeSnapshot } from "../theme.ts";
+import { clipTerminal } from "../terminal-text.ts";
+import { NavigationRow } from "./navigation-row.tsx";
+import { TuiButton } from "./button.tsx";
+import { componentPalette } from "./state.ts";
+import { createAgentStatusMarker } from "./agent-status-marker.ts";
+import { UI_ICONS } from "./icons.ts";
+
+export interface SessionRowModel {
+  readonly key: string;
+  readonly label: string;
+  readonly hostLabel: string;
+  readonly serverLabel?: string;
+  readonly active: boolean;
+  readonly available: boolean;
+  readonly activity?: AgentActivity;
+  readonly attention?: boolean;
+  readonly unread?: boolean;
+}
+export function sessionRowStatus(row: SessionRowModel) {
+  if (!row.available) return "offline";
+  if (row.attention || row.activity === "waiting") return "needs input";
+  if (row.activity === "failed") return "failed";
+  if (row.activity === "running") return "working";
+  if (row.unread) return "new result";
+  if (!row.activity || row.activity === "disconnected") return "unknown";
+  return "idle";
+}
+/** Shared two-line session identity. Pure presentation: opening/closing belongs to its owner. */
+export function SessionRow(props: {
+  theme: SemanticThemeSnapshot;
+  row: SessionRowModel;
+  width: number;
+  selected?: boolean;
+  focused?: boolean;
+  onOpen: () => void;
+  onClose?: () => void;
+}) {
+  const marker = createAgentStatusMarker({
+    theme: () => props.theme,
+    status: () => (sessionRowStatus(props.row) === "idle" ? "idle" : props.row.activity),
+    attention: () => !!props.row.attention,
+    unavailable: () => !props.row.available,
+  });
+  const tone = () => {
+    const status = sessionRowStatus(props.row);
+    return status === "needs input" || status === "failed"
+      ? ("blocked" as const)
+      : status === "working"
+        ? ("working" as const)
+        : status === "new result"
+          ? ("done" as const)
+          : ("neutral" as const);
+  };
+  const glyph = () =>
+    !props.row.available
+      ? UI_ICONS.offline
+      : sessionRowStatus(props.row) === "new result"
+        ? UI_ICONS.newResult
+        : marker();
+  const palette = () =>
+    componentPalette(props.theme, {
+      selected: props.selected,
+      focused: props.focused,
+      disabled: !props.row.available,
+    });
+  const detail = () =>
+    `${props.row.hostLabel} · ${props.row.serverLabel ?? "default"}${props.row.active ? " · current" : ""}`;
+  return (
+    <box
+      id={`session-row:${props.row.key}`}
+      width={props.width}
+      height={2}
+      flexDirection="column"
+      overflow="hidden"
+    >
+      <box height={1} flexDirection="row">
+        <NavigationRow
+          theme={props.theme}
+          id={`fleet-tab:${props.row.key}`}
+          width={Math.max(1, props.width - (props.onClose ? 3 : 0))}
+          label={props.row.label}
+          tone={tone()}
+          marker={glyph()}
+          detail={sessionRowStatus(props.row)}
+          selected={props.selected}
+          focused={props.focused}
+          disabled={!props.row.available}
+          onActivate={props.onOpen}
+        />
+        <Show when={props.onClose}>
+          <TuiButton
+            theme={props.theme}
+            label={UI_ICONS.close}
+            size="compact"
+            width={3}
+            onPress={props.onClose}
+          />
+        </Show>
+      </box>
+      <box
+        height={1}
+        backgroundColor={palette().background}
+        onMouseDown={(event) => {
+          if (event.button !== 0 || !props.row.available) return;
+          event.preventDefault();
+          event.stopPropagation();
+          props.onOpen();
+        }}
+      >
+        <text
+          fg={props.selected || props.focused ? palette().foreground : props.theme.roles.text.muted}
+        >
+          {clipTerminal(`  ${detail()}`, props.width)}
+        </text>
+      </box>
+    </box>
+  );
+}

package/packages/daemon/src/tui/mirror/ui/working-sessions.tsx

@@ -0,0 +1,99 @@
+/* @jsxImportSource @opentui/solid */
+import { createEffect, createMemo, createSignal, For, Show } from "solid-js";
+import type { SemanticThemeSnapshot } from "../theme.ts";
+import { SessionRow, type SessionRowModel } from "./session-row.tsx";
+import { useKeyboardRoute } from "./keyboard-router.tsx";
+
+/** Bounded working-set list, independent of fleet discovery and terminal ownership. */
+export function WorkingSessions(props: {
+  theme: SemanticThemeSnapshot;
+  rows: readonly SessionRowModel[];
+  width: number;
+  height: number;
+  focused: boolean;
+  onFocus?: () => void;
+  onOpen: (key: string) => void;
+  onClose?: (key: string) => void;
+}) {
+  const [selected, setSelected] = createSignal<string | null>(null);
+  const index = () =>
+    Math.max(
+      0,
+      props.rows.findIndex((row) => row.key === selected()),
+    );
+  const capacity = () => Math.max(0, Math.floor((props.height - 1) / 3));
+  const start = () => Math.max(0, index() - capacity() + 1);
+  const visible = () => props.rows.slice(start(), start() + capacity()).map((row) => row.key);
+  createEffect(() => {
+    if (!props.rows.some((row) => row.key === selected()))
+      setSelected((props.rows.find((row) => row.active) ?? props.rows[0])?.key ?? null);
+    if (!props.focused)
+      setSelected((props.rows.find((row) => row.active) ?? props.rows[index()])?.key ?? null);
+  });
+  const open = (key: string) => {
+    setSelected(key);
+    props.onFocus?.();
+    if (props.rows.find((row) => row.key === key)?.available) props.onOpen(key);
+  };
+  useKeyboardRoute((event) => {
+    if (!props.focused || event.eventType !== "press" || event.ctrl || event.meta) return false;
+    const key = event.name.toLowerCase();
+    if (!["up", "down", "j", "k", "home", "end", "enter", "return", "space"].includes(key))
+      return false;
+    event.preventDefault();
+    event.stopPropagation();
+    if (!props.rows.length || !capacity()) return true;
+    if (["enter", "return", "space"].includes(key)) open(props.rows[index()]!.key);
+    else {
+      const next =
+        key === "home"
+          ? 0
+          : key === "end"
+            ? props.rows.length - 1
+            : Math.max(
+                0,
+                Math.min(props.rows.length - 1, index() + (["up", "k"].includes(key) ? -1 : 1)),
+              );
+      setSelected(props.rows[next]!.key);
+    }
+    return true;
+  });
+  return (
+    <box
+      width={props.width}
+      height={props.height}
+      flexShrink={0}
+      flexDirection="column"
+      overflow="hidden"
+    >
+      <text height={1} fg={props.theme.roles.text.secondary}>
+        {props.focused ? <strong> Working sessions</strong> : " Working sessions"}
+      </text>
+      <Show
+        when={props.rows.length}
+        fallback={<text fg={props.theme.roles.text.muted}> No working sessions yet.</text>}
+      >
+        <For each={visible()}>
+          {(key) => {
+            const row = createMemo<SessionRowModel>(
+              (previous) => props.rows.find((row) => row.key === key) ?? previous,
+              props.rows.find((row) => row.key === key)!,
+            );
+            return (
+              <box height={3} flexShrink={0} flexDirection="column">
+                <SessionRow
+                  theme={props.theme}
+                  row={row()}
+                  width={props.width}
+                  selected={props.focused ? selected() === key : row().active}
+                  onOpen={() => open(key)}
+                  onClose={props.onClose ? () => props.onClose?.(key) : undefined}
+                />
+              </box>
+            );
+          }}
+        </For>
+      </Show>
+    </box>
+  );
+}

package/packages/daemon/src/tui/mirror/workspace/application-action-descriptions.ts

@@ -0,0 +1,52 @@
+/** Shared presentation/binding metadata. Context owners still decide availability and execution. */
+export const HOME_ACTIONS = {
+  search: { key: "/", keys: "/", label: "Search", description: "Find an agent or workspace" },
+  machine: { key: "f", keys: "f", label: "Machines", description: "Cycle machine filter" },
+  all: { key: "0", keys: "0", label: "All", description: "Show all agent activity", value: "all" },
+  working: {
+    key: "w",
+    keys: "w",
+    label: "Working",
+    description: "Show working agents",
+    value: "working",
+  },
+  attention: {
+    key: "a",
+    keys: "a",
+    label: "Needs attention",
+    description: "Toggle attention filter",
+    value: "attention",
+  },
+  open: { key: "enter", keys: "Enter", label: "open", description: "Open selected agent" },
+} as const;
+export const HOME_ACTIVITY_ACTIONS = [
+  HOME_ACTIONS.all,
+  HOME_ACTIONS.working,
+  HOME_ACTIONS.attention,
+] as const;
+
+export const CHROME_ACTIONS = {
+  home: { keys: "F1", label: "Home" },
+  terminals: { keys: "F2", label: "Terminals" },
+  commands: { keys: "F5", label: "Commands" },
+  sessions: { keys: "F6", label: "Sessions" },
+  attention: { keys: "F7", label: "Attention" },
+  tabs: { keys: "F9", label: "Tabs" },
+  sidebar: { keys: "F10", label: "Show / hide sidebar" },
+} as const;
+export const SIDEBAR_ACTIONS = {
+  help: { key: "?", keys: "?", label: "Help", description: "Using tmux-ide" },
+  retry: {
+    key: "r",
+    keys: "R",
+    label: "Retry connection",
+    description: "Retry selected machine connection",
+  },
+  disconnect: {
+    key: "d",
+    keys: "D",
+    label: "Disconnect",
+    description: "Disconnect selected machine",
+  },
+  add: { key: "a", keys: "A", label: "Add machine", description: "Add an SSH machine" },
+} as const;

package/packages/daemon/src/tui/mirror/workspace/application-command-description.ts

@@ -1,3 +1,4 @@
+import { CHROME_ACTIONS } from "./application-action-descriptions.ts";
 import type { TmuxServerScope } from "@tmux-ide/contracts";
 import { fuzzyTermsMatch as commandSearchMatch } from "../../team/fuzzy.ts";
 export { fuzzyTermsMatch as commandSearchMatch } from "../../team/fuzzy.ts";
@@ -40,6 +41,7 @@ export type ApplicationPaletteCommand =
   | "hide-sidebar"
   | "show-sidebar"
   | "switch-session"
+  | "help"
   | "shortcuts"
   | "whats-new"
   | "home"
@@ -66,18 +68,20 @@ export function applicationCommandDescription(command: ApplicationPaletteCommand
   detail: string;
   shortcut?: string;
 } {
+  if (command === "help")
+    return { id: command, label: "Using tmux-ide", detail: "Help and getting started" };
   if (command === "hide-sidebar" || command === "show-sidebar")
     return {
       id: command,
       label: command === "hide-sidebar" ? "Hide sidebar" : "Show sidebar",
       detail: "Terminal layout",
-      shortcut: "F10",
+      shortcut: CHROME_ACTIONS.sidebar.keys,
     };
   if (command === "switch-session")
     return {
       id: command,
       label: "Switch session",
-      shortcut: "F6",
+      shortcut: CHROME_ACTIONS.sessions.keys,
       detail: "Sessions across machines",
     };
   if (command === "shortcuts" || command === "whats-new")
@@ -133,7 +137,12 @@ export function applicationCommandDescription(command: ApplicationPaletteCommand
           ? "Zoom / unzoom pane"
           : undefined) ??
       (command === "home" ? "Home" : command === "terminals" ? "Terminals" : "New terminal window"),
-    shortcut: command === "home" ? "F1" : command === "terminals" ? "F2" : undefined,
+    shortcut:
+      command === "home"
+        ? CHROME_ACTIONS.home.keys
+        : command === "terminals"
+          ? CHROME_ACTIONS.terminals.keys
+          : undefined,
     detail:
       command === "home"
         ? "sessions and agent state"

package/packages/daemon/src/tui/mirror/workspace/application-shortcuts.ts

@@ -1,3 +1,8 @@
+import {
+  HOME_ACTIONS,
+  CHROME_ACTIONS,
+  SIDEBAR_ACTIONS,
+} from "./application-action-descriptions.ts";
 import { applicationCommandDescription } from "./application-command-description.ts";
 
 export interface ApplicationShortcut {
@@ -12,16 +17,23 @@ export const APPLICATION_SHORTCUTS: readonly ApplicationShortcut[] = [
     const description = applicationCommandDescription(command);
     return { category: "Application", label: description.label, keys: description.shortcut! };
   }),
-  { category: "Application", label: "Commands", keys: "F5" },
-  { category: "Application", label: "Show / hide sidebar", keys: "F10" },
-  { category: "Application", label: "Agent attention", keys: "F7" },
+  { category: "Application", ...CHROME_ACTIONS.commands },
+  { category: "Application", ...CHROME_ACTIONS.sidebar },
+  { category: "Application", ...CHROME_ACTIONS.attention },
   { category: "Application", label: "Sidebar / Sessions when hidden", keys: "Ctrl+G" },
   { category: "Terminals", label: "Open link", keys: "Shift+click" },
   { category: "Terminals", label: "Select and copy text", keys: "Shift+drag" },
-  { category: "Home", label: "Find an agent or workspace", keys: "/" },
-  { category: "Home", label: "Cycle machine filter", keys: "f" },
-  { category: "Home", label: "Toggle attention filter", keys: "a" },
-  { category: "Home", label: "Open selected agent", keys: "Enter" },
+  ...Object.values(HOME_ACTIONS).map((action) => ({
+    category: "Home",
+    label: action.description,
+    keys: action.keys,
+  })),
+  { category: "Sidebar (when focused)", label: "Switch working sessions / machines", keys: "Tab" },
+  ...Object.values(SIDEBAR_ACTIONS).map((action) => ({
+    category: "Sidebar (when focused)",
+    label: action.description,
+    keys: action.keys,
+  })),
   { category: "Command and session menus", label: "Search actions or sessions", keys: "Type" },
   { category: "Command and session menus", label: "Choose a result", keys: "↑ / ↓" },
   { category: "Command and session menus", label: "Activate selected result", keys: "Enter" },

package/packages/daemon/src/tui/mirror/workspace/palette-list-layout.ts

@@ -11,7 +11,7 @@ export function paletteSection(command: ApplicationPaletteCommand): string {
   if (command === "home" || command === "terminals") return "Navigation";
   if (command === "hide-sidebar" || command === "show-sidebar") return "Appearance";
   if (command === "appearance") return "Appearance";
-  if (command === "shortcuts" || command === "whats-new") return "Help";
+  if (command === "help" || command === "shortcuts" || command === "whats-new") return "Help";
   return "Panes";
 }