pilothub 0.0.1 → 0.0.2

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

@@ -1,228 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,295 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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>
-  )
-}