@inferencesh/ui 0.0.0-stage → 0.1.2

package/src/markdown/markdown-renderer.tsx

@@ -0,0 +1,232 @@
+'use client'
+
+import { cn } from "cn"
+import ZoomableImage from "../components/zoomable-image"
+import React, { memo, useMemo } from 'react'
+import Markdown from 'react-markdown'
+import { safeUrlTransform } from '../lib/safe-content'
+import remarkGfm from 'remark-gfm'
+import { isCloudInferenceUrl, isVideoUrl, getYouTubeVideoId, stripHtmlComments } from './helpers'
+import { YouTubeEmbed } from './youtube-embed'
+import { CompactCodeBlock } from '../components/code-block'
+
+export interface MarkdownRendererProps {
+  content: string
+  className?: string
+  /** Compact mode for dense UI like chat */
+  compact?: boolean
+  /** Custom file preview renderer for cloud URLs */
+  renderFilePreview?: (props: { uri: string; filename: string }) => React.ReactNode
+  /** Custom image renderer for cloud URLs */
+  renderCloudImage?: (props: { src: string; alt?: string }) => React.ReactNode
+}
+
+const textSizeMap = {
+  default: {
+    h1: 'text-xl',
+    h2: 'text-lg',
+    h3: 'text-md',
+    h4: 'text-base',
+    h5: 'text-sm',
+    h6: 'text-sm',
+    p: 'text-sm',
+    li: 'text-sm',
+    code: 'text-xs',
+    pre: 'text-xs',
+    blockquote: 'text-sm',
+    ul: 'text-sm',
+    ol: 'text-sm',
+    th: 'text-sm',
+    td: 'text-sm',
+  },
+  compact: {
+    h1: 'text-xl',
+    h2: 'text-lg',
+    h3: 'text-base',
+    h4: 'text-xs',
+    h5: 'text-xs',
+    h6: 'text-xs',
+    p: 'text-xs',
+    li: 'text-xs',
+    code: 'text-xs',
+    pre: 'text-xs',
+    blockquote: 'text-xs',
+    ul: 'text-xs',
+    ol: 'text-xs',
+    th: 'text-xs',
+    td: 'text-xs',
+  },
+}
+
+export const MarkdownRenderer = memo(function MarkdownRenderer({
+  content,
+  className,
+  compact = false,
+  renderFilePreview,
+  renderCloudImage,
+}: MarkdownRendererProps) {
+  const processedContent = useMemo(
+    () => stripHtmlComments(content),
+    [content]
+  )
+
+  const textSize = compact ? textSizeMap.compact : textSizeMap.default
+  const fontClass = 'legible'
+  const paragraphClass = cn(textSize.p, 'break-words whitespace-pre-wrap my-0 py-0 text-justify leading-relaxed', fontClass)
+
+  return (
+    <div className={className}>
+      <Markdown
+        urlTransform={safeUrlTransform}
+        remarkPlugins={[[remarkGfm, { singleTilde: false }]]}
+        components={{
+          // Block elements
+          h1: ({ children }) => <h1 className={cn(textSize.h1, 'font-bold my-0 [&:first-child]:mt-0 mt-8 py-0', fontClass)}>{children}</h1>,
+          h2: ({ children }) => <h2 className={cn(textSize.h2, 'font-bold my-0 [&:first-child]:mt-0 mt-8 py-0', fontClass)}>{children}</h2>,
+          h3: ({ children }) => <h3 className={cn(textSize.h3, 'font-bold my-0 [&:first-child]:mt-0 mt-8 py-0', fontClass)}>{children}</h3>,
+          h4: ({ children }) => <h4 className={cn(textSize.h4, 'font-bold my-0 [&:first-child]:mt-0 mt-8 py-0', fontClass)}>{children}</h4>,
+          h5: ({ children }) => <h5 className={cn(textSize.h5, 'font-bold my-0 [&:first-child]:mt-0 mt-8 py-0', fontClass)}>{children}</h5>,
+          h6: ({ children }) => <h6 className={cn(textSize.h6, 'font-bold my-0 [&:first-child]:mt-0 mt-8 py-0', fontClass)}>{children}</h6>,
+
+          p: ({ children }) => {
+            // Detect if paragraph contains block-level elements that can't be inside <p>
+            // This includes YouTube embeds, cloud file previews, and images
+            const hasBlockContent = React.Children.toArray(children).some((child) => {
+              if (!React.isValidElement(child)) return false
+              const props = child.props as { href?: string; src?: string }
+              // Check for YouTube links
+              if (props.href && getYouTubeVideoId(props.href)) return true
+              // Check for cloud URLs
+              if (props.href && isCloudInferenceUrl(props.href)) return true
+              // Check for images
+              if (props.src) return true
+              return false
+            })
+            // Use div for block content to avoid invalid <div> inside <p> nesting
+            return hasBlockContent && !compact ? (
+              <div className={paragraphClass}>{children}</div>
+            ) : (
+              <p className={paragraphClass}>{children}</p>
+            )
+          },
+
+          blockquote: ({ children }) => (
+            <blockquote className={cn('border-l-4 pl-4 my-2 py-0', fontClass)}>{children}</blockquote>
+          ),
+
+          // Lists
+          ul: ({ children }) => <ul className={cn('list-disc list-outside ml-5 my-0 mt-2 py-0', fontClass)}>{children}</ul>,
+          ol: ({ children }) => <ol className={cn('list-decimal list-outside ml-5 my-0 mt-2 py-0', fontClass)}>{children}</ol>,
+          li: ({ children }) => <li className={cn(textSize.li, 'my-0 mt-2 py-0 pl-1', fontClass)}>{children}</li>,
+
+          // Inline elements
+          strong: ({ children }) => <strong className={cn('font-bold', fontClass)}>{children}</strong>,
+          em: ({ children }) => <em className={cn('italic', fontClass)}>{children}</em>,
+
+          code(props) {
+            const { children, className } = props
+            const hasLang = /language-(\w+)/.test(className || '')
+            const hasNewlines = String(children).includes('\n')
+            const isBlock = hasLang || hasNewlines
+
+            if (isBlock) {
+              return <code className={cn(textSize.code, fontClass, className)}>{children}</code>
+            }
+            // Inline code
+            return (
+              <span className="inline bg-muted/30 rounded px-1 text-brand-pink/80">
+                <code className={cn(textSize.code, fontClass)}>{children}</code>
+              </span>
+            )
+          },
+
+          pre: ({ children }) => (
+            <CompactCodeBlock textSize={textSize.pre} className={cn(textSize.pre, fontClass)}>
+              {children}
+            </CompactCodeBlock>
+          ),
+
+          // Links and images
+          a: ({ href, children }) => {
+            if (href && !compact) {
+              // YouTube videos
+              const videoId = getYouTubeVideoId(href)
+              if (videoId) {
+                return <YouTubeEmbed videoId={videoId} />
+              }
+
+              // Cloud video URLs
+              if (isCloudInferenceUrl(href) && isVideoUrl(href)) {
+                return (
+                  <video
+                    src={href}
+                    controls
+                    playsInline
+                    className="my-6 rounded-xl w-full max-w-2xl"
+                  />
+                )
+              }
+
+              // Cloud file previews
+              if (isCloudInferenceUrl(href) && renderFilePreview) {
+                return renderFilePreview({
+                  uri: href,
+                  filename: typeof children === 'string' ? children : 'file',
+                })
+              }
+
+              // Default link
+              return (
+                <a
+                  href={href}
+                  className={cn('hover:underline', fontClass)}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {children}
+                </a>
+              )
+            }
+            return <>{children}</>
+          },
+
+          img: ({ src, alt }) => {
+            if (!src || typeof src !== 'string') return null
+
+            if (isCloudInferenceUrl(src) && renderCloudImage) {
+              return renderCloudImage({ src, alt })
+            }
+
+            return (
+              <ZoomableImage
+                src={src}
+                alt={alt}
+                className={cn('max-w-full h-auto my-0 py-0 rounded', fontClass)}
+              />
+            )
+          },
+
+          // Table elements
+          table: ({ children }) => (
+            <div className={cn('min-w-0 overflow-x-auto my-2 border border-border rounded-md', fontClass)}>
+              <table className="">{children}</table>
+            </div>
+          ),
+          thead: ({ children }) => <thead className={cn('border-b border-border', fontClass)}>{children}</thead>,
+          tbody: ({ children }) => <tbody className={fontClass}>{children}</tbody>,
+          tr: ({ children }) => <tr className="border-b border-border last:border-0">{children}</tr>,
+          th: ({ children }) => <th className={cn('px-3 py-1.5 text-left text-xs text-muted-foreground', fontClass)}>{children}</th>,
+          td: ({ children }) => <td className={cn('px-3 py-1.5 text-sm', fontClass)}>{children}</td>,
+
+          // Horizontal rule
+          hr: () => <hr className="my-2 border-t" />,
+
+          // Strikethrough
+          s: ({ children }) => <s className="line-through">{children}</s>,
+        }}
+      >
+        {processedContent}
+      </Markdown>
+    </div>
+  )
+})

package/src/markdown/youtube-embed.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { cn } from '../utils'
+import { useState } from 'react'
+import GlowLoaderSmMono from '../components/glow-loader-sm-mono'
+
+interface YouTubeEmbedProps {
+  videoId: string
+  title?: string
+  className?: string
+}
+
+export function YouTubeEmbed({ videoId, title, className }: YouTubeEmbedProps) {
+  const [isLoading, setIsLoading] = useState(true)
+
+  return (
+    <div className={cn(
+      'flex flex-col space-y-4 w-full h-full relative my-6 rounded-xl overflow-hidden border border-border',
+      className
+    )}>
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-muted">
+          <GlowLoaderSmMono width={32} height={32} className="opacity-60" />
+        </div>
+      )}
+      <iframe
+        src={`https://www.youtube.com/embed/${videoId}`}
+        title={title || 'YouTube video player'}
+        frameBorder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        referrerPolicy="strict-origin-when-cross-origin"
+        allowFullScreen
+        loading="lazy"
+        onLoad={() => setIsLoading(false)}
+        className={cn(
+          'w-full aspect-video h-full bg-transparent transition-opacity duration-300',
+          isLoading ? 'opacity-0' : 'opacity-100'
+        )}
+      />
+    </div>
+  )
+}
+

package/src/og/image.ts

@@ -0,0 +1,312 @@
+/**
+ * Fetching artwork for OG cards, safely.
+ *
+ * Card backgrounds come from app metadata (`images.card`, `images.banner`),
+ * which any app owner can set to any string. INC-2026-11-02: card URLs aimed
+ * at internal services (redis, postgres, the metadata endpoint), at open
+ * redirectors, and at a 17000x17000 PNG decompression bomb that took the app
+ * container from 125 MiB to 1.34 GB inside satori/resvg.
+ *
+ * So an image is used only when all of these hold, and the card renders
+ * without it otherwise:
+ * - the URL is https on the default port, with a host on the allowlist (our
+ *   storage and CDN hosts by default; never an IP literal);
+ * - the response is not a redirect, arrives within the timeout, and its body
+ *   stays under the byte cap while it streams;
+ * - the declared content type and the file's own signature are PNG, JPEG,
+ *   WebP or GIF (no SVG);
+ * - the dimensions read from the file header are within the pixel limits.
+ */
+
+export const DEFAULT_OG_IMAGE_HOSTS: readonly string[] = ['cloud.inference.sh', 'cdn.inference.sh']
+
+export const OG_IMAGE_LIMITS = {
+  timeoutMs: 5000,
+  maxBytes: 5 * 1024 * 1024,
+  maxDimension: 4096,
+  maxPixels: 4096 * 4096,
+} as const
+
+export type OgImageType = 'image/png' | 'image/jpeg' | 'image/webp' | 'image/gif'
+
+const ALLOWED_TYPES: ReadonlySet<string> = new Set<OgImageType>([
+  'image/png',
+  'image/jpeg',
+  'image/webp',
+  'image/gif',
+])
+
+// ---------------------------------------------------------------------------
+// Host allowlist
+// ---------------------------------------------------------------------------
+
+const HOSTNAME_RE = /^(?=.{1,253}$)([a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,63}$/
+
+let allowedHosts: ReadonlySet<string> = new Set(DEFAULT_OG_IMAGE_HOSTS)
+
+/**
+ * Parse an allowlist from config, e.g. the OG_IMAGE_HOSTS env var: hostnames
+ * separated by commas or whitespace. Unset or blank gives the defaults. A
+ * malformed entry (scheme, port, path, IP literal) throws, so a bad value
+ * stops the server at startup instead of silently allowing nothing.
+ */
+export function parseOgImageHosts(value: string | undefined | null): string[] {
+  const entries = (value ?? '').split(/[\s,]+/).map((h) => h.trim().toLowerCase()).filter(Boolean)
+  if (entries.length === 0) return [...DEFAULT_OG_IMAGE_HOSTS]
+  for (const host of entries) {
+    if (!HOSTNAME_RE.test(host)) {
+      throw new Error(`OG_IMAGE_HOSTS: "${host}" is not a bare hostname`)
+    }
+  }
+  return entries
+}
+
+/** Replace the hosts card images may be fetched from (process-wide). */
+export function configureOgImageHosts(hosts: readonly string[]): void {
+  allowedHosts = new Set(hosts.map((h) => h.toLowerCase()))
+}
+
+export function getOgImageHosts(): string[] {
+  return [...allowedHosts]
+}
+
+/** The URL if it may be fetched under the allowlist, else the reason it may not. */
+export function checkOgImageUrl(
+  raw: string,
+  hosts: ReadonlySet<string> = allowedHosts,
+): { ok: true; url: URL } | { ok: false; reason: string } {
+  let url: URL
+  try {
+    url = new URL(raw)
+  } catch {
+    return { ok: false, reason: 'unparseable url' }
+  }
+  if (url.protocol !== 'https:') return { ok: false, reason: 'not https' }
+  if (url.username || url.password) return { ok: false, reason: 'credentials in url' }
+  if (url.port !== '') return { ok: false, reason: 'non-default port' }
+  // URL normalises IPv4 forms (decimal, hex, octal) to dotted quads and keeps
+  // IPv6 in brackets, so these catch every IP literal.
+  if (url.hostname.startsWith('[') || /^\d+\.\d+\.\d+\.\d+$/.test(url.hostname)) {
+    return { ok: false, reason: 'ip literal host' }
+  }
+  if (!hosts.has(url.hostname.toLowerCase())) return { ok: false, reason: 'host not allowed' }
+  return { ok: true, url }
+}
+
+// ---------------------------------------------------------------------------
+// Header parsing
+// ---------------------------------------------------------------------------
+
+export interface ImageInfo {
+  type: OgImageType
+  width: number
+  height: number
+}
+
+const u16be = (b: Uint8Array, o: number) => (b[o] << 8) | b[o + 1]
+const u16le = (b: Uint8Array, o: number) => b[o] | (b[o + 1] << 8)
+const u24le = (b: Uint8Array, o: number) => b[o] | (b[o + 1] << 8) | (b[o + 2] << 16)
+const u32be = (b: Uint8Array, o: number) =>
+  ((b[o] << 24) >>> 0) + ((b[o + 1] << 16) | (b[o + 2] << 8) | b[o + 3])
+const ascii = (b: Uint8Array, o: number, n: number) =>
+  String.fromCharCode(...b.subarray(o, o + n))
+
+const PNG_SIG = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]
+
+function pngInfo(b: Uint8Array): ImageInfo | null {
+  if (b.length < 24 || !PNG_SIG.every((v, i) => b[i] === v)) return null
+  if (ascii(b, 12, 4) !== 'IHDR') return null
+  return { type: 'image/png', width: u32be(b, 16), height: u32be(b, 20) }
+}
+
+function jpegInfo(b: Uint8Array): ImageInfo | null {
+  if (b.length < 4 || b[0] !== 0xff || b[1] !== 0xd8) return null
+  let o = 2
+  while (o + 4 <= b.length) {
+    if (b[o] !== 0xff) return null
+    const marker = b[o + 1]
+    if (marker === 0xff) {
+      o += 1 // fill byte
+      continue
+    }
+    // Standalone markers carry no length.
+    if (marker === 0x01 || (marker >= 0xd0 && marker <= 0xd7)) {
+      o += 2
+      continue
+    }
+    if (marker === 0xd9 || marker === 0xda) return null // EOI / SOS before any SOF
+    const len = u16be(b, o + 2)
+    if (len < 2) return null
+    // SOF0-SOF15, minus DHT (C4), JPG (C8) and DAC (CC).
+    if (marker >= 0xc0 && marker <= 0xcf && marker !== 0xc4 && marker !== 0xc8 && marker !== 0xcc) {
+      if (o + 9 > b.length) return null
+      return { type: 'image/jpeg', height: u16be(b, o + 5), width: u16be(b, o + 7) }
+    }
+    o += 2 + len
+  }
+  return null
+}
+
+function webpInfo(b: Uint8Array): ImageInfo | null {
+  if (b.length < 30 || ascii(b, 0, 4) !== 'RIFF' || ascii(b, 8, 4) !== 'WEBP') return null
+  const chunk = ascii(b, 12, 4)
+  if (chunk === 'VP8 ') {
+    // Frame tag (3 bytes), then the start code 9d 01 2a.
+    if (b[23] !== 0x9d || b[24] !== 0x01 || b[25] !== 0x2a) return null
+    return { type: 'image/webp', width: u16le(b, 26) & 0x3fff, height: u16le(b, 28) & 0x3fff }
+  }
+  if (chunk === 'VP8L') {
+    if (b[20] !== 0x2f) return null
+    const bits = b[21] | (b[22] << 8) | (b[23] << 16) | (b[24] << 24)
+    return { type: 'image/webp', width: (bits & 0x3fff) + 1, height: ((bits >>> 14) & 0x3fff) + 1 }
+  }
+  if (chunk === 'VP8X') {
+    return { type: 'image/webp', width: u24le(b, 24) + 1, height: u24le(b, 27) + 1 }
+  }
+  return null
+}
+
+/**
+ * GIF: the logical screen size, and also every frame's own size, because a
+ * frame descriptor may claim more than the screen and decoders allocate for it.
+ * Reports the largest width and height seen.
+ */
+function gifInfo(b: Uint8Array): ImageInfo | null {
+  if (b.length < 13) return null
+  const sig = ascii(b, 0, 6)
+  if (sig !== 'GIF87a' && sig !== 'GIF89a') return null
+  let width = u16le(b, 6)
+  let height = u16le(b, 8)
+  let o = 13
+  if (b[10] & 0x80) o += 3 * (1 << ((b[10] & 0x07) + 1))
+  const skipSubBlocks = () => {
+    while (o < b.length) {
+      const n = b[o]
+      o += 1 + n
+      if (n === 0) return true
+    }
+    return false
+  }
+  while (o < b.length) {
+    const block = b[o]
+    if (block === 0x3b) break // trailer
+    if (block === 0x21) {
+      o += 2 // introducer + label
+      if (!skipSubBlocks()) break
+    } else if (block === 0x2c) {
+      if (o + 10 > b.length) break
+      width = Math.max(width, u16le(b, o + 5))
+      height = Math.max(height, u16le(b, o + 7))
+      const flags = b[o + 9]
+      o += 10
+      if (flags & 0x80) o += 3 * (1 << ((flags & 0x07) + 1))
+      o += 1 // LZW minimum code size
+      if (!skipSubBlocks()) break
+    } else {
+      return null
+    }
+  }
+  return { type: 'image/gif', width, height }
+}
+
+/** Format and pixel size from the file header, or null if not a supported raster. */
+export function readImageInfo(bytes: Uint8Array): ImageInfo | null {
+  return pngInfo(bytes) ?? jpegInfo(bytes) ?? webpInfo(bytes) ?? gifInfo(bytes)
+}
+
+// ---------------------------------------------------------------------------
+// Fetch
+// ---------------------------------------------------------------------------
+
+export class OgImageRejected extends Error {}
+
+export interface FetchOgImageOptions {
+  /** Overrides the configured allowlist for this call. */
+  allowedHosts?: readonly string[]
+  timeoutMs?: number
+  maxBytes?: number
+  maxDimension?: number
+  maxPixels?: number
+}
+
+/** Read a body, aborting as soon as it passes maxBytes. */
+async function readCapped(res: Response, maxBytes: number, controller: AbortController) {
+  const declared = Number(res.headers.get('content-length'))
+  if (Number.isFinite(declared) && declared > maxBytes) {
+    throw new OgImageRejected(`content-length ${declared} over ${maxBytes}`)
+  }
+  if (!res.body) throw new OgImageRejected('empty body')
+  const reader = res.body.getReader()
+  const chunks: Uint8Array[] = []
+  let total = 0
+  for (;;) {
+    const { done, value } = await reader.read()
+    if (done) break
+    total += value.byteLength
+    if (total > maxBytes) {
+      controller.abort()
+      await reader.cancel().catch(() => {})
+      throw new OgImageRejected(`body over ${maxBytes} bytes`)
+    }
+    chunks.push(value)
+  }
+  const out = new Uint8Array(total)
+  let o = 0
+  for (const c of chunks) {
+    out.set(c, o)
+    o += c.byteLength
+  }
+  return out
+}
+
+/**
+ * Fetch a card image under the rules at the top of this file. Returns the
+ * bytes and their verified format; throws OgImageRejected (or a fetch/abort
+ * error) otherwise.
+ */
+export async function fetchOgImage(
+  raw: string,
+  opts: FetchOgImageOptions = {},
+): Promise<{ bytes: Uint8Array; info: ImageInfo }> {
+  const hosts = opts.allowedHosts ? new Set(opts.allowedHosts.map((h) => h.toLowerCase())) : allowedHosts
+  const checked = checkOgImageUrl(raw, hosts)
+  if (!checked.ok) throw new OgImageRejected(checked.reason)
+
+  const maxBytes = opts.maxBytes ?? OG_IMAGE_LIMITS.maxBytes
+  const maxDimension = opts.maxDimension ?? OG_IMAGE_LIMITS.maxDimension
+  const maxPixels = opts.maxPixels ?? OG_IMAGE_LIMITS.maxPixels
+  const controller = new AbortController()
+  const timer = setTimeout(() => controller.abort(), opts.timeoutMs ?? OG_IMAGE_LIMITS.timeoutMs)
+  try {
+    const res = await fetch(checked.url, { redirect: 'error', signal: controller.signal })
+    if (res.type === 'opaqueredirect' || (res.status >= 300 && res.status < 400)) {
+      throw new OgImageRejected(`redirect ${res.status}`)
+    }
+    if (!res.ok) throw new OgImageRejected(`status ${res.status}`)
+    const declaredType = (res.headers.get('content-type') ?? '').split(';')[0].trim().toLowerCase()
+    if (!ALLOWED_TYPES.has(declaredType)) {
+      throw new OgImageRejected(`content-type ${declaredType || 'missing'}`)
+    }
+    const bytes = await readCapped(res, maxBytes, controller)
+    const info = readImageInfo(bytes)
+    if (!info) throw new OgImageRejected('unrecognised image header')
+    if (info.width === 0 || info.height === 0) throw new OgImageRejected('zero dimension')
+    if (info.width > maxDimension || info.height > maxDimension || info.width * info.height > maxPixels) {
+      throw new OgImageRejected(`dimensions ${info.width}x${info.height}`)
+    }
+    return { bytes, info }
+  } finally {
+    clearTimeout(timer)
+  }
+}
+
+/** The URL for a log line: origin and path only, never the query. */
+export function redactUrl(raw: string): string {
+  try {
+    const u = new URL(raw)
+    const s = `${u.protocol}//${u.host}${u.pathname}`
+    return s.length > 160 ? `${s.slice(0, 160)}...` : s
+  } catch {
+    return '<unparseable>'
+  }
+}