feat(cli-tools): add browser-local endpoint presets (#819)

Add reusable EndpointPresetControl for CLI tool Base URL/API key
presets, stored in browser localStorage. Wire into Claude, Codex,
OpenCode, Droid, OpenClaw, Hermes, and Copilot cards. Allow
selecting preset API keys not in dashboard keys list.

Thanks @dmdfami for the contribution!

Co-authored-by: dmdfami <dmdfami@users.noreply.github.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dmdfami
2026-05-03 15:35:34 +07:00
committed by decolua
co-authored by Cursor
parent f7e85e3e06
commit 8f2e6685a6
9 changed files with 223 additions and 11 deletions
@@ -3,6 +3,7 @@
import { useState, useEffect } from "react";
import { Card, Button, ModelSelectModal, ManualConfigModal } from "@/shared/components";
import Image from "next/image";
import EndpointPresetControl from "./EndpointPresetControl";
export default function CodexToolCard({ tool, isExpanded, onToggle, baseUrl, apiKeys, activeProviders, cloudEnabled, initialStatus }) {
const [codexStatus, setCodexStatus] = useState(initialStatus || null);
@@ -76,6 +77,7 @@ export default function CodexToolCard({ tool, isExpanded, onToggle, baseUrl, api
};
const getDisplayUrl = () => customBaseUrl || `${baseUrl}/v1`;
const hasCustomSelectedApiKey = selectedApiKey && !apiKeys.some((key) => key.key === selectedApiKey);
const checkCodexStatus = async () => {
setCheckingCodex(true);
@@ -279,6 +281,13 @@ 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">
<span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">Base URL</span>
@@ -301,8 +310,9 @@ model = "${effectiveSubagentModel}"
<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">API Key</span>
<span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
{apiKeys.length > 0 ? (
{apiKeys.length > 0 || selectedApiKey ? (
<select value={selectedApiKey} onChange={(e) => setSelectedApiKey(e.target.value)} className="w-full 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">
{hasCustomSelectedApiKey && <option value={selectedApiKey}>{selectedApiKey}</option>}
{apiKeys.map((key) => <option key={key.id} value={key.key}>{key.key}</option>)}
</select>
) : (