feat(chat-ui): redesign composer bottom bar with split Talk control and reasoning-effort chip#100445
Merged
Conversation
openclaw-barnacle
Bot
added
docs
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: bf3eabab89
ℹ️ 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".
Contributor
|
Codex review: needs maintainer review before merge. Reviewed July 5, 2026, 6:15 PM ET / 22:15 UTC. Summary Reproducibility: not applicable. for bug reproduction; this is a user-facing Control UI redesign with screenshot proof and responsive test coverage. Review metrics: 3 noteworthy metrics.
Stored data model Merge readiness Overall follows the weaker of proof and patch quality, so missing proof can cap an otherwise strong patch. Rank-up moves:
Risk before merge
Maintainer options:
Next step before merge
Maintainer decision needed
Security Review detailsBest possible solution: Choose the preferred composer direction, then land only a conflict-free exact head with responsive Control UI proof. Do we have a high-confidence way to reproduce the issue? Not applicable for bug reproduction; this is a user-facing Control UI redesign with screenshot proof and responsive test coverage. Is this the best way to solve the issue? Unclear as the final product direction: the focused implementation is plausible and the prior blocker is fixed, but maintainers must choose between this PR and the broader overlapping redesign. AGENTS.md: found and applied where relevant. Codex review notes: model internal, reasoning high; reviewed against ff440393da6a. Label changesLabel changes:
Label justifications:
Evidence reviewedAcceptance criteria:
What I checked:
Likely related people:
What the crustacean ranks mean
Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics. How this review workflow works
Review history (5 earlier review cycles)
|
clawsweeper
Bot
added
proof: sufficient
openclaw-barnacle
Bot
added
channel: matrix
Contributor
Author
Land-ready review proofReviewed exact head: Review fixups applied:
Validation:
Known proof gaps: none for this presentation-only Control UI change. No protocol, auth, persistence, or dependency behavior changed. |
clawsweeper
Bot
removed
the
proof: sufficient
clawsweeper
Bot
added
rating: 🦐 gold shrimp
…nd reasoning-effort chip Removes the toolbar divider so the composer frame is the only chrome, merges the Talk toggle and Talk settings gear into a mic+caret split control, shows the effective reasoning level as a subtle pill next to the model name (accent-washed only on session override), right-aligns the model/settings cluster next to Send, and softens active/selected highlight states across the bar. The combined model menu and reasoning fly-out now anchor right so they stay on screen.
steipete
force-pushed
the
claude/laughing-cannon-21d4f2
branch
from
July 5, 2026 22:27
6109812 to
f4904a8
Compare
openclaw-barnacle
Bot
removed
channel: discord
Contributor
Author
|
Merged via squash.
|
Contributor
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f4904a80d1
ℹ️ 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 on lines
+2882
to
+2886
| .chat-controls__reasoning-panel { | ||
| top: auto; | ||
| bottom: calc(100% + 8px); | ||
| left: 0; | ||
| right: auto; |
Contributor
There was a problem hiding this comment.
This override only runs at max-width: 768px, but the composer switches into the same mobile grid at max-width: 932px/max-height: 500px landscape. On common phone-landscape widths above 768px, the combined model menu sits in the left grid column while the reasoning panel keeps the desktop right: calc(100% + 8px) placement, so the thinking slider flies off the left edge and becomes unreachable. Please apply this reset to the landscape mobile breakpoint too.
Useful? React with 👍 / 👎.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What Problem This Solves
The chat composer's bottom bar in the Control UI reads as busy chrome: a divider line splits the input frame in half, the model picker floats near the middle of the bar instead of anchoring with the other controls, Talk has two loose buttons (toggle + gear), the active thinking level is invisible unless you override it, and active states use loud accent/danger fills that compete with the send button.
Why This Change Was Made
Restyles the toolbar into a quiet status row inspired by contemporary composer designs, keeping OpenClaw's own look: the divider is removed so the input frame is the only chrome; Talk becomes a split mic-plus-caret control (mic toggles Talk, the caret opens Talk settings); the model trigger shows the model name with a small pill for the effective reasoning level (accent-washed only when the session overrides the default); and the model/effort/settings cluster right-aligns next to Send. The combined model menu and its reasoning fly-out now anchor to the right so they stay on screen next to the right-aligned trigger. Highlight states were softened across the bar (neutral 7% wash for selected/open controls, quieter run-status borders, softer Talk-active tint).
User Impact
The composer looks calmer and communicates more: users always see the effective reasoning level next to the model, Talk settings are one caret away instead of a second gear, and active/selected controls highlight subtly instead of shouting. No behavior changes — all controls, popovers, and a11y labels work as before (the Talk toggle keeps its localized labels; the effort pill is decorative with the full state in the trigger's aria-label).
Evidence
Requested by the maintainer (composer bottom-bar redesign with subtler highlighting). Verified interactively on the mock Control UI dev server (
pnpm dev:ui:mock) in light/dark and mobile (375px) viewports: split Talk control toggles and opens Talk options, model menu plus reasoning slider fly-out stay within the viewport, mobile grid keeps the model+effort chip grouped.pnpm test ui/src/pages/chat ui/src/lib/chat— 126 files, 1999 tests passedpnpm test ui/src/pages/chat/chat-responsive.browser.test.ts— 32 tests passed (real-CSS layout assertions)pnpm check:changed— green, delegated to Blacksmith Testbox (actions run)gpt-5.5) — clean, no actionable findingsBefore / After (light)
Before / After (dark)
Model + reasoning popover (after)