ompchamber 2.0.2 → 3.0.0

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

@@ -1,21 +1,27 @@
 import { useEffect, useState } from 'preact/hooks';
 import { Check, DownloadCloud, Globe, Key, Layers } from 'lucide-preact';
 import type { ProviderItem } from '@/shared/types';
-import type { PresetProviderOption } from '@/shared/types/settings/provider';
-import { fetchProviderModelsRemote } from '@/shared/lib/models/provider-models';
-import { ProviderIcon } from '@/client/components/settings/categories/provider-settings/Icons';
+import type {
+  OmpProviderApi,
+  PresetProviderOption,
+  ProviderAuthMode,
+  ProviderDiscoveryType,
+  ProviderModelSource,
+} from '@/shared/types/settings/provider';
+import { fetchProviderModelsRemote } from '@/shared/lib/models/provider/models';
+import { inferProviderApi } from '@/shared/lib/models/provider/dialect';
 import { Modal } from '@/client/components/common/Modal';
+import { DialectFields } from '@/client/components/settings/categories/provider-settings/DialectFields';
+import { PresetPicker } from '@/client/components/settings/categories/provider-settings/PresetPicker';
 
 interface AddProviderModalProps {
   isOpen: boolean;
   onClose: () => void;
-  onAddProvider: (newProvider: ProviderItem, options: { fetchedCount: number }) => void;
+  onAddProvider: (newProvider: ProviderItem, options: { fetchedCount: number; ompNote?: string }) => void;
   presets: PresetProviderOption[];
   /**
    * Slugs already present in the omp registry. A new provider's slug becomes a
-   * `models.yml` key, so reusing one silently overwrites that provider's
-   * `baseUrl`, `apiKey`, `api` and per-model metadata — the entry is written
-   * under the same key, not merged into it.
+   * models.yml key, so reusing one would overwrite that provider's entry.
    */
   existingSlugs: string[];
 }
@@ -23,6 +29,40 @@ interface AddProviderModalProps {
 /** Slug shape omp accepts as a `models.yml` provider key. */
 const SLUG_PATTERN = /^[a-z0-9][a-z0-9._-]{0,63}$/;
 
+/** The dialect a preset seeds, with the model-source its shape implies. */
+function presetDefaults(preset: PresetProviderOption | undefined) {
+  const api: OmpProviderApi = preset?.api ?? inferProviderApi(preset?.defaultUrl ?? '');
+  return {
+    api,
+    auth: preset?.auth ?? ('apiKey' as ProviderAuthMode),
+    discovery: preset?.discovery ?? ('openai-models-list' as ProviderDiscoveryType),
+    source: (preset?.discovery
+      ? 'discovery'
+      : preset?.bundled
+        ? 'override'
+        : 'fetch') as ProviderModelSource,
+  };
+}
+
+/**
+ * Add Provider.
+ *
+ * The form exists to write ONE `models.yml` provider entry, so it asks for
+ * exactly the fields omp reads: the endpoint, the wire dialect, the auth mode,
+ * and where the model list comes from. Everything else is derived.
+ *
+ * Two shapes the previous version could not express are the point of this
+ * dialog:
+ *
+ * - A provider omp already bundles (Azure, Bedrock, Vertex, Codex) is written
+ *   as an OVERRIDE entry: omp keeps its own model list and only the endpoint
+ *   changes. Writing ids for it would shadow the bundled catalog with a
+ *   snapshot.
+ * - A provider omp can discover (Ollama, LM Studio, llama.cpp, LiteLLM, any
+ *   OpenAI-compatible endpoint) is registered with an EMPTY model list and a
+ *   `discovery` block, so omp lists the models live instead of serving a frozen
+ *   copy that goes stale the moment the endpoint adds one.
+ */
 export function AddProviderModal({
   isOpen,
   onClose,
@@ -32,16 +72,26 @@ export function AddProviderModal({
 }: AddProviderModalProps) {
   const presetList = presets;
   const initialPreset = presetList[0];
+  const initial = presetDefaults(initialPreset);
   const [selectedPresetId, setSelectedPresetId] = useState(initialPreset?.id || 'openai');
   const [name, setName] = useState(initialPreset?.name || 'OpenAI');
   const [baseUrl, setBaseUrl] = useState(initialPreset?.defaultUrl || 'https://api.openai.com/v1');
   const [apiKey, setApiKey] = useState('');
+  const [api, setApi] = useState<OmpProviderApi>(initial.api);
+  const [auth, setAuth] = useState<ProviderAuthMode>(initial.auth);
+  const [source, setSource] = useState<ProviderModelSource>(initial.source);
+  const [discovery, setDiscovery] = useState<ProviderDiscoveryType>(initial.discovery);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const handleSelectPreset = (preset: PresetProviderOption) => {
+    const defaults = presetDefaults(preset);
     setSelectedPresetId(preset.id);
     setName(preset.name);
     setBaseUrl(preset.defaultUrl);
+    setApi(defaults.api);
+    setAuth(defaults.auth);
+    setDiscovery(defaults.discovery);
+    setSource(defaults.source);
   };
 
   useEffect(() => {
@@ -62,21 +112,37 @@ export function AddProviderModal({
     : trimmedName.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '')
   ).toLowerCase();
   const takenSlugs = new Set(existingSlugs.map((value) => value.trim().toLowerCase()));
+  // A bundled preset names a provider omp already ships, and its entry in
+  // models.yml is an add-only OVERRIDE — reusing that slug is the point.
+  const isBundledOverride = selectedPreset?.bundled === true;
   const slugError = !slug
     ? 'Enter a provider name to derive an id.'
     : !SLUG_PATTERN.test(slug)
       ? 'The derived id must start with a letter or digit.'
-      : takenSlugs.has(slug)
+      : takenSlugs.has(slug) && !isBundledOverride
         ? `"${slug}" is already registered in models.yml — connecting it would overwrite that provider. Pick another name.`
         : '';
+  // omp requires a key only for a provider that carries MODELS. An endpoint
+  // override (omp keeps its own model list) and a discovery shell are both
+  // valid without one — that is how a keyless local server and a proxy that
+  // authenticates through `/login` are declared — so the key is optional there
+  // rather than hidden, since a proxy usually still wants its own bearer.
+  const showsApiKey = auth === 'apiKey';
+  const requiresApiKey = showsApiKey && source === 'fetch';
+  const keyError = requiresApiKey && !apiKey.trim()
+    ? 'Enter the API key, or set Auth to "No auth" for a keyless local server.'
+    : '';
+  const canSubmit = Boolean(trimmedName) && !slugError && !keyError && !isSubmitting;
 
   const handleSubmit = async (e: { preventDefault: () => void }) => {
     e.preventDefault();
-    if (!trimmedName || presetList.length === 0 || isSubmitting || slugError) return;
+    if (!canSubmit) return;
     setIsSubmitting(true);
 
     try {
       const timestamp = Date.now();
+      const trimmedUrl = baseUrl.trim();
+      const trimmedKey = apiKey.trim();
       const newProvider: ProviderItem = {
         id: `provider-${timestamp}`,
         name: trimmedName,
@@ -84,17 +150,41 @@ export function AddProviderModal({
         icon: selectedPreset?.icon || 'custom',
         status: 'connected',
         configuredIn: 'auth credentials',
-        baseUrl: baseUrl.trim(),
-        apiKey: apiKey.trim() || 'sk-custom-••••••••••••••••••••••••',
+        credentialSource: 'models.yml',
+        baseUrl: trimmedUrl,
+        ...(trimmedKey ? { apiKey: trimmedKey } : {}),
+        api,
+        ...(auth !== 'apiKey' ? { auth } : {}),
+        ...(source === 'discovery' ? { discovery } : {}),
+        modelSource: source,
         models: [],
       };
 
-      const fetchResult = await fetchProviderModelsRemote(baseUrl.trim(), apiKey.trim() || undefined, newProvider.slug, true);
+      const fetchResult = await fetchProviderModelsRemote({
+        baseUrl: trimmedUrl,
+        apiKey: trimmedKey || undefined,
+        providerSlug: newProvider.slug,
+        persistToOmp: true,
+        api,
+        auth,
+        ...(source === 'discovery' ? { discovery } : {}),
+        ...(source === 'override' ? { registerOnly: true } : {}),
+      });
+
       if (fetchResult.ok && fetchResult.models) {
         newProvider.models = fetchResult.models;
-        onAddProvider(newProvider, { fetchedCount: fetchResult.models.length });
+        onAddProvider(newProvider, {
+          fetchedCount: fetchResult.models.length,
+          ompNote: fetchResult.omp?.reason,
+        });
       } else {
-        onAddProvider(newProvider, { fetchedCount: -1 });
+        // The listing failed but the provider may still have been registered
+        // (discovery/override shapes never list). Report what omp said rather
+        // than a bare "failed" that hides a written file.
+        onAddProvider(newProvider, {
+          fetchedCount: -1,
+          ompNote: fetchResult.omp?.written ? undefined : fetchResult.error,
+        });
       }
 
       onClose();
@@ -113,6 +203,7 @@ export function AddProviderModal({
         </div>
       }
       form={{ onSubmit: handleSubmit, className: 'p-5 space-y-4' }}
+      maxWidthClass="max-w-lg"
       footer={
         <div className="pt-2 flex items-center justify-end gap-2 border-t border-ink/10">
           <button
@@ -124,13 +215,13 @@ export function AddProviderModal({
           </button>
           <button
             type="submit"
-            disabled={isSubmitting || presetList.length === 0 || Boolean(slugError)}
+            disabled={!canSubmit}
             className="px-3.5 py-1.5 rounded-md bg-ink text-canvas text-xs font-medium hover:opacity-90 transition-opacity cursor-pointer disabled:opacity-50 flex items-center gap-1.5"
           >
             {isSubmitting ? (
               <>
                 <DownloadCloud size={14} className="animate-pulse" />
-                <span>Fetching models...</span>
+                <span>{source === 'fetch' ? 'Fetching models...' : 'Registering...'}</span>
               </>
             ) : (
               <>
@@ -147,31 +238,11 @@ export function AddProviderModal({
         <label className="block text-xs font-semibold text-ink mb-1.5">
           Provider Preset
         </label>
-        <div className="grid grid-cols-2 gap-2 max-h-36 scrollbar-overlay-container scrollbar-overlay-static pr-1">
-          {presetList.length === 0 && (
-            <p className="col-span-2 px-2 py-3 text-xs text-ink/50">
-              All known provider types are already connected.
-            </p>
-          )}
-          {presetList.map((preset) => {
-            const isSelected = preset.id === selectedPresetId;
-            return (
-              <button
-                key={preset.id}
-                type="button"
-                onClick={() => handleSelectPreset(preset)}
-                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} size={14} />
-                <span className="truncate">{preset.name}</span>
-              </button>
-            );
-          })}
-        </div>
+        <PresetPicker
+          presets={presetList}
+          selectedPresetId={selectedPresetId}
+          onSelectPreset={handleSelectPreset}
+        />
       </div>
 
       {/* Provider Name */}
@@ -217,22 +288,47 @@ export function AddProviderModal({
         </div>
       </div>
 
-      {/* API Key */}
-      <div>
-        <label className="block text-xs font-semibold text-ink mb-1">
-          API Key (stored securely)
-        </label>
-        <div className="relative flex items-center">
-          <Key size={13} className="absolute left-2.5 text-ink/40 pointer-events-none" />
-          <input
-            type="password"
-            value={apiKey}
-            onChange={(e) => setApiKey(e.currentTarget.value)}
-            placeholder="sk-••••••••••••••••"
-            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"
-          />
+      <DialectFields
+        api={api}
+        onApiChange={setApi}
+        auth={auth}
+        onAuthChange={setAuth}
+        source={source}
+        onSourceChange={setSource}
+        discovery={discovery}
+        onDiscoveryChange={setDiscovery}
+      />
+
+      {/* API Key — hidden only for a keyless provider, which omp accepts
+          without a credential at all. */}
+      {showsApiKey && (
+        <div>
+          <label className="block text-xs font-semibold text-ink mb-1">
+            API Key (stored securely)
+            {!requiresApiKey && <span className="font-normal text-ink/40"> — optional</span>}
+          </label>
+          <div className="relative flex items-center">
+            <Key size={13} className="absolute left-2.5 text-ink/40 pointer-events-none" />
+            <input
+              type="password"
+              value={apiKey}
+              onChange={(e) => setApiKey(e.currentTarget.value)}
+              placeholder="sk-••••••••••••••••"
+              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>
+          {keyError && (
+            <p className="text-[11px] text-error mt-1">{keyError}</p>
+          )}
+          <p className="text-[10px] text-ink/40 mt-1">
+            {requiresApiKey
+              ? 'May name an environment variable (e.g. '
+              : 'Leave empty to keep using the provider’s existing credential. May name an environment variable (e.g. '}
+            <span className="font-mono">MY_KEY</span>) or run a command with a leading{' '}
+            <span className="font-mono">!</span>.
+          </p>
         </div>
-      </div>
+      )}
     </Modal>
   );
 }

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