taskchef 8.4.1 → 8.4.2

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

@@ -32,6 +32,7 @@ vi.mock("@tabler/icons-react", async () => {
     IconAlertTriangle: Icon,
     IconCircleFilled: Icon,
     IconMoon: Icon,
+    IconRefresh: Icon,
     IconSun: Icon,
   };
 });
@@ -45,6 +46,7 @@ vi.mock("@mantine/core", async () => {
     fw: _fontWeight,
     gap: _gap,
     justify: _justify,
+    leftSection: _leftSection,
     mb: _marginBottom,
     mt: _marginTop,
     p: _padding,
@@ -146,6 +148,16 @@ beforeEach(() => {
   apiMocks.dashboardVersion.mockResolvedValue("7.25.1");
 });
 
+test("Settings uses the same capped content layout as List", () => {
+  window.location.hash = "#settings";
+  vi.stubGlobal("fetch", vi.fn().mockResolvedValue({ ok: true, json: async () => ({ profiles: [] }) }));
+  const { container } = render(<DashboardApp connect={false} />);
+  const settingsPage = container.querySelector(".taskchef-settings-page");
+  expect(settingsPage).toHaveClass("taskchef-content");
+  expect(within(settingsPage as HTMLElement).getByRole("link", { name: "Back to tasks" })).toBeInTheDocument();
+  window.location.hash = "";
+});
+
 test("places the filtered task count below the toolbar and updates it from live snapshots", async () => {
   const recent = new Date().toISOString();
   const tasks = [
@@ -205,6 +217,8 @@ test("places the filtered task count below the toolbar and updates it from live
   expect(toolbar).not.toContainElement(summary);
   expect(toolbar?.nextElementSibling).toBe(summary);
   expect(taskList).toHaveAttribute("aria-describedby", summary?.id);
+  expect(taskList).toHaveClass("taskchef-content");
+  expect(summary).toHaveClass("taskchef-content");
 
   act(() => {
     onSnapshot?.({

package/src/dashboard/react/App.tsx

@@ -68,6 +68,7 @@ const theme = createTheme({
   components: {
     Button: { defaultProps: { radius: "md" } },
     Paper: { defaultProps: { radius: "md" } },
+    Select: { defaultProps: { size: "xs" } },
   },
 });
 const styleNonce = document.querySelector<HTMLMetaElement>('meta[name="taskchef-style-nonce"]')?.content;
@@ -94,7 +95,7 @@ export function TaskResultsSummary({
   visibleCount: number;
 }) {
   return (
-    <Text aria-live="polite" className="taskchef-results-summary" id="task-results-summary">
+    <Text aria-live="polite" className="taskchef-results-summary taskchef-content" id="task-results-summary">
       Tasks: {visibleCount} of {totalCount}
     </Text>
   );
@@ -358,15 +359,15 @@ 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> : <>
+            {settings ? <Stack className="taskchef-settings-page taskchef-content" gap="sm"><Button component="a" href="#" variant="subtle" size="xs" leftSection={<IconArrowLeft size={14} />} style={{ alignSelf: 'flex-start' }}>Back to tasks</Button><ModelSettings /></Stack> : <>
             <Paper className="taskchef-toolbar" radius={0}>
               <Stack gap="sm">
                 <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} />
+                  <Select aria-label="Project" data={projects} onChange={(value) => { setProject(value ?? ""); setCompletedLimit(5); }} 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); }} value={date} />
                 </Group>
                 {!board && <Box className="taskchef-toolbar-status">
                   <SegmentedControl aria-label="Status" data={statusData} onChange={setStatus} size="xs" value={status} withItemsBorders={false} />
@@ -391,7 +392,7 @@ export function DashboardApp({
               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">
+            /> : <Stack aria-describedby="task-results-summary" aria-label="Tasks" className="taskchef-list taskchef-content" 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/ModelSettings.test.tsx

@@ -8,7 +8,7 @@ vi.mock('../api', () => apiMocks);
 
 vi.mock('@mantine/core', async () => {
   const { createElement } = await import('react');
-  const block = ({ children }: { children?: import('react').ReactNode }) => createElement('div', null, children);
+  const block = ({ children, className, 'aria-label': ariaLabel }: { children?: import('react').ReactNode; className?: string; 'aria-label'?: string }) => createElement('div', { className, 'aria-label': ariaLabel }, 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 }>; 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))]),
@@ -34,6 +34,22 @@ test('shows the ccusage version pinned by TaskChef without an availability statu
   expect(screen.queryByText('available')).not.toBeInTheDocument();
 });
 
+test('uses the shared dashboard content and section treatment', async () => {
+  const role = { role: 'planner', source: null, model: 'gpt-one', effort: 'low', status: 'configured', problems: [] as string[] };
+  vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
+    ok: true,
+    json: async () => ({
+      profiles: [{ id: 'personal', roles: [role], problems: [], modelOptions: [{ value: 'gpt-one', label: 'GPT One', efforts: ['low'] }] }],
+      usageProvider: { provider: 'ccusage', status: 'available', version: '20.0.21' },
+    }),
+  }));
+  const { container } = render(<MantineProvider><ModelSettings /></MantineProvider>);
+  expect(await screen.findByRole('combobox', { name: 'planner model' })).toBeInTheDocument();
+  expect(container.querySelector('[aria-label="Model settings"]')).toHaveClass('taskchef-settings');
+  expect(container.querySelector('.taskchef-settings-fields')).toBeInTheDocument();
+  expect(container.querySelectorAll('.taskchef-section')).toHaveLength(2);
+});
+
 test('refresh shows configuration failures and does not label them honored', async () => {
   const role = { role: 'reviewer', source: '/fixture/reviewer.toml', effectiveSource: '/fixture/reviewer.toml', model: 'fixture', effort: 'low', status: 'configured', availability: 'not checked', fallback: 'inherit parent settings', problems: [] as string[] };
   const profile = { id: 'personal', project: 'Personal', roles: [role], problems: [], catalogSource: null };

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

@@ -59,9 +59,9 @@ export function ModelSettings() {
       setSaving(null);
     }
   };
-  return <Stack gap="md" aria-label="Model settings">
+  return <Stack className="taskchef-settings" gap="sm" aria-label="Model settings">
     <Group justify="space-between">
-      <Title order={2} size="h3">Model roles</Title>
+      <Title order={2} size="h5">Model roles</Title>
       <ActionIcon aria-label="Refresh" aria-busy={loading} aria-disabled={loading || saving !== null} className="taskchef-icon-button" color="gray" variant="subtle" size="lg" onClick={() => {
         if (loading || saving) return;
         setLoading(true);
@@ -72,10 +72,10 @@ export function ModelSettings() {
     {error && <Alert color="red" role="alert">{error}</Alert>}
     {profile && <>
       {profile.problems.map((problem) => <Alert color="yellow" key={problem}>{problem}</Alert>)}
-      {profile.roles.map((role) => <Paper key={role.role} withBorder p="md">
+      {profile.roles.map((role) => <Paper className="taskchef-section" key={role.role} withBorder p="sm">
         <Stack gap="xs">
-          <Group justify="space-between"><Title order={3} size="h4" tt="capitalize">{role.role}</Title><Badge color={['invalid', 'unavailable'].includes(role.status) ? 'red' : role.status === 'missing' ? 'gray' : 'teal'}>{role.status}</Badge></Group>
-          <SimpleGrid cols={{ base: 1, sm: 2 }}>
+          <Group justify="space-between"><Title order={3} size="h5" tt="capitalize">{role.role}</Title><Badge color={['invalid', 'unavailable'].includes(role.status) ? 'red' : role.status === 'missing' ? 'gray' : 'teal'}>{role.status}</Badge></Group>
+          <SimpleGrid className="taskchef-settings-fields" cols={2}>
             <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);
@@ -95,10 +95,10 @@ export function ModelSettings() {
         </Stack>
       </Paper>)}
     </>}
-    {usageProvider && <Paper withBorder p="md">
+    {usageProvider && <Paper className="taskchef-section" withBorder p="sm">
       <Stack gap="xs">
-        <Title order={3} size="h4">Usage provider</Title>
-        <Text>{usageProvider.provider}{usageProvider.version ? ` ${usageProvider.version}` : ' version unavailable'}</Text>
+        <Title order={3} size="h5">Usage provider</Title>
+        <Text size="sm">{usageProvider.provider}{usageProvider.version ? ` ${usageProvider.version}` : ' version unavailable'}</Text>
         <Text c="dimmed" size="sm">Version pinned by TaskChef for token and cost estimates.</Text>
       </Stack>
     </Paper>}

package/src/dashboard/react/styles.css

@@ -5,6 +5,9 @@
   --taskchef-text: light-dark(#202521, #edf1ee);
   --taskchef-muted: light-dark(#657068, #aab4ad);
   --taskchef-accent: light-dark(#087f5b, #38d9a9);
+  --taskchef-page-max-width: 1510px;
+  --taskchef-content-max-width: 1080px;
+  --taskchef-page-gutter: clamp(16px, 3vw, 48px);
 }
 
 * { box-sizing: border-box; }
@@ -17,7 +20,7 @@ body {
 
 .taskchef-shell { min-height: 100vh; background: var(--taskchef-page); }
 .taskchef-header-shell { border-bottom: 1px solid var(--taskchef-border); }
-.taskchef-header { max-width: 1510px; padding: 10px clamp(12px, 3vw, 48px); }
+.taskchef-header { max-width: var(--taskchef-page-max-width); padding: 10px var(--taskchef-page-gutter); }
 .taskchef-header-layout { min-width: 0; min-height: 36px; gap: 8px; }
 .taskchef-header-copy { min-width: 0; }
 .taskchef-header-actions { flex: none; }
@@ -26,15 +29,23 @@ body {
 .taskchef-brand-title { min-width: 0; color: var(--taskchef-accent); font-size: 0.875rem; font-weight: 750; letter-spacing: 0.035em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
 .taskchef-version { margin-inline-start: 0.45rem; color: var(--taskchef-muted); font-size: 0.78em; font-weight: 600; letter-spacing: 0; text-transform: none; }
 .taskchef-brand-icon, .taskchef-brand-icon img { display: block; flex: none; width: 28px; height: 28px; }
-.taskchef-main { max-width: 1510px; padding-top: 8px; padding-inline: clamp(16px, 3vw, 48px); }
+.taskchef-main { max-width: var(--taskchef-page-max-width); padding-top: 8px; padding-inline: var(--taskchef-page-gutter); }
+.taskchef-content { width: 100%; max-width: var(--taskchef-content-max-width); }
 .taskchef-toolbar { max-width: none; margin-bottom: 22px; padding: 8px 0 var(--mantine-spacing-md); border: 0; border-bottom: 1px solid var(--taskchef-border); background: transparent; box-shadow: none; }
 .taskchef-toolbar-filters { width: min(100%, 488px); min-width: 0; }
 .taskchef-toolbar-filters .mantine-InputWrapper-root { flex: 1 1 0; width: 0; min-width: 0; 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-results-summary { max-width: 1080px; margin-top: 12px; color: var(--taskchef-muted); font-size: var(--mantine-font-size-xs); line-height: 1.35; white-space: nowrap; }
-.taskchef-list { max-width: 1080px; }
-.taskchef-task-row { container-type: inline-size; background: light-dark(#fff, #202421); box-shadow: 0 1px 0 light-dark(rgb(22 31 25 / 3%), transparent); }
+.taskchef-results-summary { max-width: var(--taskchef-content-max-width); margin-top: 12px; color: var(--taskchef-muted); font-size: var(--mantine-font-size-xs); line-height: 1.35; white-space: nowrap; }
+.taskchef-list { max-width: var(--taskchef-content-max-width); }
+.taskchef-settings-fields {
+  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  gap: var(--mantine-spacing-sm);
+  width: min(100%, 36rem);
+}
+.taskchef-task-row { container-type: inline-size; }
+.taskchef-task-row,
+.taskchef-section { 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; }
 .taskchef-card-heading,
@@ -73,7 +84,7 @@ body {
 .taskchef-stat + .taskchef-stat { border-inline-start: 1px solid var(--taskchef-border); }
 .taskchef-empty { border-style: dashed; background: transparent; }
 
-.taskchef-toolbar .mantine-Select-input { width: 100%; height: 30px; min-height: 30px; padding-inline-start: 12px; font-size: var(--mantine-font-size-xs); }
+.taskchef-toolbar .mantine-Select-input { width: 100%; }
 .taskchef-toolbar-view .mantine-SegmentedControl-root, .taskchef-toolbar-status .mantine-SegmentedControl-root { width: max-content; max-width: 100%; height: 30px; padding: 0; }
 .taskchef-toolbar-view .mantine-SegmentedControl-label, .taskchef-toolbar-status .mantine-SegmentedControl-label { display: flex; align-items: center; height: 100%; padding-inline: 12px; font-size: var(--mantine-font-size-xs); text-align: start; }
 .taskchef-board {