From 6bdf87de8756a53db6dd4191de9b93beb1cee6bd Mon Sep 17 00:00:00 2001 From: Val Alexander <68980965+BunsDev@users.noreply.github.com> Date: Sat, 25 Apr 2026 04:00:53 -0500 Subject: [PATCH] fix(ui): remove quick config API keys card Remove the misleading API Keys card from the quick settings page. The card was hardcoded to a fixed env-var provider list and routed all actions to the broad Environment config section, which made the Add/Change affordances look more precise than they were. This removes the dead surface and keeps the quick settings grid focused on meaningful controls. Verified: - pnpm test ui/src/ui/views/config-quick.test.ts - CI passed on PR #71496 --- ui/src/ui/app-render.ts | 33 +----------------- ui/src/ui/views/config-quick.test.ts | 2 -- ui/src/ui/views/config-quick.ts | 52 ++-------------------------- 3 files changed, 3 insertions(+), 84 deletions(-) diff --git a/ui/src/ui/app-render.ts b/ui/src/ui/app-render.ts index c06c5b99f78..25dc649a2aa 100644 --- a/ui/src/ui/app-render.ts +++ b/ui/src/ui/app-render.ts @@ -135,11 +135,7 @@ import { import { renderChat } from "./views/chat.ts"; import { renderCommandPalette } from "./views/command-palette.ts"; import { getPresetById, type ConfigPresetId } from "./views/config-presets.ts"; -import { - renderQuickSettings, - type QuickSettingsChannel, - type QuickSettingsApiKey, -} from "./views/config-quick.ts"; +import { renderQuickSettings, type QuickSettingsChannel } from "./views/config-quick.ts"; import { renderConfig, type ConfigProps } from "./views/config.ts"; import { renderCronQuickCreate, @@ -430,13 +426,6 @@ const KNOWN_CHANNEL_IDS = [ { id: "imessage", label: "iMessage" }, ] as const; -const KNOWN_PROVIDER_KEYS = [ - { provider: "anthropic", label: "Anthropic", envKey: "ANTHROPIC_API_KEY" }, - { provider: "openai", label: "OpenAI", envKey: "OPENAI_API_KEY" }, - { provider: "google", label: "Google", envKey: "GOOGLE_API_KEY" }, - { provider: "openrouter", label: "OpenRouter", envKey: "OPENROUTER_API_KEY" }, -] as const; - function formatQuickSettingsLabel(id: string): string { const trimmed = id.trim(); if (!trimmed) { @@ -483,20 +472,6 @@ function extractQuickSettingsChannels(state: AppViewState): QuickSettingsChannel return channels; } -function extractQuickSettingsApiKeys(state: AppViewState): QuickSettingsApiKey[] { - const config = state.configForm ?? state.configSnapshot?.config; - const env = config && typeof config === "object" ? config.env : null; - const envObj = env && typeof env === "object" ? (env as Record) : {}; - const envVars = - envObj.vars && typeof envObj.vars === "object" ? (envObj.vars as Record) : {}; - return KNOWN_PROVIDER_KEYS.map(({ provider, label, envKey }) => { - const value = typeof envVars[envKey] === "string" ? envVars[envKey] : envObj[envKey]; - const isSet = typeof value === "string" && value.trim().length > 0; - const masked = isSet ? `••••${value.slice(-4)}` : undefined; - return { provider, label, masked, isSet }; - }); -} - function extractMcpServerCount(state: AppViewState): number { const config = state.configForm ?? state.configSnapshot?.config; if (!config || typeof config !== "object") { @@ -987,12 +962,6 @@ export function renderApp(state: AppViewState) { state.communicationsActiveSection = "channels"; requestHostUpdate?.(); }, - apiKeys: extractQuickSettingsApiKeys(state), - onApiKeyChange: () => { - state.configSettingsMode = "advanced"; - state.configActiveSection = "env"; - requestHostUpdate?.(); - }, automation: { cronJobCount: state.cronJobs?.length ?? 0, skillCount: state.skillsReport?.skills?.length ?? 0, diff --git a/ui/src/ui/views/config-quick.test.ts b/ui/src/ui/views/config-quick.test.ts index ea69483b1f0..84a825b9c96 100644 --- a/ui/src/ui/views/config-quick.test.ts +++ b/ui/src/ui/views/config-quick.test.ts @@ -14,8 +14,6 @@ function createProps(overrides: Partial = {}): QuickSettings onFastModeToggle: vi.fn(), channels: [], onChannelConfigure: vi.fn(), - apiKeys: [], - onApiKeyChange: vi.fn(), automation: { cronJobCount: 0, skillCount: 0, diff --git a/ui/src/ui/views/config-quick.ts b/ui/src/ui/views/config-quick.ts index ef932ad10e7..6adfb3dc75e 100644 --- a/ui/src/ui/views/config-quick.ts +++ b/ui/src/ui/views/config-quick.ts @@ -28,13 +28,6 @@ export type QuickSettingsChannel = { detail?: string; }; -export type QuickSettingsApiKey = { - provider: string; - label: string; - masked?: string; - isSet: boolean; -}; - export type QuickSettingsAutomation = { cronJobCount: number; skillCount: number; @@ -60,10 +53,6 @@ export type QuickSettingsProps = { channels: QuickSettingsChannel[]; onChannelConfigure?: (channelId: string) => void; - // API Keys - apiKeys: QuickSettingsApiKey[]; - onApiKeyChange?: (provider: string) => void; - // Automations automation: QuickSettingsAutomation; onManageCron?: () => void; @@ -277,43 +266,6 @@ function renderChannelsCard(props: QuickSettingsProps) { `; } -function renderApiKeysCard(props: QuickSettingsProps) { - return html` -
- ${renderCardHeader(icons.plug, "API Keys")} -
- ${props.apiKeys.length === 0 - ? html`
No API keys configured
` - : props.apiKeys.map( - (key) => html` -
- ${key.label} - - ${key.isSet - ? html` - ${key.masked ?? "••••••••"} - - ` - : html``} - -
- `, - )} -
-
- `; -} - function renderAutomationsCard(props: QuickSettingsProps) { const { cronJobCount, skillCount, mcpServerCount } = props.automation; @@ -589,8 +541,8 @@ export function renderQuickSettings(props: QuickSettingsProps) {
${renderStack(renderModelCard(props), renderSecurityCard(props))} ${renderStack(renderChannelsCard(props), renderAutomationsCard(props))} - ${renderStack(renderApiKeysCard(props), renderAppearanceCard(props))} - ${renderStack(renderPersonalCard(props))} ${renderPresetsCard(props)} + ${renderStack(renderAppearanceCard(props))} ${renderStack(renderPersonalCard(props))} + ${renderPresetsCard(props)}
${renderConnectionFooter(props)}