pmx-canvas 0.1.15 → 0.1.17

package/src/client/canvas/CanvasViewport.tsx

@@ -20,16 +20,20 @@ import {
   draggingEdge,
   edges,
   expandedNodeId,
+  annotations,
   nodes,
   selectNodes,
   setViewport,
   viewport,
+  createAnnotationFromClient,
+  removeAnnotationFromClient,
 } from '../state/canvas-store';
 import { createEdgeFromClient, createNodeFromClient } from '../state/intent-bridge';
-import type { CanvasNodeState } from '../types';
+import type { CanvasAnnotation, CanvasNodeState } from '../types';
 import { FocusFieldLayer } from './FocusFieldLayer';
 import { CanvasNode } from './CanvasNode';
 import { EdgeLayer } from './EdgeLayer';
+import { AnnotationLayer } from './AnnotationLayer';
 import { activeGuides } from './snap-guides';
 import { usePanZoom } from './use-pan-zoom';
 
@@ -70,6 +74,45 @@ function renderNodeContent(node: CanvasNodeState) {
   }
 }
 
+function distanceToSegment(
+  point: { x: number; y: number },
+  start: { x: number; y: number },
+  end: { x: number; y: number },
+): number {
+  const dx = end.x - start.x;
+  const dy = end.y - start.y;
+  const lengthSquared = dx * dx + dy * dy;
+  if (lengthSquared === 0) return Math.hypot(point.x - start.x, point.y - start.y);
+  const t = Math.max(0, Math.min(1, ((point.x - start.x) * dx + (point.y - start.y) * dy) / lengthSquared));
+  return Math.hypot(point.x - (start.x + t * dx), point.y - (start.y + t * dy));
+}
+
+function findAnnotationAtPoint(
+  annotationList: CanvasAnnotation[],
+  point: { x: number; y: number },
+  hitRadius: number,
+): CanvasAnnotation | null {
+  for (let i = annotationList.length - 1; i >= 0; i--) {
+    const annotation = annotationList[i];
+    if (!annotation) continue;
+    const pad = hitRadius + annotation.width;
+    if (
+      point.x < annotation.bounds.x - pad ||
+      point.x > annotation.bounds.x + annotation.bounds.width + pad ||
+      point.y < annotation.bounds.y - pad ||
+      point.y > annotation.bounds.y + annotation.bounds.height + pad
+    ) continue;
+    for (let index = 1; index < annotation.points.length; index++) {
+      const start = annotation.points[index - 1];
+      const end = annotation.points[index];
+      if (start && end && distanceToSegment(point, start, end) <= hitRadius + annotation.width / 2) {
+        return annotation;
+      }
+    }
+  }
+  return null;
+}
+
 interface LassoRect {
   startX: number;
   startY: number;
@@ -77,9 +120,27 @@ interface LassoRect {
   currentY: number;
 }
 
+interface AnnotationDraft {
+  id: string;
+  type: 'freehand';
+  points: Array<{ x: number; y: number }>;
+  bounds: { x: number; y: number; width: number; height: number };
+  color: string;
+  width: number;
+  createdAt: string;
+}
+
+const ANNOTATION_COLOR = 'currentColor';
+const ANNOTATION_WIDTH = 4;
+const ERASER_HIT_RADIUS = 14;
+
+type AnnotationTool = 'pen' | 'eraser' | null;
+
 interface CanvasViewportProps {
   onNodeContextMenu?: (e: MouseEvent, nodeId: string) => void;
   onCanvasContextMenu?: (e: MouseEvent, canvasX: number, canvasY: number) => void;
+  annotationMode?: boolean;
+  annotationTool?: AnnotationTool;
 }
 
 const IMAGE_EXTS = new Set(['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'bmp', 'ico', 'avif']);
@@ -165,10 +226,13 @@ export function getRenderableWorldNodes(
   return worldNodes;
 }
 
-export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: CanvasViewportProps) {
+export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotationMode = false, annotationTool = null }: CanvasViewportProps) {
   const v = viewport.value;
   const isLassoing = useRef(false);
+  const isAnnotating = useRef(false);
+  const annotationPoints = useRef<Array<{ x: number; y: number }>>([]);
   const [lasso, setLasso] = useState<LassoRect | null>(null);
+  const [draftAnnotation, setDraftAnnotation] = useState<AnnotationDraft | null>(null);
   const [dropActive, setDropActive] = useState(false);
   const dropCounter = useRef(0);
   // Ref mirrors lasso state so pointer handlers always read the latest value
@@ -177,15 +241,16 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
 
   const containerRef = usePanZoom({
     viewport,
+    disabled: annotationMode,
     onViewportChange: (next) => {
       // Don't pan while lassoing — usePanZoom's pointerdown still fires
       // (native listener) before our Preact handler can stopPropagation.
-      if (isLassoing.current) return;
+      if (isLassoing.current || annotationMode) return;
       cancelViewportAnimation();
       setViewport(next);
     },
     onViewportCommit: (next) => {
-      if (isLassoing.current) return;
+      if (isLassoing.current || annotationMode) return;
       cancelViewportAnimation();
       commitViewport(next);
     },
@@ -222,7 +287,53 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
   const handlePointerDown = useCallback(
     (e: PointerEvent) => {
       const container = containerRef.current;
-      if (!container || e.target !== container) return;
+      if (!container) return;
+
+      if (annotationTool === 'eraser') {
+        const target = e.target instanceof Element ? e.target : null;
+        if (target?.closest('.hud-layer, .snapshot-panel, .context-menu, .command-palette')) return;
+        e.preventDefault();
+        e.stopPropagation();
+        const rect = container.getBoundingClientRect();
+        const vp = viewport.value;
+        const point = {
+          x: (e.clientX - rect.left - vp.x) / vp.scale,
+          y: (e.clientY - rect.top - vp.y) / vp.scale,
+        };
+        const hit = findAnnotationAtPoint(Array.from(annotations.value.values()), point, ERASER_HIT_RADIUS / vp.scale);
+        if (hit) void removeAnnotationFromClient(hit.id);
+        return;
+      }
+
+      if (annotationTool === 'pen') {
+        const target = e.target instanceof Element ? e.target : null;
+        if (target?.closest('.hud-layer, .snapshot-panel, .context-menu, .command-palette')) return;
+        e.preventDefault();
+        e.stopPropagation();
+        activeNodeId.value = null;
+        clearSelection();
+        isAnnotating.current = true;
+        const rect = container.getBoundingClientRect();
+        const vp = viewport.value;
+        const point = {
+          x: (e.clientX - rect.left - vp.x) / vp.scale,
+          y: (e.clientY - rect.top - vp.y) / vp.scale,
+        };
+        annotationPoints.current = [point];
+        setDraftAnnotation({
+          id: 'draft-annotation',
+          type: 'freehand',
+          points: [point],
+          bounds: { x: 0, y: 0, width: 0, height: 0 },
+          color: ANNOTATION_COLOR,
+          width: ANNOTATION_WIDTH,
+          createdAt: '',
+        });
+        container.setPointerCapture(e.pointerId);
+        return;
+      }
+
+      if (e.target !== container) return;
 
       if (!e.shiftKey) {
         if (!lassoRef.current) {
@@ -243,11 +354,27 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
       setLasso(initial);
       container.setPointerCapture(e.pointerId);
     },
-    [containerRef],
+    [annotationTool, containerRef],
   );
 
   const handlePointerMove = useCallback(
     (e: PointerEvent) => {
+      if (isAnnotating.current) {
+        const container = containerRef.current;
+        if (!container) return;
+        const rect = container.getBoundingClientRect();
+        const vp = viewport.value;
+        const point = {
+          x: (e.clientX - rect.left - vp.x) / vp.scale,
+          y: (e.clientY - rect.top - vp.y) / vp.scale,
+        };
+        const previous = annotationPoints.current.at(-1);
+        if (previous && Math.hypot(point.x - previous.x, point.y - previous.y) < 2) return;
+        annotationPoints.current = [...annotationPoints.current, point];
+        setDraftAnnotation((draft) => draft ? { ...draft, points: annotationPoints.current } : null);
+        return;
+      }
+
       if (!isLassoing.current || !lassoRef.current) return;
       const rect = containerRef.current?.getBoundingClientRect();
       if (!rect) return;
@@ -262,7 +389,22 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
     [containerRef],
   );
 
-  const handlePointerUp = useCallback(() => {
+  const handlePointerUp = useCallback((e: PointerEvent) => {
+    if (isAnnotating.current) {
+      isAnnotating.current = false;
+      const points = annotationPoints.current;
+      annotationPoints.current = [];
+      setDraftAnnotation(null);
+      if (points.length >= 2) {
+        void createAnnotationFromClient({ points, color: ANNOTATION_COLOR, width: ANNOTATION_WIDTH });
+      }
+      const container = containerRef.current;
+      if (container?.hasPointerCapture(e.pointerId)) {
+        container.releasePointerCapture(e.pointerId);
+      }
+      return;
+    }
+
     const current = lassoRef.current;
     if (!isLassoing.current || !current) return;
     isLassoing.current = false;
@@ -306,6 +448,14 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
     setLasso(null);
   }, []);
 
+  useEffect(() => {
+    if (annotationMode) return;
+    if (!isAnnotating.current && !draftAnnotation) return;
+    isAnnotating.current = false;
+    annotationPoints.current = [];
+    setDraftAnnotation(null);
+  }, [annotationMode, draftAnnotation]);
+
   // ── Drag-to-connect: track cursor in world space, hit-test on drop ──
   useEffect(() => {
     function handleMove(e: PointerEvent) {
@@ -359,6 +509,7 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
   // ── Double-click on background → create new markdown node ──
   const handleDblClick = useCallback(
     (e: MouseEvent) => {
+      if (annotationMode) return;
       const container = containerRef.current;
       if (!container || e.target !== container) return;
       const rect = container.getBoundingClientRect();
@@ -377,11 +528,12 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
         height: nodeH,
       });
     },
-    [containerRef],
+    [annotationMode, containerRef],
   );
 
   const handleContextMenu = useCallback(
     (e: MouseEvent) => {
+      if (annotationMode) return;
       if (!onCanvasContextMenu) return;
 
       const container = containerRef.current;
@@ -396,7 +548,7 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
       const canvasY = (e.clientY - rect.top - v.y) / v.scale;
       onCanvasContextMenu(e, canvasX, canvasY);
     },
-    [containerRef, onCanvasContextMenu],
+    [annotationMode, containerRef, onCanvasContextMenu],
   );
 
   // ── Drag-and-drop files from filesystem ──
@@ -543,7 +695,11 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
         height: '100%',
         position: 'relative',
         overflow: 'hidden',
-        cursor: draggingEdge.value ? 'crosshair' : isLassoing.current ? 'crosshair' : 'grab',
+        cursor: annotationTool === 'eraser'
+          ? 'cell'
+          : annotationMode || draggingEdge.value || isLassoing.current
+            ? 'crosshair'
+            : 'grab',
       }}
     >
       {/* D4: CSS matrix(a,b,c,d,tx,ty) — scale uniformly (a=d=scale, b=c=0)
@@ -561,6 +717,8 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
       >
         <FocusFieldLayer />
         <EdgeLayer nodes={nodes} edges={edges} />
+        <AnnotationLayer annotations={Array.from(annotations.value.values())} />
+        {draftAnnotation && draftAnnotation.points.length >= 2 && <AnnotationLayer annotations={[draftAnnotation]} />}
         {worldNodes.map((node) => (
           <CanvasNode key={node.id} node={node} onContextMenu={onNodeContextMenu}>
             {renderNodeContent(node)}
@@ -579,6 +737,7 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu }: Canva
           </svg>
         )}
       </div>
+      {annotationMode && <div class={`annotation-capture-layer${annotationTool === 'eraser' ? ' erasing' : ''}`} aria-hidden="true" />}
       {lassoStyle && <div class="lasso-rect" style={lassoStyle} />}
       {dropActive && (
         <div class="drop-zone-overlay">

package/src/client/canvas/ContextPinBar.tsx

@@ -1,11 +1,13 @@
 import {
   clearContextPins,
   contextPinnedNodeIds,
+  hasOpenDockedContextPanel,
 } 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 || hasOpenDockedContextPanel.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/canvas/use-pan-zoom.ts

@@ -14,6 +14,7 @@ interface PanZoomOptions {
   viewport: Signal<ViewportState>;
   onViewportChange: (v: ViewportState) => void;
   onViewportCommit: (v: ViewportState) => void;
+  disabled?: boolean;
 }
 
 /**
@@ -23,7 +24,7 @@ interface PanZoomOptions {
  * - Pointer drag on background: pan
  * - Pinch (touch): zoom
  */
-export function usePanZoom({ viewport, onViewportChange, onViewportCommit }: PanZoomOptions) {
+export function usePanZoom({ viewport, onViewportChange, onViewportCommit, disabled = false }: PanZoomOptions) {
   const containerRef = useRef<HTMLDivElement>(null);
   const isPanning = useRef(false);
   const lastPointer = useRef({ x: 0, y: 0 });
@@ -42,6 +43,7 @@ export function usePanZoom({ viewport, onViewportChange, onViewportCommit }: Pan
 
   const handleWheel = useCallback(
     (e: WheelEvent) => {
+      if (disabled) return;
       e.preventDefault();
       const v = viewport.value;
 
@@ -74,21 +76,23 @@ export function usePanZoom({ viewport, onViewportChange, onViewportCommit }: Pan
         scheduleViewportCommit(next);
       }
     },
-    [viewport, onViewportChange, scheduleViewportCommit],
+    [disabled, viewport, onViewportChange, scheduleViewportCommit],
   );
 
   const handlePointerDown = useCallback((e: PointerEvent) => {
+    if (disabled) return;
     // Only pan when clicking the canvas background (not nodes)
     const container = containerRef.current;
     if (!container || e.target !== container) return;
     isPanning.current = true;
     lastPointer.current = { x: e.clientX, y: e.clientY };
     container.setPointerCapture(e.pointerId);
-  }, []);
+  }, [disabled]);
 
   const handlePointerMove = useCallback(
     (e: PointerEvent) => {
       if (!isPanning.current) return;
+      if (disabled) return;
       const dx = e.clientX - lastPointer.current.x;
       const dy = e.clientY - lastPointer.current.y;
       lastPointer.current = { x: e.clientX, y: e.clientY };
@@ -96,7 +100,7 @@ export function usePanZoom({ viewport, onViewportChange, onViewportCommit }: Pan
       const v = viewport.value;
       onViewportChange({ x: v.x + dx, y: v.y + dy, scale: v.scale });
     },
-    [viewport, onViewportChange],
+    [disabled, viewport, onViewportChange],
   );
 
   const handlePointerUp = useCallback(() => {
@@ -109,6 +113,7 @@ export function usePanZoom({ viewport, onViewportChange, onViewportCommit }: Pan
   // Touch pinch
   const handleTouchMove = useCallback(
     (e: TouchEvent) => {
+      if (disabled) return;
       if (e.touches.length !== 2) {
         lastPinchDist.current = 0;
         return;
@@ -142,7 +147,7 @@ export function usePanZoom({ viewport, onViewportChange, onViewportCommit }: Pan
       }
       lastPinchDist.current = dist;
     },
-    [viewport, onViewportChange, scheduleViewportCommit],
+    [disabled, viewport, onViewportChange, scheduleViewportCommit],
   );
 
   const handleTouchEnd = useCallback(() => {

package/src/client/icons.tsx

@@ -117,6 +117,28 @@ export function IconMoon(p: IconProps): JSX.Element {
   );
 }
 
+/** Pen stroke — canvas annotation mode */
+export function IconPen(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M3 13l2.8-.7L13 5.1 10.9 3 3.7 10.2 3 13Z" />
+      <path d="M9.8 4.1l2.1 2.1" />
+      <path d="M2.5 14h11" />
+    </Icon>
+  );
+}
+
+/** Eraser — remove canvas annotations */
+export function IconEraser(p: IconProps): JSX.Element {
+  return (
+    <Icon {...p}>
+      <path d="M3 10.5 8.5 5a2 2 0 0 1 2.8 0l1.7 1.7a2 2 0 0 1 0 2.8L8.5 14H5.8L3 11.2Z" />
+      <path d="M7.5 6 12 10.5" />
+      <path d="M8.5 14H14" />
+    </Icon>
+  );
+}
+
 /** Camera — snapshots */
 export function IconSnapshot(p: IconProps): JSX.Element {
   return (

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)';