feat: live multi-provider quota panel (#1278)

* feat: live provider quota panel (Claude + Codex) Adds Claude and Codex plan usage to the context window percentage circle tooltip, querying their respective APIs directly using existing CLI auth tokens. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: address review feedback - restore quota trigger, guard NaN date - Re-add triggerFetch() on agent idle/error in agent status subscription - Guard formatResetsAtLabel against NaN from malformed API date strings Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: resolve composer conflict and stub subscribe in websocket tests * feat(quota): add cursor, copilot, zai, grok, and kimi quota UI and improve type safety * feat(quota): make Claude and Codex pluggable, and map additional quota/credits metrics * security(quota): fix shell injection vulnerability by migrating exec to execFile * revert: restore original scripts/dev.ps1 and packages/desktop/scripts/dev.ps1 * Fix i18n resource test expectation * Fix quota tooltip empty-provider state * Preserve zero values in Grok quota * Fix empty quota fetch state * Ignore quota frames in relay reconnect tests * Persist refreshed Codex tokens to source auth file * fix(quota): read Claude OAuth credentials from the macOS login Keychain On macOS, Claude Code stores its OAuth credential in the login Keychain (generic-password item, service "Claude Code-credentials"), not in ~/.claude/.credentials.json — that file usually does not exist there, so the Claude provider's existsSync check failed and macOS users silently got no Claude quota. Read it via the macOS `security` CLI (its ACL only trusts /usr/bin/security to decrypt; a native Keychain read would prompt), and stay read-only there since Claude Code owns the refresh/persist. Linux and Windows keep using ~/.claude/.credentials.json unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * Fix quota keychain timeout and local host reconciliation * Fix terminal notification test quota stub * Ignore quota frames in terminal notification tests * fix(quota): bypass Claude token refresh on macOS Keychain-backed logins * fix(dev): update local dev daemon port to 6768 on Windows scripts/dev.ps1 * fix(dev): bypass Unix dev-daemon.sh on Windows in dev.ps1 * fix(client): handle and dispatch provider_quota event in DaemonClient * fix(desktop): fix PowerShell quote stripping in desktop dev.ps1 config seeding * fix(desktop): execute config update via temp file to avoid PowerShell quoting bugs * fix(desktop): fix concurrently command invocation on Windows in dev.ps1 * fix(desktop): resolve path escaping and environment setting syntax errors in dev.ps1 for Windows * Add on-demand provider usage views * Fix Cursor usage billing dates * Move provider usage renderer coverage to e2e * Use provider manifest for quota fetchers * Add provider usage fetch timeouts * Reshape provider usage fetchers --------- Co-authored-by: ABorakati <ABorakati@users.noreply.github.com> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> Co-authored-by: Mohamed Boudra <boudra.moha@gmail.com> Co-authored-by: lumingjun <lumingjun@bytedance.com>
2026-06-20 12:19:50 +08:00
parent 2b0740ff84
commit acea7f3d24
59 changed files with 3944 additions and 132 deletions
@@ -0,0 +1,113 @@
+import { expect, test, type Page } from "./fixtures";
+import { expectComposerVisible } from "./helpers/composer";
+import { openAgentRoute, seedMockAgentWorkspace } from "./helpers/mock-agent";
+import { installProviderUsageFixture } from "./helpers/provider-usage";
+
+const MOBILE_VIEWPORT = { width: 390, height: 844 };
+
+async function openMockAgent(page: Page) {
+  await page.setViewportSize(MOBILE_VIEWPORT);
+  const session = await seedMockAgentWorkspace({
+    repoPrefix: "provider-usage-tooltip-",
+    title: "Provider usage tooltip e2e",
+    initialPrompt: "emit 1 coalesced agent stream update for provider usage tooltip.",
+  });
+  await openAgentRoute(page, session);
+  await expectComposerVisible(page);
+  await expect(page.getByTestId("context-window-meter")).toBeVisible({ timeout: 30_000 });
+  return session;
+}
+
+test.describe("provider usage tooltip", () => {
+  test("fetches usage when the context tooltip opens and renders the active provider", async ({
+    page,
+  }) => {
+    test.setTimeout(180_000);
+    const usageFixture = await installProviderUsageFixture(page, [
+      {
+        fetchedAt: "2026-06-19T00:00:00.000Z",
+        providers: [
+          {
+            providerId: "mock",
+            displayName: "Mock provider",
+            status: "available",
+            planLabel: "Test plan",
+            windows: [
+              {
+                id: "session",
+                label: "Session",
+                usedPct: 42,
+                remainingPct: 58,
+                resetsAt: "2026-06-19T05:00:00.000Z",
+              },
+            ],
+          },
+        ],
+      },
+    ]);
+    const session = await openMockAgent(page);
+    try {
+      expect(usageFixture.requestCount()).toBe(0);
+
+      await page.getByTestId("context-window-meter").hover();
+      await usageFixture.waitForRequestCount(1);
+
+      await expect(page.getByText("Mock provider", { exact: true })).toBeVisible({
+        timeout: 10_000,
+      });
+      await expect(page.getByText("Test plan")).toBeVisible();
+      await expect(page.getByText("Session", { exact: true })).toBeVisible();
+      await expect(page.getByText("42%")).toBeVisible();
+    } finally {
+      await session.cleanup();
+    }
+  });
+
+  test("refreshes usage again each time the tooltip is shown", async ({ page }) => {
+    test.setTimeout(180_000);
+    const usageFixture = await installProviderUsageFixture(page, [
+      {
+        fetchedAt: "2026-06-19T00:00:00.000Z",
+        providers: [
+          {
+            providerId: "mock",
+            displayName: "Mock provider",
+            status: "available",
+            planLabel: "Test plan",
+            windows: [{ id: "session", label: "Session", usedPct: 41 }],
+          },
+        ],
+      },
+      {
+        fetchedAt: "2026-06-19T00:01:00.000Z",
+        providers: [
+          {
+            providerId: "mock",
+            displayName: "Mock provider",
+            status: "available",
+            planLabel: "Test plan",
+            windows: [{ id: "session", label: "Session", usedPct: 64 }],
+          },
+        ],
+      },
+    ]);
+    const session = await openMockAgent(page);
+    try {
+      const meter = page.getByTestId("context-window-meter");
+
+      await meter.hover();
+      await usageFixture.waitForRequestCount(1);
+      await expect(page.getByText("41%")).toBeVisible({ timeout: 10_000 });
+
+      await page.mouse.move(0, 0);
+      await expect(page.getByText("Mock provider", { exact: true })).toHaveCount(0);
+
+      await meter.hover();
+      await usageFixture.waitForRequestCount(2);
+      expect(usageFixture.requestCount()).toBe(2);
+      await expect(page.getByText("64%")).toBeVisible();
+    } finally {
+      await session.cleanup();
+    }
+  });
+});