pilothub 0.0.1

package/src/routes/settings.tsx

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

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

@@ -0,0 +1,55 @@
+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} />
+}