pmx-canvas 0.1.0

package/src/client/canvas/ContextMenu.tsx

@@ -0,0 +1,601 @@
+import type { ComponentChildren } from 'preact';
+import { useCallback, useEffect, useState } from 'preact/hooks';
+import {
+  contextPinnedNodeIds,
+  dockNode,
+  edges,
+  expandNode,
+  focusNode,
+  nodes,
+  pendingConnection,
+  removeNode,
+  toggleCollapsed,
+  toggleContextPin,
+  undockNode,
+  updateNode,
+} from '../state/canvas-store';
+import {
+  createEdgeFromClient,
+  createGroupFromClient,
+  createNodeFromClient,
+  refreshWebpageNodeFromClient,
+  removeNodeFromClient,
+  sendIntent,
+  ungroupFromClient,
+  updateNodeFromClient,
+} from '../state/intent-bridge';
+import { EXPANDABLE_TYPES } from '../types';
+import type { CanvasNodeState } from '../types';
+
+export type MenuState =
+  | {
+      kind: 'node';
+      x: number;
+      y: number;
+      nodeId: string;
+    }
+  | {
+      kind: 'canvas';
+      x: number;
+      y: number;
+      canvasX: number;
+      canvasY: number;
+    };
+
+export function useContextMenu() {
+  const [menu, setMenu] = useState<MenuState | null>(null);
+
+  const openNodeMenu = useCallback((e: MouseEvent, nodeId: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setMenu({ kind: 'node', x: e.clientX, y: e.clientY, nodeId });
+  }, []);
+
+  const openCanvasMenu = useCallback((e: MouseEvent, canvasX: number, canvasY: number) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setMenu({ kind: 'canvas', x: e.clientX, y: e.clientY, canvasX, canvasY });
+  }, []);
+
+  const closeMenu = useCallback(() => setMenu(null), []);
+
+  useEffect(() => {
+    if (!menu) return;
+    const handleClick = () => setMenu(null);
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setMenu(null);
+    };
+    document.addEventListener('click', handleClick);
+    document.addEventListener('keydown', handleKey);
+    return () => {
+      document.removeEventListener('click', handleClick);
+      document.removeEventListener('keydown', handleKey);
+    };
+  }, [menu]);
+
+  return { menu, openNodeMenu, openCanvasMenu, closeMenu };
+}
+
+interface ContextMenuProps {
+  menu: MenuState;
+  onClose: () => void;
+}
+
+const DEFAULT_GROUP_COLOR = '#4bbcFF';
+
+const GROUP_COLOR_PRESETS = [
+  { label: 'Blue', value: '#3b82f6' },
+  { label: 'Green', value: '#22c55e' },
+  { label: 'Yellow', value: '#eab308' },
+  { label: 'Red', value: '#ef4444' },
+  { label: 'Gray', value: '#6b7280' },
+  { label: 'Purple', value: '#a855f7' },
+] as const;
+
+export function ContextMenu({ menu, onClose }: ContextMenuProps) {
+  let items: MenuItem[];
+  if (menu.kind === 'node') {
+    const node = nodes.value.get(menu.nodeId);
+    if (!node) return null;
+    items = buildNodeMenuItems(node);
+  } else {
+    items = buildCanvasMenuItems(menu.canvasX, menu.canvasY);
+  }
+  const keyCounts = new Map<string, number>();
+  const estimatedHeight = items.some((item) => item.render)
+    ? items.length * 32 + 168
+    : items.length * 32 + 8;
+
+  // Keep menu on screen
+  const adjustedX = Math.min(menu.x, Math.max(12, window.innerWidth - 240));
+  const adjustedY = Math.min(menu.y, Math.max(12, window.innerHeight - estimatedHeight));
+
+  return (
+    <div
+      class="context-menu"
+      style={{
+        position: 'fixed',
+        left: `${adjustedX}px`,
+        top: `${adjustedY}px`,
+        zIndex: 10000,
+      }}
+      onPointerDown={(e) => e.stopPropagation()}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {items.map((item) => {
+        const baseKey = item.separator
+          ? 'separator'
+          : item.render
+            ? 'custom'
+          : `${item.label ?? 'item'}:${item.shortcut ?? ''}`;
+        const nextCount = (keyCounts.get(baseKey) ?? 0) + 1;
+        keyCounts.set(baseKey, nextCount);
+        const itemKey = `${baseKey}:${nextCount}`;
+
+        if (item.separator) {
+          return <div key={itemKey} class="context-menu-separator" />;
+        }
+
+        if (item.render) {
+          return (
+            <div key={itemKey} class="context-menu-custom">
+              {item.render(onClose)}
+            </div>
+          );
+        }
+
+        return (
+          <button
+            key={itemKey}
+            type="button"
+            class="context-menu-item"
+            onClick={() => {
+              item.action?.();
+              onClose();
+            }}
+          >
+            <span class="context-menu-label">{item.label}</span>
+            {item.shortcut && <span class="context-menu-shortcut">{item.shortcut}</span>}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+interface MenuItem {
+  label?: string;
+  shortcut?: string;
+  action?: () => void;
+  separator?: boolean;
+  render?: (onClose: () => void) => ComponentChildren;
+}
+
+function getNodeLocalPath(node: CanvasNodeState): string | null {
+  const path = typeof node.data.path === 'string' ? node.data.path.trim() : '';
+  return path || null;
+}
+
+function normalizeHexColor(color: string): string {
+  const trimmed = color.trim().toLowerCase();
+  const shortMatch = trimmed.match(/^#([0-9a-f]{3})$/);
+  if (shortMatch) {
+    const [r, g, b] = shortMatch[1].split('');
+    return `#${r}${r}${g}${g}${b}${b}`;
+  }
+  return trimmed;
+}
+
+function currentGroupColor(node: CanvasNodeState): string | null {
+  if (typeof node.data.color !== 'string' || !node.data.color.trim()) return null;
+  return normalizeHexColor(node.data.color);
+}
+
+function groupColorInputValue(node: CanvasNodeState): string {
+  const color = currentGroupColor(node);
+  return color && /^#[0-9a-f]{6}$/.test(color) ? color : normalizeHexColor(DEFAULT_GROUP_COLOR);
+}
+
+function applyGroupColor(node: CanvasNodeState, color: string | null): void {
+  const nextColor = color ? normalizeHexColor(color) : null;
+  updateNode(node.id, { data: { ...node.data, color: nextColor } });
+  void updateNodeFromClient(node.id, { data: { color: nextColor } });
+}
+
+function renderGroupColorSection(node: CanvasNodeState, onClose: () => void): ComponentChildren {
+  const activeColor = currentGroupColor(node);
+
+  return (
+    <div class="context-menu-section">
+      <div class="context-menu-section-header">
+        <span class="context-menu-section-label">Group color</span>
+        <button
+          type="button"
+          class="context-menu-reset"
+          onClick={() => {
+            applyGroupColor(node, null);
+            onClose();
+          }}
+        >
+          Theme default
+        </button>
+      </div>
+
+      <div class="context-menu-color-grid">
+        {GROUP_COLOR_PRESETS.map((preset) => {
+          const normalizedPreset = normalizeHexColor(preset.value);
+          const active = activeColor === normalizedPreset;
+          return (
+            <button
+              key={preset.value}
+              type="button"
+              class={`context-menu-color-swatch${active ? ' active' : ''}`}
+              aria-label={`Set group color to ${preset.label}`}
+              title={preset.label}
+              style={{ '--swatch-color': preset.value }}
+              onClick={() => {
+                applyGroupColor(node, preset.value);
+                onClose();
+              }}
+            >
+              <span
+                class="context-menu-color-dot"
+                style={{ '--swatch-color': preset.value }}
+              />
+              <span>{preset.label}</span>
+            </button>
+          );
+        })}
+      </div>
+
+      <label class="context-menu-color-custom">
+        <span>Custom</span>
+        <input
+          type="color"
+          class="context-menu-color-input"
+          aria-label="Custom group color"
+          value={groupColorInputValue(node)}
+          onClick={(e) => e.stopPropagation()}
+          onInput={(e) => {
+            applyGroupColor(node, (e.currentTarget as HTMLInputElement).value);
+            onClose();
+          }}
+        />
+      </label>
+    </div>
+  );
+}
+
+function centeredPosition(canvasX: number, canvasY: number, width: number, height: number): {
+  x: number;
+  y: number;
+} {
+  return {
+    x: canvasX - width / 2,
+    y: canvasY - height / 2,
+  };
+}
+
+function titleFromResource(raw: string, fallback: string): string {
+  const trimmed = raw.trim().replace(/[?#].*$/, '');
+  const parts = trimmed.split('/').filter(Boolean);
+  return parts.at(-1) || fallback;
+}
+
+async function createPromptedNode(opts: {
+  promptLabel: string;
+  type: 'webpage' | 'file' | 'image';
+  canvasX: number;
+  canvasY: number;
+  width: number;
+  height: number;
+  placeholder?: string;
+  titleFallback: string;
+  errorMessage: string;
+}): Promise<void> {
+  const value = window.prompt(opts.promptLabel, opts.placeholder ?? '');
+  if (!value) return;
+  const trimmed = value.trim();
+  if (!trimmed) return;
+
+  const position = centeredPosition(opts.canvasX, opts.canvasY, opts.width, opts.height);
+  const result = await createNodeFromClient({
+    type: opts.type,
+    ...(opts.type !== 'webpage' ? { title: titleFromResource(trimmed, opts.titleFallback) } : {}),
+    content: trimmed,
+    x: position.x,
+    y: position.y,
+    width: opts.width,
+    height: opts.height,
+  });
+
+  if (!result.ok) {
+    window.alert(opts.errorMessage);
+  }
+}
+
+function buildCanvasMenuItems(canvasX: number, canvasY: number): MenuItem[] {
+  return [
+    {
+      label: 'New note',
+      action: () => {
+        const width = 360;
+        const height = 200;
+        const position = centeredPosition(canvasX, canvasY, width, height);
+        void createNodeFromClient({
+          type: 'markdown',
+          title: 'New note',
+          x: position.x,
+          y: position.y,
+          width,
+          height,
+        });
+      },
+    },
+    {
+      label: 'Open webpage...',
+      action: () => {
+        void createPromptedNode({
+          promptLabel: 'Webpage URL:',
+          type: 'webpage',
+          canvasX,
+          canvasY,
+          width: 520,
+          height: 420,
+          placeholder: 'https://example.com',
+          titleFallback: 'Webpage',
+          errorMessage: 'Could not create webpage node. Enter a valid http(s) URL.',
+        });
+      },
+    },
+    {
+      label: 'Open file...',
+      action: () => {
+        void createPromptedNode({
+          promptLabel: 'Workspace path or absolute file path:',
+          type: 'file',
+          canvasX,
+          canvasY,
+          width: 720,
+          height: 500,
+          placeholder: 'src/server/server.ts',
+          titleFallback: 'File',
+          errorMessage: 'Could not create file node. Check the path and try again.',
+        });
+      },
+    },
+    {
+      label: 'Open image...',
+      action: () => {
+        void createPromptedNode({
+          promptLabel: 'Image path, URL, or data URI:',
+          type: 'image',
+          canvasX,
+          canvasY,
+          width: 480,
+          height: 360,
+          placeholder: 'artifacts/architecture.png',
+          titleFallback: 'Image',
+          errorMessage: 'Could not create image node. Check the image source and try again.',
+        });
+      },
+    },
+    { separator: true },
+    {
+      label: 'New group',
+      action: () => {
+        const width = 600;
+        const height = 400;
+        const position = centeredPosition(canvasX, canvasY, width, height);
+        void createGroupFromClient({
+          title: 'Group',
+          x: position.x,
+          y: position.y,
+          width,
+          height,
+        });
+      },
+    },
+  ];
+}
+
+function buildNodeMenuItems(node: CanvasNodeState): MenuItem[] {
+  const items: MenuItem[] = [];
+  const localPath = getNodeLocalPath(node);
+
+  // S2: Delegate to focusNode() which centers, brings to front, and persists
+  items.push({
+    label: 'Focus',
+    action: () => focusNode(node.id),
+  });
+
+  // Expand into full-viewport overlay for focused work
+  if (EXPANDABLE_TYPES.has(node.type)) {
+    items.push({
+      label: 'Expand',
+      shortcut: '⤢',
+      action: () => expandNode(node.id),
+    });
+  }
+
+  // Collapse/Expand
+  items.push({
+    label: node.collapsed ? 'Expand' : 'Collapse',
+    action: () => toggleCollapsed(node.id),
+  });
+
+  // Pin/Unpin
+  items.push({
+    label: node.pinned ? 'Unpin' : 'Pin (exclude from auto-arrange)',
+    action: () => {
+      const pinned = !node.pinned;
+      updateNode(node.id, { pinned });
+      void updateNodeFromClient(node.id, { pinned });
+    },
+  });
+
+  // Context pin — add/remove from persistent agent context
+  const isCtxPinned = contextPinnedNodeIds.value.has(node.id);
+  items.push({
+    label: isCtxPinned ? 'Remove from context' : 'Add to context',
+    action: () => toggleContextPin(node.id),
+  });
+
+  // ── Edge connection ──
+  const pending = pendingConnection.value;
+  if (pending && pending.from !== node.id) {
+    const sourceNode = nodes.value.get(pending.from);
+    const sourceTitle = sourceNode
+      ? ((sourceNode.data.title as string) || sourceNode.id).slice(0, 20)
+      : pending.from;
+    items.push({
+      label: `Connect from "${sourceTitle}"`,
+      action: () => {
+        createEdgeFromClient(pending.from, node.id, 'relation');
+        pendingConnection.value = null;
+      },
+    });
+  }
+
+  items.push({
+    label: pending ? 'Connect from here (replace)' : 'Connect from here',
+    action: () => {
+      pendingConnection.value = { from: node.id };
+    },
+  });
+
+  // Show edge count
+  const edgeCount = Array.from(edges.value.values()).filter(
+    (e) => e.from === node.id || e.to === node.id,
+  ).length;
+  if (edgeCount > 0) {
+    items.push({
+      label: `${edgeCount} edge${edgeCount !== 1 ? 's' : ''} connected`,
+    });
+  }
+
+  items.push({ separator: true });
+
+  // Type-specific
+  if ((node.type === 'markdown' || node.type === 'file' || node.type === 'image') && localPath) {
+    items.push({
+      label: 'Open in browser',
+      action: () => {
+        window.open(`/artifact?path=${encodeURIComponent(localPath)}`, '_blank', 'noopener');
+      },
+    });
+    items.push({
+      label: 'Copy path',
+      action: () => {
+        navigator.clipboard.writeText(localPath);
+      },
+    });
+  }
+
+  if (node.type === 'mcp-app' || node.type === 'json-render' || node.type === 'graph') {
+    if (node.data.chartConfig) {
+      // Chart ext-app node — chart-specific actions
+      const chartTitle =
+        ((node.data.chartConfig as Record<string, unknown>).title as string) || 'chart';
+      items.push({
+        label: 'Copy chart data',
+        action: () => {
+          navigator.clipboard.writeText(JSON.stringify(node.data.chartConfig, null, 2));
+        },
+      });
+    } else {
+      // Regular MCP app node
+      const url = node.data.url as string;
+      items.push({
+        label: 'Open in browser',
+        action: () => {
+          if (url) window.open(url, '_blank');
+        },
+      });
+      items.push({
+        label: 'Focus in TUI',
+        action: () => sendIntent('mcp-app-focus', { url }),
+      });
+      if (node.type === 'json-render' || node.type === 'graph') {
+        items.push({
+          label: 'Copy spec',
+          action: () => {
+            navigator.clipboard.writeText(
+              JSON.stringify(node.data.spec ?? node.data.graphConfig ?? {}, null, 2),
+            );
+          },
+        });
+      }
+    }
+  }
+
+  if (node.type === 'webpage') {
+    const url = typeof node.data.url === 'string' ? node.data.url : '';
+    items.push({
+      label: 'Refresh webpage',
+      action: () => {
+        void refreshWebpageNodeFromClient(node.id);
+      },
+    });
+    items.push({
+      label: 'Open in browser',
+      action: () => {
+        if (url) window.open(url, '_blank', 'noopener');
+      },
+    });
+    items.push({
+      label: 'Copy URL',
+      action: () => {
+        if (url) navigator.clipboard.writeText(url);
+      },
+    });
+  }
+
+  // Group-specific actions
+  if (node.type === 'group') {
+    const childIds = (node.data.children as string[]) ?? [];
+    items.push({ separator: true });
+    items.push({
+      render: (onClose) => renderGroupColorSection(node, onClose),
+    });
+    if (childIds.length > 0) {
+      items.push({
+        label: `Ungroup (${childIds.length} node${childIds.length !== 1 ? 's' : ''})`,
+        action: () => ungroupFromClient(node.id),
+      });
+    }
+  }
+
+  // Dock/undock for status and ledger nodes
+  if (node.type === 'status' || node.type === 'ledger') {
+    items.push({ separator: true });
+    if (node.dockPosition !== null) {
+      items.push({
+        label: 'Undock to canvas',
+        action: () => undockNode(node.id),
+      });
+    } else {
+      items.push({
+        label: 'Dock left of toolbar',
+        action: () => dockNode(node.id, 'left'),
+      });
+      items.push({
+        label: 'Dock right of toolbar',
+        action: () => dockNode(node.id, 'right'),
+      });
+    }
+  }
+
+  if (node.type !== 'status') {
+    items.push({ separator: true });
+    items.push({
+      label: 'Close',
+      action: () => {
+        removeNode(node.id);
+        void removeNodeFromClient(node.id);
+      },
+    });
+  }
+
+  return items;
+}

package/src/client/canvas/ContextPinBar.tsx

@@ -0,0 +1,25 @@
+import {
+  clearContextPins,
+  contextPinnedNodeIds,
+} from '../state/canvas-store';
+
+export function ContextPinBar() {
+  const count = contextPinnedNodeIds.value.size;
+  if (count === 0) return null;
+
+  return (
+    <div class="context-pin-bar">
+      <span class="context-pin-bar-count">
+        {'\u2726'} {count} node{count !== 1 ? 's' : ''} in context
+      </span>
+      <button
+        type="button"
+        class="context-pin-bar-btn context-pin-bar-clear"
+        onClick={clearContextPins}
+        title="Clear all context pins"
+      >
+        {'\u00d7'}
+      </button>
+    </div>
+  );
+}

package/src/client/canvas/ContextPinHud.tsx

@@ -0,0 +1,22 @@
+import { clearContextPins, contextPinnedNodeIds } from '../state/canvas-store';
+
+export function ContextPinHud() {
+  const count = contextPinnedNodeIds.value.size;
+  if (count === 0) return null;
+
+  return (
+    <div class="context-pin-hud">
+      <span class="context-pin-hud-label">
+        {'\u2726'} {count} in context
+      </span>
+      <button
+        type="button"
+        class="context-pin-hud-clear"
+        onClick={clearContextPins}
+        title="Clear all context pins"
+      >
+        ×
+      </button>
+    </div>
+  );
+}

package/src/client/canvas/DockedNode.tsx

@@ -0,0 +1,66 @@
+import { ContextNode } from '../nodes/ContextNode';
+import { LedgerNode } from '../nodes/LedgerNode';
+import { StatusNode } from '../nodes/StatusNode';
+import { StatusSummary } from '../nodes/StatusSummary';
+import { toggleCollapsed, undockNode } from '../state/canvas-store';
+import { TYPE_LABELS } from '../types';
+import type { CanvasNodeState } from '../types';
+
+function renderDockedContent(node: CanvasNodeState) {
+  switch (node.type) {
+    case 'status':
+      return <StatusNode node={node} />;
+    case 'ledger':
+      return <LedgerNode node={node} />;
+    case 'context':
+      return <ContextNode node={node} />;
+    default:
+      return null;
+  }
+}
+
+export function DockedNode({ node }: { node: CanvasNodeState }) {
+  return (
+    <div class="docked-node">
+      <div class="docked-node-header">
+        <span class="node-type-badge">{TYPE_LABELS[node.type] ?? node.type}</span>
+        {node.type === 'status' && node.collapsed && <StatusSummary node={node} />}
+        {node.type === 'context' && node.collapsed && (
+          <span style={{ fontSize: '11px', color: 'var(--c-muted)' }}>
+            Active Agent Context
+            {typeof node.data.utilization === 'number' && (
+              <> · {Math.round(Number(node.data.utilization) * 100)}%</>
+            )}
+          </span>
+        )}
+        <div class="docked-node-controls">
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleCollapsed(node.id);
+            }}
+            title={node.collapsed ? 'Expand' : 'Collapse'}
+          >
+            {node.collapsed ? '\u25B8' : '\u25BE'}
+          </button>
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              undockNode(node.id);
+            }}
+            title="Undock to canvas"
+          >
+            {'\u2299'}
+          </button>
+        </div>
+      </div>
+      {!node.collapsed && (
+        <div class={`docked-node-body${node.type === 'context' ? ' context-body' : ''}`}>
+          {renderDockedContent(node)}
+        </div>
+      )}
+    </div>
+  );
+}