icdev 0.0.3__py3-none-any.whl

tools/dashboard/templates/forge_studio_workflow.html

@@ -0,0 +1,696 @@
+<!-- CUI // SP-CTI -->
+{% extends "base.html" %}
+{% block title %}Forge Studio — Workflow Builder{% endblock %}
+{% block content %}
+<style>
+/* ---- Layout ---- */
+.fsw-wrap{display:flex;flex-direction:column;height:calc(100vh - 56px);overflow:hidden}
+.fsw-header{display:flex;align-items:center;gap:16px;padding:12px 20px;background:#1e293b;border-bottom:1px solid #334155}
+.fsw-header .fsw-back{color:#94a3b8;text-decoration:none;font-size:18px}
+.fsw-header .fsw-back:hover{color:#e2e8f0}
+.fsw-header h1{font-size:20px;font-weight:700;color:#e2e8f0;margin:0}
+.fsw-header .fsw-app-select{margin-left:auto;display:flex;align-items:center;gap:8px}
+.fsw-header .fsw-app-select label{color:#94a3b8;font-size:12px}
+.fsw-header .fsw-app-select select{background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:6px;padding:6px 10px;font-size:13px;min-width:220px}
+
+/* Toolbar */
+.fsw-toolbar{display:flex;align-items:center;gap:8px;padding:8px 20px;background:#1e293b;border-bottom:1px solid #334155}
+.fsw-toolbar select{background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:6px;padding:6px 10px;font-size:12px;min-width:180px}
+.fsw-toolbar label{color:#94a3b8;font-size:12px}
+.fsw-btn{padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid #334155;background:#0f172a;color:#e2e8f0;transition:all .15s}
+.fsw-btn:hover{border-color:#3b82f6;color:#3b82f6}
+.fsw-btn-primary{background:#3b82f6;color:#fff;border-color:#3b82f6}
+.fsw-btn-primary:hover{background:#2563eb;border-color:#2563eb;color:#fff}
+.fsw-btn-green{background:#22c55e;color:#fff;border-color:#22c55e}
+.fsw-btn-green:hover{background:#16a34a;border-color:#16a34a;color:#fff}
+.fsw-btn:disabled{opacity:.5;cursor:not-allowed}
+.fsw-toolbar .sep{width:1px;height:20px;background:#334155;margin:0 4px}
+
+/* 3-column body */
+.fsw-body{display:grid;grid-template-columns:200px 1fr 280px;flex:1;overflow:hidden}
+
+/* Left palette */
+.fsw-palette{background:#1e293b;border-right:1px solid #334155;overflow-y:auto;padding:12px}
+.fsw-palette h3{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin-bottom:10px;font-weight:600}
+.fsw-task-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#0f172a;border:1px solid #334155;border-radius:6px;margin-bottom:6px;cursor:grab;user-select:none;transition:all .12s;font-size:12px;color:#e2e8f0}
+.fsw-task-item:hover{border-color:#3b82f6;background:rgba(59,130,246,.08)}
+.fsw-task-item:active{cursor:grabbing;opacity:.7}
+.fsw-task-item .icon{font-size:16px;width:24px;text-align:center;flex-shrink:0}
+
+/* Center canvas */
+.fsw-canvas-area{display:flex;flex-direction:column;overflow:hidden;background:#0f172a}
+.fsw-canvas-container{flex:1;overflow:auto;position:relative}
+.fsw-canvas-container svg{display:block}
+.fsw-empty-canvas{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#475569;font-size:14px;gap:8px}
+.fsw-empty-canvas .hint{font-size:12px;color:#334155}
+
+/* Right properties */
+.fsw-props{background:#1e293b;border-left:1px solid #334155;overflow-y:auto;padding:0}
+.fsw-props-header{padding:12px 16px;border-bottom:1px solid #334155;position:sticky;top:0;background:#1e293b;z-index:2}
+.fsw-props-header h3{font-size:13px;font-weight:600;color:#e2e8f0;margin:0}
+.fsw-props-header .type-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600;background:#3b82f633;color:#3b82f6;margin-left:8px}
+.fsw-props-empty{padding:40px 20px;text-align:center;color:#475569;font-size:13px}
+.fsw-prop-group{padding:12px 16px;border-bottom:1px solid #334155}
+.fsw-prop-group label{display:block;font-size:11px;color:#94a3b8;margin-bottom:4px;font-weight:500}
+.fsw-prop-group input,.fsw-prop-group textarea,.fsw-prop-group select{width:100%;background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:6px;padding:7px 10px;font-size:12px;font-family:inherit;box-sizing:border-box}
+.fsw-prop-group input:focus,.fsw-prop-group textarea:focus{border-color:#3b82f6;outline:none}
+.fsw-prop-group textarea{min-height:120px;font-family:'Consolas','Monaco',monospace;resize:vertical}
+
+/* Dry-run slide-out */
+.fsw-slideout{position:fixed;top:0;right:0;width:420px;height:100vh;background:#1e293b;border-left:2px solid #334155;z-index:100;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column}
+.fsw-slideout.open{transform:translateX(0)}
+.fsw-slideout-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid #334155}
+.fsw-slideout-header h3{font-size:15px;color:#e2e8f0;margin:0}
+.fsw-slideout-close{background:none;border:none;color:#94a3b8;font-size:20px;cursor:pointer;padding:4px 8px}
+.fsw-slideout-close:hover{color:#e2e8f0}
+.fsw-slideout-body{flex:1;overflow-y:auto;padding:16px}
+.fsw-trace-step{padding:10px 12px;border-left:3px solid #334155;margin-bottom:8px;background:#0f172a;border-radius:0 6px 6px 0}
+.fsw-trace-step.success{border-left-color:#22c55e}
+.fsw-trace-step.failed{border-left-color:#ef4444}
+.fsw-trace-step.skipped{border-left-color:#f59e0b}
+.fsw-trace-step .step-name{font-size:13px;font-weight:600;color:#e2e8f0}
+.fsw-trace-step .step-type{font-size:11px;color:#94a3b8}
+.fsw-trace-step .step-dur{font-size:11px;color:#3b82f6;margin-top:4px}
+
+/* Toast messages */
+.fsw-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:10px 24px;border-radius:8px;font-size:13px;font-weight:500;z-index:200;pointer-events:none;opacity:0;transition:opacity .3s}
+.fsw-toast.show{opacity:1}
+.fsw-toast.success{background:#22c55e;color:#fff}
+.fsw-toast.error{background:#ef4444;color:#fff}
+.fsw-toast.warn{background:#f59e0b;color:#fff}
+
+/* Validation result */
+.fsw-validation{padding:12px 16px;margin:8px 20px;border-radius:8px;font-size:12px;display:none}
+.fsw-validation.valid{background:#22c55e1a;border:1px solid #22c55e44;color:#22c55e}
+.fsw-validation.invalid{background:#ef44441a;border:1px solid #ef444444;color:#ef4444}
+.fsw-validation ul{margin:6px 0 0 16px;padding:0}
+.fsw-validation li{margin-bottom:2px}
+</style>
+
+<div class="fsw-wrap">
+  <!-- Header -->
+  <div class="fsw-header">
+    <a href="/forge-studio" class="fsw-back">&larr; Forge Studio</a>
+    <h1>Workflow Builder</h1>
+    <div class="fsw-app-select">
+      <label>App:</label>
+      <select id="fswAppSelect" onchange="fswAppChanged()">
+        <option value="">Loading apps...</option>
+      </select>
+    </div>
+  </div>
+
+  <!-- Toolbar -->
+  <div class="fsw-toolbar">
+    <label>Template:</label>
+    <select id="fswTemplateSelect" onchange="fswLoadTemplate()">
+      <option value="">-- Blank --</option>
+    </select>
+    <div class="sep"></div>
+    <button class="fsw-btn" onclick="fswValidate()" title="Validate workflow DAG">Validate</button>
+    <button class="fsw-btn" onclick="fswDryRun()" title="Execute a dry run">Dry Run</button>
+    <div class="sep"></div>
+    <button class="fsw-btn fsw-btn-green" onclick="fswSave()" title="Save workflow to app">Save</button>
+  </div>
+
+  <!-- Validation banner -->
+  <div class="fsw-validation" id="fswValidation"></div>
+
+  <!-- 3-column body -->
+  <div class="fsw-body">
+    <!-- Left: Task Palette -->
+    <div class="fsw-palette">
+      <h3>Task Palette</h3>
+      <div id="fswPalette"></div>
+    </div>
+
+    <!-- Center: SVG Canvas -->
+    <div class="fsw-canvas-area">
+      <div class="fsw-canvas-container" id="fswCanvasContainer"
+           ondragover="event.preventDefault();event.dataTransfer.dropEffect='copy'"
+           ondrop="fswCanvasDrop(event)">
+        <div class="fsw-empty-canvas" id="fswEmptyState">
+          <span>Drag tasks from the palette to build your workflow</span>
+          <span class="hint">Or select a template from the toolbar</span>
+        </div>
+        <svg id="workflowCanvas" xmlns="http://www.w3.org/2000/svg" style="display:none"></svg>
+      </div>
+    </div>
+
+    <!-- Right: Properties Panel -->
+    <div class="fsw-props">
+      <div class="fsw-props-header">
+        <h3>Properties</h3>
+      </div>
+      <div id="fswPropsContent">
+        <div class="fsw-props-empty">Select a task node to view its properties</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Dry-run slideout -->
+<div class="fsw-slideout" id="fswSlideout">
+  <div class="fsw-slideout-header">
+    <h3>Dry Run Trace</h3>
+    <button class="fsw-slideout-close" onclick="fswCloseSlideout()">&times;</button>
+  </div>
+  <div class="fsw-slideout-body" id="fswSlideoutBody">
+    <p style="color:#94a3b8;font-size:13px">Running...</p>
+  </div>
+</div>
+
+<!-- Toast -->
+<div class="fsw-toast" id="fswToast"></div>
+
+{% raw %}<script>
+/* ============================================================
+   Forge Studio Workflow Builder — DAG Canvas
+   ============================================================ */
+
+// ---- State ----
+let fswSelectedApp = '';
+let fswNodes = [];         // {id, name, type, x, y, params:{}}
+let fswEdges = [];         // {from, to}
+let fswSelectedNode = null;
+let fswNextId = 1;
+let fswTemplates = [];
+
+const TASK_TYPES = [
+  { type: 'form',            icon: '\uD83D\uDCCB', label: 'Form' },
+  { type: 'manual_approval', icon: '\u2705',       label: 'Manual Approval' },
+  { type: 'http_check',      icon: '\uD83C\uDF10', label: 'HTTP Check' },
+  { type: 'dmn_evaluate',    icon: '\u2699\uFE0F', label: 'DMN Evaluate' },
+  { type: 'notify',          icon: '\uD83D\uDD14', label: 'Notify' },
+  { type: 'sql_query',       icon: '\uD83D\uDDC4\uFE0F', label: 'SQL Query' },
+  { type: 'noop',            icon: '\u23F8\uFE0F', label: 'No-Op' }
+];
+
+const NODE_W = 140;
+const NODE_H = 50;
+const H_GAP = 60;
+const V_GAP = 30;
+const PAD_X = 40;
+const PAD_Y = 40;
+
+// ---- Init ----
+(async function fswInit() {
+  // Build palette
+  const pal = document.getElementById('fswPalette');
+  pal.innerHTML = TASK_TYPES.map(t =>
+    `<div class="fsw-task-item" draggable="true"
+          ondragstart="fswDragStart(event,'${t.type}')">
+       <span class="icon">${t.icon}</span>
+       <span>${t.label}</span>
+     </div>`
+  ).join('');
+
+  // Load apps
+  try {
+    const r = await fetch('/api/forge-studio/apps');
+    const d = await r.json();
+    const sel = document.getElementById('fswAppSelect');
+    sel.innerHTML = '<option value="">-- Select an app --</option>';
+    (Array.isArray(d) ? d : d.apps || []).forEach(a => {
+      sel.innerHTML += `<option value="${a.id}" data-name="${a.name}">${a.name} (${a.id.slice(0,12)})</option>`;
+    });
+  } catch(e) { console.error('Failed to load apps', e); }
+
+  // Load templates
+  try {
+    const r = await fetch('/api/forge-studio/workflows/templates');
+    const d = await r.json();
+    fswTemplates = d.templates || d || [];
+    const sel = document.getElementById('fswTemplateSelect');
+    sel.innerHTML = '<option value="">-- Blank --</option>';
+    fswTemplates.forEach((t, i) => {
+      sel.innerHTML += `<option value="${i}">${t.name || t.template_name || ('Template ' + (i+1))}</option>`;
+    });
+  } catch(e) { console.error('Failed to load templates', e); }
+})();
+
+function fswAppChanged() {
+  const sel = document.getElementById('fswAppSelect');
+  fswSelectedApp = sel.value;
+}
+
+// ---- Drag & Drop ----
+function fswDragStart(ev, taskType) {
+  ev.dataTransfer.setData('text/plain', taskType);
+  ev.dataTransfer.effectAllowed = 'copy';
+}
+
+function fswCanvasDrop(ev) {
+  ev.preventDefault();
+  const taskType = ev.dataTransfer.getData('text/plain');
+  if (!taskType) return;
+  const tt = TASK_TYPES.find(t => t.type === taskType);
+  if (!tt) return;
+
+  const node = {
+    id: 'task-' + fswNextId++,
+    name: tt.label + ' ' + fswNextId,
+    type: taskType,
+    x: 0, y: 0,
+    params: {}
+  };
+
+  // Auto-connect to last node
+  if (fswNodes.length > 0) {
+    const last = fswNodes[fswNodes.length - 1];
+    fswEdges.push({ from: last.id, to: node.id });
+  }
+
+  fswNodes.push(node);
+  fswLayout();
+  fswRender();
+  fswSelectNode(node.id);
+}
+
+// ---- Template loading ----
+function fswLoadTemplate() {
+  const sel = document.getElementById('fswTemplateSelect');
+  const idx = sel.value;
+  if (idx === '') {
+    fswNodes = [];
+    fswEdges = [];
+    fswSelectedNode = null;
+    fswNextId = 1;
+    fswRender();
+    return;
+  }
+  const tmpl = fswTemplates[parseInt(idx)];
+  if (!tmpl) return;
+
+  fswNodes = [];
+  fswEdges = [];
+  fswSelectedNode = null;
+  fswNextId = 1;
+
+  const tasks = tmpl.tasks || tmpl.tasks_json || [];
+  const edges = tmpl.edges || tmpl.edges_json || [];
+
+  tasks.forEach(t => {
+    const node = {
+      id: t.id || ('task-' + fswNextId++),
+      name: t.name || t.label || t.id || ('Task ' + fswNextId),
+      type: t.type || t.task_type || 'noop',
+      x: 0, y: 0,
+      params: t.params || t.config || {}
+    };
+    fswNodes.push(node);
+    const numId = parseInt(node.id.replace('task-', ''));
+    if (numId >= fswNextId) fswNextId = numId + 1;
+  });
+
+  edges.forEach(e => {
+    fswEdges.push({ from: e.from || e.source, to: e.to || e.target });
+  });
+
+  fswLayout();
+  fswRender();
+  fswShowToast('Template loaded', 'success');
+}
+
+// ---- Topological layout (left to right) ----
+function fswLayout() {
+  if (fswNodes.length === 0) return;
+
+  // Build adjacency + in-degree
+  const adj = {};
+  const inDeg = {};
+  fswNodes.forEach(n => { adj[n.id] = []; inDeg[n.id] = 0; });
+  fswEdges.forEach(e => {
+    if (adj[e.from]) adj[e.from].push(e.to);
+    if (inDeg[e.to] !== undefined) inDeg[e.to]++;
+  });
+
+  // Kahn's algorithm — assign layers
+  const layers = [];
+  const layerOf = {};
+  const queue = [];
+  fswNodes.forEach(n => { if (inDeg[n.id] === 0) queue.push(n.id); });
+
+  while (queue.length > 0) {
+    const batch = queue.splice(0, queue.length);
+    const layerIdx = layers.length;
+    layers.push(batch);
+    batch.forEach(nid => {
+      layerOf[nid] = layerIdx;
+      (adj[nid] || []).forEach(child => {
+        inDeg[child]--;
+        if (inDeg[child] === 0) queue.push(child);
+      });
+    });
+  }
+
+  // Handle any unvisited nodes (cycles) — put in last layer
+  fswNodes.forEach(n => {
+    if (layerOf[n.id] === undefined) {
+      if (layers.length === 0) layers.push([]);
+      layers[layers.length - 1].push(n.id);
+      layerOf[n.id] = layers.length - 1;
+    }
+  });
+
+  // Position: left-to-right layers
+  layers.forEach((layer, li) => {
+    layer.forEach((nid, ni) => {
+      const node = fswNodes.find(n => n.id === nid);
+      if (node) {
+        node.x = PAD_X + li * (NODE_W + H_GAP);
+        node.y = PAD_Y + ni * (NODE_H + V_GAP);
+      }
+    });
+  });
+}
+
+// ---- Render SVG ----
+function fswRender() {
+  const svg = document.getElementById('workflowCanvas');
+  const empty = document.getElementById('fswEmptyState');
+
+  if (fswNodes.length === 0) {
+    svg.style.display = 'none';
+    empty.style.display = 'flex';
+    fswRenderProps();
+    return;
+  }
+
+  empty.style.display = 'none';
+  svg.style.display = 'block';
+
+  // Compute SVG size
+  let maxX = 0, maxY = 0;
+  fswNodes.forEach(n => {
+    if (n.x + NODE_W + PAD_X > maxX) maxX = n.x + NODE_W + PAD_X;
+    if (n.y + NODE_H + PAD_Y > maxY) maxY = n.y + NODE_H + PAD_Y;
+  });
+  svg.setAttribute('width', Math.max(maxX, 400));
+  svg.setAttribute('height', Math.max(maxY, 300));
+
+  let html = '';
+
+  // Arrowhead marker
+  html += '<defs><marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">';
+  html += '<polygon points="0 0, 10 3.5, 0 7" fill="#475569"/>';
+  html += '</marker></defs>';
+
+  // Edges
+  fswEdges.forEach(e => {
+    const fromN = fswNodes.find(n => n.id === e.from);
+    const toN = fswNodes.find(n => n.id === e.to);
+    if (!fromN || !toN) return;
+    const x1 = fromN.x + NODE_W;
+    const y1 = fromN.y + NODE_H / 2;
+    const x2 = toN.x;
+    const y2 = toN.y + NODE_H / 2;
+    const cx1 = x1 + (x2 - x1) * 0.5;
+    const cx2 = x2 - (x2 - x1) * 0.5;
+    html += `<path d="M${x1},${y1} C${cx1},${y1} ${cx2},${y2} ${x2},${y2}" fill="none" stroke="#475569" stroke-width="2" marker-end="url(#arrowhead)"/>`;
+  });
+
+  // Nodes
+  fswNodes.forEach(n => {
+    const isSelected = fswSelectedNode === n.id;
+    const strokeColor = isSelected ? '#3b82f6' : '#334155';
+    const strokeW = isSelected ? 2.5 : 1.5;
+    const tt = TASK_TYPES.find(t => t.type === n.type);
+    const icon = tt ? tt.icon : '\u2753';
+
+    html += `<g class="fsw-svg-node" data-id="${n.id}" onclick="fswSelectNode('${n.id}')" style="cursor:pointer">`;
+    html += `<rect x="${n.x}" y="${n.y}" width="${NODE_W}" height="${NODE_H}" rx="8" ry="8" fill="#1e293b" stroke="${strokeColor}" stroke-width="${strokeW}"/>`;
+    // Icon
+    html += `<text x="${n.x + 12}" y="${n.y + NODE_H/2 + 1}" font-size="14" dominant-baseline="middle" fill="#94a3b8">${icon}</text>`;
+    // Name (truncated)
+    const dispName = n.name.length > 12 ? n.name.slice(0, 11) + '\u2026' : n.name;
+    html += `<text x="${n.x + 30}" y="${n.y + 20}" font-size="11" font-weight="600" fill="#e2e8f0">${fswEscSvg(dispName)}</text>`;
+    // Type
+    html += `<text x="${n.x + 30}" y="${n.y + 35}" font-size="9" fill="#94a3b8">${fswEscSvg(n.type)}</text>`;
+    html += '</g>';
+  });
+
+  svg.innerHTML = html;
+  fswRenderProps();
+}
+
+function fswEscSvg(s) {
+  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+
+// ---- Node selection ----
+function fswSelectNode(nodeId) {
+  fswSelectedNode = nodeId;
+  fswRender();
+}
+
+// ---- Properties panel ----
+function fswRenderProps() {
+  const container = document.getElementById('fswPropsContent');
+  const header = document.querySelector('.fsw-props-header h3');
+
+  if (!fswSelectedNode) {
+    header.innerHTML = 'Properties';
+    container.innerHTML = '<div class="fsw-props-empty">Select a task node to view its properties</div>';
+    return;
+  }
+
+  const node = fswNodes.find(n => n.id === fswSelectedNode);
+  if (!node) {
+    container.innerHTML = '<div class="fsw-props-empty">Node not found</div>';
+    return;
+  }
+
+  const tt = TASK_TYPES.find(t => t.type === node.type);
+  header.innerHTML = `${tt ? tt.icon : ''} ${fswEscSvg(node.name)} <span class="type-badge">${fswEscSvg(node.type)}</span>`;
+
+  let html = '';
+
+  // Name
+  html += '<div class="fsw-prop-group">';
+  html += '<label>Task Name</label>';
+  html += `<input type="text" id="fswPropName" value="${fswEscSvg(node.name)}" onchange="fswUpdateProp('name', this.value)"/>`;
+  html += '</div>';
+
+  // Type (read-only)
+  html += '<div class="fsw-prop-group">';
+  html += '<label>Task Type</label>';
+  html += `<input type="text" value="${fswEscSvg(node.type)}" readonly style="opacity:.7"/>`;
+  html += '</div>';
+
+  // ID (read-only)
+  html += '<div class="fsw-prop-group">';
+  html += '<label>Task ID</label>';
+  html += `<input type="text" value="${fswEscSvg(node.id)}" readonly style="opacity:.7"/>`;
+  html += '</div>';
+
+  // Connections
+  const incoming = fswEdges.filter(e => e.to === node.id).map(e => e.from);
+  const outgoing = fswEdges.filter(e => e.from === node.id).map(e => e.to);
+  html += '<div class="fsw-prop-group">';
+  html += '<label>Incoming</label>';
+  html += `<input type="text" value="${incoming.join(', ') || 'none'}" readonly style="opacity:.7"/>`;
+  html += '</div>';
+  html += '<div class="fsw-prop-group">';
+  html += '<label>Outgoing</label>';
+  html += `<input type="text" value="${outgoing.join(', ') || 'none'}" readonly style="opacity:.7"/>`;
+  html += '</div>';
+
+  // Connect-to dropdown
+  const otherNodes = fswNodes.filter(n => n.id !== node.id);
+  html += '<div class="fsw-prop-group">';
+  html += '<label>Add Edge To</label>';
+  html += '<select id="fswAddEdge" onchange="fswAddEdge(this.value)">';
+  html += '<option value="">-- select target --</option>';
+  otherNodes.forEach(n => {
+    html += `<option value="${n.id}">${fswEscSvg(n.name)} (${n.id})</option>`;
+  });
+  html += '</select>';
+  html += '</div>';
+
+  // Params JSON editor
+  html += '<div class="fsw-prop-group">';
+  html += '<label>Params (JSON)</label>';
+  html += `<textarea id="fswPropParams" onchange="fswUpdateParams(this.value)">${JSON.stringify(node.params || {}, null, 2)}</textarea>`;
+  html += '</div>';
+
+  // Delete button
+  html += '<div class="fsw-prop-group" style="border-bottom:none">';
+  html += `<button class="fsw-btn" style="color:#ef4444;border-color:#ef4444" onclick="fswDeleteNode('${node.id}')">Delete Task</button>`;
+  html += '</div>';
+
+  container.innerHTML = html;
+}
+
+function fswUpdateProp(key, val) {
+  const node = fswNodes.find(n => n.id === fswSelectedNode);
+  if (!node) return;
+  node[key] = val;
+  fswRender();
+}
+
+function fswUpdateParams(val) {
+  const node = fswNodes.find(n => n.id === fswSelectedNode);
+  if (!node) return;
+  try {
+    node.params = JSON.parse(val);
+  } catch(e) {
+    // leave unchanged on parse error
+  }
+}
+
+function fswAddEdge(targetId) {
+  if (!targetId || !fswSelectedNode) return;
+  // Avoid duplicate
+  const exists = fswEdges.some(e => e.from === fswSelectedNode && e.to === targetId);
+  if (exists) return;
+  fswEdges.push({ from: fswSelectedNode, to: targetId });
+  fswLayout();
+  fswRender();
+}
+
+function fswDeleteNode(nodeId) {
+  fswNodes = fswNodes.filter(n => n.id !== nodeId);
+  fswEdges = fswEdges.filter(e => e.from !== nodeId && e.to !== nodeId);
+  if (fswSelectedNode === nodeId) fswSelectedNode = null;
+  fswLayout();
+  fswRender();
+}
+
+// ---- Build workflow payload ----
+function fswBuildPayload() {
+  return {
+    app_id: fswSelectedApp,
+    tasks: fswNodes.map(n => ({
+      id: n.id,
+      name: n.name,
+      type: n.type,
+      params: n.params || {}
+    })),
+    edges: fswEdges.map(e => ({ from: e.from, to: e.to }))
+  };
+}
+
+// ---- Validate ----
+async function fswValidate() {
+  if (fswNodes.length === 0) {
+    fswShowValidation(false, ['Workflow is empty — add at least one task.']);
+    return;
+  }
+  try {
+    const r = await fetch('/api/forge-studio/workflows/validate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(fswBuildPayload())
+    });
+    const d = await r.json();
+    const errors = d.errors || [];
+    const warnings = d.warnings || [];
+    if (errors.length === 0) {
+      const msgs = warnings.length > 0
+        ? ['Valid (with warnings)'].concat(warnings)
+        : ['Workflow is valid.'];
+      fswShowValidation(true, msgs);
+    } else {
+      fswShowValidation(false, errors.concat(warnings));
+    }
+  } catch(e) {
+    fswShowValidation(false, ['Request failed: ' + e.message]);
+  }
+}
+
+function fswShowValidation(valid, messages) {
+  const el = document.getElementById('fswValidation');
+  el.className = 'fsw-validation ' + (valid ? 'valid' : 'invalid');
+  el.style.display = 'block';
+  if (messages.length === 1) {
+    el.innerHTML = messages[0];
+  } else {
+    el.innerHTML = '<ul>' + messages.map(m => '<li>' + m + '</li>').join('') + '</ul>';
+  }
+  setTimeout(() => { el.style.display = 'none'; }, 8000);
+}
+
+// ---- Dry Run ----
+async function fswDryRun() {
+  if (fswNodes.length === 0) {
+    fswShowToast('Add tasks before running', 'warn');
+    return;
+  }
+  const slideout = document.getElementById('fswSlideout');
+  const body = document.getElementById('fswSlideoutBody');
+  slideout.classList.add('open');
+  body.innerHTML = '<p style="color:#94a3b8;font-size:13px">Executing dry run...</p>';
+
+  try {
+    const r = await fetch('/api/forge-studio/workflows/dry-run', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(fswBuildPayload())
+    });
+    const d = await r.json();
+    const trace = d.trace || d.steps || d.execution_trace || [];
+    if (trace.length === 0) {
+      body.innerHTML = '<p style="color:#94a3b8;font-size:13px">No trace steps returned.</p>';
+      if (d.error) {
+        body.innerHTML += `<p style="color:#ef4444;font-size:13px">${d.error}</p>`;
+      }
+      return;
+    }
+    body.innerHTML = trace.map(s => {
+      const status = s.status || 'success';
+      return `<div class="fsw-trace-step ${status}">
+        <div class="step-name">${fswEscSvg(s.task_name || s.name || s.task_id || '?')}</div>
+        <div class="step-type">${fswEscSvg(s.task_type || s.type || '')}</div>
+        ${s.duration_ms !== undefined ? '<div class="step-dur">' + s.duration_ms + 'ms</div>' : ''}
+        ${s.message ? '<div style="font-size:11px;color:#94a3b8;margin-top:4px">' + fswEscSvg(s.message) + '</div>' : ''}
+      </div>`;
+    }).join('');
+    if (d.total_duration_ms !== undefined) {
+      body.innerHTML += `<div style="padding:12px;color:#94a3b8;font-size:12px;border-top:1px solid #334155;margin-top:8px">Total: ${d.total_duration_ms}ms</div>`;
+    }
+  } catch(e) {
+    body.innerHTML = `<p style="color:#ef4444;font-size:13px">Request failed: ${e.message}</p>`;
+  }
+}
+
+function fswCloseSlideout() {
+  document.getElementById('fswSlideout').classList.remove('open');
+}
+
+// ---- Save ----
+async function fswSave() {
+  if (!fswSelectedApp) {
+    fswShowToast('Select an app first', 'warn');
+    return;
+  }
+  if (fswNodes.length === 0) {
+    fswShowToast('Add tasks before saving', 'warn');
+    return;
+  }
+  try {
+    const r = await fetch('/api/forge-studio/workflows', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(fswBuildPayload())
+    });
+    const d = await r.json();
+    if (d.status === 'success' || d.id || d.workflow_id) {
+      fswShowToast('Workflow saved', 'success');
+    } else {
+      fswShowToast(d.error || 'Save failed', 'error');
+    }
+  } catch(e) {
+    fswShowToast('Save failed: ' + e.message, 'error');
+  }
+}
+
+// ---- Toast ----
+function fswShowToast(msg, type) {
+  const el = document.getElementById('fswToast');
+  el.textContent = msg;
+  el.className = 'fsw-toast ' + (type || 'success') + ' show';
+  setTimeout(() => { el.classList.remove('show'); }, 3000);
+}
+</script>{% endraw %}
+{% endblock %}