pmx-canvas 0.1.0

package/src/client/canvas/Minimap.tsx

@@ -0,0 +1,301 @@
+import type { Signal } from '@preact/signals';
+import { useSignalEffect } from '@preact/signals';
+import { useCallback, useEffect, useRef } from 'preact/hooks';
+import { canvasTheme } from '../state/canvas-store';
+import { getCanvasTokens } from '../theme/tokens';
+import type { CanvasEdge, CanvasNodeState, ViewportState } from '../types';
+
+const MINIMAP_W = 180;
+const MINIMAP_H = 120;
+const PADDING = 20;
+
+interface MinimapBounds {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+}
+
+interface MinimapFrame {
+  bounds: MinimapBounds;
+  scale: number;
+}
+
+function getNodeColors(): Record<CanvasNodeState['type'], string> {
+  const t = getCanvasTokens();
+  return {
+    markdown: t.accent,
+    'mcp-app': t.ok,
+    webpage: t.warn,
+    'json-render': t.ok,
+    graph: t.purple,
+    prompt: t.accent,
+    response: t.ok,
+    status: t.warn,
+    context: t.muted,
+    ledger: t.dim,
+    trace: t.purple,
+    file: t.accent,
+    image: t.ok,
+    group: t.dim,
+  };
+}
+
+function getEdgeColors(): Record<CanvasEdge['type'], string> {
+  const t = getCanvasTokens();
+  return {
+    relation: t.muted,
+    'depends-on': t.warn,
+    flow: t.accent,
+    references: t.dim,
+  };
+}
+
+export function computeMinimapFrame(
+  nodeMap: Map<string, CanvasNodeState>,
+  currentViewport: ViewportState,
+  containerWidth: number,
+  containerHeight: number,
+): MinimapFrame {
+  const all = Array.from(nodeMap.values());
+
+  let minX = 0;
+  let minY = 0;
+  let maxX = 1000;
+  let maxY = 800;
+
+  if (all.length > 0) {
+    minX = Number.POSITIVE_INFINITY;
+    minY = Number.POSITIVE_INFINITY;
+    maxX = Number.NEGATIVE_INFINITY;
+    maxY = Number.NEGATIVE_INFINITY;
+    for (const node of all) {
+      minX = Math.min(minX, node.position.x);
+      minY = Math.min(minY, node.position.y);
+      maxX = Math.max(maxX, node.position.x + node.size.width);
+      maxY = Math.max(maxY, node.position.y + node.size.height);
+    }
+  }
+
+  const viewportLeft = -currentViewport.x / currentViewport.scale;
+  const viewportTop = -currentViewport.y / currentViewport.scale;
+  const viewportRight = viewportLeft + containerWidth / currentViewport.scale;
+  const viewportBottom = viewportTop + containerHeight / currentViewport.scale;
+
+  const bounds = {
+    minX: Math.min(minX, viewportLeft) - PADDING,
+    minY: Math.min(minY, viewportTop) - PADDING,
+    maxX: Math.max(maxX, viewportRight) + PADDING,
+    maxY: Math.max(maxY, viewportBottom) + PADDING,
+  };
+
+  const worldW = bounds.maxX - bounds.minX || 1;
+  const worldH = bounds.maxY - bounds.minY || 1;
+
+  return {
+    bounds,
+    scale: Math.min(MINIMAP_W / worldW, MINIMAP_H / worldH),
+  };
+}
+
+interface MinimapProps {
+  viewport: Signal<ViewportState>;
+  nodes: Signal<Map<string, CanvasNodeState>>;
+  edges: Signal<Map<string, CanvasEdge>>;
+  onNavigate: (x: number, y: number) => void;
+  containerWidth: number;
+  containerHeight: number;
+}
+
+export function Minimap({
+  viewport,
+  nodes,
+  edges,
+  onNavigate,
+  containerWidth,
+  containerHeight,
+}: MinimapProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const isDragging = useRef(false);
+  const frameRef = useRef<MinimapFrame | null>(null);
+  const drawRafId = useRef<number | null>(null);
+
+  const draw = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    const nodeMap = nodes.value;
+    const edgeMap = edges.value;
+    const currentViewport = viewport.value;
+
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = MINIMAP_W * dpr;
+    canvas.height = MINIMAP_H * dpr;
+    ctx.scale(dpr, dpr);
+
+    // Clear
+    ctx.clearRect(0, 0, MINIMAP_W, MINIMAP_H);
+    const t = getCanvasTokens();
+    ctx.fillStyle = t.panel + 'd9'; // panel color with ~85% alpha
+    ctx.fillRect(0, 0, MINIMAP_W, MINIMAP_H);
+
+    const frame = computeMinimapFrame(nodeMap, currentViewport, containerWidth, containerHeight);
+    frameRef.current = frame;
+    const { bounds, scale } = frame;
+
+    const toMiniX = (x: number) => (x - bounds.minX) * scale;
+    const toMiniY = (y: number) => (y - bounds.minY) * scale;
+
+    // Draw nodes
+    const all = Array.from(nodeMap.values());
+    const nodeColors = getNodeColors();
+    for (const n of all) {
+      ctx.fillStyle = nodeColors[n.type] ?? t.muted;
+      ctx.globalAlpha = 0.6;
+      ctx.fillRect(
+        toMiniX(n.position.x),
+        toMiniY(n.position.y),
+        Math.max(4, n.size.width * scale),
+        Math.max(3, n.size.height * scale),
+      );
+    }
+
+    const edgeColors = getEdgeColors();
+    for (const edge of edgeMap.values()) {
+      const fromNode = nodeMap.get(edge.from);
+      const toNode = nodeMap.get(edge.to);
+      if (!fromNode || !toNode) continue;
+      const fromCx = toMiniX(fromNode.position.x + fromNode.size.width / 2);
+      const fromCy = toMiniY(fromNode.position.y + fromNode.size.height / 2);
+      const toCx = toMiniX(toNode.position.x + toNode.size.width / 2);
+      const toCy = toMiniY(toNode.position.y + toNode.size.height / 2);
+      ctx.beginPath();
+      ctx.moveTo(fromCx, fromCy);
+      ctx.lineTo(toCx, toCy);
+      ctx.strokeStyle = edgeColors[edge.type] ?? t.muted;
+      ctx.globalAlpha = 0.3;
+      ctx.lineWidth = 0.5;
+      ctx.stroke();
+    }
+
+    // Draw viewport rectangle
+    const vpLeft = -currentViewport.x / currentViewport.scale;
+    const vpTop = -currentViewport.y / currentViewport.scale;
+    const vpW = containerWidth / currentViewport.scale;
+    const vpH = containerHeight / currentViewport.scale;
+
+    ctx.globalAlpha = 1;
+    ctx.strokeStyle = t.accent;
+    ctx.lineWidth = 1.5;
+    ctx.strokeRect(toMiniX(vpLeft), toMiniY(vpTop), vpW * scale, vpH * scale);
+  }, [nodes, edges, viewport, containerWidth, containerHeight]);
+
+  const drawRef = useRef(draw);
+  drawRef.current = draw;
+
+  const scheduleDraw = useCallback(() => {
+    if (drawRafId.current !== null) return;
+    drawRafId.current = window.requestAnimationFrame(() => {
+      drawRafId.current = null;
+      drawRef.current();
+    });
+  }, []);
+
+  // Redraw on state changes (including theme)
+  useSignalEffect(() => {
+    void canvasTheme.value;
+    void nodes.value;
+    void edges.value;
+    void viewport.value;
+    scheduleDraw();
+  });
+
+  useEffect(() => {
+    scheduleDraw();
+  }, [containerWidth, containerHeight, scheduleDraw]);
+
+  useEffect(() => () => {
+    if (drawRafId.current !== null) {
+      window.cancelAnimationFrame(drawRafId.current);
+      drawRafId.current = null;
+    }
+  }, []);
+
+  const handleNavigateFromEvent = useCallback(
+    (e: MouseEvent | PointerEvent) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+
+      const rect = canvas.getBoundingClientRect();
+      const mx = e.clientX - rect.left;
+      const my = e.clientY - rect.top;
+
+      const frame =
+        frameRef.current
+        ?? computeMinimapFrame(nodes.value, viewport.value, containerWidth, containerHeight);
+      frameRef.current = frame;
+      const { bounds, scale } = frame;
+
+      const v = viewport.value;
+      const vpW = containerWidth / v.scale;
+      const vpH = containerHeight / v.scale;
+
+      // Center viewport on clicked point
+      const worldX = mx / scale + bounds.minX;
+      const worldY = my / scale + bounds.minY;
+      onNavigate(-(worldX - vpW / 2) * v.scale, -(worldY - vpH / 2) * v.scale);
+    },
+    [nodes, viewport, containerWidth, containerHeight, onNavigate],
+  );
+
+  const handlePointerDown = useCallback(
+    (e: PointerEvent) => {
+      e.stopPropagation();
+      isDragging.current = true;
+      handleNavigateFromEvent(e);
+
+      const onPointerMove = (ev: PointerEvent) => {
+        if (isDragging.current) handleNavigateFromEvent(ev);
+      };
+
+      const onPointerUp = () => {
+        isDragging.current = false;
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
+      };
+
+      document.addEventListener('pointermove', onPointerMove);
+      document.addEventListener('pointerup', onPointerUp);
+    },
+    [handleNavigateFromEvent],
+  );
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: '16px',
+        right: '16px',
+        zIndex: 9998,
+        border: '1px solid var(--c-line)',
+        borderRadius: 'var(--radius-sm)',
+        overflow: 'hidden',
+        boxShadow: '0 4px 16px var(--c-shadow)',
+      }}
+    >
+      <canvas
+        ref={canvasRef}
+        width={MINIMAP_W}
+        height={MINIMAP_H}
+        style={{
+          width: `${MINIMAP_W}px`,
+          height: `${MINIMAP_H}px`,
+          display: 'block',
+          cursor: 'pointer',
+        }}
+        onPointerDown={handlePointerDown}
+      />
+    </div>
+  );
+}

package/src/client/canvas/SelectionBar.tsx

@@ -0,0 +1,69 @@
+import { useCallback } from 'preact/hooks';
+import {
+  addContextPins,
+  clearSelection,
+  selectedNodeIds,
+} from '../state/canvas-store';
+import { createEdgeFromClient, createGroupFromClient } from '../state/intent-bridge';
+
+export function SelectionBar() {
+  const count = selectedNodeIds.value.size;
+  if (count === 0) return null;
+
+  const handlePinContext = useCallback(() => {
+    const ids = Array.from(selectedNodeIds.value);
+    if (ids.length === 0) return;
+    addContextPins(ids);
+    clearSelection();
+  }, []);
+
+  const handleGroup = useCallback(() => {
+    const ids = Array.from(selectedNodeIds.value);
+    if (ids.length === 0) return;
+    createGroupFromClient({ title: 'Group', childIds: ids });
+    clearSelection();
+  }, []);
+
+  const handleConnect = useCallback(() => {
+    const ids = Array.from(selectedNodeIds.value);
+    for (let i = 0; i < ids.length; i++) {
+      for (let j = i + 1; j < ids.length; j++) {
+        createEdgeFromClient(ids[i], ids[j], 'relation');
+      }
+    }
+    clearSelection();
+  }, []);
+
+  return (
+    <div class="selection-bar">
+      <span class="selection-bar-count">
+        {'\u2726'} {count} node{count !== 1 ? 's' : ''} selected
+      </span>
+      <button
+        type="button"
+        class="selection-bar-btn selection-bar-pin-ctx"
+        onClick={handlePinContext}
+      >
+        Pin as context
+      </button>
+      {count >= 2 && (
+        <button type="button" class="selection-bar-btn" onClick={handleGroup}>
+          Group
+        </button>
+      )}
+      {count >= 2 && (
+        <button type="button" class="selection-bar-btn" onClick={handleConnect}>
+          Connect
+        </button>
+      )}
+      <button
+        type="button"
+        class="selection-bar-btn selection-bar-clear"
+        onClick={clearSelection}
+        title="Clear selection"
+      >
+        {'\u00d7'}
+      </button>
+    </div>
+  );
+}

package/src/client/canvas/ShortcutOverlay.tsx

@@ -0,0 +1,69 @@
+import { MOD_KEY as MOD } from '../utils/platform';
+
+interface ShortcutGroup {
+  title: string;
+  shortcuts: Array<{ keys: string; desc: string }>;
+}
+
+const GROUPS: ShortcutGroup[] = [
+  {
+    title: 'Navigation',
+    shortcuts: [
+      { keys: `${MOD}+K`, desc: 'Command palette — search nodes & actions' },
+      { keys: 'Tab / Shift+Tab', desc: 'Cycle through nodes' },
+      { keys: '\u2190 \u2191 \u2192 \u2193', desc: 'Walk graph along edges (when node focused)' },
+      { keys: `${MOD}+0`, desc: 'Reset viewport to origin' },
+      { keys: `${MOD}++ / ${MOD}+\u2212`, desc: 'Zoom in / out' },
+    ],
+  },
+  {
+    title: 'Creation',
+    shortcuts: [
+      { keys: 'Double-click', desc: 'Create new markdown note on canvas' },
+      { keys: 'Drag port \u2192 node', desc: 'Connect two nodes (hover to reveal ports)' },
+    ],
+  },
+  {
+    title: 'Selection',
+    shortcuts: [
+      { keys: 'Click', desc: 'Focus node (highlights neighbors & edges)' },
+      { keys: 'Shift+Click', desc: 'Toggle node in multi-selection' },
+      { keys: 'Shift+Drag', desc: 'Lasso select multiple nodes' },
+      { keys: 'Esc', desc: 'Clear selection / close overlay' },
+    ],
+  },
+  {
+    title: 'View',
+    shortcuts: [
+      { keys: '?', desc: 'Toggle this shortcut overlay' },
+      { keys: 'Minimap', desc: 'Click/drag to navigate (toggle in toolbar)' },
+      { keys: 'Right-click', desc: 'Context menu — dock, focus, connect' },
+    ],
+  },
+];
+
+export function ShortcutOverlay({ onClose }: { onClose: () => void }) {
+  return (
+    <div class="shortcut-overlay-backdrop" onMouseDown={onClose}>
+      <div class="shortcut-overlay" onMouseDown={(e) => e.stopPropagation()}>
+        <div class="shortcut-overlay-header">
+          <span class="shortcut-overlay-title">Keyboard Shortcuts</span>
+          <span class="shortcut-overlay-hint">Press <kbd>?</kbd> or <kbd>Esc</kbd> to close</span>
+        </div>
+        <div class="shortcut-overlay-body">
+          {GROUPS.map((group) => (
+            <div key={group.title} class="shortcut-group">
+              <div class="shortcut-group-title">{group.title}</div>
+              {group.shortcuts.map((s) => (
+                <div key={s.keys} class="shortcut-row">
+                  <kbd class="shortcut-keys">{s.keys}</kbd>
+                  <span class="shortcut-desc">{s.desc}</span>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/canvas/SnapshotPanel.tsx

@@ -0,0 +1,236 @@
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import {
+  listSnapshots,
+  saveSnapshot,
+  restoreSnapshot,
+  deleteSnapshot,
+  type CanvasSnapshotInfo,
+} from '../state/intent-bridge';
+
+function timeAgo(iso: string): string {
+  const diff = Date.now() - new Date(iso).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  return `${days}d ago`;
+}
+
+export function SnapshotPanel({
+  open,
+  onClose,
+  anchorRef,
+}: {
+  open: boolean;
+  onClose: () => void;
+  anchorRef: { current: HTMLButtonElement | null };
+}) {
+  const [snapshots, setSnapshots] = useState<CanvasSnapshotInfo[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [restoringId, setRestoringId] = useState<string | null>(null);
+  const [nameInput, setNameInput] = useState('');
+  const [confirming, setConfirming] = useState<{ id: string; action: 'restore' | 'delete' } | null>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Load snapshots when panel opens
+  useEffect(() => {
+    if (!open) return;
+    setLoading(true);
+    listSnapshots().then((list) => {
+      setSnapshots(list);
+      setLoading(false);
+    });
+  }, [open]);
+
+  // Focus input on open
+  useEffect(() => {
+    if (open) setTimeout(() => inputRef.current?.focus(), 50);
+  }, [open]);
+
+  // Click outside to close
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      const panel = panelRef.current;
+      const anchor = anchorRef.current;
+      if (panel && !panel.contains(e.target as Node) && anchor && !anchor.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open, onClose]);
+
+  // Escape to close
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [open, onClose]);
+
+  const handleSave = useCallback(async () => {
+    const name = nameInput.trim();
+    if (!name) return;
+    setSaving(true);
+    const result = await saveSnapshot(name);
+    setSaving(false);
+    if (result.ok && result.snapshot) {
+      setSnapshots((prev) => [result.snapshot!, ...prev]);
+      setNameInput('');
+    }
+  }, [nameInput]);
+
+  const handleRestore = useCallback(async (id: string) => {
+    setConfirming(null);
+    setRestoringId(id);
+    const result = await restoreSnapshot(id);
+    setRestoringId(null);
+    if (result.ok) onClose();
+  }, [onClose]);
+
+  const handleDelete = useCallback(async (id: string) => {
+    const result = await deleteSnapshot(id);
+    if (result.ok) {
+      setSnapshots((prev) => prev.filter((s) => s.id !== id));
+    }
+    setConfirming(null);
+  }, []);
+
+  if (!open) return null;
+
+  // Position below toolbar button
+  const anchorRect = anchorRef.current?.getBoundingClientRect();
+  const left = anchorRect ? Math.max(8, anchorRect.left - 120) : 100;
+  const top = anchorRect ? anchorRect.bottom + 8 : 48;
+
+  return (
+    <div
+      ref={panelRef}
+      class="snapshot-panel"
+      style={{ left: `${left}px`, top: `${top}px` }}
+    >
+      {/* Header */}
+      <div class="snapshot-panel-header">
+        <span class="snapshot-panel-title">Snapshots</span>
+        <button
+          type="button"
+          class="snapshot-panel-close"
+          onClick={onClose}
+          title="Close"
+        >
+          {'\u00d7'}
+        </button>
+      </div>
+
+      {/* Save form */}
+      <div class="snapshot-save-form">
+        <input
+          ref={inputRef}
+          type="text"
+          class="snapshot-name-input"
+          value={nameInput}
+          onInput={(e) => setNameInput((e.target as HTMLInputElement).value)}
+          onKeyDown={(e) => { if (e.key === 'Enter') handleSave(); }}
+          placeholder="Snapshot name..."
+          maxLength={80}
+          disabled={saving}
+        />
+        <button
+          type="button"
+          class="snapshot-save-btn"
+          onClick={handleSave}
+          disabled={!nameInput.trim() || saving}
+        >
+          {saving ? '...' : 'Save'}
+        </button>
+      </div>
+
+      <div class="snapshot-restore-note">
+        Restoring replaces the current canvas. You can undo it if needed.
+      </div>
+
+      {/* Snapshot list */}
+      <div class="snapshot-list">
+        {loading && (
+          <div class="snapshot-empty">Loading...</div>
+        )}
+
+        {!loading && snapshots.length === 0 && (
+          <div class="snapshot-empty">
+            No snapshots yet. Save one to capture the current canvas state.
+          </div>
+        )}
+
+        {!loading && snapshots.map((snap) => (
+          <div key={snap.id} class="snapshot-item">
+            <div class="snapshot-item-info">
+              <span class="snapshot-item-name">{snap.name}</span>
+              <span class="snapshot-item-meta">
+                {snap.nodeCount} node{snap.nodeCount !== 1 ? 's' : ''}
+                {snap.edgeCount > 0 ? ` \u00b7 ${snap.edgeCount} edge${snap.edgeCount !== 1 ? 's' : ''}` : ''}
+                {' \u00b7 '}
+                {timeAgo(snap.createdAt)}
+              </span>
+            </div>
+            <div class="snapshot-item-actions">
+              {confirming?.id === snap.id ? (
+                <>
+                  <button
+                    type="button"
+                    class={`snapshot-action-btn ${confirming.action === 'delete' ? 'snapshot-action-confirm' : 'snapshot-action-restore'}`}
+                    onClick={() => confirming.action === 'delete' ? handleDelete(snap.id) : handleRestore(snap.id)}
+                    title={confirming.action === 'delete' ? 'Confirm delete' : 'Confirm restore'}
+                    disabled={restoringId !== null}
+                  >
+                    {confirming.action === 'delete'
+                      ? 'Delete'
+                      : restoringId === snap.id
+                        ? 'Restoring...'
+                        : 'Confirm'}
+                  </button>
+                  <button
+                    type="button"
+                    class="snapshot-action-btn"
+                    onClick={() => setConfirming(null)}
+                    title="Cancel"
+                    disabled={restoringId !== null}
+                  >
+                    Cancel
+                  </button>
+                </>
+              ) : (
+                <>
+                  <button
+                    type="button"
+                    class="snapshot-action-btn snapshot-action-restore"
+                    onClick={() => setConfirming({ id: snap.id, action: 'restore' })}
+                    title="Restore this snapshot"
+                    disabled={restoringId !== null}
+                  >
+                    {restoringId === snap.id ? 'Restoring...' : 'Restore'}
+                  </button>
+                  <button
+                    type="button"
+                    class="snapshot-action-btn snapshot-action-delete"
+                    onClick={() => setConfirming({ id: snap.id, action: 'delete' })}
+                    title="Delete this snapshot"
+                    disabled={restoringId !== null}
+                  >
+                    {'\u2715'}
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}