pmx-canvas 0.1.15 → 0.1.16

package/dist/types/client/nodes/ContextNode.d.ts

@@ -1,4 +1,4 @@
-import type { CanvasNodeState } from '../types';
+import { type CanvasNodeState } from '../types';
 interface ContextCard {
     key?: string;
     title?: string;
@@ -25,10 +25,19 @@ export interface ContextNodeFallbackDisplay {
     summary: string;
     path: string;
 }
+export interface PinnedContextDisplay {
+    id: string;
+    title: string;
+    summary: string;
+    kind: string;
+    path: string;
+}
 export declare function normalizeContextCardDisplay(card: ContextCard): ContextCardDisplay;
 export declare function normalizeContextNodeFallback(nodeData: Record<string, unknown>): ContextNodeFallbackDisplay | null;
-export declare function ContextNode({ node, expanded, }: {
+export declare function normalizePinnedContextDisplay(node: CanvasNodeState): PinnedContextDisplay;
+export declare function ContextNode({ node, expanded, pinnedNodes, }: {
     node: CanvasNodeState;
     expanded?: boolean;
+    pinnedNodes?: CanvasNodeState[];
 }): import("preact/src").JSX.Element;
 export {};

package/dist/types/client/nodes/StatusNode.d.ts

@@ -1,4 +1,5 @@
 import type { CanvasNodeState } from '../types';
+export declare function getStatusDisplayPhase(node: CanvasNodeState): string;
 export declare function StatusNode({ node }: {
     node: CanvasNodeState;
 }): import("preact/src").JSX.Element;

package/dist/types/client/state/canvas-store.d.ts

@@ -64,7 +64,9 @@ export declare function applyServerCanvasLayout(layout: Pick<CanvasLayout, 'node
  * Cancels any in-flight animation. Direct manipulation (pan/zoom gestures)
  * should use setViewport() instead for instant response.
  */
-export declare function animateViewport(target: ViewportState, duration?: number): void;
+export declare function animateViewport(target: ViewportState, duration?: number, options?: {
+    recordHistory?: boolean;
+}): void;
 /** Cancel any in-flight viewport animation (e.g. when user starts dragging). */
 export declare function cancelViewportAnimation(): void;
 export declare function persistLayout(options?: {
@@ -72,7 +74,9 @@ export declare function persistLayout(options?: {
 }): void;
 export declare function restoreLayout(): Map<string, Partial<CanvasNodeState>> | null;
 export declare function fitAll(containerW: number, containerH: number): void;
-export declare function focusNode(id: string): void;
+export declare function focusNode(id: string, options?: {
+    recordHistory?: boolean;
+}): void;
 export declare function cycleActiveNode(direction?: 1 | -1): void;
 export declare function walkGraph(direction: 'up' | 'down' | 'left' | 'right'): void;
 export declare function expandNode(id: string): void;

package/dist/types/client/state/intent-bridge.d.ts

@@ -112,6 +112,8 @@ export declare function updateViewportFromClient(viewport: {
     x: number;
     y: number;
     scale: number;
+}, options?: {
+    recordHistory?: boolean;
 }): Promise<{
     ok: boolean;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pmx-canvas",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "Spatial canvas workbench for coding agents — infinite 2D canvas with agent-native CLI, MCP integration, nodes, edges, file watching, and snapshots",
   "type": "module",
   "main": "./src/server/index.ts",

package/src/client/canvas/ContextPinBar.tsx

@@ -2,10 +2,11 @@ import {
   clearContextPins,
   contextPinnedNodeIds,
 } from '../state/canvas-store';
+import { attentionHistoryOpen } from '../state/attention-store';
 
 export function ContextPinBar() {
   const count = contextPinnedNodeIds.value.size;
-  if (count === 0) return null;
+  if (count === 0 || attentionHistoryOpen.value) return null;
 
   return (
     <div class="context-pin-bar">

package/src/client/canvas/DockedNode.tsx

@@ -3,7 +3,7 @@ import { LedgerNode } from '../nodes/LedgerNode';
 import { StatusNode } from '../nodes/StatusNode';
 import { StatusSummary } from '../nodes/StatusSummary';
 import { attentionHistoryOpen, closeAttentionHistory } from '../state/attention-store';
-import { toggleCollapsed, undockNode } from '../state/canvas-store';
+import { getContextPinnedNodes, toggleCollapsed, undockNode } from '../state/canvas-store';
 import { TYPE_LABELS } from '../types';
 import type { CanvasNodeState } from '../types';
 
@@ -27,7 +27,8 @@ function getContextItemCount(node: CanvasNodeState): number {
 }
 
 function ContextDockedNode({ node }: { node: CanvasNodeState }) {
-  const count = getContextItemCount(node);
+  const pinnedNodes = getContextPinnedNodes();
+  const count = pinnedNodes.length > 0 ? pinnedNodes.length : getContextItemCount(node);
   const hasItems = count > 0;
   const collapsed = node.collapsed === true;
 
@@ -117,7 +118,7 @@ function ContextDockedNode({ node }: { node: CanvasNodeState }) {
         </div>
       </div>
       <div class="context-dock-body">
-        <ContextNode node={node} />
+        <ContextNode node={node} pinnedNodes={pinnedNodes} />
       </div>
     </aside>
   );

package/src/client/nodes/ContextNode.tsx

@@ -1,5 +1,5 @@
 import { openWorkbenchFile } from '../state/intent-bridge';
-import type { CanvasNodeState } from '../types';
+import { TYPE_LABELS, type CanvasNodeState } from '../types';
 
 interface ContextCard {
   key?: string;
@@ -30,6 +30,14 @@ export interface ContextNodeFallbackDisplay {
   path: string;
 }
 
+export interface PinnedContextDisplay {
+  id: string;
+  title: string;
+  summary: string;
+  kind: string;
+  path: string;
+}
+
 export function normalizeContextCardDisplay(card: ContextCard): ContextCardDisplay {
   const title = card.title || card.label || card.key || 'Context';
   const summary = card.summary?.trim() || 'Available in startup context.';
@@ -90,6 +98,24 @@ export function normalizeContextNodeFallback(
   };
 }
 
+export function normalizePinnedContextDisplay(node: CanvasNodeState): PinnedContextDisplay {
+  const title = asTrimmedString(node.data.title) || node.id;
+  const summary =
+    asTrimmedString(node.data.content) ||
+    asTrimmedString(node.data.excerpt) ||
+    asTrimmedString(node.data.description) ||
+    asTrimmedString(node.data.pageTitle) ||
+    '';
+  const path = asTrimmedString(node.data.path) || asTrimmedString(node.data.url);
+  return {
+    id: node.id,
+    title,
+    summary,
+    kind: TYPE_LABELS[node.type] ?? node.type,
+    path,
+  };
+}
+
 function formatTokens(n: number | null): string {
   if (n === null || !Number.isFinite(n) || n < 0) return '0';
   if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}m`;
@@ -107,9 +133,12 @@ function usageBarColor(utilization: number): string {
 export function ContextNode({
   node,
   expanded = false,
-}: { node: CanvasNodeState; expanded?: boolean }) {
+  pinnedNodes = [],
+}: { node: CanvasNodeState; expanded?: boolean; pinnedNodes?: CanvasNodeState[] }) {
   const cards = (node.data.cards as ContextCard[]) ?? [];
   const auxTabs = (node.data.auxTabs as Array<{ id: string; url: string; reason?: string }>) ?? [];
+  const pinnedContext = pinnedNodes.map(normalizePinnedContextDisplay);
+  const hasPinnedContext = pinnedContext.length > 0;
   const currentTokens =
     typeof node.data.currentTokens === 'number' ? node.data.currentTokens : null;
   const tokenLimit = typeof node.data.tokenLimit === 'number' ? node.data.tokenLimit : null;
@@ -120,7 +149,9 @@ export function ContextNode({
     utilization !== null ? Math.max(0, Math.min(100, Math.round(utilization * 100))) : null;
   const barColor = usageBarColor(utilization ?? 0);
   const fallback =
-    cards.length === 0 && auxTabs.length === 0 ? normalizeContextNodeFallback(node.data) : null;
+    !hasPinnedContext && cards.length === 0 && auxTabs.length === 0
+      ? normalizeContextNodeFallback(node.data)
+      : null;
 
   const openCard = async (card: ContextCard): Promise<void> => {
     const path = typeof card.path === 'string' ? card.path.trim() : '';
@@ -181,7 +212,98 @@ export function ContextNode({
         </div>
       )}
 
-      {cards.length > 0 && (
+      {hasPinnedContext && (
+        <div>
+          <div
+            style={{
+              fontSize: '10px',
+              fontWeight: 600,
+              color: 'var(--c-muted)',
+              textTransform: 'uppercase',
+              letterSpacing: '0.04em',
+              marginBottom: '6px',
+            }}
+          >
+            Pinned Context ({pinnedContext.length})
+          </div>
+          {pinnedContext.map((display) => (
+            <div
+              key={display.id}
+              style={{
+                padding: '6px 8px',
+                background: 'var(--c-surface-subtle)',
+                borderRadius: '6px',
+                marginBottom: '4px',
+                borderLeft: '2px solid var(--c-accent)',
+              }}
+            >
+              <div style={{ fontWeight: 600, color: 'var(--c-text)', marginBottom: '2px' }}>
+                {display.title}
+              </div>
+              {display.summary && (
+                <div
+                  style={{
+                    color: 'var(--c-muted)',
+                    fontSize: '10px',
+                    lineHeight: 1.45,
+                    marginBottom: '4px',
+                    whiteSpace: 'pre-wrap',
+                  }}
+                >
+                  {display.summary}
+                </div>
+              )}
+              <div style={{ display: 'flex', gap: '4px', flexWrap: 'wrap', marginTop: '4px' }}>
+                <span
+                  style={{
+                    fontSize: '9px',
+                    padding: '1px 4px',
+                    background: 'var(--c-surface-hover)',
+                    color: 'var(--c-text-soft)',
+                    borderRadius: '3px',
+                    display: 'inline-block',
+                  }}
+                >
+                  {display.kind}
+                </span>
+              </div>
+              {display.path && (
+                <div style={{ marginTop: '6px' }}>
+                  <div
+                    style={{
+                      color: 'var(--c-dim)',
+                      fontSize: '10px',
+                      wordBreak: 'break-all',
+                      marginBottom: '6px',
+                    }}
+                  >
+                    {display.path}
+                  </div>
+                  {display.path.startsWith('/') && (
+                    <button
+                      type="button"
+                      onClick={() => void openWorkbenchFile(display.path)}
+                      style={{
+                        padding: '4px 8px',
+                        fontSize: '10px',
+                        background: 'var(--c-accent-12)',
+                        border: '1px solid var(--c-accent-25)',
+                        borderRadius: '4px',
+                        color: 'var(--c-text-soft)',
+                        cursor: 'pointer',
+                      }}
+                    >
+                      Open in canvas
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {!hasPinnedContext && cards.length > 0 && (
         <div>
           <div
             style={{
@@ -305,7 +427,7 @@ export function ContextNode({
         </div>
       )}
 
-      {auxTabs.length > 0 && (
+      {!hasPinnedContext && auxTabs.length > 0 && (
         <div>
           <div
             style={{
@@ -404,7 +526,7 @@ export function ContextNode({
         </div>
       )}
 
-      {!fallback && cards.length === 0 && auxTabs.length === 0 && (
+      {!hasPinnedContext && !fallback && cards.length === 0 && auxTabs.length === 0 && (
         <div style={{ color: 'var(--c-dim)', fontStyle: 'italic' }}>No context loaded</div>
       )}
     </div>

package/src/client/nodes/StatusNode.tsx

@@ -1,8 +1,23 @@
 import { PHASE_COLORS } from '../theme/tokens';
 import type { CanvasNodeState } from '../types';
 
+export function getStatusDisplayPhase(node: CanvasNodeState): string {
+  const phase = typeof node.data.phase === 'string' && node.data.phase.trim().length > 0
+    ? node.data.phase.trim()
+    : '';
+  if (phase) return phase;
+  const content = typeof node.data.content === 'string' && node.data.content.trim().length > 0
+    ? node.data.content.trim()
+    : '';
+  if (content) return content;
+  const status = typeof node.data.status === 'string' && node.data.status.trim().length > 0
+    ? node.data.status.trim()
+    : '';
+  return status || 'idle';
+}
+
 export function StatusNode({ node }: { node: CanvasNodeState }) {
-  const phase = (node.data.phase as string) || 'idle';
+  const phase = getStatusDisplayPhase(node);
   const detail = (node.data.detail as string) || '';
   const message = (node.data.message as string) || '';
   const level = (node.data.level as string) || 'ok';

package/src/client/nodes/StatusSummary.tsx

@@ -1,8 +1,9 @@
 import { PHASE_COLORS } from '../theme/tokens';
 import type { CanvasNodeState } from '../types';
+import { getStatusDisplayPhase } from './StatusNode';
 
 export function StatusSummary({ node }: { node: CanvasNodeState }) {
-  const phase = (node.data.phase as string) || 'idle';
+  const phase = getStatusDisplayPhase(node);
   const activeTool = node.data.activeTool as string | null;
   const subagent = node.data.subagent as { state: string; name: string } | undefined;
   const phaseColor = PHASE_COLORS[phase] ?? 'var(--c-muted)';

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

@@ -330,9 +330,16 @@ export function replaceViewport(next: ViewportState): void {
 }
 
 export function commitViewport(next: ViewportState): void {
+  commitViewportWithOptions(next);
+}
+
+function commitViewportWithOptions(
+  next: ViewportState,
+  options: { recordHistory?: boolean } = {},
+): void {
   viewport.value = next;
-  persistLayout();
-  void updateViewportFromClient(next);
+  persistLayout(options);
+  void updateViewportFromClient(next, options);
 }
 
 export function applyServerCanvasLayout(
@@ -394,6 +401,7 @@ function easeOutCubic(t: number): number {
 export function animateViewport(
   target: ViewportState,
   duration = 300,
+  options: { recordHistory?: boolean } = {},
 ): void {
   if (animationId !== null) cancelAnimationFrame(animationId);
 
@@ -415,7 +423,7 @@ export function animateViewport(
       animationId = requestAnimationFrame(tick);
     } else {
       animationId = null;
-      commitViewport(target);
+      commitViewportWithOptions(target, options);
     }
   }
 
@@ -540,7 +548,7 @@ export function fitAll(containerW: number, containerH: number): void {
 }
 
 // ── Focus node ────────────────────────────────────────────────
-export function focusNode(id: string): void {
+export function focusNode(id: string, options: { recordHistory?: boolean } = {}): void {
   const node = nodes.value.get(id);
   if (!node) return;
   const v = viewport.value;
@@ -550,7 +558,7 @@ export function focusNode(id: string): void {
     x: window.innerWidth / 2 - cx * v.scale,
     y: window.innerHeight / 2 - cy * v.scale,
     scale: v.scale,
-  });
+  }, 300, options);
   bringToFront(id);
 }
 

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

@@ -231,11 +231,15 @@ export async function removeNodeFromClient(id: string): Promise<{ ok: boolean; r
 /** Commit the current viewport to the authoritative server state. */
 export async function updateViewportFromClient(
   viewport: { x: number; y: number; scale: number },
+  options: { recordHistory?: boolean } = {},
 ): Promise<{ ok: boolean }> {
   return requestJson('updateViewportFromClient', '/api/canvas/viewport', { ok: false }, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(viewport),
+    body: JSON.stringify({
+      ...viewport,
+      ...(options.recordHistory === false ? { recordHistory: false } : {}),
+    }),
   });
 }
 

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

@@ -229,7 +229,7 @@ function ensureExtAppNode(data: Record<string, unknown>): void {
   });
   addNode(node);
   if (!node.dockPosition) {
-    focusNode(id);
+    focusNode(id, { recordHistory: false });
   }
 }
 

package/src/server/server.ts

@@ -1216,7 +1216,13 @@ async function handleCanvasViewport(req: Request): Promise<Response> {
     y: typeof body.y === 'number' ? body.y : canvasState.viewport.y,
     scale: typeof body.scale === 'number' ? body.scale : canvasState.viewport.scale,
   };
-  canvasState.setViewport(next);
+  if (body.recordHistory === false) {
+    canvasState.withSuppressedRecording(() => {
+      canvasState.setViewport(next);
+    });
+  } else {
+    canvasState.setViewport(next);
+  }
   emitPrimaryWorkbenchEvent('canvas-viewport-update', { viewport: canvasState.viewport });
   return responseJson({ ok: true });
 }
@@ -1338,6 +1344,14 @@ async function handleCanvasAddNode(req: Request): Promise<Response> {
   const extraData = body.data && typeof body.data === 'object' && !Array.isArray(body.data)
     ? body.data as Record<string, unknown>
     : undefined;
+  if (type === 'html') {
+    if ('html' in body && typeof body.html !== 'string') {
+      return responseJson({ ok: false, error: 'HTML node field "html" must be a string.' }, 400);
+    }
+    if (extraData && 'html' in extraData && typeof extraData.html !== 'string') {
+      return responseJson({ ok: false, error: 'HTML node field "data.html" must be a string.' }, 400);
+    }
+  }
   const content = type === 'image' && typeof body.path === 'string' && typeof body.content !== 'string'
     ? body.path
     : body.content;
@@ -1395,6 +1409,15 @@ async function handleCanvasCreateGroup(req: Request): Promise<Response> {
     body.childLayout === 'grid' || body.childLayout === 'column' || body.childLayout === 'flow'
       ? body.childLayout
       : undefined;
+  if (childIds.length > 0) {
+    const missingChildIds = childIds.filter((id) => !canvasState.getNode(id));
+    if (missingChildIds.length > 0) {
+      return responseJson({
+        ok: false,
+        error: `Cannot create group: missing child node ID${missingChildIds.length === 1 ? '' : 's'}: ${missingChildIds.join(', ')}.`,
+      }, 400);
+    }
+  }
 
   const { node } = createCanvasGroup({ title, childIds, color, x, y, width, height, ...(childLayout ? { childLayout } : {}) });