fix: theme header search tabs

[vyctorbrzezowski]

Summary

• Fix the header search typeahead tabs so light mode uses light segmented-control colors.
• Keep the previous dark segmented colors behind an explicit dark-theme override.
• Add a regression assertion for theme-aware typeahead tab CSS.

Tests

• bun run test -- src/__tests__/header.test.tsx
• bun run format:check -- src/styles.css src/__tests__/header.test.tsx
• git diff --check
• bun run lint
• bun run deadcode:ci
• bun run ci:unit
• bun run ci:static fails at bun audit before lint/deadcode because current dependency advisories are not ignored: dompurify GHSA-cmwh-pvxp-8882 and undici GHSA-vmh5-mc38-953g / GHSA-pr7r-676h-xcf6.

Screenshot

Raw proof files: https://github.com/vyctorbrzezowski/clawhub/tree/qa-artifacts/clawhub-ui-proof/pr-2737/header-search-tabs-light-local

[vercel]

@vyctorbrzezowski is attempting to deploy a commit to the Amantus Machina Team on Vercel.

A member of the Team first needs to authorize it.

[vyctorbrzezowski]

ClawHub UI Proof

Status: pass
Mode: feature
Scenario: .artifacts/proof-scenarios/header-search-tabs-light.pw.mjs
Provider: local-playwright
Baseline: not run for feature proof.
Candidate: brzezowski/fix-header-search-dark-tabs

Header search tabs in light theme

Raw proof files: https://github.com/vyctorbrzezowski/clawhub/tree/qa-artifacts/clawhub-ui-proof/pr-2737/header-search-tabs-light-local

[vyctorbrzezowski]

@clawsweeper review

[clawsweeper]

🦞🧹
ClawSweeper re-review requested.

I asked ClawSweeper to review this item again.
Action: item re-review queued (workflow sweep.yml, event repository_dispatch).
Result: the existing ClawSweeper review comment will be edited in place when the review finishes.

[clawsweeper]

Codex review: needs maintainer review before merge. Reviewed June 18, 2026, 7:04 PM ET / 23:04 UTC.

Summary
The PR makes header search typeahead segmented tab colors theme-aware in CSS and adds a header stylesheet regression assertion.

Reproducibility: yes. source-reproducible: current main renders the header typeahead tabs with the targeted classes and hard-codes dark segmented variables for that selector in all themes. I did not run a local before/after browser reproduction in this read-only pass.

Review metrics: 2 noteworthy metrics.

• Diff Size: +40/-2 across 2 files. The patch is small and scoped to one CSS surface plus one regression assertion.
• UI Proof: 1 inspected screenshot. The changed behavior is visual, and the screenshot directly exercises the light-theme header typeahead state.

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:

• [P2] Resolve or get maintainer acceptance for the current static audit gate before merge.

Risk before merge

• [P1] The static CI job is currently failing at bun audit for dependency advisories reported in the PR body/status rollup, so merge still needs required-check handling even though the failure does not appear caused by this CSS/test diff.
• I did not run local tests in this read-only review; confidence comes from source inspection, the PR-reported commands, passing unit/status checks, and inspected screenshot proof.

Maintainer options:

1. Decide the mitigation before merge
   Land this focused CSS/test repair after required checks or maintainer gates are satisfied, keeping the header typeahead tab palette tied to the resolved theme.
2. Pause or close
   Do not merge this PR until maintainers decide whether the risk is worth taking.

Next step before merge

• [P2] No repair lane is needed because the PR has no actionable findings; maintainers should handle normal review and required-check gating.

Security
Cleared: The diff only changes local CSS and a test assertion; I found no security or supply-chain concern.

Review details

Best possible solution:

Land this focused CSS/test repair after required checks or maintainer gates are satisfied, keeping the header typeahead tab palette tied to the resolved theme.

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

Yes, source-reproducible: current main renders the header typeahead tabs with the targeted classes and hard-codes dark segmented variables for that selector in all themes. I did not run a local before/after browser reproduction in this read-only pass.

Is this the best way to solve the issue?

Yes. The PR fixes the implicated CSS selector directly, preserves the dark values behind a resolved dark-theme override, and adds a focused regression assertion without adding new product or config surface.

AGENTS.md: found and applied where relevant.

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

Label changes

Label changes:

• add P3: This is a low-risk visual theme polish bug in the header search typeahead, with limited blast radius.
• add proof: sufficient: Contributor real behavior proof is sufficient. The contributor-provided local Playwright screenshot directly shows the after-fix light-theme header search tabs using light segmented-control colors.
• add proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The contributor-provided local Playwright screenshot directly shows the after-fix light-theme header search tabs using light segmented-control colors.
• 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 (screenshot): The contributor-provided local Playwright screenshot directly shows the after-fix light-theme header search tabs using light segmented-control colors.

Label justifications:

• P3: This is a low-risk visual theme polish bug in the header search typeahead, with limited blast radius.
• 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 contributor-provided local Playwright screenshot directly shows the after-fix light-theme header search tabs using light segmented-control colors.
• proof: sufficient: Contributor real behavior proof is sufficient. The contributor-provided local Playwright screenshot directly shows the after-fix light-theme header search tabs using light segmented-control colors.
• proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The contributor-provided local Playwright screenshot directly shows the after-fix light-theme header search tabs using light segmented-control colors.

Evidence reviewed

What I checked:

• Repository policy read: AGENTS.md was read fully and its PR proof, test, and read-only review guidance was applied. (AGENTS.md:1)
• Current main has the reported styling problem: Current main applies hard-coded dark segmented variables to .navbar-search-typeahead-tabs.clawhub-segmented, so light mode still inherits dark tab colors before this PR. (src/styles.css:15870, f3842551c4a7)
• Header uses the targeted tab classes: The Header typeahead renders the tablist with navbar-search-typeahead-tabs clawhub-segmented and each tab with navbar-search-typeahead-tab clawhub-segmented-btn, so the CSS patch targets the active runtime surface. (src/components/Header.tsx:832, f3842551c4a7)
• PR diff is narrow and on-path: The diff adds resolved light and dark theme overrides for the typeahead tabs and moves padding/radius to the shared typeahead selector. (src/styles.css:15871, 6859038646e0)
• Regression assertion added: The PR adds a Header test asserting the light and dark theme CSS selectors and representative variables for the typeahead segmented tabs. (src/__tests__/header.test.tsx:425, 6859038646e0)
• Visual proof inspected: The downloaded Playwright screenshot shows the header search typeahead in light theme with light segmented tabs instead of the current dark treatment.

Likely related people:

• vyctorbrzezowski: git blame and git log -S show the current header typeahead segmented styling came from b1e077d, and this PR author also authored that merged header/search UX work. (role: introduced behavior and recent area contributor; confidence: high; commits: b1e077da382c, 6859038646e0; files: src/styles.css, src/components/Header.tsx, src/__tests__/header.test.tsx)
• Patrick-Erichsen: GitHub PR metadata shows the earlier header/search polish PR that introduced the affected styling was merged by Patrick-Erichsen, making them a useful routing candidate for acceptance context. (role: merger of originating header UX PR; confidence: medium; commits: b1e077da382c; files: src/styles.css, src/components/Header.tsx, src/__tests__/header.test.tsx)

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.