fix(control-ui): align skills page filter input heights by evan-YM · Pull Request #99996 · openclaw/openclaw

evan-YM · 2026-07-04T14:51:22Z

What Problem This Solves

The Control UI Skills page rendered a raw missing translation key for the agent filter and vertically misaligned the adjacent agent and search controls. The initial CSS fix also applied a fixed height to every shared .field input, which would stretch unrelated checkbox and radio controls.

Fixes #99990.

Why This Change Was Made

use the existing translated usage.filters.agent label;
give the search field the existing translated common.search label so both filter fields have the same two-row structure;
align only text-like inputs and selects at 38px;
explicitly exclude checkbox/radio inputs from the shared fixed-height rule;
cover the translated labels and real Chromium control dimensions.

This keeps the fix at the shared form-control boundary without changing Skills filtering behavior or broadening checkbox/radio styling.

User Impact

Skills filters now show “Agent” and “Search” with aligned controls. Checkbox and radio controls elsewhere in the Control UI retain their native sizing.

Evidence

Blacksmith Testbox tbx_01kwtckpwsnnr7s7svd7jexrrp, hosted run https://github.com/openclaw/openclaw/actions/runs/28759962471:
- corepack pnpm test ui/src/pages/skills/view.test.ts ui/src/components/form-controls.browser.test.ts
- 2 files, 11 tests passed, including real Chromium layout coverage.
In-app browser live CSS proof from this exact checkout:
- Agent select: top 213.71875, bottom 251.71875, height 38;
- Search input: top 213.71875, bottom 251.71875, height 38;
- Checkbox and radio: height 13, confirming the shared-rule exclusion.
- rendered labels: Agent and Search.
pnpm ui:i18n:check passed on the same Testbox lease.
git diff --check passed.
Fresh branch autoreview: no accepted/actionable findings.

Contributor implementation retained; maintainer fixup narrows the shared CSS rule, adds browser regression coverage, and adds the changelog credit.

clawsweeper · 2026-07-04T14:52:42Z

Codex review: needs changes before merge. Reviewed July 5, 2026, 8:51 PM ET / 00:51 UTC.

Summary
Against current main, the branch fixes the Skills filter labels/control height and adds Control UI regression coverage, with one added CHANGELOG entry.

PR surface: Source +249, Tests +960, Docs +12, Other +9. Total +1230 across 44 files.

Reproducibility: yes. Current main still renders the missing Skills agent translation key and an unlabeled adjacent search field in the same centered filter row; I did not run a live browser repro in this read-only pass.

Review metrics: 1 noteworthy metric.

Current-main merge delta: 5 files, 44 insertions, 2 deletions versus origin/main. This distinguishes the real branch delta from the stale-base GitHub comparison that includes many files already on main.

Stored data model
Persistent data-model change detected: serialized state: src/agents/embedded-agent-subscribe.handlers.tools.test.ts, vector/embedding metadata: src/agents/embedded-agent-runner/delivery-evidence.test.ts. Confirm migration or upgrade compatibility proof before merge.

Root-cause cluster
Relationship: fixed_by_candidate
Canonical: #99990
Summary: The linked issue is the canonical bug report for the same Skills filter raw-key and alignment problem, and this PR is the candidate fix.

Members:

canonical: [Bug]: Style / UI bug (visual misalignment without crash) #99990 - It reports the exact raw Skills agent key and filter-row visual misalignment that this PR changes.

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
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:

Remove the added CHANGELOG.md entry; the PR body already carries release-note context.

Next step before merge

[P2] A repair worker can mechanically remove the release-owned changelog line while leaving the proven UI fix intact.

Security
Cleared: The unique current-main merge diff is Control UI rendering/tests plus release text; I found no dependency, permissions, secret, script, or code-execution security concern.

Review findings

[P3] Remove the release-owned changelog entry — CHANGELOG.md:21

Review details

Best possible solution:

Land the UI fix after dropping the CHANGELOG.md edit and letting exact-head CI gate the branch; keep release-note context in the PR body or squash message.

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

Yes. Current main still renders the missing Skills agent translation key and an unlabeled adjacent search field in the same centered filter row; I did not run a live browser repro in this read-only pass.

Is this the best way to solve the issue?

Yes, after removing the changelog line. Reusing existing i18n keys plus a scoped shared CSS rule and browser regression coverage is the narrowest maintainable fix for this UI bug.

Full review comments:

[P3] Remove the release-owned changelog entry — CHANGELOG.md:21
Root policy makes CHANGELOG.md release-owned, and this normal bug-fix PR already has the needed release-note context in its body. Please drop this added entry so release generation owns the final changelog and the branch does not carry release-process churn.
Confidence: 0.95

Overall correctness: patch is correct
Overall confidence: 0.87

AGENTS.md: found and applied where relevant.

Codex review notes: model internal, reasoning high; reviewed against 95f12178a794.

Label changes

Label changes:

add P3: This is a low-risk Control UI polish bug fix with one release-process cleanup remaining and no blocked setup, data, auth, or runtime path.
add proof: sufficient: Contributor real behavior proof is sufficient. The PR body and maintainer pass comment include after-fix in-app Chromium measurements showing both filter controls at 38px, checkbox/radio controls unchanged, and translated labels rendered.
add rating: 🐚 platinum hermit: Overall readiness is 🐚 platinum hermit; proof is 🦞 diamond lobster and patch quality is 🐚 platinum hermit.
add status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (live_output): The PR body and maintainer pass comment include after-fix in-app Chromium measurements showing both filter controls at 38px, checkbox/radio controls unchanged, and translated labels rendered.
remove P2: Current review triage priority is P3, so this older priority label is no longer current.

Label justifications:

P3: This is a low-risk Control UI polish bug fix with one release-process cleanup remaining and no blocked setup, data, auth, or runtime path.
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 (live_output): The PR body and maintainer pass comment include after-fix in-app Chromium measurements showing both filter controls at 38px, checkbox/radio controls unchanged, and translated labels rendered.
proof: sufficient: Contributor real behavior proof is sufficient. The PR body and maintainer pass comment include after-fix in-app Chromium measurements showing both filter controls at 38px, checkbox/radio controls unchanged, and translated labels rendered.

Evidence reviewed

PR surface:

Source +249, Tests +960, Docs +12, Other +9. Total +1230 across 44 files.

View PR surface stats

Area	Files	Added	Removed	Net
Source	18	512	263	+249
Tests	20	1288	328	+960
Docs	5	18	6	+12
Config	0	0	0	0
Generated	0	0	0	0
Other	1	9	0	+9
Total	44	1827	597	+1230

Acceptance criteria:

[P1] git diff --check.
[P1] git diff origin/main..HEAD -- CHANGELOG.md.

What I checked:

Current-main unique diff: The branch delta against current origin/main is only CHANGELOG.md plus four Control UI files, separating the real merge result from GitHub's stale-base 44-file comparison. (e410b5d84099)
Current main bug source: Current main still renders the Skills agent label with t("common.filters.agent") and the adjacent search field has no label span, matching the linked raw-key and misalignment report. (ui/src/pages/skills/view.ts:266, 95f12178a794)
PR label fix: The PR switches the agent label to the existing usage.filters.agent key and adds a common.search label to the search field so both controls share the same field structure. (ui/src/pages/skills/view.ts:266, e410b5d84099)
PR sizing boundary: The shared form-control height rule targets text-like inputs and selects while excluding checkbox and radio inputs. (ui/src/styles/components.css:943, e410b5d84099)
Regression coverage: Browser layout coverage checks 38px text/select controls while confirming checkbox and radio inputs stay below that height. (ui/src/components/form-controls.browser.test.ts:161, e410b5d84099)
Release-owned changelog policy: Root policy says CHANGELOG.md is release-only and normal PRs should leave release-note context in the PR body, squash message, or direct commit instead. (AGENTS.md:238, 95f12178a794)

Likely related people:

goutamadwant: Authored the merged Skills agent-selector PR that added the affected selector path and related tests. (role: feature introducer; confidence: high; commits: 325d0208d044, 64431731a359, addb0da93a05; files: ui/src/pages/skills/view.ts, ui/src/pages/skills/view.test.ts)
vincentkoc: Merged the Skills agent-selector PR and authored follow-up commits preserving agent-scoped Skills state. (role: merger and recent feature follow-up; confidence: medium; commits: 325d0208d044, 523d474d786b, 8e05c2fd2dba; files: ui/src/pages/skills/view.ts, ui/src/pages/skills/view.test.ts, src/gateway/server-methods/skills.ts)
steipete: Recently refactored shared Control UI component styling and authored the current branch fixup that narrows the shared form-control sizing rule. (role: recent style contributor and PR fixup author; confidence: medium; commits: 33022da15508, dd3a4a8f6741, e410b5d84099; files: ui/src/styles/components.css, ui/src/components/form-controls.browser.test.ts, CHANGELOG.md)

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.

Review history (5 earlier review cycles)

reviewed 2026-07-04T14:56:35.150Z sha 515eef3 :: needs maintainer review before merge. :: none
reviewed 2026-07-04T15:02:44.627Z sha 515eef3 :: needs maintainer review before merge. :: none
reviewed 2026-07-04T15:57:28.532Z sha 515eef3 :: needs maintainer review before merge. :: none
reviewed 2026-07-04T18:08:58.069Z sha 515eef3 :: needs maintainer review before merge. :: none
reviewed 2026-07-05T01:12:08.213Z sha e968a3e :: needs changes before merge. :: [P2] Exclude checkbox inputs from the field height rule

Fix three issues causing misaligned form controls in the skills page filter row: - P0: Add missing span label to filter text input so both .field grid containers have the same row count (2 rows: span + control) - P1: Fix i18n key from nonexistent common.filters.agent to usage.filters.agent so the label renders correctly - P2: Add explicit height to .field input/select for consistent browser rendering Fixes openclaw#99990 Co-Authored-By: Claude <[email protected]>

steipete · 2026-07-06T00:42:16Z

Land-ready maintainer pass complete on dd3a4a8f6741856f91d6f6730410fd425659709a.

Verification:

Blacksmith Testbox tbx_01kwtckpwsnnr7s7svd7jexrrp, hosted run https://github.com/openclaw/openclaw/actions/runs/28759962471: corepack pnpm test ui/src/pages/skills/view.test.ts ui/src/components/form-controls.browser.test.ts — 2 files, 11 tests passed.
Same Testbox: pnpm ui:i18n:check passed and pnpm check:changed passed.
In-app browser against the exact checkout: Agent select and Search input both rendered at top 213.71875, bottom 251.71875, height 38; checkbox/radio remained height 13; translated labels rendered as Agent and Search.
Exact-head hosted CI passed: https://github.com/openclaw/openclaw/actions/runs/28760233371
git diff --check passed.
Fresh autoreview found no accepted/actionable findings.

No known proof gaps for this Control UI styling/i18n change.

steipete · 2026-07-06T01:24:27Z

Landed the reviewed fix as #100526 in commit f12312d69b1387c6d2e4ab67cc0f41f20e34a67c.

I rebuilt the patch on current main because the fork-branch update path could not preserve clean rebased ancestry and produced an inflated unrelated diff. The landed replacement keeps the focused Skills filter styling and translation changes, carries the regression coverage, and preserves the original contributor credit.

Thank you @evan-YM. For future contributions, keeping Allow edits by maintainers enabled gives us the best chance of applying fixups directly, though GitHub's fork update path can still occasionally prevent a clean ancestry-preserving update.

openclaw-barnacle Bot added app: web-ui App: web-ui size: XS labels Jul 4, 2026

evan-YM force-pushed the fix/skills-filter-align-99990 branch from 515eef3 to e968a3e Compare July 5, 2026 01:05

evan-YM and others added 2 commits July 5, 2026 20:16

fix(ui): guard shared form control sizing

dd3a4a8

steipete force-pushed the fix/skills-filter-align-99990 branch from e968a3e to dd3a4a8 Compare July 6, 2026 00:27

fix(ui): guard shared form control sizing

e410b5d

clawsweeper Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label Jul 6, 2026

fix(ui): guard shared form control sizing

888a28b

openclaw-barnacle Bot added the gateway Gateway runtime label Jul 6, 2026

chore: defer release note to maintainer batch

e929d54

steipete mentioned this pull request Jul 6, 2026

fix(ui): align Skills filters #100526

Merged

clawsweeper Bot added rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. and removed rating: 🐚 platinum hermit Good normal PR readiness with ordinary maintainer review expected. labels Jul 6, 2026

steipete closed this Jul 6, 2026

steipete mentioned this pull request Jul 6, 2026

docs(changelog): credit Control UI fixes #100533

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(control-ui): align skills page filter input heights#99996

fix(control-ui): align skills page filter input heights#99996
evan-YM wants to merge 5 commits into
openclaw:mainfrom
evan-YM:fix/skills-filter-align-99990

evan-YM commented Jul 4, 2026 •

edited by steipete

Loading

Uh oh!

clawsweeper Bot commented Jul 4, 2026 •

edited

Loading

Uh oh!

steipete commented Jul 6, 2026

Uh oh!

steipete commented Jul 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

evan-YM commented Jul 4, 2026 • edited by steipete Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What Problem This Solves

Why This Change Was Made

User Impact

Evidence

Uh oh!

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

Uh oh!

Uh oh!

steipete commented Jul 6, 2026

Uh oh!

steipete commented Jul 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

evan-YM commented Jul 4, 2026 •

edited by steipete

Loading

clawsweeper Bot commented Jul 4, 2026 •

edited

Loading