#21293: fix(ui): use live() directive for agent Primary model select to fix wrong selection display
app: web-ui
size: XS
Cluster:
Model Management Enhancements
## Problem
In the Agents panel, the **Primary Model** info label correctly shows the configured model (e.g. `sonnet-4-6`), but the **Model Selection** dropdown below it shows the wrong model — typically `opus` (the first option in the list).
## Root Cause
Lit processes property bindings (`.value`) on a `<select>` element **before** its child nodes (options) are committed in the same render cycle. On the initial render:
1. `.value = "anthropic/claude-sonnet-4-6"` is applied — but no matching `<option>` exists yet → browser ignores the assignment → `select.value` defaults to the first available option (`opus`)
2. Options are then rendered as children
On subsequent renders, if `effectivePrimary` hasn't changed in JS, Lit's dirty-check skips the `.value` update — so the wrong selection persists indefinitely.
This is a [documented Lit limitation](https://lit.dev/docs/templates/directives/#live) for `<select>` elements with dynamically rendered options.
## Fix
Wrap the binding with Lit's `live()` directive:
```ts
// before
.value=${effectivePrimary ?? ""}
// after
.value=${live(effectivePrimary ?? "")}
```
`live()` compares against the **live DOM value** on every render instead of the cached JS value. This forces `.value` to be re-applied whenever the DOM state drifts from the desired value — which happens right after options are populated.
## Files Changed
- `ui/src/ui/views/agents.ts` — add `live` import, apply to Primary model `<select>`
<!-- greptile_comment -->
<h3>Greptile Summary</h3>
Fixes a rendering bug in the Agents panel where the Primary Model dropdown incorrectly displayed the first option (typically `opus`) instead of the configured model (e.g. `sonnet-4-6`). The fix wraps the `.value` binding with Lit's `live()` directive, which forces the value to be re-applied whenever the DOM state drifts from the desired value. This addresses a documented Lit limitation where property bindings on `<select>` elements are processed before child `<option>` nodes are committed in the same render cycle.
- Added import for `live` directive from `lit/directives/live.js`
- Applied `live()` to the `.value` binding on the Primary model `<select>` element
<h3>Confidence Score: 5/5</h3>
- This PR is safe to merge with minimal risk
- The change is minimal, well-documented, and follows the official Lit framework guidance for this exact scenario. The `live()` directive is specifically designed to solve the documented limitation with `<select>` elements and dynamically rendered options. The fix is surgical - only adding the necessary import and wrapping a single binding - with no side effects or behavioral changes beyond the intended bug fix.
- No files require special attention
<sub>Last reviewed commit: 99b1abf</sub>
<!-- greptile_other_comments_section -->
<sub>(3/5) Reply to the agent's comments like "Can you suggest a fix for this @greptileai?" or ask follow-up questions!</sub>
<!-- /greptile_comment -->
Most Similar PRs
#11806: fix(ui): agent model dropdown not reflecting actual primary model
by arturhoo · 2026-02-08
83.4%
#8678: fix(control-ui): restore useDefineForClassFields for Lit reactivity
by chainyoda · 2026-02-04
71.2%
#18867: fix: route slug generator LLM call through configured provider
by Celegormhenry · 2026-02-17
68.8%
#20968: fix(ui): enable save button when editing default agent models
by Gitjay11 · 2026-02-19
68.2%
#9628: fix: resolve tsconfig rootDir errors by separating UI config (AI-as...
by KGBos · 2026-02-05
68.0%
#9195: Fix: Control UI fails to render new messages after chat.history Web...
by vishaltandale00 · 2026-02-05
68.0%
#15118: Fix webchat ghost bubble when model replies with NO_REPLY
by jwchmodx · 2026-02-13
67.8%
#23286: fix: use configured model in llm-slug-generator instead of hardcoded …
by wsman · 2026-02-22
67.7%
#20712: fix(subagents): prioritize agent runtime default model over global ...
by sourcesavant · 2026-02-19
67.5%
#22977: fix(ui): resolve agent names from config in session dropdown
by NikhilGaddam · 2026-02-21
67.0%