← Back to PRs

#21293: fix(ui): use live() directive for agent Primary model select to fix wrong selection display

by soohanpark open 2026-02-19 21:53 View on GitHub →
app: web-ui size: XS
## 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