pmx-canvas 0.1.0

package/src/client/canvas/EdgeLayer.tsx

@@ -0,0 +1,280 @@
+import type { Signal } from '@preact/signals';
+import { activeNodeId, draggingEdge, searchHighlightIds } from '../state/canvas-store';
+import type { CanvasEdge, CanvasNodeState } from '../types';
+
+// ── Edge type visual styles ──────────────────────────────────
+const EDGE_COLORS: Record<CanvasEdge['type'], string> = {
+  relation: 'var(--c-muted)',
+  'depends-on': 'var(--c-warn)',
+  flow: 'var(--c-accent)',
+  references: 'var(--c-dim)',
+};
+
+const DIRECTED_TYPES = new Set<CanvasEdge['type']>(['depends-on', 'flow']);
+
+function dashArray(edge: CanvasEdge): string | undefined {
+  if (edge.style === 'dashed') return '8 4';
+  if (edge.style === 'dotted') return '3 3';
+  if (edge.type === 'references' && !edge.style) return '8 4';
+  return undefined;
+}
+
+// ── Anchor computation ───────────────────────────────────────
+interface Anchor {
+  x: number;
+  y: number;
+}
+
+function computeAnchor(node: CanvasNodeState, target: CanvasNodeState): Anchor {
+  const cx = node.position.x + node.size.width / 2;
+  const cy = node.position.y + node.size.height / 2;
+  const tx = target.position.x + target.size.width / 2;
+  const ty = target.position.y + target.size.height / 2;
+
+  const dx = tx - cx;
+  const dy = ty - cy;
+
+  const hw = node.size.width / 2;
+  const hh = node.size.height / 2;
+
+  // Determine which side the edge exits from
+  const tanAngle = Math.abs(dy / (dx || 0.001));
+  const boxRatio = hh / (hw || 0.001);
+
+  if (tanAngle > boxRatio) {
+    // Top or bottom
+    const sign = dy > 0 ? 1 : -1;
+    return {
+      x: cx + (hh / tanAngle) * (dx > 0 ? 1 : -1),
+      y: cy + hh * sign,
+    };
+  }
+
+  // Left or right
+  const sign = dx > 0 ? 1 : -1;
+  return {
+    x: cx + hw * sign,
+    y: cy + tanAngle * hw * (dy > 0 ? 1 : -1),
+  };
+}
+
+// ── Bezier midpoint at t=0.5 ─────────────────────────────────
+function bezierMidpoint(
+  x1: number,
+  y1: number,
+  cx1: number,
+  cy1: number,
+  cx2: number,
+  cy2: number,
+  x2: number,
+  y2: number,
+): { x: number; y: number } {
+  const t = 0.5;
+  const mt = 1 - t;
+  return {
+    x: mt * mt * mt * x1 + 3 * mt * mt * t * cx1 + 3 * mt * t * t * cx2 + t * t * t * x2,
+    y: mt * mt * mt * y1 + 3 * mt * mt * t * cy1 + 3 * mt * t * t * cy2 + t * t * t * y2,
+  };
+}
+
+// ── EdgePath component ───────────────────────────────────────
+interface EdgePathProps {
+  edge: CanvasEdge;
+  fromNode: CanvasNodeState;
+  toNode: CanvasNodeState;
+  focused: boolean;   // connected to the active node
+  dimmed: boolean;    // active node exists but this edge is NOT connected
+}
+
+function EdgePath({ edge, fromNode, toNode, focused, dimmed }: EdgePathProps) {
+  const start = computeAnchor(fromNode, toNode);
+  const end = computeAnchor(toNode, fromNode);
+
+  const dx = end.x - start.x;
+  const dy = end.y - start.y;
+  const dist = Math.sqrt(dx * dx + dy * dy);
+  const curvature = Math.min(dist * 0.25, 80);
+
+  // Control points: offset perpendicular to direct line
+  const nx = dx / (dist || 1);
+  const ny = dy / (dist || 1);
+  const cx1 = start.x + nx * curvature;
+  const cy1 = start.y + ny * curvature;
+  const cx2 = end.x - nx * curvature;
+  const cy2 = end.y - ny * curvature;
+
+  const d = `M ${start.x} ${start.y} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${end.x} ${end.y}`;
+  const color = EDGE_COLORS[edge.type];
+  const directed = DIRECTED_TYPES.has(edge.type);
+  const dash = dashArray(edge);
+
+  const mid = edge.label
+    ? bezierMidpoint(start.x, start.y, cx1, cy1, cx2, cy2, end.x, end.y)
+    : null;
+
+  const pathId = `edge-path-${edge.id}`;
+
+  return (
+    <g>
+      {/* Invisible wide hitbox for hover/click */}
+      <path
+        d={d}
+        fill="none"
+        stroke="transparent"
+        stroke-width="12"
+        style={{ cursor: 'pointer' }}
+      />
+
+      {/* Glow layer for focused edges */}
+      {focused && (
+        <path
+          d={d}
+          fill="none"
+          stroke={color}
+          stroke-width="6"
+          stroke-dasharray={dash}
+          opacity="0.15"
+          style={{ filter: 'blur(3px)' }}
+        />
+      )}
+
+      {/* Visible edge */}
+      <path
+        id={pathId}
+        d={d}
+        fill="none"
+        stroke={color}
+        stroke-width={focused ? 2.5 : 1.5}
+        stroke-dasharray={dash}
+        marker-end={directed ? 'url(#edge-arrow)' : undefined}
+        opacity={dimmed ? 0.2 : focused ? 1 : 0.75}
+        style={{ transition: 'opacity 0.2s, stroke-width 0.2s' }}
+      />
+
+      {/* Animated pulse dot */}
+      {edge.animated && (
+        <circle r="3" fill={color} opacity="0.9">
+          <animateMotion dur="2s" repeatCount="indefinite">
+            <mpath href={`#${pathId}`} />
+          </animateMotion>
+        </circle>
+      )}
+
+      {/* Label at midpoint */}
+      {mid && edge.label && (
+        <g transform={`translate(${mid.x}, ${mid.y})`}>
+          <rect
+            class="edge-label-bg"
+            x={-(edge.label.length * 3.5 + 8)}
+            y="-10"
+            width={edge.label.length * 7 + 16}
+            height="20"
+            rx="4"
+          />
+          <text
+            class="edge-label"
+            text-anchor="middle"
+            dominant-baseline="central"
+            fill="var(--c-text)"
+            font-size="11"
+          >
+            {edge.label}
+          </text>
+        </g>
+      )}
+    </g>
+  );
+}
+
+// ── EdgeLayer ────────────────────────────────────────────────
+interface EdgeLayerProps {
+  nodes: Signal<Map<string, CanvasNodeState>>;
+  edges: Signal<Map<string, CanvasEdge>>;
+}
+
+export function EdgeLayer({ nodes, edges }: EdgeLayerProps) {
+  const nodeMap = nodes.value;
+  const edgeList = Array.from(edges.value.values());
+  const focusId = activeNodeId.value;
+  const hasFocus = focusId !== null;
+  const searchSet = searchHighlightIds.value;
+  const hasSearch = searchSet !== null;
+
+  if (edgeList.length === 0) return null;
+
+  const PAD = 96;
+  const worldNodes = Array.from(nodeMap.values());
+  const minX = Math.min(...worldNodes.map((node) => node.position.x)) - PAD;
+  const minY = Math.min(...worldNodes.map((node) => node.position.y)) - PAD;
+  const maxX = Math.max(...worldNodes.map((node) => node.position.x + node.size.width)) + PAD;
+  const maxY = Math.max(...worldNodes.map((node) => node.position.y + node.size.height)) + PAD;
+  const width = Math.max(1, maxX - minX);
+  const height = Math.max(1, maxY - minY);
+
+  return (
+    <svg
+      aria-label="Canvas connections"
+      role="img"
+      viewBox={`${minX} ${minY} ${width} ${height}`}
+      width={width}
+      height={height}
+      style={{
+        position: 'absolute',
+        top: `${minY}px`,
+        left: `${minX}px`,
+        pointerEvents: 'none',
+        overflow: 'visible',
+      }}
+    >
+      <title>Canvas connections</title>
+      <defs>
+        <marker
+          id="edge-arrow"
+          viewBox="0 0 10 10"
+          refX="9"
+          refY="5"
+          markerWidth="8"
+          markerHeight="8"
+          orient="auto-start-reverse"
+        >
+          <path d="M 0 1 L 10 5 L 0 9 z" fill="currentColor" opacity="0.75" />
+        </marker>
+      </defs>
+      {edgeList.map((edge) => {
+        const fromNode = nodeMap.get(edge.from);
+        const toNode = nodeMap.get(edge.to);
+        if (!fromNode || !toNode) return null;
+        const isConnected = hasFocus && (edge.from === focusId || edge.to === focusId);
+        const searchDimmed = hasSearch && !(searchSet.has(edge.from) || searchSet.has(edge.to));
+        return (
+          <EdgePath
+            key={edge.id}
+            edge={edge}
+            fromNode={fromNode}
+            toNode={toNode}
+            focused={isConnected}
+            dimmed={(hasFocus && !isConnected) || searchDimmed}
+          />
+        );
+      })}
+      {/* Live preview edge while drag-connecting */}
+      {draggingEdge.value && (() => {
+        const de = draggingEdge.value;
+        const dx = de.cursorX - de.fromX;
+        const dy = de.cursorY - de.fromY;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        const curve = Math.min(dist * 0.25, 80);
+        const nx = dx / (dist || 1);
+        const ny = dy / (dist || 1);
+        const previewD = `M ${de.fromX} ${de.fromY} C ${de.fromX + nx * curve} ${de.fromY + ny * curve}, ${de.cursorX - nx * curve} ${de.cursorY - ny * curve}, ${de.cursorX} ${de.cursorY}`;
+        return (
+          <g>
+            <path d={previewD} fill="none" stroke="var(--c-accent)" stroke-width="6" opacity="0.1" style={{ filter: 'blur(3px)' }} />
+            <path d={previewD} fill="none" stroke="var(--c-accent)" stroke-width="2" stroke-dasharray="6 4" opacity="0.8" />
+            <circle cx={de.cursorX} cy={de.cursorY} r="5" fill="var(--c-accent)" opacity="0.5" />
+          </g>
+        );
+      })()}
+    </svg>
+  );
+}

package/src/client/canvas/ExpandedNodeOverlay.tsx

@@ -0,0 +1,260 @@
+import { useCallback, useState } from 'preact/hooks';
+import { ContextNode } from '../nodes/ContextNode';
+import { FileNode } from '../nodes/FileNode';
+import { LedgerNode } from '../nodes/LedgerNode';
+import { MarkdownNode } from '../nodes/MarkdownNode';
+import { McpAppNode } from '../nodes/McpAppNode';
+import { StatusNode } from '../nodes/StatusNode';
+import { ImageNode } from '../nodes/ImageNode';
+import { WebpageNode } from '../nodes/WebpageNode';
+import { PromptNode } from '../nodes/PromptNode';
+import { ResponseNode } from '../nodes/ResponseNode';
+import { TraceNode } from '../nodes/TraceNode';
+import {
+  collapseExpandedNode,
+  contextPinnedNodeIds,
+  expandedNodeId,
+  nodes,
+  toggleContextPin,
+} from '../state/canvas-store';
+import { TYPE_LABELS } from '../types';
+import type { CanvasNodeState } from '../types';
+
+function renderContent(node: CanvasNodeState, expanded: boolean) {
+  switch (node.type) {
+    case 'markdown':
+      return <MarkdownNode node={node} expanded={expanded} />;
+    case 'mcp-app':
+      return <McpAppNode node={node} />;
+    case 'webpage':
+      return <WebpageNode node={node} expanded={expanded} />;
+    case 'json-render':
+      return <McpAppNode node={node} />;
+    case 'graph':
+      return <McpAppNode node={node} />;
+    case 'prompt':
+      return <PromptNode node={node} />;
+    case 'response':
+      return <ResponseNode node={node} expanded={expanded} />;
+    case 'status':
+      return <StatusNode node={node} />;
+    case 'context':
+      return <ContextNode node={node} expanded={expanded} />;
+    case 'ledger':
+      return <LedgerNode node={node} />;
+    case 'trace':
+      return <TraceNode node={node} />;
+    case 'file':
+      return <FileNode node={node} expanded={expanded} />;
+    case 'image':
+      return <ImageNode node={node} expanded={expanded} />;
+    default:
+      return <div>Unknown node type</div>;
+  }
+}
+
+/** Extract plain text content from a node for word count / copy. */
+function getNodeTextContent(node: CanvasNodeState): string {
+  switch (node.type) {
+    case 'markdown':
+      return (node.data.content as string) || '';
+    case 'file':
+      return (node.data.fileContent as string) || '';
+    case 'webpage':
+      return (node.data.content as string) || '';
+    case 'json-render':
+    case 'graph':
+      return JSON.stringify(node.data.spec ?? node.data.graphConfig ?? {}, null, 2);
+    default:
+      return '';
+  }
+}
+
+function wordCount(text: string): number {
+  if (!text) return 0;
+  return text.split(/\s+/).filter(Boolean).length;
+}
+
+export function ExpandedNodeOverlay() {
+  const nodeId = expandedNodeId.value;
+  const node = nodeId ? nodes.value.get(nodeId) : undefined;
+  const [copied, setCopied] = useState(false);
+
+  const handleClose = useCallback(() => {
+    collapseExpandedNode();
+  }, []);
+
+  const handleBackdropPointerDown = useCallback((e: PointerEvent) => {
+    if ((e.target as HTMLElement).classList.contains('expanded-overlay-backdrop')) {
+      collapseExpandedNode();
+    }
+  }, []);
+
+  const handleCopy = useCallback(() => {
+    if (!node) return;
+    const text = getNodeTextContent(node);
+    if (!text) return;
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  }, [node]);
+
+  const handleToggleCtxPin = useCallback(() => {
+    if (!nodeId) return;
+    toggleContextPin(nodeId);
+  }, [nodeId]);
+
+  if (!node) return null;
+
+  const title =
+    (node.data.title as string) ||
+    (node.data.path as string)?.split('/').pop() ||
+    TYPE_LABELS[node.type];
+  const textContent = getNodeTextContent(node);
+  const words = wordCount(textContent);
+  const isCtxPinned = nodeId ? contextPinnedNodeIds.value.has(nodeId) : false;
+  const hasText = textContent.length > 0;
+
+  return (
+    <div
+      class="expanded-overlay-backdrop"
+      onPointerDown={handleBackdropPointerDown}
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 10001,
+        background: 'rgba(10,14,30,0.85)',
+        backdropFilter: 'blur(8px)',
+        display: 'flex',
+        alignItems: 'stretch',
+        justifyContent: 'center',
+        padding: '32px',
+      }}
+    >
+      <div
+        class="expanded-overlay-panel"
+        style={{
+          flex: 1,
+          maxWidth: '1200px',
+          display: 'flex',
+          flexDirection: 'column',
+          background: 'var(--c-panel)',
+          border: `1px solid ${isCtxPinned ? 'var(--c-warn)' : 'var(--c-accent)'}`,
+          borderRadius: 'var(--radius)',
+          boxShadow: `0 0 0 1px ${isCtxPinned ? 'var(--c-warn)' : 'var(--c-accent)'}, 0 24px 80px rgba(0,0,0,0.6)`,
+          overflow: 'hidden',
+        }}
+      >
+        {/* Title bar */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+            padding: '10px 16px',
+            background: 'var(--c-panel-glass)',
+            borderBottom: '1px solid var(--c-line)',
+            flexShrink: 0,
+          }}
+        >
+          <span
+            style={{
+              fontSize: '10px',
+              padding: '1px 6px',
+              borderRadius: '4px',
+              background: 'var(--c-accent-12)',
+              color: 'var(--c-accent)',
+              textTransform: 'uppercase',
+              letterSpacing: '0.04em',
+            }}
+          >
+            {TYPE_LABELS[node.type]}
+          </span>
+          <span
+            style={{
+              flex: 1,
+              fontSize: '13px',
+              fontWeight: 600,
+              color: 'var(--c-text)',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+          >
+            {title}
+          </span>
+
+          {/* Action buttons */}
+          <div class="expanded-actions">
+            {/* Context pin toggle */}
+            <button
+              type="button"
+              class={`expanded-action-btn ${isCtxPinned ? 'expanded-action-active' : ''}`}
+              onClick={handleToggleCtxPin}
+              title={isCtxPinned ? 'Remove from context' : 'Pin as context'}
+            >
+              {isCtxPinned ? '\u2726 In context' : '\u2726 Pin as context'}
+            </button>
+
+            {/* Copy content */}
+            {hasText && (
+              <button
+                type="button"
+                class="expanded-action-btn"
+                onClick={handleCopy}
+                title="Copy content to clipboard"
+              >
+                {copied ? 'Copied!' : 'Copy'}
+              </button>
+            )}
+
+            {/* Word count */}
+            {words > 0 && (
+              <span class="expanded-meta">
+                {words.toLocaleString()} word{words !== 1 ? 's' : ''}
+              </span>
+            )}
+          </div>
+
+          <span style={{ fontSize: '10px', color: 'var(--c-muted)' }}>Esc to close</span>
+          <button
+            type="button"
+            onClick={handleClose}
+            style={{
+              background: 'none',
+              border: 'none',
+              color: 'var(--c-muted)',
+              cursor: 'pointer',
+              padding: '2px 6px',
+              fontSize: '16px',
+              lineHeight: 1,
+              borderRadius: '4px',
+            }}
+            onMouseEnter={(e) => {
+              (e.target as HTMLElement).style.color = 'var(--c-text)';
+            }}
+            onMouseLeave={(e) => {
+              (e.target as HTMLElement).style.color = 'var(--c-muted)';
+            }}
+            title="Close (Esc)"
+          >
+            ×
+          </button>
+        </div>
+
+        {/* Content area — full height */}
+        <div
+          style={{
+            flex: 1,
+            overflow: 'auto',
+            padding: '16px',
+            minHeight: 0,
+          }}
+        >
+          {renderContent(node, true)}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/canvas/FocusFieldLayer.tsx

@@ -0,0 +1,107 @@
+import { attentionPrimaryNodeIds, attentionRegions, attentionSecondaryNodeIds } from '../state/attention-store';
+import { nodes } from '../state/canvas-store';
+
+interface Rect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+function getNodeRect(nodeId: string): Rect | null {
+  const node = nodes.value.get(nodeId);
+  if (!node || node.dockPosition !== null) return null;
+  return {
+    left: node.position.x,
+    top: node.position.y,
+    width: node.size.width,
+    height: node.size.height,
+  };
+}
+
+function getRegionRect(nodeIds: string[]): Rect | null {
+  const rects = nodeIds
+    .map((nodeId) => getNodeRect(nodeId))
+    .filter((rect): rect is Rect => rect !== null);
+  if (rects.length === 0) return null;
+
+  const minLeft = Math.min(...rects.map((rect) => rect.left));
+  const minTop = Math.min(...rects.map((rect) => rect.top));
+  const maxRight = Math.max(...rects.map((rect) => rect.left + rect.width));
+  const maxBottom = Math.max(...rects.map((rect) => rect.top + rect.height));
+  const padX = 54;
+  const padY = 46;
+
+  return {
+    left: minLeft - padX,
+    top: minTop - padY,
+    width: maxRight - minLeft + padX * 2,
+    height: maxBottom - minTop + padY * 2,
+  };
+}
+
+function rectStyle(rect: Rect, radius: number): Record<string, string> {
+  return {
+    left: `${rect.left}px`,
+    top: `${rect.top}px`,
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+    borderRadius: `${radius}px`,
+  };
+}
+
+export function FocusFieldLayer() {
+  const primaryNodeIds = Array.from(attentionPrimaryNodeIds.value);
+  const secondaryNodeIds = Array.from(attentionSecondaryNodeIds.value);
+  const regions = attentionRegions.value;
+
+  if (primaryNodeIds.length === 0 && secondaryNodeIds.length === 0) return null;
+
+  return (
+    <div class="attention-field-layer" aria-hidden="true">
+      {regions.map((region) => {
+        const rect = getRegionRect(region.nodeIds);
+        if (!rect) return null;
+        return (
+          <div
+            key={region.id}
+            class="attention-field-region"
+            style={rectStyle(rect, 42)}
+          />
+        );
+      })}
+      {secondaryNodeIds.map((nodeId) => {
+        const rect = getNodeRect(nodeId);
+        if (!rect) return null;
+        return (
+          <div
+            key={`secondary-${nodeId}`}
+            class="attention-field-node attention-field-secondary"
+            style={rectStyle({
+              left: rect.left - 18,
+              top: rect.top - 18,
+              width: rect.width + 36,
+              height: rect.height + 36,
+            }, 28)}
+          />
+        );
+      })}
+      {primaryNodeIds.map((nodeId) => {
+        const rect = getNodeRect(nodeId);
+        if (!rect) return null;
+        return (
+          <div
+            key={`primary-${nodeId}`}
+            class="attention-field-node attention-field-primary"
+            style={rectStyle({
+              left: rect.left - 24,
+              top: rect.top - 24,
+              width: rect.width + 48,
+              height: rect.height + 48,
+            }, 30)}
+          />
+        );
+      })}
+    </div>
+  );
+}