From bfd5836321355fc35db32cbcea3995ff50eea92f Mon Sep 17 00:00:00 2001
From: Vitalii Yehorov <vitalyiegorov@gmail.com>
Date: Tue, 15 Sep 2026 14:36:11 +0200
Subject: [PATCH 1/6] feat(web): opt-in usage limits meter in the composer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Users cannot see how much of the session window is left without leaving
the thread: /usage-limits and Usage → Limits are both a step away, and the
turn that hits the limit is the one just sent.

Adds an off-by-default setting (Settings → General → Usage limits meter)
that draws one small bar plus the percent left for the selected provider's
session window, falling back to the window with the least left. Clicking
it opens the same panel /usage-limits does; hover is a plain tooltip. A
window whose reset time has passed without a fresh reading renders as
unknown, never as full quota. The block trails the footer controls and is
the first to overflow in the resting strip, without raising the overflow
menu on its own. Window selection and expiry live in packages/shared with
unit tests; nothing new crosses the wire.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 apps/web/src/components/ChatView.tsx          | 15 +++
 apps/web/src/components/chat/ChatComposer.tsx | 65 ++++++++++---
 .../src/components/chat/UsageLimitsMeter.tsx  | 94 +++++++++++++++++++
 .../components/settings/SettingsPanels.tsx    | 32 +++++++
 .../src/components/settings/settingsSearch.ts |  6 ++
 docs/user/usage.md                            |  3 +
 packages/contracts/src/settings.test.ts       | 12 +++
 packages/contracts/src/settings.ts            |  4 +
 packages/shared/src/usageLimits.test.ts       | 66 +++++++++++++
 packages/shared/src/usageLimits.ts            | 33 +++++++
 10 files changed, 316 insertions(+), 14 deletions(-)
 create mode 100644 apps/web/src/components/chat/UsageLimitsMeter.tsx

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 708809712917..ed93b1854718 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -9645,6 +9645,21 @@ export default function ChatView(props: ChatViewProps) {
                                 ? openUsageLimits
                                 : undefined
                             }
+                            // The meter reads the selected instance's own
+                            // snapshot; the panel also merges hub-reported accounts.
+                            usageLimits={activeProviderStatus?.usageLimits}
+                            usageLimitsProviderLabel={
+                              activeProviderStatus?.displayName?.trim() ||
+                              (activeProviderStatus ? String(activeProviderStatus.driver) : "")
+                            }
+                            // Unlike the slash command, the meter is a button:
+                            // it opens the panel outright, so a draft carrying
+                            // attachments or contexts is no reason to refuse.
+                            onOpenUsageLimits={
+                              usageLimitsOffered && usageLimitsKey !== null
+                                ? openUsageLimits
+                                : undefined
+                            }
                             environmentUnavailable={activeEnvironmentUnavailableState}
                             activePendingApproval={activePendingApproval}
                             pendingApprovals={pendingApprovals}
diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index f7d3ac540ccc..e1bdfcadeab4 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -29,6 +29,7 @@ import type {
   RuntimeMode,
   ScopedThreadRef,
   ServerProvider,
+  ServerProviderUsageLimits,
   ThreadId,
   SnapShotSource,
 } from "@t3tools/contracts";
@@ -48,7 +49,7 @@ import {
 } from "@t3tools/client-runtime/text-paste";
 import { serializeComposerFileLink } from "@t3tools/shared/composerTrigger";
 import { createModelSelection, normalizeModelSlug } from "@t3tools/shared/model";
-import { USAGE_LIMITS_COMMAND } from "@t3tools/shared/usageLimits";
+import { USAGE_LIMITS_COMMAND, usageLimitsMeterWindow } from "@t3tools/shared/usageLimits";
 import {
   Fragment,
   memo,
@@ -922,6 +923,7 @@ function ComposerCommandMenuLayer(props: { anchor: HTMLElement | null; children:
 import { Button } from "../ui/button";
 import { Select, SelectItem, SelectPopup, SelectValue } from "../ui/select";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+import { UsageLimitsMeter } from "./UsageLimitsMeter";
 import { toastManager } from "../ui/toast";
 import {
   FileIcon,
@@ -1310,6 +1312,11 @@ export interface ChatComposerProps {
   bannerItems: readonly ComposerBannerStackItem[];
   /** Picking /usage-limits from the menu is the action itself; the draft keeps nothing of it. */
   onUsageLimitsCommand?: (() => void) | undefined;
+  /** Subscription usage for the selected provider, for the opt-in footer meter. */
+  usageLimits?: ServerProviderUsageLimits | undefined;
+  usageLimitsProviderLabel: string;
+  /** Opens the same panel /usage-limits does; undefined when there is nothing to show. */
+  onOpenUsageLimits?: (() => void) | undefined;
   environmentUnavailable: {
     readonly label: string;
     readonly connection: EnvironmentConnectionPresentation;
@@ -4837,11 +4844,23 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   ]);
 
   const restingHiddenBlockCount = composerControlsInStrip ? restingControlsHiddenBlockCount : 0;
+  // The block only exists when there is a reading to draw, so an unsupported
+  // provider leaves no separator hanging in the footer.
+  const showUsageLimitsMeter =
+    settings.usageLimitsMeterEnabled && usageLimitsMeterWindow(props.usageLimits) !== null;
   const composerControlsCompact = !composerControlsInStrip && isComposerFooterCompact;
+  // Which blocks the footer would render, in order, so each block's own
+  // `hidden` prop and the overflow menu read the same slice.
+  const restingBlockIds = [
+    ...(providerTraitsPicker ? ["traits"] : []),
+    "mode",
+    ...(showUsageLimitsMeter ? ["usage-limits"] : []),
+  ];
+  const hiddenIds = restingBlockIds.slice(restingBlockIds.length - restingHiddenBlockCount);
   const restingProviderTraitsPicker = renderProviderTraitsPicker({
     ...providerTraitsPickerInput,
     size: "xs",
-    hidden: composerControlsHidden || restingHiddenBlockCount > 1,
+    hidden: composerControlsHidden || hiddenIds.includes("traits"),
   });
   const restingBlockDefs = [
     ...(providerTraitsPicker
@@ -4865,16 +4884,36 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
           interactionMode={interactionMode}
           runtimeMode={runtimeMode}
           size={composerControlsInStrip ? "xs" : "sm"}
-          hidden={composerControlsHidden || restingHiddenBlockCount > 0}
+          hidden={composerControlsHidden || hiddenIds.includes("mode")}
           onToggleInteractionMode={toggleInteractionMode}
           onRuntimeModeChange={handleRuntimeModeChange}
         />
       ),
     },
+    // Trailing, so the least load-bearing control is the first into overflow.
+    // It has no menu entry there: the meter is a glance, not an action.
+    ...(showUsageLimitsMeter
+      ? [
+          {
+            id: "usage-limits",
+            content: (
+              <>
+                <ComposerControlSeparator size={composerControlsInStrip ? "xs" : "sm"} />
+                <UsageLimitsMeter
+                  limits={props.usageLimits}
+                  providerLabel={props.usageLimitsProviderLabel}
+                  size={composerControlsInStrip ? "xs" : "sm"}
+                  onOpen={props.onOpenUsageLimits}
+                />
+              </>
+            ),
+          },
+        ]
+      : []),
   ];
-  const hiddenRestingBlockIds = restingBlockDefs
-    .slice(restingBlockDefs.length - restingHiddenBlockCount)
-    .map((def) => def.id);
+  // The meter has no menu entry: it is a glance, not an action. Hiding only
+  // the meter must not raise an overflow trigger holding nothing new.
+  const overflowIds = hiddenIds.filter((id) => id !== "usage-limits");
   const composerControls = showProviderUnavailable ? (
     <Button
       type="button"
@@ -4981,23 +5020,21 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
           {composerControlsInStrip ? (
             <div
               data-resting-controls-overflow
-              aria-hidden={hiddenRestingBlockIds.length === 0 || undefined}
-              inert={hiddenRestingBlockIds.length === 0 || undefined}
+              aria-hidden={overflowIds.length === 0 || undefined}
+              inert={overflowIds.length === 0 || undefined}
               className={cn(
                 "min-w-0 shrink-0",
-                hiddenRestingBlockIds.length === 0 && "pointer-events-none invisible absolute",
+                overflowIds.length === 0 && "pointer-events-none invisible absolute",
               )}
             >
               <CompactComposerControlsMenu
                 interactionMode={interactionMode}
                 runtimeMode={runtimeMode}
                 size="xs"
-                hidden={composerControlsHidden || hiddenRestingBlockIds.length === 0}
-                showInteractionModeToggle={
-                  planModeUiEnabled && hiddenRestingBlockIds.includes("mode")
-                }
+                hidden={composerControlsHidden || overflowIds.length === 0}
+                showInteractionModeToggle={planModeUiEnabled && overflowIds.includes("mode")}
                 traitsMenuContent={
-                  hiddenRestingBlockIds.includes("traits") ? providerTraitsMenuContent : undefined
+                  overflowIds.includes("traits") ? providerTraitsMenuContent : undefined
                 }
                 onToggleInteractionMode={toggleInteractionMode}
                 onRuntimeModeChange={handleRuntimeModeChange}
diff --git a/apps/web/src/components/chat/UsageLimitsMeter.tsx b/apps/web/src/components/chat/UsageLimitsMeter.tsx
new file mode 100644
index 000000000000..88797d56c6bd
--- /dev/null
+++ b/apps/web/src/components/chat/UsageLimitsMeter.tsx
@@ -0,0 +1,94 @@
+import type { ServerProviderUsageLimits } from "@t3tools/contracts";
+import {
+  formatResetsIn,
+  remainingPercent as windowRemainingPercent,
+  usageLimitsMeterWindow,
+  windowExpired,
+} from "@t3tools/shared/usageLimits";
+
+import { useNowMinute } from "~/hooks/useNowMinute";
+import { ComposerControl, type ComposerControlSize } from "./ComposerControl";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+
+/**
+ * How much of the selected provider's subscription is left, in the width of a
+ * word. Opt-in, and a shortcut into the existing `/usage-limits` panel rather
+ * than a surface of its own: the meter answers "can I keep going", the panel
+ * answers everything else.
+ *
+ * A reading whose window has already rolled over shows as unknown. The quota
+ * it reports belongs to a window that no longer exists, so drawing it as a
+ * full bar would promise headroom nobody has measured.
+ */
+export function UsageLimitsMeter(props: {
+  limits: ServerProviderUsageLimits | undefined;
+  providerLabel: string;
+  size: ComposerControlSize;
+  onOpen: (() => void) | undefined;
+}) {
+  const { limits, providerLabel, size, onOpen } = props;
+  // The app's shared minute clock, not a timer of our own: the countdown and
+  // the rollover into "expired" stay honest, and the meter repaints at most
+  // once a minute instead of continuously.
+  const now = Date.parse(`${useNowMinute()}:00.000Z`);
+  const window = usageLimitsMeterWindow(limits);
+  if (!window) return null;
+
+  const remainingPercent = windowRemainingPercent(window);
+  const stale = windowExpired(window, now);
+  const fillColor =
+    remainingPercent <= 5
+      ? "var(--color-error)"
+      : remainingPercent <= 20
+        ? "var(--color-warning)"
+        : "color-mix(in oklab, var(--color-muted-foreground) 72%, transparent)";
+  const resets = stale ? null : formatResetsIn(window, now);
+  const label = stale
+    ? `Usage limits: ${window.label} reading expired`
+    : `Usage limits: ${remainingPercent}% of ${window.label} left`;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <ComposerControl
+            size={size}
+            type="button"
+            aria-label={label}
+            className="shrink-0 gap-1.5 whitespace-nowrap"
+            disabled={onOpen === undefined}
+            // Footer controls never take the caret from the editor.
+            onPointerDown={(event) => event.preventDefault()}
+            onClick={onOpen}
+          />
+        }
+      >
+        <span
+          className="h-1 w-14 shrink-0 overflow-hidden rounded-full"
+          role="progressbar"
+          aria-valuemin={0}
+          aria-valuemax={100}
+          {...(stale ? {} : { "aria-valuenow": remainingPercent })}
+          style={{
+            backgroundColor: "color-mix(in oklab, var(--color-muted-foreground) 24%, transparent)",
+          }}
+        >
+          {stale ? null : (
+            <span
+              className="block h-full rounded-full"
+              style={{ width: `${remainingPercent}%`, backgroundColor: fillColor }}
+            />
+          )}
+        </span>
+        <span aria-hidden="true" className="tabular-nums">
+          {stale ? "—" : `${remainingPercent}%`}
+        </span>
+      </TooltipTrigger>
+      <TooltipPopup side="top">
+        {stale
+          ? `${providerLabel} · ${window.label}: reading expired, send a message to refresh`
+          : `${providerLabel} · ${window.label}: ${remainingPercent}% left${resets ? ` · ${resets}` : ""}`}
+      </TooltipPopup>
+    </Tooltip>
+  );
+}
diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index 5238cf19e190..8b98b564f2a5 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -584,6 +584,9 @@ export function useSettingsRestore(onRestored?: () => void) {
       ...(settings.contextWindowMeterEnabled !== DEFAULT_UNIFIED_SETTINGS.contextWindowMeterEnabled
         ? ["Context window indicator"]
         : []),
+      ...(settings.usageLimitsMeterEnabled !== DEFAULT_UNIFIED_SETTINGS.usageLimitsMeterEnabled
+        ? ["Usage limits meter"]
+        : []),
       ...(settings.responseStreamingMode !== DEFAULT_UNIFIED_SETTINGS.responseStreamingMode
         ? ["Response streaming"]
         : []),
@@ -649,6 +652,7 @@ export function useSettingsRestore(onRestored?: () => void) {
       settings.proactivePanelsEnabled,
       settings.environmentIdentificationMode,
       settings.contextWindowMeterEnabled,
+      settings.usageLimitsMeterEnabled,
       settings.fontFamilyCode,
       settings.fontFamilyComposer,
       settings.fontFamilySans,
@@ -754,6 +758,7 @@ export function useSettingsRestore(onRestored?: () => void) {
       composerCollapseOnScroll: DEFAULT_UNIFIED_SETTINGS.composerCollapseOnScroll,
       followUpBehavior: DEFAULT_UNIFIED_SETTINGS.followUpBehavior,
       contextWindowMeterEnabled: DEFAULT_UNIFIED_SETTINGS.contextWindowMeterEnabled,
+      usageLimitsMeterEnabled: DEFAULT_UNIFIED_SETTINGS.usageLimitsMeterEnabled,
       environmentIdentificationMode: DEFAULT_UNIFIED_SETTINGS.environmentIdentificationMode,
       glassOpacity: DEFAULT_UNIFIED_SETTINGS.glassOpacity,
       panelAnimationDurationMs: DEFAULT_UNIFIED_SETTINGS.panelAnimationDurationMs,
@@ -2567,6 +2572,33 @@ export function GeneralSettingsPanel() {
           }
         />
 
+        <SettingsRow
+          {...searchableSetting("usage-limits-meter")}
+          description="Show how much of the selected provider's subscription quota is left in the composer. Click it for the full breakdown."
+          resetAction={
+            settings.usageLimitsMeterEnabled !==
+            DEFAULT_UNIFIED_SETTINGS.usageLimitsMeterEnabled ? (
+              <SettingResetButton
+                label="usage limits meter"
+                onClick={() =>
+                  updateSettings({
+                    usageLimitsMeterEnabled: DEFAULT_UNIFIED_SETTINGS.usageLimitsMeterEnabled,
+                  })
+                }
+              />
+            ) : null
+          }
+          control={
+            <Switch
+              checked={settings.usageLimitsMeterEnabled}
+              onCheckedChange={(checked) =>
+                updateSettings({ usageLimitsMeterEnabled: Boolean(checked) })
+              }
+              aria-label="Usage limits meter"
+            />
+          }
+        />
+
         <SettingsRow
           {...searchableSetting("composer-collapse")}
           description="Rest the composer of an existing thread into a single line when you scroll the conversation. Focus the composer or start typing to expand it again."
diff --git a/apps/web/src/components/settings/settingsSearch.ts b/apps/web/src/components/settings/settingsSearch.ts
index 7e999417f2a8..ea868590ac98 100644
--- a/apps/web/src/components/settings/settingsSearch.ts
+++ b/apps/web/src/components/settings/settingsSearch.ts
@@ -292,6 +292,12 @@ export const SETTINGS_SEARCH_ITEMS = [
     to: "/settings/general",
     searchTerms: ["command menu dollar $ slash /"],
   },
+  {
+    id: "usage-limits-meter",
+    title: "Usage limits meter",
+    to: "/settings/general",
+    searchTerms: ["composer quota subscription remaining rate limit weekly session percent"],
+  },
   {
     id: "composer-collapse",
     title: "Collapse composer on scroll",
diff --git a/docs/user/usage.md b/docs/user/usage.md
index dbef802509b3..209a06729a4f 100644
--- a/docs/user/usage.md
+++ b/docs/user/usage.md
@@ -69,6 +69,9 @@ current model's limits without leaving the conversation. The result opens above
 closes when you dismiss it or send your next message. It uses the same snapshot as **Usage → Limits**, so it does not run the agent or refresh
 anything. The command is offered only for providers that appear under **Usage → Limits**.
 
+Turn on **Settings → General → Usage limits meter** to keep a small quota meter in the composer;
+clicking it opens the same panel.
+
 API-key accounts may not report subscription limits. This also applies to Claude connections
 using a proxy through `ANTHROPIC_AUTH_TOKEN`.
 
diff --git a/packages/contracts/src/settings.test.ts b/packages/contracts/src/settings.test.ts
index ba612edaf26b..970a2c2df521 100644
--- a/packages/contracts/src/settings.test.ts
+++ b/packages/contracts/src/settings.test.ts
@@ -542,6 +542,18 @@ describe("ClientSettings follow-up behavior", () => {
   });
 });
 
+describe("ClientSettings usage limits meter", () => {
+  it("defaults off and accepts opting in", () => {
+    expect(decodeClientSettings({}).usageLimitsMeterEnabled).toBe(false);
+    expect(decodeClientSettings({ usageLimitsMeterEnabled: true }).usageLimitsMeterEnabled).toBe(
+      true,
+    );
+    expect(
+      decodeClientSettingsPatch({ usageLimitsMeterEnabled: true }).usageLimitsMeterEnabled,
+    ).toBe(true);
+  });
+});
+
 describe("ClientSettings composer collapse", () => {
   it("collapses on scroll by default and accepts opting out", () => {
     expect(decodeClientSettings({}).composerCollapseOnScroll).toBe(true);
diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts
index 1c53b36037ba..5a484380dee4 100644
--- a/packages/contracts/src/settings.ts
+++ b/packages/contracts/src/settings.ts
@@ -427,6 +427,9 @@ export const ClientSettingsSchema = Schema.Struct({
   // Legacy context window meter. The composer hides it by default; users who
   // still want the old usage indicator can restore it from Settings.
   contextWindowMeterEnabled: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(false))),
+  // Opt-in composer meter for the selected provider's subscription quota.
+  // Off by default: most users never think about limits until they hit one.
+  usageLimitsMeterEnabled: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(false))),
   // Desktop resting composer: scrolling an existing thread's conversation
   // settles the composer into its single-line layout. Losing focus never does.
   composerCollapseOnScroll: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(true))),
@@ -1501,6 +1504,7 @@ export const ClientSettingsPatch = Schema.Struct({
   ),
   planModeEnabled: Schema.optionalKey(Schema.Boolean),
   contextWindowMeterEnabled: Schema.optionalKey(Schema.Boolean),
+  usageLimitsMeterEnabled: Schema.optionalKey(Schema.Boolean),
   composerCollapseOnScroll: Schema.optionalKey(Schema.Boolean),
   followUpBehavior: Schema.optionalKey(Schema.Literals(["queue", "steer"])),
   proactivePanelsEnabled: Schema.optionalKey(Schema.Boolean),
diff --git a/packages/shared/src/usageLimits.test.ts b/packages/shared/src/usageLimits.test.ts
index 0ef53b1e7f55..b7efb5142e31 100644
--- a/packages/shared/src/usageLimits.test.ts
+++ b/packages/shared/src/usageLimits.test.ts
@@ -22,6 +22,8 @@ import {
   paceOf,
   providersWithLimits,
   remainingPercent,
+  usageLimitsMeterWindow,
+  windowExpired,
 } from "./usageLimits.ts";
 
 const now = Date.parse("2026-09-03T12:00:00.000Z");
@@ -1008,3 +1010,67 @@ describe("isUsageLimitsCommand", () => {
     expect(isUsageLimitsCommand("/usage")).toBe(false);
   });
 });
+
+describe("usageLimitsMeterWindow", () => {
+  const limits = (windows: ReadonlyArray<Record<string, unknown>>) => ({
+    checkedAt: "2026-09-03T11:00:00.000Z",
+    windows: windows as never,
+  });
+
+  it("has nothing to show without a usable reading", () => {
+    expect(usageLimitsMeterWindow(undefined)).toBeNull();
+    expect(usageLimitsMeterWindow(limits([]))).toBeNull();
+    expect(usageLimitsMeterWindow(limits([window]))).not.toBeNull();
+    expect(
+      usageLimitsMeterWindow({ ...limits([window]), unavailable: { reason: "unsupported" } }),
+    ).toBeNull();
+    expect(
+      usageLimitsMeterWindow({ ...limits([window]), unavailable: { reason: "probeFailed" } }),
+    ).toBeNull();
+  });
+
+  it("prefers the session window even when another has less left", () => {
+    const chosen = usageLimitsMeterWindow(
+      limits([
+        { ...window, id: "weekly", kind: "weekly", label: "Weekly", usedPercent: 90 },
+        { ...window, usedPercent: 40 },
+      ]),
+    );
+
+    expect(chosen?.kind).toBe("session");
+    expect(chosen ? remainingPercent(chosen) : null).toBe(60);
+  });
+
+  it("falls back to the window with the least left, ties to the shorter", () => {
+    expect(
+      usageLimitsMeterWindow(
+        limits([
+          { ...window, id: "monthly", kind: "monthly", label: "Monthly", usedPercent: 20 },
+          { ...window, id: "weekly", kind: "weekly", label: "Weekly", usedPercent: 90 },
+        ]),
+      )?.id,
+    ).toBe("weekly");
+    expect(
+      usageLimitsMeterWindow(
+        limits([
+          { ...window, id: "monthly", kind: "monthly", label: "Monthly" },
+          { ...window, id: "weekly", kind: "weekly", label: "Weekly" },
+        ]),
+      )?.kind,
+    ).toBe("weekly");
+  });
+});
+
+describe("windowExpired", () => {
+  it("expires a window at and after its reset, not before", () => {
+    expect(windowExpired(window, now)).toBe(false);
+    expect(windowExpired(window, Date.parse(window.resetsAt))).toBe(true);
+    expect(windowExpired(window, now + 5 * 60 * 60_000)).toBe(true);
+  });
+
+  it("never expires a window that reports no reset", () => {
+    expect(windowExpired({ ...window, resetsAt: undefined }, now + 365 * 24 * 60 * 60_000)).toBe(
+      false,
+    );
+  });
+});
diff --git a/packages/shared/src/usageLimits.ts b/packages/shared/src/usageLimits.ts
index 17ba1feab5d6..8bfa43ac98b7 100644
--- a/packages/shared/src/usageLimits.ts
+++ b/packages/shared/src/usageLimits.ts
@@ -407,6 +407,39 @@ export function remainingPercent(window: ServerProviderUsageWindow): number {
   return Math.round(100 - Math.max(0, Math.min(100, window.usedPercent)));
 }
 
+/**
+ * The one window a compact meter shows, or null when there is nothing to draw.
+ * The session window wins when the provider reports one: it is the number
+ * Claude Code and Codex put in their own status lines, and the one that moves
+ * while you work. Providers without a session window fall back to whichever
+ * window has the least left, ties going to the shortest. The choice never
+ * depends on the clock, so deciding whether to mount the meter does not need one.
+ */
+export function usageLimitsMeterWindow(
+  limits: ServerProviderUsageLimits | undefined,
+): ServerProviderUsageWindow | null {
+  if (!limits || limitsNotice(limits) !== null) return null;
+  return (
+    limits.windows.find((window) => window.kind === "session") ??
+    [...limits.windows].sort(
+      (left, right) =>
+        remainingPercent(left) - remainingPercent(right) ||
+        WINDOW_KIND_ORDER[left.kind] - WINDOW_KIND_ORDER[right.kind],
+    )[0] ??
+    null
+  );
+}
+
+/**
+ * Whether a reading can still be trusted. A window that has rolled over since
+ * it was read must render as unknown, never as its number: the quota it
+ * reports belongs to a window that no longer exists.
+ */
+export function windowExpired(window: ServerProviderUsageWindow, now: number): boolean {
+  const resetsAt = resetMillis(window);
+  return resetsAt !== null && resetsAt <= now;
+}
+
 function resetMillis(window: ServerProviderUsageWindow): number | null {
   if (window.resetsAt === undefined) return null;
   const at = Date.parse(window.resetsAt);

From d9465ced01afb18b1e2775b0cab04670d65218ca Mon Sep 17 00:00:00 2001
From: Vitalii Yehorov <vitalyiegorov@gmail.com>
Date: Tue, 15 Sep 2026 14:43:40 +0200
Subject: [PATCH 2/6] fix(web): keep the resting overflow honest when only the
 meter hides

The resting layout reserved overflow-trigger width whenever any block was
hidden, but hiding only the meter renders no trigger, so a band of widths
pushed the mode control into the menu although it fit inline. The layout
now knows how many trailing blocks have no menu entry.

Also break equal-remaining ties by reported window duration before kind,
so a short "other" window is not passed over for a longer weekly one.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 apps/web/src/components/chat/ChatComposer.tsx | 16 +++++++-----
 .../components/composerFooterLayout.test.ts   | 16 ++++++++++++
 .../src/components/composerFooterLayout.ts    |  7 ++++--
 packages/shared/src/usageLimits.test.ts       | 25 +++++++++++++++++++
 packages/shared/src/usageLimits.ts            | 19 +++++++++++---
 5 files changed, 71 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index e1bdfcadeab4..e6ff2f65e006 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -987,10 +987,12 @@ const extendReplacementRangeForTrailingSpace = (
   return text[rangeEnd] === " " ? rangeEnd + 1 : rangeEnd;
 };
 
-function useRestingComposerControlsLayout(host: HTMLDivElement | null) {
+function useRestingComposerControlsLayout(host: HTMLDivElement | null, menulessTrailingCount = 0) {
   const controlsRef = useRef<HTMLDivElement>(null);
   const hostRef = useRef(host);
   hostRef.current = host;
+  const menulessTrailingCountRef = useRef(menulessTrailingCount);
+  menulessTrailingCountRef.current = menulessTrailingCount;
   const [layout, setLayout] = useState({ hiddenCount: 0, visible: true });
 
   const measure = useCallback(() => {
@@ -1007,6 +1009,7 @@ function useRestingComposerControlsLayout(host: HTMLDivElement | null) {
     setLayout((current) => {
       const next = resolveRestingComposerControlsLayout({
         ...measurement,
+        menulessTrailingCount: menulessTrailingCountRef.current,
         hostWidth,
         previous: current,
       });
@@ -2594,11 +2597,16 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     isComposerOwned: true,
   } satisfies Parameters<typeof renderProviderTraitsPicker>[0];
   const providerTraitsPicker = renderProviderTraitsPicker(providerTraitsPickerInput);
+  // The block only exists when there is a reading to draw, so an unsupported
+  // provider leaves no separator hanging in the footer. It is also the one
+  // trailing block with no overflow menu entry, which the layout needs to know.
+  const showUsageLimitsMeter =
+    settings.usageLimitsMeterEnabled && usageLimitsMeterWindow(props.usageLimits) !== null;
   const {
     controlsRef: restingComposerControlsRef,
     hiddenBlockCount: restingControlsHiddenBlockCount,
     controlsVisible: restingControlsVisible,
-  } = useRestingComposerControlsLayout(restingControlsHost);
+  } = useRestingComposerControlsLayout(restingControlsHost, showUsageLimitsMeter ? 1 : 0);
   const pendingPrimaryAction = useMemo(
     () =>
       activePendingProgress
@@ -4844,10 +4852,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   ]);
 
   const restingHiddenBlockCount = composerControlsInStrip ? restingControlsHiddenBlockCount : 0;
-  // The block only exists when there is a reading to draw, so an unsupported
-  // provider leaves no separator hanging in the footer.
-  const showUsageLimitsMeter =
-    settings.usageLimitsMeterEnabled && usageLimitsMeterWindow(props.usageLimits) !== null;
   const composerControlsCompact = !composerControlsInStrip && isComposerFooterCompact;
   // Which blocks the footer would render, in order, so each block's own
   // `hidden` prop and the overflow menu read the same slice.
diff --git a/apps/web/src/components/composerFooterLayout.test.ts b/apps/web/src/components/composerFooterLayout.test.ts
index 5c0e4327d959..24297da03a5d 100644
--- a/apps/web/src/components/composerFooterLayout.test.ts
+++ b/apps/web/src/components/composerFooterLayout.test.ts
@@ -210,6 +210,22 @@ describe("resolveRestingComposerControlsLayout", () => {
     });
   });
 
+  it("reserves no trigger width when only menuless trailing blocks hide", () => {
+    // Hiding the one menuless block shows no trigger: 149 + 60 + 4 = 213,
+    // where reserving the trigger would have needed 149 + 60 + 24 + 4 * 2 = 241.
+    expect(
+      resolveRestingComposerControlsLayout({
+        ...base,
+        menulessTrailingCount: 1,
+        hostWidth: 240,
+      }),
+    ).toEqual({ hiddenCount: 1, visible: true });
+    expect(resolveRestingComposerControlsLayout({ ...base, hostWidth: 240 })).toEqual({
+      hiddenCount: 2,
+      visible: true,
+    });
+  });
+
   it("shrinks the picker after moving every trailing block into overflow", () => {
     expect(resolveRestingComposerControlsLayout({ ...base, hostWidth: 176 })).toEqual({
       hiddenCount: 2,
diff --git a/apps/web/src/components/composerFooterLayout.ts b/apps/web/src/components/composerFooterLayout.ts
index 42f466c2ae9d..3b9edd973645 100644
--- a/apps/web/src/components/composerFooterLayout.ts
+++ b/apps/web/src/components/composerFooterLayout.ts
@@ -113,6 +113,8 @@ export interface RestingComposerControlsMeasurement {
   minimumFixedWidth: number;
   blockWidths: readonly number[];
   overflowWidth: number;
+  /** Trailing blocks that have no overflow menu entry, so hiding only them shows no trigger. */
+  menulessTrailingCount?: number;
 }
 
 function restingComposerControlsWidth(
@@ -122,11 +124,12 @@ function restingComposerControlsWidth(
 ): number {
   const { blockWidths, gap } = input;
   const visibleCount = blockWidths.length - hiddenCount;
+  const showsOverflow = hiddenCount > (input.menulessTrailingCount ?? 0);
   return (
     fixedWidth +
     blockWidths.slice(0, visibleCount).reduce((sum, width) => sum + width, 0) +
-    (hiddenCount > 0 ? input.overflowWidth : 0) +
-    gap * (visibleCount + (hiddenCount > 0 ? 1 : 0))
+    (showsOverflow ? input.overflowWidth : 0) +
+    gap * (visibleCount + (showsOverflow ? 1 : 0))
   );
 }
 
diff --git a/packages/shared/src/usageLimits.test.ts b/packages/shared/src/usageLimits.test.ts
index b7efb5142e31..6ba07bd3b819 100644
--- a/packages/shared/src/usageLimits.test.ts
+++ b/packages/shared/src/usageLimits.test.ts
@@ -1059,6 +1059,31 @@ describe("usageLimitsMeterWindow", () => {
       )?.kind,
     ).toBe("weekly");
   });
+
+  it("breaks a tie on reported duration before window kind", () => {
+    expect(
+      usageLimitsMeterWindow(
+        limits([
+          { ...window, id: "weekly", kind: "weekly", label: "Weekly", windowDurationMins: 10080 },
+          { ...window, id: "hourly", kind: "other", label: "Hourly", windowDurationMins: 60 },
+        ]),
+      )?.id,
+    ).toBe("hourly");
+    expect(
+      usageLimitsMeterWindow(
+        limits([
+          { ...window, id: "other", kind: "other", label: "Other", windowDurationMins: undefined },
+          {
+            ...window,
+            id: "weekly",
+            kind: "weekly",
+            label: "Weekly",
+            windowDurationMins: undefined,
+          },
+        ]),
+      )?.kind,
+    ).toBe("weekly");
+  });
 });
 
 describe("windowExpired", () => {
diff --git a/packages/shared/src/usageLimits.ts b/packages/shared/src/usageLimits.ts
index 8bfa43ac98b7..e75c327b9cff 100644
--- a/packages/shared/src/usageLimits.ts
+++ b/packages/shared/src/usageLimits.ts
@@ -412,8 +412,10 @@ export function remainingPercent(window: ServerProviderUsageWindow): number {
  * The session window wins when the provider reports one: it is the number
  * Claude Code and Codex put in their own status lines, and the one that moves
  * while you work. Providers without a session window fall back to whichever
- * window has the least left, ties going to the shortest. The choice never
- * depends on the clock, so deciding whether to mount the meter does not need one.
+ * window has the least left. Ties go to the shorter window by reported
+ * duration, and to the shorter kind when a duration is missing. The choice
+ * never depends on the clock, so deciding whether to mount the meter does not
+ * need one.
  */
 export function usageLimitsMeterWindow(
   limits: ServerProviderUsageLimits | undefined,
@@ -423,13 +425,22 @@ export function usageLimitsMeterWindow(
     limits.windows.find((window) => window.kind === "session") ??
     [...limits.windows].sort(
       (left, right) =>
-        remainingPercent(left) - remainingPercent(right) ||
-        WINDOW_KIND_ORDER[left.kind] - WINDOW_KIND_ORDER[right.kind],
+        remainingPercent(left) - remainingPercent(right) || byWindowLength(left, right),
     )[0] ??
     null
   );
 }
 
+/** Shorter window first: by reported duration when both report one, else by kind. */
+function byWindowLength(left: ServerProviderUsageWindow, right: ServerProviderUsageWindow): number {
+  const leftMins = left.windowDurationMins;
+  const rightMins = right.windowDurationMins;
+  if (leftMins !== undefined && rightMins !== undefined && leftMins !== rightMins) {
+    return leftMins - rightMins;
+  }
+  return WINDOW_KIND_ORDER[left.kind] - WINDOW_KIND_ORDER[right.kind];
+}
+
 /**
  * Whether a reading can still be trusted. A window that has rolled over since
  * it was read must render as unknown, never as its number: the quota it

From f590e4c8cb55c5cd535a5ee3afed31baa1ff240f Mon Sep 17 00:00:00 2001
From: Vitalii Yehorov <vitalyiegorov@gmail.com>
Date: Tue, 15 Sep 2026 14:51:46 +0200
Subject: [PATCH 3/6] fix(web): keep the usage meter tooltip reachable without
 a click target

A natively disabled button cannot be hovered or focused, so the percent and
reset tooltip was unreachable when there was nothing to open. aria-disabled
keeps the control inert for clicks while the tooltip still works.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 apps/web/src/components/chat/UsageLimitsMeter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/chat/UsageLimitsMeter.tsx b/apps/web/src/components/chat/UsageLimitsMeter.tsx
index 88797d56c6bd..2d5d86a2a0b7 100644
--- a/apps/web/src/components/chat/UsageLimitsMeter.tsx
+++ b/apps/web/src/components/chat/UsageLimitsMeter.tsx
@@ -56,7 +56,7 @@ export function UsageLimitsMeter(props: {
             type="button"
             aria-label={label}
             className="shrink-0 gap-1.5 whitespace-nowrap"
-            disabled={onOpen === undefined}
+            aria-disabled={onOpen === undefined || undefined}
             // Footer controls never take the caret from the editor.
             onPointerDown={(event) => event.preventDefault()}
             onClick={onOpen}

From 07988f07a6e753b0d60606c2bb7929bbe107f542 Mon Sep 17 00:00:00 2001
From: Vitalii Yehorov <vitalyiegorov@gmail.com>
Date: Tue, 15 Sep 2026 19:19:06 +0200
Subject: [PATCH 4/6] fix(web): keep the resting hidden list stable when the
 meter block leaves

The hidden-block count comes from the last measurement, so it can outlive
the block list it was taken from: the opt-in meter leaves when its setting
is toggled off or its reading ages out. The unclamped slice then counted
back from the end and disagreed with the render loop for a frame. One
clamped list now drives the out-of-flow wrapper, each block's hidden prop,
and the overflow menu.

Adds an invariant sweep over 1-3 blocks, with and without a menuless
trailing block, across host widths.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 apps/web/src/components/chat/ChatComposer.tsx |  12 +-
 .../components/composerFooterLayout.test.ts   | 122 ++++++++++++++++++
 .../src/components/composerFooterLayout.ts    |  17 +++
 3 files changed, 146 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index e6ff2f65e006..d8bd9b8021f3 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -186,6 +186,7 @@ import {
   COMPOSER_FOOTER_WIDE_ACTIONS_COMPACT_BREAKPOINT_PX,
   getRestingComposerImagePreviewCounts,
   resolveRestingComposerControlsLayout,
+  resolveRestingHiddenBlockIds,
   shouldAnimateComposerRestingTransition,
   shouldUseCompactComposerPrimaryActions,
   shouldUseCompactComposerFooter,
@@ -4853,14 +4854,15 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
 
   const restingHiddenBlockCount = composerControlsInStrip ? restingControlsHiddenBlockCount : 0;
   const composerControlsCompact = !composerControlsInStrip && isComposerFooterCompact;
-  // Which blocks the footer would render, in order, so each block's own
-  // `hidden` prop and the overflow menu read the same slice.
+  // Which blocks the footer would render, in order. The wrapper that takes a
+  // block out of flow, the block's own `hidden` prop, and the overflow menu
+  // all read the one hidden list, so they cannot disagree.
   const restingBlockIds = [
     ...(providerTraitsPicker ? ["traits"] : []),
     "mode",
     ...(showUsageLimitsMeter ? ["usage-limits"] : []),
   ];
-  const hiddenIds = restingBlockIds.slice(restingBlockIds.length - restingHiddenBlockCount);
+  const hiddenIds = resolveRestingHiddenBlockIds(restingBlockIds, restingHiddenBlockCount);
   const restingProviderTraitsPicker = renderProviderTraitsPicker({
     ...providerTraitsPickerInput,
     size: "xs",
@@ -5001,11 +5003,11 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
         />
       ) : (
         <>
-          {restingBlockDefs.map((def, index) => {
+          {restingBlockDefs.map((def) => {
             if (!composerControlsInStrip) {
               return <Fragment key={def.id}>{def.content}</Fragment>;
             }
-            const hidden = index >= restingBlockDefs.length - restingHiddenBlockCount;
+            const hidden = hiddenIds.includes(def.id);
             return (
               <div
                 key={def.id}
diff --git a/apps/web/src/components/composerFooterLayout.test.ts b/apps/web/src/components/composerFooterLayout.test.ts
index 24297da03a5d..f8086ec286bb 100644
--- a/apps/web/src/components/composerFooterLayout.test.ts
+++ b/apps/web/src/components/composerFooterLayout.test.ts
@@ -10,6 +10,7 @@ import {
   resolveScrollToEndClearance,
   resolveRestingComposerControlsLayout,
   resolveRestingComposerControlsNaturalWidth,
+  resolveRestingHiddenBlockIds,
   shouldAnimateComposerRestingTransition,
   shouldUseCompactComposerPrimaryActions,
   shouldUseCompactComposerFooter,
@@ -465,3 +466,124 @@ describe("resolveScrollToEndClearance", () => {
     }
   });
 });
+
+describe("resolveRestingComposerControlsLayout invariants", () => {
+  const GAP = 4;
+  const OVERFLOW = 24;
+  // Trailing blocks are added from the left, so a 3-block case is the
+  // traits/mode/meter footer and a 1-block case is mode alone.
+  const ALL_BLOCK_WIDTHS = [60, 140, 78];
+  // The meter is deliberately narrower than the overflow trigger it would
+  // otherwise raise, which is the case menulessTrailingCount exists for.
+  const cases = ALL_BLOCK_WIDTHS.map((_, index) => ALL_BLOCK_WIDTHS.slice(0, index + 1));
+
+  const measurement = (blockWidths: readonly number[], menulessTrailingCount: number) => ({
+    gap: GAP,
+    naturalFixedWidth: 149,
+    minimumFixedWidth: 105,
+    blockWidths,
+    overflowWidth: OVERFLOW,
+    menulessTrailingCount,
+  });
+
+  /** The width rule restated, so the assertions never chase the implementation. */
+  const widthAt = (
+    input: ReturnType<typeof measurement>,
+    hiddenCount: number,
+    options?: { withOverflow?: boolean },
+  ) => {
+    const visibleCount = input.blockWidths.length - hiddenCount;
+    const showsOverflow = options?.withOverflow ?? hiddenCount > input.menulessTrailingCount;
+    return (
+      input.naturalFixedWidth +
+      input.blockWidths.slice(0, visibleCount).reduce((sum, width) => sum + width, 0) +
+      (showsOverflow ? OVERFLOW : 0) +
+      GAP * (visibleCount + (showsOverflow ? 1 : 0))
+    );
+  };
+
+  for (const blockWidths of cases) {
+    for (const menulessTrailingCount of [0, 1]) {
+      const input = measurement(blockWidths, menulessTrailingCount);
+      const label = `${blockWidths.length} blocks, ${menulessTrailingCount} menuless`;
+
+      it(`keeps the overflow decision sound across widths (${label})`, () => {
+        const everythingFits = widthAt(input, 0);
+        let previousHiddenCount = blockWidths.length;
+        for (let hostWidth = 0; hostWidth <= everythingFits + 8; hostWidth += 3) {
+          const { hiddenCount } = resolveRestingComposerControlsLayout({ ...input, hostWidth });
+          // (d) and (a): never more blocks than exist, and growing the host
+          // never moves a block back into the overflow menu.
+          expect(hiddenCount).toBeLessThanOrEqual(blockWidths.length);
+          expect(hiddenCount).toBeLessThanOrEqual(previousHiddenCount);
+          previousHiddenCount = hiddenCount;
+          // (b): a partial hide has to actually fit.
+          if (hiddenCount < blockWidths.length) {
+            expect(widthAt(input, hiddenCount)).toBeLessThanOrEqual(hostWidth);
+          }
+          // (c): hiding only the menuless trailing block raises no trigger, so
+          // its width must not have been reserved.
+          if (
+            menulessTrailingCount === 1 &&
+            hiddenCount === 1 &&
+            hiddenCount < blockWidths.length
+          ) {
+            expect(widthAt(input, 1, { withOverflow: false })).toBeLessThanOrEqual(hostWidth);
+          }
+        }
+        expect(
+          resolveRestingComposerControlsLayout({ ...input, hostWidth: everythingFits }),
+        ).toEqual({ hiddenCount: 0, visible: true });
+      });
+
+      it(`hides no more than a menuless run would need (${label})`, () => {
+        // (c) again, from the other side: not reserving the trigger can only
+        // ever keep more blocks on screen.
+        for (let hostWidth = 0; hostWidth <= widthAt(input, 0) + 8; hostWidth += 3) {
+          const menuless = resolveRestingComposerControlsLayout({ ...input, hostWidth });
+          const withMenus = resolveRestingComposerControlsLayout({
+            ...input,
+            menulessTrailingCount: 0,
+            hostWidth,
+          });
+          expect(menuless.hiddenCount).toBeLessThanOrEqual(withMenus.hiddenCount);
+        }
+      });
+    }
+  }
+
+  it("survives a menuless count larger than the block list, and no blocks at all", () => {
+    // (e): the meter can leave between the measurement and the next render,
+    // and the provider-unavailable footer has no blocks to hide at all.
+    for (const blockWidths of [[], [60], [60, 140]]) {
+      for (const menulessTrailingCount of [1, 3, 9]) {
+        for (const hostWidth of [0, 120, 200, 400]) {
+          const layout = resolveRestingComposerControlsLayout({
+            ...measurement(blockWidths, menulessTrailingCount),
+            hostWidth,
+            previous: { hiddenCount: 5, visible: true },
+          });
+          expect(layout.hiddenCount).toBeGreaterThanOrEqual(0);
+          expect(layout.hiddenCount).toBeLessThanOrEqual(blockWidths.length);
+        }
+      }
+    }
+  });
+});
+
+describe("resolveRestingHiddenBlockIds", () => {
+  const blocks = ["traits", "mode", "usage-limits"] as const;
+
+  it("hides the trailing blocks the count covers", () => {
+    expect(resolveRestingHiddenBlockIds(blocks, 0)).toEqual([]);
+    expect(resolveRestingHiddenBlockIds(blocks, 1)).toEqual(["usage-limits"]);
+    expect(resolveRestingHiddenBlockIds(blocks, 3)).toEqual(["traits", "mode", "usage-limits"]);
+  });
+
+  it("clamps a count left over from a longer measurement", () => {
+    // The meter left between the measurement and this render.
+    expect(resolveRestingHiddenBlockIds(["traits", "mode"], 3)).toEqual(["traits", "mode"]);
+    expect(resolveRestingHiddenBlockIds([], 2)).toEqual([]);
+    expect(resolveRestingHiddenBlockIds(blocks, -1)).toEqual([]);
+  });
+});
diff --git a/apps/web/src/components/composerFooterLayout.ts b/apps/web/src/components/composerFooterLayout.ts
index 3b9edd973645..6067bc6d40ac 100644
--- a/apps/web/src/components/composerFooterLayout.ts
+++ b/apps/web/src/components/composerFooterLayout.ts
@@ -195,6 +195,23 @@ export function resolveRestingComposerControlsLayout(
   return { hiddenCount, visible };
 }
 
+/**
+ * The trailing block ids a hidden-block count covers.
+ *
+ * The count comes from the last measurement, so the list can be shorter by
+ * the time it is applied: the opt-in usage meter leaves when its setting is
+ * toggled off or its reading ages out. Without the clamp the slice would
+ * count back from the end and hide the wrong blocks until the layout effect
+ * re-measures.
+ */
+export function resolveRestingHiddenBlockIds<Id extends string>(
+  blockIds: readonly Id[],
+  hiddenCount: number,
+): Id[] {
+  const clamped = Math.min(Math.max(hiddenCount, 0), blockIds.length);
+  return blockIds.slice(blockIds.length - clamped);
+}
+
 export function resolveScrollToEndClearance(input: {
   overlayHeight: number;
   mainSurfaceTop: number;

From 41e0b365797fc9e62d8c5f7e2d1a9e72bc68d66d Mon Sep 17 00:00:00 2001
From: Vitalii Yehorov <vitalyiegorov@gmail.com>
Date: Wed, 16 Sep 2026 05:44:06 +0200
Subject: [PATCH 5/6] refactor(web): use a Tailwind class for the usage meter
 track

Macroscope UI Consistency: the static track colour was an inline style;
it belongs in the className. The dynamic fill width/colour stay inline.
---
 apps/web/src/components/chat/UsageLimitsMeter.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/apps/web/src/components/chat/UsageLimitsMeter.tsx b/apps/web/src/components/chat/UsageLimitsMeter.tsx
index 2d5d86a2a0b7..018df09c65be 100644
--- a/apps/web/src/components/chat/UsageLimitsMeter.tsx
+++ b/apps/web/src/components/chat/UsageLimitsMeter.tsx
@@ -64,14 +64,11 @@ export function UsageLimitsMeter(props: {
         }
       >
         <span
-          className="h-1 w-14 shrink-0 overflow-hidden rounded-full"
+          className="h-1 w-14 shrink-0 overflow-hidden rounded-full bg-[color-mix(in_oklab,var(--color-muted-foreground)_24%,transparent)]"
           role="progressbar"
           aria-valuemin={0}
           aria-valuemax={100}
           {...(stale ? {} : { "aria-valuenow": remainingPercent })}
-          style={{
-            backgroundColor: "color-mix(in oklab, var(--color-muted-foreground) 24%, transparent)",
-          }}
         >
           {stale ? null : (
             <span

From 1d6ec1665fb1f9b97a0262f844071265770c9a6b Mon Sep 17 00:00:00 2001
From: Vitalii Yehorov <vitalyiegorov@gmail.com>
Date: Wed, 16 Sep 2026 11:28:33 +0200
Subject: [PATCH 6/6] fix(web): gate the usage meter on usageLimitsOffered

CodeRabbit: activeProviderStatus is the settings-overlaid entry, but
usageLimitsOffered checks the raw provider statuses. When the two
disagree, the meter could render from a snapshot the panel does not
offer, leaving it with no breakdown action. Pass the limits only when
they are offered.
---
 apps/web/src/components/ChatView.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index ed93b1854718..4574d92b9185 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -9647,7 +9647,9 @@ export default function ChatView(props: ChatViewProps) {
                             }
                             // The meter reads the selected instance's own
                             // snapshot; the panel also merges hub-reported accounts.
-                            usageLimits={activeProviderStatus?.usageLimits}
+                            usageLimits={
+                              usageLimitsOffered ? activeProviderStatus?.usageLimits : undefined
+                            }
                             usageLimitsProviderLabel={
                               activeProviderStatus?.displayName?.trim() ||
                               (activeProviderStatus ? String(activeProviderStatus.driver) : "")