pilothub 0.0.1

package/src/routes/souls/index.tsx

@@ -0,0 +1,243 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { useAction, useQuery } from 'convex/react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { api } from '../../../convex/_generated/api'
+import { SoulCard } from '../../components/SoulCard'
+import type { PublicSoul } from '../../lib/publicUser'
+
+const sortKeys = ['newest', 'downloads', 'stars', 'name', 'updated'] as const
+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'
+}
+
+export const Route = createFileRoute('/souls/')({
+  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,
+      view: search.view === 'cards' || search.view === 'list' ? search.view : undefined,
+      focus: search.focus === 'search' ? 'search' : undefined,
+    }
+  },
+  component: SoulsIndex,
+})
+
+function SoulsIndex() {
+  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 [query, setQuery] = useState(search.q ?? '')
+
+  const souls = useQuery(api.souls.list, { limit: 500 }) as PublicSoul[] | undefined
+  const ensureSoulSeeds = useAction(api.seed.ensureSoulSeeds)
+  const seedEnsuredRef = useRef(false)
+  const searchInputRef = useRef<HTMLInputElement>(null)
+  const isLoadingSouls = souls === undefined
+
+  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 (seedEnsuredRef.current) return
+    seedEnsuredRef.current = true
+    void ensureSoulSeeds({})
+  }, [ensureSoulSeeds])
+
+  const filtered = useMemo(() => {
+    const value = query.trim().toLowerCase()
+    const all = souls ?? []
+    if (!value) return all
+    return all.filter((soul) => {
+      if (soul.slug.toLowerCase().includes(value)) return true
+      if (soul.displayName.toLowerCase().includes(value)) return true
+      return (soul.summary ?? '').toLowerCase().includes(value)
+    })
+  }, [query, souls])
+
+  const sorted = useMemo(() => {
+    const multiplier = dir === 'asc' ? 1 : -1
+    const results = [...filtered]
+    results.sort((a, b) => {
+      switch (sort) {
+        case 'downloads':
+          return (a.stats.downloads - b.stats.downloads) * multiplier
+        case 'stars':
+          return (a.stats.stars - b.stats.stars) * multiplier
+        case 'updated':
+          return (a.updatedAt - b.updatedAt) * multiplier
+        case 'name':
+          return (
+            (a.displayName.localeCompare(b.displayName) || a.slug.localeCompare(b.slug)) *
+            multiplier
+          )
+        default:
+          return (a.createdAt - b.createdAt) * multiplier
+      }
+    })
+    return results
+  }, [dir, filtered, sort])
+
+  const showing = sorted.length
+  const total = souls?.length
+
+  return (
+    <main className="section">
+      <header className="skills-header">
+        <div>
+          <h1 className="section-title" style={{ marginBottom: 8 }}>
+            Souls
+          </h1>
+          <p className="section-subtitle" style={{ marginBottom: 0 }}>
+            {isLoadingSouls
+              ? 'Loading souls…'
+              : `${showing}${typeof total === 'number' ? ` of ${total}` : ''} souls.`}
+          </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">
+            <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 souls"
+            >
+              <option value="newest">Newest</option>
+              <option value="updated">Recently updated</option>
+              <option value="downloads">Downloads</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>
+
+      {isLoadingSouls ? (
+        <div className="card">
+          <div className="loading-indicator">Loading souls…</div>
+        </div>
+      ) : showing === 0 ? (
+        <div className="card">No souls match that filter.</div>
+      ) : view === 'cards' ? (
+        <div className="grid">
+          {sorted.map((soul) => (
+            <SoulCard
+              key={soul._id}
+              soul={soul}
+              summaryFallback="A SOUL.md bundle."
+              meta={
+                <div className="stat">
+                  ⭐ {soul.stats.stars} · ⤓ {soul.stats.downloads} · {soul.stats.versions} v
+                </div>
+              }
+            />
+          ))}
+        </div>
+      ) : (
+        <div className="skills-list">
+          {sorted.map((soul) => (
+            <Link
+              key={soul._id}
+              className="skills-row"
+              to="/souls/$slug"
+              params={{ slug: soul.slug }}
+            >
+              <div className="skills-row-main">
+                <div className="skills-row-title">
+                  <span>{soul.displayName}</span>
+                  <span className="skills-row-slug">/{soul.slug}</span>
+                </div>
+                <div className="skills-row-summary">{soul.summary ?? 'SOUL.md bundle.'}</div>
+              </div>
+              <div className="skills-row-metrics">
+                <span>⤓ {soul.stats.downloads}</span>
+                <span>★ {soul.stats.stars}</span>
+                <span>{soul.stats.versions} v</span>
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </main>
+  )
+}

package/src/routes/stars.tsx

@@ -0,0 +1,68 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { useMutation, useQuery } from 'convex/react'
+import { api } from '../../convex/_generated/api'
+import type { Doc } from '../../convex/_generated/dataModel'
+import type { PublicSkill } from '../lib/publicUser'
+
+export const Route = createFileRoute('/stars')({
+  component: Stars,
+})
+
+function Stars() {
+  const me = useQuery(api.users.me) as Doc<'users'> | null | undefined
+  const skills =
+    (useQuery(api.stars.listByUser, me ? { userId: me._id, limit: 50 } : 'skip') as
+      | PublicSkill[]
+      | undefined) ?? []
+
+  const toggleStar = useMutation(api.stars.toggle)
+
+  if (!me) {
+    return (
+      <main className="section">
+        <div className="card">Sign in to see your highlights.</div>
+      </main>
+    )
+  }
+
+  return (
+    <main className="section">
+      <h1 className="section-title">Your highlights</h1>
+      <p className="section-subtitle">Skills you’ve starred for quick access.</p>
+      <div className="grid">
+        {skills.length === 0 ? (
+          <div className="card">No stars yet.</div>
+        ) : (
+          skills.map((skill) => {
+            const owner = encodeURIComponent(String(skill.ownerUserId))
+            return (
+              <div key={skill._id} className="card skill-card">
+                <Link to="/$owner/$slug" params={{ owner, slug: skill.slug }}>
+                  <h3 className="skill-card-title">{skill.displayName}</h3>
+                </Link>
+                <div className="skill-card-footer skill-card-footer-inline">
+                  <span className="stat">⭐ {skill.stats.stars}</span>
+                  <button
+                    className="star-toggle is-active"
+                    type="button"
+                    onClick={async () => {
+                      try {
+                        await toggleStar({ skillId: skill._id })
+                      } catch (error) {
+                        console.error('Failed to unstar skill:', error)
+                        window.alert('Unable to unstar this skill. Please try again.')
+                      }
+                    }}
+                    aria-label={`Unstar ${skill.displayName}`}
+                  >
+                    <span aria-hidden="true">★</span>
+                  </button>
+                </div>
+              </div>
+            )
+          })
+        )}
+      </div>
+    </main>
+  )
+}

package/src/routes/u/$handle.tsx

@@ -0,0 +1,307 @@
+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 { Doc } from '../../../convex/_generated/dataModel'
+import { SkillCard } from '../../components/SkillCard'
+import { getSkillBadges } from '../../lib/badges'
+import type { PublicSkill, PublicUser } from '../../lib/publicUser'
+
+export const Route = createFileRoute('/u/$handle')({
+  component: UserProfile,
+})
+
+function UserProfile() {
+  const { handle } = Route.useParams()
+  const me = useQuery(api.users.me) as Doc<'users'> | null | undefined
+  const user = useQuery(api.users.getByHandle, { handle }) as PublicUser | null | undefined
+  const publishedSkills = useQuery(
+    api.skills.list,
+    user ? { ownerUserId: user._id, limit: 50 } : 'skip',
+  ) as PublicSkill[] | undefined
+  const starredSkills = useQuery(
+    api.stars.listByUser,
+    user ? { userId: user._id, limit: 50 } : 'skip',
+  ) as PublicSkill[] | undefined
+
+  const isSelf = Boolean(me && user && me._id === user._id)
+  const [tab, setTab] = useState<'stars' | 'installed'>('stars')
+  const [includeRemoved, setIncludeRemoved] = useState(false)
+  const installed = useQuery(
+    api.telemetry.getMyInstalled,
+    isSelf && tab === 'installed' ? { includeRemoved } : 'skip',
+  ) as TelemetryResponse | null | undefined
+
+  useEffect(() => {
+    if (!isSelf && tab === 'installed') setTab('stars')
+  }, [isSelf, tab])
+
+  if (user === undefined) {
+    return (
+      <main className="section">
+        <div className="card">
+          <div className="loading-indicator">Loading user…</div>
+        </div>
+      </main>
+    )
+  }
+
+  if (user === null) {
+    return (
+      <main className="section">
+        <div className="card">User not found.</div>
+      </main>
+    )
+  }
+
+  const avatar = user.image
+  const displayName = user.displayName ?? user.name ?? user.handle ?? 'User'
+  const displayHandle = user.handle ?? user.name ?? handle
+  const initial = displayName.charAt(0).toUpperCase()
+  const isLoadingSkills = starredSkills === undefined
+  const skills = starredSkills ?? []
+  const isLoadingPublished = publishedSkills === undefined
+  const published = publishedSkills ?? []
+
+  return (
+    <main className="section">
+      <div className="card settings-profile" style={{ marginBottom: 22 }}>
+        <div className="settings-avatar" aria-hidden="true">
+          {avatar ? <img src={avatar} alt="" /> : <span>{initial}</span>}
+        </div>
+        <div className="settings-profile-body">
+          <div className="settings-name">{displayName}</div>
+          <div className="settings-handle">@{displayHandle}</div>
+        </div>
+      </div>
+
+      {isSelf ? (
+        <div className="profile-tabs" role="tablist" aria-label="Profile tabs">
+          <button
+            className={tab === 'stars' ? 'profile-tab is-active' : 'profile-tab'}
+            type="button"
+            role="tab"
+            aria-selected={tab === 'stars'}
+            onClick={() => setTab('stars')}
+          >
+            Stars
+          </button>
+          <button
+            className={tab === 'installed' ? 'profile-tab is-active' : 'profile-tab'}
+            type="button"
+            role="tab"
+            aria-selected={tab === 'installed'}
+            onClick={() => setTab('installed')}
+          >
+            Installed
+          </button>
+        </div>
+      ) : null}
+
+      {tab === 'installed' && isSelf ? (
+        <InstalledSection
+          includeRemoved={includeRemoved}
+          onToggleRemoved={() => setIncludeRemoved((value) => !value)}
+          data={installed}
+        />
+      ) : (
+        <>
+          <h2 className="section-title" style={{ fontSize: '1.3rem' }}>
+            Published
+          </h2>
+          <p className="section-subtitle">Skills published by this user.</p>
+
+          {isLoadingPublished ? (
+            <div className="card">
+              <div className="loading-indicator">Loading published skills…</div>
+            </div>
+          ) : published.length > 0 ? (
+            <div className="grid" style={{ marginBottom: 18 }}>
+              {published.map((skill) => (
+                <SkillCard
+                  key={skill._id}
+                  skill={skill}
+                  badge={getSkillBadges(skill)}
+                  summaryFallback="Agent-ready skill pack."
+                  meta={
+                    <div className="stat">
+                      ⭐ {skill.stats.stars} · ⤓ {skill.stats.downloads} · ⤒{' '}
+                      {skill.stats.installsAllTime ?? 0}
+                    </div>
+                  }
+                />
+              ))}
+            </div>
+          ) : null}
+
+          <h2 className="section-title" style={{ fontSize: '1.3rem' }}>
+            Stars
+          </h2>
+          <p className="section-subtitle">Skills this user has starred.</p>
+
+          {isLoadingSkills ? (
+            <div className="card">
+              <div className="loading-indicator">Loading stars…</div>
+            </div>
+          ) : skills.length === 0 ? (
+            <div className="card">No stars yet.</div>
+          ) : (
+            <div className="grid">
+              {skills.map((skill) => (
+                <SkillCard
+                  key={skill._id}
+                  skill={skill}
+                  badge={getSkillBadges(skill)}
+                  summaryFallback="Agent-ready skill pack."
+                  meta={
+                    <div className="stat">
+                      ⭐ {skill.stats.stars} · ⤓ {skill.stats.downloads} · ⤒{' '}
+                      {skill.stats.installsAllTime ?? 0}
+                    </div>
+                  }
+                />
+              ))}
+            </div>
+          )}
+        </>
+      )}
+    </main>
+  )
+}
+
+function InstalledSection(props: {
+  includeRemoved: boolean
+  onToggleRemoved: () => void
+  data: TelemetryResponse | null | undefined
+}) {
+  const clearTelemetry = useMutation(api.telemetry.clearMyTelemetry)
+  const [showRaw, setShowRaw] = useState(false)
+  const data = props.data
+  if (data === undefined) {
+    return (
+      <>
+        <h2 className="section-title" style={{ fontSize: '1.3rem' }}>
+          Installed
+        </h2>
+        <div className="card">
+          <div className="loading-indicator">Loading telemetry…</div>
+        </div>
+      </>
+    )
+  }
+
+  if (data === null) {
+    return (
+      <>
+        <h2 className="section-title" style={{ fontSize: '1.3rem' }}>
+          Installed
+        </h2>
+        <div className="card">Sign in to view your installed skills.</div>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <h2 className="section-title" style={{ fontSize: '1.3rem' }}>
+        Installed
+      </h2>
+      <p className="section-subtitle" style={{ maxWidth: 760 }}>
+        Private view. Only you can see your folders/roots. Everyone else only sees aggregated
+        install counts per skill.
+      </p>
+      <div className="profile-actions">
+        <button className="btn" type="button" onClick={props.onToggleRemoved}>
+          {props.includeRemoved ? 'Hide removed' : 'Show removed'}
+        </button>
+        <button className="btn" type="button" onClick={() => setShowRaw((value) => !value)}>
+          {showRaw ? 'Hide JSON' : 'Show JSON'}
+        </button>
+        <button
+          className="btn"
+          type="button"
+          onClick={() => {
+            if (!window.confirm('Delete all telemetry data?')) return
+            void clearTelemetry()
+          }}
+        >
+          Delete telemetry
+        </button>
+      </div>
+
+      {showRaw ? (
+        <div className="card telemetry-json" style={{ marginBottom: 18 }}>
+          <pre className="mono" style={{ margin: 0, whiteSpace: 'pre-wrap' }}>
+            {JSON.stringify(data, null, 2)}
+          </pre>
+        </div>
+      ) : null}
+
+      {data.roots.length === 0 ? (
+        <div className="card">No telemetry yet. Run `pilothub sync` from the CLI.</div>
+      ) : (
+        <div style={{ display: 'grid', gap: 16 }}>
+          {data.roots.map((root) => (
+            <div key={root.rootId} className="card telemetry-root">
+              <div className="telemetry-root-header">
+                <div>
+                  <div className="telemetry-root-title">{root.label}</div>
+                  <div className="telemetry-root-meta">
+                    Last sync {new Date(root.lastSeenAt).toLocaleString()}
+                    {root.expiredAt ? ' · stale' : ''}
+                  </div>
+                </div>
+                <div className="tag">{root.skills.length} skills</div>
+              </div>
+              {root.skills.length === 0 ? (
+                <div className="stat">No skills found in this root.</div>
+              ) : (
+                <div className="telemetry-skill-list">
+                  {root.skills.map((entry) => (
+                    <div key={`${root.rootId}:${entry.skill.slug}`} className="telemetry-skill-row">
+                      <a
+                        className="telemetry-skill-link"
+                        href={`/${encodeURIComponent(String(entry.skill.ownerUserId))}/${entry.skill.slug}`}
+                      >
+                        <span>{entry.skill.displayName}</span>
+                        <span className="telemetry-skill-slug">/{entry.skill.slug}</span>
+                      </a>
+                      <div className="telemetry-skill-meta mono">
+                        {entry.lastVersion ? `v${entry.lastVersion}` : 'v?'}{' '}
+                        {entry.removedAt ? '· removed' : ''}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </>
+  )
+}
+
+type TelemetryResponse = {
+  roots: Array<{
+    rootId: string
+    label: string
+    firstSeenAt: number
+    lastSeenAt: number
+    expiredAt?: number
+    skills: Array<{
+      skill: {
+        slug: string
+        displayName: string
+        summary?: string
+        stats: unknown
+        ownerUserId: string
+      }
+      firstSeenAt: number
+      lastSeenAt: number
+      lastVersion?: string
+      removedAt?: number
+    }>
+  }>
+  cutoffDays: number
+}

package/src/routes/upload/utils.ts

@@ -0,0 +1,81 @@
+import { isTextContentType, TEXT_FILE_EXTENSION_SET } from 'pilothub-schema'
+
+export async function uploadFile(uploadUrl: string, file: File) {
+  const response = await fetch(uploadUrl, {
+    method: 'POST',
+    headers: { 'Content-Type': file.type || 'application/octet-stream' },
+    body: file,
+  })
+  if (!response.ok) {
+    throw new Error(`Upload failed: ${await response.text()}`)
+  }
+  const payload = (await response.json()) as { storageId: string }
+  return payload.storageId
+}
+
+export async function hashFile(file: File) {
+  const buffer =
+    typeof file.arrayBuffer === 'function'
+      ? await file.arrayBuffer()
+      : await new Response(file).arrayBuffer()
+  const hash = await crypto.subtle.digest('SHA-256', new Uint8Array(buffer))
+  const bytes = new Uint8Array(hash)
+  return Array.from(bytes)
+    .map((byte) => byte.toString(16).padStart(2, '0'))
+    .join('')
+}
+
+export function formatBytes(bytes: number) {
+  if (!Number.isFinite(bytes)) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB']
+  let size = bytes
+  let unit = 0
+  while (size >= 1024 && unit < units.length - 1) {
+    size /= 1024
+    unit += 1
+  }
+  return `${size.toFixed(size < 10 && unit > 0 ? 1 : 0)} ${units[unit]}`
+}
+
+export function formatPublishError(error: unknown) {
+  if (error && typeof error === 'object' && 'data' in error) {
+    const data = (error as { data?: unknown }).data
+    if (typeof data === 'string' && data.trim()) return data.trim()
+    if (
+      data &&
+      typeof data === 'object' &&
+      'message' in data &&
+      typeof (data as { message?: unknown }).message === 'string'
+    ) {
+      const message = (data as { message?: string }).message?.trim()
+      if (message) return message
+    }
+  }
+  if (error instanceof Error) {
+    const cleaned = error.message
+      .replace(/\[CONVEX[^\]]*\]\s*/g, '')
+      .replace(/\[Request ID:[^\]]*\]\s*/g, '')
+      .replace(/^Server Error Called by client\s*/i, '')
+      .replace(/^ConvexError:\s*/i, '')
+      .trim()
+    if (cleaned && cleaned !== 'Server Error') return cleaned
+  }
+  return 'Publish failed. Please try again.'
+}
+
+export function isTextFile(file: File) {
+  const path = (file.webkitRelativePath || file.name).trim().toLowerCase()
+  if (!path) return false
+  const parts = path.split('.')
+  const extension = parts.length > 1 ? (parts.at(-1) ?? '') : ''
+  if (file.type && isTextContentType(file.type)) return true
+  if (extension && TEXT_FILE_EXTENSION_SET.has(extension)) return true
+  return false
+}
+
+export async function readText(blob: Blob) {
+  if (typeof (blob as Blob & { text?: unknown }).text === 'function') {
+    return (blob as Blob & { text: () => Promise<string> }).text()
+  }
+  return new Response(blob as BodyInit).text()
+}