[Byntham]

Selecting a color in the theme editor should highlight every place that uses it, every time.

A new thread with no status banner, with "Raised surface" selected. Before, the composer is missed (0 uses). After, it is found (1 use).

Before	After

Problem

With "Raised surface" selected in the theme editor, the composer highlight and the use count flickered between 0 and 1 while a thread ran.

The inspector finds uses by swapping the color token to a probe color and comparing each element's computed style. It only read getComputedStyle(element), which leaves out ::before and ::after. The composer paints its raised surface on the shell's ::before. When a status banner such as "Waiting on command…" attaches to the composer, that layer is hidden and the main element gets a real background. So the inspector saw the color only while a banner was showing.

Other colors painted on pseudo-elements were missed the same way. These include the composer outline in custom themes (Border), dividers in segmented controls and button groups (Input), and the fade at the edge of scrolling select menus (Overlay).

Change

getThemePaintSnapshot in themeInspector.ts now also records the background and border colors of visible ::before and ::after pseudo-elements. The first snapshot records which pseudo-elements paint. The probe pass then reads only those, because the probe changes colors and never changes which pseudo-elements exist. The click-to-inspect path uses the same snapshot, so it gets the fix too.

Scope and approval

This is a small fix for a clear bug in one function. It changes no behavior outside the theme inspector.

Verification

• A new browser test, themeInspector.browser.test.ts, checks that an element painting a theme color on ::before is counted. It fails on main with expected +0 to be 1 and passes with this change.

• Benchmark in headless Chromium on a page with 4,000 elements, median time per highlight refresh:

  • main: 113 ms
  • Reading both pseudo-elements in both passes: 161 ms
  • This change: 139 ms

  Refreshes only run while the editor is open with a color selected, and at most every 500 ms.

• vp run check:changed passes: format, lint, knip, typecheck, tests.

Note

Implemented and tested by claude-opus-5-5, reviewed by gpt-6.1-sol.

🤖 Generated with Claude Code

[macroscopeapp]

Approvability

Verdict: Approved at f4ad4b6

Macroscope's review found this PR approvable — This is a focused theme-inspector bug fix that detects colors painted on visible pseudo-elements, with a browser regression test. Its runtime impact is limited to the active theme-editor inspection workflow and does not change product defaults or production rendering.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

No actionable comments were generated in the recent review.

Recent review info

Run configuration

• Source mode: Auto
• Repository: pingdotgg/t3code
• Branch: main
• File: .coderabbit.config.ts
• Commit: 62245d8
• Layers: Repository TS config
• Review profile: CHILL
• Plan: Advanced
• Run ID: b1d07482-4ce3-4a08-b4af-0fb0afa97ace

Commits

Reviewing files that changed from the base of the PR and between 62245d8 and f4ad4b6.

Files selected for processing: 2

• apps/web/src/components/settings/themeInspector.browser.test.ts
• apps/web/src/components/settings/themeInspector.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

Walkthrough

Theme paint snapshots now include paints from visible ::before and ::after pseudo-elements. Highlight and role probes reuse the pseudo-elements found in baseline snapshots. A browser test checks theme-color usage on ::before.

Changes: Pseudo-element paint inspection

Layer / File(s)	Summary
Collect pseudo-element paints and compare probes apps/web/src/components/settings/themeInspector.ts, apps/web/src/components/settings/themeInspector.browser.test.ts	Snapshots record visible pseudo-elements and their background and border paints. Highlight and role probes reuse the baseline pseudo-element list. The browser test checks surfaceRaised usage on ::before.

Priority: Normal

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Bug fix

Possibly related PRs

• pingdotgg/t3code#23942: Updates getThemePaintSnapshot to include SVG and marked-canvas paints.

Suggested reviewers: maria-rcks

Merge Risk: Minimal · up to f4ad4

No actionable issue remains identified for this change; it is mergeable after normal checks.

Pre-merge checks: 4

Check name	Status	Explanation
Title check		The title "fix(web): theme editor finds colors on the composer and other layered surfaces" matches the main change. The PR makes the theme inspector read ::before and ::after background and border col…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.
Description check		The description includes the required Problem, Change, Scope and approval, and Verification sections. It explains the bug, the implementation, the reason the scope exemption applies, focused browser-t…

Full details: Title check

Explanation

The title "fix(web): theme editor finds colors on the composer and other layered surfaces" matches the main change. The PR makes the theme inspector read ::before and ::after background and border colors, so colors on layered surfaces such as the composer are found. The title is specific and uses the conventional commit format.

Full details: Description check

Explanation

The description includes the required Problem, Change, Scope and approval, and Verification sections. It explains the bug, the implementation, the reason the scope exemption applies, focused browser-test results, performance measurements, validation results, before/after screenshots, and the agent details.

Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}

[maria-rcks]

Note

Written by gpt-6.1-sol on behalf of Maria

Verified in a real dev environment

Verified unchanged head f4ad4b6ed85325b43499ee023508d53d2d692625 on this Linux Boat VM, using the repository's Playwright and /usr/bin/google-chrome against real development servers. No mocks, fixtures, or demo turns.

• First reproduced on github/main (6575ce3250) in /home/user/main, installed with vp i: a new thread's visible composer reports Raised surface · 0 uses.
• Stopped main, checked out the exact PR head in /home/user/t3code, installed with vp i, and ran the server in the background with isolated .t3 state (web 5733, server 13773). Added the real git project /home/user/t3code and created the thread through the web client.
• In Appearance → Create theme → Advanced, selecting Raised surface highlights the composer: 1 use in dark mode, 2 painted composer layers in light mode. The before/after images use the same real project, empty draft, dark colors, selected role, and 1440×1000 viewport. Current main has a newer composer layout.
• Selected Codex gpt-6.1-sol in the client and submitted a real turn through WebSocket → server → Codex → local proxy. pwd returned /home/user/t3code; timeout 20 sleep 8 exited 0; the final reply theme verification complete. rendered in the client. All 42 sampled states across the turn retained 1 highlighted composer use. The recording shows idle, working, running sleep, and completion.
• Neighbor checks passed: selecting and click-inspecting Text finds foreground uses; editing Raised surface's hex changes the actual composer's ::before paint; deselecting clears matches; closing the editor removes the spotlight and matches. Light/dark previews both work.
• Blacksmith: the existing themeInspector.browser.test.ts passed. vp run check:changed 7f26969c510eca3558f9e4f8f9a8fb4acb41f564 passed format, lint, knip, affected typechecks, and the browser test. Installed missing Chromium on the worker before rerunning. No source changes or pushes were needed.

Before, current main:

After, exact PR head:

Real Codex turn, 25 seconds:

Short runtime transcript

Not verified

• Native iOS/Android, Electron shell, macOS/Windows, relay/tunnel connections, and providers other than Codex were not exercised on this Linux web-client run.
• The historical “Waiting on command…” attached banner did not appear during this turn, so its exact attach/detach transition is not claimed as verified. The missing idle-composer highlight was reproduced on main and verified on the PR, and the real turn retained its highlight throughout.
• Other pseudo-element surfaces were not exhaustively inspected, and no performance benchmark is claimed.
• Current main persisted the real Codex command results but did not render the assistant output in its client. This was baseline-only; the PR client rendered the commands and final response correctly.

No merge, close, rebase, force-push, or label change.