pilothub 0.0.1

package/src/routes/cli/auth.tsx

@@ -0,0 +1,168 @@
+import { useAuthActions } from '@convex-dev/auth/react'
+import { createFileRoute } from '@tanstack/react-router'
+import { useMutation } from 'convex/react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { api } from '../../../convex/_generated/api'
+import { useAuthStatus } from '../../lib/useAuthStatus'
+
+export const Route = createFileRoute('/cli/auth')({
+  component: CliAuth,
+})
+
+function CliAuth() {
+  const { isAuthenticated, isLoading, me } = useAuthStatus()
+  const { signIn } = useAuthActions()
+  const createToken = useMutation(api.tokens.create)
+
+  const search = Route.useSearch() as {
+    redirect_uri?: string
+    label?: string
+    label_b64?: string
+    state?: string
+  }
+  const [status, setStatus] = useState<string>('Preparing…')
+  const [token, setToken] = useState<string | null>(null)
+  const hasRun = useRef(false)
+
+  const redirectUri = search.redirect_uri ?? ''
+  const label = (decodeLabel(search.label_b64) ?? search.label ?? 'CLI token').trim() || 'CLI token'
+  const state = typeof search.state === 'string' ? search.state.trim() : ''
+
+  const safeRedirect = useMemo(() => isAllowedRedirectUri(redirectUri), [redirectUri])
+  const registry = import.meta.env.VITE_CONVEX_SITE_URL as string | undefined
+
+  useEffect(() => {
+    if (hasRun.current) return
+    if (!safeRedirect) return
+    if (!state) return
+    if (!registry) return
+    if (!isAuthenticated || !me) return
+    hasRun.current = true
+
+    const run = async () => {
+      setStatus('Creating token…')
+      const result = await createToken({ label })
+      setToken(result.token)
+      setStatus('Redirecting to CLI…')
+      const hash = new URLSearchParams()
+      hash.set('token', result.token)
+      hash.set('registry', registry)
+      hash.set('state', state)
+      window.location.assign(`${redirectUri}#${hash.toString()}`)
+    }
+
+    void run().catch((error) => {
+      const message = error instanceof Error ? error.message : 'Failed to create token'
+      setStatus(message)
+      setToken(null)
+    })
+  }, [createToken, isAuthenticated, label, me, redirectUri, safeRedirect, state])
+
+  if (!safeRedirect) {
+    return (
+      <main className="section">
+        <div className="card">
+          <h1 className="section-title" style={{ marginTop: 0 }}>
+            CLI login
+          </h1>
+          <p className="section-subtitle">Invalid redirect URL.</p>
+          <p className="section-subtitle" style={{ marginBottom: 0 }}>
+            Run the CLI again to start a fresh login.
+          </p>
+        </div>
+      </main>
+    )
+  }
+
+  if (!state) {
+    return (
+      <main className="section">
+        <div className="card">
+          <h1 className="section-title" style={{ marginTop: 0 }}>
+            CLI login
+          </h1>
+          <p className="section-subtitle">Missing state.</p>
+          <p className="section-subtitle" style={{ marginBottom: 0 }}>
+            Run the CLI again to start a fresh login.
+          </p>
+        </div>
+      </main>
+    )
+  }
+
+  if (!registry) {
+    return (
+      <main className="section">
+        <div className="card">Missing VITE_CONVEX_SITE_URL configuration.</div>
+      </main>
+    )
+  }
+
+  if (!isAuthenticated || !me) {
+    return (
+      <main className="section">
+        <div className="card">
+          <h1 className="section-title" style={{ marginTop: 0 }}>
+            CLI login
+          </h1>
+          <p className="section-subtitle">Sign in to create an API token for the CLI.</p>
+          <button
+            className="btn btn-primary"
+            type="button"
+            disabled={isLoading}
+            onClick={() => void signIn('github')}
+          >
+            Sign in with GitHub
+          </button>
+        </div>
+      </main>
+    )
+  }
+
+  return (
+    <main className="section">
+      <div className="card">
+        <h1 className="section-title" style={{ marginTop: 0 }}>
+          CLI login
+        </h1>
+        <p className="section-subtitle">{status}</p>
+        {token ? (
+          <div className="stat" style={{ overflowX: 'auto' }}>
+            <div style={{ marginBottom: 8 }}>If redirect fails, copy this token:</div>
+            <code>{token}</code>
+          </div>
+        ) : null}
+      </div>
+    </main>
+  )
+}
+
+function isAllowedRedirectUri(value: string) {
+  if (!value) return false
+  let url: URL
+  try {
+    url = new URL(value)
+  } catch {
+    return false
+  }
+  if (url.protocol !== 'http:') return false
+  const host = url.hostname.toLowerCase()
+  return host === '127.0.0.1' || host === 'localhost' || host === '::1' || host === '[::1]'
+}
+
+function decodeLabel(value: string | undefined) {
+  if (!value) return null
+  try {
+    const normalized = value.replace(/-/g, '+').replace(/_/g, '/')
+    const padded = normalized.padEnd(Math.ceil(normalized.length / 4) * 4, '=')
+    const binary = atob(padded)
+    const bytes = new Uint8Array(binary.length)
+    for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i)
+    const decoded = new TextDecoder().decode(bytes)
+    const label = decoded.trim()
+    if (!label) return null
+    return label.slice(0, 80)
+  } catch {
+    return null
+  }
+}

package/src/routes/dashboard.tsx

@@ -0,0 +1,97 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { useQuery } from 'convex/react'
+import { Package, Plus, Upload } from 'lucide-react'
+import { api } from '../../convex/_generated/api'
+import type { Doc } from '../../convex/_generated/dataModel'
+import type { PublicSkill } from '../lib/publicUser'
+
+export const Route = createFileRoute('/dashboard')({
+  component: Dashboard,
+})
+
+function Dashboard() {
+  const me = useQuery(api.users.me) as Doc<'users'> | null | undefined
+  const mySkills = useQuery(
+    api.skills.list,
+    me?._id ? { ownerUserId: me._id, limit: 100 } : 'skip',
+  ) as PublicSkill[] | undefined
+
+  if (!me) {
+    return (
+      <main className="section">
+        <div className="card">Sign in to access your dashboard.</div>
+      </main>
+    )
+  }
+
+  const skills = mySkills ?? []
+  const ownerHandle = me.handle ?? me.name ?? me.displayName ?? me._id
+
+  return (
+    <main className="section">
+      <div className="dashboard-header">
+        <h1 className="section-title" style={{ margin: 0 }}>
+          My Skills
+        </h1>
+        <Link to="/upload" search={{ updateSlug: undefined }} className="btn btn-primary">
+          <Plus className="h-4 w-4" aria-hidden="true" />
+          Upload New Skill
+        </Link>
+      </div>
+
+      {skills.length === 0 ? (
+        <div className="card dashboard-empty">
+          <Package className="dashboard-empty-icon" aria-hidden="true" />
+          <h2>No skills yet</h2>
+          <p>Upload your first skill to share it with the community.</p>
+          <Link to="/upload" search={{ updateSlug: undefined }} className="btn btn-primary">
+            <Upload className="h-4 w-4" aria-hidden="true" />
+            Upload a Skill
+          </Link>
+        </div>
+      ) : (
+        <div className="dashboard-grid">
+          {skills.map((skill) => (
+            <SkillCard key={skill._id} skill={skill} ownerHandle={ownerHandle} />
+          ))}
+        </div>
+      )}
+    </main>
+  )
+}
+
+function SkillCard({ skill, ownerHandle }: { skill: PublicSkill; ownerHandle: string | null }) {
+  return (
+    <div className="dashboard-skill-card">
+      <div className="dashboard-skill-info">
+        <Link
+          to="/$owner/$slug"
+          params={{ owner: ownerHandle ?? 'unknown', slug: skill.slug }}
+          className="dashboard-skill-name"
+        >
+          {skill.displayName}
+        </Link>
+        <span className="dashboard-skill-slug">/{skill.slug}</span>
+        {skill.summary && <p className="dashboard-skill-description">{skill.summary}</p>}
+        <div className="dashboard-skill-stats">
+          <span>⤓ {skill.stats.downloads}</span>
+          <span>★ {skill.stats.stars}</span>
+          <span>{skill.stats.versions} v</span>
+        </div>
+      </div>
+      <div className="dashboard-skill-actions">
+        <Link to="/upload" search={{ updateSlug: skill.slug }} className="btn btn-sm">
+          <Upload className="h-3 w-3" aria-hidden="true" />
+          New Version
+        </Link>
+        <Link
+          to="/$owner/$slug"
+          params={{ owner: ownerHandle ?? 'unknown', slug: skill.slug }}
+          className="btn btn-ghost btn-sm"
+        >
+          View
+        </Link>
+      </div>
+    </div>
+  )
+}

package/src/routes/import.tsx

@@ -0,0 +1,415 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { useAction } from 'convex/react'
+import { useMemo, useState } from 'react'
+import { api } from '../../convex/_generated/api'
+import { formatBytes } from '../lib/uploadUtils'
+import { useAuthStatus } from '../lib/useAuthStatus'
+
+export const Route = createFileRoute('/import')({
+  component: ImportGitHub,
+})
+
+type Candidate = {
+  path: string
+  readmePath: string
+  name: string | null
+  description: string | null
+}
+
+type CandidatePreview = {
+  resolved: {
+    owner: string
+    repo: string
+    ref: string
+    commit: string
+    path: string
+    repoUrl: string
+    originalUrl: string
+  }
+  candidate: Candidate
+  defaults: {
+    selectedPaths: string[]
+    slug: string
+    displayName: string
+    version: string
+    tags: string[]
+  }
+  files: Array<{ path: string; size: number; defaultSelected: boolean }>
+}
+
+function ImportGitHub() {
+  const { isAuthenticated, isLoading, me } = useAuthStatus()
+  const previewImport = useAction(api.githubImport.previewGitHubImport)
+  const previewCandidate = useAction(api.githubImport.previewGitHubImportCandidate)
+  const importSkill = useAction(api.githubImport.importGitHubSkill)
+  const navigate = useNavigate()
+
+  const [url, setUrl] = useState('')
+  const [candidates, setCandidates] = useState<Candidate[]>([])
+  const [selectedCandidatePath, setSelectedCandidatePath] = useState<string | null>(null)
+  const [preview, setPreview] = useState<CandidatePreview | null>(null)
+  const [selected, setSelected] = useState<Record<string, boolean>>({})
+
+  const [slug, setSlug] = useState('')
+  const [displayName, setDisplayName] = useState('')
+  const [version, setVersion] = useState('0.1.0')
+  const [tags, setTags] = useState('latest')
+
+  const [status, setStatus] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [isBusy, setIsBusy] = useState(false)
+
+  const selectedCount = useMemo(() => Object.values(selected).filter(Boolean).length, [selected])
+  const selectedBytes = useMemo(() => {
+    if (!preview) return 0
+    let total = 0
+    for (const file of preview.files) {
+      if (selected[file.path]) total += file.size
+    }
+    return total
+  }, [preview, selected])
+
+  const detect = async () => {
+    setError(null)
+    setStatus(null)
+    setPreview(null)
+    setCandidates([])
+    setSelectedCandidatePath(null)
+    setSelected({})
+    setIsBusy(true)
+    try {
+      const result = await previewImport({ url: url.trim() })
+      const items = (result.candidates ?? []) as Candidate[]
+      setCandidates(items)
+      if (items.length === 1) {
+        const only = items[0]
+        if (only) await loadCandidate(only.path)
+      } else {
+        setStatus(`Found ${items.length} skills. Pick one.`)
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Preview failed')
+    } finally {
+      setIsBusy(false)
+    }
+  }
+
+  const loadCandidate = async (candidatePath: string) => {
+    setError(null)
+    setStatus(null)
+    setPreview(null)
+    setSelected({})
+    setSelectedCandidatePath(candidatePath)
+    setIsBusy(true)
+    try {
+      const result = (await previewCandidate({
+        url: url.trim(),
+        candidatePath,
+      })) as CandidatePreview
+      setPreview(result)
+      setSlug(result.defaults.slug)
+      setDisplayName(result.defaults.displayName)
+      setVersion(result.defaults.version)
+      setTags((result.defaults.tags ?? ['latest']).join(','))
+      const nextSelected: Record<string, boolean> = {}
+      for (const file of result.files) nextSelected[file.path] = file.defaultSelected
+      setSelected(nextSelected)
+      setStatus('Ready to import.')
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Preview failed')
+    } finally {
+      setIsBusy(false)
+    }
+  }
+
+  const applyDefaultSelection = () => {
+    if (!preview) return
+    const set = new Set(preview.defaults.selectedPaths)
+    const next: Record<string, boolean> = {}
+    for (const file of preview.files) next[file.path] = set.has(file.path)
+    setSelected(next)
+  }
+
+  const selectAll = () => {
+    if (!preview) return
+    const next: Record<string, boolean> = {}
+    for (const file of preview.files) next[file.path] = true
+    setSelected(next)
+  }
+
+  const clearAll = () => {
+    if (!preview) return
+    const next: Record<string, boolean> = {}
+    for (const file of preview.files) next[file.path] = false
+    setSelected(next)
+  }
+
+  const doImport = async () => {
+    if (!preview) return
+    setIsBusy(true)
+    setError(null)
+    setStatus('Importing…')
+    try {
+      const selectedPaths = preview.files.map((file) => file.path).filter((path) => selected[path])
+      const tagList = tags
+        .split(',')
+        .map((tag) => tag.trim())
+        .filter(Boolean)
+      const result = await importSkill({
+        url: url.trim(),
+        commit: preview.resolved.commit,
+        candidatePath: preview.candidate.path,
+        selectedPaths,
+        slug: slug.trim(),
+        displayName: displayName.trim(),
+        version: version.trim(),
+        tags: tagList,
+      })
+      const nextSlug = result.slug
+      setStatus('Imported.')
+      const ownerParam = me?.handle ?? (me?._id ? String(me._id) : 'unknown')
+      await navigate({ to: '/$owner/$slug', params: { owner: ownerParam, slug: nextSlug } })
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Import failed')
+      setStatus(null)
+    } finally {
+      setIsBusy(false)
+    }
+  }
+
+  if (!isAuthenticated) {
+    return (
+      <main className="section">
+        <div className="card">
+          {isLoading ? 'Loading…' : 'Sign in to import and publish skills.'}
+        </div>
+      </main>
+    )
+  }
+
+  return (
+    <main className="section upload-shell">
+      <div className="upload-header">
+        <div>
+          <div className="upload-kicker">GitHub import</div>
+          <h1 className="upload-title">Import from GitHub</h1>
+          <p className="upload-subtitle">Public repos only. Detects SKILL.md automatically.</p>
+        </div>
+        <div className="upload-badge">
+          <div>Public only</div>
+          <div className="upload-badge-sub">Commit pinned</div>
+        </div>
+      </div>
+
+      <div className="upload-card">
+        <div className="upload-fields">
+          <label className="upload-field" htmlFor="github-url">
+            <div className="upload-field-header">
+              <strong>GitHub URL</strong>
+              <span className="upload-field-hint">Repo, tree path, or blob</span>
+            </div>
+            <input
+              id="github-url"
+              className="upload-input"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              placeholder="https://github.com/owner/repo"
+              autoCapitalize="none"
+              autoCorrect="off"
+              spellCheck={false}
+            />
+          </label>
+        </div>
+
+        <div className="upload-footer">
+          <button
+            className="btn btn-primary"
+            type="button"
+            disabled={!url.trim() || isBusy}
+            onClick={() => void detect()}
+          >
+            Detect
+          </button>
+          {status ? <p className="upload-muted">{status}</p> : null}
+        </div>
+
+        {error ? (
+          <div className="upload-validation">
+            <div className="upload-validation-item upload-error">{error}</div>
+          </div>
+        ) : null}
+      </div>
+
+      {candidates.length > 1 ? (
+        <div className="card">
+          <h2 style={{ margin: 0 }}>Pick a skill</h2>
+          <div className="upload-filelist">
+            {candidates.map((candidate) => (
+              <label key={candidate.path} className="upload-file">
+                <input
+                  type="radio"
+                  name="candidate"
+                  checked={selectedCandidatePath === candidate.path}
+                  onChange={() => void loadCandidate(candidate.path)}
+                  disabled={isBusy}
+                />
+                <span className="mono">{candidate.path || '(repo root)'}</span>
+                <span>
+                  {candidate.name
+                    ? candidate.name
+                    : candidate.description
+                      ? candidate.description
+                      : ''}
+                </span>
+              </label>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      {preview ? (
+        <>
+          <div className="upload-card">
+            <div className="upload-grid">
+              <div className="upload-fields">
+                <label className="upload-field" htmlFor="slug">
+                  <div className="upload-field-header">
+                    <strong>Slug</strong>
+                    <span className="upload-field-hint">Unique, lowercase</span>
+                  </div>
+                  <input
+                    id="slug"
+                    className="upload-input"
+                    value={slug}
+                    onChange={(e) => setSlug(e.target.value)}
+                    autoCapitalize="none"
+                    autoCorrect="off"
+                    spellCheck={false}
+                  />
+                </label>
+                <label className="upload-field" htmlFor="name">
+                  <div className="upload-field-header">
+                    <strong>Display name</strong>
+                    <span className="upload-field-hint">Shown in listings</span>
+                  </div>
+                  <input
+                    id="name"
+                    className="upload-input"
+                    value={displayName}
+                    onChange={(e) => setDisplayName(e.target.value)}
+                  />
+                </label>
+                <div className="upload-row">
+                  <label className="upload-field" htmlFor="version">
+                    <div className="upload-field-header">
+                      <strong>Version</strong>
+                      <span className="upload-field-hint">Semver</span>
+                    </div>
+                    <input
+                      id="version"
+                      className="upload-input"
+                      value={version}
+                      onChange={(e) => setVersion(e.target.value)}
+                      autoCapitalize="none"
+                      autoCorrect="off"
+                      spellCheck={false}
+                    />
+                  </label>
+                  <label className="upload-field" htmlFor="tags">
+                    <div className="upload-field-header">
+                      <strong>Tags</strong>
+                      <span className="upload-field-hint">Comma-separated</span>
+                    </div>
+                    <input
+                      id="tags"
+                      className="upload-input"
+                      value={tags}
+                      onChange={(e) => setTags(e.target.value)}
+                      autoCapitalize="none"
+                      autoCorrect="off"
+                      spellCheck={false}
+                    />
+                  </label>
+                </div>
+              </div>
+              <aside className="upload-side">
+                <div className="upload-summary">
+                  <div className="upload-requirement ok">Commit pinned</div>
+                  <div className="upload-muted">
+                    {preview.resolved.owner}/{preview.resolved.repo}@
+                    {preview.resolved.commit.slice(0, 7)}
+                  </div>
+                  <div className="upload-muted mono">{preview.candidate.path || 'repo root'}</div>
+                </div>
+              </aside>
+            </div>
+          </div>
+
+          <div className="card">
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                gap: 12,
+                flexWrap: 'wrap',
+              }}
+            >
+              <h2 style={{ margin: 0 }}>Files</h2>
+              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
+                <button
+                  className="btn"
+                  type="button"
+                  disabled={isBusy}
+                  onClick={applyDefaultSelection}
+                >
+                  Select referenced
+                </button>
+                <button className="btn" type="button" disabled={isBusy} onClick={selectAll}>
+                  Select all
+                </button>
+                <button className="btn" type="button" disabled={isBusy} onClick={clearAll}>
+                  Clear
+                </button>
+              </div>
+            </div>
+            <div className="upload-muted">
+              Selected: {selectedCount}/{preview.files.length} • {formatBytes(selectedBytes)}
+            </div>
+            <div className="file-list">
+              {preview.files.map((file) => (
+                <label key={file.path} className="file-row">
+                  <input
+                    type="checkbox"
+                    checked={Boolean(selected[file.path])}
+                    onChange={() =>
+                      setSelected((prev) => ({ ...prev, [file.path]: !prev[file.path] }))
+                    }
+                    disabled={isBusy}
+                  />
+                  <span className="mono file-path">{file.path}</span>
+                  <span className="file-meta">{formatBytes(file.size)}</span>
+                </label>
+              ))}
+            </div>
+            <div className="upload-footer">
+              <button
+                className="btn btn-primary"
+                type="button"
+                disabled={
+                  isBusy ||
+                  !slug.trim() ||
+                  !displayName.trim() ||
+                  !version.trim() ||
+                  selectedCount === 0
+                }
+                onClick={() => void doImport()}
+              >
+                Import + publish
+              </button>
+            </div>
+          </div>
+        </>
+      ) : null}
+    </main>
+  )
+}