feat: Add usage prediction and pace to usage dropdown and settings (#372)

packages/ui/src/components/sections/usage/PaceIndicator.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+import type { PaceInfo } from '@/lib/quota';
+import { getPaceStatusColor, formatRemainingTime } from '@/lib/quota';
+
+interface PaceIndicatorProps {
+  paceInfo: PaceInfo;
+  className?: string;
+  /** Compact mode shows just the status dot and prediction */
+  compact?: boolean;
+}
+
+/**
+ * Visual indicator showing whether usage is on track, slightly fast, or too fast.
+ * Inspired by opencode-bar's pace visualization.
+ */
+export const PaceIndicator: React.FC<PaceIndicatorProps> = ({
+  paceInfo,
+  className,
+  compact = false,
+}) => {
+  const statusColor = getPaceStatusColor(paceInfo.status);
+
+  const statusLabel = React.useMemo(() => {
+    switch (paceInfo.status) {
+      case 'on-track':
+        return 'On track';
+      case 'slightly-fast':
+        return 'Slightly fast';
+      case 'too-fast':
+        return 'Too fast';
+      case 'exhausted':
+        return 'Used up';
+    }
+  }, [paceInfo.status]);
+
+  const predictionTooltip = `Predicted usage at window end based on current pace: ${paceInfo.predictText}`;
+
+  if (compact) {
+    return (
+      <div className={cn('flex items-center gap-1.5', className)}>
+        <div
+          className="h-2 w-2 rounded-full flex-shrink-0"
+          style={{ backgroundColor: statusColor }}
+          title={statusLabel}
+        />
+        <span
+          className="typography-micro tabular-nums"
+          style={{ color: statusColor }}
+          title={paceInfo.isExhausted ? undefined : predictionTooltip}
+        >
+          {paceInfo.isExhausted ? (
+            <>Wait {formatRemainingTime(paceInfo.remainingSeconds)}</>
+          ) : (
+            <>Pred: {paceInfo.predictText}</>
+          )}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('flex items-center justify-between gap-2', className)}>
+      <div className="flex items-center gap-1.5">
+        {!paceInfo.isExhausted && (
+          <span className="typography-micro text-muted-foreground">
+            Pace: {paceInfo.paceRateText}
+          </span>
+        )}
+      </div>
+      <div className="flex items-center gap-1.5">
+        <span
+          className="typography-micro tabular-nums"
+          style={{ color: statusColor }}
+        >
+          {paceInfo.isExhausted ? (
+            <>
+              <span className="font-medium">{statusLabel}</span>
+              <span className="text-muted-foreground"> · Wait </span>
+              <span className="font-medium">{formatRemainingTime(paceInfo.remainingSeconds)}</span>
+            </>
+          ) : (
+            <span title={predictionTooltip}>
+              <span className="text-muted-foreground">Pred: </span>
+              <span className="font-medium">{paceInfo.predictText}</span>
+            </span>
+          )}
+        </span>
+        <div
+          className="h-2 w-2 rounded-full flex-shrink-0"
+          style={{ backgroundColor: statusColor }}
+          title={statusLabel}
+        />
+      </div>
+    </div>
+  );
+};

packages/ui/src/components/sections/usage/UsageCard.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { UsageWindow } from '@/types';
-import { formatPercent, formatWindowLabel } from '@/lib/quota';
+import { formatPercent, formatWindowLabel, calculatePace, calculateExpectedUsagePercent } from '@/lib/quota';
 import { UsageProgressBar } from './UsageProgressBar';
+import { PaceIndicator } from './PaceIndicator';
 import { useQuotaStore } from '@/stores/useQuotaStore';
 import { Switch } from '@/components/ui/switch';
 
@@ -29,6 +30,21 @@ export const UsageCard: React.FC<UsageCardProps> = ({
   const resetLabel = window.resetAfterFormatted ?? window.resetAtFormatted ?? '';
   const windowLabel = formatWindowLabel(title);
 
+  // Calculate pace info for the usage window
+  // Pass the title (window label) to infer windowSeconds when not provided by the API
+  const paceInfo = React.useMemo(() => {
+    return calculatePace(window.usedPercent, window.resetAt, window.windowSeconds, title);
+  }, [window.usedPercent, window.resetAt, window.windowSeconds, title]);
+
+  // Calculate expected marker position for weekly/monthly quotas
+  const expectedMarkerPercent = React.useMemo(() => {
+    if (!paceInfo || paceInfo.dailyAllocationPercent === null) {
+      return null;
+    }
+    // Show marker based on elapsed time ratio
+    return calculateExpectedUsagePercent(paceInfo.elapsedRatio);
+  }, [paceInfo]);
+
   return (
     <div className="rounded-xl border border-[var(--interactive-border)] bg-[var(--surface-elevated)]/60 p-4 shadow-sm">
       <div className="flex items-center justify-between gap-3">
@@ -52,12 +68,23 @@ export const UsageCard: React.FC<UsageCardProps> = ({
       </div>
 
       <div className="mt-3">
-        <UsageProgressBar percent={displayPercent} tonePercent={window.usedPercent} />
+        <UsageProgressBar
+          percent={displayPercent}
+          tonePercent={window.usedPercent}
+          expectedMarkerPercent={expectedMarkerPercent}
+        />
         <div className="mt-1 text-right typography-micro text-muted-foreground text-[10px]">
           {barLabel}
         </div>
       </div>
 
+      {/* Pace indicator - only shown when we have pace info */}
+      {paceInfo && (
+        <div className="mt-2">
+          <PaceIndicator paceInfo={paceInfo} />
+        </div>
+      )}
+
       <div className="mt-3 flex items-center justify-between text-muted-foreground">
         <span className="typography-micro">Resets</span>
         <span className="typography-micro tabular-nums">{resetLabel}</span>

packages/ui/src/components/sections/usage/UsagePage.tsx

@@ -13,7 +13,7 @@ import {
 } from '@/components/ui/collapsible';
 import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react';
 import type { UsageWindows, QuotaProviderId } from '@/types';
-import { getAllModelFamilies, sortModelFamilies, groupModelsByFamilyWithGetter } from '@/lib/quota/model-families';
+import { getAllModelFamilies, getDisplayModelName, sortModelFamilies, groupModelsByFamilyWithGetter } from '@/lib/quota/model-families';
 
 const formatTime = (timestamp: number | null) => {
   if (!timestamp) return '-';
@@ -257,7 +257,7 @@ export const UsagePage: React.FC = () => {
                         <UsageCard
                           key={model.name}
                           title={label}
-                          subtitle={model.name}
+                          subtitle={getDisplayModelName(model.name)}
                           window={window}
                           showToggle
                           toggleEnabled={isSelected}
@@ -306,7 +306,7 @@ export const UsagePage: React.FC = () => {
                         <UsageCard
                           key={model.name}
                           title={label}
-                          subtitle={model.name}
+                          subtitle={getDisplayModelName(model.name)}
                           window={window}
                           showToggle
                           toggleEnabled={isSelected}

packages/ui/src/components/sections/usage/UsageProgressBar.tsx

@@ -6,11 +6,24 @@ interface UsageProgressBarProps {
   percent: number | null;
   tonePercent?: number | null;
   className?: string;
+  /** 
+   * Position (0-100) to show a marker indicating expected usage based on time elapsed.
+   * Used for weekly/monthly quotas to show where usage "should" be if evenly distributed.
+   */
+  expectedMarkerPercent?: number | null;
 }
 
-export const UsageProgressBar: React.FC<UsageProgressBarProps> = ({ percent, tonePercent, className }) => {
+export const UsageProgressBar: React.FC<UsageProgressBarProps> = ({
+  percent,
+  tonePercent,
+  className,
+  expectedMarkerPercent,
+}) => {
   const clamped = clampPercent(percent) ?? 0;
   const tone = resolveUsageTone(tonePercent ?? percent);
+  const markerClamped = expectedMarkerPercent != null
+    ? Math.max(0, Math.min(100, expectedMarkerPercent))
+    : null;
 
   const fillStyle = tone === 'critical'
     ? { backgroundColor: 'var(--status-error)' }
@@ -19,7 +32,7 @@ export const UsageProgressBar: React.FC<UsageProgressBarProps> = ({ percent, ton
       : { backgroundColor: 'var(--status-success)' };
 
   return (
-    <div className={cn('h-2.5 rounded-full bg-[var(--interactive-border)] overflow-hidden', className)}>
+    <div className={cn('relative h-2.5 rounded-full bg-[var(--interactive-border)] overflow-hidden', className)}>
       <div
         className="h-full transition-all duration-300"
         style={{ ...fillStyle, width: `${clamped}%` }}
@@ -28,6 +41,14 @@ export const UsageProgressBar: React.FC<UsageProgressBarProps> = ({ percent, ton
         aria-valuemin={0}
         aria-valuemax={100}
       />
+      {markerClamped != null && markerClamped > 0 && markerClamped < 100 && (
+        <div
+          className="absolute top-0 h-full w-0.5 bg-foreground"
+          style={{ left: `${markerClamped}%` }}
+          title={`Expected usage if spread evenly: ${Math.round(markerClamped)}% of quota`}
+          aria-hidden="true"
+        />
+      )}
     </div>
   );
 };