pilothub 0.0.1 → 0.0.2

package/src/routes/settings.tsx

@@ -1,203 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { useMutation, useQuery } from 'convex/react'
-import { useEffect, useState } from 'react'
-import { api } from '../../convex/_generated/api'
-import type { Id } from '../../convex/_generated/dataModel'
-import { gravatarUrl } from '../lib/gravatar'
-
-export const Route = createFileRoute('/settings')({
-  component: Settings,
-})
-
-function Settings() {
-  const me = useQuery(api.users.me)
-  const updateProfile = useMutation(api.users.updateProfile)
-  const deleteAccount = useMutation(api.users.deleteAccount)
-  const tokens = useQuery(api.tokens.listMine) as
-    | Array<{
-        _id: Id<'apiTokens'>
-        label: string
-        prefix: string
-        createdAt: number
-        lastUsedAt?: number
-        revokedAt?: number
-      }>
-    | undefined
-  const createToken = useMutation(api.tokens.create)
-  const revokeToken = useMutation(api.tokens.revoke)
-  const [displayName, setDisplayName] = useState('')
-  const [bio, setBio] = useState('')
-  const [status, setStatus] = useState<string | null>(null)
-  const [tokenLabel, setTokenLabel] = useState('CLI token')
-  const [newToken, setNewToken] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (!me) return
-    setDisplayName(me.displayName ?? '')
-    setBio(me.bio ?? '')
-  }, [me])
-
-  if (!me) {
-    return (
-      <main className="section">
-        <div className="card">Sign in to access settings.</div>
-      </main>
-    )
-  }
-
-  const avatar = me.image ?? (me.email ? gravatarUrl(me.email, 160) : undefined)
-  const identityName = me.displayName ?? me.name ?? me.handle ?? 'Profile'
-  const handle = me.handle ?? (me.email ? me.email.split('@')[0] : undefined)
-
-  async function onSave(event: React.FormEvent) {
-    event.preventDefault()
-    await updateProfile({ displayName, bio })
-    setStatus('Saved.')
-  }
-
-  async function onDelete() {
-    const ok = window.confirm('Soft delete your account? This cannot be undone.')
-    if (!ok) return
-    await deleteAccount()
-  }
-
-  async function onCreateToken() {
-    const label = tokenLabel.trim() || 'CLI token'
-    const result = await createToken({ label })
-    setNewToken(result.token)
-  }
-
-  return (
-    <main className="section settings-shell">
-      <h1 className="section-title">Settings</h1>
-      <div className="card settings-profile">
-        <div className="settings-avatar">
-          {avatar ? (
-            <img src={avatar} alt={identityName} />
-          ) : (
-            <span>{identityName[0]?.toUpperCase() ?? 'U'}</span>
-          )}
-        </div>
-        <div className="settings-profile-body">
-          <div className="settings-name">{identityName}</div>
-          {handle ? <div className="settings-handle">@{handle}</div> : null}
-          {me.email ? <div className="settings-email">{me.email}</div> : null}
-        </div>
-      </div>
-      <form className="card settings-card" onSubmit={onSave}>
-        <label className="settings-field">
-          <span>Display name</span>
-          <input
-            className="settings-input"
-            value={displayName}
-            onChange={(event) => setDisplayName(event.target.value)}
-          />
-        </label>
-        <label className="settings-field">
-          <span>Bio</span>
-          <textarea
-            className="settings-input"
-            rows={5}
-            value={bio}
-            onChange={(event) => setBio(event.target.value)}
-            placeholder="Tell people what you're building."
-          />
-        </label>
-        <div className="settings-actions">
-          <button className="btn btn-primary settings-save" type="submit">
-            Save
-          </button>
-          {status ? <div className="stat">{status}</div> : null}
-        </div>
-      </form>
-
-      <div className="card settings-card">
-        <h2 className="section-title danger-title" style={{ marginTop: 0 }}>
-          API tokens
-        </h2>
-        <p className="section-subtitle">
-          Use these tokens for the `pilothub` CLI. Tokens are shown once on creation.
-        </p>
-
-        <div className="settings-field">
-          <span>Label</span>
-          <input
-            className="settings-input"
-            value={tokenLabel}
-            onChange={(event) => setTokenLabel(event.target.value)}
-            placeholder="CLI token"
-          />
-        </div>
-        <div className="settings-actions">
-          <button
-            className="btn btn-primary settings-save"
-            type="button"
-            onClick={() => void onCreateToken()}
-          >
-            Create token
-          </button>
-          {newToken ? (
-            <div className="stat" style={{ overflowX: 'auto' }}>
-              <div style={{ marginBottom: 8 }}>Copy this token now:</div>
-              <code>{newToken}</code>
-            </div>
-          ) : null}
-        </div>
-
-        {(tokens ?? []).length ? (
-          <div style={{ display: 'grid', gap: 10, marginTop: 16 }}>
-            {(tokens ?? []).map((token) => (
-              <div
-                key={token._id}
-                className="stat"
-                style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}
-              >
-                <div>
-                  <div>
-                    <strong>{token.label}</strong>{' '}
-                    <span style={{ opacity: 0.7 }}>({token.prefix}…)</span>
-                  </div>
-                  <div style={{ opacity: 0.7 }}>
-                    Created {formatDate(token.createdAt)}
-                    {token.lastUsedAt ? ` · Used ${formatDate(token.lastUsedAt)}` : ''}
-                    {token.revokedAt ? ` · Revoked ${formatDate(token.revokedAt)}` : ''}
-                  </div>
-                </div>
-                <div>
-                  <button
-                    className="btn"
-                    type="button"
-                    disabled={Boolean(token.revokedAt)}
-                    onClick={() => void revokeToken({ tokenId: token._id })}
-                  >
-                    {token.revokedAt ? 'Revoked' : 'Revoke'}
-                  </button>
-                </div>
-              </div>
-            ))}
-          </div>
-        ) : (
-          <p className="section-subtitle" style={{ marginTop: 16 }}>
-            No tokens yet.
-          </p>
-        )}
-      </div>
-
-      <div className="card danger-card">
-        <h2 className="section-title danger-title">Danger zone</h2>
-        <p className="section-subtitle">Soft delete your account. Skills remain public.</p>
-        <button className="btn btn-danger" type="button" onClick={() => void onDelete()}>
-          Delete account
-        </button>
-      </div>
-    </main>
-  )
-}
-
-function formatDate(value: number) {
-  try {
-    return new Date(value).toLocaleString()
-  } catch {
-    return String(value)
-  }
-}

package/src/routes/skills/index.tsx

@@ -1,422 +0,0 @@
-import { createFileRoute, Link } from '@tanstack/react-router'
-import { useAction } from 'convex/react'
-import { usePaginatedQuery } from 'convex-helpers/react'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { api } from '../../../convex/_generated/api'
-import type { Doc } from '../../../convex/_generated/dataModel'
-import { SkillCard } from '../../components/SkillCard'
-import { getSkillBadges, isSkillHighlighted } from '../../lib/badges'
-import type { PublicSkill } from '../../lib/publicUser'
-
-const sortKeys = ['newest', 'downloads', 'installs', 'stars', 'name', 'updated'] as const
-const pageSize = 25
-type SortKey = (typeof sortKeys)[number]
-type SortDir = 'asc' | 'desc'
-
-function parseSort(value: unknown): SortKey {
-  if (typeof value !== 'string') return 'newest'
-  if ((sortKeys as readonly string[]).includes(value)) return value as SortKey
-  return 'newest'
-}
-
-function parseDir(value: unknown, sort: SortKey): SortDir {
-  if (value === 'asc' || value === 'desc') return value
-  return sort === 'name' ? 'asc' : 'desc'
-}
-
-type SkillListEntry = {
-  skill: PublicSkill
-  latestVersion: Doc<'skillVersions'> | null
-  ownerHandle?: string | null
-}
-
-type SkillSearchEntry = {
-  skill: PublicSkill
-  version: Doc<'skillVersions'> | null
-  score: number
-  ownerHandle?: string | null
-}
-
-function buildSkillHref(skill: PublicSkill, ownerHandle?: string | null) {
-  const owner = ownerHandle?.trim() || String(skill.ownerUserId)
-  return `/${encodeURIComponent(owner)}/${encodeURIComponent(skill.slug)}`
-}
-
-export const Route = createFileRoute('/skills/')({
-  validateSearch: (search) => {
-    return {
-      q: typeof search.q === 'string' && search.q.trim() ? search.q : undefined,
-      sort: typeof search.sort === 'string' ? parseSort(search.sort) : undefined,
-      dir: search.dir === 'asc' || search.dir === 'desc' ? search.dir : undefined,
-      highlighted:
-        search.highlighted === '1' || search.highlighted === 'true' || search.highlighted === true
-          ? true
-          : undefined,
-      view: search.view === 'cards' || search.view === 'list' ? search.view : undefined,
-      focus: search.focus === 'search' ? 'search' : undefined,
-    }
-  },
-  component: SkillsIndex,
-})
-
-export function SkillsIndex() {
-  const navigate = Route.useNavigate()
-  const search = Route.useSearch()
-  const sort = search.sort ?? 'newest'
-  const dir = parseDir(search.dir, sort)
-  const view = search.view ?? 'list'
-  const highlightedOnly = search.highlighted ?? false
-  const [query, setQuery] = useState(search.q ?? '')
-  const searchSkills = useAction(api.search.searchSkills)
-  const [searchResults, setSearchResults] = useState<Array<SkillSearchEntry>>([])
-  const [searchLimit, setSearchLimit] = useState(pageSize)
-  const [isSearching, setIsSearching] = useState(false)
-  const searchRequest = useRef(0)
-  const loadMoreRef = useRef<HTMLDivElement | null>(null)
-
-  const searchInputRef = useRef<HTMLInputElement>(null)
-  const trimmedQuery = useMemo(() => query.trim(), [query])
-  const hasQuery = trimmedQuery.length > 0
-  const searchKey = trimmedQuery ? `${trimmedQuery}::${highlightedOnly ? '1' : '0'}` : ''
-
-  // Use convex-helpers usePaginatedQuery for better cache behavior
-  const {
-    results: paginatedResults,
-    status: paginationStatus,
-    loadMore: loadMorePaginated,
-  } = usePaginatedQuery(api.skills.listPublicPageV2, hasQuery ? 'skip' : {}, {
-    initialNumItems: pageSize,
-  })
-
-  // Derive loading states from pagination status
-  // status: 'LoadingFirstPage' | 'CanLoadMore' | 'LoadingMore' | 'Exhausted'
-  const isLoadingList = paginationStatus === 'LoadingFirstPage'
-  const canLoadMoreList = paginationStatus === 'CanLoadMore'
-  const isLoadingMoreList = paginationStatus === 'LoadingMore'
-
-  useEffect(() => {
-    setQuery(search.q ?? '')
-  }, [search.q])
-
-  // Auto-focus search input when focus=search param is present
-  useEffect(() => {
-    if (search.focus === 'search' && searchInputRef.current) {
-      searchInputRef.current.focus()
-      // Clear the focus param from URL to avoid re-focusing on navigation
-      void navigate({ search: (prev) => ({ ...prev, focus: undefined }), replace: true })
-    }
-  }, [search.focus, navigate])
-
-  useEffect(() => {
-    if (!searchKey) {
-      setSearchResults([])
-      setIsSearching(false)
-      return
-    }
-    setSearchResults([])
-    setSearchLimit(pageSize)
-  }, [searchKey])
-
-  useEffect(() => {
-    if (!hasQuery) return
-    searchRequest.current += 1
-    const requestId = searchRequest.current
-    setIsSearching(true)
-    const handle = window.setTimeout(() => {
-      void (async () => {
-        try {
-          const data = (await searchSkills({
-            query: trimmedQuery,
-            highlightedOnly,
-            limit: searchLimit,
-          })) as Array<SkillSearchEntry>
-          if (requestId === searchRequest.current) {
-            setSearchResults(data)
-          }
-        } finally {
-          if (requestId === searchRequest.current) {
-            setIsSearching(false)
-          }
-        }
-      })()
-    }, 220)
-    return () => window.clearTimeout(handle)
-  }, [hasQuery, highlightedOnly, searchLimit, searchSkills, trimmedQuery])
-
-  const baseItems = useMemo(() => {
-    if (hasQuery) {
-      return searchResults.map((entry) => ({
-        skill: entry.skill,
-        latestVersion: entry.version,
-        ownerHandle: entry.ownerHandle ?? null,
-      }))
-    }
-    // paginatedResults is an array of page items from usePaginatedQuery
-    return paginatedResults as Array<SkillListEntry>
-  }, [hasQuery, paginatedResults, searchResults])
-
-  const filtered = useMemo(
-    () => baseItems.filter((entry) => (highlightedOnly ? isSkillHighlighted(entry.skill) : true)),
-    [baseItems, highlightedOnly],
-  )
-
-  const sorted = useMemo(() => {
-    const multiplier = dir === 'asc' ? 1 : -1
-    const results = [...filtered]
-    results.sort((a, b) => {
-      switch (sort) {
-        case 'downloads':
-          return (a.skill.stats.downloads - b.skill.stats.downloads) * multiplier
-        case 'installs':
-          return (
-            ((a.skill.stats.installsAllTime ?? 0) - (b.skill.stats.installsAllTime ?? 0)) *
-            multiplier
-          )
-        case 'stars':
-          return (a.skill.stats.stars - b.skill.stats.stars) * multiplier
-        case 'updated':
-          return (a.skill.updatedAt - b.skill.updatedAt) * multiplier
-        case 'name':
-          return (
-            (a.skill.displayName.localeCompare(b.skill.displayName) ||
-              a.skill.slug.localeCompare(b.skill.slug)) * multiplier
-          )
-        default:
-          return (a.skill.createdAt - b.skill.createdAt) * multiplier
-      }
-    })
-    return results
-  }, [dir, filtered, sort])
-
-  const isLoadingSkills = hasQuery ? isSearching && searchResults.length === 0 : isLoadingList
-  const canLoadMore = hasQuery
-    ? !isSearching && searchResults.length === searchLimit && searchResults.length > 0
-    : canLoadMoreList
-  const isLoadingMore = hasQuery ? isSearching && searchResults.length > 0 : isLoadingMoreList
-  const canAutoLoad = typeof IntersectionObserver !== 'undefined'
-
-  const loadMore = useCallback(() => {
-    if (isLoadingMore || !canLoadMore) return
-    if (hasQuery) {
-      setSearchLimit((value) => value + pageSize)
-    } else {
-      loadMorePaginated(pageSize)
-    }
-  }, [canLoadMore, hasQuery, isLoadingMore, loadMorePaginated])
-
-  useEffect(() => {
-    if (!canLoadMore || typeof IntersectionObserver === 'undefined') return
-    const target = loadMoreRef.current
-    if (!target) return
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries.some((entry) => entry.isIntersecting)) {
-          loadMore()
-        }
-      },
-      { rootMargin: '200px' },
-    )
-    observer.observe(target)
-    return () => observer.disconnect()
-  }, [canLoadMore, loadMore])
-
-  return (
-    <main className="section">
-      <header className="skills-header">
-        <div>
-          <h1 className="section-title" style={{ marginBottom: 8 }}>
-            Skills
-          </h1>
-          <p className="section-subtitle" style={{ marginBottom: 0 }}>
-            {isLoadingSkills
-              ? 'Loading skills…'
-              : `Browse the skill library${highlightedOnly ? ' (highlighted)' : ''}.`}
-          </p>
-        </div>
-        <div className="skills-toolbar">
-          <div className="skills-search">
-            <input
-              ref={searchInputRef}
-              className="skills-search-input"
-              value={query}
-              onChange={(event) => {
-                const next = event.target.value
-                const trimmed = next.trim()
-                setQuery(next)
-                void navigate({
-                  search: (prev) => ({ ...prev, q: trimmed ? next : undefined }),
-                  replace: true,
-                })
-              }}
-              placeholder="Filter by name, slug, or summary…"
-            />
-          </div>
-          <div className="skills-toolbar-row">
-            <button
-              className={`search-filter-button${highlightedOnly ? ' is-active' : ''}`}
-              type="button"
-              aria-pressed={highlightedOnly}
-              onClick={() => {
-                void navigate({
-                  search: (prev) => ({
-                    ...prev,
-                    highlighted: highlightedOnly ? undefined : true,
-                  }),
-                  replace: true,
-                })
-              }}
-            >
-              Highlighted
-            </button>
-            <select
-              className="skills-sort"
-              value={sort}
-              onChange={(event) => {
-                const sort = parseSort(event.target.value)
-                void navigate({
-                  search: (prev) => ({
-                    ...prev,
-                    sort,
-                    dir: parseDir(prev.dir, sort),
-                  }),
-                  replace: true,
-                })
-              }}
-              aria-label="Sort skills"
-            >
-              <option value="newest">Newest</option>
-              <option value="updated">Recently updated</option>
-              <option value="downloads">Downloads</option>
-              <option value="installs">Installs</option>
-              <option value="stars">Stars</option>
-              <option value="name">Name</option>
-            </select>
-            <button
-              className="skills-dir"
-              type="button"
-              aria-label={`Sort direction ${dir}`}
-              onClick={() => {
-                void navigate({
-                  search: (prev) => ({
-                    ...prev,
-                    dir: parseDir(prev.dir, sort) === 'asc' ? 'desc' : 'asc',
-                  }),
-                  replace: true,
-                })
-              }}
-            >
-              {dir === 'asc' ? '↑' : '↓'}
-            </button>
-            <button
-              className={`skills-view${view === 'cards' ? ' is-active' : ''}`}
-              type="button"
-              onClick={() => {
-                void navigate({
-                  search: (prev) => ({
-                    ...prev,
-                    view: prev.view === 'cards' ? undefined : 'cards',
-                  }),
-                  replace: true,
-                })
-              }}
-            >
-              {view === 'cards' ? 'List' : 'Cards'}
-            </button>
-          </div>
-        </div>
-      </header>
-
-      {isLoadingSkills ? (
-        <div className="card">
-          <div className="loading-indicator">Loading skills…</div>
-        </div>
-      ) : sorted.length === 0 ? (
-        <div className="card">No skills match that filter.</div>
-      ) : view === 'cards' ? (
-        <div className="grid">
-          {sorted.map((entry) => {
-            const skill = entry.skill
-            const isPlugin = Boolean(entry.latestVersion?.parsed?.pilotbot?.nix?.plugin)
-            const skillHref = buildSkillHref(skill, entry.ownerHandle)
-            return (
-              <SkillCard
-                key={skill._id}
-                skill={skill}
-                href={skillHref}
-                badge={getSkillBadges(skill)}
-                chip={isPlugin ? 'Plugin bundle (nix)' : undefined}
-                summaryFallback="Agent-ready skill pack."
-                meta={
-                  <div className="stat">
-                    ⭐ {skill.stats.stars} · ⤓ {skill.stats.downloads} · ⤒{' '}
-                    {skill.stats.installsAllTime ?? 0}
-                  </div>
-                }
-              />
-            )
-          })}
-        </div>
-      ) : (
-        <div className="skills-list">
-          {sorted.map((entry) => {
-            const skill = entry.skill
-            const isPlugin = Boolean(entry.latestVersion?.parsed?.pilotbot?.nix?.plugin)
-            const skillHref = buildSkillHref(skill, entry.ownerHandle)
-            return (
-              <Link key={skill._id} className="skills-row" to={skillHref}>
-                <div className="skills-row-main">
-                  <div className="skills-row-title">
-                    <span>{skill.displayName}</span>
-                    <span className="skills-row-slug">/{skill.slug}</span>
-                    {getSkillBadges(skill).map((badge) => (
-                      <span key={badge} className="tag">
-                        {badge}
-                      </span>
-                    ))}
-                    {isPlugin ? (
-                      <span className="tag tag-accent tag-compact">Plugin bundle (nix)</span>
-                    ) : null}
-                  </div>
-                  <div className="skills-row-summary">
-                    {skill.summary ?? 'No summary provided.'}
-                  </div>
-                  {isPlugin ? (
-                    <div className="skills-row-meta">
-                      Bundle includes SKILL.md, CLI, and config.
-                    </div>
-                  ) : null}
-                </div>
-                <div className="skills-row-metrics">
-                  <span>⤓ {skill.stats.downloads}</span>
-                  <span>⤒ {skill.stats.installsAllTime ?? 0}</span>
-                  <span>★ {skill.stats.stars}</span>
-                  <span>{skill.stats.versions} v</span>
-                </div>
-              </Link>
-            )
-          })}
-        </div>
-      )}
-
-      {canLoadMore ? (
-        <div
-          ref={canAutoLoad ? loadMoreRef : null}
-          className="card"
-          style={{ marginTop: 16, display: 'flex', justifyContent: 'center' }}
-        >
-          {canAutoLoad ? (
-            isLoadingMore ? (
-              'Loading more…'
-            ) : (
-              'Scroll to load more'
-            )
-          ) : (
-            <button className="btn" type="button" onClick={loadMore} disabled={isLoadingMore}>
-              {isLoadingMore ? 'Loading…' : 'Load more'}
-            </button>
-          )}
-        </div>
-      ) : null}
-    </main>
-  )
-}

package/src/routes/souls/$slug.tsx

@@ -1,55 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { SoulDetailPage } from '../../components/SoulDetailPage'
-import { buildSoulMeta, fetchSoulMeta } from '../../lib/og'
-
-export const Route = createFileRoute('/souls/$slug')({
-  loader: async ({ params }) => {
-    const data = await fetchSoulMeta(params.slug)
-    return {
-      owner: data?.owner ?? null,
-      displayName: data?.displayName ?? null,
-      summary: data?.summary ?? null,
-      version: data?.version ?? null,
-    }
-  },
-  head: ({ params, loaderData }) => {
-    const meta = buildSoulMeta({
-      slug: params.slug,
-      owner: loaderData?.owner ?? null,
-      displayName: loaderData?.displayName,
-      summary: loaderData?.summary,
-      version: loaderData?.version ?? null,
-    })
-    return {
-      links: [
-        {
-          rel: 'canonical',
-          href: meta.url,
-        },
-      ],
-      meta: [
-        { title: meta.title },
-        { name: 'description', content: meta.description },
-        { property: 'og:title', content: meta.title },
-        { property: 'og:description', content: meta.description },
-        { property: 'og:type', content: 'website' },
-        { property: 'og:url', content: meta.url },
-        { property: 'og:image', content: meta.image },
-        { property: 'og:image:width', content: '1200' },
-        { property: 'og:image:height', content: '630' },
-        { property: 'og:image:alt', content: meta.title },
-        { name: 'twitter:card', content: 'summary_large_image' },
-        { name: 'twitter:title', content: meta.title },
-        { name: 'twitter:description', content: meta.description },
-        { name: 'twitter:image', content: meta.image },
-        { name: 'twitter:image:alt', content: meta.title },
-      ],
-    }
-  },
-  component: SoulDetail,
-})
-
-function SoulDetail() {
-  const { slug } = Route.useParams()
-  return <SoulDetailPage slug={slug} />
-}