feat(settings): add tooltips to Agents, MCP, and Skills add buttons

src/routes/settings/agents/index.tsx

@@ -8,6 +8,7 @@ import { v7 as uuidv7 } from 'uuid'
 import { Plus } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { PageHeader } from '@/components/ui/page-header'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { AgentList } from '@/components/settings/agents/agent-list'
 import { AgentCatalog } from '@/components/settings/agents/agent-catalog'
 import { ThunderboltCliInstallCard } from '@/components/settings/agents/thunderbolt-cli-install-card'
@@ -120,19 +121,28 @@ export default function AgentsSettingsPage({ isStandalone }: AgentsSettingsPageP
     <div className="flex flex-col gap-6 p-4 w-full max-w-[760px] mx-auto">
       <PageHeader title="Agents">
         {allowCustomAgents && (
-          <Button
-            variant="outline"
-            size="icon"
-            className="rounded-lg"
-            aria-label="Add Custom Agent"
-            onClick={() => {
-              setEditingAgent(null)
-              setDialogOpen(true)
-            }}
-            disabled={!currentUserId}
-          >
-            <Plus />
-          </Button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="inline-flex">
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="rounded-lg"
+                  aria-label="Add custom agent"
+                  onClick={() => {
+                    setEditingAgent(null)
+                    setDialogOpen(true)
+                  }}
+                  disabled={!currentUserId}
+                >
+                  <Plus />
+                </Button>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              <p>Add custom agent</p>
+            </TooltipContent>
+          </Tooltip>
         )}
       </PageHeader>
 

src/settings/mcp-servers.tsx

@@ -726,11 +726,18 @@ export default function McpServersPage({ deps = {} }: { deps?: McpServersPageDep
             resetLocalDialogState()
           }}
         >
-          <DialogTrigger asChild>
-            <Button variant="outline" size="icon" className="rounded-lg">
-              <Plus />
-            </Button>
-          </DialogTrigger>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <DialogTrigger asChild>
+                <Button variant="outline" size="icon" className="rounded-lg" aria-label="Add MCP server">
+                  <Plus />
+                </Button>
+              </DialogTrigger>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              <p>Add MCP server</p>
+            </TooltipContent>
+          </Tooltip>
           <ResponsiveModalContentComposable className="sm:max-w-[500px] max-h-[85vh]">
             <ResponsiveModalHeader>
               <ResponsiveModalTitle>{dialogTitle}</ResponsiveModalTitle>

src/skills/skills-list.tsx

@@ -9,6 +9,7 @@ import { useMemo, useState } from 'react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { useSidebar } from '@/components/ui/sidebar'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { useIsMobile } from '@/hooks/use-mobile'
 import type { Skill } from '@/types'
 import { LibraryRow, skillRowTransition } from './library-row'
@@ -78,15 +79,22 @@ export const SkillsList = ({
             Skills
           </h1>
         )}
-        <Button
-          variant="outline"
-          size="icon"
-          aria-label="Create skill"
-          className="size-8 rounded-md"
-          onClick={onCreate}
-        >
-          <Plus />
-        </Button>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              aria-label="Create skill"
+              className="size-8 rounded-md"
+              onClick={onCreate}
+            >
+              <Plus />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <p>Create skill</p>
+          </TooltipContent>
+        </Tooltip>
       </header>
 
       <div className="relative">