Refactor CLI tool cards to use BaseUrlSelect component and pass additional tunnel and Tailscale configuration

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

@@ -0,0 +1,156 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { APP_CONFIG } from "@/shared/constants/config";
+
+const STORAGE_KEY = "9router.cliToolEndpointPresets";
+const CUSTOM_VALUE = "__custom__";
+const SAVE_VALUE = "__save__";
+
+const ensureV1 = (url) => {
+  const trimmed = (url || "").replace(/\/+$/, "");
+  if (!trimmed) return "";
+  return /\/v1$/.test(trimmed) ? trimmed : `${trimmed}/v1`;
+};
+
+const stripV1 = (url) => (url || "").replace(/\/v1\/?$/, "");
+
+const readSavedPresets = () => {
+  if (typeof window === "undefined") return [];
+  try {
+    const raw = JSON.parse(window.localStorage.getItem(STORAGE_KEY) || "[]");
+    if (!Array.isArray(raw)) return [];
+    return raw.filter((p) => p?.name && p?.baseUrl);
+  } catch {
+    return [];
+  }
+};
+
+const writeSavedPresets = (presets) => {
+  if (typeof window === "undefined") return;
+  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(presets));
+};
+
+// Build endpoint options ordered by priority
+const buildOptions = ({ requiresExternalUrl, tunnelEnabled, tunnelPublicUrl, tailscaleEnabled, tailscaleUrl, savedPresets, withV1 }) => {
+  const opts = [];
+  const wrap = (url) => (withV1 ? ensureV1(url) : url.replace(/\/+$/, ""));
+  if (!requiresExternalUrl) {
+    opts.push({ value: "local", label: `Localhost (127.0.0.1)`, url: wrap(`http://127.0.0.1:${APP_CONFIG.appPort}`) });
+  }
+  if (tunnelEnabled && tunnelPublicUrl) {
+    opts.push({ value: "tunnel", label: `Tunnel - ${tunnelPublicUrl}`, url: wrap(tunnelPublicUrl) });
+  }
+  if (tailscaleEnabled && tailscaleUrl) {
+    opts.push({ value: "tailscale", label: `Tailscale - ${tailscaleUrl}`, url: wrap(tailscaleUrl) });
+  }
+  savedPresets.forEach((p) => {
+    opts.push({ value: `saved:${p.name}`, label: `★ ${p.name} - ${p.baseUrl}`, url: p.baseUrl, saved: true });
+  });
+  opts.push({ value: CUSTOM_VALUE, label: "Custom URL...", url: "" });
+  return opts;
+};
+
+export default function BaseUrlSelect({
+  value,
+  onChange,
+  requiresExternalUrl = false,
+  tunnelEnabled = false,
+  tunnelPublicUrl = "",
+  tailscaleEnabled = false,
+  tailscaleUrl = "",
+  withV1 = true,
+}) {
+  const [savedPresets, setSavedPresets] = useState([]);
+  const [mode, setMode] = useState("");
+
+  useEffect(() => {
+    setSavedPresets(readSavedPresets());
+  }, []);
+
+  const options = useMemo(
+    () => buildOptions({ requiresExternalUrl, tunnelEnabled, tunnelPublicUrl, tailscaleEnabled, tailscaleUrl, savedPresets, withV1 }),
+    [requiresExternalUrl, tunnelEnabled, tunnelPublicUrl, tailscaleEnabled, tailscaleUrl, savedPresets, withV1]
+  );
+
+  // Auto-detect mode based on current value matching an option
+  useEffect(() => {
+    if (!value) {
+      if (options[0] && options[0].value !== CUSTOM_VALUE) {
+        setMode(options[0].value);
+        onChange(options[0].url);
+      }
+      return;
+    }
+    const match = options.find((o) => o.url && o.url === value);
+    setMode(match ? match.value : CUSTOM_VALUE);
+  }, [value, options]);
+
+  const handleSelect = (e) => {
+    const next = e.target.value;
+    if (next === SAVE_VALUE) {
+      const trimmed = (value || "").trim();
+      if (!trimmed) return;
+      let defaultName = trimmed;
+      try { defaultName = new URL(trimmed).host; } catch {}
+      const name = window.prompt("Save endpoint as:", defaultName);
+      if (!name?.trim()) return;
+      const next = [...savedPresets.filter((p) => p.name !== name.trim()), { name: name.trim(), baseUrl: trimmed }]
+        .sort((a, b) => a.name.localeCompare(b.name));
+      setSavedPresets(next);
+      writeSavedPresets(next);
+      return;
+    }
+    setMode(next);
+    if (next === CUSTOM_VALUE) {
+      onChange("");
+      return;
+    }
+    const opt = options.find((o) => o.value === next);
+    if (opt) onChange(opt.url);
+  };
+
+  const handleDeleteSaved = () => {
+    if (!mode.startsWith("saved:")) return;
+    const name = mode.slice(6);
+    const next = savedPresets.filter((p) => p.name !== name);
+    setSavedPresets(next);
+    writeSavedPresets(next);
+    setMode(CUSTOM_VALUE);
+  };
+
+  const isSaved = mode.startsWith("saved:");
+  const isCustom = mode === CUSTOM_VALUE;
+  const canSave = isCustom && (value || "").trim().length > 0;
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="flex items-center gap-2">
+        <select
+          value={mode}
+          onChange={handleSelect}
+          className="flex-1 min-w-0 px-2 py-2 bg-surface rounded text-xs border border-border focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5"
+        >
+          {options.map((o) => (
+            <option key={o.value} value={o.value}>{o.label}</option>
+          ))}
+          {canSave && <option value={SAVE_VALUE}>+ Save current as...</option>}
+        </select>
+        {isSaved && (
+          <button type="button" onClick={handleDeleteSaved} className="p-1 text-text-muted hover:text-red-500 rounded transition-colors shrink-0" title="Delete saved endpoint">
+            <span className="material-symbols-outlined text-[14px]">delete</span>
+          </button>
+        )}
+      </div>
+      {isCustom && (
+        <input
+          type="text"
+          value={value || ""}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={withV1 ? "https://example.com/v1" : "https://example.com"}
+          className="w-full min-w-0 px-2 py-2 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5"
+        />
+      )}
+    </div>
+  );
+}

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

@@ -3,7 +3,7 @@
 import { useState, useEffect, useRef } from "react";
 import { Card, Button, ModelSelectModal, ManualConfigModal, Tooltip } from "@/shared/components";
 import Image from "next/image";
-import EndpointPresetControl from "./EndpointPresetControl";
+import BaseUrlSelect from "./BaseUrlSelect";
 
 const CLOUD_URL = process.env.NEXT_PUBLIC_CLOUD_URL;
 
@@ -19,6 +19,10 @@ export default function ClaudeToolCard({
   apiKeys,
   cloudEnabled,
   initialStatus,
+  tunnelEnabled,
+  tunnelPublicUrl,
+  tailscaleEnabled,
+  tailscaleUrl,
 }) {
   const [claudeStatus, setClaudeStatus] = useState(initialStatus || null);
   const [checkingClaude, setCheckingClaude] = useState(false);
@@ -303,29 +307,19 @@ export default function ClaudeToolCard({
                   </div>
                 )}
 
-                <EndpointPresetControl
-                  baseUrl={getDisplayUrl()}
-                  apiKey={selectedApiKey}
-                  onBaseUrlChange={setCustomBaseUrl}
-                  onApiKeyChange={setSelectedApiKey}
-                />
-
                 {/* Base URL */}
-                <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
+                <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr] sm:items-center sm:gap-2">
                   <span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">Base URL</span>
                   <span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
-                  <input
-                    type="text"
-                    value={getDisplayUrl()}
-                    onChange={(e) => setCustomBaseUrl(e.target.value)}
-                    placeholder="https://.../v1"
-                    className="w-full min-w-0 px-2 py-2 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5"
+                  <BaseUrlSelect
+                    value={customBaseUrl || getDisplayUrl()}
+                    onChange={setCustomBaseUrl}
+                    requiresExternalUrl={tool.requiresExternalUrl}
+                    tunnelEnabled={tunnelEnabled}
+                    tunnelPublicUrl={tunnelPublicUrl}
+                    tailscaleEnabled={tailscaleEnabled}
+                    tailscaleUrl={tailscaleUrl}
                   />
-                  {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 */}

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

@@ -3,9 +3,9 @@
 import { useState, useEffect } from "react";
 import { Card, Button, ModelSelectModal, ManualConfigModal } from "@/shared/components";
 import Image from "next/image";
-import EndpointPresetControl from "./EndpointPresetControl";
+import BaseUrlSelect from "./BaseUrlSelect";
 
-export default function CodexToolCard({ tool, isExpanded, onToggle, baseUrl, apiKeys, activeProviders, cloudEnabled, initialStatus }) {
+export default function CodexToolCard({ tool, isExpanded, onToggle, baseUrl, apiKeys, activeProviders, cloudEnabled, initialStatus, tunnelEnabled, tunnelPublicUrl, tailscaleEnabled, tailscaleUrl }) {
   const [codexStatus, setCodexStatus] = useState(initialStatus || null);
   const [checkingCodex, setCheckingCodex] = useState(false);
   const [applying, setApplying] = useState(false);
@@ -281,29 +281,19 @@ model = "${effectiveSubagentModel}"
                   ) : null;
                 })()}
 
-                <EndpointPresetControl
-                  baseUrl={getDisplayUrl()}
-                  apiKey={selectedApiKey}
-                  onBaseUrlChange={setCustomBaseUrl}
-                  onApiKeyChange={setSelectedApiKey}
-                />
-
                 {/* Base URL */}
-                <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
+                <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr] sm:items-center sm:gap-2">
                   <span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">Base URL</span>
                   <span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
-                  <input
-                    type="text"
-                    value={getDisplayUrl()}
-                    onChange={(e) => setCustomBaseUrl(e.target.value)}
-                    placeholder="https://.../v1"
-                    className="w-full min-w-0 px-2 py-2 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5"
+                  <BaseUrlSelect
+                    value={customBaseUrl || getDisplayUrl()}
+                    onChange={setCustomBaseUrl}
+                    requiresExternalUrl={tool.requiresExternalUrl}
+                    tunnelEnabled={tunnelEnabled}
+                    tunnelPublicUrl={tunnelPublicUrl}
+                    tailscaleEnabled={tailscaleEnabled}
+                    tailscaleUrl={tailscaleUrl}
                   />
-                  {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>
 
                 {/* API Key */}

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

@@ -3,9 +3,9 @@
 import { useState, useEffect } from "react";
 import { Card, Button, ModelSelectModal, ManualConfigModal } from "@/shared/components";
 import Image from "next/image";
-import EndpointPresetControl from "./EndpointPresetControl";
+import BaseUrlSelect from "./BaseUrlSelect";
 
-export default function CopilotToolCard({ tool, isExpanded, onToggle, baseUrl, apiKeys, activeProviders, cloudEnabled, initialStatus }) {
+export default function CopilotToolCard({ tool, isExpanded, onToggle, baseUrl, apiKeys, activeProviders, cloudEnabled, initialStatus, tunnelEnabled, tunnelPublicUrl, tailscaleEnabled, tailscaleUrl }) {
   const [status, setStatus] = useState(initialStatus || null);
   const [checking, setChecking] = useState(false);
   const [applying, setApplying] = useState(false);
@@ -206,21 +206,16 @@ export default function CopilotToolCard({ tool, isExpanded, onToggle, baseUrl, a
               </div>
 
               <div className="flex flex-col gap-3">
-                <EndpointPresetControl
-                  baseUrl={getEffectiveBaseUrl()}
-                  apiKey={selectedApiKey}
-                  onBaseUrlChange={setCustomBaseUrl}
-                  onApiKeyChange={setSelectedApiKey}
-                />
-
                 <div className="flex flex-col gap-1">
                   <label className="text-xs font-medium text-text-muted">Base URL</label>
-                  <input
-                    type="text"
-                    value={getEffectiveBaseUrl()}
-                    onChange={(e) => setCustomBaseUrl(e.target.value)}
-                    placeholder="https://.../v1"
-                    className="px-3 py-2 bg-bg-secondary rounded-lg text-sm border border-border focus:outline-none focus:ring-1 focus:ring-primary/50"
+                  <BaseUrlSelect
+                    value={customBaseUrl || getEffectiveBaseUrl()}
+                    onChange={setCustomBaseUrl}
+                    requiresExternalUrl={tool.requiresExternalUrl}
+                    tunnelEnabled={tunnelEnabled}
+                    tunnelPublicUrl={tunnelPublicUrl}
+                    tailscaleEnabled={tailscaleEnabled}
+                    tailscaleUrl={tailscaleUrl}
                   />
                 </div>
 

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

@@ -3,7 +3,7 @@
 import { useState, useEffect, useRef } from "react";
 import { Card, Button, ModelSelectModal, ManualConfigModal } from "@/shared/components";
 import Image from "next/image";
-import EndpointPresetControl from "./EndpointPresetControl";
+import BaseUrlSelect from "./BaseUrlSelect";
 
 const CLOUD_URL = process.env.NEXT_PUBLIC_CLOUD_URL;
 
@@ -17,6 +17,10 @@ export default function DroidToolCard({
   activeProviders,
   cloudEnabled,
   initialStatus,
+  tunnelEnabled,
+  tunnelPublicUrl,
+  tailscaleEnabled,
+  tailscaleUrl,
 }) {
   const [droidStatus, setDroidStatus] = useState(initialStatus || null);
   const [checkingDroid, setCheckingDroid] = useState(false);
@@ -298,29 +302,19 @@ export default function DroidToolCard({
                   </div>
                 )}
 
-                <EndpointPresetControl
-                  baseUrl={getDisplayUrl()}
-                  apiKey={selectedApiKey}
-                  onBaseUrlChange={setCustomBaseUrl}
-                  onApiKeyChange={setSelectedApiKey}
-                />
-
                 {/* Base URL */}
-                <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
+                <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr] sm:items-center sm:gap-2">
                   <span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">Base URL</span>
                   <span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
-                  <input
-                    type="text"
-                    value={getDisplayUrl()}
-                    onChange={(e) => setCustomBaseUrl(e.target.value)}
-                    placeholder="https://.../v1"
-                    className="w-full min-w-0 px-2 py-2 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5"
+                  <BaseUrlSelect
+                    value={customBaseUrl || getDisplayUrl()}
+                    onChange={setCustomBaseUrl}
+                    requiresExternalUrl={tool.requiresExternalUrl}
+                    tunnelEnabled={tunnelEnabled}
+                    tunnelPublicUrl={tunnelPublicUrl}
+                    tailscaleEnabled={tailscaleEnabled}
+                    tailscaleUrl={tailscaleUrl}
                   />
-                  {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 */}

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

@@ -3,7 +3,7 @@
 import { useState, useEffect, useRef } from "react";
 import { Card, Button, ModelSelectModal, ManualConfigModal } from "@/shared/components";
 import Image from "next/image";
-import EndpointPresetControl from "./EndpointPresetControl";
+import BaseUrlSelect from "./BaseUrlSelect";
 
 const ENDPOINT = "/api/cli-tools/hermes-settings";
 
@@ -17,6 +17,10 @@ export default function HermesToolCard({
   activeProviders,
   cloudEnabled,
   initialStatus,
+  tunnelEnabled,
+  tunnelPublicUrl,
+  tailscaleEnabled,
+  tailscaleUrl,
 }) {
   const [hermesStatus, setHermesStatus] = useState(initialStatus || null);
   const [checking, setChecking] = useState(false);
@@ -239,28 +243,18 @@ export default function HermesToolCard({
                   </div>
                 )}
 
-                <EndpointPresetControl
-                  baseUrl={getEffectiveBaseUrl()}
-                  apiKey={selectedApiKey}
-                  onBaseUrlChange={setCustomBaseUrl}
-                  onApiKeyChange={setSelectedApiKey}
-                />
-
-                <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
+                <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr] sm:items-center sm:gap-2">
                   <span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">Base URL</span>
                   <span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
-                  <input
-                    type="text"
-                    value={getEffectiveBaseUrl()}
-                    onChange={(e) => setCustomBaseUrl(e.target.value)}
-                    placeholder="https://.../v1"
-                    className="w-full min-w-0 px-2 py-2 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5"
+                  <BaseUrlSelect
+                    value={customBaseUrl || getEffectiveBaseUrl()}
+                    onChange={setCustomBaseUrl}
+                    requiresExternalUrl={tool.requiresExternalUrl}
+                    tunnelEnabled={tunnelEnabled}
+                    tunnelPublicUrl={tunnelPublicUrl}
+                    tailscaleEnabled={tailscaleEnabled}
+                    tailscaleUrl={tailscaleUrl}
                   />
-                  {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>
 
                 <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">

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

@@ -3,7 +3,7 @@
 import { useState, useEffect, useRef } from "react";
 import { Card, Button, ModelSelectModal, ManualConfigModal } from "@/shared/components";
 import Image from "next/image";
-import EndpointPresetControl from "./EndpointPresetControl";
+import BaseUrlSelect from "./BaseUrlSelect";
 
 export default function OpenClawToolCard({
   tool,
@@ -15,6 +15,10 @@ export default function OpenClawToolCard({
   activeProviders,
   cloudEnabled,
   initialStatus,
+  tunnelEnabled,
+  tunnelPublicUrl,
+  tailscaleEnabled,
+  tailscaleUrl,
 }) {
   const [openclawStatus, setOpenclawStatus] = useState(initialStatus || null);
   const [checkingOpenclaw, setCheckingOpenclaw] = useState(false);
@@ -289,29 +293,19 @@ export default function OpenClawToolCard({
                   </div>
                 )}
 
-                <EndpointPresetControl
-                  baseUrl={getDisplayUrl()}
-                  apiKey={selectedApiKey}
-                  onBaseUrlChange={setCustomBaseUrl}
-                  onApiKeyChange={setSelectedApiKey}
-                />
-
                 {/* Base URL */}
-                <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
+                <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr] sm:items-center sm:gap-2">
                   <span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">Base URL</span>
                   <span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
-                  <input
-                    type="text"
-                    value={getDisplayUrl()}
-                    onChange={(e) => setCustomBaseUrl(e.target.value)}
-                    placeholder="https://.../v1"
-                    className="w-full min-w-0 px-2 py-2 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5"
+                  <BaseUrlSelect
+                    value={customBaseUrl || getDisplayUrl()}
+                    onChange={setCustomBaseUrl}
+                    requiresExternalUrl={tool.requiresExternalUrl}
+                    tunnelEnabled={tunnelEnabled}
+                    tunnelPublicUrl={tunnelPublicUrl}
+                    tailscaleEnabled={tailscaleEnabled}
+                    tailscaleUrl={tailscaleUrl}
                   />
-                  {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 */}

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

@@ -3,9 +3,9 @@
 import { useState, useEffect } from "react";
 import { Card, Button, ModelSelectModal, ManualConfigModal } from "@/shared/components";
 import Image from "next/image";
-import EndpointPresetControl from "./EndpointPresetControl";
+import BaseUrlSelect from "./BaseUrlSelect";
 
-export default function OpenCodeToolCard({ tool, isExpanded, onToggle, baseUrl, apiKeys, activeProviders, cloudEnabled, initialStatus }) {
+export default function OpenCodeToolCard({ tool, isExpanded, onToggle, baseUrl, apiKeys, activeProviders, cloudEnabled, initialStatus, tunnelEnabled, tunnelPublicUrl, tailscaleEnabled, tailscaleUrl }) {
   const [status, setStatus] = useState(initialStatus || null);
   const [checking, setChecking] = useState(false);
   const [applying, setApplying] = useState(false);
@@ -268,29 +268,19 @@ export default function OpenCodeToolCard({ tool, isExpanded, onToggle, baseUrl,
                   </div>
                 )}
 
-                <EndpointPresetControl
-                  baseUrl={getDisplayUrl()}
-                  apiKey={selectedApiKey}
-                  onBaseUrlChange={setCustomBaseUrl}
-                  onApiKeyChange={setSelectedApiKey}
-                />
-
                 {/* Base URL */}
-                <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
+                <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr] sm:items-center sm:gap-2">
                   <span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">Base URL</span>
                   <span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
-                  <input
-                    type="text"
-                    value={getDisplayUrl()}
-                    onChange={(e) => setCustomBaseUrl(e.target.value)}
-                    placeholder="https://.../v1"
-                    className="w-full min-w-0 px-2 py-2 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5"
+                  <BaseUrlSelect
+                    value={customBaseUrl || getDisplayUrl()}
+                    onChange={setCustomBaseUrl}
+                    requiresExternalUrl={tool.requiresExternalUrl}
+                    tunnelEnabled={tunnelEnabled}
+                    tunnelPublicUrl={tunnelPublicUrl}
+                    tailscaleEnabled={tailscaleEnabled}
+                    tailscaleUrl={tailscaleUrl}
                   />
-                  {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>
 
                 {/* API Key */}

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

@@ -12,3 +12,4 @@ export { default as MitmServerCard } from "./MitmServerCard";
 export { default as MitmToolCard } from "./MitmToolCard";
 export { default as MitmLinkCard } from "./MitmLinkCard";
 export { default as EndpointPresetControl } from "./EndpointPresetControl";
+export { default as BaseUrlSelect } from "./BaseUrlSelect";