@webmcp-auto-ui/agent 2.5.25 → 2.5.26

package/src/providers/litert.worker.ts

@@ -1,294 +0,0 @@
-/**
- * LiteRT Worker — MediaPipe LlmInference backend
- * Uses @mediapipe/tasks-genai with WebGPU for Gemma 4 models
- *
- * Messages IN:  { type: 'init', model?: string }
- *               { type: 'chat', id: string, prompt: string, maxTokens?: number, temperature?: number, topK?: number }
- *               { type: 'abort', id: string }
- * Messages OUT: { type: 'progress', progress: number, status: string, loaded?: number, total?: number }
- *               { type: 'ready' }
- *               { type: 'token', id: string, token: string }
- *               { type: 'done', id: string, text: string, stats?: { tokensPerSec: number, totalTokens: number, latencyMs: number } }
- *               { type: 'error', id: string | null, message: string }
- */
-
-/**
- * CRITICAL POLYFILL for module workers.
- *
- * @mediapipe/tasks-genai loads WASM support scripts with this runtime check:
- *
- *   async function lr(url) {
- *     if (typeof importScripts !== "function") {
- *       document.createElement("script") …   // crashes in a worker (no DOM)
- *     }
- *     try { importScripts(url) } catch (e) {
- *       if (!(e instanceof TypeError)) throw e;
- *       await self.import(url);               // dynamic-import fallback
- *     }
- *   }
- *
- * In ES module workers `importScripts` is undefined, so the library falls
- * into the DOM branch and crashes.  We install a stub that throws TypeError
- * so the library takes the worker branch and reaches `self.import()` which
- * works perfectly in module workers.
- *
- * This works because `lr()` checks `typeof importScripts` at CALL TIME (when
- * FilesetResolver.forGenAiTasks() runs), not at module parse time.  The
- * polyfill is set up synchronously at module load, well before any API call.
- */
-if (typeof (globalThis as any).importScripts !== 'function') {
-  (globalThis as any).importScripts = (..._args: string[]) => {
-    throw new TypeError('importScripts is not supported in module workers');
-  };
-}
-// MediaPipe falls back to `self.import(url)` which doesn't exist in Chrome.
-// Provide it as an alias to dynamic `import()`.
-if (typeof (self as any).import !== 'function') {
-  (self as any).import = (url: string) => import(/* @vite-ignore */ url);
-}
-
-import { FilesetResolver, LlmInference } from '@mediapipe/tasks-genai';
-
-const LITERT_MODELS: Record<string, { repo: string; file: string }> = {
-  'gemma-e2b': { repo: 'litert-community/gemma-4-E2B-it-litert-lm', file: 'gemma-4-E2B-it-web.task' },
-  'gemma-e4b': { repo: 'litert-community/gemma-4-E4B-it-litert-lm', file: 'gemma-4-E4B-it-web.task' },
-};
-
-let inference: LlmInference | null = null;
-let cancelRequested = false;
-
-/**
- * Download model with OPFS caching, returning a ReadableStream.
- * Follows the same streaming pattern as the official MediaPipe sample:
- * the stream reader is passed directly to LlmInference as modelAssetBuffer
- * to avoid buffering multi-GB models entirely in RAM.
- */
-async function getModelStream(
-  url: string,
-  filename: string,
-  progressCb: (p: number, loaded: number, total: number) => void,
-): Promise<ReadableStream<Uint8Array>> {
-  const root = await navigator.storage.getDirectory();
-  const modelsDir = await root.getDirectoryHandle('webmcp-models', { create: true });
-
-  // ── OPFS cache hit ───────────────────────────────────────────────
-  try {
-    const cached = await modelsDir.getFileHandle(filename);
-    const file = await cached.getFile();
-    // Verify the file is complete (size file stores expected size)
-    try {
-      const sizeHandle = await modelsDir.getFileHandle(filename + '_size');
-      const sizeFile = await sizeHandle.getFile();
-      const expectedSize = parseInt(await sizeFile.text());
-      if (file.size !== expectedSize) {
-        // Corrupt cache — remove and re-download
-        await modelsDir.removeEntry(filename);
-        await modelsDir.removeEntry(filename + '_size');
-        throw new Error('cache size mismatch');
-      }
-    } catch {
-      // No size file but model exists — use it (legacy cache)
-    }
-    progressCb(1, file.size, file.size);
-    return file.stream() as ReadableStream<Uint8Array>;
-  } catch {
-    // Cache miss — download from network
-  }
-
-  // ── Network download ─────────────────────────────────────────────
-  // HEAD request first to get content-length for progress
-  let expectedSize = 0;
-  try {
-    const head = await fetch(url, { method: 'HEAD' });
-    if (head.ok) expectedSize = parseInt(head.headers.get('content-length') ?? '0', 10);
-  } catch { /* non-fatal */ }
-
-  const response = await fetch(url);
-  if (!response.ok) throw new Error(`Download failed: ${response.status} ${response.statusText}`);
-  if (!response.body) throw new Error('Response body is null');
-
-  const total = expectedSize || parseInt(response.headers.get('content-length') ?? '0', 10);
-
-  // Tee: one stream for consumer, one for background OPFS caching
-  const [streamForConsumer, streamForCache] = response.body.tee();
-
-  // Background cache (non-blocking, fire-and-forget)
-  (async () => {
-    try {
-      // Write expected size first
-      const sizeHandle = await modelsDir.getFileHandle(filename + '_size', { create: true });
-      const sizeWritable = await sizeHandle.createWritable();
-      await sizeWritable.write(new TextEncoder().encode(String(total)));
-      await sizeWritable.close();
-
-      const handle = await modelsDir.getFileHandle(filename, { create: true });
-      const writable = await handle.createWritable();
-      await streamForCache.pipeTo(writable);
-    } catch {
-      // OPFS write failure is non-fatal — model still usable from stream
-      try {
-        await modelsDir.removeEntry(filename).catch(() => {});
-        await modelsDir.removeEntry(filename + '_size').catch(() => {});
-      } catch { /* ignore cleanup errors */ }
-    }
-  })();
-
-  // Wrap with progress reporting
-  let loaded = 0;
-  const progressTransform = new TransformStream<Uint8Array, Uint8Array>({
-    transform(chunk, controller) {
-      loaded += chunk.length;
-      progressCb(total > 0 ? loaded / total : 0, loaded, total);
-      controller.enqueue(chunk);
-    },
-  });
-
-  return streamForConsumer.pipeThrough(progressTransform);
-}
-
-self.onmessage = async (e: MessageEvent) => {
-  const { type, id, model: modelId, prompt } = e.data as {
-    type: string; id?: string; model?: string; prompt?: string;
-  };
-
-  if (type === 'init') {
-    try {
-      const key = modelId ?? 'gemma-e2b';
-      const { repo, file } = LITERT_MODELS[key] ?? LITERT_MODELS['gemma-e2b'];
-      const url = `https://huggingface.co/${repo}/resolve/main/${file}`;
-
-      self.postMessage({ type: 'progress', progress: 0, status: 'downloading', loaded: 0, total: 0 });
-
-      const modelStream = await getModelStream(url, file, (p, loaded, total) => {
-        self.postMessage({ type: 'progress', progress: p, status: 'downloading', loaded, total });
-      });
-
-      self.postMessage({ type: 'progress', progress: 1, status: 'initializing', loaded: 0, total: 0 });
-
-      // Resolve the GenAI WASM fileset from CDN (pinned version).
-      // Second arg = true → use the ES module variant (genai_wasm_module_internal.js)
-      // so that `self.import()` works correctly in the module worker fallback path.
-      const genaiFileset = await FilesetResolver.forGenAiTasks(
-        'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai@0.10.27/wasm',
-        /* useModuleVariant */ true,
-      );
-
-      // WebGPU device is required for LiteRT models
-      const gpuDevice = await LlmInference.createWebGpuDevice();
-
-      // Pass stream reader as modelAssetBuffer — same pattern as the official
-      // MediaPipe sample (avoids buffering the entire model in RAM).
-      // The MediaPipe API accepts ReadableStreamDefaultReader in this slot.
-      inference = await LlmInference.createFromOptions(genaiFileset, {
-        baseOptions: {
-          modelAssetBuffer: modelStream.getReader() as unknown as Uint8Array,
-          delegate: 'GPU',
-        },
-        gpuOptions: { device: gpuDevice },
-        maxTokens: 8192,
-        temperature: 0.7,
-        topK: 40,
-      });
-
-      self.postMessage({ type: 'ready' });
-    } catch (err) {
-      self.postMessage({ type: 'error', id: null, message: String(err) });
-    }
-    return;
-  }
-
-  if (type === 'chat' && id && prompt) {
-    if (!inference) {
-      self.postMessage({ type: 'error', id, message: 'Model not initialized' });
-      return;
-    }
-
-    const maxTokens = (e.data as { maxTokens?: number }).maxTokens;
-    const temperature = (e.data as { temperature?: number }).temperature;
-    const topK = (e.data as { topK?: number }).topK;
-
-    if (maxTokens !== undefined || temperature !== undefined || topK !== undefined) {
-      try {
-        await inference.setOptions({
-          ...(maxTokens !== undefined ? { maxTokens } : {}),
-          ...(temperature !== undefined ? { temperature } : {}),
-          ...(topK !== undefined ? { topK } : {}),
-        });
-      } catch {
-        // setOptions failure is non-fatal — use defaults
-      }
-    }
-
-    cancelRequested = false;
-    let fullText = '';
-    let tokenCount = 0;
-    const t0 = performance.now();
-
-    try {
-      const result = await inference.generateResponse(prompt, (partialResult: string, done: boolean) => {
-        if (cancelRequested) {
-          inference?.cancelProcessing();
-          return;
-        }
-
-        fullText += partialResult;
-        tokenCount++;
-        self.postMessage({ type: 'token', id, token: partialResult });
-
-        if (done) {
-          const latencyMs = performance.now() - t0;
-          self.postMessage({
-            type: 'done',
-            id,
-            text: fullText,
-            stats: {
-              tokensPerSec: tokenCount / (latencyMs / 1000),
-              totalTokens: tokenCount,
-              latencyMs,
-            },
-          });
-        }
-      });
-
-      // Fallback if the streaming callback didn't fire 'done'
-      if (result && !fullText) {
-        fullText = result;
-        const latencyMs = performance.now() - t0;
-        self.postMessage({
-          type: 'done',
-          id,
-          text: fullText,
-          stats: {
-            tokensPerSec: tokenCount / (latencyMs / 1000),
-            totalTokens: tokenCount,
-            latencyMs,
-          },
-        });
-      }
-    } catch (err) {
-      const msg = String(err);
-      if (cancelRequested || msg.includes('cancel')) {
-        const latencyMs = performance.now() - t0;
-        self.postMessage({
-          type: 'done',
-          id,
-          text: fullText,
-          stats: {
-            tokensPerSec: tokenCount > 0 ? tokenCount / (latencyMs / 1000) : 0,
-            totalTokens: tokenCount,
-            latencyMs,
-          },
-        });
-      } else {
-        self.postMessage({ type: 'error', id, message: msg });
-      }
-    }
-    return;
-  }
-
-  if (type === 'abort' && id) {
-    cancelRequested = true;
-    inference?.cancelProcessing();
-    return;
-  }
-};

package/src/recipes/widgets/actions.md

@@ -1,28 +0,0 @@
----
-widget: actions
-description: Row of action buttons
-group: simple
-schema:
-  type: object
-  required:
-    - buttons
-  properties:
-    buttons:
-      type: array
-      items:
-        type: object
-        required:
-          - label
-        properties:
-          label:
-            type: string
-          primary:
-            type: boolean
----
-
-## When to use
-Offer action choices to the user — confirmation, navigation, or selection among multiple options.
-
-## How to use
-1. Identify the relevant actions based on context
-2. Call `autoui_webmcp_widget_display('actions', { buttons: [{ label: 'Confirm', primary: true }, { label: 'Cancel' }] })`

package/src/recipes/widgets/alert.md

@@ -1,27 +0,0 @@
----
-widget: alert
-description: System alert or notification
-group: simple
-schema:
-  type: object
-  required:
-    - title
-  properties:
-    title:
-      type: string
-    message:
-      type: string
-    level:
-      type: string
-      enum:
-        - info
-        - warn
-        - error
----
-
-## When to use
-Signal important information, a warning, or an error to the user. Useful after an action that requires attention (e.g. threshold exceeded, operation failed).
-
-## How to use
-1. Determine the alert level based on context ('info', 'warn', 'error')
-2. Call `autoui_webmcp_widget_display('alert', { title: 'Quota exceeded', message: 'Storage usage is above 90%', level: 'warn' })`

package/src/recipes/widgets/cards.md

@@ -1,41 +0,0 @@
----
-widget: cards
-description: Card grid with title, description, and tags
-group: rich
-schema:
-  type: object
-  required:
-    - cards
-  properties:
-    title:
-      type: string
-    cards:
-      type: array
-      items:
-        type: object
-        required:
-          - title
-        properties:
-          title:
-            type: string
-          description:
-            type: string
-          subtitle:
-            type: string
-          tags:
-            type: array
-            items:
-              type: string
----
-
-## When to use
-Display a collection of rich items — products, articles, projects, events. Each card combines a title, description, and tags. Prefer `list` for simple items without structure.
-
-## How to use
-1. Retrieve the collection via MCP
-2. Call `autoui_webmcp_widget_display('cards', { title: 'Active projects', cards: [{ title: 'UI Redesign', description: 'Migration to Svelte 5', subtitle: 'Q2 2024', tags: ['frontend', 'high priority'] }] })`
-
-## Common mistakes
-- NEVER fabricate image URLs for the `image` field. Use ONLY the URLs returned by MCP tools. If no URL is available, do not include an image field — the widget renders correctly without it.
-- STRICTLY FORBIDDEN: placeholder URLs (`via.placeholder.com`, `placehold.co`, `dummyimage.com`, `?text=...`). Omit the `image` field rather than using a placeholder.
-- Always provide a `title` for each card

package/src/recipes/widgets/carousel.md

@@ -1,39 +0,0 @@
----
-widget: carousel
-description: Slide carousel (images or content)
-group: media
-schema:
-  type: object
-  required:
-    - slides
-  properties:
-    title:
-      type: string
-    slides:
-      type: array
-      items:
-        type: object
-        properties:
-          src:
-            type: string
-          title:
-            type: string
-          subtitle:
-            type: string
-          content:
-            type: string
-    autoPlay:
-      type: boolean
-    interval:
-      type: number
----
-
-## When to use
-For sequential content browsing — presentations, step-by-step tutorials, narrative galleries. Prefer `gallery` for an overview in grid layout.
-
-## How to use
-1. Retrieve or compose the slides
-2. Call `autoui_webmcp_widget_display('carousel', { title: 'Presentation', slides: [{ title: 'Step 1', content: 'Project introduction...' }, { title: 'Step 2', src: 'https://...', subtitle: 'Architecture' }], autoPlay: false })`
-
-## Common mistakes
-- Never fabricate image URLs for `src` — only use URLs returned by MCP tools

package/src/recipes/widgets/chart-rich.md

@@ -1,51 +0,0 @@
----
-widget: chart-rich
-description: Advanced multi-type chart (bar, line, area, pie)
-group: rich
-schema:
-  type: object
-  required:
-    - data
-  properties:
-    title:
-      type: string
-    type:
-      type: string
-      enum:
-        - bar
-        - line
-        - area
-        - pie
-        - donut
-    labels:
-      type: array
-      items:
-        type: string
-    data:
-      type: array
-      items:
-        type: object
-        required:
-          - values
-        properties:
-          label:
-            type: string
-          values:
-            type: array
-            items:
-              type: number
-          color:
-            type: string
----
-
-## When to use
-For multi-series charts or types other than simple bars (lines, areas, pies, donuts). Prefer `chart` for a basic single-series bar chart.
-
-## How to use
-1. Fetch data via MCP
-2. Structure into series with `labels` (X axis) and `data` (value series)
-3. Call `autoui_webmcp_widget_display('chart-rich', { title: 'Monthly Trend', type: 'line', labels: ['Jan', 'Feb', 'Mar'], data: [{ label: '2024', values: [10, 20, 15], color: '#4CAF50' }] })`
-
-## Common mistakes
-- The number of `values` in each series must match the number of `labels`
-- Do not confuse with `chart` (simple widget) — `chart-rich` uses a different data format

package/src/recipes/widgets/chart.md

@@ -1,32 +0,0 @@
----
-widget: chart
-description: Simple bar chart
-group: simple
-schema:
-  type: object
-  required:
-    - bars
-  properties:
-    title:
-      type: string
-    bars:
-      type: array
-      items:
-        type: array
-        items:
-          - type: string
-          - type: number
-        minItems: 2
-        maxItems: 2
----
-
-## When to use
-Use for a quick bar chart with simple categorical data. Prefer `chart-rich` for multi-series charts, line charts, or pie charts.
-
-## How to use
-1. Fetch the data via MCP (e.g. counts by category)
-2. Format as an array of `[label, value]` pairs
-3. Call `autoui_webmcp_widget_display('chart', { title: 'Sales by region', bars: [['North', 150], ['South', 230], ['East', 180]] })`
-
-## Common mistakes
-- Swapping label and value in pairs — the format is `[string, number]`, not `[number, string]`

package/src/recipes/widgets/code.md

@@ -1,21 +0,0 @@
----
-widget: code
-description: Code block with syntax highlighting
-group: simple
-schema:
-  type: object
-  required:
-    - content
-  properties:
-    lang:
-      type: string
-    content:
-      type: string
----
-
-## When to use
-Display source code, snippets, shell commands, or any monospace-formatted output. Specify `lang` to enable syntax highlighting.
-
-## How to use
-1. Fetch or generate the code based on the request
-2. Call `autoui_webmcp_widget_display('code', { lang: 'python', content: 'def hello():\n    print("Hello")' })`

package/src/recipes/widgets/d3.md

@@ -1,36 +0,0 @@
----
-widget: d3
-description: D3.js visualization with presets (heatmap, radial, treemap, force)
-group: advanced
-schema:
-  type: object
-  required:
-    - preset
-    - data
-  properties:
-    title:
-      type: string
-    preset:
-      type: string
-      enum:
-        - hex-heatmap
-        - radial
-        - treemap
-        - force
-    data:
-      type: object
-    config:
-      type: object
----
-
-## When to use
-For advanced visualizations not covered by other widgets — hexagonal heatmaps, radial charts, hierarchical treemaps, force graphs. Choose the preset based on the data type.
-
-## How to use
-1. Retrieve data via MCP
-2. Choose the appropriate preset: `hex-heatmap` for spatial density, `radial` for cyclical data, `treemap` for hierarchies, `force` for relationship graphs
-3. Call `autoui_webmcp_widget_display('d3', { title: 'Budget breakdown', preset: 'treemap', data: { name: 'Budget', children: [{ name: 'R&D', value: 500 }, { name: 'Marketing', value: 300 }] } })`
-
-## Common mistakes
-- The structure of `data` depends on the chosen preset — consult the preset documentation
-- Do not confuse with `chart-rich` which is simpler but covers bar/line/pie

package/src/recipes/widgets/data-table.md

@@ -1,46 +0,0 @@
----
-widget: data-table
-description: Sortable data table with configurable columns
-group: rich
-schema:
-  type: object
-  required:
-    - rows
-  properties:
-    title:
-      type: string
-    columns:
-      type: array
-      items:
-        type: object
-        required:
-          - key
-          - label
-        properties:
-          key:
-            type: string
-          label:
-            type: string
-          align:
-            type: string
-            enum:
-              - left
-              - center
-              - right
-    rows:
-      type: array
-      items:
-        type: object
----
-
-## When to use
-Display tabular data with multiple columns — query results, record lists, inventories. Prefer `kv` for a single entity, `list` for a single column.
-
-## How to use
-1. Fetch data via MCP (e.g. SQL result, list of objects)
-2. Optional: define `columns` to control column order and labels
-3. Call `autoui_webmcp_widget_display('data-table', { title: 'Users', columns: [{ key: 'name', label: 'Name' }, { key: 'email', label: 'Email' }], rows: [{ name: 'Alice', email: 'alice@ex.com' }] })`
-
-## Common mistakes
-- Forgetting that `rows` is an array of objects (not an array of arrays)
-- Defining `columns.key` values that do not match the keys in the `rows` objects

package/src/recipes/widgets/gallery.md

@@ -1,39 +0,0 @@
----
-widget: gallery
-description: Image gallery in grid layout
-group: media
-schema:
-  type: object
-  required:
-    - images
-  properties:
-    title:
-      type: string
-    images:
-      type: array
-      items:
-        type: object
-        required:
-          - src
-        properties:
-          src:
-            type: string
-          alt:
-            type: string
-          caption:
-            type: string
-    columns:
-      type: number
----
-
-## When to use
-Display a collection of images in a grid — photo gallery, image search results, portfolio. Prefer `carousel` for sequential browsing.
-
-## How to use
-1. Retrieve image URLs via MCP (never fabricate URLs)
-2. Call `autoui_webmcp_widget_display('gallery', { title: 'Site photos', images: [{ src: 'https://...', alt: 'Main view', caption: 'North facade' }], columns: 3 })`
-
-## Common mistakes
-- NEVER fabricate image URLs — only use those returned by MCP tools
-- STRICTLY FORBIDDEN: placeholder URLs (`via.placeholder.com`, `placehold.co`, `dummyimage.com`, `?text=...`, `example.com/image.jpg`). If no real image is available, do NOT display a gallery — use a `text` or `cards` widget without an image instead
-- Always provide an `alt` for accessibility