taskchef 9.3.0 → 9.5.0

package/src/mcp-app/react/CalendarView.test.tsx

@@ -0,0 +1,59 @@
+import { afterEach, expect, test, vi } from "vitest";
+import "@testing-library/jest-dom/vitest";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { CalendarView, type CalendarData } from "./CalendarView";
+import type { Task } from "../../ui/types";
+afterEach(() => { cleanup(); vi.useRealTimers(); });
+const month = () => { const d = new Date(); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`; };
+const task = (id: string): Task => ({ id, title: `Chat ${id}`, project: { id: 'project', name: 'Project', path: '/repo', githubRepos: [] }, status: 'needs_input', instruction: '', createdAt: '', updatedAt: '', summary: '', threadId: null, turnRef: null, turnId: null, lastResult: null, latestTurn: null });
+function data(count = 1): CalendarData { return { month: month(), timeZone: 'UTC', chats: Array.from({ length: count }, (_, i) => ({ id: String(i), incomplete: false, segments: [{ start: `${month()}-05`, end: `${month()}-05`, resumed: false }, { start: `${month()}-26`, end: `${month()}-26`, resumed: true }] })) }; }
+test('paused and resumed segments open the same chat; navigation has no Today control', async () => {
+  const onOpenDetail = vi.fn(), request = vi.fn(async () => data());
+  render(<CalendarView request={request} tasks={[task('0')]} refreshKey="1" onOpenDetail={onOpenDetail} />);
+  const bars = await screen.findAllByRole('button', { name: /Project · Chat 0/ });
+  expect(bars).toHaveLength(2);
+  expect(bars[1]).toHaveTextContent('↩');
+  fireEvent.click(bars[0]); fireEvent.click(bars[1]);
+  expect(onOpenDetail).toHaveBeenNthCalledWith(1, task('0'));
+  expect(onOpenDetail).toHaveBeenNthCalledWith(2, task('0'));
+  expect(screen.queryByRole('button', { name: 'Today' })).not.toBeInTheDocument();
+  expect(screen.getByRole('button', { name: 'Next month' })).toBeDisabled();
+  fireEvent.click(screen.getByRole('button', { name: 'Next month' }));
+  expect(request).toHaveBeenCalledTimes(1);
+  fireEvent.click(screen.getByRole('button', { name: 'Previous month' }));
+  await waitFor(() => expect(request).toHaveBeenCalledTimes(2));
+  expect(request.mock.calls[1]).not.toEqual(request.mock.calls[0]);
+  expect(screen.getByRole('button', { name: 'Next month' })).toBeEnabled();
+  fireEvent.click(screen.getByRole('button', { name: 'Next month' }));
+  await waitFor(() => expect(request).toHaveBeenCalledTimes(3));
+  expect(request.mock.calls[2]).toEqual(request.mock.calls[0]);
+  expect(screen.getByRole('button', { name: 'Next month' })).toBeDisabled();
+});
+test('crowded weeks expand and filters remove nonmatching chats', async () => {
+  const props = { request: vi.fn(async () => data(5)), tasks: Array.from({ length: 5 }, (_, i) => task(String(i))), refreshKey: '1', onOpenDetail: vi.fn() };
+  const { rerender } = render(<CalendarView {...props} />);
+  const more = await screen.findAllByRole('button', { name: /more this week/ });
+  fireEvent.click(more[0]);
+  expect(screen.getByRole('button', { name: 'Show fewer' })).toBeInTheDocument();
+  expect(screen.getAllByRole('button', { name: /Project · Chat 4/ }).length).toBeGreaterThan(0);
+  rerender(<CalendarView {...props} tasks={[]} />);
+  expect(screen.queryByRole('button', { name: /Project · Chat/ })).not.toBeInTheDocument();
+  expect(screen.getByText(/No recorded work matches/)).toBeInTheDocument();
+});
+test('failed requests show retry without adding a missing-history notice', async () => {
+  const result = data(); result.chats[0].incomplete = true;
+  const request = vi.fn().mockRejectedValueOnce(new Error('Unavailable')).mockResolvedValue(result);
+  render(<CalendarView request={request} tasks={[task('0')]} refreshKey="1" onOpenDetail={vi.fn()} />);
+  expect(await screen.findByRole('alert')).toHaveTextContent('Unavailable');
+  fireEvent.click(screen.getByRole('button', { name: 'Retry' }));
+  expect(await screen.findAllByRole('button', { name: /Project · Chat 0/ })).toHaveLength(2);
+  expect(screen.queryByText(/Some turn dates or durations are missing/)).not.toBeInTheDocument();
+});
+
+test('a selected project hides bar prefixes and persistent helper captions are absent', async () => {
+  render(<CalendarView request={async () => data()} tasks={[task('0')]} refreshKey="1" showProject={false} onOpenDetail={vi.fn()} />);
+  expect(await screen.findByRole('button', { name: 'Chat 0' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '↩ Chat 0' })).toBeInTheDocument();
+  expect(screen.queryByRole('button', { name: /Project ·/ })).not.toBeInTheDocument();
+  expect(screen.queryByText(/Recorded work ·|Selected Codex history only/)).not.toBeInTheDocument();
+});

package/src/mcp-app/react/CalendarView.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useState } from "react";
+import type { Task } from "../../ui/types";
+
+export interface CalendarSegment { start: string; end: string; resumed: boolean; }
+export interface CalendarData { month: string; timeZone: string; chats: { id: string; incomplete: boolean; segments: CalendarSegment[] }[]; }
+export type CalendarRequest = (args: { month: string; timeZone: string }) => Promise<CalendarData>;
+const dateKey = (date: Date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+const addDays = (key: string, days: number) => new Date(Date.parse(`${key}T12:00:00Z`) + days * 86400000).toISOString().slice(0, 10);
+const statusLabels = { working: "Running", needs_input: "Waiting for review", completed: "Done", failed: "Failed", scheduled: "Scheduled", interrupted: "Interrupted", archived: "Archived" };
+const projectHue = (task: Task) => [...(task.project.id || task.project.path || task.project.name)].reduce((hash, c) => (hash * 31 + c.charCodeAt(0)) % 360, 0);
+
+export function CalendarView({ request, tasks, refreshKey, onOpenDetail, showProject = true }: { request: CalendarRequest; tasks: Task[]; refreshKey: string; showProject?: boolean; onOpenDetail: (task: Task) => void }) {
+  const [month, setMonth] = useState(() => dateKey(new Date()).slice(0, 7));
+  const [data, setData] = useState<CalendarData | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [retry, setRetry] = useState(0);
+  const [expanded, setExpanded] = useState<string[]>([]);
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  useEffect(() => {
+    let current = true;
+    setError(null);
+    void request({ month, timeZone }).then(value => { if (current) setData(value); })
+      .catch(cause => { if (current) { setData(null); setError(String(cause)); } });
+    return () => { current = false; };
+  }, [month, timeZone, request, refreshKey, retry]);
+  const currentMonth = dateKey(new Date()).slice(0, 7);
+  function navigate(delta: number) {
+    if (delta > 0 && month >= currentMonth) return;
+    const date = new Date(`${month}-01T12:00:00Z`);
+    date.setUTCMonth(date.getUTCMonth() + delta);
+    setMonth(date.toISOString().slice(0, 7)); setData(null); setExpanded([]);
+  }
+  const first = `${month}-01`;
+  const offset = (new Date(`${first}T12:00:00Z`).getUTCDay() + 6) % 7;
+  const gridStart = addDays(first, -offset);
+  const daysInMonth = new Date(Number(month.slice(0, 4)), Number(month.slice(5, 7)), 0).getDate();
+  const weeks = Math.ceil((offset + daysInMonth) / 7);
+  const label = new Date(`${first}T12:00:00Z`).toLocaleDateString(undefined, { month: "long", year: "numeric", timeZone: "UTC" });
+  const byId = new Map(tasks.map(task => [task.id, task]));
+  const chats = data?.month === month ? data.chats.filter(chat => byId.has(chat.id)) : [];
+  const bars = chats.flatMap(chat => chat.segments.map(segment => ({ ...segment, task: byId.get(chat.id)! })));
+  const today = dateKey(new Date());
+  return <section className="calendar-view" aria-label="Chat work calendar">
+    <nav className="calendar-navigation" aria-label="Month navigation">
+      <button aria-label="Previous month" onClick={() => navigate(-1)}>‹</button>
+      <h2 aria-live="polite">{label}</h2>
+      <button aria-label="Next month" disabled={month >= currentMonth} onClick={() => navigate(1)}>›</button>
+    </nav>
+    {error && <div role="alert">Calendar could not be loaded: {error} <button onClick={() => setRetry(value => value + 1)}>Retry</button></div>}
+    {!data && !error && <p role="status">Reading recorded work…</p>}
+    <div className="calendar-scroll" tabIndex={0} aria-label="Month calendar; scroll horizontally on narrow screens">
+      <div className="calendar-month">
+        <div className="calendar-weekdays">{["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map(day => <div key={day}>{day}</div>)}</div>
+        {Array.from({ length: weeks }, (_, week) => {
+          const start = addDays(gridStart, week * 7), end = addDays(start, 6);
+          const weekBars = bars.filter(bar => bar.start <= end && bar.end >= start).sort((a, b) => a.start.localeCompare(b.start) || b.end.localeCompare(a.end) || a.task.title.localeCompare(b.task.title) || a.task.id.localeCompare(b.task.id));
+          const lanes: string[] = [];
+          const placed = weekBars.map(bar => {
+            const left = bar.start < start ? start : bar.start, right = bar.end > end ? end : bar.end;
+            let lane = lanes.findIndex(last => last < left);
+            if (lane < 0) lane = lanes.length;
+            lanes[lane] = right;
+            return { ...bar, left, right, lane };
+          });
+          const open = expanded.includes(start);
+          const visible = placed.filter(bar => open || bar.lane < 3);
+          const hidden = placed.length - visible.length;
+          return <div className="calendar-week" key={start}>
+            <div className="calendar-week-grid" style={{ gridTemplateRows: `30px repeat(${Math.max(3, open ? lanes.length : Math.min(3, lanes.length))}, 28px)` }}>
+              <div className="calendar-day-backgrounds" aria-hidden>{Array.from({ length: 7 }, (_, col) => <div className={col > 4 ? "calendar-weekend" : ""} key={col} />)}</div>
+              {Array.from({ length: 7 }, (_, col) => {
+                const day = addDays(start, col);
+                return <div key={day} className={`calendar-day${day.slice(0, 7) !== month ? " calendar-outside" : ""}${day === today ? " calendar-today" : ""}`} style={{ gridColumn: col + 1, gridRow: 1 }}><time dateTime={day}>{Number(day.slice(-2))}</time></div>;
+              })}
+              {visible.map(bar => {
+                const col = Math.round((Date.parse(bar.left) - Date.parse(start)) / 86400000);
+                const span = Math.round((Date.parse(bar.right) - Date.parse(bar.left)) / 86400000) + 1;
+                const title = showProject ? `${bar.task.project.name} · ${bar.task.title}` : bar.task.title;
+                return <button key={`${bar.task.id}:${bar.start}`} className="calendar-bar" style={{ gridColumn: `${col + 1} / span ${span}`, gridRow: bar.lane + 2, borderColor: `hsl(${projectHue(bar.task)} 45% 55%)`, backgroundColor: `hsl(${projectHue(bar.task)} 45% 55% / .17)` }} title={`${title}\n${bar.start} – ${bar.end}${bar.resumed ? ' · Resumed' : ''}\nCurrent status: ${bar.task.status ? statusLabels[bar.task.status] : 'Unverified'}`} onClick={() => onOpenDetail(bar.task)}>
+                  {bar.start < start ? "← " : bar.resumed ? "↩ " : ""}{title}{bar.end > end ? " →" : ""}
+                </button>;
+              })}
+            </div>
+            {(hidden > 0 || open) && <button className="calendar-more" onClick={() => setExpanded(value => open ? value.filter(item => item !== start) : [...value, start])}>{open ? "Show fewer" : `+${hidden} more this week`}</button>}
+          </div>;
+        })}
+      </div>
+    </div>
+    {data && !error && !bars.length && <p role="status">No recorded work matches this month and these filters.</p>}
+  </section>;
+}

package/src/mcp-app/react/UsageView.test.tsx

@@ -0,0 +1,124 @@
+import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
+import { UsageView, type UsageData } from './UsageView';
+beforeEach(() => window.localStorage.clear());
+afterEach(cleanup);
+const data:UsageData={start:'2026-10-01',end:'2026-10-15',timeZone:'Asia/Singapore',samples:2,incomplete:false,totals:{tokens:200,costUsd:3,inputTokens:160,cachedInputTokens:40,outputTokens:40},days:[{date:'2026-10-15',tokens:200,costUsd:3,projects:{a:2,b:1}}],projects:[{id:'a',name:'Alpha',tokens:100,costUsd:2},{id:'b',name:'Beta',tokens:100,costUsd:1}]};
+test('defaults to 30 days, changes range, isolates projects, and exposes exact day values',async()=>{
+ const request=vi.fn().mockResolvedValue(data);render(<UsageView request={request}/>);
+ await waitFor(()=>expect(screen.getByRole('table')).toBeVisible());
+ expect(request).toHaveBeenCalledWith({range:'30d',timeZone:expect.any(String)});
+ expect(screen.queryByText(/Custom/)).toBeNull();
+ fireEvent.click(screen.getByRole('button',{name:'7 days'}));
+ await waitFor(()=>expect(request).toHaveBeenLastCalledWith({range:'7d',timeZone:expect.any(String)}));
+ await waitFor(()=>expect(screen.getByRole('table')).toBeVisible());
+ fireEvent.click(screen.getByRole('button',{name:'Alpha'}));
+ expect(screen.getByRole('img',{name:'Daily project cost bars: Alpha'})).toBeVisible();
+ fireEvent.click(screen.getByRole('button',{name:'All projects'}));
+ expect(screen.getByRole('img',{name:'Daily project cost bars: all projects'})).toBeVisible();
+ fireEvent.focus(screen.getByRole('button',{name:'Oct 15: $3.00, 200 tokens'}));
+ expect(screen.getByText('Oct 15 · 200 tokens · $3.00')).toBeVisible();
+});
+test('a late old response cannot replace the selected range and errors can retry',async()=>{
+ let first!:(value:UsageData)=>void;const request=vi.fn().mockImplementationOnce(()=>new Promise<UsageData>(resolve=>{first=resolve;})).mockRejectedValueOnce(new Error('Read failed')).mockResolvedValue(data);
+ render(<UsageView request={request}/>);fireEvent.click(screen.getByRole('button',{name:'90 days'}));
+ expect(await screen.findByRole('alert')).toHaveTextContent('Read failed');
+ first(data);await Promise.resolve();expect(screen.queryByRole('table')).toBeNull();
+ fireEvent.click(screen.getByRole('button',{name:'Retry'}));await waitFor(()=>expect(screen.getByRole('table')).toBeVisible());
+});
+test('missing coverage and empty data are distinct from a zero cost estimate',async()=>{
+ const request=vi.fn().mockResolvedValue({...data,samples:0,incomplete:true});render(<UsageView request={request}/>);
+ await screen.findByText(/No timestamped usage/);expect(screen.queryByText(/Incomplete coverage:/)).toBeNull();expect(screen.queryByRole('table')).toBeNull();
+});
+test('ranks only ten projects and keeps Other out of project identity',async()=>{
+ const projects=Array.from({length:12},(_,i)=>({id:String(i),name:`Project ${i}`,tokens:1,costUsd:12-i}));
+ const request=vi.fn().mockResolvedValue({...data,projects});render(<UsageView request={request}/>);
+ await waitFor(()=>expect(screen.getByRole('table')).toBeVisible());expect(within(screen.getByRole('table')).getAllByRole('row')).toHaveLength(11);expect(screen.getByText('Other')).toBeVisible();
+});
+
+test('polls a pending history read and stops polling when unmounted',async()=>{
+ const request=vi.fn().mockResolvedValueOnce({loading:true}).mockResolvedValue(data);
+ const view=render(<UsageView request={request}/>);expect(await screen.findByRole('status')).toHaveTextContent('Reading saved usage');
+ await waitFor(()=>expect(screen.getByRole('table')).toBeVisible(),{timeout:2000});
+ expect(request).toHaveBeenLastCalledWith({range:'30d',timeZone:expect.any(String)});
+ view.unmount();
+ const pending=vi.fn().mockResolvedValue({loading:true});const second=render(<UsageView request={pending}/>);await waitFor(()=>expect(pending).toHaveBeenCalledTimes(1));second.unmount();
+});
+
+test('a hidden view does not start historical usage reads',async()=>{
+ const visibility=vi.spyOn(document,'visibilityState','get').mockReturnValue('hidden');
+ try {const request=vi.fn().mockResolvedValue(data);render(<UsageView request={request}/>);expect(request).not.toHaveBeenCalled();visibility.mockReturnValue('visible');await waitFor(()=>expect(screen.getByRole('table')).toBeVisible(),{timeout:2000});expect(request).toHaveBeenCalledTimes(1);}
+ finally{visibility.mockRestore();}
+});
+
+test('Last month follows This month and range changes reuse history without forcing a scan',async()=>{
+ const request=vi.fn().mockResolvedValue(data);render(<UsageView request={request}/>);
+ await waitFor(()=>expect(screen.getByRole('table')).toBeVisible());
+ const buttons=within(screen.getByRole('group',{name:'Usage time range'})).getAllByRole('button');
+ expect(buttons.map(button=>button.textContent)).toEqual(['7 days','30 days','90 days','This month','Last month']);
+ fireEvent.click(screen.getByRole('button',{name:'Last month'}));await waitFor(()=>expect(request).toHaveBeenLastCalledWith({range:'last-month',timeZone:expect.any(String)}));
+ fireEvent.click(screen.getByRole('button',{name:'This month'}));await waitFor(()=>expect(request).toHaveBeenCalledTimes(3));expect(request.mock.calls.every(([args])=>!args.force)).toBe(true);
+});
+test('Refresh forces one new read and shows measured progress while cached data stays visible',async()=>{
+ const request=vi.fn().mockResolvedValueOnce(data).mockResolvedValueOnce({...data,refreshing:true,progress:{completed:2,total:10}}).mockResolvedValue(data);
+ const view=render(<UsageView request={request}/>);await waitFor(()=>expect(screen.getByRole('table')).toBeVisible());
+ view.rerender(<UsageView request={request} refreshKey={1}/>);
+ await screen.findByText('Updating saved usage… 2 of 10 chats');expect(screen.getByRole('progressbar',{name:'Usage scan progress'})).toHaveAttribute('value','2');expect(screen.getByRole('table')).toBeVisible();
+ expect(request).toHaveBeenLastCalledWith({range:'30d',timeZone:expect.any(String),force:true});await waitFor(()=>expect(screen.queryByRole('progressbar')).toBeNull());
+});
+test('legend hover and focus highlight only matching project bars and reset on leave',async()=>{
+ const request=vi.fn().mockResolvedValue(data);const view=render(<UsageView request={request}/>);await waitFor(()=>expect(screen.getByRole('table')).toBeVisible());
+ const alpha=screen.getByRole('button',{name:'Alpha'});fireEvent.mouseEnter(alpha);
+ expect(view.container.querySelector('[data-project="a"]')).toHaveAttribute('opacity','1');expect(view.container.querySelector('[data-project="b"]')).toHaveAttribute('opacity','0.2');
+ fireEvent.mouseLeave(alpha);expect(view.container.querySelector('[data-project="b"]')).toHaveAttribute('opacity','1');
+ fireEvent.focus(alpha);expect(view.container.querySelector('[data-project="b"]')).toHaveAttribute('opacity','0.2');fireEvent.blur(alpha);expect(view.container.querySelector('[data-project="b"]')).toHaveAttribute('opacity','1');
+});
+
+ test('Rescan rebuilds explicitly and removes coverage and axis helper copy',async()=>{
+ const request=vi.fn().mockResolvedValue({...data,incomplete:true});render(<UsageView request={request}/>);
+ await screen.findByRole('table');
+ for(const text of [/Incomplete coverage/,/Known subtotal/,/Cached input is included/,/right axis/,/left axis/,/By estimated cost/,/Missing usage is not zero/]) expect(screen.queryByText(text)).toBeNull();
+ fireEvent.click(screen.getByRole('button',{name:'Rescan'}));
+ await waitFor(()=>expect(request).toHaveBeenLastCalledWith({range:'30d',timeZone:expect.any(String),rescan:true}));
+ });
+
+test('only the current local day has dashed bars and token segment; a completed period stays solid',async()=>{
+ vi.useFakeTimers({toFake:['Date']});vi.setSystemTime(new Date('2026-10-15T17:00:00Z'));
+ try {
+  const days=[{...data.days[0],date:'2026-10-15'},{...data.days[0],date:'2026-10-16'}];
+  const request=vi.fn().mockResolvedValueOnce({...data,end:'2026-10-16',days}).mockResolvedValue({...data,start:'2026-09-01',end:'2026-09-30',days:[{...data.days[0],date:'2026-09-30'}]});
+  render(<UsageView request={request}/>);await screen.findByRole('table');
+  const combined=screen.getByRole('img',{name:'Daily estimated cost bars and token line'});
+  expect(combined.querySelectorAll('rect[stroke-dasharray]')).toHaveLength(1);
+  expect(combined.querySelectorAll('polyline[stroke-dasharray]')).toHaveLength(1);
+  expect(screen.getByRole('button',{name:/Oct 16: .*in progress/})).toBeVisible();
+  const projects=screen.getByRole('img',{name:'Daily project cost bars: all projects'});
+  expect(projects.querySelectorAll('rect[stroke-dasharray]')).toHaveLength(2);
+  fireEvent.click(screen.getByRole('button',{name:'Alpha'}));
+  expect(screen.getByRole('img',{name:'Daily project cost bars: Alpha'}).querySelectorAll('rect[stroke-dasharray]')).toHaveLength(1);
+  fireEvent.click(screen.getByRole('button',{name:'Last month'}));
+  await waitFor(()=>expect(screen.getByText(/Sep 1 – Sep 30/)).toBeVisible());
+  expect(screen.getByRole('img',{name:'Daily estimated cost bars and token line'}).querySelectorAll('[stroke-dasharray]')).toHaveLength(0);
+  expect(screen.getByRole('img',{name:'Daily project cost bars: Alpha'}).querySelectorAll('[stroke-dasharray]')).toHaveLength(0);
+ } finally {vi.useRealTimers();}
+});
+
+test('remembers the selected range after leaving and reopening Usage', async () => {
+ const request=vi.fn().mockResolvedValue(data);
+ const first=render(<UsageView request={request}/>);
+ await screen.findByRole('table');
+ expect(request).toHaveBeenCalledWith({range:'30d',timeZone:expect.any(String)});
+ fireEvent.click(screen.getByRole('button',{name:'90 days'}));
+ await waitFor(()=>expect(request).toHaveBeenLastCalledWith({range:'90d',timeZone:expect.any(String)}));
+ first.unmount(); request.mockClear();
+ render(<UsageView request={request}/>);
+ await screen.findByRole('table');
+ expect(request).toHaveBeenCalledWith({range:'90d',timeZone:expect.any(String)});
+ expect(screen.getByRole('button',{name:'90 days'})).toHaveAttribute('aria-pressed','true');
+});
+test('invalid saved Usage ranges fall back to 30 days', async () => {
+ window.localStorage.setItem('taskchef.app.usage.range',JSON.stringify('invalid'));
+ const request=vi.fn().mockResolvedValue(data);render(<UsageView request={request}/>);
+ await screen.findByRole('table');
+ expect(request).toHaveBeenCalledWith({range:'30d',timeZone:expect.any(String)});
+});

package/src/mcp-app/react/UsageView.tsx

@@ -0,0 +1,129 @@
+import { usePreference } from "./preferences";
+import { useEffect, useRef, useState } from "react";
+
+export interface UsageData {
+  updatedAt?: string; refreshing?: boolean; progress?: ScanProgress;
+  start: string; end: string; timeZone: string; samples: number; incomplete: boolean;
+  totals: { tokens: number; costUsd: number; inputTokens: number; cachedInputTokens: number; outputTokens: number };
+  days: { date: string; tokens: number; costUsd: number; projects: Record<string, number> }[];
+  projects: { id: string; name: string; costUsd: number; tokens: number }[];
+}
+interface ScanProgress { completed: number; total: number; }
+export type UsageRange = "7d" | "30d" | "90d" | "mtd" | "last-month";
+export const usageRequest = (range: UsageRange, force = false, rescan = false) => ({ range, timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone, ...(force ? { force: true } : {}), ...(rescan ? { rescan: true } : {}) });
+export type UsageResponse = UsageData | { loading: true; progress?: ScanProgress };
+const money = (n: number) => new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: n > 0 && n < .01 ? 4 : 2 }).format(n);
+const count = (n: number) => new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 }).format(n);
+const dateLabel = (value: string) => new Date(`${value}T12:00:00Z`).toLocaleDateString(undefined, { month: "short", day: "numeric", timeZone: "UTC" });
+const colors = ["#6e91ad", "#80ad99", "#b8a0ca", "#c2a06e", "#c78585", "#92979c"];
+const left = 64, right = 794, top = 16, bottom = 166;
+
+export function UsageView({ request, refreshKey = 0 }: { request: (args: ReturnType<typeof usageRequest>) => Promise<UsageResponse>; refreshKey?: number }) {
+  const [range, setRange] = usePreference("usage.range");
+  const [data, setData] = useState<UsageData | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [progress, setProgress] = useState<ScanProgress | null>(null);
+  const [highlighted, setHighlighted] = useState<string | null>(null);
+  const lastRequest = useRef({ refreshKey, retry: 0, rescan: 0 });
+  const [selected, setSelected] = useState<string | null>(null);
+  const [activeDay, setActiveDay] = useState<number | null>(null);
+  const [retry, setRetry] = useState(0);
+  const [rescan, setRescan] = useState(0);
+  useEffect(() => {
+    let current = true;
+    const force = refreshKey !== lastRequest.current.refreshKey || retry !== lastRequest.current.retry;
+    const rebuild = rescan !== lastRequest.current.rescan;
+    lastRequest.current = { refreshKey, retry, rescan };
+    setLoading(true); setError(null); setProgress(null); setActiveDay(null); setHighlighted(null);
+    if (!force && !rebuild) setData(null);
+    let timer: ReturnType<typeof setTimeout>;
+    async function load(force: boolean, rebuild = false) {
+      if (document.visibilityState === "hidden") { timer = setTimeout(() => { void load(force, rebuild); }, 1000); return; }
+      try {
+        const result = await request(usageRequest(range, force, rebuild));
+        if (!current) return;
+        setProgress(result.progress ?? null);
+        if ("loading" in result) timer = setTimeout(() => { void load(false); }, 250);
+        else {
+          setData(result); setLoading(false);
+          if (result.refreshing) timer = setTimeout(() => { void load(false); }, 250);
+        }
+      } catch (cause) { if (current) { setError(String(cause)); setLoading(false); } }
+    }
+    void load(force, rebuild);
+    return () => { current = false; clearTimeout(timer); };
+  }, [range, request, refreshKey, retry, rescan]);
+  const today = data ? new Intl.DateTimeFormat("en-CA", { timeZone: data.timeZone, year: "numeric", month: "2-digit", day: "2-digit" }).format(new Date()) : "";
+  const unfinished = (date: string) => date === today;
+  const barStyle = (date: string, color: string) => unfinished(date) ? { fillOpacity: .35, stroke: color, strokeWidth: 1.5, strokeDasharray: "4 3" } : {};
+  const project = data?.projects.find(item => item.id === selected);
+  const series = data ? (project ? [{ ...project, color: colors[data.projects.indexOf(project) < 5 ? data.projects.indexOf(project) : 5] }]
+    : [...data.projects.slice(0, 5).map((item, index) => ({ ...item, color: colors[index] })),
+      ...(data.projects.length > 5 ? [{ id: "__other", name: "Other", costUsd: 0, tokens: 0, color: colors[5] }] : [])]) : [];
+  const activeHighlight = series.some(item => item.id === highlighted) ? highlighted : null;
+  const dayWidth = data ? (right - left) / data.days.length : 1;
+  const maxCost = Math.max(...(data?.days.map(day => day.costUsd) ?? []), .01);
+  const maxTokens = Math.max(...(data?.days.map(day => day.tokens) ?? []), 1);
+  const projectCost = (day: UsageData["days"][number], id: string) => id === "__other"
+    ? data!.projects.slice(5).reduce((sum, item) => sum + (day.projects[item.id] ?? 0), 0) : day.projects[id] ?? 0;
+  const maxProjectCost = Math.max(...(data?.days.map(day => series.reduce((sum, item) => sum + projectCost(day, item.id), 0)) ?? []), .01);
+  const x = (index: number) => left + (index + .5) * dayWidth;
+  const y = (value: number, max: number) => bottom - value / max * (bottom - top);
+  function grid(max: number, tokens = false) {
+    return [0, .5, 1].map(fraction => <g key={fraction}>
+      <line x1={left} x2={right} y1={y(fraction, 1)} y2={y(fraction, 1)} className="usage-grid" />
+      <text x={left - 10} y={y(fraction, 1) + 4} textAnchor="end">{tokens ? count(max * fraction) : money(max * fraction)}</text>
+    </g>);
+  }
+  function dates() {
+    return data!.days.map((day, index) => index === 0 || index === data!.days.length - 1 || index % Math.ceil(data!.days.length / 5) === 0
+      ? <text key={day.date} x={x(index)} y={bottom + 25} textAnchor="middle">{dateLabel(day.date)}</text> : null);
+  }
+  return <section className="usage-view" aria-label="Usage analytics">
+    <div className="usage-heading"><div><h2>Usage</h2><p>Tokens and estimated cost across your Codex work.</p></div><button disabled={loading || data?.refreshing} onClick={() => setRescan(value => value + 1)}>Rescan</button></div>
+    <div className="usage-ranges" role="group" aria-label="Usage time range">
+      {([ ["7d", "7 days"], ["30d", "30 days"], ["90d", "90 days"], ["mtd", "This month"], ["last-month", "Last month"] ] as const).map(([value, label]) => <button key={value} aria-pressed={range === value} onClick={() => setRange(value)}>{label}</button>)}
+    </div>
+    {(loading || data?.refreshing) && !error && <div className="usage-progress" role="status">
+      <p>{data ? "Updating saved usage…" : "Reading saved usage…"} {progress?.total ? `${progress.completed} of ${progress.total} chats` : "Preparing history…"}</p>
+      <progress aria-label="Usage scan progress" max={progress?.total || 1} value={progress?.total ? progress.completed : undefined} />
+    </div>}
+    {error && <div role="alert"><p>Usage could not be loaded: {error}</p><button onClick={() => setRetry(value => value + 1)}>Retry</button></div>}
+    {data && <>
+      <p className="usage-period">{dateLabel(data.start)} – {dateLabel(data.end)} · {data.timeZone} · Daily · Includes archived chats and subagent usage{data.updatedAt && <> · Updated {new Date(data.updatedAt).toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })}</>}</p>
+      {!data.samples ? <p role="status">No timestamped usage is available for this period.</p> : <>
+        <div className="usage-totals">
+          <article><h3>Recorded tokens</h3><strong>{count(data.totals.tokens)}</strong><p>Input {count(data.totals.inputTokens)} · Cached input {count(data.totals.cachedInputTokens)} · Output {count(data.totals.outputTokens)}</p></article>
+          <article><h3>Estimated cost</h3><strong>{money(data.totals.costUsd)}</strong><p>API-equivalent prices · USD</p></article>
+        </div>
+        <article className="usage-panel" aria-label="Tokens and cost over time"><h3>Tokens and cost over time</h3>
+          <div className="usage-legend"><span className="usage-token-key">━ Tokens</span><span><i style={{ background: colors[0] }} /> Estimated cost</span></div>
+          <div className="usage-chart-scroll"><svg viewBox="0 0 860 210" role="img" aria-label="Daily estimated cost bars and token line" className="usage-chart">
+            {grid(maxCost)}
+            {[0, .5, 1].map(fraction => <text className="usage-token-axis" key={fraction} x={right + 10} y={y(fraction, 1) + 4}>{count(maxTokens * fraction)}</text>)}
+            {data.days.map((day, index) => <rect key={day.date} x={x(index) - dayWidth * .3} y={y(day.costUsd, maxCost)} width={dayWidth * .6} height={bottom - y(day.costUsd, maxCost)} fill={colors[0]} {...barStyle(day.date, colors[0])}><title>{dateLabel(day.date)}{unfinished(day.date) ? " (in progress)" : ""}: {money(day.costUsd)}, {day.tokens.toLocaleString()} tokens</title></rect>)}
+            <polyline className="usage-token-line" points={data.days.map((day, index) => unfinished(day.date) ? null : `${x(index)},${y(day.tokens, maxTokens)}`).filter(Boolean).join(" ")} />
+            {data.days.map((day, index) => unfinished(day.date) && index > 0 ? <polyline key={day.date} className="usage-token-line" strokeDasharray="5 4" points={`${x(index - 1)},${y(data.days[index - 1].tokens, maxTokens)} ${x(index)},${y(day.tokens, maxTokens)}`} /> : null)}
+            {data.days.map((day, index) => <g key={day.date} tabIndex={0} role="button" aria-label={`${dateLabel(day.date)}: ${money(day.costUsd)}, ${day.tokens.toLocaleString()} tokens${unfinished(day.date) ? " (in progress)" : ""}`} onMouseEnter={() => setActiveDay(index)} onFocus={() => setActiveDay(index)} onClick={() => setActiveDay(index)} onKeyDown={event => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); setActiveDay(index); } }}><rect x={left + index * dayWidth} y={top} width={dayWidth} height={bottom - top} fill="transparent" /><circle cx={x(index)} cy={y(day.tokens, maxTokens)} r={data.days.length > 30 ? 0 : 2.5} className="usage-token-dot" /></g>)}
+            {dates()}
+          </svg></div>
+          <p className="usage-chart-detail" aria-live="polite">{activeDay === null ? "Hover or focus a day to inspect its usage." : `${dateLabel(data.days[activeDay].date)} · ${data.days[activeDay].tokens.toLocaleString()} tokens · ${money(data.days[activeDay].costUsd)}`}</p>
+        </article>
+        <article className="usage-panel" aria-label="Cost by project over time"><h3>Cost by project over time</h3>
+          <p>{project ? `${project.name} · ` : "Top 5 projects + Other · "}Select a project below to isolate its cost.</p>
+          <div className="usage-legend"><button aria-pressed={!project} onMouseEnter={() => setHighlighted(null)} onFocus={() => setHighlighted(null)} onClick={() => setSelected(null)}>All projects</button>{data.projects.slice(0, 5).map((item, index) => <button key={item.id} aria-pressed={project?.id === item.id} onMouseEnter={() => setHighlighted(item.id)} onMouseLeave={() => setHighlighted(null)} onFocus={() => setHighlighted(item.id)} onBlur={() => setHighlighted(null)} onClick={() => setSelected(project?.id === item.id ? null : item.id)}><i style={{ background: colors[index] }} />{item.name}</button>)}{data.projects.length > 5 && <span tabIndex={0} onMouseEnter={() => setHighlighted("__other")} onMouseLeave={() => setHighlighted(null)} onFocus={() => setHighlighted("__other")} onBlur={() => setHighlighted(null)}><i style={{ background: colors[5] }} />Other</span>}</div>
+          <div className="usage-chart-scroll"><svg viewBox="0 0 860 210" role="img" aria-label={`Daily project cost bars: ${project?.name ?? "all projects"}`} className="usage-chart">
+            {grid(maxProjectCost)}
+            {data.days.map((day, index) => { let accumulated = 0; return <g key={day.date}>{series.map(item => { const cost = projectCost(day, item.id); const start = accumulated; accumulated += cost; return <rect key={item.id} x={x(index) - dayWidth * .3} y={y(accumulated, maxProjectCost)} width={dayWidth * .6} height={(cost / maxProjectCost) * (bottom - top)} fill={item.color} {...barStyle(day.date, item.color)} data-project={item.id} opacity={activeHighlight && activeHighlight !== item.id ? .2 : 1}><title>{dateLabel(day.date)}{unfinished(day.date) ? " (in progress)" : ""} · {item.name}: {money(accumulated - start)}</title></rect>; })}</g>; })}
+            {dates()}
+          </svg></div>
+        </article>
+        <article className="usage-panel" aria-label="Top 10 projects"><h3>Top 10 projects</h3>
+          <div className="usage-ranking"><table><thead><tr><th scope="col">Project</th><th scope="col">Estimated cost</th><th scope="col">Share</th></tr></thead><tbody>{data.projects.slice(0, 10).map((item, index) => <tr key={item.id}><th scope="row"><button aria-pressed={project?.id === item.id} onClick={() => setSelected(project?.id === item.id ? null : item.id)}><span>{index + 1}. {item.name}</span><span className="usage-rank-track" aria-hidden><span style={{ width: `${data.projects[0].costUsd ? item.costUsd / data.projects[0].costUsd * 100 : 0}%`, background: colors[index < 5 ? index : 5] }} /></span></button></th><td>{money(item.costUsd)}</td><td>{data.totals.costUsd ? (item.costUsd / data.totals.costUsd * 100).toFixed(1) : "0.0"}%</td></tr>)}</tbody></table></div>
+        </article>
+      </>}
+      <p className="usage-footnote">Cost is estimated at API-equivalent prices, not your subscription bill or remaining allowance.</p>
+    </>}
+  </section>;
+}

package/src/mcp-app/react/main.test.tsx

@@ -118,13 +118,14 @@ test("lifecycle events log readable single strings without suppressing repeats",
   expect(warn).not.toHaveBeenCalled();
 });
 
-test("shows only Board, ignores a saved List choice, and filters project and date", async () => {
+test("defaults to Board, ignores a saved List choice, and filters project and date", async () => {
   window.localStorage.setItem("taskchef.app.view", "list");
   tasks = [task("one", "working", new Date().toISOString(), "Alpha"), task("two", "completed", "2026-01-01T00:00:00Z", "Alpha"), task("three", "interrupted", new Date().toISOString(), "Beta")];
   mount();
   await screen.findByRole("button", { name: "Task one" });
   expect(screen.getByRole("region", { name: "Task board" })).toBeVisible();
-  expect(screen.queryByRole("radiogroup", { name: "View" })).not.toBeInTheDocument();
+  expect(screen.getByRole("radio", { name: "Board" })).toHaveAttribute("aria-checked", "true");
+  expect(screen.queryByRole("radio", { name: "List" })).not.toBeInTheDocument();
   expect(screen.queryByRole("radiogroup", { name: "Status" })).not.toBeInTheDocument();
   fireEvent.change(screen.getByRole("combobox", { name: "Project" }), { target: { value: "/Alpha" } });
   expect(screen.queryByRole("button", { name: "Task three" })).not.toBeInTheDocument();
@@ -667,3 +668,137 @@ test("Pinned toggle combines with filters and updates after pin changes on refre
   expect(toggle).toHaveAttribute("aria-pressed", "false");
   expect(screen.getByRole("button", { name: "Task two" })).toBeVisible();
 });
+
+
+test("Usage opens on demand and returns to Board without keeping its filters visible", async () => {
+  const original = server.call.getMockImplementation()!;
+  server.call.mockImplementation((input) => input.name === "taskchef_app_usage" ? Promise.resolve({structuredContent:{start:"2026-10-01",end:"2026-10-15",timeZone:"UTC",days:[],projects:[],totals:{},samples:0,incomplete:false}}) : original(input));
+  mount();await screen.findByRole("button",{name:"Task one"});
+  expect(server.call.mock.calls.some(([input])=>input.name === "taskchef_app_usage")).toBe(false);
+  fireEvent.click(screen.getByRole("radio",{name:"Usage"}));
+  await screen.findByText("No timestamped usage is available for this period.");
+  expect(screen.queryByRole("combobox",{name:"Project"})).toBeNull();
+  fireEvent.click(screen.getByRole("radio",{name:"Board"}));
+  expect(screen.getByRole("region",{name:"Task board"})).toBeVisible();
+});
+
+test("Calendar replaces the update window and opens matching chat details", async () => {
+  tasks = [task('one', 'needs_input', '2020-01-01T00:00:00Z')];
+  details = new Map(tasks.map(item => [item.id, item]));
+  const base = server.call.getMockImplementation()!;
+  server.call.mockImplementation(input => {
+    if (input.name === 'taskchef_app_calendar') return Promise.resolve({ structuredContent: { month: input.arguments.month, timeZone: input.arguments.timeZone, chats: [{ id: 'one', incomplete: false, segments: [{ start: `${input.arguments.month}-05`, end: `${input.arguments.month}-05`, resumed: true }] }] } });
+    return base(input);
+  });
+  mount();
+  await screen.findByRole('radio', { name: 'Calendar' });
+  fireEvent.click(screen.getByRole('radio', { name: 'Calendar' }));
+  expect(screen.queryByLabelText('Updated')).not.toBeInTheDocument();
+  fireEvent.click(await screen.findByRole('button', { name: /Example · Task one/ }));
+  expect(await screen.findByRole('heading', { name: 'Task one' })).toBeInTheDocument();
+});
+
+test('Calendar scheduled toggle starts on, includes running schedules, and never filters Board', async () => {
+  tasks = [{ ...task('one', 'working'), scheduled: true }, task('two', 'needs_input')];
+  const base = server.call.getMockImplementation()!;
+  server.call.mockImplementation(input => {
+    if (input.name === 'taskchef_app_calendar') return Promise.resolve({ structuredContent: { month: input.arguments.month, timeZone: input.arguments.timeZone, chats: tasks.map(item => ({ id: item.id, incomplete: false, segments: [{ start: `${input.arguments.month}-05`, end: `${input.arguments.month}-05`, resumed: false }] })) } });
+    return base(input);
+  });
+  mount();
+  await screen.findByRole('button', { name: 'Task one' });
+  expect(screen.queryByRole('button', { name: 'Scheduled' })).not.toBeInTheDocument();
+  fireEvent.click(screen.getByRole('radio', { name: 'Calendar' }));
+  expect(await screen.findByRole('button', { name: 'Example · Task one' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: 'Scheduled' })).toHaveAttribute('aria-pressed', 'true');
+  fireEvent.click(screen.getByRole('button', { name: 'Scheduled' }));
+  expect(screen.queryByRole('button', { name: 'Example · Task one' })).not.toBeInTheDocument();
+  expect(screen.getByRole('button', { name: 'Example · Task two' })).toBeInTheDocument();
+  fireEvent.change(screen.getByRole('combobox', { name: 'Project' }), { target: { value: '/Example' } });
+  expect(screen.getByRole('button', { name: 'Task two' })).toBeInTheDocument();
+  expect(screen.queryByRole('button', { name: 'Example · Task two' })).not.toBeInTheDocument();
+  fireEvent.click(screen.getByRole('radio', { name: 'Board' }));
+  expect(screen.getByRole('button', { name: 'Task one' })).toBeInTheDocument();
+  expect(screen.queryByRole('button', { name: 'Scheduled' })).not.toBeInTheDocument();
+  fireEvent.click(screen.getByRole('radio', { name: 'Calendar' }));
+  expect(screen.getByRole('button', { name: 'Scheduled' })).toHaveAttribute('aria-pressed', 'false');
+  fireEvent.click(screen.getByRole('button', { name: 'Scheduled' }));
+  expect(await screen.findByRole('button', { name: 'Task one' })).toBeInTheDocument();
+});
+
+test('Calendar skips unchanged polls and rereads on data changes, explicit refresh, and date rollover', async () => {
+  const interval = vi.spyOn(window, 'setInterval');
+  let revision = 1, cacheHit = true;
+  const base = server.call.getMockImplementation()!;
+  server.call.mockImplementation(input => {
+    if (input.name === 'taskchef_app_snapshot') return Promise.resolve({ structuredContent: { snapshot: { tasks, projects: [], healthy: true, revision, scan: { cacheHit } }, settings: visibility } });
+    if (input.name === 'taskchef_app_calendar') return Promise.resolve({ structuredContent: { month: input.arguments.month, timeZone: input.arguments.timeZone, chats: [{ id: 'one', incomplete: false, segments: [{ start: `${input.arguments.month}-05`, end: `${input.arguments.month}-05`, resumed: false }] }] } });
+    return base(input);
+  });
+  const calendarReads = () => server.call.mock.calls.filter(([input]) => input.name === 'taskchef_app_calendar').length;
+  mount();
+  await screen.findByRole('button', { name: 'Task one' });
+  fireEvent.click(screen.getByRole('radio', { name: 'Calendar' }));
+  await screen.findByRole('button', { name: 'Example · Task one' });
+  expect(calendarReads()).toBe(1);
+  const poll = interval.mock.calls.find(([, delay]) => delay === 5000)![0] as () => void;
+  await act(async () => { poll(); });
+  expect(calendarReads()).toBe(1);
+  cacheHit = false;
+  await act(async () => { poll(); });
+  expect(calendarReads()).toBe(2);
+  cacheHit = true; revision += 1;
+  await act(async () => { poll(); });
+  expect(calendarReads()).toBe(3);
+  await act(async () => { fireEvent.click(screen.getByRole('button', { name: 'Refresh' })); });
+  expect(calendarReads()).toBe(4);
+  vi.spyOn(Date, 'now').mockReturnValue(Date.now() + 86400000);
+  await act(async () => { poll(); });
+  expect(calendarReads()).toBe(5);
+});
+
+test('shared filters and the Calendar schedule preference survive reopening', async () => {
+  tasks = [{ ...task('one', 'working'), scheduled: true, observed: { pinned: true, archive: false, lastTurnEvent: 'inProgress', lastTurnEventAt: null, recentFileActivity: false } }];
+  const base = server.call.getMockImplementation()!;
+  server.call.mockImplementation(input => {
+    if (input.name === 'taskchef_app_calendar') return Promise.resolve({ structuredContent: { month: input.arguments.month, timeZone: input.arguments.timeZone, chats: [{ id: 'one', incomplete: false, segments: [{ start: `${input.arguments.month}-05`, end: `${input.arguments.month}-05`, resumed: false }] }] } });
+    return base(input);
+  });
+  const first = render(<TaskChefApp />);
+  await screen.findByRole('button', { name: 'Task one' });
+  fireEvent.change(screen.getByRole('combobox', { name: 'Project' }), { target: { value: '/Example' } });
+  fireEvent.change(screen.getByLabelText('Search Chats'), { target: { value: 'one' } });
+  fireEvent.change(screen.getByRole('combobox', { name: 'Updated' }), { target: { value: '7d' } });
+  fireEvent.click(screen.getByRole('button', { name: 'Pinned' }));
+  fireEvent.click(screen.getByRole('radio', { name: 'Calendar' }));
+  fireEvent.click(screen.getByRole('button', { name: 'Scheduled' }));
+  first.unmount();
+  // Loading must not clear the saved project before inventory arrives.
+  let load!: (value: unknown) => void;
+  const active = server.call.getMockImplementation()!;
+  server.call.mockImplementationOnce(input => input.name === 'taskchef_app_snapshot' ? new Promise(resolve => { load = resolve; }) : active(input));
+  mount();
+  expect(window.localStorage.getItem('taskchef.app.filter.project')).toBe(JSON.stringify('/Example'));
+  expect(screen.getByLabelText('Search Chats')).toHaveValue('one');
+  expect(screen.getByRole('combobox', { name: 'Updated' })).toHaveValue('7d');
+  expect(screen.getByRole('button', { name: 'Pinned' })).toHaveAttribute('aria-pressed', 'true');
+  await waitFor(() => expect(load).toBeTypeOf('function'));
+  await act(async () => { load({ structuredContent: { settings: visibility, snapshot: { tasks, projects: [], healthy: true } } }); });
+  expect(screen.getByRole('combobox', { name: 'Project' })).toHaveValue('/Example');
+  fireEvent.click(screen.getByRole('radio', { name: 'Calendar' }));
+  expect(screen.getByRole('button', { name: 'Scheduled' })).toHaveAttribute('aria-pressed', 'false');
+  expect(await screen.findByText(/No recorded work matches/)).toBeInTheDocument();
+  fireEvent.click(screen.getByRole('button', { name: 'Scheduled' }));
+  expect(await screen.findByRole('button', { name: 'Task one' })).toBeInTheDocument();
+});
+
+test('unavailable preference storage leaves filters usable', async () => {
+  vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => { throw new Error('Unavailable'); });
+  vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => { throw new Error('Unavailable'); });
+  mount();
+  await screen.findByRole('button', { name: 'Task one' });
+  fireEvent.change(screen.getByLabelText('Search Chats'), { target: { value: 'missing' } });
+  expect(screen.queryByRole('button', { name: 'Task one' })).not.toBeInTheDocument();
+  fireEvent.click(screen.getByRole('radio', { name: 'Usage' }));
+  expect(await screen.findByRole('button', { name: '30 days' })).toHaveAttribute('aria-pressed','true');
+});