pmx-canvas 0.6.5 → 0.7.0

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

@@ -144,6 +144,28 @@ export function clearSelection(): void {
   selectedNodeIds.value = new Set();
 }
 
+/** Clear transient UI state that must never follow a node id onto another board. */
+export function resetCanvasInteractionState(): void {
+  if (expandedCloseTimer !== null) {
+    clearTimeout(expandedCloseTimer);
+    expandedCloseTimer = null;
+  }
+  batch(() => {
+    activeNodeId.value = null;
+    expandedNodeId.value = null;
+    pendingExpandedNodeCloseId.value = null;
+    pendingCloseInitialCheckpointAt = undefined;
+    selectedNodeIds.value = new Set();
+    selectedEdgeId.value = null;
+    pendingConnection.value = null;
+    draggingEdge.value = null;
+    searchHighlightIds.value = null;
+    dragDropTarget.value = null;
+    contextPinnedNodeIds.value = new Set();
+  });
+  dropSuppressedForDrag = false;
+}
+
 // ── Groups v2 (rail-chrome-v2 phase 7, item 20) ──────────────────────
 
 /**

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

@@ -1,4 +1,5 @@
 import { canvasArea } from '../canvas/canvas-area';
+import { showToast } from './attention-bridge';
 import type { AgentPresenceSnapshot } from '../../shared/agent-presence.js';
 function logRequestError(action: string, error: unknown): void {
   console.error(`[intent-bridge] ${action} failed`, error);
@@ -31,14 +32,38 @@ function withWorkbenchMarker(init?: RequestInit): RequestInit {
     headers['x-pmx-source'] = tabAgentKey;
   } else {
     headers['X-PMX-Workbench'] = '1';
+    const token = (window as Window & { __PMX_WORKBENCH_TOKEN?: unknown }).__PMX_WORKBENCH_TOKEN;
+    if (typeof token === 'string') headers['X-PMX-Workbench-Token'] = token;
   }
   return { ...init, headers };
 }
 
+/**
+ * A write the server refused (fence, edit lock, validation) must not fail
+ * silently: the human sees the server's reason. Reads stay quiet.
+ */
+function reportRefusedWrite(res: Response, init: RequestInit | undefined, body: unknown): void {
+  if (res.ok || (init?.method ?? 'GET').toUpperCase() === 'GET') return;
+  const error =
+    body !== null && typeof body === 'object' && 'error' in body && typeof body.error === 'string' ? body.error : '';
+  showToast('remove', 'Change refused', error || `The server answered ${res.status}.`);
+}
+
+async function readJsonBody(res: Response): Promise<unknown> {
+  try {
+    return await res.json();
+  } catch {
+    return null;
+  }
+}
+
 export async function requestJson<T>(action: string, url: string, fallback: T, init?: RequestInit): Promise<T> {
   try {
     const res = await fetch(url, withWorkbenchMarker(init));
-    return (await res.json()) as T;
+    const body = await readJsonBody(res);
+    reportRefusedWrite(res, init, body);
+    if (body === null) throw new Error(`${res.status} response had no JSON body`);
+    return body as T;
   } catch (error) {
     logRequestError(action, error);
     return fallback;
@@ -48,6 +73,7 @@ export async function requestJson<T>(action: string, url: string, fallback: T, i
 export async function requestOk(action: string, url: string, init?: RequestInit): Promise<{ ok: boolean }> {
   try {
     const res = await fetch(url, withWorkbenchMarker(init));
+    if (!res.ok) reportRefusedWrite(res, init, await readJsonBody(res));
     return { ok: res.ok };
   } catch (error) {
     logRequestError(action, error);
@@ -57,7 +83,8 @@ export async function requestOk(action: string, url: string, init?: RequestInit)
 
 export async function requestBestEffort(action: string, url: string, init?: RequestInit): Promise<void> {
   try {
-    await fetch(url, withWorkbenchMarker(init));
+    const res = await fetch(url, withWorkbenchMarker(init));
+    if (!res.ok) reportRefusedWrite(res, init, await readJsonBody(res));
   } catch (error) {
     logRequestError(action, error);
   }
@@ -262,6 +289,7 @@ export async function createNodeFromClient(opts: {
   y?: number;
   width?: number;
   height?: number;
+  boardId?: string;
 }): Promise<{ ok: boolean; id?: string }> {
   return requestJson(
     'createNodeFromClient',

package/src/client/state/node-factory.ts

@@ -27,6 +27,7 @@ export const DEFAULT_POSITIONS: Record<CanvasNodeState['type'], { x: number; y:
   webpage: { x: 380, y: 80, w: 520, h: 420 },
   'json-render': { x: 380, y: 720, w: 840, h: 620 },
   graph: { x: 380, y: 720, w: 760, h: 520 },
+  board: { x: 380, y: 80, w: 360, h: 160 },
   ledger: { x: 1130, y: 520, w: 320, h: 280 },
   trace: { x: 40, y: 900, w: 200, h: 56 },
   file: { x: 380, y: 80, w: 720, h: 600 },

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

@@ -26,6 +26,8 @@ export interface ApprovalGateView {
   createdAt: string;
   /** Unattended-approval TTL: when a pending gate auto-holds. */
   expiresAt: string | null;
+  resolvedBy?: { actor: 'human' | 'agent' | 'system' | 'unknown'; source: string; agentId?: string } | null;
+  selfAnswer?: boolean;
 }
 export interface AxEventView {
   id: string;
@@ -106,6 +108,9 @@ export async function setScopeFence(nodeIds: string[] | null): Promise<boolean>
 
 /** Auto-held gates: the policy said no on the human's behalf; they can be reopened. */
 export const heldGates = computed(() => sessionGates.value.filter((gate) => gate.status === 'held'));
+export const resolvedGates = computed(() =>
+  sessionGates.value.filter((gate) => gate.status === 'approved' || gate.status === 'rejected'),
+);
 
 export interface AxTimelineView {
   events: AxEventView[];

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

@@ -27,10 +27,13 @@ import {
   workbenchConnectionEpoch,
   reconnectAttempt,
   reconnectDelay,
+  resetCanvasInteractionState,
 } from './canvas-store';
+import { applyBoards, loadBoards, setBoardSwitchHandler } from './boards-store';
 import {
   fetchAgentPresence,
   fetchAxSurfaceState,
+  fetchCanvasState,
   reportClientViewportSize,
   requestJson,
   tabAgentKey,
@@ -304,6 +307,7 @@ function isCanvasNodeType(value: unknown): value is CanvasNodeState['type'] {
     value === 'webpage' ||
     value === 'json-render' ||
     value === 'graph' ||
+    value === 'board' ||
     value === 'prompt' ||
     value === 'response' ||
     value === 'status' ||
@@ -456,14 +460,44 @@ function handleAgentSessionEnded(data: Record<string, unknown>): void {
 }
 
 let stopHumanPresence: (() => void) | null = null;
+let boardResyncGeneration = 0;
+let layoutRevision = 0;
+let pinsRevision = 0;
 
 function handleHumanPresence(data: Record<string, unknown>): void {
   applyHumanSnapshot(data as Partial<HumanPresenceSnapshot>);
 }
 
+/**
+ * The open board changed (this tab, another tab, or a restart): the canvas is
+ * a different board now, so take its layout like a fresh connection would —
+ * camera included — and drop what belonged to the old board.
+ */
+function resyncForBoardSwitch(): void {
+  const generation = ++boardResyncGeneration;
+  savedLayout = null;
+  hasInitialServerLayout.value = false;
+  resetIntents();
+  resetCanvasInteractionState();
+  axSurfaceState.value = null;
+  void refreshAxSurface();
+  const layoutAtRequest = layoutRevision;
+  const pinsAtRequest = pinsRevision;
+  void fetchCanvasState().then((layout) => {
+    if (generation === boardResyncGeneration && layoutAtRequest === layoutRevision)
+      handleCanvasLayoutUpdate({ layout });
+  });
+  void requestJson<{ nodeIds?: unknown }>('fetchPinnedContext', '/api/canvas/pinned-context', {}).then((data) => {
+    if (generation === boardResyncGeneration && pinsAtRequest === pinsRevision)
+      handleContextPinsChanged({ nodeIds: data.nodeIds });
+  });
+}
+setBoardSwitchHandler(resyncForBoardSwitch);
+
 function handleConnected(data: Record<string, unknown>): void {
   sessionId.value = (data.sessionId as string) || '';
   connectionStatus.value = 'connected';
+  void loadBoards();
   // Reconnect marker for holders of server-minted URLs (Finding S).
   workbenchConnectionEpoch.value += 1;
   reloadIfServerUpgraded(data.version, data.bundleStamp);
@@ -486,8 +520,7 @@ function handleConnected(data: Record<string, unknown>): void {
   // The AX surface snapshot (work items, gates) likewise — it used to arrive
   // only on the first ax-state-changed, so a fresh load showed an empty
   // session panel while persisted work items existed.
-  void fetchAxSurfaceState().then((state) => {
-    axSurfaceState.value = state;
+  void refreshAxSurface().then(() => {
     if (sessionActive.value) void refreshTimeline();
   });
   // A ?theme= session override (host-default theming) wins over the
@@ -903,6 +936,7 @@ function handleCanvasLayoutUpdate(data: Record<string, unknown>): void {
       }
     | undefined;
   if (!layout?.nodes) return;
+  layoutRevision += 1;
   const shouldApplyViewport = !hasInitialServerLayout.value;
   hasInitialServerLayout.value = true;
 
@@ -993,6 +1027,7 @@ function handleThemeChanged(data: Record<string, unknown>): void {
 }
 
 function handleContextPinsChanged(data: Record<string, unknown>): void {
+  pinsRevision += 1;
   const nodeIds = Array.isArray(data.nodeIds) ? data.nodeIds.filter((id): id is string => typeof id === 'string') : [];
   replaceContextPinsFromServer(nodeIds);
   syncAttentionFromSse({ event: 'context-pins-changed', data });
@@ -1003,13 +1038,21 @@ function handleContextPinsChanged(data: Record<string, unknown>): void {
 // (debounced). The snapshot feeds AX-enabled surfaces (HtmlNode/McpAppNode push it
 // into their iframes), so authored boards reflect the live work queue / focus.
 let axRefreshTimer: ReturnType<typeof setTimeout> | null = null;
+let axRefreshSequence = 0;
+async function refreshAxSurface(): Promise<void> {
+  const sequence = ++axRefreshSequence;
+  const generation = boardResyncGeneration;
+  const state = await fetchAxSurfaceState();
+  if (sequence === axRefreshSequence && generation === boardResyncGeneration) axSurfaceState.value = state;
+}
+
 function handleAxStateChanged(): void {
   if (axRefreshTimer) clearTimeout(axRefreshTimer);
+  // Invalidate any in-flight read before the debounced replacement starts.
+  axRefreshSequence += 1;
   axRefreshTimer = setTimeout(() => {
     axRefreshTimer = null;
-    void fetchAxSurfaceState().then((state) => {
-      axSurfaceState.value = state;
-    });
+    void refreshAxSurface();
     // The session panel's timeline — only worth fetching while it is mounted.
     if (sessionActive.value) void refreshTimeline();
   }, 150);
@@ -1064,6 +1107,7 @@ export const EVENT_HANDLERS: Record<string, (data: Record<string, unknown>) => v
   'ext-app-update': handleExtAppUpdate,
   'ext-app-result': handleExtAppResult,
   'context-pins-changed': handleContextPinsChanged,
+  'boards-changed': applyBoards,
   'canvas-layout-update': handleCanvasLayoutUpdate,
   'canvas-focus-node': handleCanvasFocusNode,
   'canvas-viewport-update': handleCanvasViewportUpdate,