@inferencesh/ui 0.0.0-stage → 0.1.2

package/src/og/index.tsx

@@ -0,0 +1,430 @@
+/**
+ * Shared OG card chrome for inference shell and app.inference.sh.
+ *
+ * Why this module exists
+ * ---------------------
+ * These cards were hand-ported between js/web and js/app and then drifted:
+ * different description colour, size, casing and wrapping, a different footer
+ * accent, and a duplicated copy of fitTitle. Worse, both copies carried the
+ * SAME bug — a single Inter face registered at weight 700, so every string on
+ * every card rendered bold no matter what weight it asked for. Identical bugs
+ * in two files are invisible to a drift check; the only real fix is one file.
+ *
+ * What is deliberately NOT here
+ * ----------------------------
+ * The satori + resvg call. js/web runs on Node and returns a Response;
+ * js/app runs on Bun and returns a Uint8Array, and neither satori nor
+ * @resvg/resvg-js is installed in js/app outside its Docker runner. Keeping
+ * this module dependency-free (react only) means it imports cleanly in both
+ * runtimes and in vitest. Each consumer keeps its own three-line render call
+ * and passes OG_FONTS straight through — so the font set, which is what was
+ * actually wrong, still lives in exactly one place.
+ */
+
+import type { ReactNode } from 'react'
+
+import { fetchOgImage, OgImageRejected, redactUrl, type FetchOgImageOptions } from './image'
+export { canonicalOgSearch } from './query'
+
+export {
+  DEFAULT_OG_IMAGE_HOSTS,
+  OG_IMAGE_LIMITS,
+  checkOgImageUrl,
+  configureOgImageHosts,
+  fetchOgImage,
+  getOgImageHosts,
+  parseOgImageHosts,
+  readImageInfo,
+  OgImageRejected,
+  type FetchOgImageOptions,
+  type ImageInfo,
+} from './image'
+
+export const OG_SIZE = { width: 1200, height: 630 }
+
+export const OG_CACHE_HEADERS = {
+  'Content-Type': 'image/png',
+  'Cache-Control': 'public, max-age=3600, s-maxage=86400',
+}
+
+export const CATEGORY_COLORS: Record<string, string> = {
+  image: '#FF569D',
+  video: '#FF569D',
+  audio: '#FF569D',
+  chat: '#FF569D',
+  text: '#FF569D',
+  social: '#FF569D',
+  other: '#FF569D',
+}
+
+const LOGO_URL = 'https://cloud.inference.sh/web/assets/logo.png'
+// The logo is a constant of ours, so it does not depend on the configurable
+// allowlist that guards app-supplied card images.
+const LOGO_FETCH = { allowedHosts: [new URL(LOGO_URL).hostname] }
+
+// ---------------------------------------------------------------------------
+// Fonts
+// ---------------------------------------------------------------------------
+
+// Satori needs static TTF/OTF, so these are instances of the same variable
+// fonts the sites use (theme/fonts), cut with fontTools at the weights the
+// type spec uses and served by js/web from public/fonts/og. Mona Sans is
+// pinned to opsz 16 like the site CSS, and renamed inside the file because
+// its licence reserves the name for unmodified copies.
+//
+// Satori picks a face by declared weight, so each cut is registered at the
+// nearest hundred: 420 as 400, 520 as 500. Ask for 400 or 500 in styles.
+const OG_FONT_BASE = 'https://inference.sh/fonts/og'
+
+const OG_FONT_FILES = [
+  { name: 'Mona Sans', weight: 400, file: 'og-sans-420.ttf' },
+  { name: 'Mona Sans', weight: 500, file: 'og-sans-520.ttf' },
+] as const
+
+// The wordmark stays in Hack.
+const HACK_FILE = 'Hack-Regular.ttf'
+const HACK_URL = 'https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/ttf/Hack-Regular.ttf'
+
+/** How long one font download may take before the card fails instead of hanging. */
+export const OG_FONT_FETCH_TIMEOUT_MS = 10_000
+
+/** Font stacks for card styles; names match OG_FONT_FILES. */
+export const OG_DISPLAY_FONT = 'Mona Sans, sans-serif'
+export const OG_SANS_FONT = 'Mona Sans, system-ui, sans-serif'
+
+export interface OgFont {
+  name: string
+  data: ArrayBuffer
+  weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
+  style: 'normal'
+}
+
+/** Reads a card font by file name (og-sans-420.ttf, og-sans-520.ttf, Hack-Regular.ttf). */
+export type OgFontReader = (file: string) => Promise<ArrayBuffer>
+
+let fontsPromise: Promise<OgFont[]> | null = null
+let fontReader: OgFontReader | null = null
+
+/**
+ * Has loadOgFonts read the fonts with read (js/web: from its own build on
+ * disk) instead of downloading them from inference.sh and jsDelivr, which
+ * puts the site's own edge and a CDN on every cold render path. A file read
+ * fails over to the download. Call before the first render.
+ */
+export function configureOgFontReader(read: OgFontReader | null): void {
+  fontReader = read
+  fontsPromise = null
+}
+
+async function fetchFont(url: string): Promise<ArrayBuffer> {
+  const res = await fetch(url, { signal: AbortSignal.timeout(OG_FONT_FETCH_TIMEOUT_MS) })
+  if (!res.ok) throw new Error(`Font fetch failed: ${res.status} ${url}`)
+  return res.arrayBuffer()
+}
+
+async function readFont(file: string, url: string): Promise<ArrayBuffer> {
+  if (fontReader) {
+    try {
+      return await fontReader(file)
+    } catch (err) {
+      console.warn(`[og] font ${file} not readable (${err instanceof Error ? err.message : err}), downloading it`)
+    }
+  }
+  return fetchFont(url)
+}
+
+export function loadOgFonts(): Promise<OgFont[]> {
+  if (!fontsPromise) {
+    fontsPromise = Promise.all([
+      ...OG_FONT_FILES.map(async (f) => ({
+        name: f.name,
+        data: await readFont(f.file, `${OG_FONT_BASE}/${f.file}`),
+        weight: f.weight,
+        style: 'normal' as const,
+      })),
+      readFont(HACK_FILE, HACK_URL).then((data) => ({
+        name: 'Hack',
+        data,
+        weight: 400 as const,
+        style: 'normal' as const,
+      })),
+    ]).catch((err) => {
+      // Don't cache failures — allow the next call to retry
+      fontsPromise = null
+      throw err
+    })
+  }
+  return fontsPromise
+}
+
+// ---------------------------------------------------------------------------
+// Images
+// ---------------------------------------------------------------------------
+
+// Data URIs of fetched images, least recently used first out. Bounded by
+// total size as well as count: at the 5 MB per-image cap, 100 entries could
+// otherwise hold ~670 MB of base64.
+const MAX_IMAGE_CACHE = 100
+const MAX_IMAGE_CACHE_CHARS = 32 * 1024 * 1024
+const imageCache = new Map<string, string>()
+let imageCacheChars = 0
+
+function cacheImage(url: string, dataUri: string) {
+  if (dataUri.length > MAX_IMAGE_CACHE_CHARS) return
+  while (
+    imageCache.size > 0 &&
+    (imageCache.size >= MAX_IMAGE_CACHE || imageCacheChars + dataUri.length > MAX_IMAGE_CACHE_CHARS)
+  ) {
+    const [oldestKey, oldest] = imageCache.entries().next().value as [string, string]
+    imageCache.delete(oldestKey)
+    imageCacheChars -= oldest.length
+  }
+  imageCache.set(url, dataUri)
+  imageCacheChars += dataUri.length
+}
+
+// Card-image fetches in flight at once, and how many more may wait for a turn.
+// Each one holds up to 5 MB of body plus its base64 copy until its card is
+// drawn, so a burst of distinct cards must not fetch them all at once. A
+// fetch that cannot get a turn is skipped: the card renders without it.
+const MAX_IMAGE_FETCHES = 4
+const MAX_QUEUED_IMAGE_FETCHES = 16
+const MAX_IMAGE_FETCH_WAIT_MS = 5000
+let activeImageFetches = 0
+const imageFetchWaiters: Array<() => void> = []
+// Requests for the same image while it is being fetched share that fetch.
+const inFlightImages = new Map<string, Promise<string | null>>()
+
+class ImageFetchBusy extends Error {}
+
+function acquireImageFetch(): Promise<void> {
+  if (activeImageFetches < MAX_IMAGE_FETCHES) {
+    activeImageFetches++
+    return Promise.resolve()
+  }
+  if (imageFetchWaiters.length >= MAX_QUEUED_IMAGE_FETCHES) {
+    return Promise.reject(new ImageFetchBusy('busy'))
+  }
+  return new Promise((resolve, reject) => {
+    const turn = () => {
+      clearTimeout(timer)
+      activeImageFetches++
+      resolve()
+    }
+    const timer = setTimeout(() => {
+      const i = imageFetchWaiters.indexOf(turn)
+      if (i >= 0) imageFetchWaiters.splice(i, 1)
+      reject(new ImageFetchBusy('busy, waited too long'))
+    }, MAX_IMAGE_FETCH_WAIT_MS)
+    imageFetchWaiters.push(turn)
+  })
+}
+
+function releaseImageFetch(): void {
+  activeImageFetches--
+  imageFetchWaiters.shift()?.()
+}
+
+/**
+ * An image as a data URI for satori, or null when it may not or could not be
+ * used (see ./image.ts for the rules). Callers render without the image on
+ * null. Each refusal logs one line, without the URL's query.
+ */
+export async function fetchImageAsDataUri(
+  url: string,
+  opts?: FetchOgImageOptions,
+): Promise<string | null> {
+  const cached = imageCache.get(url)
+  if (cached !== undefined) {
+    imageCache.delete(url)
+    imageCache.set(url, cached)
+    return cached
+  }
+  const pending = inFlightImages.get(url)
+  if (pending) return pending
+  const fetching = fetchImageUncached(url, opts).finally(() => inFlightImages.delete(url))
+  inFlightImages.set(url, fetching)
+  return fetching
+}
+
+async function fetchImageUncached(url: string, opts?: FetchOgImageOptions): Promise<string | null> {
+  let acquired = false
+  try {
+    await acquireImageFetch()
+    acquired = true
+    const { bytes, info } = await fetchOgImage(url, opts)
+    const dataUri = `data:${info.type};base64,${Buffer.from(bytes).toString('base64')}`
+    cacheImage(url, dataUri)
+    return dataUri
+  } catch (err) {
+    const reason =
+      err instanceof OgImageRejected || err instanceof ImageFetchBusy
+        ? err.message
+        : err instanceof Error && err.name === 'AbortError'
+          ? 'timeout'
+          : err instanceof Error
+            ? `fetch failed: ${err.message}`
+            : 'fetch failed'
+    console.warn(`[og] image skipped (${reason}): ${redactUrl(url)}`)
+    return null
+  } finally {
+    if (acquired) releaseImageFetch()
+  }
+}
+
+/** Test hook: empty the image cache. */
+export function clearOgImageCache(): void {
+  imageCache.clear()
+  imageCacheChars = 0
+}
+
+/**
+ * Warm the font and logo caches at startup so the first card request does not
+ * pay for two network fetches. Rejects when a font fails to load (the loader
+ * does not cache the failure, so a later call or card request tries again);
+ * an unreachable logo resolves to null and is not cached either. Callers must
+ * handle the rejection: the OG server wraps it in prewarmWithRetry
+ * (js/app server/prewarm.ts).
+ */
+export function prewarmOg(): Promise<unknown> {
+  return Promise.all([loadOgFonts(), fetchImageAsDataUri(LOGO_URL, LOGO_FETCH)])
+}
+
+// ---------------------------------------------------------------------------
+// Layout
+// ---------------------------------------------------------------------------
+
+/** Font size and truncation for OG card titles. */
+export function fitTitle(text: string, maxLines: number = 2) {
+  const len = text.length
+  let fontSize: number
+  let maxChars: number
+
+  if (maxLines <= 2) {
+    fontSize = len <= 20 ? 82 : len <= 30 ? 72 : len <= 45 ? 60 : 52
+    maxChars = 60
+  } else {
+    fontSize = len <= 20 ? 82 : len <= 35 ? 68 : len <= 55 ? 56 : 48
+    maxChars = 100
+  }
+
+  const truncated = text.length > maxChars ? text.slice(0, maxChars) + '...' : text
+  return { fontSize, text: truncated }
+}
+
+/** Truncate a card description to the length the layout can hold. */
+export function fitDescription(text: string, maxChars = 120): string {
+  return text.length > maxChars ? text.slice(0, maxChars) + '...' : text
+}
+
+/** Shared card description styling — regular weight, kept clear of the artwork. */
+export const DESCRIPTION_STYLE = {
+  color: '#666666',
+  fontSize: 38,
+  fontWeight: 400,
+  fontFamily: OG_SANS_FONT,
+  lineHeight: 1.3,
+  maxWidth: 700,
+} as const
+
+/** Shared "namespace/" eyebrow styling. */
+export const EYEBROW_STYLE = {
+  color: '#FF569D',
+  fontSize: 38,
+  fontWeight: 400,
+  fontFamily: OG_SANS_FONT,
+} as const
+
+/** Shared card title styling; pass the fontSize from fitTitle(). */
+export const TITLE_STYLE = {
+  color: '#111111',
+  fontFamily: OG_DISPLAY_FONT,
+  fontWeight: 400,
+  letterSpacing: '-0.02em',
+  lineHeight: 1.1,
+} as const
+
+/** Black card, logo top-left, content in the middle, footer at the bottom. */
+export async function ogLayout(opts: {
+  children: ReactNode
+  footer?: ReactNode
+  backgroundImageUrl?: string
+}): Promise<ReactNode> {
+  const logoSrc = await fetchImageAsDataUri(LOGO_URL, LOGO_FETCH)
+  const bgSrc = opts.backgroundImageUrl
+    ? await fetchImageAsDataUri(opts.backgroundImageUrl)
+    : null
+
+  return (
+    <div
+      style={{
+        background: '#fafafa',
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        position: 'relative',
+        fontFamily: OG_SANS_FONT,
+      }}
+    >
+      {bgSrc && (
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            width: '60%',
+            height: '100%',
+            display: 'flex',
+          }}
+        >
+          <img
+            src={bgSrc}
+            width={720}
+            height={630}
+            style={{ objectFit: 'cover', width: '100%', height: '100%' }}
+          />
+          <div
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              background:
+                'linear-gradient(to right, #fafafa 0%, #fafafacc 30%, #fafafa33 70%, transparent 100%)',
+            }}
+          />
+        </div>
+      )}
+      <div
+        style={{
+          position: 'relative',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          padding: '48px 56px',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
+          {logoSrc && <img src={logoSrc} width={48} height={48} />}
+          <span
+            style={{
+              color: '#111111',
+              fontSize: 36,
+              fontWeight: 400,
+              fontFamily: 'Hack, monospace',
+            }}
+          >
+            inference shell
+          </span>
+        </div>
+        {opts.children}
+        {opts.footer && (
+          <div style={{ display: 'flex', alignItems: 'center' }}>{opts.footer}</div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/og/query.ts

@@ -0,0 +1,26 @@
+/**
+ * Canonical query strings for OG image routes.
+ *
+ * The cards are served with a public s-maxage, and the edge keys its cache on
+ * the full query string, so `?namespace=x&name=y&r=<random>` misses the cache
+ * every time and forces a fresh render (and card-image fetch). Routes that
+ * take parameters redirect any other spelling to the one canonical query:
+ * the known keys only, first value each, in a fixed order.
+ */
+
+/**
+ * The canonical search string ("" or "?a=1&b=2") for these keys, or null when
+ * `search` already is it. Idempotent: the result maps to null.
+ */
+export function canonicalOgSearch(search: string, keys: readonly string[]): string | null {
+  const params = new URLSearchParams(search)
+  const canonical = new URLSearchParams()
+  for (const key of keys) {
+    const value = params.get(key)
+    if (value !== null) canonical.set(key, value)
+  }
+  const query = canonical.toString()
+  const want = query ? `?${query}` : ''
+  const have = search === '?' ? '' : search
+  return have === want ? null : want
+}

package/src/shadcn/accordion.tsx

@@ -0,0 +1,71 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+import { cn } from "cn"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }