ompchamber 2.0.2 → 3.1.0

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

@@ -1,5 +1,5 @@
 import { useState } from 'preact/hooks';
-import { AlertCircle, Ban, Check, Info } from 'lucide-preact';
+import { AlertCircle, Ban, Check, Info, Trash2 } from 'lucide-preact';
 import type { ProviderItem } from '@/shared/types';
 
 interface ProviderAuthSectionProps {
@@ -8,6 +8,8 @@ interface ProviderAuthSectionProps {
   onToggleDisconnect: () => void;
   /** Adds/removes the provider in omp's config.yml `disabledProviders`. */
   onToggleDisabled: () => void;
+  /** Opens the delete confirmation for a provider registered in models.yml. */
+  onDelete: () => void;
 }
 
 export function ProviderAuthSection({
@@ -15,6 +17,7 @@ export function ProviderAuthSection({
   onOpenReconnectModal,
   onToggleDisconnect,
   onToggleDisabled,
+  onDelete,
 }: ProviderAuthSectionProps) {
   const [showInfoTooltip, setShowInfoTooltip] = useState(false);
   const isConnected = provider.status === 'connected';
@@ -82,6 +85,22 @@ export function ProviderAuthSection({
             >
               {isConnected ? 'reconnect' : 'connect'}
             </button>
+
+            {/* Delete only exists for a provider that HAS a models.yml entry:
+                there is nothing in the file to remove otherwise, and the button
+                would promise an action it cannot perform. A login provider's
+                credential is never touched by this. */}
+            {provider.inModelsYml && (
+              <button
+                type="button"
+                onClick={onDelete}
+                title="Remove this provider's models.yml entry"
+                className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-error/10 hover:bg-error/20 text-error text-xs font-medium transition-colors cursor-pointer border border-error/30"
+              >
+                <Trash2 size={12} />
+                <span>delete</span>
+              </button>
+            )}
           </div>
         </div>
       </div>
@@ -113,6 +132,38 @@ export function ProviderAuthSection({
             </span>
           )}
         </div>
+
+        {/* Dialect: the wire api and auth mode omp will use. A provider whose
+            endpoint is right but whose dialect is wrong fails on every request,
+            so it belongs next to the connection status rather than in a log. */}
+        {(provider.api || provider.auth || provider.discovery) && (
+          <div className="flex flex-wrap items-center gap-1.5 pt-0.5">
+            {provider.api && (
+              <span
+                className="px-1.5 py-0.5 rounded border border-ink/15 text-[10px] font-mono text-ink/70"
+                title="Wire API omp uses for this provider"
+              >
+                {provider.api}
+              </span>
+            )}
+            {provider.auth && provider.auth !== 'apiKey' && (
+              <span
+                className="px-1.5 py-0.5 rounded border border-ink/15 text-[10px] font-mono text-ink/70"
+                title="Auth mode from models.yml"
+              >
+                auth: {provider.auth}
+              </span>
+            )}
+            {provider.discovery && (
+              <span
+                className="px-1.5 py-0.5 rounded border border-ink/15 text-[10px] font-mono text-ink/70"
+                title="omp lists this provider's models live"
+              >
+                discovery: {provider.discovery}
+              </span>
+            )}
+          </div>
+        )}
       </div>
 
       <div className="border-b border-ink/10" />

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

@@ -0,0 +1,133 @@
+import { useEffect } from 'preact/hooks';
+import { AlertTriangle, Loader2, Trash2 } from 'lucide-preact';
+import type { ProviderItem } from '@/shared/types';
+import { ProviderIcon } from '@/client/components/common/provider-icon';
+
+interface DeleteProviderModalProps {
+  isOpen: boolean;
+  provider: ProviderItem | null;
+  /** True while the delete request is in flight. */
+  isDeleting: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+/**
+ * Confirmation for deleting a provider registered in `models.yml`.
+ *
+ * The dialog names what actually disappears — the file entry, its model list,
+ * and the endpoint/credential stored on it — because the action is not
+ * reversible from the UI: the endpoint and API key are only ever shown masked,
+ * so a deleted provider has to be reconfigured from scratch.
+ *
+ * It also says what is NOT touched. A provider omp ships (a login provider, or
+ * a bundled catalog entry) keeps its own configuration; only the `models.yml`
+ * override goes, and that distinction is the difference between "I can add this
+ * back" and "I just deleted my Anthropic login".
+ */
+export function DeleteProviderModal({
+  isOpen,
+  provider,
+  isDeleting,
+  onClose,
+  onConfirm,
+}: DeleteProviderModalProps) {
+  useEffect(() => {
+    // No dismissing mid-delete: the modal resolves itself on success, and an
+    // early close would let a second delete be queued against a stale list.
+    const handler = (e: globalThis.KeyboardEvent) => {
+      if (e.key !== 'Escape' || isDeleting) return;
+      e.preventDefault();
+      onClose();
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [onClose, isDeleting]);
+
+  if (!isOpen || !provider) return null;
+
+  const modelCount = provider.models.length;
+
+  return (
+    <div
+      className="fixed inset-0 z-[70] flex items-center justify-center bg-ink/40 backdrop-blur-[2px] p-4"
+      onClick={isDeleting ? undefined : onClose}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Confirm provider deletion"
+    >
+      <div
+        className="bg-paper border border-ink/20 rounded-xl shadow-2xl w-[min(94vw,460px)] overflow-hidden text-ink"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-3 px-5 py-4 border-b border-ink/10">
+          <Trash2 size={16} className="text-error shrink-0" />
+          <div className="min-w-0">
+            <h2 className="text-sm font-semibold text-ink">Delete provider?</h2>
+            <p className="text-[11px] text-ink/50 truncate">
+              <span className="font-mono">{provider.slug}</span>
+            </p>
+          </div>
+        </div>
+
+        <div className="px-5 py-4 space-y-3">
+          <div className="flex items-center gap-2.5 px-3 py-2.5 rounded-lg bg-ink/5 border border-ink/10">
+            <ProviderIcon icon={provider.icon} slug={provider.slug} name={provider.name} size={18} />
+            <span className="text-xs font-medium text-ink truncate">{provider.name}</span>
+          </div>
+
+          <ul className="text-[11.5px] leading-relaxed text-ink/70 space-y-1.5">
+            <li>
+              Its entry is removed from{' '}
+              <span className="font-mono text-ink">~/.omp/agent/models.yml</span>
+              {modelCount > 0
+                ? `, along with its ${modelCount} registered model${modelCount === 1 ? '' : 's'}.`
+                : '.'}
+            </li>
+            <li>The endpoint and API key stored on that entry are removed with it — they are shown masked here, so you would need to enter them again.</li>
+            {provider.credentialSource === 'omp-auth' && (
+              <li className="text-ink/60">
+                Your omp login for <span className="font-mono">{provider.slug}</span> is NOT touched — only the models.yml
+                entry above. The provider stays available through that login.
+              </li>
+            )}
+          </ul>
+
+          <div className="flex items-start gap-2 px-3 py-2 rounded-md border border-error/30 bg-error/5 text-[11px] text-ink/75">
+            <AlertTriangle size={13} className="mt-0.5 shrink-0 text-error" />
+            <span>This cannot be undone from the UI. Re-adding the provider starts from an empty endpoint and key.</span>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end gap-2 px-5 py-3.5 border-t border-ink/10">
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={isDeleting}
+            className="px-3.5 py-1.5 rounded-md border border-ink/20 text-xs font-medium text-ink hover:bg-ink/5 transition-colors cursor-pointer disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            disabled={isDeleting}
+            className="px-3.5 py-1.5 rounded-md bg-error text-canvas text-xs font-medium hover:opacity-90 transition-opacity cursor-pointer disabled:opacity-50 flex items-center gap-1.5"
+          >
+            {isDeleting ? (
+              <>
+                <Loader2 size={13} className="animate-spin" />
+                <span>Deleting...</span>
+              </>
+            ) : (
+              <>
+                <Trash2 size={13} />
+                <span>Delete provider</span>
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,136 @@
+import type {
+  OmpProviderApi,
+  ProviderAuthMode,
+  ProviderDiscoveryType,
+  ProviderModelSource,
+} from '@/shared/types/settings/provider';
+import {
+  PROVIDER_APIS,
+  PROVIDER_API_LABELS,
+  PROVIDER_AUTH_MODES,
+  PROVIDER_DISCOVERY_TYPES,
+} from '@/shared/lib/models/provider/dialect';
+
+interface DialectFieldsProps {
+  api: OmpProviderApi;
+  onApiChange: (api: OmpProviderApi) => void;
+  auth: ProviderAuthMode;
+  onAuthChange: (auth: ProviderAuthMode) => void;
+  source: ProviderModelSource;
+  onSourceChange: (source: ProviderModelSource) => void;
+  discovery: ProviderDiscoveryType;
+  onDiscoveryChange: (discovery: ProviderDiscoveryType) => void;
+}
+
+const SOURCE_OPTIONS: ReadonlyArray<{ value: ProviderModelSource; label: string; hint: string }> = [
+  { value: 'fetch', label: 'Fetch now', hint: 'List the endpoint here and write the ids into models.yml' },
+  { value: 'discovery', label: 'Let omp discover', hint: 'omp lists the models live on every run' },
+  { value: 'override', label: 'Endpoint only', hint: 'Keep omp’s own model list, change only the URL' },
+];
+
+const fieldClass = 'w-full text-xs py-2 px-3 rounded-lg border border-ink/20 hover:border-ink/40 '
+  + 'bg-paper focus:outline-none focus:border-ink text-ink transition-colors cursor-pointer';
+
+/**
+ * The provider DIALECT controls: wire API, auth mode, and where the model list
+ * comes from.
+ *
+ * These three are the `models.yml` fields that decide whether a provider works
+ * at all, and each one is a decision the chamber cannot make for the user:
+ *
+ * - An Anthropic-shaped proxy reached with a Bearer header authorises nothing,
+ *   and omp rejects an unknown `api` by disabling every custom provider in the
+ *   file — so the dialect is picked from omp's own list, never guessed into it.
+ * - `auth: none` is what makes a local server keyless; without it omp demands a
+ *   key and the provider is reported as unconfigured.
+ * - A provider omp can discover should not also receive a snapshot of ids, or
+ *   the two lists drift as soon as the endpoint adds a model.
+ */
+export function DialectFields({
+  api,
+  onApiChange,
+  auth,
+  onAuthChange,
+  source,
+  onSourceChange,
+  discovery,
+  onDiscoveryChange,
+}: DialectFieldsProps) {
+  return (
+    <>
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <label className="block text-xs font-semibold text-ink mb-1">Wire API</label>
+          <select
+            value={api}
+            onChange={(e) => onApiChange(e.currentTarget.value as OmpProviderApi)}
+            className={fieldClass}
+          >
+            {PROVIDER_APIS.map((value) => (
+              <option key={value} value={value}>{value}</option>
+            ))}
+          </select>
+        </div>
+        <div>
+          <label className="block text-xs font-semibold text-ink mb-1">Auth</label>
+          <select
+            value={auth}
+            onChange={(e) => onAuthChange(e.currentTarget.value as ProviderAuthMode)}
+            className={fieldClass}
+          >
+            {PROVIDER_AUTH_MODES.map((mode) => (
+              <option key={mode.value} value={mode.value}>{mode.label}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <p className="text-[10px] text-ink/40 leading-relaxed -mt-1">
+        {PROVIDER_API_LABELS[api]} · {PROVIDER_AUTH_MODES.find((m) => m.value === auth)?.hint}
+      </p>
+
+      <div>
+        <label className="block text-xs font-semibold text-ink mb-1">Model source</label>
+        <div className="grid grid-cols-3 gap-2">
+          {SOURCE_OPTIONS.map((option) => {
+            const isSelected = source === option.value;
+            return (
+              <button
+                key={option.value}
+                type="button"
+                onClick={() => onSourceChange(option.value)}
+                className={`px-2 py-1.5 rounded-lg border text-[11px] transition-colors cursor-pointer ${
+                  isSelected
+                    ? 'border-ink/50 bg-ink/5 font-semibold text-ink'
+                    : 'border-ink/15 hover:border-ink/30 text-ink/70'
+                }`}
+              >
+                {option.label}
+              </button>
+            );
+          })}
+        </div>
+        <p className="text-[10px] text-ink/40 mt-1 leading-relaxed">
+          {SOURCE_OPTIONS.find((option) => option.value === source)?.hint}
+        </p>
+      </div>
+
+      {source === 'discovery' && (
+        <div>
+          <label className="block text-xs font-semibold text-ink mb-1">Discovery protocol</label>
+          <select
+            value={discovery}
+            onChange={(e) => onDiscoveryChange(e.currentTarget.value as ProviderDiscoveryType)}
+            className={fieldClass}
+          >
+            {PROVIDER_DISCOVERY_TYPES.map((type) => (
+              <option key={type.value} value={type.value}>{type.label}</option>
+            ))}
+          </select>
+          <p className="text-[10px] text-ink/40 mt-1">
+            {PROVIDER_DISCOVERY_TYPES.find((type) => type.value === discovery)?.hint}
+          </p>
+        </div>
+      )}
+    </>
+  );
+}

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