SonAIengine
diff --git a/‎graph_tool_call/static/workflow_editor.html‎
Lines changed: 383 additions & 0 deletions b/‎graph_tool_call/static/workflow_editor.html‎
Lines changed: 383 additions & 0 deletions
@@ -0,0 +1,383 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Workflow Editor — graph-tool-call</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0d1117; color: #c9d1d9; min-height: 100vh; }
+
+  .header { padding: 16px 24px; border-bottom: 1px solid #21262d; display: flex; align-items: center; gap: 16px; }
+  .header h1 { font-size: 18px; font-weight: 600; color: #f0f6fc; }
+  .header .goal { flex: 1; }
+  .header input { background: #161b22; border: 1px solid #30363d; color: #c9d1d9; padding: 6px 12px; border-radius: 6px; font-size: 14px; width: 100%; }
+
+  .toolbar { padding: 8px 24px; border-bottom: 1px solid #21262d; display: flex; gap: 8px; align-items: center; }
+  .btn { background: #21262d; border: 1px solid #30363d; color: #c9d1d9; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; }
+  .btn:hover { background: #30363d; }
+  .btn-primary { background: #238636; border-color: #2ea043; color: #fff; }
+  .btn-primary:hover { background: #2ea043; }
+  .btn-danger { background: #da3633; border-color: #f85149; color: #fff; }
+  .btn-danger:hover { background: #f85149; }
+
+  .main { display: flex; height: calc(100vh - 100px); }
+
+  /* Left: flow canvas */
+  .canvas { flex: 1; padding: 32px; overflow: auto; }
+  .flow { display: flex; align-items: flex-start; gap: 0; min-width: max-content; }
+
+  .step-card {
+    background: #161b22; border: 2px solid #30363d; border-radius: 12px;
+    padding: 16px; min-width: 180px; max-width: 220px; cursor: grab;
+    position: relative; transition: border-color 0.2s, transform 0.2s;
+  }
+  .step-card:hover { border-color: #58a6ff; }
+  .step-card.dragging { opacity: 0.5; transform: scale(0.95); }
+  .step-card.drag-over { border-color: #3fb950; border-style: dashed; }
+  .step-card.primary { border-color: #f78166; }
+  .step-card .step-num { font-size: 11px; color: #8b949e; margin-bottom: 4px; }
+  .step-card .step-name { font-size: 15px; font-weight: 600; color: #f0f6fc; margin-bottom: 6px; word-break: break-all; }
+  .step-card .step-desc { font-size: 12px; color: #8b949e; line-height: 1.4; margin-bottom: 8px; }
+  .step-card .step-reason { font-size: 11px; color: #58a6ff; font-style: italic; }
+  .step-card .step-method { font-size: 10px; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-bottom: 6px; }
+  .step-card .step-method.GET { background: #1f6feb33; color: #58a6ff; }
+  .step-card .step-method.POST { background: #23863633; color: #3fb950; }
+  .step-card .step-method.PUT, .step-card .step-method.PATCH { background: #9e6a0333; color: #d29922; }
+  .step-card .step-method.DELETE { background: #da363333; color: #f85149; }
+  .step-card .remove-btn {
+    position: absolute; top: 6px; right: 8px; background: none; border: none;
+    color: #8b949e; cursor: pointer; font-size: 16px; line-height: 1;
+  }
+  .step-card .remove-btn:hover { color: #f85149; }
+
+  .arrow { display: flex; align-items: center; padding: 0 4px; color: #30363d; font-size: 24px; user-select: none; }
+
+  /* Right: tool panel + params */
+  .sidebar { width: 320px; border-left: 1px solid #21262d; display: flex; flex-direction: column; }
+  .sidebar-section { padding: 12px 16px; border-bottom: 1px solid #21262d; }
+  .sidebar-section h3 { font-size: 13px; color: #8b949e; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
+
+  .tool-list { flex: 1; overflow-y: auto; padding: 8px; }
+  .tool-item {
+    padding: 8px 12px; border-radius: 6px; cursor: pointer;
+    font-size: 13px; margin-bottom: 2px; transition: background 0.15s;
+  }
+  .tool-item:hover { background: #21262d; }
+  .tool-item .tool-name { font-weight: 500; color: #c9d1d9; }
+  .tool-item .tool-desc { font-size: 11px; color: #8b949e; margin-top: 2px; }
+
+  .tool-search { width: 100%; background: #0d1117; border: 1px solid #30363d; color: #c9d1d9; padding: 6px 10px; border-radius: 6px; font-size: 13px; margin-bottom: 8px; }
+
+  .param-editor { padding: 12px 16px; }
+  .param-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; font-size: 12px; }
+  .param-row input { flex: 1; background: #0d1117; border: 1px solid #30363d; color: #c9d1d9; padding: 4px 8px; border-radius: 4px; font-size: 12px; }
+  .param-row label { min-width: 60px; color: #8b949e; }
+
+  /* JSON modal */
+  .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100; justify-content: center; align-items: center; }
+  .modal.open { display: flex; }
+  .modal-content { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 24px; width: 600px; max-height: 80vh; overflow: auto; }
+  .modal-content h2 { font-size: 16px; margin-bottom: 12px; color: #f0f6fc; }
+  .modal-content textarea { width: 100%; height: 300px; background: #0d1117; border: 1px solid #30363d; color: #c9d1d9; padding: 12px; border-radius: 6px; font-family: monospace; font-size: 13px; resize: vertical; }
+  .modal-content .modal-btns { margin-top: 12px; display: flex; gap: 8px; justify-content: flex-end; }
+
+  .empty-state { text-align: center; padding: 64px 32px; color: #8b949e; }
+  .empty-state h2 { font-size: 20px; margin-bottom: 8px; color: #c9d1d9; }
+</style>
+</head>
+<body>
+
+<div class="header">
+  <h1>Workflow Editor</h1>
+  <div class="goal">
+    <input type="text" id="goalInput" placeholder="Workflow goal (e.g., process a refund)" />
+  </div>
+</div>
+
+<div class="toolbar">
+  <button class="btn" onclick="importJSON()">Import JSON</button>
+  <button class="btn" onclick="exportJSON()">Export JSON</button>
+  <button class="btn" onclick="copyJSON()">Copy to Clipboard</button>
+  <button class="btn btn-primary" onclick="loadFromAPI()">Load from API</button>
+  <span style="flex:1"></span>
+  <button class="btn btn-danger" onclick="clearAll()">Clear All</button>
+</div>
+
+<div class="main">
+  <div class="canvas" id="canvas">
+    <div class="flow" id="flow">
+      <div class="empty-state" id="emptyState">
+        <h2>No workflow steps</h2>
+        <p>Add tools from the sidebar, import JSON, or load from API</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="sidebar">
+    <div class="sidebar-section">
+      <h3>Available Tools</h3>
+      <input type="text" class="tool-search" id="toolSearch" placeholder="Search tools..." oninput="filterTools()" />
+    </div>
+    <div class="tool-list" id="toolList">
+      <div style="padding: 16px; color: #8b949e; font-size: 13px;">
+        Load workflow JSON to see available tools
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- JSON Modal -->
+<div class="modal" id="jsonModal">
+  <div class="modal-content">
+    <h2 id="modalTitle">Import JSON</h2>
+    <textarea id="jsonTextarea" spellcheck="false"></textarea>
+    <div class="modal-btns">
+      <button class="btn" onclick="closeModal()">Cancel</button>
+      <button class="btn btn-primary" id="modalAction" onclick="applyImport()">Import</button>
+    </div>
+  </div>
+</div>
+
+<script>
+let steps = [];
+let allTools = {};  // {name: {description, method, params}}
+let dragSrcIndex = null;
+
+// --- Rendering ---
+function render() {
+  const flow = document.getElementById('flow');
+  const empty = document.getElementById('emptyState');
+
+  if (steps.length === 0) {
+    flow.innerHTML = '';
+    flow.appendChild(empty);
+    empty.style.display = '';
+    return;
+  }
+
+  flow.innerHTML = '';
+  steps.forEach((step, i) => {
+    if (i > 0) {
+      const arrow = document.createElement('div');
+      arrow.className = 'arrow';
+      arrow.textContent = '→';
+      flow.appendChild(arrow);
+    }
+
+    const card = document.createElement('div');
+    card.className = 'step-card' + (step.reason === 'primary action' ? ' primary' : '');
+    card.draggable = true;
+    card.dataset.index = i;
+
+    const method = allTools[step.tool]?.method || '';
+    const desc = allTools[step.tool]?.description || '';
+    const truncDesc = desc.length > 80 ? desc.slice(0, 77) + '...' : desc;
+
+    card.innerHTML = `
+      <button class="remove-btn" onclick="removeStep(${i})" title="Remove">&times;</button>
+      <div class="step-num">Step ${i + 1}</div>
+      ${method ? `<span class="step-method ${method}">${method}</span>` : ''}
+      <div class="step-name">${step.tool}</div>
+      <div class="step-desc">${truncDesc}</div>
+      <div class="step-reason">${step.reason || ''}</div>
+    `;
+
+    // Drag events
+    card.addEventListener('dragstart', (e) => {
+      dragSrcIndex = i;
+      card.classList.add('dragging');
+      e.dataTransfer.effectAllowed = 'move';
+    });
+    card.addEventListener('dragend', () => {
+      card.classList.remove('dragging');
+      dragSrcIndex = null;
+      document.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over'));
+    });
+    card.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+      card.classList.add('drag-over');
+    });
+    card.addEventListener('dragleave', () => card.classList.remove('drag-over'));
+    card.addEventListener('drop', (e) => {
+      e.preventDefault();
+      card.classList.remove('drag-over');
+      if (dragSrcIndex !== null && dragSrcIndex !== i) {
+        const moved = steps.splice(dragSrcIndex, 1)[0];
+        steps.splice(i, 0, moved);
+        renumber();
+        render();
+      }
+    });
+
+    flow.appendChild(card);
+  });
+}
+
+function renumber() {
+  steps.forEach((s, i) => s.order = i + 1);
+}
+
+// --- Actions ---
+function removeStep(index) {
+  steps.splice(index, 1);
+  renumber();
+  render();
+}
+
+function addTool(toolName) {
+  steps.push({
+    order: steps.length + 1,
+    tool: toolName,
+    reason: steps.length === 0 ? 'primary action' : 'manually added',
+    params_from: {}
+  });
+  render();
+}
+
+function clearAll() {
+  if (steps.length > 0 && !confirm('Clear all steps?')) return;
+  steps = [];
+  render();
+}
+
+// --- Tool sidebar ---
+function renderToolList() {
+  const list = document.getElementById('toolList');
+  const names = Object.keys(allTools).sort();
+  if (names.length === 0) {
+    list.innerHTML = '<div style="padding:16px;color:#8b949e;font-size:13px;">No tools loaded</div>';
+    return;
+  }
+  list.innerHTML = names.map(name => {
+    const t = allTools[name];
+    const desc = (t.description || '').slice(0, 60);
+    return `<div class="tool-item" onclick="addTool('${name}')">
+      <div class="tool-name">${name}</div>
+      <div class="tool-desc">${desc}</div>
+    </div>`;
+  }).join('');
+}
+
+function filterTools() {
+  const q = document.getElementById('toolSearch').value.toLowerCase();
+  document.querySelectorAll('.tool-item').forEach(el => {
+    const name = el.querySelector('.tool-name').textContent.toLowerCase();
+    const desc = el.querySelector('.tool-desc').textContent.toLowerCase();
+    el.style.display = (name.includes(q) || desc.includes(q)) ? '' : 'none';
+  });
+}
+
+// --- JSON Import/Export ---
+function getWorkflowJSON() {
+  return JSON.stringify({
+    goal: document.getElementById('goalInput').value,
+    confidence: 'manual',
+    steps: steps,
+    tools: allTools
+  }, null, 2);
+}
+
+function exportJSON() {
+  document.getElementById('modalTitle').textContent = 'Export JSON';
+  document.getElementById('jsonTextarea').value = getWorkflowJSON();
+  document.getElementById('modalAction').textContent = 'Download';
+  document.getElementById('modalAction').onclick = downloadJSON;
+  document.getElementById('jsonModal').classList.add('open');
+}
+
+function downloadJSON() {
+  const blob = new Blob([document.getElementById('jsonTextarea').value], {type: 'application/json'});
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(blob);
+  a.download = 'workflow.json';
+  a.click();
+  closeModal();
+}
+
+function importJSON() {
+  document.getElementById('modalTitle').textContent = 'Import JSON';
+  document.getElementById('jsonTextarea').value = '';
+  document.getElementById('modalAction').textContent = 'Import';
+  document.getElementById('modalAction').onclick = applyImport;
+  document.getElementById('jsonModal').classList.add('open');
+}
+
+function applyImport() {
+  try {
+    const data = JSON.parse(document.getElementById('jsonTextarea').value);
+    if (data.goal) document.getElementById('goalInput').value = data.goal;
+    if (data.steps) steps = data.steps;
+    if (data.tools) {
+      allTools = data.tools;
+      renderToolList();
+    }
+    renumber();
+    render();
+    closeModal();
+  } catch (e) {
+    alert('Invalid JSON: ' + e.message);
+  }
+}
+
+function copyJSON() {
+  navigator.clipboard.writeText(getWorkflowJSON()).then(() => {
+    const btn = event.target;
+    btn.textContent = 'Copied!';
+    setTimeout(() => btn.textContent = 'Copy to Clipboard', 1500);
+  });
+}
+
+function closeModal() {
+  document.getElementById('jsonModal').classList.remove('open');
+}
+
+// --- Load from API ---
+async function loadFromAPI() {
+  const goal = document.getElementById('goalInput').value;
+  if (!goal) { alert('Enter a goal first'); return; }
+
+  const host = prompt('graph-tool-call server URL:', 'http://localhost:8000');
+  if (!host) return;
+
+  try {
+    const resp = await fetch(`${host}/workflow`, {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({goal, max_steps: 6})
+    });
+    const data = await resp.json();
+    if (data.steps) steps = data.steps;
+    if (data.tools) {
+      allTools = data.tools;
+      renderToolList();
+    }
+    renumber();
+    render();
+  } catch (e) {
+    alert('Failed to connect: ' + e.message);
+  }
+}
+
+// --- Init ---
+// Check URL params for initial data
+const params = new URLSearchParams(location.search);
+if (params.get('data')) {
+  try {
+    const data = JSON.parse(decodeURIComponent(params.get('data')));
+    if (data.goal) document.getElementById('goalInput').value = data.goal;
+    if (data.steps) steps = data.steps;
+    if (data.tools) { allTools = data.tools; renderToolList(); }
+  } catch (e) {}
+}
+
+render();
+
+// ESC to close modal
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') closeModal();
+});
+</script>
+</body>
+</html>