@towles/tool 0.0.122 → 0.0.124

package/package.json

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

@@ -83,32 +83,27 @@ WebSocket server on `127.0.0.1:4201`. Auto-started by the TUI or tmux scripts.
 Solid.js app rendered via OpenTUI. Connects to server over WebSocket.
 
 - Session cards with accent bars, status icons, branch info
-- Resizable detail panel with agent list + metadata
-- Mouse support (click, drag to resize)
+- Inline agent rows per card with cache-countdown bar for Claude Code panes
+- Mouse support (click to focus, dismiss)
 - Help overlay (`?`)
 
 #### TUI Components
 
-**`SessionCard`** (`components/SessionCard.tsx`) — session list item
+**`SessionCard`** (`components/SessionCard.tsx`) — session list item with inline agent rows
 
 - Row 1: session name (truncated to 18 chars) + status icon (braille spinner when running, `●` for unseen terminal states)
-- Row 2: git branch + listening port hint (`⌁4201`, or `⌁4201+2` for multiple)
-- Row 3: metadata summary (status text + progress like `3/5` or `42%`)
+- Row 2: git branch
+- Row 3: git diff stats
+- Row 4: metadata summary (status text + progress like `3/5` or `42%`)
+- Agent rows (one per pane): status icon + name + status text + dismiss `✕`, thread name, and for Claude Code agents a `model · cache ▰▰▱…` drain-down bar
 - Left accent bar colored by state: green (current), yellow (running), red (error), peach (interrupted), lavender (focused), teal (unseen done)
 
-**`DetailPanel`** (`components/DetailPanel.tsx`) — expanded view for focused session
-
-- Drag-resizable separator (height persisted per session in config)
-- Truncated working directory
-- Agent list via `AgentListItem` sub-component (see below)
-- Metadata section: status line with tone icon + progress, last 8 log entries
-
-**`AgentListItem`** (inside `DetailPanel.tsx`) — single agent instance row
+**`AgentRow`** (inside `SessionCard.tsx`) — single agent instance row
 
 - Status icon: braille spinner (running), `◉` (waiting), `✓` (done), `✗` (error), `⚠` (interrupted)
 - Agent name, thread name, status text
 - Dismiss `✕` button (hover turns red), click row to focus the agent's tmux pane
-- Flash animation on click
+- Flash animation on click, surface0 highlight when keyboard-focused
 
 **`HelpOverlay`** (inline in `index.tsx`) — modal overlay
 
@@ -117,9 +112,9 @@ Solid.js app rendered via OpenTUI. Connects to server over WebSocket.
 
 #### TUI Utilities
 
-- `constants.ts` — shared icons (`SPINNERS`, `UNSEEN_ICON`, `TONE_ICONS`), spark blocks for sparkline charts, theme list, tone-to-color mapping
+- `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
-- `detail-panel-height.ts` — per-session detail panel height persistence (min 4 rows, default 10)
+- `components/cache-bar.ts` — cache-countdown bar helpers (`cacheBar`, `cacheBarColor`, `shortModel`)
 
 ## Configuration
 

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

@@ -1,8 +1,21 @@
-import { Show } from "solid-js";
+import { createSignal, For, Show, onCleanup } from "solid-js";
 import type { Accessor } from "solid-js";
-import type { SessionData, Theme } from "@tt-agentboard/runtime";
-import { SPINNERS, UNSEEN_ICON, BOLD, DIM, toneColor } from "../constants";
+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 { liveStatusIcon, unseenTerminalColor } from "./status-visuals";
+
+const STATUS_TEXT: Record<AgentStatus, string> = {
+  idle: "",
+  running: "running",
+  done: "done",
+  error: "error",
+  waiting: "waiting",
+  question: "question",
+  interrupted: "stopped",
+};
 
 export interface SessionCardProps {
   session: SessionData;
@@ -10,9 +23,13 @@ export interface SessionCardProps {
   isFocused: boolean;
   isCurrent: boolean;
   spinIdx: Accessor<number>;
+  now: Accessor<number>;
   theme: Accessor<Theme>;
   statusColors: Accessor<Theme["status"]>;
+  focusedAgentIdx: number;
   onSelect: () => void;
+  onDismissAgent: (agent: SessionData["agents"][number]) => void;
+  onFocusAgentPane: (agent: SessionData["agents"][number]) => void;
 }
 
 export function SessionCard(props: SessionCardProps) {
@@ -28,7 +45,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;
@@ -39,24 +56,14 @@ 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()];
   };
 
@@ -71,16 +78,8 @@ export function SessionCard(props: SessionCardProps) {
     return P().surface2;
   };
 
-  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;
@@ -110,6 +109,8 @@ export function SessionCard(props: SessionCardProps) {
     return "transparent";
   };
 
+  const agents = () => props.session.agents ?? [];
+
   return (
     <box flexDirection="column" flexShrink={0}>
       <box
@@ -118,17 +119,13 @@ export function SessionCard(props: SessionCardProps) {
         onMouseDown={props.onSelect}
         paddingLeft={1}
       >
-        {/* Left accent — space-preserving, only colored for meaningful states */}
         <text style={{ fg: accentColor() }}>{accentColor() === "transparent" ? " " : "▌"}</text>
 
-        {/* Index */}
         <box width={3} flexShrink={0}>
           <text style={{ fg: indexColor() }}>{String(props.index).padStart(2)}</text>
         </box>
 
-        {/* Content */}
         <box flexDirection="column" flexGrow={1} paddingRight={1}>
-          {/* Row 1: name + status */}
           <box flexDirection="row">
             <text truncate flexGrow={1}>
               <span
@@ -151,19 +148,16 @@ export function SessionCard(props: SessionCardProps) {
             </Show>
           </box>
 
-          {/* Row 2: branch */}
           <Show when={props.session.branch}>
             <text truncate>
               <span style={{ fg: props.isFocused ? P().pink : P().overlay0 }}>{truncBranch()}</span>
             </text>
           </Show>
 
-          {/* Row 3: git diff stats */}
           <Show when={hasDiff()}>
             <DiffStats session={props.session} palette={() => P()} />
           </Show>
 
-          {/* Row 3: metadata summary (status + progress) */}
           <Show when={metaSummary()}>
             <text truncate>
               <span style={{ fg: toneColor(metaTone(), P()), attributes: DIM }}>
@@ -171,11 +165,168 @@ export function SessionCard(props: SessionCardProps) {
               </span>
             </text>
           </Show>
+
+          <For each={agents()}>
+            {(agent, i) => (
+              <AgentRow
+                agent={agent}
+                palette={P}
+                statusColors={props.statusColors}
+                spinIdx={props.spinIdx}
+                now={props.now}
+                isKeyboardFocused={i() === props.focusedAgentIdx}
+                onDismiss={() => props.onDismissAgent(agent)}
+                onFocusPane={() => props.onFocusAgentPane(agent)}
+              />
+            )}
+          </For>
         </box>
       </box>
 
-      {/* Breathing room — 1 empty line between cards */}
       <box height={1} />
     </box>
   );
 }
+
+interface AgentRowProps {
+  agent: SessionData["agents"][number];
+  palette: Accessor<Theme["palette"]>;
+  statusColors: Accessor<Theme["status"]>;
+  spinIdx: Accessor<number>;
+  now: Accessor<number>;
+  isKeyboardFocused: boolean;
+  onDismiss: () => void;
+  onFocusPane: () => void;
+}
+
+function AgentRow(props: AgentRowProps) {
+  const P = () => props.palette();
+  const SC = () => props.statusColors();
+  const [isDismissHover, setIsDismissHover] = createSignal(false);
+  const [isFlash, setIsFlash] = createSignal(false);
+
+  const isTerminal = () => ["done", "error", "interrupted"].includes(props.agent.status);
+  const isUnseen = () => isTerminal() && props.agent.unseen === true;
+
+  const icon = () => {
+    if (isUnseen()) return UNSEEN_ICON;
+    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 P().green;
+    }
+    return SC()[props.agent.status];
+  };
+
+  const statusText = () => STATUS_TEXT[props.agent.status];
+
+  let flashTimer: ReturnType<typeof setTimeout> | null = null;
+  const triggerFlash = () => {
+    setIsFlash(true);
+    if (flashTimer) clearTimeout(flashTimer);
+    flashTimer = setTimeout(() => setIsFlash(false), 150);
+  };
+  onCleanup(() => {
+    if (flashTimer) clearTimeout(flashTimer);
+  });
+
+  const bgColor = () => {
+    if (isFlash()) return P().surface1;
+    if (props.isKeyboardFocused) return P().surface0;
+    return "transparent";
+  };
+
+  return (
+    <box
+      flexDirection="column"
+      flexShrink={0}
+      backgroundColor={bgColor()}
+      onMouseDown={(event) => {
+        if (event.target?.id === "dismiss") return;
+        triggerFlash();
+        props.onFocusPane();
+      }}
+    >
+      <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>
+        </text>
+        <Show when={!isUnseen()}>
+          <text flexShrink={0}>
+            <span style={{ fg: color(), attributes: DIM }}>{statusText()}</span>
+          </text>
+        </Show>
+        <text
+          flexShrink={0}
+          onMouseDown={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            props.onDismiss();
+          }}
+          onMouseOver={() => setIsDismissHover(true)}
+          onMouseOut={() => setIsDismissHover(false)}
+        >
+          <span style={{ fg: isDismissHover() ? P().red : P().overlay0 }}>{" ✕"}</span>
+        </text>
+      </box>
+
+      <Show when={props.agent.threadName}>
+        <text truncate>
+          <span style={{ fg: isUnseen() ? color() : P().overlay0 }}>
+            {props.agent.threadName!.replace(/\s+/g, " ").trim()}
+          </span>
+        </text>
+      </Show>
+
+      <Show when={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;
+          return (
+            <Show when={model() || hasCache()}>
+              <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>
+              </text>
+            </Show>
+          );
+        }}
+      </Show>
+    </box>
+  );
+}

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

@@ -0,0 +1,33 @@
+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/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/constants.ts

@@ -7,22 +7,11 @@ export const SPINNERS = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧",
 export const UNSEEN_ICON = "●";
 export const BOLD = TextAttributes.BOLD;
 export const DIM = TextAttributes.DIM;
-export const SPARK_BLOCKS = [" ", "▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"];
 export const DIVIDER = "─".repeat(200);
 
 export const THEME_NAMES = Object.keys(BUILTIN_THEMES);
-export const DEFAULT_DETAIL_PANEL_HEIGHT = 10;
-export const MIN_DETAIL_PANEL_HEIGHT = 4;
 export { TUI_RESIZE_LOG };
 
-export const TONE_ICONS: Record<MetadataTone, string> = {
-  neutral: "·",
-  info: "ℹ",
-  success: "✓",
-  warn: "⚠",
-  error: "✗",
-};
-
 export function toneColor(tone: MetadataTone | undefined, palette: Theme["palette"]): string {
   switch (tone) {
     case "success":

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

@@ -13,12 +13,16 @@ import {
 } from "solid-js";
 import type { Accessor } from "solid-js";
 import { createStore, reconcile } from "solid-js/store";
-import type { MouseEvent } from "@opentui/core";
 
 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 { DetailPanel } from "./components/DetailPanel";
 import { StatusBar } from "./components/StatusBar";
 import { computeSessionStatusCounts } from "./session-status";
 import {
@@ -27,19 +31,7 @@ import {
   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";
+import { SPINNERS, BOLD, DIM, DIVIDER, logResizeDebug } from "./constants";
 
 const muxCtx = detectMuxContext();
 
@@ -92,14 +84,9 @@ function App() {
   const [sessions, setSessions] = createStore<SessionData[]>([]);
   const [focusedSession, setFocusedSession] = createSignal<string | null>(null);
   const [currentSession, setCurrentSession] = createSignal<string | null>(null);
-  const [mySession, setMySession] = createSignal<string | null>(null);
   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());
 
   // --- Panel focus: sessions list vs agent detail ---
   type PanelFocus = "sessions" | "agents";
@@ -123,8 +110,6 @@ function App() {
   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(muxCtx);
 
   const focusedData = createMemo(() => sessions.find((s) => s.name === focusedSession()) ?? null);
@@ -240,76 +225,6 @@ function App() {
     );
   }
 
-  function beginDetailResize(event: MouseEvent) {
-    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;
-    detailResizeStartHeight = detailPanelHeight();
-    setIsDetailResizing(true);
-    event.stopPropagation();
-  }
-
-  function handleDetailResizeDrag(event: MouseEvent) {
-    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);
-    if (TUI_DEBUG)
-      logResizeDebug("handleDetailResizeDrag:applied", {
-        delta,
-        nextHeight,
-        session: detailPanelSessionName(),
-      });
-    event.stopPropagation();
-  }
-
-  function endDetailResize(event?: MouseEvent) {
-    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);
-    setIsDetailResizeHover(false);
-
-    const sessionName = detailPanelSessionName();
-    if (sessionName) {
-      persistDetailPanelHeight(sessionName, detailPanelHeight());
-      if (TUI_DEBUG)
-        logResizeDebug("endDetailResize:persisted", {
-          session: sessionName,
-          height: detailPanelHeight(),
-        });
-    }
-
-    event?.stopPropagation();
-  }
-
   function createNewSession() {
     if (muxCtx.type !== "tmux") {
       send({ type: "new-session" });
@@ -418,7 +333,6 @@ function App() {
             setFocusedSession(msg.focusedSession);
             setCurrentSession(msg.currentSession);
           } else if (msg.type === "your-session") {
-            setMySession(msg.name);
             if (msg.clientTty) setClientTty(msg.clientTty);
 
             if (!startupFocusSynced && sessions.some((session) => session.name === msg.name)) {
@@ -461,25 +375,16 @@ 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.
+  const [now, setNow] = createSignal(Date.now());
+  const hasActiveCache = createMemo(() =>
+    sessions.some((s) => s.agents?.some((a) => a.details?.cacheExpiresAt != null)),
+  );
   createEffect(() => {
-    const sessionName = detailPanelSessionName();
-    if (!sessionName) return;
-    const storedHeight = getStoredDetailPanelHeight(sessionName);
-    if (TUI_DEBUG)
-      logResizeDebug("loadStoredDetailPanelHeight", {
-        session: sessionName,
-        storedHeight,
-      });
-    setDetailPanelHeight(storedHeight);
-  });
-
-  createEffect(() => {
-    if (TUI_DEBUG)
-      logResizeDebug("detailPanelHeight:changed", {
-        height: detailPanelHeight(),
-        session: detailPanelSessionName(),
-        isResizing: isDetailResizing(),
-      });
+    if (!hasActiveCache()) return;
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    onCleanup(() => clearInterval(id));
   });
 
   useKeyboard((key) => {
@@ -506,11 +411,12 @@ function App() {
     }
 
     // --- Normal mode keybindings ---
-    // Alt+Up / Alt+Down → reorder session
+    // Alt+Up/Down → reorder session ±1. Alt+Shift+Up/Down → jump to top/bottom.
     if ((key.meta || key.option) && (key.name === "up" || key.name === "down")) {
       const focused = focusedSession();
       if (focused) {
-        const delta: -1 | 1 = 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;
@@ -648,60 +554,38 @@ function App() {
               isFocused={isFocused(session.name)}
               isCurrent={session.name === currentSession()}
               spinIdx={spinIdx}
+              now={now}
               theme={theme}
               statusColors={S}
+              focusedAgentIdx={
+                isFocused(session.name) && panelFocus() === "agents" ? focusedAgentIdx() : -1
+              }
               onSelect={() => {
                 setFocusedSession(session.name);
                 send({ type: "focus-session", name: session.name });
                 switchToSession(session.name);
               }}
-            />
-          )}
-        </For>
-      </scrollbox>
-
-      {/* Detail panel — focused session info, draggable height */}
-      <Show when={focusedData()}>
-        {(data) => (
-          <scrollbox height={detailPanelHeight()} maxHeight={detailPanelHeight()} flexShrink={0}>
-            <DetailPanel
-              session={data()}
-              theme={theme}
-              statusColors={S}
-              spinIdx={spinIdx}
-              focusedAgentIdx={panelFocus() === "agents" ? focusedAgentIdx() : -1}
               onDismissAgent={(agent) => {
                 send({
                   type: "dismiss-agent",
-                  session: data().name,
+                  session: session.name,
                   agent: agent.agent,
                   threadId: agent.threadId,
                 });
               }}
               onFocusAgentPane={(agent) => {
-                if (TUI_DEBUG)
-                  appendFileSync(
-                    "/tmp/agentboard-tui-agent-click.log",
-                    `[${new Date().toISOString()}] sending focus-agent-pane session=${data().name} agent=${agent.agent} threadId=${agent.threadId} threadName=${agent.threadName}\n`,
-                  );
                 send({
                   type: "focus-agent-pane",
-                  session: data().name,
+                  session: session.name,
                   agent: agent.agent,
                   threadId: agent.threadId,
                   threadName: agent.threadName,
                 });
               }}
-              isResizeHover={isDetailResizeHover()}
-              isResizing={isDetailResizing()}
-              onResizeStart={beginDetailResize}
-              onResizeDrag={handleDetailResizeDrag}
-              onResizeEnd={endDetailResize}
-              onResizeHoverChange={setIsDetailResizeHover}
             />
-          </scrollbox>
-        )}
-      </Show>
+          )}
+        </For>
+      </scrollbox>
 
       {/* Footer */}
       <box flexDirection="column" paddingLeft={1} paddingBottom={1} paddingTop={0} flexShrink={0}>
@@ -812,6 +696,7 @@ const HELP_KEYS: [string, string][] = [
   ["→/l", "Agents panel"],
   ["←/h/Esc", "Back to sessions"],
   ["Alt+↑↓", "Reorder sessions"],
+  ["Alt+Shift+↑↓", "Move to top/bottom"],
   ["q", "Quit"],
 ];
 

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

@@ -16,8 +16,6 @@ export interface AgentboardConfig {
   sidebarPosition?: "left" | "right";
   /** Tmux prefix key for sidebar toggle (default "s") */
   keybinding?: string;
-  /** Persisted detail panel heights keyed by mux session name */
-  detailPanelHeights?: Record<string, number>;
 }
 
 const DEFAULTS: AgentboardConfig = {};

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/index.ts

@@ -229,9 +229,19 @@ export function startServer(
     watcherAgents: AgentEvent[],
   ): AgentEvent[] {
     const paneAgents = paneAgentsBySession.get(sessionName);
-    if (!paneAgents || paneAgents.size === 0) return watcherAgents;
 
-    const result = [...watcherAgents];
+    // Drop agents whose pane has closed. Tracker only prunes terminals on a
+    // timeout, so non-terminal agents (waiting/running/question) would otherwise
+    // linger forever after their tmux pane is killed.
+    const livePaneAgents = watcherAgents.filter((a) => {
+      if (!a.paneId) return true;
+      if (TERMINAL_STATUSES.has(a.status)) return true;
+      return paneAgents?.has(instanceKey(a.agent, a.threadId)) ?? false;
+    });
+
+    if (!paneAgents || paneAgents.size === 0) return livePaneAgents;
+
+    const result = [...livePaneAgents];
     const trackedByKey = new Map(result.map((a, i) => [instanceKey(a.agent, a.threadId), i]));
 
     for (const [, presence] of paneAgents) {

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,14 +61,20 @@ export class SessionOrder {
     }
   }
 
-  /** Move a session by delta (-1 = up, 1 = down). */
-  reorder(name: string, delta: -1 | 1): 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;
-    const newIdx = idx + delta;
-    if (newIdx < 0 || newIdx >= this.order.length) return;
-    // Swap
-    [this.order[idx], this.order[newIdx]] = [this.order[newIdx]!, this.order[idx]!];
+    if (delta === "top") {
+      this.order = [name, ...this.order.filter((n) => n !== name)];
+    } else if (delta === "bottom") {
+      this.order = [...this.order.filter((n) => n !== name), name];
+    } else {
+      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]!];
+    }
     this.save();
   }
 

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 }
+  | { 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/DetailPanel.tsx

@@ -1,414 +0,0 @@
-import { createSignal, For, Show, onCleanup } from "solid-js";
-import type { Accessor } from "solid-js";
-import type { MouseEvent } from "@opentui/core";
-import type { SessionData, Theme } from "@tt-agentboard/runtime";
-import { TUI_AGENT_CLICK_LOG } from "@tt-agentboard/runtime";
-import { appendFileSync } from "node:fs";
-import {
-  SPINNERS,
-  UNSEEN_ICON,
-  BOLD,
-  DIM,
-  DIVIDER,
-  SPARK_BLOCKS,
-  TONE_ICONS,
-  toneColor,
-  logResizeDebug,
-} from "../constants";
-
-// --- Sparkline ---
-
-export function buildSparkline(
-  timestamps: number[],
-  width: number,
-  windowMs: number = 30 * 60 * 1000,
-): string {
-  if (timestamps.length === 0 || width <= 0) return "";
-  const now = Date.now();
-  const start = now - windowMs;
-  const bucketSize = windowMs / width;
-  const buckets = Array.from({ length: width }, () => 0);
-
-  for (const ts of timestamps) {
-    if (ts < start) continue;
-    const idx = Math.min(width - 1, Math.floor((ts - start) / bucketSize));
-    buckets[idx]++;
-  }
-
-  const max = Math.max(...buckets, 1);
-  return buckets
-    .map((count: number) => {
-      const level = Math.round((count / max) * (SPARK_BLOCKS.length - 1));
-      return SPARK_BLOCKS[level];
-    })
-    .join("");
-}
-
-// --- Model / cache display helpers ---
-
-function shortModel(model: string): string {
-  if (!model) return "";
-  const stripped = model.replace(/^claude-/, "").replace(/\[1m\]$/i, "");
-  return stripped;
-}
-
-const CACHE_BAR_WIDTH = 10;
-const CACHE_BAR_FILLED = "▰";
-const CACHE_BAR_EMPTY = "▱";
-
-/** Render a drain-down bar: full = freshly cached, empty = expired. */
-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);
-}
-
-// --- Detail Panel ---
-
-export interface DetailPanelProps {
-  session: SessionData;
-  theme: Accessor<Theme>;
-  statusColors: Accessor<Theme["status"]>;
-  spinIdx: Accessor<number>;
-  focusedAgentIdx: number;
-  onDismissAgent: (agent: SessionData["agents"][number]) => void;
-  onFocusAgentPane: (agent: SessionData["agents"][number]) => void;
-  isResizeHover: boolean;
-  isResizing: boolean;
-  onResizeStart: (event: MouseEvent) => void;
-  onResizeDrag: (event: MouseEvent) => void;
-  onResizeEnd: (event?: MouseEvent) => void;
-  onResizeHoverChange: (hovered: boolean) => void;
-}
-
-export function DetailPanel(props: DetailPanelProps) {
-  const P = () => props.theme().palette;
-
-  const agents = () => props.session.agents ?? [];
-  const hasAgents = () => agents().length > 0;
-  const meta = () => props.session.metadata;
-  const hasMeta = () => !!meta();
-  const visibleLogs = () => {
-    const m = meta();
-    if (!m || m.logs.length === 0) return [];
-    return m.logs.slice(-8);
-  };
-
-  const truncDir = () => {
-    const d = props.session.dir;
-    if (!d) return "";
-    const home = process.env.HOME ?? "";
-    const short = home && d.startsWith(home) ? "~" + d.slice(home.length) : d;
-    return short.length > 24 ? "…" + short.slice(short.length - 23) : short;
-  };
-
-  return (
-    <box flexDirection="column" flexShrink={0} paddingLeft={1}>
-      <box height={1}>
-        <text
-          selectable={false}
-          onMouseDown={(event) => {
-            logResizeDebug("separator:onMouseDown", {
-              x: event.x,
-              y: event.y,
-              button: event.button,
-              session: props.session.name,
-            });
-            event.preventDefault();
-            props.onResizeStart(event);
-          }}
-          onMouseDrag={(event) => {
-            logResizeDebug("separator:onMouseDrag", {
-              x: event.x,
-              y: event.y,
-              button: event.button,
-              session: props.session.name,
-            });
-            event.preventDefault();
-            props.onResizeDrag(event);
-          }}
-          onMouseDragEnd={(event) => {
-            logResizeDebug("separator:onMouseDragEnd", {
-              x: event.x,
-              y: event.y,
-              button: event.button,
-              session: props.session.name,
-            });
-            event.preventDefault();
-            props.onResizeEnd(event);
-          }}
-          onMouseUp={(event) => {
-            logResizeDebug("separator:onMouseUp", {
-              x: event.x,
-              y: event.y,
-              button: event.button,
-              session: props.session.name,
-            });
-            event.preventDefault();
-            props.onResizeEnd(event);
-          }}
-          onMouseOver={() => props.onResizeHoverChange(true)}
-          onMouseOut={() => {
-            if (!props.isResizing) props.onResizeHoverChange(false);
-          }}
-          style={{
-            fg: props.isResizing ? P().blue : props.isResizeHover ? P().overlay1 : P().surface2,
-          }}
-        >
-          {DIVIDER}
-        </text>
-      </box>
-
-      {/* Directory */}
-      <text truncate>
-        <span style={{ fg: P().overlay0, attributes: DIM }}>{truncDir()}</span>
-      </text>
-
-      {/* Agent instances */}
-      <Show when={hasAgents()}>
-        <For each={agents()}>
-          {(agent, i) => (
-            <AgentListItem
-              agent={agent}
-              palette={P}
-              statusColors={props.statusColors}
-              spinIdx={props.spinIdx}
-              isKeyboardFocused={i() === props.focusedAgentIdx}
-              onDismiss={() => props.onDismissAgent(agent)}
-              onFocusPane={() => props.onFocusAgentPane(agent)}
-            />
-          )}
-        </For>
-      </Show>
-
-      {/* Metadata: status, progress, logs */}
-      <Show when={hasMeta()}>
-        {(_) => {
-          const m = meta()!;
-          const progressText = () => {
-            const p = m.progress;
-            if (!p) return "";
-            if (p.current != null && p.total != null) return `${p.current}/${p.total}`;
-            if (p.percent != null) return `${Math.round(p.percent * 100)}%`;
-            return "";
-          };
-          return (
-            <box flexDirection="column">
-              <box height={1} />
-
-              {/* Status + progress on one line */}
-              <Show when={m.status || m.progress}>
-                <box flexDirection="row" paddingRight={1}>
-                  <Show when={m.status}>
-                    <text truncate flexGrow={1}>
-                      <span style={{ fg: toneColor(m.status!.tone, P()) }}>
-                        {TONE_ICONS[m.status!.tone ?? "neutral"]} {m.status!.text}
-                      </span>
-                    </text>
-                  </Show>
-                  <Show when={m.progress}>
-                    <text flexShrink={0}>
-                      <span style={{ fg: P().sky }}>
-                        {m.status ? " · " : ""}
-                        {progressText()}
-                        {m.progress!.label ? ` ${m.progress!.label}` : ""}
-                      </span>
-                    </text>
-                  </Show>
-                </box>
-              </Show>
-
-              {/* Log entries */}
-              <Show when={visibleLogs().length > 0}>
-                <For each={visibleLogs()}>
-                  {(entry) => (
-                    <text truncate>
-                      <span style={{ fg: toneColor(entry.tone, P()), attributes: DIM }}>
-                        {TONE_ICONS[entry.tone ?? "neutral"]}
-                      </span>
-                      <Show when={entry.source}>
-                        <span
-                          style={{ fg: P().surface2, attributes: DIM }}
-                        >{` [${entry.source}]`}</span>
-                      </Show>
-                      <span style={{ fg: P().overlay0 }}> {entry.message}</span>
-                    </text>
-                  )}
-                </For>
-              </Show>
-            </box>
-          );
-        }}
-      </Show>
-    </box>
-  );
-}
-
-// --- Agent List Item ---
-
-interface AgentListItemProps {
-  agent: SessionData["agents"][number];
-  palette: Accessor<Theme["palette"]>;
-  statusColors: Accessor<Theme["status"]>;
-  spinIdx: Accessor<number>;
-  isKeyboardFocused: boolean;
-  onDismiss: () => void;
-  onFocusPane: () => void;
-}
-
-function AgentListItem(props: AgentListItemProps) {
-  const P = () => props.palette();
-  const SC = () => props.statusColors();
-  const [isDismissHover, setIsDismissHover] = createSignal(false);
-  const [isFlash, setIsFlash] = createSignal(false);
-  const [now, setNow] = createSignal(Date.now());
-  // Tick every second while any details.cacheExpiresAt is in the future
-  // (cheap; only runs while component is mounted)
-  const ticker = setInterval(() => setNow(Date.now()), 1000);
-  onCleanup(() => clearInterval(ticker));
-
-  const isTerminal = () => ["done", "error", "interrupted"].includes(props.agent.status);
-  const isUnseen = () => isTerminal() && props.agent.unseen === true;
-
-  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 "○";
-  };
-
-  const color = () => {
-    if (isTerminal()) {
-      if (props.agent.status === "error") return P().red;
-      if (props.agent.status === "interrupted") return P().peach;
-      return isUnseen() ? P().teal : P().green;
-    }
-    return SC()[props.agent.status];
-  };
-
-  const statusText = () => {
-    if (props.agent.status === "running") return "running";
-    if (props.agent.status === "done") return "done";
-    if (props.agent.status === "error") return "error";
-    if (props.agent.status === "interrupted") return "stopped";
-    if (props.agent.status === "waiting") return "waiting";
-    if (props.agent.status === "question") return "question";
-    return "";
-  };
-
-  const triggerFlash = () => {
-    setIsFlash(true);
-    setTimeout(() => setIsFlash(false), 150);
-  };
-
-  const bgColor = () => {
-    if (isFlash()) return P().surface1;
-    if (props.isKeyboardFocused) return P().surface0;
-    return "transparent";
-  };
-
-  return (
-    <box
-      flexDirection="column"
-      flexShrink={0}
-      onMouseDown={(event) => {
-        // Don't trigger focus if clicking the dismiss button
-        if (event.target?.id === "dismiss") return;
-        appendFileSync(
-          TUI_AGENT_CLICK_LOG,
-          `[${new Date().toISOString()}] clicked agent=${props.agent.agent} thread=${props.agent.threadName ?? "?"}\n`,
-        );
-        triggerFlash();
-        props.onFocusPane();
-      }}
-    >
-      <box height={1} />
-      <box flexDirection="row" backgroundColor={bgColor()} paddingLeft={1}>
-        {/* Content column — name row + thread name row */}
-        <box flexDirection="column" flexGrow={1} paddingRight={1}>
-          {/* Row 1: icon + agent name + status + dismiss */}
-          <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>
-            </text>
-            <Show when={!isTerminal() || !isUnseen()}>
-              <text flexShrink={0}>
-                <span style={{ fg: color(), attributes: DIM }}>{statusText()}</span>
-              </text>
-            </Show>
-            <text
-              flexShrink={0}
-              onMouseDown={(event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                props.onDismiss();
-              }}
-              onMouseOver={() => setIsDismissHover(true)}
-              onMouseOut={() => setIsDismissHover(false)}
-            >
-              <span style={{ fg: isDismissHover() ? P().red : P().overlay0 }}>{" ✕"}</span>
-            </text>
-          </box>
-
-          {/* Row 2: thread name */}
-          <Show when={props.agent.threadName}>
-            <text truncate>
-              <span style={{ fg: isUnseen() ? color() : P().overlay0 }}>
-                {props.agent.threadName}
-              </span>
-            </text>
-          </Show>
-
-          {/* Row 3: model + cache-remaining progress bar */}
-          <Show when={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!, now()) : "";
-              const barColor = () => {
-                if (!hasCache()) return P().overlay0;
-                const remaining = details.cacheExpiresAt! - now();
-                if (remaining <= 0) return P().overlay0;
-                const fraction = remaining / details.cacheTtlMs!;
-                if (fraction > 0.5) return P().green;
-                if (fraction > 0.2) return P().yellow;
-                return P().peach;
-              };
-              return (
-                <Show when={model() || hasCache()}>
-                  <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>
-                  </text>
-                </Show>
-              );
-            }}
-          </Show>
-        </box>
-      </box>
-    </box>
-  );
-}

package/packages/agentboard/apps/tui/src/detail-panel-height.ts

@@ -1,21 +0,0 @@
-import { loadConfig, saveConfig } from "@tt-agentboard/runtime";
-import { MIN_DETAIL_PANEL_HEIGHT, DEFAULT_DETAIL_PANEL_HEIGHT } from "./constants";
-
-export function clampDetailPanelHeight(height: number): number {
-  return Math.max(MIN_DETAIL_PANEL_HEIGHT, Math.round(height));
-}
-
-export function getStoredDetailPanelHeight(sessionName: string): number {
-  const stored = loadConfig().detailPanelHeights?.[sessionName];
-  return typeof stored === "number" ? clampDetailPanelHeight(stored) : DEFAULT_DETAIL_PANEL_HEIGHT;
-}
-
-export function persistDetailPanelHeight(sessionName: string, height: number): void {
-  const config = loadConfig();
-  saveConfig({
-    detailPanelHeights: {
-      ...(config.detailPanelHeights ?? {}),
-      [sessionName]: clampDetailPanelHeight(height),
-    },
-  });
-}