pilothub 0.0.1

package/server/og/soulOgSvg.ts

@@ -0,0 +1,209 @@
+import { FONT_MONO, FONT_SANS } from './ogAssets'
+
+export type SoulOgSvgParams = {
+  markDataUrl: string
+  title: string
+  description: string
+  ownerLabel: string
+  versionLabel: string
+  footer: string
+}
+
+function escapeXml(value: string) {
+  return value
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
+function wrapText(value: string, maxChars: number, maxLines: number) {
+  const words = value.trim().split(/\s+/).filter(Boolean)
+  const lines: string[] = []
+  let current = ''
+
+  function pushLine(line: string) {
+    if (!line) return
+    lines.push(line)
+  }
+
+  function splitLongWord(word: string) {
+    if (word.length <= maxChars) return [word]
+    const parts: string[] = []
+    let remaining = word
+    while (remaining.length > maxChars) {
+      parts.push(`${remaining.slice(0, maxChars - 1)}…`)
+      remaining = remaining.slice(maxChars - 1)
+    }
+    if (remaining) parts.push(remaining)
+    return parts
+  }
+
+  for (const word of words) {
+    if (word.length > maxChars) {
+      if (current) {
+        pushLine(current)
+        current = ''
+        if (lines.length >= maxLines - 1) break
+      }
+      const parts = splitLongWord(word)
+      for (const part of parts) {
+        pushLine(part)
+        if (lines.length >= maxLines) break
+      }
+      current = ''
+      if (lines.length >= maxLines - 1) break
+      continue
+    }
+
+    const next = current ? `${current} ${word}` : word
+    if (next.length <= maxChars) {
+      current = next
+      continue
+    }
+    pushLine(current)
+    current = word
+    if (lines.length >= maxLines - 1) break
+  }
+  if (lines.length < maxLines && current) pushLine(current)
+  if (lines.length > maxLines) lines.length = maxLines
+
+  const usedWords = lines.join(' ').split(/\s+/).filter(Boolean).length
+  if (usedWords < words.length) {
+    const last = lines.at(-1) ?? ''
+    const trimmed = last.length > maxChars ? last.slice(0, maxChars) : last
+    lines[lines.length - 1] = `${trimmed.replace(/\s+$/g, '').replace(/[.。,;:!?]+$/g, '')}…`
+  }
+  return lines
+}
+
+export function buildSoulOgSvg(params: SoulOgSvgParams) {
+  const rawTitle = params.title.trim() || 'SoulHub'
+  const rawDescription = params.description.trim() || 'SOUL.md bundle on SoulHub.'
+
+  const cardX = 72
+  const cardY = 96
+  const cardW = 640
+  const cardH = 456
+  const cardR = 34
+
+  const titleLines = wrapText(rawTitle, 22, 2)
+  const descLines = wrapText(rawDescription, 42, 3)
+
+  const titleFontSize = titleLines.length > 1 || rawTitle.length > 24 ? 72 : 80
+  const titleY = titleLines.length > 1 ? 258 : 280
+  const titleLineHeight = 84
+
+  const descY = titleLines.length > 1 ? 395 : 380
+  const descLineHeight = 34
+
+  const pillText = `${params.ownerLabel} • ${params.versionLabel}`
+  const footerY = cardY + cardH - 18
+
+  const titleTspans = titleLines
+    .map((line, index) => {
+      const dy = index === 0 ? 0 : titleLineHeight
+      return `<tspan x="114" dy="${dy}">${escapeXml(line)}</tspan>`
+    })
+    .join('')
+
+  const descTspans = descLines
+    .map((line, index) => {
+      const dy = index === 0 ? 0 : descLineHeight
+      return `<tspan x="114" dy="${dy}">${escapeXml(line)}</tspan>`
+    })
+    .join('')
+
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1200" height="630" viewBox="0 0 1200 630" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1200" y2="630" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#0E1314"/>
+      <stop offset="0.55" stop-color="#142021"/>
+      <stop offset="1" stop-color="#0E1314"/>
+    </linearGradient>
+
+    <radialGradient id="glowGold" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(300 80) rotate(120) scale(520 420)">
+      <stop stop-color="#E7B96B" stop-opacity="0.45"/>
+      <stop offset="1" stop-color="#E7B96B" stop-opacity="0"/>
+    </radialGradient>
+
+    <radialGradient id="glowTeal" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1040 140) rotate(140) scale(520 420)">
+      <stop stop-color="#6AD6C4" stop-opacity="0.35"/>
+      <stop offset="1" stop-color="#6AD6C4" stop-opacity="0"/>
+    </radialGradient>
+
+    <filter id="softBlur" x="-40%" y="-40%" width="180%" height="180%">
+      <feGaussianBlur stdDeviation="24"/>
+    </filter>
+
+    <filter id="cardShadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="18" stdDeviation="26" flood-color="#000000" flood-opacity="0.6"/>
+    </filter>
+
+    <linearGradient id="pill" x1="0" y1="0" x2="520" y2="0" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E7B96B" stop-opacity="0.26"/>
+      <stop offset="1" stop-color="#E7B96B" stop-opacity="0.12"/>
+    </linearGradient>
+
+    <linearGradient id="stroke" x1="0" y1="0" x2="0" y2="1">
+      <stop stop-color="#FFFFFF" stop-opacity="0.18"/>
+      <stop offset="1" stop-color="#FFFFFF" stop-opacity="0.08"/>
+    </linearGradient>
+
+    <clipPath id="cardClip">
+      <rect x="${cardX}" y="${cardY}" width="${cardW}" height="${cardH}" rx="${cardR}"/>
+    </clipPath>
+  </defs>
+
+  <rect width="1200" height="630" fill="url(#bg)"/>
+  <circle cx="300" cy="80" r="520" fill="url(#glowGold)" filter="url(#softBlur)"/>
+  <circle cx="1040" cy="140" r="520" fill="url(#glowTeal)" filter="url(#softBlur)"/>
+
+  <g opacity="0.12">
+    <path d="M0 90 C180 130 360 50 540 96 C720 142 840 220 1200 170" stroke="#FFFFFF" stroke-opacity="0.12" stroke-width="2"/>
+    <path d="M0 190 C240 250 400 170 600 214 C800 258 960 330 1200 300" stroke="#FFFFFF" stroke-opacity="0.1" stroke-width="2"/>
+    <path d="M0 450 C240 390 460 520 660 470 C860 420 1000 500 1200 460" stroke="#FFFFFF" stroke-opacity="0.08" stroke-width="2"/>
+  </g>
+
+  <g opacity="0.24" filter="url(#softBlur)">
+    <image href="${params.markDataUrl}" x="740" y="70" width="560" height="560" preserveAspectRatio="xMidYMid meet"/>
+  </g>
+
+  <g filter="url(#cardShadow)">
+    <rect x="${cardX}" y="${cardY}" width="${cardW}" height="${cardH}" rx="${cardR}" fill="#1B201F" fill-opacity="0.92" stroke="url(#stroke)"/>
+  </g>
+
+  <g clip-path="url(#cardClip)">
+    <image href="${params.markDataUrl}" x="108" y="134" width="46" height="46" preserveAspectRatio="xMidYMid meet"/>
+
+    <g>
+      <rect x="166" y="136" width="520" height="42" rx="21" fill="url(#pill)" stroke="#E7B96B" stroke-opacity="0.3"/>
+      <text x="186" y="163"
+        fill="#F7F1E8"
+        font-size="18"
+        font-weight="600"
+        font-family="${FONT_SANS}, sans-serif"
+        opacity="0.92">${escapeXml(pillText)}</text>
+    </g>
+
+    <text x="114" y="${titleY}"
+      fill="#F7F1E8"
+      font-size="${titleFontSize}"
+      font-weight="800"
+      font-family="${FONT_SANS}, sans-serif">${titleTspans}</text>
+
+    <text x="114" y="${descY}"
+      fill="#C7BFB5"
+      font-size="26"
+      font-weight="500"
+      font-family="${FONT_SANS}, sans-serif">${descTspans}</text>
+
+    <text x="114" y="${footerY}"
+      fill="#B7B0A6"
+      font-size="18"
+      font-family="${FONT_MONO}, monospace">${escapeXml(params.footer)}</text>
+  </g>
+</svg>`
+}

package/server/routes/og/skill.png.ts

@@ -0,0 +1,103 @@
+import { initWasm, Resvg } from '@resvg/resvg-wasm'
+import { defineEventHandler, getQuery, getRequestHost, setHeader } from 'h3'
+
+import { fetchSkillOgMeta } from '../../og/fetchSkillOgMeta'
+import {
+  FONT_MONO,
+  FONT_SANS,
+  getFontBuffers,
+  getMarkDataUrl,
+  getResvgWasm,
+} from '../../og/ogAssets'
+import { buildSkillOgSvg } from '../../og/skillOgSvg'
+
+type OgQuery = {
+  slug?: string
+  owner?: string
+  version?: string
+  title?: string
+  description?: string
+  v?: string
+}
+
+let wasmInitPromise: Promise<void> | null = null
+
+function cleanString(value: unknown) {
+  if (typeof value !== 'string') return ''
+  return value.trim()
+}
+
+function getApiBase(eventHost: string | null) {
+  const direct = process.env.VITE_CONVEX_SITE_URL?.trim()
+  if (direct) return direct
+
+  const site = process.env.SITE_URL?.trim() || process.env.VITE_SITE_URL?.trim()
+  if (site) return site
+
+  if (eventHost) return `https://${eventHost}`
+  return 'https://pilothub.com'
+}
+
+async function ensureWasm() {
+  if (!wasmInitPromise) {
+    wasmInitPromise = getResvgWasm().then((wasm) => initWasm(wasm))
+  }
+  await wasmInitPromise
+}
+
+export default defineEventHandler(async (event) => {
+  const query = getQuery(event) as OgQuery
+  const slug = cleanString(query.slug)
+  if (!slug) {
+    setHeader(event, 'Content-Type', 'text/plain; charset=utf-8')
+    return 'Missing `slug` query param.'
+  }
+
+  const ownerFromQuery = cleanString(query.owner)
+  const versionFromQuery = cleanString(query.version)
+  const titleFromQuery = cleanString(query.title)
+  const descriptionFromQuery = cleanString(query.description)
+
+  const needFetch = !titleFromQuery || !descriptionFromQuery || !ownerFromQuery || !versionFromQuery
+  const meta = needFetch ? await fetchSkillOgMeta(slug, getApiBase(getRequestHost(event))) : null
+
+  const owner = ownerFromQuery || meta?.owner || ''
+  const version = versionFromQuery || meta?.version || ''
+  const title = titleFromQuery || meta?.displayName || slug
+  const description = descriptionFromQuery || meta?.summary || ''
+
+  const ownerLabel = owner ? `@${owner}` : 'pilothub'
+  const versionLabel = version ? `v${version}` : 'latest'
+  const footer = owner ? `pilothub.com/${owner}/${slug}` : `pilothub.com/skills/${slug}`
+
+  const cacheKey = version ? 'public, max-age=31536000, immutable' : 'public, max-age=3600'
+  setHeader(event, 'Cache-Control', cacheKey)
+  setHeader(event, 'Content-Type', 'image/png')
+
+  const [markDataUrl, fontBuffers] = await Promise.all([
+    getMarkDataUrl(),
+    ensureWasm().then(() => getFontBuffers()),
+  ])
+
+  const svg = buildSkillOgSvg({
+    markDataUrl,
+    title,
+    description,
+    ownerLabel,
+    versionLabel,
+    footer,
+  })
+
+  const resvg = new Resvg(svg, {
+    fitTo: { mode: 'width', value: 1200 },
+    font: {
+      fontBuffers,
+      defaultFontFamily: FONT_SANS,
+      sansSerifFamily: FONT_SANS,
+      monospaceFamily: FONT_MONO,
+    },
+  })
+  const png = resvg.render().asPng()
+  resvg.free()
+  return png
+})

package/server/routes/og/soul.png.ts

@@ -0,0 +1,111 @@
+import { initWasm, Resvg } from '@resvg/resvg-wasm'
+import { defineEventHandler, getQuery, getRequestHost, setHeader } from 'h3'
+
+import type { SoulOgMeta } from '../../og/fetchSoulOgMeta'
+import { fetchSoulOgMeta } from '../../og/fetchSoulOgMeta'
+import {
+  FONT_MONO,
+  FONT_SANS,
+  getFontBuffers,
+  getMarkDataUrl,
+  getResvgWasm,
+} from '../../og/ogAssets'
+import { buildSoulOgSvg } from '../../og/soulOgSvg'
+
+type OgQuery = {
+  slug?: string
+  owner?: string
+  version?: string
+  title?: string
+  description?: string
+  v?: string
+}
+
+let wasmInitPromise: Promise<void> | null = null
+
+function cleanString(value: unknown) {
+  if (typeof value !== 'string') return ''
+  return value.trim()
+}
+
+function getApiBase(eventHost: string | null) {
+  const direct = process.env.VITE_CONVEX_SITE_URL?.trim()
+  if (direct) return direct
+
+  const site = process.env.SITE_URL?.trim() || process.env.VITE_SITE_URL?.trim()
+  if (site) return site
+
+  if (eventHost) return `https://${eventHost}`
+  return 'https://onlycrabs.ai'
+}
+
+async function ensureWasm() {
+  if (!wasmInitPromise) {
+    wasmInitPromise = getResvgWasm().then((wasm) => initWasm(wasm))
+  }
+  await wasmInitPromise
+}
+
+function buildFooter(slug: string, owner: string | null) {
+  if (owner) return `@${owner}/${slug}`
+  return `souls/${slug}`
+}
+
+export default defineEventHandler(async (event) => {
+  const query = getQuery(event) as OgQuery
+  const slug = cleanString(query.slug)
+  if (!slug) {
+    setHeader(event, 'Content-Type', 'text/plain; charset=utf-8')
+    return 'Missing `slug` query param.'
+  }
+
+  const ownerFromQuery = cleanString(query.owner)
+  const versionFromQuery = cleanString(query.version)
+  const titleFromQuery = cleanString(query.title)
+  const descriptionFromQuery = cleanString(query.description)
+
+  const needFetch = !titleFromQuery || !descriptionFromQuery || !ownerFromQuery || !versionFromQuery
+  const meta: SoulOgMeta | null = needFetch
+    ? await fetchSoulOgMeta(slug, getApiBase(getRequestHost(event)))
+    : null
+
+  const owner = ownerFromQuery || meta?.owner || ''
+  const version = versionFromQuery || meta?.version || ''
+  const title = titleFromQuery || meta?.displayName || slug
+  const description = descriptionFromQuery || meta?.summary || ''
+
+  const ownerLabel = owner ? `@${owner}` : 'SoulHub'
+  const versionLabel = version ? `v${version}` : 'latest'
+  const footer = buildFooter(slug, owner || null)
+
+  const cacheKey = version ? 'public, max-age=31536000, immutable' : 'public, max-age=3600'
+  setHeader(event, 'Cache-Control', cacheKey)
+  setHeader(event, 'Content-Type', 'image/png')
+
+  const [markDataUrl, fontBuffers] = await Promise.all([
+    getMarkDataUrl(),
+    ensureWasm().then(() => getFontBuffers()),
+  ])
+
+  const svg = buildSoulOgSvg({
+    markDataUrl,
+    title,
+    description,
+    ownerLabel,
+    versionLabel,
+    footer,
+  })
+
+  const resvg = new Resvg(svg, {
+    fitTo: { mode: 'width', value: 1200 },
+    font: {
+      fontBuffers,
+      defaultFontFamily: FONT_SANS,
+      sansSerifFamily: FONT_SANS,
+      monospaceFamily: FONT_MONO,
+    },
+  })
+  const png = resvg.render().asPng()
+  resvg.free()
+  return png
+})

package/src/__tests__/skill-detail-page.test.tsx

@@ -0,0 +1,86 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import { vi } from 'vitest'
+
+import { SkillDetailPage } from '../components/SkillDetailPage'
+
+const navigateMock = vi.fn()
+const useAuthStatusMock = vi.fn()
+
+vi.mock('@tanstack/react-router', () => ({
+  useNavigate: () => navigateMock,
+}))
+
+const useQueryMock = vi.fn()
+const getReadmeMock = vi.fn()
+
+vi.mock('convex/react', () => ({
+  useQuery: (...args: unknown[]) => useQueryMock(...args),
+  useMutation: () => vi.fn(),
+  useAction: () => getReadmeMock,
+}))
+
+vi.mock('../lib/useAuthStatus', () => ({
+  useAuthStatus: () => useAuthStatusMock(),
+}))
+
+describe('SkillDetailPage', () => {
+  beforeEach(() => {
+    useQueryMock.mockReset()
+    getReadmeMock.mockReset()
+    navigateMock.mockReset()
+    useAuthStatusMock.mockReset()
+    getReadmeMock.mockResolvedValue({ text: '' })
+    useAuthStatusMock.mockReturnValue({
+      isAuthenticated: false,
+      isLoading: false,
+      me: null,
+    })
+    useQueryMock.mockImplementation((_fn: unknown, args: unknown) => {
+      if (args === 'skip') return undefined
+      return undefined
+    })
+  })
+
+  it('shows a loading indicator while loading', () => {
+    useQueryMock.mockImplementationOnce(() => undefined) // getBySlug
+
+    render(<SkillDetailPage slug="weather" />)
+    expect(screen.getByText(/Loading skill/i)).toBeTruthy()
+    expect(screen.queryByText(/Skill not found/i)).toBeNull()
+  })
+
+  it('shows not found when skill query resolves to null', async () => {
+    useQueryMock.mockImplementationOnce(() => null) // getBySlug
+
+    render(<SkillDetailPage slug="missing-skill" />)
+    expect(await screen.findByText(/Skill not found/i)).toBeTruthy()
+  })
+
+  it('redirects legacy routes to canonical owner/slug', async () => {
+    useQueryMock.mockImplementationOnce(() => ({
+      skill: {
+        _id: 'skills:1',
+        slug: 'weather',
+        displayName: 'Weather',
+        summary: 'Get current weather.',
+        ownerUserId: 'users:1',
+        tags: {},
+        stats: { stars: 0, downloads: 0 },
+      },
+      owner: { handle: 'steipete', name: 'Peter' },
+      latestVersion: { _id: 'skillVersions:1', version: '1.0.0', parsed: {} },
+    }))
+
+    render(<SkillDetailPage slug="weather" redirectToCanonical />)
+    expect(screen.getByText(/Loading skill/i)).toBeTruthy()
+
+    await waitFor(() => {
+      expect(navigateMock).toHaveBeenCalled()
+    })
+    expect(navigateMock).toHaveBeenCalledWith({
+      to: '/$owner/$slug',
+      params: { owner: 'steipete', slug: 'weather' },
+      replace: true,
+    })
+  })
+})

package/src/__tests__/skills-index.test.tsx

@@ -0,0 +1,145 @@
+/* @vitest-environment jsdom */
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import type { ReactNode } from 'react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { SkillsIndex } from '../routes/skills/index'
+
+const navigateMock = vi.fn()
+const useActionMock = vi.fn()
+const usePaginatedQueryMock = vi.fn()
+let searchMock: Record<string, unknown> = {}
+
+vi.mock('@tanstack/react-router', () => ({
+  createFileRoute: () => (_config: { component: unknown; validateSearch: unknown }) => ({
+    useNavigate: () => navigateMock,
+    useSearch: () => searchMock,
+  }),
+  Link: (props: { children: ReactNode }) => <a href="/">{props.children}</a>,
+}))
+
+vi.mock('convex/react', () => ({
+  useAction: (...args: unknown[]) => useActionMock(...args),
+}))
+
+vi.mock('convex-helpers/react', () => ({
+  usePaginatedQuery: (...args: unknown[]) => usePaginatedQueryMock(...args),
+}))
+
+describe('SkillsIndex', () => {
+  beforeEach(() => {
+    usePaginatedQueryMock.mockReset()
+    useActionMock.mockReset()
+    navigateMock.mockReset()
+    searchMock = {}
+    useActionMock.mockReturnValue(() => Promise.resolve([]))
+    // Default: return empty results with Exhausted status
+    usePaginatedQueryMock.mockReturnValue({
+      results: [],
+      status: 'Exhausted',
+      loadMore: vi.fn(),
+    })
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    vi.unstubAllGlobals()
+  })
+
+  it('requests the first skills page', () => {
+    render(<SkillsIndex />)
+    // usePaginatedQuery should be called with the API endpoint and empty args
+    expect(usePaginatedQueryMock).toHaveBeenCalledWith(
+      expect.anything(),
+      {},
+      { initialNumItems: 25 },
+    )
+  })
+
+  it('renders an empty state when no skills are returned', () => {
+    render(<SkillsIndex />)
+    expect(screen.getByText('No skills match that filter.')).toBeTruthy()
+  })
+
+  it('skips list query and calls search when query is set', async () => {
+    searchMock = { q: 'remind' }
+    const actionFn = vi.fn().mockResolvedValue([])
+    useActionMock.mockReturnValue(actionFn)
+    vi.useFakeTimers()
+
+    render(<SkillsIndex />)
+
+    // usePaginatedQuery should be called with 'skip' when there's a search query
+    expect(usePaginatedQueryMock).toHaveBeenCalledWith(expect.anything(), 'skip', {
+      initialNumItems: 25,
+    })
+    await act(async () => {
+      await vi.runAllTimersAsync()
+    })
+    expect(actionFn).toHaveBeenCalledWith({
+      query: 'remind',
+      highlightedOnly: false,
+      limit: 25,
+    })
+    await act(async () => {
+      await vi.runAllTimersAsync()
+    })
+    expect(actionFn).toHaveBeenCalledWith({
+      query: 'remind',
+      highlightedOnly: false,
+      limit: 25,
+    })
+  })
+
+  it('loads more results when search pagination is requested', async () => {
+    searchMock = { q: 'remind' }
+    vi.stubGlobal('IntersectionObserver', undefined)
+    const actionFn = vi
+      .fn()
+      .mockResolvedValueOnce(makeSearchResults(25))
+      .mockResolvedValueOnce(makeSearchResults(50))
+    useActionMock.mockReturnValue(actionFn)
+    vi.useFakeTimers()
+
+    render(<SkillsIndex />)
+    await act(async () => {
+      await vi.runAllTimersAsync()
+    })
+
+    const loadMoreButton = screen.getByRole('button', { name: 'Load more' })
+    await act(async () => {
+      fireEvent.click(loadMoreButton)
+      await vi.runAllTimersAsync()
+    })
+
+    expect(actionFn).toHaveBeenLastCalledWith({
+      query: 'remind',
+      highlightedOnly: false,
+      limit: 50,
+    })
+  })
+})
+
+function makeSearchResults(count: number) {
+  return Array.from({ length: count }, (_, index) => ({
+    score: 0.9,
+    skill: {
+      _id: `skill_${index}`,
+      slug: `skill-${index}`,
+      displayName: `Skill ${index}`,
+      summary: `Summary ${index}`,
+      tags: {},
+      stats: {
+        downloads: 0,
+        installsCurrent: 0,
+        installsAllTime: 0,
+        stars: 0,
+        versions: 1,
+        comments: 0,
+      },
+      createdAt: 0,
+      updatedAt: 0,
+    },
+    version: null,
+  }))
+}