Skip to content

fix: unify extension LLM config UI and require model before run #205

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
achuvyas-kv merged 1 commit into from
Jul 18, 2026
+130 −173
Merged

fix: unify extension LLM config UI and require model before run #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
229 changes: 105 additions & 124 deletions runners/extension/popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -427,6 +427,17 @@
margin-bottom: 6px;
}

/* LLM config — one labeled field per row, consistent for every provider */
.llm-field {
margin-bottom: 8px;
}
.llm-field:last-child {
margin-bottom: 0;
}
.llm-field > .endpoint-step-label {
margin-bottom: 6px;
}

.toggle {
width: 32px;
height: 18px;
Expand Down Expand Up @@ -496,6 +507,12 @@
.api-key-wrap input[type="text"] {
letter-spacing: 0;
}
/* Keep the placeholder in the regular UI font — the mono/letter-spacing above
is for the typed key value, not the hint text. */
.api-key-wrap input::placeholder {
font-family: "Google Sans", system-ui, sans-serif;
letter-spacing: 0;
}
.eye-btn {
position: absolute;
right: 8px;
Expand Down Expand Up @@ -2140,138 +2157,69 @@
</div>
</div>

<!-- Model -->
<!-- LLM config -->
<div>
<div class="section-label agent-desc-label">Model</div>
<div id="providerDropdown" class="dd" data-open="false" style="margin-bottom: 8px">
<button class="dd-button" type="button">
<span class="label">OpenAI</span>
<span class="chev">
<svg width="12" height="12" viewBox="0 0 24 24">
<path
d="M6 9l6 6 6-6"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</span>
</button>
<div class="dd-menu" role="listbox"></div>
</div>
<div class="section-label agent-desc-label">Model selection</div>

<!-- Endpoint config card (openai-compatible: accordion; azure: plain) -->
<div id="endpointSection" style="display: none; margin-bottom: 8px">
<button
id="endpointCardHead"
type="button"
class="endpoint-card-head"
style="display: none"
>
<span>Configure endpoint</span>
<span class="endpoint-chev">
<svg width="12" height="12" viewBox="0 0 24 24">
<path
d="M6 9l6 6 6-6"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</span>
</button>
<div id="endpointCardBody" class="endpoint-card-body" data-open="true">
<!-- Step 1: Base URL -->
<div class="endpoint-step">
<div class="endpoint-step-label">
Base URL
<span
class="info-tip"
data-tooltip="Root URL of your OpenAI-compatible server, e.g. http://localhost:11434/v1"
>
<svg
width="12"
height="12"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
</span>
</div>
<input
id="baseUrl"
type="text"
placeholder="https://api.openai.com/v1"
autocomplete="off"
spellcheck="false"
/>
</div>
<!-- <div id="endpointDivider1" class="endpoint-divider" style="display: none"></div> -->
<!-- Step 2: API Key -->
<div class="endpoint-step">
<div class="endpoint-step-label">
API Key
<span id="endpointKeyOptional" class="endpoint-optional" style="display: none"
>optional for local servers</span
>
<span
id="endpointKeyHint"
class="info-tip"
style="display: none"
data-tooltip="Leave empty if your server doesn't require authentication."
>
<svg
width="12"
height="12"
viewBox="0 0 24 24"
<!-- Provider -->
<div class="llm-field">
<div class="endpoint-step-label">Provider</div>
<div id="providerDropdown" class="dd" data-open="false">
<button class="dd-button" type="button">
<span class="label">OpenAI</span>
<span class="chev">
<svg width="12" height="12" viewBox="0 0 24 24">
<path
d="M6 9l6 6 6-6"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
</span>
</div>
<div class="api-key-wrap" style="margin-top: 0">
<input id="apiKeyCard" type="password" placeholder="sk-…" autocomplete="off" />
<button id="apiKeyCardEye" class="eye-btn" type="button" title="Show">
<svg id="eyeIconCard" width="14" height="14" viewBox="0 0 24 24">
<g
fill="none"
stroke="currentColor"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z" />
<circle cx="12" cy="12" r="3" />
</g>
</svg>
</button>
</div>
</div>
/>
</svg>
</span>
</button>
<div class="dd-menu" role="listbox"></div>
</div>
</div>

<!-- Standalone API key (simple providers: OpenAI, Anthropic, Google, Groq, DeepSeek) -->
<div id="standaloneApiKey" style="display: none; margin-bottom: 8px">
<!-- API Key -->
<div class="llm-field">
<div class="endpoint-step-label">
API Key
<span id="apiKeyOptional" class="endpoint-optional" style="display: none"
>optional for local servers</span
>
<span
id="apiKeyHint"
class="info-tip"
style="display: none"
data-tooltip="Leave empty if your server doesn't require authentication."
>
<svg
width="12"
height="12"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
</span>
</div>
<div class="api-key-wrap" style="margin-top: 0">
<input id="apiKey" type="password" placeholder="sk-…" autocomplete="off" />
<input
id="apiKey"
type="password"
placeholder="Paste key here"
autocomplete="off"
/>
<button id="apiKeyEye" class="eye-btn" type="button" title="Show">
<svg id="eyeIcon" width="14" height="14" viewBox="0 0 24 24">
<g
Expand All @@ -2288,9 +2236,42 @@
</button>
</div>
</div>
<!-- Model dropdown (outside endpoint card for non-compatible providers) -->
<div id="modelSection">
<div class="endpoint-step-label" style="margin-bottom: 6px">

<!-- Base URL (Azure + OpenAI-compatible only) -->
<div class="llm-field" id="baseUrlField" style="display: none">
<div class="endpoint-step-label">
Base URL
<span
class="info-tip"
data-tooltip="Root URL of your OpenAI-compatible server, e.g. http://localhost:11434/v1"
>
<svg
width="12"
height="12"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
</span>
</div>
<input
id="baseUrl"
type="text"
placeholder="https://api.openai.com/v1"
autocomplete="off"
Comment on lines +2240 to +2268

@coderabbitai coderabbitai Bot Jul 18, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Use provider-neutral Base URL guidance.

This row is also shown for Azure, but its tooltip and placeholder describe an OpenAI-compatible endpoint. Use neutral text or update both values in applyProvider() to avoid directing Azure users to the wrong URL format.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@runners/extension/popup.html` around lines 2240 - 2268, Update the Base URL
guidance associated with the baseUrl field and the corresponding applyProvider()
logic so Azure users receive Azure-appropriate text while OpenAI-compatible
providers retain their existing guidance, or use provider-neutral wording for
both. Keep the label and field behavior unchanged.

spellcheck="false"
/>
</div>
<!-- Model -->
<div id="modelSection" class="llm-field">
<div class="endpoint-step-label">
Model
<button
id="refreshModelsBtn"
Expand Down
Loading
Loading