taskchef 7.24.0 → 7.25.0

package/src/dashboard/github-links.js

@@ -60,12 +60,20 @@ function compareReferenceNumbers(left, right) {
 
 export function groupRelatedGitHubLinks(links) {
   const groups = new Map();
-  const seen = new Set();
+  const seenLabels = new Set();
+  const seenNumbers = new Set();
+  const seenUrls = new Set();
   for (const link of links ?? []) {
-    if (link.type === "repository" || seen.has(link.label)) continue;
-    seen.add(link.label);
     const repository = repositoryIdentity(link);
-    if (!repository) continue;
+    const reference = link.number ? `${repository}#${link.number}` : null;
+    if (link.type === "repository"
+      || !repository
+      || seenLabels.has(link.label)
+      || seenUrls.has(link.url)
+      || (reference && seenNumbers.has(reference))) continue;
+    seenLabels.add(link.label);
+    seenUrls.add(link.url);
+    if (reference) seenNumbers.add(reference);
     const group = groups.get(repository) ?? [];
     group.push(link);
     groups.set(repository, group);

package/src/dashboard/react/App.tsx

@@ -30,7 +30,12 @@ import {
   STATUS_FILTERS,
 } from "../state.js";
 import { connectDashboard, dashboardVersion, manualTransition, openInCodex, taskDetail } from "./api";
-import { clearNotificationHistory, notificationClicked } from "./overlay-state";
+import {
+  clearNotificationHistory,
+  listUsageSignature,
+  mergeListTaskIntoDetail,
+  notificationClicked,
+} from "./overlay-state";
 import { usageStillCalculating } from "./presentation";
 import type { DashboardSnapshot, NotificationSnapshot, Task } from "./types";
 import { NotificationCenter } from "./components/NotificationCenter";
@@ -105,6 +110,7 @@ export function DashboardApp({
   selectedIdRef.current = selectedId;
   const detailGeneration = useRef(0);
   const detailListUpdatedAt = useRef<string | null>(null);
+  const detailListUsageSignature = useRef(listUsageSignature(null));
 
   const applySnapshot = useCallback((snapshot: DashboardSnapshot) => {
     setTasks(snapshot.tasks);
@@ -124,7 +130,9 @@ export function DashboardApp({
     const currentSelectedId = selectedIdRef.current;
     if (currentSelectedId) {
       const updated = snapshot.tasks.find((task) => task.id === currentSelectedId);
-      if (updated) setSelectedTask((current) => current ? { ...current, ...updated } : updated);
+      if (updated) {
+        setSelectedTask((current) => current ? mergeListTaskIntoDetail(current, updated) : updated);
+      }
     }
   }, []);
 
@@ -147,7 +155,10 @@ export function DashboardApp({
   const loadDetail = useCallback(async (task: Task, focusTurnRef: string | null = null) => {
     const generation = ++detailGeneration.current;
     detailListUpdatedAt.current = task.updatedAt;
-    setSelectedTask((current) => current?.id === task.id ? { ...current, ...task } : task);
+    detailListUsageSignature.current = listUsageSignature(task);
+    setSelectedTask((current) => current?.id === task.id
+      ? mergeListTaskIntoDetail(current, task)
+      : task);
     setDetailOpened(true);
     setHighlightTurnRef(focusTurnRef);
     setDetailError(null);
@@ -157,6 +168,8 @@ export function DashboardApp({
         if (generation !== detailGeneration.current) return;
         const detail = await taskDetail(task.id);
         if (generation !== detailGeneration.current) return;
+        detailListUpdatedAt.current = detail.updatedAt;
+        detailListUsageSignature.current = listUsageSignature(detail);
         setSelectedTask(detail);
         if (!usageStillCalculating(detail) || attempt === 40) return;
         await new Promise((resolve) => window.setTimeout(resolve, 1_500));
@@ -168,14 +181,20 @@ export function DashboardApp({
     }
   }, []);
 
+  const selectedListTask = tasks.find((task) => task.id === selectedId) ?? null;
+  const selectedListUsageSignature = listUsageSignature(selectedListTask);
+
   useEffect(() => {
     if (!detailOpened || !selectedId || !connect) return;
-    const listTask = tasks.find((task) => task.id === selectedId);
-    if (!listTask || listTask.updatedAt === detailListUpdatedAt.current) return;
-    void loadDetail(listTask, highlightTurnRef);
-    // A task signature update while detail is open refreshes the full projection.
+    if (!selectedListTask) return;
+    if (
+      selectedListTask.updatedAt === detailListUpdatedAt.current
+      && selectedListUsageSignature === detailListUsageSignature.current
+    ) return;
+    void loadDetail(selectedListTask, highlightTurnRef);
+    // Task or cached usage changes while detail is open refresh the full projection.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tasks.find((task) => task.id === selectedId)?.updatedAt]);
+  }, [selectedListTask?.updatedAt, selectedListUsageSignature]);
 
   const projects = useMemo(() => [
     { label: "All projects", value: "" },

package/src/dashboard/react/components/ActivityTimeline.tsx

@@ -3,6 +3,7 @@ import { mergeProjectedTurns, turnPresentation } from "../../state.js";
 import { turnUsageView } from "../presentation";
 import type { Task } from "../types";
 import { RelativeTime } from "./RelativeTime";
+import { LinkedText } from "./LinkedText";
 import { ShimmerText } from "./ShimmerText";
 import { StatusBadge } from "./StatusBadge";
 
@@ -34,14 +35,16 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
               {presentation.sourceLabel && <Text c="dimmed" size="xs">{presentation.sourceLabel}</Text>}
               <Box>
                 <Text c="dimmed" className="taskchef-field-label" size="xs">Request</Text>
-                <Text className="taskchef-preserve-lines" size="sm">{turn.requestSummary ?? "Request not recorded."}</Text>
+                <Text className="taskchef-preserve-lines" size="sm">
+                  <LinkedText task={task} text={turn.requestSummary ?? "Request not recorded."} />
+                </Text>
               </Box>
               <Box>
                 <Text c="dimmed" className="taskchef-field-label" size="xs">Result</Text>
                 <Text className="taskchef-preserve-lines" size="sm">
                   {presentation.status === "working"
                     ? <ShimmerText>{presentation.summary}</ShimmerText>
-                    : presentation.summary}
+                    : <LinkedText task={task} text={presentation.summary} />}
                 </Text>
               </Box>
               <Text

package/src/dashboard/react/components/GitHubLinks.tsx

@@ -1,25 +1,46 @@
-import { Anchor, Group, Text } from "@mantine/core";
-import type { Task } from "../types";
+import { Anchor, Box, Group, Text } from "@mantine/core";
+import {
+  githubReferenceAccessibleLabel,
+  githubReferenceDisplayLabels,
+  groupRelatedGitHubLinks,
+} from "../../github-links.js";
+import type { GitHubLink, Task } from "../types";
 
 export function GitHubLinks({ task }: { task: Task }) {
   const links = task.relatedGitHubLinks ?? [];
   if (links.length === 0 && !task.relatedGitHubLinksTruncated) return null;
+  const groups = groupRelatedGitHubLinks(links) as GitHubLink[][];
+  const displayLabels = githubReferenceDisplayLabels(groups.flat(), { related: true }) as string[];
+  let linkIndex = 0;
   return (
-    <Group aria-label={`Related GitHub links for ${task.title}`} component="nav" gap={5} wrap="wrap">
-      {links.map((link) => (
-        <Anchor
-          aria-label={`${link.label}, GitHub ${link.type === "pull" ? "pull request" : link.type ?? "link"} (opens in a new tab)`}
-          className="taskchef-github-link"
-          href={link.url}
-          key={link.url}
-          rel="noopener noreferrer"
-          size="xs"
-          target="_blank"
-        >
-          {link.label}
-        </Anchor>
+    <Box aria-label={`Related GitHub links for ${task.title}`} className="taskchef-github-groups" component="nav">
+      {groups.map((group) => (
+        <Group className="taskchef-github-group" gap={5} key={`${group[0].owner}/${group[0].repository}`} wrap="wrap">
+          {group.map((link) => {
+            const displayLabel = displayLabels[linkIndex];
+            linkIndex += 1;
+            const kind = link.type === "pull"
+              ? ", GitHub pull request"
+              : link.type === "issue"
+                ? ", GitHub issue"
+                : " on GitHub";
+            return (
+              <Anchor
+                aria-label={`${githubReferenceAccessibleLabel(link)}${kind} (opens in a new tab)`}
+                className="taskchef-github-link"
+                href={link.url}
+                key={link.url}
+                rel="noopener noreferrer"
+                size="xs"
+                target="_blank"
+              >
+                {displayLabel}
+              </Anchor>
+            );
+          })}
+        </Group>
       ))}
       {task.relatedGitHubLinksTruncated && <Text c="dimmed" size="xs">More links in task history</Text>}
-    </Group>
+    </Box>
   );
 }

package/src/dashboard/react/components/LinkedText.tsx

@@ -0,0 +1,63 @@
+import { Anchor } from "@mantine/core";
+import {
+  githubReferenceAccessibleLabel,
+  githubReferenceDisplayLabels,
+  referenceSegments,
+} from "../../github-links.js";
+import type { Task } from "../types";
+
+interface ReferenceSegment {
+  kind: "ambiguous" | "link" | "text";
+  label?: string;
+  owner?: string;
+  reason?: string;
+  repository?: string;
+  text: string;
+  type?: "generic" | "issue" | "pull" | "repository";
+  url?: string;
+}
+
+export function LinkedText({ task, text }: { task: Task; text: string }) {
+  const segments = referenceSegments(text, {
+    projectRepositories: task.project.githubRepos,
+    taskRepository: task.relatedGitHubRepository,
+  }) as ReferenceSegment[];
+  const links = segments.filter((segment) => segment.kind === "link");
+  const displayLabels = githubReferenceDisplayLabels(links) as string[];
+  let linkIndex = 0;
+  return segments.map((segment, index) => {
+    if (segment.kind === "text") return segment.text;
+    if (segment.kind === "ambiguous") {
+      return (
+        <span
+          aria-label={segment.reason}
+          className="taskchef-github-reference-ambiguous"
+          key={`${index}:${segment.text}`}
+          tabIndex={0}
+          title={segment.reason}
+        >
+          {segment.text}
+        </span>
+      );
+    }
+    const displayLabel = displayLabels[linkIndex];
+    linkIndex += 1;
+    const kind = segment.type === "pull"
+      ? ", GitHub pull request"
+      : segment.type === "issue"
+        ? ", GitHub issue"
+        : segment.owner ? " on GitHub" : "";
+    return (
+      <Anchor
+        aria-label={`${githubReferenceAccessibleLabel(segment)}${kind} (opens in a new tab)`}
+        className="taskchef-github-link"
+        href={segment.url}
+        key={`${index}:${segment.url}`}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        {displayLabel}
+      </Anchor>
+    );
+  });
+}

package/src/dashboard/react/components/NotificationCenter.test.tsx

@@ -17,9 +17,14 @@ const notification: NotificationSnapshot = {
   summary: "Review completed.",
 };
 
-afterEach(cleanup);
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
 
 test("notification portal stays non-modal until the operator chooses an action", () => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date("2026-08-30T12:10:00.000Z"));
   const onOpen = vi.fn();
   const onDismiss = vi.fn();
   render(

package/src/dashboard/react/components/TaskCard.tsx

@@ -3,9 +3,11 @@ import { IconExternalLink } from "@tabler/icons-react";
 import { latestTurnPresentation } from "../../state.js";
 import type { Task } from "../types";
 import { GitHubLinks } from "./GitHubLinks";
+import { LinkedText } from "./LinkedText";
 import { RelativeTime } from "./RelativeTime";
 import { ShimmerText } from "./ShimmerText";
 import { StatusBadge } from "./StatusBadge";
+import { TaskUsageSummary } from "./TaskUsageSummary";
 
 export function TaskCard({
   onOpenCodex,
@@ -21,30 +23,35 @@ export function TaskCard({
     <Paper className="taskchef-task-row" component="article" p="md" radius="md" withBorder>
       <Stack className="taskchef-task-main" gap="sm">
           <Box>
-            <Group align="flex-start" gap="sm" justify="space-between" wrap="nowrap">
+            <Box className="taskchef-card-heading">
               <Title order={3} size="h5">
                 <button className="taskchef-title-button" onClick={() => onOpenDetail(task)} type="button">
                   {task.title}
                 </button>
               </Title>
-              <StatusBadge status={task.status} />
-            </Group>
+              <Stack align="flex-end" className="taskchef-card-metadata" gap={4}>
+                <StatusBadge status={task.status} />
+                <TaskUsageSummary task={task} />
+              </Stack>
+            </Box>
             <Text c="dimmed" mt={2} size="xs">{task.project.name}</Text>
           </Box>
 
           <Box className="taskchef-summary-grid">
             <Text c="dimmed" className="taskchef-field-label" size="xs">Request</Text>
-            <Text className="taskchef-preserve-lines" lineClamp={3} size="sm">{latest.requestSummary}</Text>
+            <Text className="taskchef-preserve-lines" lineClamp={3} size="sm">
+              <LinkedText task={task} text={latest.requestSummary} />
+            </Text>
             <Text c="dimmed" className="taskchef-field-label" size="xs">Result</Text>
             <Text className="taskchef-preserve-lines" lineClamp={3} size="sm">
               {latest.resultStatus === "working"
                 ? <ShimmerText>{latest.resultSummary}</ShimmerText>
-                : latest.resultSummary}
+                : <LinkedText task={task} text={latest.resultSummary} />}
             </Text>
           </Box>
 
           <GitHubLinks task={task} />
-          <Group gap="md" justify="space-between">
+          <Group className="taskchef-card-footer" gap="md" justify="space-between">
             <RelativeTime label={`Updated time for ${task.title}`} value={task.meaningfulUpdatedAt ?? task.updatedAt} />
             <Button
               aria-label={`Open chat for ${task.title}`}

package/src/dashboard/react/components/TaskUsageSummary.test.tsx

@@ -0,0 +1,85 @@
+import { MantineProvider } from "@mantine/core";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { fixtureTask } from "../fixtures";
+import { TaskCard } from "./TaskCard";
+import { TaskUsageSummary } from "./TaskUsageSummary";
+
+afterEach(cleanup);
+
+function renderUsage(task = fixtureTask()) {
+  return render(<MantineProvider><TaskUsageSummary task={task} /></MantineProvider>);
+}
+
+describe("task list usage summary", () => {
+  test("uses shared compact token and currency formatting with full-value accessibility", () => {
+    renderUsage(fixtureTask({
+      status: "completed",
+      usage: {
+        status: "available",
+        updatedAt: "2026-08-30T09:00:00.000Z",
+        task: {
+          totalTokens: 1_324_567,
+          estimatedCostUsd: 12.3449,
+          sourceUpdatedAt: "2026-08-30T09:00:00.000Z",
+        },
+      },
+    }));
+    const summary = screen.getByText("1.32M tokens · est. $12.34");
+    expect(summary).toHaveAttribute("data-usage-state", "ready");
+    expect(summary).toHaveAccessibleName(/1,324,567 tokens; estimated cost \$12\.34/i);
+    expect(summary).toHaveAttribute("title", expect.stringContaining("unrounded estimate $12.3449"));
+  });
+
+  test("states cost unavailability without replacing a known token total with zero", () => {
+    renderUsage(fixtureTask({
+      status: "completed",
+      usage: { status: "available", task: { totalTokens: 1_324_567, estimatedCostUsd: null } },
+    }));
+    expect(screen.getByText("1.32M tokens · cost unavailable")).toHaveAccessibleName(
+      /1,324,567 tokens; estimated cost unavailable/i,
+    );
+  });
+
+  test("keeps pending and calculating wording distinct and uses the restrained shimmer", () => {
+    const { rerender } = renderUsage();
+    expect(screen.getByText("Token usage pending")).toHaveClass("taskchef-shimmer");
+    rerender(
+      <MantineProvider>
+        <TaskUsageSummary task={fixtureTask({
+          status: "completed",
+          usage: { generationTurnRef: "turn-one", status: "calculating" },
+        })} />
+      </MantineProvider>,
+    );
+    expect(screen.getByText("Calculating token usage")).toHaveClass("taskchef-shimmer");
+  });
+
+  test("shows a quiet explicit unavailable state with the cache reason in its tooltip", () => {
+    renderUsage(fixtureTask({
+      status: "completed",
+      usage: { status: "unavailable", reason: "No matching cached boundary." },
+    }));
+    const summary = screen.getByText("Token usage unavailable");
+    expect(summary).toHaveAttribute("data-usage-state", "unavailable");
+    expect(summary).toHaveAttribute("title", "No matching cached boundary.");
+  });
+
+  test("places usage directly beneath the primary status badge in a responsive metadata block", () => {
+    const { container } = render(
+      <MantineProvider>
+        <TaskCard
+          onOpenCodex={vi.fn()}
+          onOpenDetail={vi.fn()}
+          task={fixtureTask()}
+        />
+      </MantineProvider>,
+    );
+    const metadata = container.querySelector(".taskchef-card-metadata");
+    expect(metadata).not.toBeNull();
+    expect(metadata?.children[0]).toHaveClass("taskchef-status-badge");
+    expect(metadata?.children[1]).toHaveClass("taskchef-task-usage");
+    expect(screen.getByRole("button", { name: /^review checkout reconciliation$/i })).toBeVisible();
+    expect(screen.getByRole("button", { name: /open chat/i })).toBeVisible();
+  });
+});

package/src/dashboard/react/components/TaskUsageSummary.tsx

@@ -0,0 +1,24 @@
+import { Text } from "@mantine/core";
+import type { Task } from "../types";
+import { listUsageView } from "../presentation";
+import { ShimmerText } from "./ShimmerText";
+
+export function TaskUsageSummary({ task }: { task: Task }) {
+  const usage = listUsageView(task);
+  const content = usage.kind === "pending" || usage.kind === "calculating"
+    ? <ShimmerText>{usage.label}</ShimmerText>
+    : usage.label;
+  return (
+    <Text
+      aria-label={usage.accessibleLabel}
+      aria-live="polite"
+      c="dimmed"
+      className="taskchef-task-usage"
+      data-usage-state={usage.kind}
+      size="xs"
+      title={usage.title}
+    >
+      {content}
+    </Text>
+  );
+}

package/src/dashboard/react/components/UsagePanel.tsx

@@ -1,7 +1,12 @@
 import { Box, Group, Paper, Text } from "@mantine/core";
 import { IconCoins } from "@tabler/icons-react";
 import type { Task } from "../types";
-import { usageView } from "../presentation";
+import {
+  formatCompactTokens,
+  formatEstimatedCost,
+  formatFullTokens,
+  usageView,
+} from "../presentation";
 import { ShimmerText } from "./ShimmerText";
 
 export function UsagePanel({ task }: { task: Task }) {
@@ -22,18 +27,45 @@ export function UsagePanel({ task }: { task: Task }) {
   const cached = usage.usage.cachedInputTokens ?? 0;
   const input = usage.usage.inputTokens ?? 0;
   const cacheRatio = input + cached > 0 ? `${Math.round((cached / (input + cached)) * 100)}%` : "—";
-  const values = [
-    [usage.knownSoFar ? "Tokens · known so far" : "Tokens", new Intl.NumberFormat().format(usage.usage.totalTokens)],
-    ["Estimated cost", usage.usage.estimatedCostUsd == null ? "—" : `$${usage.usage.estimatedCostUsd.toFixed(4)}`],
-    ["Model", Object.keys(usage.usage.models ?? {}).join(", ") || "—"],
-    ["Cache ratio", cacheRatio],
-  ] as const;
+  const values: Array<{
+    accessibleValue?: string;
+    label: string;
+    title?: string;
+    value: string;
+  }> = [
+    {
+      accessibleValue: `${formatFullTokens(usage.usage.totalTokens)} tokens`,
+      label: usage.knownSoFar ? "Tokens · known so far" : "Tokens",
+      title: `${formatFullTokens(usage.usage.totalTokens)} tokens`,
+      value: formatCompactTokens(usage.usage.totalTokens),
+    },
+    {
+      accessibleValue: usage.usage.estimatedCostUsd == null
+        ? "Estimated cost unavailable"
+        : `Estimated cost ${formatEstimatedCost(usage.usage.estimatedCostUsd)}`,
+      label: "Estimated cost",
+      title: usage.usage.estimatedCostUsd == null
+        ? undefined
+        : `Unrounded estimate: $${usage.usage.estimatedCostUsd}`,
+      value: formatEstimatedCost(usage.usage.estimatedCostUsd),
+    },
+    { label: "Model", value: Object.keys(usage.usage.models ?? {}).join(", ") || "—" },
+    { label: "Cache ratio", value: cacheRatio },
+  ];
   return (
     <Box aria-live="polite" className="taskchef-metrics">
-      {values.map(([label, value]) => (
+      {values.map(({ accessibleValue, label, title, value }) => (
         <Paper className="taskchef-metric" key={label} p="sm" radius="md" withBorder>
           <Text c="dimmed" size="xs">{label}</Text>
-          <Text className="taskchef-metric-value" fw={650} size="sm">{value}</Text>
+          <Text
+            aria-label={accessibleValue}
+            className="taskchef-metric-value"
+            fw={650}
+            size="sm"
+            title={title}
+          >
+            {value}
+          </Text>
         </Paper>
       ))}
     </Box>

package/src/dashboard/react/overlay-state.test.ts

@@ -1,7 +1,10 @@
 import { describe, expect, test } from "vitest";
+import { fixtureTask } from "./fixtures";
 import type { NotificationSnapshot } from "./types";
 import {
   clearNotificationHistory,
+  listUsageSignature,
+  mergeListTaskIntoDetail,
   notificationAppeared,
   notificationClicked,
   type OverlayState,
@@ -76,4 +79,32 @@ describe("overlay coordination", () => {
     const current = state({ detailTaskId: "task-one", detailOpened: true, notifications: [taskUpdate] });
     expect(clearNotificationHistory(current)).toEqual({ ...current, notifications: [] });
   });
+
+  test("a cache-only list update preserves rich detail usage and requests a refresh", () => {
+    const detail = fixtureTask({
+      usage: {
+        generationTurnRef: "turn-one",
+        status: "available",
+        task: { totalTokens: 1200, estimatedCostUsd: 0.24, models: { "gpt-5": {} } },
+        turns: { "turn-one": { status: "available", totalTokens: 1200 } },
+        updatedAt: "2026-08-30T08:00:00.000Z",
+      },
+    });
+    const list = fixtureTask({
+      turns: undefined,
+      results: undefined,
+      usage: {
+        generationTurnRef: "turn-one",
+        status: "available",
+        task: { totalTokens: 1800, estimatedCostUsd: 0.36 },
+        updatedAt: "2026-08-30T08:01:00.000Z",
+      },
+    });
+
+    const merged = mergeListTaskIntoDetail(detail, list);
+    expect(merged.usage).toBe(detail.usage);
+    expect(merged.turns).toBe(detail.turns);
+    expect(merged.results).toBe(detail.results);
+    expect(listUsageSignature(list)).not.toBe(listUsageSignature(detail));
+  });
 });

package/src/dashboard/react/overlay-state.ts

@@ -1,4 +1,4 @@
-import type { NotificationSnapshot } from "./types";
+import type { NotificationSnapshot, Task } from "./types";
 
 export interface OverlayState {
   detailTaskId: string | null;
@@ -36,3 +36,25 @@ export function notificationClicked(
 export function clearNotificationHistory(state: OverlayState): OverlayState {
   return { ...state, notifications: [] };
 }
+
+export function mergeListTaskIntoDetail(current: Task, updated: Task): Task {
+  const currentIsDetail = Array.isArray(current.turns) && Array.isArray(current.results);
+  const updatedIsList = !Array.isArray(updated.turns) && !Array.isArray(updated.results);
+  return {
+    ...current,
+    ...updated,
+    ...(currentIsDetail && updatedIsList
+      ? { results: current.results, turns: current.turns, usage: current.usage }
+      : {}),
+  };
+}
+
+export function listUsageSignature(task: Task | null | undefined): string {
+  return JSON.stringify([
+    task?.usage?.generationTurnRef ?? null,
+    task?.usage?.status ?? null,
+    task?.usage?.updatedAt ?? null,
+    task?.usage?.task?.totalTokens ?? null,
+    task?.usage?.task?.estimatedCostUsd ?? null,
+  ]);
+}