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

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