@webmcp-auto-ui/agent 2.5.31 → 2.5.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmcp-auto-ui/agent",
-  "version": "2.5.31",
+  "version": "2.5.33",
   "description": "LLM agent loop + remote/WASM/local providers + MCP wrapper",
   "license": "AGPL-3.0-or-later",
   "type": "module",

package/src/autoui-server.ts

@@ -12,7 +12,6 @@ import notebookRecipe from '@webmcp-auto-ui/ui/widgets/notebook/recipes/notebook
 // Notebook widget renderer (vanilla JS) — import via subpath to avoid pulling
 // the .svelte exports of the ui package root through tsc.
 import { render as renderNotebook } from '@webmcp-auto-ui/ui/widgets/notebook/notebook.js';
-import { render as renderRecipeBrowser } from '@webmcp-auto-ui/ui/widgets/notebook/recipe-browser.js';
 
 // Inline recipe for recipe-browser (real vanilla widget)
 const recipeBrowserRecipe = `---
@@ -143,7 +142,7 @@ Call widget_display({name: "list", params: {items: ["A", "B", "C"]}}).
   // ── chart ────────────────────────────────────────────────────────────────
   `---
 widget: chart
-description: Simple bar chart. Labels + numeric values.
+description: Simple bar chart. bars is an array of tuples [label: string, value: number]. Each entry MUST be an array of length exactly 2, NOT an object.
 schema:
   type: object
   required:
@@ -153,8 +152,11 @@ schema:
       type: string
     bars:
       type: array
+      description: Array of tuples [label, value]. Each item is an array [string, number] of length exactly 2. Do NOT use objects like {label, value}.
       items:
         type: array
+        minItems: 2
+        maxItems: 2
 ---
 
 ## When to use
@@ -162,6 +164,7 @@ Pour un graphique a barres simple avec des labels et valeurs numeriques.
 
 ## How to use
 Call widget_display({name: "chart", params: {bars: [["Jan", 10], ["Fev", 20]]}}).
+Each bar is a tuple array of exactly 2 elements: [label: string, value: number]. NEVER use objects.
 `,
 
   // ── alert ────────────────────────────────────────────────────────────────
@@ -765,57 +768,6 @@ Call widget_display({name: "carousel", params: {slides: [{src: "https://...", ti
 
 ## Common mistakes
 - NEVER fabricate image URLs for src — only use those returned by MCP tools
-`,
-
-  // ── map ──────────────────────────────────────────────────────────────────
-  `---
-widget: map
-description: Interactive Leaflet map with markers. Dark CARTO basemap.
-schema:
-  type: object
-  properties:
-    title:
-      type: string
-    center:
-      type: object
-      description: Centre de la carte
-      required:
-        - lat
-        - lng
-      properties:
-        lat:
-          type: number
-        lng:
-          type: number
-    zoom:
-      type: number
-      description: Niveau de zoom (1-18)
-    height:
-      type: string
-      description: Hauteur CSS de la carte (ex "400px")
-    markers:
-      type: array
-      items:
-        type: object
-        required:
-          - lat
-          - lng
-        properties:
-          lat:
-            type: number
-          lng:
-            type: number
-          label:
-            type: string
-          color:
-            type: string
----
-
-## When to use
-Display a geographic map with markers.
-
-## How to use
-Call widget_display({name: "map", params: {center: {lat: 48.8, lng: 2.3}, zoom: 12, markers: [{lat: 48.8, lng: 2.3, label: "Paris"}]}}).
 `,
 
   // ── stat-card ────────────────────────────────────────────────────────────
@@ -882,9 +834,10 @@ schema:
             type: string
     rows:
       type: array
-      description: Tableau de tableaux de valeurs (row-major)
+      description: Array of rows, row-major. Each row is an array of primitive values (string/number/boolean) with length equal to the number of columns. Do NOT use objects as rows.
       items:
         type: array
+        minItems: 1
     highlights:
       type: array
       description: Cellules a coloriser
@@ -907,34 +860,6 @@ Pour des grilles de donnees avec mise en valeur de cellules (heatmap, comparaiso
 
 ## How to use
 Call widget_display({name: "grid-data", params: {columns: [{key:"a",label:"A"}], rows: [[1,2],[3,4]], highlights: [{row:0,col:1,color:"#ff0"}]}}).
-`,
-
-  // ── d3 ───────────────────────────────────────────────────────────────────
-  `---
-widget: d3
-description: D3.js visualization (hex-heatmap, radial, treemap, force graph).
-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
-Pour des visualisations avancees D3.js (heatmap hexagonale, radial, treemap, graphe de force).
-
-## How to use
-Call widget_display({name: "d3", params: {preset: "treemap", data: {name: "root", children: [...]}}}).
 `,
 
   // ── js-sandbox ───────────────────────────────────────────────────────────
@@ -970,6 +895,31 @@ Pour des visualisations custom, animations, ou prototypes interactifs en JS pur.
 Call widget_display({name: "js-sandbox", params: {code: "document.getElementById('root').innerHTML = '<h1>Hello</h1>'"}}).
 `,
 
+`---
+widget: chat-input
+description: Minimal inline chat bar with a text input and stop button. Use when the agent needs to solicit a short free-form user reply inside the current canvas (e.g. "explain this result").
+group: rich
+schema:
+  type: object
+  properties:
+    placeholder:
+      type: string
+      description: Placeholder text shown in the input (default "Your reply...").
+    value:
+      type: string
+      description: Optional initial value.
+    disabled:
+      type: boolean
+      description: Disable the input (while the agent is processing).
+---
+
+## When to use
+When you need the user to reply with a short text — clarifying questions, follow-ups, free-form input mid-canvas. Prefer this over a modal for lightweight conversation inside a widget layout.
+
+## How to use
+Call widget_display({name: "chat-input", params: {placeholder: "Your reply..."}}). The widget emits a bubbling 'widget:interact' CustomEvent with detail={action: "submit", payload: {text}} when the user submits, and detail={action: "stop"} when the stop button is pressed.
+`,
+
 ];
 
 // ---------------------------------------------------------------------------
@@ -999,14 +949,11 @@ for (const recipe of RECIPES) {
   autoui.registerWidget(recipe, undefined);
 }
 
-// Notebook widget — vanilla renderer (resolved via WidgetRenderer vanilla path)
-const NOTEBOOK_WIDGETS: Array<[string, (container: HTMLElement, data: any) => any]> = [
-  [notebookRecipe as string, renderNotebook],
-  [recipeBrowserRecipe, renderRecipeBrowser],
-];
-for (const [recipe, renderer] of NOTEBOOK_WIDGETS) {
-  autoui.registerWidget(recipe, renderer as any);
-}
+// Notebook widget — vanilla renderer (wrapped by <auto-notebook> custom element)
+autoui.registerWidget(notebookRecipe as string, renderNotebook as any);
+
+// Recipe browser — resolved by WidgetRenderer as <auto-recipe-browser> custom element
+autoui.registerWidget(recipeBrowserRecipe, undefined);
 
 // Register flow recipes (multi-step procedures) from the global recipe registry
 // that declare this server (autoui) in their frontmatter.

package/src/loop.ts

@@ -10,7 +10,7 @@ import type {
 } from './types.js';
 import type { ToolLayer, SchemaTransformOptions } from './tool-layers.js';
 import { buildToolsFromLayers, buildDiscoveryToolsWithAliases, activateServerTools, toProviderTools, sanitizeServerName } from './tool-layers.js';
-import { buildSystemPromptWithAliases, buildSystemPrompt } from './prompts/index.js';
+import { buildSystemPromptWithAliases } from './prompts/index.js';
 import type { DiscoveryCache } from './discovery-cache.js';
 import { unflattenParams, validateJsonSchema } from '@webmcp-auto-ui/core';
 import type { JsonSchema } from '@webmcp-auto-ui/core';
@@ -395,13 +395,19 @@ export async function runAgentLoop(
             const protocol = tokenToProtocol(token);
             const serverKey = `${serverName}_${token}`;
             if (!activatedServers.has(serverKey)) {
-              activatedServers.add(serverKey);
               const layer = (options.layers ?? []).find(l => sanitizeServerName(l.serverName) === serverName && l.protocol === protocol);
               if (layer) {
-                const act = activateServerTools(activeTools, layer, schemaOptions, trace);
-                activeTools = act.tools;
-                // Merge new pathMaps so unflattenParams works for lazily-activated tools.
-                for (const [k, v] of act.pathMaps) localPathMaps.set(k, v);
+                try {
+                  const act = activateServerTools(activeTools, layer, schemaOptions, trace);
+                  activeTools = act.tools;
+                  // Merge new pathMaps so unflattenParams works for lazily-activated tools.
+                  for (const [k, v] of act.pathMaps) localPathMaps.set(k, v);
+                  activatedServers.add(serverKey);
+                } catch (e) {
+                  trace.push('activate', name, `activation failed for ${serverKey}: ${e instanceof Error ? e.message : String(e)}`, 'error');
+                }
+              } else {
+                trace.push('activate', name, `layer not found for server="${serverName}" protocol="${protocol}"`, 'warn');
               }
             }
           }

package/src/prompts/index.ts

@@ -43,7 +43,12 @@ export function buildSystemPromptWithAliases(
   return { prompt, aliasMap: refs.aliasMap };
 }
 
-/** Backward-compat wrapper — also populates the deprecated global toolAliasMap. */
+/**
+ * @deprecated Use `buildSystemPromptWithAliases()` instead and pass the returned
+ * `aliasMap` to the agent loop explicitly. This wrapper still populates the
+ * deprecated global `toolAliasMap` singleton as a side-effect, which is not
+ * parallel-safe across concurrent agent loops.
+ */
 export function buildSystemPrompt(
   layers: ToolLayer[],
   options?: { providerKind?: ProviderKind },

package/src/recipes/index.ts

@@ -1,12 +1,84 @@
 // Recipe loader — imports auto-generated .md strings, parses them, exports ready-to-use recipes
 
-export type { Recipe, McpRecipe } from './types.js';
-export { parseRecipe, parseRecipes } from './parser.js';
-
+import { parseFrontmatter } from '@webmcp-auto-ui/core';
+import type { Recipe } from './types.js';
 import { RAW_RECIPES } from './_generated.js';
-import { parseRecipes } from './parser.js';
 import { registerRecipes } from '../recipe-registry.js';
 
+export type { Recipe, McpRecipe } from './types.js';
+
+/**
+ * Parse a single recipe from its raw markdown string.
+ *
+ * Supports two formats:
+ * - **Structured**: YAML frontmatter between `---` delimiters + markdown body
+ * - **Freeform**: plain markdown without frontmatter (id derived from fileKey)
+ *
+ * @param raw - The raw markdown string
+ * @param fileKey - Optional file key (e.g. "gallery-images") used as fallback id for freeform recipes
+ */
+export function parseRecipe(raw: string, fileKey?: string): Recipe {
+  const { frontmatter, body } = parseFrontmatter(raw);
+
+  // No frontmatter found → freeform recipe
+  if (Object.keys(frontmatter).length === 0) {
+    return parseRecipeFreeform(raw, fileKey);
+  }
+
+  return {
+    id: (frontmatter.id as string) ?? fileKey ?? '',
+    name: (frontmatter.name as string) ?? (frontmatter.id as string) ?? fileKey ?? '',
+    description: frontmatter.description as string | undefined,
+    components_used: parseStringArray(frontmatter.components_used),
+    layout: frontmatter.layout as Recipe['layout'] | undefined,
+    interactions: parseInteractions(frontmatter.interactions),
+    when: (frontmatter.when as string) ?? '',
+    servers: parseStringArray(frontmatter.servers),
+    body: body.trim(),
+  };
+}
+
+/** Parse a freeform .md recipe (no frontmatter). Extracts id from fileKey, name from first heading. */
+function parseRecipeFreeform(raw: string, fileKey?: string): Recipe {
+  const body = raw.trim();
+  const headingMatch = body.match(/^#+ +(.+)$/m);
+  const name = headingMatch?.[1] ?? fileKey ?? 'untitled';
+  const id = fileKey ?? name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+
+  const whenMatch = body.match(/##\s*Quand[^\n]*\n([\s\S]*?)(?=\n##|\n$|$)/i);
+  const when = whenMatch?.[1]?.trim().split('\n')[0] ?? '';
+
+  return { id, name, when, body };
+}
+
+/** Parse all raw recipe strings into Recipe objects. Skips invalid ones with a warning. */
+export function parseRecipes(raws: Record<string, string>): Recipe[] {
+  const recipes: Recipe[] = [];
+  for (const [key, raw] of Object.entries(raws)) {
+    try {
+      recipes.push(parseRecipe(raw, key));
+    } catch (e) {
+      console.warn(`[recipes] Failed to parse "${key}":`, e);
+    }
+  }
+  return recipes;
+}
+
+function parseStringArray(val: unknown): string[] | undefined {
+  if (!val) return undefined;
+  if (Array.isArray(val)) return val.map(String);
+  if (typeof val === 'string') return val.split(',').map(s => s.trim()).filter(Boolean);
+  return undefined;
+}
+
+function parseInteractions(val: unknown): Recipe['interactions'] | undefined {
+  if (!Array.isArray(val)) return undefined;
+  return val.filter(
+    (v): v is { source: string; target: string; event: string; action: string } =>
+      typeof v === 'object' && v !== null && 'source' in v && 'target' in v,
+  );
+}
+
 /** All built-in WebMCP UI recipes, parsed and ready to use */
 export const WEBMCP_RECIPES = parseRecipes(RAW_RECIPES);
 

package/src/recipes/parser.ts

@@ -1,182 +0,0 @@
-// Frontmatter parser for recipe .md files
-// Parses YAML-like frontmatter + markdown body into a Recipe object
-
-import type { Recipe } from './types.js';
-
-/**
- * Parse a single recipe from its raw markdown string.
- *
- * Supports two formats:
- * - **Structured**: YAML-like frontmatter between `---` delimiters + markdown body
- * - **Freeform**: plain markdown without frontmatter (id derived from fileKey)
- *
- * @param raw - The raw markdown string
- * @param fileKey - Optional file key (e.g. "gallery-images") used as fallback id for freeform recipes
- */
-export function parseRecipe(raw: string, fileKey?: string): Recipe {
-  const match = raw.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);
-
-  if (!match) {
-    // Freeform recipe: no frontmatter — derive metadata from content
-    return parseRecipeFreeform(raw, fileKey);
-  }
-
-  const frontmatter = parseFrontmatter(match[1]);
-  const body = match[2].trim();
-
-  return {
-    id: frontmatter.id as string ?? fileKey ?? '',
-    name: frontmatter.name as string ?? frontmatter.id as string ?? fileKey ?? '',
-    description: frontmatter.description as string | undefined,
-    components_used: parseStringArray(frontmatter.components_used),
-    layout: frontmatter.layout as Recipe['layout'] | undefined,
-    interactions: parseInteractions(frontmatter.interactions),
-    when: frontmatter.when as string ?? '',
-    servers: parseStringArray(frontmatter.servers),
-    body,
-  };
-}
-
-/** Parse a freeform .md recipe (no frontmatter). Extracts id from fileKey, name from first heading. */
-function parseRecipeFreeform(raw: string, fileKey?: string): Recipe {
-  const body = raw.trim();
-  // Try to extract name from first markdown heading
-  const headingMatch = body.match(/^#+ +(.+)$/m);
-  const name = headingMatch?.[1] ?? fileKey ?? 'untitled';
-  const id = fileKey ?? name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
-
-  // Try to extract a "when" hint from the first paragraph or a "## Quand" section
-  const whenMatch = body.match(/##\s*Quand[^\n]*\n([\s\S]*?)(?=\n##|\n$|$)/i);
-  const when = whenMatch?.[1]?.trim().split('\n')[0] ?? '';
-
-  return { id, name, when, body };
-}
-
-/** Parse all raw recipe strings into Recipe objects. Skips invalid ones with a warning. */
-export function parseRecipes(raws: Record<string, string>): Recipe[] {
-  const recipes: Recipe[] = [];
-  for (const [key, raw] of Object.entries(raws)) {
-    try {
-      recipes.push(parseRecipe(raw, key));
-    } catch (e) {
-      console.warn(`[recipes] Failed to parse "${key}":`, e);
-    }
-  }
-  return recipes;
-}
-
-// ── Internal helpers ──────────────────────────────────────────────────────────
-
-function parseFrontmatter(raw: string): Record<string, unknown> {
-  const result: Record<string, unknown> = {};
-  let currentKey = '';
-  let currentArray: unknown[] | null = null;
-  let currentObj: Record<string, unknown> | null = null;
-  let inObjectArray = false;
-
-  for (const line of raw.split('\n')) {
-    // Array item: "  - value" or "  - key: value" (under a key)
-    if (/^\s+-\s/.test(line) && currentKey) {
-      const itemRaw = line.replace(/^\s+-\s*/, '').trim();
-      if (inObjectArray && currentArray) {
-        // Object item in array: "  - source: gallery"
-        // Collect key: value pairs into a single object until next "  -" or new top-level key
-        const obj = parseInlineObject(itemRaw);
-        if (obj) {
-          currentArray.push(obj);
-        } else {
-          // Simple string in array
-          if (!currentArray) currentArray = [];
-          currentArray.push(itemRaw);
-        }
-      } else {
-        if (!currentArray) currentArray = [];
-        // Check if it looks like "key: value" (object item)
-        if (itemRaw.includes(': ')) {
-          inObjectArray = true;
-          currentArray.push(parseInlineObject(itemRaw) ?? itemRaw);
-        } else {
-          currentArray.push(itemRaw);
-        }
-      }
-      continue;
-    }
-
-    // Nested key: "  key: value" (under a parent key with object value)
-    if (/^\s+\w/.test(line) && currentKey && !currentArray && currentObj !== null) {
-      const m = line.match(/^\s+(\w+):\s*(.*)$/);
-      if (m) {
-        const val = m[2].trim();
-        currentObj[m[1]] = isNumeric(val) ? Number(val) : val;
-        continue;
-      }
-    }
-
-    // Flush pending array/object
-    if (currentKey && (currentArray || currentObj)) {
-      result[currentKey] = currentArray ?? currentObj;
-      currentArray = null;
-      currentObj = null;
-      inObjectArray = false;
-    }
-
-    // Top-level key: "key: value" or "key:"
-    const topMatch = line.match(/^(\w[\w_]*)\s*:\s*(.*)$/);
-    if (topMatch) {
-      currentKey = topMatch[1];
-      const val = topMatch[2].trim();
-
-      if (val === '' || val === '|') {
-        // Next lines are nested (object or array)
-        currentObj = {};
-        continue;
-      }
-      if (val.startsWith('[') && val.endsWith(']')) {
-        // Inline array: [gallery, carousel]
-        result[currentKey] = val.slice(1, -1).split(',').map(s => s.trim()).filter(Boolean);
-        currentKey = '';
-        continue;
-      }
-      // Simple scalar
-      result[currentKey] = isNumeric(val) ? Number(val) : val;
-      currentKey = '';
-    }
-  }
-
-  // Flush last pending
-  if (currentKey && (currentArray || currentObj)) {
-    result[currentKey] = currentArray ?? currentObj;
-  }
-
-  return result;
-}
-
-function parseStringArray(val: unknown): string[] | undefined {
-  if (!val) return undefined;
-  if (Array.isArray(val)) return val.map(String);
-  if (typeof val === 'string') return val.split(',').map(s => s.trim()).filter(Boolean);
-  return undefined;
-}
-
-function parseInteractions(val: unknown): Recipe['interactions'] | undefined {
-  if (!Array.isArray(val)) return undefined;
-  return val.filter(
-    (v): v is { source: string; target: string; event: string; action: string } =>
-      typeof v === 'object' && v !== null && 'source' in v && 'target' in v
-  );
-}
-
-function parseInlineObject(raw: string): Record<string, unknown> | null {
-  if (!raw.includes(': ')) return null;
-  const obj: Record<string, unknown> = {};
-  // Split on ", " but not inside values — simple heuristic
-  for (const part of raw.split(/,\s+/)) {
-    const m = part.match(/^(\w+)\s*:\s*(.+)$/);
-    if (m) obj[m[1]] = isNumeric(m[2].trim()) ? Number(m[2].trim()) : m[2].trim();
-  }
-  return Object.keys(obj).length > 0 ? obj : null;
-}
-
-function isNumeric(val: string): boolean {
-  return val !== '' && !isNaN(Number(val));
-}