feat(web): opt-in usage limits meter in the composer

apps/web/src/components/ChatView.tsx

@@ -9643,6 +9643,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}

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,
@@ -185,6 +186,7 @@ import {
   COMPOSER_FOOTER_WIDE_ACTIONS_COMPACT_BREAKPOINT_PX,
   getRestingComposerImagePreviewCounts,
   resolveRestingComposerControlsLayout,
+  resolveRestingHiddenBlockIds,
   shouldAnimateComposerRestingTransition,
   shouldUseCompactComposerPrimaryActions,
   shouldUseCompactComposerFooter,
@@ -922,6 +924,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,
@@ -985,10 +988,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(() => {
@@ -1005,6 +1010,7 @@ function useRestingComposerControlsLayout(host: HTMLDivElement | null) {
     setLayout((current) => {
       const next = resolveRestingComposerControlsLayout({
         ...measurement,
+        menulessTrailingCount: menulessTrailingCountRef.current,
         hostWidth,
         previous: current,
       });
@@ -1310,6 +1316,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;
@@ -2587,11 +2598,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
@@ -4838,10 +4854,19 @@ 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. 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 = resolveRestingHiddenBlockIds(restingBlockIds, restingHiddenBlockCount);
   const restingProviderTraitsPicker = renderProviderTraitsPicker({
     ...providerTraitsPickerInput,
     size: "xs",
-    hidden: composerControlsHidden || restingHiddenBlockCount > 1,
+    hidden: composerControlsHidden || hiddenIds.includes("traits"),
   });
   const restingBlockDefs = [
     ...(providerTraitsPicker
@@ -4865,16 +4890,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"
@@ -4958,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}
@@ -4981,23 +5026,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}

apps/web/src/components/chat/UsageLimitsMeter.tsx

@@ -0,0 +1,91 @@
+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"
+            aria-disabled={onOpen === undefined || 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 bg-[color-mix(in_oklab,var(--color-muted-foreground)_24%,transparent)]"
+          role="progressbar"
+          aria-valuemin={0}
+          aria-valuemax={100}
+          {...(stale ? {} : { "aria-valuenow": remainingPercent })}
+        >
+          {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>
+  );
+}