feat(ui)!: redesign shared buttons and migrate app controls

.agents/rules/web/design-system.md

@@ -34,25 +34,35 @@ construction. Browse them at `/app/component/ui` (Foundations → Controls).
   `TabSelector` inside a `HeaderActionGroup` or `ButtonGroup`, and never render
   a tab as a `Button`. A split button (`ButtonGroup` with a menu trigger) is
   its own island; never nest it inside another, including through
-  `SidePanel.HeaderActions`. Enforced by ast-grep `tsx-tabs-not-in-action-group`
+  `SidePanel.HeaderActions`. Use `ButtonGroup.Button` for explicit segments and
+  `variant="secondary" finish="raised"` for action frames; ordinary Buttons stay
+  independent. Enforced by ast-grep `tsx-tabs-not-in-action-group`
   and `tsx-no-button-as-tab`, CI error.
 - **FE-62** Lay out a desktop header as one row: title or breadcrumbs, then
   view tabs on the left; islands on the right in the order filters, view
   options, New, Search (detail views: entity actions, sharing, navigation,
-  detail toggle). Every control in the row is 32px: `Tabs` `md`, `icon-md` for
-  icon-only buttons (16px glyph), `md` for labelled ones (14px glyph), 8px
-  between islands. Filter, sort, group, and download live in the header, never
+  detail toggle). Detail-header groups use `sm` labelled segments and `icon-sm`
+  icon-only segments (28px controls); Drive and Tasks list-header groups use
+  `md` / `icon-md`, matching Tabs, New, and Search. Keep 8px between islands. Filter, sort, group, and download live in the header, never
   in a second toolbar row; only active filter chips sit below it.
-- **FE-63** Style controls only through their props (`variant`, `size`,
-  `fullWidth`, `iconOnly`); `class` on a control is for placement (margin,
+- **FE-63** Style controls only through their props (`variant`, `size`, `finish`,
+  `fullWidth`); `class` on a control is for placement (margin,
   width, order, shrink). Never resize or recolor a control from a wrapper
-  (`[&_button]:size-8`), and don't use `square` for new icon buttons. Enforced
+  (`[&_button]:size-8`); use an explicit `icon-*` size for icon actions. Put glyph
+  sizing on the rendered icon, not on Button or ancestor SVG selectors. Enforced
   for wrappers by ast-grep `tsx-no-descendant-button-styles`, warning.
-- **FE-64** Keep one selected state: desktop view tabs share one rounded track with an inset selected pill; a selected tab and a pressed button share
-  the pressed fill; the inset selected pill has a subtle edge and shadow, while unselected options sit within the shared outer frame. No
-  accent text, underlines, or bespoke tints for selection on desktop. The one
-  exception is the agent composer's Auto/Chat/Code switch: `Tabs variant="track"`,
-  a raised pill sliding along the composer tray's track.
+- Use `variant="primary"` for the main create, save, submit, invite, approve, or continue action. Primary uses the theme accent; the separate accent variant stays removed. Use `neutral` for solid monochrome emphasis: black with white text in light themes, white with black text in dark themes. Home/AI chat, channel, and email Send actions use the shared neutral `SendButton`. Keep the shared New launcher (`ViewCreateButton`) on `variant="secondary" finish="raised"`, and retain secondary, outline, ghost, and danger variants for their own roles.
+- Current application Button usages trial `secondary` instead of `outline`, including shared wrappers and groups. Keep the outline API and canonical Button gallery examples; do not change outline variants on badges, inputs, or other components.
+- Settings actions that previously used inverse-filled `cta` styling use explicit `variant="neutral"`, including creation, runtime setup, billing, invitation, and signature-save actions. Keep existing accent, ghost, and destructive actions in their own roles; do not recolor Button descendants from `SettingsPage`.
+- Primary, neutral, secondary, danger, and success Buttons and ButtonGroup frames automatically use the raised desktop finish and shared glass on touch. Use `finish="flat"` to opt out or `finish="raised"` to frame a ghost/link action. Outline variants, bare controls, and grouped segments always stay flat.
+- Follow the [Button and ButtonGroup contract](ui-primitives.md#button-and-buttongroup)
+  for accessible names, tooltips, sizing, explicit segments, and activation behavior.
+- **FE-64** Components own their state treatments: desktop Tabs share a flat rounded track with an inset selected pill;
+  Button uses the semantic pressed fill for its variant. Mark action toggles with
+  `aria-pressed`, and expansion triggers with `aria-expanded`. Do not restyle
+  buttons as tabs. The agent composer's Auto/Chat/Code switch remains
+  `Tabs variant="track"`, a flat pill sliding along the composer's tray. Keep all
+  tab treatments flat: use borders and selected fills, not raised edges, gradients, or shadows.
 - **FE-65** Components own their touch treatment. Never branch on
   `isTouchDevice()` to choose a tab component or variant; set `Tabs`' `touch`
   to the style that surface already uses on touch.

.agents/rules/web/ui-primitives.md

@@ -32,3 +32,39 @@ Applies to `apps/web/src/components/ui`, including ports from shadcn-solid.
 - In `InputGroup`, keep the input as the single control and place surrounding
   content in `Addon` slots. Use `align` for visual placement so accessible DOM
   order stays independent of layout.
+
+## Button and ButtonGroup
+
+- Keep the shared `Button` and `@ui` import; migrate callers directly instead of
+  adding parallel implementations or legacy-prop adapters. The role and variant
+  policy lives in [the design system rule](design-system.md).
+- Buttons perform actions; navigation uses anchors. `variant="link"` changes
+  appearance, not semantics.
+- Name icon-only actions with `aria-label`. Tooltips are independent: use a string
+  or `{ content, placement, disabled, hotkey, shortcut }`. Do not restore `label`,
+  root-level `hotkey`/`shortcut`, `square`, `depth`, `glass`, or `noTouchResize`.
+- Use `xs` through `xl` for labeled actions and `icon-xs` through `icon-xl` for
+  square actions. Shared minimum heights are 24/28/32/40/48px; labeled controls
+  can grow with their content. Preserve the 36px touch minimum and size rendered
+  glyphs separately. Composer Send, microphone, and attachment controls use
+  `icon-md`, with 20px desktop and 24px touch glyphs.
+- Keep ordinary children in the Button's flex row so trailing carets, truncation,
+  and custom spacing work. Only loading actions need the reserved-content layer.
+  Preserve native disabled behavior and activation guards for polymorphic controls.
+- Compose groups explicitly with `ButtonGroup.Button`; standalone Buttons do not
+  inherit group styling. Segments inherit size and variant unless overridden,
+  remain flat, and own their hover/pressed/disabled states. The frame owns its
+  material once, without a whole-group hover treatment. Group labels use
+  `aria-label`; `CopyButton` joins with `as={ButtonGroup.Button}`.
+- Keep `aria-expanded` on disclosure controls without treating expanded content
+  as a selected action. Button highlights an open popup only when the same
+  trigger has `aria-haspopup`; use `aria-pressed` for genuine action toggles.
+- Keep Button's visible focus outline suppressed in ordinary color modes and
+  retain its forced-colors indicator. Do not remove other controls' focus styling.
+- Keep Tooltip's assembled and compound APIs on the same implementation and
+  clean up closed or detached popups. Do not add document-wide mutation observers
+  to track individual triggers.
+- Keep materials in `src/index.css`; JavaScript only derives accent text contrast
+  and the corresponding state-mix direction. Reset runtime material assignments
+  at theme boundaries so previews resolve their own palette. Do not persist
+  derived Button tokens in authored theme data.

.agents/rules/web/ui.md

@@ -21,6 +21,12 @@ Components, styling, and interaction conventions.
   default palette is disabled via `--color-*: initial` in
   `apps/web/src/index.css`, so classes like `text-red-500` silently render
   nothing. Enforced by ast-grep `tsx-no-raw-tailwind-palette`, CI error.
+- Keep runtime theme tokens together in `apps/web/src/index.css`: one
+  `:root, [data-theme-light]` block for dark defaults, followed by one
+  `[data-theme-light='true']` override block. Keep any narrower root/device
+  conditions inside that theme area. `@theme` registers Tailwind tokens;
+  component utilities and layer/inversion rules keep their own responsibilities.
+  Do not append separate border, Button, glass, or avatar theme blocks elsewhere.
 - **FE-26** Prefer composition over configurability; keep reusable components
   small and free of queries/complex state.
 - **FE-27** Don't add `cursor-pointer` to clickable elements. Enforced by

apps/web/AGENTS.md

@@ -275,7 +275,8 @@ the user's newest account for that app from the last fifteen minutes.
   workflow and mobile controls. Use `ListHeader` for the single-row Email, Drive,
   and Tasks headers: title, filters, view options, New, expandable Search. Put sidebar search in
   `ViewSidebar.Header` so its icon precedes collapse and its field opens above New.
-- Keep desktop headers on the shared `ListHeader` / `HeaderActionGroup` pattern: view `Tabs` as pills after the title, 32px semantic islands with 8px gaps on the right, fully rounded elevated frames, New then expandable Search; preserve touch layouts. Pick each control by role from the [design system rule](../../.agents/rules/web/design-system.md); see [UI conventions](../../docs/agent-guide/ui-conventions.md#top-bars). Never use recessed/inset backgrounds in headers.
+- Keep desktop headers on the shared `ListHeader` / `HeaderActionGroup` pattern: view `Tabs` as pills after the title, `sm`/`icon-sm` semantic islands (28px controls) with 8px gaps on the right, fully rounded frames, New then expandable Search; retain `md` sizing for Tabs, New, and Search. Drive and Tasks list-header filter, layout, sort, and grouping islands use `md`/`icon-md` (32px) to match New and Search. Preserve touch layouts. Compose ButtonGroup actions with explicit `ButtonGroup.Button` segments; use `variant="secondary" finish="raised"` on action frames. Standalone Buttons do not inherit group styling. Pick each control by role from the [design system rule](../../.agents/rules/web/design-system.md); see [UI conventions](../../docs/agent-guide/ui-conventions.md#top-bars). Never use recessed/inset backgrounds in headers.
+- Keep desktop model and effort controls separate: the model selector opens the catalog and the speedometer opens the runtime's advertised slider stops; retain the mobile effort sheet.
 - Passive PR mentions must not retry initial GitHub status failures on remount; preserve confirmed status through refetch errors and keep pending data reads out of their parent Suspense boundary.
 - Keep native booking exit navigation in the route shell, outside page loading boundaries, and use the router so the native hash route stays intact.
 - Diagnose native full reloads with `native_webview_started`, `native_diagnostic_recovered`, and the shared `frontend_instance_id`; use `reloadApp(reason)` for frontend reloads and keep breadcrumbs content-free. Treat `previous_document_*` checkpoints as last-observed lifecycle evidence, never a crash verdict; clear them on logout. `previous_document_last_*` comes from the native navigation breadcrumb (route and entity type, never ids). See [frontend checkpoints](docs/native-reload-diagnostics.md) and `tauri/src-tauri/README.md`.

apps/web/src/components/app/DesktopTitleBar.test.tsx

@@ -9,11 +9,9 @@ import { afterEach, expect, it, vi } from 'vitest';
 import { DesktopTitleBar } from './DesktopTitleBar';
 
 vi.mock('@ui', () => ({
-  Button: (
-    props: JSX.ButtonHTMLAttributes<HTMLButtonElement> & { label: string }
-  ) => (
+  Button: (props: JSX.ButtonHTMLAttributes<HTMLButtonElement>) => (
     <button
-      aria-label={props.label}
+      aria-label={props['aria-label']}
       disabled={props.disabled}
       onClick={props.onClick}
     >

apps/web/src/components/app/DesktopTitleBar.tsx

@@ -19,10 +19,10 @@ export function DesktopTitleBar() {
     >
       <div class="flex items-center gap-1">
         <Button
+          aria-label="Go Back"
+          tooltip={{ content: 'Go Back', hotkey: TOKENS.split.go.back }}
           variant="ghost"
           size="icon-sm"
-          label="Go Back"
-          hotkey={TOKENS.split.go.back}
           disabled={!activeSplit()?.canGoBack()}
           onClick={() => {
             if (splitBackInterceptor()?.()) return;
@@ -32,10 +32,10 @@ export function DesktopTitleBar() {
           <CaretLeftIcon class="size-4" />
         </Button>
         <Button
+          aria-label="Go Forward"
+          tooltip={{ content: 'Go Forward', hotkey: TOKENS.split.go.forward }}
           variant="ghost"
           size="icon-sm"
-          label="Go Forward"
-          hotkey={TOKENS.split.go.forward}
           disabled={!activeSplit()?.canGoForward()}
           onClick={() => activeSplit()?.goForward()}
         >
@@ -51,10 +51,13 @@ export function DesktopTitleBar() {
       <Show when={globalSplitManager()}>
         {(manager) => (
           <Button
+            aria-label="New Split"
+            tooltip={{
+              content: 'New Split',
+              hotkey: TOKENS.global.createNewSplit,
+            }}
             variant="ghost"
             size="icon-sm"
-            label="New Split"
-            hotkey={TOKENS.global.createNewSplit}
             disabled={!manager().canAppendSplit()}
             onClick={() =>
               manager().openWithSplit(

apps/web/src/components/app/FatalError.tsx

@@ -40,14 +40,14 @@ export function FatalError(props: FatalErrorProps) {
 
             <div class="flex flex-row gap-3 justify-center">
               <Button
-                variant="strong"
+                variant="secondary"
                 onClick={() => {
                   window.location.href = window.location.origin + '/app';
                 }}
               >
                 <HomeIcon class="size-4" /> Home
               </Button>
-              <Button variant="outline" onClick={props.reset}>
+              <Button variant="secondary" onClick={props.reset}>
                 <ResetIcon class="size-4" /> Try Again
               </Button>
             </div>

apps/web/src/components/app/FileDownloadHeader.tsx

@@ -10,7 +10,7 @@ export function FileDownloadHeader(props: {
   return (
     <SidePanel.HeaderActions>
       <HeaderActionGroup label="File download">
-        <FileDownloadButton download={props.download} />
+        <FileDownloadButton grouped download={props.download} />
       </HeaderActionGroup>
     </SidePanel.HeaderActions>
   );

apps/web/src/components/app/HeaderActionButton.tsx

@@ -1,5 +1,5 @@
-import { Button, cn } from '@ui';
-import type { JSX, Ref } from 'solid-js';
+import { Button, ButtonGroup, type ButtonSize, cn } from '@ui';
+import { type JSX, type Ref, Show } from 'solid-js';
 
 /** Shared geometry for labeled actions in a block's header. */
 export function HeaderActionButton(props: {
@@ -11,27 +11,37 @@ export function HeaderActionButton(props: {
   disabled?: boolean;
   busy?: boolean;
   class?: string;
+  grouped?: boolean;
+  size?: ButtonSize;
 }) {
+  const Control = props.grouped ? ButtonGroup.Button : Button;
+  const iconOnly = () => props.size?.startsWith('icon-') ?? false;
   return (
-    <Button
+    <Control
       ref={props.ref}
       variant="ghost"
-      size="md"
+      size={props.size ?? (props.grouped ? undefined : 'md')}
       data-header-action
       aria-label={props.label}
       tooltip={props.tooltip}
       onClick={props.onClick}
       disabled={props.disabled}
       aria-busy={props.busy}
       class={cn(
-        '@max-[600px]/split-header:w-8 @max-[600px]/split-header:p-0',
+        !iconOnly() && 'px-2 @max-[600px]/split-header:p-0',
+        !iconOnly() &&
+          (props.grouped && props.size !== 'md'
+            ? '@max-[600px]/split-header:w-7'
+            : '@max-[600px]/split-header:w-8'),
         props.class
       )}
     >
       {props.icon}
-      <span data-header-action-label class="@max-[600px]/split-header:hidden">
-        {props.label}
-      </span>
-    </Button>
+      <Show when={!iconOnly()}>
+        <span data-header-action-label class="@max-[600px]/split-header:hidden">
+          {props.label}
+        </span>
+      </Show>
+    </Control>
   );
 }

apps/web/src/components/app/HeaderActionGroup.tsx

@@ -4,29 +4,31 @@ import { cn } from '@ui/utils/classname';
 import { type ParentProps, Show } from 'solid-js';
 
 /**
- * A desktop header island: related actions share one elevated frame and
- * their buttons stay flat. Touch renders the actions without a frame, and a
+ * A desktop header island: related actions share the secondary raised frame.
+ * Their segments stay flat. Touch renders actions without a frame, and a
  * nested group reuses its parent's frame. An island with no actions renders
  * nothing, so conditional children need no wrapper.
  *
  * @do Group actions by meaning: filters, view options, sharing, navigation, detail toggles.
- * @do Use `size="icon-md"` for icon-only actions and `size="md"` for labelled ones.
+ * @do Use `size="icon-sm"` for icon-only actions; labelled segments inherit `sm`.
  * @do Mark on/off toggles with `aria-pressed`; the pressed fill matches a selected tab.
  * @dont Do not put Tabs, TabSelector, or Buttons acting as tabs in an island.
  * @dont Do not add borders, shadows, or backgrounds to the buttons inside.
  */
 export function HeaderActionGroup(
-  props: ParentProps<{ label: string; class?: string }>
+  props: ParentProps<{ label: string; class?: string; size?: 'sm' | 'md' }>
 ) {
   const group = useButtonGroupContext();
   return (
     <Show when={!isTouchDevice() && !group} fallback={props.children}>
       <ButtonGroup
-        label={props.label}
-        variant="outline"
-        size="md"
+        aria-label={props.label}
+        variant="secondary"
+        finish="raised"
+        size={props.size ?? 'sm'}
         class={cn(
-          'hidden h-8 shrink-0 has-[[data-button]]:inline-flex',
+          'hidden shrink-0 border-0 has-[[data-button]]:inline-flex',
+          props.size === 'md' ? 'min-h-8' : 'min-h-7',
           props.class
         )}
       >