@towles/tool 0.0.123 → 0.0.124

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@towles/tool",
-  "version": "0.0.123",
+  "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/apps/tui/src/components/SessionCard.tsx

@@ -1,9 +1,11 @@
-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 { cacheBarVisual, shortModel } from "./cache-bar";
+import { liveStatusIcon, unseenTerminalColor } from "./status-visuals";
 
 const STATUS_TEXT: Record<AgentStatus, string> = {
   idle: "",
@@ -21,6 +23,7 @@ export interface SessionCardProps {
   isFocused: boolean;
   isCurrent: boolean;
   spinIdx: Accessor<number>;
+  now: Accessor<number>;
   theme: Accessor<Theme>;
   statusColors: Accessor<Theme["status"]>;
   focusedAgentIdx: number;
@@ -42,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;
@@ -53,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()];
   };
 
@@ -85,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;
@@ -126,14 +111,6 @@ export function SessionCard(props: SessionCardProps) {
 
   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
@@ -196,7 +173,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 +210,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];
   };
@@ -324,23 +302,25 @@ function AgentRow(props: AgentRowProps) {
           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 = () =>
+          const visual = () =>
             hasCache()
-              ? cacheBarColor(details.cacheExpiresAt!, details.cacheTtlMs!, props.now(), P())
-              : P().overlay0;
+              ? 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={hasCache()}>
-                  <span style={{ fg: P().overlay0, attributes: DIM }}>
-                    {model() ? " · cache " : "cache "}
-                  </span>
-                  <span style={{ fg: barColor() }}>{bar()}</span>
+                <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>

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

@@ -4,30 +4,30 @@ 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 {
+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 CACHE_BAR_EMPTY.repeat(CACHE_BAR_WIDTH);
+  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);
-  return CACHE_BAR_FILLED.repeat(filled) + CACHE_BAR_EMPTY.repeat(CACHE_BAR_WIDTH - filled);
+  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, "");
 }
-
-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/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,7 +15,13 @@ 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";
@@ -369,6 +375,18 @@ 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(() => {
+    if (!hasActiveCache()) return;
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    onCleanup(() => clearInterval(id));
+  });
+
   useKeyboard((key) => {
     const currentModal = modal();
 
@@ -397,13 +415,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;
@@ -541,6 +554,7 @@ function App() {
               isFocused={isFocused(session.name)}
               isCurrent={session.name === currentSession()}
               spinIdx={spinIdx}
+              now={now}
               theme={theme}
               statusColors={S}
               focusedAgentIdx={

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