refactor(web): add Alert sidebar variants and Kbd sizes

[juliusmarminge]

Three sidebar alerts hand-rolled the same pill (rounded-2xl, warning/40
border, warning/8 fill) and one the same for a neutral notice; the thread
error banner reached the alert-glass utility through className. Expose
variant="sidebar-notice|sidebar-warning" and surface="glass" on Alert.
Kbd gets size="xs|default|wide" and KbdGroup gap="loose" for the two
recurring shapes.

Visible effect: the two sidebar connection warnings in the legacy sidebar
drop from text-sm to text-xs, matching the update pill beside them.

Lowers the no-restyle ceiling from 949 to 911.

Part of the components/ui className cleanup (audit and guardrail: #12982). Each layer of stack #12993 lowers the shadcn/no-restyle ceiling; CI fails if the count rises.

Written by Claude Fable 5 in Claude Code.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Style
  • Refined keyboard shortcut badges across command palettes, sidebars, settings, chat, and snapshot controls with consistent compact and wide sizing.
  • Improved spacing for grouped keyboard hints.
  • Standardized alert appearances, including glass surfaces and sidebar notice and warning styles.
  • Updated error banners and architecture notices to use consistent alert styling.
• Refactor
  • Consolidated visual styling through reusable alert and keyboard-control variants for a more consistent interface.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 7f75de04-ceac-4e87-b4f0-1d401b023589

📥 Commits

Reviewing files that changed from the base of the PR and between 3f46286 and 5bba193.

📒 Files selected for processing (12)

• apps/web/src/components/CommandPalette.tsx
• apps/web/src/components/CommandPaletteContent.tsx
• apps/web/src/components/LegacySidebar.tsx
• apps/web/src/components/chat/ModelListRow.tsx
• apps/web/src/components/chat/ThreadErrorBanner.tsx
• apps/web/src/components/desktop/SnapShotShortcutKeys.tsx
• apps/web/src/components/settings/KeybindingsSettings.tsx
• apps/web/src/components/settings/SettingsSidebarNav.tsx
• apps/web/src/components/sidebar/SidebarUpdatePill.tsx
• apps/web/src/components/ui/alert.tsx
• apps/web/src/components/ui/kbd.tsx
• scripts/lint-restyle-ceiling.ts

Limit details: You’ve used all 10 included reviews currently available.

---

📝 Walkthrough

Walkthrough

Changes

Shared UI restyling

Layer / File(s)	Summary
Shared Alert and Kbd contracts apps/web/src/components/ui/alert.tsx, apps/web/src/components/ui/kbd.tsx	Alert adds surface and sidebar variants. Kbd adds size variants. KbdGroup adds gap variants.
Consumer styling migration apps/web/src/components/CommandPalette*.tsx, apps/web/src/components/{LegacySidebar,chat,desktop,settings,sidebar}/*	Consumers replace custom alert and keyboard-hint classes with the shared variants and size or gap props.

Restyle lint gate

Layer / File(s)	Summary
Restyle finding threshold scripts/lint-restyle-ceiling.ts	The lint finding ceiling changes from 949 to 911.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~15 minutes

Change: Refactor

Suggested reviewers: t3dotgg, bil0000

Merge Risk: ⚪ Minimal · up to 5bba1

This is a UI-only restyling change with no identified runtime, data, security, or availability impact, and is ready to merge.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 10.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 10 functions across 12 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
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.
Title check	✅ Passed	The title clearly summarizes the main changes: reusable Alert sidebar variants and Kbd size support.
Description check	✅ Passed	The description clearly explains the Alert and Kbd changes, the visible UI effect, the restyle ceiling update, and the related tracking issue. It omits the template headings, checklist, and before/aft…

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

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

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

ℹ️ No successful main baseline artifact is available yet. This run establishes the initial measurement.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	—	13.5 KiB	—	15.1 KiB	✅
Codex	Thread snapshot wire	—	7.1 KiB	—	7.3 KiB	✅
Codex	Live turn WebSocket wire	—	6.4 KiB	—	7.8 KiB	✅
Codex	Live turn WebSocket decoded	—	56.2 KiB	—	66.4 KiB	✅
Codex	Live turn messages	—	9	—	21	✅
Claude	Total thread wire	—	13.5 KiB	—	15.1 KiB	✅
Claude	Thread snapshot wire	—	7.1 KiB	—	7.3 KiB	✅
Claude	Live turn WebSocket wire	—	6.4 KiB	—	7.8 KiB	✅
Claude	Live turn WebSocket decoded	—	57.0 KiB	—	66.4 KiB	✅
Claude	Live turn messages	—	9	—	21	✅

Baseline: unavailable · PR result: f246da1 · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 114.0 KiB
• Claude decoded thread snapshot: 114.6 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[macroscopeapp]

Approvability

Verdict: Approved at 5bba193

Macroscope's review found this PR approvable — This is a localized UI refactor that centralizes existing Alert and Kbd styling into reusable variants, with only small, explicit presentation changes in existing views. It introduces no schema, workflow, security-sensitive, deployment, or production-processing changes.

Notes:

• Diff unchanged. Approvability was decided on eligibility alone.

No code changes detected at f246da1. Prior analysis still applies.

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