@towles/tool 0.0.123 → 0.0.125

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@towles/tool",
-  "version": "0.0.123",
+  "version": "0.0.125",
   "description": "One off quality of life scripts that I use on a daily basis.",
   "homepage": "https://github.com/ChrisTowles/towles-tool#readme",
   "bugs": {

package/packages/agentboard/README.md

@@ -114,7 +114,7 @@ Solid.js app rendered via OpenTUI. Connects to server over WebSocket.
 
 - `constants.ts` — shared icons (`SPINNERS`, `UNSEEN_ICON`), theme list, tone-to-color mapping
 - `mux-context.ts` — tmux detection, pane refocus after startup, client TTY and session name resolution
-- `components/cache-bar.ts` — cache-countdown bar helpers (`cacheBar`, `cacheBarColor`, `shortModel`)
+- `components/short-model.ts` — `shortModel` helper for displaying agent model names
 
 ## Configuration
 

package/packages/agentboard/apps/tui/src/components/SessionCard.tsx

@@ -1,9 +1,13 @@
-import { createSignal, createEffect, createMemo, For, Show, onCleanup } from "solid-js";
+import { createSignal, For, Show, onCleanup } from "solid-js";
 import type { Accessor } from "solid-js";
 import type { AgentStatus, SessionData, Theme } from "@tt-agentboard/runtime";
-import { SPINNERS, UNSEEN_ICON, BOLD, DIM, toneColor } from "../constants";
+import { truncate } from "@tt-agentboard/runtime";
+import { UNSEEN_ICON, BOLD, DIM, toneColor } from "../constants";
 import { DiffStats } from "./DiffStats";
-import { cacheBar, cacheBarColor, shortModel } from "./cache-bar";
+import { shortModel } from "./short-model";
+import { formatElapsed } from "./elapsed";
+import { liveStatusIcon, unseenTerminalColor } from "./status-visuals";
+import { familyColor } from "./family-color";
 
 const STATUS_TEXT: Record<AgentStatus, string> = {
   idle: "",
@@ -17,10 +21,10 @@ const STATUS_TEXT: Record<AgentStatus, string> = {
 
 export interface SessionCardProps {
   session: SessionData;
-  index: number;
   isFocused: boolean;
   isCurrent: boolean;
   spinIdx: Accessor<number>;
+  now: Accessor<number>;
   theme: Accessor<Theme>;
   statusColors: Accessor<Theme["status"]>;
   focusedAgentIdx: number;
@@ -42,7 +46,7 @@ export function SessionCard(props: SessionCardProps) {
 
   const accentColor = () => {
     if (props.isCurrent) return P().green;
-    if (isUnseenTerminal()) return unseenAccentColor();
+    if (isUnseenTerminal()) return unseenTerminalColor(status(), P());
     const s = status();
     if (s === "error") return P().red;
     if (s === "interrupted") return P().peach;
@@ -53,48 +57,27 @@ export function SessionCard(props: SessionCardProps) {
     return "transparent";
   };
 
-  const unseenAccentColor = () => {
-    const s = status();
-    if (s === "error") return P().red;
-    if (s === "interrupted") return P().peach;
-    return P().teal;
-  };
-
   const statusIcon = () => {
-    const s = status();
-    if (s === "running") return SPINNERS[props.spinIdx() % SPINNERS.length]!;
-    if (s === "waiting") return "◉";
-    if (s === "question") return "?";
-    if (isUnseenTerminal()) return UNSEEN_ICON;
-    return "";
+    const live = liveStatusIcon(status(), props.spinIdx());
+    if (live) return live;
+    return isUnseenTerminal() ? UNSEEN_ICON : "";
   };
 
   const statusColor = () => {
-    if (isUnseenTerminal()) return unseenAccentColor();
+    if (isUnseenTerminal()) return unseenTerminalColor(status(), P());
     return SC()[status()];
   };
 
+  const familyHue = () => familyColor(props.session.name, P());
+
   const nameColor = () => {
     if (props.isFocused) return P().text;
     if (props.isCurrent) return P().subtext1;
-    return P().subtext0;
-  };
-
-  const indexColor = () => {
-    if (props.isFocused) return P().subtext0;
-    return P().surface2;
+    return familyHue();
   };
 
-  const truncName = () => {
-    const n = props.session.name;
-    return n.length > 18 ? n.slice(0, 17) + "…" : n;
-  };
-
-  const truncBranch = () => {
-    const b = props.session.branch;
-    if (!b) return "";
-    return b.length > 30 ? b.slice(0, 29) + "…" : b;
-  };
+  const truncName = () => truncate(props.session.name, 18);
+  const truncBranch = () => (props.session.branch ? truncate(props.session.branch, 30) : "");
 
   const hasDiff = () => {
     const { linesAdded, linesRemoved, commitsDelta, filesChanged } = props.session;
@@ -120,20 +103,12 @@ export function SessionCard(props: SessionCardProps) {
   const metaTone = () => props.session.metadata?.status?.tone;
 
   const bgColor = () => {
-    if (props.isFocused) return P().surface1;
+    if (props.isFocused) return P().surface0;
     return "transparent";
   };
 
   const agents = () => props.session.agents ?? [];
 
-  const [now, setNow] = createSignal(Date.now());
-  const needsTicker = createMemo(() => agents().some((a) => a.details?.cacheExpiresAt != null));
-  createEffect(() => {
-    if (!needsTicker()) return;
-    const id = setInterval(() => setNow(Date.now()), 1000);
-    onCleanup(() => clearInterval(id));
-  });
-
   return (
     <box flexDirection="column" flexShrink={0}>
       <box
@@ -144,9 +119,13 @@ export function SessionCard(props: SessionCardProps) {
       >
         <text style={{ fg: accentColor() }}>{accentColor() === "transparent" ? " " : "▌"}</text>
 
-        <box width={3} flexShrink={0}>
-          <text style={{ fg: indexColor() }}>{String(props.index).padStart(2)}</text>
-        </box>
+        <Show when={accentColor() === "transparent"}>
+          <box width={1} flexShrink={0}>
+            <text>
+              <span style={{ fg: familyHue(), attributes: DIM }}>▎</span>
+            </text>
+          </box>
+        </Show>
 
         <box flexDirection="column" flexGrow={1} paddingRight={1}>
           <box flexDirection="row">
@@ -196,7 +175,7 @@ export function SessionCard(props: SessionCardProps) {
                 palette={P}
                 statusColors={props.statusColors}
                 spinIdx={props.spinIdx}
-                now={now}
+                now={props.now}
                 isKeyboardFocused={i() === props.focusedAgentIdx}
                 onDismiss={() => props.onDismissAgent(agent)}
                 onFocusPane={() => props.onFocusAgentPane(agent)}
@@ -233,19 +212,20 @@ function AgentRow(props: AgentRowProps) {
 
   const icon = () => {
     if (isUnseen()) return UNSEEN_ICON;
-    if (isTerminal())
-      return props.agent.status === "done" ? "✓" : props.agent.status === "error" ? "✗" : "⚠";
-    if (props.agent.status === "running") return SPINNERS[props.spinIdx() % SPINNERS.length]!;
-    if (props.agent.status === "waiting") return "◉";
-    if (props.agent.status === "question") return "?";
-    return "○";
+    if (isTerminal()) {
+      if (props.agent.status === "done") return "✓";
+      if (props.agent.status === "error") return "✗";
+      return "⚠";
+    }
+    return liveStatusIcon(props.agent.status, props.spinIdx()) || "○";
   };
 
   const color = () => {
     if (isTerminal()) {
+      if (isUnseen()) return unseenTerminalColor(props.agent.status, P());
       if (props.agent.status === "error") return P().red;
       if (props.agent.status === "interrupted") return P().peach;
-      return isUnseen() ? P().teal : P().green;
+      return P().green;
     }
     return SC()[props.agent.status];
   };
@@ -263,8 +243,8 @@ function AgentRow(props: AgentRowProps) {
   });
 
   const bgColor = () => {
-    if (isFlash()) return P().surface1;
-    if (props.isKeyboardFocused) return P().surface0;
+    if (isFlash()) return P().surface2;
+    if (props.isKeyboardFocused) return P().surface1;
     return "transparent";
   };
 
@@ -282,15 +262,17 @@ function AgentRow(props: AgentRowProps) {
       <box flexDirection="row">
         <text flexGrow={1} truncate>
           <span style={{ fg: color() }}>{icon()}</span>
-          <span
-            style={{
-              fg: props.isKeyboardFocused ? P().text : P().subtext1,
-              attributes: props.isKeyboardFocused ? BOLD : undefined,
-            }}
-          >
-            {" "}
-            {props.agent.agent}
-          </span>
+          <Show when={props.agent.status === "running" && props.agent.details?.lastActivityAt}>
+            <span
+              style={{
+                fg: props.isKeyboardFocused ? P().subtext0 : P().overlay1,
+                attributes: DIM,
+              }}
+            >
+              {" "}
+              {formatElapsed(props.now() - (props.agent.details?.lastActivityAt ?? props.now()))}
+            </span>
+          </Show>
         </text>
         <Show when={!isUnseen()}>
           <text flexShrink={0}>
@@ -312,35 +294,30 @@ function AgentRow(props: AgentRowProps) {
       </box>
 
       <Show when={props.agent.threadName}>
-        <text truncate>
-          <span style={{ fg: isUnseen() ? color() : P().overlay0 }}>
-            {props.agent.threadName!.replace(/\s+/g, " ").trim()}
-          </span>
-        </text>
+        <box height={2} flexShrink={0}>
+          <text>
+            <span style={{ fg: isUnseen() ? color() : P().overlay0 }}>
+              {truncate(props.agent.threadName!.replace(/\s+/g, " ").trim(), 60)}
+            </span>
+          </text>
+        </box>
       </Show>
 
-      <Show when={props.agent.details}>
+      <Show when={props.agent.status === "running" && props.agent.details}>
         {(d) => {
           const details = d();
           const model = () => (details.model ? shortModel(details.model) : "");
-          const hasCache = () => details.cacheExpiresAt != null && details.cacheTtlMs != null;
-          const bar = () =>
-            hasCache() ? cacheBar(details.cacheExpiresAt!, details.cacheTtlMs!, props.now()) : "";
-          const barColor = () =>
-            hasCache()
-              ? cacheBarColor(details.cacheExpiresAt!, details.cacheTtlMs!, props.now(), P())
-              : P().overlay0;
+          const tool = () => details.lastTool;
           return (
-            <Show when={model() || hasCache()}>
+            <Show when={model() || tool()}>
               <text truncate>
                 <Show when={model()}>
                   <span style={{ fg: P().subtext0, attributes: DIM }}>{model()}</span>
                 </Show>
-                <Show when={hasCache()}>
-                  <span style={{ fg: P().overlay0, attributes: DIM }}>
-                    {model() ? " · cache " : "cache "}
-                  </span>
-                  <span style={{ fg: barColor() }}>{bar()}</span>
+                <Show when={tool()}>
+                  <span style={{ fg: P().overlay0, attributes: DIM }}>{model() ? " · " : ""}</span>
+                  <span style={{ fg: P().teal, attributes: DIM }}>⟶ </span>
+                  <span style={{ fg: P().subtext0 }}>{tool()}</span>
                 </Show>
               </text>
             </Show>

package/packages/agentboard/apps/tui/src/components/StatusBar.tsx

@@ -1,21 +1,13 @@
 import { Show } from "solid-js";
 import type { Accessor } from "solid-js";
 import type { Theme } from "@tt-agentboard/runtime";
-import { STATUS_ICONS } from "@tt-agentboard/runtime";
 import { BOLD } from "../constants";
 
-export interface SessionStatusCounts {
-  active: number;
-  error: number;
-  idle: number;
-}
-
 export interface StatusBarProps {
   sessionCount: number;
   runningCount: number;
   errorCount: number;
   unseenCount: number;
-  sessionStatusCounts: SessionStatusCounts;
   theme: Accessor<Theme>;
 }
 
@@ -52,33 +44,6 @@ export function StatusBar(props: StatusBarProps) {
           </span>
         </Show>
       </text>
-      <Show
-        when={
-          props.sessionStatusCounts.active +
-            props.sessionStatusCounts.error +
-            props.sessionStatusCounts.idle >
-          0
-        }
-      >
-        <text>
-          <span style={{ fg: P().overlay1 }}>{"  "}</span>
-          <Show when={props.sessionStatusCounts.active > 0}>
-            <span style={{ fg: P().green }}>
-              {STATUS_ICONS.running} {props.sessionStatusCounts.active} active{"  "}
-            </span>
-          </Show>
-          <Show when={props.sessionStatusCounts.error > 0}>
-            <span style={{ fg: P().red }}>
-              {STATUS_ICONS.error} {props.sessionStatusCounts.error} error{"  "}
-            </span>
-          </Show>
-          <Show when={props.sessionStatusCounts.idle > 0}>
-            <span style={{ fg: P().surface2 }}>
-              {STATUS_ICONS.idle} {props.sessionStatusCounts.idle} idle
-            </span>
-          </Show>
-        </text>
-      </Show>
     </box>
   );
 }

package/packages/agentboard/apps/tui/src/components/elapsed.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from "vitest";
+import { formatElapsed } from "./elapsed";
+
+describe("formatElapsed", () => {
+  it("formats sub-minute durations in seconds", () => {
+    expect(formatElapsed(0)).toBe("0s");
+    expect(formatElapsed(5_000)).toBe("5s");
+    expect(formatElapsed(59_000)).toBe("59s");
+  });
+
+  it("formats sub-hour durations in whole minutes", () => {
+    expect(formatElapsed(60_000)).toBe("1m");
+    expect(formatElapsed(3 * 60_000)).toBe("3m");
+    expect(formatElapsed(59 * 60_000)).toBe("59m");
+  });
+
+  it("formats hour+ durations in whole hours", () => {
+    expect(formatElapsed(60 * 60_000)).toBe("1h");
+    expect(formatElapsed(5 * 60 * 60_000)).toBe("5h");
+  });
+
+  it("clamps negative values to 0s", () => {
+    expect(formatElapsed(-1000)).toBe("0s");
+  });
+
+  it("floors rather than rounds", () => {
+    expect(formatElapsed(59_999)).toBe("59s");
+    expect(formatElapsed(119_999)).toBe("1m");
+  });
+});

package/packages/agentboard/apps/tui/src/components/elapsed.ts

@@ -0,0 +1,9 @@
+export function formatElapsed(ms: number): string {
+  if (ms < 0) ms = 0;
+  const seconds = Math.floor(ms / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  return `${hours}h`;
+}

package/packages/agentboard/apps/tui/src/components/family-color.test.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect } from "vitest";
+import { familyOf, familyColor } from "./family-color";
+import type { Theme } from "@tt-agentboard/runtime";
+
+const palette = {
+  pink: "#f5c2e7",
+  peach: "#fab387",
+  teal: "#94e2d5",
+  sky: "#89dceb",
+  lavender: "#b4befe",
+  mauve: "#cba6f7",
+  blue: "#89b4fa",
+  green: "#a6e3a1",
+  yellow: "#f9e2af",
+  red: "#f38ba8",
+  subtext0: "#a6adc8",
+} as unknown as Theme["palette"];
+
+describe("familyOf", () => {
+  it("groups blog-* sessions", () => {
+    expect(familyOf("blog-primary")).toBe("blog");
+    expect(familyOf("blog-slot-1")).toBe("blog");
+    expect(familyOf("blog-slot-2")).toBe("blog");
+  });
+
+  it("groups towles-tool-* sessions", () => {
+    expect(familyOf("towles-tool-primary")).toBe("towles-tool");
+    expect(familyOf("towles-tool-slot-1")).toBe("towles-tool");
+  });
+
+  it("returns the full name for solo sessions", () => {
+    expect(familyOf("dotfiles")).toBe("dotfiles");
+    expect(familyOf("f")).toBe("f");
+    expect(familyOf("toolbox")).toBe("toolbox");
+  });
+
+  it("handles single-segment names without dash", () => {
+    expect(familyOf("foo")).toBe("foo");
+  });
+
+  it("treats -primary and -slot-N as slot suffixes only", () => {
+    expect(familyOf("my-project-primary")).toBe("my-project");
+    expect(familyOf("my-project-slot-9")).toBe("my-project");
+    expect(familyOf("my-project-other")).toBe("my-project-other");
+  });
+});
+
+describe("familyColor", () => {
+  it("maps known families to specific palette colors", () => {
+    expect(familyColor("blog-primary", palette)).toBe(palette.pink);
+    expect(familyColor("dotfiles", palette)).toBe(palette.peach);
+    expect(familyColor("f", palette)).toBe(palette.teal);
+    expect(familyColor("toolbox", palette)).toBe(palette.sky);
+    expect(familyColor("towles-tool-primary", palette)).toBe(palette.lavender);
+  });
+
+  it("gives the same color to sessions in the same family", () => {
+    expect(familyColor("blog-primary", palette)).toBe(familyColor("blog-slot-2", palette));
+    expect(familyColor("towles-tool-primary", palette)).toBe(
+      familyColor("towles-tool-slot-1", palette),
+    );
+  });
+
+  it("falls back to a deterministic palette hue for unknown families", () => {
+    const a = familyColor("unknown-repo", palette);
+    const b = familyColor("unknown-repo", palette);
+    expect(a).toBe(b); // deterministic
+    expect(a).not.toBe(palette.subtext0); // not the legacy grey
+  });
+});

package/packages/agentboard/apps/tui/src/components/family-color.ts

@@ -0,0 +1,32 @@
+import type { Theme } from "@tt-agentboard/runtime";
+
+const KNOWN_FAMILIES = new Map<string, keyof Theme["palette"]>([
+  ["blog", "pink"],
+  ["dotfiles", "peach"],
+  ["f", "teal"],
+  ["toolbox", "sky"],
+  ["towles-tool", "lavender"],
+]);
+
+const FALLBACK_HUES: Array<keyof Theme["palette"]> = ["mauve", "blue", "green", "yellow", "red"];
+
+const SLOT_SUFFIX = /-(?:primary|slot-\d+)$/;
+
+export function familyOf(sessionName: string): string {
+  const stripped = sessionName.replace(SLOT_SUFFIX, "");
+  return stripped || sessionName;
+}
+
+function hash(s: string): number {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0;
+  return Math.abs(h);
+}
+
+export function familyColor(sessionName: string, palette: Theme["palette"]): string {
+  const family = familyOf(sessionName);
+  const known = KNOWN_FAMILIES.get(family);
+  if (known) return palette[known] as string;
+  const key = FALLBACK_HUES[hash(family) % FALLBACK_HUES.length]!;
+  return palette[key] as string;
+}

package/packages/agentboard/apps/tui/src/components/short-model.ts

@@ -0,0 +1,4 @@
+export function shortModel(model: string): string {
+  if (!model) return "";
+  return model.replace(/^claude-/, "").replace(/\[1m\]$/i, "");
+}

package/packages/agentboard/apps/tui/src/components/status-visuals.ts

@@ -0,0 +1,17 @@
+import type { AgentStatus, Theme } from "@tt-agentboard/runtime";
+import { SPINNERS } from "../constants";
+
+/** Icon for a live (non-terminal) status. Returns "" for statuses without a glyph. */
+export function liveStatusIcon(status: AgentStatus, spinIdx: number): string {
+  if (status === "running") return SPINNERS[spinIdx % SPINNERS.length]!;
+  if (status === "waiting") return "◉";
+  if (status === "question") return "?";
+  return "";
+}
+
+/** Accent color for a terminal agent whose final status the user hasn't seen yet. */
+export function unseenTerminalColor(status: AgentStatus, palette: Theme["palette"]): string {
+  if (status === "error") return palette.red;
+  if (status === "interrupted") return palette.peach;
+  return palette.teal;
+}

package/packages/agentboard/apps/tui/src/index.tsx

@@ -15,10 +15,15 @@ import type { Accessor } from "solid-js";
 import { createStore, reconcile } from "solid-js/store";
 
 import { ensureServer, SERVER_PORT, SERVER_HOST, resolveTheme } from "@tt-agentboard/runtime";
-import type { ServerMessage, SessionData, ClientCommand, Theme } from "@tt-agentboard/runtime";
+import type {
+  ServerMessage,
+  SessionData,
+  ClientCommand,
+  ReorderDelta,
+  Theme,
+} from "@tt-agentboard/runtime";
 import { SessionCard } from "./components/SessionCard";
 import { StatusBar } from "./components/StatusBar";
-import { computeSessionStatusCounts } from "./session-status";
 import {
   detectMuxContext,
   refocusMainPane,
@@ -369,6 +374,18 @@ function App() {
     onCleanup(() => clearInterval(interval));
   });
 
+  // Shared 1s clock for elapsed-time displays.
+  // Ticks only while any agent is running.
+  const [now, setNow] = createSignal(Date.now());
+  const needsTicker = createMemo(() =>
+    sessions.some((s) => s.agents?.some((a) => a.status === "running")),
+  );
+  createEffect(() => {
+    if (!needsTicker()) return;
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    onCleanup(() => clearInterval(id));
+  });
+
   useKeyboard((key) => {
     const currentModal = modal();
 
@@ -397,13 +414,8 @@ function App() {
     if ((key.meta || key.option) && (key.name === "up" || key.name === "down")) {
       const focused = focusedSession();
       if (focused) {
-        const delta: -1 | 1 | "top" | "bottom" = key.shift
-          ? key.name === "up"
-            ? "top"
-            : "bottom"
-          : key.name === "up"
-            ? -1
-            : 1;
+        const up = key.name === "up";
+        const delta: ReorderDelta = key.shift ? (up ? "top" : "bottom") : up ? "up" : "down";
         send({ type: "reorder-session", name: focused, delta });
       }
       return;
@@ -515,7 +527,6 @@ function App() {
   );
 
   const unseenCount = createMemo(() => sessions.filter((s) => s.unseen).length);
-  const sessionStatusCounts = createMemo(() => computeSessionStatusCounts(sessions));
 
   const isFocused = createSelector(focusedSession);
 
@@ -527,7 +538,6 @@ function App() {
         runningCount={runningAgentCount()}
         errorCount={errorAgentCount()}
         unseenCount={unseenCount()}
-        sessionStatusCounts={sessionStatusCounts()}
         theme={theme}
       />
 
@@ -537,10 +547,10 @@ function App() {
           {(session, i) => (
             <SessionCard
               session={session}
-              index={i() + 1}
               isFocused={isFocused(session.name)}
               isCurrent={session.name === currentSession()}
               spinIdx={spinIdx}
+              now={now}
               theme={theme}
               statusColors={S}
               focusedAgentIdx={
@@ -606,20 +616,12 @@ function App() {
             />
           }
         >
-          <KeyHints
-            palette={P}
-            hints={[
-              ["⇥", "cycle"],
-              ["⏎", "switch"],
-              ["→", "agents"],
-              ["n", "new"],
-              ["e", "edit"],
-              ["x", "kill"],
-              ["r", "refresh"],
-              ["q", "quit"],
-              ["?", "help"],
-            ]}
-          />
+          <box height={1}>
+            <text>
+              <span style={{ fg: P().overlay0 }}>?</span>
+              <span style={{ fg: P().overlay1 }}> help</span>
+            </text>
+          </box>
         </Show>
       </box>
 
@@ -682,16 +684,10 @@ const HELP_KEYS: [string, string][] = [
   ["→/l", "Agents panel"],
   ["←/h/Esc", "Back to sessions"],
   ["Alt+↑↓", "Reorder sessions"],
-  ["Alt+Shift+↑↓", "Move to top/bottom"],
+  ["Alt+Shift+↑↓", "To top/bottom"],
   ["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();
   return (
@@ -712,7 +708,7 @@ function HelpOverlay(props: { palette: Accessor<Theme["palette"]>; onClose: () =
         backgroundColor={P().mantle}
         padding={1}
         flexDirection="column"
-        width={56}
+        width={32}
       >
         <text>
           <span style={{ fg: P().blue, attributes: BOLD }}>Keybindings</span>
@@ -720,24 +716,18 @@ function HelpOverlay(props: { palette: Accessor<Theme["palette"]>; onClose: () =
         <box height={1}>
           <text style={{ fg: P().surface2 }}>{DIVIDER}</text>
         </box>
-        <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 flexDirection="column">
+          <For each={HELP_KEYS}>
+            {([key, desc]) => (
+              <box flexDirection="row">
+                <box width={14} flexShrink={0}>
+                  <text truncate>
+                    <span style={{ fg: P().sky }}>{key}</span>
+                  </text>
+                </box>
+                <text truncate>
+                  <span style={{ fg: P().subtext0 }}>{desc}</span>
+                </text>
               </box>
             )}
           </For>

package/packages/agentboard/packages/runtime/src/agents/watchers/claude-code.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "bun:test";
-import { determineStatus, summaryToDetails } from "./claude-code";
+import { determineStatus, summaryToDetails, extractLastTool } from "./claude-code";
 import type { ClaudeUsageSummary } from "./claude-usage";
 
 describe("determineStatus", () => {
@@ -98,3 +98,79 @@ describe("summaryToDetails", () => {
     expect(details.model).toBe("claude-haiku-4-5");
   });
 });
+
+describe("extractLastTool", () => {
+  it("returns undefined when no entries", () => {
+    expect(extractLastTool([])).toBeUndefined();
+  });
+
+  it("returns undefined when no assistant tool_use entries", () => {
+    expect(
+      extractLastTool([
+        { message: { role: "assistant", content: [{ type: "text", text: "hello" }] } },
+        { message: { role: "user", content: "hi" } },
+      ]),
+    ).toBeUndefined();
+  });
+
+  it("returns tool name from the most recent assistant tool_use", () => {
+    expect(
+      extractLastTool([
+        { message: { role: "assistant", content: [{ type: "tool_use", name: "Read" }] } },
+      ]),
+    ).toBe("Read");
+  });
+
+  it("prefers the latest entry when multiple tool_use present", () => {
+    expect(
+      extractLastTool([
+        { message: { role: "assistant", content: [{ type: "tool_use", name: "Read" }] } },
+        { message: { role: "user", content: "ok" } },
+        { message: { role: "assistant", content: [{ type: "tool_use", name: "Edit" }] } },
+      ]),
+    ).toBe("Edit");
+  });
+
+  it("skips AskUserQuestion (not a real tool use for display)", () => {
+    expect(
+      extractLastTool([
+        { message: { role: "assistant", content: [{ type: "tool_use", name: "Read" }] } },
+        {
+          message: {
+            role: "assistant",
+            content: [{ type: "tool_use", name: "AskUserQuestion" }],
+          },
+        },
+      ]),
+    ).toBe("Read");
+  });
+
+  it("returns undefined when only AskUserQuestion tool_use entries exist", () => {
+    expect(
+      extractLastTool([
+        {
+          message: {
+            role: "assistant",
+            content: [{ type: "tool_use", name: "AskUserQuestion" }],
+          },
+        },
+      ]),
+    ).toBeUndefined();
+  });
+
+  it("returns the first tool name if a turn has multiple tool_use items", () => {
+    expect(
+      extractLastTool([
+        {
+          message: {
+            role: "assistant",
+            content: [
+              { type: "tool_use", name: "Read" },
+              { type: "tool_use", name: "Grep" },
+            ],
+          },
+        },
+      ]),
+    ).toBe("Read");
+  });
+});

package/packages/agentboard/packages/runtime/src/agents/watchers/claude-code.ts

@@ -46,6 +46,7 @@ interface SessionState {
   threadName?: string;
   projectDir?: string;
   usage?: ClaudeUsageSummary;
+  lastTool?: string;
 }
 
 const POLL_MS = 2000;
@@ -95,6 +96,23 @@ function extractThreadName(entry: JournalEntry): string | undefined {
   return text.slice(0, 80);
 }
 
+export function extractLastTool(entries: JournalEntry[]): string | undefined {
+  for (let i = entries.length - 1; i >= 0; i--) {
+    const entry = entries[i]!;
+    const msg = entry.message;
+    if (msg?.role !== "assistant") continue;
+    const content = msg.content;
+    if (!Array.isArray(content)) continue;
+    for (const item of content) {
+      if (item.type !== "tool_use") continue;
+      if (!item.name) continue;
+      if (item.name === "AskUserQuestion") continue;
+      return item.name;
+    }
+  }
+  return undefined;
+}
+
 /** Decode Claude's encoded project dir name back to a path.
  * Claude Code encodes `/` as `-` with no escape for literal dashes,
  * so paths like `/home/user/my-project` are ambiguous with `/home/user/my/project`.
@@ -118,6 +136,15 @@ export function summaryToDetails(
   };
 }
 
+function buildDetails(
+  usage: ClaudeUsageSummary | undefined,
+  lastTool: string | undefined,
+): import("../../contracts/agent").AgentEventDetails | undefined {
+  if (!usage && !lastTool) return undefined;
+  const base = usage ? summaryToDetails(usage) : {};
+  return lastTool ? { ...base, lastTool } : base;
+}
+
 // --- Watcher implementation ---
 
 export class ClaudeCodeAgentWatcher implements AgentWatcher {
@@ -198,7 +225,7 @@ export class ClaudeCodeAgentWatcher implements AgentWatcher {
               ts: Date.now(),
               threadId,
               threadName: prev.threadName,
-              details: prev.usage ? summaryToDetails(prev.usage) : undefined,
+              details: buildDetails(prev.usage, prev.lastTool),
             });
           }
         }
@@ -237,6 +264,7 @@ export class ClaudeCodeAgentWatcher implements AgentWatcher {
       }
 
       const usage = extractUsageSummary(parsed) ?? undefined;
+      const lastTool = extractLastTool(parsed);
 
       // If "running" but journal file is stale, the process likely exited
       if (latestStatus === "running") {
@@ -252,6 +280,7 @@ export class ClaudeCodeAgentWatcher implements AgentWatcher {
         threadName,
         projectDir,
         usage,
+        lastTool,
       });
       return;
     }
@@ -291,6 +320,8 @@ export class ClaudeCodeAgentWatcher implements AgentWatcher {
     // Merge new usage summary onto the previous one (incremental reads may not include the latest assistant turn)
     const newUsage = extractUsageSummary(parsed);
     const usage = newUsage ?? prev?.usage;
+    const newLastTool = extractLastTool(parsed);
+    const lastTool = newLastTool ?? prev?.lastTool;
 
     if (latestStatus === "running") {
       const pid = await this.pidLookup.pidForThread(threadId);
@@ -306,6 +337,7 @@ export class ClaudeCodeAgentWatcher implements AgentWatcher {
       threadName,
       projectDir,
       usage,
+      lastTool,
     });
 
     if (latestStatus !== prevStatus) {
@@ -318,7 +350,7 @@ export class ClaudeCodeAgentWatcher implements AgentWatcher {
           ts: Date.now(),
           threadId,
           threadName,
-          details: usage ? summaryToDetails(usage) : undefined,
+          details: buildDetails(usage, lastTool),
         });
       }
     }
@@ -396,7 +428,7 @@ export class ClaudeCodeAgentWatcher implements AgentWatcher {
             ts: Date.now(),
             threadId,
             threadName: state.threadName,
-            details: state.usage ? summaryToDetails(state.usage) : undefined,
+            details: buildDetails(state.usage, state.lastTool),
           });
         }
       }

package/packages/agentboard/packages/runtime/src/contracts/agent.ts

@@ -20,6 +20,8 @@ export interface AgentEventDetails {
   cacheTtlMs?: number;
   /** Epoch ms of the most recent assistant entry in the journal */
   lastActivityAt?: number;
+  /** Name of the most recent tool invoked by the agent (e.g. "Read", "Bash", "Edit"). Populated only by the claude-code watcher. */
+  lastTool?: string;
 }
 
 export interface AgentEvent {

package/packages/agentboard/packages/runtime/src/index.ts

@@ -61,9 +61,11 @@ export type {
   QuitNotify,
   ServerMessage,
   ClientCommand,
+  ReorderDelta,
   MetadataTone,
   MetadataStatus,
   MetadataProgress,
   MetadataLogEntry,
   SessionMetadata,
 } from "./shared";
+export { truncate } from "./text-utils";

package/packages/agentboard/packages/runtime/src/server/metadata-store.ts

@@ -1,12 +1,9 @@
 import type { MetadataTone, SessionMetadata } from "../shared";
+import { truncate } from "../text-utils";
 
 const MAX_LOGS = 50;
 const MAX_MESSAGE_LENGTH = 500;
 
-function truncate(s: string, max: number = MAX_MESSAGE_LENGTH): string {
-  return s.length > max ? s.slice(0, max - 1) + "…" : s;
-}
-
 export class SessionMetadataStore {
   private store = new Map<string, SessionMetadata>();
 
@@ -62,7 +59,7 @@ export class SessionMetadataStore {
   ): void {
     const meta = this.getOrCreate(session);
     meta.logs.push({
-      message: truncate(entry.message),
+      message: truncate(entry.message, MAX_MESSAGE_LENGTH),
       tone: entry.tone,
       source: entry.source ? truncate(entry.source, 50) : undefined,
       ts: Date.now(),

package/packages/agentboard/packages/runtime/src/server/session-order.ts

@@ -5,6 +5,8 @@ interface PersistedSessionOrder {
   order?: unknown;
 }
 
+export type ReorderDelta = "up" | "down" | "top" | "bottom";
+
 /**
  * Maintains custom session ordering for reorder-session commands.
  * Stores an ordered list of session names. The `apply` method takes
@@ -59,8 +61,8 @@ export class SessionOrder {
     }
   }
 
-  /** Move a session: delta -1 = up, 1 = down, "top" / "bottom" = jump to end. */
-  reorder(name: string, delta: -1 | 1 | "top" | "bottom"): void {
+  /** Move a session up/down by one, or jump it to top/bottom of the order. */
+  reorder(name: string, delta: ReorderDelta): void {
     const idx = this.order.indexOf(name);
     if (idx === -1) return;
     if (delta === "top") {
@@ -68,7 +70,8 @@ export class SessionOrder {
     } else if (delta === "bottom") {
       this.order = [...this.order.filter((n) => n !== name), name];
     } else {
-      const newIdx = idx + delta;
+      const step = delta === "up" ? -1 : 1;
+      const newIdx = idx + step;
       if (newIdx < 0 || newIdx >= this.order.length) return;
       [this.order[idx], this.order[newIdx]] = [this.order[newIdx]!, this.order[idx]!];
     }

package/packages/agentboard/packages/runtime/src/shared.ts

@@ -1,4 +1,7 @@
 import type { AgentStatus, AgentEvent } from "./contracts/agent";
+import type { ReorderDelta } from "./server/session-order";
+
+export type { ReorderDelta };
 
 export const DEFAULT_SERVER_PORT = 4201;
 export const DEFAULT_SERVER_HOST = "127.0.0.1";
@@ -112,7 +115,7 @@ export type ClientCommand =
   | { type: "switch-index"; index: number }
   | { type: "new-session" }
   | { type: "kill-session"; name: string }
-  | { type: "reorder-session"; name: string; delta: -1 | 1 | "top" | "bottom" }
+  | { type: "reorder-session"; name: string; delta: ReorderDelta }
   | { type: "refresh" }
   | { type: "move-focus"; delta: -1 | 1 }
   | { type: "focus-session"; name: string }

package/packages/agentboard/packages/runtime/src/text-utils.ts

@@ -0,0 +1,4 @@
+/** Truncate a string to `max` chars, appending an ellipsis character if clipped. */
+export function truncate(s: string, max: number): string {
+  return s.length > max ? s.slice(0, max - 1) + "…" : s;
+}

package/packages/agentboard/apps/tui/src/components/cache-bar.ts

@@ -1,33 +0,0 @@
-import type { Theme } from "@tt-agentboard/runtime";
-
-export const CACHE_BAR_WIDTH = 10;
-export const CACHE_BAR_FILLED = "▰";
-export const CACHE_BAR_EMPTY = "▱";
-
-/** Render a drain-down bar: full = freshly cached, empty = expired. */
-export function cacheBar(expiresAt: number, ttlMs: number, now: number): string {
-  const remaining = expiresAt - now;
-  if (remaining <= 0 || ttlMs <= 0) return CACHE_BAR_EMPTY.repeat(CACHE_BAR_WIDTH);
-  const fraction = Math.max(0, Math.min(1, remaining / ttlMs));
-  const filled = Math.round(fraction * CACHE_BAR_WIDTH);
-  return CACHE_BAR_FILLED.repeat(filled) + CACHE_BAR_EMPTY.repeat(CACHE_BAR_WIDTH - filled);
-}
-
-export function shortModel(model: string): string {
-  if (!model) return "";
-  return model.replace(/^claude-/, "").replace(/\[1m\]$/i, "");
-}
-
-export function cacheBarColor(
-  expiresAt: number,
-  ttlMs: number,
-  now: number,
-  palette: Theme["palette"],
-): string {
-  const remaining = expiresAt - now;
-  if (remaining <= 0 || ttlMs <= 0) return palette.overlay0;
-  const fraction = remaining / ttlMs;
-  if (fraction > 0.5) return palette.green;
-  if (fraction > 0.2) return palette.yellow;
-  return palette.peach;
-}

package/packages/agentboard/apps/tui/src/session-status.test.ts

@@ -1,70 +0,0 @@
-import { describe, it, expect } from "vitest";
-import type { SessionData, AgentEvent } from "@tt-agentboard/runtime";
-import { computeSessionStatusCounts } from "./session-status";
-
-function makeSession(agentStatus?: AgentEvent["status"]): SessionData {
-  return {
-    name: "test",
-    createdAt: Date.now(),
-    dir: "/tmp",
-    branch: "main",
-    dirty: false,
-    isWorktree: false,
-    filesChanged: 0,
-    linesAdded: 0,
-    linesRemoved: 0,
-    commitsDelta: 0,
-    unseen: false,
-    panes: 1,
-    ports: [],
-    windows: 1,
-    uptime: "0s",
-    agentState: agentStatus
-      ? { agent: "claude", session: "test", status: agentStatus, ts: Date.now() }
-      : null,
-    agents: [],
-    eventTimestamps: [],
-  };
-}
-
-describe("computeSessionStatusCounts", () => {
-  it("returns all zeros for empty sessions", () => {
-    expect(computeSessionStatusCounts([])).toEqual({ active: 0, error: 0, idle: 0 });
-  });
-
-  it("counts running sessions as active", () => {
-    const sessions = [makeSession("running"), makeSession("running")];
-    expect(computeSessionStatusCounts(sessions)).toEqual({ active: 2, error: 0, idle: 0 });
-  });
-
-  it("counts waiting sessions as active", () => {
-    const sessions = [makeSession("waiting")];
-    expect(computeSessionStatusCounts(sessions)).toEqual({ active: 1, error: 0, idle: 0 });
-  });
-
-  it("counts error sessions", () => {
-    const sessions = [makeSession("error")];
-    expect(computeSessionStatusCounts(sessions)).toEqual({ active: 0, error: 1, idle: 0 });
-  });
-
-  it("counts idle, done, interrupted, and null agentState as idle", () => {
-    const sessions = [
-      makeSession("idle"),
-      makeSession("done"),
-      makeSession("interrupted"),
-      makeSession(undefined),
-    ];
-    expect(computeSessionStatusCounts(sessions)).toEqual({ active: 0, error: 0, idle: 4 });
-  });
-
-  it("counts mixed statuses correctly", () => {
-    const sessions = [
-      makeSession("running"),
-      makeSession("error"),
-      makeSession("idle"),
-      makeSession("waiting"),
-      makeSession("done"),
-    ];
-    expect(computeSessionStatusCounts(sessions)).toEqual({ active: 2, error: 1, idle: 2 });
-  });
-});

package/packages/agentboard/apps/tui/src/session-status.ts

@@ -1,19 +0,0 @@
-import type { SessionData } from "@tt-agentboard/runtime";
-import type { SessionStatusCounts } from "./components/StatusBar";
-
-export function computeSessionStatusCounts(sessions: SessionData[]): SessionStatusCounts {
-  let active = 0;
-  let error = 0;
-  let idle = 0;
-  for (const s of sessions) {
-    const status = s.agentState?.status;
-    if (status === "running" || status === "waiting" || status === "question") {
-      active++;
-    } else if (status === "error") {
-      error++;
-    } else {
-      idle++;
-    }
-  }
-  return { active, error, idle };
-}