@@ -1474,81 +1289,6 @@ export default function APIPageClient({ machineId }) {
);
}
-/** Reusable endpoint row component */
-function EndpointRow({ label, url, copyId, copied, onCopy, badge, actions }) {
- return (
-
- {label}
- onCopy(url, copyId)}
- className="p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary transition-colors shrink-0"
- >
- {copied === copyId ? "check" : "content_copy"}
-
- {actions}
-
- );
-}
-
-/** Reusable status alert */
-function StatusAlert({ status, className = "" }) {
- // Render URLs in message as clickable links
- const renderMessage = (msg) => {
- const parts = msg.split(/(https?:\/\/[^\s]+)/g);
- return parts.map((part, i) =>
- /^https?:\/\//.test(part)
- ?
{part}
- : part
- );
- };
-
- return (
-
- {renderMessage(status.message)}
-
- );
-}
-
-/** Inline tooltip, Claude Code CLI style */
-function Tooltip({ text }) {
- return (
-
- help
-
- {text}
-
-
- );
-}
-
-/** Security warning banner with optional action link */
-function SecurityWarning({ message, action }) {
- return (
-
- );
-}
APIPageClient.propTypes = {
machineId: PropTypes.string.isRequired,
diff --git a/src/app/(dashboard)/dashboard/endpoint/components/EndpointRow.js b/src/app/(dashboard)/dashboard/endpoint/components/EndpointRow.js
new file mode 100644
index 00000000..29d3d653
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/endpoint/components/EndpointRow.js
@@ -0,0 +1,22 @@
+"use client";
+
+import { Input } from "@/shared/components";
+
+/** Reusable endpoint row component */
+export default function EndpointRow({ label, url, copyId, copied, onCopy, badge, actions }) {
+ return (
+
+ {label}
+ onCopy(url, copyId)}
+ className="p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary transition-colors shrink-0"
+ >
+ {copied === copyId ? "check" : "content_copy"}
+
+ {actions}
+
+ );
+}
diff --git a/src/app/(dashboard)/dashboard/endpoint/components/SecurityWarning.js b/src/app/(dashboard)/dashboard/endpoint/components/SecurityWarning.js
new file mode 100644
index 00000000..87565038
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/endpoint/components/SecurityWarning.js
@@ -0,0 +1,23 @@
+"use client";
+
+/** Security warning banner with optional action link */
+export default function SecurityWarning({ message, action }) {
+ return (
+
+ );
+}
diff --git a/src/app/(dashboard)/dashboard/endpoint/components/StatusAlert.js b/src/app/(dashboard)/dashboard/endpoint/components/StatusAlert.js
new file mode 100644
index 00000000..c0609abc
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/endpoint/components/StatusAlert.js
@@ -0,0 +1,23 @@
+"use client";
+
+/** Reusable status alert */
+export default function StatusAlert({ status, className = "" }) {
+ const renderMessage = (msg) => {
+ const parts = msg.split(/(https?:\/\/[^\s]+)/g);
+ return parts.map((part, i) =>
+ /^https?:\/\//.test(part)
+ ?
{part}
+ : part
+ );
+ };
+
+ return (
+
+ {renderMessage(status.message)}
+
+ );
+}
diff --git a/src/app/(dashboard)/dashboard/endpoint/components/Tooltip.js b/src/app/(dashboard)/dashboard/endpoint/components/Tooltip.js
new file mode 100644
index 00000000..c9726ea0
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/endpoint/components/Tooltip.js
@@ -0,0 +1,13 @@
+"use client";
+
+/** Inline tooltip, Claude Code CLI style */
+export default function Tooltip({ text }) {
+ return (
+
+ help
+
+ {text}
+
+
+ );
+}
diff --git a/src/app/(dashboard)/dashboard/endpoint/endpointConstants.js b/src/app/(dashboard)/dashboard/endpoint/endpointConstants.js
new file mode 100644
index 00000000..ac10b76b
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/endpoint/endpointConstants.js
@@ -0,0 +1,32 @@
+export const WENYAN_LOCALES = ["zh-CN", "zh-TW"];
+
+export const TUNNEL_BENEFITS = [
+ { icon: "public", title: "Access Anywhere", desc: "Use your API from any network" },
+ { icon: "group", title: "Share Endpoint", desc: "Share URL with team members" },
+ { icon: "code", title: "Use in Cursor/Cline", desc: "Connect AI tools remotely" },
+ { icon: "lock", title: "Encrypted", desc: "End-to-end TLS via Cloudflare" },
+];
+
+export const TUNNEL_PING_INTERVAL_MS = 2000;
+export const TUNNEL_PING_MAX_MS = 300000;
+export const STATUS_POLL_FAST_MS = 5000;
+export const STATUS_POLL_SLOW_MS = 30000;
+export const REACHABLE_MISS_THRESHOLD = 5;
+export const CLIENT_PING_FAST_MS = 10000;
+export const CLIENT_PING_SLOW_MS = 60000;
+export const CLIENT_PING_TIMEOUT_MS = 5000;
+
+export const CAVEMAN_LEVELS = [
+ { id: "lite", label: "Lite", desc: "Drop filler, keep grammar" },
+ { id: "full", label: "Full", desc: "Drop articles, fragments OK" },
+ { id: "ultra", label: "Ultra", desc: "Telegraphic, max compression" },
+ { id: "wenyan-lite", label: "文 Lite", desc: "Classical Chinese, light compression", wenyan: true },
+ { id: "wenyan", label: "文 Full", desc: "Maximum 文言文, 80-90% reduction", wenyan: true },
+ { id: "wenyan-ultra", label: "文 Ultra", desc: "Extreme classical compression", wenyan: true },
+];
+
+export const PONYTAIL_LEVELS = [
+ { id: "lite", label: "Lite", desc: "Build asked, name lazier option" },
+ { id: "full", label: "Full", desc: "Ladder enforced: stdlib/native first" },
+ { id: "ultra", label: "Ultra", desc: "YAGNI extremist, deletion first" },
+];
diff --git a/src/app/(dashboard)/dashboard/endpoint/endpointPing.js b/src/app/(dashboard)/dashboard/endpoint/endpointPing.js
new file mode 100644
index 00000000..5c522cdc
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/endpoint/endpointPing.js
@@ -0,0 +1,29 @@
+import { CLIENT_PING_TIMEOUT_MS } from "./endpointConstants";
+
+// Browser-side health probe: must reach origin (not just CF/TS edge).
+// cors mode → res.ok=false for 5xx (e.g. Cloudflare 530 when origin dead).
+// /api/health route sets Access-Control-Allow-Origin: * → CORS works through tunnel.
+export async function clientPingUrl(url) {
+ if (!url) return false;
+ try {
+ const res = await fetch(`${url}/api/health`, {
+ mode: "cors",
+ cache: "no-store",
+ signal: AbortSignal.timeout(CLIENT_PING_TIMEOUT_MS),
+ });
+ return res.ok;
+ } catch { return false; }
+}
+
+// Race multiple URLs: resolve true as soon as any one passes ping.
+export async function clientPingAny(...urls) {
+ const checks = urls.filter(Boolean).map(clientPingUrl);
+ if (!checks.length) return false;
+ return new Promise((resolve) => {
+ let pending = checks.length;
+ checks.forEach((p) => p.then((ok) => {
+ if (ok) resolve(true);
+ else if (--pending === 0) resolve(false);
+ }));
+ });
+}
diff --git a/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/components/EmbeddingExampleCard.js b/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/components/EmbeddingExampleCard.js
new file mode 100644
index 00000000..5580d759
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/components/EmbeddingExampleCard.js
@@ -0,0 +1,254 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card } from "@/shared/components";
+import { getProviderAlias, isCustomEmbeddingProvider } from "@/shared/constants/providers";
+import { getModelsByProviderId, getModelKind } from "@/shared/constants/models";
+import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
+import { Row } from "./exampleShared";
+
+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 }
+}`;
+
+export function EmbeddingExampleCard({ providerId, customAlias }) {
+ const isCustom = isCustomEmbeddingProvider(providerId);
+ const providerAlias = isCustom ? (customAlias || providerId) : getProviderAlias(providerId);
+ const embeddingModels = isCustom ? [] : getModelsByProviderId(providerId).filter((m) => getModelKind(m) === "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 (
+
+ Example
+
+
+ {/* Model — text input for custom node, dropdown otherwise */}
+
+ {isCustom ? (
+ 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) => (
+ {m.name || m.id}
+ ))}
+
+ )}
+
+
+ {/* Endpoint */}
+
+
+ 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"
+ }`}
+ >
+ wifi_tethering
+ Tunnel
+
+ )}
+
+
+
+ {/* API Key */}
+
+
+
+ {/* Input */}
+
+
+ setInput("")}
+ className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-primary transition-colors"
+ >
+ close
+
+ )}
+
+
+
+ {/* Dimensions (optional) — truncate embedding vector length */}
+
+
+
+ {/* Curl + Run */}
+
+
+
Request
+
+ copyCurl(curlSnippet)}
+ className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
+ >
+ {copiedCurl ? "check" : "content_copy"}
+ {copiedCurl ? "Copied" : "Copy"}
+
+
+
+ play_arrow
+
+ {running ? "Running..." : "Run"}
+
+
+
+
{curlSnippet}
+
+
+ {/* Error */}
+ {error &&
{error}
}
+
+ {/* Response — default example or real result */}
+
+
+
+ Response {result && ⚡ {result.latencyMs}ms }
+
+ {result && (
+ copyRes(resultJson)}
+ className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
+ >
+ {copiedRes ? "check" : "content_copy"}
+ {copiedRes ? "Copied" : "Copy"}
+
+ )}
+
+
+ {formatResultJson(result?.data)}
+
+
+
+ );
+}
diff --git a/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/components/GenericExampleCard.js b/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/components/GenericExampleCard.js
new file mode 100644
index 00000000..815528d7
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/components/GenericExampleCard.js
@@ -0,0 +1,539 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card } from "@/shared/components";
+import { MEDIA_PROVIDER_KINDS, getProviderAlias, resolveProviderId } from "@/shared/constants/providers";
+import { getModelsByProviderId, getModelKind } from "@/shared/constants/models";
+import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
+import { Row, KIND_EXAMPLE_CONFIG } from "./exampleShared";
+
+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}`;
+}
+
+export 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) => getModelKind(m) === 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 (
+
+ Example
+
+ {/* Model selector — dropdown if presets exist, else manual input for media kinds */}
+ {kindModels.length > 0 ? (
+
+ 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) => (
+ {m.name || m.id}
+ ))}
+
+
+ ) : allowManualModel ? (
+
+
+ ) : null}
+
+ {/* Endpoint */}
+
+
+
+ {endpoint}{apiPath}
+
+ {tunnelEndpoint && (
+ 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"
+ }`}
+ >
+ wifi_tethering
+ Tunnel
+
+ )}
+
+
+
+ {/* API Key */}
+
+
+ {apiKey ? `${apiKey.slice(0, 8)}${"\u2022".repeat(Math.min(20, apiKey.length - 8))}` : No key configured }
+
+
+
+ {/* Connection picker - only show when 2+ connections (or any with email) */}
+ {connections.length > 0 && (
+
+ 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"
+ >
+ Auto (by priority)
+ {connections.map((c) => {
+ const plan = c.providerSpecificData?.chatgptPlanType;
+ const label = c.email || c.name || c.id.slice(0, 8);
+ return (
+
+ {label}{plan ? ` [${plan}]` : ""}
+
+ );
+ })}
+
+
+ )}
+
+ {/* Input */}
+
+
+ setInput("")}
+ className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-primary transition-colors"
+ >
+ close
+
+ )}
+
+
+
+ {/* Reference image (only for edit-capable image models) */}
+ {supportsEdit && (
+
+
+
+ setRefImage("")}
+ className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-primary transition-colors"
+ >
+ close
+
+ )}
+
+ {refImagePreviewSrc && (
+
{ e.currentTarget.style.display = "none"; }}
+ onLoad={(e) => { e.currentTarget.style.display = "block"; }}
+ />
+ )}
+
+ )}
+
+ {supportsMask && (
+
+
+
+ setMaskImage("")}
+ className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-primary transition-colors"
+ >
+ close
+
+ )}
+
+ {maskImagePreviewSrc && (
+
{ e.currentTarget.style.display = "none"; }}
+ onLoad={(e) => { e.currentTarget.style.display = "block"; }}
+ />
+ )}
+
+ )}
+
+ {/* 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) => (
+
+ {f.type === "select" ? (
+ 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) => (
+ {opt === "" ? "(default)" : opt}
+ ))}
+
+ ) : f.type === "text" ? (
+
+ ))}
+
+ {/* Output Format toggle (image only) — last */}
+ {kind === "image" && (
+
+ 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"
+ >
+ JSON (Base64)
+ Binary File
+
+
+ )}
+
+ {/* Curl + Run */}
+
+
+
Request
+
+ copyCurl(curlSnippet)}
+ className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
+ >
+ {copiedCurl ? "check" : "content_copy"}
+ {copiedCurl ? "Copied" : "Copy"}
+
+
+
+ play_arrow
+
+ {running ? "Running..." : "Run"}
+
+
+
+
{curlSnippet}
+
+
+ {/* Streaming progress */}
+ {(running || progress) && useStreaming && (
+
+
+ {running ? "progress_activity" : "check_circle"}
+
+
+ {progress?.stage || "starting"}
+ {!running && progress?.bytesReceived ? ` · ${(progress.bytesReceived / 1024).toFixed(1)} KB` : ""}
+
+
+ )}
+
+ {/* Partial image preview (codex stream) */}
+ {partialImage?.b64_json && !result && (
+
+
Partial preview
+
+
+ )}
+
+ {/* Error */}
+ {error &&
{error}
}
+
+ {/* Response */}
+
+
+
+ Response {result && ⚡ {result.latencyMs}ms }
+
+ {result && (
+ copyRes(resultJson)}
+ className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
+ >
+ {copiedRes ? "check" : "content_copy"}
+ {copiedRes ? "Copied" : "Copy"}
+
+ )}
+
+
+ {result ? resultJson : exConfig.defaultResponse}
+
+ {kind === "image" && (binaryImageUrl || result?.data?.data?.[0]) && (
+
+
+
+
+ )}
+
+
+ );
+}
diff --git a/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/components/SttExampleCard.js b/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/components/SttExampleCard.js
new file mode 100644
index 00000000..18f2a4f6
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/components/SttExampleCard.js
@@ -0,0 +1,290 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card } from "@/shared/components";
+import { getProviderAlias } from "@/shared/constants/providers";
+import { getModelKind } from "@/shared/constants/models";
+import { getModelsByProviderId } from "@/shared/constants/models";
+import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
+import { Row } from "./exampleShared";
+
+export function SttExampleCard({ providerId }) {
+ const providerAlias = getProviderAlias(providerId);
+ const builtinSttModels = getModelsByProviderId(providerId).filter((m) => getModelKind(m) === "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) => getModelKind(m) === "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 (
+
+ Example
+
+ {/* Model */}
+ {sttModels.length > 0 ? (
+
+ 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) => (
+ {m.name || m.id}
+ ))}
+
+
+ ) : (
+
+
+ )}
+
+ {/* Endpoint */}
+
+
+
+ {endpoint}/v1/audio/transcriptions
+
+ {tunnelEndpoint && (
+ 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"
+ }`}
+ >
+ wifi_tethering
+ Tunnel
+
+ )}
+
+
+
+ {/* API Key */}
+
+
+ {apiKey ? `${apiKey.slice(0, 8)}${"\u2022".repeat(Math.min(20, apiKey.length - 8))}` : No key configured }
+
+
+
+ {/* Audio file */}
+
+
+
+ {audioFile.name} · {(audioFile.size / 1024).toFixed(1)} KB
+
+ )}
+
+
+
+ {/* Language (if model supports) */}
+ {allowedParams.includes("language") && (
+
+
+ )}
+
+ {/* Prompt (if model supports) */}
+ {allowedParams.includes("prompt") && (
+
+
+ )}
+
+ {/* Temperature (if model supports) */}
+ {allowedParams.includes("temperature") && (
+
+
+ )}
+
+ {/* Response format (if model supports) */}
+ {allowedParams.includes("response_format") && (
+
+ 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"
+ >
+ json
+ text
+ srt
+ verbose_json
+ vtt
+
+
+ )}
+
+ {/* Curl + Run */}
+
+
+
Request
+
+ copyCurl(curlSnippet)}
+ className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
+ >
+ {copiedCurl ? "check" : "content_copy"}
+ {copiedCurl ? "Copied" : "Copy"}
+
+
+
+ play_arrow
+
+ {running ? "Transcribing..." : "Run"}
+
+
+
+
{curlSnippet}
+
+
+ {error &&
{error}
}
+
+ {/* Response */}
+
+
+
+ Response {result && latency && ⚡ {latency}ms }
+
+ {result && (
+ copyRes(resultStr)}
+ className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
+ >
+ {copiedRes ? "check" : "content_copy"}
+ {copiedRes ? "Copied" : "Copy"}
+
+ )}
+
+
+ {resultStr}
+
+
+
+ );
+}
diff --git a/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/components/TtsExampleCard.js b/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/components/TtsExampleCard.js
new file mode 100644
index 00000000..e0191903
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/components/TtsExampleCard.js
@@ -0,0 +1,566 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card } from "@/shared/components";
+import { AI_PROVIDERS, getProviderAlias } from "@/shared/constants/providers";
+import { getModelsByProviderId, getModelKind } from "@/shared/constants/models";
+import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
+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";
+import { Row } from "./exampleShared";
+
+const DEFAULT_TTS_RESPONSE_EXAMPLE = `// Audio will appear here after running.
+// Example JSON response (response_format=json):
+{
+ "format": "mp3",
+ "audio": "//NExAANaAIIAUAAANNNNNNNN..." // base64 encoded MP3
+}`;
+
+export 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) => getModelKind(m) === "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) => getModelKind(m) === "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 (
+ <>
+
+ Example
+
+
+ {/* Endpoint + API Key as read-only text */}
+
+
+
+ {endpoint}/v1/audio/speech
+
+ {tunnelEndpoint && (
+ 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"
+ }`}
+ >
+ wifi_tethering
+ Tunnel
+
+ )}
+
+
+
+
+ {apiKey ? `${apiKey.slice(0, 8)}${"•".repeat(Math.min(20, apiKey.length - 8))}` : No key configured }
+
+
+
+ {/* Model selector — prefer PROVIDER_MODELS[kind=tts], else providerModels via modelKey */}
+ {config.hasModelSelector && (config.modelKey || getModelsByProviderId(providerId).some(m => getModelKind(m) === "tts")) && (
+
+ 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"
+ >
+ {(() => {
+ const ttsModels = getModelsByProviderId(providerId).filter(m => getModelKind(m) === "tts");
+ return (ttsModels.length ? ttsModels : getModelsByProviderId(config.modelKey) || []).map((m) => (
+ {m.name || m.id}
+ ));
+ })()}
+
+
+ )}
+
+ {/* Language hint dropdown (Gemini) — sends body.language to guide pronunciation */}
+ {config.hasLanguageHint && (
+
+ 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"
+ >
+ Auto-detect
+ {GOOGLE_TTS_LANGUAGES.map((l) => (
+ {l.name}
+ ))}
+
+
+ )}
+
+ {/* Language row + Browse button (edge-tts, local-device, elevenlabs) */}
+ {config.hasBrowseButton && (
+
+
+
+ {selectedLang
+ ? {languages.find((l) => l.code === selectedLang)?.name || selectedLang}
+ : No language selected }
+
+
+ language
+ Select language
+
+
+
+ )}
+
+ {/* Voice chips — shown after language picked (edge-tts, local-device) or always (OpenAI/ElevenLabs) */}
+ {countryVoices.length > 0 && (
+
+
+ {countryVoices.map((v) => (
+ {
+ 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 && (
+ Free
+ )}
+ {v.free_users_allowed === false && (
+ Paid
+ )}
+
+ ))}
+
+
+ )}
+
+ {/* Voice ID input (ElevenLabs) — manual entry or auto-fill from chip */}
+ {config.hasVoiceIdInput && (
+
+
+
+ { setVoiceId(""); setSelectedVoice(""); }}
+ className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-primary transition-colors"
+ >
+ close
+
+ )}
+
+
+ )}
+
+ {/* Google TTS: Language dropdown */}
+ {config.hasLanguageDropdown && (
+
+ {
+ const m = getModelsByProviderId(providerId).filter((m) => getModelKind(m) === "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) => getModelKind(m) === "tts").map((m) => (
+ {m.name || m.id}
+ ))}
+
+
+ )}
+
+ {/* Input */}
+
+
+ setInput("")}
+ className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-primary transition-colors"
+ >
+ close
+
+ )}
+
+
+
+ {/* Output Format */}
+
+ 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"
+ >
+ MP3 (Binary)
+ JSON (Base64)
+
+
+
+ {/* Curl + Run */}
+
+
+
Request
+
+ copyCurl(curlSnippet)}
+ className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
+ >
+ {copiedCurl ? "check" : "content_copy"}
+ {copiedCurl ? "Copied" : "Copy"}
+
+
+
+ play_arrow
+
+ {running ? "Generating..." : "Run"}
+
+
+
+
{curlSnippet}
+
+
+ {error &&
{error}
}
+
+ {/* Audio player */}
+ {audioUrl ? (
+
+
+
+
+ {/* JSON Response (if format is json) */}
+ {jsonResponse && (
+
+
+ JSON Response
+
+
+ {JSON.stringify({
+ format: jsonResponse.format,
+ audio: jsonResponse.audio ? `${jsonResponse.audio.substring(0, 100)}...` : ""
+ }, null, 2)}
+
+
+ )}
+
+ ) : (
+
+
Response
+
{DEFAULT_TTS_RESPONSE_EXAMPLE}
+
+ )}
+
+
+ {/* Country Picker Modal */}
+ {modalOpen && (
+
setModalOpen(false)}
+ >
+
e.stopPropagation()}
+ >
+ {/* Header */}
+
+
Select Language
+ setModalOpen(false)} className="text-text-muted hover:text-primary transition-colors">
+ close
+
+
+
+ {/* Search */}
+
+
+
+ {/* Language list */}
+
+ {modalError &&
{modalError}
}
+ {modalLoading ? (
+
Loading...
+ ) : (
+
+ {filteredLanguages.map((c) => (
+
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" : ""
+ }`}
+ >
+ {c.name}
+
+ {c.voices.length} voices
+ {selectedLang === c.code && (
+ check
+ )}
+
+
+ ))}
+ {filteredLanguages.length === 0 && (
+
No languages found.
+ )}
+
+ )}
+
+
+
+ )}
+
+ );
+}
diff --git a/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/components/exampleShared.js b/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/components/exampleShared.js
new file mode 100644
index 00000000..2fb4cb5e
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/components/exampleShared.js
@@ -0,0 +1,76 @@
+"use client";
+
+export function Row({ label, children }) {
+ return (
+
+ );
+}
+
+export 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}`,
+ },
+};
diff --git a/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/page.js b/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/page.js
index 5382f6f4..c331267b 100644
--- a/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/page.js
+++ b/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/page.js
@@ -5,1707 +5,14 @@ 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 { MEDIA_PROVIDER_KINDS, AI_PROVIDERS, isCustomEmbeddingProvider } from "@/shared/constants/providers";
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 (
-
- );
-}
-
-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 (
-
- Example
-
-
- {/* Model — text input for custom node, dropdown otherwise */}
-
- {isCustom ? (
- 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) => (
- {m.name || m.id}
- ))}
-
- )}
-
-
- {/* Endpoint */}
-
-
- 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"
- }`}
- >
- wifi_tethering
- Tunnel
-
- )}
-
-
-
- {/* API Key */}
-
-
-
- {/* Input */}
-
-
- setInput("")}
- className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-primary transition-colors"
- >
- close
-
- )}
-
-
-
- {/* Dimensions (optional) — truncate embedding vector length */}
-
-
-
- {/* Curl + Run */}
-
-
-
Request
-
- copyCurl(curlSnippet)}
- className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
- >
- {copiedCurl ? "check" : "content_copy"}
- {copiedCurl ? "Copied" : "Copy"}
-
-
-
- play_arrow
-
- {running ? "Running..." : "Run"}
-
-
-
-
{curlSnippet}
-
-
- {/* Error */}
- {error &&
{error}
}
-
- {/* Response — default example or real result */}
-
-
-
- Response {result && ⚡ {result.latencyMs}ms }
-
- {result && (
- copyRes(resultJson)}
- className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
- >
- {copiedRes ? "check" : "content_copy"}
- {copiedRes ? "Copied" : "Copy"}
-
- )}
-
-
- {formatResultJson(result?.data)}
-
-
-
- );
-}
-
-// ─── 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 (
- <>
-
- Example
-
-
- {/* Endpoint + API Key as read-only text */}
-
-
-
- {endpoint}/v1/audio/speech
-
- {tunnelEndpoint && (
- 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"
- }`}
- >
- wifi_tethering
- Tunnel
-
- )}
-
-
-
-
- {apiKey ? `${apiKey.slice(0, 8)}${"•".repeat(Math.min(20, apiKey.length - 8))}` : No key configured }
-
-
-
- {/* Model selector — prefer ttsConfig.models, else providerModels via modelKey */}
- {config.hasModelSelector && (config.modelKey || AI_PROVIDERS[providerId]?.ttsConfig?.models?.length) && (
-
- 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) => (
- {m.name || m.id}
- ))}
-
-
- )}
-
- {/* Language hint dropdown (Gemini) — sends body.language to guide pronunciation */}
- {config.hasLanguageHint && (
-
- 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"
- >
- Auto-detect
- {GOOGLE_TTS_LANGUAGES.map((l) => (
- {l.name}
- ))}
-
-
- )}
-
- {/* Language row + Browse button (edge-tts, local-device, elevenlabs) */}
- {config.hasBrowseButton && (
-
-
-
- {selectedLang
- ? {languages.find((l) => l.code === selectedLang)?.name || selectedLang}
- : No language selected }
-
-
- language
- Select language
-
-
-
- )}
-
- {/* Voice chips — shown after language picked (edge-tts, local-device) or always (OpenAI/ElevenLabs) */}
- {countryVoices.length > 0 && (
-
-
- {countryVoices.map((v) => (
- {
- 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 && (
- Free
- )}
- {v.free_users_allowed === false && (
- Paid
- )}
-
- ))}
-
-
- )}
-
- {/* Voice ID input (ElevenLabs) — manual entry or auto-fill from chip */}
- {config.hasVoiceIdInput && (
-
-
-
- { setVoiceId(""); setSelectedVoice(""); }}
- className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-primary transition-colors"
- >
- close
-
- )}
-
-
- )}
-
- {/* Google TTS: Language dropdown */}
- {config.hasLanguageDropdown && (
-
- {
- 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) => (
- {m.name || m.id}
- ))}
-
-
- )}
-
- {/* Input */}
-
-
- setInput("")}
- className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-primary transition-colors"
- >
- close
-
- )}
-
-
-
- {/* Output Format */}
-
- 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"
- >
- MP3 (Binary)
- JSON (Base64)
-
-
-
- {/* Curl + Run */}
-
-
-
Request
-
- copyCurl(curlSnippet)}
- className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
- >
- {copiedCurl ? "check" : "content_copy"}
- {copiedCurl ? "Copied" : "Copy"}
-
-
-
- play_arrow
-
- {running ? "Generating..." : "Run"}
-
-
-
-
{curlSnippet}
-
-
- {error &&
{error}
}
-
- {/* Audio player */}
- {audioUrl ? (
-
-
-
-
- {/* JSON Response (if format is json) */}
- {jsonResponse && (
-
-
- JSON Response
-
-
- {JSON.stringify({
- format: jsonResponse.format,
- audio: jsonResponse.audio ? `${jsonResponse.audio.substring(0, 100)}...` : ""
- }, null, 2)}
-
-
- )}
-
- ) : (
-
-
Response
-
{DEFAULT_TTS_RESPONSE_EXAMPLE}
-
- )}
-
-
- {/* Country Picker Modal */}
- {modalOpen && (
-
setModalOpen(false)}
- >
-
e.stopPropagation()}
- >
- {/* Header */}
-
-
Select Language
- setModalOpen(false)} className="text-text-muted hover:text-primary transition-colors">
- close
-
-
-
- {/* Search */}
-
-
-
- {/* Language list */}
-
- {modalError &&
{modalError}
}
- {modalLoading ? (
-
Loading...
- ) : (
-
- {filteredLanguages.map((c) => (
-
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" : ""
- }`}
- >
- {c.name}
-
- {c.voices.length} voices
- {selectedLang === c.code && (
- check
- )}
-
-
- ))}
- {filteredLanguages.length === 0 && (
-
No languages found.
- )}
-
- )}
-
-
-
- )}
-
- );
-}
-
-// 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 (
-
- Example
-
- {/* Model selector — dropdown if presets exist, else manual input for media kinds */}
- {kindModels.length > 0 ? (
-
- 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) => (
- {m.name || m.id}
- ))}
-
-
- ) : allowManualModel ? (
-
-
- ) : null}
-
- {/* Endpoint */}
-
-
-
- {endpoint}{apiPath}
-
- {tunnelEndpoint && (
- 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"
- }`}
- >
- wifi_tethering
- Tunnel
-
- )}
-
-
-
- {/* API Key */}
-
-
- {apiKey ? `${apiKey.slice(0, 8)}${"\u2022".repeat(Math.min(20, apiKey.length - 8))}` : No key configured }
-
-
-
- {/* Connection picker - only show when 2+ connections (or any with email) */}
- {connections.length > 0 && (
-
- 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"
- >
- Auto (by priority)
- {connections.map((c) => {
- const plan = c.providerSpecificData?.chatgptPlanType;
- const label = c.email || c.name || c.id.slice(0, 8);
- return (
-
- {label}{plan ? ` [${plan}]` : ""}
-
- );
- })}
-
-
- )}
-
- {/* Input */}
-
-
- setInput("")}
- className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-primary transition-colors"
- >
- close
-
- )}
-
-
-
- {/* Reference image (only for edit-capable image models) */}
- {supportsEdit && (
-
-
-
- setRefImage("")}
- className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-primary transition-colors"
- >
- close
-
- )}
-
- {refImagePreviewSrc && (
-
{ e.currentTarget.style.display = "none"; }}
- onLoad={(e) => { e.currentTarget.style.display = "block"; }}
- />
- )}
-
- )}
-
- {supportsMask && (
-
-
-
- setMaskImage("")}
- className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-primary transition-colors"
- >
- close
-
- )}
-
- {maskImagePreviewSrc && (
-
{ e.currentTarget.style.display = "none"; }}
- onLoad={(e) => { e.currentTarget.style.display = "block"; }}
- />
- )}
-
- )}
-
- {/* 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) => (
-
- {f.type === "select" ? (
- 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) => (
- {opt === "" ? "(default)" : opt}
- ))}
-
- ) : f.type === "text" ? (
-
- ))}
-
- {/* Output Format toggle (image only) — last */}
- {kind === "image" && (
-
- 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"
- >
- JSON (Base64)
- Binary File
-
-
- )}
-
- {/* Curl + Run */}
-
-
-
Request
-
- copyCurl(curlSnippet)}
- className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
- >
- {copiedCurl ? "check" : "content_copy"}
- {copiedCurl ? "Copied" : "Copy"}
-
-
-
- play_arrow
-
- {running ? "Running..." : "Run"}
-
-
-
-
{curlSnippet}
-
-
- {/* Streaming progress */}
- {(running || progress) && useStreaming && (
-
-
- {running ? "progress_activity" : "check_circle"}
-
-
- {progress?.stage || "starting"}
- {!running && progress?.bytesReceived ? ` · ${(progress.bytesReceived / 1024).toFixed(1)} KB` : ""}
-
-
- )}
-
- {/* Partial image preview (codex stream) */}
- {partialImage?.b64_json && !result && (
-
-
Partial preview
-
-
- )}
-
- {/* Error */}
- {error &&
{error}
}
-
- {/* Response */}
-
-
-
- Response {result && ⚡ {result.latencyMs}ms }
-
- {result && (
- copyRes(resultJson)}
- className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
- >
- {copiedRes ? "check" : "content_copy"}
- {copiedRes ? "Copied" : "Copy"}
-
- )}
-
-
- {result ? resultJson : exConfig.defaultResponse}
-
- {kind === "image" && (binaryImageUrl || result?.data?.data?.[0]) && (
-
-
-
-
- )}
-
-
- );
-}
-
-// ─── 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 (
-
- Example
-
- {/* Model */}
- {sttModels.length > 0 ? (
-
- 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) => (
- {m.name || m.id}
- ))}
-
-
- ) : (
-
-
- )}
-
- {/* Endpoint */}
-
-
-
- {endpoint}/v1/audio/transcriptions
-
- {tunnelEndpoint && (
- 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"
- }`}
- >
- wifi_tethering
- Tunnel
-
- )}
-
-
-
- {/* API Key */}
-
-
- {apiKey ? `${apiKey.slice(0, 8)}${"\u2022".repeat(Math.min(20, apiKey.length - 8))}` : No key configured }
-
-
-
- {/* Audio file */}
-
-
-
- {audioFile.name} · {(audioFile.size / 1024).toFixed(1)} KB
-
- )}
-
-
-
- {/* Language (if model supports) */}
- {allowedParams.includes("language") && (
-
-
- )}
-
- {/* Prompt (if model supports) */}
- {allowedParams.includes("prompt") && (
-
-
- )}
-
- {/* Temperature (if model supports) */}
- {allowedParams.includes("temperature") && (
-
-
- )}
-
- {/* Response format (if model supports) */}
- {allowedParams.includes("response_format") && (
-
- 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"
- >
- json
- text
- srt
- verbose_json
- vtt
-
-
- )}
-
- {/* Curl + Run */}
-
-
-
Request
-
- copyCurl(curlSnippet)}
- className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
- >
- {copiedCurl ? "check" : "content_copy"}
- {copiedCurl ? "Copied" : "Copy"}
-
-
-
- play_arrow
-
- {running ? "Transcribing..." : "Run"}
-
-
-
-
{curlSnippet}
-
-
- {error &&
{error}
}
-
- {/* Response */}
-
-
-
- Response {result && latency && ⚡ {latency}ms }
-
- {result && (
- copyRes(resultStr)}
- className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
- >
- {copiedRes ? "check" : "content_copy"}
- {copiedRes ? "Copied" : "Copy"}
-
- )}
-
-
- {resultStr}
-
-
-
- );
-}
+import { KIND_EXAMPLE_CONFIG } from "./components/exampleShared";
+import { EmbeddingExampleCard } from "./components/EmbeddingExampleCard";
+import { TtsExampleCard } from "./components/TtsExampleCard";
+import { GenericExampleCard } from "./components/GenericExampleCard";
+import { SttExampleCard } from "./components/SttExampleCard";
// MediaProviderDetailPage
export default function MediaProviderDetailPage() {
diff --git a/src/app/(dashboard)/dashboard/profile/page.js b/src/app/(dashboard)/dashboard/profile/page.js
index 2851bc0c..4df8cbef 100644
--- a/src/app/(dashboard)/dashboard/profile/page.js
+++ b/src/app/(dashboard)/dashboard/profile/page.js
@@ -1,7 +1,6 @@
"use client";
import { useState, useEffect, useRef } from "react";
-import { useRouter } from "next/navigation";
import { Card, Button, Toggle, Input } from "@/shared/components";
import Modal, { ConfirmModal } from "@/shared/components/Modal";
import LanguageSwitcher from "@/shared/components/LanguageSwitcher";
@@ -21,7 +20,6 @@ function getLocaleFromCookie() {
}
export default function ProfilePage() {
- const router = useRouter();
const { theme, setTheme, isDark } = useTheme();
const [locale, setLocale] = useState("en");
const [langOpen, setLangOpen] = useState(false);
@@ -569,8 +567,7 @@ export default function ProfilePage() {
try {
const res = await fetch("/api/auth/logout", { method: "POST" });
if (res.ok) {
- router.push("/login");
- router.refresh();
+ window.location.assign("/login");
}
} catch (err) {
console.error("Failed to logout:", err);
diff --git a/src/app/(dashboard)/dashboard/providers/[id]/CompatibleModelsSection.js b/src/app/(dashboard)/dashboard/providers/[id]/CompatibleModelsSection.js
index 33f1f05a..bfc12a13 100644
--- a/src/app/(dashboard)/dashboard/providers/[id]/CompatibleModelsSection.js
+++ b/src/app/(dashboard)/dashboard/providers/[id]/CompatibleModelsSection.js
@@ -3,6 +3,7 @@
import { useState } from "react";
import PropTypes from "prop-types";
import { Button } from "@/shared/components";
+import { getProviderCustomModelRows } from "@/shared/utils/providerCustomModels";
function CompatibleModelRow({ modelId, fullModel, copied, onCopy, onDeleteAlias, onTest, testStatus, isTesting }) {
const borderColor = testStatus === "ok"
? "border-green-500/40"
@@ -70,7 +71,7 @@ function CompatibleModelRow({ modelId, fullModel, copied, onCopy, onDeleteAlias,
);
}
-export default function CompatibleModelsSection({ providerStorageAlias, providerDisplayAlias, modelAliases, copied, onCopy, onSetAlias, onDeleteAlias, connections, isAnthropic }) {
+export default function CompatibleModelsSection({ providerStorageAlias, providerDisplayAlias, modelAliases, customModels, copied, onCopy, onDeleteAlias, onAddCustomModel, onDeleteCustomModel, connections, isAnthropic }) {
const [newModel, setNewModel] = useState("");
const [adding, setAdding] = useState(false);
const [importing, setImporting] = useState(false);
@@ -95,44 +96,24 @@ export default function CompatibleModelsSection({ providerStorageAlias, provider
}
};
- const providerAliases = Object.entries(modelAliases).filter(
- ([, model]) => model.startsWith(`${providerStorageAlias}/`)
- );
-
- const allModels = providerAliases.map(([alias, fullModel]) => ({
- modelId: fullModel.replace(`${providerStorageAlias}/`, ""),
- fullModel,
- alias,
- }));
-
- const generateDefaultAlias = (modelId) => {
- const parts = modelId.split("/");
- return parts[parts.length - 1];
- };
-
- const resolveAlias = (modelId) => {
- const fullModel = `${providerStorageAlias}/${modelId}`;
- // Skip if this exact model already has an alias
- if (Object.values(modelAliases).includes(fullModel)) return null;
- const baseAlias = generateDefaultAlias(modelId);
- if (!modelAliases[baseAlias]) return baseAlias;
- const prefixedAlias = `${providerDisplayAlias}-${baseAlias}`;
- if (!modelAliases[prefixedAlias]) return prefixedAlias;
- return null;
- };
+ const allModels = getProviderCustomModelRows({
+ customModels,
+ modelAliases,
+ providerAlias: providerStorageAlias,
+ type: "llm",
+ });
const handleAdd = async () => {
if (!newModel.trim() || adding) return;
const modelId = newModel.trim();
- const resolvedAlias = resolveAlias(modelId);
- if (!resolvedAlias) {
- alert("All suggested aliases already exist. Please choose a different model or remove conflicting aliases.");
+ if (allModels.some((model) => model.id === modelId)) {
+ alert("Model already exists for this provider.");
return;
}
setAdding(true);
try {
- await onSetAlias(modelId, resolvedAlias, providerStorageAlias);
+ await onAddCustomModel(modelId);
setNewModel("");
} catch (error) {
console.log("Error adding model:", error);
@@ -163,9 +144,8 @@ export default function CompatibleModelsSection({ providerStorageAlias, provider
for (const model of models) {
const modelId = model.id || model.name || model.model;
if (!modelId) continue;
- const resolvedAlias = resolveAlias(modelId);
- if (!resolvedAlias) continue;
- await onSetAlias(modelId, resolvedAlias, providerStorageAlias);
+ if (allModels.some((entry) => entry.id === modelId)) continue;
+ await onAddCustomModel(modelId);
importedCount += 1;
}
if (importedCount === 0) {
@@ -215,17 +195,17 @@ export default function CompatibleModelsSection({ providerStorageAlias, provider
{allModels.length > 0 && (
- {allModels.map(({ modelId, fullModel, alias }) => (
+ {allModels.map(({ id, alias, source }) => (
onDeleteAlias(alias)}
- onTest={connections.length > 0 ? () => handleTestModel(modelId) : undefined}
- testStatus={modelTestResults[modelId]}
- isTesting={testingModelId === modelId}
+ onDeleteAlias={() => source === "custom" ? onDeleteCustomModel(id) : onDeleteAlias(alias)}
+ onTest={connections.length > 0 ? () => handleTestModel(id) : undefined}
+ testStatus={modelTestResults[id]}
+ isTesting={testingModelId === id}
/>
))}
@@ -238,10 +218,12 @@ CompatibleModelsSection.propTypes = {
providerStorageAlias: PropTypes.string.isRequired,
providerDisplayAlias: PropTypes.string.isRequired,
modelAliases: PropTypes.object.isRequired,
+ customModels: PropTypes.arrayOf(PropTypes.object),
copied: PropTypes.string,
onCopy: PropTypes.func.isRequired,
- onSetAlias: PropTypes.func.isRequired,
onDeleteAlias: PropTypes.func.isRequired,
+ onAddCustomModel: PropTypes.func.isRequired,
+ onDeleteCustomModel: PropTypes.func.isRequired,
connections: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string,
isActive: PropTypes.bool,
diff --git a/src/app/(dashboard)/dashboard/providers/[id]/ConnectionRow.js b/src/app/(dashboard)/dashboard/providers/[id]/ConnectionRow.js
index e6e7b611..15096050 100644
--- a/src/app/(dashboard)/dashboard/providers/[id]/ConnectionRow.js
+++ b/src/app/(dashboard)/dashboard/providers/[id]/ConnectionRow.js
@@ -1,11 +1,12 @@
"use client";
import { useState, useEffect, useRef } from "react";
+import { getStatusVariant as getConnectionStatusVariant } from "@/shared/utils/connectionStatus";
import PropTypes from "prop-types";
-import { Badge, Toggle } from "@/shared/components";
+import { Badge, Toggle, Tooltip } from "@/shared/components";
import CooldownTimer from "./CooldownTimer";
-export default function ConnectionRow({ connection, proxyPools, isOAuth, isFirst, isLast, onMoveUp, onMoveDown, onToggleActive, onUpdateProxy, onEdit, onDelete, oneByOneStatus = null }) {
+export default function ConnectionRow({ connection, proxyPools, isOAuth, isFirst, isLast, onMoveUp, onMoveDown, onToggleActive, onUpdateProxy, onEdit, onDelete, oneByOneStatus = null, autoPing = null }) {
const [showProxyDropdown, setShowProxyDropdown] = useState(false);
const [updatingProxy, setUpdatingProxy] = useState(false);
const proxyDropdownRef = useRef(null);
@@ -70,10 +71,15 @@ export default function ConnectionRow({ connection, proxyPools, isOAuth, isFirst
const isCookieConnection = rowAuthType === "cookie";
const authIcon = isCookieConnection ? "cookie" : isOAuthConnection ? "lock" : "key";
const authLabel = isOAuthConnection ? "OAuth" : isCookieConnection ? "Cookie" : "API Key";
- const isEmail = (v) => typeof v === "string" && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
- const displayName = isOAuthConnection
- ? (isEmail(connection.email) ? connection.email : (isEmail(connection.name) ? connection.name : (connection.name || connection.email || connection.displayName || "OAuth Account")))
- : (connection.name || connection.email || connection.displayName || "API Key");
+ const displayName = connection.name?.trim()
+ || connection.email?.trim()
+ || connection.displayName?.trim()
+ || (isOAuthConnection ? "OAuth Account" : isCookieConnection ? "Cookie Account" : "API Key");
+ const secondaryDisplayName = connection.name?.trim() && connection.email?.trim() && connection.name.trim() !== connection.email.trim()
+ ? connection.email.trim()
+ : connection.name?.trim() && connection.displayName?.trim() && connection.name.trim() !== connection.displayName.trim()
+ ? connection.displayName.trim()
+ : null;
// Use useState + useEffect for impure Date.now() to avoid calling during render
const [isCooldown, setIsCooldown] = useState(false);
@@ -107,12 +113,7 @@ export default function ConnectionRow({ connection, proxyPools, isOAuth, isFirst
? "active" // Cooldown expired u2192 treat as active
: connection.testStatus;
- const getStatusVariant = () => {
- if (connection.isActive === false) return "default";
- if (effectiveStatus === "active" || effectiveStatus === "success") return "success";
- if (effectiveStatus === "error" || effectiveStatus === "expired" || effectiveStatus === "unavailable") return "error";
- return "default";
- };
+ const getStatusVariant = () => getConnectionStatusVariant(connection.isActive, effectiveStatus);
const getOneByOneVariant = () => {
if (!oneByOneStatus) return "default";
@@ -156,6 +157,9 @@ export default function ConnectionRow({ connection, proxyPools, isOAuth, isFirst
{displayName}
+ {secondaryDisplayName && (
+
{secondaryDisplayName}
+ )}
{connection.isActive === false ? "disabled" : (effectiveStatus || "Unknown")}
@@ -239,6 +243,17 @@ export default function ConnectionRow({ connection, proxyPools, isOAuth, isFirst
)}
)}
+ {autoPing && (
+
+ autoPing.onToggle(!autoPing.on)}
+ className={`flex w-full flex-col items-center rounded px-2 py-1 transition-colors hover:bg-black/5 dark:hover:bg-white/5 ${autoPing.on ? "text-primary" : "text-text-muted hover:text-primary"}`}
+ >
+ bolt
+ Auto-ping
+
+
+ )}
edit
Edit
@@ -292,4 +307,8 @@ ConnectionRow.propTypes = {
state: PropTypes.string,
error: PropTypes.string,
}),
+ autoPing: PropTypes.shape({
+ on: PropTypes.bool,
+ onToggle: PropTypes.func,
+ }),
};
diff --git a/src/app/(dashboard)/dashboard/providers/[id]/ModelRow.js b/src/app/(dashboard)/dashboard/providers/[id]/ModelRow.js
index 207fe012..d5b0359b 100644
--- a/src/app/(dashboard)/dashboard/providers/[id]/ModelRow.js
+++ b/src/app/(dashboard)/dashboard/providers/[id]/ModelRow.js
@@ -1,6 +1,7 @@
import PropTypes from "prop-types";
+import { CapacityBadges } from "@/shared/components";
-export default function ModelRow({ model, fullModel, alias, copied, onCopy, testStatus, isCustom, isFree, onDeleteAlias, onTest, isTesting, onDisable }) {
+export default function ModelRow({ model, fullModel, alias, copied, onCopy, testStatus, isCustom, isFree, onDeleteAlias, onTest, isTesting, onDisable, caps }) {
const borderColor = testStatus === "ok"
? "border-green-500/40"
: testStatus === "error"
@@ -24,7 +25,10 @@ export default function ModelRow({ model, fullModel, alias, copied, onCopy, test
{fullModel}
- {model.name && {model.name} }
+
+ {model.name && {model.name} }
+
{onTest && (
@@ -92,4 +96,5 @@ ModelRow.propTypes = {
onTest: PropTypes.func,
isTesting: PropTypes.bool,
onDisable: PropTypes.func,
+ caps: PropTypes.object,
};
diff --git a/src/app/(dashboard)/dashboard/providers/[id]/PassthroughModelsSection.js b/src/app/(dashboard)/dashboard/providers/[id]/PassthroughModelsSection.js
index a58d34f8..606db9e7 100644
--- a/src/app/(dashboard)/dashboard/providers/[id]/PassthroughModelsSection.js
+++ b/src/app/(dashboard)/dashboard/providers/[id]/PassthroughModelsSection.js
@@ -3,6 +3,7 @@
import { useState } from "react";
import PropTypes from "prop-types";
import { Button } from "@/shared/components";
+import { getProviderCustomModelRows } from "@/shared/utils/providerCustomModels";
function PassthroughModelRow({ modelId, fullModel, copied, onCopy, onDeleteAlias, onTest, testStatus, isTesting }) {
const borderColor = testStatus === "ok"
@@ -86,41 +87,29 @@ PassthroughModelRow.propTypes = {
isTesting: PropTypes.bool,
};
-export default function PassthroughModelsSection({ providerAlias, modelAliases, copied, onCopy, onSetAlias, onDeleteAlias }) {
+export default function PassthroughModelsSection({ providerAlias, modelAliases, customModels, copied, onCopy, onDeleteAlias, onAddCustomModel, onDeleteCustomModel }) {
const [newModel, setNewModel] = useState("");
const [adding, setAdding] = useState(false);
- // Filter aliases for this provider - models are persisted via alias
- const providerAliases = Object.entries(modelAliases).filter(
- ([, model]) => model.startsWith(`${providerAlias}/`)
- );
-
- const allModels = providerAliases.map(([alias, fullModel]) => ({
- modelId: fullModel.replace(`${providerAlias}/`, ""),
- fullModel,
- alias,
- }));
-
- // Generate default alias from modelId (last part after /)
- const generateDefaultAlias = (modelId) => {
- const parts = modelId.split("/");
- return parts[parts.length - 1];
- };
+ const allModels = getProviderCustomModelRows({
+ customModels,
+ modelAliases,
+ providerAlias,
+ type: "llm",
+ });
const handleAdd = async () => {
if (!newModel.trim() || adding) return;
const modelId = newModel.trim();
- const defaultAlias = generateDefaultAlias(modelId);
-
- // Check if alias already exists
- if (modelAliases[defaultAlias]) {
- alert(`Alias "${defaultAlias}" already exists. Please use a different model or edit existing alias.`);
+
+ if (allModels.some((model) => model.id === modelId)) {
+ alert("Model already exists for this provider.");
return;
}
-
+
setAdding(true);
try {
- await onSetAlias(modelId, defaultAlias);
+ await onAddCustomModel(modelId);
setNewModel("");
} catch (error) {
console.log("Error adding model:", error);
@@ -157,14 +146,14 @@ export default function PassthroughModelsSection({ providerAlias, modelAliases,
{/* Models list */}
{allModels.length > 0 && (
- {allModels.map(({ modelId, fullModel, alias }) => (
+ {allModels.map(({ id, fullModel, alias, source }) => (
onDeleteAlias(alias)}
+ onDeleteAlias={() => source === "custom" ? onDeleteCustomModel(id) : onDeleteAlias(alias)}
/>
))}
@@ -176,8 +165,10 @@ export default function PassthroughModelsSection({ providerAlias, modelAliases,
PassthroughModelsSection.propTypes = {
providerAlias: PropTypes.string.isRequired,
modelAliases: PropTypes.object.isRequired,
+ customModels: PropTypes.arrayOf(PropTypes.object),
copied: PropTypes.string,
onCopy: PropTypes.func.isRequired,
- onSetAlias: PropTypes.func.isRequired,
onDeleteAlias: PropTypes.func.isRequired,
+ onAddCustomModel: PropTypes.func.isRequired,
+ onDeleteCustomModel: PropTypes.func.isRequired,
};
diff --git a/src/app/(dashboard)/dashboard/providers/[id]/page.js b/src/app/(dashboard)/dashboard/providers/[id]/page.js
index fd9defc5..673d666c 100644
--- a/src/app/(dashboard)/dashboard/providers/[id]/page.js
+++ b/src/app/(dashboard)/dashboard/providers/[id]/page.js
@@ -6,10 +6,12 @@ import Link from "next/link";
import Image from "next/image";
import { Card, Button, Badge, Input, Modal, CardSkeleton, OAuthModal, KiroOAuthWrapper, CursorAuthModal, IFlowCookieModal, GitLabAuthModal, Toggle, Select, EditConnectionModal, NoAuthProxyCard, ConfirmModal } from "@/shared/components";
import { OAUTH_PROVIDERS, APIKEY_PROVIDERS, FREE_PROVIDERS, FREE_TIER_PROVIDERS, WEB_COOKIE_PROVIDERS, getProviderAlias, isOpenAICompatibleProvider, isAnthropicCompatibleProvider, AI_PROVIDERS, THINKING_CONFIG } from "@/shared/constants/providers";
-import { getModelsByProviderId } from "@/shared/constants/models";
+import { getModelsByProviderId, getModelKind } from "@/shared/constants/models";
import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
+import { useModelCaps } from "@/shared/hooks/useModelCaps";
import { translate } from "@/i18n/runtime";
import { fetchSuggestedModels } from "@/shared/utils/providerModelsFetcher";
+import { getProviderCustomModelRows } from "@/shared/utils/providerCustomModels";
import ModelRow from "./ModelRow";
import PassthroughModelsSection from "./PassthroughModelsSection";
import CompatibleModelsSection from "./CompatibleModelsSection";
@@ -29,6 +31,7 @@ export default function ProviderDetailPage() {
const params = useParams();
const router = useRouter();
const providerId = params.id;
+ const { getCaps } = useModelCaps();
const [connections, setConnections] = useState([]);
const [loading, setLoading] = useState(true);
const [providerNode, setProviderNode] = useState(null);
@@ -43,10 +46,11 @@ export default function ProviderDetailPage() {
const [showBulkProxyModal, setShowBulkProxyModal] = useState(false);
const [selectedConnection, setSelectedConnection] = useState(null);
const [modelAliases, setModelAliases] = useState({});
+ const [customModels, setCustomModels] = useState([]);
const [headerImgError, setHeaderImgError] = useState(false);
const [modelTestResults, setModelTestResults] = useState({});
const [modelsTestError, setModelsTestError] = useState("");
- const [testingModelId, setTestingModelId] = useState(null);
+ const [testingModelIds, setTestingModelIds] = useState(() => new Set());
const [showAddCustomModel, setShowAddCustomModel] = useState(false);
const [selectedConnectionIds, setSelectedConnectionIds] = useState([]);
const [bulkProxyPoolId, setBulkProxyPoolId] = useState("__none__");
@@ -54,6 +58,7 @@ export default function ProviderDetailPage() {
const [providerStrategy, setProviderStrategy] = useState(null);
const [providerStickyLimit, setProviderStickyLimit] = useState("");
const [thinkingMode, setThinkingMode] = useState("auto");
+ const [autoPing, setAutoPing] = useState({ enabled: false, connections: {} });
const [suggestedModels, setSuggestedModels] = useState([]);
const [kiloFreeModels, setKiloFreeModels] = useState([]);
const [disabledModelIds, setDisabledModelIds] = useState([]);
@@ -221,6 +226,18 @@ export default function ProviderDetailPage() {
}
}, []);
+ const fetchCustomModels = useCallback(async () => {
+ try {
+ const res = await fetch("/api/models/custom", { cache: "no-store" });
+ const data = await res.json();
+ if (res.ok) {
+ setCustomModels(data.models || []);
+ }
+ } catch (error) {
+ console.log("Error fetching custom models:", error);
+ }
+ }, []);
+
// Fetch free models from Kilo API for kilocode provider
useEffect(() => {
if (providerId !== "kilocode") return;
@@ -256,6 +273,8 @@ export default function ProviderDetailPage() {
// Load per-provider thinking config
const thinkingCfg = (settingsData.providerThinking || {})[providerId] || {};
setThinkingMode(thinkingCfg.mode || "auto");
+ const apCfg = settingsData.claudeAutoPing || {};
+ setAutoPing({ enabled: apCfg.enabled === true, connections: apCfg.connections || {} });
if (nodesRes.ok) {
let node = (nodesData.nodes || []).find((entry) => entry.id === providerId) || null;
@@ -368,11 +387,29 @@ export default function ProviderDetailPage() {
saveThinkingConfig(mode);
};
+ const saveAutoPing = async (next) => {
+ setAutoPing(next);
+ try {
+ await fetch("/api/settings", {
+ method: "PATCH",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ claudeAutoPing: next }),
+ });
+ } catch (error) {
+ console.log("Error saving auto-ping config:", error);
+ }
+ };
+
+ const handleAutoPingConnection = (connectionId, on) => {
+ saveAutoPing({ ...autoPing, connections: { ...autoPing.connections, [connectionId]: on } });
+ };
+
useEffect(() => {
fetchConnections();
fetchAliases();
+ fetchCustomModels();
fetchDisabledModels();
- }, [fetchConnections, fetchAliases, fetchDisabledModels]);
+ }, [fetchConnections, fetchAliases, fetchCustomModels, fetchDisabledModels]);
// Fetch suggested models from provider's public API (if configured)
useEffect(() => {
@@ -413,6 +450,38 @@ export default function ProviderDetailPage() {
}
};
+ const handleAddCustomModel = async (modelId, type = "llm", providerAliasOverride = providerStorageAlias) => {
+ try {
+ const res = await fetch("/api/models/custom", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ providerAlias: providerAliasOverride, id: modelId, type }),
+ });
+ if (res.ok) {
+ await fetchCustomModels();
+ if (typeof window !== "undefined") window.dispatchEvent(new CustomEvent("customModelChanged"));
+ } else {
+ const data = await res.json();
+ alert(data.error || "Failed to add custom model");
+ }
+ } catch (error) {
+ console.log("Error adding custom model:", error);
+ }
+ };
+
+ const handleDeleteCustomModel = async (modelId, type = "llm", providerAliasOverride = providerStorageAlias) => {
+ try {
+ const params = new URLSearchParams({ providerAlias: providerAliasOverride, id: modelId, type });
+ const res = await fetch(`/api/models/custom?${params}`, { method: "DELETE" });
+ if (res.ok) {
+ await fetchCustomModels();
+ if (typeof window !== "undefined") window.dispatchEvent(new CustomEvent("customModelChanged"));
+ }
+ } catch (error) {
+ console.log("Error deleting custom model:", error);
+ }
+ };
+
// Fetch Qoder model list and automatically add to available models
const handleImportQoderModels = async () => {
if (importingQoderModels) return;
@@ -443,20 +512,14 @@ export default function ProviderDetailPage() {
// Qoder model ID format may be "qoder/auto" or "auto", need to remove prefix
const cleanModelId = modelId.replace(/^qoder\//, "");
- const fullModel = `${providerStorageAlias}/${cleanModelId}`;
-
- // Check if already exists
- if (Object.values(modelAliases).includes(fullModel)) {
+ const alreadyExists = customModels.some(
+ (entry) => entry.providerAlias === providerStorageAlias && entry.id === cleanModelId && (entry.kind || entry.type || "llm") === "llm"
+ ) || Object.values(modelAliases).includes(`${providerStorageAlias}/${cleanModelId}`);
+ if (alreadyExists) {
continue;
}
-
- // Use model ID as alias
- const alias = cleanModelId;
- if (modelAliases[alias]) {
- continue;
- }
-
- await handleSetAlias(cleanModelId, alias, providerStorageAlias);
+
+ await handleAddCustomModel(cleanModelId, "llm", providerStorageAlias);
importedCount += 1;
}
@@ -574,7 +637,7 @@ export default function ProviderDetailPage() {
try {
const res = await fetch(`/api/providers/${id}`, { method: "DELETE" });
if (res.ok) {
- setConnections(connections.filter(c => c.id !== id));
+ setConnections(prev => prev.filter(c => c.id !== id));
}
} catch (error) {
console.log("Error deleting connection:", error);
@@ -583,6 +646,32 @@ export default function ProviderDetailPage() {
});
};
+ const handleBulkDelete = () => {
+ const count = selectedConnectionIds.length;
+ if (count === 0) return;
+ setConfirmState({
+ title: `Delete ${count} Connection${count > 1 ? "s" : ""}`,
+ message: `Delete ${count} connection${count > 1 ? "s" : ""}? This cannot be undone.`,
+ onConfirm: async () => {
+ setConfirmState(null);
+ let failed = 0;
+ const idsToDelete = [...selectedConnectionIds];
+ for (const id of idsToDelete) {
+ try {
+ const res = await fetch(`/api/providers/${id}`, { method: "DELETE" });
+ if (!res.ok) failed += 1;
+ } catch (error) {
+ console.log("Error deleting connection:", error);
+ failed += 1;
+ }
+ }
+ setConnections(prev => prev.filter(c => !idsToDelete.includes(c.id)));
+ setSelectedConnectionIds([]);
+ if (failed > 0) alert(`Deleted ${idsToDelete.length - failed} connection(s), ${failed} failed.`);
+ }
+ });
+ };
+
const handleOAuthSuccess = () => {
fetchConnections();
setShowOAuthModal(false);
@@ -781,6 +870,14 @@ export default function ProviderDetailPage() {
{connections
.map((conn, index) => (
+
+
handleSwapPriority(index, index - 1)}
onMoveDown={() => handleSwapPriority(index, index + 1)}
onToggleActive={(isActive) => handleUpdateConnectionStatus(conn.id, isActive)}
+ autoPing={providerId === "claude" && conn.authType === "oauth" ? {
+ on: autoPing.connections[conn.id] === true,
+ onToggle: (on) => handleAutoPingConnection(conn.id, on),
+ } : null}
onUpdateProxy={async (proxyPoolId) => {
try {
const res = await fetch(`/api/providers/${conn.id}`, {
@@ -874,8 +975,8 @@ export default function ProviderDetailPage() {
);
const handleTestModel = async (modelId) => {
- if (testingModelId) return;
- setTestingModelId(modelId);
+ if (testingModelIds.has(modelId)) return;
+ setTestingModelIds((prev) => new Set(prev).add(modelId));
try {
const res = await fetch("/api/models/test", {
method: "POST",
@@ -889,7 +990,7 @@ export default function ProviderDetailPage() {
setModelTestResults((prev) => ({ ...prev, [modelId]: "error" }));
setModelsTestError("Network error");
} finally {
- setTestingModelId(null);
+ setTestingModelIds((prev) => { const n = new Set(prev); n.delete(modelId); return n; });
}
};
@@ -900,10 +1001,13 @@ export default function ProviderDetailPage() {
providerStorageAlias={providerStorageAlias}
providerDisplayAlias={providerDisplayAlias}
modelAliases={modelAliases}
+ customModels={customModels}
copied={copied}
onCopy={copy}
onSetAlias={handleSetAlias}
onDeleteAlias={handleDeleteAlias}
+ onAddCustomModel={(modelId) => handleAddCustomModel(modelId, "llm", providerStorageAlias)}
+ onDeleteCustomModel={(modelId) => handleDeleteCustomModel(modelId, "llm", providerStorageAlias)}
connections={connections}
isAnthropic={isAnthropicCompatible}
/>
@@ -914,45 +1018,43 @@ export default function ProviderDetailPage() {
const allModels = [
...models,
...kiloFreeModels.filter((fm) => !models.some((m) => m.id === fm.id)),
- ].filter((m) => !m.type || m.type === "llm");
+ ].filter((m) => { const k = getModelKind(m); return !k || k === "llm"; });
const disabledSet = new Set(disabledModelIds);
const displayModels = allModels.filter((m) => !disabledSet.has(m.id));
const disabledDisplayModels = allModels.filter((m) => disabledSet.has(m.id));
- // Custom models added by user (stored as aliases: modelId → providerAlias/modelId)
- const customModels = Object.entries(modelAliases)
- .filter(([alias, fullModel]) => {
- const prefix = `${providerStorageAlias}/`;
- if (!fullModel.startsWith(prefix)) return false;
- const modelId = fullModel.slice(prefix.length);
- // Only show if not already in hardcoded list
- // For passthroughModels, include all aliases (model IDs may contain slashes like "anthropic/claude-3")
- if (providerInfo.passthroughModels) return !models.some((m) => m.id === modelId);
- return !models.some((m) => m.id === modelId) && alias === modelId;
- })
- .map(([alias, fullModel]) => ({
- id: fullModel.slice(`${providerStorageAlias}/`.length),
- alias,
- fullModel,
- }));
+ const customModelRows = getProviderCustomModelRows({
+ customModels,
+ modelAliases,
+ providerAlias: providerStorageAlias,
+ builtInModels: models,
+ type: "llm",
+ });
return (
{/* Custom models first */}
- {customModels.map((model) => (
+ {customModelRows.map((model) => (
{}}
- onDeleteAlias={() => handleDeleteAlias(model.alias)}
+ onDeleteAlias={() => {
+ if (model.source === "custom") {
+ handleDeleteCustomModel(model.id, "llm", providerStorageAlias);
+ } else {
+ handleDeleteAlias(model.alias);
+ }
+ }}
testStatus={modelTestResults[model.id]}
onTest={connections.length > 0 || isFreeNoAuth ? () => handleTestModel(model.id) : undefined}
- isTesting={testingModelId === model.id}
+ isTesting={testingModelIds.has(model.id)}
isCustom
isFree={false}
+ caps={getCaps(`${providerId}/${model.id}`)}
/>
))}
@@ -974,9 +1076,10 @@ export default function ProviderDetailPage() {
onDeleteAlias={() => handleDeleteAlias(existingAlias)}
testStatus={modelTestResults[model.id]}
onTest={connections.length > 0 || isFreeNoAuth ? () => handleTestModel(model.id) : undefined}
- isTesting={testingModelId === model.id}
+ isTesting={testingModelIds.has(model.id)}
isFree={model.isFree}
onDisable={() => handleDisableModel(model.id)}
+ caps={getCaps(`${providerId}/${model.id}`)}
/>
);
})}
@@ -1006,7 +1109,10 @@ export default function ProviderDetailPage() {
{/* Suggested models from provider API — show only models not yet added */}
{suggestedModels.length > 0 && (() => {
- const addedFullModels = new Set(Object.values(modelAliases));
+ const addedFullModels = new Set([
+ ...Object.values(modelAliases),
+ ...customModelRows.map((model) => model.fullModel),
+ ]);
const hardcodedIds = new Set(models.map((m) => m.id));
const notAdded = suggestedModels.filter(
(m) => !addedFullModels.has(`${providerStorageAlias}/${m.id}`) && !hardcodedIds.has(m.id)
@@ -1020,8 +1126,7 @@ export default function ProviderDetailPage() {
{
- const alias = m.id.split("/").pop();
- await handleSetAlias(m.id, alias, providerStorageAlias);
+ await handleAddCustomModel(m.id, "llm", providerStorageAlias);
}}
className="flex items-center gap-1 px-2.5 py-1.5 rounded-lg border border-black/10 dark:border-white/10 text-xs text-text-muted hover:text-primary hover:border-primary/40 hover:bg-primary/5 transition-colors"
title={`${m.name} · ${(m.contextLength / 1000).toFixed(0)}k ctx`}
@@ -1248,6 +1353,16 @@ export default function ProviderDetailPage() {
)}
{connections.length > 0 && (
<>
+ {selectedConnectionIds.length > 0 && (
+
+ Delete Selected ({selectedConnectionIds.length})
+
+ )}
)}
+ {connections.length > 0 && (
+
+
+
+
+ )}
{connectionsList}
{!isCompatible && (
@@ -1449,7 +1577,7 @@ export default function ProviderDetailPage() {
const allIds = [
...models,
...kiloFreeModels.filter((fm) => !models.some((m) => m.id === fm.id)),
- ].filter((m) => !m.type || m.type === "llm").map((m) => m.id);
+ ].filter((m) => { const k = getModelKind(m); return !k || k === "llm"; }).map((m) => m.id);
const activeIds = allIds.filter((id) => !disabledModelIds.includes(id));
return (
@@ -1552,11 +1680,7 @@ export default function ProviderDetailPage() {
providerAlias={providerStorageAlias}
providerDisplayAlias={providerDisplayAlias}
onSave={async (modelId) => {
- // For passthrough providers (OpenRouter), use last segment as alias to avoid slash conflicts
- const alias = providerInfo?.passthroughModels
- ? modelId.split("/").pop()
- : modelId;
- await handleSetAlias(modelId, alias, providerStorageAlias);
+ await handleAddCustomModel(modelId, "llm", providerStorageAlias);
setShowAddCustomModel(false);
}}
onClose={() => setShowAddCustomModel(false)}
diff --git a/src/app/(dashboard)/dashboard/providers/[id]/page.new.js b/src/app/(dashboard)/dashboard/providers/[id]/page.new.js
deleted file mode 100644
index 16f4a368..00000000
--- a/src/app/(dashboard)/dashboard/providers/[id]/page.new.js
+++ /dev/null
@@ -1,1724 +0,0 @@
-"use client";
-
-import { useState, useEffect, useCallback, useMemo } from "react";
-import PropTypes from "prop-types";
-import { useParams, useRouter } from "next/navigation";
-import Link from "next/link";
-import Image from "next/image";
-import { Card, Button, Badge, Input, Modal, CardSkeleton, OAuthModal, KiroOAuthWrapper, CursorAuthModal, Toggle, Select } from "@/shared/components";
-import { OAUTH_PROVIDERS, APIKEY_PROVIDERS, FREE_PROVIDERS, getProviderAlias, isOpenAICompatibleProvider, isAnthropicCompatibleProvider } from "@/shared/constants/providers";
-import { getModelsByProviderId } from "@/shared/constants/models";
-import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
-
-export default function ProviderDetailPage() {
- const params = useParams();
- const router = useRouter();
- const providerId = params.id;
- const [connections, setConnections] = useState([]);
- const [loading, setLoading] = useState(true);
- const [providerNode, setProviderNode] = useState(null);
- const [showOAuthModal, setShowOAuthModal] = useState(false);
- const [showAddApiKeyModal, setShowAddApiKeyModal] = useState(false);
- const [showEditModal, setShowEditModal] = useState(false);
- const [showEditNodeModal, setShowEditNodeModal] = useState(false);
- const [selectedConnection, setSelectedConnection] = useState(null);
- const [modelAliases, setModelAliases] = useState({});
- const [remoteModels, setRemoteModels] = useState([]);
- const [loadingRemoteModels, setLoadingRemoteModels] = useState(false);
- const [selectedModelIds, setSelectedModelIds] = useState([]);
- const [savingSelectedModels, setSavingSelectedModels] = useState(false);
- const [modelSearchQuery, setModelSearchQuery] = useState("");
- const [showSelectedOnly, setShowSelectedOnly] = useState(false);
- const [headerImgError, setHeaderImgError] = useState(false);
- const { copied, copy } = useCopyToClipboard();
-
- const providerInfo = providerNode
- ? {
- id: providerNode.id,
- name: providerNode.name || (providerNode.type === "anthropic-compatible" ? "Anthropic Compatible" : "OpenAI Compatible"),
- color: providerNode.type === "anthropic-compatible" ? "#D97757" : "#10A37F",
- textIcon: providerNode.type === "anthropic-compatible" ? "AC" : "OC",
- apiType: providerNode.apiType,
- baseUrl: providerNode.baseUrl,
- type: providerNode.type,
- }
- : (OAUTH_PROVIDERS[providerId] || APIKEY_PROVIDERS[providerId] || FREE_PROVIDERS[providerId]);
- const isOAuth = !!OAUTH_PROVIDERS[providerId] || !!FREE_PROVIDERS[providerId];
- const models = useMemo(() => getModelsByProviderId(providerId), [providerId]);
- const providerAlias = getProviderAlias(providerId);
-
- const isOpenAICompatible = isOpenAICompatibleProvider(providerId);
- const isAnthropicCompatible = isAnthropicCompatibleProvider(providerId);
- const isCompatible = isOpenAICompatible || isAnthropicCompatible;
-
- const providerStorageAlias = isCompatible ? providerId : providerAlias;
- const providerDisplayAlias = isCompatible
- ? (providerNode?.prefix || providerId)
- : providerAlias;
- const activeConnection = connections.find((conn) => conn.isActive !== false) || null;
- const allProviderModels = models.length > 0 ? models : remoteModels;
- const allProviderModelIds = useMemo(
- () => allProviderModels.map((model) => model.id),
- [allProviderModels]
- );
- const savedEnabledModels = useMemo(() => {
- const enabled = activeConnection?.providerSpecificData?.enabledModels;
- return Array.isArray(enabled)
- ? enabled.filter((modelId) => allProviderModelIds.includes(modelId))
- : [];
- }, [activeConnection?.providerSpecificData?.enabledModels, allProviderModelIds]);
- const savedEnabledModelsKey = useMemo(
- () => savedEnabledModels.join("|"),
- [savedEnabledModels]
- );
-
- // Define callbacks BEFORE the useEffect that uses them
- const fetchAliases = useCallback(async () => {
- try {
- const res = await fetch("/api/models/alias");
- const data = await res.json();
- if (res.ok) {
- setModelAliases(data.aliases || {});
- }
- } catch (error) {
- console.log("Error fetching aliases:", error);
- }
- }, []);
-
- const fetchConnections = useCallback(async () => {
- try {
- const [connectionsRes, nodesRes] = await Promise.all([
- fetch("/api/providers", { cache: "no-store" }),
- fetch("/api/provider-nodes", { cache: "no-store" }),
- ]);
- const connectionsData = await connectionsRes.json();
- const nodesData = await nodesRes.json();
- if (connectionsRes.ok) {
- const filtered = (connectionsData.connections || []).filter(c => c.provider === providerId);
- setConnections(filtered);
- }
- if (nodesRes.ok) {
- let node = (nodesData.nodes || []).find((entry) => entry.id === providerId) || null;
-
- // Newly created compatible nodes can be briefly unavailable on one worker.
- // Retry a few times before showing "Provider not found".
- if (!node && isCompatible) {
- for (let attempt = 0; attempt < 3; attempt += 1) {
- await new Promise((resolve) => setTimeout(resolve, 150));
- const retryRes = await fetch("/api/provider-nodes", { cache: "no-store" });
- if (!retryRes.ok) continue;
- const retryData = await retryRes.json();
- node = (retryData.nodes || []).find((entry) => entry.id === providerId) || null;
- if (node) break;
- }
- }
-
- setProviderNode(node);
- }
- } catch (error) {
- console.log("Error fetching connections:", error);
- } finally {
- setLoading(false);
- }
- }, [providerId, isCompatible]);
-
- const handleUpdateNode = async (formData) => {
- try {
- const res = await fetch(`/api/provider-nodes/${providerId}`, {
- method: "PUT",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify(formData),
- });
- const data = await res.json();
- if (res.ok) {
- setProviderNode(data.node);
- await fetchConnections();
- setShowEditNodeModal(false);
- }
- } catch (error) {
- console.log("Error updating provider node:", error);
- }
- };
-
- const handleToggleModelSelected = (modelId) => {
- setSelectedModelIds((prev) => (
- prev.includes(modelId)
- ? prev.filter((id) => id !== modelId)
- : [...prev, modelId]
- ));
- };
-
- const handleSaveSelectedModels = async () => {
- if (!activeConnection || savingSelectedModels) return;
- setSavingSelectedModels(true);
- try {
- const res = await fetch(`/api/providers/${activeConnection.id}`, {
- method: "PUT",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({
- providerSpecificData: {
- enabledModels: selectedModelIds,
- },
- }),
- });
-
- if (!res.ok) {
- const data = await res.json();
- alert(data.error || "Failed to save selected models");
- return;
- }
-
- await fetchConnections();
- } catch (error) {
- console.log("Error saving selected models:", error);
- alert("Failed to save selected models");
- } finally {
- setSavingSelectedModels(false);
- }
- };
-
- useEffect(() => {
- fetchConnections();
- fetchAliases();
- }, [fetchConnections, fetchAliases]);
-
- useEffect(() => {
- const nextSelectedModelIds = (isCompatible || providerInfo?.passthroughModels)
- ? []
- : savedEnabledModels;
-
- setSelectedModelIds((prev) => {
- if (
- prev.length === nextSelectedModelIds.length
- && prev.every((modelId, index) => modelId === nextSelectedModelIds[index])
- ) {
- return prev;
- }
- return nextSelectedModelIds;
- });
- }, [
- isCompatible,
- providerInfo?.passthroughModels,
- activeConnection?.id,
- savedEnabledModels
- ]);
-
- const fetchRemoteModels = useCallback(async () => {
- if (isCompatible || providerInfo?.passthroughModels || models.length > 0) {
- setRemoteModels([]);
- return;
- }
-
- if (!activeConnection) {
- setRemoteModels([]);
- return;
- }
-
- setLoadingRemoteModels(true);
- try {
- const res = await fetch(`/api/providers/${activeConnection.id}/models`);
- const data = await res.json();
- if (!res.ok) {
- setRemoteModels([]);
- return;
- }
-
- const parsed = (data.models || [])
- .map((item) => {
- if (typeof item === "string") return { id: item, name: item };
- const modelId = item?.id || item?.name || item?.model;
- if (!modelId) return null;
- return { id: modelId, name: item?.name || modelId };
- })
- .filter(Boolean);
-
- const deduped = Array.from(
- new Map(parsed.map((item) => [item.id, item])).values()
- );
-
- setRemoteModels(deduped);
- } catch (error) {
- console.log("Error fetching remote models:", error);
- setRemoteModels([]);
- } finally {
- setLoadingRemoteModels(false);
- }
- }, [activeConnection, isCompatible, models.length, providerInfo?.passthroughModels]);
-
- useEffect(() => {
- fetchRemoteModels();
- }, [fetchRemoteModels]);
-
- const handleSetAlias = async (modelId, alias, providerAliasOverride = providerAlias) => {
- const fullModel = `${providerAliasOverride}/${modelId}`;
- try {
- const res = await fetch("/api/models/alias", {
- method: "PUT",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ model: fullModel, alias }),
- });
- if (res.ok) {
- await fetchAliases();
- } else {
- const data = await res.json();
- alert(data.error || "Failed to set alias");
- }
- } catch (error) {
- console.log("Error setting alias:", error);
- }
- };
-
- const handleDeleteAlias = async (alias) => {
- try {
- const res = await fetch(`/api/models/alias?alias=${encodeURIComponent(alias)}`, {
- method: "DELETE",
- });
- if (res.ok) {
- await fetchAliases();
- }
- } catch (error) {
- console.log("Error deleting alias:", error);
- }
- };
-
- const handleDelete = async (id) => {
- if (!confirm("Delete this connection?")) return;
- try {
- const res = await fetch(`/api/providers/${id}`, { method: "DELETE" });
- if (res.ok) {
- setConnections(connections.filter(c => c.id !== id));
- }
- } catch (error) {
- console.log("Error deleting connection:", error);
- }
- };
-
- const handleOAuthSuccess = () => {
- fetchConnections();
- setShowOAuthModal(false);
- };
-
- const handleSaveApiKey = async (formData) => {
- try {
- const res = await fetch("/api/providers", {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ provider: providerId, ...formData }),
- });
- if (res.ok) {
- await fetchConnections();
- setShowAddApiKeyModal(false);
- }
- } catch (error) {
- console.log("Error saving connection:", error);
- }
- };
-
- const handleUpdateConnection = async (formData) => {
- try {
- const res = await fetch(`/api/providers/${selectedConnection.id}`, {
- method: "PUT",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify(formData),
- });
- if (res.ok) {
- await fetchConnections();
- setShowEditModal(false);
- }
- } catch (error) {
- console.log("Error updating connection:", error);
- }
- };
-
- const handleUpdateConnectionStatus = async (id, isActive) => {
- try {
- const res = await fetch(`/api/providers/${id}`, {
- method: "PUT",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ isActive }),
- });
- if (res.ok) {
- setConnections(prev => prev.map(c => c.id === id ? { ...c, isActive } : c));
- }
- } catch (error) {
- console.log("Error updating connection status:", error);
- }
- };
-
- const handleSwapPriority = async (conn1, conn2) => {
- if (!conn1 || !conn2) return;
- try {
- // If they have the same priority, we need to ensure the one moving up
- // gets a lower value than the one moving down.
- // We use a small offset which the backend re-indexing will fix.
- let p1 = conn2.priority;
- let p2 = conn1.priority;
-
- if (p1 === p2) {
- // If moving conn1 "up" (index decreases)
- const isConn1MovingUp = connections.indexOf(conn1) > connections.indexOf(conn2);
- if (isConn1MovingUp) {
- p1 = conn2.priority - 0.5;
- } else {
- p1 = conn2.priority + 0.5;
- }
- }
-
- await Promise.all([
- fetch(`/api/providers/${conn1.id}`, {
- method: "PUT",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ priority: p1 }),
- }),
- fetch(`/api/providers/${conn2.id}`, {
- method: "PUT",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ priority: p2 }),
- }),
- ]);
- await fetchConnections();
- } catch (error) {
- console.log("Error swapping priority:", error);
- }
- };
-
- const renderModelsSection = () => {
- if (isCompatible) {
- return (
-
- );
- }
- if (providerInfo.passthroughModels) {
- return (
-
- );
- }
-
- const availableModels = allProviderModels;
- if (availableModels.length === 0) {
- if (loadingRemoteModels) {
- return
Loading models from provider...
;
- }
- return
No models configured
;
- }
-
- const selectedSet = new Set(selectedModelIds);
- const filteredBySelection = showSelectedOnly
- ? availableModels.filter((model) => selectedSet.has(model.id))
- : availableModels;
- const query = modelSearchQuery.trim().toLowerCase();
- const visibleModels = query
- ? filteredBySelection.filter((model) =>
- model.id.toLowerCase().includes(query) ||
- (model.name || "").toLowerCase().includes(query)
- )
- : filteredBySelection;
- const hasSelectionChanges =
- savedEnabledModels.length !== selectedModelIds.length ||
- savedEnabledModels.some((modelId) => !selectedSet.has(modelId));
-
- return (
-
-
-
- setModelSearchQuery("")}
- className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-primary"
- title="Clear search"
- >
- close
-
- )}
-
-
setSelectedModelIds(allProviderModelIds)}
- disabled={allProviderModels.length === 0}
- >
- Select all
-
-
setSelectedModelIds([])}
- >
- Unselect all
-
-
- {savingSelectedModels ? "Saving..." : "Save selection"}
-
-
- Selected only
-
-
-
-
- {selectedModelIds.length > 0
- ? `${selectedModelIds.length} selected`
- : "All models enabled"}
-
-
- {visibleModels.length === 0 ? (
-
No models match your filter.
- ) : (
-
- {visibleModels.map((model) => {
- const fullModel = `${providerStorageAlias}/${model.id}`;
- const oldFormatModel = `${providerId}/${model.id}`;
- const existingAlias = Object.entries(modelAliases).find(
- ([, m]) => m === fullModel || m === oldFormatModel
- )?.[0];
- return (
- handleToggleModelSelected(model.id)}
- onSetAlias={(alias) => handleSetAlias(model.id, alias, providerStorageAlias)}
- onDeleteAlias={() => handleDeleteAlias(existingAlias)}
- />
- );
- })}
-
- )}
-
- );
- };
-
- if (loading) {
- return (
-
-
- );
- }
-
- if (!providerInfo) {
- return (
-
-
Provider not found
-
- Back to Providers
-
-
- );
- }
-
- // Determine icon path: OpenAI Compatible providers use specialized icons
- const getHeaderIconPath = () => {
- if (isOpenAICompatible && providerInfo.apiType) {
- return providerInfo.apiType === "responses" ? "/providers/oai-r.png" : "/providers/oai-cc.png";
- }
- if (isAnthropicCompatible) {
- return "/providers/anthropic-m.png";
- }
- return `/providers/${providerInfo.id}.png`;
- };
-
- return (
-
- {/* Header */}
-
-
-
arrow_back
- Back to Providers
-
-
-
- {headerImgError ? (
-
- {providerInfo.textIcon || providerInfo.id.slice(0, 2).toUpperCase()}
-
- ) : (
- setHeaderImgError(true)}
- />
- )}
-
-
-
{providerInfo.name}
-
- {connections.length} connection{connections.length === 1 ? "" : "s"}
-
-
-
-
-
- {isCompatible && providerNode && (
-
-
-
-
{isAnthropicCompatible ? "Anthropic Compatible Details" : "OpenAI Compatible Details"}
-
- {isAnthropicCompatible ? "Messages API" : (providerNode.apiType === "responses" ? "Responses API" : "Chat Completions")} · {(providerNode.baseUrl || "").replace(/\/$/, "")}/
- {isAnthropicCompatible ? "messages" : (providerNode.apiType === "responses" ? "responses" : "chat/completions")}
-
-
-
- setShowAddApiKeyModal(true)}
- disabled={connections.length > 0}
- >
- Add
-
- setShowEditNodeModal(true)}
- >
- Edit
-
- {
- if (!confirm(`Delete this ${isAnthropicCompatible ? "Anthropic" : "OpenAI"} Compatible node?`)) return;
- try {
- const res = await fetch(`/api/provider-nodes/${providerId}`, { method: "DELETE" });
- if (res.ok) {
- router.push("/dashboard/providers");
- }
- } catch (error) {
- console.log("Error deleting provider node:", error);
- }
- }}
- >
- Delete
-
-
-
- Only one connection is allowed per compatible node. Add another node if you need more connections.
-
- )}
-
- )}
-
- {/* Connections */}
-
-
-
Connections
- {!isCompatible && (
- isOAuth ? setShowOAuthModal(true) : setShowAddApiKeyModal(true)}
- >
- Add
-
- )}
-
-
- {connections.length === 0 ? (
-
-
- {isOAuth ? "lock" : "key"}
-
-
No connections yet
-
Add your first connection to get started
- {!isCompatible && (
-
isOAuth ? setShowOAuthModal(true) : setShowAddApiKeyModal(true)}>
- Add Connection
-
- )}
-
- {connections
- .sort((a, b) => (a.priority || 0) - (b.priority || 0))
- .map((conn, index) => (
- handleSwapPriority(conn, connections[index - 1])}
- onMoveDown={() => handleSwapPriority(conn, connections[index + 1])}
- onToggleActive={(isActive) => handleUpdateConnectionStatus(conn.id, isActive)}
- onEdit={() => {
- setSelectedConnection(conn);
- setShowEditModal(true);
- }}
- onDelete={() => handleDelete(conn.id)}
- />
- ))}
-
- )}
-
-
- {/* Models */}
-
-
- {providerInfo.passthroughModels ? "Model Aliases" : "Available Models"}
-
- {renderModelsSection()}
-
-
-
- {/* Modals */}
- {providerId === "kiro" ? (
-
setShowOAuthModal(false)}
- />
- ) : providerId === "cursor" ? (
- setShowOAuthModal(false)}
- />
- ) : (
- setShowOAuthModal(false)}
- />
- )}
- setShowAddApiKeyModal(false)}
- />
- setShowEditModal(false)}
- />
- {isCompatible && (
- setShowEditNodeModal(false)}
- isAnthropic={isAnthropicCompatible}
- />
- )}
-
- );
-}
-
-function ModelRow({ model, fullModel, alias, selected, onToggleSelect, copied, onCopy }) {
- return (
-
-
-
- {selected ? "check_box" : "check_box_outline_blank"}
-
-
- smart_toy
- {fullModel}
- onCopy(fullModel, `model-${model.id}`)}
- className="p-0.5 hover:bg-sidebar rounded text-text-muted hover:text-primary"
- title="Copy model"
- >
-
- {copied === `model-${model.id}` ? "check" : "content_copy"}
-
-
-
- );
-}
-
-ModelRow.propTypes = {
- model: PropTypes.shape({
- id: PropTypes.string.isRequired,
- }).isRequired,
- fullModel: PropTypes.string.isRequired,
- alias: PropTypes.string,
- selected: PropTypes.bool,
- onToggleSelect: PropTypes.func,
- copied: PropTypes.string,
- onCopy: PropTypes.func.isRequired,
-};
-
-function PassthroughModelsSection({ providerAlias, modelAliases, copied, onCopy, onSetAlias, onDeleteAlias }) {
- const [newModel, setNewModel] = useState("");
- const [adding, setAdding] = useState(false);
-
- // Filter aliases for this provider - models are persisted via alias
- const providerAliases = Object.entries(modelAliases).filter(
- ([, model]) => model.startsWith(`${providerAlias}/`)
- );
-
- const allModels = providerAliases.map(([alias, fullModel]) => ({
- modelId: fullModel.replace(`${providerAlias}/`, ""),
- fullModel,
- alias,
- }));
-
- // Generate default alias from modelId (last part after /)
- const generateDefaultAlias = (modelId) => {
- const parts = modelId.split("/");
- return parts[parts.length - 1];
- };
-
- const handleAdd = async () => {
- if (!newModel.trim() || adding) return;
- const modelId = newModel.trim();
- const defaultAlias = generateDefaultAlias(modelId);
-
- // Check if alias already exists
- if (modelAliases[defaultAlias]) {
- alert(`Alias "${defaultAlias}" already exists. Please use a different model or edit existing alias.`);
- return;
- }
-
- setAdding(true);
- try {
- await onSetAlias(modelId, defaultAlias);
- setNewModel("");
- } catch (error) {
- console.log("Error adding model:", error);
- } finally {
- setAdding(false);
- }
- };
-
- return (
-
-
- OpenRouter supports any model. Add models and create aliases for quick access.
-
-
- {/* Add new model */}
-
-
- Model ID (from OpenRouter)
-
-
- {adding ? "Adding..." : "Add"}
-
-
-
- {/* Models list */}
- {allModels.length > 0 && (
-
- {allModels.map(({ modelId, fullModel, alias }) => (
-
onDeleteAlias(alias)}
- />
- ))}
-
- )}
-
- );
-}
-
-PassthroughModelsSection.propTypes = {
- providerAlias: PropTypes.string.isRequired,
- modelAliases: PropTypes.object.isRequired,
- copied: PropTypes.string,
- onCopy: PropTypes.func.isRequired,
- onSetAlias: PropTypes.func.isRequired,
- onDeleteAlias: PropTypes.func.isRequired,
-};
-
-function PassthroughModelRow({ modelId, fullModel, copied, onCopy, onDeleteAlias }) {
- return (
-
-
smart_toy
-
-
-
{modelId}
-
-
- {fullModel}
- onCopy(fullModel, `model-${modelId}`)}
- className="p-0.5 hover:bg-sidebar rounded text-text-muted hover:text-primary"
- title="Copy model"
- >
-
- {copied === `model-${modelId}` ? "check" : "content_copy"}
-
-
-
-
-
- {/* Delete button */}
-
- delete
-
-
- );
-}
-
-PassthroughModelRow.propTypes = {
- modelId: PropTypes.string.isRequired,
- fullModel: PropTypes.string.isRequired,
- copied: PropTypes.string,
- onCopy: PropTypes.func.isRequired,
- onDeleteAlias: PropTypes.func.isRequired,
-};
-
-function CompatibleModelsSection({ providerStorageAlias, providerDisplayAlias, modelAliases, copied, onCopy, onSetAlias, onDeleteAlias, connections, isAnthropic }) {
- const [newModel, setNewModel] = useState("");
- const [adding, setAdding] = useState(false);
- const [importing, setImporting] = useState(false);
-
- const providerAliases = Object.entries(modelAliases).filter(
- ([, model]) => model.startsWith(`${providerStorageAlias}/`)
- );
-
- const allModels = providerAliases.map(([alias, fullModel]) => ({
- modelId: fullModel.replace(`${providerStorageAlias}/`, ""),
- fullModel,
- alias,
- }));
-
- const generateDefaultAlias = (modelId) => {
- const parts = modelId.split("/");
- return parts[parts.length - 1];
- };
-
- const resolveAlias = (modelId) => {
- const baseAlias = generateDefaultAlias(modelId);
- if (!modelAliases[baseAlias]) return baseAlias;
- const prefixedAlias = `${providerDisplayAlias}-${baseAlias}`;
- if (!modelAliases[prefixedAlias]) return prefixedAlias;
- return null;
- };
-
- const handleAdd = async () => {
- if (!newModel.trim() || adding) return;
- const modelId = newModel.trim();
- const resolvedAlias = resolveAlias(modelId);
- if (!resolvedAlias) {
- alert("All suggested aliases already exist. Please choose a different model or remove conflicting aliases.");
- return;
- }
-
- setAdding(true);
- try {
- await onSetAlias(modelId, resolvedAlias, providerStorageAlias);
- setNewModel("");
- } catch (error) {
- console.log("Error adding model:", error);
- } finally {
- setAdding(false);
- }
- };
-
- const handleImport = async () => {
- if (importing) return;
- const activeConnection = connections.find((conn) => conn.isActive !== false);
- if (!activeConnection) return;
-
- setImporting(true);
- try {
- const res = await fetch(`/api/providers/${activeConnection.id}/models`);
- const data = await res.json();
- if (!res.ok) {
- alert(data.error || "Failed to import models");
- return;
- }
- const models = data.models || [];
- if (models.length === 0) {
- alert("No models returned from /models.");
- return;
- }
- let importedCount = 0;
- for (const model of models) {
- const modelId = model.id || model.name || model.model;
- if (!modelId) continue;
- const resolvedAlias = resolveAlias(modelId);
- if (!resolvedAlias) continue;
- await onSetAlias(modelId, resolvedAlias, providerStorageAlias);
- importedCount += 1;
- }
- if (importedCount === 0) {
- alert("No new models were added.");
- }
- } catch (error) {
- console.log("Error importing models:", error);
- } finally {
- setImporting(false);
- }
- };
-
- const canImport = connections.some((conn) => conn.isActive !== false);
-
- return (
-
-
- Add {isAnthropic ? "Anthropic" : "OpenAI"}-compatible models manually or import them from the /models endpoint.
-
-
-
-
- Model ID
-
-
- {adding ? "Adding..." : "Add"}
-
-
- {importing ? "Importing..." : "Import from /models"}
-
-
-
- {!canImport && (
-
- Add a connection to enable importing models.
-
- )}
-
- {allModels.length > 0 && (
-
- {allModels.map(({ modelId, fullModel, alias }) => (
-
onDeleteAlias(alias)}
- />
- ))}
-
- )}
-
- );
-}
-
-CompatibleModelsSection.propTypes = {
- providerStorageAlias: PropTypes.string.isRequired,
- providerDisplayAlias: PropTypes.string.isRequired,
- modelAliases: PropTypes.object.isRequired,
- copied: PropTypes.string,
- onCopy: PropTypes.func.isRequired,
- onSetAlias: PropTypes.func.isRequired,
- onDeleteAlias: PropTypes.func.isRequired,
- connections: PropTypes.arrayOf(PropTypes.shape({
- id: PropTypes.string,
- isActive: PropTypes.bool,
- })).isRequired,
- isAnthropic: PropTypes.bool,
-};
-
-function CooldownTimer({ until }) {
- const [remaining, setRemaining] = useState("");
-
- useEffect(() => {
- const updateRemaining = () => {
- const diff = new Date(until).getTime() - Date.now();
- if (diff <= 0) {
- setRemaining("");
- return;
- }
- const secs = Math.floor(diff / 1000);
- if (secs < 60) {
- setRemaining(`${secs}s`);
- } else if (secs < 3600) {
- setRemaining(`${Math.floor(secs / 60)}m ${secs % 60}s`);
- } else {
- const hrs = Math.floor(secs / 3600);
- const mins = Math.floor((secs % 3600) / 60);
- setRemaining(`${hrs}h ${mins}m`);
- }
- };
-
- updateRemaining();
- const interval = setInterval(updateRemaining, 1000);
- return () => clearInterval(interval);
- }, [until]);
-
- if (!remaining) return null;
-
- return (
-
- ⏱ {remaining}
-
- );
-}
-
-CooldownTimer.propTypes = {
- until: PropTypes.string.isRequired,
-};
-
-function ConnectionRow({ connection, isOAuth, isFirst, isLast, onMoveUp, onMoveDown, onToggleActive, onEdit, onDelete }) {
- const displayName = isOAuth
- ? connection.name || connection.email || connection.displayName || "OAuth Account"
- : connection.name;
-
- // Use useState + useEffect for impure Date.now() to avoid calling during render
- const [isCooldown, setIsCooldown] = useState(false);
-
- const modelLockUntil = Object.entries(connection)
- .filter(([k]) => k.startsWith("modelLock_"))
- .map(([, v]) => v)
- .filter(v => v && new Date(v).getTime() > Date.now())
- .sort()[0] || null;
-
- useEffect(() => {
- const checkCooldown = () => {
- const until = Object.entries(connection)
- .filter(([k]) => k.startsWith("modelLock_"))
- .map(([, v]) => v)
- .filter(v => v && new Date(v).getTime() > Date.now())
- .sort()[0] || null;
- setIsCooldown(!!until);
- };
-
- checkCooldown();
- const interval = modelLockUntil ? setInterval(checkCooldown, 1000) : null;
- return () => {
- if (interval) clearInterval(interval);
- };
- }, [modelLockUntil]);
-
- // Determine effective status (override unavailable if cooldown expired)
- const effectiveStatus = (connection.testStatus === "unavailable" && !isCooldown)
- ? "active" // Cooldown expired → treat as active
- : connection.testStatus;
-
- const getStatusVariant = () => {
- if (connection.isActive === false) return "default";
- if (effectiveStatus === "active" || effectiveStatus === "success") return "success";
- if (effectiveStatus === "error" || effectiveStatus === "expired" || effectiveStatus === "unavailable") return "error";
- return "default";
- };
-
- return (
-
-
- {/* Priority arrows */}
-
-
- keyboard_arrow_up
-
-
- keyboard_arrow_down
-
-
-
- {isOAuth ? "lock" : "key"}
-
-
-
{displayName}
-
-
- {connection.isActive === false ? "disabled" : (effectiveStatus || "Unknown")}
-
- {isCooldown && connection.isActive !== false &&
- {connection.lastError}
-
- )}
- #{connection.priority}
- {connection.globalPriority && (
- Auto: {connection.globalPriority}
- )}
-
-
-
-
-
-
-
- edit
-
-
- delete
-
-
-
-
- );
-}
-
-ConnectionRow.propTypes = {
- connection: PropTypes.shape({
- id: PropTypes.string,
- name: PropTypes.string,
- email: PropTypes.string,
- displayName: PropTypes.string,
- modelLockUntil: PropTypes.string,
- testStatus: PropTypes.string,
- isActive: PropTypes.bool,
- lastError: PropTypes.string,
- priority: PropTypes.number,
- globalPriority: PropTypes.number,
- }).isRequired,
- isOAuth: PropTypes.bool.isRequired,
- isFirst: PropTypes.bool.isRequired,
- isLast: PropTypes.bool.isRequired,
- onMoveUp: PropTypes.func.isRequired,
- onMoveDown: PropTypes.func.isRequired,
- onToggleActive: PropTypes.func.isRequired,
- onEdit: PropTypes.func.isRequired,
- onDelete: PropTypes.func.isRequired,
-};
-
-function AddApiKeyModal({ isOpen, provider, providerName, isCompatible, isAnthropic, onSave, onClose }) {
- const [formData, setFormData] = useState({
- name: "",
- apiKey: "",
- priority: 1,
- });
- const [validating, setValidating] = useState(false);
- const [validationResult, setValidationResult] = useState(null);
- const [saving, setSaving] = useState(false);
-
- const handleValidate = async () => {
- setValidating(true);
- try {
- const res = await fetch("/api/providers/validate", {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ provider, apiKey: formData.apiKey }),
- });
- const data = await res.json();
- setValidationResult(data.valid ? "success" : "failed");
- } catch {
- setValidationResult("failed");
- } finally {
- setValidating(false);
- }
- };
-
- const handleSubmit = async () => {
- if (!provider || !formData.apiKey) return;
-
- setSaving(true);
- try {
- let isValid = false;
- try {
- setValidating(true);
- setValidationResult(null);
- const res = await fetch("/api/providers/validate", {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ provider, apiKey: formData.apiKey }),
- });
- const data = await res.json();
- isValid = !!data.valid;
- setValidationResult(isValid ? "success" : "failed");
- } catch {
- setValidationResult("failed");
- } finally {
- setValidating(false);
- }
-
- await onSave({
- name: formData.name,
- apiKey: formData.apiKey,
- priority: formData.priority,
- testStatus: isValid ? "active" : "unknown",
- });
- } finally {
- setSaving(false);
- }
- };
-
- if (!provider) return null;
-
- return (
-
-
-
setFormData({ ...formData, name: e.target.value })}
- placeholder="Production Key"
- />
-
-
setFormData({ ...formData, apiKey: e.target.value })}
- className="flex-1"
- />
-
-
- {validating ? "Checking..." : "Check"}
-
-
-
- {validationResult && (
-
- {validationResult === "success" ? "Valid" : "Invalid"}
-
- )}
- {isCompatible && (
-
- {isAnthropic
- ? `Validation checks ${providerName || "Anthropic Compatible"} by verifying the API key.`
- : `Validation checks ${providerName || "OpenAI Compatible"} via /models on your base URL.`
- }
-
- )}
-
setFormData({ ...formData, priority: Number.parseInt(e.target.value) || 1 })}
- />
-
-
- {saving ? "Saving..." : "Save"}
-
-
- Cancel
-
-
-
- );
-}
-
-AddApiKeyModal.propTypes = {
- isOpen: PropTypes.bool.isRequired,
- provider: PropTypes.string,
- providerName: PropTypes.string,
- isCompatible: PropTypes.bool,
- isAnthropic: PropTypes.bool,
- onSave: PropTypes.func.isRequired,
- onClose: PropTypes.func.isRequired,
-};
-
-function EditConnectionModal({ isOpen, connection, onSave, onClose }) {
- const [formData, setFormData] = useState({
- name: "",
- priority: 1,
- apiKey: "",
- });
- const [testing, setTesting] = useState(false);
- const [testResult, setTestResult] = useState(null);
- const [validating, setValidating] = useState(false);
- const [validationResult, setValidationResult] = useState(null);
- const [saving, setSaving] = useState(false);
-
- useEffect(() => {
- if (connection) {
- setFormData({
- name: connection.name || "",
- priority: connection.priority || 1,
- apiKey: "",
- });
- setTestResult(null);
- setValidationResult(null);
- }
- }, [connection]);
-
- const handleTest = async () => {
- if (!connection?.provider) return;
- setTesting(true);
- setTestResult(null);
- try {
- const res = await fetch(`/api/providers/${connection.id}/test`, { method: "POST" });
- const data = await res.json();
- setTestResult(data.valid ? "success" : "failed");
- } catch {
- setTestResult("failed");
- } finally {
- setTesting(false);
- }
- };
-
- const handleValidate = async () => {
- if (!connection?.provider || !formData.apiKey) return;
- setValidating(true);
- setValidationResult(null);
- try {
- const res = await fetch("/api/providers/validate", {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ provider: connection.provider, apiKey: formData.apiKey }),
- });
- const data = await res.json();
- setValidationResult(data.valid ? "success" : "failed");
- } catch {
- setValidationResult("failed");
- } finally {
- setValidating(false);
- }
- };
-
- const handleSubmit = async () => {
- setSaving(true);
- try {
- const updates = { name: formData.name, priority: formData.priority };
- if (!isOAuth && formData.apiKey) {
- updates.apiKey = formData.apiKey;
- let isValid = validationResult === "success";
- if (!isValid) {
- try {
- setValidating(true);
- setValidationResult(null);
- const res = await fetch("/api/providers/validate", {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ provider: connection.provider, apiKey: formData.apiKey }),
- });
- const data = await res.json();
- isValid = !!data.valid;
- setValidationResult(isValid ? "success" : "failed");
- } catch {
- setValidationResult("failed");
- } finally {
- setValidating(false);
- }
- }
- if (isValid) {
- updates.testStatus = "active";
- updates.lastError = null;
- updates.lastErrorAt = null;
- }
- }
- await onSave(updates);
- } finally {
- setSaving(false);
- }
- };
-
- if (!connection) return null;
-
- const isOAuth = connection.authType === "oauth";
- const isCompatible = isOpenAICompatibleProvider(connection.provider) || isAnthropicCompatibleProvider(connection.provider);
-
- return (
-
-
-
setFormData({ ...formData, name: e.target.value })}
- placeholder={isOAuth ? "Account name" : "Production Key"}
- />
- {isOAuth && connection.email && (
-
-
Email
-
{connection.email}
-
- )}
-
setFormData({ ...formData, priority: Number.parseInt(e.target.value) || 1 })}
- />
- {!isOAuth && (
- <>
-
-
setFormData({ ...formData, apiKey: e.target.value })}
- placeholder="Enter new API key"
- hint="Leave blank to keep the current API key."
- className="flex-1"
- />
-
-
- {validating ? "Checking..." : "Check"}
-
-
-
- {validationResult && (
-
- {validationResult === "success" ? "Valid" : "Invalid"}
-
- )}
-
- )}
-
- {/* Test Connection */}
- {!isCompatible && (
-
-
- {testing ? "Testing..." : "Test Connection"}
-
- {testResult && (
-
- {testResult === "success" ? "Valid" : "Failed"}
-
- )}
-
- )}
-
-
- {saving ? "Saving..." : "Save"}
- Cancel
-
-
- );
-}
-
-EditConnectionModal.propTypes = {
- isOpen: PropTypes.bool.isRequired,
- connection: PropTypes.shape({
- id: PropTypes.string,
- name: PropTypes.string,
- email: PropTypes.string,
- priority: PropTypes.number,
- authType: PropTypes.string,
- provider: PropTypes.string,
- }),
- onSave: PropTypes.func.isRequired,
- onClose: PropTypes.func.isRequired,
-};
-
-function EditCompatibleNodeModal({ isOpen, node, onSave, onClose, isAnthropic }) {
- const [formData, setFormData] = useState({
- name: "",
- prefix: "",
- apiType: "chat",
- baseUrl: "https://api.openai.com/v1",
- });
- const [saving, setSaving] = useState(false);
- const [checkKey, setCheckKey] = useState("");
- const [validating, setValidating] = useState(false);
- const [validationResult, setValidationResult] = useState(null);
-
- useEffect(() => {
- if (node) {
- setFormData({
- name: node.name || "",
- prefix: node.prefix || "",
- apiType: node.apiType || "chat",
- baseUrl: node.baseUrl || (isAnthropic ? "https://api.anthropic.com/v1" : "https://api.openai.com/v1"),
- });
- }
- }, [node, isAnthropic]);
-
- const apiTypeOptions = [
- { value: "chat", label: "Chat Completions" },
- { value: "responses", label: "Responses API" },
- ];
-
- const handleSubmit = async () => {
- if (!formData.name.trim() || !formData.prefix.trim() || !formData.baseUrl.trim()) return;
- setSaving(true);
- try {
- const payload = {
- name: formData.name,
- prefix: formData.prefix,
- baseUrl: formData.baseUrl,
- };
- if (!isAnthropic) {
- payload.apiType = formData.apiType;
- }
- await onSave(payload);
- } finally {
- setSaving(false);
- }
- };
-
- const handleValidate = async () => {
- setValidating(true);
- try {
- const res = await fetch("/api/provider-nodes/validate", {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({
- baseUrl: formData.baseUrl,
- apiKey: checkKey,
- type: isAnthropic ? "anthropic-compatible" : "openai-compatible"
- }),
- });
- const data = await res.json();
- setValidationResult(data.valid ? "success" : "failed");
- } catch {
- setValidationResult("failed");
- } finally {
- setValidating(false);
- }
- };
-
- if (!node) return null;
-
- return (
-
-
-
- );
-}
-
-EditCompatibleNodeModal.propTypes = {
- isOpen: PropTypes.bool.isRequired,
- node: PropTypes.shape({
- id: PropTypes.string,
- name: PropTypes.string,
- prefix: PropTypes.string,
- apiType: PropTypes.string,
- baseUrl: PropTypes.string,
- }),
- onSave: PropTypes.func.isRequired,
- onClose: PropTypes.func.isRequired,
- isAnthropic: PropTypes.bool,
-};
diff --git a/src/app/(dashboard)/dashboard/providers/components/AddCompatibleModal.js b/src/app/(dashboard)/dashboard/providers/components/AddCompatibleModal.js
new file mode 100644
index 00000000..d0951d71
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/providers/components/AddCompatibleModal.js
@@ -0,0 +1,221 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Badge, Button, Input, Modal, Select } from "@/shared/components";
+
+const VARIANT_CONFIG = {
+ openai: {
+ title: "Add OpenAI Compatible",
+ type: "openai-compatible",
+ defaultBaseUrl: "https://api.openai.com/v1",
+ namePlaceholder: "OpenAI Compatible (Prod)",
+ prefixPlaceholder: "oc-prod",
+ baseUrlHint: "Use the base URL (ending in /v1) for your OpenAI-compatible API.",
+ modelIdPlaceholder: "e.g. gpt-4, claude-3-opus",
+ errorLabel: "OpenAI Compatible",
+ hasApiType: true,
+ },
+ anthropic: {
+ title: "Add Anthropic Compatible",
+ type: "anthropic-compatible",
+ defaultBaseUrl: "https://api.anthropic.com/v1",
+ namePlaceholder: "Anthropic Compatible (Prod)",
+ prefixPlaceholder: "ac-prod",
+ baseUrlHint: "Use the base URL (ending in /v1) for your Anthropic-compatible API. The system will append /messages.",
+ modelIdPlaceholder: "e.g. claude-3-opus",
+ errorLabel: "Anthropic Compatible",
+ hasApiType: false,
+ },
+};
+
+const API_TYPE_OPTIONS = [
+ { value: "chat", label: "Chat Completions" },
+ { value: "responses", label: "Responses API" },
+];
+
+function AddCompatibleModal({ variant, isOpen, onClose, onCreated }) {
+ const config = VARIANT_CONFIG[variant];
+ const initialFormData = () => ({
+ name: "",
+ prefix: "",
+ ...(config.hasApiType ? { apiType: "chat" } : {}),
+ baseUrl: config.defaultBaseUrl,
+ });
+
+ const [formData, setFormData] = useState(initialFormData);
+ const [submitting, setSubmitting] = useState(false);
+ const [checkKey, setCheckKey] = useState("");
+ const [checkModelId, setCheckModelId] = useState("");
+ const [validating, setValidating] = useState(false);
+ const [validationResult, setValidationResult] = useState(null);
+
+ // openai: reset baseUrl when apiType changes; anthropic: reset checks when opened
+ useEffect(() => {
+ if (config.hasApiType) {
+ setFormData((prev) => ({ ...prev, baseUrl: config.defaultBaseUrl }));
+ } else if (isOpen) {
+ setValidationResult(null);
+ setCheckKey("");
+ setCheckModelId("");
+ }
+ }, [config.hasApiType ? formData.apiType : isOpen]);
+
+ const handleSubmit = async () => {
+ if (!formData.name.trim() || !formData.prefix.trim() || !formData.baseUrl.trim()) return;
+ setSubmitting(true);
+ try {
+ const res = await fetch("/api/provider-nodes", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ name: formData.name,
+ prefix: formData.prefix,
+ ...(config.hasApiType ? { apiType: formData.apiType } : {}),
+ baseUrl: formData.baseUrl,
+ type: config.type,
+ }),
+ });
+ const data = await res.json();
+ if (res.ok) {
+ onCreated(data.node);
+ setFormData(initialFormData());
+ setCheckKey("");
+ setValidationResult(null);
+ }
+ } catch (error) {
+ console.log(`Error creating ${config.errorLabel} node:`, error);
+ } finally {
+ setSubmitting(false);
+ }
+ };
+
+ const handleValidate = async () => {
+ setValidating(true);
+ try {
+ const res = await fetch("/api/provider-nodes/validate", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ baseUrl: formData.baseUrl,
+ apiKey: checkKey,
+ type: config.type,
+ modelId: checkModelId.trim() || undefined,
+ }),
+ });
+ const data = await res.json();
+ setValidationResult(data);
+ } catch {
+ setValidationResult({ valid: false, error: "Network error" });
+ } finally {
+ setValidating(false);
+ }
+ };
+
+ const renderValidationResult = () => {
+ if (!validationResult) return null;
+ const { valid, error, method } = validationResult;
+ if (valid) {
+ return (
+ <>
+
Valid
+ {method === "chat" && (
+
(via inference test)
+ )}
+
+ );
+ }
+ return (
+
+ Invalid
+ {error && {error} }
+
+ );
+ };
+
+ return (
+
+
+
+ );
+}
+
+AddCompatibleModal.propTypes = {
+ variant: PropTypes.oneOf(["openai", "anthropic"]).isRequired,
+ isOpen: PropTypes.bool.isRequired,
+ onClose: PropTypes.func.isRequired,
+ onCreated: PropTypes.func.isRequired,
+};
+
+export default AddCompatibleModal;
diff --git a/src/app/(dashboard)/dashboard/providers/components/ConnectionsCard.js b/src/app/(dashboard)/dashboard/providers/components/ConnectionsCard.js
index b8d196ce..6b178bdd 100644
--- a/src/app/(dashboard)/dashboard/providers/components/ConnectionsCard.js
+++ b/src/app/(dashboard)/dashboard/providers/components/ConnectionsCard.js
@@ -1,6 +1,7 @@
"use client";
import { useState, useEffect, useCallback, useRef } from "react";
+import { getStatusVariant as getConnectionStatusVariant } from "@/shared/utils/connectionStatus";
import PropTypes from "prop-types";
import { Card, Badge, Button, Modal, Select, Toggle, EditConnectionModal, ConfirmModal } from "@/shared/components";
@@ -86,12 +87,7 @@ function ConnectionRow({ connection, proxyPools, isOAuth, isFirst, isLast, onMov
const effectiveStatus = connection.testStatus === "unavailable" && !isCooldown ? "active" : connection.testStatus;
- const getStatusVariant = () => {
- if (connection.isActive === false) return "default";
- if (effectiveStatus === "active" || effectiveStatus === "success") return "success";
- if (effectiveStatus === "error" || effectiveStatus === "expired" || effectiveStatus === "unavailable") return "error";
- return "default";
- };
+ const getStatusVariant = () => getConnectionStatusVariant(connection.isActive, effectiveStatus);
const displayName = isOAuth
? connection.name || connection.email || connection.displayName || "OAuth Account"
diff --git a/src/app/(dashboard)/dashboard/providers/components/ModelsCard.js b/src/app/(dashboard)/dashboard/providers/components/ModelsCard.js
index f55d001f..a6d9533e 100644
--- a/src/app/(dashboard)/dashboard/providers/components/ModelsCard.js
+++ b/src/app/(dashboard)/dashboard/providers/components/ModelsCard.js
@@ -3,7 +3,7 @@
import { useState, useCallback, useEffect } from "react";
import PropTypes from "prop-types";
import { Card, Button, Modal } from "@/shared/components";
-import { getModelsByProviderId } from "@/shared/constants/models";
+import { getModelsByProviderId, getModelKind } from "@/shared/constants/models";
import { getProviderAlias } from "@/shared/constants/providers";
import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
@@ -206,14 +206,14 @@ export default function ModelsCard({ providerId, kindFilter, providerAliasOverri
const builtInModels = kindFilter
? allBuiltIn.filter((m) => {
if (m.kinds) return m.kinds.includes(kindFilter);
- return (m.type || "llm") === kindFilter;
+ return getModelKind(m, "llm") === kindFilter;
})
: allBuiltIn;
// Custom models for this provider + kind, dedupe vs built-in
const myCustomModels = customModels.filter(
(m) => m.providerAlias === providerAlias
- && (m.type || "llm") === effectiveType
+ && getModelKind(m, "llm") === effectiveType
&& !builtInModels.some((b) => b.id === m.id)
);
diff --git a/src/app/(dashboard)/dashboard/providers/page.js b/src/app/(dashboard)/dashboard/providers/page.js
index 8ca94ab8..dd134f33 100644
--- a/src/app/(dashboard)/dashboard/providers/page.js
+++ b/src/app/(dashboard)/dashboard/providers/page.js
@@ -7,9 +7,6 @@ import {
CardSkeleton,
Badge,
Button,
- Input,
- Modal,
- Select,
Toggle,
} from "@/shared/components";
import ProviderIcon from "@/shared/components/ProviderIcon";
@@ -26,6 +23,7 @@ import { getErrorCode, getRelativeTime } from "@/shared/utils";
import { useNotificationStore } from "@/store/notificationStore";
import { useHeaderSearchStore } from "@/store/headerSearchStore";
import ModelAvailabilityBadge from "./components/ModelAvailabilityBadge";
+import AddCompatibleModal from "./components/AddCompatibleModal";
function getStatusDisplay(connected, error, errorCode) {
const parts = [];
@@ -122,6 +120,9 @@ export default function ProvidersPage() {
const sortByPriority = (entries, authType) =>
[...entries].sort(([ka, a], [kb, b]) => {
+ const pa = a.priority ?? 999;
+ const pb = b.priority ?? 999;
+ if (pa !== pb) return pa - pb;
const sa = getProviderStats(ka, authType);
const sb = getProviderStats(kb, authType);
const ca = sa.connected > 0 ? 1 : 0;
@@ -132,6 +133,9 @@ export default function ProvidersPage() {
const sortItemsByPriority = (items, authType) =>
[...items].sort((a, b) => {
+ const pa = a.priority ?? 999;
+ const pb = b.priority ?? 999;
+ if (pa !== pb) return pa - pb;
const sa = getProviderStats(a.id, authType);
const sb = getProviderStats(b.id, authType);
const ca = sa.connected > 0 ? 1 : 0;
@@ -162,8 +166,9 @@ export default function ProvidersPage() {
}, []);
const getProviderStats = (providerId, authType) => {
+ const authTypes = Array.isArray(authType) ? authType : [authType];
const providerConnections = connections.filter(
- (c) => c.provider === providerId && c.authType === authType,
+ (c) => c.provider === providerId && authTypes.includes(c.authType),
);
const getEffectiveStatus = (conn) => {
@@ -204,17 +209,15 @@ export default function ProvidersPage() {
return { connected, error, total, errorCode, errorTime, allDisabled };
};
- // Toggle all connections for a provider on/off
+ // Toggle all connections for a provider on/off. authType may be a single
+ // string or an array (kiro counts oauth + api_key/apikey together).
const handleToggleProvider = async (providerId, authType, newActive) => {
- const providerConns = connections.filter(
- (c) => c.provider === providerId && c.authType === authType,
- );
+ const authTypes = Array.isArray(authType) ? authType : [authType];
+ const matches = (c) =>
+ c.provider === providerId && authTypes.includes(c.authType);
+ const providerConns = connections.filter(matches);
setConnections((prev) =>
- prev.map((c) =>
- c.provider === providerId && c.authType === authType
- ? { ...c, isActive: newActive }
- : c,
- ),
+ prev.map((c) => (matches(c) ? { ...c, isActive: newActive } : c)),
);
await Promise.allSettled(
providerConns.map((c) =>
@@ -273,24 +276,36 @@ export default function ProvidersPage() {
}))
.filter((p) => matchSearch(p.name));
- const oauthEntries = Object.entries(OAUTH_PROVIDERS).filter(
- ([, info]) => !info.hidden && matchSearch(info.name),
+ const oauthEntries = sortByPriority(
+ Object.entries(OAUTH_PROVIDERS).filter(([, info]) => !info.hidden && matchSearch(info.name)),
+ "oauth",
);
- const freeEntries = Object.entries(FREE_PROVIDERS).filter(
- ([, info]) => !info.hidden && matchSearch(info.name),
- );
- const freeTierEntries = Object.entries(FREE_TIER_PROVIDERS).filter(
- ([, info]) => !info.hidden && matchSearch(info.name),
- );
- const apikeyEntries = sortByPriority(
- Object.entries(APIKEY_PROVIDERS).filter(
+ const freeEntries = Object.entries(FREE_PROVIDERS)
+ .filter(([, info]) => !info.hidden && matchSearch(info.name))
+ .sort(([, a], [, b]) => (b.noAuth ? 1 : 0) - (a.noAuth ? 1 : 0));
+ const freeTierEntries = sortByPriority(
+ Object.entries(FREE_TIER_PROVIDERS).filter(
+ ([, info]) =>
+ !info.hidden &&
+ matchSearch(info.name) &&
+ (info.serviceKinds ?? ["llm"]).includes("llm"),
+ ),
+ "freeTier",
+ ).sort(([, a], [, b]) => (b.noAuth ? 1 : 0) - (a.noAuth ? 1 : 0));
+ // API Key: connected providers first, then alphabetical by name
+ const apikeyEntries = Object.entries(APIKEY_PROVIDERS)
+ .filter(
([, info]) =>
!info.hidden &&
(info.serviceKinds ?? ["llm"]).includes("llm") &&
matchSearch(info.name),
- ),
- "apikey",
- );
+ )
+ .sort(([ka, a], [kb, b]) => {
+ const ca = getProviderStats(ka, "apikey").total > 0 ? 0 : 1;
+ const cb = getProviderStats(kb, "apikey").total > 0 ? 0 : 1;
+ if (ca !== cb) return ca - cb;
+ return (a.name || "").localeCompare(b.name || "");
+ });
const isApikeySearching = !!searchQuery.trim();
const visibleApikeyEntries =
isApikeySearching || showAllApikey
@@ -449,16 +464,26 @@ export default function ProvidersPage() {
- {freeEntries.map(([key, info]) => (
-
handleToggleProvider(key, "oauth", active)}
- />
- ))}
+ {freeEntries.map(([key, info]) => {
+ // Kiro accepts both OAuth and api-key connections; count/toggle both
+ // so the card total matches the provider detail page (#kiro-apikey).
+ // Kiro's headless api-key flow persists authType "api_key" (underscore),
+ // while generic apikey providers use "apikey" — include both spellings.
+ const freeAuthTypes =
+ key === "kiro" ? ["oauth", "apikey", "api_key"] : "oauth";
+ return (
+
+ handleToggleProvider(key, freeAuthTypes, active)
+ }
+ />
+ );
+ })}
{freeTierEntries.map(([key, info]) => (
*/}
-
setShowAddCompatibleModal(false)}
onCreated={(node) => {
@@ -552,7 +578,8 @@ export default function ProvidersPage() {
setShowAddCompatibleModal(false);
}}
/>
- setShowAddAnthropicCompatibleModal(false)}
onCreated={(node) => {
@@ -841,383 +868,6 @@ ApiKeyProviderCard.propTypes = {
onToggle: PropTypes.func,
};
-function AddOpenAICompatibleModal({ isOpen, onClose, onCreated }) {
- const [formData, setFormData] = useState({
- name: "",
- prefix: "",
- apiType: "chat",
- baseUrl: "https://api.openai.com/v1",
- });
- const [submitting, setSubmitting] = useState(false);
- const [checkKey, setCheckKey] = useState("");
- const [checkModelId, setCheckModelId] = useState("");
- const [validating, setValidating] = useState(false);
- const [validationResult, setValidationResult] = useState(null);
-
- const apiTypeOptions = [
- { value: "chat", label: "Chat Completions" },
- { value: "responses", label: "Responses API" },
- ];
-
- useEffect(() => {
- const defaultBaseUrl = "https://api.openai.com/v1";
- setFormData((prev) => ({ ...prev, baseUrl: defaultBaseUrl }));
- }, [formData.apiType]);
-
- const handleSubmit = async () => {
- if (
- !formData.name.trim() ||
- !formData.prefix.trim() ||
- !formData.baseUrl.trim()
- )
- return;
- setSubmitting(true);
- try {
- const res = await fetch("/api/provider-nodes", {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({
- name: formData.name,
- prefix: formData.prefix,
- apiType: formData.apiType,
- baseUrl: formData.baseUrl,
- type: "openai-compatible",
- }),
- });
- const data = await res.json();
- if (res.ok) {
- onCreated(data.node);
- setFormData({
- name: "",
- prefix: "",
- apiType: "chat",
- baseUrl: "https://api.openai.com/v1",
- });
- setCheckKey("");
- setValidationResult(null);
- }
- } catch (error) {
- console.log("Error creating OpenAI Compatible node:", error);
- } finally {
- setSubmitting(false);
- }
- };
-
- const handleValidate = async () => {
- setValidating(true);
- try {
- const res = await fetch("/api/provider-nodes/validate", {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({
- baseUrl: formData.baseUrl,
- apiKey: checkKey,
- type: "openai-compatible",
- modelId: checkModelId.trim() || undefined,
- }),
- });
- const data = await res.json();
- setValidationResult(data);
- } catch {
- setValidationResult({ valid: false, error: "Network error" });
- } finally {
- setValidating(false);
- }
- };
-
- // Helper to render validation result
- const renderValidationResult = () => {
- if (!validationResult) return null;
- const { valid, error, method } = validationResult;
-
- if (valid) {
- return (
- <>
- Valid
- {method === "chat" && (
-
- (via inference test)
-
- )}
-
- );
- }
- return (
-
- Invalid
- {error && {error} }
-
- );
- };
-
- return (
-
-
-
- );
-}
-
-AddOpenAICompatibleModal.propTypes = {
- isOpen: PropTypes.bool.isRequired,
- onClose: PropTypes.func.isRequired,
- onCreated: PropTypes.func.isRequired,
-};
-
-function AddAnthropicCompatibleModal({ isOpen, onClose, onCreated }) {
- const [formData, setFormData] = useState({
- name: "",
- prefix: "",
- baseUrl: "https://api.anthropic.com/v1",
- });
- const [submitting, setSubmitting] = useState(false);
- const [checkKey, setCheckKey] = useState("");
- const [checkModelId, setCheckModelId] = useState("");
- const [validating, setValidating] = useState(false);
- const [validationResult, setValidationResult] = useState(null); // { valid, error, method }
-
- useEffect(() => {
- if (isOpen) {
- setValidationResult(null);
- setCheckKey("");
- setCheckModelId("");
- }
- }, [isOpen]);
-
- const handleSubmit = async () => {
- if (
- !formData.name.trim() ||
- !formData.prefix.trim() ||
- !formData.baseUrl.trim()
- )
- return;
- setSubmitting(true);
- try {
- const res = await fetch("/api/provider-nodes", {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({
- name: formData.name,
- prefix: formData.prefix,
- baseUrl: formData.baseUrl,
- type: "anthropic-compatible",
- }),
- });
- const data = await res.json();
- if (res.ok) {
- onCreated(data.node);
- setFormData({
- name: "",
- prefix: "",
- baseUrl: "https://api.anthropic.com/v1",
- });
- setCheckKey("");
- setValidationResult(null);
- }
- } catch (error) {
- console.log("Error creating Anthropic Compatible node:", error);
- } finally {
- setSubmitting(false);
- }
- };
-
- const handleValidate = async () => {
- setValidating(true);
- try {
- const res = await fetch("/api/provider-nodes/validate", {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({
- baseUrl: formData.baseUrl,
- apiKey: checkKey,
- type: "anthropic-compatible",
- modelId: checkModelId.trim() || undefined,
- }),
- });
- const data = await res.json();
- setValidationResult(data);
- } catch {
- setValidationResult({ valid: false, error: "Network error" });
- } finally {
- setValidating(false);
- }
- };
-
- // Helper to render validation result
- const renderValidationResult = () => {
- if (!validationResult) return null;
- const { valid, error, method } = validationResult;
-
- if (valid) {
- return (
- <>
- Valid
- {method === "chat" && (
-
- (via inference test)
-
- )}
-
- );
- }
- return (
-
- Invalid
- {error && {error} }
-
- );
- };
-
- return (
-
-
-
- );
-}
-
-AddAnthropicCompatibleModal.propTypes = {
- isOpen: PropTypes.bool.isRequired,
- onClose: PropTypes.func.isRequired,
- onCreated: PropTypes.func.isRequired,
-};
-
function ProviderTestResultsView({ results }) {
if (results.error && !results.results) {
return (
diff --git a/src/app/(dashboard)/dashboard/token-saver/TokenSaverClient.js b/src/app/(dashboard)/dashboard/token-saver/TokenSaverClient.js
new file mode 100644
index 00000000..637ddced
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/token-saver/TokenSaverClient.js
@@ -0,0 +1,462 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Card, Button, Input, Modal, Toggle } from "@/shared/components";
+import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
+import { getCurrentLocale, onLocaleChange } from "@/i18n/runtime";
+import {
+ WENYAN_LOCALES,
+ CAVEMAN_LEVELS,
+ PONYTAIL_LEVELS,
+} from "../endpoint/endpointConstants";
+
+export default function TokenSaverClient() {
+ const [rtkEnabled, setRtkEnabledState] = useState(true);
+ const [headroomEnabled, setHeadroomEnabled] = useState(false);
+ const [headroomUrl, setHeadroomUrl] = useState("http://localhost:8787");
+ const [headroomStatus, setHeadroomStatus] = useState({
+ installed: false,
+ running: false,
+ python: null,
+ loading: true,
+ });
+ const [showHeadroomInstallModal, setShowHeadroomInstallModal] =
+ useState(false);
+ const [headroomActionLoading, setHeadroomActionLoading] = useState(false);
+ const [headroomActionError, setHeadroomActionError] = useState("");
+ const [cavemanEnabled, setCavemanEnabled] = useState(false);
+ const [cavemanLevel, setCavemanLevel] = useState("full");
+ const [ponytailEnabled, setPonytailEnabled] = useState(false);
+ const [ponytailLevel, setPonytailLevel] = useState("full");
+ const [locale, setLocale] = useState("en");
+
+ const { copied, copy } = useCopyToClipboard();
+
+ useEffect(() => {
+ setLocale(getCurrentLocale());
+ return onLocaleChange(() => setLocale(getCurrentLocale()));
+ }, []);
+
+ const isWenyanLocale = WENYAN_LOCALES.includes(locale);
+ const visibleCavemanLevels = isWenyanLocale
+ ? CAVEMAN_LEVELS
+ : CAVEMAN_LEVELS.filter((lvl) => !lvl.wenyan);
+
+ useEffect(() => {
+ const current = CAVEMAN_LEVELS.find((lvl) => lvl.id === cavemanLevel);
+ if (current?.wenyan && !isWenyanLocale) {
+ setCavemanLevel("ultra");
+ patchSetting({ cavemanLevel: "ultra" });
+ }
+ }, [isWenyanLocale, cavemanLevel]);
+
+ const patchSetting = async (patch) => {
+ try {
+ await fetch("/api/settings", {
+ method: "PATCH",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(patch),
+ });
+ } catch (error) {
+ console.log("Error updating setting:", error);
+ }
+ };
+
+ const handleRtkEnabled = async (value) => {
+ try {
+ const res = await fetch("/api/settings", {
+ method: "PATCH",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ rtkEnabled: value }),
+ });
+ if (res.ok) setRtkEnabledState(value);
+ } catch (error) {
+ console.log("Error updating rtkEnabled:", error);
+ }
+ };
+
+ const handleCavemanEnabled = (value) => {
+ setCavemanEnabled(value);
+ patchSetting({ cavemanEnabled: value });
+ };
+
+ const handleHeadroomEnabled = (value) => {
+ const nextUrl = headroomUrl.trim() || "http://localhost:8787";
+ setHeadroomUrl(nextUrl);
+ setHeadroomEnabled(value);
+ patchSetting({ headroomEnabled: value, headroomUrl: nextUrl });
+ };
+
+ const handleHeadroomUrlBlur = async () => {
+ const next = headroomUrl.trim() || "http://localhost:8787";
+ setHeadroomUrl(next);
+ await patchSetting({ headroomUrl: next });
+ refreshHeadroomStatus();
+ };
+
+ const refreshHeadroomStatus = useCallback(async () => {
+ setHeadroomStatus((s) => ({ ...s, loading: true }));
+ try {
+ const res = await fetch("/api/headroom/status", {
+ headers: { "Cache-Control": "no-store" },
+ });
+ const data = await res.json();
+ setHeadroomStatus({ ...data, loading: false });
+ } catch {
+ setHeadroomStatus({
+ installed: false,
+ running: false,
+ python: null,
+ loading: false,
+ });
+ }
+ }, []);
+
+ const handleHeadroomStart = useCallback(async () => {
+ setHeadroomActionError("");
+ setHeadroomActionLoading(true);
+ try {
+ const res = await fetch("/api/headroom/start", { method: "POST" });
+ const data = await res.json().catch(() => ({}));
+ if (!res.ok) throw new Error(data.error || "Failed to start proxy");
+ await refreshHeadroomStatus();
+ } catch (e) {
+ setHeadroomActionError(e.message);
+ } finally {
+ setHeadroomActionLoading(false);
+ }
+ }, [refreshHeadroomStatus]);
+
+ const handleHeadroomStop = useCallback(async () => {
+ setHeadroomActionLoading(true);
+ try {
+ await fetch("/api/headroom/stop", { method: "POST" });
+ await refreshHeadroomStatus();
+ } finally {
+ setHeadroomActionLoading(false);
+ }
+ }, [refreshHeadroomStatus]);
+
+ const handleCavemanLevel = (level) => {
+ setCavemanLevel(level);
+ patchSetting({ cavemanLevel: level });
+ };
+
+ const handlePonytailEnabled = (value) => {
+ setPonytailEnabled(value);
+ patchSetting({ ponytailEnabled: value });
+ };
+
+ const handlePonytailLevel = (level) => {
+ setPonytailLevel(level);
+ patchSetting({ ponytailLevel: level });
+ };
+
+ useEffect(() => {
+ const loadSettings = async () => {
+ try {
+ const res = await fetch("/api/settings");
+ if (res.ok) {
+ const data = await res.json();
+ setRtkEnabledState(data.rtkEnabled !== false);
+ setHeadroomEnabled(!!data.headroomEnabled);
+ setHeadroomUrl(data.headroomUrl || "http://localhost:8787");
+ setCavemanEnabled(!!data.cavemanEnabled);
+ setCavemanLevel(data.cavemanLevel || "full");
+ setPonytailEnabled(!!data.ponytailEnabled);
+ setPonytailLevel(data.ponytailLevel || "full");
+ refreshHeadroomStatus();
+ }
+ } catch {}
+ };
+ loadSettings();
+ }, [refreshHeadroomStatus]);
+
+ const headroomRunning = !!headroomStatus.running;
+ const headroomStatusLabel = headroomStatus.loading
+ ? "Checking…"
+ : headroomRunning
+ ? "Running"
+ : headroomStatus.localUrl !== false && !headroomStatus.installed
+ ? "Not installed"
+ : headroomStatus.localUrl !== false
+ ? "Stopped"
+ : "External";
+ const headroomLocalUrl = headroomStatus.localUrl !== false;
+ const headroomCanStart = !!headroomStatus.canStart;
+ const headroomManaged =
+ headroomLocalUrl && !!headroomStatus.managedPid;
+
+ return (
+
+
+
+
+
+ bolt
+
+ Token Saver
+
+
+
+
+
+ Compress tool output{" "}
+
+ (RTK)
+
+
+
+ git/grep/ls/tree/logs → 60-90% fewer input tokens
+
+
+
handleRtkEnabled(!rtkEnabled)}
+ />
+
+
+
+
+ Compress context{" "}
+
+ (Headroom)
+
+
+
+ {headroomStatusLabel}
+
+
setShowHeadroomInstallModal(true)}
+ className="text-xs text-primary underline hover:opacity-80"
+ >
+ {headroomRunning ? "Manage" : "Setup"}
+
+
+
+ Compress prompts via /v1/compress before routing to the model
+
+
+
handleHeadroomEnabled(!headroomEnabled)}
+ />
+
+
+
+ Compress LLM output{" "}
+
+ (Caveman)
+
+
+
+ Terse-style system prompt → ~65% fewer output tokens (up to 87%)
+
+
+
+ {cavemanEnabled && (
+
+
+ {visibleCavemanLevels.map((lvl) => (
+ handleCavemanLevel(lvl.id)}
+ className={`px-3 py-1.5 rounded text-xs font-medium border transition-colors ${
+ cavemanLevel === lvl.id
+ ? "bg-primary text-white border-primary"
+ : "bg-transparent border-border text-text-muted hover:bg-surface-2"
+ }`}
+ title={lvl.desc}
+ >
+ {lvl.label}
+
+ ))}
+
+
+ {
+ CAVEMAN_LEVELS.find((lvl) => lvl.id === cavemanLevel)
+ ?.desc
+ }
+
+
+ )}
+
handleCavemanEnabled(!cavemanEnabled)}
+ />
+
+
+
+
+ Lazy senior dev{" "}
+
+ (Ponytail)
+
+
+
+ Bias the model toward minimal code: YAGNI, reuse stdlib,
+ deletion over addition
+
+
+
+ {ponytailEnabled && (
+
+
+ {PONYTAIL_LEVELS.map((lvl) => (
+ handlePonytailLevel(lvl.id)}
+ className={`px-3 py-1.5 rounded text-xs font-medium border transition-colors ${
+ ponytailLevel === lvl.id
+ ? "bg-primary text-white border-primary"
+ : "bg-transparent border-border text-text-muted hover:bg-surface-2"
+ }`}
+ title={lvl.desc}
+ >
+ {lvl.label}
+
+ ))}
+
+
+ {
+ PONYTAIL_LEVELS.find((lvl) => lvl.id === ponytailLevel)
+ ?.desc
+ }
+
+
+ )}
+
handlePonytailEnabled(!ponytailEnabled)}
+ />
+
+
+
+
setShowHeadroomInstallModal(false)}
+ >
+
+
+ Status
+
+ {headroomStatusLabel}
+
+
+
+
Proxy URL
+
setHeadroomUrl(e.target.value)}
+ onBlur={handleHeadroomUrlBlur}
+ placeholder="http://localhost:8787"
+ className="font-mono text-sm"
+ />
+
+ Use a local proxy for Start/Stop, or an external Docker sidecar
+ like http://headroom:8787.
+
+
+ {headroomManaged ? (
+
+ {headroomActionLoading ? "Stopping…" : "Stop Headroom"}
+
+ ) : headroomRunning ? (
+
+ Headroom proxy is reachable. You can enable the token saver.
+
+ ) : headroomCanStart ? (
+
+ {headroomActionLoading ? "Starting…" : "Start Headroom"}
+
+ ) : !headroomLocalUrl ? (
+
+ Start Headroom separately at the configured URL, then recheck.
+
+ ) : !headroomStatus.python ? (
+
+ Python ≥ 3.10 required for local managed mode. Install Python
+ first, or use an external proxy URL.
+
+ ) : (
+
+
Install then click Start:
+
+
+ {`pip install "headroom-ai[proxy]"`}
+
+
+ copy(`pip install "headroom-ai[proxy]"`)
+ }
+ >
+ {copied ? "Copied" : "Copy"}
+
+
+
+ )}
+ {headroomActionError && (
+
{headroomActionError}
+ )}
+
+ refreshHeadroomStatus()}
+ variant="ghost"
+ fullWidth
+ >
+ Recheck
+
+ setShowHeadroomInstallModal(false)}
+ fullWidth
+ >
+ Done
+
+
+
+
:...).
+function kiroRegion(conn) {
+ const r = conn.providerSpecificData?.region;
+ if (r) return r;
+ const arn = conn.providerSpecificData?.profileArn;
+ const seg = typeof arn === "string" ? arn.split(":")[3] : "";
+ return seg || "";
}
-function sortRequestFromExpiringFirst(expiringFirst) {
- return expiringFirst ? "expiring" : "priority";
+function getCodexResetCreditCount(quota) {
+ const value = quota?.raw?.resetCredits?.availableCount;
+ const count = typeof value === "number" ? value : Number(value);
+ return Number.isFinite(count) ? Math.max(0, count) : 0;
}
-function getPageSizeLabel(pageSize, isCustomPageSize) {
- return isCustomPageSize ? `Custom: ${pageSize} / page` : `${pageSize} / page`;
-}
-
-function getConnectionsPaginationSummary(pagination) {
- const { start, end } = getConnectionsPageRange(pagination);
- return `Showing ${start}-${end} of ${pagination.total}`;
-}
-
-function getSafePagination(pagination, fallbackPageSize) {
- return (
- pagination || {
- page: 1,
- pageSize: fallbackPageSize,
- total: 0,
- totalPages: 1,
- }
- );
-}
-
-function getSafeTotals(totals, fallbackTotal = 0) {
- return (
- totals || {
- eligibleConnections: fallbackTotal,
- providerFilteredConnections: fallbackTotal,
- }
- );
-}
-
-function shouldResetPage(previousValue, nextValue) {
- return previousValue !== nextValue;
-}
-
-function getPaginationPageValue(dataPagination, fallbackPage) {
- return dataPagination?.page || fallbackPage;
-}
-
-function getProviderOptions(dataProviderOptions) {
- return dataProviderOptions || [];
-}
-
-async function reconcileConnectionsPage(fetchConnections, targetPage) {
- const nextConnections = await fetchConnections(targetPage);
- return nextConnections;
-}
-
-const QUOTA_CACHE_KEY = "quotaCacheData";
-
-function getQuotaCache() {
- if (typeof window === "undefined") return {};
- try {
- const cached = window.localStorage.getItem(QUOTA_CACHE_KEY);
- return cached ? JSON.parse(cached) : {};
- } catch (error) {
- console.error("Error reading quota cache:", error);
- return {};
- }
-}
-
-function setQuotaCache(connectionId, quotaEntry) {
- if (typeof window === "undefined") return;
- try {
- const cache = getQuotaCache();
- cache[connectionId] = {
- ...quotaEntry,
- cachedAt: new Date().toISOString(),
- };
- window.localStorage.setItem(QUOTA_CACHE_KEY, JSON.stringify(cache));
- } catch (error) {
- console.error("Error writing quota cache:", error);
- }
-}
-
-const REFRESH_INTERVAL_MS = 60000; // 60 seconds
-const DEPLETED_QUOTA_THRESHOLD = 5; // percent
-const AUTO_REFRESH_STORAGE_KEY = "quotaAutoRefresh";
-const ACCOUNT_FILTER_OPTIONS = [
- { value: "all", label: "All accounts" },
- { value: "active", label: "Active" },
- { value: "inactive", label: "Turned off" },
-];
-const QUOTA_SORT_OPTIONS = [
- { value: "default", label: "Default quota order" },
- { value: "remaining-asc", label: "% quota: low to high" },
- { value: "remaining-desc", label: "% quota: high to low" },
-];
-const CONNECTIONS_PAGE_SIZE = 20;
-const ACCOUNT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
-const ACCOUNT_PAGE_SIZE_MAX = 500;
-
export default function ProviderLimits() {
+ const { copied, copy } = useCopyToClipboard();
const [connections, setConnections] = useState([]);
const [quotaData, setQuotaData] = useState({});
const [loading, setLoading] = useState({});
const [errors, setErrors] = useState({});
const [autoRefresh, setAutoRefresh] = useState(true);
+ const [autoPingMap, setAutoPingMap] = useState({});
const [lastUpdated, setLastUpdated] = useState(null);
const [hasHydratedAutoRefresh, setHasHydratedAutoRefresh] = useState(false);
const [refreshingAll, setRefreshingAll] = useState(false);
@@ -233,6 +102,8 @@ export default function ProviderLimits() {
const [connectionsLoading, setConnectionsLoading] = useState(true);
const [deletingId, setDeletingId] = useState(null);
const [togglingId, setTogglingId] = useState(null);
+ const [resettingLimitId, setResettingLimitId] = useState(null);
+ const [resetConfirmState, setResetConfirmState] = useState(null);
const [showEditModal, setShowEditModal] = useState(false);
const [selectedConnection, setSelectedConnection] = useState(null);
const [proxyPools, setProxyPools] = useState([]);
@@ -261,6 +132,7 @@ export default function ProviderLimits() {
const intervalRef = useRef(null);
const countdownRef = useRef(null);
+ const tickCountRef = useRef(0);
const fetchConnections = useCallback(
async (targetPage = page) => {
@@ -390,6 +262,32 @@ export default function ProviderLimits() {
[fetchQuota],
);
+ const handleResetCodexLimit = useCallback(
+ async (connectionId, provider) => {
+ if (provider !== "codex" || resettingLimitId) return;
+
+ setResettingLimitId(connectionId);
+ setErrors((prev) => ({ ...prev, [connectionId]: null }));
+
+ try {
+ const response = await fetch(`/api/usage/${connectionId}/codex-reset-credits`, { method: "POST" });
+ const result = await response.json().catch(() => ({}));
+
+ if (!response.ok) {
+ throw new Error(result.message || result.error || result.code || "Failed to reset Codex limit");
+ }
+
+ await fetchQuota(connectionId, provider);
+ setLastUpdated(new Date());
+ } catch (error) {
+ setErrors((prev) => ({ ...prev, [connectionId]: error.message || "Failed to reset Codex limit" }));
+ } finally {
+ setResettingLimitId(null);
+ }
+ },
+ [fetchQuota, resettingLimitId],
+ );
+
const handleDeleteConnection = useCallback(
async (id) => {
if (!confirm("Delete this connection?")) return;
@@ -505,12 +403,18 @@ export default function ProviderLimits() {
};
}, []);
- const refreshAll = useCallback(async () => {
+ const refreshAll = useCallback(async (force = false) => {
if (refreshingAll) return;
setRefreshingAll(true);
setCountdown(60);
+ // Throttle Claude: poll its quota every Nth auto-tick (manual force bypasses)
+ const tick = (tickCountRef.current += 1);
+ const claudeEvery = Math.round(CLAUDE_REFRESH_INTERVAL_MS / REFRESH_INTERVAL_MS);
+ const shouldFetch = (conn) =>
+ force || conn.provider !== "claude" || tick % claudeEvery === 0;
+
try {
const visibleConnections = await fetchConnections(page);
@@ -523,7 +427,9 @@ export default function ProviderLimits() {
);
await Promise.all(
- visibleConnections.map((conn) => fetchQuota(conn.id, conn.provider)),
+ visibleConnections
+ .filter(shouldFetch)
+ .map((conn) => fetchQuota(conn.id, conn.provider)),
);
setLastUpdated(new Date());
@@ -571,6 +477,31 @@ export default function ProviderLimits() {
window.localStorage.setItem(AUTO_REFRESH_STORAGE_KEY, String(autoRefresh));
}, [autoRefresh, hasHydratedAutoRefresh]);
+ // Load Claude auto-ping per-connection map
+ useEffect(() => {
+ fetch("/api/settings", { cache: "no-store" })
+ .then((r) => (r.ok ? r.json() : {}))
+ .then((s) => setAutoPingMap(s?.claudeAutoPing?.connections || {}))
+ .catch(() => {});
+ }, []);
+
+ const toggleAutoPing = useCallback(async (connectionId, on) => {
+ const next = { ...autoPingMap, [connectionId]: on };
+ setAutoPingMap(next);
+ try {
+ const r = await fetch("/api/settings", { cache: "no-store" });
+ const s = r.ok ? await r.json() : {};
+ const cfg = { ...(s.claudeAutoPing || {}), connections: next };
+ await fetch("/api/settings", {
+ method: "PATCH",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ claudeAutoPing: cfg }),
+ });
+ } catch {
+ setAutoPingMap(autoPingMap);
+ }
+ }, [autoPingMap]);
+
// Auto-refresh interval
useEffect(() => {
if (!hasHydratedAutoRefresh || !autoRefresh) {
@@ -618,7 +549,7 @@ export default function ProviderLimits() {
}
} else if (autoRefresh && hasHydratedAutoRefresh) {
// Resume auto-refresh when tab becomes visible
- intervalRef.current = setInterval(refreshAll, REFRESH_INTERVAL_MS);
+ intervalRef.current = setInterval(() => refreshAll(), REFRESH_INTERVAL_MS);
countdownRef.current = setInterval(() => {
setCountdown((prev) => (prev <= 1 ? 60 : prev - 1));
}, 1000);
@@ -941,10 +872,11 @@ export default function ProviderLimits() {
)}
+
{/* Refresh all button */}
refreshAll(true)}
disabled={refreshingAll}
className="flex h-8 shrink-0 items-center gap-1 rounded-lg border border-black/10 px-2 text-xs text-text-primary transition-colors hover:bg-black/5 dark:border-white/10 dark:hover:bg-white/5 disabled:opacity-50"
title="Refresh all"
@@ -974,7 +906,10 @@ export default function ProviderLimits() {
// Use table layout for all providers
const isInactive = conn.isActive === false;
- const rowBusy = deletingId === conn.id || togglingId === conn.id;
+ const isCodex = conn.provider === "codex";
+ const resetCreditCount = getCodexResetCreditCount(quota);
+ const isResettingLimit = resettingLimitId === conn.id;
+ const rowBusy = deletingId === conn.id || togglingId === conn.id || isResettingLimit;
return (
) : null}
+ {getConnectionSecondaryLabel(conn) ? (
+
+ {getConnectionSecondaryLabel(conn)}
+
+ ) : null}
+ {isCodex && (
+
+ Reset eligible: {resetCreditCount}
+
+ )}
+ {conn.provider === "kiro" && (
+
+
+ {kiroMethodLabel(conn)}
+
+ {kiroRegion(conn) && (
+
+ {kiroRegion(conn)}
+
+ )}
+
+ {isInactive ? "disabled" : conn.testStatus || "unknown"}
+
+ {conn.providerSpecificData?.profileArn && (
+ copy(conn.providerSpecificData.profileArn, conn.id)}
+ title={conn.providerSpecificData.profileArn}
+ className="inline-flex max-w-full items-center gap-1 rounded-full border border-border-subtle px-2 py-0.5 text-[10px] text-text-muted transition-colors hover:text-primary"
+ >
+
+ {copied === conn.id ? "check" : "content_copy"}
+
+
+ {conn.providerSpecificData.profileArn}
+
+
+ )}
+
+ )}
-
refreshProvider(conn.id, conn.provider)}
- disabled={isLoading || rowBusy}
- aria-label="Refresh quota"
- className="p-1.5 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 transition-colors disabled:opacity-50"
- title="Refresh quota"
- >
-
+ 0
+ ? "border-primary/30 bg-primary/5 text-primary"
+ : "border-black/10 bg-black/[0.02] text-text-muted dark:border-white/10 dark:bg-white/[0.03]"
+ }`}
+ >
+ restart_alt
+ {resetCreditCount}
+
+
+ )}
+ {isCodex && resetCreditCount > 0 && (
+
+ setResetConfirmState({ connection: conn, resetCreditCount })}
+ disabled={isLoading || rowBusy}
+ className="flex h-8 items-center gap-1 rounded-lg border border-primary/30 px-2 text-[11px] text-primary transition-colors hover:bg-primary/10 disabled:opacity-50"
+ >
+
+ {isResettingLimit ? "progress_activity" : "bolt"}
+
+ Reset limit
+
+
+ )}
+ {conn.provider === "claude" && conn.authType === "oauth" && (
+
+ toggleAutoPing(conn.id, !(autoPingMap[conn.id] === true))}
+ aria-label="Toggle auto-ping"
+ className={`flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-black/5 dark:hover:bg-white/5 ${autoPingMap[conn.id] === true ? "text-primary" : "text-text-muted"}`}
+ >
+ bolt
+
+
+ )}
+
+ refreshProvider(conn.id, conn.provider)}
+ disabled={isLoading || rowBusy}
+ aria-label="Refresh quota"
+ className="flex h-8 w-8 items-center justify-center rounded-lg hover:bg-black/5 dark:hover:bg-white/5 transition-colors disabled:opacity-50"
>
- refresh
-
-
-
{
- setSelectedConnection(conn);
- setShowEditModal(true);
- }}
- disabled={rowBusy}
- aria-label="Edit connection"
- className="p-1.5 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 text-text-muted hover:text-primary transition-colors disabled:opacity-50"
- title="Edit connection"
- >
-
- edit
-
-
-
handleDeleteConnection(conn.id)}
- disabled={rowBusy}
- aria-label="Delete connection"
- className="p-1.5 rounded-lg hover:bg-red-500/10 text-red-500 transition-colors disabled:opacity-50"
- title="Delete connection"
- >
-
+ refresh
+
+
+
+
+ {
+ setSelectedConnection(conn);
+ setShowEditModal(true);
+ }}
+ disabled={rowBusy}
+ aria-label="Edit connection"
+ className="flex h-8 w-8 items-center justify-center rounded-lg hover:bg-black/5 dark:hover:bg-white/5 text-text-muted hover:text-primary transition-colors disabled:opacity-50"
>
- delete
-
-
+
+ edit
+
+
+
+
+ handleDeleteConnection(conn.id)}
+ disabled={rowBusy}
+ aria-label="Delete connection"
+ className="flex h-8 w-8 items-center justify-center rounded-lg hover:bg-red-500/10 text-red-500 transition-colors disabled:opacity-50"
+ >
+
+ delete
+
+
+
+
{
+ if (!resettingLimitId) setResetConfirmState(null);
+ }}
+ onConfirm={async () => {
+ const connection = resetConfirmState?.connection;
+ if (!connection) return;
+ await handleResetCodexLimit(connection.id, connection.provider);
+ setResetConfirmState(null);
+ }}
+ title="Reset Codex limit?"
+ message={`Use 1 Codex reset credit for ${getConnectionLabel(resetConfirmState?.connection || {}) || "this account"}. This cannot be undone. Remaining credits: ${resetConfirmState?.resetCreditCount ?? 0}.`}
+ confirmText="Reset limit"
+ cancelText="Cancel"
+ variant="danger"
+ loading={Boolean(resettingLimitId)}
+ />
+
{
+ const remainingA = getConnectionQuotaRemaining(a, quotaData);
+ const remainingB = getConnectionQuotaRemaining(b, quotaData);
+ const remainingDiff =
+ quotaSortMode === "remaining-asc"
+ ? remainingA - remainingB
+ : remainingB - remainingA;
+ if (remainingDiff !== 0) return remainingDiff;
+ return (getConnectionLabel(a) || "").localeCompare(
+ getConnectionLabel(b) || "",
+ );
+ });
+ }
+
+ if (!expiringFirst) return connections;
+
+ const getEarliestResetTime = (connection) => {
+ const resetTimes = (quotaData[connection.id]?.quotas || [])
+ .map((quota) =>
+ quota.resetAt
+ ? new Date(quota.resetAt).getTime()
+ : Number.POSITIVE_INFINITY,
+ )
+ .filter((time) => Number.isFinite(time));
+ return resetTimes.length > 0
+ ? Math.min(...resetTimes)
+ : Number.POSITIVE_INFINITY;
+ };
+
+ return [...connections].sort((a, b) => {
+ const expiryDiff = getEarliestResetTime(a) - getEarliestResetTime(b);
+ if (expiryDiff !== 0) return expiryDiff;
+ return (
+ (a.provider || "").localeCompare(b.provider || "") ||
+ (getConnectionLabel(a) || "").localeCompare(getConnectionLabel(b) || "")
+ );
+ });
+}
+
+export function buildLoadingState(connections) {
+ const nextLoadingState = {};
+ connections.forEach((connection) => {
+ nextLoadingState[connection.id] = true;
+ });
+ return nextLoadingState;
+}
+
+export function filterQuotaStateByConnections(state, connections) {
+ const visibleIds = new Set(connections.map((connection) => connection.id));
+ return Object.fromEntries(
+ Object.entries(state).filter(([id]) => visibleIds.has(id)),
+ );
+}
+
+export function getConnectionsPageRange(pagination) {
+ if (!pagination.total) {
+ return { start: 0, end: 0 };
+ }
+ const start = (pagination.page - 1) * pagination.pageSize + 1;
+ const end = Math.min(pagination.page * pagination.pageSize, pagination.total);
+ return { start, end };
+}
+
+export function getConnectionsEmptyMessage(totals, providerFilter, accountFilter) {
+ if (!totals.eligibleConnections) {
+ return {
+ icon: "cloud_off",
+ title: "No Providers Connected",
+ description:
+ "Connect to providers with OAuth to track your API quota limits and usage.",
+ };
+ }
+ if (!totals.providerFilteredConnections) {
+ return {
+ icon: "filter_alt_off",
+ title: "No Accounts Match Current Filters",
+ description:
+ providerFilter === "all"
+ ? "Try changing the account status filter to see more quota trackers."
+ : `No ${accountFilter === "inactive" ? "turned off" : accountFilter === "active" ? "active" : "matching"} accounts found for ${providerFilter}.`,
+ };
+ }
+ return {
+ icon: "filter_alt_off",
+ title: "No Accounts On This Page",
+ description:
+ "Try moving to another page or refreshing the current filters.",
+ };
+}
+
+export function sortRequestFromExpiringFirst(expiringFirst) {
+ return expiringFirst ? "expiring" : "priority";
+}
+
+export function getPageSizeLabel(pageSize, isCustomPageSize) {
+ return isCustomPageSize ? `Custom: ${pageSize} / page` : `${pageSize} / page`;
+}
+
+export function getConnectionsPaginationSummary(pagination) {
+ const { start, end } = getConnectionsPageRange(pagination);
+ return `Showing ${start}-${end} of ${pagination.total}`;
+}
+
+export function getSafePagination(pagination, fallbackPageSize) {
+ return (
+ pagination || {
+ page: 1,
+ pageSize: fallbackPageSize,
+ total: 0,
+ totalPages: 1,
+ }
+ );
+}
+
+export function getSafeTotals(totals, fallbackTotal = 0) {
+ return (
+ totals || {
+ eligibleConnections: fallbackTotal,
+ providerFilteredConnections: fallbackTotal,
+ }
+ );
+}
+
+export function shouldResetPage(previousValue, nextValue) {
+ return previousValue !== nextValue;
+}
+
+export function getPaginationPageValue(dataPagination, fallbackPage) {
+ return dataPagination?.page || fallbackPage;
+}
+
+export function getProviderOptions(dataProviderOptions) {
+ return dataProviderOptions || [];
+}
+
+export async function reconcileConnectionsPage(fetchConnections, targetPage) {
+ return await fetchConnections(targetPage);
+}
+
+export function getQuotaCache() {
+ if (typeof window === "undefined") return {};
+ try {
+ const cached = window.localStorage.getItem(QUOTA_CACHE_KEY);
+ return cached ? JSON.parse(cached) : {};
+ } catch (error) {
+ console.error("Error reading quota cache:", error);
+ return {};
+ }
+}
+
+export function setQuotaCache(connectionId, quotaEntry) {
+ if (typeof window === "undefined") return;
+ try {
+ const cache = getQuotaCache();
+ cache[connectionId] = {
+ ...quotaEntry,
+ cachedAt: new Date().toISOString(),
+ };
+ window.localStorage.setItem(QUOTA_CACHE_KEY, JSON.stringify(cache));
+ } catch (error) {
+ console.error("Error writing quota cache:", error);
+ }
+}
+
/**
* Format ISO date string to countdown format (inspired by vscode-antigravity-cockpit)
* @param {string|Date} date - ISO date string or Date object
diff --git a/src/app/api/auth/login/route.js b/src/app/api/auth/login/route.js
index e6b264dc..cbd3c6ab 100644
--- a/src/app/api/auth/login/route.js
+++ b/src/app/api/auth/login/route.js
@@ -8,6 +8,7 @@ import { checkLock, recordFail, recordSuccess, getClientIp } from "@/lib/auth/lo
import { isLocalRequest } from "@/dashboardGuard";
const RESET_HINT = "Forgot password? Reset to default via 9Router CLI → Settings → Reset Password to Default.";
+const NO_STORE_HEADERS = { "Cache-Control": "no-store" };
function isTunnelRequest(request, settings) {
const host = (request.headers.get("host") || "").split(":")[0].toLowerCase();
@@ -61,7 +62,7 @@ export async function POST(request) {
const mustChangePassword =
!storedHash && !process.env.INITIAL_PASSWORD && !isLocalRequest(request);
- return NextResponse.json({ success: true, mustChangePassword });
+ return NextResponse.json({ success: true, mustChangePassword }, { headers: NO_STORE_HEADERS });
}
const { remainingBeforeLock } = recordFail(ip);
diff --git a/src/app/api/auth/logout/route.js b/src/app/api/auth/logout/route.js
index d6a58142..2b0fa5ca 100644
--- a/src/app/api/auth/logout/route.js
+++ b/src/app/api/auth/logout/route.js
@@ -8,5 +8,5 @@ export async function POST() {
cookieStore.delete("oidc_state");
cookieStore.delete("oidc_nonce");
cookieStore.delete("oidc_code_verifier");
- return NextResponse.json({ success: true });
+ return NextResponse.json({ success: true }, { headers: { "Cache-Control": "no-store" } });
}
diff --git a/src/app/api/cli-tools/claude-settings/route.js b/src/app/api/cli-tools/claude-settings/route.js
index 121879da..bb5fa06f 100644
--- a/src/app/api/cli-tools/claude-settings/route.js
+++ b/src/app/api/cli-tools/claude-settings/route.js
@@ -41,12 +41,12 @@ const readSettings = async () => {
try {
const settingsPath = getClaudeSettingsPath();
const content = await fs.readFile(settingsPath, "utf-8");
- return JSON.parse(content);
+ // Tolerate JSONC (trailing commas) and treat unparseable files as "no config"
+ // rather than throwing a 500 that the UI misreads as "tool not installed".
+ const stripped = content.replace(/,(\s*[}\]])/g, "$1");
+ return JSON.parse(stripped);
} catch (error) {
- if (error.code === "ENOENT") {
- return null;
- }
- throw error;
+ return null;
}
};
diff --git a/src/app/api/cli-tools/cline-settings/route.js b/src/app/api/cli-tools/cline-settings/route.js
index cc723979..ecbccbd2 100644
--- a/src/app/api/cli-tools/cline-settings/route.js
+++ b/src/app/api/cli-tools/cline-settings/route.js
@@ -35,10 +35,12 @@ const checkInstalled = async () => {
const readJson = async (filePath) => {
try {
const content = await fs.readFile(filePath, "utf-8");
- return JSON.parse(content);
+ // Tolerate JSONC (trailing commas) and treat unparseable files as "no config"
+ // rather than throwing a 500 that the UI misreads as "tool not installed".
+ const stripped = content.replace(/,(\s*[}\]])/g, "$1");
+ return JSON.parse(stripped);
} catch (error) {
- if (error.code === "ENOENT") return null;
- throw error;
+ return null;
}
};
diff --git a/src/app/api/cli-tools/copilot-settings/route.js b/src/app/api/cli-tools/copilot-settings/route.js
index 449c6e2c..3c0bd669 100644
--- a/src/app/api/cli-tools/copilot-settings/route.js
+++ b/src/app/api/cli-tools/copilot-settings/route.js
@@ -21,10 +21,12 @@ const getConfigPath = () => {
const readConfig = async () => {
try {
const content = await fs.readFile(getConfigPath(), "utf-8");
- return JSON.parse(content);
+ // Tolerate JSONC (trailing commas) and treat unparseable files as "no config"
+ // rather than throwing a 500 that the UI misreads as "tool not installed".
+ const stripped = content.replace(/,(\s*[}\]])/g, "$1");
+ return JSON.parse(stripped);
} catch (error) {
- if (error.code === "ENOENT") return null;
- throw error;
+ return null;
}
};
diff --git a/src/app/api/cli-tools/cowork-settings/route.js b/src/app/api/cli-tools/cowork-settings/route.js
index e09ec283..d30b667e 100644
--- a/src/app/api/cli-tools/cowork-settings/route.js
+++ b/src/app/api/cli-tools/cowork-settings/route.js
@@ -116,10 +116,14 @@ const get1pRoot = () => {
const get1pConfigPath = () => path.join(get1pRoot(), "claude_desktop_config.json");
const read1pConfig = async () => {
- try { return JSON.parse(await fs.readFile(get1pConfigPath(), "utf-8")) || {}; }
- catch (error) {
- if (error.code === "ENOENT") return {};
- throw error;
+ try {
+ const content = await fs.readFile(get1pConfigPath(), "utf-8");
+ // Tolerate JSONC (trailing commas) and treat unparseable files as empty config
+ // rather than throwing a 500 that the UI misreads as "tool not installed".
+ const stripped = content.replace(/,(\s*[}\]])/g, "$1");
+ return JSON.parse(stripped) || {};
+ } catch (error) {
+ return {};
}
};
@@ -193,10 +197,14 @@ const checkInstalled = async () => {
};
const readJson = async (filePath) => {
- try { return JSON.parse(await fs.readFile(filePath, "utf-8")); }
- catch (error) {
- if (error.code === "ENOENT") return null;
- throw error;
+ try {
+ const content = await fs.readFile(filePath, "utf-8");
+ // Tolerate JSONC (trailing commas) and treat unparseable files as "no config"
+ // rather than throwing a 500 that the UI misreads as "tool not installed".
+ const stripped = content.replace(/,(\s*[}\]])/g, "$1");
+ return JSON.parse(stripped);
+ } catch (error) {
+ return null;
}
};
diff --git a/src/app/api/cli-tools/droid-settings/route.js b/src/app/api/cli-tools/droid-settings/route.js
index 34f53262..a4162578 100644
--- a/src/app/api/cli-tools/droid-settings/route.js
+++ b/src/app/api/cli-tools/droid-settings/route.js
@@ -37,10 +37,12 @@ const readSettings = async () => {
try {
const settingsPath = getDroidSettingsPath();
const content = await fs.readFile(settingsPath, "utf-8");
- return JSON.parse(content);
+ // Tolerate JSONC (trailing commas) and treat unparseable files as "no config"
+ // rather than throwing a 500 that the UI misreads as "tool not installed".
+ const stripped = content.replace(/,(\s*[}\]])/g, "$1");
+ return JSON.parse(stripped);
} catch (error) {
- if (error.code === "ENOENT") return null;
- throw error;
+ return null;
}
};
diff --git a/src/app/api/cli-tools/kilo-settings/route.js b/src/app/api/cli-tools/kilo-settings/route.js
index 6802adc8..9c5993f2 100644
--- a/src/app/api/cli-tools/kilo-settings/route.js
+++ b/src/app/api/cli-tools/kilo-settings/route.js
@@ -35,10 +35,12 @@ const checkInstalled = async () => {
const readJson = async (filePath) => {
try {
const content = await fs.readFile(filePath, "utf-8");
- return JSON.parse(content);
+ // Tolerate JSONC (trailing commas) and treat unparseable files as "no config"
+ // rather than throwing a 500 that the UI misreads as "tool not installed".
+ const stripped = content.replace(/,(\s*[}\]])/g, "$1");
+ return JSON.parse(stripped);
} catch (error) {
- if (error.code === "ENOENT") return null;
- throw error;
+ return null;
}
};
diff --git a/src/app/api/cli-tools/openclaw-settings/route.js b/src/app/api/cli-tools/openclaw-settings/route.js
index 85af6a92..2047a256 100644
--- a/src/app/api/cli-tools/openclaw-settings/route.js
+++ b/src/app/api/cli-tools/openclaw-settings/route.js
@@ -47,10 +47,12 @@ const readSettings = async () => {
try {
const settingsPath = getOpenClawSettingsPath();
const content = await fs.readFile(settingsPath, "utf-8");
- return JSON.parse(content);
+ // Tolerate JSONC (trailing commas) and treat unparseable files as "no config"
+ // rather than throwing a 500 that the UI misreads as "tool not installed".
+ const stripped = content.replace(/,(\s*[}\]])/g, "$1");
+ return JSON.parse(stripped);
} catch (error) {
- if (error.code === "ENOENT") return null;
- throw error;
+ return null;
}
};
diff --git a/src/app/api/cli-tools/opencode-settings/route.js b/src/app/api/cli-tools/opencode-settings/route.js
index f4429cf5..03819c66 100644
--- a/src/app/api/cli-tools/opencode-settings/route.js
+++ b/src/app/api/cli-tools/opencode-settings/route.js
@@ -35,10 +35,16 @@ const checkOpenCodeInstalled = async () => {
const readConfig = async () => {
try {
const content = await fs.readFile(getConfigPath(), "utf-8");
- return JSON.parse(content);
+ // opencode config files may use JSONC format (trailing commas, comments).
+ // Strip trailing commas before parsing to avoid SyntaxError on valid JSONC.
+ const stripped = content.replace(/,(\s*[}\]])/g, "$1");
+ return JSON.parse(stripped);
} catch (error) {
if (error.code === "ENOENT") return null;
- throw error;
+ // If the config file exists but is unparseable (corrupted, exotic JSONC),
+ // treat it as "no config" rather than throwing a 500 that the UI
+ // misinterprets as "opencode not installed".
+ return null;
}
};
diff --git a/src/app/api/headroom/start/route.js b/src/app/api/headroom/start/route.js
new file mode 100644
index 00000000..56af456c
--- /dev/null
+++ b/src/app/api/headroom/start/route.js
@@ -0,0 +1,31 @@
+import { NextResponse } from "next/server";
+import { getSettings } from "@/lib/localDb";
+import { startHeadroomProxy } from "@/lib/headroom/process";
+import { DEFAULT_HEADROOM_URL, isLoopbackHeadroomUrl } from "@/lib/headroom/detect";
+
+export const dynamic = "force-dynamic";
+
+function parsePortFromUrl(url) {
+ try {
+ const u = new URL(url);
+ const p = parseInt(u.port, 10);
+ if (p > 0 && p < 65536) return p;
+ } catch { /* ignore, fall through to default */ }
+ return null;
+}
+
+export async function POST() {
+ try {
+ const settings = await getSettings();
+ const url = settings.headroomUrl || DEFAULT_HEADROOM_URL;
+ if (!isLoopbackHeadroomUrl(url)) {
+ return NextResponse.json({ error: "External Headroom proxies must be started outside 9Router", code: "EXTERNAL_PROXY" }, { status: 400 });
+ }
+ const port = parsePortFromUrl(url) || 8787;
+ const result = await startHeadroomProxy({ port });
+ return NextResponse.json({ success: true, ...result });
+ } catch (error) {
+ const status = error.code === "NOT_INSTALLED" ? 400 : 500;
+ return NextResponse.json({ error: error.message, code: error.code || null }, { status });
+ }
+}
diff --git a/src/app/api/headroom/status/route.js b/src/app/api/headroom/status/route.js
new file mode 100644
index 00000000..582147cb
--- /dev/null
+++ b/src/app/api/headroom/status/route.js
@@ -0,0 +1,18 @@
+import { NextResponse } from "next/server";
+import { getSettings } from "@/lib/localDb";
+import { DEFAULT_HEADROOM_URL, getHeadroomStatus } from "@/lib/headroom/detect";
+import { getManagedPid } from "@/lib/headroom/process";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+ try {
+ const settings = await getSettings();
+ const url = settings.headroomUrl || DEFAULT_HEADROOM_URL;
+ const status = await getHeadroomStatus(url);
+ const managedPid = getManagedPid();
+ return NextResponse.json({ ...status, url, managedPid });
+ } catch (error) {
+ return NextResponse.json({ error: error.message }, { status: 500 });
+ }
+}
diff --git a/src/app/api/headroom/stop/route.js b/src/app/api/headroom/stop/route.js
new file mode 100644
index 00000000..122251e1
--- /dev/null
+++ b/src/app/api/headroom/stop/route.js
@@ -0,0 +1,14 @@
+import { NextResponse } from "next/server";
+import { stopHeadroomProxy } from "@/lib/headroom/process";
+
+export const dynamic = "force-dynamic";
+
+export async function POST() {
+ try {
+ const result = stopHeadroomProxy();
+ const status = result.stopped ? 200 : 409;
+ return NextResponse.json({ ...result }, { status });
+ } catch (error) {
+ return NextResponse.json({ error: error.message, code: error.code || null }, { status: 500 });
+ }
+}
diff --git a/src/app/api/models/route.js b/src/app/api/models/route.js
index 7215f7e3..a4e833a9 100644
--- a/src/app/api/models/route.js
+++ b/src/app/api/models/route.js
@@ -3,6 +3,7 @@ import { getModelAliases, setModelAlias } from "@/models";
import { getDisabledModels } from "@/lib/disabledModelsDb";
import { AI_MODELS } from "@/shared/constants/config";
import { getProviderAlias } from "@/shared/constants/providers";
+import { getCapabilitiesForModel } from "open-sse/providers/capabilities.js";
// GET /api/models - Get models with aliases
export async function GET() {
@@ -18,10 +19,12 @@ export async function GET() {
})
.map((m) => {
const fullModel = `${m.provider}/${m.model}`;
+ const c = getCapabilitiesForModel(m.provider, m.model);
return {
...m,
fullModel,
alias: modelAliases[fullModel] || m.model,
+ caps: { vision: c.vision, search: c.search, reasoning: c.reasoning },
};
});
diff --git a/src/app/api/models/test/ping.js b/src/app/api/models/test/ping.js
index 5b7ee8a0..f7ea92ac 100644
--- a/src/app/api/models/test/ping.js
+++ b/src/app/api/models/test/ping.js
@@ -135,7 +135,9 @@ export async function pingModelByKind(model, kind, baseUrl = `http://127.0.0.1:$
headers,
body: JSON.stringify({
model,
- max_tokens: 1,
+ // Claude-on-Copilot returns empty choices at max_tokens:1 (budget is spent
+ // before a content token emits), so a 1-token probe yields a false negative.
+ max_tokens: 16,
stream: false,
messages: [{ role: "user", content: "hi" }],
}),
diff --git a/src/app/api/oauth/[provider]/[action]/route.js b/src/app/api/oauth/[provider]/[action]/route.js
index a65b0b4c..78922c96 100644
--- a/src/app/api/oauth/[provider]/[action]/route.js
+++ b/src/app/api/oauth/[provider]/[action]/route.js
@@ -151,7 +151,7 @@ export async function GET(request, { params }) {
: undefined;
// Providers that don't use PKCE for device code
- const noPkceDeviceProviders = ["github", "kiro", "kimi-coding", "kilocode", "codebuddy", "qoder"];
+ const noPkceDeviceProviders = ["github", "kiro", "kimi-coding", "kilocode", "codebuddy-cn", "qoder"];
let deviceData;
if (noPkceDeviceProviders.includes(provider)) {
deviceData = await requestDeviceCode(provider, undefined, deviceOptions);
@@ -271,7 +271,7 @@ export async function POST(request, { params }) {
}
// Providers that don't use PKCE for device code
- const noPkceProviders = ["github", "kimi-coding", "kilocode", "codebuddy"];
+ const noPkceProviders = ["github", "kimi-coding", "kilocode", "codebuddy-cn"];
let result;
if (noPkceProviders.includes(provider)) {
result = await pollForToken(provider, deviceCode);
diff --git a/src/app/api/oauth/kiro/api-key/route.js b/src/app/api/oauth/kiro/api-key/route.js
new file mode 100644
index 00000000..139df9b5
--- /dev/null
+++ b/src/app/api/oauth/kiro/api-key/route.js
@@ -0,0 +1,67 @@
+import { NextResponse } from "next/server";
+import { KiroService } from "@/lib/oauth/services/kiro";
+import { createProviderConnection } from "@/models";
+
+/**
+ * POST /api/oauth/kiro/api-key
+ * Import a Kiro API key (headless auth). The key is a long-lived bearer
+ * credential — there is no refresh token. It is validated by listing
+ * CodeWhisperer profiles, then stored with authMethod="api_key".
+ */
+export async function POST(request) {
+ try {
+ const { apiKey, region } = await request.json();
+
+ if (!apiKey || typeof apiKey !== "string" || !apiKey.trim()) {
+ return NextResponse.json(
+ { error: "API key is required" },
+ { status: 400 }
+ );
+ }
+
+ const kiroService = new KiroService();
+
+ // Validate the key and resolve its profileArn via ListAvailableProfiles
+ const credential = await kiroService.validateApiKey(
+ apiKey,
+ region || "us-east-1"
+ );
+
+ // Extract email from JWT if the key happens to be a JWT (optional display)
+ const email = kiroService.extractEmailFromJWT(credential.accessToken);
+
+ // API keys never expire on a fixed schedule; persist a long horizon so the
+ // proactive refresh path (which requires a refreshToken anyway) is skipped.
+ const connection = await createProviderConnection({
+ provider: "kiro",
+ authType: "api_key",
+ accessToken: credential.accessToken,
+ refreshToken: null,
+ expiresAt: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toISOString(),
+ email: email || null,
+ providerSpecificData: {
+ profileArn: credential.profileArn,
+ region: credential.region,
+ authMethod: "api_key",
+ provider: "API Key",
+ },
+ testStatus: "active",
+ });
+
+ return NextResponse.json({
+ success: true,
+ connection: {
+ id: connection.id,
+ provider: connection.provider,
+ email: connection.email,
+ },
+ });
+ } catch (error) {
+ console.log("Kiro API key import error:", error);
+ // Do not reflect upstream response body to the client (SSRF hardening)
+ return NextResponse.json(
+ { error: "API key validation failed" },
+ { status: 500 }
+ );
+ }
+}
diff --git a/src/app/api/oauth/kiro/auto-import/route.js b/src/app/api/oauth/kiro/auto-import/route.js
index e2a6182f..0d28ea6e 100644
--- a/src/app/api/oauth/kiro/auto-import/route.js
+++ b/src/app/api/oauth/kiro/auto-import/route.js
@@ -5,13 +5,14 @@ import { join } from "path";
/**
* GET /api/oauth/kiro/auto-import
- * Auto-detect and extract Kiro refresh token from AWS SSO cache
+ * Auto-detect and extract Kiro refresh token from AWS SSO cache.
+ * For IDC (organization) tokens, also resolves clientId/clientSecret from the
+ * linked client registration file so token refresh works.
*/
export async function GET() {
try {
const cachePath = join(homedir(), ".aws/sso/cache");
- // Try to read cache directory
let files;
try {
files = await readdir(cachePath);
@@ -22,9 +23,9 @@ export async function GET() {
});
}
- // Look for kiro-auth-token.json or any .json file with refreshToken
let refreshToken = null;
let foundFile = null;
+ let tokenData = null;
// First try kiro-auth-token.json
const kiroTokenFile = "kiro-auth-token.json";
@@ -35,6 +36,7 @@ export async function GET() {
if (data.refreshToken && data.refreshToken.startsWith("aorAAAAAG")) {
refreshToken = data.refreshToken;
foundFile = kiroTokenFile;
+ tokenData = data;
}
} catch (error) {
// Continue to search other files
@@ -45,19 +47,16 @@ export async function GET() {
if (!refreshToken) {
for (const file of files) {
if (!file.endsWith(".json")) continue;
-
try {
const content = await readFile(join(cachePath, file), "utf-8");
const data = JSON.parse(content);
-
- // Look for Kiro refresh token (starts with aorAAAAAG)
if (data.refreshToken && data.refreshToken.startsWith("aorAAAAAG")) {
refreshToken = data.refreshToken;
foundFile = file;
+ tokenData = data;
break;
}
} catch (error) {
- // Skip invalid JSON files
continue;
}
}
@@ -70,10 +69,58 @@ export async function GET() {
});
}
+ // For IDC/organization tokens, resolve clientId and clientSecret from
+ // the linked client registration file (referenced by clientIdHash).
+ let clientId = null;
+ let clientSecret = null;
+ const region = tokenData?.region || null;
+ const authMethod = tokenData?.authMethod || null;
+
+ if (tokenData?.clientIdHash) {
+ const clientFile = `${tokenData.clientIdHash}.json`;
+ try {
+ const clientContent = await readFile(join(cachePath, clientFile), "utf-8");
+ const clientData = JSON.parse(clientContent);
+ if (clientData.clientId && clientData.clientSecret) {
+ clientId = clientData.clientId;
+ clientSecret = clientData.clientSecret;
+ }
+ } catch (error) {
+ // Client registration file not found - continue without it
+ }
+ }
+
+ // Read profileArn from Kiro IDE's profile.json.
+ // Important: the runtime gateway requires us-east-1 in the ARN regardless
+ // of the IDC region, so we normalize the region in the ARN to us-east-1.
+ let profileArn = null;
+ const kiroProfilePaths = [
+ join(process.env.APPDATA || join(homedir(), "AppData", "Roaming"), "Kiro", "User", "globalStorage", "kiro.kiroagent", "profile.json"),
+ join(homedir(), ".config", "Kiro", "User", "globalStorage", "kiro.kiroagent", "profile.json"),
+ ];
+ for (const profilePath of kiroProfilePaths) {
+ try {
+ const profileContent = await readFile(profilePath, "utf-8");
+ const profileData = JSON.parse(profileContent);
+ if (profileData.arn) {
+ // Normalize region to us-east-1 for the runtime gateway
+ profileArn = profileData.arn.replace(/arn:aws:codewhisperer:[^:]+:/, "arn:aws:codewhisperer:us-east-1:");
+ break;
+ }
+ } catch (error) {
+ continue;
+ }
+ }
+
return NextResponse.json({
found: true,
refreshToken,
source: foundFile,
+ clientId,
+ clientSecret,
+ region,
+ authMethod,
+ profileArn,
});
} catch (error) {
console.log("Kiro auto-import error:", error);
diff --git a/src/app/api/oauth/kiro/import-cli-proxy/route.js b/src/app/api/oauth/kiro/import-cli-proxy/route.js
new file mode 100644
index 00000000..d71d6a7c
--- /dev/null
+++ b/src/app/api/oauth/kiro/import-cli-proxy/route.js
@@ -0,0 +1,40 @@
+import { NextResponse } from "next/server";
+import { createProviderConnection } from "@/models";
+import { normalizeKiroExternalIdpAuth } from "@/lib/oauth/kiroExternalIdp";
+
+/**
+ * POST /api/oauth/kiro/import-cli-proxy
+ * Import Kiro CLIProxyAPI auth JSON for Microsoft external_idp accounts.
+ */
+export async function POST(request) {
+ try {
+ const body = await request.json();
+ const rawAuth = body?.cliProxyAuth ?? body?.auth ?? body?.json ?? body;
+ const tokenData = normalizeKiroExternalIdpAuth(rawAuth);
+
+ const connection = await createProviderConnection({
+ provider: "kiro",
+ authType: "oauth",
+ accessToken: tokenData.accessToken,
+ refreshToken: tokenData.refreshToken,
+ expiresAt: tokenData.expiresAt,
+ email: tokenData.email || null,
+ providerSpecificData: tokenData.providerSpecificData,
+ testStatus: "active",
+ });
+
+ return NextResponse.json({
+ success: true,
+ connection: {
+ id: connection.id,
+ provider: connection.provider,
+ email: connection.email,
+ },
+ });
+ } catch (error) {
+ return NextResponse.json(
+ { error: error?.message || "CLIProxyAPI import failed" },
+ { status: 400 }
+ );
+ }
+}
diff --git a/src/app/api/oauth/kiro/import/route.js b/src/app/api/oauth/kiro/import/route.js
index a278a1e8..46383410 100644
--- a/src/app/api/oauth/kiro/import/route.js
+++ b/src/app/api/oauth/kiro/import/route.js
@@ -4,11 +4,13 @@ import { createProviderConnection } from "@/models";
/**
* POST /api/oauth/kiro/import
- * Import and validate refresh token from Kiro IDE
+ * Import and validate refresh token from Kiro IDE.
+ * For IDC (organization) tokens, accepts clientId/clientSecret/region so the
+ * token can be refreshed via the regional AWS OIDC endpoint.
*/
export async function POST(request) {
try {
- const { refreshToken } = await request.json();
+ const { refreshToken, clientId, clientSecret, region, authMethod, profileArn } = await request.json();
if (!refreshToken || typeof refreshToken !== "string") {
return NextResponse.json(
@@ -18,25 +20,33 @@ export async function POST(request) {
}
const kiroService = new KiroService();
+ const isIdc = !!(clientId && clientSecret);
- // Validate and refresh token
- const tokenData = await kiroService.validateImportToken(refreshToken.trim());
+ // For IDC tokens, refresh via the regional OIDC endpoint with client credentials.
+ // For social/builder-id tokens, use the standard social refresh endpoint.
+ const providerSpecificData = isIdc
+ ? { clientId, clientSecret, region: region || "us-east-1", authMethod: "idc" }
+ : {};
+
+ const tokenData = await kiroService.refreshToken(refreshToken.trim(), providerSpecificData);
- // Extract email from JWT if available
const email = kiroService.extractEmailFromJWT(tokenData.accessToken);
+ const resolvedAuthMethod = isIdc ? "idc" : "imported";
+ const providerLabel = isIdc ? "Enterprise" : "Imported";
+ const resolvedProfileArn = profileArn || tokenData.profileArn || null;
- // Save to database
const connection = await createProviderConnection({
provider: "kiro",
authType: "oauth",
accessToken: tokenData.accessToken,
- refreshToken: tokenData.refreshToken,
- expiresAt: new Date(Date.now() + tokenData.expiresIn * 1000).toISOString(),
+ refreshToken: tokenData.refreshToken || refreshToken.trim(),
+ expiresAt: new Date(Date.now() + (tokenData.expiresIn || 3600) * 1000).toISOString(),
email: email || null,
providerSpecificData: {
- profileArn: tokenData.profileArn,
- authMethod: "imported",
- provider: "Imported",
+ profileArn: resolvedProfileArn,
+ authMethod: resolvedAuthMethod,
+ provider: providerLabel,
+ ...(isIdc ? { clientId, clientSecret, region: region || "us-east-1" } : {}),
},
testStatus: "active",
});
diff --git a/src/app/api/pricing/route.js b/src/app/api/pricing/route.js
index 7d553a4c..18a8584c 100644
--- a/src/app/api/pricing/route.js
+++ b/src/app/api/pricing/route.js
@@ -1,6 +1,6 @@
import { NextResponse } from "next/server";
import { getPricing, updatePricing, resetPricing, resetAllPricing } from "@/lib/localDb.js";
-import { getDefaultPricing } from "@/shared/constants/pricing.js";
+import { getDefaultPricing } from "open-sse/providers/pricing.js";
/**
* GET /api/pricing
diff --git a/src/app/api/provider-nodes/validate/route.js b/src/app/api/provider-nodes/validate/route.js
index 0d7882ae..4148ab41 100644
--- a/src/app/api/provider-nodes/validate/route.js
+++ b/src/app/api/provider-nodes/validate/route.js
@@ -1,4 +1,6 @@
import { NextResponse } from "next/server";
+import { assertPublicUrl } from "@/shared/utils/ssrfGuard.js";
+import { isLocalRequest } from "@/dashboardGuard";
// Fetch with timeout wrapper
const fetchWithTimeout = (url, options, timeout = 10000) => {
@@ -64,6 +66,15 @@ export async function POST(request) {
return NextResponse.json({ error: "Invalid URL format" }, { status: 400 });
}
+ // SSRF guard for remote callers; local host keeps self-hosted nodes (e.g. ollama-local)
+ if (!isLocalRequest(request)) {
+ try {
+ assertPublicUrl(baseUrl);
+ } catch {
+ return NextResponse.json({ error: "URL not allowed" }, { status: 400 });
+ }
+ }
+
// Custom Embedding Validation - test POST /embeddings directly
if (type === "custom-embedding") {
const normalizedBase = baseUrl.trim().replace(/\/$/, "");
diff --git a/src/app/api/providers/[id]/models/route.js b/src/app/api/providers/[id]/models/route.js
index 5147899e..17af05e2 100644
--- a/src/app/api/providers/[id]/models/route.js
+++ b/src/app/api/providers/[id]/models/route.js
@@ -226,7 +226,7 @@ const PROVIDER_MODELS_CONFIG = {
groq: createOpenAIModelsConfig("https://api.groq.com/openai/v1/models"),
xai: createOpenAIModelsConfig("https://api.x.ai/v1/models"),
mistral: createOpenAIModelsConfig("https://api.mistral.ai/v1/models"),
- perplexity: createOpenAIModelsConfig("https://api.perplexity.ai/models"),
+ perplexity: createOpenAIModelsConfig("https://api.perplexity.ai/v1/models"),
together: createOpenAIModelsConfig("https://api.together.xyz/v1/models"),
fireworks: createOpenAIModelsConfig("https://api.fireworks.ai/inference/v1/models"),
cerebras: createOpenAIModelsConfig("https://api.cerebras.ai/v1/models"),
diff --git a/src/app/api/providers/[id]/test-models/route.js b/src/app/api/providers/[id]/test-models/route.js
index 23aacabb..84946396 100644
--- a/src/app/api/providers/[id]/test-models/route.js
+++ b/src/app/api/providers/[id]/test-models/route.js
@@ -44,14 +44,14 @@ export async function POST(request, { params }) {
// Warm up with first model to trigger token refresh (if needed) before parallel calls.
// This prevents race condition where multiple requests concurrently refresh the same token.
const [first, ...rest] = models;
- const firstKind = first.type || "llm";
+ const firstKind = first.kind || first.type || "llm";
const firstResult = await pingModelByKind(`${alias}/${first.id}`, firstKind, baseUrl);
const results = [{ modelId: first.id, name: first.name || first.id, ...firstResult }];
if (rest.length > 0) {
const restResults = await Promise.all(
rest.map(async (model) => {
- const result = await pingModelByKind(`${alias}/${model.id}`, model.type || "llm", baseUrl);
+ const result = await pingModelByKind(`${alias}/${model.id}`, model.kind || model.type || "llm", baseUrl);
return { modelId: model.id, name: model.name || model.id, ...result };
})
);
diff --git a/src/app/api/providers/[id]/test/testUtils.js b/src/app/api/providers/[id]/test/testUtils.js
index e85dbadd..cebd50a4 100644
--- a/src/app/api/providers/[id]/test/testUtils.js
+++ b/src/app/api/providers/[id]/test/testUtils.js
@@ -2,9 +2,8 @@ import { getProviderConnectionById, updateProviderConnection } from "@/lib/local
import { resolveConnectionProxyConfig } from "@/lib/network/connectionProxy";
import { testProxyUrl } from "@/lib/network/proxyTest";
import { isOpenAICompatibleProvider, isAnthropicCompatibleProvider } from "@/shared/constants/providers";
-import { PROVIDER_ENDPOINTS } from "@/shared/constants/config";
import { getDefaultModel } from "open-sse/config/providerModels.js";
-import { resolveOllamaLocalHost } from "open-sse/config/providers.js";
+import { resolveOllamaLocalHost, PROVIDERS } from "open-sse/config/providers.js";
import {
refreshProviderCredentials,
shouldRefreshCredentials,
@@ -91,7 +90,7 @@ const OAUTH_TEST_CONFIG = {
authHeader: "Authorization",
authPrefix: "Bearer ",
},
- codebuddy: { tokenExists: true },
+ "codebuddy-cn": { tokenExists: true },
};
async function probeClineAccessToken(accessToken) {
@@ -105,6 +104,53 @@ async function probeClineAccessToken(accessToken) {
return res;
}
+const CLOUD_CODE_ASSIST_TEST_URL = "https://cloudcode-pa.googleapis.com/v1internal:loadCodeAssist";
+const CLOUD_CODE_ASSIST_TEST_BODY = JSON.stringify({
+ metadata: {
+ ideType: "IDE_UNSPECIFIED",
+ platform: "PLATFORM_UNSPECIFIED",
+ pluginType: "GEMINI",
+ },
+});
+
+function parseProviderErrorMessage(bodyText, fallback) {
+ if (!bodyText) return fallback;
+ try {
+ const parsed = JSON.parse(bodyText);
+ const message = parsed?.error?.message || parsed?.message || parsed?.error;
+ if (typeof message === "string" && message.trim()) return message.trim();
+ if (message) return JSON.stringify(message);
+ } catch {
+ // fall through
+ }
+ return bodyText.trim() || fallback;
+}
+
+async function probeCloudCodeAssistAccess(connection, accessToken, effectiveProxy = null) {
+ const userAgent = connection.provider === "antigravity"
+ ? "google-api-nodejs-client/9.15.1 vscode-antigravity/1.107.0"
+ : "google-api-nodejs-client/9.15.1 gemini-cli/0.34.0";
+
+ const res = await fetchWithConnectionProxy(CLOUD_CODE_ASSIST_TEST_URL, {
+ method: "POST",
+ headers: {
+ "Authorization": `Bearer ${accessToken}`,
+ "Content-Type": "application/json",
+ "User-Agent": userAgent,
+ },
+ body: CLOUD_CODE_ASSIST_TEST_BODY,
+ }, effectiveProxy);
+
+ if (res.ok) return { valid: true, error: null };
+
+ const bodyText = await res.text().catch(() => "");
+ return {
+ valid: false,
+ error: parseProviderErrorMessage(bodyText, `API returned ${res.status}`),
+ status: res.status,
+ };
+}
+
async function refreshOAuthToken(connection) {
const provider = connection.provider;
const refreshToken = connection.refreshToken;
@@ -254,6 +300,23 @@ async function testOAuthConnection(connection, effectiveProxy = null) {
return { valid: true, error: null, refreshed: false, newTokens: null };
}
+ if (connection.provider === "gemini-cli" || connection.provider === "antigravity") {
+ const initial = await probeCloudCodeAssistAccess(connection, accessToken, effectiveProxy);
+ if (initial.valid) return { valid: true, error: null, refreshed, newTokens };
+
+ if (initial.status === 401 && config.refreshable && !refreshed && connection.refreshToken) {
+ const tokens = await refreshOAuthToken(connection);
+ if (tokens?.accessToken) {
+ const retry = await probeCloudCodeAssistAccess(connection, tokens.accessToken, effectiveProxy);
+ if (retry.valid) return { valid: true, error: null, refreshed: true, newTokens: tokens };
+ return { valid: false, error: retry.error, refreshed: true, newTokens: tokens };
+ }
+ return { valid: false, error: "Token invalid or revoked", refreshed: false };
+ }
+
+ return { valid: false, error: initial.error, refreshed };
+ }
+
if (connection.provider === "cline") {
const tryProbe = async (token) => {
const res = await probeClineAccessToken(token);
@@ -356,10 +419,25 @@ async function testApiKeyConnection(connection, effectiveProxy = null) {
try {
modelsBase = modelsBase.replace(/\/$/, "");
if (modelsBase.endsWith("/messages")) modelsBase = modelsBase.slice(0, -9);
- const res = await fetchWithConnectionProxy(`${modelsBase}/models`, {
- headers: { "x-api-key": connection.apiKey, "anthropic-version": "2023-06-01", "Authorization": `Bearer ${connection.apiKey}` },
+ const messagesUrl = `${modelsBase}/v1/messages`;
+ const model = connection.defaultModel || "claude-3-haiku-20240307";
+ const res = await fetchWithConnectionProxy(messagesUrl, {
+ method: "POST",
+ headers: {
+ "x-api-key": connection.apiKey,
+ "anthropic-version": "2023-06-01",
+ "content-type": "application/json",
+ "Authorization": `Bearer ${connection.apiKey}`,
+ },
+ body: JSON.stringify({
+ model,
+ max_tokens: 1,
+ messages: [{ role: "user", content: "test" }],
+ }),
}, effectiveProxy);
- return { valid: res.ok, error: res.ok ? null : "Invalid API key or base URL" };
+ // 400/529 still confirms key accepted; only 401/403 = bad key
+ const valid = res.status !== 401 && res.status !== 403;
+ return { valid, error: valid ? null : "Invalid API key or base URL" };
} catch (err) {
return { valid: false, error: err.message };
}
@@ -474,7 +552,7 @@ async function testApiKeyConnection(connection, effectiveProxy = null) {
}
case "volcengine-ark":
case "byteplus": {
- const res = await fetchWithConnectionProxy(PROVIDER_ENDPOINTS[connection.provider], {
+ const res = await fetchWithConnectionProxy(PROVIDERS[connection.provider]?.baseUrl, {
method: "POST",
headers: { "Authorization": `Bearer ${connection.apiKey}`, "content-type": "application/json" },
body: JSON.stringify({ model: getDefaultModel(connection.provider), max_tokens: 1, messages: [{ role: "user", content: "test" }] }),
@@ -503,7 +581,7 @@ async function testApiKeyConnection(connection, effectiveProxy = null) {
return { valid: res.ok, error: res.ok ? null : "Invalid API key" };
}
case "perplexity": {
- const res = await fetchWithConnectionProxy("https://api.perplexity.ai/models", { headers: { Authorization: `Bearer ${connection.apiKey}` } }, effectiveProxy);
+ const res = await fetchWithConnectionProxy("https://api.perplexity.ai/v1/models", { headers: { Authorization: `Bearer ${connection.apiKey}` } }, effectiveProxy);
return { valid: res.ok, error: res.ok ? null : "Invalid API key" };
}
case "together": {
@@ -614,6 +692,13 @@ async function testApiKeyConnection(connection, effectiveProxy = null) {
}, effectiveProxy);
return { valid: res.ok, error: res.ok ? null : "Invalid API key" };
}
+ case "blackbox": {
+ const baseUrl = PROVIDERS["blackbox"]?.baseUrl?.replace(/\/chat\/completions$/, "") || "https://api.blackbox.ai/v1";
+ const res = await fetchWithConnectionProxy(`${baseUrl}/models`, {
+ headers: { Authorization: `Bearer ${connection.apiKey}` },
+ }, effectiveProxy);
+ return { valid: res.ok, error: res.ok ? null : "Invalid API key" };
+ }
default:
return { valid: false, error: "Provider test not supported" };
}
diff --git a/src/app/api/providers/client/route.js b/src/app/api/providers/client/route.js
index 22bbb282..be5342c1 100644
--- a/src/app/api/providers/client/route.js
+++ b/src/app/api/providers/client/route.js
@@ -17,6 +17,7 @@ const SAFE_PSD_FIELDS = [
"connectionProxyEnabled", "connectionProxyUrl", "connectionNoProxy",
"githubLogin", "githubName", "githubEmail", "githubUserId",
"username", "firstName", "lastName", "authMethod", "authKind",
+ "profileArn",
];
const DEFAULT_PAGE_SIZE = 20;
diff --git a/src/app/api/providers/route.js b/src/app/api/providers/route.js
index f289cd25..1a664f4a 100644
--- a/src/app/api/providers/route.js
+++ b/src/app/api/providers/route.js
@@ -102,8 +102,12 @@ export async function POST(request) {
// Validation
const isWebCookieProvider = !!WEB_COOKIE_PROVIDERS[provider];
+ // Dual-auth providers (e.g. codebuddy-cn, xai) live under category "oauth" but also
+ // accept an API key via authModes — they aren't in APIKEY_PROVIDERS, so allow them here.
+ const supportsApiKeyMode = !!AI_PROVIDERS[provider]?.authModes?.includes("apikey");
const isValidProvider = APIKEY_PROVIDERS[provider] ||
FREE_TIER_PROVIDERS[provider] ||
+ supportsApiKeyMode ||
isWebCookieProvider ||
isOpenAICompatibleProvider(provider) ||
isAnthropicCompatibleProvider(provider) ||
diff --git a/src/app/api/providers/validate/route.js b/src/app/api/providers/validate/route.js
index 28a446ae..85001371 100644
--- a/src/app/api/providers/validate/route.js
+++ b/src/app/api/providers/validate/route.js
@@ -3,8 +3,7 @@ import { getProviderNodeById } from "@/models";
import { isOpenAICompatibleProvider, isAnthropicCompatibleProvider, isCustomEmbeddingProvider, AI_PROVIDERS } from "@/shared/constants/providers";
import { getDefaultModel } from "open-sse/config/providerModels.js";
import { resolveOllamaLocalHost, resolveXiaomiTokenplanBaseUrl, PROVIDERS } from "open-sse/config/providers.js";
-import { openaiToCommandCode } from "open-sse/translator/request/openai-to-commandcode.js";
-import { PROVIDER_ENDPOINTS } from "@/shared/constants/config";
+import { openaiToCommandCodeRequest } from "open-sse/translator/request/openai-to-commandcode.js";
import { normalizeProviderId } from "@/lib/providerNormalization";
// Probe a webSearch/webFetch provider using its searchConfig/fetchConfig.
@@ -75,7 +74,7 @@ async function probeMediaProvider(provider, apiKey) {
const res = await fetch(cfg.baseUrl, {
method,
headers,
- body: method === "GET" ? undefined : JSON.stringify({ input: "ping", text: "ping", prompt: "ping", model: cfg.models?.[0]?.id || "test" }),
+ body: method === "GET" ? undefined : JSON.stringify({ input: "ping", text: "ping", prompt: "ping", model: getDefaultModel(provider) || "test" }),
signal: AbortSignal.timeout(8000),
});
return res.status !== 401 && res.status !== 403;
@@ -156,17 +155,26 @@ export async function POST(request) {
normalizedBase = normalizedBase.slice(0, -9); // remove /messages
}
- const modelsUrl = `${normalizedBase}/models`;
+ const messagesUrl = `${normalizedBase}/v1/messages`;
+ const model = node.defaultModel || "claude-3-haiku-20240307";
- const res = await fetch(modelsUrl, {
+ const res = await fetch(messagesUrl, {
+ method: "POST",
headers: {
"x-api-key": apiKey,
"anthropic-version": "2023-06-01",
- "Authorization": `Bearer ${apiKey}`
+ "content-type": "application/json",
+ "Authorization": `Bearer ${apiKey}`,
},
+ body: JSON.stringify({
+ model,
+ max_tokens: 1,
+ messages: [{ role: "user", content: "test" }],
+ }),
});
- isValid = res.ok;
+ // 400/529 still confirms key accepted; only 401/403 = bad key
+ isValid = res.status !== 401 && res.status !== 403;
return NextResponse.json({
valid: isValid,
error: isValid ? null : "Invalid API key",
@@ -326,7 +334,7 @@ export async function POST(request) {
}
case "volcengine-ark":
case "byteplus": {
- const res = await fetch(PROVIDER_ENDPOINTS[provider], {
+ const res = await fetch(PROVIDERS[provider]?.baseUrl, {
method: "POST",
headers: {
"Authorization": `Bearer ${apiKey}`,
@@ -363,26 +371,12 @@ export async function POST(request) {
case "xiaomi-tokenplan":
case "nvidia": {
const endpoints = {
- deepseek: "https://api.deepseek.com/models",
- groq: "https://api.groq.com/openai/v1/models",
- xai: "https://api.x.ai/v1/models",
- mistral: "https://api.mistral.ai/v1/models",
- perplexity: "https://api.perplexity.ai/models",
- together: "https://api.together.xyz/v1/models",
- fireworks: "https://api.fireworks.ai/inference/v1/models",
- cerebras: "https://api.cerebras.ai/v1/models",
- cohere: "https://api.cohere.ai/v1/models",
- nebius: "https://api.studio.nebius.ai/v1/models",
- siliconflow: "https://api.siliconflow.com/v1/models",
- hyperbolic: "https://api.hyperbolic.xyz/v1/models",
- ollama: "https://ollama.com/api/tags",
+ ...Object.fromEntries(
+ Object.entries(PROVIDERS).filter(([, t]) => t.validateUrl).map(([id, t]) => [id, t.validateUrl])
+ ),
+ // dynamic URLs (depend on providerSpecificData) — kept inline
"ollama-local": `${resolveOllamaLocalHost({ providerSpecificData })}/api/tags`,
- assemblyai: "https://api.assemblyai.com/v1/account",
- nanobanana: "https://api.nanobananaapi.ai/v1/models",
- chutes: "https://llm.chutes.ai/v1/models",
- nvidia: "https://integrate.api.nvidia.com/v1/models",
- "xiaomi-mimo": "https://api.xiaomimimo.com/v1/models",
- "xiaomi-tokenplan": `${resolveXiaomiTokenplanBaseUrl({ providerSpecificData })}/models`
+ "xiaomi-tokenplan": `${resolveXiaomiTokenplanBaseUrl({ providerSpecificData })}/models`,
};
const headers = {};
if (apiKey) headers["Authorization"] = `Bearer ${apiKey}`;
@@ -414,7 +408,7 @@ export async function POST(request) {
case "commandcode": {
const cfg = PROVIDERS.commandcode;
const model = getDefaultModel("commandcode");
- const payload = openaiToCommandCode(model, {
+ const payload = openaiToCommandCodeRequest(model, {
messages: [{ role: "user", content: "ping" }],
max_tokens: 1,
stream: false,
diff --git a/src/app/api/settings/route.js b/src/app/api/settings/route.js
index bc69e0d8..ee2682ca 100644
--- a/src/app/api/settings/route.js
+++ b/src/app/api/settings/route.js
@@ -11,6 +11,9 @@ const SETTINGS_RESPONSE_HEADERS = {
"Cache-Control": "no-store"
};
+// Secrets must never be mass-assigned from request body (CWE-915)
+const PROTECTED_SETTING_KEYS = ["password", "mitmSudoEncrypted"];
+
export async function GET() {
try {
const settings = await getSettings();
@@ -36,6 +39,9 @@ export async function PATCH(request) {
try {
const body = await request.json();
+ // Strip protected secrets before any internal handling sets them
+ for (const key of PROTECTED_SETTING_KEYS) delete body[key];
+
// If updating password, hash it
if (body.newPassword) {
const settings = await getSettings();
diff --git a/src/app/api/translator/console-logs/stream/route.js b/src/app/api/translator/console-logs/stream/route.js
index e90f11f7..5eb3ae37 100644
--- a/src/app/api/translator/console-logs/stream/route.js
+++ b/src/app/api/translator/console-logs/stream/route.js
@@ -7,13 +7,14 @@ initConsoleLogCapture();
export async function GET(request) {
const encoder = new TextEncoder();
const emitter = getConsoleEmitter();
- const state = { closed: false, send: null, sendClear: null, keepalive: null };
+ const state = { closed: false, send: null, sendLines: null, sendClear: null, keepalive: null };
// Idempotent: safe to call from request.signal abort, cancel(), or enqueue failure.
const cleanup = () => {
if (state.closed) return;
state.closed = true;
if (state.send) emitter.off("line", state.send);
+ if (state.sendLines) emitter.off("lines", state.sendLines);
if (state.sendClear) emitter.off("clear", state.sendClear);
if (state.keepalive) clearInterval(state.keepalive);
};
@@ -40,6 +41,15 @@ export async function GET(request) {
}
};
+ state.sendLines = (lines) => {
+ if (state.closed || !Array.isArray(lines) || lines.length === 0) return;
+ try {
+ controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: "lines", lines })}\n\n`));
+ } catch {
+ cleanup();
+ }
+ };
+
// Notify client when cleared
state.sendClear = () => {
if (state.closed) return;
@@ -51,6 +61,7 @@ export async function GET(request) {
};
emitter.on("line", state.send);
+ emitter.on("lines", state.sendLines);
emitter.on("clear", state.sendClear);
// Keepalive ping every 25s
diff --git a/src/app/api/translator/translate/route.js b/src/app/api/translator/translate/route.js
index d5fb2687..c0f3c12b 100644
--- a/src/app/api/translator/translate/route.js
+++ b/src/app/api/translator/translate/route.js
@@ -2,7 +2,7 @@ import { NextResponse } from "next/server";
import { detectFormat, getTargetFormat } from "open-sse/services/provider.js";
import { translateRequest } from "open-sse/translator/index.js";
import { FORMATS } from "open-sse/translator/formats.js";
-import { parseModel } from "open-sse/services/model.js";
+import { getModelInfo } from "@/sse/services/model.js";
import { getProviderConnections } from "@/lib/localDb.js";
import { getExecutor } from "open-sse/executors/index.js";
@@ -18,7 +18,7 @@ export async function POST(request) {
case 1: {
// Detect provider + formats from 1_req_client.json
const clientBody = body.body || body;
- const { provider, model } = parseModel(clientBody.model);
+ const { provider, model } = await getModelInfo(clientBody.model);
const sourceFormat = detectFormat(clientBody);
const targetFormat = getTargetFormat(provider);
return NextResponse.json({ success: true, result: { provider, model, sourceFormat, targetFormat } });
@@ -28,7 +28,7 @@ export async function POST(request) {
// source → OpenAI intermediate (mirrors 3_req_openai.json)
// Translate source→openai only (half of the pipeline)
const clientBody = body.body || body;
- const { provider, model } = parseModel(clientBody.model);
+ const { provider, model } = await getModelInfo(clientBody.model);
const sourceFormat = detectFormat(clientBody);
const stream = clientBody.stream !== false;
diff --git a/src/app/api/usage/[connectionId]/codex-reset-credits/route.js b/src/app/api/usage/[connectionId]/codex-reset-credits/route.js
new file mode 100644
index 00000000..5fa2f6da
--- /dev/null
+++ b/src/app/api/usage/[connectionId]/codex-reset-credits/route.js
@@ -0,0 +1,104 @@
+// Ensure proxyFetch is loaded to patch globalThis.fetch
+import "open-sse/index.js";
+
+import { getProviderConnectionById } from "@/lib/localDb";
+import { consumeCodexRateLimitResetCredit } from "open-sse/services/usage.js";
+import { resolveConnectionProxyConfig } from "@/lib/network/connectionProxy";
+import { refreshAndUpdateCredentials } from "../route.js";
+
+const AUTH_EXPIRED_PATTERNS = ["expired", "authentication", "unauthorized", "401", "re-authorize"];
+
+function isAuthExpiredResult(result) {
+ const values = [result?.message, result?.code, result?.raw?.detail, result?.raw?.error]
+ .filter(Boolean)
+ .map((value) => String(value).toLowerCase());
+ return values.some((value) => AUTH_EXPIRED_PATTERNS.some((pattern) => value.includes(pattern)));
+}
+
+function getResponseForConsumeResult(result, redeemRequestId) {
+ if (result.ok) {
+ return Response.json({
+ code: result.code,
+ reset: true,
+ windows_reset: result.windowsReset,
+ redeemRequestId,
+ credit: result.raw?.credit || null,
+ });
+ }
+
+ if (result.noCredit) {
+ return Response.json({
+ code: "no_credit",
+ reset: false,
+ windows_reset: result.windowsReset,
+ message: "No Codex reset credits available.",
+ }, { status: 409 });
+ }
+
+ return Response.json({
+ code: result.code || "unknown_response",
+ reset: false,
+ windows_reset: result.windowsReset,
+ message: result.message || "Codex reset credit consume returned an unexpected response.",
+ }, { status: result.status >= 400 && result.status < 500 ? result.status : 502 });
+}
+
+export async function POST(request, { params }) {
+ let connection;
+ try {
+ const { connectionId } = await params;
+ connection = await getProviderConnectionById(connectionId);
+ if (!connection) {
+ return Response.json({ error: "Connection not found" }, { status: 404 });
+ }
+
+ if (connection.provider !== "codex") {
+ return Response.json({ error: "Codex reset credits are only available for Codex connections." }, { status: 400 });
+ }
+
+ const isOAuth = connection.authType === "oauth";
+ const isAccessToken = connection.authType === "access_token";
+ if (!isOAuth && !isAccessToken) {
+ return Response.json({ error: "Codex reset credits require an OAuth or access-token connection." }, { status: 400 });
+ }
+
+ const proxyConfig = await resolveConnectionProxyConfig(connection.providerSpecificData);
+ const proxyOptions = {
+ connectionProxyEnabled: proxyConfig.connectionProxyEnabled === true,
+ connectionProxyUrl: proxyConfig.connectionProxyUrl || "",
+ connectionNoProxy: proxyConfig.connectionNoProxy || "",
+ vercelRelayUrl: proxyConfig.vercelRelayUrl || "",
+ strictProxy: false,
+ };
+
+ if (isOAuth) {
+ try {
+ const result = await refreshAndUpdateCredentials(connection, false, proxyOptions);
+ connection = result.connection;
+ } catch (refreshError) {
+ console.error("[Codex Reset Credits API] Credential refresh failed:", refreshError);
+ return Response.json({ error: `Credential refresh failed: ${refreshError.message}` }, { status: 401 });
+ }
+ }
+
+ // Server-generated redeem id prevents client-controlled replay
+ const redeemRequestId = crypto.randomUUID();
+ let consumeResult = await consumeCodexRateLimitResetCredit(connection.accessToken, redeemRequestId, proxyOptions);
+
+ if (isOAuth && isAuthExpiredResult(consumeResult) && connection.refreshToken) {
+ try {
+ const retryResult = await refreshAndUpdateCredentials(connection, true, proxyOptions);
+ connection = retryResult.connection;
+ consumeResult = await consumeCodexRateLimitResetCredit(connection.accessToken, redeemRequestId, proxyOptions);
+ } catch (retryError) {
+ console.warn(`[Codex Reset Credits] force refresh failed: ${retryError.message}`);
+ }
+ }
+
+ return getResponseForConsumeResult(consumeResult, redeemRequestId);
+ } catch (error) {
+ const provider = connection?.provider ?? "unknown";
+ console.warn(`[Codex Reset Credits] ${provider}: ${error.message}`);
+ return Response.json({ error: error.message }, { status: 500 });
+ }
+}
diff --git a/src/app/api/usage/[connectionId]/route.js b/src/app/api/usage/[connectionId]/route.js
index 99953dea..8ccdc015 100644
--- a/src/app/api/usage/[connectionId]/route.js
+++ b/src/app/api/usage/[connectionId]/route.js
@@ -20,7 +20,7 @@ function isAuthExpiredMessage(usage) {
* @param {boolean} force - Skip needsRefresh check and always attempt refresh
* @returns Promise<{ connection, refreshed: boolean }>
*/
-async function refreshAndUpdateCredentials(connection, force = false, proxyOptions = null) {
+export async function refreshAndUpdateCredentials(connection, force = false, proxyOptions = null) {
const executor = getExecutor(connection.provider);
// Build credentials object from connection
@@ -131,11 +131,14 @@ export async function GET(request, { params }) {
return Response.json({ error: "Connection not found" }, { status: 404 });
}
- // Allow OAuth connections, plus whitelisted apikey providers (glm/minimax/...)
+ // Allow OAuth connections, plus whitelisted apikey providers (glm/minimax/kiro/...)
+ // Kiro's headless api-key flow persists authType "api_key" (underscore) while
+ // generic apikey providers persist "apikey" — accept both spellings here.
const isOAuth = connection.authType === "oauth";
+ const isApikeyAuth =
+ connection.authType === "apikey" || connection.authType === "api_key";
const isApikeyEligible =
- connection.authType === "apikey" &&
- USAGE_APIKEY_PROVIDERS.includes(connection.provider);
+ isApikeyAuth && USAGE_APIKEY_PROVIDERS.includes(connection.provider);
if (!isOAuth && !isApikeyEligible) {
return Response.json({ message: "Usage not available for this connection" });
diff --git a/src/app/api/v1/models/info/route.js b/src/app/api/v1/models/info/route.js
index 1993af96..551c1222 100644
--- a/src/app/api/v1/models/info/route.js
+++ b/src/app/api/v1/models/info/route.js
@@ -1,5 +1,6 @@
import { PROVIDER_MODELS } from "open-sse/config/providerModels.js";
import { AI_PROVIDERS, ALIAS_TO_ID } from "@/shared/constants/providers";
+import { getModelKind } from "@/shared/constants/models";
const KIND_ENDPOINT = {
llm: "/v1/chat/completions",
@@ -40,7 +41,8 @@ function buildInfo({ alias, providerId, model, kind, providerInfo }) {
}
// id format: "{alias}/{modelId}" - alias may also be providerId
-function lookup(fullId) {
+// requestedKind: optional, disambiguates duplicate ids across kinds (e.g. gemini-2.5-pro llm vs stt)
+function lookup(fullId, requestedKind) {
if (!fullId || !fullId.includes("/")) return null;
const slash = fullId.indexOf("/");
const alias = fullId.slice(0, slash);
@@ -50,23 +52,14 @@ function lookup(fullId) {
// PROVIDER_MODELS lookup (by alias key, fallback to providerId)
const list = PROVIDER_MODELS[alias] || PROVIDER_MODELS[providerId] || [];
- const m = list.find((x) => x.id === modelId);
+ const m = requestedKind
+ ? list.find((x) => x.id === modelId && getModelKind(x, "llm") === requestedKind)
+ : list.find((x) => x.id === modelId);
if (m) {
- const kind = m.type || "llm";
+ const kind = getModelKind(m, "llm");
return buildInfo({ alias, providerId, model: m, kind, providerInfo });
}
- // Sub-configs (TTS/STT/embedding only-in-config)
- const subs = [
- ["tts", providerInfo?.ttsConfig],
- ["stt", providerInfo?.sttConfig],
- ["embedding", providerInfo?.embeddingConfig],
- ];
- for (const [kind, cfg] of subs) {
- const sm = cfg?.models?.find((x) => x.id === modelId);
- if (sm) return buildInfo({ alias, providerId, model: sm, kind, providerInfo });
- }
-
// Web search/fetch — virtual model id "search" / "fetch"
if (modelId === "search" && providerInfo?.searchConfig) {
return buildInfo({
@@ -93,13 +86,14 @@ export async function OPTIONS() {
export async function GET(request) {
const { searchParams } = new URL(request.url);
const id = searchParams.get("id");
+ const kind = searchParams.get("kind");
if (!id) {
return Response.json(
{ error: { message: "Missing required query param: id (e.g. ?id=openai/dall-e-3)", type: "invalid_request_error" } },
{ status: 400, headers: { "Access-Control-Allow-Origin": "*" } },
);
}
- const info = lookup(id);
+ const info = lookup(id, kind);
if (!info) {
return Response.json(
{ error: { message: `Model not found: ${id}`, type: "not_found" } },
diff --git a/src/app/api/v1/models/route.js b/src/app/api/v1/models/route.js
index 59fa550e..0c5dffbc 100644
--- a/src/app/api/v1/models/route.js
+++ b/src/app/api/v1/models/route.js
@@ -1,4 +1,4 @@
-import { PROVIDER_MODELS, PROVIDER_ID_TO_ALIAS } from "@/shared/constants/models";
+import { PROVIDER_MODELS, PROVIDER_ID_TO_ALIAS, getModelKind } from "@/shared/constants/models";
import {
AI_PROVIDERS,
getProviderAlias,
@@ -9,6 +9,9 @@ import { getProviderConnections, getCombos, getCustomModels, getModelAliases } f
import { getDisabledModels } from "@/lib/disabledModelsDb";
import { resolveKiroModels } from "open-sse/services/kiroModels.js";
import { resolveQoderModels } from "open-sse/services/qoderModels.js";
+import { resolveCopilotModels } from "open-sse/services/copilotModels.js";
+import { updateProviderCredentials } from "@/sse/services/tokenRefresh";
+import { capabilitiesFromServiceKind } from "open-sse/providers/capabilities.js";
// Per-provider live model resolvers. Each receives a connection record and
// returns { models: [{ id, name? }, ...] } | null on failure.
@@ -34,6 +37,23 @@ const LIVE_MODEL_RESOLVERS = {
return {
models: result.models.map((m) => ({ id: m.id, name: m.name })),
};
+ },
+ github: async (conn) => {
+ const result = await resolveCopilotModels({
+ accessToken: conn.accessToken,
+ refreshToken: conn.refreshToken,
+ providerSpecificData: conn.providerSpecificData || {}
+ }, {
+ log: console,
+ onCredentialsRefreshed: async (refreshed) => {
+ await updateProviderCredentials(conn.id, {
+ copilotToken: refreshed.copilotToken,
+ copilotTokenExpiresAt: refreshed.copilotTokenExpiresAt,
+ existingProviderSpecificData: conn.providerSpecificData || {},
+ });
+ },
+ });
+ return result?.models?.length ? { models: result.models } : null;
}
};
@@ -59,8 +79,9 @@ const MODEL_TYPE_TO_KIND = {
};
function modelKind(model) {
- if (!model?.type) return LLM_KIND;
- return MODEL_TYPE_TO_KIND[model.type] || LLM_KIND;
+ const k = model?.kind || model?.type;
+ if (!k) return LLM_KIND;
+ return MODEL_TYPE_TO_KIND[k] || LLM_KIND;
}
// For dynamic/unknown model IDs (compatible providers, alias map, custom models)
@@ -313,13 +334,22 @@ export async function buildModelsList(kindFilter) {
})
.filter((modelId) => typeof modelId === "string" && modelId.trim() !== "");
+ const customModelKindById = new Map();
const customModelIds = customModels
.filter((m) => {
- if (!m?.id || (m.type && m.type !== "llm")) return false;
+ if (!m?.id) return false;
+ const kind = getModelKind(m) || LLM_KIND;
+ // imageToText custom models are vision-capable chat models: expose them
+ // both in the default LLM list and in /v1/models/image-to-text.
+ if (!kindFilter.includes(kind) && !(kind === "imageToText" && kindFilter.includes(LLM_KIND))) return false;
const alias = m.providerAlias;
return alias === staticAlias || alias === outputAlias || alias === providerId;
})
- .map((m) => String(m.id).trim())
+ .map((m) => {
+ const modelId = String(m.id).trim();
+ if (modelId) customModelKindById.set(modelId, getModelKind(m) || LLM_KIND);
+ return modelId;
+ })
.filter((modelId) => modelId !== "");
const aliasModelIds = Object.values(modelAliases || {})
@@ -348,41 +378,26 @@ export async function buildModelsList(kindFilter) {
const mergedModelIds = Array.from(new Set([...modelIds, ...customModelIds, ...aliasModelIds]));
for (const modelId of mergedModelIds) {
- // Resolve kind: prefer static metadata, otherwise infer from ID heuristics
- const kind = staticModelKindById.get(modelId) || inferKindFromUnknownModelId(modelId);
- if (!kindFilter.includes(kind)) continue;
+ // Resolve kind: prefer static/custom metadata, otherwise infer from ID heuristics
+ const customKind = customModelKindById.get(modelId);
+ const kind = staticModelKindById.get(modelId) || customKind || inferKindFromUnknownModelId(modelId);
+ // imageToText custom models stay in the LLM list (vision-capable chat models)
+ const allowAsLlm = kind === "imageToText" && kindFilter.includes(LLM_KIND);
+ if (!kindFilter.includes(kind) && !allowAsLlm) continue;
if (isDisabled(outputAlias, modelId) || isDisabled(staticAlias, modelId)) continue;
- models.push({
+ const model = {
id: `${outputAlias}/${modelId}`,
object: "model",
owned_by: outputAlias,
- });
- }
-
- // Merge sub-config models (TTS / embedding) that live on AI_PROVIDERS, not PROVIDER_MODELS
- const providerInfo = AI_PROVIDERS[providerId];
- const subConfigModels = [];
- if (kindFilter.includes("tts") && Array.isArray(providerInfo?.ttsConfig?.models)) {
- for (const m of providerInfo.ttsConfig.models) {
- if (m?.id) subConfigModels.push(m.id);
- }
- }
- if (kindFilter.includes("embedding") && Array.isArray(providerInfo?.embeddingConfig?.models)) {
- for (const m of providerInfo.embeddingConfig.models) {
- if (m?.id) subConfigModels.push(m.id);
- }
- }
- for (const subId of subConfigModels) {
- if (isDisabled(outputAlias, subId) || isDisabled(staticAlias, subId)) continue;
- models.push({
- id: `${outputAlias}/${subId}`,
- object: "model",
- owned_by: outputAlias,
- });
+ };
+ const caps = capabilitiesFromServiceKind(customKind);
+ if (caps) model.capabilities = caps;
+ models.push(model);
}
// Web search/fetch — provider IS the model, expose as {alias}/search and/or {alias}/fetch with explicit kind
+ const providerInfo = AI_PROVIDERS[providerId];
if (kindFilter.includes("webSearch") && providerInfo?.searchConfig) {
models.push({
id: `${outputAlias}/search`,
diff --git a/src/app/api/v1beta/models/[...path]/route.js b/src/app/api/v1beta/models/[...path]/route.js
index aef74b8a..12846312 100644
--- a/src/app/api/v1beta/models/[...path]/route.js
+++ b/src/app/api/v1beta/models/[...path]/route.js
@@ -1,7 +1,19 @@
import { handleChat } from "@/sse/handlers/chat.js";
+import {
+ clearAccountError,
+ getProviderCredentials,
+ isValidApiKey,
+ markAccountUnavailable,
+} from "@/sse/services/auth.js";
+import { getSettings } from "@/lib/localDb";
+import { PROVIDER_MODELS } from "@/shared/constants/models";
+import { GEMINI_NATIVE_TTS_FETCH_TIMEOUT_MS } from "open-sse/config/runtimeConfig.js";
import { initTranslators } from "open-sse/translator/index.js";
let initialized = false;
+const GEMINI_NATIVE_BASE_URL = "https://generativelanguage.googleapis.com/v1beta/models";
+// Gemini model id charset (matches sanitizeGeminiFunctionName); blocks path traversal in upstream URL.
+const GEMINI_NATIVE_MODEL_PATTERN = /^[a-zA-Z0-9_.:-]+$/;
/**
* Initialize translators once
@@ -72,6 +84,10 @@ export async function POST(request, { params }) {
const body = await request.json();
+ if (isGeminiNativeTtsRequest(model, body)) {
+ return await forwardGeminiNativeRequest(request, body, model, action);
+ }
+
// Streaming is determined by URL action suffix:
// :streamGenerateContent => stream: true (SSE)
// :generateContent => stream: false (plain JSON)
@@ -107,6 +123,247 @@ export async function POST(request, { params }) {
}
}
+function extractGeminiClientApiKey(request) {
+ const authHeader = request.headers.get("Authorization");
+ if (authHeader?.startsWith("Bearer ")) return authHeader.slice(7);
+
+ const googleApiKey = request.headers.get("x-goog-api-key");
+ if (googleApiKey) return googleApiKey;
+
+ const url = new URL(request.url);
+ return url.searchParams.get("key");
+}
+
+function normalizeGeminiNativeModel(model) {
+ return String(model || "")
+ .replace(/^models\//, "")
+ .replace(/^gemini\//, "");
+}
+
+function getGeminiTtsModelIds() {
+ return new Set([
+ ...(PROVIDER_MODELS.gemini || [])
+ .filter((model) => (model.kind || model.type) === "tts")
+ .map((model) => model.id),
+ ...(PROVIDER_MODELS["gemini-tts-models"] || []).map((model) => model.id),
+ ]);
+}
+
+function hasAudioResponseModality(body) {
+ const modalities = body?.generationConfig?.responseModalities;
+ return Array.isArray(modalities)
+ && modalities.some((modality) => String(modality).toUpperCase() === "AUDIO");
+}
+
+function isGeminiNativeTtsRequest(model, body) {
+ const rawModel = String(model || "");
+ if (rawModel.includes("/") && !rawModel.startsWith("gemini/") && !rawModel.startsWith("models/")) {
+ return false;
+ }
+
+ const modelId = normalizeGeminiNativeModel(model);
+ return hasAudioResponseModality(body) || getGeminiTtsModelIds().has(modelId);
+}
+
+function buildGeminiNativeUrl(requestUrl, model, action) {
+ const sourceUrl = new URL(requestUrl);
+ const upstreamUrl = new URL(`${GEMINI_NATIVE_BASE_URL}/${normalizeGeminiNativeModel(model)}${action}`);
+
+ for (const [key, value] of sourceUrl.searchParams.entries()) {
+ if (key === "key") continue;
+ upstreamUrl.searchParams.append(key, value);
+ }
+
+ return upstreamUrl.toString();
+}
+
+async function validateGeminiNativeClientKey(request) {
+ const settings = await getSettings();
+ if (!settings.requireApiKey) return null;
+
+ const apiKey = extractGeminiClientApiKey(request);
+ if (!apiKey) {
+ return Response.json({ error: { message: "Missing API key" } }, { status: 401 });
+ }
+
+ const valid = await isValidApiKey(apiKey);
+ if (!valid) {
+ return Response.json({ error: { message: "Invalid API key" } }, { status: 401 });
+ }
+
+ return null;
+}
+
+function buildGeminiNativeAuthHeaders(credentials) {
+ if (credentials?.apiKey) return { "x-goog-api-key": credentials.apiKey };
+ if (credentials?.accessToken) return { Authorization: `Bearer ${credentials.accessToken}` };
+ return null;
+}
+
+function corsHeadersFrom(response) {
+ const headers = new Headers(response.headers);
+ // Node fetch may expose a decoded body while preserving upstream compression
+ // headers. Forwarding those headers makes clients decompress plain bytes again.
+ headers.delete("content-encoding");
+ headers.delete("content-length");
+ headers.delete("transfer-encoding");
+ headers.set("Access-Control-Allow-Origin", "*");
+ return headers;
+}
+
+function getSafeGeminiConnectionLabel(credentials) {
+ const connectionId = String(credentials?.connectionId || "unknown");
+ const shortId = connectionId.slice(0, 8);
+ const connectionName = String(credentials?.connectionName || "");
+ if (!connectionName || connectionName.includes("@")) return shortId;
+ return `${connectionName}:${shortId}`;
+}
+
+function getGeminiNativeErrorCode(error) {
+ return error?.cause?.code || error?.code || error?.cause?.name || error?.name || "UNKNOWN";
+}
+
+function isGeminiNativeTimeoutError(error, timedOut) {
+ if (timedOut) return true;
+ const code = getGeminiNativeErrorCode(error);
+ return code === "UND_ERR_HEADERS_TIMEOUT" || code === "HeadersTimeoutError";
+}
+
+function getSafeGeminiNativeErrorText(error) {
+ const message = error?.message || String(error);
+ const code = getGeminiNativeErrorCode(error);
+ return `${message} (${code})`;
+}
+
+async function forwardGeminiNativeRequest(request, body, model, action) {
+ const authError = await validateGeminiNativeClientKey(request);
+ if (authError) return authError;
+
+ const modelId = normalizeGeminiNativeModel(model);
+ if (!GEMINI_NATIVE_MODEL_PATTERN.test(modelId)) {
+ return Response.json({ error: { message: "Invalid model" } }, { status: 400 });
+ }
+ const excludeConnectionIds = new Set();
+ const bodyText = JSON.stringify(body);
+ let lastError = null;
+ let lastStatus = null;
+
+ while (true) {
+ const credentials = await getProviderCredentials("gemini", excludeConnectionIds, modelId);
+ if (!credentials || credentials.allRateLimited) {
+ console.log(`[GEMINI_NATIVE] exhausted model=${modelId} status=${lastStatus || Number(credentials?.lastErrorCode) || 503} error=${lastError || credentials?.lastError || "No active credentials for provider: gemini"}`);
+ return Response.json(
+ { error: { message: lastError || credentials?.lastError || "No active credentials for provider: gemini" } },
+ { status: lastStatus || Number(credentials?.lastErrorCode) || 503 }
+ );
+ }
+
+ const authHeaders = buildGeminiNativeAuthHeaders(credentials);
+ if (!authHeaders) {
+ return Response.json(
+ { error: { message: "No Gemini API key configured" } },
+ { status: 404 }
+ );
+ }
+
+ const safeConnection = getSafeGeminiConnectionLabel(credentials);
+ const startedAt = Date.now();
+ const upstreamUrl = buildGeminiNativeUrl(request.url, modelId, action);
+ const attemptController = new AbortController();
+ let timedOut = false;
+ const timeout = setTimeout(() => {
+ timedOut = true;
+ attemptController.abort();
+ }, GEMINI_NATIVE_TTS_FETCH_TIMEOUT_MS);
+ const abortAttempt = () => attemptController.abort();
+
+ if (request.signal?.aborted) {
+ console.log(`[GEMINI_NATIVE] client aborted model=${modelId} ms=0 conn=${safeConnection}`);
+ return Response.json({ error: { message: "Client closed request" } }, { status: 499 });
+ }
+
+ request.signal?.addEventListener("abort", abortAttempt, { once: true });
+ console.log(`[GEMINI_NATIVE] start model=${modelId} action=${action} conn=${safeConnection} body=${Buffer.byteLength(bodyText)}B timeout=${GEMINI_NATIVE_TTS_FETCH_TIMEOUT_MS}`);
+
+ let upstreamResponse;
+ try {
+ upstreamResponse = await fetch(upstreamUrl, {
+ method: "POST",
+ headers: {
+ "Content-Type": request.headers.get("Content-Type") || "application/json",
+ ...authHeaders,
+ },
+ body: bodyText,
+ signal: attemptController.signal,
+ });
+ } catch (error) {
+ const durationMs = Date.now() - startedAt;
+ if (request.signal?.aborted && !timedOut) {
+ console.log(`[GEMINI_NATIVE] client aborted model=${modelId} ms=${durationMs} conn=${safeConnection}`);
+ return Response.json({ error: { message: "Client closed request" } }, { status: 499 });
+ }
+
+ const status = isGeminiNativeTimeoutError(error, timedOut) ? 504 : 502;
+ const errorText = getSafeGeminiNativeErrorText(error);
+ console.log(`[GEMINI_NATIVE] fetch failed model=${modelId} status=${status} ms=${durationMs} conn=${safeConnection} error=${errorText}`);
+
+ const { shouldFallback } = await markAccountUnavailable(
+ credentials.connectionId,
+ status,
+ errorText,
+ "gemini",
+ modelId
+ );
+
+ if (shouldFallback) {
+ excludeConnectionIds.add(credentials.connectionId);
+ lastError = errorText;
+ lastStatus = status;
+ console.log(`[GEMINI_NATIVE] fallback model=${modelId} status=${status} conn=${safeConnection} exclude=${excludeConnectionIds.size}`);
+ continue;
+ }
+
+ return Response.json({ error: { message: errorText } }, { status });
+ } finally {
+ clearTimeout(timeout);
+ request.signal?.removeEventListener("abort", abortAttempt);
+ }
+
+ console.log(`[GEMINI_NATIVE] upstream model=${modelId} status=${upstreamResponse.status} ms=${Date.now() - startedAt} conn=${safeConnection} ct=${upstreamResponse.headers.get("content-type") || "?"} cl=${upstreamResponse.headers.get("content-length") || "?"}`);
+
+ if (upstreamResponse.ok) {
+ await clearAccountError(credentials.connectionId, credentials, modelId);
+ return new Response(upstreamResponse.body, {
+ status: upstreamResponse.status,
+ statusText: upstreamResponse.statusText,
+ headers: corsHeadersFrom(upstreamResponse),
+ });
+ }
+
+ const errorText = await upstreamResponse.text();
+ const { shouldFallback } = await markAccountUnavailable(
+ credentials.connectionId,
+ upstreamResponse.status,
+ errorText,
+ "gemini",
+ modelId
+ );
+
+ if (shouldFallback) {
+ excludeConnectionIds.add(credentials.connectionId);
+ lastError = errorText;
+ lastStatus = upstreamResponse.status;
+ continue;
+ }
+
+ return new Response(errorText, {
+ status: upstreamResponse.status,
+ statusText: upstreamResponse.statusText,
+ headers: corsHeadersFrom(upstreamResponse),
+ });
+ }
+}
+
/**
* Convert Gemini request format to OpenAI/internal format.
*
diff --git a/src/app/api/v1beta/models/route.js b/src/app/api/v1beta/models/route.js
index 806ffa54..b5b47a98 100644
--- a/src/app/api/v1beta/models/route.js
+++ b/src/app/api/v1beta/models/route.js
@@ -19,19 +19,38 @@ export async function OPTIONS() {
*/
export async function GET() {
try {
- // Collect all models from all providers
const models = [];
+ const seen = new Set();
+
+ function addModel({ name, displayName, description, methods = ["generateContent"] }) {
+ if (seen.has(name)) return;
+ seen.add(name);
+ models.push({
+ name,
+ displayName,
+ description,
+ supportedGenerationMethods: methods,
+ inputTokenLimit: 128000,
+ outputTokenLimit: 8192,
+ });
+ }
for (const [provider, providerModels] of Object.entries(PROVIDER_MODELS)) {
for (const model of providerModels) {
- models.push({
+ addModel({
name: `models/${provider}/${model.id}`,
displayName: model.name || model.id,
description: `${provider} model: ${model.name || model.id}`,
- supportedGenerationMethods: ["generateContent"],
- inputTokenLimit: 128000,
- outputTokenLimit: 8192,
});
+
+ if (provider === "gemini") {
+ addModel({
+ name: `models/${model.id}`,
+ displayName: model.name || model.id,
+ description: `Gemini model: ${model.name || model.id}`,
+ methods: ["generateContent", "streamGenerateContent"],
+ });
+ }
}
}
@@ -41,4 +60,3 @@ export async function GET() {
return Response.json({ error: { message: error.message } }, { status: 500 });
}
}
-
diff --git a/src/app/globals.css b/src/app/globals.css
index d2951537..d96cac7e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -324,6 +324,20 @@ button {
user-select: none;
}
+/* Tailwind v4 dropped default button cursor — restore globally */
+button:not(:disabled),
+[role="button"]:not([aria-disabled="true"]),
+label[for],
+summary,
+select {
+ cursor: pointer;
+}
+
+button:disabled,
+[role="button"][aria-disabled="true"] {
+ cursor: not-allowed;
+}
+
/* ============================================================
Animations
============================================================ */
diff --git a/src/app/layout.js b/src/app/layout.js
index b6c125c9..5ea6c11d 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -1,4 +1,5 @@
import { Inter } from "next/font/google";
+import { GoogleAnalytics } from "@next/third-parties/google";
import "material-symbols/outlined.css";
import "./globals.css";
import { ThemeProvider } from "@/shared/components/ThemeProvider";
@@ -43,6 +44,7 @@ export default function RootLayout({ children }) {
{children}
+ 
@@ -178,6 +178,13 @@ Default URLs:
🇮🇩 Indonesia
+