ompchamber 2.0.2 → 3.1.0

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>
+  );
+}

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

@@ -1,47 +1,40 @@
 import type { ReactNode } from 'preact/compat';
-import { AlertCircle, KeyRound } from 'lucide-preact';
+import { AlertCircle } from 'lucide-preact';
 
 interface ProviderCardProps {
   providerName: string;
-  configured: boolean;
+  /** Where the credential was found, e.g. "models.yml · agent.db". */
+  credentialSources: string[];
+  /** Provider-side failure, already human-readable. */
   error?: string;
   note?: string;
   children: ReactNode;
 }
 
-/** Provider shell: header, configured empty state, error line, and content slot.
- * Content is rendered whenever the provider is configured, so partial data
- * (e.g. quota fails but balance works) still shows the sections that succeeded. */
-export function ProviderCard({ providerName, configured, error, note, children }: ProviderCardProps) {
+/** Provider shell: header, credential provenance, error line, and content slot.
+ * Every listed provider has a resolved credential — a keyless provider is never
+ * rendered at all — so there is no "not configured" state here. */
+export function ProviderCard({ providerName, credentialSources, error, note, children }: ProviderCardProps) {
   return (
     <section className="bg-paper border border-ink/15 rounded-lg shadow-xs">
       <header className="flex items-center justify-between gap-2 px-3.5 py-2.5 border-b border-ink/10">
         <span className="text-xs font-semibold text-ink">{providerName}</span>
-        <span className="text-[10px] font-mono uppercase tracking-wider text-ink/50">
-          {configured ? 'Connected' : 'Not configured'}
+        <span
+          className="text-[10px] font-mono uppercase tracking-wider text-ink/50 truncate"
+          title={`Credentials from ${credentialSources.join(', ')}`}
+        >
+          {credentialSources.join(' · ')}
         </span>
       </header>
 
       <div className="p-3.5 space-y-4">
-        {!configured ? (
-          <div className="flex items-start gap-2 text-ink/60 text-xs leading-relaxed">
-            <KeyRound size={14} className="shrink-0 mt-0.5 text-ink/40" />
-            <p>
-              Add the <span className="font-semibold text-ink">{providerName}</span> API key in Settings →
-              Providers to see its balance, quota, and usage here.
-            </p>
-          </div>
-        ) : (
-          <>
-            {error && (
-              <p className="flex items-start gap-2 text-error text-xs leading-relaxed">
-                <AlertCircle size={14} className="shrink-0 mt-0.5" />
-                <span className="break-words">{error}</span>
-              </p>
-            )}
-            {children}
-          </>
+        {error && (
+          <p className="flex items-start gap-2 text-error text-xs leading-relaxed">
+            <AlertCircle size={14} className="shrink-0 mt-0.5" />
+            <span className="break-words">{error}</span>
+          </p>
         )}
+        {children}
 
         {note && (
           <p className="text-[10px] text-ink/50 leading-relaxed border-t border-ink/10 pt-2.5">{note}</p>

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

@@ -1,39 +1,46 @@
-import type { UsageReport } from '@/shared/types';
+import type { UsageProviderSummary } from '@/shared/types';
 import { ProviderCard } from '@/client/components/settings/categories/usage-settings/ProviderCard';
 import { KenariCard } from '@/client/components/settings/categories/usage-settings/KenariCard';
 import { DeepSeekCard } from '@/client/components/settings/categories/usage-settings/DeepSeekCard';
-import type { UsageProviderId } from '@/client/components/settings/categories/usage-settings/providers';
+import { LimitsSection } from '@/client/components/settings/categories/usage-settings/LimitsSection';
 
 const DEEPSEEK_NOTE =
   'DeepSeek exposes no usage or quota API — only the prepaid balance (and the web console at platform.deepseek.com) is available.';
 
 interface ProviderDetailProps {
-  providerId: UsageProviderId;
-  report: UsageReport;
+  summary: UsageProviderSummary;
 }
 
-/** Renders one provider's card (Kenari.id or DeepSeek) from a usage report. */
-export function ProviderDetail({ providerId, report }: ProviderDetailProps) {
-  if (providerId === 'kenari') {
-    return (
-      <ProviderCard
-        providerName="Kenari.id"
-        configured={report.kenari.configured}
-        error={report.kenari.error}
-      >
-        <KenariCard report={report.kenari} />
-      </ProviderCard>
-    );
-  }
+/**
+ * Renders one provider's card. kenari and DeepSeek carry richer reports (wallet
+ * and Rupiah quota / prepaid balance); every other provider renders the generic
+ * quota windows, which for a pay-as-you-go vendor is its credit balance.
+ */
+export function ProviderDetail({ summary }: ProviderDetailProps) {
+  const hasRichReport = Boolean(summary.kenari || summary.deepseek);
 
   return (
     <ProviderCard
-      providerName="DeepSeek"
-      configured={report.deepseek.configured}
-      error={report.deepseek.error}
-      note={DEEPSEEK_NOTE}
+      providerName={summary.name}
+      credentialSources={summary.credentialSources}
+      error={summary.error}
+      note={summary.deepseek ? DEEPSEEK_NOTE : undefined}
     >
-      <DeepSeekCard report={report.deepseek} />
+      {summary.kenari && <KenariCard report={summary.kenari} />}
+      {summary.deepseek && <DeepSeekCard report={summary.deepseek} />}
+
+      {/* The rich reports already render their own quota and usage tables, so
+          the generic windows would only duplicate them. When the provider
+          failed outright and reported no windows, the error line above already
+          says so — a second "no quota source" note would contradict it. */}
+      {!hasRichReport && (summary.limits.length > 0 || !summary.error) && (
+        <LimitsSection
+          limits={summary.limits}
+          tracked={summary.tracked}
+          unavailable={summary.limitsUnavailable}
+          notes={summary.notes}
+        />
+      )}
     </ProviderCard>
   );
 }

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

@@ -1,6 +1,6 @@
-import { Bot, Coins } from 'lucide-preact';
 import type { UsageReport } from '@/shared/types';
-import { buildProviders, statusLabel, type UsageProviderId } from '@/client/components/settings/categories/usage-settings/providers';
+import { buildProviders, statusLabel, type ProviderEntry, type UsageProviderId } from '@/client/components/settings/categories/usage-settings/providers';
+import { ProviderIcon } from '@/client/components/common/provider-icon';
 
 interface UsageSidebarListProps {
   report: UsageReport;
@@ -8,6 +8,14 @@ interface UsageSidebarListProps {
   onSelectProvider: (providerId: UsageProviderId) => void;
 }
 
+function ProviderBadge({ provider, selected }: { provider: ProviderEntry; selected: boolean }) {
+  return (
+    <span className={selected ? 'text-ink/80' : 'text-ink/60'}>
+      <ProviderIcon slug={provider.id} name={provider.name} size={14} />
+    </span>
+  );
+}
+
 export function UsageSidebarList({
   report,
   selectedProviderId,
@@ -18,59 +26,63 @@ export function UsageSidebarList({
   return (
     <div className="w-56 sm:w-64 border-r border-ink/10 h-full flex flex-col bg-paper/50 flex-shrink-0 select-none">
       <div className="px-3.5 py-2.5 border-b border-ink/10 flex items-center justify-between">
-        <span className="text-xs font-semibold text-ink">Total {providers.length} providers</span>
+        <span className="text-xs font-semibold text-ink">
+          {providers.length} provider{providers.length === 1 ? '' : 's'} with keys
+        </span>
       </div>
 
       <div className="flex-1 scrollbar-overlay-container scrollbar-overlay-static p-1.5 space-y-3 text-xs">
-        <div>
-          <div className="px-2.5 pt-1.5 pb-1 text-[10px] font-bold text-ink/50 uppercase tracking-wider">
-            Providers
-          </div>
-          <div className="space-y-0.5">
-            {providers.map((provider) => {
-              const isSelected = provider.id === selectedProviderId;
-              const isConnected = provider.configured && !provider.error;
-              const Icon = provider.id === 'kenari' ? Coins : Bot;
+        {providers.length === 0 ? (
+          <p className="px-2.5 py-3 text-[11px] text-ink/50 leading-relaxed">
+            No provider credentials detected. Add an API key in Settings → Providers.
+          </p>
+        ) : (
+          <div>
+            <div className="px-2.5 pt-1.5 pb-1 text-[10px] font-bold text-ink/50 uppercase tracking-wider">
+              Providers
+            </div>
+            <div className="space-y-0.5">
+              {providers.map((provider) => {
+                const isSelected = provider.id === selectedProviderId;
 
-              return (
-                <button
-                  key={provider.id}
-                  type="button"
-                  onClick={() => onSelectProvider(provider.id)}
-                  className={`w-full text-left px-2.5 py-2 rounded-lg transition-colors cursor-pointer flex flex-col gap-0.5 group ${
-                    isSelected
-                      ? 'bg-ink/10 text-ink font-medium shadow-2xs'
-                      : 'text-ink/80 hover:bg-ink/5 hover:text-ink'
-                  }`}
-                >
-                  <div className="flex items-center justify-between gap-1.5">
-                    <div className="flex items-center gap-1.5 min-w-0">
-                      <div className="relative">
-                        <Icon
-                          className={`w-3.5 h-3.5 flex-shrink-0 ${isSelected ? 'text-ink/80' : 'text-ink/60'}`}
-                        />
-                        <span
-                          className={`absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full ${
-                            isConnected ? 'bg-ink' : 'bg-ink/20'
-                          }`}
-                        />
+                return (
+                  <button
+                    key={provider.id}
+                    type="button"
+                    onClick={() => onSelectProvider(provider.id)}
+                    className={`w-full text-left px-2.5 py-2 rounded-lg transition-colors cursor-pointer flex flex-col gap-0.5 group ${
+                      isSelected
+                        ? 'bg-ink/10 text-ink font-medium shadow-2xs'
+                        : 'text-ink/80 hover:bg-ink/5 hover:text-ink'
+                    }`}
+                  >
+                    <div className="flex items-center justify-between gap-1.5">
+                      <div className="flex items-center gap-1.5 min-w-0">
+                        <div className="relative">
+                          <ProviderBadge provider={provider} selected={isSelected} />
+                          <span
+                            className={`absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full ${
+                              provider.error ? 'bg-error/60' : 'bg-ink'
+                            }`}
+                          />
+                        </div>
+                        <span className="font-semibold text-xs text-ink truncate">{provider.name}</span>
                       </div>
-                      <span className="font-semibold text-xs text-ink truncate">{provider.name}</span>
+                      <span
+                        className={`text-[10px] font-mono uppercase px-1.5 py-0.5 rounded bg-ink/10 font-medium ${
+                          provider.error ? 'text-error' : 'text-ink/70'
+                        }`}
+                      >
+                        {statusLabel(provider)}
+                      </span>
                     </div>
-                    <span
-                      className={`text-[10px] font-mono uppercase px-1.5 py-0.5 rounded bg-ink/10 font-medium ${
-                        provider.error ? 'text-error' : 'text-ink/70'
-                      }`}
-                    >
-                      {statusLabel(provider)}
-                    </span>
-                  </div>
-                  <p className="text-[11px] text-ink/60 line-clamp-1 leading-snug pl-5">{provider.hint}</p>
-                </button>
-              );
-            })}
+                    <p className="text-[11px] text-ink/60 line-clamp-1 leading-snug pl-5">{provider.hint}</p>
+                  </button>
+                );
+              })}
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   );