UI-04: AppShell premium reskin using shared tokens and primitives

[Chris0Jeky]

Summary

• Replace all hardcoded rgba() border colors, px font sizes, magic-number spacing, and one-off shadows across the four AppShell components (ShellSidebar, ShellTopbar, ShellCommandPalette, ShellKeyboardHelp) with design token CSS custom properties (--td-border-*, --td-font-*, --td-space-*, --td-shadow-*, --td-radius-*, --td-transition-*, --td-color-*, --td-glass-*)
• Add border-radius to command palette, keyboard help panel, topbar palette trigger, and mode select for consistent rounded-corner treatment
• Add focus-visible rings (--td-focus-ring) to sidebar toggle, nav items, topbar palette trigger, and keyboard help close button for improved keyboard accessibility
• Visual-only changes -- zero behavior, event handling, keyboard shortcut, or component API modifications

Closes #246

Test plan

• npm run build passes (typecheck + vite build)
• npx vitest --run passes all 1039 tests across 115 test files
• Manual: verify sidebar, topbar, command palette (Ctrl+K), keyboard help (?) render correctly
• Manual: verify light theme (data-theme="light") and compact density (data-density="compact") still apply correctly
• Manual: tab through all interactive shell elements to confirm focus rings appear

[gemini-code-assist]

Warning

You have reached your daily quota limit. Please wait up to 24 hours and I will start processing your requests again!

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[Chris0Jeky]

Adversarial Self-Review

Token coverage audit

Checked all four shell component <style> blocks for remaining hardcoded values:

Remaining hardcoded values (intentionally kept):

• gap: 1px in .td-sidebar__nav, .td-sidebar__section, .td-sidebar__footer -- hairline separator, below the design token spacing scale minimum (--td-space-1 = 0.2rem ~3.2px). Tokenizing would require a new --td-space-px token, which is out of scope.
• width: 20px in .td-nav-item__icon -- fixed layout width for icon alignment; not a spacing token candidate.
• min-width: 18px; height: 18px; line-height: 18px in .td-nav-badge -- tight coupling for pill geometry. Could use a --td-badge-size token but the TdBadge primitive was not integrated here because the badge is rendered inline inside a <router-link> slot; wrapping with a component would change the template structure (out of scope for visual-only).
• min-width: 120px, max-width: 300px, min-width: 260px in topbar -- layout breakpoint constants, not design tokens.
• width: 6px; height: 6px on status dot -- micro-indicator, not tokenized.
• border-left: 4px solid on active nav -- deliberate accent width, not a spacing token.
• letter-spacing: 0.15em / 0.2em / 0.05em / -0.04em / -0.02em -- typographic detail below current token granularity.
• max-height: 300px in command palette results, max-height: 80vh in keyboard help -- layout constraints, not tokens.
• padding-top: 15vh in overlay -- viewport-relative positioning.

Potential issues found:

1. --td-font-xs is 0.6875rem (11px) but original subtitle was 8px and section labels were 10px -- the subtitle will render slightly larger (11px vs 8px) and section labels slightly larger (11px vs 10px). This is a deliberate design upgrade to align with the token scale (the 8px text was likely too small for readability). Acceptable for a reskin.
2. Sidebar shadow changed from directional (40px 0 60px -15px rgba(0,0,0,0.3)) to ambient (--td-shadow-lg) -- the old shadow cast only rightward; the token shadow is omnidirectional. This changes the visual separation slightly but aligns with the token system. Acceptable.
3. 0.5px borders upgraded to 1px -- sub-pixel borders render inconsistently across displays; 1px is more reliable and matches what --td-border-default intends.

No behavior changes detected:

• All template markup is identical (no v-if, v-for, @click, @keydown, emit, or prop changes)
• No script changes in any file
• Escape stack, keyboard shortcuts, command palette filtering, routing all untouched
• All 1039 existing tests pass

Accessibility check

• Added focus-visible rings to: sidebar toggle, nav items, topbar palette trigger, keyboard help close button, mode select
• No tabindex or role attributes were changed
• aria-label, aria-current, aria-selected attributes all preserved

[Chris0Jeky]

Adversarial Code Review — PR #499

Reviewed all 4 changed files line-by-line against design-tokens.css and the pre-existing code. This is a visual-only reskin, so the bar is: no behavior changes, no accessibility regressions, no broken token references, and visual fidelity that makes sense.

Findings

1. [Medium] Sidebar shadow direction changed — ShellSidebar.vue (diff line ~316)

Old: box-shadow: 40px 0 60px -15px rgba(0, 0, 0, 0.3) — a rightward cast shadow creating depth at the sidebar edge.
New: var(--td-shadow-lg) = 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 1px ... — a centered/downward shadow.

This meaningfully changes the sidebar's visual presentation. The old shadow was an intentional design choice to create a depth-separation effect at the sidebar's right edge. The generic elevation token doesn't replicate that. Consider whether a dedicated --td-shadow-sidebar token is warranted, or confirm this is an intentional design change.

2. [Low] Subtitle font-size jump from 8px to 11px — ShellSidebar.vue:349

.td-sidebar__subtitle was 8px, now --td-font-xs (0.6875rem = 11px). That's a 37.5% increase. The 8px size was likely intentional for an ultra-small decorative subtitle ("Precision Mode Active"). At 11px it may look disproportionately large relative to the title. Confirm this is the intended visual result.

3. [Low] Command palette group-title jumps from 9px to 11px — ShellCommandPalette.vue:212

.td-command-palette__group-title was 9px, now --td-font-xs (11px). A 22% increase for a section header that was intentionally small. Worth verifying visually.

4. [Low] Backdrop blur reduced from 24px to 16px — ShellCommandPalette.vue:180, ShellKeyboardHelp.vue:73

Both panels had backdrop-filter: blur(24px), now use blur(var(--td-glass-blur)) which is 16px. The original stronger blur created a more prominent frosted-glass effect. This is a conscious trade-off for consistency but changes the look.

5. [Info] Remaining hardcoded values not tokenized in these files

These are outside the PR's scope but worth noting for completeness:

• .td-overlay in both CommandPalette and KeyboardHelp: rgba(0, 0, 0, 0.7) and blur(4px) not tokenized
• .td-nav-item__icon width: 20px, .td-nav-badge dimensions 18px/18px not tokenized
• .td-sidebar__nav and .td-sidebar__footer gap: 1px not tokenized

Not a problem for this PR since they're in unchanged lines, but worth a follow-up.

What Looks Good

• All referenced tokens exist in design-tokens.css — no broken custom property references.
• No behavior changes — zero script/template modifications, only <style> blocks touched.
• Accessibility improved — added focus-visible rings to sidebar toggle, nav items, topbar palette trigger, keyboard help close button, and mode select. All use --td-focus-ring which is a proper 2-ring design. Good.
• Active command item border technique is correct: border: none then border-left: 2px solid transparent on base, border-left-color override on --active. No layout shift between states.
• --td-text-inverse for nav badge text is semantically correct for both dark and light themes.
• Light theme and compact density tokens all properly cascade — nothing here breaks those.
• No removed hover/focus/active states — all pre-existing interactive states preserved; new focus-visible states added.

Verdict

No functional bugs or regressions. The PR does what it says: tokenizes hardcoded values and adds focus-visible rings. Items 1-4 above are visual design changes that go slightly beyond "swap magic numbers for tokens" — they change actual rendered values. If those visual shifts are intentional, this is good to merge. If not, items 1 and 2 in particular should be addressed.