@towles/tool 0.0.109 → 0.0.111

package/{plugins/tt-agentboard → packages/agentboard}/apps/tui/src/index.tsx

@@ -13,124 +13,72 @@ import {
 } from "solid-js";
 import type { Accessor } from "solid-js";
 import { createStore, reconcile } from "solid-js/store";
-import { TextAttributes } from "@opentui/core";
 import type { MouseEvent } from "@opentui/core";
 
-import {
-  ensureServer,
-  SERVER_PORT,
-  SERVER_HOST,
-  loadConfig,
-  resolveTheme,
-  saveConfig,
-} from "@tt-agentboard/runtime";
+import { ensureServer, SERVER_PORT, SERVER_HOST, resolveTheme } from "@tt-agentboard/runtime";
 import type { ServerMessage, SessionData, ClientCommand, Theme } from "@tt-agentboard/runtime";
-import { TmuxClient } from "@tt-agentboard/mux-tmux";
 import { SessionCard } from "./components/SessionCard";
 import { DetailPanel } from "./components/DetailPanel";
 import { StatusBar } from "./components/StatusBar";
-
-// Detect tmux context (tmux only)
-type MuxContext = { type: "tmux"; sdk: TmuxClient; paneId: string } | { type: "none" };
-
-function detectMuxContext(): MuxContext {
-  if (process.env.TMUX_PANE && process.env.TMUX) {
-    return { type: "tmux", sdk: new TmuxClient(), paneId: process.env.TMUX_PANE };
-  }
-  return { type: "none" };
-}
+import { computeSessionStatusCounts } from "./session-status";
+import {
+  detectMuxContext,
+  refocusMainPane,
+  getClientTty,
+  getLocalSessionName,
+} from "./mux-context";
+import {
+  clampDetailPanelHeight,
+  getStoredDetailPanelHeight,
+  persistDetailPanelHeight,
+} from "./detail-panel-height";
+import {
+  SPINNERS,
+  BOLD,
+  DIM,
+  DEFAULT_DETAIL_PANEL_HEIGHT,
+  DIVIDER,
+  logResizeDebug,
+} from "./constants";
 
 const muxCtx = detectMuxContext();
 
-const SPINNERS = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-const BOLD = TextAttributes.BOLD;
-const DIM = TextAttributes.DIM;
-const DEFAULT_DETAIL_PANEL_HEIGHT = 10;
-const MIN_DETAIL_PANEL_HEIGHT = 4;
-const DIVIDER = "─".repeat(200);
-const RESIZE_DEBUG_LOG = "/tmp/agentboard-tui-resize.log";
-
 const TUI_DEBUG = !!process.env.TT_AGENTBOARD_DEBUG;
 
-function logResizeDebug(message: string, data?: Record<string, unknown>): void {
-  if (!TUI_DEBUG) return;
-  const ts = new Date().toISOString();
-  const extra = data ? ` ${JSON.stringify(data)}` : "";
-  try {
-    appendFileSync(RESIZE_DEBUG_LOG, `[${ts}] [pid:${process.pid}] ${message}${extra}\n`);
-  } catch {}
-}
-
-function clampDetailPanelHeight(height: number): number {
-  return Math.max(MIN_DETAIL_PANEL_HEIGHT, Math.round(height));
-}
-
-function getStoredDetailPanelHeight(sessionName: string): number {
-  const stored = loadConfig().detailPanelHeights?.[sessionName];
-  return typeof stored === "number" ? clampDetailPanelHeight(stored) : DEFAULT_DETAIL_PANEL_HEIGHT;
-}
-
-function persistDetailPanelHeight(sessionName: string, height: number): void {
-  const config = loadConfig();
-  saveConfig({
-    detailPanelHeights: {
-      ...(config.detailPanelHeights ?? {}),
-      [sessionName]: clampDetailPanelHeight(height),
-    },
-  });
-}
-
-/** Refocus the main (non-sidebar) pane after TUI capability detection finishes.
- *  This must happen from the TUI process — doing it from the server races with
- *  capability query responses and leaks escape sequences to the main pane. */
-function refocusMainPane() {
-  if (muxCtx.type === "tmux") {
-    try {
-      // Use the TUI's own pane ID to find its current window (handles stash restore
-      // where the pane may have moved to a different window than the original).
-      const windowId =
-        process.env.REFOCUS_WINDOW ||
-        Bun.spawnSync(["tmux", "display-message", "-t", muxCtx.paneId, "-p", "#{window_id}"], {
-          stdout: "pipe",
-          stderr: "pipe",
-        })
-          .stdout.toString()
-          .trim();
-      if (!windowId) return;
-      const r = Bun.spawnSync(
-        ["tmux", "list-panes", "-t", windowId, "-F", "#{pane_id} #{pane_title}"],
-        { stdout: "pipe", stderr: "pipe" },
-      );
-      const lines = r.stdout.toString().trim().split("\n");
-      const main = lines.find((l) => !l.includes("agentboard-sidebar"));
-      if (main) {
-        const paneId = main.split(" ")[0];
-        Bun.spawnSync(["tmux", "select-pane", "-t", paneId], { stdout: "pipe", stderr: "pipe" });
-      }
-    } catch {}
-  }
-}
-
-function getClientTty(): string {
-  if (muxCtx.type === "tmux") {
-    const { sdk, paneId } = muxCtx;
-    const sessName = sdk.display("#{session_name}", { target: paneId });
-    if (sessName) {
-      const clients = sdk.listClients();
-      const client = clients.find((c) => c.sessionName === sessName);
-      if (client) return client.tty;
+function KeyHints(props: {
+  hints: [string, string][];
+  palette: Accessor<Theme["palette"]>;
+  cols?: number;
+}) {
+  const cols = () => props.cols ?? 2;
+  const rows = () => {
+    const pairs: [string, string][][] = [];
+    for (let i = 0; i < props.hints.length; i += cols()) {
+      pairs.push(props.hints.slice(i, i + cols()));
     }
-    return sdk.getClientTty();
-  }
-  return "";
-}
+    return pairs;
+  };
 
-function getLocalSessionName(): string | null {
-  if (muxCtx.type === "tmux") {
-    const sessionName = muxCtx.sdk.display("#{session_name}", { target: muxCtx.paneId });
-    return sessionName || null;
-  }
-  return null;
+  return (
+    <box flexDirection="column">
+      <For each={rows()}>
+        {(row) => (
+          <box flexDirection="row">
+            <For each={row}>
+              {([key, label]) => (
+                <box width={16} flexShrink={0}>
+                  <text>
+                    <span style={{ fg: props.palette().overlay0 }}>{key}</span>
+                    <span style={{ fg: props.palette().overlay1 }}>{` ${label}`}</span>
+                  </text>
+                </box>
+              )}
+            </For>
+          </box>
+        )}
+      </For>
+    </box>
+  );
 }
 
 function App() {
@@ -148,6 +96,7 @@ function App() {
   const [connected, setConnected] = createSignal(false);
   const [spinIdx, setSpinIdx] = createSignal(0);
   const [detailPanelHeight, setDetailPanelHeight] = createSignal(DEFAULT_DETAIL_PANEL_HEIGHT);
+  const [preferredEditor, setPreferredEditor] = createSignal("code");
   const [isDetailResizeHover, setIsDetailResizeHover] = createSignal(false);
   const [isDetailResizing, setIsDetailResizing] = createSignal(false);
   const detailPanelSessionName = createMemo(() => focusedSession() ?? mySession());
@@ -161,12 +110,12 @@ function App() {
   const [modal, setModal] = createSignal<"none" | "confirm-kill" | "help">("none");
   const [killTarget, setKillTarget] = createSignal<string | null>(null);
 
-  const [clientTty, setClientTty] = createSignal(getClientTty());
+  const [clientTty, setClientTty] = createSignal(getClientTty(muxCtx));
   let ws: WebSocket | null = null;
   let startupFocusSynced = false;
   let detailResizeStartY = 0;
   let detailResizeStartHeight = DEFAULT_DETAIL_PANEL_HEIGHT;
-  const startupSessionName = getLocalSessionName();
+  const startupSessionName = getLocalSessionName(muxCtx);
 
   const focusedData = createMemo(() => sessions.find((s) => s.name === focusedSession()) ?? null);
 
@@ -186,7 +135,7 @@ function App() {
   }
 
   function reIdentify() {
-    const sessionName = getLocalSessionName();
+    const sessionName = getLocalSessionName(muxCtx);
     if (!sessionName) return;
 
     if (muxCtx.type === "tmux") {
@@ -274,14 +223,15 @@ function App() {
   }
 
   function beginDetailResize(event: MouseEvent) {
-    logResizeDebug("beginDetailResize", {
-      button: event.button,
-      x: event.x,
-      y: event.y,
-      currentHeight: detailPanelHeight(),
-      session: detailPanelSessionName(),
-      target: event.target?.id ?? null,
-    });
+    if (TUI_DEBUG)
+      logResizeDebug("beginDetailResize", {
+        button: event.button,
+        x: event.x,
+        y: event.y,
+        currentHeight: detailPanelHeight(),
+        session: detailPanelSessionName(),
+        target: event.target?.id ?? null,
+      });
     if (event.button !== 0) return;
     (renderer as any).setCapturedRenderable?.(event.target ?? undefined);
     detailResizeStartY = event.y;
@@ -291,36 +241,39 @@ function App() {
   }
 
   function handleDetailResizeDrag(event: MouseEvent) {
-    logResizeDebug("handleDetailResizeDrag", {
-      x: event.x,
-      y: event.y,
-      isResizing: isDetailResizing(),
-      startY: detailResizeStartY,
-      startHeight: detailResizeStartHeight,
-      currentHeight: detailPanelHeight(),
-      session: detailPanelSessionName(),
-    });
+    if (TUI_DEBUG)
+      logResizeDebug("handleDetailResizeDrag", {
+        x: event.x,
+        y: event.y,
+        isResizing: isDetailResizing(),
+        startY: detailResizeStartY,
+        startHeight: detailResizeStartHeight,
+        currentHeight: detailPanelHeight(),
+        session: detailPanelSessionName(),
+      });
     if (!isDetailResizing()) return;
     const delta = detailResizeStartY - event.y;
     const nextHeight = clampDetailPanelHeight(detailResizeStartHeight + delta);
     setDetailPanelHeight(nextHeight);
-    logResizeDebug("handleDetailResizeDrag:applied", {
-      delta,
-      nextHeight,
-      session: detailPanelSessionName(),
-    });
+    if (TUI_DEBUG)
+      logResizeDebug("handleDetailResizeDrag:applied", {
+        delta,
+        nextHeight,
+        session: detailPanelSessionName(),
+      });
     event.stopPropagation();
   }
 
   function endDetailResize(event?: MouseEvent) {
-    logResizeDebug("endDetailResize", {
-      x: event?.x,
-      y: event?.y,
-      isResizing: isDetailResizing(),
-      currentHeight: detailPanelHeight(),
-      session: detailPanelSessionName(),
-      target: event?.target?.id ?? null,
-    });
+    if (TUI_DEBUG)
+      logResizeDebug("endDetailResize", {
+        x: event?.x,
+        y: event?.y,
+        isResizing: isDetailResizing(),
+        currentHeight: detailPanelHeight(),
+        session: detailPanelSessionName(),
+        target: event?.target?.id ?? null,
+      });
     if (!isDetailResizing()) return;
     (renderer as any).setCapturedRenderable?.(undefined);
     setIsDetailResizing(false);
@@ -329,10 +282,11 @@ function App() {
     const sessionName = detailPanelSessionName();
     if (sessionName) {
       persistDetailPanelHeight(sessionName, detailPanelHeight());
-      logResizeDebug("endDetailResize:persisted", {
-        session: sessionName,
-        height: detailPanelHeight(),
-      });
+      if (TUI_DEBUG)
+        logResizeDebug("endDetailResize:persisted", {
+          session: sessionName,
+          height: detailPanelHeight(),
+        });
     }
 
     event?.stopPropagation();
@@ -353,13 +307,25 @@ function App() {
     });
   }
 
-  onMount(() => {
-    logResizeDebug("mount", {
-      startupSessionName,
-      localSessionName: getLocalSessionName(),
-      muxType: muxCtx.type,
-      tmuxPane: process.env.TMUX_PANE ?? null,
+  function openInEditor() {
+    const data = focusedData();
+    if (!data?.dir) return;
+    const editor = preferredEditor();
+    Bun.spawn([editor, data.dir], {
+      stdout: "ignore",
+      stderr: "ignore",
+      stdin: "ignore",
     });
+  }
+
+  onMount(() => {
+    if (TUI_DEBUG)
+      logResizeDebug("mount", {
+        startupSessionName,
+        localSessionName: getLocalSessionName(muxCtx),
+        muxType: muxCtx.type,
+        tmuxPane: process.env.TMUX_PANE ?? null,
+      });
     // Refocus the main pane once terminal capability detection finishes.
     // This avoids the race where the server refocuses too early and capability
     // responses leak as garbage text into the main pane.
@@ -367,7 +333,7 @@ function App() {
     const doStartupRefocus = () => {
       if (startupRefocused) return;
       startupRefocused = true;
-      refocusMainPane();
+      refocusMainPane(muxCtx);
     };
     renderer.on("capabilities", doStartupRefocus);
     // Fallback: if no capability response arrives within 2s, refocus anyway
@@ -412,6 +378,7 @@ function App() {
             setFocusedSession(startupFocus);
             setCurrentSession(msg.currentSession);
             setTheme(resolveTheme(msg.theme));
+            if (msg.preferredEditor) setPreferredEditor(msg.preferredEditor);
           } else if (msg.type === "focus") {
             setFocusedSession(msg.focusedSession);
             setCurrentSession(msg.currentSession);
@@ -421,13 +388,17 @@ function App() {
 
             if (!startupFocusSynced && sessions.some((session) => session.name === msg.name)) {
               startupFocusSynced = true;
+              const oldFocus = focusedSession();
               setFocusedSession(msg.name);
-              if (focusedSession() !== msg.name) {
+              if (oldFocus !== msg.name) {
                 startupFocusToPublish = msg.name;
               }
             }
           } else if (msg.type === "re-identify") {
             reIdentify();
+          } else if (msg.type === "quit") {
+            if (ws) ws.close();
+            renderer.destroy();
           }
         });
 
@@ -443,17 +414,6 @@ function App() {
     };
 
     onCleanup(() => socket.close());
-
-    // Listen for quit messages from server
-    socket.addEventListener("message", (event) => {
-      try {
-        const msg = JSON.parse(event.data as string);
-        if (msg.type === "quit") {
-          if (ws) ws.close();
-          renderer.destroy();
-        }
-      } catch {}
-    });
   });
 
   const hasRunning = createMemo(() => sessions.some((s) => s.agentState?.status === "running"));
@@ -470,19 +430,21 @@ function App() {
     const sessionName = detailPanelSessionName();
     if (!sessionName) return;
     const storedHeight = getStoredDetailPanelHeight(sessionName);
-    logResizeDebug("loadStoredDetailPanelHeight", {
-      session: sessionName,
-      storedHeight,
-    });
+    if (TUI_DEBUG)
+      logResizeDebug("loadStoredDetailPanelHeight", {
+        session: sessionName,
+        storedHeight,
+      });
     setDetailPanelHeight(storedHeight);
   });
 
   createEffect(() => {
-    logResizeDebug("detailPanelHeight:changed", {
-      height: detailPanelHeight(),
-      session: detailPanelSessionName(),
-      isResizing: isDetailResizing(),
-    });
+    if (TUI_DEBUG)
+      logResizeDebug("detailPanelHeight:changed", {
+        height: detailPanelHeight(),
+        session: detailPanelSessionName(),
+        isResizing: isDetailResizing(),
+      });
   });
 
   useKeyboard((key) => {
@@ -581,9 +543,6 @@ function App() {
       case "r":
         send({ type: "refresh" });
         break;
-      case "t":
-        // reserved — was theme picker
-        break;
       case "u":
         send({ type: "show-all-sessions" });
         break;
@@ -608,8 +567,10 @@ function App() {
         }
         break;
       }
+      case "e":
+        openInEditor();
+        break;
       case "n":
-      case "c":
         createNewSession();
         break;
       case "?":
@@ -635,6 +596,7 @@ function App() {
   );
 
   const unseenCount = createMemo(() => sessions.filter((s) => s.unseen).length);
+  const sessionStatusCounts = createMemo(() => computeSessionStatusCounts(sessions));
 
   const isFocused = createSelector(focusedSession);
 
@@ -646,6 +608,7 @@ function App() {
         runningCount={runningAgentCount()}
         errorCount={errorAgentCount()}
         unseenCount={unseenCount()}
+        sessionStatusCounts={sessionStatusCounts()}
         theme={theme}
       />
 
@@ -722,30 +685,32 @@ function App() {
         <Show
           when={panelFocus() === "sessions"}
           fallback={
-            <text>
-              <span style={{ fg: P().overlay0 }}>{"←"}</span>
-              <span style={{ fg: P().overlay1 }}>{" back  "}</span>
-              <span style={{ fg: P().overlay0 }}>{"⏎"}</span>
-              <span style={{ fg: P().overlay1 }}>{" focus  "}</span>
-              <span style={{ fg: P().overlay0 }}>{"d"}</span>
-              <span style={{ fg: P().overlay1 }}>{" dismiss  "}</span>
-              <span style={{ fg: P().overlay0 }}>{"x"}</span>
-              <span style={{ fg: P().overlay1 }}>{" kill"}</span>
-            </text>
+            <KeyHints
+              palette={P}
+              hints={[
+                ["←", "back"],
+                ["⏎", "focus"],
+                ["d", "dismiss"],
+                ["x", "kill"],
+              ]}
+            />
           }
         >
-          <text>
-            <span style={{ fg: P().overlay0 }}>{"⇥"}</span>
-            <span style={{ fg: P().overlay1 }}>{" cycle  "}</span>
-            <span style={{ fg: P().overlay0 }}>{"⏎"}</span>
-            <span style={{ fg: P().overlay1 }}>{" go  "}</span>
-            <span style={{ fg: P().overlay0 }}>{"→"}</span>
-            <span style={{ fg: P().overlay1 }}>{" detail  "}</span>
-            <span style={{ fg: P().overlay0 }}>{"d"}</span>
-            <span style={{ fg: P().overlay1 }}>{" hide  "}</span>
-            <span style={{ fg: P().overlay0 }}>{"x"}</span>
-            <span style={{ fg: P().overlay1 }}>{" kill"}</span>
-          </text>
+          <KeyHints
+            palette={P}
+            hints={[
+              ["⇥", "cycle"],
+              ["⏎", "go"],
+              ["→", "select"],
+              ["n", "new"],
+              ["e", "edit"],
+              ["d", "hide"],
+              ["x", "kill"],
+              ["r", "refresh"],
+              ["q", "quit"],
+              ["?", "help"],
+            ]}
+          />
         </Show>
       </box>
 
@@ -796,24 +761,31 @@ function App() {
 
 // --- Help Overlay ---
 
+const HELP_KEYS: [string, string][] = [
+  ["j/k ↑↓", "Move focus"],
+  ["Enter", "Switch to session"],
+  ["1-9", "Jump to session"],
+  ["Tab", "Cycle sessions"],
+  ["n", "New session"],
+  ["e", "Open in editor"],
+  ["d", "Hide session"],
+  ["x", "Kill session"],
+  ["r", "Refresh"],
+  ["u", "Show all sessions"],
+  ["→/l", "Select panel"],
+  ["←/h/Esc", "Back to sessions"],
+  ["Alt+↑↓", "Reorder sessions"],
+  ["q", "Quit"],
+];
+
+const HELP_COLS = 2;
+const HELP_ROWS = Math.ceil(HELP_KEYS.length / HELP_COLS);
+const HELP_COLUMNS = Array.from({ length: HELP_COLS }, (_, c) =>
+  HELP_KEYS.slice(c * HELP_ROWS, (c + 1) * HELP_ROWS),
+);
+
 function HelpOverlay(props: { palette: Accessor<Theme["palette"]>; onClose: () => void }) {
   const P = () => props.palette();
-  const keys: [string, string][] = [
-    ["j/k ↑↓", "Move focus"],
-    ["Enter", "Switch to session"],
-    ["1-9", "Jump to session"],
-    ["Tab", "Cycle sessions"],
-    ["n/c", "New session"],
-    ["d", "Hide session"],
-    ["x", "Kill session"],
-    ["r", "Refresh"],
-    ["u", "Show all sessions"],
-    ["→/l", "Detail panel"],
-    ["←/h/Esc", "Back to sessions"],
-    ["Alt+↑↓", "Reorder sessions"],
-    ["q", "Quit"],
-  ];
-
   return (
     <box
       position="absolute"
@@ -832,7 +804,7 @@ function HelpOverlay(props: { palette: Accessor<Theme["palette"]>; onClose: () =
         backgroundColor={P().mantle}
         padding={1}
         flexDirection="column"
-        width={30}
+        width={56}
       >
         <text>
           <span style={{ fg: P().blue, attributes: BOLD }}>Keybindings</span>
@@ -840,20 +812,28 @@ function HelpOverlay(props: { palette: Accessor<Theme["palette"]>; onClose: () =
         <box height={1}>
           <text style={{ fg: P().surface2 }}>{DIVIDER}</text>
         </box>
-        <For each={keys}>
-          {([key, desc]) => (
-            <box flexDirection="row" paddingLeft={1}>
-              <box width={12} flexShrink={0}>
-                <text>
-                  <span style={{ fg: P().sky }}>{key}</span>
-                </text>
+        <box flexDirection="row">
+          <For each={HELP_COLUMNS}>
+            {(col) => (
+              <box flexDirection="column" flexGrow={1}>
+                <For each={col}>
+                  {([key, desc]) => (
+                    <box flexDirection="row" paddingLeft={1}>
+                      <box width={12} flexShrink={0}>
+                        <text>
+                          <span style={{ fg: P().sky }}>{key}</span>
+                        </text>
+                      </box>
+                      <text truncate>
+                        <span style={{ fg: P().subtext0 }}>{desc}</span>
+                      </text>
+                    </box>
+                  )}
+                </For>
               </box>
-              <text truncate>
-                <span style={{ fg: P().subtext0 }}>{desc}</span>
-              </text>
-            </box>
-          )}
-        </For>
+            )}
+          </For>
+        </box>
         <box height={1}>
           <text style={{ fg: P().surface2 }}>{DIVIDER}</text>
         </box>