taskchef 9.6.0 → 9.7.0

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

@@ -1,9 +1,9 @@
-import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { act, 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}]};
+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},projectTokens:{a:120,b:80}}],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());
@@ -122,3 +122,68 @@ test('invalid saved Usage ranges fall back to 30 days', async () => {
  await screen.findByRole('table');
  expect(request).toHaveBeenCalledWith({range:'30d',timeZone:expect.any(String)});
 });
+
+test('project tokens share selection and highlight with cost and expose exact values',async()=>{
+ const request=vi.fn().mockResolvedValue(data);const view=render(<UsageView request={request}/>);await screen.findByRole('table');
+ expect(screen.getByRole('heading',{name:'Tokens and cost by project'})).toBeVisible();expect(screen.queryByText(/over time/)).toBeNull();
+ fireEvent.focus(screen.getByRole('button',{name:'Oct 15 project usage'}));expect(screen.getByText(/Alpha: 120 tokens, \$2.00 · Beta: 80 tokens, \$1.00/)).toBeVisible();
+ fireEvent.mouseEnter(screen.getByRole('button',{name:'Alpha'}));
+ expect(screen.getByRole('img',{name:'Daily project token stack: all projects'}).querySelector('[data-project="b"]')).toHaveAttribute('opacity','0.2');
+ fireEvent.click(screen.getByRole('button',{name:'Alpha'}));expect(screen.getByRole('img',{name:'Daily project token stack: Alpha'}).querySelectorAll('polygon')).toHaveLength(1);
+ expect(view.container.querySelectorAll('h3')).not.toHaveLength(0);
+});
+test('weekly summary connects gaps and resets, hides model buckets and shows current allowance in the view timezone',async()=>{
+ vi.useFakeTimers({toFake:['Date']});vi.setSystemTime(new Date('2026-10-17T00:00:00Z'));
+ try {
+ const days=Array.from({length:5},(_,i)=>({...data.days[0],date:`2026-10-${11+i}`}));
+ const reading=(date:string,remainingPercent:number,resetsAt:number,id='codex')=>({id,name:null,date,time:Date.parse(`${date}T00:00:00Z`),remainingPercent,resetsAt});
+ const reset=Date.parse('2026-10-13T00:00:00Z'), nextReset=Date.parse('2026-10-20T01:00:00Z');
+ const current=reading('2026-10-17',89,nextReset);
+ const request=vi.fn().mockResolvedValue({...data,samples:0,days,currentWeeklyLimit:current,weeklyLimits:[reading('2026-10-11',80,reset),reading('2026-10-12',70,reset),reading('2026-10-13',100,nextReset),reading('2026-10-15',90,nextReset),reading('2026-10-15',50,nextReset,'gpt-5.3')]});
+ render(<UsageView request={request}/>);const chart=await screen.findByRole('img',{name:'Recorded weekly allowance remaining by day'});
+ expect(chart.querySelectorAll('circle')).toHaveLength(4);
+ expect(chart.querySelector('polyline')?.getAttribute('points')?.split(' ')).toHaveLength(6);
+ expect(screen.getByRole('heading',{name:'Weekly limits · 89% left'})).toBeVisible();
+ const expected=new Date(nextReset).toLocaleString(undefined,{timeZone:data.timeZone,month:'short',day:'numeric',hour:'numeric',minute:'2-digit',timeZoneName:'short'});
+ expect(screen.getByText(`Resets ${expected}`)).toBeVisible();
+ expect(screen.queryByText('codex')).toBeNull();expect(screen.queryByText(/GPT-5.3/i)).toBeNull();expect(screen.queryByText(/Last observation/)).toBeNull();expect(screen.queryByRole('table')).toBeNull();
+ expect(screen.getByRole('heading',{name:'Recorded tokens'}).closest('.usage-totals')).toContainElement(chart);
+ } finally {vi.useRealTimers();}
+});
+test('project charts expose ten distinct projects and only put lower ranks in Other',async()=>{
+ const projects=Array.from({length:12},(_,i)=>({id:String(i),name:`Project ${i+1}`,tokens:12-i,costUsd:12-i}));
+ const day={...data.days[0],projects:Object.fromEntries(projects.map(p=>[p.id,p.costUsd])),projectTokens:Object.fromEntries(projects.map(p=>[p.id,p.tokens]))};
+ render(<UsageView request={vi.fn().mockResolvedValue({...data,projects,days:[day]})}/>);await screen.findByRole('table');
+ const chart=screen.getByRole('img',{name:'Daily project token stack: all projects'});expect(chart.querySelectorAll('polygon')).toHaveLength(11);
+ expect(new Set([...chart.querySelectorAll('polygon')].map(p=>p.getAttribute('fill'))).size).toBe(11);
+ fireEvent.focus(screen.getByRole('button',{name:'Oct 15 project usage'}));expect(screen.getByText(/Other: 3 tokens, \$3.00/)).toBeVisible();
+ fireEvent.click(screen.getByRole('button',{name:'Project 10'}));expect(screen.getByRole('img',{name:'Daily project token stack: Project 10'}).querySelectorAll('polygon')).toHaveLength(1);
+});
+test('expired current allowance is unavailable while history remains visible',async()=>{
+ const sample={id:'codex',name:null,time:1,resetsAt:2,remainingPercent:80};
+ render(<UsageView request={vi.fn().mockResolvedValue({...data,currentWeeklyLimit:sample})}/>);
+ expect(await screen.findByText('Current allowance unavailable')).toBeVisible();expect(screen.queryByText(/80% left/)).toBeNull();
+});
+
+test('a failed background refresh keeps saved charts visible and Retry forces a fresh read',async()=>{
+ const request=vi.fn().mockResolvedValueOnce({...data,refreshing:true}).mockResolvedValueOnce({...data,refreshError:'Saved usage is shown. Background refresh failed.'}).mockResolvedValue(data);
+ render(<UsageView request={request}/>);
+ await screen.findByRole('table');expect(screen.getByText(/Updating saved usage/)).toBeVisible();
+ expect(await screen.findByRole('alert')).toHaveTextContent('Saved usage is shown');expect(screen.getByRole('table')).toBeVisible();
+ fireEvent.click(screen.getByRole('button',{name:'Retry'}));
+ await waitFor(()=>expect(request).toHaveBeenLastCalledWith({range:'30d',timeZone:expect.any(String),force:true}));
+ await waitFor(()=>expect(screen.queryByRole('alert')).toBeNull());expect(screen.getByRole('table')).toBeVisible();
+});
+
+test('an idle weekly card expires at its reset without another request',async()=>{
+ vi.useFakeTimers();vi.setSystemTime(new Date('2026-10-17T00:00:00Z'));
+ try {
+  const currentWeeklyLimit={id:'codex',name:null,time:Date.now()-1000,resetsAt:Date.now()+2000,remainingPercent:89};
+  const request=vi.fn().mockResolvedValue({...data,currentWeeklyLimit});
+  await act(async()=>{render(<UsageView request={request}/>);});
+  expect(screen.getByRole('heading',{name:'Weekly limits · 89% left'})).toBeVisible();
+  await act(async()=>{vi.advanceTimersByTime(2000);});
+  expect(screen.getByText('Current allowance unavailable')).toBeVisible();
+  expect(screen.queryByRole('heading',{name:/89% left/})).toBeNull();expect(request).toHaveBeenCalledTimes(1);
+ }finally{vi.useRealTimers();}
+});

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

@@ -1,11 +1,14 @@
 import { usePreference } from "./preferences";
 import { useEffect, useRef, useState } from "react";
 
+interface WeeklyLimit { id: string; name: string | null; date?: string; time: number; remainingPercent: number; resetsAt: number }
 export interface UsageData {
-  updatedAt?: string; refreshing?: boolean; progress?: ScanProgress;
+  updatedAt?: string; refreshing?: boolean; refreshError?: string; 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> }[];
+  days: { date: string; tokens: number; costUsd: number; projects: Record<string, number>; projectTokens: Record<string, number> }[];
+  weeklyLimits?: WeeklyLimit[];
+  currentWeeklyLimit?: WeeklyLimit | null;
   projects: { id: string; name: string; costUsd: number; tokens: number }[];
 }
 interface ScanProgress { completed: number; total: number; }
@@ -15,7 +18,7 @@ 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 colors = ["#6e91ad", "#80ad99", "#b8a0ca", "#c2a06e", "#c78585", "#7caeb5", "#a9af78", "#bb8caa", "#b28b6f", "#8e97c5", "#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 }) {
@@ -28,6 +31,7 @@ export function UsageView({ request, refreshKey = 0 }: { request: (args: ReturnT
   const lastRequest = useRef({ refreshKey, retry: 0, rescan: 0 });
   const [selected, setSelected] = useState<string | null>(null);
   const [activeDay, setActiveDay] = useState<number | null>(null);
+  const [activeProjectDay, setActiveProjectDay] = useState<number | null>(null);
   const [retry, setRetry] = useState(0);
   const [rescan, setRescan] = useState(0);
   useEffect(() => {
@@ -35,7 +39,7 @@ export function UsageView({ request, refreshKey = 0 }: { request: (args: ReturnT
     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);
+    setLoading(true); setError(null); setProgress(null); setActiveDay(null); setActiveProjectDay(null); setHighlighted(null);
     if (!force && !rebuild) setData(null);
     let timer: ReturnType<typeof setTimeout>;
     async function load(force: boolean, rebuild = false) {
@@ -58,15 +62,18 @@ export function UsageView({ request, refreshKey = 0 }: { request: (args: ReturnT
   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 series = data ? (project ? [{ ...project, color: colors[data.projects.indexOf(project) < 10 ? data.projects.indexOf(project) : 10] }]
+    : [...data.projects.slice(0, 10).map((item, index) => ({ ...item, color: colors[index] })),
+      ...(data.projects.length > 10 ? [{ id: "__other", name: "Other", costUsd: 0, tokens: 0, color: colors[10] }] : [])]) : [];
   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;
+    ? data!.projects.slice(10).reduce((sum, item) => sum + (day.projects[item.id] ?? 0), 0) : day.projects[id] ?? 0;
+  const projectTokens = (day: UsageData["days"][number], id: string) => id === "__other"
+    ? data!.projects.slice(10).reduce((sum, item) => sum + (day.projectTokens?.[item.id] ?? 0), 0) : day.projectTokens?.[id] ?? 0;
+  const maxProjectTokens = Math.max(...(data?.days.map(day => series.reduce((sum, item) => sum + projectTokens(day, item.id), 0)) ?? []), 1);
   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);
@@ -91,13 +98,15 @@ export function UsageView({ request, refreshKey = 0 }: { request: (args: ReturnT
     </div>}
     {error && <div role="alert"><p>Usage could not be loaded: {error}</p><button onClick={() => setRetry(value => value + 1)}>Retry</button></div>}
     {data && <>
+      {data.refreshError && <p role="alert">{data.refreshError} <button onClick={() => setRetry(value => value + 1)}>Retry</button></p>}
       <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">
+      <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>
+          <WeeklyLimits data={data} />
         </div>
-        <article className="usage-panel" aria-label="Tokens and cost over time"><h3>Tokens and cost over time</h3>
+      {!data.samples ? <p role="status">No timestamped usage is available for this period.</p> : <>
+        <article className="usage-panel" aria-label="Tokens and cost"><h3>Tokens and cost</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)}
@@ -108,22 +117,85 @@ export function UsageView({ request, refreshKey = 0 }: { request: (args: ReturnT
             {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>
+          <p className="usage-chart-detail" aria-live="polite">{activeDay === null ? "" : `${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>
+        <article className="usage-panel" aria-label="Tokens and cost by project"><h3>Tokens and cost by project</h3>
+          <div className="usage-legend"><button aria-pressed={!project} onMouseEnter={() => setHighlighted(null)} onFocus={() => setHighlighted(null)} onClick={() => setSelected(null)}>All projects</button>{data.projects.slice(0, 10).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 > 10 && <span tabIndex={0} onMouseEnter={() => setHighlighted("__other")} onMouseLeave={() => setHighlighted(null)} onFocus={() => setHighlighted("__other")} onBlur={() => setHighlighted(null)}><i style={{ background: colors[10] }} />Other</span>}</div>
+          <h4>Estimated cost</h4>
           <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>
+          <h4>Tokens</h4>
+          <div className="usage-chart-scroll"><svg viewBox="0 0 860 210" role="img" aria-label={`Daily project token stack: ${project?.name ?? "all projects"}`} className="usage-chart">
+            {grid(maxProjectTokens, true)}
+            {series.map((item, seriesIndex) => {
+              const lower = data.days.map(day => series.slice(0, seriesIndex).reduce((sum, preceding) => sum + projectTokens(day, preceding.id), 0));
+              const upper = data.days.map((day, index) => lower[index] + projectTokens(day, item.id));
+              const finished = data.days.map((day, index) => ({ day, index })).filter(({ day }) => !unfinished(day.date));
+              return <g key={item.id} data-project={item.id} opacity={activeHighlight && activeHighlight !== item.id ? .2 : 1}>
+                <polygon fill={item.color} fillOpacity=".3" points={[...data.days.map((_, index) => `${x(index)},${y(upper[index], maxProjectTokens)}`), ...data.days.map((_, index) => `${x(index)},${y(lower[index], maxProjectTokens)}`).reverse()].join(" ")} />
+                <polyline fill="none" stroke={item.color} strokeWidth="2" points={finished.map(({ index }) => `${x(index)},${y(upper[index], maxProjectTokens)}`).join(" ")} />
+                {data.days.map((day, index) => unfinished(day.date) && index > 0 ? <polyline key={day.date} fill="none" stroke={item.color} strokeWidth="2" strokeDasharray="5 4" points={`${x(index - 1)},${y(upper[index - 1], maxProjectTokens)} ${x(index)},${y(upper[index], maxProjectTokens)}`} /> : null)}
+                {data.days.map((day, index) => <circle key={day.date} cx={x(index)} cy={y(upper[index], maxProjectTokens)} r="2.5" fill={item.color}><title>{dateLabel(day.date)} · {item.name}: {projectTokens(day, item.id).toLocaleString()} tokens</title></circle>)}
+              </g>;
+            })}
+            {data.days.map((day, index) => <g key={day.date} tabIndex={0} role="button" aria-label={`${dateLabel(day.date)} project usage`} onMouseEnter={() => setActiveProjectDay(index)} onFocus={() => setActiveProjectDay(index)} onClick={() => setActiveProjectDay(index)} onKeyDown={event => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); setActiveProjectDay(index); } }}><rect x={left + index * dayWidth} y={top} width={dayWidth} height={bottom - top} fill="transparent" /></g>)}
+            {dates()}
+          </svg></div>
+          <p className="usage-chart-detail" aria-live="polite">{activeProjectDay === null ? "" : `${dateLabel(data.days[activeProjectDay].date)} · ${series.map(item => `${item.name}: ${projectTokens(data.days[activeProjectDay], item.id).toLocaleString()} tokens, ${money(projectCost(data.days[activeProjectDay], item.id))}`).join(" · ")}`}</p>
         </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>
+          <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 < 10 ? index : 10] }} /></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>;
 }
+
+function WeeklyLimits({ data }: { data: UsageData }) {
+  const [now, setNow] = useState(Date.now);
+  const resetsAt = data.currentWeeklyLimit?.resetsAt;
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout>;
+    function update() {
+      const time = Date.now();
+      setNow(time);
+      if (resetsAt && resetsAt > time) timer = setTimeout(update, Math.min(resetsAt - time, 2_147_483_647));
+    }
+    update();
+    return () => clearTimeout(timer);
+  }, [resetsAt]);
+  const samples = (data.weeklyLimits ?? []).filter(sample => sample.id === "codex").sort((a, b) => a.time - b.time);
+  const current = data.currentWeeklyLimit && data.currentWeeklyLimit.resetsAt > now ? data.currentWeeklyLimit : null;
+  const dateTime = (time: number) => new Date(time).toLocaleString(undefined, { timeZone: data.timeZone, month: "short", day: "numeric", hour: "numeric", minute: "2-digit", timeZoneName: "short" });
+  const dayIndex = new Map(data.days.map((day, index) => [day.date, index]));
+  const position = (time: number) => {
+    const parts = Object.fromEntries(new Intl.DateTimeFormat("en-CA", { timeZone: data.timeZone, year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", hourCycle: "h23" }).formatToParts(time).map(part => [part.type, part.value]));
+    const index = dayIndex.get(`${parts.year}-${parts.month}-${parts.day}`) ?? 0;
+    return 30 + (index + (Number(parts.hour) + Number(parts.minute) / 60) / 24) / data.days.length * 264;
+  };
+  const y = (value: number) => 72 - value / 100 * 60;
+  const points: string[] = [];
+  samples.forEach((sample, index) => {
+    const previous = samples[index - 1];
+    if (previous && previous.resetsAt <= sample.time && previous.resetsAt > previous.time) {
+      // Preserve the observed allowance until its known reset, then refill.
+      points.push(`${position(previous.resetsAt)},${y(previous.remainingPercent)}`, `${position(previous.resetsAt)},${y(100)}`);
+    }
+    points.push(`${position(sample.time)},${y(sample.remainingPercent)}`);
+  });
+  return <article className="usage-weekly" aria-label="Weekly limits">
+    <h3>Weekly limits{current && ` · ${current.remainingPercent.toFixed(0)}% left`}</h3>
+    <p className="usage-weekly-reset">{current ? `Resets ${dateTime(current.resetsAt)}` : "Current allowance unavailable"}</p>
+    {!samples.length ? <p>No weekly limit readings for this period.</p> : <svg viewBox="0 0 300 96" role="img" aria-label="Recorded weekly allowance remaining by day" className="usage-weekly-chart">
+      <title>Recorded allowance snapshots from Codex session logs; lines connect observations and show known resets.</title>
+      {[0, 50, 100].map(value => <g key={value}><line x1="30" x2="294" y1={y(value)} y2={y(value)} className="usage-grid" /><text x="24" y={y(value) + 3} textAnchor="end">{value}%</text></g>)}
+      <polyline fill="none" stroke={colors[0]} strokeWidth="2" points={points.join(" ")} />
+      {samples.map(sample => <circle key={sample.time} cx={position(sample.time)} cy={y(sample.remainingPercent)} r="2.5" fill={colors[0]}><title>{dateTime(sample.time)} · {sample.remainingPercent.toFixed(1)}% left · Resets {dateTime(sample.resetsAt)}</title></circle>)}
+      <text x="30" y="90">{dateLabel(data.start)}</text><text x="294" y="90" textAnchor="end">{dateLabel(data.end)}</text>
+    </svg>}
+  </article>;
+}

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

@@ -230,16 +230,20 @@ body { background: var(--taskchef-page); }
 .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 h4 { font-size: 12px; font-weight: 500; margin: 16px 0 4px; color: var(--taskchef-muted); }
 .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 { display: grid; grid-template-columns: repeat(3, 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-weekly-chart { display: block; width: 100%; font: 9px var(--taskchef-font, sans-serif); fill: var(--taskchef-muted); }
+.usage-weekly h3 { margin-bottom: 8px; }
+.usage-weekly-reset { min-height: 18px; }
 .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; }
@@ -262,7 +266,8 @@ body { background: var(--taskchef-page); }
 .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%; } }
+@media (max-width: 700px) { .usage-totals { grid-template-columns: 1fr; gap: 10px; } }
+@media (max-width: 500px) { .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); }

package/src/mcp-app.js

@@ -1,4 +1,5 @@
 import { taskChefStateDir } from "./taskchef-state.js";
+import { readUsageHistory, writeUsageHistory } from "./usage-history-cache.js";
 import { aggregateUsage } from "./usage-analytics.js";
 import { mkdir, readFile } from "node:fs/promises";
 import { homedir } from "node:os";
@@ -231,14 +232,25 @@ export function registerTaskChefApp(server, {
     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]);
+    const key = JSON.stringify([scanner.codexHome ?? process.env.CODEX_HOME ?? join(homedir(), ".codex"), settings.showCli, settings.showExec]);
+    const cacheDirectory = join(dirname(settingsPath), "cache", "usage-history");
     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 } };
+    if (!job) {
+      job = { families: null, error: null, finishedAt: 0, pending: false, needsRefresh: true,
+        progress: { completed: 0, total: 0 } };
       analyticsJobs.set(key, job);
       const current = job;
+      // Share hydration between concurrent views before starting one background scan.
+      job.hydrating = readUsageHistory(cacheDirectory, key).then(saved => {
+        if (saved) { current.families = saved.families; current.finishedAt = saved.savedAt; }
+      });
+    }
+    await job.hydrating;
+    if ((force || rescan) && job?.pending) { job.refreshAgain = true; job.rescan ||= rescan; }
+    if (!job.pending && (job.needsRefresh || force || rescan || (!job.error && Date.now() - job.finishedAt >= 60_000))) {
+      Object.assign(job, { error: null, needsRefresh: false,
+        pending: true, refreshAgain: false, rescan: !!rescan, progress: { completed: 0, total: 0 } });
+      const current = job;
       Promise.resolve().then(async () => {
         do {
           current.refreshAgain = false;
@@ -247,12 +259,15 @@ export function registerTaskChefApp(server, {
           const families = await scanner.usageHistory({ settings, rescan: rebuild, onProgress: progress => { current.progress = progress; } });
           current.families = families;
           current.finishedAt = Date.now();
+          // Cache failures never hide readable usage or replace a last good snapshot.
+          await writeUsageHistory(cacheDirectory, key, families, current.finishedAt).catch(() => {});
         } while (current.refreshAgain);
       }).catch(error => { current.error = error; }).finally(() => { current.pending = false; });
     }
-    if (job.error) throw job.error;
+    if (job.error && !job.families) throw job.error;
     const data = job.families ? { ...aggregateUsage(job.families, { range, timeZone }),
       updatedAt: new Date(job.finishedAt).toISOString(),
+      ...(job.error ? { refreshError: "Saved usage is shown. Background refresh failed." } : {}),
       ...(job.pending ? { refreshing: true, progress: job.progress } : {}) }
       : { loading: true, progress: job.progress };
     return { structuredContent: data, content: [] };

package/src/usage-analytics.js

@@ -16,13 +16,25 @@ export function aggregateUsage(families, { range, timeZone, now = Date.now() })
   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: {} });
+    days.push({ date: cursor.toISOString().slice(0, 10), tokens: 0, costUsd: 0, projects: {}, projectTokens: {} });
   }
   const byDate = new Map(days.map(day => [day.date, day]));
   const projects = new Map();
-  let incomplete = false, samples = 0;
+  const limitDays = new Map();
+  let incomplete = false, samples = 0, latestWeeklyLimit = null;
   const totals = { tokens: 0, inputTokens: 0, cachedInputTokens: 0, outputTokens: 0, costUsd: 0 };
   for (const { project, usage } of families) {
+    // Account allowance snapshots are observations, never summed across chats.
+    for (const sample of usage.weeklyLimits ?? []) {
+      if (!Number.isFinite(sample.time) || sample.time > now || !Number.isFinite(sample.remainingPercent)
+        || sample.remainingPercent < 0 || sample.remainingPercent > 100 || !Number.isFinite(sample.resetsAt) || sample.resetsAt <= sample.time) continue;
+      if (sample.id !== "codex") continue;
+      if (!latestWeeklyLimit || sample.time > latestWeeklyLimit.time) latestWeeklyLimit = sample;
+      const date = dateKey(sample.time);
+      if (!byDate.has(date)) continue;
+      const key = JSON.stringify([sample.id, date]);
+      if (!limitDays.has(key) || sample.time > limitDays.get(key).time) limitDays.set(key, { ...sample, date });
+    }
     // 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';
@@ -38,10 +50,13 @@ export function aggregateUsage(families, { range, timeZone, now = Date.now() })
       totals.costUsd += sample.costUsd; samples += sample.samples;
       day.tokens += tokens; day.costUsd += sample.costUsd;
       day.projects[key] = (day.projects[key] ?? 0) + sample.costUsd;
+      day.projectTokens[key] = (day.projectTokens[key] ?? 0) + tokens;
       item.tokens += tokens; item.costUsd += sample.costUsd;
       incomplete ||= sample.partial || sample.costPartial;
     }
   }
   return { start, end, timeZone, days, totals, samples, incomplete,
+    currentWeeklyLimit: latestWeeklyLimit?.resetsAt > now ? latestWeeklyLimit : null,
+    weeklyLimits: [...limitDays.values()].sort((a, b) => a.time - b.time || a.id.localeCompare(b.id)),
     projects: [...projects.values()].sort((a, b) => b.costUsd - a.costUsd || a.name.localeCompare(b.name)) };
 }

package/src/usage-history-cache.js

@@ -0,0 +1,38 @@
+import { createHash } from "node:crypto";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { z } from "zod";
+import { writeDurableAtomic } from "./state-store.js";
+
+const nonnegative = z.number().finite().nonnegative();
+const timestamp = nonnegative.max(8.64e15);
+// Keep only fields needed by aggregateUsage, not message content or per-file records.
+const family = z.object({
+  project: z.object({ id: z.string().nullable().optional(), name: z.string(), path: z.string().optional() }),
+  usage: z.object({
+    analyticsPartial: z.boolean().optional(), partial: z.boolean().optional(),
+    timeline: z.array(z.object({
+      time: timestamp, costUsd: nonnegative, samples: nonnegative.int(),
+      partial: z.boolean(), costPartial: z.boolean(),
+      tokens: z.object({ total_tokens: nonnegative.int(), input_tokens: nonnegative.int(), cached_input_tokens: nonnegative.int(), output_tokens: nonnegative.int() }),
+    })),
+    weeklyLimits: z.array(z.object({
+      id: z.string(), name: z.string().nullable(), time: timestamp,
+      remainingPercent: nonnegative.max(100), resetsAt: timestamp,
+    })).optional(),
+  }),
+});
+const snapshot = z.object({ version: z.literal(1), scope: z.string(), savedAt: timestamp, families: z.array(family) });
+const cachePath = (directory, scope) => join(directory, `${createHash("sha256").update(scope).digest("hex")}.json`);
+
+export async function readUsageHistory(directory, scope) {
+  try {
+    const value = snapshot.parse(JSON.parse(await readFile(cachePath(directory, scope), "utf8")));
+    return value.scope === scope && value.savedAt <= Date.now() ? value : null;
+  } catch { return null; } // Missing, incompatible, or damaged caches rebuild from source.
+}
+
+export async function writeUsageHistory(directory, scope, families, savedAt) {
+  const value = snapshot.parse({ version: 1, scope, savedAt, families });
+  await writeDurableAtomic(cachePath(directory, scope), `${JSON.stringify(value)}\n`, { mode: 0o600 });
+}