pmx-canvas 0.4.6 → 0.4.8

package/src/client/nodes/ExtAppFrame.tsx

@@ -65,6 +65,36 @@ export function isWebKitOnlyHost(userAgent: string): boolean {
   return /AppleWebKit/.test(userAgent) && !/Chrome|Chromium|CriOS|Edg|Android/.test(userAgent);
 }
 
+/**
+ * Finding N (0.4.7 report): the GitHub Copilot panel's WKWebView reports
+ * `document.visibilityState === 'hidden'` CONTINUOUSLY — the workbench document
+ * never transitions to 'visible' even with the panel open and on-screen. Two
+ * things break as a result: the `visibilitychange` re-arm below can never fire
+ * (there is no transition to listen for), and `paint-ok` becomes a false green —
+ * the app document happily answers the double-rAF paint probe while the
+ * compositor still shows black. The instrumented trail from that session carries
+ * `visibility: "hidden"` on essentially every recovery event.
+ *
+ * So: when the document CLAIMS hidden but the frame is demonstrably on-screen,
+ * do not trust the claim — spend one more recovery round as if visible. A host
+ * that ever reports 'visible' has a working signal and is left to the
+ * visibilitychange path, which keeps a genuinely backgrounded panel quiet.
+ */
+export function shouldAssumeVisibleRearm(options: {
+  userAgent: string;
+  visibilityState: string;
+  rect: { top: number; left: number; bottom: number; right: number; width: number; height: number };
+  viewport: { width: number; height: number };
+  alreadyRearmed: boolean;
+}): boolean {
+  const { userAgent, visibilityState, rect, viewport, alreadyRearmed } = options;
+  if (alreadyRearmed) return false;
+  if (!isWebKitOnlyHost(userAgent)) return false;
+  if (visibilityState !== 'hidden') return false;
+  if (rect.width <= 0 || rect.height <= 0) return false;
+  return rect.bottom > 0 && rect.right > 0 && rect.top < viewport.height && rect.left < viewport.width;
+}
+
 // Finding F (0.2.5, reworked 0.3.1): BOOT-AWARE serialized WebKit remount queue.
 // The black tile is a cold-hydration BURST problem — a single ext-app repaints fine
 // into an idle panel (like a live-created node, or expand+close), but several
@@ -352,6 +382,9 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
   // Recovery ran while the document was hidden (compositing suppressed) — re-arm
   // one fresh remount round when the panel becomes visible (Finding N).
   const bootedWhileHiddenRef = useRef(false);
+  // Finding N (0.4.7): at most one "assume visible" round per frame lifetime, so
+  // a host that is hidden forever cannot turn the re-arm into a remount loop.
+  const assumeVisibleRearmDoneRef = useRef(false);
   const unmountedRef = useRef(false);
   const [status, setStatus] = useState<ExtAppFrameStatus>('loading');
   const [error, setError] = useState<string | null>(null);
@@ -567,21 +600,64 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
       });
     });
 
+  // Finding N (0.4.7): the Copilot WKWebView never reports 'visible', so the
+  // visibilitychange re-arm below is dead code there and the ladder's own
+  // paint-ok cannot be trusted. When the document claims hidden but this frame
+  // is on-screen, spend one more full recovery round with a fresh budget —
+  // the same round the visibilitychange path would have run.
+  const ASSUME_VISIBLE_REARM_DELAY_MS = 600;
+  const maybeAssumeVisibleRearm = (): void => {
+    if (typeof document === 'undefined' || typeof navigator === 'undefined' || typeof window === 'undefined') return;
+    const frame = iframeRef.current;
+    if (!frame || unmountedRef.current) return;
+    if (
+      !shouldAssumeVisibleRearm({
+        userAgent: navigator.userAgent,
+        visibilityState: document.visibilityState,
+        rect: frame.getBoundingClientRect(),
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        alreadyRearmed: assumeVisibleRearmDoneRef.current,
+      })
+    )
+      return;
+    assumeVisibleRearmDoneRef.current = true;
+    // Re-check after a beat: a host whose visibility signal merely lagged the
+    // panel opening resolves itself here, and the visibilitychange path owns it.
+    window.setTimeout(() => {
+      if (unmountedRef.current || document.visibilityState === 'visible') return;
+      webkitRemountAttemptsRef.current = 0;
+      setRecoveryExhausted(false);
+      bootedWhileHiddenRef.current = false;
+      extAppRecoveryLog(nodeId, 'assume-visible-rearm');
+      scheduleWebkitRemount('assume-visible');
+    }, ASSUME_VISIBLE_REARM_DELAY_MS);
+  };
+
+  // A paint-ok collected while the document claims hidden proves only that the
+  // app's rAF pipeline is alive — NOT that anything composited (Finding N,
+  // 0.4.7). Say so in the trail instead of recording an unqualified success.
+  const paintOkLabel = (suffix = ''): string =>
+    typeof document !== 'undefined' && document.visibilityState === 'hidden'
+      ? `paint-ok${suffix} (unverified: host hidden)`
+      : `paint-ok${suffix}`;
+
   const runPaintLadder = async (): Promise<void> => {
     if (expanded) return;
     if (typeof navigator === 'undefined' || typeof window === 'undefined') return;
     if (!isWebKitOnlyHost(navigator.userAgent)) return;
     setPaintPending(true);
     if (await probePaint()) {
-      extAppRecoveryLog(nodeId, 'paint-ok');
+      extAppRecoveryLog(nodeId, paintOkLabel());
       setPaintPending(false);
+      maybeAssumeVisibleRearm();
       return;
     }
     extAppRecoveryLog(nodeId, 'paint-fail');
     await runSoftExpandCycle();
     if (await probePaint()) {
-      extAppRecoveryLog(nodeId, 'paint-ok (after soft-expand)');
+      extAppRecoveryLog(nodeId, paintOkLabel(' (after soft-expand)'));
       setPaintPending(false);
+      maybeAssumeVisibleRearm();
       return;
     }
     if (unmountedRef.current) return;
@@ -590,6 +666,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
       extAppRecoveryLog(nodeId, 'recovery-exhausted');
       setPaintPending(false);
       setRecoveryExhausted(true);
+      maybeAssumeVisibleRearm();
     }
   };
 

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/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/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';
@@ -435,6 +435,9 @@ function handleConnected(data: Record<string, unknown>): void {
   // 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()) {