taskchef 8.3.1 → 8.4.0

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

@@ -11,7 +11,7 @@ vi.mock('@mantine/core', async () => {
   const block = ({ children }: { children?: import('react').ReactNode }) => createElement('div', null, children);
   return {
     MantineProvider: block, Tooltip: block, Badge: block, Group: block, Paper: block, SimpleGrid: block, Stack: block, Text: block, Title: block,
-    Select: ({ 'aria-busy': busy, 'aria-label': label, data = [], disabled, onChange, readOnly, value }: { 'aria-busy'?: boolean; 'aria-label': string; data?: Array<string | { value: string; label: string }>; disabled?: boolean; onChange: (value: string | null) => void; readOnly?: boolean; value: string | null }) => createElement('select', { 'aria-busy': busy, 'aria-label': label, disabled, 'aria-readonly': readOnly, value: value ?? '', onChange: (event: { currentTarget: { value: string } }) => onChange(event.currentTarget.value) }, [createElement('option', { key: '', value: '' }), ...data.map((item) => typeof item === 'string' ? createElement('option', { key: item, value: item }, item) : createElement('option', { key: item.value, value: item.value }, item.label))]),
+    Select: ({ 'aria-busy': busy, 'aria-label': label, data = [], disabled, onChange, readOnly, value }: { 'aria-busy'?: boolean; 'aria-label': string; data?: Array<string | { value: string; label: string; disabled?: boolean }>; disabled?: boolean; onChange: (value: string | null) => void; readOnly?: boolean; value: string | null }) => createElement('select', { 'aria-busy': busy, 'aria-label': label, disabled, 'aria-readonly': readOnly, value: value ?? '', onChange: (event: { currentTarget: { value: string } }) => onChange(event.currentTarget.value) }, [createElement('option', { key: '', value: '' }), ...data.map((item) => typeof item === 'string' ? createElement('option', { key: item, value: item }, item) : createElement('option', { key: item.value, value: item.value, disabled: item.disabled }, item.label))]),
     Alert: ({ children }: { children?: import('react').ReactNode }) => createElement('div', { role: 'alert' }, children),
     ActionIcon: ({ children, loading, onClick, 'aria-label': label, ...props }: { children?: import('react').ReactNode; loading?: boolean; onClick: () => void; 'aria-label': string; className?: string }) => createElement('button', { ...props, disabled: loading, onClick, 'aria-label': label }, children),
   };
@@ -112,3 +112,52 @@ test('serializes role saves so an older response cannot replace a newer selectio
   fireEvent.change(reviewerModel, { target: { value: 'gpt-two' } });
   await waitFor(() => expect(apiMocks.updateModelRole).toHaveBeenCalledTimes(2));
 });
+
+const effortRole = { role: 'planner', source: null, model: 'gpt-one', effort: 'low', status: 'configured', problems: [] as string[] };
+const effortProfile = { id: 'personal', roles: [effortRole], problems: [], modelOptions: [
+  { value: 'gpt-one', label: 'GPT One', efforts: ['low', 'medium', 'high', 'xhigh', 'max', 'ultra'] },
+  { value: 'gpt-two', label: 'GPT Two', efforts: ['max', 'medium'] },
+] };
+
+test.each([['Light', 'low'], ['Medium', 'medium'], ['High', 'high'], ['Extra High', 'xhigh'], ['Ultra', 'ultra']])('saves %s as native %s and omits max choices', async (label, native) => {
+  vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: true, json: async () => ({ profiles: [effortProfile] }) }));
+  apiMocks.updateModelRole.mockResolvedValue({ profile: { ...effortProfile, roles: [{ ...effortRole, effort: native }] } });
+  render(<ModelSettings />);
+  const effort = await screen.findByRole('combobox', { name: 'planner reasoning effort' });
+  expect(screen.getByRole('option', { name: label })).toHaveValue(native);
+  expect(screen.queryByRole('option', { name: /max/i })).not.toBeInTheDocument();
+  fireEvent.change(effort, { target: { value: native } });
+  await waitFor(() => expect(apiMocks.updateModelRole).toHaveBeenCalledWith('planner', 'gpt-one', native));
+});
+
+test('model changes filter supported efforts and never default to max', async () => {
+  vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: true, json: async () => ({ profiles: [effortProfile] }) }));
+  apiMocks.updateModelRole.mockResolvedValue({ profile: { ...effortProfile, roles: [{ ...effortRole, model: 'gpt-two', effort: 'medium' }] } });
+  render(<ModelSettings />);
+  fireEvent.change(await screen.findByRole('combobox', { name: 'planner model' }), { target: { value: 'gpt-two' } });
+  await waitFor(() => expect(apiMocks.updateModelRole).toHaveBeenCalledWith('planner', 'gpt-two', 'medium'));
+  expect(screen.getByRole('option', { name: 'Medium' })).toHaveValue('medium');
+  expect(screen.queryByRole('option', { name: 'Light' })).not.toBeInTheDocument();
+  expect(screen.queryByRole('option', { name: /max/i })).not.toBeInTheDocument();
+});
+
+test('saved max is displayed without being selectable and survives refresh and supported model changes', async () => {
+  const profile = { ...effortProfile, roles: [{ ...effortRole, effort: 'max' }] };
+  vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: true, json: async () => ({ profiles: [profile] }) }));
+  apiMocks.updateModelRole.mockResolvedValue({ profile: { ...profile, roles: [{ ...effortRole, model: 'gpt-two', effort: 'max' }] } });
+  render(<ModelSettings />);
+  const effort = await screen.findByRole('combobox', { name: 'planner reasoning effort' });
+  expect(effort).toHaveValue('max');
+  expect(screen.getByRole('option', { name: 'Max (current setting)' })).toBeDisabled();
+  fireEvent.click(screen.getByRole('button', { name: 'Refresh' }));
+  await waitFor(() => expect(fetch).toHaveBeenCalledTimes(2));
+  expect(apiMocks.updateModelRole).not.toHaveBeenCalled();
+  await waitFor(() => expect(effort).toHaveAttribute('aria-readonly', 'false'));
+  fireEvent.change(screen.getByRole('combobox', { name: 'planner model' }), { target: { value: 'gpt-two' } });
+  await waitFor(() => expect(apiMocks.updateModelRole).toHaveBeenCalledWith('planner', 'gpt-two', 'max'));
+  await waitFor(() => expect(effort).toHaveAttribute('aria-readonly', 'false'));
+  apiMocks.updateModelRole.mockResolvedValue({ profile: { ...profile, roles: [{ ...effortRole, model: 'gpt-two', effort: 'medium' }] } });
+  fireEvent.change(effort, { target: { value: 'medium' } });
+  await waitFor(() => expect(apiMocks.updateModelRole).toHaveBeenLastCalledWith('planner', 'gpt-two', 'medium'));
+  expect(screen.queryByRole('option', { name: /max/i })).not.toBeInTheDocument();
+});

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

@@ -3,6 +3,8 @@ import { IconRefresh } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
 import { updateModelRole } from '../api';
 
+const effortLabels: Record<string, string> = { low: 'Light', medium: 'Medium', high: 'High', xhigh: 'Extra High', ultra: 'Ultra' };
+
 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[] };
@@ -77,11 +79,14 @@ export function ModelSettings() {
             <Select label="Model" aria-label={`${role.role} model`} aria-busy={loading || saving !== null} data={profile.modelOptions ?? []} value={typeof role.model === 'string' ? role.model : null} readOnly={loading || saving !== null} allowDeselect={false} searchable onChange={(model) => {
               if (loading || saving || !model) return;
               const option = profile.modelOptions?.find((candidate) => candidate.value === model);
-              const effort = typeof role.effort === 'string' && option?.efforts.includes(role.effort) ? role.effort : option?.efforts[0];
+              const effort = typeof role.effort === 'string' && option?.efforts.includes(role.effort) ? role.effort : option?.efforts.find((value) => value !== 'max');
               if (effort) void save(role, model, effort);
             }} />
-            <Select label="Reasoning effort" aria-label={`${role.role} reasoning effort`} aria-busy={loading || saving !== null} data={(profile.modelOptions?.find((option) => option.value === role.model)?.efforts ?? []).map((value) => ({ value, label: value }))} value={typeof role.effort === 'string' ? role.effort : null} disabled={typeof role.model !== 'string'} readOnly={loading || saving !== null} allowDeselect={false} onChange={(effort) => {
-              if (!loading && !saving && effort && typeof role.model === 'string') void save(role, role.model, effort);
+            <Select label="Reasoning effort" aria-label={`${role.role} reasoning effort`} aria-busy={loading || saving !== null} data={[
+              ...(profile.modelOptions?.find((option) => option.value === role.model)?.efforts ?? []).filter((value) => value !== 'max').map((value) => ({ value, label: effortLabels[value] ?? value })),
+              ...(role.effort === 'max' ? [{ value: 'max', label: 'Max (current setting)', disabled: true }] : []),
+            ]} value={typeof role.effort === 'string' ? role.effort : null} disabled={typeof role.model !== 'string'} readOnly={loading || saving !== null} allowDeselect={false} onChange={(effort) => {
+              if (!loading && !saving && effort && effort !== 'max' && typeof role.model === 'string') void save(role, role.model, effort);
             }} />
           </SimpleGrid>
           <Text size="sm" style={{ overflowWrap: 'anywhere' }}>Source: {role.displaySource ?? role.source ?? 'No role file'}</Text>

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.`