pmx-canvas 0.4.6 → 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/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()) {

package/src/client/theme/global.css

@@ -643,6 +643,10 @@ body,
   overflow: hidden;
   text-overflow: ellipsis;
   flex: 1;
+  /* The name is the one thing that must survive a cramped title bar. Everything
+     else in the bar is flex-shrink: 0, so without a floor the title absorbed all
+     the pressure and collapsed to an ellipsis on narrow nodes. */
+  min-width: 9ch;
   min-width: 0;
 }
 
@@ -670,6 +674,13 @@ body,
 }
 
 .canvas-node .node-ax-status {
+  /* A long status ("in-progress") must not push the node's NAME out of the bar;
+     the pill is a glance-level cue, the name is the identity. */
+  max-width: 11ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 1;
   font-size: calc(9px * var(--node-chrome-scale, 1));
   padding: calc(1px * var(--node-chrome-scale, 1)) calc(6px * var(--node-chrome-scale, 1));
   border-radius: calc(4px * var(--node-chrome-scale, 1));
@@ -1846,10 +1857,11 @@ html.is-node-resizing .ext-app-preview-catcher {
   border-radius: 999px;
 }
 
-/* Edge labels */
+/* Edge labels — --edge-chrome-scale is set on the edge <svg> so labels keep a
+   constant screen size while zoomed out (see edgeChromeScale in EdgeLayer). */
 .edge-label {
   font-family: var(--font);
-  font-size: 11px;
+  font-size: calc(11px * var(--edge-chrome-scale, 1));
   pointer-events: none;
   user-select: none;
 }
@@ -1857,7 +1869,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 .edge-label-bg {
   fill: var(--c-panel-glass);
   stroke: var(--c-line);
-  stroke-width: 0.5;
+  stroke-width: calc(0.5 * var(--edge-chrome-scale, 1));
 }
 
 /* Trace nodes — compact pills for agent tool/subagent visualization */
@@ -1963,6 +1975,92 @@ html.is-node-resizing .ext-app-preview-catcher {
   color: var(--c-text-soft);
 }
 
+/* File nodes — delimited-data tables and non-text placeholders */
+.file-table-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.file-node-notice {
+  flex-shrink: 0;
+  padding: 4px 10px;
+  color: var(--c-muted);
+  font-size: 10px;
+}
+
+/* Own scroll port so a wide CSV scrolls inside the node instead of blowing out
+   the layout — and so the sticky header row has something to stick to. */
+.file-table-wrap {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* The shell/wrap prefix is load-bearing: these rules must out-specify the markdown
+   table styles (`.canvas-node .node-body table` / `th` / `td`), whose 0.5em
+   margin and translucent header background break the sticky header. Borders are
+   separate, not collapsed — collapsed borders belong to the table element, so
+   the header leaks the rows scrolling beneath it. */
+.file-table-shell .file-table-wrap .file-table {
+  margin: 0;
+  border-collapse: separate;
+  border-spacing: 0;
+  width: max-content;
+  min-width: 100%;
+  font-family: var(--mono);
+  color: var(--c-text);
+}
+
+.file-table-shell .file-table-wrap .file-table th,
+.file-table-shell .file-table-wrap .file-table td {
+  max-width: 320px;
+  padding: 3px 8px;
+  border: none;
+  border-right: 1px solid var(--c-line);
+  border-bottom: 1px solid var(--c-line);
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file-table-shell .file-table-wrap .file-table th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  /* Opaque in every theme — rows must not bleed through while scrolling. */
+  background: var(--c-panel);
+  color: var(--c-text-soft);
+  font-weight: 600;
+}
+
+.file-table-shell .file-table-wrap .file-table tbody tr:nth-child(even) {
+  background: var(--c-surface-subtle);
+}
+
+.file-node-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 100%;
+  padding: 16px;
+  color: var(--c-muted);
+  text-align: center;
+}
+
+.file-node-placeholder-name {
+  color: var(--c-text-soft);
+  word-break: break-all;
+}
+
+.file-node-link {
+  color: var(--c-accent);
+}
+
 /* Docked node — compact toolbar-flanking panel */
 .docked-node {
   min-width: 200px;