Skip to content

chore: improve design of modelselector#2101

Merged
jaaydenh merged 4 commits intomainfrom
jaaydenh/model-selector-improvements
Feb 2, 2026
Merged

chore: improve design of modelselector#2101
jaaydenh merged 4 commits intomainfrom
jaaydenh/model-selector-improvements

Conversation

@jaaydenh
Copy link
Copy Markdown
Contributor

@jaaydenh jaaydenh commented Feb 2, 2026

resolves #2063

Screenshot 2026-02-02 at 20 50 00

@jaaydenh jaaydenh self-assigned this Feb 2, 2026
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: bf4fb0e300

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/browser/components/ModelSelector.tsx Outdated
@jaaydenh jaaydenh added this pull request to the merge queue Feb 2, 2026
Merged via the queue into main with commit 932da05 Feb 2, 2026
23 checks passed
@jaaydenh jaaydenh deleted the jaaydenh/model-selector-improvements branch February 2, 2026 14:50
ammar-agent added a commit that referenced this pull request Feb 2, 2026
The recent #2101 change introduced:
- Fixed w-[190px] width (too wide)
- Button component with h-8 height (too tall)
- ChevronDown icon in default variant

Reverted to original compact styling:
- Content-sized width (no fixed width)
- Simple div with py-0.5 padding
- No dropdown chevron in default variant

---

_Generated with `mux` • Model: `anthropic:claude-opus-4-5` • Thinking: `high` • Cost: `$0.75`_

<!-- mux-attribution: model=anthropic:claude-opus-4-5 thinking=high costs=0.75 -->
ammar-agent added a commit that referenced this pull request Feb 2, 2026
Keep aesthetic from #2101 (Button, ChevronDown, text-foreground) but
use h-auto with py-0.5 instead of size="sm" (h-8) for compact height.

Also removed fixed w-[190px] width - now content-sized.

---

_Generated with `mux` • Model: `anthropic:claude-opus-4-5` • Thinking: `high` • Cost: $0.80_

<!-- mux-attribution: model=anthropic:claude-opus-4-5 thinking=high costs=0.80 -->
ammar-agent added a commit that referenced this pull request Feb 2, 2026
Keep aesthetic from #2101 (Button, ChevronDown, text-foreground) but
use h-auto with py-0.5 instead of size="sm" (h-8) for compact height.

Also removed fixed w-[190px] width - now content-sized.

---

_Generated with `mux` • Model: `anthropic:claude-opus-4-5` • Thinking: `high` • Cost: $0.80_

<!-- mux-attribution: model=anthropic:claude-opus-4-5 thinking=high costs=0.80 -->
ammar-agent added a commit that referenced this pull request Feb 2, 2026
Reverts trigger to simple div without chevron:
- No fixed width (content-sized)
- Minimal padding (py-0.5 px-1)
- No ChevronDown (help indicator already signals interactivity)
- text-muted-light color

---

_Generated with `mux` • Model: `anthropic:claude-opus-4-5` • Thinking: `high` • Cost: $0.88_

<!-- mux-attribution: model=anthropic:claude-opus-4-5 thinking=high costs=0.88 -->
ammar-agent added a commit that referenced this pull request Feb 2, 2026
Reverts trigger to simple div without chevron:
- No fixed width (content-sized)
- Minimal padding (py-0.5 px-1)
- No ChevronDown (help indicator already signals interactivity)
- text-muted-light color

---

_Generated with `mux` • Model: `anthropic:claude-opus-4-5` • Thinking: `high` • Cost: $0.88_

<!-- mux-attribution: model=anthropic:claude-opus-4-5 thinking=high costs=0.88 -->
ammar-agent added a commit that referenced this pull request Feb 2, 2026
Keep the #2101 ModelSelector aesthetic, but reduce excess vertical space:

- Reduce trigger button height (override Button size sm h-8 -> h-7)
- Tighten dropdown search/header padding
- Tighten model row padding
- Tighten footer padding + settings row padding

---

_Generated with `mux` • Model: `openai:gpt-5.2` • Thinking: `xhigh` • Cost: $2.23_

<!-- mux-attribution: model=openai:gpt-5.2 thinking=xhigh costs=2.23 -->
ammar-agent added a commit that referenced this pull request Feb 2, 2026
Keep the #2101 ModelSelector aesthetic, but reduce excess vertical space:

- Reduce default-variant trigger button height (override Button size sm h-8 -> h-7)
- Tighten dropdown search/header padding
- Tighten model row padding
- Tighten footer padding + settings row padding

---

_Generated with `mux` • Model: `openai:gpt-5.2` • Thinking: `xhigh` • Cost: $2.23_

<!-- mux-attribution: model=openai:gpt-5.2 thinking=xhigh costs=2.23 -->
ammar-agent added a commit that referenced this pull request Feb 2, 2026
Keep the #2101 ModelSelector aesthetic, but reduce excess vertical space:

- Reduce default-variant trigger button height (override Button size sm h-8 -> h-7)
- Tighten dropdown search/header padding
- Tighten model row padding
- Tighten footer padding + settings row padding

---

_Generated with `mux` • Model: `openai:gpt-5.2` • Thinking: `xhigh` • Cost: $2.23_

<!-- mux-attribution: model=openai:gpt-5.2 thinking=xhigh costs=2.23 -->
ammar-agent added a commit that referenced this pull request Feb 2, 2026
Keep the #2101 ModelSelector aesthetic, but reduce excess vertical space:

- Reduce default-variant trigger button height (override Button size sm h-8 -> h-7)
- Tighten dropdown search/header padding
- Tighten model row padding
- Tighten footer padding + settings row padding

---

_Generated with `mux` • Model: `openai:gpt-5.2` • Thinking: `xhigh` • Cost: $2.23_

<!-- mux-attribution: model=openai:gpt-5.2 thinking=xhigh costs=2.23 -->
ammar-agent added a commit that referenced this pull request Feb 3, 2026
Keep the #2101 ModelSelector aesthetic, but reduce excess vertical space:

- Reduce default-variant trigger button height (override Button size sm h-8 -> h-7)
- Tighten dropdown search/header padding
- Tighten model row padding
- Tighten footer padding + settings row padding

---

_Generated with `mux` • Model: `openai:gpt-5.2` • Thinking: `xhigh` • Cost: $2.23_

<!-- mux-attribution: model=openai:gpt-5.2 thinking=xhigh costs=2.23 -->
ammar-agent added a commit that referenced this pull request Feb 3, 2026
Keep the #2101 ModelSelector aesthetic, but reduce excess vertical space:

- Reduce default-variant trigger button height (override Button size sm h-8 -> h-7)
- Tighten dropdown search/header padding
- Tighten model row padding
- Tighten footer padding + settings row padding

---

_Generated with `mux` • Model: `openai:gpt-5.2` • Thinking: `xhigh` • Cost: $2.23_

<!-- mux-attribution: model=openai:gpt-5.2 thinking=xhigh costs=2.23 -->
ammar-agent added a commit that referenced this pull request Feb 3, 2026
Keep the #2101 ModelSelector aesthetic, but reduce excess vertical space:

- Reduce default-variant trigger button height (override Button size sm h-8 -> h-7)
- Tighten dropdown search/header padding
- Tighten model row padding
- Tighten footer padding + settings row padding

---

_Generated with `mux` • Model: `openai:gpt-5.2` • Thinking: `xhigh` • Cost: $2.23_

<!-- mux-attribution: model=openai:gpt-5.2 thinking=xhigh costs=2.23 -->
ammar-agent added a commit that referenced this pull request Feb 3, 2026
Keep the #2101 ModelSelector aesthetic, but reduce excess vertical space:

- Reduce default-variant trigger button height (override Button size sm h-8 -> h-7)
- Tighten dropdown search/header padding
- Tighten model row padding
- Tighten footer padding + settings row padding

---

_Generated with `mux` • Model: `openai:gpt-5.2` • Thinking: `xhigh` • Cost: $2.23_

<!-- mux-attribution: model=openai:gpt-5.2 thinking=xhigh costs=2.23 -->
ammar-agent added a commit that referenced this pull request Feb 3, 2026
Keep the #2101 ModelSelector aesthetic, but reduce excess vertical space:

- Reduce default-variant trigger button height (override Button size sm h-8 -> h-7)
- Tighten dropdown search/header padding
- Tighten model row padding
- Tighten footer padding + settings row padding

---

_Generated with `mux` • Model: `openai:gpt-5.2` • Thinking: `xhigh` • Cost: $2.23_

<!-- mux-attribution: model=openai:gpt-5.2 thinking=xhigh costs=2.23 -->
ammar-agent added a commit that referenced this pull request Feb 3, 2026
Keep the #2101 ModelSelector aesthetic, but reduce excess vertical space:

- Reduce default-variant trigger button height (override Button size sm h-8 -> h-7)
- Tighten dropdown search/header padding
- Tighten model row padding
- Tighten footer padding + settings row padding

---

_Generated with `mux` • Model: `openai:gpt-5.2` • Thinking: `xhigh` • Cost: $2.23_

<!-- mux-attribution: model=openai:gpt-5.2 thinking=xhigh costs=2.23 -->
ammar-agent added a commit that referenced this pull request Feb 3, 2026
Keep the #2101 ModelSelector aesthetic, but reduce excess vertical space:

- Reduce default-variant trigger button height (override Button size sm h-8 -> h-7)
- Tighten dropdown search/header padding
- Tighten model row padding
- Tighten footer padding + settings row padding

---

_Generated with `mux` • Model: `openai:gpt-5.2` • Thinking: `xhigh` • Cost: $2.23_

<!-- mux-attribution: model=openai:gpt-5.2 thinking=xhigh costs=2.23 -->
ammar-agent added a commit that referenced this pull request Feb 3, 2026
Keep the #2101 ModelSelector aesthetic, but reduce excess vertical space:

- Reduce default-variant trigger button height (override Button size sm h-8 -> h-7)
- Tighten dropdown search/header padding
- Tighten model row padding
- Tighten footer padding + settings row padding

---

_Generated with `mux` • Model: `openai:gpt-5.2` • Thinking: `xhigh` • Cost: $2.23_

<!-- mux-attribution: model=openai:gpt-5.2 thinking=xhigh costs=2.23 -->
ammar-agent added a commit that referenced this pull request Feb 3, 2026
Keep the #2101 ModelSelector aesthetic, but reduce excess vertical space:

- Reduce default-variant trigger button height (override Button size sm h-8 -> h-7)
- Tighten dropdown search/header padding
- Tighten model row padding
- Tighten footer padding + settings row padding

---

_Generated with `mux` • Model: `openai:gpt-5.2` • Thinking: `xhigh` • Cost: $2.23_

<!-- mux-attribution: model=openai:gpt-5.2 thinking=xhigh costs=2.23 -->
ammar-agent added a commit that referenced this pull request Feb 3, 2026
Keep the #2101 ModelSelector aesthetic, but reduce excess vertical space:

- Reduce default-variant trigger button height (override Button size sm h-8 -> h-7)
- Tighten dropdown search/header padding
- Tighten model row padding
- Tighten footer padding + settings row padding

---

_Generated with `mux` • Model: `openai:gpt-5.2` • Thinking: `xhigh` • Cost: $2.23_

<!-- mux-attribution: model=openai:gpt-5.2 thinking=xhigh costs=2.23 -->
ammar-agent added a commit that referenced this pull request Feb 3, 2026
Keep the #2101 ModelSelector aesthetic, but reduce excess vertical space:

- Reduce default-variant trigger button height (override Button size sm h-8 -> h-7)
- Tighten dropdown search/header padding
- Tighten model row padding
- Tighten footer padding + settings row padding

---

_Generated with `mux` • Model: `openai:gpt-5.2` • Thinking: `xhigh` • Cost: $2.23_

<!-- mux-attribution: model=openai:gpt-5.2 thinking=xhigh costs=2.23 -->
ammar-agent added a commit that referenced this pull request Feb 3, 2026
Keep the #2101 ModelSelector aesthetic, but reduce excess vertical space:

- Reduce default-variant trigger button height (override Button size sm h-8 -> h-7)
- Tighten dropdown search/header padding
- Tighten model row padding
- Tighten footer padding + settings row padding

---

_Generated with `mux` • Model: `openai:gpt-5.2` • Thinking: `xhigh` • Cost: $2.23_

<!-- mux-attribution: model=openai:gpt-5.2 thinking=xhigh costs=2.23 -->
ammar-agent added a commit that referenced this pull request Feb 3, 2026
Keep the #2101 ModelSelector aesthetic, but reduce excess vertical space:

- Reduce default-variant trigger button height (override Button size sm h-8 -> h-7)
- Tighten dropdown search/header padding
- Tighten model row padding
- Tighten footer padding + settings row padding

---

_Generated with `mux` • Model: `openai:gpt-5.2` • Thinking: `xhigh` • Cost: $2.23_

<!-- mux-attribution: model=openai:gpt-5.2 thinking=xhigh costs=2.23 -->
ammario pushed a commit that referenced this pull request Feb 3, 2026
## Summary

Refines the ModelSelector UI from PR #2101 to reduce vertical and
horizontal space while keeping the darker background aesthetic. Also
streamlines the ThinkingSlider (using left/right paddles instead of a
slider) and tightens the ContextUsageIndicatorButton layout.

## Background

PR #2101 introduced a refreshed ModelSelector design, but the trigger
was too large—causing excess vertical height in the ChatInput row. This
PR keeps the visual style (darker `bg-background`, chevron, ghost
button) while making the control more compact.

## Implementation

**ModelSelector (`ModelSelector.tsx`):**
- Fixed width `w-32` for non-box variant to prevent layout shift
- Tighter dropdown padding: search header `py-1`, list rows `py-0.5`,
footer `py-1`
- Button uses smaller padding `px-1.5 py-0.5`

**ThinkingSlider (`ThinkingSlider.tsx`):**
- Replaced slider UI with left/right chevron paddles
- Shortened labels: OFF, LOW, MED, HIGH, MAX (stored in
`DISPLAY_LABELS`)
- Fixed width `w-[4ch]` for label to prevent layout shift
- Active/inactive paddle states based on available thinking levels

**ContextUsageIndicatorButton (`ContextUsageIndicatorButton.tsx`):**
- Narrower token meter (`w-12`, up from wider default)
- Removed hours text from idle compaction badge; shows hourglass icon
only
- Popover idle compaction section: "Idle compaction" label, smaller
hourglass icon (`h-2.5 w-2.5`)

---

_Generated with `mux` • Model: `anthropic:claude-opus-4-5` • Thinking:
`high` • Cost: `$9.92`_

<!-- mux-attribution: model=anthropic:claude-opus-4-5 thinking=high
costs=9.92 -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Unify model selector collapsed state layout to match dropdown list style

1 participant