feat(account-usage): sidebar Usage view with Claude/Codex quota bars + on-track pace markers

Consumes GET /usage (transport-contract 0.25.0). DaisyUI progress bars per quota
window with a dot at the elapsed fraction of the window (the 'on track' level),
ahead/under-pace labels, reset countdowns, stale/unavailable/not-configured states.

3 files changed, 271 insertions, 0 deletions

diff --git a/src/features/account-usage/ui/AccountUsageView.svelte b/src/features/account-usage/ui/AccountUsageView.svelte
new file mode 100644
index 0000000..c1af2a7
--- /dev/null
+++ b/src/features/account-usage/ui/AccountUsageView.svelte
@@ -0,0 +1,127 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import type { AccountUsageResponse, LoadAccountUsage } from "../logic/types";
+  import { viewProviderCards } from "../logic/view-model";
+  import UsageBar from "./UsageBar.svelte";
+
+  let {
+    load,
+    now = () => Date.now(),
+    pollMs = 60_000,
+  }: {
+    load: LoadAccountUsage;
+    /** Injected clock (tests). */
+    now?: () => number;
+    /** How often to re-read `GET /usage` (served from the backend cache). */
+    pollMs?: number;
+  } = $props();
+
+  let usage = $state<AccountUsageResponse | null>(null);
+  let error = $state<string | null>(null);
+  let refreshing = $state(false);
+  let inFlight = false;
+  /** Ticks so the pace marker + "resets in" labels advance between polls. */
+  let clock = $state(untrack(() => now()));
+
+  const cards = $derived(usage ? viewProviderCards(usage, clock) : []);
+
+  async function refresh(force: boolean): Promise<void> {
+    if (inFlight) return;
+    inFlight = true;
+    if (force) refreshing = true;
+    const result = await load(force ? { refresh: true } : undefined);
+    inFlight = false;
+    refreshing = false;
+    clock = now();
+    if (result.ok) {
+      usage = result.usage;
+      error = null;
+    } else {
+      error = result.unavailable
+        ? "Account usage is unavailable (backend extension not loaded)."
+        : result.error;
+    }
+  }
+
+  $effect(() => {
+    const interval = untrack(() => pollMs);
+    untrack(() => void refresh(false));
+    const poll = setInterval(() => void refresh(false), interval);
+    const tick = setInterval(() => {
+      clock = now();
+    }, 30_000);
+    return () => {
+      clearInterval(poll);
+      clearInterval(tick);
+    };
+  });
+</script>
+
+<div class="flex flex-col gap-3">
+  <div class="flex items-center justify-between gap-2">
+    <h3 class="text-xs font-semibold uppercase opacity-60">Subscription usage</h3>
+    <button
+      type="button"
+      class="btn btn-ghost btn-xs"
+      onclick={() => void refresh(true)}
+      disabled={refreshing}
+      aria-label="Refresh account usage"
+    >
+      {#if refreshing}<span class="loading loading-spinner loading-xs"></span>{/if}
+      Refresh
+    </button>
+  </div>
+
+  {#if error}
+    <p class="text-xs text-error">{error}</p>
+  {/if}
+
+  {#if usage === null && error === null}
+    <p class="text-xs opacity-60">Loading…</p>
+  {/if}
+
+  {#each cards as card (card.provider)}
+    <section class="flex flex-col gap-2 rounded-box bg-base-200 p-2" aria-label="{card.label} usage">
+      <div class="flex items-start justify-between gap-2">
+        <div class="flex min-w-0 flex-col">
+          <span class="text-sm font-semibold">{card.label}</span>
+          {#if card.subtitle}
+            <span class="truncate text-[11px] opacity-60">{card.subtitle}</span>
+          {/if}
+        </div>
+        <div class="flex shrink-0 flex-col items-end gap-0.5">
+          {#if card.stateBadge}
+            <span
+              class="badge badge-xs"
+              class:badge-warning={card.state === "stale"}
+              class:badge-error={card.state === "unavailable"}
+              class:badge-ghost={card.state === "unsupported" || card.state === "not-configured"}
+              >{card.stateBadge}</span
+            >
+          {/if}
+          {#if card.ageLabel}
+            <span class="text-[11px] opacity-50">updated {card.ageLabel}</span>
+          {/if}
+        </div>
+      </div>
+
+      {#if card.message}
+        <p class="text-xs opacity-70">{card.message}</p>
+      {/if}
+      {#if card.creditNote}
+        <p class="text-xs text-warning">{card.creditNote}</p>
+      {/if}
+
+      {#each card.bars as bar (bar.id)}
+        <UsageBar {bar} />
+      {/each}
+    </section>
+  {/each}
+
+  {#if cards.some((c) => c.bars.some((b) => b.pacePercent !== null))}
+    <p class="flex items-center gap-1.5 text-[11px] opacity-50">
+      <span class="inline-block size-2 rounded-full bg-base-content"></span>
+      on-track pace — usage that would exactly use the allowance by its reset
+    </p>
+  {/if}
+</div>
diff --git a/src/features/account-usage/ui/AccountUsageView.test.ts b/src/features/account-usage/ui/AccountUsageView.test.ts
new file mode 100644
index 0000000..e7e5799
--- /dev/null
+++ b/src/features/account-usage/ui/AccountUsageView.test.ts
@@ -0,0 +1,95 @@
+import type { AccountUsageResponse } from "@dispatch/transport-contract";
+import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import type { AccountUsageResult } from "../logic/types";
+import AccountUsageView from "./AccountUsageView.svelte";
+
+const NOW = 1_760_000_000_000;
+const DAY = 86_400_000;
+
+const usage: AccountUsageResponse = {
+  servedAt: NOW,
+  providers: [
+    {
+      provider: "claude",
+      label: "Claude",
+      state: "fresh",
+      account: { accountId: "a", email: "[email protected]", planType: "max" },
+      limits: [
+        {
+          id: "claude:7d",
+          label: "7 Day",
+          kind: "window",
+          windowId: "7d",
+          shared: true,
+          tier: null,
+          durationMs: 28 * DAY,
+          resetsAt: NOW + 14 * DAY,
+          unit: "percent",
+          used: 30,
+          limit: 100,
+          remaining: 70,
+          usedFraction: 0.3,
+          remainingFraction: 0.7,
+          status: "ok",
+        },
+      ],
+      limitReached: null,
+      canServe: null,
+      creditOverage: false,
+      credits: null,
+      fetchedAt: NOW,
+      lastAttemptAt: NOW,
+      nextRefreshAt: NOW + 300_000,
+      error: null,
+    },
+    {
+      provider: "codex",
+      label: "Codex",
+      state: "not-configured",
+      account: null,
+      limits: [],
+      limitReached: null,
+      canServe: null,
+      creditOverage: false,
+      credits: null,
+      fetchedAt: null,
+      lastAttemptAt: NOW,
+      nextRefreshAt: NOW + 30_000,
+      error: "No Codex OAuth credentials",
+    },
+  ],
+};
+
+describe("AccountUsageView", () => {
+  it("renders a daisyUI progress bar with a pace marker at the elapsed position", async () => {
+    const calls: Array<{ refresh?: boolean } | undefined> = [];
+    const load = async (opts?: { refresh?: boolean }): Promise<AccountUsageResult> => {
+      calls.push(opts);
+      return { ok: true, usage };
+    };
+    render(AccountUsageView, { load, now: () => NOW });
+    const bar = await screen.findByLabelText("7 Day usage");
+    expect(bar.tagName).toBe("PROGRESS");
+    expect(bar.classList.contains("progress")).toBe(true);
+    expect(bar.getAttribute("value")).toBe("30");
+    const marker = screen.getByTestId("pace-marker");
+    expect(marker.getAttribute("style")).toContain("left: 50%");
+    expect(screen.getByText("20% under pace")).toBeTruthy();
+    expect(screen.getByText(/Not signed in to Codex/)).toBeTruthy();
+
+    await userEvent.click(screen.getByRole("button", { name: "Refresh account usage" }));
+    expect(calls.at(-1)).toEqual({ refresh: true });
+  });
+
+  it("shows the unavailable message on 503", async () => {
+    const load = async (): Promise<AccountUsageResult> => ({
+      ok: false,
+      error: "x",
+      unavailable: true,
+    });
+    render(AccountUsageView, { load, now: () => NOW });
+    expect(await screen.findByText(/backend extension not loaded/)).toBeTruthy();
+  });
+});
diff --git a/src/features/account-usage/ui/UsageBar.svelte b/src/features/account-usage/ui/UsageBar.svelte
new file mode 100644
index 0000000..f4298c1
--- /dev/null
+++ b/src/features/account-usage/ui/UsageBar.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { UsageBarView } from "../logic/view-model";
+
+  let { bar }: { bar: UsageBarView } = $props();
+
+  const progressClass = $derived(
+    {
+      success: "progress-success",
+      warning: "progress-warning",
+      error: "progress-error",
+      neutral: "",
+    }[bar.tone],
+  );
+</script>
+
+<div class="flex flex-col gap-0.5" data-testid="usage-bar" data-limit-id={bar.id}>
+  <div class="flex items-baseline justify-between gap-2 text-xs">
+    <span class="truncate font-medium">{bar.label}</span>
+    <span class="shrink-0 font-mono tabular-nums">{bar.valueLabel}</span>
+  </div>
+  <div class="relative flex items-center">
+    <progress
+      class="progress h-2 w-full {progressClass}"
+      value={bar.percent}
+      max="100"
+      aria-label="{bar.label} usage"
+    ></progress>
+    {#if bar.pacePercent !== null}
+      <!-- Pace marker: where usage would be if spread evenly to the reset. -->
+      <span
+        class="pointer-events-none absolute top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-base-100 bg-base-content"
+        style="left: {bar.pacePercent}%"
+        data-testid="pace-marker"
+        title="On-track pace: {Math.round(bar.pacePercent)}%"
+        aria-hidden="true"
+      ></span>
+    {/if}
+  </div>
+  {#if bar.resetLabel || bar.paceLabel}
+    <div class="flex justify-between gap-2 text-[11px] opacity-60">
+      <span>{bar.resetLabel ?? ""}</span>
+      {#if bar.paceLabel}
+        <span class:text-warning={bar.aheadOfPace} class:opacity-100={bar.aheadOfPace}
+          >{bar.paceLabel}</span
+        >
+      {/if}
+    </div>
+  {/if}
+</div>