Fix bug select model

src/app/(dashboard)/dashboard/cli-tools/CLIToolsPageClient.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { Card, CardSkeleton } from "@/shared/components";
 import { CLI_TOOLS } from "@/shared/constants/cliTools";
 import { PROVIDER_MODELS, getModelsByProviderId, PROVIDER_ID_TO_ALIAS } from "@/shared/constants/models";
@@ -107,15 +107,21 @@ export default function CLIToolsPageClient({ machineId }) {
     return models;
   };
 
-  const handleModelMappingChange = (toolId, modelAlias, targetModel) => {
+  const handleModelMappingChange = useCallback((toolId, modelAlias, targetModel) => {
-    setModelMappings(prev => ({
+    setModelMappings(prev => {
-      ...prev,
+      // Prevent unnecessary updates if value hasn't changed
-      [toolId]: {
+      if (prev[toolId]?.[modelAlias] === targetModel) {
-        ...prev[toolId],
+        return prev;
-        [modelAlias]: targetModel,
+      }
-      },
+      return {
-    }));
+        ...prev,
-  };
+        [toolId]: {
+          ...prev[toolId],
+          [modelAlias]: targetModel,
+        },
+      };
+    });
+  }, []);
 
   const getBaseUrl = () => {
     if (cloudEnabled && CLOUD_URL) {

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Card, Button, ModelSelectModal, ManualConfigModal } from "@/shared/components";
 import Image from "next/image";
 
@@ -29,6 +29,8 @@ export default function ClaudeToolCard({
   const [selectedApiKey, setSelectedApiKey] = useState("");
   const [modelAliases, setModelAliases] = useState({});
   const [showManualConfigModal, setShowManualConfigModal] = useState(false);
+  const [customBaseUrl, setCustomBaseUrl] = useState("");
+  const hasInitializedModels = useRef(false);
 
   const getConfigStatus = () => {
     if (!claudeStatus?.installed) return null;
@@ -66,12 +68,17 @@ export default function ClaudeToolCard({
   };
 
   useEffect(() => {
-    if (claudeStatus?.installed) {
+    if (claudeStatus?.installed && !hasInitializedModels.current) {
+      hasInitializedModels.current = true;
       const env = claudeStatus.settings?.env || {};
+      
       tool.defaultModels.forEach((model) => {
         if (model.envKey) {
           const value = env[model.envKey] || model.defaultValue || "";
-          if (value) onModelMappingChange(model.alias, value);
+          // Only sync initial values from file once
+          if (value) {
+            onModelMappingChange(model.alias, value);
+          }
         }
       });
       // Only set selectedApiKey if it exists in apiKeys list
@@ -95,11 +102,13 @@ export default function ClaudeToolCard({
     }
   };
 
+  const getEffectiveBaseUrl = () => customBaseUrl || baseUrl;
+
   const handleApplySettings = async () => {
     setApplying(true);
     setMessage(null);
     try {
-      const env = { ANTHROPIC_BASE_URL: baseUrl };
+      const env = { ANTHROPIC_BASE_URL: getEffectiveBaseUrl() };
       
       // Get key from dropdown, fallback to first key or sk_9router for localhost
       const keyToUse = selectedApiKey?.trim() 
@@ -167,7 +176,7 @@ export default function ClaudeToolCard({
     const keyToUse = (selectedApiKey && selectedApiKey.trim()) 
       ? selectedApiKey 
       : (!cloudEnabled ? "sk_9router" : "<API_KEY_FROM_DASHBOARD>");
-    const env = { ANTHROPIC_BASE_URL: baseUrl, ANTHROPIC_AUTH_TOKEN: keyToUse };
+    const env = { ANTHROPIC_BASE_URL: getEffectiveBaseUrl(), ANTHROPIC_AUTH_TOKEN: keyToUse };
     tool.defaultModels.forEach((model) => {
       const targetModel = modelMappings[model.alias];
       if (targetModel && model.envKey) env[model.envKey] = targetModel;
@@ -240,26 +249,41 @@ export default function ClaudeToolCard({
 
           {!checkingClaude && claudeStatus?.installed && (
             <>
-              <div className="flex items-center gap-2">
-                <span className="material-symbols-outlined text-green-500 text-[16px]">check_circle</span>
-                <span className="text-xs text-text-muted shrink-0">URL:</span>
-                <code className="text-xs font-mono text-text-main truncate">{baseUrl}</code>
-              </div>
-
-              <div className="flex items-center gap-2">
-                <span className="text-xs text-text-muted shrink-0">Key:</span>
-                {apiKeys.length > 0 ? (
-                  <select value={selectedApiKey} onChange={(e) => setSelectedApiKey(e.target.value)} className="flex-1 px-2 py-1.5 bg-surface rounded text-xs border border-border focus:outline-none focus:ring-1 focus:ring-primary/50">
-                    {apiKeys.map((key) => <option key={key.id} value={key.key}>{key.key}</option>)}
-                  </select>
-                ) : (
-                  <span className="text-xs text-text-muted">
-                    {cloudEnabled ? "No API keys - Create one in Keys page" : "sk_9router"}
-                  </span>
-                )}
-              </div>
-
               <div className="flex flex-col gap-2">
+                {/* Base URL */}
+                <div className="flex items-center gap-2">
+                  <span className="w-32 shrink-0 text-sm font-semibold text-text-main text-right">Base URL</span>
+                  <span className="material-symbols-outlined text-text-muted text-[14px]">arrow_forward</span>
+                  <input 
+                    type="text" 
+                    value={customBaseUrl || baseUrl} 
+                    onChange={(e) => setCustomBaseUrl(e.target.value)} 
+                    placeholder="https://..." 
+                    className="flex-1 px-2 py-1.5 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50" 
+                  />
+                  {customBaseUrl && customBaseUrl !== baseUrl && (
+                    <button onClick={() => setCustomBaseUrl("")} className="p-1 text-text-muted hover:text-primary rounded transition-colors" title="Reset to default">
+                      <span className="material-symbols-outlined text-[14px]">restart_alt</span>
+                    </button>
+                  )}
+                </div>
+
+                {/* API Key */}
+                <div className="flex items-center gap-2">
+                  <span className="w-32 shrink-0 text-sm font-semibold text-text-main text-right">API Key</span>
+                  <span className="material-symbols-outlined text-text-muted text-[14px]">arrow_forward</span>
+                  {apiKeys.length > 0 ? (
+                    <select value={selectedApiKey} onChange={(e) => setSelectedApiKey(e.target.value)} className="flex-1 px-2 py-1.5 bg-surface rounded text-xs border border-border focus:outline-none focus:ring-1 focus:ring-primary/50">
+                      {apiKeys.map((key) => <option key={key.id} value={key.key}>{key.key}</option>)}
+                    </select>
+                  ) : (
+                    <span className="flex-1 text-xs text-text-muted px-2 py-1.5">
+                      {cloudEnabled ? "No API keys - Create one in Keys page" : "sk_9router (default)"}
+                    </span>
+                  )}
+                </div>
+
+                {/* Model Mappings */}
                 {tool.defaultModels.map((model) => (
                   <div key={model.alias} className="flex items-center gap-2">
                     <span className="w-32 shrink-0 text-sm font-semibold text-text-main text-right">{model.name}</span>

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

@@ -16,6 +16,7 @@ export default function CodexToolCard({ tool, isExpanded, onToggle, baseUrl, api
   const [modalOpen, setModalOpen] = useState(false);
   const [modelAliases, setModelAliases] = useState({});
   const [showManualConfigModal, setShowManualConfigModal] = useState(false);
+  const [customBaseUrl, setCustomBaseUrl] = useState("");
 
   useEffect(() => {
     if (apiKeys?.length > 0 && !selectedApiKey) {
@@ -40,7 +41,7 @@ export default function CodexToolCard({ tool, isExpanded, onToggle, baseUrl, api
     }
   };
 
-  // Parse model from config content
+  // Parse model from config content (don't sync URL - always use baseUrl from props)
   useEffect(() => {
     if (codexStatus?.config) {
       const modelMatch = codexStatus.config.match(/^model\s*=\s*"([^"]+)"/m);
@@ -57,6 +58,14 @@ export default function CodexToolCard({ tool, isExpanded, onToggle, baseUrl, api
 
   const configStatus = getConfigStatus();
 
+  const getEffectiveBaseUrl = () => {
+    const url = customBaseUrl || `${baseUrl}/v1`;
+    // Ensure URL ends with /v1
+    return url.endsWith("/v1") ? url : `${url}/v1`;
+  };
+  
+  const getDisplayUrl = () => customBaseUrl || `${baseUrl}/v1`;
+
   const checkCodexStatus = async () => {
     setCheckingCodex(true);
     try {
@@ -82,7 +91,7 @@ export default function CodexToolCard({ tool, isExpanded, onToggle, baseUrl, api
       const res = await fetch("/api/cli-tools/codex-settings", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ baseUrl, apiKey: keyToUse, model: selectedModel }),
+        body: JSON.stringify({ baseUrl: getEffectiveBaseUrl(), apiKey: keyToUse, model: selectedModel }),
       });
       const data = await res.json();
       if (res.ok) {
@@ -134,7 +143,7 @@ model_provider = "9router"
 
 [model_providers.9router]
 name = "9Router"
-base_url = "${baseUrl}/v1"
+base_url = "${getEffectiveBaseUrl()}"
 wire_api = "responses"
 `;
 
@@ -219,31 +228,48 @@ wire_api = "responses"
 
           {!checkingCodex && codexStatus?.installed && (
             <>
-              <div className="flex items-center gap-2">
+              <div className="flex flex-col gap-2">
-                <span className="material-symbols-outlined text-green-500 text-[16px]">check_circle</span>
+                {/* Base URL */}
-                <span className="text-xs text-text-muted shrink-0">URL:</span>
+                <div className="flex items-center gap-2">
-                <code className="text-xs font-mono text-text-main truncate">{baseUrl}/v1</code>
+                  <span className="w-32 shrink-0 text-sm font-semibold text-text-main text-right">Base URL</span>
-              </div>
+                  <span className="material-symbols-outlined text-text-muted text-[14px]">arrow_forward</span>
+                  <input 
+                    type="text" 
+                    value={getDisplayUrl()} 
+                    onChange={(e) => setCustomBaseUrl(e.target.value)} 
+                    placeholder="https://.../v1" 
+                    className="flex-1 px-2 py-1.5 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50" 
+                  />
+                  {customBaseUrl && customBaseUrl !== `${baseUrl}/v1` && (
+                    <button onClick={() => setCustomBaseUrl("")} className="p-1 text-text-muted hover:text-primary rounded transition-colors" title="Reset to default">
+                      <span className="material-symbols-outlined text-[14px]">restart_alt</span>
+                    </button>
+                  )}
+                </div>
 
-              <div className="flex items-center gap-2">
+                {/* API Key */}
-                <span className="text-xs text-text-muted shrink-0">Key:</span>
+                <div className="flex items-center gap-2">
-                {apiKeys.length > 0 ? (
+                  <span className="w-32 shrink-0 text-sm font-semibold text-text-main text-right">API Key</span>
-                  <select value={selectedApiKey} onChange={(e) => setSelectedApiKey(e.target.value)} className="flex-1 px-2 py-1.5 bg-surface rounded text-xs border border-border focus:outline-none focus:ring-1 focus:ring-primary/50">
+                  <span className="material-symbols-outlined text-text-muted text-[14px]">arrow_forward</span>
-                    {apiKeys.map((key) => <option key={key.id} value={key.key}>{key.key}</option>)}
+                  {apiKeys.length > 0 ? (
-                  </select>
+                    <select value={selectedApiKey} onChange={(e) => setSelectedApiKey(e.target.value)} className="flex-1 px-2 py-1.5 bg-surface rounded text-xs border border-border focus:outline-none focus:ring-1 focus:ring-primary/50">
-                ) : (
+                      {apiKeys.map((key) => <option key={key.id} value={key.key}>{key.key}</option>)}
-                  <span className="text-xs text-text-muted">
+                    </select>
-                    {cloudEnabled ? "No API keys - Create one in Keys page" : "sk_9router"}
+                  ) : (
-                  </span>
+                    <span className="flex-1 text-xs text-text-muted px-2 py-1.5">
-                )}
+                      {cloudEnabled ? "No API keys - Create one in Keys page" : "sk_9router (default)"}
-              </div>
+                    </span>
+                  )}
+                </div>
 
-              <div className="flex items-center gap-2">
+                {/* Model */}
-                <span className="w-16 shrink-0 text-sm font-semibold text-text-main text-right">Model</span>
+                <div className="flex items-center gap-2">
-                <span className="material-symbols-outlined text-text-muted text-[14px]">arrow_forward</span>
+                  <span className="w-32 shrink-0 text-sm font-semibold text-text-main text-right">Model</span>
-                <input type="text" value={selectedModel} onChange={(e) => setSelectedModel(e.target.value)} placeholder="provider/model-id" className="flex-1 px-2 py-1.5 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50" />
+                  <span className="material-symbols-outlined text-text-muted text-[14px]">arrow_forward</span>
-                <button onClick={() => setModalOpen(true)} disabled={!activeProviders?.length} className={`px-2 py-1.5 rounded border text-xs transition-colors shrink-0 whitespace-nowrap ${activeProviders?.length ? "bg-surface border-border text-text-main hover:border-primary cursor-pointer" : "opacity-50 cursor-not-allowed border-border"}`}>Select Model</button>
+                  <input type="text" value={selectedModel} onChange={(e) => setSelectedModel(e.target.value)} placeholder="provider/model-id" className="flex-1 px-2 py-1.5 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50" />
-                {selectedModel && <button onClick={() => setSelectedModel("")} className="p-1 text-text-muted hover:text-red-500 rounded transition-colors" title="Clear"><span className="material-symbols-outlined text-[14px]">close</span></button>}
+                  <button onClick={() => setModalOpen(true)} disabled={!activeProviders?.length} className={`px-2 py-1.5 rounded border text-xs transition-colors shrink-0 whitespace-nowrap ${activeProviders?.length ? "bg-surface border-border text-text-main hover:border-primary cursor-pointer" : "opacity-50 cursor-not-allowed border-border"}`}>Select Model</button>
+                  {selectedModel && <button onClick={() => setSelectedModel("")} className="p-1 text-text-muted hover:text-red-500 rounded transition-colors" title="Clear"><span className="material-symbols-outlined text-[14px]">close</span></button>}
+                </div>
               </div>
 
               {message && (

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

@@ -19,8 +19,14 @@ export default function DefaultToolCard({ toolId, tool, isExpanded, onToggle, ba
       ? selectedApiKey 
       : (!cloudEnabled ? "sk_9router" : "your-api-key");
     
+    // Add /v1 suffix only if not already present (DRY - avoid duplicate)
+    const normalizedBaseUrl = baseUrl || "http://localhost:3000";
+    const baseUrlWithV1 = normalizedBaseUrl.endsWith("/v1") 
+      ? normalizedBaseUrl 
+      : `${normalizedBaseUrl}/v1`;
+    
     return text
-      .replace(/\{\{baseUrl\}\}/g, baseUrl || "http://localhost:3000")
+      .replace(/\{\{baseUrl\}\}/g, baseUrlWithV1)
       .replace(/\{\{apiKey\}\}/g, keyToUse)
       .replace(/\{\{model\}\}/g, modelValue || "provider/model-id");
   };

src/shared/constants/cliTools.js

@@ -45,7 +45,7 @@ export const CLI_TOOLS = {
     guideSteps: [
       { step: 1, title: "Open Settings", desc: "Go to Settings → Models" },
       { step: 2, title: "Enable OpenAI API", desc: "Enable \"OpenAI API key\" option" },
-      { step: 3, title: "Base URL", value: "{{baseUrl}}/v1", copyable: true },
+      { step: 3, title: "Base URL", value: "{{baseUrl}}", copyable: true },
       { step: 4, title: "API Key", type: "apiKeySelector" },
       { step: 5, title: "Add Custom Model", desc: "Click \"View All Model\" → \"Add Custom Model\"" },
       { step: 6, title: "Select Model", type: "modelSelector" },