From 9885a845c97325b1099b095011da8385485616f5 Mon Sep 17 00:00:00 2001
From: "t3-code[bot]" <269035359+t3-code[bot]@users.noreply.github.com>
Date: Fri, 14 Aug 2026 23:30:13 +0200
Subject: [PATCH] refactor(web): simplify global styling (#6381)

Co-authored-by: Julius Marminge <51714798+juliusmarminge@users.noreply.github.com>
Co-authored-by: Julius Marminge <julius0216@outlook.com>
---
 .../check-run-agents/ui-consistency.md        |   82 ++
 apps/web/src/components/AgentsPanel.tsx       |   18 +-
 .../BranchToolbarBranchSelector.tsx           |    9 +-
 apps/web/src/components/ChatMarkdown.tsx      |   23 +-
 apps/web/src/components/ChatView.tsx          |   18 +-
 .../src/components/ComposerPromptEditor.tsx   |   12 +-
 apps/web/src/components/DiffPanel.tsx         |    9 +-
 apps/web/src/components/DiffPanelShell.tsx    |    2 +-
 apps/web/src/components/LegacySidebar.tsx     |    7 +-
 .../src/components/NoActiveThreadState.tsx    |    4 +-
 apps/web/src/components/RightPanelTabs.tsx    |   13 +-
 apps/web/src/components/Sidebar.tsx           |   13 +-
 .../src/components/ThreadTerminalDrawer.tsx   |    9 +-
 .../components/chat/ComposerCommandMenu.tsx   |    2 +-
 .../ComposerPreviewAnnotationCards.test.tsx   |   14 +
 .../chat/ComposerPreviewAnnotationCards.tsx   |   10 +-
 .../components/chat/ComposerStashBadge.tsx    |    2 +-
 .../src/components/chat/ComposerStashMenu.tsx |    2 +-
 .../components/chat/ContextWindowMeter.tsx    |   15 +-
 .../components/chat/MessagesTimeline.test.tsx |    4 +-
 .../src/components/chat/MessagesTimeline.tsx  |    2 +-
 .../components/chat/ModelPickerContent.tsx    |   11 +-
 .../components/chat/ProviderStatusBanner.tsx  |   10 +-
 apps/web/src/components/composerInlineChip.ts |    3 +
 .../diffs/StyledDiffCodeView.test.tsx         |    4 +-
 .../components/diffs/StyledDiffCodeView.tsx   |    4 +-
 .../src/components/files/FileBrowserPanel.tsx |    7 +-
 .../src/components/files/FilePreviewPanel.tsx |    5 +-
 .../components/preview/PreviewChromeRow.tsx   |    8 +-
 .../pullRequest/PullRequestCodeTab.tsx        |   24 +-
 .../pullRequest/PullRequestDetailPanel.tsx    |   10 +-
 .../pullRequest/PullRequestListFilters.tsx    |   26 +-
 .../pullRequest/PullRequestReviewerPicker.tsx |    5 +-
 .../search/ProjectContentSearchDialog.tsx     |   15 +-
 .../settings/DiagnosticsSettings.tsx          |   26 +-
 .../settings/KeybindingsSettings.tsx          |   98 +-
 .../settings/ProjectSettingsPanel.tsx         |    2 +-
 .../settings/ProviderInstanceCard.tsx         |    9 +-
 .../settings/ProviderModelsSection.tsx        |   33 +-
 .../settings/ProviderSettingsPanel.tsx        |   10 +-
 .../settings/ResourceTelemetryDiagnostics.tsx |   14 +-
 .../settings/SettingsSidebarNav.tsx           |    4 +-
 .../settings/SourceControlSettings.tsx        |   45 +-
 .../components/settings/ThemeImportDialog.tsx |    8 +-
 .../settings/ThemeSearchSection.tsx           |   30 +-
 .../components/settings/settingsLayout.tsx    |   18 +-
 .../src/components/sidebar/SidebarChrome.tsx  |    2 +-
 .../sidebar/SidebarProviderUpdatePill.tsx     |   12 +-
 .../src/components/threadSidebarWidth.test.ts |   19 +-
 apps/web/src/components/ui/button.test.tsx    |   15 +
 apps/web/src/components/ui/button.tsx         |    8 +
 apps/web/src/components/ui/combobox.tsx       |    2 +-
 apps/web/src/components/ui/input-group.tsx    |    4 +-
 apps/web/src/components/ui/input.tsx          |    6 +-
 apps/web/src/components/ui/menu.tsx           |   10 +-
 apps/web/src/components/ui/popover.tsx        |    2 +
 apps/web/src/components/ui/scroll-area.tsx    |   19 +-
 apps/web/src/components/ui/select.tsx         |    4 +-
 apps/web/src/components/ui/sidebar.tsx        |    2 +
 apps/web/src/components/ui/skeleton.tsx       |    2 +-
 apps/web/src/components/ui/toast.tsx          |   27 +-
 apps/web/src/components/ui/toggle.tsx         |    2 +
 apps/web/src/components/usage/UsagePage.tsx   |   11 +-
 apps/web/src/index.css                        | 1099 ++++++-----------
 .../web/src/routes/-chatIndexTitlebar.test.ts |    7 +-
 apps/web/src/routes/_chat.index.tsx           |    2 +-
 apps/web/src/routes/_chat.pull-requests.tsx   |    7 +-
 apps/web/src/routes/settings.tsx              |    2 +-
 apps/web/src/terminal/ghostty/surface.ts      |    9 +-
 69 files changed, 850 insertions(+), 1122 deletions(-)
 create mode 100644 .macroscope/check-run-agents/ui-consistency.md

diff --git a/.macroscope/check-run-agents/ui-consistency.md b/.macroscope/check-run-agents/ui-consistency.md
new file mode 100644
index 0000000000000000000000000000000000000000..8ec720742759fdd234425cea920a32ecbba865db
--- /dev/null
+++ b/.macroscope/check-run-agents/ui-consistency.md
@@ -0,0 +1,82 @@
+---
+title: UI Consistency
+model: claude-opus-5
+effort: high
+input: full_diff
+tools:
+  - browse_code
+  - git_tools
+  - github_api_read_only
+  - modify_pr
+include:
+  - "apps/web/src/**/*.ts"
+  - "apps/web/src/**/*.tsx"
+  - "apps/web/src/**/*.css"
+conclusion: failure
+showToolCalls: true
+---
+
+# UI consistency review
+
+Review changed web UI code and directly affected call sites for consistency with the shared component system, Tailwind ownership, and the behavioral constraints below. Apply these rules when a pull request creates, moves, or modifies controls or styling. Do not demand unrelated repository-wide cleanup.
+
+The goal is not to minimize CSS or class counts at any cost. The goal is to put each behavior in the smallest correct owner while preserving interaction, theming, accessibility, layout, and browser behavior.
+
+## Shared controls and variants
+
+- Prefer the core UI primitives in `apps/web/src/components/ui` over native controls or locally reconstructed primitives. In ordinary product UI, a raw `<button>` that recreates `Button`, a raw input that recreates `Input` or `InputGroup`, or a local trigger that recreates `Select`, `Toggle`, or `Menu` is a concrete finding.
+- Do not flag raw elements that intentionally implement a semantic row, tab, resize handle, swatch, image target, editor surface, or another interaction whose behavior or geometry differs from the core primitive.
+- When multiple call sites repeat the same durable geometry or treatment, prefer a named primitive size or variant. Examples include compact controls, micro icon actions, muted ghost actions, and glass actions. Keep contextual layout, width, and color at the call site.
+- Flag large call-site class strings that override a primitive's core height, radius, padding, focus ring, cursor, hit target, or base state colors. Prefer extending the primitive contract when the same pattern is genuinely shared.
+- Preserve accessibility and interaction semantics during migrations: focus-visible rings, disabled behavior, loading state, keyboard behavior, pointer cursor, `aria-*`, Base UI or Radix render/close props, and coarse-pointer hit targets.
+- Do not require tests for a tiny visual-only class migration. Require focused tests when primitive composition changes behavior, prop forwarding, state transitions, keyboard handling, or width/defaulting logic.
+
+## CSS and Tailwind ownership
+
+- Ordinary one-owner presentation belongs in the owning TS or TSX module as static Tailwind classes or owner-level CSS variables. Examples include local geometry, spacing, typography, backgrounds, borders, simple vendor pseudo-elements, and component-only positioning.
+- Keep global CSS when it is genuinely reusable or behaviorally complex: generated markdown or imperative DOM, custom elements and shadow roots, masks, shared or complex pseudo-elements, animations, glass composition, runtime theme variables, safe-area calculations, scrollbar-lane preservation, Electron drag regions, and browser/vendor integration. Simple owner-local pseudo-elements may still belong in the owning module.
+- Before calling a selector dead, trace literal, dynamic, generated, imperative, test, custom-element, and shadow-root consumers. Search both the emitted class string and any class-valued field names through their final DOM sink. A helper returning a class is not proof that it is rendered, and a missed downstream property read can make a deletion unsafe.
+- Flag duplicate declarations only after comparing cascade layer, selector specificity, inheritance, runtime theme scope, media/variant scope, and the final owning element. Textually identical declarations are not necessarily behaviorally redundant.
+- When moving CSS into Tailwind, preserve selector scope and cascade ownership. A utility at the owner is preferable to a fragile global override that depends on stylesheet order.
+- Do not request moving complex global behavior into arbitrary Tailwind merely to reduce `index.css`. Do not preserve ordinary one-owner CSS merely because it already exists globally.
+
+## Themes and generated CSS
+
+- Use the project variants for theme-only declarations:
+  - dark-only declarations use `@variant dark`;
+  - light-only declarations use `@variant light`;
+  - raw `.dark` should remain only in the `dark` and `light` custom-variant definitions.
+- Preserve custom themes and runtime token bridges. Removing a variable or selector is safe only when all runtime, inspector, generated, and theme-palette consumers are accounted for.
+- Inspect emitted production CSS after unusual variants, arbitrary selectors, nested pseudo-elements, or attribute matching. Source syntax that looks valid is insufficient.
+- Flag malformed or empty emitted selectors such as empty `:is()` or `:not(:is())`, selector branches that can never match their own class attribute, and transformations that silently drop the intended rule.
+- Prefer source-level logic over clever selectors when behavior depends on consumer-provided class strings. Preserve `MenuPopup`'s current defaulting contract: a string `className` containing a `w-*`, `min-w-*`, or `max-w-*` utility after variant prefixes are stripped suppresses `min-w-32`; a string without one and a functional/non-string `className` keep the default. Arbitrary width values count as width utilities, and the consumer class must be merged last so it retains control. Do not replace this with a raw class-attribute substring selector.
+- Do not fail solely because a valid emitted selector is verbose or because a source rule uses an intentional custom property.
+
+## Scroll and virtualized lists
+
+- `ScrollArea` owns and masks its Base UI viewport. A virtualized list usually owns a native scrolling element and cannot automatically reuse viewport-specific `ScrollArea` behavior.
+- Repeated native or virtualized overflow fades should use the shared virtualized-scroll-fade contract rather than component-named mask selectors.
+- Preserve runtime top and bottom overflow state. Do not replace dynamic fades with an always-on static mask.
+- Preserve fade geometry and keep the native scrollbar lane opaque so the track and thumb stay visible and usable. A visually similar mask that fades the scrollbar is a regression.
+- Verify actual scroll behavior when changing virtualizers, masks, overflow ownership, or scrollbar selectors. Source-level class comparison is not enough.
+
+## Visual and layout preservation
+
+- Preserve responsive geometry, titlebar insets, panel and inline-preview modes, desktop Electron layout, light and dark contrast, clipping, radius, and composable shadows.
+- For meaningful visual changes, prefer available real-app evidence using the actual component and state. A mock recreation does not validate the real component. Light and dark evidence is useful when theme-sensitive styles change, but missing or inaccessible evidence alone is not a finding; report only a concrete regression supported by the diff, code, or available artifacts.
+- Do not treat a screenshot as proof of keyboard, overflow, scrollbar, responsive, or runtime-theme behavior. Pair visual evidence with source, computed-style, emitted-CSS, or interaction checks as appropriate.
+- Be alert to shared primitive color indirection. When a primitive routes icon color through a CSS variable, ensure migrated contextual icons retain their intended tone, including pressed and disabled states.
+
+## Change discipline
+
+- Review the pull request's changed scope and directly affected consumers. Do not turn a focused PR into a demand for unrelated legacy cleanup.
+- Prefer the smallest durable contract over a component-specific workaround or a broad abstraction with one consumer.
+- Preserve intentional exceptions and comments that explain browser, virtualizer, theme, or Electron constraints.
+- If a proposed cleanup cannot prove ownership or semantic equivalence, ask for evidence or leave it unchanged rather than guessing.
+- Select verification gates according to the changed behavior: typecheck or focused tests for typing and interaction contracts, production build and emitted-CSS inspection for Tailwind or selector transformations, and real-app evidence for meaningful visual behavior when available. These gates are complementary when applicable, but do not require every gate for tiny visual-only migrations or fail solely because an artifact the configured tools cannot produce is absent.
+
+## Reporting
+
+Report only concrete violations introduced by changed lines or behavior, plus pre-existing behavior that the patch directly makes relevant or worsens. Touching a large file does not make unrelated retained issues reportable. Prefer precise inline comments on the smallest relevant line range. Explain the broken behavior or ownership rule, not merely the preferred syntax, and state the smallest expected fix. A clear consistency or regression risk may fail the check. Do not fail for optional aesthetic preferences, harmless class ordering, or unrelated legacy code.
+
+This check defaults to failure. When there are no findings, stop immediately and make the entire final response exactly `All clear` on one line. Do not add a title, explanation, punctuation, Markdown, JSON, or trailing analysis, and do not continue reasoning after deciding the review is clean.
diff --git a/apps/web/src/components/AgentsPanel.tsx b/apps/web/src/components/AgentsPanel.tsx
index 4eeff67ce5f798bcace4239365af8e69bf46e3be..62044a8659d7d6d330a10d8188f00e4386c57424 100644
--- a/apps/web/src/components/AgentsPanel.tsx
+++ b/apps/web/src/components/AgentsPanel.tsx
@@ -28,6 +28,7 @@ import { useEffect, useRef, useState } from "react";
 import { cn } from "~/lib/utils";
 import { orchestrationEnvironment } from "~/state/orchestration";
 import { ScrollArea } from "~/components/ui/scroll-area";
+import { Button } from "~/components/ui/button";
 
 /**
  * In-flight states all present as Working (one steady state, per the
@@ -282,14 +283,15 @@ function WorkflowScriptView({
         <span className="truncate font-mono text-[.65rem] text-muted-foreground">
           {scriptPath.split("/").at(-1)}
         </span>
-        <button
-          type="button"
+        <Button
+          size="icon-micro"
+          variant="ghost-muted"
           onClick={onClose}
           aria-label="Close script"
-          className="ml-auto text-muted-foreground hover:text-foreground"
+          className="ml-auto"
         >
           <X aria-hidden className="size-3" />
-        </button>
+        </Button>
       </div>
       <div className="max-h-72 overflow-auto p-2">
         {result._tag === "Success" ? (
@@ -417,14 +419,14 @@ function ExpandedWorkflowSection({
         <span className="ml-auto font-mono normal-case text-muted-foreground/80">
           {settled}/{members.length} settled
         </span>
-        <button
-          type="button"
+        <Button
+          size="icon-micro"
+          variant="ghost-muted"
           onClick={onCollapse}
           aria-label="Collapse workflow"
-          className="text-muted-foreground hover:text-foreground"
         >
           <ChevronDown aria-hidden className="size-3" />
-        </button>
+        </Button>
       </div>
       <PhaseRail group={group} />
       {scriptOpen && canShowScript ? (
diff --git a/apps/web/src/components/BranchToolbarBranchSelector.tsx b/apps/web/src/components/BranchToolbarBranchSelector.tsx
index 05ed533acbc2e0013f1bac9968ce44b5d6e888b1..b3c1c08eb7301f902e695f476581adadf46081f0 100644
--- a/apps/web/src/components/BranchToolbarBranchSelector.tsx
+++ b/apps/web/src/components/BranchToolbarBranchSelector.tsx
@@ -51,6 +51,7 @@ import {
 } from "./ThreadStatusIndicators";
 import { Button } from "./ui/button";
 import { Switch } from "./ui/switch";
+import { getVirtualizedScrollFadeClassName } from "./ui/scroll-area";
 import {
   Combobox,
   ComboboxEmpty,
@@ -814,9 +815,11 @@ export function BranchToolbarBranchSelector({
                   maybeFetchNextBranchPage();
                 }}
                 className={cn(
-                  "scrollbar-gutter-stable overflow-x-hidden overscroll-y-contain ps-1 pe-0 pt-2 pb-1 [--fade-size:1.5rem]",
-                  showTopBranchScrollFade && "mask-t-from-[calc(100%-var(--fade-size))]",
-                  showBottomBranchScrollFade && "mask-b-from-[calc(100%-var(--fade-size))]",
+                  "scrollbar-gutter-stable overflow-x-hidden overscroll-y-contain ps-1 pe-0 pt-2 pb-1",
+                  getVirtualizedScrollFadeClassName({
+                    top: showTopBranchScrollFade,
+                    bottom: showBottomBranchScrollFade,
+                  }),
                 )}
                 style={{ maxHeight: "14rem" }}
               />
diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx
index e9390ed0a8aa7bf436acf7a8c267180137359ed5..53b043f3a8ff32f551bc9701ff8bc0f6c277c810 100644
--- a/apps/web/src/components/ChatMarkdown.tsx
+++ b/apps/web/src/components/ChatMarkdown.tsx
@@ -449,7 +449,7 @@ function MarkdownTable({ children, ...props }: React.ComponentProps<"table">) {
           {children}
         </table>
       </ScrollArea>
-      <div className="chat-markdown-table-footer select-none">
+      <div className="mt-0.5 flex items-center justify-between select-none">
         <Tooltip>
           <TooltipTrigger
             render={
@@ -642,12 +642,12 @@ function MarkdownCodeBlock({
 
   return (
     <div
-      className="chat-markdown-codeblock border border-border/70 bg-secondary leading-snug dark:border-transparent dark:bg-input/32"
+      className="chat-markdown-codeblock my-[0.65rem] overflow-hidden rounded-[var(--radius)] border border-border/70 bg-secondary leading-snug dark:border-transparent dark:bg-input/32"
       data-language={language}
       data-wrap={wrapped ? "true" : "false"}
     >
-      <div className="chat-markdown-codeblock-header select-none">
-        <span className="chat-markdown-codeblock-title">
+      <div className="chat-markdown-codeblock-header flex items-center justify-between gap-2 pt-1.5 pr-1.5 pb-0 pl-3 select-none">
+        <span className="inline-flex min-w-0 items-center gap-[0.4rem] [font-family:var(--font-mono,ui-monospace,SFMono-Regular,monospace)] [font-size:0.6875rem]">
           <MarkdownCodeBlockTitleContent
             fenceTitle={fenceTitle}
             language={language}
@@ -897,7 +897,10 @@ const failedFaviconHosts = new Set<string>();
 const MarkdownLinkFavicon = memo(function MarkdownLinkFavicon({ host }: { host: string }) {
   const [failedHost, setFailedHost] = useState<string | null>(null);
   return (
-    <span className="chat-markdown-link-favicon" aria-hidden>
+    <span
+      className="ms-[0.25em] me-[0.2em] inline-flex size-[14px] [vertical-align:-0.125em]"
+      aria-hidden
+    >
       {failedHost === host || failedFaviconHosts.has(host) ? (
         <GlobeIcon className={MARKDOWN_LINK_FAVICON_CLASS_NAME} />
       ) : (
@@ -1044,7 +1047,7 @@ function MarkdownExternalLinkContent({
     const leadingLength = leadingExternalLinkTextLength(plainText);
     return (
       <>
-        <span className="chat-markdown-link-leading">
+        <span className="whitespace-nowrap">
           <MarkdownLinkFavicon host={host} />
           {plainText.slice(0, leadingLength)}
         </span>
@@ -1060,7 +1063,7 @@ function MarkdownExternalLinkContent({
     const leadingLength = leadingExternalLinkTextLength(firstChild);
     return (
       <>
-        <span className="chat-markdown-link-leading">
+        <span className="whitespace-nowrap">
           <MarkdownLinkFavicon host={host} />
           {firstChild.slice(0, leadingLength)}
         </span>
@@ -1072,7 +1075,7 @@ function MarkdownExternalLinkContent({
 
   return (
     <>
-      <span className="chat-markdown-link-leading">
+      <span className="whitespace-nowrap">
         <MarkdownLinkFavicon host={host} />
         {firstChild}
       </span>
@@ -1289,7 +1292,7 @@ const MarkdownFileLink = memo(function MarkdownFileLink({
         side="top"
         className="max-w-[min(40rem,calc(100vw-2rem))] font-mono text-[11px] leading-tight"
       >
-        <div className="markdown-file-link-tooltip-scroll overflow-x-auto whitespace-nowrap">
+        <div className="overflow-x-auto whitespace-nowrap [scrollbar-color:color-mix(in_srgb,var(--border)_78%,transparent)_transparent] [scrollbar-width:thin] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[color-mix(in_srgb,var(--border)_78%,transparent)] [&::-webkit-scrollbar-track]:bg-transparent">
           {displayPath}
         </div>
       </TooltipPopup>
@@ -1699,7 +1702,7 @@ function ChatMarkdown({
   return (
     <div
       className={cn(
-        "chat-markdown w-full min-w-0 text-sm leading-relaxed text-foreground/80",
+        "chat-markdown w-full min-w-0 text-sm leading-relaxed text-foreground/80 [overflow-wrap:anywhere] [word-break:break-word]",
         className,
       )}
       onCopy={handleCopy}
diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 3da816618a187e00538812e8472b99afb02dbbb8..6eab33aec1c91be92458518361ee5606ff50c6fd 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -6023,8 +6023,9 @@ function ChatViewContent(props: ChatViewProps) {
         // One inset in both states: the controls move between containers when
         // the right panel opens, and a different right offset made them jump
         // sideways on every toggle.
-        "workspace-titlebar-controls z-50 mr-px gap-1 [-webkit-app-region:no-drag]",
+        "absolute top-[var(--workspace-controls-top)] right-[var(--workspace-controls-right)] z-50 mr-px flex h-[var(--workspace-topbar-height)] items-center gap-1 [-webkit-app-region:no-drag]",
       )}
+      data-workspace-titlebar-controls
     >
       {rightPanelOpen && !shouldUseRightPanelSheet ? (
         <RightPanelMaximizeControl
@@ -6165,12 +6166,12 @@ function ChatViewContent(props: ChatViewProps) {
             "bg-background transition-[padding-left] duration-200 ease-linear motion-reduce:transition-none",
             isElectron
               ? cn(
-                  "workspace-topbar drag-region relative px-3 sm:px-5",
+                  "drag-region relative flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center px-3 sm:px-5",
                   reserveTitleBarControlInset &&
                     !inlineRightPanelOwnsTitleBar &&
                     "wco:pr-[var(--workspace-native-controls-inset)]",
                 )
-              : "workspace-topbar pl-[calc(env(safe-area-inset-left)+0.75rem)] pr-[calc(env(safe-area-inset-right)+0.75rem)] sm:pl-[calc(env(safe-area-inset-left)+1.25rem)] sm:pr-[calc(env(safe-area-inset-right)+1.25rem)]",
+              : "flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center pl-[calc(env(safe-area-inset-left)+0.75rem)] pr-[calc(env(safe-area-inset-right)+0.75rem)] sm:pl-[calc(env(safe-area-inset-left)+1.25rem)] sm:pr-[calc(env(safe-area-inset-right)+1.25rem)]",
             COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,
           )}
         >
@@ -6273,16 +6274,17 @@ function ChatViewContent(props: ChatViewProps) {
                   className="pointer-events-none absolute left-1/2 z-30 flex -translate-x-1/2 justify-center py-1.5"
                   style={{ bottom: composerOverlayHeight + 4 }}
                 >
-                  <button
-                    type="button"
+                  <Button
                     aria-label="Scroll to end"
                     title="Scroll to end"
                     onClick={() => scrollToEnd(true)}
-                    className="chat-composer-glass pointer-events-auto flex items-center gap-1.5 rounded-full border border-border/60 px-3 py-1 text-muted-foreground text-xs shadow-sm transition-colors hover:border-border hover:text-foreground hover:cursor-pointer"
+                    className="pointer-events-auto gap-1.5 rounded-full px-3 text-muted-foreground hover:text-foreground"
+                    size="xs"
+                    variant="glass"
                   >
                     <ChevronDownIcon className="size-3.5" />
                     Scroll to end
-                  </button>
+                  </Button>
                 </div>
               )}
             </div>
@@ -6299,7 +6301,7 @@ function ChatViewContent(props: ChatViewProps) {
             >
               <div
                 ref={attachDraftHeroTransitionGroupRef}
-                className="chat-composer-horizontal-inset w-full"
+                className="w-full ps-[calc(env(safe-area-inset-left)+0.75rem)] pe-[calc(env(safe-area-inset-right)+0.75rem)] sm:ps-[calc(env(safe-area-inset-left)+1.25rem)] sm:pe-[calc(env(safe-area-inset-right)+1.25rem)]"
               >
                 <div className="pointer-events-auto relative z-10">
                   {isDraftHeroState ? (
diff --git a/apps/web/src/components/ComposerPromptEditor.tsx b/apps/web/src/components/ComposerPromptEditor.tsx
index 0489e8c79cdf5a929733936659803fd92ef0887a..f6dfef2489b47487132fdddb7511f460b1478e57 100644
--- a/apps/web/src/components/ComposerPromptEditor.tsx
+++ b/apps/web/src/components/ComposerPromptEditor.tsx
@@ -71,6 +71,7 @@ import {
 import { cn, isMacPlatform } from "~/lib/utils";
 import { basenameOfPath } from "~/pierre-icons";
 import {
+  COMPOSER_INLINE_CHIP_DECORATOR_CLASS_NAME,
   COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
   COMPOSER_INLINE_SKILL_CHIP_CLASS_NAME,
   COMPOSER_INLINE_SKILL_CHIP_LABEL_CLASS_NAME,
@@ -188,7 +189,7 @@ class ComposerMentionNode extends DecoratorNode<React.ReactElement> {
 
   override createDOM(): HTMLElement {
     const dom = document.createElement("span");
-    dom.className = "composer-inline-chip relative inline-flex align-[-0.125em] leading-none";
+    dom.className = COMPOSER_INLINE_CHIP_DECORATOR_CLASS_NAME;
     return dom;
   }
 
@@ -326,7 +327,7 @@ class ComposerSkillNode extends DecoratorNode<React.ReactElement> {
 
   override createDOM(): HTMLElement {
     const dom = document.createElement("span");
-    dom.className = "composer-inline-chip relative inline-flex align-[-0.125em] leading-none";
+    dom.className = COMPOSER_INLINE_CHIP_DECORATOR_CLASS_NAME;
     return dom;
   }
 
@@ -397,7 +398,7 @@ class ComposerTerminalContextNode extends DecoratorNode<React.ReactElement> {
 
   override createDOM(): HTMLElement {
     const dom = document.createElement("span");
-    dom.className = "composer-inline-chip relative inline-flex align-[-0.125em] leading-none";
+    dom.className = COMPOSER_INLINE_CHIP_DECORATOR_CLASS_NAME;
     return dom;
   }
 
@@ -1747,13 +1748,12 @@ function ComposerPromptEditorInner({
 
   return (
     <ComposerTerminalContextActionsContext value={terminalContextActions}>
-      <div className="composer-editor-surface relative">
+      <div className="relative [font-family:var(--font-composer,var(--font-sans))] [font-size:var(--font-size-prompt,0.875rem)] [@media(max-width:39.999rem)_and_(pointer:coarse)]:[font-size:max(var(--font-size-prompt,1rem),16px)]">
         <PlainTextPlugin
           contentEditable={
             <ContentEditable
               className={cn(
-                // The size comes from .composer-editor-surface so Settings -> Appearance
-                // can drive it; keep everything else here.
+                // The wrapper owns the appearance preference; keep everything else here.
                 "block max-h-50 min-h-17.5 w-full overflow-y-auto whitespace-pre-wrap wrap-break-word bg-transparent leading-relaxed text-foreground focus:outline-none",
                 className,
               )}
diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx
index 385d67b6b70165858d19604e37889b1069016bbe..b929d05a719b3777050d5d8bd211fae2fdffbf3f 100644
--- a/apps/web/src/components/DiffPanel.tsx
+++ b/apps/web/src/components/DiffPanel.tsx
@@ -825,7 +825,7 @@ export default function DiffPanel({
         </div>
       ) : (
         <>
-          <div className="diff-panel-viewport flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+          <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-background">
             {isSelectedPatchTruncated && (
               <p className="shrink-0 border-b border-border/70 bg-muted/40 px-3 py-1.5 text-[11px] text-muted-foreground">
                 This diff was truncated because it exceeded the preview limit. The changes shown are
@@ -907,10 +907,11 @@ export default function DiffPanel({
                       <Tooltip>
                         <TooltipTrigger
                           render={
-                            <button
-                              type="button"
+                            <Button
+                              size="icon-micro"
+                              variant="ghost"
                               className={cn(
-                                "-ms-0.5 inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 transition-colors hover:bg-foreground/10 focus-visible:outline-hidden",
+                                "-ms-0.5 [--control-icon-color:currentColor] bg-transparent hover:bg-foreground/10",
                                 getDiffCollapseIconClassName(fileDiff),
                               )}
                               aria-label={collapsed ? `Expand ${filePath}` : `Collapse ${filePath}`}
diff --git a/apps/web/src/components/DiffPanelShell.tsx b/apps/web/src/components/DiffPanelShell.tsx
index c13af4d9560cf7df2a553bcc4b6bc7b7bc9a785a..a9b7cf542e028d9776524563cab5e89d5e658c98 100644
--- a/apps/web/src/components/DiffPanelShell.tsx
+++ b/apps/web/src/components/DiffPanelShell.tsx
@@ -14,7 +14,7 @@ function getDiffPanelHeaderRowClassName(mode: DiffPanelMode) {
     mode === "embedded" ? "px-2" : "px-4",
     shouldUseDragRegion
       ? "drag-region h-[52px] border-b border-border wco:h-[env(titlebar-area-height)] wco:pr-[calc(100vw-env(titlebar-area-width)-env(titlebar-area-x)+1em)]"
-      : "surface-subheader",
+      : "flex h-10 min-h-10 shrink-0 items-center border-b border-border/60 bg-background in-data-[preview-panel-mode=inline]:mb-3 in-data-[preview-panel-mode=inline]:h-7 in-data-[preview-panel-mode=inline]:min-h-7 in-data-[preview-panel-mode=inline]:border-b-transparent",
   );
 }
 
diff --git a/apps/web/src/components/LegacySidebar.tsx b/apps/web/src/components/LegacySidebar.tsx
index e7436c0a75aafed40b10ab091d96a399d85eff93..f40dc211c621a8638363c0d3649f88a4ed370782 100644
--- a/apps/web/src/components/LegacySidebar.tsx
+++ b/apps/web/src/components/LegacySidebar.tsx
@@ -2925,11 +2925,12 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
             <Tooltip>
               <TooltipTrigger
                 render={
-                  <button
-                    type="button"
+                  <Button
+                    size="icon-xs"
+                    variant="ghost-muted"
                     aria-label="Add project"
                     data-testid="sidebar-add-project-trigger"
-                    className="inline-flex h-6 min-w-6 cursor-pointer items-center justify-center rounded-md px-[calc(--spacing(1)-1px)] text-icon-muted transition-colors hover:bg-accent hover:text-foreground"
+                    className="size-6 [--control-icon-color:currentColor] text-icon-muted"
                     onClick={openAddProject}
                   />
                 }
diff --git a/apps/web/src/components/NoActiveThreadState.tsx b/apps/web/src/components/NoActiveThreadState.tsx
index 68a5855c1a28759a25d4a3053f91699a785e44da..82dddd8f41e0e45b2390031b6c3661f959f9f7e7 100644
--- a/apps/web/src/components/NoActiveThreadState.tsx
+++ b/apps/web/src/components/NoActiveThreadState.tsx
@@ -11,7 +11,9 @@ export function NoActiveThreadState() {
         <header
           className={cn(
             "border-b border-border px-3 transition-[padding-left] duration-200 ease-linear motion-reduce:transition-none sm:px-5",
-            isElectron ? "workspace-topbar drag-region" : "workspace-topbar",
+            isElectron
+              ? "drag-region flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center"
+              : "flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center",
             COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,
           )}
         >
diff --git a/apps/web/src/components/RightPanelTabs.tsx b/apps/web/src/components/RightPanelTabs.tsx
index df65aa60d520af6dfcd1bedca92dca1b880a9e0b..b91e81bc7a0b7bc6cde65f4247663430a7713a07 100644
--- a/apps/web/src/components/RightPanelTabs.tsx
+++ b/apps/web/src/components/RightPanelTabs.tsx
@@ -26,6 +26,7 @@ import type { DesktopPreviewOverlay } from "~/previewStateStore";
 import type { RightPanelSurface } from "~/rightPanelStore";
 import { cn } from "~/lib/utils";
 import { readLocalApi } from "~/localApi";
+import { Button } from "~/components/ui/button";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "~/components/ui/tooltip";
 import { Kbd } from "~/components/ui/kbd";
 import { Menu, MenuItem, MenuPopup, MenuTrigger } from "~/components/ui/menu";
@@ -603,7 +604,7 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
     >
       <div
         className={cn(
-          "workspace-topbar gap-1 pl-2",
+          "flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center gap-1 pl-2",
           // The sheet overlays from the viewport top, so its tab bar keeps
           // the titlebar's height: a compact row re-centers the layout
           // controls a few pixels higher and the cluster jumps on open.
@@ -682,8 +683,14 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
             {props.surfaces.length > 0 ? (
               <Menu>
                 <MenuTrigger
-                  className="cursor-pointer relative inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
-                  aria-label="Add panel surface"
+                  render={
+                    <Button
+                      aria-label="Add panel surface"
+                      className="size-6 shrink-0 text-muted-foreground hover:text-foreground"
+                      size="icon-xs"
+                      variant="ghost"
+                    />
+                  }
                 >
                   <Plus className="size-3.5" />
                 </MenuTrigger>
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index dc8be07dcad1b4a1713030c84f72eeb7f43d8f79..2f0c5a22140559c6883c9f7c15a4e58a1f3b0aff 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -3298,9 +3298,9 @@ export default function Sidebar() {
                 {isSearchingThreads ? (
                   <Button
                     type="button"
-                    size="icon-xs"
+                    size="icon-micro"
                     variant="ghost"
-                    className="size-5 shrink-0 rounded-sm text-sidebar-muted-foreground hover:bg-sidebar-control-surface hover:text-sidebar-foreground"
+                    className="shrink-0 text-sidebar-muted-foreground hover:bg-sidebar-control-surface hover:text-sidebar-foreground"
                     aria-label="Clear thread search"
                     onClick={() => {
                       clearThreadSearch();
@@ -3412,18 +3412,19 @@ export default function Sidebar() {
                               className="size-4 shrink-0"
                             />
                             <span className="min-w-0 truncate text-sm">{project.displayName}</span>
-                            <button
-                              type="button"
+                            <Button
+                              size="icon-xs"
+                              variant="ghost-muted"
                               aria-label={`Project settings for ${project.displayName}`}
                               title={`Project settings for ${project.displayName}`}
-                              className="ml-auto inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-icon-muted outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+                              className="ml-auto size-6 [--control-icon-color:currentColor] text-icon-muted focus-visible:bg-accent focus-visible:text-foreground"
                               onPointerDown={(event) => event.stopPropagation()}
                               onClick={(event) => {
                                 void handleProjectSettings(event, project);
                               }}
                             >
                               <SettingsIcon className="size-3.5" />
-                            </button>
+                            </Button>
                           </MenuRadioItem>
                         );
                       })}
diff --git a/apps/web/src/components/ThreadTerminalDrawer.tsx b/apps/web/src/components/ThreadTerminalDrawer.tsx
index 87f0ed4ae7068b255085237dc29417c32dd12821..1266e5ed7e949ea790cc8846b96bb063b4537daa 100644
--- a/apps/web/src/components/ThreadTerminalDrawer.tsx
+++ b/apps/web/src/components/ThreadTerminalDrawer.tsx
@@ -31,6 +31,7 @@ import {
   useState,
 } from "react";
 import { Popover, PopoverPopup, PopoverTrigger } from "~/components/ui/popover";
+import { Button } from "~/components/ui/button";
 import { writeTextToClipboard } from "~/hooks/useCopyToClipboard";
 import { cn } from "~/lib/utils";
 import { type TerminalContextSelection } from "~/lib/terminalContext";
@@ -1273,13 +1274,9 @@ export default function ThreadTerminalDrawer({
         ) : null}
         <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-3 px-4 py-6 text-center text-sm text-muted-foreground">
           <p>No terminal sessions for this thread yet.</p>
-          <button
-            type="button"
-            className="rounded-md border border-border/80 bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-accent"
-            onClick={onNewTerminalAction}
-          >
+          <Button size="xs" variant="outline" onClick={onNewTerminalAction}>
             {newTerminalActionLabel}
-          </button>
+          </Button>
         </div>
       </aside>
     );
diff --git a/apps/web/src/components/chat/ComposerCommandMenu.tsx b/apps/web/src/components/chat/ComposerCommandMenu.tsx
index 3ed2a9432e48ad9c72876266e8ed5225bc1ba239..4f32211c10cc0d01ca782767acc32d715eae2868 100644
--- a/apps/web/src/components/chat/ComposerCommandMenu.tsx
+++ b/apps/web/src/components/chat/ComposerCommandMenu.tsx
@@ -141,7 +141,7 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {
     >
       <div
         ref={listRef}
-        className="dropdown-glass relative w-full overflow-hidden rounded-[20px] **:data-[slot=scroll-area-scrollbar]:data-[orientation=vertical]:my-4"
+        className="dropdown-glass relative w-full overflow-hidden rounded-[20px] shadow-[0_16px_40px_-18px_rgb(0_0_0/55%)] **:data-[slot=scroll-area-scrollbar]:data-[orientation=vertical]:my-4 dark:shadow-[0_18px_44px_-18px_rgb(0_0_0/80%)]"
       >
         {props.items.length > 0 ? (
           <CommandList className="max-h-72">
diff --git a/apps/web/src/components/chat/ComposerPreviewAnnotationCards.test.tsx b/apps/web/src/components/chat/ComposerPreviewAnnotationCards.test.tsx
index 5bb28054e7d7ba3d119786dd82522273cbdeb262..46af299073c56cc88964cc017c8079a8567fca39 100644
--- a/apps/web/src/components/chat/ComposerPreviewAnnotationCards.test.tsx
+++ b/apps/web/src/components/chat/ComposerPreviewAnnotationCards.test.tsx
@@ -43,4 +43,18 @@ describe("ComposerPreviewAnnotationCards", () => {
     expect(markup).not.toContain("localhost:3000");
     expect(markup).not.toContain("Preview annotation");
   });
+
+  it("uses the shared button contract for removal", () => {
+    const markup = renderToStaticMarkup(
+      <ComposerPreviewAnnotationCards
+        annotations={[annotation]}
+        images={[]}
+        onRemove={vi.fn()}
+        onExpandImage={vi.fn()}
+      />,
+    );
+
+    expect(markup).toContain('aria-label="Remove preview annotation"');
+    expect(markup).toContain('data-slot="button"');
+  });
 });
diff --git a/apps/web/src/components/chat/ComposerPreviewAnnotationCards.tsx b/apps/web/src/components/chat/ComposerPreviewAnnotationCards.tsx
index 5e9e43dcf21e40502964a9ff2293683d1c78d142..19f6a5ca308e9de512c9498c38e067b3ad37af98 100644
--- a/apps/web/src/components/chat/ComposerPreviewAnnotationCards.tsx
+++ b/apps/web/src/components/chat/ComposerPreviewAnnotationCards.tsx
@@ -5,6 +5,7 @@ import type { ReactNode } from "react";
 import type { ComposerImageAttachment } from "~/composerDraftStore";
 import { formatElementContextLabel, normalizeElementContextSelection } from "~/lib/elementContext";
 import { cn } from "~/lib/utils";
+import { Button } from "../ui/button";
 
 interface ComposerPreviewAnnotationCardsProps {
   annotations: ReadonlyArray<PreviewAnnotationPayload>;
@@ -128,14 +129,15 @@ export function ComposerPreviewAnnotationCards({
                 </div>
               </div>
             </div>
-            <button
-              type="button"
+            <Button
+              size="icon-micro"
+              variant="ghost-muted"
               aria-label="Remove preview annotation"
-              className="absolute right-1.5 top-1.5 grid size-5 place-items-center rounded text-icon-muted transition hover:bg-muted hover:text-foreground"
+              className="absolute right-1.5 top-1.5 [--control-icon-color:currentColor] rounded text-icon-muted hover:bg-muted"
               onClick={() => onRemove(annotation.id)}
             >
               <X className="size-3" />
-            </button>
+            </Button>
           </section>
         );
       })}
diff --git a/apps/web/src/components/chat/ComposerStashBadge.tsx b/apps/web/src/components/chat/ComposerStashBadge.tsx
index 79ed301a5d56017df8a2625c0650aeeb6d6b8305..a2599ebc9f9f196161d52b964a684bb29fbffeee 100644
--- a/apps/web/src/components/chat/ComposerStashBadge.tsx
+++ b/apps/web/src/components/chat/ComposerStashBadge.tsx
@@ -46,7 +46,7 @@ export const ComposerStashBadge = memo(function ComposerStashBadge(props: {
         className={cn(
           "rounded-full px-1.5 text-[10px] font-medium tabular-nums",
           props.pulsing
-            ? "prompt-stash-count-enter bg-primary text-primary-foreground"
+            ? "animate-[prompt-stash-count-enter_180ms_ease-out_both] bg-primary text-primary-foreground motion-reduce:animate-none"
             : "bg-muted text-muted-foreground",
         )}
       >
diff --git a/apps/web/src/components/chat/ComposerStashMenu.tsx b/apps/web/src/components/chat/ComposerStashMenu.tsx
index 9e9238515332b5a35e371cac50a32dc482374fe2..fc8be327da182c599800f6334bfe78e6e36589c2 100644
--- a/apps/web/src/components/chat/ComposerStashMenu.tsx
+++ b/apps/web/src/components/chat/ComposerStashMenu.tsx
@@ -91,7 +91,7 @@ export const ComposerStashMenu = memo(function ComposerStashMenu(props: {
 
   return (
     <Command autoHighlight={false} mode="none">
-      <div className="dropdown-glass relative w-full overflow-hidden rounded-[20px]">
+      <div className="dropdown-glass relative w-full overflow-hidden rounded-[20px] shadow-[0_16px_40px_-18px_rgb(0_0_0/55%)] dark:shadow-[0_18px_44px_-18px_rgb(0_0_0/80%)]">
         <CommandList className="max-h-72">
           <CommandGroup>
             <CommandGroupLabel className="flex items-center gap-1.5 px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-[0.08em] text-secondary-label">
diff --git a/apps/web/src/components/chat/ContextWindowMeter.tsx b/apps/web/src/components/chat/ContextWindowMeter.tsx
index 752ec4013768d7ffb51b6982cf4258be51ada616..f377c893ae2c72567a13af4803eafd0b5ac46573 100644
--- a/apps/web/src/components/chat/ContextWindowMeter.tsx
+++ b/apps/web/src/components/chat/ContextWindowMeter.tsx
@@ -1,4 +1,4 @@
-import { cn } from "~/lib/utils";
+import { Button } from "../ui/button";
 import { type ContextWindowSnapshot, formatContextWindowTokens } from "~/lib/contextWindow";
 import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
 
@@ -36,13 +36,10 @@ export function ContextWindowMeter(props: {
         delay={150}
         closeDelay={0}
         render={
-          <button
-            type="button"
-            className={cn(
-              "inline-flex size-7 cursor-pointer items-center justify-center rounded-full border border-transparent text-muted-foreground outline-none transition-colors",
-              "hover:bg-accent data-[pressed]:bg-accent",
-              "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
-            )}
+          <Button
+            size="icon-sm"
+            variant="ghost-muted"
+            className="size-7 rounded-full hover:text-muted-foreground data-pressed:text-muted-foreground"
             aria-label={
               usage.maxTokens !== null && usedPercentage
                 ? `Context window ${usedPercentage} used`
@@ -77,7 +74,7 @@ export function ContextWindowMeter(props: {
                 />
               </svg>
             </span>
-          </button>
+          </Button>
         }
       />
       <PopoverPopup
diff --git a/apps/web/src/components/chat/MessagesTimeline.test.tsx b/apps/web/src/components/chat/MessagesTimeline.test.tsx
index f22130906ebf03a985bf072dc9de0b4dd95301e9..194edc0bd5bb28b27ce98642964efca8f883c1ce 100644
--- a/apps/web/src/components/chat/MessagesTimeline.test.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.test.tsx
@@ -237,9 +237,9 @@ describe("MessagesTimeline", () => {
     );
 
     expect(compactMarkup).toContain('class="h-3 sm:h-4"');
-    expect(compactMarkup).not.toContain("chat-timeline-scroll-fade");
+    expect(compactMarkup).not.toContain("topbar-scroll-fade");
     expect(fadedMarkup).toContain('class="h-10 sm:h-12"');
-    expect(fadedMarkup).toContain("chat-timeline-scroll-fade");
+    expect(fadedMarkup).toContain("topbar-scroll-fade");
   });
 
   it("keeps assistant changed-files headers sticky below the thread header", () => {
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 9cd1c78aa4d5fe9b7304606a6bd1256347f17421..e190f47569b2afd5b817310af012cc5a11143fb1 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -591,7 +591,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
             onScroll={handleScroll}
             className={cn(
               "scrollbar-gutter-both h-full min-h-0 overflow-x-hidden overscroll-y-contain px-3 [overflow-anchor:none] sm:px-5",
-              topFadeEnabled && "chat-timeline-scroll-fade",
+              topFadeEnabled && "topbar-scroll-fade",
             )}
             ListHeaderComponent={
               loadEarlier !== null ? (
diff --git a/apps/web/src/components/chat/ModelPickerContent.tsx b/apps/web/src/components/chat/ModelPickerContent.tsx
index 7c86ec6301413a2663459a1b29897e2a10e9c484..7ffb2bf077da859d309757d33026a3b96808b393 100644
--- a/apps/web/src/components/chat/ModelPickerContent.tsx
+++ b/apps/web/src/components/chat/ModelPickerContent.tsx
@@ -33,6 +33,7 @@ import {
 } from "../../keybindings";
 import { useClientSettings, useUpdateClientSettings } from "~/hooks/useSettings";
 import { cn } from "~/lib/utils";
+import { getVirtualizedScrollFadeClassName } from "../ui/scroll-area";
 import { TooltipProvider } from "../ui/tooltip";
 import {
   isProviderInstancePickerReady,
@@ -598,7 +599,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
   return (
     <TooltipProvider delay={0}>
       <div
-        className="dropdown-glass model-picker-surface relative flex h-screen max-h-86.5 w-screen max-w-90 flex-row overflow-hidden rounded-lg text-popover-foreground [clip-path:inset(0_round_var(--radius-lg))]"
+        className="dropdown-glass relative flex h-screen max-h-86.5 w-screen max-w-90 flex-row overflow-hidden rounded-lg text-popover-foreground shadow-[0_16px_40px_-18px_rgb(0_0_0/55%)] [clip-path:inset(0_round_var(--radius-lg))] dark:shadow-[0_18px_44px_-18px_rgb(0_0_0/80%)]"
         data-model-picker-content="true"
       >
         {/* Sidebar */}
@@ -781,9 +782,11 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
                   onLayout={updateModelListScrollFades}
                   onScroll={updateModelListScrollFades}
                   className={cn(
-                    "model-picker-list scrollbar-gutter-stable h-full overflow-x-hidden overscroll-y-contain py-1.5 [--fade-size:1.5rem]",
-                    showTopScrollFade && "model-picker-list-scroll-fade-top",
-                    showBottomScrollFade && "model-picker-list-scroll-fade-bottom",
+                    "scrollbar-gutter-stable h-full overflow-x-hidden overscroll-y-contain py-1.5 [&::-webkit-scrollbar-track]:my-2",
+                    getVirtualizedScrollFadeClassName({
+                      top: showTopScrollFade,
+                      bottom: showBottomScrollFade,
+                    }),
                   )}
                 />
               </ComboboxListVirtualized>
diff --git a/apps/web/src/components/chat/ProviderStatusBanner.tsx b/apps/web/src/components/chat/ProviderStatusBanner.tsx
index f82c17b13ddde00e989abc3efc972eeb11b8c9f9..1c7571b962f999ad07297fb429dbde42480d2b17 100644
--- a/apps/web/src/components/chat/ProviderStatusBanner.tsx
+++ b/apps/web/src/components/chat/ProviderStatusBanner.tsx
@@ -2,6 +2,7 @@ import { type ServerProvider } from "@t3tools/contracts";
 import { memo } from "react";
 import { InfoIcon, XIcon } from "lucide-react";
 import { cn } from "~/lib/utils";
+import { Button } from "../ui/button";
 import { formatProviderDriverKindLabel } from "../../providerModels";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 
@@ -66,14 +67,15 @@ export const ProviderStatusBanner = memo(function ProviderStatusBanner({
             </TooltipPopup>
           </Tooltip>
         </div>
-        <button
-          type="button"
+        <Button
           aria-label={`Dismiss ${providerName} provider ${status.status}`}
-          className="absolute top-2 right-2 inline-flex size-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-foreground/8 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+          className="absolute top-2 right-2 size-6 text-muted-foreground hover:text-foreground"
           onClick={onDismiss}
+          size="icon-xs"
+          variant="ghost"
         >
           <XIcon aria-hidden className="size-3.5" />
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/apps/web/src/components/composerInlineChip.ts b/apps/web/src/components/composerInlineChip.ts
index c17b3ddab3c04dac4eba8a37271dc9fcfaac10d1..3f0e8ca1ac007420ff76542922425f99e000efcd 100644
--- a/apps/web/src/components/composerInlineChip.ts
+++ b/apps/web/src/components/composerInlineChip.ts
@@ -8,6 +8,9 @@ export const CHAT_INLINE_CHIP_CLASS_NAME = `${INLINE_CHIP_CLASS_NAME} text-[12px
 
 export const COMPOSER_INLINE_CHIP_CLASS_NAME = `${INLINE_CHIP_CLASS_NAME} text-[0.86em] select-none`;
 
+export const COMPOSER_INLINE_CHIP_DECORATOR_CLASS_NAME =
+  "relative inline-flex align-[-0.125em] leading-none data-[composer-chip-selected]:after:pointer-events-none data-[composer-chip-selected]:after:absolute data-[composer-chip-selected]:after:inset-0 data-[composer-chip-selected]:after:rounded-[6px] data-[composer-chip-selected]:after:bg-[Highlight] data-[composer-chip-selected]:after:opacity-30 data-[composer-chip-selected]:after:content-['']";
+
 export const COMPOSER_INLINE_CHIP_ICON_CLASS_NAME = "size-[1.17em] shrink-0 opacity-85";
 
 export const CHAT_INLINE_CHIP_LABEL_CLASS_NAME = "truncate leading-tight";
diff --git a/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx b/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx
index dbdd10d194f684e7a0c39c6b4e871db2f1946914..f0cd49abc41d9dbbfd5f736a3d3c5d52cf4f570a 100644
--- a/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx
+++ b/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx
@@ -35,7 +35,9 @@ describe("StyledDiffCodeView", () => {
       />,
     );
 
-    expect(testState.codeViewClassName).toBe("diff-render-surface outline-none min-h-0");
+    expect(testState.codeViewClassName).toBe(
+      "diff-render-surface [--code-background:var(--background)] outline-none min-h-0",
+    );
     expect(testState.codeViewOptions).toMatchObject({
       theme: "pierre-dark",
       stickyHeaders: true,
diff --git a/apps/web/src/components/diffs/StyledDiffCodeView.tsx b/apps/web/src/components/diffs/StyledDiffCodeView.tsx
index 7dbd5358a0ff8703a30880fb1ca77b8dee4e8a89..14939de098200f3e26b0e85000d3400adab48327 100644
--- a/apps/web/src/components/diffs/StyledDiffCodeView.tsx
+++ b/apps/web/src/components/diffs/StyledDiffCodeView.tsx
@@ -292,8 +292,8 @@ export function StyledDiffCodeView<LAnnotation = undefined>({
       // outside the panel clipping boundary; actual controls inside retain their own indicators.
       className={
         className
-          ? `diff-render-surface outline-none ${className}`
-          : "diff-render-surface outline-none"
+          ? `diff-render-surface [--code-background:var(--background)] outline-none ${className}`
+          : "diff-render-surface [--code-background:var(--background)] outline-none"
       }
       options={{
         ...options,
diff --git a/apps/web/src/components/files/FileBrowserPanel.tsx b/apps/web/src/components/files/FileBrowserPanel.tsx
index ff658693a70c2e0bc45a3ff43e714b50b5042738..e3280c99caa3b680f46418628a398e70eadf7697 100644
--- a/apps/web/src/components/files/FileBrowserPanel.tsx
+++ b/apps/web/src/components/files/FileBrowserPanel.tsx
@@ -78,7 +78,7 @@ function FileSearchField(props: {
   value: string;
 }) {
   return (
-    <InputGroup variant="ghost" className="h-7 min-w-0 flex-1 rounded-md">
+    <InputGroup variant="ghost" className="h-7 min-w-0 flex-1">
       <InputGroupInput
         type="search"
         name={props.name}
@@ -350,7 +350,10 @@ export default function FileBrowserPanel({
       className="flex min-h-0 flex-1 flex-col bg-background"
       data-file-browser-panel={`${environmentId}:${cwd}`}
     >
-      <div className="surface-subheader gap-1 px-2" data-surface-subheader>
+      <div
+        className="flex h-10 min-h-10 shrink-0 items-center gap-1 border-b border-border/60 bg-background px-2 in-data-[preview-panel-mode=inline]:mb-3 in-data-[preview-panel-mode=inline]:h-7 in-data-[preview-panel-mode=inline]:min-h-7 in-data-[preview-panel-mode=inline]:border-b-transparent"
+        data-surface-subheader
+      >
         <RefreshFilesButton isPending={entriesQuery.isPending} onRefresh={entriesQuery.refresh} />
         <FileSearchField
           name="project-files-search"
diff --git a/apps/web/src/components/files/FilePreviewPanel.tsx b/apps/web/src/components/files/FilePreviewPanel.tsx
index f528fe894569409cc289cb92129e9b42ecb0b991..c4ca57b805fd0b3c2f0636226756bc0f17a0b271 100644
--- a/apps/web/src/components/files/FilePreviewPanel.tsx
+++ b/apps/web/src/components/files/FilePreviewPanel.tsx
@@ -857,7 +857,10 @@ export default function FilePreviewPanel({
   return (
     <div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
       {relativePath ? (
-        <div className="surface-subheader gap-2 px-3" data-surface-subheader>
+        <div
+          className="flex h-10 min-h-10 shrink-0 items-center gap-2 border-b border-border/60 bg-background px-3 in-data-[preview-panel-mode=inline]:mb-3 in-data-[preview-panel-mode=inline]:h-7 in-data-[preview-panel-mode=inline]:min-h-7 in-data-[preview-panel-mode=inline]:border-b-transparent"
+          data-surface-subheader
+        >
           <ScrollArea
             ref={breadcrumbRef}
             hideScrollbars
diff --git a/apps/web/src/components/preview/PreviewChromeRow.tsx b/apps/web/src/components/preview/PreviewChromeRow.tsx
index 958b30a47978aa9595403b77525230ce1daf0a56..49f0b9fa16f15e9d8e8f27be83ba9b1355586d01 100644
--- a/apps/web/src/components/preview/PreviewChromeRow.tsx
+++ b/apps/web/src/components/preview/PreviewChromeRow.tsx
@@ -109,7 +109,11 @@ export function PreviewChromeRow({
 
   return (
     <div className="relative">
-      <form onSubmit={submit} className="surface-subheader gap-1 px-2" data-surface-subheader>
+      <form
+        onSubmit={submit}
+        className="flex h-10 min-h-10 shrink-0 items-center gap-1 border-b border-border/60 bg-background px-2 in-data-[preview-panel-mode=inline]:mb-3 in-data-[preview-panel-mode=inline]:h-7 in-data-[preview-panel-mode=inline]:min-h-7 in-data-[preview-panel-mode=inline]:border-b-transparent"
+        data-surface-subheader
+      >
         <div className="flex items-center gap-0.5" role="group" aria-label="Navigation">
           <Tooltip>
             <TooltipTrigger
@@ -164,7 +168,7 @@ export function PreviewChromeRow({
           </Tooltip>
         </div>
 
-        <InputGroup variant="ghost" className="group/address h-7 flex-1 rounded-md">
+        <InputGroup variant="ghost" className="group/address h-7 flex-1">
           <Tooltip>
             <TooltipTrigger
               render={
diff --git a/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx b/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
index a5b3c97395a7f93ce2fc52947b1e3a17143710a0..71f3ffc7f378a68c7bdc63628770e91792915053 100644
--- a/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
@@ -668,13 +668,12 @@ export function PullRequestCodeTab({
       // chevron follows it rather than recomputing the default here.
       const collapsed = item.collapsed === true;
       return (
-        <button
-          type="button"
+        <Button
+          size="icon-micro"
+          variant="ghost-muted"
           aria-expanded={!collapsed}
           aria-label={collapsed ? "Expand diff" : "Collapse diff"}
-          className={cn(
-            "mr-1 inline-flex size-5 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground",
-          )}
+          className="mr-1 rounded hover:bg-transparent"
           onClick={(event) => {
             event.stopPropagation();
             toggleFile(item.id);
@@ -685,7 +684,7 @@ export function PullRequestCodeTab({
           ) : (
             <ChevronDownIcon className="size-4" />
           )}
-        </button>
+        </Button>
       );
     },
     [toggleFile],
@@ -899,7 +898,7 @@ export function PullRequestCodeTab({
     review.verdicts.length === 0 ? null : (
       <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10">
         {reviewOpen ? (
-          <div className="chat-composer-glass pointer-events-auto absolute inset-x-3 bottom-3 rounded-xl border border-border/60 shadow-lg">
+          <div className="surface-glass pointer-events-auto absolute inset-x-3 bottom-3 rounded-xl border border-border/60 shadow-lg">
             <Button
               type="button"
               size="icon-sm"
@@ -923,10 +922,11 @@ export function PullRequestCodeTab({
         ) : (
           // Bottom-right, clear of the vertical scrollbar the diff view keeps to its own right
           // edge.
-          <button
-            type="button"
-            className="chat-composer-glass pointer-events-auto absolute bottom-3 right-4 flex items-center gap-1.5 rounded-full border border-border/60 px-3 py-1.5 text-xs font-medium shadow-lg"
+          <Button
+            className="pointer-events-auto absolute right-4 bottom-3 rounded-full shadow-lg"
             onClick={() => setReviewOpen(true)}
+            size="compact"
+            variant="glass"
           >
             <MessageSquareIcon className="size-3.5" />
             Review
@@ -935,7 +935,7 @@ export function PullRequestCodeTab({
                 {pendingComments.length}
               </span>
             ) : null}
-          </button>
+          </Button>
         )}
       </div>
     );
@@ -959,7 +959,7 @@ export function PullRequestCodeTab({
    * diff API offers it.
    */
   const toolbar = (
-    <div className="surface-subheader justify-between gap-2 px-4 text-xs text-muted-foreground">
+    <div className="flex h-10 min-h-10 shrink-0 items-center justify-between gap-2 border-b border-border/60 bg-background px-4 text-xs text-muted-foreground">
       <div className="flex min-w-0 flex-1 items-center gap-3">
         {/* A host that reports no commits has nothing to scope by, and a dropdown whose only
             entry is the scope already showing is a control that does nothing. */}
diff --git a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
index 7237b4357481922931aec5fe9712eb8685276e58..2f4e84dc3fd2bc010afba7470215022b7e6c2597 100644
--- a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
@@ -1137,8 +1137,14 @@ export function PullRequestDetailPanel({
             <>
               <Menu>
                 <MenuTrigger
-                  className="inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
-                  aria-label="More pull request actions"
+                  render={
+                    <Button
+                      aria-label="More pull request actions"
+                      className="size-6"
+                      size="icon-xs"
+                      variant="ghost-muted"
+                    />
+                  }
                 >
                   <MoreHorizontalIcon className="size-4" />
                 </MenuTrigger>
diff --git a/apps/web/src/components/pullRequest/PullRequestListFilters.tsx b/apps/web/src/components/pullRequest/PullRequestListFilters.tsx
index dd4a9d161cdced985cf4cd99995429530e77f555..3066eafc38a19ab34adc9aa5a682aaba01d4cf02 100644
--- a/apps/web/src/components/pullRequest/PullRequestListFilters.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestListFilters.tsx
@@ -24,6 +24,7 @@ import type { ElementType } from "react";
 import { cn } from "~/lib/utils";
 import { getSourceControlPresentationForKind } from "~/sourceControlPresentation";
 import { ProjectFavicon } from "../ProjectFavicon";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../ui/input-group";
 
 import {
   Menu,
@@ -79,29 +80,18 @@ export function PullRequestSearchInput({
   onChange: (value: string) => void;
 }) {
   return (
-    <div className="relative min-w-0 flex-1">
-      {busy ? (
-        <LoaderIcon
-          aria-hidden
-          className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 animate-spin text-muted-foreground"
-        />
-      ) : (
-        <SearchIcon
-          aria-hidden
-          className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
-        />
-      )}
-      <input
-        type="text"
+    <InputGroup className="min-w-0 flex-1 **:[input]:h-9 sm:**:[input]:h-8">
+      <InputGroupAddon>
+        {busy ? <LoaderIcon aria-hidden className="animate-spin" /> : <SearchIcon aria-hidden />}
+      </InputGroupAddon>
+      <InputGroupInput
+        type="search"
         value={value}
         onChange={(event) => onChange(event.currentTarget.value)}
         placeholder="Search pull requests, or label:bug"
         aria-label="Search pull requests"
-        // Tracks the shared input's height at both widths, so it stays level with the icon
-        // button beside it rather than towering over it on wide screens.
-        className="h-9 w-full rounded-lg border border-input bg-background pr-3 pl-9 text-sm outline-none placeholder:text-muted-foreground/72 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/24 sm:h-8"
       />
-    </div>
+    </InputGroup>
   );
 }
 
diff --git a/apps/web/src/components/pullRequest/PullRequestReviewerPicker.tsx b/apps/web/src/components/pullRequest/PullRequestReviewerPicker.tsx
index 25c663794e9785bb7d7dba72a4407b3fed544ac6..8330c87a9294dd0bee6a4e4b89076eda5dbf14d5 100644
--- a/apps/web/src/components/pullRequest/PullRequestReviewerPicker.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestReviewerPicker.tsx
@@ -19,6 +19,7 @@ import { useAtomCommand } from "~/state/use-atom-command";
 import { squashAtomCommandFailure } from "@t3tools/client-runtime/state/runtime";
 
 import { Button } from "../ui/button";
+import { Input } from "../ui/input";
 import { Menu, MenuPopup, MenuTrigger } from "../ui/menu";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { toastManager } from "../ui/toast";
@@ -131,13 +132,13 @@ export function PullRequestReviewerPicker({
       />
       <MenuPopup align="start" side="bottom" className="w-72 p-0">
         <div className="border-b border-border/60 p-2">
-          <input
+          <Input
             autoFocus
             value={query}
             onChange={(event) => setQuery(event.currentTarget.value)}
             placeholder="Search people with access"
             aria-label="Search people with access"
-            className="h-7 w-full rounded-md border border-input bg-background px-2 text-xs outline-none placeholder:text-muted-foreground/72 focus-visible:border-ring"
+            size="compact"
           />
         </div>
         <div className="max-h-72 overflow-y-auto p-1">
diff --git a/apps/web/src/components/search/ProjectContentSearchDialog.tsx b/apps/web/src/components/search/ProjectContentSearchDialog.tsx
index 1890aab7fa79d04f3e77a4411e0913baef273054..d877d6537bda36c468827d4945707e31f3fd92cf 100644
--- a/apps/web/src/components/search/ProjectContentSearchDialog.tsx
+++ b/apps/web/src/components/search/ProjectContentSearchDialog.tsx
@@ -11,6 +11,7 @@ import { useProjectContentSearch } from "~/state/queries";
 import { PierreEntryIcon } from "../chat/PierreEntryIcon";
 import { CommandPaletteContent } from "../CommandPaletteContent";
 import { ScrollArea } from "../ui/scroll-area";
+import { Toggle } from "../ui/toggle";
 import { HighlightedSearchLine } from "./HighlightedSearchLine";
 
 interface ProjectContentSearchDialogProps {
@@ -58,19 +59,17 @@ function SearchOptionButton(props: {
   readonly children: ReactNode;
 }) {
   return (
-    <button
-      type="button"
+    <Toggle
       aria-label={props.label}
-      aria-pressed={props.active}
+      pressed={props.active}
       title={props.label}
-      className={cn(
-        "flex size-8 shrink-0 items-center justify-center rounded-[5px] font-mono text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-        props.active && "bg-accent text-foreground shadow-sm",
-      )}
+      className="size-8 rounded-[5px] font-mono text-muted-foreground data-pressed:text-foreground sm:size-7"
+      size="compact"
+      variant="ghost"
       onClick={props.onClick}
     >
       {props.children}
-    </button>
+    </Toggle>
   );
 }
 
diff --git a/apps/web/src/components/settings/DiagnosticsSettings.tsx b/apps/web/src/components/settings/DiagnosticsSettings.tsx
index 5bd4fdc08c4a9e6066284ea0ad0983d90e8f6688..a472c6a8d3d7bef1f6cbbfb6013562d7e68dc7af 100644
--- a/apps/web/src/components/settings/DiagnosticsSettings.tsx
+++ b/apps/web/src/components/settings/DiagnosticsSettings.tsx
@@ -273,14 +273,14 @@ function TraceIdCell({ traceId }: { traceId: string }) {
       <Tooltip>
         <TooltipTrigger
           render={
-            <button
-              type="button"
-              className="cursor-pointer inline-flex size-5 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+            <Button
+              size="icon-micro"
+              variant="ghost-muted"
               aria-label={copied ? "Copied trace ID" : "Copy trace ID"}
               onClick={() => copyToClipboard(traceId)}
             >
               <CopyIcon className="size-3" />
-            </button>
+            </Button>
           }
         />
         <TooltipPopup side="top">{copied ? "Copied" : "Copy full trace ID"}</TooltipPopup>
@@ -322,14 +322,14 @@ function ProcessNameCell({
       style={{ paddingLeft: `${Math.min(process.depth, 6) * 10}px` }}
     >
       {hasChildren ? (
-        <button
-          type="button"
-          className="cursor-pointer inline-flex size-5 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+        <Button
+          size="icon-micro"
+          variant="ghost-muted"
           aria-label={isExpanded ? `Collapse ${name}` : `Expand ${name}`}
           onClick={() => onToggle(process.pid)}
         >
           <ChevronIcon className="size-3.5" />
-        </button>
+        </Button>
       ) : (
         <span className="size-5 shrink-0" aria-hidden="true" />
       )}
@@ -793,9 +793,8 @@ function DiagnosticsRefreshButton({
       <TooltipTrigger
         render={
           <Button
-            size="icon-xs"
-            variant="ghost"
-            className="size-5 rounded-sm p-0 text-muted-foreground hover:text-foreground"
+            size="icon-micro"
+            variant="ghost-muted"
             disabled={isPending}
             onClick={onClick}
             aria-label={label}
@@ -1130,9 +1129,8 @@ export function DiagnosticsSettingsPanel() {
               <TooltipTrigger
                 render={
                   <Button
-                    size="icon-xs"
-                    variant="ghost"
-                    className="size-5 rounded-sm p-0 text-muted-foreground hover:text-foreground"
+                    size="icon-micro"
+                    variant="ghost-muted"
                     disabled={!observability?.logsDirectoryPath || isOpeningLogsDirectory}
                     onClick={openLogsDirectory}
                     aria-label="Open logs folder"
diff --git a/apps/web/src/components/settings/KeybindingsSettings.tsx b/apps/web/src/components/settings/KeybindingsSettings.tsx
index edbd3f36a0c4ecadf1f11b2959716b802c3bbd5f..9e793671512c59951e8ce171bacdf8ecf62a8c55 100644
--- a/apps/web/src/components/settings/KeybindingsSettings.tsx
+++ b/apps/web/src/components/settings/KeybindingsSettings.tsx
@@ -125,9 +125,8 @@ function ExpandableHeaderSearch({
             render={
               <Button
                 type="button"
-                size="icon-xs"
-                variant="ghost"
-                className="size-5 rounded-sm p-0 text-muted-foreground hover:text-foreground"
+                size="icon-micro"
+                variant="ghost-muted"
                 onClick={() => onOpenChange(true)}
                 aria-label="Search keybindings"
               >
@@ -144,10 +143,10 @@ function ExpandableHeaderSearch({
   return (
     <div className="relative">
       <SearchIcon className="pointer-events-none absolute top-1/2 left-2 size-3 -translate-y-1/2 text-muted-foreground" />
-      <input
+      <Input
         ref={inputRef}
         autoFocus
-        type="text"
+        type="search"
         value={query}
         onChange={(event) => onChange(event.currentTarget.value)}
         onBlur={() => {
@@ -162,7 +161,8 @@ function ExpandableHeaderSearch({
         }}
         placeholder="Search keybindings"
         aria-label="Search keybindings"
-        className="h-6 w-44 rounded-md border border-input bg-background pl-7 pr-2 text-[11px] text-foreground outline-none placeholder:text-muted-foreground/72 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/24"
+        className="w-44 [&_[data-slot=input]]:pl-7"
+        size="compact"
       />
     </div>
   );
@@ -309,10 +309,7 @@ function WhenVariableSelect({
 
   return (
     <Select value={value} onValueChange={(nextValue) => nextValue && onChange(nextValue)}>
-      <SelectTrigger
-        size="xs"
-        className="h-7 min-h-7 min-w-0 flex-1 rounded-md font-mono text-xs sm:h-7"
-      >
+      <SelectTrigger size="compact" className="min-w-0 flex-1 font-mono">
         <SelectValue placeholder="Condition" className="leading-7" />
         {unknownIdentifiers && unknownIdentifiers.length > 0 ? (
           <UnknownWhenVariableWarning identifiers={unknownIdentifiers} focusable={false} />
@@ -365,8 +362,8 @@ function WhenExpressionNodeEditor({
           onPressedChange={(pressed) => onChange(setConditionNegated(node, pressed))}
           aria-label={`Negate ${condition.identifier}`}
           variant="outline"
-          size="xs"
-          className="h-7 min-w-10 px-2 text-[11px] sm:h-7"
+          size="compact"
+          className="min-w-10"
         >
           Not
         </Toggle>
@@ -381,7 +378,7 @@ function WhenExpressionNodeEditor({
             type="button"
             variant="ghost"
             size="icon-sm"
-            className="size-7 sm:size-7"
+            className="size-7"
             aria-label="Remove condition"
             onClick={onRemove}
           >
@@ -406,8 +403,8 @@ function WhenExpressionNodeEditor({
             onPressedChange={(pressed) => onChange(pressed ? node : node.node)}
             aria-label="Negate group"
             variant="outline"
-            size="xs"
-            className="h-7 min-w-10 px-2 text-[11px] sm:h-7"
+            size="compact"
+            className="min-w-10"
           >
             Not
           </Toggle>
@@ -416,7 +413,7 @@ function WhenExpressionNodeEditor({
               type="button"
               variant="ghost"
               size="icon-sm"
-              className="ml-auto size-7 sm:size-7"
+              className="ml-auto size-7"
               aria-label="Remove negated group"
               onClick={onRemove}
             >
@@ -509,7 +506,7 @@ function WhenExpressionNodeEditor({
     >
       <div className="flex flex-wrap items-center gap-2">
         <Select value={operator} onValueChange={(value) => setOperator(value as BooleanOperator)}>
-          <SelectTrigger size="xs" className="h-7 min-h-7 w-24 rounded-md text-xs sm:h-7">
+          <SelectTrigger size="compact" className="w-24">
             <SelectValue />
           </SelectTrigger>
           <SelectContent
@@ -526,17 +523,11 @@ function WhenExpressionNodeEditor({
             </SelectItem>
           </SelectContent>
         </Select>
-        <Button
-          type="button"
-          variant="outline"
-          size="xs"
-          className="h-7 sm:h-7"
-          onClick={addCondition}
-        >
+        <Button type="button" variant="outline" size="compact" onClick={addCondition}>
           <PlusIcon className="size-3.5" />
           Condition
         </Button>
-        <Button type="button" variant="outline" size="xs" className="h-7 sm:h-7" onClick={addGroup}>
+        <Button type="button" variant="outline" size="compact" onClick={addGroup}>
           <PlusIcon className="size-3.5" />
           Group
         </Button>
@@ -545,7 +536,7 @@ function WhenExpressionNodeEditor({
             type="button"
             variant="ghost"
             size="icon-sm"
-            className="ml-auto size-7 sm:size-7"
+            className="ml-auto size-7"
             aria-label="Remove group"
             onClick={onRemove}
           >
@@ -640,23 +631,11 @@ function WhenExpressionBuilder({
           <div className="text-sm font-medium text-foreground">When</div>
         </div>
         <div className="flex shrink-0 items-center gap-2">
-          <Button
-            type="button"
-            variant="outline"
-            size="xs"
-            className="h-7 sm:h-7"
-            onClick={addRootCondition}
-          >
+          <Button type="button" variant="outline" size="compact" onClick={addRootCondition}>
             <PlusIcon className="size-3.5" />
             Condition
           </Button>
-          <Button
-            type="button"
-            variant="outline"
-            size="xs"
-            className="h-7 sm:h-7"
-            onClick={addRootGroup}
-          >
+          <Button type="button" variant="outline" size="compact" onClick={addRootGroup}>
             <PlusIcon className="size-3.5" />
             Group
           </Button>
@@ -702,17 +681,11 @@ function WhenExpressionBuilder({
         ) : (
           <div className="rounded-md border border-dashed border-border/80 bg-muted/15 p-3">
             <div className="flex flex-wrap gap-2">
-              <Button type="button" size="xs" className="h-7 sm:h-7" onClick={addRootCondition}>
+              <Button type="button" size="compact" onClick={addRootCondition}>
                 <PlusIcon className="size-3.5" />
                 Condition
               </Button>
-              <Button
-                type="button"
-                variant="outline"
-                size="xs"
-                className="h-7 sm:h-7"
-                onClick={addRootGroup}
-              >
+              <Button type="button" variant="outline" size="compact" onClick={addRootGroup}>
                 <PlusIcon className="size-3.5" />
                 Group
               </Button>
@@ -864,8 +837,7 @@ function KeybindingTableRow({
         )}
         {isDirty ? (
           <Button
-            size="xs"
-            className="h-7 sm:h-7"
+            size="compact"
             disabled={isSaving || keyDraft.trim().length === 0 || !isWhenDraftValid}
             onClick={save}
           >
@@ -992,10 +964,7 @@ function NewKeybindingTableRow({
           value={commandDraft}
           onValueChange={(value) => setCommandDraft(value as KeybindingCommand)}
         >
-          <SelectTrigger
-            size="xs"
-            className="h-7 min-h-7 w-full max-w-60 rounded-md text-xs sm:h-7"
-          >
+          <SelectTrigger size="compact" className="w-full max-w-60">
             <SelectValue placeholder="Command" />
           </SelectTrigger>
           <SelectContent
@@ -1017,18 +986,15 @@ function NewKeybindingTableRow({
           aria-label={`Keybinding for ${commandLabelText}`}
           value={isRecording ? "" : keyDraft}
           placeholder={isRecording ? "Press shortcut" : "Unassigned"}
-          className={cn(
-            "h-7 w-44 rounded-md font-mono text-[12px] sm:h-7",
-            isRecording && "border-primary/70 bg-primary/5",
-          )}
+          size="compact"
+          className={cn("w-44 font-mono", isRecording && "border-primary/70 bg-primary/5")}
           onFocus={() => setDraft({ isRecording: true })}
           onBlur={() => setDraft({ isRecording: false })}
           onChange={(event) => setDraft({ keyDraft: event.currentTarget.value })}
           onKeyDown={captureKeybinding}
         />
         <Button
-          size="xs"
-          className="h-7 sm:h-7"
+          size="compact"
           disabled={isSaving || !commandDraft || keyDraft.trim().length === 0 || !isWhenDraftValid}
           onClick={save}
         >
@@ -1066,7 +1032,7 @@ function NewKeybindingTableRow({
                 type="button"
                 variant="ghost"
                 size="icon-sm"
-                className="size-7 text-muted-foreground hover:text-foreground sm:size-7"
+                className="size-7 text-muted-foreground hover:text-foreground"
                 disabled={isSaving}
                 aria-label="Cancel new keybinding"
                 onClick={onCancel}
@@ -1247,9 +1213,8 @@ export function KeybindingsSettingsPanel() {
                 render={
                   <Button
                     type="button"
-                    size="icon-xs"
-                    variant="ghost"
-                    className="size-5 rounded-sm p-0 text-muted-foreground hover:text-foreground"
+                    size="icon-micro"
+                    variant="ghost-muted"
                     onClick={() => setIsAddingBinding(true)}
                     aria-label="Add keybinding"
                   >
@@ -1264,9 +1229,8 @@ export function KeybindingsSettingsPanel() {
                 render={
                   <Button
                     type="button"
-                    size="icon-xs"
-                    variant="ghost"
-                    className="size-5 rounded-sm p-0 text-muted-foreground hover:text-foreground"
+                    size="icon-micro"
+                    variant="ghost-muted"
                     disabled={!keybindingsConfigPath}
                     onClick={openKeybindingsFile}
                     aria-label="Open keybindings.json"
diff --git a/apps/web/src/components/settings/ProjectSettingsPanel.tsx b/apps/web/src/components/settings/ProjectSettingsPanel.tsx
index 50cf9c3180407a18a95e3972daeb9463fa229006..b939e4d5386b785ccaf5dd136a703a6ff96be64f 100644
--- a/apps/web/src/components/settings/ProjectSettingsPanel.tsx
+++ b/apps/web/src/components/settings/ProjectSettingsPanel.tsx
@@ -177,7 +177,7 @@ export function ProjectSettingsPage({ projectKey }: { projectKey: string }) {
         {!isElectron && (
           <header
             className={cn(
-              "workspace-topbar px-3 transition-[padding-left] duration-200 ease-linear motion-reduce:transition-none sm:px-5",
+              "flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center px-3 transition-[padding-left] duration-200 ease-linear motion-reduce:transition-none sm:px-5",
               COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,
             )}
           >
diff --git a/apps/web/src/components/settings/ProviderInstanceCard.tsx b/apps/web/src/components/settings/ProviderInstanceCard.tsx
index cc4591da4a3efe7523cbb52bd4783830fc0cc959..11e108e7ca7c3d9eb624855b7b262741924c8339 100644
--- a/apps/web/src/components/settings/ProviderInstanceCard.tsx
+++ b/apps/web/src/components/settings/ProviderInstanceCard.tsx
@@ -560,9 +560,9 @@ export function ProviderInstanceCard({
             <TooltipTrigger
               render={
                 <Button
-                  size="icon-xs"
+                  size="icon-micro"
                   variant="ghost"
-                  className="size-5 rounded-sm p-0 text-muted-foreground hover:text-destructive"
+                  className="text-muted-foreground hover:text-destructive"
                   onClick={onDelete}
                   aria-label={`Delete provider instance ${instanceId}`}
                 >
@@ -708,9 +708,8 @@ export function ProviderInstanceCard({
           </div>
           <div className="flex w-full shrink-0 items-center gap-2 sm:w-auto sm:justify-end">
             <Button
-              size="sm"
-              variant="ghost"
-              className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+              size="compact"
+              variant="ghost-muted"
               onClick={() => onExpandedChange(!isExpanded)}
               aria-label={`Toggle ${displayName} details`}
             >
diff --git a/apps/web/src/components/settings/ProviderModelsSection.tsx b/apps/web/src/components/settings/ProviderModelsSection.tsx
index 7ae26b2786572d621496b6caee27b0f8dbf7b364..9a42961d13eeb8a79b00948612cbfbbdc461ff3c 100644
--- a/apps/web/src/components/settings/ProviderModelsSection.tsx
+++ b/apps/web/src/components/settings/ProviderModelsSection.tsx
@@ -245,9 +245,9 @@ export function ProviderModelsSection({
                     <TooltipTrigger
                       render={
                         <Button
-                          size="icon-xs"
+                          size="icon-micro"
                           variant="ghost"
-                          className="size-5 rounded-sm p-0 text-muted-foreground/60 hover:text-muted-foreground"
+                          className="text-muted-foreground/60 hover:text-muted-foreground"
                           aria-label={`Details for ${model.name}`}
                         />
                       }
@@ -282,12 +282,9 @@ export function ProviderModelsSection({
                   <TooltipTrigger
                     render={
                       <Button
-                        size="icon-xs"
-                        variant="ghost"
-                        className={cn(
-                          "size-5 rounded-sm p-0 text-muted-foreground hover:text-foreground",
-                          isFavorite && "text-yellow-500 hover:text-yellow-600",
-                        )}
+                        size="icon-micro"
+                        variant="ghost-muted"
+                        className={cn(isFavorite && "text-yellow-500 hover:text-yellow-600")}
                         onClick={() => handleToggleFavorite(model.slug)}
                         aria-label={`${isFavorite ? "Remove" : "Add"} ${model.name} ${
                           isFavorite ? "from" : "to"
@@ -305,9 +302,8 @@ export function ProviderModelsSection({
                   <TooltipTrigger
                     render={
                       <Button
-                        size="icon-xs"
-                        variant="ghost"
-                        className="size-5 rounded-sm p-0 text-muted-foreground hover:text-foreground"
+                        size="icon-micro"
+                        variant="ghost-muted"
                         disabled={!canMoveUp}
                         onClick={() => handleMove(model.slug, -1)}
                         aria-label={`Move ${model.name} up`}
@@ -322,9 +318,8 @@ export function ProviderModelsSection({
                   <TooltipTrigger
                     render={
                       <Button
-                        size="icon-xs"
-                        variant="ghost"
-                        className="size-5 rounded-sm p-0 text-muted-foreground hover:text-foreground"
+                        size="icon-micro"
+                        variant="ghost-muted"
                         disabled={!canMoveDown}
                         onClick={() => handleMove(model.slug, 1)}
                         aria-label={`Move ${model.name} down`}
@@ -340,9 +335,8 @@ export function ProviderModelsSection({
                     <TooltipTrigger
                       render={
                         <Button
-                          size="icon-xs"
-                          variant="ghost"
-                          className="size-5 rounded-sm p-0 text-muted-foreground hover:text-foreground"
+                          size="icon-micro"
+                          variant="ghost-muted"
                           onClick={() => handleToggleHidden(model.slug)}
                           aria-label={`${isHidden ? "Show" : "Hide"} ${model.name}`}
                         />
@@ -364,9 +358,8 @@ export function ProviderModelsSection({
                     <TooltipTrigger
                       render={
                         <Button
-                          size="icon-xs"
-                          variant="ghost"
-                          className="size-5 rounded-sm p-0 text-muted-foreground hover:text-foreground"
+                          size="icon-micro"
+                          variant="ghost-muted"
                           aria-label={`Remove ${model.slug}`}
                           onClick={() => handleRemove(model.slug)}
                         />
diff --git a/apps/web/src/components/settings/ProviderSettingsPanel.tsx b/apps/web/src/components/settings/ProviderSettingsPanel.tsx
index c06826d450d41e84c7e8351e7a2fb4d4c005316f..773463a3835cd1cd4df122118c50f3b92236f9f1 100644
--- a/apps/web/src/components/settings/ProviderSettingsPanel.tsx
+++ b/apps/web/src/components/settings/ProviderSettingsPanel.tsx
@@ -670,9 +670,8 @@ export function EnvironmentProviderSettings({
                   <TooltipTrigger
                     render={
                       <Button
-                        size="icon-xs"
-                        variant="ghost"
-                        className="size-5 rounded-sm p-0 text-muted-foreground hover:text-foreground"
+                        size="icon-micro"
+                        variant="ghost-muted"
                         onClick={() => setIsAddInstanceDialogOpen(true)}
                         aria-label="Add provider instance"
                       >
@@ -686,9 +685,8 @@ export function EnvironmentProviderSettings({
                   <TooltipTrigger
                     render={
                       <Button
-                        size="icon-xs"
-                        variant="ghost"
-                        className="size-5 rounded-sm p-0 text-muted-foreground hover:text-foreground"
+                        size="icon-micro"
+                        variant="ghost-muted"
                         disabled={isRefreshingProviders}
                         onClick={() => void refreshProviders()}
                         aria-label="Refresh provider status"
diff --git a/apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx b/apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx
index 062326c216a9fff82e17cbfb183be48bab09ce5e..741cd3c3f37ffe7007958475c6911ee57fb236d7 100644
--- a/apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx
+++ b/apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx
@@ -486,14 +486,14 @@ function ProcessTreeName({
       style={{ paddingLeft: `${Math.min(process.depth, 7) * 10}px` }}
     >
       {hasChildren ? (
-        <button
-          type="button"
-          className="cursor-pointer inline-flex size-5 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+        <Button
+          size="icon-micro"
+          variant="ghost-muted"
           onClick={() => onToggle(process)}
           aria-label={collapsed ? `Expand ${name}` : `Collapse ${name}`}
         >
           <ChevronIcon className="size-3.5" />
-        </button>
+        </Button>
       ) : (
         <span className="size-5" aria-hidden />
       )}
@@ -975,9 +975,8 @@ export function ResourceTelemetryDiagnostics() {
               <TooltipTrigger
                 render={
                   <Button
-                    size="icon-xs"
+                    size="icon-micro"
                     variant="ghost"
-                    className="size-5 rounded-sm p-0"
                     disabled={telemetry.isPending}
                     onClick={telemetry.refresh}
                     aria-label="Refresh resource telemetry"
@@ -1227,9 +1226,8 @@ export function ResourceTelemetryDiagnostics() {
           <div className="flex items-center gap-2">
             <HistoryWindowSelector selectedWindowMs={windowMs} onSelect={setWindowMs} />
             <Button
-              size="icon-xs"
+              size="icon-micro"
               variant="ghost"
-              className="size-5 rounded-sm p-0"
               disabled={history.isPending}
               onClick={history.refresh}
               aria-label="Refresh resource history"
diff --git a/apps/web/src/components/settings/SettingsSidebarNav.tsx b/apps/web/src/components/settings/SettingsSidebarNav.tsx
index c34ca1016531c19042812587b3ab860723ebe095..174c9e9fe97c6b69e36dd853169dbacc941bfd33 100644
--- a/apps/web/src/components/settings/SettingsSidebarNav.tsx
+++ b/apps/web/src/components/settings/SettingsSidebarNav.tsx
@@ -220,9 +220,9 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
             {isSearching ? (
               <Button
                 type="button"
-                size="icon-xs"
+                size="icon-micro"
                 variant="ghost"
-                className="size-5 shrink-0 rounded-sm text-sidebar-muted-foreground hover:bg-sidebar-control-surface hover:text-sidebar-foreground"
+                className="shrink-0 text-sidebar-muted-foreground hover:bg-sidebar-control-surface hover:text-sidebar-foreground"
                 aria-label="Clear settings search"
                 onClick={() => {
                   clearSearch();
diff --git a/apps/web/src/components/settings/SourceControlSettings.tsx b/apps/web/src/components/settings/SourceControlSettings.tsx
index 7cdd697d3110d1efe3534e89991b52dba16dcf2a..55da45247b31db41e4666fc74a2be19a1716cbb3 100644
--- a/apps/web/src/components/settings/SourceControlSettings.tsx
+++ b/apps/web/src/components/settings/SourceControlSettings.tsx
@@ -1,4 +1,4 @@
-import { ChevronDownIcon, GitPullRequestIcon, InfoIcon, RefreshCwIcon } from "lucide-react";
+import { ChevronDownIcon, GitPullRequestIcon, RefreshCwIcon } from "lucide-react";
 import * as Duration from "effect/Duration";
 import * as Option from "effect/Option";
 import { useState, type ReactNode } from "react";
@@ -43,6 +43,7 @@ import {
 } from "../ui/number-field";
 import { Switch } from "../ui/switch";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+
 import {
   AzureDevOpsIcon,
   BitbucketIcon,
@@ -54,7 +55,12 @@ import {
 } from "../Icons";
 import { RedactedSensitiveText } from "./RedactedSensitiveText";
 import { SourceControlWritingSettingsSection } from "./SourceControlWritingSettings";
-import { SettingResetButton, SettingsPageContainer, SettingsSection } from "./settingsLayout";
+import {
+  PolicyTooltip,
+  SettingResetButton,
+  SettingsPageContainer,
+  SettingsSection,
+} from "./settingsLayout";
 import { searchableSetting } from "./settingsSearch";
 
 const EMPTY_DISCOVERY_RESULT: SourceControlDiscoveryResult = {
@@ -116,27 +122,6 @@ function backgroundActivityOverrideSettings(
   };
 }
 
-function BackgroundPolicyTooltip({ children }: { readonly children: string }) {
-  return (
-    <Tooltip>
-      <TooltipTrigger
-        render={
-          <button
-            type="button"
-            className="inline-flex size-5 items-center justify-center rounded-sm text-muted-foreground hover:text-foreground"
-            aria-label="Background policy details"
-          >
-            <InfoIcon className="size-3.5" />
-          </button>
-        }
-      />
-      <TooltipPopup side="top" className="max-w-72">
-        {children}
-      </TooltipPopup>
-    </Tooltip>
-  );
-}
-
 function optionLabel(value: Option.Option<string>): string | null {
   return Option.getOrNull(value);
 }
@@ -316,9 +301,8 @@ function DiscoveryItemRow({
           <div className="flex w-full shrink-0 items-center gap-2 sm:w-auto sm:justify-end">
             {hasDetails ? (
               <Button
-                size="sm"
-                variant="ghost"
-                className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+                size="compact"
+                variant="ghost-muted"
                 onClick={() => setIsExpanded((open) => !open)}
                 aria-expanded={isExpanded}
                 aria-label={`Toggle ${item.label} details`}
@@ -367,11 +351,11 @@ function GitFetchIntervalSettings() {
         <div className="min-w-0 space-y-1">
           <div className="flex min-w-0 items-center gap-1">
             <span className="text-xs font-medium text-foreground">Fetch interval</span>
-            <BackgroundPolicyTooltip>
+            <PolicyTooltip>
               This interval is configured for Git only. The shared Background activity policy still
               decides whether Git refreshes may run when the timer fires. Custom intervals appear as
               Advanced in General settings.
-            </BackgroundPolicyTooltip>
+            </PolicyTooltip>
             <span
               className={cn(
                 "inline-flex size-5 shrink-0 items-center justify-center transition-opacity",
@@ -537,9 +521,8 @@ export function SourceControlSettingsPanel() {
       <TooltipTrigger
         render={
           <Button
-            size="icon-xs"
-            variant="ghost"
-            className="size-5 rounded-sm p-0 text-muted-foreground hover:text-foreground"
+            size="icon-micro"
+            variant="ghost-muted"
             onClick={handleScan}
             disabled={discovery.isPending}
             aria-label="Rescan server environment"
diff --git a/apps/web/src/components/settings/ThemeImportDialog.tsx b/apps/web/src/components/settings/ThemeImportDialog.tsx
index 46915954eae4646da98c88190b5f30cc463047af..d6afe5f0117fa61be8cc5733348795a81175b073 100644
--- a/apps/web/src/components/settings/ThemeImportDialog.tsx
+++ b/apps/web/src/components/settings/ThemeImportDialog.tsx
@@ -79,13 +79,13 @@ function highlightJson(value: string): string {
     const index = match.index ?? 0;
     highlighted += escapeJsonHtml(value.slice(cursor, index));
 
-    let tokenClass = "theme-json-number";
+    let tokenClass = "text-[var(--app-theme-secondary-foreground,var(--color-amber-600))]";
     if (token.startsWith('"')) {
       tokenClass = /^\s*:/.test(value.slice(index + token.length))
-        ? "theme-json-key"
-        : "theme-json-string";
+        ? "text-[var(--app-theme-accent,var(--color-blue-600))]"
+        : "text-[var(--app-theme-message-action,var(--color-emerald-600))]";
     } else if (token === "true" || token === "false" || token === "null") {
-      tokenClass = "theme-json-constant";
+      tokenClass = "text-[var(--app-theme-accent-surface-foreground,var(--color-violet-600))]";
     }
     highlighted += `<span class="${tokenClass}">${escapeJsonHtml(token)}</span>`;
     cursor = index + token.length;
diff --git a/apps/web/src/components/settings/ThemeSearchSection.tsx b/apps/web/src/components/settings/ThemeSearchSection.tsx
index 6085c593ac6871f805e9c1ea62ac96e185d6ece9..ed04b1075e28ea692dfc22c15499f257b8e39fb8 100644
--- a/apps/web/src/components/settings/ThemeSearchSection.tsx
+++ b/apps/web/src/components/settings/ThemeSearchSection.tsx
@@ -30,7 +30,7 @@ import {
   AlertDialogTitle,
 } from "../ui/alert-dialog";
 import { Button } from "../ui/button";
-import { Input } from "../ui/input";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../ui/input-group";
 import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";
 import { Spinner } from "../ui/spinner";
 
@@ -202,20 +202,24 @@ export function ThemeSearchSection({
           Find open-source themes from Open VSX.
         </p>
       </div>
-      <form className="relative flex gap-2" onSubmit={handleSearch}>
-        <SearchIcon className="pointer-events-none absolute left-3 top-1/2 z-10 size-4 -translate-y-1/2 text-muted-foreground" />
-        <Input
-          aria-label="Search Open VSX themes"
-          className="rounded-xl [&_input]:pl-9"
-          autoFocus
-          onChange={(event) => setQuery(event.currentTarget.value)}
-          placeholder="try dracula, nord, catppuccin..."
-          size="lg"
-          type="search"
-          value={query}
-        />
+      <form className="flex gap-2" onSubmit={handleSearch}>
+        <InputGroup>
+          <InputGroupAddon>
+            <SearchIcon />
+          </InputGroupAddon>
+          <InputGroupInput
+            aria-label="Search Open VSX themes"
+            autoFocus
+            onChange={(event) => setQuery(event.currentTarget.value)}
+            placeholder="try dracula, nord, catppuccin..."
+            size="lg"
+            type="search"
+            value={query}
+          />
+        </InputGroup>
         <Button
           disabled={!query.trim() || isSearching || installingId !== null}
+          size="lg"
           type="submit"
           variant="outline"
         >
diff --git a/apps/web/src/components/settings/settingsLayout.tsx b/apps/web/src/components/settings/settingsLayout.tsx
index 0e0ae0a042b0d36ecc0c9e253999a649d15c5a05..880e03e54754b78c1a389afbb1d19c444e7877e9 100644
--- a/apps/web/src/components/settings/settingsLayout.tsx
+++ b/apps/web/src/components/settings/settingsLayout.tsx
@@ -90,13 +90,9 @@ export function PolicyTooltip({ children }: { readonly children: string }) {
       <TooltipTrigger
         delay={200}
         render={
-          <button
-            type="button"
-            className="inline-flex size-5 items-center justify-center rounded-sm text-muted-foreground hover:text-foreground"
-            aria-label="Background policy details"
-          >
+          <Button size="icon-micro" variant="ghost-muted" aria-label="Background policy details">
             <InfoIcon className="size-3.5" />
-          </button>
+          </Button>
         }
       />
       <TooltipPopup side="top" className="max-w-72">
@@ -216,11 +212,10 @@ export function SettingResetButton({
       <TooltipTrigger
         render={
           <Button
-            size="icon-xs"
-            variant="ghost"
+            size="icon-micro"
+            variant="ghost-muted"
             aria-label={`Reset ${label} to default`}
             disabled={disabled}
-            className="size-5 rounded-sm p-0 text-muted-foreground hover:text-foreground"
             onClick={(event) => {
               event.stopPropagation();
               onClick();
@@ -251,7 +246,10 @@ export function SettingsPageContainer({
 
   return (
     <SettingsSearchTargetProvider targetId={targetId} onTargetHandled={clearTargetHash}>
-      <div className="settings-page-scroll-fade scrollbar-gutter-both flex-1 overflow-y-auto px-4 pt-10 pb-7 sm:px-8 sm:pt-12 sm:pb-10">
+      <div
+        className="topbar-scroll-fade scrollbar-gutter-both flex-1 overflow-y-auto px-4 pt-10 pb-7 sm:px-8 sm:pt-12 sm:pb-10"
+        data-settings-page-scroll
+      >
         <div className={cn("mx-auto flex w-full max-w-4xl flex-col gap-12", className)}>
           {children}
         </div>
diff --git a/apps/web/src/components/sidebar/SidebarChrome.tsx b/apps/web/src/components/sidebar/SidebarChrome.tsx
index 175a1c3d062015481bea3dedf38cfcf8728b34a4..f4a98dec86c7366b7aed6a9885baabe15c139b02 100644
--- a/apps/web/src/components/sidebar/SidebarChrome.tsx
+++ b/apps/web/src/components/sidebar/SidebarChrome.tsx
@@ -83,7 +83,7 @@ function SidebarBrand({ onBackdrop }: { onBackdrop: boolean }) {
     <Link
       aria-label="Go to threads"
       className={cn(
-        "sidebar-brand relative z-10 ml-[var(--workspace-titlebar-content-left)] h-7 w-fit min-w-0 shrink-0 items-center gap-1 overflow-hidden rounded-md outline-hidden ring-ring focus-visible:ring-2",
+        "relative z-10 ml-[var(--workspace-titlebar-content-left)] hidden h-7 w-fit min-w-0 shrink-0 items-center gap-1 overflow-hidden rounded-md outline-hidden ring-ring focus-visible:ring-2 md:flex",
         onBackdrop ? "text-white" : "text-foreground",
       )}
       to="/"
diff --git a/apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx b/apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx
index 421934b98a15166f70692e62ebea4f2f1f683a4a..dcab7440aced2f695ca9f63d0ff07232bc28bb86 100644
--- a/apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx
+++ b/apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx
@@ -10,6 +10,7 @@ import {
   type ProviderUpdateSidebarPillView,
 } from "../ProviderUpdateLaunchNotification.logic";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+import { Button } from "../ui/button";
 
 const PROVIDER_UPDATE_PILL_STYLES = {
   loading:
@@ -151,7 +152,7 @@ export function SidebarProviderUpdatePill() {
         <div
           key={displayedView.key}
           aria-hidden="true"
-          className={`provider-update-pill-progress pointer-events-none absolute inset-y-0 left-0 w-full origin-left border-r border-current/15 shadow-[inset_0_1px_0_rgb(255_255_255_/_0.08)] ${
+          className={`pointer-events-none absolute inset-y-0 left-0 w-full origin-left animate-[provider-update-pill-countdown_var(--provider-update-pill-dismiss-ms)_linear_forwards] border-r border-current/15 shadow-[inset_0_1px_0_rgb(255_255_255_/_0.08)] ${
             PROVIDER_UPDATE_PILL_PROGRESS_STYLES[displayedView.tone]
           }`}
           style={
@@ -190,14 +191,15 @@ export function SidebarProviderUpdatePill() {
         <Tooltip>
           <TooltipTrigger
             render={
-              <button
-                type="button"
+              <Button
+                size="icon-micro"
+                variant="ghost"
                 aria-label="Dismiss provider update notice"
-                className="relative z-[1] mr-1 inline-flex size-5 items-center justify-center rounded-md opacity-70 transition-opacity hover:opacity-100"
+                className="relative z-[1] mr-1 [--control-icon-color:currentColor] rounded-md text-inherit opacity-70 hover:bg-transparent hover:opacity-100"
                 onClick={() => startExit(displayedView.key, null, displayedView.key)}
               >
                 <XIcon className="size-3.5" />
-              </button>
+              </Button>
             }
           />
           <TooltipPopup side="top">Dismiss until provider status changes</TooltipPopup>
diff --git a/apps/web/src/components/threadSidebarWidth.test.ts b/apps/web/src/components/threadSidebarWidth.test.ts
index 3beb2a8f5130f0f80d4d6cd5338606bc5cf1bb86..e38d5c3749bc365481248a4fad2edd52e7e52b52 100644
--- a/apps/web/src/components/threadSidebarWidth.test.ts
+++ b/apps/web/src/components/threadSidebarWidth.test.ts
@@ -1,4 +1,4 @@
-// @effect-diagnostics nodeBuiltinImport:off - Regression coverage compares shipped CSS with the sidebar width contract.
+// @effect-diagnostics nodeBuiltinImport:off - Regression coverage compares the sidebar component with its width contract.
 import * as NodeFS from "node:fs";
 
 import { describe, expect, it } from "vite-plus/test";
@@ -36,20 +36,13 @@ describe("thread sidebar width", () => {
   });
 
   it("shows the desktop wordmark across the sidebar's full legal width range", () => {
-    const sidebarStyles = NodeFS.readFileSync(new URL("../index.css", import.meta.url), "utf8");
-    const desktopHeaderStyles = sidebarStyles.slice(
-      sidebarStyles.indexOf("@media (min-width: 48rem)"),
-      sidebarStyles.indexOf("/* Stage-channel sidebar art"),
+    const sidebarSource = NodeFS.readFileSync(
+      new URL("./sidebar/SidebarChrome.tsx", import.meta.url),
+      "utf8",
     );
-    const stageLabelThreshold = desktopHeaderStyles.match(
-      /@container sidebar-header \(min-width: ([\d.]+)rem\) \{\s*\.sidebar-brand-stage \{\s*display: inline-flex;/,
-    )?.[1];
 
-    expect(sidebarStyles).toMatch(/\.sidebar-brand \{\s*display: none;/);
-    expect(desktopHeaderStyles).toMatch(
-      /@media \(min-width: 48rem\) \{\s*\.sidebar-brand \{\s*display: flex;/,
-    );
+    expect(sidebarSource).toContain("hidden h-7 w-fit min-w-0 shrink-0 items-center gap-1");
+    expect(sidebarSource).toContain("md:flex");
     expect(THREAD_SIDEBAR_MIN_WIDTH).toBe(13 * 16);
-    expect(Number(stageLabelThreshold) * 16).toBeGreaterThan(THREAD_SIDEBAR_MIN_WIDTH);
   });
 });
diff --git a/apps/web/src/components/ui/button.test.tsx b/apps/web/src/components/ui/button.test.tsx
index 341d85b42bbcde64e2d46e68cd2e861187ac4d8a..e1bd89d94cdb23c2de0b28377d38007ff1ddcf21 100644
--- a/apps/web/src/components/ui/button.test.tsx
+++ b/apps/web/src/components/ui/button.test.tsx
@@ -28,4 +28,19 @@ describe("button geometry tokens", () => {
     expect(html).toContain("size-7");
     expect(html).toContain("sm:size-6");
   });
+
+  it("owns shared compact and micro control geometry", () => {
+    const compact = renderToStaticMarkup(<Button size="compact">Condition</Button>);
+    const micro = renderToStaticMarkup(
+      <Button size="icon-micro" variant="ghost-muted" aria-label="Add action">
+        <span>+</span>
+      </Button>,
+    );
+
+    expect(compact).toContain("h-7");
+    expect(compact).toContain("rounded-md");
+    expect(micro).toContain("size-5");
+    expect(micro).toContain("rounded-sm");
+    expect(micro).toContain("text-muted-foreground");
+  });
 });
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 778574ba01079764316e9c5b018aa77646f1274d..9f0b4d049eda487fcb8be33ad4e74c92399e50c2 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -16,9 +16,13 @@ const buttonVariants = cva(
     },
     variants: {
       size: {
+        compact:
+          "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-xs before:rounded-[calc(var(--radius-md)-1px)] [&_svg:not([class*='size-'])]:size-3.5",
         default: "h-9 px-[calc(--spacing(3)-1px)] sm:h-8",
         icon: "size-9 sm:size-8",
         "icon-lg": "size-10 sm:size-9",
+        "icon-micro":
+          "size-5 rounded-sm p-0 before:rounded-[calc(var(--radius-sm)-1px)] [&_svg:not([class*='size-'])]:size-3",
         "icon-sm": "size-8 sm:size-7",
         "icon-xl":
           "size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
@@ -38,6 +42,10 @@ const buttonVariants = cva(
           "border-input bg-popover not-dark:bg-clip-padding text-destructive-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:border-destructive/32 [:hover,[data-pressed]]:bg-destructive/4",
         ghost:
           "[--control-icon-color:var(--muted-foreground)] border-transparent text-foreground data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent",
+        "ghost-muted":
+          "[--control-icon-color:var(--muted-foreground)] border-transparent text-muted-foreground data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent [:hover,[data-pressed]]:text-foreground",
+        glass:
+          "surface-glass [--control-icon-color:var(--muted-foreground)] border-border/60 text-foreground shadow-sm [:hover,[data-pressed]]:border-border",
         link: "border-transparent underline-offset-4 [:hover,[data-pressed]]:underline",
         outline:
           "[--control-icon-color:var(--muted-foreground)] border-input bg-popover not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64",
diff --git a/apps/web/src/components/ui/combobox.tsx b/apps/web/src/components/ui/combobox.tsx
index 324b67e64d90471debd28e23d83b321b5e841e24..cf3a46142ad294470abcaec6aff17d16c86f333f 100644
--- a/apps/web/src/components/ui/combobox.tsx
+++ b/apps/web/src/components/ui/combobox.tsx
@@ -170,7 +170,7 @@ function ComboboxPopup({
       >
         <span
           className={cn(
-            "dropdown-glass relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg transition-[scale,opacity]",
+            "dropdown-glass relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg shadow-[0_16px_40px_-18px_rgb(0_0_0/55%)] transition-[scale,opacity] dark:shadow-[0_18px_44px_-18px_rgb(0_0_0/80%)]",
             className,
           )}
         >
diff --git a/apps/web/src/components/ui/input-group.tsx b/apps/web/src/components/ui/input-group.tsx
index 2ac9ee1ed41ab4ab4d02a872ce52ec02458e6dec..04e34e5611ee85d3f8cf8e5c553a9d0b22bbda85 100644
--- a/apps/web/src/components/ui/input-group.tsx
+++ b/apps/web/src/components/ui/input-group.tsx
@@ -8,7 +8,7 @@ import { Input, type InputProps } from "~/components/ui/input";
 import { Textarea, type TextareaProps } from "~/components/ui/textarea";
 
 const inputGroupVariants = cva(
-  "relative inline-flex w-full min-w-0 items-center rounded-lg border text-base text-foreground ring-ring/24 transition-shadow has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 has-[textarea]:h-auto has-data-[align=block-end]:h-auto has-data-[align=block-start]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:flex-col has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-autofill:bg-foreground/4 has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] sm:text-sm dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto has-data-[align=inline-start]:**:[input]:ps-2 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5 **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)]",
+  "relative inline-flex w-full min-w-0 items-center rounded-[var(--control-radius)] border text-base text-foreground ring-ring/24 transition-shadow has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 has-[textarea]:h-auto has-data-[align=block-end]:h-auto has-data-[align=block-start]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:flex-col has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-autofill:bg-foreground/4 has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] sm:text-sm dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto has-data-[align=inline-start]:**:[input]:ps-2 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5 **:[textarea_button]:rounded-[calc(var(--control-radius)-1px)]",
   {
     defaultVariants: {
       variant: "default",
@@ -16,7 +16,7 @@ const inputGroupVariants = cva(
     variants: {
       variant: {
         default:
-          "border-input bg-background not-dark:bg-clip-padding shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+          "border-input bg-background not-dark:bg-clip-padding shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--control-radius)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)]",
         ghost:
           "border-transparent bg-transparent shadow-none hover:bg-muted/40 has-[input:focus-visible,textarea:focus-visible]:bg-background",
       },
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index 6edc8d4a62fc56cf2aecc8a969dede7c1d2e0a20..cae3dfe628527958057845ea7a55029acee902cb 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -6,7 +6,7 @@ import type * as React from "react";
 import { cn } from "~/lib/utils";
 
 type InputProps = Omit<InputPrimitive.Props & React.RefAttributes<HTMLInputElement>, "size"> & {
-  size?: "sm" | "default" | "lg" | number;
+  size?: "sm" | "compact" | "default" | "lg" | number;
   unstyled?: boolean;
   nativeInput?: boolean;
 };
@@ -20,6 +20,7 @@ function Input({
 }: InputProps) {
   const inputClassName = cn(
     "h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-8.5 outline-none placeholder:text-placeholder sm:h-7.5 sm:leading-7.5 [transition:background-color_5000000s_ease-in-out_0s]",
+    size === "compact" && "h-7 px-[calc(--spacing(2.5)-1px)] text-xs leading-7 sm:h-7 sm:leading-7",
     size === "sm" && "h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5",
     size === "lg" && "h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5",
     props.type === "search" &&
@@ -59,6 +60,9 @@ function Input({
         cn(
           !unstyled &&
             "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+          !unstyled &&
+            size === "compact" &&
+            "rounded-md before:rounded-[calc(var(--radius-md)-1px)]",
           className,
         ) || undefined
       }
diff --git a/apps/web/src/components/ui/menu.tsx b/apps/web/src/components/ui/menu.tsx
index 9f7cfc8c0670d4415d630b9f85d4d26201ec24f0..803d6c1987c10f5fd4a28969ffe4a03b00f92579 100644
--- a/apps/web/src/components/ui/menu.tsx
+++ b/apps/web/src/components/ui/menu.tsx
@@ -36,6 +36,13 @@ function MenuPopup({
   side?: MenuPrimitive.Positioner.Props["side"];
   anchor?: MenuPrimitive.Positioner.Props["anchor"];
 }) {
+  const hasExplicitWidthClass =
+    typeof className === "string" &&
+    className.split(/\s+/).some((classToken) => {
+      const utility = classToken.split(":").at(-1) ?? classToken;
+      return /^(?:min-|max-)?w-/.test(utility);
+    });
+
   return (
     <MenuPrimitive.Portal>
       <MenuPrimitive.Positioner
@@ -49,7 +56,8 @@ function MenuPopup({
       >
         <MenuPrimitive.Popup
           className={cn(
-            "dropdown-glass relative flex not-[class*='w-']:min-w-32 origin-(--transform-origin) rounded-lg outline-none focus:outline-none",
+            "dropdown-glass relative flex origin-(--transform-origin) rounded-lg shadow-[0_16px_40px_-18px_rgb(0_0_0/55%)] outline-none focus:outline-none dark:shadow-[0_18px_44px_-18px_rgb(0_0_0/80%)]",
+            !hasExplicitWidthClass && "min-w-32",
             className,
           )}
           data-slot="menu-popup"
diff --git a/apps/web/src/components/ui/popover.tsx b/apps/web/src/components/ui/popover.tsx
index e82033cf10960353175d062c1bdb322ec9025382..9534112e4e72c432e36985c0eefe31cc77e66cb9 100644
--- a/apps/web/src/components/ui/popover.tsx
+++ b/apps/web/src/components/ui/popover.tsx
@@ -52,6 +52,8 @@ function PopoverPopup({
             "dropdown-glass relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) rounded-lg text-popover-foreground outline-none transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=calendar]:rounded-xl has-data-[slot=calendar]:before:rounded-[calc(var(--radius-xl)-1px)] data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
             tooltipStyle &&
               "w-fit text-balance rounded-md text-xs shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]",
+            !tooltipStyle &&
+              "shadow-[0_16px_40px_-18px_rgb(0_0_0/55%)] dark:shadow-[0_18px_44px_-18px_rgb(0_0_0/80%)]",
             className,
           )}
           data-slot="popover-popup"
diff --git a/apps/web/src/components/ui/scroll-area.tsx b/apps/web/src/components/ui/scroll-area.tsx
index f409a9c7929fcdc79c69670188583e1c1581ebc1..78f59f7a186ca9b022300da375b32d10e46dbcb3 100644
--- a/apps/web/src/components/ui/scroll-area.tsx
+++ b/apps/web/src/components/ui/scroll-area.tsx
@@ -4,6 +4,23 @@ import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
 
 import { cn } from "~/lib/utils";
 
+function getVirtualizedScrollFadeClassName({ top, bottom }: { top: boolean; bottom: boolean }) {
+  if (!top && !bottom) return undefined;
+
+  return cn(
+    "virtualized-scroll-fade [--fade-size:1.5rem]",
+    top &&
+      bottom &&
+      "[--virtualized-scroll-fade-mask:linear-gradient(to_bottom,transparent,black_var(--fade-size),black_calc(100%-var(--fade-size)),transparent)]",
+    top &&
+      !bottom &&
+      "[--virtualized-scroll-fade-mask:linear-gradient(to_bottom,transparent,black_var(--fade-size))]",
+    !top &&
+      bottom &&
+      "[--virtualized-scroll-fade-mask:linear-gradient(to_bottom,black_calc(100%-var(--fade-size)),transparent)]",
+  );
+}
+
 function ScrollArea({
   className,
   children,
@@ -71,4 +88,4 @@ function ScrollBar({
   );
 }
 
-export { ScrollArea, ScrollBar };
+export { getVirtualizedScrollFadeClassName, ScrollArea, ScrollBar };
diff --git a/apps/web/src/components/ui/select.tsx b/apps/web/src/components/ui/select.tsx
index 98cdf339e1c3d56ed4247d115a006e9d190d8aa8..46b2c8eb1ba0d3579959bfeec55640488ad8bfe7 100644
--- a/apps/web/src/components/ui/select.tsx
+++ b/apps/web/src/components/ui/select.tsx
@@ -26,6 +26,8 @@ const selectTriggerVariants = cva(
           "border-transparent text-secondary-label focus-visible:ring-2 focus-visible:ring-ring data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent [:hover,[data-pressed]]:text-foreground",
       },
       size: {
+        compact:
+          "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-xs before:rounded-[calc(var(--radius-md)-1px)] [&_svg:not([class*='size-'])]:size-3.5",
         default: "min-h-9 px-[calc(--spacing(3)-1px)] sm:min-h-8",
         lg: "min-h-10 px-[calc(--spacing(3)-1px)] sm:min-h-9",
         sm: "min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7",
@@ -150,7 +152,7 @@ function SelectPopup({
           </SelectPrimitive.ScrollUpArrow>
           <div
             className={cn(
-              "dropdown-glass relative h-full rounded-lg",
+              "dropdown-glass relative h-full rounded-lg shadow-[0_16px_40px_-18px_rgb(0_0_0/55%)] dark:shadow-[0_18px_44px_-18px_rgb(0_0_0/80%)]",
               matchTriggerWidth && "min-w-(--anchor-width)",
               popupClassName,
             )}
diff --git a/apps/web/src/components/ui/sidebar.tsx b/apps/web/src/components/ui/sidebar.tsx
index ddc7310430f4adedb7450a5c33760af90151aac2..ce6e4cc78ca98dda56503b5fa2fc5a6d82e98889 100644
--- a/apps/web/src/components/ui/sidebar.tsx
+++ b/apps/web/src/components/ui/sidebar.tsx
@@ -166,6 +166,8 @@ function SidebarProvider({
           {
             "--sidebar-width": SIDEBAR_WIDTH,
             "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            "--workspace-titlebar-content-left":
+              "calc(var(--workspace-controls-left) + var(--workspace-titlebar-control-size) + var(--workspace-titlebar-control-gap))",
             ...style,
           } as React.CSSProperties
         }
diff --git a/apps/web/src/components/ui/skeleton.tsx b/apps/web/src/components/ui/skeleton.tsx
index d9d2b89f7c01ec869c55a20d07ecb04de9e810c2..fb79a7d7744b94b90d533da8ce0f8c1ddc57e000 100644
--- a/apps/web/src/components/ui/skeleton.tsx
+++ b/apps/web/src/components/ui/skeleton.tsx
@@ -4,7 +4,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       className={cn(
-        "relative overflow-hidden rounded-sm bg-muted [--skeleton-highlight:--alpha(var(--color-white)/64%)] after:absolute after:inset-0 after:animate-skeleton after:bg-[linear-gradient(120deg,transparent_40%,var(--skeleton-highlight),transparent_60%)] dark:[--skeleton-highlight:--alpha(var(--color-white)/4%)]",
+        "relative overflow-hidden rounded-sm bg-muted [--skeleton-highlight:--alpha(var(--color-white)/64%)] after:absolute after:inset-0 after:animate-skeleton after:bg-[linear-gradient(120deg,transparent_40%,var(--skeleton-highlight),transparent_60%)] motion-reduce:after:content-none dark:[--skeleton-highlight:--alpha(var(--color-white)/4%)]",
         className,
       )}
       data-slot="skeleton"
diff --git a/apps/web/src/components/ui/toast.tsx b/apps/web/src/components/ui/toast.tsx
index cd23ac2710a154d2919c123e17a49671bca334c6..232349d456eb382065403ae4429cfe28635a91fd 100644
--- a/apps/web/src/components/ui/toast.tsx
+++ b/apps/web/src/components/ui/toast.tsx
@@ -26,7 +26,7 @@ import {
 } from "lucide-react";
 
 import { cn } from "~/lib/utils";
-import { buttonVariants } from "~/components/ui/button";
+import { Button, buttonVariants } from "~/components/ui/button";
 import { useComposerDraftStore } from "~/composerDraftStore";
 import { useCopyToClipboard } from "~/hooks/useCopyToClipboard";
 import { resolveThreadRouteTarget } from "~/threadRoutes";
@@ -124,11 +124,12 @@ function CopyErrorButton({ text }: { text: string }) {
     <Tooltip>
       <TooltipTrigger
         render={
-          <button
+          <Button
+            size="icon-micro"
+            variant="ghost-muted"
             aria-label={label}
-            className="inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-md p-0 text-muted-foreground/80 transition-colors hover:text-muted-foreground"
+            className="[--control-icon-color:currentColor] rounded-md text-muted-foreground/80 hover:bg-transparent hover:text-muted-foreground"
             onClick={() => copyToClipboard(text)}
-            type="button"
           />
         }
       >
@@ -381,24 +382,22 @@ function ToastBodyContent({
         >
           {copyErrorText !== null ? <CopyErrorButton text={copyErrorText} /> : null}
           {additionalActions.map(({ id, props: { className, ...props } }) => (
-            <button
+            <Button
               {...props}
-              className={cn(
-                buttonVariants({ size: "xs", variant: secondaryActionVariant }),
-                className,
-              )}
+              className={className}
               key={id}
+              size="xs"
               type="button"
+              variant={secondaryActionVariant}
             />
           ))}
           {secondaryActionProps ? (
-            <button
+            <Button
               {...secondaryActionRest}
-              className={cn(
-                buttonVariants({ size: "xs", variant: secondaryActionVariant }),
-                secondaryActionClassName,
-              )}
+              className={secondaryActionClassName}
+              size="xs"
               type="button"
+              variant={secondaryActionVariant}
             />
           ) : null}
           {actionProps ? (
diff --git a/apps/web/src/components/ui/toggle.tsx b/apps/web/src/components/ui/toggle.tsx
index 936d4eecabbf6deca4b6dc8b44e8bf7876784681..5bf04adf41a1d298e89a11d95fa1ae1ffffeaa95 100644
--- a/apps/web/src/components/ui/toggle.tsx
+++ b/apps/web/src/components/ui/toggle.tsx
@@ -14,6 +14,8 @@ const toggleVariants = cva(
     },
     variants: {
       size: {
+        compact:
+          "h-7 min-w-7 rounded-md px-[calc(--spacing(1)-1px)] text-xs before:rounded-[calc(var(--radius-md)-1px)] [&_svg:not([class*='size-'])]:size-3.5",
         default: "h-9 min-w-9 px-[calc(--spacing(2)-1px)] sm:h-8 sm:min-w-8",
         lg: "h-10 min-w-10 px-[calc(--spacing(2.5)-1px)] sm:h-9 sm:min-w-9",
         sm: "h-8 min-w-8 px-[calc(--spacing(1.5)-1px)] sm:h-7 sm:min-w-7",
diff --git a/apps/web/src/components/usage/UsagePage.tsx b/apps/web/src/components/usage/UsagePage.tsx
index 5e9034bb2af06431ff2967c9f0b7a0af69041a60..7a5cdd883db2482844cf88287d3ccd18f39b7adc 100644
--- a/apps/web/src/components/usage/UsagePage.tsx
+++ b/apps/web/src/components/usage/UsagePage.tsx
@@ -20,6 +20,7 @@ import {
   makeWindow,
 } from "@t3tools/shared/usageFormat";
 import { ScrollArea } from "../ui/scroll-area";
+import { Button } from "../ui/button";
 import { SidebarInset } from "../ui/sidebar";
 import { WorkspaceBreadcrumb, WorkspaceBreadcrumbItem } from "../WorkspaceBreadcrumb";
 import { COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS } from "../../workspaceTitlebar";
@@ -106,7 +107,7 @@ export function UsagePage() {
         {!isElectron && (
           <header
             className={cn(
-              "workspace-topbar px-3 transition-[padding-left] duration-200 ease-linear motion-reduce:transition-none sm:px-5",
+              "flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center px-3 transition-[padding-left] duration-200 ease-linear motion-reduce:transition-none sm:px-5",
               COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,
             )}
           >
@@ -156,14 +157,14 @@ export function UsagePage() {
                     </button>
                   ))}
                 </div>
-                <button
-                  type="button"
+                <Button
+                  size="icon"
+                  variant="outline"
                   onClick={refreshWindow}
                   aria-label="Refresh usage"
-                  className="cursor-pointer rounded-md border border-border p-2 text-muted-foreground hover:text-foreground"
                 >
                   <RefreshCwIcon className="size-3.5" />
-                </button>
+                </Button>
               </div>
             </div>
 
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 6169e1a643cacd478bbc249ad17d2b206e046a56..4e636eb4ff0f0b181dd0c5f9c3c02dcde25e9b47 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1,6 +1,7 @@
 @import "tailwindcss";
 
 @custom-variant dark (&:is(.dark, .dark *));
+@custom-variant light (&:not(.dark, .dark *));
 /* Window Controls Overlay: active when Electron exposes native titlebar control geometry. */
 @custom-variant wco (&:is(.wco, .wco *));
 
@@ -102,20 +103,13 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
   --workspace-native-controls-inset: 0px;
   --workspace-titlebar-control-size: 1.75rem;
   --workspace-titlebar-control-gap: 0.75rem;
-}
 
-.dark {
-  --app-scrollbar-thumb: rgb(255 255 255 / 8%);
-  --app-scrollbar-thumb-hover: rgb(255 255 255 / 12%);
-  --glass-blur: 16px;
-  --glass-saturation: 1.08;
-}
-
-[data-slot="sidebar-wrapper"] {
-  --workspace-titlebar-content-left: calc(
-    var(--workspace-controls-left) + var(--workspace-titlebar-control-size) +
-      var(--workspace-titlebar-control-gap)
-  );
+  @variant dark {
+    --app-scrollbar-thumb: rgb(255 255 255 / 8%);
+    --app-scrollbar-thumb-hover: rgb(255 255 255 / 12%);
+    --glass-blur: 16px;
+    --glass-saturation: 1.08;
+  }
 }
 
 .wco {
@@ -264,6 +258,179 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
   }
 }
 
+@utility surface-glass {
+  background: color-mix(in srgb, var(--background) var(--glass-opacity), transparent);
+  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+
+  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+    background: var(--background) !important;
+  }
+}
+
+@utility alert-glass {
+  --alert-glass-tint: transparent;
+  background:
+    linear-gradient(
+      color-mix(in srgb, var(--alert-glass-tint) 4%, transparent),
+      color-mix(in srgb, var(--alert-glass-tint) 4%, transparent)
+    ),
+    color-mix(in srgb, var(--background) var(--glass-opacity), transparent) !important;
+  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+
+  &[data-variant="error"] {
+    --alert-glass-tint: var(--destructive);
+  }
+
+  &[data-variant="info"] {
+    --alert-glass-tint: var(--info);
+  }
+
+  &[data-variant="success"] {
+    --alert-glass-tint: var(--success);
+  }
+
+  &[data-variant="warning"] {
+    --alert-glass-tint: var(--warning);
+  }
+
+  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+    background: var(--background) !important;
+  }
+}
+
+@utility dialog-glass {
+  background: color-mix(in srgb, var(--background) var(--glass-opacity), transparent);
+  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+  border-color: color-mix(in srgb, var(--foreground) 10%, transparent);
+  box-shadow: 0 24px 64px -24px rgb(0 0 0 / 65%);
+
+  @variant dark {
+    border-color: color-mix(in srgb, var(--color-white) 8%, transparent);
+    box-shadow:
+      inset 0 1px rgb(255 255 255 / 4%),
+      0 24px 72px -20px rgb(0 0 0 / 90%);
+  }
+
+  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+    background: var(--popover) !important;
+  }
+}
+
+@utility dialog-backdrop {
+  background: color-mix(in srgb, var(--background) 60%, transparent);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+
+  @variant dark {
+    background: color-mix(in srgb, var(--background) 64%, transparent);
+  }
+}
+
+@utility dropdown-glass {
+  background: color-mix(
+    in srgb,
+    var(--popover) 18%,
+    color-mix(in srgb, var(--popover) var(--glass-opacity), transparent)
+  );
+  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+
+  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+    background: var(--popover) !important;
+  }
+}
+
+@utility topbar-scroll-fade {
+  --topbar-scroll-fade-height: 2.5rem;
+  -webkit-mask-image:
+    linear-gradient(
+      to bottom,
+      transparent 0%,
+      rgb(0 0 0 / 10%) 10%,
+      rgb(0 0 0 / 30%) 24%,
+      rgb(0 0 0 / 58%) 42%,
+      rgb(0 0 0 / 82%) 62%,
+      rgb(0 0 0 / 96%) 82%,
+      black 100%
+    ),
+    linear-gradient(black, black), linear-gradient(black, black);
+  -webkit-mask-position: top, bottom, right;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size:
+    100% var(--topbar-scroll-fade-height),
+    100% calc(100% - var(--topbar-scroll-fade-height)),
+    var(--app-scrollbar-width) 100%;
+  mask-image:
+    linear-gradient(
+      to bottom,
+      transparent 0%,
+      rgb(0 0 0 / 10%) 10%,
+      rgb(0 0 0 / 30%) 24%,
+      rgb(0 0 0 / 58%) 42%,
+      rgb(0 0 0 / 82%) 62%,
+      rgb(0 0 0 / 96%) 82%,
+      black 100%
+    ),
+    linear-gradient(black, black), linear-gradient(black, black);
+  mask-position: top, bottom, right;
+  mask-repeat: no-repeat;
+  mask-size:
+    100% var(--topbar-scroll-fade-height),
+    100% calc(100% - var(--topbar-scroll-fade-height)),
+    var(--app-scrollbar-width) 100%;
+
+  @variant sm {
+    --topbar-scroll-fade-height: 3rem;
+  }
+}
+
+/* Virtualizers own their native scroll element, so they cannot use ScrollArea's
+   viewport fade. Keep the scrollbar lane opaque while sharing the same fade
+   contract across those lists. */
+@utility virtualized-scroll-fade {
+  -webkit-mask-image: var(--virtualized-scroll-fade-mask), linear-gradient(black, black);
+  mask-image: var(--virtualized-scroll-fade-mask), linear-gradient(black, black);
+  -webkit-mask-position: left, right;
+  mask-position: left, right;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size:
+    calc(100% - var(--app-scrollbar-width)) 100%,
+    var(--app-scrollbar-width) 100%;
+  mask-size:
+    calc(100% - var(--app-scrollbar-width)) 100%,
+    var(--app-scrollbar-width) 100%;
+}
+
+/* Stage-channel art needs a mask and pseudo-element gradient, so keep the
+   behavior composable without tying it to the global components layer. */
+@utility sidebar-stage-backdrop {
+  --stage-fade: var(--sidebar-stage-fade, var(--app-chrome-background));
+  mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 92%);
+  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 92%);
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      to bottom,
+      transparent 0%,
+      transparent 28%,
+      color-mix(in srgb, var(--stage-fade) 10%, transparent) 40%,
+      color-mix(in srgb, var(--stage-fade) 30%, transparent) 52%,
+      color-mix(in srgb, var(--stage-fade) 58%, transparent) 64%,
+      color-mix(in srgb, var(--stage-fade) 82%, transparent) 75%,
+      color-mix(in srgb, var(--stage-fade) 96%, transparent) 85%,
+      var(--stage-fade) 93%
+    );
+  }
+}
+
 @layer base {
   :root {
     /* Keep the original T3 Code artwork palettes as the defaults. Built-in
@@ -292,12 +459,12 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     --stage-night-glow-highlight: oklch(0.553749 0.176543 271.958);
     --stage-night-glow-secondary: oklch(0.345571 0.117466 273.568);
     --stage-night-sparkle: oklch(0.880867 0.057747 269.011);
-  }
 
-  .dark {
-    --stage-art-top: oklch(0.581473 0.149124 256.9);
-    --stage-art-mid: oklch(0.456509 0.159377 261.945);
-    --stage-art-bottom: oklch(0.291327 0.136578 267.649);
+    @variant dark {
+      --stage-art-top: oklch(0.581473 0.149124 256.9);
+      --stage-art-mid: oklch(0.456509 0.159377 261.945);
+      --stage-art-bottom: oklch(0.291327 0.136578 267.649);
+    }
   }
 
   * {
@@ -311,63 +478,16 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
   ):focus-visible {
     @apply outline-none ring-0;
   }
-  html {
+  html,
+  body {
     background-color: var(--app-chrome-background);
   }
   body {
     @apply text-foreground relative;
-    background-color: var(--app-chrome-background);
   }
 }
 
 @layer components {
-  .sidebar-brand {
-    display: none;
-  }
-
-  .sidebar-brand-stage {
-    display: none;
-  }
-
-  @media (min-width: 48rem) {
-    .sidebar-brand {
-      display: flex;
-    }
-
-    @container sidebar-header (min-width: 15.75rem) {
-      .sidebar-brand-stage {
-        display: inline-flex;
-      }
-    }
-  }
-
-  /* Stage-channel sidebar art; ::after ramps to the sidebar bg color and the
-     mask lets the surface grain show through at the boundary. Panels whose
-     background differs from the app chrome (e.g. sidebar v2) override
-     --sidebar-stage-fade so the art fades into their own surface color. */
-  .sidebar-stage-backdrop {
-    --stage-fade: var(--sidebar-stage-fade, var(--app-chrome-background));
-    mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 92%);
-    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 92%);
-  }
-
-  .sidebar-stage-backdrop::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      transparent 28%,
-      color-mix(in srgb, var(--stage-fade) 10%, transparent) 40%,
-      color-mix(in srgb, var(--stage-fade) 30%, transparent) 52%,
-      color-mix(in srgb, var(--stage-fade) 58%, transparent) 64%,
-      color-mix(in srgb, var(--stage-fade) 82%, transparent) 75%,
-      color-mix(in srgb, var(--stage-fade) 96%, transparent) 85%,
-      var(--stage-fade) 93%
-    );
-  }
-
   /* Each maintainer palette gives the same line art its own material: rose
      vellum, forest drafting paper, marine cyanotype, copper, and violet ink.
      These colors stay deliberately deep at the top edge so the white stage
@@ -380,16 +500,16 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     --stage-art-secondary: oklch(0.763402 0.163836 352.525);
     --stage-art-tertiary: oklch(0.70819 0.180285 311.949);
     --stage-art-line: oklch(0.952158 0.034194 336.179);
-  }
 
-  html.dark[data-theme-id="t3-chat"] {
-    --stage-art-top: oklch(0.540689 0.143665 347.587);
-    --stage-art-mid: oklch(0.396586 0.126592 347.6);
-    --stage-art-bottom: oklch(0.249959 0.079694 340.523);
-    --stage-art-highlight: oklch(0.921297 0.051708 343.229);
-    --stage-art-secondary: oklch(0.667398 0.165674 352.549);
-    --stage-art-tertiary: oklch(0.609315 0.163722 306.315);
-    --stage-art-line: oklch(0.945349 0.036045 341.433);
+    @variant dark {
+      --stage-art-top: oklch(0.540689 0.143665 347.587);
+      --stage-art-mid: oklch(0.396586 0.126592 347.6);
+      --stage-art-bottom: oklch(0.249959 0.079694 340.523);
+      --stage-art-highlight: oklch(0.921297 0.051708 343.229);
+      --stage-art-secondary: oklch(0.667398 0.165674 352.549);
+      --stage-art-tertiary: oklch(0.609315 0.163722 306.315);
+      --stage-art-line: oklch(0.945349 0.036045 341.433);
+    }
   }
 
   html[data-theme-id="grove"] {
@@ -407,23 +527,23 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     --stage-night-secondary: oklch(0.665652 0.109731 156.599);
     --stage-night-tertiary: oklch(0.698651 0.103024 89.828);
     --stage-night-line: oklch(0.945336 0.041923 157.222);
-  }
 
-  html.dark[data-theme-id="grove"] {
-    --stage-art-top: oklch(0.58719 0.09869 157.426);
-    --stage-art-mid: oklch(0.454979 0.079031 159.756);
-    --stage-art-bottom: oklch(0.297856 0.050355 161.167);
-    --stage-art-highlight: oklch(0.952407 0.053872 158.44);
-    --stage-art-secondary: oklch(0.732591 0.120606 155.853);
-    --stage-art-tertiary: oklch(0.716282 0.116547 80.563);
-    --stage-art-line: oklch(0.961577 0.035285 157.03);
-    --stage-night-top: oklch(0.398632 0.065534 158.601);
-    --stage-night-mid: oklch(0.290561 0.049694 160.456);
-    --stage-night-bottom: oklch(0.210147 0.03173 169.818);
-    --stage-night-highlight: oklch(0.866303 0.057526 156.796);
-    --stage-night-secondary: oklch(0.586553 0.093722 157.365);
-    --stage-night-tertiary: oklch(0.6364 0.101769 82.985);
-    --stage-night-line: oklch(0.913292 0.035718 156.976);
+    @variant dark {
+      --stage-art-top: oklch(0.58719 0.09869 157.426);
+      --stage-art-mid: oklch(0.454979 0.079031 159.756);
+      --stage-art-bottom: oklch(0.297856 0.050355 161.167);
+      --stage-art-highlight: oklch(0.952407 0.053872 158.44);
+      --stage-art-secondary: oklch(0.732591 0.120606 155.853);
+      --stage-art-tertiary: oklch(0.716282 0.116547 80.563);
+      --stage-art-line: oklch(0.961577 0.035285 157.03);
+      --stage-night-top: oklch(0.398632 0.065534 158.601);
+      --stage-night-mid: oklch(0.290561 0.049694 160.456);
+      --stage-night-bottom: oklch(0.210147 0.03173 169.818);
+      --stage-night-highlight: oklch(0.866303 0.057526 156.796);
+      --stage-night-secondary: oklch(0.586553 0.093722 157.365);
+      --stage-night-tertiary: oklch(0.6364 0.101769 82.985);
+      --stage-night-line: oklch(0.913292 0.035718 156.976);
+    }
   }
 
   html[data-theme-id="ocean"] {
@@ -434,16 +554,16 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     --stage-art-secondary: oklch(0.788391 0.090856 215.684);
     --stage-art-tertiary: oklch(0.76441 0.099607 187.893);
     --stage-art-line: oklch(0.976025 0.019647 212.543);
-  }
 
-  html.dark[data-theme-id="ocean"] {
-    --stage-art-top: oklch(0.59663 0.089167 233.427);
-    --stage-art-mid: oklch(0.461094 0.084904 243.478);
-    --stage-art-bottom: oklch(0.294818 0.05947 250.526);
-    --stage-art-highlight: oklch(0.952907 0.032224 221.27);
-    --stage-art-secondary: oklch(0.732079 0.09296 224.414);
-    --stage-art-tertiary: oklch(0.720885 0.095495 190.903);
-    --stage-art-line: oklch(0.961039 0.027355 219.756);
+    @variant dark {
+      --stage-art-top: oklch(0.59663 0.089167 233.427);
+      --stage-art-mid: oklch(0.461094 0.084904 243.478);
+      --stage-art-bottom: oklch(0.294818 0.05947 250.526);
+      --stage-art-highlight: oklch(0.952907 0.032224 221.27);
+      --stage-art-secondary: oklch(0.732079 0.09296 224.414);
+      --stage-art-tertiary: oklch(0.720885 0.095495 190.903);
+      --stage-art-line: oklch(0.961039 0.027355 219.756);
+    }
   }
 
   html[data-theme-id="ember"] {
@@ -461,23 +581,23 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     --stage-night-secondary: oklch(0.641705 0.126508 44.376);
     --stage-night-tertiary: oklch(0.538694 0.129931 25.865);
     --stage-night-line: oklch(0.926348 0.046029 58.73);
-  }
 
-  html.dark[data-theme-id="ember"] {
-    --stage-art-top: oklch(0.597533 0.120694 43.455);
-    --stage-art-mid: oklch(0.437763 0.101287 34.86);
-    --stage-art-bottom: oklch(0.264269 0.055858 26.548);
-    --stage-art-highlight: oklch(0.929214 0.042638 55.801);
-    --stage-art-secondary: oklch(0.705592 0.137369 43.176);
-    --stage-art-tertiary: oklch(0.629583 0.158322 24.088);
-    --stage-art-line: oklch(0.945058 0.033906 58.824);
-    --stage-night-top: oklch(0.392352 0.081287 36.444);
-    --stage-night-mid: oklch(0.271305 0.056352 31.135);
-    --stage-night-bottom: oklch(0.182126 0.028154 27.774);
-    --stage-night-highlight: oklch(0.851007 0.061294 53.805);
-    --stage-night-secondary: oklch(0.560789 0.10645 42.953);
-    --stage-night-tertiary: oklch(0.476228 0.106656 24.165);
-    --stage-night-line: oklch(0.884931 0.046607 56.556);
+    @variant dark {
+      --stage-art-top: oklch(0.597533 0.120694 43.455);
+      --stage-art-mid: oklch(0.437763 0.101287 34.86);
+      --stage-art-bottom: oklch(0.264269 0.055858 26.548);
+      --stage-art-highlight: oklch(0.929214 0.042638 55.801);
+      --stage-art-secondary: oklch(0.705592 0.137369 43.176);
+      --stage-art-tertiary: oklch(0.629583 0.158322 24.088);
+      --stage-art-line: oklch(0.945058 0.033906 58.824);
+      --stage-night-top: oklch(0.392352 0.081287 36.444);
+      --stage-night-mid: oklch(0.271305 0.056352 31.135);
+      --stage-night-bottom: oklch(0.182126 0.028154 27.774);
+      --stage-night-highlight: oklch(0.851007 0.061294 53.805);
+      --stage-night-secondary: oklch(0.560789 0.10645 42.953);
+      --stage-night-tertiary: oklch(0.476228 0.106656 24.165);
+      --stage-night-line: oklch(0.884931 0.046607 56.556);
+    }
   }
 
   html[data-theme-id="iris"] {
@@ -488,16 +608,16 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     --stage-art-secondary: oklch(0.745085 0.125892 298.647);
     --stage-art-tertiary: oklch(0.73066 0.167815 340.964);
     --stage-art-line: oklch(0.960278 0.024064 306.969);
-  }
 
-  html.dark[data-theme-id="iris"] {
-    --stage-art-top: oklch(0.57297 0.145973 295.185);
-    --stage-art-mid: oklch(0.419499 0.13752 292.131);
-    --stage-art-bottom: oklch(0.274235 0.095798 286.608);
-    --stage-art-highlight: oklch(0.916698 0.047206 300.224);
-    --stage-art-secondary: oklch(0.670994 0.13095 296.689);
-    --stage-art-tertiary: oklch(0.679357 0.165376 340.439);
-    --stage-art-line: oklch(0.940582 0.032921 299.076);
+    @variant dark {
+      --stage-art-top: oklch(0.57297 0.145973 295.185);
+      --stage-art-mid: oklch(0.419499 0.13752 292.131);
+      --stage-art-bottom: oklch(0.274235 0.095798 286.608);
+      --stage-art-highlight: oklch(0.916698 0.047206 300.224);
+      --stage-art-secondary: oklch(0.670994 0.13095 296.689);
+      --stage-art-tertiary: oklch(0.679357 0.165376 340.439);
+      --stage-art-line: oklch(0.940582 0.032921 299.076);
+    }
   }
 
   :is(html[data-theme-id="t3-chat"], html[data-theme-id="ocean"], html[data-theme-id="iris"]) {
@@ -538,65 +658,6 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     --stage-night-sparkle: var(--stage-night-line);
   }
 
-  .workspace-topbar {
-    display: flex;
-    height: var(--workspace-topbar-height);
-    min-height: var(--workspace-topbar-height);
-    flex-shrink: 0;
-    align-items: center;
-  }
-
-  /* Fade rows themselves as they pass beneath the top chrome. A mask remains
-     visible even when the header and timeline share the same background. */
-  .chat-timeline-scroll-fade,
-  .settings-page-scroll-fade,
-  .pull-requests-scroll-fade {
-    --topbar-scroll-fade-height: 2.5rem;
-    -webkit-mask-image:
-      linear-gradient(
-        to bottom,
-        transparent 0%,
-        rgb(0 0 0 / 10%) 10%,
-        rgb(0 0 0 / 30%) 24%,
-        rgb(0 0 0 / 58%) 42%,
-        rgb(0 0 0 / 82%) 62%,
-        rgb(0 0 0 / 96%) 82%,
-        black 100%
-      ),
-      linear-gradient(black, black), linear-gradient(black, black);
-    -webkit-mask-position: top, bottom, right;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size:
-      100% var(--topbar-scroll-fade-height),
-      100% calc(100% - var(--topbar-scroll-fade-height)),
-      var(--app-scrollbar-width) 100%;
-    mask-image:
-      linear-gradient(
-        to bottom,
-        transparent 0%,
-        rgb(0 0 0 / 10%) 10%,
-        rgb(0 0 0 / 30%) 24%,
-        rgb(0 0 0 / 58%) 42%,
-        rgb(0 0 0 / 82%) 62%,
-        rgb(0 0 0 / 96%) 82%,
-        black 100%
-      ),
-      linear-gradient(black, black), linear-gradient(black, black);
-    mask-position: top, bottom, right;
-    mask-repeat: no-repeat;
-    mask-size:
-      100% var(--topbar-scroll-fade-height),
-      100% calc(100% - var(--topbar-scroll-fade-height)),
-      var(--app-scrollbar-width) 100%;
-  }
-
-  /* The pull request list sits directly under its topbar, so the tall band the chat and
-     settings pages fade under would read as empty padding here. A shorter band keeps the
-     fade while letting the controls start near the chrome. */
-  .pull-requests-scroll-fade {
-    --topbar-scroll-fade-height: 1.5rem;
-  }
-
   @keyframes settings-search-target-pulse {
     0%,
     100% {
@@ -607,56 +668,29 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     }
   }
 
-  .settings-page-scroll-fade div.settings-search-target-pulse,
-  .settings-page-scroll-fade section.settings-search-target-pulse > div:first-child {
+  [data-settings-page-scroll] div.settings-search-target-pulse,
+  [data-settings-page-scroll] section.settings-search-target-pulse > div:first-child {
     animation: settings-search-target-pulse 650ms ease-in-out 2;
     border-radius: 0.75rem;
   }
 
   /* The pulse is the destination indicator; without it (reduced motion), the
      focus outline takes over, so exactly one indicator shows at a time. */
-  .settings-page-scroll-fade .settings-search-target-pulse:focus {
+  [data-settings-page-scroll] .settings-search-target-pulse:focus {
     outline: none;
   }
 
-  .workspace-titlebar-controls {
-    position: absolute;
-    top: var(--workspace-controls-top);
-    right: var(--workspace-controls-right);
-    display: flex;
-    height: var(--workspace-topbar-height);
-    align-items: center;
-    -webkit-app-region: no-drag;
-  }
-
-  .surface-subheader {
-    @apply flex h-10 min-h-10 shrink-0 items-center border-b border-border/60 bg-background;
-  }
-
-  [data-preview-panel-mode="inline"] [data-right-panel-surface-content] [data-surface-subheader] {
-    height: calc(var(--spacing) * 7);
-    min-height: calc(var(--spacing) * 7);
-    margin-bottom: calc(var(--spacing) * 3);
-    border-bottom-color: transparent;
-  }
-
-  .chat-composer-horizontal-inset {
-    padding-inline-start: calc(env(safe-area-inset-left) + 0.75rem);
-    padding-inline-end: calc(env(safe-area-inset-right) + 0.75rem);
-  }
-
-  .chat-composer-glass {
-    background: color-mix(in srgb, var(--background) var(--glass-opacity), transparent);
-    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-  }
-
   .chat-composer-glass-shell {
     --chat-composer-glass-surface: var(--card);
     --chat-composer-outline: rgb(0 0 0 / 8%);
 
-    position: relative;
     isolation: isolate;
+
+    @variant dark {
+      --chat-composer-glass-surface: color-mix(in srgb, var(--background) 96%, var(--color-white));
+      --chat-composer-outline: color-mix(in srgb, var(--color-white) 5%, transparent);
+      --chat-composer-highlight: rgb(255 255 255 / 3%);
+    }
   }
 
   .chat-composer-glass-shell::before {
@@ -716,8 +750,15 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
   }
 
   .chat-composer-glass-host {
-    position: relative;
     box-shadow: 0 12px 28px -18px rgb(0 0 0 / 40%);
+
+    @variant dark {
+      box-shadow: none;
+
+      &::after {
+        box-shadow: inset 0 1px var(--chat-composer-highlight);
+      }
+    }
   }
 
   .chat-composer-glass-host::after {
@@ -747,6 +788,21 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
   .chat-composer-context-strip {
     position: relative;
     isolation: isolate;
+
+    @variant dark {
+      &::before {
+        border-color: rgb(255 255 255 / 7%);
+        background:
+          linear-gradient(
+            to bottom,
+            transparent 0 1rem,
+            rgb(0 0 0 / 18%) 1rem,
+            transparent calc(1rem + 10px)
+          ),
+          rgb(255 255 255 / 2%);
+        box-shadow: 0 14px 32px -18px rgb(0 0 0 / 75%);
+      }
+    }
   }
 
   .chat-composer-context-strip::before {
@@ -762,33 +818,6 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     content: "";
   }
 
-  .dark .chat-composer-glass-shell {
-    --chat-composer-glass-surface: color-mix(in srgb, var(--background) 96%, var(--color-white));
-    --chat-composer-outline: color-mix(in srgb, var(--color-white) 5%, transparent);
-    --chat-composer-highlight: rgb(255 255 255 / 3%);
-  }
-
-  .dark .chat-composer-glass-host {
-    box-shadow: none;
-  }
-
-  .dark .chat-composer-glass-host::after {
-    box-shadow: inset 0 1px var(--chat-composer-highlight);
-  }
-
-  .dark .chat-composer-context-strip::before {
-    border-color: rgb(255 255 255 / 7%);
-    background:
-      linear-gradient(
-        to bottom,
-        transparent 0 1rem,
-        rgb(0 0 0 / 18%) 1rem,
-        transparent calc(1rem + 10px)
-      ),
-      rgb(255 255 255 / 2%);
-    box-shadow: 0 14px 32px -18px rgb(0 0 0 / 75%);
-  }
-
   @supports not (clip-path: shape(from 0 0, line to 1px 1px)) {
     .chat-composer-glass-shell-with-context::before {
       inset-block-end: var(--chat-composer-context-extension);
@@ -806,106 +835,23 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
       backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
     }
 
-    .dark .chat-composer-context-strip::before {
-      background:
-        linear-gradient(
-          to bottom,
-          transparent 0 1rem,
-          rgb(0 0 0 / 18%) 1rem,
-          transparent calc(1rem + 10px)
-        ),
-        linear-gradient(rgb(255 255 255 / 2%), rgb(255 255 255 / 2%)),
-        color-mix(in srgb, var(--chat-composer-glass-surface) var(--glass-opacity), transparent);
+    .chat-composer-context-strip {
+      @variant dark {
+        &::before {
+          background:
+            linear-gradient(
+              to bottom,
+              transparent 0 1rem,
+              rgb(0 0 0 / 18%) 1rem,
+              transparent calc(1rem + 10px)
+            ),
+            linear-gradient(rgb(255 255 255 / 2%), rgb(255 255 255 / 2%)),
+            color-mix(in srgb, var(--chat-composer-glass-surface) var(--glass-opacity), transparent);
+        }
+      }
     }
   }
 
-  .alert-glass {
-    --alert-glass-tint: transparent;
-
-    background:
-      linear-gradient(
-        color-mix(in srgb, var(--alert-glass-tint) 4%, transparent),
-        color-mix(in srgb, var(--alert-glass-tint) 4%, transparent)
-      ),
-      color-mix(in srgb, var(--background) var(--glass-opacity), transparent) !important;
-    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-  }
-
-  .alert-glass[data-variant="error"] {
-    --alert-glass-tint: var(--destructive);
-  }
-
-  .alert-glass[data-variant="info"] {
-    --alert-glass-tint: var(--info);
-  }
-
-  .alert-glass[data-variant="success"] {
-    --alert-glass-tint: var(--success);
-  }
-
-  .alert-glass[data-variant="warning"] {
-    --alert-glass-tint: var(--warning);
-  }
-
-  .dialog-glass {
-    background: color-mix(in srgb, var(--background) var(--glass-opacity), transparent);
-    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-  }
-
-  .dialog-backdrop {
-    background: color-mix(in srgb, var(--background) 60%, transparent);
-    -webkit-backdrop-filter: blur(4px);
-    backdrop-filter: blur(4px);
-  }
-
-  .dropdown-glass {
-    /*
-     * Elevated glass needs a denser tint than broad ambient surfaces. Nesting
-     * the user-controlled mix inside an 18% popover tint preserves the full
-     * opacity setting range (40% -> 51%, 80% -> 84%, 100% -> 100%) while
-     * keeping high-contrast page content from blooming through menus.
-     */
-    background: color-mix(
-      in srgb,
-      var(--popover) 18%,
-      color-mix(in srgb, var(--popover) var(--glass-opacity), transparent)
-    );
-    -webkit-backdrop-filter: blur(var(--glass-blur));
-    backdrop-filter: blur(var(--glass-blur));
-    border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
-    box-shadow: 0 16px 40px -18px rgb(0 0 0 / 55%);
-  }
-
-  .dialog-glass {
-    border-color: color-mix(in srgb, var(--foreground) 10%, transparent);
-    box-shadow: 0 24px 64px -24px rgb(0 0 0 / 65%);
-  }
-
-  .dark .dropdown-glass {
-    box-shadow: 0 18px 44px -18px rgb(0 0 0 / 80%);
-  }
-
-  .dark .model-picker-surface.model-picker-surface {
-    background: color-mix(
-      in srgb,
-      var(--popover) 18%,
-      color-mix(in srgb, var(--popover) var(--glass-opacity), transparent)
-    );
-  }
-
-  .dark .dialog-glass {
-    border-color: color-mix(in srgb, var(--color-white) 8%, transparent);
-    box-shadow:
-      inset 0 1px rgb(255 255 255 / 4%),
-      0 24px 72px -20px rgb(0 0 0 / 90%);
-  }
-
-  .dark .dialog-backdrop {
-    background: color-mix(in srgb, var(--background) 64%, transparent);
-  }
-
   .settings-slider {
     --settings-slider-progress: 0%;
     --settings-slider-fill-offset: 0.5rem;
@@ -1021,32 +967,10 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     }
   }
 
-  @media (min-width: 40rem) {
-    .chat-timeline-scroll-fade,
-    .settings-page-scroll-fade {
-      --topbar-scroll-fade-height: 3rem;
-    }
-
-    .chat-composer-horizontal-inset {
-      padding-inline-start: calc(env(safe-area-inset-left) + 1.25rem);
-      padding-inline-end: calc(env(safe-area-inset-right) + 1.25rem);
-    }
-  }
-
   @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
-    .chat-composer-glass,
-    .alert-glass {
-      background: var(--background) !important;
-    }
-
     .chat-composer-glass-shell::before {
       background: var(--chat-composer-glass-surface);
     }
-
-    .dialog-glass,
-    .dropdown-glass {
-      background: var(--popover) !important;
-    }
   }
 }
 
@@ -1152,15 +1076,12 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
   --terminal-foreground: var(--foreground);
   --terminal-cursor: rgb(38 56 78);
   --terminal-selection-background: rgb(37 63 99 / 20%);
-  --terminal-scrollbar: rgb(0 0 0 / 15%);
-  --terminal-scrollbar-hover: rgb(0 0 0 / 25%);
 
   @variant dark {
     color-scheme: dark;
     /* Keep the workspace in the same neutral-black family as sidebar v2.
        Surfaces lift from this base instead of starting from a milky gray. */
     --background: var(--color-neutral-950);
-    --app-chrome-background: var(--background);
     --surface-raised: var(--secondary);
     --foreground: var(--color-neutral-100);
     --card: color-mix(in srgb, var(--background) 97%, var(--color-white));
@@ -1168,54 +1089,31 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     --popover: color-mix(in srgb, var(--background) 94%, var(--color-white));
     --popover-foreground: var(--color-neutral-100);
     --primary: oklch(0.571 0.21 264);
-    --primary-foreground: var(--color-white);
     --secondary: --alpha(var(--color-white) / 4%);
     --secondary-foreground: var(--color-neutral-100);
     --muted: --alpha(var(--color-white) / 4%);
     --muted-foreground: color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-white));
-    --placeholder: var(--muted-foreground);
-    --secondary-label: var(--muted-foreground);
-    --icon-muted: var(--muted-foreground);
-    --message-surface: var(--accent);
-    --message-foreground: var(--foreground);
-    --message-action: var(--primary);
-    --message-action-foreground: var(--primary-foreground);
-    --message-action-hover: color-mix(in srgb, var(--primary) 90%, var(--background));
     --accent: --alpha(var(--color-white) / 4%);
     --accent-foreground: var(--color-neutral-100);
     --error: color-mix(in srgb, var(--color-red-500) 90%, var(--color-white));
     --error-foreground: var(--color-red-400);
     --error-surface: color-mix(in srgb, var(--error) 16%, transparent);
-    --destructive: var(--error);
     --border: --alpha(var(--color-white) / 6%);
     --input: --alpha(var(--color-white) / 8%);
-    --ring: var(--primary);
-    --destructive-foreground: var(--error-foreground);
-    --info: var(--color-blue-500);
     --info-foreground: var(--color-blue-400);
-    --success: var(--color-emerald-500);
     --success-foreground: var(--color-emerald-400);
-    --warning: var(--color-amber-500);
     --warning-foreground: var(--color-amber-400);
     --warning-surface: color-mix(in srgb, var(--warning) 16%, transparent);
-    --update: var(--primary);
     --update-foreground: var(--color-blue-400);
     --update-surface: color-mix(in srgb, var(--update) 18%, transparent);
     --sidebar: var(--card);
-    --sidebar-foreground: var(--foreground);
-    --sidebar-muted-foreground: var(--muted-foreground);
     --sidebar-control-surface: var(--muted);
     --sidebar-row-hover: var(--accent);
     --sidebar-row-active: var(--accent);
     --sidebar-row-selected: var(--muted);
-    --sidebar-border: var(--border);
     --sidebar-stage-fade: var(--card);
-    --terminal-background: var(--background);
-    --terminal-foreground: var(--foreground);
     --terminal-cursor: rgb(180 203 255);
     --terminal-selection-background: rgb(180 203 255 / 25%);
-    --terminal-scrollbar: rgb(255 255 255 / 10%);
-    --terminal-scrollbar-hover: rgb(255 255 255 / 18%);
   }
 }
 
@@ -1242,32 +1140,28 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
   --sidebar-row-selected: var(--color-white);
   --sidebar-border: var(--color-zinc-200);
   --sidebar-stage-fade: var(--sidebar);
-  background-color: var(--sidebar);
-}
 
-.dark [data-app-sidebar] {
-  --background: #000;
-  --foreground: #f1f3f7;
-  --card: #000;
-  --card-foreground: var(--foreground);
-  --accent: #191a1d;
-  --accent-foreground: #f7f9ff;
-  --muted: #0a0a0a;
-  --muted-foreground: #a3a3a3;
-  --border: rgb(255 255 255 / 8%);
-  --input: rgb(255 255 255 / 18%);
-  --sidebar: var(--card);
-  --sidebar-foreground: var(--foreground);
-  --sidebar-muted-foreground: var(--muted-foreground);
-  --sidebar-control-surface: var(--muted);
-  --sidebar-row-hover: color-mix(in srgb, var(--foreground) 8%, transparent);
-  --sidebar-row-active: color-mix(in srgb, var(--foreground) 11%, transparent);
-  --sidebar-row-selected: color-mix(in srgb, var(--foreground) 7%, transparent);
-  --sidebar-border: var(--border);
-  /* The stage-channel header art must ramp to THIS panel's surface, not the
-     global chrome background, or the fade shows a seam (same rule as the
-     light palette above). */
-  --sidebar-stage-fade: var(--card);
+  @variant dark {
+    --background: #000;
+    --foreground: #f1f3f7;
+    --card: #000;
+    --card-foreground: var(--foreground);
+    --accent: #191a1d;
+    --accent-foreground: #f7f9ff;
+    --muted: #0a0a0a;
+    --muted-foreground: #a3a3a3;
+    --border: rgb(255 255 255 / 8%);
+    --input: rgb(255 255 255 / 18%);
+    --sidebar: var(--card);
+    --sidebar-foreground: var(--foreground);
+    --sidebar-muted-foreground: var(--muted-foreground);
+    --sidebar-control-surface: var(--muted);
+    --sidebar-row-hover: color-mix(in srgb, var(--foreground) 8%, transparent);
+    --sidebar-row-active: color-mix(in srgb, var(--foreground) 11%, transparent);
+    --sidebar-row-selected: color-mix(in srgb, var(--foreground) 7%, transparent);
+    --sidebar-border: var(--border);
+    --sidebar-stage-fade: var(--card);
+  }
 }
 
 /* Theme files are expressed in app color roles and mapped to the existing
@@ -1275,8 +1169,7 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
    compatibility overrides so both navigation implementations receive the
    same palette. Success, info, provider, and channel identity colors remain
    independent; error, warning, and update roles are themeable below. */
-html[data-theme-id],
-html.dark[data-theme-id] {
+html[data-theme-id] {
   --background: var(--app-theme-canvas);
   --app-chrome-background: var(--app-theme-chrome);
   --toolbar-background: var(--app-theme-toolbar);
@@ -1340,8 +1233,6 @@ html.dark[data-theme-id] {
   --terminal-foreground: var(--app-theme-terminal-foreground);
   --terminal-cursor: var(--app-theme-terminal-cursor);
   --terminal-selection-background: var(--app-theme-terminal-selection-background);
-  --terminal-scrollbar: var(--app-theme-terminal-scrollbar);
-  --terminal-scrollbar-hover: var(--app-theme-terminal-scrollbar-hover);
 }
 
 /* T3 Chat's composer is a translucent lift over --chat-background. Route its
@@ -1349,35 +1240,21 @@ html.dark[data-theme-id] {
    another tint from the canvas, which made the dark composer too red. */
 html[data-theme-id] .chat-composer-glass-shell {
   --chat-composer-glass-surface: var(--app-theme-surface-raised);
-}
-
-html[data-theme-id]:not(.dark) .chat-composer-glass-shell {
   --chat-composer-outline: var(--app-theme-toolbar-border);
-}
 
-html.dark[data-theme-id] .chat-composer-glass-shell {
-  --chat-composer-outline: color-mix(in srgb, var(--app-theme-input) 30%, var(--background));
-  --chat-composer-highlight: color-mix(in srgb, var(--app-theme-input) 12%, transparent);
+  @variant dark {
+    --chat-composer-outline: color-mix(in srgb, var(--app-theme-input) 30%, var(--background));
+    --chat-composer-highlight: color-mix(in srgb, var(--app-theme-input) 12%, transparent);
+  }
 }
 
-html.dark[data-theme-id="t3-chat"] .chat-composer-glass-shell {
+html[data-theme-id="t3-chat"] .chat-composer-glass-shell {
   /* T3 Chat's visible composer edge is a dark plum, not the stock translucent
      white outline. Its highlight is derived from --chat-input-gradient. */
-  --chat-composer-outline: #241e28;
-  --chat-composer-highlight: color-mix(in srgb, #432d48 12%, transparent);
-}
-
-html[data-theme-id]:not(.dark) {
-  color-scheme: light;
-}
-
-html.dark[data-theme-id] {
-  color-scheme: dark;
-}
-
-html[data-theme-id] body {
-  background-color: var(--app-chrome-background);
-  color: var(--foreground);
+  @variant dark {
+    --chat-composer-outline: #241e28;
+    --chat-composer-highlight: color-mix(in srgb, #432d48 12%, transparent);
+  }
 }
 
 /* Theme-token dependency probes are restored synchronously, before paint. Keep
@@ -1477,8 +1354,8 @@ html[data-theme-id] [data-chat-header] [data-toolbar-control] {
    toggle's when the trigger renders the toggle, so match both. */
 html[data-theme-id] [data-panel-layout-controls] [data-slot="toggle"],
 html[data-theme-id] [data-panel-layout-controls] [data-slot="tooltip-trigger"],
-html[data-theme-id] .workspace-titlebar-controls [data-slot="toggle"],
-html[data-theme-id] .workspace-titlebar-controls [data-slot="tooltip-trigger"] {
+html[data-theme-id] [data-workspace-titlebar-controls] [data-slot="toggle"],
+html[data-theme-id] [data-workspace-titlebar-controls] [data-slot="tooltip-trigger"] {
   --control-icon-color: var(--toolbar-foreground);
   color: var(--toolbar-foreground);
 }
@@ -1522,19 +1399,23 @@ html[data-theme-id] .chat-markdown .chat-markdown-chrome-action {
 /* T3 Chat renders inline code and compact chat artifacts with its translucent
    secondary surface flattened over the light chat canvas. The raw muted and
    secondary tokens are substantially darker than those visible pixels. */
-html[data-theme-id="t3-chat"]:not(.dark) .chat-markdown :not(pre) > code,
-html[data-theme-id="t3-chat"]:not(.dark) [data-changed-files-state],
-html[data-theme-id="t3-chat"]:not(.dark) [data-changed-files-header] {
-  background-color: var(--message-surface);
-}
+html[data-theme-id="t3-chat"] {
+  @variant light {
+    & .chat-markdown :not(pre) > code,
+    & [data-changed-files-state],
+    & [data-changed-files-header] {
+      background-color: var(--message-surface);
+    }
 
-html[data-theme-id="t3-chat"]:not(.dark) .chat-markdown :not(pre) > code,
-html[data-theme-id="t3-chat"]:not(.dark) [data-changed-files-state] {
-  border-color: transparent;
-}
+    & .chat-markdown :not(pre) > code,
+    & [data-changed-files-state] {
+      border-color: transparent;
+    }
 
-html[data-theme-id="t3-chat"]:not(.dark) .chat-markdown :not(pre) > code {
-  color: var(--message-foreground);
+    & .chat-markdown :not(pre) > code {
+      color: var(--message-foreground);
+    }
+  }
 }
 
 html[data-theme-id] .chat-markdown .chat-markdown-chrome-action:hover,
@@ -1562,40 +1443,19 @@ html[data-theme-id] [data-app-sidebar] {
   --sidebar-row-selected: var(--app-theme-sidebar-row-selected);
   --sidebar-border: var(--app-theme-sidebar-border);
   --sidebar-stage-fade: var(--app-theme-sidebar);
-  background-color: var(--sidebar);
-}
-
-/* Keep the navigation edge as quiet as the standard palettes. Theme files may
-   still use sidebarBorder for controls and internal separators, but the outer
-   divider should not become more prominent just because a palette is vivid. */
-html[data-theme-id] [data-app-sidebar] {
   border-color: color-mix(in srgb, var(--sidebar-foreground) 10%, transparent);
-}
 
-html.dark[data-theme-id] [data-app-sidebar] {
-  border-color: color-mix(in srgb, var(--sidebar-foreground) 8%, transparent);
+  @variant dark {
+    border-color: color-mix(in srgb, var(--sidebar-foreground) 8%, transparent);
+  }
 }
 
 /* T3 Chat's panel divider is deliberately pink, and its resize affordance
    keeps that color while hovered. Do not neutralize this branded edge. */
-html.dark[data-theme-id="t3-chat"] [data-app-sidebar] {
-  border-color: var(--sidebar-border);
-}
-
-.theme-json-key {
-  color: var(--app-theme-accent, var(--color-blue-600));
-}
-
-.theme-json-string {
-  color: var(--app-theme-message-action, var(--color-emerald-600));
-}
-
-.theme-json-number {
-  color: var(--app-theme-secondary-foreground, var(--color-amber-600));
-}
-
-.theme-json-constant {
-  color: var(--app-theme-accent-surface-foreground, var(--color-violet-600));
+html[data-theme-id="t3-chat"] [data-app-sidebar] {
+  @variant dark {
+    border-color: var(--sidebar-border);
+  }
 }
 
 body {
@@ -1715,125 +1575,7 @@ code {
   background: var(--app-scrollbar-thumb-hover);
 }
 
-/* Settings -> Appearance can point the composer at its own face (for example a
-   mono font); default follows the sans stack. Applied on the surface wrapper so
-   the editor and its placeholder inherit together. */
-.composer-editor-surface {
-  font-family: var(--font-composer, var(--font-sans));
-  font-size: var(--font-size-prompt, 0.875rem);
-}
-
-/* Touch browsers zoom the page when a focused field is under 16px, so keep
-   the floor there regardless of the preference. Gated on a coarse pointer:
-   the zoom quirk does not exist on desktop, where a narrow window must not
-   silently override a smaller chosen prompt size. */
-@media (max-width: 39.999rem) and (pointer: coarse) {
-  .composer-editor-surface {
-    font-size: max(var(--font-size-prompt, 1rem), 16px);
-  }
-}
-
-.t3-ghostty-canvas {
-  cursor: text;
-}
-
-.t3-ghostty-scrollbar {
-  position: absolute;
-  z-index: 1;
-  top: 4px;
-  right: 1px;
-  bottom: 4px;
-  width: var(--app-scrollbar-width);
-  cursor: default;
-  touch-action: none;
-}
-
-.t3-ghostty-scrollbar-thumb {
-  position: absolute;
-  top: 0;
-  right: 1px;
-  left: 1px;
-  border-radius: 3px;
-  background: var(--app-scrollbar-thumb);
-  transition: background-color 120ms ease-out;
-}
-
-.t3-ghostty-scrollbar:hover .t3-ghostty-scrollbar-thumb,
-.t3-ghostty-scrollbar:focus-visible .t3-ghostty-scrollbar-thumb {
-  background: var(--app-scrollbar-thumb-hover);
-}
-
-.model-picker-list::-webkit-scrollbar-track {
-  margin-block: 0.5rem;
-}
-
-.model-picker-list-scroll-fade-top,
-.model-picker-list-scroll-fade-bottom {
-  -webkit-mask-image: var(--model-picker-list-scroll-mask), linear-gradient(black, black);
-  -webkit-mask-position: left, right;
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-size:
-    calc(100% - var(--app-scrollbar-width)) 100%,
-    var(--app-scrollbar-width) 100%;
-  mask-image: var(--model-picker-list-scroll-mask), linear-gradient(black, black);
-  mask-position: left, right;
-  mask-repeat: no-repeat;
-  mask-size:
-    calc(100% - var(--app-scrollbar-width)) 100%,
-    var(--app-scrollbar-width) 100%;
-}
-
-.model-picker-list-scroll-fade-top {
-  --model-picker-list-scroll-mask: linear-gradient(to bottom, transparent, black var(--fade-size));
-}
-
-.model-picker-list-scroll-fade-bottom {
-  --model-picker-list-scroll-mask: linear-gradient(
-    to bottom,
-    black calc(100% - var(--fade-size)),
-    transparent
-  );
-}
-
-.model-picker-list-scroll-fade-top.model-picker-list-scroll-fade-bottom {
-  --model-picker-list-scroll-mask: linear-gradient(
-    to bottom,
-    transparent,
-    black var(--fade-size),
-    black calc(100% - var(--fade-size)),
-    transparent
-  );
-}
-
-.turn-chip-strip {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  overscroll-behavior-x: contain;
-}
-
-.turn-chip-strip::-webkit-scrollbar {
-  display: none;
-}
-
-/* Reasoning select -- clickable label surface */
-label:has(> select#reasoning-effort) {
-  position: relative;
-}
-label:has(> select#reasoning-effort) select {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-}
-
 /* Chat markdown rendering */
-.chat-markdown {
-  min-width: 0;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-}
 
 .chat-markdown > :first-child {
   margin-top: 0;
@@ -1945,18 +1687,6 @@ label:has(> select#reasoning-effort) select {
   background-size: 4px 2px;
 }
 
-.chat-markdown .chat-markdown-link-favicon {
-  @apply inline-flex;
-  width: 14px;
-  height: 14px;
-  margin-inline: 0.25em 0.2em;
-  vertical-align: -0.125em;
-}
-
-.chat-markdown .chat-markdown-link-leading {
-  white-space: nowrap;
-}
-
 .chat-markdown blockquote {
   border-left: 2px solid var(--border);
   padding-left: 0.8rem;
@@ -2001,11 +1731,7 @@ label:has(> select#reasoning-effort) select {
   font-size: 0.75rem;
 }
 
-.chat-markdown a.chat-markdown-file-link {
-  color: var(--foreground);
-  text-decoration: none;
-}
-
+.chat-markdown a.chat-markdown-file-link,
 .chat-markdown a.chat-markdown-file-link:hover {
   color: var(--foreground);
   text-decoration: none;
@@ -2023,75 +1749,26 @@ label:has(> select#reasoning-effort) select {
   border-radius: 0.75rem;
   background: var(--muted);
   padding: 0.8rem 0.9rem;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--border) 78%, transparent) transparent;
 }
 
 .chat-markdown pre code {
   border: none;
   background: transparent;
   padding: 0;
-  font-size: 0.75rem;
-}
-
-.chat-markdown pre {
-  scrollbar-width: thin;
-  scrollbar-color: color-mix(in srgb, var(--border) 78%, transparent) transparent;
 }
 
 .chat-markdown pre::-webkit-scrollbar {
   height: 7px;
 }
 
-.chat-markdown pre::-webkit-scrollbar-track {
-  background: transparent;
-}
-
 .chat-markdown pre::-webkit-scrollbar-thumb {
   border-radius: 999px;
   background: color-mix(in srgb, var(--border) 78%, transparent);
 }
 
-.markdown-file-link-tooltip-scroll {
-  scrollbar-width: thin;
-  scrollbar-color: color-mix(in srgb, var(--border) 78%, transparent) transparent;
-}
-
-.markdown-file-link-tooltip-scroll::-webkit-scrollbar {
-  height: 6px;
-}
-
-.markdown-file-link-tooltip-scroll::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.markdown-file-link-tooltip-scroll::-webkit-scrollbar-thumb {
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--border) 78%, transparent);
-}
-
-.chat-markdown .chat-markdown-codeblock {
-  margin: 0.65rem 0;
-  overflow: hidden;
-  border-radius: var(--radius);
-}
-
-.chat-markdown .chat-markdown-codeblock-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.375rem 0.375rem 0 0.75rem;
-  color: color-mix(in srgb, var(--foreground) 72%, transparent);
-}
-
-.chat-markdown .chat-markdown-codeblock-title {
-  display: inline-flex;
-  min-width: 0;
-  align-items: center;
-  gap: 0.4rem;
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
-  font-size: 0.6875rem;
-}
-
+.chat-markdown .chat-markdown-codeblock-header,
 .chat-markdown .chat-markdown-chrome-action {
   color: color-mix(in srgb, var(--foreground) 72%, transparent);
 }
@@ -2167,13 +1844,6 @@ label:has(> select#reasoning-effort) select {
   overflow-wrap: anywhere;
 }
 
-.chat-markdown .chat-markdown-table-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 0.125rem;
-}
-
 /* Prompt-stash save acknowledgement: the new count fades up from just below
    its resting position, once, then stops. One-shot and event-driven (React
    remounts the element by key on each stash) — no continuous animation. */
@@ -2188,19 +1858,6 @@ label:has(> select#reasoning-effort) select {
   }
 }
 
-.prompt-stash-count-enter {
-  animation: prompt-stash-count-enter 180ms ease-out both;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .prompt-stash-count-enter {
-    animation: none;
-  }
-  [data-slot="skeleton"]::after {
-    content: none;
-  }
-}
-
 @keyframes provider-update-pill-countdown {
   from {
     transform: scaleX(1);
@@ -2210,23 +1867,6 @@ label:has(> select#reasoning-effort) select {
   }
 }
 
-.provider-update-pill-progress {
-  animation: provider-update-pill-countdown var(--provider-update-pill-dismiss-ms) linear forwards;
-}
-
-/* Diffs theme bridge (match diff surfaces to app palette) */
-.diff-panel-viewport {
-  background: var(--background);
-}
-
-/* Diffs live directly on the panel canvas. Normal chat code blocks may use a
-   raised code surface, but carrying that fill into the diff creates a card-like
-   rectangle that does not belong in the panel. */
-.diff-render-surface {
-  --code-background: var(--background);
-}
-
-.diff-render-file,
 .diff-render-surface diffs-container {
   border: 0;
   border-radius: 0;
@@ -2307,40 +1947,3 @@ label:has(> select#reasoning-effort) select {
 .ultrathink-chroma {
   animation: ultrathink-chroma-shift 10s linear infinite;
 }
-
-.ultrathink-pill {
-  background:
-    linear-gradient(var(--card), var(--card)) padding-box,
-    var(--ultrathink-spectrum) border-box;
-  background-size:
-    100% 100%,
-    220% 220%;
-  background-position:
-    0 0,
-    0% 50%;
-  animation: ultrathink-rainbow 10s linear infinite;
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card) 82%, transparent);
-}
-
-.ultrathink-word {
-  display: inline-block;
-  color: transparent;
-  background-image: var(--ultrathink-spectrum);
-  background-size: 220% 220%;
-  background-position: 0% 50%;
-  background-clip: text;
-  -webkit-background-clip: text;
-  animation: ultrathink-rainbow 10s linear infinite;
-}
-
-/* Composer chips are non-editable decorators, so the browser skips them when
-   painting text selection; this overlay stands in for the native highlight. */
-.composer-inline-chip[data-composer-chip-selected]::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: 6px;
-  background-color: Highlight;
-  opacity: 0.3;
-  pointer-events: none;
-}
diff --git a/apps/web/src/routes/-chatIndexTitlebar.test.ts b/apps/web/src/routes/-chatIndexTitlebar.test.ts
index 5e74103a5421320de03d3f70d4a20a42492f31c4..803ba787116bc4d1d1b74e24fe1bbcaedc18bfba 100644
--- a/apps/web/src/routes/-chatIndexTitlebar.test.ts
+++ b/apps/web/src/routes/-chatIndexTitlebar.test.ts
@@ -1,4 +1,5 @@
-// @effect-diagnostics nodeBuiltinImport:off - Regression coverage compares the onboarding header with the shared titlebar contract.
+// @effect-diagnostics nodeBuiltinImport:off
+// Regression coverage compares the onboarding header with the shared titlebar contract.
 import * as NodeFS from "node:fs";
 
 import { describe, expect, it } from "vite-plus/test";
@@ -14,7 +15,9 @@ describe("hosted static onboarding header", () => {
 
     const onboardingHeader = routeSource.slice(onboardingStart, onboardingEnd);
 
-    expect(onboardingHeader).toContain("workspace-topbar");
+    expect(onboardingHeader).toContain("h-[var(--workspace-topbar-height)]");
+    expect(onboardingHeader).toContain("min-h-[var(--workspace-topbar-height)]");
+    expect(onboardingHeader).toContain("COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS");
     expect(onboardingHeader).not.toMatch(/(?:^|\s)(?:[\w-]+:)*py-/);
   });
 });
diff --git a/apps/web/src/routes/_chat.index.tsx b/apps/web/src/routes/_chat.index.tsx
index 12bbdf666c43b78f5aba9e21adf15b37275e1f14..4f4da0c751effcc86f03e89cc71823fcdc219ce2 100644
--- a/apps/web/src/routes/_chat.index.tsx
+++ b/apps/web/src/routes/_chat.index.tsx
@@ -145,7 +145,7 @@ function HostedStaticOnboardingState() {
       <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-background">
         <header
           className={cn(
-            "workspace-topbar border-b border-border px-3 transition-[padding-left] duration-200 ease-linear motion-reduce:transition-none sm:px-5",
+            "flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center border-b border-border px-3 transition-[padding-left] duration-200 ease-linear motion-reduce:transition-none sm:px-5",
             COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,
           )}
         >
diff --git a/apps/web/src/routes/_chat.pull-requests.tsx b/apps/web/src/routes/_chat.pull-requests.tsx
index aee41fb696d0f1499f7ff7258c37b1f74116b01e..66d9f0caa5da32342a78775aa208e630c03b7385 100644
--- a/apps/web/src/routes/_chat.pull-requests.tsx
+++ b/apps/web/src/routes/_chat.pull-requests.tsx
@@ -1308,7 +1308,8 @@ function PullRequestsRouteView() {
       // anchor the thread view's controls and the sidebar trigger use, so
       // every titlebar cluster in the app sits one shared inset from its
       // edge.
-      className="workspace-titlebar-controls z-50 mr-px gap-1 [-webkit-app-region:no-drag]"
+      className="absolute top-[var(--workspace-controls-top)] right-[var(--workspace-controls-right)] z-50 mr-px flex h-[var(--workspace-topbar-height)] items-center gap-1 [-webkit-app-region:no-drag]"
+      data-workspace-titlebar-controls
     >
       {panelToggleControls}
     </div>
@@ -1828,7 +1829,7 @@ function PullRequestsColumn({
     <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background">
       <header
         className={cn(
-          "workspace-topbar drag-region gap-1.5 px-3 sm:px-5",
+          "drag-region flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center gap-1.5 px-3 sm:px-5",
           // A closed right panel leaves this column full-width, so its header runs
           // underneath the native window controls on Windows; reserve the inset the
           // way Settings and the chat view do. While the panel is open the column
@@ -1903,7 +1904,7 @@ function PullRequestsColumn({
 
       <div
         ref={scrollRef}
-        className="pull-requests-scroll-fade scrollbar-gutter-both min-h-0 flex-1 overflow-y-auto"
+        className="topbar-scroll-fade scrollbar-gutter-both min-h-0 flex-1 overflow-y-auto [--topbar-scroll-fade-height:1.5rem] sm:[--topbar-scroll-fade-height:1.5rem]"
       >
         {/* The top padding is the fade band's own height (1.5rem here), the same pairing the
             settings page makes: at rest the controls sit fully below the mask, and only
diff --git a/apps/web/src/routes/settings.tsx b/apps/web/src/routes/settings.tsx
index f14793ba54465e902d61f51dd4366817e78f35b0..a4b248c84ed985fa7e902c5319a93d1064604638 100644
--- a/apps/web/src/routes/settings.tsx
+++ b/apps/web/src/routes/settings.tsx
@@ -75,7 +75,7 @@ function SettingsContentLayout() {
         {!isElectron && (
           <header
             className={cn(
-              "workspace-topbar px-3 transition-[padding-left] duration-200 ease-linear motion-reduce:transition-none sm:px-5",
+              "flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center px-3 transition-[padding-left] duration-200 ease-linear motion-reduce:transition-none sm:px-5",
               COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,
             )}
           >
diff --git a/apps/web/src/terminal/ghostty/surface.ts b/apps/web/src/terminal/ghostty/surface.ts
index 8a9c796b948b23cb9f30607605d8c1398d9c5fab..0bb33875568f8f0469e1816e44545b014cd598aa 100644
--- a/apps/web/src/terminal/ghostty/surface.ts
+++ b/apps/web/src/terminal/ghostty/surface.ts
@@ -578,8 +578,7 @@ export class GhosttyTerminalSurface {
     options: GhosttyTerminalSurfaceOptions,
   ): Promise<GhosttyTerminalSurface> {
     const canvas = document.createElement("canvas");
-    canvas.className = "t3-ghostty-canvas";
-    canvas.style.cssText = "display:block;width:100%;height:100%;";
+    canvas.className = "block size-full cursor-text";
     canvas.setAttribute("aria-hidden", "true");
 
     const input = document.createElement("textarea");
@@ -592,14 +591,16 @@ export class GhosttyTerminalSurface {
       "position:absolute;left:4px;top:4px;width:1px;height:1px;opacity:0;padding:0;border:0;resize:none;pointer-events:none;";
 
     const scrollbar = document.createElement("div");
-    scrollbar.className = "t3-ghostty-scrollbar";
+    scrollbar.className =
+      "group absolute top-1 right-px bottom-1 z-1 w-[var(--app-scrollbar-width)] cursor-default touch-none";
     scrollbar.setAttribute("role", "scrollbar");
     scrollbar.setAttribute("aria-label", "Terminal scrollback");
     scrollbar.setAttribute("aria-orientation", "vertical");
     scrollbar.tabIndex = 0;
     scrollbar.hidden = true;
     const scrollbarThumb = document.createElement("div");
-    scrollbarThumb.className = "t3-ghostty-scrollbar-thumb";
+    scrollbarThumb.className =
+      "absolute inset-x-px top-0 rounded-[3px] bg-[var(--app-scrollbar-thumb)] transition-[background-color] duration-[120ms] ease-[ease-out] group-hover:bg-[var(--app-scrollbar-thumb-hover)] group-focus-visible:bg-[var(--app-scrollbar-thumb-hover)]";
     scrollbar.append(scrollbarThumb);
     mount.replaceChildren(canvas, input, scrollbar);
 
-- 
2.54.0