diff --git a/gui/src/fetch-json.ts b/gui/src/fetch-json.ts index a179ee718a..e788ba5fc7 100644 --- a/gui/src/fetch-json.ts +++ b/gui/src/fetch-json.ts @@ -31,5 +31,10 @@ export async function readJsonOrThrow( export async function readJsonIfOk(res: Response): Promise { if (!res.ok) return null; - return readJsonBody(res); + try { + return await readJsonBody(res); + } catch { + // Malformed / non-JSON OK bodies must not throw — callers treat null as "no usable payload". + return null; + } } diff --git a/gui/src/i18n/de.ts b/gui/src/i18n/de.ts index 76639a7f82..214e0653d9 100644 --- a/gui/src/i18n/de.ts +++ b/gui/src/i18n/de.ts @@ -765,6 +765,9 @@ export const de: Record = { "api.confirm": "Bestätigen", "api.deleteAria": "API-Schlüssel löschen", "api.usageSampleInput": "Hallo, Welt!", + "api.keysLoadFailed": "API-Schlüssel konnten nicht geladen werden.", + "api.createFailed": "API-Schlüssel konnte nicht erstellt werden.", + "api.deleteFailed": "API-Schlüssel konnte nicht gelöscht werden.", // Claude Code inbound "nav.claude": "Claude", "claude.subtitle": "GPT, Gemini und andere Modelle in Claude Code verwenden.", @@ -815,6 +818,7 @@ export const de: Record = { "claude.removeMapping": "Regel entfernen", "claude.aliases": "Verfügbare Modelle", "claude.aliasesHint": "Modelle, die im /model-Menü von Claude Code erscheinen.", + "claude.aliasProviderOther": "Sonstiges", "claude.loading": "Lädt…", "claude.loadFail": "Claude-Einstellungen konnten nicht geladen werden", "claude.saved": "Gespeichert.", diff --git a/gui/src/i18n/en.ts b/gui/src/i18n/en.ts index b6712e9fb5..246a3f7567 100644 --- a/gui/src/i18n/en.ts +++ b/gui/src/i18n/en.ts @@ -1068,6 +1068,9 @@ export const en = { "api.usageResponsesTitle": "Responses example", "api.usageMessagesTitle": "Messages example", "api.usageSampleInput": "Hello, world!", + "api.keysLoadFailed": "Could not load API keys.", + "api.createFailed": "Could not create API key.", + "api.deleteFailed": "Could not delete API key.", // Claude Code inbound "nav.claude": "Claude", "claude.subtitle": "Use GPT, Gemini, and other models inside Claude Code.", @@ -1119,6 +1122,7 @@ export const en = { "claude.removeMapping": "Remove rule", "claude.aliases": "Available models", "claude.aliasesHint": "Models that appear in Claude Code's /model menu.", + "claude.aliasProviderOther": "Other", "claude.loading": "Loading…", "claude.loadFail": "Failed to load Claude settings", "claude.saved": "Saved.", diff --git a/gui/src/i18n/ja.ts b/gui/src/i18n/ja.ts index afb6878065..8dd75b331b 100644 --- a/gui/src/i18n/ja.ts +++ b/gui/src/i18n/ja.ts @@ -1022,6 +1022,9 @@ export const ja: Record = { "api.confirm": "確認", "api.deleteAria": "API キーを削除", "api.usageSampleInput": "こんにちは、世界！", + "api.keysLoadFailed": "APIキーを読み込めませんでした。", + "api.createFailed": "APIキーを作成できませんでした。", + "api.deleteFailed": "APIキーを削除できませんでした。", // Claude Code inbound "nav.claude": "Claude", "claude.subtitle": "Claude Code 内で GPT、Gemini などのモデルを使用します。", @@ -1073,6 +1076,7 @@ export const ja: Record = { "claude.removeMapping": "ルールを削除", "claude.aliases": "利用可能なモデル", "claude.aliasesHint": "Claude Code の /model メニューに表示されるモデル。", + "claude.aliasProviderOther": "その他", "claude.loading": "読み込み中…", "claude.loadFail": "Claude 設定の読み込みに失敗しました", "claude.saved": "保存しました。", diff --git a/gui/src/i18n/ko.ts b/gui/src/i18n/ko.ts index 6fea283bd1..e3645402ec 100644 --- a/gui/src/i18n/ko.ts +++ b/gui/src/i18n/ko.ts @@ -785,6 +785,9 @@ export const ko: Record = { "api.confirm": "확인", "api.deleteAria": "API 키 삭제", "api.usageSampleInput": "안녕하세요, 세계!", + "api.keysLoadFailed": "API 키를 불러오지 못했습니다.", + "api.createFailed": "API 키를 만들지 못했습니다.", + "api.deleteFailed": "API 키를 삭제하지 못했습니다.", // Claude Code inbound "nav.claude": "Claude", "claude.subtitle": "Claude Code에서 GPT, Gemini 등 다른 모델도 쓸 수 있게 해줍니다.", @@ -835,6 +838,7 @@ export const ko: Record = { "claude.removeMapping": "규칙 삭제", "claude.aliases": "사용 가능한 모델", "claude.aliasesHint": "Claude Code의 /model 메뉴에 표시되는 모델 목록입니다.", + "claude.aliasProviderOther": "기타", "claude.loading": "불러오는 중…", "claude.loadFail": "Claude 설정을 불러오지 못했습니다", "claude.saved": "저장되었습니다.", diff --git a/gui/src/i18n/ru.ts b/gui/src/i18n/ru.ts index 6b7da51540..19770fac34 100644 --- a/gui/src/i18n/ru.ts +++ b/gui/src/i18n/ru.ts @@ -1067,6 +1067,9 @@ export const ru: Record = { "api.confirm": "Подтвердить", "api.deleteAria": "Удалить API-ключ", "api.usageSampleInput": "Привет, мир!", + "api.keysLoadFailed": "Не удалось загрузить API-ключи.", + "api.createFailed": "Не удалось создать API-ключ.", + "api.deleteFailed": "Не удалось удалить API-ключ.", // Claude Code inbound "nav.claude": "Claude", "claude.subtitle": "Используйте GPT, Gemini и другие модели внутри Claude Code.", @@ -1118,6 +1121,7 @@ export const ru: Record = { "claude.removeMapping": "Удалить правило", "claude.aliases": "Доступные модели", "claude.aliasesHint": "Модели, которые появляются в меню /model в Claude Code.", + "claude.aliasProviderOther": "Другое", "claude.loading": "Загрузка…", "claude.loadFail": "Не удалось загрузить настройки Claude", "claude.saved": "Сохранено.", diff --git a/gui/src/i18n/zh.ts b/gui/src/i18n/zh.ts index c6ae2ae714..7f29a64ee9 100644 --- a/gui/src/i18n/zh.ts +++ b/gui/src/i18n/zh.ts @@ -785,6 +785,9 @@ export const zh: Record = { "api.confirm": "确认", "api.deleteAria": "删除 API 密钥", "api.usageSampleInput": "你好，世界！", + "api.keysLoadFailed": "无法加载 API 密钥。", + "api.createFailed": "无法创建 API 密钥。", + "api.deleteFailed": "无法删除 API 密钥。", // Claude Code inbound "nav.claude": "Claude", "claude.subtitle": "在 Claude Code 中使用 GPT、Gemini 等其他模型。", @@ -835,6 +838,7 @@ export const zh: Record = { "claude.removeMapping": "删除规则", "claude.aliases": "可用模型", "claude.aliasesHint": "Claude Code 的 /model 菜单中显示的模型列表。", + "claude.aliasProviderOther": "其他", "claude.loading": "加载中…", "claude.loadFail": "加载 Claude 设置失败", "claude.saved": "已保存。", diff --git a/gui/src/intl-formatters.ts b/gui/src/intl-formatters.ts index 0b765cdaf0..4693170c7b 100644 --- a/gui/src/intl-formatters.ts +++ b/gui/src/intl-formatters.ts @@ -26,14 +26,19 @@ const CREDIT_DATE_FORMAT = new Intl.DateTimeFormat(undefined, { }); export function formatCreditDate(iso: string): string { - return CREDIT_DATE_FORMAT.format(new Date(iso)); + const date = new Date(iso); + if (Number.isNaN(date.getTime())) return "\u2014"; + return CREDIT_DATE_FORMAT.format(date); } /** Format a USD cost estimate for display. Returns "—" when unavailable. */ export function formatEstimatedUsdValue(value: number, locale?: string): string { if (!Number.isFinite(value) || value < 0) return "\u2014"; - return `~$${cachedNumberFormat(locale, { + const formatted = cachedNumberFormat(locale, { + style: "currency", + currency: "USD", minimumFractionDigits: 4, maximumFractionDigits: 4, - }).format(value)}`; + }).format(value); + return `~${formatted}`; } diff --git a/gui/src/pages/ApiKeys.tsx b/gui/src/pages/ApiKeys.tsx index a986dba2a8..87f0704d74 100644 --- a/gui/src/pages/ApiKeys.tsx +++ b/gui/src/pages/ApiKeys.tsx @@ -1,53 +1,40 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import { IconCheck, IconPlus, IconX } from "../icons"; +import { Notice } from "../ui"; import { useI18n, LOCALES } from "../i18n/shared"; +import { readJsonIfOk, readJsonOrThrow } from "../fetch-json"; import { classifyExternalModel, externalModelId, - gatewayInboundProtocols, type ExternalModelRow, } from "../api-access-models"; +import { + DEFAULT_ENDPOINTS, + deriveApiEndpoints, + type ApiEndpointInfo, + type ApiKeyEntry, + type ModelTestState, +} from "./api-keys-utils"; +import { + ApiKeysAuthPanel, + ApiKeysEndpointsPanel, + ApiKeysManagePanel, + ApiKeysModelsPanel, + ApiKeysUsagePanel, +} from "./api-keys-panels"; -interface ApiKeyEntry { - id: string; - name: string; - prefix: string; - createdAt: string; -} - -interface ApiEndpointInfo { - baseUrl: string; - responses: string; - chatCompletions: string; - messages: string; - models: string; -} - -type ModelTestState = "idle" | "testing" | "ok" | "error"; - -const DEFAULT_ENDPOINTS: ApiEndpointInfo = { - baseUrl: "http://127.0.0.1:10100/v1", - responses: "http://127.0.0.1:10100/v1/responses", - chatCompletions: "http://127.0.0.1:10100/v1/chat/completions", - messages: "http://127.0.0.1:10100/v1/messages", - models: "http://127.0.0.1:10100/v1/models", -}; - -function deriveApiEndpoints(endpoint: string): ApiEndpointInfo { - const responses = endpoint || DEFAULT_ENDPOINTS.responses; - const match = responses.match(/^(.*)\/v1\/responses\/?$/); - const baseUrl = match ? `${match[1]}/v1` : responses.replace(/\/responses\/?$/, ""); - return { - baseUrl, - responses, - chatCompletions: `${baseUrl}/chat/completions`, - messages: `${baseUrl}/messages`, - models: `${baseUrl}/models`, - }; +interface KeysResponse { + keys?: ApiKeyEntry[]; + endpoint?: string; + baseUrl?: string; + responsesEndpoint?: string; + chatCompletionsEndpoint?: string; + messagesEndpoint?: string; + modelsEndpoint?: string; + claudeCodeEnabled?: boolean; } -function formatCreatedDate(iso: string, localeTag?: string): string { - return new Date(iso).toLocaleDateString(localeTag); +interface CreateKeyResponse { + key?: unknown; } export default function ApiKeys({ apiBase }: { apiBase: string }) { @@ -56,6 +43,8 @@ export default function ApiKeys({ apiBase }: { apiBase: string }) { const [keys, setKeys] = useState([]); const [endpoints, setEndpoints] = useState(DEFAULT_ENDPOINTS); const [claudeCodeEnabled, setClaudeCodeEnabled] = useState(true); + const [keysLoadFailed, setKeysLoadFailed] = useState(false); + const [actionError, setActionError] = useState(null); const [models, setModels] = useState([]); const [modelsLoading, setModelsLoading] = useState(false); const [modelsLoadFailed, setModelsLoadFailed] = useState(false); @@ -72,19 +61,26 @@ export default function ApiKeys({ apiBase }: { apiBase: string }) { const fetchKeys = useCallback(async () => { try { const res = await fetch(`${apiBase}/api/keys`); - if (res.ok) { - const data = await res.json(); - setKeys(data.keys ?? []); - setEndpoints({ - baseUrl: data.baseUrl ?? deriveApiEndpoints(data.endpoint ?? "").baseUrl, - responses: data.responsesEndpoint ?? data.endpoint ?? DEFAULT_ENDPOINTS.responses, - chatCompletions: data.chatCompletionsEndpoint ?? deriveApiEndpoints(data.endpoint ?? "").chatCompletions, - messages: data.messagesEndpoint ?? deriveApiEndpoints(data.endpoint ?? "").messages, - models: data.modelsEndpoint ?? deriveApiEndpoints(data.endpoint ?? "").models, - }); - setClaudeCodeEnabled(data.claudeCodeEnabled !== false); + const data = await readJsonIfOk(res); + if (!data) { + // Keep last-good keys/endpoints/Claude setting; only mark the refresh failed. + setKeysLoadFailed(true); + return; } - } catch { /* proxy down */ } + const derived = deriveApiEndpoints(data.endpoint ?? ""); + setKeys(data.keys ?? []); + setEndpoints({ + baseUrl: data.baseUrl ?? derived.baseUrl, + responses: data.responsesEndpoint ?? data.endpoint ?? DEFAULT_ENDPOINTS.responses, + chatCompletions: data.chatCompletionsEndpoint ?? derived.chatCompletions, + messages: data.messagesEndpoint ?? derived.messages, + models: data.modelsEndpoint ?? derived.models, + }); + setClaudeCodeEnabled(data.claudeCodeEnabled !== false); + setKeysLoadFailed(false); + } catch { + setKeysLoadFailed(true); + } }, [apiBase]); const fetchModels = useCallback(async () => { @@ -148,6 +144,7 @@ export default function ApiKeys({ apiBase }: { apiBase: string }) { if (creatingRef.current) return false; creatingRef.current = true; setCreating(true); + setActionError(null); try { const effectiveName = name ?? newName; const res = await fetch(`${apiBase}/api/keys`, { @@ -155,14 +152,17 @@ export default function ApiKeys({ apiBase }: { apiBase: string }) { headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: effectiveName || "default" }), }); - if (!res.ok) return false; - const data = await res.json() as { key?: unknown }; - if (typeof data.key !== "string" || data.key.length === 0) return false; + const data = await readJsonOrThrow(res, t("api.createFailed")); + if (typeof data?.key !== "string" || data.key.length === 0) { + setActionError(t("api.createFailed")); + return false; + } setNewKey(data.key); setNewName(""); void fetchKeys(); return true; } catch { + setActionError(t("api.createFailed")); return false; } finally { creatingRef.current = false; @@ -171,13 +171,22 @@ export default function ApiKeys({ apiBase }: { apiBase: string }) { }; const handleDelete = async (id: string) => { - await fetch(`${apiBase}/api/keys`, { - method: "DELETE", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ id }), - }); - setConfirmDelete(null); - fetchKeys(); + setActionError(null); + try { + const res = await fetch(`${apiBase}/api/keys`, { + method: "DELETE", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ id }), + }); + if (!res.ok) { + setActionError(t("api.deleteFailed")); + return; + } + setConfirmDelete(null); + void fetchKeys(); + } catch { + setActionError(t("api.deleteFailed")); + } }; const copyKey = () => { @@ -258,220 +267,44 @@ export default function ApiKeys({ apiBase }: { apiBase: string }) { {subtitleParts[2]}

-
-

{t("api.endpointsTitle")}

-
-
- {t("api.baseUrl")} - {endpoints.baseUrl} -
-
- {t("api.responsesEndpoint")} - {endpoints.responses} -
-
- {t("api.chatCompletionsEndpoint")} - {endpoints.chatCompletions} -
- {claudeCodeEnabled && ( -
- {t("api.messagesEndpoint")} - {endpoints.messages} -
- )} -
- {t("api.modelsEndpoint")} - {endpoints.models} -
-
-

{t("api.endpointNote")}

-
- -
-

{t("api.authTitle")}

-
    -
  • {t("api.authChatCompletions")}
    • -
  • {t("api.authResponses")}
    • - {claudeCodeEnabled &&
  • {t("api.authMessages")}
    • } -
  • {t("api.authLoopback")}
    • -
-

{t("api.authBaseUrlNote")}

-
- - {newKey && ( -
-

{t("api.newKeyTitle")}

-

{t("api.newKeyNote")}

-
- {newKey} - -
- -
+ {(keysLoadFailed || actionError) && ( + {actionError ?? t("api.keysLoadFailed")} )} -
-

{t("api.generateTitle")}

-
- setNewName(e.target.value)} - className="input" - /> - -
-
- -
-

{t("api.activeKeys", { count: keys.length })}

- {keys.length === 0 ? ( -

{t("api.noKeys")}

- ) : ( -
- - - - - - {keys.map(k => ( - - - - - - - ))} - -
{t("api.colName")}{t("api.colKey")}{t("api.colCreated")}
{k.name}{k.prefix}{formatCreatedDate(k.createdAt, localeTag)} - {confirmDelete === k.id ? ( - - - - - ) : ( - - )} -
-
- )} -
- -
-
-

{t("api.modelsTitle")}

- {t("api.modelsCount", { count: filteredModels.length })} -
-

{t("api.modelsSubtitle")}

- setModelQuery(event.target.value)} - placeholder={t("api.modelsSearch")} - aria-label={t("api.modelsSearch")} - /> - {modelsLoading ? ( -

{t("api.modelsLoading")}

- ) : modelsLoadFailed ? ( -

{t("api.modelsLoadFailed")}

- ) : filteredModels.length === 0 ? ( -

{t("api.modelsEmpty")}

- ) : ( -
- - - - - - - - - - - {filteredModels.map(model => { - const modelId = externalModelId(model); - const testState = modelTests[modelId]?.state ?? "idle"; - return ( - - - - - - - ); - })} - -
{t("api.colModel")}{t("api.colSource")}{t("api.colProtocols")}
-
- {modelId} - {model.displayName !== model.id && {model.displayName}} -
- 		{sourceLabel(model)}{gatewayInboundProtocols(claudeCodeEnabled).map(protocolLabel).join(", ")} -
- - -
- {testState === "ok" &&

{t("api.testSucceeded")}

} - {testState === "error" &&

{modelTests[modelId]?.detail ?? t("api.testFailed")}

} -
-
- )} -
- -
-

{t("api.usageChatTitle")}

- 
{`curl ${endpoints.chatCompletions} \\
-  -H "x-opencodex-api-key: ocx_YOUR_KEY_HERE" \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "model": "gpt-5.4",
-    "messages": [{"role": "user", "content": ${JSON.stringify(t("api.usageSampleInput"))}}]
-  }'`}
-
- -
-

{t("api.usageResponsesTitle")}

- 
{`curl ${endpoints.responses} \\
-  -H "x-opencodex-api-key: ocx_YOUR_KEY_HERE" \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "model": "gpt-5.4",
-    "input": ${JSON.stringify(t("api.usageSampleInput"))}
-  }'`}
-
- - {claudeCodeEnabled && ( -
-

{t("api.usageMessagesTitle")}

- 
{`curl ${endpoints.messages} \\
-  -H "x-opencodex-api-key: ocx_YOUR_KEY_HERE" \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "model": "claude-sonnet-4-6",
-    "max_tokens": 64,
-    "messages": [{"role": "user", "content": ${JSON.stringify(t("api.usageSampleInput"))}}]
-  }'`}
-
- )} + + + { void handleCreate(); }} + onDismissNewKey={() => setNewKey(null)} + onCopyKey={copyKey} + onConfirmDelete={setConfirmDelete} + onCancelDelete={() => setConfirmDelete(null)} + onDelete={(id) => { void handleDelete(id); }} + /> + { void copyModelId(modelId); }} + onTestModel={(model) => { void testModel(model); }} + sourceLabel={sourceLabel} + protocolLabel={protocolLabel} + /> + ); } diff --git a/gui/src/pages/ClaudeCode.tsx b/gui/src/pages/ClaudeCode.tsx index 9bb93febf5..384013135e 100644 --- a/gui/src/pages/ClaudeCode.tsx +++ b/gui/src/pages/ClaudeCode.tsx @@ -1,144 +1,26 @@ import { useCallback, useEffect, useMemo, useState } from "react"; -import { Notice, Select, type SelectOption } from "../ui"; -import { IconPlus, IconX } from "../icons"; -import { Trans } from "../i18n/provider"; -import { useT } from "../i18n/shared"; +import { Notice } from "../ui"; +import { useI18n, useT, LOCALES } from "../i18n/shared"; import { modelLabel } from "../model-display"; +import { readJsonOrThrow } from "../fetch-json"; import { reconcileAutoConnectState } from "./claude-autoconnect"; -import { buildManualEnv, type SidecarBackend, type SidecarOverride } from "./claude-manual-env"; - -interface ClaudeCodeState { - enabled: boolean; - authMode: "subscription" | "proxy"; - autoConnectSupported: boolean; - systemEnv: boolean; - fastMode: boolean | null; - /** Legacy config override (no GUI control anymore) — still disables auto-context when hand-set. */ - maxContextTokens: number | null; - autoContext: boolean; - autoCompactWindow: number | null; - injectAgents: boolean; - smallFastModel: string; - tierModels?: { haiku?: string }; - effectiveModelEnv: Record; - available: string[]; - aliases: { id: string; display_name: string }[]; - webSearchSidecar?: SidecarOverride; - visionSidecar?: SidecarOverride; - port: number; -} - -interface MapRow { from: string; to: string } - -function formatCompactWindow(value: number): string { - return value >= 1_000_000 ? "1M" : `${Math.round(value / 1_000)}k`; -} - -function SettingToggle({ - label, - checked, - onChange, - disabled = false, - describedBy, -}: { - label: string; - checked: boolean; - onChange: (value: boolean) => void; - disabled?: boolean; - describedBy?: string; -}) { - return ( - - ); -} - -export function AutoConnectSetting({ - supported, - checked, - onChange, -}: { - supported: boolean; - checked: boolean; - onChange: (value: boolean) => void; -}) { - const t = useT(); - const unsupportedDescriptionId = supported ? undefined : "claude-system-env-unsupported"; - - return ( -
-
- {t("claude.systemEnv")} - {supported ? ( - {t("claude.systemEnvDesc")} - ) : ( - - - - )} - {supported && checked && ( - - {t("claude.systemEnvWarn")} - - )} -
- -
- ); -} - -export function SmallFastModelSetting({ - value, - tierHaikuModel, - options, - onChange, -}: { - value: string; - tierHaikuModel?: string; - options: SelectOption[]; - onChange: (value: string) => void; -}) { - const t = useT(); - const effectiveHelperModel = tierHaikuModel ?? value; - return ( - <> -
{t("claude.smallFastModel")}
-

- {t("claude.smallFastModelAccurateHint")} -

- setState({ ...state, authMode: v as ClaudeCodeState["authMode"] })} - label={t("claude.authMode")} - style={{ minWidth: 220 }} - portal - /> - - - setState({ ...state, systemEnv })} - /> - -
-
- {t("claude.fastMode")} - {t("claude.fastModeDesc")} -
- -
- -
-
- {t("claude.autoContext")} - {t("claude.autoContextDesc")} - {state.maxContextTokens !== null && {t("claude.autoContextInert")}} -
- setState({ ...state, autoContext })} /> -
- - {state.autoContext && ( -
-
- {t("claude.autoCompactWindow")} - {t("claude.autoCompactWindowDesc")} - {state.autoCompactWindow !== null && {t("claude.autoCompactWindowWarn")}} -
- setState({ - ...state, - [key]: value === "inherit" - ? undefined - : { ...override, backend: value === "auto" ? undefined : value as SidecarBackend }, - })} - label={t("dash.sidecarBackend")} - portal - /> - setState({ ...state, [key]: { ...override, model: e.target.value } })} - placeholder={t("claude.sidecarModelPlaceholder")} - disabled={!override} - aria-label={t("dash.sidecarModel")} - style={{ minWidth: 210 }} - /> -
- - ); - })} - - - ); - - const quickstartSection = ( - <> -
{t("claude.quickstart")}
-

- 
ocx claude
-
- {t("claude.manualEnv")} - 
{manualEnv}
-
- - ); - - const smallFastSection = ( - setState({ ...state, smallFastModel })} - /> - ); - - const modelMapSection = ( - <> -
{t("claude.modelMap")} {rows.length}
-

{t("claude.modelMapHint")}

-
- {rows.map((row, i) => ( -
- setRows(prev => prev.map((r, j) => j === i ? { ...r, from: e.target.value } : r))} - style={{ flex: 1 }} - /> - → - setRows(prev => prev.map((r, j) => j === i ? { ...r, to: e.target.value } : r))} - style={{ flex: 1 }} - /> - -
- ))} -
-
- -
- -
- -
- - ); - - const aliasesSection = ( - <> -
{t("claude.aliases")} {state.aliases.length}
-

{t("claude.aliasesHint")}

- {state.aliases.length === 0 ? ( -
{t("claude.none")}
- ) : ( -
- {Array.from( - state.aliases.reduce((groups, a) => { - const m = /\(([^)]+)\)\s*$/.exec(a.display_name); - const provider = m ? m[1]! : "etc"; - (groups.get(provider) ?? groups.set(provider, []).get(provider)!).push(a); - return groups; - }, new Map()), - ).map(([provider, aliasRows]) => ( -
-
{provider} · {aliasRows.length}
-
- {aliasRows.map(a => ( -
- {a.id} - {a.display_name} -
- ))} -
-
- ))} -
- )} - - ); - return ( <>

{t("claude.pageTitle")}

{t("claude.subtitle")}

{status && {status}} - {settingsSection} - {quickstartSection} - {smallFastSection} - {modelMapSection} - {aliasesSection} + + + setState({ ...state, smallFastModel })} + /> + { void save(); }} /> + ); } diff --git a/gui/src/pages/api-keys-panels.tsx b/gui/src/pages/api-keys-panels.tsx new file mode 100644 index 0000000000..b6ec5f9fd7 --- /dev/null +++ b/gui/src/pages/api-keys-panels.tsx @@ -0,0 +1,332 @@ +import { IconCheck, IconPlus, IconX } from "../icons"; +import { useI18n } from "../i18n/shared"; +import { + externalModelId, + gatewayInboundProtocols, + type ExternalModelRow, +} from "../api-access-models"; +import { + formatCreatedDate, + type ApiEndpointInfo, + type ApiKeyEntry, + type ModelTestState, +} from "./api-keys-utils"; + +export function ApiKeysEndpointsPanel({ + endpoints, + claudeCodeEnabled, +}: { + endpoints: ApiEndpointInfo; + claudeCodeEnabled: boolean; +}) { + const { t } = useI18n(); + return ( +
+

{t("api.endpointsTitle")}

+
+
+ {t("api.baseUrl")} + {endpoints.baseUrl} +
+
+ {t("api.responsesEndpoint")} + {endpoints.responses} +
+
+ {t("api.chatCompletionsEndpoint")} + {endpoints.chatCompletions} +
+ {claudeCodeEnabled && ( +
+ {t("api.messagesEndpoint")} + {endpoints.messages} +
+ )} +
+ {t("api.modelsEndpoint")} + {endpoints.models} +
+
+

{t("api.endpointNote")}

+
+ ); +} + +export function ApiKeysAuthPanel({ claudeCodeEnabled }: { claudeCodeEnabled: boolean }) { + const { t } = useI18n(); + return ( +
+

{t("api.authTitle")}

+
    +
  • {t("api.authChatCompletions")}
    • +
  • {t("api.authResponses")}
    • + {claudeCodeEnabled &&
  • {t("api.authMessages")}
    • } +
  • {t("api.authLoopback")}
    • +
+

{t("api.authBaseUrlNote")}

+
+ ); +} + +export function ApiKeysManagePanel({ + keys, + keysLoadFailed, + newName, + creating, + newKey, + copied, + confirmDelete, + localeTag, + onNewNameChange, + onCreate, + onDismissNewKey, + onCopyKey, + onConfirmDelete, + onCancelDelete, + onDelete, +}: { + keys: ApiKeyEntry[]; + keysLoadFailed: boolean; + newName: string; + creating: boolean; + newKey: string | null; + copied: boolean; + confirmDelete: string | null; + localeTag?: string; + onNewNameChange: (value: string) => void; + onCreate: () => void; + onDismissNewKey: () => void; + onCopyKey: () => void; + onConfirmDelete: (id: string) => void; + onCancelDelete: () => void; + onDelete: (id: string) => void; +}) { + const { t } = useI18n(); + + return ( + <> + {newKey && ( +
+

{t("api.newKeyTitle")}

+

{t("api.newKeyNote")}

+
+ {newKey} + +
+ +
+ )} + +
+

{t("api.generateTitle")}

+
+ onNewNameChange(e.target.value)} + className="input" + /> + +
+
+ +
+

{t("api.activeKeys", { count: keys.length })}

+ {keys.length > 0 ? ( +
+ + + + + + {keys.map(k => ( + + + + + + + ))} + +
{t("api.colName")}{t("api.colKey")}{t("api.colCreated")}
{k.name}{k.prefix}{formatCreatedDate(k.createdAt, localeTag)} + {confirmDelete === k.id ? ( + + + + + ) : ( + + )} +
+
+ ) : keysLoadFailed ? ( +

{t("api.keysLoadFailed")}

+ ) : ( +

{t("api.noKeys")}

+ )} +
+ + ); +} + +export function ApiKeysModelsPanel({ + filteredModels, + modelsLoading, + modelsLoadFailed, + modelQuery, + copiedModelId, + modelTests, + claudeCodeEnabled, + onModelQueryChange, + onCopyModelId, + onTestModel, + sourceLabel, + protocolLabel, +}: { + filteredModels: ExternalModelRow[]; + modelsLoading: boolean; + modelsLoadFailed: boolean; + modelQuery: string; + copiedModelId: string | null; + modelTests: Record; + claudeCodeEnabled: boolean; + onModelQueryChange: (value: string) => void; + onCopyModelId: (modelId: string) => void; + onTestModel: (model: ExternalModelRow) => void; + sourceLabel: (model: ExternalModelRow) => string; + protocolLabel: (protocol: string) => string; +}) { + const { t } = useI18n(); + return ( +
+
+

{t("api.modelsTitle")}

+ {t("api.modelsCount", { count: filteredModels.length })} +
+

{t("api.modelsSubtitle")}

+ onModelQueryChange(event.target.value)} + placeholder={t("api.modelsSearch")} + aria-label={t("api.modelsSearch")} + /> + {modelsLoading ? ( +

{t("api.modelsLoading")}

+ ) : modelsLoadFailed ? ( +

{t("api.modelsLoadFailed")}

+ ) : filteredModels.length === 0 ? ( +

{t("api.modelsEmpty")}

+ ) : ( +
+ + + + + + + + + + + {filteredModels.map(model => { + const modelId = externalModelId(model); + const testState = modelTests[modelId]?.state ?? "idle"; + return ( + + + + + + + ); + })} + +
{t("api.colModel")}{t("api.colSource")}{t("api.colProtocols")}
+
+ {modelId} + {model.displayName !== model.id && {model.displayName}} +
+ 		{sourceLabel(model)}{gatewayInboundProtocols(claudeCodeEnabled).map(protocolLabel).join(", ")} +
+ + +
+ {testState === "ok" &&

{t("api.testSucceeded")}

} + {testState === "error" &&

{modelTests[modelId]?.detail ?? t("api.testFailed")}

} +
+
+ )} +
+ ); +} + +export function ApiKeysUsagePanel({ + endpoints, + claudeCodeEnabled, +}: { + endpoints: ApiEndpointInfo; + claudeCodeEnabled: boolean; +}) { + const { t } = useI18n(); + const sampleInput = JSON.stringify(t("api.usageSampleInput")); + + return ( + <> +
+

{t("api.usageChatTitle")}

+ 
{`curl ${endpoints.chatCompletions} \\
+  -H "x-opencodex-api-key: ocx_YOUR_KEY_HERE" \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "model": "gpt-5.4",
+    "messages": [{"role": "user", "content": ${sampleInput}}]
+  }'`}
+
+ +
+

{t("api.usageResponsesTitle")}

+ 
{`curl ${endpoints.responses} \\
+  -H "x-opencodex-api-key: ocx_YOUR_KEY_HERE" \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "model": "gpt-5.4",
+    "input": ${sampleInput}
+  }'`}
+
+ + {claudeCodeEnabled && ( +
+

{t("api.usageMessagesTitle")}

+ 
{`curl ${endpoints.messages} \\
+  -H "x-opencodex-api-key: ocx_YOUR_KEY_HERE" \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "model": "claude-sonnet-4-6",
+    "max_tokens": 64,
+    "messages": [{"role": "user", "content": ${sampleInput}}]
+  }'`}
+
+ )} + + ); +} diff --git a/gui/src/pages/api-keys-utils.ts b/gui/src/pages/api-keys-utils.ts new file mode 100644 index 0000000000..1c5c109c53 --- /dev/null +++ b/gui/src/pages/api-keys-utils.ts @@ -0,0 +1,41 @@ +export interface ApiKeyEntry { + id: string; + name: string; + prefix: string; + createdAt: string; +} + +export interface ApiEndpointInfo { + baseUrl: string; + responses: string; + chatCompletions: string; + messages: string; + models: string; +} + +export type ModelTestState = "idle" | "testing" | "ok" | "error"; + +export const DEFAULT_ENDPOINTS: ApiEndpointInfo = { + baseUrl: "http://127.0.0.1:10100/v1", + responses: "http://127.0.0.1:10100/v1/responses", + chatCompletions: "http://127.0.0.1:10100/v1/chat/completions", + messages: "http://127.0.0.1:10100/v1/messages", + models: "http://127.0.0.1:10100/v1/models", +}; + +export function deriveApiEndpoints(endpoint: string): ApiEndpointInfo { + const responses = endpoint || DEFAULT_ENDPOINTS.responses; + const match = responses.match(/^(.*)\/v1\/responses\/?$/); + const baseUrl = match ? `${match[1]}/v1` : responses.replace(/\/responses\/?$/, ""); + return { + baseUrl, + responses, + chatCompletions: `${baseUrl}/chat/completions`, + messages: `${baseUrl}/messages`, + models: `${baseUrl}/models`, + }; +} + +export function formatCreatedDate(iso: string, localeTag?: string): string { + return new Date(iso).toLocaleDateString(localeTag); +} diff --git a/gui/src/pages/claude-code-sections.tsx b/gui/src/pages/claude-code-sections.tsx new file mode 100644 index 0000000000..70f84f3c26 --- /dev/null +++ b/gui/src/pages/claude-code-sections.tsx @@ -0,0 +1,280 @@ +import { IconPlus, IconX } from "../icons"; +import { useT } from "../i18n/shared"; +import { Trans } from "../i18n/provider"; +import { Select } from "../ui"; +import { + applySidecarBackendChange, + applySidecarModelChange, + sidecarSelectValue, + type SidecarSelectValue, +} from "./claude-code-sidecar"; +import { AutoConnectSetting, SettingToggle } from "./claude-code-settings"; +import type { ClaudeCodeState, MapRow } from "./claude-code-types"; + +export function ClaudeCodeSettingsCard({ + state, + autoCompactOptions, + onStateChange, +}: { + state: ClaudeCodeState; + autoCompactOptions: { value: string; label: string }[]; + onStateChange: (next: ClaudeCodeState) => void; +}) { + const t = useT(); + + return ( +
+
+
+ {t("claude.enabledLabel")} + {t("claude.enabledHint")} +
+ onStateChange({ ...state, enabled })} /> +
+ +
+
+ {t("claude.authMode")} + {t("claude.authModeHint")} +
+ { + const v = e.target.value; + onStateChange({ ...state, fastMode: v === "auto" ? null : v === "on" }); + }} + className="text-label font-medium" + aria-label={t("claude.fastMode")} + style={{ padding: "5px 10px", borderRadius: "var(--radius-xs)", border: "1px solid var(--border)", background: "var(--surface)", color: "var(--text)" }} + > + + + + +
+ +
+
+ {t("claude.autoContext")} + {t("claude.autoContextDesc")} + {state.maxContextTokens !== null && {t("claude.autoContextInert")}} +
+ onStateChange({ ...state, autoContext })} /> +
+ + {state.autoContext && ( +
+
+ {t("claude.autoCompactWindow")} + {t("claude.autoCompactWindowDesc")} + {state.autoCompactWindow !== null && {t("claude.autoCompactWindowWarn")}} +
+ { + // Auto may exist as an empty in-memory draft so the model input + // stays enabled; empty Auto serializes to null on save. + onStateChange({ + ...state, + [key]: applySidecarBackendChange(override, value as SidecarSelectValue), + }); + }} + label={t("dash.sidecarBackend")} + portal + /> + { + onStateChange({ + ...state, + [key]: applySidecarModelChange(override, e.target.value), + }); + }} + placeholder={t("claude.sidecarModelPlaceholder")} + disabled={!override} + aria-label={t("dash.sidecarModel")} + style={{ minWidth: 210 }} + /> +
+
+ ); + })} + + ); +} + +export function ClaudeCodeQuickstartSection({ manualEnv }: { manualEnv: string }) { + const t = useT(); + return ( + <> +
{t("claude.quickstart")}
+

+ 
ocx claude
+
+ {t("claude.manualEnv")} + 
{manualEnv}
+
+ + ); +} + +export function ClaudeCodeModelMapSection({ + rows, + onRowsChange, + onSave, +}: { + rows: MapRow[]; + onRowsChange: (rows: MapRow[]) => void; + onSave: () => void; +}) { + const t = useT(); + return ( + <> +
{t("claude.modelMap")} {rows.length}
+

{t("claude.modelMapHint")}

+
+ {rows.map((row, i) => ( +
+ onRowsChange(rows.map((r, j) => j === i ? { ...r, from: e.target.value } : r))} + style={{ flex: 1 }} + /> + → + onRowsChange(rows.map((r, j) => j === i ? { ...r, to: e.target.value } : r))} + style={{ flex: 1 }} + /> + +
+ ))} +
+
+ +
+ +
+ +
+ + ); +} + +type AliasRow = { id: string; display_name: string }; + +/** Sentinel bucket key for aliases whose display_name has no trailing `(provider)`. */ +const ALIAS_PROVIDER_OTHER = "etc"; + +function groupAliasesByProvider(aliases: AliasRow[]): Array<[string, AliasRow[]]> { + const groups = new Map(); + for (const alias of aliases) { + const match = /\(([^)]+)\)\s*$/.exec(alias.display_name); + const provider = match ? match[1]! : ALIAS_PROVIDER_OTHER; + const bucket = groups.get(provider); + if (bucket) bucket.push(alias); + else groups.set(provider, [alias]); + } + return Array.from(groups); +} + +export function ClaudeCodeAliasesSection({ aliases }: { aliases: AliasRow[] }) { + const t = useT(); + return ( + <> +
{t("claude.aliases")} {aliases.length}
+

{t("claude.aliasesHint")}

+ {aliases.length === 0 ? ( +
{t("claude.none")}
+ ) : ( +
+ {groupAliasesByProvider(aliases).map(([provider, aliasRows]) => ( +
+
{provider === ALIAS_PROVIDER_OTHER ? t("claude.aliasProviderOther") : provider} · {aliasRows.length}
+
+ {aliasRows.map(a => ( +
+ {a.id} + {a.display_name} +
+ ))} +
+
+ ))} +
+ )} + + ); +} diff --git a/gui/src/pages/claude-code-settings.tsx b/gui/src/pages/claude-code-settings.tsx new file mode 100644 index 0000000000..384684f706 --- /dev/null +++ b/gui/src/pages/claude-code-settings.tsx @@ -0,0 +1,106 @@ +import { Trans } from "../i18n/provider"; +import { useT } from "../i18n/shared"; +import { Select, type SelectOption } from "../ui"; + +export function SettingToggle({ + label, + checked, + onChange, + disabled = false, + describedBy, +}: { + label: string; + checked: boolean; + onChange: (value: boolean) => void; + disabled?: boolean; + describedBy?: string; +}) { + return ( + + ); +} + +export function AutoConnectSetting({ + supported, + checked, + onChange, +}: { + supported: boolean; + checked: boolean; + onChange: (value: boolean) => void; +}) { + const t = useT(); + const unsupportedDescriptionId = supported ? undefined : "claude-system-env-unsupported"; + + return ( +
+
+ {t("claude.systemEnv")} + {supported ? ( + {t("claude.systemEnvDesc")} + ) : ( + + + + )} + {supported && checked && ( + + {t("claude.systemEnvWarn")} + + )} +
+ +
+ ); +} + +export function SmallFastModelSetting({ + value, + tierHaikuModel, + options, + onChange, +}: { + value: string; + tierHaikuModel?: string; + options: SelectOption[]; + onChange: (value: string) => void; +}) { + const t = useT(); + const effectiveHelperModel = tierHaikuModel ?? value; + return ( + <> +
{t("claude.smallFastModel")}
+

+ {t("claude.smallFastModelAccurateHint")} +

+