@towles/tool 0.0.120 → 0.0.122

package/node_modules/@towles/shared/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@towles/shared",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "dependencies": {
+    "consola": "^3.4.2"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "typescript": "^5.8.3"
+  }
+}

package/node_modules/@towles/shared/src/date-utils.test.ts

@@ -0,0 +1,97 @@
+import { describe, expect, it } from "vitest";
+import { formatDate, generateJournalFilename, getMondayOfWeek, getWeekInfo } from "./date-utils";
+
+describe("date utilities", () => {
+  it("should get Monday of the week correctly", () => {
+    // Test with a Wednesday (July 9, 2025)
+    const wednesday = new Date(2025, 6, 9); // July 9, 2025
+    const monday = getMondayOfWeek(wednesday);
+    expect(formatDate(monday)).toBe("2025-07-07");
+
+    // Test with a Friday (July 11, 2025)
+    const friday = new Date(2025, 6, 11); // July 11, 2025
+    const mondayFromFriday = getMondayOfWeek(friday);
+    expect(formatDate(mondayFromFriday)).toBe("2025-07-07");
+
+    // Test with a Sunday (July 13, 2025) - should return Monday of previous week
+    const sunday = new Date(2025, 6, 13); // July 13, 2025
+    const mondayFromSunday = getMondayOfWeek(sunday);
+    expect(formatDate(mondayFromSunday)).toBe("2025-07-07");
+
+    // Test with a Monday (July 7, 2025)
+    const actualMonday = new Date(2025, 6, 7); // July 7, 2025
+    const mondayFromMonday = getMondayOfWeek(actualMonday);
+    expect(formatDate(mondayFromMonday)).toBe("2025-07-07");
+  });
+
+  it("should generate correct journal filename", () => {
+    // Test with different days in the same week
+    const wednesday = new Date(2025, 6, 9); // July 9, 2025
+    const filename = generateJournalFilename(wednesday);
+    expect(filename).toBe("2025-07-07-week.md");
+
+    const friday = new Date(2025, 6, 11); // July 11, 2025
+    const filenameFromFriday = generateJournalFilename(friday);
+    expect(filenameFromFriday).toBe("2025-07-07-week.md");
+  });
+
+  it("should format date correctly", () => {
+    // Use local date constructor (year, month-1, day), not ISO string which is UTC
+    const date = new Date(2025, 6, 7); // July 7, 2025 in local time
+    expect(formatDate(date)).toBe("2025-07-07");
+  });
+
+  it("should get week info correctly", () => {
+    // Test with Monday July 7, 2025
+    const monday = new Date(2025, 6, 7);
+    const weekInfo = getWeekInfo(monday);
+
+    expect(formatDate(weekInfo.mondayDate)).toBe("2025-07-07");
+    expect(formatDate(weekInfo.tuesdayDate)).toBe("2025-07-08");
+    expect(formatDate(weekInfo.wednesdayDate)).toBe("2025-07-09");
+    expect(formatDate(weekInfo.thursdayDate)).toBe("2025-07-10");
+    expect(formatDate(weekInfo.fridayDate)).toBe("2025-07-11");
+  });
+
+  it("should handle edge cases correctly", () => {
+    // Test with year boundary - Monday December 30, 2024
+    const mondayEndOfYear = new Date(2024, 11, 30);
+    const weekInfo = getWeekInfo(mondayEndOfYear);
+
+    expect(formatDate(weekInfo.mondayDate)).toBe("2024-12-30");
+    expect(formatDate(weekInfo.tuesdayDate)).toBe("2024-12-31");
+    expect(formatDate(weekInfo.wednesdayDate)).toBe("2025-01-01");
+    expect(formatDate(weekInfo.thursdayDate)).toBe("2025-01-02");
+    expect(formatDate(weekInfo.fridayDate)).toBe("2025-01-03");
+  });
+
+  it("should handle month boundary correctly", () => {
+    // Test with month boundary - Monday January 29, 2025
+    const mondayEndOfMonth = new Date(2025, 0, 27);
+    const weekInfo = getWeekInfo(mondayEndOfMonth);
+
+    expect(formatDate(weekInfo.mondayDate)).toBe("2025-01-27");
+    expect(formatDate(weekInfo.tuesdayDate)).toBe("2025-01-28");
+    expect(formatDate(weekInfo.wednesdayDate)).toBe("2025-01-29");
+    expect(formatDate(weekInfo.thursdayDate)).toBe("2025-01-30");
+    expect(formatDate(weekInfo.fridayDate)).toBe("2025-01-31");
+  });
+
+  it("should handle getMondayOfWeek with different timezones", () => {
+    // Test with a specific time to ensure hours are reset
+    const dateWithTime = new Date(2025, 6, 9, 15, 30, 45); // July 9, 2025 at 3:30:45 PM
+    const monday = getMondayOfWeek(dateWithTime);
+
+    expect(formatDate(monday)).toBe("2025-07-07");
+    expect(monday.getHours()).toBe(0);
+    expect(monday.getMinutes()).toBe(0);
+    expect(monday.getSeconds()).toBe(0);
+    expect(monday.getMilliseconds()).toBe(0);
+  });
+
+  it("should handle formatDate with different times", () => {
+    // Test that formatDate only considers the date part
+    const dateWithTime = new Date(2025, 6, 7, 10, 30, 45); // July 7, 2025 at 10:30:45 AM
+    expect(formatDate(dateWithTime)).toBe("2025-07-07");
+  });
+});

package/node_modules/@towles/shared/src/date-utils.ts

@@ -0,0 +1,54 @@
+/**
+ * Get the Monday of the week for a given date
+ */
+export function getMondayOfWeek(date: Date): Date {
+  const newDate = new Date(date);
+  const day = newDate.getDay();
+  const diff = newDate.getDate() - day + (day === 0 ? -6 : 1);
+  newDate.setDate(diff);
+  newDate.setHours(0, 0, 0, 0);
+  return newDate;
+}
+
+interface weekInfo {
+  mondayDate: Date;
+  tuesdayDate: Date;
+  wednesdayDate: Date;
+  thursdayDate: Date;
+  fridayDate: Date;
+}
+
+export function getWeekInfo(mondayDate: Date): weekInfo {
+  const tuesdayDate = new Date(mondayDate);
+  tuesdayDate.setDate(mondayDate.getDate() + 1);
+  const wednesdayDate = new Date(mondayDate);
+  wednesdayDate.setDate(mondayDate.getDate() + 2);
+  const thursdayDate = new Date(mondayDate);
+  thursdayDate.setDate(mondayDate.getDate() + 3);
+  const fridayDate = new Date(mondayDate);
+  fridayDate.setDate(mondayDate.getDate() + 4);
+
+  return {
+    mondayDate,
+    tuesdayDate,
+    wednesdayDate,
+    thursdayDate,
+    fridayDate,
+  };
+}
+
+/**
+ * Format date as YYYY-MM-DD in local timezone
+ */
+export function formatDate(date: Date): string {
+  return date.toLocaleDateString("en-CA");
+}
+
+/**
+ * Generate journal filename based on Monday of the current week
+ * Format: YYYY-MM-DD-week.md (always uses Monday's date)
+ */
+export function generateJournalFilename(date: Date = new Date()): string {
+  const monday = getMondayOfWeek(new Date(date));
+  return `${formatDate(monday)}-week.md`;
+}

package/node_modules/@towles/shared/src/fs.ts

@@ -0,0 +1,19 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname } from "node:path";
+
+export function ensureDir(dir: string): void {
+  mkdirSync(dir, { recursive: true });
+}
+
+export function fileExists(path: string): boolean {
+  return existsSync(path);
+}
+
+export function readFile(path: string): string {
+  return readFileSync(path, "utf-8");
+}
+
+export function writeFile(path: string, content: string): void {
+  ensureDir(dirname(path));
+  writeFileSync(path, content, "utf-8");
+}

package/node_modules/@towles/shared/src/git/branch-name.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, it } from "vitest";
+import { createBranchNameFromIssue } from "./branch-name";
+
+describe("createBranchNameFromIssue", () => {
+  it("creates branch name from issue with basic title", () => {
+    const branchName = createBranchNameFromIssue({
+      number: 4,
+      title: "Long Issue Title - with a lot of words     and stuff ",
+    });
+    expect(branchName).toBe("feature/4-long-issue-title-with-a-lot-of-words-and-stuff");
+  });
+
+  it("handles special characters in title", () => {
+    const branchName = createBranchNameFromIssue({
+      number: 123,
+      title: "Fix bug: @user reported $100 issue!",
+    });
+    expect(branchName).toBe("feature/123-fix-bug-user-reported-100-issue");
+  });
+
+  it("handles title with only numbers", () => {
+    const branchName = createBranchNameFromIssue({ number: 42, title: "123 456" });
+    expect(branchName).toBe("feature/42-123-456");
+  });
+
+  it("trims trailing dashes", () => {
+    const branchName = createBranchNameFromIssue({ number: 7, title: "Update docs ---" });
+    expect(branchName).toBe("feature/7-update-docs");
+  });
+
+  it("handles unicode characters", () => {
+    const branchName = createBranchNameFromIssue({ number: 99, title: "Fix für Übersetzung" });
+    expect(branchName).toBe("feature/99-fix-f-r-bersetzung");
+  });
+
+  it("handles empty-ish title", () => {
+    const branchName = createBranchNameFromIssue({ number: 1, title: "   " });
+    expect(branchName).toBe("feature/1-");
+  });
+
+  it("handles title with underscores", () => {
+    const branchName = createBranchNameFromIssue({ number: 50, title: "snake_case_title" });
+    expect(branchName).toBe("feature/50-snake_case_title");
+  });
+
+  it("handles very long titles", () => {
+    const branchName = createBranchNameFromIssue({
+      number: 200,
+      title: "This is a very long issue title that goes on and on with many words",
+    });
+    expect(branchName).toBe(
+      "feature/200-this-is-a-very-long-issue-title-that-goes-on-and-on-with-many-words",
+    );
+  });
+
+  it("collapses multiple consecutive dashes", () => {
+    const branchName = createBranchNameFromIssue({
+      number: 15,
+      title: "Fix   multiple    spaces",
+    });
+    expect(branchName).toBe("feature/15-fix-multiple-spaces");
+  });
+
+  it("handles title with brackets and parentheses", () => {
+    const branchName = createBranchNameFromIssue({
+      number: 33,
+      title: "[Bug] Fix (critical) issue",
+    });
+    expect(branchName).toBe("feature/33--bug-fix-critical-issue");
+  });
+
+  it("produces same result whether called with minimal or extra fields", () => {
+    const minimal = createBranchNameFromIssue({ number: 90, title: "Add e2e tests" });
+    const withExtras = createBranchNameFromIssue({
+      number: 90,
+      title: "Add e2e tests",
+      state: "open",
+      labels: [],
+    } as { number: number; title: string });
+    expect(minimal).toBe(withExtras);
+    expect(minimal).toBe("feature/90-add-e2e-tests");
+  });
+});

package/node_modules/@towles/shared/src/git/branch-name.ts

@@ -0,0 +1,10 @@
+export function createBranchNameFromIssue(issue: { number: number; title: string }): string {
+  let slug = issue.title.toLowerCase();
+  slug = slug.trim();
+  slug = slug.replaceAll(" ", "-");
+  slug = slug.replace(/[^0-9a-zA-Z_-]/g, "-");
+  slug = slug.replace(/-+/g, "-");
+  slug = slug.replace(/-+$/, "");
+
+  return `feature/${issue.number}-${slug}`;
+}

package/node_modules/@towles/shared/src/git/exec.ts

@@ -0,0 +1,41 @@
+export interface XResult {
+  stdout: string;
+  stderr: string;
+  exitCode: number;
+}
+
+export interface XOptions {
+  throwOnError?: boolean;
+  cwd?: string;
+}
+
+export async function run(cmd: string, args: string[] = [], options?: XOptions): Promise<XResult> {
+  const cwd = options?.cwd ?? process.cwd();
+  const proc = Bun.spawn([cmd, ...args], { cwd, stdout: "pipe", stderr: "pipe" });
+  const exitCode = await proc.exited;
+  const [stdout, stderr] = await Promise.all([
+    new Response(proc.stdout).text(),
+    new Response(proc.stderr).text(),
+  ]);
+  if (options?.throwOnError && exitCode !== 0) {
+    throw new Error(`Command failed (exit ${exitCode}): ${cmd} ${args.join(" ")}\n${stderr}`);
+  }
+  return { stdout, stderr, exitCode };
+}
+
+export async function exec(cmd: string, args: string[]): Promise<string> {
+  const result = await run(cmd, args, { throwOnError: true });
+  return result.stdout.trim();
+}
+
+export async function execSafe(
+  cmd: string,
+  args: string[],
+): Promise<{ stdout: string; ok: boolean }> {
+  const result = await run(cmd, args);
+  return { stdout: result.stdout.trim(), ok: result.exitCode === 0 };
+}
+
+export async function git(args: string[]): Promise<string> {
+  return exec("git", args);
+}

package/node_modules/@towles/shared/src/git/gh-cli-wrapper.test.ts

@@ -0,0 +1,55 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { Mock } from "vitest";
+
+import type { XFn } from "./gh-cli-wrapper";
+import { getIssues, isGithubCliInstalled } from "./gh-cli-wrapper";
+
+const mockX = vi.fn().mockResolvedValue({ stdout: "[]", stderr: "", exitCode: 0 }) as Mock & XFn;
+
+describe("gh-cli-wrapper", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockX.mockResolvedValue({ stdout: "[]", stderr: "", exitCode: 0 });
+  });
+
+  describe("getIssues", () => {
+    it("passes --label flag when label provided", async () => {
+      await getIssues({ cwd: ".", label: "auto-claude", exec: mockX });
+
+      expect(mockX).toHaveBeenCalledWith("gh", expect.arrayContaining(["--label", "auto-claude"]));
+    });
+
+    it("does not pass --label flag when label not provided", async () => {
+      await getIssues({ cwd: ".", exec: mockX });
+
+      const args = mockX.mock.calls[0]![1] as string[];
+      expect(args).not.toContain("--label");
+    });
+
+    it("passes --assignee @me flag when assignedToMe is true", async () => {
+      await getIssues({ cwd: ".", assignedToMe: true, exec: mockX });
+
+      expect(mockX).toHaveBeenCalledWith("gh", expect.arrayContaining(["--assignee", "@me"]));
+    });
+  });
+
+  describe("isGithubCliInstalled", () => {
+    it("returns true when gh CLI outputs expected string", async () => {
+      mockX.mockResolvedValue({
+        stdout: "gh version 2.0.0 (https://github.com/cli/cli)",
+        stderr: "",
+        exitCode: 0,
+      });
+
+      const result = await isGithubCliInstalled(mockX);
+      expect(result).toBe(true);
+    });
+
+    it("returns false when gh CLI is not available", async () => {
+      mockX.mockRejectedValue(new Error("command not found"));
+
+      const result = await isGithubCliInstalled(mockX);
+      expect(result).toBe(false);
+    });
+  });
+});

package/node_modules/@towles/shared/src/git/gh-cli-wrapper.ts

@@ -0,0 +1,74 @@
+import { exec, execSafe, run as defaultX } from "./exec.js";
+import type { XResult } from "./exec.js";
+
+export type XFn = (
+  cmd: string,
+  args?: string[],
+  opts?: Record<string, unknown>,
+) => PromiseLike<XResult>;
+
+export async function isGithubCliInstalled(execFn: XFn = defaultX): Promise<boolean> {
+  try {
+    const proc = await execFn("gh", ["--version"]);
+    return proc.stdout.includes("https://github.com/cli/cli");
+  } catch {
+    return false;
+  }
+}
+
+export async function gh<T = unknown>(args: string[]): Promise<T> {
+  const stdout = await exec("gh", args);
+  return JSON.parse(stdout) as T;
+}
+
+export async function ghRaw(
+  args: string[],
+  execFn?: (cmd: string, args: string[]) => Promise<{ stdout: string; ok: boolean }>,
+): Promise<string> {
+  const fn = execFn ?? execSafe;
+  const result = await fn("gh", args);
+  return result.stdout;
+}
+
+export interface Issue {
+  labels: {
+    name: string;
+    color: string;
+  }[];
+  number: number;
+  title: string;
+  state: string;
+}
+
+export async function getIssues({
+  assignedToMe,
+  cwd,
+  label,
+  exec: execFn = defaultX,
+}: {
+  assignedToMe?: boolean;
+  cwd: string;
+  exec?: XFn;
+  label?: string;
+}): Promise<Issue[]> {
+  const args = ["issue", "list", "--json", "labels,number,title,state"];
+
+  if (assignedToMe) {
+    args.push("--assignee", "@me");
+  }
+
+  if (label) {
+    args.push("--label", label);
+  }
+
+  const result = await execFn("gh", args);
+  const stripped = Bun.stripANSI(result.stdout);
+
+  try {
+    return JSON.parse(stripped) as Issue[];
+  } catch {
+    throw new Error(
+      `Failed to parse GitHub CLI output as JSON. Raw output: ${stripped.slice(0, 200)}${stripped.length > 200 ? "..." : ""}`,
+    );
+  }
+}

package/node_modules/@towles/shared/src/index.ts

@@ -0,0 +1,8 @@
+export { ensureDir, fileExists, readFile, writeFile } from "./fs.js";
+export { getTerminalColumns, limitText, printWithHexColor } from "./render.js";
+export { formatDate, generateJournalFilename, getMondayOfWeek, getWeekInfo } from "./date-utils.js";
+export { exec, execSafe, git, run } from "./git/exec.js";
+export type { XResult, XOptions } from "./git/exec.js";
+export { gh, ghRaw, getIssues, isGithubCliInstalled } from "./git/gh-cli-wrapper.js";
+export type { Issue, XFn } from "./git/gh-cli-wrapper.js";
+export { createBranchNameFromIssue } from "./git/branch-name.js";

package/node_modules/@towles/shared/src/render.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from "vitest";
+import { printWithHexColor } from "./render";
+
+describe("printWithHexColor", () => {
+  it("should handle hex colors with # prefix", () => {
+    const result = printWithHexColor({ msg: "test", hex: "#ff0000" });
+    expect(result).toBe("\x1B[38;2;255;0;0mtest\x1B[0m");
+  });
+
+  it("should handle hex colors without # prefix", () => {
+    const result = printWithHexColor({ msg: "test", hex: "ff0000" });
+    expect(result).toBe("\x1B[38;2;255;0;0mtest\x1B[0m");
+  });
+
+  it("should handle green color correctly", () => {
+    const result = printWithHexColor({ msg: "green", hex: "#00ff00" });
+    expect(result).toBe("\x1B[38;2;0;255;0mgreen\x1B[0m");
+  });
+
+  it("should handle blue color correctly", () => {
+    const result = printWithHexColor({ msg: "blue", hex: "0000ff" });
+    expect(result).toBe("\x1B[38;2;0;0;255mblue\x1B[0m");
+  });
+
+  it("should handle mixed RGB values", () => {
+    const result = printWithHexColor({ msg: "purple", hex: "#800080" });
+    expect(result).toBe("\x1B[38;2;128;0;128mpurple\x1B[0m");
+  });
+
+  it("should handle GitHub-style label colors", () => {
+    // GitHub red label color
+    const result = printWithHexColor({ msg: "bug", hex: "d73a49" });
+    expect(result).toBe("\x1B[38;2;215;58;73mbug\x1B[0m");
+  });
+
+  it("should handle lowercase hex values", () => {
+    const result = printWithHexColor({ msg: "test", hex: "abc123" });
+    expect(result).toBe("\x1B[38;2;171;193;35mtest\x1B[0m");
+  });
+
+  it("should handle uppercase hex values", () => {
+    const result = printWithHexColor({ msg: "test", hex: "ABC123" });
+    expect(result).toBe("\x1B[38;2;171;193;35mtest\x1B[0m");
+  });
+
+  it("should handle empty message", () => {
+    const result = printWithHexColor({ msg: "", hex: "#ff0000" });
+    expect(result).toBe("\x1B[38;2;255;0;0m\x1B[0m");
+  });
+
+  it("should handle message with spaces", () => {
+    const result = printWithHexColor({ msg: "hello world", hex: "#ffffff" });
+    expect(result).toBe("\x1B[38;2;255;255;255mhello world\x1B[0m");
+  });
+
+  it("should handle black color (000000)", () => {
+    const result = printWithHexColor({ msg: "black", hex: "000000" });
+    expect(result).toBe("\x1B[38;2;0;0;0mblack\x1B[0m");
+  });
+
+  it("should handle white color (ffffff)", () => {
+    const result = printWithHexColor({ msg: "white", hex: "ffffff" });
+    expect(result).toBe("\x1B[38;2;255;255;255mwhite\x1B[0m");
+  });
+
+  it("should preserve message content exactly", () => {
+    const specialMessage = "special-chars_123!@#";
+    const result = printWithHexColor({ msg: specialMessage, hex: "#123456" });
+    expect(result).toBe(`\x1B[38;2;18;52;86m${specialMessage}\x1B[0m`);
+  });
+});

package/node_modules/@towles/shared/src/render.ts

@@ -0,0 +1,36 @@
+import { colors } from "consola/utils";
+
+export function getTerminalColumns(): number {
+  return process.stdout?.columns || 80;
+}
+
+export const limitText = (text: string, maxWidth: number): string => {
+  if (text.length <= maxWidth) return text;
+  // subtract 1 so room for the ellipsis
+  return `${text.slice(0, maxWidth - 1)}${colors.dim("…")}`;
+};
+
+/**
+ * Convert hex color to RGB values
+ */
+function hexToRgb(hex: string): { r: number; g: number; b: number } {
+  const cleanHex = hex.replace("#", "");
+  const r = Number.parseInt(cleanHex.slice(0, 2), 16);
+  const g = Number.parseInt(cleanHex.slice(2, 4), 16);
+  const b = Number.parseInt(cleanHex.slice(4, 6), 16);
+  return { r, g, b };
+}
+
+/**
+ * Apply hex color to text using ANSI 24-bit color codes
+ */
+export function printWithHexColor({ msg, hex }: { msg: string; hex: string }): string {
+  const colorWithHex = hex.startsWith("#") ? hex : `#${hex}`;
+  const { r, g, b } = hexToRgb(colorWithHex);
+
+  // Use ANSI 24-bit color: \x1B[38;2;r;g;bm for foreground color
+  const colorStart = `\x1B[38;2;${r};${g};${b}m`;
+  const colorEnd = "\x1B[0m"; // Reset color
+
+  return `${colorStart}${msg}${colorEnd}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@towles/tool",
-  "version": "0.0.120",
+  "version": "0.0.122",
   "description": "One off quality of life scripts that I use on a daily basis.",
   "homepage": "https://github.com/ChrisTowles/towles-tool#readme",
   "bugs": {
@@ -77,6 +77,9 @@
     "typescript": "^5.8.3",
     "vitest": "^4.0.17"
   },
+  "bundledDependencies": [
+    "@towles/shared"
+  ],
   "simple-git-hooks": {
     "pre-commit": "bun run format:check && bun run lint && bun run typecheck && claude plugin validate ."
   },

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

@@ -1,4 +1,4 @@
-import { createSignal, For, Show } from "solid-js";
+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";
@@ -44,6 +44,27 @@ export function buildSparkline(
     .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 {
@@ -242,6 +263,11 @@ function AgentListItem(props: AgentListItemProps) {
   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;
@@ -346,6 +372,41 @@ function AgentListItem(props: AgentListItemProps) {
               </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>