taskchef 7.23.4 → 7.24.1

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

@@ -0,0 +1,46 @@
+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 (
+    <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>}
+    </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

@@ -0,0 +1,71 @@
+import { MantineProvider } from "@mantine/core";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, expect, test, vi } from "vitest";
+import { fixtureTask } from "../fixtures";
+import type { NotificationSnapshot } from "../types";
+import { NotificationCenter } from "./NotificationCenter";
+
+const notification: NotificationSnapshot = {
+  id: "task-completed",
+  taskId: "11111111-1111-4111-8111-111111111111",
+  title: "Review checkout reconciliation",
+  status: "completed",
+  event: "completed",
+  turnRef: "turn-one",
+  turnId: null,
+  timestamp: "2026-08-30T08:10:00.000Z",
+  summary: "Review completed.",
+};
+
+afterEach(cleanup);
+
+test("notification portal stays non-modal until the operator chooses an action", () => {
+  const onOpen = vi.fn();
+  const onDismiss = vi.fn();
+  render(
+    <MantineProvider>
+      <button autoFocus type="button">Detail action</button>
+      <NotificationCenter
+        notifications={[notification]}
+        onClear={() => {}}
+        onDismiss={onDismiss}
+        onOpen={onOpen}
+        tasks={[fixtureTask()]}
+      />
+    </MantineProvider>,
+  );
+  expect(screen.getByRole("button", { name: "Detail action" })).toHaveFocus();
+  const panel = screen.getByRole("region", { name: "Task notifications" });
+  expect(panel).toBeVisible();
+  expect(panel.querySelector(".taskchef-notification-list")).toBeInTheDocument();
+  expect(screen.getByRole("button", { name: /Open current task details/ })).toHaveAccessibleDescription(
+    /Review completed\. \d+ hours ago/,
+  );
+  expect(panel.nextElementSibling).toHaveTextContent(
+    /Task completed\. Review checkout reconciliation\. Review completed\. Turn ref turn-one\. \d+ hours ago\./,
+  );
+  fireEvent.click(screen.getByRole("button", { name: /Open current task details/ }));
+  expect(onOpen).toHaveBeenCalledWith(notification);
+  fireEvent.click(screen.getByRole("button", { name: /Dismiss Task completed notification/ }));
+  expect(onDismiss).toHaveBeenCalledWith(notification);
+});
+
+test("can render inside a focus-trapped task detail", () => {
+  render(
+    <MantineProvider>
+      <div data-testid="detail-dialog">
+        <NotificationCenter
+          notifications={[notification]}
+          onClear={() => {}}
+          onDismiss={() => {}}
+          onOpen={() => {}}
+          tasks={[fixtureTask()]}
+          withinPortal={false}
+        />
+      </div>
+    </MantineProvider>,
+  );
+  expect(screen.getByTestId("detail-dialog")).toContainElement(
+    screen.getByRole("region", { name: "Task notifications" }),
+  );
+});

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

@@ -0,0 +1,111 @@
+import { ActionIcon, Box, Button, Group, Paper, Portal, ScrollArea, Stack, Text, Tooltip } from "@mantine/core";
+import { IconBell, IconX } from "@tabler/icons-react";
+import { notificationDismissLabel, notificationOpenLabel, notificationTitle } from "../../state.js";
+import { formatRelativeTime } from "../../time.js";
+import type { NotificationSnapshot, Task } from "../types";
+import { StatusBadge } from "./StatusBadge";
+
+export function NotificationCenter({
+  notifications,
+  announcements = notifications,
+  onClear,
+  onDismiss,
+  onOpen,
+  tasks,
+  withinPortal = true,
+}: {
+  announcements?: NotificationSnapshot[];
+  notifications: NotificationSnapshot[];
+  onClear: () => void;
+  onDismiss: (notification: NotificationSnapshot) => void;
+  onOpen: (notification: NotificationSnapshot) => void;
+  tasks: Task[];
+  withinPortal?: boolean;
+}) {
+  if (notifications.length === 0) return null;
+  const content = (
+    <>
+      <Paper
+        aria-label="Task notifications"
+        className="taskchef-notifications"
+        p="sm"
+        radius="md"
+        role="region"
+        shadow="xl"
+        withBorder
+      >
+        <Group justify="space-between" mb="xs">
+          <Group gap={6}>
+            <IconBell aria-hidden size={16} />
+            <Text fw={700} size="sm">Updates</Text>
+          </Group>
+          <Button onClick={onClear} size="compact-xs" variant="subtle">Clear all</Button>
+        </Group>
+        <ScrollArea.Autosize className="taskchef-notification-scroll" mah="min(55vh, 520px)" type="auto">
+          <Stack className="taskchef-notification-list" gap={6}>
+            {notifications.map((notification) => {
+              const available = tasks.some((task) => task.id === notification.taskId);
+              const descriptionId = `notification-${Math.abs(hash(notification.id))}`;
+              const summaryId = `${descriptionId}-summary`;
+              const metadataId = `${descriptionId}-metadata`;
+              return (
+                <Paper className="taskchef-notification" key={notification.id} p="xs" radius="sm">
+                  <Group align="flex-start" gap="xs" wrap="nowrap">
+                    <button
+                      aria-describedby={[notification.summary ? summaryId : null, metadataId].filter(Boolean).join(" ")}
+                      aria-label={notificationOpenLabel(notification, available)}
+                      className="taskchef-notification-open"
+                      onClick={() => onOpen(notification)}
+                      type="button"
+                    >
+                      <Group gap="xs" justify="space-between" wrap="nowrap">
+                        <Text fw={700} size="sm">{notificationTitle(notification)}</Text>
+                        <StatusBadge status={notification.status} />
+                      </Group>
+                      <Text lineClamp={1} size="sm">{notification.title}</Text>
+                      {notification.summary && <Text className="taskchef-preserve-lines" id={summaryId} lineClamp={3} size="xs">{notification.summary}</Text>}
+                      <Text c="dimmed" id={metadataId} size="xs">
+                        {formatRelativeTime(notification.timestamp)}{available ? "" : " · Task no longer available"}
+                      </Text>
+                    </button>
+                    <Tooltip label="Dismiss notification">
+                      <ActionIcon
+                        aria-label={notificationDismissLabel(notification)}
+                        color="gray"
+                        onClick={() => onDismiss(notification)}
+                        size="compact-sm"
+                        variant="subtle"
+                      >
+                        <IconX aria-hidden size={14} />
+                      </ActionIcon>
+                    </Tooltip>
+                  </Group>
+                </Paper>
+              );
+            })}
+          </Stack>
+        </ScrollArea.Autosize>
+      </Paper>
+      <Box aria-atomic="true" aria-live="polite" className="taskchef-visually-hidden" role="status">
+        {announcements.map(notificationAnnouncement).join(" ")}
+      </Box>
+    </>
+  );
+  return withinPortal ? <Portal>{content}</Portal> : content;
+}
+
+function notificationAnnouncement(notification: NotificationSnapshot) {
+  return [
+    notificationTitle(notification),
+    notification.title,
+    notification.summary,
+    notification.turnRef ? `Turn ref ${notification.turnRef}` : null,
+    formatRelativeTime(notification.timestamp),
+  ].filter(Boolean).map((part) => String(part).replace(/[.\s]+$/, "")).join(". ") + ".";
+}
+
+function hash(value: string) {
+  let result = 0;
+  for (const character of value) result = ((result << 5) - result + character.charCodeAt(0)) | 0;
+  return result;
+}

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

@@ -0,0 +1,28 @@
+import { Tooltip, UnstyledButton } from "@mantine/core";
+import { IconClock } from "@tabler/icons-react";
+import { createContext, useContext, useState, type ReactNode } from "react";
+import { formatExactTime, formatRelativeTime } from "../../time.js";
+
+const RelativeTimeClock = createContext<number | null>(null);
+
+export function RelativeTimeProvider({ children, now }: { children: ReactNode; now: number }) {
+  return <RelativeTimeClock value={now}>{children}</RelativeTimeClock>;
+}
+
+export function RelativeTime({ label, value }: { label: string; value: string | null | undefined }) {
+  const [exact, setExact] = useState(false);
+  useContext(RelativeTimeClock);
+  const text = exact ? formatExactTime(value) : formatRelativeTime(value);
+  return (
+    <Tooltip label={exact ? "Show relative time" : "Show exact time"}>
+      <UnstyledButton
+        aria-label={`${label}: ${text}. ${exact ? "Show relative time" : "Show exact time"}`}
+        className="taskchef-time"
+        onClick={() => setExact((value) => !value)}
+      >
+        <IconClock aria-hidden size={12} />
+        <span className="taskchef-time-label">{text}</span>
+      </UnstyledButton>
+    </Tooltip>
+  );
+}

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

@@ -0,0 +1,9 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+export function ShimmerText({ children, className = "", ...props }: ComponentPropsWithoutRef<"span">) {
+  return (
+    <span className={`taskchef-shimmer ${className}`.trim()} data-animation="text-shimmer" {...props}>
+      {children}
+    </span>
+  );
+}

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

@@ -0,0 +1,7 @@
+import { Badge } from "@mantine/core";
+import { statusColor, statusLabel } from "../presentation";
+import type { Task } from "../types";
+
+export function StatusBadge({ status }: { status: Task["status"] | "interrupted" }) {
+  return <Badge className="taskchef-status-badge" color={statusColor(status)} size="sm" variant="light">{statusLabel(status)}</Badge>;
+}

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

@@ -0,0 +1,65 @@
+import { Box, Button, Group, Paper, Stack, Text, Title } from "@mantine/core";
+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";
+
+export function TaskCard({
+  onOpenCodex,
+  onOpenDetail,
+  task,
+}: {
+  onOpenCodex: (task: Task) => void;
+  onOpenDetail: (task: Task) => void;
+  task: Task;
+}) {
+  const latest = latestTurnPresentation(task);
+  return (
+    <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">
+              <Title order={3} size="h5">
+                <button className="taskchef-title-button" onClick={() => onOpenDetail(task)} type="button">
+                  {task.title}
+                </button>
+              </Title>
+              <StatusBadge status={task.status} />
+            </Group>
+            <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">
+              <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>
+                : <LinkedText task={task} text={latest.resultSummary} />}
+            </Text>
+          </Box>
+
+          <GitHubLinks task={task} />
+          <Group 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}`}
+              leftSection={<IconExternalLink aria-hidden size={15} />}
+              onClick={() => onOpenCodex(task)}
+              size="compact-sm"
+              variant="default"
+            >
+              Open chat
+            </Button>
+          </Group>
+      </Stack>
+    </Paper>
+  );
+}

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

@@ -0,0 +1,62 @@
+import { MantineProvider } from "@mantine/core";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, expect, test, vi } from "vitest";
+import { ManualTransitionConfirmation, type TerminalStatus } from "./TaskDetail";
+
+afterEach(cleanup);
+
+test("clears a manual-transition confirmation only after success", async () => {
+  const onTransition = vi.fn().mockResolvedValue({ ok: true });
+  render(<ConfirmationHarness onTransition={onTransition} />);
+  expect(screen.getByRole("alert")).toHaveTextContent("Mark task completed?");
+  fireEvent.click(screen.getByRole("button", { name: "Confirm" }));
+
+  await waitFor(() => expect(onTransition).toHaveBeenCalledWith("completed", expect.any(String)));
+  await waitFor(() => expect(screen.queryByRole("alert")).not.toBeInTheDocument());
+  await waitFor(() => expect(screen.getByRole("heading", { name: "Task title" })).toHaveFocus());
+});
+
+test("retains a manual-transition confirmation after failure", async () => {
+  const onTransition = vi.fn().mockResolvedValue({ ok: false });
+  render(<ConfirmationHarness onTransition={onTransition} />);
+  fireEvent.click(screen.getByRole("button", { name: "Confirm" }));
+
+  await waitFor(() => expect(onTransition).toHaveBeenCalledWith("completed", expect.any(String)));
+  expect(screen.getByRole("alert")).toHaveTextContent("Mark task completed?");
+});
+
+test("reuses an action ID for retryable failures and rotates it after a stale task", async () => {
+  const onTransition = vi.fn()
+    .mockResolvedValueOnce({ ok: false })
+    .mockResolvedValueOnce({ ok: false, rotateActionId: true })
+    .mockResolvedValueOnce({ ok: false });
+  render(<ConfirmationHarness onTransition={onTransition} />);
+  const confirm = screen.getByRole("button", { name: "Confirm" });
+  fireEvent.click(confirm);
+  await waitFor(() => expect(onTransition).toHaveBeenCalledTimes(1));
+  const firstActionId = onTransition.mock.calls[0][1];
+  fireEvent.click(confirm);
+  await waitFor(() => expect(onTransition).toHaveBeenCalledTimes(2));
+  expect(onTransition.mock.calls[1][1]).toBe(firstActionId);
+  fireEvent.click(confirm);
+  await waitFor(() => expect(onTransition).toHaveBeenCalledTimes(3));
+  expect(onTransition.mock.calls[2][1]).not.toBe(firstActionId);
+});
+
+function ConfirmationHarness({ onTransition }: { onTransition: (status: TerminalStatus, actionId: string) => Promise<{ ok: boolean; rotateActionId?: boolean }> }) {
+  const [opened, setOpened] = useState(true);
+  return (
+    <MantineProvider>
+      <h2 id="task-detail-title" tabIndex={-1}>Task title</h2>
+      {opened && (
+        <ManualTransitionConfirmation
+          busy={false}
+          onCancel={() => setOpened(false)}
+          onTransition={onTransition}
+          status="completed"
+        />
+      )}
+    </MantineProvider>
+  );
+}