@towles/tool 0.0.124 → 0.0.125

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@towles/tool",
-  "version": "0.0.124",
+  "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

@@ -4,8 +4,10 @@ import type { AgentStatus, SessionData, Theme } from "@tt-agentboard/runtime";
 import { truncate } from "@tt-agentboard/runtime";
 import { UNSEEN_ICON, BOLD, DIM, toneColor } from "../constants";
 import { DiffStats } from "./DiffStats";
-import { cacheBarVisual, 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: "",
@@ -19,7 +21,6 @@ const STATUS_TEXT: Record<AgentStatus, string> = {
 
 export interface SessionCardProps {
   session: SessionData;
-  index: number;
   isFocused: boolean;
   isCurrent: boolean;
   spinIdx: Accessor<number>;
@@ -67,15 +68,12 @@ export function SessionCard(props: SessionCardProps) {
     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 = () => truncate(props.session.name, 18);
@@ -105,7 +103,7 @@ 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";
   };
 
@@ -121,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">
@@ -241,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";
   };
 
@@ -260,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}>
@@ -290,37 +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 visual = () =>
-            hasCache()
-              ? cacheBarVisual(details.cacheExpiresAt!, details.cacheTtlMs!, props.now(), P())
-              : null;
+          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={visual()}>
-                  {(v) => (
-                    <>
-                      <span style={{ fg: P().overlay0, attributes: DIM }}>
-                        {model() ? " · cache " : "cache "}
-                      </span>
-                      <span style={{ fg: v().color }}>{v().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/index.tsx

@@ -24,7 +24,6 @@ import type {
 } from "@tt-agentboard/runtime";
 import { SessionCard } from "./components/SessionCard";
 import { StatusBar } from "./components/StatusBar";
-import { computeSessionStatusCounts } from "./session-status";
 import {
   detectMuxContext,
   refocusMainPane,
@@ -375,14 +374,14 @@ function App() {
     onCleanup(() => clearInterval(interval));
   });
 
-  // Shared 1s clock for cache-countdown bars. One ticker for all cards,
-  // gated on whether any agent across all sessions is actively cached.
+  // Shared 1s clock for elapsed-time displays.
+  // Ticks only while any agent is running.
   const [now, setNow] = createSignal(Date.now());
-  const hasActiveCache = createMemo(() =>
-    sessions.some((s) => s.agents?.some((a) => a.details?.cacheExpiresAt != null)),
+  const needsTicker = createMemo(() =>
+    sessions.some((s) => s.agents?.some((a) => a.status === "running")),
   );
   createEffect(() => {
-    if (!hasActiveCache()) return;
+    if (!needsTicker()) return;
     const id = setInterval(() => setNow(Date.now()), 1000);
     onCleanup(() => clearInterval(id));
   });
@@ -528,7 +527,6 @@ function App() {
   );
 
   const unseenCount = createMemo(() => sessions.filter((s) => s.unseen).length);
-  const sessionStatusCounts = createMemo(() => computeSessionStatusCounts(sessions));
 
   const isFocused = createSelector(focusedSession);
 
@@ -540,7 +538,6 @@ function App() {
         runningCount={runningAgentCount()}
         errorCount={errorAgentCount()}
         unseenCount={unseenCount()}
-        sessionStatusCounts={sessionStatusCounts()}
         theme={theme}
       />
 
@@ -550,7 +547,6 @@ function App() {
           {(session, i) => (
             <SessionCard
               session={session}
-              index={i() + 1}
               isFocused={isFocused(session.name)}
               isCurrent={session.name === currentSession()}
               spinIdx={spinIdx}
@@ -620,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>
 
@@ -696,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 (
@@ -726,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>
@@ -734,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/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 = "▱";
-
-export interface CacheBarVisual {
-  bar: string;
-  color: string;
-}
-
-/** Drain-down bar + traffic-light color: full/green when fresh, empty/grey when expired. */
-export function cacheBarVisual(
-  expiresAt: number,
-  ttlMs: number,
-  now: number,
-  palette: Theme["palette"],
-): CacheBarVisual {
-  const remaining = expiresAt - now;
-  if (remaining <= 0 || ttlMs <= 0) {
-    return { bar: CACHE_BAR_EMPTY.repeat(CACHE_BAR_WIDTH), color: palette.overlay0 };
-  }
-  const fraction = Math.max(0, Math.min(1, remaining / ttlMs));
-  const filled = Math.round(fraction * CACHE_BAR_WIDTH);
-  const bar = CACHE_BAR_FILLED.repeat(filled) + CACHE_BAR_EMPTY.repeat(CACHE_BAR_WIDTH - filled);
-  const color = fraction > 0.5 ? palette.green : fraction > 0.2 ? palette.yellow : palette.peach;
-  return { bar, color };
-}
-
-export function shortModel(model: string): string {
-  if (!model) return "";
-  return model.replace(/^claude-/, "").replace(/\[1m\]$/i, "");
-}

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 };
-}