loopengine 0.2.2 → 0.3.1

package/dist/web/agents-config-page.js

@@ -49,8 +49,20 @@ export const agentsConfigPageHtml = `<!doctype html>
   form.add-source .schedule-when input[type="number"] { width: 80px; }
   form.add-source .schedule-when select, form.add-source .schedule-when input[type="datetime-local"] { width: auto; }
   .workflow-card { margin-bottom: 10px; }
-  .workflow-steps { margin: 0; padding-left: 20px; font-size: 13px; }
-  .workflow-steps li { margin: 3px 0; }
+  .workflow-steps-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; margin: 6px 0 0; padding: 8px 10px; border-radius: 6px; background: var(--le-surface, #f6f7f9); }
+  .workflow-params { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
+  .workflow-params[hidden] { display: none; }
+  .workflow-editor[hidden] { display: none; }
+  .workflow-hooks[hidden] { display: none; }
+  .hook-custom[hidden] { display: none; }
+  .workflow-hook { border-top: 1px solid var(--le-line, #e5e7eb); padding: 8px 0; }
+  .hook-url { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; margin: 6px 0; border-radius: 6px; background: var(--le-surface, #f6f7f9); font-size: 13px; }
+  .hook-url input { font-family: var(--le-mono, monospace); font-size: 12.5px; }
+  .workflow-param-rows { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
+  .workflow-param-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
+  .workflow-param-row .wp-name { width: 160px; font-family: var(--le-mono, monospace); }
+  .workflow-param-row .wp-desc { flex: 1; min-width: 200px; }
+  .workflow-param { display: flex; flex-direction: column; gap: 3px; font-size: 12px; min-width: 180px; }
   .advanced-part { font-size: 17px; font-weight: 600; margin: 28px 0 12px; padding-top: 16px; border-top: 1px solid var(--line); }
   .advanced-part#advanced-tools { margin-top: 0; padding-top: 0; border-top: 0; }
   .approvals-nudge { border: 1px solid var(--warn); background: var(--warn-soft); color: var(--ink); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 24px; font-size: 13px; }
@@ -192,6 +204,9 @@ export const agentsConfigPageHtml = `<!doctype html>
     max-width: 480px;
   }
   form.add-source label { font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
+  form.add-source label[hidden] { display: none; }
+  .schedule-notify { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; cursor: pointer; }
+  .schedule-notify input { width: auto; margin: 0; }
   form.add-source input, form.add-source select, form.add-source textarea { width: 100%; }
   form.add-source textarea { font-family: ui-monospace, monospace; min-height: 60px; }
   /* Overrides form.add-source's shared max-width/textarea defaults for
@@ -678,7 +693,7 @@ ${consoleShellScript}
     return workflows.map(function (w) {
       var s = w.schedule;
       var state = !s
-        ? (w.trigger.kind === 'schedule' ? '<span class="hint">no schedule found</span>' : '<span class="hint">started when asked</span>')
+        ? '<span class="hint">' + escapeHtml(w.trigger) + '</span>'
         : s.waiting
           ? '<span class="le-pill ask">Waiting for a decision</span>'
           : s.status === 'paused'
@@ -686,53 +701,337 @@ ${consoleShellScript}
             : s.status === 'running'
               ? '<span class="le-pill accent">Running</span>'
               : '<span class="le-pill good">On</span>' + (s.nextRunAt ? ' <span class="hint">next ' + escapeHtml(new Date(s.nextRunAt).toLocaleString()) + '</span>' : '');
-      var steps = (w.steps || []).map(function (st) {
-        var mark = st.kind === 'ask' ? ' <span class="le-pill accent">Asks you</span>' : st.kind === 'approval' ? ' <span class="le-pill ask">You approve</span>' : '';
-        return '<li>' + escapeHtml(st.title) + (st.tool && st.tool !== 'system_ask_user' ? ' <code>' + escapeHtml(st.tool) + '</code>' : '') + mark + '</li>';
+      var paramNames = Object.keys(w.parameters || {});
+      var params = paramNames.map(function (p) {
+        var spec = w.parameters[p];
+        return '<label class="workflow-param">' + escapeHtml(p) + (spec.required ? '' : ' <span class="hint">(optional)</span>') +
+          '<input name="' + escapeHtml(p) + '"' + (spec.required ? ' required' : '') + ' placeholder="' + escapeHtml(spec.description || '') + '"></label>';
+      }).join('');
+      var scheduleCount = (w.schedules || []).filter(function (x) { return x.repeating; }).length;
+      var runs = (w.recentRuns || []).map(function (r) {
+        var pill = r.status === 'done' ? '<span class="le-pill good">Done</span>'
+          : r.status === 'error' ? '<span class="le-pill bad">Failed</span>'
+          : r.status === 'awaiting_approval' ? '<span class="le-pill ask">Waiting for a decision</span>'
+          : '<span class="le-pill accent">Running</span>';
+        var values = r.params ? Object.keys(r.params).map(function (k) { return escapeHtml(k) + ': ' + escapeHtml(r.params[k]); }).join(' ' + String.fromCharCode(183) + ' ') : '';
+        var outcome = r.status === 'error' ? (r.error || '') : (r.result || '');
+        return '<li>' + pill + ' <span class="hint">' + escapeHtml(new Date(r.started_at).toLocaleString()) + (r.source === 'api' ? ' ' + String.fromCharCode(183) + ' from an app' : r.source === 'schedule' ? ' ' + String.fromCharCode(183) + ' scheduled' + (r.task_name ? ' (' + escapeHtml(r.task_name) + ')' : '') : '') + '</span>' +
+          (values ? '<div class="hint">' + values + '</div>' : '') +
+          (outcome ? '<div class="schedule-result">' + escapeHtml(outcome) + '</div>' : '') + '</li>';
       }).join('');
       return '<div class="source workflow-card" data-workflow="' + escapeHtml(w.id) + '">' +
         '<div style="display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline">' +
-          '<strong>' + escapeHtml(w.name) + '</strong><span>' + state + '</span></div>' +
-        '<p class="hint" style="margin:4px 0 6px">' + escapeHtml(w.summary) + ' ' + String.fromCharCode(183) + ' ' + escapeHtml(w.trigger.description) + '</p>' +
-        '<ol class="workflow-steps">' + steps + '</ol>' +
+          '<strong>' + escapeHtml(w.title) + '</strong><span>' + state + '</span></div>' +
+        '<p class="hint" style="margin:4px 0 6px">' + escapeHtml(w.description) + (s ? ' ' + String.fromCharCode(183) + ' ' + escapeHtml(w.trigger) : '') + '</p>' +
+        '<details><summary class="hint">Steps <span>(the ' + escapeHtml(w.id) + ' skill)</span></summary><div class="workflow-steps-text">' + escapeHtml(w.steps) + '</div></details>' +
+        (params ? '<div class="workflow-params">' + params + '</div>' : '') +
+        (runs ? '<details class="workflow-runs"' + ((w.recentRuns || []).some(function (r) { return r.status === 'running' || r.status === 'awaiting_approval'; }) ? ' open' : '') + '><summary class="hint">Recent runs (' + w.recentRuns.length + ')</summary><ul class="schedule-history">' + runs + '</ul></details>' : '') +
         '<div style="display:flex;gap:6px;flex-wrap:wrap;margin-top:8px">' +
           '<button type="button" class="workflow-run">Run now</button>' +
-          (s ? '<a href="?tab=schedules" data-tab="schedules" class="hint" style="align-self:center">Schedule</a>' : '') +
+          (scheduleCount ? '<a href="?tab=schedules" data-tab="schedules" class="hint" style="align-self:center">' + (scheduleCount > 1 ? 'Schedules (' + scheduleCount + ')' : 'Schedule') + '</a>' : '') +
+          '<button type="button" class="workflow-edit">Edit</button>' +
+          '<button type="button" class="workflow-hooks-btn">Webhooks</button>' +
+          '<a href="?tab=skills" data-tab="skills" class="hint" style="align-self:center">Edit steps</a>' +
           '<button type="button" class="delete-btn workflow-forget">Forget</button>' +
-        '</div><div class="hint workflow-result"></div></div>';
+        '</div><div class="hint workflow-result"></div><div class="workflow-editor" hidden></div><div class="workflow-hooks" hidden></div></div>';
     }).join('') + '<p class="hint" style="margin:6px 0 0"><a href="/workflows/new">Describe another workflow</a></p>';
   }
 
+  var workflowsRefreshTimer = null;
+  var workflowsById = {};
+  // Set while a workflow's editor is open, so the running-run refresh
+  // doesn't redraw the card under someone typing.
+  var workflowEditing = false;
+
   function loadWorkflowsSection(name) {
     var el = detail.querySelector('#workflowsContent');
     if (!el) return;
+    if (workflowsRefreshTimer) { clearTimeout(workflowsRefreshTimer); workflowsRefreshTimer = null; }
     fetchJsonRetryOnce('/agents/' + encodeURIComponent(name) + '/workflows').then(function (r) {
       if (currentName !== name) return;
       if (!r.ok) { el.innerHTML = '<p class="error">Could not load workflows: ' + escapeHtml(r.body.error || 'unknown error') + '</p>'; return; }
-      el.innerHTML = renderWorkflowsHtml(name, r.body.workflows || []);
+      var workflows = r.body.workflows || [];
+      workflowsById = {};
+      workflows.forEach(function (w) { workflowsById[w.id] = w; });
+      el.innerHTML = renderWorkflowsHtml(name, workflows);
       var cards = el.querySelectorAll('.workflow-card');
       for (var i = 0; i < cards.length; i++) wireWorkflowCard(name, cards[i]);
+      // Keep a running run's status current while the Overview is open.
+      var running = workflows.some(function (w) { return (w.recentRuns || []).some(function (x) { return x.status === 'running'; }); });
+      if (running && currentTab === 'overview') workflowsRefreshTimer = setTimeout(function () { if (!workflowEditing) loadWorkflowsSection(name); }, 3000);
+    });
+  }
+
+  // ---- The workflow editor: how a workflow's runs start. Its steps are
+  // the skill body, edited on the Skills tab.
+  function workflowParamRowHtml(pname, spec) {
+    return '<div class="workflow-param-row">' +
+      '<input class="wp-name" aria-label="Parameter name" placeholder="order_number" value="' + escapeHtml(pname || '') + '">' +
+      '<input class="wp-desc" aria-label="What it is" placeholder="What it is, e.g. The order to check" value="' + escapeHtml((spec && spec.description) || '') + '">' +
+      '<label class="http-tool-inline-label"><input type="checkbox" class="wp-required"' + (spec && spec.required ? ' checked' : '') + '> Required</label>' +
+      '<button type="button" class="delete-btn wp-remove">Remove</button></div>';
+  }
+
+  function workflowEditorHtml(w) {
+    var rows = Object.keys(w.parameters || {}).map(function (p) { return workflowParamRowHtml(p, w.parameters[p]); }).join('');
+    return '<form class="add-source workflow-editor-form" style="margin-top:10px">' +
+      '<label>Title<input name="title" maxlength="120" value="' + escapeHtml(w.title) + '"></label>' +
+      '<label>Start message <span class="hint">(what each run begins with; $name puts in a parameter&#39;s value)</span>' +
+        '<textarea name="start_message" maxlength="4000" required>' + escapeHtml(w.startMessage) + '</textarea></label>' +
+      '<label>When it runs <span class="hint">(in words, for people; the timing itself is its schedule)</span><input name="trigger" maxlength="200" value="' + escapeHtml(w.trigger) + '"></label>' +
+      '<div class="body-field">Parameters <span class="hint">(values a run is given; apps send them as params)</span>' +
+        '<div class="workflow-param-rows">' + rows + '</div>' +
+        '<button type="button" class="wp-add" style="align-self:flex-start">Add parameter</button></div>' +
+      '<p class="hint workflow-editor-check" style="margin:0"></p>' +
+      '<div style="display:flex;gap:8px"><button type="submit" class="primary">Save</button><button type="button" class="wp-cancel">Cancel</button></div>' +
+      '<div class="hint workflow-editor-result"></div></form>';
+  }
+
+  // Placeholders used in the start message or steps that no parameter
+  // declares, and declared parameters nothing uses.
+  function workflowPlaceholderCheck(w, form) {
+    var used = {};
+    var pattern = new RegExp('[$]([a-z_][a-z0-9_]*)', 'g');
+    var text = form.querySelector('[name="start_message"]').value + ' ' + (w.steps || '');
+    var m;
+    while ((m = pattern.exec(text))) used[m[1]] = true;
+    var declared = {};
+    var names = form.querySelectorAll('.wp-name');
+    for (var i = 0; i < names.length; i++) if (names[i].value.trim()) declared[names[i].value.trim()] = true;
+    var notes = [];
+    var missing = Object.keys(used).filter(function (n) { return !declared[n]; });
+    var unused = Object.keys(declared).filter(function (n) { return !used[n]; });
+    if (missing.length) notes.push('Uses ' + missing.map(function (n) { return '$' + n; }).join(', ') + ', which ' + (missing.length > 1 ? 'aren' : 'isn') + String.fromCharCode(8217) + 't a parameter: add ' + (missing.length > 1 ? 'them' : 'it') + ', or the text stays as written.');
+    if (unused.length) notes.push(unused.join(', ') + ' ' + (unused.length > 1 ? 'aren' : 'isn') + String.fromCharCode(8217) + 't used in the start message or steps: its value is passed as an input.');
+    form.querySelector('.workflow-editor-check').textContent = notes.join(' ');
+  }
+
+  function openWorkflowEditor(name, card) {
+    var w = workflowsById[card.dataset.workflow];
+    var box = card.querySelector('.workflow-editor');
+    if (!w || !box) return;
+    workflowEditing = true;
+    box.innerHTML = workflowEditorHtml(w);
+    box.hidden = false;
+    var form = box.querySelector('form');
+    var rows = form.querySelector('.workflow-param-rows');
+    var result = form.querySelector('.workflow-editor-result');
+    function check() { workflowPlaceholderCheck(w, form); }
+    function close() { workflowEditing = false; box.hidden = true; box.innerHTML = ''; }
+    rows.addEventListener('click', function (ev) {
+      if (ev.target.classList.contains('wp-remove')) { ev.target.closest('.workflow-param-row').remove(); check(); }
+    });
+    form.addEventListener('input', check);
+    form.querySelector('.wp-add').addEventListener('click', function () {
+      rows.insertAdjacentHTML('beforeend', workflowParamRowHtml('', null));
+      rows.lastElementChild.querySelector('.wp-name').focus();
+    });
+    form.querySelector('.wp-cancel').addEventListener('click', close);
+    form.addEventListener('submit', function (ev) {
+      ev.preventDefault();
+      var parameters = {};
+      var problem = '';
+      var list = rows.querySelectorAll('.workflow-param-row');
+      for (var i = 0; i < list.length; i++) {
+        var pname = list[i].querySelector('.wp-name').value.trim();
+        if (!pname) continue;
+        if (!/^[a-z_][a-z0-9_]*$/.test(pname)) { problem = 'Parameter "' + pname + '": use lowercase letters, digits and _, starting with a letter, e.g. order_number.'; break; }
+        if (parameters[pname]) { problem = 'Parameter "' + pname + '" is listed twice.'; break; }
+        parameters[pname] = { description: list[i].querySelector('.wp-desc').value.trim(), required: list[i].querySelector('.wp-required').checked };
+      }
+      if (problem) { result.textContent = problem; return; }
+      result.textContent = 'Saving' + String.fromCharCode(8230);
+      fetchJsonRetryOnce('/agents/' + encodeURIComponent(name) + '/workflows/' + encodeURIComponent(w.id), {
+        method: 'PUT', headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ title: form.title.value, start_message: form.start_message.value, trigger: form.trigger.value, parameters: parameters }),
+      }).then(function (r) {
+        if (!r.ok) { result.textContent = r.body.error || 'Could not save'; return; }
+        workflowEditing = false;
+        loadWorkflowsSection(name);
+      });
     });
+    check();
+    form.title.focus();
+  }
+
+  // ---- A workflow's webhook triggers (core/workflow-triggers.ts): secret
+  // URLs an outside service posts its events to, to start a run.
+  var HOOK_OUTCOMES = {
+    started: ['good', 'Started a run'], filtered: ['', 'Skipped by the filter'], duplicate: ['', 'A retry, skipped'],
+    busy: ['', 'Already running'], rejected: ['bad', 'Signature check failed'], invalid: ['bad', 'Couldn' + String.fromCharCode(8217) + 't start'], error: ['bad', 'Failed'],
+  };
+  var HOOK_SENDERS = { stripe: 'Stripe', github: 'GitHub', shopify: 'Shopify', standard: 'Standard Webhooks' };
+
+  function hookRowHtml(t) {
+    var last = (t.deliveries || []).slice(0, 3).map(function (d) {
+      var o = HOOK_OUTCOMES[d.outcome] || ['', d.outcome];
+      return '<li><span class="le-pill ' + o[0] + '">' + escapeHtml(o[1]) + '</span> <span class="hint">' + escapeHtml(new Date(d.at).toLocaleString()) + '</span>' +
+        (d.detail ? '<div class="schedule-result">' + escapeHtml(d.detail) + '</div>' : '') + '</li>';
+    }).join('');
+    var rules = [];
+    if (t.verify) rules.push(t.verify.sender === 'custom'
+      ? 'checks the signature in ' + escapeHtml(t.verify.header) + ' (' + escapeHtml(t.verify.algorithm || 'sha256') + ', ' + escapeHtml(t.verify.encoding || 'hex') + ')'
+      : 'checks the ' + escapeHtml(HOOK_SENDERS[t.verify.sender] || t.verify.sender) + ' signature');
+    if (t.filter) rules.push('only when ' + escapeHtml(t.filter.path) + ' is ' + t.filter.values.map(escapeHtml).join(' or '));
+    if (t.mapping) rules.push(Object.keys(t.mapping).map(function (p) { return escapeHtml(p) + ' ' + String.fromCharCode(8592) + ' ' + escapeHtml(t.mapping[p]); }).join(', '));
+    if (t.payload_param) rules.push('the whole payload goes to ' + escapeHtml(t.payload_param));
+    if (t.notify) rules.push('sends each result to you');
+    if (t.callback_url) rules.push('reports to ' + escapeHtml(t.callback_url));
+    return '<div class="workflow-hook" data-trigger="' + escapeHtml(t.trigger_id) + '">' +
+      '<div style="display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:baseline"><strong>' + escapeHtml(t.name) + '</strong>' +
+        '<code class="hint">/hooks/workflows/' + escapeHtml(t.token_hint) + '</code>' + (t.enabled ? '' : ' <span class="le-pill">Off</span>') + '</div>' +
+      (rules.length ? '<p class="hint" style="margin:2px 0">' + rules.join(' ' + String.fromCharCode(183) + ' ') + '</p>' : '') +
+      (last ? '<ul class="schedule-history">' + last + '</ul>' : '<p class="hint" style="margin:2px 0">No deliveries yet.</p>') +
+      '<div style="display:flex;gap:6px;flex-wrap:wrap;margin-top:4px">' +
+        '<button type="button" class="hook-toggle">' + (t.enabled ? 'Turn off' : 'Turn on') + '</button>' +
+        '<button type="button" class="hook-rotate">New URL</button>' +
+        '<button type="button" class="delete-btn hook-delete">Delete</button></div></div>';
+  }
+
+  function hookFormHtml(w) {
+    var params = Object.keys(w.parameters || {});
+    return '<form class="add-source hook-form" style="margin-top:10px">' +
+      '<h4 style="margin:0">Add a webhook</h4>' +
+      '<label>Name<input name="name" maxlength="80" placeholder="Stripe disputes"></label>' +
+      '<label>Check the sender' + String.fromCharCode(8217) + 's signature <span class="hint">(the URL itself is secret; this also proves who sent it)</span>' +
+        '<select name="sender"><option value="">No, the URL is enough</option><option value="stripe">Stripe</option><option value="github">GitHub</option><option value="shopify">Shopify</option>' +
+          '<option value="standard">Standard Webhooks (Clerk, Resend, OpenAI, Svix)</option><option value="custom">Another service: set it up myself</option></select></label>' +
+      '<div class="hook-custom body-field" hidden>How it signs <span class="hint">(from its webhook docs: an HMAC of the request body, in a header)</span>' +
+        '<div class="workflow-param-row">' +
+          '<input name="sig_header" placeholder="Header, e.g. Linear-Signature" style="flex:1">' +
+          '<select name="sig_algorithm" aria-label="Hash"><option value="sha256">SHA-256</option><option value="sha1">SHA-1</option><option value="sha512">SHA-512</option></select>' +
+          '<select name="sig_encoding" aria-label="Written as"><option value="hex">hex</option><option value="base64">base64</option></select>' +
+          '<input name="sig_prefix" placeholder="Prefix, e.g. sha256= (if any)" style="width:180px">' +
+        '</div></div>' +
+      '<label class="hook-secret" hidden>Signing secret <span class="hint">(from the sender' + String.fromCharCode(8217) + 's webhook settings)</span><input name="secret" autocomplete="off"></label>' +
+      '<label>Run only when <span class="hint">(optional: a field in the payload, and the values that start a run)</span>' +
+        '<div class="workflow-param-row"><input name="filter_path" placeholder="type"><input name="filter_values" placeholder="charge.dispute.created, charge.dispute.updated" style="flex:1"></div></label>' +
+      (params.length
+        ? '<div class="body-field">Parameters from the payload <span class="hint">(a dot path into its JSON, e.g. data.object.id)</span>' +
+            params.map(function (p) { return '<div class="workflow-param-row"><code class="wp-name">' + escapeHtml(p) + '</code><input name="map:' + escapeHtml(p) + '" placeholder="data.object.id" style="flex:1"></div>'; }).join('') + '</div>' +
+          '<label>Or give the whole payload to <select name="payload_param"><option value="">(none)</option>' + params.map(function (p) { return '<option>' + escapeHtml(p) + '</option>'; }).join('') + '</select></label>'
+        : '<p class="hint" style="margin:0">This workflow takes no parameters, so the payload isn' + String.fromCharCode(8217) + 't passed on. Add one in Edit to use it.</p>') +
+      '<label class="http-tool-inline-label"><input type="checkbox" name="notify"> Send each run' + String.fromCharCode(8217) + 's result to you through the agent' + String.fromCharCode(8217) + 's messaging app</label>' +
+      '<label>Post each run' + String.fromCharCode(8217) + 's result to <span class="hint">(optional, an https URL)</span><input name="callback_url" placeholder="https://example.com/hooks/loopengine"></label>' +
+      '<div style="display:flex;gap:8px"><button type="submit" class="primary">Make the URL</button></div>' +
+      '<div class="hint hook-form-result"></div></form>';
+  }
+
+  function hookUrlHtml(url) {
+    return '<div class="hook-url"><strong>Copy this URL now</strong> <span class="hint">(it' + String.fromCharCode(8217) + 's shown only once; make a new one if it' + String.fromCharCode(8217) + 's lost)</span>' +
+      '<input readonly value="' + escapeHtml(url) + '" onclick="this.select()"></div>';
+  }
+
+  function openWorkflowHooks(name, card) {
+    var w = workflowsById[card.dataset.workflow];
+    var box = card.querySelector('.workflow-hooks');
+    if (!w || !box) return;
+    if (!box.hidden) { box.hidden = true; box.innerHTML = ''; workflowEditing = false; return; }
+    workflowEditing = true;
+    box.hidden = false;
+    var base = '/agents/' + encodeURIComponent(name) + '/workflows/' + encodeURIComponent(w.id) + '/triggers';
+    function render(shownUrl) {
+      box.innerHTML = '<p class="hint" style="margin:0">Loading' + String.fromCharCode(8230) + '</p>';
+      fetchJsonRetryOnce(base).then(function (r) {
+        if (!r.ok) { box.innerHTML = '<p class="error">' + escapeHtml(r.body.error || 'Could not load webhooks') + '</p>'; return; }
+        var list = r.body.triggers || [];
+        box.innerHTML = '<h4 style="margin:10px 0 4px">Webhooks</h4>' +
+          '<p class="hint" style="margin:0 0 6px">A secret URL an outside service (Stripe, GitHub, a form, monitoring) posts its events to; each one starts a run.</p>' +
+          (shownUrl ? hookUrlHtml(shownUrl) : '') +
+          (list.length ? list.map(hookRowHtml).join('') : '') + hookFormHtml(w);
+        wire();
+      });
+    }
+    function act(id, path, opts) {
+      return fetchJsonRetryOnce(base + '/' + encodeURIComponent(id) + path, opts).then(function (r) {
+        if (!r.ok) { alert(r.body.error || 'That didn' + String.fromCharCode(8217) + 't work'); return; }
+        render(r.body.url);
+      });
+    }
+    function wire() {
+      var rows = box.querySelectorAll('.workflow-hook');
+      for (var i = 0; i < rows.length; i++) {
+        (function (row) {
+          var id = row.dataset.trigger;
+          row.querySelector('.hook-toggle').addEventListener('click', function (ev) {
+            act(id, '', { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ enabled: ev.currentTarget.textContent === 'Turn on' }) });
+          });
+          row.querySelector('.hook-rotate').addEventListener('click', function (ev) {
+            var btn = ev.currentTarget;
+            if (btn.dataset.confirming !== '1') { btn.dataset.confirming = '1'; btn.textContent = 'Click again: the old URL stops working'; return; }
+            act(id, '/rotate', { method: 'POST' });
+          });
+          row.querySelector('.hook-delete').addEventListener('click', function (ev) {
+            var btn = ev.currentTarget;
+            if (btn.dataset.confirming !== '1') { btn.dataset.confirming = '1'; btn.textContent = 'Click again to delete'; return; }
+            act(id, '', { method: 'DELETE' });
+          });
+        })(rows[i]);
+      }
+      var form = box.querySelector('.hook-form');
+      var secretField = form.querySelector('.hook-secret');
+      var customField = form.querySelector('.hook-custom');
+      form.sender.addEventListener('change', function () {
+        secretField.hidden = !form.sender.value;
+        customField.hidden = form.sender.value !== 'custom';
+      });
+      form.addEventListener('submit', function (ev) {
+        ev.preventDefault();
+        var result = form.querySelector('.hook-form-result');
+        var body = { name: form.name.value };
+        if (form.sender.value) body.verify = { sender: form.sender.value, secret: form.secret.value };
+        if (form.sender.value === 'custom') {
+          body.verify.header = form.sig_header.value.trim();
+          body.verify.algorithm = form.sig_algorithm.value;
+          body.verify.encoding = form.sig_encoding.value;
+          if (form.sig_prefix.value.trim()) body.verify.prefix = form.sig_prefix.value.trim();
+        }
+        var values = form.filter_values.value.split(',').map(function (v) { return v.trim(); }).filter(Boolean);
+        if (form.filter_path.value.trim() || values.length) body.filter = { path: form.filter_path.value.trim(), values: values };
+        var mapping = {};
+        var inputs = form.querySelectorAll('input[name^="map:"]');
+        for (var j = 0; j < inputs.length; j++) if (inputs[j].value.trim()) mapping[inputs[j].name.slice(4)] = inputs[j].value.trim();
+        if (Object.keys(mapping).length) body.mapping = mapping;
+        if (form.payload_param && form.payload_param.value) body.payload_param = form.payload_param.value;
+        if (form.notify.checked) body.notify = true;
+        if (form.callback_url.value.trim()) body.callback_url = form.callback_url.value.trim();
+        result.textContent = 'Making it' + String.fromCharCode(8230);
+        fetchJsonRetryOnce(base, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) }).then(function (r) {
+          if (!r.ok) { result.textContent = r.body.error || 'Could not make it'; return; }
+          render(r.body.url);
+        });
+      });
+    }
+    render(null);
   }
 
   function wireWorkflowCard(name, card) {
     var id = card.dataset.workflow;
     var result = card.querySelector('.workflow-result');
     var base = '/agents/' + encodeURIComponent(name) + '/workflows/' + encodeURIComponent(id);
+    card.querySelector('.workflow-edit').addEventListener('click', function () { openWorkflowEditor(name, card); });
+    card.querySelector('.workflow-hooks-btn').addEventListener('click', function () { openWorkflowHooks(name, card); });
     card.querySelector('.workflow-run').addEventListener('click', function (ev) {
       var btn = ev.currentTarget;
+      var params = {};
+      var inputs = card.querySelectorAll('.workflow-params input');
+      for (var i = 0; i < inputs.length; i++) {
+        var value = inputs[i].value.trim();
+        if (!value && inputs[i].required) { result.textContent = 'Fill in ' + inputs[i].name + ' first.'; inputs[i].focus(); return; }
+        if (value) params[inputs[i].name] = value;
+      }
       btn.disabled = true;
       result.textContent = 'Starting' + String.fromCharCode(8230);
-      fetchJsonRetryOnce(base + '/run', { method: 'POST' }).then(function (r) {
+      fetchJsonRetryOnce(base + '/run', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ params: params, source: 'console' }) }).then(function (r) {
         btn.disabled = false;
-        result.textContent = r.ok
-          ? 'Started. Questions and approvals go to this agent' + String.fromCharCode(8217) + 's messaging app; its result shows in the Schedules tab.'
-          : (r.body.error || 'Could not start it.');
+        if (!r.ok) { result.textContent = r.body.error || 'Could not start it.'; return; }
+        result.textContent = 'Started. Questions and approvals go to this agent' + String.fromCharCode(8217) + 's messaging app; the result shows under Recent runs.';
+        setTimeout(function () { loadWorkflowsSection(name); }, 800);
       });
     });
     card.querySelector('.workflow-forget').addEventListener('click', function (ev) {
       var btn = ev.currentTarget;
-      if (btn.dataset.confirming !== '1') { btn.dataset.confirming = '1'; btn.textContent = 'Click again (its skill, schedule and rules stay)'; return; }
+      if (btn.dataset.confirming !== '1') { btn.dataset.confirming = '1'; btn.textContent = 'Click again (its schedules are cancelled; the skill stays)'; return; }
       fetchJsonRetryOnce(base, { method: 'DELETE' }).then(function () { loadWorkflowsSection(name); });
     });
   }
@@ -1775,6 +2074,9 @@ ${consoleShellScript}
   // The workspace's time zone, from GET /agents/:name/schedules (an
   // older project adapter doesn't send it: then the browser's own).
   var schedulesTimeZone = null;
+  // The agent's workflows, from the same response: a new schedule can run
+  // one of them instead of a message.
+  var schedulesWorkflows = [];
 
   function fmtScheduleTime(iso) {
     var d = new Date(iso);
@@ -1807,8 +2109,16 @@ ${consoleShellScript}
         '<div class="schedule-result">' + escapeHtml(h.status === 'ok' ? (h.result || '') : (h.error || '')) + '</div></li>';
     }).join('');
     return '<tr>' +
-      '<td style="min-width:180px"><strong>' + escapeHtml(t.task_name || 'Untitled') + '</strong>' + (t.notify ? ' <span class="le-pill accent" title="Each result goes through this agent&#39;s notifier">notifies</span>' : '') +
-        '<div class="schedule-result hint">' + escapeHtml(t.message) + '</div></td>' +
+      '<td style="min-width:180px"><strong>' + escapeHtml(t.task_name || 'Untitled') + '</strong>' +
+        (t.workflow
+          ? '<div><span class="le-pill accent">Workflow</span> ' + escapeHtml(t.workflow.title) + '</div><div class="schedule-result hint">' + escapeHtml(t.workflow.start_message) +
+              (t.params ? '<br>' + Object.keys(t.params).map(function (k) { return escapeHtml(k) + ': ' + escapeHtml(t.params[k]); }).join(' ' + String.fromCharCode(183) + ' ') : '') + '</div>'
+          : t.workflow_missing
+            ? '<div><span class="le-pill bad">Workflow removed</span> <span class="hint">' + escapeHtml(t.workflow_id) + '</span></div>'
+            : '<div class="schedule-result hint">' + escapeHtml(t.message) + '</div>') +
+        (t.status !== 'cancelled' && t.status !== 'done'
+          ? '<label class="schedule-notify hint" title="Send each run&#39;s result through this agent&#39;s messaging connection (Messaging tab)"><input type="checkbox" class="schedule-notify-toggle" data-id="' + escapeHtml(t.task_id) + '"' + (t.notify ? ' checked' : '') + '> Send each result to you</label>'
+          : (t.notify ? '<div class="hint">Sent each result to you</div>' : '')) + '</td>' +
       '<td>' + scheduleText(t.schedule) + (t.next_run_at ? '<div class="hint">next ' + escapeHtml(fmtScheduleTime(t.next_run_at)) + '</div>' : '') + '</td>' +
       '<td><span class="le-pill ' + (SCHEDULE_PILLS[t.status] || 'neutral') + '">' + escapeHtml(SCHEDULE_LABELS[t.status] || t.status) + '</span>' +
         (t.status === 'awaiting_approval' ? '<div class="hint"><a href="#" class="schedule-to-approvals">Decide in Messaging</a></div>' : '') + '</td>' +
@@ -1823,11 +2133,22 @@ ${consoleShellScript}
     var list = tasks.length
       ? '<div class="le-table-wrap"><table><thead><tr><th>Task</th><th>When</th><th>Status</th><th>Last run</th><th></th></tr></thead><tbody>' + tasks.map(renderScheduleRow).join('') + '</tbody></table></div>'
       : '<p class="hint">Nothing scheduled yet.</p>';
-    return '<p class="muted" style="margin:0 0 20px">Messages this agent receives on a timer, like a cron job. Each run works like an app calling it over HTTP: an approval goes wherever the Messaging tab sends it, and with nowhere set, a call that needs approval is denied. The agent can also schedule its own tasks when asked in Chat (&ldquo;remind me tomorrow at 9&rdquo;); they appear here too.</p>' +
+    return '<p class="muted" style="margin:0 0 20px">Workflows and messages this agent runs on a timer, like a cron job. A workflow schedule starts with the workflow&#39;s start message as it is at each run. Each run works like an app calling it over HTTP: an approval goes wherever the Messaging tab sends it, and with nowhere set, a call that needs approval is denied. The agent can also schedule its own tasks when asked in Chat (&ldquo;remind me tomorrow at 9&rdquo;); they appear here too.</p>' +
       '<section><h3>Scheduled (' + active.length + ' active)</h3>' + list + '</section>' +
       '<section><h3>New schedule</h3>' +
         '<form class="add-source" id="scheduleForm" style="max-width:560px">' +
-          '<label>Message <span class="hint">(what the agent receives each time, as if someone typed it)</span><textarea name="message" required placeholder="Summarize yesterday&#39;s support tickets and post the summary."></textarea></label>' +
+          (schedulesWorkflows.length
+            ? '<div class="body-field">Runs' +
+                '<div class="schedule-when"><input type="radio" name="runs" value="workflow" id="runsWorkflow" checked><label for="runsWorkflow">A workflow</label>' +
+                  '<select name="workflow_id" aria-label="Workflow">' + schedulesWorkflows.map(function (w) {
+                    return '<option value="' + escapeHtml(w.id) + '">' + escapeHtml(w.title) + '</option>';
+                  }).join('') + '</select></div>' +
+                '<div class="workflow-params" id="scheduleParams" style="margin:0 0 4px 22px"></div>' +
+                '<p class="hint" style="margin:0 0 4px 22px">Each run starts with the workflow&#39;s start message as it is then, so changing the workflow changes what runs.</p>' +
+                '<div class="schedule-when"><input type="radio" name="runs" value="message" id="runsMessage"><label for="runsMessage">A message</label></div>' +
+              '</div>'
+            : '') +
+          '<label id="scheduleMessageField"' + (schedulesWorkflows.length ? ' hidden' : '') + '>Message <span class="hint">(what the agent receives each time, as if someone typed it)</span><textarea name="message" placeholder="Summarize yesterday&#39;s support tickets and post the summary."></textarea></label>' +
           '<div class="body-field">When' +
             '<div class="schedule-when"><input type="radio" name="when" value="every" id="whenEvery" checked><label for="whenEvery">Every</label>' +
               '<input type="number" name="everyN" value="1" min="1" aria-label="How many">' +
@@ -1845,6 +2166,15 @@ ${consoleShellScript}
         '</form></section>';
   }
 
+  // The New schedule form's parameter fields ("param:<name>"), filled ones only.
+  function scheduleParams(data) {
+    var params = {};
+    data.forEach(function (value, key) {
+      if (key.indexOf('param:') === 0 && String(value).trim()) params[key.slice(6)] = String(value).trim();
+    });
+    return params;
+  }
+
   // A date field's value ("2026-11-02T09:00") goes as it is, for the
   // server to read in the workspace's time zone; with no workspace time
   // zone known, it's the browser's.
@@ -1872,15 +2202,53 @@ ${consoleShellScript}
         request.then(function () { setTimeout(function () { loadSchedulesTab(name); }, action === 'run' ? 800 : 0); });
       });
     }
+    var notifyToggles = content.querySelectorAll('.schedule-notify-toggle');
+    for (var n = 0; n < notifyToggles.length; n++) {
+      notifyToggles[n].addEventListener('change', function (ev) {
+        var box = ev.currentTarget;
+        box.disabled = true;
+        fetchJsonRetryOnce('/schedules/' + encodeURIComponent(box.dataset.id) + '/notify', {
+          method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ notify: box.checked }),
+        }).then(function (r) {
+          box.disabled = false;
+          if (!r.ok) { box.checked = !box.checked; alert('Could not change it: ' + (r.body.error || 'unknown error')); }
+        });
+      });
+    }
     var toApprovals = content.querySelectorAll('.schedule-to-approvals');
     for (var j = 0; j < toApprovals.length; j++) {
       toApprovals[j].addEventListener('click', function (ev) { ev.preventDefault(); switchTab('messaging'); });
     }
     var form = content.querySelector('#scheduleForm');
     var result = content.querySelector('#scheduleResult');
+    var messageField = content.querySelector('#scheduleMessageField');
+    var runsRadios = content.querySelectorAll('input[name="runs"]');
+    var paramsBox = content.querySelector('#scheduleParams');
+    var workflowSelect = form.querySelector('select[name="workflow_id"]');
+    // One field per parameter of the chosen workflow.
+    function renderScheduleParams() {
+      if (!paramsBox || !workflowSelect) return;
+      var w = schedulesWorkflows.filter(function (x) { return x.id === workflowSelect.value; })[0];
+      var parameters = (w && w.parameters) || {};
+      paramsBox.innerHTML = Object.keys(parameters).map(function (p) {
+        return '<label class="workflow-param">' + escapeHtml(p) + (parameters[p].required ? '' : ' <span class="hint">(optional)</span>') +
+          '<input name="param:' + escapeHtml(p) + '" placeholder="' + escapeHtml(parameters[p].description || '') + '"></label>';
+      }).join('');
+    }
+    renderScheduleParams();
+    if (workflowSelect) workflowSelect.addEventListener('change', renderScheduleParams);
+    for (var k = 0; k < runsRadios.length; k++) {
+      runsRadios[k].addEventListener('change', function () {
+        var byMessage = form.querySelector('input[name="runs"]:checked').value === 'message';
+        messageField.hidden = !byMessage;
+        if (paramsBox) paramsBox.hidden = byMessage;
+      });
+    }
     form.addEventListener('submit', function (ev) {
       ev.preventDefault();
       var data = new FormData(form);
+      var runsWorkflow = data.get('runs') === 'workflow';
+      if (!runsWorkflow && !String(data.get('message') || '').trim()) { result.textContent = 'Write the message the agent receives.'; return; }
       var schedule;
       if (data.get('when') === 'once') {
         if (!data.get('runAt')) { result.textContent = 'Pick a date and time.'; return; }
@@ -1895,7 +2263,10 @@ ${consoleShellScript}
       result.textContent = 'Scheduling' + String.fromCharCode(8230);
       fetchJsonRetryOnce('/agents/' + encodeURIComponent(name) + '/schedules', {
         method: 'POST', headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ message: data.get('message'), schedule: schedule, task_name: data.get('task_name'), notify: data.get('notify') === 'on' }),
+        body: JSON.stringify(Object.assign(
+          runsWorkflow ? { workflow_id: data.get('workflow_id'), params: scheduleParams(data) } : { message: data.get('message') },
+          { schedule: schedule, task_name: data.get('task_name'), notify: data.get('notify') === 'on' }
+        )),
       }).then(function (r) {
         if (!r.ok) { result.textContent = r.body.error || 'Could not schedule'; return; }
         loadSchedulesTab(name);
@@ -1912,6 +2283,7 @@ ${consoleShellScript}
       if (!r.ok) throw new Error(r.body.error || 'request failed');
       var tasks = r.body.tasks || [];
       schedulesTimeZone = r.body.time_zone || null;
+      schedulesWorkflows = r.body.workflows || [];
       content.innerHTML = renderSchedulesHtml(tasks);
       wireSchedulesHandlers(name);
       leShell.setCount('schedules', tasks.filter(function (t) { return t.status !== 'cancelled' && t.status !== 'done'; }).length);

package/dist/web/skills-admin.d.ts

@@ -8,14 +8,10 @@ export interface SkillContent {
     body: string;
 }
 export declare function readSkill(agentName: string, skillId: string): SkillContent;
-/** Creates the skill if `skillId` doesn't exist yet, or overwrites it in
- * place if it does — same "this is the new content, not a diff to
- * merge" semantics as a PUT. Frontmatter is regenerated from `skillId`
- * (as `name`) and `description`; any *other* frontmatter keys a skill
- * might have (e.g. `paths` — see SkillFrontmatter's own doc comment) are
- * intentionally not preserved here, since this admin UI has no field for
- * them. A skill that needs those is still editable by hand — this just
- * isn't the tool for it. */
+/** Creates the skill if `skillId` doesn't exist yet, or replaces its
+ * description and body if it does. Its other front matter is kept: a
+ * workflow's start message, trigger and parameters (core/workflows.ts),
+ * `paths` and anything hand-written, none of which the Skills tab edits. */
 export declare function writeSkill(agentName: string, skillId: string, content: {
     description: string;
     body: string;

package/dist/web/skills-admin.js

@@ -9,10 +9,11 @@
 // this repo's own example agents actually uses. Read-only display of a
 // nested skill (via describeAgent's own skills list) still works fine —
 // only adding/editing/removing one through this UI is out of scope.
-import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { existsSync, readFileSync, rmSync } from 'node:fs';
 import { dirname, join } from 'node:path';
 import { parseSkillFile } from '../core/skillgarden/index.js';
 import { agentDir } from '../core/gateway-tools.js';
+import { writeSkillFile } from '../core/workflows.js';
 export class SkillInvalidIdError extends Error {
 }
 export class SkillNotFoundError extends Error {
@@ -43,20 +44,15 @@ export function readSkill(agentName, skillId) {
     const { frontmatter, body } = parseSkillFile(readFileSync(path, 'utf8'), skillId);
     return { id: skillId, description: frontmatter.description ?? '', body };
 }
-/** Creates the skill if `skillId` doesn't exist yet, or overwrites it in
- * place if it does — same "this is the new content, not a diff to
- * merge" semantics as a PUT. Frontmatter is regenerated from `skillId`
- * (as `name`) and `description`; any *other* frontmatter keys a skill
- * might have (e.g. `paths` — see SkillFrontmatter's own doc comment) are
- * intentionally not preserved here, since this admin UI has no field for
- * them. A skill that needs those is still editable by hand — this just
- * isn't the tool for it. */
+/** Creates the skill if `skillId` doesn't exist yet, or replaces its
+ * description and body if it does. Its other front matter is kept: a
+ * workflow's start message, trigger and parameters (core/workflows.ts),
+ * `paths` and anything hand-written, none of which the Skills tab edits. */
 export function writeSkill(agentName, skillId, content) {
     const path = skillFilePath(agentName, skillId);
     const description = content.description.replace(/\n/g, ' ').trim();
-    const frontmatter = `---\nname: ${skillId}\ndescription: ${JSON.stringify(description)}\n---\n\n`;
-    mkdirSync(dirname(path), { recursive: true });
-    writeFileSync(path, frontmatter + content.body.trim() + '\n');
+    const existing = existsSync(path) ? parseSkillFile(readFileSync(path, 'utf8'), skillId).frontmatter : {};
+    writeSkillFile(path, { ...existing, name: skillId, description }, content.body);
 }
 export function deleteSkill(agentName, skillId) {
     const path = skillFilePath(agentName, skillId);