devglide 0.1.1

package/src/apps/workflow/public/editor/layout-engine.js

@@ -0,0 +1,159 @@
+// ── Workflow Editor — Layout Utilities ──────────────────────────────────
+// Grid snapping, fit-to-view, and automatic layout for imported workflows.
+
+const NODE_WIDTH = 220;
+const NODE_HEIGHT = 80;
+const H_SPACING = 100; // Horizontal gap between columns
+const V_SPACING = 40;  // Vertical gap between rows
+
+export const LayoutEngine = {
+  /**
+   * Snap coordinates to a grid.
+   * @param {number} x
+   * @param {number} y
+   * @param {number} [gridSize=20]
+   * @returns {{ x: number, y: number }}
+   */
+  snapToGrid(x, y, gridSize = 20) {
+    return {
+      x: Math.round(x / gridSize) * gridSize,
+      y: Math.round(y / gridSize) * gridSize,
+    };
+  },
+
+  /**
+   * Calculate zoom and pan to fit all nodes within the canvas viewport.
+   * @param {Array<{ position: { x: number, y: number } }>} nodes
+   * @param {number} canvasWidth
+   * @param {number} canvasHeight
+   * @param {number} [padding=50]
+   * @returns {{ zoom: number, panX: number, panY: number }}
+   */
+  fitToView(nodes, canvasWidth, canvasHeight, padding = 50) {
+    if (!nodes.length) {
+      return { zoom: 1, panX: 0, panY: 0 };
+    }
+
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const n of nodes) {
+      minX = Math.min(minX, n.position.x);
+      minY = Math.min(minY, n.position.y);
+      maxX = Math.max(maxX, n.position.x + NODE_WIDTH);
+      maxY = Math.max(maxY, n.position.y + NODE_HEIGHT);
+    }
+
+    const boundsW = maxX - minX + padding * 2;
+    const boundsH = maxY - minY + padding * 2;
+
+    const zoom = Math.max(0.25, Math.min(3, Math.min(canvasWidth / boundsW, canvasHeight / boundsH)));
+    const panX = (canvasWidth - boundsW * zoom) / 2 - (minX - padding) * zoom;
+    const panY = (canvasHeight - boundsH * zoom) / 2 - (minY - padding) * zoom;
+
+    return { zoom, panX, panY };
+  },
+
+  /**
+   * Automatically layout nodes in a top-to-bottom arrangement.
+   * Uses a simple topological sort approach for DAG layout.
+   * Useful for imported legacy workflows that have no position data.
+   *
+   * @param {Array<object>} nodes - Nodes with { id, type, ... }
+   * @param {Array<object>} edges - Edges with { source, target, ... }
+   * @returns {Array<object>} Nodes with updated positions
+   */
+  autoLayout(nodes, edges) {
+    if (!nodes.length) return nodes;
+
+    // Build adjacency map
+    const outgoing = new Map(); // nodeId -> [targetNodeId]
+    const incoming = new Map(); // nodeId -> [sourceNodeId]
+    const nodeMap = new Map();
+
+    for (const n of nodes) {
+      nodeMap.set(n.id, n);
+      outgoing.set(n.id, []);
+      incoming.set(n.id, []);
+    }
+    for (const e of edges) {
+      if (outgoing.has(e.source) && incoming.has(e.target)) {
+        outgoing.get(e.source).push(e.target);
+        incoming.get(e.target).push(e.source);
+      }
+    }
+
+    // Topological sort (Kahn's algorithm) to determine layers
+    const inDegree = new Map();
+    for (const n of nodes) {
+      inDegree.set(n.id, incoming.get(n.id).length);
+    }
+
+    const layers = [];
+    const visited = new Set();
+    let queue = [];
+
+    // Start with nodes that have no incoming edges (triggers, roots)
+    for (const n of nodes) {
+      if (inDegree.get(n.id) === 0) {
+        queue.push(n.id);
+      }
+    }
+
+    while (queue.length > 0) {
+      layers.push([...queue]);
+      for (const id of queue) visited.add(id);
+
+      const nextQueue = [];
+      for (const id of queue) {
+        for (const targetId of outgoing.get(id)) {
+          if (visited.has(targetId)) continue;
+          inDegree.set(targetId, inDegree.get(targetId) - 1);
+          if (inDegree.get(targetId) === 0) {
+            nextQueue.push(targetId);
+          }
+        }
+      }
+      queue = nextQueue;
+    }
+
+    // Handle any remaining nodes (cycles or disconnected)
+    for (const n of nodes) {
+      if (!visited.has(n.id)) {
+        layers.push([n.id]);
+        visited.add(n.id);
+      }
+    }
+
+    // Assign positions: each layer is a column (left to right)
+    const result = nodes.map(n => ({ ...n, position: { ...n.position } }));
+
+    for (let col = 0; col < layers.length; col++) {
+      const layer = layers[col];
+      const totalHeight = layer.length * NODE_HEIGHT + (layer.length - 1) * V_SPACING;
+      const startY = -totalHeight / 2;
+
+      for (let row = 0; row < layer.length; row++) {
+        const nodeId = layer[row];
+        const node = result.find(n => n.id === nodeId);
+        if (node) {
+          node.position.x = col * (NODE_WIDTH + H_SPACING);
+          node.position.y = startY + row * (NODE_HEIGHT + V_SPACING);
+        }
+      }
+    }
+
+    // Normalize so that the top-left is at (40, 40)
+    let minX = Infinity, minY = Infinity;
+    for (const n of result) {
+      minX = Math.min(minX, n.position.x);
+      minY = Math.min(minY, n.position.y);
+    }
+    const offsetX = 40 - minX;
+    const offsetY = 40 - minY;
+    for (const n of result) {
+      n.position.x += offsetX;
+      n.position.y += offsetY;
+    }
+
+    return result;
+  },
+};

package/src/apps/workflow/public/editor/node-renderer.js

@@ -0,0 +1,199 @@
+// ── Workflow Editor — Node Card DOM Creation ───────────────────────────
+// Creates, updates, and manages runtime status for node DOM elements.
+// Simplified to a single "step" node type for LLM instruction flows.
+
+import { NODE_TYPES, resolveOutputPorts, resolveInputPortCount } from '../models/node-types.js';
+
+const NODE_WIDTH = 220;
+
+function truncate(s, len) {
+  return s.length > len ? s.slice(0, len) + '\u2026' : s;
+}
+
+/**
+ * Build a compact config preview string for a node.
+ */
+function configPreview(node) {
+  const c = node.config ?? {};
+
+  switch (node.type) {
+    case 'trigger':
+      return c.triggerType ?? 'manual';
+    case 'action:shell':
+      return c.command ? truncate(c.command, 40) : 'No command';
+    case 'action:kanban':
+      return c.operation ?? 'kanban';
+    case 'action:git':
+      return c.operation ? `git ${c.operation}` : 'git';
+    case 'action:llm':
+      return c.prompt ? truncate(c.prompt, 40) : (c.model ?? 'LLM');
+    case 'action:test':
+      return c.operation ?? 'test';
+    case 'action:log':
+      return c.operation ?? 'log';
+    case 'action:file':
+      return c.operation ? `${c.operation}: ${truncate(c.path ?? '', 30)}` : 'file';
+    case 'action:http':
+      return c.method ? `${c.method} ${truncate(c.url ?? '', 30)}` : 'HTTP';
+    case 'decision':
+      return c.conditionType ?? 'decision';
+    case 'loop':
+      return c.loopType ?? 'loop';
+    case 'sub-workflow':
+      return c.workflowId ? truncate(c.workflowId, 30) : 'sub-workflow';
+    case 'step':
+      if (c.instructions) return truncate(c.instructions, 40);
+      if (c.instructionFile) return c.instructionFile;
+      return 'Click to add instructions';
+    default:
+      return node.type;
+  }
+}
+
+// ── Public API ──────────────────────────────────────────────────────────
+
+export const NodeRenderer = {
+  /**
+   * Create a DOM element for a workflow node.
+   * @param {object} node - { id, type, label, position, config }
+   * @returns {HTMLElement}
+   */
+  createNodeElement(node) {
+    const typeDef = NODE_TYPES[node.type];
+    const color = typeDef?.color ?? '#64748b';
+
+    const el = document.createElement('div');
+    el.className = 'wfb-node';
+    el.dataset.nodeId = node.id;
+    el.style.position = 'absolute';
+    el.style.left = `${node.position.x}px`;
+    el.style.top = `${node.position.y}px`;
+    el.style.setProperty('--wfb-type-color', color);
+
+    // Header
+    const header = document.createElement('div');
+    header.className = 'wfb-node-header';
+
+    const labelSpan = document.createElement('span');
+    labelSpan.className = 'wfb-node-label';
+    labelSpan.textContent = node.label;
+
+    header.appendChild(labelSpan);
+
+    // Body (config preview)
+    const body = document.createElement('div');
+    body.className = 'wfb-node-body';
+    body.textContent = configPreview(node);
+
+    el.appendChild(header);
+    el.appendChild(body);
+
+    // Input ports
+    const inCount = resolveInputPortCount(node);
+    for (let i = 0; i < inCount; i++) {
+      const portIn = document.createElement('div');
+      portIn.className = 'wfb-port wfb-port-in';
+      portIn.dataset.portId = `in-${i}`;
+      portIn.dataset.portType = 'in';
+      portIn.dataset.nodeId = node.id;
+      if (inCount > 1) {
+        portIn.style.top = `${((i + 1) / (inCount + 1)) * 100}%`;
+      }
+      el.appendChild(portIn);
+    }
+
+    // Output ports
+    const outPorts = resolveOutputPorts(node);
+    for (let i = 0; i < outPorts.length; i++) {
+      const portOut = document.createElement('div');
+      portOut.className = 'wfb-port wfb-port-out';
+      portOut.dataset.portId = outPorts[i].id;
+      portOut.dataset.portType = 'out';
+      portOut.dataset.nodeId = node.id;
+      if (outPorts.length > 1) {
+        portOut.style.top = `${((i + 1) / (outPorts.length + 1)) * 100}%`;
+        portOut.title = outPorts[i].label;
+      }
+      el.appendChild(portOut);
+    }
+
+    return el;
+  },
+
+  /**
+   * Update an existing node element to reflect changes.
+   * @param {HTMLElement} el
+   * @param {object} node
+   */
+  updateNodeElement(el, node) {
+    const typeDef = NODE_TYPES[node.type];
+    const color = typeDef?.color ?? '#64748b';
+
+    // Update position
+    el.style.left = `${node.position.x}px`;
+    el.style.top = `${node.position.y}px`;
+
+    // Update type color
+    el.style.setProperty('--wfb-type-color', color);
+
+    // Update label
+    const labelEl = el.querySelector('.wfb-node-label');
+    if (labelEl) labelEl.textContent = node.label;
+
+    // Update config preview
+    const bodyEl = el.querySelector('.wfb-node-body');
+    if (bodyEl) bodyEl.textContent = configPreview(node);
+
+    // Sync output ports for dynamic-port nodes (decision)
+    if (typeDef?.ports?.out === 'dynamic') {
+      const outPorts = resolveOutputPorts(node);
+      const existingOuts = el.querySelectorAll('.wfb-port-out');
+      // Only rebuild if count changed
+      if (existingOuts.length !== outPorts.length) {
+        existingOuts.forEach(p => p.remove());
+        for (let i = 0; i < outPorts.length; i++) {
+          const portOut = document.createElement('div');
+          portOut.className = 'wfb-port wfb-port-out';
+          portOut.dataset.portId = outPorts[i].id;
+          portOut.dataset.portType = 'out';
+          portOut.dataset.nodeId = node.id;
+          if (outPorts.length > 1) {
+            portOut.style.top = `${((i + 1) / (outPorts.length + 1)) * 100}%`;
+            portOut.title = outPorts[i].label;
+          }
+          el.appendChild(portOut);
+        }
+      }
+    }
+  },
+
+  /**
+   * Set runtime status on a node element.
+   * @param {HTMLElement} el
+   * @param {'running'|'passed'|'failed'} status
+   */
+  setNodeStatus(el, status) {
+    el.classList.remove('wfb-status-running', 'wfb-status-passed', 'wfb-status-failed');
+    el.classList.add(`wfb-status-${status}`);
+  },
+
+  /**
+   * Remove runtime status from a node element.
+   * @param {HTMLElement} el
+   */
+  clearNodeStatus(el) {
+    el.classList.remove('wfb-status-running', 'wfb-status-passed', 'wfb-status-failed');
+  },
+
+  /**
+   * Mark a node element as selected.
+   * @param {HTMLElement} el
+   * @param {boolean} selected
+   */
+  setSelected(el, selected) {
+    el.classList.toggle('selected', selected);
+  },
+
+  /** Node width constant for layout calculations. */
+  NODE_WIDTH,
+};

package/src/apps/workflow/public/editor/selection-manager.js

@@ -0,0 +1,193 @@
+// ── Workflow Editor — Selection Manager ─────────────────────────────────
+// Handles node/edge selection with shift-toggle and keyboard shortcuts.
+
+import { store } from '../state/store.js';
+import { WorkflowModel } from '../models/workflow-model.js';
+
+let _container = null;
+let _onContainerClick = null;
+let _onKeyDown = null;
+let _unsubs = [];
+
+// ── Public API ──────────────────────────────────────────────────────────
+
+export const SelectionManager = {
+  /**
+   * Initialize selection handling on the canvas container.
+   * @param {HTMLElement} container - The canvas root element
+   */
+  init(container) {
+    _container = container;
+
+    _onContainerClick = (e) => {
+      // Edge click — check if clicked on an edge hit area
+      const edgeHit = e.target.closest?.('.wfb-edge-hit');
+      if (edgeHit) {
+        const edgeGroup = edgeHit.closest('.wfb-edge');
+        const edgeId = edgeGroup?.dataset?.edgeId;
+        if (edgeId) {
+          this.selectEdge(edgeId, e.shiftKey);
+          return;
+        }
+      }
+
+      // Node click
+      const nodeEl = e.target.closest?.('.wfb-node');
+      if (nodeEl) {
+        const nodeId = nodeEl.dataset.nodeId;
+        if (nodeId) {
+          this.selectNode(nodeId, e.shiftKey);
+          return;
+        }
+      }
+
+      // Port click — don't deselect when clicking ports
+      const portEl = e.target.closest?.('.wfb-port');
+      if (portEl) return;
+
+      // Canvas background click — deselect all
+      if (e.target.closest?.('.wfb-canvas') && !e.target.closest?.('.wfb-node') && !e.target.closest?.('.wfb-edge')) {
+        this.deselectAll();
+      }
+    };
+
+    _onKeyDown = (e) => {
+      // Escape — deselect all
+      if (e.key === 'Escape') {
+        this.deselectAll();
+        return;
+      }
+
+      // Delete or Backspace — delete selected (only when not in an input)
+      if ((e.key === 'Delete' || e.key === 'Backspace') && !isInputFocused()) {
+        e.preventDefault();
+        this.deleteSelected();
+        return;
+      }
+
+      // Ctrl/Cmd+A — select all nodes
+      if ((e.ctrlKey || e.metaKey) && e.key === 'a' && !isInputFocused()) {
+        e.preventDefault();
+        const wf = store.get('workflow');
+        if (wf?.nodes.length) {
+          store.set('selectedNodeIds', new Set(wf.nodes.map(n => n.id)));
+          store.set('selectedEdgeIds', new Set());
+        }
+      }
+    };
+
+    _container.addEventListener('click', _onContainerClick);
+    document.addEventListener('keydown', _onKeyDown);
+  },
+
+  /**
+   * Remove all event listeners.
+   */
+  destroy() {
+    if (_container && _onContainerClick) {
+      _container.removeEventListener('click', _onContainerClick);
+    }
+    if (_onKeyDown) {
+      document.removeEventListener('keydown', _onKeyDown);
+    }
+    for (const unsub of _unsubs) unsub();
+    _unsubs = [];
+    _container = null;
+    _onContainerClick = null;
+    _onKeyDown = null;
+  },
+
+  /**
+   * Select a node. If additive (shift), toggle it in/out of the selection.
+   * @param {string} id
+   * @param {boolean} [additive=false]
+   */
+  selectNode(id, additive = false) {
+    const sel = store.get('selectedNodeIds');
+    if (additive) {
+      const next = new Set(sel);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      store.set('selectedNodeIds', next);
+    } else {
+      store.set('selectedNodeIds', new Set([id]));
+      store.set('selectedEdgeIds', new Set());
+    }
+  },
+
+  /**
+   * Select an edge. If additive (shift), toggle it in/out of the selection.
+   * @param {string} id
+   * @param {boolean} [additive=false]
+   */
+  selectEdge(id, additive = false) {
+    const sel = store.get('selectedEdgeIds');
+    if (additive) {
+      const next = new Set(sel);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      store.set('selectedEdgeIds', next);
+    } else {
+      store.set('selectedEdgeIds', new Set([id]));
+      store.set('selectedNodeIds', new Set());
+    }
+  },
+
+  /**
+   * Clear all selection.
+   */
+  deselectAll() {
+    store.set('selectedNodeIds', new Set());
+    store.set('selectedEdgeIds', new Set());
+  },
+
+  /**
+   * Get the current set of selected node IDs.
+   * @returns {Set<string>}
+   */
+  getSelectedNodes() {
+    return store.get('selectedNodeIds');
+  },
+
+  /**
+   * Get the current set of selected edge IDs.
+   * @returns {Set<string>}
+   */
+  getSelectedEdges() {
+    return store.get('selectedEdgeIds');
+  },
+
+  /**
+   * Delete all selected nodes and edges.
+   */
+  deleteSelected() {
+    const nodeIds = store.get('selectedNodeIds');
+    const edgeIds = store.get('selectedEdgeIds');
+
+    // Delete edges first (removing nodes also removes their edges)
+    for (const edgeId of edgeIds) {
+      WorkflowModel.removeEdge(edgeId);
+    }
+    for (const nodeId of nodeIds) {
+      WorkflowModel.removeNode(nodeId);
+    }
+
+    this.deselectAll();
+  },
+};
+
+/**
+ * Check if an input/textarea/contenteditable is focused.
+ */
+function isInputFocused() {
+  const el = document.activeElement;
+  if (!el) return false;
+  const tag = el.tagName.toLowerCase();
+  return tag === 'input' || tag === 'textarea' || tag === 'select' || el.isContentEditable;
+}

package/src/apps/workflow/public/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" fill="#1c2128"/>
+  <rect width="32" height="32" fill="none" stroke="#7ee787" stroke-width="1.5"/>
+  <path d="M8 10h6a6 6 0 0 1 0 12H8V10z" fill="#7ee787"/>
+  <rect x="18" y="10" width="6" height="4" fill="#7ee787" opacity="0.6"/>
+  <rect x="18" y="18" width="6" height="4" fill="#7ee787" opacity="0.6"/>
+</svg>