feat: add OpenCode Go provider and support for custom models

- Introduced OpenCode Go provider with relevant configurations.
- Enhanced model management by allowing users to add and delete custom models.
- Updated UI components to support model selection for image types.
- Adjusted sidebar visibility to include image media kinds.

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

@@ -823,6 +823,10 @@ function GenericExampleCard({ providerId, kind }) {
   const exConfig = KIND_EXAMPLE_CONFIG[kind];
   if (!kindConfig || !exConfig) return null;
 
+  // Get models for this kind (e.g., type="image")
+  const kindModels = getModelsByProviderId(providerId).filter((m) => m.type === kind);
+  const [selectedModel, setSelectedModel] = useState(kindModels[0]?.id ?? "");
+
   const [input, setInput] = useState(exConfig.defaultInput);
   const [apiKey, setApiKey] = useState("");
   const [useTunnel, setUseTunnel] = useState(false);
@@ -848,9 +852,10 @@ function GenericExampleCard({ providerId, kind }) {
 
   const endpoint = useTunnel ? tunnelEndpoint : localEndpoint;
   const apiPath = kindConfig.endpoint.path;
+  const modelFull = selectedModel ? `${providerAlias}/${selectedModel}` : "";
 
   const requestBody = {
-    model: `${providerAlias}/model-name`,
+    model: modelFull,
     [exConfig.bodyKey]: input,
     ...exConfig.extraBody,
   };
@@ -861,7 +866,7 @@ function GenericExampleCard({ providerId, kind }) {
   -d '${JSON.stringify(requestBody)}'`;
 
   const handleRun = async () => {
-    if (!input.trim()) return;
+    if (!input.trim() || !modelFull) return;
     setRunning(true);
     setError("");
     setResult(null);
@@ -869,7 +874,7 @@ function GenericExampleCard({ providerId, kind }) {
     try {
       const headers = { "Content-Type": "application/json" };
       if (apiKey) headers["Authorization"] = `Bearer ${apiKey}`;
-      const body = { ...requestBody, model: `${providerAlias}/model-name` };
+      const body = { ...requestBody, model: modelFull };
       const res = await fetch(`/api${apiPath}`, {
         method: kindConfig.endpoint.method,
         headers,
@@ -892,6 +897,21 @@ function GenericExampleCard({ providerId, kind }) {
     <Card>
       <h2 className="text-lg font-semibold mb-4">Example</h2>
       <div className="flex flex-col gap-2.5">
+        {/* Model selector - only show if models available */}
+        {kindModels.length > 0 && (
+          <Row label="Model">
+            <select
+              value={selectedModel}
+              onChange={(e) => setSelectedModel(e.target.value)}
+              className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+            >
+              {kindModels.map((m) => (
+                <option key={m.id} value={m.id}>{m.name || m.id}</option>
+              ))}
+            </select>
+          </Row>
+        )}
+
         {/* Endpoint */}
         <Row label="Endpoint">
           <div className="flex items-center gap-2">
@@ -953,11 +973,11 @@ function GenericExampleCard({ providerId, kind }) {
                 <span className="material-symbols-outlined text-[14px]">{copiedCurl ? "check" : "content_copy"}</span>
                 {copiedCurl ? "Copied" : "Copy"}
               </button>
-              <button
-                onClick={handleRun}
-                disabled={running || !input.trim()}
-                className="flex items-center gap-1.5 px-3 py-1 rounded-lg bg-primary text-white text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-              >
+            <button
+              onClick={handleRun}
+              disabled={running || !input.trim() || !modelFull}
+              className="flex items-center gap-1.5 px-3 py-1 rounded-lg bg-primary text-white text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
                 <span className="material-symbols-outlined text-[14px]" style={running ? { animation: "spin 1s linear infinite" } : undefined}>
                   play_arrow
                 </span>
@@ -990,6 +1010,13 @@ function GenericExampleCard({ providerId, kind }) {
           <pre className="bg-sidebar rounded-lg px-3 py-2.5 text-xs font-mono text-text-main overflow-x-auto whitespace-pre opacity-70">
             {result ? resultJson : exConfig.defaultResponse}
           </pre>
+          {kind === "image" && result?.data?.data?.[0] && (
+            <img
+              src={result.data.data[0].b64_json ? `data:image/png;base64,${result.data.data[0].b64_json}` : result.data.data[0].url}
+              alt="Generated"
+              className="max-w-full rounded-lg border border-border mt-2"
+            />
+          )}
         </div>
       </div>
     </Card>

src/app/(dashboard)/dashboard/providers/components/ModelsCard.js

@@ -111,6 +111,7 @@ AddCustomModelModal.propTypes = {
 export default function ModelsCard({ providerId, kindFilter }) {
   const { copied, copy } = useCopyToClipboard();
   const [modelAliases, setModelAliases] = useState({});
+  const [customModels, setCustomModels] = useState([]);
   const [modelTestResults, setModelTestResults] = useState({});
   const [testingModelId, setTestingModelId] = useState(null);
   const [testError, setTestError] = useState("");
@@ -118,17 +119,21 @@ export default function ModelsCard({ providerId, kindFilter }) {
   const [connections, setConnections] = useState([]);
 
   const providerAlias = getProviderAlias(providerId);
+  const effectiveType = kindFilter || "llm";
 
   const fetchData = useCallback(async () => {
     try {
-      const [aliasRes, connRes] = await Promise.all([
+      const [aliasRes, connRes, customRes] = await Promise.all([
         fetch("/api/models/alias"),
         fetch("/api/providers", { cache: "no-store" }),
+        fetch("/api/models/custom", { cache: "no-store" }),
       ]);
       const aliasData = await aliasRes.json();
       const connData = await connRes.json();
+      const customData = await customRes.json();
       if (aliasRes.ok) setModelAliases(aliasData.aliases || {});
       if (connRes.ok) setConnections((connData.connections || []).filter((c) => c.provider === providerId));
+      if (customRes.ok) setCustomModels(customData.models || []);
     } catch (e) { console.log("ModelsCard fetch error:", e); }
   }, [providerId]);
 
@@ -153,6 +158,25 @@ export default function ModelsCard({ providerId, kindFilter }) {
     } catch (e) { console.log("delete alias error:", e); }
   };
 
+  const handleAddCustomModel = async (modelId) => {
+    try {
+      const res = await fetch("/api/models/custom", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ providerAlias, id: modelId, type: effectiveType }),
+      });
+      if (res.ok) await fetchData();
+    } catch (e) { console.log("add custom model error:", e); }
+  };
+
+  const handleDeleteCustomModel = async (modelId) => {
+    try {
+      const params = new URLSearchParams({ providerAlias, id: modelId, type: effectiveType });
+      const res = await fetch(`/api/models/custom?${params}`, { method: "DELETE" });
+      if (res.ok) await fetchData();
+    } catch (e) { console.log("delete custom model error:", e); }
+  };
+
   const handleTestModel = async (modelId) => {
     if (testingModelId) return;
     setTestingModelId(modelId);
@@ -171,28 +195,23 @@ export default function ModelsCard({ providerId, kindFilter }) {
     } finally { setTestingModelId(null); }
   };
 
-  // Get models — filter by kindFilter if provided
-  const allModels = getModelsByProviderId(providerId);
-  const displayModels = kindFilter
-    ? allModels.filter((m) => {
+  // Built-in models — filter by kindFilter if provided
+  const allBuiltIn = getModelsByProviderId(providerId);
+  const builtInModels = kindFilter
+    ? allBuiltIn.filter((m) => {
         if (m.kinds) return m.kinds.includes(kindFilter);
-        if (m.type) return m.type === kindFilter;
-        return kindFilter === "llm";
+        return (m.type || "llm") === kindFilter;
       })
-    : allModels;
+    : allBuiltIn;
 
-  // Custom models added via alias
-  const customModels = Object.entries(modelAliases)
-    .filter(([alias, fullModel]) => {
-      const prefix = `${providerAlias}/`;
-      if (!fullModel.startsWith(prefix)) return false;
-      const modelId = fullModel.slice(prefix.length);
-      return !displayModels.some((m) => m.id === modelId) && alias === modelId;
-    })
-    .map(([alias, fullModel]) => ({
-      id: fullModel.slice(`${providerAlias}/`.length),
-      alias,
-    }));
+  // Custom models for this provider + kind, dedupe vs built-in
+  const myCustomModels = customModels.filter(
+    (m) => m.providerAlias === providerAlias
+      && (m.type || "llm") === effectiveType
+      && !builtInModels.some((b) => b.id === m.id)
+  );
+
+  const displayModels = builtInModels;
 
   return (
     <>
@@ -224,16 +243,15 @@ export default function ModelsCard({ providerId, kindFilter }) {
             );
           })}
 
-          {customModels.map((model) => (
+          {myCustomModels.map((model) => (
             <ModelRow
-              key={model.id}
-              model={{ id: model.id }}
+              key={`${model.id}-${model.type}`}
+              model={{ id: model.id, name: model.name }}
               fullModel={`${providerAlias}/${model.id}`}
-              alias={model.alias}
               copied={copied}
               onCopy={copy}
               onSetAlias={() => {}}
-              onDeleteAlias={() => handleDeleteAlias(model.alias)}
+              onDeleteAlias={() => handleDeleteCustomModel(model.id)}
               testStatus={modelTestResults[model.id]}
               onTest={connections.length > 0 ? () => handleTestModel(model.id) : undefined}
               isTesting={testingModelId === model.id}
@@ -254,7 +272,7 @@ export default function ModelsCard({ providerId, kindFilter }) {
       <AddCustomModelModal
         isOpen={showAddCustomModel}
         onSave={async (modelId) => {
-          await handleSetAlias(modelId, modelId);
+          await handleAddCustomModel(modelId);
           setShowAddCustomModel(false);
         }}
         onClose={() => setShowAddCustomModel(false)}

src/app/api/models/custom/route.js

@@ -0,0 +1,48 @@
+import { NextResponse } from "next/server";
+import { getCustomModels, addCustomModel, deleteCustomModel } from "@/models";
+
+export const dynamic = "force-dynamic";
+
+// GET /api/models/custom - List all custom models
+export async function GET() {
+  try {
+    const models = await getCustomModels();
+    return NextResponse.json({ models });
+  } catch (error) {
+    console.log("Error fetching custom models:", error);
+    return NextResponse.json({ error: "Failed to fetch custom models" }, { status: 500 });
+  }
+}
+
+// POST /api/models/custom - Add custom model
+export async function POST(request) {
+  try {
+    const { providerAlias, id, type, name } = await request.json();
+    if (!providerAlias || !id) {
+      return NextResponse.json({ error: "providerAlias and id required" }, { status: 400 });
+    }
+    const added = await addCustomModel({ providerAlias, id, type: type || "llm", name });
+    return NextResponse.json({ success: true, added });
+  } catch (error) {
+    console.log("Error adding custom model:", error);
+    return NextResponse.json({ error: "Failed to add custom model" }, { status: 500 });
+  }
+}
+
+// DELETE /api/models/custom?providerAlias=xxx&id=yyy&type=zzz
+export async function DELETE(request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const providerAlias = searchParams.get("providerAlias");
+    const id = searchParams.get("id");
+    const type = searchParams.get("type") || "llm";
+    if (!providerAlias || !id) {
+      return NextResponse.json({ error: "providerAlias and id required" }, { status: 400 });
+    }
+    await deleteCustomModel({ providerAlias, id, type });
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.log("Error deleting custom model:", error);
+    return NextResponse.json({ error: "Failed to delete custom model" }, { status: 500 });
+  }
+}

src/app/api/v1/images/generations/route.js

@@ -0,0 +1,16 @@
+import { handleImageGeneration } from "@/sse/handlers/imageGeneration.js";
+
+export async function OPTIONS() {
+  return new Response(null, {
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "POST, OPTIONS",
+      "Access-Control-Allow-Headers": "*",
+    },
+  });
+}
+
+/** POST /v1/images/generations - OpenAI-compatible image generation endpoint */
+export async function POST(request) {
+  return await handleImageGeneration(request);
+}

src/lib/localDb.js

@@ -44,6 +44,7 @@ function cloneDefaultData() {
     providerNodes: [],
     proxyPools: [],
     modelAliases: {},
+    customModels: [],
     mitmAlias: {},
     combos: [],
     apiKeys: [],
@@ -515,6 +516,33 @@ export async function deleteModelAlias(alias) {
   await safeWrite(db);
 }
 
+// Custom models — user-added models with explicit type (llm/image/tts/embedding/...)
+export async function getCustomModels() {
+  const db = await getDb();
+  return db.data.customModels || [];
+}
+
+export async function addCustomModel({ providerAlias, id, type = "llm", name }) {
+  const db = await getDb();
+  if (!db.data.customModels) db.data.customModels = [];
+  const exists = db.data.customModels.some(
+    (m) => m.providerAlias === providerAlias && m.id === id && (m.type || "llm") === type
+  );
+  if (exists) return false;
+  db.data.customModels.push({ providerAlias, id, type, name: name || id });
+  await safeWrite(db);
+  return true;
+}
+
+export async function deleteCustomModel({ providerAlias, id, type = "llm" }) {
+  const db = await getDb();
+  if (!db.data.customModels) return;
+  db.data.customModels = db.data.customModels.filter(
+    (m) => !(m.providerAlias === providerAlias && m.id === id && (m.type || "llm") === type)
+  );
+  await safeWrite(db);
+}
+
 export async function getMitmAlias(toolName) {
   const db = await getDb();
   const all = db.data.mitmAlias || {};

src/models/index.js

@@ -25,6 +25,9 @@ export {
   getModelAliases,
   setModelAlias,
   deleteModelAlias,
+  getCustomModels,
+  addCustomModel,
+  deleteCustomModel,
   getMitmAlias,
   setMitmAliasAll,
   getApiKeys,

src/shared/components/Sidebar.js

@@ -12,7 +12,7 @@ import Button from "./Button";
 import { ConfirmModal } from "./Modal";
 
 // const VISIBLE_MEDIA_KINDS = ["embedding", "image", "imageToText", "tts", "stt", "webSearch", "webFetch", "video", "music"];
-const VISIBLE_MEDIA_KINDS = ["embedding", "tts"];
+const VISIBLE_MEDIA_KINDS = ["embedding", "image", "tts"];
 
 const navItems = [
   { href: "/dashboard/endpoint", label: "Endpoint", icon: "api" },

src/shared/constants/providers.js

@@ -9,7 +9,7 @@ export const FREE_PROVIDERS = {
   // codebuddy: { id: "codebuddy", alias: "cb", name: "CodeBuddy", icon: "smart_toy", color: "#006EFF" },
   // qoder: { id: "qoder", alias: "qd", name: "Qoder AI", icon: "water_drop", color: "#EC4899" },
   iflow: { id: "iflow", alias: "if", name: "iFlow AI", icon: "water_drop", color: "#6366F1" },
-  opencode: { id: "opencode", alias: "oc", name: "OpenCode", icon: "terminal", color: "#E87040", textIcon: "OC", noAuth: true, passthroughModels: true, modelsFetcher: { url: "https://opencode.ai/zen/v1/models", type: "opencode-free" } },
+  opencode: { id: "opencode", alias: "oc", name: "OpenCode Free", icon: "terminal", color: "#E87040", textIcon: "OC", noAuth: true, passthroughModels: true, modelsFetcher: { url: "https://opencode.ai/zen/v1/models", type: "opencode-free" } },
 };
 
 // Free Tier Providers (has free access but may require account/API key)
@@ -61,6 +61,7 @@ export const APIKEY_PROVIDERS = {
   "alicode-intl": { id: "alicode-intl", alias: "alicode-intl", name: "Alibaba Intl", icon: "cloud", color: "#FF6A00", textIcon: "ALi" },
   openai: { id: "openai", alias: "openai", name: "OpenAI", icon: "auto_awesome", color: "#10A37F", textIcon: "OA", website: "https://platform.openai.com", serviceKinds: ["llm", "embedding", "tts", "image", "imageToText", "webSearch"], thinkingConfig: THINKING_CONFIG.effort },
   anthropic: { id: "anthropic", alias: "anthropic", name: "Anthropic", icon: "smart_toy", color: "#D97757", textIcon: "AN", website: "https://console.anthropic.com", serviceKinds: ["llm", "imageToText"] },
+  "opencode-go": { id: "opencode-go", alias: "ocg", name: "OpenCode Go", icon: "terminal", color: "#E87040", textIcon: "OC", website: "https://opencode.ai/auth", notice: { text: "OpenCode Go subscription: $5/mo (then $10/mo). Access to Kimi, GLM, Qwen, MiMo, MiniMax models.", apiKeyUrl: "https://opencode.ai/auth" } },
 
 
   deepseek: { id: "deepseek", alias: "ds", name: "DeepSeek", icon: "bolt", color: "#4D6BFE", textIcon: "DS", website: "https://deepseek.com" },

src/sse/handlers/imageGeneration.js

@@ -0,0 +1,152 @@
+import {
+  getProviderCredentials,
+  markAccountUnavailable,
+  clearAccountError,
+  extractApiKey,
+  isValidApiKey,
+} from "../services/auth.js";
+import { getSettings } from "@/lib/localDb";
+import { getModelInfo } from "../services/model.js";
+import { handleImageGenerationCore } from "open-sse/handlers/imageGenerationCore.js";
+import { errorResponse, unavailableResponse } from "open-sse/utils/error.js";
+import { HTTP_STATUS } from "open-sse/config/runtimeConfig.js";
+import * as log from "../utils/logger.js";
+import { updateProviderCredentials, checkAndRefreshToken } from "../services/tokenRefresh.js";
+
+// Providers that don't require credentials (noAuth)
+const NO_AUTH_PROVIDERS = new Set(["sdwebui", "comfyui"]);
+
+/**
+ * Handle image generation request
+ * @param {Request} request
+ */
+export async function handleImageGeneration(request) {
+  let body;
+  try {
+    body = await request.json();
+  } catch {
+    log.warn("IMAGE", "Invalid JSON body");
+    return errorResponse(HTTP_STATUS.BAD_REQUEST, "Invalid JSON body");
+  }
+
+  const url = new URL(request.url);
+  const modelStr = body.model;
+
+  log.request("POST", `${url.pathname} | ${modelStr}`);
+
+  const apiKey = extractApiKey(request);
+  if (apiKey) {
+    log.debug("AUTH", `API Key: ${log.maskKey(apiKey)}`);
+  } else {
+    log.debug("AUTH", "No API key provided (local mode)");
+  }
+
+  const settings = await getSettings();
+  if (settings.requireApiKey) {
+    if (!apiKey) {
+      log.warn("AUTH", "Missing API key (requireApiKey=true)");
+      return errorResponse(HTTP_STATUS.UNAUTHORIZED, "Missing API key");
+    }
+    const valid = await isValidApiKey(apiKey);
+    if (!valid) {
+      log.warn("AUTH", "Invalid API key (requireApiKey=true)");
+      return errorResponse(HTTP_STATUS.UNAUTHORIZED, "Invalid API key");
+    }
+  }
+
+  if (!modelStr) {
+    log.warn("IMAGE", "Missing model");
+    return errorResponse(HTTP_STATUS.BAD_REQUEST, "Missing model");
+  }
+
+  if (!body.prompt) {
+    log.warn("IMAGE", "Missing prompt");
+    return errorResponse(HTTP_STATUS.BAD_REQUEST, "Missing required field: prompt");
+  }
+
+  const modelInfo = await getModelInfo(modelStr);
+  if (!modelInfo.provider) {
+    log.warn("IMAGE", "Invalid model format", { model: modelStr });
+    return errorResponse(HTTP_STATUS.BAD_REQUEST, "Invalid model format");
+  }
+
+  const { provider, model } = modelInfo;
+
+  if (modelStr !== `${provider}/${model}`) {
+    log.info("ROUTING", `${modelStr} → ${provider}/${model}`);
+  } else {
+    log.info("ROUTING", `Provider: ${provider}, Model: ${model}`);
+  }
+
+  // noAuth providers — no credential needed
+  if (NO_AUTH_PROVIDERS.has(provider)) {
+    const result = await handleImageGenerationCore({
+      body,
+      modelInfo: { provider, model },
+      credentials: null,
+      log,
+    });
+    if (result.success) return result.response;
+    return errorResponse(result.status || HTTP_STATUS.BAD_GATEWAY, result.error || "Image generation failed");
+  }
+
+  // Credentialed providers — fallback loop
+  const excludeConnectionIds = new Set();
+  let lastError = null;
+  let lastStatus = null;
+
+  while (true) {
+    const credentials = await getProviderCredentials(provider, excludeConnectionIds, model);
+
+    if (!credentials || credentials.allRateLimited) {
+      if (credentials?.allRateLimited) {
+        const errorMsg = lastError || credentials.lastError || "Unavailable";
+        const status = lastStatus || Number(credentials.lastErrorCode) || HTTP_STATUS.SERVICE_UNAVAILABLE;
+        log.warn("IMAGE", `[${provider}/${model}] ${errorMsg} (${credentials.retryAfterHuman})`);
+        return unavailableResponse(status, `[${provider}/${model}] ${errorMsg}`, credentials.retryAfter, credentials.retryAfterHuman);
+      }
+      if (excludeConnectionIds.size === 0) {
+        log.error("AUTH", `No credentials for provider: ${provider}`);
+        return errorResponse(HTTP_STATUS.BAD_REQUEST, `No credentials for provider: ${provider}`);
+      }
+      log.warn("IMAGE", "No more accounts available", { provider });
+      return errorResponse(lastStatus || HTTP_STATUS.SERVICE_UNAVAILABLE, lastError || "All accounts unavailable");
+    }
+
+    log.info("AUTH", `\x1b[32mUsing ${provider} account: ${credentials.connectionName}\x1b[0m`);
+
+    const refreshedCredentials = await checkAndRefreshToken(provider, credentials);
+
+    const result = await handleImageGenerationCore({
+      body,
+      modelInfo: { provider, model },
+      credentials: refreshedCredentials,
+      log,
+      onCredentialsRefreshed: async (newCreds) => {
+        await updateProviderCredentials(credentials.connectionId, {
+          accessToken: newCreds.accessToken,
+          refreshToken: newCreds.refreshToken,
+          providerSpecificData: newCreds.providerSpecificData,
+          testStatus: "active"
+        });
+      },
+      onRequestSuccess: async () => {
+        await clearAccountError(credentials.connectionId, credentials, model);
+      }
+    });
+
+    if (result.success) return result.response;
+
+    const { shouldFallback } = await markAccountUnavailable(credentials.connectionId, result.status, result.error, provider, model);
+
+    if (shouldFallback) {
+      log.warn("AUTH", `Account ${credentials.connectionName} unavailable (${result.status}), trying fallback`);
+      excludeConnectionIds.add(credentials.connectionId);
+      lastError = result.error;
+      lastStatus = result.status;
+      continue;
+    }
+
+    return result.response;
+  }
+}