pmx-canvas 0.10.0 → 0.11.0

package/src/client/nodes/FileNode.tsx

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
+import { createPortal } from 'preact/compat';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'preact/hooks';
 import { BarHint } from '../canvas/BarHint';
 import { IconPlusCircle, IconRefresh } from '../icons';
 import { delimiterForPath, parseDelimitedText } from '../../shared/delimited-text';
@@ -85,6 +86,10 @@ function TextFileNode({ node, expanded = false }: { node: CanvasNodeState; expan
   const [loading, setLoading] = useState(!cachedContent && !!filePath && !servesBytes);
   const [error, setError] = useState<string | null>(null);
   const [bytesVersion, setBytesVersion] = useState(0);
+  const [header, setHeader] = useState<Element | null>(null);
+  useLayoutEffect(() => {
+    setHeader(expanded ? null : document.querySelector(`[data-file-toolbar="${node.id}"]`));
+  }, [node.id, expanded]);
 
   // Load file content on mount or when path changes
   useEffect(() => {
@@ -202,106 +207,112 @@ function TextFileNode({ node, expanded = false }: { node: CanvasNodeState; expan
     return <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>No file path set</div>;
   }
 
-  return (
+  const toolbar = (
     <div
       style={{
         display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-        fontFamily: 'var(--font-code)',
-        fontSize: expanded ? '13px' : '11px',
+        alignItems: 'center',
+        gap: '8px',
+        minWidth: 0,
+        padding: expanded ? '6px 10px' : 0,
+        flexShrink: 0,
       }}
     >
-      {/* Header bar */}
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '8px',
-          padding: '6px 10px',
-          borderBottom: '1px solid var(--c-line)',
-          flexShrink: 0,
-        }}
-      >
+      <div class="file-toolbar-metadata">
         <span
           style={{
-            fontSize: '9px',
+            fontSize: 'var(--fs-meta)',
             padding: '1px 5px',
-            background: 'color-mix(in srgb, var(--c-accent) 12%, transparent)',
-            color: 'var(--c-accent)',
-            borderRadius: '3px',
+            background: 'var(--c-panel-soft)',
+            color: 'var(--c-muted)',
+            borderRadius: 'var(--r-control)',
             fontWeight: 600,
           }}
         >
           {lang}
         </span>
-        <span
-          style={{
-            color: 'var(--c-text-soft)',
-            fontSize: expanded ? '12px' : '10px',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            flex: 1,
-          }}
-        >
-          {filePath}
-        </span>
+        {(expanded || title !== filePath.split(/[\\/]/).pop()) && (
+          <span
+            style={{
+              color: 'var(--c-text-soft)',
+              fontSize: expanded ? 'var(--fs-ui)' : 'var(--fs-meta)',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              flex: 1,
+            }}
+          >
+            {expanded ? filePath : filePath.split(/[\\/]/).pop()}
+          </span>
+        )}
         {lineCount !== undefined && (
-          <span style={{ color: 'var(--c-dim)', fontSize: '10px', flexShrink: 0 }}>{lineCount} lines</span>
+          <span style={{ color: 'var(--c-dim)', fontSize: 'var(--fs-meta)', flexShrink: 0 }}>{lineCount} lines</span>
         )}
-        {updatedAt && (
-          <span style={{ color: 'var(--c-dim)', fontSize: '10px', flexShrink: 0 }}>
+        {expanded && updatedAt && (
+          <span style={{ color: 'var(--c-dim)', fontSize: 'var(--fs-meta)', flexShrink: 0 }}>
             {new Date(updatedAt).toLocaleTimeString()}
           </span>
         )}
-        <BarHint label="Mark this file as AX evidence" align="end" fitWithin=".node-content">
-          <button
-            type="button"
-            class="ax-node-action"
-            aria-label="Mark this file as AX evidence"
-            onClick={(e) => {
-              e.stopPropagation();
-              void runNodeAxInteraction(
-                node,
-                'ax.evidence.add',
-                { kind: 'file', title: filePath.split('/').pop() || filePath, ref: filePath },
-                'Marked as evidence',
-              );
-            }}
-            style={{
-              background: 'none',
-              border: 'none',
-              color: 'var(--c-muted)',
-              cursor: 'pointer',
-              padding: '2px 4px',
-              fontSize: '12px',
-              flexShrink: 0,
-            }}
-          >
-            <IconPlusCircle size={14} />
-          </button>
-        </BarHint>
-        <BarHint label="Reload file" align="end" fitWithin=".node-content">
-          <button
-            type="button"
-            onClick={handleReload}
-            aria-label="Reload file"
-            style={{
-              background: 'none',
-              border: 'none',
-              color: 'var(--c-muted)',
-              cursor: 'pointer',
-              padding: '2px 4px',
-              fontSize: '12px',
-              flexShrink: 0,
-            }}
-          >
-            <IconRefresh size={14} />
-          </button>
-        </BarHint>
       </div>
+      <BarHint label="Mark this file as AX evidence" align="end" fitWithin=".node-content">
+        <button
+          type="button"
+          class="ax-node-action"
+          aria-label="Mark this file as AX evidence"
+          onClick={(e) => {
+            e.stopPropagation();
+            void runNodeAxInteraction(
+              node,
+              'ax.evidence.add',
+              { kind: 'file', title: filePath.split('/').pop() || filePath, ref: filePath },
+              'Marked as evidence',
+            );
+          }}
+          style={{
+            background: 'none',
+            border: 'none',
+            color: 'var(--c-muted)',
+            cursor: 'pointer',
+            padding: '2px 4px',
+            fontSize: '12px',
+            flexShrink: 0,
+          }}
+        >
+          <IconPlusCircle size={14} />
+        </button>
+      </BarHint>
+      <BarHint label="Reload file" align="end" fitWithin=".node-content">
+        <button
+          type="button"
+          onClick={handleReload}
+          aria-label="Reload file"
+          style={{
+            background: 'none',
+            border: 'none',
+            color: 'var(--c-muted)',
+            cursor: 'pointer',
+            padding: '2px 4px',
+            fontSize: '12px',
+            flexShrink: 0,
+          }}
+        >
+          <IconRefresh size={14} />
+        </button>
+      </BarHint>
+    </div>
+  );
 
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        fontFamily: 'var(--font-code)',
+        fontSize: expanded ? '13px' : 'var(--fs-ui)',
+      }}
+    >
+      {header ? createPortal(toolbar, header) : toolbar}
       {/* Content area */}
       <div
         style={{

package/src/client/nodes/HtmlNode.tsx

@@ -3,10 +3,11 @@ import { HTML_SURFACE_PUSH_SOURCE } from '../../shared/ax-surface-protocol.js';
 import { axSurfaceState, canvasTheme } from '../state/canvas-store';
 import type { CanvasNodeState } from '../types';
 import { nodeSurfaceUrl, surfaceContentHash } from './surface-url';
-import { RefreshingViewerFrame } from './McpAppNode';
+import { RefreshingViewerFrame, waitForViewerPaint } from './ViewerFrame';
 import { useAxSurfaceBridge } from './use-ax-surface-bridge';
 import { useIframeContentHeight } from './use-iframe-content-height';
 import { useSurfaceFrame } from './use-surface-frame';
+import { usePrimitiveJson } from './primitive-copy';
 
 export function shouldShowPresentationControls(node: CanvasNodeState): boolean {
   return node.type === 'html' && node.data.presentation === true;
@@ -36,8 +37,6 @@ export function HtmlNode({
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const theme = canvasTheme.value;
   const axCapabilitySignature = htmlAxCapabilitySignature(node.data.axCapabilities);
-  // Stable per-mount nonce that authorizes parent → iframe theme-update messages.
-  const themeToken = useMemo(() => `theme-${crypto.randomUUID()}`, []);
   // Rotate the nonce when capabilities change: both the URL and injected srcdoc
   // change, rebootstrapping the bridge and rejecting emits from the old document.
   const axToken = useMemo(() => `ax-${crypto.randomUUID()}`, [axCapabilitySignature]);
@@ -50,6 +49,9 @@ export function HtmlNode({
         ? node.data.content
         : '';
   const v = useMemo(() => surfaceContentHash(html), [html]);
+  // A replacement must not answer a copy request with the old document's data.
+  const themeToken = useMemo(() => `theme-${crypto.randomUUID()}`, [html]);
+  usePrimitiveJson(node, themeToken, iframeRef, expanded);
 
   // The in-canvas iframe and the "Open as site" tab load the SAME server-rendered
   // surface URL (/api/canvas/surface/:id) — one render path, no content fork.
@@ -77,7 +79,7 @@ export function HtmlNode({
 
   // Grow the node to fit the surface's reported content height (grow-only, gated).
   // Never in the expanded overlay — there the surface fills the large overlay frame.
-  useIframeContentHeight(node, iframeRef, expanded ? '' : frameToken);
+  const measureContent = useIframeContentHeight(node, iframeRef, expanded ? '' : frameToken);
 
   // Phase 3 HTML bridge — the shared sandboxed-surface trust boundary (M2).
   useAxSurfaceBridge({ enabled: true, token: axToken, nodeId: node.id, sourceSurface: 'html-node', iframeRef });
@@ -121,38 +123,8 @@ export function HtmlNode({
     return () => window.clearTimeout(id);
   }, [autoFocus, surfaceSrc]);
 
-  const handleDocumentLoad = (frame: HTMLIFrameElement, signal: AbortSignal): Promise<boolean> => {
-    if (signal.aborted) return Promise.resolve(false);
-    return new Promise((resolve) => {
-      const finish = (ready: boolean) => {
-        clearTimeout(timer);
-        window.removeEventListener('message', receive);
-        signal.removeEventListener('abort', cancel);
-        resolve(ready);
-      };
-      const cancel = () => finish(false);
-      const receive = (event: MessageEvent) => {
-        if (
-          event.source !== frame.contentWindow ||
-          event.data?.source !== HTML_SURFACE_PUSH_SOURCE ||
-          event.data?.token !== themeToken
-        )
-          return;
-        // A healthy offscreen frame can wait for paint without a deadline.
-        if (event.data.type === 'mounted') clearTimeout(timer);
-        if (event.data.type === 'ready') finish(true);
-      };
-      const timer = setTimeout(cancel, 10_000);
-      window.addEventListener('message', receive);
-      signal.addEventListener('abort', cancel, { once: true });
-      frame.contentWindow?.postMessage(
-        { source: HTML_SURFACE_PUSH_SOURCE, type: 'check-ready', token: themeToken },
-        '*',
-      );
-    });
-  };
-
   const handleFrameLoad = () => {
+    measureContent();
     iframeRef.current?.contentWindow?.postMessage(
       {
         source: HTML_SURFACE_PUSH_SOURCE,
@@ -205,7 +177,7 @@ export function HtmlNode({
       allow=""
       tabIndex={autoFocus ? 0 : undefined}
       onLoad={handleFrameLoad}
-      onDocumentLoad={handleDocumentLoad}
+      onDocumentLoad={(frame, signal) => waitForViewerPaint(frame, themeToken, signal)}
     />
   );
 }

package/src/client/nodes/LedgerNode.tsx

@@ -27,22 +27,36 @@ export function LedgerNode({ node }: { node: CanvasNodeState }) {
     <div style={{ display: 'flex', flexDirection: 'column', gap: '4px', fontSize: '12px' }}>
       {lines.length > 0 && (
         <div style={{ display: 'flex', flexDirection: 'column' }}>
-          {lines.map((line, i) => (
-            <div
-              key={i}
-              style={{
-                padding: '3px 0',
-                borderBottom: i < lines.length - 1 ? '1px solid rgba(45,55,90,0.3)' : 'none',
-                color: 'var(--c-text)',
-                fontFamily: 'var(--font-code)',
-                fontSize: '11px',
-                whiteSpace: 'pre-wrap',
-                wordBreak: 'break-word',
-              }}
-            >
-              {line}
-            </div>
-          ))}
+          {lines.map((line, i) => {
+            const timed = /^(\d{2}:\d{2}(?::\d{2})?)\s+(.+)$/.exec(line);
+            return (
+              <div
+                key={i}
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: timed ? '44px 1fr' : '1fr',
+                  gap: '10px',
+                  padding: '3px 0',
+                  color: 'var(--c-text)',
+                  fontFamily: 'var(--font-ui)',
+                  fontSize: 'var(--fs-ui)',
+                  whiteSpace: 'pre-wrap',
+                  wordBreak: 'break-word',
+                }}
+              >
+                {timed ? (
+                  <>
+                    <span style={{ fontFamily: 'var(--font-code)', fontSize: 'var(--fs-meta)', color: 'var(--c-dim)' }}>
+                      {timed[1]}
+                    </span>
+                    <span>{timed[2]}</span>
+                  </>
+                ) : (
+                  line
+                )}
+              </div>
+            );
+          })}
         </div>
       )}
       {entries.map(([key, value]) => (
@@ -53,7 +67,7 @@ export function LedgerNode({ node }: { node: CanvasNodeState }) {
             justifyContent: 'space-between',
             gap: '8px',
             padding: '3px 0',
-            borderBottom: '1px solid rgba(45,55,90,0.3)',
+            borderBottom: '1px solid var(--c-line)',
           }}
         >
           <span style={{ color: 'var(--c-muted)', fontSize: '11px', flexShrink: 0 }}>

package/src/client/nodes/MarkdownNode.tsx

@@ -6,7 +6,7 @@ import { IconArrowLeft } from '../icons';
 import { expandNode, nodes, updateNodeData } from '../state/canvas-store';
 import { fetchFile, renderMarkdown, updateNodeFromClient } from '../state/intent-bridge';
 import type { CanvasNodeState } from '../types';
-import { activeBoard, setBoardReadme, openMemoryTarget, boardList } from '../state/boards-store';
+import { openMemoryTarget, boardList } from '../state/boards-store';
 import { showToast } from '../state/attention-bridge';
 import { MdFormatBar } from './MdFormatBar';
 import { handleFormatShortcut, handleTab } from './md-format';
@@ -189,7 +189,6 @@ export async function waitForMarkdownSave(boardId: string | null, nodeId: string
 }
 
 export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
-  const board = activeBoard();
   const boardId = activeBoardId.value;
   const draftKey = JSON.stringify([boardId, node.id]);
   const draft = useMemo(() => {
@@ -523,7 +522,7 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
     <div
       style={{
         padding: '4px 8px',
-        fontSize: '10px',
+        fontSize: 'var(--fs-meta)',
         background: 'color-mix(in srgb, var(--c-ok) 10%, transparent)',
         color: 'var(--c-ok)',
         borderBottom: '1px solid color-mix(in srgb, var(--c-ok) 20%, transparent)',
@@ -699,21 +698,13 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
           {String((node.data.source as Record<string, unknown>).reference ?? 'Location not supplied')}
         </div>
       )}
-      <div class="md-card-actions">
-        {board && (
-          <button
-            type="button"
-            class="md-readme-btn"
-            aria-pressed={board.readmeNodeId === node.id}
-            onClick={() => void setBoardReadme(board.id, board.readmeNodeId === node.id ? null : node.id)}
-          >
-            {board.readmeNodeId === node.id ? 'README' : 'Set as README'}
+      {node.data.display !== 'heading' && (
+        <div class="md-card-actions">
+          <button type="button" class="md-card-edit" onClick={() => expandNode(node.id)}>
+            Edit
           </button>
-        )}
-        <button type="button" class="md-card-edit" onClick={() => expandNode(node.id)}>
-          Edit
-        </button>
-      </div>
+        </div>
+      )}
     </div>
   );
 }