taskchef 8.3.2 → 8.4.1

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

@@ -1,4 +1,4 @@
-import { act, cleanup, render, screen, within } from "@testing-library/react";
+import { act, cleanup, fireEvent, render, screen, within } from "@testing-library/react";
 import type { ElementType, ReactNode } from "react";
 import { afterEach, beforeEach, expect, test, vi } from "vitest";
 import { DashboardApp } from "./App";
@@ -16,6 +16,12 @@ const apiMocks = vi.hoisted(() => ({
 vi.mock("./api", () => apiMocks);
 vi.mock("./components/NotificationCenter", () => ({ NotificationCenter: () => null }));
 vi.mock("./components/TaskCard", () => ({ TaskCard: () => null }));
+vi.mock("./components/TaskBoard", () => ({ TaskBoard: ({ tasks, completedLimit, onMoreCompleted }: { tasks: ReturnType<typeof fixtureTask>[]; completedLimit: number; onMoreCompleted: () => void }) => (
+  <section aria-label="Task board" data-completed-limit={completedLimit}>
+    {tasks.map((task) => <span key={task.id}>{task.title}</span>)}
+    <button onClick={onMoreCompleted}>Show more</button>
+  </section>
+) }));
 vi.mock("./components/TaskDetail", () => ({ TaskDetail: () => null }));
 vi.mock("@tabler/icons-react", async () => {
   const { createElement } = await vi.importActual<typeof import("react")>("react");
@@ -135,10 +141,12 @@ vi.mock("@mantine/core", async () => {
 afterEach(cleanup);
 beforeEach(() => {
   vi.clearAllMocks();
+  window.localStorage.clear();
+  window.innerWidth = 1024;
   apiMocks.dashboardVersion.mockResolvedValue("7.25.1");
 });
 
-test("places the filtered task count below the toolbar and updates it from live snapshots", () => {
+test("places the filtered task count below the toolbar and updates it from live snapshots", async () => {
   const recent = new Date().toISOString();
   const tasks = [
     fixtureTask({
@@ -167,25 +175,31 @@ test("places the filtered task count below the toolbar and updates it from live
 
   render(
     <DashboardApp
-      initialFilters={{ date: "24h", project: "Another project", status: "completed" }}
+      initialFilters={{ project: "Another project", status: "completed" }}
       initialTasks={tasks}
     />,
   );
+  const header = screen.getByRole("banner");
+  const title = within(header).getByRole("heading", { level: 1 });
   const headerActions = document.querySelector<HTMLElement>(".taskchef-header-actions")!;
-  const headerIconRow = within(headerActions).getByRole("link", { name: "Settings" }).parentElement?.parentElement;
-  expect(headerActions.firstElementChild).toBe(within(headerActions).getByRole("status"));
-  expect(headerActions.lastElementChild).toHaveClass("taskchef-header-icon-row");
-  expect(headerIconRow).toBe(headerActions.lastElementChild);
+  expect(title).toHaveTextContent("TaskChef Dashboard");
+  expect(await within(title).findByText("v7.25.1")).toHaveClass("taskchef-version");
+  expect(header.querySelector(".taskchef-brand-icon")).toHaveAttribute("width", "28");
+  expect(headerActions.children[0]).toContainElement(within(headerActions).getByRole("link", { name: "Settings" }));
+  expect(headerActions.children[1]).toContainElement(within(headerActions).getByRole("button", { name: "Use dark theme" }));
+  expect(headerActions.lastElementChild).toBe(within(headerActions).getByRole("status"));
   expect(within(headerActions).getByRole("link", { name: "Settings" })).toHaveClass("taskchef-icon-button");
   expect(within(headerActions).getByRole("button", { name: "Use dark theme" })).toHaveClass("taskchef-icon-button");
   const projectFilter = screen.getByRole("combobox", { name: "Project" });
-  const dateFilter = screen.getByRole("combobox", { name: "Updated" });
+  const viewSwitch = screen.getByRole("radiogroup", { name: "View" });
   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("combobox", { name: "Updated" })).toHaveValue("All time");
+  expect(toolbar?.firstElementChild?.firstElementChild).toContainElement(viewSwitch);
+  expect(viewSwitch.compareDocumentPosition(projectFilter) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
   expect(screen.getByRole("radio", { name: /Completed/ })).toBeChecked();
   expect(summary).toHaveTextContent("Tasks: 1 of 3");
   expect(toolbar).not.toContainElement(summary);
@@ -210,3 +224,101 @@ test("places the filtered task count below the toolbar and updates it from live
   expect(summary).toHaveTextContent("Tasks: 2 of 2");
   expect(summary).toHaveAttribute("aria-live", "polite");
 }, 60_000);
+
+test("Board ignores the List status filter and restores it on return", () => {
+  window.innerWidth = 1280;
+  const tasks = [
+    fixtureTask({ id: "one", title: "Working task" }),
+    fixtureTask({ id: "two", title: "Completed task", status: "completed" }),
+  ];
+  render(<DashboardApp connect={false} initialFilters={{ status: "completed" }} initialTasks={tasks} />);
+  expect(screen.getByRole("radio", { name: /Completed/ })).toBeChecked();
+  fireEvent.click(screen.getByRole("radio", { name: "Board" }));
+  const toolbar = document.querySelector<HTMLElement>(".taskchef-toolbar");
+  expect(toolbar?.firstElementChild?.firstElementChild).toContainElement(screen.getByRole("radiogroup", { name: "View" }));
+  expect(screen.getByRole("radiogroup", { name: "View" }).compareDocumentPosition(screen.getByRole("combobox", { name: "Project" })) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  expect(screen.queryByRole("radiogroup", { name: "Status" })).not.toBeInTheDocument();
+  expect(screen.queryByText("Tasks: 1 of 2")).not.toBeInTheDocument();
+  expect(screen.getByRole("region", { name: "Task board" })).toHaveTextContent("Working task");
+  expect(screen.getByRole("region", { name: "Task board" })).toHaveTextContent("Completed task");
+  fireEvent.click(screen.getByRole("radio", { name: "List" }));
+  expect(screen.getByRole("radio", { name: /Completed/ })).toBeChecked();
+  expect(screen.getByText("Tasks: 1 of 2")).toBeInTheDocument();
+});
+
+test("Board preference and view switch remain available across screen widths", () => {
+  window.innerWidth = 1280;
+  const { unmount } = render(<DashboardApp connect={false} />);
+  fireEvent.click(screen.getByRole("radio", { name: "Board" }));
+  expect(window.localStorage.getItem("taskchef.dashboard.view")).toBe("board");
+  expect(screen.getByRole("region", { name: "Task board" })).toBeInTheDocument();
+  act(() => { window.innerWidth = 375; window.dispatchEvent(new Event("resize")); });
+  expect(screen.getByRole("radiogroup", { name: "View" })).toBeInTheDocument();
+  expect(screen.getByRole("region", { name: "Task board" })).toBeInTheDocument();
+  fireEvent.click(screen.getByRole("radio", { name: "List" }));
+  expect(screen.getByRole("region", { name: "Tasks" })).toBeInTheDocument();
+  fireEvent.click(screen.getByRole("radio", { name: "Board" }));
+  act(() => { window.innerWidth = 1200; window.dispatchEvent(new Event("resize")); });
+  expect(screen.getByRole("region", { name: "Task board" })).toBeInTheDocument();
+  unmount();
+  window.innerWidth = 375;
+  render(<DashboardApp connect={false} />);
+  expect(screen.getByRole("region", { name: "Task board" })).toBeInTheDocument();
+});
+
+test("storage failure keeps the selected view in memory", () => {
+  window.innerWidth = 1280;
+  const setItem = vi.spyOn(Storage.prototype, "setItem").mockImplementation(() => { throw new Error("blocked"); });
+  render(<DashboardApp connect={false} />);
+  fireEvent.click(screen.getByRole("radio", { name: "Board" }));
+  expect(screen.getByRole("region", { name: "Task board" })).toBeInTheDocument();
+  setItem.mockRestore();
+});
+
+test("completed expansion survives view changes and resets for project", () => {
+  window.innerWidth = 1280;
+  render(<DashboardApp connect={false} initialTasks={[fixtureTask({ project: { name: "Project A", path: "/tmp/a", githubRepos: [] } })]} />);
+  fireEvent.click(screen.getByRole("radio", { name: "Board" }));
+  const board = screen.getByRole("region", { name: "Task board" });
+  fireEvent.click(screen.getByRole("button", { name: "Show more" }));
+  expect(board).toHaveAttribute("data-completed-limit", "10");
+  fireEvent.click(screen.getByRole("radio", { name: "List" }));
+  fireEvent.click(screen.getByRole("radio", { name: "Board" }));
+  expect(screen.getByRole("region", { name: "Task board" })).toHaveAttribute("data-completed-limit", "10");
+  fireEvent.change(screen.getByRole("combobox", { name: "Project" }), { target: { value: "Project A" } });
+  expect(screen.getByRole("region", { name: "Task board" })).toHaveAttribute("data-completed-limit", "5");
+});
+
+test("Updated filters both views and List counts, and resets completed expansion", () => {
+  const recent = new Date().toISOString();
+  const tasks = [
+    fixtureTask({ id: "recent", title: "Recent task", status: "completed", updatedAt: recent, meaningfulUpdatedAt: recent }),
+    fixtureTask({ id: "old", title: "Older task", status: "completed", updatedAt: "2020-01-01T00:00:00.000Z", meaningfulUpdatedAt: "2020-01-01T00:00:00.000Z" }),
+  ];
+  render(<DashboardApp connect={false} initialTasks={tasks} />);
+  const updated = screen.getByRole("combobox", { name: "Updated" });
+  expect(updated).toHaveValue("All time");
+  expect(screen.getByText("Tasks: 2 of 2")).toBeInTheDocument();
+  fireEvent.change(updated, { target: { value: "Latest 24 hours" } });
+  expect(screen.getByText("Tasks: 1 of 2")).toBeInTheDocument();
+  expect(screen.getByRole("radio", { name: "Completed 1" })).toBeInTheDocument();
+  fireEvent.click(screen.getByRole("radio", { name: "Board" }));
+  expect(screen.getByRole("region", { name: "Task board" })).toHaveTextContent("Recent task");
+  expect(screen.getByRole("region", { name: "Task board" })).not.toHaveTextContent("Older task");
+  fireEvent.click(screen.getByRole("button", { name: "Show more" }));
+  expect(screen.getByRole("region", { name: "Task board" })).toHaveAttribute("data-completed-limit", "10");
+  fireEvent.change(updated, { target: { value: "Latest 7 days" } });
+  expect(screen.getByRole("region", { name: "Task board" })).toHaveAttribute("data-completed-limit", "5");
+  fireEvent.change(updated, { target: { value: "All time" } });
+  expect(screen.getByRole("region", { name: "Task board" })).toHaveTextContent("Older task");
+  fireEvent.click(screen.getByRole("radio", { name: "List" }));
+  expect(screen.getByText("Tasks: 2 of 2")).toBeInTheDocument();
+});
+
+test("old tasks remain available in List and Board", () => {
+  const oldTask = fixtureTask({ id: "old", title: "Older task", updatedAt: "2020-01-01T00:00:00.000Z", meaningfulUpdatedAt: "2020-01-01T00:00:00.000Z" });
+  render(<DashboardApp connect={false} initialTasks={[oldTask]} />);
+  expect(screen.getByText("Tasks: 1 of 1")).toBeInTheDocument();
+  fireEvent.click(screen.getByRole("radio", { name: "Board" }));
+  expect(screen.getByRole("region", { name: "Task board" })).toHaveTextContent("Older task");
+});

package/src/dashboard/react/App.tsx

@@ -42,6 +42,7 @@ import { usageStillCalculating } from "./presentation";
 import type { DashboardSnapshot, NotificationSnapshot, Task } from "./types";
 import { NotificationCenter } from "./components/NotificationCenter";
 import { TaskCard } from "./components/TaskCard";
+import { TaskBoard } from "./components/TaskBoard";
 import { TaskDetail } from "./components/TaskDetail";
 import { RelativeTimeProvider } from "./components/RelativeTime";
 
@@ -70,6 +71,12 @@ const theme = createTheme({
   },
 });
 const styleNonce = document.querySelector<HTMLMetaElement>('meta[name="taskchef-style-nonce"]')?.content;
+const VIEW_STORAGE_KEY = "taskchef.dashboard.view";
+
+function savedView(): "board" | "list" {
+  try { return window.localStorage.getItem(VIEW_STORAGE_KEY) === "board" ? "board" : "list"; }
+  catch { return "list"; }
+}
 
 interface NotificationState {
   initialized: boolean;
@@ -99,7 +106,7 @@ export function DashboardApp({
   initialTasks = [],
 }: {
   connect?: boolean;
-  initialFilters?: { date?: string; project?: string; status?: string };
+  initialFilters?: { project?: string; status?: string };
   initialTasks?: Task[];
 }) {
   const [settings, setSettings] = useState(() => window.location.hash === '#settings');
@@ -115,7 +122,9 @@ export function DashboardApp({
   const [version, setVersion] = useState<string | null>(null);
   const [project, setProject] = useState(initialFilters.project ?? "");
   const [status, setStatus] = useState(initialFilters.status ?? "");
-  const [date, setDate] = useState(initialFilters.date ?? "all");
+  const [date, setDate] = useState("all");
+  const [preferredView, setPreferredView] = useState(savedView);
+  const [completedLimit, setCompletedLimit] = useState(5);
   const [now, setNow] = useState(() => Date.now());
   const [selectedTask, setSelectedTask] = useState<Task | null>(null);
   const [detailOpened, setDetailOpened] = useState(false);
@@ -227,12 +236,20 @@ export function DashboardApp({
     ...[...new Set(tasks.map((task) => task.project.name))].sort().map((value) => ({ label: value, value })),
   ], [tasks]);
   const visible = useMemo(() => filterTasks(tasks, { project, status, date, now }), [tasks, project, status, date, now]);
+  const boardTasks = useMemo(() => filterTasks(tasks, { project, date, now }), [tasks, project, date, now]);
+  const board = preferredView === "board";
   const counts = useMemo(() => statusFilterCounts(tasks, { project, date, now }), [tasks, project, date, now]);
   const statusData = STATUS_FILTERS.map(({ label, value }: { label: string; value: string }) => ({
     label: counts[value] > 0 ? `${label} ${counts[value]}` : label,
     value,
   }));
 
+  function changeView(value: string) {
+    if (value !== "board" && value !== "list") return;
+    setPreferredView(value);
+    try { window.localStorage.setItem(VIEW_STORAGE_KEY, value); } catch { /* Preference remains in memory. */ }
+  }
+
   async function handleOpenCodex(task: Task) {
     setDetailBusy(true);
     try {
@@ -303,30 +320,30 @@ export function DashboardApp({
     >
       <RelativeTimeProvider now={now}>
       <AppShell className="taskchef-shell" padding={0}>
-        <Container className="taskchef-header" component="header" size={1080}>
-          <Group className="taskchef-header-layout" align="stretch" justify="space-between" wrap="nowrap">
-            <Box className="taskchef-header-copy">
-              <Text c="var(--taskchef-accent)" fw={750} size="xs" tt="uppercase">TaskChef {version && <span className="taskchef-version">v{version}</span>}</Text>
-              <Group gap="sm" mt={5} wrap="nowrap">
+        <Box className="taskchef-header-shell" component="header">
+          <Container className={`taskchef-header${board ? " taskchef-header-board" : ""}`} size="100%">
+            <Group className="taskchef-header-layout" justify="space-between" wrap="nowrap">
+              <Group className="taskchef-header-copy" gap="xs" wrap="nowrap">
                 <BrandIcon />
-                <Title order={1} size="h2">Dashboard</Title>
+                <Title className="taskchef-brand-title" order={1}>
+                  <span>TaskChef Dashboard</span>
+                  {version && <span className="taskchef-version">v{version}</span>}
+                </Title>
               </Group>
-            </Box>
-            <Stack align="flex-end" className="taskchef-header-actions" gap={0} justify="space-between">
-              <Group aria-live="polite" className="taskchef-connection" gap={7} role="status" wrap="nowrap">
-                <IconCircleFilled aria-hidden color={connected ? "var(--mantine-color-teal-6)" : "var(--mantine-color-yellow-6)"} size={9} />
-                <Text c="dimmed" size="xs">{connected ? "Live" : connect ? "Connecting…" : "Fixture preview"}</Text>
-              </Group>
-              <Group className="taskchef-header-icon-row" gap={2} justify="flex-end" wrap="nowrap">
+              <Group className="taskchef-header-actions" gap={2} justify="flex-end" wrap="nowrap">
                 <Tooltip label="Settings"><ActionIcon className="taskchef-icon-button" component="a" href="#settings" aria-label="Settings" aria-current={settings ? 'page' : undefined} variant="subtle" color="gray" size="lg"><IconSettings size={18} stroke={1.8} /></ActionIcon></Tooltip>
                 <ThemeToggle />
+                <Group aria-live="polite" className="taskchef-connection" gap={7} role="status" wrap="nowrap">
+                  <IconCircleFilled aria-hidden color={connected ? "var(--mantine-color-teal-6)" : "var(--mantine-color-yellow-6)"} size={9} />
+                  <Text c="dimmed" size="xs">{connected ? "Live" : connect ? "Connecting…" : "Fixture preview"}</Text>
+                </Group>
               </Group>
-            </Stack>
-          </Group>
-        </Container>
+            </Group>
+          </Container>
+        </Box>
 
         <AppShell.Main>
-          <Container className="taskchef-main" pb={80} size={1080}>
+          <Container className={`taskchef-main${board ? " taskchef-main-board" : ""}`} pb={80} size="100%">
             {projectIndex?.status === "unavailable" && (
               <Alert color="yellow" icon={<IconAlertTriangle size={18} />} mb="md" title="Project index unavailable">
                 Task history is still visible. Verify the index and inspect backups before making project changes.
@@ -342,27 +359,22 @@ export function DashboardApp({
               </Alert>
             )}
             {settings ? <Stack gap="md"><Button component="a" href="#" variant="subtle" size="sm" leftSection={<IconArrowLeft size={16} />} style={{ alignSelf: 'flex-start' }}>Back to tasks</Button><ModelSettings /></Stack> : <>
-            <Paper className="taskchef-toolbar" p="sm" radius="md" withBorder>
+            <Paper className="taskchef-toolbar" radius={0}>
               <Stack gap="sm">
-                <Group align="end" gap="sm">
-                  <Select aria-label="Project" data={projects} label="Project" onChange={(value) => setProject(value ?? "")} size="sm" value={project} />
-                  <Select
-                    aria-label="Updated"
-                    data={[{ label: "Latest 24 hours", value: "24h" }, { label: "Latest 7 days", value: "7d" }, { label: "All time", value: "all" }]}
-                    label="Updated"
-                    onChange={(value) => setDate(value ?? "all")}
-                    size="sm"
-                    value={date}
-                  />
+                <Group className="taskchef-toolbar-view">
+                  <SegmentedControl aria-label="View" data={[{ label: "Board", value: "board" }, { label: "List", value: "list" }]} onChange={changeView} size="xs" value={preferredView} withItemsBorders={false} />
+                </Group>
+                <Group className="taskchef-toolbar-filters" gap="sm" wrap="nowrap">
+                  <Select aria-label="Project" data={projects} onChange={(value) => { setProject(value ?? ""); setCompletedLimit(5); }} size="xs" value={project} />
+                  <Select aria-label="Updated" data={[{ label: "Latest 24 hours", value: "24h" }, { label: "Latest 7 days", value: "7d" }, { label: "All time", value: "all" }]} onChange={(value) => { setDate(value ?? "all"); setCompletedLimit(5); }} size="xs" value={date} />
                 </Group>
-                <Box>
-                  <Text className="taskchef-filter-label" mb={5}>Status</Text>
-                  <SegmentedControl aria-label="Status" data={statusData} fullWidth onChange={setStatus} size="xs" value={status} />
-                </Box>
+                {!board && <Box className="taskchef-toolbar-status">
+                  <SegmentedControl aria-label="Status" data={statusData} onChange={setStatus} size="xs" value={status} withItemsBorders={false} />
+                </Box>}
               </Stack>
             </Paper>
 
-            <TaskResultsSummary totalCount={tasks.length} visibleCount={visible.length} />
+            {!board && <TaskResultsSummary totalCount={tasks.length} visibleCount={visible.length} />}
 
             {message && (
               <Alert color="yellow" icon={<IconAlertTriangle aria-hidden size={17} />} mt="md" role="status">
@@ -373,17 +385,23 @@ export function DashboardApp({
               </Alert>
             )}
 
-            <Stack aria-describedby="task-results-summary" aria-label="Tasks" component="section" gap="sm" mt="xs">
+            {board ? <TaskBoard
+              completedLimit={completedLimit}
+              onMoreCompleted={() => setCompletedLimit((limit) => limit + 5)}
+              onOpenCodex={handleOpenCodex}
+              onOpenDetail={(value) => void loadDetail(value)}
+              tasks={boardTasks}
+            /> : <Stack aria-describedby="task-results-summary" aria-label="Tasks" className="taskchef-list" component="section" gap="sm" mt="xs">
               {visible.map((task: Task) => (
                 <TaskCard key={task.id} onOpenCodex={handleOpenCodex} onOpenDetail={(value) => void loadDetail(value)} task={task} />
               ))}
               {visible.length === 0 && (
                 <Paper className="taskchef-empty" p={48} ta="center" withBorder>
                   <Title order={2} size="h4">No tasks match these filters</Title>
-                  <Text c="dimmed" mt={4} size="sm">Choose a different project, date, or status.</Text>
+                  <Text c="dimmed" mt={4} size="sm">Choose a different project, update window, or status.</Text>
                 </Paper>
               )}
-            </Stack>
+            </Stack>}
             </>}
           </Container>
         </AppShell.Main>
@@ -485,9 +503,9 @@ function BrandIcon() {
       alt=""
       aria-hidden
       className="taskchef-brand-icon"
-      height="42"
+      height="28"
       src={colorScheme === "dark" ? "/assets/taskchef-dark.svg" : "/assets/taskchef.svg"}
-      width="42"
+      width="28"
     />
   );
 }

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

@@ -59,7 +59,6 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
                   <RelativeTime
                     icon={<IconHistory aria-hidden size={14} />}
                     label="Turn update time"
-                    tooltipLabel="Updated at"
                     value={presentation.updatedAt}
                   />
                 </StatCell>

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

@@ -19,18 +19,19 @@ vi.mock('@mantine/core', async () => {
 
 afterEach(() => { cleanup(); vi.unstubAllGlobals(); vi.clearAllMocks(); });
 
-test('shows the version reported by the active usage provider', async () => {
+test('shows the ccusage version pinned by TaskChef without an availability status', async () => {
   vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
     ok: true,
     json: async () => ({
       profiles: [],
-      usageProvider: { provider: 'ccusage', status: 'available', version: '20.0.21' },
+      usageProvider: { provider: 'ccusage', version: '20.0.21' },
     }),
   }));
   render(<MantineProvider><ModelSettings /></MantineProvider>);
   expect(await screen.findByText('ccusage 20.0.21')).toBeInTheDocument();
   expect(screen.getByText('Usage provider')).toBeInTheDocument();
-  expect(screen.getByText(/Version reported by the executable/)).toBeInTheDocument();
+  expect(screen.getByText(/Version pinned by TaskChef/)).toBeInTheDocument();
+  expect(screen.queryByText('available')).not.toBeInTheDocument();
 });
 
 test('refresh shows configuration failures and does not label them honored', async () => {

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

@@ -8,7 +8,7 @@ const effortLabels: Record<string, string> = { low: 'Light', medium: 'Medium', h
 type ModelOption = { value: string; label: string; efforts: string[] };
 type Role = { role: string; source: string | null; displaySource?: string | null; model: unknown; effort: unknown; status: string; problems: string[] };
 type Profile = { id: string; roles: Role[]; problems: string[]; modelOptions?: ModelOption[] };
-type UsageProvider = { provider: string; status: 'available' | 'unavailable'; version: string | null };
+type UsageProvider = { provider: string; version: string | null };
 
 export function ModelSettings() {
   const [profiles, setProfiles] = useState<Profile[]>([]);
@@ -97,12 +97,9 @@ export function ModelSettings() {
     </>}
     {usageProvider && <Paper withBorder p="md">
       <Stack gap="xs">
-        <Group justify="space-between">
-          <Title order={3} size="h4">Usage provider</Title>
-          <Badge color={usageProvider.status === 'available' ? 'teal' : 'red'}>{usageProvider.status}</Badge>
-        </Group>
+        <Title order={3} size="h4">Usage provider</Title>
         <Text>{usageProvider.provider}{usageProvider.version ? ` ${usageProvider.version}` : ' version unavailable'}</Text>
-        <Text c="dimmed" size="sm">Version reported by the executable TaskChef uses for token and cost estimates.</Text>
+        <Text c="dimmed" size="sm">Version pinned by TaskChef for token and cost estimates.</Text>
       </Stack>
     </Paper>}
   </Stack>;

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

@@ -1,7 +1,7 @@
 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 { formatExactTime, formatRelativeTime } from "../../time.js";
 import type { NotificationSnapshot, Task } from "../types";
 import { StatusBadge } from "./StatusBadge";
 
@@ -65,7 +65,7 @@ export function NotificationCenter({
                       <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"}
+                        <Tooltip label={formatExactTime(notification.timestamp)}><span>{formatRelativeTime(notification.timestamp)}</span></Tooltip>{available ? "" : " · Task no longer available"}
                       </Text>
                     </button>
                     <Tooltip label="Dismiss notification">

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

@@ -15,6 +15,7 @@ test("uses the shared open-chat presentation and accessible task label", () => {
 
   const button = screen.getByRole("button", { name: "Open chat for Review checkout reconciliation" });
   expect(button).toHaveTextContent("Open chat");
+  expect(button).toHaveClass("taskchef-open-chat");
   expect(button).toHaveAttribute("data-variant", "default");
   expect(button.querySelector("svg")).toHaveAttribute("aria-hidden", "true");
   fireEvent.click(button);

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

@@ -1,5 +1,5 @@
 import { Button } from "@mantine/core";
-import { IconExternalLink } from "@tabler/icons-react";
+import { IconArrowUpRight } from "@tabler/icons-react";
 
 export function OpenChatButton({
   loading,
@@ -13,7 +13,8 @@ export function OpenChatButton({
   return (
     <Button
       aria-label={`Open chat for ${taskTitle}`}
-      leftSection={<IconExternalLink aria-hidden size={15} />}
+      className="taskchef-open-chat"
+      leftSection={<IconArrowUpRight aria-hidden size={15} stroke={1.6} />}
       loading={loading}
       onClick={onClick}
       size="compact-sm"

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

@@ -12,12 +12,10 @@ export function RelativeTimeProvider({ children, now }: { children: ReactNode; n
 export function RelativeTime({
   icon,
   label,
-  tooltipLabel,
   value,
 }: {
   icon?: ReactNode;
   label: string;
-  tooltipLabel?: string;
   value: string | null | undefined;
 }) {
   const [exact, setExact] = useState(false);
@@ -25,13 +23,9 @@ export function RelativeTime({
   const text = exact ? formatExactTime(value) : formatRelativeTime(value);
   const exactText = formatExactTime(value);
   const unavailable = exactText === "—";
-  const tooltip = exactText === "—"
-    ? "Updated time unavailable"
-    : exact
-      ? "Show relative time"
-      : `Exact time: ${exactText}. Show exact time`;
+  const tooltip = unavailable ? "Updated time unavailable" : exact ? formatRelativeTime(value) : exactText;
   return (
-    <Tooltip events={{ focus: true, hover: true, touch: false }} label={tooltipLabel ?? tooltip}>
+    <Tooltip events={{ focus: true, hover: true, touch: false }} label={tooltip}>
       <UnstyledButton
         aria-label={unavailable
           ? `${label}: unavailable.`

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

@@ -0,0 +1,122 @@
+import { MantineProvider } from "@mantine/core";
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import { afterEach, expect, test, vi } from "vitest";
+import { fixtureTask } from "../fixtures";
+import { TaskBoard } from "./TaskBoard";
+
+afterEach(cleanup);
+
+function task(id: number, status: ReturnType<typeof fixtureTask>["status"], title = `Task ${id}`) {
+  return fixtureTask({
+    id: `11111111-1111-4111-8111-${String(id).padStart(12, "0")}`,
+    title,
+    status,
+  });
+}
+
+function pointer(target: Element, type: string, pointerType: string, clientX: number, pointerId = 1) {
+  const event = new MouseEvent(type, { bubbles: true, button: 0, clientX });
+  Object.assign(event, { pointerType, pointerId, isPrimary: true });
+  fireEvent(target, event);
+}
+
+test("groups by task status, counts all completed tasks, and reveals five more", () => {
+  const tasks = [task(1, "working"), task(2, "needs_input"), ...Array.from({ length: 11 }, (_, index) => task(index + 3, "completed")), task(20, "failed"), task(21, null)];
+  const more = vi.fn();
+  const { rerender } = render(<MantineProvider><TaskBoard tasks={tasks} completedLimit={5} onMoreCompleted={more} onOpenCodex={vi.fn()} onOpenDetail={vi.fn()} /></MantineProvider>);
+  expect(screen.getByRole("region", { name: "Task board" })).toHaveAttribute("tabindex", "0");
+  expect(screen.getByRole("region", { name: "Working, 1 tasks" })).toBeInTheDocument();
+  expect(screen.getByRole("region", { name: "Needs input, 1 tasks" })).toBeInTheDocument();
+  const completed = screen.getByRole("region", { name: "Completed, 11 tasks" });
+  expect(within(completed).getAllByRole("article")).toHaveLength(5);
+  fireEvent.click(within(completed).getByRole("button", { name: "Show 5 more · 5 of 11" }));
+  expect(more).toHaveBeenCalledOnce();
+  rerender(<MantineProvider><TaskBoard tasks={tasks} completedLimit={10} onMoreCompleted={more} onOpenCodex={vi.fn()} onOpenDetail={vi.fn()} /></MantineProvider>);
+  expect(within(screen.getByRole("region", { name: "Completed, 11 tasks" })).getAllByRole("article")).toHaveLength(10);
+  expect(screen.getByRole("region", { name: "Failed, 1 tasks" })).toBeInTheDocument();
+  expect(screen.getByRole("region", { name: "Unresolved, 1 tasks" })).toBeInTheDocument();
+});
+
+test("uses current request for working and latest historical result for finished tasks", () => {
+  const working = task(1, "working", "Working task");
+  const completed = task(2, "completed", "Finished task");
+  completed.latestTurn = { ...completed.latestTurn!, requestSummary: "New request", result: { status: "completed", summary: "Latest reported result", updatedAt: completed.updatedAt } };
+  completed.lastResult = { status: "completed", summary: "Old reported result", updatedAt: completed.updatedAt };
+  const onOpenDetail = vi.fn();
+  const onOpenCodex = vi.fn();
+  render(<MantineProvider><TaskBoard tasks={[working, completed]} completedLimit={5} onMoreCompleted={vi.fn()} onOpenCodex={onOpenCodex} onOpenDetail={onOpenDetail} /></MantineProvider>);
+  const workingLane = screen.getByRole("region", { name: "Working, 1 tasks" });
+  expect(workingLane).toHaveTextContent("Review the operator-facing task state.");
+  expect(workingLane).not.toHaveTextContent("In progress");
+  const completedLane = screen.getByRole("region", { name: "Completed, 1 tasks" });
+  expect(completedLane).toHaveTextContent("Latest reported result");
+  expect(completedLane).not.toHaveTextContent("Old reported result");
+  const completedCard = within(completedLane).getByRole("article");
+  expect(completedCard.firstElementChild).toHaveClass("taskchef-board-title");
+  expect(completedCard.children[1]).toHaveClass("taskchef-board-project");
+  fireEvent.click(within(completedLane).getByRole("button", { name: "Finished task" }));
+  expect(onOpenDetail).toHaveBeenCalledWith(completed);
+  fireEvent.click(within(completedLane).getByRole("button", { name: "Open chat for Finished task" }));
+  expect(onOpenCodex).toHaveBeenCalledWith(completed);
+});
+
+test("unlinked working tasks show pending text without a chat action", () => {
+  const working = task(1, "working");
+  working.threadId = null;
+  const failed = task(2, "failed");
+  failed.threadId = "invalid";
+  render(<MantineProvider><TaskBoard tasks={[working, failed]} completedLimit={5} onMoreCompleted={vi.fn()} onOpenCodex={vi.fn()} onOpenDetail={vi.fn()} /></MantineProvider>);
+  expect(screen.getByRole("region", { name: "Working, 1 tasks" })).toHaveTextContent("Chat link pending");
+  expect(screen.queryByRole("button", { name: /Open chat/ })).not.toBeInTheDocument();
+  expect(screen.getByRole("region", { name: "Failed, 1 tasks" })).not.toHaveTextContent("Chat link pending");
+});
+
+test("unexpected status appears in Unresolved instead of disappearing", () => {
+  const unexpected = task(1, "working");
+  unexpected.status = "paused" as typeof unexpected.status;
+  render(<MantineProvider><TaskBoard tasks={[unexpected]} completedLimit={5} onMoreCompleted={vi.fn()} onOpenCodex={vi.fn()} onOpenDetail={vi.fn()} /></MantineProvider>);
+  expect(within(screen.getByRole("region", { name: "Unresolved, 1 tasks" })).getByRole("article")).toBeInTheDocument();
+});
+
+test("mouse drag pans from empty lane space without activating a card", () => {
+  const onOpenDetail = vi.fn();
+  render(<MantineProvider><TaskBoard tasks={[task(1, "working")]} completedLimit={5} onMoreCompleted={vi.fn()} onOpenCodex={vi.fn()} onOpenDetail={onOpenDetail} /></MantineProvider>);
+  const board = screen.getByRole("region", { name: "Task board" });
+  const lane = screen.getByRole("region", { name: "Working, 1 tasks" });
+  Object.defineProperties(board, { scrollWidth: { value: 1700 }, clientWidth: { value: 700 } });
+  const capture = vi.fn();
+  const release = vi.fn();
+  board.setPointerCapture = capture;
+  board.hasPointerCapture = () => true;
+  board.releasePointerCapture = release;
+
+  pointer(lane, "pointerdown", "mouse", 200);
+  expect(capture).toHaveBeenCalledWith(1);
+  pointer(board, "pointermove", "mouse", 197);
+  expect(board.scrollLeft).toBe(0);
+  pointer(board, "pointermove", "mouse", 120);
+  expect(board.scrollLeft).toBe(80);
+  pointer(board, "pointerup", "mouse", 120);
+  expect(release).toHaveBeenCalledWith(1);
+  expect(board).not.toHaveClass("taskchef-board-dragging");
+  fireEvent.click(within(lane).getByRole("button", { name: "Task 1" }));
+  expect(onOpenDetail).not.toHaveBeenCalled();
+});
+
+test("card controls and touch gestures do not start mouse panning", () => {
+  const onOpenDetail = vi.fn();
+  render(<MantineProvider><TaskBoard tasks={[task(1, "working")]} completedLimit={5} onMoreCompleted={vi.fn()} onOpenCodex={vi.fn()} onOpenDetail={onOpenDetail} /></MantineProvider>);
+  const board = screen.getByRole("region", { name: "Task board" });
+  const lane = screen.getByRole("region", { name: "Working, 1 tasks" });
+  Object.defineProperties(board, { scrollWidth: { value: 1700 }, clientWidth: { value: 700 } });
+  const capture = vi.fn();
+  board.setPointerCapture = capture;
+  const title = within(lane).getByRole("button", { name: "Task 1" });
+  pointer(title, "pointerdown", "mouse", 200);
+  pointer(lane, "pointerdown", "touch", 200, 2);
+  pointer(board, "pointermove", "touch", 120, 2);
+  expect(capture).not.toHaveBeenCalled();
+  expect(board.scrollLeft).toBe(0);
+  fireEvent.click(title);
+  expect(onOpenDetail).toHaveBeenCalledOnce();
+});