refactor: Create global TooltipProvider in app.tsx to eliminate duplication

- Add global TooltipProvider wrapper in app.tsx for entire application
- Remove 36 duplicate TooltipProvider instances across 20 UI component files
- Clean up imports by removing TooltipProvider from component imports
- Follow Radix UI best practices for TooltipProvider placement
- Reduce code by 62 lines while maintaining all tooltip functionality

Closes #694

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

apps/ui/src/components/layout/sidebar/components/sidebar-footer.tsx

@@ -5,7 +5,7 @@ import { formatShortcut } from '@/store/app-store';
 import { Activity, Settings, BookOpen, MessageSquare, ExternalLink } from 'lucide-react';
 import { useOSDetection } from '@/hooks/use-os-detection';
 import { getElectronAPI } from '@/lib/electron';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 
 function getOSAbbreviation(os: string): string {
   switch (os) {
@@ -72,68 +72,14 @@ export function SidebarFooter({
         <div className="flex flex-col items-center py-2 px-2 gap-1">
           {/* Running Agents */}
           {!hideRunningAgents && (
-            <TooltipProvider delayDuration={0}>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    onClick={() => navigate({ to: '/running-agents' })}
-                    className={cn(
-                      'relative flex items-center justify-center w-10 h-10 rounded-xl',
-                      'transition-all duration-200 ease-out titlebar-no-drag',
-                      isActiveRoute('running-agents')
-                        ? [
-                            'bg-gradient-to-r from-brand-500/20 via-brand-500/15 to-brand-600/10',
-                            'text-foreground border border-brand-500/30',
-                            'shadow-md shadow-brand-500/10',
-                          ]
-                        : [
-                            'text-muted-foreground hover:text-foreground',
-                            'hover:bg-accent/50 border border-transparent hover:border-border/40',
-                          ]
-                    )}
-                    data-testid="running-agents-link"
-                  >
-                    <Activity
-                      className={cn(
-                        'w-[18px] h-[18px]',
-                        isActiveRoute('running-agents') && 'text-brand-500'
-                      )}
-                    />
-                    {runningAgentsCount > 0 && (
-                      <span
-                        className={cn(
-                          'absolute -top-1 -right-1 flex items-center justify-center',
-                          'min-w-4 h-4 px-1 text-[9px] font-bold rounded-full',
-                          'bg-brand-500 text-white shadow-sm'
-                        )}
-                      >
-                        {runningAgentsCount > 99 ? '99' : runningAgentsCount}
-                      </span>
-                    )}
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent side="right" sideOffset={8}>
-                  Running Agents
-                  {runningAgentsCount > 0 && (
-                    <span className="ml-2 px-1.5 py-0.5 bg-brand-500 text-white rounded-full text-[10px]">
-                      {runningAgentsCount}
-                    </span>
-                  )}
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          )}
-
-          {/* Settings */}
-          <TooltipProvider delayDuration={0}>
             <Tooltip>
               <TooltipTrigger asChild>
                 <button
-                  onClick={() => navigate({ to: '/settings' })}
+                  onClick={() => navigate({ to: '/running-agents' })}
                   className={cn(
-                    'flex items-center justify-center w-10 h-10 rounded-xl',
+                    'relative flex items-center justify-center w-10 h-10 rounded-xl',
                     'transition-all duration-200 ease-out titlebar-no-drag',
-                    isActiveRoute('settings')
+                    isActiveRoute('running-agents')
                       ? [
                           'bg-gradient-to-r from-brand-500/20 via-brand-500/15 to-brand-600/10',
                           'text-foreground border border-brand-500/30',
@@ -144,72 +90,115 @@ export function SidebarFooter({
                           'hover:bg-accent/50 border border-transparent hover:border-border/40',
                         ]
                   )}
-                  data-testid="settings-button"
+                  data-testid="running-agents-link"
                 >
-                  <Settings
+                  <Activity
                     className={cn(
                       'w-[18px] h-[18px]',
-                      isActiveRoute('settings') && 'text-brand-500'
+                      isActiveRoute('running-agents') && 'text-brand-500'
                     )}
                   />
+                  {runningAgentsCount > 0 && (
+                    <span
+                      className={cn(
+                        'absolute -top-1 -right-1 flex items-center justify-center',
+                        'min-w-4 h-4 px-1 text-[9px] font-bold rounded-full',
+                        'bg-brand-500 text-white shadow-sm'
+                      )}
+                    >
+                      {runningAgentsCount > 99 ? '99' : runningAgentsCount}
+                    </span>
+                  )}
                 </button>
               </TooltipTrigger>
               <TooltipContent side="right" sideOffset={8}>
-                Global Settings
-                <span className="ml-2 px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground">
-                  {formatShortcut(shortcuts.settings, true)}
-                </span>
+                Running Agents
+                {runningAgentsCount > 0 && (
+                  <span className="ml-2 px-1.5 py-0.5 bg-brand-500 text-white rounded-full text-[10px]">
+                    {runningAgentsCount}
+                  </span>
+                )}
               </TooltipContent>
             </Tooltip>
-          </TooltipProvider>
+          )}
+
+          {/* Settings */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={() => navigate({ to: '/settings' })}
+                className={cn(
+                  'flex items-center justify-center w-10 h-10 rounded-xl',
+                  'transition-all duration-200 ease-out titlebar-no-drag',
+                  isActiveRoute('settings')
+                    ? [
+                        'bg-gradient-to-r from-brand-500/20 via-brand-500/15 to-brand-600/10',
+                        'text-foreground border border-brand-500/30',
+                        'shadow-md shadow-brand-500/10',
+                      ]
+                    : [
+                        'text-muted-foreground hover:text-foreground',
+                        'hover:bg-accent/50 border border-transparent hover:border-border/40',
+                      ]
+                )}
+                data-testid="settings-button"
+              >
+                <Settings
+                  className={cn('w-[18px] h-[18px]', isActiveRoute('settings') && 'text-brand-500')}
+                />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right" sideOffset={8}>
+              Global Settings
+              <span className="ml-2 px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground">
+                {formatShortcut(shortcuts.settings, true)}
+              </span>
+            </TooltipContent>
+          </Tooltip>
 
           {/* Documentation */}
           {!hideWiki && (
-            <TooltipProvider delayDuration={0}>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    onClick={handleWikiClick}
-                    className={cn(
-                      'flex items-center justify-center w-10 h-10 rounded-xl',
-                      'text-muted-foreground hover:text-foreground',
-                      'hover:bg-accent/50 border border-transparent hover:border-border/40',
-                      'transition-all duration-200 ease-out titlebar-no-drag'
-                    )}
-                    data-testid="documentation-button"
-                  >
-                    <BookOpen className="w-[18px] h-[18px]" />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent side="right" sideOffset={8}>
-                  Documentation
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          )}
-
-          {/* Feedback */}
-          <TooltipProvider delayDuration={0}>
             <Tooltip>
               <TooltipTrigger asChild>
                 <button
-                  onClick={handleFeedbackClick}
+                  onClick={handleWikiClick}
                   className={cn(
                     'flex items-center justify-center w-10 h-10 rounded-xl',
                     'text-muted-foreground hover:text-foreground',
                     'hover:bg-accent/50 border border-transparent hover:border-border/40',
                     'transition-all duration-200 ease-out titlebar-no-drag'
                   )}
-                  data-testid="feedback-button"
+                  data-testid="documentation-button"
                 >
-                  <MessageSquare className="w-[18px] h-[18px]" />
+                  <BookOpen className="w-[18px] h-[18px]" />
                 </button>
               </TooltipTrigger>
               <TooltipContent side="right" sideOffset={8}>
-                Feedback
+                Documentation
               </TooltipContent>
             </Tooltip>
-          </TooltipProvider>
+          )}
+
+          {/* Feedback */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={handleFeedbackClick}
+                className={cn(
+                  'flex items-center justify-center w-10 h-10 rounded-xl',
+                  'text-muted-foreground hover:text-foreground',
+                  'hover:bg-accent/50 border border-transparent hover:border-border/40',
+                  'transition-all duration-200 ease-out titlebar-no-drag'
+                )}
+                data-testid="feedback-button"
+              >
+                <MessageSquare className="w-[18px] h-[18px]" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right" sideOffset={8}>
+              Feedback
+            </TooltipContent>
+          </Tooltip>
         </div>
       </div>
     );

apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx

@@ -15,7 +15,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 
 interface SidebarHeaderProps {
   sidebarOpen: boolean;
@@ -92,78 +92,74 @@ export function SidebarHeader({
           isMac && isElectron() && 'pt-[10px]'
         )}
       >
-        <TooltipProvider delayDuration={0}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={handleLogoClick}
-                className="group flex flex-col items-center"
-                data-testid="logo-button"
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              onClick={handleLogoClick}
+              className="group flex flex-col items-center"
+              data-testid="logo-button"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 256 256"
+                role="img"
+                aria-label="Automaker Logo"
+                className="size-8 group-hover:rotate-12 transition-transform duration-300 ease-out"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 256 256"
-                  role="img"
-                  aria-label="Automaker Logo"
-                  className="size-8 group-hover:rotate-12 transition-transform duration-300 ease-out"
-                >
-                  <defs>
-                    <linearGradient
-                      id="bg-collapsed"
-                      x1="0"
-                      y1="0"
-                      x2="256"
-                      y2="256"
-                      gradientUnits="userSpaceOnUse"
-                    >
-                      <stop offset="0%" style={{ stopColor: 'var(--brand-400)' }} />
-                      <stop offset="100%" style={{ stopColor: 'var(--brand-600)' }} />
-                    </linearGradient>
-                  </defs>
-                  <rect x="16" y="16" width="224" height="224" rx="56" fill="url(#bg-collapsed)" />
-                  <g
-                    fill="none"
-                    stroke="#FFFFFF"
-                    strokeWidth="20"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
+                <defs>
+                  <linearGradient
+                    id="bg-collapsed"
+                    x1="0"
+                    y1="0"
+                    x2="256"
+                    y2="256"
+                    gradientUnits="userSpaceOnUse"
                   >
-                    <path d="M92 92 L52 128 L92 164" />
-                    <path d="M144 72 L116 184" />
-                    <path d="M164 92 L204 128 L164 164" />
-                  </g>
-                </svg>
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={8}>
-              Go to Dashboard
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+                    <stop offset="0%" style={{ stopColor: 'var(--brand-400)' }} />
+                    <stop offset="100%" style={{ stopColor: 'var(--brand-600)' }} />
+                  </linearGradient>
+                </defs>
+                <rect x="16" y="16" width="224" height="224" rx="56" fill="url(#bg-collapsed)" />
+                <g
+                  fill="none"
+                  stroke="#FFFFFF"
+                  strokeWidth="20"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M92 92 L52 128 L92 164" />
+                  <path d="M144 72 L116 184" />
+                  <path d="M164 92 L204 128 L164 164" />
+                </g>
+              </svg>
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="right" sideOffset={8}>
+            Go to Dashboard
+          </TooltipContent>
+        </Tooltip>
 
         {/* Collapsed project icon with dropdown */}
         {currentProject && (
           <>
             <div className="w-full h-px bg-border/40 my-2" />
             <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
-              <TooltipProvider delayDuration={0}>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <DropdownMenuTrigger asChild>
-                      <button
-                        onContextMenu={(e) => onProjectContextMenu(currentProject, e)}
-                        className="p-1 rounded-lg hover:bg-accent/50 transition-colors"
-                        data-testid="collapsed-project-button"
-                      >
-                        {renderProjectIcon(currentProject)}
-                      </button>
-                    </DropdownMenuTrigger>
-                  </TooltipTrigger>
-                  <TooltipContent side="right" sideOffset={8}>
-                    {currentProject.name}
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      onContextMenu={(e) => onProjectContextMenu(currentProject, e)}
+                      className="p-1 rounded-lg hover:bg-accent/50 transition-colors"
+                      data-testid="collapsed-project-button"
+                    >
+                      {renderProjectIcon(currentProject)}
+                    </button>
+                  </DropdownMenuTrigger>
+                </TooltipTrigger>
+                <TooltipContent side="right" sideOffset={8}>
+                  {currentProject.name}
+                </TooltipContent>
+              </Tooltip>
               <DropdownMenuContent
                 align="start"
                 side="right"

apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx

@@ -13,7 +13,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 
 // Map section labels to icons
 const sectionIcons: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -158,27 +158,25 @@ export function SidebarNavigation({
             {/* Section icon with dropdown (collapsed sidebar) */}
             {section.label && !sidebarOpen && SectionIcon && section.collapsible && isCollapsed && (
               <DropdownMenu>
-                <TooltipProvider delayDuration={0}>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <DropdownMenuTrigger asChild>
-                        <button
-                          className={cn(
-                            'group flex items-center justify-center w-full py-2 rounded-lg',
-                            'text-muted-foreground hover:text-foreground',
-                            'hover:bg-accent/50 border border-transparent hover:border-border/40',
-                            'transition-all duration-200 ease-out'
-                          )}
-                        >
-                          <SectionIcon className="w-[18px] h-[18px]" />
-                        </button>
-                      </DropdownMenuTrigger>
-                    </TooltipTrigger>
-                    <TooltipContent side="right" sideOffset={8}>
-                      {section.label}
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <DropdownMenuTrigger asChild>
+                      <button
+                        className={cn(
+                          'group flex items-center justify-center w-full py-2 rounded-lg',
+                          'text-muted-foreground hover:text-foreground',
+                          'hover:bg-accent/50 border border-transparent hover:border-border/40',
+                          'transition-all duration-200 ease-out'
+                        )}
+                      >
+                        <SectionIcon className="w-[18px] h-[18px]" />
+                      </button>
+                    </DropdownMenuTrigger>
+                  </TooltipTrigger>
+                  <TooltipContent side="right" sideOffset={8}>
+                    {section.label}
+                  </TooltipContent>
+                </Tooltip>
                 <DropdownMenuContent side="right" align="start" sideOffset={8} className="w-48">
                   {section.items.map((item) => {
                     const ItemIcon = item.icon;