@webmcp-auto-ui/sdk 2.5.27 → 2.5.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmcp-auto-ui/sdk",
-  "version": "2.5.27",
+  "version": "2.5.29",
   "description": "Skills CRUD, HyperSkill format, Svelte 5 stores",
   "license": "AGPL-3.0-or-later",
   "type": "module",

package/src/canvas-vanilla.ts

@@ -1,3 +1,3 @@
 // Canvas store — Vanilla (framework-agnostic), no Svelte dependency
 export { canvasVanilla } from './stores/canvas.js';
-export type { Widget, WidgetType, Block, BlockType, Mode, LLMId, ChatMsg, McpToolInfo, CanvasSnapshot } from './stores/canvas.js';
+export type { Widget, WidgetType, Block, BlockType, Mode, LLMId, ChatMsg, McpToolInfo, DataServer, CanvasSnapshot } from './stores/canvas.js';

package/src/canvas.ts

@@ -1,3 +1,3 @@
 // Canvas store — Svelte 5 runes (browser-only, must be imported in Svelte components)
 export { canvas } from './stores/canvas.svelte.js';
-export type { Widget, WidgetType, Block, BlockType, Mode, LLMId, ChatMsg, McpToolInfo } from './stores/canvas.svelte.js';
+export type { Widget, WidgetType, Block, BlockType, Mode, LLMId, ChatMsg, McpToolInfo, DataServer } from './stores/canvas.svelte.js';

package/src/hyperskills.ts

@@ -32,7 +32,10 @@ async function compressGzip(bytes: Uint8Array): Promise<Uint8Array> {
   // @ts-ignore — CompressionStream is part of the DOM lib but may be missing in older TS targets
   const cs = new CompressionStream('gzip');
   const writer = cs.writable.getWriter();
-  writer.write(bytes);
+  // Copy into a fresh Uint8Array to guarantee the underlying buffer is a plain
+  // ArrayBuffer (not SharedArrayBuffer/ArrayBufferLike) — required by
+  // WritableStreamDefaultWriter<BufferSource> under TS 5.x strict lib.
+  writer.write(new Uint8Array(bytes));
   writer.close();
   return new Uint8Array(await new Response(cs.readable).arrayBuffer());
 }
@@ -87,6 +90,7 @@ export function getHsParam(url?: string): string | null {
       return null;
     }
   }
+  if (typeof window === 'undefined') return null;
   return hs.getHsParam();
 }
 

package/src/index.ts

@@ -44,9 +44,8 @@ import { encode, decode, hash, diff } from './hyperskills.js';
 export async function encodeHyperSkill(skill: HyperSkill, sourceUrl?: string): Promise<string> {
   const base = sourceUrl ?? (typeof window !== 'undefined' ? window.location.href.split('?')[0] : 'https://example.com');
   const json = JSON.stringify(skill);
-  // Auto-compress with gzip when payload exceeds 6 KB to keep URLs under nginx limits
-  const compress = json.length > 6144 ? 'gz' as const : undefined;
-  return encode(base, json, compress ? { compress } : {});
+  // Skip gzip for small payloads — overhead exceeds savings under ~1KB.
+  return encode(base, json, { compress: json.length < 1024 ? 'none' : 'gz' });
 }
 
 export async function decodeHyperSkill(urlOrParam: string): Promise<HyperSkill> {
@@ -94,3 +93,6 @@ export type { McpDemoServer } from './mcp-demo-servers.js';
 // Recipe runner — markdown-fence parser + JS/TS/SQL/etc executor over MCP
 export { parseBody, runCode, estimateTokens, safeStringify } from './recipes/index.js';
 export type { ParsedSegment, RunResult, RunLog, RunTab, RecipeData } from './recipes/index.js';
+
+// Short URL — domain-dependent compact token
+export { buildShortUrl, getShortToken } from './short-url.js';

package/src/short-url.ts

@@ -0,0 +1,33 @@
+// Domain-dependent short URL — compact token served from the skill's own domain.
+// Not a dedicated subdomain: the skill host resolves `?n=<token>` to the full state.
+
+import { hash } from './hyperskills.js';
+
+/**
+ * Build a short URL from a source URL and the content to share.
+ * The short token is a prefix of the content hash, resolved server-side.
+ */
+export async function buildShortUrl(sourceUrl: string, content: string): Promise<string> {
+  const h = await hash(sourceUrl, content);
+  const token = h.slice(0, 10);
+  const u = new URL(sourceUrl);
+  u.search = '';
+  u.searchParams.set('n', token);
+  return u.toString();
+}
+
+/**
+ * Read the short token from a URL or param string. Returns null if absent.
+ */
+export function getShortToken(urlOrParam: string): string | null {
+  try {
+    if (urlOrParam.startsWith('?') || urlOrParam.includes('=')) {
+      const sp = new URLSearchParams(urlOrParam.replace(/^\?/, ''));
+      return sp.get('n');
+    }
+    const u = new URL(urlOrParam);
+    return u.searchParams.get('n');
+  } catch {
+    return null;
+  }
+}

package/src/stores/canvas.svelte.ts

@@ -7,10 +7,10 @@
  */
 
 import { canvasVanilla } from './canvas.js';
-import type { Widget, WidgetType, Mode, LLMId, ChatMsg, McpToolInfo } from './canvas.js';
+import type { Widget, WidgetType, Mode, LLMId, ChatMsg, McpToolInfo, DataServer } from './canvas.js';
 
 // Re-export types (including deprecated aliases)
-export type { Widget, WidgetType, Mode, LLMId, ChatMsg, McpToolInfo };
+export type { Widget, WidgetType, Mode, LLMId, ChatMsg, McpToolInfo, DataServer };
 export type { Block, BlockType, CanvasSnapshot } from './canvas.js';
 
 function createCanvas() {
@@ -29,6 +29,7 @@ function createCanvas() {
   let statusColor = $state(canvasVanilla.statusColor);
   let themeOverrides = $state<Record<string, string>>(canvasVanilla.themeOverrides);
   let enabledServerIds = $state<string[]>(canvasVanilla.enabledServerIds);
+  let dataServers = $state<DataServer[]>(canvasVanilla.dataServers);
 
   // ── Derived ─────────────────────────────────────────────────────────────
   const blockCount = $derived(blocks.length);
@@ -51,6 +52,7 @@ function createCanvas() {
     statusColor = s.statusColor;
     themeOverrides = s.themeOverrides;
     enabledServerIds = canvasVanilla.enabledServerIds;
+    dataServers = canvasVanilla.dataServers;
   });
 
   // ── Return public API ───────────────────────────────────────────────────
@@ -112,6 +114,16 @@ function createCanvas() {
     get enabledServerIds() { return enabledServerIds; },
     setEnabledServers: canvasVanilla.setEnabledServers.bind(canvasVanilla),
 
+    // Data servers (multi-MCP) — additive, coexists with mcp* primary fields
+    get dataServers() { return dataServers; },
+    set dataServers(v: DataServer[]) { canvasVanilla.dataServers = v; },
+    addDataServer: canvasVanilla.addDataServer.bind(canvasVanilla),
+    removeDataServer: canvasVanilla.removeDataServer.bind(canvasVanilla),
+    getDataServer: canvasVanilla.getDataServer.bind(canvasVanilla),
+    setDataServerMeta: canvasVanilla.setDataServerMeta.bind(canvasVanilla),
+    setDataServerEnabled: canvasVanilla.setDataServerEnabled.bind(canvasVanilla),
+    toggleDataServer: canvasVanilla.toggleDataServer.bind(canvasVanilla),
+
     // HyperSkill
     buildSkillJSON: canvasVanilla.buildSkillJSON.bind(canvasVanilla),
     buildHyperskillParam: canvasVanilla.buildHyperskillParam.bind(canvasVanilla),

package/src/stores/canvas.ts

@@ -1,12 +1,26 @@
 /**
  * Canvas state store — Vanilla (framework-agnostic)
- * Manages widgets on the canvas, mode, MCP connection, chat history
- *
- * This is the canonical, framework-agnostic version of the canvas store.
- * For Svelte 5 reactivity, use the Svelte wrapper (canvas.svelte.ts)
- * which re-exports this store with $state/$derived reactivity.
+ * Manages widgets on the canvas, mode, MCP connections, chat history.
  *
  * Reactivity: subscribe(fn) / getSnapshot() pattern (useSyncExternalStore compatible).
+ *
+ * ---------------------------------------------------------------------------
+ * Unified server model (2026-04-23 debloat)
+ * ---------------------------------------------------------------------------
+ *
+ * Historically this store had TWO parallel surfaces for MCP servers:
+ *   - `mcpUrl` / `mcpName` / `mcpConnected` / `mcpConnecting` / `mcpTools`
+ *     (flat, single-server or comma-joined multi)
+ *   - `dataServers: DataServer[]` (list, managed by MultiMcpBridge)
+ *
+ * They were actually the same concept. This file now stores a single list
+ * (`_servers`) and derives the flat `mcp*` fields from it. All writes (via
+ * `setMcpConnected`, `addDataServer`, etc.) mutate the same underlying list,
+ * so tools populated by the agent-MCP path are visible to the notebook / data
+ * server consumers and vice-versa.
+ *
+ * The public API shape is preserved (both `mcp*` and `dataServers` / `addDataServer`)
+ * so existing apps keep working without modification.
  */
 
 import { encode, decode } from '../hyperskills.js';
@@ -16,7 +30,7 @@ export type WidgetType =
   | 'stat-card' | 'data-table' | 'timeline' | 'profile' | 'trombinoscope' | 'json-viewer'
   | 'hemicycle' | 'chart-rich' | 'cards' | 'grid-data' | 'sankey' | 'map' | 'log'
   | 'gallery' | 'carousel' | 'd3' | 'js-sandbox'
-  | (string & {}); // accept arbitrary widget types from widget packs while keeping autocompletion
+  | (string & {});
 
 /** @deprecated Use WidgetType */
 export type BlockType = WidgetType;
@@ -46,6 +60,25 @@ export interface McpToolInfo {
   inputSchema?: Record<string, unknown>;
 }
 
+/**
+ * Single MCP server entry — the one true shape.
+ * `primary: true` marks the "agent MCP" (used by the chat/tool-call path) —
+ * at most one server may be primary. Additional servers (data-only) are
+ * non-primary but otherwise identical.
+ */
+export interface DataServer {
+  name: string;         // user-chosen label
+  url: string;
+  kind: 'data';         // legacy field, kept for schema stability
+  enabled: boolean;     // user intent
+  connected: boolean;   // handshake completed
+  connecting?: boolean;
+  primary?: boolean;    // agent MCP when true
+  tools?: McpToolInfo[];
+  recipes?: { name: string; description?: string; body?: string }[];
+  error?: string;
+}
+
 export interface CanvasSnapshot {
   blocks: Widget[];
   mode: Mode;
@@ -61,22 +94,20 @@ export interface CanvasSnapshot {
   statusColor: string;
   themeOverrides: Record<string, string>;
   enabledServerIds: string[];
+  dataServers: DataServer[];
   blockCount: number;
   isEmpty: boolean;
 }
 
 type Listener = () => void;
 
-function uuid() {
-  return 'w_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 5);
-}
+function uuid() { return 'w_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 5); }
+function msgId() { return 'm_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 5); }
 
-function msgId() {
-  return 'm_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 5);
-}
+const NAME_ALIAS: Record<string, string> = { 'moulineuse': 'Tricoteuses' };
+function aliasName(n: string): string { return NAME_ALIAS[n] ?? n; }
 
 function createCanvasVanilla() {
-  // ── Subscribers ────────────────────────────────────────────────────────
   const listeners = new Set<Listener>();
   function notify() { listeners.forEach(fn => fn()); }
 
@@ -84,18 +115,174 @@ function createCanvasVanilla() {
   let _blocks: Widget[] = [];
   let _mode: Mode = 'drag';
   let _llm: LLMId = 'haiku';
-  let _mcpUrl = '';
-  let _mcpConnected = false;
-  let _mcpConnecting = false;
-  let _mcpName = '';
-  const MCP_NAME_MAP: Record<string, string> = { 'moulineuse': 'Tricoteuses' };
-  let _mcpTools: McpToolInfo[] = [];
   let _messages: ChatMsg[] = [];
   let _generating = false;
-  let _statusText = '● no MCP connected';
-  let _statusColor = 'text-zinc-600';
   let _themeOverrides: Record<string, string> = {};
   let _enabledServerIds: string[] = ['autoui'];
+  // Single source of truth for MCP servers — agent MCP entries and data-only
+  // entries all live here. `primary: true` marks the agent MCP.
+  let _servers: DataServer[] = [];
+
+  // ── Helpers over _servers ──────────────────────────────────────────────
+  function primaryServer(): DataServer | undefined {
+    return _servers.find((s) => s.primary);
+  }
+  function connectedServers(): DataServer[] {
+    return _servers.filter((s) => s.connected);
+  }
+  function anyConnecting(): boolean {
+    return _servers.some((s) => s.connecting);
+  }
+  function unionTools(): McpToolInfo[] {
+    const out: McpToolInfo[] = [];
+    for (const s of _servers) if (s.connected && Array.isArray(s.tools)) out.push(...s.tools);
+    return out;
+  }
+  function displayName(): string {
+    const connected = connectedServers();
+    if (connected.length === 0) return '';
+    if (connected.length === 1) return aliasName(connected[0].name);
+    return connected.map((s) => aliasName(s.name)).join(', ');
+  }
+
+  // ── Derived status strings (used by the header / toast) ────────────────
+  function statusText(): string {
+    if (anyConnecting()) return '● connexion…';
+    const errored = _servers.find((s) => s.error && !s.connected);
+    if (errored) return `● erreur: ${errored.error}`;
+    const connected = connectedServers();
+    if (connected.length === 0) return '● no MCP connected';
+    return `● ${displayName()} · ${unionTools().length} tools`;
+  }
+  function statusColor(): string {
+    if (anyConnecting()) return 'text-amber-400';
+    const errored = _servers.find((s) => s.error && !s.connected);
+    if (errored) return 'text-red-400';
+    return connectedServers().length > 0 ? 'text-teal-400' : 'text-zinc-600';
+  }
+
+  // ── Server list actions (public, stable) ───────────────────────────────
+  function addDataServer(desc: { name: string; url: string; primary?: boolean }): DataServer {
+    const existing = _servers.find((s) => s.name === desc.name);
+    if (existing) {
+      if (desc.primary && !existing.primary) {
+        // Promote: there's only one primary. Demote others.
+        _servers = _servers.map((s) => ({ ...s, primary: s.name === desc.name }));
+        notify();
+      }
+      return existing;
+    }
+    const srv: DataServer = {
+      name: desc.name,
+      url: desc.url,
+      kind: 'data',
+      enabled: true,
+      connected: false,
+      primary: !!desc.primary,
+    };
+    if (srv.primary) {
+      // Demote any existing primary before inserting.
+      _servers = _servers.map((s) => ({ ...s, primary: false }));
+    }
+    _servers = [..._servers, srv];
+    notify();
+    return srv;
+  }
+
+  function removeDataServer(name: string): boolean {
+    const before = _servers.length;
+    _servers = _servers.filter((s) => s.name !== name);
+    if (_servers.length !== before) { notify(); return true; }
+    return false;
+  }
+
+  function getDataServer(name: string): DataServer | undefined {
+    return _servers.find((s) => s.name === name);
+  }
+
+  function setDataServerMeta(name: string, patch: Partial<Omit<DataServer, 'name' | 'url' | 'kind'>>): void {
+    const idx = _servers.findIndex((s) => s.name === name);
+    if (idx < 0) return;
+    _servers = _servers.map((s, i) => i === idx ? { ...s, ...patch } : s);
+    notify();
+  }
+
+  function setDataServerEnabled(name: string, enabled: boolean): boolean {
+    const s = _servers.find((x) => x.name === name);
+    if (!s) return false;
+    if (s.enabled === enabled) return true;
+    _servers = _servers.map((x) => x.name === name ? { ...x, enabled } : x);
+    notify();
+    return true;
+  }
+
+  function toggleDataServer(name: string): boolean {
+    const s = _servers.find((x) => x.name === name);
+    if (!s) return false;
+    return setDataServerEnabled(name, !s.enabled);
+  }
+
+  // ── Agent-MCP compatibility layer ──────────────────────────────────────
+  // All these mutate the SAME _servers list; `mcpUrl` targets the primary
+  // entry, creating one if none exists. Apps can equivalently call
+  // addDataServer({primary: true}) + setDataServerMeta(name, ...) directly.
+  function ensurePrimary(url?: string): DataServer {
+    let p = primaryServer();
+    if (p) {
+      if (url && p.url !== url) {
+        _servers = _servers.map((s) => s.name === p!.name ? { ...s, url } : s);
+      }
+      return _servers.find((s) => s.primary)!;
+    }
+    // Create a placeholder primary with a stable name derived from the URL.
+    const nm = url ? new URL(url, 'http://local').host || url : 'primary';
+    _servers = [..._servers, {
+      name: nm, url: url ?? '', kind: 'data', enabled: true, connected: false, primary: true,
+    }];
+    return _servers[_servers.length - 1]!;
+  }
+
+  function setMcpUrl(u: string): void {
+    // Update the primary server's URL (create one if none).
+    ensurePrimary(u);
+    notify();
+  }
+
+  function setMcpConnecting(connecting: boolean): void {
+    const p = ensurePrimary();
+    _servers = _servers.map((s) => s.name === p.name ? { ...s, connecting } : s);
+    notify();
+  }
+
+  function setMcpConnected(connected: boolean, name?: string, tools?: McpToolInfo[]): void {
+    if (!connected) {
+      // Disconnect all — agent-level disconnect affects the primary and
+      // traditionally cleared the flat tools. Mirror that by disconnecting
+      // all primary-flagged servers.
+      const p = primaryServer();
+      if (p) {
+        _servers = _servers.map((s) => s.primary
+          ? { ...s, connected: false, connecting: false, tools: [], error: undefined }
+          : s);
+      }
+      notify();
+      return;
+    }
+    const p = ensurePrimary();
+    const newName = name && name.length > 0 ? name : p.name;
+    _servers = _servers.map((s) => s.name === p.name
+      ? { ...s, name: newName, connected: true, connecting: false, tools: tools ?? s.tools ?? [], error: undefined }
+      : s);
+    notify();
+  }
+
+  function setMcpError(err: string): void {
+    const p = ensurePrimary();
+    _servers = _servers.map((s) => s.name === p.name
+      ? { ...s, connected: false, connecting: false, error: err }
+      : s);
+    notify();
+  }
 
   // ── Widget actions ─────────────────────────────────────────────────────
   function addWidget(type: WidgetType, data: Record<string, unknown> = {}): Widget {
@@ -104,20 +291,15 @@ function createCanvasVanilla() {
     notify();
     return widget;
   }
-
-  /** @deprecated Use addWidget */
   const addBlock = addWidget;
-
   function removeBlock(id: string) {
     _blocks = _blocks.filter((b) => b.id !== id);
     notify();
   }
-
   function updateBlock(id: string, data: Partial<Record<string, unknown>>) {
     _blocks = _blocks.map((b) => b.id === id ? { ...b, data: { ...b.data, ...data } } : b);
     notify();
   }
-
   function moveBlock(fromId: string, toId: string) {
     const fi = _blocks.findIndex((b) => b.id === fromId);
     const ti = _blocks.findIndex((b) => b.id === toId);
@@ -128,16 +310,8 @@ function createCanvasVanilla() {
     _blocks = next;
     notify();
   }
-
-  function clearBlocks() {
-    _blocks = [];
-    notify();
-  }
-
-  function setBlocks(newBlocks: Widget[]) {
-    _blocks = newBlocks;
-    notify();
-  }
+  function clearBlocks() { _blocks = []; notify(); }
+  function setBlocks(newBlocks: Widget[]) { _blocks = newBlocks; notify(); }
 
   // ── Chat ───────────────────────────────────────────────────────────────
   function addMsg(role: ChatMsg['role'], content: string, thinking = false): ChatMsg {
@@ -146,52 +320,11 @@ function createCanvasVanilla() {
     notify();
     return msg;
   }
-
   function updateMsg(id: string, content: string, thinking = false) {
     _messages = _messages.map((m) => m.id === id ? { ...m, content, thinking } : m);
     notify();
   }
-
-  function clearMessages() {
-    _messages = [];
-    notify();
-  }
-
-  // ── MCP ────────────────────────────────────────────────────────────────
-  function setMcpConnecting(connecting: boolean) {
-    _mcpConnecting = connecting;
-    if (connecting) {
-      _statusText = '● connexion…';
-      _statusColor = 'text-amber-400';
-    }
-    notify();
-  }
-
-  function setMcpConnected(
-    connected: boolean,
-    name?: string,
-    tools?: McpToolInfo[]
-  ) {
-    _mcpConnected = connected;
-    if (name) _mcpName = name;
-    if (tools) _mcpTools = tools;
-    if (connected) {
-      _statusText = `● ${name} · ${tools?.length ?? 0} tools`;
-      _statusColor = 'text-teal-400';
-    } else {
-      _statusText = '● no MCP connected';
-      _statusColor = 'text-zinc-600';
-    }
-    notify();
-  }
-
-  function setMcpError(err: string) {
-    _mcpConnected = false;
-    _mcpConnecting = false;
-    _statusText = `● erreur: ${err}`;
-    _statusColor = 'text-red-400';
-    notify();
-  }
+  function clearMessages() { _messages = []; notify(); }
 
   // ── Theme ──────────────────────────────────────────────────────────────
   function setThemeOverrides(overrides: Record<string, string>) {
@@ -199,7 +332,7 @@ function createCanvasVanilla() {
     notify();
   }
 
-  // ── Enabled servers ───────────────────────────────────────────────────
+  // ── Enabled servers (kept for UI server catalogue) ─────────────────────
   function setEnabledServers(ids: string[]) {
     _enabledServerIds = ids;
     notify();
@@ -207,11 +340,12 @@ function createCanvasVanilla() {
 
   // ── HyperSkill ─────────────────────────────────────────────────────────
   function buildSkillJSON() {
+    const p = primaryServer();
     const skill: Record<string, unknown> = {
       version: '1.0',
       name: 'skill-' + Date.now(),
       created: new Date().toISOString(),
-      mcp: _mcpUrl,
+      mcp: p?.url ?? '',
       llm: _llm,
       blocks: _blocks.map((b) => ({ type: b.type, data: JSON.parse(JSON.stringify(b.data)) })),
     };
@@ -222,8 +356,8 @@ function createCanvasVanilla() {
 
   async function buildHyperskillParam(): Promise<string> {
     const json = JSON.stringify(buildSkillJSON());
-    const compress = json.length > 6144 ? 'gz' as const : undefined;
-    const url = await encode('https://x.local', json, compress ? { compress } : {});
+    // Skip gzip for small payloads — overhead exceeds savings under ~1KB.
+    const url = await encode('https://x.local', json, { compress: json.length < 1024 ? 'none' : 'gz' });
     return new URL(url).searchParams.get('hs')!;
   }
 
@@ -234,7 +368,7 @@ function createCanvasVanilla() {
       servers?: string[];
       blocks?: { type: WidgetType; data: Record<string, unknown> }[];
     }) {
-      if (skill.mcp) _mcpUrl = skill.mcp;
+      if (skill.mcp) ensurePrimary(skill.mcp);
       if (skill.llm) _llm = skill.llm;
       if (skill.theme) _themeOverrides = skill.theme;
       if (skill.servers) _enabledServerIds = skill.servers;
@@ -243,15 +377,11 @@ function createCanvasVanilla() {
       }
       notify();
     }
-
-    // Try hyperskills NPM decode (handles gz., br., and plain base64)
     try {
       const { content: json } = await decode(param);
       applySkill(JSON.parse(json));
       return true;
-    } catch { /* fall through to legacy */ }
-
-    // Fallback: legacy format (plain base64 with escape/unescape)
+    } catch { /* fall through */ }
     try {
       let b64 = param.replace(/ /g, '+').replace(/-/g, '+').replace(/_/g, '/');
       while (b64.length % 4) b64 += '=';
@@ -263,14 +393,19 @@ function createCanvasVanilla() {
     }
   }
 
-  // ── loadFromUrl ────────────────────────────────────────────────────────
   async function loadFromUrl(url: string): Promise<boolean> {
     try {
       const { content: raw } = await decode(url);
-      const decoded = JSON.parse(raw) as { meta?: Record<string, unknown>; content?: { blocks?: { type: WidgetType; data: Record<string, unknown> }[] } };
-      if (decoded.meta?.mcp) _mcpUrl = decoded.meta.mcp as string;
+      const decoded = JSON.parse(raw) as {
+        meta?: Record<string, unknown>;
+        content?: { blocks?: { type: WidgetType; data: Record<string, unknown> }[] };
+        servers?: string[];
+      };
+      if (decoded.meta?.mcp) ensurePrimary(decoded.meta.mcp as string);
       if (decoded.meta?.llm) _llm = decoded.meta.llm as LLMId;
       if (decoded.meta?.theme) _themeOverrides = decoded.meta.theme as Record<string, string>;
+      const servers = (decoded.servers ?? (decoded.meta?.servers as string[] | undefined));
+      if (Array.isArray(servers)) _enabledServerIds = servers;
       if (decoded.content?.blocks) _blocks = decoded.content.blocks.map((b) => ({ id: uuid(), type: b.type, data: b.data }));
       notify();
       return true;
@@ -279,89 +414,86 @@ function createCanvasVanilla() {
     }
   }
 
-  // ── Snapshot ────────────────────────────────────────────────────────────
+  // ── Snapshot (fields kept for API stability) ───────────────────────────
   function getSnapshot(): CanvasSnapshot {
+    const p = primaryServer();
     return {
       blocks: _blocks,
       mode: _mode,
       llm: _llm,
-      mcpUrl: _mcpUrl,
-      mcpConnected: _mcpConnected,
-      mcpConnecting: _mcpConnecting,
-      mcpName: _mcpName,
-      mcpTools: _mcpTools,
+      mcpUrl: p?.url ?? '',
+      mcpConnected: p?.connected ?? false,
+      mcpConnecting: anyConnecting(),
+      mcpName: displayName(),
+      mcpTools: unionTools(),
       messages: _messages,
       generating: _generating,
-      statusText: _statusText,
-      statusColor: _statusColor,
+      statusText: statusText(),
+      statusColor: statusColor(),
       themeOverrides: _themeOverrides,
       enabledServerIds: _enabledServerIds,
+      dataServers: _servers,
       blockCount: _blocks.length,
       isEmpty: _blocks.length === 0,
     };
   }
 
-  // ── Subscribe ──────────────────────────────────────────────────────────
   function subscribe(fn: Listener): () => void {
     listeners.add(fn);
     return () => { listeners.delete(fn); };
   }
 
-  // ── Return public API ──────────────────────────────────────────────────
   return {
-    // State getters + setters
+    // Reactive getters (read-side)
     get blocks() { return _blocks; },
     get mode() { return _mode; },
     set mode(v: Mode) { _mode = v; notify(); },
     get llm() { return _llm; },
     set llm(v: LLMId) { _llm = v; notify(); },
-    get mcpUrl() { return _mcpUrl; },
-    set mcpUrl(v: string) { _mcpUrl = v; notify(); },
-    get mcpConnected() { return _mcpConnected; },
-    get mcpConnecting() { return _mcpConnecting; },
-    get mcpName() { return MCP_NAME_MAP[_mcpName] ?? _mcpName; },
-    get mcpTools() { return _mcpTools; },
+    get mcpUrl() { return primaryServer()?.url ?? ''; },
+    set mcpUrl(v: string) { setMcpUrl(v); },
+    get mcpConnected() { return primaryServer()?.connected ?? false; },
+    get mcpConnecting() { return anyConnecting(); },
+    get mcpName() { return displayName(); },
+    get mcpTools() { return unionTools(); },
     get messages() { return _messages; },
     get generating() { return _generating; },
     set generating(v: boolean) { _generating = v; notify(); },
-    get statusText() { return _statusText; },
-    get statusColor() { return _statusColor; },
+    get statusText() { return statusText(); },
+    get statusColor() { return statusColor(); },
     get blockCount() { return _blocks.length; },
     get isEmpty() { return _blocks.length === 0; },
 
-    // Setters (kept for backward compat)
     setMode(m: Mode) { _mode = m; notify(); },
     setLlm(l: LLMId) { _llm = l; notify(); },
-    setMcpUrl(u: string) { _mcpUrl = u; notify(); },
+    setMcpUrl,
     setGenerating(g: boolean) { _generating = g; notify(); },
 
-    // Widget actions (primary name)
-    addWidget,
-
-    // Backward compat alias
-    addBlock,
-
-    // Block actions (kept as-is)
+    addWidget, addBlock,
     removeBlock, updateBlock, moveBlock, clearBlocks, setBlocks,
-
-    // Chat
     addMsg, updateMsg, clearMessages,
 
-    // MCP
     setMcpConnecting, setMcpConnected, setMcpError,
 
-    // Theme
     get themeOverrides() { return _themeOverrides; },
     setThemeOverrides,
 
-    // Enabled servers
     get enabledServerIds() { return _enabledServerIds; },
     setEnabledServers,
 
-    // HyperSkill
+    // Server list — unified store. `dataServers` kept as accessor name for
+    // schema/API stability; it returns ALL servers (primary + data-only).
+    get dataServers() { return _servers; },
+    set dataServers(v: DataServer[]) { _servers = Array.isArray(v) ? v : []; notify(); },
+    addDataServer,
+    removeDataServer,
+    getDataServer,
+    setDataServerMeta,
+    setDataServerEnabled,
+    toggleDataServer,
+
     buildSkillJSON, buildHyperskillParam, loadFromParam, loadFromUrl,
 
-    // Framework-agnostic reactivity
     subscribe,
     getSnapshot,
   };