refactor(web): ghost-muted icons follow the text; add ghost-destructive

[juliusmarminge]

Twelve icon buttons set [--control-icon-color:currentColor] so the glyph
followed the label color instead of the variant's fixed muted tint, and
then coloured the label per site. The fixed tint was the drift: a muted
ghost button's icon should already read as the label does. ghost-muted
now uses currentColor, and the delete affordances that turned red on
hover become variant="ghost-destructive".

The three state indicators (favorite star, setting-inheritance marker,
update advisory) carried their state colour on the button; it now sits on
the icon, where it belongs, and the button is a plain ghost-muted.

Visible effect: the favorite star is tinted with the warning token
instead of text-yellow-500 and reads muted at rest like its neighbours;
the inheritance marker's "environment" and "default" states share the
muted tone.

Lowers the no-restyle ceiling from 999 to 965.

Layer 14 of 24 in stack #13044, ordered least to most opinionated. Part of the components/ui className cleanup (audit and guardrail: #12982). Each layer lowers the shadcn/no-restyle ceiling; CI fails if the count rises. For every override cluster the question was "is this a real design-system concept, or should the primitive get stricter and the consumers change?"; a prop was only added for the former.

Written by Claude Fable 5 in Claude Code.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Style
  • Standardized button and icon styling across sidebars, panels, filters, chat attachments, and settings.
  • Improved visual distinction for destructive actions such as removing themes, environment variables, and provider instances.
  • Refined muted, warning, and state-dependent colors for provider updates, favorite models, and inherited settings.
  • Preserved existing button interactions and focus-visible behavior while simplifying visual presentation.

Before / after

Captured at 1280×800 from the same seeded data. "After" is the top of stack #13044, so these show the cumulative effect of every layer up to and including the last one; the relevant change for this PR is described above.

settings-provider-instance

before (main)	after (top of stack)

settings-provider-env-vars

before (main)	after (top of stack)

settings-provider-update-advisory

before (main)	after (top of stack)

[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.5 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: 2a36b3c · 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 2a36b3c

Macroscope's review found this PR approvable — This is a contained UI styling refactor that centralizes muted and destructive ghost-button colors without changing handlers, data, or application workflows. The accompanying lint threshold is tightened rather than suppressed, and no product defaults are modified.

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

[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: 9e34809f-e164-4846-804b-5eb698c654e8

📥 Commits

Reviewing files that changed from the base of the PR and between e19877c and 2a36b3c.

📒 Files selected for processing (1)

• scripts/lint-restyle-ceiling.ts

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

---

📝 Walkthrough

Walkthrough

The change standardizes button icon and state colors across web components. It adds a destructive ghost variant, updates controls to use shared variants, removes custom control-color classes, and lowers the restyle lint ceiling.

Changes

Button styling consistency

Layer / File(s)	Summary
Shared button variants apps/web/src/components/ui/button.tsx	ghost-muted now uses currentColor for icons. A ghost-destructive variant now provides muted default text and destructive hover text.
Component styling migration apps/web/src/components/LegacySidebar.tsx, apps/web/src/components/RightPanelTabs.tsx, apps/web/src/components/Sidebar.tsx, apps/web/src/components/chat/SnapShotAttachmentDetails.tsx, apps/web/src/components/pullRequest/PullRequestListFilters.tsx, apps/web/src/components/settings/*	Updated controls use shared button variants and direct icon state colors. Custom control-color classes were removed. Existing behavior and accessibility remain unchanged where noted.
Restyle lint threshold scripts/lint-restyle-ceiling.ts	RESTYLE_CEILING was reduced from 899 to 865 findings.

Priority: ⬇️ Low

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

Change: Bug fix

Merge Risk: ⚪ Minimal · up to 2a36b

The styling changes preserve existing interactions and state handling, with no concrete merge-blocking risk established.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 9 functions across 10 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: updating ghost-muted icon behavior and adding the ghost-destructive variant.
Description check	✅ Passed	The description explains the changes, rationale, UI effects, and includes before/after screenshots. It omits the checklist and states the restyle ceiling change as 999 to 965, while the change summary…

• 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.}

Dismissing prior approval to re-evaluate 2a36b3c