@otto-assistant/bridge 0.4.92

package/src/html-components.ts

@@ -0,0 +1,181 @@
+// HTML fragment parser for Discord-renderable components.
+// Supports a small reusable subset today (text + button) so tables and other
+// CV2 renderers can map inline HTML into Discord UI elements.
+
+import { DomHandler, ElementType, Parser } from 'htmlparser2'
+import type { ChildNode, Element, Text } from 'domhandler'
+
+export type HtmlTextRenderable = {
+  type: 'text'
+  text: string
+}
+
+export type HtmlButtonRenderable = {
+  type: 'button'
+  id: string
+  label: string
+  variant: 'secondary' | 'primary' | 'success' | 'danger'
+  disabled: boolean
+}
+
+export type HtmlRenderable = HtmlTextRenderable | HtmlButtonRenderable
+
+export function parseInlineHtmlRenderables({
+  html,
+}: {
+  html: string
+}): HtmlRenderable[] | Error {
+  let parseError: Error | undefined
+  let domNodes: ChildNode[] = []
+
+  const handler = new DomHandler(
+    (error, dom) => {
+      if (error) {
+        parseError = new Error('Failed to parse HTML fragment', {
+          cause: error,
+        })
+        return
+      }
+      domNodes = dom
+    },
+    {
+      withStartIndices: false,
+      withEndIndices: false,
+    },
+  )
+
+  const parser = new Parser(handler, {
+    xmlMode: false,
+    decodeEntities: false,
+    recognizeSelfClosing: true,
+  })
+  parser.write(html)
+  parser.end()
+
+  if (parseError) {
+    return parseError
+  }
+
+  return parseRenderableNodes({ nodes: domNodes })
+}
+
+function parseRenderableNodes({
+  nodes,
+}: {
+  nodes: ChildNode[]
+}): HtmlRenderable[] | Error {
+  const renderables: HtmlRenderable[] = []
+
+  for (const node of nodes) {
+    if (node.type === ElementType.Text) {
+      const textNode = node as Text
+      renderables.push({
+        type: 'text',
+        text: textNode.data,
+      })
+      continue
+    }
+
+    if (node.type === ElementType.Tag) {
+      const element = node as Element
+      if (element.name !== 'button') {
+        return new Error(`Unsupported HTML tag: <${element.name}>`)
+      }
+
+      const buttonRenderable = parseButtonElement({ element })
+      if (buttonRenderable instanceof Error) {
+        return buttonRenderable
+      }
+
+      renderables.push(buttonRenderable)
+      continue
+    }
+
+    if (node.type === ElementType.Comment) {
+      continue
+    }
+
+    return new Error(`Unsupported HTML node type: ${node.type}`)
+  }
+
+  return renderables
+}
+
+function parseButtonElement({
+  element,
+}: {
+  element: Element
+}): HtmlButtonRenderable | Error {
+  const id = element.attribs.id?.trim()
+  if (!id) {
+    return new Error('<button> is missing required id attribute')
+  }
+
+  const label = extractNodeText({ nodes: element.children })
+    .replace(/\s+/g, ' ')
+    .trim()
+  if (!label) {
+    return new Error(`<button id="${id}"> is missing label text`)
+  }
+
+  const variant = normalizeButtonVariant({
+    value: element.attribs.variant,
+  })
+  if (variant instanceof Error) {
+    return variant
+  }
+
+  return {
+    type: 'button',
+    id,
+    label,
+    variant,
+    disabled: 'disabled' in element.attribs,
+  }
+}
+
+function normalizeButtonVariant({
+  value,
+}: {
+  value?: string
+}): HtmlButtonRenderable['variant'] | Error {
+  if (!value) {
+    return 'secondary'
+  }
+
+  if (value === 'secondary') {
+    return value
+  }
+  if (value === 'primary') {
+    return value
+  }
+  if (value === 'success') {
+    return value
+  }
+  if (value === 'danger') {
+    return value
+  }
+
+  return new Error(`Unsupported <button> variant: ${value}`)
+}
+
+function extractNodeText({
+  nodes,
+}: {
+  nodes: ChildNode[]
+}): string {
+  const parts: string[] = []
+
+  for (const node of nodes) {
+    if (node.type === ElementType.Text) {
+      parts.push((node as Text).data)
+      continue
+    }
+
+    if (node.type === ElementType.Tag) {
+      parts.push(extractNodeText({ nodes: (node as Element).children }))
+    }
+  }
+
+  return parts.join('')
+}

package/src/image-optimizer-plugin.ts

@@ -0,0 +1,194 @@
+// Optimizes oversized images before they reach the LLM API.
+// Prevents "image dimensions exceed max allowed" errors from Anthropic/Google/OpenAI.
+// Hooks into tool.execute.after (read) and experimental.chat.messages.transform (clipboard paste).
+// Uses sharp to resize images > 2000px and compress images > 4MB.
+// Vendored from https://github.com/kargnas/opencode-large-image-optimizer, simplified to zero-config.
+
+import type { Plugin } from '@opencode-ai/plugin'
+
+// Conservative safe floor for Anthropic many-image requests (20+ images = 2000px limit).
+// OpenCode resends history so image counts accumulate across turns — 2000px is safest.
+const MAX_DIMENSION = 2000
+// 4MB safe margin under Anthropic's 5MB limit
+const MAX_FILE_SIZE = 4 * 1024 * 1024
+const SUPPORTED_MIMES = new Set([
+  'image/png',
+  'image/jpeg',
+  'image/jpg',
+  'image/gif',
+  'image/webp',
+])
+
+// sharp is an optionalDependency — lazy-load to avoid breaking all plugins if missing
+type SharpFn = (input?: Buffer | string) => import('sharp').Sharp
+
+let sharpFactory: SharpFn | null | undefined
+
+async function getSharp(): Promise<SharpFn | null> {
+  if (sharpFactory !== undefined) {
+    return sharpFactory
+  }
+  try {
+    const mod = await import('sharp')
+    // sharp uses `export =` so it lands on .default in ESM interop
+    const fn = typeof mod === 'function' ? mod : (mod as { default: SharpFn }).default
+    if (typeof fn === 'function') {
+      sharpFactory = fn
+    } else {
+      sharpFactory = null
+    }
+  } catch {
+    sharpFactory = null
+  }
+  return sharpFactory
+}
+
+function extractBase64Data(dataUrl: string): string | null {
+  const match = dataUrl.match(/^data:[^;]+;base64,(.+)$/s)
+  if (match?.[1]) {
+    return match[1]
+  }
+  // raw base64 string (no data: prefix)
+  if (/^[A-Za-z0-9+/]+={0,2}$/.test(dataUrl)) {
+    return dataUrl
+  }
+  return null
+}
+
+interface OptimizeResult {
+  dataUrl: string
+  mime: string
+}
+
+async function optimizeImage(
+  dataUrl: string,
+  mime: string,
+): Promise<OptimizeResult | null> {
+  const sharp = await getSharp()
+  if (!sharp) {
+    return null
+  }
+
+  const rawBase64 = extractBase64Data(dataUrl)
+  if (!rawBase64) {
+    return null
+  }
+
+  const inputBuffer = Buffer.from(rawBase64, 'base64')
+  if (inputBuffer.length === 0) {
+    return null
+  }
+
+  const metadata = await sharp(inputBuffer).metadata()
+  const width = metadata.width || 0
+  const height = metadata.height || 0
+  if (width === 0 || height === 0) {
+    return null
+  }
+
+  const needsResize = width > MAX_DIMENSION || height > MAX_DIMENSION
+  const needsCompress = inputBuffer.length > MAX_FILE_SIZE
+  if (!needsResize && !needsCompress) {
+    return null
+  }
+
+  let pipeline = sharp(inputBuffer)
+  let outputMime = mime
+
+  if (needsResize) {
+    pipeline = pipeline.resize(MAX_DIMENSION, MAX_DIMENSION, {
+      fit: 'inside',
+      withoutEnlargement: true,
+    })
+  }
+
+  let outputBuffer = await pipeline.toBuffer()
+
+  // if still over 4MB, convert to JPEG with progressive quality reduction
+  if (outputBuffer.length > MAX_FILE_SIZE) {
+    for (const quality of [100, 90, 80, 70]) {
+      outputBuffer = await sharp(outputBuffer)
+        .jpeg({ quality, mozjpeg: true })
+        .toBuffer()
+      outputMime = 'image/jpeg'
+      if (outputBuffer.length <= MAX_FILE_SIZE) {
+        break
+      }
+    }
+  }
+
+  return {
+    dataUrl: `data:${outputMime};base64,${outputBuffer.toString('base64')}`,
+    mime: outputMime,
+  }
+}
+
+// runtime guard — tool.execute.after output type doesn't declare attachments
+function hasAttachments(
+  value: unknown,
+): value is { attachments: Array<{ mime?: string; url?: string }> } {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'attachments' in value &&
+    Array.isArray((value as { attachments?: unknown }).attachments)
+  )
+}
+
+const imageOptimizerPlugin: Plugin = async () => {
+  return {
+    'tool.execute.after': async (input, output) => {
+      const tool = input.tool.toLowerCase()
+
+      // read tool: optimize image attachments
+      if (tool === 'read' && hasAttachments(output)) {
+        for (const att of output.attachments) {
+          if (
+            !att.mime ||
+            !att.url ||
+            !SUPPORTED_MIMES.has(att.mime.toLowerCase())
+          ) {
+            continue
+          }
+          const result = await optimizeImage(att.url, att.mime).catch(
+            () => null,
+          )
+          if (result) {
+            att.url = result.dataUrl
+            att.mime = result.mime
+          }
+        }
+      }
+
+    },
+
+    // clipboard paste: optimize file parts in message history
+    'experimental.chat.messages.transform': async (_input, output) => {
+      if (!output.messages || !Array.isArray(output.messages)) {
+        return
+      }
+      for (const msg of output.messages) {
+        if (!msg.parts || !Array.isArray(msg.parts)) {
+          continue
+        }
+        for (const part of msg.parts) {
+          if (part.type !== 'file') {
+            continue
+          }
+          if (!SUPPORTED_MIMES.has(part.mime.toLowerCase())) {
+            continue
+          }
+          const result = await optimizeImage(part.url, part.mime).catch(
+            () => null,
+          )
+          if (result) {
+            part.url = result.dataUrl
+            part.mime = result.mime
+          }
+        }
+      }
+    },
+  }
+}
+
+export { imageOptimizerPlugin }

package/src/image-utils.ts

@@ -0,0 +1,149 @@
+// Image processing utilities for Discord attachments.
+// Uses sharp (optional) to resize large images and heic-convert (optional) for HEIC support.
+// Falls back gracefully if dependencies are not available.
+
+import { createLogger, LogPrefix } from './logger.js'
+
+const logger = createLogger(LogPrefix.FORMATTING)
+
+const MAX_DIMENSION = 1500
+const HEIC_MIME_TYPES = [
+  'image/heic',
+  'image/heif',
+  'image/heic-sequence',
+  'image/heif-sequence',
+]
+
+type SharpModule = typeof import('sharp')
+type HeicConvertFn = (options: {
+  buffer: ArrayBufferLike
+  format: 'JPEG' | 'PNG'
+  quality?: number
+}) => Promise<ArrayBuffer>
+
+let sharpModule: SharpModule | null | undefined = undefined
+let heicConvertModule: HeicConvertFn | null | undefined = undefined
+
+async function tryLoadSharp(): Promise<SharpModule | null> {
+  if (sharpModule !== undefined) {
+    return sharpModule
+  }
+  try {
+    sharpModule = (await import('sharp')).default as unknown as SharpModule
+    logger.log('sharp loaded successfully')
+    return sharpModule
+  } catch {
+    logger.log('sharp not available, images will be sent at original size')
+    sharpModule = null
+    return null
+  }
+}
+
+async function tryLoadHeicConvert(): Promise<HeicConvertFn | null> {
+  if (heicConvertModule !== undefined) {
+    return heicConvertModule
+  }
+  try {
+    const mod = await import('heic-convert')
+    heicConvertModule = mod.default as HeicConvertFn
+    logger.log('heic-convert loaded successfully')
+    return heicConvertModule
+  } catch {
+    logger.log('heic-convert not available, HEIC images will be sent as-is')
+    heicConvertModule = null
+    return null
+  }
+}
+
+function isHeicMime(mime: string): boolean {
+  return HEIC_MIME_TYPES.includes(mime.toLowerCase())
+}
+
+export async function processImage(
+  buffer: Buffer,
+  mime: string,
+): Promise<{ buffer: Buffer; mime: string }> {
+  // Skip non-images (PDFs, etc.)
+  if (!mime.startsWith('image/')) {
+    return { buffer, mime }
+  }
+
+  let workingBuffer = buffer
+  let workingMime = mime
+
+  // Handle HEIC conversion first (before sharp, since sharp doesn't support HEIC)
+  if (isHeicMime(mime)) {
+    const heicConvert = await tryLoadHeicConvert()
+    if (heicConvert) {
+      try {
+        const outputArrayBuffer = await heicConvert({
+          buffer: workingBuffer.buffer.slice(
+            workingBuffer.byteOffset,
+            workingBuffer.byteOffset + workingBuffer.byteLength,
+          ),
+          format: 'JPEG',
+          quality: 0.85,
+        })
+        workingBuffer = Buffer.from(outputArrayBuffer)
+        workingMime = 'image/jpeg'
+        logger.log(
+          `Converted HEIC to JPEG (${buffer.length} → ${workingBuffer.length} bytes)`,
+        )
+      } catch (error) {
+        logger.error('Failed to convert HEIC, sending original:', error)
+        return { buffer, mime }
+      }
+    } else {
+      // No heic-convert available, return original (LLM might not support it)
+      logger.log(
+        'HEIC image detected but heic-convert not available, sending as-is',
+      )
+      return { buffer, mime }
+    }
+  }
+
+  // Now process with sharp (resize + ensure JPEG output)
+  const sharp = await tryLoadSharp()
+  if (!sharp) {
+    return { buffer: workingBuffer, mime: workingMime }
+  }
+
+  try {
+    const image = sharp(workingBuffer)
+    const metadata = await image.metadata()
+    const { width, height } = metadata
+
+    const needsResize =
+      width && height && (width > MAX_DIMENSION || height > MAX_DIMENSION)
+
+    if (!needsResize) {
+      // Still convert to JPEG for consistency (unless already JPEG from HEIC conversion)
+      const outputBuffer = await image.jpeg({ quality: 85 }).toBuffer()
+      logger.log(
+        `Converted image to JPEG: ${width}x${height} (${outputBuffer.length} bytes)`,
+      )
+      return { buffer: outputBuffer, mime: 'image/jpeg' }
+    }
+
+    // Resize and convert to JPEG
+    const outputBuffer = await image
+      .resize(MAX_DIMENSION, MAX_DIMENSION, {
+        fit: 'inside',
+        withoutEnlargement: true,
+      })
+      .jpeg({ quality: 85 })
+      .toBuffer()
+
+    logger.log(
+      `Resized image: ${width}x${height} → max ${MAX_DIMENSION}px (${outputBuffer.length} bytes)`,
+    )
+
+    return { buffer: outputBuffer, mime: 'image/jpeg' }
+  } catch (error) {
+    logger.error(
+      'Failed to process image with sharp, using working buffer:',
+      error,
+    )
+    return { buffer: workingBuffer, mime: workingMime }
+  }
+}