fix: custom model compatibility with antigravity/mitm (PR #250)

package.json

@@ -23,7 +23,7 @@
     "lowdb": "^7.0.1",
     "monaco-editor": "^0.55.1",
     "next": "^16.1.6",
-    "node-forge": "^1.3.1",
+    "node-forge": "^1.3.3",
     "node-machine-id": "^1.1.12",
     "open": "^11.0.0",
     "ora": "^9.1.0",

src/app/(dashboard)/dashboard/cli-tools/components/MitmToolCard.js

@@ -22,6 +22,7 @@ export default function MitmToolCard({
   apiKeys,
   activeProviders,
   hasActiveProviders,
+  modelAliases = {},
   cloudEnabled,
   onDnsChange,
 }) {
@@ -74,7 +75,7 @@ export default function MitmToolCard({
   };
 
   const handleModelSelect = (model) => {
-    if (!currentEditingAlias) return;
+    if (!currentEditingAlias || model.isPlaceholder) return;
     const updated = { ...modelMappings, [currentEditingAlias]: model.value };
     setModelMappings(updated);
     saveMappings(updated);
@@ -303,6 +304,7 @@ export default function MitmToolCard({
         onSelect={handleModelSelect}
         selectedModel={currentEditingAlias ? modelMappings[currentEditingAlias] : null}
         activeProviders={activeProviders}
+        modelAliases={modelAliases}
         title={`Select model for ${currentEditingAlias}`}
       />
     </>

src/app/(dashboard)/dashboard/mitm/MitmPageClient.js

@@ -2,7 +2,8 @@
 
 import { useState, useEffect } from "react";
 import { CLI_TOOLS } from "@/shared/constants/cliTools";
-import { getModelsByProviderId, PROVIDER_ID_TO_ALIAS } from "@/shared/constants/models";
+import { getModelsByProviderId } from "@/shared/constants/models";
+import { isOpenAICompatibleProvider, isAnthropicCompatibleProvider } from "@/shared/constants/providers";
 import { MitmServerCard, MitmToolCard } from "@/app/(dashboard)/dashboard/cli-tools/components";
 
 const MITM_TOOL_IDS = ["antigravity", "copilot"];
@@ -10,6 +11,7 @@ const MITM_TOOL_IDS = ["antigravity", "copilot"];
 export default function MitmPageClient() {
   const [connections, setConnections] = useState([]);
   const [apiKeys, setApiKeys] = useState([]);
+  const [modelAliases, setModelAliases] = useState({});
   const [cloudEnabled, setCloudEnabled] = useState(false);
   const [expandedTool, setExpandedTool] = useState(null);
   const [mitmStatus, setMitmStatus] = useState({ running: false, certExists: false, dnsStatus: {}, hasCachedPassword: false });
@@ -17,6 +19,7 @@ export default function MitmPageClient() {
   useEffect(() => {
     fetchConnections();
     fetchApiKeys();
+    fetchAliases();
     fetchCloudSettings();
   }, []);
 
@@ -40,6 +43,16 @@ export default function MitmPageClient() {
     } catch { /* ignore */ }
   };
 
+  const fetchAliases = async () => {
+    try {
+      const res = await fetch("/api/models/alias");
+      if (res.ok) {
+        const data = await res.json();
+        setModelAliases(data.aliases || {});
+      }
+    } catch { /* ignore */ }
+  };
+
   const fetchCloudSettings = async () => {
     try {
       const res = await fetch("/api/settings");
@@ -54,7 +67,11 @@ export default function MitmPageClient() {
 
   const hasActiveProviders = () => {
     const active = getActiveProviders();
-    return active.some(conn => getModelsByProviderId(conn.provider).length > 0);
+    return active.some(conn =>
+      getModelsByProviderId(conn.provider).length > 0 ||
+      isOpenAICompatibleProvider(conn.provider) ||
+      isAnthropicCompatibleProvider(conn.provider)
+    );
   };
 
   const mitmTools = Object.entries(CLI_TOOLS).filter(([id]) => MITM_TOOL_IDS.includes(id));
@@ -82,6 +99,7 @@ export default function MitmPageClient() {
             apiKeys={apiKeys}
             activeProviders={getActiveProviders()}
             hasActiveProviders={hasActiveProviders()}
+            modelAliases={modelAliases}
             cloudEnabled={cloudEnabled}
             onDnsChange={(data) => setMitmStatus(prev => ({ ...prev, dnsStatus: data.dnsStatus ?? prev.dnsStatus }))}
           />

src/app/api/combos/route.js

@@ -1,6 +1,8 @@
 import { NextResponse } from "next/server";
 import { getCombos, createCombo, getComboByName } from "@/lib/localDb";
 
+export const dynamic = "force-dynamic";
+
 // Validate combo name: only a-z, A-Z, 0-9, -, _
 const VALID_NAME_REGEX = /^[a-zA-Z0-9_-]+$/;
 

src/app/api/keys/route.js

@@ -2,6 +2,8 @@ import { NextResponse } from "next/server";
 import { getApiKeys, createApiKey } from "@/lib/localDb";
 import { getConsistentMachineId } from "@/shared/utils/machineId";
 
+export const dynamic = "force-dynamic";
+
 // GET /api/keys - List API keys
 export async function GET() {
   try {

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

@@ -1,6 +1,8 @@
 import { NextResponse } from "next/server";
 import { getModelAliases, setModelAlias, deleteModelAlias } from "@/models";
 
+export const dynamic = "force-dynamic";
+
 // GET /api/models/alias - Get all aliases
 export async function GET() {
   try {

src/app/api/provider-nodes/route.js

@@ -3,6 +3,8 @@ import { createProviderNode, getProviderNodes } from "@/models";
 import { OPENAI_COMPATIBLE_PREFIX, ANTHROPIC_COMPATIBLE_PREFIX } from "@/shared/constants/providers";
 import { generateId } from "@/shared/utils";
 
+export const dynamic = "force-dynamic";
+
 const OPENAI_COMPATIBLE_DEFAULTS = {
   baseUrl: "https://api.openai.com/v1",
 };

src/app/api/providers/route.js

@@ -3,6 +3,8 @@ import { getProviderConnections, createProviderConnection, getProviderNodeById,
 import { APIKEY_PROVIDERS } from "@/shared/constants/config";
 import { isOpenAICompatibleProvider, isAnthropicCompatibleProvider } from "@/shared/constants/providers";
 
+export const dynamic = "force-dynamic";
+
 // GET /api/providers - List all connections
 export async function GET() {
   try {

src/shared/components/ModelSelectModal.js

@@ -105,31 +105,39 @@ export default function ModelSelectModal({
           };
         }
       } else if (isCustomProvider) {
-        // Match provider node to get custom name
+        // Find connection object to get prefix synchronously without waiting for providerNodes fetch
+        const connection = activeProviders.find(p => p.provider === providerId);
         const matchedNode = providerNodes.find(node => node.id === providerId);
-        const displayName = matchedNode?.name || providerInfo.name;
+        const displayName = connection?.name || matchedNode?.name || providerInfo.name;
+        const nodePrefix = connection?.providerSpecificData?.prefix || matchedNode?.prefix || providerId;
 
-        // Get models from modelAliases using providerId (not prefix)
+        // Aliases are stored using the raw providerId as key (e.g. "openai-compatible-chat-<uuid>/glm-4.7"),
-        // modelAliases format: { alias: "providerId/modelId" }
+        // so we must filter by providerId, not by the display prefix.
         const nodeModels = Object.entries(modelAliases)
           .filter(([, fullModel]) => fullModel.startsWith(`${providerId}/`))
           .map(([aliasName, fullModel]) => ({
             id: fullModel.replace(`${providerId}/`, ""),
             name: aliasName,
-            value: fullModel,
+            value: `${nodePrefix}/${fullModel.replace(`${providerId}/`, "")}`,
           }));
 
-        // Only add to groups if there are models (consistent with other provider types)
+        // Always show compatible providers that are connected, even with no aliases.
-        if (nodeModels.length > 0) {
+        // When no aliases exist, show a placeholder so users know it's available.
+        const modelsToShow = nodeModels.length > 0 ? nodeModels : [{
+          id: `__placeholder__${providerId}`,
+          name: `${nodePrefix}/model-id`,
+          value: `${nodePrefix}/model-id`,
+          isPlaceholder: true,
+        }];
+
         groups[providerId] = {
           name: displayName,
-            alias: matchedNode?.prefix || providerId,
+          alias: nodePrefix,
           color: providerInfo.color,
-            models: nodeModels,
+          models: modelsToShow,
           isCustom: true,
-            hasModels: true,
+          hasModels: nodeModels.length > 0,
         };
-        }
       } else {
         const models = getModelsByProviderId(providerId);
         if (models.length > 0) {
@@ -270,19 +278,28 @@ export default function ModelSelectModal({
             <div className="flex flex-wrap gap-1.5">
               {group.models.map((model) => {
                 const isSelected = selectedModel === model.value;
+                const isPlaceholder = model.isPlaceholder;
                 return (
                   <button
                     key={model.id}
                     onClick={() => handleSelect(model)}
+                    title={isPlaceholder ? "Select to pre-fill, then edit model ID in the input" : undefined}
                     className={`
                       px-2 py-1 rounded-xl text-xs font-medium transition-all border hover:cursor-pointer
-                      ${isSelected 
+                      ${isPlaceholder
+                        ? "border-dashed border-border text-text-muted hover:border-primary/50 hover:text-primary bg-surface italic"
+                        : isSelected
                           ? "bg-primary text-white border-primary"
                           : "bg-surface border-border text-text-main hover:border-primary/50 hover:bg-primary/5"
                       }
                     `}
                   >
+                    {isPlaceholder ? (
+                      <span className="flex items-center gap-1">
+                        <span className="material-symbols-outlined text-[11px]">edit</span>
                         {model.name}
+                      </span>
+                    ) : model.name}
                   </button>
                 );
               })}