taskchef 7.25.1 → 7.25.2

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

@@ -0,0 +1,90 @@
+import { act, cleanup, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import { DashboardApp } from "./App";
+import { fixtureTask } from "./fixtures";
+import type { DashboardSnapshot } from "./types";
+
+const apiMocks = vi.hoisted(() => ({
+  connectDashboard: vi.fn(),
+  dashboardVersion: vi.fn(),
+  manualTransition: vi.fn(),
+  openInCodex: vi.fn(),
+  taskDetail: vi.fn(),
+}));
+
+vi.mock("./api", () => apiMocks);
+vi.mock("./components/NotificationCenter", () => ({ NotificationCenter: () => null }));
+vi.mock("./components/TaskCard", () => ({ TaskCard: () => null }));
+vi.mock("./components/TaskDetail", () => ({ TaskDetail: () => null }));
+
+afterEach(cleanup);
+beforeEach(() => {
+  vi.clearAllMocks();
+  apiMocks.dashboardVersion.mockResolvedValue("7.25.1");
+});
+
+test("places the filtered task count below the toolbar and updates it from live snapshots", () => {
+  const recent = new Date().toISOString();
+  const tasks = [
+    fixtureTask({
+      id: "11111111-1111-4111-8111-111111111111",
+      project: { name: "Another project", path: "/tmp/another", githubRepos: [] },
+      status: "completed",
+      meaningfulUpdatedAt: recent,
+      updatedAt: recent,
+    }),
+    fixtureTask({
+      id: "22222222-2222-4222-8222-222222222222",
+      project: { name: "Another project", path: "/tmp/another", githubRepos: [] },
+      meaningfulUpdatedAt: recent,
+      updatedAt: recent,
+    }),
+    fixtureTask({
+      id: "33333333-3333-4333-8333-333333333333",
+      status: "completed",
+    }),
+  ];
+  let onSnapshot: ((snapshot: DashboardSnapshot) => void) | undefined;
+  apiMocks.connectDashboard.mockImplementation((handlers) => {
+    onSnapshot = handlers.onSnapshot;
+    return { close: vi.fn() };
+  });
+
+  render(
+    <DashboardApp
+      initialFilters={{ date: "24h", project: "Another project", status: "completed" }}
+      initialTasks={tasks}
+    />,
+  );
+  const projectFilter = screen.getByRole("combobox", { name: "Project" });
+  const dateFilter = screen.getByRole("combobox", { name: "Updated" });
+  const toolbar = document.querySelector<HTMLElement>(".taskchef-toolbar");
+  const summary = document.querySelector<HTMLElement>(".taskchef-results-summary");
+  const taskList = screen.getByRole("region", { name: "Tasks" });
+
+  expect(projectFilter).toHaveValue("Another project");
+  expect(dateFilter).toHaveValue("Latest 24 hours");
+  expect(screen.getByRole("radio", { name: /Completed/ })).toBeChecked();
+  expect(summary).toHaveTextContent("Tasks: 1 of 3");
+  expect(toolbar).not.toContainElement(summary);
+  expect(toolbar?.nextElementSibling).toBe(summary);
+  expect(taskList).toHaveAttribute("aria-describedby", summary?.id);
+
+  act(() => {
+    onSnapshot?.({
+      tasks: [
+        tasks[0],
+        fixtureTask({
+          id: "44444444-4444-4444-8444-444444444444",
+          project: { name: "Another project", path: "/tmp/another", githubRepos: [] },
+          status: "completed",
+          meaningfulUpdatedAt: recent,
+          updatedAt: recent,
+        }),
+      ],
+    });
+  });
+
+  expect(summary).toHaveTextContent("Tasks: 2 of 2");
+  expect(summary).toHaveAttribute("aria-live", "polite");
+}, 60_000);

package/src/dashboard/react/App.tsx

@@ -77,20 +77,36 @@ interface NotificationState {
   signatures: Map<string, string>;
 }
 
+export function TaskResultsSummary({
+  totalCount,
+  visibleCount,
+}: {
+  totalCount: number;
+  visibleCount: number;
+}) {
+  return (
+    <Text aria-live="polite" className="taskchef-results-summary" id="task-results-summary">
+      Tasks: {visibleCount} of {totalCount}
+    </Text>
+  );
+}
+
 export function DashboardApp({
   connect = true,
+  initialFilters = {},
   initialTasks = [],
 }: {
   connect?: boolean;
+  initialFilters?: { date?: string; project?: string; status?: string };
   initialTasks?: Task[];
 }) {
   const [tasks, setTasks] = useState<Task[]>(initialTasks);
   const [connected, setConnected] = useState(false);
   const [message, setMessage] = useState<string | null>(null);
   const [version, setVersion] = useState<string | null>(null);
-  const [project, setProject] = useState("");
-  const [status, setStatus] = useState("");
-  const [date, setDate] = useState("all");
+  const [project, setProject] = useState(initialFilters.project ?? "");
+  const [status, setStatus] = useState(initialFilters.status ?? "");
+  const [date, setDate] = useState(initialFilters.date ?? "all");
   const [now, setNow] = useState(() => Date.now());
   const [selectedTask, setSelectedTask] = useState<Task | null>(null);
   const [detailOpened, setDetailOpened] = useState(false);
@@ -310,10 +326,6 @@ export function DashboardApp({
                     size="sm"
                     value={date}
                   />
-                  <Box className="taskchef-task-count-field">
-                    <Text className="taskchef-filter-label" mb={3}>Tasks</Text>
-                    <Text className="taskchef-count-value" size="sm">{visible.length} of {tasks.length}</Text>
-                  </Box>
                 </Group>
                 <Box>
                   <Text className="taskchef-filter-label" mb={5}>Status</Text>
@@ -322,6 +334,8 @@ export function DashboardApp({
               </Stack>
             </Paper>
 
+            <TaskResultsSummary totalCount={tasks.length} visibleCount={visible.length} />
+
             {message && (
               <Alert color="yellow" icon={<IconAlertTriangle aria-hidden size={17} />} mt="md" role="status">
                 <Group gap="sm" justify="space-between" wrap="nowrap">
@@ -331,7 +345,7 @@ export function DashboardApp({
               </Alert>
             )}
 
-            <Stack aria-label="Tasks" component="section" gap="sm" mt="md">
+            <Stack aria-describedby="task-results-summary" aria-label="Tasks" component="section" gap="sm" mt="xs">
               {visible.map((task: Task) => (
                 <TaskCard key={task.id} onOpenCodex={handleOpenCodex} onOpenDetail={(value) => void loadDetail(value)} task={task} />
               ))}

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

@@ -0,0 +1,22 @@
+import { MantineProvider } from "@mantine/core";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, expect, test, vi } from "vitest";
+import { OpenChatButton } from "./OpenChatButton";
+
+afterEach(cleanup);
+
+test("uses the shared open-chat presentation and accessible task label", () => {
+  const onClick = vi.fn();
+  render(
+    <MantineProvider>
+      <OpenChatButton onClick={onClick} taskTitle="Review checkout reconciliation" />
+    </MantineProvider>,
+  );
+
+  const button = screen.getByRole("button", { name: "Open chat for Review checkout reconciliation" });
+  expect(button).toHaveTextContent("Open chat");
+  expect(button).toHaveAttribute("data-variant", "default");
+  expect(button.querySelector("svg")).toHaveAttribute("aria-hidden", "true");
+  fireEvent.click(button);
+  expect(onClick).toHaveBeenCalledOnce();
+});

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

@@ -0,0 +1,25 @@
+import { Button } from "@mantine/core";
+import { IconExternalLink } from "@tabler/icons-react";
+
+export function OpenChatButton({
+  loading,
+  onClick,
+  taskTitle,
+}: {
+  loading?: boolean;
+  onClick: () => void;
+  taskTitle: string;
+}) {
+  return (
+    <Button
+      aria-label={`Open chat for ${taskTitle}`}
+      leftSection={<IconExternalLink aria-hidden size={15} />}
+      loading={loading}
+      onClick={onClick}
+      size="compact-sm"
+      variant="default"
+    >
+      Open chat
+    </Button>
+  );
+}

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

@@ -1,9 +1,9 @@
-import { Box, Button, Group, Paper, Stack, Text, Title } from "@mantine/core";
-import { IconExternalLink } from "@tabler/icons-react";
+import { Box, Group, Paper, Stack, Text, Title } from "@mantine/core";
 import { latestTurnPresentation } from "../../state.js";
 import type { Task } from "../types";
 import { GitHubLinks } from "./GitHubLinks";
 import { LinkedText } from "./LinkedText";
+import { OpenChatButton } from "./OpenChatButton";
 import { RelativeTime } from "./RelativeTime";
 import { ShimmerText } from "./ShimmerText";
 import { StatusBadge } from "./StatusBadge";
@@ -53,15 +53,7 @@ export function TaskCard({
           <GitHubLinks task={task} />
           <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}`}
-              leftSection={<IconExternalLink aria-hidden size={15} />}
-              onClick={() => onOpenCodex(task)}
-              size="compact-sm"
-              variant="default"
-            >
-              Open chat
-            </Button>
+            <OpenChatButton onClick={() => onOpenCodex(task)} taskTitle={task.title} />
           </Group>
       </Stack>
     </Paper>

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

@@ -19,13 +19,13 @@ 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 { OpenChatButton } from "./OpenChatButton";
 import { RelativeTime } from "./RelativeTime";
 import { StatusBadge } from "./StatusBadge";
 import { UsagePanel } from "./UsagePanel";
@@ -93,14 +93,7 @@ export function TaskDetail({
           <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>
+          <OpenChatButton loading={busy} onClick={onOpenCodex} taskTitle={task.title} />
           <Menu position="bottom-start" shadow="md" withinPortal zIndex={360}>
             <Menu.Target>
               <Tooltip label="More task actions">

package/src/dashboard/react/styles.css

@@ -28,8 +28,7 @@ body {
 .taskchef-toolbar .mantine-InputWrapper-root { flex: 1 1 190px; max-width: 240px; }
 .taskchef-toolbar .mantine-InputWrapper-label, .taskchef-filter-label { font-size: var(--mantine-font-size-sm); font-weight: 600; line-height: var(--mantine-line-height-sm); }
 .taskchef-toolbar .mantine-SegmentedControl-root { max-width: 650px; }
-.taskchef-task-count-field { align-self: flex-end; min-width: 90px; }
-.taskchef-count-value { display: flex; align-items: center; height: 36px; white-space: nowrap; }
+.taskchef-results-summary { margin-top: 12px; color: var(--taskchef-muted); font-size: var(--mantine-font-size-xs); line-height: 1.35; white-space: nowrap; }
 .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; }
@@ -117,7 +116,6 @@ body {
 @media (max-width: 48em) {
   .taskchef-toolbar .mantine-InputWrapper-root { max-width: none; }
   .taskchef-toolbar .mantine-Group-root { align-items: stretch; }
-  .taskchef-task-count-field { min-width: 76px; }
   .taskchef-toolbar .mantine-SegmentedControl-root { overflow-x: auto; }
   .taskchef-notifications { right: 16px; bottom: 16px; width: min(330px, calc(100vw - 32px)); }
   .taskchef-metadata { grid-template-columns: 1fr; }