npm - pmx-canvas - Versions diffs - 0.1.13 → 0.1.15 - Mend

pmx-canvas 0.1.13 → 0.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/CHANGELOG.md +163 -0
package/Readme.md +108 -1058
package/dist/canvas/global.css +141 -0
package/dist/canvas/index.js +137 -87
package/dist/json-render/index.css +1 -1
package/dist/types/client/nodes/ExtAppFrame.d.ts +2 -3
package/dist/types/client/nodes/HtmlNode.d.ts +5 -0
package/dist/types/client/nodes/McpAppNode.d.ts +2 -1
package/dist/types/client/state/canvas-store.d.ts +5 -1
package/dist/types/client/state/intent-bridge.d.ts +3 -1
package/dist/types/client/types.d.ts +2 -2
package/dist/types/json-render/catalog.d.ts +1 -1
package/dist/types/mcp/canvas-access.d.ts +7 -1
package/dist/types/server/agent-context.d.ts +1 -0
package/dist/types/server/canvas-operations.d.ts +12 -2
package/dist/types/server/canvas-provenance.d.ts +1 -1
package/dist/types/server/canvas-serialization.d.ts +3 -0
package/dist/types/server/canvas-state.d.ts +51 -4
package/dist/types/server/demo.d.ts +5 -0
package/dist/types/server/diagram-presets.d.ts +4 -0
package/dist/types/server/index.d.ts +21 -3
package/dist/types/server/mcp-app-runtime.d.ts +1 -0
package/dist/types/server/web-artifacts.d.ts +18 -0
package/dist/types/shared/canvas-node-kind.d.ts +5 -0
package/package.json +1 -1
package/skills/pmx-canvas/SKILL.md +43 -0
package/skills/pmx-canvas-testing/SKILL.md +17 -0
package/src/cli/agent.ts +66 -5
package/src/cli/index.ts +2 -23
package/src/client/canvas/AttentionHistory.tsx +14 -1
package/src/client/canvas/CanvasNode.tsx +1 -1
package/src/client/canvas/CanvasViewport.tsx +3 -0
package/src/client/canvas/DockedNode.tsx +110 -12
package/src/client/canvas/ExpandedNodeOverlay.tsx +8 -3
package/src/client/canvas/Minimap.tsx +1 -0
package/src/client/icons.tsx +1 -0
package/src/client/nodes/ExtAppFrame.tsx +10 -35
package/src/client/nodes/HtmlNode.tsx +151 -0
package/src/client/nodes/McpAppNode.tsx +2 -2
package/src/client/state/canvas-store.ts +24 -2
package/src/client/state/intent-bridge.ts +4 -3
package/src/client/state/sse-bridge.ts +2 -0
package/src/client/theme/global.css +141 -0
package/src/client/types.ts +3 -0
package/src/mcp/canvas-access.ts +34 -7
package/src/mcp/server.ts +199 -26
package/src/server/agent-context.ts +50 -3
package/src/server/canvas-operations.ts +55 -3
package/src/server/canvas-provenance.ts +2 -1
package/src/server/canvas-serialization.ts +38 -13
package/src/server/canvas-state.ts +305 -34
package/src/server/demo.ts +792 -0
package/src/server/diagram-presets.ts +45 -25
package/src/server/index.ts +64 -7
package/src/server/mcp-app-runtime.ts +15 -5
package/src/server/server.ts +169 -63
package/src/server/web-artifacts.ts +116 -3
package/src/shared/canvas-node-kind.ts +14 -0

package/src/client/nodes/HtmlNode.tsx ADDED Viewed

@@ -0,0 +1,151 @@
+import { useMemo } from 'preact/hooks';
+import { getCanvasTokens } from '../theme/tokens';
+import type { CanvasNodeState } from '../types';
+/**
+ * Strip characters that could break out of a CSS custom-property value context
+ * before interpolating into a `<style>` block. The expected token shape is a
+ * CSS color (`#abc`, `rgb(...)`) or font-family list, neither of which needs
+ * `<`, `>`, `{`, `}`, `;`, or backticks. Defense-in-depth against a future
+ * scenario where theme tokens become runtime-editable.
+ */
+function sanitizeCssTokenValue(value: string): string {
+  return value.replace(/[<>{};`\\]/g, '').trim();
+}
+/**
+ * Build a `<style>` block that exposes canvas theme tokens to the iframe under
+ * both the canonical `--c-*` names and common `--color-*` aliases. Also sets
+ * sensible body defaults (font, bg, color) so authored HTML inherits the look.
+ */
+function buildThemeStyleBlock(): string {
+  const raw = getCanvasTokens();
+  const t = {
+    bg: sanitizeCssTokenValue(raw.bg),
+    panel: sanitizeCssTokenValue(raw.panel),
+    panelSoft: sanitizeCssTokenValue(raw.panelSoft),
+    line: sanitizeCssTokenValue(raw.line),
+    text: sanitizeCssTokenValue(raw.text),
+    textSoft: sanitizeCssTokenValue(raw.textSoft),
+    muted: sanitizeCssTokenValue(raw.muted),
+    dim: sanitizeCssTokenValue(raw.dim),
+    accent: sanitizeCssTokenValue(raw.accent),
+    ok: sanitizeCssTokenValue(raw.ok),
+    warn: sanitizeCssTokenValue(raw.warn),
+    warnAlt: sanitizeCssTokenValue(raw.warnAlt),
+    danger: sanitizeCssTokenValue(raw.danger),
+    purple: sanitizeCssTokenValue(raw.purple),
+    font: sanitizeCssTokenValue(raw.font),
+    mono: sanitizeCssTokenValue(raw.mono),
+  };
+  return `
+    :root {
+      --c-bg: ${t.bg};
+      --c-panel: ${t.panel};
+      --c-panel-soft: ${t.panelSoft};
+      --c-line: ${t.line};
+      --c-text: ${t.text};
+      --c-text-soft: ${t.textSoft};
+      --c-muted: ${t.muted};
+      --c-dim: ${t.dim};
+      --c-accent: ${t.accent};
+      --c-ok: ${t.ok};
+      --c-warn: ${t.warn};
+      --c-warn-alt: ${t.warnAlt};
+      --c-danger: ${t.danger};
+      --c-purple: ${t.purple};
+      /* Common aliases authored HTML might use. */
+      --color-bg: ${t.bg};
+      --color-panel: ${t.panel};
+      --color-surface: ${t.panelSoft};
+      --color-border: ${t.line};
+      --color-text: ${t.text};
+      --color-text-primary: ${t.text};
+      --color-text-secondary: ${t.textSoft};
+      --color-text-muted: ${t.muted};
+      --color-text-dim: ${t.dim};
+      --color-accent: ${t.accent};
+      --color-success: ${t.ok};
+      --color-warning: ${t.warn};
+      --color-danger: ${t.danger};
+      --font: ${t.font};
+      --font-sans: ${t.font};
+      --font-mono: ${t.mono};
+      color-scheme: dark light;
+    }
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: ${t.bg};
+      color: ${t.text};
+      font-family: ${t.font || 'system-ui, sans-serif'};
+      font-size: 14px;
+      line-height: 1.5;
+    }
+    body { padding: 16px; box-sizing: border-box; }
+    a { color: ${t.accent}; }
+  `;
+}
+/**
+ * Inject the theme style block into the user-supplied HTML. If the document has
+ * a `<head>`, inject at the top of head; otherwise wrap the content in a full
+ * document. Returns a complete HTML string suitable for `srcdoc`.
+ */
+function buildSrcDoc(userHtml: string): string {
+  const styleBlock = `<style data-pmx-canvas-theme>${buildThemeStyleBlock()}</style>`;
+  const trimmed = userHtml.trim();
+  const isFullDoc = /<html[\s>]/i.test(trimmed);
+  if (isFullDoc) {
+    if (/<head[\s>]/i.test(trimmed)) {
+      return trimmed.replace(/<head([^>]*)>/i, `<head$1>${styleBlock}`);
+    }
+    // Has <html> but no <head> — inject one.
+    return trimmed.replace(/<html([^>]*)>/i, `<html$1><head>${styleBlock}</head>`);
+  }
+  // Fragment — wrap in full document.
+  return `<!doctype html><html><head><meta charset="utf-8">${styleBlock}</head><body>${userHtml}</body></html>`;
+}
+export function HtmlNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
+  const html = typeof node.data.html === 'string'
+    ? node.data.html
+    : typeof node.data.content === 'string'
+      ? node.data.content
+      : '';
+  const srcDoc = useMemo(() => (html ? buildSrcDoc(html) : ''), [html]);
+  if (!html) {
+    return (
+      <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>
+        No HTML content set
+      </div>
+    );
+  }
+  // SECURITY: sandbox is intentionally `allow-scripts` ONLY. Do NOT add
+  // `allow-same-origin` (would grant the iframe access to parent localStorage
+  // and credentialed requests to the canvas origin), `allow-top-navigation`
+  // (would let scripts redirect the parent window), or `allow-forms` (would
+  // let the iframe POST back to the host). The whole html-node tier assumes
+  // arbitrary author code runs inside this exact sandbox.
+  return (
+    <iframe
+      title={typeof node.data.title === 'string' ? node.data.title : 'HTML node'}
+      sandbox="allow-scripts"
+      srcdoc={srcDoc}
+      style={{
+        width: '100%',
+        height: '100%',
+        minHeight: expanded ? '70vh' : '300px',
+        border: 'none',
+        background: 'var(--c-bg)',
+        borderRadius: '6px',
+        display: 'block',
+      }}
+    />
+  );
+}

package/src/client/nodes/McpAppNode.tsx CHANGED Viewed

@@ -13,9 +13,9 @@ function withTheme(url: string): string {
   }
 }
-export function McpAppNode({ node }: { node: CanvasNodeState }) {
+export function McpAppNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   if (node.data.mode === 'ext-app') {
-    return <ExtAppFrame node={node} />;
+    return <ExtAppFrame node={node} expanded={expanded} />;
   }
   const url = withTheme((node.data.url as string) || '');

package/src/client/state/canvas-store.ts CHANGED Viewed

@@ -277,6 +277,28 @@ export function toggleCollapsed(id: string): void {
   updateNode(id, { collapsed: !existing.collapsed });
 }
+// Collapse every docked context node. Used to enforce mutual exclusion between
+// the Context side panel and the Updates side panel (they share the same
+// right-edge anchor and would otherwise visually collide).
+export function collapseDockedContextNodes(): void {
+  for (const node of nodes.value.values()) {
+    if (node.type === 'context' && node.dockPosition === 'right' && !node.collapsed) {
+      updateNode(node.id, { collapsed: true });
+    }
+  }
+}
+// True iff at least one docked context node is currently expanded. Used by the
+// Updates pill to hide itself while the Context panel is open.
+export const hasOpenDockedContextPanel = computed(() => {
+  for (const node of nodes.value.values()) {
+    if (node.type === 'context' && node.dockPosition === 'right' && !node.collapsed) {
+      return true;
+    }
+  }
+  return false;
+});
 export function dockNode(id: string, position: 'left' | 'right'): void {
   const existing = nodes.value.get(id);
   if (!existing) return;
@@ -411,7 +433,7 @@ export function cancelViewportAnimation(): void {
 // ── Persistence ───────────────────────────────────────────────
 const STORAGE_KEY = 'pmx-canvas-layout';
-export function persistLayout(): void {
+export function persistLayout(options: { recordHistory?: boolean } = {}): void {
   try {
     const allNodes = Array.from(nodes.value.values());
     const nodeUpdates = allNodes.map((n) => ({
@@ -444,7 +466,7 @@ export function persistLayout(): void {
       contextPinnedNodeIds: Array.from(contextPinnedNodeIds.value),
     };
     localStorage.setItem(STORAGE_KEY, JSON.stringify(layout));
-    void pushCanvasUpdate(nodeUpdates);
+    void pushCanvasUpdate(nodeUpdates, options);
   } catch (error) {
     logCanvasStoreError('persistLayout', error);
   }

package/src/client/state/intent-bridge.ts CHANGED Viewed

@@ -101,7 +101,7 @@ export async function openWorkbenchFile(path: string): Promise<{ ok: boolean }>
 /** Fetch canvas state from server. */
 export async function fetchCanvasState(): Promise<Record<string, unknown>> {
-  return requestJson('fetchCanvasState', '/api/canvas/state', {});
+  return requestJson('fetchCanvasState', '/api/canvas/state?includeBlobs=true', {});
 }
 /** Fetch available slash commands for prompt completion. */
@@ -148,11 +148,12 @@ export async function pushCanvasUpdate(
     collapsed?: boolean;
     dockPosition?: 'left' | 'right' | null;
   }>,
+  options: { recordHistory?: boolean } = {},
 ): Promise<void> {
   await requestBestEffort('pushCanvasUpdate', '/api/canvas/update', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ updates }),
+    body: JSON.stringify({ updates, ...(options.recordHistory === false ? { recordHistory: false } : {}) }),
   });
 }
@@ -286,7 +287,7 @@ export interface CanvasSnapshotInfo {
 }
 export async function listSnapshots(): Promise<CanvasSnapshotInfo[]> {
-  return requestJson<CanvasSnapshotInfo[]>('listSnapshots', '/api/canvas/snapshots', []);
+  return requestJson<CanvasSnapshotInfo[]>('listSnapshots', '/api/canvas/snapshots?all=true', []);
 }
 export async function saveSnapshot(name: string): Promise<{ ok: boolean; snapshot?: CanvasSnapshotInfo }> {

package/src/client/state/sse-bridge.ts CHANGED Viewed

@@ -83,6 +83,7 @@ const DEFAULT_POSITIONS: Record<
   trace: { x: 40, y: 900, w: 200, h: 56 },
   file: { x: 380, y: 80, w: 720, h: 600 },
   image: { x: 380, y: 80, w: 720, h: 520 },
+  html: { x: 380, y: 80, w: 720, h: 640 },
   group: { x: 220, y: 60, w: 840, h: 560 },
   prompt: { x: 380, y: 1260, w: 520, h: 400 },
   response: { x: 380, y: 1480, w: 720, h: 400 },
@@ -529,6 +530,7 @@ function handleExtAppOpen(data: Record<string, unknown>): void {
   if (typeof data.toolCallId !== 'string' || !data.toolCallId) return;
   ensureExtAppNode({
     toolCallId: data.toolCallId,
+    ...(typeof data.nodeId === 'string' && data.nodeId.length > 0 ? { nodeId: data.nodeId } : {}),
     title: data.title,
     html: data.html,
     toolInput: data.toolInput,

package/src/client/theme/global.css CHANGED Viewed

@@ -1844,6 +1844,147 @@ body,
   max-width: 200px;
 }
+/* Context dock — collapsed pill mirrors Updates pill, sits above it */
+.context-dock-tab {
+  position: fixed;
+  top: 92px;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px 8px 14px;
+  background: color-mix(in srgb, var(--c-panel-glass) 96%, transparent);
+  backdrop-filter: blur(16px);
+  border: 1px solid color-mix(in srgb, var(--c-line) 82%, var(--c-accent) 18%);
+  border-right: 0;
+  border-radius: 14px 0 0 14px;
+  box-shadow: 0 12px 36px var(--c-shadow);
+  color: var(--c-text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  z-index: 60;
+}
+.context-dock-tab:hover {
+  border-color: color-mix(in srgb, var(--c-accent) 40%, var(--c-line) 60%);
+  color: var(--c-accent);
+}
+.context-dock-tab svg {
+  display: block;
+  color: var(--c-accent);
+  flex-shrink: 0;
+}
+.context-dock-tab-label {
+  white-space: nowrap;
+}
+.context-dock-tab-badge {
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9px;
+  background: var(--c-accent);
+  color: var(--c-contrast-fg);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
+}
+/* Context dock — expanded panel anchored top-right edge.
+   Mutually exclusive with the Updates panel (see DockedNode.tsx and
+   AttentionHistory.tsx) — opening one collapses the other, so they can both
+   share the same right: 18px anchor without overlapping. */
+.context-dock-panel {
+  position: fixed;
+  top: 92px;
+  right: 18px;
+  width: min(360px, calc(100vw - 24px));
+  max-height: calc(100vh - 110px);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+  background: color-mix(in srgb, var(--c-panel-glass) 96%, transparent);
+  backdrop-filter: blur(16px);
+  border: 1px solid color-mix(in srgb, var(--c-line) 82%, var(--c-accent) 18%);
+  border-radius: 18px;
+  box-shadow: 0 14px 36px var(--c-shadow), 0 0 0 1px color-mix(in srgb, var(--c-accent) 8%, transparent);
+  z-index: 10001;
+  overflow: hidden;
+}
+.context-dock-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 2px 2px 4px;
+  flex-shrink: 0;
+}
+.context-dock-header-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.context-dock-title {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-text);
+}
+.context-dock-subtitle {
+  font-size: 11px;
+  color: var(--c-dim);
+}
+.context-dock-controls {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+.context-dock-icon-button {
+  width: 22px;
+  height: 22px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--c-dim);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  padding: 0;
+}
+.context-dock-icon-button:hover {
+  color: var(--c-text);
+  background: var(--c-surface-hover);
+}
+.context-dock-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 2px;
+}
 .attention-history {
   position: fixed;
   top: 146px;

package/src/client/types.ts CHANGED Viewed

@@ -20,6 +20,7 @@ export interface CanvasNodeState {
     | 'trace'
     | 'file'
     | 'image'
+    | 'html'
     | 'group';
   position: { x: number; y: number };
   size: { width: number; height: number };
@@ -58,6 +59,7 @@ export const TYPE_LABELS: Record<CanvasNodeState['type'], string> = {
   trace: 'TRACE',
   file: 'FILE',
   image: 'IMG',
+  html: 'HTML',
   group: 'GROUP',
 };
@@ -72,6 +74,7 @@ export const EXPANDABLE_TYPES = new Set<CanvasNodeState['type']>([
   'ledger',
   'file',
   'image',
+  'html',
 ]);
 export const EXCALIDRAW_SERVER_NAME = 'Excalidraw';

package/src/mcp/canvas-access.ts CHANGED Viewed

@@ -18,6 +18,7 @@ type OpenMcpAppResult = Awaited<ReturnType<PmxCanvas['openMcpApp']>>;
 type AddDiagramInput = Parameters<PmxCanvas['addDiagram']>[0];
 type AddJsonRenderNodeInput = Parameters<PmxCanvas['addJsonRenderNode']>[0];
 type AddJsonRenderNodeResult = ReturnType<PmxCanvas['addJsonRenderNode']>;
+type AddHtmlNodeInput = Parameters<PmxCanvas['addHtmlNode']>[0];
 type AddGraphNodeInput = Parameters<PmxCanvas['addGraphNode']>[0];
 type AddGraphNodeResult = ReturnType<PmxCanvas['addGraphNode']>;
 type UpdateNodePatch = Parameters<PmxCanvas['updateNode']>[1];
@@ -34,8 +35,11 @@ type HistoryResult = ReturnType<PmxCanvas['getHistory']>;
 type SetContextPinsResult = ReturnType<PmxCanvas['setContextPins']>;
 type RunBatchInput = Parameters<PmxCanvas['runBatch']>[0];
 type RunBatchResult = Awaited<ReturnType<PmxCanvas['runBatch']>>;
+type SnapshotListOptions = Parameters<PmxCanvas['listSnapshots']>[0];
 type SnapshotList = ReturnType<PmxCanvas['listSnapshots']>;
 type DeleteSnapshotResult = ReturnType<PmxCanvas['deleteSnapshot']>;
+type GcSnapshotsOptions = Parameters<PmxCanvas['gcSnapshots']>[0];
+type GcSnapshotsResult = ReturnType<PmxCanvas['gcSnapshots']>;
 type DiffSnapshotResult = ReturnType<PmxCanvas['diffSnapshot']>;
 type CodeGraphResult = ReturnType<PmxCanvas['getCodeGraph']>;
 type ValidationResult = ReturnType<PmxCanvas['validate']>;
@@ -97,6 +101,7 @@ export interface CanvasAccess {
   openMcpApp(input: OpenMcpAppInput): Promise<OpenMcpAppResult>;
   addDiagram(input: AddDiagramInput): Promise<OpenMcpAppResult>;
   addJsonRenderNode(input: AddJsonRenderNodeInput): Promise<AddJsonRenderNodeResult>;
+  addHtmlNode(input: AddHtmlNodeInput): Promise<string>;
   addGraphNode(input: AddGraphNodeInput): Promise<AddGraphNodeResult>;
   buildWebArtifact(input: WebArtifactInput): Promise<WebArtifactResult>;
   updateNode(id: string, patch: UpdateNodePatch): Promise<void>;
@@ -117,10 +122,11 @@ export interface CanvasAccess {
   setContextPins(nodeIds: string[], mode?: 'set' | 'add' | 'remove'): Promise<SetContextPinsResult>;
   getPinnedNodeIds(): Promise<string[]>;
   runBatch(operations: RunBatchInput): Promise<RunBatchResult>;
-  listSnapshots(): Promise<SnapshotList>;
+  listSnapshots(options?: SnapshotListOptions): Promise<SnapshotList>;
   saveSnapshot(name: string): Promise<CanvasSnapshot | null>;
   restoreSnapshot(id: string): Promise<{ ok: boolean }>;
   deleteSnapshot(id: string): Promise<DeleteSnapshotResult>;
+  gcSnapshots(options?: GcSnapshotsOptions): Promise<GcSnapshotsResult>;
   diffSnapshot(idOrName: string): Promise<DiffSnapshotResult>;
   getCodeGraph(): Promise<CodeGraphResult>;
   validate(): Promise<ValidationResult>;
@@ -177,6 +183,10 @@ class LocalCanvasAccess implements CanvasAccess {
     return this.canvas.addJsonRenderNode(input);
   }
+  async addHtmlNode(input: AddHtmlNodeInput): Promise<string> {
+    return this.canvas.addHtmlNode(input);
+  }
   async addGraphNode(input: AddGraphNodeInput): Promise<AddGraphNodeResult> {
     return this.canvas.addGraphNode(input);
   }
@@ -257,8 +267,8 @@ class LocalCanvasAccess implements CanvasAccess {
     return await this.canvas.runBatch(operations);
   }
-  async listSnapshots(): Promise<SnapshotList> {
-    return this.canvas.listSnapshots();
+  async listSnapshots(options?: SnapshotListOptions): Promise<SnapshotList> {
+    return this.canvas.listSnapshots(options);
   }
   async saveSnapshot(name: string): Promise<CanvasSnapshot | null> {
@@ -273,6 +283,10 @@ class LocalCanvasAccess implements CanvasAccess {
     return this.canvas.deleteSnapshot(id);
   }
+  async gcSnapshots(options?: GcSnapshotsOptions): Promise<GcSnapshotsResult> {
+    return this.canvas.gcSnapshots(options);
+  }
   async diffSnapshot(idOrName: string): Promise<DiffSnapshotResult> {
     return this.canvas.diffSnapshot(idOrName);
   }
@@ -359,11 +373,11 @@ class RemoteCanvasAccess implements CanvasAccess {
   }
   async getLayout(): Promise<CanvasLayout> {
-    return await this.requestJson<CanvasLayout>('GET', '/api/canvas/state');
+    return await this.requestJson<CanvasLayout>('GET', '/api/canvas/state?includeBlobs=true');
   }
   async getNode(id: string): Promise<CanvasNodeState | undefined> {
-    const response = await fetch(`${this.remoteBaseUrl}/api/canvas/node/${encodeURIComponent(id)}`);
+    const response = await fetch(`${this.remoteBaseUrl}/api/canvas/node/${encodeURIComponent(id)}?includeBlobs=true`);
     if (response.status === 404) return undefined;
     const text = await response.text();
     let parsed: unknown = undefined;
@@ -415,6 +429,10 @@ class RemoteCanvasAccess implements CanvasAccess {
     return { id, url: response.url, spec: response.spec };
   }
+  async addHtmlNode(input: AddHtmlNodeInput): Promise<string> {
+    return await this.requestNodeId('POST', '/api/canvas/node', { type: 'html', ...input });
+  }
   async addGraphNode(input: AddGraphNodeInput): Promise<AddGraphNodeResult> {
     const response = await this.requestJson<GraphNodeResponse>('POST', '/api/canvas/graph', {
       ...input,
@@ -527,8 +545,13 @@ class RemoteCanvasAccess implements CanvasAccess {
     return await this.requestJson<RunBatchResult>('POST', '/api/canvas/batch', { operations });
   }
-  async listSnapshots(): Promise<SnapshotList> {
-    return await this.requestJson<SnapshotList>('GET', '/api/canvas/snapshots');
+  async listSnapshots(options?: SnapshotListOptions): Promise<SnapshotList> {
+    const params = new URLSearchParams();
+    if (typeof options?.limit === 'number') params.set('limit', String(options.limit));
+    if (options?.query) params.set('q', options.query);
+    if (options?.all) params.set('all', 'true');
+    const query = params.size > 0 ? `?${params.toString()}` : '';
+    return await this.requestJson<SnapshotList>('GET', `/api/canvas/snapshots${query}`);
   }
   async saveSnapshot(name: string): Promise<CanvasSnapshot | null> {
@@ -544,6 +567,10 @@ class RemoteCanvasAccess implements CanvasAccess {
     return await this.requestJson<DeleteSnapshotResult>('DELETE', `/api/canvas/snapshots/${encodeURIComponent(id)}`);
   }
+  async gcSnapshots(options?: GcSnapshotsOptions): Promise<GcSnapshotsResult> {
+    return await this.requestJson<GcSnapshotsResult>('POST', '/api/canvas/snapshots/gc', options ?? {});
+  }
   async diffSnapshot(idOrName: string): Promise<DiffSnapshotResult> {
     return await this.requestJson<DiffSnapshotResult>('GET', `/api/canvas/snapshots/${encodeURIComponent(idOrName)}/diff`);
   }