devglide 0.1.1

package/src/apps/workflow/public/panels/workflow-list.js

@@ -0,0 +1,237 @@
+// ── Workflow Editor — Workflow Browse/Manage List ────────────────────────
+// List view for browsing, creating, and managing saved workflows.
+
+const API = '/api/workflow';
+
+let _container = null;
+let _onSelect = null;
+let _onNew = null;
+let _confirmFn = null;
+let _toastFn = null;
+
+function esc(s) {
+  return String(s).replace(/&/g, '&').replace(/"/g, '"')
+    .replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function timeAgo(dateStr) {
+  if (!dateStr) return '';
+  const diff = Date.now() - new Date(dateStr).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`;
+}
+
+async function fetchWorkflows() {
+  try {
+    const res = await fetch(`${API}/workflows`);
+    if (!res.ok) throw new Error('Failed to load');
+    return await res.json();
+  } catch {
+    return [];
+  }
+}
+
+async function deleteWorkflow(id) {
+  const res = await fetch(`${API}/workflows/${id}`, { method: 'DELETE' });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: 'Delete failed' }));
+    throw new Error(err.error || 'Delete failed');
+  }
+}
+
+async function toggleWorkflow(wf) {
+  const enabled = wf.enabled === false ? true : false;
+  const res = await fetch(`${API}/workflows/${wf.id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ ...wf, enabled }),
+  });
+  if (!res.ok) throw new Error('Toggle failed');
+  return await res.json();
+}
+
+async function toggleGlobal(wf) {
+  const isGlobal = !wf.global;
+  const res = await fetch(`${API}/workflows/${wf.id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ global: isGlobal }),
+  });
+  if (!res.ok) throw new Error('Global toggle failed');
+  return await res.json();
+}
+
+function renderWorkflowCard(wf) {
+  const nodeCount = wf.nodes?.length ?? 0;
+  const edgeCount = wf.edges?.length ?? 0;
+  const enabled = wf.enabled !== false;
+  const tags = (wf.tags || []).map(t =>
+    `<span style="font-size:9px;padding:0 4px;border:1px solid var(--df-color-border-default);
+      color:var(--df-color-text-muted);text-transform:uppercase;letter-spacing:var(--df-letter-spacing-wider);">
+      ${esc(t)}</span>`
+  ).join('');
+
+  return `
+    <div class="wb-wflist-card" data-wf-id="${esc(wf.id)}" style="${!enabled ? 'opacity:0.5;' : ''}">
+      <div class="wb-wflist-card-body">
+        <div class="wb-wflist-card-title">${esc(wf.name)}</div>
+        ${wf.description ? `<div class="wb-wflist-card-desc">${esc(wf.description).replace(/\\n/g, ' ').replace(/\n/g, ' ')}</div>` : ''}
+        <div class="wb-wflist-card-meta">
+          <span>${nodeCount} node${nodeCount !== 1 ? 's' : ''}</span>
+          <span>&middot;</span>
+          <span>${edgeCount} edge${edgeCount !== 1 ? 's' : ''}</span>
+          ${wf.updatedAt ? `<span>&middot;</span><span>${timeAgo(wf.updatedAt)}</span>` : ''}
+        </div>
+        ${tags ? `<div class="wb-wflist-card-tags">${tags}</div>` : ''}
+      </div>
+      <div class="wb-wflist-card-actions">
+        <button class="btn btn-secondary" data-action="edit" title="Edit">&#9998;</button>
+        <button class="btn ${enabled ? 'btn-primary' : 'btn-secondary'}" data-action="toggle" title="${enabled ? 'Disable' : 'Enable'}">${enabled ? '●' : '○'}</button>
+        <button class="btn ${wf.global ? 'btn-primary' : 'btn-secondary'}" data-action="toggle-global" title="${wf.global ? 'Make project-only' : 'Make global'}">${wf.global ? '⊕' : '⊙'}</button>
+        <button class="btn btn-secondary wb-wflist-delete" data-action="delete" title="Delete">&times;</button>
+      </div>
+    </div>`;
+}
+
+async function render() {
+  if (!_container) return;
+
+  _container.innerHTML = `
+    <div class="wb-wflist-header">
+      <span style="font-size:var(--df-font-size-md);color:var(--df-color-accent-default);
+        font-family:var(--df-font-mono);letter-spacing:var(--df-letter-spacing-wider);
+        text-transform:uppercase;">Workflow</span>
+      <span style="flex:1"></span>
+      <button class="btn btn-primary" data-action="new-workflow">+ New Workflow</button>
+    </div>
+    <div class="wb-wflist-loading" style="padding:var(--df-space-6);text-align:center;
+      color:var(--df-color-text-muted);font-size:var(--df-font-size-xs);text-transform:uppercase;
+      letter-spacing:var(--df-letter-spacing-wider);">Loading...</div>
+  `;
+
+  const newBtn = _container.querySelector('[data-action="new-workflow"]');
+  if (newBtn) newBtn.addEventListener('click', () => _onNew?.());
+
+  await renderList();
+}
+
+async function renderList() {
+  if (!_container) return;
+
+  const workflows = await fetchWorkflows();
+
+  const loading = _container.querySelector('.wb-wflist-loading');
+  if (loading) loading.remove();
+
+  const oldList = _container.querySelector('.wb-wflist-grid');
+  if (oldList) oldList.remove();
+
+  const grid = document.createElement('div');
+  grid.className = 'wb-wflist-grid';
+
+  if (!workflows.length) {
+    grid.innerHTML = `
+      <div style="padding:var(--df-space-8);text-align:center;color:var(--df-color-text-muted);">
+        <div style="font-size:48px;opacity:0.15;margin-bottom:var(--df-space-2);">&#9881;</div>
+        <div style="font-size:var(--df-font-size-sm);text-transform:uppercase;
+          letter-spacing:var(--df-letter-spacing-wide);">
+          No workflows yet. Create one to get started.
+        </div>
+      </div>`;
+  } else {
+    grid.innerHTML = workflows.map(renderWorkflowCard).join('');
+  }
+
+  _container.appendChild(grid);
+  bindCardEvents(grid, workflows);
+}
+
+function bindCardEvents(grid, workflows) {
+  const cards = grid.querySelectorAll('.wb-wflist-card');
+  for (const card of cards) {
+    const wfId = card.dataset.wfId;
+    const wf = workflows.find(w => w.id === wfId);
+
+    card.querySelector('[data-action="edit"]')?.addEventListener('click', () => _onSelect?.(wf));
+
+    card.querySelector('[data-action="toggle"]')?.addEventListener('click', async () => {
+      try {
+        await toggleWorkflow(wf);
+        await renderList();
+      } catch (e) {
+        _toastFn?.(e.message || 'Toggle failed', 'error');
+      }
+    });
+
+    card.querySelector('[data-action="toggle-global"]')?.addEventListener('click', async () => {
+      try {
+        await toggleGlobal(wf);
+        await renderList();
+      } catch (e) {
+        _toastFn?.(e.message || 'Global toggle failed', 'error');
+      }
+    });
+
+    card.querySelector('[data-action="delete"]')?.addEventListener('click', async () => {
+      if (!_confirmFn) return;
+      const confirmed = await _confirmFn('Delete Workflow', `Delete workflow "${wf?.name}"? This cannot be undone.`);
+      if (!confirmed) return;
+      try {
+        await deleteWorkflow(wfId);
+        _toastFn?.('Workflow deleted', 'success');
+      } catch (e) {
+        _toastFn?.(e.message || 'Delete failed', 'error');
+      }
+      await renderList();
+    });
+
+    const body = card.querySelector('.wb-wflist-card-body');
+    if (body) {
+      body.style.cursor = 'pointer';
+      body.addEventListener('click', () => _onSelect?.(wf));
+    }
+  }
+}
+
+// ── Exports ─────────────────────────────────────────────────────────────
+
+export const WorkflowList = {
+  mount(container) {
+    _container = container;
+    render();
+  },
+
+  unmount() {
+    if (_container) _container.innerHTML = '';
+    _container = null;
+    _onSelect = null;
+    _onNew = null;
+    _confirmFn = null;
+    _toastFn = null;
+  },
+
+  onSelect(callback) {
+    _onSelect = callback;
+  },
+
+  onNew(callback) {
+    _onNew = callback;
+  },
+
+  setConfirm(fn) {
+    _confirmFn = fn;
+  },
+
+  setToast(fn) {
+    _toastFn = fn;
+  },
+
+  async refresh() {
+    await renderList();
+  },
+};

package/src/apps/workflow/public/state/store.js

@@ -0,0 +1,47 @@
+// ── Workflow Editor — Observable State Store ────────────────────────────
+// Granular event-driven state with wildcard support.
+
+export class Store {
+  constructor() {
+    this._state = {
+      workflow: null,         // Current workflow being edited
+      selectedNodeIds: new Set(),
+      selectedEdgeIds: new Set(),
+      zoom: 1,
+      panX: 0,
+      panY: 0,
+      mode: 'select',         // 'select' | 'connect' | 'pan'
+      isDirty: false,
+      runId: null,            // Active run ID
+      nodeStates: new Map(),  // Runtime node states during execution
+    };
+    this._listeners = new Map(); // event -> Set<fn>
+  }
+
+  get(key) {
+    return this._state[key];
+  }
+
+  set(key, value) {
+    const old = this._state[key];
+    this._state[key] = value;
+    this._emit(key, value, old);
+  }
+
+  on(event, fn) {
+    if (!this._listeners.has(event)) this._listeners.set(event, new Set());
+    this._listeners.get(event).add(fn);
+    return () => this._listeners.get(event)?.delete(fn);
+  }
+
+  _emit(event, ...args) {
+    this._listeners.get(event)?.forEach(fn => {
+      try { fn(...args); } catch { /* listener errors must not break store */ }
+    });
+    this._listeners.get('*')?.forEach(fn => {
+      try { fn(event, ...args); } catch { /* swallow */ }
+    });
+  }
+}
+
+export const store = new Store();

package/src/apps/workflow/services/custom-node-loader.ts

@@ -0,0 +1,48 @@
+import fs from 'fs/promises';
+import path from 'path';
+import { getActiveProject } from '../../../project-context.js';
+
+export interface CustomNodeDefinition {
+  type: string;
+  label: string;
+  description?: string;
+  category: string;
+  configSchema: Record<string, { type: string; required?: boolean; description?: string }>;
+  executor: 'shell';
+  commandTemplate: string;
+}
+
+/**
+ * Loads user-defined node types from `.devglide/node-types/` directory.
+ */
+export async function loadCustomNodes(): Promise<CustomNodeDefinition[]> {
+  const ap = getActiveProject();
+  if (!ap) return [];
+
+  const nodeTypesDir = path.join(ap.path, '.devglide', 'node-types');
+  const definitions: CustomNodeDefinition[] = [];
+
+  let entries: string[];
+  try {
+    entries = await fs.readdir(nodeTypesDir);
+  } catch {
+    return definitions;
+  }
+
+  for (const entry of entries) {
+    if (!entry.endsWith('.json')) continue;
+
+    try {
+      const raw = await fs.readFile(path.join(nodeTypesDir, entry), 'utf-8');
+      const def = JSON.parse(raw) as CustomNodeDefinition;
+
+      if (!def.type || !def.label || !def.category || !def.commandTemplate) continue;
+
+      definitions.push(def);
+    } catch {
+      // Skip invalid files
+    }
+  }
+
+  return definitions;
+}

package/src/apps/workflow/services/legacy-converter.ts

@@ -0,0 +1,72 @@
+import { randomUUID } from 'crypto';
+import type { Workflow, WorkflowNode, WorkflowEdge } from '../types.js';
+
+interface LegacyStep {
+  name: string;
+  cmd: string;
+  cwd?: string;
+}
+
+interface LegacyWorkflow {
+  id?: string;
+  name: string;
+  description?: string;
+  ecosystem?: string;
+  steps: LegacyStep[];
+}
+
+/**
+ * Converts legacy `{ id, name, description, ecosystem, steps }` format
+ * to the new graph-based workflow format.
+ */
+export function convertLegacyWorkflow(legacy: LegacyWorkflow): Workflow {
+  const now = new Date().toISOString();
+
+  const triggerNode: WorkflowNode = {
+    id: randomUUID(),
+    type: 'trigger',
+    label: 'Manual Trigger',
+    config: {
+      nodeType: 'trigger',
+      triggerType: 'manual',
+    },
+    position: { x: 400, y: 0 },
+  };
+
+  const stepNodes: WorkflowNode[] = legacy.steps.map((step, i) => ({
+    id: randomUUID(),
+    type: 'action:shell' as const,
+    label: step.name,
+    config: {
+      nodeType: 'action:shell' as const,
+      command: step.cmd,
+      ...(step.cwd ? { cwd: step.cwd } : {}),
+      captureOutput: true,
+    },
+    position: { x: 400, y: 100 + i * 150 },
+  }));
+
+  const allNodes = [triggerNode, ...stepNodes];
+
+  const edges: WorkflowEdge[] = [];
+  for (let i = 0; i < allNodes.length - 1; i++) {
+    edges.push({
+      id: randomUUID(),
+      source: allNodes[i].id,
+      target: allNodes[i + 1].id,
+    });
+  }
+
+  return {
+    id: legacy.id ?? randomUUID(),
+    name: legacy.name,
+    description: legacy.description,
+    version: 1,
+    tags: legacy.ecosystem ? [legacy.ecosystem] : [],
+    nodes: allNodes,
+    edges,
+    variables: [],
+    createdAt: now,
+    updatedAt: now,
+  };
+}

package/src/apps/workflow/services/run-manager.ts

@@ -0,0 +1,190 @@
+import { randomUUID } from 'crypto';
+import type { Response } from 'express';
+import type { Workflow, ExecutionContext, WorkflowEvent, RunStatus, ExecutorServices } from '../types.js';
+import { runWorkflow } from '../engine/graph-runner.js';
+
+const RUN_TTL_MS = 60 * 60 * 1000;
+const CLEANUP_INTERVAL_MS = 10 * 60 * 1000;
+
+interface RunRecord {
+  id: string;
+  workflowId: string;
+  workflowName: string;
+  startedAt: string;
+  status: RunStatus;
+  context: ExecutionContext;
+  events: WorkflowEvent[];
+}
+
+/**
+ * Manages active and recent workflow runs with in-memory storage and TTL cleanup.
+ */
+export class RunManager {
+  private static instance: RunManager;
+  private runs = new Map<string, RunRecord>();
+  private clients = new Map<string, Set<Response>>();
+  private cleanupInterval: ReturnType<typeof setInterval> | null = null;
+  private executorServices: ExecutorServices = {};
+
+  static getInstance(): RunManager {
+    if (!RunManager.instance) {
+      RunManager.instance = new RunManager();
+    }
+    return RunManager.instance;
+  }
+
+  /** Inject service providers for executor dependency injection. */
+  setServices(services: ExecutorServices): void {
+    this.executorServices = services;
+  }
+
+  startRun(workflow: Workflow, triggerPayload?: unknown): string {
+    const runId = randomUUID();
+    const now = new Date().toISOString();
+
+    const context: ExecutionContext = {
+      runId,
+      workflowId: workflow.id,
+      variables: new Map(),
+      nodeStates: new Map(),
+      status: 'running',
+      startedAt: now,
+      cancelled: false,
+      services: this.executorServices,
+    };
+
+    const record: RunRecord = {
+      id: runId,
+      workflowId: workflow.id,
+      workflowName: workflow.name,
+      startedAt: now,
+      status: 'running',
+      context,
+      events: [],
+    };
+
+    this.runs.set(runId, record);
+
+    const emitter = (event: WorkflowEvent) => this.emit(runId, event);
+
+    runWorkflow(workflow, emitter, triggerPayload, undefined, this.executorServices).then((ctx) => {
+      const rec = this.runs.get(runId);
+      if (rec) {
+        rec.status = ctx.status;
+        rec.context = ctx;
+      }
+    }).catch((err) => {
+      const rec = this.runs.get(runId);
+      if (rec) {
+        rec.status = 'failed';
+        rec.context.status = 'failed';
+        this.emit(runId, { type: 'error', message: String(err) });
+        this.closeClients(runId);
+      }
+    });
+
+    return runId;
+  }
+
+  cancelRun(runId: string): boolean {
+    const record = this.runs.get(runId);
+    if (!record) return false;
+    record.context.cancelled = true;
+    return true;
+  }
+
+  getRun(runId: string): RunRecord | undefined {
+    return this.runs.get(runId);
+  }
+
+  listRuns(): RunRecord[] {
+    return [...this.runs.values()].sort(
+      (a, b) => new Date(b.startedAt).getTime() - new Date(a.startedAt).getTime(),
+    );
+  }
+
+  addClient(runId: string, res: Response): void {
+    let clients = this.clients.get(runId);
+    if (!clients) {
+      clients = new Set();
+      this.clients.set(runId, clients);
+    }
+    clients.add(res);
+  }
+
+  removeClient(runId: string, res: Response): void {
+    const clients = this.clients.get(runId);
+    if (!clients) return;
+    clients.delete(res);
+    if (clients.size === 0) {
+      this.clients.delete(runId);
+    }
+  }
+
+  startCleanup(): void {
+    if (this.cleanupInterval) return;
+    this.cleanupInterval = setInterval(() => this.cleanup(), CLEANUP_INTERVAL_MS);
+  }
+
+  stopCleanup(): void {
+    if (this.cleanupInterval) {
+      clearInterval(this.cleanupInterval);
+      this.cleanupInterval = null;
+    }
+  }
+
+  shutdown(): void {
+    this.stopCleanup();
+    for (const record of this.runs.values()) {
+      if (record.status === 'running') {
+        record.context.cancelled = true;
+      }
+    }
+    this.clients.clear();
+  }
+
+  private emit(runId: string, event: WorkflowEvent): void {
+    const record = this.runs.get(runId);
+    if (record) {
+      record.events.push(event);
+    }
+
+    const clients = this.clients.get(runId);
+    if (!clients) return;
+
+    const data = `data: ${JSON.stringify(event)}\n\n`;
+    for (const res of clients) {
+      try {
+        res.write(data);
+      } catch {
+        clients.delete(res);
+      }
+    }
+
+    // Close SSE connections on terminal events to prevent resource leak
+    if (event.type === 'done') {
+      this.closeClients(runId);
+    }
+  }
+
+  private closeClients(runId: string): void {
+    const clients = this.clients.get(runId);
+    if (!clients) return;
+    for (const res of clients) {
+      try { res.end(); } catch {}
+    }
+    this.clients.delete(runId);
+  }
+
+  private cleanup(): void {
+    const now = Date.now();
+    for (const [id, record] of this.runs) {
+      if (record.status === 'running') continue;
+      const age = now - new Date(record.startedAt).getTime();
+      if (age > RUN_TTL_MS) {
+        this.runs.delete(id);
+        this.clients.delete(id);
+      }
+    }
+  }
+}