ompchamber 2.0.2 → 3.0.0

package/src/client/components/settings/categories/provider-settings/EffortLadder.tsx

@@ -0,0 +1,89 @@
+import { Check } from 'lucide-preact';
+import { PROVIDER_THINKING_EFFORTS, type ProviderThinkingEffort } from '@/shared/lib/models/provider/dialect';
+
+interface EffortLadderProps {
+  /** Selected levels, in any order; the component renders them in omp's order. */
+  selected: ProviderThinkingEffort[];
+  onToggle: (effort: ProviderThinkingEffort) => void;
+  onSelectAll: () => void;
+  onClear: () => void;
+}
+
+/**
+ * The reasoning ladder a model accepts, as checkboxes.
+ *
+ * omp reads this as `thinking.efforts` and refuses to start a level that is not
+ * on the list, so the control is a capability declaration rather than a
+ * preference: ticking `low` and `high` means the model may be asked for those
+ * two and nothing else. `off` is deliberately not offered — omp's `EffortSchema`
+ * rejects it, and turning thinking off is a per-turn choice the chat composer
+ * already owns.
+ *
+ * An EMPTY selection is a valid and distinct state: it means "do not declare a
+ * ladder", which leaves omp on its own default for the model. That is why the
+ * hint changes with the selection instead of always describing a ladder.
+ */
+export function EffortLadder({ selected, onToggle, onSelectAll, onClear }: EffortLadderProps) {
+  const isAll = selected.length === PROVIDER_THINKING_EFFORTS.length;
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-1.5">
+        <label className="block text-xs font-semibold text-ink">Reasoning levels</label>
+        <div className="flex items-center gap-2 text-[10px]">
+          <button
+            type="button"
+            onClick={onSelectAll}
+            disabled={isAll}
+            className="text-ink/50 hover:text-ink transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            all
+          </button>
+          <span className="text-ink/20">·</span>
+          <button
+            type="button"
+            onClick={onClear}
+            disabled={selected.length === 0}
+            className="text-ink/50 hover:text-ink transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            none
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-3 gap-2">
+        {PROVIDER_THINKING_EFFORTS.map((effort) => {
+          const isOn = selected.includes(effort);
+          return (
+            <button
+              key={effort}
+              type="button"
+              onClick={() => onToggle(effort)}
+              aria-pressed={isOn}
+              className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border text-left text-[11px] transition-colors cursor-pointer ${
+                isOn
+                  ? 'border-ink/50 bg-ink/5 font-semibold text-ink'
+                  : 'border-ink/15 hover:border-ink/30 text-ink/70'
+              }`}
+            >
+              <span
+                className={`w-3 h-3 rounded-[3px] border flex items-center justify-center shrink-0 ${
+                  isOn ? 'border-ink bg-ink text-canvas' : 'border-ink/30'
+                }`}
+              >
+                {isOn && <Check size={9} strokeWidth={3} />}
+              </span>
+              <span className="truncate">{effort}</span>
+            </button>
+          );
+        })}
+      </div>
+
+      <p className="text-[10px] text-ink/40 mt-1">
+        {selected.length === 0
+          ? 'No ladder declared — omp keeps its own default levels for this model.'
+          : `Only these levels will be offered: ${PROVIDER_THINKING_EFFORTS.filter((e) => selected.includes(e)).join(', ')}.`}
+      </p>
+    </div>
+  );
+}

package/src/client/components/settings/categories/provider-settings/Header.tsx

@@ -1,5 +1,5 @@
 import type { ProviderItem } from '@/shared/types';
-import { ProviderIcon } from '@/client/components/settings/categories/provider-settings/Icons';
+import { ProviderIcon } from '@/client/components/common/provider-icon';
 
 interface ProviderHeaderProps {
   provider: ProviderItem;
@@ -9,7 +9,7 @@ export function ProviderHeader({ provider }: ProviderHeaderProps) {
   return (
     <div className="flex flex-col gap-1 pb-4">
       <div className="flex items-center gap-2.5">
-        <ProviderIcon icon={provider.icon} size={22} />
+        <ProviderIcon icon={provider.icon} slug={provider.slug} name={provider.name} size={22} />
         <h2 className="text-xl font-bold tracking-tight text-ink">
           {provider.name}
         </h2>

package/src/client/components/settings/categories/provider-settings/LoginModal.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { AlertCircle, CheckCircle2, Globe, Key, Loader2 } from 'lucide-preact';
 import type { ProviderItem } from '@/shared/types';
-import { ProviderIcon } from '@/client/components/settings/categories/provider-settings/Icons';
+import { ProviderIcon } from '@/client/components/common/provider-icon';
 import { Modal } from '@/client/components/common/Modal';
 
 interface LoginModalProps {
@@ -132,7 +132,7 @@ export function LoginModal({ isOpen, provider, onClose, onAuthenticated }: Login
       onClose={onClose}
       header={
         <div className="flex items-center gap-2.5">
-          <ProviderIcon icon={provider.icon} size={18} />
+          <ProviderIcon icon={provider.icon} slug={provider.slug} name={provider.name} size={18} />
           <div>
             <h3 className="text-sm font-semibold text-ink">Sign in to {provider.name}</h3>
             <p className="text-[11px] text-ink/50 font-mono">{provider.slug}</p>

package/src/client/components/settings/categories/provider-settings/ModelsList.tsx

@@ -1,15 +1,19 @@
 import { useState } from 'preact/hooks';
-import { Eye, EyeOff, Image as ImageIcon, RefreshCw, Search, Settings2, SlidersHorizontal } from 'lucide-preact';
+import { Eye, EyeOff, Image as ImageIcon, Plus, RefreshCw, Search, Settings2, SlidersHorizontal } from 'lucide-preact';
 import type { ProviderModel } from '@/shared/types';
 import { formatContextWindow } from '@/shared/lib/code/format';
 import { formatPrice } from '@/shared/lib/format/number';
 
 interface ProviderModelsListProps {
   models: ProviderModel[];
+  /** Why the list is empty, when it legitimately is — never a generic excuse. */
+  emptyReason?: string;
   onToggleModelVisibility: (modelId: string) => void;
   onHideAll: () => void;
   onShowAll: () => void;
   onFetchModels: () => Promise<void>;
+  /** Opens the manual "Add Model" dialog. */
+  onAddModel: () => void;
   canFetchModels: boolean;
   isFetchingModels: boolean;
   onOpenModelConfig: (model: ProviderModel) => void;
@@ -18,10 +22,12 @@ interface ProviderModelsListProps {
 
 export function ProviderModelsList({
   models,
+  emptyReason,
   onToggleModelVisibility,
   onHideAll,
   onShowAll,
   onFetchModels,
+  onAddModel,
   canFetchModels,
   isFetchingModels,
   onOpenModelConfig,
@@ -52,6 +58,18 @@ export function ProviderModelsList({
             <RefreshCw size={12} className={isFetchingModels ? 'animate-spin' : ''} />
             <span>{isFetchingModels ? 'fetching...' : 'fetch models'}</span>
           </button>
+          {/* Manual registration, for the ids no listing endpoint reports:
+              a gateway model its /models omits, an Azure deployment name, a
+              provider with no listing route at all (Bedrock, Vertex). */}
+          <button
+            type="button"
+            onClick={onAddModel}
+            title="Register a model by hand"
+            className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded bg-ink/5 hover:bg-ink/10 text-[11px] font-medium text-ink/80 hover:text-ink transition-colors cursor-pointer border border-ink/10"
+          >
+            <Plus size={12} />
+            <span>add model</span>
+          </button>
           <button
             type="button"
             onClick={onHideAll}
@@ -94,7 +112,9 @@ export function ProviderModelsList({
       <div className="space-y-1 pt-1">
         {filteredModels.length === 0 ? (
           <div className="py-8 text-center text-xs text-ink/40">
-            No models found matching "{searchQuery}"
+            {searchQuery
+              ? `No models found matching "${searchQuery}"`
+              : emptyReason || 'No models registered for this provider yet.'}
           </div>
         ) : (
           filteredModels.map((model) => (

package/src/client/components/settings/categories/provider-settings/PresetPicker.tsx

@@ -0,0 +1,82 @@
+import { useState } from 'preact/hooks';
+import { Check, ChevronDown } from 'lucide-preact';
+import type { PresetProviderOption } from '@/shared/types/settings/provider';
+import { groupProviderPresets } from '@/shared/lib/models/provider/presets';
+import { ProviderIcon } from '@/client/components/common/provider-icon';
+
+interface PresetPickerProps {
+  presets: PresetProviderOption[];
+  selectedPresetId: string;
+  onSelectPreset: (preset: PresetProviderOption) => void;
+}
+
+/**
+ * The provider picker, grouped by kind.
+ *
+ * Groups matter because the presets are not interchangeable: a local engine is
+ * keyless and discovered by omp, a gateway is fetched and written into
+ * models.yml, and an "Other dialects" entry exists precisely because the
+ * endpoint is NOT OpenAI-shaped. Listing them in one flat grid made a keyless
+ * Ollama row look like a hosted API that would ask for a key.
+ */
+export function PresetPicker({ presets, selectedPresetId, onSelectPreset }: PresetPickerProps) {
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+  const groups = groupProviderPresets(presets);
+
+  if (presets.length === 0) {
+    return (
+      <p className="px-2 py-3 text-xs text-ink/50">
+        Every known provider is already configured.
+      </p>
+    );
+  }
+
+  return (
+    <div className="max-h-52 scrollbar-overlay-container scrollbar-overlay-static pr-1 space-y-2">
+      {groups.map((entry) => {
+        const isCollapsed = collapsed[entry.group] === true;
+        return (
+          <div key={entry.group}>
+            <button
+              type="button"
+              onClick={() => setCollapsed((prev) => ({ ...prev, [entry.group]: !isCollapsed }))}
+              className="w-full flex items-center gap-1.5 px-0.5 py-1 text-[10px] font-semibold tracking-wider text-ink/50 uppercase hover:text-ink/80 transition-colors cursor-pointer"
+            >
+              <ChevronDown
+                size={11}
+                className={`transition-transform ${isCollapsed ? '-rotate-90' : ''}`}
+              />
+              <span>{entry.group}</span>
+              <span className="text-ink/30 normal-case tracking-normal">{entry.options.length}</span>
+            </button>
+
+            {!isCollapsed && (
+              <div className="grid grid-cols-2 gap-2 pt-1">
+                {entry.options.map((preset) => {
+                  const isSelected = preset.id === selectedPresetId;
+                  return (
+                    <button
+                      key={preset.id}
+                      type="button"
+                      onClick={() => onSelectPreset(preset)}
+                      title={preset.defaultUrl}
+                      className={`flex items-center gap-2 p-2 rounded-lg border text-left text-xs transition-colors cursor-pointer ${
+                        isSelected
+                          ? 'border-ink/50 bg-ink/5 font-semibold text-ink shadow-2xs'
+                          : 'border-ink/15 hover:border-ink/30 text-ink/70'
+                      }`}
+                    >
+                      <ProviderIcon icon={preset.icon} slug={preset.slug} name={preset.name} size={14} />
+                      <span className="truncate flex-1">{preset.name}</span>
+                      {isSelected && <Check size={12} className="shrink-0 text-ink" />}
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/client/components/settings/categories/provider-settings/PriceFields.tsx

@@ -0,0 +1,107 @@
+import { DollarSign } from 'lucide-preact';
+
+interface PriceFieldsProps {
+  costInput: string;
+  costOutput: string;
+  costCacheRead: string;
+  costCacheWrite: string;
+  onCostInputChange: (value: string) => void;
+  onCostOutputChange: (value: string) => void;
+  onCostCacheReadChange: (value: string) => void;
+  onCostCacheWriteChange: (value: string) => void;
+  error?: string;
+}
+
+/** One labelled price box. `hint` distinguishes the four rates. */
+function PriceField({
+  value,
+  onChange,
+  label,
+  hint,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  label: string;
+  hint: string;
+}) {
+  return (
+    <div>
+      <label className="block text-[11px] font-medium text-ink/70 mb-1" title={hint}>
+        {label}
+      </label>
+      <div className="relative flex items-center">
+        <DollarSign size={12} className="absolute left-2.5 text-ink/40 pointer-events-none" />
+        <input
+          type="text"
+          inputMode="decimal"
+          value={value}
+          onChange={(e) => onChange(e.currentTarget.value)}
+          placeholder="0"
+          className="w-full bg-paper border border-ink/20 rounded-md pl-7 pr-2 py-1.5 text-xs text-ink outline-none focus:border-ink/60 font-mono"
+        />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * The four `models.yml` cost rates, in USD per 1M tokens.
+ *
+ * omp requires all four fields together, so input/output are the pair that
+ * decides whether a price is written at all; the two cache rates then default
+ * to 0, which is the honest value for "no cached-token discount". Cache rates
+ * matter for accounting rather than routing: without them every cached turn is
+ * billed at the full input rate, which is why they are worth asking for
+ * separately instead of deriving from input.
+ */
+export function PriceFields({
+  costInput,
+  costOutput,
+  costCacheRead,
+  costCacheWrite,
+  onCostInputChange,
+  onCostOutputChange,
+  onCostCacheReadChange,
+  onCostCacheWriteChange,
+  error,
+}: PriceFieldsProps) {
+  return (
+    <div>
+      <label className="block text-xs font-semibold text-ink mb-1.5">
+        Price <span className="font-normal text-ink/40">— USD per 1M tokens, optional</span>
+      </label>
+      <div className="grid grid-cols-2 gap-3">
+        <PriceField
+          value={costInput}
+          onChange={onCostInputChange}
+          label="Input"
+          hint="Uncached prompt tokens"
+        />
+        <PriceField
+          value={costOutput}
+          onChange={onCostOutputChange}
+          label="Output"
+          hint="Generated tokens"
+        />
+        <PriceField
+          value={costCacheRead}
+          onChange={onCostCacheReadChange}
+          label="Cache read"
+          hint="Prompt tokens served from the provider's cache — usually a fraction of the input rate"
+        />
+        <PriceField
+          value={costCacheWrite}
+          onChange={onCostCacheWriteChange}
+          label="Cache write"
+          hint="Prompt tokens written into the provider's cache"
+        />
+      </div>
+      {error && <p className="text-[11px] text-error mt-1">{error}</p>}
+      <p className="text-[10px] text-ink/40 mt-1">
+        Used for omp's cost accounting. Input and output decide whether a price is
+        written at all; the cache rates fall back to 0, which bills cached turns at
+        the full input rate.
+      </p>
+    </div>
+  );
+}

package/src/client/components/settings/categories/provider-settings/ReconnectModal.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'preact/hooks';
 import type { FormEvent } from 'preact/compat';
-import { AlertCircle, CheckCircle2, DownloadCloud, Globe, Key, RefreshCw } from 'lucide-preact';
+import { AlertCircle, CheckCircle2, DownloadCloud, Globe, Info, Key, RefreshCw } from 'lucide-preact';
 import type { ProviderItem } from '@/shared/types';
-import { fetchProviderModelsRemote } from '@/shared/lib/models/provider-models';
-import { ProviderIcon } from '@/client/components/settings/categories/provider-settings/Icons';
+import { fetchProviderModelsRemote } from '@/shared/lib/models/provider/models';
+import { ProviderIcon } from '@/client/components/common/provider-icon';
 import { Modal } from '@/client/components/common/Modal';
 
 interface ReconnectModalProps {
@@ -23,6 +23,7 @@ export function ReconnectModal({
   onReconnect,
   onFetchModels,
 }: ReconnectModalProps) {
+  const isKeyless = provider.auth === 'none';
   const [apiKey, setApiKey] = useState(provider.apiKey || 'sk-••••••••••••••••••••••••');
   const [baseUrl, setBaseUrl] = useState(provider.baseUrl || 'https://api.openai.com/v1');
   const [isTesting, setIsTesting] = useState(false);
@@ -39,7 +40,11 @@ export function ReconnectModal({
   const handleTestConnection = async () => {
     setIsTesting(true);
     setTestResult(null);
-    const result = await fetchProviderModelsRemote(baseUrl, draftCredentials.apiKey);
+    const result = await fetchProviderModelsRemote({
+      baseUrl,
+      ...(draftCredentials.apiKey ? { apiKey: draftCredentials.apiKey } : {}),
+      ...(provider.api ? { api: provider.api } : {}),
+    });
     setIsTesting(false);
     setTestResult(result.ok ? 'success' : 'failed');
   };
@@ -47,7 +52,10 @@ export function ReconnectModal({
   const handleSave = async (e: FormEvent) => {
     e.preventDefault();
     onReconnect({
-      apiKey,
+      // A keyless provider is configured by `auth: none`; storing the masked
+      // placeholder as its credential would show a key that authenticates
+      // nothing.
+      ...(isKeyless ? {} : { apiKey }),
       baseUrl,
       status: 'connected',
     });
@@ -60,7 +68,7 @@ export function ReconnectModal({
       onClose={onClose}
       header={
         <div className="flex items-center gap-2.5">
-          <ProviderIcon icon={provider.icon} size={18} />
+          <ProviderIcon icon={provider.icon} slug={provider.slug} name={provider.name} size={18} />
           <div>
             <h3 className="text-sm font-semibold text-ink">
               Authentication & Credentials
@@ -108,21 +116,33 @@ export function ReconnectModal({
         </div>
       </div>
 
-      {/* API Key */}
-      <div>
-        <label className="block text-xs font-semibold text-ink mb-1">
-          API Key / Auth Token
-        </label>
-        <div className="relative flex items-center">
-          <Key size={13} className="absolute left-2.5 text-ink/40 pointer-events-none" />
-          <input
-            type="text"
-            value={apiKey}
-            onChange={(e) => setApiKey(e.currentTarget.value)}
-            className="w-full bg-paper border border-ink/20 rounded-md pl-8 pr-3 py-1.5 text-xs text-ink outline-none focus:border-ink/60 font-mono"
-          />
+      {/* API Key — omitted for a keyless provider, which omp configures by
+          `auth: none` and which has no credential to store. */}
+      {isKeyless ? (
+        <div className="flex items-start gap-2 px-3 py-2 rounded-md bg-ink/5 border border-ink/10 text-[11px] text-ink/60">
+          <Info size={13} className="mt-0.5 flex-shrink-0 text-ink/50" />
+          <span>
+            This provider is registered with <span className="font-mono">auth: none</span>, so omp
+            sends no credential. Set Auth to “API key” in the provider’s own entry if the endpoint
+            starts requiring one.
+          </span>
         </div>
-      </div>
+      ) : (
+        <div>
+          <label className="block text-xs font-semibold text-ink mb-1">
+            API Key / Auth Token
+          </label>
+          <div className="relative flex items-center">
+            <Key size={13} className="absolute left-2.5 text-ink/40 pointer-events-none" />
+            <input
+              type="text"
+              value={apiKey}
+              onChange={(e) => setApiKey(e.currentTarget.value)}
+              className="w-full bg-paper border border-ink/20 rounded-md pl-8 pr-3 py-1.5 text-xs text-ink outline-none focus:border-ink/60 font-mono"
+            />
+          </div>
+        </div>
+      )}
 
       {/* Test connection indicator */}
       <div className="flex items-center justify-between pt-1">
@@ -154,8 +174,9 @@ export function ReconnectModal({
       <div className="flex items-start gap-2 px-3 py-2 rounded-md bg-ink/5 border border-ink/10 text-[11px] text-ink/60">
         <DownloadCloud size={13} className="mt-0.5 flex-shrink-0 text-ink/50" />
         <span>
-          On save, models are fetched from the endpoint and merged into the
-          list below — existing models are kept, only new ones are added.
+          {isKeyless
+            ? 'On save, models are fetched from the endpoint and merged into the list below — a keyless server needs none to answer.'
+            : 'On save, models are fetched from the endpoint and merged into the list below — existing models are kept, only new ones are added.'}
         </span>
       </div>
     </Modal>

package/src/client/components/settings/categories/provider-settings/SidebarList.tsx

@@ -2,7 +2,7 @@
 import { useRef, useState } from 'preact/hooks';
 import { Check, ChevronDown, Folder, Plus } from 'lucide-preact';
 import type { ProviderItem } from '@/shared/types';
-import { ProviderIcon } from '@/client/components/settings/categories/provider-settings/Icons';
+import { ProviderIcon } from '@/client/components/common/provider-icon';
 import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
 
 interface ProviderSidebarListProps {
@@ -115,7 +115,7 @@ export function ProviderSidebarList({
               }`}
             >
               <div className="flex items-center gap-2.5 min-w-0">
-                <ProviderIcon icon={item.icon} size={15} className="flex-shrink-0" />
+                <ProviderIcon icon={item.icon} slug={item.slug} name={item.name} size={15} className="flex-shrink-0" />
                 <span className="text-[12px] truncate">{item.name}</span>
               </div>
 

package/src/client/components/settings/categories/usage-settings/LimitsSection.tsx

@@ -0,0 +1,115 @@
+import type { UsageLimitWindow } from '@/shared/types';
+import { formatDateTime, formatFractionPercent, formatUsageAmount } from '@/client/components/settings/categories/usage-settings/format';
+
+interface LimitRowProps {
+  limit: UsageLimitWindow;
+}
+
+/** One provider-reported quota window: label, bar, used/remaining, reset. */
+function LimitRow({ limit }: LimitRowProps) {
+  const percent = Math.min(100, Math.max(0, (limit.usedFraction ?? 0) * 100));
+  const scope = limit.modelId ?? limit.accountId;
+  const usedText = limit.used !== undefined ? formatUsageAmount(limit.used, limit.unit) : undefined;
+  const limitText = limit.limit !== undefined ? formatUsageAmount(limit.limit, limit.unit) : undefined;
+  const remainingText = limit.remaining !== undefined
+    ? formatUsageAmount(limit.remaining, limit.unit)
+    : undefined;
+
+  return (
+    <div className="bg-paper border border-ink/15 rounded-lg p-3 shadow-xs space-y-2">
+      <div className="flex items-start justify-between gap-2">
+        <div className="min-w-0">
+          <div className="text-[11px] font-semibold text-ink truncate">{limit.label}</div>
+          {scope && <div className="text-[10px] text-ink/50 truncate">{scope}</div>}
+        </div>
+        <span className="text-[10px] text-ink/50 flex-shrink-0 whitespace-nowrap">
+          {limit.resetsAt !== undefined ? `Resets ${formatDateTime(new Date(limit.resetsAt).toISOString())}` : ''}
+        </span>
+      </div>
+
+      <div className="h-1.5 w-full bg-ink/10 rounded-full overflow-hidden">
+        <div
+          className={`h-full rounded-full ${limit.status === 'exhausted' ? 'bg-error/70' : 'bg-ink/80'}`}
+          style={{ width: `${percent}%` }}
+        />
+      </div>
+
+      <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-0.5 text-[10px] text-ink/60">
+        <span>
+          Used{' '}
+          <span className="font-semibold text-ink">
+            {limit.unit === 'percent' || !usedText ? formatFractionPercent(limit.usedFraction ?? 0) : usedText}
+          </span>
+          {/* A percent unit is already a share of 100, so naming the limit
+              again would print "42% of 100%". */}
+          {limit.unit !== 'percent' && usedText && limitText ? ` of ${limitText}` : ''}
+        </span>
+        <span className="flex items-center gap-2">
+          {limit.status !== 'ok' && limit.status !== 'unknown' && (
+            <span className="text-[10px] font-mono uppercase px-1.5 py-0.5 rounded bg-ink/10 text-ink/70">
+              {limit.status}
+            </span>
+          )}
+          {remainingText && (
+            <span>
+              Remaining <span className="font-semibold text-ink">{remainingText}</span>
+            </span>
+          )}
+        </span>
+      </div>
+
+      {limit.notes && limit.notes.length > 0 && (
+        <ul className="text-[10px] text-ink/50 leading-relaxed space-y-0.5">
+          {limit.notes.map((note) => (
+            <li key={note}>{note}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+interface LimitsSectionProps {
+  limits: UsageLimitWindow[];
+  /** Whether omp ships a usage adapter for this provider. */
+  tracked: boolean;
+  /** omp tracks this provider but its endpoint returned nothing. */
+  unavailable?: boolean;
+  /** Provider-wide caveats shown above the windows. */
+  notes?: string[];
+}
+
+/** Generic quota windows for any provider omp reports usage for. */
+export function LimitsSection({ limits, tracked, unavailable, notes }: LimitsSectionProps) {
+  return (
+    <div className="space-y-2">
+      <h4 className="text-[10px] font-mono font-semibold uppercase tracking-wider text-ink/40">
+        Quota windows
+      </h4>
+
+      {notes && notes.length > 0 && (
+        <ul className="text-[10px] text-ink/50 leading-relaxed space-y-0.5">
+          {notes.map((note) => (
+            <li key={note}>{note}</li>
+          ))}
+        </ul>
+      )}
+
+      {limits.length === 0 ? (
+        <p className="text-[11px] text-ink/50">
+          {!tracked
+            ? 'No quota source for this provider: omp ships no usage adapter for it and it exposes no balance endpoint the chamber knows.'
+            : unavailable
+              ? 'omp tracks this provider but its usage endpoint returned no data — an invalid or expired credential, an unreachable endpoint, or a plan without quota windows.'
+              : 'No quota windows were reported for this provider.'}
+        </p>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-2.5">
+          {limits.map((limit) => (
+            <LimitRow key={limit.id} limit={limit} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}