pmx-canvas 0.10.0 → 0.12.0

package/src/client/nodes/WorkCard.tsx

@@ -0,0 +1,175 @@
+import { signal, type Signal } from '@preact/signals';
+import { useMemo } from 'preact/hooks';
+import { WORK_CARD_STATES, type AxWorkItemStatus } from '../../shared/ax-kinds.js';
+import { activeBoardId } from '../state/boards-store';
+import { updateNodeFromClient } from '../state/intent-bridge';
+import type { CanvasNodeState } from '../types';
+
+type WorkDraft = {
+  title: string;
+  state: AxWorkItemStatus;
+  detail: string;
+  progress: string;
+  boardId: string | null;
+  revision: number;
+  saving: boolean;
+  error: string;
+};
+// Like Markdown drafts, these belong to the qualified card, not its inline/focus renderer.
+const drafts = new Map<string, Signal<WorkDraft | null>>();
+
+export function hasUnsavedWorkCard(boardId: string, nodeId: string): boolean {
+  return !!drafts.get(JSON.stringify([boardId, nodeId]))?.value;
+}
+
+export function WorkCard({ node, state }: { node: CanvasNodeState; state: AxWorkItemStatus }) {
+  const key = JSON.stringify([activeBoardId.value, node.id]);
+  const editing = useMemo(() => drafts.get(key) ?? signal<WorkDraft | null>(null), [key]);
+  const draft = editing.value;
+  const saving = draft?.saving ?? false;
+  const error = draft?.error ?? '';
+  const setDraft = (next: WorkDraft | null) => {
+    if (next) drafts.set(key, editing);
+    else drafts.delete(key);
+    editing.value = next;
+  };
+  const detail = typeof node.data.detail === 'string' ? node.data.detail : '';
+  const progress = typeof node.data.progress === 'number' ? node.data.progress : null;
+
+  const edit = () => {
+    setDraft({
+      title: typeof node.data.title === 'string' ? node.data.title : '',
+      state,
+      detail,
+      progress: progress === null ? '' : String(progress),
+      boardId: activeBoardId.value,
+      revision: node.contentRevision ?? 0,
+      saving: false,
+      error: '',
+    });
+  };
+  const save = async () => {
+    if (!draft || saving) return;
+    setDraft({ ...draft, saving: true, error: '' });
+    const result = await updateNodeFromClient(node.id, {
+      title: draft.title.trim(),
+      data: {
+        workState: draft.state,
+        detail: draft.detail,
+        progress: draft.progress === '' ? null : Number(draft.progress),
+      },
+      expectedBoardId: draft.boardId,
+      expectedContentRevision: draft.revision,
+    });
+    if (result.ok) setDraft(null);
+    else
+      setDraft({
+        ...draft,
+        saving: false,
+        error: 'Could not save. Your draft is still here. Check the connection or whether the card changed.',
+      });
+  };
+
+  if (draft) {
+    return (
+      <form
+        class="work-card-editor"
+        onSubmit={(event) => {
+          event.preventDefault();
+          void save();
+        }}
+        onKeyDown={(event) => {
+          event.stopPropagation();
+          if (event.key === 'Escape' && !saving) {
+            event.preventDefault();
+            setDraft(null);
+          }
+        }}
+      >
+        <fieldset disabled={saving}>
+          <label>
+            Title
+            <input required value={draft.title} onInput={(e) => setDraft({ ...draft, title: e.currentTarget.value })} />
+          </label>
+          <label>
+            Work state
+            <select
+              value={draft.state}
+              onChange={(e) => setDraft({ ...draft, state: e.currentTarget.value as AxWorkItemStatus })}
+            >
+              {Object.entries(WORK_CARD_STATES).map(([value, item]) => (
+                <option key={value} value={value}>
+                  {item.label}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label>
+            Detail
+            <textarea value={draft.detail} onInput={(e) => setDraft({ ...draft, detail: e.currentTarget.value })} />
+          </label>
+          <label>
+            Progress (%) · optional
+            <input
+              type="number"
+              min="0"
+              max="100"
+              step="any"
+              value={draft.progress}
+              onInput={(e) => setDraft({ ...draft, progress: e.currentTarget.value })}
+            />
+          </label>
+          {error && (
+            <div class="work-card-error" role="alert">
+              {error}
+            </div>
+          )}
+          <footer>
+            <button type="button" onClick={() => setDraft(null)}>
+              Cancel
+            </button>
+            <button class="work-card-save" type="submit">
+              {saving ? 'Saving…' : 'Save'}
+            </button>
+          </footer>
+        </fieldset>
+      </form>
+    );
+  }
+
+  return (
+    <div class={`work-card work-card-${state}`}>
+      {typeof node.data.workItemId === 'string' && (
+        <div class="work-card-live">
+          ↗ Live task{node.data.liveWorkSource ? ` · ${node.data.liveWorkSource}` : ''} · Read-only
+        </div>
+      )}
+      <div class="work-card-state">
+        <span aria-hidden="true">{WORK_CARD_STATES[state].glyph}</span> {WORK_CARD_STATES[state].label}
+      </div>
+      {detail && <div class="work-card-detail">{detail}</div>}
+      {progress !== null && (
+        <div class="work-card-progress">
+          <span>{progress}% complete</span>
+          <div
+            class="status-progress"
+            role="progressbar"
+            aria-label="Progress"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={progress}
+          >
+            <div style={{ width: `${progress}%`, background: 'currentColor' }} />
+          </div>
+        </div>
+      )}
+      {typeof node.data.workItemId !== 'string' && (
+        <footer>
+          <button type="button" onClick={edit}>
+            Edit
+          </button>
+        </footer>
+      )}
+    </div>
+  );
+}

package/src/client/nodes/iframe-document-url.ts

@@ -1,8 +1,8 @@
-import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { workbenchConnectionEpoch } from '../state/canvas-store';
 import { iframeMode } from '../state/iframe-mode';
-import { surfaceContentHash } from './surface-url';
 import { workbenchFetch } from '../state/workbench-transport';
+import { VIEWER_LOAD_DEADLINE_MS, type ViewerSource } from './ViewerFrame';
 
 interface FrameDocumentCreateResponse {
   ok: boolean;
@@ -21,11 +21,12 @@ function isFrameDocumentCreateResponse(value: unknown): value is FrameDocumentCr
   );
 }
 
-export async function createIframeDocumentUrl(html: string, sandbox: string): Promise<string> {
+export async function createIframeDocumentUrl(html: string, sandbox: string, signal?: AbortSignal): Promise<string> {
   const response = await workbenchFetch('/api/canvas/frame-documents', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ html, sandbox }),
+    signal,
   });
   const json = (await response.json()) as unknown;
   if (!response.ok || !isFrameDocumentCreateResponse(json) || !json.ok || typeof json.url !== 'string') {
@@ -38,32 +39,37 @@ export async function createIframeDocumentUrl(html: string, sandbox: string): Pr
   return json.url;
 }
 
-export function useIframeDocument(
-  html: string,
-  sandbox: string,
-): { attributes: { src?: string; srcdoc?: string }; ready: boolean; key: string } {
+export function useIframeDocument(html: string, sandbox: string): ViewerSource {
   // Boot-wide embed probe (state/iframe-mode.ts): srcdoc mode means src-URL
   // iframes are blocked here (nested-iframe hosts like Amp orb portals), so the
   // frame-documents round-trip would produce a URL the browser refuses to load.
   const mode = iframeMode.value;
   const [src, setSrc] = useState<string | null>(null);
+  const [error, setError] = useState(false);
   const [remintNonce, setRemintNonce] = useState(0);
   const mintEpochRef = useRef(0);
 
   useEffect(() => {
-    setSrc(null);
+    setError(false);
     if (!html || mode !== 'src') return;
     let cancelled = false;
+    const controller = new AbortController();
+    const deadline = setTimeout(() => controller.abort(), VIEWER_LOAD_DEADLINE_MS);
     mintEpochRef.current = workbenchConnectionEpoch.value;
-    void createIframeDocumentUrl(html, sandbox)
+    void createIframeDocumentUrl(html, sandbox, controller.signal)
       .then((url) => {
         if (!cancelled) setSrc(url);
       })
       .catch((error) => {
+        if (cancelled) return;
         console.error('[iframe-document] failed to create frame document:', error);
-      });
+        setError(true);
+      })
+      .finally(() => clearTimeout(deadline));
     return () => {
       cancelled = true;
+      clearTimeout(deadline);
+      controller.abort();
     };
   }, [html, sandbox, mode, remintNonce]);
 
@@ -101,21 +107,8 @@ export function useIframeDocument(
     };
   }, [epoch, src, mode]);
 
-  return useMemo(() => {
-    if (mode === 'srcdoc' && html) {
-      // The document already lives client-side, so serve it inline. Consumers
-      // always render the iframe `sandbox` attribute, which supplies the
-      // sandboxing the frame-document CSP header would have.
-      return {
-        attributes: { srcdoc: html },
-        ready: true,
-        key: `srcdoc-${surfaceContentHash(html)}`,
-      };
-    }
-    return {
-      attributes: src ? { src } : {},
-      ready: Boolean(src),
-      key: src ?? '',
-    };
-  }, [src, mode, html]);
+  if (!html || mode === null) return {};
+  // The host always supplies the sandbox, including on inline documents.
+  if (mode === 'srcdoc') return { srcdoc: html };
+  return { src: src ?? undefined, error, retry: () => setRemintNonce((value) => value + 1) };
 }

package/src/client/nodes/primitive-copy.ts

@@ -0,0 +1,97 @@
+import type { RefObject } from 'preact';
+import { useLayoutEffect } from 'preact/hooks';
+import { HTML_SURFACE_PUSH_SOURCE } from '../../shared/ax-surface-protocol.js';
+import { showToast } from '../state/attention-bridge';
+import type { CanvasNodeState } from '../types';
+
+type Owner = { nodeId: string; token: string; frame: RefObject<HTMLIFrameElement>; expanded: boolean };
+const owners = new Set<Owner>();
+
+export function canCopyPrimitiveJson(node: CanvasNodeState): boolean {
+  return (
+    node.type === 'html' && typeof node.data.htmlPrimitive === 'string' && node.data.htmlPrimitive !== 'presentation'
+  );
+}
+
+export function usePrimitiveJson(
+  node: CanvasNodeState,
+  token: string,
+  frame: RefObject<HTMLIFrameElement>,
+  expanded: boolean,
+): void {
+  const enabled = canCopyPrimitiveJson(node);
+  useLayoutEffect(() => {
+    if (!enabled) return;
+    const owner = { nodeId: node.id, token, frame, expanded };
+    owners.add(owner);
+    return () => {
+      owners.delete(owner);
+    };
+  }, [enabled, node.id, token, expanded]);
+}
+
+function readCurrentJson(nodeId: string): Promise<string> {
+  // The expanded document, when present, owns the latest interactive state.
+  const connected = [...owners].filter((owner) => owner.nodeId === nodeId && owner.frame.current?.isConnected);
+  const owner = connected.find((owner) => owner.expanded) ?? connected[0];
+  const frame = owner?.frame.current;
+  if (!owner || !frame?.contentWindow) return Promise.reject(new Error('Open the viewer before copying JSON.'));
+  const requestId = crypto.randomUUID();
+  return new Promise((resolve, reject) => {
+    const finish = (json?: string) => {
+      clearTimeout(timer);
+      window.removeEventListener('message', receive);
+      frame.removeEventListener('load', changed);
+      if (json !== undefined) resolve(json);
+      else reject(new Error('The viewer is unavailable or changed. Wait for it to load, then try again.'));
+    };
+    const changed = () => finish();
+    const receive = (event: MessageEvent) => {
+      const message = event.data;
+      if (
+        event.source !== frame.contentWindow ||
+        event.origin !== 'null' ||
+        message?.source !== HTML_SURFACE_PUSH_SOURCE ||
+        message.type !== 'copy-json-result' ||
+        message.token !== owner.token ||
+        message.requestId !== requestId
+      )
+        return;
+      finish(
+        owners.has(owner) && owner.frame.current === frame && frame.isConnected && typeof message.json === 'string'
+          ? message.json
+          : undefined,
+      );
+    };
+    const timer = setTimeout(changed, 3000);
+    window.addEventListener('message', receive);
+    frame.addEventListener('load', changed, { once: true });
+    // Opaque-origin sandbox: exact source + per-document nonce bind the reply.
+    frame.contentWindow!.postMessage(
+      { source: HTML_SURFACE_PUSH_SOURCE, type: 'copy-json', token: owner.token, requestId },
+      '*',
+    );
+  });
+}
+
+export async function copyPrimitiveJson(nodeId: string): Promise<void> {
+  try {
+    if (!navigator.clipboard) throw new Error('Clipboard access is unavailable in this browser.');
+    const json = readCurrentJson(nodeId);
+    // Keep clipboard.write inside the user's activation, including WebKit. The
+    // iframe supplies bytes, never clipboard permission or a stale server export.
+    void json.catch(() => {});
+    if (typeof ClipboardItem !== 'undefined' && navigator.clipboard.write) {
+      await navigator.clipboard.write([
+        new ClipboardItem({ 'text/plain': json.then((text) => new Blob([text], { type: 'text/plain' })) }),
+      ]);
+    } else {
+      await navigator.clipboard.writeText(await json);
+    }
+    showToast('context', 'JSON copied', '', [nodeId]);
+  } catch (error) {
+    showToast('remove', 'Could not copy JSON', error instanceof Error ? error.message : 'Clipboard access failed.', [
+      nodeId,
+    ]);
+  }
+}

package/src/client/nodes/use-ax-surface-bridge.ts

@@ -1,6 +1,11 @@
 import type { RefObject } from 'preact';
 import { useLayoutEffect } from 'preact/hooks';
-import { AX_SURFACE_ACK_SOURCE, AX_SURFACE_EMIT_SOURCE } from '../../shared/ax-surface-protocol.js';
+import {
+  AX_SURFACE_ACK_SOURCE,
+  AX_SURFACE_EMIT_SOURCE,
+  readSurfaceNotification,
+  surfaceNotification,
+} from '../../shared/ax-surface-protocol.js';
 import { showToast } from '../state/attention-bridge';
 import { submitAxInteractionFromClient } from '../state/intent-bridge';
 
@@ -23,8 +28,9 @@ export function useAxSurfaceBridge(options: {
   nodeId: string;
   sourceSurface: AxSurfaceBridgeSurface;
   iframeRef: RefObject<HTMLIFrameElement>;
+  jsonRpc?: boolean;
 }): void {
-  const { enabled, token, nodeId, sourceSurface, iframeRef } = options;
+  const { enabled, token, nodeId, sourceSurface, iframeRef, jsonRpc = false } = options;
   // Register before paint: a fast iframe can accept input before passive effects
   // run, and its first emit must not be lost in that gap.
   useLayoutEffect(() => {
@@ -33,7 +39,7 @@ export function useAxSurfaceBridge(options: {
       // Bind to THIS node's own iframe; the nonce + nodeId are a second gate,
       // not the only one.
       if (event.source !== iframeRef.current?.contentWindow) return;
-      const data = event.data as {
+      const data = (jsonRpc ? readSurfaceNotification(event.data) : event.data) as {
         source?: string;
         token?: string;
         nodeId?: string;
@@ -54,20 +60,18 @@ export function useAxSurfaceBridge(options: {
       }).then((res) => {
         // A refusal is toasted by the bridge with the server's reason.
         if (res.ok) showToast('context', 'AX interaction', interactionType, [nodeId]);
-        iframeRef.current?.contentWindow?.postMessage(
-          {
-            source: AX_SURFACE_ACK_SOURCE,
-            token,
-            ...(data.correlationId ? { correlationId: data.correlationId } : {}),
-            interaction: { type: interactionType },
-            result: res,
-          },
-          '*',
-        );
+        const message = {
+          source: AX_SURFACE_ACK_SOURCE,
+          token,
+          ...(data.correlationId ? { correlationId: data.correlationId } : {}),
+          interaction: { type: interactionType },
+          result: res,
+        };
+        iframeRef.current?.contentWindow?.postMessage(jsonRpc ? surfaceNotification(message) : message, '*');
       });
     }
     window.addEventListener('message', onAxMessage);
     return () => window.removeEventListener('message', onAxMessage);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [enabled, token, nodeId, sourceSurface]);
+  }, [enabled, token, nodeId, sourceSurface, jsonRpc]);
 }

package/src/client/nodes/use-iframe-content-height.ts

@@ -22,21 +22,35 @@ export function useIframeContentHeight(
   node: CanvasNodeState,
   iframeRef: { current: HTMLIFrameElement | null },
   frameToken: string,
-): void {
+): () => void {
   useEffect(() => {
     if (!frameToken) return undefined;
     let timer: ReturnType<typeof setTimeout> | null = null;
-    let pendingHeight: number | null = null;
+    let pending: { frame: HTMLIFrameElement; height: number } | null = null;
+    let lastMeasurement: { frame: HTMLIFrameElement; height: number; width: number; chrome: number } | null = null;
     const held = () =>
       grabbingNodeId.value === node.id || otherHumans.value.some((human) => human.grabbingNodeId === node.id);
     function apply() {
       timer = null;
-      if (held() || pendingHeight === null) return;
-      const reported = pendingHeight;
-      pendingHeight = null;
+      if (held() || pending === null) return;
+      const { frame, height: reported } = pending;
+      pending = null;
+      if (frame !== iframeRef.current) return;
       const current = nodes.value.get(node.id);
-      if (!current) return;
-      const target = computeContentGrowHeight(current, reported);
+      const card = frame.closest<HTMLElement>('.canvas-node');
+      if (!current || !card) return;
+      const chrome = card.offsetHeight - frame.clientHeight;
+      // Undo changes the viewport, which makes the reporter resend unchanged
+      // content. A replacement document owns a fresh fit even at the same size.
+      if (
+        lastMeasurement?.frame === frame &&
+        lastMeasurement.height === reported &&
+        lastMeasurement.width === current.size.width &&
+        lastMeasurement.chrome === chrome
+      )
+        return;
+      lastMeasurement = { frame, height: reported, width: current.size.width, chrome };
+      const target = computeContentGrowHeight(current, reported, chrome);
       if (target === null) return;
       const position = contentFitPosition(current, target, Array.from(nodes.value.values()));
       const moved = position.x !== current.position.x || position.y !== current.position.y;
@@ -49,18 +63,19 @@ export function useIframeContentHeight(
     }
     function schedule() {
       if (timer !== null) clearTimeout(timer);
-      timer = pendingHeight !== null && !held() ? setTimeout(apply, 300) : null;
+      timer = pending !== null && !held() ? setTimeout(apply, 300) : null;
     }
     const dispose = effect(() => {
       held();
       schedule();
     });
     function onMessage(event: MessageEvent) {
-      if (event.source !== iframeRef.current?.contentWindow) return;
+      const frame = iframeRef.current;
+      if (!frame || event.source !== frame.contentWindow) return;
       const d = event.data as { source?: string; type?: string; token?: string; height?: unknown } | null;
       if (!d || d.source !== 'pmx-canvas-frame' || d.type !== 'content-height' || d.token !== frameToken) return;
       if (typeof d.height !== 'number' || !Number.isFinite(d.height) || d.height <= 0) return;
-      pendingHeight = d.height;
+      pending = { frame, height: d.height };
       schedule();
     }
     window.addEventListener('message', onMessage);
@@ -70,4 +85,13 @@ export function useIframeContentHeight(
       if (timer !== null) clearTimeout(timer);
     };
   }, [node.id, frameToken]);
+  // Pending documents can report before promotion, when they are deliberately
+  // not the active ref. Ask the promoted document for a fresh measurement.
+  return () => {
+    if (!frameToken) return;
+    iframeRef.current?.contentWindow?.postMessage(
+      { source: 'pmx-canvas-frame', type: 'measure-content', token: frameToken },
+      '*',
+    );
+  };
 }

package/src/client/nodes/use-surface-frame.ts

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'preact/hooks';
 import { iframeMode } from '../state/iframe-mode';
 import { isHostedWorkbench, workbenchFetch } from '../state/workbench-transport';
+import { VIEWER_LOAD_DEADLINE_MS, type ViewerSource } from './ViewerFrame';
 
 function isSameOriginUrl(url: string): boolean {
   if (isHostedWorkbench()) return url.startsWith('/') && !url.startsWith('//');
@@ -17,34 +18,45 @@ function isSameOriginUrl(url: string): boolean {
  * iframes are blocked by the embedding context (nested-iframe hosts like Amp
  * orb portals). Cross-origin URLs always stay `src` — they cannot be fetched
  * from here. While the probe is pending, same-origin frames stay empty rather
- * than loading a src that may show the broken placeholder; a failed srcdoc
- * fetch falls back to `src` (no worse than before).
+ * than loading a src that may show the broken placeholder. Preparation failures
+ * use the shared host's Retry, never a second load path the embed probe rejected.
  */
-export function useSurfaceFrame(url: string): { src?: string; srcdoc?: string } {
+export function useSurfaceFrame(url: string): ViewerSource {
   const mode = iframeMode.value;
   const [doc, setDoc] = useState<{ url: string; html: string } | null>(null);
+  const [error, setError] = useState(false);
+  const [attempt, setAttempt] = useState(0);
   const sameOrigin = Boolean(url) && isSameOriginUrl(url);
   const wantsSrcdoc = mode === 'srcdoc' && sameOrigin;
 
   useEffect(() => {
+    setError(false);
     if (!wantsSrcdoc) return;
     let cancelled = false;
+    const controller = new AbortController();
+    const deadline = setTimeout(() => controller.abort(), VIEWER_LOAD_DEADLINE_MS);
     // Ask the server to inline bundle assets (the mermaid renderer): hosts
     // that force srcdoc mode block sub-frame subresource requests too.
-    void workbenchFetch(`${url}${url.includes('?') ? '&' : '?'}inline-assets=1`, { credentials: 'same-origin' })
+    void workbenchFetch(`${url}${url.includes('?') ? '&' : '?'}inline-assets=1`, {
+      credentials: 'same-origin',
+      signal: controller.signal,
+    })
       .then((res) => (res.ok ? res.text() : Promise.reject(new Error(`HTTP ${res.status}`))))
       .then((html) => {
         if (!cancelled) setDoc({ url, html });
       })
       .catch((error) => {
-        console.error('[surface-frame] srcdoc fetch failed, falling back to src:', url, error);
-        // Empty html marks the src fallback below.
-        if (!cancelled) setDoc({ url, html: '' });
-      });
+        if (cancelled) return;
+        console.error('[surface-frame] document fetch failed:', url, error);
+        setError(true);
+      })
+      .finally(() => clearTimeout(deadline));
     return () => {
       cancelled = true;
+      clearTimeout(deadline);
+      controller.abort();
     };
-  }, [wantsSrcdoc, url]);
+  }, [wantsSrcdoc, url, attempt]);
 
   if (!url) return {};
   if (!wantsSrcdoc) {
@@ -52,6 +64,5 @@ export function useSurfaceFrame(url: string): { src?: string; srcdoc?: string }
   }
   // Keep the previous document visible while a newer URL is being fetched —
   // same UX as src mode, where the old document stays until the new one loads.
-  if (doc) return doc.html ? { srcdoc: doc.html } : { src: doc.url };
-  return {};
+  return { srcdoc: doc?.html, error, retry: () => setAttempt((value) => value + 1) };
 }