taskchef 9.3.0 → 9.5.0

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";
@@ -14,6 +16,7 @@ import { NextNotificationCenter, type NextNotification, type NextNotificationSta
 import { GitHubConnection, type GitHubAuth } from "./GitHubConnection";
 import { AppearancePicker } from "./AppearancePicker";
 import { savedVisualTheme, themeVariables, visualTheme, VISUAL_THEME_KEY } from "./themes";
+import { UsageView, type UsageResponse, type usageRequest } from "./UsageView";
 import { ProjectPicker } from "./ProjectPicker";
 import brandIcon from "../../../assets/taskchef-dark.svg";
 import "@mantine/core/styles.css";
@@ -40,6 +43,9 @@ 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";
 type ThemeChoice = "dark" | "light" | "system";
 function initialTheme(): ThemeChoice {
@@ -113,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);
 
@@ -155,12 +161,14 @@ 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 list implementation for later, but expose only Board. Ignore old saved List choices.
-  const [view, setView] = useState<"board" | "list">("board");
+  // Keep the legacy list hidden; Board and Usage share the native shell.
+  const [view, setView] = useState<"board" | "list" | "usage" | "calendar">("board");
+  const [usageRefreshKey, setUsageRefreshKey] = useState(0);
   const [completedLimit, setCompletedLimit] = useState(5);
   const [archivedLimit, setArchivedLimit] = useState(5);
   const [now, setNow] = useState(() => Date.now());
@@ -172,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;
@@ -206,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;
@@ -295,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);
@@ -326,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 ?? []),
@@ -339,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",
@@ -420,11 +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" && <Group className="taskchef-app-filters" gap="xs" wrap="wrap">
+          {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} />
@@ -433,7 +445,7 @@ export function TaskChefApp() {
             try { await call("taskchef_app_open_settings", {}); }
             catch (cause) { await actionError("settings", cause); }
           })()} variant="subtle"><IconSettings size={17} /></ActionIcon>
-          <ActionIcon aria-label="Refresh" onClick={() => void refresh(true).catch((cause) => setError(String(cause)))} variant="subtle"><IconRefresh size={17} /></ActionIcon>
+          <ActionIcon aria-label="Refresh" onClick={() => { setUsageRefreshKey(value => value + 1); void refresh(true).catch((cause) => setError(String(cause))); }} variant="subtle"><IconRefresh size={17} /></ActionIcon>
           <AppearancePicker value={themeChoice} onChange={chooseTheme} visualThemeId={selectedTheme.id} appearance={colorScheme} onVisualThemeChange={chooseVisualTheme} />
           </Group>
         </header>
@@ -449,6 +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 === "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>}
@@ -457,6 +470,7 @@ export function TaskChefApp() {
               {visible.map((task) => <TaskCard key={task.id} onOpenCodex={(item) => void openChat(item)} onOpenDetail={(item) => void select(item)} task={task} />)}
               {visible.length === 0 && <Paper className="taskchef-empty" p="lg" ta="center" withBorder><Title order={2} size="h5">No tasks match these filters</Title><Text c="dimmed" size="sm">Choose a different project, update window, or status.</Text></Paper>}
             </Stack>)}
+          </>}
         </main>
         </>}
         {taskchefVersion && displayMode !== "inline" && <footer className="taskchef-app-version" aria-label="TaskChef version">v{taskchefVersion}</footer>}

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

@@ -15,7 +15,7 @@
 html, body, #root { min-width: 0; min-height: 100%; }
 body { background: var(--taskchef-page); }
 .taskchef-app-shell { min-height: 100vh; background: var(--taskchef-page); }
-.taskchef-app-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand filters actions"; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--taskchef-border); }
+.taskchef-app-header { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "brand view filters actions"; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--taskchef-border); }
 .taskchef-app-brand { grid-area: brand; }
 .taskchef-app-actions { grid-area: actions; }
 .taskchef-app-header h1 { color: var(--taskchef-text); font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
@@ -26,14 +26,18 @@ body { background: var(--taskchef-page); }
 .taskchef-app-main-list { max-width: 624px; margin-inline: auto; }
 .taskchef-app-main .taskchef-toolbar { margin-bottom: 8px; padding-bottom: 10px; }
 .taskchef-app-main .mantine-SegmentedControl-root { max-width: 100%; }
-.taskchef-app-view { width: max-content; }
-.taskchef-app-filters { grid-area: filters; min-width: 0; width: min(100%, 680px); }
+.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: 650px) {
-  .taskchef-app-header { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand actions" "filters filters"; gap: 8px; }
-  .taskchef-app-filters { width: 100%; }
+@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; }
+  .taskchef-app-filters { width: 100%; border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--taskchef-border); padding-top: 8px; }
+}
+@media (max-width: 500px) {
+  .taskchef-app-header { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "brand view" "actions actions" "filters filters"; }
+  .taskchef-app-actions { justify-self: end; }
 }
 .taskchef-app-status { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
 .taskchef-app-status .mantine-SegmentedControl-root { width: max-content; min-width: max-content; }
@@ -107,7 +111,7 @@ body { background: var(--taskchef-page); }
 .taskchef-reply-cover { background: var(--taskchef-page); }
 
 @media (max-width: 380px) {
-  .taskchef-app-header { grid-template-areas: "brand brand" "actions actions" "filters filters"; }
+  .taskchef-app-header { grid-template-areas: "brand view" "actions actions" "filters filters"; }
   .taskchef-app-inline .taskchef-app-header { grid-template-areas: "brand brand" "actions actions"; }
   .taskchef-app-actions { justify-self: end; }
 }
@@ -190,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); }
@@ -221,3 +225,74 @@ body { background: var(--taskchef-page); }
 .taskchef-turn-error-compact { gap: 6px; margin-top: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: var(--mantine-font-size-xs); }
 
 .taskchef-turn-error-compact > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
+
+.usage-view { max-width: 1100px; margin: 0 auto; color: var(--taskchef-text); }
+.usage-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
+.usage-view button:disabled { opacity: .5; cursor: default; }
+.usage-view h2 { font-size: 24px; margin: 4px 0 8px; }
+.usage-view h3 { font-size: 14px; margin: 0 0 12px; }
+.usage-view p, .usage-view small { color: var(--taskchef-muted); font-size: 12px; line-height: 1.5; margin: 8px 0; }
+.usage-ranges, .usage-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0; }
+.usage-view button { font: inherit; font-size: 12px; color: var(--taskchef-text); background: transparent; border: 1px solid var(--taskchef-border); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
+.usage-view button:hover, .usage-view button[aria-pressed="true"] { background: var(--taskchef-hover); border-color: var(--taskchef-muted); }
+.usage-view button:focus-visible, .usage-chart g:focus-visible { outline: 2px solid var(--taskchef-focus); outline-offset: 2px; }
+.usage-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
+.usage-totals article, .usage-panel { padding: 18px; border: 1px solid var(--taskchef-border); border-radius: 10px; background: var(--taskchef-surface); min-width: 0; }
+.usage-totals strong { font-size: 28px; font-weight: 600; }
+.usage-panel { margin: 16px 0; }
+.usage-legend { font-size: 12px; gap: 12px; }
+.usage-legend span, .usage-legend button { display: inline-flex; align-items: center; gap: 6px; }
+.usage-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
+.usage-legend button { max-width: 100%; overflow-wrap: anywhere; text-align: left; }
+.usage-token-key, .usage-chart .usage-token-axis { color: light-dark(#a54d2e, #efb18b); fill: light-dark(#a54d2e, #efb18b); }
+.usage-token-line { stroke: light-dark(#a54d2e, #efb18b); stroke-width: 2.5; fill: none; pointer-events: none; }
+.usage-token-dot { fill: light-dark(#a54d2e, #efb18b); pointer-events: none; }
+.usage-chart-scroll { overflow-x: auto; }
+.usage-chart { width: 100%; min-width: 500px; display: block; font: 11px var(--taskchef-font, sans-serif); fill: var(--taskchef-muted); }
+.usage-grid { stroke: var(--taskchef-border); }
+.usage-chart-detail { min-height: 18px; }
+.usage-ranking { overflow-x: auto; }
+.usage-ranking table { width: 100%; border-collapse: collapse; font-size: 12px; }
+.usage-ranking th, .usage-ranking td { padding: 6px; text-align: right; font-weight: normal; }
+.usage-ranking th:first-child { width: 70%; text-align: left; }
+.usage-ranking td { white-space: nowrap; font-variant-numeric: tabular-nums; }
+.usage-ranking thead { color: var(--taskchef-muted); }
+.usage-ranking button { width: 100%; display: flex; align-items: center; gap: 12px; border-color: transparent; text-align: left; }
+.usage-ranking button > span:first-child { width: 45%; overflow-wrap: anywhere; }
+.usage-rank-track { flex: 1; height: 8px; border-radius: 2px; background: var(--taskchef-border); overflow: hidden; }
+.usage-rank-track > span { display: block; height: 100%; }
+.usage-warning { padding: 10px; border: 1px solid var(--taskchef-border); border-radius: 6px; }
+@media (max-width: 500px) { .usage-totals { grid-template-columns: 1fr; gap: 10px; } .usage-panel { padding: 12px; } .usage-rank-track { display: none; } .usage-ranking button > span:first-child { width: 100%; } }
+
+.usage-progress { margin: 16px 0; }
+.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

@@ -1,3 +1,4 @@
+import { aggregateUsage } from "./usage-analytics.js";
 import { mkdir, readFile } from "node:fs/promises";
 import { homedir } from "node:os";
 import { basename, dirname, isAbsolute, join } from "node:path";
@@ -78,6 +79,7 @@ export function registerTaskChefApp(server, {
   let ipcErrorReported = false;
   const turnUsageCache = new Map();
   const usagePending = new Map();
+  const analyticsJobs = new Map();
   async function boardSnapshot(settings, force = false, scope = { date: "all", taskIds: [] }) {
     const databaseSnapshot = await scanner.refresh({ force });
     await liveState.refresh(databaseSnapshot.healthy === false ? [] : databaseSnapshot.tasks);
@@ -210,6 +212,50 @@ 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,
+    annotations: { readOnlyHint: true, openWorldHint: false },
+  }, async ({ range, timeZone, force, rescan }) => {
+    new Intl.DateTimeFormat("en", { timeZone }).format();
+    const settings = await readSettings();
+    // History is independent of chart range and timezone. Range changes query
+    // this shared snapshot; only expiry or explicit Refresh starts another read.
+    const key = JSON.stringify([settings.showCli, settings.showExec]);
+    let job = analyticsJobs.get(key);
+    if ((force || rescan) && job?.pending) { job.refreshAgain = true; job.rescan ||= rescan; }
+    if (!job || (!job.pending && (force || rescan || (!job.error && Date.now() - job.finishedAt >= 60_000)))) {
+      job = { families: job?.families ?? null, error: null, finishedAt: job?.finishedAt ?? 0,
+        pending: true, refreshAgain: false, rescan: !!rescan, progress: { completed: 0, total: 0 } };
+      analyticsJobs.set(key, job);
+      const current = job;
+      Promise.resolve().then(async () => {
+        do {
+          current.refreshAgain = false;
+          const rebuild = current.rescan;
+          current.rescan = false;
+          const families = await scanner.usageHistory({ settings, rescan: rebuild, onProgress: progress => { current.progress = progress; } });
+          current.families = families;
+          current.finishedAt = Date.now();
+        } while (current.refreshAgain);
+      }).catch(error => { current.error = error; }).finally(() => { current.pending = false; });
+    }
+    if (job.error) throw job.error;
+    const data = job.families ? { ...aggregateUsage(job.families, { range, timeZone }),
+      updatedAt: new Date(job.finishedAt).toISOString(),
+      ...(job.pending ? { refreshing: true, progress: job.progress } : {}) }
+      : { loading: true, progress: job.progress };
+    return { structuredContent: data, content: [] };
+  });
   server.registerTool("taskchef_app_task", {
     title: "Read Codex chat metadata", description: "Read one local chat's metadata and its latest recorded request and response.",
     inputSchema: { taskId: taskIdSchema, refreshGithub: z.boolean().optional() }, _meta: appOnly,

package/src/usage-analytics.js

@@ -0,0 +1,47 @@
+// Calendar dates are evaluated in the view's timezone, including DST changes.
+export function aggregateUsage(families, { range, timeZone, now = Date.now() }) {
+  const format = new Intl.DateTimeFormat('en-CA', { timeZone, year: 'numeric', month: '2-digit', day: '2-digit' });
+  const dateKey = time => {
+    const parts = Object.fromEntries(format.formatToParts(time).map(part => [part.type, part.value]));
+    return `${parts.year}-${parts.month}-${parts.day}`;
+  };
+  let end = dateKey(now);
+  const startDate = new Date(`${end}T00:00:00Z`);
+  if (range === 'last-month') {
+    startDate.setUTCDate(1);
+    end = new Date(startDate.getTime() - 86400000).toISOString().slice(0, 10);
+    startDate.setUTCMonth(startDate.getUTCMonth() - 1);
+  } else if (range === 'mtd') startDate.setUTCDate(1);
+  else startDate.setUTCDate(startDate.getUTCDate() - ({ '7d': 6, '30d': 29, '90d': 89 }[range] ?? 29));
+  const start = startDate.toISOString().slice(0, 10);
+  const days = [];
+  for (let cursor = startDate; cursor.toISOString().slice(0, 10) <= end; cursor = new Date(cursor.getTime() + 86400000)) {
+    days.push({ date: cursor.toISOString().slice(0, 10), tokens: 0, costUsd: 0, projects: {} });
+  }
+  const byDate = new Map(days.map(day => [day.date, day]));
+  const projects = new Map();
+  let incomplete = false, samples = 0;
+  const totals = { tokens: 0, inputTokens: 0, cachedInputTokens: 0, outputTokens: 0, costUsd: 0 };
+  for (const { project, usage } of families) {
+    // Coverage can be incomplete even when no timestamped records survive.
+    incomplete ||= usage.analyticsPartial || usage.partial || false;
+    const key = project.id === 'projectless' ? 'unassigned' : project.id || project.path || 'unassigned';
+    for (const sample of usage.timeline) {
+      if (sample.time > now) continue;
+      const day = byDate.get(dateKey(sample.time));
+      if (!day) continue;
+      let item = projects.get(key);
+      if (!item) { item = { id: key, name: key === 'unassigned' ? 'Unassigned' : project.name, tokens: 0, costUsd: 0 }; projects.set(key, item); }
+      const tokens = sample.tokens.total_tokens;
+      totals.tokens += tokens; totals.inputTokens += sample.tokens.input_tokens;
+      totals.cachedInputTokens += sample.tokens.cached_input_tokens; totals.outputTokens += sample.tokens.output_tokens;
+      totals.costUsd += sample.costUsd; samples += sample.samples;
+      day.tokens += tokens; day.costUsd += sample.costUsd;
+      day.projects[key] = (day.projects[key] ?? 0) + sample.costUsd;
+      item.tokens += tokens; item.costUsd += sample.costUsd;
+      incomplete ||= sample.partial || sample.costPartial;
+    }
+  }
+  return { start, end, timeZone, days, totals, samples, incomplete,
+    projects: [...projects.values()].sort((a, b) => b.costUsd - a.costUsd || a.name.localeCompare(b.name)) };
+}