feat(chat): change model and reasoning effort from composer

CHANGELOG.md

@@ -7,6 +7,11 @@ between releases do not reach them. Remote-PC runtime bundles are versioned sepa
 
 ## [Unreleased]
 
+### Added
+- Change models and reasoning effort from the chat composer for Codex, Claude Code and pi
+  without leaving chat or clearing a draft; Escape or clicking outside dismisses the selection.
+  ([#523](https://github.com/devswha/herdr-web-ui/pull/523) by @suho-han)
+
 ### Fixed
 - Secret input and the Codex follow-up fallback validate the live screen, so a password
   prompt or collapsed question queue in scrollback cannot send input into the current program.

DESIGN.md

@@ -808,9 +808,12 @@ One set for both themes: the card is island black wherever it shows.
   `--fw-medium`; the level follows a middle dot in `--text-dim`, as the agent's own words with
   only the first letter drawn as a capital (`::first-letter`, the text is not rewritten); a pane
   that records no level draws no dot and no dash, only the name. On the
-  fill the ring's track is `--border-strong`; a ring left bare on the card keeps `--border`. It is display only: a `span` with no role, no
-  focus, no hover or pressed state, no pointer cursor and no chevron; the ring inside it is the
-  one thing to press on desktop; mobile keeps the ring inert. The `title` of the model is the id as received, and the level's is its
+  fill the ring's track is `--border-strong`; a ring left bare on the card keeps `--border`.
+  For Codex, Claude Code and pi, model and effort are separate buttons that open selection
+  cards. They are disabled while disconnected, working, submitting or answering another prompt.
+  Escape or clicking outside cancels the menu stack without changing the draft or selection.
+  Other agents keep display-only labels. The context ring is a separate desktop control and
+  remains inert on mobile. The `title` of the model is the id as received, and the level's is its
   sentence; behind a name the id is also repeated as `.visually-hidden` text, since a touch
   cannot reach a title. A pane that names no model draws no pill: the mark and the ring stand
   alone, with a dim `Model —` and the level between them if the pane records only a level.
@@ -828,7 +831,8 @@ One set for both themes: the card is island black wherever it shows.
   suffix is dropped.
 - What does not fit the row gives way in this order: the task chip's words (icon and count below
   a `640px` card), then the reasoning level and model name according to the measured row. A long
-  identifier can shorten inside the pill; the context ring remains visible. The row is measured
+  identifier can shorten inside the pill; selectable model and effort buttons stay together
+  with their labels. The context ring remains visible. The row is measured
   again after fonts arrive and the context label opens or closes. The input card keeps one row
   of controls on desktop and phones.
 - Every agent has one primary control: Stop while working with an empty draft, Send with text,

docs/development.md

@@ -75,6 +75,7 @@ bun scripts/keyboard-viewport-regression.ts   # keyboard, rotation and measured
 bun scripts/keyboard-viewport-demo-regression.ts # original real-app viewport suite on disposable demo fixtures
 bun scripts/droplet-demo-regression.ts        # real-app alerts below the header, keyboard and landscape
 bun scripts/chat-greeting-demo-regression.ts  # an empty chat's greeting: centred on a desktop, docked on a phone
+bun scripts/model-change-demo-regression.ts # model and effort selection in chat, dismissal, drafts and mobile controls
 bun scripts/composer-fit-demo-regression.ts   # one Send/Stop control, pending Send now actions, context/label fit and Chat font sizing
 bun scripts/held-rows-demo-regression.ts      # held messages: the fold under an approval card, its button, a row's error
 bun scripts/prompt-dock-demo-regression.ts    # the prompt card docked over the input card: its place, its height on a short phone, the grip, a typed pick

scripts/ci-browser.sh

@@ -29,6 +29,7 @@ bun scripts/file-viewer-mobile-regression.ts
 bun scripts/droplet-demo-regression.ts
 bun scripts/chat-greeting-demo-regression.ts
 bun scripts/composer-fit-demo-regression.ts
+bun scripts/model-change-demo-regression.ts
 bun scripts/held-rows-demo-regression.ts
 bun scripts/prompt-dock-demo-regression.ts
 bun scripts/machine-dialog-regression.ts

scripts/composer-fit-demo-regression.ts

@@ -14,6 +14,7 @@ import { openSettingsPage } from "./settings-page.ts";
 // two background tasks, in the state a case asks for, and its conversation names that case's
 // model, the level xhigh and a context window; an upload never answers, so its sentence stays.
 // All files and HTTP traffic stay in this disposable, loopback-only app; no herdr session is opened.
+// Clickable model controls and compact buttons are covered by model-change-demo-regression.ts.
 const repo = join(import.meta.dir, "..");
 const app = mkdtempSync(join(tmpdir(), "herdr-composer-fit-demo-"));
 // an id the composer cannot name is drawn as received, in the mono face: the widest label there is
@@ -224,7 +225,7 @@ try {
           await toggleRing(page, true);
           const opened = await measure(page);
           await drawn(page, opened.draw as Draw, `${agent} ${width}px, context opened`);
-          assert.equal(opened.card.height, row.card.height);
+          assert.ok(Math.abs(opened.card.height - row.card.height) <= 2, `${agent} ${width}px: opening context changed card height: ${JSON.stringify({ before: row, after: opened })}`);
           await toggleRing(page, false);
         }
         await page.getByRole("textbox", { name: "Message", exact: true }).fill("");