pmx-canvas 0.4.5 → 0.4.7

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 */
@@ -1895,6 +1907,160 @@ html.is-node-resizing .ext-app-preview-catcher {
   }
 }
 
+/* Diff nodes — unified diff viewer with per-file sections */
+.diff-node {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  height: 100%;
+  overflow: auto;
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--c-text);
+}
+
+.diff-node.diff-node-empty {
+  align-items: center;
+  justify-content: center;
+  color: var(--c-muted);
+}
+
+.diff-node .diff-file {
+  border: 1px solid var(--c-line);
+  border-radius: 6px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.diff-node .diff-file-header {
+  padding: 4px 8px;
+  background: var(--c-panel-overlay);
+  border-bottom: 1px solid var(--c-line);
+  color: var(--c-text-soft);
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.diff-node .diff-lines {
+  margin: 0;
+  padding: 4px 0;
+  overflow-x: auto;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.5;
+}
+
+.diff-node .diff-lines > div {
+  padding: 0 8px;
+  white-space: pre;
+}
+
+.diff-node .diff-hunk {
+  color: var(--c-muted);
+}
+
+.diff-node .diff-line-add {
+  color: var(--c-ok);
+  background: var(--c-ok-10);
+}
+
+.diff-node .diff-line-remove {
+  color: var(--c-danger);
+  background: var(--c-danger-12);
+}
+
+.diff-node .diff-line-context {
+  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;

package/src/client/types.ts

@@ -21,6 +21,8 @@ export interface CanvasNodeState {
     | 'ledger'
     | 'trace'
     | 'file'
+    | 'diff'
+    | 'mermaid'
     | 'image'
     | 'html'
     | 'group';
@@ -77,6 +79,8 @@ export const TYPE_LABELS: Record<CanvasNodeState['type'], string> = {
   ledger: 'LOG',
   trace: 'TRACE',
   file: 'FILE',
+  diff: 'DIFF',
+  mermaid: 'MERMAID',
   image: 'IMG',
   html: 'HTML',
   group: 'GROUP',
@@ -92,6 +96,8 @@ export const EXPANDABLE_TYPES = new Set<CanvasNodeState['type']>([
   'context',
   'ledger',
   'file',
+  'diff',
+  'mermaid',
   'image',
   'html',
 ]);

package/src/mcp/server.ts

@@ -27,7 +27,7 @@ import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
 import { z } from 'zod';
 import { AX_SOURCES } from '../server/operations/ops/ax-shared.js';
-import { canvasState, describeCanvasSchema } from '../server/index.js';
+import { canvasState, describeCanvasSchema, stopCanvasServer } from '../server/index.js';
 import { AX_INTERACTION_TYPES } from '../server/ax-interaction.js';
 import { buildPendingAxActivity } from '../server/ax-state.js';
 import { registerOperationTools, registerCompositeTools } from '../server/operations/index.js';
@@ -884,6 +884,24 @@ export async function startMcpServer(): Promise<void> {
   // Connect via stdio
   const transport = new StdioServerTransport();
   await server.connect(transport);
+
+  // Exit when the stdio channel closes (0.4.5 report Finding Y): without this,
+  // a client that completes the official close sequence leaves this process
+  // orphaned — the auto-started canvas server and its timers keep the event
+  // loop alive forever. stopCanvasServer() checkpoints the SQLite DB before
+  // exit and is a no-op when this process only attached to a remote daemon.
+  const shutdown = (): void => {
+    try {
+      stopCanvasServer();
+    } catch {
+      // Exit regardless — a failed cleanup must not resurrect the orphan.
+    }
+    process.exit(0);
+  };
+  server.server.onclose = shutdown;
+  process.stdin.on('end', shutdown);
+  process.on('SIGINT', shutdown);
+  process.on('SIGTERM', shutdown);
 }
 
 // Allow direct execution: bun run src/mcp/server.ts

package/src/server/ax-flow-loop.ts

@@ -0,0 +1,114 @@
+/**
+ * Server-side bounded loop for materialized AX flows.
+ *
+ * A flow's loop lives on the CANVAS, not in a panel: the anchor step node carries
+ * `data.axFlow.loop` (see shared/ax-flow.ts), so it survives a browser refresh, an
+ * iframe reload, and a server restart — where a panel-driven loop dies with its
+ * document. The driver is `canvasState`'s work-item change hook: whenever a step's
+ * work item reaches `done`, the next step is opened; when the LAST step finishes,
+ * the next run starts — until the run cap is reached or a human presses Stop.
+ *
+ * Bounds (non-negotiable, enforced here rather than trusted from node data):
+ *   - advances only while `loop.running` is true
+ *   - stops at `maxRuns`, itself clamped to AX_FLOW_LOOP_HARD_CAP (20)
+ *   - a `blocked`/`cancelled` step halts advancement (the loop waits, it does not
+ *     skip); a step whose work item no longer exists stops the loop outright
+ *   - re-entrancy: every write this module makes fires the same work-item change
+ *     hook, so `advancing` drops the nested call. State is recomputed from scratch
+ *     on each pass, so dropping nested calls loses nothing.
+ */
+import { AX_FLOW_LOOP_HARD_CAP, readAxFlow, type AxFlowLoopState, type AxFlowStamp } from '../shared/ax-flow.js';
+import type { PmxAxWorkItem } from './ax-state.js';
+import { emitCanvasLayoutUpdate } from './canvas-operations.js';
+import { canvasState, type CanvasNodeState } from './canvas-state.js';
+import { refreshWorkboardNodes } from './workboard.js';
+
+/** Re-entrancy guard: true while an advance pass is writing. */
+let advancing = false;
+
+/** Persist a new loop state on the anchor node (durable: this is what Stop writes). */
+function writeLoopState(node: CanvasNodeState, flow: AxFlowStamp, loop: AxFlowLoopState): void {
+  const current = canvasState.getNode(node.id);
+  if (!current) return;
+  canvasState.updateNode(node.id, { data: { ...current.data, axFlow: { ...flow, loop } } });
+}
+
+/**
+ * Advance one flow by at most one step (or one run boundary). Returns true when
+ * anything changed, so the caller knows whether to broadcast a layout update.
+ */
+function advanceFlow(node: CanvasNodeState, flow: AxFlowStamp, byId: Map<string, PmxAxWorkItem>): boolean {
+  const items = flow.steps.map((step) => byId.get(step.workItemId));
+  if (items.some((item) => !item)) {
+    // The flow was partially dismantled (work items cleared/deleted). Stop rather
+    // than keep a loop armed against state it can no longer drive.
+    writeLoopState(node, flow, { ...flow.loop, running: false });
+    return true;
+  }
+  const statuses = items as PmxAxWorkItem[];
+  // A blocked/cancelled step is a deliberate halt — hold position, stay armed.
+  if (statuses.some((item) => item.status === 'blocked' || item.status === 'cancelled')) return false;
+
+  const openIndex = statuses.findIndex((item) => item.status !== 'done');
+  if (openIndex >= 0) {
+    // Every earlier step is done by construction. Open this one exactly once:
+    // an already in-progress step is the loop's own previous advance.
+    if (statuses[openIndex].status !== 'todo') return false;
+    canvasState.updateWorkItem(statuses[openIndex].id, { status: 'in-progress' }, { source: 'system' });
+    return true;
+  }
+
+  // Every step is done — one full run just completed.
+  const maxRuns = Math.min(flow.loop.maxRuns, AX_FLOW_LOOP_HARD_CAP);
+  const run = flow.loop.run + 1;
+  if (run >= maxRuns) {
+    // The cap is reached WITH this run recorded: no run `maxRuns + 1` is opened.
+    writeLoopState(node, flow, { running: false, run, maxRuns });
+    return true;
+  }
+  // Write the counter before re-opening the steps, so a crash mid-pass can never
+  // replay a run for free.
+  writeLoopState(node, flow, { running: true, run, maxRuns });
+  for (const step of flow.steps) {
+    canvasState.updateWorkItem(step.workItemId, { status: 'todo' }, { source: 'system' });
+  }
+  canvasState.updateWorkItem(flow.steps[0].workItemId, { status: 'in-progress' }, { source: 'system' });
+  return true;
+}
+
+/**
+ * Advance every running flow loop on the canvas. Safe to call on any work-item
+ * change: flows that are not running, not ready, or already advanced are no-ops.
+ */
+export function advanceAxFlowLoops(): void {
+  if (advancing) return;
+  advancing = true;
+  try {
+    const anchors = canvasState
+      .getLayout()
+      .nodes.map((node) => ({ node, flow: readAxFlow(node.data) }))
+      .filter((entry): entry is { node: CanvasNodeState; flow: AxFlowStamp } => entry.flow?.loop.running === true);
+    if (anchors.length === 0) return;
+    const byId = new Map(canvasState.getWorkItems().map((item) => [item.id, item]));
+    let changed = false;
+    // Suppressed: loop bookkeeping (status chips, the run counter) is automatic
+    // and must not fill undo history — same contract as the live workboard.
+    canvasState.withSuppressedRecording(() => {
+      for (const { node, flow } of anchors) {
+        if (advanceFlow(node, flow, byId)) changed = true;
+      }
+    });
+    if (changed) emitCanvasLayoutUpdate();
+  } finally {
+    advancing = false;
+  }
+}
+
+// canvasState exposes ONE work-item listener slot, so this module owns the
+// composition: the live workboard refresh first (unchanged behaviour), then the
+// flow advance. Importing workboard also guarantees ordering — its own
+// registration runs while this module is still evaluating, so this one wins.
+canvasState.setWorkItemsChangedListener(() => {
+  refreshWorkboardNodes();
+  advanceAxFlowLoops();
+});