From eb3034d048beb210746999c13a8f065f48c67fdc Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Tue, 2 Jun 2026 14:34:03 +1000
Subject: [PATCH 01/28] refactor(staged): migrate UI to shadcn-svelte +
 Tailwind v4

Land the shadcn-svelte spike: adopt Tailwind v4, bridge design tokens to
the Staged theme, and migrate bespoke chrome to shadcn-svelte primitives.

- Add shadcn-svelte UI components (Button, Input, Select, Checkbox, Label,
  Badge, Dialog, AlertDialog, DropdownMenu, Popover, Alert, Tooltip,
  Context Menu, etc.)
- Replace native inputs, bespoke menus, modals, banners, and theme
  selector with shadcn equivalents; delete the bespoke chrome they replace
- Migrate toasts/alerts to svelte-sonner
- Sweep Button and Tooltip usage across settings, branches, projects,
  sidebar, timeline, sessions, diff, notes, and actions
- Consolidate icon imports onto @lucide/svelte and drop lucide-svelte

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/components.json                   |  20 +
 apps/staged/package.json                      |  14 +-
 apps/staged/src/App.svelte                    | 178 ++--
 apps/staged/src/app.css                       | 157 ++++
 .../alert-dialog/alert-dialog-action.svelte   |  27 +
 .../alert-dialog/alert-dialog-cancel.svelte   |  27 +
 .../alert-dialog/alert-dialog-content.svelte  |  32 +
 .../alert-dialog-description.svelte           |  20 +
 .../alert-dialog/alert-dialog-footer.svelte   |  23 +
 .../alert-dialog/alert-dialog-header.svelte   |  23 +
 .../ui/alert-dialog/alert-dialog-media.svelte |  23 +
 .../alert-dialog/alert-dialog-overlay.svelte  |  20 +
 .../alert-dialog/alert-dialog-portal.svelte   |   7 +
 .../ui/alert-dialog/alert-dialog-title.svelte |  20 +
 .../alert-dialog/alert-dialog-trigger.svelte  |   7 +
 .../ui/alert-dialog/alert-dialog.svelte       |   7 +
 .../lib/components/ui/alert-dialog/index.ts   |  40 +
 .../components/ui/alert/alert-action.svelte   |  20 +
 .../ui/alert/alert-description.svelte         |  23 +
 .../components/ui/alert/alert-title.svelte    |  23 +
 .../src/lib/components/ui/alert/alert.svelte  |  44 +
 .../src/lib/components/ui/alert/index.ts      |  17 +
 .../src/lib/components/ui/badge/badge.svelte  |  50 +
 .../src/lib/components/ui/badge/index.ts      |   2 +
 .../lib/components/ui/button/button.svelte    |  89 ++
 .../src/lib/components/ui/button/index.ts     |  17 +
 .../components/ui/checkbox/checkbox.svelte    |  39 +
 .../src/lib/components/ui/checkbox/index.ts   |   6 +
 .../context-menu-checkbox-item.svelte         |  41 +
 .../context-menu/context-menu-content.svelte  |  28 +
 .../context-menu-group-heading.svelte         |  21 +
 .../ui/context-menu/context-menu-group.svelte |   7 +
 .../ui/context-menu/context-menu-item.svelte  |  27 +
 .../ui/context-menu/context-menu-label.svelte |  27 +
 .../context-menu/context-menu-portal.svelte   |   7 +
 .../context-menu-radio-group.svelte           |  16 +
 .../context-menu-radio-item.svelte            |  35 +
 .../context-menu-separator.svelte             |  17 +
 .../context-menu/context-menu-shortcut.svelte |  23 +
 .../context-menu-sub-content.svelte           |  20 +
 .../context-menu-sub-trigger.svelte           |  29 +
 .../ui/context-menu/context-menu-sub.svelte   |   7 +
 .../context-menu/context-menu-trigger.svelte  |  17 +
 .../ui/context-menu/context-menu.svelte       |   7 +
 .../lib/components/ui/context-menu/index.ts   |  52 ++
 .../components/ui/dialog/dialog-close.svelte  |  11 +
 .../ui/dialog/dialog-content.svelte           |  48 +
 .../ui/dialog/dialog-description.svelte       |  20 +
 .../components/ui/dialog/dialog-footer.svelte |  32 +
 .../components/ui/dialog/dialog-header.svelte |  20 +
 .../ui/dialog/dialog-overlay.svelte           |  20 +
 .../components/ui/dialog/dialog-portal.svelte |   7 +
 .../components/ui/dialog/dialog-title.svelte  |  17 +
 .../ui/dialog/dialog-trigger.svelte           |  11 +
 .../lib/components/ui/dialog/dialog.svelte    |   7 +
 .../src/lib/components/ui/dialog/index.ts     |  34 +
 .../dropdown-menu-checkbox-group.svelte       |  16 +
 .../dropdown-menu-checkbox-item.svelte        |  44 +
 .../dropdown-menu-content.svelte              |  31 +
 .../dropdown-menu-group-heading.svelte        |  22 +
 .../dropdown-menu/dropdown-menu-group.svelte  |   7 +
 .../dropdown-menu/dropdown-menu-item.svelte   |  27 +
 .../dropdown-menu/dropdown-menu-label.svelte  |  27 +
 .../dropdown-menu/dropdown-menu-portal.svelte |   7 +
 .../dropdown-menu-radio-group.svelte          |  16 +
 .../dropdown-menu-radio-item.svelte           |  34 +
 .../dropdown-menu-separator.svelte            |  17 +
 .../dropdown-menu-shortcut.svelte             |  23 +
 .../dropdown-menu-sub-content.svelte          |  20 +
 .../dropdown-menu-sub-trigger.svelte          |  29 +
 .../ui/dropdown-menu/dropdown-menu-sub.svelte |   7 +
 .../dropdown-menu-trigger.svelte              |   7 +
 .../ui/dropdown-menu/dropdown-menu.svelte     |   7 +
 .../lib/components/ui/dropdown-menu/index.ts  |  54 ++
 .../src/lib/components/ui/input/index.ts      |   7 +
 .../src/lib/components/ui/input/input.svelte  |  48 +
 .../src/lib/components/ui/label/index.ts      |   7 +
 .../src/lib/components/ui/label/label.svelte  |  20 +
 .../src/lib/components/ui/popover/index.ts    |  28 +
 .../ui/popover/popover-close.svelte           |   7 +
 .../ui/popover/popover-content.svelte         |  31 +
 .../ui/popover/popover-description.svelte     |  20 +
 .../ui/popover/popover-header.svelte          |  20 +
 .../ui/popover/popover-portal.svelte          |   7 +
 .../ui/popover/popover-title.svelte           |  15 +
 .../ui/popover/popover-trigger.svelte         |  17 +
 .../lib/components/ui/popover/popover.svelte  |   7 +
 .../src/lib/components/ui/select/index.ts     |  37 +
 .../ui/select/select-content.svelte           |  45 +
 .../ui/select/select-group-heading.svelte     |  21 +
 .../components/ui/select/select-group.svelte  |  17 +
 .../components/ui/select/select-item.svelte   |  38 +
 .../components/ui/select/select-label.svelte  |  20 +
 .../components/ui/select/select-portal.svelte |   7 +
 .../select/select-scroll-down-button.svelte   |  23 +
 .../ui/select/select-scroll-up-button.svelte  |  23 +
 .../ui/select/select-separator.svelte         |  18 +
 .../ui/select/select-trigger.svelte           |  29 +
 .../lib/components/ui/select/select.svelte    |  11 +
 .../src/lib/components/ui/separator/index.ts  |   7 +
 .../components/ui/separator/separator.svelte  |  23 +
 .../src/lib/components/ui/sonner/index.ts     |   1 +
 .../lib/components/ui/sonner/sonner.svelte    |  32 +
 .../lib/components/ui/toggle-group/index.ts   |  10 +
 .../ui/toggle-group/toggle-group-item.svelte  |  35 +
 .../ui/toggle-group/toggle-group.svelte       |  75 ++
 .../src/lib/components/ui/toggle/index.ts     |  13 +
 .../lib/components/ui/toggle/toggle.svelte    |  52 ++
 .../src/lib/components/ui/tooltip/index.ts    |  19 +
 .../ui/tooltip/tooltip-content.svelte         |  52 ++
 .../ui/tooltip/tooltip-portal.svelte          |   7 +
 .../ui/tooltip/tooltip-provider.svelte        |   7 +
 .../ui/tooltip/tooltip-trigger.svelte         |   7 +
 .../lib/components/ui/tooltip/tooltip.svelte  |   7 +
 apps/staged/src/lib/components/utils.ts       |  13 +
 .../features/actions/ActionOutputModal.svelte | 395 +++-----
 .../lib/features/agents/AgentSelector.svelte  | 183 +---
 .../lib/features/branches/BranchCard.svelte   | 425 ++++-----
 .../branches/BranchCardActionsBar.svelte      | 882 ++++++++----------
 .../branches/BranchCardHeaderInfo.svelte      | 136 +--
 .../branches/BranchCardPrButton.svelte        | 303 +++---
 .../BranchCardSessionManager.svelte.ts        |  18 +-
 .../branches/ParentBranchCommitsHover.svelte  |  19 +-
 .../RemoteWorkspaceStatusBadge.svelte         |   5 +-
 .../branches/RemoteWorkspaceStatusView.svelte |   3 +-
 .../features/diff/DiffCommentsSection.svelte  | 268 ++----
 .../diff/DiffCommitSessionLauncher.svelte     |  53 +-
 .../features/diff/DiffFileTreeSection.svelte  | 155 +--
 .../src/lib/features/diff/DiffModal.svelte    | 242 ++---
 .../features/diff/DiffReferenceSection.svelte |  95 +-
 .../lib/features/doctor/DoctorCheckRow.svelte | 101 +-
 .../src/lib/features/layout/TopBar.svelte     | 138 +--
 .../src/lib/features/notes/NoteModal.svelte   | 387 +++-----
 .../lib/features/projects/AddRepoModal.svelte | 242 +----
 .../lib/features/projects/BranchPicker.svelte |  39 +-
 .../features/projects/NewProjectForm.svelte   |  84 +-
 .../features/projects/NewProjectModal.svelte  | 144 +--
 .../projects/ProjectContextMenu.svelte        |  61 --
 .../lib/features/projects/ProjectHome.svelte  | 138 ++-
 .../features/projects/ProjectSection.svelte   | 656 ++++++-------
 .../lib/features/projects/ProjectsList.svelte | 402 ++++----
 .../features/projects/ProjectsSidebar.svelte  | 378 ++++----
 .../src/lib/features/projects/RepoCard.svelte | 185 ++--
 .../features/projects/RepoConfigForm.svelte   | 114 +--
 .../features/projects/RepoSearchInput.svelte  |  32 +-
 .../features/projects/ReposListView.svelte    | 245 ++---
 .../projects/SidebarPinnedRepo.svelte         | 302 +++---
 .../lib/features/projects/SplashScreen.svelte |  72 +-
 .../lib/features/projects/SubpathInput.svelte |  38 +-
 .../features/projects/SuggestedRepos.svelte   |  45 +-
 .../projects/workspaceLifecycle.svelte.ts     |  18 +-
 .../lib/features/sessions/HashtagInput.svelte |   5 +-
 .../features/sessions/ImageAttachment.svelte  | 127 +--
 .../features/sessions/NewSessionModal.svelte  | 213 +----
 .../features/sessions/PipelineSteps.svelte    |  95 +-
 .../features/sessions/SessionLauncher.svelte  | 226 ++---
 .../lib/features/sessions/SessionModal.svelte | 876 ++++++-----------
 .../src/lib/features/sessions/hashtagItems.ts |   4 +-
 .../settings/ActionsPreferencesModal.svelte   | 127 ---
 .../settings/ActionsSettingsPanel.svelte      | 281 +++---
 .../settings/DoctorSettingsPanel.svelte       |  43 +-
 .../settings/GeneralSettingsPanel.svelte      | 161 ++--
 .../settings/KeyboardSettingsPanel.svelte     | 134 +--
 .../lib/features/settings/SettingsPage.svelte |  47 +-
 .../settings/ThemeSelectorModal.svelte        | 249 -----
 .../features/timeline/BranchTimeline.svelte   | 342 +++----
 .../features/timeline/ImageViewerModal.svelte | 210 ++---
 .../timeline/TimelineContextMenu.svelte       |  68 --
 .../lib/features/timeline/TimelineRow.svelte  | 750 ++++++++-------
 apps/staged/src/lib/shared/AlertCard.svelte   | 122 ---
 .../src/lib/shared/ConfirmDialog.svelte       | 292 ------
 .../staged/src/lib/shared/DropdownMenu.svelte | 166 ----
 apps/staged/src/lib/shared/FormButton.svelte  |  97 --
 apps/staged/src/lib/shared/FormInput.svelte   |  45 -
 apps/staged/src/lib/shared/FormToggle.svelte  | 109 ---
 .../src/lib/shared/InContentSearch.svelte     | 137 ++-
 apps/staged/src/lib/shared/RepoBadge.svelte   |  14 +-
 apps/staged/src/lib/shared/RepoLabel.svelte   |  19 +-
 apps/staged/src/lib/shared/ToastHost.svelte   |  39 -
 apps/staged/src/lib/shared/alerts.svelte.ts   |  80 --
 .../src/lib/shared/backdropDismiss.test.ts    |  59 --
 apps/staged/src/lib/shared/backdropDismiss.ts |  35 -
 .../src/lib/shared/menu/ContextMenu.svelte    | 139 ---
 .../src/lib/shared/menu/MenuSurface.svelte    | 487 ----------
 .../src/lib/shared/menu/MoreMenu.svelte       | 222 -----
 .../src/lib/shared/menu/actions.test.ts       |  47 -
 apps/staged/src/lib/shared/menu/actions.ts    |  16 -
 .../src/lib/shared/menu/coordination.ts       |  19 -
 apps/staged/src/lib/shared/menu/types.ts      |  26 -
 apps/staged/tsconfig.app.json                 |   7 +-
 apps/staged/tsconfig.json                     |   9 +-
 apps/staged/vite.config.ts                    |   8 +-
 pnpm-lock.yaml                                | 407 +++++++-
 193 files changed, 7442 insertions(+), 8981 deletions(-)
 create mode 100644 apps/staged/components.json
 create mode 100644 apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
 create mode 100644 apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
 create mode 100644 apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
 create mode 100644 apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
 create mode 100644 apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
 create mode 100644 apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
 create mode 100644 apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte
 create mode 100644 apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
 create mode 100644 apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
 create mode 100644 apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
 create mode 100644 apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
 create mode 100644 apps/staged/src/lib/components/ui/alert-dialog/alert-dialog.svelte
 create mode 100644 apps/staged/src/lib/components/ui/alert-dialog/index.ts
 create mode 100644 apps/staged/src/lib/components/ui/alert/alert-action.svelte
 create mode 100644 apps/staged/src/lib/components/ui/alert/alert-description.svelte
 create mode 100644 apps/staged/src/lib/components/ui/alert/alert-title.svelte
 create mode 100644 apps/staged/src/lib/components/ui/alert/alert.svelte
 create mode 100644 apps/staged/src/lib/components/ui/alert/index.ts
 create mode 100644 apps/staged/src/lib/components/ui/badge/badge.svelte
 create mode 100644 apps/staged/src/lib/components/ui/badge/index.ts
 create mode 100644 apps/staged/src/lib/components/ui/button/button.svelte
 create mode 100644 apps/staged/src/lib/components/ui/button/index.ts
 create mode 100644 apps/staged/src/lib/components/ui/checkbox/checkbox.svelte
 create mode 100644 apps/staged/src/lib/components/ui/checkbox/index.ts
 create mode 100644 apps/staged/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
 create mode 100644 apps/staged/src/lib/components/ui/context-menu/context-menu-content.svelte
 create mode 100644 apps/staged/src/lib/components/ui/context-menu/context-menu-group-heading.svelte
 create mode 100644 apps/staged/src/lib/components/ui/context-menu/context-menu-group.svelte
 create mode 100644 apps/staged/src/lib/components/ui/context-menu/context-menu-item.svelte
 create mode 100644 apps/staged/src/lib/components/ui/context-menu/context-menu-label.svelte
 create mode 100644 apps/staged/src/lib/components/ui/context-menu/context-menu-portal.svelte
 create mode 100644 apps/staged/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
 create mode 100644 apps/staged/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
 create mode 100644 apps/staged/src/lib/components/ui/context-menu/context-menu-separator.svelte
 create mode 100644 apps/staged/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
 create mode 100644 apps/staged/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
 create mode 100644 apps/staged/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
 create mode 100644 apps/staged/src/lib/components/ui/context-menu/context-menu-sub.svelte
 create mode 100644 apps/staged/src/lib/components/ui/context-menu/context-menu-trigger.svelte
 create mode 100644 apps/staged/src/lib/components/ui/context-menu/context-menu.svelte
 create mode 100644 apps/staged/src/lib/components/ui/context-menu/index.ts
 create mode 100644 apps/staged/src/lib/components/ui/dialog/dialog-close.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dialog/dialog-content.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dialog/dialog-description.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dialog/dialog-footer.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dialog/dialog-header.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dialog/dialog-overlay.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dialog/dialog-portal.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dialog/dialog-title.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dialog/dialog-trigger.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dialog/dialog.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dialog/index.ts
 create mode 100644 apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
 create mode 100644 apps/staged/src/lib/components/ui/dropdown-menu/index.ts
 create mode 100644 apps/staged/src/lib/components/ui/input/index.ts
 create mode 100644 apps/staged/src/lib/components/ui/input/input.svelte
 create mode 100644 apps/staged/src/lib/components/ui/label/index.ts
 create mode 100644 apps/staged/src/lib/components/ui/label/label.svelte
 create mode 100644 apps/staged/src/lib/components/ui/popover/index.ts
 create mode 100644 apps/staged/src/lib/components/ui/popover/popover-close.svelte
 create mode 100644 apps/staged/src/lib/components/ui/popover/popover-content.svelte
 create mode 100644 apps/staged/src/lib/components/ui/popover/popover-description.svelte
 create mode 100644 apps/staged/src/lib/components/ui/popover/popover-header.svelte
 create mode 100644 apps/staged/src/lib/components/ui/popover/popover-portal.svelte
 create mode 100644 apps/staged/src/lib/components/ui/popover/popover-title.svelte
 create mode 100644 apps/staged/src/lib/components/ui/popover/popover-trigger.svelte
 create mode 100644 apps/staged/src/lib/components/ui/popover/popover.svelte
 create mode 100644 apps/staged/src/lib/components/ui/select/index.ts
 create mode 100644 apps/staged/src/lib/components/ui/select/select-content.svelte
 create mode 100644 apps/staged/src/lib/components/ui/select/select-group-heading.svelte
 create mode 100644 apps/staged/src/lib/components/ui/select/select-group.svelte
 create mode 100644 apps/staged/src/lib/components/ui/select/select-item.svelte
 create mode 100644 apps/staged/src/lib/components/ui/select/select-label.svelte
 create mode 100644 apps/staged/src/lib/components/ui/select/select-portal.svelte
 create mode 100644 apps/staged/src/lib/components/ui/select/select-scroll-down-button.svelte
 create mode 100644 apps/staged/src/lib/components/ui/select/select-scroll-up-button.svelte
 create mode 100644 apps/staged/src/lib/components/ui/select/select-separator.svelte
 create mode 100644 apps/staged/src/lib/components/ui/select/select-trigger.svelte
 create mode 100644 apps/staged/src/lib/components/ui/select/select.svelte
 create mode 100644 apps/staged/src/lib/components/ui/separator/index.ts
 create mode 100644 apps/staged/src/lib/components/ui/separator/separator.svelte
 create mode 100644 apps/staged/src/lib/components/ui/sonner/index.ts
 create mode 100644 apps/staged/src/lib/components/ui/sonner/sonner.svelte
 create mode 100644 apps/staged/src/lib/components/ui/toggle-group/index.ts
 create mode 100644 apps/staged/src/lib/components/ui/toggle-group/toggle-group-item.svelte
 create mode 100644 apps/staged/src/lib/components/ui/toggle-group/toggle-group.svelte
 create mode 100644 apps/staged/src/lib/components/ui/toggle/index.ts
 create mode 100644 apps/staged/src/lib/components/ui/toggle/toggle.svelte
 create mode 100644 apps/staged/src/lib/components/ui/tooltip/index.ts
 create mode 100644 apps/staged/src/lib/components/ui/tooltip/tooltip-content.svelte
 create mode 100644 apps/staged/src/lib/components/ui/tooltip/tooltip-portal.svelte
 create mode 100644 apps/staged/src/lib/components/ui/tooltip/tooltip-provider.svelte
 create mode 100644 apps/staged/src/lib/components/ui/tooltip/tooltip-trigger.svelte
 create mode 100644 apps/staged/src/lib/components/ui/tooltip/tooltip.svelte
 create mode 100644 apps/staged/src/lib/components/utils.ts
 delete mode 100644 apps/staged/src/lib/features/projects/ProjectContextMenu.svelte
 delete mode 100644 apps/staged/src/lib/features/settings/ActionsPreferencesModal.svelte
 delete mode 100644 apps/staged/src/lib/features/settings/ThemeSelectorModal.svelte
 delete mode 100644 apps/staged/src/lib/features/timeline/TimelineContextMenu.svelte
 delete mode 100644 apps/staged/src/lib/shared/AlertCard.svelte
 delete mode 100644 apps/staged/src/lib/shared/ConfirmDialog.svelte
 delete mode 100644 apps/staged/src/lib/shared/DropdownMenu.svelte
 delete mode 100644 apps/staged/src/lib/shared/FormButton.svelte
 delete mode 100644 apps/staged/src/lib/shared/FormInput.svelte
 delete mode 100644 apps/staged/src/lib/shared/FormToggle.svelte
 delete mode 100644 apps/staged/src/lib/shared/ToastHost.svelte
 delete mode 100644 apps/staged/src/lib/shared/alerts.svelte.ts
 delete mode 100644 apps/staged/src/lib/shared/backdropDismiss.test.ts
 delete mode 100644 apps/staged/src/lib/shared/backdropDismiss.ts
 delete mode 100644 apps/staged/src/lib/shared/menu/ContextMenu.svelte
 delete mode 100644 apps/staged/src/lib/shared/menu/MenuSurface.svelte
 delete mode 100644 apps/staged/src/lib/shared/menu/MoreMenu.svelte
 delete mode 100644 apps/staged/src/lib/shared/menu/actions.test.ts
 delete mode 100644 apps/staged/src/lib/shared/menu/actions.ts
 delete mode 100644 apps/staged/src/lib/shared/menu/coordination.ts
 delete mode 100644 apps/staged/src/lib/shared/menu/types.ts

diff --git a/apps/staged/components.json b/apps/staged/components.json
new file mode 100644
index 000000000..cff913d0f
--- /dev/null
+++ b/apps/staged/components.json
@@ -0,0 +1,20 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"tailwind": {
+		"css": "src/app.css",
+		"baseColor": "neutral"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/components/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/components/hooks",
+		"lib": "$lib"
+	},
+	"typescript": true,
+	"registry": "https://shadcn-svelte.com/registry",
+	"style": "vega",
+	"iconLibrary": "lucide",
+	"menuColor": "default",
+	"menuAccent": "subtle"
+}
diff --git a/apps/staged/package.json b/apps/staged/package.json
index 50588dec0..5c53b9e00 100644
--- a/apps/staged/package.json
+++ b/apps/staged/package.json
@@ -5,7 +5,6 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.app.json --fail-on-warnings && tsc -p tsconfig.node.json",
@@ -19,14 +18,26 @@
     "test:watch": "vitest"
   },
   "devDependencies": {
+    "@fontsource-variable/inter": "^5.2.8",
+    "@internationalized/date": "^3.12.2",
+    "@lucide/svelte": "^1.17.0",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@tailwindcss/vite": "^4.0.0",
     "@tauri-apps/cli": "^2.10.0",
     "@tsconfig/svelte": "^5.0.6",
     "@types/node": "^24.10.1",
+    "bits-ui": "^2.18.1",
+    "clsx": "^2.1.1",
     "prettier": "^3.7.4",
     "prettier-plugin-svelte": "^3.4.1",
+    "shadcn-svelte": "^1.2.7",
     "svelte": "^5.46.4",
     "svelte-check": "^4.3.4",
+    "svelte-sonner": "^1.1.1",
+    "tailwind-merge": "^3.6.0",
+    "tailwind-variants": "^3.2.2",
+    "tailwindcss": "^4.0.0",
+    "tw-animate-css": "^1.4.0",
     "typescript": "~5.9.3",
     "vite": "^7.2.4",
     "vitest": "^4.0.18"
@@ -41,7 +52,6 @@
     "@tauri-apps/plugin-store": "^2.4.2",
     "@tauri-apps/plugin-updater": "^2.10.0",
     "ansi-to-html": "^0.7.2",
-    "lucide-svelte": "^0.577.0",
     "marked": "^17.0.1",
     "sanitize-html": "^2.17.0",
     "shiki": "^3.20.0"
diff --git a/apps/staged/src/App.svelte b/apps/staged/src/App.svelte
index b9d61ba49..d5c237946 100644
--- a/apps/staged/src/App.svelte
+++ b/apps/staged/src/App.svelte
@@ -14,7 +14,9 @@
   import ReposListView from './lib/features/projects/ReposListView.svelte';
   import SessionLauncher from './lib/features/sessions/SessionLauncher.svelte';
   import SettingsPage from './lib/features/settings/SettingsPage.svelte';
-  import ToastHost from './lib/shared/ToastHost.svelte';
+  import { Toaster } from '$lib/components/ui/sonner';
+  import { Button } from '$lib/components/ui/button';
+  import { TooltipProvider } from '$lib/components/ui/tooltip';
   import {
     preferences,
     initPreferences,
@@ -442,80 +444,82 @@
 </script>
 
 {#if preferences.loaded}
-  {#if storeIncompat && storeIncompat.kind === 'needs_reset'}
-    <main class="reset-shell">
-      <div class="update-state">
-        <div class="update-card">
-          <div class="update-header">
-            <h1 class="update-title">Update Required</h1>
-            <span class="version-badge new">v{storeIncompat.appVersion}</span>
-          </div>
-          <p>
-            Staged beta updates can require backwards-incompatible changes. The info stored by
-            Staged (session history, notes) will be cleared, but your
-            <strong>git repos and branches are not affected</strong>.
-          </p>
-          <div class="update-footer">
-            <p class="version-hint">
-              Not ready? Install <code>v{storeIncompat.dbAppVersion}</code> instead.
+  <TooltipProvider delayDuration={500} disableHoverableContent>
+    {#if storeIncompat && storeIncompat.kind === 'needs_reset'}
+      <main class="reset-shell">
+        <div class="update-state">
+          <div class="update-card">
+            <div class="update-header">
+              <h1 class="update-title">Update Required</h1>
+              <span class="version-badge new">v{storeIncompat.appVersion}</span>
+            </div>
+            <p>
+              Staged beta updates can require backwards-incompatible changes. The info stored by
+              Staged (session history, notes) will be cleared, but your
+              <strong>git repos and branches are not affected</strong>.
             </p>
-            <div class="update-actions">
-              <button class="close-button" onclick={handleClose}>Close</button>
-              <button class="reset-button" onclick={handleResetStore} disabled={resetting}>
-                {resetting ? 'Resetting…' : 'Reset & Update'}
-              </button>
+            <div class="update-footer">
+              <p class="version-hint">
+                Not ready? Install <code>v{storeIncompat.dbAppVersion}</code> instead.
+              </p>
+              <div class="update-actions">
+                <Button variant="ghost" size="sm" onclick={handleClose}>Close</Button>
+                <Button variant="outline" size="sm" onclick={handleResetStore} disabled={resetting}>
+                  {resetting ? 'Resetting…' : 'Reset & Update'}
+                </Button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </main>
-  {:else if storeIncompat && storeIncompat.kind === 'too_new'}
-    <main class="reset-shell">
-      <div class="update-state">
-        <div class="update-card">
-          <div class="update-header">
-            <h1 class="update-title">Update Staged</h1>
-            <span class="version-badge new">v{storeIncompat.dbAppVersion}</span>
-          </div>
-          <p>
-            This database was last used by a newer version of Staged. Please install
-            <strong>v{storeIncompat.dbAppVersion}</strong> or newer to continue.
-          </p>
-          <div class="update-footer">
-            <div></div>
-            <div class="update-actions">
-              <button class="close-button" onclick={handleClose}>Close</button>
+      </main>
+    {:else if storeIncompat && storeIncompat.kind === 'too_new'}
+      <main class="reset-shell">
+        <div class="update-state">
+          <div class="update-card">
+            <div class="update-header">
+              <h1 class="update-title">Update Staged</h1>
+              <span class="version-badge new">v{storeIncompat.dbAppVersion}</span>
+            </div>
+            <p>
+              This database was last used by a newer version of Staged. Please install
+              <strong>v{storeIncompat.dbAppVersion}</strong> or newer to continue.
+            </p>
+            <div class="update-footer">
+              <div></div>
+              <div class="update-actions">
+                <Button variant="ghost" size="sm" onclick={handleClose}>Close</Button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </main>
-  {:else}
-    <main>
-      <TopBar />
-      <div class="content">
-        {#if storeError}
-          <div class="error-state">
-            <p>{storeError}</p>
-          </div>
-        {:else if navigation.activeView === 'settings'}
-          <SettingsPage />
-        {:else if reposUiEnabled && navigation.showReposList}
-          <ReposListView />
-        {:else if navigation.selectedProjectId}
-          <ProjectHome selectedProjectId={navigation.selectedProjectId} />
-        {:else}
-          <ProjectsList />
-        {/if}
-      </div>
-    </main>
-  {/if}
-
-  {#if showSessionLab}
-    <SessionLauncher onClose={() => (showSessionLab = false)} />
-  {/if}
-
-  <ToastHost />
+      </main>
+    {:else}
+      <main>
+        <TopBar />
+        <div class="content">
+          {#if storeError}
+            <div class="error-state">
+              <p>{storeError}</p>
+            </div>
+          {:else if navigation.activeView === 'settings'}
+            <SettingsPage />
+          {:else if reposUiEnabled && navigation.showReposList}
+            <ReposListView />
+          {:else if navigation.selectedProjectId}
+            <ProjectHome selectedProjectId={navigation.selectedProjectId} />
+          {:else}
+            <ProjectsList />
+          {/if}
+        </div>
+      </main>
+    {/if}
+
+    {#if showSessionLab}
+      <SessionLauncher onClose={() => (showSessionLab = false)} />
+    {/if}
+
+    <Toaster position="bottom-right" visibleToasts={4} duration={8000} closeButton expand />
+  </TooltipProvider>
 {/if}
 
 <style>
@@ -629,42 +633,4 @@
     gap: 8px;
     flex-shrink: 0;
   }
-
-  .close-button {
-    padding: 7px 16px;
-    background: none;
-    border: 1px solid var(--border-muted);
-    border-radius: 8px;
-    color: var(--text-muted);
-    font-size: var(--size-sm);
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-
-  .close-button:hover {
-    border-color: var(--border-emphasis);
-    color: var(--text-primary);
-  }
-
-  .reset-button {
-    padding: 7px 16px;
-    background-color: var(--ui-accent);
-    border: none;
-    border-radius: 8px;
-    color: var(--bg-deepest);
-    font-size: var(--size-sm);
-    font-weight: 600;
-    cursor: pointer;
-    transition: background-color 0.15s ease;
-  }
-
-  .reset-button:hover {
-    background-color: var(--ui-accent-hover);
-  }
-
-  .reset-button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
 </style>
diff --git a/apps/staged/src/app.css b/apps/staged/src/app.css
index 7738112fd..b2c40ded6 100644
--- a/apps/staged/src/app.css
+++ b/apps/staged/src/app.css
@@ -1,3 +1,11 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import 'shadcn-svelte/tailwind.css';
+@import '@fontsource-variable/inter';
+/*---break---
+ */
+@custom-variant dark (&:is(.dark *));
+
 /**
  * Global styles for Staged
  *
@@ -111,6 +119,57 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* ── Token bridge: shadcn-svelte semantic tokens → Staged adaptive tokens.
+ *    Step 3 of the shadcn-svelte spike. The right-hand sides resolve through
+ *    Staged's :root (above), which createAdaptiveTheme() rewrites per Shiki
+ *    theme, so the cascade carries theme switches into shadcn primitives
+ *    without any JS bridge. The @theme inline block below preserves the
+ *    existing `--color-X → var(--X)` mapping shadcn-svelte's init wrote, so
+ *    Tailwind utilities (`bg-background`, `text-primary-foreground`, …)
+ *    inherit through this :root indirection unchanged. ── */
+:root {
+  --background: var(--bg-primary);
+  --foreground: var(--text-primary);
+  --card: var(--bg-elevated);
+  --card-foreground: var(--text-primary);
+  --popover: var(--bg-elevated);
+  --popover-foreground: var(--text-primary);
+  --primary: var(--ui-accent);
+  --primary-foreground: var(
+    --bg-deepest
+  ); /* contrast on light Shiki themes is the spike's open question */
+  --secondary: var(--bg-elevated);
+  --secondary-foreground: var(--text-primary);
+  --muted: var(--bg-hover);
+  --muted-foreground: var(--text-muted);
+  --accent: var(--bg-hover);
+  --accent-foreground: var(--text-primary);
+  --destructive: var(--ui-danger);
+  --destructive-foreground: var(--text-primary);
+  --border: var(--border-muted);
+  --input: var(--border-muted);
+  --ring: var(--border-emphasis);
+  --radius: 4px; /* invented — Staged has no radius token */
+
+  /* ── Gaps: shadcn tokens with no Staged analogue. Button (Step 4) does not
+   *    consume these; later shadcn primitives (sidebar, chart) will force a
+   *    decision — extend theme.ts or alias statically. Left as the oklch
+   *    defaults shadcn-svelte init wrote so the file still type-checks. ── */
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
 html,
 body {
   overflow: hidden;
@@ -171,3 +230,101 @@ mark.search-match-current {
   margin-right: 2px;
   flex-shrink: 0;
 }
+
+/*---break---
+ */
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+/*---break---
+ */
+
+@theme inline {
+  --font-sans: 'Inter Variable', sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+/*---break---
+ */
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}
diff --git a/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
new file mode 100644
index 000000000..fbb3f768a
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+  import {
+    buttonVariants,
+    type ButtonVariant,
+    type ButtonSize,
+  } from '$lib/components/ui/button/index.js';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    variant = 'default',
+    size = 'default',
+    ...restProps
+  }: AlertDialogPrimitive.ActionProps & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+  } = $props();
+</script>
+
+<AlertDialogPrimitive.Action
+  bind:ref
+  data-slot="alert-dialog-action"
+  class={cn(buttonVariants({ variant, size }), 'cn-alert-dialog-action', className)}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
new file mode 100644
index 000000000..322b143a3
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+  import {
+    buttonVariants,
+    type ButtonVariant,
+    type ButtonSize,
+  } from '$lib/components/ui/button/index.js';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    variant = 'outline',
+    size = 'default',
+    ...restProps
+  }: AlertDialogPrimitive.CancelProps & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+  } = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+  bind:ref
+  data-slot="alert-dialog-cancel"
+  class={cn(buttonVariants({ variant, size }), 'cn-alert-dialog-cancel', className)}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
new file mode 100644
index 000000000..1e582a049
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+  import AlertDialogPortal from './alert-dialog-portal.svelte';
+  import AlertDialogOverlay from './alert-dialog-overlay.svelte';
+  import { cn, type WithoutChild, type WithoutChildrenOrChild } from '$lib/components/utils.js';
+  import type { ComponentProps } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    size = 'default',
+    portalProps,
+    ...restProps
+  }: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+    size?: 'default' | 'sm';
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;
+  } = $props();
+</script>
+
+<AlertDialogPortal {...portalProps}>
+  <AlertDialogOverlay />
+  <AlertDialogPrimitive.Content
+    bind:ref
+    data-slot="alert-dialog-content"
+    data-size={size}
+    class={cn(
+      'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 gap-6 rounded-xl p-6 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none',
+      className
+    )}
+    {...restProps}
+  />
+</AlertDialogPortal>
diff --git a/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
new file mode 100644
index 000000000..2ac5cb436
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+  bind:ref
+  data-slot="alert-dialog-description"
+  class={cn(
+    'text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3',
+    className
+  )}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
new file mode 100644
index 000000000..c64bc3fac
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/components/utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="alert-dialog-footer"
+  class={cn(
+    'cn-alert-dialog-footer flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
new file mode 100644
index 000000000..a462f3ed0
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="alert-dialog-header"
+  class={cn(
+    'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte
new file mode 100644
index 000000000..f7c0f9823
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="alert-dialog-media"
+  class={cn(
+    "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
new file mode 100644
index 000000000..c20edb260
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: AlertDialogPrimitive.OverlayProps = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+  bind:ref
+  data-slot="alert-dialog-overlay"
+  class={cn(
+    'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50',
+    className
+  )}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
new file mode 100644
index 000000000..fad8f9ef9
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+
+  let { ...restProps }: AlertDialogPrimitive.PortalProps = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
new file mode 100644
index 000000000..d69f7abf5
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: AlertDialogPrimitive.TitleProps = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+  bind:ref
+  data-slot="alert-dialog-title"
+  class={cn(
+    'text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+    className
+  )}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
new file mode 100644
index 000000000..5566a6977
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+
+  let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog.svelte b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog.svelte
new file mode 100644
index 000000000..94f27e4f4
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+
+  let { open = $bindable(false), ...restProps }: AlertDialogPrimitive.RootProps = $props();
+</script>
+
+<AlertDialogPrimitive.Root bind:open {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/alert-dialog/index.ts b/apps/staged/src/lib/components/ui/alert-dialog/index.ts
new file mode 100644
index 000000000..5adb4d0d1
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/alert-dialog/index.ts
@@ -0,0 +1,40 @@
+import Root from './alert-dialog.svelte';
+import Portal from './alert-dialog-portal.svelte';
+import Trigger from './alert-dialog-trigger.svelte';
+import Title from './alert-dialog-title.svelte';
+import Action from './alert-dialog-action.svelte';
+import Cancel from './alert-dialog-cancel.svelte';
+import Footer from './alert-dialog-footer.svelte';
+import Header from './alert-dialog-header.svelte';
+import Overlay from './alert-dialog-overlay.svelte';
+import Content from './alert-dialog-content.svelte';
+import Description from './alert-dialog-description.svelte';
+import Media from './alert-dialog-media.svelte';
+
+export {
+  Root,
+  Title,
+  Action,
+  Cancel,
+  Portal,
+  Footer,
+  Header,
+  Trigger,
+  Overlay,
+  Content,
+  Description,
+  Media,
+  //
+  Root as AlertDialog,
+  Title as AlertDialogTitle,
+  Action as AlertDialogAction,
+  Cancel as AlertDialogCancel,
+  Portal as AlertDialogPortal,
+  Footer as AlertDialogFooter,
+  Header as AlertDialogHeader,
+  Trigger as AlertDialogTrigger,
+  Overlay as AlertDialogOverlay,
+  Content as AlertDialogContent,
+  Description as AlertDialogDescription,
+  Media as AlertDialogMedia,
+};
diff --git a/apps/staged/src/lib/components/ui/alert/alert-action.svelte b/apps/staged/src/lib/components/ui/alert/alert-action.svelte
new file mode 100644
index 000000000..fb92bdc0f
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/alert/alert-action.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="alert-action"
+  class={cn('absolute top-2.5 right-3', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/apps/staged/src/lib/components/ui/alert/alert-description.svelte b/apps/staged/src/lib/components/ui/alert/alert-description.svelte
new file mode 100644
index 000000000..9b08f6ccc
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/alert/alert-description.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="alert-description"
+  class={cn(
+    'text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/apps/staged/src/lib/components/ui/alert/alert-title.svelte b/apps/staged/src/lib/components/ui/alert/alert-title.svelte
new file mode 100644
index 000000000..06f602dbd
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/alert/alert-title.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="alert-title"
+  class={cn(
+    'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/apps/staged/src/lib/components/ui/alert/alert.svelte b/apps/staged/src/lib/components/ui/alert/alert.svelte
new file mode 100644
index 000000000..4479d74bf
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/alert/alert.svelte
@@ -0,0 +1,44 @@
+<script lang="ts" module>
+  import { type VariantProps, tv } from 'tailwind-variants';
+
+  export const alertVariants = tv({
+    base: "grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full",
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  });
+
+  export type AlertVariant = VariantProps<typeof alertVariants>['variant'];
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    variant = 'default',
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: AlertVariant;
+  } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="alert"
+  role="alert"
+  class={cn(alertVariants({ variant }), className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/apps/staged/src/lib/components/ui/alert/index.ts b/apps/staged/src/lib/components/ui/alert/index.ts
new file mode 100644
index 000000000..9bd4a42fc
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/alert/index.ts
@@ -0,0 +1,17 @@
+import Root from './alert.svelte';
+import Description from './alert-description.svelte';
+import Title from './alert-title.svelte';
+import Action from './alert-action.svelte';
+export { alertVariants, type AlertVariant } from './alert.svelte';
+
+export {
+  Root,
+  Description,
+  Title,
+  Action,
+  //
+  Root as Alert,
+  Description as AlertDescription,
+  Title as AlertTitle,
+  Action as AlertAction,
+};
diff --git a/apps/staged/src/lib/components/ui/badge/badge.svelte b/apps/staged/src/lib/components/ui/badge/badge.svelte
new file mode 100644
index 000000000..556647793
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/badge/badge.svelte
@@ -0,0 +1,50 @@
+<script lang="ts" module>
+  import { type VariantProps, tv } from 'tailwind-variants';
+
+  export const badgeVariants = tv({
+    base: 'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none',
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+        destructive:
+          'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
+        outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  });
+
+  export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+</script>
+
+<script lang="ts">
+  import type { HTMLAnchorAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    href,
+    class: className,
+    variant = 'default',
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAnchorAttributes> & {
+    variant?: BadgeVariant;
+  } = $props();
+</script>
+
+<svelte:element
+  this={href ? 'a' : 'span'}
+  bind:this={ref}
+  data-slot="badge"
+  {href}
+  class={cn(badgeVariants({ variant }), className)}
+  {...restProps}
+>
+  {@render children?.()}
+</svelte:element>
diff --git a/apps/staged/src/lib/components/ui/badge/index.ts b/apps/staged/src/lib/components/ui/badge/index.ts
new file mode 100644
index 000000000..f05fb87fa
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/badge/index.ts
@@ -0,0 +1,2 @@
+export { default as Badge } from './badge.svelte';
+export { badgeVariants, type BadgeVariant } from './badge.svelte';
diff --git a/apps/staged/src/lib/components/ui/button/button.svelte b/apps/staged/src/lib/components/ui/button/button.svelte
new file mode 100644
index 000000000..4122fdeac
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,89 @@
+<script lang="ts" module>
+  import { cn, type WithElementRef } from '$lib/components/utils.js';
+  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+  import { type VariantProps, tv } from 'tailwind-variants';
+
+  export const buttonVariants = tv({
+    base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/80',
+        outline:
+          'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+        ghost:
+          'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        destructive:
+          'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default:
+          'h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: 'h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',
+        lg: 'h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        icon: 'size-9',
+        'icon-xs':
+          "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm':
+          'size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  });
+
+  export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+  export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+
+  export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+    WithElementRef<HTMLAnchorAttributes> & {
+      variant?: ButtonVariant;
+      size?: ButtonSize;
+    };
+</script>
+
+<script lang="ts">
+  let {
+    class: className,
+    variant = 'default',
+    size = 'default',
+    ref = $bindable(null),
+    href = undefined,
+    type = 'button',
+    disabled,
+    children,
+    ...restProps
+  }: ButtonProps = $props();
+</script>
+
+{#if href}
+  <a
+    bind:this={ref}
+    data-slot="button"
+    class={cn(buttonVariants({ variant, size }), className)}
+    href={disabled ? undefined : href}
+    aria-disabled={disabled}
+    role={disabled ? 'link' : undefined}
+    tabindex={disabled ? -1 : undefined}
+    {...restProps}
+  >
+    {@render children?.()}
+  </a>
+{:else}
+  <button
+    bind:this={ref}
+    data-slot="button"
+    class={cn(buttonVariants({ variant, size }), className)}
+    {type}
+    {disabled}
+    {...restProps}
+  >
+    {@render children?.()}
+  </button>
+{/if}
diff --git a/apps/staged/src/lib/components/ui/button/index.ts b/apps/staged/src/lib/components/ui/button/index.ts
new file mode 100644
index 000000000..66c1087b8
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/button/index.ts
@@ -0,0 +1,17 @@
+import Root, {
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+  buttonVariants,
+} from './button.svelte';
+
+export {
+  Root,
+  type ButtonProps as Props,
+  //
+  Root as Button,
+  buttonVariants,
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+};
diff --git a/apps/staged/src/lib/components/ui/checkbox/checkbox.svelte b/apps/staged/src/lib/components/ui/checkbox/checkbox.svelte
new file mode 100644
index 000000000..17a64de45
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/checkbox/checkbox.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+  import { cn, type WithoutChildrenOrChild } from '$lib/components/utils.js';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import MinusIcon from '@lucide/svelte/icons/minus';
+
+  let {
+    ref = $bindable(null),
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+  bind:ref
+  data-slot="checkbox"
+  class={cn(
+    'border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border shadow-xs transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
+    className
+  )}
+  bind:checked
+  bind:indeterminate
+  {...restProps}
+>
+  {#snippet children({ checked, indeterminate })}
+    <div
+      data-slot="checkbox-indicator"
+      class="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
+    >
+      {#if checked}
+        <CheckIcon />
+      {:else if indeterminate}
+        <MinusIcon />
+      {/if}
+    </div>
+  {/snippet}
+</CheckboxPrimitive.Root>
diff --git a/apps/staged/src/lib/components/ui/checkbox/index.ts b/apps/staged/src/lib/components/ui/checkbox/index.ts
new file mode 100644
index 000000000..ba3b7d76a
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/checkbox/index.ts
@@ -0,0 +1,6 @@
+import Root from './checkbox.svelte';
+export {
+  Root,
+  //
+  Root as Checkbox,
+};
diff --git a/apps/staged/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte b/apps/staged/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
new file mode 100644
index 000000000..d9ee07bdf
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn, type WithoutChildrenOrChild } from '$lib/components/utils.js';
+  import type { Snippet } from 'svelte';
+  import CheckIcon from '@lucide/svelte/icons/check';
+
+  let {
+    ref = $bindable(null),
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    class: className,
+    inset,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChildrenOrChild<ContextMenuPrimitive.CheckboxItemProps> & {
+    inset?: boolean;
+    children?: Snippet;
+  } = $props();
+</script>
+
+<ContextMenuPrimitive.CheckboxItem
+  bind:ref
+  bind:checked
+  bind:indeterminate
+  data-slot="context-menu-checkbox-item"
+  data-inset={inset}
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+>
+  {#snippet children({ checked })}
+    <span class="absolute right-2 pointer-events-none">
+      {#if checked}
+        <CheckIcon />
+      {/if}
+    </span>
+    {@render childrenProp?.()}
+  {/snippet}
+</ContextMenuPrimitive.CheckboxItem>
diff --git a/apps/staged/src/lib/components/ui/context-menu/context-menu-content.svelte b/apps/staged/src/lib/components/ui/context-menu/context-menu-content.svelte
new file mode 100644
index 000000000..c80271eb4
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/context-menu/context-menu-content.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+  import ContextMenuPortal from './context-menu-portal.svelte';
+  import type { ComponentProps } from 'svelte';
+  import type { WithoutChildrenOrChild } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    portalProps,
+    class: className,
+    ...restProps
+  }: ContextMenuPrimitive.ContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof ContextMenuPortal>>;
+  } = $props();
+</script>
+
+<ContextMenuPortal {...portalProps}>
+  <ContextMenuPrimitive.Content
+    bind:ref
+    data-slot="context-menu-content"
+    class={cn(
+      'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-md p-1 shadow-md ring-1 duration-100 z-50 overflow-x-hidden overflow-y-auto outline-none',
+      className
+    )}
+    {...restProps}
+  />
+</ContextMenuPortal>
diff --git a/apps/staged/src/lib/components/ui/context-menu/context-menu-group-heading.svelte b/apps/staged/src/lib/components/ui/context-menu/context-menu-group-heading.svelte
new file mode 100644
index 000000000..98f5cb558
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/context-menu/context-menu-group-heading.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    ...restProps
+  }: ContextMenuPrimitive.GroupHeadingProps & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<ContextMenuPrimitive.GroupHeading
+  bind:ref
+  data-slot="context-menu-group-heading"
+  data-inset={inset}
+  class={cn('text-foreground px-2 py-1.5 text-sm font-medium data-inset:ps-8', className)}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/context-menu/context-menu-group.svelte b/apps/staged/src/lib/components/ui/context-menu/context-menu-group.svelte
new file mode 100644
index 000000000..19f694bb5
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/context-menu/context-menu-group.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let { ref = $bindable(null), ...restProps }: ContextMenuPrimitive.GroupProps = $props();
+</script>
+
+<ContextMenuPrimitive.Group bind:ref data-slot="context-menu-group" {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/context-menu/context-menu-item.svelte b/apps/staged/src/lib/components/ui/context-menu/context-menu-item.svelte
new file mode 100644
index 000000000..931f92a3c
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/context-menu/context-menu-item.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    variant = 'default',
+    ...restProps
+  }: ContextMenuPrimitive.ItemProps & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+  } = $props();
+</script>
+
+<ContextMenuPrimitive.Item
+  bind:ref
+  data-slot="context-menu-item"
+  data-inset={inset}
+  data-variant={variant}
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/context-menu/context-menu-label.svelte b/apps/staged/src/lib/components/ui/context-menu/context-menu-label.svelte
new file mode 100644
index 000000000..1cb2c8287
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/context-menu/context-menu-label.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/components/utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="context-menu-label"
+  data-inset={inset}
+  class={cn(
+    'text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8 data-inset:pl-8',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/apps/staged/src/lib/components/ui/context-menu/context-menu-portal.svelte b/apps/staged/src/lib/components/ui/context-menu/context-menu-portal.svelte
new file mode 100644
index 000000000..2897cc0b4
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/context-menu/context-menu-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let { ...restProps }: ContextMenuPrimitive.PortalProps = $props();
+</script>
+
+<ContextMenuPrimitive.Portal {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/context-menu/context-menu-radio-group.svelte b/apps/staged/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
new file mode 100644
index 000000000..b1abdf318
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(''),
+    ...restProps
+  }: ContextMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<ContextMenuPrimitive.RadioGroup
+  bind:ref
+  bind:value
+  data-slot="context-menu-radio-group"
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/context-menu/context-menu-radio-item.svelte b/apps/staged/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
new file mode 100644
index 000000000..87ccff39a
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn, type WithoutChild } from '$lib/components/utils.js';
+  import CheckIcon from '@lucide/svelte/icons/check';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChild<ContextMenuPrimitive.RadioItemProps> & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<ContextMenuPrimitive.RadioItem
+  bind:ref
+  data-slot="context-menu-radio-item"
+  data-inset={inset}
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+>
+  {#snippet children({ checked })}
+    <span class="absolute right-2 pointer-events-none">
+      {#if checked}
+        <CheckIcon />
+      {/if}
+    </span>
+    {@render childrenProp?.({ checked })}
+  {/snippet}
+</ContextMenuPrimitive.RadioItem>
diff --git a/apps/staged/src/lib/components/ui/context-menu/context-menu-separator.svelte b/apps/staged/src/lib/components/ui/context-menu/context-menu-separator.svelte
new file mode 100644
index 000000000..b0a519810
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/context-menu/context-menu-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: ContextMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<ContextMenuPrimitive.Separator
+  bind:ref
+  data-slot="context-menu-separator"
+  class={cn('bg-border -mx-1 my-1 h-px', className)}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/context-menu/context-menu-shortcut.svelte b/apps/staged/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
new file mode 100644
index 000000000..63da87336
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/components/utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="context-menu-shortcut"
+  class={cn(
+    'text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</span>
diff --git a/apps/staged/src/lib/components/ui/context-menu/context-menu-sub-content.svelte b/apps/staged/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
new file mode 100644
index 000000000..67b87b216
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: ContextMenuPrimitive.SubContentProps = $props();
+</script>
+
+<ContextMenuPrimitive.SubContent
+  bind:ref
+  data-slot="context-menu-sub-content"
+  class={cn(
+    'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-md border p-1 shadow-lg duration-100',
+    className
+  )}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte b/apps/staged/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
new file mode 100644
index 000000000..0c73857bb
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn, type WithoutChild } from '$lib/components/utils.js';
+  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    children,
+    ...restProps
+  }: WithoutChild<ContextMenuPrimitive.SubTriggerProps> & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<ContextMenuPrimitive.SubTrigger
+  bind:ref
+  data-slot="context-menu-sub-trigger"
+  data-inset={inset}
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+  <ChevronRightIcon class="ml-auto" />
+</ContextMenuPrimitive.SubTrigger>
diff --git a/apps/staged/src/lib/components/ui/context-menu/context-menu-sub.svelte b/apps/staged/src/lib/components/ui/context-menu/context-menu-sub.svelte
new file mode 100644
index 000000000..0ba70c9b6
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/context-menu/context-menu-sub.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let { open = $bindable(false), ...restProps }: ContextMenuPrimitive.SubProps = $props();
+</script>
+
+<ContextMenuPrimitive.Sub bind:open {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/context-menu/context-menu-trigger.svelte b/apps/staged/src/lib/components/ui/context-menu/context-menu-trigger.svelte
new file mode 100644
index 000000000..2948d838c
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/context-menu/context-menu-trigger.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: ContextMenuPrimitive.TriggerProps = $props();
+</script>
+
+<ContextMenuPrimitive.Trigger
+  bind:ref
+  data-slot="context-menu-trigger"
+  class={cn('cn-context-menu-trigger select-none', className)}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/context-menu/context-menu.svelte b/apps/staged/src/lib/components/ui/context-menu/context-menu.svelte
new file mode 100644
index 000000000..4b6908e23
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/context-menu/context-menu.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let { open = $bindable(false), ...restProps }: ContextMenuPrimitive.RootProps = $props();
+</script>
+
+<ContextMenuPrimitive.Root bind:open {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/context-menu/index.ts b/apps/staged/src/lib/components/ui/context-menu/index.ts
new file mode 100644
index 000000000..77acbbc4e
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/context-menu/index.ts
@@ -0,0 +1,52 @@
+import Root from './context-menu.svelte';
+import Sub from './context-menu-sub.svelte';
+import Portal from './context-menu-portal.svelte';
+import Trigger from './context-menu-trigger.svelte';
+import Group from './context-menu-group.svelte';
+import RadioGroup from './context-menu-radio-group.svelte';
+import Item from './context-menu-item.svelte';
+import GroupHeading from './context-menu-group-heading.svelte';
+import Content from './context-menu-content.svelte';
+import Shortcut from './context-menu-shortcut.svelte';
+import RadioItem from './context-menu-radio-item.svelte';
+import Separator from './context-menu-separator.svelte';
+import SubContent from './context-menu-sub-content.svelte';
+import SubTrigger from './context-menu-sub-trigger.svelte';
+import CheckboxItem from './context-menu-checkbox-item.svelte';
+import Label from './context-menu-label.svelte';
+
+export {
+  Root,
+  Sub,
+  Portal,
+  Item,
+  GroupHeading,
+  Label,
+  Group,
+  Trigger,
+  Content,
+  Shortcut,
+  Separator,
+  RadioItem,
+  SubContent,
+  SubTrigger,
+  RadioGroup,
+  CheckboxItem,
+  //
+  Root as ContextMenu,
+  Sub as ContextMenuSub,
+  Portal as ContextMenuPortal,
+  Item as ContextMenuItem,
+  GroupHeading as ContextMenuGroupHeading,
+  Group as ContextMenuGroup,
+  Content as ContextMenuContent,
+  Trigger as ContextMenuTrigger,
+  Shortcut as ContextMenuShortcut,
+  RadioItem as ContextMenuRadioItem,
+  Separator as ContextMenuSeparator,
+  RadioGroup as ContextMenuRadioGroup,
+  SubContent as ContextMenuSubContent,
+  SubTrigger as ContextMenuSubTrigger,
+  CheckboxItem as ContextMenuCheckboxItem,
+  Label as ContextMenuLabel,
+};
diff --git a/apps/staged/src/lib/components/ui/dialog/dialog-close.svelte b/apps/staged/src/lib/components/ui/dialog/dialog-close.svelte
new file mode 100644
index 000000000..2f313f6f6
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dialog/dialog-close.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    type = 'button',
+    ...restProps
+  }: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {type} {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/dialog/dialog-content.svelte b/apps/staged/src/lib/components/ui/dialog/dialog-content.svelte
new file mode 100644
index 000000000..ae078876b
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dialog/dialog-content.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import DialogPortal from './dialog-portal.svelte';
+  import type { Snippet } from 'svelte';
+  import * as Dialog from './index.js';
+  import { cn, type WithoutChildrenOrChild } from '$lib/components/utils.js';
+  import type { ComponentProps } from 'svelte';
+  import { Button } from '$lib/components/ui/button/index.js';
+  import XIcon from '@lucide/svelte/icons/x';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    portalProps,
+    children,
+    showCloseButton = true,
+    ...restProps
+  }: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
+    children: Snippet;
+    showCloseButton?: boolean;
+  } = $props();
+</script>
+
+<DialogPortal {...portalProps}>
+  <Dialog.Overlay />
+  <DialogPrimitive.Content
+    bind:ref
+    data-slot="dialog-content"
+    class={cn(
+      'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none',
+      className
+    )}
+    {...restProps}
+  >
+    {@render children?.()}
+    {#if showCloseButton}
+      <DialogPrimitive.Close data-slot="dialog-close">
+        {#snippet child({ props })}
+          <Button variant="ghost" class="absolute top-4 right-4" size="icon-sm" {...props}>
+            <XIcon />
+            <span class="sr-only">Close</span>
+          </Button>
+        {/snippet}
+      </DialogPrimitive.Close>
+    {/if}
+  </DialogPrimitive.Content>
+</DialogPortal>
diff --git a/apps/staged/src/lib/components/ui/dialog/dialog-description.svelte b/apps/staged/src/lib/components/ui/dialog/dialog-description.svelte
new file mode 100644
index 000000000..12f271206
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dialog/dialog-description.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+  bind:ref
+  data-slot="dialog-description"
+  class={cn(
+    'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3',
+    className
+  )}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/dialog/dialog-footer.svelte b/apps/staged/src/lib/components/ui/dialog/dialog-footer.svelte
new file mode 100644
index 000000000..ae94220ad
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/components/utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { Button } from '$lib/components/ui/button/index.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    showCloseButton = false,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    showCloseButton?: boolean;
+  } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="dialog-footer"
+  class={cn('gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+  {...restProps}
+>
+  {@render children?.()}
+  {#if showCloseButton}
+    <DialogPrimitive.Close>
+      {#snippet child({ props })}
+        <Button variant="outline" {...props}>Close</Button>
+      {/snippet}
+    </DialogPrimitive.Close>
+  {/if}
+</div>
diff --git a/apps/staged/src/lib/components/ui/dialog/dialog-header.svelte b/apps/staged/src/lib/components/ui/dialog/dialog-header.svelte
new file mode 100644
index 000000000..29983f64b
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dialog/dialog-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="dialog-header"
+  class={cn('gap-2 flex flex-col', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/apps/staged/src/lib/components/ui/dialog/dialog-overlay.svelte b/apps/staged/src/lib/components/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 000000000..f17b74dcf
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+  bind:ref
+  data-slot="dialog-overlay"
+  class={cn(
+    'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50',
+    className
+  )}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/dialog/dialog-portal.svelte b/apps/staged/src/lib/components/ui/dialog/dialog-portal.svelte
new file mode 100644
index 000000000..4a9048a8d
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+
+  let { ...restProps }: DialogPrimitive.PortalProps = $props();
+</script>
+
+<DialogPrimitive.Portal {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/dialog/dialog-title.svelte b/apps/staged/src/lib/components/ui/dialog/dialog-title.svelte
new file mode 100644
index 000000000..5889f5cc0
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dialog/dialog-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+  bind:ref
+  data-slot="dialog-title"
+  class={cn('leading-none font-medium', className)}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/dialog/dialog-trigger.svelte b/apps/staged/src/lib/components/ui/dialog/dialog-trigger.svelte
new file mode 100644
index 000000000..434c574e1
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dialog/dialog-trigger.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    type = 'button',
+    ...restProps
+  }: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {type} {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/dialog/dialog.svelte b/apps/staged/src/lib/components/ui/dialog/dialog.svelte
new file mode 100644
index 000000000..88b4799ad
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dialog/dialog.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+
+  let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
+</script>
+
+<DialogPrimitive.Root bind:open {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/dialog/index.ts b/apps/staged/src/lib/components/ui/dialog/index.ts
new file mode 100644
index 000000000..d2dd4a373
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,34 @@
+import Root from './dialog.svelte';
+import Portal from './dialog-portal.svelte';
+import Title from './dialog-title.svelte';
+import Footer from './dialog-footer.svelte';
+import Header from './dialog-header.svelte';
+import Overlay from './dialog-overlay.svelte';
+import Content from './dialog-content.svelte';
+import Description from './dialog-description.svelte';
+import Trigger from './dialog-trigger.svelte';
+import Close from './dialog-close.svelte';
+
+export {
+  Root,
+  Title,
+  Portal,
+  Footer,
+  Header,
+  Trigger,
+  Overlay,
+  Content,
+  Description,
+  Close,
+  //
+  Root as Dialog,
+  Title as DialogTitle,
+  Portal as DialogPortal,
+  Footer as DialogFooter,
+  Header as DialogHeader,
+  Trigger as DialogTrigger,
+  Overlay as DialogOverlay,
+  Content as DialogContent,
+  Description as DialogDescription,
+  Close as DialogClose,
+};
diff --git a/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
new file mode 100644
index 000000000..6b4d728f0
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable([]),
+    ...restProps
+  }: DropdownMenuPrimitive.CheckboxGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxGroup
+  bind:ref
+  bind:value
+  data-slot="dropdown-menu-checkbox-group"
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
new file mode 100644
index 000000000..022670832
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import MinusIcon from '@lucide/svelte/icons/minus';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import { cn, type WithoutChildrenOrChild } from '$lib/components/utils.js';
+  import type { Snippet } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    class: className,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+    children?: Snippet;
+  } = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+  bind:ref
+  bind:checked
+  bind:indeterminate
+  data-slot="dropdown-menu-checkbox-item"
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+>
+  {#snippet children({ checked, indeterminate })}
+    <span
+      class="absolute right-2 flex items-center justify-center pointer-events-none"
+      data-slot="dropdown-menu-checkbox-item-indicator"
+    >
+      {#if indeterminate}
+        <MinusIcon />
+      {:else if checked}
+        <CheckIcon />
+      {/if}
+    </span>
+    {@render childrenProp?.()}
+  {/snippet}
+</DropdownMenuPrimitive.CheckboxItem>
diff --git a/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
new file mode 100644
index 000000000..f1df8a5b9
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { cn, type WithoutChildrenOrChild } from '$lib/components/utils.js';
+  import DropdownMenuPortal from './dropdown-menu-portal.svelte';
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import type { ComponentProps } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    sideOffset = 4,
+    align = 'start',
+    portalProps,
+    class: className,
+    ...restProps
+  }: DropdownMenuPrimitive.ContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DropdownMenuPortal>>;
+  } = $props();
+</script>
+
+<DropdownMenuPortal {...portalProps}>
+  <DropdownMenuPrimitive.Content
+    bind:ref
+    data-slot="dropdown-menu-content"
+    {sideOffset}
+    {align}
+    class={cn(
+      'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-md p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-(--bits-dropdown-menu-anchor-width) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden',
+      className
+    )}
+    {...restProps}
+  />
+</DropdownMenuPortal>
diff --git a/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
new file mode 100644
index 000000000..cf8bca9ec
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+  import type { ComponentProps } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    ...restProps
+  }: ComponentProps<typeof DropdownMenuPrimitive.GroupHeading> & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<DropdownMenuPrimitive.GroupHeading
+  bind:ref
+  data-slot="dropdown-menu-group-heading"
+  data-inset={inset}
+  class={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8', className)}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
new file mode 100644
index 000000000..bf972af46
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+  let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Group bind:ref data-slot="dropdown-menu-group" {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
new file mode 100644
index 000000000..ff70760e4
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { cn } from '$lib/components/utils.js';
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    variant = 'default',
+    ...restProps
+  }: DropdownMenuPrimitive.ItemProps & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+  } = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+  bind:ref
+  data-slot="dropdown-menu-item"
+  data-inset={inset}
+  data-variant={variant}
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
new file mode 100644
index 000000000..7ad9f8728
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/components/utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="dropdown-menu-label"
+  data-inset={inset}
+  class={cn(
+    'text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8 data-[inset]:pl-8',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
new file mode 100644
index 000000000..130c20f79
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+  let { ...restProps }: DropdownMenuPrimitive.PortalProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
new file mode 100644
index 000000000..74523661b
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    ...restProps
+  }: DropdownMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioGroup
+  bind:ref
+  bind:value
+  data-slot="dropdown-menu-radio-group"
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
new file mode 100644
index 000000000..daf69402d
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import { cn, type WithoutChild } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+  bind:ref
+  data-slot="dropdown-menu-radio-item"
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+>
+  {#snippet children({ checked })}
+    <span
+      class="absolute right-2 flex items-center justify-center pointer-events-none"
+      data-slot="dropdown-menu-radio-item-indicator"
+    >
+      {#if checked}
+        <CheckIcon />
+      {/if}
+    </span>
+    {@render childrenProp?.({ checked })}
+  {/snippet}
+</DropdownMenuPrimitive.RadioItem>
diff --git a/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
new file mode 100644
index 000000000..974163fed
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+  bind:ref
+  data-slot="dropdown-menu-separator"
+  class={cn('bg-border -mx-1 my-1 h-px', className)}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
new file mode 100644
index 000000000..c4b2b7f82
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="dropdown-menu-shortcut"
+  class={cn(
+    'text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</span>
diff --git a/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
new file mode 100644
index 000000000..89179751c
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DropdownMenuPrimitive.SubContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubContent
+  bind:ref
+  data-slot="dropdown-menu-sub-content"
+  class={cn(
+    'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 w-auto',
+    className
+  )}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
new file mode 100644
index 000000000..31cded2dc
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    children,
+    ...restProps
+  }: DropdownMenuPrimitive.SubTriggerProps & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+  bind:ref
+  data-slot="dropdown-menu-sub-trigger"
+  data-inset={inset}
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+  <ChevronRightIcon class="ml-auto" />
+</DropdownMenuPrimitive.SubTrigger>
diff --git a/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
new file mode 100644
index 000000000..02f5f63a5
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+  let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.SubProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Sub bind:open {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
new file mode 100644
index 000000000..7409c7773
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+  let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.TriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger bind:ref data-slot="dropdown-menu-trigger" {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
new file mode 100644
index 000000000..5c2776c5b
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+  let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.RootProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Root bind:open {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/dropdown-menu/index.ts b/apps/staged/src/lib/components/ui/dropdown-menu/index.ts
new file mode 100644
index 000000000..b6bce25d8
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,54 @@
+import Root from './dropdown-menu.svelte';
+import Sub from './dropdown-menu-sub.svelte';
+import CheckboxGroup from './dropdown-menu-checkbox-group.svelte';
+import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
+import Content from './dropdown-menu-content.svelte';
+import Group from './dropdown-menu-group.svelte';
+import Item from './dropdown-menu-item.svelte';
+import Label from './dropdown-menu-label.svelte';
+import RadioGroup from './dropdown-menu-radio-group.svelte';
+import RadioItem from './dropdown-menu-radio-item.svelte';
+import Separator from './dropdown-menu-separator.svelte';
+import Shortcut from './dropdown-menu-shortcut.svelte';
+import Trigger from './dropdown-menu-trigger.svelte';
+import SubContent from './dropdown-menu-sub-content.svelte';
+import SubTrigger from './dropdown-menu-sub-trigger.svelte';
+import GroupHeading from './dropdown-menu-group-heading.svelte';
+import Portal from './dropdown-menu-portal.svelte';
+
+export {
+  CheckboxGroup,
+  CheckboxItem,
+  Content,
+  Portal,
+  Root as DropdownMenu,
+  CheckboxGroup as DropdownMenuCheckboxGroup,
+  CheckboxItem as DropdownMenuCheckboxItem,
+  Content as DropdownMenuContent,
+  Portal as DropdownMenuPortal,
+  Group as DropdownMenuGroup,
+  Item as DropdownMenuItem,
+  Label as DropdownMenuLabel,
+  RadioGroup as DropdownMenuRadioGroup,
+  RadioItem as DropdownMenuRadioItem,
+  Separator as DropdownMenuSeparator,
+  Shortcut as DropdownMenuShortcut,
+  Sub as DropdownMenuSub,
+  SubContent as DropdownMenuSubContent,
+  SubTrigger as DropdownMenuSubTrigger,
+  Trigger as DropdownMenuTrigger,
+  GroupHeading as DropdownMenuGroupHeading,
+  Group,
+  GroupHeading,
+  Item,
+  Label,
+  RadioGroup,
+  RadioItem,
+  Root,
+  Separator,
+  Shortcut,
+  Sub,
+  SubContent,
+  SubTrigger,
+  Trigger,
+};
diff --git a/apps/staged/src/lib/components/ui/input/index.ts b/apps/staged/src/lib/components/ui/input/index.ts
new file mode 100644
index 000000000..0888f0e06
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/input/index.ts
@@ -0,0 +1,7 @@
+import Root from './input.svelte';
+
+export {
+  Root,
+  //
+  Root as Input,
+};
diff --git a/apps/staged/src/lib/components/ui/input/input.svelte b/apps/staged/src/lib/components/ui/input/input.svelte
new file mode 100644
index 000000000..79eec3b84
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+  import { cn, type WithElementRef } from '$lib/components/utils.js';
+
+  type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+
+  type Props = WithElementRef<
+    Omit<HTMLInputAttributes, 'type'> &
+      ({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
+  >;
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    type,
+    files = $bindable(),
+    class: className,
+    'data-slot': dataSlot = 'input',
+    ...restProps
+  }: Props = $props();
+</script>
+
+{#if type === 'file'}
+  <input
+    bind:this={ref}
+    data-slot={dataSlot}
+    class={cn(
+      'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+      className
+    )}
+    type="file"
+    bind:files
+    bind:value
+    {...restProps}
+  />
+{:else}
+  <input
+    bind:this={ref}
+    data-slot={dataSlot}
+    class={cn(
+      'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+      className
+    )}
+    {type}
+    bind:value
+    {...restProps}
+  />
+{/if}
diff --git a/apps/staged/src/lib/components/ui/label/index.ts b/apps/staged/src/lib/components/ui/label/index.ts
new file mode 100644
index 000000000..36fb393d4
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/label/index.ts
@@ -0,0 +1,7 @@
+import Root from './label.svelte';
+
+export {
+  Root,
+  //
+  Root as Label,
+};
diff --git a/apps/staged/src/lib/components/ui/label/label.svelte b/apps/staged/src/lib/components/ui/label/label.svelte
new file mode 100644
index 000000000..d6528f8b3
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/label/label.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Label as LabelPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: LabelPrimitive.RootProps = $props();
+</script>
+
+<LabelPrimitive.Root
+  bind:ref
+  data-slot="label"
+  class={cn(
+    'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',
+    className
+  )}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/popover/index.ts b/apps/staged/src/lib/components/ui/popover/index.ts
new file mode 100644
index 000000000..5427570fc
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/popover/index.ts
@@ -0,0 +1,28 @@
+import Root from './popover.svelte';
+import Close from './popover-close.svelte';
+import Content from './popover-content.svelte';
+import Description from './popover-description.svelte';
+import Header from './popover-header.svelte';
+import Title from './popover-title.svelte';
+import Trigger from './popover-trigger.svelte';
+import Portal from './popover-portal.svelte';
+
+export {
+  Root,
+  Content,
+  Description,
+  Header,
+  Title,
+  Trigger,
+  Close,
+  Portal,
+  //
+  Root as Popover,
+  Content as PopoverContent,
+  Description as PopoverDescription,
+  Header as PopoverHeader,
+  Title as PopoverTitle,
+  Trigger as PopoverTrigger,
+  Close as PopoverClose,
+  Portal as PopoverPortal,
+};
diff --git a/apps/staged/src/lib/components/ui/popover/popover-close.svelte b/apps/staged/src/lib/components/ui/popover/popover-close.svelte
new file mode 100644
index 000000000..c9518f46e
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/popover/popover-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Popover as PopoverPrimitive } from 'bits-ui';
+
+  let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps = $props();
+</script>
+
+<PopoverPrimitive.Close bind:ref data-slot="popover-close" {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/popover/popover-content.svelte b/apps/staged/src/lib/components/ui/popover/popover-content.svelte
new file mode 100644
index 000000000..274b5f5b0
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/popover/popover-content.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Popover as PopoverPrimitive } from 'bits-ui';
+  import PopoverPortal from './popover-portal.svelte';
+  import { cn, type WithoutChildrenOrChild } from '$lib/components/utils.js';
+  import type { ComponentProps } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 4,
+    align = 'center',
+    portalProps,
+    ...restProps
+  }: PopoverPrimitive.ContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
+  } = $props();
+</script>
+
+<PopoverPortal {...portalProps}>
+  <PopoverPrimitive.Content
+    bind:ref
+    data-slot="popover-content"
+    {sideOffset}
+    {align}
+    class={cn(
+      'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-72 origin-(--transform-origin) outline-hidden',
+      className
+    )}
+    {...restProps}
+  />
+</PopoverPortal>
diff --git a/apps/staged/src/lib/components/ui/popover/popover-description.svelte b/apps/staged/src/lib/components/ui/popover/popover-description.svelte
new file mode 100644
index 000000000..415892c93
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/popover/popover-description.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="popover-description"
+  class={cn('text-muted-foreground', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/apps/staged/src/lib/components/ui/popover/popover-header.svelte b/apps/staged/src/lib/components/ui/popover/popover-header.svelte
new file mode 100644
index 000000000..71b234a12
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/popover/popover-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="popover-header"
+  class={cn('flex flex-col gap-1 text-sm', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/apps/staged/src/lib/components/ui/popover/popover-portal.svelte b/apps/staged/src/lib/components/ui/popover/popover-portal.svelte
new file mode 100644
index 000000000..234766e85
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/popover/popover-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Popover as PopoverPrimitive } from 'bits-ui';
+
+  let { ...restProps }: PopoverPrimitive.PortalProps = $props();
+</script>
+
+<PopoverPrimitive.Portal {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/popover/popover-title.svelte b/apps/staged/src/lib/components/ui/popover/popover-title.svelte
new file mode 100644
index 000000000..957f21905
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/popover/popover-title.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="popover-title" class={cn('font-medium', className)} {...restProps}>
+  {@render children?.()}
+</div>
diff --git a/apps/staged/src/lib/components/ui/popover/popover-trigger.svelte b/apps/staged/src/lib/components/ui/popover/popover-trigger.svelte
new file mode 100644
index 000000000..ef43541fc
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/popover/popover-trigger.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { cn } from '$lib/components/utils.js';
+  import { Popover as PopoverPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: PopoverPrimitive.TriggerProps = $props();
+</script>
+
+<PopoverPrimitive.Trigger
+  bind:ref
+  data-slot="popover-trigger"
+  class={cn('', className)}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/popover/popover.svelte b/apps/staged/src/lib/components/ui/popover/popover.svelte
new file mode 100644
index 000000000..4551a94f3
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/popover/popover.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Popover as PopoverPrimitive } from 'bits-ui';
+
+  let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
+</script>
+
+<PopoverPrimitive.Root bind:open {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/select/index.ts b/apps/staged/src/lib/components/ui/select/index.ts
new file mode 100644
index 000000000..39971402d
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/select/index.ts
@@ -0,0 +1,37 @@
+import Root from './select.svelte';
+import Group from './select-group.svelte';
+import Label from './select-label.svelte';
+import Item from './select-item.svelte';
+import Content from './select-content.svelte';
+import Trigger from './select-trigger.svelte';
+import Separator from './select-separator.svelte';
+import ScrollDownButton from './select-scroll-down-button.svelte';
+import ScrollUpButton from './select-scroll-up-button.svelte';
+import GroupHeading from './select-group-heading.svelte';
+import Portal from './select-portal.svelte';
+
+export {
+  Root,
+  Group,
+  Label,
+  Item,
+  Content,
+  Trigger,
+  Separator,
+  ScrollDownButton,
+  ScrollUpButton,
+  GroupHeading,
+  Portal,
+  //
+  Root as Select,
+  Group as SelectGroup,
+  Label as SelectLabel,
+  Item as SelectItem,
+  Content as SelectContent,
+  Trigger as SelectTrigger,
+  Separator as SelectSeparator,
+  ScrollDownButton as SelectScrollDownButton,
+  ScrollUpButton as SelectScrollUpButton,
+  GroupHeading as SelectGroupHeading,
+  Portal as SelectPortal,
+};
diff --git a/apps/staged/src/lib/components/ui/select/select-content.svelte b/apps/staged/src/lib/components/ui/select/select-content.svelte
new file mode 100644
index 000000000..dd4a133d4
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/select/select-content.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import SelectPortal from './select-portal.svelte';
+  import SelectScrollUpButton from './select-scroll-up-button.svelte';
+  import SelectScrollDownButton from './select-scroll-down-button.svelte';
+  import { cn, type WithoutChild } from '$lib/components/utils.js';
+  import type { ComponentProps } from 'svelte';
+  import type { WithoutChildrenOrChild } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 4,
+    portalProps,
+    children,
+    preventScroll = true,
+    ...restProps
+  }: WithoutChild<SelectPrimitive.ContentProps> & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
+  } = $props();
+</script>
+
+<SelectPortal {...portalProps}>
+  <SelectPrimitive.Content
+    bind:ref
+    {sideOffset}
+    {preventScroll}
+    data-slot="select-content"
+    class={cn(
+      'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 overflow-x-hidden overflow-y-auto',
+      className
+    )}
+    {...restProps}
+  >
+    <SelectScrollUpButton />
+    <SelectPrimitive.Viewport
+      class={cn(
+        'h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1'
+      )}
+    >
+      {@render children?.()}
+    </SelectPrimitive.Viewport>
+    <SelectScrollDownButton />
+  </SelectPrimitive.Content>
+</SelectPortal>
diff --git a/apps/staged/src/lib/components/ui/select/select-group-heading.svelte b/apps/staged/src/lib/components/ui/select/select-group-heading.svelte
new file mode 100644
index 000000000..39caedb8e
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/select/select-group-heading.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+  import type { ComponentProps } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+  bind:ref
+  data-slot="select-group-heading"
+  class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</SelectPrimitive.GroupHeading>
diff --git a/apps/staged/src/lib/components/ui/select/select-group.svelte b/apps/staged/src/lib/components/ui/select/select-group.svelte
new file mode 100644
index 000000000..d6d7cfeb4
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/select/select-group.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SelectPrimitive.GroupProps = $props();
+</script>
+
+<SelectPrimitive.Group
+  bind:ref
+  data-slot="select-group"
+  class={cn('scroll-my-1 p-1', className)}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/select/select-item.svelte b/apps/staged/src/lib/components/ui/select/select-item.svelte
new file mode 100644
index 000000000..900ee9774
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/select/select-item.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { cn, type WithoutChild } from '$lib/components/utils.js';
+  import CheckIcon from '@lucide/svelte/icons/check';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    value,
+    label,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+  bind:ref
+  {value}
+  data-slot="select-item"
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 focus:bg-accent data-highlighted:bg-accent data-highlighted:text-accent-foreground focus:text-accent-foreground relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+>
+  {#snippet children({ selected, highlighted })}
+    <span class="absolute end-2 flex size-3.5 items-center justify-center">
+      {#if selected}
+        <CheckIcon class="cn-select-item-indicator-icon" />
+      {/if}
+    </span>
+    {#if childrenProp}
+      {@render childrenProp({ selected, highlighted })}
+    {:else}
+      {label || value}
+    {/if}
+  {/snippet}
+</SelectPrimitive.Item>
diff --git a/apps/staged/src/lib/components/ui/select/select-label.svelte b/apps/staged/src/lib/components/ui/select/select-label.svelte
new file mode 100644
index 000000000..4303702aa
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/select/select-label.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/components/utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="select-label"
+  class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/apps/staged/src/lib/components/ui/select/select-portal.svelte b/apps/staged/src/lib/components/ui/select/select-portal.svelte
new file mode 100644
index 000000000..fa48d6a20
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/select/select-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+
+  let { ...restProps }: SelectPrimitive.PortalProps = $props();
+</script>
+
+<SelectPrimitive.Portal {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/select/select-scroll-down-button.svelte b/apps/staged/src/lib/components/ui/select/select-scroll-down-button.svelte
new file mode 100644
index 000000000..b518d1f4e
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/select/select-scroll-down-button.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { cn, type WithoutChildrenOrChild } from '$lib/components/utils.js';
+  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+  bind:ref
+  data-slot="select-scroll-down-button"
+  class={cn(
+    "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full",
+    className
+  )}
+  {...restProps}
+>
+  <ChevronDownIcon />
+</SelectPrimitive.ScrollDownButton>
diff --git a/apps/staged/src/lib/components/ui/select/select-scroll-up-button.svelte b/apps/staged/src/lib/components/ui/select/select-scroll-up-button.svelte
new file mode 100644
index 000000000..445ed848e
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/select/select-scroll-up-button.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { cn, type WithoutChildrenOrChild } from '$lib/components/utils.js';
+  import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+  bind:ref
+  data-slot="select-scroll-up-button"
+  class={cn(
+    "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full",
+    className
+  )}
+  {...restProps}
+>
+  <ChevronUpIcon />
+</SelectPrimitive.ScrollUpButton>
diff --git a/apps/staged/src/lib/components/ui/select/select-separator.svelte b/apps/staged/src/lib/components/ui/select/select-separator.svelte
new file mode 100644
index 000000000..5f186f186
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/select/select-separator.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Separator as SeparatorPrimitive } from 'bits-ui';
+  import { Separator } from '$lib/components/ui/separator/index.js';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator
+  bind:ref
+  data-slot="select-separator"
+  class={cn('bg-border -mx-1 my-1 h-px pointer-events-none', className)}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/select/select-trigger.svelte b/apps/staged/src/lib/components/ui/select/select-trigger.svelte
new file mode 100644
index 000000000..cbccb18a1
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/select/select-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { cn, type WithoutChild } from '$lib/components/utils.js';
+  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    size = 'default',
+    ...restProps
+  }: WithoutChild<SelectPrimitive.TriggerProps> & {
+    size?: 'sm' | 'default';
+  } = $props();
+</script>
+
+<SelectPrimitive.Trigger
+  bind:ref
+  data-slot="select-trigger"
+  data-size={size}
+  class={cn(
+    "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+  <ChevronDownIcon class="text-muted-foreground size-4 pointer-events-none" />
+</SelectPrimitive.Trigger>
diff --git a/apps/staged/src/lib/components/ui/select/select.svelte b/apps/staged/src/lib/components/ui/select/select.svelte
new file mode 100644
index 000000000..ec122f3e1
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/select/select.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+
+  let {
+    open = $bindable(false),
+    value = $bindable(),
+    ...restProps
+  }: SelectPrimitive.RootProps = $props();
+</script>
+
+<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/separator/index.ts b/apps/staged/src/lib/components/ui/separator/index.ts
new file mode 100644
index 000000000..56b27672e
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/separator/index.ts
@@ -0,0 +1,7 @@
+import Root from './separator.svelte';
+
+export {
+  Root,
+  //
+  Root as Separator,
+};
diff --git a/apps/staged/src/lib/components/ui/separator/separator.svelte b/apps/staged/src/lib/components/ui/separator/separator.svelte
new file mode 100644
index 000000000..5bcb3d63e
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/separator/separator.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Separator as SeparatorPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    'data-slot': dataSlot = 'separator',
+    ...restProps
+  }: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+  bind:ref
+  data-slot={dataSlot}
+  class={cn(
+    'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',
+    // this is different in shadcn/ui but self-stretch breaks things for us
+    'data-[orientation=vertical]:h-full',
+    className
+  )}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/sonner/index.ts b/apps/staged/src/lib/components/ui/sonner/index.ts
new file mode 100644
index 000000000..fcaf06bfb
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from './sonner.svelte';
diff --git a/apps/staged/src/lib/components/ui/sonner/sonner.svelte b/apps/staged/src/lib/components/ui/sonner/sonner.svelte
new file mode 100644
index 000000000..0eca70d87
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/sonner/sonner.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+  import Loader2Icon from '@lucide/svelte/icons/loader-2';
+  import CircleCheckIcon from '@lucide/svelte/icons/circle-check';
+  import OctagonXIcon from '@lucide/svelte/icons/octagon-x';
+  import InfoIcon from '@lucide/svelte/icons/info';
+  import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
+
+  let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+  class="toaster group"
+  style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
+  {...restProps}
+>
+  {#snippet loadingIcon()}
+    <Loader2Icon class="size-4 animate-spin" />
+  {/snippet}
+  {#snippet successIcon()}
+    <CircleCheckIcon class="size-4" />
+  {/snippet}
+  {#snippet errorIcon()}
+    <OctagonXIcon class="size-4" />
+  {/snippet}
+  {#snippet infoIcon()}
+    <InfoIcon class="size-4" />
+  {/snippet}
+  {#snippet warningIcon()}
+    <TriangleAlertIcon class="size-4" />
+  {/snippet}
+</Sonner>
diff --git a/apps/staged/src/lib/components/ui/toggle-group/index.ts b/apps/staged/src/lib/components/ui/toggle-group/index.ts
new file mode 100644
index 000000000..eade42e62
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/toggle-group/index.ts
@@ -0,0 +1,10 @@
+import Root from './toggle-group.svelte';
+import Item from './toggle-group-item.svelte';
+
+export {
+  Root,
+  Item,
+  //
+  Root as ToggleGroup,
+  Item as ToggleGroupItem,
+};
diff --git a/apps/staged/src/lib/components/ui/toggle-group/toggle-group-item.svelte b/apps/staged/src/lib/components/ui/toggle-group/toggle-group-item.svelte
new file mode 100644
index 000000000..42e0b1791
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/toggle-group/toggle-group-item.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+  import { getToggleGroupCtx } from './toggle-group.svelte';
+  import { cn } from '$lib/components/utils.js';
+  import { type ToggleVariants, toggleVariants } from '$lib/components/ui/toggle/index.js';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    class: className,
+    size,
+    variant,
+    ...restProps
+  }: ToggleGroupPrimitive.ItemProps & ToggleVariants = $props();
+
+  const ctx = getToggleGroupCtx();
+</script>
+
+<ToggleGroupPrimitive.Item
+  bind:ref
+  data-slot="toggle-group-item"
+  data-variant={ctx.variant || variant}
+  data-size={ctx.size || size}
+  data-spacing={ctx.spacing}
+  class={cn(
+    'data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
+    toggleVariants({
+      variant: ctx.variant || variant,
+      size: ctx.size || size,
+    }),
+    className
+  )}
+  {value}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/toggle-group/toggle-group.svelte b/apps/staged/src/lib/components/ui/toggle-group/toggle-group.svelte
new file mode 100644
index 000000000..e920426cc
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/toggle-group/toggle-group.svelte
@@ -0,0 +1,75 @@
+<script lang="ts" module>
+  import { getContext, setContext } from 'svelte';
+  import type { VariantProps } from 'tailwind-variants';
+  import { toggleVariants } from '$lib/components/ui/toggle/index.js';
+
+  type ToggleVariants = VariantProps<typeof toggleVariants>;
+
+  interface ToggleGroupContext extends ToggleVariants {
+    spacing?: number;
+    orientation?: 'horizontal' | 'vertical';
+  }
+
+  export function setToggleGroupCtx(props: ToggleGroupContext) {
+    setContext('toggleGroup', props);
+  }
+
+  export function getToggleGroupCtx() {
+    return getContext<Required<ToggleGroupContext>>('toggleGroup');
+  }
+</script>
+
+<script lang="ts">
+  import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    class: className,
+    size = 'default',
+    spacing = 0,
+    orientation = 'horizontal',
+    variant = 'default',
+    ...restProps
+  }: ToggleGroupPrimitive.RootProps &
+    ToggleVariants & {
+      spacing?: number;
+      orientation?: 'horizontal' | 'vertical';
+    } = $props();
+
+  setToggleGroupCtx({
+    get variant() {
+      return variant;
+    },
+    get size() {
+      return size;
+    },
+    get spacing() {
+      return spacing;
+    },
+    get orientation() {
+      return orientation;
+    },
+  });
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<ToggleGroupPrimitive.Root
+  bind:value={value as never}
+  bind:ref
+  {orientation}
+  data-slot="toggle-group"
+  data-variant={variant}
+  data-size={size}
+  data-spacing={spacing}
+  style={`--gap: ${spacing}`}
+  class={cn(
+    'rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch',
+    className
+  )}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/toggle/index.ts b/apps/staged/src/lib/components/ui/toggle/index.ts
new file mode 100644
index 000000000..dca3690cf
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/toggle/index.ts
@@ -0,0 +1,13 @@
+import Root from './toggle.svelte';
+export {
+  toggleVariants,
+  type ToggleSize,
+  type ToggleVariant,
+  type ToggleVariants,
+} from './toggle.svelte';
+
+export {
+  Root,
+  //
+  Root as Toggle,
+};
diff --git a/apps/staged/src/lib/components/ui/toggle/toggle.svelte b/apps/staged/src/lib/components/ui/toggle/toggle.svelte
new file mode 100644
index 000000000..302f0d8dc
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/toggle/toggle.svelte
@@ -0,0 +1,52 @@
+<script lang="ts" module>
+  import { type VariantProps, tv } from 'tailwind-variants';
+
+  export const toggleVariants = tv({
+    base: "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border-input hover:bg-muted border bg-transparent shadow-xs',
+      },
+      size: {
+        default:
+          'h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        sm: 'h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',
+        lg: 'h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  });
+
+  export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];
+  export type ToggleSize = VariantProps<typeof toggleVariants>['size'];
+  export type ToggleVariants = VariantProps<typeof toggleVariants>;
+</script>
+
+<script lang="ts">
+  import { Toggle as TogglePrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    pressed = $bindable(false),
+    class: className,
+    size = 'default',
+    variant = 'default',
+    ...restProps
+  }: TogglePrimitive.RootProps & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+  } = $props();
+</script>
+
+<TogglePrimitive.Root
+  bind:ref
+  bind:pressed
+  data-slot="toggle"
+  class={cn(toggleVariants({ variant, size }), className)}
+  {...restProps}
+/>
diff --git a/apps/staged/src/lib/components/ui/tooltip/index.ts b/apps/staged/src/lib/components/ui/tooltip/index.ts
new file mode 100644
index 000000000..2e8df8230
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,19 @@
+import Root from './tooltip.svelte';
+import Trigger from './tooltip-trigger.svelte';
+import Content from './tooltip-content.svelte';
+import Provider from './tooltip-provider.svelte';
+import Portal from './tooltip-portal.svelte';
+
+export {
+  Root,
+  Trigger,
+  Content,
+  Provider,
+  Portal,
+  //
+  Root as Tooltip,
+  Content as TooltipContent,
+  Trigger as TooltipTrigger,
+  Provider as TooltipProvider,
+  Portal as TooltipPortal,
+};
diff --git a/apps/staged/src/lib/components/ui/tooltip/tooltip-content.svelte b/apps/staged/src/lib/components/ui/tooltip/tooltip-content.svelte
new file mode 100644
index 000000000..0796dd902
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+  import { cn } from '$lib/components/utils.js';
+  import TooltipPortal from './tooltip-portal.svelte';
+  import type { ComponentProps } from 'svelte';
+  import type { WithoutChildrenOrChild } from '$lib/components/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 0,
+    side = 'top',
+    children,
+    arrowClasses,
+    portalProps,
+    ...restProps
+  }: TooltipPrimitive.ContentProps & {
+    arrowClasses?: string;
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+  } = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+  <TooltipPrimitive.Content
+    bind:ref
+    data-slot="tooltip-content"
+    {sideOffset}
+    {side}
+    class={cn(
+      'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm bg-foreground text-background z-50 w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin)',
+      className
+    )}
+    {...restProps}
+  >
+    {@render children?.()}
+    <TooltipPrimitive.Arrow>
+      {#snippet child({ props })}
+        <div
+          class={cn(
+            'size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50',
+            'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%+2px)]',
+            'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%+1px)]',
+            'data-[side=right]:translate-x-[calc(50%+2px)] data-[side=right]:translate-y-1/2',
+            'data-[side=left]:-translate-y-[calc(50%-3px)]',
+            arrowClasses
+          )}
+          {...props}
+        ></div>
+      {/snippet}
+    </TooltipPrimitive.Arrow>
+  </TooltipPrimitive.Content>
+</TooltipPortal>
diff --git a/apps/staged/src/lib/components/ui/tooltip/tooltip-portal.svelte b/apps/staged/src/lib/components/ui/tooltip/tooltip-portal.svelte
new file mode 100644
index 000000000..7b9e8f9f1
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/tooltip/tooltip-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+  let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/tooltip/tooltip-provider.svelte b/apps/staged/src/lib/components/ui/tooltip/tooltip-provider.svelte
new file mode 100644
index 000000000..49f8379ba
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/tooltip/tooltip-provider.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+  let { delayDuration = 0, ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {delayDuration} {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/tooltip/tooltip-trigger.svelte b/apps/staged/src/lib/components/ui/tooltip/tooltip-trigger.svelte
new file mode 100644
index 000000000..b7640e4ed
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/tooltip/tooltip-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+  let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />
diff --git a/apps/staged/src/lib/components/ui/tooltip/tooltip.svelte b/apps/staged/src/lib/components/ui/tooltip/tooltip.svelte
new file mode 100644
index 000000000..42a939b4c
--- /dev/null
+++ b/apps/staged/src/lib/components/ui/tooltip/tooltip.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+  let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
+</script>
+
+<TooltipPrimitive.Root bind:open {...restProps} />
diff --git a/apps/staged/src/lib/components/utils.ts b/apps/staged/src/lib/components/utils.ts
new file mode 100644
index 000000000..ee339984d
--- /dev/null
+++ b/apps/staged/src/lib/components/utils.ts
@@ -0,0 +1,13 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, 'child'> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, 'children'> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
diff --git a/apps/staged/src/lib/features/actions/ActionOutputModal.svelte b/apps/staged/src/lib/features/actions/ActionOutputModal.svelte
index 1462c16da..618cb01db 100644
--- a/apps/staged/src/lib/features/actions/ActionOutputModal.svelte
+++ b/apps/staged/src/lib/features/actions/ActionOutputModal.svelte
@@ -20,20 +20,20 @@
 -->
 <script lang="ts">
   import { onMount, onDestroy, tick } from 'svelte';
-  import {
-    X,
-    AlertCircle,
-    CircleStop,
-    CheckCircle,
-    XCircle,
-    Check,
-    StickyNote,
-    RotateCw,
-  } from 'lucide-svelte';
+  import X from '@lucide/svelte/icons/x';
+  import AlertCircle from '@lucide/svelte/icons/alert-circle';
+  import CircleStop from '@lucide/svelte/icons/circle-stop';
+  import CheckCircle from '@lucide/svelte/icons/check-circle';
+  import XCircle from '@lucide/svelte/icons/x-circle';
+  import Check from '@lucide/svelte/icons/check';
+  import StickyNote from '@lucide/svelte/icons/sticky-note';
+  import RotateCw from '@lucide/svelte/icons/rotate-cw';
   import Spinner from '../../shared/Spinner.svelte';
   import Convert from 'ansi-to-html';
   import { sanitize } from '../../shared/sanitize';
-  import { createBackdropDismissHandlers } from '../../shared/backdropDismiss';
+  import * as Dialog from '$lib/components/ui/dialog';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
   import { createNote, invalidateBranchTimeline } from '../../commands';
   import type { ActionStatusEvent, ActionOutputEvent, OutputChunk, ActionStatus } from './actions';
   import {
@@ -47,6 +47,7 @@
   import { viewport } from '../../shared/viewport.svelte';
 
   interface Props {
+    open: boolean;
     executionId: string;
     branchId: string;
     actionName: string;
@@ -58,6 +59,7 @@
   }
 
   let {
+    open,
     executionId,
     branchId,
     actionName,
@@ -84,7 +86,6 @@
   let unlistenOutput: (() => void) | null = null;
   let unlistenStatus: (() => void) | null = null;
   let shouldAutoScroll = $state(true);
-  const backdropDismiss = createBackdropDismissHandlers({ onDismiss: () => onClose() });
 
   // rAF batching for incoming output chunks
   let pendingChunks: OutputChunk[] = [];
@@ -390,22 +391,18 @@
   }
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div
-  class="modal-backdrop"
-  role="dialog"
-  aria-modal="true"
-  tabindex="-1"
-  onpointerdown={backdropDismiss.handlePointerDown}
-  onclick={backdropDismiss.handleClick}
-  onkeydown={(e) => e.key === 'Escape' && onClose()}
->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="modal" role="presentation" onclick={(e) => e.stopPropagation()}>
+<Dialog.Root {open} onOpenChange={(v) => !v && onClose()}>
+  <Dialog.Content
+    class="sm:max-w-[1000px] w-[90vw] h-[80vh] max-h-[800px] bg-background p-0 gap-0 overflow-hidden flex flex-col border border-[var(--border-primary)]"
+    showCloseButton={false}
+  >
     <!-- Header -->
     <header class="modal-header">
       <div class="header-content">
-        <span class="header-title">{actionName}</span>
+        <Dialog.Title
+          class="text-[var(--size-sm)] font-semibold text-foreground overflow-hidden text-ellipsis whitespace-nowrap"
+          >{actionName}</Dialog.Title
+        >
         {#if status}
           {@const StatusIcon = getStatusIcon(status)}
           {@const isCurrentlyStopping = isStopping || isStoppingDerived}
@@ -422,65 +419,122 @@
         {/if}
       </div>
       <div class="header-actions">
-        <button
-          class="save-note-btn"
-          class:saved={saveState === 'saved'}
-          class:save-error={saveState === 'error'}
-          onmousedown={handleSaveMouseDown}
-          onclick={handleSaveAsNote}
-          disabled={saveState === 'saved' || saveState === 'error'}
-          title={saveState === 'error'
-            ? (saveError ?? 'Failed to save note')
-            : selectedText
-              ? 'Save selected text as a note'
-              : 'Save full log as a note'}
-        >
-          {#if saveState === 'saved'}
-            <span class="save-note-label">
-              <Check size={14} />
-              <span>Saved</span>
-            </span>
-          {:else if saveState === 'error'}
-            <span class="save-note-label">
-              <AlertCircle size={14} />
-              <span>Failed</span>
-            </span>
-          {:else}
-            <span class="save-note-label">
-              <StickyNote size={14} />
-              <span>{selectedText ? 'Save selection' : 'Save log'}</span>
-            </span>
-          {/if}
-        </button>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <span {...props} class="inline-flex">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  class={[
+                    'gap-1.5 border-[var(--border-muted)] bg-[var(--bg-secondary)] px-3 text-[13px] font-medium text-foreground shadow-none hover:border-[var(--border-focus)] hover:bg-[var(--bg-hover)] max-[640px]:h-10 max-[640px]:px-2.5',
+                    saveState === 'saved' &&
+                      'cursor-default border-[var(--commit-bg-emphasis)] bg-[var(--commit-bg)] text-[var(--status-added)] hover:border-[var(--commit-bg-emphasis)] hover:bg-[var(--commit-bg)] hover:text-[var(--status-added)]',
+                    saveState === 'error' &&
+                      'cursor-default border-[var(--ui-danger-bg)] bg-[var(--ui-danger-bg)] text-[var(--ui-danger)] hover:border-[var(--ui-danger-bg)] hover:bg-[var(--ui-danger-bg)] hover:text-[var(--ui-danger)]',
+                  ]}
+                  onmousedown={handleSaveMouseDown}
+                  onclick={handleSaveAsNote}
+                  disabled={saveState === 'saved' || saveState === 'error'}
+                >
+                  {#if saveState === 'saved'}
+                    <Check size={14} />
+                    <span>Saved</span>
+                  {:else if saveState === 'error'}
+                    <AlertCircle size={14} />
+                    <span>Failed</span>
+                  {:else}
+                    <StickyNote size={14} />
+                    <span>{selectedText ? 'Save selection' : 'Save log'}</span>
+                  {/if}
+                </Button>
+              </span>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content>
+            {saveState === 'error'
+              ? (saveError ?? 'Failed to save note')
+              : selectedText
+                ? 'Save selected text as a note'
+                : 'Save full log as a note'}
+          </Tooltip.Content>
+        </Tooltip.Root>
         {#if isRunning}
           {@const isCurrentlyStopping = isStopping || isStoppingDerived}
-          <button
-            class="stop-btn"
-            onclick={handleStop}
-            disabled={isCurrentlyStopping}
-            title="Stop action"
-          >
-            <CircleStop size={14} />
-            <span>{isCurrentlyStopping ? 'Stopping…' : 'Stop'}</span>
-          </button>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <span {...props} class="inline-flex">
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    class="gap-1.5 px-3 text-[13px] font-medium max-[640px]:h-10 max-[640px]:px-2.5"
+                    onclick={handleStop}
+                    disabled={isCurrentlyStopping}
+                  >
+                    <CircleStop size={14} />
+                    <span>{isCurrentlyStopping ? 'Stopping…' : 'Stop'}</span>
+                  </Button>
+                </span>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>Stop action</Tooltip.Content>
+          </Tooltip.Root>
         {:else if onRunAgain}
-          <button class="run-again-btn" onclick={onRunAgain} title="Run again">
-            <RotateCw size={14} />
-            <span>Run again</span>
-          </button>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="outline"
+                  size="sm"
+                  class="gap-1.5 border-[var(--border-muted)] bg-[var(--bg-secondary)] px-3 text-[13px] font-medium hover:border-[var(--border-focus)] hover:bg-[var(--bg-hover)] max-[640px]:h-10 max-[640px]:px-2.5"
+                  onclick={onRunAgain}
+                >
+                  <RotateCw size={14} />
+                  <span>Run again</span>
+                </Button>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>Run again</Tooltip.Content>
+          </Tooltip.Root>
         {/if}
         {#if status === 'failed' && onRemove}
-          <button class="remove-btn" onclick={handleRemove} title="Remove this failed run">
-            <span>Remove</span>
-          </button>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="destructive"
+                  size="sm"
+                  class="gap-1.5 px-3 text-[13px] font-medium max-[640px]:h-10 max-[640px]:px-2.5"
+                  onclick={handleRemove}
+                >
+                  <span>Remove</span>
+                </Button>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>Remove this failed run</Tooltip.Content>
+          </Tooltip.Root>
         {/if}
-        <button
-          class="close-btn"
-          onclick={onClose}
-          title={viewport.showShortcutHints ? 'Close (Esc)' : 'Close'}
-        >
-          <X size={16} />
-        </button>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <Button
+                {...props}
+                variant="ghost"
+                size="icon-sm"
+                class="size-8 shrink-0 rounded-md text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-foreground max-[640px]:size-10 [&_svg]:!size-4"
+                onclick={onClose}
+              >
+                <X size={16} />
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content>
+            {viewport.showShortcutHints ? 'Close (Esc)' : 'Close'}
+          </Tooltip.Content>
+        </Tooltip.Root>
       </div>
     </header>
 
@@ -510,34 +564,10 @@
         </div>
       {/if}
     </div>
-  </div>
-</div>
+  </Dialog.Content>
+</Dialog.Root>
 
 <style>
-  .modal-backdrop {
-    position: fixed;
-    inset: 0;
-    background-color: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 100;
-    backdrop-filter: blur(2px);
-  }
-
-  .modal {
-    background: var(--bg-primary);
-    border-radius: 12px;
-    width: 90vw;
-    max-width: 1000px;
-    height: 80vh;
-    max-height: 800px;
-    display: flex;
-    flex-direction: column;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-    border: 1px solid var(--border-primary);
-  }
-
   .modal-header {
     display: flex;
     align-items: center;
@@ -557,15 +587,6 @@
     min-width: 0;
   }
 
-  .header-title {
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--text-primary);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
   .status-badge {
     display: flex;
     align-items: center;
@@ -607,90 +628,6 @@
     gap: 8px;
   }
 
-  .stop-btn {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 12px;
-    background: rgba(239, 68, 68, 0.1);
-    color: #ef4444;
-    border: 1px solid rgba(239, 68, 68, 0.2);
-    border-radius: 6px;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.15s;
-  }
-
-  .stop-btn:hover:not(:disabled) {
-    background: rgba(239, 68, 68, 0.15);
-    border-color: rgba(239, 68, 68, 0.3);
-  }
-
-  .stop-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .run-again-btn {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 12px;
-    background: rgba(59, 130, 246, 0.1);
-    color: #3b82f6;
-    border: 1px solid rgba(59, 130, 246, 0.2);
-    border-radius: 6px;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.15s;
-  }
-
-  .run-again-btn:hover {
-    background: rgba(59, 130, 246, 0.15);
-    border-color: rgba(59, 130, 246, 0.3);
-  }
-
-  .remove-btn {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 12px;
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-    border: 1px solid var(--border-muted);
-    border-radius: 6px;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.15s;
-  }
-
-  .remove-btn:hover {
-    background: var(--bg-hover);
-    border-color: var(--border-focus);
-  }
-
-  .close-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    background: transparent;
-    color: var(--text-secondary);
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.15s;
-  }
-
-  .close-btn:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
   .modal-content {
     flex: 1;
     overflow-y: auto;
@@ -735,58 +672,7 @@
     color: #9ca3af;
   }
 
-  .save-note-btn {
-    display: flex;
-    align-items: center;
-    padding: 6px 12px;
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-    border: 1px solid var(--border-muted);
-    border-radius: 6px;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    overflow: hidden;
-  }
-
-  .save-note-btn:hover:not(:disabled) {
-    background: var(--bg-hover);
-    border-color: var(--border-focus);
-  }
-
-  .save-note-btn.saved {
-    background: var(--commit-bg);
-    color: var(--status-added);
-    border-color: var(--commit-bg-emphasis);
-    cursor: default;
-  }
-
-  .save-note-btn.save-error {
-    background: var(--ui-danger-bg);
-    color: var(--ui-danger);
-    border-color: var(--ui-danger-bg);
-    cursor: default;
-  }
-
-  .save-note-label {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    white-space: nowrap;
-  }
-
   @media (max-width: 640px) {
-    .modal {
-      width: 100vw;
-      max-width: none;
-      height: 100vh;
-      height: 100dvh;
-      max-height: none;
-      border-radius: 0;
-      box-shadow: none;
-    }
-
     .modal-header {
       border-radius: 0;
       padding: 12px;
@@ -796,19 +682,6 @@
       gap: 4px;
     }
 
-    .close-btn {
-      width: 40px;
-      height: 40px;
-    }
-
-    .stop-btn,
-    .run-again-btn,
-    .remove-btn,
-    .save-note-btn {
-      min-height: 40px;
-      padding: 6px 10px;
-    }
-
     .modal-content {
       padding: 12px;
     }
diff --git a/apps/staged/src/lib/features/agents/AgentSelector.svelte b/apps/staged/src/lib/features/agents/AgentSelector.svelte
index f6a341317..0fd34363a 100644
--- a/apps/staged/src/lib/features/agents/AgentSelector.svelte
+++ b/apps/staged/src/lib/features/agents/AgentSelector.svelte
@@ -11,10 +11,11 @@
     <AgentSelector />
 -->
 <script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
-  import { ChevronDown, Check, Bot } from 'lucide-svelte';
+  import ChevronDown from '@lucide/svelte/icons/chevron-down';
+  import Bot from '@lucide/svelte/icons/bot';
   import { agentState, REMOTE_AGENTS } from './agent.svelte';
   import { setAiAgent, getPreferredAgent } from '../settings/preferences.svelte';
+  import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 
   interface Props {
     disabled?: boolean;
@@ -24,162 +25,52 @@
 
   let { disabled = false, remote = false, dropUp = false }: Props = $props();
 
-  let showDropdown = $state(false);
-
   let agents = $derived(remote ? REMOTE_AGENTS : agentState.providers);
 
   let preferredId = $derived(getPreferredAgent(agents));
 
   let currentLabel = $derived(agents.find((p) => p.id === preferredId)?.label ?? 'Agent');
-
-  onMount(() => {
-    document.addEventListener('click', handleClickOutside);
-  });
-
-  onDestroy(() => {
-    document.removeEventListener('click', handleClickOutside);
-  });
-
-  function handleClickOutside(event: MouseEvent) {
-    const target = event.target as HTMLElement;
-    if (showDropdown && !target.closest('.agent-selector')) {
-      showDropdown = false;
-    }
-  }
-
-  function select(id: string) {
-    setAiAgent(id);
-    showDropdown = false;
-  }
-
-  function toggle() {
-    if (!disabled && agents.length > 1) {
-      showDropdown = !showDropdown;
-    }
-  }
 </script>
 
 {#if (remote || agentState.loaded) && agents.length > 0}
-  <div class="agent-selector">
+  {#if agents.length > 1}
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger
+        class="inline-flex items-center gap-1 rounded px-2 py-1 text-xs text-[var(--text-faint)] transition-colors hover:bg-[var(--bg-hover)] hover:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40"
+        {disabled}
+        title="Select AI agent"
+      >
+        <Bot size={12} />
+        <span class="whitespace-nowrap">{currentLabel}</span>
+        <ChevronDown size={12} />
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content
+        align="start"
+        side={dropUp ? 'top' : 'bottom'}
+        sideOffset={4}
+        class="min-w-[140px]"
+      >
+        <DropdownMenu.RadioGroup
+          value={preferredId ?? undefined}
+          onValueChange={(id) => setAiAgent(id)}
+        >
+          {#each agents as provider (provider.id)}
+            <DropdownMenu.RadioItem value={provider.id}>
+              {provider.label}
+            </DropdownMenu.RadioItem>
+          {/each}
+        </DropdownMenu.RadioGroup>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  {:else}
     <button
       type="button"
-      class="selector-btn"
-      onclick={toggle}
+      class="inline-flex items-center gap-1 rounded px-2 py-1 text-xs text-[var(--text-faint)] disabled:cursor-not-allowed disabled:opacity-40"
       {disabled}
-      title={agents.length > 1 ? 'Select AI agent' : currentLabel}
+      title={currentLabel}
     >
       <Bot size={12} />
-      <span class="selector-label">{currentLabel}</span>
-      {#if agents.length > 1}
-        <ChevronDown size={12} />
-      {/if}
+      <span class="whitespace-nowrap">{currentLabel}</span>
     </button>
-    {#if showDropdown}
-      <div class="selector-dropdown" class:drop-up={dropUp}>
-        {#each agents as provider (provider.id)}
-          <button
-            type="button"
-            class="selector-option"
-            class:selected={preferredId === provider.id}
-            onclick={() => select(provider.id)}
-          >
-            <span class="option-label">{provider.label}</span>
-            {#if preferredId === provider.id}
-              <Check size={14} />
-            {/if}
-          </button>
-        {/each}
-      </div>
-    {/if}
-  </div>
+  {/if}
 {/if}
-
-<style>
-  .agent-selector {
-    position: relative;
-  }
-
-  .selector-btn {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    padding: 4px 8px;
-    background: none;
-    border: none;
-    border-radius: 4px;
-    color: var(--text-faint);
-    font-size: var(--size-xs);
-    font-family: inherit;
-    cursor: pointer;
-    transition:
-      background-color 0.1s,
-      color 0.1s;
-  }
-
-  .selector-btn:hover:not(:disabled) {
-    background-color: var(--bg-hover);
-    color: var(--text-muted);
-  }
-
-  .selector-btn:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  .selector-label {
-    white-space: nowrap;
-  }
-
-  .selector-dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    margin-top: 4px;
-    background: var(--bg-primary);
-    border: 1px solid var(--border-muted);
-    border-radius: 6px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    overflow: hidden;
-    z-index: 1001;
-    min-width: 140px;
-  }
-
-  .selector-dropdown.drop-up {
-    top: auto;
-    bottom: 100%;
-    margin-top: 0;
-    margin-bottom: 4px;
-  }
-
-  .selector-option {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    padding: 8px 12px;
-    background: none;
-    border: none;
-    color: var(--text-primary);
-    font-size: var(--size-sm);
-    font-family: inherit;
-    text-align: left;
-    cursor: pointer;
-    transition: background-color 0.1s;
-  }
-
-  .selector-option:hover {
-    background-color: var(--bg-hover);
-  }
-
-  .selector-option.selected {
-    color: var(--ui-accent);
-  }
-
-  .selector-option.selected :global(svg) {
-    color: var(--ui-accent);
-  }
-
-  .option-label {
-    flex: 1;
-  }
-</style>
diff --git a/apps/staged/src/lib/features/branches/BranchCard.svelte b/apps/staged/src/lib/features/branches/BranchCard.svelte
index 71b6214c7..b24ecccc6 100644
--- a/apps/staged/src/lib/features/branches/BranchCard.svelte
+++ b/apps/staged/src/lib/features/branches/BranchCard.svelte
@@ -12,16 +12,14 @@
 -->
 <script lang="ts">
   import { untrack } from 'svelte';
-  import {
-    FileDiff,
-    AlertCircle,
-    Cloud,
-    Trash2,
-    GitPullRequest,
-    GitPullRequestClosed,
-    GitPullRequestDraft,
-    Sprout,
-  } from 'lucide-svelte';
+  import FileDiff from '@lucide/svelte/icons/file-diff';
+  import AlertCircle from '@lucide/svelte/icons/alert-circle';
+  import Cloud from '@lucide/svelte/icons/cloud';
+  import Trash2 from '@lucide/svelte/icons/trash-2';
+  import GitPullRequest from '@lucide/svelte/icons/git-pull-request';
+  import GitPullRequestClosed from '@lucide/svelte/icons/git-pull-request-closed';
+  import GitPullRequestDraft from '@lucide/svelte/icons/git-pull-request-draft';
+  import Sprout from '@lucide/svelte/icons/sprout';
   import Spinner from '../../shared/Spinner.svelte';
   import { isSessionActive } from '../../shared/sessionStatus';
   import { deleteSessionLinkedItem } from '../../shared/deleteSessionLinkedItem';
@@ -44,7 +42,9 @@
   import SessionModal from '../sessions/SessionModal.svelte';
   import NewSessionModal from '../sessions/NewSessionModal.svelte';
   import NoteModal from '../notes/NoteModal.svelte';
-  import ConfirmDialog from '../../shared/ConfirmDialog.svelte';
+  import * as AlertDialog from '$lib/components/ui/alert-dialog';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
   import {
     fileNameFromPath,
     formatBaseBranch,
@@ -58,7 +58,7 @@
   import RemoteWorkspaceStatusBadge from './RemoteWorkspaceStatusBadge.svelte';
   import RemoteWorkspaceStatusView from './RemoteWorkspaceStatusView.svelte';
   import { branchTimelineReadyKey } from './branchTimelineReady';
-  import { alerts } from '../../shared/alerts.svelte';
+  import { toast } from 'svelte-sonner';
   import { aggregateProjectPrStatus } from '../../shared/utils';
   import { timelineToHashtagItems, projectNotesToHashtagItems } from '../sessions/hashtagItems';
   import { getPreferredAgent } from '../settings/preferences.svelte';
@@ -113,11 +113,9 @@
   }
 
   function notifyError(title: string, e: unknown): void {
-    alerts.show({
-      tone: 'error',
-      title,
-      message: e instanceof Error ? e.message : String(e),
-      durationMs: 0,
+    toast.error(title, {
+      description: e instanceof Error ? e.message : String(e),
+      duration: Infinity,
     });
   }
 
@@ -986,11 +984,9 @@
     }
 
     if (preview.conflictedPaths.length > 0) {
-      alerts.show({
-        tone: 'error',
-        title: 'Conflicts need manual recovery',
-        message: preview.conflictedPaths.join('\n'),
-        durationMs: 0,
+      toast.error('Conflicts need manual recovery', {
+        description: preview.conflictedPaths.join('\n'),
+        duration: Infinity,
       });
       return;
     }
@@ -1226,7 +1222,9 @@
           } catch (e) {
             const reason = e instanceof Error ? e.message : typeof e === 'string' ? e : null;
             const detail = reason ?? 'it may be a binary file';
-            alerts.error(`Could not read "${fileNameFromPath(filePath)}" \u2014 ${detail}`);
+            toast.error('Error', {
+              description: `Could not read "${fileNameFromPath(filePath)}" \u2014 ${detail}`,
+            });
           } finally {
             pendingDropNotes = pendingDropNotes.filter((p) => p.key !== placeholders[i].key);
           }
@@ -1296,9 +1294,22 @@
         baseBranch={formatBaseBranch(branch.baseBranch)}
       />
       <div class="header-actions">
-        <button class="more-button" onclick={() => onDelete?.()} title="Delete branch">
-          <Trash2 size={16} />
-        </button>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <Button
+                {...props}
+                variant="ghost"
+                size="icon-sm"
+                onclick={() => onDelete?.()}
+                class="size-7 text-[var(--text-faint)]"
+              >
+                <Trash2 size={16} />
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content>Delete branch</Tooltip.Content>
+        </Tooltip.Root>
       </div>
     </div>
     <div class="card-content">
@@ -1307,7 +1318,7 @@
           <AlertCircle size={14} />
           <span>Failed to create worktree: {worktreeError}</span>
         </div>
-        <button class="worktree-retry-btn" onclick={() => onRetryWorktree?.()}> Retry </button>
+        <Button variant="outline" size="sm" onclick={() => onRetryWorktree?.()}>Retry</Button>
       </div>
     </div>
   {:else}
@@ -1385,7 +1396,7 @@
       {:else if error && !timeline}
         <div class="error">
           <span>{error}</span>
-          <button class="retry-btn" onclick={() => loadTimeline()}>Retry</button>
+          <Button variant="outline" size="xs" onclick={() => loadTimeline()}>Retry</Button>
         </div>
       {:else if timeline || isSettingUp}
         <BranchTimeline
@@ -1407,12 +1418,12 @@
               .then(() => loadTimeline())
               .catch((e) => {
                 console.error('Failed to resume session:', e);
-                alerts.error(
-                  e instanceof Error
-                    ? e.message
-                    : 'Could not resume the session. Please try again.',
-                  'Resume failed'
-                );
+                toast.error('Resume failed', {
+                  description:
+                    e instanceof Error
+                      ? e.message
+                      : 'Could not resume the session. Please try again.',
+                });
               });
           }}
           onCommitClick={handleCommitClick}
@@ -1474,17 +1485,26 @@
                   }}
                 />
                 {#if hasCodeChanges}
-                  <button
-                    class="pr-btn diff-btn"
-                    onclick={() => {
-                      reviewDiffTarget = null;
-                      showBranchDiff = true;
-                    }}
-                    title="View diff"
-                  >
-                    <FileDiff size={13} />
-                    <span>Diff</span>
-                  </button>
+                  <Tooltip.Root>
+                    <Tooltip.Trigger>
+                      {#snippet child({ props })}
+                        <Button
+                          {...props}
+                          variant="outline"
+                          size="sm"
+                          onclick={() => {
+                            reviewDiffTarget = null;
+                            showBranchDiff = true;
+                          }}
+                          class="text-xs"
+                        >
+                          <FileDiff size={13} />
+                          <span>Diff</span>
+                        </Button>
+                      {/snippet}
+                    </Tooltip.Trigger>
+                    <Tooltip.Content>View diff</Tooltip.Content>
+                  </Tooltip.Root>
                 {/if}
               </div>
             {/if}
@@ -1563,40 +1583,38 @@
   />
 {/if}
 
-{#if openNote}
-  <NoteModal
-    title={openNote.title}
-    content={openNote.content}
-    sessionId={openNote.sessionId}
-    noteUpdatedAt={openNote.noteUpdatedAt}
-    nextSteps={openNote.nextSteps}
-    onClose={() => (openNote = null)}
-    onOpenSession={(sid) => {
-      openNote = null;
-      sessionMgr.openSessionId = sid;
-    }}
-    onStartSession={(mode, prefill) => {
-      const noteRef = openNote?.noteId ? `Re: #note:${openNote.noteId}` : '';
-      openNote = null;
-      void sessionMgr.startOrQueueSession(mode, noteRef ? `${noteRef}\n${prefill}` : prefill);
-    }}
-  />
-{/if}
-
-{#if viewImageId}
-  <ImageViewerModal
-    imageId={viewImageId}
-    filename={viewImageFilename}
-    onClose={() => {
-      viewImageId = null;
-    }}
-    onDelete={() => {
-      if (viewImageId) {
-        handleDeleteImage(viewImageId);
-      }
-    }}
-  />
-{/if}
+<NoteModal
+  open={openNote !== null}
+  title={openNote?.title ?? ''}
+  content={openNote?.content ?? ''}
+  sessionId={openNote?.sessionId}
+  noteUpdatedAt={openNote?.noteUpdatedAt}
+  nextSteps={openNote?.nextSteps}
+  onClose={() => (openNote = null)}
+  onOpenSession={(sid) => {
+    openNote = null;
+    sessionMgr.openSessionId = sid;
+  }}
+  onStartSession={(mode, prefill) => {
+    const noteRef = openNote?.noteId ? `Re: #note:${openNote.noteId}` : '';
+    openNote = null;
+    void sessionMgr.startOrQueueSession(mode, noteRef ? `${noteRef}\n${prefill}` : prefill);
+  }}
+/>
+
+<ImageViewerModal
+  open={viewImageId !== null}
+  imageId={viewImageId ?? ''}
+  filename={viewImageFilename}
+  onClose={() => {
+    viewImageId = null;
+  }}
+  onDelete={() => {
+    if (viewImageId) {
+      handleDeleteImage(viewImageId);
+    }
+  }}
+/>
 
 {#if sessionMgr.showNewSession}
   {@const commitPrefillBase = suggestedPrefill.commit}
@@ -1621,6 +1639,7 @@
     (sessionMgr.newSessionMode === 'commit' && !!suggestedPrefill.commitRef) ||
     (sessionMgr.newSessionMode === 'note' && !!suggestedPrefill.noteRef)}
   <NewSessionModal
+    open={true}
     {branch}
     mode={sessionMgr.newSessionMode}
     {repoLabel}
@@ -1645,87 +1664,99 @@
   />
 {/if}
 
-{#if sessionMgr.openSessionId}
-  <SessionModal
-    sessionId={sessionMgr.openSessionId}
-    repoDir={branch.worktreePath}
-    branchId={branch.id}
-    projectId={branch.projectId}
-    {repoLabel}
-    noteInfo={findNoteForSession(sessionMgr.openSessionId)}
-    onOpenNote={(note) => {
-      const sid = sessionMgr.openSessionId;
-      sessionMgr.openSessionId = null;
-      openNote = {
-        noteId: note.id,
-        title: note.title,
-        content: note.content,
-        sessionId: sid ?? undefined,
-        noteUpdatedAt: note.updatedAt,
-        nextSteps: computeNoteNextSteps(note.id),
-      };
-    }}
-    onClose={async () => {
-      const closedSessionId = sessionMgr.openSessionId;
-      sessionMgr.openSessionId = null;
-      loadTimeline();
-      // If the closed modal was the PR session, check if it finished while open
-      if (
-        prButton &&
-        closedSessionId &&
-        closedSessionId === prButton.getPrSessionId() &&
-        prButton.getPrCreatingState() === 'creating'
-      ) {
-        try {
-          const session = await commands.getSession(closedSessionId);
-          if (session && session.status !== 'running') {
-            prButton.handlePrSessionComplete(session.status);
-          }
-        } catch {
-          // Ignore — the polling fallback will catch it
+<SessionModal
+  open={sessionMgr.openSessionId !== null}
+  sessionId={sessionMgr.openSessionId ?? ''}
+  repoDir={branch.worktreePath}
+  branchId={branch.id}
+  projectId={branch.projectId}
+  {repoLabel}
+  noteInfo={sessionMgr.openSessionId ? findNoteForSession(sessionMgr.openSessionId) : null}
+  onOpenNote={(note) => {
+    const sid = sessionMgr.openSessionId;
+    sessionMgr.openSessionId = null;
+    openNote = {
+      noteId: note.id,
+      title: note.title,
+      content: note.content,
+      sessionId: sid ?? undefined,
+      noteUpdatedAt: note.updatedAt,
+      nextSteps: computeNoteNextSteps(note.id),
+    };
+  }}
+  onClose={async () => {
+    const closedSessionId = sessionMgr.openSessionId;
+    sessionMgr.openSessionId = null;
+    loadTimeline();
+    // If the closed modal was the PR session, check if it finished while open
+    if (
+      prButton &&
+      closedSessionId &&
+      closedSessionId === prButton.getPrSessionId() &&
+      prButton.getPrCreatingState() === 'creating'
+    ) {
+      try {
+        const session = await commands.getSession(closedSessionId);
+        if (session && session.status !== 'running') {
+          prButton.handlePrSessionComplete(session.status);
         }
+      } catch {
+        // Ignore — the polling fallback will catch it
       }
-      // If the closed modal was the push session, check if it finished while open
-      if (
-        prButton &&
-        closedSessionId &&
-        closedSessionId === prButton.getPushSessionId() &&
-        prButton.getPushingState() === 'pushing'
-      ) {
-        try {
-          const session = await commands.getSession(closedSessionId);
-          if (session && session.status !== 'running') {
-            prButton.handlePushSessionComplete(session.status, session);
-          }
-        } catch {
-          // Ignore — the polling fallback will catch it
+    }
+    // If the closed modal was the push session, check if it finished while open
+    if (
+      prButton &&
+      closedSessionId &&
+      closedSessionId === prButton.getPushSessionId() &&
+      prButton.getPushingState() === 'pushing'
+    ) {
+      try {
+        const session = await commands.getSession(closedSessionId);
+        if (session && session.status !== 'running') {
+          prButton.handlePushSessionComplete(session.status, session);
         }
+      } catch {
+        // Ignore — the polling fallback will catch it
       }
-    }}
-  />
-{/if}
-
-{#if showForcePushDialog}
-  <ConfirmDialog
-    title="Force Push"
-    message="The remote branch has commits that would be lost. Do you want to force push? This will overwrite the remote branch with your local version."
-    confirmLabel="Force Push"
-    danger
-    onConfirm={confirmForcePush}
-    onCancel={() => (showForcePushDialog = false)}
-  />
-{/if}
-
-{#if confirmDelete}
-  <ConfirmDialog
-    title={confirmDelete.title}
-    message={confirmDelete.message}
-    confirmLabel={confirmDelete.confirmLabel ?? 'Delete'}
-    danger
-    onConfirm={confirmDelete.onConfirm}
-    onCancel={() => (confirmDelete = null)}
-  />
-{/if}
+    }
+  }}
+/>
+
+<AlertDialog.Root bind:open={showForcePushDialog}>
+  <AlertDialog.Content>
+    <AlertDialog.Header>
+      <AlertDialog.Title>Force Push</AlertDialog.Title>
+      <AlertDialog.Description>
+        The remote branch has commits that would be lost. Do you want to force push? This will
+        overwrite the remote branch with your local version.
+      </AlertDialog.Description>
+    </AlertDialog.Header>
+    <AlertDialog.Footer>
+      <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+      <AlertDialog.Action variant="destructive" onclick={confirmForcePush}>
+        Force Push
+      </AlertDialog.Action>
+    </AlertDialog.Footer>
+  </AlertDialog.Content>
+</AlertDialog.Root>
+
+<AlertDialog.Root open={confirmDelete !== null} onOpenChange={(v) => !v && (confirmDelete = null)}>
+  <AlertDialog.Content>
+    {#if confirmDelete}
+      <AlertDialog.Header>
+        <AlertDialog.Title>{confirmDelete.title}</AlertDialog.Title>
+        <AlertDialog.Description>{confirmDelete.message}</AlertDialog.Description>
+      </AlertDialog.Header>
+      <AlertDialog.Footer>
+        <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+        <AlertDialog.Action variant="destructive" onclick={confirmDelete.onConfirm}>
+          {confirmDelete.confirmLabel ?? 'Delete'}
+        </AlertDialog.Action>
+      </AlertDialog.Footer>
+    {/if}
+  </AlertDialog.Content>
+</AlertDialog.Root>
 
 <style>
   .branch-card {
@@ -1814,24 +1845,6 @@
     stroke: var(--text-muted);
   }
 
-  .more-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 6px;
-    background: transparent;
-    border: none;
-    border-radius: 6px;
-    color: var(--text-faint);
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-
-  .more-button:hover {
-    background-color: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
   :global(.branch-icon) {
     color: var(--branch-color);
     flex-shrink: 0;
@@ -1859,21 +1872,6 @@
     font-size: var(--size-sm);
   }
 
-  .error .retry-btn {
-    padding: 2px 10px;
-    border-radius: 4px;
-    border: 1px solid var(--border-subtle);
-    background: none;
-    color: var(--text-muted);
-    font-size: var(--size-xs);
-    cursor: pointer;
-  }
-
-  .error .retry-btn:hover {
-    color: var(--text-primary);
-    background: var(--bg-hover);
-  }
-
   /* Worktree error state */
   .worktree-error {
     display: flex;
@@ -1897,59 +1895,10 @@
     margin-top: 1px;
   }
 
-  .worktree-retry-btn {
-    flex-shrink: 0;
-    padding: 5px 14px;
-    background: none;
-    border: 1px solid var(--border-muted);
-    border-radius: 6px;
-    color: var(--text-primary);
-    font-size: var(--size-xs);
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-
-  .worktree-retry-btn:hover {
-    border-color: var(--ui-accent);
-    color: var(--ui-accent);
-    background-color: var(--bg-hover);
-  }
-
   /* Footer right actions (PR and diff buttons) */
   .footer-right-actions {
     display: flex;
     align-items: center;
     gap: 4px;
   }
-
-  /* Diff button (reuses pr-btn style) */
-  .pr-btn {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    padding: 4px 10px;
-    background: none;
-    border: 1px solid var(--border-subtle);
-    border-radius: 6px;
-    color: var(--text-muted);
-    font-size: var(--size-xs);
-    font-weight: 500;
-    cursor: pointer;
-    transition:
-      color 0.15s,
-      border-color 0.15s,
-      background-color 0.15s;
-    white-space: nowrap;
-  }
-
-  .pr-btn:hover:not(:disabled) {
-    color: var(--text-primary);
-    border-color: var(--border-muted);
-    background: var(--bg-hover);
-  }
-
-  .pr-btn :global(svg) {
-    flex-shrink: 0;
-  }
 </style>
diff --git a/apps/staged/src/lib/features/branches/BranchCardActionsBar.svelte b/apps/staged/src/lib/features/branches/BranchCardActionsBar.svelte
index 61c63c81a..b6e327b2e 100644
--- a/apps/staged/src/lib/features/branches/BranchCardActionsBar.svelte
+++ b/apps/staged/src/lib/features/branches/BranchCardActionsBar.svelte
@@ -8,22 +8,21 @@
   import { onMount, onDestroy } from 'svelte';
   import { slide, fade } from 'svelte/transition';
   import { cubicOut } from 'svelte/easing';
-  import {
-    GitBranch,
-    Play,
-    Hammer,
-    FlaskConical,
-    Check,
-    CheckCircle,
-    Wrench,
-    AlertCircle,
-    StopCircle,
-    Copy,
-    Zap,
-    Wand2,
-    ExternalLink,
-    Trash2,
-  } from 'lucide-svelte';
+  import GitBranch from '@lucide/svelte/icons/git-branch';
+  import Play from '@lucide/svelte/icons/play';
+  import Hammer from '@lucide/svelte/icons/hammer';
+  import FlaskConical from '@lucide/svelte/icons/flask-conical';
+  import Check from '@lucide/svelte/icons/check';
+  import CheckCircle from '@lucide/svelte/icons/check-circle';
+  import Wrench from '@lucide/svelte/icons/wrench';
+  import AlertCircle from '@lucide/svelte/icons/alert-circle';
+  import StopCircle from '@lucide/svelte/icons/stop-circle';
+  import Copy from '@lucide/svelte/icons/copy';
+  import Zap from '@lucide/svelte/icons/zap';
+  import Wand2 from '@lucide/svelte/icons/wand-2';
+  import ExternalLink from '@lucide/svelte/icons/external-link';
+  import Trash2 from '@lucide/svelte/icons/trash-2';
+  import MoreVertical from '@lucide/svelte/icons/more-vertical';
   import Spinner from '../../shared/Spinner.svelte';
   import SineWave from '../../shared/SineWave.svelte';
   import ActionOutputModal from '../actions/ActionOutputModal.svelte';
@@ -51,12 +50,33 @@
     getSecondaryRunningActions,
     groupActionsByType,
   } from './branchCardHelpers';
-  import { alerts } from '../../shared/alerts.svelte';
+  import { toast } from 'svelte-sonner';
   import { bloxEnv } from '../../stores/bloxEnv.svelte';
   import { getPreferredAgent } from '../settings/preferences.svelte';
   import { agentState } from '../agents/agent.svelte';
-  import MoreMenu from '../../shared/menu/MoreMenu.svelte';
-  import type { MenuItem } from '../../shared/menu/types';
+  import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
+
+  type MenuIconComponent = typeof MoreVertical;
+  type ActionMenuItem = {
+    type: 'action';
+    label: string;
+    icon?: MenuIconComponent;
+    iconSrc?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    onSelect: () => void | Promise<void>;
+  };
+  type SeparatorMenuItem = { type: 'separator' };
+  type SubmenuMenuItem = {
+    type: 'submenu';
+    label: string;
+    icon?: MenuIconComponent;
+    disabled?: boolean;
+    children: MenuItem[];
+  };
+  type MenuItem = ActionMenuItem | SeparatorMenuItem | SubmenuMenuItem;
 
   interface Props {
     branch: Branch;
@@ -124,11 +144,9 @@
   }
 
   function notifyError(title: string, e: unknown): void {
-    alerts.show({
-      tone: 'error',
-      title,
-      message: e instanceof Error ? e.message : String(e),
-      durationMs: 0,
+    toast.error(title, {
+      description: e instanceof Error ? e.message : String(e),
+      duration: Infinity,
     });
   }
 
@@ -597,92 +615,10 @@
     return items;
   }
 
-  let moreMenuItems = $derived.by<MenuItem[]>(() => {
-    const items: MenuItem[] = [];
-
-    if (!isSettingUp) {
-      if (isRemote && branch.workspaceName) {
-        items.push({
-          type: 'action',
-          label: 'Copy Workspace Name',
-          icon: Copy,
-          onSelect: () => {
-            navigator.clipboard.writeText(branch.workspaceName!);
-          },
-        });
-      }
-
-      if (hasActionsForSubmenu) {
-        items.push({
-          type: 'submenu',
-          label: 'Actions',
-          icon: Play,
-          children: buildActionMenuItems(),
-        });
-      }
-
-      if (isLocal && branch.worktreePath && openerApps.length > 0) {
-        items.push(
-          { type: 'separator' },
-          {
-            type: 'submenu',
-            label: 'Open In',
-            icon: ExternalLink,
-            children: buildOpenInMenuItems(),
-          }
-        );
-      } else if (isLocal && branch.worktreePath) {
-        items.push(
-          { type: 'separator' },
-          {
-            type: 'action',
-            label: 'Copy Worktree Path',
-            icon: Copy,
-            onSelect: handleCopyPath,
-          }
-        );
-      }
-
-      items.push(
-        { type: 'separator' },
-        {
-          type: 'action',
-          label: 'Rename Branch',
-          icon: GitBranch,
-          onSelect: handleRenameFromMenu,
-        },
-        {
-          type: 'action',
-          label: 'Rebase Branch',
-          icon: GitBranch,
-          disabled: newCommitDisabled,
-          onSelect: () => onRebaseBranch?.(),
-        }
-      );
-
-      if (commitCount >= 2) {
-        items.push({
-          type: 'action',
-          label: 'Squash Commits',
-          icon: GitBranch,
-          disabled: newCommitDisabled,
-          onSelect: () => onSquashCommits?.(),
-        });
-      }
-
-      items.push({ type: 'separator' });
-    }
-
-    items.push({
-      type: 'action',
-      label: 'Delete Repo',
-      icon: Trash2,
-      danger: true,
-      onSelect: handleDeleteFromMenu,
-    });
-
-    return items;
-  });
+  let actionMenuItems = $derived.by(() => (hasActionsForSubmenu ? buildActionMenuItems() : []));
+  let openInMenuItems = $derived.by(() =>
+    isLocal && branch.worktreePath && openerApps.length > 0 ? buildOpenInMenuItems() : []
+  );
 </script>
 
 <!-- Running actions (excluding primary action) -->
@@ -697,49 +633,62 @@
       class:fading={execution.fading}
       transition:slideAndFade={{ duration: 300, axis: 'x' }}
     >
-      <button
-        class="running-action-button"
-        class:running={isRunning}
-        class:stopping={isStopping}
-        class:completed={execution.status === 'completed'}
-        class:failed={execution.status === 'failed'}
-        class:show-stop={showStopIcon}
-        onclick={() => {
-          if (isRunning && altHeld && !isStopping) {
-            handleStopAction(execution.executionId, execution.actionName);
-          } else {
-            handleShowActionOutput(execution);
-          }
-        }}
-        title={isStopping
-          ? 'Stopping…'
-          : showStopIcon
-            ? `Stop ${execution.actionName}`
-            : isRunning
-              ? `View output for ${execution.actionName}`
-              : execution.status === 'completed'
-                ? `${execution.actionName} completed`
-                : execution.status === 'failed'
-                  ? `${execution.actionName} failed`
-                  : execution.actionName}
-      >
-        {#if isStopping}
-          <Spinner size={12} class="danger" />
-        {:else if showStopIcon}
-          <StopCircle size={12} />
-        {:else if isRunning && phase && phase.type !== 'building' && execution.actionType === 'run'}
-          <SineWave size={12} />
-        {:else if isRunning}
-          <Spinner size={12} />
-        {:else if execution.status === 'completed'}
-          <CheckCircle size={12} />
-        {:else if execution.status === 'failed'}
-          <AlertCircle size={12} />
-        {:else}
-          <StopCircle size={12} />
-        {/if}
-        {execution.actionName}
-      </button>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <Button
+              {...props}
+              variant="ghost"
+              class={[
+                'h-auto whitespace-nowrap rounded-full border bg-[var(--bg-elevated)] border-[var(--border-muted)] px-3 py-1.5 gap-1.5 text-xs text-foreground hover:bg-[var(--bg-hover)] hover:border-[var(--border-focus)] [&_svg]:!size-3',
+                execution.status === 'completed' &&
+                  'border-[var(--status-added)] text-[var(--status-added)]',
+                execution.status === 'failed' && 'border-destructive text-destructive',
+                isStopping &&
+                  'opacity-60 hover:bg-[var(--bg-elevated)] hover:border-[var(--border-muted)]',
+                showStopIcon && 'border-destructive text-destructive',
+              ]}
+              onclick={() => {
+                if (isRunning && altHeld && !isStopping) {
+                  handleStopAction(execution.executionId, execution.actionName);
+                } else {
+                  handleShowActionOutput(execution);
+                }
+              }}
+            >
+              {#if isStopping}
+                <Spinner size={12} class="danger" />
+              {:else if showStopIcon}
+                <StopCircle size={12} />
+              {:else if isRunning && phase && phase.type !== 'building' && execution.actionType === 'run'}
+                <SineWave size={12} />
+              {:else if isRunning}
+                <Spinner size={12} />
+              {:else if execution.status === 'completed'}
+                <CheckCircle size={12} />
+              {:else if execution.status === 'failed'}
+                <AlertCircle size={12} />
+              {:else}
+                <StopCircle size={12} />
+              {/if}
+              {execution.actionName}
+            </Button>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content>
+          {isStopping
+            ? 'Stopping…'
+            : showStopIcon
+              ? `Stop ${execution.actionName}`
+              : isRunning
+                ? `View output for ${execution.actionName}`
+                : execution.status === 'completed'
+                  ? `${execution.actionName} completed`
+                  : execution.status === 'failed'
+                    ? `${execution.actionName} failed`
+                    : execution.actionName}
+        </Tooltip.Content>
+      </Tooltip.Root>
     </div>
   {/each}
   <!-- Primary run action button -->
@@ -762,175 +711,315 @@
       {#if isRunning && hasEndpoint && phase?.type === 'running' && phase.endpoint}
         <!-- Pill-shaped button when running with endpoint -->
         <div class="primary-action-pill">
-          <button
-            class="primary-action-pill-main"
-            class:stopping={isStopping}
-            class:show-stop={showStopIcon}
-            onclick={() => {
-              if (altHeld && !isStopping && execution) {
-                handleStopAction(execution.executionId, primaryRunAction.name);
-              } else if (execution) {
-                handleShowActionOutput(execution);
-              }
-            }}
-            title={isStopping
-              ? 'Stopping…'
-              : showStopIcon
-                ? `Stop ${primaryRunAction.name}`
-                : `View output for ${primaryRunAction.name}`}
-          >
-            {#if isStopping}
-              <Spinner size={14} class="danger" />
-            {:else if showStopIcon}
-              <StopCircle size={14} />
-            {:else}
-              <SineWave size={14} />
-            {/if}
-          </button>
-          <button
-            class="primary-action-pill-copy"
-            onclick={(e) => {
-              e.stopPropagation();
-              if (phase?.type === 'running' && phase.endpoint && execution && copyUrl) {
-                navigator.clipboard.writeText(copyUrl).catch(() => {});
-                const id = execution.executionId;
-                if (endpointCopiedTimers[id]) clearTimeout(endpointCopiedTimers[id]);
-                endpointCopied[id] = true;
-                endpointCopiedTimers[id] = setTimeout(() => {
-                  delete endpointCopied[id];
-                  delete endpointCopiedTimers[id];
-                }, 1500);
-              }
-            }}
-            title="Copy endpoint: {copyUrl}"
-          >
-            {#if execution && endpointCopied[execution.executionId]}
-              <span
-                class="copy-icon-wrapper"
-                in:fade={{ duration: 150 }}
-                out:fade={{ duration: 150 }}
-              >
-                <Check size={12} />
-              </span>
-            {:else}
-              <span
-                class="copy-icon-wrapper"
-                in:fade={{ duration: 150 }}
-                out:fade={{ duration: 150 }}
-              >
-                <Copy size={12} />
-              </span>
-            {/if}
-          </button>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="ghost"
+                  class={[
+                    'size-7 rounded-full border-0 bg-transparent text-muted-foreground hover:bg-transparent hover:text-foreground [&_svg]:!size-3.5',
+                    isStopping && 'opacity-60',
+                    showStopIcon && 'text-destructive',
+                  ]}
+                  onclick={() => {
+                    if (altHeld && !isStopping && execution) {
+                      handleStopAction(execution.executionId, primaryRunAction.name);
+                    } else if (execution) {
+                      handleShowActionOutput(execution);
+                    }
+                  }}
+                >
+                  {#if isStopping}
+                    <Spinner size={14} class="danger" />
+                  {:else if showStopIcon}
+                    <StopCircle size={14} />
+                  {:else}
+                    <SineWave size={14} />
+                  {/if}
+                </Button>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>
+              {isStopping
+                ? 'Stopping…'
+                : showStopIcon
+                  ? `Stop ${primaryRunAction.name}`
+                  : `View output for ${primaryRunAction.name}`}
+            </Tooltip.Content>
+          </Tooltip.Root>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="ghost"
+                  class="relative size-7 rounded-none border-0 border-l border-l-[var(--border-muted)] bg-transparent text-muted-foreground hover:bg-[var(--bg-elevated)] hover:text-foreground [&_svg]:!size-3"
+                  onclick={(e) => {
+                    e.stopPropagation();
+                    if (phase?.type === 'running' && phase.endpoint && execution && copyUrl) {
+                      navigator.clipboard.writeText(copyUrl).catch(() => {});
+                      const id = execution.executionId;
+                      if (endpointCopiedTimers[id]) clearTimeout(endpointCopiedTimers[id]);
+                      endpointCopied[id] = true;
+                      endpointCopiedTimers[id] = setTimeout(() => {
+                        delete endpointCopied[id];
+                        delete endpointCopiedTimers[id];
+                      }, 1500);
+                    }
+                  }}
+                >
+                  {#if execution && endpointCopied[execution.executionId]}
+                    <span
+                      class="copy-icon-wrapper"
+                      in:fade={{ duration: 150 }}
+                      out:fade={{ duration: 150 }}
+                    >
+                      <Check size={12} />
+                    </span>
+                  {:else}
+                    <span
+                      class="copy-icon-wrapper"
+                      in:fade={{ duration: 150 }}
+                      out:fade={{ duration: 150 }}
+                    >
+                      <Copy size={12} />
+                    </span>
+                  {/if}
+                </Button>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>Copy endpoint: {copyUrl}</Tooltip.Content>
+          </Tooltip.Root>
         </div>
       {:else}
         <!-- Standard circular button -->
-        <button
-          class="primary-action-button"
-          class:running={isRunning}
-          class:stopping={isStopping}
-          class:completed={execution?.status === 'completed'}
-          class:failed={execution?.status === 'failed'}
-          class:show-stop={showStopIcon}
-          onclick={() => {
-            if (isRunning && altHeld && !isStopping && execution) {
-              handleStopAction(execution.executionId, primaryRunAction.name);
-            } else if (isRunning && execution) {
-              handleShowActionOutput(execution);
-            } else if (isStopping && execution) {
-              handleShowActionOutput(execution);
-            } else {
-              handleRunAction(primaryRunAction);
-            }
-          }}
-          title={isStopping
-            ? 'Stopping…'
-            : showStopIcon
-              ? `Stop ${primaryRunAction.name}`
-              : isRunning
-                ? `View output for ${primaryRunAction.name}`
-                : execution?.status === 'completed'
-                  ? `${primaryRunAction.name} completed`
-                  : execution?.status === 'failed'
-                    ? `${primaryRunAction.name} failed`
-                    : primaryRunAction.name}
-        >
-          {#if isStopping}
-            <Spinner size={14} class="danger" />
-          {:else if showStopIcon}
-            <StopCircle size={14} />
-          {:else if isRunning && phase?.type === 'building'}
-            <Spinner size={14} />
-          {:else if isRunning}
-            <SineWave size={14} />
-          {:else if execution?.status === 'completed'}
-            <CheckCircle size={14} />
-          {:else if execution?.status === 'failed'}
-            <AlertCircle size={14} />
-          {:else}
-            <Play size={14} />
-          {/if}
-        </button>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <Button
+                {...props}
+                variant="ghost"
+                class={[
+                  'size-7 rounded-full border-0 bg-[var(--bg-elevated)] hover:bg-[var(--bg-hover)] [&_svg]:!size-3.5',
+                  isRunning &&
+                    'bg-[var(--bg-hover)] text-muted-foreground hover:bg-[var(--bg-elevated)]',
+                  execution?.status === 'completed' &&
+                    'bg-[var(--bg-hover)] text-[var(--status-added)] hover:bg-[var(--bg-hover)]',
+                  execution?.status === 'failed' &&
+                    'bg-[var(--bg-hover)] text-destructive hover:bg-[var(--bg-hover)]',
+                  isStopping && 'opacity-60 hover:bg-[var(--bg-elevated)]',
+                  showStopIcon && 'text-destructive',
+                ]}
+                onclick={() => {
+                  if (isRunning && altHeld && !isStopping && execution) {
+                    handleStopAction(execution.executionId, primaryRunAction.name);
+                  } else if (isRunning && execution) {
+                    handleShowActionOutput(execution);
+                  } else if (isStopping && execution) {
+                    handleShowActionOutput(execution);
+                  } else {
+                    handleRunAction(primaryRunAction);
+                  }
+                }}
+              >
+                {#if isStopping}
+                  <Spinner size={14} class="danger" />
+                {:else if showStopIcon}
+                  <StopCircle size={14} />
+                {:else if isRunning && phase?.type === 'building'}
+                  <Spinner size={14} />
+                {:else if isRunning}
+                  <SineWave size={14} />
+                {:else if execution?.status === 'completed'}
+                  <CheckCircle size={14} />
+                {:else if execution?.status === 'failed'}
+                  <AlertCircle size={14} />
+                {:else}
+                  <Play size={14} />
+                {/if}
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content>
+            {isStopping
+              ? 'Stopping…'
+              : showStopIcon
+                ? `Stop ${primaryRunAction.name}`
+                : isRunning
+                  ? `View output for ${primaryRunAction.name}`
+                  : execution?.status === 'completed'
+                    ? `${primaryRunAction.name} completed`
+                    : execution?.status === 'failed'
+                      ? `${primaryRunAction.name} failed`
+                      : primaryRunAction.name}
+          </Tooltip.Content>
+        </Tooltip.Root>
       {/if}
     </div>
   {/if}
 {/if}
-<MoreMenu items={moreMenuItems} ariaLabel="Branch actions" title="More options" minWidth={160} />
-
-{#if actionOutputModal}
-  <ActionOutputModal
-    executionId={actionOutputModal.executionId}
-    branchId={branch.id}
-    actionName={actionOutputModal.actionName}
-    isStopping={actionOutputModal.isStopping}
-    onClose={() => (actionOutputModal = null)}
-    onRunAgain={async () => {
-      const action = actions.find((a) => a.id === actionOutputModal?.actionId);
-      if (!action) return;
-
-      // Clean up stale executions of this action
-      const staleExecutions = runningActions.filter(
-        (a) => a.actionId === action.id && a.status !== 'running'
-      );
-      for (const stale of staleExecutions) {
-        clearActionExecution(stale.executionId).catch(() => {});
-      }
-      runningActions = runningActions.filter(
-        (a) => !(a.actionId === action.id && a.status !== 'running')
-      );
-
-      // If already running, just switch the modal to that execution
-      const existingExecution = runningActions.find(
-        (a) => a.actionId === action.id && a.status === 'running'
-      );
-      if (existingExecution) {
-        actionOutputModal = {
-          executionId: existingExecution.executionId,
-          actionId: action.id,
-          actionName: action.name,
-          isStopping: stoppingExecutions.has(existingExecution.executionId),
-        };
-        return;
-      }
+{#snippet renderSubItems(items: MenuItem[])}
+  {#each items as item, i (i)}
+    {#if item.type === 'separator'}
+      <DropdownMenu.Separator />
+    {:else if item.type === 'action'}
+      <DropdownMenu.Item disabled={item.disabled} onSelect={item.onSelect}>
+        {#if item.icon}
+          {@const Icon = item.icon}
+          <Icon size={14} />
+        {:else if item.iconSrc}
+          <img src={item.iconSrc} alt="" width="14" height="14" class="shrink-0 rounded-[3px]" />
+        {/if}
+        {item.label}
+      </DropdownMenu.Item>
+    {/if}
+  {/each}
+{/snippet}
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger
+    class="inline-flex h-7 w-7 items-center justify-center rounded-md text-[var(--text-faint)] transition-colors hover:bg-[var(--bg-hover)] hover:text-foreground focus-visible:bg-[var(--bg-hover)] focus-visible:text-foreground focus-visible:outline-none data-[state=open]:bg-[var(--bg-hover)] data-[state=open]:text-foreground disabled:cursor-not-allowed disabled:opacity-45"
+    aria-label="More options"
+    title="More options"
+  >
+    <MoreVertical size={16} />
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content align="end" sideOffset={4} class="min-w-[160px]">
+    {#if !isSettingUp}
+      {#if isRemote && branch.workspaceName}
+        <DropdownMenu.Item
+          onSelect={() => {
+            navigator.clipboard.writeText(branch.workspaceName!);
+          }}
+        >
+          <Copy size={14} /> Copy Workspace Name
+        </DropdownMenu.Item>
+      {/if}
+      {#if hasActionsForSubmenu}
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger>
+            <Play size={14} /> Actions
+          </DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent class="min-w-[160px]">
+            {#each actionMenuItems as item, i (i)}
+              {#if item.type === 'separator'}
+                <DropdownMenu.Separator />
+              {:else if item.type === 'submenu'}
+                <DropdownMenu.Sub>
+                  <DropdownMenu.SubTrigger>
+                    {#if item.icon}
+                      {@const Icon = item.icon}
+                      <Icon size={14} />
+                    {/if}
+                    {item.label}
+                  </DropdownMenu.SubTrigger>
+                  <DropdownMenu.SubContent class="min-w-[160px]">
+                    {@render renderSubItems(item.children)}
+                  </DropdownMenu.SubContent>
+                </DropdownMenu.Sub>
+              {:else}
+                <DropdownMenu.Item disabled={item.disabled} onSelect={item.onSelect}>
+                  {#if item.icon}
+                    {@const Icon = item.icon}
+                    <Icon size={14} />
+                  {/if}
+                  {item.label}
+                </DropdownMenu.Item>
+              {/if}
+            {/each}
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
+      {/if}
+      {#if isLocal && branch.worktreePath && openerApps.length > 0}
+        <DropdownMenu.Separator />
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger>
+            <ExternalLink size={14} /> Open In
+          </DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent class="min-w-[160px]">
+            {@render renderSubItems(openInMenuItems)}
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
+      {:else if isLocal && branch.worktreePath}
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item onSelect={handleCopyPath}>
+          <Copy size={14} /> Copy Worktree Path
+        </DropdownMenu.Item>
+      {/if}
+      <DropdownMenu.Separator />
+      <DropdownMenu.Item onSelect={handleRenameFromMenu}>
+        <GitBranch size={14} /> Rename Branch
+      </DropdownMenu.Item>
+      <DropdownMenu.Item disabled={newCommitDisabled} onSelect={() => onRebaseBranch?.()}>
+        <GitBranch size={14} /> Rebase Branch
+      </DropdownMenu.Item>
+      {#if commitCount >= 2}
+        <DropdownMenu.Item disabled={newCommitDisabled} onSelect={() => onSquashCommits?.()}>
+          <GitBranch size={14} /> Squash Commits
+        </DropdownMenu.Item>
+      {/if}
+      <DropdownMenu.Separator />
+    {/if}
+    <DropdownMenu.Item variant="destructive" onSelect={handleDeleteFromMenu}>
+      <Trash2 size={14} /> Delete Repo
+    </DropdownMenu.Item>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<ActionOutputModal
+  open={actionOutputModal !== null}
+  executionId={actionOutputModal?.executionId ?? ''}
+  branchId={branch.id}
+  actionName={actionOutputModal?.actionName ?? ''}
+  isStopping={actionOutputModal?.isStopping}
+  onClose={() => (actionOutputModal = null)}
+  onRunAgain={async () => {
+    const action = actions.find((a) => a.id === actionOutputModal?.actionId);
+    if (!action) return;
+
+    // Clean up stale executions of this action
+    const staleExecutions = runningActions.filter(
+      (a) => a.actionId === action.id && a.status !== 'running'
+    );
+    for (const stale of staleExecutions) {
+      clearActionExecution(stale.executionId).catch(() => {});
+    }
+    runningActions = runningActions.filter(
+      (a) => !(a.actionId === action.id && a.status !== 'running')
+    );
 
-      try {
-        const provider = getPreferredAgent(agentState.providers) ?? undefined;
-        const newExecutionId = await runBranchAction(branch.id, action.id, provider);
-        // Keep the modal open and switch to the new execution
-        actionOutputModal = {
-          executionId: newExecutionId,
-          actionId: action.id,
-          actionName: action.name,
-          isStopping: false,
-        };
-      } catch (e) {
-        console.error('Failed to run action:', e);
-        notifyError(`Failed to run action "${action.name}"`, e);
-      }
-    }}
-    {onNoteCreated}
-  />
-{/if}
+    // If already running, just switch the modal to that execution
+    const existingExecution = runningActions.find(
+      (a) => a.actionId === action.id && a.status === 'running'
+    );
+    if (existingExecution) {
+      actionOutputModal = {
+        executionId: existingExecution.executionId,
+        actionId: action.id,
+        actionName: action.name,
+        isStopping: stoppingExecutions.has(existingExecution.executionId),
+      };
+      return;
+    }
+
+    try {
+      const provider = getPreferredAgent(agentState.providers) ?? undefined;
+      const newExecutionId = await runBranchAction(branch.id, action.id, provider);
+      // Keep the modal open and switch to the new execution
+      actionOutputModal = {
+        executionId: newExecutionId,
+        actionId: action.id,
+        actionName: action.name,
+        isStopping: false,
+      };
+    } catch (e) {
+      console.error('Failed to run action:', e);
+      notifyError(`Failed to run action "${action.name}"`, e);
+    }
+  }}
+  {onNoteCreated}
+/>
 
 <style>
   /* Primary action button — circular icon-only */
@@ -940,63 +1029,6 @@
     overflow: hidden;
   }
 
-  .primary-action-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    background: var(--bg-elevated);
-    border: none;
-    border-radius: 50%;
-    color: var(--text-base);
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-
-  .primary-action-button:hover {
-    background: var(--bg-hover);
-  }
-
-  .primary-action-button.running {
-    background: var(--bg-hover);
-    color: var(--text-muted);
-  }
-
-  .primary-action-button.running:hover {
-    background: var(--bg-elevated);
-  }
-
-  .primary-action-button.completed {
-    background: var(--bg-hover);
-    color: var(--status-added);
-  }
-
-  .primary-action-button.failed {
-    background: var(--bg-hover);
-    color: var(--ui-danger);
-  }
-
-  .primary-action-button.stopping {
-    opacity: 0.6;
-    cursor: pointer;
-  }
-
-  .primary-action-button.stopping:hover {
-    background: var(--bg-elevated);
-  }
-
-  .primary-action-button.show-stop {
-    color: var(--ui-danger);
-  }
-
-  .primary-action-button :global(svg) {
-    flex-shrink: 0;
-    width: 14px;
-    height: 14px;
-  }
-
   /* Primary action pill (endpoint running state) */
   .primary-action-pill {
     display: flex;
@@ -1007,54 +1039,6 @@
     overflow: hidden;
   }
 
-  .primary-action-pill-main {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    background: none;
-    border: none;
-    color: var(--text-muted);
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-
-  .primary-action-pill-main:hover {
-    color: var(--text-base);
-  }
-
-  .primary-action-pill-main.stopping {
-    opacity: 0.6;
-  }
-
-  .primary-action-pill-main.show-stop {
-    color: var(--ui-danger);
-  }
-
-  .primary-action-pill-main :global(svg) {
-    flex-shrink: 0;
-    width: 14px;
-    height: 14px;
-  }
-
-  .primary-action-pill-copy {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    background: none;
-    border: none;
-    border-left: 1px solid var(--border-muted);
-    color: var(--text-muted);
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-
   .copy-icon-wrapper {
     position: absolute;
     display: flex;
@@ -1062,15 +1046,6 @@
     justify-content: center;
   }
 
-  .primary-action-pill-copy:hover {
-    color: var(--text-base);
-    background: var(--bg-elevated);
-  }
-
-  .primary-action-pill-copy :global(svg) {
-    flex-shrink: 0;
-  }
-
   /* Running actions */
   .running-action-container {
     display: flex;
@@ -1086,55 +1061,4 @@
       opacity 0.3s ease,
       transform 0.3s ease;
   }
-
-  .running-action-button {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 12px;
-    background: var(--bg-elevated);
-    border: 1px solid var(--border-muted);
-    border-radius: 999px;
-    color: var(--text-primary);
-    font-size: var(--size-xs);
-    cursor: pointer;
-    white-space: nowrap;
-    transition:
-      background-color 0.15s ease,
-      border-color 0.15s ease;
-  }
-
-  .running-action-button:hover {
-    background: var(--bg-hover);
-    border-color: var(--border-focus);
-  }
-
-  .running-action-button.completed {
-    border-color: var(--status-added);
-    color: var(--status-added);
-  }
-
-  .running-action-button.failed {
-    border-color: var(--ui-danger);
-    color: var(--ui-danger);
-  }
-
-  .running-action-button.stopping {
-    opacity: 0.6;
-    cursor: pointer;
-  }
-
-  .running-action-button.stopping:hover {
-    background: var(--bg-elevated);
-    border-color: var(--border-muted);
-  }
-
-  .running-action-button.show-stop {
-    border-color: var(--ui-danger);
-    color: var(--ui-danger);
-  }
-
-  .running-action-button :global(svg) {
-    flex-shrink: 0;
-  }
 </style>
diff --git a/apps/staged/src/lib/features/branches/BranchCardHeaderInfo.svelte b/apps/staged/src/lib/features/branches/BranchCardHeaderInfo.svelte
index defd2c20a..7f06809ca 100644
--- a/apps/staged/src/lib/features/branches/BranchCardHeaderInfo.svelte
+++ b/apps/staged/src/lib/features/branches/BranchCardHeaderInfo.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
   import { fade, slide } from 'svelte/transition';
-  import { AlertTriangle, ChevronRight } from 'lucide-svelte';
+  import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
+  import ChevronRight from '@lucide/svelte/icons/chevron-right';
   import Spinner from '../../shared/Spinner.svelte';
   import RepoLabel from '../../shared/RepoLabel.svelte';
   import ParentBranchCommitsHover from './ParentBranchCommitsHover.svelte';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
   import type { ProjectRepo } from '../../types';
 
   interface Props {
@@ -34,14 +37,21 @@
 </script>
 
 {#snippet capsule()}
-  <span class="branch-capsule" title={baseBranch}>
-    {baseBranch}{#if parentAheadCount > 0}<span
-        class="ahead-count"
-        transition:fade={{ duration: 150 }}
-      >
-        +{parentAheadCount}</span
-      >{/if}
-  </span>
+  <Tooltip.Root>
+    <Tooltip.Trigger>
+      {#snippet child({ props })}
+        <span class="branch-capsule" {...props}>
+          {baseBranch}{#if parentAheadCount > 0}<span
+              class="ahead-count"
+              transition:fade={{ duration: 150 }}
+            >
+              +{parentAheadCount}</span
+            >{/if}
+        </span>
+      {/snippet}
+    </Tooltip.Trigger>
+    <Tooltip.Content>{baseBranch}</Tooltip.Content>
+  </Tooltip.Root>
 {/snippet}
 
 {#snippet parentPill()}
@@ -54,13 +64,24 @@
       {@render capsule()}
     {/if}
     {#if parentAheadCount > 0 && onRebase}
-      <button
-        class="rebase-btn"
-        disabled={rebaseDisabled}
-        title={rebaseDisabled ? 'Rebase unavailable' : 'Rebase onto parent'}
-        onclick={onRebase}
-        transition:slide={{ axis: 'x', duration: 150 }}>Rebase</button
-      >
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <span {...props} class="inline-flex" transition:slide={{ axis: 'x', duration: 150 }}>
+              <Button
+                variant="outline"
+                size="xs"
+                disabled={rebaseDisabled}
+                onclick={onRebase}
+                class="h-[22px]">Rebase</Button
+              >
+            </span>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content>
+          {rebaseDisabled ? 'Rebase unavailable' : 'Rebase onto parent'}
+        </Tooltip.Content>
+      </Tooltip.Root>
     {/if}
   {/if}
 {/snippet}
@@ -69,9 +90,16 @@
   {#if refreshingGitState}
     <Spinner size={10} />
   {:else if fetchError}
-    <span class="fetch-error" title={fetchError} transition:slide={{ axis: 'x', duration: 150 }}>
-      <AlertTriangle size={12} />
-    </span>
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        {#snippet child({ props })}
+          <span class="fetch-error" {...props} transition:slide={{ axis: 'x', duration: 150 }}>
+            <AlertTriangle size={12} />
+          </span>
+        {/snippet}
+      </Tooltip.Trigger>
+      <Tooltip.Content>{fetchError}</Tooltip.Content>
+    </Tooltip.Root>
   {/if}
 {/snippet}
 
@@ -84,16 +112,30 @@
       /></span
     >
     <div class="header-meta">
-      <span class="branch-capsule" title={branchName}>{branchName}</span>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <span class="branch-capsule" {...props}>{branchName}</span>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content>{branchName}</Tooltip.Content>
+      </Tooltip.Root>
       {#if baseBranch}
         <ChevronRight size={12} />
       {/if}
       {@render parentPill()}
       {#if warning}
-        <span class="branch-warning" title={warning}>
-          <AlertTriangle size={12} />
-          <span>{warning}</span>
-        </span>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <span class="branch-warning" {...props}>
+                <AlertTriangle size={12} />
+                <span>{warning}</span>
+              </span>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content>{warning}</Tooltip.Content>
+        </Tooltip.Root>
       {/if}
       {@render refreshStatus()}
     </div>
@@ -103,10 +145,17 @@
       <div class="header-meta">
         {@render parentPill()}
         {#if warning}
-          <span class="branch-warning" title={warning}>
-            <AlertTriangle size={12} />
-            <span>{warning}</span>
-          </span>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <span class="branch-warning" {...props}>
+                  <AlertTriangle size={12} />
+                  <span>{warning}</span>
+                </span>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>{warning}</Tooltip.Content>
+          </Tooltip.Root>
         {/if}
         {@render refreshStatus()}
       </div>
@@ -167,37 +216,6 @@
     color: var(--ui-accent);
   }
 
-  .rebase-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 22px;
-    padding: 0 8px;
-    font-size: var(--size-xs);
-    font-weight: 500;
-    color: var(--text-muted);
-    background: none;
-    border: 1px solid var(--border-subtle);
-    border-radius: 6px;
-    cursor: pointer;
-    white-space: nowrap;
-    transition:
-      color 0.15s,
-      border-color 0.15s,
-      background-color 0.15s;
-  }
-
-  .rebase-btn:hover:not(:disabled) {
-    border-color: var(--border-muted);
-    color: var(--text-primary);
-    background: var(--bg-hover);
-  }
-
-  .rebase-btn:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
-
   .branch-warning {
     display: inline-flex;
     align-items: center;
diff --git a/apps/staged/src/lib/features/branches/BranchCardPrButton.svelte b/apps/staged/src/lib/features/branches/BranchCardPrButton.svelte
index ef3428286..7354e8490 100644
--- a/apps/staged/src/lib/features/branches/BranchCardPrButton.svelte
+++ b/apps/staged/src/lib/features/branches/BranchCardPrButton.svelte
@@ -6,15 +6,15 @@
 -->
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
-  import {
-    GitPullRequestCreateArrow,
-    GitPullRequestArrow,
-    GitPullRequestDraft,
-    GitMerge,
-    AlertCircle,
-  } from 'lucide-svelte';
+  import GitPullRequestCreateArrow from '@lucide/svelte/icons/git-pull-request-create-arrow';
+  import GitPullRequestArrow from '@lucide/svelte/icons/git-pull-request-arrow';
+  import GitPullRequestDraft from '@lucide/svelte/icons/git-pull-request-draft';
+  import GitMerge from '@lucide/svelte/icons/git-merge';
+  import AlertCircle from '@lucide/svelte/icons/alert-circle';
   import Spinner from '../../shared/Spinner.svelte';
-  import ConfirmDialog from '../../shared/ConfirmDialog.svelte';
+  import * as AlertDialog from '$lib/components/ui/alert-dialog';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
   import { minuteNow, secondNow } from '../../shared/relativeTime.svelte';
   import { listenToEvent } from '../../transport';
   import type {
@@ -658,172 +658,135 @@
 </script>
 
 {#if hasCodeChanges || branch.prNumber}
-  <button
-    class="pr-btn"
-    class:creating={prState === 'creating'}
-    class:error={prState === 'error' || pushState === 'error'}
-    class:created={prState === 'created' && pushState !== 'error'}
-    class:pushing={pushState === 'pushing'}
-    class:merged={prState === 'created' && prStatusState === 'MERGED'}
-    onclick={handlePrButtonClick}
-    disabled={showPushErrorDialog || showForcePushDialog || showPrErrorDialog}
-    title={prButtonTitle}
-  >
-    {#if pushState === 'pushing'}
-      <Spinner size={13} />
-    {:else if pushState === 'error'}
-      <AlertCircle size={13} />
-    {:else if prState === 'creating'}
-      <Spinner size={13} />
-    {:else if prState === 'error'}
-      <AlertCircle size={13} />
-    {:else if prState === 'created' && prStatusState === 'MERGED'}
-      <GitMerge size={13} />
-    {:else if prState === 'created' && hasUnpushed}
-      <GitPullRequestDraft size={13} />
-    {:else if prState === 'created'}
-      <GitPullRequestArrow size={13} />
-    {:else}
-      <GitPullRequestCreateArrow size={13} />
-    {/if}
-    <span>
-      {#if pushState === 'pushing'}
-        Pushing…
-      {:else if pushState === 'error'}
-        Push failed
-      {:else if prState === 'created' && hasUnpushed}
-        {pushAction === 'forcePush' || optionHeld ? 'Force push' : 'Push changes'}
-      {:else if prState === 'created'}
-        {#if prStatusText}
-          {prStatusText}
-        {:else}
-          View PR{#if branch.prNumber}&nbsp;#{branch.prNumber}{/if}
-        {/if}
-      {:else if prState === 'creating'}
-        Creating PR…
-      {:else if prState === 'error'}
-        PR failed
-      {:else}
-        {optionHeld ? 'Create draft PR' : 'Create PR'}
-      {/if}
-    </span>
-    {#if prStatusStale}
-      <span class="pr-status-stale" title="PR status may be outdated">!</span>
-    {:else if prStatusIndicator}
-      <span class="pr-status-indicator {prStatusIndicator}"></span>
-    {/if}
-  </button>
+  <Tooltip.Root>
+    <Tooltip.Trigger>
+      {#snippet child({ props })}
+        <span {...props} class="inline-flex">
+          <Button
+            variant="outline"
+            size="sm"
+            class={[
+              'gap-1.5 whitespace-nowrap text-xs font-medium text-muted-foreground [&_svg]:!size-3.5',
+              prState === 'creating' && 'border-[var(--border-muted)]',
+              (prState === 'error' || pushState === 'error') &&
+                'border-destructive text-destructive hover:bg-[var(--ui-danger-bg)] hover:text-destructive',
+              pushState === 'pushing' && 'cursor-default border-[var(--border-muted)]',
+              prState === 'created' &&
+                prStatusState === 'MERGED' &&
+                '[&_svg]:text-[var(--status-added)]',
+            ]}
+            onclick={handlePrButtonClick}
+            disabled={showPushErrorDialog || showForcePushDialog || showPrErrorDialog}
+          >
+            {#if pushState === 'pushing'}
+              <Spinner size={13} />
+            {:else if pushState === 'error'}
+              <AlertCircle size={13} />
+            {:else if prState === 'creating'}
+              <Spinner size={13} />
+            {:else if prState === 'error'}
+              <AlertCircle size={13} />
+            {:else if prState === 'created' && prStatusState === 'MERGED'}
+              <GitMerge size={13} />
+            {:else if prState === 'created' && hasUnpushed}
+              <GitPullRequestDraft size={13} />
+            {:else if prState === 'created'}
+              <GitPullRequestArrow size={13} />
+            {:else}
+              <GitPullRequestCreateArrow size={13} />
+            {/if}
+            <span>
+              {#if pushState === 'pushing'}
+                Pushing…
+              {:else if pushState === 'error'}
+                Push failed
+              {:else if prState === 'created' && hasUnpushed}
+                {pushAction === 'forcePush' || optionHeld ? 'Force push' : 'Push changes'}
+              {:else if prState === 'created'}
+                {#if prStatusText}
+                  {prStatusText}
+                {:else}
+                  View PR{#if branch.prNumber}&nbsp;#{branch.prNumber}{/if}
+                {/if}
+              {:else if prState === 'creating'}
+                Creating PR…
+              {:else if prState === 'error'}
+                PR failed
+              {:else}
+                {optionHeld ? 'Create draft PR' : 'Create PR'}
+              {/if}
+            </span>
+            {#if prStatusStale}
+              <Tooltip.Root>
+                <Tooltip.Trigger>
+                  {#snippet child({ props })}
+                    <span class="pr-status-stale" {...props}>!</span>
+                  {/snippet}
+                </Tooltip.Trigger>
+                <Tooltip.Content>PR status may be outdated</Tooltip.Content>
+              </Tooltip.Root>
+            {:else if prStatusIndicator}
+              <span class="pr-status-indicator {prStatusIndicator}"></span>
+            {/if}
+          </Button>
+        </span>
+      {/snippet}
+    </Tooltip.Trigger>
+    <Tooltip.Content>{prButtonTitle}</Tooltip.Content>
+  </Tooltip.Root>
 {/if}
 
-{#if showPrErrorDialog}
-  <ConfirmDialog
-    title="PR Creation Failed"
-    message={prError ?? 'An unknown error occurred while creating the PR.'}
-    confirmLabel="Retry"
-    onConfirm={handlePrErrorRetry}
-    onCancel={handlePrErrorClose}
-  />
-{/if}
-
-{#if showPushErrorDialog}
-  <ConfirmDialog
-    title="Push Failed"
-    message={pushError ?? 'An unknown error occurred while pushing.'}
-    confirmLabel="Retry"
-    onConfirm={handlePushErrorRetry}
-    onCancel={handlePushErrorClose}
-  />
-{/if}
-
-{#if showForcePushDialog}
-  <ConfirmDialog
-    title="Push Rejected"
-    message="The remote branch has commits that would be lost. Do you want to force push? This will overwrite the remote branch with your local version."
-    confirmLabel="Force Push"
-    danger
-    onConfirm={handleForcePushConfirm}
-    onCancel={handleForcePushCancel}
-  />
-{/if}
+<AlertDialog.Root bind:open={showPrErrorDialog}>
+  <AlertDialog.Content>
+    <AlertDialog.Header>
+      <AlertDialog.Title>PR Creation Failed</AlertDialog.Title>
+      <AlertDialog.Description class="max-h-[42vh] overflow-auto whitespace-pre-line">
+        {prError ?? 'An unknown error occurred while creating the PR.'}
+      </AlertDialog.Description>
+    </AlertDialog.Header>
+    <AlertDialog.Footer>
+      <AlertDialog.Cancel onclick={handlePrErrorClose}>Cancel</AlertDialog.Cancel>
+      <AlertDialog.Action variant="outline" onclick={handlePrErrorRetry}>Retry</AlertDialog.Action>
+    </AlertDialog.Footer>
+  </AlertDialog.Content>
+</AlertDialog.Root>
+
+<AlertDialog.Root bind:open={showPushErrorDialog}>
+  <AlertDialog.Content>
+    <AlertDialog.Header>
+      <AlertDialog.Title>Push Failed</AlertDialog.Title>
+      <AlertDialog.Description class="max-h-[42vh] overflow-auto whitespace-pre-line">
+        {pushError ?? 'An unknown error occurred while pushing.'}
+      </AlertDialog.Description>
+    </AlertDialog.Header>
+    <AlertDialog.Footer>
+      <AlertDialog.Cancel onclick={handlePushErrorClose}>Cancel</AlertDialog.Cancel>
+      <AlertDialog.Action variant="outline" onclick={handlePushErrorRetry}>
+        Retry
+      </AlertDialog.Action>
+    </AlertDialog.Footer>
+  </AlertDialog.Content>
+</AlertDialog.Root>
+
+<AlertDialog.Root bind:open={showForcePushDialog}>
+  <AlertDialog.Content>
+    <AlertDialog.Header>
+      <AlertDialog.Title>Push Rejected</AlertDialog.Title>
+      <AlertDialog.Description>
+        The remote branch has commits that would be lost. Do you want to force push? This will
+        overwrite the remote branch with your local version.
+      </AlertDialog.Description>
+    </AlertDialog.Header>
+    <AlertDialog.Footer>
+      <AlertDialog.Cancel onclick={handleForcePushCancel}>Cancel</AlertDialog.Cancel>
+      <AlertDialog.Action variant="destructive" onclick={handleForcePushConfirm}>
+        Force Push
+      </AlertDialog.Action>
+    </AlertDialog.Footer>
+  </AlertDialog.Content>
+</AlertDialog.Root>
 
 <style>
-  /* PR button */
-  .pr-btn {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    padding: 4px 10px;
-    background: none;
-    border: 1px solid var(--border-subtle);
-    border-radius: 6px;
-    color: var(--text-muted);
-    font-size: var(--size-xs);
-    font-weight: 500;
-    cursor: pointer;
-    transition:
-      color 0.15s,
-      border-color 0.15s,
-      background-color 0.15s;
-    white-space: nowrap;
-  }
-
-  .pr-btn:hover:not(:disabled) {
-    color: var(--text-primary);
-    border-color: var(--border-muted);
-    background: var(--bg-hover);
-  }
-
-  .pr-btn:disabled {
-    cursor: default;
-  }
-
-  .pr-btn.creating {
-    color: var(--text-muted);
-    border-color: var(--border-muted);
-  }
-
-  .pr-btn.error {
-    color: var(--ui-danger);
-    border-color: var(--ui-danger);
-  }
-
-  .pr-btn.error:hover {
-    background: var(--ui-danger-bg);
-  }
-
-  .pr-btn.created {
-    color: var(--text-muted);
-    border-color: var(--border-subtle);
-  }
-
-  .pr-btn.created:hover {
-    color: var(--text-primary);
-    border-color: var(--border-muted);
-    background: var(--bg-hover);
-  }
-
-  .pr-btn.created :global(svg) {
-    color: var(--text-muted);
-  }
-
-  .pr-btn.created:hover :global(svg) {
-    color: var(--text-primary);
-  }
-
-  .pr-btn.pushing {
-    color: var(--text-muted);
-    border-color: var(--border-muted);
-    cursor: default;
-  }
-
-  .pr-btn.merged :global(svg) {
-    color: var(--status-added);
-  }
-
-  .pr-btn :global(svg) {
-    flex-shrink: 0;
-  }
-
   /* PR status indicator circle */
   .pr-status-indicator {
     width: 6px;
diff --git a/apps/staged/src/lib/features/branches/BranchCardSessionManager.svelte.ts b/apps/staged/src/lib/features/branches/BranchCardSessionManager.svelte.ts
index 11d666c30..7f9deb0ca 100644
--- a/apps/staged/src/lib/features/branches/BranchCardSessionManager.svelte.ts
+++ b/apps/staged/src/lib/features/branches/BranchCardSessionManager.svelte.ts
@@ -14,7 +14,7 @@ import * as commands from '../../api/commands';
 import { isSessionActive } from '../../shared/sessionStatus';
 import { getPreferredAgent } from '../settings/preferences.svelte';
 import { agentState, REMOTE_AGENTS } from '../agents/agent.svelte';
-import { alerts } from '../../shared/alerts.svelte';
+import { toast } from 'svelte-sonner';
 import { projectStateStore } from '../../stores/projectState.svelte';
 import { sessionRegistry } from '../../stores/sessionRegistry.svelte';
 import { buildReferringPrompt } from '../../shared/buildReferringPrompt';
@@ -324,11 +324,9 @@ export default class BranchCardSessionManager {
       this.loadTimeline();
     } catch (e) {
       this.pendingSessionItems = this.pendingSessionItems.filter((item) => item.key !== pendingKey);
-      alerts.show({
-        tone: 'error',
-        title: 'Unable to start session',
-        message: e instanceof Error ? e.message : String(e),
-        durationMs: 0,
+      toast.error('Unable to start session', {
+        description: e instanceof Error ? e.message : String(e),
+        duration: Infinity,
       });
     }
   }
@@ -382,11 +380,9 @@ export default class BranchCardSessionManager {
       this.loadTimeline();
     } catch (e) {
       this.pendingSessionItems = this.pendingSessionItems.filter((item) => item.key !== pendingKey);
-      alerts.show({
-        tone: 'error',
-        title: 'Unable to queue session',
-        message: e instanceof Error ? e.message : String(e),
-        durationMs: 0,
+      toast.error('Unable to queue session', {
+        description: e instanceof Error ? e.message : String(e),
+        duration: Infinity,
       });
     }
   }
diff --git a/apps/staged/src/lib/features/branches/ParentBranchCommitsHover.svelte b/apps/staged/src/lib/features/branches/ParentBranchCommitsHover.svelte
index c789f2fa5..c9574b031 100644
--- a/apps/staged/src/lib/features/branches/ParentBranchCommitsHover.svelte
+++ b/apps/staged/src/lib/features/branches/ParentBranchCommitsHover.svelte
@@ -4,6 +4,7 @@
   import { listenToEvent } from '../../transport';
   import { listParentBranchCommits, type ParentBranchCommit } from '../../commands';
   import { formatRelativeTimeSeconds } from '../../shared/relativeTime.svelte';
+  import * as Tooltip from '$lib/components/ui/tooltip';
   import type { BranchGitState } from '../../types';
 
   interface Props {
@@ -207,9 +208,23 @@
         {#each visibleCommits as commit (commit.sha)}
           <li class="commit-row">
             <div class="commit-main">
-              <div class="commit-subject" title={commit.subject}>{commit.subject}</div>
+              <Tooltip.Root>
+                <Tooltip.Trigger>
+                  {#snippet child({ props })}
+                    <div class="commit-subject" {...props}>{commit.subject}</div>
+                  {/snippet}
+                </Tooltip.Trigger>
+                <Tooltip.Content>{commit.subject}</Tooltip.Content>
+              </Tooltip.Root>
               <div class="commit-meta">
-                <span class="commit-author" title={commit.authorEmail}>{commit.author}</span>
+                <Tooltip.Root>
+                  <Tooltip.Trigger>
+                    {#snippet child({ props })}
+                      <span class="commit-author" {...props}>{commit.author}</span>
+                    {/snippet}
+                  </Tooltip.Trigger>
+                  <Tooltip.Content>{commit.authorEmail}</Tooltip.Content>
+                </Tooltip.Root>
                 <span class="commit-dot">·</span>
                 <span class="commit-time">{formatRelativeTimeSeconds(commit.timestamp)}</span>
               </div>
diff --git a/apps/staged/src/lib/features/branches/RemoteWorkspaceStatusBadge.svelte b/apps/staged/src/lib/features/branches/RemoteWorkspaceStatusBadge.svelte
index 1af5b243e..0fe2fa7d1 100644
--- a/apps/staged/src/lib/features/branches/RemoteWorkspaceStatusBadge.svelte
+++ b/apps/staged/src/lib/features/branches/RemoteWorkspaceStatusBadge.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
-  import { AlertCircle, CheckCircle, CirclePause, Pause } from 'lucide-svelte';
+  import AlertCircle from '@lucide/svelte/icons/alert-circle';
+  import CheckCircle from '@lucide/svelte/icons/check-circle';
+  import CirclePause from '@lucide/svelte/icons/circle-pause';
+  import Pause from '@lucide/svelte/icons/pause';
   import Spinner from '../../shared/Spinner.svelte';
   import type { WorkspaceStatus } from '../../types';
 
diff --git a/apps/staged/src/lib/features/branches/RemoteWorkspaceStatusView.svelte b/apps/staged/src/lib/features/branches/RemoteWorkspaceStatusView.svelte
index b2fd63f43..f3b49d4db 100644
--- a/apps/staged/src/lib/features/branches/RemoteWorkspaceStatusView.svelte
+++ b/apps/staged/src/lib/features/branches/RemoteWorkspaceStatusView.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { AlertCircle, CirclePause } from 'lucide-svelte';
+  import AlertCircle from '@lucide/svelte/icons/alert-circle';
+  import CirclePause from '@lucide/svelte/icons/circle-pause';
   import Spinner from '../../shared/Spinner.svelte';
   import type { WorkspaceStatus } from '../../types';
 
diff --git a/apps/staged/src/lib/features/diff/DiffCommentsSection.svelte b/apps/staged/src/lib/features/diff/DiffCommentsSection.svelte
index 99fcfcffa..3f18cad22 100644
--- a/apps/staged/src/lib/features/diff/DiffCommentsSection.svelte
+++ b/apps/staged/src/lib/features/diff/DiffCommentsSection.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-  import {
-    AlertTriangle,
-    Bot,
-    Check,
-    ChevronRight,
-    Copy,
-    MessageSquare,
-    Trash2,
-    Undo2,
-  } from 'lucide-svelte';
+  import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
+  import Bot from '@lucide/svelte/icons/bot';
+  import Check from '@lucide/svelte/icons/check';
+  import ChevronRight from '@lucide/svelte/icons/chevron-right';
+  import Copy from '@lucide/svelte/icons/copy';
+  import MessageSquare from '@lucide/svelte/icons/message-square';
+  import Trash2 from '@lucide/svelte/icons/trash-2';
+  import Undo2 from '@lucide/svelte/icons/undo-2';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
   import type { Comment } from '../../types';
   import { formatLineRange, truncateText } from './diffModalHelpers';
 
@@ -77,21 +77,47 @@
   </div>
   <div class="section-right">
     {#if comments.length > 0}
-      <button
-        class="copy-btn"
-        class:copied={copiedFeedback}
-        onclick={onCopyAll}
-        title="Copy all comments"
-      >
-        {#if copiedFeedback}
-          <Check size={12} />
-        {:else}
-          <Copy size={12} />
-        {/if}
-      </button>
-      <button class="delete-all-btn" onclick={onDeleteAll} title="Delete all comments">
-        <Trash2 size={12} />
-      </button>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <Button
+              {...props}
+              variant="ghost"
+              size="icon"
+              class={[
+                'size-auto rounded-[3px] p-0.5 shadow-none hover:bg-[var(--bg-hover)] [&_svg]:!size-3',
+                copiedFeedback
+                  ? 'text-[var(--status-added)] hover:text-[var(--status-added)]'
+                  : 'text-muted-foreground hover:text-foreground',
+              ]}
+              onclick={onCopyAll}
+            >
+              {#if copiedFeedback}
+                <Check size={12} />
+              {:else}
+                <Copy size={12} />
+              {/if}
+            </Button>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content>Copy all comments</Tooltip.Content>
+      </Tooltip.Root>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <Button
+              {...props}
+              variant="ghost"
+              size="icon"
+              class="size-auto rounded-[3px] p-0.5 text-muted-foreground shadow-none hover:bg-[var(--bg-hover)] hover:text-destructive [&_svg]:!size-3"
+              onclick={onDeleteAll}
+            >
+              <Trash2 size={12} />
+            </Button>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content>Delete all comments</Tooltip.Content>
+      </Tooltip.Root>
     {/if}
   </div>
 </div>
@@ -100,7 +126,7 @@
   <ul class="tree-section comments-section">
     {#each comments as comment (comment.id)}
       <li class="tree-item-wrapper">
-        <div class="comment-item-container">
+        <div class="comment-item-container group/comment">
           <button
             class="tree-item comment-item"
             class:selected={selectedCommentId === comment.id}
@@ -109,16 +135,25 @@
           >
             {@render commentItemContent(comment)}
           </button>
-          <button
-            class="comment-delete-btn"
-            onclick={(e) => {
-              e.stopPropagation();
-              onDeleteComment(comment.id);
-            }}
-            title="Delete comment"
-          >
-            <Trash2 size={12} />
-          </button>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="ghost"
+                  size="icon"
+                  class="absolute top-1/2 right-3 z-10 size-auto -translate-y-1/2 rounded p-1 text-[var(--text-faint)] opacity-0 shadow-none transition-opacity hover:bg-[var(--bg-primary)] hover:text-[var(--status-deleted)] group-hover/comment:opacity-100 [&_svg]:!size-3"
+                  onclick={(e: MouseEvent) => {
+                    e.stopPropagation();
+                    onDeleteComment(comment.id);
+                  }}
+                >
+                  <Trash2 size={12} />
+                </Button>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>Delete comment</Tooltip.Content>
+          </Tooltip.Root>
         </div>
       </li>
     {/each}
@@ -126,32 +161,45 @@
 {/if}
 
 {#if deletedComments.length > 0}
-  <button class="deleted-toggle" onclick={() => (deletedExpanded = !deletedExpanded)}>
+  <Button
+    variant="ghost"
+    class="flex h-auto w-full items-center justify-start gap-1 rounded-none px-3 py-1 text-[length:calc(var(--size-xs)-1px)] font-semibold tracking-[0.03em] text-[var(--text-faint)] uppercase shadow-none hover:bg-[var(--bg-hover)] hover:text-muted-foreground"
+    onclick={() => (deletedExpanded = !deletedExpanded)}
+  >
     <span class="deleted-toggle-icon" class:expanded={deletedExpanded}>
       <ChevronRight size={12} />
     </span>
-    <span class="deleted-toggle-label">Deleted</span>
+    <span>Deleted</span>
     <span class="count-capsule">{deletedComments.length}</span>
-  </button>
+  </Button>
 
   {#if deletedExpanded}
     <ul class="tree-section comments-section deleted-comments-section">
       {#each deletedComments as comment (comment.id)}
         <li class="tree-item-wrapper">
-          <div class="comment-item-container deleted-comment">
+          <div class="comment-item-container deleted-comment group/comment">
             <div class="tree-item comment-item" style="padding-left: 8px">
               {@render commentItemContent(comment)}
             </div>
-            <button
-              class="comment-restore-btn"
-              onclick={(e) => {
-                e.stopPropagation();
-                onRestoreComment(comment.id);
-              }}
-              title="Restore comment"
-            >
-              <Undo2 size={12} />
-            </button>
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                {#snippet child({ props })}
+                  <Button
+                    {...props}
+                    variant="ghost"
+                    size="icon"
+                    class="absolute top-1/2 right-3 z-10 size-auto -translate-y-1/2 rounded p-1 text-[var(--text-faint)] opacity-0 shadow-none transition-opacity hover:bg-[var(--bg-primary)] hover:text-[var(--status-added)] group-hover/comment:opacity-100 [&_svg]:!size-3"
+                    onclick={(e: MouseEvent) => {
+                      e.stopPropagation();
+                      onRestoreComment(comment.id);
+                    }}
+                  >
+                    <Undo2 size={12} />
+                  </Button>
+                {/snippet}
+              </Tooltip.Trigger>
+              <Tooltip.Content>Restore comment</Tooltip.Content>
+            </Tooltip.Root>
           </div>
         </li>
       {/each}
@@ -345,93 +393,8 @@
     white-space: nowrap;
   }
 
-  .comment-delete-btn {
-    position: absolute;
-    right: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px;
-    background: none;
-    border: none;
-    border-radius: 4px;
-    color: var(--text-faint);
-    cursor: pointer;
-    opacity: 0;
-    transition:
-      opacity 0.1s,
-      color 0.1s,
-      background-color 0.1s;
-    z-index: 1;
-  }
-
-  .comment-item-container:hover .comment-delete-btn {
-    opacity: 1;
-  }
-
-  .comment-delete-btn:hover {
-    color: var(--status-deleted);
-    background-color: var(--bg-primary);
-  }
-
-  .copy-btn,
-  .delete-all-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2px;
-    background: none;
-    border: none;
-    border-radius: 3px;
-    color: var(--text-muted);
-    cursor: pointer;
-    transition:
-      background-color 0.1s,
-      color 0.1s;
-  }
-
-  .copy-btn:hover {
-    background-color: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .copy-btn.copied {
-    color: var(--status-added);
-  }
-
-  .delete-all-btn:hover {
-    background-color: var(--bg-hover);
-    color: var(--status-deleted);
-  }
-
   /* Deleted comments section */
 
-  .deleted-toggle {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    padding: 4px 12px;
-    background: none;
-    border: none;
-    color: var(--text-faint);
-    font-size: calc(var(--size-xs) - 1px);
-    font-weight: 600;
-    letter-spacing: 0.03em;
-    cursor: pointer;
-    width: 100%;
-    text-align: left;
-    transition:
-      color 0.1s,
-      background-color 0.1s;
-  }
-
-  .deleted-toggle:hover {
-    color: var(--text-muted);
-    background-color: var(--bg-hover);
-  }
-
   .deleted-toggle-icon {
     display: flex;
     align-items: center;
@@ -442,10 +405,6 @@
     transform: rotate(90deg);
   }
 
-  .deleted-toggle-label {
-    text-transform: uppercase;
-  }
-
   .deleted-comments-section {
     margin-bottom: 8px;
   }
@@ -461,35 +420,4 @@
   .deleted-comment .tree-item {
     cursor: default;
   }
-
-  .comment-restore-btn {
-    position: absolute;
-    right: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px;
-    background: none;
-    border: none;
-    border-radius: 4px;
-    color: var(--text-faint);
-    cursor: pointer;
-    opacity: 0;
-    transition:
-      opacity 0.1s,
-      color 0.1s,
-      background-color 0.1s;
-    z-index: 1;
-  }
-
-  .comment-item-container:hover .comment-restore-btn {
-    opacity: 1;
-  }
-
-  .comment-restore-btn:hover {
-    color: var(--status-added);
-    background-color: var(--bg-primary);
-  }
 </style>
diff --git a/apps/staged/src/lib/features/diff/DiffCommitSessionLauncher.svelte b/apps/staged/src/lib/features/diff/DiffCommitSessionLauncher.svelte
index fbf8b20e4..00b7d87e2 100644
--- a/apps/staged/src/lib/features/diff/DiffCommitSessionLauncher.svelte
+++ b/apps/staged/src/lib/features/diff/DiffCommitSessionLauncher.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { listenToEvent } from '../../transport';
-  import { Send } from 'lucide-svelte';
+  import Send from '@lucide/svelte/icons/send';
   import Spinner from '../../shared/Spinner.svelte';
-  import { alerts } from '../../shared/alerts.svelte';
+  import { Button } from '$lib/components/ui/button';
+  import { toast } from 'svelte-sonner';
   import * as commands from '../../api/commands';
   import { getCommitPrefillFromReviewComments } from '../branches/commitSessionPrefill';
   import type { SessionStatusPayload, HashtagItem } from '../../types';
@@ -190,14 +191,13 @@
 
       onStarted();
     } catch (e) {
-      alerts.show({
-        tone: 'error',
-        title: hasRunningSession
-          ? 'Unable to queue commit session'
-          : 'Unable to start commit session',
-        message: e instanceof Error ? e.message : String(e),
-        durationMs: 0,
-      });
+      toast.error(
+        hasRunningSession ? 'Unable to queue commit session' : 'Unable to start commit session',
+        {
+          description: e instanceof Error ? e.message : String(e),
+          duration: Infinity,
+        }
+      );
     } finally {
       starting = false;
     }
@@ -216,9 +216,10 @@
     items={hashtagItems}
   />
   <div class="composer-footer">
-    <button
-      class="composer-submit"
+    <Button
       type="button"
+      variant="outline"
+      class="w-full gap-1.5"
       onclick={handleSubmit}
       disabled={starting || !draftPrompt.trim()}
     >
@@ -232,7 +233,7 @@
           <span class="shortcut-badge">⌘↵</span>
         {/if}
       {/if}
-    </button>
+    </Button>
   </div>
 </div>
 
@@ -274,35 +275,9 @@
     gap: 8px;
   }
 
-  .composer-submit {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    padding: 8px 16px;
-    border-radius: 6px;
-    font-size: var(--size-sm);
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.15s;
-    background: var(--ui-accent);
-    border: none;
-    color: var(--bg-deepest);
-    width: 100%;
-  }
-
   .shortcut-badge {
     margin-left: auto;
     font-size: var(--size-xs);
     opacity: 0.6;
   }
-
-  .composer-submit:hover:not(:disabled) {
-    background: var(--ui-accent-hover);
-  }
-
-  .composer-submit:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
 </style>
diff --git a/apps/staged/src/lib/features/diff/DiffFileTreeSection.svelte b/apps/staged/src/lib/features/diff/DiffFileTreeSection.svelte
index c04f2649e..f3bd298c7 100644
--- a/apps/staged/src/lib/features/diff/DiffFileTreeSection.svelte
+++ b/apps/staged/src/lib/features/diff/DiffFileTreeSection.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
-  import {
-    AlertTriangle,
-    Check,
-    RotateCcw,
-    ChevronRight,
-    ChevronDown,
-    Folder,
-    MessageSquare,
-    MoveRight,
-    Plus,
-    X,
-  } from 'lucide-svelte';
+  import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
+  import Check from '@lucide/svelte/icons/check';
+  import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
+  import ChevronRight from '@lucide/svelte/icons/chevron-right';
+  import ChevronDown from '@lucide/svelte/icons/chevron-down';
+  import Folder from '@lucide/svelte/icons/folder';
+  import MessageSquare from '@lucide/svelte/icons/message-square';
+  import MoveRight from '@lucide/svelte/icons/move-right';
+  import Plus from '@lucide/svelte/icons/plus';
+  import X from '@lucide/svelte/icons/x';
+  import * as Tooltip from '$lib/components/ui/tooltip';
   import { FileSearchResults } from '@builderbot/diff-viewer/components';
   import { getMatchSnippet, getTextLines, type SearchMatch } from '@builderbot/diff-viewer/utils';
   import {
@@ -162,29 +161,38 @@
       </span>
     </span>
   {:else}
-    <span
-      class="status-icon"
-      class:status-icon-added={file.status === 'added'}
-      class:status-icon-deleted={file.status === 'deleted'}
-      class:status-icon-renamed={file.status === 'renamed' && !hasLineChanges(file)}
-      class:status-icon-renamed-modified={file.status === 'renamed' && hasLineChanges(file)}
-      onclick={(e) => onToggleReviewed(e, file)}
-      onkeydown={(e) => e.key === 'Enter' && onToggleReviewed(e, file)}
-      role="button"
-      tabindex="0"
-      title={showReviewedSection ? 'Mark as needs review' : 'Mark as reviewed'}
-    >
-      <span class="icon-default">
-        {@render fileStatusVisual(file)}
-      </span>
-      <span class="icon-hover" class:icon-hover-unreview={showReviewedSection}>
-        {#if showReviewedSection}
-          <RotateCcw size={16} />
-        {:else}
-          <Check size={16} />
-        {/if}
-      </span>
-    </span>
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        {#snippet child({ props })}
+          <span
+            {...props}
+            class="status-icon"
+            class:status-icon-added={file.status === 'added'}
+            class:status-icon-deleted={file.status === 'deleted'}
+            class:status-icon-renamed={file.status === 'renamed' && !hasLineChanges(file)}
+            class:status-icon-renamed-modified={file.status === 'renamed' && hasLineChanges(file)}
+            onclick={(e) => onToggleReviewed(e, file)}
+            onkeydown={(e) => e.key === 'Enter' && onToggleReviewed(e, file)}
+            role="button"
+            tabindex="0"
+          >
+            <span class="icon-default">
+              {@render fileStatusVisual(file)}
+            </span>
+            <span class="icon-hover" class:icon-hover-unreview={showReviewedSection}>
+              {#if showReviewedSection}
+                <RotateCcw size={16} />
+              {:else}
+                <Check size={16} />
+              {/if}
+            </span>
+          </span>
+        {/snippet}
+      </Tooltip.Trigger>
+      <Tooltip.Content>
+        {showReviewedSection ? 'Mark as needs review' : 'Mark as reviewed'}
+      </Tooltip.Content>
+    </Tooltip.Root>
   {/if}
 {/snippet}
 
@@ -204,31 +212,40 @@
   {@const total = fileChangeTotal(file)}
   {@const added = lineCount(file.addedLines)}
   {@const deleted = lineCount(file.deletedLines)}
-  <span
-    class="change-indicator"
-    class:change-indicator-visible={total !== null}
-    title={total !== null && total > 0 ? changeIndicatorTitle(added, deleted) : undefined}
-    aria-hidden="true"
-  >
-    {#if total !== null && total > 0}
-      <span class="change-indicator-fill" style:height={`${changeIndicatorHeight(total)}px`}>
-        {#if added > 0}
-          <span
-            class="change-segment change-segment-added"
-            style:height={`${(added / total) * 100}%`}
-          ></span>
-        {/if}
-        {#if deleted > 0}
-          <span
-            class="change-segment change-segment-deleted"
-            style:height={`${(deleted / total) * 100}%`}
-          ></span>
-        {/if}
-      </span>
-    {:else}
-      <span class="change-indicator-empty"></span>
-    {/if}
-  </span>
+  <Tooltip.Root disabled={!(total !== null && total > 0)}>
+    <Tooltip.Trigger>
+      {#snippet child({ props })}
+        <span
+          {...props}
+          class="change-indicator"
+          class:change-indicator-visible={total !== null}
+          aria-hidden="true"
+        >
+          {#if total !== null && total > 0}
+            <span class="change-indicator-fill" style:height={`${changeIndicatorHeight(total)}px`}>
+              {#if added > 0}
+                <span
+                  class="change-segment change-segment-added"
+                  style:height={`${(added / total) * 100}%`}
+                ></span>
+              {/if}
+              {#if deleted > 0}
+                <span
+                  class="change-segment change-segment-deleted"
+                  style:height={`${(deleted / total) * 100}%`}
+                ></span>
+              {/if}
+            </span>
+          {:else}
+            <span class="change-indicator-empty"></span>
+          {/if}
+        </span>
+      {/snippet}
+    </Tooltip.Trigger>
+    <Tooltip.Content>
+      {total !== null && total > 0 ? changeIndicatorTitle(added, deleted) : ''}
+    </Tooltip.Content>
+  </Tooltip.Root>
 {/snippet}
 
 {#snippet treeNodes(nodes: TreeNode[], depth: number, showReviewedSection: boolean)}
@@ -311,12 +328,18 @@
           {#if searchState?.state.isOpen && searchState.state.fileResults.has(node.file.path)}
             {@const resultCount =
               searchState.state.fileResults.get(node.file.path)?.matches.length ?? 0}
-            <span
-              class="search-result-count"
-              title="{resultCount} search result{resultCount !== 1 ? 's' : ''}"
-            >
-              {resultCount}
-            </span>
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                {#snippet child({ props })}
+                  <span {...props} class="search-result-count">
+                    {resultCount}
+                  </span>
+                {/snippet}
+              </Tooltip.Trigger>
+              <Tooltip.Content>
+                {resultCount} search result{resultCount !== 1 ? 's' : ''}
+              </Tooltip.Content>
+            </Tooltip.Root>
           {/if}
         </button>
 
diff --git a/apps/staged/src/lib/features/diff/DiffModal.svelte b/apps/staged/src/lib/features/diff/DiffModal.svelte
index 5ba063bcb..37527fe85 100644
--- a/apps/staged/src/lib/features/diff/DiffModal.svelte
+++ b/apps/staged/src/lib/features/diff/DiffModal.svelte
@@ -13,18 +13,18 @@
 -->
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
-  import {
-    X,
-    ArrowLeft,
-    ChevronDown,
-    GitBranch,
-    GitCommitHorizontal,
-    PanelRightOpen,
-  } from 'lucide-svelte';
+  import X from '@lucide/svelte/icons/x';
+  import ArrowLeft from '@lucide/svelte/icons/arrow-left';
+  import ChevronDown from '@lucide/svelte/icons/chevron-down';
+  import GitBranch from '@lucide/svelte/icons/git-branch';
+  import GitCommitHorizontal from '@lucide/svelte/icons/git-commit-horizontal';
+  import PanelRightOpen from '@lucide/svelte/icons/panel-right-open';
   import { getWindowSync } from '../../transport';
   import Spinner from '../../shared/Spinner.svelte';
   import RepoLabel from '../../shared/RepoLabel.svelte';
-  import { alerts } from '../../shared/alerts.svelte';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
+  import { toast } from 'svelte-sonner';
   import { formatRelativeTimeSeconds } from '../../shared/relativeTime.svelte';
   import { DiffViewer, CrossFileSearchBar } from '@builderbot/diff-viewer/components';
   import DiffCommentsSection from './DiffCommentsSection.svelte';
@@ -475,16 +475,11 @@
       }
 
       const label = mode === 'note' ? 'Note' : 'Commit';
-      alerts.show({
-        tone: 'success',
-        message: `${label} session ${hasRunning ? 'queued' : 'started'}`,
-      });
+      toast.success(`${label} session ${hasRunning ? 'queued' : 'started'}`);
     } catch (e) {
-      alerts.show({
-        tone: 'error',
-        title: `Unable to start ${mode} session`,
-        message: e instanceof Error ? e.message : String(e),
-        durationMs: 0,
+      toast.error(`Unable to start ${mode} session`, {
+        description: e instanceof Error ? e.message : String(e),
+        duration: Infinity,
       });
     }
   }
@@ -557,16 +552,11 @@
       }
 
       const label = data.mode === 'note' ? 'Note' : data.mode === 'commit' ? 'Commit' : 'Review';
-      alerts.show({
-        tone: 'success',
-        message: `${label} session ${hasRunning ? 'queued' : 'started'}`,
-      });
+      toast.success(`${label} session ${hasRunning ? 'queued' : 'started'}`);
     } catch (e) {
-      alerts.show({
-        tone: 'error',
-        title: `Unable to start ${data.mode} session`,
-        message: e instanceof Error ? e.message : String(e),
-        durationMs: 0,
+      toast.error(`Unable to start ${data.mode} session`, {
+        description: e instanceof Error ? e.message : String(e),
+        duration: Infinity,
       });
     }
   }
@@ -592,10 +582,8 @@
     if (comment.githubCommentId != null && !comment.githubCommentStale) {
       const url = getGithubCommentUrl(comment);
       if (!url) {
-        alerts.show({
-          tone: 'error',
-          title: 'Unable to open GitHub comment',
-          message: 'The comment URL is not available.',
+        toast.error('Unable to open GitHub comment', {
+          description: 'The comment URL is not available.',
         });
         return;
       }
@@ -603,10 +591,8 @@
       try {
         await commands.openUrl(url);
       } catch (e) {
-        alerts.show({
-          tone: 'error',
-          title: 'Unable to open GitHub comment',
-          message: e instanceof Error ? e.message : String(e),
+        toast.error('Unable to open GitHub comment', {
+          description: e instanceof Error ? e.message : String(e),
         });
       }
       return;
@@ -631,11 +617,9 @@
         );
       }
     } catch (e) {
-      alerts.show({
-        tone: 'error',
-        title: 'Failed to post comment',
-        message: e instanceof Error ? e.message : String(e),
-        durationMs: 0,
+      toast.error('Failed to post comment', {
+        description: e instanceof Error ? e.message : String(e),
+        duration: Infinity,
       });
     } finally {
       sendingCommentIds = new Set([...sendingCommentIds].filter((id) => id !== comment.id));
@@ -1233,13 +1217,22 @@
     <div class="title-bar" onpointerdown={startDrag}>
       <div class="traffic-light-spacer"></div>
       <div class="left-actions">
-        <button
-          class="icon-btn"
-          onclick={onClose}
-          title={viewport.showShortcutHints ? 'Back (Esc)' : 'Back'}
-        >
-          <ArrowLeft size={14} />
-        </button>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <Button
+                {...props}
+                variant="ghost"
+                size="icon"
+                class="size-auto shrink-0 rounded-md p-[5px] text-muted-foreground shadow-none hover:bg-[var(--bg-hover)] hover:text-foreground disabled:opacity-35 [&_svg]:!size-3.5"
+                onclick={onClose}
+              >
+                <ArrowLeft size={14} />
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content>{viewport.showShortcutHints ? 'Back (Esc)' : 'Back'}</Tooltip.Content>
+        </Tooltip.Root>
       </div>
       <div class="title-content">
         {#if projectName}
@@ -1252,24 +1245,33 @@
       <div class="drag-spacer"></div>
       {#if showContextSwitcher}
         <div class="context-switcher">
-          <button
-            type="button"
-            class="context-switcher-btn"
-            disabled={switchingContext}
-            onclick={() => (showContextDropdown ? closeDropdown() : openDropdown())}
-            onkeydown={handleDropdownKeydown}
-            aria-expanded={showContextDropdown}
-            aria-haspopup="listbox"
-            title="Switch diff context"
-          >
-            {#if activeScope === 'branch'}
-              <GitBranch size={12} />
-            {:else}
-              <GitCommitHorizontal size={12} />
-            {/if}
-            <span class="context-label">{contextLabel}</span>
-            <ChevronDown size={12} />
-          </button>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <span {...props} class="inline-flex">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    class="h-auto gap-1.5 rounded-md border-[var(--border-subtle)] bg-transparent px-2.5 py-1 text-xs font-medium text-muted-foreground shadow-none hover:border-[var(--border-muted)] hover:bg-[var(--bg-hover)] hover:text-foreground [&_svg]:!size-3"
+                    disabled={switchingContext}
+                    onclick={() => (showContextDropdown ? closeDropdown() : openDropdown())}
+                    onkeydown={handleDropdownKeydown}
+                    aria-expanded={showContextDropdown}
+                    aria-haspopup="listbox"
+                  >
+                    {#if activeScope === 'branch'}
+                      <GitBranch size={12} />
+                    {:else}
+                      <GitCommitHorizontal size={12} />
+                    {/if}
+                    <span class="context-label">{contextLabel}</span>
+                    <ChevronDown size={12} />
+                  </Button>
+                </span>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>Switch diff context</Tooltip.Content>
+          </Tooltip.Root>
           {#if showContextDropdown}
             <div class="context-dropdown" role="listbox" aria-label="Diff context">
               {#each reversedCommits as commit, i (commit.sha)}
@@ -1310,14 +1312,23 @@
         </div>
       {/if}
       {#if isSmallDiffViewport}
-        <button
-          class="icon-btn mobile-sidebar-trigger"
-          onclick={() => (showMobileSidebar = true)}
-          title="Show changed files"
-          aria-label="Show changed files"
-        >
-          <PanelRightOpen size={14} />
-        </button>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <Button
+                {...props}
+                variant="ghost"
+                size="icon"
+                class="size-auto shrink-0 rounded-md p-[5px] text-muted-foreground shadow-none hover:bg-[var(--bg-hover)] hover:text-foreground disabled:opacity-35 [&_svg]:!size-3.5"
+                onclick={() => (showMobileSidebar = true)}
+                aria-label="Show changed files"
+              >
+                <PanelRightOpen size={14} />
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content>Show changed files</Tooltip.Content>
+        </Tooltip.Root>
       {/if}
     </div>
 
@@ -1371,14 +1382,23 @@
       <div class="mobile-sidebar-dialog">
         <div class="mobile-sidebar-header">
           <span class="mobile-sidebar-title">Changed files</span>
-          <button
-            class="icon-btn"
-            onclick={() => (showMobileSidebar = false)}
-            title="Close changed files"
-            aria-label="Close changed files"
-          >
-            <X size={14} />
-          </button>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="ghost"
+                  size="icon"
+                  class="size-auto shrink-0 rounded-md p-[5px] text-muted-foreground shadow-none hover:bg-[var(--bg-hover)] hover:text-foreground disabled:opacity-35 [&_svg]:!size-3.5"
+                  onclick={() => (showMobileSidebar = false)}
+                  aria-label="Close changed files"
+                >
+                  <X size={14} />
+                </Button>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>Close changed files</Tooltip.Content>
+          </Tooltip.Root>
         </div>
         <div class="mobile-sidebar-body">
           {@render fileSidebarContents()}
@@ -1389,6 +1409,7 @@
 
   {#if showNewSessionModal && branch}
     <NewSessionModal
+      open={true}
       {branch}
       mode={newSessionMode}
       initialPrompt={newSessionPrefill}
@@ -1473,32 +1494,6 @@
     min-width: 20px;
   }
 
-  .icon-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 5px;
-    background: transparent;
-    border: none;
-    border-radius: 6px;
-    color: var(--text-muted);
-    cursor: pointer;
-    -webkit-app-region: no-drag;
-    transition:
-      color 0.1s,
-      background-color 0.1s;
-  }
-
-  .icon-btn:hover:not(:disabled) {
-    color: var(--text-primary);
-    background-color: var(--bg-hover);
-  }
-
-  .icon-btn:disabled {
-    opacity: 0.35;
-    cursor: not-allowed;
-  }
-
   /* ========================================================================
    * Context switcher
    * ====================================================================== */
@@ -1508,31 +1503,6 @@
     -webkit-app-region: no-drag;
   }
 
-  .context-switcher-btn {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    padding: 4px 10px;
-    background: none;
-    border: 1px solid var(--border-subtle);
-    border-radius: 6px;
-    color: var(--text-muted);
-    font-size: var(--size-xs);
-    font-weight: 500;
-    font-family: inherit;
-    cursor: pointer;
-    transition:
-      color 0.15s,
-      border-color 0.15s,
-      background-color 0.15s;
-  }
-
-  .context-switcher-btn:hover {
-    color: var(--text-primary);
-    border-color: var(--border-muted);
-    background: var(--bg-hover);
-  }
-
   .context-label {
     white-space: nowrap;
     overflow: hidden;
@@ -1701,10 +1671,6 @@
     overflow: hidden;
   }
 
-  .mobile-sidebar-trigger {
-    display: none;
-  }
-
   .mobile-sidebar-backdrop {
     position: fixed;
     inset: 0;
@@ -1805,10 +1771,6 @@
       max-width: 96px;
     }
 
-    .mobile-sidebar-trigger {
-      display: flex;
-    }
-
     .modal-body {
       position: relative;
     }
diff --git a/apps/staged/src/lib/features/diff/DiffReferenceSection.svelte b/apps/staged/src/lib/features/diff/DiffReferenceSection.svelte
index 9b898e044..e0451bdef 100644
--- a/apps/staged/src/lib/features/diff/DiffReferenceSection.svelte
+++ b/apps/staged/src/lib/features/diff/DiffReferenceSection.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
-  import { Eye, X } from 'lucide-svelte';
+  import Eye from '@lucide/svelte/icons/eye';
+  import X from '@lucide/svelte/icons/x';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
 
   interface ReferenceFile {
     path: string;
@@ -30,29 +33,45 @@
   <ul class="tree-section reference-section">
     {#each referenceFiles as refFile (refFile.path)}
       <li class="tree-item-wrapper">
-        <div
-          class="tree-item file-item reference-item"
-          class:selected={selectedFile === refFile.path}
-          style="padding-left: 8px"
-          role="button"
-          tabindex="0"
-          onclick={() => onSelectFile(refFile.path)}
-          onkeydown={(e) => e.key === 'Enter' && onSelectFile(refFile.path)}
-          title={refFile.path}
-        >
-          <span class="reference-icon"><Eye size={16} /></span>
-          <span class="file-name truncate-start">{refFile.path}</span>
-          <button
-            class="remove-btn"
-            onclick={(e) => {
-              e.stopPropagation();
-              onRemoveReferenceFile(refFile.path);
-            }}
-            title="Remove reference file"
-          >
-            <X size={12} />
-          </button>
-        </div>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <div
+                {...props}
+                class="tree-item file-item reference-item group/ref-item"
+                class:selected={selectedFile === refFile.path}
+                style="padding-left: 8px"
+                role="button"
+                tabindex="0"
+                onclick={() => onSelectFile(refFile.path)}
+                onkeydown={(e) => e.key === 'Enter' && onSelectFile(refFile.path)}
+              >
+                <span class="reference-icon"><Eye size={16} /></span>
+                <span class="file-name truncate-start">{refFile.path}</span>
+                <Tooltip.Root>
+                  <Tooltip.Trigger>
+                    {#snippet child({ props: removeProps })}
+                      <Button
+                        {...removeProps}
+                        variant="ghost"
+                        size="icon"
+                        class="ml-auto size-auto shrink-0 rounded-[3px] p-0.5 text-[var(--text-faint)] opacity-0 shadow-none transition-opacity hover:bg-[var(--bg-hover)] hover:text-foreground group-hover/ref-item:opacity-100 [&_svg]:!size-3"
+                        onclick={(e: MouseEvent) => {
+                          e.stopPropagation();
+                          onRemoveReferenceFile(refFile.path);
+                        }}
+                      >
+                        <X size={12} />
+                      </Button>
+                    {/snippet}
+                  </Tooltip.Trigger>
+                  <Tooltip.Content>Remove reference file</Tooltip.Content>
+                </Tooltip.Root>
+              </div>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content>{refFile.path}</Tooltip.Content>
+        </Tooltip.Root>
       </li>
     {/each}
   </ul>
@@ -193,32 +212,4 @@
     flex-shrink: 0;
     color: var(--text-muted);
   }
-
-  .remove-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2px;
-    background: none;
-    border: none;
-    border-radius: 3px;
-    color: var(--text-faint);
-    cursor: pointer;
-    opacity: 0;
-    transition:
-      opacity 0.1s,
-      background-color 0.1s,
-      color 0.1s;
-    margin-left: auto;
-    flex-shrink: 0;
-  }
-
-  .reference-item:hover .remove-btn {
-    opacity: 1;
-  }
-
-  .remove-btn:hover {
-    background-color: var(--bg-hover);
-    color: var(--text-primary);
-  }
 </style>
diff --git a/apps/staged/src/lib/features/doctor/DoctorCheckRow.svelte b/apps/staged/src/lib/features/doctor/DoctorCheckRow.svelte
index 8878edfd3..7c03f140c 100644
--- a/apps/staged/src/lib/features/doctor/DoctorCheckRow.svelte
+++ b/apps/staged/src/lib/features/doctor/DoctorCheckRow.svelte
@@ -6,10 +6,15 @@
   install page, or a "Fix" button that runs a shell command.
 -->
 <script lang="ts">
-  import { CheckCircle, AlertTriangle, XCircle, ExternalLink, Wrench } from 'lucide-svelte';
+  import CheckCircle from '@lucide/svelte/icons/check-circle';
+  import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
+  import XCircle from '@lucide/svelte/icons/x-circle';
+  import ExternalLink from '@lucide/svelte/icons/external-link';
+  import Wrench from '@lucide/svelte/icons/wrench';
   import { openUrl, runDoctorFix } from '../../api/commands';
   import type { DoctorCheck } from '../../api/commands';
-  import ConfirmDialog from '../../shared/ConfirmDialog.svelte';
+  import { Button } from '$lib/components/ui/button';
+  import * as AlertDialog from '$lib/components/ui/alert-dialog';
 
   let {
     check,
@@ -79,32 +84,45 @@
   </div>
 
   {#if check.fixType && check.fixCommand && check.status !== 'pass'}
-    <button class="fix-btn" onclick={promptFix}>
+    <Button variant="outline" size="sm" onclick={promptFix}>
       <Wrench size={14} />
       Fix
-    </button>
+    </Button>
   {/if}
 
   {#if check.fixUrl && check.status !== 'pass'}
-    <button class="install-btn" onclick={() => openUrl(check.fixUrl!)}>
+    <Button variant="ghost" size="icon" onclick={() => openUrl(check.fixUrl!)}>
       <ExternalLink size={14} />
-    </button>
+    </Button>
   {/if}
 </div>
 
-{#if showFixDialog}
-  <ConfirmDialog
-    title="Run fix command?"
-    message={check.fixCommand!}
-    confirmLabel={fixing ? 'Running' : fixError ? 'Retry' : 'Run'}
-    cancelLabel="Cancel"
-    confirmDisabled={fixing}
-    cancelDisabled={fixing}
-    error={fixError}
-    onConfirm={confirmFix}
-    onCancel={cancelFix}
-  />
-{/if}
+<AlertDialog.Root bind:open={showFixDialog}>
+  <AlertDialog.Content>
+    <AlertDialog.Header>
+      <AlertDialog.Title>Run fix command?</AlertDialog.Title>
+      <AlertDialog.Description class="max-h-[42vh] overflow-auto whitespace-pre-line">
+        {check.fixCommand}
+      </AlertDialog.Description>
+    </AlertDialog.Header>
+    {#if fixError}
+      <p class="text-destructive text-sm">{fixError}</p>
+    {/if}
+    <AlertDialog.Footer>
+      <AlertDialog.Cancel disabled={fixing} onclick={cancelFix}>Cancel</AlertDialog.Cancel>
+      <AlertDialog.Action
+        variant="outline"
+        disabled={fixing}
+        onclick={(e) => {
+          e.preventDefault();
+          confirmFix();
+        }}
+      >
+        {fixing ? 'Running' : fixError ? 'Retry' : 'Run'}
+      </AlertDialog.Action>
+    </AlertDialog.Footer>
+  </AlertDialog.Content>
+</AlertDialog.Root>
 
 <style>
   .check-row {
@@ -163,49 +181,4 @@
     overflow-wrap: break-word;
     word-wrap: break-word;
   }
-
-  .fix-btn {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    flex-shrink: 0;
-    padding: 4px 8px;
-    background: none;
-    border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1));
-    color: var(--text-muted);
-    cursor: pointer;
-    border-radius: 4px;
-    font-size: var(--size-xs);
-    transition:
-      color 0.1s,
-      background 0.1s,
-      border-color 0.1s;
-  }
-
-  .fix-btn:hover {
-    color: var(--text-primary);
-    background: var(--bg-hover, rgba(255, 255, 255, 0.06));
-    border-color: var(--border-hover, rgba(255, 255, 255, 0.2));
-  }
-
-  .install-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    padding: 4px;
-    background: none;
-    border: none;
-    color: var(--text-muted);
-    cursor: pointer;
-    border-radius: 4px;
-    transition:
-      color 0.1s,
-      background 0.1s;
-  }
-
-  .install-btn:hover {
-    color: var(--text-primary);
-    background: var(--bg-hover, rgba(255, 255, 255, 0.06));
-  }
 </style>
diff --git a/apps/staged/src/lib/features/layout/TopBar.svelte b/apps/staged/src/lib/features/layout/TopBar.svelte
index c701c1aeb..6980c487c 100644
--- a/apps/staged/src/lib/features/layout/TopBar.svelte
+++ b/apps/staged/src/lib/features/layout/TopBar.svelte
@@ -6,7 +6,10 @@
 -->
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { PanelLeftClose, PanelLeftOpen, Plus, SlidersHorizontal } from 'lucide-svelte';
+  import PanelLeftClose from '@lucide/svelte/icons/panel-left-close';
+  import PanelLeftOpen from '@lucide/svelte/icons/panel-left-open';
+  import Plus from '@lucide/svelte/icons/plus';
+  import SlidersHorizontal from '@lucide/svelte/icons/sliders-horizontal';
   import { getWindowSync } from '../../transport';
   import { navigation, openSettings } from './navigation.svelte';
   import {
@@ -15,6 +18,8 @@
     setProjectsSidebarCollapsed,
   } from '../projects/projectsSidebarState.svelte';
   import { viewport, watchViewport } from '../../shared/viewport.svelte';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
 
   onMount(() => {
     const stopWatchingViewport = watchViewport();
@@ -46,43 +51,78 @@
   <div class="traffic-light-spacer"></div>
   {#if !viewport.isMobile}
     <div class="left-actions">
-      <button
-        class="icon-btn"
-        onclick={toggleProjectsSidebar}
-        disabled={!projectsSidebarState.hasProjects}
-        title={sidebarOpen ? 'Hide projects sidebar' : 'Show projects sidebar'}
-      >
-        {#if !sidebarOpen || !projectsSidebarState.hasProjects}
-          <PanelLeftOpen size={14} />
-        {:else}
-          <PanelLeftClose size={14} />
-        {/if}
-      </button>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <span {...props} class="inline-flex">
+              <Button
+                variant="ghost"
+                size="icon-xs"
+                class="max-md:size-10 [&_svg]:size-3.5"
+                onclick={toggleProjectsSidebar}
+                disabled={!projectsSidebarState.hasProjects}
+              >
+                {#if !sidebarOpen || !projectsSidebarState.hasProjects}
+                  <PanelLeftOpen size={14} />
+                {:else}
+                  <PanelLeftClose size={14} />
+                {/if}
+              </Button>
+            </span>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content>
+          {sidebarOpen ? 'Hide projects sidebar' : 'Show projects sidebar'}
+        </Tooltip.Content>
+      </Tooltip.Root>
     </div>
   {/if}
   <div class="drag-spacer"></div>
 
   <div class="top-bar-actions">
-    <button
-      class="icon-btn"
-      onclick={() => window.dispatchEvent(new CustomEvent('staged:new-project'))}
-      disabled={navigation.activeView === 'settings'}
-      title={navigation.activeView === 'settings'
-        ? 'Unavailable while viewing settings'
-        : viewport.showShortcutHints
-          ? 'New project (⌘N)'
-          : 'New project'}
-    >
-      <Plus size={14} />
-    </button>
-
-    <button
-      class="icon-btn"
-      onclick={() => openSettings()}
-      title={viewport.showShortcutHints ? 'Settings (⌘,)' : 'Settings'}
-    >
-      <SlidersHorizontal size={14} />
-    </button>
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        {#snippet child({ props })}
+          <span {...props} class="inline-flex">
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              class="max-md:size-10 [&_svg]:size-3.5"
+              onclick={() => window.dispatchEvent(new CustomEvent('staged:new-project'))}
+              disabled={navigation.activeView === 'settings'}
+            >
+              <Plus size={14} />
+            </Button>
+          </span>
+        {/snippet}
+      </Tooltip.Trigger>
+      <Tooltip.Content>
+        {navigation.activeView === 'settings'
+          ? 'Unavailable while viewing settings'
+          : viewport.showShortcutHints
+            ? 'New project (⌘N)'
+            : 'New project'}
+      </Tooltip.Content>
+    </Tooltip.Root>
+
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        {#snippet child({ props })}
+          <Button
+            {...props}
+            variant="ghost"
+            size="icon-xs"
+            class="max-md:size-10 [&_svg]:size-3.5"
+            onclick={() => openSettings()}
+          >
+            <SlidersHorizontal size={14} />
+          </Button>
+        {/snippet}
+      </Tooltip.Trigger>
+      <Tooltip.Content>
+        {viewport.showShortcutHints ? 'Settings (⌘,)' : 'Settings'}
+      </Tooltip.Content>
+    </Tooltip.Root>
   </div>
 </div>
 
@@ -120,32 +160,6 @@
     gap: 4px;
   }
 
-  .icon-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 5px;
-    background: transparent;
-    border: none;
-    border-radius: 6px;
-    color: var(--text-muted);
-    cursor: pointer;
-    -webkit-app-region: no-drag;
-    transition:
-      color 0.1s,
-      background-color 0.1s;
-  }
-
-  .icon-btn:hover:not(:disabled) {
-    color: var(--text-primary);
-    background-color: var(--bg-hover);
-  }
-
-  .icon-btn:disabled {
-    opacity: 0.35;
-    cursor: not-allowed;
-  }
-
   @media (max-width: 768px) {
     .top-bar {
       padding: 6px 8px;
@@ -154,11 +168,5 @@
     .traffic-light-spacer {
       width: 58px;
     }
-
-    .icon-btn {
-      width: 40px;
-      height: 40px;
-      padding: 0;
-    }
   }
 </style>
diff --git a/apps/staged/src/lib/features/notes/NoteModal.svelte b/apps/staged/src/lib/features/notes/NoteModal.svelte
index 1de8f5922..0a9f2e0c1 100644
--- a/apps/staged/src/lib/features/notes/NoteModal.svelte
+++ b/apps/staged/src/lib/features/notes/NoteModal.svelte
@@ -6,10 +6,15 @@
 -->
 <script lang="ts">
   import { onDestroy, onMount } from 'svelte';
-  import { X, Copy, Check, MessageCircle } from 'lucide-svelte';
+  import X from '@lucide/svelte/icons/x';
+  import Copy from '@lucide/svelte/icons/copy';
+  import Check from '@lucide/svelte/icons/check';
+  import MessageCircle from '@lucide/svelte/icons/message-circle';
   import { marked } from 'marked';
+  import * as Dialog from '$lib/components/ui/dialog';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
   import { sanitize } from '../../shared/sanitize';
-  import { createBackdropDismissHandlers } from '../../shared/backdropDismiss';
   import { countAssistantMessagesAfter, handleExternalLinkClick } from '../../api/commands';
   import { formatChatButtonLabel } from '../sessions/noteFreshness';
   import InContentSearch from '../../shared/InContentSearch.svelte';
@@ -20,6 +25,7 @@
   marked.setOptions({ breaks: true, gfm: true });
 
   interface Props {
+    open: boolean;
     title: string;
     content: string;
     onClose: () => void;
@@ -34,6 +40,7 @@
   }
 
   let {
+    open,
     title,
     content,
     onClose,
@@ -45,7 +52,6 @@
   }: Props = $props();
 
   let copied = $state(false);
-  const backdropDismiss = createBackdropDismissHandlers({ onDismiss: () => onClose() });
   let assistantMessagesAfterNote = $state(0);
   let chatButtonLabel = $derived(formatChatButtonLabel(assistantMessagesAfterNote));
   let canOpenSession = $derived(Boolean(sessionId && onOpenSession));
@@ -111,19 +117,6 @@
     }
   }
 
-  function handleKeydown(e: KeyboardEvent) {
-    // Handle Escape key
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      if (searchVisible) {
-        closeSearch();
-      } else {
-        onClose();
-      }
-      return;
-    }
-  }
-
   function openSearch() {
     searchVisible = true;
   }
@@ -165,15 +158,12 @@
   function nextMatch() {
     if (matchElements.length === 0) return;
 
-    // Remove current class from old match
     if (matchElements[currentMatchIndex]) {
       matchElements[currentMatchIndex].classList.remove('search-match-current');
     }
 
-    // Cycle to next match (wrap around)
     currentMatchIndex = (currentMatchIndex + 1) % matchElements.length;
 
-    // Add current class to new match
     matchElements[currentMatchIndex].classList.add('search-match-current');
     scrollToMatch(matchElements[currentMatchIndex]);
   }
@@ -181,37 +171,41 @@
   function previousMatch() {
     if (matchElements.length === 0) return;
 
-    // Remove current class from old match
     if (matchElements[currentMatchIndex]) {
       matchElements[currentMatchIndex].classList.remove('search-match-current');
     }
 
-    // Cycle to previous match (wrap around)
     currentMatchIndex = (currentMatchIndex - 1 + matchElements.length) % matchElements.length;
 
-    // Add current class to new match
     matchElements[currentMatchIndex].classList.add('search-match-current');
     scrollToMatch(matchElements[currentMatchIndex]);
   }
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div
-  class="modal-backdrop"
-  role="dialog"
-  aria-modal="true"
-  tabindex="-1"
-  onpointerdown={backdropDismiss.handlePointerDown}
-  onclick={backdropDismiss.handleClick}
-  onkeydown={(e) => e.key === 'Escape' && onClose()}
+<Dialog.Root
+  {open}
+  onOpenChange={(v) => {
+    if (!v) {
+      if (searchVisible) {
+        closeSearch();
+      }
+      onClose();
+    }
+  }}
 >
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="modal" role="presentation" onclick={(e) => e.stopPropagation()}>
-    <header class="modal-header">
+  <Dialog.Content
+    class="sm:max-w-[700px] h-[80vh] max-h-[900px] p-0 gap-0 overflow-hidden flex flex-col"
+    showCloseButton={false}
+  >
+    <Dialog.Header
+      class="flex-row items-center justify-between gap-3 px-4 py-3 border-b border-[var(--border-subtle)] flex-shrink-0"
+    >
       <div class="header-content">
-        <span class="header-title">{title}</span>
+        <Dialog.Title
+          class="text-[var(--size-sm)] font-semibold text-foreground overflow-hidden text-ellipsis whitespace-nowrap"
+        >
+          {title}
+        </Dialog.Title>
       </div>
       <InContentSearch
         visible={searchVisible}
@@ -223,38 +217,70 @@
         onClose={closeSearch}
       />
       <div class="header-actions">
-        <button
-          class="header-btn"
-          class:copied
-          onclick={handleShare}
-          title={copied ? 'Copied!' : 'Copy note to clipboard'}
-        >
-          {#if copied}
-            <Check size={16} />
-          {:else}
-            <Copy size={16} />
-          {/if}
-        </button>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <Button
+                {...props}
+                variant="outline"
+                size="sm"
+                class={[
+                  'h-7 shrink-0 gap-1 border-[var(--border-muted)] bg-transparent px-2.5 text-xs text-muted-foreground shadow-none hover:border-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-foreground',
+                  copied && 'text-[var(--status-added)] hover:text-[var(--status-added)]',
+                ]}
+                onclick={handleShare}
+              >
+                {#if copied}
+                  <Check size={16} />
+                {:else}
+                  <Copy size={16} />
+                {/if}
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content>{copied ? 'Copied!' : 'Copy note to clipboard'}</Tooltip.Content>
+        </Tooltip.Root>
         {#if canOpenSession}
-          <button
-            class="header-btn"
-            onclick={() => onOpenSession?.(sessionId!)}
-            title="Open chat session"
-          >
-            View chat
-          </button>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="outline"
+                  size="sm"
+                  class="h-7 shrink-0 gap-1 border-[var(--border-muted)] bg-transparent px-2.5 text-xs text-muted-foreground shadow-none hover:border-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-foreground"
+                  onclick={() => onOpenSession?.(sessionId!)}
+                >
+                  View chat
+                </Button>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>Open chat session</Tooltip.Content>
+          </Tooltip.Root>
         {/if}
-        <button
-          class="close-btn"
-          onclick={onClose}
-          title={viewport.showShortcutHints ? 'Close (Esc)' : 'Close'}
-        >
-          <X size={16} />
-        </button>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <Button
+                {...props}
+                variant="ghost"
+                size="icon-sm"
+                class="size-7 shrink-0 rounded-md text-muted-foreground hover:bg-[var(--bg-hover)] hover:text-foreground [&_svg]:!size-4"
+                onclick={onClose}
+              >
+                <X size={16} />
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content>
+            {viewport.showShortcutHints ? 'Close (Esc)' : 'Close'}
+          </Tooltip.Content>
+        </Tooltip.Root>
       </div>
-    </header>
+    </Dialog.Header>
     <div class="modal-body">
-      <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
       <div class="modal-content" bind:this={contentEl} onclick={handleExternalLinkClick}>
         {#if content.trim()}
           <div class="markdown-content">
@@ -269,77 +295,56 @@
       <div class="next-steps">
         {#if showChatInfo}
           <div class="chat-info-row">
-            <button
-              class="chat-info-capsule"
-              onclick={() => onOpenSession?.(sessionId!)}
-              title="Open chat session"
-            >
-              <MessageCircle size={16} aria-hidden="true" />
-              <span>{chatButtonLabel}</span>
-            </button>
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                {#snippet child({ props })}
+                  <Button
+                    {...props}
+                    variant="outline"
+                    class="h-auto min-h-9 max-w-full gap-2 border-[var(--border-muted)] bg-[var(--bg-chrome)] px-3.5 py-2 text-sm font-medium text-foreground shadow-none hover:border-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-foreground"
+                    onclick={() => onOpenSession?.(sessionId!)}
+                  >
+                    <MessageCircle size={16} aria-hidden="true" />
+                    <span class="min-w-0 truncate">{chatButtonLabel}</span>
+                  </Button>
+                {/snippet}
+              </Tooltip.Trigger>
+              <Tooltip.Content>Open chat session</Tooltip.Content>
+            </Tooltip.Root>
           </div>
         {/if}
         {#if nextSteps && onStartSession && nextSteps.noteStep}
           <div class="next-step-row">
             <span class="next-step-prompt">{nextSteps.noteStep}</span>
-            <button
-              class="next-step-btn note-btn"
+            <Button
+              variant="outline"
+              size="sm"
+              class="h-auto shrink-0 rounded-md border-transparent bg-[var(--note-bg)] px-3 py-1 text-xs font-medium text-[var(--note-color)] shadow-none hover:border-transparent hover:bg-[var(--note-bg-emphasis)] hover:text-[var(--note-color)]"
               onclick={() => onStartSession('note', nextSteps!.noteStep!)}
             >
               Start note
-            </button>
+            </Button>
           </div>
         {/if}
         {#if nextSteps && onStartSession && nextSteps.commitStep}
           <div class="next-step-row">
             <span class="next-step-prompt">{nextSteps.commitStep}</span>
-            <button
-              class="next-step-btn commit-btn"
+            <Button
+              variant="outline"
+              size="sm"
+              class="h-auto shrink-0 rounded-md border-transparent bg-[var(--commit-bg)] px-3 py-1 text-xs font-medium text-[var(--commit-color)] shadow-none hover:border-transparent hover:bg-[var(--commit-bg-emphasis)] hover:text-[var(--commit-color)]"
               onclick={() => onStartSession('commit', nextSteps!.commitStep!)}
             >
               Start commit
-            </button>
+            </Button>
           </div>
         {/if}
       </div>
     {/if}
-  </div>
-</div>
+  </Dialog.Content>
+</Dialog.Root>
 
 <style>
-  .modal-backdrop {
-    position: fixed;
-    inset: 0;
-    background: var(--shadow-overlay);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-  }
-
-  .modal {
-    display: flex;
-    flex-direction: column;
-    width: 700px;
-    height: 80vh;
-    max-height: 900px;
-    background: var(--bg-chrome);
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: var(--shadow-elevated);
-  }
-
-  .modal-header {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 16px;
-    border-bottom: 1px solid var(--border-subtle);
-    flex-shrink: 0;
-    gap: 12px;
-  }
-
   .header-content {
     display: flex;
     align-items: center;
@@ -348,36 +353,6 @@
     flex: 1;
   }
 
-  .header-title {
-    font-size: var(--size-sm);
-    font-weight: 600;
-    color: var(--text-primary);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .close-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px;
-    background: none;
-    border: none;
-    border-radius: 6px;
-    color: var(--text-muted);
-    cursor: pointer;
-    flex-shrink: 0;
-    transition:
-      color 0.1s,
-      background-color 0.1s;
-  }
-
-  .close-btn:hover {
-    color: var(--text-primary);
-    background: var(--bg-hover);
-  }
-
   .header-actions {
     display: flex;
     align-items: center;
@@ -385,34 +360,6 @@
     flex-shrink: 0;
   }
 
-  .header-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px 10px;
-    background: none;
-    border: 1px solid var(--border-muted);
-    border-radius: 6px;
-    color: var(--text-muted);
-    cursor: pointer;
-    flex-shrink: 0;
-    font-size: 12px;
-    transition:
-      color 0.1s,
-      background-color 0.1s,
-      border-color 0.1s;
-  }
-
-  .header-btn:hover {
-    color: var(--text-primary);
-    background: var(--bg-hover);
-    border-color: var(--text-muted);
-  }
-
-  .header-btn.copied {
-    color: var(--status-added);
-  }
-
   .modal-body {
     position: relative;
     flex: 1;
@@ -598,104 +545,8 @@
     min-width: 0;
   }
 
-  .next-step-btn {
-    flex-shrink: 0;
-    padding: 4px 12px;
-    border: none;
-    border-radius: 6px;
-    font-size: 12px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.1s;
-  }
-
-  .next-step-btn.note-btn {
-    color: var(--note-color);
-    background: var(--note-bg);
-  }
-
-  .next-step-btn.note-btn:hover {
-    background: var(--note-bg-emphasis);
-  }
-
-  .next-step-btn.commit-btn {
-    color: var(--commit-color);
-    background: var(--commit-bg);
-  }
-
-  .next-step-btn.commit-btn:hover {
-    background: var(--commit-bg-emphasis);
-  }
-
   .chat-info-row {
     display: flex;
     justify-content: center;
   }
-
-  .chat-info-capsule {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    box-sizing: border-box;
-    max-width: 100%;
-    min-height: 36px;
-    padding: 8px 14px;
-    background: var(--bg-chrome);
-    border: 1px solid var(--border-muted);
-    border-radius: 8px;
-    color: var(--text-primary);
-    cursor: pointer;
-    font-size: var(--size-sm);
-    font-weight: 500;
-    transition:
-      background-color 0.1s,
-      border-color 0.1s,
-      color 0.1s;
-  }
-
-  .chat-info-capsule:hover {
-    background: var(--bg-hover);
-    border-color: var(--text-muted);
-  }
-
-  .chat-info-capsule span {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  @media (max-width: 700px) {
-    .modal {
-      width: 100vw;
-      height: 100vh;
-      height: 100dvh;
-      max-height: none;
-      border-radius: 0;
-      box-shadow: none;
-    }
-
-    .modal-header {
-      padding: 12px;
-    }
-
-    .header-btn,
-    .close-btn {
-      min-height: 40px;
-    }
-
-    .close-btn {
-      width: 40px;
-      padding: 0;
-    }
-
-    .modal-content {
-      padding: 16px;
-    }
-
-    .next-steps {
-      padding: 12px;
-    }
-  }
 </style>
diff --git a/apps/staged/src/lib/features/projects/AddRepoModal.svelte b/apps/staged/src/lib/features/projects/AddRepoModal.svelte
index ed0e54c51..21311645c 100644
--- a/apps/staged/src/lib/features/projects/AddRepoModal.svelte
+++ b/apps/staged/src/lib/features/projects/AddRepoModal.svelte
@@ -4,23 +4,22 @@
   Wraps RepoConfigForm in a dialog overlay with an "Add Repository" action button.
 -->
 <script lang="ts">
-  import { X } from 'lucide-svelte';
   import { slide } from 'svelte/transition';
-  import { createBackdropDismissHandlers } from '../../shared/backdropDismiss';
-  import FormButton from '../../shared/FormButton.svelte';
+  import * as Dialog from '$lib/components/ui/dialog';
+  import { Button } from '$lib/components/ui/button';
   import Spinner from '../../shared/Spinner.svelte';
   import RepoConfigForm from './RepoConfigForm.svelte';
   import type { PullRequest } from '../../types';
   import type { RepoSelection } from '../../shared/githubUrl';
 
   interface Props {
+    open: boolean;
     excludeRepos?: Set<string>;
     onAdded: (selection: RepoSelection) => void;
     onClose: () => void;
   }
 
-  let { excludeRepos, onAdded, onClose }: Props = $props();
-  const backdropDismiss = createBackdropDismissHandlers({ onDismiss: () => onClose() });
+  let { open, excludeRepos, onAdded, onClose }: Props = $props();
 
   let selectedRepo = $state<string | null>(null);
   let headRepo = $state<string | null>(null);
@@ -95,206 +94,55 @@
     }
   }
 
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      onClose();
-      return;
-    }
-
-    if (e.key === 'Enter') {
-      const target = e.target as HTMLElement;
-      if (target.closest('.repo-search-wrapper')) return;
-      if (target.closest('.subpath-input-wrapper')) return;
-      if (target.closest('.branch-picker-wrapper')) return;
-      e.preventDefault();
-      handleAdd();
-    }
+  function handleSubmit(e: SubmitEvent) {
+    e.preventDefault();
+    handleAdd();
   }
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div
-  class="modal-backdrop"
-  role="dialog"
-  aria-modal="true"
-  tabindex="-1"
-  onpointerdown={backdropDismiss.handlePointerDown}
-  onclick={backdropDismiss.handleClick}
-  onkeydown={(e) => e.key === 'Escape' && onClose()}
->
-  <div class="modal">
-    <div class="modal-header">
-      <h2>Add Repository</h2>
-      <button class="close-button" onclick={onClose}>
-        <X size={18} />
-      </button>
-    </div>
-
-    <div class="modal-body">
-      <div class="add-repo-form">
-        <RepoConfigForm
-          bind:selectedRepo
-          bind:headRepo
-          bind:subpath
-          bind:branchName
-          bind:isNewBranch
-          bind:matchedPr
-          bind:defaultBranch
-          bind:api={repoConfigApi}
-          {excludeRepos}
-          autofocus
-        />
-
-        {#if error}
-          <div class="error-message" transition:slide={{ duration: 150 }}>{error}</div>
-        {/if}
-
-        <div class="actions">
-          <FormButton
-            variant="primary"
-            class="full-width-btn"
-            onclick={handleAdd}
-            disabled={!selectedRepo || saving}
-          >
-            {#if saving}
-              <span class="button-content">
-                <Spinner size={14} />
-                <span>Adding...</span>
-              </span>
-            {:else}
-              Add
-            {/if}
-          </FormButton>
-        </div>
+<Dialog.Root {open} onOpenChange={(v) => !v && onClose()}>
+  <Dialog.Content class="sm:max-w-[460px] gap-3.5">
+    <Dialog.Header>
+      <Dialog.Title>Add Repository</Dialog.Title>
+    </Dialog.Header>
+
+    <form class="flex flex-col gap-3.5" onsubmit={handleSubmit}>
+      <RepoConfigForm
+        bind:selectedRepo
+        bind:headRepo
+        bind:subpath
+        bind:branchName
+        bind:isNewBranch
+        bind:matchedPr
+        bind:defaultBranch
+        bind:api={repoConfigApi}
+        {excludeRepos}
+        autofocus
+      />
+
+      {#if error}
+        <div class="error-message" transition:slide={{ duration: 150 }}>{error}</div>
+      {/if}
+
+      <div class="flex justify-end gap-2">
+        <Button type="submit" variant="outline" class="w-full" disabled={!selectedRepo || saving}>
+          {#if saving}
+            <span class="inline-flex items-center gap-1.5">
+              <Spinner size={14} />
+              <span>Adding...</span>
+            </span>
+          {:else}
+            Add
+          {/if}
+        </Button>
       </div>
-    </div>
-  </div>
-</div>
+    </form>
+  </Dialog.Content>
+</Dialog.Root>
 
 <style>
-  .modal-backdrop {
-    position: fixed;
-    inset: 0;
-    background-color: var(--shadow-overlay);
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    padding-top: 12vh;
-    z-index: 1000;
-  }
-
-  .modal {
-    width: 460px;
-    max-width: 90vw;
-    background-color: var(--bg-chrome);
-    border-radius: 12px;
-    box-shadow: var(--shadow-elevated);
-    display: flex;
-    flex-direction: column;
-  }
-
-  .modal-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 16px;
-    border-bottom: none;
-    border-radius: 12px 12px 0 0;
-  }
-
-  .modal-header h2 {
-    flex: 1;
-    margin: 0;
-    font-size: var(--size-md);
-    font-weight: 500;
-    color: var(--text-primary);
-  }
-
-  .close-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    background: transparent;
-    border: none;
-    border-radius: 4px;
-    color: var(--text-muted);
-    cursor: pointer;
-  }
-
-  .close-button:hover {
-    background-color: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .modal-body {
-    padding: 16px;
-  }
-
-  .add-repo-form {
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-  }
-
   .error-message {
     color: var(--ui-danger);
     font-size: var(--size-xs);
   }
-
-  .actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 8px;
-  }
-
-  :global(.full-width-btn) {
-    width: 100%;
-  }
-
-  .button-content {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-  }
-
-  @media (max-width: 640px) {
-    .modal-backdrop {
-      align-items: stretch;
-      padding-top: 0;
-    }
-
-    .modal {
-      width: 100vw;
-      max-width: none;
-      height: 100vh;
-      height: 100dvh;
-      border-radius: 0;
-      box-shadow: none;
-    }
-
-    .modal-header {
-      flex-shrink: 0;
-      padding: 12px 16px;
-      border-bottom: 1px solid var(--border-subtle);
-      border-radius: 0;
-    }
-
-    .close-button {
-      width: 40px;
-      height: 40px;
-    }
-
-    .modal-body {
-      flex: 1;
-      min-height: 0;
-      overflow: auto;
-      padding: 16px;
-    }
-  }
 </style>
diff --git a/apps/staged/src/lib/features/projects/BranchPicker.svelte b/apps/staged/src/lib/features/projects/BranchPicker.svelte
index fa1afc01c..68fd063fb 100644
--- a/apps/staged/src/lib/features/projects/BranchPicker.svelte
+++ b/apps/staged/src/lib/features/projects/BranchPicker.svelte
@@ -8,9 +8,11 @@
   - Selecting a branch uses its name directly
 -->
 <script lang="ts">
-  import { GitPullRequest, GitBranch } from 'lucide-svelte';
+  import GitPullRequest from '@lucide/svelte/icons/git-pull-request';
+  import GitBranch from '@lucide/svelte/icons/git-branch';
   import type { PullRequest, BranchRef } from '../../types';
   import * as commands from '../../api/commands';
+  import { Input } from '$lib/components/ui/input';
 
   interface PickerItem {
     kind: 'pr' | 'branch';
@@ -62,7 +64,7 @@
   let loading = $state(false);
   let showDropdown = $state(false);
   let highlightedIndex = $state(-1);
-  let inputEl: HTMLInputElement | undefined = $state();
+  let inputEl: HTMLInputElement | null = $state(null);
   /** Generation counter to discard stale async responses when repo changes rapidly. */
   let fetchGeneration = 0;
   /** Repo slug whose data is already loaded — prevents redundant re-fetch after fork switch. */
@@ -384,9 +386,9 @@
 
 <div class="branch-picker-wrapper">
   <div class="input-container">
-    <input
-      bind:this={inputEl}
-      class="branch-input"
+    <Input
+      bind:ref={inputEl}
+      class="min-h-[42px] rounded-[10px] px-3.5 py-2.5 text-base"
       type="text"
       bind:value
       oninput={handleInput}
@@ -457,33 +459,6 @@
     align-items: center;
   }
 
-  .branch-input {
-    width: 100%;
-    min-height: 42px;
-    border: 1.5px solid var(--border-muted);
-    background: transparent;
-    color: var(--text-primary);
-    border-radius: 10px;
-    padding: 10px 14px;
-    font-size: var(--size-md);
-    font-family: inherit;
-    outline: none;
-    transition: border-color 0.15s ease;
-    box-sizing: border-box;
-  }
-
-  .branch-input:focus {
-    border-color: var(--ui-accent);
-  }
-
-  .branch-input::placeholder {
-    color: var(--text-faint);
-  }
-
-  .branch-input:disabled {
-    opacity: 0.6;
-  }
-
   .suggestions-dropdown {
     position: absolute;
     top: 100%;
diff --git a/apps/staged/src/lib/features/projects/NewProjectForm.svelte b/apps/staged/src/lib/features/projects/NewProjectForm.svelte
index 7462b2e75..5939061aa 100644
--- a/apps/staged/src/lib/features/projects/NewProjectForm.svelte
+++ b/apps/staged/src/lib/features/projects/NewProjectForm.svelte
@@ -6,12 +6,14 @@
 -->
 <script lang="ts">
   import { slide } from 'svelte/transition';
-  import { Monitor, Cloud } from 'lucide-svelte';
+  import Monitor from '@lucide/svelte/icons/monitor';
+  import Cloud from '@lucide/svelte/icons/cloud';
   import type { Project } from '../../types';
   import * as commands from '../../api/commands';
-  import FormInput from '../../shared/FormInput.svelte';
-  import FormButton from '../../shared/FormButton.svelte';
-  import FormToggle from '../../shared/FormToggle.svelte';
+  import { Input } from '$lib/components/ui/input';
+  import { Button } from '$lib/components/ui/button';
+  import { Label } from '$lib/components/ui/label';
+  import * as ToggleGroup from '$lib/components/ui/toggle-group';
   import Spinner from '../../shared/Spinner.svelte';
   import RepoConfigForm from './RepoConfigForm.svelte';
   import type { BranchSelection } from './RepoConfigForm.svelte';
@@ -150,6 +152,11 @@
     }
   }
 
+  let nameInputRef = $state<HTMLInputElement | null>(null);
+  $effect(() => {
+    nameInputRef?.focus();
+  });
+
   function handleNameInput() {
     const parsed = parseGitHubUrl(name);
     if (parsed) {
@@ -167,8 +174,8 @@
 
 <div class="new-project-form">
   <div class="form-group">
-    <label for="project-name">Name</label>
-    <FormInput
+    <Label for="project-name" class="text-muted-foreground text-xs">Name</Label>
+    <Input
       bind:value={name}
       id="project-name"
       placeholder="e.g., Add dark mode, Fix login bug"
@@ -177,32 +184,34 @@
       autocorrect="off"
       autocapitalize="off"
       spellcheck={false}
-      autofocus
       oninput={handleNameInput}
+      class="min-h-[42px] rounded-[10px] px-3.5 py-2.5 text-base"
+      bind:ref={nameInputRef}
     />
   </div>
 
   {#if remoteProjectsAvailable}
     <div class="form-group">
       <div class="field-label">Location</div>
-      <FormToggle
+      <ToggleGroup.Root
+        type="single"
         bind:value={location}
-        options={[
-          {
-            value: 'local',
-            label: 'Local',
-            description: 'Run agents on your machine',
-            icon: Monitor,
-          },
-          {
-            value: 'remote',
-            label: 'Remote',
-            description: 'Run agents in the cloud',
-            icon: Cloud,
-          },
-        ]}
         disabled={saving}
-      />
+        class="flex flex-col gap-2"
+      >
+        {#each [{ value: 'local', label: 'Local', description: 'Run agents on your machine', icon: Monitor }, { value: 'remote', label: 'Remote', description: 'Run agents in the cloud', icon: Cloud }] as option}
+          <ToggleGroup.Item
+            value={option.value}
+            class="flex h-auto w-full items-center justify-start gap-3 rounded-[10px] border-[1.5px] border-border px-4 py-3.5 text-left text-muted-foreground hover:border-ring hover:bg-transparent hover:text-foreground data-[state=on]:border-foreground data-[state=on]:bg-foreground data-[state=on]:text-background"
+          >
+            <option.icon size={22} class="shrink-0" />
+            <span class="flex min-w-0 flex-col gap-0.5">
+              <span class="text-sm font-medium">{option.label}</span>
+              <span class="text-xs opacity-70">{option.description}</span>
+            </span>
+          </ToggleGroup.Item>
+        {/each}
+      </ToggleGroup.Root>
     </div>
   {/if}
 
@@ -226,23 +235,23 @@
 
   <div class="actions">
     {#if onCancel}
-      <FormButton onclick={onCancel} disabled={saving}>Cancel</FormButton>
+      <Button variant="ghost" onclick={onCancel} disabled={saving}>Cancel</Button>
     {/if}
-    <FormButton
-      variant="primary"
-      class={!onCancel ? 'full-width-btn' : ''}
+    <Button
+      variant="outline"
+      class={!onCancel ? 'w-full' : ''}
       onclick={handleCreate}
       disabled={!canCreate}
     >
       {#if saving}
-        <span class="button-content">
+        <span class="inline-flex items-center gap-1.5">
           <Spinner size={14} />
           <span>Creating...</span>
         </span>
       {:else}
         Create Project
       {/if}
-    </FormButton>
+    </Button>
   </div>
 </div>
 
@@ -259,11 +268,6 @@
     gap: 6px;
   }
 
-  label {
-    font-size: var(--size-xs);
-    color: var(--text-muted);
-  }
-
   .field-label {
     font-size: var(--size-xs);
     color: var(--text-muted);
@@ -280,22 +284,12 @@
     gap: 8px;
   }
 
-  :global(.full-width-btn) {
-    width: 100%;
-  }
-
-  .button-content {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-  }
-
   @media (max-width: 640px) {
     .actions {
       flex-direction: column-reverse;
     }
 
-    .actions :global(.form-btn) {
+    .actions :global(button) {
       width: 100%;
       min-height: 44px;
     }
diff --git a/apps/staged/src/lib/features/projects/NewProjectModal.svelte b/apps/staged/src/lib/features/projects/NewProjectModal.svelte
index e1fdeb943..590d1a3fb 100644
--- a/apps/staged/src/lib/features/projects/NewProjectModal.svelte
+++ b/apps/staged/src/lib/features/projects/NewProjectModal.svelte
@@ -4,147 +4,25 @@
   Renders the NewProjectForm inside a dialog overlay with header and close button.
 -->
 <script lang="ts">
-  import { X } from 'lucide-svelte';
+  import * as Dialog from '$lib/components/ui/dialog';
   import type { Project } from '../../types';
-  import { createBackdropDismissHandlers } from '../../shared/backdropDismiss';
   import NewProjectForm from './NewProjectForm.svelte';
 
   interface Props {
+    open: boolean;
     onCreated: (project: Project) => void;
     onClose: () => void;
   }
 
-  let { onCreated, onClose }: Props = $props();
-  const backdropDismiss = createBackdropDismissHandlers({ onDismiss: () => onClose() });
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      onClose();
-    }
-  }
+  let { open, onCreated, onClose }: Props = $props();
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div
-  class="modal-backdrop"
-  role="dialog"
-  aria-modal="true"
-  tabindex="-1"
-  onpointerdown={backdropDismiss.handlePointerDown}
-  onclick={backdropDismiss.handleClick}
-  onkeydown={(e) => e.key === 'Escape' && onClose()}
->
-  <div class="modal">
-    <div class="modal-header">
-      <h2>New Project</h2>
-      <button class="close-button" onclick={onClose}>
-        <X size={18} />
-      </button>
-    </div>
-
-    <div class="modal-body">
-      <NewProjectForm {onCreated} onCancel={onClose} />
-    </div>
-  </div>
-</div>
-
-<style>
-  .modal-backdrop {
-    position: fixed;
-    inset: 0;
-    background-color: var(--shadow-overlay);
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    padding-top: 12vh;
-    z-index: 1000;
-  }
-
-  .modal {
-    width: 460px;
-    max-width: 90vw;
-    background-color: var(--bg-chrome);
-    border-radius: 12px;
-    box-shadow: var(--shadow-elevated);
-    display: flex;
-    flex-direction: column;
-  }
-
-  .modal-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 16px;
-    border-bottom: none;
-    border-radius: 12px 12px 0 0;
-  }
-
-  .modal-header h2 {
-    flex: 1;
-    margin: 0;
-    font-size: var(--size-md);
-    font-weight: 500;
-    color: var(--text-primary);
-  }
+<Dialog.Root {open} onOpenChange={(v) => !v && onClose()}>
+  <Dialog.Content class="sm:max-w-[460px]">
+    <Dialog.Header>
+      <Dialog.Title>New Project</Dialog.Title>
+    </Dialog.Header>
 
-  .close-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    background: transparent;
-    border: none;
-    border-radius: 4px;
-    color: var(--text-muted);
-    cursor: pointer;
-  }
-
-  .close-button:hover {
-    background-color: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .modal-body {
-    padding: 16px;
-  }
-
-  @media (max-width: 640px) {
-    .modal-backdrop {
-      align-items: stretch;
-      padding-top: 0;
-    }
-
-    .modal {
-      width: 100vw;
-      max-width: none;
-      height: 100vh;
-      height: 100dvh;
-      border-radius: 0;
-      box-shadow: none;
-    }
-
-    .modal-header {
-      flex-shrink: 0;
-      padding: 12px 16px;
-      border-bottom: 1px solid var(--border-subtle);
-      border-radius: 0;
-    }
-
-    .close-button {
-      width: 40px;
-      height: 40px;
-    }
-
-    .modal-body {
-      flex: 1;
-      min-height: 0;
-      overflow: auto;
-      padding: 16px;
-    }
-  }
-</style>
+    <NewProjectForm {onCreated} onCancel={onClose} />
+  </Dialog.Content>
+</Dialog.Root>
diff --git a/apps/staged/src/lib/features/projects/ProjectContextMenu.svelte b/apps/staged/src/lib/features/projects/ProjectContextMenu.svelte
deleted file mode 100644
index b815a3465..000000000
--- a/apps/staged/src/lib/features/projects/ProjectContextMenu.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<script lang="ts">
-  import { onMount, tick } from 'svelte';
-  import { Mail, Trash2 } from 'lucide-svelte';
-  import ContextMenu from '../../shared/menu/ContextMenu.svelte';
-  import type { MenuItem } from '../../shared/menu/types';
-
-  interface Props {
-    x: number;
-    y: number;
-    onMarkAsUnread: () => void;
-    onRemoveProject: () => void;
-    onClose: () => void;
-  }
-
-  let { x, y, onMarkAsUnread, onRemoveProject, onClose }: Props = $props();
-
-  let contextMenu = $state<ReturnType<typeof ContextMenu> | undefined>();
-  let mounted = false;
-
-  let items = $derived<MenuItem[]>([
-    {
-      type: 'action',
-      label: 'Mark as Unread',
-      icon: Mail,
-      onSelect: onMarkAsUnread,
-    },
-    {
-      type: 'action',
-      label: 'Remove Project',
-      icon: Trash2,
-      danger: true,
-      onSelect: onRemoveProject,
-    },
-  ]);
-
-  async function openMenu() {
-    await tick();
-    contextMenu?.open({
-      x,
-      y,
-      items,
-      ariaLabel: 'Project actions',
-    });
-  }
-
-  onMount(() => {
-    mounted = true;
-    void openMenu();
-  });
-
-  $effect(() => {
-    x;
-    y;
-    items;
-    if (mounted) {
-      void openMenu();
-    }
-  });
-</script>
-
-<ContextMenu bind:this={contextMenu} ariaLabel="Project actions" minWidth={172} {onClose} />
diff --git a/apps/staged/src/lib/features/projects/ProjectHome.svelte b/apps/staged/src/lib/features/projects/ProjectHome.svelte
index 0fb3a9afd..a5074f646 100644
--- a/apps/staged/src/lib/features/projects/ProjectHome.svelte
+++ b/apps/staged/src/lib/features/projects/ProjectHome.svelte
@@ -23,9 +23,10 @@
   import type { RepoSelection as RepoPickerSelection } from '../../shared/githubUrl';
   import NewProjectModal from './NewProjectModal.svelte';
   import ProjectsSidebar from './ProjectsSidebar.svelte';
-  import ConfirmDialog from '../../shared/ConfirmDialog.svelte';
   import SplashScreen from './SplashScreen.svelte';
-  import { alerts } from '../../shared/alerts.svelte';
+  import * as AlertDialog from '$lib/components/ui/alert-dialog';
+  import { Button } from '$lib/components/ui/button';
+  import { toast } from 'svelte-sonner';
   import { setProjects } from './projectsSidebarState.svelte';
   import { workspaceLifecycle } from './workspaceLifecycle.svelte';
   import { projectRunActionsStore } from '../../stores/projectRunActions.svelte';
@@ -508,11 +509,7 @@
     } catch (e) {
       console.error('Failed to delete project:', e);
       const message = e instanceof Error ? e.message : String(e);
-      alerts.show({
-        tone: 'error',
-        title: 'Unable to delete project',
-        message,
-      });
+      toast.error('Unable to delete project', { description: message });
     } finally {
       const next = new Map(deletingProjectNames);
       next.delete(id);
@@ -564,11 +561,9 @@
     } catch (e) {
       console.error('Failed to add repo:', e);
       const message = e instanceof Error ? e.message : String(e);
-      alerts.show({
-        tone: 'error',
-        title: 'Unable to add repository',
-        message,
-        durationMs: 0,
+      toast.error('Unable to add repository', {
+        description: message,
+        duration: Infinity,
       });
     }
   }
@@ -696,10 +691,10 @@
               Not ready? Install <code>v{storeIncompat.dbAppVersion}</code> instead.
             </p>
             <div class="update-actions">
-              <button class="close-button" onclick={handleClose}>Close</button>
-              <button class="reset-button" onclick={handleResetStore} disabled={resetting}>
+              <Button variant="ghost" size="sm" onclick={handleClose}>Close</Button>
+              <Button variant="outline" size="sm" onclick={handleResetStore} disabled={resetting}>
                 {resetting ? 'Resetting…' : 'Reset & Update'}
-              </button>
+              </Button>
             </div>
           </div>
         </div>
@@ -718,7 +713,7 @@
           <div class="update-footer">
             <div></div>
             <div class="update-actions">
-              <button class="close-button" onclick={handleClose}>Close</button>
+              <Button variant="ghost" size="sm" onclick={handleClose}>Close</Button>
             </div>
           </div>
         </div>
@@ -769,33 +764,57 @@
 </div>
 
 <!-- New project modal (only when projects exist; splash screen handles inline form otherwise) -->
-{#if showNewProjectModal && hasContent}
-  <NewProjectModal onCreated={handleProjectCreated} onClose={() => (showNewProjectModal = false)} />
-{/if}
+<NewProjectModal
+  open={showNewProjectModal && hasContent}
+  onCreated={handleProjectCreated}
+  onClose={() => (showNewProjectModal = false)}
+/>
 
 <!-- Delete project confirmation -->
-{#if projectToDelete}
-  <ConfirmDialog
-    title="Remove Project"
-    message={`Remove "${projectDisplayName(projectToDelete)}" from Staged? There are unmerged changes in this project's branches. Deleting this project will lose any changes not pushed to GitHub.`}
-    confirmLabel="Remove"
-    danger={true}
-    onConfirm={confirmDeleteProject}
-    onCancel={() => (projectToDelete = null)}
-  />
-{/if}
+<AlertDialog.Root
+  open={projectToDelete !== null}
+  onOpenChange={(v) => !v && (projectToDelete = null)}
+>
+  <AlertDialog.Content>
+    {#if projectToDelete}
+      <AlertDialog.Header>
+        <AlertDialog.Title>Remove Project</AlertDialog.Title>
+        <AlertDialog.Description>
+          {`Remove "${projectDisplayName(projectToDelete)}" from Staged? There are unmerged changes in this project's branches. Deleting this project will lose any changes not pushed to GitHub.`}
+        </AlertDialog.Description>
+      </AlertDialog.Header>
+      <AlertDialog.Footer>
+        <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+        <AlertDialog.Action variant="destructive" onclick={confirmDeleteProject}>
+          Remove
+        </AlertDialog.Action>
+      </AlertDialog.Footer>
+    {/if}
+  </AlertDialog.Content>
+</AlertDialog.Root>
 
 <!-- Delete branch confirmation -->
-{#if branchToDelete}
-  <ConfirmDialog
-    title="Delete Repo"
-    message={`Delete repo for branch "${branchToDelete.branch.branchName}"? This removes its tracked branch and local worktree/remote workspace.`}
-    confirmLabel="Delete"
-    danger={true}
-    onConfirm={confirmDeleteBranch}
-    onCancel={() => (branchToDelete = null)}
-  />
-{/if}
+<AlertDialog.Root
+  open={branchToDelete !== null}
+  onOpenChange={(v) => !v && (branchToDelete = null)}
+>
+  <AlertDialog.Content>
+    {#if branchToDelete}
+      <AlertDialog.Header>
+        <AlertDialog.Title>Delete Repo</AlertDialog.Title>
+        <AlertDialog.Description>
+          {`Delete repo for branch "${branchToDelete.branch.branchName}"? This removes its tracked branch and local worktree/remote workspace.`}
+        </AlertDialog.Description>
+      </AlertDialog.Header>
+      <AlertDialog.Footer>
+        <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+        <AlertDialog.Action variant="destructive" onclick={confirmDeleteBranch}>
+          Delete
+        </AlertDialog.Action>
+      </AlertDialog.Footer>
+    {/if}
+  </AlertDialog.Content>
+</AlertDialog.Root>
 
 <style>
   .project-home {
@@ -906,44 +925,6 @@
     flex-shrink: 0;
   }
 
-  .close-button {
-    padding: 7px 16px;
-    background: none;
-    border: 1px solid var(--border-muted);
-    border-radius: 8px;
-    color: var(--text-muted);
-    font-size: var(--size-sm);
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-
-  .close-button:hover {
-    border-color: var(--border-emphasis);
-    color: var(--text-primary);
-  }
-
-  .reset-button {
-    padding: 7px 16px;
-    background-color: var(--ui-accent);
-    border: none;
-    border-radius: 8px;
-    color: var(--bg-deepest);
-    font-size: var(--size-sm);
-    font-weight: 600;
-    cursor: pointer;
-    transition: background-color 0.15s ease;
-  }
-
-  .reset-button:hover {
-    background-color: var(--ui-accent-hover);
-  }
-
-  .reset-button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
   /* Projects list */
   .projects-list {
     width: 100%;
@@ -975,8 +956,7 @@
       justify-content: flex-end;
     }
 
-    .close-button,
-    .reset-button {
+    .update-actions :global(button) {
       min-height: 40px;
     }
 
diff --git a/apps/staged/src/lib/features/projects/ProjectSection.svelte b/apps/staged/src/lib/features/projects/ProjectSection.svelte
index 4699b9766..963a97c51 100644
--- a/apps/staged/src/lib/features/projects/ProjectSection.svelte
+++ b/apps/staged/src/lib/features/projects/ProjectSection.svelte
@@ -8,21 +8,19 @@
   import { onMount, onDestroy } from 'svelte';
   import { listenToEvent } from '../../transport';
   import { untrack } from 'svelte';
-  import {
-    ChevronLeft,
-    Trash2,
-    Plus,
-    Send,
-    FileText,
-    CircleCheck,
-    CirclePause,
-    Pause,
-    AlertCircle,
-    Cloud,
-    Paperclip,
-    X,
-    ImagePlus,
-  } from 'lucide-svelte';
+  import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+  import Trash2 from '@lucide/svelte/icons/trash-2';
+  import Plus from '@lucide/svelte/icons/plus';
+  import Send from '@lucide/svelte/icons/send';
+  import FileText from '@lucide/svelte/icons/file-text';
+  import CircleCheck from '@lucide/svelte/icons/circle-check';
+  import CirclePause from '@lucide/svelte/icons/circle-pause';
+  import Pause from '@lucide/svelte/icons/pause';
+  import AlertCircle from '@lucide/svelte/icons/alert-circle';
+  import Cloud from '@lucide/svelte/icons/cloud';
+  import Paperclip from '@lucide/svelte/icons/paperclip';
+  import X from '@lucide/svelte/icons/x';
+  import ImagePlus from '@lucide/svelte/icons/image-plus';
   import type {
     Project,
     ProjectRepo,
@@ -46,7 +44,6 @@
   import SuggestedRepos from './SuggestedRepos.svelte';
   import type { RepoSelection as RepoPickerSelection } from '../../shared/githubUrl';
   import TimelineRow from '../timeline/TimelineRow.svelte';
-  import TimelineContextMenu from '../timeline/TimelineContextMenu.svelte';
   import NoteModal from '../notes/NoteModal.svelte';
   import SessionModal from '../sessions/SessionModal.svelte';
   import AgentSelector from '../agents/AgentSelector.svelte';
@@ -63,6 +60,8 @@
   import { focusAtEnd } from '../../shared/focusAtEnd';
   import { buildReferringPrompt } from '../../shared/buildReferringPrompt';
   import { createLiveSessionHints } from '../timeline/liveSessionHints';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
   import type { LinkedNoteContext } from '../sessions/noteFreshness';
 
   interface Props {
@@ -451,7 +450,6 @@
     noteUpdatedAt?: number;
   } | null>(null);
   let openSessionId = $state<string | null>(null);
-  let projectContextMenuRef: TimelineContextMenu | undefined = $state();
 
   function linkedNoteContext(note: ProjectNote | undefined): LinkedNoteContext | null {
     if (!note) return null;
@@ -522,12 +520,30 @@
 <div class="project-section">
   <div class="project-header" class:deleting>
     <div class="project-info">
-      <button class="back-button" onclick={goHome} title="Back to projects">
-        <ChevronLeft size={16} />
-      </button>
-      <span class="project-name" title={projectDisplayName(project)}
-        >{projectDisplayName(project)}</span
-      >
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <Button
+              {...props}
+              variant="ghost"
+              size="icon"
+              class="size-6 shrink-0 text-muted-foreground hover:bg-[var(--ui-selection)] hover:text-foreground max-md:size-10 [&_svg]:!size-4"
+              onclick={goHome}
+            >
+              <ChevronLeft size={16} />
+            </Button>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content>Back to projects</Tooltip.Content>
+      </Tooltip.Root>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <span {...props} class="project-name">{projectDisplayName(project)}</span>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content>{projectDisplayName(project)}</Tooltip.Content>
+      </Tooltip.Root>
       {#if deleting}
         <div class="deleting-status" role="status" aria-live="polite">
           <Spinner size={12} />
@@ -541,63 +557,110 @@
         </div>
       {/if}
       {#if projectWorkspaceStatus}
-        <div
-          class="workspace-status-badge"
-          class:starting={projectWorkspaceStatus === 'starting'}
-          class:running={projectWorkspaceStatus === 'running'}
-          class:stopped={projectWorkspaceStatus === 'stopped'}
-          class:suspended={projectWorkspaceStatus === 'suspended'}
-          class:error={projectWorkspaceStatus === 'error'}
-          title={projectWorkspaceStatus === 'running' && projectWorkstationName
-            ? projectWorkstationName
-            : undefined}
-        >
-          {#if projectWorkspaceStatus === 'starting'}
-            <Spinner size={12} />
-          {:else if projectWorkspaceStatus === 'running'}
-            <Cloud size={12} />
-          {:else if projectWorkspaceStatus === 'stopped'}
-            <CirclePause size={12} />
-          {:else if projectWorkspaceStatus === 'suspended'}
-            <Pause size={12} />
-          {:else if projectWorkspaceStatus === 'error'}
-            <AlertCircle size={12} />
-          {/if}
-          <span>{statusLabel(projectWorkspaceStatus)}</span>
-          {#if projectWorkspaceStatus === 'suspended' && projectWorkstationName}
-            <button
-              class="resume-button"
-              onclick={() => onResumeWorkspace?.(projectWorkstationName!)}
-              title="Resume suspended workspace"
-            >
-              Resume
-            </button>
-          {/if}
-        </div>
+        <Tooltip.Root disabled={!(projectWorkspaceStatus === 'running' && projectWorkstationName)}>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <div
+                {...props}
+                class="workspace-status-badge"
+                class:starting={projectWorkspaceStatus === 'starting'}
+                class:running={projectWorkspaceStatus === 'running'}
+                class:stopped={projectWorkspaceStatus === 'stopped'}
+                class:suspended={projectWorkspaceStatus === 'suspended'}
+                class:error={projectWorkspaceStatus === 'error'}
+              >
+                {#if projectWorkspaceStatus === 'starting'}
+                  <Spinner size={12} />
+                {:else if projectWorkspaceStatus === 'running'}
+                  <Cloud size={12} />
+                {:else if projectWorkspaceStatus === 'stopped'}
+                  <CirclePause size={12} />
+                {:else if projectWorkspaceStatus === 'suspended'}
+                  <Pause size={12} />
+                {:else if projectWorkspaceStatus === 'error'}
+                  <AlertCircle size={12} />
+                {/if}
+                <span>{statusLabel(projectWorkspaceStatus)}</span>
+                {#if projectWorkspaceStatus === 'suspended' && projectWorkstationName}
+                  <Tooltip.Root>
+                    <Tooltip.Trigger>
+                      {#snippet child({ props: resumeProps })}
+                        <Button
+                          {...resumeProps}
+                          variant="ghost"
+                          class="ml-1 h-auto rounded-none border-l border-[var(--border-muted)] bg-transparent px-1 py-0 text-[length:calc(var(--size-xs)-1px)] font-semibold text-[var(--ui-info)] shadow-none focus-visible:ring-0 hover:bg-transparent hover:text-[var(--ui-info)] hover:underline"
+                          onclick={() => onResumeWorkspace?.(projectWorkstationName!)}
+                        >
+                          Resume
+                        </Button>
+                      {/snippet}
+                    </Tooltip.Trigger>
+                    <Tooltip.Content>Resume suspended workspace</Tooltip.Content>
+                  </Tooltip.Root>
+                {/if}
+              </div>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content>{projectWorkstationName ?? ''}</Tooltip.Content>
+        </Tooltip.Root>
       {/if}
     </div>
     {#if !deleting}
       <div class="header-actions">
-        <button
-          class="header-action-button"
-          onclick={() => {
-            addRepoModalOpen = true;
-          }}
-          disabled={addRepoDisabled}
-          title={addRepoTitle}
-        >
-          <span class="action-icon"><Plus size={12} /></span>
-          Add Repo
-        </button>
-        <button
-          class="header-action-button danger"
-          class:safe-delete={safeToDelete}
-          onclick={() => onDeleteProject?.()}
-          title="Remove project"
-        >
-          <span class="trash-icon"><Trash2 size={14} /></span>
-          Remove Project
-        </button>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <span {...props} class="inline-flex">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  class="group gap-2 text-foreground hover:bg-[var(--ui-selection)] hover:text-foreground max-md:h-10 max-md:justify-center max-md:p-2"
+                  onclick={() => {
+                    addRepoModalOpen = true;
+                  }}
+                  disabled={addRepoDisabled}
+                >
+                  <span
+                    class="flex size-4 shrink-0 items-center justify-center rounded-full bg-[var(--border-muted)] transition-colors group-hover:not-disabled:bg-[var(--border-emphasis)]"
+                  >
+                    <Plus size={12} />
+                  </span>
+                  Add Repo
+                </Button>
+              </span>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content>{addRepoTitle}</Tooltip.Content>
+        </Tooltip.Root>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <Button
+                {...props}
+                variant="ghost"
+                size="sm"
+                class={[
+                  'group gap-2 text-foreground hover:bg-[var(--ui-selection)] hover:text-destructive max-md:h-10 max-md:justify-center max-md:p-2',
+                  safeToDelete && 'border border-destructive text-destructive',
+                ]}
+                onclick={() => onDeleteProject?.()}
+              >
+                <span
+                  class={[
+                    'flex shrink-0 items-center transition-colors',
+                    safeToDelete
+                      ? 'text-destructive'
+                      : 'text-muted-foreground group-hover:text-destructive',
+                  ]}
+                >
+                  <Trash2 size={14} />
+                </span>
+                Remove Project
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content>Remove project</Tooltip.Content>
+        </Tooltip.Root>
       </div>
     {/if}
   </div>
@@ -623,9 +686,25 @@
     >
       <div class="prompt-input-row">
         {#if imageIds.length === 0}
-          <button class="attach-btn" onclick={openImagePicker} title="Attach image">
-            <Paperclip size={14} />
-          </button>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="ghost"
+                  size="icon-sm"
+                  class={[
+                    'size-7 shrink-0 bg-transparent text-[var(--text-faint)] hover:bg-[var(--ui-selection)] hover:text-foreground [&_svg]:!size-3.5',
+                    promptExpanded ? 'max-md:size-10' : 'max-md:size-8',
+                  ]}
+                  onclick={openImagePicker}
+                >
+                  <Paperclip size={14} />
+                </Button>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>Attach image</Tooltip.Content>
+          </Tooltip.Root>
         {/if}
         <HashtagInput
           class="prompt-input"
@@ -640,37 +719,74 @@
         />
         <div class="prompt-actions">
           <AgentSelector />
-          <button
-            class="send-button"
-            onclick={handleSubmitPrompt}
-            disabled={!canSubmitPrompt}
-            title={sendButtonTitle}
-          >
-            <Send size={14} />
-          </button>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <span {...props} class="inline-flex">
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    class={[
+                      'size-8 shrink-0 rounded-lg shadow-none [&_svg]:!size-3.5',
+                      promptExpanded
+                        ? 'max-md:size-10 max-md:rounded-lg'
+                        : 'max-md:size-8 max-md:rounded-md',
+                    ]}
+                    onclick={handleSubmitPrompt}
+                    disabled={!canSubmitPrompt}
+                  >
+                    <Send size={14} />
+                  </Button>
+                </span>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>{sendButtonTitle}</Tooltip.Content>
+          </Tooltip.Root>
         </div>
       </div>
       {#if imageIds.length > 0}
         <div class="reply-images">
           {#each imageIds as imageId}
-            <div class="reply-image-thumb">
+            <div class="reply-image-thumb group/thumb">
               {#if imagePreviews.get(imageId)}
                 <img src={imagePreviews.get(imageId)} alt="attached" />
               {:else}
                 <div class="reply-image-placeholder"><ImagePlus size={16} /></div>
               {/if}
-              <button
-                class="reply-image-remove"
-                onclick={() => removeImage(imageId)}
-                title="Remove image"
-              >
-                <X size={10} />
-              </button>
+              <Tooltip.Root>
+                <Tooltip.Trigger>
+                  {#snippet child({ props })}
+                    <Button
+                      {...props}
+                      variant="ghost"
+                      size="icon"
+                      class="absolute top-0.5 right-0.5 size-4 rounded-full bg-[var(--bg-deepest)] text-muted-foreground opacity-0 shadow-none transition-opacity hover:bg-[var(--bg-chrome)] hover:text-foreground group-hover/thumb:opacity-100 [&_svg]:!size-2.5"
+                      onclick={() => removeImage(imageId)}
+                    >
+                      <X size={10} />
+                    </Button>
+                  {/snippet}
+                </Tooltip.Trigger>
+                <Tooltip.Content>Remove image</Tooltip.Content>
+              </Tooltip.Root>
             </div>
           {/each}
-          <button class="reply-image-add" onclick={openImagePicker} title="Add image">
-            <Plus size={16} />
-          </button>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="outline"
+                  size="icon"
+                  class="size-12 shrink-0 rounded-md border border-dashed border-[var(--border-muted)] bg-transparent text-[var(--text-faint)] shadow-none hover:border-[var(--border-emphasis)] hover:bg-transparent hover:text-muted-foreground [&_svg]:!size-4"
+                  onclick={openImagePicker}
+                >
+                  <Plus size={16} />
+                </Button>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>Add image</Tooltip.Content>
+          </Tooltip.Root>
         </div>
       {/if}
     </div>
@@ -721,7 +837,10 @@
             }}
             onDeleteClick={() => handleDeleteNote(note.id)}
             hashtagRef={noteType === 'note' ? `#project-note:${note.id}` : undefined}
-            onContextMenu={(e) => projectContextMenuRef?.open(e)}
+            onNewSessionReferring={(ref) => {
+              promptText = buildReferringPrompt(promptText, ref);
+              focusAtEnd(promptTextarea);
+            }}
           />
         {/each}
       </div>
@@ -747,61 +866,49 @@
   <SuggestedRepos {project} {reposById} {onRepoSelected} />
 </div>
 
-{#if openNote}
-  <NoteModal
-    title={openNote.title}
-    content={openNote.content}
-    sessionId={openNote.sessionId}
-    noteUpdatedAt={openNote.noteUpdatedAt}
-    onClose={() => (openNote = null)}
-    onOpenSession={(sid) => {
-      openNote = null;
-      openSessionId = sid;
-    }}
-  />
-{/if}
-
-{#if openSessionId}
-  {@const noteForSession = linkedNoteContext(
-    projectNotes.find((n) => n.sessionId === openSessionId)
-  )}
-  <SessionModal
-    sessionId={openSessionId}
-    repoDir={projectDisplayRootCandidates}
-    projectId={project.id}
-    noteInfo={noteForSession}
-    onOpenNote={(note) => {
-      const sid = openSessionId;
-      openSessionId = null;
-      openNote = {
-        title: note.title,
-        content: note.content,
-        sessionId: sid ?? undefined,
-        noteUpdatedAt: note.updatedAt,
-      };
-    }}
-    onClose={() => {
-      openSessionId = null;
-      loadProjectNotes();
-    }}
-  />
-{/if}
-
-{#if addRepoModalOpen}
-  <AddRepoModal
-    {excludeRepos}
-    onAdded={handleRepoSelected}
-    onClose={() => {
-      addRepoModalOpen = false;
-    }}
-  />
-{/if}
-
-<TimelineContextMenu
-  bind:this={projectContextMenuRef}
-  onNewSessionReferring={(ref) => {
-    promptText = buildReferringPrompt(promptText, ref);
-    focusAtEnd(promptTextarea);
+<NoteModal
+  open={openNote !== null}
+  title={openNote?.title ?? ''}
+  content={openNote?.content ?? ''}
+  sessionId={openNote?.sessionId}
+  noteUpdatedAt={openNote?.noteUpdatedAt}
+  onClose={() => (openNote = null)}
+  onOpenSession={(sid) => {
+    openNote = null;
+    openSessionId = sid;
+  }}
+/>
+
+<SessionModal
+  open={openSessionId !== null}
+  sessionId={openSessionId ?? ''}
+  repoDir={projectDisplayRootCandidates}
+  projectId={project.id}
+  noteInfo={openSessionId
+    ? linkedNoteContext(projectNotes.find((n) => n.sessionId === openSessionId))
+    : null}
+  onOpenNote={(note) => {
+    const sid = openSessionId;
+    openSessionId = null;
+    openNote = {
+      title: note.title,
+      content: note.content,
+      sessionId: sid ?? undefined,
+      noteUpdatedAt: note.updatedAt,
+    };
+  }}
+  onClose={() => {
+    openSessionId = null;
+    loadProjectNotes();
+  }}
+/>
+
+<AddRepoModal
+  open={addRepoModalOpen}
+  {excludeRepos}
+  onAdded={handleRepoSelected}
+  onClose={() => {
+    addRepoModalOpen = false;
   }}
 />
 
@@ -831,27 +938,6 @@
     flex: 1;
   }
 
-  .back-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    padding: 0;
-    border: none;
-    border-radius: 6px;
-    background-color: transparent;
-    color: var(--text-muted);
-    cursor: pointer;
-    transition: all 0.15s ease;
-    flex-shrink: 0;
-  }
-
-  .back-button:hover {
-    color: var(--text-primary);
-    background-color: var(--ui-selection);
-  }
-
   .project-name {
     font-size: var(--size-xl);
     font-weight: 600;
@@ -869,80 +955,6 @@
     gap: 4px;
   }
 
-  .header-action-button {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 10px;
-    background-color: transparent;
-    border: none;
-    border-radius: 8px;
-    color: var(--text-primary);
-    font-size: var(--size-sm);
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    white-space: nowrap;
-  }
-
-  .header-action-button:hover {
-    color: var(--text-primary);
-    background-color: var(--ui-selection);
-  }
-
-  .header-action-button:hover .action-icon {
-    background-color: var(--border-emphasis);
-  }
-
-  .header-action-button:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .header-action-button:disabled:hover {
-    color: var(--text-muted);
-    background-color: transparent;
-  }
-
-  .header-action-button:disabled:hover .action-icon {
-    background-color: var(--border-muted);
-  }
-
-  .action-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    background-color: var(--border-muted);
-    flex-shrink: 0;
-  }
-
-  .trash-icon {
-    display: flex;
-    align-items: center;
-    color: var(--text-muted);
-    transition: color 0.15s ease;
-  }
-
-  .header-action-button.danger:hover {
-    color: var(--ui-danger);
-  }
-
-  .header-action-button.danger:hover .trash-icon {
-    color: var(--ui-danger);
-  }
-
-  .header-action-button.safe-delete {
-    color: var(--ui-danger);
-    border: 1px solid var(--ui-danger);
-  }
-
-  .header-action-button.safe-delete .trash-icon {
-    color: var(--ui-danger);
-  }
-
   .detecting-status {
     height: 22px;
     display: flex;
@@ -1011,21 +1023,6 @@
     color: var(--text-muted);
   }
 
-  .resume-button {
-    all: unset;
-    cursor: pointer;
-    margin-left: 4px;
-    padding: 0 4px;
-    font-size: calc(var(--size-xs) - 1px);
-    font-weight: 600;
-    color: var(--ui-info);
-    border-left: 1px solid var(--border-muted);
-  }
-
-  .resume-button:hover {
-    text-decoration: underline;
-  }
-
   .workspace-status-badge.error {
     border-color: var(--ui-danger);
     color: var(--ui-danger);
@@ -1069,29 +1066,6 @@
     background-color: color-mix(in srgb, var(--ui-accent) 6%, var(--bg-primary));
   }
 
-  .attach-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    border: none;
-    border-radius: 6px;
-    background: none;
-    color: var(--text-faint);
-    cursor: pointer;
-    flex-shrink: 0;
-    transition:
-      color 0.15s ease,
-      background-color 0.15s ease;
-  }
-
-  .attach-btn:hover {
-    color: var(--text-primary);
-    background-color: var(--ui-selection);
-  }
-
   .prompt-input-row :global(.prompt-input) {
     flex: 1;
     margin: 0;
@@ -1139,30 +1113,6 @@
     gap: 4px;
   }
 
-  .send-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    border: none;
-    border-radius: 8px;
-    background-color: var(--ui-accent);
-    color: var(--bg-deepest);
-    cursor: pointer;
-    flex-shrink: 0;
-    transition: all 0.15s ease;
-  }
-
-  .send-button:hover:not(:disabled) {
-    background-color: var(--ui-accent-hover);
-  }
-
-  .send-button:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
-
   /* ── Reply image previews ─────────────────────────────────────────── */
 
   .reply-images {
@@ -1199,57 +1149,6 @@
     color: var(--text-faint);
   }
 
-  .reply-image-remove {
-    position: absolute;
-    top: 2px;
-    right: 2px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    background: var(--bg-deepest);
-    color: var(--text-muted);
-    cursor: pointer;
-    opacity: 0;
-    transition:
-      opacity 0.1s,
-      color 0.1s;
-  }
-
-  .reply-image-thumb:hover .reply-image-remove {
-    opacity: 1;
-  }
-
-  .reply-image-remove:hover {
-    color: var(--text-primary);
-    background: var(--bg-chrome);
-  }
-
-  .reply-image-add {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    border-radius: 6px;
-    border: 1px dashed var(--border-muted);
-    background: none;
-    color: var(--text-faint);
-    cursor: pointer;
-    transition:
-      color 0.1s,
-      border-color 0.1s;
-  }
-
-  .reply-image-add:hover {
-    color: var(--text-muted);
-    border-color: var(--border-emphasis);
-  }
-
   /* ── Project notes ───────────────────────────────────────────────────── */
 
   .project-notes {
@@ -1310,11 +1209,6 @@
       font-size: var(--size-lg);
     }
 
-    .back-button {
-      width: 40px;
-      height: 40px;
-    }
-
     .header-actions {
       display: grid;
       grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -1322,12 +1216,6 @@
       width: 100%;
     }
 
-    .header-action-button {
-      min-height: 40px;
-      justify-content: center;
-      padding: 8px;
-    }
-
     .detecting-status,
     .deleting-status,
     .workspace-status-badge {
@@ -1341,11 +1229,6 @@
       padding: 4px 6px;
     }
 
-    .attach-btn {
-      width: 32px;
-      height: 32px;
-    }
-
     .prompt-input-row :global(.hashtag-input-wrapper) {
       min-width: 0;
       flex: 1 1 auto;
@@ -1383,23 +1266,12 @@
       display: none;
     }
 
-    .send-button {
-      width: 32px;
-      height: 32px;
-      border-radius: 6px;
-    }
-
     .prompt-input-wrapper.expanded .prompt-input-row {
       align-items: stretch;
       flex-wrap: wrap;
       padding: 6px;
     }
 
-    .prompt-input-wrapper.expanded .attach-btn {
-      width: 40px;
-      height: 40px;
-    }
-
     .prompt-input-wrapper.expanded .prompt-input-row :global(.hashtag-input-wrapper) {
       flex: 1 1 calc(100% - 48px);
     }
@@ -1435,11 +1307,5 @@
       overflow: hidden;
       text-overflow: ellipsis;
     }
-
-    .prompt-input-wrapper.expanded .send-button {
-      width: 40px;
-      height: 40px;
-      border-radius: 8px;
-    }
   }
 </style>
diff --git a/apps/staged/src/lib/features/projects/ProjectsList.svelte b/apps/staged/src/lib/features/projects/ProjectsList.svelte
index b6b86f969..edb201458 100644
--- a/apps/staged/src/lib/features/projects/ProjectsList.svelte
+++ b/apps/staged/src/lib/features/projects/ProjectsList.svelte
@@ -7,14 +7,14 @@
   import { onMount, tick } from 'svelte';
   import { fade } from 'svelte/transition';
   import { listenToEvent } from '../../transport';
-  import {
-    Cloud,
-    GitPullRequest,
-    GitPullRequestClosed,
-    GitPullRequestDraft,
-    Plus,
-    Sprout,
-  } from 'lucide-svelte';
+  import Cloud from '@lucide/svelte/icons/cloud';
+  import GitPullRequest from '@lucide/svelte/icons/git-pull-request';
+  import GitPullRequestClosed from '@lucide/svelte/icons/git-pull-request-closed';
+  import GitPullRequestDraft from '@lucide/svelte/icons/git-pull-request-draft';
+  import Mail from '@lucide/svelte/icons/mail';
+  import Plus from '@lucide/svelte/icons/plus';
+  import Sprout from '@lucide/svelte/icons/sprout';
+  import Trash2 from '@lucide/svelte/icons/trash-2';
   import type {
     Project,
     ProjectRepo,
@@ -37,14 +37,15 @@
   import { selectProject, showAllRepos } from '../layout/navigation.svelte';
   import NewProjectModal from './NewProjectModal.svelte';
   import ProjectsSidebar from './ProjectsSidebar.svelte';
-  import ProjectContextMenu from './ProjectContextMenu.svelte';
   import { getProjectStatus } from './projectStatus';
+  import * as ContextMenu from '$lib/components/ui/context-menu';
   import SplashScreen from './SplashScreen.svelte';
   import Spinner from '../../shared/Spinner.svelte';
   import SineWave from '../../shared/SineWave.svelte';
   import RepoLabel from '../../shared/RepoLabel.svelte';
-  import ConfirmDialog from '../../shared/ConfirmDialog.svelte';
-  import { alerts } from '../../shared/alerts.svelte';
+  import { toast } from 'svelte-sonner';
+  import * as AlertDialog from '$lib/components/ui/alert-dialog';
+  import { Button } from '$lib/components/ui/button';
 
   import { setProjects } from './projectsSidebarState.svelte';
   import {
@@ -69,7 +70,6 @@
   let isCommandKeyHeld = $state(false);
   let deletingProjectNames = $state<Map<string, string>>(new Map());
   let projectToDelete = $state<Project | null>(null);
-  let projectMenu = $state<{ project: Project; x: number; y: number } | null>(null);
   let reposByProject = $state<Map<string, ProjectRepo[]>>(new Map());
   let reposHydrating = $state(false);
   let mainPanelEl = $state<HTMLDivElement | null>(null);
@@ -404,11 +404,7 @@
     } catch (e) {
       console.error('[ProjectsList] Failed to clone repo:', e);
       const message = e instanceof Error ? e.message : String(e);
-      alerts.show({
-        tone: 'error',
-        title: 'Failed to clone repo',
-        message,
-      });
+      toast.error('Failed to clone repo', { description: message });
     }
   }
 
@@ -456,7 +452,6 @@
   }
 
   function openProject(projectId: string) {
-    closeProjectMenu();
     if (isProjectDeleting(projectId)) return;
     if (mainPanelEl) {
       setProjectsListScrollTop(mainPanelEl.scrollTop);
@@ -464,17 +459,6 @@
     selectProject(projectId);
   }
 
-  function closeProjectMenu() {
-    projectMenu = null;
-  }
-
-  function openProjectMenu(event: MouseEvent, project: Project, deleting: boolean) {
-    if (deleting) return;
-    event.preventDefault();
-    event.stopPropagation();
-    projectMenu = { project, x: event.clientX, y: event.clientY };
-  }
-
   function handleMarkProjectUnread(project: Project) {
     if (isProjectDeleting(project.id)) return;
     projectStateStore.markAsUnread(project.id);
@@ -519,11 +503,7 @@
     } catch (e) {
       console.error('Failed to delete project:', e);
       const message = e instanceof Error ? e.message : String(e);
-      alerts.show({
-        tone: 'error',
-        title: 'Unable to delete project',
-        message,
-      });
+      toast.error('Unable to delete project', { description: message });
     } finally {
       const next = new Map(deletingProjectNames);
       next.delete(id);
@@ -650,7 +630,12 @@
           <div class="repos-section">
             <div class="repos-header">
               <h2 class="repos-title">Repos</h2>
-              <button class="view-all-btn" onclick={showAllRepos}> View all </button>
+              <Button
+                variant="ghost"
+                size="sm"
+                class="h-7 text-muted-foreground"
+                onclick={showAllRepos}>View all</Button
+              >
             </div>
             <div class="repos-scroll-row">
               {#each homeRepos as repo (repo.githubRepo + ':' + repo.subpath)}
@@ -666,10 +651,15 @@
 
         <div class="title-row">
           <h1>Projects</h1>
-          <button class="new-project-btn" onclick={() => (showNewProjectModal = true)}>
+          <Button
+            variant="outline"
+            size="sm"
+            class="gap-1.5 border-transparent bg-[var(--bg-elevated)] font-semibold shadow-none hover:bg-[var(--bg-hover)]"
+            onclick={() => (showNewProjectModal = true)}
+          >
             <Plus size={14} />
             New project
-          </button>
+          </Button>
         </div>
         {#if projects.length > 0}
           <div class="filter-bar">
@@ -723,122 +713,145 @@
             {@const workspaceStatus =
               project.location === 'remote' ? getProjectWorkspaceStatus(project.id) : null}
             <div class="project-card-wrapper" use:trackProjectCard={project.id}>
-              <button
-                class="project-card"
-                class:deleting={status.kind === 'deleting'}
-                onclick={() => openProject(project.id)}
-                oncontextmenu={(event: MouseEvent) =>
-                  openProjectMenu(event, project, status.kind === 'deleting')}
-                disabled={status.kind === 'deleting'}
-                title={status.kind === 'deleting' ? 'Project deletion in progress' : undefined}
-              >
-                {#if viewport.showShortcutHints && isCommandKeyHeld && index < 9}
-                  <div class="keyboard-shortcut-overlay">
-                    <span class="command-icon">⌘</span>
-                    <span class="number">{index + 1}</span>
-                  </div>
-                {/if}
-                {#if status.runActionPhase === 'running' && status.kind === 'running'}
-                  <div
-                    class="status-indicator wave-spinner"
-                    in:fade={{ duration: 300, delay: 150 }}
-                    out:fade={{ duration: 150 }}
-                  >
-                    <SineWave size={14} />
-                    <Spinner size={14} />
-                  </div>
-                {:else if status.runActionPhase === 'running'}
-                  <div
-                    class="status-indicator wave"
-                    in:fade={{ duration: 300, delay: 150 }}
-                    out:fade={{ duration: 150 }}
+              <ContextMenu.Root>
+                <ContextMenu.Trigger class="contents" disabled={status.kind === 'deleting'}>
+                  <button
+                    class="project-card"
+                    class:deleting={status.kind === 'deleting'}
+                    onclick={() => openProject(project.id)}
+                    disabled={status.kind === 'deleting'}
+                    title={status.kind === 'deleting' ? 'Project deletion in progress' : undefined}
                   >
-                    <SineWave size={14} />
-                  </div>
-                {:else if status.kind === 'runAction' || status.kind === 'running'}
-                  <div
-                    class="status-indicator spinner"
-                    in:fade={{ duration: 300, delay: 150 }}
-                    out:fade={{ duration: 150 }}
-                  >
-                    <Spinner size={14} />
-                  </div>
-                {:else if status.kind === 'unread'}
-                  <div
-                    class="status-indicator unread-dot"
-                    in:fade={{ duration: 300, delay: 150 }}
-                    out:fade={{ duration: 150 }}
-                  ></div>
-                {/if}
-                <div class="card-header">
-                  {#if project.location === 'remote'}
-                    <Cloud size={16} class={cloudStatusClass(workspaceStatus)} />
-                  {:else if prStatus === 'merged'}
-                    <GitPullRequest size={16} class="pr-status-merged" />
-                  {:else if prStatus === 'checks_failing'}
-                    <GitPullRequest size={16} class="pr-status-checks-failing" />
-                  {:else if prStatus === 'open'}
-                    <GitPullRequest size={16} />
-                  {:else if prStatus === 'closed'}
-                    <GitPullRequestClosed size={16} />
-                  {:else if prStatus === 'conflict'}
-                    <GitPullRequestClosed size={16} class="pr-status-conflict" />
-                  {:else if projectHasCodeChanges(projectBranches.get(project.id) || [])}
-                    <GitPullRequestDraft size={16} class="pr-status-draft" />
-                  {:else}
-                    <Sprout size={16} class="pr-status-clean" />
-                  {/if}
-                  <span>{projectDisplayName(project)}</span>
-                </div>
-                {#if status.kind === 'deleting'}
-                  <div class="deleting-pill" role="status" aria-live="polite">Deleting…</div>
-                {/if}
-                <div class="repo">
-                  {#if repos.length > 0}
-                    {#each [...repos].sort((a, b) => {
-                      const aKey = a.subpath ? `${a.githubRepo}/${a.subpath}` : a.githubRepo;
-                      const bKey = b.subpath ? `${b.githubRepo}/${b.subpath}` : b.githubRepo;
-                      return aKey.localeCompare(bKey);
-                    }) as r}
-                      {@const badge = repoBadgeStore.lookup(r.githubRepo, r.subpath)}
-                      {#if badge}
-                        <span
-                          class="repo-badge-label"
-                          style="background: {badgeBg(badge.hue, darkMode.value)}; color: {badgeFg(
-                            badge.hue,
-                            darkMode.value
-                          )};"
-                        >
-                          <RepoLabel githubRepo={r.headRepo ?? r.githubRepo} subpath={r.subpath} />
-                        </span>
+                    {#if viewport.showShortcutHints && isCommandKeyHeld && index < 9}
+                      <div class="keyboard-shortcut-overlay">
+                        <span class="command-icon">⌘</span>
+                        <span class="number">{index + 1}</span>
+                      </div>
+                    {/if}
+                    {#if status.runActionPhase === 'running' && status.kind === 'running'}
+                      <div
+                        class="status-indicator wave-spinner"
+                        in:fade={{ duration: 300, delay: 150 }}
+                        out:fade={{ duration: 150 }}
+                      >
+                        <SineWave size={14} />
+                        <Spinner size={14} />
+                      </div>
+                    {:else if status.runActionPhase === 'running'}
+                      <div
+                        class="status-indicator wave"
+                        in:fade={{ duration: 300, delay: 150 }}
+                        out:fade={{ duration: 150 }}
+                      >
+                        <SineWave size={14} />
+                      </div>
+                    {:else if status.kind === 'runAction' || status.kind === 'running'}
+                      <div
+                        class="status-indicator spinner"
+                        in:fade={{ duration: 300, delay: 150 }}
+                        out:fade={{ duration: 150 }}
+                      >
+                        <Spinner size={14} />
+                      </div>
+                    {:else if status.kind === 'unread'}
+                      <div
+                        class="status-indicator unread-dot"
+                        in:fade={{ duration: 300, delay: 150 }}
+                        out:fade={{ duration: 150 }}
+                      ></div>
+                    {/if}
+                    <div class="card-header">
+                      {#if project.location === 'remote'}
+                        <Cloud size={16} class={cloudStatusClass(workspaceStatus)} />
+                      {:else if prStatus === 'merged'}
+                        <GitPullRequest size={16} class="pr-status-merged" />
+                      {:else if prStatus === 'checks_failing'}
+                        <GitPullRequest size={16} class="pr-status-checks-failing" />
+                      {:else if prStatus === 'open'}
+                        <GitPullRequest size={16} />
+                      {:else if prStatus === 'closed'}
+                        <GitPullRequestClosed size={16} />
+                      {:else if prStatus === 'conflict'}
+                        <GitPullRequestClosed size={16} class="pr-status-conflict" />
+                      {:else if projectHasCodeChanges(projectBranches.get(project.id) || [])}
+                        <GitPullRequestDraft size={16} class="pr-status-draft" />
                       {:else}
-                        <span class="repo-line">
-                          <RepoLabel githubRepo={r.headRepo ?? r.githubRepo} subpath={r.subpath} />
-                        </span>
+                        <Sprout size={16} class="pr-status-clean" />
                       {/if}
-                    {/each}
-                  {:else if project.githubRepo}
-                    {@const badge = repoBadgeStore.lookup(project.githubRepo, project.subpath)}
-                    {#if badge}
-                      <span
-                        class="repo-badge-label"
-                        style="background: {badgeBg(badge.hue, darkMode.value)}; color: {badgeFg(
-                          badge.hue,
-                          darkMode.value
-                        )};"
-                      >
-                        <RepoLabel githubRepo={project.githubRepo} subpath={project.subpath} />
-                      </span>
-                    {:else}
-                      <span class="repo-line">
-                        <RepoLabel githubRepo={project.githubRepo} subpath={project.subpath} />
-                      </span>
+                      <span>{projectDisplayName(project)}</span>
+                    </div>
+                    {#if status.kind === 'deleting'}
+                      <div class="deleting-pill" role="status" aria-live="polite">Deleting…</div>
                     {/if}
-                  {:else}
-                    No repo attached
-                  {/if}
-                </div>
-              </button>
+                    <div class="repo">
+                      {#if repos.length > 0}
+                        {#each [...repos].sort((a, b) => {
+                          const aKey = a.subpath ? `${a.githubRepo}/${a.subpath}` : a.githubRepo;
+                          const bKey = b.subpath ? `${b.githubRepo}/${b.subpath}` : b.githubRepo;
+                          return aKey.localeCompare(bKey);
+                        }) as r}
+                          {@const badge = repoBadgeStore.lookup(r.githubRepo, r.subpath)}
+                          {#if badge}
+                            <span
+                              class="repo-badge-label"
+                              style="background: {badgeBg(
+                                badge.hue,
+                                darkMode.value
+                              )}; color: {badgeFg(badge.hue, darkMode.value)};"
+                            >
+                              <RepoLabel
+                                githubRepo={r.headRepo ?? r.githubRepo}
+                                subpath={r.subpath}
+                              />
+                            </span>
+                          {:else}
+                            <span class="repo-line">
+                              <RepoLabel
+                                githubRepo={r.headRepo ?? r.githubRepo}
+                                subpath={r.subpath}
+                              />
+                            </span>
+                          {/if}
+                        {/each}
+                      {:else if project.githubRepo}
+                        {@const badge = repoBadgeStore.lookup(project.githubRepo, project.subpath)}
+                        {#if badge}
+                          <span
+                            class="repo-badge-label"
+                            style="background: {badgeBg(
+                              badge.hue,
+                              darkMode.value
+                            )}; color: {badgeFg(badge.hue, darkMode.value)};"
+                          >
+                            <RepoLabel githubRepo={project.githubRepo} subpath={project.subpath} />
+                          </span>
+                        {:else}
+                          <span class="repo-line">
+                            <RepoLabel githubRepo={project.githubRepo} subpath={project.subpath} />
+                          </span>
+                        {/if}
+                      {:else}
+                        No repo attached
+                      {/if}
+                    </div>
+                  </button>
+                </ContextMenu.Trigger>
+                <ContextMenu.Content class="min-w-[172px]">
+                  <ContextMenu.Item
+                    disabled={status.kind === 'deleting'}
+                    onSelect={() => handleMarkProjectUnread(project)}
+                  >
+                    <Mail size={14} /> Mark as Unread
+                  </ContextMenu.Item>
+                  <ContextMenu.Item
+                    variant="destructive"
+                    disabled={status.kind === 'deleting'}
+                    onSelect={() => handleRemoveProject(project)}
+                  >
+                    <Trash2 size={14} /> Remove Project
+                  </ContextMenu.Item>
+                </ContextMenu.Content>
+              </ContextMenu.Root>
               <div class="card-location">
                 {projectSubtitle(repoCount, sessionTypes, status.runActionPhase)}
               </div>
@@ -850,31 +863,33 @@
   </div>
 </div>
 
-{#if showNewProjectModal && projects.length > 0}
-  <NewProjectModal onCreated={handleProjectCreated} onClose={() => (showNewProjectModal = false)} />
-{/if}
-
-{#if projectMenu}
-  {@const menuProject = projectMenu.project}
-  <ProjectContextMenu
-    x={projectMenu.x}
-    y={projectMenu.y}
-    onMarkAsUnread={() => handleMarkProjectUnread(menuProject)}
-    onRemoveProject={() => handleRemoveProject(menuProject)}
-    onClose={closeProjectMenu}
-  />
-{/if}
-
-{#if projectToDelete}
-  <ConfirmDialog
-    title="Remove Project"
-    message={`Remove "${projectDisplayName(projectToDelete)}" from Staged? There are unmerged changes in this project's branches. Deleting this project will lose any changes not pushed to GitHub.`}
-    confirmLabel="Remove"
-    danger={true}
-    onConfirm={confirmDeleteProject}
-    onCancel={() => (projectToDelete = null)}
-  />
-{/if}
+<NewProjectModal
+  open={showNewProjectModal && projects.length > 0}
+  onCreated={handleProjectCreated}
+  onClose={() => (showNewProjectModal = false)}
+/>
+
+<AlertDialog.Root
+  open={projectToDelete !== null}
+  onOpenChange={(v) => !v && (projectToDelete = null)}
+>
+  <AlertDialog.Content>
+    {#if projectToDelete}
+      <AlertDialog.Header>
+        <AlertDialog.Title>Remove Project</AlertDialog.Title>
+        <AlertDialog.Description>
+          {`Remove "${projectDisplayName(projectToDelete)}" from Staged? There are unmerged changes in this project's branches. Deleting this project will lose any changes not pushed to GitHub.`}
+        </AlertDialog.Description>
+      </AlertDialog.Header>
+      <AlertDialog.Footer>
+        <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+        <AlertDialog.Action variant="destructive" onclick={confirmDeleteProject}>
+          Remove
+        </AlertDialog.Action>
+      </AlertDialog.Footer>
+    {/if}
+  </AlertDialog.Content>
+</AlertDialog.Root>
 
 <style>
   .projects-list-page {
@@ -934,26 +949,6 @@
     color: var(--text-primary);
   }
 
-  .new-project-btn {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 14px;
-    border: none;
-    border-radius: 8px;
-    background-color: var(--bg-elevated);
-    color: var(--text-primary);
-    font-size: var(--size-sm);
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-
-  .new-project-btn:hover {
-    color: var(--text-primary);
-    background-color: var(--bg-hover);
-  }
-
   .filter-bar {
     display: flex;
     flex-wrap: wrap;
@@ -1071,23 +1066,6 @@
     color: var(--text-primary);
   }
 
-  .view-all-btn {
-    padding: 4px 10px;
-    border: none;
-    border-radius: 6px;
-    background: none;
-    color: var(--text-muted);
-    font-size: var(--size-sm);
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-
-  .view-all-btn:hover {
-    color: var(--text-primary);
-    background: var(--bg-hover);
-  }
-
   .repos-scroll-row {
     display: flex;
     gap: 10px;
@@ -1343,7 +1321,7 @@
       gap: 12px;
     }
 
-    .new-project-btn {
+    .title-row :global(button) {
       min-height: 40px;
       padding: 8px 12px;
       flex-shrink: 0;
diff --git a/apps/staged/src/lib/features/projects/ProjectsSidebar.svelte b/apps/staged/src/lib/features/projects/ProjectsSidebar.svelte
index 689c20b9e..efc87ff0b 100644
--- a/apps/staged/src/lib/features/projects/ProjectsSidebar.svelte
+++ b/apps/staged/src/lib/features/projects/ProjectsSidebar.svelte
@@ -2,17 +2,17 @@
   import { onDestroy, onMount } from 'svelte';
   import { quintIn } from 'svelte/easing';
   import { fade } from 'svelte/transition';
-  import {
-    House,
-    Plus,
-    Cloud,
-    GitPullRequest,
-    GitPullRequestClosed,
-    GitPullRequestDraft,
-    GitBranch,
-    Sprout,
-    FolderGit2,
-  } from 'lucide-svelte';
+  import House from '@lucide/svelte/icons/house';
+  import Plus from '@lucide/svelte/icons/plus';
+  import Cloud from '@lucide/svelte/icons/cloud';
+  import GitPullRequest from '@lucide/svelte/icons/git-pull-request';
+  import GitPullRequestClosed from '@lucide/svelte/icons/git-pull-request-closed';
+  import GitPullRequestDraft from '@lucide/svelte/icons/git-pull-request-draft';
+  import GitBranch from '@lucide/svelte/icons/git-branch';
+  import Sprout from '@lucide/svelte/icons/sprout';
+  import FolderGit2 from '@lucide/svelte/icons/folder-git-2';
+  import Mail from '@lucide/svelte/icons/mail';
+  import Trash2 from '@lucide/svelte/icons/trash-2';
   import type { Project, ProjectRepo, Branch, WorkspaceStatus, RepoHomeItem } from '../../types';
   import { goHome, navigation, selectProject, showAllRepos } from '../layout/navigation.svelte';
   import {
@@ -38,10 +38,12 @@
     SIDEBAR_MIN_WIDTH,
   } from './projectsSidebarState.svelte';
   import { viewport, watchViewport } from '../../shared/viewport.svelte';
-  import ProjectContextMenu from './ProjectContextMenu.svelte';
   import SidebarPinnedRepo from './SidebarPinnedRepo.svelte';
   import * as commands from '../../api/commands';
+  import * as ContextMenu from '$lib/components/ui/context-menu';
   import { reposUiEnabled } from '../../featureFlags';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
 
   const devBranch = import.meta.env.VITE_DEV_BRANCH as string | undefined;
 
@@ -71,7 +73,6 @@
     onRemoveProject,
   }: Props = $props();
 
-  let projectMenu = $state<{ project: Project; x: number; y: number } | null>(null);
   let lastNavigationKey = `${navigation.activeView}:${navigation.selectedProjectId ?? ''}`;
 
   // ── Pinned repos ──
@@ -138,7 +139,6 @@
   }
 
   function openProject(projectId: string) {
-    closeProjectMenu();
     const status = getProjectStatus(
       projectId,
       deletingProjectNames,
@@ -149,26 +149,13 @@
   }
 
   function openAllProjects() {
-    closeProjectMenu();
     goHome();
   }
 
   function openNewProject() {
-    closeProjectMenu();
     window.dispatchEvent(new CustomEvent('staged:new-project'));
   }
 
-  function closeProjectMenu() {
-    projectMenu = null;
-  }
-
-  function openProjectMenu(event: MouseEvent, project: Project, deleting: boolean) {
-    if (deleting || !onMarkProjectUnread || !onRemoveProject) return;
-    event.preventDefault();
-    event.stopPropagation();
-    projectMenu = { project, x: event.clientX, y: event.clientY };
-  }
-
   function scrollIfActive(node: HTMLElement, active: boolean) {
     if (active) node.scrollIntoView({ block: 'nearest' });
     return {
@@ -312,7 +299,6 @@
   $effect(() => {
     const nextNavigationKey = `${navigation.activeView}:${navigation.selectedProjectId ?? ''}`;
     if (nextNavigationKey !== lastNavigationKey) {
-      closeProjectMenu();
       lastNavigationKey = nextNavigationKey;
     }
   });
@@ -340,17 +326,24 @@
       {:else}
         <div class="projects-list">
           {#if reposUiEnabled && pinnedRepos.length > 0}
-            <button
-              class="project-row all-repos-row"
-              class:active={navigation.showReposList}
-              onclick={showAllRepos}
-              title="View all repos"
-            >
-              <div class="row-main">
-                <FolderGit2 size={14} />
-                <span class="project-name">All Repos</span>
-              </div>
-            </button>
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                {#snippet child({ props })}
+                  <button
+                    {...props}
+                    class="project-row all-repos-row"
+                    class:active={navigation.showReposList}
+                    onclick={showAllRepos}
+                  >
+                    <div class="row-main">
+                      <FolderGit2 size={14} />
+                      <span class="project-name">All Repos</span>
+                    </div>
+                  </button>
+                {/snippet}
+              </Tooltip.Trigger>
+              <Tooltip.Content>View all repos</Tooltip.Content>
+            </Tooltip.Root>
 
             <div class="pinned-repos-list" role="list" aria-label="Pinned repos">
               {#each pinnedRepos as repo, index (repo.githubRepo + '\t' + repo.subpath)}
@@ -369,17 +362,25 @@
           {/if}
 
           {#if showAllProjectsRow}
-            <button
-              class="project-row all-projects-row"
-              class:active={navigation.selectedProjectId === null && !navigation.showReposList}
-              onclick={openAllProjects}
-              title="Show all projects"
-            >
-              <div class="row-main">
-                <House size={14} />
-                <span class="project-name">All Projects</span>
-              </div>
-            </button>
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                {#snippet child({ props })}
+                  <button
+                    {...props}
+                    class="project-row all-projects-row"
+                    class:active={navigation.selectedProjectId === null &&
+                      !navigation.showReposList}
+                    onclick={openAllProjects}
+                  >
+                    <div class="row-main">
+                      <House size={14} />
+                      <span class="project-name">All Projects</span>
+                    </div>
+                  </button>
+                {/snippet}
+              </Tooltip.Trigger>
+              <Tooltip.Content>Show all projects</Tooltip.Content>
+            </Tooltip.Root>
           {/if}
 
           {#if projects.length === 0}
@@ -402,108 +403,148 @@
                 .filter((b): b is NonNullable<typeof b> => Boolean(b))
                 .sort((a, b) => a.shortName.localeCompare(b.shortName))}
               {@const activity = projectActivity(sessionTypes, status.runActionPhase)}
-              <button
-                class="project-row"
-                use:scrollIfActive={navigation.selectedProjectId === project.id}
-                class:active={navigation.selectedProjectId === project.id}
-                class:deleting={status.kind === 'deleting'}
-                onclick={() => openProject(project.id)}
-                oncontextmenu={(event: MouseEvent) =>
-                  openProjectMenu(event, project, status.kind === 'deleting')}
-                disabled={status.kind === 'deleting'}
-                title={status.kind === 'deleting' ? 'Project deletion in progress' : undefined}
-              >
-                <div class="row-main">
-                  {#if project.location === 'remote'}
-                    <Cloud size={14} class={cloudStatusClass(workspaceStatus)} />
-                  {:else if prStatus === 'merged'}
-                    <GitPullRequest size={14} class="pr-status-merged" />
-                  {:else if prStatus === 'checks_failing'}
-                    <GitPullRequest size={14} class="pr-status-checks-failing" />
-                  {:else if prStatus === 'open'}
-                    <GitPullRequest size={14} />
-                  {:else if prStatus === 'closed'}
-                    <GitPullRequestClosed size={14} />
-                  {:else if prStatus === 'conflict'}
-                    <GitPullRequestClosed size={14} class="pr-status-conflict" />
-                  {:else if projectHasCodeChanges(projectBranches.get(project.id) || [])}
-                    <GitPullRequestDraft size={14} class="pr-status-draft" />
-                  {:else}
-                    <Sprout size={14} class="pr-status-clean" />
-                  {/if}
-                  <div class="row-text">
-                    <span class="project-name">{projectDisplayName(project)}</span>
-                    <div class="row-meta">
-                      {#if badges.length > 0}
-                        <span class="badge-row">
-                          {#each badges as badge}
-                            <RepoBadge shortName={badge.shortName} hue={badge.hue} small />
-                          {/each}
-                        </span>
-                        {#if activity}
-                          <span class="activity-separator">&middot;</span>
-                          <span class="activity-text">{activity}</span>
-                        {/if}
+              <ContextMenu.Root>
+                <ContextMenu.Trigger
+                  class="contents"
+                  disabled={status.kind === 'deleting' || !onMarkProjectUnread || !onRemoveProject}
+                >
+                  <button
+                    class="project-row"
+                    use:scrollIfActive={navigation.selectedProjectId === project.id}
+                    class:active={navigation.selectedProjectId === project.id}
+                    class:deleting={status.kind === 'deleting'}
+                    onclick={() => openProject(project.id)}
+                    disabled={status.kind === 'deleting'}
+                    title={status.kind === 'deleting' ? 'Project deletion in progress' : undefined}
+                  >
+                    <div class="row-main">
+                      {#if project.location === 'remote'}
+                        <Cloud size={14} class={cloudStatusClass(workspaceStatus)} />
+                      {:else if prStatus === 'merged'}
+                        <GitPullRequest size={14} class="pr-status-merged" />
+                      {:else if prStatus === 'checks_failing'}
+                        <GitPullRequest size={14} class="pr-status-checks-failing" />
+                      {:else if prStatus === 'open'}
+                        <GitPullRequest size={14} />
+                      {:else if prStatus === 'closed'}
+                        <GitPullRequestClosed size={14} />
+                      {:else if prStatus === 'conflict'}
+                        <GitPullRequestClosed size={14} class="pr-status-conflict" />
+                      {:else if projectHasCodeChanges(projectBranches.get(project.id) || [])}
+                        <GitPullRequestDraft size={14} class="pr-status-draft" />
                       {:else}
-                        <span class="repo-count"
-                          >{projectSubtitle(repoCount, sessionTypes, status.runActionPhase)}</span
+                        <Sprout size={14} class="pr-status-clean" />
+                      {/if}
+                      <div class="row-text">
+                        <span class="project-name">{projectDisplayName(project)}</span>
+                        <div class="row-meta">
+                          {#if badges.length > 0}
+                            <span class="badge-row">
+                              {#each badges as badge}
+                                <RepoBadge shortName={badge.shortName} hue={badge.hue} small />
+                              {/each}
+                            </span>
+                            {#if activity}
+                              <span class="activity-separator">&middot;</span>
+                              <span class="activity-text">{activity}</span>
+                            {/if}
+                          {:else}
+                            <span class="repo-count"
+                              >{projectSubtitle(
+                                repoCount,
+                                sessionTypes,
+                                status.runActionPhase
+                              )}</span
+                            >
+                          {/if}
+                        </div>
+                      </div>
+                    </div>
+                    <div class="row-status">
+                      {#if status.runActionPhase === 'running' && status.kind === 'running'}
+                        <span
+                          class="status-running"
+                          in:fade={{ duration: 300, delay: 150 }}
+                          out:fade={{ duration: 150 }}
+                        >
+                          <SineWave size={12} />
+                          <Spinner size={12} />
+                        </span>
+                      {:else if status.runActionPhase === 'running'}
+                        <span
+                          class="status-running"
+                          in:fade={{ duration: 300, delay: 150 }}
+                          out:fade={{ duration: 150 }}
+                        >
+                          <SineWave size={12} />
+                        </span>
+                      {:else if status.kind === 'runAction' || status.kind === 'running'}
+                        <span
+                          class="status-running"
+                          in:fade={{ duration: 300, delay: 150 }}
+                          out:fade={{ duration: 150 }}
+                        >
+                          <Spinner size={12} />
+                        </span>
+                      {:else if status.kind === 'unread'}
+                        <span
+                          class="status-unread-dot"
+                          aria-label="Unread updates"
+                          in:fade={{ duration: 300, delay: 150 }}
+                          out:fade={{ duration: 150 }}
+                        ></span>
+                      {:else if status.kind === 'deleting'}
+                        <span
+                          class="status-deleting"
+                          in:fade={{ duration: 300, delay: 150 }}
+                          out:fade={{ duration: 150 }}>Deleting…</span
                         >
                       {/if}
                     </div>
-                  </div>
-                </div>
-                <div class="row-status">
-                  {#if status.runActionPhase === 'running' && status.kind === 'running'}
-                    <span
-                      class="status-running"
-                      in:fade={{ duration: 300, delay: 150 }}
-                      out:fade={{ duration: 150 }}
+                  </button>
+                </ContextMenu.Trigger>
+                {#if onMarkProjectUnread && onRemoveProject}
+                  <ContextMenu.Content class="min-w-[172px]">
+                    <ContextMenu.Item
+                      disabled={status.kind === 'deleting'}
+                      onSelect={() => onMarkProjectUnread!(project)}
                     >
-                      <SineWave size={12} />
-                      <Spinner size={12} />
-                    </span>
-                  {:else if status.runActionPhase === 'running'}
-                    <span
-                      class="status-running"
-                      in:fade={{ duration: 300, delay: 150 }}
-                      out:fade={{ duration: 150 }}
+                      <Mail size={14} /> Mark as Unread
+                    </ContextMenu.Item>
+                    <ContextMenu.Item
+                      variant="destructive"
+                      disabled={status.kind === 'deleting'}
+                      onSelect={() => onRemoveProject!(project)}
                     >
-                      <SineWave size={12} />
-                    </span>
-                  {:else if status.kind === 'runAction' || status.kind === 'running'}
-                    <span
-                      class="status-running"
-                      in:fade={{ duration: 300, delay: 150 }}
-                      out:fade={{ duration: 150 }}
-                    >
-                      <Spinner size={12} />
-                    </span>
-                  {:else if status.kind === 'unread'}
-                    <span
-                      class="status-unread-dot"
-                      aria-label="Unread updates"
-                      in:fade={{ duration: 300, delay: 150 }}
-                      out:fade={{ duration: 150 }}
-                    ></span>
-                  {:else if status.kind === 'deleting'}
-                    <span
-                      class="status-deleting"
-                      in:fade={{ duration: 300, delay: 150 }}
-                      out:fade={{ duration: 150 }}>Deleting…</span
-                    >
-                  {/if}
-                </div>
-              </button>
+                      <Trash2 size={14} /> Remove Project
+                    </ContextMenu.Item>
+                  </ContextMenu.Content>
+                {/if}
+              </ContextMenu.Root>
             {/each}
           {/if}
-          <button
-            class="new-project-button list-new-project-button"
-            onclick={openNewProject}
-            title={viewport.showShortcutHints ? 'New project (⌘N)' : 'New project'}
-          >
-            <span class="plus-icon"><Plus size={12} /></span>
-            New project
-          </button>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="ghost"
+                  class="group h-auto w-full justify-start gap-2.5 px-2.5 py-2 font-medium text-foreground hover:bg-[var(--ui-selection)] hover:text-foreground"
+                  onclick={openNewProject}
+                >
+                  <span
+                    class="flex size-4 shrink-0 items-center justify-center rounded-full bg-[var(--border-muted)] transition-colors group-hover:bg-[var(--border-emphasis)]"
+                  >
+                    <Plus size={12} />
+                  </span>
+                  New project
+                </Button>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>
+              {viewport.showShortcutHints ? 'New project (⌘N)' : 'New project'}
+            </Tooltip.Content>
+          </Tooltip.Root>
         </div>
       {/if}
     </div>
@@ -519,17 +560,6 @@
   </aside>
 {/if}
 
-{#if projectMenu && onMarkProjectUnread && onRemoveProject}
-  {@const menuProject = projectMenu.project}
-  <ProjectContextMenu
-    x={projectMenu.x}
-    y={projectMenu.y}
-    onMarkAsUnread={() => onMarkProjectUnread(menuProject)}
-    onRemoveProject={() => onRemoveProject(menuProject)}
-    onClose={closeProjectMenu}
-  />
-{/if}
-
 <style>
   .projects-sidebar {
     position: relative;
@@ -586,44 +616,6 @@
     min-width: 0;
   }
 
-  .plus-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    border: none;
-    border-radius: 50%;
-    background-color: var(--border-muted);
-    flex-shrink: 0;
-  }
-
-  .new-project-button {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    width: 100%;
-    border: none;
-    border-radius: 8px;
-    background-color: transparent;
-    color: var(--text-primary);
-    padding: 8px 10px;
-    font-size: var(--size-sm);
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-
-  .new-project-button:hover {
-    color: var(--text-primary);
-    background-color: var(--ui-selection);
-  }
-
-  .new-project-button:hover .plus-icon {
-    background-color: var(--border-emphasis);
-  }
-
-  .new-project-button:focus-visible,
   .project-row:focus-visible {
     outline: 2px solid var(--ui-accent);
     outline-offset: -1px;
diff --git a/apps/staged/src/lib/features/projects/RepoCard.svelte b/apps/staged/src/lib/features/projects/RepoCard.svelte
index 056b9a403..a03ee0d9e 100644
--- a/apps/staged/src/lib/features/projects/RepoCard.svelte
+++ b/apps/staged/src/lib/features/projects/RepoCard.svelte
@@ -6,7 +6,9 @@
   local clone) or nothing.
 -->
 <script lang="ts">
-  import { Download, Pin, PinOff } from 'lucide-svelte';
+  import Download from '@lucide/svelte/icons/download';
+  import Pin from '@lucide/svelte/icons/pin';
+  import PinOff from '@lucide/svelte/icons/pin-off';
   import type { RepoHomeItem } from '../../types';
   import { darkMode } from '../../stores/isDark.svelte';
   import {
@@ -18,7 +20,9 @@
   } from '../../shared/badgeColors';
   import Spinner from '../../shared/Spinner.svelte';
   import * as commands from '../../api/commands';
-  import { alerts } from '../../shared/alerts.svelte';
+  import { toast } from 'svelte-sonner';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
 
   interface Props {
     repo: RepoHomeItem;
@@ -68,10 +72,8 @@
       window.dispatchEvent(new CustomEvent('staged:pinned-repos-changed'));
     } catch (err) {
       console.error('[RepoCard] Failed to toggle pin:', err);
-      alerts.show({
-        tone: 'error',
-        title: 'Failed to update pin',
-        message: err instanceof Error ? err.message : String(err),
+      toast.error('Failed to update pin', {
+        description: err instanceof Error ? err.message : String(err),
       });
     } finally {
       togglingPin = false;
@@ -79,48 +81,77 @@
   }
 </script>
 
-<div
-  class="repo-card"
-  style="--accent: {accentColor}; --card-bg: {bgColor}; --card-bg-hover: {bgHoverColor}; --card-border: {borderColor}; --card-border-hover: {borderHoverColor};"
-  title={subtitle}
->
-  <button
-    class="pin-toggle"
-    class:pinned={repo.pinned}
-    title={repo.pinned ? 'Unpin repo' : 'Pin repo'}
-    onclick={handleTogglePin}
-    disabled={togglingPin}
-  >
-    {#if togglingPin}
-      <Spinner size={14} />
-    {:else if repo.pinned}
-      <Pin size={14} />
-    {:else}
-      <PinOff size={14} />
-    {/if}
-  </button>
-
-  <span class="card-title">{repo.shortName}</span>
-
-  <span class="card-subtitle">{subtitle}</span>
-
-  {#if !repo.hasLocalClone}
-    <div class="card-footer">
-      <button
-        class="download-btn"
-        title="Clone repo locally"
-        onclick={handleClone}
-        disabled={cloning}
+<Tooltip.Root>
+  <Tooltip.Trigger>
+    {#snippet child({ props })}
+      <div
+        {...props}
+        class="repo-card"
+        style="--accent: {accentColor}; --card-bg: {bgColor}; --card-bg-hover: {bgHoverColor}; --card-border: {borderColor}; --card-border-hover: {borderHoverColor};"
       >
-        {#if cloning}
-          <Spinner size={14} />
-        {:else}
-          <Download size={14} />
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props: pinProps })}
+              <Button
+                {...pinProps}
+                variant="ghost"
+                size="icon-sm"
+                class={[
+                  'absolute top-1.5 right-1.5 z-[2] size-[26px] hover:bg-[var(--bg-hover)] [&_svg]:!size-3.5',
+                  repo.pinned
+                    ? 'text-[var(--accent)] hover:text-[var(--accent)]'
+                    : 'text-[var(--text-faint)] hover:text-foreground',
+                ]}
+                onclick={handleTogglePin}
+                disabled={togglingPin}
+              >
+                {#if togglingPin}
+                  <Spinner size={14} />
+                {:else if repo.pinned}
+                  <Pin size={14} />
+                {:else}
+                  <PinOff size={14} />
+                {/if}
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content>{repo.pinned ? 'Unpin repo' : 'Pin repo'}</Tooltip.Content>
+        </Tooltip.Root>
+
+        <span class="card-title">{repo.shortName}</span>
+
+        <span class="card-subtitle">{subtitle}</span>
+
+        {#if !repo.hasLocalClone}
+          <div class="card-footer">
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                {#snippet child({ props: cloneProps })}
+                  <Button
+                    {...cloneProps}
+                    variant="outline"
+                    size="icon-sm"
+                    class="size-7 border-[var(--card-border)] bg-transparent text-[var(--accent)] shadow-none hover:bg-[var(--card-bg-hover)] hover:border-[var(--card-border-hover)] hover:text-[var(--accent)] [&_svg]:!size-3.5"
+                    onclick={handleClone}
+                    disabled={cloning}
+                  >
+                    {#if cloning}
+                      <Spinner size={14} />
+                    {:else}
+                      <Download size={14} />
+                    {/if}
+                  </Button>
+                {/snippet}
+              </Tooltip.Trigger>
+              <Tooltip.Content>Clone repo locally</Tooltip.Content>
+            </Tooltip.Root>
+          </div>
         {/if}
-      </button>
-    </div>
-  {/if}
-</div>
+      </div>
+    {/snippet}
+  </Tooltip.Trigger>
+  <Tooltip.Content>{subtitle}</Tooltip.Content>
+</Tooltip.Root>
 
 <style>
   .repo-card {
@@ -141,44 +172,6 @@
     box-sizing: border-box;
   }
 
-  .pin-toggle {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 26px;
-    height: 26px;
-    padding: 0;
-    border: none;
-    border-radius: 6px;
-    background: transparent;
-    color: var(--text-faint);
-    cursor: pointer;
-    transition: all 0.15s ease;
-    z-index: 2;
-  }
-
-  .pin-toggle:hover:not(:disabled) {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .pin-toggle.pinned {
-    color: var(--accent);
-  }
-
-  .pin-toggle.pinned:hover:not(:disabled) {
-    color: var(--accent);
-    background: var(--bg-hover);
-  }
-
-  .pin-toggle:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
   .card-title {
     font-size: var(--size-md);
     font-weight: 700;
@@ -205,28 +198,4 @@
     align-items: center;
     min-height: 20px;
   }
-
-  .download-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border: 1px solid var(--card-border);
-    border-radius: 6px;
-    background: transparent;
-    color: var(--accent);
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-
-  .download-btn:hover:not(:disabled) {
-    background: var(--card-bg-hover);
-    border-color: var(--card-border-hover);
-  }
-
-  .download-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
 </style>
diff --git a/apps/staged/src/lib/features/projects/RepoConfigForm.svelte b/apps/staged/src/lib/features/projects/RepoConfigForm.svelte
index 5210ea52a..5323806d0 100644
--- a/apps/staged/src/lib/features/projects/RepoConfigForm.svelte
+++ b/apps/staged/src/lib/features/projects/RepoConfigForm.svelte
@@ -12,7 +12,10 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import { slide, fade } from 'svelte/transition';
-  import { GitBranch, X, Plus, Command } from 'lucide-svelte';
+  import GitBranch from '@lucide/svelte/icons/git-branch';
+  import X from '@lucide/svelte/icons/x';
+  import Plus from '@lucide/svelte/icons/plus';
+  import Command from '@lucide/svelte/icons/command';
   import type { RecentRepo, PullRequest } from '../../types';
   import * as commands from '../../api/commands';
   import RepoLabel from '../../shared/RepoLabel.svelte';
@@ -26,6 +29,9 @@
   import BranchPicker, { type BranchSelection } from './BranchPicker.svelte';
   import type { RepoSelection } from '../../shared/githubUrl';
   import { viewport } from '../../shared/viewport.svelte';
+  import { Label } from '$lib/components/ui/label';
+  import { Input } from '$lib/components/ui/input';
+  import { Button } from '$lib/components/ui/button';
 
   interface Props {
     // Bindable state
@@ -238,8 +244,9 @@
     <div class="pr-loading-overlay" transition:fade={{ duration: 100 }}>
       <Spinner size={20} />
       <span class="pr-loading-text">Loading PR&hellip;</span>
-      <button
-        class="pr-loading-cancel"
+      <Button
+        variant="outline"
+        size="xs"
         onclick={() => {
           resolvingPr = false;
           pendingPrNumber = null;
@@ -255,7 +262,7 @@
         }}
       >
         Cancel
-      </button>
+      </Button>
     </div>
   {/if}
 
@@ -263,20 +270,22 @@
      them while the loading overlay is visible. -->
   <div class="repo-fields" class:resolving-hidden={resolvingPr}>
     <div class="form-group">
-      <label for="project-repo-select"
-        >Repository
+      <Label for="project-repo-select" class="text-muted-foreground text-xs">
+        Repository
         {#if repoRequired && !selectedRepo}
           <span class="field-badge required">Required</span>
-        {/if}</label
-      >
+        {/if}
+      </Label>
       {#if selectedRepo}
         <div class="repo-info" class:disabled>
           <GitBranch size={14} class="repo-info-icon" />
           <div class="repo-details">
             <span class="repo-name">{displayRepo ?? selectedRepo}</span>
           </div>
-          <button
-            class="clear-button"
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            class="size-7 text-[var(--bg-chrome)] hover:bg-black/10 hover:text-[var(--bg-deepest)] [&_svg]:!size-3.5"
             onclick={() => {
               if (branchPickerTimer) clearTimeout(branchPickerTimer);
               showBranchPicker = false;
@@ -291,7 +300,7 @@
             }}
           >
             <X size={14} />
-          </button>
+          </Button>
         </div>
       {:else}
         <RepoSearchInput onSelect={handleRepoSelected} {disabled} {excludeRepos} {autofocus} />
@@ -340,22 +349,22 @@
 
     {#if selectedRepo}
       <div class="form-group" transition:slide={{ duration: SLIDE_DURATION }}>
-        <label for="project-subpath"
-          >Subpath
+        <Label for="project-subpath" class="text-muted-foreground text-xs">
+          Subpath
           <span class="field-badge {isMonorepo ? 'recommended' : 'optional'}"
             >{isMonorepo ? 'Recommended' : 'Optional'}</span
-          ></label
-        >
+          >
+        </Label>
         <SubpathInput bind:value={subpath} repo={selectedRepo} {disabled} bind:api={subpathApi} />
       </div>
 
       <div class="form-group" transition:slide={{ duration: SLIDE_DURATION }}>
-        <label for="project-branch"
-          >PR or Branch
+        <Label for="project-branch" class="text-muted-foreground text-xs">
+          PR or Branch
           <span class="field-badge {isNewBranch ? 'new-branch' : 'optional'}"
             >{isNewBranch ? 'New branch' : 'Optional'}</span
-          ></label
-        >
+          >
+        </Label>
         {#if showBranchPicker}
           <BranchPicker
             bind:value={branchName}
@@ -380,12 +389,12 @@
             }}
           />
         {:else}
-          <input
-            class="branch-picker-placeholder"
+          <Input
             type="text"
             placeholder="Search PRs or branches…"
             readonly
-            tabindex="-1"
+            tabindex={-1}
+            class="min-h-[42px] rounded-[10px] px-3.5 py-2.5 text-base"
           />
         {/if}
       </div>
@@ -425,22 +434,6 @@
     color: var(--text-muted);
   }
 
-  .pr-loading-cancel {
-    font-size: var(--size-xs);
-    color: var(--text-faint);
-    background: none;
-    border: 1px solid var(--border-subtle);
-    border-radius: 6px;
-    padding: 4px 10px;
-    cursor: pointer;
-    transition: color 0.1s;
-  }
-
-  .pr-loading-cancel:hover {
-    color: var(--text-primary);
-    border-color: var(--border-default);
-  }
-
   .repo-fields {
     display: flex;
     flex-direction: column;
@@ -458,11 +451,6 @@
     gap: 6px;
   }
 
-  label {
-    font-size: var(--size-xs);
-    color: var(--text-muted);
-  }
-
   .field-badge {
     display: inline-block;
     font-size: 9px;
@@ -528,28 +516,6 @@
     white-space: nowrap;
   }
 
-  .clear-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    border: none;
-    border-radius: 6px;
-    background: transparent;
-    color: var(--bg-chrome);
-    cursor: pointer;
-    transition:
-      background-color 0.15s ease,
-      color 0.15s ease;
-  }
-
-  .clear-button:hover {
-    color: var(--bg-deepest);
-    background: rgba(0, 0, 0, 0.1);
-  }
-
   .recent-repos {
     display: flex;
     flex-direction: column;
@@ -614,22 +580,4 @@
     flex-shrink: 0;
     line-height: 1;
   }
-
-  .branch-picker-placeholder {
-    width: 100%;
-    min-height: 42px;
-    border: 1.5px solid var(--border-muted);
-    border-radius: 10px;
-    background: transparent;
-    color: var(--text-primary);
-    padding: 10px 14px;
-    font-size: var(--size-md);
-    font-family: inherit;
-    outline: none;
-    box-sizing: border-box;
-  }
-
-  .branch-picker-placeholder::placeholder {
-    color: var(--text-faint);
-  }
 </style>
diff --git a/apps/staged/src/lib/features/projects/RepoSearchInput.svelte b/apps/staged/src/lib/features/projects/RepoSearchInput.svelte
index ed02c8ecc..d38e4cd60 100644
--- a/apps/staged/src/lib/features/projects/RepoSearchInput.svelte
+++ b/apps/staged/src/lib/features/projects/RepoSearchInput.svelte
@@ -7,9 +7,15 @@
 -->
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
-  import { Search, Lock, Globe, Clock, Plus, Command } from 'lucide-svelte';
+  import Search from '@lucide/svelte/icons/search';
+  import Lock from '@lucide/svelte/icons/lock';
+  import Globe from '@lucide/svelte/icons/globe';
+  import Clock from '@lucide/svelte/icons/clock';
+  import Plus from '@lucide/svelte/icons/plus';
+  import Command from '@lucide/svelte/icons/command';
   import Spinner from '../../shared/Spinner.svelte';
   import RepoLabel from '../../shared/RepoLabel.svelte';
+  import { Input } from '$lib/components/ui/input';
   import * as commands from '../../api/commands';
   import type { GitHubRepo, RecentRepo } from '../../types';
   import { parseGitHubUrl, type RepoSelection } from '../../shared/githubUrl';
@@ -279,8 +285,8 @@
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <div class="search-input" class:disabled onclick={() => inputEl?.focus()}>
     <Search size={14} class="search-icon" />
-    <input
-      bind:this={inputEl}
+    <Input
+      bind:ref={inputEl}
       bind:value={query}
       type="text"
       placeholder="Search or paste a repository..."
@@ -290,6 +296,7 @@
       {disabled}
       oninput={handleInput}
       onfocus={handleFocus}
+      class="border-0 bg-transparent shadow-none px-0 py-0 h-auto min-h-0 focus-visible:ring-0 focus-visible:border-0 md:text-base"
     />
   </div>
 
@@ -418,25 +425,6 @@
     flex-shrink: 0;
   }
 
-  .search-input input {
-    flex: 1;
-    background: transparent;
-    border: none;
-    outline: none;
-    font-size: var(--size-md);
-    color: var(--text-primary);
-    padding: 0;
-    font-family: inherit;
-  }
-
-  .search-input input::placeholder {
-    color: var(--text-faint);
-  }
-
-  .search-input input:disabled {
-    cursor: not-allowed;
-  }
-
   .repo-dropdown {
     max-height: 280px;
     overflow-y: auto;
diff --git a/apps/staged/src/lib/features/projects/ReposListView.svelte b/apps/staged/src/lib/features/projects/ReposListView.svelte
index 8b9c7b9d2..062bb7e8e 100644
--- a/apps/staged/src/lib/features/projects/ReposListView.svelte
+++ b/apps/staged/src/lib/features/projects/ReposListView.svelte
@@ -6,7 +6,11 @@
 -->
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { ArrowLeft, Pin, PinOff, Search, Download } from 'lucide-svelte';
+  import ArrowLeft from '@lucide/svelte/icons/arrow-left';
+  import Pin from '@lucide/svelte/icons/pin';
+  import PinOff from '@lucide/svelte/icons/pin-off';
+  import Search from '@lucide/svelte/icons/search';
+  import Download from '@lucide/svelte/icons/download';
   import type { RepoHomeItem } from '../../types';
   import * as commands from '../../api/commands';
   import { goHome } from '../layout/navigation.svelte';
@@ -18,9 +22,12 @@
     badgeBorder,
     badgeBorderHover,
   } from '../../shared/badgeColors';
-  import { alerts } from '../../shared/alerts.svelte';
+  import { toast } from 'svelte-sonner';
   import Spinner from '../../shared/Spinner.svelte';
   import ProjectsSidebar from './ProjectsSidebar.svelte';
+  import { Input } from '$lib/components/ui/input';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
 
   let repos = $state<RepoHomeItem[]>([]);
   let loading = $state(true);
@@ -55,7 +62,7 @@
     } catch (e) {
       console.error('[ReposListView] Failed to load repos:', e);
       const message = e instanceof Error ? e.message : String(e);
-      alerts.show({ tone: 'error', title: 'Failed to load repos', message });
+      toast.error('Failed to load repos', { description: message });
     } finally {
       loading = false;
     }
@@ -78,7 +85,7 @@
     } catch (e) {
       console.error('[ReposListView] Failed to toggle pin:', e);
       const message = e instanceof Error ? e.message : String(e);
-      alerts.show({ tone: 'error', title: 'Failed to update pin', message });
+      toast.error('Failed to update pin', { description: message });
     } finally {
       const next = new Set(togglingPin);
       next.delete(key);
@@ -98,7 +105,7 @@
     } catch (e) {
       console.error('[ReposListView] Failed to clone repo:', e);
       const message = e instanceof Error ? e.message : String(e);
-      alerts.show({ tone: 'error', title: 'Failed to clone repo', message });
+      toast.error('Failed to clone repo', { description: message });
     } finally {
       const next = new Set(cloningRepos);
       next.delete(key);
@@ -119,21 +126,34 @@
   <div class="main-panel">
     <div class="content">
       <div class="header-row">
-        <button class="back-btn" onclick={goHome} title="Back to home">
-          <ArrowLeft size={16} />
-        </button>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <Button
+                {...props}
+                variant="ghost"
+                size="icon"
+                class="size-8 rounded-lg text-muted-foreground hover:bg-[var(--bg-hover)] hover:text-foreground [&_svg]:!size-4"
+                onclick={goHome}
+              >
+                <ArrowLeft size={16} />
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content>Back to home</Tooltip.Content>
+        </Tooltip.Root>
         <h1>Repos</h1>
       </div>
 
       <div class="search-row">
         <div class="search-input-wrapper">
           <Search size={14} />
-          <input
-            bind:this={searchInputEl}
+          <Input
+            bind:ref={searchInputEl}
             type="text"
             placeholder="Filter repos..."
             bind:value={searchQuery}
-            class="search-input"
+            class="border-0 bg-transparent shadow-none px-0 py-0 h-auto min-h-0 focus-visible:ring-0 focus-visible:border-0 text-sm"
           />
         </div>
       </div>
@@ -154,47 +174,76 @@
             {@const borderHover = badgeBorderHover(repo.hue, darkMode.value)}
             {@const key = repoKey(repo)}
             <div class="repo-card-wrapper">
-              <div
-                class="repo-card"
-                style="--accent: {accent}; --card-bg: {bg}; --card-bg-hover: {bgHover}; --card-border: {border}; --card-border-hover: {borderHover};"
-                title={subtitle(repo)}
-              >
-                <button
-                  class="pin-toggle"
-                  class:pinned={repo.pinned}
-                  title={repo.pinned ? 'Unpin repo' : 'Pin repo'}
-                  onclick={(e) => togglePin(repo, e)}
-                  disabled={togglingPin.has(key)}
-                >
-                  {#if togglingPin.has(key)}
-                    <Spinner size={14} />
-                  {:else if repo.pinned}
-                    <Pin size={14} />
-                  {:else}
-                    <PinOff size={14} />
-                  {/if}
-                </button>
-
-                <span class="card-title">{repo.shortName}</span>
-                <span class="card-subtitle">{subtitle(repo)}</span>
-
-                {#if !repo.hasLocalClone}
-                  <div class="card-footer">
-                    <button
-                      class="download-btn"
-                      title="Clone repo locally"
-                      onclick={(e) => handleCloneRepo(repo, e)}
-                      disabled={cloningRepos.has(key)}
+              <Tooltip.Root>
+                <Tooltip.Trigger>
+                  {#snippet child({ props })}
+                    <div
+                      {...props}
+                      class="repo-card"
+                      style="--accent: {accent}; --card-bg: {bg}; --card-bg-hover: {bgHover}; --card-border: {border}; --card-border-hover: {borderHover};"
                     >
-                      {#if cloningRepos.has(key)}
-                        <Spinner size={14} />
-                      {:else}
-                        <Download size={14} />
+                      <Tooltip.Root>
+                        <Tooltip.Trigger>
+                          {#snippet child({ props: pinProps })}
+                            <Button
+                              {...pinProps}
+                              variant="ghost"
+                              size="icon-sm"
+                              class={[
+                                'absolute top-2 right-2 z-[2] size-7 rounded-md bg-transparent hover:bg-[var(--bg-hover)] [&_svg]:!size-3.5',
+                                repo.pinned
+                                  ? 'text-[var(--accent)] hover:text-[var(--accent)]'
+                                  : 'text-[var(--text-faint)] hover:text-foreground',
+                              ]}
+                              onclick={(e) => togglePin(repo, e)}
+                              disabled={togglingPin.has(key)}
+                            >
+                              {#if togglingPin.has(key)}
+                                <Spinner size={14} />
+                              {:else if repo.pinned}
+                                <Pin size={14} />
+                              {:else}
+                                <PinOff size={14} />
+                              {/if}
+                            </Button>
+                          {/snippet}
+                        </Tooltip.Trigger>
+                        <Tooltip.Content>{repo.pinned ? 'Unpin repo' : 'Pin repo'}</Tooltip.Content>
+                      </Tooltip.Root>
+
+                      <span class="card-title">{repo.shortName}</span>
+                      <span class="card-subtitle">{subtitle(repo)}</span>
+
+                      {#if !repo.hasLocalClone}
+                        <div class="card-footer">
+                          <Tooltip.Root>
+                            <Tooltip.Trigger>
+                              {#snippet child({ props: cloneProps })}
+                                <Button
+                                  {...cloneProps}
+                                  variant="outline"
+                                  size="icon-sm"
+                                  class="size-7 rounded-md border-[var(--card-border)] bg-transparent text-[var(--accent)] shadow-none hover:border-[var(--card-border-hover)] hover:bg-[var(--card-bg-hover)] hover:text-[var(--accent)] [&_svg]:!size-3.5"
+                                  onclick={(e) => handleCloneRepo(repo, e)}
+                                  disabled={cloningRepos.has(key)}
+                                >
+                                  {#if cloningRepos.has(key)}
+                                    <Spinner size={14} />
+                                  {:else}
+                                    <Download size={14} />
+                                  {/if}
+                                </Button>
+                              {/snippet}
+                            </Tooltip.Trigger>
+                            <Tooltip.Content>Clone repo locally</Tooltip.Content>
+                          </Tooltip.Root>
+                        </div>
                       {/if}
-                    </button>
-                  </div>
-                {/if}
-              </div>
+                    </div>
+                  {/snippet}
+                </Tooltip.Trigger>
+                <Tooltip.Content>{subtitle(repo)}</Tooltip.Content>
+              </Tooltip.Root>
               {#if repo.pinned}
                 <div class="card-label">Pinned</div>
               {/if}
@@ -251,26 +300,6 @@
     color: var(--text-primary);
   }
 
-  .back-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    padding: 0;
-    border: none;
-    border-radius: 8px;
-    background: none;
-    color: var(--text-muted);
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-
-  .back-btn:hover {
-    color: var(--text-primary);
-    background: var(--bg-hover);
-  }
-
   .search-row {
     margin-bottom: 16px;
   }
@@ -291,20 +320,6 @@
     border-color: var(--border-emphasis);
   }
 
-  .search-input {
-    flex: 1;
-    border: none;
-    background: none;
-    outline: none;
-    color: var(--text-primary);
-    font-size: var(--size-sm);
-    font-family: inherit;
-  }
-
-  .search-input::placeholder {
-    color: var(--text-faint);
-  }
-
   .state {
     color: var(--text-muted);
     padding: 16px 2px;
@@ -349,44 +364,6 @@
     box-sizing: border-box;
   }
 
-  .pin-toggle {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    border: none;
-    border-radius: 6px;
-    background: transparent;
-    color: var(--text-faint);
-    cursor: pointer;
-    transition: all 0.15s ease;
-    z-index: 2;
-  }
-
-  .pin-toggle:hover:not(:disabled) {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .pin-toggle.pinned {
-    color: var(--accent);
-  }
-
-  .pin-toggle.pinned:hover:not(:disabled) {
-    color: var(--accent);
-    background: var(--bg-hover);
-  }
-
-  .pin-toggle:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
   .card-title {
     font-size: var(--size-md);
     font-weight: 700;
@@ -414,30 +391,6 @@
     min-height: 20px;
   }
 
-  .download-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border: 1px solid var(--card-border);
-    border-radius: 6px;
-    background: transparent;
-    color: var(--accent);
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-
-  .download-btn:hover:not(:disabled) {
-    background: var(--card-bg-hover);
-    border-color: var(--card-border-hover);
-  }
-
-  .download-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
   @media (max-width: 900px) {
     .repos-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
diff --git a/apps/staged/src/lib/features/projects/SidebarPinnedRepo.svelte b/apps/staged/src/lib/features/projects/SidebarPinnedRepo.svelte
index 41731cc4b..8850000fd 100644
--- a/apps/staged/src/lib/features/projects/SidebarPinnedRepo.svelte
+++ b/apps/staged/src/lib/features/projects/SidebarPinnedRepo.svelte
@@ -7,21 +7,28 @@
 -->
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { Plus, Play, MoreVertical, Download, Pin, Copy, FolderOpen } from 'lucide-svelte';
+  import Plus from '@lucide/svelte/icons/plus';
+  import Play from '@lucide/svelte/icons/play';
+  import MoreVertical from '@lucide/svelte/icons/more-vertical';
+  import Download from '@lucide/svelte/icons/download';
+  import Pin from '@lucide/svelte/icons/pin';
+  import Copy from '@lucide/svelte/icons/copy';
+  import FolderOpen from '@lucide/svelte/icons/folder-open';
   import type { RepoHomeItem } from '../../types';
   import { darkMode } from '../../stores/isDark.svelte';
   import { badgeFg, badgeBorder } from '../../shared/badgeColors';
-  import ContextMenu from '../../shared/menu/ContextMenu.svelte';
-  import type { MenuItem } from '../../shared/menu/types';
   import {
     getAvailableOpeners,
     openInApp,
     copyPathToClipboard,
     type OpenerApp,
   } from '../branches/branch';
+  import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
   import * as commands from '../../api/commands';
-  import { alerts } from '../../shared/alerts.svelte';
+  import { toast } from 'svelte-sonner';
   import Spinner from '../../shared/Spinner.svelte';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
 
   interface Props {
     repo: RepoHomeItem;
@@ -41,7 +48,6 @@
     onPinnedReposChanged,
   }: Props = $props();
 
-  let contextMenu = $state<ReturnType<typeof ContextMenu> | undefined>();
   let openerApps = $state<OpenerApp[]>([]);
   let clonePath = $state<string | null>(null);
   let cloning = $state(false);
@@ -86,11 +92,9 @@
       onPinnedReposChanged?.();
     } catch (e) {
       console.error('[SidebarPinnedRepo] Failed to clone repo:', e);
-      alerts.show({
-        tone: 'error',
-        title: 'Clone failed',
-        message: e instanceof Error ? e.message : String(e),
-        durationMs: 5000,
+      toast.error('Clone failed', {
+        description: e instanceof Error ? e.message : String(e),
+        duration: 5000,
       });
     } finally {
       cloning = false;
@@ -107,66 +111,15 @@
     }
   }
 
-  function openContextMenu(event: MouseEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    const items: MenuItem[] = [];
-
-    if (repo.hasLocalClone && clonePath) {
-      const path = clonePath;
-
-      // Open-in submenu
-      if (openerApps.length > 0) {
-        items.push({
-          type: 'submenu',
-          label: 'Open in\u2026',
-          icon: FolderOpen,
-          children: openerApps.map((app) => ({
-            type: 'action' as const,
-            label: app.name,
-            iconSrc: app.icon ?? undefined,
-            onSelect: async () => {
-              try {
-                await openInApp(path, app.id);
-              } catch (e) {
-                alerts.show({
-                  tone: 'error',
-                  title: `Failed to open in ${app.name}`,
-                  message: e instanceof Error ? e.message : String(e),
-                  durationMs: 3000,
-                });
-              }
-            },
-          })),
-        });
-      }
-
-      // Copy path
-      items.push({
-        type: 'action',
-        label: 'Copy Path',
-        icon: Copy,
-        onSelect: () => copyPathToClipboard(path),
+  async function handleOpenInApp(path: string, app: OpenerApp) {
+    try {
+      await openInApp(path, app.id);
+    } catch (e) {
+      toast.error(`Failed to open in ${app.name}`, {
+        description: e instanceof Error ? e.message : String(e),
+        duration: 3000,
       });
-
-      items.push({ type: 'separator' });
     }
-
-    // Unpin
-    items.push({
-      type: 'action',
-      label: 'Unpin Repo',
-      icon: Pin,
-      onSelect: handleUnpin,
-    });
-
-    contextMenu?.open({
-      x: event.clientX,
-      y: event.clientY,
-      items,
-      ariaLabel: `Actions for ${repo.shortName}`,
-    });
   }
 
   function handleDragStart(e: DragEvent) {
@@ -222,69 +175,138 @@
   <div class="card-stripe"></div>
 
   <div class="card-content">
-    <div class="card-name-row" title={subtitle}>
-      <span class="repo-name">{repo.shortName}</span>
-      {#if subpathLabel}
-        <span class="subpath-badge">{subpathLabel}</span>
-      {/if}
-    </div>
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        {#snippet child({ props })}
+          <div {...props} class="card-name-row">
+            <span class="repo-name">{repo.shortName}</span>
+            {#if subpathLabel}
+              <span class="subpath-badge">{subpathLabel}</span>
+            {/if}
+          </div>
+        {/snippet}
+      </Tooltip.Trigger>
+      <Tooltip.Content>{subtitle}</Tooltip.Content>
+    </Tooltip.Root>
 
     <div class="card-actions">
-      <button
-        class="action-btn"
-        title="New project"
-        onclick={(e) => {
-          e.stopPropagation();
-          openNewProjectForRepo();
-        }}
-      >
-        <Plus size={12} />
-      </button>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <Button
+              {...props}
+              variant="ghost"
+              class="size-[22px] rounded-[4px] p-0 text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)] [&_svg]:!size-3"
+              onclick={(e) => {
+                e.stopPropagation();
+                openNewProjectForRepo();
+              }}
+            >
+              <Plus size={12} />
+            </Button>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content>New project</Tooltip.Content>
+      </Tooltip.Root>
 
       {#if repo.hasLocalClone}
-        <button
-          class="action-btn run-btn"
-          title="Run"
-          onclick={(e) => {
-            e.stopPropagation();
-            // Run primary action — requires backend wiring (run action against main clone)
-            alerts.show({
-              tone: 'info',
-              title: 'Run action',
-              message: 'Running actions against pinned repos is coming soon.',
-              durationMs: 2000,
-            });
-          }}
-        >
-          <Play size={12} />
-        </button>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <Button
+                {...props}
+                variant="ghost"
+                class="size-[22px] rounded-[4px] p-0 text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--ui-success)] [&_svg]:!size-3"
+                onclick={(e) => {
+                  e.stopPropagation();
+                  // Run primary action — requires backend wiring (run action against main clone)
+                  toast.info('Run action', {
+                    description: 'Running actions against pinned repos is coming soon.',
+                    duration: 2000,
+                  });
+                }}
+              >
+                <Play size={12} />
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content>Run</Tooltip.Content>
+        </Tooltip.Root>
       {:else}
-        <button
-          class="action-btn download-btn"
-          title="Clone repo locally"
-          disabled={cloning}
-          onclick={(e) => {
-            e.stopPropagation();
-            handleClone();
-          }}
-        >
-          {#if cloning}
-            <Spinner size={12} />
-          {:else}
-            <Download size={12} />
-          {/if}
-        </button>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <span {...props} class="inline-flex">
+                <Button
+                  variant="ghost"
+                  class="size-[22px] rounded-[4px] p-0 text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--ui-accent)] [&_svg]:!size-3"
+                  disabled={cloning}
+                  onclick={(e) => {
+                    e.stopPropagation();
+                    handleClone();
+                  }}
+                >
+                  {#if cloning}
+                    <Spinner size={12} />
+                  {:else}
+                    <Download size={12} />
+                  {/if}
+                </Button>
+              </span>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content>Clone repo locally</Tooltip.Content>
+        </Tooltip.Root>
       {/if}
 
-      <button class="action-btn more-btn" title="More options" onclick={openContextMenu}>
-        <MoreVertical size={12} />
-      </button>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger
+          class="inline-flex size-[22px] items-center justify-center rounded-[4px] bg-transparent text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]"
+          title="More options"
+          aria-label="More options"
+        >
+          <MoreVertical size={12} />
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end" sideOffset={4} class="min-w-[172px]">
+          {#if repo.hasLocalClone && clonePath}
+            {@const path = clonePath}
+            {#if openerApps.length > 0}
+              <DropdownMenu.Sub>
+                <DropdownMenu.SubTrigger>
+                  <FolderOpen size={14} /> Open in…
+                </DropdownMenu.SubTrigger>
+                <DropdownMenu.SubContent class="min-w-[160px]">
+                  {#each openerApps as app (app.id)}
+                    <DropdownMenu.Item onSelect={() => handleOpenInApp(path, app)}>
+                      {#if app.icon}
+                        <img
+                          src={app.icon}
+                          alt=""
+                          width="14"
+                          height="14"
+                          class="shrink-0 rounded-[3px]"
+                        />
+                      {/if}
+                      {app.name}
+                    </DropdownMenu.Item>
+                  {/each}
+                </DropdownMenu.SubContent>
+              </DropdownMenu.Sub>
+            {/if}
+            <DropdownMenu.Item onSelect={() => copyPathToClipboard(path)}>
+              <Copy size={14} /> Copy Path
+            </DropdownMenu.Item>
+            <DropdownMenu.Separator />
+          {/if}
+          <DropdownMenu.Item onSelect={handleUnpin}>
+            <Pin size={14} /> Unpin Repo
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
     </div>
   </div>
 </div>
 
-<ContextMenu bind:this={contextMenu} ariaLabel="Pinned repo actions" minWidth={172} />
-
 <style>
   .pinned-repo-card {
     position: relative;
@@ -368,44 +390,4 @@
     gap: 2px;
     flex-shrink: 0;
   }
-
-  .action-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 22px;
-    height: 22px;
-    border: none;
-    border-radius: 4px;
-    background: transparent;
-    color: var(--text-secondary);
-    cursor: pointer;
-    padding: 0;
-    transition:
-      background 0.12s ease,
-      color 0.12s ease;
-  }
-
-  .action-btn:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .action-btn:focus-visible {
-    outline: 2px solid var(--ui-accent);
-    outline-offset: -1px;
-  }
-
-  .action-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .run-btn:hover {
-    color: var(--ui-success, oklch(0.65 0.15 145));
-  }
-
-  .download-btn:hover {
-    color: var(--ui-accent);
-  }
 </style>
diff --git a/apps/staged/src/lib/features/projects/SplashScreen.svelte b/apps/staged/src/lib/features/projects/SplashScreen.svelte
index 7262c1464..fae22be26 100644
--- a/apps/staged/src/lib/features/projects/SplashScreen.svelte
+++ b/apps/staged/src/lib/features/projects/SplashScreen.svelte
@@ -7,12 +7,13 @@
   the form slides in below the headline.
 -->
 <script lang="ts">
-  import { X } from 'lucide-svelte';
+  import X from '@lucide/svelte/icons/x';
   import type { Project } from '../../types';
   import GitTreeAnimation from '../../shared/GitTreeAnimation.svelte';
   import StagedIcon from '../../shared/StagedIcon.svelte';
   import NewProjectForm from './NewProjectForm.svelte';
   import { viewport } from '../../shared/viewport.svelte';
+  import { Button } from '$lib/components/ui/button';
 
   interface Props {
     onCreated: (project: Project) => void;
@@ -111,7 +112,13 @@
 
   {#if !showForm}
     <div class="splash-actions">
-      <button class="splash-pill" onclick={openForm}> Create your first project </button>
+      <Button
+        variant="outline"
+        class="h-auto rounded-full border-transparent bg-[var(--bg-elevated)] px-9 py-3 text-sm font-medium text-foreground shadow-none transition-all hover:-translate-y-px hover:border-[var(--border-muted)] hover:bg-[var(--bg-hover)] hover:text-foreground active:translate-y-0"
+        onclick={openForm}
+      >
+        Create your first project
+      </Button>
       {#if viewport.showShortcutHints}
         <span class="splash-hint">or press <kbd>⌘ N</kbd> anytime</span>
       {/if}
@@ -121,9 +128,14 @@
     </div>
   {:else}
     <div class="splash-close">
-      <button class="close-circle" onclick={closeForm}>
+      <Button
+        variant="outline"
+        size="icon"
+        class="size-9 rounded-full border-[var(--border-muted)] bg-transparent text-muted-foreground shadow-none hover:border-[var(--border-emphasis)] hover:bg-[var(--bg-hover)] hover:text-foreground [&_svg]:!size-[18px]"
+        onclick={closeForm}
+      >
         <X size={18} />
-      </button>
+      </Button>
     </div>
   {/if}
 </div>
@@ -312,31 +324,6 @@
     z-index: 1;
   }
 
-  .splash-pill {
-    padding: 12px 36px;
-    border-radius: 999px;
-    border: 1px solid transparent;
-    background: var(--bg-elevated);
-    color: var(--text-primary);
-    font-size: var(--size-sm);
-    font-weight: 500;
-    cursor: pointer;
-    transition:
-      background-color 0.2s ease,
-      border-color 0.2s ease,
-      transform 0.15s ease;
-  }
-
-  .splash-pill:hover {
-    background: var(--bg-hover);
-    border-color: var(--border-muted);
-    transform: translateY(-1px);
-  }
-
-  .splash-pill:active {
-    transform: translateY(0);
-  }
-
   .splash-hint {
     color: var(--text-faint);
     font-size: var(--size-xs);
@@ -370,29 +357,6 @@
     z-index: 1;
   }
 
-  .close-circle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    border: 1px solid var(--border-muted);
-    background: transparent;
-    color: var(--text-muted);
-    cursor: pointer;
-    transition:
-      border-color 0.15s ease,
-      color 0.15s ease,
-      background-color 0.15s ease;
-  }
-
-  .close-circle:hover {
-    border-color: var(--border-emphasis);
-    color: var(--text-primary);
-    background-color: var(--bg-hover);
-  }
-
   @media (max-width: 640px) {
     .splash {
       padding: 24px 16px 0;
@@ -417,13 +381,13 @@
       padding-bottom: 20px;
     }
 
-    .splash-pill {
+    .splash-actions :global(button) {
       min-height: 44px;
       max-width: calc(100vw - 32px);
       padding: 12px 20px;
     }
 
-    .close-circle {
+    .splash-close :global(button) {
       width: 44px;
       height: 44px;
     }
diff --git a/apps/staged/src/lib/features/projects/SubpathInput.svelte b/apps/staged/src/lib/features/projects/SubpathInput.svelte
index d08fad53e..4a68d12d5 100644
--- a/apps/staged/src/lib/features/projects/SubpathInput.svelte
+++ b/apps/staged/src/lib/features/projects/SubpathInput.svelte
@@ -12,8 +12,9 @@
 </script>
 
 <script lang="ts">
-  import { FolderOpen } from 'lucide-svelte';
+  import FolderOpen from '@lucide/svelte/icons/folder-open';
   import * as commands from '../../api/commands';
+  import { Input } from '$lib/components/ui/input';
 
   interface Props {
     value: string;
@@ -32,7 +33,7 @@
   let suggestions = $state<string[]>([]);
   let showDropdown = $state(false);
   let highlightedIndex = $state(-1);
-  let inputEl: HTMLInputElement | undefined = $state();
+  let inputEl: HTMLInputElement | null = $state(null);
 
   // Expose the API to the parent via bindable prop
   $effect(() => {
@@ -205,9 +206,9 @@
 
 <div class="subpath-input-wrapper">
   <div class="input-container">
-    <input
-      bind:this={inputEl}
-      class="subpath-input"
+    <Input
+      bind:ref={inputEl}
+      class="min-h-[42px] rounded-[10px] px-3.5 py-2.5 text-base"
       type="text"
       bind:value
       oninput={handleInput}
@@ -254,33 +255,6 @@
     align-items: center;
   }
 
-  .subpath-input {
-    width: 100%;
-    min-height: 42px;
-    border: 1.5px solid var(--border-muted);
-    background: transparent;
-    color: var(--text-primary);
-    border-radius: 10px;
-    padding: 10px 14px;
-    font-size: var(--size-md);
-    font-family: inherit;
-    outline: none;
-    transition: border-color 0.15s ease;
-    box-sizing: border-box;
-  }
-
-  .subpath-input:focus {
-    border-color: var(--ui-accent);
-  }
-
-  .subpath-input::placeholder {
-    color: var(--text-faint);
-  }
-
-  .subpath-input:disabled {
-    opacity: 0.6;
-  }
-
   .suggestions-dropdown {
     position: absolute;
     top: 100%;
diff --git a/apps/staged/src/lib/features/projects/SuggestedRepos.svelte b/apps/staged/src/lib/features/projects/SuggestedRepos.svelte
index 51e77c7e7..8c29a2afe 100644
--- a/apps/staged/src/lib/features/projects/SuggestedRepos.svelte
+++ b/apps/staged/src/lib/features/projects/SuggestedRepos.svelte
@@ -7,7 +7,8 @@
   hidden state across app launches.
 -->
 <script lang="ts">
-  import { Plus, X } from 'lucide-svelte';
+  import Plus from '@lucide/svelte/icons/plus';
+  import X from '@lucide/svelte/icons/x';
   import type { Project, ProjectRepo, SuggestedRepo } from '../../types';
   import type { RepoSelection as RepoPickerSelection } from '../../shared/githubUrl';
   import * as commands from '../../api/commands';
@@ -17,6 +18,8 @@
   import * as badge from '../../shared/badgeColors';
   import Spinner from '../../shared/Spinner.svelte';
   import { getStoreValue, setStoreValue } from '../../shared/persistentStore';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
 
   interface Props {
     project: Project;
@@ -122,9 +125,21 @@
   <div class="suggested-repos">
     <div class="suggested-header">
       <span class="suggested-title">Suggested repos</span>
-      <button class="dismiss-btn" onclick={handleDismiss} title="Dismiss suggestions">
-        <X size={14} />
-      </button>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <Button
+              {...props}
+              variant="ghost"
+              class="size-[22px] rounded-[4px] p-0 text-[var(--text-faint)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] [&_svg]:!size-3.5"
+              onclick={handleDismiss}
+            >
+              <X size={14} />
+            </Button>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content>Dismiss suggestions</Tooltip.Content>
+      </Tooltip.Root>
     </div>
     <div class="suggested-list">
       {#each suggestions as suggestion (suggestionKey(suggestion))}
@@ -183,28 +198,6 @@
     letter-spacing: 0.04em;
   }
 
-  .dismiss-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 22px;
-    height: 22px;
-    padding: 0;
-    border: none;
-    border-radius: 4px;
-    background: transparent;
-    color: var(--text-faint);
-    cursor: pointer;
-    transition:
-      color 0.15s,
-      background 0.15s;
-  }
-
-  .dismiss-btn:hover {
-    color: var(--text-secondary);
-    background: var(--bg-hover);
-  }
-
   .suggested-list {
     display: flex;
     flex-wrap: wrap;
diff --git a/apps/staged/src/lib/features/projects/workspaceLifecycle.svelte.ts b/apps/staged/src/lib/features/projects/workspaceLifecycle.svelte.ts
index 6f7831414..ccbbde7b2 100644
--- a/apps/staged/src/lib/features/projects/workspaceLifecycle.svelte.ts
+++ b/apps/staged/src/lib/features/projects/workspaceLifecycle.svelte.ts
@@ -1,6 +1,6 @@
 import type { Branch, WorkspaceStatus } from '../../types';
 import * as commands from '../../api/commands';
-import { alerts } from '../../shared/alerts.svelte';
+import { toast } from 'svelte-sonner';
 import { getPreferredAgent } from '../settings/preferences.svelte';
 import { agentState } from '../agents/agent.svelte';
 
@@ -204,11 +204,9 @@ class WorkspaceLifecycleController {
         this.workspaceErrors = new Map(this.workspaceErrors).set(id, message);
       }
       this.version++;
-      alerts.show({
-        tone: 'error',
-        title: 'Unable to resume workspace',
-        message,
-        durationMs: 0,
+      toast.error('Unable to resume workspace', {
+        description: message,
+        duration: Infinity,
       });
     }
   }
@@ -418,11 +416,9 @@ class WorkspaceLifecycleController {
             this.workspaceErrors = new Map(this.workspaceErrors).set(branchId, message);
             this.version++;
             this.handleWorkspaceStatusChange(projectId, branchId, 'error');
-            alerts.show({
-              tone: 'error',
-              title: 'Unable to start workspace',
-              message,
-              durationMs: 0,
+            toast.error('Unable to start workspace', {
+              description: message,
+              duration: Infinity,
             });
           } finally {
             this.pendingSetupBranches.delete(branchId);
diff --git a/apps/staged/src/lib/features/sessions/HashtagInput.svelte b/apps/staged/src/lib/features/sessions/HashtagInput.svelte
index 7eddf74ed..1e7546cb2 100644
--- a/apps/staged/src/lib/features/sessions/HashtagInput.svelte
+++ b/apps/staged/src/lib/features/sessions/HashtagInput.svelte
@@ -21,7 +21,10 @@
 <script lang="ts">
   import { tick } from 'svelte';
   import type { HashtagItem } from '../../types';
-  import { FileText, GitCommitVertical, FileSearch, Image as ImageLucide } from 'lucide-svelte';
+  import FileText from '@lucide/svelte/icons/file-text';
+  import GitCommitVertical from '@lucide/svelte/icons/git-commit-vertical';
+  import FileSearch from '@lucide/svelte/icons/file-search';
+  import ImageLucide from '@lucide/svelte/icons/image';
   import { HASHTAG_TOKEN_RE, hashtagTypeIconSvg, escapeHtml } from './hashtagItems';
   import { focusAtEndSync } from '../../shared/focusAtEnd';
   import RepoLabel from '../../shared/RepoLabel.svelte';
diff --git a/apps/staged/src/lib/features/sessions/ImageAttachment.svelte b/apps/staged/src/lib/features/sessions/ImageAttachment.svelte
index a8efe3e94..0bc263fdf 100644
--- a/apps/staged/src/lib/features/sessions/ImageAttachment.svelte
+++ b/apps/staged/src/lib/features/sessions/ImageAttachment.svelte
@@ -13,7 +13,11 @@
     onImageIdsChange — callback when the list changes
 -->
 <script lang="ts">
-  import { X, ImagePlus, Plus } from 'lucide-svelte';
+  import X from '@lucide/svelte/icons/x';
+  import ImagePlus from '@lucide/svelte/icons/image-plus';
+  import Plus from '@lucide/svelte/icons/plus';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
   import { createImageFromData, getImageData, deleteImage } from '../../commands';
   import type { Image } from '../../types';
 
@@ -129,30 +133,61 @@
 {#if imageIds.length > 0}
   <div class="attached-images">
     {#each imageIds as imageId}
-      <div class="image-thumb">
+      <div class="group/thumb image-thumb">
         {#if previews.get(imageId)}
           <img src={previews.get(imageId)} alt="attached" />
         {:else}
           <div class="image-placeholder"><ImagePlus size={16} /></div>
         {/if}
         {#if !disabled}
-          <button class="remove-btn" onclick={() => removeImage(imageId)} title="Remove image">
-            <X size={10} />
-          </button>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="ghost"
+                  size="icon"
+                  class="absolute top-0.5 right-0.5 size-4 rounded-full bg-[var(--bg-deepest)] text-muted-foreground opacity-0 shadow-none transition-opacity hover:bg-[var(--bg-chrome)] hover:text-foreground group-hover/thumb:opacity-100 [&_svg]:!size-2.5"
+                  onclick={() => removeImage(imageId)}
+                >
+                  <X size={10} />
+                </Button>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>Remove image</Tooltip.Content>
+          </Tooltip.Root>
         {/if}
       </div>
     {/each}
     {#if !disabled}
-      <button class="add-more-btn" onclick={openFilePicker} title="Add image">
-        <Plus size={16} />
-      </button>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <Button
+              {...props}
+              variant="outline"
+              size="icon"
+              class="size-12 shrink-0 rounded-md border border-dashed border-[var(--border-muted)] bg-transparent text-[var(--text-faint)] shadow-none hover:border-[var(--border-emphasis)] hover:bg-transparent hover:text-muted-foreground [&_svg]:!size-4"
+              onclick={openFilePicker}
+            >
+              <Plus size={16} />
+            </Button>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content>Add image</Tooltip.Content>
+      </Tooltip.Root>
     {/if}
   </div>
 {:else if !disabled}
-  <button class="attach-btn" onclick={openFilePicker} type="button">
+  <Button
+    variant="outline"
+    type="button"
+    class="h-auto gap-1.5 rounded-md border border-dashed border-[var(--border-muted)] bg-transparent px-2.5 py-1.5 text-xs text-[var(--text-faint)] shadow-none hover:border-[var(--border-emphasis)] hover:bg-transparent hover:text-muted-foreground"
+    onclick={openFilePicker}
+  >
     <ImagePlus size={14} />
     <span>Attach images</span>
-  </button>
+  </Button>
 {/if}
 
 <style>
@@ -192,76 +227,4 @@
     height: 100%;
     color: var(--text-faint);
   }
-
-  .remove-btn {
-    position: absolute;
-    top: 2px;
-    right: 2px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    background: var(--bg-deepest);
-    color: var(--text-muted);
-    cursor: pointer;
-    opacity: 0;
-    transition:
-      opacity 0.1s,
-      color 0.1s;
-  }
-
-  .image-thumb:hover .remove-btn {
-    opacity: 1;
-  }
-
-  .remove-btn:hover {
-    color: var(--text-primary);
-    background: var(--bg-chrome);
-  }
-
-  .add-more-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    border-radius: 6px;
-    border: 1px dashed var(--border-muted);
-    background: none;
-    color: var(--text-faint);
-    cursor: pointer;
-    transition:
-      color 0.1s,
-      border-color 0.1s;
-  }
-
-  .add-more-btn:hover {
-    color: var(--text-muted);
-    border-color: var(--border-emphasis);
-  }
-
-  .attach-btn {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 10px;
-    border-radius: 6px;
-    border: 1px dashed var(--border-muted);
-    background: none;
-    color: var(--text-faint);
-    font-size: var(--size-xs);
-    cursor: pointer;
-    transition:
-      color 0.1s,
-      border-color 0.1s;
-  }
-
-  .attach-btn:hover {
-    color: var(--text-muted);
-    border-color: var(--border-emphasis);
-  }
 </style>
diff --git a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
index b61119d86..5acbc537f 100644
--- a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
+++ b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
@@ -15,7 +15,12 @@
     onSubmit      — called with { prompt, mode, imageIds } when submit is pressed
 -->
 <script lang="ts">
-  import { X, GitCommitVertical, FileText, FileSearch, Send, ChevronDown } from 'lucide-svelte';
+  import X from '@lucide/svelte/icons/x';
+  import GitCommitVertical from '@lucide/svelte/icons/git-commit-vertical';
+  import FileText from '@lucide/svelte/icons/file-text';
+  import FileSearch from '@lucide/svelte/icons/file-search';
+  import Send from '@lucide/svelte/icons/send';
+  import ChevronDown from '@lucide/svelte/icons/chevron-down';
   import { tick, untrack } from 'svelte';
   import Spinner from '../../shared/Spinner.svelte';
   import RepoLabel from '../../shared/RepoLabel.svelte';
@@ -24,7 +29,9 @@
   import ImageAttachment from './ImageAttachment.svelte';
   import HashtagInput from './HashtagInput.svelte';
   import { buildBranchHashtagItems } from './hashtagItems';
-  import { createBackdropDismissHandlers } from '../../shared/backdropDismiss';
+  import * as Dialog from '$lib/components/ui/dialog';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
   import { subscribeDragDrop } from '../branches/dragDrop';
   import {
     isImageFile,
@@ -35,6 +42,7 @@
   import { viewport } from '../../shared/viewport.svelte';
 
   interface Props {
+    open: boolean;
     branch: Branch;
     mode: BranchSessionType;
     repoLabel?: ProjectRepo | null;
@@ -56,6 +64,7 @@
   }
 
   let {
+    open,
     branch,
     mode,
     repoLabel = null,
@@ -76,7 +85,6 @@
   let starting = $state(false);
   let initialized = false;
   let textareaEl: HTMLElement | null = $state(null);
-  const backdropDismiss = createBackdropDismissHandlers({ onDismiss: handleClose });
 
   let isCommit = $derived(currentMode === 'commit');
   let isReview = $derived(currentMode === 'review');
@@ -255,7 +263,7 @@
 
   // Drag-and-drop state
   let dragOver = $state(false);
-  let modalElement: HTMLDivElement | undefined = $state();
+  let modalElement: HTMLElement | null = $state(null);
 
   // Seed prompt and mode from props once; caller preserves draft across open/close.
   $effect(() => {
@@ -316,12 +324,6 @@
   }
 
   function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      handleClose();
-      return;
-    }
-
     // Cmd+Enter to submit
     if (e.key === 'Enter' && e.metaKey && (prompt.trim() || isReview) && !starting) {
       e.preventDefault();
@@ -384,24 +386,13 @@
 
 <svelte:window onkeydown={handleKeydown} onclick={handleDocumentClick} />
 
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div
-  class="modal-backdrop"
-  role="dialog"
-  aria-modal="true"
-  tabindex="-1"
-  onpointerdown={backdropDismiss.handlePointerDown}
-  onclick={backdropDismiss.handleClick}
-  onkeydown={(e) => e.key === 'Escape' && handleClose()}
->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div
-    bind:this={modalElement}
-    class="modal"
-    class:drag-over={dragOver}
-    role="presentation"
-    onclick={(e) => e.stopPropagation()}
+<Dialog.Root {open} onOpenChange={(v) => !v && handleClose()}>
+  <Dialog.Content
+    bind:ref={modalElement}
+    class={`sm:max-w-[580px] max-h-[calc(100vh-16vh)] p-0 gap-0 overflow-hidden flex flex-col border-2 ${dragOver ? 'border-[var(--ui-accent)] bg-[color-mix(in_srgb,var(--ui-accent)_5%,var(--bg-chrome))]' : 'border-transparent'} transition-colors`}
+    showCloseButton={false}
   >
+    <Dialog.Title class="sr-only">New {currentModeInfo.label} session</Dialog.Title>
     <header class="modal-header">
       <div class="mode-switcher" bind:this={modeMenuEl}>
         <button
@@ -433,13 +424,22 @@
           </div>
         {/if}
       </div>
-      <button
-        class="close-btn"
-        onclick={handleClose}
-        title={viewport.showShortcutHints ? 'Close (Esc)' : 'Close'}
-      >
-        <X size={18} />
-      </button>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <Button
+              {...props}
+              variant="ghost"
+              size="icon"
+              class="size-7 shrink-0 text-muted-foreground hover:bg-[var(--bg-hover)] hover:text-foreground max-[640px]:size-10 [&_svg]:!size-[18px]"
+              onclick={handleClose}
+            >
+              <X size={18} />
+            </Button>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content>{viewport.showShortcutHints ? 'Close (Esc)' : 'Close'}</Tooltip.Content>
+      </Tooltip.Root>
     </header>
 
     <form class="modal-body" onsubmit={handleSubmit}>
@@ -481,12 +481,19 @@
       <div class="form-actions">
         <AgentSelector disabled={starting} {remote} dropUp />
         <div class="form-actions-right">
-          <button type="button" class="cancel-btn" onclick={handleClose} disabled={starting}>
+          <Button
+            type="button"
+            variant="outline"
+            class="gap-1.5 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground max-[640px]:h-11 max-[640px]:flex-1 max-[640px]:justify-center"
+            onclick={handleClose}
+            disabled={starting}
+          >
             Cancel
-          </button>
-          <button
+          </Button>
+          <Button
             type="submit"
-            class="submit-btn"
+            variant="outline"
+            class="gap-1.5 px-4 py-2 text-sm font-medium max-[640px]:h-11 max-[640px]:flex-1 max-[640px]:justify-center"
             disabled={starting || (!isReview && !prompt.trim())}
           >
             {#if starting}
@@ -496,47 +503,14 @@
               <Send size={14} />
               {willQueue ? 'Queue' : 'Start'}
             {/if}
-          </button>
+          </Button>
         </div>
       </div>
     </form>
-  </div>
-</div>
+  </Dialog.Content>
+</Dialog.Root>
 
 <style>
-  .modal-backdrop {
-    position: fixed;
-    inset: 0;
-    background: var(--shadow-overlay);
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    padding-top: 12vh;
-    z-index: 1000;
-  }
-
-  .modal {
-    display: flex;
-    flex-direction: column;
-    width: 580px;
-    max-width: 90vw;
-    max-height: calc(100vh - 12vh - 4vh);
-    background: var(--bg-chrome);
-    border: 2px solid transparent;
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: var(--shadow-elevated);
-    transition:
-      border-color 0.15s,
-      background-color 0.15s;
-  }
-
-  /* Drag-and-drop highlight */
-  .modal.drag-over {
-    border-color: var(--ui-accent);
-    background-color: color-mix(in srgb, var(--ui-accent) 5%, var(--bg-chrome));
-  }
-
   /* Header */
   .modal-header {
     display: flex;
@@ -642,26 +616,6 @@
     flex-shrink: 0;
   }
 
-  .close-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 6px;
-    background: none;
-    border: none;
-    border-radius: 6px;
-    color: var(--text-muted);
-    cursor: pointer;
-    transition:
-      color 0.1s,
-      background-color 0.1s;
-  }
-
-  .close-btn:hover {
-    color: var(--text-primary);
-    background: var(--bg-hover);
-  }
-
   /* Body */
   .modal-body {
     padding: 18px;
@@ -744,77 +698,15 @@
     gap: 8px;
   }
 
-  .cancel-btn,
-  .submit-btn {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 16px;
-    border-radius: 6px;
-    font-size: var(--size-sm);
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.15s;
-  }
-
-  .cancel-btn {
-    background: transparent;
-    border: 1px solid var(--border-muted);
-    color: var(--text-muted);
-  }
-
-  .cancel-btn:hover:not(:disabled) {
-    border-color: var(--border-emphasis);
-    color: var(--text-primary);
-  }
-
-  .submit-btn {
-    background: var(--ui-accent);
-    border: none;
-    color: var(--bg-deepest);
-  }
-
-  .submit-btn:hover:not(:disabled) {
-    background: var(--ui-accent-hover);
-  }
-
-  .submit-btn:disabled,
-  .cancel-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
   @media (max-width: 640px) {
-    .modal-backdrop {
-      align-items: stretch;
-      padding-top: 0;
-    }
-
-    .modal {
-      width: 100vw;
-      max-width: none;
-      height: 100vh;
-      height: 100dvh;
-      max-height: none;
-      border-radius: 0;
-      box-shadow: none;
-    }
-
     .modal-header {
       padding: 12px 16px;
     }
 
-    .mode-switcher-btn,
-    .close-btn {
+    .mode-switcher-btn {
       min-height: 40px;
     }
 
-    .close-btn {
-      width: 40px;
-      padding: 0;
-      justify-content: center;
-    }
-
     .modal-body {
       padding: 16px;
     }
@@ -837,12 +729,5 @@
     .form-actions-right {
       width: 100%;
     }
-
-    .cancel-btn,
-    .submit-btn {
-      flex: 1;
-      justify-content: center;
-      min-height: 44px;
-    }
   }
 </style>
diff --git a/apps/staged/src/lib/features/sessions/PipelineSteps.svelte b/apps/staged/src/lib/features/sessions/PipelineSteps.svelte
index efdea6b12..f4a40d292 100644
--- a/apps/staged/src/lib/features/sessions/PipelineSteps.svelte
+++ b/apps/staged/src/lib/features/sessions/PipelineSteps.svelte
@@ -7,8 +7,14 @@
 -->
 <script lang="ts">
   import { onMount, onDestroy, untrack } from 'svelte';
-  import { Bot, Check, X, Circle, Minus } from 'lucide-svelte';
+  import Bot from '@lucide/svelte/icons/bot';
+  import Check from '@lucide/svelte/icons/check';
+  import X from '@lucide/svelte/icons/x';
+  import Circle from '@lucide/svelte/icons/circle';
+  import Minus from '@lucide/svelte/icons/minus';
   import Spinner from '../../shared/Spinner.svelte';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
   import { listenToEvent, type UnlistenFn } from '../../transport';
   import type { PipelineExecution, PipelineStepStatus, PipelineStepPayload } from '../../types';
   import { formatPipelineStepDuration } from './pipelineDuration';
@@ -112,36 +118,44 @@
 <div class="pipeline-steps">
   {#each steps as step, idx}
     <div class="step" class:expanded={expandedSteps.has(idx)}>
-      <button
-        type="button"
-        class="step-header"
-        onclick={() => toggleStep(idx)}
-        title={step.stepType === 'ai_handoff' ? 'AI session starts here' : undefined}
-      >
-        <span class="step-icon">
-          {#if showsAiHandoffIcon(step)}
-            <Bot size={14} class="icon-ai-handoff" />
-          {:else if step.status === 'pending'}
-            <Circle size={14} class="icon-pending" />
-          {:else if step.status === 'running'}
-            <Spinner size={14} />
-          {:else if step.status === 'succeeded'}
-            <Check size={14} class="icon-succeeded" />
-          {:else if step.status === 'failed'}
-            <X size={14} class="icon-failed" />
-          {:else if step.status === 'skipped'}
-            <Minus size={14} class="icon-skipped" />
-          {/if}
-        </span>
-        <span class="step-label">{step.label}</span>
-        {#if step.stepType === 'ai_handoff'}
-          <span class="step-kind">AI</span>
-        {:else}
-          <span class="step-duration">
-            {formatPipelineStepDuration(step.startedAt, step.completedAt, now)}
-          </span>
-        {/if}
-      </button>
+      <Tooltip.Root disabled={step.stepType !== 'ai_handoff'}>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <Button
+              {...props}
+              variant="ghost"
+              type="button"
+              class="flex h-auto w-full items-center justify-start gap-2 rounded px-0 py-1 text-[13px] font-normal text-foreground shadow-none hover:bg-[var(--bg-hover)] hover:text-foreground"
+              onclick={() => toggleStep(idx)}
+            >
+              <span class="step-icon">
+                {#if showsAiHandoffIcon(step)}
+                  <Bot size={14} class="icon-ai-handoff" />
+                {:else if step.status === 'pending'}
+                  <Circle size={14} class="icon-pending" />
+                {:else if step.status === 'running'}
+                  <Spinner size={14} />
+                {:else if step.status === 'succeeded'}
+                  <Check size={14} class="icon-succeeded" />
+                {:else if step.status === 'failed'}
+                  <X size={14} class="icon-failed" />
+                {:else if step.status === 'skipped'}
+                  <Minus size={14} class="icon-skipped" />
+                {/if}
+              </span>
+              <span class="step-label">{step.label}</span>
+              {#if step.stepType === 'ai_handoff'}
+                <span class="step-kind">AI</span>
+              {:else}
+                <span class="step-duration">
+                  {formatPipelineStepDuration(step.startedAt, step.completedAt, now)}
+                </span>
+              {/if}
+            </Button>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content>AI session starts here</Tooltip.Content>
+      </Tooltip.Root>
       {#if expandedSteps.has(idx) && (step.output || step.error)}
         <div class="step-output">
           <pre>{step.output ?? ''}{#if step.error}
@@ -162,25 +176,6 @@
     margin-bottom: 2px;
   }
 
-  .step-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-    padding: 4px 0;
-    border: none;
-    background: none;
-    color: var(--text-primary);
-    cursor: pointer;
-    font-size: 13px;
-    text-align: left;
-  }
-
-  .step-header:hover {
-    background: var(--bg-hover);
-    border-radius: 4px;
-  }
-
   .step-icon {
     display: flex;
     align-items: center;
diff --git a/apps/staged/src/lib/features/sessions/SessionLauncher.svelte b/apps/staged/src/lib/features/sessions/SessionLauncher.svelte
index 8c9c0d7c4..787e91511 100644
--- a/apps/staged/src/lib/features/sessions/SessionLauncher.svelte
+++ b/apps/staged/src/lib/features/sessions/SessionLauncher.svelte
@@ -11,15 +11,24 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import { listenToEvent, type UnlistenFn } from '../../transport';
-  import { Plus, X, CheckCircle, AlertCircle, Ban, Eye, Trash2 } from 'lucide-svelte';
+  import Plus from '@lucide/svelte/icons/plus';
+  import X from '@lucide/svelte/icons/x';
+  import CheckCircle from '@lucide/svelte/icons/check-circle';
+  import AlertCircle from '@lucide/svelte/icons/alert-circle';
+  import Ban from '@lucide/svelte/icons/ban';
+  import Eye from '@lucide/svelte/icons/eye';
+  import Trash2 from '@lucide/svelte/icons/trash-2';
   import type { Session, SessionStatus, SessionStatusPayload } from '../../types';
   import { startSession, deleteSession } from '../../api/commands';
   import SessionModal from './SessionModal.svelte';
   import Spinner from '../../shared/Spinner.svelte';
   import { agentState } from '../agents/agent.svelte';
   import { getPreferredAgent } from '../settings/preferences.svelte';
-  import { alerts } from '../../shared/alerts.svelte';
+  import { toast } from 'svelte-sonner';
   import { sessionRegistry } from '../../stores/sessionRegistry.svelte';
+  import { Input } from '$lib/components/ui/input';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
 
   interface Props {
     onClose: () => void;
@@ -92,11 +101,9 @@
       sessions = [...sessions, s];
       prompt = '';
     } catch (e) {
-      alerts.show({
-        tone: 'error',
-        title: 'Unable to start session',
-        message: e instanceof Error ? e.message : String(e),
-        durationMs: 0,
+      toast.error('Unable to start session', {
+        description: e instanceof Error ? e.message : String(e),
+        duration: Infinity,
       });
     } finally {
       creating = false;
@@ -119,11 +126,9 @@
       closeModal(id);
       sessions = sessions.filter((s) => s.id !== id);
     } catch (e) {
-      alerts.show({
-        tone: 'error',
-        title: 'Unable to delete session',
-        message: e instanceof Error ? e.message : String(e),
-        durationMs: 0,
+      toast.error('Unable to delete session', {
+        description: e instanceof Error ? e.message : String(e),
+        duration: Infinity,
       });
     }
   }
@@ -161,33 +166,56 @@
 <div class="launcher">
   <div class="launcher-header">
     <span class="launcher-title">Sessions</span>
-    <button class="icon-btn" onclick={onClose} title="Close">
-      <X size={14} />
-    </button>
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        {#snippet child({ props })}
+          <Button
+            {...props}
+            variant="ghost"
+            size="icon"
+            class="size-7 rounded-md text-muted-foreground hover:bg-[var(--bg-hover)] hover:text-foreground [&_svg]:!size-3.5"
+            onclick={onClose}
+          >
+            <X size={14} />
+          </Button>
+        {/snippet}
+      </Tooltip.Trigger>
+      <Tooltip.Content>Close</Tooltip.Content>
+    </Tooltip.Root>
   </div>
 
   <!-- Create form -->
   <div class="create-row">
-    <input
+    <Input
       type="text"
-      class="create-input"
       placeholder="Session prompt…"
       bind:value={prompt}
       onkeydown={handleKeydown}
       disabled={creating}
+      class="flex-1"
     />
-    <button
-      class="icon-btn accent"
-      onclick={handleCreate}
-      disabled={creating || !prompt.trim()}
-      title="Create session"
-    >
-      {#if creating}
-        <Spinner size={14} />
-      {:else}
-        <Plus size={14} />
-      {/if}
-    </button>
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        {#snippet child({ props })}
+          <span {...props} class="inline-flex">
+            <Button
+              variant="ghost"
+              size="icon"
+              class="size-7 rounded-md text-[var(--ui-accent)] hover:bg-[var(--bg-hover)] hover:text-[var(--ui-accent)] [&_svg]:!size-3.5"
+              onclick={handleCreate}
+              disabled={creating || !prompt.trim()}
+            >
+              {#if creating}
+                <Spinner size={14} />
+              {:else}
+                <Plus size={14} />
+              {/if}
+            </Button>
+          </span>
+        {/snippet}
+      </Tooltip.Trigger>
+      <Tooltip.Content>Create session</Tooltip.Content>
+    </Tooltip.Root>
   </div>
 
   <!-- Session list -->
@@ -208,21 +236,40 @@
             <span class="session-id">{s.id.slice(0, 8)}</span>
           </div>
           <div class="session-actions">
-            <button
-              class="mini-btn"
-              onclick={() => openModal(s.id)}
-              title="Open session viewer"
-              disabled={openModals.has(s.id)}
-            >
-              <Eye size={12} />
-            </button>
-            <button
-              class="mini-btn danger"
-              onclick={() => handleDelete(s.id)}
-              title="Delete session"
-            >
-              <Trash2 size={12} />
-            </button>
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                {#snippet child({ props })}
+                  <span {...props} class="inline-flex">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      class="size-[22px] rounded text-muted-foreground hover:bg-[var(--bg-hover)] hover:text-foreground [&_svg]:!size-3"
+                      onclick={() => openModal(s.id)}
+                      disabled={openModals.has(s.id)}
+                    >
+                      <Eye size={12} />
+                    </Button>
+                  </span>
+                {/snippet}
+              </Tooltip.Trigger>
+              <Tooltip.Content>Open session viewer</Tooltip.Content>
+            </Tooltip.Root>
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                {#snippet child({ props })}
+                  <Button
+                    {...props}
+                    variant="ghost"
+                    size="icon"
+                    class="size-[22px] rounded text-muted-foreground hover:bg-[var(--bg-hover)] hover:text-destructive [&_svg]:!size-3"
+                    onclick={() => handleDelete(s.id)}
+                  >
+                    <Trash2 size={12} />
+                  </Button>
+                {/snippet}
+              </Tooltip.Trigger>
+              <Tooltip.Content>Delete session</Tooltip.Content>
+            </Tooltip.Root>
           </div>
         </div>
       {/each}
@@ -232,9 +279,12 @@
   {/if}
 </div>
 
-<!-- Open SessionModals — one per open session, stacked -->
+<!-- Open SessionModals — one per open session, stacked.
+     Each modal is keyed and conditionally mounted by {#each}; bits-ui exit
+     animations don't play here since closeModal removes the entry outright. -->
 {#each [...openModals] as modalSessionId (modalSessionId)}
   <SessionModal
+    open={true}
     sessionId={modalSessionId}
     repoDir={null}
     onClose={() => closeModal(modalSessionId)}
@@ -278,25 +328,6 @@
     padding: 10px 14px;
   }
 
-  .create-input {
-    flex: 1;
-    padding: 6px 10px;
-    background: var(--bg-primary);
-    border: 1px solid var(--border-muted);
-    border-radius: 6px;
-    color: var(--text-primary);
-    font-size: var(--size-md);
-  }
-
-  .create-input::placeholder {
-    color: var(--text-faint);
-  }
-
-  .create-input:focus {
-    outline: none;
-    border-color: var(--border-emphasis);
-  }
-
   /* Session list */
   .session-list {
     max-height: 240px;
@@ -368,73 +399,6 @@
     flex-shrink: 0;
   }
 
-  /* Buttons */
-  .icon-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    background: none;
-    border: none;
-    border-radius: 6px;
-    color: var(--text-muted);
-    cursor: pointer;
-    transition:
-      color 0.1s,
-      background-color 0.1s;
-  }
-
-  .icon-btn:hover {
-    color: var(--text-primary);
-    background: var(--bg-hover);
-  }
-
-  .icon-btn:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  .icon-btn.accent {
-    color: var(--ui-accent);
-  }
-
-  .icon-btn.accent:hover {
-    background: var(--bg-hover);
-  }
-
-  .mini-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 22px;
-    height: 22px;
-    padding: 0;
-    background: none;
-    border: none;
-    border-radius: 4px;
-    color: var(--text-muted);
-    cursor: pointer;
-    transition:
-      color 0.1s,
-      background-color 0.1s;
-  }
-
-  .mini-btn:hover {
-    color: var(--text-primary);
-    background: var(--bg-hover);
-  }
-
-  .mini-btn:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
-
-  .mini-btn.danger:hover {
-    color: var(--ui-danger);
-  }
-
   .empty-hint {
     padding: 16px 14px;
     text-align: center;
diff --git a/apps/staged/src/lib/features/sessions/SessionModal.svelte b/apps/staged/src/lib/features/sessions/SessionModal.svelte
index 2396127f2..5e5ce9ffd 100644
--- a/apps/staged/src/lib/features/sessions/SessionModal.svelte
+++ b/apps/staged/src/lib/features/sessions/SessionModal.svelte
@@ -26,23 +26,21 @@
 <script lang="ts">
   import { onMount, onDestroy, tick, untrack } from 'svelte';
   import { slide } from 'svelte/transition';
-  import {
-    X,
-    AlertCircle,
-    Info,
-    CircleStop,
-    Send,
-    Copy,
-    Check,
-    ChevronRight,
-    ChevronDown,
-    Zap,
-    GitBranch,
-    FileText,
-    Paperclip,
-    ImagePlus,
-    Plus,
-  } from 'lucide-svelte';
+  import X from '@lucide/svelte/icons/x';
+  import AlertCircle from '@lucide/svelte/icons/alert-circle';
+  import Info from '@lucide/svelte/icons/info';
+  import CircleStop from '@lucide/svelte/icons/circle-stop';
+  import Send from '@lucide/svelte/icons/send';
+  import Copy from '@lucide/svelte/icons/copy';
+  import Check from '@lucide/svelte/icons/check';
+  import ChevronRight from '@lucide/svelte/icons/chevron-right';
+  import ChevronDown from '@lucide/svelte/icons/chevron-down';
+  import Zap from '@lucide/svelte/icons/zap';
+  import GitBranch from '@lucide/svelte/icons/git-branch';
+  import FileText from '@lucide/svelte/icons/file-text';
+  import Paperclip from '@lucide/svelte/icons/paperclip';
+  import ImagePlus from '@lucide/svelte/icons/image-plus';
+  import Plus from '@lucide/svelte/icons/plus';
   import Spinner from '../../shared/Spinner.svelte';
   import { marked } from 'marked';
   import { sanitize } from '../../shared/sanitize';
@@ -65,7 +63,10 @@
     buildBranchHashtagItems,
     renderHashtagTokens as renderHashtagTokensShared,
   } from './hashtagItems';
-  import { createBackdropDismissHandlers } from '../../shared/backdropDismiss';
+  import * as Dialog from '$lib/components/ui/dialog';
+  import * as Alert from '$lib/components/ui/alert';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
   import { subscribeDragDrop } from '../branches/dragDrop';
   import {
     isImageFile,
@@ -101,6 +102,7 @@
   marked.setOptions({ breaks: true, gfm: true });
 
   interface Props {
+    open: boolean;
     sessionId: string;
     onClose: () => void;
     /** Display roots — tool call paths within them are shown as relative. */
@@ -117,6 +119,7 @@
   }
 
   let {
+    open,
     sessionId,
     onClose,
     repoDir,
@@ -141,7 +144,6 @@
   let pollTimer: ReturnType<typeof setInterval> | null = null;
   let pollInFlight = false;
   let closed = false;
-  let dismissing = $state(false);
 
   let inputText = $state('');
   let messageQueue = $state<string[]>([]);
@@ -207,7 +209,7 @@
 
   // Drag-and-drop state
   let dragOver = $state(false);
-  let modalElement: HTMLDivElement | undefined = $state();
+  let modalElement: HTMLElement | null = $state(null);
 
   // Shared image data cache for both reply previews and message history images.
   // Maps image ID → data URL. Loaded lazily when needed.
@@ -760,7 +762,6 @@
 
   /** Track which XML blocks are expanded */
   let expandedXmlBlocks = $state<Set<string>>(new Set());
-  const backdropDismiss = createBackdropDismissHandlers({ onDismiss: requestClose });
 
   function toggleXmlBlock(key: string) {
     const next = new Set(expandedXmlBlocks);
@@ -772,19 +773,6 @@
     expandedXmlBlocks = next;
   }
 
-  function handleKeydown(e: KeyboardEvent) {
-    // Handle Escape key
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      if (searchVisible) {
-        closeSearch();
-      } else {
-        requestClose();
-      }
-      return;
-    }
-  }
-
   function openSearch() {
     searchVisible = true;
   }
@@ -871,13 +859,14 @@
   function requestClose() {
     if (closed) return;
     closed = true;
-    dismissing = true;
     stopPolling();
-    requestAnimationFrame(() => {
-      onClose();
-    });
+    onClose();
   }
 
+  $effect(() => {
+    if (open) closed = false;
+  });
+
   /** Group consecutive tool_call / tool_result messages into pairs */
   type ToolPair = {
     call: SessionMessage;
@@ -985,33 +974,22 @@
   }
 </script>
 
-<svelte:window onkeydown={handleKeydown} onpaste={handleImagePaste} />
-
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div
-  class="modal-backdrop"
-  class:dismissing
-  role="dialog"
-  aria-modal="true"
-  tabindex="-1"
-  onpointerdown={backdropDismiss.handlePointerDown}
-  onclick={backdropDismiss.handleClick}
-  onkeydown={(e) => e.key === 'Escape' && requestClose()}
->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div
-    bind:this={modalElement}
-    class="modal"
-    class:drag-over={dragOver}
-    role="presentation"
-    onclick={(e) => e.stopPropagation()}
+<svelte:window onpaste={handleImagePaste} />
+
+<Dialog.Root {open} onOpenChange={(v) => !v && requestClose()}>
+  <Dialog.Content
+    bind:ref={modalElement}
+    class={`sm:max-w-[700px] h-[80vh] max-h-[900px] p-0 gap-0 overflow-hidden flex flex-col border-2 ${dragOver ? 'border-[var(--ui-accent)] bg-[color-mix(in_srgb,var(--ui-accent)_5%,var(--bg-chrome))]' : 'border-transparent'} transition-colors`}
+    showCloseButton={false}
   >
     <!-- Header -->
     <header class="modal-header">
       <div class="header-content">
-        <span class="header-title">
+        <Dialog.Title
+          class="text-[var(--size-sm)] font-semibold text-foreground overflow-hidden text-ellipsis whitespace-nowrap"
+        >
           {session?.prompt ? stripXmlTags(session.prompt) || 'Session' : 'Session'}
-        </span>
+        </Dialog.Title>
       </div>
       <InContentSearch
         visible={searchVisible}
@@ -1024,22 +1002,47 @@
       />
       <div class="header-actions">
         {#if noteInfo?.content.trim() && onOpenNote}
-          <button class="header-btn" onclick={() => onOpenNote?.(noteInfo!)} title="Open note">
-            View note
-          </button>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="outline"
+                  size="sm"
+                  class="h-7 shrink-0 px-2.5 text-xs text-muted-foreground hover:bg-[var(--bg-hover)] hover:text-foreground max-[700px]:h-10"
+                  onclick={() => onOpenNote?.(noteInfo!)}
+                >
+                  View note
+                </Button>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>Open note</Tooltip.Content>
+          </Tooltip.Root>
         {/if}
-        <button
-          class="close-btn"
-          onclick={requestClose}
-          title={viewport.showShortcutHints ? 'Close (Esc)' : 'Close'}
-        >
-          <X size={16} />
-        </button>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <Button
+                {...props}
+                variant="ghost"
+                size="icon"
+                class="size-7 shrink-0 text-muted-foreground hover:bg-[var(--bg-hover)] hover:text-foreground max-[700px]:size-10 [&_svg]:!size-4"
+                onclick={requestClose}
+              >
+                <X size={16} />
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content>
+            {viewport.showShortcutHints ? 'Close (Esc)' : 'Close'}
+          </Tooltip.Content>
+        </Tooltip.Root>
       </div>
     </header>
 
     <!-- Messages area -->
-    <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
       class="modal-content"
       bind:this={messagesEl}
@@ -1092,7 +1095,8 @@
                         {@const blockKey = `${group.message.id}-${segIdx}`}
                         {@const isOpen = expandedXmlBlocks.has(blockKey)}
                         <div class="context-card">
-                          <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+                          <!-- svelte-ignore a11y_click_events_have_key_events -->
+                          <!-- svelte-ignore a11y_no_static_element_interactions -->
                           <div class="context-card-header" onclick={() => toggleXmlBlock(blockKey)}>
                             <span class="context-chevron">
                               {#if isOpen}
@@ -1117,7 +1121,7 @@
                 <!-- User prompt bubble -->
                 {#if userText.trim() || (group.message.imageIds && group.message.imageIds.length > 0)}
                   <div class="message-row human-message">
-                    <div class="human-bubble">
+                    <div class="group/bubble human-bubble">
                       {#if userText.trim()}
                         <span class="human-text"
                           >{@html renderHashtagTokens(userText.trim(), hashtagItems)}</span
@@ -1140,37 +1144,55 @@
                           {/each}
                         </div>
                       {/if}
-                      <button
-                        class="copy-btn inline-copy"
-                        onclick={() => copyContent(group.message.content, group.message.id)}
-                        title="Copy message"
-                      >
-                        {#if copiedId === group.message.id}
-                          <Check size={12} />
-                        {:else}
-                          <Copy size={12} />
-                        {/if}
-                      </button>
+                      <Tooltip.Root>
+                        <Tooltip.Trigger>
+                          {#snippet child({ props })}
+                            <Button
+                              {...props}
+                              variant="ghost"
+                              size="icon"
+                              class="absolute top-1.5 right-1.5 size-auto rounded p-[3px] text-[var(--text-faint)] opacity-0 shadow-none transition-opacity hover:bg-[var(--bg-hover)] hover:text-foreground group-hover/bubble:opacity-100 [&_svg]:!size-3"
+                              onclick={() => copyContent(group.message.content, group.message.id)}
+                            >
+                              {#if copiedId === group.message.id}
+                                <Check size={12} />
+                              {:else}
+                                <Copy size={12} />
+                              {/if}
+                            </Button>
+                          {/snippet}
+                        </Tooltip.Trigger>
+                        <Tooltip.Content>Copy message</Tooltip.Content>
+                      </Tooltip.Root>
                     </div>
                   </div>
                 {/if}
               {:else if group.type === 'assistant'}
                 <div class="message-row assistant-message">
-                  <div class="assistant-content">
+                  <div class="group/assistant assistant-content">
                     <div class="markdown-content">
                       {@html renderMarkdown(group.message.content)}
                     </div>
-                    <button
-                      class="copy-btn"
-                      onclick={() => copyContent(group.message.content, group.message.id)}
-                      title="Copy message"
-                    >
-                      {#if copiedId === group.message.id}
-                        <Check size={12} />
-                      {:else}
-                        <Copy size={12} />
-                      {/if}
-                    </button>
+                    <Tooltip.Root>
+                      <Tooltip.Trigger>
+                        {#snippet child({ props })}
+                          <Button
+                            {...props}
+                            variant="ghost"
+                            size="icon"
+                            class="absolute top-0 right-0 size-auto rounded p-[3px] text-[var(--text-faint)] opacity-0 shadow-none transition-opacity hover:bg-[var(--bg-hover)] hover:text-foreground group-hover/assistant:opacity-100 [&_svg]:!size-3"
+                            onclick={() => copyContent(group.message.content, group.message.id)}
+                          >
+                            {#if copiedId === group.message.id}
+                              <Check size={12} />
+                            {:else}
+                              <Copy size={12} />
+                            {/if}
+                          </Button>
+                        {/snippet}
+                      </Tooltip.Trigger>
+                      <Tooltip.Content>Copy message</Tooltip.Content>
+                    </Tooltip.Root>
                   </div>
                 </div>
               {:else}
@@ -1181,7 +1203,8 @@
                       {@const item = vg.items[0]}
                       {@const isExpanded = expandedTools.has(item.pair.call.id)}
                       <div class="tool-card">
-                        <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+                        <!-- svelte-ignore a11y_click_events_have_key_events -->
+                        <!-- svelte-ignore a11y_no_static_element_interactions -->
                         <div
                           class="tool-header"
                           class:tool-header-expandable={!!item.pair.result}
@@ -1219,7 +1242,8 @@
                       {@const verbGroupKey = `${vg.items[0].pair.call.id}-${vg.verb}`}
                       {@const isGroupExpanded = expandedVerbGroups.has(verbGroupKey)}
                       <div class="tool-card">
-                        <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+                        <!-- svelte-ignore a11y_click_events_have_key_events -->
+                        <!-- svelte-ignore a11y_no_static_element_interactions -->
                         <div
                           class="tool-header tool-header-expandable"
                           onclick={() => toggleVerbGroup(verbGroupKey)}
@@ -1236,7 +1260,8 @@
                           {#each vg.items as item}
                             {@const isExpanded = expandedTools.has(item.pair.call.id)}
                             <div class="tool-card tool-card-nested">
-                              <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+                              <!-- svelte-ignore a11y_click_events_have_key_events -->
+                              <!-- svelte-ignore a11y_no_static_element_interactions -->
                               <div
                                 class="tool-header"
                                 class:tool-header-expandable={!!item.pair.result}
@@ -1289,8 +1314,10 @@
 
           {#if noteFollowupLabel}
             <div class="note-followup-row" in:messageSlide>
-              <button
-                class="note-followup-btn"
+              <Button
+                variant="outline"
+                size="sm"
+                class="h-auto gap-1.5 rounded-md border-[var(--border-muted)] bg-[var(--note-bg)] px-3 py-1.5 text-xs font-medium text-[var(--note-color)] shadow-none hover:border-[var(--note-color)] hover:bg-[var(--note-bg-emphasis)] hover:text-[var(--note-color)] disabled:opacity-65"
                 onclick={handleNoteFollowupClick}
                 disabled={sending}
               >
@@ -1300,41 +1327,41 @@
                   <FileText size={13} />
                 {/if}
                 <span>{noteFollowupLabel}</span>
-              </button>
+              </Button>
             </div>
           {/if}
         </div>
       {/if}
 
       {#if session?.status === 'error' && session.errorMessage}
-        <div class="error-banner">
-          <AlertCircle size={14} />
-          <span>{session.errorMessage}</span>
-        </div>
+        <Alert.Root variant="destructive" class="mt-3">
+          <AlertCircle />
+          <Alert.Description>{session.errorMessage}</Alert.Description>
+        </Alert.Root>
       {:else if session && session.status !== 'running' && session.status !== 'queued'}
         {#if isResumableReason(session.completionReason)}
-          <div
-            class="session-end-banner"
-            class:warning={session.completionReason === 'crashed' ||
-              session.completionReason === 'app_quit'}
-            class:neutral={session.completionReason === 'interrupted'}
-          >
-            <Info size={14} />
-            <span>
+          {@const isWarning =
+            session.completionReason === 'crashed' || session.completionReason === 'app_quit'}
+          <Alert.Root class="mt-3">
+            <Info class={isWarning ? 'text-[var(--ui-warning)]' : 'text-[var(--text-muted)]'} />
+            <Alert.Description>
               {session.completionReason === 'crashed'
                 ? 'This session ended unexpectedly.'
                 : session.completionReason === 'app_quit'
                   ? 'This session was interrupted when Staged closed.'
                   : 'You stopped this session.'}
-            </span>
-            <button
-              class="resume-btn"
-              onclick={() => sendMessage('Continue where you left off.')}
-              disabled={sending}
-            >
-              Resume
-            </button>
-          </div>
+            </Alert.Description>
+            <Alert.Action>
+              <Button
+                variant="outline"
+                size="xs"
+                onclick={() => sendMessage('Continue where you left off.')}
+                disabled={sending}
+              >
+                Resume
+              </Button>
+            </Alert.Action>
+          </Alert.Root>
         {/if}
       {/if}
     </div>
@@ -1343,18 +1370,28 @@
     <div class="input-wrapper">
       {#if isPipelinePrelude}
         <div class="input-area pipeline-stop-area">
-          <button
-            class="action-btn stop-btn pipeline-stop-btn"
-            onclick={handleCancel}
-            disabled={cancelling}
-            title="Stop workflow"
-          >
-            {#if cancelling}
-              <Spinner size={16} />
-            {:else}
-              <CircleStop size={16} />
-            {/if}
-          </button>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <span {...props} class="inline-flex">
+                  <Button
+                    variant="destructive"
+                    size="icon"
+                    class="size-9 shrink-0 rounded-[10px] [&_svg]:!size-4"
+                    onclick={handleCancel}
+                    disabled={cancelling}
+                  >
+                    {#if cancelling}
+                      <Spinner size={16} />
+                    {:else}
+                      <CircleStop size={16} />
+                    {/if}
+                  </Button>
+                </span>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>Stop workflow</Tooltip.Content>
+          </Tooltip.Root>
         </div>
       {:else}
         {#if hasQueuedMessages}
@@ -1363,15 +1400,24 @@
               <div class="queue-item">
                 <span class="queue-item-label">Queued</span>
                 <span class="queue-item-text">{msg}</span>
-                <button
-                  class="queue-item-remove"
-                  onclick={() => {
-                    messageQueue = messageQueue.filter((_, idx) => idx !== i);
-                  }}
-                  title="Remove from queue"
-                >
-                  <X size={10} />
-                </button>
+                <Tooltip.Root>
+                  <Tooltip.Trigger>
+                    {#snippet child({ props })}
+                      <Button
+                        {...props}
+                        variant="ghost"
+                        size="icon"
+                        class="size-[18px] shrink-0 rounded text-[var(--text-faint)] hover:bg-[var(--bg-hover)] hover:text-destructive [&_svg]:!size-2.5"
+                        onclick={() => {
+                          messageQueue = messageQueue.filter((_, idx) => idx !== i);
+                        }}
+                      >
+                        <X size={10} />
+                      </Button>
+                    {/snippet}
+                  </Tooltip.Trigger>
+                  <Tooltip.Content>Remove from queue</Tooltip.Content>
+                </Tooltip.Root>
               </div>
             {/each}
           </div>
@@ -1379,27 +1425,49 @@
         {#if canAttachImages && replyImageIds.length > 0}
           <div class="reply-images">
             {#each replyImageIds as imageId}
-              <div class="reply-image-thumb">
+              <div class="group/thumb reply-image-thumb">
                 {#if imagePreviews.get(imageId)}
                   <img src={imagePreviews.get(imageId)} alt="attached" />
                 {:else}
                   <div class="reply-image-placeholder"><ImagePlus size={16} /></div>
                 {/if}
                 {#if !isLive}
-                  <button
-                    class="reply-image-remove"
-                    onclick={() => removeReplyImage(imageId)}
-                    title="Remove image"
-                  >
-                    <X size={10} />
-                  </button>
+                  <Tooltip.Root>
+                    <Tooltip.Trigger>
+                      {#snippet child({ props })}
+                        <Button
+                          {...props}
+                          variant="ghost"
+                          size="icon"
+                          class="absolute top-0.5 right-0.5 size-4 rounded-full bg-[var(--bg-deepest)] text-muted-foreground opacity-0 shadow-none transition-opacity hover:bg-[var(--bg-chrome)] hover:text-foreground group-hover/thumb:opacity-100 [&_svg]:!size-2.5"
+                          onclick={() => removeReplyImage(imageId)}
+                        >
+                          <X size={10} />
+                        </Button>
+                      {/snippet}
+                    </Tooltip.Trigger>
+                    <Tooltip.Content>Remove image</Tooltip.Content>
+                  </Tooltip.Root>
                 {/if}
               </div>
             {/each}
             {#if !isLive}
-              <button class="reply-image-add" onclick={openImagePicker} title="Add image">
-                <Plus size={16} />
-              </button>
+              <Tooltip.Root>
+                <Tooltip.Trigger>
+                  {#snippet child({ props })}
+                    <Button
+                      {...props}
+                      variant="outline"
+                      size="icon"
+                      class="size-12 shrink-0 rounded-md border border-dashed border-[var(--border-muted)] bg-transparent text-[var(--text-faint)] shadow-none hover:border-[var(--border-emphasis)] hover:bg-transparent hover:text-muted-foreground [&_svg]:!size-4"
+                      onclick={openImagePicker}
+                    >
+                      <Plus size={16} />
+                    </Button>
+                  {/snippet}
+                </Tooltip.Trigger>
+                <Tooltip.Content>Add image</Tooltip.Content>
+              </Tooltip.Root>
             {/if}
           </div>
         {/if}
@@ -1414,14 +1482,24 @@
               onchange={handleImageFileSelect}
             />
             {#if replyImageIds.length === 0}
-              <button
-                class="attach-btn"
-                onclick={openImagePicker}
-                disabled={isLive}
-                title="Attach image"
-              >
-                <Paperclip size={16} />
-              </button>
+              <Tooltip.Root>
+                <Tooltip.Trigger>
+                  {#snippet child({ props })}
+                    <span {...props} class="inline-flex">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        class="size-9 shrink-0 rounded-[10px] text-muted-foreground hover:bg-[var(--bg-hover)] hover:text-foreground [&_svg]:!size-4"
+                        onclick={openImagePicker}
+                        disabled={isLive}
+                      >
+                        <Paperclip size={16} />
+                      </Button>
+                    </span>
+                  {/snippet}
+                </Tooltip.Trigger>
+                <Tooltip.Content>Attach image</Tooltip.Content>
+              </Tooltip.Root>
             {/if}
           {/if}
           <HashtagInput
@@ -1435,80 +1513,63 @@
             items={hashtagItems}
           />
           {#if isLive}
-            <button
-              class="action-btn stop-btn"
-              onclick={handleCancel}
-              disabled={cancelling}
-              title="Stop session"
-            >
-              {#if cancelling}
-                <Spinner size={16} />
-              {:else}
-                <CircleStop size={16} />
-              {/if}
-            </button>
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                {#snippet child({ props })}
+                  <span {...props} class="inline-flex">
+                    <Button
+                      variant="destructive"
+                      size="icon"
+                      class="size-9 shrink-0 rounded-[10px] [&_svg]:!size-4"
+                      onclick={handleCancel}
+                      disabled={cancelling}
+                    >
+                      {#if cancelling}
+                        <Spinner size={16} />
+                      {:else}
+                        <CircleStop size={16} />
+                      {/if}
+                    </Button>
+                  </span>
+                {/snippet}
+              </Tooltip.Trigger>
+              <Tooltip.Content>Stop session</Tooltip.Content>
+            </Tooltip.Root>
           {:else}
-            <button
-              class="action-btn send-btn"
-              class:sending
-              onclick={handleSend}
-              disabled={sending || !inputText.trim()}
-              title="Send message"
-            >
-              {#if sending}
-                <Spinner size={16} />
-              {:else}
-                <Send size={16} />
-              {/if}
-            </button>
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                {#snippet child({ props })}
+                  <span {...props} class="inline-flex">
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      class="size-9 shrink-0 rounded-[10px] shadow-none disabled:opacity-30 [&_svg]:!size-4"
+                      onclick={handleSend}
+                      disabled={sending || !inputText.trim()}
+                    >
+                      {#if sending}
+                        <Spinner size={16} />
+                      {:else}
+                        <Send size={16} />
+                      {/if}
+                    </Button>
+                  </span>
+                {/snippet}
+              </Tooltip.Trigger>
+              <Tooltip.Content>Send message</Tooltip.Content>
+            </Tooltip.Root>
           {/if}
         </div>
       {/if}
     </div>
-  </div>
-</div>
+  </Dialog.Content>
+</Dialog.Root>
 
 <style>
   /* ======================================================================= */
   /* Modal shell                                                             */
   /* ======================================================================= */
 
-  .modal-backdrop {
-    position: fixed;
-    inset: 0;
-    background: var(--shadow-overlay);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-  }
-
-  .modal-backdrop.dismissing {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  .modal {
-    display: flex;
-    flex-direction: column;
-    width: 700px;
-    height: 80vh;
-    max-height: 900px;
-    background: var(--bg-chrome);
-    border: 2px solid transparent;
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: var(--shadow-elevated);
-    transition:
-      border-color 0.15s,
-      background-color 0.15s;
-  }
-
-  .modal.drag-over {
-    border-color: var(--ui-accent);
-    background-color: color-mix(in srgb, var(--ui-accent) 5%, var(--bg-chrome));
-  }
-
   /* ----- Header ---------------------------------------------------------- */
 
   .modal-header {
@@ -1529,15 +1590,6 @@
     flex: 1;
   }
 
-  .header-title {
-    font-size: var(--size-sm);
-    font-weight: 600;
-    color: var(--text-primary);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
   .header-actions {
     display: flex;
     align-items: center;
@@ -1545,50 +1597,6 @@
     flex-shrink: 0;
   }
 
-  .header-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px 10px;
-    background: none;
-    border: 1px solid var(--border-muted);
-    border-radius: 6px;
-    color: var(--text-muted);
-    cursor: pointer;
-    flex-shrink: 0;
-    font-size: 12px;
-    transition:
-      color 0.1s,
-      background-color 0.1s,
-      border-color 0.1s;
-  }
-
-  .header-btn:hover {
-    color: var(--text-primary);
-    background: var(--bg-hover);
-    border-color: var(--text-muted);
-  }
-
-  .close-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px;
-    background: none;
-    border: none;
-    border-radius: 6px;
-    color: var(--text-muted);
-    cursor: pointer;
-    transition:
-      color 0.1s,
-      background-color 0.1s;
-  }
-
-  .close-btn:hover {
-    color: var(--text-primary);
-    background: var(--bg-hover);
-  }
-
   /* ----- Content area (scrollable) --------------------------------------- */
 
   .modal-content {
@@ -1672,18 +1680,6 @@
     white-space: pre-wrap;
   }
 
-  .human-bubble .inline-copy {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    opacity: 0;
-    transition: opacity 0.15s;
-  }
-
-  .human-bubble:hover .inline-copy {
-    opacity: 1;
-  }
-
   /* Images attached to user messages */
   .message-images {
     display: flex;
@@ -1811,39 +1807,6 @@
     padding-right: 28px;
   }
 
-  .assistant-content > .copy-btn {
-    position: absolute;
-    top: 0;
-    right: 0;
-    opacity: 0;
-    transition: opacity 0.15s;
-  }
-
-  .assistant-content:hover > .copy-btn {
-    opacity: 1;
-  }
-
-  /* Copy button base */
-  .copy-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 3px;
-    background: none;
-    border: none;
-    border-radius: 4px;
-    color: var(--text-faint);
-    cursor: pointer;
-    transition:
-      color 0.1s,
-      background-color 0.1s;
-  }
-
-  .copy-btn:hover {
-    color: var(--text-primary);
-    background: var(--bg-hover);
-  }
-
   /* ----- Tool calls ------------------------------------------------------ */
 
   .tool-group {
@@ -1985,95 +1948,6 @@
     padding: 4px 0;
   }
 
-  .note-followup-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    min-height: 30px;
-    padding: 6px 12px;
-    border: 1px solid var(--border-muted);
-    border-radius: 6px;
-    background: var(--note-bg);
-    color: var(--note-color);
-    font-size: var(--size-xs);
-    font-weight: 500;
-    cursor: pointer;
-    transition:
-      background-color 0.1s,
-      border-color 0.1s,
-      color 0.1s;
-  }
-
-  .note-followup-btn:hover:not(:disabled) {
-    border-color: var(--note-color);
-    background: var(--note-bg-emphasis);
-  }
-
-  .note-followup-btn:disabled {
-    cursor: default;
-    opacity: 0.65;
-  }
-
-  /* Error banner */
-  .error-banner {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-top: 12px;
-    padding: 8px 12px;
-    background: var(--ui-danger-bg, rgba(248, 81, 73, 0.1));
-    color: var(--ui-danger);
-    border-radius: 8px;
-    font-size: var(--size-xs);
-    line-height: 1.4;
-  }
-
-  /* Session end banners — softer than error for non-error conditions */
-  .session-end-banner {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-top: 12px;
-    padding: 8px 12px;
-    border-radius: 8px;
-    font-size: var(--size-xs);
-    line-height: 1.4;
-  }
-
-  .session-end-banner.warning {
-    background: var(--ui-warning-bg);
-    color: var(--ui-warning);
-  }
-
-  .resume-btn {
-    margin-left: auto;
-    padding: 4px 12px;
-    border: 1px solid currentColor;
-    border-radius: 6px;
-    background: transparent;
-    color: inherit;
-    font-size: var(--size-xs);
-    font-weight: 500;
-    cursor: pointer;
-    white-space: nowrap;
-    transition: background 0.15s;
-  }
-
-  .resume-btn:hover {
-    background: color-mix(in srgb, currentColor 10%, transparent);
-  }
-
-  .resume-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .session-end-banner.neutral {
-    background: rgba(127, 127, 127, 0.1);
-    color: var(--text-muted);
-  }
-
   /* ----- Input wrapper + queue popover ----------------------------------- */
 
   .input-wrapper {
@@ -2124,29 +1998,6 @@
     white-space: nowrap;
   }
 
-  .queue-item-remove {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 18px;
-    height: 18px;
-    padding: 0;
-    background: none;
-    border: none;
-    border-radius: 4px;
-    color: var(--text-faint);
-    cursor: pointer;
-    flex-shrink: 0;
-    transition:
-      color 0.1s,
-      background-color 0.1s;
-  }
-
-  .queue-item-remove:hover {
-    color: var(--ui-danger);
-    background: var(--bg-hover);
-  }
-
   /* ----- Reply image previews -------------------------------------------- */
 
   .file-input-hidden {
@@ -2192,57 +2043,6 @@
     color: var(--text-faint);
   }
 
-  .reply-image-remove {
-    position: absolute;
-    top: 2px;
-    right: 2px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    background: var(--bg-deepest);
-    color: var(--text-muted);
-    cursor: pointer;
-    opacity: 0;
-    transition:
-      opacity 0.1s,
-      color 0.1s;
-  }
-
-  .reply-image-thumb:hover .reply-image-remove {
-    opacity: 1;
-  }
-
-  .reply-image-remove:hover {
-    color: var(--text-primary);
-    background: var(--bg-chrome);
-  }
-
-  .reply-image-add {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    border-radius: 6px;
-    border: 1px dashed var(--border-muted);
-    background: none;
-    color: var(--text-faint);
-    cursor: pointer;
-    transition:
-      color 0.1s,
-      border-color 0.1s;
-  }
-
-  .reply-image-add:hover {
-    color: var(--text-muted);
-    border-color: var(--border-emphasis);
-  }
-
   /* ----- Input area ------------------------------------------------------ */
 
   .input-area {
@@ -2259,39 +2059,6 @@
     justify-content: flex-end;
   }
 
-  .stop-btn.pipeline-stop-btn {
-    background: var(--ui-danger);
-    color: var(--bg-deepest);
-  }
-
-  .attach-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    padding: 0;
-    border: none;
-    border-radius: 10px;
-    background: none;
-    color: var(--text-muted);
-    cursor: pointer;
-    flex-shrink: 0;
-    transition:
-      color 0.1s,
-      background-color 0.1s;
-  }
-
-  .attach-btn:hover:not(:disabled) {
-    color: var(--text-primary);
-    background: var(--bg-hover);
-  }
-
-  .attach-btn:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
-
   .input-area :global(.message-input) {
     flex: 1;
     padding: 7px 12px;
@@ -2317,56 +2084,6 @@
     flex: 1;
   }
 
-  .action-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    padding: 0;
-    border: none;
-    border-radius: 10px;
-    cursor: pointer;
-    flex-shrink: 0;
-    transition:
-      background-color 0.15s,
-      opacity 0.15s;
-  }
-
-  .send-btn {
-    background: var(--ui-accent);
-    color: var(--bg-deepest);
-  }
-
-  .send-btn:hover:not(:disabled) {
-    background: var(--ui-accent-hover);
-  }
-
-  .send-btn:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
-
-  .send-btn.sending {
-    opacity: 1;
-    cursor: default;
-  }
-
-  .stop-btn {
-    background: var(--ui-danger-bg, rgba(248, 81, 73, 0.15));
-    color: var(--ui-danger);
-  }
-
-  .stop-btn:hover:not(:disabled) {
-    background: var(--ui-danger);
-    color: white;
-  }
-
-  .stop-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
   /* ======================================================================= */
   /* Markdown content (assistant messages)                                   */
   /* ======================================================================= */
@@ -2470,29 +2187,10 @@
   }
 
   @media (max-width: 700px) {
-    .modal {
-      width: 100vw;
-      height: 100vh;
-      height: 100dvh;
-      max-height: none;
-      border-radius: 0;
-      box-shadow: none;
-    }
-
     .modal-header {
       padding: 12px;
     }
 
-    .header-btn,
-    .close-btn {
-      min-height: 40px;
-    }
-
-    .close-btn {
-      width: 40px;
-      padding: 0;
-    }
-
     .modal-content {
       padding: 12px;
     }
diff --git a/apps/staged/src/lib/features/sessions/hashtagItems.ts b/apps/staged/src/lib/features/sessions/hashtagItems.ts
index 1686bd75c..6354ea7c0 100644
--- a/apps/staged/src/lib/features/sessions/hashtagItems.ts
+++ b/apps/staged/src/lib/features/sessions/hashtagItems.ts
@@ -9,10 +9,10 @@ export const HASHTAG_TOKEN_RE = /#(note|commit|review|project-note|image):([^\s]
  * Inline SVG markup for each hashtag type icon (lucide icons at 12px).
  *
  * NOTE: These raw SVG strings intentionally duplicate the lucide icon paths
- * used via `lucide-svelte` components in the HashtagInput dropdown. This is
+ * used via `@lucide/svelte` components in the HashtagInput dropdown. This is
  * necessary because `renderHashtagTokens` produces a plain HTML string where
  * Svelte components can't render. If you update an icon here, update the
- * corresponding lucide-svelte component import in HashtagInput.svelte too.
+ * corresponding `@lucide/svelte` component import in HashtagInput.svelte too.
  */
 export const hashtagTypeIconSvg: Record<string, string> = {
   note: '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 13H8"/><path d="M16 13h-2"/><path d="M10 17H8"/><path d="M16 17h-2"/></svg>',
diff --git a/apps/staged/src/lib/features/settings/ActionsPreferencesModal.svelte b/apps/staged/src/lib/features/settings/ActionsPreferencesModal.svelte
deleted file mode 100644
index 24a48de57..000000000
--- a/apps/staged/src/lib/features/settings/ActionsPreferencesModal.svelte
+++ /dev/null
@@ -1,127 +0,0 @@
-<script lang="ts">
-  import { X } from 'lucide-svelte';
-  import { createBackdropDismissHandlers } from '../../shared/backdropDismiss';
-  import ActionsSettingsPanel from './ActionsSettingsPanel.svelte';
-
-  interface Props {
-    onClose: () => void;
-  }
-
-  let { onClose }: Props = $props();
-
-  const backdropDismiss = createBackdropDismissHandlers({
-    onDismiss: () => onClose(),
-  });
-</script>
-
-<div
-  class="modal-backdrop"
-  role="dialog"
-  aria-modal="true"
-  tabindex="-1"
-  onpointerdown={backdropDismiss.handlePointerDown}
-  onclick={backdropDismiss.handleClick}
-  onkeydown={(e) => e.key === 'Escape' && onClose()}
->
-  <div class="modal">
-    <header class="modal-header">
-      <h2>Actions Preferences</h2>
-      <button class="close-btn" onclick={onClose}>
-        <X size={16} />
-      </button>
-    </header>
-
-    <div class="modal-body">
-      <ActionsSettingsPanel />
-    </div>
-  </div>
-</div>
-
-<style>
-  .modal-backdrop {
-    position: fixed;
-    inset: 0;
-    background: var(--shadow-overlay);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1200;
-  }
-
-  .modal {
-    width: min(1160px, 94vw);
-    max-height: 88vh;
-    background: var(--bg-chrome);
-    border: 1px solid var(--border-muted);
-    border-radius: 12px;
-    box-shadow: var(--shadow-elevated);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  .modal-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 14px;
-    border-bottom: 1px solid var(--border-subtle);
-  }
-
-  .modal-header h2 {
-    margin: 0;
-    font-size: var(--size-md);
-    font-weight: 600;
-  }
-
-  .close-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border: none;
-    border-radius: 6px;
-    background: transparent;
-    color: var(--text-muted);
-    cursor: pointer;
-  }
-
-  .close-btn:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .modal-body {
-    min-height: 0;
-    flex: 1;
-    padding: 14px;
-    overflow: hidden;
-  }
-
-  @media (max-width: 640px) {
-    .modal-backdrop {
-      align-items: stretch;
-      justify-content: stretch;
-    }
-
-    .modal {
-      width: 100vw;
-      max-height: none;
-      height: 100vh;
-      height: 100dvh;
-      border-radius: 0;
-      box-shadow: none;
-    }
-
-    .close-btn {
-      width: 40px;
-      height: 40px;
-    }
-
-    .modal-body {
-      padding: 12px;
-      overflow: auto;
-    }
-  }
-</style>
diff --git a/apps/staged/src/lib/features/settings/ActionsSettingsPanel.svelte b/apps/staged/src/lib/features/settings/ActionsSettingsPanel.svelte
index 2aab36809..6ed3480cc 100644
--- a/apps/staged/src/lib/features/settings/ActionsSettingsPanel.svelte
+++ b/apps/staged/src/lib/features/settings/ActionsSettingsPanel.svelte
@@ -1,25 +1,27 @@
 <script lang="ts">
   import { onMount, onDestroy, untrack } from 'svelte';
-  import {
-    FolderGit2,
-    Play,
-    Hammer,
-    FlaskConical,
-    Wand2,
-    CheckCircle,
-    Zap,
-    Plus,
-    Trash2,
-    Save,
-    Pencil,
-    Code2,
-    Search,
-  } from 'lucide-svelte';
+  import FolderGit2 from '@lucide/svelte/icons/folder-git-2';
+  import Play from '@lucide/svelte/icons/play';
+  import Hammer from '@lucide/svelte/icons/hammer';
+  import FlaskConical from '@lucide/svelte/icons/flask-conical';
+  import Wand2 from '@lucide/svelte/icons/wand-2';
+  import CheckCircle from '@lucide/svelte/icons/check-circle';
+  import Zap from '@lucide/svelte/icons/zap';
+  import Plus from '@lucide/svelte/icons/plus';
+  import Trash2 from '@lucide/svelte/icons/trash-2';
+  import Save from '@lucide/svelte/icons/save';
+  import Pencil from '@lucide/svelte/icons/pencil';
+  import Code2 from '@lucide/svelte/icons/code-2';
+  import Search from '@lucide/svelte/icons/search';
   import Spinner from '../../shared/Spinner.svelte';
-  import FormInput from '../../shared/FormInput.svelte';
   import RepoLabel from '../../shared/RepoLabel.svelte';
   import RepoBadge from '../../shared/RepoBadge.svelte';
-  import ConfirmDialog from '../../shared/ConfirmDialog.svelte';
+  import { Button } from '$lib/components/ui/button';
+  import { Input } from '$lib/components/ui/input';
+  import * as Select from '$lib/components/ui/select';
+  import * as AlertDialog from '$lib/components/ui/alert-dialog';
+  import { Checkbox } from '$lib/components/ui/checkbox';
+  import { Label } from '$lib/components/ui/label';
   import type { ActionContext, ProjectAction } from '../../api/commands';
   import * as commands from '../../api/commands';
   import {
@@ -29,7 +31,7 @@
   } from '../actions/actions';
   import { repoBadgeStore } from '../../stores/repoBadges.svelte';
   import { matchesRepoSearch } from './repoContextSearch';
-  import { alerts } from '../../shared/alerts.svelte';
+  import { toast } from 'svelte-sonner';
   import { getPreferredAgent } from './preferences.svelte';
   import { agentState } from '../agents/agent.svelte';
 
@@ -329,7 +331,7 @@
       await loadContexts();
     } catch (e) {
       console.error('Failed to detect actions:', e);
-      alerts.error(String(e), 'Failed to detect actions');
+      toast.error('Failed to detect actions', { description: String(e) });
     } finally {
       detecting = false;
     }
@@ -542,7 +544,12 @@
       <div class="sidebar-title">Repos</div>
       <label class="sidebar-search">
         <Search size={14} />
-        <FormInput bind:value={repoSearch} placeholder="Search" aria-label="Search repos" />
+        <Input
+          bind:value={repoSearch}
+          placeholder="Search"
+          aria-label="Search repos"
+          class="min-h-9 px-3 py-2"
+        />
       </label>
       {#if loadingContexts}
         <div class="loading-side"><Spinner size={14} /> Loading...</div>
@@ -661,8 +668,9 @@
         </div>
 
         <div class="actions-header">
-          <button
-            class="danger-btn"
+          <Button
+            variant="destructive"
+            size="sm"
             onclick={() => (showDeleteRepoConfirm = true)}
             disabled={deletingRepo}
           >
@@ -672,20 +680,22 @@
               <Trash2 size={14} />
             {/if}
             Delete Repo
-          </button>
+          </Button>
           {#if selectedContext}
             {#if actions.length > 0}
-              <button
-                class="secondary-btn"
+              <Button
+                variant="outline"
+                size="sm"
                 onclick={() => (showDeleteAllConfirm = true)}
                 disabled={deletingRepo}
               >
                 <Trash2 size={14} />
                 Delete All Actions
-              </button>
+              </Button>
             {/if}
-            <button
-              class="secondary-btn"
+            <Button
+              variant="outline"
+              size="sm"
               onclick={detectActions}
               disabled={detecting || deletingRepo}
             >
@@ -695,11 +705,11 @@
                 <Zap size={14} />
               {/if}
               Detect Actions
-            </button>
-            <button class="primary-btn" onclick={startAddAction} disabled={deletingRepo}>
+            </Button>
+            <Button variant="outline" size="sm" onclick={startAddAction} disabled={deletingRepo}>
               <Plus size={14} />
               Add Action
-            </button>
+            </Button>
           {/if}
         </div>
 
@@ -736,12 +746,21 @@
                         </div>
                       </div>
                       <div class="action-buttons">
-                        <button class="icon-btn" onclick={() => startEditAction(action)}>
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          onclick={() => startEditAction(action)}
+                        >
                           <Pencil size={13} />
-                        </button>
-                        <button class="icon-btn danger" onclick={() => deleteAction(action.id)}>
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          class="hover:text-destructive"
+                          onclick={() => deleteAction(action.id)}
+                        >
                           <Trash2 size={13} />
-                        </button>
+                        </Button>
                       </div>
                     </div>
                   {/each}
@@ -756,8 +775,8 @@
 
   {#if editingAction}
     <div class="editor">
-      <input bind:value={editForm.name} placeholder="Action name" />
-      <input
+      <Input bind:value={editForm.name} placeholder="Action name" />
+      <Input
         bind:value={editForm.command}
         placeholder="Command"
         autocomplete="off"
@@ -765,53 +784,72 @@
         autocapitalize="off"
         spellcheck="false"
       />
-      <select bind:value={editForm.actionType}>
-        <option value="run">run</option>
-        <option value="prerun">prerun</option>
-        <option value="build">build</option>
-        <option value="test">test</option>
-        <option value="format">format</option>
-        <option value="check">check</option>
-        <option value="cleanUp">cleanUp</option>
-      </select>
-      <label class="checkbox-row">
-        <input type="checkbox" bind:checked={editForm.autoCommit} />
-        Auto-commit
-      </label>
+      <Select.Root
+        type="single"
+        value={editForm.actionType}
+        onValueChange={(v) => (editForm.actionType = v as ActionType)}
+      >
+        <Select.Trigger class="w-full">
+          {editForm.actionType}
+        </Select.Trigger>
+        <Select.Content>
+          {#each ['run', 'prerun', 'build', 'test', 'format', 'check', 'cleanUp'] as t (t)}
+            <Select.Item value={t} label={t}>{t}</Select.Item>
+          {/each}
+        </Select.Content>
+      </Select.Root>
+      <div class="flex items-center gap-1.5">
+        <Checkbox id="auto-commit" bind:checked={editForm.autoCommit} />
+        <Label for="auto-commit" class="text-muted-foreground text-sm">Auto-commit</Label>
+      </div>
       <div class="editor-buttons">
-        <button class="secondary-btn" onclick={cancelEdit}>Cancel</button>
-        <button class="primary-btn" onclick={saveAction}>
+        <Button variant="ghost" size="sm" onclick={cancelEdit}>Cancel</Button>
+        <Button variant="outline" size="sm" onclick={saveAction}>
           <Save size={14} />
           Save
-        </button>
+        </Button>
       </div>
     </div>
   {/if}
 </div>
 
-{#if showDeleteRepoConfirm && selectedEntry}
-  <ConfirmDialog
-    title="Delete Repo"
-    message={selectedContextAttachments.length > 0
-      ? `Delete "${repoDisplay(selectedEntry.githubRepo, selectedEntry.subpath)}" from Staged? This removes ${formatProjectCount(selectedContextAttachments.length)} and deletes tracked worktrees/workspaces tied to this repo.`
-      : `Delete "${repoDisplay(selectedEntry.githubRepo, selectedEntry.subpath)}" from Staged? This removes its repo settings and actions.`}
-    confirmLabel="Delete Repo"
-    danger={true}
-    onConfirm={deleteRepo}
-    onCancel={() => (showDeleteRepoConfirm = false)}
-  />
-{/if}
-
-{#if showDeleteAllConfirm}
-  <ConfirmDialog
-    title="Delete All Actions"
-    message="Are you sure you want to delete all actions for this repo? This action cannot be undone."
-    confirmLabel="Delete All"
-    danger={true}
-    onConfirm={deleteAllActions}
-    onCancel={() => (showDeleteAllConfirm = false)}
-  />
-{/if}
+<AlertDialog.Root bind:open={showDeleteRepoConfirm}>
+  <AlertDialog.Content>
+    {#if selectedEntry}
+      <AlertDialog.Header>
+        <AlertDialog.Title>Delete Repo</AlertDialog.Title>
+        <AlertDialog.Description>
+          {selectedContextAttachments.length > 0
+            ? `Delete "${repoDisplay(selectedEntry.githubRepo, selectedEntry.subpath)}" from Staged? This removes ${formatProjectCount(selectedContextAttachments.length)} and deletes tracked worktrees/workspaces tied to this repo.`
+            : `Delete "${repoDisplay(selectedEntry.githubRepo, selectedEntry.subpath)}" from Staged? This removes its repo settings and actions.`}
+        </AlertDialog.Description>
+      </AlertDialog.Header>
+      <AlertDialog.Footer>
+        <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+        <AlertDialog.Action variant="destructive" onclick={deleteRepo}>
+          Delete Repo
+        </AlertDialog.Action>
+      </AlertDialog.Footer>
+    {/if}
+  </AlertDialog.Content>
+</AlertDialog.Root>
+
+<AlertDialog.Root bind:open={showDeleteAllConfirm}>
+  <AlertDialog.Content>
+    <AlertDialog.Header>
+      <AlertDialog.Title>Delete All Actions</AlertDialog.Title>
+      <AlertDialog.Description>
+        Are you sure you want to delete all actions for this repo? This action cannot be undone.
+      </AlertDialog.Description>
+    </AlertDialog.Header>
+    <AlertDialog.Footer>
+      <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+      <AlertDialog.Action variant="destructive" onclick={deleteAllActions}>
+        Delete All
+      </AlertDialog.Action>
+    </AlertDialog.Footer>
+  </AlertDialog.Content>
+</AlertDialog.Root>
 
 <style>
   .actions-settings-panel {
@@ -848,28 +886,6 @@
     color: var(--text-muted);
   }
 
-  .icon-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border: none;
-    border-radius: 6px;
-    background: transparent;
-    color: var(--text-muted);
-    cursor: pointer;
-  }
-
-  .icon-btn:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .icon-btn.danger:hover {
-    color: var(--ui-danger);
-  }
-
   .panel-body {
     display: grid;
     grid-template-columns: 260px 1fr;
@@ -903,13 +919,6 @@
     color: var(--text-faint);
   }
 
-  .sidebar-search :global(.form-input) {
-    min-width: 0;
-    min-height: 36px;
-    padding: 8px 12px;
-    font-size: var(--size-md);
-  }
-
   .context-list {
     display: flex;
     flex-direction: column;
@@ -1126,48 +1135,6 @@
     margin-bottom: 12px;
   }
 
-  .primary-btn,
-  .secondary-btn,
-  .danger-btn {
-    border: 1px solid var(--border-muted);
-    border-radius: 8px;
-    padding: 7px 10px;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    font-size: var(--size-sm);
-    cursor: pointer;
-  }
-
-  .primary-btn {
-    background: var(--ui-accent);
-    border-color: var(--ui-accent);
-    color: white;
-  }
-
-  .secondary-btn {
-    background: var(--bg-primary);
-    color: var(--text-primary);
-  }
-
-  .danger-btn {
-    background: var(--bg-primary);
-    border-color: var(--ui-danger);
-    color: var(--ui-danger);
-  }
-
-  .danger-btn:hover:not(:disabled) {
-    background: var(--ui-danger);
-    color: white;
-  }
-
-  .primary-btn:disabled,
-  .secondary-btn:disabled,
-  .danger-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
   .actions-list {
     display: flex;
     flex-direction: column;
@@ -1233,24 +1200,6 @@
     align-items: center;
   }
 
-  .editor input,
-  .editor select {
-    padding: 8px 10px;
-    border-radius: 8px;
-    border: 1px solid var(--border-muted);
-    background: var(--bg-primary);
-    color: var(--text-primary);
-    min-width: 0;
-  }
-
-  .checkbox-row {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    color: var(--text-muted);
-    font-size: var(--size-sm);
-  }
-
   .editor-buttons {
     display: inline-flex;
     gap: 8px;
@@ -1273,7 +1222,7 @@
       flex-direction: column;
     }
 
-    .actions-header button {
+    .actions-header :global(button) {
       flex: 1 1 auto;
       justify-content: center;
     }
diff --git a/apps/staged/src/lib/features/settings/DoctorSettingsPanel.svelte b/apps/staged/src/lib/features/settings/DoctorSettingsPanel.svelte
index 854e64aa2..108aa367c 100644
--- a/apps/staged/src/lib/features/settings/DoctorSettingsPanel.svelte
+++ b/apps/staged/src/lib/features/settings/DoctorSettingsPanel.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { RefreshCw, Stethoscope, ClipboardCopy, Check } from 'lucide-svelte';
+  import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+  import Stethoscope from '@lucide/svelte/icons/stethoscope';
+  import ClipboardCopy from '@lucide/svelte/icons/clipboard-copy';
+  import Check from '@lucide/svelte/icons/check';
   import Spinner from '../../shared/Spinner.svelte';
   import DoctorCheckRow from '../doctor/DoctorCheckRow.svelte';
   import { doctorState, runChecks, formatDebugReport } from '../doctor/doctor.svelte';
   import { refreshProviders } from '../agents/agent.svelte';
+  import { Button } from '$lib/components/ui/button';
 
   let mounted = true;
 
@@ -58,7 +62,7 @@
 
     <div class="header-actions">
       {#if doctorState.report && !doctorState.loading}
-        <button class="refresh-btn" onclick={copyDebugInfo}>
+        <Button variant="outline" size="sm" onclick={copyDebugInfo}>
           {#if copied}
             <Check size={14} />
             Copied
@@ -66,14 +70,14 @@
             <ClipboardCopy size={14} />
             Copy details
           {/if}
-        </button>
+        </Button>
       {/if}
 
       {#if !doctorState.loading}
-        <button class="refresh-btn" onclick={runChecksAndRefresh}>
+        <Button variant="outline" size="sm" onclick={runChecksAndRefresh}>
           <RefreshCw size={14} />
           Re-run
-        </button>
+        </Button>
       {/if}
     </div>
   </div>
@@ -205,35 +209,6 @@
     flex-shrink: 0;
   }
 
-  .refresh-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 12px;
-    border: 1px solid var(--border-muted);
-    border-radius: 8px;
-    background: transparent;
-    color: var(--text-muted);
-    font-size: var(--size-sm);
-    cursor: pointer;
-    flex-shrink: 0;
-    transition:
-      color 0.1s,
-      border-color 0.1s,
-      background-color 0.1s;
-  }
-
-  .refresh-btn:hover:not(:disabled) {
-    color: var(--text-primary);
-    border-color: var(--border-emphasis);
-    background: color-mix(in srgb, var(--bg-hover) 45%, transparent);
-  }
-
-  .refresh-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
   @media (max-width: 920px) {
     .panel-intro {
       flex-direction: column;
diff --git a/apps/staged/src/lib/features/settings/GeneralSettingsPanel.svelte b/apps/staged/src/lib/features/settings/GeneralSettingsPanel.svelte
index 9bcde4498..d265840d2 100644
--- a/apps/staged/src/lib/features/settings/GeneralSettingsPanel.svelte
+++ b/apps/staged/src/lib/features/settings/GeneralSettingsPanel.svelte
@@ -1,6 +1,12 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { Settings2, Info, Check, ChevronDown } from 'lucide-svelte';
+  import Settings2 from '@lucide/svelte/icons/settings-2';
+  import Info from '@lucide/svelte/icons/info';
+  import Check from '@lucide/svelte/icons/check';
+  import ChevronDown from '@lucide/svelte/icons/chevron-down';
+  import * as Select from '$lib/components/ui/select';
+  import * as Popover from '$lib/components/ui/popover';
+  import { Label } from '$lib/components/ui/label';
   import {
     preferences,
     getAvailableSyntaxThemes,
@@ -32,7 +38,6 @@
           themeFilter === 'light' ? isLightTheme(t.name) : !isLightTheme(t.name)
         )
   );
-  let dropdownRef = $state<HTMLDivElement | null>(null);
 
   const activeColors = $derived(previewColors.get(preferences.syntaxTheme));
 
@@ -40,21 +45,8 @@
     loadAllThemePreviewColors().then((colors) => {
       previewColors = colors;
     });
-
-    function handleClickOutside(e: MouseEvent) {
-      if (dropdownRef && !dropdownRef.contains(e.target as Node)) {
-        dropdownOpen = false;
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
   });
 
-  function handleAutoReviewChange(e: Event) {
-    const select = e.target as HTMLSelectElement;
-    setAutoReviewMode(select.value as AutoReviewMode);
-  }
-
   function handleThemeSelect(name: string) {
     selectSyntaxTheme(name);
     dropdownOpen = false;
@@ -75,68 +67,75 @@
   <div class="panel-body">
     <div class="field">
       <span class="field-label">Theme</span>
-      <div class="theme-dropdown" bind:this={dropdownRef}>
-        <button class="theme-dropdown-trigger" onclick={() => (dropdownOpen = !dropdownOpen)}>
+      <Popover.Root bind:open={dropdownOpen}>
+        <Popover.Trigger class="theme-dropdown-trigger">
           <span class="trigger-swatch" style:background={activeColors?.bg ?? 'var(--bg-primary)'}>
             <span style:color={activeColors?.fg ?? 'var(--text-primary)'}
               >{preferences.syntaxTheme}</span
             >
           </span>
           <ChevronDown size={14} />
-        </button>
-
-        {#if dropdownOpen}
-          <div class="theme-dropdown-panel">
-            <div class="theme-filters">
-              {#each ['all', 'light', 'dark'] as filter (filter)}
-                <button
-                  class="theme-filter-btn"
-                  class:active={themeFilter === filter}
-                  onclick={() => (themeFilter = filter as ThemeFilter)}
-                >
-                  {filter.charAt(0).toUpperCase() + filter.slice(1)}
-                </button>
-              {/each}
-            </div>
-            {#each themes as theme (theme.name)}
-              {@const colors = previewColors.get(theme.name)}
-              {@const isActive = preferences.syntaxTheme === theme.name}
+        </Popover.Trigger>
+        <Popover.Content
+          align="start"
+          sideOffset={4}
+          class="theme-dropdown-panel w-[var(--bits-popover-anchor-width)] ring-0"
+        >
+          <div class="theme-filters">
+            {#each ['all', 'light', 'dark'] as filter (filter)}
               <button
-                class="theme-swatch"
-                class:active={isActive}
-                style:background={colors?.bg ?? 'var(--bg-primary)'}
-                style:border-color={isActive
-                  ? (colors?.comment ?? 'var(--border-emphasis)')
-                  : 'transparent'}
-                onclick={() => handleThemeSelect(theme.name)}
+                class="theme-filter-btn"
+                class:active={themeFilter === filter}
+                onclick={() => (themeFilter = filter as ThemeFilter)}
               >
-                <span class="swatch-name" style:color={colors?.fg ?? 'var(--text-primary)'}
-                  >{theme.name}</span
-                >
-                {#if isActive}
-                  <span class="swatch-check" style:color={colors?.comment ?? 'var(--text-muted)'}>
-                    <Check size={14} />
-                  </span>
-                {/if}
+                {filter.charAt(0).toUpperCase() + filter.slice(1)}
               </button>
             {/each}
           </div>
-        {/if}
-      </div>
+          {#each themes as theme (theme.name)}
+            {@const colors = previewColors.get(theme.name)}
+            {@const isActive = preferences.syntaxTheme === theme.name}
+            <button
+              class="theme-swatch"
+              class:active={isActive}
+              style:background={colors?.bg ?? 'var(--bg-primary)'}
+              style:border-color={isActive
+                ? (colors?.comment ?? 'var(--border-emphasis)')
+                : 'transparent'}
+              onclick={() => handleThemeSelect(theme.name)}
+            >
+              <span class="swatch-name" style:color={colors?.fg ?? 'var(--text-primary)'}
+                >{theme.name}</span
+              >
+              {#if isActive}
+                <span class="swatch-check" style:color={colors?.comment ?? 'var(--text-muted)'}>
+                  <Check size={14} />
+                </span>
+              {/if}
+            </button>
+          {/each}
+        </Popover.Content>
+      </Popover.Root>
     </div>
 
     <div class="field">
-      <label class="field-label" for="auto-review-select">Auto start code reviews</label>
-      <select
-        id="auto-review-select"
-        class="theme-select"
+      <Label for="auto-review-select" class="text-foreground text-sm font-semibold"
+        >Auto start code reviews</Label
+      >
+      <Select.Root
+        type="single"
         value={preferences.autoReviewMode}
-        onchange={handleAutoReviewChange}
+        onValueChange={(v) => setAutoReviewMode(v as AutoReviewMode)}
       >
-        {#each autoReviewOptions as opt (opt.value)}
-          <option value={opt.value}>{opt.label}</option>
-        {/each}
-      </select>
+        <Select.Trigger id="auto-review-select" class="w-full max-w-[320px]">
+          {autoReviewOptions.find((o) => o.value === preferences.autoReviewMode)?.label ?? ''}
+        </Select.Trigger>
+        <Select.Content>
+          {#each autoReviewOptions as opt (opt.value)}
+            <Select.Item value={opt.value} label={opt.label}>{opt.label}</Select.Item>
+          {/each}
+        </Select.Content>
+      </Select.Root>
       <p class="field-description">
         <Info size={12} />
         {#if preferences.autoReviewMode === 'after-changes'}
@@ -220,37 +219,12 @@
     color: var(--text-primary);
   }
 
-  .theme-select {
-    width: 100%;
-    max-width: 320px;
-    padding: 6px 10px;
-    background: var(--bg-primary);
-    border: 1px solid var(--border-muted);
-    border-radius: 5px;
-    color: var(--text-primary);
-    font-size: var(--size-md);
-    cursor: pointer;
-    transition:
-      border-color 0.1s,
-      background-color 0.1s;
-  }
-
-  .theme-select:focus {
-    outline: none;
-    border-color: var(--border-emphasis);
-    background-color: var(--bg-hover);
-  }
-
-  .theme-dropdown {
-    position: relative;
-    max-width: 320px;
-  }
-
-  .theme-dropdown-trigger {
+  :global(.theme-dropdown-trigger) {
     display: flex;
     align-items: center;
     gap: 8px;
     width: 100%;
+    max-width: 320px;
     padding: 0;
     background: none;
     border: 1px solid var(--border-muted);
@@ -264,7 +238,7 @@
       background-color 0.1s;
   }
 
-  .theme-dropdown-trigger:hover {
+  :global(.theme-dropdown-trigger:hover) {
     border-color: var(--border-emphasis);
   }
 
@@ -278,17 +252,13 @@
     border-radius: 4px 0 0 4px;
   }
 
-  .theme-dropdown-trigger :global(svg) {
+  :global(.theme-dropdown-trigger svg) {
     flex-shrink: 0;
     margin-right: 8px;
     color: var(--text-muted);
   }
 
-  .theme-dropdown-panel {
-    position: absolute;
-    top: calc(100% + 4px);
-    left: 0;
-    right: 0;
+  :global(.theme-dropdown-panel) {
     max-height: 320px;
     overflow-y: auto;
     display: flex;
@@ -299,7 +269,6 @@
     border: 1px solid var(--border-muted);
     border-radius: 5px;
     box-shadow: var(--shadow-elevated);
-    z-index: 10;
   }
 
   .theme-filters {
diff --git a/apps/staged/src/lib/features/settings/KeyboardSettingsPanel.svelte b/apps/staged/src/lib/features/settings/KeyboardSettingsPanel.svelte
index f336a2de6..4fbfa8bf6 100644
--- a/apps/staged/src/lib/features/settings/KeyboardSettingsPanel.svelte
+++ b/apps/staged/src/lib/features/settings/KeyboardSettingsPanel.svelte
@@ -1,6 +1,14 @@
 <script lang="ts">
   import { onDestroy, onMount } from 'svelte';
-  import { Keyboard, Pencil, RotateCcw, Save, X } from 'lucide-svelte';
+  import AlertCircle from '@lucide/svelte/icons/alert-circle';
+  import Keyboard from '@lucide/svelte/icons/keyboard';
+  import Pencil from '@lucide/svelte/icons/pencil';
+  import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
+  import Save from '@lucide/svelte/icons/save';
+  import X from '@lucide/svelte/icons/x';
+  import { Button } from '$lib/components/ui/button';
+  import { Badge } from '$lib/components/ui/badge';
+  import * as Alert from '$lib/components/ui/alert';
   import {
     formatShortcutKeys,
     getAllShortcuts,
@@ -253,14 +261,15 @@
       <p>Customize global shortcuts for settings, search, and text size controls.</p>
     </div>
 
-    <button
-      class="reset-all-btn"
+    <Button
+      variant="outline"
+      size="sm"
       disabled={busy || !hasAnyCustomBindings(shortcutGroups)}
       onclick={handleResetAll}
     >
       <RotateCcw size={14} />
       Reset all
-    </button>
+    </Button>
   </div>
 
   <div class="panel-body">
@@ -270,7 +279,10 @@
       <div class="empty-state">No keyboard shortcuts are currently registered.</div>
     {:else}
       {#if error}
-        <div class="error-banner">{error}</div>
+        <Alert.Root variant="destructive">
+          <AlertCircle />
+          <Alert.Description>{error}</Alert.Description>
+        </Alert.Root>
       {/if}
 
       <div class="capture-hint">
@@ -279,7 +291,10 @@
       </div>
 
       {#if captureError}
-        <div class="error-banner">{captureError}</div>
+        <Alert.Root variant="destructive">
+          <AlertCircle />
+          <Alert.Description>{captureError}</Alert.Description>
+        </Alert.Root>
       {/if}
 
       {#each shortcutGroups as group (group.id)}
@@ -294,7 +309,7 @@
                 <div class="shortcut-label-row">
                   <span class="shortcut-description">{shortcut.description}</span>
                   {#if customized}
-                    <span class="custom-badge">Custom</span>
+                    <Badge variant="outline">Custom</Badge>
                   {/if}
                 </div>
 
@@ -333,35 +348,38 @@
 
               <div class="shortcut-actions">
                 {#if editing}
-                  <button
-                    class="action-btn primary"
+                  <Button
+                    variant="outline"
+                    size="xs"
                     onclick={confirmBinding}
                     disabled={busy || !capturedBinding || !!conflictId}
                   >
                     <Save size={12} />
                     Save
-                  </button>
-                  <button class="action-btn" onclick={cancelEditing} disabled={busy}>
+                  </Button>
+                  <Button variant="ghost" size="xs" onclick={cancelEditing} disabled={busy}>
                     <X size={12} />
                     Cancel
-                  </button>
+                  </Button>
                 {:else}
-                  <button
-                    class="action-btn"
+                  <Button
+                    variant="ghost"
+                    size="xs"
                     onclick={() => startEditing(shortcut.id)}
                     disabled={busy}
                   >
                     <Pencil size={12} />
                     Edit
-                  </button>
-                  <button
-                    class="action-btn"
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="xs"
                     onclick={() => handleResetShortcut(shortcut.id)}
                     disabled={busy || !customized}
                   >
                     <RotateCcw size={12} />
                     Reset
-                  </button>
+                  </Button>
                 {/if}
               </div>
             </div>
@@ -495,15 +513,6 @@
     color: var(--text-primary);
   }
 
-  .custom-badge {
-    font-size: calc(var(--size-xs) - 1px);
-    color: var(--text-muted);
-    border: 1px solid var(--border-subtle);
-    border-radius: 999px;
-    padding: 2px 7px;
-    background: color-mix(in srgb, var(--bg-hover) 50%, transparent);
-  }
-
   .shortcut-actions {
     display: flex;
     align-items: center;
@@ -511,39 +520,6 @@
     flex-shrink: 0;
   }
 
-  .action-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    border: 1px solid var(--border-muted);
-    border-radius: 7px;
-    background: transparent;
-    color: var(--text-muted);
-    font-size: calc(var(--size-xs) - 1px);
-    padding: 6px 8px;
-    cursor: pointer;
-    transition:
-      color 0.1s,
-      border-color 0.1s,
-      background-color 0.1s;
-  }
-
-  .action-btn:hover:not(:disabled) {
-    color: var(--text-primary);
-    border-color: var(--border-emphasis);
-    background: color-mix(in srgb, var(--bg-hover) 45%, transparent);
-  }
-
-  .action-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .action-btn.primary {
-    border-color: color-mix(in srgb, var(--ui-accent) 65%, var(--border-muted));
-    color: var(--ui-accent);
-  }
-
   .key-list {
     display: flex;
     align-items: center;
@@ -594,44 +570,6 @@
     color: var(--ui-danger);
   }
 
-  .error-banner {
-    border: 1px solid color-mix(in srgb, var(--ui-danger) 45%, transparent);
-    border-radius: 8px;
-    padding: 8px 10px;
-    color: var(--ui-danger);
-    font-size: var(--size-xs);
-    background: color-mix(in srgb, var(--ui-danger) 12%, transparent);
-  }
-
-  .reset-all-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 12px;
-    border: 1px solid var(--border-muted);
-    border-radius: 8px;
-    background: transparent;
-    color: var(--text-muted);
-    font-size: var(--size-sm);
-    cursor: pointer;
-    flex-shrink: 0;
-    transition:
-      color 0.1s,
-      border-color 0.1s,
-      background-color 0.1s;
-  }
-
-  .reset-all-btn:hover:not(:disabled) {
-    color: var(--text-primary);
-    border-color: var(--border-emphasis);
-    background: color-mix(in srgb, var(--bg-hover) 45%, transparent);
-  }
-
-  .reset-all-btn:disabled {
-    opacity: 0.55;
-    cursor: not-allowed;
-  }
-
   @media (max-width: 920px) {
     .panel-intro {
       flex-direction: column;
diff --git a/apps/staged/src/lib/features/settings/SettingsPage.svelte b/apps/staged/src/lib/features/settings/SettingsPage.svelte
index 321a7f850..dc9c189ee 100644
--- a/apps/staged/src/lib/features/settings/SettingsPage.svelte
+++ b/apps/staged/src/lib/features/settings/SettingsPage.svelte
@@ -1,11 +1,17 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { ArrowLeft, FolderGit2, Keyboard, Settings2, Stethoscope } from 'lucide-svelte';
+  import ArrowLeft from '@lucide/svelte/icons/arrow-left';
+  import FolderGit2 from '@lucide/svelte/icons/folder-git-2';
+  import Keyboard from '@lucide/svelte/icons/keyboard';
+  import Settings2 from '@lucide/svelte/icons/settings-2';
+  import Stethoscope from '@lucide/svelte/icons/stethoscope';
   import { closeSettings, navigation } from '../layout/navigation.svelte';
   import ActionsSettingsPanel from './ActionsSettingsPanel.svelte';
   import DoctorSettingsPanel from './DoctorSettingsPanel.svelte';
   import GeneralSettingsPanel from './GeneralSettingsPanel.svelte';
   import KeyboardSettingsPanel from './KeyboardSettingsPanel.svelte';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
   import { isTauri } from '../../transport';
 
   let appVersion = $state(__APP_VERSION__);
@@ -28,10 +34,17 @@
 
 <div class="settings-page">
   <header class="settings-header">
-    <button class="back-btn" onclick={handleBack} title="Back to workspace">
-      <ArrowLeft size={14} />
-      Back
-    </button>
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        {#snippet child({ props })}
+          <Button {...props} variant="ghost" size="sm" onclick={handleBack}>
+            <ArrowLeft size={14} />
+            Back
+          </Button>
+        {/snippet}
+      </Tooltip.Trigger>
+      <Tooltip.Content>Back to workspace</Tooltip.Content>
+    </Tooltip.Root>
     <div class="header-text">
       <h1>Settings</h1>
       <p class="header-meta">v{appVersion}</p>
@@ -128,30 +141,6 @@
     background: color-mix(in srgb, var(--bg-chrome) 82%, transparent);
   }
 
-  .back-btn {
-    border: 1px solid transparent;
-    border-radius: 8px;
-    background: transparent;
-    color: var(--text-muted);
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 9px;
-    cursor: pointer;
-    flex-shrink: 0;
-    font-size: var(--size-sm);
-    transition:
-      color 0.12s ease,
-      background-color 0.12s ease,
-      border-color 0.12s ease;
-  }
-
-  .back-btn:hover {
-    color: var(--text-primary);
-    background: var(--bg-hover);
-    border-color: color-mix(in srgb, var(--border-subtle) 60%, transparent);
-  }
-
   .header-text {
     min-width: 0;
   }
diff --git a/apps/staged/src/lib/features/settings/ThemeSelectorModal.svelte b/apps/staged/src/lib/features/settings/ThemeSelectorModal.svelte
deleted file mode 100644
index 300eb7979..000000000
--- a/apps/staged/src/lib/features/settings/ThemeSelectorModal.svelte
+++ /dev/null
@@ -1,249 +0,0 @@
-<!--
-  ThemeSelectorModal.svelte - Theme picker dropdown
-
-  Shows all available syntax themes with search, keyboard navigation,
-  and light/dark indicators. Selecting a theme applies it immediately
-  via the adaptive theme system.
--->
-<script lang="ts">
-  import { Search, Sun, Moon } from 'lucide-svelte';
-  import {
-    preferences,
-    getAvailableSyntaxThemes,
-    selectSyntaxTheme,
-    isLightTheme,
-  } from './preferences.svelte';
-
-  interface Props {
-    onClose: () => void;
-  }
-
-  let { onClose }: Props = $props();
-
-  let searchQuery = $state('');
-  let selectedIndex = $state(-1);
-  let searchInputRef = $state<HTMLInputElement | null>(null);
-  let dropdownRef = $state<HTMLDivElement | null>(null);
-  let themeListRef = $state<HTMLDivElement | null>(null);
-
-  // Focus search input and scroll to active theme on mount
-  $effect(() => {
-    searchInputRef?.focus();
-
-    // Scroll the active theme into view
-    if (themeListRef) {
-      const activeItem = themeListRef.querySelector('.theme-item.active');
-      activeItem?.scrollIntoView({ block: 'center' });
-    }
-  });
-
-  // Filter themes based on search
-  let filteredThemes = $derived.by(() => {
-    const themes = getAvailableSyntaxThemes();
-    if (!searchQuery.trim()) return themes;
-    const query = searchQuery.toLowerCase();
-    return themes.filter((t) => t.name.toLowerCase().includes(query));
-  });
-
-  // Reset selection when filter changes
-  $effect(() => {
-    const _ = filteredThemes;
-    selectedIndex = -1;
-  });
-
-  function handleThemeSelect(themeName: string) {
-    selectSyntaxTheme(themeName);
-    onClose();
-  }
-
-  function handleKeydown(event: KeyboardEvent) {
-    if (event.key === 'Escape') {
-      onClose();
-      event.preventDefault();
-    } else if (event.key === 'Enter') {
-      if (
-        filteredThemes.length > 0 &&
-        selectedIndex >= 0 &&
-        selectedIndex < filteredThemes.length
-      ) {
-        handleThemeSelect(filteredThemes[selectedIndex].name);
-        event.preventDefault();
-      }
-    } else if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      selectedIndex = Math.min(selectedIndex + 1, filteredThemes.length - 1);
-    } else if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      if (selectedIndex > 0) {
-        selectedIndex = selectedIndex - 1;
-      }
-    }
-  }
-
-  function handleClickOutside(event: MouseEvent) {
-    const target = event.target as HTMLElement;
-    if (dropdownRef && !dropdownRef.contains(target) && !target.closest('.theme-btn')) {
-      onClose();
-    }
-  }
-</script>
-
-<svelte:window onkeydown={handleKeydown} onclick={handleClickOutside} />
-
-<div class="theme-dropdown" bind:this={dropdownRef}>
-  <div class="search-container">
-    <Search size={14} class="search-icon" />
-    <input
-      bind:this={searchInputRef}
-      type="text"
-      class="search-input"
-      placeholder="Search themes..."
-      bind:value={searchQuery}
-      autocomplete="off"
-      spellcheck="false"
-    />
-  </div>
-
-  <div class="theme-list" bind:this={themeListRef}>
-    {#each filteredThemes as theme, i (theme.name)}
-      <button
-        class="theme-item"
-        class:active={theme.name === preferences.syntaxTheme}
-        class:selected={i === selectedIndex}
-        onclick={() => handleThemeSelect(theme.name)}
-      >
-        <span class="theme-indicator">
-          {#if isLightTheme(theme.name)}
-            <Sun size={12} />
-          {:else}
-            <Moon size={12} />
-          {/if}
-        </span>
-        <span class="theme-name">{theme.name}</span>
-      </button>
-    {:else}
-      <div class="no-results">No themes match "{searchQuery}"</div>
-    {/each}
-  </div>
-</div>
-
-<style>
-  .theme-dropdown {
-    position: fixed;
-    top: 40px;
-    right: 8px;
-    z-index: 1000;
-    background: var(--bg-chrome);
-    border: 1px solid var(--border-muted);
-    border-radius: 8px;
-    box-shadow: var(--shadow-elevated);
-    width: 260px;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  .search-container {
-    position: relative;
-    padding: 8px 10px;
-    border-bottom: 1px solid var(--border-subtle);
-  }
-
-  .search-container :global(.search-icon) {
-    position: absolute;
-    left: 20px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: var(--text-faint);
-    pointer-events: none;
-  }
-
-  .search-input {
-    width: 100%;
-    padding: 6px 8px 6px 30px;
-    background: var(--bg-primary);
-    border: 1px solid var(--border-muted);
-    border-radius: 5px;
-    color: var(--text-primary);
-    font-size: var(--size-md);
-    box-sizing: border-box;
-    transition:
-      border-color 0.1s,
-      background-color 0.1s;
-  }
-
-  .search-input::placeholder {
-    color: var(--text-faint);
-  }
-
-  .search-input:focus {
-    outline: none;
-    border-color: var(--border-emphasis);
-    background-color: var(--bg-hover);
-  }
-
-  .theme-list {
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    max-height: 320px;
-    padding: 4px 0;
-  }
-
-  .theme-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-    padding: 6px 12px;
-    background: none;
-    border: none;
-    color: var(--text-primary);
-    font-size: var(--size-xs);
-    text-align: left;
-    cursor: pointer;
-    transition: background-color 0.1s;
-  }
-
-  .theme-item:hover,
-  .theme-item.selected {
-    background-color: var(--bg-hover);
-  }
-
-  .theme-item.active {
-    background-color: var(--ui-selection);
-    border-left: 2px solid var(--text-primary);
-    padding-left: 10px;
-  }
-
-  .theme-item.active .theme-name {
-    color: var(--text-primary);
-    font-weight: 500;
-  }
-
-  .theme-item.active .theme-indicator {
-    color: var(--text-primary);
-  }
-
-  .theme-indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--text-faint);
-    flex-shrink: 0;
-  }
-
-  .theme-name {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .no-results {
-    padding: 16px 12px;
-    text-align: center;
-    color: var(--text-muted);
-    font-size: var(--size-xs);
-  }
-</style>
diff --git a/apps/staged/src/lib/features/timeline/BranchTimeline.svelte b/apps/staged/src/lib/features/timeline/BranchTimeline.svelte
index 638661673..f632efbf3 100644
--- a/apps/staged/src/lib/features/timeline/BranchTimeline.svelte
+++ b/apps/staged/src/lib/features/timeline/BranchTimeline.svelte
@@ -10,7 +10,10 @@
   import { onDestroy } from 'svelte';
   import type { Snippet } from 'svelte';
   import { slide } from 'svelte/transition';
-  import { FileText, GitCommitVertical, FileSearch, Plus } from 'lucide-svelte';
+  import FileText from '@lucide/svelte/icons/file-text';
+  import GitCommitVertical from '@lucide/svelte/icons/git-commit-vertical';
+  import FileSearch from '@lucide/svelte/icons/file-search';
+  import Plus from '@lucide/svelte/icons/plus';
   import { isResumableReason } from '../../types';
   import type {
     BranchGitState,
@@ -19,8 +22,9 @@
   } from '../../types';
   import type { NoteClickInfo } from '../sessions/noteFreshness';
   import TimelineRow from './TimelineRow.svelte';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
   import type { TimelineItemType, TimelineBadge } from './TimelineRow.svelte';
-  import TimelineContextMenu from './TimelineContextMenu.svelte';
   import { escapeHtml, hasHashtagTokens, renderHashtagTokens } from '../sessions/hashtagItems';
   import {
     formatRelativeTime,
@@ -787,9 +791,6 @@
     items.length === 0 && pendingDropNotes.length === 0 && pendingItems.length === 0
   );
 
-  // ── Context menu (single instance for all rows) ───────────────────────
-  let contextMenuRef: TimelineContextMenu | undefined = $state();
-
   // ── Handlers ──────────────────────────────────────────────────────────
 
   function handleItemClick(item: DisplayItem) {
@@ -920,7 +921,7 @@
           commitSha={item.commitSha}
           hashtagRef={item.hashtagRef}
           showConnector={item.showConnector}
-          onContextMenu={(e) => contextMenuRef?.open(e)}
+          {onNewSessionReferring}
           {onSessionClick}
           onItemClick={() => handleItemClick(item)}
           onDeleteClick={!isDeletable(item) || item.deleteDisabledReason
@@ -1001,7 +1002,7 @@
           commitSha={item.commitSha}
           hashtagRef={item.hashtagRef}
           showConnector={item.showConnector}
-          onContextMenu={(e) => contextMenuRef?.open(e)}
+          {onNewSessionReferring}
           {onSessionClick}
           onItemClick={() => handleItemClick(item)}
           onDeleteClick={!isDeletable(item) || item.deleteDisabledReason
@@ -1031,49 +1032,154 @@
       <div class="footer-row" class:footer-row-enlarged={actionButtonsEnlarged}>
         <div class="footer-left-actions" class:footer-left-actions-enlarged={actionButtonsEnlarged}>
           {#if onNewNote}
-            <button
-              class="add-item-btn note-btn"
-              class:add-item-btn-enlarged={actionButtonsEnlarged}
-              onclick={onNewNote}
-              disabled={newSessionDisabled}
-              title="New note"
-              aria-label="New note"
-            >
-              <FileText class="add-item-icon-default" size={18} />
-              <Plus class="add-item-icon-compact" size={18} />
-              <span class="label-full">New note</span>
-              <span class="label-compact">Note</span>
-            </button>
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                {#snippet child({ props })}
+                  <span
+                    {...props}
+                    class={actionButtonsEnlarged ? 'inline-flex flex-1' : 'inline-flex'}
+                  >
+                    <Button
+                      variant="ghost"
+                      onclick={onNewNote}
+                      disabled={newSessionDisabled}
+                      aria-label="New note"
+                      class={[
+                        'inline-flex items-center font-medium transition-all duration-300 disabled:opacity-30 disabled:cursor-not-allowed',
+                        '[&_svg]:!text-[var(--note-color)] [&_svg]:transition-all [&_svg]:duration-300',
+                        actionButtonsEnlarged
+                          ? 'flex-1 justify-center gap-2 px-1.5 py-2.5 h-auto rounded-lg border border-solid border-transparent bg-[var(--bg-elevated)] text-sm text-[var(--text-muted)] hover:not-disabled:bg-[var(--note-bg)] hover:not-disabled:text-[var(--note-color)] [&_svg]:!size-[18px]'
+                          : 'gap-[5px] px-2.5 py-1 h-auto rounded-md border border-dashed border-[var(--border-subtle)] bg-transparent text-xs text-[var(--text-muted)] hover:not-disabled:border-[var(--note-color)] hover:not-disabled:bg-[var(--note-bg)] hover:not-disabled:text-[var(--note-color)] [&_svg]:!size-[13px] @max-[480px]/timeline:gap-0.5 @max-[480px]/timeline:px-1.5',
+                      ]}
+                    >
+                      <FileText
+                        class={actionButtonsEnlarged
+                          ? ''
+                          : '@max-3xl/timeline:hidden @max-[480px]/timeline:inline-block'}
+                        size={18}
+                      />
+                      <Plus
+                        class={actionButtonsEnlarged
+                          ? 'hidden'
+                          : 'hidden @max-3xl/timeline:inline-block @max-[480px]/timeline:!size-[10px]'}
+                        size={18}
+                      />
+                      <span class={!actionButtonsEnlarged ? '@max-3xl/timeline:hidden' : ''}
+                        >New note</span
+                      >
+                      <span
+                        class={[
+                          'hidden',
+                          !actionButtonsEnlarged &&
+                            '@max-3xl/timeline:inline @max-[480px]/timeline:hidden',
+                        ]}>Note</span
+                      >
+                    </Button>
+                  </span>
+                {/snippet}
+              </Tooltip.Trigger>
+              <Tooltip.Content>New note</Tooltip.Content>
+            </Tooltip.Root>
           {/if}
           {#if onNewCommit}
-            <button
-              class="add-item-btn commit-btn"
-              class:add-item-btn-enlarged={actionButtonsEnlarged}
-              onclick={onNewCommit}
-              disabled={newSessionDisabled}
-              title="New commit"
-              aria-label="New commit"
-            >
-              <GitCommitVertical class="add-item-icon-default" size={18} />
-              <Plus class="add-item-icon-compact" size={18} />
-              <span class="label-full">New commit</span>
-              <span class="label-compact">Commit</span>
-            </button>
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                {#snippet child({ props })}
+                  <span
+                    {...props}
+                    class={actionButtonsEnlarged ? 'inline-flex flex-1' : 'inline-flex'}
+                  >
+                    <Button
+                      variant="ghost"
+                      onclick={onNewCommit}
+                      disabled={newSessionDisabled}
+                      aria-label="New commit"
+                      class={[
+                        'inline-flex items-center font-medium transition-all duration-300 disabled:opacity-30 disabled:cursor-not-allowed',
+                        '[&_svg]:!text-[var(--commit-color)] [&_svg]:transition-all [&_svg]:duration-300',
+                        actionButtonsEnlarged
+                          ? 'flex-1 justify-center gap-2 px-1.5 py-2.5 h-auto rounded-lg border border-solid border-transparent bg-[var(--bg-elevated)] text-sm text-[var(--text-muted)] hover:not-disabled:bg-[var(--commit-bg)] hover:not-disabled:text-[var(--commit-color)] [&_svg]:!size-[18px]'
+                          : 'gap-[5px] px-2.5 py-1 h-auto rounded-md border border-dashed border-[var(--border-subtle)] bg-transparent text-xs text-[var(--text-muted)] hover:not-disabled:border-[var(--commit-color)] hover:not-disabled:bg-[var(--commit-bg)] hover:not-disabled:text-[var(--commit-color)] [&_svg]:!size-[13px] @max-[480px]/timeline:gap-0.5 @max-[480px]/timeline:px-1.5',
+                      ]}
+                    >
+                      <GitCommitVertical
+                        class={actionButtonsEnlarged
+                          ? ''
+                          : '@max-3xl/timeline:hidden @max-[480px]/timeline:inline-block'}
+                        size={18}
+                      />
+                      <Plus
+                        class={actionButtonsEnlarged
+                          ? 'hidden'
+                          : 'hidden @max-3xl/timeline:inline-block @max-[480px]/timeline:!size-[10px]'}
+                        size={18}
+                      />
+                      <span class={!actionButtonsEnlarged ? '@max-3xl/timeline:hidden' : ''}
+                        >New commit</span
+                      >
+                      <span
+                        class={[
+                          'hidden',
+                          !actionButtonsEnlarged &&
+                            '@max-3xl/timeline:inline @max-[480px]/timeline:hidden',
+                        ]}>Commit</span
+                      >
+                    </Button>
+                  </span>
+                {/snippet}
+              </Tooltip.Trigger>
+              <Tooltip.Content>New commit</Tooltip.Content>
+            </Tooltip.Root>
           {/if}
           {#if onNewReview}
-            <button
-              class="add-item-btn review-btn"
-              class:add-item-btn-enlarged={actionButtonsEnlarged}
-              onclick={(e) => onNewReview?.(e)}
-              disabled={newSessionDisabled}
-              title="New code review"
-              aria-label="New code review"
-            >
-              <FileSearch class="add-item-icon-default" size={18} />
-              <Plus class="add-item-icon-compact" size={18} />
-              <span class="label-full">New code review</span>
-              <span class="label-compact">Code review</span>
-            </button>
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                {#snippet child({ props })}
+                  <span
+                    {...props}
+                    class={actionButtonsEnlarged ? 'inline-flex flex-1' : 'inline-flex'}
+                  >
+                    <Button
+                      variant="ghost"
+                      onclick={(e) => onNewReview?.(e)}
+                      disabled={newSessionDisabled}
+                      aria-label="New code review"
+                      class={[
+                        'inline-flex items-center font-medium transition-all duration-300 disabled:opacity-30 disabled:cursor-not-allowed',
+                        '[&_svg]:!text-[var(--review-color)] [&_svg]:transition-all [&_svg]:duration-300',
+                        actionButtonsEnlarged
+                          ? 'flex-1 justify-center gap-2 px-1.5 py-2.5 h-auto rounded-lg border border-solid border-transparent bg-[var(--bg-elevated)] text-sm text-[var(--text-muted)] hover:not-disabled:bg-[var(--review-bg)] hover:not-disabled:text-[var(--review-color)] [&_svg]:!size-[18px]'
+                          : 'gap-[5px] px-2.5 py-1 h-auto rounded-md border border-dashed border-[var(--border-subtle)] bg-transparent text-xs text-[var(--text-muted)] hover:not-disabled:border-[var(--review-color)] hover:not-disabled:bg-[var(--review-bg)] hover:not-disabled:text-[var(--review-color)] [&_svg]:!size-[13px] @max-[480px]/timeline:gap-0.5 @max-[480px]/timeline:px-1.5',
+                      ]}
+                    >
+                      <FileSearch
+                        class={actionButtonsEnlarged
+                          ? ''
+                          : '@max-3xl/timeline:hidden @max-[480px]/timeline:inline-block'}
+                        size={18}
+                      />
+                      <Plus
+                        class={actionButtonsEnlarged
+                          ? 'hidden'
+                          : 'hidden @max-3xl/timeline:inline-block @max-[480px]/timeline:!size-[10px]'}
+                        size={18}
+                      />
+                      <span class={!actionButtonsEnlarged ? '@max-3xl/timeline:hidden' : ''}
+                        >New code review</span
+                      >
+                      <span
+                        class={[
+                          'hidden',
+                          !actionButtonsEnlarged &&
+                            '@max-3xl/timeline:inline @max-[480px]/timeline:hidden',
+                        ]}>Code review</span
+                      >
+                    </Button>
+                  </span>
+                {/snippet}
+              </Tooltip.Trigger>
+              <Tooltip.Content>New code review</Tooltip.Content>
+            </Tooltip.Root>
           {/if}
         </div>
         {#if footerActions && !actionButtonsEnlarged}
@@ -1084,8 +1190,6 @@
   </div>
 {/if}
 
-<TimelineContextMenu bind:this={contextMenuRef} {onNewSessionReferring} />
-
 <style>
   /* ── Timeline ────────────────────────────────────────────────────────── */
 
@@ -1139,146 +1243,4 @@
     gap: 10px;
     flex: 1;
   }
-
-  .add-item-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    padding: 4px 10px;
-    border-radius: 6px;
-    border: 1px dashed var(--border-subtle);
-    background: transparent;
-    color: var(--text-muted);
-    font-size: var(--size-xs);
-    font-weight: 500;
-    cursor: pointer;
-    transition:
-      color 0.15s,
-      border-color 0.15s,
-      background-color 0.15s,
-      padding 0.3s ease,
-      border-radius 0.3s ease,
-      gap 0.3s ease,
-      font-size 0.3s ease,
-      flex 0.3s ease,
-      border-style 0.3s ease;
-  }
-
-  .add-item-btn :global(svg) {
-    transition:
-      width 0.3s ease,
-      height 0.3s ease;
-    width: 13px;
-    height: 13px;
-  }
-
-  .add-item-btn :global(.add-item-icon-compact),
-  .label-compact {
-    display: none;
-  }
-
-  .add-item-btn-enlarged {
-    flex: 1;
-    justify-content: center;
-    gap: 8px;
-    padding: 10px 6px;
-    border-radius: 8px;
-    border-color: transparent;
-    border-style: solid;
-    background: var(--bg-elevated);
-    font-size: var(--size-sm);
-  }
-
-  .add-item-btn-enlarged :global(svg) {
-    width: 18px;
-    height: 18px;
-  }
-
-  .add-item-btn-enlarged.note-btn:hover:not(:disabled) {
-    color: var(--note-color);
-    background-color: var(--note-bg);
-  }
-
-  .add-item-btn-enlarged.commit-btn:hover:not(:disabled) {
-    color: var(--commit-color);
-    background-color: var(--commit-bg);
-  }
-
-  .add-item-btn-enlarged.review-btn:hover:not(:disabled) {
-    color: var(--review-color);
-    background-color: var(--review-bg);
-  }
-
-  /* Colored icons only in passive state */
-  .add-item-btn.note-btn :global(svg) {
-    color: var(--note-color);
-  }
-
-  .add-item-btn.commit-btn :global(svg) {
-    color: var(--commit-color);
-  }
-
-  .add-item-btn.review-btn :global(svg) {
-    color: var(--review-color);
-  }
-
-  .add-item-btn.note-btn:hover:not(:disabled) {
-    color: var(--note-color);
-    border-color: var(--note-color);
-    background-color: var(--note-bg);
-  }
-
-  .add-item-btn.commit-btn:hover:not(:disabled) {
-    color: var(--commit-color);
-    border-color: var(--commit-color);
-    background-color: var(--commit-bg);
-  }
-
-  .add-item-btn.review-btn:hover:not(:disabled) {
-    color: var(--review-color);
-    border-color: var(--review-color);
-    background-color: var(--review-bg);
-  }
-
-  .add-item-btn:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
-
-  @container timeline (max-width: 768px) {
-    .add-item-btn:not(.add-item-btn-enlarged) :global(.add-item-icon-default),
-    .add-item-btn:not(.add-item-btn-enlarged) .label-full {
-      display: none;
-    }
-
-    .add-item-btn:not(.add-item-btn-enlarged) :global(.add-item-icon-compact) {
-      display: block;
-    }
-
-    .add-item-btn:not(.add-item-btn-enlarged) .label-compact {
-      display: inline;
-    }
-  }
-
-  @container timeline (max-width: 480px) {
-    .add-item-btn:not(.add-item-btn-enlarged) :global(.add-item-icon-default) {
-      display: block;
-    }
-
-    .add-item-btn:not(.add-item-btn-enlarged) :global(.add-item-icon-compact) {
-      display: block;
-      width: 10px;
-      height: 10px;
-    }
-
-    .add-item-btn:not(.add-item-btn-enlarged) .label-full,
-    .add-item-btn:not(.add-item-btn-enlarged) .label-compact {
-      display: none;
-    }
-
-    .add-item-btn:not(.add-item-btn-enlarged) {
-      padding: 4px 6px;
-      gap: 2px;
-    }
-  }
 </style>
diff --git a/apps/staged/src/lib/features/timeline/ImageViewerModal.svelte b/apps/staged/src/lib/features/timeline/ImageViewerModal.svelte
index 6998349cd..2ea2c23a7 100644
--- a/apps/staged/src/lib/features/timeline/ImageViewerModal.svelte
+++ b/apps/staged/src/lib/features/timeline/ImageViewerModal.svelte
@@ -5,24 +5,28 @@
   backdrop click dismissal.
 -->
 <script lang="ts">
-  import { X, Trash2 } from 'lucide-svelte';
+  import X from '@lucide/svelte/icons/x';
+  import Trash2 from '@lucide/svelte/icons/trash-2';
+  import * as Dialog from '$lib/components/ui/dialog';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
   import { getImageData } from '../../api/commands';
-  import { createBackdropDismissHandlers } from '../../shared/backdropDismiss';
   import { viewport } from '../../shared/viewport.svelte';
 
   interface Props {
+    open: boolean;
     imageId: string;
     filename: string;
     onClose: () => void;
     onDelete?: () => void;
   }
 
-  let { imageId, filename, onClose, onDelete }: Props = $props();
+  let { open, imageId, filename, onClose, onDelete }: Props = $props();
   let dataUrl = $state<string | null>(null);
   let loading = $state(true);
-  const backdropDismiss = createBackdropDismissHandlers({ onDismiss: () => onClose() });
 
   $effect(() => {
+    if (!open) return;
     loading = true;
     dataUrl = null;
     getImageData(imageId)
@@ -34,46 +38,59 @@
         loading = false;
       });
   });
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      onClose();
-    }
-  }
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<div
-  class="modal-backdrop"
-  role="dialog"
-  aria-modal="true"
-  tabindex="-1"
-  onpointerdown={backdropDismiss.handlePointerDown}
-  onclick={backdropDismiss.handleClick}
->
-  <!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
-  <div class="modal" role="presentation" onclick={(e) => e.stopPropagation()}>
-    <header class="modal-header">
-      <span class="filename">{filename}</span>
+<Dialog.Root {open} onOpenChange={(v) => !v && onClose()}>
+  <Dialog.Content
+    class="max-w-[90vw] max-h-[90vh] w-auto bg-background p-0 gap-0 overflow-hidden border border-[var(--border-subtle)] flex flex-col"
+    showCloseButton={false}
+  >
+    <Dialog.Header
+      class="flex-row items-center justify-between gap-3 px-4 py-3 border-b border-[var(--border-subtle)]"
+    >
+      <Dialog.Title
+        class="flex-1 min-w-0 text-[var(--size-sm)] font-medium text-foreground overflow-hidden text-ellipsis whitespace-nowrap"
+        >{filename}</Dialog.Title
+      >
       <div class="header-actions">
         {#if onDelete}
-          <button class="delete-btn" onclick={onDelete} title="Delete image">
-            <Trash2 size={16} />
-          </button>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="ghost"
+                  size="icon-sm"
+                  onclick={onDelete}
+                  class="size-7 shrink-0 text-muted-foreground hover:bg-[var(--bg-hover)] hover:text-destructive [&_svg]:!size-4"
+                >
+                  <Trash2 size={16} />
+                </Button>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>Delete image</Tooltip.Content>
+          </Tooltip.Root>
         {/if}
-        <button
-          class="close-btn"
-          onclick={onClose}
-          title={viewport.showShortcutHints ? 'Close (Esc)' : 'Close'}
-        >
-          <X size={18} />
-        </button>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <Button
+                {...props}
+                variant="ghost"
+                size="icon-sm"
+                onclick={onClose}
+                class="size-7 shrink-0 text-muted-foreground hover:bg-[var(--bg-hover)] hover:text-foreground [&_svg]:!size-[18px]"
+              >
+                <X size={18} />
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content>
+            {viewport.showShortcutHints ? 'Close (Esc)' : 'Close'}
+          </Tooltip.Content>
+        </Tooltip.Root>
       </div>
-    </header>
+    </Dialog.Header>
     <div class="modal-body">
       {#if loading}
         <div class="placeholder">Loading...</div>
@@ -83,51 +100,10 @@
         <div class="placeholder error">Failed to load image</div>
       {/if}
     </div>
-  </div>
-</div>
+  </Dialog.Content>
+</Dialog.Root>
 
 <style>
-  .modal-backdrop {
-    position: fixed;
-    inset: 0;
-    background: var(--shadow-overlay);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-  }
-
-  .modal {
-    display: flex;
-    flex-direction: column;
-    max-width: 90vw;
-    max-height: 90vh;
-    background: var(--bg-primary);
-    border-radius: 12px;
-    border: 1px solid var(--border-subtle);
-    box-shadow: var(--shadow-elevated);
-    overflow: hidden;
-  }
-
-  .modal-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 16px;
-    border-bottom: 1px solid var(--border-subtle);
-    gap: 12px;
-  }
-
-  .filename {
-    font-size: var(--size-sm);
-    font-weight: 500;
-    color: var(--text-primary);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0;
-  }
-
   .header-actions {
     display: flex;
     align-items: center;
@@ -135,52 +111,6 @@
     flex-shrink: 0;
   }
 
-  .close-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    background: none;
-    border: none;
-    border-radius: 6px;
-    color: var(--text-muted);
-    cursor: pointer;
-    flex-shrink: 0;
-    transition:
-      color 0.15s,
-      background-color 0.15s;
-  }
-
-  .close-btn:hover {
-    color: var(--text-primary);
-    background-color: var(--bg-hover);
-  }
-
-  .delete-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    background: none;
-    border: none;
-    border-radius: 6px;
-    color: var(--text-muted);
-    cursor: pointer;
-    flex-shrink: 0;
-    transition:
-      color 0.15s,
-      background-color 0.15s;
-  }
-
-  .delete-btn:hover {
-    color: var(--ui-danger);
-    background-color: var(--bg-hover);
-  }
-
   .modal-body {
     display: flex;
     align-items: center;
@@ -207,30 +137,4 @@
   .placeholder.error {
     color: var(--ui-danger);
   }
-
-  @media (max-width: 640px) {
-    .modal {
-      width: 100vw;
-      max-width: none;
-      height: 100vh;
-      height: 100dvh;
-      max-height: none;
-      border-radius: 0;
-      box-shadow: none;
-    }
-
-    .close-btn,
-    .delete-btn {
-      width: 40px;
-      height: 40px;
-    }
-
-    .modal-body {
-      padding: 12px;
-    }
-
-    .modal-body img {
-      max-height: calc(100dvh - 80px);
-    }
-  }
 </style>
diff --git a/apps/staged/src/lib/features/timeline/TimelineContextMenu.svelte b/apps/staged/src/lib/features/timeline/TimelineContextMenu.svelte
deleted file mode 100644
index 8ca97d455..000000000
--- a/apps/staged/src/lib/features/timeline/TimelineContextMenu.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<!--
-  TimelineContextMenu.svelte — Shared context menu for timeline rows.
-
-  Rendered once per timeline (not per row) to avoid N window listeners.
-  The parent opens it by calling `open(event)` and provides an
-  `onNewSessionReferring` callback for the hashtag action.
--->
-<script lang="ts">
-  import { tick } from 'svelte';
-  import { Copy, MessageSquarePlus } from 'lucide-svelte';
-  import type { ContextMenuEvent } from './TimelineRow.svelte';
-  import ContextMenu from '../../shared/menu/ContextMenu.svelte';
-  import type { MenuItem } from '../../shared/menu/types';
-
-  interface Props {
-    onNewSessionReferring?: (hashtagRef: string) => void;
-  }
-
-  let { onNewSessionReferring }: Props = $props();
-
-  let contextMenu = $state<ReturnType<typeof ContextMenu> | undefined>();
-
-  function buildItems(event: ContextMenuEvent): MenuItem[] {
-    const items: MenuItem[] = [];
-
-    if (event.commitSha) {
-      items.push({
-        type: 'action',
-        label: 'Copy SHA',
-        icon: Copy,
-        onSelect: () => {
-          navigator.clipboard.writeText(event.commitSha!).catch(() => {});
-        },
-      });
-    }
-
-    if (event.hashtagRef && onNewSessionReferring) {
-      items.push({
-        type: 'action',
-        label: 'New session referring to this',
-        icon: MessageSquarePlus,
-        onSelect: () => {
-          onNewSessionReferring?.(event.hashtagRef!);
-        },
-      });
-    }
-
-    return items;
-  }
-
-  /** Open the context menu. Called by the parent when a row emits onContextMenu. */
-  export async function open(event: ContextMenuEvent) {
-    await tick();
-    contextMenu?.open({
-      x: event.x,
-      y: event.y,
-      items: buildItems(event),
-      ariaLabel: 'Timeline actions',
-    });
-  }
-
-  /** Close the context menu. */
-  export function close() {
-    contextMenu?.close();
-  }
-</script>
-
-<ContextMenu bind:this={contextMenu} ariaLabel="Timeline actions" minWidth={140} />
diff --git a/apps/staged/src/lib/features/timeline/TimelineRow.svelte b/apps/staged/src/lib/features/timeline/TimelineRow.svelte
index 9b53aaf87..1cd83bdf4 100644
--- a/apps/staged/src/lib/features/timeline/TimelineRow.svelte
+++ b/apps/staged/src/lib/features/timeline/TimelineRow.svelte
@@ -5,21 +5,24 @@
   Hover reveals session and delete actions on the right.
 -->
 <script lang="ts">
-  import {
-    GitCommitVertical,
-    FileDiff,
-    FileText,
-    FileSearch,
-    Image as ImageLucide,
-    MessageSquare,
-    Trash2,
-    AlertTriangle,
-    Clock,
-    GitBranch,
-    GitMerge,
-    ChevronsDown,
-  } from 'lucide-svelte';
+  import GitCommitVertical from '@lucide/svelte/icons/git-commit-vertical';
+  import FileDiff from '@lucide/svelte/icons/file-diff';
+  import FileText from '@lucide/svelte/icons/file-text';
+  import FileSearch from '@lucide/svelte/icons/file-search';
+  import ImageLucide from '@lucide/svelte/icons/image';
+  import MessageSquare from '@lucide/svelte/icons/message-square';
+  import MessageSquarePlus from '@lucide/svelte/icons/message-square-plus';
+  import Trash2 from '@lucide/svelte/icons/trash-2';
+  import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
+  import Clock from '@lucide/svelte/icons/clock';
+  import GitBranch from '@lucide/svelte/icons/git-branch';
+  import GitMerge from '@lucide/svelte/icons/git-merge';
+  import ChevronsDown from '@lucide/svelte/icons/chevrons-down';
+  import Copy from '@lucide/svelte/icons/copy';
   import Spinner from '../../shared/Spinner.svelte';
+  import * as ContextMenu from '$lib/components/ui/context-menu';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
 
   export type TimelineItemType =
     | 'commit'
@@ -50,14 +53,6 @@
     count: number;
   };
 
-  /** Data passed to the parent when the user right-clicks a row with context menu actions. */
-  export type ContextMenuEvent = {
-    x: number;
-    y: number;
-    commitSha?: string;
-    hashtagRef?: string;
-  };
-
   interface Props {
     type: TimelineItemType;
     title: string;
@@ -99,8 +94,8 @@
     commitSha?: string;
     /** Hashtag reference token (e.g. "#commit:abc123") for "New session referring to this". */
     hashtagRef?: string;
-    /** Callback when the user right-clicks and this row has context menu actions. */
-    onContextMenu?: (event: ContextMenuEvent) => void;
+    /** Callback invoked when the user picks "New session referring to this" from the context menu. */
+    onNewSessionReferring?: (hashtagRef: string) => void;
   }
 
   let {
@@ -139,7 +134,7 @@
     showConnector = true,
     commitSha,
     hashtagRef,
-    onContextMenu,
+    onNewSessionReferring,
   }: Props = $props();
 
   let isNote = $derived(
@@ -254,230 +249,419 @@
   }
 
   // ── Context menu ────────────────────────────────────────────────────
-  let hasContextMenu = $derived(!!commitSha || !!hashtagRef);
-
-  function handleContextMenu(e: MouseEvent) {
-    if (!hasContextMenu || !onContextMenu) return;
-    e.preventDefault();
-    e.stopPropagation();
-    onContextMenu({ x: e.clientX, y: e.clientY, commitSha, hashtagRef });
-  }
+  let hasContextMenu = $derived(!!commitSha || (!!hashtagRef && !!onNewSessionReferring));
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-  class="timeline-row"
-  class:pending={isPending}
-  class:failed={isFailed}
-  class:clickable={isClickable}
-  class:git-state={isGitState}
-  class:compact={type === 'load-error'}
-  onclick={handleRowClick}
-  oncontextmenu={handleContextMenu}
->
-  <div class="timeline-marker">
-    <div
-      class="timeline-icon"
-      class:commit-icon={type === 'commit' || type === 'pending-commit' || type === 'queued-commit'}
-      class:note-icon={type === 'note' || type === 'generating-note' || type === 'queued-note'}
-      class:review-icon={type === 'review' ||
-        type === 'generating-review' ||
-        type === 'queued-review'}
-      class:image-icon={isImage}
-      class:branch-icon={isGitState}
-      class:warning-icon={type === 'git-warning' || type === 'git-merge-warning'}
-      class:failed-icon={isFailed}
-    >
-      {#if isQueued}
-        <Clock size={12} />
-      {:else if isPending}
-        <Spinner size={12} />
-      {:else if isFailed}
-        <AlertTriangle size={12} />
-      {:else if type === 'git-warning'}
-        <AlertTriangle size={12} />
-      {:else if type === 'git-merge' || type === 'git-merge-warning'}
-        <GitMerge size={12} />
-      {:else if type === 'git-pull'}
-        <ChevronsDown size={12} />
-      {:else if type === 'git-push'}
-        <ChevronsDown size={12} />
-      {:else if type === 'git-diff'}
-        <FileDiff size={12} />
-      {:else if type === 'commit'}
-        <GitCommitVertical size={12} />
-      {:else if isNote}
-        <FileText size={12} />
-      {:else if isReview}
-        <FileSearch size={12} />
-      {:else if isImage}
-        <ImageLucide size={12} />
-      {:else if isGitState}
-        <GitBranch size={12} />
+{#snippet rowBody()}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="timeline-row"
+    class:pending={isPending}
+    class:failed={isFailed}
+    class:clickable={isClickable}
+    class:git-state={isGitState}
+    class:compact={type === 'load-error'}
+    onclick={handleRowClick}
+  >
+    <div class="timeline-marker">
+      <div
+        class="timeline-icon"
+        class:commit-icon={type === 'commit' ||
+          type === 'pending-commit' ||
+          type === 'queued-commit'}
+        class:note-icon={type === 'note' || type === 'generating-note' || type === 'queued-note'}
+        class:review-icon={type === 'review' ||
+          type === 'generating-review' ||
+          type === 'queued-review'}
+        class:image-icon={isImage}
+        class:branch-icon={isGitState}
+        class:warning-icon={type === 'git-warning' || type === 'git-merge-warning'}
+        class:failed-icon={isFailed}
+      >
+        {#if isQueued}
+          <Clock size={12} />
+        {:else if isPending}
+          <Spinner size={12} />
+        {:else if isFailed}
+          <AlertTriangle size={12} />
+        {:else if type === 'git-warning'}
+          <AlertTriangle size={12} />
+        {:else if type === 'git-merge' || type === 'git-merge-warning'}
+          <GitMerge size={12} />
+        {:else if type === 'git-pull'}
+          <ChevronsDown size={12} />
+        {:else if type === 'git-push'}
+          <ChevronsDown size={12} />
+        {:else if type === 'git-diff'}
+          <FileDiff size={12} />
+        {:else if type === 'commit'}
+          <GitCommitVertical size={12} />
+        {:else if isNote}
+          <FileText size={12} />
+        {:else if isReview}
+          <FileSearch size={12} />
+        {:else if isImage}
+          <ImageLucide size={12} />
+        {:else if isGitState}
+          <GitBranch size={12} />
+        {/if}
+      </div>
+      {#if showConnector && !isLast}
+        <div class="timeline-line"></div>
       {/if}
     </div>
-    {#if showConnector && !isLast}
-      <div class="timeline-line"></div>
-    {/if}
-  </div>
-  <div class="timeline-content">
-    <div class="timeline-info">
-      {#if titleHtml}
-        <span class="timeline-title" class:skeleton-title={isPending} class:failed-title={isFailed}
-          >{@html titleHtml}</span
-        >
-      {:else}
-        <span class="timeline-title" class:skeleton-title={isPending} class:failed-title={isFailed}
-          >{title}</span
-        >
-      {/if}
-      {#if meta || secondaryMeta || tertiaryMeta || (badges && badges.length > 0)}
-        <div class="timeline-meta">
-          {#if meta}
-            <span class="meta-item" title={meta}>{meta}</span>
-          {/if}
-          {#if secondaryMeta}
-            <span class="meta-item meta-sha" class:failed-meta={isFailed} title={secondaryMeta}
-              >{secondaryMeta}</span
-            >
-          {/if}
-          {#if tertiaryMeta}
-            <span class="meta-item" title={tertiaryMeta}>{tertiaryMeta}</span>
-          {/if}
-          {#if badges}
-            {#each badges as badge}
-              <span class="meta-badge">
-                {#if badge.icon === 'warning'}
-                  <AlertTriangle size={10} />
-                {:else}
-                  <MessageSquare size={10} />
-                {/if}
-                <span>{badge.count}</span>
-              </span>
-            {/each}
-          {/if}
-        </div>
-      {/if}
+    <div class="timeline-content">
+      <div class="timeline-info">
+        {#if titleHtml}
+          <span
+            class="timeline-title"
+            class:skeleton-title={isPending}
+            class:failed-title={isFailed}>{@html titleHtml}</span
+          >
+        {:else}
+          <span
+            class="timeline-title"
+            class:skeleton-title={isPending}
+            class:failed-title={isFailed}>{title}</span
+          >
+        {/if}
+        {#if meta || secondaryMeta || tertiaryMeta || (badges && badges.length > 0)}
+          <div class="timeline-meta">
+            {#if meta}
+              <Tooltip.Root>
+                <Tooltip.Trigger>
+                  {#snippet child({ props })}
+                    <span class="meta-item" {...props}>{meta}</span>
+                  {/snippet}
+                </Tooltip.Trigger>
+                <Tooltip.Content>{meta}</Tooltip.Content>
+              </Tooltip.Root>
+            {/if}
+            {#if secondaryMeta}
+              <Tooltip.Root>
+                <Tooltip.Trigger>
+                  {#snippet child({ props })}
+                    <span class="meta-item meta-sha" class:failed-meta={isFailed} {...props}
+                      >{secondaryMeta}</span
+                    >
+                  {/snippet}
+                </Tooltip.Trigger>
+                <Tooltip.Content>{secondaryMeta}</Tooltip.Content>
+              </Tooltip.Root>
+            {/if}
+            {#if tertiaryMeta}
+              <Tooltip.Root>
+                <Tooltip.Trigger>
+                  {#snippet child({ props })}
+                    <span class="meta-item" {...props}>{tertiaryMeta}</span>
+                  {/snippet}
+                </Tooltip.Trigger>
+                <Tooltip.Content>{tertiaryMeta}</Tooltip.Content>
+              </Tooltip.Root>
+            {/if}
+            {#if badges}
+              {#each badges as badge}
+                <span class="meta-badge">
+                  {#if badge.icon === 'warning'}
+                    <AlertTriangle size={10} />
+                  {:else}
+                    <MessageSquare size={10} />
+                  {/if}
+                  <span>{badge.count}</span>
+                </span>
+              {/each}
+            {/if}
+          </div>
+        {/if}
+      </div>
+      <div
+        class="timeline-actions"
+        class:always-visible={!!onRetryClick ||
+          !!onStartClick ||
+          !!onResumeClick ||
+          !!onPullClick ||
+          !!pullDisabledReason ||
+          !!onPushClick ||
+          !!pushDisabledReason ||
+          !!onRebaseClick ||
+          !!rebaseDisabledReason ||
+          !!onForcePushClick ||
+          !!forcePushDisabledReason ||
+          !!onViewDiffClick ||
+          !!onCommitChangesClick ||
+          !!commitChangesDisabledReason ||
+          !!onDiscardChangesClick ||
+          !!discardChangesDisabledReason}
+      >
+        {#if onStartClick}
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="outline"
+                  size="xs"
+                  onclick={handleStartClick}
+                  class="h-[22px] rounded border-[var(--border-muted)] bg-transparent text-[var(--text-muted)] shadow-none hover:border-[var(--border-muted)] hover:bg-[var(--bg-hover)] hover:text-foreground"
+                >
+                  Start
+                </Button>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>Start</Tooltip.Content>
+          </Tooltip.Root>
+        {/if}
+        {#if onRetryClick}
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="ghost"
+                  size="xs"
+                  onclick={handleRetryClick}
+                  class="h-[22px] text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-foreground"
+                >
+                  Retry
+                </Button>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>Retry</Tooltip.Content>
+          </Tooltip.Root>
+        {/if}
+        {#if onResumeClick}
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="outline"
+                  size="xs"
+                  onclick={handleResumeClick}
+                  class="h-[22px] rounded-md border-[var(--border-subtle)] bg-transparent text-[var(--text-muted)] shadow-none hover:border-[var(--border-muted)] hover:bg-[var(--bg-hover)] hover:text-foreground"
+                >
+                  Resume
+                </Button>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>Resume session</Tooltip.Content>
+          </Tooltip.Root>
+        {/if}
+        {#if onPullClick || pullDisabledReason}
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <span {...props} class="inline-flex">
+                  <Button
+                    variant="outline"
+                    size="xs"
+                    onclick={handlePullClick}
+                    disabled={!!pullDisabledReason}
+                    class="h-[22px] rounded-md border-[var(--border-subtle)] bg-transparent text-[var(--text-muted)] shadow-none hover:border-[var(--border-muted)] hover:bg-[var(--bg-hover)] hover:text-foreground"
+                  >
+                    Pull
+                  </Button>
+                </span>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>{pullDisabledReason ?? 'Pull'}</Tooltip.Content>
+          </Tooltip.Root>
+        {/if}
+        {#if onPushClick || pushDisabledReason}
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <span {...props} class="inline-flex">
+                  <Button
+                    variant="outline"
+                    size="xs"
+                    onclick={handlePushClick}
+                    disabled={!!pushDisabledReason}
+                    class="h-[22px] rounded-md border-[var(--border-subtle)] bg-transparent text-[var(--text-muted)] shadow-none hover:border-[var(--border-muted)] hover:bg-[var(--bg-hover)] hover:text-foreground"
+                  >
+                    {pushing ? 'Pushing\u2026' : 'Push'}
+                  </Button>
+                </span>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>
+              {pushDisabledReason ?? (pushing ? 'View push session' : 'Push')}
+            </Tooltip.Content>
+          </Tooltip.Root>
+        {/if}
+        {#if onForcePushClick || forcePushDisabledReason}
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <span {...props} class="inline-flex">
+                  <Button
+                    variant="outline"
+                    size="xs"
+                    onclick={handleForcePushClick}
+                    disabled={!!forcePushDisabledReason}
+                    class={[
+                      'h-[22px] rounded-md bg-transparent shadow-none',
+                      forcePushing
+                        ? 'border-[var(--border-subtle)] text-[var(--text-muted)] hover:border-[var(--border-muted)] hover:bg-[var(--bg-hover)] hover:text-foreground'
+                        : 'border-[var(--ui-danger-bg)] font-medium text-[var(--ui-danger)] hover:border-[var(--ui-danger)] hover:bg-[var(--ui-danger-bg)] hover:text-[var(--ui-danger)]',
+                    ]}
+                  >
+                    {forcePushing ? 'Pushing\u2026' : 'Force Push'}
+                  </Button>
+                </span>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>
+              {forcePushDisabledReason ??
+                (forcePushing ? 'View push session' : 'Force push local branch to origin')}
+            </Tooltip.Content>
+          </Tooltip.Root>
+        {/if}
+        {#if onRebaseClick || rebaseDisabledReason}
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <span {...props} class="inline-flex">
+                  <Button
+                    variant="outline"
+                    size="xs"
+                    onclick={handleRebaseClick}
+                    disabled={!!rebaseDisabledReason}
+                    class="h-[22px] rounded-md border-[var(--border-subtle)] bg-transparent text-[var(--text-muted)] shadow-none hover:border-[var(--border-muted)] hover:bg-[var(--bg-hover)] hover:text-foreground"
+                  >
+                    Rebase
+                  </Button>
+                </span>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>{rebaseDisabledReason ?? 'Rebase'}</Tooltip.Content>
+          </Tooltip.Root>
+        {/if}
+        {#if onViewDiffClick}
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="outline"
+                  size="xs"
+                  onclick={handleViewDiffClick}
+                  class="h-[22px] rounded-md border-[var(--border-subtle)] bg-transparent text-[var(--text-muted)] shadow-none hover:border-[var(--border-muted)] hover:bg-[var(--bg-hover)] hover:text-foreground"
+                >
+                  Diff
+                </Button>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>View diff</Tooltip.Content>
+          </Tooltip.Root>
+        {/if}
+        {#if onCommitChangesClick || commitChangesDisabledReason}
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <span {...props} class="inline-flex">
+                  <Button
+                    variant="outline"
+                    size="xs"
+                    onclick={handleCommitChangesClick}
+                    disabled={!!commitChangesDisabledReason}
+                    class="h-[22px] rounded-md border-[var(--border-subtle)] bg-transparent text-[var(--text-muted)] shadow-none hover:border-[var(--border-muted)] hover:bg-[var(--bg-hover)] hover:text-foreground"
+                  >
+                    Commit
+                  </Button>
+                </span>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>{commitChangesDisabledReason ?? 'Commit changes'}</Tooltip.Content>
+          </Tooltip.Root>
+        {/if}
+        {#if onDiscardChangesClick || discardChangesDisabledReason}
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <span {...props} class="inline-flex">
+                  <Button
+                    variant="outline"
+                    size="xs"
+                    onclick={handleDiscardChangesClick}
+                    disabled={!!discardChangesDisabledReason}
+                    class="h-[22px] rounded-md border-[var(--border-subtle)] bg-transparent text-[var(--text-muted)] shadow-none hover:border-[var(--border-muted)] hover:bg-[var(--bg-hover)] hover:text-foreground"
+                  >
+                    Discard
+                  </Button>
+                </span>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>{discardChangesDisabledReason ?? 'Discard changes'}</Tooltip.Content>
+          </Tooltip.Root>
+        {/if}
+        {#if hasSession && !onStartClick && !isQueued}
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="ghost"
+                  size="icon-xs"
+                  onclick={handleSessionClick}
+                  class="size-[22px] text-[var(--text-faint)] hover:bg-[var(--bg-hover)] hover:text-[var(--ui-accent)] [&_svg]:!size-3"
+                >
+                  <MessageSquare size={12} />
+                </Button>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>View session</Tooltip.Content>
+          </Tooltip.Root>
+        {/if}
+        {#if onDeleteClick || deleteDisabledReason}
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              {#snippet child({ props })}
+                <span {...props} class="inline-flex">
+                  <Button
+                    variant="ghost"
+                    size="icon-xs"
+                    onclick={handleDeleteClick}
+                    disabled={!!deleteDisabledReason}
+                    class="size-[22px] text-[var(--text-faint)] hover:bg-[var(--bg-hover)] hover:text-destructive [&_svg]:!size-3"
+                  >
+                    <Trash2 size={12} />
+                  </Button>
+                </span>
+              {/snippet}
+            </Tooltip.Trigger>
+            <Tooltip.Content>{deleteDisabledReason ?? 'Delete'}</Tooltip.Content>
+          </Tooltip.Root>
+        {/if}
+      </div>
     </div>
-    <div
-      class="timeline-actions"
-      class:always-visible={!!onRetryClick ||
-        !!onStartClick ||
-        !!onResumeClick ||
-        !!onPullClick ||
-        !!pullDisabledReason ||
-        !!onPushClick ||
-        !!pushDisabledReason ||
-        !!onRebaseClick ||
-        !!rebaseDisabledReason ||
-        !!onForcePushClick ||
-        !!forcePushDisabledReason ||
-        !!onViewDiffClick ||
-        !!onCommitChangesClick ||
-        !!commitChangesDisabledReason ||
-        !!onDiscardChangesClick ||
-        !!discardChangesDisabledReason}
-    >
-      {#if onStartClick}
-        <button class="action-btn start-btn" onclick={handleStartClick} title="Start">
-          Start
-        </button>
-      {/if}
-      {#if onRetryClick}
-        <button class="action-btn retry-btn" onclick={handleRetryClick} title="Retry">
-          Retry
-        </button>
-      {/if}
-      {#if onResumeClick}
-        <button class="action-btn resume-btn" onclick={handleResumeClick} title="Resume session">
-          Resume
-        </button>
-      {/if}
-      {#if onPullClick || pullDisabledReason}
-        <button
-          class="action-btn resume-btn"
-          onclick={handlePullClick}
-          disabled={!!pullDisabledReason}
-          title={pullDisabledReason ?? 'Pull'}
-        >
-          Pull
-        </button>
-      {/if}
-      {#if onPushClick || pushDisabledReason}
-        <button
-          class="action-btn resume-btn"
-          onclick={handlePushClick}
-          disabled={!!pushDisabledReason}
-          title={pushDisabledReason ?? (pushing ? 'View push session' : 'Push')}
-        >
-          {pushing ? 'Pushing\u2026' : 'Push'}
-        </button>
-      {/if}
-      {#if onForcePushClick || forcePushDisabledReason}
-        <button
-          class="action-btn {forcePushing ? 'resume-btn' : 'danger-btn'}"
-          onclick={handleForcePushClick}
-          disabled={!!forcePushDisabledReason}
-          title={forcePushDisabledReason ??
-            (forcePushing ? 'View push session' : 'Force push local branch to origin')}
-        >
-          {forcePushing ? 'Pushing\u2026' : 'Force Push'}
-        </button>
-      {/if}
-      {#if onRebaseClick || rebaseDisabledReason}
-        <button
-          class="action-btn resume-btn"
-          onclick={handleRebaseClick}
-          disabled={!!rebaseDisabledReason}
-          title={rebaseDisabledReason ?? 'Rebase'}
-        >
-          Rebase
-        </button>
-      {/if}
-      {#if onViewDiffClick}
-        <button class="action-btn resume-btn" onclick={handleViewDiffClick} title="View diff">
-          Diff
-        </button>
-      {/if}
-      {#if onCommitChangesClick || commitChangesDisabledReason}
-        <button
-          class="action-btn resume-btn"
-          onclick={handleCommitChangesClick}
-          disabled={!!commitChangesDisabledReason}
-          title={commitChangesDisabledReason ?? 'Commit changes'}
-        >
-          Commit
-        </button>
-      {/if}
-      {#if onDiscardChangesClick || discardChangesDisabledReason}
-        <button
-          class="action-btn resume-btn"
-          onclick={handleDiscardChangesClick}
-          disabled={!!discardChangesDisabledReason}
-          title={discardChangesDisabledReason ?? 'Discard changes'}
+  </div>
+{/snippet}
+
+{#if hasContextMenu}
+  <ContextMenu.Root>
+    <ContextMenu.Trigger class="contents">
+      {@render rowBody()}
+    </ContextMenu.Trigger>
+    <ContextMenu.Content class="min-w-[140px]">
+      {#if commitSha}
+        <ContextMenu.Item
+          onSelect={() => navigator.clipboard.writeText(commitSha!).catch(() => {})}
         >
-          Discard
-        </button>
+          <Copy size={14} /> Copy SHA
+        </ContextMenu.Item>
       {/if}
-      {#if hasSession && !onStartClick && !isQueued}
-        <button class="action-btn session-btn" onclick={handleSessionClick} title="View session">
-          <MessageSquare size={12} />
-        </button>
+      {#if hashtagRef && onNewSessionReferring}
+        <ContextMenu.Item onSelect={() => onNewSessionReferring!(hashtagRef!)}>
+          <MessageSquarePlus size={14} /> New session referring to this
+        </ContextMenu.Item>
       {/if}
-      {#if onDeleteClick || deleteDisabledReason}
-        <button
-          class="action-btn delete-btn"
-          onclick={handleDeleteClick}
-          disabled={!!deleteDisabledReason}
-          title={deleteDisabledReason ?? 'Delete'}
-        >
-          <Trash2 size={12} />
-        </button>
-      {/if}
-    </div>
-  </div>
-</div>
+    </ContextMenu.Content>
+  </ContextMenu.Root>
+{:else}
+  {@render rowBody()}
+{/if}
 
 <style>
   .timeline-row {
@@ -742,90 +926,6 @@
     opacity: 1;
   }
 
-  .action-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 22px;
-    height: 22px;
-    padding: 0;
-    background: none;
-    border: none;
-    border-radius: 4px;
-    color: var(--text-faint);
-    cursor: pointer;
-    transition:
-      color 0.1s,
-      background-color 0.1s;
-  }
-
-  .session-btn:hover {
-    color: var(--ui-accent);
-    background: var(--bg-hover);
-  }
-
-  .delete-btn:not(:disabled):hover {
-    color: var(--ui-danger);
-    background: var(--bg-hover);
-  }
-
-  .delete-btn:disabled,
-  .action-btn:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
-
-  .retry-btn,
-  .start-btn,
-  .resume-btn {
-    width: auto;
-    padding: 0 8px;
-    font-size: var(--size-xs);
-    color: var(--text-muted);
-  }
-
-  .resume-btn {
-    border: 1px solid var(--border-subtle);
-    border-radius: 6px;
-    font-weight: 500;
-    transition:
-      color 0.15s,
-      border-color 0.15s,
-      background-color 0.15s;
-  }
-
-  .resume-btn:hover {
-    border-color: var(--border-muted);
-    color: var(--text-primary);
-    background: var(--bg-hover);
-  }
-
-  .danger-btn {
-    width: auto;
-    padding: 0 8px;
-    font-size: var(--size-xs);
-    font-weight: 500;
-    border: 1px solid var(--ui-danger-bg, var(--ui-danger));
-    border-radius: 6px;
-    color: var(--ui-danger);
-  }
-
-  .danger-btn:not(:disabled):hover {
-    background: var(--ui-danger-bg, rgba(255, 59, 48, 0.1));
-    border-color: var(--ui-danger);
-  }
-
-  .start-btn {
-    border: 1px solid var(--border-muted);
-    border-radius: 4px;
-  }
-
-  .retry-btn:hover,
-  .start-btn:hover {
-    color: var(--text-primary);
-    background: var(--bg-hover);
-  }
-
   @keyframes pulse {
     0%,
     100% {
diff --git a/apps/staged/src/lib/shared/AlertCard.svelte b/apps/staged/src/lib/shared/AlertCard.svelte
deleted file mode 100644
index 04764164a..000000000
--- a/apps/staged/src/lib/shared/AlertCard.svelte
+++ /dev/null
@@ -1,122 +0,0 @@
-<script lang="ts">
-  import { AlertCircle, CheckCircle2, Info, TriangleAlert, X } from 'lucide-svelte';
-  import type { AlertTone } from './alerts.svelte';
-
-  interface Props {
-    tone?: AlertTone;
-    title?: string;
-    message: string;
-    dismissible?: boolean;
-    onDismiss?: () => void;
-  }
-
-  let { tone = 'info', title, message, dismissible = true, onDismiss }: Props = $props();
-
-  const iconByTone = {
-    error: AlertCircle,
-    warning: TriangleAlert,
-    success: CheckCircle2,
-    info: Info,
-  } as const;
-
-  let Icon = $derived(iconByTone[tone]);
-</script>
-
-<div class="alert-card" class:error={tone === 'error'} class:warning={tone === 'warning'}>
-  <div class="alert-icon">
-    <Icon size={15} />
-  </div>
-  <div class="alert-content">
-    {#if title}
-      <div class="alert-title">{title}</div>
-    {/if}
-    <div class="alert-message">{message}</div>
-  </div>
-  {#if dismissible}
-    <button
-      class="alert-dismiss"
-      type="button"
-      aria-label="Dismiss notification"
-      onclick={() => onDismiss?.()}
-    >
-      <X size={14} />
-    </button>
-  {/if}
-</div>
-
-<style>
-  .alert-card {
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-    padding: 12px;
-    background: var(--bg-elevated);
-    border: 1px solid var(--border-muted);
-    border-radius: 10px;
-    box-shadow: var(--shadow-elevated);
-    color: var(--text-primary);
-    backdrop-filter: blur(8px);
-  }
-
-  .alert-card.error {
-    border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--border-muted));
-  }
-
-  .alert-card.warning {
-    border-color: color-mix(in srgb, #d29922 45%, var(--border-muted));
-  }
-
-  .alert-icon {
-    flex-shrink: 0;
-    color: var(--text-faint);
-    margin-top: 1px;
-  }
-
-  .alert-card.error .alert-icon {
-    color: var(--ui-danger);
-  }
-
-  .alert-card.warning .alert-icon {
-    color: #d29922;
-  }
-
-  .alert-content {
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    flex: 1;
-  }
-
-  .alert-title {
-    font-size: var(--size-sm);
-    font-weight: 600;
-    line-height: 1.2;
-  }
-
-  .alert-message {
-    font-size: var(--size-sm);
-    color: var(--text-muted);
-    line-height: 1.35;
-  }
-
-  .alert-dismiss {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 22px;
-    height: 22px;
-    padding: 0;
-    border: none;
-    border-radius: 4px;
-    background: transparent;
-    color: var(--text-faint);
-    cursor: pointer;
-    flex-shrink: 0;
-  }
-
-  .alert-dismiss:hover {
-    background-color: var(--bg-hover);
-    color: var(--text-primary);
-  }
-</style>
diff --git a/apps/staged/src/lib/shared/ConfirmDialog.svelte b/apps/staged/src/lib/shared/ConfirmDialog.svelte
deleted file mode 100644
index 0b7b7f664..000000000
--- a/apps/staged/src/lib/shared/ConfirmDialog.svelte
+++ /dev/null
@@ -1,292 +0,0 @@
-<!--
-  ConfirmDialog.svelte - Themed confirmation dialog
-
-  A modal dialog for confirming destructive actions, styled to match the app theme.
-
-  Usage:
-    <ConfirmDialog
-      title="Delete Branch"
-      message="Are you sure?"
-      confirmLabel="Delete"
-      danger={true}
-      onConfirm={() => doDelete()}
-      onCancel={() => closeDialog()}
-    />
--->
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { AlertTriangle } from 'lucide-svelte';
-  import { createBackdropDismissHandlers } from './backdropDismiss';
-
-  interface Props {
-    title?: string;
-    message: string;
-    confirmLabel?: string;
-    cancelLabel?: string;
-    danger?: boolean;
-    confirmDisabled?: boolean;
-    cancelDisabled?: boolean;
-    error?: string | null;
-    onConfirm: () => void;
-    onCancel: () => void;
-  }
-
-  let {
-    title = 'Confirm',
-    message,
-    confirmLabel = 'Confirm',
-    cancelLabel = 'Cancel',
-    danger = false,
-    confirmDisabled = false,
-    cancelDisabled = false,
-    error = null,
-    onConfirm,
-    onCancel,
-  }: Props = $props();
-  const backdropDismiss = createBackdropDismissHandlers({
-    onDismiss: () => !cancelDisabled && onCancel(),
-  });
-
-  function handleKeydown(event: KeyboardEvent) {
-    if (event.key === 'Escape' && !cancelDisabled) {
-      onCancel();
-      event.preventDefault();
-    } else if (event.key === 'Enter' && !confirmDisabled) {
-      onConfirm();
-      event.preventDefault();
-    }
-  }
-
-  // Portal the dialog to document.body so it escapes any intermediate
-  // stacking contexts (e.g. sticky headers inside scroll containers).
-  let backdropEl: HTMLDivElement;
-  onMount(() => {
-    document.body.appendChild(backdropEl);
-    return () => {
-      backdropEl?.remove();
-    };
-  });
-</script>
-
-<svelte:window onkeydown={handleKeydown} />
-
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div
-  class="modal-backdrop"
-  role="dialog"
-  aria-modal="true"
-  tabindex="-1"
-  bind:this={backdropEl}
-  onpointerdown={backdropDismiss.handlePointerDown}
-  onclick={backdropDismiss.handleClick}
-  onkeydown={(e) => e.key === 'Escape' && !cancelDisabled && onCancel()}
->
-  <div class="modal" class:danger>
-    <div class="modal-content">
-      {#if danger}
-        <div class="icon-wrapper">
-          <AlertTriangle size={24} />
-        </div>
-      {/if}
-      <div class="text-content">
-        <h2>{title}</h2>
-        <p>{message}</p>
-        {#if error}
-          <p class="error-text">{error}</p>
-        {/if}
-      </div>
-    </div>
-
-    <div class="modal-actions">
-      <button class="btn btn-secondary" onclick={onCancel} disabled={cancelDisabled}>
-        {cancelLabel}
-      </button>
-      <button
-        class="btn"
-        class:btn-danger={danger}
-        class:btn-primary={!danger}
-        onclick={onConfirm}
-        disabled={confirmDisabled}
-      >
-        {confirmLabel}
-      </button>
-    </div>
-  </div>
-</div>
-
-<style>
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes scaleIn {
-    from {
-      opacity: 0;
-      transform: scale(0.96);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  .modal-backdrop {
-    position: fixed;
-    inset: 0;
-    background: var(--shadow-overlay);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    animation: fadeIn 0.15s ease;
-  }
-
-  .modal {
-    background: var(--bg-chrome);
-    border-radius: 12px;
-    box-shadow: var(--shadow-elevated);
-    width: 400px;
-    max-width: 90vw;
-    overflow: hidden;
-    animation: scaleIn 0.15s ease;
-  }
-
-  .modal-content {
-    display: flex;
-    gap: 16px;
-    padding: 24px;
-  }
-
-  .icon-wrapper {
-    flex-shrink: 0;
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--ui-danger-bg);
-    border-radius: 10px;
-    color: var(--ui-danger);
-  }
-
-  .text-content {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .text-content h2 {
-    margin: 0 0 8px 0;
-    font-size: var(--size-base);
-    font-weight: 600;
-    color: var(--text-primary);
-  }
-
-  .text-content p {
-    margin: 0;
-    font-size: var(--size-sm);
-    color: var(--text-muted);
-    line-height: 1.5;
-    max-height: 42vh;
-    overflow: auto;
-    white-space: pre-line;
-  }
-
-  .text-content .error-text {
-    margin-top: 8px;
-    color: var(--color-danger, #f85149);
-  }
-
-  .modal-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 8px;
-    padding: 16px 24px;
-    border-top: 1px solid var(--border-subtle);
-    background: var(--bg-primary);
-    /* Prevent layout shift when button labels change width */
-    align-items: center;
-  }
-
-  .btn {
-    padding: 8px 16px;
-    min-width: 80px;
-    border: none;
-    border-radius: 6px;
-    font-size: var(--size-sm);
-    font-weight: 500;
-    cursor: pointer;
-    transition:
-      background-color 0.15s ease,
-      opacity 0.15s ease;
-  }
-
-  .btn-secondary {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .btn-secondary:hover:not(:disabled) {
-    background: var(--border-subtle);
-  }
-
-  .btn-primary {
-    background: var(--ui-accent);
-    color: var(--bg-primary);
-  }
-
-  .btn-primary:hover:not(:disabled) {
-    background: var(--ui-accent-hover);
-  }
-
-  .btn-danger {
-    background: var(--ui-danger);
-    color: white;
-  }
-
-  .btn-danger:hover:not(:disabled) {
-    filter: brightness(1.1);
-  }
-
-  .btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  @media (max-width: 640px) {
-    .modal-backdrop {
-      align-items: stretch;
-      justify-content: stretch;
-    }
-
-    .modal {
-      width: 100vw;
-      max-width: none;
-      height: 100vh;
-      height: 100dvh;
-      border-radius: 0;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .modal-content {
-      flex: 1;
-      overflow: auto;
-      padding: 20px 16px;
-    }
-
-    .modal-actions {
-      flex-direction: column-reverse;
-      padding: 12px 16px;
-    }
-
-    .btn {
-      width: 100%;
-      min-height: 44px;
-    }
-  }
-</style>
diff --git a/apps/staged/src/lib/shared/DropdownMenu.svelte b/apps/staged/src/lib/shared/DropdownMenu.svelte
deleted file mode 100644
index 40e265149..000000000
--- a/apps/staged/src/lib/shared/DropdownMenu.svelte
+++ /dev/null
@@ -1,166 +0,0 @@
-<!--
-  DropdownMenu.svelte - Reusable triple-dot dropdown menu
-
-  Renders an ellipsis button that toggles a positioned dropdown.
-  Menu items are passed as a prop array. Handles click-outside and Escape to close.
-
-  Usage:
-    <DropdownMenu items={[
-      { label: 'Delete', icon: Trash2, danger: true, action: () => handleDelete() },
-    ]} />
--->
-<script lang="ts">
-  import { EllipsisVertical } from 'lucide-svelte';
-
-  type IconComponent = typeof EllipsisVertical;
-
-  export interface MenuItem {
-    label: string;
-    /** A Svelte component (e.g. a lucide-svelte icon) rendered at size 14. */
-    icon?: IconComponent;
-    danger?: boolean;
-    action: () => void;
-  }
-
-  interface Props {
-    items: MenuItem[];
-    /** Which edge the dropdown aligns to. Default "right" (anchored to right edge). */
-    align?: 'left' | 'right';
-  }
-
-  let { items, align = 'right' }: Props = $props();
-
-  let open = $state(false);
-  let menuRef = $state<HTMLDivElement | null>(null);
-
-  function toggle(e: MouseEvent) {
-    e.stopPropagation();
-    open = !open;
-  }
-
-  function handleItemClick(item: MenuItem, e: MouseEvent) {
-    e.stopPropagation();
-    open = false;
-    item.action();
-  }
-
-  function handleClickOutside(e: MouseEvent) {
-    if (open && menuRef && !menuRef.contains(e.target as Node)) {
-      open = false;
-    }
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (open && e.key === 'Escape') {
-      open = false;
-      e.stopPropagation();
-    }
-  }
-</script>
-
-<svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} />
-
-<div class="menu-container" bind:this={menuRef}>
-  <button class="menu-trigger" class:menu-open={open} onclick={toggle} title="More options">
-    <EllipsisVertical size={16} />
-  </button>
-  {#if open}
-    <div class="menu-dropdown" class:align-left={align === 'left'}>
-      {#each items as item, i}
-        <button
-          class="menu-item"
-          class:danger={item.danger}
-          onclick={(e) => handleItemClick(item, e)}
-        >
-          {#if item.icon}
-            <item.icon size={14} />
-          {/if}
-          {item.label}
-        </button>
-      {/each}
-    </div>
-  {/if}
-</div>
-
-<style>
-  .menu-container {
-    position: relative;
-  }
-
-  .menu-trigger {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    background: transparent;
-    border: none;
-    border-radius: 4px;
-    color: var(--text-faint);
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-
-  .menu-trigger:hover,
-  .menu-trigger.menu-open {
-    background-color: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .menu-dropdown {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    margin-top: 4px;
-    background-color: var(--bg-elevated);
-    border: 1px solid var(--border-muted);
-    border-radius: 8px;
-    box-shadow:
-      0 4px 12px rgba(0, 0, 0, 0.12),
-      0 1px 4px rgba(0, 0, 0, 0.08);
-    overflow: hidden;
-    z-index: 100;
-    min-width: 140px;
-    padding: 4px 0;
-  }
-
-  .menu-dropdown.align-left {
-    right: auto;
-    left: 0;
-  }
-
-  .menu-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-    padding: 8px 14px;
-    background: transparent;
-    border: none;
-    color: var(--text-primary);
-    font-size: var(--size-sm);
-    cursor: pointer;
-    transition: background-color 0.15s ease;
-    text-align: left;
-    white-space: nowrap;
-  }
-
-  .menu-item:hover {
-    background-color: var(--bg-hover);
-  }
-
-  .menu-item :global(svg) {
-    color: var(--text-muted);
-    flex-shrink: 0;
-  }
-
-  .menu-item.danger:hover {
-    background-color: var(--ui-danger-bg);
-    color: var(--ui-danger);
-  }
-
-  .menu-item.danger:hover :global(svg) {
-    color: var(--ui-danger);
-  }
-</style>
diff --git a/apps/staged/src/lib/shared/FormButton.svelte b/apps/staged/src/lib/shared/FormButton.svelte
deleted file mode 100644
index 0b6ead82b..000000000
--- a/apps/staged/src/lib/shared/FormButton.svelte
+++ /dev/null
@@ -1,97 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    variant?: 'default' | 'primary' | 'secondary' | 'ghost';
-    disabled?: boolean;
-    onclick?: (e: MouseEvent) => void;
-    class?: string;
-    children: Snippet;
-  }
-
-  let {
-    variant = 'default',
-    disabled = false,
-    onclick,
-    class: className = '',
-    children,
-  }: Props = $props();
-</script>
-
-<button
-  class="form-btn {className}"
-  class:primary={variant === 'primary'}
-  class:secondary={variant === 'secondary'}
-  class:ghost={variant === 'ghost'}
-  {disabled}
-  {onclick}
->
-  {@render children()}
-</button>
-
-<style>
-  .form-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    min-height: 36px;
-    border: 1px solid var(--border-muted);
-    border-radius: 8px;
-    background: transparent;
-    color: var(--text-muted);
-    padding: 8px 12px;
-    font-size: var(--size-sm);
-    font-family: inherit;
-    cursor: pointer;
-    transition:
-      border-color 0.15s ease,
-      color 0.15s ease,
-      background-color 0.15s ease;
-  }
-
-  .form-btn:hover {
-    color: var(--text-primary);
-    border-color: var(--border-emphasis);
-    background: var(--bg-hover);
-  }
-
-  .form-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .form-btn.primary {
-    background: var(--ui-accent);
-    border-color: var(--ui-accent);
-    color: var(--bg-deepest);
-    font-weight: 600;
-  }
-
-  .form-btn.primary:hover:not(:disabled) {
-    background: var(--ui-accent-hover);
-    border-color: var(--ui-accent-hover);
-  }
-
-  .form-btn.secondary {
-    background: var(--bg-primary);
-    border-color: transparent;
-    color: var(--text-primary);
-  }
-
-  .form-btn.secondary:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .form-btn.ghost {
-    border-color: transparent;
-    color: var(--text-muted);
-  }
-
-  .form-btn.ghost:hover {
-    border-color: transparent;
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-</style>
diff --git a/apps/staged/src/lib/shared/FormInput.svelte b/apps/staged/src/lib/shared/FormInput.svelte
deleted file mode 100644
index 11beb670d..000000000
--- a/apps/staged/src/lib/shared/FormInput.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-  import type { HTMLInputAttributes } from 'svelte/elements';
-
-  interface Props extends Omit<HTMLInputAttributes, 'value'> {
-    value?: string;
-    autofocus?: boolean;
-  }
-
-  let { value = $bindable(''), autofocus = false, ...rest }: Props = $props();
-
-  function autoFocusAction(node: HTMLElement) {
-    if (autofocus) node.focus();
-  }
-</script>
-
-<input class="form-input" bind:value use:autoFocusAction {...rest} />
-
-<style>
-  .form-input {
-    width: 100%;
-    min-height: 42px;
-    border: 1.5px solid var(--border-muted);
-    background: transparent;
-    color: var(--text-primary);
-    border-radius: 10px;
-    padding: 10px 14px;
-    font-size: var(--size-md);
-    font-family: inherit;
-    outline: none;
-    transition: border-color 0.15s ease;
-    box-sizing: border-box;
-  }
-
-  .form-input:focus {
-    border-color: var(--ui-accent);
-  }
-
-  .form-input::placeholder {
-    color: var(--text-faint);
-  }
-
-  .form-input:disabled {
-    opacity: 0.6;
-  }
-</style>
diff --git a/apps/staged/src/lib/shared/FormToggle.svelte b/apps/staged/src/lib/shared/FormToggle.svelte
deleted file mode 100644
index b0718ddec..000000000
--- a/apps/staged/src/lib/shared/FormToggle.svelte
+++ /dev/null
@@ -1,109 +0,0 @@
-<script lang="ts" generics="T extends string">
-  type IconComponent = typeof import('lucide-svelte').Monitor;
-
-  interface Props {
-    options: { value: T; label: string; description?: string; icon?: IconComponent }[];
-    value: T;
-    disabled?: boolean;
-  }
-
-  let { options, value = $bindable(), disabled = false }: Props = $props();
-</script>
-
-<div class="toggle-group">
-  {#each options as option}
-    <button
-      class="toggle-card"
-      class:active={value === option.value}
-      {disabled}
-      onclick={() => (value = option.value)}
-    >
-      {#if option.icon}
-        <span class="toggle-icon">
-          <option.icon size={22} />
-        </span>
-      {/if}
-      <span class="toggle-text">
-        <span class="toggle-label">{option.label}</span>
-        {#if option.description}
-          <span class="toggle-desc">{option.description}</span>
-        {/if}
-      </span>
-    </button>
-  {/each}
-</div>
-
-<style>
-  .toggle-group {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .toggle-card {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    border: 1.5px solid var(--border-muted);
-    border-radius: 10px;
-    background: transparent;
-    color: var(--text-muted);
-    padding: 14px 16px;
-    font-family: inherit;
-    cursor: pointer;
-    text-align: left;
-    transition:
-      border-color 0.2s ease,
-      color 0.2s ease,
-      background-color 0.2s ease;
-  }
-
-  .toggle-card:hover {
-    border-color: var(--border-emphasis);
-    color: var(--text-primary);
-  }
-
-  .toggle-card.active {
-    border-color: var(--text-primary);
-    background: var(--text-primary);
-    color: var(--bg-deepest);
-  }
-
-  .toggle-card:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .toggle-icon {
-    display: flex;
-    flex-shrink: 0;
-    color: var(--text-faint);
-    transition: color 0.2s ease;
-  }
-
-  .toggle-card.active .toggle-icon {
-    color: var(--bg-deepest);
-  }
-
-  .toggle-text {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    min-width: 0;
-  }
-
-  .toggle-label {
-    font-size: var(--size-sm);
-    font-weight: 500;
-  }
-
-  .toggle-desc {
-    font-size: var(--size-xs);
-    color: var(--text-faint);
-    font-weight: 400;
-  }
-
-  .toggle-card.active .toggle-desc {
-    color: var(--bg-chrome);
-  }
-</style>
diff --git a/apps/staged/src/lib/shared/InContentSearch.svelte b/apps/staged/src/lib/shared/InContentSearch.svelte
index c07382037..5d5b39391 100644
--- a/apps/staged/src/lib/shared/InContentSearch.svelte
+++ b/apps/staged/src/lib/shared/InContentSearch.svelte
@@ -5,9 +5,14 @@
   Displays match counter and navigation buttons.
 -->
 <script lang="ts">
-  import { ChevronUp, ChevronDown, X } from 'lucide-svelte';
+  import ChevronUp from '@lucide/svelte/icons/chevron-up';
+  import ChevronDown from '@lucide/svelte/icons/chevron-down';
+  import X from '@lucide/svelte/icons/x';
   import { tick } from 'svelte';
   import { viewport } from './viewport.svelte';
+  import { Input } from '$lib/components/ui/input';
+  import { Button } from '$lib/components/ui/button';
+  import * as Tooltip from '$lib/components/ui/tooltip';
 
   interface Props {
     visible: boolean;
@@ -22,7 +27,7 @@
   let { visible, matchCount, currentIndex, onSearch, onNext, onPrevious, onClose }: Props =
     $props();
 
-  let inputEl = $state<HTMLInputElement>();
+  let inputEl = $state<HTMLInputElement | null>(null);
   let query = $state('');
 
   // Auto-focus input when search becomes visible
@@ -61,40 +66,73 @@
 
 {#if visible}
   <div class="search-bar">
-    <input
-      bind:this={inputEl}
+    <Input
+      bind:ref={inputEl}
       bind:value={query}
       type="text"
-      class="search-input"
       placeholder="Search..."
       onkeydown={handleKeydown}
+      class="border-0 bg-transparent shadow-none px-0 py-0 h-auto min-h-0 focus-visible:ring-0 focus-visible:border-0 md:text-base w-[200px]"
     />
     {#if counterText}
       <span class="match-counter">{counterText}</span>
     {/if}
-    <button
-      class="search-btn"
-      onclick={onPrevious}
-      disabled={matchCount === 0}
-      title={viewport.showShortcutHints ? 'Previous match (Shift+Enter)' : 'Previous match'}
-    >
-      <ChevronUp size={14} />
-    </button>
-    <button
-      class="search-btn"
-      onclick={onNext}
-      disabled={matchCount === 0}
-      title={viewport.showShortcutHints ? 'Next match (Enter)' : 'Next match'}
-    >
-      <ChevronDown size={14} />
-    </button>
-    <button
-      class="search-btn close-search"
-      onclick={onClose}
-      title={viewport.showShortcutHints ? 'Close search (Esc)' : 'Close search'}
-    >
-      <X size={14} />
-    </button>
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        {#snippet child({ props })}
+          <Button
+            {...props}
+            variant="ghost"
+            size="icon-xs"
+            class="[&_svg]:size-3.5"
+            onclick={onPrevious}
+            disabled={matchCount === 0}
+          >
+            <ChevronUp size={14} />
+          </Button>
+        {/snippet}
+      </Tooltip.Trigger>
+      <Tooltip.Content>
+        {viewport.showShortcutHints ? 'Previous match (Shift+Enter)' : 'Previous match'}
+      </Tooltip.Content>
+    </Tooltip.Root>
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        {#snippet child({ props })}
+          <Button
+            {...props}
+            variant="ghost"
+            size="icon-xs"
+            class="[&_svg]:size-3.5"
+            onclick={onNext}
+            disabled={matchCount === 0}
+          >
+            <ChevronDown size={14} />
+          </Button>
+        {/snippet}
+      </Tooltip.Trigger>
+      <Tooltip.Content>
+        {viewport.showShortcutHints ? 'Next match (Enter)' : 'Next match'}
+      </Tooltip.Content>
+    </Tooltip.Root>
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        {#snippet child({ props })}
+          <Button
+            {...props}
+            variant="ghost"
+            size="icon-xs"
+            class="ml-1 [&_svg]:size-3.5"
+            onclick={onClose}
+          >
+            <X size={14} />
+          </Button>
+        {/snippet}
+      </Tooltip.Trigger>
+      <Tooltip.Content>
+        {viewport.showShortcutHints ? 'Close search (Esc)' : 'Close search'}
+      </Tooltip.Content>
+    </Tooltip.Root>
   </div>
 {/if}
 
@@ -114,20 +152,6 @@
     z-index: 10;
   }
 
-  .search-input {
-    background: transparent;
-    border: none;
-    outline: none;
-    font-size: var(--size-md);
-    color: var(--text-primary);
-    width: 200px;
-    font-family: inherit;
-  }
-
-  .search-input::placeholder {
-    color: var(--text-faint);
-  }
-
   .match-counter {
     font-size: var(--size-xs);
     color: var(--text-muted);
@@ -135,33 +159,4 @@
     min-width: 60px;
     text-align: center;
   }
-
-  .search-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px;
-    background: none;
-    border: none;
-    color: var(--text-muted);
-    cursor: pointer;
-    border-radius: 4px;
-    transition:
-      background-color 0.1s,
-      color 0.1s;
-  }
-
-  .search-btn:hover:not(:disabled) {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .search-btn:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
-
-  .close-search {
-    margin-left: 4px;
-  }
 </style>
diff --git a/apps/staged/src/lib/shared/RepoBadge.svelte b/apps/staged/src/lib/shared/RepoBadge.svelte
index 82640b8b5..96631a8ad 100644
--- a/apps/staged/src/lib/shared/RepoBadge.svelte
+++ b/apps/staged/src/lib/shared/RepoBadge.svelte
@@ -7,6 +7,7 @@
 <script lang="ts">
   import { darkMode } from '../stores/isDark.svelte';
   import { badgeBg, badgeFg } from './badgeColors';
+  import * as Tooltip from '$lib/components/ui/tooltip';
 
   interface Props {
     shortName: string;
@@ -21,9 +22,16 @@
   let fg = $derived(badgeFg(hue, darkMode.value));
 </script>
 
-<span class="repo-badge" class:small style="background: {bg}; color: {fg};" title={shortName}>
-  {shortName}
-</span>
+<Tooltip.Root>
+  <Tooltip.Trigger>
+    {#snippet child({ props })}
+      <span class="repo-badge" class:small style="background: {bg}; color: {fg};" {...props}>
+        {shortName}
+      </span>
+    {/snippet}
+  </Tooltip.Trigger>
+  <Tooltip.Content>{shortName}</Tooltip.Content>
+</Tooltip.Root>
 
 <style>
   .repo-badge {
diff --git a/apps/staged/src/lib/shared/RepoLabel.svelte b/apps/staged/src/lib/shared/RepoLabel.svelte
index 1bb11d7a6..46f17b22c 100644
--- a/apps/staged/src/lib/shared/RepoLabel.svelte
+++ b/apps/staged/src/lib/shared/RepoLabel.svelte
@@ -10,6 +10,8 @@
     githubRepo="block/mark" subpath="ui" → "block/mark/" muted + "ui" primary
 -->
 <script lang="ts">
+  import * as Tooltip from '$lib/components/ui/tooltip';
+
   interface Props {
     githubRepo: string;
     subpath?: string | null;
@@ -36,11 +38,18 @@
   let fullLabel = $derived(subpath ? `${githubRepo}/${subpath}` : githubRepo);
 </script>
 
-<span class="repo-label" title={fullLabel}
-  >{#if prefix}<span class="repo-label-prefix">{prefix}</span>{/if}<span class="repo-label-emphasis"
-    >{emphasis}</span
-  ></span
->
+<Tooltip.Root>
+  <Tooltip.Trigger>
+    {#snippet child({ props })}
+      <span class="repo-label" {...props}
+        >{#if prefix}<span class="repo-label-prefix">{prefix}</span>{/if}<span
+          class="repo-label-emphasis">{emphasis}</span
+        ></span
+      >
+    {/snippet}
+  </Tooltip.Trigger>
+  <Tooltip.Content>{fullLabel}</Tooltip.Content>
+</Tooltip.Root>
 
 <style>
   .repo-label {
diff --git a/apps/staged/src/lib/shared/ToastHost.svelte b/apps/staged/src/lib/shared/ToastHost.svelte
deleted file mode 100644
index 4883904a1..000000000
--- a/apps/staged/src/lib/shared/ToastHost.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script lang="ts">
-  import { fly, fade } from 'svelte/transition';
-  import { alerts } from './alerts.svelte';
-  import AlertCard from './AlertCard.svelte';
-</script>
-
-{#if alerts.toasts.length > 0}
-  <div class="toast-host" role="region" aria-label="Notifications">
-    {#each alerts.toasts as toast (toast.id)}
-      <div class="toast-wrap" in:fly={{ x: 16, duration: 170 }} out:fade={{ duration: 140 }}>
-        <AlertCard
-          tone={toast.tone}
-          title={toast.title}
-          message={toast.message}
-          dismissible={toast.dismissible}
-          onDismiss={() => alerts.dismiss(toast.id)}
-        />
-      </div>
-    {/each}
-  </div>
-{/if}
-
-<style>
-  .toast-host {
-    position: fixed;
-    right: 20px;
-    bottom: 20px;
-    z-index: 1400;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    width: min(380px, calc(100vw - 24px));
-    pointer-events: none;
-  }
-
-  .toast-wrap {
-    pointer-events: auto;
-  }
-</style>
diff --git a/apps/staged/src/lib/shared/alerts.svelte.ts b/apps/staged/src/lib/shared/alerts.svelte.ts
deleted file mode 100644
index 02c195b03..000000000
--- a/apps/staged/src/lib/shared/alerts.svelte.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-export type AlertTone = 'error' | 'warning' | 'success' | 'info';
-
-export interface AlertToast {
-  id: string;
-  tone: AlertTone;
-  title?: string;
-  message: string;
-  dismissible: boolean;
-}
-
-interface ShowAlertOptions {
-  tone?: AlertTone;
-  title?: string;
-  message: string;
-  dismissible?: boolean;
-  durationMs?: number;
-}
-
-const DEFAULT_DURATION_MS = 8000;
-const MAX_VISIBLE_TOASTS = 4;
-
-class AlertsStore {
-  toasts = $state<AlertToast[]>([]);
-  private timers = new Map<string, ReturnType<typeof setTimeout>>();
-
-  show(options: ShowAlertOptions): string {
-    const id = this.nextId();
-    const toast: AlertToast = {
-      id,
-      tone: options.tone ?? 'info',
-      title: options.title,
-      message: options.message,
-      dismissible: options.dismissible ?? true,
-    };
-
-    this.toasts = [...this.toasts, toast];
-    if (this.toasts.length > MAX_VISIBLE_TOASTS) {
-      const oldest = this.toasts[0];
-      this.dismiss(oldest.id);
-    }
-
-    const durationMs = options.durationMs ?? DEFAULT_DURATION_MS;
-    if (durationMs > 0) {
-      const timer = setTimeout(() => this.dismiss(id), durationMs);
-      this.timers.set(id, timer);
-    }
-
-    return id;
-  }
-
-  error(message: string, title = 'Error', durationMs?: number): string {
-    return this.show({ tone: 'error', title, message, durationMs });
-  }
-
-  dismiss(id: string): void {
-    const timer = this.timers.get(id);
-    if (timer) {
-      clearTimeout(timer);
-      this.timers.delete(id);
-    }
-    this.toasts = this.toasts.filter((toast) => toast.id !== id);
-  }
-
-  clear(): void {
-    for (const timer of this.timers.values()) {
-      clearTimeout(timer);
-    }
-    this.timers.clear();
-    this.toasts = [];
-  }
-
-  private nextId(): string {
-    if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
-      return crypto.randomUUID();
-    }
-    return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
-  }
-}
-
-export const alerts = new AlertsStore();
diff --git a/apps/staged/src/lib/shared/backdropDismiss.test.ts b/apps/staged/src/lib/shared/backdropDismiss.test.ts
deleted file mode 100644
index 81432f063..000000000
--- a/apps/staged/src/lib/shared/backdropDismiss.test.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-import { createBackdropDismissHandlers } from './backdropDismiss';
-
-function createEvent(target: object, currentTarget: object) {
-  return {
-    target,
-    currentTarget,
-    stopPropagation: vi.fn(),
-  };
-}
-
-describe('createBackdropDismissHandlers', () => {
-  it('dismisses and consumes clicks that start and end on the backdrop', () => {
-    const backdrop = {};
-    const onDismiss = vi.fn();
-    const handlers = createBackdropDismissHandlers({ onDismiss });
-    const pointerDown = createEvent(backdrop, backdrop);
-    const click = createEvent(backdrop, backdrop);
-
-    handlers.handlePointerDown(pointerDown as unknown as PointerEvent);
-    handlers.handleClick(click as unknown as MouseEvent);
-
-    expect(onDismiss).toHaveBeenCalledOnce();
-    expect(pointerDown.stopPropagation).toHaveBeenCalledOnce();
-    expect(click.stopPropagation).toHaveBeenCalledOnce();
-  });
-
-  it('consumes backdrop clicks even when the pointer down started inside the dialog', () => {
-    const backdrop = {};
-    const dialog = {};
-    const onDismiss = vi.fn();
-    const handlers = createBackdropDismissHandlers({ onDismiss });
-    const pointerDown = createEvent(dialog, backdrop);
-    const click = createEvent(backdrop, backdrop);
-
-    handlers.handlePointerDown(pointerDown as unknown as PointerEvent);
-    handlers.handleClick(click as unknown as MouseEvent);
-
-    expect(onDismiss).not.toHaveBeenCalled();
-    expect(pointerDown.stopPropagation).not.toHaveBeenCalled();
-    expect(click.stopPropagation).toHaveBeenCalledOnce();
-  });
-
-  it('does not consume clicks inside the dialog', () => {
-    const backdrop = {};
-    const dialog = {};
-    const onDismiss = vi.fn();
-    const handlers = createBackdropDismissHandlers({ onDismiss });
-    const pointerDown = createEvent(dialog, backdrop);
-    const click = createEvent(dialog, backdrop);
-
-    handlers.handlePointerDown(pointerDown as unknown as PointerEvent);
-    handlers.handleClick(click as unknown as MouseEvent);
-
-    expect(onDismiss).not.toHaveBeenCalled();
-    expect(pointerDown.stopPropagation).not.toHaveBeenCalled();
-    expect(click.stopPropagation).not.toHaveBeenCalled();
-  });
-});
diff --git a/apps/staged/src/lib/shared/backdropDismiss.ts b/apps/staged/src/lib/shared/backdropDismiss.ts
deleted file mode 100644
index 2a3b37ef1..000000000
--- a/apps/staged/src/lib/shared/backdropDismiss.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Shared handlers for dismissing a modal only when pointer-down and click both
- * occur on the backdrop itself.
- */
-interface BackdropDismissOptions {
-  onDismiss: () => void;
-  canDismiss?: () => boolean;
-}
-
-export function createBackdropDismissHandlers(options: BackdropDismissOptions) {
-  let pointerDownOnBackdrop = false;
-
-  function handlePointerDown(event: PointerEvent) {
-    pointerDownOnBackdrop = event.target === event.currentTarget;
-    if (pointerDownOnBackdrop) {
-      event.stopPropagation();
-    }
-  }
-
-  function handleClick(event: MouseEvent) {
-    const clickedBackdrop = event.target === event.currentTarget;
-
-    if (clickedBackdrop) {
-      event.stopPropagation();
-    }
-
-    if (clickedBackdrop && pointerDownOnBackdrop && (options.canDismiss?.() ?? true)) {
-      options.onDismiss();
-    }
-
-    pointerDownOnBackdrop = false;
-  }
-
-  return { handlePointerDown, handleClick };
-}
diff --git a/apps/staged/src/lib/shared/menu/ContextMenu.svelte b/apps/staged/src/lib/shared/menu/ContextMenu.svelte
deleted file mode 100644
index 02c0f8585..000000000
--- a/apps/staged/src/lib/shared/menu/ContextMenu.svelte
+++ /dev/null
@@ -1,139 +0,0 @@
-<script lang="ts">
-  import { onDestroy, onMount, tick } from 'svelte';
-  import MenuSurface from './MenuSurface.svelte';
-  import type { MenuItem } from './types';
-  import {
-    closeAllMenus,
-    registerMenuCloseListener,
-    unregisterMenuCloseListener,
-  } from './coordination';
-
-  type OpenOptions = {
-    x: number;
-    y: number;
-    items: MenuItem[];
-    ariaLabel?: string;
-  };
-
-  interface Props {
-    ariaLabel?: string;
-    minWidth?: number;
-    onClose?: () => void;
-  }
-
-  let { ariaLabel = 'Context menu', minWidth = 160, onClose = () => {} }: Props = $props();
-
-  let menu = $state<(OpenOptions & { left: number; top: number }) | null>(null);
-  let positioned = $state(false);
-  let surfaceRef = $state<ReturnType<typeof MenuSurface> | undefined>();
-  let placementToken = 0;
-  const viewportPadding = 8;
-
-  function clamp(value: number, min: number, max: number): number {
-    return Math.max(min, Math.min(value, max));
-  }
-
-  async function placeMenu(token: number) {
-    if (!menu) return;
-    positioned = false;
-    menu = { ...menu, left: menu.x, top: menu.y };
-    await tick();
-
-    if (token !== placementToken || !menu) return;
-    const rect = surfaceRef?.getRect();
-    if (!rect) return;
-
-    menu = {
-      ...menu,
-      left: clamp(menu.x, viewportPadding, window.innerWidth - rect.width - viewportPadding),
-      top: clamp(menu.y, viewportPadding, window.innerHeight - rect.height - viewportPadding),
-    };
-    positioned = true;
-    await tick();
-
-    if (token === placementToken) {
-      surfaceRef?.focusFirstItem();
-    }
-  }
-
-  function closeFromCoordinator() {
-    close();
-  }
-
-  function handlePointerDown(event: PointerEvent) {
-    if (!menu) return;
-    const target = event.target as Node;
-    if (surfaceRef?.contains(target)) return;
-    close();
-  }
-
-  function handleContextMenu(event: MouseEvent) {
-    if (!menu) return;
-    const target = event.target as Node;
-    if (surfaceRef?.contains(target)) return;
-    close();
-  }
-
-  function handleKeydown(event: KeyboardEvent) {
-    if (!menu || event.key !== 'Escape') return;
-    event.preventDefault();
-    close();
-  }
-
-  function closeForViewportChange() {
-    if (menu) close();
-  }
-
-  export function open(options: OpenOptions): void {
-    closeAllMenus(closeFromCoordinator);
-    menu = {
-      ...options,
-      left: options.x,
-      top: options.y,
-    };
-    const token = ++placementToken;
-    void placeMenu(token);
-  }
-
-  export function close(): void {
-    if (!menu) return;
-    menu = null;
-    positioned = false;
-    onClose();
-  }
-
-  onMount(() => {
-    registerMenuCloseListener(closeFromCoordinator);
-    window.addEventListener('pointerdown', handlePointerDown, true);
-    window.addEventListener('contextmenu', handleContextMenu, true);
-    window.addEventListener('keydown', handleKeydown, true);
-    window.addEventListener('scroll', closeForViewportChange, true);
-    window.addEventListener('resize', closeForViewportChange);
-
-    return () => {
-      unregisterMenuCloseListener(closeFromCoordinator);
-      window.removeEventListener('pointerdown', handlePointerDown, true);
-      window.removeEventListener('contextmenu', handleContextMenu, true);
-      window.removeEventListener('keydown', handleKeydown, true);
-      window.removeEventListener('scroll', closeForViewportChange, true);
-      window.removeEventListener('resize', closeForViewportChange);
-    };
-  });
-
-  onDestroy(() => {
-    placementToken++;
-  });
-</script>
-
-{#if menu}
-  <MenuSurface
-    bind:this={surfaceRef}
-    items={menu.items}
-    left={menu.left}
-    top={menu.top}
-    ariaLabel={menu.ariaLabel ?? ariaLabel}
-    {minWidth}
-    visible={positioned}
-    onClose={close}
-  />
-{/if}
diff --git a/apps/staged/src/lib/shared/menu/MenuSurface.svelte b/apps/staged/src/lib/shared/menu/MenuSurface.svelte
deleted file mode 100644
index e23d9d173..000000000
--- a/apps/staged/src/lib/shared/menu/MenuSurface.svelte
+++ /dev/null
@@ -1,487 +0,0 @@
-<script lang="ts">
-  import { tick } from 'svelte';
-  import { ChevronRight } from 'lucide-svelte';
-  import { selectMenuAction } from './actions';
-  import type { MenuActionItem, MenuItem, MenuSubmenuItem } from './types';
-
-  interface Props {
-    items: MenuItem[];
-    left: number;
-    top: number;
-    ariaLabel?: string;
-    minWidth?: number;
-    visible?: boolean;
-    zIndex?: number;
-    onClose: () => void;
-  }
-
-  let {
-    items,
-    left,
-    top,
-    ariaLabel = 'Menu',
-    minWidth = 160,
-    visible = true,
-    zIndex = 1100,
-    onClose,
-  }: Props = $props();
-
-  let menuEl = $state<HTMLDivElement | null>(null);
-  let openSubmenuPath = $state<string | null>(null);
-  let submenuPositions = $state<Record<string, { left: number; top: number }>>({});
-  let closeSubmenuTimer: ReturnType<typeof setTimeout> | null = null;
-
-  const submenuContainers = new Map<string, HTMLElement>();
-  const submenuElements = new Map<string, HTMLElement>();
-  const viewportPadding = 8;
-  const submenuGap = 2;
-
-  function isAction(item: MenuItem): item is MenuActionItem {
-    return item.type === 'action';
-  }
-
-  function isSubmenu(item: MenuItem): item is MenuSubmenuItem {
-    return item.type === 'submenu';
-  }
-
-  function pathFor(parentPath: string, index: number): string {
-    return parentPath ? `${parentPath}.${index}` : `${index}`;
-  }
-
-  function parentPathFor(path: string): string {
-    const lastSeparator = path.lastIndexOf('.');
-    return lastSeparator === -1 ? '' : path.slice(0, lastSeparator);
-  }
-
-  function isSubmenuOpen(path: string): boolean {
-    return openSubmenuPath === path || !!openSubmenuPath?.startsWith(`${path}.`);
-  }
-
-  function clearSubmenuTimer() {
-    if (closeSubmenuTimer) {
-      clearTimeout(closeSubmenuTimer);
-      closeSubmenuTimer = null;
-    }
-  }
-
-  async function openSubmenu(path: string) {
-    clearSubmenuTimer();
-
-    // Pre-compute an initial position from the trigger's rect so the submenu
-    // appears in the right place on first paint, before measurement refines it.
-    const container = submenuContainers.get(path);
-    if (container && !submenuPositions[path]) {
-      const containerRect = container.getBoundingClientRect();
-      submenuPositions = {
-        ...submenuPositions,
-        [path]: {
-          left: containerRect.right + submenuGap,
-          top: containerRect.top,
-        },
-      };
-    }
-
-    openSubmenuPath = path;
-    await updateSubmenuPlacement(path);
-  }
-
-  function closeSubmenu(path: string) {
-    if (!openSubmenuPath) return;
-    if (openSubmenuPath === path || openSubmenuPath.startsWith(`${path}.`)) {
-      const parentPath = parentPathFor(path);
-      openSubmenuPath = parentPath || null;
-    }
-  }
-
-  function closeSubmenuSoon(path: string) {
-    clearSubmenuTimer();
-    closeSubmenuTimer = setTimeout(() => {
-      closeSubmenu(path);
-      closeSubmenuTimer = null;
-    }, 120);
-  }
-
-  function closeChildSubmenus(scope: string) {
-    if (!openSubmenuPath) return;
-    if (!scope) {
-      openSubmenuPath = null;
-      return;
-    }
-    if (openSubmenuPath.startsWith(`${scope}.`)) {
-      openSubmenuPath = scope;
-    }
-  }
-
-  async function updateSubmenuPlacement(path: string) {
-    await tick();
-    const container = submenuContainers.get(path);
-    const submenu = submenuElements.get(path);
-    if (!container || !submenu) return;
-
-    const containerRect = container.getBoundingClientRect();
-    const submenuRect = submenu.getBoundingClientRect();
-    const wouldOverflowRight =
-      containerRect.right + submenuGap + submenuRect.width > window.innerWidth - viewportPadding;
-
-    const left = wouldOverflowRight
-      ? Math.max(viewportPadding, containerRect.left - submenuGap - submenuRect.width)
-      : containerRect.right + submenuGap;
-
-    const preferredTop = containerRect.top;
-    const maxTop = window.innerHeight - submenuRect.height - viewportPadding;
-    const top = Math.max(viewportPadding, Math.min(preferredTop, maxTop));
-
-    submenuPositions = {
-      ...submenuPositions,
-      [path]: { left, top },
-    };
-  }
-
-  function trackSubmenuContainer(node: HTMLElement, path: string) {
-    submenuContainers.set(path, node);
-    return {
-      update(nextPath: string) {
-        submenuContainers.delete(path);
-        path = nextPath;
-        submenuContainers.set(path, node);
-      },
-      destroy() {
-        submenuContainers.delete(path);
-      },
-    };
-  }
-
-  function trackSubmenu(node: HTMLElement, path: string) {
-    submenuElements.set(path, node);
-    void updateSubmenuPlacement(path);
-    return {
-      update(nextPath: string) {
-        submenuElements.delete(path);
-        path = nextPath;
-        submenuElements.set(path, node);
-        void updateSubmenuPlacement(path);
-      },
-      destroy() {
-        submenuElements.delete(path);
-      },
-    };
-  }
-
-  function getFocusableItems(scope: string): HTMLButtonElement[] {
-    if (!menuEl) return [];
-    return Array.from(menuEl.querySelectorAll<HTMLButtonElement>('[role="menuitem"]')).filter(
-      (item) => item.dataset.menuScope === scope && !item.disabled
-    );
-  }
-
-  function focusItem(scope: string, index: number) {
-    const items = getFocusableItems(scope);
-    if (items.length === 0) return;
-    const clamped = Math.max(0, Math.min(index, items.length - 1));
-    items[clamped].focus();
-  }
-
-  function focusButtonByPath(path: string) {
-    if (!menuEl) return;
-    const button = Array.from(menuEl.querySelectorAll<HTMLButtonElement>('[role="menuitem"]')).find(
-      (item) => item.dataset.menuPath === path
-    );
-    button?.focus();
-  }
-
-  function currentItemIndex(items: HTMLButtonElement[], target: EventTarget | null): number {
-    return items.indexOf(target as HTMLButtonElement);
-  }
-
-  async function handleKeydown(event: KeyboardEvent) {
-    if (event.key === 'Escape') {
-      event.preventDefault();
-      event.stopPropagation();
-      onClose();
-      return;
-    }
-
-    const target = event.target as HTMLButtonElement | null;
-    const scope = target?.dataset.menuScope ?? '';
-    const path = target?.dataset.menuPath ?? '';
-    const itemsInScope = getFocusableItems(scope);
-    const index = currentItemIndex(itemsInScope, target);
-
-    switch (event.key) {
-      case 'ArrowDown':
-        if (itemsInScope.length === 0) return;
-        event.preventDefault();
-        focusItem(scope, index < 0 ? 0 : (index + 1) % itemsInScope.length);
-        break;
-      case 'ArrowUp':
-        if (itemsInScope.length === 0) return;
-        event.preventDefault();
-        focusItem(
-          scope,
-          index < 0
-            ? itemsInScope.length - 1
-            : (index - 1 + itemsInScope.length) % itemsInScope.length
-        );
-        break;
-      case 'Home':
-        if (itemsInScope.length === 0) return;
-        event.preventDefault();
-        focusItem(scope, 0);
-        break;
-      case 'End':
-        if (itemsInScope.length === 0) return;
-        event.preventDefault();
-        focusItem(scope, itemsInScope.length - 1);
-        break;
-      case 'ArrowRight':
-        if (target?.dataset.menuKind === 'submenu' && path) {
-          event.preventDefault();
-          await openSubmenu(path);
-          await tick();
-          focusItem(path, 0);
-        }
-        break;
-      case 'ArrowLeft':
-        if (scope) {
-          event.preventDefault();
-          closeSubmenu(scope);
-          focusButtonByPath(scope);
-        }
-        break;
-      case 'Tab':
-        event.preventDefault();
-        onClose();
-        break;
-    }
-  }
-
-  function handleAction(item: MenuActionItem) {
-    selectMenuAction(item, onClose);
-  }
-
-  export function getRect(): DOMRect | null {
-    return menuEl?.getBoundingClientRect() ?? null;
-  }
-
-  export function contains(node: Node): boolean {
-    return menuEl?.contains(node) ?? false;
-  }
-
-  export function focusFirstItem(): void {
-    focusItem('', 0);
-  }
-</script>
-
-{#snippet renderMenuItems(itemsToRender: MenuItem[], scope: string)}
-  {#each itemsToRender as item, index}
-    {@const path = pathFor(scope, index)}
-    {#if item.type === 'separator'}
-      <div class="menu-separator" role="separator"></div>
-    {:else if isAction(item)}
-      <button
-        type="button"
-        class="menu-item"
-        class:danger={item.danger}
-        role="menuitem"
-        tabindex="-1"
-        disabled={item.disabled}
-        data-menu-scope={scope}
-        data-menu-path={path}
-        data-menu-kind="action"
-        onmouseenter={() => closeChildSubmenus(scope)}
-        onclick={(event) => {
-          event.stopPropagation();
-          handleAction(item);
-        }}
-      >
-        {#if item.iconSrc}
-          <img
-            src={item.iconSrc}
-            alt=""
-            width="14"
-            height="14"
-            draggable="false"
-            class="menu-item-icon"
-          />
-        {:else if item.icon}
-          <item.icon size={14} />
-        {/if}
-        <span class="menu-item-label">{item.label}</span>
-      </button>
-    {:else if isSubmenu(item)}
-      <div
-        class="submenu-container"
-        role="none"
-        use:trackSubmenuContainer={path}
-        onmouseenter={() => {
-          if (!item.disabled && item.children.length > 0) {
-            openSubmenu(path);
-          }
-        }}
-        onmouseleave={() => closeSubmenuSoon(path)}
-      >
-        <button
-          type="button"
-          class="menu-item submenu-trigger"
-          role="menuitem"
-          tabindex="-1"
-          disabled={item.disabled || item.children.length === 0}
-          aria-haspopup="menu"
-          aria-expanded={isSubmenuOpen(path)}
-          data-menu-scope={scope}
-          data-menu-path={path}
-          data-menu-kind="submenu"
-          onclick={(event) => {
-            event.stopPropagation();
-            void openSubmenu(path);
-          }}
-        >
-          {#if item.icon}
-            <item.icon size={14} />
-          {/if}
-          <span class="menu-item-label">{item.label}</span>
-          <ChevronRight size={13} class="submenu-chevron" />
-        </button>
-        {#if isSubmenuOpen(path)}
-          <div
-            class="submenu"
-            role="menu"
-            aria-label={item.label}
-            style:left={`${submenuPositions[path]?.left ?? 0}px`}
-            style:top={`${submenuPositions[path]?.top ?? 0}px`}
-            style:visibility={submenuPositions[path] ? 'visible' : 'hidden'}
-            use:trackSubmenu={path}
-          >
-            {@render renderMenuItems(item.children, path)}
-          </div>
-        {/if}
-      </div>
-    {/if}
-  {/each}
-{/snippet}
-
-<div
-  class="menu-surface"
-  role="menu"
-  tabindex="-1"
-  aria-label={ariaLabel}
-  style:left={`${left}px`}
-  style:top={`${top}px`}
-  style:min-width={`${minWidth}px`}
-  style:z-index={String(zIndex)}
-  style:opacity={visible ? '1' : '0'}
-  bind:this={menuEl}
-  onkeydown={handleKeydown}
-  onclick={(event) => event.stopPropagation()}
-  oncontextmenu={(event) => event.stopPropagation()}
->
-  {@render renderMenuItems(items, '')}
-</div>
-
-<style>
-  .menu-surface,
-  .submenu {
-    position: fixed;
-    padding: 4px;
-    border: 1px solid var(--border-muted);
-    border-radius: 8px;
-    background: var(--bg-primary);
-    box-shadow: var(--shadow-elevated);
-    color: var(--text-primary);
-  }
-
-  .menu-surface {
-    max-width: min(320px, calc(100vw - 16px));
-  }
-
-  .menu-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-    min-height: 30px;
-    padding: 6px 10px;
-    border: none;
-    border-radius: 6px;
-    background: transparent;
-    color: var(--text-primary);
-    font-family: inherit;
-    font-size: var(--size-sm);
-    font-weight: 500;
-    line-height: 1.3;
-    text-align: left;
-    cursor: pointer;
-    white-space: nowrap;
-  }
-
-  .menu-item:hover,
-  .menu-item:focus-visible {
-    background: var(--bg-hover);
-    outline: none;
-  }
-
-  .menu-item:disabled {
-    opacity: 0.42;
-    cursor: not-allowed;
-  }
-
-  .menu-item:disabled:hover,
-  .menu-item:disabled:focus-visible {
-    background: transparent;
-  }
-
-  .menu-item :global(svg) {
-    color: var(--text-muted);
-    flex-shrink: 0;
-  }
-
-  .menu-item-icon {
-    flex-shrink: 0;
-    border-radius: 3px;
-  }
-
-  .menu-item.danger {
-    color: var(--ui-danger);
-  }
-
-  .menu-item.danger :global(svg) {
-    color: var(--ui-danger);
-  }
-
-  .menu-item.danger:hover,
-  .menu-item.danger:focus-visible {
-    background: var(--ui-danger-bg);
-  }
-
-  .menu-item-label {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .menu-separator {
-    height: 1px;
-    margin: 4px 0;
-    background: var(--border-muted);
-  }
-
-  .submenu-container {
-    position: relative;
-  }
-
-  .submenu-trigger {
-    padding-right: 8px;
-  }
-
-  .menu-item :global(.submenu-chevron) {
-    margin-left: auto;
-  }
-
-  .submenu {
-    z-index: 1;
-    min-width: 160px;
-    max-width: min(320px, calc(100vw - 16px));
-    max-height: min(400px, calc(100vh - 16px));
-    overflow-y: auto;
-  }
-</style>
diff --git a/apps/staged/src/lib/shared/menu/MoreMenu.svelte b/apps/staged/src/lib/shared/menu/MoreMenu.svelte
deleted file mode 100644
index 478983324..000000000
--- a/apps/staged/src/lib/shared/menu/MoreMenu.svelte
+++ /dev/null
@@ -1,222 +0,0 @@
-<script lang="ts">
-  import { onMount, tick } from 'svelte';
-  import { MoreVertical } from 'lucide-svelte';
-  import MenuSurface from './MenuSurface.svelte';
-  import type { MenuItem } from './types';
-  import {
-    closeAllMenus,
-    registerMenuCloseListener,
-    unregisterMenuCloseListener,
-  } from './coordination';
-
-  interface Props {
-    items: MenuItem[];
-    ariaLabel?: string;
-    title?: string;
-    align?: 'left' | 'right';
-    disabled?: boolean;
-    minWidth?: number;
-  }
-
-  let {
-    items,
-    ariaLabel = 'More actions',
-    title = 'More options',
-    align = 'right',
-    disabled = false,
-    minWidth = 160,
-  }: Props = $props();
-
-  let open = $state(false);
-  let positioned = $state(false);
-  let triggerEl = $state<HTMLButtonElement | null>(null);
-  let surfaceRef = $state<ReturnType<typeof MenuSurface> | undefined>();
-  let left = $state(0);
-  let top = $state(0);
-  let placementToken = 0;
-  const viewportPadding = 8;
-  const menuGap = 4;
-
-  function clamp(value: number, min: number, max: number): number {
-    return Math.max(min, Math.min(value, max));
-  }
-
-  function closeFromCoordinator() {
-    close();
-  }
-
-  async function placeMenu(token: number, focusAfterPlacement = false) {
-    if (!triggerEl || !open) return;
-    positioned = false;
-
-    const triggerRect = triggerEl.getBoundingClientRect();
-    left = align === 'left' ? triggerRect.left : triggerRect.right - minWidth;
-    top = triggerRect.bottom + menuGap;
-    await tick();
-
-    if (token !== placementToken || !open) return;
-    const menuRect = surfaceRef?.getRect();
-    if (!menuRect) return;
-
-    const preferredLeft = align === 'left' ? triggerRect.left : triggerRect.right - menuRect.width;
-    const preferredTop =
-      triggerRect.bottom + menuGap + menuRect.height > window.innerHeight - viewportPadding &&
-      triggerRect.top - menuGap - menuRect.height >= viewportPadding
-        ? triggerRect.top - menuGap - menuRect.height
-        : triggerRect.bottom + menuGap;
-
-    left = clamp(
-      preferredLeft,
-      viewportPadding,
-      window.innerWidth - menuRect.width - viewportPadding
-    );
-    top = clamp(
-      preferredTop,
-      viewportPadding,
-      window.innerHeight - menuRect.height - viewportPadding
-    );
-    positioned = true;
-    await tick();
-
-    if (focusAfterPlacement && token === placementToken) {
-      surfaceRef?.focusFirstItem();
-    }
-  }
-
-  function toggle(event: MouseEvent) {
-    event.stopPropagation();
-    if (disabled) return;
-
-    if (open) {
-      close();
-      return;
-    }
-
-    closeAllMenus(closeFromCoordinator);
-    open = true;
-    const token = ++placementToken;
-    void placeMenu(token, true);
-  }
-
-  function close() {
-    if (!open) return;
-    open = false;
-    positioned = false;
-  }
-
-  function handlePointerDown(event: PointerEvent) {
-    if (!open) return;
-    const target = event.target as Node;
-    if (triggerEl?.contains(target) || surfaceRef?.contains(target)) return;
-    close();
-  }
-
-  function handleKeydown(event: KeyboardEvent) {
-    if (!open || event.key !== 'Escape') return;
-    event.preventDefault();
-    close();
-    triggerEl?.focus();
-  }
-
-  function handleScroll(event: Event) {
-    if (!open) return;
-    const target = event.target as Node | null;
-    if (target && (triggerEl?.contains(target) || surfaceRef?.contains(target))) return;
-    close();
-  }
-
-  function closeForViewportChange() {
-    if (open) close();
-  }
-
-  onMount(() => {
-    registerMenuCloseListener(closeFromCoordinator);
-    window.addEventListener('pointerdown', handlePointerDown, true);
-    window.addEventListener('keydown', handleKeydown, true);
-    window.addEventListener('scroll', handleScroll, true);
-    window.addEventListener('resize', closeForViewportChange);
-
-    return () => {
-      unregisterMenuCloseListener(closeFromCoordinator);
-      window.removeEventListener('pointerdown', handlePointerDown, true);
-      window.removeEventListener('keydown', handleKeydown, true);
-      window.removeEventListener('scroll', handleScroll, true);
-      window.removeEventListener('resize', closeForViewportChange);
-    };
-  });
-
-  $effect(() => {
-    items;
-    if (open) {
-      const token = ++placementToken;
-      void placeMenu(token);
-    }
-  });
-</script>
-
-<div class="more-menu-root">
-  <button
-    type="button"
-    class="more-menu-trigger"
-    class:open
-    {disabled}
-    aria-haspopup="menu"
-    aria-expanded={open}
-    aria-label={title}
-    {title}
-    onclick={toggle}
-    bind:this={triggerEl}
-  >
-    <MoreVertical size={16} />
-  </button>
-
-  {#if open}
-    <MenuSurface
-      bind:this={surfaceRef}
-      {items}
-      {left}
-      {top}
-      {ariaLabel}
-      {minWidth}
-      visible={positioned}
-      onClose={close}
-    />
-  {/if}
-</div>
-
-<style>
-  .more-menu-root {
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .more-menu-trigger {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    border: none;
-    border-radius: 6px;
-    background: transparent;
-    color: var(--text-faint);
-    cursor: pointer;
-    transition:
-      background-color 0.15s ease,
-      color 0.15s ease;
-  }
-
-  .more-menu-trigger:hover,
-  .more-menu-trigger.open,
-  .more-menu-trigger:focus-visible {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-    outline: none;
-  }
-
-  .more-menu-trigger:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-  }
-</style>
diff --git a/apps/staged/src/lib/shared/menu/actions.test.ts b/apps/staged/src/lib/shared/menu/actions.test.ts
deleted file mode 100644
index 825002fd2..000000000
--- a/apps/staged/src/lib/shared/menu/actions.test.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-import { selectMenuAction } from './actions';
-import type { MenuActionItem } from './types';
-
-function actionItem(overrides: Partial<MenuActionItem> = {}): MenuActionItem {
-  return {
-    type: 'action',
-    label: 'Action',
-    onSelect: vi.fn(),
-    ...overrides,
-  };
-}
-
-describe('selectMenuAction', () => {
-  it('runs the action before closing the menu', () => {
-    const calls: string[] = [];
-    const item = actionItem({
-      onSelect: () => {
-        calls.push('select');
-      },
-    });
-
-    selectMenuAction(item, () => calls.push('close'));
-
-    expect(calls).toEqual(['select', 'close']);
-  });
-
-  it('does not close when closeOnSelect is false', () => {
-    const onClose = vi.fn();
-    const item = actionItem({ closeOnSelect: false });
-
-    selectMenuAction(item, onClose);
-
-    expect(item.onSelect).toHaveBeenCalledOnce();
-    expect(onClose).not.toHaveBeenCalled();
-  });
-
-  it('ignores disabled items', () => {
-    const onClose = vi.fn();
-    const item = actionItem({ disabled: true });
-
-    selectMenuAction(item, onClose);
-
-    expect(item.onSelect).not.toHaveBeenCalled();
-    expect(onClose).not.toHaveBeenCalled();
-  });
-});
diff --git a/apps/staged/src/lib/shared/menu/actions.ts b/apps/staged/src/lib/shared/menu/actions.ts
deleted file mode 100644
index 9560a8656..000000000
--- a/apps/staged/src/lib/shared/menu/actions.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { MenuActionItem } from './types';
-
-export function selectMenuAction(item: MenuActionItem, onClose: () => void): void {
-  if (item.disabled) return;
-
-  let result: void | Promise<void>;
-  try {
-    result = item.onSelect();
-  } finally {
-    if (item.closeOnSelect !== false) {
-      onClose();
-    }
-  }
-
-  void result;
-}
diff --git a/apps/staged/src/lib/shared/menu/coordination.ts b/apps/staged/src/lib/shared/menu/coordination.ts
deleted file mode 100644
index 89f01fb75..000000000
--- a/apps/staged/src/lib/shared/menu/coordination.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-type CloseMenu = () => void;
-
-const closeListeners = new Set<CloseMenu>();
-
-export function registerMenuCloseListener(listener: CloseMenu): void {
-  closeListeners.add(listener);
-}
-
-export function unregisterMenuCloseListener(listener: CloseMenu): void {
-  closeListeners.delete(listener);
-}
-
-export function closeAllMenus(except?: CloseMenu): void {
-  for (const listener of closeListeners) {
-    if (listener !== except) {
-      listener();
-    }
-  }
-}
diff --git a/apps/staged/src/lib/shared/menu/types.ts b/apps/staged/src/lib/shared/menu/types.ts
deleted file mode 100644
index 5e330fbb7..000000000
--- a/apps/staged/src/lib/shared/menu/types.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export type MenuIconComponent = typeof import('lucide-svelte').MoreVertical;
-
-export type MenuActionItem = {
-  type: 'action';
-  label: string;
-  icon?: MenuIconComponent;
-  iconSrc?: string;
-  disabled?: boolean;
-  danger?: boolean;
-  closeOnSelect?: boolean;
-  onSelect: () => void | Promise<void>;
-};
-
-export type MenuSeparatorItem = {
-  type: 'separator';
-};
-
-export type MenuSubmenuItem = {
-  type: 'submenu';
-  label: string;
-  icon?: MenuIconComponent;
-  disabled?: boolean;
-  children: MenuItem[];
-};
-
-export type MenuItem = MenuActionItem | MenuSeparatorItem | MenuSubmenuItem;
diff --git a/apps/staged/tsconfig.app.json b/apps/staged/tsconfig.app.json
index 31c18cfd8..b6ea6d545 100644
--- a/apps/staged/tsconfig.app.json
+++ b/apps/staged/tsconfig.app.json
@@ -15,7 +15,12 @@
      */
     "allowJs": true,
     "checkJs": true,
-    "moduleDetection": "force"
+    "moduleDetection": "force",
+    "baseUrl": ".",
+    "paths": {
+      "$lib": ["./src/lib"],
+      "$lib/*": ["./src/lib/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
 }
diff --git a/apps/staged/tsconfig.json b/apps/staged/tsconfig.json
index d32ff6820..0bf6e8be8 100644
--- a/apps/staged/tsconfig.json
+++ b/apps/staged/tsconfig.json
@@ -1,4 +1,11 @@
 {
   "files": [],
-  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "$lib": ["./src/lib"],
+      "$lib/*": ["./src/lib/*"]
+    }
+  }
 }
diff --git a/apps/staged/vite.config.ts b/apps/staged/vite.config.ts
index a63c689b5..396d216f3 100644
--- a/apps/staged/vite.config.ts
+++ b/apps/staged/vite.config.ts
@@ -2,6 +2,7 @@ import { readFileSync } from 'node:fs';
 import { resolve } from 'node:path';
 import { defineConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
+import tailwindcss from '@tailwindcss/vite';
 
 const port = parseInt(process.env.VITE_PORT || '5174', 10);
 const packageJson = JSON.parse(
@@ -13,7 +14,12 @@ export default defineConfig({
   define: {
     __APP_VERSION__: JSON.stringify(packageJson.version),
   },
-  plugins: [svelte()],
+  plugins: [svelte(), tailwindcss()],
+  resolve: {
+    alias: {
+      $lib: resolve(import.meta.dirname, 'src/lib'),
+    },
+  },
   server: {
     port,
     strictPort: true,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2b92c6a41..2cb541029 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -58,7 +58,7 @@ importers:
         version: 5.53.6
       svelte-check:
         specifier: ^4.3.4
-        version: 4.4.4(picomatch@4.0.3)(svelte@5.53.6)(typescript@5.9.3)
+        version: 4.4.4(picomatch@4.0.4)(svelte@5.53.6)(typescript@5.9.3)
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
@@ -198,9 +198,6 @@ importers:
       ansi-to-html:
         specifier: ^0.7.2
         version: 0.7.2
-      lucide-svelte:
-        specifier: ^0.577.0
-        version: 0.577.0(svelte@5.53.6)
       marked:
         specifier: ^17.0.1
         version: 17.0.3
@@ -211,9 +208,21 @@ importers:
         specifier: ^3.20.0
         version: 3.23.0
     devDependencies:
+      '@fontsource-variable/inter':
+        specifier: ^5.2.8
+        version: 5.2.8
+      '@internationalized/date':
+        specifier: ^3.12.2
+        version: 3.12.2
+      '@lucide/svelte':
+        specifier: ^1.17.0
+        version: 1.17.0(svelte@5.53.6)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^6.2.1
         version: 6.2.4(svelte@5.53.6)(vite@7.3.1(@types/node@24.11.0)(jiti@2.6.1)(lightningcss@1.32.0))
+      '@tailwindcss/vite':
+        specifier: ^4.0.0
+        version: 4.3.0(vite@7.3.1(@types/node@24.11.0)(jiti@2.6.1)(lightningcss@1.32.0))
       '@tauri-apps/cli':
         specifier: ^2.10.0
         version: 2.10.1
@@ -223,18 +232,42 @@ importers:
       '@types/node':
         specifier: ^24.10.1
         version: 24.11.0
+      bits-ui:
+        specifier: ^2.18.1
+        version: 2.18.1(@internationalized/date@3.12.2)(svelte@5.53.6)
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       prettier:
         specifier: ^3.7.4
         version: 3.8.1
       prettier-plugin-svelte:
         specifier: ^3.4.1
         version: 3.5.0(prettier@3.8.1)(svelte@5.53.6)
+      shadcn-svelte:
+        specifier: ^1.2.7
+        version: 1.2.7(svelte@5.53.6)
       svelte:
         specifier: ^5.46.4
         version: 5.53.6
       svelte-check:
         specifier: ^4.3.4
         version: 4.4.4(picomatch@4.0.4)(svelte@5.53.6)(typescript@5.9.3)
+      svelte-sonner:
+        specifier: ^1.1.1
+        version: 1.1.1(svelte@5.53.6)
+      tailwind-merge:
+        specifier: ^3.6.0
+        version: 3.6.0
+      tailwind-variants:
+        specifier: ^3.2.2
+        version: 3.2.2(tailwind-merge@3.6.0)(tailwindcss@4.2.3)
+      tailwindcss:
+        specifier: ^4.0.0
+        version: 4.2.3
+      tw-animate-css:
+        specifier: ^1.4.0
+        version: 1.4.0
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
@@ -638,6 +671,18 @@ packages:
       '@noble/hashes':
         optional: true
 
+  '@floating-ui/core@1.7.5':
+    resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
+
+  '@floating-ui/dom@1.7.6':
+    resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
+
+  '@floating-ui/utils@0.2.11':
+    resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
+
+  '@fontsource-variable/inter@5.2.8':
+    resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==}
+
   '@humanfs/core@0.19.2':
     resolution: {integrity: sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==}
     engines: {node: '>=18.18.0'}
@@ -664,6 +709,9 @@ packages:
   '@iconify/utils@3.1.0':
     resolution: {integrity: sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==}
 
+  '@internationalized/date@3.12.2':
+    resolution: {integrity: sha512-FY1Y+H64NDs+HAF6omlnWxm3mEpfgaCSWtL5l551ZZfImA+kGjPFgrnJrGjH6lfmLL0g8Z/mBu1R3kufeCp6Jw==}
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -680,6 +728,11 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@lucide/svelte@1.17.0':
+    resolution: {integrity: sha512-q06YCFBN5CO8cd1ADmLCxWRVMVb7xxvHzqC0lvNoxGa+FLW6Cd1Y1AOxgbQk4Iwe68vkAMCRveNHint4WoaVKg==}
+    peerDependencies:
+      svelte: ^5
+
   '@mermaid-js/parser@1.0.0':
     resolution: {integrity: sha512-vvK0Hi/VWndxoh03Mmz6wa1KDriSPjS2XMZL/1l19HFwygiObEEoEwSDxOqyLzzAI6J2PU3261JjTMTO7x+BPw==}
 
@@ -737,7 +790,6 @@ packages:
     resolution: {integrity: sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.59.0':
     resolution: {integrity: sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==}
@@ -791,7 +843,6 @@ packages:
     resolution: {integrity: sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.59.0':
     resolution: {integrity: sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==}
@@ -891,39 +942,75 @@ packages:
       svelte: ^5.0.0
       vite: ^6.3.0 || ^7.0.0
 
+  '@swc/helpers@0.5.23':
+    resolution: {integrity: sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==}
+
   '@tailwindcss/node@4.2.3':
     resolution: {integrity: sha512-dhXFXkW2dGvX4r/fi24gyXM0t1mFMrpykQjqrdA4SuavaMagm4SY1u5G2SCJwu1/0x/5RlZJ2VPjP3mKYQfCkA==}
 
+  '@tailwindcss/node@4.3.0':
+    resolution: {integrity: sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==}
+
   '@tailwindcss/oxide-android-arm64@4.2.3':
     resolution: {integrity: sha512-0Jmt1U/zPqeKp1+fvgI3qMqrV5b/EcFIbE5Dl5KdPl5Ri6e+95nlYNjfB3w8hJBeASI4IQSnIMz0tdVP1AVO4g==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [android]
 
+  '@tailwindcss/oxide-android-arm64@4.3.0':
+    resolution: {integrity: sha512-TJPiq67tKlLuObP6RkwvVGDoxCMBVtDgKkLfa/uyj7/FyxvQwHS+UOnVrXXgbEsfUaMgiVvC4KbJnRr26ho4Ng==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
   '@tailwindcss/oxide-darwin-arm64@4.2.3':
     resolution: {integrity: sha512-c+/Etn/nghKBhd9fh2diG+3SEV1VTTPLlqH209yleofi28H87Cy6g1vsd3W3kf6r/dR5g4G4TEwHxo2Ydn6yFw==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [darwin]
 
+  '@tailwindcss/oxide-darwin-arm64@4.3.0':
+    resolution: {integrity: sha512-oMN/WZRb+SO37BmUElEgeEWuU8E/HXRkiODxJxLe1UTHVXLrdVSgfaJV7pSlhRGMSOiXLuxTIjfsF3wYvz8cgQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@tailwindcss/oxide-darwin-x64@4.2.3':
     resolution: {integrity: sha512-1DrKKsdJTLuLWVdpaLZ0j/g9YbCZyP9xnwSqEvl3gY4ZHdXmX7TwVAHkoWUljOq7JK5zvzIGhrYmfE/2DJ5qaA==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [darwin]
 
+  '@tailwindcss/oxide-darwin-x64@4.3.0':
+    resolution: {integrity: sha512-N6CUmu4a6bKVADfw77p+iw6Yd9Q3OBhe0veaDX+QazfuVYlQsHfDgxBrsjQ/IW+zywL8mTrNd0SdJT/zgtvMdA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
   '@tailwindcss/oxide-freebsd-x64@4.2.3':
     resolution: {integrity: sha512-HE6HHZYF8k7m80eVQ0RBvRGBdvvLvCpHiT38IRH9JSnBlt1T7gDzWoslWjmpXQFuqlRpzkCpbdKJa3NxWMfgVA==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [freebsd]
 
+  '@tailwindcss/oxide-freebsd-x64@4.3.0':
+    resolution: {integrity: sha512-zDL5hBkQdH5C6MpqbK3gQAgP80tsMwSI26vjOzjJtNCMUo0lFgOItzHKBIupOZNQxt3ouPH7RPhvNhiTfCe5CQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.3':
     resolution: {integrity: sha512-Li2wVd2kkKlKkTdpo7ujHSv6kxD1UYMvulAraikyvVf6AKNZ/VHbm8XoSNimZ+dF7SOFaDD2VAT64SK7WKcbjQ==}
     engines: {node: '>= 20'}
     cpu: [arm]
     os: [linux]
 
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.0':
+    resolution: {integrity: sha512-R06HdNi7A7OEoMsf6d4tjZ71RCWnZQPHj2mnotSFURjNLdBC+cIgXQ7l81CqeoiQftjf6OOblxXMInMgN2VzMA==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
   '@tailwindcss/oxide-linux-arm64-gnu@4.2.3':
     resolution: {integrity: sha512-otIiImZaHj9MiDK02ItoWxIVcMTZVAX2F1c32bg9y7ecV0AnN5JHDZqIO8LxWsTuig1d+Bjg0cBWn4A9sGJO9Q==}
     engines: {node: '>= 20'}
@@ -931,6 +1018,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.0':
+    resolution: {integrity: sha512-qTJHELX8jetjhRQHCLilkVLmybpzNQAtaI/gaoVoidn/ufbNDbAo8KlK2J+yPoc8wQxvDxCmh/5lr8nC1+lTbg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
   '@tailwindcss/oxide-linux-arm64-musl@4.2.3':
     resolution: {integrity: sha512-MmIA32rNEOrjh6wnevlR3OjjlCuwgZ4JMJo7Vrhk4Fk56Vxi7EeF7cekSKwvlrnfcn/ERC1LdcG3sFneU8WdoA==}
     engines: {node: '>= 20'}
@@ -938,6 +1032,13 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
+    resolution: {integrity: sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
   '@tailwindcss/oxide-linux-x64-gnu@4.2.3':
     resolution: {integrity: sha512-BiCy1YV0IKO+xbD7gyZnENU4jdwDygeGQjncJoeIE5Kp4UqWHFsKUSJ3pp7vYURrqVzwJX2xD5gQeGnoXp4xPQ==}
     engines: {node: '>= 20'}
@@ -945,6 +1046,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
+    resolution: {integrity: sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
   '@tailwindcss/oxide-linux-x64-musl@4.2.3':
     resolution: {integrity: sha512-venvyAu0AMKdr0c1Oz23IJJdZ72zSwKyHrLvqQV1cn49vPAJk3AuVtDkJ1ayk1sYI4M4j8Jv6ZGflpaP0QVSXQ==}
     engines: {node: '>= 20'}
@@ -952,6 +1060,13 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@tailwindcss/oxide-linux-x64-musl@4.3.0':
+    resolution: {integrity: sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
   '@tailwindcss/oxide-wasm32-wasi@4.2.3':
     resolution: {integrity: sha512-e3kColrZZCdtbwIOc07cNQ2zNf1sTPXTYLjjPlsgsaf+ttzAg/hOlDyEgHoOlBGxM88nPxeVaOGe9ThqVzPncg==}
     engines: {node: '>=14.0.0'}
@@ -964,22 +1079,50 @@ packages:
       - '@emnapi/wasi-threads'
       - tslib
 
+  '@tailwindcss/oxide-wasm32-wasi@4.3.0':
+    resolution: {integrity: sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
   '@tailwindcss/oxide-win32-arm64-msvc@4.2.3':
     resolution: {integrity: sha512-qpwoUPzfu71cppxOtcz4LXMR1brljS13yOcAAnVHKIL++NJvSQKZBKlP39pVowd+G6Mq34YAbf4CUUYdLWL9gQ==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [win32]
 
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.0':
+    resolution: {integrity: sha512-Pe+RPVTi1T+qymuuRpcdvwSVZjnll/f7n8gBxMMh3xLTctMDKqpdfGimbMyioqtLhUYZxdJ9wGNhV7MKHvgZsQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
   '@tailwindcss/oxide-win32-x64-msvc@4.2.3':
     resolution: {integrity: sha512-dTRIlLRC5lCRHqO5DLb+A18HCvS394axmzqfnRNLptKVw7WuckpUwo1Z87Yw74mesbeIhnQTA2SZbRcIfVlwxg==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [win32]
 
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.0':
+    resolution: {integrity: sha512-Mvrf2kXW/yeW/OTezZlCGOirXRcUuLIBx/5Y12BaPM7wJoryG6dfS/NJL8aBPqtTEx/Vm4T4vKzFUcKDT+TKUA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
   '@tailwindcss/oxide@4.2.3':
     resolution: {integrity: sha512-YyhwSBcxHLS3CU2Mk3dXDuVm8/Ia0+XvfpT8s9YQoICppkUeoobB3hgyGMYbyQ4vn6VgWH9bdv5UnzhTz2NPTQ==}
     engines: {node: '>= 20'}
 
+  '@tailwindcss/oxide@4.3.0':
+    resolution: {integrity: sha512-F7HZGBeN9I0/AuuJS5PwcD8xayx5ri5GhjYUDBEVYUkexyA/giwbDNjRVrxSezE3T250OU2K/wp/ltWx3UOefg==}
+    engines: {node: '>= 20'}
+
   '@tailwindcss/postcss@4.2.3':
     resolution: {integrity: sha512-MehdHOQRVFf300r8F430s4cf2QL+nSjFUNIndX5ZMqDLyMwTnyL4RDZsoDsDU+ThzT5eCj1+erSDKBWdn462Nw==}
 
@@ -988,6 +1131,11 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
 
+  '@tailwindcss/vite@4.3.0':
+    resolution: {integrity: sha512-t6J3OrB5Fc0ExuhohouH0fWUGMYL6PTLhW+E7zIk/pdbnJARZDCwjBznFnkh5ynRnIRSI4YjtTH0t6USjJISrw==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7 || ^8
+
   '@tauri-apps/api@2.10.1':
     resolution: {integrity: sha512-hKL/jWf293UDSUN09rR69hrToyIXBb8CjGaWC7gfinvnQrBVvnLr08FeFi38gxtugAVyVcTa5/FD/Xnkb1siBw==}
 
@@ -1382,6 +1530,13 @@ packages:
   bidi-js@1.0.3:
     resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
 
+  bits-ui@2.18.1:
+    resolution: {integrity: sha512-KkemzKFH4T3gt3H+P86JcnAWExjByv/6vlwjm/BoCwTPHu03yiCdxbghdJLvFReQTe0acCAiRcKfmixxD6XvlA==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      '@internationalized/date': ^3.8.1
+      svelte: ^5.33.0
+
   brace-expansion@5.0.5:
     resolution: {integrity: sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==}
     engines: {node: 18 || 20 || >=22}
@@ -1432,6 +1587,10 @@ packages:
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
+  commander@14.0.3:
+    resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
+    engines: {node: '>=20'}
+
   commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
@@ -1706,6 +1865,10 @@ packages:
     resolution: {integrity: sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==}
     engines: {node: '>=10.13.0'}
 
+  enhanced-resolve@5.22.0:
+    resolution: {integrity: sha512-xYcDWrpELkFzz9SpZ3PlI6Eu6eD93Yf0WLDRxikGhWJ3MAir2SNZTIVCVZqZ/NUyx8AdMc2gT9C0gPiw18kG+A==}
+    engines: {node: '>=10.13.0'}
+
   entities@2.2.0:
     resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
 
@@ -2315,6 +2478,9 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  node-fetch-native@1.6.7:
+    resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
+
   node-releases@2.0.27:
     resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
 
@@ -2531,6 +2697,20 @@ packages:
   roughjs@4.6.6:
     resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==}
 
+  runed@0.28.0:
+    resolution: {integrity: sha512-k2xx7RuO9hWcdd9f+8JoBeqWtYrm5CALfgpkg2YDB80ds/QE4w0qqu34A7fqiAwiBBSBQOid7TLxwxVC27ymWQ==}
+    peerDependencies:
+      svelte: ^5.7.0
+
+  runed@0.35.1:
+    resolution: {integrity: sha512-2F4Q/FZzbeJTFdIS/PuOoPRSm92sA2LhzTnv6FXhCoENb3huf5+fDuNOg1LNvGOouy3u/225qxmuJvcV3IZK5Q==}
+    peerDependencies:
+      '@sveltejs/kit': ^2.21.0
+      svelte: ^5.7.0
+    peerDependenciesMeta:
+      '@sveltejs/kit':
+        optional: true
+
   rw@1.3.3:
     resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
 
@@ -2558,6 +2738,12 @@ packages:
   set-cookie-parser@2.7.2:
     resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==}
 
+  shadcn-svelte@1.2.7:
+    resolution: {integrity: sha512-mWuQk4H4gtV+J2wJQ7nEPKNnB/v86AALFryZU0SSM7ChHmJJMZ1kH+qIuxYKrXm9vOOOcSWHRsWzPDB71DnjYA==}
+    hasBin: true
+    peerDependencies:
+      svelte: ^5.0.0
+
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -2612,6 +2798,17 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       typescript: '>=5.0.0'
 
+  svelte-sonner@1.1.1:
+    resolution: {integrity: sha512-5cd3p7wa4cq0NsqslMwdlPb7x1JglEZ/GKrLePWNr5bCxR1nagAVrY01FRFrXfUGs41miLt3C327+8XJo5BzZw==}
+    peerDependencies:
+      svelte: ^5.0.0
+
+  svelte-toolbelt@0.10.6:
+    resolution: {integrity: sha512-YWuX+RE+CnWYx09yseAe4ZVMM7e7GRFZM6OYWpBKOb++s+SQ8RBIMMe+Bs/CznBMc0QPLjr+vDBxTAkozXsFXQ==}
+    engines: {node: '>=18', pnpm: '>=8.7.0'}
+    peerDependencies:
+      svelte: ^5.30.2
+
   svelte@5.53.6:
     resolution: {integrity: sha512-lP5DGF3oDDI9fhHcSpaBiJEkFLuS16h92DhM1L5K1lFm0WjOmUh1i2sNkBBk8rkxJRpob0dBE75jRfUzGZUOGA==}
     engines: {node: '>=18'}
@@ -2619,9 +2816,28 @@ packages:
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
+  tabbable@6.4.0:
+    resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
+
+  tailwind-merge@3.6.0:
+    resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
+
+  tailwind-variants@3.2.2:
+    resolution: {integrity: sha512-Mi4kHeMTLvKlM98XPnK+7HoBPmf4gygdFmqQPaDivc3DpYS6aIY6KiG/PgThrGvii5YZJqRsPz0aPyhoFzmZgg==}
+    engines: {node: '>=16.x', pnpm: '>=7.x'}
+    peerDependencies:
+      tailwind-merge: '>=3.0.0'
+      tailwindcss: '*'
+    peerDependenciesMeta:
+      tailwind-merge:
+        optional: true
+
   tailwindcss@4.2.3:
     resolution: {integrity: sha512-fA/NX5gMf0ooCLISgB0wScaWgaj6rjTN2SVAwleURjiya7ITNkV+VMmoHtKkldP6CIZoYCZyxb8zP/e2TWoEtQ==}
 
+  tailwindcss@4.3.0:
+    resolution: {integrity: sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==}
+
   tapable@2.3.3:
     resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
     engines: {node: '>=6'}
@@ -2670,6 +2886,12 @@ packages:
     resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
     engines: {node: '>=6.10'}
 
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  tw-animate-css@1.4.0:
+    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -3198,6 +3420,19 @@ snapshots:
 
   '@exodus/bytes@1.15.0': {}
 
+  '@floating-ui/core@1.7.5':
+    dependencies:
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/dom@1.7.6':
+    dependencies:
+      '@floating-ui/core': 1.7.5
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/utils@0.2.11': {}
+
+  '@fontsource-variable/inter@5.2.8': {}
+
   '@humanfs/core@0.19.2':
     dependencies:
       '@humanfs/types': 0.15.0
@@ -3222,6 +3457,10 @@ snapshots:
       '@iconify/types': 2.0.0
       mlly: 1.8.0
 
+  '@internationalized/date@3.12.2':
+    dependencies:
+      '@swc/helpers': 0.5.23
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -3241,6 +3480,10 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@lucide/svelte@1.17.0(svelte@5.53.6)':
+    dependencies:
+      svelte: 5.53.6
+
   '@mermaid-js/parser@1.0.0':
     dependencies:
       langium: 4.2.1
@@ -3413,6 +3656,10 @@ snapshots:
       vite: 7.3.1(@types/node@24.11.0)(jiti@2.6.1)(lightningcss@1.32.0)
       vitefu: 1.1.1(vite@7.3.1(@types/node@24.11.0)(jiti@2.6.1)(lightningcss@1.32.0))
 
+  '@swc/helpers@0.5.23':
+    dependencies:
+      tslib: 2.8.1
+
   '@tailwindcss/node@4.2.3':
     dependencies:
       '@jridgewell/remapping': 2.3.5
@@ -3423,42 +3670,88 @@ snapshots:
       source-map-js: 1.2.1
       tailwindcss: 4.2.3
 
+  '@tailwindcss/node@4.3.0':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.22.0
+      jiti: 2.6.1
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.3.0
+
   '@tailwindcss/oxide-android-arm64@4.2.3':
     optional: true
 
+  '@tailwindcss/oxide-android-arm64@4.3.0':
+    optional: true
+
   '@tailwindcss/oxide-darwin-arm64@4.2.3':
     optional: true
 
+  '@tailwindcss/oxide-darwin-arm64@4.3.0':
+    optional: true
+
   '@tailwindcss/oxide-darwin-x64@4.2.3':
     optional: true
 
+  '@tailwindcss/oxide-darwin-x64@4.3.0':
+    optional: true
+
   '@tailwindcss/oxide-freebsd-x64@4.2.3':
     optional: true
 
+  '@tailwindcss/oxide-freebsd-x64@4.3.0':
+    optional: true
+
   '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.3':
     optional: true
 
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.0':
+    optional: true
+
   '@tailwindcss/oxide-linux-arm64-gnu@4.2.3':
     optional: true
 
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.0':
+    optional: true
+
   '@tailwindcss/oxide-linux-arm64-musl@4.2.3':
     optional: true
 
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
+    optional: true
+
   '@tailwindcss/oxide-linux-x64-gnu@4.2.3':
     optional: true
 
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
+    optional: true
+
   '@tailwindcss/oxide-linux-x64-musl@4.2.3':
     optional: true
 
+  '@tailwindcss/oxide-linux-x64-musl@4.3.0':
+    optional: true
+
   '@tailwindcss/oxide-wasm32-wasi@4.2.3':
     optional: true
 
+  '@tailwindcss/oxide-wasm32-wasi@4.3.0':
+    optional: true
+
   '@tailwindcss/oxide-win32-arm64-msvc@4.2.3':
     optional: true
 
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.0':
+    optional: true
+
   '@tailwindcss/oxide-win32-x64-msvc@4.2.3':
     optional: true
 
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.0':
+    optional: true
+
   '@tailwindcss/oxide@4.2.3':
     optionalDependencies:
       '@tailwindcss/oxide-android-arm64': 4.2.3
@@ -3474,6 +3767,21 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.2.3
       '@tailwindcss/oxide-win32-x64-msvc': 4.2.3
 
+  '@tailwindcss/oxide@4.3.0':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.3.0
+      '@tailwindcss/oxide-darwin-arm64': 4.3.0
+      '@tailwindcss/oxide-darwin-x64': 4.3.0
+      '@tailwindcss/oxide-freebsd-x64': 4.3.0
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.0
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.0
+      '@tailwindcss/oxide-linux-arm64-musl': 4.3.0
+      '@tailwindcss/oxide-linux-x64-gnu': 4.3.0
+      '@tailwindcss/oxide-linux-x64-musl': 4.3.0
+      '@tailwindcss/oxide-wasm32-wasi': 4.3.0
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.0
+      '@tailwindcss/oxide-win32-x64-msvc': 4.3.0
+
   '@tailwindcss/postcss@4.2.3':
     dependencies:
       '@alloc/quick-lru': 5.2.0
@@ -3487,6 +3795,13 @@ snapshots:
       postcss-selector-parser: 6.0.10
       tailwindcss: 4.2.3
 
+  '@tailwindcss/vite@4.3.0(vite@7.3.1(@types/node@24.11.0)(jiti@2.6.1)(lightningcss@1.32.0))':
+    dependencies:
+      '@tailwindcss/node': 4.3.0
+      '@tailwindcss/oxide': 4.3.0
+      tailwindcss: 4.3.0
+      vite: 7.3.1(@types/node@24.11.0)(jiti@2.6.1)(lightningcss@1.32.0)
+
   '@tauri-apps/api@2.10.1': {}
 
   '@tauri-apps/cli-darwin-arm64@2.10.1':
@@ -3895,6 +4210,19 @@ snapshots:
     dependencies:
       require-from-string: 2.0.2
 
+  bits-ui@2.18.1(@internationalized/date@3.12.2)(svelte@5.53.6):
+    dependencies:
+      '@floating-ui/core': 1.7.5
+      '@floating-ui/dom': 1.7.6
+      '@internationalized/date': 3.12.2
+      esm-env: 1.2.2
+      runed: 0.35.1(svelte@5.53.6)
+      svelte: 5.53.6
+      svelte-toolbelt: 0.10.6(svelte@5.53.6)
+      tabbable: 6.4.0
+    transitivePeerDependencies:
+      - '@sveltejs/kit'
+
   brace-expansion@5.0.5:
     dependencies:
       balanced-match: 4.0.4
@@ -3943,6 +4271,8 @@ snapshots:
 
   comma-separated-tokens@2.0.3: {}
 
+  commander@14.0.3: {}
+
   commander@7.2.0: {}
 
   commander@8.3.0: {}
@@ -4232,6 +4562,11 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.3.3
 
+  enhanced-resolve@5.22.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.3
+
   entities@2.2.0: {}
 
   entities@4.5.0: {}
@@ -5109,6 +5444,8 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
+  node-fetch-native@1.6.7: {}
+
   node-releases@2.0.27: {}
 
   obug@2.1.1: {}
@@ -5386,6 +5723,18 @@ snapshots:
       points-on-curve: 0.2.0
       points-on-path: 0.2.1
 
+  runed@0.28.0(svelte@5.53.6):
+    dependencies:
+      esm-env: 1.2.2
+      svelte: 5.53.6
+
+  runed@0.35.1(svelte@5.53.6):
+    dependencies:
+      dequal: 2.0.3
+      esm-env: 1.2.2
+      lz-string: 1.5.0
+      svelte: 5.53.6
+
   rw@1.3.3: {}
 
   sade@1.8.1:
@@ -5413,6 +5762,14 @@ snapshots:
 
   set-cookie-parser@2.7.2: {}
 
+  shadcn-svelte@1.2.7(svelte@5.53.6):
+    dependencies:
+      commander: 14.0.3
+      node-fetch-native: 1.6.7
+      postcss: 8.5.6
+      svelte: 5.53.6
+      tailwind-merge: 3.6.0
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
@@ -5470,11 +5827,11 @@ snapshots:
 
   stylis@4.3.6: {}
 
-  svelte-check@4.4.4(picomatch@4.0.3)(svelte@5.53.6)(typescript@5.9.3):
+  svelte-check@4.4.4(picomatch@4.0.4)(svelte@5.53.6)(typescript@5.9.3):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
       chokidar: 4.0.3
-      fdir: 6.5.0(picomatch@4.0.3)
+      fdir: 6.5.0(picomatch@4.0.4)
       picocolors: 1.1.1
       sade: 1.8.1
       svelte: 5.53.6
@@ -5482,17 +5839,19 @@ snapshots:
     transitivePeerDependencies:
       - picomatch
 
-  svelte-check@4.4.4(picomatch@4.0.4)(svelte@5.53.6)(typescript@5.9.3):
+  svelte-sonner@1.1.1(svelte@5.53.6):
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.31
-      chokidar: 4.0.3
-      fdir: 6.5.0(picomatch@4.0.4)
-      picocolors: 1.1.1
-      sade: 1.8.1
+      runed: 0.28.0(svelte@5.53.6)
+      svelte: 5.53.6
+
+  svelte-toolbelt@0.10.6(svelte@5.53.6):
+    dependencies:
+      clsx: 2.1.1
+      runed: 0.35.1(svelte@5.53.6)
+      style-to-object: 1.0.14
       svelte: 5.53.6
-      typescript: 5.9.3
     transitivePeerDependencies:
-      - picomatch
+      - '@sveltejs/kit'
 
   svelte@5.53.6:
     dependencies:
@@ -5515,8 +5874,20 @@ snapshots:
 
   symbol-tree@3.2.4: {}
 
+  tabbable@6.4.0: {}
+
+  tailwind-merge@3.6.0: {}
+
+  tailwind-variants@3.2.2(tailwind-merge@3.6.0)(tailwindcss@4.2.3):
+    dependencies:
+      tailwindcss: 4.2.3
+    optionalDependencies:
+      tailwind-merge: 3.6.0
+
   tailwindcss@4.2.3: {}
 
+  tailwindcss@4.3.0: {}
+
   tapable@2.3.3: {}
 
   tinybench@2.9.0: {}
@@ -5555,6 +5926,10 @@ snapshots:
 
   ts-dedent@2.2.0: {}
 
+  tslib@2.8.1: {}
+
+  tw-animate-css@1.4.0: {}
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1

From 6188d8c5b74a759491c9cf494ec253160c5b605b Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Tue, 2 Jun 2026 14:47:28 +1000
Subject: [PATCH 02/28] refactor(staged): decouple app chrome mode from the
 diff theme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The app chrome and diff viewer shared a single theme axis: whatever Shiki
syntax theme the user picked drove both the diff highlighting AND every
chrome CSS variable via createAdaptiveTheme(). Split this into two
independent axes.

App chrome — fixed light/dark mode:
- Add a persisted `mode: light | dark | system` preference (store key
  `app-mode`, default `system`). `system` resolves via
  `prefers-color-scheme` and re-applies on its `change` event.
- Add fixed DARK_BASE (laserwave-derived, matching the prior :root
  defaults) and LIGHT_BASE (github-light-derived) color sets.
- applyChromeTheme() now feeds those fixed bases into createAdaptiveTheme()
  instead of getTheme(), so chrome no longer derives from the diff theme.
  --theme-is-dark (read by the darkMode store) reflects the resolved mode.

Diff viewer — keeps its full set of selectable themes, scoped to the diff:
- Rename the `syntaxTheme` preference to `diffTheme` (store key
  `diff-theme`, migrating from the legacy `syntax-theme` key). The full
  SYNTAX_THEMES list and setSyntaxTheme() are retained.
- selectDiffTheme() no longer writes app chrome variables. It only
  re-highlights the diff (via a bumped version prop) and recomputes a
  diff-scoped var map from a second createAdaptiveTheme() run.
- DiffModal applies that var map onto the diff-viewer container element so
  the diff area fully re-themes (bg/text/tints) while surrounding chrome
  stays on the fixed mode, and passes the version as syntaxThemeVersion to
  trigger re-highlighting.

Settings: split the single "Theme" control into an "Appearance" toggle
group (Light / Dark / System) bound to `mode` and a "Diff theme" swatch
picker bound to `diffTheme`.

Deviation from the note's minimal sketch: because diff lines consume the
full chrome var set (--bg-primary, --text-primary, …), the diff container
receives the entire adaptive var map — not just the --diff-* subset — so a
dark diff theme renders correctly on light chrome and vice versa (option i,
true re-theming).

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../src/lib/features/diff/DiffModal.svelte    |  14 +-
 .../settings/GeneralSettingsPanel.svelte      |  46 ++++-
 .../features/settings/preferences.svelte.ts   | 174 +++++++++++++++---
 3 files changed, 199 insertions(+), 35 deletions(-)

diff --git a/apps/staged/src/lib/features/diff/DiffModal.svelte b/apps/staged/src/lib/features/diff/DiffModal.svelte
index 37527fe85..78406c643 100644
--- a/apps/staged/src/lib/features/diff/DiffModal.svelte
+++ b/apps/staged/src/lib/features/diff/DiffModal.svelte
@@ -32,7 +32,7 @@
   import DiffCommitSessionLauncher from './DiffCommitSessionLauncher.svelte';
   import DiffReferenceSection from './DiffReferenceSection.svelte';
   import NewSessionModal from '../sessions/NewSessionModal.svelte';
-  import { getPreferredAgent } from '../settings/preferences.svelte';
+  import { getPreferredAgent, preferences } from '../settings/preferences.svelte';
   import { agentState, REMOTE_AGENTS } from '../agents/agent.svelte';
   import { createDiffViewerState } from './diffViewerState.svelte';
   import { createReviewState } from './reviewState.svelte';
@@ -976,6 +976,17 @@
     checkSearchInitialization();
   });
 
+  // Scope the diff theme's CSS variables onto the diff-viewer container so the
+  // diff area reflects the chosen diff theme while the app chrome stays on its
+  // fixed light/dark mode.
+  $effect(() => {
+    const el = diffViewerContainerEl;
+    if (!el) return;
+    for (const [prop, value] of Object.entries(preferences.diffThemeVars)) {
+      el.style.setProperty(prop, value);
+    }
+  });
+
   // Set up keyboard navigation for diff viewer and search
   $effect(() => {
     // Create search navigation handlers
@@ -1357,6 +1368,7 @@
           annotations={revealedAnnotations}
           {annotationsRevealed}
           searchState={searchState.state}
+          syntaxThemeVersion={preferences.diffThemeVersion}
           onAddComment={readonly ? undefined : handleAddComment}
           onUpdateComment={readonly ? undefined : handleUpdateComment}
           onDeleteComment={readonly ? undefined : handleDeleteCommentFromViewer}
diff --git a/apps/staged/src/lib/features/settings/GeneralSettingsPanel.svelte b/apps/staged/src/lib/features/settings/GeneralSettingsPanel.svelte
index d265840d2..0ffb9f835 100644
--- a/apps/staged/src/lib/features/settings/GeneralSettingsPanel.svelte
+++ b/apps/staged/src/lib/features/settings/GeneralSettingsPanel.svelte
@@ -6,14 +6,17 @@
   import ChevronDown from '@lucide/svelte/icons/chevron-down';
   import * as Select from '$lib/components/ui/select';
   import * as Popover from '$lib/components/ui/popover';
+  import * as ToggleGroup from '$lib/components/ui/toggle-group';
   import { Label } from '$lib/components/ui/label';
   import {
     preferences,
     getAvailableSyntaxThemes,
-    selectSyntaxTheme,
+    selectDiffTheme,
+    setMode,
     setAutoReviewMode,
     loadAllThemePreviewColors,
     isLightTheme,
+    type AppMode,
     type AutoReviewMode,
     type ThemePreviewColors,
   } from './preferences.svelte';
@@ -23,6 +26,12 @@
     { value: 'after-changes', label: 'After changes' },
   ];
 
+  const modeOptions: { value: AppMode; label: string }[] = [
+    { value: 'light', label: 'Light' },
+    { value: 'dark', label: 'Dark' },
+    { value: 'system', label: 'System' },
+  ];
+
   type ThemeFilter = 'all' | 'light' | 'dark';
 
   const allThemes = $derived(getAvailableSyntaxThemes());
@@ -39,7 +48,7 @@
         )
   );
 
-  const activeColors = $derived(previewColors.get(preferences.syntaxTheme));
+  const activeColors = $derived(previewColors.get(preferences.diffTheme));
 
   onMount(() => {
     loadAllThemePreviewColors().then((colors) => {
@@ -48,7 +57,7 @@
   });
 
   function handleThemeSelect(name: string) {
-    selectSyntaxTheme(name);
+    selectDiffTheme(name);
     dropdownOpen = false;
   }
 </script>
@@ -66,12 +75,33 @@
 
   <div class="panel-body">
     <div class="field">
-      <span class="field-label">Theme</span>
+      <span class="field-label">Appearance</span>
+      <ToggleGroup.Root
+        type="single"
+        variant="outline"
+        value={preferences.mode}
+        onValueChange={(v) => v && setMode(v as AppMode)}
+        class="w-fit"
+      >
+        {#each modeOptions as opt (opt.value)}
+          <ToggleGroup.Item value={opt.value} aria-label={opt.label}>
+            {opt.label}
+          </ToggleGroup.Item>
+        {/each}
+      </ToggleGroup.Root>
+      <p class="field-description">
+        <Info size={12} />
+        The app's light or dark mode. System follows your operating system.
+      </p>
+    </div>
+
+    <div class="field">
+      <span class="field-label">Diff theme</span>
       <Popover.Root bind:open={dropdownOpen}>
         <Popover.Trigger class="theme-dropdown-trigger">
           <span class="trigger-swatch" style:background={activeColors?.bg ?? 'var(--bg-primary)'}>
             <span style:color={activeColors?.fg ?? 'var(--text-primary)'}
-              >{preferences.syntaxTheme}</span
+              >{preferences.diffTheme}</span
             >
           </span>
           <ChevronDown size={14} />
@@ -94,7 +124,7 @@
           </div>
           {#each themes as theme (theme.name)}
             {@const colors = previewColors.get(theme.name)}
-            {@const isActive = preferences.syntaxTheme === theme.name}
+            {@const isActive = preferences.diffTheme === theme.name}
             <button
               class="theme-swatch"
               class:active={isActive}
@@ -116,6 +146,10 @@
           {/each}
         </Popover.Content>
       </Popover.Root>
+      <p class="field-description">
+        <Info size={12} />
+        Syntax highlighting and colors for the diff viewer only.
+      </p>
     </div>
 
     <div class="field">
diff --git a/apps/staged/src/lib/features/settings/preferences.svelte.ts b/apps/staged/src/lib/features/settings/preferences.svelte.ts
index 505db662b..006dc464d 100644
--- a/apps/staged/src/lib/features/settings/preferences.svelte.ts
+++ b/apps/staged/src/lib/features/settings/preferences.svelte.ts
@@ -19,7 +19,7 @@ import {
   type ThemePreviewColors,
 } from '../diff/highlighter';
 import { initPersistentStore, getStoreValue, setStoreValue } from '../../shared/persistentStore';
-import { createAdaptiveTheme, themeToVarMap } from '../../theme';
+import { createAdaptiveTheme, themeToVarMap, type ThemeGitColors } from '../../theme';
 
 // Re-export for convenience
 export { isLightTheme, loadAllThemePreviewColors, type ThemePreviewColors };
@@ -34,16 +34,57 @@ const SIZE_MAX = 24;
 const SIZE_DEFAULT = 13;
 
 const SIZE_STORE_KEY = 'size-base';
+/** Legacy key: a single theme used to drive both chrome and diff. Migrated to `diff-theme`. */
 const SYNTAX_THEME_STORE_KEY = 'syntax-theme';
+/** The user-selectable theme that themes the diff viewer only. */
+const DIFF_THEME_STORE_KEY = 'diff-theme';
+/** The app chrome appearance: light / dark / system. */
+const APP_MODE_STORE_KEY = 'app-mode';
 const RECENT_AGENTS_STORE_KEY = 'recent-agents';
 const AUTO_REVIEW_STORE_KEY = 'auto-start-code-reviews';
 /** Maximum number of recent agents to remember. */
 const RECENT_AGENTS_MAX = 10;
 
-const DEFAULT_SYNTAX_THEME: SyntaxThemeName = 'laserwave';
+const DEFAULT_DIFF_THEME: SyntaxThemeName = 'laserwave';
+
+/** App chrome appearance mode. `system` follows `prefers-color-scheme`. */
+export type AppMode = 'light' | 'dark' | 'system';
+const DEFAULT_APP_MODE: AppMode = 'system';
 
 export type AutoReviewMode = 'never' | 'after-changes';
 
+// =============================================================================
+// Fixed chrome base colors
+// =============================================================================
+
+/**
+ * Base colors fed into createAdaptiveTheme() for the app chrome. The chrome no
+ * longer derives from the user's chosen diff/syntax theme — it has exactly one
+ * fixed light and one fixed dark identity, selected by the resolved app mode.
+ */
+interface ModeBaseColors {
+  bg: string;
+  fg: string;
+  comment: string;
+  gitColors: ThemeGitColors;
+}
+
+/** Dark chrome — sourced from the previous laserwave-derived app.css :root defaults. */
+const DARK_BASE: ModeBaseColors = {
+  bg: '#27212e',
+  fg: '#ffffff',
+  comment: '#91889b',
+  gitColors: { added: '#3fb950', deleted: '#f85149', modified: '#d29922' },
+};
+
+/** Light chrome — derived from a clean, legible light palette (github-light). */
+const LIGHT_BASE: ModeBaseColors = {
+  bg: '#ffffff',
+  fg: '#24292e',
+  comment: '#6e7781',
+  gitColors: { added: '#1a7f37', deleted: '#cf222e', modified: '#9a6700' },
+};
+
 // =============================================================================
 // Reactive State
 // =============================================================================
@@ -63,8 +104,18 @@ export interface ThemeEntry {
 export const preferences = $state({
   /** Current UI size base (px) */
   sizeBase: SIZE_DEFAULT,
-  /** Current syntax theme name */
-  syntaxTheme: DEFAULT_SYNTAX_THEME as string,
+  /** App chrome appearance mode (light / dark / system). */
+  mode: DEFAULT_APP_MODE as AppMode,
+  /** Current diff-viewer theme name (Shiki theme, scoped to the diff only). */
+  diffTheme: DEFAULT_DIFF_THEME as string,
+  /**
+   * CSS custom properties scoped to the diff-viewer container, derived from the
+   * selected diff theme. Applied onto the diff wrapper element so the diff area
+   * reflects the chosen theme while the surrounding chrome stays on `mode`.
+   */
+  diffThemeVars: {} as Record<string, string>,
+  /** Bumped whenever the diff theme changes, to trigger diff re-highlighting. */
+  diffThemeVersion: 0,
   /**
    * Ordered list of recently used AI agent IDs, most-recent first.
    * Used to pick the best available agent for a given context (local vs remote).
@@ -84,20 +135,62 @@ function applySize() {
   document.documentElement.style.setProperty('--size-base', `${preferences.sizeBase}px`);
 }
 
-function applyAdaptiveTheme() {
+/** Resolve `system` to the OS preference; pass `light`/`dark` through. */
+function resolveMode(mode: AppMode): 'light' | 'dark' {
+  if (mode === 'system') {
+    return typeof window !== 'undefined' &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light';
+  }
+  return mode;
+}
+
+/**
+ * Apply the app chrome theme onto the document root from the fixed base colors
+ * selected by the resolved app mode. This drives every chrome CSS variable
+ * (including `--theme-is-dark`, which the `darkMode` store observes) and is
+ * independent of the user's diff theme.
+ */
+function applyChromeTheme() {
+  const base = resolveMode(preferences.mode) === 'dark' ? DARK_BASE : LIGHT_BASE;
+  const adaptiveTheme = createAdaptiveTheme(base.bg, base.fg, base.comment, base.gitColors);
+  const varMap = themeToVarMap(adaptiveTheme);
+  const style = document.documentElement.style;
+  for (const [prop, value] of Object.entries(varMap)) {
+    style.setProperty(prop, value);
+  }
+}
+
+/**
+ * Recompute the diff-viewer-scoped CSS variables from the active diff theme.
+ * A second createAdaptiveTheme() run lets the diff area re-theme fully (bg,
+ * text, tints) without touching the chrome — the resulting var map is applied
+ * to the diff wrapper element by DiffModal. Also bumps the version so the diff
+ * re-highlights against the new Shiki theme.
+ */
+function applyDiffTheme() {
   const themeInfo = getTheme();
-  if (themeInfo) {
-    const adaptiveTheme = createAdaptiveTheme(themeInfo.bg, themeInfo.fg, themeInfo.comment, {
-      added: themeInfo.added,
-      deleted: themeInfo.deleted,
-      modified: themeInfo.modified,
-    });
-    const varMap = themeToVarMap(adaptiveTheme);
-    const style = document.documentElement.style;
-    for (const [prop, value] of Object.entries(varMap)) {
-      style.setProperty(prop, value);
+  if (!themeInfo) return;
+  const adaptiveTheme = createAdaptiveTheme(themeInfo.bg, themeInfo.fg, themeInfo.comment, {
+    added: themeInfo.added,
+    deleted: themeInfo.deleted,
+    modified: themeInfo.modified,
+  });
+  preferences.diffThemeVars = themeToVarMap(adaptiveTheme);
+  preferences.diffThemeVersion += 1;
+}
+
+let systemModeListenerAttached = false;
+/** Re-apply chrome when the OS appearance changes, while in `system` mode. */
+function ensureSystemModeListener() {
+  if (systemModeListenerAttached || typeof window === 'undefined') return;
+  systemModeListenerAttached = true;
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if (preferences.mode === 'system') {
+      applyChromeTheme();
     }
-  }
+  });
 }
 
 async function loadSqAvailabilityForDefault(): Promise<boolean> {
@@ -124,13 +217,24 @@ export async function initPreferences(): Promise<void> {
   }
   applySize();
 
-  // Load syntax theme
-  const savedTheme = await getStoreValue<string>(SYNTAX_THEME_STORE_KEY);
-  if (savedTheme && SYNTAX_THEMES.includes(savedTheme as SyntaxThemeName)) {
-    preferences.syntaxTheme = savedTheme;
+  // Load app chrome mode and apply the fixed light/dark chrome theme.
+  const savedMode = await getStoreValue<AppMode>(APP_MODE_STORE_KEY);
+  if (savedMode === 'light' || savedMode === 'dark' || savedMode === 'system') {
+    preferences.mode = savedMode;
+  }
+  ensureSystemModeListener();
+  applyChromeTheme();
+
+  // Load diff theme (migrating from the legacy combined `syntax-theme` key).
+  let savedDiffTheme = await getStoreValue<string>(DIFF_THEME_STORE_KEY);
+  if (!savedDiffTheme) {
+    savedDiffTheme = await getStoreValue<string>(SYNTAX_THEME_STORE_KEY);
+  }
+  if (savedDiffTheme && SYNTAX_THEMES.includes(savedDiffTheme as SyntaxThemeName)) {
+    preferences.diffTheme = savedDiffTheme;
   }
-  await setSyntaxTheme(preferences.syntaxTheme as SyntaxThemeName);
-  applyAdaptiveTheme();
+  await setSyntaxTheme(preferences.diffTheme as SyntaxThemeName);
+  applyDiffTheme();
 
   // Load recent agents list (with migration from legacy single-agent key)
   const savedRecent = await getStoreValue<string[]>(RECENT_AGENTS_STORE_KEY);
@@ -161,20 +265,34 @@ export async function initPreferences(): Promise<void> {
 // =============================================================================
 
 /**
- * Get all available syntax themes, sorted alphabetically.
+ * Get all available syntax themes (for the diff theme picker), sorted alphabetically.
  */
 export function getAvailableSyntaxThemes(): ThemeEntry[] {
   return SYNTAX_THEMES.map((name) => ({ name, isCustom: false }));
 }
 
 /**
- * Select a syntax theme by name.
+ * Set the app chrome appearance mode (light / dark / system).
+ *
+ * Only re-themes the chrome — the diff theme is untouched.
+ */
+export function setMode(mode: AppMode): void {
+  preferences.mode = mode;
+  setStoreValue(APP_MODE_STORE_KEY, mode);
+  applyChromeTheme();
+}
+
+/**
+ * Select a diff-viewer theme by name.
+ *
+ * Re-highlights the diff via the highlighter singleton and updates the
+ * diff-scoped CSS variables. Deliberately does NOT touch the app chrome.
  */
-export async function selectSyntaxTheme(name: string): Promise<void> {
+export async function selectDiffTheme(name: string): Promise<void> {
   await setSyntaxTheme(name as SyntaxThemeName);
-  preferences.syntaxTheme = name;
-  await setStoreValue(SYNTAX_THEME_STORE_KEY, name);
-  applyAdaptiveTheme();
+  preferences.diffTheme = name;
+  await setStoreValue(DIFF_THEME_STORE_KEY, name);
+  applyDiffTheme();
 }
 
 // =============================================================================

From 2cbb96a573309c8caaf1933caec07d202e233f15 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Tue, 2 Jun 2026 16:35:19 +1000
Subject: [PATCH 03/28] fix(staged): bump global --radius to restore button
 roundness
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The shadcn-svelte migration translated the old hand-set footer button
radii (6px compact / 8px enlarged) into token-backed radius utilities
driven by a `--radius: 4px` base, silently roughly halving them (md=3.2px,
lg=4px). Since the shared Button derives its corner radius entirely from
the global `--radius` token, bump that base to 8px so the derived scale
(md≈6.4px, lg=8px) restores parity with the pre-migration values. This
uniformly softens all shadcn surfaces, which matches the intent.

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/app.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/staged/src/app.css b/apps/staged/src/app.css
index b2c40ded6..692576f7a 100644
--- a/apps/staged/src/app.css
+++ b/apps/staged/src/app.css
@@ -149,7 +149,7 @@
   --border: var(--border-muted);
   --input: var(--border-muted);
   --ring: var(--border-emphasis);
-  --radius: 4px; /* invented — Staged has no radius token */
+  --radius: 8px; /* invented — Staged has no radius token; sized to restore pre-shadcn button roundness (md≈6.4px, lg=8px) */
 
   /* ── Gaps: shadcn tokens with no Staged analogue. Button (Step 4) does not
    *    consume these; later shadcn primitives (sidebar, chart) will force a

From 82157986551997d2f3c8db0700d83ec547393eb0 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Tue, 2 Jun 2026 16:38:56 +1000
Subject: [PATCH 04/28] fix(staged): restore lighter light-mode git accent
 greens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The shadcn migration's LIGHT_BASE chrome documents itself as derived from
the github-light palette, and its bg/fg/comment values do match plain
`github-light` (#ffffff / #24292e). But its gitColors were sourced from a
different theme — `github-light-default` — whose accents are darker and
more muted, darkening the added green from #28a745 to #1a7f37 (and shifting
deleted/modified off the plain github-light values, including modified from
blue #2188ff to brown #9a6700).

Align gitColors with the github-light theme the base actually derives from
so the light-mode added/commit greens (and deleted/modified accents) match
the pre-migration appearance.

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/lib/features/settings/preferences.svelte.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/staged/src/lib/features/settings/preferences.svelte.ts b/apps/staged/src/lib/features/settings/preferences.svelte.ts
index 006dc464d..eac478c04 100644
--- a/apps/staged/src/lib/features/settings/preferences.svelte.ts
+++ b/apps/staged/src/lib/features/settings/preferences.svelte.ts
@@ -82,7 +82,7 @@ const LIGHT_BASE: ModeBaseColors = {
   bg: '#ffffff',
   fg: '#24292e',
   comment: '#6e7781',
-  gitColors: { added: '#1a7f37', deleted: '#cf222e', modified: '#9a6700' },
+  gitColors: { added: '#28a745', deleted: '#d73a49', modified: '#2188ff' },
 };
 
 // =============================================================================

From 4e69a2cbf4ba6120437a020b2d708d022ea3b38f Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Wed, 3 Jun 2026 11:23:25 +1000
Subject: [PATCH 05/28] fix(staged): drop shadow-xs from the outline button
 variant

The shared shadcn Button outline variant baked in shadow-xs, which
rendered an unwanted drop shadow on RHS footer buttons (e.g. branch
cards). Remove shadow-xs from the outline variant so these buttons sit
flat against their surfaces.

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/lib/components/ui/button/button.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/staged/src/lib/components/ui/button/button.svelte b/apps/staged/src/lib/components/ui/button/button.svelte
index 4122fdeac..662390959 100644
--- a/apps/staged/src/lib/components/ui/button/button.svelte
+++ b/apps/staged/src/lib/components/ui/button/button.svelte
@@ -9,7 +9,7 @@
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary/80',
         outline:
-          'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs',
+          'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
         secondary:
           'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
         ghost:

From 5be196866eaa7ce9e06c6c40e09581e7238c4f7e Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Wed, 3 Jun 2026 12:16:10 +1000
Subject: [PATCH 06/28] fix(staged): lift light-mode floating surfaces off the
 dirty gray
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Light-mode dialogs, popovers, dropdown/context menus, select content, and
shadcn cards rendered on a dirty #ebebeb gray instead of a clean panel.

createAdaptiveTheme() in src/lib/theme.ts computes floating surfaces with
elevate(0.08), where elevate(amount) = adjust(primaryBg, dir * amount) and
dir = isDark ? 1 : -1. The algorithm is dark-oriented: it lightens surfaces
to make them read as lifted. In light mode dir = -1, so the full 0.08 step
darkened floating surfaces all the way to #ebebeb against the white page —
the shadcn primitives now read --bg-elevated for these surfaces, so the
darkening became visible as a regression.

Gate the light branch on isDark and halve the step: dark themes keep
elevate(0.08) (lighten), light themes use adjust(primaryBg, -0.04) for a
subtle ~#f5f5f5 off-white surface that reads as a distinct, lifted panel
without going gray. The ring-1 ring-foreground/10 + shadow-md the shadcn
primitives already apply carry the rest of the elevation. The hover line is
unchanged — a slight darken on hover is correct.

Verified with `pnpm check` (svelte-check + tsc): 0 errors, 0 warnings.

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/lib/theme.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/staged/src/lib/theme.ts b/apps/staged/src/lib/theme.ts
index 08d325439..5cccf936c 100644
--- a/apps/staged/src/lib/theme.ts
+++ b/apps/staged/src/lib/theme.ts
@@ -364,7 +364,14 @@ export function createAdaptiveTheme(
       primary: primaryBg, // Editor islands - may be adjusted from syntax theme for contrast
       chrome: chromeColor, // Calculated for consistent contrast ratio
       deepest: deepestColor, // Darker than chrome (2x the luminance diff)
-      elevated: elevate(0.08), // Floating elements (dropdowns, tooltips)
+      // Floating surfaces (dialogs, popovers, dropdowns, cards) sit ON TOP of
+      // content and should read as lifted, not recessed. Dark themes lighten to
+      // achieve this. Light themes sit on a white base, where the full downward
+      // elevate(0.08) over-darkened them into a dirty gray (#ebebeb); halve it to
+      // a subtle off-white surface (~#f5f5f5) that reads as a distinct panel
+      // without going gray, with the ring/shadow the shadcn primitives apply
+      // carrying the rest of the lift.
+      elevated: isDark ? elevate(0.08) : adjust(primaryBg, -0.04),
       hover: elevate(0.06), // Hover state
     },
 

From 06417f9ec7feafb40c52ca6a0a0510d5bd01a430 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Wed, 3 Jun 2026 12:16:15 +1000
Subject: [PATCH 07/28] fix(staged): reload session when SessionModal is
 reopened
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The shadcn-svelte migration changed SessionModal from a conditionally
mounted component ({#if openSessionId}) into a persistently mounted one
controlled by an `open` prop (the shadcn Dialog pattern). Its initial
data load lived in onMount, which now fires exactly once when the parent
card mounts — at which point sessionId is still the empty-string
fallback (sessionId={openSessionId ?? ''}). getSession('') returns null,
so loadSession() sets error = 'Session not found', and because onMount
never runs again the modal is stuck on that error for every subsequent
open.

Move the session load out of onMount into a reactive $effect keyed on
`open` + `sessionId`, so the modal (re)loads whenever it is opened or the
target session changes, and stops polling when it closes. onMount now
only registers the search shortcut target. This restores correct
behaviour for the always-mounted callers (BranchCard, ProjectSection)
and is a no-op for the keyed {#each} caller (SessionLauncher), which
already remounts per session id.

Verified with `pnpm check` (svelte-check + tsc): 0 errors, 0 warnings.

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../lib/features/sessions/SessionModal.svelte | 34 ++++++++++++++-----
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/apps/staged/src/lib/features/sessions/SessionModal.svelte b/apps/staged/src/lib/features/sessions/SessionModal.svelte
index 5e5ce9ffd..96e82135d 100644
--- a/apps/staged/src/lib/features/sessions/SessionModal.svelte
+++ b/apps/staged/src/lib/features/sessions/SessionModal.svelte
@@ -375,19 +375,12 @@
   // Lifecycle
   // =========================================================================
 
-  onMount(async () => {
+  onMount(() => {
     unregisterSearchTarget = registerSearchShortcutTarget({
       find: openSearch,
       next: nextMatch,
       previous: previousMatch,
     });
-
-    await loadSession();
-    if (session?.status === 'running') {
-      startPolling();
-    }
-    // Focus input on open
-    tick().then(() => inputEl?.focus());
   });
 
   onDestroy(() => {
@@ -396,6 +389,31 @@
     unregisterSearchTarget?.();
   });
 
+  // This modal is mounted once and reused across opens (the `open` prop toggles
+  // visibility), so the session must be (re)loaded reactively rather than in
+  // onMount — otherwise it would load once with whatever sessionId was set at
+  // mount time (often empty) and never refresh. Re-run whenever the modal is
+  // opened or the target session changes.
+  $effect(() => {
+    // Track open + sessionId only; loadSession()'s own state writes must not
+    // retrigger this effect.
+    const isOpen = open;
+    const id = sessionId;
+    if (!isOpen || !id) {
+      stopPolling();
+      return;
+    }
+    stopPolling();
+    loadSession().then(() => {
+      if (closed || !open || sessionId !== id) return;
+      if (session?.status === 'running') {
+        startPolling();
+      }
+      // Focus input on open
+      tick().then(() => inputEl?.focus());
+    });
+  });
+
   function isComposerFocused(): boolean {
     return document.activeElement === inputEl;
   }

From 7b84b254573cb864d00398ca1ab32d7ea534b90e Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Wed, 3 Jun 2026 13:51:58 +1000
Subject: [PATCH 08/28] style(staged): blend chat messages background toward
 the composer surface

The chat messages area (.modal-content) in SessionModal inherited
--bg-primary while the composer/input area (.input-area) paints
--bg-chrome, leaving the two regions visually identical apart from the
input's top border.

Set the messages-area background to a 50/50 color-mix of the two
endpoints so it reads as a distinct surface that sits halfway toward the
composer:

  background: color-mix(in srgb, var(--bg-primary) 50%, var(--bg-chrome) 50%);

Using color-mix over the existing theme variables keeps the blend
adaptive across light/dark modes rather than hardcoding a hex. The
composer's --bg-chrome background is left untouched.

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/lib/features/sessions/SessionModal.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/staged/src/lib/features/sessions/SessionModal.svelte b/apps/staged/src/lib/features/sessions/SessionModal.svelte
index 96e82135d..d27ace2ad 100644
--- a/apps/staged/src/lib/features/sessions/SessionModal.svelte
+++ b/apps/staged/src/lib/features/sessions/SessionModal.svelte
@@ -1623,6 +1623,9 @@
     overflow-y: auto;
     padding: 16px;
     min-height: 0;
+    /* Blend the messages-area surface halfway toward the composer's
+       --bg-chrome so it reads as distinct from the input field below. */
+    background: color-mix(in srgb, var(--bg-primary) 50%, var(--bg-chrome) 50%);
   }
 
   /* Custom scrollbar */

From 9ba88cbf570204f2625405af32577b2bb70d24a2 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Wed, 3 Jun 2026 13:54:37 +1000
Subject: [PATCH 09/28] style(staged): blend note dialog content background
 toward the chrome surface

The note content area (.modal-content in NoteModal.svelte) set no
background of its own, so it inherited the shadcn Dialog.Content surface
(bg-popover -> --bg-elevated). That left it visually identical to the
dialog's surrounding chrome.

Set the note content background to a 50/50 color-mix between
--bg-elevated (its current inherited surface) and --bg-chrome (the same
endpoint the chat messages area blends toward), so it reads as a distinct
surface that sits halfway toward the chrome:

  background: color-mix(in srgb, var(--bg-elevated) 50%, var(--bg-chrome) 50%);

Using color-mix over the theme variables keeps the blend adaptive across
light/dark modes, mirroring the chat dialog change (7b84b254). The dialog
header, footer/next-steps action bar, and input fields are left untouched.

Verified with pnpm check (svelte-check + tsc): 0 errors, 0 warnings.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/lib/features/notes/NoteModal.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/staged/src/lib/features/notes/NoteModal.svelte b/apps/staged/src/lib/features/notes/NoteModal.svelte
index 0a9f2e0c1..4db595005 100644
--- a/apps/staged/src/lib/features/notes/NoteModal.svelte
+++ b/apps/staged/src/lib/features/notes/NoteModal.svelte
@@ -372,6 +372,7 @@
     overflow-y: auto;
     padding: 24px;
     min-height: 0;
+    background: color-mix(in srgb, var(--bg-elevated) 50%, var(--bg-chrome) 50%);
   }
 
   .modal-content::-webkit-scrollbar {

From 8088139b5a26229263b35347cd53920d421a7fb0 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Wed, 3 Jun 2026 13:55:24 +1000
Subject: [PATCH 10/28] fix(staged): use mode-aware token for light-mode dialog
 scrim

The shadcn dialog and alert-dialog overlay primitives hardcoded a
bg-black/10 backdrop, ignoring the mode-aware --shadow-overlay token.
In light mode this rendered a near-white scrim (only 10% black over the
white page) instead of the pre-migration overlay.

Replace bg-black/10 with the token-backed bg-[var(--shadow-overlay)] in
both overlay primitives. --shadow-overlay already encodes the full rgba
with alpha (0.4 light / 0.6 dark), is live on the document root via
applyChromeTheme(), and has a static fallback in app.css, so the
arbitrary-value utility applies it directly with no opacity modifier.

This restores the pre-migration scrim in light mode while leaving dark
mode essentially unchanged. The supports-backdrop-filter:backdrop-blur-xs
class and the theme.ts token are untouched.

Verified with pnpm check (svelte-check + tsc): 0 errors, 0 warnings.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../lib/components/ui/alert-dialog/alert-dialog-overlay.svelte  | 2 +-
 apps/staged/src/lib/components/ui/dialog/dialog-overlay.svelte  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
index c20edb260..c458e4b17 100644
--- a/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
+++ b/apps/staged/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -13,7 +13,7 @@
   bind:ref
   data-slot="alert-dialog-overlay"
   class={cn(
-    'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50',
+    'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-[var(--shadow-overlay)] duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50',
     className
   )}
   {...restProps}
diff --git a/apps/staged/src/lib/components/ui/dialog/dialog-overlay.svelte b/apps/staged/src/lib/components/ui/dialog/dialog-overlay.svelte
index f17b74dcf..e0e6706e9 100644
--- a/apps/staged/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/apps/staged/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -13,7 +13,7 @@
   bind:ref
   data-slot="dialog-overlay"
   class={cn(
-    'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50',
+    'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-[var(--shadow-overlay)] duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50',
     className
   )}
   {...restProps}

From e82751c48c10efe0d700be2789e1f7545620d787 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Wed, 3 Jun 2026 14:06:02 +1000
Subject: [PATCH 11/28] fix(staged): stop header tooltip auto-opening when
 dialogs open
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Opening the chat session (SessionModal) or note detail (NoteModal)
dialog auto-popped the tooltip on the first header button.

When a bits-ui Dialog opens it auto-focuses the first focusable
element inside the content — here that is the first header
Tooltip.Trigger button. bits-ui tooltips open on focus (not just
hover), so the focused trigger's tooltip appeared immediately and
unprompted every time the dialog opened.

Pass onOpenAutoFocus={(e) => e.preventDefault()} to both
Dialog.Content elements (the prop is spread through to
DialogPrimitive.Content) so the dialog no longer forces focus onto
the first header button on open, leaving its tooltip closed until
the user actually hovers or focuses it. Esc-to-close and focus
trapping (driven by bits-ui's document-level handlers) are
unaffected.

Verified with pnpm check (svelte-check + tsc): 0 errors, 0 warnings.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/lib/features/notes/NoteModal.svelte       | 1 +
 apps/staged/src/lib/features/sessions/SessionModal.svelte | 1 +
 2 files changed, 2 insertions(+)

diff --git a/apps/staged/src/lib/features/notes/NoteModal.svelte b/apps/staged/src/lib/features/notes/NoteModal.svelte
index 4db595005..b7f7e2ba3 100644
--- a/apps/staged/src/lib/features/notes/NoteModal.svelte
+++ b/apps/staged/src/lib/features/notes/NoteModal.svelte
@@ -196,6 +196,7 @@
   <Dialog.Content
     class="sm:max-w-[700px] h-[80vh] max-h-[900px] p-0 gap-0 overflow-hidden flex flex-col"
     showCloseButton={false}
+    onOpenAutoFocus={(e) => e.preventDefault()}
   >
     <Dialog.Header
       class="flex-row items-center justify-between gap-3 px-4 py-3 border-b border-[var(--border-subtle)] flex-shrink-0"
diff --git a/apps/staged/src/lib/features/sessions/SessionModal.svelte b/apps/staged/src/lib/features/sessions/SessionModal.svelte
index d27ace2ad..efcb961a9 100644
--- a/apps/staged/src/lib/features/sessions/SessionModal.svelte
+++ b/apps/staged/src/lib/features/sessions/SessionModal.svelte
@@ -999,6 +999,7 @@
     bind:ref={modalElement}
     class={`sm:max-w-[700px] h-[80vh] max-h-[900px] p-0 gap-0 overflow-hidden flex flex-col border-2 ${dragOver ? 'border-[var(--ui-accent)] bg-[color-mix(in_srgb,var(--ui-accent)_5%,var(--bg-chrome))]' : 'border-transparent'} transition-colors`}
     showCloseButton={false}
+    onOpenAutoFocus={(e) => e.preventDefault()}
   >
     <!-- Header -->
     <header class="modal-header">

From bd452c556dd9940b4f8ccbefa57834c4248dce3f Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Wed, 3 Jun 2026 14:06:44 +1000
Subject: [PATCH 12/28] fix(staged): make note dialog content tint visible in
 light mode

The prior color-mix (9ba88cbf) blended --bg-elevated with --bg-chrome,
but those collapse to essentially the same color in light mode (~#f5f5f5),
so the 50/50 mix equaled the original surface and the tint was invisible;
the endpoints only diverged in dark mode.

Switch the second endpoint to --bg-primary, which differs from
--bg-elevated in both modes, so the content surface is now perceptibly
distinct from the dialog chrome in light (~#fafafa) and dark (~#2f2b36).

Verified with pnpm check (svelte-check + tsc): 0 errors, 0 warnings.

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/lib/features/notes/NoteModal.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/staged/src/lib/features/notes/NoteModal.svelte b/apps/staged/src/lib/features/notes/NoteModal.svelte
index b7f7e2ba3..4c2cafc05 100644
--- a/apps/staged/src/lib/features/notes/NoteModal.svelte
+++ b/apps/staged/src/lib/features/notes/NoteModal.svelte
@@ -373,7 +373,7 @@
     overflow-y: auto;
     padding: 24px;
     min-height: 0;
-    background: color-mix(in srgb, var(--bg-elevated) 50%, var(--bg-chrome) 50%);
+    background: color-mix(in srgb, var(--bg-elevated) 50%, var(--bg-primary) 50%);
   }
 
   .modal-content::-webkit-scrollbar {

From 36f463347bbd1850605d1e7eda0b2b12d426fb74 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Wed, 3 Jun 2026 16:42:02 +1000
Subject: [PATCH 13/28] fix(staged): stop dialog titles clipping descenders
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The base dialog-title.svelte applied leading-none (line-height: 1), so
the title's line box equaled the font's em size exactly and descenders
(g, y, p, q, j) hung below it. On its own that's fine, but the
SessionModal, NoteModal, ActionOutputModal, and ImageViewerModal titles
add overflow-hidden for ellipsis truncation, which clipped everything
below the line box — including those descenders.

Change the base title's leading-none to leading-tight (line-height:
1.25) so descenders sit inside the line box and survive overflow-hidden.
This fixes all four truncating titles uniformly and is a negligible
layout shift for the non-truncating dialog titles (headers center their
content via flex).

Verified with pnpm check (svelte-check + tsc): 0 errors, 0 warnings.

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/lib/components/ui/dialog/dialog-title.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/staged/src/lib/components/ui/dialog/dialog-title.svelte b/apps/staged/src/lib/components/ui/dialog/dialog-title.svelte
index 5889f5cc0..9a63ebebd 100644
--- a/apps/staged/src/lib/components/ui/dialog/dialog-title.svelte
+++ b/apps/staged/src/lib/components/ui/dialog/dialog-title.svelte
@@ -12,6 +12,6 @@
 <DialogPrimitive.Title
   bind:ref
   data-slot="dialog-title"
-  class={cn('leading-none font-medium', className)}
+  class={cn('leading-tight font-medium', className)}
   {...restProps}
 />

From 7877d408bbab292f22bf3607ce511c5c3ea47ead Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Wed, 3 Jun 2026 16:59:18 +1000
Subject: [PATCH 14/28] style(staged): lighten light-mode chrome background
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The main app background and project detail background both paint
--bg-chrome, which createAdaptiveTheme() derives by darkening the base
background via calculateChromeColors(). On a near-white light base
(luminance 1.0) the logFloor step darkened chrome to ~0.916 luminance,
a noticeably gray surface, because darkening away from white reads
heavier than the equivalent lightening does on a dark base.

Add a LIGHT_CHROME_CONTRAST_SCALE (0.6) applied to the chrome luminance
difference for light themes (bgLum >= 0.5), so the derived chrome sits
closer to the page background — a lighter gray. Deepest stays at 2x the
(now reduced) diff, so it lightens proportionally and the chrome/deepest
relationship is preserved. Dark themes are unaffected (scale = 1).

Because this changes the derivation in theme.ts rather than any single
component, every surface that reads --bg-chrome lightens uniformly.

Verified with pnpm check (svelte-check + tsc): 0 errors, 0 warnings.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/lib/theme.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/apps/staged/src/lib/theme.ts b/apps/staged/src/lib/theme.ts
index 5cccf936c..8dc4ae03a 100644
--- a/apps/staged/src/lib/theme.ts
+++ b/apps/staged/src/lib/theme.ts
@@ -241,6 +241,13 @@ function findColorWithLuminance(baseColor: string, targetLum: number): string {
 const CONTRAST_VALUE = 0.035;
 const CONTRAST_OFFSET = 0.0135;
 
+// Light themes darken chrome away from a near-white base, which reads heavier
+// than the equivalent lightening does on a dark base. Scale the chrome
+// luminance difference down for light themes so the main app / project chrome
+// sits closer to the page background (a lighter gray) rather than a noticeable
+// mid-gray. Dark themes are unaffected (scale = 1).
+const LIGHT_CHROME_CONTRAST_SCALE = 0.6;
+
 /**
  * Calculate target luminance difference using logFloor algorithm.
  * This provides gentle scaling that works across all theme luminances,
@@ -270,8 +277,10 @@ interface ChromeColors {
 function calculateChromeColors(syntaxBg: string): ChromeColors {
   const bgLum = luminance(syntaxBg);
 
-  // Calculate target luminance difference for chrome
-  const lumDiff = calculateLumDiff(bgLum);
+  // Calculate target luminance difference for chrome. Light themes use a
+  // reduced step so the derived chrome reads as a lighter gray.
+  const isLight = bgLum >= 0.5;
+  const lumDiff = calculateLumDiff(bgLum) * (isLight ? LIGHT_CHROME_CONTRAST_SCALE : 1);
   const targetChromeLum = bgLum - lumDiff;
 
   // Deepest is 2x the chrome difference (darker still)

From be352698368ec9d37716780a1166de2b65ba2920 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Thu, 4 Jun 2026 14:41:35 +1000
Subject: [PATCH 15/28] style(staged): lighten light-mode chrome further
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous LIGHT_CHROME_CONTRAST_SCALE of 0.6 took chrome from
~0.916 luminance to ~0.949 — still a noticeable gray against the white
page. Halve the scale again to 0.3 (chrome luminance ~0.975) so the
main app and project chrome read as a much lighter, off-white surface
that sits clearly closer to the page background. Deepest still scales
proportionally (2x the reduced diff), and dark themes remain
unaffected.

Verified with pnpm check (svelte-check + tsc): 0 errors, 0 warnings.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/lib/theme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/staged/src/lib/theme.ts b/apps/staged/src/lib/theme.ts
index 8dc4ae03a..4c6e6e24b 100644
--- a/apps/staged/src/lib/theme.ts
+++ b/apps/staged/src/lib/theme.ts
@@ -246,7 +246,7 @@ const CONTRAST_OFFSET = 0.0135;
 // luminance difference down for light themes so the main app / project chrome
 // sits closer to the page background (a lighter gray) rather than a noticeable
 // mid-gray. Dark themes are unaffected (scale = 1).
-const LIGHT_CHROME_CONTRAST_SCALE = 0.6;
+const LIGHT_CHROME_CONTRAST_SCALE = 0.3;
 
 /**
  * Calculate target luminance difference using logFloor algorithm.

From 7ef5ef452b6001ecd5011a625f23037dff94baf0 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Thu, 4 Jun 2026 14:42:29 +1000
Subject: [PATCH 16/28] style(staged): nudge light-mode chrome back toward its
 original tone
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 0.3 scale overshot — chrome went too pale. Pull it most of the way
back to the original (scale = 1.0) while keeping a small lightening, by
setting LIGHT_CHROME_CONTRAST_SCALE = 0.85. The darker chrome / deepest
surfaces in the light theme are now nearly as dark as pre-change but
sit a touch lighter against the page.

Verified with pnpm check (svelte-check + tsc): 0 errors, 0 warnings.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/lib/theme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/staged/src/lib/theme.ts b/apps/staged/src/lib/theme.ts
index 4c6e6e24b..305941c76 100644
--- a/apps/staged/src/lib/theme.ts
+++ b/apps/staged/src/lib/theme.ts
@@ -246,7 +246,7 @@ const CONTRAST_OFFSET = 0.0135;
 // luminance difference down for light themes so the main app / project chrome
 // sits closer to the page background (a lighter gray) rather than a noticeable
 // mid-gray. Dark themes are unaffected (scale = 1).
-const LIGHT_CHROME_CONTRAST_SCALE = 0.3;
+const LIGHT_CHROME_CONTRAST_SCALE = 0.85;
 
 /**
  * Calculate target luminance difference using logFloor algorithm.

From 67e699c8b1e498d3df5c9661edef46f98d16a24a Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Thu, 4 Jun 2026 15:45:23 +1000
Subject: [PATCH 17/28] fix(staged): anchor repo search dropdown to its input
 inside dialogs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The repo search dropdown (Add Repo / New Project) rendered far down and
to the right of the modal instead of attached to the repo field.

RepoSearchInput positioned the dropdown with position:fixed and viewport
coords from getBoundingClientRect(). The shadcn Dialog.Content applies
-translate-x-1/2 -translate-y-1/2, and a CSS transform on an ancestor
makes that ancestor the containing block for position:fixed
descendants. So inside the dialog the dropdown's viewport-space top/left
were re-interpreted relative to the centered, translated dialog box —
placing it far from the input.

Drop the JS-driven fixed positioning entirely. Make .repo-search-wrapper
position:relative and anchor .repo-dropdown with position:absolute;
top:calc(100% + 4px); left:0; right:0 so the dropdown naturally sits
flush under the search field and matches its width, independent of any
transformed ancestor. Removes updateDropdownPosition, dropdownStyle, and
the window resize handler; as a side benefit, the dropdown now scrolls
with the field instead of detaching.

Verified with pnpm check (svelte-check + tsc): 0 errors, 0 warnings.

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../features/projects/RepoSearchInput.svelte  | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/apps/staged/src/lib/features/projects/RepoSearchInput.svelte b/apps/staged/src/lib/features/projects/RepoSearchInput.svelte
index d38e4cd60..f17d643e5 100644
--- a/apps/staged/src/lib/features/projects/RepoSearchInput.svelte
+++ b/apps/staged/src/lib/features/projects/RepoSearchInput.svelte
@@ -47,15 +47,6 @@
   let isSearching = $state(false);
   let directFetchRepo = $state<GitHubRepo | null>(null);
   let dropdownOpen = $state(false);
-  let dropdownStyle = $state('');
-
-  function updateDropdownPosition() {
-    if (!inputEl) return;
-    const rect = inputEl.closest('.search-input')!.getBoundingClientRect();
-    const top = rect.bottom + 4;
-    const maxH = Math.max(120, window.innerHeight - top - 12);
-    dropdownStyle = `position:fixed;top:${top}px;left:${rect.left}px;width:${rect.width}px;max-height:${maxH}px`;
-  }
 
   function isOwnerRepoFormat(input: string): boolean {
     const trimmed = input.trim();
@@ -215,7 +206,6 @@
   }
 
   function handleFocus() {
-    updateDropdownPosition();
     dropdownOpen = true;
   }
 
@@ -270,10 +260,7 @@
   }
 </script>
 
-<svelte:window
-  onclick={handleClickOutside}
-  onresize={() => dropdownOpen && updateDropdownPosition()}
-/>
+<svelte:window onclick={handleClickOutside} />
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
@@ -301,7 +288,7 @@
   </div>
 
   {#if dropdownOpen}
-    <div class="repo-dropdown" style={dropdownStyle}>
+    <div class="repo-dropdown">
       {#if filteredRecentRepos.length > 0}
         {#each filteredRecentRepos as recent, i}
           {@const hue = recentHue(recent)}
@@ -399,6 +386,10 @@
 </div>
 
 <style>
+  .repo-search-wrapper {
+    position: relative;
+  }
+
   .search-input {
     display: flex;
     align-items: center;
@@ -426,6 +417,10 @@
   }
 
   .repo-dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
     max-height: 280px;
     overflow-y: auto;
     display: flex;

From aaed50018fe56826eda57b454741c3cdb138657f Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Thu, 4 Jun 2026 15:46:54 +1000
Subject: [PATCH 18/28] fix(staged): make New Project location toggles fill the
 dialog width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The shadcn-svelte migration replaced the bespoke FormToggle (which
rendered full-width Local/Remote option cards) with ToggleGroup.Root +
ToggleGroup.Items. The form passed `class="flex flex-col gap-2"` on
the root, but the base ToggleGroup.Root class already bakes in
`w-fit flex-row items-center` — the explicit `flex flex-col` didn't
override the cross-axis `items-center` (so items no longer stretched),
and `w-fit` shrunk the container to its content's intrinsic width.
The two option cards collapsed to the icon+label width instead of
spanning the dialog.

Switch the root to the proper API: set `orientation="vertical"` to
activate the base's `data-vertical:flex-col data-vertical:items-stretch`,
and pass `w-full` to override the baked-in `w-fit`. The items already
have `w-full` and stretch naturally now.

Verified with pnpm check (svelte-check + tsc): 0 errors, 0 warnings.

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/lib/features/projects/NewProjectForm.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/staged/src/lib/features/projects/NewProjectForm.svelte b/apps/staged/src/lib/features/projects/NewProjectForm.svelte
index 5939061aa..9d74582fe 100644
--- a/apps/staged/src/lib/features/projects/NewProjectForm.svelte
+++ b/apps/staged/src/lib/features/projects/NewProjectForm.svelte
@@ -195,9 +195,10 @@
       <div class="field-label">Location</div>
       <ToggleGroup.Root
         type="single"
+        orientation="vertical"
         bind:value={location}
         disabled={saving}
-        class="flex flex-col gap-2"
+        class="w-full gap-2"
       >
         {#each [{ value: 'local', label: 'Local', description: 'Run agents on your machine', icon: Monitor }, { value: 'remote', label: 'Remote', description: 'Run agents in the cloud', icon: Cloud }] as option}
           <ToggleGroup.Item

From 93538dd1a689486e53be2df638bc1cb056aa154b Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Thu, 4 Jun 2026 15:50:01 +1000
Subject: [PATCH 19/28] style(staged): remove vertical gap between New Project
 location toggles

Drop the 8px gap between the Local and Remote option cards in the
New Project form so they sit flush against each other.

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/lib/features/projects/NewProjectForm.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/staged/src/lib/features/projects/NewProjectForm.svelte b/apps/staged/src/lib/features/projects/NewProjectForm.svelte
index 9d74582fe..b07f47d99 100644
--- a/apps/staged/src/lib/features/projects/NewProjectForm.svelte
+++ b/apps/staged/src/lib/features/projects/NewProjectForm.svelte
@@ -198,7 +198,7 @@
         orientation="vertical"
         bind:value={location}
         disabled={saving}
-        class="w-full gap-2"
+        class="w-full gap-0"
       >
         {#each [{ value: 'local', label: 'Local', description: 'Run agents on your machine', icon: Monitor }, { value: 'remote', label: 'Remote', description: 'Run agents in the cloud', icon: Cloud }] as option}
           <ToggleGroup.Item

From d3d459b14384a30f879a9f38c7b65587667e97c1 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Thu, 4 Jun 2026 16:57:00 +1000
Subject: [PATCH 20/28] fix(staged): give New Project form fields a white
 surface in light mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Name and Repository fields (and the Subpath / PR-or-Branch fields
revealed after a repo is picked) rendered on the dialog's gray surface
instead of white in light mode.

The shadcn-svelte Input is bg-transparent (only dark:bg-input/30 paints a
background), and RepoSearchInput's .search-input wrapper set background:
transparent. So in the New Project dialog all these fields showed through
to Dialog.Content's surface — --popover → --bg-elevated (~#f5f5f5
off-white) — rather than reading as distinct white fields.

Paint the fields with the primary background:
- Add bg-background (--background → --bg-primary, white in light mode) to
  the shadcn Input class on the Name, PR-or-Branch placeholder, Subpath,
  and BranchPicker inputs. dark:bg-input/30 still wins under .dark, so dark
  mode is unchanged.
- Change RepoSearchInput's .search-input wrapper from transparent to
  var(--bg-primary) so the repo field matches.

Verified with pnpm check (svelte-check + tsc): 0 errors, 0 warnings.

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/lib/features/projects/BranchPicker.svelte    | 2 +-
 apps/staged/src/lib/features/projects/NewProjectForm.svelte  | 2 +-
 apps/staged/src/lib/features/projects/RepoConfigForm.svelte  | 2 +-
 apps/staged/src/lib/features/projects/RepoSearchInput.svelte | 2 +-
 apps/staged/src/lib/features/projects/SubpathInput.svelte    | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/staged/src/lib/features/projects/BranchPicker.svelte b/apps/staged/src/lib/features/projects/BranchPicker.svelte
index 68fd063fb..dc9120ad1 100644
--- a/apps/staged/src/lib/features/projects/BranchPicker.svelte
+++ b/apps/staged/src/lib/features/projects/BranchPicker.svelte
@@ -388,7 +388,7 @@
   <div class="input-container">
     <Input
       bind:ref={inputEl}
-      class="min-h-[42px] rounded-[10px] px-3.5 py-2.5 text-base"
+      class="min-h-[42px] rounded-[10px] bg-background px-3.5 py-2.5 text-base"
       type="text"
       bind:value
       oninput={handleInput}
diff --git a/apps/staged/src/lib/features/projects/NewProjectForm.svelte b/apps/staged/src/lib/features/projects/NewProjectForm.svelte
index b07f47d99..21411e664 100644
--- a/apps/staged/src/lib/features/projects/NewProjectForm.svelte
+++ b/apps/staged/src/lib/features/projects/NewProjectForm.svelte
@@ -185,7 +185,7 @@
       autocapitalize="off"
       spellcheck={false}
       oninput={handleNameInput}
-      class="min-h-[42px] rounded-[10px] px-3.5 py-2.5 text-base"
+      class="min-h-[42px] rounded-[10px] bg-background px-3.5 py-2.5 text-base"
       bind:ref={nameInputRef}
     />
   </div>
diff --git a/apps/staged/src/lib/features/projects/RepoConfigForm.svelte b/apps/staged/src/lib/features/projects/RepoConfigForm.svelte
index 5323806d0..03ef3d65c 100644
--- a/apps/staged/src/lib/features/projects/RepoConfigForm.svelte
+++ b/apps/staged/src/lib/features/projects/RepoConfigForm.svelte
@@ -394,7 +394,7 @@
             placeholder="Search PRs or branches…"
             readonly
             tabindex={-1}
-            class="min-h-[42px] rounded-[10px] px-3.5 py-2.5 text-base"
+            class="min-h-[42px] rounded-[10px] bg-background px-3.5 py-2.5 text-base"
           />
         {/if}
       </div>
diff --git a/apps/staged/src/lib/features/projects/RepoSearchInput.svelte b/apps/staged/src/lib/features/projects/RepoSearchInput.svelte
index f17d643e5..8962ca102 100644
--- a/apps/staged/src/lib/features/projects/RepoSearchInput.svelte
+++ b/apps/staged/src/lib/features/projects/RepoSearchInput.svelte
@@ -398,7 +398,7 @@
     padding: 10px 14px;
     border: 1.5px solid var(--border-muted);
     border-radius: 10px;
-    background: transparent;
+    background: var(--bg-primary);
     transition: border-color 0.15s ease;
   }
 
diff --git a/apps/staged/src/lib/features/projects/SubpathInput.svelte b/apps/staged/src/lib/features/projects/SubpathInput.svelte
index 4a68d12d5..5e8117476 100644
--- a/apps/staged/src/lib/features/projects/SubpathInput.svelte
+++ b/apps/staged/src/lib/features/projects/SubpathInput.svelte
@@ -208,7 +208,7 @@
   <div class="input-container">
     <Input
       bind:ref={inputEl}
-      class="min-h-[42px] rounded-[10px] px-3.5 py-2.5 text-base"
+      class="min-h-[42px] rounded-[10px] bg-background px-3.5 py-2.5 text-base"
       type="text"
       bind:value
       oninput={handleInput}

From cc462a3e662c43c9c49b46d5d5a1410bfeb7d50c Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Thu, 4 Jun 2026 18:57:34 +1000
Subject: [PATCH 21/28] fix(staged): give unselected New Project location
 toggle a solid surface

The Local/Remote location toggles in the New Project form set no
background for the unselected (data-[state=off]) state, so the option
cards showed through to the dialog's gray Dialog.Content surface
(--popover -> --bg-elevated) instead of the page surface. Only the
selected card painted a background (data-[state=on]:bg-foreground).

Add bg-background to the item class (and switch the hover from
bg-transparent to bg-background) so the unselected card reads as white
in light mode and the dark base surface in dark mode, matching the
sibling form fields. The selected state's data-[state=on]:bg-foreground
still overrides, so the active card stays black (light) / white (dark).

Verified with pnpm check (svelte-check + tsc): 0 errors, 0 warnings.

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/lib/features/projects/NewProjectForm.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/staged/src/lib/features/projects/NewProjectForm.svelte b/apps/staged/src/lib/features/projects/NewProjectForm.svelte
index 21411e664..8862976f6 100644
--- a/apps/staged/src/lib/features/projects/NewProjectForm.svelte
+++ b/apps/staged/src/lib/features/projects/NewProjectForm.svelte
@@ -203,7 +203,7 @@
         {#each [{ value: 'local', label: 'Local', description: 'Run agents on your machine', icon: Monitor }, { value: 'remote', label: 'Remote', description: 'Run agents in the cloud', icon: Cloud }] as option}
           <ToggleGroup.Item
             value={option.value}
-            class="flex h-auto w-full items-center justify-start gap-3 rounded-[10px] border-[1.5px] border-border px-4 py-3.5 text-left text-muted-foreground hover:border-ring hover:bg-transparent hover:text-foreground data-[state=on]:border-foreground data-[state=on]:bg-foreground data-[state=on]:text-background"
+            class="flex h-auto w-full items-center justify-start gap-3 rounded-[10px] border-[1.5px] border-border bg-background px-4 py-3.5 text-left text-muted-foreground hover:border-ring hover:bg-background hover:text-foreground data-[state=on]:border-foreground data-[state=on]:bg-foreground data-[state=on]:text-background"
           >
             <option.icon size={22} class="shrink-0" />
             <span class="flex min-w-0 flex-col gap-0.5">

From f445ccf817a3982183049265c873d6ae02f70741 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Fri, 5 Jun 2026 10:17:20 +1000
Subject: [PATCH 22/28] fix(staged): bridge Tailwind text scale to the Staged
 13px size tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

shadcn's Button (and other migrated primitives) size text with Tailwind's
rem-based text-* utilities, which the migration never re-anchored to the
app's 13px root. Since 1rem = 13px here, text-sm (0.875rem) rendered at
~11.4px and text-xs (0.75rem) at ~9.75px — smaller than the pre-shadcn UI,
which sized text off the Staged --size-* tokens (e.g. FormButton's
var(--size-sm) ≈ 12px). The hand-added text-xs overrides on the branch-card
Diff/PR buttons and the note "Start note"/"Start commit" buttons compounded
this to ~19% small.

Option B (systemic): map the Tailwind text-* namespace to the Staged
--size-* tokens in the @theme inline block — text-xs→--size-xs,
text-sm→--size-sm, text-base→--size-md, text-lg→--size-lg, text-xl→--size-xl.
This realigns every migrated text-* utility to the old px scale in one place,
fixing the root cause rather than patching individual buttons. Line-heights
keep Tailwind's paired defaults.

Verified with pnpm check (svelte-check + tsc): 0 errors, 0 warnings.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/app.css | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/apps/staged/src/app.css b/apps/staged/src/app.css
index 692576f7a..8587fe2ea 100644
--- a/apps/staged/src/app.css
+++ b/apps/staged/src/app.css
@@ -273,6 +273,21 @@ mark.search-match-current {
 
 @theme inline {
   --font-sans: 'Inter Variable', sans-serif;
+
+  /* ── Text scale bridge: re-anchor Tailwind's rem-based `text-*` utilities to
+   *    the Staged px scale. The app sets the root font-size to 13px (--size-md),
+   *    so Tailwind's unitless defaults (text-sm = 0.875rem ≈ 11.4px,
+   *    text-xs = 0.75rem ≈ 9.75px) render smaller than the pre-shadcn UI, which
+   *    sized text off --size-* tokens (e.g. FormButton's var(--size-sm) ≈ 12px).
+   *    Map each `text-*` utility to its --size-* analogue so every migrated
+   *    `text-*` tracks the old scale in one place. Line-heights keep Tailwind's
+   *    paired defaults. ── */
+  --text-xs: var(--size-xs);
+  --text-sm: var(--size-sm);
+  --text-base: var(--size-md);
+  --text-lg: var(--size-lg);
+  --text-xl: var(--size-xl);
+
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);

From 88628a058c96d4690c6cd2f027bb3c4f213b0e1a Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Fri, 5 Jun 2026 10:54:34 +1000
Subject: [PATCH 23/28] fix(staged): decouple --ui-accent from git green,
 switch primary highlight to blue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The generic app accent (--ui-accent -> shadcn --primary) was sourced from
the git "added" color (gitColors.added), so primary buttons, focus rings,
active filter chips, running/cloud indicators, and status pills all rendered
in the same green that marks added files and commit dots. The two roles —
git-added semantic vs. generic UI highlight — shared one color and couldn't
be recolored independently.

Introduce a dedicated accentPrimary in createAdaptiveTheme(), sourced from
fallbackBlue (#58a6ff dark / #0969da light) so it stays blue in both modes —
unlike accentBlue (gitColors.modified), which is gold/orange in dark mode and
thus unsuitable as the accent. Point ui.accent / ui.accentHover at
accentPrimary instead of accentGreen.

status.added, timeline.commitColor/commitBg, and diff.addedBg are left on
accentGreen, so git semantics stay correct (added = green, commits = green
dots) while every --ui-accent consumer flips to blue. --primary-foreground
(--bg-deepest) tracks the resolved mode and keeps adequate contrast on both
the light- and dark-mode blue.

Verified with pnpm check (svelte-check + tsc): 0 errors, 0 warnings.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/lib/theme.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/staged/src/lib/theme.ts b/apps/staged/src/lib/theme.ts
index 305941c76..9cd287722 100644
--- a/apps/staged/src/lib/theme.ts
+++ b/apps/staged/src/lib/theme.ts
@@ -363,6 +363,13 @@ export function createAdaptiveTheme(
   const accentPurple = fallbackPurple;
   const accentCyan = fallbackCyan; // Used for image timeline items
 
+  // Dedicated app accent (the generic UI highlight: primary buttons, focus
+  // rings, active chips, indicators). Kept separate from the git palette so
+  // recoloring the UI accent doesn't drag "added"/commit affordances with it.
+  // Blue in both modes (mirrors fallbackBlue, which is mode-consistent —
+  // unlike accentBlue=gitColors.modified, which is gold in dark mode).
+  const accentPrimary = fallbackBlue;
+
   // Border that's visible but not harsh
   const borderBase = mix(primaryBg, syntaxFg, isDark ? 0.15 : 0.12);
 
@@ -439,8 +446,8 @@ export function createAdaptiveTheme(
     },
 
     ui: {
-      accent: accentGreen,
-      accentHover: isDark ? adjust(accentGreen, -0.15) : adjust(accentGreen, 0.15),
+      accent: accentPrimary,
+      accentHover: isDark ? adjust(accentPrimary, -0.15) : adjust(accentPrimary, 0.15),
       danger: accentRed,
       dangerBg: overlay(accentRed, isDark ? 0.1 : 0.08),
       warning: accentOrange,

From 0b8991a51cff9b58d35d7c96e07047b5f0416a27 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Fri, 5 Jun 2026 10:58:50 +1000
Subject: [PATCH 24/28] fix(staged): brighten light-mode accent blue to match
 the old green

The decoupled accent used fallbackBlue (#0969da in light mode), which read
noticeably darker and heavier than the #28a745 green accent it replaced.

Give accentPrimary its own blue pair instead of reusing fallbackBlue: light
mode is now the brighter #2188ff, sitting at roughly the same luminance/
energy as the old green, while dark mode keeps #58a6ff (already close to the
old #3fb950). fallbackBlue is left untouched so accentBlue's fallback path
and other consumers are unaffected.

Verified with pnpm check (svelte-check + tsc): 0 errors, 0 warnings.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/lib/theme.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/staged/src/lib/theme.ts b/apps/staged/src/lib/theme.ts
index 9cd287722..a5f6a57e5 100644
--- a/apps/staged/src/lib/theme.ts
+++ b/apps/staged/src/lib/theme.ts
@@ -366,9 +366,11 @@ export function createAdaptiveTheme(
   // Dedicated app accent (the generic UI highlight: primary buttons, focus
   // rings, active chips, indicators). Kept separate from the git palette so
   // recoloring the UI accent doesn't drag "added"/commit affordances with it.
-  // Blue in both modes (mirrors fallbackBlue, which is mode-consistent —
-  // unlike accentBlue=gitColors.modified, which is gold in dark mode).
-  const accentPrimary = fallbackBlue;
+  // Blue in both modes. The light value is a bright #2188ff rather than the
+  // heavier #0969da fallbackBlue, so it reads at roughly the same luminance/
+  // energy as the old #28a745 green accent it replaces (#0969da looked too
+  // dark by comparison). Dark stays #58a6ff, already close to the old #3fb950.
+  const accentPrimary = isDark ? '#58a6ff' : '#2188ff';
 
   // Border that's visible but not harsh
   const borderBase = mix(primaryBg, syntaxFg, isDark ? 0.15 : 0.12);

From 62cf25ab3aca814a18f0cf5278a4d2213487c177 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Fri, 5 Jun 2026 11:02:57 +1000
Subject: [PATCH 25/28] fix(staged): match left footer button height to the RHS
 footer buttons

The branch-card footer holds two button groups in one align-items:center
row: the left "New note / New commit / New code review" add buttons (in
BranchTimeline) and the right Diff / PR buttons (in BranchCard's
footerActions snippet + BranchCardPrButton).

Both groups already render at text-xs, so their text sizes matched. But
their heights did not: the RHS buttons use the shared Button's size="sm"
(a fixed h-8 = 32px), while the LHS add buttons set h-auto + py-1, making
their height content-driven (~26-27px from the text-xs line box plus 8px
vertical padding and the 1px dashed border). Side by side in the centered
footer row, the LHS dashed buttons rendered visibly shorter than the
Diff/PR buttons.

Replace the non-enlarged LHS class's `py-1 h-auto` with `h-8` on all three
add buttons so they pin to the same 32px height as the RHS size="sm"
buttons. px-2.5 and rounded-md already align with sm's padding/radius
(rounded-md => --radius-md = 6px = min(--radius-md, 10px)), and the
enlarged variant is untouched.

Verified with pnpm check (svelte-check + tsc): 0 errors, 0 warnings.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/lib/features/timeline/BranchTimeline.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/staged/src/lib/features/timeline/BranchTimeline.svelte b/apps/staged/src/lib/features/timeline/BranchTimeline.svelte
index f632efbf3..7d9ba5cb5 100644
--- a/apps/staged/src/lib/features/timeline/BranchTimeline.svelte
+++ b/apps/staged/src/lib/features/timeline/BranchTimeline.svelte
@@ -1049,7 +1049,7 @@
                         '[&_svg]:!text-[var(--note-color)] [&_svg]:transition-all [&_svg]:duration-300',
                         actionButtonsEnlarged
                           ? 'flex-1 justify-center gap-2 px-1.5 py-2.5 h-auto rounded-lg border border-solid border-transparent bg-[var(--bg-elevated)] text-sm text-[var(--text-muted)] hover:not-disabled:bg-[var(--note-bg)] hover:not-disabled:text-[var(--note-color)] [&_svg]:!size-[18px]'
-                          : 'gap-[5px] px-2.5 py-1 h-auto rounded-md border border-dashed border-[var(--border-subtle)] bg-transparent text-xs text-[var(--text-muted)] hover:not-disabled:border-[var(--note-color)] hover:not-disabled:bg-[var(--note-bg)] hover:not-disabled:text-[var(--note-color)] [&_svg]:!size-[13px] @max-[480px]/timeline:gap-0.5 @max-[480px]/timeline:px-1.5',
+                          : 'gap-[5px] px-2.5 h-8 rounded-md border border-dashed border-[var(--border-subtle)] bg-transparent text-xs text-[var(--text-muted)] hover:not-disabled:border-[var(--note-color)] hover:not-disabled:bg-[var(--note-bg)] hover:not-disabled:text-[var(--note-color)] [&_svg]:!size-[13px] @max-[480px]/timeline:gap-0.5 @max-[480px]/timeline:px-1.5',
                       ]}
                     >
                       <FileText
@@ -1099,7 +1099,7 @@
                         '[&_svg]:!text-[var(--commit-color)] [&_svg]:transition-all [&_svg]:duration-300',
                         actionButtonsEnlarged
                           ? 'flex-1 justify-center gap-2 px-1.5 py-2.5 h-auto rounded-lg border border-solid border-transparent bg-[var(--bg-elevated)] text-sm text-[var(--text-muted)] hover:not-disabled:bg-[var(--commit-bg)] hover:not-disabled:text-[var(--commit-color)] [&_svg]:!size-[18px]'
-                          : 'gap-[5px] px-2.5 py-1 h-auto rounded-md border border-dashed border-[var(--border-subtle)] bg-transparent text-xs text-[var(--text-muted)] hover:not-disabled:border-[var(--commit-color)] hover:not-disabled:bg-[var(--commit-bg)] hover:not-disabled:text-[var(--commit-color)] [&_svg]:!size-[13px] @max-[480px]/timeline:gap-0.5 @max-[480px]/timeline:px-1.5',
+                          : 'gap-[5px] px-2.5 h-8 rounded-md border border-dashed border-[var(--border-subtle)] bg-transparent text-xs text-[var(--text-muted)] hover:not-disabled:border-[var(--commit-color)] hover:not-disabled:bg-[var(--commit-bg)] hover:not-disabled:text-[var(--commit-color)] [&_svg]:!size-[13px] @max-[480px]/timeline:gap-0.5 @max-[480px]/timeline:px-1.5',
                       ]}
                     >
                       <GitCommitVertical
@@ -1149,7 +1149,7 @@
                         '[&_svg]:!text-[var(--review-color)] [&_svg]:transition-all [&_svg]:duration-300',
                         actionButtonsEnlarged
                           ? 'flex-1 justify-center gap-2 px-1.5 py-2.5 h-auto rounded-lg border border-solid border-transparent bg-[var(--bg-elevated)] text-sm text-[var(--text-muted)] hover:not-disabled:bg-[var(--review-bg)] hover:not-disabled:text-[var(--review-color)] [&_svg]:!size-[18px]'
-                          : 'gap-[5px] px-2.5 py-1 h-auto rounded-md border border-dashed border-[var(--border-subtle)] bg-transparent text-xs text-[var(--text-muted)] hover:not-disabled:border-[var(--review-color)] hover:not-disabled:bg-[var(--review-bg)] hover:not-disabled:text-[var(--review-color)] [&_svg]:!size-[13px] @max-[480px]/timeline:gap-0.5 @max-[480px]/timeline:px-1.5',
+                          : 'gap-[5px] px-2.5 h-8 rounded-md border border-dashed border-[var(--border-subtle)] bg-transparent text-xs text-[var(--text-muted)] hover:not-disabled:border-[var(--review-color)] hover:not-disabled:bg-[var(--review-bg)] hover:not-disabled:text-[var(--review-color)] [&_svg]:!size-[13px] @max-[480px]/timeline:gap-0.5 @max-[480px]/timeline:px-1.5',
                       ]}
                     >
                       <FileSearch

From d931239722b542799bdf82439ecf36475506a9c8 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Fri, 5 Jun 2026 11:32:11 +1000
Subject: [PATCH 26/28] fix(staged): give branch-card footer buttons
 full-contrast text and icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The branch-card footer buttons rendered their resting label (and, for the
LHS add buttons, their icons) in de-emphasized colors, so they read dimmer
than the sibling Diff button — which uses the shared outline Button's
default full-contrast foreground.

- PR button (BranchCardPrButton): drop the baked-in text-muted-foreground
  so its label inherits text-foreground like the Diff button. The
  state-specific overrides (destructive on error, status-added icon on
  MERGED) are untouched.
- LHS add buttons (New note / New commit / New code review in
  BranchTimeline): drop the resting text-[var(--text-muted)] from both the
  enlarged and compact class branches, and drop the always-on
  [&_svg]:!text-[var(--note|commit|review-color)] icon tint so the icons
  follow the label's foreground color at rest instead of painting their
  semantic accent. The hover states (border/bg/text shifting to the
  note/commit/review accent) and the [&_svg] transitions are kept, so the
  buttons still light up to their accent on hover — they just sit at full
  contrast at rest.

Verified with pnpm check (svelte-check + tsc): 0 errors, 0 warnings.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../branches/BranchCardPrButton.svelte         |  2 +-
 .../features/timeline/BranchTimeline.svelte    | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/staged/src/lib/features/branches/BranchCardPrButton.svelte b/apps/staged/src/lib/features/branches/BranchCardPrButton.svelte
index 7354e8490..6c56e6bcc 100644
--- a/apps/staged/src/lib/features/branches/BranchCardPrButton.svelte
+++ b/apps/staged/src/lib/features/branches/BranchCardPrButton.svelte
@@ -666,7 +666,7 @@
             variant="outline"
             size="sm"
             class={[
-              'gap-1.5 whitespace-nowrap text-xs font-medium text-muted-foreground [&_svg]:!size-3.5',
+              'gap-1.5 whitespace-nowrap text-xs font-medium [&_svg]:!size-3.5',
               prState === 'creating' && 'border-[var(--border-muted)]',
               (prState === 'error' || pushState === 'error') &&
                 'border-destructive text-destructive hover:bg-[var(--ui-danger-bg)] hover:text-destructive',
diff --git a/apps/staged/src/lib/features/timeline/BranchTimeline.svelte b/apps/staged/src/lib/features/timeline/BranchTimeline.svelte
index 7d9ba5cb5..85b73142c 100644
--- a/apps/staged/src/lib/features/timeline/BranchTimeline.svelte
+++ b/apps/staged/src/lib/features/timeline/BranchTimeline.svelte
@@ -1046,10 +1046,10 @@
                       aria-label="New note"
                       class={[
                         'inline-flex items-center font-medium transition-all duration-300 disabled:opacity-30 disabled:cursor-not-allowed',
-                        '[&_svg]:!text-[var(--note-color)] [&_svg]:transition-all [&_svg]:duration-300',
+                        '[&_svg]:transition-all [&_svg]:duration-300',
                         actionButtonsEnlarged
-                          ? 'flex-1 justify-center gap-2 px-1.5 py-2.5 h-auto rounded-lg border border-solid border-transparent bg-[var(--bg-elevated)] text-sm text-[var(--text-muted)] hover:not-disabled:bg-[var(--note-bg)] hover:not-disabled:text-[var(--note-color)] [&_svg]:!size-[18px]'
-                          : 'gap-[5px] px-2.5 h-8 rounded-md border border-dashed border-[var(--border-subtle)] bg-transparent text-xs text-[var(--text-muted)] hover:not-disabled:border-[var(--note-color)] hover:not-disabled:bg-[var(--note-bg)] hover:not-disabled:text-[var(--note-color)] [&_svg]:!size-[13px] @max-[480px]/timeline:gap-0.5 @max-[480px]/timeline:px-1.5',
+                          ? 'flex-1 justify-center gap-2 px-1.5 py-2.5 h-auto rounded-lg border border-solid border-transparent bg-[var(--bg-elevated)] text-sm hover:not-disabled:bg-[var(--note-bg)] hover:not-disabled:text-[var(--note-color)] [&_svg]:!size-[18px]'
+                          : 'gap-[5px] px-2.5 h-8 rounded-md border border-dashed border-[var(--border-subtle)] bg-transparent text-xs hover:not-disabled:border-[var(--note-color)] hover:not-disabled:bg-[var(--note-bg)] hover:not-disabled:text-[var(--note-color)] [&_svg]:!size-[13px] @max-[480px]/timeline:gap-0.5 @max-[480px]/timeline:px-1.5',
                       ]}
                     >
                       <FileText
@@ -1096,10 +1096,10 @@
                       aria-label="New commit"
                       class={[
                         'inline-flex items-center font-medium transition-all duration-300 disabled:opacity-30 disabled:cursor-not-allowed',
-                        '[&_svg]:!text-[var(--commit-color)] [&_svg]:transition-all [&_svg]:duration-300',
+                        '[&_svg]:transition-all [&_svg]:duration-300',
                         actionButtonsEnlarged
-                          ? 'flex-1 justify-center gap-2 px-1.5 py-2.5 h-auto rounded-lg border border-solid border-transparent bg-[var(--bg-elevated)] text-sm text-[var(--text-muted)] hover:not-disabled:bg-[var(--commit-bg)] hover:not-disabled:text-[var(--commit-color)] [&_svg]:!size-[18px]'
-                          : 'gap-[5px] px-2.5 h-8 rounded-md border border-dashed border-[var(--border-subtle)] bg-transparent text-xs text-[var(--text-muted)] hover:not-disabled:border-[var(--commit-color)] hover:not-disabled:bg-[var(--commit-bg)] hover:not-disabled:text-[var(--commit-color)] [&_svg]:!size-[13px] @max-[480px]/timeline:gap-0.5 @max-[480px]/timeline:px-1.5',
+                          ? 'flex-1 justify-center gap-2 px-1.5 py-2.5 h-auto rounded-lg border border-solid border-transparent bg-[var(--bg-elevated)] text-sm hover:not-disabled:bg-[var(--commit-bg)] hover:not-disabled:text-[var(--commit-color)] [&_svg]:!size-[18px]'
+                          : 'gap-[5px] px-2.5 h-8 rounded-md border border-dashed border-[var(--border-subtle)] bg-transparent text-xs hover:not-disabled:border-[var(--commit-color)] hover:not-disabled:bg-[var(--commit-bg)] hover:not-disabled:text-[var(--commit-color)] [&_svg]:!size-[13px] @max-[480px]/timeline:gap-0.5 @max-[480px]/timeline:px-1.5',
                       ]}
                     >
                       <GitCommitVertical
@@ -1146,10 +1146,10 @@
                       aria-label="New code review"
                       class={[
                         'inline-flex items-center font-medium transition-all duration-300 disabled:opacity-30 disabled:cursor-not-allowed',
-                        '[&_svg]:!text-[var(--review-color)] [&_svg]:transition-all [&_svg]:duration-300',
+                        '[&_svg]:transition-all [&_svg]:duration-300',
                         actionButtonsEnlarged
-                          ? 'flex-1 justify-center gap-2 px-1.5 py-2.5 h-auto rounded-lg border border-solid border-transparent bg-[var(--bg-elevated)] text-sm text-[var(--text-muted)] hover:not-disabled:bg-[var(--review-bg)] hover:not-disabled:text-[var(--review-color)] [&_svg]:!size-[18px]'
-                          : 'gap-[5px] px-2.5 h-8 rounded-md border border-dashed border-[var(--border-subtle)] bg-transparent text-xs text-[var(--text-muted)] hover:not-disabled:border-[var(--review-color)] hover:not-disabled:bg-[var(--review-bg)] hover:not-disabled:text-[var(--review-color)] [&_svg]:!size-[13px] @max-[480px]/timeline:gap-0.5 @max-[480px]/timeline:px-1.5',
+                          ? 'flex-1 justify-center gap-2 px-1.5 py-2.5 h-auto rounded-lg border border-solid border-transparent bg-[var(--bg-elevated)] text-sm hover:not-disabled:bg-[var(--review-bg)] hover:not-disabled:text-[var(--review-color)] [&_svg]:!size-[18px]'
+                          : 'gap-[5px] px-2.5 h-8 rounded-md border border-dashed border-[var(--border-subtle)] bg-transparent text-xs hover:not-disabled:border-[var(--review-color)] hover:not-disabled:bg-[var(--review-bg)] hover:not-disabled:text-[var(--review-color)] [&_svg]:!size-[13px] @max-[480px]/timeline:gap-0.5 @max-[480px]/timeline:px-1.5',
                       ]}
                     >
                       <FileSearch

From 68d94f27eabff24e0dc9ed5c21c3b6ca873449ce Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Fri, 5 Jun 2026 12:08:30 +1000
Subject: [PATCH 27/28] fix(staged): stop closed ActionOutputModal from loading
 and listening
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The shadcn-svelte migration left ActionOutputModal mounted persistently —
BranchCardActionsBar renders it with `open={actionOutputModal !== null}`
and `executionId={actionOutputModal?.executionId ?? ''}` rather than
conditionally mounting it. But the modal's load/listen $effect keyed off
executionId alone, so every branch card's closed instance immediately
called getActionOutputBuffer('') and installed output/status listeners for
a closed modal. On pages with many branches that is a burst of needless
backend calls and listeners, and the empty-id fetch surfaces a spurious
"not found" load error.

Guard the effect: bail out (running cleanup) unless `open && executionId`,
so a closed or execution-less instance does no work. Reading `open` also
subscribes the effect to it, so the load/listen path runs exactly when the
modal opens onto a real execution and tears down when it closes.

Verified with pnpm check (svelte-check + tsc): 0 errors, 0 warnings.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../src/lib/features/actions/ActionOutputModal.svelte    | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/apps/staged/src/lib/features/actions/ActionOutputModal.svelte b/apps/staged/src/lib/features/actions/ActionOutputModal.svelte
index 618cb01db..a5bceda47 100644
--- a/apps/staged/src/lib/features/actions/ActionOutputModal.svelte
+++ b/apps/staged/src/lib/features/actions/ActionOutputModal.svelte
@@ -187,6 +187,15 @@
 
   // React to executionId changes (e.g. when "Run again" switches to a new execution)
   $effect(() => {
+    // Bail out unless the modal is actually open with a real execution. The
+    // modal is mounted persistently (open is a prop), so without this guard
+    // every closed instance would still fetch getActionOutputBuffer('') and
+    // install output/status listeners — wasteful on pages with many cards,
+    // and it surfaces a spurious "not found" load error.
+    if (!open || !executionId) {
+      cleanup();
+      return;
+    }
     void executionId; // subscribe to executionId changes
     // Reset state for the new execution
     status = 'running';

From 4b20d9dc496bc88e9949fefe2d9ffef32879460f Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Fri, 5 Jun 2026 12:09:48 +1000
Subject: [PATCH 28/28] fix(staged): only register session search shortcut
 while the modal is open
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SessionModal is mounted persistently for every branch card (the `open`
prop toggles visibility, per the shadcn Dialog pattern), and it registered
its global search-shortcut target in onMount. Since runSearchShortcut()
always dispatches to the last-registered target, every closed, off-screen
per-branch modal also held a target — so a hidden modal could capture
Cmd/Ctrl+F and search-next/previous even when no session modal was open, or
when a different modal was visible.

Move the registration out of onMount into a $effect gated on `open`: the
target is registered when the modal opens and torn down (via the effect's
cleanup) when it closes, so only a visible modal can claim the search
shortcut. onMount is no longer used and is dropped from the import;
onDestroy still unregisters as a final safety.

Verified with pnpm check (svelte-check + tsc): 0 errors, 0 warnings.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../lib/features/sessions/SessionModal.svelte  | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/apps/staged/src/lib/features/sessions/SessionModal.svelte b/apps/staged/src/lib/features/sessions/SessionModal.svelte
index efcb961a9..5fd274366 100644
--- a/apps/staged/src/lib/features/sessions/SessionModal.svelte
+++ b/apps/staged/src/lib/features/sessions/SessionModal.svelte
@@ -24,7 +24,7 @@
     onClose   — callback to close this modal
 -->
 <script lang="ts">
-  import { onMount, onDestroy, tick, untrack } from 'svelte';
+  import { onDestroy, tick, untrack } from 'svelte';
   import { slide } from 'svelte/transition';
   import X from '@lucide/svelte/icons/x';
   import AlertCircle from '@lucide/svelte/icons/alert-circle';
@@ -375,12 +375,24 @@
   // Lifecycle
   // =========================================================================
 
-  onMount(() => {
-    unregisterSearchTarget = registerSearchShortcutTarget({
+  // Register the global search-shortcut target only while the modal is open.
+  // This component is mounted persistently for every branch card (the `open`
+  // prop toggles visibility), and runSearchShortcut() always dispatches to the
+  // last-registered target. Registering in onMount would let a closed,
+  // off-screen modal capture Cmd/Ctrl+F and search next/previous, so gate
+  // registration on `open` instead.
+  $effect(() => {
+    if (!open) return;
+    const unregister = registerSearchShortcutTarget({
       find: openSearch,
       next: nextMatch,
       previous: previousMatch,
     });
+    unregisterSearchTarget = unregister;
+    return () => {
+      unregister();
+      unregisterSearchTarget = null;
+    };
   });
 
   onDestroy(() => {