pmx-canvas 0.1.14 → 0.1.16

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

@@ -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;
@@ -308,9 +330,16 @@ export function replaceViewport(next: ViewportState): void {
 }
 
 export function commitViewport(next: ViewportState): void {
+  commitViewportWithOptions(next);
+}
+
+function commitViewportWithOptions(
+  next: ViewportState,
+  options: { recordHistory?: boolean } = {},
+): void {
   viewport.value = next;
-  persistLayout();
-  void updateViewportFromClient(next);
+  persistLayout(options);
+  void updateViewportFromClient(next, options);
 }
 
 export function applyServerCanvasLayout(
@@ -372,6 +401,7 @@ function easeOutCubic(t: number): number {
 export function animateViewport(
   target: ViewportState,
   duration = 300,
+  options: { recordHistory?: boolean } = {},
 ): void {
   if (animationId !== null) cancelAnimationFrame(animationId);
 
@@ -393,7 +423,7 @@ export function animateViewport(
       animationId = requestAnimationFrame(tick);
     } else {
       animationId = null;
-      commitViewport(target);
+      commitViewportWithOptions(target, options);
     }
   }
 
@@ -411,7 +441,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 +474,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);
   }
@@ -518,7 +548,7 @@ export function fitAll(containerW: number, containerH: number): void {
 }
 
 // ── Focus node ────────────────────────────────────────────────
-export function focusNode(id: string): void {
+export function focusNode(id: string, options: { recordHistory?: boolean } = {}): void {
   const node = nodes.value.get(id);
   if (!node) return;
   const v = viewport.value;
@@ -528,7 +558,7 @@ export function focusNode(id: string): void {
     x: window.innerWidth / 2 - cx * v.scale,
     y: window.innerHeight / 2 - cy * v.scale,
     scale: v.scale,
-  });
+  }, 300, options);
   bringToFront(id);
 }
 

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

@@ -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 } : {}) }),
   });
 }
 
@@ -230,11 +231,15 @@ export async function removeNodeFromClient(id: string): Promise<{ ok: boolean; r
 /** Commit the current viewport to the authoritative server state. */
 export async function updateViewportFromClient(
   viewport: { x: number; y: number; scale: number },
+  options: { recordHistory?: boolean } = {},
 ): Promise<{ ok: boolean }> {
   return requestJson('updateViewportFromClient', '/api/canvas/viewport', { ok: false }, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(viewport),
+    body: JSON.stringify({
+      ...viewport,
+      ...(options.recordHistory === false ? { recordHistory: false } : {}),
+    }),
   });
 }
 
@@ -286,7 +291,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

@@ -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 },
@@ -228,7 +229,7 @@ function ensureExtAppNode(data: Record<string, unknown>): void {
   });
   addNode(node);
   if (!node.dockPosition) {
-    focusNode(id);
+    focusNode(id, { recordHistory: false });
   }
 }
 

package/src/client/theme/global.css

@@ -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

@@ -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

@@ -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`);
   }