@webmcp-auto-ui/agent 2.5.26 → 2.5.27

package/package.json

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

package/src/autoui-server.ts

@@ -5,6 +5,22 @@
 import { createWebMcpServer, parseFrontmatter } from '@webmcp-auto-ui/core';
 import { RAW_RECIPES } from './recipes/_generated.js';
 
+// Notebook widget recipes (vanilla renderers)
+// @ts-ignore — Vite raw imports, not resolved by tsc
+import compactRecipe from './notebook-widgets/recipes/compact.md?raw';
+// @ts-ignore
+import workspaceRecipe from './notebook-widgets/recipes/workspace.md?raw';
+// @ts-ignore
+import documentRecipe from './notebook-widgets/recipes/document.md?raw';
+// @ts-ignore
+import editorialRecipe from './notebook-widgets/recipes/editorial.md?raw';
+
+// Notebook widget renderers (vanilla JS)
+import { render as renderCompact } from './notebook-widgets/compact.js';
+import { render as renderWorkspace } from './notebook-widgets/workspace.js';
+import { render as renderDocument } from './notebook-widgets/document.js';
+import { render as renderEditorial } from './notebook-widgets/editorial.js';
+
 // ---------------------------------------------------------------------------
 // Inline recipes (frontmatter + body)
 // ---------------------------------------------------------------------------
@@ -1008,6 +1024,17 @@ for (const recipe of RECIPES) {
   autoui.registerWidget(recipe, undefined);
 }
 
+// Notebook widgets — vanilla renderers (resolved via WidgetRenderer vanilla path)
+const NOTEBOOK_WIDGETS: Array<[string, (container: HTMLElement, data: any) => any]> = [
+  [compactRecipe as string, renderCompact],
+  [workspaceRecipe as string, renderWorkspace],
+  [documentRecipe as string, renderDocument],
+  [editorialRecipe as string, renderEditorial],
+];
+for (const [recipe, renderer] of NOTEBOOK_WIDGETS) {
+  autoui.registerWidget(recipe, renderer as any);
+}
+
 // Register flow recipes (multi-step procedures) from the global recipe registry
 // that declare this server (autoui) in their frontmatter.
 for (const [key, rawMd] of Object.entries(RAW_RECIPES)) {

package/src/index.ts

@@ -3,8 +3,18 @@
 // Providers
 export { RemoteLLMProvider } from './providers/remote.js';
 export type { RemoteLLMProviderOptions } from './providers/remote.js';
-export { WasmProvider, buildGemmaPrompt } from './providers/wasm.js';
-export type { WasmProviderOptions, WasmStatus, BuildGemmaPromptInput } from './providers/wasm.js';
+export { WasmProvider } from './providers/wasm.js';
+export type { WasmProviderOptions, WasmStatus } from './providers/wasm.js';
+export { TransformersProvider } from './providers/transformers.js';
+export type { TransformersProviderOptions, TransformersStatus } from './providers/transformers.js';
+export { TRANSFORMERS_MODELS, getTransformersModel, listTransformersModels } from './providers/transformers-models.js';
+export type { TransformersModelEntry, TransformersFamily, ToolCallFormat } from './providers/transformers-models.js';
+export { parseToolCalls } from './prompts/tool-call-parsers.js';
+export type { ParseResult } from './prompts/tool-call-parsers.js';
+export { loadOrDownloadModel, clearModelCache } from './util/opfs-cache.js';
+export type { ModelFileSpec, CacheProgress } from './util/opfs-cache.js';
+export { buildGemmaPrompt } from './prompts/index.js';
+export type { BuildGemmaPromptInput } from './prompts/index.js';
 export { LocalLLMProvider } from './providers/local.js';
 export type { LocalLLMProviderOptions, LocalBackend } from './providers/local.js';
 export { createProvider } from './providers/factory.js';
@@ -18,15 +28,16 @@ export type { GemmaProviderOptions, GemmaStatus } from './providers/gemma.js';
 
 // Agent loop
 export { runAgentLoop, toProviderTools, fromMcpTools, trimConversationHistory } from './loop.js';
-export { buildSystemPrompt } from './tool-layers.js';
+export { buildSystemPrompt, buildSystemPromptWithAliases } from './prompts/index.js';
+export type { SystemPromptResult } from './prompts/index.js';
 export type { AgentLoopOptions } from './loop.js';
 
 // autoui — built-in WebMCP server
 export { autoui, NATIVE_WIDGET_NAMES } from './autoui-server.js';
 
 // Tool layers
-export { buildToolsFromLayers, buildDiscoveryTools, buildDiscoveryToolsWithAliases, activateServerTools, resolveCanonicalTools, toolAliasMap, buildSystemPromptWithAliases, flattenPathMaps, buildDiscoveryCache } from './tool-layers.js';
-export type { ToolLayer, McpLayer, WebMcpLayer, SystemPromptResult, DiscoveryToolsResult, SchemaTransformOptions, BuildToolsResult, ProviderKind } from './tool-layers.js';
+export { buildToolsFromLayers, buildDiscoveryTools, buildDiscoveryToolsWithAliases, activateServerTools, resolveCanonicalTools, toolAliasMap, flattenPathMaps, buildDiscoveryCache } from './tool-layers.js';
+export type { ToolLayer, McpLayer, WebMcpLayer, DiscoveryToolsResult, SchemaTransformOptions, BuildToolsResult, ProviderKind } from './tool-layers.js';
 
 // Discovery cache
 export { DiscoveryCache, DISCOVERY_TOOL_NAMES } from './discovery-cache.js';
@@ -63,12 +74,15 @@ export type { RepairResult } from './auto-repair.js';
 // Pipeline trace
 export { PipelineTrace, type TraceEntry } from './pipeline-trace.js';
 
+// Trace observer — live visual trace for runAgentLoop
+export { createTraceObserver, type TraceObserver, type TraceObserverContext, type RoundTripDetail } from './trace-observer.js';
+
 // Nano-RAG — context compaction
 export { ContextRAG, type ContextRAGOptions } from './nano-rag/mod.js';
 
 // Types
 export type {
-  RemoteModelId, WasmModelId, LLMId, ModelId,
+  RemoteModelId, WasmModelId, TransformersModelId, LLMId, ModelId,
   ChatMessage, ContentBlock, McpToolDef, ProviderTool,
   LLMProvider, LLMResponse, ToolCall, AgentMetrics, AgentResult, AgentCallbacks,
   Recipe, McpRecipe,

package/src/loop.ts

@@ -9,7 +9,8 @@ import type {
   LLMProvider, ProviderTool, McpToolDef, AgentCallbacks,
 } from './types.js';
 import type { ToolLayer, SchemaTransformOptions } from './tool-layers.js';
-import { buildToolsFromLayers, buildSystemPromptWithAliases, buildDiscoveryToolsWithAliases, buildSystemPrompt, activateServerTools, toProviderTools, sanitizeServerName, flattenPathMaps } from './tool-layers.js';
+import { buildToolsFromLayers, buildDiscoveryToolsWithAliases, activateServerTools, toProviderTools, sanitizeServerName, flattenPathMaps } from './tool-layers.js';
+import { buildSystemPromptWithAliases, buildSystemPrompt } 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';
@@ -17,7 +18,7 @@ import { autoRepairParams } from './auto-repair.js';
 import { PipelineTrace } from './pipeline-trace.js';
 
 // Re-export buildSystemPrompt for backward compat
-export { buildSystemPrompt } from './tool-layers.js';
+export { buildSystemPrompt } from './prompts/index.js';
 
 const MAX_RESULT_LEN = 10_000;
 
@@ -122,7 +123,7 @@ export interface AgentLoopOptions {
 }
 
 export async function runAgentLoop(
-  userMessage: string,
+  userMessage: string | ContentBlock[],
   options: AgentLoopOptions
 ): Promise<AgentResult> {
   const {
@@ -209,7 +210,6 @@ export async function runAgentLoop(
   const allToolCalls: ToolCall[] = [];
   let lastText = '';
   let finishedNormally = false;
-  let discoveryPhase = false;
   let iterationsWithoutRender = 0;
   let nudgedOnce = false;
   let hasRendered = false;
@@ -320,14 +320,6 @@ export async function runAgentLoop(
     const toolResults: ContentBlock[] = [];
     for (const block of toolBlocks) {
       const call: ToolCall = { id: block.id, name: block.name, args: block.input };
-      const wasDiscovering = discoveryPhase;
-      if (isDiscoveryTool(block.name)) {
-        discoveryPhase = true;
-        call.guided = false;
-      } else {
-        call.guided = wasDiscovering;
-        discoveryPhase = false;
-      }
       const t1 = performance.now();
 
       try {

package/src/notebook-widgets/compact.ts

@@ -0,0 +1,312 @@
+// @ts-nocheck
+// ---------------------------------------------------------------------------
+// notebook-compact — reactive minimalist layout (marimo-like)
+// Left gutter with type label + vertical line, named outputs, fresh/stale status.
+// ---------------------------------------------------------------------------
+
+import {
+  createState, injectStyles, mountRunControls, mountHistoryPanel,
+  setupDnD, deleteCellWithConfirm, restoreCellFromSnapshot, addCell,
+  logHistory, autosize, openShareModal, registerHistoryObserver,
+  buildServersButton,
+  type NotebookState, type NotebookCell,
+} from './shared.js';
+
+export async function render(container: HTMLElement, data: Record<string, unknown>): Promise<() => void> {
+  injectStyles();
+  injectLayoutStyles();
+
+  const state: NotebookState = createState({
+    id: data.id as string,
+    title: data.title as string,
+    mode: (data.mode as any) ?? 'edit',
+    cells: data.cells as any,
+  });
+
+  container.classList.add('nb-root');
+  container.classList.toggle('nb-view-mode', state.mode === 'view');
+
+  container.innerHTML = `
+    <div class="nbc-shell">
+      <div class="nbc-toolbar">
+        <div class="nbc-status">
+          <span class="nbc-status-dot"></span>
+          <span class="nbc-status-text">reactive · 0 cells</span>
+        </div>
+        <div class="nbc-actions">
+          <div class="nb-mode-switch">
+            <button class="nb-mode-edit nb-on">edit</button>
+            <button class="nb-mode-view">view</button>
+          </div>
+          <button class="nb-btn nb-add-cell" data-add="md">+ md</button>
+          <button class="nb-btn nb-add-cell" data-add="sql">+ sql</button>
+          <button class="nb-btn nb-add-cell" data-add="js">+ js</button>
+          <button class="nb-btn nbc-history-btn">⟲ history</button>
+          <span class="nbc-servers-slot"></span>
+          <button class="nb-btn nbc-share-btn">share</button>
+        </div>
+      </div>
+      <div class="nb-history-panel nbc-history-panel"></div>
+      <div class="nbc-cells"></div>
+    </div>`;
+
+  const shell = container.querySelector('.nbc-shell') as HTMLElement;
+  const cellsEl = shell.querySelector('.nbc-cells') as HTMLElement;
+  const historyPanel = shell.querySelector('.nbc-history-panel') as HTMLElement;
+
+  function renderCells() {
+    cellsEl.innerHTML = '';
+    state.cells.forEach((cell) => cellsEl.appendChild(renderCell(cell, state, rerender)));
+    updateStatus();
+  }
+
+  function updateStatus() {
+    const n = state.cells.length;
+    const stale = state.cells.filter((c) => c.status === 'stale').length;
+    (shell.querySelector('.nbc-status-text') as HTMLElement).textContent =
+      stale > 0 ? `reactive · ${n} cells · ${stale} stale` : `reactive · ${n} cells · synced`;
+    (shell.querySelector('.nbc-status-dot') as HTMLElement).classList.toggle('nbc-stale', stale > 0);
+  }
+
+  function rerender() {
+    mountHistoryPanel(historyPanel, state, (snap) => { restoreCellFromSnapshot(state, snap); rerender(); });
+    renderCells();
+  }
+
+  // Toolbar bindings
+  shell.querySelectorAll<HTMLElement>('[data-add]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const type = btn.dataset.add as any;
+      addCell(state, type, { varname: type === 'sql' ? 'rows_' + (state.cells.length + 1) : undefined });
+      rerender();
+    });
+  });
+  (shell.querySelector('.nbc-history-btn') as HTMLElement).addEventListener('click', () => {
+    historyPanel.classList.toggle('nb-open');
+  });
+  (shell.querySelector('.nbc-share-btn') as HTMLElement).addEventListener('click', () => {
+    openShareModal(state, (fmt) => console.log('[notebook-compact] share as', fmt, state));
+  });
+  const editBtn = shell.querySelector('.nb-mode-edit') as HTMLElement;
+  const viewBtn = shell.querySelector('.nb-mode-view') as HTMLElement;
+  editBtn.addEventListener('click', () => {
+    state.mode = 'edit';
+    container.classList.remove('nb-view-mode');
+    editBtn.classList.add('nb-on'); viewBtn.classList.remove('nb-on');
+  });
+  viewBtn.addEventListener('click', () => {
+    state.mode = 'view';
+    container.classList.add('nb-view-mode');
+    viewBtn.classList.add('nb-on'); editBtn.classList.remove('nb-on');
+  });
+
+  buildServersButton(state, shell.querySelector('.nbc-servers-slot') as HTMLElement, data, rerender);
+
+  setupDnD(cellsEl, state, rerender);
+  const unsubHistory = registerHistoryObserver(() => mountHistoryPanel(historyPanel, state, (snap) => { restoreCellFromSnapshot(state, snap); rerender(); }));
+
+  rerender();
+
+  return () => { unsubHistory(); };
+}
+
+// ---------------------------------------------------------------------------
+// Cell rendering (compact layout)
+// ---------------------------------------------------------------------------
+
+function renderCell(cell: NotebookCell, state: NotebookState, rerender: () => void): HTMLElement {
+  const wrap = document.createElement('div');
+  wrap.className = 'nb-cell-wrapper nbc-cell';
+  wrap.dataset.id = cell.id;
+
+  const row = document.createElement('div');
+  row.className = 'nbc-row';
+
+  const handle = document.createElement('span');
+  handle.className = 'nb-drag-handle';
+  handle.draggable = true;
+  handle.textContent = '⋮⋮';
+  row.appendChild(handle);
+
+  const gutter = document.createElement('div');
+  gutter.className = `nbc-gutter nbc-gutter-${cell.type}`;
+  gutter.innerHTML = `<span class="nbc-type-label">${cell.type}</span><span class="nbc-line"></span>`;
+  row.appendChild(gutter);
+
+  const body = document.createElement('div');
+  body.className = 'nbc-body';
+  body.style.minWidth = '0';
+
+  if (cell.type === 'md') {
+    const mdBody = document.createElement('div');
+    mdBody.className = 'nbc-md-body';
+    const ta = document.createElement('textarea');
+    ta.className = 'nb-md-edit';
+    ta.value = cell.content;
+    ta.rows = 2;
+    ta.placeholder = 'write markdown…';
+    ta.addEventListener('input', () => { cell.content = ta.value; autosize(ta); });
+    mdBody.appendChild(ta);
+    body.appendChild(mdBody);
+    setTimeout(() => autosize(ta), 0);
+
+    const del = document.createElement('button');
+    del.className = 'nb-icon-btn nb-danger nbc-md-del';
+    del.textContent = '✕';
+    del.title = 'delete cell';
+    del.addEventListener('click', () => deleteCellWithConfirm(state, cell, (c) => 'markdown cell', rerender));
+    wrap.appendChild(del);
+  } else {
+    const codeCell = document.createElement('div');
+    codeCell.className = 'nb-code-cell nbc-code-cell';
+
+    // Cell title row with run controls FIRST (left), then meta
+    const titleRow = document.createElement('div');
+    titleRow.className = 'nbc-title-row';
+    titleRow.innerHTML = `
+      <span class="nbc-run-controls"></span>
+      ${cell.varname ? `<span class="nbc-arrow-var">→ ${cell.varname}</span>` : ''}
+      <span class="nbc-meta-info">${cell.type === 'sql' ? '4 rows' : 'depends on rows'}</span>
+      <button class="nb-icon-btn nb-toggle-src">${cell.hideSource ? '▸ src' : '◂ src'}</button>
+      <button class="nb-icon-btn nb-toggle-res">${cell.hideResult ? '▸ res' : '◂ res'}</button>
+      <button class="nb-icon-btn nb-danger nbc-code-del">✕</button>
+    `;
+    codeCell.appendChild(titleRow);
+    mountRunControls(titleRow.querySelector('.nbc-run-controls') as HTMLElement, cell, wrap, rerender);
+
+    const codeBody = document.createElement('div');
+    codeBody.className = 'nbc-code-body' + (cell.hideSource ? ' nbc-hidden' : '');
+    const ta = document.createElement('textarea');
+    ta.className = 'nb-code-edit';
+    ta.value = cell.content;
+    ta.rows = 1;
+    ta.spellcheck = false;
+    ta.addEventListener('input', () => { cell.content = ta.value; autosize(ta); cell.status = 'stale'; });
+    codeBody.appendChild(ta);
+    codeCell.appendChild(codeBody);
+    setTimeout(() => autosize(ta), 0);
+
+    const result = document.createElement('div');
+    result.className = 'nbc-result-body' + (cell.hideResult ? ' nbc-hidden' : '');
+    if (cell.type === 'sql') {
+      result.innerHTML = `
+        <div class="nbc-result-row">
+          <span>row_1</span><span>42</span>
+          <span>row_2</span><span>17</span>
+          <span>row_3</span><span>8</span>
+          <span>row_4</span><span>3</span>
+        </div>`;
+    } else {
+      result.className = 'nbc-chart-result' + (cell.hideResult ? ' nbc-hidden' : '');
+      result.innerHTML = `
+        <div class="nbc-bar" style="height:100%"></div>
+        <div class="nbc-bar" style="height:68%"></div>
+        <div class="nbc-bar" style="height:52%"></div>
+        <div class="nbc-bar" style="height:22%"></div>`;
+    }
+    codeCell.appendChild(result);
+    body.appendChild(codeCell);
+
+    (titleRow.querySelector('.nb-toggle-src') as HTMLElement).addEventListener('click', () => { cell.hideSource = !cell.hideSource; rerender(); });
+    (titleRow.querySelector('.nb-toggle-res') as HTMLElement).addEventListener('click', () => { cell.hideResult = !cell.hideResult; rerender(); });
+    (titleRow.querySelector('.nbc-code-del') as HTMLElement).addEventListener('click', () =>
+      deleteCellWithConfirm(state, cell, (c) => `${c.type} cell${c.varname ? ' → ' + c.varname : ''}`, rerender)
+    );
+  }
+
+  row.appendChild(body);
+  wrap.appendChild(row);
+  return wrap;
+}
+
+// ---------------------------------------------------------------------------
+// Layout-specific styles
+// ---------------------------------------------------------------------------
+
+function injectLayoutStyles(): void {
+  if (document.getElementById('nbc-styles')) return;
+  const style = document.createElement('style');
+  style.id = 'nbc-styles';
+  style.textContent = `
+.nbc-shell {
+  background: var(--color-surface); border: 1px solid var(--color-border);
+  border-radius: 12px; padding: 18px;
+}
+.nbc-toolbar {
+  display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
+}
+.nbc-status {
+  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
+  font-size: 11px; color: var(--color-text2);
+  display: inline-flex; align-items: center; gap: 8px;
+}
+.nbc-status-dot {
+  width: 6px; height: 6px; border-radius: 50%;
+  background: var(--color-teal);
+}
+.nbc-status-dot.nbc-stale { background: var(--color-amber); }
+.nbc-actions { display: flex; gap: 6px; align-items: center; }
+.nbc-history-panel { margin-bottom: 12px; }
+
+.nbc-cell { margin-bottom: 14px; position: relative; }
+.nbc-cell:last-child { margin-bottom: 0; }
+.nbc-row {
+  display: grid; grid-template-columns: 20px 34px 1fr; gap: 6px;
+}
+.nbc-gutter {
+  display: flex; flex-direction: column; align-items: center; gap: 6px;
+}
+.nbc-type-label {
+  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
+  font-size: 10px; letter-spacing: 0.12em; color: var(--color-text2);
+}
+.nbc-gutter-sql .nbc-type-label { color: var(--color-accent); }
+.nbc-gutter-js .nbc-type-label { color: var(--color-teal); }
+.nbc-line { width: 1px; flex: 1; background: var(--color-border); }
+.nbc-md-body { padding: 4px 2px; border: 1px dashed transparent; border-radius: 4px; }
+.nbc-md-body:focus-within { border-color: var(--color-border); background: var(--color-bg); }
+.nbc-md-del {
+  position: absolute; top: 4px; right: 4px;
+  opacity: 0; transition: opacity 0.15s;
+}
+.nbc-cell:hover .nbc-md-del { opacity: 0.5; }
+.nbc-md-del:hover { opacity: 1 !important; }
+
+.nbc-code-cell {
+  background: var(--color-bg); border: 1px solid var(--color-border);
+  border-radius: 8px; overflow: hidden;
+  transition: border-color 0.15s;
+}
+.nbc-code-cell:focus-within { border-color: var(--color-border2); }
+.nbc-title-row {
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 12px; border-bottom: 1px solid var(--color-border);
+  background: var(--color-surface2);
+  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
+  font-size: 10.5px; color: var(--color-text2);
+}
+.nbc-title-row .nbc-arrow-var { color: var(--color-accent); }
+.nbc-title-row .nbc-meta-info { margin-right: auto; }
+.nbc-code-body { padding: 10px 14px; }
+.nbc-hidden { display: none !important; }
+.nbc-result-body {
+  padding: 10px 14px;
+  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
+  font-size: 12px;
+  border-top: 1px solid var(--color-border);
+}
+.nbc-result-row {
+  display: grid; grid-template-columns: 1fr auto; gap: 3px 24px;
+  color: var(--color-text2);
+}
+.nbc-result-row span:nth-child(even) {
+  color: var(--color-text1); font-variant-numeric: tabular-nums;
+}
+.nbc-chart-result {
+  padding: 14px; display: flex; align-items: flex-end; gap: 6px;
+  height: 92px; border-top: 1px solid var(--color-border);
+}
+.nbc-bar { flex: 1; background: var(--color-accent); border-radius: 2px 2px 0 0; opacity: 0.55; }
+`;
+  document.head.appendChild(style);
+}