ompchamber 2.0.2 → 3.1.0

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

@@ -0,0 +1,322 @@
+import { useState } from 'preact/hooks';
+import type { FormEvent } from 'preact/compat';
+import { Check, Globe, Hash, Layers, Plus, Sparkles } from 'lucide-preact';
+import type { ProviderItem } from '@/shared/types';
+import { addProviderModel, type ManualModelRequest } from '@/shared/lib/models/provider/models';
+import {
+  PROVIDER_THINKING_EFFORTS,
+  type ProviderThinkingEffort,
+} from '@/shared/lib/models/provider/dialect';
+import { Modal } from '@/client/components/common/Modal';
+import { EffortLadder } from '@/client/components/settings/categories/provider-settings/EffortLadder';
+import { PriceFields } from '@/client/components/settings/categories/provider-settings/PriceFields';
+
+interface AddModelModalProps {
+  isOpen: boolean;
+  provider: ProviderItem;
+  onClose: () => void;
+  /** Called after a successful write so the list and the chat picker refresh. */
+  onAdded: (modelId: string) => void;
+  /** Reports a refusal the dialog cannot fix itself (bad endpoint, bad key). */
+  onError: (message: string) => void;
+}
+
+/**
+ * Register ONE model by hand.
+ *
+ * The auto-fetch needs a listing endpoint, and plenty of real providers have
+ * none worth using: an Azure deployment is a name the user chose, a gateway may
+ * serve a model its `/models` route omits, and Bedrock/Vertex expose no
+ * `/models` at all. This dialog writes the same models.yml entry the fetch
+ * would, with the metadata the user actually knows.
+ *
+ * Only `id` is required. Every other field is metadata omp can work without —
+ * a missing context window is estimated, a missing price is simply not
+ * accounted — so requiring them would block the common case of "just add this
+ * id I know exists".
+ */
+export function AddModelModal({
+  isOpen,
+  provider,
+  onClose,
+  onAdded,
+  onError,
+}: AddModelModalProps) {
+  const [id, setId] = useState('');
+  const [name, setName] = useState('');
+  const [contextWindow, setContextWindow] = useState('');
+  const [maxTokens, setMaxTokens] = useState('');
+  const [costInput, setCostInput] = useState('');
+  const [costOutput, setCostOutput] = useState('');
+  const [costCacheRead, setCostCacheRead] = useState('');
+  const [costCacheWrite, setCostCacheWrite] = useState('');
+  const [reasoning, setReasoning] = useState(false);
+  const [imageInput, setImageInput] = useState(false);
+  const [efforts, setEfforts] = useState<ProviderThinkingEffort[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  if (!isOpen) return null;
+
+  const trimmedId = id.trim();
+  const duplicate = provider.models.some((model) => model.id === trimmedId);
+  const idError = !trimmedId
+    ? 'Enter the model id exactly as the provider expects it.'
+    : duplicate
+      ? `"${trimmedId}" is already registered under this provider.`
+      : '';
+  const numberError = (value: string, label: string): string =>
+    value.trim() && !(Number(value) > 0) ? `${label} must be a positive number of tokens.` : '';
+  const limitsError = numberError(contextWindow, 'Context window') || numberError(maxTokens, 'Max output');
+  const costError = (value: string): string =>
+    value.trim() && !(Number(value) >= 0) ? 'Prices must be zero or more USD per 1M tokens.' : '';
+  const priceError = costError(costInput) || costError(costOutput)
+    || costError(costCacheRead) || costError(costCacheWrite);
+  // A price is written only when BOTH headline sides are known: omp's schema
+  // requires all four cost fields together, so half a price is not a price. The
+  // two cache rates may be left empty — they are written as 0, which is what
+  // "no cached-token discount" means.
+  const halfPrice = Boolean(costInput.trim()) !== Boolean(costOutput.trim())
+    ? 'Enter both input and output price, or neither.'
+    : (costCacheRead.trim() || costCacheWrite.trim()) && !costInput.trim()
+      ? 'A cache rate needs the input and output price too.'
+      : '';
+  // The ladder is a capability of a reasoning model; ticking levels while
+  // Reasoning is off would describe a model omp is not told can reason.
+  const ladderError = !reasoning && efforts.length > 0
+    ? 'Turn on Reasoning to declare its levels.'
+    : '';
+  const canSubmit = Boolean(trimmedId) && !idError && !limitsError && !priceError
+    && !halfPrice && !ladderError && !isSubmitting;
+
+  const numberOrUndefined = (value: string): number | undefined => {
+    const parsed = Number(value);
+    return value.trim() && Number.isFinite(parsed) ? parsed : undefined;
+  };
+
+  const toggleEffort = (effort: ProviderThinkingEffort) => {
+    setEfforts((prev) => (
+      prev.includes(effort)
+        ? prev.filter((entry) => entry !== effort)
+        // Kept in omp's own order so the written ladder reads lowest-first
+        // regardless of the order the user ticked the boxes.
+        : PROVIDER_THINKING_EFFORTS.filter((level) => level === effort || prev.includes(level))
+    ));
+  };
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!canSubmit) return;
+    setIsSubmitting(true);
+    try {
+      const request: ManualModelRequest = {
+        provider: provider.slug,
+        id: trimmedId,
+        ...(name.trim() ? { name: name.trim() } : {}),
+        ...(numberOrUndefined(contextWindow) !== undefined
+          ? { contextWindow: numberOrUndefined(contextWindow) }
+          : {}),
+        ...(numberOrUndefined(maxTokens) !== undefined ? { maxTokens: numberOrUndefined(maxTokens) } : {}),
+        ...(reasoning ? { reasoning: true } : {}),
+        ...(reasoning && efforts.length > 0 ? { efforts } : {}),
+        ...(imageInput ? { imageInput: true } : {}),
+        ...(costInput.trim() && costOutput.trim()
+          ? {
+            costInput: numberOrUndefined(costInput),
+            costOutput: numberOrUndefined(costOutput),
+            // Empty cache rates become 0 in the seed builder; sending them only
+            // when typed keeps the request honest about what the user entered.
+            ...(numberOrUndefined(costCacheRead) !== undefined
+              ? { costCacheRead: numberOrUndefined(costCacheRead) }
+              : {}),
+            ...(numberOrUndefined(costCacheWrite) !== undefined
+              ? { costCacheWrite: numberOrUndefined(costCacheWrite) }
+              : {}),
+          }
+          : {}),
+        // The endpoint and credential are only consulted for a provider with no
+        // models.yml entry yet; the writer is add-only and keeps an existing
+        // one. A keyless provider passes `auth: none` so omp accepts the entry
+        // without a credential.
+        ...(provider.baseUrl ? { baseUrl: provider.baseUrl } : {}),
+        ...(provider.apiKey ? { apiKey: provider.apiKey } : {}),
+        ...(provider.auth ? { auth: provider.auth } : {}),
+      };
+      const result = await addProviderModel(request);
+      if (!result.success) {
+        // The refusal is the actionable half (an endpoint override with no
+        // credential, a provider not in models.yml) — surface it verbatim.
+        onError(result.error || result.reason || `Could not register ${trimmedId}.`);
+        return;
+      }
+      onAdded(trimmedId);
+      onClose();
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal
+      onClose={onClose}
+      header={
+        <div className="flex items-center gap-2">
+          <Plus size={16} className="text-ink/70" />
+          <div>
+            <h3 className="text-sm font-semibold text-ink">Add Model</h3>
+            <p className="text-[11px] text-ink/50 font-mono truncate max-w-[280px]">{provider.slug}</p>
+          </div>
+        </div>
+      }
+      form={{ onSubmit: handleSubmit, className: 'p-5 space-y-4' }}
+      footer={
+        <div className="pt-2 flex items-center justify-end gap-2 border-t border-ink/10">
+          <button
+            type="button"
+            onClick={onClose}
+            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"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            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 ? (
+              <>
+                <Layers size={14} className="animate-pulse" />
+                <span>Registering...</span>
+              </>
+            ) : (
+              <>
+                <Check size={14} />
+                <span>Add Model</span>
+              </>
+            )}
+          </button>
+        </div>
+      }
+    >
+      {/* Model id */}
+      <div>
+        <label className="block text-xs font-semibold text-ink mb-1">Model ID</label>
+        <div className="relative flex items-center">
+          <Hash size={13} className="absolute left-2.5 text-ink/40 pointer-events-none" />
+          <input
+            type="text"
+            required
+            autoFocus
+            value={id}
+            onChange={(e) => setId(e.currentTarget.value)}
+            placeholder="e.g. claude-sonnet-5 or my-deployment"
+            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>
+        {idError && <p className="text-[11px] text-error mt-1">{idError}</p>}
+        <p className="text-[10px] text-ink/40 mt-1">
+          Sent to the provider verbatim — this is the id omp puts on the wire.
+        </p>
+      </div>
+
+      {/* Display name */}
+      <div>
+        <label className="block text-xs font-semibold text-ink mb-1">
+          Display Name <span className="font-normal text-ink/40">— optional</span>
+        </label>
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.currentTarget.value)}
+          placeholder="Shown in the chat model picker"
+          className="w-full bg-paper border border-ink/20 rounded-md px-3 py-1.5 text-xs text-ink outline-none focus:border-ink/60"
+        />
+      </div>
+
+      {/* Limits */}
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <label className="block text-xs font-semibold text-ink mb-1">
+            Context window <span className="font-normal text-ink/40">— tokens</span>
+          </label>
+          <input
+            type="text"
+            inputMode="numeric"
+            value={contextWindow}
+            onChange={(e) => setContextWindow(e.currentTarget.value)}
+            placeholder="200000"
+            className="w-full bg-paper border border-ink/20 rounded-md px-3 py-1.5 text-xs text-ink outline-none focus:border-ink/60 font-mono"
+          />
+        </div>
+        <div>
+          <label className="block text-xs font-semibold text-ink mb-1">
+            Max output <span className="font-normal text-ink/40">— tokens</span>
+          </label>
+          <input
+            type="text"
+            inputMode="numeric"
+            value={maxTokens}
+            onChange={(e) => setMaxTokens(e.currentTarget.value)}
+            placeholder="8192"
+            className="w-full bg-paper border border-ink/20 rounded-md px-3 py-1.5 text-xs text-ink outline-none focus:border-ink/60 font-mono"
+          />
+        </div>
+      </div>
+      {limitsError && <p className="text-[11px] text-error -mt-2">{limitsError}</p>}
+
+      {/* Capabilities */}
+      <div>
+        <label className="block text-xs font-semibold text-ink mb-1.5">Capabilities</label>
+        <div className="grid grid-cols-2 gap-2">
+          <button
+            type="button"
+            onClick={() => setReasoning((prev) => !prev)}
+            aria-pressed={reasoning}
+            className={`flex items-center gap-2 px-2.5 py-2 rounded-lg border text-left text-[11px] transition-colors cursor-pointer ${
+              reasoning ? 'border-ink/50 bg-ink/5 font-semibold text-ink' : 'border-ink/15 hover:border-ink/30 text-ink/70'
+            }`}
+          >
+            <Sparkles size={13} className="shrink-0" />
+            <span className="truncate">Reasoning</span>
+          </button>
+          <button
+            type="button"
+            onClick={() => setImageInput((prev) => !prev)}
+            aria-pressed={imageInput}
+            className={`flex items-center gap-2 px-2.5 py-2 rounded-lg border text-left text-[11px] transition-colors cursor-pointer ${
+              imageInput ? 'border-ink/50 bg-ink/5 font-semibold text-ink' : 'border-ink/15 hover:border-ink/30 text-ink/70'
+            }`}
+          >
+            <Globe size={13} className="shrink-0" />
+            <span className="truncate">Vision</span>
+          </button>
+        </div>
+        <p className="text-[10px] text-ink/40 mt-1">
+          Leave both off when unsure — omp still serves the model; only its declared abilities change.
+        </p>
+      </div>
+
+      {/* Reasoning levels — only meaningful for a reasoning model */}
+      {reasoning && (
+        <EffortLadder
+          selected={efforts}
+          onToggle={toggleEffort}
+          onSelectAll={() => setEfforts([...PROVIDER_THINKING_EFFORTS])}
+          onClear={() => setEfforts([])}
+        />
+      )}
+      {ladderError && <p className="text-[11px] text-error -mt-2">{ladderError}</p>}
+
+      <PriceFields
+        costInput={costInput}
+        costOutput={costOutput}
+        costCacheRead={costCacheRead}
+        costCacheWrite={costCacheWrite}
+        onCostInputChange={setCostInput}
+        onCostOutputChange={setCostOutput}
+        onCostCacheReadChange={setCostCacheRead}
+        onCostCacheWriteChange={setCostCacheWrite}
+        error={priceError || halfPrice}
+      />
+    </Modal>
+  );
+}

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