taskchef 9.4.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

@@ -1,12 +1,13 @@
 import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
-import { afterEach, expect, test, vi } from 'vitest';
+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 This month, changes range, isolates projects, and exposes exact day values',async()=>{
+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:'mtd',timeZone:expect.any(String)});
+ 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)}));
@@ -39,7 +40,7 @@ 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:'mtd',timeZone:expect.any(String)});
+ 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();
 });
@@ -63,7 +64,7 @@ test('Refresh forces one new read and shows measured progress while cached 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:'mtd',timeZone:expect.any(String),force:true});await waitFor(()=>expect(screen.queryByRole('progressbar')).toBeNull());
+ 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());
@@ -78,7 +79,7 @@ test('legend hover and focus highlight only matching project bars and reset on l
  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:'mtd',timeZone:expect.any(String),rescan:true}));
+ 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()=>{
@@ -101,3 +102,23 @@ test('only the current local day has dashed bars and token segment; a completed
   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

@@ -1,3 +1,4 @@
+import { usePreference } from "./preferences";
 import { useEffect, useRef, useState } from "react";
 
 export interface UsageData {
@@ -18,7 +19,7 @@ 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] = useState<UsageRange>("mtd");
+  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);

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

@@ -681,3 +681,124 @@ test("Usage opens on demand and returns to Board without keeping its filters vis
   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');
+});

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

@@ -1,7 +1,9 @@
+import { usePreference } from "./preferences";
+import { CalendarView, type CalendarData, type CalendarRequest } from "./CalendarView";
 import { cachedImageLoader } from "../../ui/image-cache";
 import { App } from "@modelcontextprotocol/ext-apps";
 import { ActionIcon, Alert, Box, Button, Group, MantineProvider, Modal, createTheme, Paper, SegmentedControl, Select, Stack, Text, TextInput, Title } from "@mantine/core";
-import { IconPin, IconRefresh, IconSearch, IconSettings } from "@tabler/icons-react";
+import { IconCalendarEvent, IconPin, IconRefresh, IconSearch, IconSettings } from "@tabler/icons-react";
 import { createRoot } from "react-dom/client";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { DashboardSnapshot, Task, Project } from "../../ui/types";
@@ -41,6 +43,7 @@ async function call<T>(name: string, args: Record<string, unknown> = {}): Promis
   return result.structuredContent as T;
 }
 
+const readCalendar: CalendarRequest = args => call<CalendarData>("taskchef_app_calendar", args);
 const readUsage = (args: ReturnType<typeof usageRequest>) => call<UsageResponse>("taskchef_app_usage", args);
 
 const THEME_KEY = "taskchef.app.theme";
@@ -116,7 +119,7 @@ export function TaskChefApp() {
   const [scan, setScan] = useState<ScanStats | null>(null);
   const [selected, setSelected] = useState<Task | null>(null);
   const [opened, setOpened] = useState(false);
-  const [pinnedOnly, setPinnedOnly] = useState(false);
+  const [pinnedOnly, setPinnedOnly] = usePreference("filter.pinned");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -158,12 +161,13 @@ export function TaskChefApp() {
       receiveNotifications(result.notifications);
     } catch (notificationError) { setError(`${String(cause)}. ${String(notificationError)}`); }
   }
-  const [project, setProject] = useState("");
-  const [search, setSearch] = useState("");
-  const [date, setDate] = useState("all");
+  const [project, setProject] = usePreference("filter.project");
+  const [search, setSearch] = usePreference("filter.search");
+  const [showScheduled, setShowScheduled] = usePreference("calendar.scheduled");
+  const [date, setDate] = usePreference("filter.updated");
   const [status, setStatus] = useState("");
   // Keep the legacy list hidden; Board and Usage share the native shell.
-  const [view, setView] = useState<"board" | "list" | "usage">("board");
+  const [view, setView] = useState<"board" | "list" | "usage" | "calendar">("board");
   const [usageRefreshKey, setUsageRefreshKey] = useState(0);
   const [completedLimit, setCompletedLimit] = useState(5);
   const [archivedLimit, setArchivedLimit] = useState(5);
@@ -176,6 +180,7 @@ export function TaskChefApp() {
   const detailRequestVersion = useRef(0);
   const refreshVersion = useRef(0);
   const revisionRef = useRef<number | null>(null);
+  const calendarHistoryRevision = useRef(0);
   const displayModeRef = useRef(displayMode);
   const previousDisplayMode = useRef(displayMode);
   displayModeRef.current = displayMode;
@@ -210,6 +215,7 @@ export function TaskChefApp() {
         return;
       }
     } else { setScan(data.scan); setError(null); }
+    if ((data.snapshot?.scan ?? data.scan)?.cacheHit === false) calendarHistoryRevision.current += 1;
     setNow(Date.now());
     const selectedTask = selectedRef.current;
     if (!selectedTask || initialSelection !== selectionVersion.current) return;
@@ -299,7 +305,6 @@ export function TaskChefApp() {
   }, [displayMode, refresh]);
   const eligibleTasks = useMemo(() => tasks.filter((task) => eligibleForView(task, showCli, showArchived, showExec)), [tasks, showCli, showArchived, showExec]);
   useEffect(() => {
-    setProject("");
     setCompletedLimit(5);
     setArchivedLimit(5);
     if (!showArchived) setStatus((current) => current === "archived" ? "" : current);
@@ -330,12 +335,13 @@ export function TaskChefApp() {
       { label: "No project", value: "projectless" },
     ];
   }, [eligibleTasks, registeredProjects]);
-  useEffect(() => { if (project && !projects.some((item) => item.value === project)) setProject(""); }, [project, projects]);
+  useEffect(() => { if (!loading && !error && project && !projects.some((item) => item.value === project)) setProject(""); }, [project, projects, loading, error]);
   const projectTasks = useMemo(() => eligibleTasks.filter((task) => !project || (task.project.id || task.project.path || task.project.name) === project), [eligibleTasks, project]);
   const boardTasks: Task[] = useMemo(() => {
     const terms = search.trim().toLocaleLowerCase().split(/\s+/).filter(Boolean);
-    return filterTasks(projectTasks, { date, now }).filter((task: Task) => {
+    return filterTasks(projectTasks, { date: view === "calendar" ? "all" : date, now }).filter((task: Task) => {
       if (pinnedOnly && !task.observed?.pinned) return false;
+      if (view === "calendar" && !showScheduled && task.scheduled) return false;
       const content = [
         task.title, task.promptExcerpt ?? "", task.replyExcerpt ?? "", task.project.name,
         ...(task.project.githubRepos ?? []),
@@ -343,7 +349,7 @@ export function TaskChefApp() {
       ].join("\n").toLocaleLowerCase();
       return terms.every((term) => content.includes(term));
     });
-  }, [projectTasks, date, now, search, pinnedOnly]);
+  }, [projectTasks, date, now, search, pinnedOnly, view, showScheduled]);
   const visible = useMemo(() => boardTasks.filter((task) => !status || (task.status ?? "unverified") === status), [boardTasks, status]);
   const statusOptions = [{ label: `All ${boardTasks.length}`, value: "" }, ...lanes.map(({ label, status: value }) => ({
     label: `${label} ${boardTasks.filter((task) => task.status === value).length}`, value: value ?? "unverified",
@@ -424,12 +430,13 @@ export function TaskChefApp() {
       <Box className={`taskchef-app-shell${displayMode === "inline" ? " taskchef-app-inline" : ""}`}>
         <header className="taskchef-app-header">
           <Group className="taskchef-app-brand" gap="xs" wrap="nowrap"><img alt="" aria-hidden className="taskchef-app-mark" src={brandIcon} /><Title order={1}>TaskChef</Title></Group>
-          {displayMode !== "inline" && <SegmentedControl className="taskchef-app-view" aria-label="View" data={[{ label: "Board", value: "board" }, { label: "Usage", value: "usage" }]} value={view} onChange={value => setView(value === "usage" ? "usage" : "board")} size="xs" />}
+          {displayMode !== "inline" && <SegmentedControl className="taskchef-app-view" aria-label="View" withItemsBorders={false} data={[{ label: "Board", value: "board" }, { label: "Calendar", value: "calendar" }, { label: "Usage", value: "usage" }]} value={view} onChange={value => setView(value === "usage" || value === "calendar" ? value : "board")} size="xs" />}
           {displayMode !== "inline" && view !== "usage" && <Group className="taskchef-app-filters" gap="xs" wrap="wrap">
             <ProjectPicker data={projects} onChange={(value) => { setProject(value); setCompletedLimit(5); }} value={project} />
-            <Select className="taskchef-app-date" 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} size="xs" />
+            {view !== "calendar" && <Select className="taskchef-app-date" 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} size="xs" />}
             <TextInput className="taskchef-app-search" aria-label="Search Chats" placeholder="Search Chats" type="search" leftSection={<IconSearch size={14} aria-hidden />} value={search} onChange={(event) => { setSearch(event.currentTarget.value); setCompletedLimit(5); setArchivedLimit(5); }} size="xs" />
-            <Button className="taskchef-app-pinned" aria-pressed={pinnedOnly} title="Show only pinned chats" size="xs" variant={pinnedOnly ? "filled" : "outline"} leftSection={<IconPin size={14} aria-hidden />} onClick={() => { setPinnedOnly(value => !value); setCompletedLimit(5); setArchivedLimit(5); }}>Pinned</Button>
+            <Button className="taskchef-app-toggle" aria-pressed={pinnedOnly} title="Show only pinned chats" size="xs" variant={pinnedOnly ? "filled" : "outline"} leftSection={<IconPin size={14} aria-hidden />} onClick={() => { setPinnedOnly(value => !value); setCompletedLimit(5); setArchivedLimit(5); }}>Pinned</Button>
+            {view === "calendar" && <Button className="taskchef-app-toggle" leftSection={<IconCalendarEvent size={14} aria-hidden />} aria-pressed={showScheduled} title="Show scheduled chats" size="xs" variant={showScheduled ? "filled" : "outline"} onClick={() => setShowScheduled(value => !value)}>Scheduled</Button>}
           </Group>}
           <Group className="taskchef-app-actions" gap="xs" wrap="nowrap">
           <GitHubConnection hideTrigger openSignal={githubOpenSignal} auth={githubAuth} request={githubRequest} openLink={githubOpenLink} refresh={githubRefresh} openSettings={githubOpenSettings} />
@@ -454,7 +461,7 @@ export function TaskChefApp() {
           {view === "list" && <Paper className="taskchef-toolbar" radius={0}>
             <Box className="taskchef-app-status"><SegmentedControl aria-label="Status" data={statusOptions} onChange={setStatus} size="xs" value={status} withItemsBorders={false} /></Box>
           </Paper>}
-          {view === "usage" ? <UsageView key={`${showCli}:${showExec}`} request={readUsage} refreshKey={usageRefreshKey} /> : <>
+          {view === "calendar" ? <CalendarView request={readCalendar} showProject={!project} tasks={boardTasks} refreshKey={`${revisionRef.current}:${calendarHistoryRevision.current}:${new Date(now).toDateString()}:${usageRefreshKey}:${showCli}:${showExec}:${showArchived}`} onOpenDetail={task => void select(task)} /> : view === "usage" ? <UsageView key={`${showCli}:${showExec}`} request={readUsage} refreshKey={usageRefreshKey} /> : <>
           {!!scan?.scheduleErrors && <Alert color="yellow" role="alert">{scan.scheduleErrors} schedule files could not be read; schedule placement may be incomplete.</Alert>}
           {view === "list" && <Text aria-live="polite" className="taskchef-results-summary" id="task-results-summary">Tasks: {visible.length} of {eligibleTasks.length}</Text>}
           {error && <Alert color="red" role="alert" mt="sm">{error}</Alert>}

package/src/mcp-app/react/preferences.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+
+type Preferences = {
+  "filter.project": string;
+  "filter.search": string;
+  "filter.updated": string;
+  "filter.pinned": boolean;
+  "calendar.scheduled": boolean;
+  "usage.range": "7d" | "30d" | "90d" | "mtd" | "last-month";
+};
+const defaults: Preferences = {
+  "filter.project": "", "filter.search": "", "filter.updated": "all",
+  "filter.pinned": false, "calendar.scheduled": true, "usage.range": "30d",
+};
+function readPreference<K extends keyof Preferences>(key: K): Preferences[K] {
+  try {
+    const value: unknown = JSON.parse(window.localStorage.getItem(`taskchef.app.${key}`) ?? "null");
+    if (typeof value !== typeof defaults[key]) return defaults[key];
+    if (key === "filter.updated" && !["all", "24h", "7d"].includes(value as string)) return defaults[key];
+    if (key === "usage.range" && !["7d", "30d", "90d", "mtd", "last-month"].includes(value as string)) return defaults[key];
+    return value as Preferences[K];
+  } catch { return defaults[key]; }
+}
+
+// The six view preferences share the same local storage behavior as Appearance.
+// Unavailable storage leaves controls usable for the current mounted view.
+export function usePreference<K extends keyof Preferences>(key: K) {
+  const [value, setValue] = useState<Preferences[K]>(() => readPreference(key));
+  useEffect(() => {
+    try { window.localStorage.setItem(`taskchef.app.${key}`, JSON.stringify(value)); }
+    catch { /* Keep the user's current choice in memory. */ }
+  }, [key, value]);
+  return [value, setValue] as const;
+}

package/src/mcp-app/react/styles.css

@@ -29,7 +29,7 @@ body { background: var(--taskchef-page); }
 .taskchef-app-view { grid-area: view; width: max-content; }
 .taskchef-app-filters { grid-area: filters; border-inline-start: 1px solid var(--taskchef-border); padding-inline-start: 12px; min-width: 0; width: min(100%, 680px); }
 .taskchef-app-filters .mantine-InputWrapper-root { flex: 1 1 100px; min-width: 100px; }
-.taskchef-app-pinned { flex: 0 0 auto; white-space: nowrap; }
+.taskchef-app-toggle { flex: 0 0 auto; white-space: nowrap; }
 .taskchef-app-filters .taskchef-app-date { flex: 0 0 132px; }
 @media (max-width: 1000px) {
   .taskchef-app-header { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand view actions" "filters filters filters"; gap: 8px; }
@@ -194,9 +194,9 @@ body { background: var(--taskchef-page); }
 .next-appearance-panel { background: var(--taskchef-elevated); }
 
 :root[data-taskchef-palette] .mantine-Button-root[data-variant="filled"] { color: var(--taskchef-surface); }
-:root[data-taskchef-palette] .taskchef-app-pinned { background: transparent; color: var(--taskchef-text); border-color: var(--taskchef-border); }
-:root[data-taskchef-palette] .taskchef-app-pinned:hover { background: var(--taskchef-hover); }
-:root[data-taskchef-palette] .taskchef-app-pinned[aria-pressed="true"] { background: var(--taskchef-accent); color: var(--taskchef-surface); border-color: var(--taskchef-accent); }
+:root[data-taskchef-palette] .taskchef-app-toggle { background: transparent; color: var(--taskchef-text); border-color: var(--taskchef-border); }
+:root[data-taskchef-palette] .taskchef-app-toggle:hover { background: var(--taskchef-hover); }
+:root[data-taskchef-palette] .taskchef-app-toggle[aria-pressed="true"] { background: var(--taskchef-accent); color: var(--taskchef-surface); border-color: var(--taskchef-accent); }
 :root[data-taskchef-palette] .taskchef-board-card:focus-visible { outline: 2px solid var(--taskchef-focus); outline-offset: 2px; }
 
 :root[data-taskchef-palette] body { font-family: var(--taskchef-font); }
@@ -268,3 +268,31 @@ body { background: var(--taskchef-page); }
 .usage-progress progress { display: block; width: 100%; height: 6px; accent-color: var(--taskchef-accent); }
 .usage-chart [data-project] { transition: opacity 120ms ease; }
 @media (prefers-reduced-motion: reduce) { .usage-chart [data-project] { transition: none; } }
+
+.calendar-view { padding: 16px; color: var(--mantine-color-text); }
+.calendar-navigation { display: flex; justify-content: center; align-items: center; gap: 14px; }
+.calendar-navigation h2 { margin: 0; font-size: 1.15rem; min-width: 170px; text-align: center; }
+.calendar-navigation button { font-size: 26px; padding: 0 12px; }
+.calendar-view button { color: inherit; cursor: pointer; background: transparent; border: 1px solid var(--mantine-color-default-border); border-radius: 5px; }
+.calendar-view button:disabled { opacity: .35; cursor: default; }
+.calendar-view button:focus-visible { outline: 2px solid var(--mantine-primary-color-filled); outline-offset: 2px; }
+.calendar-scroll { overflow-x: auto; border: 1px solid var(--mantine-color-default-border); border-radius: 6px; margin-top: 14px; }
+.calendar-month { min-width: 700px; }
+.calendar-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--mantine-color-default); font-size: 12px; font-weight: 600; }
+.calendar-weekdays > div { padding: 10px; }
+.calendar-week { border-top: 1px solid var(--mantine-color-default-border); }
+.calendar-week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; padding-bottom: 8px; row-gap: 4px; }
+.calendar-day-backgrounds { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); pointer-events: none; }
+.calendar-day-backgrounds > div + div { border-left: 1px solid var(--mantine-color-default-border); }
+.calendar-weekend { background: color-mix(in srgb, var(--mantine-color-dimmed) 5%, transparent); }
+.calendar-day { position: relative; padding: 5px 9px; font-size: 12px; }
+.calendar-outside { opacity: .45; }
+.calendar-today time { border-bottom: 2px solid var(--mantine-primary-color-filled); font-weight: 700; }
+.calendar-view .calendar-bar { position: relative; margin: 0 4px; padding: 3px 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; font: inherit; font-size: 12px; border-left-width: 3px; }
+.calendar-view .calendar-bar:hover { filter: brightness(1.15); }
+.calendar-view .calendar-more { margin: 3px 8px 8px; padding: 3px 8px; font-size: 12px; }
+@media (max-width: 600px) { .calendar-view { padding: 10px; } }
+
+.calendar-navigation button, .calendar-navigation button:disabled { opacity: 0; }
+.calendar-navigation:hover button, .calendar-navigation:focus-within button { opacity: 1; }
+.calendar-navigation:hover button:disabled, .calendar-navigation:focus-within button:disabled { opacity: .35; }

package/src/mcp-app.js

@@ -212,6 +212,15 @@ export function registerTaskChefApp(server, {
     }
     return { structuredContent: { snapshot, settings: publicSettings(settings), settingsUrl, notifications, github: githubAuth, version: TASKCHEF_VERSION }, content: [] };
   });
+  server.registerTool("taskchef_app_calendar", {
+    title: "Read chat work calendar", description: "Read recorded turn dates for the selected month. Full idle days split chat bars.",
+    inputSchema: { month: z.string().regex(/^\d{4}-(?:0[1-9]|1[0-2])$/), timeZone: z.string().min(1).max(100) }, _meta: appOnly,
+    annotations: { readOnlyHint: true, openWorldHint: false },
+  }, async ({ month, timeZone }) => {
+    new Intl.DateTimeFormat("en", { timeZone }).format();
+    const data = await scanner.calendarHistory({ month, timeZone, settings: await readSettings() });
+    return { structuredContent: data, content: [] };
+  });
   server.registerTool("taskchef_app_usage", {
     title: "Read usage history", description: "Aggregate timestamped local token usage and API-equivalent cost by day and project.",
     inputSchema: { range: z.enum(["7d", "30d", "90d", "mtd", "last-month"]), timeZone: z.string().min(1).max(100), force: z.boolean().optional(), rescan: z.boolean().optional() }, _meta: appOnly,