feat(header): show weekly quota remaining

Author: jaromil

src/client/App.svelte

@@ -61,7 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     type PlanState,
   } from './features/plans/plan-controller.js';
   import { isRelayPlanUpdate } from './features/plans/contracts.js';
-  import { weeklyQuotaUsed } from './features/plans/weekly-quota.js';
+  import { weeklyQuotaRemaining } from './features/plans/weekly-quota.js';
   import PlanView from './features/plans/PlanView.svelte';
   import { reconnectDelay, turnReadiness } from './features/sessions/session-state.js';
   import { createSessionCache } from './features/sessions/session-cache.js';
@@ -123,8 +123,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     (planState.kind === 'ready' || planState.kind === 'closing' || planState.kind === 'error') &&
       !!planState.plan,
   );
-  let weeklyQuotaUsage = $derived(
-    weeklyQuotaUsed(
+  let weeklyQuotaRemainingValue = $derived(
+    weeklyQuotaRemaining(
       planState.kind === 'ready' || planState.kind === 'closing' || planState.kind === 'error'
         ? planState.plan
         : undefined,
@@ -939,7 +939,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           )
         : null}
       sessionModel={tab === 'chat' ? sessions.find((session) => session.id === sessionId)?.model ?? defaultSessionModel : null}
-      weeklyQuotaUsed={weeklyQuotaUsage}
+      weeklyQuotaRemaining={weeklyQuotaRemainingValue}
       onthemechange={setTheme}
     />
     {#if recoveryNotice}

src/client/components/AppHeader.svelte

@@ -11,13 +11,13 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     theme,
     sessionPath = null,
     sessionModel = null,
-    weeklyQuotaUsed = null,
+    weeklyQuotaRemaining = null,
     onthemechange,
   }: {
     theme: ThemePreference;
     sessionPath?: string | null;
     sessionModel?: string | null;
-    weeklyQuotaUsed?: number | null;
+    weeklyQuotaRemaining?: number | null;
     onthemechange: (theme: ThemePreference) => void;
   } = $props();
 </script>
@@ -35,8 +35,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     </p>
   {/if}
   <div class="header-actions">
-    {#if weeklyQuotaUsed !== null}
-      <span class="weekly-quota" aria-label="Weekly quota used">{weeklyQuotaUsed}% used</span>
+    {#if weeklyQuotaRemaining !== null}
+      <span class="weekly-quota" aria-label="Weekly quota remaining">{weeklyQuotaRemaining}% left</span>
     {/if}
     <button
       class="menu-trigger"

src/client/components/AppHeader.test.ts

@@ -25,14 +25,20 @@ describe('AppHeader', () => {
     expect(container.querySelector('.session-model')?.textContent).toBe('· gpt-5.6-terra');
   });
 
-  it('places the available weekly quota usage immediately before the menu trigger', () => {
+  it('places the available weekly quota remaining immediately before the menu trigger', () => {
     const { container } = render(AppHeader, {
       theme: 'system',
-      weeklyQuotaUsed: 37,
+      weeklyQuotaRemaining: 63,
       onthemechange: () => {},
     });
 
-    expect(container.querySelector('.weekly-quota')?.textContent).toBe('37% used');
+    expect(container.querySelector('.weekly-quota')?.textContent).toBe('63% left');
     expect(container.querySelector('.weekly-quota + .menu-trigger')).toBeTruthy();
   });
+
+  it('omits the weekly quota when the relay has no current value', () => {
+    const { container } = render(AppHeader, { theme: 'system', onthemechange: () => {} });
+
+    expect(container.querySelector('.weekly-quota')).toBeNull();
+  });
 });

src/client/features/plans/weekly-quota.test.ts

@@ -7,33 +7,48 @@
 import { describe, expect, it } from 'vitest';
 
 import type { SupervisedPlan } from './contracts.js';
-import { weeklyQuotaUsed } from './weekly-quota.js';
+import { weeklyQuotaRemaining } from './weekly-quota.js';
 
 const plan = (remaining?: number): SupervisedPlan => ({
   title: 'Weekly quota',
-  steps: [{
-    id: 'l1', title: 'Parent', level: 1, state: 'WIP', priority: 'A', description: {}, children: [
-      {
-        id: 'l2', title: 'Active', level: 2, state: 'WIP', priority: 'A', description: {},
-        ...(remaining === undefined ? {} : { measurement: { weeklyRemainingCurrent: remaining } }),
-        children: [],
-      },
-    ],
-  }],
+  steps: [
+    {
+      id: 'l1',
+      title: 'Parent',
+      level: 1,
+      state: 'WIP',
+      priority: 'A',
+      description: {},
+      children: [
+        {
+          id: 'l2',
+          title: 'Active',
+          level: 2,
+          state: 'WIP',
+          priority: 'A',
+          description: {},
+          ...(remaining === undefined
+            ? {}
+            : { measurement: { weeklyRemainingCurrent: remaining } }),
+          children: [],
+        },
+      ],
+    },
+  ],
   totalSteps: 2,
   doneSteps: 0,
   allDone: false,
   currentStepId: 'l2',
 });
 
-describe('weeklyQuotaUsed', () => {
-  it('returns the rounded used weekly percentage on the active step', () => {
-    expect(weeklyQuotaUsed(plan(62.7))).toBe(37);
+describe('weeklyQuotaRemaining', () => {
+  it('returns the rounded remaining weekly percentage on the active step', () => {
+    expect(weeklyQuotaRemaining(plan(62.7))).toBe(63);
   });
 
   it('keeps unavailable, invalid, and inactive measurements hidden', () => {
-    expect(weeklyQuotaUsed(plan())).toBeNull();
-    expect(weeklyQuotaUsed(plan(101))).toBeNull();
-    expect(weeklyQuotaUsed(undefined)).toBeNull();
+    expect(weeklyQuotaRemaining(plan())).toBeNull();
+    expect(weeklyQuotaRemaining(plan(101))).toBeNull();
+    expect(weeklyQuotaRemaining(undefined)).toBeNull();
   });
 });

src/client/features/plans/weekly-quota.ts

@@ -6,12 +6,15 @@
 
 import type { PlanStep, SupervisedPlan } from './contracts.js';
 
-/** Returns the active plan step's latest weekly account-wide percentage used. */
-export function weeklyQuotaUsed(plan: SupervisedPlan | undefined): number | null {
+/** Returns the active plan step's latest remaining weekly account-wide percentage. */
+export function weeklyQuotaRemaining(plan: SupervisedPlan | undefined): number | null {
   if (!plan) return null;
   const remaining = findStep(plan.steps, plan.currentStepId)?.measurement?.weeklyRemainingCurrent;
-  return typeof remaining === 'number' && Number.isFinite(remaining) && remaining >= 0 && remaining <= 100
-    ? Math.round(100 - remaining)
+  return typeof remaining === 'number' &&
+    Number.isFinite(remaining) &&
+    remaining >= 0 &&
+    remaining <= 100
+    ? Math.round(remaining)
     : null;
 }
 

test/e2e/plan-tab-navigation.spec.ts

@@ -28,6 +28,7 @@ const completedPlan = {
       priority: 'A',
       reviewStatus: 'UNREVIEWED',
       description: { goal: 'Keep every input path consistent.' },
+      measurement: { weeklyRemainingCurrent: 63 },
       children: [],
     },
   ],
@@ -37,15 +38,24 @@ const completedPlan = {
   currentStepId: 'finish',
 };
 
-const activePlan = { ...completedPlan, allDone: false, doneSteps: 0 };
+const activePlan = {
+  ...completedPlan,
+  allDone: false,
+  doneSteps: 0,
+};
 
 async function routeSessionHistory(page: Page, id: string): Promise<void> {
   await page.route(`**/api/sessions/${id}/history`, (route) =>
-    route.fulfill({ contentType: 'application/json', body: JSON.stringify({ items: [], currentSequence: 0 }) }),
+    route.fulfill({
+      contentType: 'application/json',
+      body: JSON.stringify({ items: [], currentSequence: 0 }),
+    }),
   );
 }
 
-test('keeps the completed Plan tab reachable and overflow-free at 320px with 200% root font', async ({ page }) => {
+test('keeps the completed Plan tab reachable and overflow-free at 320px with 200% root font', async ({
+  page,
+}) => {
   const selected = session('session-1', '/projects/one');
   let closed = false;
   await page.setViewportSize({ width: 320, height: 568 });
@@ -66,12 +76,18 @@ test('keeps the completed Plan tab reachable and overflow-free at 320px with 200
   await page.route('**/api/sessions/recent-threads', (route) =>
     route.fulfill({ contentType: 'application/json', body: '[]' }),
   );
-  await page.routeWebSocket(/ws:\/\/127\.0\.0\.1:4173\/api\/sessions\/session-1\/events\?after=\d+/, () => {});
+  await page.routeWebSocket(
+    /ws:\/\/127\.0\.0\.1:4173\/api\/sessions\/session-1\/events\?after=\d+/,
+    () => {},
+  );
 
   await page.goto('/');
   await page.addStyleTag({ content: 'html { font-size: 200% !important; }' });
 
   const navigation = page.getByLabel('Primary');
+  const weeklyQuota = page.getByLabel('Weekly quota remaining');
+  await expect(weeklyQuota).toHaveText('63% left');
+  await expect(weeklyQuota.locator('+ .menu-trigger')).toHaveCount(1);
   await expect(navigation.getByRole('button')).toHaveText(['Sessions', 'Git', 'Chat', 'Plan']);
   const horizontalLayout = await page.evaluate(() => ({
     clientWidth: document.documentElement.clientWidth,
@@ -96,6 +112,10 @@ test('keeps the completed Plan tab reachable and overflow-free at 320px with 200
 
   const chat = navigation.getByRole('button', { name: 'Chat' });
   const plan = navigation.getByRole('button', { name: 'Plan' });
+  for (const tab of ['Sessions', 'Git', 'Chat', 'Plan']) {
+    await navigation.getByRole('button', { name: tab }).click();
+    await expect(weeklyQuota).toHaveText('63% left');
+  }
   await chat.click();
   const prompt = page.getByRole('textbox', { name: 'Prompt' });
   await prompt.fill('Keep this chat draft');
@@ -121,8 +141,18 @@ test('keeps the completed Plan tab reachable and overflow-free at 320px with 200
 
   await chat.click();
   const main = page.locator('main');
-  await main.dispatchEvent('pointerdown', { pointerType: 'touch', pointerId: 4, clientX: 240, clientY: 240 });
-  await main.dispatchEvent('pointerup', { pointerType: 'touch', pointerId: 4, clientX: 100, clientY: 242 });
+  await main.dispatchEvent('pointerdown', {
+    pointerType: 'touch',
+    pointerId: 4,
+    clientX: 240,
+    clientY: 240,
+  });
+  await main.dispatchEvent('pointerup', {
+    pointerType: 'touch',
+    pointerId: 4,
+    clientX: 100,
+    clientY: 242,
+  });
   await expect(plan).toHaveAttribute('aria-pressed', 'true');
 
   await page.getByRole('button', { name: 'Close completed plan' }).click();
@@ -132,7 +162,9 @@ test('keeps the completed Plan tab reachable and overflow-free at 320px with 200
   await expect(plan).toHaveCount(0);
 });
 
-test('adds and removes Plan from live events without stealing focus, then isolates a session without a plan', async ({ page }) => {
+test('adds and removes Plan from live events without stealing focus, then isolates a session without a plan', async ({
+  page,
+}) => {
   const first = session('session-1', '/projects/one');
   const second = session('session-2', '/projects/two');
   let emitPlanEvent: ((event: object) => void) | undefined;
@@ -154,7 +186,10 @@ test('adds and removes Plan from live events without stealing focus, then isolat
       emitPlanEvent = (event) => socket.send(JSON.stringify({ type: 'relay.event', event }));
     },
   );
-  await page.routeWebSocket(/ws:\/\/127\.0\.0\.1:4173\/api\/sessions\/session-2\/events\?after=\d+/, () => {});
+  await page.routeWebSocket(
+    /ws:\/\/127\.0\.0\.1:4173\/api\/sessions\/session-2\/events\?after=\d+/,
+    () => {},
+  );
 
   await page.goto('/');
   const navigation = page.getByLabel('Primary');