pmx-canvas 0.4.5 → 0.4.7

package/src/client/nodes/FileNode.tsx

@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useState } from 'preact/hooks';
+import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
 import { updateNodeData } from '../state/canvas-store';
+import { iframeMode } from '../state/iframe-mode';
 import { fetchFile, updateNodeFromClient } from '../state/intent-bridge';
 import type { CanvasNodeState } from '../types';
 import { runNodeAxInteraction } from './ax-node-actions';
@@ -39,20 +40,125 @@ function langFromPath(path: string): string {
   return map[ext] ?? (ext.toUpperCase() || 'Text');
 }
 
+/** Rendered-row ceiling for delimited files — a 200k-row CSV must not lock the browser. */
+const MAX_TABLE_ROWS = 500;
+
+export interface DelimitedTable {
+  header: string[];
+  /** Rectangular: every row padded (short) or truncated (long) to the header width. */
+  rows: string[][];
+}
+
+/** Column delimiter for a delimited-data path, or null when the file is not one. */
+function delimiterForPath(path: string): string | null {
+  const lower = path.toLowerCase();
+  if (lower.endsWith('.csv')) return ',';
+  if (lower.endsWith('.tsv')) return '\t';
+  return null;
+}
+
+/**
+ * RFC4180-ish delimited-text parser. Quoted fields may contain the delimiter,
+ * newlines, and `""` escapes; CRLF, LF and lone CR all end a record; a trailing
+ * newline produces no phantom empty row. Ragged records are squared off against
+ * the header width instead of throwing.
+ */
+export function parseDelimitedText(text: string, delimiter: string): DelimitedTable {
+  const records: string[][] = [];
+  let row: string[] = [];
+  let field = '';
+  let quoted = false;
+  // Tracks whether the current record consumed anything — distinguishes a real
+  // empty-quoted record from the dangling state after a terminating newline.
+  let started = false;
+
+  for (let i = 0; i < text.length; i++) {
+    const char = text[i];
+    started = true;
+    if (quoted) {
+      if (char === '"') {
+        if (text[i + 1] === '"') {
+          field += '"';
+          i++;
+        } else {
+          quoted = false;
+        }
+      } else if (char === '\r' && text[i + 1] === '\n') {
+        field += '\n';
+        i++;
+      } else {
+        field += char;
+      }
+      continue;
+    }
+    if (char === '"' && field === '') {
+      quoted = true;
+    } else if (char === delimiter) {
+      row.push(field);
+      field = '';
+    } else if (char === '\n' || char === '\r') {
+      if (char === '\r' && text[i + 1] === '\n') i++;
+      row.push(field);
+      field = '';
+      records.push(row);
+      row = [];
+      started = false;
+    } else {
+      field += char;
+    }
+  }
+  if (started) {
+    row.push(field);
+    records.push(row);
+  }
+
+  const header = records.shift() ?? [];
+  return {
+    header,
+    rows: records.map((record) => Array.from({ length: header.length }, (_, i) => record[i] ?? '')),
+  };
+}
+
+/** Human-readable byte size, e.g. `4.2 MB`. */
+export function formatBytes(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes < 0) return '';
+  if (bytes < 1024) return `${Math.round(bytes)} B`;
+  const units = ['KB', 'MB', 'GB', 'TB'];
+  let value = bytes / 1024;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit++;
+  }
+  return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;
+}
+
 export function FileNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   const filePath = (node.data.path as string) || (node.data.content as string) || '';
   const title = (node.data.title as string) || filePath.split('/').pop() || 'File';
   const cachedContent = node.data.fileContent as string | undefined;
   const updatedAt = node.data.updatedAt as string | undefined;
   const lineCount = node.data.lineCount as number | undefined;
+  const byteSize = node.data.byteSize as number | undefined;
+  const isBinary = node.data.binary === true;
+  const truncated = node.data.truncated === true;
+  const mimeType = node.data.mimeType as string | undefined;
+  const isPdf = mimeType === 'application/pdf' || filePath.toLowerCase().endsWith('.pdf');
+  // Binary bytes and PDFs are served raw — never fetched or decoded as text.
+  const servesBytes = isBinary || isPdf;
 
   const [content, setContent] = useState<string>(cachedContent ?? '');
-  const [loading, setLoading] = useState(!cachedContent && !!filePath);
+  const [loading, setLoading] = useState(!cachedContent && !!filePath && !servesBytes);
   const [error, setError] = useState<string | null>(null);
+  const [bytesVersion, setBytesVersion] = useState(0);
 
   // Load file content on mount or when path changes
   useEffect(() => {
     if (!filePath) return;
+    if (servesBytes) {
+      setLoading(false);
+      return;
+    }
     // If we already have cached content from SSE, use it
     if (cachedContent !== undefined) {
       setContent(cachedContent);
@@ -86,7 +192,7 @@ export function FileNode({ node, expanded = false }: { node: CanvasNodeState; ex
     return () => {
       cancelled = true;
     };
-  }, [filePath, cachedContent]);
+  }, [filePath, cachedContent, servesBytes]);
 
   // Sync content when server pushes updates via SSE
   useEffect(() => {
@@ -97,6 +203,11 @@ export function FileNode({ node, expanded = false }: { node: CanvasNodeState; ex
 
   const handleReload = useCallback(() => {
     if (!filePath) return;
+    if (servesBytes) {
+      // Byte-served files have no cached text — bust the frame URL instead.
+      setBytesVersion((v) => v + 1);
+      return;
+    }
     setLoading(true);
     setError(null);
     // Clear cached content to force a fresh fetch
@@ -125,11 +236,31 @@ export function FileNode({ node, expanded = false }: { node: CanvasNodeState; ex
         setError('Failed to reload');
         setLoading(false);
       });
-  }, [filePath, node.id]);
+  }, [filePath, node.id, servesBytes]);
 
   const lang = langFromPath(filePath);
   const lines = content.split('\n');
   const gutterWidth = `${String(lines.length).length + 1}ch`;
+  const delimiter = delimiterForPath(filePath);
+  // A .csv that is not actually delimited (single column) stays plain text.
+  const table = useMemo(() => {
+    if (!delimiter || servesBytes || !content) return null;
+    const parsed = parseDelimitedText(content, delimiter);
+    return parsed.header.length >= 2 ? parsed : null;
+  }, [content, delimiter, servesBytes]);
+  const bytesUrl = `/api/canvas/file-bytes?nodeId=${encodeURIComponent(node.id)}${
+    bytesVersion ? `&v=${bytesVersion}` : ''
+  }`;
+  // Amp orb portals block src-URL child iframes and force srcdoc, which cannot
+  // inline a PDF — offer the raw URL instead of a dead frame.
+  const pdfFrameBlocked = iframeMode.value === 'srcdoc';
+  const fillsBody = servesBytes || table !== null;
+
+  const truncatedNotice = truncated ? (
+    <div class="file-node-notice">
+      Showing the first {formatBytes(content.length)} of {formatBytes(byteSize ?? content.length)}
+    </div>
+  ) : null;
 
   if (!filePath) {
     return <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>No file path set</div>;
@@ -236,57 +367,124 @@ export function FileNode({ node, expanded = false }: { node: CanvasNodeState; ex
       <div
         style={{
           flex: 1,
-          overflow: 'auto',
-          padding: '8px 0',
+          minHeight: 0,
+          overflow: fillsBody ? 'hidden' : 'auto',
+          padding: fillsBody ? 0 : '8px 0',
           background: expanded ? 'var(--c-panel-soft)' : undefined,
           borderRadius: expanded ? '0 0 8px 8px' : undefined,
         }}
       >
-        {loading && <div style={{ color: 'var(--c-dim)', padding: '12px', fontStyle: 'italic' }}>Loading…</div>}
-        {error && <div style={{ color: 'var(--c-danger)', padding: '12px' }}>{error}</div>}
-        {!loading && !error && (
-          <pre
-            style={{
-              margin: 0,
-              lineHeight: '1.55',
-              tabSize: 2,
-            }}
-          >
-            {lines.map((line, i) => (
-              <div
-                key={i}
-                style={{
-                  display: 'flex',
-                  minHeight: '1.55em',
-                }}
-              >
-                <span
-                  style={{
-                    width: gutterWidth,
-                    minWidth: gutterWidth,
-                    textAlign: 'right',
-                    color: 'var(--c-dim)',
-                    paddingRight: '12px',
-                    paddingLeft: '10px',
-                    userSelect: 'none',
-                    flexShrink: 0,
-                    opacity: 0.6,
-                  }}
-                >
-                  {i + 1}
-                </span>
-                <code
-                  style={{
-                    color: 'var(--c-text)',
-                    whiteSpace: 'pre',
-                    paddingRight: '10px',
-                  }}
-                >
-                  {line || '\n'}
-                </code>
-              </div>
-            ))}
-          </pre>
+        {isPdf &&
+          (pdfFrameBlocked ? (
+            <div class="file-node-placeholder">
+              <div>PDF preview is unavailable in this embedded host.</div>
+              <a class="file-node-link" href={bytesUrl} target="_blank" rel="noreferrer">
+                Open PDF
+              </a>
+            </div>
+          ) : (
+            <iframe
+              src={bytesUrl}
+              title={title}
+              // SECURITY: same-origin URL, so it must be sandboxed like every
+              // other iframe in the client. Without allow-same-origin the frame
+              // gets an opaque origin and cannot reach the canvas API even if
+              // the bytes turn out to be markup. The built-in PDF viewer needs
+              // no script permissions from us.
+              sandbox=""
+              style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
+            />
+          ))}
+        {!isPdf && isBinary && (
+          <div class="file-node-placeholder">
+            <div class="file-node-placeholder-name">{title}</div>
+            <div>Binary file</div>
+            {byteSize !== undefined && <div>{formatBytes(byteSize)}</div>}
+          </div>
+        )}
+        {!servesBytes && (
+          <>
+            {loading && <div style={{ color: 'var(--c-dim)', padding: '12px', fontStyle: 'italic' }}>Loading…</div>}
+            {error && <div style={{ color: 'var(--c-danger)', padding: '12px' }}>{error}</div>}
+            {!loading &&
+              !error &&
+              (table ? (
+                <div class="file-table-shell">
+                  {truncatedNotice}
+                  {table.rows.length > MAX_TABLE_ROWS && (
+                    <div class="file-node-notice">
+                      Showing {MAX_TABLE_ROWS} of {table.rows.length} rows
+                    </div>
+                  )}
+                  <div class="file-table-wrap">
+                    <table class="file-table">
+                      <thead>
+                        <tr>
+                          {table.header.map((cell, i) => (
+                            <th key={i}>{cell}</th>
+                          ))}
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {table.rows.slice(0, MAX_TABLE_ROWS).map((row, rowIndex) => (
+                          <tr key={rowIndex}>
+                            {row.map((cell, cellIndex) => (
+                              <td key={cellIndex}>{cell}</td>
+                            ))}
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {truncatedNotice}
+                  <pre
+                    style={{
+                      margin: 0,
+                      lineHeight: '1.55',
+                      tabSize: 2,
+                    }}
+                  >
+                    {lines.map((line, i) => (
+                      <div
+                        key={i}
+                        style={{
+                          display: 'flex',
+                          minHeight: '1.55em',
+                        }}
+                      >
+                        <span
+                          style={{
+                            width: gutterWidth,
+                            minWidth: gutterWidth,
+                            textAlign: 'right',
+                            color: 'var(--c-dim)',
+                            paddingRight: '12px',
+                            paddingLeft: '10px',
+                            userSelect: 'none',
+                            flexShrink: 0,
+                            opacity: 0.6,
+                          }}
+                        >
+                          {i + 1}
+                        </span>
+                        <code
+                          style={{
+                            color: 'var(--c-text)',
+                            whiteSpace: 'pre',
+                            paddingRight: '10px',
+                          }}
+                        >
+                          {line || '\n'}
+                        </code>
+                      </div>
+                    ))}
+                  </pre>
+                </>
+              ))}
+          </>
         )}
       </div>
     </div>

package/src/client/nodes/MermaidNode.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useMemo, useRef } from 'preact/hooks';
+import { HTML_SURFACE_PUSH_SOURCE } from '../../shared/ax-surface-protocol.js';
+import { canvasTheme } from '../state/canvas-store';
+import type { CanvasNodeState } from '../types';
+import { nodeSurfaceUrl, surfaceContentHash } from './surface-url';
+import { useIframeContentHeight } from './use-iframe-content-height';
+import { useSurfaceFrame } from './use-surface-frame';
+
+/**
+ * Mermaid diagram node — a display-only iframe surface. The server renders the
+ * surface document (escaped diagram source + /canvas/mermaid-entry.js) at
+ * /api/canvas/surface/:id; the iframe and "Open as site" share that one render
+ * path, exactly like html nodes. Minimal subset of HtmlNode: theme push and
+ * content-height growth, no AX bridge, no presentation mode.
+ */
+export function MermaidNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const theme = canvasTheme.value;
+  // Stable per-mount nonce that authorizes parent → iframe theme-update messages.
+  const themeToken = useMemo(() => `theme-${crypto.randomUUID()}`, []);
+  // Per-mount nonce for the content-height reporter (node grows to fit content).
+  const frameToken = useMemo(() => `frame-${crypto.randomUUID()}`, []);
+  const source = typeof node.data.content === 'string' ? node.data.content : '';
+  const v = useMemo(() => surfaceContentHash(source), [source]);
+
+  // `theme` is intentionally excluded from the deps: live theme changes are
+  // pushed via postMessage below (no reload), while `v` reloads the frame when
+  // the diagram source changes.
+  const surfaceSrc = useMemo(
+    () => (source ? nodeSurfaceUrl(node.id, { theme, themeToken, v, frameToken }) : ''),
+    [source, themeToken, v, node.id, frameToken],
+  );
+
+  // src vs fetch()+srcdoc, decided by the boot-wide embed probe (Amp portals).
+  const surfaceFrame = useSurfaceFrame(surfaceSrc);
+
+  // 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 pushTheme = () => {
+    iframeRef.current?.contentWindow?.postMessage(
+      {
+        source: HTML_SURFACE_PUSH_SOURCE,
+        type: 'theme-update',
+        token: themeToken,
+        theme,
+      },
+      '*',
+    );
+  };
+
+  useEffect(pushTheme, [theme, themeToken]);
+
+  if (!source) {
+    return <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>No diagram source set</div>;
+  }
+
+  // SECURITY: sandbox stays `allow-scripts` ONLY — same tier as html surfaces
+  // (see HtmlNode for the full rationale); the surface route sends a matching
+  // CSP sandbox header.
+  return (
+    <iframe
+      ref={iframeRef}
+      class="html-node-frame"
+      title={typeof node.data.title === 'string' ? node.data.title : 'Mermaid diagram'}
+      sandbox="allow-scripts"
+      {...surfaceFrame}
+      onLoad={pushTheme}
+      style={{
+        width: '100%',
+        height: '100%',
+        minHeight: expanded ? '70vh' : '300px',
+        border: 'none',
+        background: 'var(--c-bg)',
+        borderRadius: '6px',
+        display: 'block',
+      }}
+    />
+  );
+}

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

@@ -466,6 +466,25 @@ function easeOutCubic(t: number): number {
  * Cancels any in-flight animation. Direct manipulation (pan/zoom gestures)
  * should use setViewport() instead for instant response.
  */
+/**
+ * Zoom by a factor about the CENTRE of the viewport.
+ *
+ * The toolbar's +/- used to change `scale` alone and keep `x`/`y`, which anchors
+ * the zoom at the world origin — so zooming in visibly slid the board up-left and
+ * zooming out pushed it down-right, instead of magnifying what you were looking
+ * at. Same correction the pointer-anchored wheel zoom applies, with the viewport
+ * centre as the anchor.
+ */
+export function zoomByFactor(factor: number, duration = 150): void {
+  const v = viewport.value;
+  const scale = Math.min(4, Math.max(0.1, v.scale * factor));
+  if (scale === v.scale) return;
+  const ratio = scale / v.scale;
+  const cx = window.innerWidth / 2;
+  const cy = window.innerHeight / 2;
+  animateViewport({ x: cx - ratio * (cx - v.x), y: cy - ratio * (cy - v.y), scale }, duration);
+}
+
 export function animateViewport(
   target: ViewportState,
   duration = 300,

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

@@ -376,12 +376,44 @@ export async function updateViewportFromClient(
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
         ...viewport,
+        ...clientWindowSize(),
         ...(options.recordHistory === false ? { recordHistory: false } : {}),
       }),
     },
   );
 }
 
+/**
+ * This window's size, sent alongside every viewport write so a later agent
+ * `fit` computes against the human's REAL window instead of a hardcoded
+ * 1440x900 (0.4.6 orb feedback #2: fit clipped nodes on both sides).
+ */
+function clientWindowSize(): { clientWidth: number; clientHeight: number } | Record<string, never> {
+  if (typeof window === 'undefined') return {};
+  const clientWidth = window.innerWidth;
+  const clientHeight = window.innerHeight;
+  if (!clientWidth || !clientHeight) return {};
+  return { clientWidth, clientHeight };
+}
+
+/**
+ * Report this window's size WITHOUT touching the stored viewport. The
+ * viewport op defaults every omitted coordinate to the server's CURRENT
+ * viewport, so a body carrying only the size records the size and leaves the
+ * viewport exactly as it was — never echoing a stale client viewport back over
+ * the server's. Called on connect and on resize so an agent `fit` has the real
+ * window size before the human ever pans or zooms.
+ */
+export async function reportClientViewportSize(): Promise<void> {
+  const size = clientWindowSize();
+  if (!('clientWidth' in size)) return;
+  await requestBestEffort('reportClientViewportSize', '/api/canvas/viewport', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ ...size, recordHistory: false }),
+  });
+}
+
 // ── Group API ─────────────────────────────────────────────────
 
 /** Create a group containing the given child node IDs. */

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

@@ -34,6 +34,8 @@ export const DEFAULT_POSITIONS: Record<CanvasNodeState['type'], { x: number; y:
   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 },
+  diff: { x: 380, y: 80, w: 640, h: 420 },
+  mermaid: { x: 380, y: 80, w: 640, h: 460 },
   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 },

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

@@ -25,7 +25,7 @@ import {
   updateNodeData,
   workbenchConnectionEpoch,
 } from './canvas-store';
-import { fetchAxSurfaceState } from './intent-bridge';
+import { fetchAxSurfaceState, reportClientViewportSize } from './intent-bridge';
 import { initSessionThemeOverride, themeOverrideActive } from './theme-override';
 import { DEFAULT_POSITIONS, makeNodeState } from './node-factory';
 import { invalidateTokenCache } from '../theme/tokens';
@@ -307,6 +307,8 @@ function isCanvasNodeType(value: unknown): value is CanvasNodeState['type'] {
     value === 'ledger' ||
     value === 'trace' ||
     value === 'file' ||
+    value === 'diff' ||
+    value === 'mermaid' ||
     value === 'image' ||
     value === 'html' ||
     value === 'group'
@@ -402,11 +404,40 @@ function parseCanvasAnnotation(raw: Record<string, unknown>): CanvasAnnotation |
 }
 
 // ── SSE event handlers ───────────────────────────────────────
+
+/**
+ * Stale-SPA guard (0.4.5 report Finding W): a long-lived host panel keeps its
+ * in-memory bundle across a daemon upgrade — SSE reconnects silently and the
+ * old client renders none of the new release's behavior. The boot HTML stamps
+ * the server version at page-serve time; when a `connected` frame reports a
+ * DIFFERENT version, the server was upgraded under this page — reload once to
+ * pick up the new bundle. Guarded per version so a broken stamp can't loop.
+ */
+const VERSION_RELOAD_KEY = 'pmx-canvas-version-reload';
+function reloadIfServerUpgraded(serverVersion: unknown): void {
+  if (typeof serverVersion !== 'string' || !serverVersion || serverVersion === 'unknown') return;
+  if (typeof window === 'undefined') return;
+  const bootVersion = (window as Window & { __PMX_BOOT_SERVER_VERSION?: unknown }).__PMX_BOOT_SERVER_VERSION;
+  if (typeof bootVersion !== 'string' || !bootVersion || bootVersion === 'unknown') return;
+  if (serverVersion === bootVersion) return;
+  try {
+    if (window.sessionStorage.getItem(VERSION_RELOAD_KEY) === serverVersion) return;
+    window.sessionStorage.setItem(VERSION_RELOAD_KEY, serverVersion);
+  } catch {
+    return; // No sessionStorage loop guard available — never risk a reload loop.
+  }
+  window.location.reload();
+}
+
 function handleConnected(data: Record<string, unknown>): void {
   sessionId.value = (data.sessionId as string) || '';
   connectionStatus.value = 'connected';
   // Reconnect marker for holders of server-minted URLs (Finding S).
   workbenchConnectionEpoch.value += 1;
+  reloadIfServerUpgraded(data.version);
+  // Tell the server how big this window actually is, so an agent `fit` sizes
+  // the board to the human's window (0.4.6 orb feedback #2).
+  void reportClientViewportSize();
   // A ?theme= session override (host-default theming) wins over the
   // server-global theme for THIS client only.
   if (typeof data.theme === 'string' && !themeOverrideActive()) {