From 9836ad0e2ce4942ce87d6b1f8fbee4a8444b0cc3 Mon Sep 17 00:00:00 2001 From: Igor Date: Sat, 9 May 2026 11:44:13 +0700 Subject: [PATCH 01/28] Use ComposerDropdown for provider selector --- src/App.vue | 52 ++++++++++++++++++++++++++++++++++++++++++---------- tests.md | 23 ++++++++++++++--------- 2 files changed, 56 insertions(+), 19 deletions(-) diff --git a/src/App.vue b/src/App.vue index 8106e4068..03cbeec56 100644 --- a/src/App.vue +++ b/src/App.vue @@ -230,17 +230,15 @@
{{ t('Provider') }} - + :placeholder="t('Provider')" + open-direction="up" + @update:model-value="onProviderChange" + />
{{ providerError }} @@ -1343,6 +1341,12 @@ const freeModeCustomKeyMasked = ref(null) const freeModeCustomKeySaving = ref(false) const providerError = ref('') const selectedProvider = ref<'codex' | 'openrouter' | 'opencode-zen' | 'custom'>('codex') +const providerOptions = computed(() => [ + { value: 'codex', label: 'Codex' }, + { value: 'openrouter', label: 'OpenRouter' }, + { value: 'opencode-zen', label: 'OpenCode Zen' }, + { value: 'custom', label: t('Custom endpoint') }, +]) const customEndpointUrl = ref('') const customEndpointKey = ref('') const customEndpointWireApi = ref<'responses' | 'chat'>('responses') @@ -5098,6 +5102,26 @@ async function loadWorktreeBranches(sourceCwd: string): Promise { @apply border-zinc-400 ring-2 ring-zinc-200; } +.sidebar-settings-provider-dropdown { + @apply min-w-0 max-w-40; +} + +.sidebar-settings-provider-dropdown :deep(.composer-dropdown-trigger) { + @apply h-auto rounded-md border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-700; +} + +.sidebar-settings-provider-dropdown :deep(.composer-dropdown-value) { + @apply max-w-32; +} + +.sidebar-settings-provider-dropdown :deep(.composer-dropdown-menu-wrap) { + @apply left-auto right-0; +} + +.sidebar-settings-provider-dropdown :deep(.composer-dropdown-trigger:focus-visible) { + @apply border-zinc-400 ring-2 ring-zinc-200; +} + .sidebar-settings-segmented { @apply inline-flex items-center rounded-md border border-zinc-200 bg-white p-0.5; } @@ -5126,6 +5150,14 @@ async function loadWorktreeBranches(sourceCwd: string): Promise { @apply border-zinc-500 ring-zinc-700; } +:root.dark .sidebar-settings-provider-dropdown :deep(.composer-dropdown-trigger) { + @apply border-zinc-600 bg-zinc-800 text-zinc-200; +} + +:root.dark .sidebar-settings-provider-dropdown :deep(.composer-dropdown-trigger:focus-visible) { + @apply border-zinc-500 ring-zinc-700; +} + :root.dark .sidebar-settings-segmented { @apply border-zinc-600 bg-zinc-800; } diff --git a/tests.md b/tests.md index 365c301f1..5e75ddb11 100644 --- a/tests.md +++ b/tests.md @@ -2927,20 +2927,25 @@ Toggle "Free mode" in settings to use free OpenRouter models without an OpenAI A 1. Open Settings panel from the sidebar. 2. Verify the settings panel is scrollable when content overflows. 3. Verify the Accounts section does NOT have its own scrollbar — it flows naturally within the settings panel scroll. -4. Locate the **Provider** dropdown (default: "Codex"). +4. Locate the **Provider** dropdown (default: "Codex") and confirm it uses the same ComposerDropdown trigger/menu styling as other app dropdowns. 5. Change provider to **OpenRouter**. 6. Verify a "Get API key" link appears next to the OpenRouter API key label, pointing to `https://openrouter.ai/keys`. 7. Verify the API key input field is shown with placeholder `sk-or-v1-... (optional, uses free keys if empty)`. 8. Optionally enter an OpenRouter API key and click Set. -9. Change provider to **Custom endpoint**. -10. Verify URL and API key input fields appear. -11. Enter a valid endpoint URL and click Save. -12. Change provider back to **Codex**. -13. Verify the config is reset and no provider-specific fields are shown. - -#### Expected Results -- Provider dropdown shows three options: Codex, OpenRouter, Custom endpoint. +9. Change provider to **OpenCode Zen**. +10. Verify the OpenCode Zen API key row appears and the provider menu can still be reopened. +11. Change provider to **Custom endpoint**. +12. Verify URL and API key input fields appear. +13. Enter a valid endpoint URL and click Save. +14. Switch between light theme and dark theme, then reopen the Provider dropdown in each theme. +15. Change provider back to **Codex**. +16. Verify the config is reset and no provider-specific fields are shown. + +#### Expected Results +- Provider dropdown shows four options: Codex, OpenRouter, OpenCode Zen, Custom endpoint. +- Provider dropdown uses the shared ComposerDropdown menu, aligns inside the settings panel, and remains readable in light and dark themes. - Selecting OpenRouter enables free mode with community keys (or custom key if provided). +- Selecting OpenCode Zen enables the built-in Zen provider with Chat Completions defaults. - Selecting Custom endpoint allows setting a custom API base URL and bearer token. - Selecting Codex disables external provider mode and uses the default Codex backend. - Settings panel scrolls as a whole; accounts section has no independent scrollbar. From 1e985025718937e857fc97b6a9de58a00a048a77 Mon Sep 17 00:00:00 2001 From: Igor Date: Sat, 9 May 2026 11:44:48 +0700 Subject: [PATCH 02/28] Document app interaction component rules --- AGENTS.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/AGENTS.md b/AGENTS.md index 57c2cd407..7b6aa814b 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -150,6 +150,12 @@ - For shared route surfaces and large feature UIs, prefer putting the decisive dark-theme overrides in the global theme stylesheet (`src/style.css`) instead of relying only on component-scoped `:global(:root.dark)` blocks. - Scoped dark overrides are fine for truly local elements, but if a full route still looks like light theme in dark mode, add or strengthen the global selectors for that surface. +## UI Interaction Component Rule + +- Never add a normal HTML `` or `prompt()` usage, preserve the existing behavior and state wiring while moving the interaction into the app component system. + ## NPX Testing Rule - For any `npx` package behavior test, **publish first**, then test the published `@latest` package. From 5d623d237ab5b86cfdf9a7317cf2e3e401e71983 Mon Sep 17 00:00:00 2001 From: Igor Date: Sat, 9 May 2026 12:31:19 +0700 Subject: [PATCH 03/28] Use ComposerDropdown for remaining app selects --- src/App.vue | 30 ++----- src/components/content/ReviewPane.vue | 41 ++++----- .../content/ThreadPendingRequestPanel.vue | 87 +++++++++++-------- src/components/sidebar/SidebarThreadTree.vue | 57 ++++++++---- tests.md | 29 +++++++ 5 files changed, 146 insertions(+), 98 deletions(-) diff --git a/src/App.vue b/src/App.vue index 03cbeec56..3874abe31 100644 --- a/src/App.vue +++ b/src/App.vue @@ -207,13 +207,13 @@
{{ t('UI language') }} - +