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

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

@@ -161,6 +161,10 @@ export default function CLIToolsPageClient({ machineId }) {
       onToggle: () => setExpandedTool(expandedTool === toolId ? null : toolId),
       baseUrl: getBaseUrl(),
       apiKeys,
+      tunnelEnabled,
+      tunnelPublicUrl,
+      tailscaleEnabled,
+      tailscaleUrl,
     };
 
     switch (toolId) {

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
+                  <BaseUrlSelect
-                    type="text"
+                    value={customBaseUrl || getDisplayUrl()}
-                    value={getDisplayUrl()}
+                    onChange={setCustomBaseUrl}
-                    onChange={(e) => setCustomBaseUrl(e.target.value)}
+                    requiresExternalUrl={tool.requiresExternalUrl}
-                    placeholder="https://.../v1"
+                    tunnelEnabled={tunnelEnabled}
-                    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"
+                    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
+                  <BaseUrlSelect
-                    type="text"
+                    value={customBaseUrl || getDisplayUrl()}
-                    value={getDisplayUrl()}
+                    onChange={setCustomBaseUrl}
-                    onChange={(e) => setCustomBaseUrl(e.target.value)}
+                    requiresExternalUrl={tool.requiresExternalUrl}
-                    placeholder="https://.../v1"
+                    tunnelEnabled={tunnelEnabled}
-                    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"
+                    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
+                  <BaseUrlSelect
-                    type="text"
+                    value={customBaseUrl || getEffectiveBaseUrl()}
-                    value={getEffectiveBaseUrl()}
+                    onChange={setCustomBaseUrl}
-                    onChange={(e) => setCustomBaseUrl(e.target.value)}
+                    requiresExternalUrl={tool.requiresExternalUrl}
-                    placeholder="https://.../v1"
+                    tunnelEnabled={tunnelEnabled}
-                    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"
+                    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
+                  <BaseUrlSelect
-                    type="text"
+                    value={customBaseUrl || getDisplayUrl()}
-                    value={getDisplayUrl()}
+                    onChange={setCustomBaseUrl}
-                    onChange={(e) => setCustomBaseUrl(e.target.value)}
+                    requiresExternalUrl={tool.requiresExternalUrl}
-                    placeholder="https://.../v1"
+                    tunnelEnabled={tunnelEnabled}
-                    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"
+                    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
+                <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr] sm:items-center sm:gap-2">
-                  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">
                   <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
+                  <BaseUrlSelect
-                    type="text"
+                    value={customBaseUrl || getEffectiveBaseUrl()}
-                    value={getEffectiveBaseUrl()}
+                    onChange={setCustomBaseUrl}
-                    onChange={(e) => setCustomBaseUrl(e.target.value)}
+                    requiresExternalUrl={tool.requiresExternalUrl}
-                    placeholder="https://.../v1"
+                    tunnelEnabled={tunnelEnabled}
-                    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"
+                    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
+                  <BaseUrlSelect
-                    type="text"
+                    value={customBaseUrl || getDisplayUrl()}
-                    value={getDisplayUrl()}
+                    onChange={setCustomBaseUrl}
-                    onChange={(e) => setCustomBaseUrl(e.target.value)}
+                    requiresExternalUrl={tool.requiresExternalUrl}
-                    placeholder="https://.../v1"
+                    tunnelEnabled={tunnelEnabled}
-                    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"
+                    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
+                  <BaseUrlSelect
-                    type="text"
+                    value={customBaseUrl || getDisplayUrl()}
-                    value={getDisplayUrl()}
+                    onChange={setCustomBaseUrl}
-                    onChange={(e) => setCustomBaseUrl(e.target.value)}
+                    requiresExternalUrl={tool.requiresExternalUrl}
-                    placeholder="https://.../v1"
+                    tunnelEnabled={tunnelEnabled}
-                    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"
+                    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";

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

@@ -482,42 +482,49 @@ export default function ProviderDetailPage() {
     setShowBulkProxyModal(false);
   };
 
-  const handleBulkApplyProxyPool = async () => {
+  const applyProxyAssignments = async (assignments) => {
-    if (selectedConnectionIds.length === 0) return;
-
-    const proxyPoolId = bulkProxyPoolId === "__none__" ? null : bulkProxyPoolId;
     setBulkUpdatingProxy(true);
     try {
-      const results = [];
+      const results = await Promise.all(assignments.map(async ({ connectionId, proxyPoolId }) => {
-      for (const connectionId of selectedConnectionIds) {
         try {
           const res = await fetch(`/api/providers/${connectionId}`, {
             method: "PUT",
             headers: { "Content-Type": "application/json" },
             body: JSON.stringify({ proxyPoolId }),
           });
-          results.push(res.ok);
+          return res.ok;
         } catch (e) {
-          console.log("Error applying bulk proxy pool for", connectionId, e);
+          console.log("Error applying proxy for", connectionId, e);
-          results.push(false);
+          return false;
         }
-      }
+      }));
-
+      const failed = results.filter((ok) => !ok).length;
-      const failedCount = results.filter((ok) => !ok).length;
+      if (failed > 0) alert(`Updated with ${failed} failed request(s).`);
-      if (failedCount > 0) {
-        alert(`Updated with ${failedCount} failed request(s).`);
-      }
-
       await fetchConnections();
-      clearSelection();
       setShowBulkProxyModal(false);
-    } catch (error) {
-      console.log("Error applying bulk proxy pool:", error);
     } finally {
       setBulkUpdatingProxy(false);
     }
   };
 
+  const handleApplySinglePool = (proxyPoolId) => {
+    const targets = connections.map((c) => ({ connectionId: c.id, proxyPoolId }));
+    return applyProxyAssignments(targets);
+  };
+
+  const handleApplyOneToOne = () => {
+    const activePools = proxyPools.filter((p) => p.isActive === true);
+    if (activePools.length === 0) {
+      alert("No active proxy pools available.");
+      return;
+    }
+    const targets = connections.map((c, i) => ({
+      connectionId: c.id,
+      proxyPoolId: activePools[i % activePools.length].id,
+    }));
+    return applyProxyAssignments(targets);
+  };
+
 
   const isSelected = (connectionId) => selectedConnectionIds.includes(connectionId);
 
@@ -566,43 +573,69 @@ export default function ProviderDetailPage() {
     </div>
   );
 
-  const bulkProxyOptions = [
+  const activePools = proxyPools.filter((p) => p.isActive === true);
-    { value: "__none__", label: "None" },
-    ...proxyPools.map((pool) => ({ value: pool.id, label: pool.name })),
-  ];
-
-  const bulkHint = selectedConnectionIds.length === 0
-    ? "Select one or more connections, then click Proxy Action."
-    : selectedProxySummary;
-
-  const canApplyBulkProxy = selectedConnectionIds.length > 0 && !bulkUpdatingProxy;
 
   const bulkActionModal = (
     <Modal
       isOpen={showBulkProxyModal}
       onClose={closeBulkProxyModal}
-      title={`Proxy Action (${selectedConnectionIds.length} selected)`}
+      title={`Apply Proxy (${connections.length} connections)`}
     >
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-3">
-        <Select
+        <button
-          label="Proxy Pool"
+          onClick={handleApplyOneToOne}
-          value={bulkProxyPoolId}
+          disabled={bulkUpdatingProxy || activePools.length === 0}
-          onChange={(e) => setBulkProxyPoolId(e.target.value)}
+          className="flex items-center justify-between gap-3 rounded-lg border border-primary/30 bg-primary/5 px-3 py-2.5 text-left transition-colors hover:bg-primary/10 disabled:cursor-not-allowed disabled:opacity-50"
-          options={bulkProxyOptions}
+        >
-          placeholder="None"
+          <div className="flex items-center gap-2 min-w-0">
-        />
+            <span className="material-symbols-outlined text-primary text-[20px]">sync_alt</span>
+            <div className="min-w-0">
+              <p className="text-sm font-medium text-text-main">One-to-one (rotate)</p>
+              <p className="text-[11px] text-text-muted">
+                Distribute {activePools.length} active pool(s) across {connections.length} connection(s)
+              </p>
+            </div>
+          </div>
+          <span className="material-symbols-outlined text-text-muted">chevron_right</span>
+        </button>
 
-        <p className="text-xs text-text-muted">{bulkHint}</p>
+        <div className="border-t border-black/[0.06] dark:border-white/[0.06] pt-2">
-        <p className="text-xs text-text-muted">Selecting None will unbind selected connections from proxy pool.</p>
+          <p className="px-1 pb-1 text-[11px] uppercase tracking-wide text-text-muted">Apply single pool to all</p>
-
+          <div className="flex flex-col">
-        <div className="flex flex-col gap-2 sm:flex-row">
+            <button
-          <Button onClick={handleBulkApplyProxyPool} fullWidth disabled={!canApplyBulkProxy}>
+              onClick={() => handleApplySinglePool(null)}
-            {bulkUpdatingProxy ? "Applying..." : "Apply"}
+              disabled={bulkUpdatingProxy}
-          </Button>
+              className="flex items-center justify-between gap-3 rounded-lg px-3 py-2 text-left transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.04] disabled:cursor-not-allowed disabled:opacity-50"
-          <Button onClick={closeBulkProxyModal} variant="ghost" fullWidth disabled={bulkUpdatingProxy}>
+            >
-            Cancel
+              <div className="flex items-center gap-2">
-          </Button>
+                <span className="material-symbols-outlined text-text-muted text-[18px]">link_off</span>
+                <span className="text-sm text-text-main">None (unbind all)</span>
+              </div>
+            </button>
+            {proxyPools.map((pool) => (
+              <button
+                key={pool.id}
+                onClick={() => handleApplySinglePool(pool.id)}
+                disabled={bulkUpdatingProxy || pool.isActive !== true}
+                className="flex items-center justify-between gap-3 rounded-lg px-3 py-2 text-left transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.04] disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                <div className="flex items-center gap-2 min-w-0">
+                  <span className="material-symbols-outlined text-text-muted text-[18px]">lan</span>
+                  <span className="truncate text-sm text-text-main">{pool.name}</span>
+                  {pool.isActive !== true && (
+                    <span className="text-[10px] text-text-muted">(inactive)</span>
+                  )}
+                </div>
+              </button>
+            ))}
+          </div>
         </div>
+
+        {bulkUpdatingProxy && <p className="text-xs text-text-muted">Applying...</p>}
+
+        <Button onClick={closeBulkProxyModal} variant="ghost" fullWidth disabled={bulkUpdatingProxy}>
+          Cancel
+        </Button>
       </div>
     </Modal>
   );
@@ -953,6 +986,16 @@ export default function ProviderDetailPage() {
           <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <h2 className="text-lg font-semibold">Connections</h2>
             <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
+              {connections.length > 0 && proxyPools.length > 0 && (
+                <Button
+                  size="sm"
+                  variant="secondary"
+                  icon="lan"
+                  onClick={() => setShowBulkProxyModal(true)}
+                >
+                  Apply Proxy
+                </Button>
+              )}
               {/* Thinking config */}
               {/* {thinkingConfig && (
                 <div className="flex items-center gap-2">