taskchef 7.25.2 → 7.26.0

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

@@ -1,10 +1,15 @@
 import { MantineProvider } from "@mantine/core";
-import { render, screen, within } from "@testing-library/react";
-import { describe, expect, test } from "vitest";
+import { cleanup, render, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "vitest";
 import { fixtureTask } from "./fixtures";
 import {
+  durationBetween,
   formatCompactTokens,
   formatEstimatedCost,
+  formatReportedDuration,
+  taskReportedWorkView,
+  turnReportedWorkView,
+  turnUsageMetricsView,
   turnUsageView,
   usageStillCalculating,
   usageView,
@@ -14,6 +19,8 @@ import { GitHubLinks } from "./components/GitHubLinks";
 import { LinkedText } from "./components/LinkedText";
 import { UsagePanel } from "./components/UsagePanel";
 
+afterEach(cleanup);
+
 describe("token and working presentation", () => {
   test("keeps pending, calculating, ready cost, and unavailable wording distinct", () => {
     expect(usageView(fixtureTask()).label).toBe("Token usage pending");
@@ -99,11 +106,20 @@ describe("token and working presentation", () => {
     expect(screen.getByText("In progress")).toHaveAttribute("data-animation", "text-shimmer");
   });
 
-  test("summarizes ready usage as four operator-facing cards", () => {
+  test("summarizes ready usage and reported work as one operator-facing metric group", () => {
+    const completedTurn = {
+      ...fixtureTask().turns![0],
+      result: {
+        status: "completed" as const,
+        summary: "Done.",
+        updatedAt: "2026-08-30T08:18:32.000Z",
+      },
+    };
     render(
       <MantineProvider>
         <UsagePanel task={fixtureTask({
           status: "completed",
+          turns: [completedTurn],
           usage: {
             generationTurnRef: "turn-one",
             status: "available",
@@ -123,11 +139,36 @@ describe("token and working presentation", () => {
 
     expect(screen.getByText("Tokens").nextSibling).toHaveTextContent("330");
     expect(screen.getByText("Estimated cost").nextSibling).toHaveTextContent("$0.12");
+    expect(screen.getByText("Total reported work").nextSibling).toHaveTextContent("18m 32s");
+    expect(screen.getByLabelText(/total reported work 18m 32s.*wall-clock/i)).toBeVisible();
     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();
   });
 
+  test("keeps reported work visible across pending, calculating, and unavailable usage", () => {
+    for (const [task, expected, accessibleCost] of [
+      [fixtureTask(), "Pending", "Estimated cost pending"],
+      [
+        fixtureTask({ status: "completed", usage: { status: "calculating" } }),
+        "Calculating",
+        "Estimated cost calculating",
+      ],
+      [
+        fixtureTask({ status: "completed", usage: { status: "unavailable" } }),
+        "Unavailable",
+        "Estimated cost unavailable: Token usage unavailable",
+      ],
+    ] as const) {
+      render(<MantineProvider><UsagePanel task={task} /></MantineProvider>);
+      expect(screen.getByText("Tokens").nextSibling).toHaveTextContent(expected);
+      expect(screen.getByText("Estimated cost").nextSibling).toHaveTextContent(expected);
+      expect(screen.getByLabelText(accessibleCost)).toBeVisible();
+      expect(screen.getByText("Total reported work").nextSibling).toHaveTextContent("Not yet reported");
+      cleanup();
+    }
+  });
+
   test("uses the same borderless link treatment wherever links are rendered", () => {
     render(<MantineProvider><GitHubLinks task={fixtureTask()} /></MantineProvider>);
     expect(screen.getByRole("link")).toHaveClass("taskchef-github-link");
@@ -239,3 +280,190 @@ describe("token and working presentation", () => {
       .toHaveTextContent("taskchef PR #83");
   });
 });
+
+describe("reported wall-clock work presentation", () => {
+  test("covers formatting, derivation, unavailable boundaries, usage states, and accessibility", () => {
+    expect(formatReportedDuration(500)).toBe("<1s");
+    expect(formatReportedDuration(32_999)).toBe("32s");
+    expect(formatReportedDuration((18 * 60 + 32) * 1_000 + 999)).toBe("18m 32s");
+    expect(formatReportedDuration((2 * 60 + 14) * 60 * 1_000 + 59_999)).toBe("2h 14m");
+    expect(formatReportedDuration((27 * 60 + 59) * 60 * 1_000)).toBe("1d 3h");
+    expect(formatReportedDuration(-1)).toBeNull();
+    expect(formatReportedDuration(Number.NaN)).toBeNull();
+
+    {
+    const task = fixtureTask({
+      status: "working",
+      turns: [
+        {
+          requestSummary: "First turn",
+          startedAt: "2026-08-30T08:00:00.000Z",
+          turnRef: "turn-one",
+          turnId: null,
+          result: {
+            status: "completed",
+            summary: "First done",
+            updatedAt: "2026-08-30T08:18:32.000Z",
+          },
+        },
+        {
+          requestSummary: "Second turn after a long idle gap",
+          startedAt: "2026-08-30T18:00:00.000Z",
+          turnRef: "turn-two",
+          turnId: null,
+          result: {
+            status: "failed",
+            summary: "Second done",
+            updatedAt: "2026-08-30T20:14:00.000Z",
+          },
+        },
+        {
+          requestSummary: "Active follow-up",
+          startedAt: "2026-08-31T08:00:00.000Z",
+          turnRef: "turn-three",
+          turnId: null,
+          result: null,
+        },
+      ],
+    });
+    const view = taskReportedWorkView(task);
+    expect(view.kind).toBe("available");
+    expect(view.value).toBe("2h 32m");
+    expect(view.title).toMatch(/idle gaps are excluded/i);
+    }
+
+    {
+    const invalid = fixtureTask({
+      status: "completed",
+      turns: [{
+        requestSummary: "Historical turn",
+        startedAt: "not-a-date",
+        turnRef: "turn-one",
+        turnId: null,
+        result: { status: "completed", summary: "Done", updatedAt: "2026-08-30T08:00:00.000Z" },
+      }],
+    });
+    expect(taskReportedWorkView(invalid)).toMatchObject({ kind: "unavailable", value: "Unavailable" });
+    expect(durationBetween("2026-08-30T08:01:00.000Z", "2026-08-30T08:00:00.000Z")).toBeNull();
+    expect(durationBetween("2026-02-30T08:00:00.000Z", "2026-03-02T08:01:00.000Z")).toBeNull();
+    expect(durationBetween("March 2, 2026 08:00:00 UTC", "2026-03-02T08:01:00.000Z")).toBeNull();
+    expect(turnReportedWorkView(invalid.turns![0])).toMatchObject({
+      kind: "unavailable",
+      label: "Elapsed",
+      value: "Unavailable",
+    });
+    }
+
+    {
+    const terminalResult = {
+      status: "completed" as const,
+      summary: "Done.",
+      updatedAt: "2026-08-30T08:00:00.000Z",
+    };
+    const legacyTurn = {
+      requestSummary: null,
+      startedAt: terminalResult.updatedAt,
+      turnRef: "legacy-turn",
+      turnId: null,
+      provenance: { kind: "legacy" },
+      result: terminalResult,
+    };
+    const terminalOnlyTurn = {
+      ...legacyTurn,
+      turnRef: "terminal-only-turn",
+      provenance: { kind: "mcp" },
+    };
+    for (const turn of [legacyTurn, terminalOnlyTurn]) {
+      expect(turnReportedWorkView(turn)).toMatchObject({ kind: "unavailable", value: "Unavailable" });
+      expect(taskReportedWorkView(fixtureTask({ status: "completed", turns: [turn] })))
+        .toMatchObject({ kind: "unavailable", value: "Unavailable" });
+    }
+    }
+
+    {
+    const observed = {
+      requestSummary: "Perform the observed turn.",
+      startedAt: "2026-08-30T08:00:00.000Z",
+      turnRef: "observed-turn",
+      turnId: null,
+      provenance: { kind: "mcp" },
+      result: {
+        status: "completed" as const,
+        summary: "Done.",
+        updatedAt: "2026-08-30T08:00:00.000Z",
+      },
+    };
+    expect(turnReportedWorkView(observed)).toMatchObject({ kind: "unavailable", value: "Unavailable" });
+    expect(turnReportedWorkView({
+      ...observed,
+      result: { ...observed.result, updatedAt: "2026-08-30T08:00:00.500Z" },
+    })).toMatchObject({ kind: "available", value: "<1s" });
+    }
+
+    {
+    const compactTerminal = fixtureTask({
+      status: "completed",
+      turns: undefined,
+      latestTurn: {
+        ...fixtureTask().latestTurn!,
+        result: {
+          status: "completed",
+          summary: "Done.",
+          updatedAt: "2026-08-30T08:18:32.000Z",
+        },
+      },
+    });
+    expect(taskReportedWorkView(compactTerminal)).toMatchObject({
+      kind: "unavailable",
+      value: "Unavailable",
+    });
+    render(<MantineProvider><UsagePanel task={compactTerminal} /></MantineProvider>);
+    expect(screen.getByText("Total reported work").nextSibling).toHaveTextContent("Unavailable");
+    cleanup();
+    }
+
+    {
+    const priorResult = {
+      status: "completed" as const,
+      summary: "Prior turn done.",
+      updatedAt: "2026-08-30T08:18:32.000Z",
+      turnRef: "turn-one",
+      turnId: null,
+    };
+    expect(taskReportedWorkView(fixtureTask({
+      status: "working",
+      turnRef: "turn-two",
+      turns: undefined,
+      lastResult: priorResult,
+      results: undefined,
+    }))).toMatchObject({ kind: "unavailable", value: "Unavailable" });
+    }
+
+    {
+    render(
+      <MantineProvider>
+        <UsagePanel task={fixtureTask({
+          status: "completed",
+          usage: { status: "unavailable", reason: "No matching cached boundary." },
+        })} />
+      </MantineProvider>,
+    );
+    expect(screen.getByText("No matching cached boundary.")).toBeVisible();
+    expect(screen.getByLabelText("No matching cached boundary.")).toBeVisible();
+    cleanup();
+    }
+
+    {
+    const task = fixtureTask();
+    expect(turnReportedWorkView(task.turns![0], Date.parse("2026-08-30T08:18:32.000Z"))).toMatchObject({
+      label: "Elapsed so far",
+      value: "18m 32s",
+    });
+    expect(turnUsageMetricsView(task, task.turns![0])).toMatchObject({
+      animated: true,
+      cost: { value: "Pending" },
+      tokens: { value: "Pending" },
+    });
+    }
+  });
+});

package/src/dashboard/react/presentation.ts

@@ -1,4 +1,145 @@
-import type { Task, UsageNumbers, UsageProjection } from "./types";
+import type { Task, TaskTurn, UsageNumbers, UsageProjection } from "./types";
+
+const SECOND_MS = 1_000;
+const MINUTE_MS = 60 * SECOND_MS;
+const HOUR_MS = 60 * MINUTE_MS;
+const DAY_MS = 24 * HOUR_MS;
+
+export function durationBetween(startedAt: unknown, endedAt: unknown) {
+  const start = parseLifecycleTimestamp(startedAt);
+  const end = parseLifecycleTimestamp(endedAt);
+  if (start === null || end === null) return null;
+  const duration = end - start;
+  return duration >= 0 ? duration : null;
+}
+
+function parseLifecycleTimestamp(value: unknown) {
+  if (typeof value !== "string") return null;
+  const match = value.match(
+    /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})(?:\.(\d{1,3}))?(Z|[+-]\d{2}:\d{2})$/,
+  );
+  if (!match) return null;
+  const [, yearText, monthText, dayText, hourText, minuteText, secondText, , zone] = match;
+  const year = Number(yearText);
+  const month = Number(monthText);
+  const day = Number(dayText);
+  const hour = Number(hourText);
+  const minute = Number(minuteText);
+  const second = Number(secondText);
+  const zoneHour = zone === "Z" ? 0 : Number(zone.slice(1, 3));
+  const zoneMinute = zone === "Z" ? 0 : Number(zone.slice(4, 6));
+  const leapYear = year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+  const daysInMonth = [31, leapYear ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+  if (
+    month < 1
+    || month > 12
+    || day < 1
+    || day > daysInMonth[month - 1]
+    || hour > 23
+    || minute > 59
+    || second > 59
+    || zoneHour > 23
+    || zoneMinute > 59
+  ) return null;
+  const parsed = Date.parse(value);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+export function formatReportedDuration(milliseconds: number) {
+  if (!Number.isFinite(milliseconds) || milliseconds < 0) return null;
+  if (milliseconds > 0 && milliseconds < SECOND_MS) return "<1s";
+  const seconds = Math.floor(milliseconds / SECOND_MS);
+  if (milliseconds < MINUTE_MS) return `${seconds}s`;
+  if (milliseconds < HOUR_MS) {
+    return `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+  }
+  const minutes = Math.floor(milliseconds / MINUTE_MS);
+  if (milliseconds < DAY_MS) {
+    return `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
+  }
+  const hours = Math.floor(milliseconds / HOUR_MS);
+  return `${Math.floor(hours / 24)}d ${hours % 24}h`;
+}
+
+export type ReportedWorkView = {
+  accessibleLabel: string;
+  kind: "available" | "not-reported" | "unavailable";
+  title: string;
+  value: string;
+};
+
+export function taskReportedWorkView(task: Task): ReportedWorkView {
+  if (task.turns === undefined) {
+    return {
+      accessibleLabel: "Total reported work unavailable because terminal turn history is not available.",
+      kind: "unavailable",
+      title: "Reported wall-clock elapsed time requires the terminal turn history from the task detail projection.",
+      value: "Unavailable",
+    };
+  }
+  const terminalTurns = (task.turns ?? []).filter((turn) => turn.result !== null);
+  if (terminalTurns.length === 0) {
+    return {
+      accessibleLabel: "Total reported work not yet reported. Unfinished turns are excluded.",
+      kind: "not-reported",
+      title: "Reported wall-clock elapsed time is added only after a turn reaches a terminal state.",
+      value: "Not yet reported",
+    };
+  }
+  const durations = terminalTurns.map(terminalTurnDuration);
+  const validDurations = durations.filter((duration): duration is number => duration !== null);
+  if (validDurations.length === 0) {
+    return {
+      accessibleLabel: "Total reported work unavailable because completed turn timestamps are missing or invalid.",
+      kind: "unavailable",
+      title: "Reported wall-clock elapsed time is unavailable because no terminal turn has a valid start and end timestamp.",
+      value: "Unavailable",
+    };
+  }
+  const total = validDurations.reduce((sum, duration) => sum + duration, 0);
+  const value = Number.isSafeInteger(total) ? formatReportedDuration(total) : null;
+  if (value === null) {
+    return {
+      accessibleLabel: "Total reported work unavailable because the duration total is outside the supported range.",
+      kind: "unavailable",
+      title: "Reported wall-clock elapsed time is unavailable because the duration total is outside the supported range.",
+      value: "Unavailable",
+    };
+  }
+  const excluded = terminalTurns.length - validDurations.length;
+  const exclusion = excluded > 0
+    ? ` ${excluded} terminal ${excluded === 1 ? "turn was" : "turns were"} unavailable and excluded.`
+    : "";
+  return {
+    accessibleLabel: `Total reported work ${value}. This is reported wall-clock elapsed time.${exclusion}`,
+    kind: "available",
+    title: `Sum of valid terminal-turn wall-clock elapsed times; unfinished turns and idle gaps are excluded.${exclusion}`,
+    value,
+  };
+}
+
+export function turnReportedWorkView(turn: TaskTurn, now = Date.now()) {
+  const active = turn.result === null;
+  const duration = active
+    ? durationBetween(turn.startedAt, new Date(now).toISOString())
+    : terminalTurnDuration(turn);
+  const label = active ? "Elapsed so far" : "Elapsed";
+  const value = duration === null ? "Unavailable" : formatReportedDuration(duration) ?? "Unavailable";
+  return {
+    accessibleLabel: `${label} ${value}. ${active ? "Current" : "Completed"} turn reported wall-clock elapsed time.`,
+    kind: duration === null ? "unavailable" as const : "available" as const,
+    label,
+    title: duration === null
+      ? "Reported wall-clock elapsed time is unavailable because the turn timestamps are missing, invalid, or reversed."
+      : `Reported wall-clock elapsed time from startedAt ${active ? "to the current time" : "to result.updatedAt"}.`,
+    value,
+  };
+}
+
+function terminalTurnDuration(turn: TaskTurn) {
+  const duration = durationBetween(turn.startedAt, turn.result?.updatedAt);
+  return duration === 0 ? null : duration;
+}
 
 export function formatCompactTokens(value: number, locales?: Intl.LocalesArgument) {
   return new Intl.NumberFormat(locales, {
@@ -83,6 +224,45 @@ export function turnUsageView(task: Task, turn: NonNullable<Task["turns"]>[numbe
   };
 }
 
+export function turnUsageMetricsView(task: Task, turn: NonNullable<Task["turns"]>[number]) {
+  const view = turnUsageView(task, turn);
+  if (view.kind === "ready") {
+    const identity = turn.turnRef ?? turn.turnId;
+    const usage = identity ? task.usage?.turns?.[identity] : null;
+    const tokens = typeof usage?.totalTokens === "number" ? formatFullTokens(usage.totalTokens) : "Unavailable";
+    const cost = usage?.estimatedCostUsd == null
+      ? "Unavailable"
+      : formatEstimatedCost(usage.estimatedCostUsd);
+    return {
+      animated: false,
+      cost: { accessibleLabel: `Estimated cost ${cost.toLowerCase()}`, value: cost },
+      kind: view.kind,
+      note: null,
+      title: view.label,
+      tokens: { accessibleLabel: `${tokens} tokens`, value: tokens },
+    };
+  }
+  const value = view.kind === "pending"
+    ? "Pending"
+    : view.kind === "calculating"
+      ? "Calculating"
+      : "Unavailable";
+  return {
+    animated: view.kind === "pending" || view.kind === "calculating",
+    cost: {
+      accessibleLabel: `Estimated cost ${value.toLowerCase()}${view.kind === "unavailable" ? `: ${view.label}` : ""}`,
+      value,
+    },
+    kind: view.kind,
+    note: view.kind === "unavailable" ? view.label : null,
+    title: view.label,
+    tokens: {
+      accessibleLabel: `Tokens ${value.toLowerCase()}${view.kind === "unavailable" ? `: ${view.label}` : ""}`,
+      value,
+    },
+  };
+}
+
 export function usageStillCalculating(task: Task) {
   return task.status !== "working"
     && (task.usage?.status === "calculating"

package/src/dashboard/react/styles.css

@@ -77,10 +77,12 @@ body {
 .taskchef-subtle-panel { background: var(--taskchef-surface-muted); }
 .taskchef-metric { min-width: 0; background: transparent; }
 .taskchef-metric-value { overflow-wrap: anywhere; }
-.taskchef-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mantine-spacing-xs); }
+.taskchef-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--mantine-spacing-xs); }
 .taskchef-turn { background: var(--taskchef-surface-muted); }
 .taskchef-turn-highlighted { border-color: var(--mantine-color-teal-6); box-shadow: inset 3px 0 var(--mantine-color-teal-6); outline: 3px solid color-mix(in srgb, var(--mantine-color-teal-6) 22%, transparent); }
 .taskchef-turn-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.taskchef-turn-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mantine-spacing-xs); }
+.taskchef-turn-metric { min-width: 0; overflow-wrap: anywhere; }
 .taskchef-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
 .taskchef-code-panel { max-height: 280px; margin: 0; padding: 12px; overflow: auto; border-radius: var(--mantine-radius-md); background: var(--taskchef-surface-muted); white-space: pre-wrap; overflow-wrap: anywhere; font: 0.78rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
 .taskchef-metadata { display: grid; grid-template-columns: minmax(120px, 150px) minmax(0, 1fr); margin: 0; font-size: var(--mantine-font-size-sm); }
@@ -120,6 +122,7 @@ body {
   .taskchef-notifications { right: 16px; bottom: 16px; width: min(330px, calc(100vw - 32px)); }
   .taskchef-metadata { grid-template-columns: 1fr; }
   .taskchef-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .taskchef-turn-metrics { grid-template-columns: 1fr; }
   .taskchef-metadata dt { padding-bottom: 0; border-bottom: 0; }
 }