pilothub 0.0.1

package/src/__tests__/upload.route.test.tsx

@@ -0,0 +1,228 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { strToU8, zipSync } from 'fflate'
+import { vi } from 'vitest'
+
+import { Upload } from '../routes/upload'
+
+vi.mock('@tanstack/react-router', () => ({
+  createFileRoute: () => (config: { component: unknown }) => config,
+  useNavigate: () => vi.fn(),
+  useSearch: () => ({ updateSlug: undefined }),
+}))
+
+const generateUploadUrl = vi.fn()
+const publishVersion = vi.fn()
+const generateChangelogPreview = vi.fn()
+const fetchMock = vi.fn()
+const useQueryMock = vi.fn()
+const useAuthStatusMock = vi.fn()
+let useActionCallCount = 0
+
+vi.mock('convex/react', () => ({
+  useQuery: (...args: unknown[]) => useQueryMock(...args),
+  useMutation: () => generateUploadUrl,
+  useAction: () => {
+    useActionCallCount += 1
+    return useActionCallCount % 2 === 1 ? publishVersion : generateChangelogPreview
+  },
+}))
+
+vi.mock('../lib/useAuthStatus', () => ({
+  useAuthStatus: () => useAuthStatusMock(),
+}))
+
+describe('Upload route', () => {
+  beforeEach(() => {
+    generateUploadUrl.mockReset()
+    publishVersion.mockReset()
+    generateChangelogPreview.mockReset()
+    fetchMock.mockReset()
+    useQueryMock.mockReset()
+    useAuthStatusMock.mockReset()
+    useActionCallCount = 0
+    useAuthStatusMock.mockReturnValue({
+      isAuthenticated: true,
+      isLoading: false,
+      me: { _id: 'users:1' },
+    })
+    useQueryMock.mockImplementation((_fn: unknown, args: unknown) => {
+      if (args === 'skip') return undefined
+      return null
+    })
+    fetchMock.mockResolvedValue({
+      ok: true,
+      json: async () => ({ storageId: 'storage-id' }),
+    })
+    vi.stubGlobal('fetch', fetchMock)
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('shows validation issues before submit', async () => {
+    render(<Upload />)
+    const publishButton = screen.getByRole('button', { name: /publish/i })
+    expect(publishButton.getAttribute('disabled')).not.toBeNull()
+    expect(screen.getByText(/Slug is required/i)).toBeTruthy()
+    expect(screen.getByText(/Display name is required/i)).toBeTruthy()
+  })
+
+  it('marks the input for folder uploads', async () => {
+    render(<Upload />)
+    const input = screen.getByTestId('upload-input')
+    await waitFor(() => {
+      expect(input.getAttribute('webkitdirectory')).not.toBeNull()
+    })
+  })
+
+  it('enables publish when fields and files are valid', async () => {
+    generateUploadUrl.mockResolvedValue('https://upload.local')
+    render(<Upload />)
+    fireEvent.change(screen.getByPlaceholderText('skill-name'), {
+      target: { value: 'cool-skill' },
+    })
+    fireEvent.change(screen.getByPlaceholderText('My skill'), {
+      target: { value: 'Cool Skill' },
+    })
+    fireEvent.change(screen.getByPlaceholderText('1.0.0'), {
+      target: { value: '1.2.3' },
+    })
+    fireEvent.change(screen.getByPlaceholderText('latest, stable'), {
+      target: { value: 'latest' },
+    })
+    const file = new File(['hello'], 'SKILL.md', { type: 'text/markdown' })
+    const input = screen.getByTestId('upload-input') as HTMLInputElement
+    fireEvent.change(input, { target: { files: [file] } })
+
+    const publishButton = screen.getByRole('button', { name: /publish/i }) as HTMLButtonElement
+    expect(await screen.findByText(/All checks passed/i)).toBeTruthy()
+    expect(publishButton.getAttribute('disabled')).toBeNull()
+  })
+
+  it('extracts zip uploads and unwraps top-level folders', async () => {
+    render(<Upload />)
+    fireEvent.change(screen.getByPlaceholderText('skill-name'), {
+      target: { value: 'cool-skill' },
+    })
+    fireEvent.change(screen.getByPlaceholderText('My skill'), {
+      target: { value: 'Cool Skill' },
+    })
+    fireEvent.change(screen.getByPlaceholderText('1.0.0'), {
+      target: { value: '1.2.3' },
+    })
+    fireEvent.change(screen.getByPlaceholderText('latest, stable'), {
+      target: { value: 'latest' },
+    })
+
+    const zip = zipSync({
+      'hetzner-cloud-skill/SKILL.md': new Uint8Array(strToU8('hello')),
+      'hetzner-cloud-skill/notes.txt': new Uint8Array(strToU8('notes')),
+    })
+    const zipBytes = Uint8Array.from(zip).buffer
+    const zipFile = new File([zipBytes], 'bundle.zip', { type: 'application/zip' })
+
+    const input = screen.getByTestId('upload-input') as HTMLInputElement
+    fireEvent.change(input, { target: { files: [zipFile] } })
+
+    expect(await screen.findByText('notes.txt', {}, { timeout: 3000 })).toBeTruthy()
+    expect(screen.getByText('SKILL.md')).toBeTruthy()
+    expect(await screen.findByText(/All checks passed/i, {}, { timeout: 3000 })).toBeTruthy()
+  })
+
+  it('unwraps folder uploads so SKILL.md can be at the top-level', async () => {
+    generateUploadUrl.mockResolvedValue('https://upload.local')
+    publishVersion.mockResolvedValue(undefined)
+    render(<Upload />)
+    fireEvent.change(screen.getByPlaceholderText('skill-name'), {
+      target: { value: 'ynab' },
+    })
+    fireEvent.change(screen.getByPlaceholderText('My skill'), {
+      target: { value: 'YNAB' },
+    })
+    fireEvent.change(screen.getByPlaceholderText('1.0.0'), {
+      target: { value: '1.0.0' },
+    })
+    fireEvent.change(screen.getByPlaceholderText('latest, stable'), {
+      target: { value: 'latest' },
+    })
+
+    const file = new File(['hello'], 'SKILL.md', { type: 'text/markdown' })
+    Object.defineProperty(file, 'webkitRelativePath', { value: 'ynab/SKILL.md' })
+
+    const input = screen.getByTestId('upload-input') as HTMLInputElement
+    fireEvent.change(input, { target: { files: [file] } })
+
+    expect(await screen.findByText('SKILL.md')).toBeTruthy()
+    expect(await screen.findByText(/All checks passed/i)).toBeTruthy()
+
+    fireEvent.click(screen.getByRole('button', { name: /publish/i }))
+    await waitFor(() => {
+      expect(
+        publishVersion.mock.calls.some((call) =>
+          Array.isArray((call[0] as { files?: unknown }).files),
+        ),
+      ).toBe(true)
+    })
+    const args = publishVersion.mock.calls
+      .map((call) => call[0] as { files?: Array<{ path: string }> })
+      .find((call) => Array.isArray(call.files))
+    expect(args?.files?.[0]?.path).toBe('SKILL.md')
+  })
+
+  it('blocks non-text folder uploads (png)', async () => {
+    render(<Upload />)
+    fireEvent.change(screen.getByPlaceholderText('skill-name'), {
+      target: { value: 'cool-skill' },
+    })
+    fireEvent.change(screen.getByPlaceholderText('My skill'), {
+      target: { value: 'Cool Skill' },
+    })
+    fireEvent.change(screen.getByPlaceholderText('1.0.0'), {
+      target: { value: '1.2.3' },
+    })
+    fireEvent.change(screen.getByPlaceholderText('latest, stable'), {
+      target: { value: 'latest' },
+    })
+
+    const skill = new File(['hello'], 'SKILL.md', { type: 'text/markdown' })
+    const png = new File([new Uint8Array([137, 80, 78, 71]).buffer], 'screenshot.png', {
+      type: 'image/png',
+    })
+    const input = screen.getByTestId('upload-input') as HTMLInputElement
+    fireEvent.change(input, { target: { files: [skill, png] } })
+
+    expect(await screen.findByText('screenshot.png')).toBeTruthy()
+    fireEvent.click(screen.getByRole('button', { name: /publish/i }))
+    expect(await screen.findByText(/Remove non-text files: screenshot\.png/i)).toBeTruthy()
+    expect(screen.getByText('screenshot.png')).toBeTruthy()
+  })
+
+  it('surfaces publish errors and stays on page', async () => {
+    publishVersion.mockRejectedValueOnce(new Error('Changelog is required'))
+    generateUploadUrl.mockResolvedValue('https://upload.local')
+    render(<Upload />)
+    fireEvent.change(screen.getByPlaceholderText('skill-name'), {
+      target: { value: 'cool-skill' },
+    })
+    fireEvent.change(screen.getByPlaceholderText('My skill'), {
+      target: { value: 'Cool Skill' },
+    })
+    fireEvent.change(screen.getByPlaceholderText('1.0.0'), {
+      target: { value: '1.2.3' },
+    })
+    fireEvent.change(screen.getByPlaceholderText('latest, stable'), {
+      target: { value: 'latest' },
+    })
+    fireEvent.change(screen.getByPlaceholderText('Describe what changed in this skill...'), {
+      target: { value: 'Initial drop.' },
+    })
+    const file = new File(['hello'], 'SKILL.md', { type: 'text/markdown' })
+    const input = screen.getByTestId('upload-input') as HTMLInputElement
+    fireEvent.change(input, { target: { files: [file] } })
+    const publishButton = screen.getByRole('button', { name: /publish/i }) as HTMLButtonElement
+    await screen.findByText(/All checks passed/i)
+    fireEvent.click(publishButton)
+    expect(await screen.findByText(/Changelog is required/i)).toBeTruthy()
+  })
+})

package/src/components/AppProviders.tsx

@@ -0,0 +1,19 @@
+import { ConvexAuthProvider } from '@convex-dev/auth/react'
+import { convex } from '../convex/client'
+import { UserBootstrap } from './UserBootstrap'
+
+export function AppProviders({ children }: { children: React.ReactNode }) {
+  return (
+    <ConvexAuthProvider
+      client={convex}
+      replaceURL={(relativeUrl) => {
+        if (typeof window !== 'undefined') {
+          window.history.replaceState(null, '', relativeUrl)
+        }
+      }}
+    >
+      <UserBootstrap />
+      {children}
+    </ConvexAuthProvider>
+  )
+}

package/src/components/ClientOnly.tsx

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react'
+
+export function ClientOnly({
+  children,
+  fallback = null,
+}: {
+  children: React.ReactNode
+  fallback?: React.ReactNode
+}) {
+  const [ready, setReady] = useState(false)
+
+  useEffect(() => {
+    setReady(true)
+  }, [])
+
+  if (!ready) return <>{fallback}</>
+  return <>{children}</>
+}

package/src/components/Footer.tsx

@@ -0,0 +1,29 @@
+import { getSiteName } from '../lib/site'
+
+export function Footer() {
+  const siteName = getSiteName()
+  return (
+    <footer className="site-footer">
+      <div className="site-footer-inner">
+        <div className="site-footer-divider" aria-hidden="true" />
+        <div className="site-footer-row">
+          <div className="site-footer-copy">
+            {siteName} · A{' '}
+            <a href="https://pilot.bot" target="_blank" rel="noreferrer">
+              Pilotbot
+            </a>{' '}
+            project ·{' '}
+            <a href="https://github.com/pilotbot/pilothub" target="_blank" rel="noreferrer">
+              Open source (MIT)
+            </a>{' '}
+            ·{' '}
+            <a href="https://steipete.me" target="_blank" rel="noreferrer">
+              Peter Steinberger
+            </a>
+            .
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}

package/src/components/Header.tsx

@@ -0,0 +1,295 @@
+import { useAuthActions } from '@convex-dev/auth/react'
+import { Link } from '@tanstack/react-router'
+import { Menu, Monitor, Moon, Sun } from 'lucide-react'
+import { useMemo, useRef } from 'react'
+import { gravatarUrl } from '../lib/gravatar'
+import { isModerator } from '../lib/roles'
+import { getPilotHubSiteUrl, getSiteMode, getSiteName } from '../lib/site'
+import { applyTheme, useThemeMode } from '../lib/theme'
+import { startThemeTransition } from '../lib/theme-transition'
+import { useAuthStatus } from '../lib/useAuthStatus'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu'
+import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group'
+
+export default function Header() {
+  const { isAuthenticated, isLoading, me } = useAuthStatus()
+  const { signIn, signOut } = useAuthActions()
+  const { mode, setMode } = useThemeMode()
+  const toggleRef = useRef<HTMLDivElement | null>(null)
+  const siteMode = getSiteMode()
+  const siteName = useMemo(() => getSiteName(siteMode), [siteMode])
+  const isSoulMode = siteMode === 'souls'
+  const pilotHubUrl = getPilotHubSiteUrl()
+
+  const avatar = me?.image ?? (me?.email ? gravatarUrl(me.email) : undefined)
+  const handle = me?.handle ?? me?.displayName ?? 'user'
+  const initial = (me?.displayName ?? me?.name ?? handle).charAt(0).toUpperCase()
+  const isStaff = isModerator(me)
+
+  const setTheme = (next: 'system' | 'light' | 'dark') => {
+    startThemeTransition({
+      nextTheme: next,
+      currentTheme: mode,
+      setTheme: (value) => {
+        const nextMode = value as 'system' | 'light' | 'dark'
+        applyTheme(nextMode)
+        setMode(nextMode)
+      },
+      context: { element: toggleRef.current },
+    })
+  }
+
+  return (
+    <header className="navbar">
+      <div className="navbar-inner">
+        <Link
+          to="/"
+          search={{ q: undefined, highlighted: undefined, search: undefined }}
+          className="brand"
+        >
+          <span className="brand-mark">
+            <img src="/pilot-logo.png" alt="" aria-hidden="true" />
+          </span>
+          <span className="brand-name">{siteName}</span>
+        </Link>
+        <nav className="nav-links">
+          {isSoulMode ? <a href={pilotHubUrl}>PilotHub</a> : null}
+          {isSoulMode ? (
+            <Link
+              to="/souls"
+              search={{
+                q: undefined,
+                sort: undefined,
+                dir: undefined,
+                view: undefined,
+                focus: undefined,
+              }}
+            >
+              Souls
+            </Link>
+          ) : (
+            <Link
+              to="/skills"
+              search={{
+                q: undefined,
+                sort: undefined,
+                dir: undefined,
+                highlighted: undefined,
+                view: undefined,
+                focus: undefined,
+              }}
+            >
+              Skills
+            </Link>
+          )}
+          <Link to="/upload" search={{ updateSlug: undefined }}>
+            Upload
+          </Link>
+          {isSoulMode ? null : <Link to="/import">Import</Link>}
+          <Link
+            to={isSoulMode ? '/souls' : '/skills'}
+            search={
+              isSoulMode
+                ? {
+                    q: undefined,
+                    sort: undefined,
+                    dir: undefined,
+                    view: undefined,
+                    focus: 'search',
+                  }
+                : {
+                    q: undefined,
+                    sort: undefined,
+                    dir: undefined,
+                    highlighted: undefined,
+                    view: undefined,
+                    focus: 'search',
+                  }
+            }
+          >
+            Search
+          </Link>
+          {me ? <Link to="/stars">Stars</Link> : null}
+          {isStaff ? (
+            <Link to="/management" search={{ skill: undefined }}>
+              Management
+            </Link>
+          ) : null}
+        </nav>
+        <div className="nav-actions">
+          <div className="nav-mobile">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button className="nav-mobile-trigger" type="button" aria-label="Open menu">
+                  <Menu className="h-4 w-4" aria-hidden="true" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {isSoulMode ? (
+                  <DropdownMenuItem asChild>
+                    <a href={pilotHubUrl}>PilotHub</a>
+                  </DropdownMenuItem>
+                ) : null}
+                <DropdownMenuItem asChild>
+                  {isSoulMode ? (
+                    <Link
+                      to="/souls"
+                      search={{
+                        q: undefined,
+                        sort: undefined,
+                        dir: undefined,
+                        view: undefined,
+                        focus: undefined,
+                      }}
+                    >
+                      Souls
+                    </Link>
+                  ) : (
+                    <Link
+                      to="/skills"
+                      search={{
+                        q: undefined,
+                        sort: undefined,
+                        dir: undefined,
+                        highlighted: undefined,
+                        view: undefined,
+                        focus: undefined,
+                      }}
+                    >
+                      Skills
+                    </Link>
+                  )}
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link to="/upload" search={{ updateSlug: undefined }}>
+                    Upload
+                  </Link>
+                </DropdownMenuItem>
+                {isSoulMode ? null : (
+                  <DropdownMenuItem asChild>
+                    <Link to="/import">Import</Link>
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuItem asChild>
+                  <Link
+                    to={isSoulMode ? '/souls' : '/skills'}
+                    search={
+                      isSoulMode
+                        ? {
+                            q: undefined,
+                            sort: undefined,
+                            dir: undefined,
+                            view: undefined,
+                            focus: 'search',
+                          }
+                        : {
+                            q: undefined,
+                            sort: undefined,
+                            dir: undefined,
+                            highlighted: undefined,
+                            view: undefined,
+                            focus: 'search',
+                          }
+                    }
+                  >
+                    Search
+                  </Link>
+                </DropdownMenuItem>
+                {me ? (
+                  <DropdownMenuItem asChild>
+                    <Link to="/stars">Stars</Link>
+                  </DropdownMenuItem>
+                ) : null}
+                {isStaff ? (
+                  <DropdownMenuItem asChild>
+                    <Link to="/management" search={{ skill: undefined }}>
+                      Management
+                    </Link>
+                  </DropdownMenuItem>
+                ) : null}
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={() => setTheme('system')}>
+                  <Monitor className="h-4 w-4" aria-hidden="true" />
+                  System
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setTheme('light')}>
+                  <Sun className="h-4 w-4" aria-hidden="true" />
+                  Light
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setTheme('dark')}>
+                  <Moon className="h-4 w-4" aria-hidden="true" />
+                  Dark
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+          <div className="theme-toggle" ref={toggleRef}>
+            <ToggleGroup
+              type="single"
+              value={mode}
+              onValueChange={(value) => {
+                if (!value) return
+                setTheme(value as 'system' | 'light' | 'dark')
+              }}
+              aria-label="Theme mode"
+            >
+              <ToggleGroupItem value="system" aria-label="System theme">
+                <Monitor className="h-4 w-4" aria-hidden="true" />
+                <span className="sr-only">System</span>
+              </ToggleGroupItem>
+              <ToggleGroupItem value="light" aria-label="Light theme">
+                <Sun className="h-4 w-4" aria-hidden="true" />
+                <span className="sr-only">Light</span>
+              </ToggleGroupItem>
+              <ToggleGroupItem value="dark" aria-label="Dark theme">
+                <Moon className="h-4 w-4" aria-hidden="true" />
+                <span className="sr-only">Dark</span>
+              </ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+          {isAuthenticated && me ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button className="user-trigger" type="button">
+                  {avatar ? (
+                    <img src={avatar} alt={me.displayName ?? me.name ?? 'User avatar'} />
+                  ) : (
+                    <span className="user-menu-fallback">{initial}</span>
+                  )}
+                  <span className="mono">@{handle}</span>
+                  <span className="user-menu-chevron">▾</span>
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem asChild>
+                  <Link to="/dashboard">Dashboard</Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link to="/settings">Settings</Link>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={() => void signOut()}>Sign out</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : (
+            <button
+              className="btn btn-primary"
+              type="button"
+              disabled={isLoading}
+              onClick={() => void signIn('github')}
+            >
+              <span className="sign-in-label">Sign in</span>
+              <span className="sign-in-provider">with GitHub</span>
+            </button>
+          )}
+        </div>
+      </div>
+    </header>
+  )
+}

package/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 pilothub@latest install ${exampleSlug}`
+      case 'pnpm':
+        return `pnpm dlx pilothub@latest install ${exampleSlug}`
+      case 'bun':
+        return `bunx pilothub@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>
+  )
+}

package/src/components/SkillCard.tsx

@@ -0,0 +1,36 @@
+import { Link } from '@tanstack/react-router'
+import type { ReactNode } from 'react'
+import type { PublicSkill } from '../lib/publicUser'
+
+type SkillCardProps = {
+  skill: PublicSkill
+  badge?: string | string[]
+  chip?: string
+  summaryFallback: string
+  meta: ReactNode
+  href?: string
+}
+
+export function SkillCard({ skill, badge, chip, summaryFallback, meta, href }: SkillCardProps) {
+  const owner = encodeURIComponent(String(skill.ownerUserId))
+  const link = href ?? `/${owner}/${skill.slug}`
+  const badges = Array.isArray(badge) ? badge : badge ? [badge] : []
+
+  return (
+    <Link to={link} className="card skill-card">
+      {badges.length || chip ? (
+        <div className="skill-card-tags">
+          {badges.map((label) => (
+            <div key={label} className="tag">
+              {label}
+            </div>
+          ))}
+          {chip ? <div className="tag tag-accent tag-compact">{chip}</div> : null}
+        </div>
+      ) : null}
+      <h3 className="skill-card-title">{skill.displayName}</h3>
+      <p className="skill-card-summary">{skill.summary ?? summaryFallback}</p>
+      <div className="skill-card-footer">{meta}</div>
+    </Link>
+  )
+}