@webmcp-auto-ui/ui 2.5.31 → 2.5.33

package/src/agent/useAgentLoop.svelte.ts

@@ -0,0 +1,396 @@
+/**
+ * useAgentLoop — shared composable for agent loop setup.
+ *
+ * Centralises the duplicated provider selection, Gemma WASM lifecycle,
+ * HawkProvider routing, smart LLM defaults, and TokenTracker wiring that
+ * was copy-pasted across template, recipes, boilerplate, and showcase.
+ *
+ * Usage (Svelte 5, .svelte.ts files or <script lang="ts"> blocks):
+ *
+ *   const agent = createAgentLoop({
+ *     chatApiBase: `${base}/api/chat`,
+ *     hawkApiBase: `${base}/api/hawk`,      // optional
+ *     enabledProviders: ['remote', 'wasm'],  // optional, defaults to all
+ *   });
+ *
+ *   // Read reactive state
+ *   agent.gemmaStatus   // 'idle' | 'loading' | 'ready' | 'error'
+ *   agent.gemmaProgress // 0–100
+ *   agent.tokenMetrics  // { inputTokens, outputTokens, … }
+ *
+ *   // Use inside runAgentLoop
+ *   const result = await runAgentLoop(msg, {
+ *     provider: agent.getProvider(),
+ *     ...agent.runOptions(),
+ *     callbacks: { ... },
+ *   });
+ */
+
+import { canvas } from '@webmcp-auto-ui/sdk/canvas';
+import {
+  RemoteLLMProvider,
+  WasmProvider,
+  HawkProvider,
+  LocalLLMProvider,
+  TokenTracker,
+} from '@webmcp-auto-ui/agent';
+import type { LLMProvider, AgentCallbacks } from '@webmcp-auto-ui/agent';
+
+// ── Types ──────────────────────────────────────────────────────────────────
+
+export type GemmaStatus = 'idle' | 'loading' | 'ready' | 'error';
+
+export type EnabledProvider = 'remote' | 'wasm' | 'hawk' | 'local';
+
+/**
+ * Options for a custom LLM provider registered via `customProviders`.
+ * The factory receives the same progress/status callbacks that useAgentLoop
+ * wires up for Gemma — so Gemma-style loading UI works out of the box.
+ */
+export interface CustomProviderOpts {
+  model: string;
+  onProgress: (progress: number, status: string, loadedBytes?: number, totalBytes?: number) => void;
+  onStatusChange: (status: GemmaStatus) => void;
+}
+
+export interface UseAgentLoopOptions {
+  /** Base URL for the remote (Claude) proxy, e.g. `${base}/api/chat` */
+  chatApiBase: string;
+  /** Base URL for the Hawk proxy, e.g. `${base}/api/hawk` (optional) */
+  hawkApiBase?: string;
+  /** Restrict which providers can be selected. Defaults to all. */
+  enabledProviders?: EnabledProvider[];
+  /** Ollama base URL (only used when 'local' provider is enabled) */
+  localUrl?: string;
+  /** Ollama model name override */
+  localModel?: string;
+  /** Gemma contextSize for WasmProvider (default 32768) */
+  gemmaContextSize?: number;
+  /**
+   * Custom provider registrations. Each entry maps a model-name prefix to a
+   * factory. The factory receives the standard progress/status callbacks so
+   * the GemmaLoader UI works transparently (e.g. TransformersProvider).
+   *
+   * Example (flex):
+   *   customProviders: [{ prefix: 'transformers-', factory: (opts) => new TransformersProvider(opts) }]
+   */
+  customProviders?: Array<{ prefix: string; factory: (opts: CustomProviderOpts) => LLMProvider }>;
+  /**
+   * Optional observer whose callbacks are merged (via `mergeCallbacks`) into
+   * every `runAgentLoop` call. Designed to accept a `TraceObserver` directly.
+   *
+   * Example (flex):
+   *   observer: traceObserver
+   */
+  observer?: { callbacks: Partial<AgentCallbacks> };
+}
+
+export interface AgentRunOptions {
+  /** Schema sanitize option (smart default from LLM) */
+  schemaSanitize: boolean;
+  /** Schema flatten option (smart default from LLM) */
+  schemaFlatten: boolean;
+  /** Max tool result length */
+  maxResultLength: number;
+  /** Whether to truncate tool results */
+  truncateResults: boolean;
+  /** Compress history length (false = disabled) */
+  compressHistory: false | number;
+  /** Whether prompt caching is enabled */
+  cacheEnabled: boolean;
+  /** LLM temperature */
+  temperature: number;
+}
+
+// ── Factory ────────────────────────────────────────────────────────────────
+
+export function createAgentLoop(options: UseAgentLoopOptions) {
+  const {
+    chatApiBase,
+    hawkApiBase,
+    enabledProviders,
+    localUrl = 'http://localhost:11434',
+    localModel = 'llama3.2',
+    gemmaContextSize = 32_768,
+    customProviders = [],
+    observer,
+  } = options;
+
+  const canUse = (p: EnabledProvider) =>
+    !enabledProviders || enabledProviders.includes(p);
+
+  // ── Provider singletons ──────────────────────────────────────────────────
+  const remoteProvider = new RemoteLLMProvider({ proxyUrl: chatApiBase });
+  let hawkProvider: HawkProvider | null = null;
+
+  // ── Gemma state ──────────────────────────────────────────────────────────
+  let gemmaProvider = $state<WasmProvider | null>(null);
+  let gemmaStatus = $state<GemmaStatus>('idle');
+  let gemmaProgress = $state(0);
+  let gemmaElapsed = $state(0);
+  let gemmaLoadedMB = $state(0);
+  let gemmaTotalMB = $state(0);
+  let gemmaLoadStart = 0;
+  let gemmaTimerInterval: ReturnType<typeof setInterval> | null = null;
+
+  // ── Smart defaults state ─────────────────────────────────────────────────
+  let schemaSanitize = $state(true);
+  let schemaFlatten = $state(false);
+  let maxResultLength = $state(10_000);
+  let truncateResults = $state(false);
+  let compressHistoryEnabled = $state(false);
+  let compressPreview = $state(500);
+  let cacheEnabled = $state(true);
+  let temperature = $state(1.0);
+
+  // ── TokenTracker ─────────────────────────────────────────────────────────
+  const tokenTracker = new TokenTracker();
+  let tokenMetrics = $state(tokenTracker.metrics);
+  tokenTracker.subscribe((m) => { tokenMetrics = m; });
+
+  // ── Internal helpers ─────────────────────────────────────────────────────
+  function _startGemmaTimer() {
+    gemmaLoadStart = Date.now();
+    gemmaElapsed = 0;
+    if (gemmaTimerInterval) clearInterval(gemmaTimerInterval);
+    gemmaTimerInterval = setInterval(() => {
+      gemmaElapsed = Math.floor((Date.now() - gemmaLoadStart) / 1000);
+    }, 1000);
+  }
+
+  function _stopGemmaTimer() {
+    if (gemmaTimerInterval) { clearInterval(gemmaTimerInterval); gemmaTimerInterval = null; }
+  }
+
+  function _makeWasmProvider(model: string): WasmProvider {
+    return new WasmProvider({
+      // WasmProviderOptions.model is typed as WasmModelId; cast via unknown for safety
+      model: model as any,
+      contextSize: gemmaContextSize,
+      onProgress: (p, _s, loaded, total) => {
+        gemmaProgress = p * 100;
+        if (loaded) gemmaLoadedMB = Math.round(loaded / 1048576 * 100) / 100;
+        if (total) gemmaTotalMB = Math.round(total / 1048576 * 100) / 100;
+      },
+      onStatusChange: (s: GemmaStatus) => {
+        gemmaStatus = s;
+        if (s === 'loading') _startGemmaTimer();
+        if (s === 'ready' || s === 'error') _stopGemmaTimer();
+      },
+    });
+  }
+
+  // ── Public API ───────────────────────────────────────────────────────────
+
+  return {
+    // Gemma reactive state
+    get gemmaProvider() { return gemmaProvider; },
+    get gemmaStatus() { return gemmaStatus; },
+    get gemmaProgress() { return gemmaProgress; },
+    get gemmaElapsed() { return gemmaElapsed; },
+    get gemmaLoadedMB() { return gemmaLoadedMB; },
+    get gemmaTotalMB() { return gemmaTotalMB; },
+
+    // TokenTracker
+    get tokenTracker() { return tokenTracker; },
+    get tokenMetrics() { return tokenMetrics; },
+
+    // Smart defaults (read/write)
+    get schemaSanitize() { return schemaSanitize; },
+    set schemaSanitize(v: boolean) { schemaSanitize = v; },
+    get schemaFlatten() { return schemaFlatten; },
+    set schemaFlatten(v: boolean) { schemaFlatten = v; },
+    get maxResultLength() { return maxResultLength; },
+    set maxResultLength(v: number) { maxResultLength = v; },
+    get truncateResults() { return truncateResults; },
+    set truncateResults(v: boolean) { truncateResults = v; },
+    get compressHistoryEnabled() { return compressHistoryEnabled; },
+    set compressHistoryEnabled(v: boolean) { compressHistoryEnabled = v; },
+    get compressPreview() { return compressPreview; },
+    set compressPreview(v: number) { compressPreview = v; },
+    get cacheEnabled() { return cacheEnabled; },
+    set cacheEnabled(v: boolean) { cacheEnabled = v; },
+    get temperature() { return temperature; },
+    set temperature(v: number) { temperature = v; },
+
+    /**
+     * Apply smart defaults for the current `canvas.llm` value.
+     * Call this imperatively when the LLM changes (e.g. in a `$effect`).
+     */
+    applySmartDefaults() {
+      const llm = canvas.llm;
+      const isGemma = llm.startsWith('gemma');
+      const isLocal = llm === 'local';
+      schemaSanitize = isLocal ? true : !isGemma;
+      schemaFlatten = isGemma || isLocal;
+      truncateResults = isGemma || isLocal;
+      compressHistoryEnabled = isLocal;
+      if (isGemma) {
+        maxResultLength = 2_000;
+        temperature = 0.7;
+        cacheEnabled = false;
+      } else if (isLocal) {
+        maxResultLength = 3_000;
+      } else {
+        maxResultLength = 10_000;
+        temperature = 1.0;
+        cacheEnabled = true;
+      }
+    },
+
+    /**
+     * Resolve the LLM provider for the current `canvas.llm`.
+     * Manages WasmProvider singleton lifecycle (create / swap model).
+     */
+    getProvider(): LLMProvider {
+      const llm = canvas.llm;
+
+      // Hawk (server-side proxy)
+      if (canUse('hawk') && llm.startsWith('hawk-')) {
+        const model = llm.slice(5);
+        if (!hawkProvider || hawkProvider.model !== model) {
+          hawkProvider = new HawkProvider({ proxyUrl: hawkApiBase ?? `${chatApiBase}/hawk`, model });
+        }
+        return hawkProvider;
+      }
+
+      // Local Ollama
+      if (canUse('local') && llm === 'local') {
+        return new LocalLLMProvider({ baseUrl: localUrl, model: localModel });
+      }
+
+      // Gemma WASM
+      if (canUse('wasm') && (llm === 'gemma-e2b' || llm === 'gemma-e4b')) {
+        if (gemmaProvider && gemmaProvider.model !== llm) {
+          this.unloadGemma();
+        }
+        if (!gemmaProvider) {
+          gemmaProvider = _makeWasmProvider(llm);
+        }
+        return gemmaProvider;
+      }
+
+      // Custom providers (e.g. TransformersProvider registered by the host app)
+      for (const { prefix, factory } of customProviders) {
+        if (llm.startsWith(prefix)) {
+          // Custom providers share the gemma progress/status slots so GemmaLoader
+          // works transparently without extra state in the host component.
+          if (gemmaProvider && (gemmaProvider as unknown as { model?: string }).model !== llm) {
+            this.unloadGemma();
+          }
+          if (!gemmaProvider) {
+            const provider = factory({
+              model: llm,
+              onProgress: (p, _s, loaded, total) => {
+                gemmaProgress = p * 100;
+                if (loaded) gemmaLoadedMB = Math.round(loaded / 1048576 * 100) / 100;
+                if (total) gemmaTotalMB = Math.round(total / 1048576 * 100) / 100;
+              },
+              onStatusChange: (s: GemmaStatus) => {
+                gemmaStatus = s;
+                if (s === 'loading') _startGemmaTimer();
+                if (s === 'ready' || s === 'error') _stopGemmaTimer();
+              },
+            });
+            // Store under gemmaProvider slot so lifecycle (unload, status) works
+            gemmaProvider = provider as unknown as WasmProvider;
+          }
+          return gemmaProvider as unknown as LLMProvider;
+        }
+      }
+
+      // Remote Claude (default)
+      remoteProvider.setModel(llm as Parameters<typeof remoteProvider.setModel>[0]);
+      return remoteProvider;
+    },
+
+    /**
+     * Initialize Gemma (or a custom WASM-style provider) if `canvas.llm` matches
+     * and status is idle. Idempotent — safe to call on every LLM change.
+     */
+    initGemmaIfNeeded() {
+      const llm = canvas.llm;
+      if (gemmaStatus !== 'idle') return;
+      const isGemma = llm === 'gemma-e2b' || llm === 'gemma-e4b';
+      const isCustom = customProviders.some(({ prefix }) => llm.startsWith(prefix));
+      if (isGemma || isCustom) {
+        const p = this.getProvider();
+        // Both WasmProvider and custom providers expose initialize()
+        (p as unknown as { initialize?: () => void }).initialize?.();
+      }
+    },
+
+    /** Destroy and reset the current WasmProvider instance (or custom provider stored in the same slot). */
+    unloadGemma() {
+      (gemmaProvider as unknown as { destroy?: () => void })?.destroy?.();
+      gemmaProvider = null;
+      gemmaStatus = 'idle';
+      gemmaProgress = 0;
+      _stopGemmaTimer();
+    },
+
+    /**
+     * Merge the observer's callbacks (if any) with the host component's own callbacks.
+     * Call this to produce the final `callbacks` object passed to `runAgentLoop`:
+     *
+     *   callbacks: agent.mergeCallbacks({ onWidget, onLLMResponse, ... })
+     *
+     * Each observer callback is invoked AFTER the host callback so host logic
+     * (e.g. agentLogs push) runs first.
+     */
+    mergeCallbacks(userCallbacks: Partial<AgentCallbacks>): Partial<AgentCallbacks> {
+      if (!observer) return userCallbacks;
+      const obs = observer.callbacks;
+      const merged: Partial<AgentCallbacks> = { ...userCallbacks };
+      // For each key in observer.callbacks, wrap with the user callback if present.
+      (Object.keys(obs) as Array<keyof AgentCallbacks>).forEach((key) => {
+        const obsFn = obs[key] as ((...args: unknown[]) => unknown) | undefined;
+        if (!obsFn) return;
+        const userFn = userCallbacks[key] as ((...args: unknown[]) => unknown) | undefined;
+        if (userFn) {
+          (merged as Record<string, unknown>)[key] = (...args: unknown[]) => {
+            const r = (userFn as (...a: unknown[]) => unknown)(...args);
+            (obsFn as (...a: unknown[]) => unknown)(...args);
+            return r;
+          };
+        } else {
+          (merged as Record<string, unknown>)[key] = obsFn;
+        }
+      });
+      return merged;
+    },
+
+    /**
+     * Return the agent loop options derived from current smart defaults.
+     * Spread into `runAgentLoop` options alongside app-specific overrides.
+     */
+    runOptions(): AgentRunOptions {
+      return {
+        schemaSanitize,
+        schemaFlatten,
+        maxResultLength,
+        truncateResults,
+        compressHistory: compressHistoryEnabled ? compressPreview : false,
+        cacheEnabled,
+        temperature,
+      };
+    },
+
+    /** Record an LLM response into the TokenTracker (use in onLLMResponse callback). */
+    recordTokens(response: { usage?: Record<string, number>; stats?: { totalTokens: number } }, latencyMs: number) {
+      const isWasm = canvas.llm?.startsWith('gemma') || canvas.llm?.startsWith('transformers-') || false;
+      if (response.usage) {
+        tokenTracker.record(response.usage as any, latencyMs, isWasm);
+      } else if (response.stats) {
+        tokenTracker.recordEstimate(0, response.stats.totalTokens * 4, latencyMs);
+      }
+    },
+
+    /** Clean up intervals on component destroy. */
+    destroy() {
+      _stopGemmaTimer();
+    },
+  };
+}
+
+export type AgentLoop = ReturnType<typeof createAgentLoop>;

package/src/base/chat-inline.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  interface Props {
+    placeholder?: string;
+    disabled?: boolean;
+    value?: string;
+  }
+
+  let { placeholder = 'Type a message...', disabled = false, value = $bindable('') }: Props = $props();
+
+  let inputEl = $state<HTMLInputElement | null>(null);
+
+  function handleSubmit() {
+    const text = value?.trim();
+    if (!text || disabled) return;
+    inputEl?.dispatchEvent(new CustomEvent('submit', { detail: text, bubbles: true }));
+    value = '';
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  }
+
+  function handleStop() {
+    inputEl?.dispatchEvent(new CustomEvent('stop', { bubbles: true }));
+  }
+</script>
+
+<div class="flex items-center gap-2 w-full">
+  <input
+    bind:this={inputEl}
+    bind:value
+    type="text"
+    {placeholder}
+    {disabled}
+    onkeydown={handleKeydown}
+    class="flex-1 h-9 px-3 rounded-lg border border-border2 bg-surface2 text-sm text-text1
+           placeholder:text-text2/40 focus:outline-none focus:border-accent/50
+           disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+  />
+  {#if disabled}
+    <button
+      type="button"
+      onclick={handleStop}
+      class="h-9 px-3 rounded-lg border border-accent2/40 bg-accent2/10 text-accent2
+             text-xs font-mono hover:bg-accent2/20 transition-colors flex-shrink-0"
+    >
+      stop
+    </button>
+  {:else}
+    <button
+      type="button"
+      onclick={handleSubmit}
+      disabled={!value?.trim()}
+      class="h-9 px-3 rounded-lg border border-accent/40 bg-accent/10 text-accent
+             text-xs font-mono hover:bg-accent/20 disabled:opacity-40 disabled:cursor-not-allowed
+             transition-colors flex-shrink-0"
+    >
+      send
+    </button>
+  {/if}
+</div>

package/src/base/dialog-content.svelte

@@ -4,10 +4,11 @@
 
 	type Props = {
 		class?: string;
+		style?: string;
 		children?: import('svelte').Snippet;
 	};
 
-	let { class: className, children }: Props = $props();
+	let { class: className, style, children }: Props = $props();
 </script>
 
 <Dialog.Portal>
@@ -17,6 +18,7 @@
 			'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 bg-surface border border-border2 rounded-xl shadow-2xl max-w-lg w-full mx-4 p-6',
 			className
 		)}
+		{style}
 	>
 		{@render children?.()}
 	</Dialog.Content>

package/src/components/HeaderControls.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { getTheme } from '../theme/ThemeProvider.svelte';
+  import { toggleUIScale, getUIScale, initUIScale, type UIScale } from '../theme/scale.js';
+  import { THEME_MAP } from '../theme/tokens.js';
+
+  let { compact = false }: { compact?: boolean } = $props();
+
+  // Theme: prefer ThemeProvider context if available; fallback to dataset-driven
+  // toggle so apps without a provider (notebook-viewer) still work.
+  const themeCtx = getTheme();
+
+  let mode = $state<'light' | 'dark'>('light');
+  let scale = $state<UIScale>(1);
+
+  function fallbackToggleTheme() {
+    const root = document.documentElement;
+    const next = root.dataset.theme === 'dark' ? 'light' : 'dark';
+    root.dataset.theme = next;
+    try { localStorage.setItem('webmcp-theme', next); } catch {}
+    const tokens = THEME_MAP[next];
+    if (tokens) for (const [k, v] of Object.entries(tokens)) root.style.setProperty(`--${k}`, v);
+    mode = next;
+  }
+
+  function onToggleTheme() {
+    if (themeCtx) {
+      themeCtx.toggle();
+      mode = themeCtx.mode;
+    } else {
+      fallbackToggleTheme();
+    }
+  }
+
+  function onToggleScale() {
+    scale = toggleUIScale();
+  }
+
+  onMount(() => {
+    initUIScale();
+    scale = getUIScale();
+    if (themeCtx) {
+      mode = themeCtx.mode;
+    } else {
+      mode = (document.documentElement.dataset.theme === 'dark') ? 'dark' : 'light';
+    }
+  });
+
+  // Keep `mode` in sync when the provider updates (e.g. from another component).
+  $effect(() => {
+    if (themeCtx) mode = themeCtx.mode;
+  });
+</script>
+
+<div class="header-controls" class:compact>
+  <button type="button" class="hc-btn" onclick={onToggleTheme} aria-label="Toggle theme"
+          title={mode === 'dark' ? 'Switch to light' : 'Switch to dark'}>
+    {mode === 'dark' ? '☀' : '☾'}
+  </button>
+  <button type="button" class="hc-btn" onclick={onToggleScale} aria-label="Toggle UI scale"
+          title={scale === 1 ? 'Scale UI up (2×)' : 'Reset UI scale'}>
+    {scale === 1 ? '2×' : '1×'}
+  </button>
+</div>
+
+<style>
+  .header-controls { display: inline-flex; gap: 4px; align-items: center; }
+  .hc-btn {
+    display: inline-flex; align-items: center; justify-content: center;
+    height: 28px; min-width: 32px; padding: 0 8px;
+    border: 1px solid var(--border2, var(--border, rgba(127,127,127,0.25)));
+    background: transparent; color: var(--text2, currentColor);
+    border-radius: 6px; cursor: pointer; font-size: 12px; line-height: 1;
+    font-family: inherit; transition: background 0.15s ease, color 0.15s ease;
+  }
+  .hc-btn:hover { background: rgba(127,127,127,0.1); color: var(--text1, currentColor); }
+  .compact .hc-btn { height: 24px; min-width: 28px; padding: 0 6px; font-size: 11px; }
+</style>

package/src/index.ts

@@ -7,6 +7,7 @@ export { DARK_TOKENS, LIGHT_TOKENS, THEME_MAP } from './theme/tokens.js';
 export type { ThemeMode, ThemeOverrides, ThemeTokens } from './theme/tokens.js';
 export { getUIScale, setUIScale, toggleUIScale, initUIScale, isUIScaled } from './theme/scale.js';
 export type { UIScale, UIScaleKey } from './theme/scale.js';
+export { default as HeaderControls } from './components/HeaderControls.svelte';
 
 // Primitives
 export { default as Card } from './primitives/Card.svelte';
@@ -18,47 +19,20 @@ export { default as MarkdownView } from './primitives/MarkdownView.svelte';
 export { default as CodeView } from './primitives/CodeView.svelte';
 export { renderMarkdown, highlightCode, createMarkdownRenderer } from './primitives/markdown-renderer.js';
 
-// Simple widgets (vanilla renderers) — contract: render(container, data): () => void
-export { render as renderStat }    from './widgets/simple/stat.js';
-export { render as renderKv }      from './widgets/simple/kv.js';
-export { render as renderList }    from './widgets/simple/list.js';
-export { render as renderChart }   from './widgets/simple/chart.js';
-export { render as renderAlert }   from './widgets/simple/alert.js';
-export { render as renderCode }    from './widgets/simple/code.js';
-export { render as renderText }    from './widgets/simple/text.js';
-export { render as renderActions } from './widgets/simple/actions.js';
-export { render as renderTags }    from './widgets/simple/tags.js';
+// Widgets are shipped as Svelte 5 custom elements — import the widget file
+// side-effect to register its tag (e.g. `import '@webmcp-auto-ui/ui/widgets/simple/stat.svelte';`
+// then use `<auto-stat data={spec}></auto-stat>`). `WidgetRenderer` does this for you.
 
-// Rich widgets (vanilla renderers)
-export { render as renderStatCard }      from './widgets/rich/stat-card.js';
-export { render as renderDataTable }     from './widgets/rich/data-table.js';
-export { render as renderTimeline }      from './widgets/rich/timeline.js';
-export { render as renderProfile }       from './widgets/rich/profile.js';
-export { render as renderTrombinoscope } from './widgets/rich/trombinoscope.js';
-export { render as renderJsonViewer }    from './widgets/rich/json-viewer.js';
-export { render as renderHemicycle }     from './widgets/rich/hemicycle.js';
-export { render as renderChartRich }     from './widgets/rich/chart-rich.js';
-export { render as renderCards }         from './widgets/rich/cards.js';
-export { render as renderGridData }      from './widgets/rich/grid-data.js';
-export { render as renderSankey }        from './widgets/rich/sankey.js';
-export { render as renderMap }           from './widgets/rich/map.js';
-export { render as renderD3 }            from './widgets/rich/d3.js';
-export { render as renderJsSandbox }     from './widgets/rich/js-sandbox.js';
-export { render as renderLog }           from './widgets/rich/log.js';
-export { render as renderGallery }       from './widgets/rich/gallery.js';
-export { render as renderCarousel }      from './widgets/rich/carousel.js';
-
-// Notebook widget renderer (vanilla)
-export { render as renderNotebook }             from './widgets/notebook/notebook.js';
-export { render as renderRecipeBrowserWidget } from './widgets/notebook/recipe-browser.js';
+// Notebook vanilla renderer (kept — notebook is wrapped by a custom element that
+// delegates to the legacy vanilla code; full Svelte rewrite is Phase 3).
+export { render as renderNotebook } from './widgets/notebook/notebook.js';
 // Notebook types (optional public API)
 export type { NotebookState, NotebookCell } from './widgets/notebook/shared.js';
 // Notebook cell extractors (for hosts that build notebooks from recipes/tools)
 export { extractCellsFromRecipe, extractCellsFromTool, extractCellFromMarkdown, extractCellFromFence } from './widgets/notebook/resource-extractor.js';
 
-// Safe image helper (URL validation + error fallback)
-export { createSafeImage } from './widgets/helpers/safe-image.js';
-export type { SafeImageOptions } from './widgets/helpers/safe-image.js';
+// Safe image Svelte component — prefer this in .svelte code over the legacy helper.
+export { default as SafeImage } from './widgets/SafeImage.svelte';
 
 // Widget export utility
 export { exportWidget, getExportFormats, exportWidgetAs } from './widgets/export-widget.js';
@@ -108,8 +82,12 @@ export { default as ChatPanel } from './agent/ChatPanel.svelte';
 export type { ChatFeedItem, ChatBubble, ChatBlock } from './agent/ChatPanel.svelte';
 export { default as AgentConsole } from './agent/AgentConsole.svelte';
 export { default as SettingsPanel } from './agent/SettingsPanel.svelte';
+export { default as MCPserversList } from './agent/MCPserversList.svelte';
+/** @deprecated Use MCPserversList instead. Alias kept for backward compatibility. */
 export { default as RemoteMCPserversDemo } from './agent/RemoteMCPserversDemo.svelte';
 export { default as WebMCPserversList } from './agent/WebMCPserversList.svelte';
+export { default as RecipeBrowser } from './agent/RecipeBrowser.svelte';
+export { default as ToolBrowser } from './agent/ToolBrowser.svelte';
 export { default as EphemeralBubble } from './agent/EphemeralBubble.svelte';
 export { default as TokenBubble } from './agent/TokenBubble.svelte';
 export { default as DiagnosticModal } from './agent/DiagnosticModal.svelte';

package/src/stores/canvas.svelte.ts

@@ -75,7 +75,6 @@ function createSvelteCanvas() {
     // Setters
     setMode: canvasVanilla.setMode.bind(canvasVanilla),
     setLlm: canvasVanilla.setLlm.bind(canvasVanilla),
-    setMcpUrl: canvasVanilla.setMcpUrl.bind(canvasVanilla),
     setGenerating: canvasVanilla.setGenerating.bind(canvasVanilla),
 
     // Block actions
@@ -91,11 +90,6 @@ function createSvelteCanvas() {
     updateMsg: canvasVanilla.updateMsg.bind(canvasVanilla),
     clearMessages: canvasVanilla.clearMessages.bind(canvasVanilla),
 
-    // MCP
-    setMcpConnecting: canvasVanilla.setMcpConnecting.bind(canvasVanilla),
-    setMcpConnected: canvasVanilla.setMcpConnected.bind(canvasVanilla),
-    setMcpError: canvasVanilla.setMcpError.bind(canvasVanilla),
-
     // Theme
     get themeOverrides() { return themeOverrides; },
     setThemeOverrides: canvasVanilla.setThemeOverrides.bind(canvasVanilla),