From 8f874126a94f36c31a550aac74a33873eaa19d4b Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Fri, 12 Jun 2026 15:01:56 +1000
Subject: [PATCH 1/2] refactor: remove shadcn tooltip layer

Replace tooltip wrapper usage with native title attributes where the hint still adds useful context, and drop repeated visible-text tooltips.

Remove the app-level tooltip provider and delete the unused shadcn tooltip components.

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/App.svelte                    | 137 ++++---
 .../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 -
 .../features/actions/ActionOutputModal.svelte | 185 ++++-----
 .../lib/features/branches/BranchCard.svelte   |  27 +-
 .../branches/BranchCardActionsBar.svelte      | 377 +++++++++---------
 .../branches/BranchCardHeaderInfo.svelte      | 107 ++---
 .../branches/BranchCardPrButton.svelte        |  19 +-
 .../branches/ParentBranchCommitsHover.svelte  |  19 +-
 .../features/diff/DiffCommentsSection.svelte  | 135 +++----
 .../features/diff/DiffFileTreeSection.svelte  | 134 +++----
 .../src/lib/features/diff/DiffModal.svelte    | 128 +++---
 .../features/diff/DiffReferenceSection.svelte |  66 ++-
 .../src/lib/features/layout/TopBar.svelte     | 115 +++---
 .../src/lib/features/notes/NoteModal.svelte   | 117 ++----
 .../features/projects/ProjectSection.svelte   | 241 +++++------
 .../features/projects/ProjectsSidebar.svelte  |  93 ++---
 .../src/lib/features/projects/RepoCard.svelte | 119 +++---
 .../features/projects/ReposListView.svelte    | 143 +++----
 .../projects/SidebarPinnedRepo.svelte         | 130 +++---
 .../features/projects/SuggestedRepos.svelte   |  24 +-
 .../features/sessions/ImageAttachment.svelte  |  53 +--
 .../features/sessions/NewSessionModal.svelte  |  27 +-
 .../features/sessions/PipelineSteps.svelte    |  70 ++--
 .../features/sessions/SessionLauncher.svelte  | 121 +++---
 .../lib/features/sessions/SessionModal.svelte | 347 +++++++---------
 .../lib/features/settings/SettingsPage.svelte |  16 +-
 .../features/timeline/ImageViewerModal.svelte |  55 +--
 .../lib/features/timeline/TimelineRow.svelte  | 227 +++++------
 .../src/lib/shared/InContentSearch.svelte     |  97 ++---
 apps/staged/src/lib/shared/RepoBadge.svelte   |  14 +-
 apps/staged/src/lib/shared/RepoLabel.svelte   |  19 +-
 36 files changed, 1349 insertions(+), 2112 deletions(-)
 delete mode 100644 apps/staged/src/lib/components/ui/tooltip/index.ts
 delete mode 100644 apps/staged/src/lib/components/ui/tooltip/tooltip-content.svelte
 delete mode 100644 apps/staged/src/lib/components/ui/tooltip/tooltip-portal.svelte
 delete mode 100644 apps/staged/src/lib/components/ui/tooltip/tooltip-provider.svelte
 delete mode 100644 apps/staged/src/lib/components/ui/tooltip/tooltip-trigger.svelte
 delete mode 100644 apps/staged/src/lib/components/ui/tooltip/tooltip.svelte

diff --git a/apps/staged/src/App.svelte b/apps/staged/src/App.svelte
index d5c237946..5c6d1db6e 100644
--- a/apps/staged/src/App.svelte
+++ b/apps/staged/src/App.svelte
@@ -16,7 +16,6 @@
   import SettingsPage from './lib/features/settings/SettingsPage.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,
@@ -444,82 +443,80 @@
 </script>
 
 {#if preferences.loaded}
-  <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-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>
+  {#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>
-        </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>
+            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.
             </p>
-            <div class="update-footer">
-              <div></div>
-              <div class="update-actions">
-                <Button variant="ghost" size="sm" onclick={handleClose}>Close</Button>
-              </div>
+            <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>
-      </main>
-    {:else}
-      <main>
-        <TopBar />
-        <div class="content">
-          {#if storeError}
-            <div class="error-state">
-              <p>{storeError}</p>
+      </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 variant="ghost" size="sm" onclick={handleClose}>Close</Button>
             </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>
         </div>
-      </main>
-    {/if}
-
-    {#if showSessionLab}
-      <SessionLauncher onClose={() => (showSessionLab = false)} />
-    {/if}
-
-    <Toaster position="bottom-right" visibleToasts={4} duration={8000} closeButton expand />
-  </TooltipProvider>
+      </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}
+
+  <Toaster position="bottom-right" visibleToasts={4} duration={8000} closeButton expand />
 {/if}
 
 <style>
diff --git a/apps/staged/src/lib/components/ui/tooltip/index.ts b/apps/staged/src/lib/components/ui/tooltip/index.ts
deleted file mode 100644
index 2e8df8230..000000000
--- a/apps/staged/src/lib/components/ui/tooltip/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-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
deleted file mode 100644
index 545db5acc..000000000
--- a/apps/staged/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<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-(--z-index-floating) 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
deleted file mode 100644
index 7b9e8f9f1..000000000
--- a/apps/staged/src/lib/components/ui/tooltip/tooltip-portal.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<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
deleted file mode 100644
index 49f8379ba..000000000
--- a/apps/staged/src/lib/components/ui/tooltip/tooltip-provider.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<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
deleted file mode 100644
index b7640e4ed..000000000
--- a/apps/staged/src/lib/components/ui/tooltip/tooltip-trigger.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<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
deleted file mode 100644
index 42a939b4c..000000000
--- a/apps/staged/src/lib/components/ui/tooltip/tooltip.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<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/features/actions/ActionOutputModal.svelte b/apps/staged/src/lib/features/actions/ActionOutputModal.svelte
index a5bceda47..311d7eead 100644
--- a/apps/staged/src/lib/features/actions/ActionOutputModal.svelte
+++ b/apps/staged/src/lib/features/actions/ActionOutputModal.svelte
@@ -33,7 +33,6 @@
   import { sanitize } from '../../shared/sanitize';
   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 {
@@ -428,122 +427,86 @@
         {/if}
       </div>
       <div class="header-actions">
-        <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>
+        <span
+          class="inline-flex"
+          title={saveState === 'error'
+            ? (saveError ?? 'Failed to save note')
+            : selectedText
+              ? 'Save selected text as a note'
+              : 'Save full log as a note'}
+        >
+          <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>
         {#if isRunning}
           {@const isCurrentlyStopping = isStopping || isStoppingDerived}
-          <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>
+          <span 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>
         {:else if onRunAgain}
-          <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>
+          <Button
+            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>
         {/if}
         {#if status === 'failed' && onRemove}
-          <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>
+          <Button
+            variant="destructive"
+            size="sm"
+            class="gap-1.5 px-3 text-[13px] font-medium max-[640px]:h-10 max-[640px]:px-2.5"
+            title="Remove this failed run"
+            onclick={handleRemove}
+          >
+            <span>Remove</span>
+          </Button>
         {/if}
-        <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>
+        <Button
+          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"
+          title={viewport.showShortcutHints ? 'Close (Esc)' : 'Close'}
+          aria-label="Close"
+          onclick={onClose}
+        >
+          <X size={16} />
+        </Button>
       </div>
     </header>
 
diff --git a/apps/staged/src/lib/features/branches/BranchCard.svelte b/apps/staged/src/lib/features/branches/BranchCard.svelte
index c13811f22..8b77d4f21 100644
--- a/apps/staged/src/lib/features/branches/BranchCard.svelte
+++ b/apps/staged/src/lib/features/branches/BranchCard.svelte
@@ -62,7 +62,6 @@
   import NoteModal from '../notes/NoteModal.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,
@@ -1369,22 +1368,16 @@
         baseBranch={formatBaseBranch(branch.baseBranch)}
       />
       <div class="header-actions">
-        <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>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          title="Delete branch"
+          aria-label="Delete branch"
+          onclick={() => onDelete?.()}
+          class="size-7 text-[var(--text-faint)]"
+        >
+          <Trash2 size={16} />
+        </Button>
       </div>
     </div>
     <div class="card-content">
diff --git a/apps/staged/src/lib/features/branches/BranchCardActionsBar.svelte b/apps/staged/src/lib/features/branches/BranchCardActionsBar.svelte
index b6e327b2e..b717b86f8 100644
--- a/apps/staged/src/lib/features/branches/BranchCardActionsBar.svelte
+++ b/apps/staged/src/lib/features/branches/BranchCardActionsBar.svelte
@@ -56,7 +56,6 @@
   import { agentState } from '../agents/agent.svelte';
   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 = {
@@ -633,62 +632,53 @@
       class:fading={execution.fading}
       transition:slideAndFade={{ duration: 300, axis: 'x' }}
     >
-      <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>
+      <Button
+        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',
+        ]}
+        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}
+        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>
     </div>
   {/each}
   <!-- Primary run action button -->
@@ -711,150 +701,141 @@
       {#if isRunning && hasEndpoint && phase?.type === 'running' && phase.endpoint}
         <!-- Pill-shaped button when running with endpoint -->
         <div class="primary-action-pill">
-          <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 -->
-        <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
+          <Button
+            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',
+            ]}
+            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}
-          </Tooltip.Content>
-        </Tooltip.Root>
+                : `View output for ${primaryRunAction.name}`}
+            aria-label={isStopping
+              ? 'Stopping'
+              : showStopIcon
+                ? `Stop ${primaryRunAction.name}`
+                : `View output for ${primaryRunAction.name}`}
+            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>
+          <Button
+            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"
+            title={`Copy endpoint: ${copyUrl}`}
+            aria-label="Copy endpoint"
+            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>
+        </div>
+      {:else}
+        <!-- Standard circular button -->
+        <Button
+          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',
+          ]}
+          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}
+          aria-label={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}
+          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>
       {/if}
     </div>
   {/if}
diff --git a/apps/staged/src/lib/features/branches/BranchCardHeaderInfo.svelte b/apps/staged/src/lib/features/branches/BranchCardHeaderInfo.svelte
index 7f06809ca..558e1fa21 100644
--- a/apps/staged/src/lib/features/branches/BranchCardHeaderInfo.svelte
+++ b/apps/staged/src/lib/features/branches/BranchCardHeaderInfo.svelte
@@ -6,7 +6,6 @@
   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 {
@@ -37,21 +36,14 @@
 </script>
 
 {#snippet capsule()}
-  <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>
+  <span class="branch-capsule" title={baseBranch ?? undefined}>
+    {baseBranch}{#if parentAheadCount > 0}<span
+        class="ahead-count"
+        transition:fade={{ duration: 150 }}
+      >
+        +{parentAheadCount}</span
+      >{/if}
+  </span>
 {/snippet}
 
 {#snippet parentPill()}
@@ -64,24 +56,19 @@
       {@render capsule()}
     {/if}
     {#if parentAheadCount > 0 && onRebase}
-      <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>
+      <span
+        class="inline-flex"
+        title={rebaseDisabled ? 'Rebase unavailable' : 'Rebase onto parent'}
+        transition:slide={{ axis: 'x', duration: 150 }}
+      >
+        <Button
+          variant="outline"
+          size="xs"
+          disabled={rebaseDisabled}
+          onclick={onRebase}
+          class="h-[22px]">Rebase</Button
+        >
+      </span>
     {/if}
   {/if}
 {/snippet}
@@ -90,16 +77,9 @@
   {#if refreshingGitState}
     <Spinner size={10} />
   {:else if fetchError}
-    <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>
+    <span class="fetch-error" title={fetchError} transition:slide={{ axis: 'x', duration: 150 }}>
+      <AlertTriangle size={12} />
+    </span>
   {/if}
 {/snippet}
 
@@ -112,30 +92,16 @@
       /></span
     >
     <div class="header-meta">
-      <Tooltip.Root>
-        <Tooltip.Trigger>
-          {#snippet child({ props })}
-            <span class="branch-capsule" {...props}>{branchName}</span>
-          {/snippet}
-        </Tooltip.Trigger>
-        <Tooltip.Content>{branchName}</Tooltip.Content>
-      </Tooltip.Root>
+      <span class="branch-capsule" title={branchName}>{branchName}</span>
       {#if baseBranch}
         <ChevronRight size={12} />
       {/if}
       {@render parentPill()}
       {#if warning}
-        <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>
+        <span class="branch-warning" title={warning}>
+          <AlertTriangle size={12} />
+          <span>{warning}</span>
+        </span>
       {/if}
       {@render refreshStatus()}
     </div>
@@ -145,17 +111,10 @@
       <div class="header-meta">
         {@render parentPill()}
         {#if warning}
-          <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>
+          <span class="branch-warning" title={warning}>
+            <AlertTriangle size={12} />
+            <span>{warning}</span>
+          </span>
         {/if}
         {@render refreshStatus()}
       </div>
diff --git a/apps/staged/src/lib/features/branches/BranchCardPrButton.svelte b/apps/staged/src/lib/features/branches/BranchCardPrButton.svelte
index 237000e39..2f8a6dc80 100644
--- a/apps/staged/src/lib/features/branches/BranchCardPrButton.svelte
+++ b/apps/staged/src/lib/features/branches/BranchCardPrButton.svelte
@@ -14,7 +14,6 @@
   import Spinner from '../../shared/Spinner.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 {
@@ -723,14 +722,7 @@
         {/if}
       </span>
       {#if prStatusStale}
-        <Tooltip.Root>
-          <Tooltip.Trigger>
-            {#snippet child({ props: staleProps })}
-              <span class="pr-status-stale" {...staleProps}>!</span>
-            {/snippet}
-          </Tooltip.Trigger>
-          <Tooltip.Content>PR status may be outdated</Tooltip.Content>
-        </Tooltip.Root>
+        <span class="pr-status-stale" title="PR status may be outdated">!</span>
       {:else if prStatusIndicator}
         <span class="pr-status-indicator {prStatusIndicator}"></span>
       {/if}
@@ -741,14 +733,7 @@
 {#snippet renderButton()}
   {#if hasCodeChanges || branch.prNumber}
     {#if branch.prNumber}
-      <Tooltip.Root>
-        <Tooltip.Trigger>
-          {#snippet child({ props })}
-            {@render prButton(props)}
-          {/snippet}
-        </Tooltip.Trigger>
-        <Tooltip.Content>{prButtonTitle}</Tooltip.Content>
-      </Tooltip.Root>
+      {@render prButton({ title: prButtonTitle })}
     {:else}
       {@render prButton({})}
     {/if}
diff --git a/apps/staged/src/lib/features/branches/ParentBranchCommitsHover.svelte b/apps/staged/src/lib/features/branches/ParentBranchCommitsHover.svelte
index c9574b031..c789f2fa5 100644
--- a/apps/staged/src/lib/features/branches/ParentBranchCommitsHover.svelte
+++ b/apps/staged/src/lib/features/branches/ParentBranchCommitsHover.svelte
@@ -4,7 +4,6 @@
   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 {
@@ -208,23 +207,9 @@
         {#each visibleCommits as commit (commit.sha)}
           <li class="commit-row">
             <div class="commit-main">
-              <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-subject" title={commit.subject}>{commit.subject}</div>
               <div class="commit-meta">
-                <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-author" title={commit.authorEmail}>{commit.author}</span>
                 <span class="commit-dot">·</span>
                 <span class="commit-time">{formatRelativeTimeSeconds(commit.timestamp)}</span>
               </div>
diff --git a/apps/staged/src/lib/features/diff/DiffCommentsSection.svelte b/apps/staged/src/lib/features/diff/DiffCommentsSection.svelte
index 3f18cad22..3828792f8 100644
--- a/apps/staged/src/lib/features/diff/DiffCommentsSection.svelte
+++ b/apps/staged/src/lib/features/diff/DiffCommentsSection.svelte
@@ -8,7 +8,6 @@
   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,47 +76,35 @@
   </div>
   <div class="section-right">
     {#if comments.length > 0}
-      <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>
+      <Button
+        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',
+        ]}
+        title={copiedFeedback ? 'Copied!' : 'Copy all comments'}
+        aria-label={copiedFeedback ? 'Copied!' : 'Copy all comments'}
+        onclick={onCopyAll}
+      >
+        {#if copiedFeedback}
+          <Check size={12} />
+        {:else}
+          <Copy size={12} />
+        {/if}
+      </Button>
+      <Button
+        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"
+        title="Delete all comments"
+        aria-label="Delete all comments"
+        onclick={onDeleteAll}
+      >
+        <Trash2 size={12} />
+      </Button>
     {/if}
   </div>
 </div>
@@ -135,25 +122,19 @@
           >
             {@render commentItemContent(comment)}
           </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>
+          <Button
+            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"
+            title="Delete comment"
+            aria-label="Delete comment"
+            onclick={(e: MouseEvent) => {
+              e.stopPropagation();
+              onDeleteComment(comment.id);
+            }}
+          >
+            <Trash2 size={12} />
+          </Button>
         </div>
       </li>
     {/each}
@@ -181,25 +162,19 @@
             <div class="tree-item comment-item" style="padding-left: 8px">
               {@render commentItemContent(comment)}
             </div>
-            <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>
+            <Button
+              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"
+              title="Restore comment"
+              aria-label="Restore comment"
+              onclick={(e: MouseEvent) => {
+                e.stopPropagation();
+                onRestoreComment(comment.id);
+              }}
+            >
+              <Undo2 size={12} />
+            </Button>
           </div>
         </li>
       {/each}
diff --git a/apps/staged/src/lib/features/diff/DiffFileTreeSection.svelte b/apps/staged/src/lib/features/diff/DiffFileTreeSection.svelte
index f3bd298c7..155d4804b 100644
--- a/apps/staged/src/lib/features/diff/DiffFileTreeSection.svelte
+++ b/apps/staged/src/lib/features/diff/DiffFileTreeSection.svelte
@@ -9,7 +9,6 @@
   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 {
@@ -161,38 +160,30 @@
       </span>
     </span>
   {:else}
-    <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>
+    <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)}
+      title={showReviewedSection ? 'Mark as needs review' : 'Mark as reviewed'}
+      aria-label={showReviewedSection ? 'Mark as needs review' : 'Mark as reviewed'}
+      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>
   {/if}
 {/snippet}
 
@@ -212,40 +203,31 @@
   {@const total = fileChangeTotal(file)}
   {@const added = lineCount(file.addedLines)}
   {@const deleted = lineCount(file.deletedLines)}
-  <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>
+  <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>
 {/snippet}
 
 {#snippet treeNodes(nodes: TreeNode[], depth: number, showReviewedSection: boolean)}
@@ -328,18 +310,12 @@
           {#if searchState?.state.isOpen && searchState.state.fileResults.has(node.file.path)}
             {@const resultCount =
               searchState.state.fileResults.get(node.file.path)?.matches.length ?? 0}
-            <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>
+            <span
+              class="search-result-count"
+              title={`${resultCount} search result${resultCount !== 1 ? 's' : ''}`}
+            >
+              {resultCount}
+            </span>
           {/if}
         </button>
 
diff --git a/apps/staged/src/lib/features/diff/DiffModal.svelte b/apps/staged/src/lib/features/diff/DiffModal.svelte
index 78406c643..df73ef9a3 100644
--- a/apps/staged/src/lib/features/diff/DiffModal.svelte
+++ b/apps/staged/src/lib/features/diff/DiffModal.svelte
@@ -23,7 +23,6 @@
   import Spinner from '../../shared/Spinner.svelte';
   import RepoLabel from '../../shared/RepoLabel.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';
@@ -1228,22 +1227,16 @@
     <div class="title-bar" onpointerdown={startDrag}>
       <div class="traffic-light-spacer"></div>
       <div class="left-actions">
-        <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>
+        <Button
+          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"
+          title={viewport.showShortcutHints ? 'Back (Esc)' : 'Back'}
+          aria-label="Back"
+          onclick={onClose}
+        >
+          <ArrowLeft size={14} />
+        </Button>
       </div>
       <div class="title-content">
         {#if projectName}
@@ -1256,33 +1249,26 @@
       <div class="drag-spacer"></div>
       {#if showContextSwitcher}
         <div class="context-switcher">
-          <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>
+          <span class="inline-flex" title="Switch diff context">
+            <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>
           {#if showContextDropdown}
             <div class="context-dropdown" role="listbox" aria-label="Diff context">
               {#each reversedCommits as commit, i (commit.sha)}
@@ -1323,23 +1309,16 @@
         </div>
       {/if}
       {#if isSmallDiffViewport}
-        <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>
+        <Button
+          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"
+          title="Show changed files"
+          aria-label="Show changed files"
+          onclick={() => (showMobileSidebar = true)}
+        >
+          <PanelRightOpen size={14} />
+        </Button>
       {/if}
     </div>
 
@@ -1394,23 +1373,16 @@
       <div class="mobile-sidebar-dialog">
         <div class="mobile-sidebar-header">
           <span class="mobile-sidebar-title">Changed files</span>
-          <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>
+          <Button
+            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"
+            title="Close changed files"
+            aria-label="Close changed files"
+            onclick={() => (showMobileSidebar = false)}
+          >
+            <X size={14} />
+          </Button>
         </div>
         <div class="mobile-sidebar-body">
           {@render fileSidebarContents()}
diff --git a/apps/staged/src/lib/features/diff/DiffReferenceSection.svelte b/apps/staged/src/lib/features/diff/DiffReferenceSection.svelte
index e0451bdef..bfedaa8d2 100644
--- a/apps/staged/src/lib/features/diff/DiffReferenceSection.svelte
+++ b/apps/staged/src/lib/features/diff/DiffReferenceSection.svelte
@@ -2,7 +2,6 @@
   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;
@@ -33,45 +32,32 @@
   <ul class="tree-section reference-section">
     {#each referenceFiles as refFile (refFile.path)}
       <li class="tree-item-wrapper">
-        <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>
+        <div
+          class="tree-item file-item reference-item group/ref-item"
+          class:selected={selectedFile === refFile.path}
+          style="padding-left: 8px"
+          title={refFile.path}
+          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>
+          <Button
+            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"
+            title="Remove reference file"
+            aria-label="Remove reference file"
+            onclick={(e: MouseEvent) => {
+              e.stopPropagation();
+              onRemoveReferenceFile(refFile.path);
+            }}
+          >
+            <X size={12} />
+          </Button>
+        </div>
       </li>
     {/each}
   </ul>
diff --git a/apps/staged/src/lib/features/layout/TopBar.svelte b/apps/staged/src/lib/features/layout/TopBar.svelte
index 6980c487c..d58732b0b 100644
--- a/apps/staged/src/lib/features/layout/TopBar.svelte
+++ b/apps/staged/src/lib/features/layout/TopBar.svelte
@@ -19,7 +19,6 @@
   } 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();
@@ -51,78 +50,60 @@
   <div class="traffic-light-spacer"></div>
   {#if !viewport.isMobile}
     <div class="left-actions">
-      <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>
+      <span
+        class="inline-flex"
+        title={sidebarOpen ? 'Hide projects sidebar' : 'Show projects sidebar'}
+      >
+        <Button
+          variant="ghost"
+          size="icon-xs"
+          class="max-md:size-10 [&_svg]:size-3.5"
+          aria-label={sidebarOpen ? 'Hide projects sidebar' : 'Show projects sidebar'}
+          onclick={toggleProjectsSidebar}
+          disabled={!projectsSidebarState.hasProjects}
+        >
+          {#if !sidebarOpen || !projectsSidebarState.hasProjects}
+            <PanelLeftOpen size={14} />
+          {:else}
+            <PanelLeftClose size={14} />
+          {/if}
+        </Button>
+      </span>
     </div>
   {/if}
   <div class="drag-spacer"></div>
 
   <div class="top-bar-actions">
-    <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>
+    <span
+      class="inline-flex"
+      title={navigation.activeView === 'settings'
+        ? 'Unavailable while viewing settings'
+        : viewport.showShortcutHints
+          ? 'New project (⌘N)'
+          : 'New project'}
+    >
+      <Button
+        variant="ghost"
+        size="icon-xs"
+        class="max-md:size-10 [&_svg]:size-3.5"
+        aria-label="New project"
+        onclick={() => window.dispatchEvent(new CustomEvent('staged:new-project'))}
+        disabled={navigation.activeView === 'settings'}
+      >
+        <Plus size={14} />
+      </Button>
+    </span>
 
-    <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>
+    <Button
+      variant="ghost"
+      size="icon-xs"
+      class="max-md:size-10 [&_svg]:size-3.5"
+      title={viewport.showShortcutHints ? 'Settings (⌘,)' : 'Settings'}
+      aria-label="Settings"
+      onclick={() => openSettings()}
+    >
+      <SlidersHorizontal size={14} />
+    </Button>
   </div>
 </div>
 
diff --git a/apps/staged/src/lib/features/notes/NoteModal.svelte b/apps/staged/src/lib/features/notes/NoteModal.svelte
index 4c2cafc05..75a3eae8e 100644
--- a/apps/staged/src/lib/features/notes/NoteModal.svelte
+++ b/apps/staged/src/lib/features/notes/NoteModal.svelte
@@ -13,7 +13,6 @@
   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 { countAssistantMessagesAfter, handleExternalLinkClick } from '../../api/commands';
   import { formatChatButtonLabel } from '../sessions/noteFreshness';
@@ -218,65 +217,43 @@
         onClose={closeSearch}
       />
       <div class="header-actions">
-        <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>
+        <Button
+          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)]',
+          ]}
+          title={copied ? 'Copied!' : 'Copy note to clipboard'}
+          aria-label={copied ? 'Copied!' : 'Copy note to clipboard'}
+          onclick={handleShare}
+        >
+          {#if copied}
+            <Check size={16} />
+          {:else}
+            <Copy size={16} />
+          {/if}
+        </Button>
         {#if canOpenSession}
-          <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>
+          <Button
+            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>
         {/if}
-        <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>
+        <Button
+          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"
+          title={viewport.showShortcutHints ? 'Close (Esc)' : 'Close'}
+          aria-label="Close"
+          onclick={onClose}
+        >
+          <X size={16} />
+        </Button>
       </div>
     </Dialog.Header>
     <div class="modal-body">
@@ -296,22 +273,14 @@
       <div class="next-steps">
         {#if showChatInfo}
           <div class="chat-info-row">
-            <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>
+            <Button
+              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" title={chatButtonLabel}>{chatButtonLabel}</span>
+            </Button>
           </div>
         {/if}
         {#if nextSteps && onStartSession && nextSteps.noteStep}
diff --git a/apps/staged/src/lib/features/projects/ProjectSection.svelte b/apps/staged/src/lib/features/projects/ProjectSection.svelte
index fe71c3f91..728560ed5 100644
--- a/apps/staged/src/lib/features/projects/ProjectSection.svelte
+++ b/apps/staged/src/lib/features/projects/ProjectSection.svelte
@@ -61,7 +61,6 @@
   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 {
@@ -513,30 +512,19 @@
 <div class="project-section">
   <div class="project-header" class:deleting>
     <div class="project-info">
-      <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>
+      <Button
+        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"
+        title="Back to projects"
+        aria-label="Back to projects"
+        onclick={goHome}
+      >
+        <ChevronLeft size={16} />
+      </Button>
+      <span class="project-name" title={projectDisplayName(project)}
+        >{projectDisplayName(project)}</span
+      >
       {#if deleting}
         <div class="deleting-status" role="status" aria-live="polite">
           <Spinner size={12} />
@@ -550,52 +538,39 @@
         </div>
       {/if}
       {#if projectWorkspaceStatus}
-        <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>
+        <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
+              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>
+          {/if}
+        </div>
       {/if}
     </div>
     {#if !deleting}
@@ -664,25 +639,19 @@
     >
       <div class="prompt-input-row">
         {#if imageIds.length === 0}
-          <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>
+          <Button
+            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',
+            ]}
+            title="Attach image"
+            aria-label="Attach image"
+            onclick={openImagePicker}
+          >
+            <Paperclip size={14} />
+          </Button>
         {/if}
         <HashtagInput
           class="prompt-input"
@@ -697,29 +666,23 @@
         />
         <div class="prompt-actions">
           <AgentSelector />
-          <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>
+          <span class="inline-flex" title={sendButtonTitle}>
+            <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',
+              ]}
+              aria-label={sendButtonTitle}
+              onclick={handleSubmitPrompt}
+              disabled={!canSubmitPrompt}
+            >
+              <Send size={14} />
+            </Button>
+          </span>
         </div>
       </div>
       {#if imageIds.length > 0}
@@ -731,40 +694,28 @@
               {:else}
                 <div class="reply-image-placeholder"><ImagePlus size={16} /></div>
               {/if}
-              <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>
+              <Button
+                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"
+                title="Remove image"
+                aria-label="Remove image"
+                onclick={() => removeImage(imageId)}
+              >
+                <X size={10} />
+              </Button>
             </div>
           {/each}
-          <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>
+          <Button
+            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"
+            title="Add image"
+            aria-label="Add image"
+            onclick={openImagePicker}
+          >
+            <Plus size={16} />
+          </Button>
         </div>
       {/if}
     </div>
diff --git a/apps/staged/src/lib/features/projects/ProjectsSidebar.svelte b/apps/staged/src/lib/features/projects/ProjectsSidebar.svelte
index efc87ff0b..87f6cfa52 100644
--- a/apps/staged/src/lib/features/projects/ProjectsSidebar.svelte
+++ b/apps/staged/src/lib/features/projects/ProjectsSidebar.svelte
@@ -43,7 +43,6 @@
   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;
 
@@ -326,24 +325,16 @@
       {:else}
         <div class="projects-list">
           {#if reposUiEnabled && pinnedRepos.length > 0}
-            <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>
+            <button
+              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>
 
             <div class="pinned-repos-list" role="list" aria-label="Pinned repos">
               {#each pinnedRepos as repo, index (repo.githubRepo + '\t' + repo.subpath)}
@@ -362,25 +353,16 @@
           {/if}
 
           {#if showAllProjectsRow}
-            <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>
+            <button
+              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>
           {/if}
 
           {#if projects.length === 0}
@@ -523,28 +505,19 @@
               </ContextMenu.Root>
             {/each}
           {/if}
-          <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>
+          <Button
+            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"
+            title={viewport.showShortcutHints ? 'New project (⌘N)' : 'New project'}
+            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>
         </div>
       {/if}
     </div>
diff --git a/apps/staged/src/lib/features/projects/RepoCard.svelte b/apps/staged/src/lib/features/projects/RepoCard.svelte
index a03ee0d9e..a23b6d1f4 100644
--- a/apps/staged/src/lib/features/projects/RepoCard.svelte
+++ b/apps/staged/src/lib/features/projects/RepoCard.svelte
@@ -22,7 +22,6 @@
   import * as commands from '../../api/commands';
   import { toast } from 'svelte-sonner';
   import { Button } from '$lib/components/ui/button';
-  import * as Tooltip from '$lib/components/ui/tooltip';
 
   interface Props {
     repo: RepoHomeItem;
@@ -81,77 +80,57 @@
   }
 </script>
 
-<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};"
+<div
+  class="repo-card"
+  style="--accent: {accentColor}; --card-bg: {bgColor}; --card-bg-hover: {bgHoverColor}; --card-border: {borderColor}; --card-border-hover: {borderHoverColor};"
+>
+  <Button
+    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',
+    ]}
+    title={repo.pinned ? 'Unpin repo' : 'Pin repo'}
+    aria-label={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" title={repo.shortName}>{repo.shortName}</span>
+
+  <span class="card-subtitle" title={subtitle}>{subtitle}</span>
+
+  {#if !repo.hasLocalClone}
+    <div class="card-footer">
+      <Button
+        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"
+        title="Clone repo locally"
+        aria-label="Clone repo locally"
+        onclick={handleClone}
+        disabled={cloning}
       >
-        <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 cloning}
+          <Spinner size={14} />
+        {:else}
+          <Download size={14} />
         {/if}
-      </div>
-    {/snippet}
-  </Tooltip.Trigger>
-  <Tooltip.Content>{subtitle}</Tooltip.Content>
-</Tooltip.Root>
+      </Button>
+    </div>
+  {/if}
+</div>
 
 <style>
   .repo-card {
diff --git a/apps/staged/src/lib/features/projects/ReposListView.svelte b/apps/staged/src/lib/features/projects/ReposListView.svelte
index 062bb7e8e..c4f70df1e 100644
--- a/apps/staged/src/lib/features/projects/ReposListView.svelte
+++ b/apps/staged/src/lib/features/projects/ReposListView.svelte
@@ -27,7 +27,6 @@
   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);
@@ -126,22 +125,16 @@
   <div class="main-panel">
     <div class="content">
       <div class="header-row">
-        <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>
+        <Button
+          variant="ghost"
+          size="icon"
+          class="size-8 rounded-lg text-muted-foreground hover:bg-[var(--bg-hover)] hover:text-foreground [&_svg]:!size-4"
+          title="Back to home"
+          aria-label="Back to home"
+          onclick={goHome}
+        >
+          <ArrowLeft size={16} />
+        </Button>
         <h1>Repos</h1>
       </div>
 
@@ -174,76 +167,56 @@
             {@const borderHover = badgeBorderHover(repo.hue, darkMode.value)}
             {@const key = repoKey(repo)}
             <div class="repo-card-wrapper">
-              <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};"
+              <div
+                class="repo-card"
+                style="--accent: {accent}; --card-bg: {bg}; --card-bg-hover: {bgHover}; --card-border: {border}; --card-border-hover: {borderHover};"
+              >
+                <Button
+                  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',
+                  ]}
+                  title={repo.pinned ? 'Unpin repo' : 'Pin repo'}
+                  aria-label={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" title={repo.shortName}>{repo.shortName}</span>
+                <span class="card-subtitle" title={subtitle(repo)}>{subtitle(repo)}</span>
+
+                {#if !repo.hasLocalClone}
+                  <div class="card-footer">
+                    <Button
+                      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"
+                      title="Clone repo locally"
+                      aria-label="Clone repo locally"
+                      onclick={(e) => handleCloneRepo(repo, e)}
+                      disabled={cloningRepos.has(key)}
                     >
-                      <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 cloningRepos.has(key)}
+                        <Spinner size={14} />
+                      {:else}
+                        <Download size={14} />
                       {/if}
-                    </div>
-                  {/snippet}
-                </Tooltip.Trigger>
-                <Tooltip.Content>{subtitle(repo)}</Tooltip.Content>
-              </Tooltip.Root>
+                    </Button>
+                  </div>
+                {/if}
+              </div>
               {#if repo.pinned}
                 <div class="card-label">Pinned</div>
               {/if}
diff --git a/apps/staged/src/lib/features/projects/SidebarPinnedRepo.svelte b/apps/staged/src/lib/features/projects/SidebarPinnedRepo.svelte
index 8850000fd..ea19e187f 100644
--- a/apps/staged/src/lib/features/projects/SidebarPinnedRepo.svelte
+++ b/apps/staged/src/lib/features/projects/SidebarPinnedRepo.svelte
@@ -28,7 +28,6 @@
   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;
@@ -175,88 +174,63 @@
   <div class="card-stripe"></div>
 
   <div class="card-content">
-    <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-name-row" title={subtitle}>
+      <span class="repo-name">{repo.shortName}</span>
+      {#if subpathLabel}
+        <span class="subpath-badge">{subpathLabel}</span>
+      {/if}
+    </div>
 
     <div class="card-actions">
-      <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>
+      <Button
+        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"
+        title="New project"
+        aria-label="New project"
+        onclick={(e) => {
+          e.stopPropagation();
+          openNewProjectForRepo();
+        }}
+      >
+        <Plus size={12} />
+      </Button>
 
       {#if repo.hasLocalClone}
-        <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>
+        <Button
+          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"
+          title="Run"
+          aria-label="Run"
+          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>
       {:else}
-        <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>
+        <span class="inline-flex" title="Clone repo locally">
+          <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"
+            aria-label="Clone repo locally"
+            disabled={cloning}
+            onclick={(e) => {
+              e.stopPropagation();
+              handleClone();
+            }}
+          >
+            {#if cloning}
+              <Spinner size={12} />
+            {:else}
+              <Download size={12} />
+            {/if}
+          </Button>
+        </span>
       {/if}
 
       <DropdownMenu.Root>
diff --git a/apps/staged/src/lib/features/projects/SuggestedRepos.svelte b/apps/staged/src/lib/features/projects/SuggestedRepos.svelte
index 8c29a2afe..f1bbd2af9 100644
--- a/apps/staged/src/lib/features/projects/SuggestedRepos.svelte
+++ b/apps/staged/src/lib/features/projects/SuggestedRepos.svelte
@@ -19,7 +19,6 @@
   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;
@@ -125,21 +124,14 @@
   <div class="suggested-repos">
     <div class="suggested-header">
       <span class="suggested-title">Suggested repos</span>
-      <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>
+      <Button
+        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"
+        aria-label="Dismiss suggestions"
+        onclick={handleDismiss}
+      >
+        <X size={14} />
+      </Button>
     </div>
     <div class="suggested-list">
       {#each suggestions as suggestion (suggestionKey(suggestion))}
diff --git a/apps/staged/src/lib/features/sessions/ImageAttachment.svelte b/apps/staged/src/lib/features/sessions/ImageAttachment.svelte
index 0bc263fdf..8052e2834 100644
--- a/apps/staged/src/lib/features/sessions/ImageAttachment.svelte
+++ b/apps/staged/src/lib/features/sessions/ImageAttachment.svelte
@@ -17,7 +17,6 @@
   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';
 
@@ -140,42 +139,30 @@
           <div class="image-placeholder"><ImagePlus size={16} /></div>
         {/if}
         {#if !disabled}
-          <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>
+          <Button
+            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"
+            title="Remove image"
+            aria-label="Remove image"
+            onclick={() => removeImage(imageId)}
+          >
+            <X size={10} />
+          </Button>
         {/if}
       </div>
     {/each}
     {#if !disabled}
-      <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>
+      <Button
+        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"
+        title="Add image"
+        aria-label="Add image"
+        onclick={openFilePicker}
+      >
+        <Plus size={16} />
+      </Button>
     {/if}
   </div>
 {:else if !disabled}
diff --git a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
index e2044c8db..6c6d42e5f 100644
--- a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
+++ b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
@@ -31,7 +31,6 @@
   import { buildBranchHashtagItems } from './hashtagItems';
   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,
@@ -450,22 +449,16 @@
           </div>
         {/if}
       </div>
-      <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>
+      <Button
+        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]"
+        title={viewport.showShortcutHints ? 'Close (Esc)' : 'Close'}
+        aria-label="Close"
+        onclick={handleClose}
+      >
+        <X size={18} />
+      </Button>
     </header>
 
     <form class="modal-body" onsubmit={handleSubmit}>
diff --git a/apps/staged/src/lib/features/sessions/PipelineSteps.svelte b/apps/staged/src/lib/features/sessions/PipelineSteps.svelte
index 29c77ec53..f448e7e65 100644
--- a/apps/staged/src/lib/features/sessions/PipelineSteps.svelte
+++ b/apps/staged/src/lib/features/sessions/PipelineSteps.svelte
@@ -14,7 +14,6 @@
   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';
@@ -118,44 +117,37 @@
 <div class="pipeline-steps">
   {#each steps as step, idx}
     <div class="step" class:expanded={expandedSteps.has(idx)}>
-      <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-left 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>
+      <Button
+        variant="ghost"
+        type="button"
+        class="flex h-auto w-full items-center justify-start gap-2 rounded px-0 py-1 text-left text-[13px] font-normal text-foreground shadow-none hover:bg-[var(--bg-hover)] hover:text-foreground"
+        title={step.stepType === 'ai_handoff' ? 'AI session starts here' : undefined}
+        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>
       {#if expandedSteps.has(idx) && (step.output || step.error)}
         <div class="step-output">
           <pre>{step.output ?? ''}{#if step.error}
diff --git a/apps/staged/src/lib/features/sessions/SessionLauncher.svelte b/apps/staged/src/lib/features/sessions/SessionLauncher.svelte
index 787e91511..73481abae 100644
--- a/apps/staged/src/lib/features/sessions/SessionLauncher.svelte
+++ b/apps/staged/src/lib/features/sessions/SessionLauncher.svelte
@@ -28,7 +28,6 @@
   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;
@@ -166,22 +165,16 @@
 <div class="launcher">
   <div class="launcher-header">
     <span class="launcher-title">Sessions</span>
-    <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>
+    <Button
+      variant="ghost"
+      size="icon"
+      class="size-7 rounded-md text-muted-foreground hover:bg-[var(--bg-hover)] hover:text-foreground [&_svg]:!size-3.5"
+      title="Close"
+      aria-label="Close"
+      onclick={onClose}
+    >
+      <X size={14} />
+    </Button>
   </div>
 
   <!-- Create form -->
@@ -194,28 +187,22 @@
       disabled={creating}
       class="flex-1"
     />
-    <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>
+    <span class="inline-flex" title="Create session">
+      <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"
+        aria-label="Create session"
+        onclick={handleCreate}
+        disabled={creating || !prompt.trim()}
+      >
+        {#if creating}
+          <Spinner size={14} />
+        {:else}
+          <Plus size={14} />
+        {/if}
+      </Button>
+    </span>
   </div>
 
   <!-- Session list -->
@@ -236,40 +223,28 @@
             <span class="session-id">{s.id.slice(0, 8)}</span>
           </div>
           <div class="session-actions">
-            <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>
+            <span class="inline-flex" title="Open session viewer">
+              <Button
+                variant="ghost"
+                size="icon"
+                class="size-[22px] rounded text-muted-foreground hover:bg-[var(--bg-hover)] hover:text-foreground [&_svg]:!size-3"
+                aria-label="Open session viewer"
+                onclick={() => openModal(s.id)}
+                disabled={openModals.has(s.id)}
+              >
+                <Eye size={12} />
+              </Button>
+            </span>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="size-[22px] rounded text-muted-foreground hover:bg-[var(--bg-hover)] hover:text-destructive [&_svg]:!size-3"
+              title="Delete session"
+              aria-label="Delete session"
+              onclick={() => handleDelete(s.id)}
+            >
+              <Trash2 size={12} />
+            </Button>
           </div>
         </div>
       {/each}
diff --git a/apps/staged/src/lib/features/sessions/SessionModal.svelte b/apps/staged/src/lib/features/sessions/SessionModal.svelte
index b3d777866..6ec2659b6 100644
--- a/apps/staged/src/lib/features/sessions/SessionModal.svelte
+++ b/apps/staged/src/lib/features/sessions/SessionModal.svelte
@@ -66,7 +66,6 @@
   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,
@@ -1046,41 +1045,25 @@
       />
       <div class="header-actions">
         {#if noteInfo?.content.trim() && onOpenNote}
-          <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>
+          <Button
+            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>
         {/if}
-        <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>
+        <Button
+          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"
+          title={viewport.showShortcutHints ? 'Close (Esc)' : 'Close'}
+          aria-label="Close"
+          onclick={requestClose}
+        >
+          <X size={16} />
+        </Button>
       </div>
     </header>
 
@@ -1188,26 +1171,20 @@
                           {/each}
                         </div>
                       {/if}
-                      <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>
+                      <Button
+                        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"
+                        title={copiedId === group.message.id ? 'Copied!' : 'Copy message'}
+                        aria-label={copiedId === group.message.id ? 'Copied!' : 'Copy message'}
+                        onclick={() => copyContent(group.message.content, group.message.id)}
+                      >
+                        {#if copiedId === group.message.id}
+                          <Check size={12} />
+                        {:else}
+                          <Copy size={12} />
+                        {/if}
+                      </Button>
                     </div>
                   </div>
                 {/if}
@@ -1217,26 +1194,20 @@
                     <div class="markdown-content">
                       {@html renderMarkdown(group.message.content)}
                     </div>
-                    <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>
+                    <Button
+                      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"
+                      title={copiedId === group.message.id ? 'Copied!' : 'Copy message'}
+                      aria-label={copiedId === group.message.id ? 'Copied!' : 'Copy message'}
+                      onclick={() => copyContent(group.message.content, group.message.id)}
+                    >
+                      {#if copiedId === group.message.id}
+                        <Check size={12} />
+                      {:else}
+                        <Copy size={12} />
+                      {/if}
+                    </Button>
                   </div>
                 </div>
               {:else}
@@ -1414,28 +1385,22 @@
     <div class="input-wrapper">
       {#if isPipelinePrelude}
         <div class="input-area pipeline-stop-area">
-          <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>
+          <span class="inline-flex" title="Stop workflow">
+            <Button
+              variant="destructive"
+              size="icon"
+              class="size-9 shrink-0 rounded-[10px] [&_svg]:!size-4"
+              aria-label="Stop workflow"
+              onclick={handleCancel}
+              disabled={cancelling}
+            >
+              {#if cancelling}
+                <Spinner size={16} />
+              {:else}
+                <CircleStop size={16} />
+              {/if}
+            </Button>
+          </span>
         </div>
       {:else}
         {#if hasQueuedMessages}
@@ -1444,24 +1409,18 @@
               <div class="queue-item">
                 <span class="queue-item-label">Queued</span>
                 <span class="queue-item-text">{msg}</span>
-                <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>
+                <Button
+                  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"
+                  title="Remove from queue"
+                  aria-label="Remove from queue"
+                  onclick={() => {
+                    messageQueue = messageQueue.filter((_, idx) => idx !== i);
+                  }}
+                >
+                  <X size={10} />
+                </Button>
               </div>
             {/each}
           </div>
@@ -1476,42 +1435,30 @@
                   <div class="reply-image-placeholder"><ImagePlus size={16} /></div>
                 {/if}
                 {#if !isLive}
-                  <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>
+                  <Button
+                    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"
+                    title="Remove image"
+                    aria-label="Remove image"
+                    onclick={() => removeReplyImage(imageId)}
+                  >
+                    <X size={10} />
+                  </Button>
                 {/if}
               </div>
             {/each}
             {#if !isLive}
-              <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>
+              <Button
+                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"
+                title="Add image"
+                aria-label="Add image"
+                onclick={openImagePicker}
+              >
+                <Plus size={16} />
+              </Button>
             {/if}
           </div>
         {/if}
@@ -1526,24 +1473,18 @@
               onchange={handleImageFileSelect}
             />
             {#if replyImageIds.length === 0}
-              <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>
+              <span class="inline-flex" title="Attach image">
+                <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"
+                  aria-label="Attach image"
+                  onclick={openImagePicker}
+                  disabled={isLive}
+                >
+                  <Paperclip size={16} />
+                </Button>
+              </span>
             {/if}
           {/if}
           <HashtagInput
@@ -1557,51 +1498,39 @@
             items={hashtagItems}
           />
           {#if isLive}
-            <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>
+            <span class="inline-flex" title="Stop session">
+              <Button
+                variant="destructive"
+                size="icon"
+                class="size-9 shrink-0 rounded-[10px] [&_svg]:!size-4"
+                aria-label="Stop session"
+                onclick={handleCancel}
+                disabled={cancelling}
+              >
+                {#if cancelling}
+                  <Spinner size={16} />
+                {:else}
+                  <CircleStop size={16} />
+                {/if}
+              </Button>
+            </span>
           {:else}
-            <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>
+            <span class="inline-flex" title="Send message">
+              <Button
+                variant="outline"
+                size="icon"
+                class="size-9 shrink-0 rounded-[10px] shadow-none disabled:opacity-30 [&_svg]:!size-4"
+                aria-label="Send message"
+                onclick={handleSend}
+                disabled={sending || !inputText.trim()}
+              >
+                {#if sending}
+                  <Spinner size={16} />
+                {:else}
+                  <Send size={16} />
+                {/if}
+              </Button>
+            </span>
           {/if}
         </div>
       {/if}
diff --git a/apps/staged/src/lib/features/settings/SettingsPage.svelte b/apps/staged/src/lib/features/settings/SettingsPage.svelte
index dc9c189ee..bf5073b47 100644
--- a/apps/staged/src/lib/features/settings/SettingsPage.svelte
+++ b/apps/staged/src/lib/features/settings/SettingsPage.svelte
@@ -11,7 +11,6 @@
   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__);
@@ -34,17 +33,10 @@
 
 <div class="settings-page">
   <header class="settings-header">
-    <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>
+    <Button variant="ghost" size="sm" title="Back to workspace" onclick={handleBack}>
+      <ArrowLeft size={14} />
+      Back
+    </Button>
     <div class="header-text">
       <h1>Settings</h1>
       <p class="header-meta">v{appVersion}</p>
diff --git a/apps/staged/src/lib/features/timeline/ImageViewerModal.svelte b/apps/staged/src/lib/features/timeline/ImageViewerModal.svelte
index 2ea2c23a7..a9d20c5b9 100644
--- a/apps/staged/src/lib/features/timeline/ImageViewerModal.svelte
+++ b/apps/staged/src/lib/features/timeline/ImageViewerModal.svelte
@@ -9,7 +9,6 @@
   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 { viewport } from '../../shared/viewport.svelte';
 
@@ -54,41 +53,27 @@
       >
       <div class="header-actions">
         {#if onDelete}
-          <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>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            title="Delete image"
+            aria-label="Delete image"
+            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>
         {/if}
-        <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>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          title={viewport.showShortcutHints ? 'Close (Esc)' : 'Close'}
+          aria-label="Close"
+          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>
       </div>
     </Dialog.Header>
     <div class="modal-body">
diff --git a/apps/staged/src/lib/features/timeline/TimelineRow.svelte b/apps/staged/src/lib/features/timeline/TimelineRow.svelte
index b22130239..6cd24a751 100644
--- a/apps/staged/src/lib/features/timeline/TimelineRow.svelte
+++ b/apps/staged/src/lib/features/timeline/TimelineRow.svelte
@@ -22,7 +22,6 @@
   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'
@@ -410,94 +409,68 @@
           </Button>
         {/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>
+          <span class="inline-flex" title={pullDisabledReason}>
+            <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>
         {/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>
+          <span
+            class="inline-flex"
+            title={pushDisabledReason ?? (pushing ? 'View push session' : undefined)}
+          >
+            <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>
         {/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>
+          <span
+            class="inline-flex"
+            title={forcePushDisabledReason ??
+              (forcePushing ? 'View push session' : 'Force push local branch to origin')}
+          >
+            <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>
         {/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>
+          <span class="inline-flex" title={rebaseDisabledReason}>
+            <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>
         {/if}
         {#if onViewDiffClick}
           <Button
@@ -512,44 +485,30 @@
           </Button>
         {/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>
+          <span class="inline-flex" title={commitChangesDisabledReason ?? 'Commit changes'}>
+            <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>
         {/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>
+          <span class="inline-flex" title={discardChangesDisabledReason ?? 'Discard changes'}>
+            <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>
         {/if}
         {#if hasSession && !onStartClick && !isQueued}
           <Button
@@ -564,24 +523,18 @@
           </Button>
         {/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>
+          <span class="inline-flex" title={deleteDisabledReason ?? 'Delete'}>
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              aria-label="Delete"
+              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>
         {/if}
       </div>
     </div>
diff --git a/apps/staged/src/lib/shared/InContentSearch.svelte b/apps/staged/src/lib/shared/InContentSearch.svelte
index 5d5b39391..b17547de7 100644
--- a/apps/staged/src/lib/shared/InContentSearch.svelte
+++ b/apps/staged/src/lib/shared/InContentSearch.svelte
@@ -12,7 +12,6 @@
   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;
@@ -77,62 +76,46 @@
     {#if counterText}
       <span class="match-counter">{counterText}</span>
     {/if}
-    <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>
+    <span
+      class="inline-flex"
+      title={viewport.showShortcutHints ? 'Previous match (Shift+Enter)' : 'Previous match'}
+    >
+      <Button
+        variant="ghost"
+        size="icon-xs"
+        class="[&_svg]:size-3.5"
+        aria-label="Previous match"
+        onclick={onPrevious}
+        disabled={matchCount === 0}
+      >
+        <ChevronUp size={14} />
+      </Button>
+    </span>
+    <span
+      class="inline-flex"
+      title={viewport.showShortcutHints ? 'Next match (Enter)' : 'Next match'}
+    >
+      <Button
+        variant="ghost"
+        size="icon-xs"
+        class="[&_svg]:size-3.5"
+        aria-label="Next match"
+        onclick={onNext}
+        disabled={matchCount === 0}
+      >
+        <ChevronDown size={14} />
+      </Button>
+    </span>
+    <Button
+      variant="ghost"
+      size="icon-xs"
+      class="ml-1 [&_svg]:size-3.5"
+      title={viewport.showShortcutHints ? 'Close search (Esc)' : 'Close search'}
+      aria-label="Close search"
+      onclick={onClose}
+    >
+      <X size={14} />
+    </Button>
   </div>
 {/if}
 
diff --git a/apps/staged/src/lib/shared/RepoBadge.svelte b/apps/staged/src/lib/shared/RepoBadge.svelte
index 96631a8ad..8912c6d53 100644
--- a/apps/staged/src/lib/shared/RepoBadge.svelte
+++ b/apps/staged/src/lib/shared/RepoBadge.svelte
@@ -7,7 +7,6 @@
 <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;
@@ -22,16 +21,9 @@
   let fg = $derived(badgeFg(hue, darkMode.value));
 </script>
 
-<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>
+<span class="repo-badge" class:small style="background: {bg}; color: {fg};">
+  {shortName}
+</span>
 
 <style>
   .repo-badge {
diff --git a/apps/staged/src/lib/shared/RepoLabel.svelte b/apps/staged/src/lib/shared/RepoLabel.svelte
index 46f17b22c..1bb11d7a6 100644
--- a/apps/staged/src/lib/shared/RepoLabel.svelte
+++ b/apps/staged/src/lib/shared/RepoLabel.svelte
@@ -10,8 +10,6 @@
     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;
@@ -38,18 +36,11 @@
   let fullLabel = $derived(subpath ? `${githubRepo}/${subpath}` : githubRepo);
 </script>
 
-<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>
+<span class="repo-label" title={fullLabel}
+  >{#if prefix}<span class="repo-label-prefix">{prefix}</span>{/if}<span class="repo-label-emphasis"
+    >{emphasis}</span
+  ></span
+>
 
 <style>
   .repo-label {

From c78ad4fdfe6d2eff2c0042d83d589beb9e7e635d Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Fri, 12 Jun 2026 16:26:55 +1000
Subject: [PATCH 2/2] fix: restore suggestions dismiss title

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

diff --git a/apps/staged/src/lib/features/projects/SuggestedRepos.svelte b/apps/staged/src/lib/features/projects/SuggestedRepos.svelte
index f1bbd2af9..efb3286c2 100644
--- a/apps/staged/src/lib/features/projects/SuggestedRepos.svelte
+++ b/apps/staged/src/lib/features/projects/SuggestedRepos.svelte
@@ -128,6 +128,7 @@
         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"
         aria-label="Dismiss suggestions"
+        title="Dismiss suggestions"
         onclick={handleDismiss}
       >
         <X size={14} />