taskchef 7.24.0 → 7.25.0

package/src/dashboard/react/presentation.test.tsx

@@ -1,10 +1,17 @@
 import { MantineProvider } from "@mantine/core";
-import { render, screen } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 import { describe, expect, test } from "vitest";
 import { fixtureTask } from "./fixtures";
-import { turnUsageView, usageStillCalculating, usageView } from "./presentation";
+import {
+  formatCompactTokens,
+  formatEstimatedCost,
+  turnUsageView,
+  usageStillCalculating,
+  usageView,
+} from "./presentation";
 import { ShimmerText } from "./components/ShimmerText";
 import { GitHubLinks } from "./components/GitHubLinks";
+import { LinkedText } from "./components/LinkedText";
 import { UsagePanel } from "./components/UsagePanel";
 
 describe("token and working presentation", () => {
@@ -21,7 +28,7 @@ describe("token and working presentation", () => {
         status: "available",
         task: { totalTokens: 12345, estimatedCostUsd: 0.1234 },
       },
-    })).label).toBe("12,345 tokens · Estimated cost $0.1234");
+    })).label).toBe("12.35K tokens · Estimated cost $0.12");
     expect(usageView(fixtureTask({ status: "completed", usage: { status: "unavailable" } })).label)
       .toBe("Token usage unavailable");
     expect(usageView(fixtureTask({
@@ -43,7 +50,7 @@ describe("token and working presentation", () => {
       },
     }));
     expect(view.kind).toBe("ready");
-    expect(view.label).toBe("12,345 tokens · Estimated cost $0.1234 · known so far");
+    expect(view.label).toBe("12.35K tokens · Estimated cost $0.12 · known so far");
     if (view.kind === "ready") expect(view.knownSoFar).toBe(true);
   });
 
@@ -64,7 +71,7 @@ describe("token and working presentation", () => {
         updatedAt: task.updatedAt,
       },
     };
-    expect(turnUsageView(task, completedTurn).label).toBe("330 tokens · Estimated cost $0.1200");
+    expect(turnUsageView(task, completedTurn).label).toBe("330 tokens · Estimated cost $0.12");
     expect(turnUsageView(task, { ...completedTurn, result: null }).label).toBe("Turn usage pending");
     expect(turnUsageView({
       ...task,
@@ -115,7 +122,7 @@ describe("token and working presentation", () => {
     );
 
     expect(screen.getByText("Tokens").nextSibling).toHaveTextContent("330");
-    expect(screen.getByText("Estimated cost").nextSibling).toHaveTextContent("$0.1200");
+    expect(screen.getByText("Estimated cost").nextSibling).toHaveTextContent("$0.12");
     expect(screen.getByText("Model").nextSibling).toHaveTextContent("gpt-5.6-sol, gpt-5.6-luna");
     expect(screen.getByText("Cache ratio").nextSibling).toHaveTextContent("67%");
     expect(screen.queryByText(/API-equivalent/i)).not.toBeInTheDocument();
@@ -125,4 +132,110 @@ describe("token and working presentation", () => {
     render(<MantineProvider><GitHubLinks task={fixtureTask()} /></MantineProvider>);
     expect(screen.getByRole("link")).toHaveClass("taskchef-github-link");
   });
+
+  test("formats compact token boundaries without scientific notation", () => {
+    expect([
+      0,
+      999,
+      1_000,
+      1_100,
+      12_345,
+      999_999,
+      1_320_000,
+      1_000_000_000,
+    ].map((value) => formatCompactTokens(value, "en-US"))).toEqual([
+      "0",
+      "999",
+      "1K",
+      "1.1K",
+      "12.35K",
+      "1M",
+      "1.32M",
+      "1B",
+    ]);
+  });
+
+  test("formats estimates to two decimals across zero, sub-cent, missing, and large values", () => {
+    expect(formatEstimatedCost(0, "en-US")).toBe("$0.00");
+    expect(formatEstimatedCost(0.0049, "en-US")).toBe("$0.00");
+    expect(formatEstimatedCost(12.344, "en-US")).toBe("$12.34");
+    expect(formatEstimatedCost(12.345, "en-US")).toBe("$12.35");
+    expect(formatEstimatedCost(null, "en-US")).toBe("—");
+    expect(formatEstimatedCost(Number.NaN, "en-US")).toBe("—");
+    expect(formatEstimatedCost(1_234_567_890.125, "en-US")).toBe("$1,234,567,890.13");
+  });
+
+  test("exposes full token precision and the unrounded estimate on ready metric cards", () => {
+    render(
+      <MantineProvider>
+        <UsagePanel task={fixtureTask({
+          status: "completed",
+          usage: {
+            status: "available",
+            task: { totalTokens: 1_324_567, estimatedCostUsd: 12.3449 },
+          },
+        })} />
+      </MantineProvider>,
+    );
+    expect(screen.getByLabelText("1,324,567 tokens")).toHaveTextContent("1.32M");
+    expect(screen.getByLabelText("1,324,567 tokens")).toHaveAttribute("title", "1,324,567 tokens");
+    expect(screen.getByLabelText("Estimated cost $12.34")).toHaveTextContent("$12.34");
+    expect(screen.getByLabelText("Estimated cost $12.34")).toHaveAttribute(
+      "title",
+      "Unrounded estimate: $12.3449",
+    );
+  });
+
+  test("groups, deduplicates, and naturally sorts compact related links by repository", () => {
+    const task = fixtureTask({
+      relatedGitHubLinks: [
+        ["taskchef", "83", "pull"],
+        ["guzuoshou-workspace", "124", "issue"],
+        ["taskchef", "79", "issue"],
+        ["guzuoshou-workspace", "108", "issue"],
+        ["taskchef", "80", "issue"],
+        ["guzuoshou-workspace", "109", "pull"],
+        ["taskchef", "79", "pull"],
+      ].map(([repository, number, type]) => ({
+        label: `favoyang/${repository}#${number}`,
+        number,
+        owner: "favoyang",
+        repository,
+        type: type as "issue" | "pull",
+        url: `https://github.com/favoyang/${repository}/${type === "pull" ? "pull" : "issues"}/${number}`,
+      })),
+    });
+    const { container } = render(<MantineProvider><GitHubLinks task={task} /></MantineProvider>);
+    const groups = container.querySelectorAll(".taskchef-github-group");
+    expect(groups).toHaveLength(2);
+    expect(within(groups[0] as HTMLElement).getAllByRole("link").map((link) => link.textContent))
+      .toEqual(["taskchef #79", "#80", "#83"]);
+    expect(within(groups[1] as HTMLElement).getAllByRole("link").map((link) => link.textContent))
+      .toEqual(["guzuoshou-workspace #108", "#109", "#124"]);
+    const first = screen.getByRole("link", { name: /favoyang\/taskchef Issue #79/ });
+    expect(first).toHaveAttribute("href", "https://github.com/favoyang/taskchef/issues/79");
+    expect(first).toHaveAttribute("target", "_blank");
+    expect(first).toHaveAttribute("rel", "noopener noreferrer");
+    expect(screen.queryByText(/PR #|Issue #/)).not.toBeInTheDocument();
+  });
+
+  test("keeps established inline request and result link labels", () => {
+    const task = fixtureTask({
+      project: {
+        name: "TaskChef Preview",
+        path: "/tmp/taskchef-preview-project",
+        githubRepos: ["https://github.com/favoyang/taskchef"],
+      },
+      relatedGitHubRepository: "favoyang/taskchef",
+    });
+    const { container } = render(
+      <MantineProvider>
+        <div>
+          <LinkedText task={task} text="Review https://github.com/favoyang/taskchef/pull/83." />
+        </div>
+      </MantineProvider>,
+    );
+    expect(within(container).getByRole("link", { name: /favoyang\/taskchef PR #83/ }))
+      .toHaveTextContent("taskchef PR #83");
+  });
 });

package/src/dashboard/react/presentation.ts

@@ -1,5 +1,27 @@
 import type { Task, UsageNumbers, UsageProjection } from "./types";
 
+export function formatCompactTokens(value: number, locales?: Intl.LocalesArgument) {
+  return new Intl.NumberFormat(locales, {
+    maximumFractionDigits: 2,
+    notation: "compact",
+  }).format(value);
+}
+
+export function formatFullTokens(value: number, locales?: Intl.LocalesArgument) {
+  return new Intl.NumberFormat(locales, { maximumFractionDigits: 2 }).format(value);
+}
+
+export function formatEstimatedCost(value: number | null | undefined, locales?: Intl.LocalesArgument) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return "—";
+  return new Intl.NumberFormat(locales, {
+    currency: "USD",
+    currencyDisplay: "narrowSymbol",
+    maximumFractionDigits: 2,
+    minimumFractionDigits: 2,
+    style: "currency",
+  }).format(value);
+}
+
 export type UsageView =
   | { kind: "pending"; label: "Token usage pending" }
   | { kind: "calculating"; label: "Calculating token usage" }
@@ -29,10 +51,10 @@ export function usageView(task: Task): UsageView {
 }
 
 function readyUsageView(usage: UsageNumbers, knownSoFar: boolean): UsageView {
-  const tokens = new Intl.NumberFormat().format(usage.totalTokens);
+  const tokens = formatCompactTokens(usage.totalTokens);
   const cost = usage.estimatedCostUsd == null
     ? "Estimated cost unavailable"
-    : `Estimated cost $${usage.estimatedCostUsd.toFixed(4)}`;
+    : `Estimated cost ${formatEstimatedCost(usage.estimatedCostUsd)}`;
   return {
     kind: "ready",
     knownSoFar,
@@ -49,10 +71,10 @@ export function turnUsageView(task: Task, turn: NonNullable<Task["turns"]>[numbe
     return { kind: "calculating" as const, label: "Calculating turn usage" };
   }
   if (usage?.status === "available" && typeof usage.totalTokens === "number") {
-    const tokens = new Intl.NumberFormat().format(usage.totalTokens);
+    const tokens = formatFullTokens(usage.totalTokens);
     const cost = usage.estimatedCostUsd == null
       ? "Estimated cost unavailable"
-      : `Estimated cost $${usage.estimatedCostUsd.toFixed(4)}`;
+      : `Estimated cost ${formatEstimatedCost(usage.estimatedCostUsd)}`;
     return { kind: "ready" as const, label: `${tokens} tokens · ${cost}` };
   }
   return {
@@ -67,6 +89,53 @@ export function usageStillCalculating(task: Task) {
       || Object.values(task.usage?.turns ?? {}).some((turn) => turn.status === "calculating"));
 }
 
+export type ListUsageView = {
+  accessibleLabel: string;
+  kind: "pending" | "calculating" | "ready" | "unavailable";
+  label: string;
+  title: string;
+};
+
+export function listUsageView(task: Task): ListUsageView {
+  const view = usageView(task);
+  if (view.kind === "pending" || view.kind === "calculating") {
+    return {
+      accessibleLabel: view.label,
+      kind: view.kind,
+      label: view.label,
+      title: view.label,
+    };
+  }
+  if (view.kind === "unavailable") {
+    return {
+      accessibleLabel: `Token usage unavailable${view.label === "Token usage unavailable" ? "" : `: ${view.label}`}`,
+      kind: "unavailable",
+      label: "Token usage unavailable",
+      title: view.label,
+    };
+  }
+  const compactTokens = formatCompactTokens(view.usage.totalTokens);
+  const fullTokens = formatFullTokens(view.usage.totalTokens);
+  const cost = view.usage.estimatedCostUsd == null
+    ? "cost unavailable"
+    : `est. ${formatEstimatedCost(view.usage.estimatedCostUsd)}`;
+  const qualifier = view.knownSoFar ? " · known so far" : "";
+  const freshness = view.usage.sourceUpdatedAt ?? view.usage.sampledAt ?? task.usage?.updatedAt ?? null;
+  const freshnessLabel = freshness && !Number.isNaN(Date.parse(freshness))
+    ? ` Cached usage updated ${new Date(freshness).toLocaleString()}.`
+    : "";
+  return {
+    accessibleLabel: `${fullTokens} tokens; ${view.usage.estimatedCostUsd == null
+      ? "estimated cost unavailable"
+      : `estimated cost ${formatEstimatedCost(view.usage.estimatedCostUsd)}`}${view.knownSoFar ? "; known so far" : ""}.${freshnessLabel}`,
+    kind: "ready",
+    label: `${compactTokens} tokens · ${cost}${qualifier}`,
+    title: `${fullTokens} tokens · ${view.usage.estimatedCostUsd == null
+      ? "estimated cost unavailable"
+      : `unrounded estimate $${view.usage.estimatedCostUsd}`}${view.knownSoFar ? " · known so far" : ""}.${freshnessLabel}`,
+  };
+}
+
 export function statusColor(status: Task["status"] | "interrupted") {
   if (status === "completed") return "teal";
   if (status === "needs_input") return "yellow";

package/src/dashboard/react/styles.css

@@ -33,7 +33,10 @@ body {
 .taskchef-task-row { background: light-dark(#fff, #202421); box-shadow: 0 1px 0 light-dark(rgb(22 31 25 / 3%), transparent); }
 .taskchef-task-row:hover { border-color: light-dark(var(--mantine-color-teal-4), var(--mantine-color-teal-8)); }
 .taskchef-task-main { min-width: 0; flex: 1; }
+.taskchef-card-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--mantine-spacing-sm); }
+.taskchef-card-metadata { width: max-content; min-width: 0; max-width: min(25rem, 45vw); }
 .taskchef-status-badge { flex: none; }
+.taskchef-task-usage { max-width: 100%; text-align: right; line-height: 1.25; overflow-wrap: anywhere; }
 .taskchef-title-button {
   all: unset;
   border-radius: 3px;
@@ -48,6 +51,11 @@ body {
 .taskchef-preserve-lines { white-space: pre-wrap; overflow-wrap: anywhere; }
 .taskchef-github-link { color: var(--taskchef-accent); text-decoration: none; }
 .taskchef-github-link:hover { text-decoration: underline; text-underline-offset: 3px; }
+.taskchef-github-link:focus-visible { outline: 2px solid var(--mantine-color-teal-6); outline-offset: 2px; border-radius: 2px; }
+.taskchef-github-groups { display: grid; min-width: 0; gap: 3px; }
+.taskchef-github-group { min-width: 0; }
+.taskchef-github-reference-ambiguous { border-bottom: 2px dotted var(--mantine-color-yellow-7); cursor: help; }
+.taskchef-github-reference-ambiguous:focus-visible { outline: 2px solid var(--mantine-color-yellow-7); outline-offset: 2px; }
 .taskchef-time { display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 2px 3px; border-radius: 4px; color: var(--taskchef-muted); font-size: 0.7rem; line-height: 1.2; }
 .taskchef-time:hover { color: var(--taskchef-text); background: var(--taskchef-surface-muted); }
 .taskchef-time:focus-visible { outline: 2px solid var(--mantine-color-teal-6); outline-offset: 2px; }
@@ -120,4 +128,8 @@ body {
 @media (max-width: 34em) {
   .taskchef-header { padding-top: 22px; padding-bottom: 18px; }
   .taskchef-brand-icon, .taskchef-brand-icon img { width: 36px; height: 36px; }
+  .taskchef-card-heading { grid-template-columns: minmax(0, 1fr); }
+  .taskchef-card-metadata { align-items: flex-start; width: 100%; max-width: 100%; }
+  .taskchef-task-usage { text-align: left; }
+  .taskchef-card-footer { align-items: flex-start; flex-direction: column; }
 }

package/src/dashboard/react/types.ts

@@ -41,6 +41,8 @@ export interface UsageNumbers {
   reasoningOutputTokens?: number;
   totalTokens: number;
   estimatedCostUsd?: number | null;
+  sampledAt?: string | null;
+  sourceUpdatedAt?: string | null;
   models?: Record<string, unknown>;
 }
 
@@ -54,6 +56,7 @@ export interface UsageProjection {
   }>;
   reason?: string;
   message?: string;
+  updatedAt?: string | null;
 }
 
 export interface Task {

package/src/dashboard.js

@@ -26,6 +26,7 @@ import { DASHBOARD_SERVER_VERSION, TASKCHEF_VERSION } from "./version.js";
 import { taskGitHubProjection } from "./dashboard/github-links.js";
 import { CODEX_CHAT_ARCHIVE_ENABLED } from "./dashboard/state.js";
 import { createUsageTracker } from "./usage-tracker.js";
+import { readUsageStore, usageStorePath } from "./usage.js";
 import {
   MAX_DASHBOARD_SESSION_PIDS,
   MAX_TRANSFERRED_DASHBOARD_SESSION_PIDS,
@@ -52,6 +53,7 @@ const LOOPBACK_HOSTS = new Set(["127.0.0.1", "::1"]);
 const DEFAULT_MAX_FILE_BYTES = 16 * 1024 * 1024;
 const DEFAULT_MAX_TASKS = 2_000;
 const DEFAULT_MAX_EVENT_CLIENTS = 16;
+const DEFAULT_CALCULATING_USAGE_STALE_MS = 120_000;
 const DASHBOARD_HANDOFF_PREPARE_TTL_MS = 5_000;
 const DASHBOARD_HANDOFF_COMMIT_GRACE_MS = 250;
 const DASHBOARD_HANDOFF_COMMIT_RETRY_MS = 1_000;
@@ -235,6 +237,204 @@ function taskDetailProjection(task) {
   return { ...task, ...taskGitHubProjection(task) };
 }
 
+function cachedUsageSummary(record) {
+  if (!record) return null;
+  return Object.freeze({
+    generationTurnRef: record.generationTurnRef ?? null,
+    status: record.status,
+    updatedAt: record.updatedAt ?? null,
+    ...(record.reason ? { reason: record.reason } : {}),
+    ...(record.task ? {
+      task: Object.freeze({
+        totalTokens: record.task.totalTokens,
+        estimatedCostUsd: record.task.estimatedCostUsd ?? null,
+        sampledAt: record.task.sampledAt ?? null,
+        sourceUpdatedAt: record.task.sourceUpdatedAt ?? null,
+      }),
+    } : {}),
+  });
+}
+
+function cachedUsageRecord(record) {
+  return Object.freeze({
+    threadId: record.threadId,
+    ...cachedUsageSummary(record),
+  });
+}
+
+function calculatingUsageIsStale(cached, now, staleMs) {
+  if (cached?.status !== "calculating") return false;
+  const updatedAt = Date.parse(cached.updatedAt ?? "");
+  return !Number.isFinite(updatedAt) || updatedAt + staleMs <= now;
+}
+
+export function taskListUsageProjection(task, cached, {
+  now = Date.now(),
+  calculatingStaleMs = DEFAULT_CALCULATING_USAGE_STALE_MS,
+} = {}) {
+  if (!task.threadId) {
+    return { status: "unavailable", reason: "Token usage unavailable" };
+  }
+  if (!task.latestTurn) {
+    return { status: "unavailable", reason: "Token usage unavailable" };
+  }
+  if (!cached || cached.threadId !== task.threadId) {
+    return task.status === "working"
+      ? { generationTurnRef: task.latestTurn.turnRef ?? null, status: "pending" }
+      : { generationTurnRef: task.latestTurn.turnRef ?? null, status: "unavailable", reason: "Token usage unavailable" };
+  }
+  const latestTurnRef = task.latestTurn.turnRef ?? task.latestTurn.turnId ?? null;
+  if (task.status !== "working" && cached.generationTurnRef !== latestTurnRef) {
+    return {
+      generationTurnRef: latestTurnRef,
+      status: "unavailable",
+      reason: "No cached usage boundary is available for this task state.",
+    };
+  }
+  if (calculatingUsageIsStale(cached, now, calculatingStaleMs)) {
+    return {
+      generationTurnRef: cached.generationTurnRef ?? latestTurnRef,
+      status: "unavailable",
+      reason: "Token usage calculation was interrupted.",
+    };
+  }
+  return cachedUsageSummary(cached);
+}
+
+async function optionalFileFingerprint(filePath) {
+  return fileFingerprint(filePath).catch((error) => {
+    if (error?.code === "ENOENT") return "missing";
+    throw error;
+  });
+}
+
+export class UsageSummaryMonitor extends EventEmitter {
+  constructor(workspace, {
+    calculatingStaleMs = DEFAULT_CALCULATING_USAGE_STALE_MS,
+    fingerprint = optionalFileFingerprint,
+    now = Date.now,
+    pollIntervalMs = 5_000,
+    readStore = readUsageStore,
+    watchDirectory = watch,
+  } = {}) {
+    super();
+    this.workspace = workspace;
+    this.calculatingStaleMs = calculatingStaleMs;
+    this.fingerprint = fingerprint;
+    this.now = now;
+    this.pollIntervalMs = pollIntervalMs;
+    this.readStore = readStore;
+    this.watchDirectory = watchDirectory;
+    this.currentFingerprint = null;
+    this.records = new Map();
+    this.started = false;
+    this.refreshPromise = null;
+    this.refreshQueued = false;
+    this.watcher = null;
+    this.pollTimer = null;
+    this.debounceTimer = null;
+    this.lifecycleFingerprint = "";
+  }
+
+  async start() {
+    if (this.started) return;
+    this.workspace = await realpath(path.resolve(this.workspace));
+    this.file = usageStorePath(this.workspace);
+    await this.refresh({ force: true });
+    this.started = true;
+    try {
+      this.watcher = this.watchDirectory(this.workspace, { persistent: false }, (_event, fileName) => {
+        if (fileName !== null && String(fileName) !== path.basename(this.file)) return;
+        clearTimeout(this.debounceTimer);
+        this.debounceTimer = setTimeout(() => {
+          void this.refresh({ force: true }).catch(() => {});
+        }, 75);
+        this.debounceTimer.unref?.();
+      });
+      this.watcher.on("error", () => {
+        this.watcher?.close();
+        this.watcher = null;
+      });
+    } catch {
+      this.watcher = null;
+    }
+    this.pollTimer = setInterval(() => {
+      void this.refresh().catch(() => {});
+    }, this.pollIntervalMs);
+    this.pollTimer.unref?.();
+  }
+
+  project(task) {
+    return taskListUsageProjection(task, this.records.get(task.id) ?? null, {
+      calculatingStaleMs: this.calculatingStaleMs,
+      now: this.now(),
+    });
+  }
+
+  updateLifecycleFingerprint() {
+    const timestamp = this.now();
+    const next = JSON.stringify([...this.records].flatMap(([taskId, record]) => (
+      calculatingUsageIsStale(record, timestamp, this.calculatingStaleMs) ? [taskId] : []
+    )));
+    const changed = next !== this.lifecycleFingerprint;
+    this.lifecycleFingerprint = next;
+    return changed;
+  }
+
+  async refresh({ force = false } = {}) {
+    if (this.refreshPromise) {
+      this.refreshQueued ||= force;
+      return this.refreshPromise;
+    }
+    this.refreshPromise = this.refreshOnce({ force }).finally(async () => {
+      this.refreshPromise = null;
+      if (this.refreshQueued) {
+        this.refreshQueued = false;
+        await this.refresh({ force: true });
+      }
+    });
+    return this.refreshPromise;
+  }
+
+  async refreshOnce({ force }) {
+    const observed = await this.fingerprint(this.file);
+    if (!force && observed === this.currentFingerprint) {
+      const changed = this.updateLifecycleFingerprint();
+      if (changed) this.emit("change");
+      return changed;
+    }
+    let store;
+    try {
+      store = await this.readStore(this.workspace);
+    } catch {
+      store = { tasks: {} };
+    }
+    const after = await this.fingerprint(this.file);
+    if (observed !== after) {
+      this.refreshQueued = true;
+      return false;
+    }
+    const records = new Map(Object.entries(store.tasks ?? {}).map(
+      ([taskId, record]) => [taskId, cachedUsageRecord(record)],
+    ));
+    const recordsChanged = JSON.stringify([...records]) !== JSON.stringify([...this.records]);
+    this.records = records;
+    this.currentFingerprint = after;
+    const lifecycleChanged = this.updateLifecycleFingerprint();
+    const changed = recordsChanged || lifecycleChanged;
+    if (changed) this.emit("change");
+    return changed;
+  }
+
+  close() {
+    this.started = false;
+    this.watcher?.close();
+    clearTimeout(this.debounceTimer);
+    clearInterval(this.pollTimer);
+    this.watcher = null;
+  }
+}
+
 export class DashboardMonitor extends EventEmitter {
   constructor(workspace, {
     debounceMs = 75,
@@ -599,6 +799,7 @@ export async function createDashboardServer({
   taskchefVersion = TASKCHEF_VERSION,
   serverVersion = DASHBOARD_SERVER_VERSION,
   usageTracker = null,
+  usageSummaryMonitor = null,
   control = null,
   controlReplayCache = createDashboardControlReplayCache(),
 } = {}) {
@@ -622,19 +823,30 @@ export async function createDashboardServer({
     throw new Error("dashboard control requires a valid TaskChef ownership controller");
   }
   const monitor = new DashboardMonitor(workspace, monitorOptions);
-  await monitor.start();
-  const taskUsageTracker = usageTracker ?? createUsageTracker({ workspace: monitor.workspace });
-  const identity = Object.freeze({
-    schemaVersion: 1,
-    service: "taskchef-dashboard",
-    taskchefVersion,
-    serverVersion,
-    workspace: monitor.workspace,
-    launcher,
-  });
-  if (Buffer.byteLength(`${JSON.stringify(identity)}\n`) > DASHBOARD_HEALTH_MAX_BYTES) {
+  let taskUsageTracker;
+  let taskUsageSummaryMonitor;
+  let identity;
+  try {
+    await monitor.start();
+    taskUsageTracker = usageTracker ?? createUsageTracker({ workspace: monitor.workspace });
+    taskUsageSummaryMonitor = usageSummaryMonitor
+      ?? new UsageSummaryMonitor(monitor.workspace);
+    await taskUsageSummaryMonitor.start();
+    identity = Object.freeze({
+      schemaVersion: 1,
+      service: "taskchef-dashboard",
+      taskchefVersion,
+      serverVersion,
+      workspace: monitor.workspace,
+      launcher,
+    });
+    if (Buffer.byteLength(`${JSON.stringify(identity)}\n`) > DASHBOARD_HEALTH_MAX_BYTES) {
+      throw new Error("dashboard identity exceeds the health response limit");
+    }
+  } catch (error) {
+    taskUsageSummaryMonitor?.close();
     monitor.close();
-    throw new Error("dashboard identity exceeds the health response limit");
+    throw error;
   }
   const clients = new Set();
   const archiveRequests = new Set();
@@ -647,10 +859,22 @@ export async function createDashboardServer({
     const payload = ssePayload(event, value);
     for (const client of clients) client.write(payload);
   };
-  const snapshotListener = (snapshot) => broadcast("snapshot", snapshot);
+  const dashboardSnapshot = () => {
+    const snapshot = monitor.snapshot();
+    return {
+      ...snapshot,
+      tasks: snapshot.tasks.map((task) => ({
+        ...task,
+        usage: taskUsageSummaryMonitor.project(task),
+      })),
+    };
+  };
+  const snapshotListener = () => broadcast("snapshot", dashboardSnapshot());
+  const usageSummaryListener = () => broadcast("snapshot", dashboardSnapshot());
   const errorListener = () => broadcast("dashboard-error", publicMonitorError());
   monitor.on("snapshot", snapshotListener);
   monitor.on("monitorError", errorListener);
+  taskUsageSummaryMonitor.on("change", usageSummaryListener);
 
   const handleRequest = async (request, response) => {
     const method = request.method ?? "GET";
@@ -956,7 +1180,7 @@ export async function createDashboardServer({
         response.writeHead(200, securityHeaders("application/json; charset=utf-8"));
         response.end();
       } else {
-        sendJson(response, 200, monitor.snapshot());
+        sendJson(response, 200, dashboardSnapshot());
       }
       return;
     }
@@ -978,7 +1202,7 @@ export async function createDashboardServer({
         },
       });
       clients.add(client);
-      client.write(`retry: 2000\n\n${ssePayload("snapshot", monitor.snapshot())}`);
+      client.write(`retry: 2000\n\n${ssePayload("snapshot", dashboardSnapshot())}`);
       client.heartbeat = setInterval(() => {
         if (!client.blocked) client.write(": heartbeat\n\n");
       }, 15_000);
@@ -1203,6 +1427,7 @@ export async function createDashboardServer({
     server.listen(port, host, resolve);
   }).catch((error) => {
     monitor.close();
+    taskUsageSummaryMonitor.close();
     throw error;
   });
 
@@ -1217,11 +1442,14 @@ export async function createDashboardServer({
     url: `${allowedOrigin}/`,
     identity,
     monitor,
+    usageSummaryMonitor: taskUsageSummaryMonitor,
     get eventClientCount() { return clients.size; },
     async close() {
       monitor.off("snapshot", snapshotListener);
       monitor.off("monitorError", errorListener);
+      taskUsageSummaryMonitor.off("change", usageSummaryListener);
       monitor.close();
+      taskUsageSummaryMonitor.close();
       for (const client of clients) client.close();
       const closed = new Promise((resolve, reject) => server.close((error) =>
         error ? reject(error) : resolve()));

package/src/usage.js

@@ -589,12 +589,12 @@ export async function readCcusageThreadUsage(threadId, {
   }
 }
 
-function usageFile(workspace) {
+export function usageStorePath(workspace) {
   return path.join(workspace, USAGE_FILE_NAME);
 }
 
 export async function readUsageStore(workspace) {
-  const filePath = usageFile(workspace);
+  const filePath = usageStorePath(workspace);
   const details = await lstat(filePath).catch((error) => {
     if (error.code === "ENOENT") return null;
     throw error;
@@ -649,7 +649,7 @@ export function compactUsageStore(store) {
 
 export async function writeUsageStore(workspace, store) {
   await mkdir(workspace, { recursive: true });
-  const filePath = usageFile(workspace);
+  const filePath = usageStorePath(workspace);
   const temporaryPath = `${filePath}.${process.pid}.${randomUUID()}.tmp`;
   const serialized = `${JSON.stringify(compactUsageStore(store), null, 2)}\n`;
   if (Buffer.byteLength(serialized, "utf8") > MAX_USAGE_FILE_BYTES) {