refactor(ui): #642 PR0 — token cleanup (radii, code-surface, Cat A)

[Astro-Han]

Summary

PR0 of three for #642 token redesign. Non-typography cleanup only. Introduces --code-surface alpha-overlay token, aligns radii dual-namespace (theme.css :root ↔ Tailwind @theme both lock to 6/10/14 px), retires Cat A unused tokens (--brand-danger, --brand-danger-hover, --radius-pill, --radius-xs, --radius-xl), migrates inline and fence code backgrounds to --code-surface, and fixes four icon-button hover sites that incorrectly used surface-sunken.

Why

Token surface is drifting. Tailwind @theme declares radii in rem (0.5rem) while theme.css declares px (14px); same identifier, different value — confuses any code that hand-picks one namespace. Inline code currently piggybacks on --surface-sunken, which is also aliased to --bg-cream for general fill — they can't both move. Cat A tokens have zero consumers and clog the file. Four icon buttons (file-search ×3, dialog-select-server ×1) use hover:bg-surface-sunken which renders as a hard cream rectangle on hover instead of the standard ghost overlay.

Related Issue

#642

Human Review Status

Pending.

Review Focus

• Theme parity test additions in packages/ui/test/theme-parity.test.ts — two new describe blocks: (a) radii dual-namespace exact-value lock at 6/10/14, (b) --code-surface three-block presence (light root, dark root, prefers-color-scheme dark).
• Tailwind @theme block (packages/ui/src/styles/tailwind/index.css): --radius-sm/md/lg switched from rem to px; --radius-xs and --radius-xl deleted.
• markdown.css: inline :not(pre) > code and .shiki both now read --code-surface.
• 6 callsite renames rounded-xs|xl → rounded-sm|lg (visual is the same pixel value, just realigned identifier).

Risk Notes

Visual surface: very low. Tailwind utilities rounded-sm/md/lg previously resolved to 4 / 6 / 8 (rem) and now resolve to 6 / 10 / 14 (px). Same identifier, slightly larger geometry on any component using bare rounded-* without a token. theme-parity test now enforces both namespaces match.

Light-mode code surface changes from #FAF9F7 (cream solid) to rgba(0,0,0,0.04) (alpha overlay). The two look near-identical on a white surface; on cream surfaces (--bg-cream) the overlay correctly composites darker.

Cat A removals are dead code (verified by repo-wide grep — 0 consumers).

How To Verify

theme-parity:  bun --cwd packages/ui test test/theme-parity.test.ts  → 139 pass / 0 fail
typecheck:     bunx tsgo -b (packages/app + packages/ui)              → exit 0
e2e smoke:     bun --cwd packages/app test:e2e:local:smoke            → 22 pass / 1 skipped
visual smoke:  4 Playwright screenshots (home, sidebar, settings, session with inline+fence code) — manually OK
sweep grep:    grep -rE 'radius-pill|radius-xs|radius-xl|rounded-xs|rounded-xl|brand-danger' packages/ → 0 hits

The 3 pre-existing failures in icon-button-states.test.ts and button-states.test.ts (Button 28px / IconButton 24×24 size expectations) are stale tests on dev and unrelated to this PR.

Screenshots or Recordings

Visual smoke captured locally via Playwright (home, sidebar with hover overlay, settings dialog, session with inline + fenced code). Diffs from dev are imperceptible on white surfaces; on cream surfaces the inline-code chip and fence block now composite slightly darker (intended).

Checklist

• Human review status is stated above as pending, approved, or not required
• I linked the related issue, or stated why there is no issue
• This PR has type, primary area, and priority labels, or I requested maintainer labeling
• I described the review focus and any meaningful risks
• I listed the relevant verification steps and the key result for each
• I did not introduce unrelated refactors, dependencies, generated files, or file changes beyond the stated scope
• I manually checked visible UI or copy changes when needed, with screenshots or recordings
• I considered macOS and Windows impact for platform, packaging, updater, signing, paths, shell, or permissions changes
• I called out docs, release notes, dependencies, permissions, credentials, deletion behavior, generated content, or local file changes when relevant
• I reviewed the final diff for unrelated changes and suspicious dependency changes
• I am targeting dev, and my PR title and commit messages use Conventional Commits in English

Summary by CodeRabbit

Release Notes

• Style
  • Refined component corner radius across the UI for improved visual consistency.
  • Updated hover states for interactive buttons with enhanced color contrast.
  • Improved code block styling with a dedicated color scheme for better readability.

[github-actions]

Suggested priority: P2 (includes user-path files (packages/app/src/components/debug-bar.tsx, packages/app/src/components/dialog-select-server.tsx, packages/app/src/components/status-popover-body.tsx, packages/app/src/components/status-popover.tsx, packages/app/src/pages/session/files-tab.tsx)).

P1/P0 are reserved for maintainer confirmation. Please relabel manually if this is a release blocker, security issue, data-loss risk, or updater/runtime failure.

[coderabbitai]

Warning

Rate limit exceeded

@Astro-Han has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 32 minutes and 28 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: fee24327-8cb9-4b91-b416-511e63bff47c

📥 Commits

Reviewing files that changed from the base of the PR and between 0450a74 and e701a7c.

📒 Files selected for processing (3)

• packages/ui/src/context/marked.tsx
• packages/ui/test/theme-parity.test.ts
• packages/ui/test/undefined-tokens.test.ts

📝 Walkthrough

Walkthrough

This PR consolidates the design token scale by redefining radius tokens from rem to fixed px values, introducing a new code-surface token for code styling, and updating components and CSS rules to consume the refreshed tokens throughout the application.

Changes

Design Token Consolidation: Radius Scale and Code Surface

Layer / File(s)	Summary
Radius and code-surface token definitions packages/ui/src/styles/tailwind/index.css, packages/ui/src/styles/theme.css, packages/ui/src/theme/themes/pawwork.json	Tailwind @theme defines new radius tokens in px (6px/10px/14px) replacing rem values; theme.css adds --code-surface token for code backgrounds and removes --radius-pill, --brand-danger, --brand-danger-hover; PawWork theme overrides code-surface for light and dark modes.
CSS component styling using updated tokens packages/ui/src/components/markdown.css, packages/ui/src/components/message-part.css	Markdown inline code and Shiki blocks switch background to --code-surface; bash-output and dock-prompt focus elements use var(--radius-sm) in place of hardcoded or deprecated radius values.
Component rounded-radius and hover updates packages/app/src/components/debug-bar.tsx, packages/app/src/components/dialog-select-server.tsx, packages/app/src/components/status-popover-body.tsx, packages/app/src/components/status-popover.tsx, packages/app/src/pages/session/files-tab.tsx, packages/ui/src/components/file-search.tsx	Container and popover elements change rounded-xl to rounded-lg; default badge changes rounded-xs to rounded-sm; file-search and dialog button hovers switch from hover:bg-surface-sunken to hover:bg-row-active-overlay.
Theme parity tests packages/ui/test/theme-parity.test.ts	REGULATED_PREFIXES adds code token prefix; SAME_IN_DARK is narrowed to brand and foreground tokens only; new fixture tests assert radius token pixel-equivalence and code-surface presence across all theme blocks.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Astro-Han/pawwork#565: Updates shared Tailwind radius tokens that directly affect UI corner-radius styling; SettingsMemory and other components rely on the same token definitions being updated in this PR.

Suggested labels

ui, P3, app

Poem

🐰 The radius tokens hop along,
From rem to px, steady and strong!
Code surfaces gleam in their new hue,
While corners round softly, a stylish debut,
bounces through the design system

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely identifies the primary change: a token cleanup refactor addressing issue #642, specifically covering radii consolidation, code-surface token introduction, and removal of unused Cat A tokens. It is specific, relevant, and accurately reflects the changeset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	The PR description is comprehensive and well-structured, following the template with all required sections completed.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/642-pr0-non-typography-cleanup

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[gemini-code-assist]

Code Review

This pull request updates the design system by consolidating border-radius tokens, introducing a new --code-surface token for code backgrounds, and removing unused brand colors. Multiple components were updated to reflect these changes, including transitions from rounded-xl to rounded-lg and updates to hover states. The theme parity tests were also expanded to cover these new tokens. Feedback suggests enhancing the test suite's robustness by improving comment-stripping logic to include single-line comments and using more precise declaration parsing for radii verification.

[github-actions]

Perf delta summary

Comparator: pass

Profile / Scenario	interaction median	interaction worst	long task max	tbt	frame gap p95	frame gap max	jank count	cls	status
default / homepage-cold	32 -> 32 (0)	40 -> 40 (0)	64 -> 68 (+4)	14 -> 18 (+4)	16.8 -> 33.3 (+16.5)	183.3 -> 116.6 (-66.7)	3 -> 4 (+1)	0 -> 0 (0)	pass
default / long-session-input-lag	48 -> 48 (0)	48 -> 48 (0)	0 -> 0 (0)	0 -> 0 (0)	16.7 -> 16.7 (0)	16.7 -> 16.8 (+0.1)	0 -> 0 (0)	0 -> 0 (0)	pass
default / session-streaming-long	40 -> 48 (+8)	72 -> 56 (-16)	0 -> 0 (0)	0 -> 0 (0)	16.8 -> 16.8 (0)	16.8 -> 33.4 (+16.6)	0 -> 0 (0)	0 -> 0 (0)	pass
default / tool-call-expand	16 -> 16 (0)	24 -> 24 (0)	0 -> 0 (0)	0 -> 0 (0)	16.8 -> 16.7 (-0.1)	16.8 -> 16.7 (-0.1)	0 -> 0 (0)	0 -> 0 (0)	pass
default / tool-default-open-heavy-bash	24 -> 24 (0)	32 -> 32 (0)	63 -> 64 (+1)	14 -> 14 (0)	49.9 -> 49.9 (0)	116.7 -> 116.6 (-0.1)	2 -> 3 (+1)	0 -> 0 (0)	pass
default / terminal-side-panel-open	56 -> 56 (0)	64 -> 56 (-8)	0 -> 0 (0)	0 -> 0 (0)	33.4 -> 33.4 (0)	33.4 -> 50 (+16.6)	0 -> 0 (0)	0 -> 0 (0)	pass
default / session-scroll-reading	24 -> 16 (-8)	32 -> 24 (-8)	0 -> 0 (0)	0 -> 0 (0)	16.7 -> 16.8 (+0.1)	16.7 -> 16.8 (+0.1)	0 -> 0 (0)	0.505 -> 0.505 (0)	warn: cls
low-end / session-scroll-reading-long	56 -> 64 (+8)	80 -> 80 (0)	78 -> 68 (-10)	36 -> 37 (+1)	16.8 -> 16.8 (0)	199.9 -> 166.6 (-33.3)	2 -> 4 (+2)	0.016 -> 0.016 (0)	pass
low-end / session-timeline-recompute	112 -> 112 (0)	112 -> 128 (+16)	100 -> 98 (-2)	124 -> 129 (+5)	83.3 -> 83.4 (+0.1)	150.1 -> 150 (-0.1)	3 -> 3 (0)	0.081 -> 0.081 (0)	pass
low-end / concurrent-shimmer-extreme	0 -> 0 (0)	0 -> 0 (0)	0 -> 0 (0)	0 -> 0 (0)	16.7 -> 16.8 (+0.1)	16.8 -> 16.8 (0)	0 -> 0 (0)	0 -> 0 (0)	pass