taskchef 7.23.4 → 7.24.1

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

@@ -0,0 +1,251 @@
+import {
+  ActionIcon,
+  Alert,
+  Box,
+  Button,
+  Divider,
+  Drawer,
+  Group,
+  Menu,
+  Modal,
+  ScrollArea,
+  Stack,
+  Text,
+  Title,
+  Tooltip,
+} from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import {
+  IconCheck,
+  IconClipboard,
+  IconDots,
+  IconExternalLink,
+  IconX,
+} from "@tabler/icons-react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import type { Task } from "../types";
+import { ActivityTimeline } from "./ActivityTimeline";
+import { GitHubLinks } from "./GitHubLinks";
+import { RelativeTime } from "./RelativeTime";
+import { StatusBadge } from "./StatusBadge";
+import { UsagePanel } from "./UsagePanel";
+
+export type TerminalStatus = "completed" | "failed";
+export interface ManualTransitionResult {
+  ok: boolean;
+  rotateActionId?: boolean;
+}
+
+export function TaskDetail({
+  busy,
+  error,
+  highlightTurnRef,
+  onClose,
+  onCopy,
+  onOpenCodex,
+  onTransition,
+  opened,
+  task,
+  notifications,
+  notice,
+}: {
+  busy: boolean;
+  error: string | null;
+  highlightTurnRef: string | null;
+  onClose: () => void;
+  onCopy: () => void;
+  onOpenCodex: () => void;
+  onTransition: (status: TerminalStatus, actionId: string) => Promise<ManualTransitionResult>;
+  opened: boolean;
+  task: Task | null;
+  notifications?: ReactNode;
+  notice?: string | null;
+}) {
+  const mobile = useMediaQuery("(max-width: 48em)");
+  const [confirmStatus, setConfirmStatus] = useState<TerminalStatus | null>(null);
+  useEffect(() => {
+    if (!opened) setConfirmStatus(null);
+  }, [opened]);
+  useEffect(() => {
+    if (opened && highlightTurnRef) {
+      requestAnimationFrame(() => {
+        document.querySelector<HTMLElement>(`[data-turn-ref="${CSS.escape(highlightTurnRef)}"]`)?.focus();
+      });
+    }
+  }, [highlightTurnRef, opened, task?.turns?.length, task?.updatedAt]);
+  useEffect(() => {
+    if (confirmStatus && (!task || !manualTransitionTargets(task).includes(confirmStatus))) {
+      setConfirmStatus(null);
+    }
+  }, [confirmStatus, task?.status]);
+
+  if (!task) return null;
+  const transitionTargets = manualTransitionTargets(task);
+  const content = (
+    <Stack gap="lg">
+      {notifications}
+      <Box>
+        <Group align="flex-start" gap="sm" justify="space-between" wrap="nowrap">
+          <Box>
+            <Text c="teal" fw={700} size="xs" tt="uppercase">{task.project.name}</Text>
+            <Title id="task-detail-title" order={2} size="h3" tabIndex={-1}>{task.title}</Title>
+          </Box>
+          <StatusBadge status={task.status} />
+        </Group>
+        <Group gap="xs" mt="md">
+          <Button
+            leftSection={<IconExternalLink aria-hidden size={15} />}
+            loading={busy}
+            onClick={onOpenCodex}
+            size="compact-sm"
+          >
+            Open chat
+          </Button>
+          <Menu position="bottom-start" shadow="md" withinPortal zIndex={360}>
+            <Menu.Target>
+              <Tooltip label="More task actions">
+                <ActionIcon aria-label="More task actions" disabled={busy} variant="default">
+                  <IconDots aria-hidden size={17} />
+                </ActionIcon>
+              </Tooltip>
+            </Menu.Target>
+            <Menu.Dropdown>
+              <Menu.Item leftSection={<IconClipboard size={14} />} onClick={onCopy}>Copy Task ID</Menu.Item>
+              {transitionTargets.includes("completed") && (
+                <Menu.Item leftSection={<IconCheck size={14} />} onClick={() => setConfirmStatus("completed")}>Mark completed</Menu.Item>
+              )}
+              {transitionTargets.includes("failed") && (
+                <Menu.Item color="red" leftSection={<IconX size={14} />} onClick={() => setConfirmStatus("failed")}>Mark failed</Menu.Item>
+              )}
+            </Menu.Dropdown>
+          </Menu>
+        </Group>
+        <Box mt="sm">
+          <GitHubLinks task={task} />
+        </Box>
+      </Box>
+
+      {confirmStatus && (
+        <ManualTransitionConfirmation
+          key={confirmStatus}
+          busy={busy}
+          onCancel={() => setConfirmStatus(null)}
+          onTransition={onTransition}
+          status={confirmStatus}
+        />
+      )}
+      {notice && <Alert color="teal" role="status">{notice}</Alert>}
+      {error && <Alert color="red" role="alert">{error}</Alert>}
+
+      <section aria-labelledby="usage-heading">
+        <Title id="usage-heading" mb="xs" order={3} size="h5">Usage</Title>
+        <UsagePanel task={task} />
+      </section>
+      <Divider />
+      <section aria-labelledby="activity-heading">
+        <Title id="activity-heading" mb="sm" order={3} size="h5">Activity timeline</Title>
+        <ActivityTimeline highlightTurnRef={highlightTurnRef} task={task} />
+      </section>
+      <section aria-labelledby="instruction-heading">
+        <Title id="instruction-heading" mb="xs" order={3} size="h5">Original instruction</Title>
+        <Box className="taskchef-code-panel" component="pre">{task.instruction}</Box>
+      </section>
+      <section aria-labelledby="metadata-heading">
+        <Title id="metadata-heading" mb="xs" order={3} size="h5">Metadata</Title>
+        <dl className="taskchef-metadata">
+          <dt>Task ID</dt><dd>{task.id}</dd>
+          <dt>Thread ID</dt><dd>{task.threadId ?? "—"}</dd>
+          <dt>Current turn ref</dt><dd>{task.turnRef ?? "—"}</dd>
+          <dt>Project path</dt><dd>{task.project.path}</dd>
+          <dt>Created</dt><dd><RelativeTime label="Created time" value={task.createdAt} /></dd>
+          <dt>Updated</dt><dd><RelativeTime label="Updated time" value={task.meaningfulUpdatedAt ?? task.updatedAt} /></dd>
+          <dt>Updated by</dt><dd>{task.updatedBy ?? "—"}</dd>
+        </dl>
+      </section>
+    </Stack>
+  );
+
+  if (mobile) {
+    return (
+      <Drawer
+        closeOnClickOutside={!busy}
+        closeOnEscape={!busy}
+        onClose={onClose}
+        opened={opened}
+        overlayProps={{ backgroundOpacity: 0.55, blur: 2 }}
+        position="bottom"
+        scrollAreaComponent={ScrollArea.Autosize}
+        size="92%"
+        title={<span className="taskchef-visually-hidden">Task details</span>}
+        trapFocus
+        zIndex={300}
+      >
+        {content}
+      </Drawer>
+    );
+  }
+  return (
+    <Modal
+      aria-labelledby="task-detail-title"
+      closeOnClickOutside={!busy}
+      closeOnEscape={!busy}
+      onClose={onClose}
+      opened={opened}
+      overlayProps={{ backgroundOpacity: 0.55, blur: 2 }}
+      scrollAreaComponent={ScrollArea.Autosize}
+      size="min(820px, calc(100vw - 32px))"
+      title={<span className="taskchef-visually-hidden">Task details</span>}
+      trapFocus
+      zIndex={300}
+    >
+      {content}
+    </Modal>
+  );
+}
+
+function manualTransitionTargets(task: Task): TerminalStatus[] {
+  return task.status === "completed"
+    ? ["failed"]
+    : task.status === "failed"
+      ? ["completed"]
+      : task.status === "working" || task.status === "needs_input"
+        ? ["completed", "failed"]
+        : [];
+}
+
+export function ManualTransitionConfirmation({
+  busy,
+  onCancel,
+  onTransition,
+  status,
+}: {
+  busy: boolean;
+  onCancel: () => void;
+  onTransition: (status: TerminalStatus, actionId: string) => Promise<ManualTransitionResult>;
+  status: TerminalStatus;
+}) {
+  const actionId = useRef(crypto.randomUUID());
+  return (
+    <Alert color={status === "failed" ? "red" : "teal"} role="alert" title={`Mark task ${status}?`}>
+      <Text mb="sm" size="sm">This interrupts active work and appends an audited manual dashboard turn.</Text>
+      <Group gap="xs">
+        <Button
+          color={status === "failed" ? "red" : "teal"}
+          loading={busy}
+          onClick={async () => {
+            const result = await onTransition(status, actionId.current);
+            if (result.ok) {
+              onCancel();
+              requestAnimationFrame(() => document.getElementById("task-detail-title")?.focus());
+            }
+            else if (result.rotateActionId) actionId.current = crypto.randomUUID();
+          }}
+          size="compact-sm"
+        >
+          Confirm
+        </Button>
+        <Button disabled={busy} onClick={onCancel} size="compact-sm" variant="default">Cancel</Button>
+      </Group>
+    </Alert>
+  );
+}

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

@@ -0,0 +1,73 @@
+import { Box, Group, Paper, Text } from "@mantine/core";
+import { IconCoins } from "@tabler/icons-react";
+import type { Task } from "../types";
+import {
+  formatCompactTokens,
+  formatEstimatedCost,
+  formatFullTokens,
+  usageView,
+} from "../presentation";
+import { ShimmerText } from "./ShimmerText";
+
+export function UsagePanel({ task }: { task: Task }) {
+  const usage = usageView(task);
+  if (usage.kind === "pending" || usage.kind === "calculating") {
+    return (
+      <Paper aria-live="polite" className="taskchef-subtle-panel" p="sm" radius="md">
+        <Group gap="xs">
+          <IconCoins aria-hidden size={16} />
+          <Text size="sm"><ShimmerText>{usage.label}</ShimmerText></Text>
+        </Group>
+      </Paper>
+    );
+  }
+  if (usage.kind === "unavailable") {
+    return <Text aria-live="polite" c="dimmed" size="sm">{usage.label}</Text>;
+  }
+  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: 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(({ accessibleValue, label, title, value }) => (
+        <Paper className="taskchef-metric" key={label} p="sm" radius="md" withBorder>
+          <Text c="dimmed" size="xs">{label}</Text>
+          <Text
+            aria-label={accessibleValue}
+            className="taskchef-metric-value"
+            fw={650}
+            size="sm"
+            title={title}
+          >
+            {value}
+          </Text>
+        </Paper>
+      ))}
+    </Box>
+  );
+}

package/src/dashboard/react/fixtures.ts

@@ -0,0 +1,52 @@
+import type { Task } from "./types";
+
+export function fixtureTask(overrides: Partial<Task> = {}): Task {
+  const timestamp = "2026-08-30T08:00:00.000Z";
+  const id = overrides.id ?? "11111111-1111-4111-8111-111111111111";
+  return {
+    id,
+    schemaVersion: 10,
+    title: "Review checkout reconciliation",
+    instruction: "Verify the isolated dashboard fixture without using live TaskChef data.",
+    project: {
+      name: "TaskChef Preview",
+      path: "/tmp/taskchef-preview-project",
+      githubRepos: ["https://github.com/example/taskchef-preview"],
+    },
+    createdAt: timestamp,
+    updatedAt: timestamp,
+    meaningfulUpdatedAt: timestamp,
+    updatedBy: "mcp",
+    status: "working",
+    summary: null,
+    threadId: "019ffb69-57a6-7801-8b7a-8ff4c32a398c",
+    turnRef: "turn-one",
+    turnId: null,
+    lastResult: null,
+    latestTurn: {
+      requestSummary: "Review the operator-facing task state.",
+      result: null,
+      startedAt: timestamp,
+      turnRef: "turn-one",
+      turnId: null,
+    },
+    turns: [{
+      requestSummary: "Review the operator-facing task state.",
+      result: null,
+      startedAt: timestamp,
+      turnRef: "turn-one",
+      turnId: null,
+    }],
+    results: [],
+    usage: { generationTurnRef: "turn-one", status: "pending" },
+    relatedGitHubLinks: [{
+      label: "example/taskchef-preview#24",
+      owner: "example",
+      repository: "taskchef-preview",
+      number: "24",
+      type: "pull",
+      url: "https://github.com/example/taskchef-preview/pull/24",
+    }],
+    ...overrides,
+  };
+}

package/src/dashboard/react/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
+    <meta name="theme-color" content="#f3f5f2" />
+    <meta name="taskchef-style-nonce" content="__TASKCHEF_STYLE_NONCE__" />
+    <title>TaskChef Dashboard</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>

package/src/dashboard/react/main.tsx

@@ -0,0 +1,12 @@
+import "@mantine/core/styles.css";
+import "@mantine/notifications/styles.css";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import DashboardApp from "./App";
+import "./styles.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <DashboardApp />
+  </StrictMode>,
+);

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

@@ -0,0 +1,79 @@
+import { describe, expect, test } from "vitest";
+import type { NotificationSnapshot } from "./types";
+import {
+  clearNotificationHistory,
+  notificationAppeared,
+  notificationClicked,
+  type OverlayState,
+} from "./overlay-state";
+
+const taskUpdate: NotificationSnapshot = {
+  id: "task-one-completed",
+  taskId: "task-one",
+  title: "Review reconciliation",
+  status: "completed",
+  event: "completed",
+  turnRef: "turn-two",
+  turnId: null,
+  timestamp: "2026-08-30T08:10:00.000Z",
+  summary: "Review completed.",
+};
+const unrelated: NotificationSnapshot = {
+  ...taskUpdate,
+  id: "task-two-failed",
+  taskId: "task-two",
+  title: "Validate fixture",
+  status: "failed",
+  event: "failed",
+  turnRef: "turn-three",
+};
+
+function state(overrides: Partial<OverlayState> = {}): OverlayState {
+  return {
+    detailTaskId: null,
+    detailOpened: false,
+    highlightTurnRef: null,
+    notifications: [],
+    refreshGeneration: 0,
+    ...overrides,
+  };
+}
+
+describe("overlay coordination", () => {
+  test("a later notification changes visibility without changing the open detail", () => {
+    const open = state({ detailTaskId: "task-one", detailOpened: true });
+    expect(notificationAppeared(open, [taskUpdate])).toEqual({
+      ...open,
+      notifications: [taskUpdate],
+    });
+  });
+
+  test("clicking a notification dismisses only it and opens its detail above prior content", () => {
+    const next = notificationClicked(state({ notifications: [taskUpdate, unrelated] }), taskUpdate, true);
+    expect(next.detailOpened).toBe(true);
+    expect(next.detailTaskId).toBe("task-one");
+    expect(next.highlightTurnRef).toBe("turn-two");
+    expect(next.notifications).toEqual([unrelated]);
+    expect(next.refreshGeneration).toBe(1);
+  });
+
+  test("clicking an update for the already-open task refreshes and highlights without closing unrelated messages", () => {
+    const current = state({
+      detailTaskId: "task-one",
+      detailOpened: true,
+      notifications: [taskUpdate, unrelated],
+      refreshGeneration: 4,
+    });
+    const next = notificationClicked(current, taskUpdate, true);
+    expect(next.detailTaskId).toBe(current.detailTaskId);
+    expect(next.detailOpened).toBe(true);
+    expect(next.highlightTurnRef).toBe("turn-two");
+    expect(next.refreshGeneration).toBe(5);
+    expect(next.notifications).toEqual([unrelated]);
+  });
+
+  test("clearing notification history leaves detail state untouched", () => {
+    const current = state({ detailTaskId: "task-one", detailOpened: true, notifications: [taskUpdate] });
+    expect(clearNotificationHistory(current)).toEqual({ ...current, notifications: [] });
+  });
+});

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

@@ -0,0 +1,38 @@
+import type { NotificationSnapshot } from "./types";
+
+export interface OverlayState {
+  detailTaskId: string | null;
+  detailOpened: boolean;
+  highlightTurnRef: string | null;
+  notifications: NotificationSnapshot[];
+  refreshGeneration: number;
+}
+
+export function notificationAppeared(
+  state: OverlayState,
+  notifications: NotificationSnapshot[],
+): OverlayState {
+  // Visibility changes only; focus remains where the operator left it.
+  return { ...state, notifications };
+}
+
+export function notificationClicked(
+  state: OverlayState,
+  notification: NotificationSnapshot,
+  taskAvailable: boolean,
+): OverlayState {
+  const notifications = state.notifications.filter(({ id }) => id !== notification.id);
+  if (!taskAvailable) return { ...state, notifications };
+  return {
+    ...state,
+    detailTaskId: notification.taskId,
+    detailOpened: true,
+    highlightTurnRef: notification.turnRef ?? notification.turnId,
+    notifications,
+    refreshGeneration: state.refreshGeneration + 1,
+  };
+}
+
+export function clearNotificationHistory(state: OverlayState): OverlayState {
+  return { ...state, notifications: [] };
+}