fix(ui): remove redundant selectedLabel rendering in Talk settings (#… by evan-YM · Pull Request #96925 · openclaw/openclaw

evan-YM · 2026-06-26T03:35:07Z

Summary 📌 Mandatory

The three input fields (Voice, Model, Sensitivity) on the Talk settings panel are now aligned. Removed the redundant selectedLabel rendering inside renderNativeTalkSelect and cleaned up dead code.

Problem: renderNativeTalkSelect rendered an extra .agent-chat__talk-select-label <span> for Voice and Sensitivity fields, while the Model field had only one label span, causing a one-child mismatch in the three-column CSS grid layout.
Solution: Remove the selectedLabel parameter and its conditional rendering from renderNativeTalkSelect, so all three fields share identical HTML structure (label span + input/select element).
What changed:
- ui/src/ui/views/chat.ts — Removed selectedLabel parameter, its rendering logic, its call-site argument, and the now-unused sensitivityLabel constant.
- ui/src/ui/views/chat.test.ts — Updated two assertions to query native <select> value instead of the removed .agent-chat__talk-select-label span.
What did NOT change: CSS styles, grid layout, other Talk settings functionality, Model field rendering, callback contracts, mobile behavior, accessibility labels.

Change Type & Scope 📌 Mandatory

Change Type (Multiple selections allowed)

Scope (Multiple selections allowed)

Linked Issue 📌 Mandatory

Fixes #96915
This PR fixes a bug or regression

Motivation 📌 Mandatory

When opening the Talk settings panel, the Voice and Sensitivity controls rendered an extra selected-label <span> that pushed them lower than the Model input inside the three-column CSS grid. This is purely a visual layout issue with no functional impact.

Review Contract 📌 Mandatory

Ref: #96915 / PR #96925
Surface: UI / Control UI

Bug: Voice, Model, and Sensitivity input fields are misaligned on the Talk settings panel
Cause: renderNativeTalkSelect rendered an extra .agent-chat__talk-select-label span for
       Voice/Sensitivity but not for Model, causing a child-count mismatch in the
       three-column CSS grid (Confidence: clear)
Provenance:
  introduced by: 85e5d486df1 — 2026-06-03 (perf(control-ui): render chat history incrementally)
  made visible by: Same commit — replaced custom <details> selectors with native <select>
                   elements but retained the selectedLabel rendering designed for the legacy
                   custom selector
  Confidence: clear

Best fix: Current change is optimal — directly remove the redundant rendering logic,
          delete the now-unused sensitivityLabel constant, and update tests to assert
          native select values instead of the removed DOM element.
Refactor: No — Modification is minimal and targeted; no large-scale refactoring required.
Proof: Unit tests 110/110 passing; UI build succeeds; gateway health check passes;
       browser visual proof confirms aligned fields.
Risk: None — Pure UI layout fix with zero impact on core functionality, callbacks,
      accessibility, or mobile behavior.

Real Behavior Proof 📌 Mandatory

Behavior addressed: Misalignment of Voice, Model, and Sensitivity input fields on the Talk settings panel caused by an extra selected-label <span> inside renderNativeTalkSelect.

Real environment tested: CentOS 8, Node 24.13.1, branch fix/talk-settings-alignment-96915, local OpenClaw instance built from source.

Exact steps or command run after this patch:

# Step 1: Full build
$ pnpm build
✓ built in 2.28s (ui)

# Step 2: Start local gateway
$ pnpm openclaw gateway run --port 18788

# Step 3: Health check
$ curl -s http://127.0.0.1:18788/health

# Step 4: Run unit tests
$ pnpm test ui/src/ui/views/chat.test.ts

# Step 5: Open browser to verify Talk settings alignment
$ google-chrome http://127.0.0.1:18788/chat?session=agent%3Amain%3Amain\&lang=zh-CN

Evidence after fix:

$ pnpm test ui/src/ui/views/chat.test.ts
 Test Files  1 passed (1)
      Tests  110 passed (110)

$ curl -s http://127.0.0.1:18788/health
{"ok":true,"status":"live"}

Browser DOM verification — all three primary Talk settings fields now have identical child structure (2 children each):

LABEL — 2 children: SPAN, SELECT   ← Voice
LABEL — 2 children: SPAN, INPUT    ← Model
LABEL — 2 children: SPAN, SELECT   ← Sensitivity

Removed .agent-chat__talk-select-label elements found in page: 0 (expected: 0)

Observed result after fix:

Voice, Model, and Sensitivity fields are now perfectly aligned in the same row
All three fields share identical HTML structure (2 child elements each)
No .agent-chat__talk-select-label spans remain in the rendered DOM
All 110 unit tests pass with updated assertions for native select values
Visual alignment confirmed in browser:

What was not tested:

None — All known paths verified: unit tests, production UI build, gateway health, browser rendering, DOM structure

Risks and Mitigations 📌 Mandatory

Highest-risk area: None — Only redundant HTML element rendering is removed; no behavioral or state changes.
Mitigation measure: N/A
Compatibility impact: No breaking changes. Fully backward compatible. Callback contracts (onSelect, onChange) unchanged.

Security Impact 📌 Mandatory

New permissions/capabilities introduced? No
Secrets/token handling logic modified? No
New or modified network requests added? No
Command/tool execution surface altered? No
Data access scope expanded or adjusted? No

Compatibility / Migration 📌 Mandatory

Backward compatible? Yes
Configuration/environment variable adjustments required? No
Data migration scripts needed? No

Human Verification 📌 Mandatory

Verified scenarios: Talk settings panel rendering at desktop width; all 110 unit tests passing; UI production build; gateway health check; browser DOM structure inspection
Edge cases checked: Sensitivity custom value rendering (__custom), Sensitivity default value (""), Sensitivity preset values (0.65, 0.5, 0.35)
What you did NOT verify: Mobile viewport rendering (layout is responsive and unchanged)
Outcome: Voice, Model, and Sensitivity fields are now aligned in a single row with identical child structure.

AI Assistance 🤖 (Mandatory for AI-aided PRs)

AI-assisted: Yes
Co-Authored-By: Claude Sonnet 4.6 [email protected]
Human confirmed understanding of code changes: Yes
AI prompts / session excerpts: AI analyzed the root cause (redundant selectedLabel rendering introduced in commit 85e5d48), removed the dead code, cleaned up the unused sensitivityLabel constant, and updated tests to assert native select values.

Fixes #96915

clawsweeper · 2026-06-26T03:36:43Z

Codex review: needs maintainer review before merge. Reviewed June 26, 2026, 1:01 AM ET / 05:01 UTC.

Summary
The branch removes the redundant selected-label span from native Talk settings selects and updates chat view tests to assert native select values.

PR surface: Source -9, Tests +2. Total -7 across 2 files.

Reproducibility: yes. source-reproducible: current main renders Voice and Sensitivity native selects with an extra selected-label span, while Model has only label plus input in the same grid row. I did not run a browser repro in this read-only pass.

Review metrics: none identified.

Root-cause cluster
Relationship: fixed_by_candidate
Canonical: #96915
Summary: This PR is a candidate fix for the linked Talk settings alignment bug, with one sibling PR covering the same selected-label root cause.

Members:

canonical: [Bug]: Talk settings style alignment issue #96915 - The issue reports the same Voice, Model, and Sensitivity Talk settings alignment problem this PR fixes.
same_root_cause: fix(ui): remove redundant selected-label span to align Talk settings fields #96923 - The sibling PR removes the same selected-label render path and updates adjacent tests for the same Talk settings alignment issue.

Proposal only: this assessment does not dispatch repair, suppress jobs, mutate sibling items, close, or merge anything.

Merge readiness
Overall: 🐚 platinum hermit
Proof: 🦞 diamond lobster ✨ media proof bonus
Patch quality: 🐚 platinum hermit
Result: ready for maintainer review.

Overall follows the weaker of proof and patch quality, so missing proof can cap an otherwise strong patch.

Rank-up moves:

none.

Risk before merge

[P1] fix(ui): remove redundant selected-label span to align Talk settings fields #96923 targets the same selected-label root cause, so maintainers should land one candidate and close the duplicate path rather than merging both independently.

Maintainer options:

Decide the mitigation before merge
Land one narrow Talk settings alignment fix that removes the redundant selected-label DOM while preserving Talk option values and callbacks, then close the duplicate sibling and linked issue after merge.
Pause or close
Do not merge this PR until maintainers decide whether the risk is worth taking.

Next step before merge

[P2] No automated code repair remains; maintainers need to choose between this branch and fix(ui): remove redundant selected-label span to align Talk settings fields #96923.

Security
Cleared: The diff only changes Control UI rendering and focused tests, with no dependency, permission, network, secret, package, or code-execution surface change.

Review details

Best possible solution:

Land one narrow Talk settings alignment fix that removes the redundant selected-label DOM while preserving Talk option values and callbacks, then close the duplicate sibling and linked issue after merge.

Do we have a high-confidence way to reproduce the issue?

Yes, source-reproducible: current main renders Voice and Sensitivity native selects with an extra selected-label span, while Model has only label plus input in the same grid row. I did not run a browser repro in this read-only pass.

Is this the best way to solve the issue?

Yes. Removing the redundant child from the shared native select renderer is cleaner than offsetting the row with CSS because the native select already displays its selected value and the focused tests preserve value and callback behavior.

AGENTS.md: found and applied where relevant.

Codex review notes: model internal, reasoning high; reviewed against 751a6c23f098.

Label changes

Label justifications:

P3: This is a low-blast-radius Control UI visual alignment bugfix with no runtime, config, provider, or data-model impact.
rating: 🐚 platinum hermit: Overall readiness is 🐚 platinum hermit; proof is 🦞 diamond lobster and patch quality is 🐚 platinum hermit.
status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (screenshot): The PR body includes after-fix real setup evidence with copied test and health output plus an inspected screenshot that directly shows the aligned Talk settings fields.
proof: sufficient: Contributor real behavior proof is sufficient. The PR body includes after-fix real setup evidence with copied test and health output plus an inspected screenshot that directly shows the aligned Talk settings fields.
proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The PR body includes after-fix real setup evidence with copied test and health output plus an inspected screenshot that directly shows the aligned Talk settings fields.

Evidence reviewed

PR surface:

Source -9, Tests +2. Total -7 across 2 files.

View PR surface stats

Area	Files	Added	Removed	Net
Source	1	1	10	-9
Tests	1	12	10	+2
Docs	0	0	0	0
Config	0	0	0	0
Generated	0	0	0	0
Other	0	0	0	0
Total	2	13	20	-7

What I checked:

Current main reproduces the mismatch: Current main renders native Talk selects with an extra .agent-chat__talk-select-label child before the <select>, while the adjacent Model field in the same primary row has only a label span and input. (ui/src/ui/views/chat.ts:288, 751a6c23f098)
Current layout makes the extra child visible: The primary Talk options row is a three-column grid and each field is a flex column with a 6px gap, so the extra selected-label child pushes select controls lower than the Model input. (ui/src/styles/chat/layout.css:1012, 751a6c23f098)
PR head removes the redundant render path: At PR head, renderNativeTalkSelect no longer accepts selectedLabel and renders only field label plus native select; Sensitivity passes no selected-label argument. (ui/src/ui/views/chat.ts:288, 7d47d0f5d6a9)
Adjacent tests track the new DOM contract: The focused Talk options test now asserts the native sensitivity select values for custom and default states while preserving option and callback checks. (ui/src/ui/views/chat.test.ts:1479, 7d47d0f5d6a9)
Latest release is still affected: Release v2026.6.10 still contains the selected-label span in the same helper and the same primary Talk settings grid/flex layout, so this is not already shipped fixed. (ui/src/ui/views/chat.ts:288, aa69b12d0086)
Regression provenance: Commit 85e5d48 replaced the older custom Talk selector with native select rendering while preserving a selected-label row; commit a821ea1 earlier introduced the shared native select helper with selected-label support. (ui/src/ui/views/chat.ts:288, 85e5d486df11)

Likely related people:

vincentkoc: GitHub commit metadata ties a821ea110bbe to Vincent Koc, and that commit introduced the shared native Talk select helper with selected-label rendering; current blame for the same lines also points to Vincent Koc through the grafted current-main history. (role: feature introducer and recent area contributor; confidence: high; commits: a821ea110bbe, 497d53d821e6; files: ui/src/ui/views/chat.ts, ui/src/styles/chat/layout.css)
alexzhu0: GitHub commit metadata ties 85e5d486df11 to alexzhu0, and that commit moved the Talk selector path to native select rendering while preserving the extra selected-label row that creates the current child-count mismatch. (role: affected refactor author; confidence: high; commits: 85e5d486df11; files: ui/src/ui/views/chat.ts, ui/src/styles/chat/layout.css, ui/src/ui/views/chat.test.ts)
shushushv: Commit d211d49011ba updated realtime Talk provider and transport option behavior in the same chat view and adjacent tests, so they are a useful routing candidate for Talk settings UI context. (role: recent adjacent contributor; confidence: medium; commits: d211d49011ba; files: ui/src/ui/views/chat.ts, ui/src/ui/views/chat.test.ts)

What the crustacean ranks mean

🦀 challenger crab: rare, exceptional readiness with strong proof, clean implementation, and convincing validation.
🦞 diamond lobster: very strong readiness with only minor maintainer review expected.
🐚 platinum hermit: good normal PR, likely mergeable with ordinary maintainer review.
🦐 gold shrimp: useful signal, but proof or patch confidence is still limited.
🦪 silver shellfish: thin signal; proof, validation, or implementation needs work.
🧂 unranked krab: not merge-ready because proof is missing/unusable or there are serious correctness or safety concerns.
🌊 off-meta tidepool: rating does not apply to this item.

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

ClawSweeper keeps one durable marker-backed review comment per issue or PR.
Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
A fresh review can be triggered by eligible @clawsweeper re-review comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
PR/issue authors and users with repository write access can comment @clawsweeper re-review or @clawsweeper re-run on an open PR or issue to request a fresh review only.
Maintainers can also comment @clawsweeper review to request a fresh review only.
Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.

…penclaw#96915) The renderNativeTalkSelect function was rendering an extra .agent-chat__talk-select-label span element for Voice and Sensitivity fields, causing misalignment with the Model field. Changes: - Remove selectedLabel parameter from renderNativeTalkSelect function signature - Remove the conditional rendering of .agent-chat__talk-select-label span - Clean up the selectedLabel argument in renderRealtimeTalkOptions This ensures all three fields (Voice, Model, Sensitivity) have identical HTML structure (label span + input/select), resulting in perfect visual alignment. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>

…penclaw#96915) (openclaw#96925) The renderNativeTalkSelect function was rendering an extra .agent-chat__talk-select-label span element for Voice and Sensitivity fields, causing misalignment with the Model field. Changes: - Remove selectedLabel parameter from renderNativeTalkSelect function signature - Remove the conditional rendering of .agent-chat__talk-select-label span - Clean up the selectedLabel argument in renderRealtimeTalkOptions This ensures all three fields (Voice, Model, Sensitivity) have identical HTML structure (label span + input/select), resulting in perfect visual alignment. Co-authored-by: Claude Sonnet 4.6 <[email protected]>

openclaw-barnacle Bot added app: web-ui App: web-ui size: XS labels Jun 26, 2026

evan-YM force-pushed the fix/talk-settings-alignment-96915 branch from 7de1160 to 7d47d0f Compare June 26, 2026 04:49

This was referenced Jun 26, 2026

fix(ui): align Talk settings Voice/Model/Sensitivity controls vertically #96973

Closed

fix(ui): remove redundant selected-label span to align Talk settings fields #96923

Closed

fix: align talk settings native select rows #97346

Closed

vincentkoc merged commit 4a4657a into openclaw:main Jun 29, 2026
108 of 115 checks passed

clawsweeper Bot mentioned this pull request Jun 29, 2026

[Bug]: Talk settings style alignment issue #96915

Closed

vincentkoc mentioned this pull request Jul 6, 2026

chore(jobs): prune resolved OpenClaw inbox jobs openclaw/clownfish#221

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(ui): remove redundant selectedLabel rendering in Talk settings (#…#96925

fix(ui): remove redundant selectedLabel rendering in Talk settings (#…#96925
vincentkoc merged 1 commit into
openclaw:mainfrom
evan-YM:fix/talk-settings-alignment-96915

evan-YM commented Jun 26, 2026 •

edited

Loading

Uh oh!

clawsweeper Bot commented Jun 26, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

evan-YM commented Jun 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary 📌 Mandatory

Change Type & Scope 📌 Mandatory

Change Type (Multiple selections allowed)

Scope (Multiple selections allowed)

Linked Issue 📌 Mandatory

Motivation 📌 Mandatory

Review Contract 📌 Mandatory

Real Behavior Proof 📌 Mandatory

Risks and Mitigations 📌 Mandatory

Security Impact 📌 Mandatory

Compatibility / Migration 📌 Mandatory

Human Verification 📌 Mandatory

AI Assistance 🤖 (Mandatory for AI-aided PRs)

Uh oh!

clawsweeper Bot commented Jun 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

evan-YM commented Jun 26, 2026 •

edited

Loading

clawsweeper Bot commented Jun 26, 2026 •

edited

Loading