zevairouter 1.0.0

package/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/page.js

@@ -0,0 +1,1903 @@
+"use client";
+
+import { useParams, notFound, useRouter } from "next/navigation";
+import Link from "next/link";
+import { useState, useEffect } from "react";
+import { Card, Badge, Button, AddCustomEmbeddingModal, NoAuthProxyCard, ProviderInfoCard } from "@/shared/components";
+import ProviderIcon from "@/shared/components/ProviderIcon";
+import { MEDIA_PROVIDER_KINDS, AI_PROVIDERS, getProviderAlias, isCustomEmbeddingProvider, resolveProviderId } from "@/shared/constants/providers";
+import { getModelsByProviderId } from "@/shared/constants/models";
+import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
+import ConnectionsCard from "@/app/(dashboard)/dashboard/providers/components/ConnectionsCard";
+import ModelsCard from "@/app/(dashboard)/dashboard/providers/components/ModelsCard";
+import { TTS_PROVIDER_CONFIG } from "@/shared/constants/ttsProviders";
+import { getTtsVoicesForModel } from "open-sse/config/ttsModels.js";
+import { GOOGLE_TTS_LANGUAGES } from "open-sse/config/googleTtsLanguages.js";
+
+// Shared row layout — defined outside components to avoid re-mount on re-render
+function Row({ label, children }) {
+  return (
+    <div className="flex min-w-0 flex-col gap-1.5 sm:flex-row sm:items-center sm:gap-3">
+      <span className="w-full text-xs font-medium text-text-muted sm:w-20 sm:shrink-0">{label}</span>
+      <div className="w-full min-w-0 flex-1">{children}</div>
+    </div>
+  );
+}
+
+const DEFAULT_TTS_RESPONSE_EXAMPLE = `// Audio will appear here after running.
+// Example JSON response (response_format=json):
+{
+  "format": "mp3",
+  "audio": "//NExAANaAIIAUAAANNNNNNNN..." // base64 encoded MP3
+}`;
+
+const DEFAULT_RESPONSE_EXAMPLE = `{
+  "object": "list",
+  "data": [{
+    "object": "embedding",
+    "index": 0,
+    "embedding": [0.002301, -0.019212, 0.004815, -0.031249, ...]
+  }],
+  "model": "...",
+  "usage": { "prompt_tokens": 9, "total_tokens": 9 }
+}`;
+
+const CLOUDFLARE_TEST_IMAGE_URL = "https://pub-1fb693cb11cc46b2b2f656f51e015a2c.r2.dev/dog.png";
+const CLOUDFLARE_TEST_MASK_URL = "https://pub-1fb693cb11cc46b2b2f656f51e015a2c.r2.dev/dog-mask.png";
+
+function getImageEditDefaults(providerId, modelId) {
+  if (providerId !== "cloudflare-ai") return {};
+  if (modelId === "@cf/runwayml/stable-diffusion-v1-5-img2img") {
+    return { image: CLOUDFLARE_TEST_IMAGE_URL };
+  }
+  if (modelId === "@cf/runwayml/stable-diffusion-v1-5-inpainting") {
+    return { image: CLOUDFLARE_TEST_IMAGE_URL, mask_image: CLOUDFLARE_TEST_MASK_URL };
+  }
+  return {};
+}
+
+function toImagePreviewSrc(value) {
+  const trimmed = typeof value === "string" ? value.trim() : "";
+  if (!trimmed) return "";
+  if (/^(data:image\/|https?:\/\/)/i.test(trimmed)) return trimmed;
+  return `data:image/png;base64,${trimmed}`;
+}
+
+// Config-driven example defaults per kind
+const KIND_EXAMPLE_CONFIG = {
+  webSearch: {
+    inputLabel: "Query",
+    inputPlaceholder: "What is the latest news about AI?",
+    defaultInput: "What is the latest news about AI?",
+    bodyKey: "query",
+    defaultResponse: `{\n  "results": [\n    { "title": "...", "url": "...", "snippet": "..." }\n  ]\n}`,
+    extraFields: [
+      { key: "search_type", label: "Type", type: "select", default: "web", options: ["web", "news"] },
+      { key: "max_results", label: "Max results", type: "number", default: 5, min: 1, max: 100 },
+      { key: "country", label: "Country", type: "text", default: "" },
+      { key: "language", label: "Language", type: "text", default: "" },
+    ],
+  },
+  webFetch: {
+    inputLabel: "URL",
+    inputPlaceholder: "https://example.com",
+    defaultInput: "https://example.com",
+    bodyKey: "url",
+    defaultResponse: `{\n  "content": "...",\n  "title": "...",\n  "url": "..."\n}`,
+    extraFields: [
+      { key: "format", label: "Format", type: "select", default: "markdown", options: ["markdown", "text", "html"] },
+      { key: "max_characters", label: "Max chars", type: "number", default: 0, min: 0 },
+    ],
+  },
+  image: {
+    inputLabel: "Prompt",
+    inputPlaceholder: "A cute cat wearing a hat",
+    defaultInput: "A cute cat wearing a hat",
+    bodyKey: "prompt",
+    defaultResponse: `{\n  "data": [\n    { "url": "...", "b64_json": "..." }\n  ]\n}`,
+    extraFields: [
+      { key: "n", label: "n", type: "number", default: 1, min: 1, max: 4 },
+      { key: "size", label: "Size", type: "select", default: "auto", options: ["auto", "1024x1024", "1024x1536", "1536x1024", "1024x1792", "1792x1024"] },
+      { key: "quality", label: "Quality", type: "select", default: "auto", options: ["auto", "low", "medium", "high", "standard", "hd"] },
+      { key: "background", label: "Background", type: "select", default: "auto", options: ["auto", "transparent", "opaque"] },
+      { key: "style", label: "Style", type: "select", default: "", options: ["", "vivid", "natural"] },
+      { key: "response_format", label: "Format", type: "select", default: "", options: ["", "url", "b64_json"] },
+      { key: "image_detail", label: "Image Detail", type: "select", default: "high", options: ["auto", "low", "high", "original"] },
+      { key: "output_format", label: "Codec", type: "select", default: "png", options: ["png", "jpeg", "webp"] },
+    ],
+  },
+  imageToText: {
+    inputLabel: "Image URL",
+    inputPlaceholder: "https://example.com/image.png",
+    defaultInput: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg",
+    bodyKey: "url",
+    extraBody: { prompt: "Describe this image in detail" },
+    defaultResponse: `{\n  "text": "A cat sitting on a windowsill...",\n  "model": "..."\n}`,
+  },
+  video: {
+    inputLabel: "Prompt",
+    inputPlaceholder: "A serene lake at sunset",
+    defaultInput: "A serene lake at sunset",
+    bodyKey: "prompt",
+    defaultResponse: `{\n  "data": [\n    { "url": "..." }\n  ]\n}`,
+  },
+  music: {
+    inputLabel: "Prompt",
+    inputPlaceholder: "A calm piano melody",
+    defaultInput: "A calm piano melody",
+    bodyKey: "prompt",
+    defaultResponse: `{\n  "data": [\n    { "url": "...", "format": "mp3" }\n  ]\n}`,
+  },
+};
+
+// EmbeddingExampleCard
+function EmbeddingExampleCard({ providerId, customAlias }) {
+  const isCustom = isCustomEmbeddingProvider(providerId);
+  const providerAlias = isCustom ? (customAlias || providerId) : getProviderAlias(providerId);
+  const embeddingModels = isCustom ? [] : getModelsByProviderId(providerId).filter((m) => m.type === "embedding");
+
+  const [selectedModel, setSelectedModel] = useState(embeddingModels[0]?.id ?? "");
+  const [input, setInput] = useState("The quick brown fox jumps over the lazy dog");
+  const [dimensions, setDimensions] = useState("");
+  const [apiKey, setApiKey] = useState("");
+  const [useTunnel, setUseTunnel] = useState(false);
+  const [localEndpoint, setLocalEndpoint] = useState("");
+  const [tunnelEndpoint, setTunnelEndpoint] = useState("");
+  const [result, setResult] = useState(null);
+  const [running, setRunning] = useState(false);
+  const [error, setError] = useState("");
+  const { copied: copiedCurl, copy: copyCurl } = useCopyToClipboard();
+  const { copied: copiedRes, copy: copyRes } = useCopyToClipboard();
+
+  useEffect(() => {
+    setLocalEndpoint(window.location.origin);
+    fetch("/api/keys")
+      .then((r) => r.json())
+      .then((d) => { setApiKey((d.keys || []).find((k) => k.isActive !== false)?.key || ""); })
+      .catch(() => {});
+    fetch("/api/tunnel/status")
+      .then((r) => r.json())
+      .then((d) => { if (d.publicUrl) setTunnelEndpoint(d.publicUrl); })
+      .catch(() => {});
+  }, []);
+
+  const endpoint = useTunnel ? tunnelEndpoint : localEndpoint;
+  const modelFull = selectedModel ? `${providerAlias}/${selectedModel}` : "";
+
+  // Build request body — include dimensions only if user provided a positive number
+  const buildBody = () => {
+    const body = { model: modelFull, input: input.trim() };
+    const dim = Number(dimensions);
+    if (dimensions && Number.isFinite(dim) && dim > 0) body.dimensions = dim;
+    return body;
+  };
+
+  const curlSnippet = `curl -X POST ${endpoint}/v1/embeddings \\
+  -H "Content-Type: application/json" \\
+  -H "Authorization: Bearer ${apiKey || "YOUR_KEY"}" \\
+  -d '${JSON.stringify(buildBody())}'`;
+
+  const handleRun = async () => {
+    if (!input.trim() || !modelFull) return;
+    setRunning(true);
+    setError("");
+    setResult(null);
+    const start = Date.now();
+    try {
+      const headers = { "Content-Type": "application/json" };
+      if (apiKey) headers["Authorization"] = `Bearer ${apiKey}`;
+      const res = await fetch("/api/v1/embeddings", {
+        method: "POST",
+        headers,
+        body: JSON.stringify(buildBody()),
+      });
+      const latencyMs = Date.now() - start;
+      const data = await res.json();
+      if (!res.ok) { setError(data?.error?.message || data?.error || `HTTP ${res.status}`); return; }
+      setResult({ data, latencyMs });
+    } catch (e) {
+      setError(e.message || "Network error");
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  // Compact embedding array: first 4 values + count
+  const formatResultJson = (data) => {
+    if (!data) return DEFAULT_RESPONSE_EXAMPLE;
+    const clone = JSON.parse(JSON.stringify(data));
+    (clone.data || []).forEach((item) => {
+      if (Array.isArray(item.embedding) && item.embedding.length > 4) {
+        item.embedding = [...item.embedding.slice(0, 4).map((v) => parseFloat(v.toFixed(6))), `... (${item.embedding.length} dims)`];
+      }
+    });
+    return JSON.stringify(clone, null, 2);
+  };
+
+  const resultJson = result ? JSON.stringify(result.data, null, 2) : "";
+
+  return (
+    <Card>
+      <h2 className="text-lg font-semibold mb-4">Example</h2>
+
+      <div className="flex flex-col gap-2.5">
+        {/* Model — text input for custom node, dropdown otherwise */}
+        <Row label="Model">
+          {isCustom ? (
+            <input
+              value={selectedModel}
+              onChange={(e) => setSelectedModel(e.target.value)}
+              placeholder="e.g. voyage-3, embed-english-v3.0, text-embedding-3-small"
+              className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary font-mono"
+            />
+          ) : (
+            <select
+              value={selectedModel}
+              onChange={(e) => setSelectedModel(e.target.value)}
+              className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+            >
+              {embeddingModels.map((m) => (
+                <option key={m.id} value={m.id}>{m.name || m.id}</option>
+              ))}
+            </select>
+          )}
+        </Row>
+
+        {/* Endpoint */}
+        <Row label="Endpoint">
+          <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
+            <input
+              value={endpoint}
+              onChange={(e) => useTunnel ? setTunnelEndpoint(e.target.value) : setLocalEndpoint(e.target.value)}
+              className="w-full min-w-0 flex-1 px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary font-mono"
+              placeholder="http://localhost:3000"
+            />
+            {/* Tunnel toggle — only show if tunnel URL is available */}
+            {tunnelEndpoint && (
+              <button
+                onClick={() => setUseTunnel((v) => !v)}
+                title={useTunnel ? "Using tunnel" : "Using local"}
+                className={`flex items-center gap-1 text-xs px-2 py-1.5 rounded-lg border shrink-0 transition-colors ${
+                  useTunnel ? "border-primary/40 bg-primary/10 text-primary" : "border-border text-text-muted hover:text-primary"
+                }`}
+              >
+                <span className="material-symbols-outlined text-[14px]">wifi_tethering</span>
+                Tunnel
+              </button>
+            )}
+          </div>
+        </Row>
+
+        {/* API Key */}
+        <Row label="API Key">
+          <input
+            type="password"
+            value={apiKey}
+            onChange={(e) => setApiKey(e.target.value)}
+            placeholder="sk-..."
+            className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary font-mono"
+          />
+        </Row>
+
+        {/* Input */}
+        <Row label="Input">
+          <div className="relative">
+            <input
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              className="w-full px-3 py-1.5 pr-7 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+            />
+            {input && (
+              <button
+                type="button"
+                onClick={() => setInput("")}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-primary transition-colors"
+              >
+                <span className="material-symbols-outlined text-[14px]">close</span>
+              </button>
+            )}
+          </div>
+        </Row>
+
+        {/* Dimensions (optional) — truncate embedding vector length */}
+        <Row label="Dimensions">
+          <input
+            type="number"
+            min="1"
+            value={dimensions}
+            onChange={(e) => setDimensions(e.target.value)}
+            placeholder="optional, e.g. 512, 1024 (leave empty for default)"
+            className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+          />
+        </Row>
+
+        {/* Curl + Run */}
+        <div className="mt-1">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between mb-1.5">
+            <span className="text-xs font-semibold text-text-muted uppercase tracking-wider">Request</span>
+            <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
+              <button
+                onClick={() => copyCurl(curlSnippet)}
+                className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
+              >
+                <span className="material-symbols-outlined text-[14px]">{copiedCurl ? "check" : "content_copy"}</span>
+                {copiedCurl ? "Copied" : "Copy"}
+              </button>
+              <button
+                onClick={handleRun}
+                disabled={running || !input.trim() || !modelFull}
+                className="flex w-full sm:w-auto items-center justify-center gap-1.5 px-3 py-1 rounded-lg bg-primary text-white text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <span className="material-symbols-outlined text-[14px]" style={running ? { animation: "spin 1s linear infinite" } : undefined}>
+                  play_arrow
+                </span>
+                {running ? "Running..." : "Run"}
+              </button>
+            </div>
+          </div>
+          <pre className="bg-sidebar rounded-lg px-3 py-2.5 text-xs font-mono text-text-main overflow-x-auto whitespace-pre-wrap break-all">{curlSnippet}</pre>
+        </div>
+
+        {/* Error */}
+        {error && <p className="text-xs text-red-500 break-words">{error}</p>}
+
+        {/* Response — default example or real result */}
+        <div>
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between mb-1.5">
+            <span className="text-xs font-semibold text-text-muted uppercase tracking-wider">
+              Response {result && <span className="font-normal normal-case">&#9889; {result.latencyMs}ms</span>}
+            </span>
+            {result && (
+              <button
+                onClick={() => copyRes(resultJson)}
+                className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
+              >
+                <span className="material-symbols-outlined text-[14px]">{copiedRes ? "check" : "content_copy"}</span>
+                {copiedRes ? "Copied" : "Copy"}
+              </button>
+            )}
+          </div>
+          <pre className="bg-sidebar rounded-lg px-3 py-2.5 text-xs font-mono text-text-main overflow-x-auto whitespace-pre-wrap break-all opacity-70">
+            {formatResultJson(result?.data)}
+          </pre>
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+// ─── TTS Example Card ────────────────────────────────────────────────────────
+function TtsExampleCard({ providerId }) {
+  const providerAlias = getProviderAlias(providerId);
+  const config = TTS_PROVIDER_CONFIG[providerId] || TTS_PROVIDER_CONFIG["edge-tts"];
+
+  // Voice state
+  const [selectedVoice, setSelectedVoice]     = useState(config.defaultVoiceId || "");
+  const [selectedVoiceName, setSelectedVoiceName] = useState("");
+  const [voiceId, setVoiceId]               = useState(config.defaultVoiceId || ""); // editable voice id (elevenlabs/config providers)
+  // Voices shown below Voice row after language selected
+  const [countryVoices, setCountryVoices]     = useState([]);
+  const [selectedLang, setSelectedLang]       = useState("");
+  const [selectedModel, setSelectedModel]     = useState(() => {
+    const cfgModels = AI_PROVIDERS[providerId]?.ttsConfig?.models;
+    if (cfgModels?.length) return cfgModels[0].id;
+    if (config.hasModelSelector && config.modelKey) {
+      const models = getModelsByProviderId(config.modelKey);
+      return models?.[0]?.id || "";
+    }
+    return "";
+  });
+
+  // Form state
+  const [input, setInput]               = useState("Hello, this is a text to speech test.");
+  const [apiKey, setApiKey]             = useState("");
+  const [useTunnel, setUseTunnel]       = useState(false);
+  const [localEndpoint, setLocalEndpoint]   = useState("");
+  const [tunnelEndpoint, setTunnelEndpoint] = useState("");
+  const [responseFormat, setResponseFormat] = useState("mp3"); // mp3 | json
+  const [audioUrl, setAudioUrl]         = useState("");
+  const [jsonResponse, setJsonResponse] = useState(null); // Store JSON response
+  const [running, setRunning]           = useState(false);
+  const [error, setError]               = useState("");
+  const [latency, setLatency]           = useState(null);
+  const { copied: copiedCurl, copy: copyCurl } = useCopyToClipboard();
+
+  // Country picker modal state
+  const [modalOpen, setModalOpen]           = useState(false);
+  const [languages, setLanguages]           = useState([]);
+  const [modalLoading, setModalLoading]     = useState(false);
+  const [modalSearch, setModalSearch]       = useState("");
+  const [modalError, setModalError]         = useState("");
+  const [byLang, setByLang]                 = useState({});
+  // Language hint (e.g. Gemini): controls the spoken language without affecting voice selection
+  const [languageHint, setLanguageHint]     = useState("");
+
+  useEffect(() => {
+    setLocalEndpoint(window.location.origin);
+    fetch("/api/keys")
+      .then((r) => r.json())
+      .then((d) => { setApiKey((d.keys || []).find((k) => k.isActive !== false)?.key || ""); })
+      .catch(() => {});
+    fetch("/api/tunnel/status")
+      .then((r) => r.json())
+      .then((d) => { if (d.publicUrl) setTunnelEndpoint(d.publicUrl); })
+      .catch(() => {});
+
+    // Pre-select default voice based on provider config
+    if (config.voiceSource === "hardcoded") {
+      const defaultModel = config.hasModelSelector && config.modelKey
+        ? (getModelsByProviderId(config.modelKey)?.[0]?.id || "")
+        : "";
+      // Use per-model voices if available, else flat list
+      const voices = (config.voicesPerModel && defaultModel)
+        ? (getTtsVoicesForModel(providerId, defaultModel) || [])
+        : getModelsByProviderId(config.voiceKey || providerId).filter((m) => m.type === "tts");
+      if (voices.length) {
+        if (config.hasBrowseButton) {
+          // Google TTS: pre-select "en" (English) as default, show as single voice chip
+          const defaultVoice = voices.find((v) => v.id === "en") || voices[0];
+          setSelectedLang(defaultVoice.id);
+          setSelectedVoice(defaultVoice.id);
+          setSelectedVoiceName(defaultVoice.name);
+          setCountryVoices([{ id: defaultVoice.id, name: defaultVoice.name }]);
+        } else {
+          // OpenAI/OpenRouter: set voice chips directly (no language picker)
+          setCountryVoices(voices);
+          setSelectedVoice(voices[0].id);
+          setSelectedVoiceName(voices[0].name || voices[0].id);
+        }
+      }
+    }
+    // api-language (edge-tts, local-device, elevenlabs): NO default load, wait for user to pick language
+    // config (nvidia, hyperbolic, deepgram, huggingface, cartesia, playht, coqui, tortoise, inworld, qwen):
+    // use ttsConfig.models for model selector; voice is empty by default (backend uses provider default)
+  }, [providerId]);
+
+  // Update voices when model changes (voicesPerModel providers)
+  useEffect(() => {
+    if (!config.voicesPerModel || !selectedModel) return;
+    const voices = getTtsVoicesForModel(providerId, selectedModel) || [];
+    setCountryVoices(voices);
+    if (voices.length) {
+      setSelectedVoice(voices[0].id);
+      setSelectedVoiceName(voices[0].name || voices[0].id);
+    }
+  }, [selectedModel]);
+
+  // Open modal — load language list
+  const openModal = async () => {
+    setModalOpen(true);
+    setModalSearch("");
+    setModalError("");
+    if (languages.length) return; // already loaded
+    setModalLoading(true);
+    try {
+      if (config.voiceSource === "hardcoded") {
+        // Build languages/byLang from static providerModels data
+        const voiceKey = config.voiceKey || providerId;
+        const voices = getModelsByProviderId(voiceKey).filter((m) => m.type === "tts");
+        const byLangMap = {};
+        for (const v of voices) {
+          if (!byLangMap[v.id]) byLangMap[v.id] = { code: v.id, name: v.name, voices: [{ id: v.id, name: v.name }] };
+        }
+        setByLang(byLangMap);
+        setLanguages(Object.values(byLangMap).sort((a, b) => a.name.localeCompare(b.name)));
+      } else {
+        // Use provider-specific apiEndpoint if available, else default to edge-tts voices API
+        const url = config.apiEndpoint
+          ? config.apiEndpoint
+          : `/api/media-providers/tts/voices?provider=${providerId === "local-device" ? "local-device" : "edge-tts"}`;
+        const r = await fetch(url);
+        const d = await r.json();
+        if (d.error) { setModalError(d.error); return; }
+        setLanguages(d.languages || []);
+        setByLang(d.byLang || {});
+      }
+    } catch (e) {
+      setModalError(e.message);
+    } finally {
+      setModalLoading(false);
+    }
+  };
+
+  // Click language → close modal → show voices below
+  const handlePickLanguage = (lang) => {
+    setModalOpen(false);
+    setSelectedLang(lang.code);
+    const voices = byLang[lang.code]?.voices || [];
+    setCountryVoices(voices);
+    // Auto-select first voice
+    if (voices.length) {
+      setSelectedVoice(voices[0].id);
+      setSelectedVoiceName(voices[0].name);
+      if (config.hasVoiceIdInput) setVoiceId(voices[0].id);
+    }
+  };
+
+  const filteredLanguages = modalSearch
+    ? languages.filter((c) =>
+        c.name.toLowerCase().includes(modalSearch.toLowerCase()) ||
+        c.code.toLowerCase().includes(modalSearch.toLowerCase())
+      )
+    : languages;
+
+  const endpoint = useTunnel ? tunnelEndpoint : localEndpoint;
+  // For ElevenLabs/config-driven: prefer manual voiceId (if any), else fall back to selectedVoice
+  const activeVoiceId = config.hasVoiceIdInput ? (voiceId || selectedVoice) : selectedVoice;
+  const modelFull = (() => {
+    if (config.hasModelSelector && selectedModel && activeVoiceId) return `${providerAlias}/${selectedModel}/${activeVoiceId}`;
+    if (config.hasModelSelector && selectedModel) return `${providerAlias}/${selectedModel}`;
+    if (activeVoiceId) return `${providerAlias}/${activeVoiceId}`;
+    return "";
+  })();
+
+  const ttsBody = (() => {
+    const b = { model: modelFull, input };
+    if (config.hasLanguageHint && languageHint) b.language = languageHint;
+    return b;
+  })();
+  const curlSnippet = `curl -X POST ${endpoint}/v1/audio/speech${responseFormat === "json" ? "?response_format=json" : ""} \\
+  -H "Content-Type: application/json" \\
+  -H "Authorization: Bearer ${apiKey || "YOUR_KEY"}" \\
+  -d '${JSON.stringify(ttsBody)}' \\
+  ${responseFormat === "json" ? "" : "--output speech.mp3"}`;
+
+  const handleRun = async () => {
+    if (!input.trim() || !modelFull) return;
+    setRunning(true);
+    setError("");
+    setAudioUrl("");
+    setJsonResponse(null);
+    const start = Date.now();
+    try {
+      const headers = { "Content-Type": "application/json" };
+      if (apiKey) headers["Authorization"] = `Bearer ${apiKey}`;
+      const url = `/api/v1/audio/speech${responseFormat === "json" ? "?response_format=json" : ""}`;
+      const res = await fetch(url, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({ ...ttsBody, input: input.trim() }),
+      });
+      setLatency(Date.now() - start);
+      if (!res.ok) {
+        const d = await res.json().catch(() => ({}));
+        setError(d?.error?.message || d?.error || `HTTP ${res.status}`);
+        return;
+      }
+      
+      if (responseFormat === "json") {
+        const data = await res.json();
+        setJsonResponse(data); // Store full JSON response
+        const audioBlob = await fetch(`data:audio/mp3;base64,${data.audio}`).then(r => r.blob());
+        setAudioUrl(URL.createObjectURL(audioBlob));
+      } else {
+        const blob = await res.blob();
+        setAudioUrl(URL.createObjectURL(blob));
+      }
+    } catch (e) {
+      setError(e.message || "Network error");
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  return (
+    <>
+      <Card>
+        <h2 className="text-lg font-semibold mb-4">Example</h2>
+
+        <div className="flex flex-col gap-2.5">
+          {/* Endpoint + API Key as read-only text */}
+          <Row label="Endpoint">
+            <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
+              <span className="w-full min-w-0 flex-1 px-3 py-1.5 text-sm font-mono text-text-main bg-sidebar rounded-lg truncate">
+                {endpoint}/v1/audio/speech
+              </span>
+              {tunnelEndpoint && (
+                <button
+                  onClick={() => setUseTunnel((v) => !v)}
+                  title={useTunnel ? "Using tunnel" : "Using local"}
+                  className={`flex items-center gap-1 text-xs px-2 py-1.5 rounded-lg border shrink-0 transition-colors ${
+                    useTunnel ? "border-primary/40 bg-primary/10 text-primary" : "border-border text-text-muted hover:text-primary"
+                  }`}
+                >
+                  <span className="material-symbols-outlined text-[14px]">wifi_tethering</span>
+                  Tunnel
+                </button>
+              )}
+            </div>
+          </Row>
+          <Row label="API Key">
+            <span className="px-3 py-1.5 text-sm font-mono text-text-main bg-sidebar rounded-lg truncate block">
+              {apiKey ? `${apiKey.slice(0, 8)}${"•".repeat(Math.min(20, apiKey.length - 8))}` : <span className="text-text-muted italic">No key configured</span>}
+            </span>
+          </Row>
+
+          {/* Model selector — prefer ttsConfig.models, else providerModels via modelKey */}
+          {config.hasModelSelector && (config.modelKey || AI_PROVIDERS[providerId]?.ttsConfig?.models?.length) && (
+            <Row label="Model">
+              <select
+                value={selectedModel}
+                onChange={(e) => setSelectedModel(e.target.value)}
+                className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+              >
+                {((AI_PROVIDERS[providerId]?.ttsConfig?.models?.length
+                  ? AI_PROVIDERS[providerId].ttsConfig.models
+                  : getModelsByProviderId(config.modelKey)) || []).map((m) => (
+                  <option key={m.id} value={m.id}>{m.name || m.id}</option>
+                ))}
+              </select>
+            </Row>
+          )}
+
+          {/* Language hint dropdown (Gemini) — sends body.language to guide pronunciation */}
+          {config.hasLanguageHint && (
+            <Row label="Language">
+              <select
+                value={languageHint}
+                onChange={(e) => setLanguageHint(e.target.value)}
+                className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+              >
+                <option value="">Auto-detect</option>
+                {GOOGLE_TTS_LANGUAGES.map((l) => (
+                  <option key={l.id} value={l.name}>{l.name}</option>
+                ))}
+              </select>
+            </Row>
+          )}
+
+          {/* Language row + Browse button (edge-tts, local-device, elevenlabs) */}
+          {config.hasBrowseButton && (
+            <Row label="Language">
+              <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
+                <button
+                  onClick={openModal}
+                  className="w-full min-w-0 flex-1 px-3 py-1.5 text-sm border border-border rounded-lg bg-background font-mono truncate text-left hover:border-primary/40 transition-colors"
+                >
+                  {selectedLang
+                    ? <span className="text-text-main">{languages.find((l) => l.code === selectedLang)?.name || selectedLang}</span>
+                    : <span className="text-text-muted">No language selected</span>}
+                </button>
+                <button
+                  onClick={openModal}
+                  className="flex w-full items-center justify-center gap-1 text-xs px-2.5 py-1.5 rounded-lg border border-border text-text-muted hover:text-primary hover:border-primary/40 transition-colors sm:w-auto sm:shrink-0"
+                >
+                  <span className="material-symbols-outlined text-[14px]">language</span>
+                  Select language
+                </button>
+              </div>
+            </Row>
+          )}
+
+          {/* Voice chips — shown after language picked (edge-tts, local-device) or always (OpenAI/ElevenLabs) */}
+          {countryVoices.length > 0 && (
+            <Row label="Voice">
+              <div className="flex flex-wrap gap-1.5">
+                {countryVoices.map((v) => (
+                  <button
+                    key={v.id}
+                    onClick={() => {
+                      setSelectedVoice(v.id);
+                      setSelectedVoiceName(v.name);
+                      if (config.hasVoiceIdInput) setVoiceId(v.id);
+                    }}
+                    className={`px-2.5 py-1 rounded-full text-xs border transition-colors ${
+                      selectedVoice === v.id
+                        ? "bg-primary/15 border-primary/40 text-primary font-medium"
+                        : "border-border text-text-muted hover:text-primary hover:border-primary/40"
+                    }`}
+                  >
+                    {v.name}{v.gender ? ` · ${v.gender[0].toUpperCase()}` : ""}
+                    {v.free_users_allowed === true && (
+                      <span className="ml-1.5 px-1 py-0.5 text-[9px] font-semibold rounded bg-green-500/15 text-green-600 border border-green-500/20">Free</span>
+                    )}
+                    {v.free_users_allowed === false && (
+                      <span className="ml-1.5 px-1 py-0.5 text-[9px] font-semibold rounded bg-amber-500/15 text-amber-600 border border-amber-500/20">Paid</span>
+                    )}
+                  </button>
+                ))}
+              </div>
+            </Row>
+          )}
+
+          {/* Voice ID input (ElevenLabs) — manual entry or auto-fill from chip */}
+          {config.hasVoiceIdInput && (
+            <Row label="Voice ID">
+              <div className="flex flex-col gap-1">
+                <div className="relative">
+                  <input
+                    value={voiceId}
+                    onChange={(e) => {
+                      setVoiceId(e.target.value);
+                      setSelectedVoice(e.target.value);
+                    }}
+                    placeholder="e.g. CwhRBWXzGAHq8TQ4Fs17"
+                    className="w-full px-3 py-1.5 pr-7 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary font-mono"
+                  />
+                  {voiceId && (
+                    <button
+                      type="button"
+                      onClick={() => { setVoiceId(""); setSelectedVoice(""); }}
+                      className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-primary transition-colors"
+                    >
+                      <span className="material-symbols-outlined text-[14px]">close</span>
+                    </button>
+                  )}
+                </div>
+              </div>
+            </Row>
+          )}
+
+          {/* Google TTS: Language dropdown */}
+          {config.hasLanguageDropdown && (
+            <Row label="Language">
+              <select
+                value={selectedVoice}
+                onChange={(e) => {
+                  const m = getModelsByProviderId(providerId).filter((m) => m.type === "tts").find((m) => m.id === e.target.value);
+                  setSelectedVoice(e.target.value);
+                  setSelectedVoiceName(m?.name || e.target.value);
+                }}
+                className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+              >
+                {getModelsByProviderId(providerId).filter((m) => m.type === "tts").map((m) => (
+                  <option key={m.id} value={m.id}>{m.name || m.id}</option>
+                ))}
+              </select>
+            </Row>
+          )}
+
+          {/* Input */}
+          <Row label="Input">
+            <div className="relative">
+              <input
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                className="w-full px-3 py-1.5 pr-7 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+              />
+              {input && (
+                <button
+                  type="button"
+                  onClick={() => setInput("")}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-primary transition-colors"
+                >
+                  <span className="material-symbols-outlined text-[14px]">close</span>
+                </button>
+              )}
+            </div>
+          </Row>
+
+          {/* Output Format */}
+          <Row label="Output Format">
+            <select
+              value={responseFormat}
+              onChange={(e) => setResponseFormat(e.target.value)}
+              className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+            >
+              <option value="mp3">MP3 (Binary)</option>
+              <option value="json">JSON (Base64)</option>
+            </select>
+          </Row>
+
+          {/* Curl + Run */}
+          <div className="mt-1">
+            <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between mb-1.5">
+              <span className="text-xs font-semibold text-text-muted uppercase tracking-wider">Request</span>
+              <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
+                <button
+                  onClick={() => copyCurl(curlSnippet)}
+                  className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
+                >
+                  <span className="material-symbols-outlined text-[14px]">{copiedCurl ? "check" : "content_copy"}</span>
+                  {copiedCurl ? "Copied" : "Copy"}
+                </button>
+                <button
+                  onClick={handleRun}
+                  disabled={running || !input.trim() || !modelFull}
+                  className="flex w-full sm:w-auto items-center justify-center gap-1.5 px-3 py-1 rounded-lg bg-primary text-white text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <span className="material-symbols-outlined text-[14px]" style={running ? { animation: "spin 1s linear infinite" } : undefined}>
+                    play_arrow
+                  </span>
+                  {running ? "Generating..." : "Run"}
+                </button>
+              </div>
+            </div>
+            <pre className="bg-sidebar rounded-lg px-3 py-2.5 text-xs font-mono text-text-main overflow-x-auto whitespace-pre-wrap break-all">{curlSnippet}</pre>
+          </div>
+
+          {error && <p className="text-xs text-red-500 break-words">{error}</p>}
+
+          {/* Audio player */}
+          {audioUrl ? (
+            <div>
+              <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between mb-1.5">
+                <span className="text-xs font-semibold text-text-muted uppercase tracking-wider">
+                  Response {latency && <span className="font-normal normal-case">&#9889; {latency}ms</span>}
+                </span>
+                <a href={audioUrl} download="speech.mp3" className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors">
+                  <span className="material-symbols-outlined text-[14px]">download</span>
+                  Download
+                </a>
+              </div>
+              <audio controls src={audioUrl} className="w-full" />
+              
+              {/* JSON Response (if format is json) */}
+              {jsonResponse && (
+                <div className="mt-3">
+                  <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between mb-1.5">
+                    <span className="text-xs font-semibold text-text-muted uppercase tracking-wider">JSON Response</span>
+                  </div>
+                  <pre className="bg-sidebar rounded-lg px-3 py-2.5 text-xs font-mono text-text-main overflow-x-auto whitespace-pre-wrap break-all">
+                    {JSON.stringify({
+                      format: jsonResponse.format,
+                      audio: jsonResponse.audio ? `${jsonResponse.audio.substring(0, 100)}...` : ""
+                    }, null, 2)}
+                  </pre>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div>
+            <span className="text-xs font-semibold text-text-muted uppercase tracking-wider">Response</span>
+            <pre className="mt-1.5 bg-sidebar rounded-lg px-3 py-2.5 text-xs font-mono text-text-main overflow-x-auto whitespace-pre-wrap break-all opacity-50">{DEFAULT_TTS_RESPONSE_EXAMPLE}</pre>
+          </div>
+          )}
+        </div>
+      </Card>
+
+      {/* Country Picker Modal */}
+      {modalOpen && (
+        <div
+          className="fixed inset-0 z-50 flex items-end justify-center sm:items-center"
+          style={{ backgroundColor: "rgba(0,0,0,0.6)", backdropFilter: "blur(2px)" }}
+          onClick={() => setModalOpen(false)}
+        >
+          <div
+            className="border border-border rounded-xl shadow-2xl w-full max-w-md mx-4 flex flex-col max-h-[80vh]"
+            style={{ backgroundColor: "var(--color-bg)", isolation: "isolate" }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0 rounded-t-xl">
+              <h3 className="text-sm font-semibold">Select Language</h3>
+              <button onClick={() => setModalOpen(false)} className="text-text-muted hover:text-primary transition-colors">
+                <span className="material-symbols-outlined text-[20px]">close</span>
+              </button>
+            </div>
+
+            {/* Search */}
+            <div className="px-4 py-2.5 border-b border-border shrink-0">
+              <input
+                autoFocus
+                value={modalSearch}
+                onChange={(e) => setModalSearch(e.target.value)}
+                placeholder="Search language..."
+                className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+              />
+            </div>
+
+            {/* Language list */}
+            <div className="overflow-y-auto flex-1 p-2">
+              {modalError && <p className="text-xs text-red-500 px-2 py-1">{modalError}</p>}
+              {modalLoading ? (
+                <p className="text-xs text-text-muted px-2 py-3">Loading...</p>
+              ) : (
+                <div className="flex flex-col gap-0.5">
+                  {filteredLanguages.map((c) => (
+                    <button
+                      key={c.code}
+                      onClick={() => handlePickLanguage(c)}
+                      className={`flex items-center justify-between w-full px-3 py-2 rounded-lg text-left hover:bg-sidebar transition-colors ${
+                        selectedLang === c.code ? "bg-primary/10 text-primary" : ""
+                      }`}
+                    >
+                      <span className="text-sm">{c.name}</span>
+                      <div className="flex items-center gap-2 shrink-0">
+                        <span className="text-xs text-text-muted">{c.voices.length} voices</span>
+                        {selectedLang === c.code && (
+                          <span className="material-symbols-outlined text-[16px] text-primary">check</span>
+                        )}
+                      </div>
+                    </button>
+                  ))}
+                  {filteredLanguages.length === 0 && (
+                    <p className="text-xs text-text-muted px-2 py-3">No languages found.</p>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+// Generic Example Card — config-driven for webSearch, webFetch, image, imageToText, stt, video, music
+function GenericExampleCard({ providerId, kind }) {
+  const providerAlias = getProviderAlias(providerId);
+  const resolvedId = resolveProviderId(providerAlias);
+  const safeProviderAlias = resolvedId === providerId ? providerAlias : providerId;
+  const kindConfig = MEDIA_PROVIDER_KINDS.find((k) => k.id === kind);
+  const exConfig = KIND_EXAMPLE_CONFIG[kind];
+  const safeExConfig = exConfig || {};
+
+  // Get models for this kind (e.g., type="image")
+  const kindModels = getModelsByProviderId(providerId).filter((m) => m.type === kind);
+  // Kinds that need a model identifier in the request (image/video/music)
+  const KIND_NEEDS_MODEL = new Set(["image", "video", "music", "imageToText"]);
+  const needsModel = KIND_NEEDS_MODEL.has(kind);
+  const allowManualModel = needsModel && kindModels.length === 0;
+  const [selectedModel, setSelectedModel] = useState(kindModels[0]?.id ?? "");
+  const selectedModelObj = kindModels.find((m) => m.id === selectedModel);
+  const supportsEdit = !!selectedModelObj?.capabilities?.includes("edit");
+  const supportsMask = !!selectedModelObj?.capabilities?.includes("mask");
+
+  const [input, setInput] = useState(safeExConfig.defaultInput || "");
+  const [refImage, setRefImage] = useState("");
+  const [maskImage, setMaskImage] = useState("");
+  const [extraValues, setExtraValues] = useState(() =>
+    (safeExConfig.extraFields || []).reduce((acc, f) => { acc[f.key] = f.default ?? ""; return acc; }, {})
+  );
+  const [apiKey, setApiKey] = useState("");
+  const [useTunnel, setUseTunnel] = useState(false);
+  const [localEndpoint, setLocalEndpoint] = useState("");
+  const [tunnelEndpoint, setTunnelEndpoint] = useState("");
+  const [result, setResult] = useState(null);
+  const [progress, setProgress] = useState(null); // { stage, bytesReceived }
+  const [partialImage, setPartialImage] = useState(null);
+  const [imageOutputFormat, setImageOutputFormat] = useState("json"); // json | binary
+  const [binaryImageUrl, setBinaryImageUrl] = useState("");
+  const [running, setRunning] = useState(false);
+  const [error, setError] = useState("");
+  const [connections, setConnections] = useState([]);
+  const [pinnedConnectionId, setPinnedConnectionId] = useState("");
+  const { copied: copiedCurl, copy: copyCurl } = useCopyToClipboard();
+  const { copied: copiedRes, copy: copyRes } = useCopyToClipboard();
+
+  useEffect(() => {
+    setLocalEndpoint(window.location.origin);
+    fetch("/api/keys")
+      .then((r) => r.json())
+      .then((d) => { setApiKey((d.keys || []).find((k) => k.isActive !== false)?.key || ""); })
+      .catch(() => {});
+    fetch("/api/tunnel/status")
+      .then((r) => r.json())
+      .then((d) => { if (d.publicUrl) setTunnelEndpoint(d.publicUrl); })
+      .catch(() => {});
+    // Load active connections of this provider for pinning
+    fetch("/api/providers/client")
+      .then((r) => r.json())
+      .then((d) => {
+        const conns = (d.connections || []).filter((c) => c.provider === providerId && c.isActive !== false);
+        setConnections(conns);
+      })
+      .catch(() => {});
+  }, [providerId]);
+
+  // Safe to early-return now that all hooks are declared
+  if (!kindConfig || !exConfig) return null;
+
+  const endpoint = useTunnel ? tunnelEndpoint : localEndpoint;
+  const apiPath = kindConfig.endpoint.path;
+  // webSearch/webFetch: use safeProviderAlias only. Other kinds: append model when present.
+  const modelFull = !needsModel
+    ? safeProviderAlias
+    : (selectedModel ? `${safeProviderAlias}/${selectedModel}` : (allowManualModel ? "" : safeProviderAlias));
+  const imageEditDefaults = getImageEditDefaults(providerId, selectedModel);
+  const effectiveRefImage = refImage.trim() || imageEditDefaults.image || "";
+  const effectiveMaskImage = maskImage.trim() || imageEditDefaults.mask_image || "";
+  const refImagePreviewSrc = toImagePreviewSrc(effectiveRefImage);
+  const maskImagePreviewSrc = toImagePreviewSrc(effectiveMaskImage);
+
+  // Build request body with optional extra fields (only non-empty values)
+  const extraBodyFromFields = Object.entries(extraValues).reduce((acc, [k, v]) => {
+    if (v === "" || v === null || v === undefined) return acc;
+    if (typeof v === "number" && Number.isNaN(v)) return acc;
+    acc[k] = v;
+    return acc;
+  }, {});
+  const requestBody = {
+    model: modelFull,
+    [exConfig.bodyKey]: input,
+    ...exConfig.extraBody,
+    ...extraBodyFromFields,
+    ...(supportsEdit && effectiveRefImage ? { image: effectiveRefImage } : {}),
+    ...(supportsMask && effectiveMaskImage ? { mask_image: effectiveMaskImage } : {}),
+  };
+
+  // Streaming supported for codex image (Plus/Pro accounts) — disabled when binary output requested
+  const wantBinary = kind === "image" && imageOutputFormat === "binary";
+  const useStreaming = kind === "image" && providerId === "codex" && !wantBinary;
+  const apiPathWithQuery = `${apiPath}${wantBinary ? "?response_format=binary" : ""}`;
+  const headersPreview = `-H "Content-Type: application/json" \\\n  -H "Authorization: Bearer ${apiKey || "YOUR_KEY"}"${pinnedConnectionId ? ` \\\n  -H "x-connection-id: ${pinnedConnectionId}"` : ""}${useStreaming ? ` \\\n  -H "Accept: text/event-stream"` : ""}`;
+  const curlSnippet = `curl -X ${kindConfig.endpoint.method} ${endpoint}${apiPathWithQuery} \\
+  ${headersPreview.replace(/\\\n  /g, "\\\n  ")} \\
+  -d '${JSON.stringify(requestBody)}'${wantBinary ? " \\\n  --output image.png" : ""}`;
+
+  const handleRun = async () => {
+    if (!input.trim() || !modelFull) return;
+    setRunning(true);
+    setError("");
+    setResult(null);
+    setProgress(null);
+    setPartialImage(null);
+    if (binaryImageUrl) { try { URL.revokeObjectURL(binaryImageUrl); } catch {} setBinaryImageUrl(""); }
+    const start = Date.now();
+    try {
+      const headers = { "Content-Type": "application/json" };
+      if (apiKey) headers["Authorization"] = `Bearer ${apiKey}`;
+      if (pinnedConnectionId) headers["x-connection-id"] = pinnedConnectionId;
+      if (useStreaming) headers["Accept"] = "text/event-stream";
+      const body = { ...requestBody, model: modelFull };
+      const res = await fetch(`/api${apiPathWithQuery}`, {
+        method: kindConfig.endpoint.method,
+        headers,
+        body: JSON.stringify(body),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        setError(data?.error?.message || data?.error || `HTTP ${res.status}`);
+        return;
+      }
+      const ctype = res.headers.get("content-type") || "";
+      // Binary image response — convert to blob URL
+      if (ctype.startsWith("image/")) {
+        const blob = await res.blob();
+        const objUrl = URL.createObjectURL(blob);
+        setBinaryImageUrl(objUrl);
+        setResult({ data: { binary: true, mime: ctype, size: blob.size }, latencyMs: Date.now() - start });
+        return;
+      }
+      const isSse = ctype.includes("text/event-stream");
+      if (isSse && res.body) {
+        // Parse SSE: progress / partial_image / done / error
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let buf = "";
+        let finalData = null;
+        let streamErr = null;
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buf += decoder.decode(value, { stream: true });
+          let sep;
+          while ((sep = buf.indexOf("\n\n")) !== -1) {
+            const block = buf.slice(0, sep);
+            buf = buf.slice(sep + 2);
+            let evt = null, dataStr = "";
+            for (const line of block.split("\n")) {
+              if (line.startsWith("event:")) evt = line.slice(6).trim();
+              else if (line.startsWith("data:")) dataStr += line.slice(5).trim();
+            }
+            if (!evt) continue;
+            try {
+              const payload = dataStr ? JSON.parse(dataStr) : {};
+              if (evt === "progress") setProgress(payload);
+              else if (evt === "partial_image") setPartialImage(payload);
+              else if (evt === "done") finalData = payload;
+              else if (evt === "error") streamErr = payload?.message || "Stream error";
+            } catch {}
+          }
+        }
+        const latencyMs = Date.now() - start;
+        if (streamErr) { setError(streamErr); return; }
+        if (finalData) setResult({ data: finalData, latencyMs });
+      } else {
+        const data = await res.json();
+        const latencyMs = Date.now() - start;
+        setResult({ data, latencyMs });
+      }
+    } catch (e) {
+      setError(e.message || "Network error");
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  // Mask large b64_json strings in JSON view to keep it readable
+  const maskB64 = (obj) => {
+    if (!obj || typeof obj !== "object") return obj;
+    if (Array.isArray(obj)) return obj.map(maskB64);
+    const out = {};
+    for (const [k, v] of Object.entries(obj)) {
+      out[k] = (k === "b64_json" && typeof v === "string" && v.length > 100)
+        ? `<${v.length} chars base64>`
+        : maskB64(v);
+    }
+    return out;
+  };
+  const resultJson = result ? JSON.stringify(maskB64(result.data), null, 2) : "";
+
+  return (
+    <Card>
+      <h2 className="text-lg font-semibold mb-4">Example</h2>
+      <div className="flex flex-col gap-2.5">
+        {/* Model selector — dropdown if presets exist, else manual input for media kinds */}
+        {kindModels.length > 0 ? (
+          <Row label="Model">
+            <select
+              value={selectedModel}
+              onChange={(e) => setSelectedModel(e.target.value)}
+              className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+            >
+              {kindModels.map((m) => (
+                <option key={m.id} value={m.id}>{m.name || m.id}</option>
+              ))}
+            </select>
+          </Row>
+        ) : allowManualModel ? (
+          <Row label="Model">
+            <input
+              value={selectedModel}
+              onChange={(e) => setSelectedModel(e.target.value)}
+              placeholder="Enter model id (provider-specific)"
+              className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary font-mono"
+            />
+          </Row>
+        ) : null}
+
+        {/* Endpoint */}
+        <Row label="Endpoint">
+          <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
+            <span className="w-full min-w-0 flex-1 px-3 py-1.5 text-sm font-mono text-text-main bg-sidebar rounded-lg truncate">
+              {endpoint}{apiPath}
+            </span>
+            {tunnelEndpoint && (
+              <button
+                onClick={() => setUseTunnel((v) => !v)}
+                title={useTunnel ? "Using tunnel" : "Using local"}
+                className={`flex items-center gap-1 text-xs px-2 py-1.5 rounded-lg border shrink-0 transition-colors ${
+                  useTunnel ? "border-primary/40 bg-primary/10 text-primary" : "border-border text-text-muted hover:text-primary"
+                }`}
+              >
+                <span className="material-symbols-outlined text-[14px]">wifi_tethering</span>
+                Tunnel
+              </button>
+            )}
+          </div>
+        </Row>
+
+        {/* API Key */}
+        <Row label="API Key">
+          <span className="px-3 py-1.5 text-sm font-mono text-text-main bg-sidebar rounded-lg truncate block">
+            {apiKey ? `${apiKey.slice(0, 8)}${"\u2022".repeat(Math.min(20, apiKey.length - 8))}` : <span className="text-text-muted italic">No key configured</span>}
+          </span>
+        </Row>
+
+        {/* Connection picker - only show when 2+ connections (or any with email) */}
+        {connections.length > 0 && (
+          <Row label="Connection">
+            <select
+              value={pinnedConnectionId}
+              onChange={(e) => setPinnedConnectionId(e.target.value)}
+              className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+            >
+              <option value="">Auto (by priority)</option>
+              {connections.map((c) => {
+                const plan = c.providerSpecificData?.chatgptPlanType;
+                const label = c.email || c.name || c.id.slice(0, 8);
+                return (
+                  <option key={c.id} value={c.id}>
+                    {label}{plan ? ` [${plan}]` : ""}
+                  </option>
+                );
+              })}
+            </select>
+          </Row>
+        )}
+
+        {/* Input */}
+        <Row label={exConfig.inputLabel}>
+          <div className="relative">
+            <input
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              placeholder={exConfig.inputPlaceholder}
+              className="w-full px-3 py-1.5 pr-7 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+            />
+            {input && (
+              <button
+                type="button"
+                onClick={() => setInput("")}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-primary transition-colors"
+              >
+                <span className="material-symbols-outlined text-[14px]">close</span>
+              </button>
+            )}
+          </div>
+        </Row>
+
+        {/* Reference image (only for edit-capable image models) */}
+        {supportsEdit && (
+          <Row label="Ref Image (URL)">
+            <div className="flex flex-col gap-2">
+              <div className="relative">
+                <input
+                  value={refImage}
+                  onChange={(e) => setRefImage(e.target.value)}
+                  placeholder={imageEditDefaults.image || "https://example.com/source.png"}
+                  className="w-full px-3 py-1.5 pr-7 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+                />
+                {refImage && (
+                  <button
+                    type="button"
+                    onClick={() => setRefImage("")}
+                    className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-primary transition-colors"
+                  >
+                    <span className="material-symbols-outlined text-[14px]">close</span>
+                  </button>
+                )}
+              </div>
+              {refImagePreviewSrc && (
+                <img
+                  src={refImagePreviewSrc}
+                  alt="Reference"
+                  className="max-h-40 rounded-lg border border-border object-contain bg-sidebar"
+                  onError={(e) => { e.currentTarget.style.display = "none"; }}
+                  onLoad={(e) => { e.currentTarget.style.display = "block"; }}
+                />
+              )}
+            </div>
+          </Row>
+        )}
+
+        {supportsMask && (
+          <Row label="Mask (URL)">
+            <div className="flex flex-col gap-2">
+              <div className="relative">
+                <input
+                  value={maskImage}
+                  onChange={(e) => setMaskImage(e.target.value)}
+                  placeholder={imageEditDefaults.mask_image || "https://example.com/mask.png"}
+                  className="w-full px-3 py-1.5 pr-7 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+                />
+                {maskImage && (
+                  <button
+                    type="button"
+                    onClick={() => setMaskImage("")}
+                    className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-primary transition-colors"
+                  >
+                    <span className="material-symbols-outlined text-[14px]">close</span>
+                  </button>
+                )}
+              </div>
+              {maskImagePreviewSrc && (
+                <img
+                  src={maskImagePreviewSrc}
+                  alt="Mask"
+                  className="max-h-40 rounded-lg border border-border object-contain bg-sidebar"
+                  onError={(e) => { e.currentTarget.style.display = "none"; }}
+                  onLoad={(e) => { e.currentTarget.style.display = "block"; }}
+                />
+              )}
+            </div>
+          </Row>
+        )}
+
+        {/* Extra fields — for kinds without model concept (webSearch/webFetch), show all; otherwise filter by model.params */}
+        {(exConfig.extraFields || [])
+          .filter((f) => kindModels.length === 0 || (Array.isArray(selectedModelObj?.params) && selectedModelObj.params.includes(f.key)))
+          .map((f) => (
+          <Row key={f.key} label={f.label}>
+            {f.type === "select" ? (
+              <select
+                value={extraValues[f.key] ?? ""}
+                onChange={(e) => setExtraValues((s) => ({ ...s, [f.key]: e.target.value }))}
+                className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+              >
+                {(f.options || []).map((opt) => (
+                  <option key={opt} value={opt}>{opt === "" ? "(default)" : opt}</option>
+                ))}
+              </select>
+            ) : f.type === "text" ? (
+              <input
+                type="text"
+                value={extraValues[f.key] ?? ""}
+                placeholder={f.placeholder}
+                onChange={(e) => setExtraValues((s) => ({ ...s, [f.key]: e.target.value }))}
+                className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+              />
+            ) : (
+              <input
+                type="number"
+                value={extraValues[f.key] ?? ""}
+                min={f.min}
+                max={f.max}
+                onChange={(e) => setExtraValues((s) => ({ ...s, [f.key]: e.target.value === "" ? "" : Number(e.target.value) }))}
+                className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+              />
+            )}
+          </Row>
+        ))}
+
+        {/* Output Format toggle (image only) — last */}
+        {kind === "image" && (
+          <Row label="Output Format">
+            <select
+              value={imageOutputFormat}
+              onChange={(e) => setImageOutputFormat(e.target.value)}
+              className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+            >
+              <option value="json">JSON (Base64)</option>
+              <option value="binary">Binary File</option>
+            </select>
+          </Row>
+        )}
+
+        {/* Curl + Run */}
+        <div className="mt-1">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between mb-1.5">
+            <span className="text-xs font-semibold text-text-muted uppercase tracking-wider">Request</span>
+            <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
+              <button
+                onClick={() => copyCurl(curlSnippet)}
+                className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
+              >
+                <span className="material-symbols-outlined text-[14px]">{copiedCurl ? "check" : "content_copy"}</span>
+                {copiedCurl ? "Copied" : "Copy"}
+              </button>
+            <button
+              onClick={handleRun}
+              disabled={running || !input.trim() || !modelFull}
+              className="flex w-full sm:w-auto items-center justify-center gap-1.5 px-3 py-1 rounded-lg bg-primary text-white text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+                <span className="material-symbols-outlined text-[14px]" style={running ? { animation: "spin 1s linear infinite" } : undefined}>
+                  play_arrow
+                </span>
+                {running ? "Running..." : "Run"}
+              </button>
+            </div>
+          </div>
+          <pre className="bg-sidebar rounded-lg px-3 py-2.5 text-xs font-mono text-text-main overflow-x-auto whitespace-pre-wrap break-all">{curlSnippet}</pre>
+        </div>
+
+        {/* Streaming progress */}
+        {(running || progress) && useStreaming && (
+          <div className="flex flex-col gap-2 px-3 py-2 rounded-lg bg-sidebar border border-border sm:flex-row sm:items-center sm:gap-3">
+            <span className="material-symbols-outlined text-[16px] text-primary" style={running ? { animation: "spin 1s linear infinite" } : undefined}>
+              {running ? "progress_activity" : "check_circle"}
+            </span>
+            <span className="text-xs text-text-muted">
+              {progress?.stage || "starting"}
+              {!running && progress?.bytesReceived ? ` · ${(progress.bytesReceived / 1024).toFixed(1)} KB` : ""}
+            </span>
+          </div>
+        )}
+
+        {/* Partial image preview (codex stream) */}
+        {partialImage?.b64_json && !result && (
+          <div>
+            <span className="text-xs font-semibold text-text-muted uppercase tracking-wider">Partial preview</span>
+            <img
+              src={`data:image/png;base64,${partialImage.b64_json}`}
+              alt="Partial"
+              className="max-w-full rounded-lg border border-border mt-1.5 opacity-80"
+            />
+          </div>
+        )}
+
+        {/* Error */}
+        {error && <p className="text-xs text-red-500 break-words">{error}</p>}
+
+        {/* Response */}
+        <div>
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between mb-1.5">
+            <span className="text-xs font-semibold text-text-muted uppercase tracking-wider">
+              Response {result && <span className="font-normal normal-case">&#9889; {result.latencyMs}ms</span>}
+            </span>
+            {result && (
+              <button
+                onClick={() => copyRes(resultJson)}
+                className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
+              >
+                <span className="material-symbols-outlined text-[14px]">{copiedRes ? "check" : "content_copy"}</span>
+                {copiedRes ? "Copied" : "Copy"}
+              </button>
+            )}
+          </div>
+          <pre className="bg-sidebar rounded-lg px-3 py-2.5 text-xs font-mono text-text-main overflow-x-auto whitespace-pre-wrap break-all opacity-70">
+            {result ? resultJson : exConfig.defaultResponse}
+          </pre>
+          {kind === "image" && (binaryImageUrl || result?.data?.data?.[0]) && (
+            <div className="mt-2">
+              <div className="flex items-center justify-end mb-1.5">
+                <a
+                  href={binaryImageUrl || (result?.data?.data?.[0]?.b64_json ? `data:image/png;base64,${result.data.data[0].b64_json}` : result?.data?.data?.[0]?.url || "")}
+                  download="image.png"
+                  className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
+                >
+                  <span className="material-symbols-outlined text-[14px]">download</span>
+                  Download
+                </a>
+              </div>
+              <img
+                src={binaryImageUrl || (result?.data?.data?.[0]?.b64_json ? `data:image/png;base64,${result.data.data[0].b64_json}` : result?.data?.data?.[0]?.url)}
+                alt="Generated"
+                className="max-w-full rounded-lg border border-border"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+// ─── STT Example Card ────────────────────────────────────────────────────────
+function SttExampleCard({ providerId }) {
+  const providerAlias = getProviderAlias(providerId);
+  const builtinSttModels = getModelsByProviderId(providerId).filter((m) => m.type === "stt");
+  const [customSttModels, setCustomSttModels] = useState([]);
+  const sttModels = [...builtinSttModels, ...customSttModels];
+
+  const [selectedModel, setSelectedModel] = useState(builtinSttModels[0]?.id ?? "");
+  const selectedModelObj = sttModels.find((m) => m.id === selectedModel);
+  const allowedParams = Array.isArray(selectedModelObj?.params) ? selectedModelObj.params : [];
+
+  const [audioFile, setAudioFile] = useState(null);
+  const [language, setLanguage] = useState("");
+  const [prompt, setPrompt] = useState("");
+  const [responseFormat, setResponseFormat] = useState("json");
+  const [temperature, setTemperature] = useState("");
+  const [apiKey, setApiKey] = useState("");
+  const [useTunnel, setUseTunnel] = useState(false);
+  const [localEndpoint, setLocalEndpoint] = useState("");
+  const [tunnelEndpoint, setTunnelEndpoint] = useState("");
+  const [result, setResult] = useState(null);
+  const [latency, setLatency] = useState(null);
+  const [running, setRunning] = useState(false);
+  const [error, setError] = useState("");
+  const { copied: copiedCurl, copy: copyCurl } = useCopyToClipboard();
+  const { copied: copiedRes, copy: copyRes } = useCopyToClipboard();
+
+  useEffect(() => {
+    setLocalEndpoint(window.location.origin);
+    fetch("/api/keys")
+      .then((r) => r.json())
+      .then((d) => { setApiKey((d.keys || []).find((k) => k.isActive !== false)?.key || ""); })
+      .catch(() => {});
+    fetch("/api/tunnel/status")
+      .then((r) => r.json())
+      .then((d) => { if (d.publicUrl) setTunnelEndpoint(d.publicUrl); })
+      .catch(() => {});
+    const loadCustom = () => {
+      fetch("/api/models/custom", { cache: "no-store" })
+        .then((r) => r.json())
+        .then((d) => {
+          const list = (d.models || []).filter((m) => m.type === "stt" && m.providerAlias === providerAlias);
+          setCustomSttModels(list);
+        })
+        .catch(() => {});
+    };
+    loadCustom();
+    window.addEventListener("focus", loadCustom);
+    window.addEventListener("customModelChanged", loadCustom);
+    return () => {
+      window.removeEventListener("focus", loadCustom);
+      window.removeEventListener("customModelChanged", loadCustom);
+    };
+  }, [providerAlias]);
+
+  const endpoint = useTunnel ? tunnelEndpoint : localEndpoint;
+  const modelFull = selectedModel ? `${providerAlias}/${selectedModel}` : "";
+
+  const curlSnippet = `curl -X POST ${endpoint}/v1/audio/transcriptions \\
+  -H "Authorization: Bearer ${apiKey || "YOUR_KEY"}" \\
+  -F "file=@${audioFile?.name || "audio.mp3"}" \\
+  -F "model=${modelFull}"${allowedParams.includes("language") && language ? ` \\\n  -F "language=${language}"` : ""}${allowedParams.includes("response_format") ? ` \\\n  -F "response_format=${responseFormat}"` : ""}${allowedParams.includes("temperature") && temperature ? ` \\\n  -F "temperature=${temperature}"` : ""}${allowedParams.includes("prompt") && prompt ? ` \\\n  -F "prompt=${prompt}"` : ""}`;
+
+  const handleRun = async () => {
+    if (!audioFile || !modelFull) return;
+    setRunning(true);
+    setError("");
+    setResult(null);
+    const start = Date.now();
+    try {
+      const fd = new FormData();
+      fd.append("file", audioFile);
+      fd.append("model", modelFull);
+      if (allowedParams.includes("language") && language) fd.append("language", language);
+      if (allowedParams.includes("response_format")) fd.append("response_format", responseFormat);
+      if (allowedParams.includes("temperature") && temperature) fd.append("temperature", temperature);
+      if (allowedParams.includes("prompt") && prompt) fd.append("prompt", prompt);
+
+      const headers = {};
+      if (apiKey) headers["Authorization"] = `Bearer ${apiKey}`;
+      const res = await fetch("/api/v1/audio/transcriptions", { method: "POST", headers, body: fd });
+      setLatency(Date.now() - start);
+      const ct = res.headers.get("content-type") || "";
+      const data = ct.includes("application/json") ? await res.json() : await res.text();
+      if (!res.ok) {
+        setError(data?.error?.message || data?.error || data || `HTTP ${res.status}`);
+        return;
+      }
+      setResult(data);
+    } catch (e) {
+      setError(e.message || "Network error");
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  const resultStr = typeof result === "string" ? result : (result ? JSON.stringify(result, null, 2) : `{\n  "text": "Hello world..."\n}`);
+
+  return (
+    <Card>
+      <h2 className="text-lg font-semibold mb-4">Example</h2>
+      <div className="flex flex-col gap-2.5">
+        {/* Model */}
+        {sttModels.length > 0 ? (
+          <Row label="Model">
+            <select
+              value={selectedModel}
+              onChange={(e) => setSelectedModel(e.target.value)}
+              className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+            >
+              {sttModels.map((m) => (
+                <option key={m.id} value={m.id}>{m.name || m.id}</option>
+              ))}
+            </select>
+          </Row>
+        ) : (
+          <Row label="Model">
+            <input
+              value={selectedModel}
+              onChange={(e) => setSelectedModel(e.target.value)}
+              placeholder="Enter model id"
+              className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary font-mono"
+            />
+          </Row>
+        )}
+
+        {/* Endpoint */}
+        <Row label="Endpoint">
+          <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
+            <span className="w-full min-w-0 flex-1 px-3 py-1.5 text-sm font-mono text-text-main bg-sidebar rounded-lg truncate">
+              {endpoint}/v1/audio/transcriptions
+            </span>
+            {tunnelEndpoint && (
+              <button
+                onClick={() => setUseTunnel((v) => !v)}
+                title={useTunnel ? "Using tunnel" : "Using local"}
+                className={`flex items-center gap-1 text-xs px-2 py-1.5 rounded-lg border shrink-0 transition-colors ${
+                  useTunnel ? "border-primary/40 bg-primary/10 text-primary" : "border-border text-text-muted hover:text-primary"
+                }`}
+              >
+                <span className="material-symbols-outlined text-[14px]">wifi_tethering</span>
+                Tunnel
+              </button>
+            )}
+          </div>
+        </Row>
+
+        {/* API Key */}
+        <Row label="API Key">
+          <span className="px-3 py-1.5 text-sm font-mono text-text-main bg-sidebar rounded-lg truncate block">
+            {apiKey ? `${apiKey.slice(0, 8)}${"\u2022".repeat(Math.min(20, apiKey.length - 8))}` : <span className="text-text-muted italic">No key configured</span>}
+          </span>
+        </Row>
+
+        {/* Audio file */}
+        <Row label="Audio File">
+          <div className="flex flex-col gap-2">
+            <input
+              type="file"
+              accept="audio/*,video/mp4,.m4a,.mp3,.wav,.ogg,.flac,.webm,.opus"
+              onChange={(e) => setAudioFile(e.target.files?.[0] || null)}
+              className="w-full text-xs text-text-muted file:mr-2 file:py-1 file:px-2.5 file:rounded-lg file:border file:border-border file:bg-background file:text-text-main hover:file:bg-sidebar file:cursor-pointer"
+            />
+            {audioFile && (
+              <span className="text-xs text-text-muted font-mono">
+                {audioFile.name} · {(audioFile.size / 1024).toFixed(1)} KB
+              </span>
+            )}
+          </div>
+        </Row>
+
+        {/* Language (if model supports) */}
+        {allowedParams.includes("language") && (
+          <Row label="Language">
+            <input
+              value={language}
+              onChange={(e) => setLanguage(e.target.value)}
+              placeholder="e.g. en, vi, ja (auto-detect if empty)"
+              className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary font-mono"
+            />
+          </Row>
+        )}
+
+        {/* Prompt (if model supports) */}
+        {allowedParams.includes("prompt") && (
+          <Row label="Prompt">
+            <input
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              placeholder="optional context to improve accuracy"
+              className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+            />
+          </Row>
+        )}
+
+        {/* Temperature (if model supports) */}
+        {allowedParams.includes("temperature") && (
+          <Row label="Temperature">
+            <input
+              type="number"
+              step="0.1"
+              min="0"
+              max="1"
+              value={temperature}
+              onChange={(e) => setTemperature(e.target.value)}
+              placeholder="0 - 1 (default 0)"
+              className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+            />
+          </Row>
+        )}
+
+        {/* Response format (if model supports) */}
+        {allowedParams.includes("response_format") && (
+          <Row label="Response Format">
+            <select
+              value={responseFormat}
+              onChange={(e) => setResponseFormat(e.target.value)}
+              className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+            >
+              <option value="json">json</option>
+              <option value="text">text</option>
+              <option value="srt">srt</option>
+              <option value="verbose_json">verbose_json</option>
+              <option value="vtt">vtt</option>
+            </select>
+          </Row>
+        )}
+
+        {/* Curl + Run */}
+        <div className="mt-1">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between mb-1.5">
+            <span className="text-xs font-semibold text-text-muted uppercase tracking-wider">Request</span>
+            <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
+              <button
+                onClick={() => copyCurl(curlSnippet)}
+                className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
+              >
+                <span className="material-symbols-outlined text-[14px]">{copiedCurl ? "check" : "content_copy"}</span>
+                {copiedCurl ? "Copied" : "Copy"}
+              </button>
+              <button
+                onClick={handleRun}
+                disabled={running || !audioFile || !modelFull}
+                className="flex w-full sm:w-auto items-center justify-center gap-1.5 px-3 py-1 rounded-lg bg-primary text-white text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <span className="material-symbols-outlined text-[14px]" style={running ? { animation: "spin 1s linear infinite" } : undefined}>
+                  play_arrow
+                </span>
+                {running ? "Transcribing..." : "Run"}
+              </button>
+            </div>
+          </div>
+          <pre className="bg-sidebar rounded-lg px-3 py-2.5 text-xs font-mono text-text-main overflow-x-auto whitespace-pre-wrap break-all">{curlSnippet}</pre>
+        </div>
+
+        {error && <p className="text-xs text-red-500 break-words">{error}</p>}
+
+        {/* Response */}
+        <div>
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between mb-1.5">
+            <span className="text-xs font-semibold text-text-muted uppercase tracking-wider">
+              Response {result && latency && <span className="font-normal normal-case">&#9889; {latency}ms</span>}
+            </span>
+            {result && (
+              <button
+                onClick={() => copyRes(resultStr)}
+                className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
+              >
+                <span className="material-symbols-outlined text-[14px]">{copiedRes ? "check" : "content_copy"}</span>
+                {copiedRes ? "Copied" : "Copy"}
+              </button>
+            )}
+          </div>
+          <pre className="bg-sidebar rounded-lg px-3 py-2.5 text-xs font-mono text-text-main overflow-x-auto whitespace-pre-wrap break-all opacity-70">
+            {resultStr}
+          </pre>
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+// MediaProviderDetailPage
+export default function MediaProviderDetailPage() {
+  const { kind, id } = useParams();
+  const router = useRouter();
+  const kindConfig = MEDIA_PROVIDER_KINDS.find((k) => k.id === kind);
+  const isCustom = isCustomEmbeddingProvider(id) && kind === "embedding";
+
+  const handleDeleteCustom = async () => {
+    if (!confirm("Delete this Custom Embedding node?")) return;
+    try {
+      const res = await fetch(`/api/provider-nodes/${id}`, { method: "DELETE" });
+      if (res.ok) router.push(`/dashboard/media-providers/${kind}`);
+    } catch (error) {
+      console.log("Error deleting custom embedding node:", error);
+    }
+  };
+
+  const [customNode, setCustomNode] = useState(null);
+  const [customLoading, setCustomLoading] = useState(isCustom);
+  const [showEditModal, setShowEditModal] = useState(false);
+
+  // Fetch custom node info from API for custom embedding nodes
+  useEffect(() => {
+    if (!isCustom) return;
+    let cancelled = false;
+    fetch("/api/provider-nodes", { cache: "no-store" })
+      .then((r) => r.json())
+      .then((d) => {
+        if (cancelled) return;
+        setCustomNode((d.nodes || []).find((n) => n.id === id) || null);
+        setCustomLoading(false);
+      })
+      .catch(() => { if (!cancelled) setCustomLoading(false); });
+    return () => { cancelled = true; };
+  }, [id, isCustom]);
+
+  if (!kindConfig) return notFound();
+
+  const builtInProvider = AI_PROVIDERS[id];
+
+  // For custom embedding nodes, build a synthetic provider object
+  const provider = isCustom
+    ? (customNode ? { id, name: customNode.name || "Custom Embedding", color: "#6366F1", textIcon: "CE" } : null)
+    : builtInProvider;
+
+  if (!isCustom && !builtInProvider) return notFound();
+  if (isCustom && !customLoading && !customNode) return notFound();
+  if (isCustom && customLoading) {
+    return <div className="text-text-muted text-sm py-12 text-center">Loading...</div>;
+  }
+
+  const kinds = isCustom ? ["embedding"] : (provider.serviceKinds ?? ["llm"]);
+  if (!isCustom && !kinds.includes(kind)) return notFound();
+
+  return (
+    <div className="flex flex-col gap-8">
+      {/* Back */}
+      <div>
+        <Link
+          href={`/dashboard/media-providers/${kind}`}
+          className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-primary transition-colors mb-4"
+        >
+          <span className="material-symbols-outlined text-lg">arrow_back</span>
+          {kindConfig.label}
+        </Link>
+
+        {/* Header */}
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
+          <div className="size-12 rounded-lg flex items-center justify-center shrink-0" style={{ backgroundColor: `${provider.color}15` }}>
+            <ProviderIcon
+              src={`/providers/${provider.id}.png`}
+              alt={provider.name}
+              size={48}
+              className="object-contain rounded-lg max-w-[48px] max-h-[48px]"
+              fallbackText={provider.textIcon || provider.id.slice(0, 2).toUpperCase()}
+              fallbackColor={provider.color}
+            />
+          </div>
+          <div className="flex-1">
+            <div className="flex flex-wrap items-center gap-2 sm:gap-3">
+              <h1 className="text-3xl font-semibold tracking-tight">{provider.name}</h1>
+              {!isCustom && provider.notice?.apiKeyUrl && (
+                <a
+                  href={provider.notice.apiKeyUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-xs text-primary hover:underline inline-flex items-center gap-1"
+                >
+                  <span className="material-symbols-outlined text-sm">open_in_new</span>
+                  Get API Key
+                </a>
+              )}
+            </div>
+            <div className="flex items-center gap-1.5 mt-1 flex-wrap">
+              {isCustom && <Badge variant="default" size="sm">Custom · {customNode?.prefix}</Badge>}
+              {kinds.map((k) => (
+                <Badge key={k} variant={k === kind ? "primary" : "default"} size="sm">
+                  {k.toUpperCase()}
+                </Badge>
+              ))}
+            </div>
+          </div>
+          {isCustom && (
+            <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
+              <Button size="sm" variant="secondary" icon="edit" onClick={() => setShowEditModal(true)}>
+                Edit
+              </Button>
+              <Button size="sm" variant="secondary" icon="delete" onClick={handleDeleteCustom}>
+                Delete
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Kind-specific notice (e.g. codex/image requires Plus) */}
+      {!isCustom && provider.kindNotice?.[kind] && (
+        <div className="flex items-start gap-3 px-4 py-3 rounded-lg bg-amber-500/10 border border-amber-500/30 text-amber-700 dark:text-amber-400">
+          <span className="material-symbols-outlined text-[20px] mt-0.5">warning</span>
+          <p className="text-sm">{provider.kindNotice[kind]}</p>
+        </div>
+      )}
+
+      {/* Provider notice text (only when there's actual text content) */}
+      {!isCustom && provider.notice?.text && !provider.deprecated && (
+        <div className="flex flex-col gap-2 rounded-lg border border-blue-500/30 bg-blue-500/10 px-3 py-2 sm:flex-row sm:items-center">
+          <span className="material-symbols-outlined text-[16px] text-blue-500 shrink-0">info</span>
+          <p className="min-w-0 flex-1 text-xs leading-relaxed text-blue-600 dark:text-blue-400">{provider.notice.text}</p>
+          {provider.notice.apiKeyUrl && (
+            <a
+              href={provider.notice.apiKeyUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex justify-center rounded bg-blue-500 px-2 py-1 text-xs font-medium text-white transition-colors hover:bg-blue-600 sm:py-0.5"
+            >
+              Get API Key →
+            </a>
+          )}
+        </div>
+      )}
+
+      {/* Connections */}
+      {!isCustom && provider.noAuth ? (
+        <NoAuthProxyCard providerId={id} />
+      ) : (
+        <ConnectionsCard providerId={id} isOAuth={false} />
+      )}
+
+      {/* Models - hidden for tts/webSearch/webFetch (provider IS the model); custom uses prefix as alias */}
+      {kind !== "tts" && kind !== "webSearch" && kind !== "webFetch" && (
+        <ModelsCard
+          providerId={id}
+          kindFilter={kind}
+          providerAliasOverride={isCustom ? customNode?.prefix : undefined}
+        />
+      )}
+
+      {/* Provider Info — config-driven, supports searchConfig, fetchConfig, ttsConfig, embeddingConfig, searchViaChat */}
+      {!isCustom && (provider.searchConfig || provider.fetchConfig || provider.ttsConfig || provider.sttConfig || provider.embeddingConfig || provider.searchViaChat) && (
+        <ProviderInfoCard
+          config={
+            kind === "webFetch" ? provider.fetchConfig
+              : kind === "tts" ? provider.ttsConfig
+              : kind === "stt" ? provider.sttConfig
+              : kind === "embedding" ? provider.embeddingConfig
+              : provider.searchConfig || { mode: "chat-completions", defaultModel: provider.searchViaChat?.defaultModel, pricingUrl: provider.searchViaChat?.pricingUrl, freeTier: provider.searchViaChat?.freeTier }
+          }
+          provider={provider}
+          title={`${kindConfig.label} Config`}
+        />
+      )}
+
+      {/* Example — per kind */}
+      {kind === "embedding" && (
+        <EmbeddingExampleCard providerId={id} customAlias={customNode?.prefix} />
+      )}
+      {kind === "tts" && <TtsExampleCard providerId={id} />}
+      {kind === "stt" && !isCustom && <SttExampleCard providerId={id} />}
+      {!isCustom && KIND_EXAMPLE_CONFIG[kind] && <GenericExampleCard providerId={id} kind={kind} />}
+
+      {isCustom && (
+        <AddCustomEmbeddingModal
+          isOpen={showEditModal}
+          node={customNode}
+          onClose={() => setShowEditModal(false)}
+          onSaved={(updated) => {
+            setCustomNode(updated);
+            setShowEditModal(false);
+          }}
+        />
+      )}
+    </div>
+  );
+}