Bart/9router
1
0
Fork 0
mirror of https://github.com/decolua/9router.git synced 2026-05-08 12:01:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
decolua
2026-05-05 20:22:21 +07:00
parent 1c8314252b
commit 6344abcf8d
11 changed files with 340 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

156
src/app/(dashboard)/dashboard/cli-tools/components/BaseUrlSelect.js Normal file
View File

@@ -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>
);
}

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

@@ -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 */}

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

@@ -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 */}

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

@@ -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>

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

@@ -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 */}

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

@@ -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">

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

@@ -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 */}

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

@@ -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 */}

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

@@ -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";

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

@@ -482,42 +482,49 @@ export default function ProviderDetailPage() {
setShowBulkProxyModal(false);
};
const handleBulkApplyProxyPool = async () => {
if (selectedConnectionIds.length === 0) return;
const proxyPoolId = bulkProxyPoolId === "__none__" ? null : bulkProxyPoolId;
const applyProxyAssignments = async (assignments) => {
setBulkUpdatingProxy(true);
try {
const results = [];
for (const connectionId of selectedConnectionIds) {
const results = await Promise.all(assignments.map(async ({ connectionId, proxyPoolId }) => {
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);
results.push(false);
console.log("Error applying proxy for", connectionId, e);
return false;
}
}
const failedCount = results.filter((ok) => !ok).length;
if (failedCount > 0) {
alert(`Updated with ${failedCount} failed request(s).`);
}
}));
const failed = results.filter((ok) => !ok).length;
if (failed > 0) alert(`Updated with ${failed} 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 = [
{ 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 activePools = proxyPools.filter((p) => p.isActive === true);
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">
<Select
label="Proxy Pool"
value={bulkProxyPoolId}
onChange={(e) => setBulkProxyPoolId(e.target.value)}
options={bulkProxyOptions}
placeholder="None"
/>
<div className="flex flex-col gap-3">
<button
onClick={handleApplyOneToOne}
disabled={bulkUpdatingProxy || activePools.length === 0}
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"
>
<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>
<p className="text-xs text-text-muted">Selecting None will unbind selected connections from proxy pool.</p>
<div className="flex flex-col gap-2 sm:flex-row">
<Button onClick={handleBulkApplyProxyPool} fullWidth disabled={!canApplyBulkProxy}>
{bulkUpdatingProxy ? "Applying..." : "Apply"}
</Button>
<Button onClick={closeBulkProxyModal} variant="ghost" fullWidth disabled={bulkUpdatingProxy}>
Cancel
</Button>
<div className="border-t border-black/[0.06] dark:border-white/[0.06] pt-2">
<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">
<button
onClick={() => handleApplySinglePool(null)}
disabled={bulkUpdatingProxy}
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">
<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">