refactor(css): prune inert component rules from components.css (Tier 3)

[letsgetrusty]

Follow-up to #6, split out because it needed an isolated onboarding visual re-test.

Insight

components.css is linked by only onboarding.html — settings.html and index.html load their own sheets, and settings.css carries its own copies of these components. So any component class onboarding doesn't use is dead weight.

Removed (verified 0 references in onboarding.html/.js, including dynamic classList/className)

.status*, kbd, .card*, the textarea/input form-control block, .search, .toggle*, .nav-item*, .empty*. The two combined focus groups were trimmed to their live selectors only (.primary/.small-btn/.recorder :focus-visible; select:focus).

Kept (onboarding uses these)

[hidden], .hint, .primary*, .small-btn*, select*, .recorder*.

~142 LOC removed. No behavior change. Settings is untouched (different stylesheet).

Verified

npm test (16 pass), npm run build, and npm run ui-diff --target onboarding — all six onboarding steps within tolerance, confirming no layout regression on the only window that loads this sheet. (Live screenshot via ui-shot was unavailable in my environment — the terminal lacks macOS Screen Recording permission — but static layout + a full reference sweep are clean.)

🤖 Generated with Claude Code

[Copilot]

🟡 Changes recommended

The change itself is clean and fully verified, but per review policy a purely automated approval is not issued, so a human should confirm the onboarding live-window screenshot (unavailable in the author's environment) before merge.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR removes ~142 LOC of component CSS rules from frontend/components.css that are no longer used. The key insight (verified during review) is that components.css is loaded only by onboarding.html — settings.html uses settings.css and index.html uses styles.css, each carrying their own component copies — so any component class the onboarding window doesn't reference is dead weight. This is a follow-up to #6, split out to isolate the onboarding visual re-test.

I independently verified that none of the removed selectors (.status*, kbd, .card*, the textarea/input form-control block, .search, .toggle*, .nav-item*, .empty*) are referenced in onboarding.html, nor added dynamically via classList/innerHTML in onboarding.js or the shared recorder.js. The kept selectors ([hidden], .hint, .primary*, .small-btn*, select*, .recorder*) and the trimmed focus/select groups all map to live onboarding elements, and the dynamic state classes (done/failed/recording/ok/warn/invalid) are styled by onboarding.css, not the removed rules.

Changes:

• Removed unused component rules (status, keycap, card, form-control inputs, search, toggle, nav-item, empty-state) that onboarding never uses.
• Trimmed two combined focus groups to their live selectors only (.primary/.small-btn/.recorder :focus-visible; select:focus).
• Updated the [hidden] comment to drop the now-removed .field example.

File summaries

File	Description
frontend/components.css	Removes component CSS blocks unused by the only page that loads the sheet (onboarding), and trims combined focus/select selector lists to their live members.

Review details

• Files reviewed: 1/1 changed files
• Comments generated: 0
• Review effort level: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.