pmx-canvas 0.4.5 → 0.4.6

package/src/cli/index.ts

@@ -67,6 +67,7 @@ const AGENT_COMMANDS = new Set([
   'serve',
   'copilot',
   'skills',
+  'smoke',
 ]);
 
 const firstArg = args[0] ?? '';

package/src/cli/shared.ts

@@ -164,6 +164,7 @@ function parseFlags(args: string[]): { positional: string[]; flags: Record<strin
     'files',
     'ui-prompts',
     'check',
+    'skip-mcp',
   ]);
   for (let i = 0; i < args.length; i++) {
     const arg = args[i];

package/src/client/canvas/CanvasViewport.tsx

@@ -1,8 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { ContextNode } from '../nodes/ContextNode';
+import { DiffNode } from '../nodes/DiffNode';
 import { FileNode } from '../nodes/FileNode';
 import { LedgerNode } from '../nodes/LedgerNode';
 import { MarkdownNode } from '../nodes/MarkdownNode';
+import { MermaidNode } from '../nodes/MermaidNode';
 import { McpAppNode } from '../nodes/McpAppNode';
 import { StatusNode } from '../nodes/StatusNode';
 import { ImageNode } from '../nodes/ImageNode';
@@ -64,6 +66,10 @@ function renderNodeContent(node: CanvasNodeState) {
       return <TraceNode node={node} />;
     case 'file':
       return <FileNode node={node} />;
+    case 'diff':
+      return <DiffNode node={node} />;
+    case 'mermaid':
+      return <MermaidNode node={node} />;
     case 'image':
       return <ImageNode node={node} />;
     case 'html':

package/src/client/canvas/ExpandedNodeOverlay.tsx

@@ -1,9 +1,11 @@
 import { HTML_SURFACE_PUSH_SOURCE } from '../../shared/ax-surface-protocol.js';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
 import { ContextNode } from '../nodes/ContextNode';
+import { DiffNode } from '../nodes/DiffNode';
 import { FileNode } from '../nodes/FileNode';
 import { LedgerNode } from '../nodes/LedgerNode';
 import { MarkdownNode } from '../nodes/MarkdownNode';
+import { MermaidNode } from '../nodes/MermaidNode';
 import { McpAppNode } from '../nodes/McpAppNode';
 import { StatusNode } from '../nodes/StatusNode';
 import { ImageNode } from '../nodes/ImageNode';
@@ -50,6 +52,10 @@ function renderContent(node: CanvasNodeState, expanded: boolean) {
       return <TraceNode node={node} />;
     case 'file':
       return <FileNode node={node} expanded={expanded} />;
+    case 'diff':
+      return <DiffNode node={node} />;
+    case 'mermaid':
+      return <MermaidNode node={node} expanded={expanded} />;
     case 'image':
       return <ImageNode node={node} expanded={expanded} />;
     case 'html':
@@ -64,6 +70,10 @@ function getNodeTextContent(node: CanvasNodeState): string {
   switch (node.type) {
     case 'markdown':
       return (node.data.content as string) || '';
+    case 'diff':
+      return (node.data.content as string) || '';
+    case 'mermaid':
+      return (node.data.content as string) || '';
     case 'file':
       return (node.data.fileContent as string) || '';
     case 'webpage':

package/src/client/canvas/Minimap.tsx

@@ -36,6 +36,8 @@ function getNodeColors(): Record<CanvasNodeState['type'], string> {
     ledger: t.dim,
     trace: t.purple,
     file: t.accent,
+    diff: t.ok,
+    mermaid: t.purple,
     image: t.ok,
     html: t.warn,
     group: t.dim,

package/src/client/canvas/auto-fit.ts

@@ -21,6 +21,7 @@ export const AUTO_FIT_BODY_PADDING = 24;
 function isIframeNode(node: CanvasNodeState): boolean {
   return (
     node.type === 'html' ||
+    node.type === 'mermaid' ||
     node.type === 'json-render' ||
     node.type === 'graph' ||
     node.type === 'mcp-app' ||
@@ -33,6 +34,7 @@ function isIframeNode(node: CanvasNodeState): boolean {
  *  viewers (unbounded/scrolling content that must not drive node height). */
 function isContentFitSurface(node: CanvasNodeState): boolean {
   if (node.type === 'html') return node.data.presentation !== true;
+  if (node.type === 'mermaid') return true;
   if (node.type === 'json-render' || node.type === 'graph') return true;
   if (node.type === 'mcp-app') return node.data.viewerType === 'web-artifact';
   return false;

package/src/client/icons.tsx

@@ -473,6 +473,10 @@ export function getNodeIcon(type: string): (p: IconProps) => JSX.Element {
       return IconNodeResponse;
     case 'file':
       return IconNodeFile;
+    case 'diff':
+      return IconNodeFile;
+    case 'mermaid':
+      return IconNodeGraph;
     case 'image':
       return IconNodeImage;
     case 'webpage':

package/src/client/mermaid-entry.ts

@@ -0,0 +1,76 @@
+/**
+ * Surface-side renderer for `mermaid` nodes — the entry point of the separately
+ * built dist/canvas/mermaid-entry.js bundle (see package.json build:client).
+ * The server (handleNodeSurface) serves a themed surface document containing the
+ * HTML-escaped diagram source in `<pre class="mermaid-source">`; this script
+ * reads it back via textContent, renders it to SVG, and re-renders when the
+ * parent canvas live-switches the theme (the theme bridge toggles the document's
+ * `data-theme` attribute). Keeping mermaid out of the main SPA bundle keeps the
+ * canvas boot lean — only mermaid-node surfaces pay for the library.
+ */
+
+import mermaid from 'mermaid';
+import { canvasThemeScheme } from '../shared/themes.js';
+
+function documentScheme(): 'dark' | 'light' {
+  return canvasThemeScheme(document.documentElement.getAttribute('data-theme'));
+}
+
+function showError(container: HTMLElement, message: string): void {
+  container.innerHTML = '';
+  const block = document.createElement('pre');
+  block.className = 'mermaid-error';
+  block.style.cssText =
+    'margin:12px;padding:12px;border-radius:6px;color:var(--c-dim,#8a93a6);' +
+    'font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;white-space:pre-wrap;';
+  block.textContent = message;
+  container.appendChild(block);
+}
+
+let renderSeq = 0;
+
+async function renderDiagram(source: string, container: HTMLElement): Promise<void> {
+  const scheme = documentScheme();
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: scheme === 'dark' ? 'dark' : 'default',
+    securityLevel: 'strict',
+  });
+  renderSeq += 1;
+  try {
+    const { svg } = await mermaid.render(`pmx-mermaid-${renderSeq}`, source);
+    container.innerHTML = svg;
+  } catch (error) {
+    // Never leave a blank/black frame: show the parse/render error instead.
+    showError(container, error instanceof Error ? error.message : String(error));
+  }
+}
+
+function boot(): void {
+  const sourceEl = document.querySelector('.mermaid-source');
+  const source = sourceEl?.textContent ?? '';
+  const container = document.createElement('div');
+  container.className = 'mermaid-diagram';
+  document.body.appendChild(container);
+  if (!source.trim()) {
+    showError(container, 'Empty mermaid diagram');
+    return;
+  }
+  void renderDiagram(source, container);
+  // Live theme switching: the parent's theme bridge toggles data-theme on the
+  // root element; re-render so the diagram palette follows the canvas theme.
+  let lastScheme = documentScheme();
+  const observer = new MutationObserver(() => {
+    const scheme = documentScheme();
+    if (scheme === lastScheme) return;
+    lastScheme = scheme;
+    void renderDiagram(source, container);
+  });
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', boot);
+} else {
+  boot();
+}

package/src/client/nodes/DiffNode.tsx

@@ -0,0 +1,114 @@
+import { useMemo } from 'preact/hooks';
+import type { CanvasNodeState } from '../types';
+
+export interface ParsedDiffLine {
+  kind: 'add' | 'remove' | 'context' | 'hunk';
+  text: string;
+}
+
+export interface ParsedDiffSection {
+  /** Display path derived from the +++/--- headers or the `diff --git` line; null for headerless diffs. */
+  path: string | null;
+  lines: ParsedDiffLine[];
+}
+
+function stripDiffPathPrefix(path: string): string {
+  return path.replace(/^[ab]\//, '');
+}
+
+/** Derive a display path from a `--- old` / `+++ new` header pair. */
+function headerPairPath(oldPath: string, newPath: string): string | null {
+  if (newPath && newPath !== '/dev/null') return stripDiffPathPrefix(newPath);
+  if (oldPath && oldPath !== '/dev/null') return stripDiffPathPrefix(oldPath);
+  return null;
+}
+
+/**
+ * Split unified diff text into file sections, hunk headers, and classified
+ * lines. Recognizes `diff --git` boundaries and `---`/`+++` header pairs
+ * (never misclassifying them as remove/add); diffs without any file headers
+ * parse as a single anonymous section.
+ */
+export function parseUnifiedDiff(text: string): ParsedDiffSection[] {
+  if (!text.trim()) return [];
+  const rawLines = text.split('\n');
+  // Drop the trailing empty string produced by a terminating newline.
+  if (rawLines.length > 0 && rawLines[rawLines.length - 1] === '') rawLines.pop();
+
+  const sections: ParsedDiffSection[] = [];
+  let current: ParsedDiffSection | null = null;
+  let currentHasHunk = false;
+
+  const startSection = (path: string | null): ParsedDiffSection => {
+    const section: ParsedDiffSection = { path, lines: [] };
+    currentHasHunk = false;
+    sections.push(section);
+    return section;
+  };
+
+  for (let i = 0; i < rawLines.length; i++) {
+    const line = rawLines[i] ?? '';
+
+    const gitHeader = line.match(/^diff --git a\/(.+?) b\/(.+)$/);
+    if (gitHeader) {
+      current = startSection(gitHeader[2] ?? null);
+      continue;
+    }
+
+    const next = rawLines[i + 1] ?? '';
+    if (line.startsWith('--- ') && next.startsWith('+++ ')) {
+      const path = headerPairPath(line.slice(4).trim(), next.slice(4).trim());
+      if (current && !currentHasHunk) {
+        // Header pair inside a `diff --git` preamble refines that section.
+        if (!current.path) current.path = path;
+      } else {
+        current = startSection(path);
+      }
+      i++; // Consume the `+++` line too — neither header is an add/remove line.
+      continue;
+    }
+
+    if (!current) current = startSection(null);
+    const section = current;
+
+    if (line.startsWith('@@')) {
+      currentHasHunk = true;
+      section.lines.push({ kind: 'hunk', text: line });
+    } else if (line.startsWith('+')) {
+      section.lines.push({ kind: 'add', text: line });
+    } else if (line.startsWith('-')) {
+      section.lines.push({ kind: 'remove', text: line });
+    } else {
+      // Includes `` and git meta lines (index, mode).
+      section.lines.push({ kind: 'context', text: line });
+    }
+  }
+
+  return sections;
+}
+
+export function DiffNode({ node }: { node: CanvasNodeState }) {
+  const content = typeof node.data.content === 'string' ? node.data.content : '';
+  const sections = useMemo(() => parseUnifiedDiff(content), [content]);
+
+  if (sections.length === 0) {
+    return <div class="diff-node diff-node-empty">Empty diff</div>;
+  }
+
+  return (
+    <div class="diff-node">
+      {sections.map((section, sectionIndex) => (
+        <div class="diff-file" key={`${section.path ?? 'anonymous'}-${sectionIndex}`}>
+          {section.path && <div class="diff-file-header">{section.path}</div>}
+          <pre class="diff-lines">
+            {section.lines.map((line, lineIndex) => (
+              <div key={lineIndex} class={line.kind === 'hunk' ? 'diff-hunk' : `diff-line-${line.kind}`}>
+                {line.text || ' '}
+              </div>
+            ))}
+          </pre>
+        </div>
+      ))}
+    </div>
+  );
+}