feat: add install command switcher

Author: steipete

src/components/InstallSwitcher.tsx

@@ -0,0 +1,53 @@
+import { useMemo, useState } from 'react'
+
+type PackageManager = 'npm' | 'pnpm' | 'bun'
+
+type InstallSwitcherProps = {
+  exampleSlug?: string
+}
+
+const PACKAGE_MANAGERS: Array<{ id: PackageManager; label: string }> = [
+  { id: 'npm', label: 'npm' },
+  { id: 'pnpm', label: 'pnpm' },
+  { id: 'bun', label: 'bun' },
+]
+
+export function InstallSwitcher({ exampleSlug = 'sonoscli' }: InstallSwitcherProps) {
+  const [pm, setPm] = useState<PackageManager>('npm')
+
+  const command = useMemo(() => {
+    switch (pm) {
+      case 'npm':
+        return `npx clawdhub@latest install ${exampleSlug}`
+      case 'pnpm':
+        return `pnpm dlx clawdhub@latest install ${exampleSlug}`
+      case 'bun':
+        return `bunx clawdhub@latest install ${exampleSlug}`
+    }
+  }, [exampleSlug, pm])
+
+  return (
+    <div className="install-switcher">
+      <div className="install-switcher-row">
+        <div className="stat">Install any skill folder in one shot:</div>
+        <div className="install-switcher-toggle" role="tablist" aria-label="Install command">
+          {PACKAGE_MANAGERS.map((entry) => (
+            <button
+              key={entry.id}
+              type="button"
+              className={
+                pm === entry.id ? 'install-switcher-pill is-active' : 'install-switcher-pill'
+              }
+              role="tab"
+              aria-selected={pm === entry.id}
+              onClick={() => setPm(entry.id)}
+            >
+              {entry.label}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="hero-install-code mono">{command}</div>
+    </div>
+  )
+}

src/routes/index.tsx

@@ -2,6 +2,7 @@ import { createFileRoute, Link } from '@tanstack/react-router'
 import { useQuery } from 'convex/react'
 import { api } from '../../convex/_generated/api'
 import type { Doc } from '../../convex/_generated/dataModel'
+import { InstallSwitcher } from '../components/InstallSwitcher'
 import { SkillCard } from '../components/SkillCard'
 
 export const Route = createFileRoute('/')({
@@ -47,8 +48,7 @@ function Home() {
             </div>
             <div className="hero-install" style={{ marginTop: 18 }}>
               <div className="stat">Search skills. Versioned, rollback-ready.</div>
-              <div className="stat">Install any skill folder in one shot:</div>
-              <div className="hero-install-code mono">npx clawdhub@latest install sonoscli</div>
+              <InstallSwitcher exampleSlug="sonoscli" />
             </div>
           </div>
         </div>

src/styles.css

@@ -657,6 +657,64 @@ code {
   gap: 10px;
 }
 
+.install-switcher {
+  display: grid;
+  gap: 10px;
+}
+
+.install-switcher-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+.install-switcher-toggle {
+  display: inline-flex;
+  border-radius: 999px;
+  padding: 4px;
+  border: 1px solid rgba(255, 107, 74, 0.22);
+  background: rgba(255, 107, 74, 0.06);
+}
+
+[data-theme="dark"] .install-switcher-toggle {
+  border-color: rgba(232, 106, 71, 0.32);
+  background: rgba(232, 106, 71, 0.12);
+}
+
+.install-switcher-pill {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--ink-soft);
+  font: inherit;
+  font-weight: 650;
+  font-size: 0.85rem;
+  padding: 6px 10px;
+  border-radius: 999px;
+  cursor: pointer;
+  transition:
+    background 0.18s ease,
+    color 0.18s ease,
+    transform 0.18s ease;
+}
+
+.install-switcher-pill:hover {
+  color: var(--ink);
+  transform: translateY(-1px);
+}
+
+.install-switcher-pill.is-active {
+  background: rgba(255, 107, 74, 0.18);
+  color: var(--accent-deep);
+}
+
+[data-theme="dark"] .install-switcher-pill.is-active {
+  background: rgba(232, 106, 71, 0.22);
+  color: #ffd0bf;
+}
+
 .hero-install-code {
   border: 1px solid rgba(255, 107, 74, 0.2);
   background: rgba(255, 107, 74, 0.08);