feat: extend quota providers and add usage dropdown (#254) (#284)

* feat: extend quota providers and add usage dropdown

Add new quota providers:
- Claude (Anthropic API)
- Codex (OpenAI/ChatGPT)
- GitHub Copilot (base + add-on)
- Kimi for Coding
- OpenRouter

UI enhancements:
- Add rate limits dropdown in header with timer icon
- Desktop: sticky header with Used/Remaining toggle, refresh button
- Mobile: full-screen dropdown with same controls
- Per-provider sticky headers with provider logos
- Auto-refresh on open if no data exists

Usage settings page:
- Provider icon next to header
- Show in dropdown toggle per provider
- Global display selector (Usage vs Quota remaining)
- Auto-refresh controls in sidebar

Settings persistence:
- Add usageDisplayMode and usageDropdownProviders settings
- Server-side sanitization for new settings

Provider logo aliases:
- codex -> openai, claude -> anthropic

Bug fixes:
- Fix React error #310 by calling hooks before early returns
- Add aria-describedby to SettingsWindow dialog
- Remove horizontal scroll from dropdown

* fix: Remove duplicate github copilot declarations

packages/ui/src/components/layout/Header.tsx

@@ -13,12 +13,13 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 
-import { RiArrowLeftSLine, RiChat4Line, RiCheckLine, RiCommandLine, RiFileTextLine, RiFolder6Line, RiGitBranchLine, RiGithubFill, RiLayoutLeftLine, RiPlayListAddLine, RiQuestionLine, RiSettings3Line, RiTerminalBoxLine, type RemixiconComponentType } from '@remixicon/react';
+import { RiArrowLeftSLine, RiChat4Line, RiCheckLine, RiCloseLine, RiCommandLine, RiFileTextLine, RiFolder6Line, RiGitBranchLine, RiGithubFill, RiLayoutLeftLine, RiPlayListAddLine, RiQuestionLine, RiRefreshLine, RiSettings3Line, RiTerminalBoxLine, RiTimerLine, type RemixiconComponentType } from '@remixicon/react';
 import { DiffIcon } from '@/components/icons/DiffIcon';
 import { useUIStore, type MainTab } from '@/stores/useUIStore';
 import { useUpdateStore } from '@/stores/useUpdateStore';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { useSessionStore } from '@/stores/useSessionStore';
+import { useQuotaAutoRefresh, useQuotaStore } from '@/stores/useQuotaStore';
 import { useDirectoryStore } from '@/stores/useDirectoryStore';
 import { useGitHubAuthStore } from '@/stores/useGitHubAuthStore';
 import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
@@ -27,8 +28,25 @@ import { useDeviceInfo } from '@/lib/device';
 import { cn, getModifierLabel, hasModifier } from '@/lib/utils';
 import { useDiffFileCount } from '@/components/views/DiffView';
 import { McpDropdown } from '@/components/mcp/McpDropdown';
+import { ProviderLogo } from '@/components/ui/ProviderLogo';
+import { formatPercent, formatWindowLabel, QUOTA_PROVIDERS } from '@/lib/quota';
+import { UsageProgressBar } from '@/components/sections/usage/UsageProgressBar';
+import { updateDesktopSettings } from '@/lib/persistence';
+import type { UsageWindow } from '@/types';
 import type { GitHubAuthStatus } from '@/lib/api/types';
 
+const formatTime = (timestamp: number | null) => {
+  if (!timestamp) return '-';
+  try {
+    return new Date(timestamp).toLocaleTimeString(undefined, {
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+  } catch {
+    return '-';
+  }
+};
+
 const normalize = (value: string): string => {
   if (!value) return '';
   const replaced = value.replace(/\\/g, '/');
@@ -85,6 +103,14 @@ export const Header: React.FC = () => {
   const getContextUsage = useSessionStore((state) => state.getContextUsage);
   const currentSessionId = useSessionStore((state) => state.currentSessionId);
   const sessions = useSessionStore((state) => state.sessions);
+  const quotaResults = useQuotaStore((state) => state.results);
+  const fetchAllQuotas = useQuotaStore((state) => state.fetchAllQuotas);
+  const isQuotaLoading = useQuotaStore((state) => state.isLoading);
+  const quotaLastUpdated = useQuotaStore((state) => state.lastUpdated);
+  const quotaDisplayMode = useQuotaStore((state) => state.displayMode);
+  const dropdownProviderIds = useQuotaStore((state) => state.dropdownProviderIds);
+  const loadQuotaSettings = useQuotaStore((state) => state.loadSettings);
+  const setQuotaDisplayMode = useQuotaStore((state) => state.setDisplayMode);
   const homeDirectory = useDirectoryStore((state) => state.homeDirectory);
   const { isMobile } = useDeviceInfo();
   const diffFileCount = useDiffFileCount();
@@ -153,6 +179,41 @@ export const Header: React.FC = () => {
   const githubLogin = githubAuthStatus?.connected ? githubAuthStatus.user?.login : null;
   const githubAccounts = githubAuthStatus?.accounts ?? [];
   const [isSwitchingGitHubAccount, setIsSwitchingGitHubAccount] = React.useState(false);
+  const [isMobileRateLimitsOpen, setIsMobileRateLimitsOpen] = React.useState(false);
+  useQuotaAutoRefresh();
+  const rateLimitGroups = React.useMemo(() => {
+    const groups: Array<{
+      providerId: string;
+      providerName: string;
+      entries: Array<[string, UsageWindow]>;
+    }> = [];
+
+    for (const provider of QUOTA_PROVIDERS) {
+      if (!dropdownProviderIds.includes(provider.id)) {
+        continue;
+      }
+      const result = quotaResults.find((entry) => entry.providerId === provider.id);
+      const windows = (result?.usage?.windows ?? {}) as Record<string, UsageWindow>;
+      const entries = Object.entries(windows);
+      if (entries.length > 0) {
+        groups.push({ providerId: provider.id, providerName: provider.name, entries });
+      }
+    }
+
+    return groups;
+  }, [dropdownProviderIds, quotaResults]);
+  const hasRateLimits = rateLimitGroups.length > 0;
+  React.useEffect(() => {
+    void loadQuotaSettings();
+  }, [loadQuotaSettings]);
+  const handleDisplayModeChange = React.useCallback(async (mode: 'usage' | 'remaining') => {
+    setQuotaDisplayMode(mode);
+    try {
+      await updateDesktopSettings({ usageDisplayMode: mode });
+    } catch (error) {
+      console.warn('Failed to update usage display mode:', error);
+    }
+  }, [setQuotaDisplayMode]);
 
   const currentSession = React.useMemo(() => {
     if (!currentSessionId) return null;
@@ -176,22 +237,22 @@ export const Header: React.FC = () => {
       const payload = runtimeApis.github
         ? await runtimeApis.github.authActivate(accountId)
         : await (async () => {
-            const response = await fetch('/api/github/auth/activate', {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-                Accept: 'application/json',
-              },
-              body: JSON.stringify({ accountId }),
-            });
-            const body = (await response.json().catch(() => null)) as
-              | (GitHubAuthStatus & { error?: string })
-              | null;
-            if (!response.ok || !body) {
-              throw new Error(body?.error || response.statusText);
-            }
-            return body;
-          })();
+          const response = await fetch('/api/github/auth/activate', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              Accept: 'application/json',
+            },
+            body: JSON.stringify({ accountId }),
+          });
+          const body = (await response.json().catch(() => null)) as
+            | (GitHubAuthStatus & { error?: string })
+            | null;
+          if (!response.ok || !body) {
+            throw new Error(body?.error || response.statusText);
+          }
+          return body;
+        })();
 
       setGitHubAuthStatus(payload);
     } catch (error) {
@@ -348,7 +409,7 @@ export const Header: React.FC = () => {
 
     const node = headerRef.current;
     if (!node || typeof ResizeObserver === 'undefined') {
-      return () => {};
+      return () => { };
     }
 
     const observer = new ResizeObserver(() => {
@@ -500,7 +561,7 @@ export const Header: React.FC = () => {
               <span className={cn(
                 'font-medium',
                 contextUsage.percentage >= 90 ? 'text-status-error' :
-                contextUsage.percentage >= 75 ? 'text-status-warning' : 'text-status-success'
+                  contextUsage.percentage >= 75 ? 'text-status-warning' : 'text-status-success'
               )}>
                 {Math.min(contextUsage.percentage, 999).toFixed(1)}%
               </span>
@@ -563,24 +624,154 @@ export const Header: React.FC = () => {
 
       <div className="flex-1" />
 
-       <div className="flex items-center gap-1 pr-3">
-         <Tooltip delayDuration={500}>
-           <TooltipTrigger asChild>
-             <button
-               type="button"
-               onClick={toggleCommandPalette}
-               aria-label="Open command palette"
-               className={headerIconButtonClass}
-             >
-               <RiCommandLine className="h-5 w-5" />
-             </button>
-           </TooltipTrigger>
-           <TooltipContent>
-             <p>Command Palette ({getModifierLabel()}+K)</p>
-           </TooltipContent>
-         </Tooltip>
+      <div className="flex items-center gap-1 pr-3">
+        <Tooltip delayDuration={500}>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={toggleCommandPalette}
+              aria-label="Open command palette"
+              className={headerIconButtonClass}
+            >
+              <RiCommandLine className="h-5 w-5" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Command Palette ({getModifierLabel()}+K)</p>
+          </TooltipContent>
+        </Tooltip>
 
-         <McpDropdown headerIconButtonClass={headerIconButtonClass} />
+        <DropdownMenu onOpenChange={(open) => {
+          if (open && quotaResults.length === 0) {
+            fetchAllQuotas();
+          }
+        }}>
+          <Tooltip delayDuration={500}>
+            <TooltipTrigger asChild>
+              <DropdownMenuTrigger asChild>
+                <button
+                  type="button"
+                  aria-label="View rate limits"
+                  className={headerIconButtonClass}
+                  disabled={isQuotaLoading}
+                >
+                  <RiTimerLine className="h-5 w-5" />
+                </button>
+              </DropdownMenuTrigger>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Rate limits</p>
+            </TooltipContent>
+          </Tooltip>
+            <DropdownMenuContent align="end" className="w-80 max-h-[70vh] overflow-y-auto overflow-x-hidden p-0">
+              <div className="sticky top-0 z-20 bg-[var(--surface-elevated)] border-b border-[var(--interactive-border)]">
+              <DropdownMenuLabel className="flex items-center justify-between gap-3 typography-ui-header font-semibold text-foreground">
+                <span>Rate limits</span>
+                <div className="flex items-center gap-1">
+                  <div className="flex items-center rounded-md border border-[var(--interactive-border)] p-0.5">
+                    <button
+                      type="button"
+                      className={cn(
+                        'px-2 py-0.5 rounded-sm typography-micro text-[10px] transition-colors',
+                        quotaDisplayMode === 'usage'
+                          ? 'bg-interactive-selection text-interactive-selection-foreground'
+                          : 'text-muted-foreground hover:text-foreground'
+                      )}
+                      onClick={() => handleDisplayModeChange('usage')}
+                      aria-label="Show used quota"
+                    >
+                      Used
+                    </button>
+                    <button
+                      type="button"
+                      className={cn(
+                        'px-2 py-0.5 rounded-sm typography-micro text-[10px] transition-colors',
+                        quotaDisplayMode === 'remaining'
+                          ? 'bg-interactive-selection text-interactive-selection-foreground'
+                          : 'text-muted-foreground hover:text-foreground'
+                      )}
+                      onClick={() => handleDisplayModeChange('remaining')}
+                      aria-label="Show remaining quota"
+                    >
+                      Remaining
+                    </button>
+                  </div>
+                  <button
+                    type="button"
+                    className={cn(
+                      'inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors',
+                      'hover:text-foreground hover:bg-interactive-hover',
+                      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary'
+                    )}
+                    onClick={() => fetchAllQuotas()}
+                    disabled={isQuotaLoading}
+                    aria-label="Refresh rate limits"
+                  >
+                    <RiRefreshLine className="h-4 w-4" />
+                  </button>
+                </div>
+              </DropdownMenuLabel>
+              <div className="px-2 pb-2 typography-micro text-muted-foreground text-[10px]">
+                Last updated {formatTime(quotaLastUpdated)}
+              </div>
+            </div>
+            {!hasRateLimits && (
+              <DropdownMenuItem className="cursor-default" onSelect={(event) => event.preventDefault()}>
+                <span className="typography-ui-label text-muted-foreground">No rate limits available.</span>
+              </DropdownMenuItem>
+            )}
+            {rateLimitGroups.map((group, index) => (
+              <React.Fragment key={group.providerId}>
+                <DropdownMenuLabel className="sticky top-[60px] z-10 flex items-center gap-2 bg-[var(--surface-elevated)] typography-ui-label text-foreground">
+                  <ProviderLogo providerId={group.providerId} className="h-4 w-4" />
+                  {group.providerName}
+                </DropdownMenuLabel>
+                {group.entries.length === 0 ? (
+                  <DropdownMenuItem
+                    key={`${group.providerId}-empty`}
+                    className="cursor-default"
+                    onSelect={(event) => event.preventDefault()}
+                  >
+                    <span className="typography-ui-label text-muted-foreground">No rate limits reported.</span>
+                  </DropdownMenuItem>
+                ) : (
+                  group.entries.map(([label, window]) => (
+                    <DropdownMenuItem
+                      key={`${group.providerId}-${label}`}
+                      className="cursor-default items-start"
+                      onSelect={(event) => event.preventDefault()}
+                    >
+                      <span className="flex min-w-0 flex-1 flex-col gap-2">
+                        {(() => {
+                          const displayPercent = quotaDisplayMode === 'remaining'
+                            ? window.remainingPercent
+                            : window.usedPercent;
+                          return (
+                            <>
+                              <span className="flex min-w-0 items-center justify-between gap-3">
+                                <span className="truncate typography-micro text-muted-foreground">{formatWindowLabel(label)}</span>
+                                <span className="typography-ui-label text-foreground tabular-nums">
+                                  {formatPercent(displayPercent) === '-' ? '' : formatPercent(displayPercent)}
+                                </span>
+                              </span>
+                              <UsageProgressBar percent={displayPercent} tonePercent={window.usedPercent} className="h-1" />
+                              <span className="flex items-center justify-between typography-micro text-muted-foreground text-[10px]">
+                                <span>{window.resetAfterFormatted ?? window.resetAtFormatted ?? ''}</span>
+                              </span>
+                            </>
+                          );
+                        })()}
+                      </span>
+                    </DropdownMenuItem>
+                  ))
+                )}
+                {index < rateLimitGroups.length - 1 && <DropdownMenuSeparator />}
+              </React.Fragment>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <McpDropdown headerIconButtonClass={headerIconButtonClass} />
 
         <Tooltip delayDuration={500}>
           <TooltipTrigger asChild>
@@ -788,6 +979,137 @@ export const Header: React.FC = () => {
 
           <McpDropdown headerIconButtonClass={headerIconButtonClass} />
 
+          <DropdownMenu
+            open={isMobileRateLimitsOpen}
+            onOpenChange={(open) => {
+              setIsMobileRateLimitsOpen(open);
+              if (open && quotaResults.length === 0) {
+                fetchAllQuotas();
+              }
+            }}
+          >
+            <Tooltip delayDuration={500}>
+              <TooltipTrigger asChild>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    type="button"
+                    aria-label="View rate limits"
+                    className={headerIconButtonClass}
+                    disabled={isQuotaLoading}
+                  >
+                    <RiTimerLine className="h-5 w-5" />
+                  </button>
+                </DropdownMenuTrigger>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Rate limits</p>
+              </TooltipContent>
+            </Tooltip>
+            <DropdownMenuContent
+              align="end"
+              sideOffset={0}
+              className="h-[100vh] w-[100vw] max-h-none rounded-none border-0 p-0"
+            >
+              <div className="flex h-full flex-col bg-[var(--surface-elevated)]">
+                <div className="sticky top-0 z-20 border-b border-[var(--interactive-border)] bg-[var(--surface-elevated)]">
+                  <div className="flex items-center justify-between gap-2 px-3 py-3">
+                    <span className="typography-ui-header font-semibold text-foreground">Rate limits</span>
+                    <div className="flex items-center gap-2">
+                      <div className="flex items-center rounded-md border border-[var(--interactive-border)] p-0.5">
+                        <button
+                          type="button"
+                          className={cn(
+                            'px-1.5 py-0.5 rounded-sm typography-micro text-[9px] transition-colors',
+                            quotaDisplayMode === 'usage'
+                              ? 'bg-interactive-selection text-interactive-selection-foreground'
+                              : 'text-muted-foreground hover:text-foreground'
+                          )}
+                          onClick={() => handleDisplayModeChange('usage')}
+                          aria-label="Show used quota"
+                        >
+                          Used
+                        </button>
+                        <button
+                          type="button"
+                          className={cn(
+                            'px-1.5 py-0.5 rounded-sm typography-micro text-[9px] transition-colors',
+                            quotaDisplayMode === 'remaining'
+                              ? 'bg-interactive-selection text-interactive-selection-foreground'
+                              : 'text-muted-foreground hover:text-foreground'
+                          )}
+                          onClick={() => handleDisplayModeChange('remaining')}
+                          aria-label="Show remaining quota"
+                        >
+                          Remaining
+                        </button>
+                      </div>
+                      <button
+                        type="button"
+                        className={cn(
+                          'inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors',
+                          'hover:text-foreground hover:bg-interactive-hover',
+                          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary'
+                        )}
+                        onClick={() => fetchAllQuotas()}
+                        disabled={isQuotaLoading}
+                        aria-label="Refresh rate limits"
+                      >
+                        <RiRefreshLine className="h-4 w-4" />
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setIsMobileRateLimitsOpen(false)}
+                        className="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-interactive-hover"
+                        aria-label="Close rate limits"
+                      >
+                        <RiCloseLine className="h-5 w-5" />
+                      </button>
+                    </div>
+                  </div>
+                  <div className="px-3 pb-3 typography-micro text-muted-foreground text-[10px]">
+                    Last updated {formatTime(quotaLastUpdated)}
+                  </div>
+                </div>
+                <div className="flex-1 overflow-y-auto overflow-x-hidden">
+                  {!hasRateLimits && (
+                    <div className="px-3 py-4 typography-ui-label text-muted-foreground">
+                      No rate limits available.
+                    </div>
+                  )}
+                  {rateLimitGroups.map((group) => (
+                    <React.Fragment key={group.providerId}>
+                      <div className="sticky top-0 z-10 flex items-center gap-2 bg-[var(--surface-elevated)] px-3 py-2">
+                        <ProviderLogo providerId={group.providerId} className="h-4 w-4" />
+                        <span className="typography-ui-label text-foreground">{group.providerName}</span>
+                      </div>
+                      {group.entries.map(([label, window]) => {
+                        const displayPercent = quotaDisplayMode === 'remaining'
+                          ? window.remainingPercent
+                          : window.usedPercent;
+                        return (
+                          <div key={`${group.providerId}-${label}`} className="px-3 py-2">
+                            <div className="flex items-center justify-between gap-3">
+                              <span className="truncate typography-micro text-muted-foreground">
+                                {formatWindowLabel(label)}
+                              </span>
+                              <span className="typography-ui-label text-foreground tabular-nums">
+                                {formatPercent(displayPercent)}
+                              </span>
+                            </div>
+                            <UsageProgressBar percent={displayPercent} tonePercent={window.usedPercent} className="mt-2 h-1" />
+                            <div className="mt-1 typography-micro text-muted-foreground text-[10px]">
+                              {window.resetAfterFormatted ?? window.resetAtFormatted ?? ''}
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </React.Fragment>
+                  ))}
+                </div>
+              </div>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
           <Tooltip delayDuration={500}>
             <TooltipTrigger asChild>
               <button

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

@@ -2,6 +2,7 @@ import React from 'react';
 import type { UsageWindow } from '@/types';
 import { formatPercent, formatWindowLabel } from '@/lib/quota';
 import { UsageProgressBar } from './UsageProgressBar';
+import { useQuotaStore } from '@/stores/useQuotaStore';
 
 interface UsageCardProps {
   title: string;
@@ -10,8 +11,11 @@ interface UsageCardProps {
 }
 
 export const UsageCard: React.FC<UsageCardProps> = ({ title, window, subtitle }) => {
-  const percentLabel = formatPercent(window.usedPercent);
-  const resetLabel = window.resetAfterFormatted ?? window.resetAtFormatted ?? '-';
+  const displayMode = useQuotaStore((state) => state.displayMode);
+  const displayPercent = displayMode === 'remaining' ? window.remainingPercent : window.usedPercent;
+  const barLabel = displayMode === 'remaining' ? 'remaining' : 'used';
+  const percentLabel = window.valueLabel ?? formatPercent(displayPercent);
+  const resetLabel = window.resetAfterFormatted ?? window.resetAtFormatted ?? '';
   const windowLabel = formatWindowLabel(title);
 
   return (
@@ -23,15 +27,18 @@ export const UsageCard: React.FC<UsageCardProps> = ({ title, window, subtitle })
             <div className="typography-micro text-muted-foreground truncate">{subtitle}</div>
           )}
         </div>
-        <div className="typography-ui-label text-foreground tabular-nums">{percentLabel}</div>
+        <div className="typography-ui-label text-foreground tabular-nums">{percentLabel === '-' ? '' : percentLabel}</div>
       </div>
 
       <div className="mt-3">
-        <UsageProgressBar percent={window.usedPercent} />
+        <UsageProgressBar percent={displayPercent} tonePercent={window.usedPercent} />
+        <div className="mt-1 text-right typography-micro text-muted-foreground text-[10px]">
+          {barLabel}
+        </div>
       </div>
 
       <div className="mt-3 flex items-center justify-between text-muted-foreground">
-        <span className="typography-micro">Resets in</span>
+        <span className="typography-micro">Resets</span>
         <span className="typography-micro tabular-nums">{resetLabel}</span>
       </div>
     </div>

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

@@ -3,6 +3,9 @@ import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
 import { UsageCard } from './UsageCard';
 import { QUOTA_PROVIDERS } from '@/lib/quota';
 import { useQuotaAutoRefresh, useQuotaStore } from '@/stores/useQuotaStore';
+import { Switch } from '@/components/ui/switch';
+import { updateDesktopSettings } from '@/lib/persistence';
+import { ProviderLogo } from '@/components/ui/ProviderLogo';
 
 const formatTime = (timestamp: number | null) => {
   if (!timestamp) return '-';
@@ -25,6 +28,8 @@ export const UsagePage: React.FC = () => {
   const isLoading = useQuotaStore((state) => state.isLoading);
   const lastUpdated = useQuotaStore((state) => state.lastUpdated);
   const error = useQuotaStore((state) => state.error);
+  const dropdownProviderIds = useQuotaStore((state) => state.dropdownProviderIds);
+  const setDropdownProviderIds = useQuotaStore((state) => state.setDropdownProviderIds);
 
   useQuotaAutoRefresh();
 
@@ -33,6 +38,7 @@ export const UsagePage: React.FC = () => {
     void fetchAllQuotas();
   }, [loadSettings, fetchAllQuotas]);
 
+
   React.useEffect(() => {
     if (selectedProviderId) {
       return;
@@ -46,6 +52,21 @@ export const UsagePage: React.FC = () => {
 
   const selectedResult = results.find((entry) => entry.providerId === selectedProviderId) ?? null;
 
+  const providerMeta = QUOTA_PROVIDERS.find((provider) => provider.id === selectedProviderId);
+  const providerName = providerMeta?.name ?? selectedProviderId ?? 'Usage';
+  const usage = selectedResult?.usage;
+  const showInDropdown = selectedProviderId ? dropdownProviderIds.includes(selectedProviderId) : false;
+  const handleDropdownToggle = React.useCallback((enabled: boolean) => {
+    if (!selectedProviderId) {
+      return;
+    }
+    const next = enabled
+      ? Array.from(new Set([...dropdownProviderIds, selectedProviderId]))
+      : dropdownProviderIds.filter((id) => id !== selectedProviderId);
+    setDropdownProviderIds(next);
+    void updateDesktopSettings({ usageDropdownProviders: next });
+  }, [dropdownProviderIds, selectedProviderId, setDropdownProviderIds]);
+
   if (!selectedProviderId) {
     return (
       <div className="flex h-full items-center justify-center text-muted-foreground">
@@ -54,18 +75,30 @@ export const UsagePage: React.FC = () => {
     );
   }
 
-  const providerMeta = QUOTA_PROVIDERS.find((provider) => provider.id === selectedProviderId);
-  const providerName = providerMeta?.name ?? selectedProviderId;
-  const usage = selectedResult?.usage;
-
   return (
     <ScrollableOverlay keyboardAvoid outerClassName="h-full" className="w-full">
       <div className="mx-auto max-w-3xl space-y-6 p-6">
-        <div className="space-y-1">
-          <h1 className="typography-ui-header font-semibold text-lg">{providerName} Usage</h1>
-          <p className="typography-meta text-muted-foreground">
-            {isLoading ? 'Refreshing usage...' : `Last updated ${formatTime(lastUpdated)}`}
-          </p>
+        <div className="space-y-2">
+          <div className="flex items-start justify-between gap-3">
+            <div className="space-y-1">
+              <div className="flex items-center gap-2">
+                <ProviderLogo providerId={selectedProviderId} className="h-5 w-5" />
+                <h1 className="typography-ui-header font-semibold text-lg">{providerName} Usage</h1>
+              </div>
+              <p className="typography-meta text-muted-foreground">
+                {isLoading ? 'Refreshing usage...' : `Last updated ${formatTime(lastUpdated)}`}
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="typography-micro text-muted-foreground">Show in dropdown</span>
+            <Switch
+              checked={showInDropdown}
+              onCheckedChange={handleDropdownToggle}
+              aria-label={`Show ${providerName} in usage dropdown`}
+              className="data-[state=checked]:bg-[var(--status-info)]"
+            />
+          </div>
         </div>
 
         {!selectedResult && (

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

@@ -4,12 +4,13 @@ import { clampPercent, resolveUsageTone } from '@/lib/quota';
 
 interface UsageProgressBarProps {
   percent: number | null;
+  tonePercent?: number | null;
   className?: string;
 }
 
-export const UsageProgressBar: React.FC<UsageProgressBarProps> = ({ percent, className }) => {
+export const UsageProgressBar: React.FC<UsageProgressBarProps> = ({ percent, tonePercent, className }) => {
   const clamped = clampPercent(percent) ?? 0;
-  const tone = resolveUsageTone(percent);
+  const tone = resolveUsageTone(tonePercent ?? percent);
 
   const fillStyle = tone === 'critical'
     ? { backgroundColor: 'var(--status-error)' }

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

@@ -36,8 +36,10 @@ export const UsageSidebar: React.FC<UsageSidebarProps> = ({ onItemSelect }) => {
   const isLoading = useQuotaStore((state) => state.isLoading);
   const usageAutoRefresh = useQuotaStore((state) => state.autoRefresh);
   const usageRefreshIntervalMs = useQuotaStore((state) => state.refreshIntervalMs);
+  const usageDisplayMode = useQuotaStore((state) => state.displayMode);
   const setUsageAutoRefresh = useQuotaStore((state) => state.setAutoRefresh);
   const setUsageRefreshInterval = useQuotaStore((state) => state.setRefreshInterval);
+  const setUsageDisplayMode = useQuotaStore((state) => state.setDisplayMode);
   const loadUsageSettings = useQuotaStore((state) => state.loadSettings);
   const { isMobile } = useDeviceInfo();
 
@@ -57,7 +59,7 @@ export const UsageSidebar: React.FC<UsageSidebarProps> = ({ onItemSelect }) => {
     void loadUsageSettings();
   }, [loadUsageSettings]);
 
-  const persistUsageSettings = React.useCallback(async (changes: { usageAutoRefresh?: boolean; usageRefreshIntervalMs?: number }) => {
+  const persistUsageSettings = React.useCallback(async (changes: { usageAutoRefresh?: boolean; usageRefreshIntervalMs?: number; usageDisplayMode?: 'usage' | 'remaining'; usageDropdownProviders?: string[] }) => {
     try {
       await updateDesktopSettings(changes);
     } catch (error) {
@@ -79,6 +81,17 @@ export const UsageSidebar: React.FC<UsageSidebarProps> = ({ onItemSelect }) => {
     void persistUsageSettings({ usageRefreshIntervalMs: next });
   }, [persistUsageSettings, setUsageRefreshInterval]);
 
+  const handleUsageDisplayModeChange = React.useCallback((value: string) => {
+    if (value !== 'usage' && value !== 'remaining') {
+      return;
+    }
+    setUsageDisplayMode(value);
+    void persistUsageSettings({ usageDisplayMode: value });
+  }, [persistUsageSettings, setUsageDisplayMode]);
+
+
+
+
   const bgClass = isDesktopRuntime
     ? 'bg-transparent'
     : isVSCode
@@ -134,6 +147,22 @@ export const UsageSidebar: React.FC<UsageSidebarProps> = ({ onItemSelect }) => {
             </Button>
           </div>
         </div>
+        <div className="mt-2 flex items-center justify-between gap-2">
+          <span className="typography-micro text-muted-foreground">Display</span>
+          <Select value={usageDisplayMode} onValueChange={handleUsageDisplayModeChange}>
+            <SelectTrigger size="sm" className="min-w-[140px]">
+              <SelectValue placeholder="Display mode" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="usage" className="pr-2 [&>span:first-child]:hidden">
+                Usage
+              </SelectItem>
+              <SelectItem value="remaining" className="pr-2 [&>span:first-child]:hidden">
+                Quota remaining
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
       </div>
 
       <ScrollableOverlay outerClassName="flex-1 min-h-0" className="space-y-1 px-3 py-2 overflow-x-hidden">
@@ -173,11 +202,11 @@ export const UsageSidebar: React.FC<UsageSidebarProps> = ({ onItemSelect }) => {
                 <span className="typography-ui-label font-normal truncate flex-1 min-w-0 text-foreground">
                   {provider.name}
                 </span>
-                {!configured && (
-                  <span className="typography-micro text-muted-foreground/60 flex-shrink-0">Not set</span>
-                )}
-              </button>
-            </div>
+              {!configured && (
+                <span className="typography-micro text-muted-foreground/60 flex-shrink-0">Not set</span>
+              )}
+            </button>
+          </div>
           );
         })}
       </ScrollableOverlay>

packages/ui/src/components/views/SettingsWindow.tsx

@@ -13,6 +13,7 @@ interface SettingsWindowProps {
  * Used for desktop and web (non-mobile) environments.
  */
 export const SettingsWindow: React.FC<SettingsWindowProps> = ({ open, onOpenChange }) => {
+  const descriptionId = React.useId();
   return (
     <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
       <DialogPrimitive.Portal>
@@ -20,6 +21,7 @@ export const SettingsWindow: React.FC<SettingsWindowProps> = ({ open, onOpenChan
           className="fixed inset-0 z-50 bg-black/50 backdrop-blur-md"
         />
         <DialogPrimitive.Content
+          aria-describedby={descriptionId}
           className={cn(
             'fixed z-50 top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]',
             'w-[90vw] max-w-[1200px] h-[85vh] max-h-[900px]',
@@ -27,6 +29,9 @@ export const SettingsWindow: React.FC<SettingsWindowProps> = ({ open, onOpenChan
             'bg-background'
           )}
         >
+          <DialogPrimitive.Description id={descriptionId} className="sr-only">
+            OpenChamber settings window.
+          </DialogPrimitive.Description>
           <SettingsView onClose={() => onOpenChange(false)} isWindowed />
         </DialogPrimitive.Content>
       </DialogPrimitive.Portal>

packages/ui/src/hooks/useProviderLogo.ts

@@ -15,6 +15,11 @@ const localLogoModules = import.meta.glob<string>('../assets/provider-logos/*.sv
 
 const LOCAL_PROVIDER_LOGO_MAP = new Map<string, string>();
 
+const LOGO_ALIAS = new Map<string, string>([
+    ['codex', 'openai'],
+    ['claude', 'anthropic'],
+]);
+
 for (const [path, url] of Object.entries(localLogoModules)) {
     const match = path.match(/provider-logos\/([^/]+)\.svg$/i);
     if (match?.[1] && url) {
@@ -24,20 +29,21 @@ for (const [path, url] of Object.entries(localLogoModules)) {
 
 export function useProviderLogo(providerId: string | null | undefined): UseProviderLogoReturn {
     const normalizedId = providerId?.toLowerCase() ?? null;
-    const hasLocalLogo = normalizedId ? LOCAL_PROVIDER_LOGO_MAP.has(normalizedId) : false;
-    const localLogoSrc = normalizedId ? LOCAL_PROVIDER_LOGO_MAP.get(normalizedId) ?? null : null;
+    const resolvedId = normalizedId ? LOGO_ALIAS.get(normalizedId) ?? normalizedId : null;
+    const hasLocalLogo = resolvedId ? LOCAL_PROVIDER_LOGO_MAP.has(resolvedId) : false;
+    const localLogoSrc = resolvedId ? LOCAL_PROVIDER_LOGO_MAP.get(resolvedId) ?? null : null;
 
     const [source, setSource] = useState<LogoSource>(hasLocalLogo ? 'local' : 'remote');
 
     useEffect(() => {
         setSource(hasLocalLogo ? 'local' : 'remote');
-    }, [hasLocalLogo, normalizedId]);
+    }, [hasLocalLogo, resolvedId]);
 
     const handleError = useCallback(() => {
         setSource((current) => (current === 'local' && hasLocalLogo ? 'remote' : 'none'));
     }, [hasLocalLogo]);
 
-    if (!normalizedId) {
+    if (!resolvedId) {
         return { src: null, onError: handleError, hasLogo: false };
     }
 
@@ -51,7 +57,7 @@ export function useProviderLogo(providerId: string | null | undefined): UseProvi
 
     if (source === 'remote') {
         return {
-            src: `https://models.dev/logos/${normalizedId}.svg`,
+            src: `https://models.dev/logos/${resolvedId}.svg`,
             onError: handleError,
             hasLogo: true,
         };

packages/ui/src/lib/desktop.ts

@@ -57,6 +57,8 @@ export type DesktopSettings = {
   notifyOnSubtasks?: boolean;
   usageAutoRefresh?: boolean;
   usageRefreshIntervalMs?: number;
+  usageDisplayMode?: 'usage' | 'remaining';
+  usageDropdownProviders?: string[];
   autoDeleteEnabled?: boolean;
   autoDeleteAfterDays?: number;
   defaultModel?: string; // format: "provider/model"

packages/ui/src/lib/persistence.ts

@@ -357,6 +357,14 @@ const sanitizeWebSettings = (payload: unknown): DesktopSettings | null => {
   if (typeof candidate.usageRefreshIntervalMs === 'number' && Number.isFinite(candidate.usageRefreshIntervalMs)) {
     result.usageRefreshIntervalMs = candidate.usageRefreshIntervalMs;
   }
+  if (candidate.usageDisplayMode === 'usage' || candidate.usageDisplayMode === 'remaining') {
+    result.usageDisplayMode = candidate.usageDisplayMode;
+  }
+  if (Array.isArray(candidate.usageDropdownProviders)) {
+    result.usageDropdownProviders = candidate.usageDropdownProviders.filter(
+      (entry): entry is string => typeof entry === 'string' && entry.length > 0
+    );
+  }
   if (
     typeof candidate.toolCallExpansion === 'string'
     && (candidate.toolCallExpansion === 'collapsed'

packages/ui/src/lib/quota/providers/index.ts

@@ -6,10 +6,13 @@ export interface QuotaProviderMeta {
 }
 
 export const QUOTA_PROVIDERS: QuotaProviderMeta[] = [
-  { id: 'openai', name: 'OpenAI' },
+  { id: 'claude', name: 'Claude' },
+  { id: 'codex', name: 'Codex' },
+  { id: 'github-copilot', name: 'GitHub Copilot' },
   { id: 'google', name: 'Google' },
+  { id: 'kimi-for-coding', name: 'Kimi for Coding' },
+  { id: 'openrouter', name: 'OpenRouter' },
   { id: 'zai-coding-plan', name: 'z.ai' },
-  { id: 'github-copilot', name: 'GitHub Copilot' }
 ];
 
 export const QUOTA_PROVIDER_MAP = QUOTA_PROVIDERS.reduce<Record<string, QuotaProviderMeta>>(

packages/ui/src/lib/quota/utils.ts

@@ -28,7 +28,15 @@ export const resolveUsageTone = (percent: number | null): 'safe' | 'warn' | 'cri
 
 export const formatWindowLabel = (label: string): string => {
   if (label === '5h') return '5-Hour Limit';
+  if (label === '7d') return '7-Day Limit';
+  if (label === '7d-sonnet') return '7-Day Sonnet Limit';
+  if (label === '7d-opus') return '7-Day Opus Limit';
   if (label === 'weekly') return 'Weekly Limit';
+  if (label === 'monthly') return 'Monthly Limit';
+  if (label === 'credits') return 'Credits';
+  if (label === 'premium') return 'Premium Interactions';
+  if (label === 'chat') return 'Chat Requests';
+  if (label === 'completions') return 'Completions';
   if (label === 'premium_interactions') return 'Premium interactions';
   return label;
 };

packages/ui/src/stores/useQuotaStore.ts

@@ -11,6 +11,8 @@ const DEFAULT_REFRESH_INTERVAL_MS = 60000;
 interface QuotaSettingsState {
   autoRefresh: boolean;
   refreshIntervalMs: number;
+  displayMode: 'usage' | 'remaining';
+  dropdownProviderIds: QuotaProviderId[];
 }
 
 interface QuotaStore extends QuotaSettingsState {
@@ -27,9 +29,12 @@ interface QuotaStore extends QuotaSettingsState {
   setSelectedProvider: (providerId: QuotaProviderId | null) => void;
   setAutoRefresh: (enabled: boolean) => void;
   setRefreshInterval: (intervalMs: number) => void;
+  setDisplayMode: (mode: 'usage' | 'remaining') => void;
+  setDropdownProviderIds: (providerIds: QuotaProviderId[]) => void;
 }
 
 const parseSettings = (data: Record<string, unknown> | null): QuotaSettingsState => {
+  const allProviderIds = QUOTA_PROVIDERS.map((provider) => provider.id);
   const autoRefresh = typeof data?.usageAutoRefresh === 'boolean'
     ? data.usageAutoRefresh
     : false;
@@ -38,7 +43,17 @@ const parseSettings = (data: Record<string, unknown> | null): QuotaSettingsState
       ? Math.max(30000, Math.min(300000, Math.round(data.usageRefreshIntervalMs)))
       : DEFAULT_REFRESH_INTERVAL_MS;
 
-  return { autoRefresh, refreshIntervalMs };
+  const displayMode = data?.usageDisplayMode === 'remaining' ? 'remaining' : 'usage';
+  const rawDropdownProviders = Array.isArray(data?.usageDropdownProviders)
+    ? data?.usageDropdownProviders
+    : null;
+  const dropdownProviderIds = rawDropdownProviders
+    ? rawDropdownProviders.filter((entry): entry is QuotaProviderId =>
+        typeof entry === 'string' && allProviderIds.includes(entry as QuotaProviderId)
+      )
+    : allProviderIds;
+
+  return { autoRefresh, refreshIntervalMs, displayMode, dropdownProviderIds };
 };
 
 const loadSettingsFromRuntime = async (): Promise<QuotaSettingsState> => {
@@ -69,7 +84,12 @@ const loadSettingsFromRuntime = async (): Promise<QuotaSettingsState> => {
     }
   }
 
-  return { autoRefresh: false, refreshIntervalMs: DEFAULT_REFRESH_INTERVAL_MS };
+  return {
+    autoRefresh: false,
+    refreshIntervalMs: DEFAULT_REFRESH_INTERVAL_MS,
+    displayMode: 'usage',
+    dropdownProviderIds: QUOTA_PROVIDERS.map((provider) => provider.id)
+  };
 };
 
 export const useQuotaStore = create<QuotaStore>()(
@@ -83,6 +103,8 @@ export const useQuotaStore = create<QuotaStore>()(
       error: null,
       autoRefresh: false,
       refreshIntervalMs: DEFAULT_REFRESH_INTERVAL_MS,
+      displayMode: 'usage',
+      dropdownProviderIds: QUOTA_PROVIDERS.map((provider) => provider.id),
 
       loadSettings: async () => {
         try {
@@ -155,7 +177,9 @@ export const useQuotaStore = create<QuotaStore>()(
       setRefreshInterval: (intervalMs) => {
         const clamped = Math.max(30000, Math.min(300000, Math.round(intervalMs)));
         set({ refreshIntervalMs: clamped });
-      }
+      },
+      setDisplayMode: (mode) => set({ displayMode: mode }),
+      setDropdownProviderIds: (providerIds) => set({ dropdownProviderIds: providerIds })
     }),
     { name: 'quota-store' }
   )

packages/ui/src/types/quota.ts

@@ -1,4 +1,13 @@
-export type QuotaProviderId = 'openai' | 'google' | 'zai-coding-plan' | 'github-copilot';
+export type QuotaProviderId =
+  | 'openai'
+  | 'codex'
+  | 'claude'
+  | 'github-copilot'
+  | 'github-copilot-addon'
+  | 'google'
+  | 'kimi-for-coding'
+  | 'openrouter'
+  | 'zai-coding-plan';
 
 export interface UsageWindow {
   usedPercent: number | null;
@@ -8,6 +17,7 @@ export interface UsageWindow {
   resetAt: number | null;
   resetAtFormatted: string | null;
   resetAfterFormatted: string | null;
+  valueLabel?: string | null;
 }
 
 export interface UsageWindows {