feat(skills): polish install/remove actions and detail header spacing (#2128)

* fix(skills): hide local builds toolbar when there are no builds

* fix(skills): widen metadata badge gap on detail header to 16px

* feat(skills): polish build detail actions (round Remove, reorder, install icon)

* feat(skills): reorder build actions and add Install icon in card and table

* feat(skills): add Install icon across registry card, table, and detail

* fix(skills): use non-suspense query for builds toolbar visibility

Avoid suspending the whole Skills page (Registry/Installed tabs) on the
builds endpoint. Addresses Copilot review on #2128.

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

Author: samuv

renderer/src/features/registry-servers/components/registry-detail-header.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@/common/components/ui/button'
 import { LinkViewTransition } from '@/common/components/link-view-transition'
+import { cn } from '@/common/lib/utils'
 import { ChevronLeft } from 'lucide-react'
 import type { MouseEvent, ReactNode } from 'react'
 import { useCanGoBack, useRouter } from '@tanstack/react-router'
@@ -9,6 +10,7 @@ type RegistryDetailHeaderProps = {
   backTo?: string
   backSearch?: Record<string, unknown>
   badges?: ReactNode
+  badgesClassName?: string
   description?: string | null
   /**
    * When true, clicking the back button navigates using browser history
@@ -24,6 +26,7 @@ export function RegistryDetailHeader({
   backTo = '/registry',
   backSearch,
   badges,
+  badgesClassName,
   description,
   historyBack = false,
 }: RegistryDetailHeaderProps) {
@@ -63,7 +66,11 @@ export function RegistryDetailHeader({
       </div>
       <div className="flex flex-col gap-2">
         <h1 className="text-page-title m-0 p-0">{title}</h1>
-        {badges && <div className="flex items-center gap-2">{badges}</div>}
+        {badges && (
+          <div className={cn('flex items-center gap-2', badgesClassName)}>
+            {badges}
+          </div>
+        )}
         {description ? (
           <div className="text-muted-foreground mt-5 flex-2 select-none">
             {description}

renderer/src/features/skills/components/build-detail-page.tsx

@@ -6,7 +6,13 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/common/components/ui/tooltip'
-import { TagIcon, CodeIcon, FingerprintIcon, Trash2Icon } from 'lucide-react'
+import {
+  TagIcon,
+  CodeIcon,
+  FingerprintIcon,
+  PlusIcon,
+  Trash2Icon,
+} from 'lucide-react'
 import type { GithubComStacklokToolhivePkgSkillsLocalBuild as LocalBuild } from '@common/api/generated/types.gen'
 import { DialogInstallSkill } from './dialog-install-skill'
 import { DialogDeleteBuild } from './dialog-delete-build'
@@ -90,27 +96,29 @@ export function BuildDetailPage({ build }: BuildDetailPageProps) {
         actions={
           <div className="flex items-center gap-3">
             <Button
-              variant="secondary"
+              variant="action"
               onClick={() => {
-                trackEvent('Skills: delete build dialog opened', {
+                trackEvent('Skills: install dialog opened', {
                   source: 'build_detail',
                 })
-                setDeleteOpen(true)
+                setInstallOpen(true)
               }}
             >
-              <Trash2Icon className="size-4" />
-              Remove
+              <PlusIcon className="size-4" />
+              Install
             </Button>
             <Button
-              variant="action"
+              variant="secondary"
+              className="rounded-full"
               onClick={() => {
-                trackEvent('Skills: install dialog opened', {
+                trackEvent('Skills: delete build dialog opened', {
                   source: 'build_detail',
                 })
-                setInstallOpen(true)
+                setDeleteOpen(true)
               }}
             >
-              Install
+              <Trash2Icon className="size-4" />
+              Remove
             </Button>
           </div>
         }

renderer/src/features/skills/components/card-build.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Button } from '@/common/components/ui/button'
 import { Badge } from '@/common/components/ui/badge'
-import { Trash2Icon } from 'lucide-react'
+import { PlusIcon, Trash2Icon } from 'lucide-react'
 import { useNavigate } from '@tanstack/react-router'
 import type { GithubComStacklokToolhivePkgSkillsLocalBuild as LocalBuild } from '@common/api/generated/types.gen'
 import { DialogInstallSkill } from './dialog-install-skill'
@@ -68,29 +68,30 @@ export function CardBuild({ build }: { build: LocalBuild }) {
               className="relative z-10 rounded-full"
               onClick={(e) => {
                 e.stopPropagation()
-                trackEvent('Skills: delete build dialog opened', {
+                trackEvent('Skills: install dialog opened', {
                   source: 'build_card',
                 })
-                setDeleteOpen(true)
+                setInstallOpen(true)
               }}
-              aria-label={`Remove ${title}`}
+              aria-label={`Install ${title}`}
             >
-              <Trash2Icon className="size-4" />
-              Remove
+              <PlusIcon className="size-4" />
+              Install
             </Button>
             <Button
               variant="secondary"
               className="relative z-10 rounded-full"
               onClick={(e) => {
                 e.stopPropagation()
-                trackEvent('Skills: install dialog opened', {
+                trackEvent('Skills: delete build dialog opened', {
                   source: 'build_card',
                 })
-                setInstallOpen(true)
+                setDeleteOpen(true)
               }}
-              aria-label={`Install ${title}`}
+              aria-label={`Remove ${title}`}
             >
-              Install
+              <Trash2Icon className="size-4" />
+              Remove
             </Button>
           </>
         }

renderer/src/features/skills/components/card-registry-skill.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Github } from 'lucide-react'
+import { Github, PlusIcon } from 'lucide-react'
 import { Button } from '@/common/components/ui/button'
 import { useNavigate } from '@tanstack/react-router'
 import type { RegistrySkill } from '@common/api/generated/types.gen'
@@ -80,6 +80,7 @@ export function CardRegistrySkill({ skill }: { skill: RegistrySkill }) {
                 setInstallOpen(true)
               }}
             >
+              <PlusIcon className="size-4" />
               Install
             </Button>
           </>

renderer/src/features/skills/components/skill-detail-layout.tsx

@@ -82,6 +82,7 @@ export function SkillDetailLayout({
           backTo={backTo}
           backSearch={backSearch}
           badges={badges}
+          badgesClassName="gap-4"
           historyBack={historyBack}
         />
       </div>
@@ -125,7 +126,7 @@ export function SkillDetailLayout({
                   {title}
                 </h2>
                 {badges && (
-                  <div className="flex flex-wrap items-center gap-2">
+                  <div className="flex flex-wrap items-center gap-4">
                     {badges}
                   </div>
                 )}

renderer/src/features/skills/components/skill-detail-page.tsx

@@ -1,6 +1,12 @@
 import { useState } from 'react'
 import { Button } from '@/common/components/ui/button'
-import { TagIcon, GitForkIcon, GithubIcon, ScaleIcon } from 'lucide-react'
+import {
+  TagIcon,
+  GitForkIcon,
+  GithubIcon,
+  PlusIcon,
+  ScaleIcon,
+} from 'lucide-react'
 import type { RegistrySkill } from '@common/api/generated/types.gen'
 import { DialogInstallSkill } from './dialog-install-skill'
 import { SkillDetailLayout } from './skill-detail-layout'
@@ -80,6 +86,7 @@ export function SkillDetailPage({ skill }: SkillDetailPageProps) {
                 setInstallOpen(true)
               }}
             >
+              <PlusIcon className="size-4" />
               Install
             </Button>
             {skill.repository?.url && (

renderer/src/features/skills/components/skills-page.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { useSuspenseQuery, useQuery } from '@tanstack/react-query'
 import {
+  getApiV1BetaSkillsBuildsOptions,
   getApiV1BetaSkillsOptions,
   getRegistryByRegistryNameV01xDevToolhiveSkillsOptions,
 } from '@common/api/generated/@tanstack/react-query.gen'
@@ -158,6 +159,13 @@ export function SkillsPage() {
 
   // Builds tab
   const [buildsFilter, setBuildsFilter] = useState('')
+  // Non-suspense on purpose: this only drives the builds toolbar visibility.
+  // Using useSuspenseQuery here would block the whole Skills page (including
+  // the Registry/Installed tabs) on the builds endpoint. The actual builds
+  // table/grid still suspend via their own useSuspenseQuery when the Builds
+  // tab is active, and the data is shared via react-query's cache.
+  const { data: buildsData } = useQuery(getApiV1BetaSkillsBuildsOptions())
+  const hasBuilds = (buildsData?.builds?.length ?? 0) > 0
 
   const hasSkills = skills.length > 0
 
@@ -223,7 +231,7 @@ export function SkillsPage() {
                 />
               </>
             )}
-            {tab === 'builds' && (
+            {tab === 'builds' && hasBuilds && (
               <>
                 <InputSearch
                   value={buildsFilter}

renderer/src/features/skills/components/table-builds.tsx

@@ -21,7 +21,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/common/components/ui/tooltip'
-import { HammerIcon, Trash2Icon } from 'lucide-react'
+import { HammerIcon, PlusIcon, Trash2Icon } from 'lucide-react'
 import { DialogInstallSkill } from './dialog-install-skill'
 import { DialogDeleteBuild } from './dialog-delete-build'
 import { trackEvent } from '@/common/lib/analytics'
@@ -151,30 +151,31 @@ function BuildRow({ build }: { build: LocalBuild }) {
               className="rounded-full"
               onClick={(e) => {
                 e.stopPropagation()
-                trackEvent('Skills: delete build dialog opened', {
+                trackEvent('Skills: install dialog opened', {
                   source: 'build_table',
                 })
-                setDeleteOpen(true)
+                setInstallOpen(true)
               }}
-              aria-label={`Remove ${title}`}
+              aria-label={`Install ${title}`}
             >
-              <Trash2Icon className="size-4" />
-              Remove
+              <PlusIcon className="size-4" />
+              Install
             </Button>
             <Button
               variant="secondary"
               size="sm"
               className="rounded-full"
               onClick={(e) => {
                 e.stopPropagation()
-                trackEvent('Skills: install dialog opened', {
+                trackEvent('Skills: delete build dialog opened', {
                   source: 'build_table',
                 })
-                setInstallOpen(true)
+                setDeleteOpen(true)
               }}
-              aria-label={`Install ${title}`}
+              aria-label={`Remove ${title}`}
             >
-              Install
+              <Trash2Icon className="size-4" />
+              Remove
             </Button>
           </div>
         </TableCell>

renderer/src/features/skills/components/table-registry-skills.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useNavigate } from '@tanstack/react-router'
-import { Github } from 'lucide-react'
+import { Github, PlusIcon } from 'lucide-react'
 import type { RegistrySkill } from '@common/api/generated/types.gen'
 import { Button } from '@/common/components/ui/button'
 import {
@@ -147,6 +147,7 @@ function RegistrySkillRow({ skill }: { skill: RegistrySkill }) {
             }}
             aria-label={`Install ${title}`}
           >
+            <PlusIcon className="size-4" />
             Install
           </Button>
         </TableCell>