feat(ui): improve compare types in FacetRow for CLI package

- fix tooltips in FacetRow
- add 'muted' status option with text-fg-subtle styling
- show types as "N/A" with muted style for binary-only packages
- move binary detection utils to shared/utils for reuse
- use Packument type for registry API responses

Author: gusa4grr

app/components/compare/FacetRow.vue

@@ -48,6 +48,8 @@ function getStatusClass(status?: FacetValue['status']): string {
       return 'text-amber-400'
     case 'bad':
       return 'text-red-400'
+    case 'muted':
+      return 'text-fg-subtle'
     default:
       return 'text-fg'
   }
@@ -62,16 +64,11 @@ function isCellLoading(index: number): boolean {
 <template>
   <div class="contents">
     <!-- Label cell -->
-    <div
-      class="comparison-label flex items-center gap-1.5 px-4 py-3 border-b border-border"
-      :title="description"
-    >
+    <div class="comparison-label flex items-center gap-1.5 px-4 py-3 border-b border-border">
       <span class="text-xs text-fg-muted uppercase tracking-wider">{{ label }}</span>
-      <span
-        v-if="description"
-        class="i-carbon:information w-3 h-3 text-fg-subtle"
-        aria-hidden="true"
-      />
+      <AppTooltip v-if="description" :text="description" position="top">
+        <span class="i-carbon:information w-3 h-3 text-fg-subtle cursor-help" aria-hidden="true" />
+      </AppTooltip>
     </div>
 
     <!-- Value cells -->

app/composables/usePackageComparison.ts

@@ -1,6 +1,7 @@
-import type { FacetValue, ComparisonFacet, ComparisonPackage } from '#shared/types'
+import type { FacetValue, ComparisonFacet, ComparisonPackage, Packument } from '#shared/types'
 import { encodePackageName } from '#shared/utils/npm'
 import type { PackageAnalysisResponse } from './usePackageAnalysis'
+import { isBinaryOnlyPackage } from '#shared/utils/binary-detection'
 
 export interface PackageComparisonData {
   package: ComparisonPackage
@@ -24,6 +25,8 @@ export interface PackageComparisonData {
     engines?: { node?: string; npm?: string }
     deprecated?: string
   }
+  /** Whether this is a binary-only package (CLI without library entry points) */
+  isBinaryOnly?: boolean
 }
 
 /**
@@ -75,13 +78,9 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
         namesToFetch.map(async (name): Promise<PackageComparisonData | null> => {
           try {
             // Fetch basic package info first (required)
-            const pkgData = await $fetch<{
-              'name': string
-              'dist-tags': Record<string, string>
-              'time': Record<string, string>
-              'license'?: string
-              'versions': Record<string, { dist?: { unpackedSize?: number }; deprecated?: string }>
-            }>(`https://registry.npmjs.org/${encodePackageName(name)}`)
+            const pkgData = await $fetch<Packument>(
+              `https://registry.npmjs.org/${encodePackageName(name)}`,
+            )
 
             const latestVersion = pkgData['dist-tags']?.latest
             if (!latestVersion) return null
@@ -100,6 +99,15 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
             const versionData = pkgData.versions[latestVersion]
             const packageSize = versionData?.dist?.unpackedSize
 
+            // Detect if package is binary-only
+            const isBinary = isBinaryOnlyPackage({
+              name: pkgData.name,
+              bin: versionData?.bin,
+              main: versionData?.main,
+              module: versionData?.module,
+              exports: versionData?.exports,
+            })
+
             // Count vulnerabilities by severity
             const vulnCounts = { critical: 0, high: 0, medium: 0, low: 0 }
             const vulnList = vulns?.vulnerabilities ?? []
@@ -128,6 +136,7 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
                 engines: analysis?.engines,
                 deprecated: versionData?.deprecated,
               },
+              isBinaryOnly: isBinary,
             }
           } catch {
             return null
@@ -259,6 +268,13 @@ function computeFacetValue(facet: ComparisonFacet, data: PackageComparisonData):
       }
 
     case 'types':
+      if (data.isBinaryOnly) {
+        return {
+          raw: 'binary',
+          display: 'N/A',
+          status: 'muted',
+        }
+      }
       if (!data.analysis) return null
       const types = data.analysis.types
       return {

app/utils/run-command.ts

@@ -2,48 +2,6 @@ import type { JsrPackageInfo } from '#shared/types/jsr'
 import { getPackageSpecifier, packageManagers } from './install-command'
 import type { PackageManagerId } from './install-command'
 
-/**
- * Metadata needed to determine if a package is binary-only.
- */
-export interface PackageMetadata {
-  name: string
-  bin?: string | Record<string, string>
-  main?: string
-  module?: unknown
-  exports?: unknown
-}
-
-/**
- * Determine if a package is "binary-only" (executable without library entry points).
- * Binary-only packages should show execute commands without install commands.
- *
- * A package is binary-only if:
- * - Name starts with "create-" (e.g., create-vite)
- * - Scoped name contains "/create-" (e.g., @vue/create-app)
- * - Has bin field but no main, module, or exports fields
- */
-export function isBinaryOnlyPackage(pkg: PackageMetadata): boolean {
-  // Check create-* patterns
-  if (isCreatePackage(pkg.name)) {
-    return true
-  }
-
-  // Has bin but no entry points
-  const hasBin =
-    pkg.bin !== undefined && (typeof pkg.bin === 'string' || Object.keys(pkg.bin).length > 0)
-  const hasEntryPoint = !!pkg.main || !!pkg.module || !!pkg.exports
-
-  return hasBin && !hasEntryPoint
-}
-
-/**
- * Check if a package uses the create-* naming convention.
- */
-export function isCreatePackage(packageName: string): boolean {
-  const baseName = packageName.startsWith('@') ? packageName.split('/')[1] : packageName
-  return baseName?.startsWith('create-') || packageName.includes('/create-') || false
-}
-
 /**
  * Information about executable commands provided by a package.
  */

shared/types/comparison.ts

@@ -124,7 +124,7 @@ export interface FacetValue<T = unknown> {
   /** Formatted display string (or ISO date string if type is 'date') */
   display: string
   /** Optional status indicator */
-  status?: 'good' | 'info' | 'warning' | 'bad' | 'neutral'
+  status?: 'good' | 'info' | 'warning' | 'bad' | 'neutral' | 'muted'
   /** Value type for special rendering (e.g., dates use DateTime component) */
   type?: 'date'
 }

shared/utils/binary-detection.ts

@@ -0,0 +1,41 @@
+/**
+ * Metadata needed to determine if a package is binary-only.
+ */
+export interface PackageMetadata {
+  name: string
+  bin?: string | Record<string, string>
+  main?: string
+  module?: unknown
+  exports?: unknown
+}
+
+/**
+ * Determine if a package is "binary-only" (executable without library entry points).
+ * Binary-only packages should show execute commands without install commands.
+ *
+ * A package is binary-only if:
+ * - Name starts with "create-" (e.g., create-vite)
+ * - Scoped name contains "/create-" (e.g., @vue/create-app)
+ * - Has bin field but no main, module, or exports fields
+ */
+export function isBinaryOnlyPackage(pkg: PackageMetadata): boolean {
+  // Check create-* patterns
+  if (isCreatePackage(pkg.name)) {
+    return true
+  }
+
+  // Has bin but no entry points
+  const hasBin =
+    pkg.bin !== undefined && (typeof pkg.bin === 'string' || Object.keys(pkg.bin).length > 0)
+  const hasEntryPoint = !!pkg.main || !!pkg.module || !!pkg.exports
+
+  return hasBin && !hasEntryPoint
+}
+
+/**
+ * Check if a package uses the create-* naming convention.
+ */
+export function isCreatePackage(packageName: string): boolean {
+  const baseName = packageName.startsWith('@') ? packageName.split('/')[1] : packageName
+  return baseName?.startsWith('create-') || packageName.includes('/create-') || false
+}

test/unit/app/utils/run-command.spec.ts

@@ -3,9 +3,8 @@ import {
   getExecutableInfo,
   getRunCommand,
   getRunCommandParts,
-  isBinaryOnlyPackage,
-  isCreatePackage,
 } from '../../../../app/utils/run-command'
+import { isBinaryOnlyPackage, isCreatePackage } from '../../../../shared/utils/binary-detection'
 import type { JsrPackageInfo } from '../../../../shared/types/jsr'
 
 describe('executable detection and run commands', () => {