loopengine 0.1.94 → 0.1.97

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

@@ -26,6 +26,7 @@
 // concatenation, not a nested template literal, for the same
 // backtick/${}-escaping reason playground.ts's own header comment explains.
 import { devUiCss } from './dev-ui-styles.js';
+import { MESSAGING_ICONS } from './messaging-icons.js';
 import { consoleShellScript, consoleSidebarHtml } from './console-shell.js';
 export const agentsConfigPageHtml = `<!doctype html>
 <html lang="en">
@@ -46,7 +47,34 @@ export const agentsConfigPageHtml = `<!doctype html>
   form.add-source .schedule-when input[type="radio"] { width: auto; margin: 0; }
   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; }
+  .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; }
+  /* Permissions: Allow / Ask me / Never, switched in place and saved at once. */
+  .decision-switch { display: inline-flex; gap: 4px; flex-wrap: nowrap; }
+  .actauth-rules td:nth-child(3) { white-space: nowrap; width: 1%; }
+  .actauth-rules-full td:nth-child(3) { white-space: normal; width: auto; }
+  .actauth-rules-full td:nth-child(5), .actauth-rules-full td:nth-child(6) { white-space: nowrap; width: 1%; }
+  .actauth-rules td code { overflow-wrap: anywhere; }
+  .decision-switch button { min-width: 64px; padding: 5px 10px; white-space: nowrap; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 600; cursor: pointer; }
+  .decision-switch button:hover { border-color: var(--ink-faint); }
+  .decision-switch button[aria-pressed="true"] { color: var(--on-accent); }
+  .decision-switch button[aria-pressed="true"][data-decision="allow"] { background: var(--accent); border-color: var(--accent); }
+  .decision-switch button[aria-pressed="true"][data-decision="ask"] { background: var(--warn); border-color: var(--warn); }
+  .decision-switch button[aria-pressed="true"][data-decision="deny"] { background: var(--ink-muted); border-color: var(--ink-muted); }
+  .decision-switch.is-saving button { cursor: progress; opacity: 0.7; }
+  /* Messaging: one section per app; the primary one is outlined. */
+  .msg-conns { display: grid; gap: 10px; max-width: 720px; }
+  .msg-conn { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 0 14px; }
+  .msg-conn.is-primary { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
+  .msg-conn > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; cursor: pointer; }
+  .msg-conn-title { font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
+  .le-channel-icon { width: 18px; height: 18px; flex: none; }
+  .msg-conn-blurb { flex-basis: 100%; margin: 0; }
+  .msg-conn > form.add-source { border: 0; background: none; box-shadow: none; padding: 0 0 14px; margin: 0; }
   .env-desc { max-width: 340px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
   form.add-source.env-inline { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-width: 320px; }
   form.add-source.env-inline input, form.add-source.env-inline select { flex: 1 1 140px; width: auto; min-width: 0; }
@@ -533,7 +561,7 @@ ${consoleShellScript}
   // has no spec to repopulate an edit form from, so it just gets a blank
   // cell — not a button that would 404 the moment it's clicked.
   function renderLocalTools(tools) {
-    if (!tools.length) return '<p class="muted">No tools yet. Add one below, install an ability, or connect an integration.</p>';
+    if (!tools.length) return '<p class="muted">No tools yet. Install an ability, or add one below.</p>';
     var rows = tools.map(function (t) {
       var actions = t.httpToolEditable
         ? '<button type="button" class="edit-http-tool-btn" data-name="' + escapeHtml(t.name) + '">Edit</button>'
@@ -626,6 +654,76 @@ ${consoleShellScript}
   // Messaging and Schedules come from their own endpoints, so their
   // cards are filled in once those answer. Called after every render of
   // Overview, which is also re-rendered after edits.
+  // ---- Overview: the agent's workflows (web/workflow-admin.ts), added
+  // from "Describe a workflow": each with its trigger, its schedule's
+  // state, its steps (checkpoints marked) and Run now. ----
+
+  function renderWorkflowsHtml(name, workflows) {
+    if (!workflows.length) {
+      return '<p class="hint" style="margin:0">No workflows yet. <a href="/workflows/new">Describe a workflow</a>: say the steps and where you want to decide, and it' + String.fromCharCode(8217) + 's set up for you.</p>';
+    }
+    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>')
+        : s.waiting
+          ? '<span class="le-pill ask">Waiting for a decision</span>'
+          : s.status === 'paused'
+            ? '<span class="le-pill">Schedule paused</span>'
+            : 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>';
+      }).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>' +
+        '<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>' : '') +
+          '<button type="button" class="delete-btn workflow-forget">Forget</button>' +
+        '</div><div class="hint workflow-result"></div></div>';
+    }).join('') + '<p class="hint" style="margin:6px 0 0"><a href="/workflows/new">Describe another workflow</a></p>';
+  }
+
+  function loadWorkflowsSection(name) {
+    var el = detail.querySelector('#workflowsContent');
+    if (!el) return;
+    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 cards = el.querySelectorAll('.workflow-card');
+      for (var i = 0; i < cards.length; i++) wireWorkflowCard(name, cards[i]);
+    });
+  }
+
+  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-run').addEventListener('click', function (ev) {
+      var btn = ev.currentTarget;
+      btn.disabled = true;
+      result.textContent = 'Starting' + String.fromCharCode(8230);
+      fetchJsonRetryOnce(base + '/run', { method: 'POST' }).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.');
+      });
+    });
+    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; }
+      fetchJsonRetryOnce(base, { method: 'DELETE' }).then(function () { loadWorkflowsSection(name); });
+    });
+  }
+
   function fillOverviewCards(name) {
     Promise.all([
       fetchJsonRetryOnce('/agents/' + encodeURIComponent(name) + '/notifier'),
@@ -641,7 +739,7 @@ ${consoleShellScript}
       var messagingDetail = [];
       if (pending.length) messagingDetail.push(pending.length + ' waiting for a decision');
       if (n && connected && n.channel === 'slack' && n.plan !== 'free' && (!n.file || n.file.conversations !== false)) messagingDetail.push('answers replies in threads');
-      if (n && !connected) messagingDetail.push(n.missingSecret ? 'Saved, but its secret isn' + String.fromCharCode(8217) + 't set' : 'Send approvals and questions to Slack, Lark, email or a webhook');
+      if (n && !connected) messagingDetail.push(n.missingSecret ? 'Saved, but its secret isn' + String.fromCharCode(8217) + 't set' : 'Send approvals and questions to Telegram, Slack, Lark, email or a webhook');
       if (!messagingDetail.length && n) messagingDetail.push('Sends ' + escapeHtml((n.events || []).join(', ')));
       set('ovMessagingDetail', messagingDetail.join(' \u00b7 '));
       showPendingCount(pending.length);
@@ -689,12 +787,12 @@ ${consoleShellScript}
         '<form class="add-source" id="modelForm" style="display:none">' +
           '<label>Provider' +
             '<select name="provider">' +
-              ['anthropic', 'openai', 'deepseek', 'kimi', 'glm', 'gemini'].map(function (p) {
+              ['openai', 'anthropic', 'gemini', 'meta', 'xai', 'deepseek', 'kimi', 'glm'].map(function (p) {
                 return '<option value="' + p + '"' + (p === cfg.model.provider ? ' selected' : '') + '>' + p + '</option>';
               }).join('') +
             '</select>' +
           '</label>' +
-          '<label>Model name <span class="hint">(required for openai/deepseek; defaults to claude-sonnet-5 for anthropic)</span>' +
+          '<label>Model name <span class="hint">(choose Other&hellip; to type a model not in the list)</span>' +
             '<input type="text" name="modelName" value="' + escapeHtml(cfg.model.model || '') + '">' +
           '</label>' +
           '<label>Max tokens <span class="hint">(blank for provider default)</span>' +
@@ -714,6 +812,7 @@ ${consoleShellScript}
     }
 
     return renderOverviewCards(cfg) +
+      '<section id="workflowsSection"><h3>Workflows</h3><div id="workflowsContent"><p class="hint">Loading&hellip;</p></div></section>' +
       '<section>' + systemPromptSection + '</section>' +
       '<section>' + modelSection + '</section>' +
       '<section><h3>Hooks</h3><dl class="kv">' +
@@ -813,6 +912,13 @@ ${consoleShellScript}
         modelDisplay.style.display = 'none';
         editModelBtn.style.display = 'none';
         modelForm.style.display = '';
+        // Only providers with a key saved can be chosen; the agent's
+        // current one stays selectable either way. Then the model dropdown.
+        var currentProvider = modelForm.querySelector('select[name="provider"] option[selected]');
+        leShell.loadProviderKeys().then(function (keys) {
+          leShell.applyProviderKeys(modelForm, keys, currentProvider && currentProvider.value);
+          leShell.wireModelPicker(modelForm);
+        });
       });
       overviewPanel.querySelector('#cancelModelBtn').addEventListener('click', function () {
         modelForm.style.display = 'none';
@@ -975,6 +1081,19 @@ ${consoleShellScript}
     });
   }
 
+  // A decision in words, as on the homepage: Allow, Ask me (wait for a
+  // person) or Never.
+  var DECISION_LABELS = { allow: 'Allow', ask: 'Ask me', deny: 'Never' };
+
+  // Three buttons for a decision; the pressed one is current. attrs
+  // says what the switch sets (a rule, or the default decision).
+  function decisionSwitch(current, label, attrs) {
+    return '<div class="decision-switch" role="group" aria-label="' + escapeHtml(label) + '" ' + attrs + '>' +
+      ['allow', 'ask', 'deny'].map(function (d) {
+        return '<button type="button" data-decision="' + d + '" aria-pressed="' + (current === d ? 'true' : 'false') + '">' + DECISION_LABELS[d] + '</button>';
+      }).join('') + '</div>';
+  }
+
   function renderActauthRuleRow(r) {
     var actionsHtml = r.name
       ? '<button type="button" class="edit-rule-btn" data-name="' + escapeHtml(r.name) + '">Edit</button> ' +
@@ -983,36 +1102,58 @@ ${consoleShellScript}
       // update/removeActauthRule (both keyed by name) can address — left
       // visible, but not editable here.
       : '<span class="hint">unnamed — edit actauth.yml directly</span>';
+    // Advanced's rule editor: every rule in full, name and scope included.
     return '<tr>' +
       '<td><code>' + escapeHtml(r.name || '') + '</code></td>' +
       '<td><code>' + escapeHtml(r.scope) + '</code></td>' +
+      '<td>' + (r.ability ? '<code>' + escapeHtml(r.ability) + '</code>' : '') + '</td>' +
       '<td><code>' + escapeHtml(r.tool) + '</code></td>' +
-      '<td><span class="le-pill ' + escapeHtml(r.decision) + '">' + escapeHtml(r.decision) + '</span></td>' +
+      '<td>' + (r.name
+        ? decisionSwitch(r.decision, 'Decision for ' + r.name, 'data-rule="' + escapeHtml(r.name) + '"')
+        : '<span class="le-pill ' + escapeHtml(r.decision) + '">' + escapeHtml(DECISION_LABELS[r.decision] || r.decision) + '</span>') + '</td>' +
       '<td>' + actionsHtml + '</td>' +
       '</tr>';
   }
 
-  function renderActauthConfigHtml(cfg) {
-    var rulesHtml = cfg.rules.length
-      ? '<table><thead><tr><th>Name</th><th>Who (tenant / environment)</th><th>Tool</th><th>Decision</th><th></th></tr></thead><tbody>' +
-        cfg.rules.map(renderActauthRuleRow).join('') + '</tbody></table>'
-      : '<p class="hint">No explicit rules — every tool call falls through to the default decision.</p>';
-
-    return '<p class="muted" style="margin:0 0 20px">Decide which tool calls run on their own, which wait for a person, and which never run. Stored in <code>actauth.yml</code> in this agent&#39;s folder.</p>' +
-      '<section><h3>Rules (' + cfg.rules.length + ')</h3>' + rulesHtml + '</section>' +
+  // The Permissions tab: every tool the agent has, each with its ability
+  // and Allow / Ask me / Never (saved at once: its rule for everyone is
+  // updated, or added), then the decision when no rule matches. Rules in
+  // full (scopes, names, adding and removing) are in Advanced.
+  function renderPermissionsHtml(cfg) {
+    var tools = cfg.tools || [];
+    var rows = tools.map(function (t) {
+      var decision = t.editable
+        ? decisionSwitch(t.decision, 'Decision for ' + t.tool, 'data-tool="' + escapeHtml(t.tool) + '"')
+        : '<span class="le-pill ' + escapeHtml(t.decision) + '">' + escapeHtml(DECISION_LABELS[t.decision] || t.decision) + '</span>';
+      var note = t.isDefault ? 'default' : t.scopeNote;
+      return '<tr>' +
+        '<td>' + (t.ability ? '<code>' + escapeHtml(t.ability) + '</code>' : '') + '</td>' +
+        '<td><code>' + escapeHtml(t.tool) + '</code></td>' +
+        '<td>' + decision + (note ? ' <span class="hint">' + escapeHtml(note) + '</span>' : '') + '</td>' +
+        '</tr>';
+    }).join('');
+    return '<p class="muted" style="margin:0 0 20px">Decide which tool calls run on their own (Allow), which wait for a person (Ask me), and which never run (Never). Click to change; it&#39;s saved at once. Scoped rules, adding and removing rules are in <a href="?tab=advanced" data-tab="advanced">Advanced</a>.</p>' +
+      '<section><h3>Tools (' + tools.length + ')</h3>' +
+        (tools.length
+          ? '<div class="le-table-wrap"><table class="actauth-rules"><thead><tr><th>Ability</th><th>Tool</th><th>Decision</th></tr></thead><tbody>' + rows + '</tbody></table></div>'
+          : '<p class="hint">This agent has no tools yet. Install an ability, or add a tool in Advanced.</p>') +
+        '<p class="error" id="toolsDecisionError" style="margin:6px 0 0"></p></section>' +
       '<section><h3>When no rule matches</h3>' +
-        '<form class="add-source" id="defaultDecisionForm" style="max-width:260px">' +
-          '<label>Decision' +
-            '<select name="defaultDecision" id="defaultDecisionSelect">' +
-              '<option value="allow"' + (cfg.defaultDecision === 'allow' ? ' selected' : '') + '>allow</option>' +
-              '<option value="ask"' + (cfg.defaultDecision === 'ask' ? ' selected' : '') + '>ask</option>' +
-              '<option value="deny"' + (cfg.defaultDecision === 'deny' ? ' selected' : '') + '>deny</option>' +
-            '</select>' +
-          '</label>' +
-          '<button type="submit">Save</button>' +
-          '<div id="defaultDecisionError" class="error"></div>' +
-        '</form></section>' +
-      '<section><h3 id="ruleFormHeading">Add a rule</h3>' +
+        decisionSwitch(cfg.defaultDecision, 'Decision when no rule matches', 'id="defaultDecisionSwitch"') +
+        '<p class="hint" style="margin:6px 0 0">For a tool with no rule (shown as default above), and any call no rule covers.</p>' +
+        '<p class="error" id="defaultDecisionError" style="margin:4px 0 0"></p></section>';
+  }
+
+  // Advanced's Permission rules: every rule in actauth.yml, with its name
+  // and scope, to edit, remove or add.
+  function renderRulesEditorHtml(cfg) {
+    var rulesHtml = cfg.rules.length
+      ? '<div class="le-table-wrap"><table class="actauth-rules actauth-rules-full"><thead><tr><th>Name</th><th>Who (tenant / environment)</th><th>Ability</th><th>Tool</th><th>Decision</th><th></th></tr></thead><tbody>' +
+        cfg.rules.map(renderActauthRuleRow).join('') + '</tbody></table></div>'
+      : '<p class="hint">No rules yet: every tool call gets the decision for when no rule matches.</p>';
+    return '<p class="muted" style="margin:0 0 12px">Every rule in <code>actauth.yml</code>. The first rule that matches a call decides it; Who narrows a rule to a tenant and environment (<code>*/*</code> is everyone).</p>' +
+      rulesHtml + '<p class="error" id="rulesError" style="margin:6px 0 0"></p>' +
+      '<h3 id="ruleFormHeading" style="margin-top:20px">Add a rule</h3>' +
         '<form class="add-source" id="ruleForm">' +
           '<label>Name' +
             '<input name="name" id="ruleNameInput" required placeholder="my-rule-name">' +
@@ -1025,9 +1166,9 @@ ${consoleShellScript}
           '</label>' +
           '<label>Decision' +
             '<select name="decision" id="ruleDecisionInput">' +
-              '<option value="allow">allow</option>' +
-              '<option value="ask" selected>ask</option>' +
-              '<option value="deny">deny</option>' +
+              '<option value="allow">Allow</option>' +
+              '<option value="ask" selected>Ask me</option>' +
+              '<option value="deny">Never</option>' +
             '</select>' +
           '</label>' +
           '<button type="submit" id="ruleSubmitBtn">Add</button>' +
@@ -1071,12 +1212,44 @@ ${consoleShellScript}
       }).join('') + '</tbody></table></div>';
   }
 
+  // The Messaging tab lists one section per app; each is set up and
+  // saved on its own. A webhook always sends once set up; of the
+  // messaging apps, only the primary one does.
+  var CHANNEL_TITLES = { webhook: 'Webhook', telegram: 'Telegram', slack: 'Slack', lark: 'Lark / Feishu', email: 'Email' };
+  // Each app's icon (web/messaging-icons.ts).
+  var CHANNEL_ICONS = ${JSON.stringify(MESSAGING_ICONS)};
+  var CHANNEL_BLURBS = {
+    webhook: 'Your own app receives each request as a signed POST.',
+    telegram: 'A Telegram bot posts requests to a group, channel or person.',
+    slack: 'A Slack app posts requests to a channel, with buttons and replies in threads.',
+    lark: 'A Lark or Feishu app posts requests to a chat.',
+    email: 'Requests are emailed through Resend, SendGrid or Postmark.'
+  };
+
+  function connectionFor(n, channel) {
+    var list = n.connections || [];
+    for (var i = 0; i < list.length; i++) if (list[i].channel === channel) return list[i];
+    return null;
+  }
+
   function renderNotifierStatus(n) {
-    if (n.source === 'code') return 'Set in this agent&#39;s <code>index.ts</code> (<code>httpNotifier</code>, ' + escapeHtml(n.channel) + '). Edit it there; code always wins over the form below.';
-    if (n.source === 'file') return 'Sending to <strong>' + escapeHtml(n.channel) + '</strong> for: ' + escapeHtml((n.events || []).join(', ')) + '.';
-    if (n.missingSecret) return 'Saved, but not sending yet: set the secret below (<code>' + escapeHtml(n.missingSecret) + '</code>).';
-    if (n.source === 'default') return 'Using the project-wide default webhook (<code>LOOPENGINE_DEFAULT_WEBHOOK_URL</code>, ' + escapeHtml(n.defaultWebhookUrl) + '). Set one below to use a different target for this agent.';
-    return '<strong>Nowhere yet</strong>, so nobody is notified. Choose a Slack channel, Lark chat, email address or webhook below.';
+    if (n.source === 'code') return 'Set in this agent&#39;s <code>index.ts</code> (<code>httpNotifier</code>, ' + escapeHtml(n.channel) + '). Edit it there; code always wins over the connections below.';
+    var rule = ' A webhook always sends once set up; of Telegram, Slack, Lark and email, only the primary one does.';
+    var active = n.active || [];
+    var sending = active.filter(function (a) { return !a.missingSecret; }).map(function (a) {
+      return a.channel === 'webhook' ? 'your <strong>webhook</strong>' : '<strong>' + escapeHtml(CHANNEL_TITLES[a.channel] || a.channel) + '</strong> (primary)';
+    });
+    var waiting = active.filter(function (a) { return a.missingSecret; }).map(function (a) {
+      return escapeHtml(CHANNEL_TITLES[a.channel] || a.channel) + ' is waiting for its secret (<code>' + escapeHtml(a.missingSecret) + '</code>)';
+    });
+    var appsSaved = (n.connections || []).some(function (c) { return c.channel !== 'webhook'; });
+    var noPrimary = appsSaved && !n.primary ? ' No messaging app is primary: make one primary below.' : '';
+    var html = sending.length ? 'Sending to ' + sending.join(' and ') + '.' : '';
+    if (waiting.length) html += (html ? ' ' : '') + waiting.join('; ') + '.';
+    if (html) return html + noPrimary + rule;
+    var fallback = n.source === 'default' ? ' Until then the project-wide default webhook (<code>LOOPENGINE_DEFAULT_WEBHOOK_URL</code>, ' + escapeHtml(n.defaultWebhookUrl) + ') is used.' : ' Until then nobody is notified.';
+    if (appsSaved) return '<strong>Nothing is sending.</strong>' + noPrimary + fallback + rule;
+    return '<strong>Nowhere yet.</strong> Set up an app below; the first messaging app you save becomes primary.' + fallback + rule;
   }
 
   // Slack only: whether replies in a request's thread are answered. On
@@ -1092,43 +1265,52 @@ ${consoleShellScript}
         : 'People can ask the agent about a request in its thread, and it answers there. Approvers (below) can also decide it there.') + '</p></div>';
   }
 
-  function renderNotifierForm(n) {
-    var f = n.file || { channel: 'webhook', events: ['approval', 'question'] };
-    var events = f.events || [];
-    function eventBox(e) {
-      return '<label class="tool-picker-item" style="border:0;padding:0;justify-content:flex-start"><input type="checkbox" name="events" value="' + e[0] + '"' + (events.indexOf(e[0]) !== -1 ? ' checked' : '') + '> ' + e[1] + '</label>';
-    }
-    function field(channel, html) {
-      return '<div class="notifier-fields" data-channel="' + channel + '"' + (f.channel === channel ? '' : ' hidden') + '>' + html + '</div>';
-    }
-    // A secret's state at a glance: a pill by the label, and a placeholder
-    // saying whether typing replaces a saved one. Its value is never shown.
-    function secretPill(isSet) {
-      return isSet ? '<span class="le-pill good">Saved</span>' : '<span class="le-pill warn">Not set</span>';
-    }
-    // The field's name and its pill on one line (form labels stack their
-    // children, which would stretch the pill across the row).
-    function secretHead(name, isSet) {
-      return '<span style="display:flex;align-items:center;gap:8px">' + name + secretPill(isSet) + '</span>';
-    }
-    function secretPlaceholder(isSet, missing) {
-      return isSet ? 'Saved ' + String.fromCharCode(8212) + ' type a new one only to replace it' : missing;
-    }
-    var SECRET_HINTS = { slack: 'xoxb-' + String.fromCharCode(8230) + ' from OAuth & Permissions', webhook: 'A long random string, or Generate', lark: 'App Secret from the Lark developer console', email: 'An API key from your email provider' };
-    function secretField(channel, label) {
-      var isSet = n.secretsSet && n.secretsSet[channel];
-      return '<label>' + secretHead(label, isSet) + '<span class="hint">(stored in this agent&#39;s env as ' + escapeHtml(n.secretVars[channel]) + ')</span>' +
-        '<span style="display:flex;gap:6px"><input type="password" name="secret_' + channel + '" autocomplete="off" style="flex:1;min-width:0" placeholder="' + escapeHtml(secretPlaceholder(isSet, SECRET_HINTS[channel] || '')) + '">' +
-        (channel === 'webhook' ? '<button type="button" class="notifier-generate">Generate</button>' : '') + '</span></label>';
+  // A secret's state at a glance: a pill by the label, and a placeholder
+  // saying whether typing replaces a saved one. Its value is never shown.
+  function secretPill(isSet) {
+    return isSet ? '<span class="le-pill good">Saved</span>' : '<span class="le-pill warn">Not set</span>';
+  }
+  // The field's name and its pill on one line (form labels stack their
+  // children, which would stretch the pill across the row).
+  function secretHead(name, isSet) {
+    return '<span style="display:flex;align-items:center;gap:8px">' + name + secretPill(isSet) + '</span>';
+  }
+  function secretPlaceholder(isSet, missing) {
+    return isSet ? 'Saved ' + String.fromCharCode(8212) + ' type a new one only to replace it' : missing;
+  }
+  var SECRET_HINTS = {
+    slack: 'xoxb-' + String.fromCharCode(8230) + ' from OAuth & Permissions',
+    webhook: 'A long random string, or Generate',
+    telegram: 'The token @BotFather gave you, like 123456:ABC' + String.fromCharCode(8230),
+    lark: 'App Secret from the Lark developer console',
+    email: 'An API key from your email provider'
+  };
+  function secretField(n, channel, label) {
+    var isSet = n.secretsSet && n.secretsSet[channel];
+    return '<label>' + secretHead(label, isSet) + '<span class="hint">(stored in this agent&#39;s env as ' + escapeHtml(n.secretVars[channel]) + ')</span>' +
+      '<span style="display:flex;gap:6px"><input type="password" name="secret" autocomplete="off" style="flex:1;min-width:0" placeholder="' + escapeHtml(secretPlaceholder(isSet, SECRET_HINTS[channel] || '')) + '">' +
+      (channel === 'webhook' ? '<button type="button" class="notifier-generate">Generate</button>' : '') + '</span></label>';
+  }
+
+  // The settings only this app has.
+  function renderChannelFields(n, channel, f) {
+    if (channel === 'webhook') {
+      return '<label>Webhook URL<input type="url" name="url" placeholder="https://your-app.example.com/hooks/loopengine" value="' + escapeHtml(f.url || '') + '"></label>' + secretField(n, 'webhook', 'Signing secret') +
+        '<p class="hint" style="margin:0">Your app checks the <code>X-Actauth-Signature</code> header (HMAC-SHA256 of the body with the signing secret). Each payload carries a <code>decideUrl</code> it can simply forward to a person, or it can decide itself by sending <code>{"decision":"approve"}</code> or <code>{"decision":"deny"}</code> to <code>resolveUrl</code>.</p>';
     }
-    return '<form class="add-source" id="notifierForm" style="max-width:560px">' +
-      '<label>Send to<select name="channel" id="notifierChannel">' +
-        ['webhook', 'slack', 'lark', 'email'].map(function (c) { return '<option value="' + c + '"' + (f.channel === c ? ' selected' : '') + '>' + { webhook: 'Webhook (your app)', slack: 'Slack channel', lark: 'Lark / Feishu chat', email: 'Email' }[c] + '</option>'; }).join('') +
-      '</select></label>' +
-      field('webhook', '<label>Webhook URL<input type="url" name="url" placeholder="https://your-app.example.com/hooks/loopengine" value="' + escapeHtml(f.url || '') + '"></label>' + secretField('webhook', 'Signing secret') +
-        '<p class="hint" style="margin:0">Your app checks the <code>X-Actauth-Signature</code> header (HMAC-SHA256 of the body with the signing secret). Each payload carries a <code>decideUrl</code> it can simply forward to a person, or it can decide itself by sending <code>{"decision":"approve"}</code> or <code>{"decision":"deny"}</code> to <code>resolveUrl</code>.</p>') +
-      field('slack',
-        '<details class="slack-step"' + (n.secretsSet && n.secretsSet.slack ? '' : ' open') + '><summary>Create the Slack app (once)</summary>' +
+    if (channel === 'telegram') {
+      return '<details class="slack-step"' + (n.secretsSet && n.secretsSet.telegram ? '' : ' open') + '><summary>Create the Telegram bot (once)</summary>' +
+          '<ol class="hint" style="margin:6px 0;padding-left:18px">' +
+            '<li>Message <a href="https://t.me/BotFather" target="_blank" rel="noopener">@BotFather</a>, send /newbot and follow the steps. Paste the token it gives you below.</li>' +
+            '<li>Add the bot to the group or channel that should get requests (as an admin, for a channel), or start a chat with it yourself.</li>' +
+            '<li>Find the chat id: send a message there, then open https://api.telegram.org/bot&lt;token&gt;/getUpdates and copy <code>chat.id</code>. A public channel can use @its-name instead.</li>' +
+          '</ol></details>' +
+        secretField(n, 'telegram', 'Bot token') +
+        '<label>Chat ID <span class="hint">(a group or channel id like -1001234567890, or @channelname)</span><input name="chatId" placeholder="-1001234567890" value="' + escapeHtml(f.chatId || '') + '"></label>' +
+        '<p class="hint" style="margin:0">Each message links to a page where the person approves, denies or answers; there are no buttons in Telegram yet.</p>';
+    }
+    if (channel === 'slack') {
+      return '<details class="slack-step"' + (n.secretsSet && n.secretsSet.slack ? '' : ' open') + '><summary>Create the Slack app (once)</summary>' +
           '<ol class="hint" style="margin:6px 0;padding-left:18px">' +
             '<li>Open <a href="https://api.slack.com/apps?new_app=1" target="_blank" rel="noopener">Slack apps</a> &rarr; Create New App &rarr; From a manifest, and pick your workspace.</li>' +
             '<li>Paste the manifest below, create the app, then Install to Workspace.</li>' +
@@ -1137,7 +1319,7 @@ ${consoleShellScript}
           '<textarea id="slackManifest" readonly rows="8" style="font-family:var(--font-mono);font-size:11.5px"></textarea>' +
           '<button type="button" id="slackManifestCopy" style="margin-top:6px">Copy manifest</button>' +
         '</details>' +
-        secretField('slack', 'Bot token') +
+        secretField(n, 'slack', 'Bot token') +
         '<label>Channel <span class="hint">(invite the bot to a private channel first: /invite @its-name)</span>' +
           '<span style="display:flex;gap:6px"><select id="slackChannelSelect" style="flex:1;min-width:0"><option value="">' + (f.channelId ? 'Saved: ' + escapeHtml(f.channelId) : 'Load channels to pick one') + '</option></select>' +
           '<button type="button" id="slackLoadChannels">Load channels</button></span></label>' +
@@ -1147,29 +1329,74 @@ ${consoleShellScript}
           '<input type="password" name="signingSecret" autocomplete="off" placeholder="' + escapeHtml(secretPlaceholder(n.slack && n.slack.signingSecretSet, 'Paste the Signing Secret')) + '"></label>' +
         '<p class="hint" style="margin:0">Buttons send their clicks to <code id="slackInteractivityUrl"></code> (the manifest already points there).</p>' +
         renderConversationsField(n, f) +
-        '<p class="hint" style="margin:0" id="slackEventsNote"></p>') +
-      field('lark', '<label>App ID<input name="appId" value="' + escapeHtml(f.appId || '') + '"></label><label>Chat ID<input name="chatId" value="' + escapeHtml(f.chatId || '') + '"></label>' + secretField('lark', 'App secret')) +
-      field('email',
-        '<label>Email addresses <span class="hint">(who gets the requests; separate several with commas)</span><input name="emailTo" placeholder="ops@example.com, lead@example.com" value="' + escapeHtml(f.to || '') + '"></label>' +
-        '<label>Sent by <span class="hint">(your email provider must allow sending from this address)</span><input name="emailFrom" placeholder="LoopEngine &lt;approvals@example.com&gt;" value="' + escapeHtml(f.from || '') + '"></label>' +
-        '<label>Email provider<select name="emailProvider">' +
-          [['resend', 'Resend'], ['sendgrid', 'SendGrid'], ['postmark', 'Postmark']].map(function (p) { return '<option value="' + p[0] + '"' + (f.provider === p[0] ? ' selected' : '') + '>' + p[1] + '</option>'; }).join('') +
-        '</select></label>' +
-        secretField('email', 'API key') +
-        '<p class="hint" style="margin:0">Each email links to a page where the person approves, denies, edits or answers, with no login. The link address below must be one they can open.</p>') +
-      '<label>Link address <span class="hint">(messages link here so people can approve without logging in; use an address they can reach)</span>' +
-        '<input type="url" name="publicUrl" id="notifierPublicUrl" value="' + escapeHtml(n.publicUrl || f.publicUrl || location.origin) + '"' + (n.publicUrl ? ' disabled title="Set by LOOPENGINE_PUBLIC_URL"' : '') + '></label>' +
-      '<div class="body-field">Send' +
-        '<div style="display:flex;gap:14px;flex-wrap:wrap">' + NOTIFIER_EVENTS.slice(0, 2).map(eventBox).join('') + '</div>' +
-        '<details' + (events.indexOf('run_finish') !== -1 || events.indexOf('run_start') !== -1 ? ' open' : '') + '><summary>More events</summary>' +
-        '<div style="display:flex;gap:14px;flex-wrap:wrap;margin-top:6px">' + NOTIFIER_EVENTS.slice(2).map(eventBox).join('') + '</div>' +
-        '<p class="hint" style="margin:4px 0 0">Run finished tells your app the agent&#39;s final reply once a decision lets it finish.</p></details></div>' +
-      (n.canSave === false ? '<p class="error" style="margin:0">Saving needs <code>LOOPENGINE_ADMIN_AUTH</code> set on the server, because this stores a secret. Add <code>LOOPENGINE_ADMIN_AUTH=user:pass</code> to <code>.env</code> and restart.</p>' : '') +
-      '<div style="display:flex;gap:8px;flex-wrap:wrap"><button type="submit"' + (n.canSave === false ? ' disabled' : '') + '>Save</button><button type="button" id="notifierTestBtn">Send test</button>' +
-        (n.file ? '<button type="button" class="delete-btn" id="notifierRemoveBtn">Remove</button>' : '') + '</div>' +
-      '<div id="notifierResult" class="hint"></div>' +
-
-      '</form>';
+        '<p class="hint" style="margin:0" id="slackEventsNote"></p>';
+    }
+    if (channel === 'lark') {
+      return '<label>App ID<input name="appId" value="' + escapeHtml(f.appId || '') + '"></label><label>Chat ID<input name="chatId" value="' + escapeHtml(f.chatId || '') + '"></label>' + secretField(n, 'lark', 'App secret');
+    }
+    return '<label>Email addresses <span class="hint">(who gets the requests; separate several with commas)</span><input name="emailTo" placeholder="ops@example.com, lead@example.com" value="' + escapeHtml(f.to || '') + '"></label>' +
+      '<label>Sent by <span class="hint">(your email provider must allow sending from this address)</span><input name="emailFrom" placeholder="LoopEngine &lt;approvals@example.com&gt;" value="' + escapeHtml(f.from || '') + '"></label>' +
+      '<label>Email provider<select name="emailProvider">' +
+        [['resend', 'Resend'], ['sendgrid', 'SendGrid'], ['postmark', 'Postmark']].map(function (p) { return '<option value="' + p[0] + '"' + (f.provider === p[0] ? ' selected' : '') + '>' + p[1] + '</option>'; }).join('') +
+      '</select></label>' +
+      secretField(n, 'email', 'API key') +
+      '<p class="hint" style="margin:0">Each email links to a page where the person approves, denies, edits or answers, with no login. The link address below must be one they can open.</p>';
+  }
+
+  // A messaging app's form says whether it's the primary one, or offers
+  // to make it primary on Save (ticked already when none is). The webhook
+  // has neither: it always sends.
+  function renderPrimaryField(n, channel, saved, isPrimary) {
+    if (channel === 'webhook') return '';
+    if (isPrimary) return '<p class="hint" style="margin:0"><span class="le-pill accent">Primary</span> This is the primary messaging app. To switch, tick &ldquo;Make this the primary messaging app&rdquo; in another app&#39;s section and save it.</p>';
+    return '<div class="body-field" style="margin:0">' +
+      '<label class="tool-picker-item" style="border:0;padding:0;justify-content:flex-start"><input type="checkbox" name="makePrimary"' + (n.primary ? '' : ' checked') + '> Make this the primary messaging app</label>' +
+      '<p class="hint" style="margin:2px 0 0">' + (n.primary
+        ? 'Only the primary messaging app sends; now that&#39;s ' + escapeHtml(CHANNEL_TITLES[n.primary] || n.primary) + '. ' + (saved ? 'Send test works either way.' : 'Leave this off to save ' + escapeHtml(CHANNEL_TITLES[channel] || channel) + ' for later.')
+        : 'No messaging app is primary yet, so saving this one makes it primary.') + '</p></div>';
+  }
+
+  // One app's section: its status in the summary, then its own form.
+  function renderConnectionSection(n, channel) {
+    var saved = connectionFor(n, channel);
+    var f = saved || { channel: channel, events: ['approval', 'question'] };
+    var isPrimary = n.primary === channel;
+    var isWebhook = channel === 'webhook';
+    var secretSet = n.secretsSet && n.secretsSet[channel];
+    var pills = isPrimary ? '<span class="le-pill accent">Primary</span>' : isWebhook && saved ? '<span class="le-pill accent">Always on</span>' : '';
+    pills += saved ? (secretSet ? ' <span class="le-pill good">Saved</span>' : ' <span class="le-pill warn">Secret not set</span>') : ' <span class="le-pill">Not set up</span>';
+    var events = f.events || [];
+    function eventBox(e) {
+      return '<label class="tool-picker-item" style="border:0;padding:0;justify-content:flex-start"><input type="checkbox" name="events" value="' + e[0] + '"' + (events.indexOf(e[0]) !== -1 ? ' checked' : '') + '> ' + e[1] + '</label>';
+    }
+    var locked = n.canSave === false;
+    // Every section starts closed; loadApprovalsSection reopens the ones
+    // that were open before a save redrew the tab.
+    var inUse = isPrimary || (isWebhook && saved);
+    return '<details class="msg-conn' + (inUse ? ' is-primary' : '') + '" data-channel="' + channel + '">' +
+      '<summary><span class="msg-conn-title">' + (CHANNEL_ICONS[channel] || '') + escapeHtml(CHANNEL_TITLES[channel] || channel) + '</span>' + pills +
+        '<span class="hint msg-conn-blurb">' + escapeHtml(CHANNEL_BLURBS[channel] || '') + '</span></summary>' +
+      '<form class="add-source notifier-form" data-channel="' + channel + '" style="max-width:560px">' +
+        renderChannelFields(n, channel, f) +
+        '<label>Link address <span class="hint">(messages link here so people can approve without logging in; use an address they can reach)</span>' +
+          '<input type="url" name="publicUrl" class="notifier-public-url" value="' + escapeHtml(n.publicUrl || f.publicUrl || location.origin) + '"' + (n.publicUrl ? ' disabled title="Set by LOOPENGINE_PUBLIC_URL"' : '') + '></label>' +
+        '<div class="body-field">Send' +
+          '<div style="display:flex;gap:14px;flex-wrap:wrap">' + NOTIFIER_EVENTS.slice(0, 2).map(eventBox).join('') + '</div>' +
+          '<details' + (events.indexOf('run_finish') !== -1 || events.indexOf('run_start') !== -1 ? ' open' : '') + '><summary>More events</summary>' +
+          '<div style="display:flex;gap:14px;flex-wrap:wrap;margin-top:6px">' + NOTIFIER_EVENTS.slice(2).map(eventBox).join('') + '</div>' +
+          '<p class="hint" style="margin:4px 0 0">Run finished tells your app the agent&#39;s final reply once a decision lets it finish.</p></details></div>' +
+        renderPrimaryField(n, channel, saved, isPrimary) +
+        '<div style="display:flex;gap:8px;flex-wrap:wrap"><button type="submit"' + (locked ? ' disabled' : '') + '>' + (saved ? 'Save' : 'Save ' + escapeHtml(CHANNEL_TITLES[channel] || channel)) + '</button>' +
+          (saved ? '<button type="button" class="notifier-test">Send test</button>' : '') +
+          (saved ? '<button type="button" class="delete-btn notifier-remove"' + (locked ? ' disabled' : '') + '>Remove</button>' : '') + '</div>' +
+        (isWebhook ? '<p class="hint" style="margin:0">A webhook always sends once saved, alongside the primary messaging app.</p>' : '') +
+        '<div class="hint notifier-result"></div>' +
+      '</form></details>';
+  }
+
+  function renderConnectionsHtml(n) {
+    return (n.canSave === false ? '<p class="error" style="margin:0 0 12px">Saving needs <code>LOOPENGINE_ADMIN_AUTH</code> set on the server, because this stores a secret. Add <code>LOOPENGINE_ADMIN_AUTH=user:pass</code> to <code>.env</code> and restart.</p>' : '') +
+      '<div class="msg-conns">' + (n.channels || ['slack', 'telegram', 'lark', 'email', 'webhook']).map(function (c) { return renderConnectionSection(n, c); }).join('') + '</div>';
   }
 
   function renderDeliveries(list) {
@@ -1207,15 +1434,18 @@ ${consoleShellScript}
   }
 
   // Slack only: the people who can decide by replying in a request's
-  // thread, and whose button clicks count once any are listed.
+  // thread, and whose button clicks count once any are listed. Shown once
+  // a Slack connection is saved; they only act while Slack is primary.
   function renderApproversHtml(n) {
-    if (n.source === 'code' || !n.file || n.file.channel !== 'slack') return '';
-    var approvers = n.file.approvers || [];
+    var slack = connectionFor(n, 'slack');
+    if (n.source === 'code' || !slack) return '';
+    var approvers = slack.approvers || [];
     var rows = approvers.map(function (a) {
       return '<tr><td>' + escapeHtml(a.name || a.user) + '</td><td><code>' + escapeHtml(a.user) + '</code></td>' +
         '<td><button type="button" class="delete-btn approver-remove" data-user="' + escapeHtml(a.user) + '"' + (n.canSave === false ? ' disabled' : '') + '>Remove</button></td></tr>';
     }).join('');
-    return '<section id="approversSection"><h3>Approvers</h3>' +
+    return '<section id="approversSection"><h3>Slack approvers</h3>' +
+      (n.primary !== 'slack' ? '<p class="hint" style="margin:0 0 8px">Slack isn&#39;t primary, so these take effect once it is.</p>' : '') +
       '<p class="muted" style="margin:0 0 10px">People who can approve, deny, change or answer a request by replying in its thread, like &ldquo;yes, go ahead&rdquo; or &ldquo;make it $40&rdquo;. A plain &ldquo;yes&rdquo; runs it; a reply that&#39;s less clear (&ldquo;sure, send it&rdquo;, &ldquo;yes but check the amount&rdquo;) shows exactly what will run with a Confirm button first, and a change is shown to approve first. Once anyone is listed, only approvers&#39; button clicks count too. Anyone in the channel can still ask about a request.</p>' +
       (approvers.length
         ? '<div class="le-table-wrap" style="max-width:560px"><table><thead><tr><th>Name</th><th>Slack ID</th><th></th></tr></thead><tbody>' + rows + '</tbody></table></div>'
@@ -1231,7 +1461,8 @@ ${consoleShellScript}
     var section = detail.querySelector('#approversSection');
     if (!section) return;
     var result = section.querySelector('#approversResult');
-    var current = (n.file && n.file.approvers) || [];
+    var slack = connectionFor(n, 'slack');
+    var current = (slack && slack.approvers) || [];
     function save(list, message) {
       result.textContent = 'Saving' + String.fromCharCode(8230);
       fetchJsonRetryOnce('/agents/' + encodeURIComponent(name) + '/notifier/approvers', {
@@ -1278,10 +1509,10 @@ ${consoleShellScript}
 
   function renderApprovalsHtml(n) {
     return '<p class="muted" style="margin:0 0 20px">Connect a messaging app, so this agent can reach people when nobody is in Chat. When an app calls it over HTTP or a scheduled task runs, and a tool call needs approval or the agent asks a question, the request is sent here. In Chat it shows up in the conversation instead.</p>' +
-      '<section id="approvalsSetup"><h3>Connection</h3>' +
-      '<p class="muted" style="margin:0 0 12px">Currently: ' + renderNotifierStatus(n) + '</p>' +
+      '<section id="approvalsSetup"><h3>Connections</h3>' +
+      '<p class="muted" style="margin:0 0 12px">' + renderNotifierStatus(n) + '</p>' +
         (n.error ? '<p class="error">' + escapeHtml(n.error) + '</p>' : '') +
-        (n.source === 'code' ? '' : renderNotifierForm(n)) + '</section>' +
+        (n.source === 'code' ? '' : renderConnectionsHtml(n)) + '</section>' +
       renderApproversHtml(n) +
       '<section><h3>Recent deliveries</h3>' + renderDeliveries(n.deliveries || []) + '</section>';
   }
@@ -1324,28 +1555,91 @@ ${consoleShellScript}
   function wireApprovalsHandlers(name) {
     var content = approvalsContentEl();
     if (!content) return;
-    var form = content.querySelector('#notifierForm');
-    if (!form) return;
-    var result = content.querySelector('#notifierResult');
-    content.querySelector('#notifierChannel').addEventListener('change', function (ev) {
-      var groups = form.querySelectorAll('.notifier-fields');
-      for (var k = 0; k < groups.length; k++) groups[k].hidden = groups[k].dataset.channel !== ev.currentTarget.value;
-    });
+    var forms = content.querySelectorAll('.notifier-form');
+    for (var i = 0; i < forms.length; i++) wireConnectionForm(name, forms[i]);
+  }
+
+  // One app's section: Save (with its "make primary" box), Send test and Remove act on
+  // that app's connection only.
+  function wireConnectionForm(name, form) {
+    var channel = form.dataset.channel;
+    var result = form.querySelector('.notifier-result');
+    var base = '/agents/' + encodeURIComponent(name) + '/notifier';
     var generate = form.querySelector('.notifier-generate');
     if (generate) {
       generate.addEventListener('click', function () {
         var bytes = new Uint8Array(24);
         crypto.getRandomValues(bytes);
-        var input = form.querySelector('input[name="secret_webhook"]');
+        var input = form.querySelector('input[name="secret"]');
         input.type = 'text';
         input.value = Array.prototype.map.call(bytes, function (b) { return ('0' + b.toString(16)).slice(-2); }).join('');
         result.textContent = 'Copy this secret into your app before saving; it is not shown again.';
       });
     }
-    // Slack: manifest follows the link address; Load channels fills the picker.
+    if (channel === 'slack') wireSlackFields(name, form, result);
+
+    form.addEventListener('submit', function (ev) {
+      ev.preventDefault();
+      var data = new FormData(form);
+      var body = { channel: channel, events: data.getAll('events'), publicUrl: data.get('publicUrl') };
+      if (channel === 'webhook') body.url = data.get('url');
+      if (channel === 'telegram') body.chatId = data.get('chatId');
+      if (channel === 'slack') body.channelId = data.get('channelId');
+      if (channel === 'lark') { body.appId = data.get('appId'); body.chatId = data.get('chatId'); }
+      if (channel === 'email') { body.to = data.get('emailTo'); body.from = data.get('emailFrom'); body.provider = data.get('emailProvider'); }
+      if (data.get('secret')) body.secret = data.get('secret');
+      if (channel === 'slack' && data.get('signingSecret')) body.signingSecret = data.get('signingSecret');
+      if (channel === 'slack') {
+        var conversationsBox = form.querySelector('#slackConversations');
+        var savedSlack = lastNotifier && connectionFor(lastNotifier, 'slack');
+        // A locked switch (free plan) keeps whatever was saved before.
+        if (conversationsBox && !conversationsBox.disabled) body.conversations = conversationsBox.checked;
+        else if (savedSlack && savedSlack.conversations !== undefined) body.conversations = savedSlack.conversations;
+      }
+      // Ticked "Make this the primary messaging app" (or none is primary yet,
+      // which the server treats the same) makes this one primary.
+      var makePrimaryBox = form.querySelector('input[name="makePrimary"]');
+      if (makePrimaryBox && makePrimaryBox.checked) body.primary = true;
+      var first = Boolean(makePrimaryBox && makePrimaryBox.checked) || (channel !== 'webhook' && lastNotifier && !lastNotifier.primary);
+      result.textContent = 'Saving' + String.fromCharCode(8230);
+      fetchJsonRetryOnce(base, { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) }).then(function (r) {
+        if (!r.ok) { result.textContent = r.body.error || 'Could not save'; return; }
+        loadApprovalsSection(name, first ? CHANNEL_TITLES[channel] + ' saved and made primary.' : CHANNEL_TITLES[channel] + ' saved.');
+      });
+    });
+
+    var testBtn = form.querySelector('.notifier-test');
+    if (testBtn) {
+      testBtn.addEventListener('click', function () {
+        result.textContent = 'Sending' + String.fromCharCode(8230);
+        fetchJsonRetryOnce(base + '/test', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ channel: channel }) }).then(function (r) {
+          var t = r.body;
+          result.textContent = t.ok ? 'Test delivered (' + (t.status || 'ok') + ').' : 'Test failed: ' + (t.error || 'unknown error');
+        });
+      });
+    }
+
+    var removeBtn = form.querySelector('.notifier-remove');
+    if (removeBtn) {
+      removeBtn.addEventListener('click', function () {
+        if (removeBtn.dataset.confirming !== '1') {
+          removeBtn.dataset.confirming = '1';
+          removeBtn.textContent = lastNotifier && lastNotifier.primary === channel ? 'Click again: no messaging app will be primary' : 'Click again to remove';
+          return;
+        }
+        fetchJsonRetryOnce(base + '?channel=' + encodeURIComponent(channel), { method: 'DELETE' }).then(function () {
+          loadApprovalsSection(name, CHANNEL_TITLES[channel] + ' removed.');
+        });
+      });
+    }
+  }
+
+  // Slack's section: the manifest follows the link address; Load channels
+  // fills the picker.
+  function wireSlackFields(name, form, result) {
     var n0 = lastNotifier;
     var manifestEl = form.querySelector('#slackManifest');
-    var linkInput = form.querySelector('#notifierPublicUrl');
+    var linkInput = form.querySelector('.notifier-public-url');
     function refreshSlackManifest() {
       if (!manifestEl || !n0 || !n0.slack) return;
       var url = (linkInput.value || location.origin).replace(/[/]+$/, '') + n0.slack.interactivityPath;
@@ -1373,63 +1667,26 @@ ${consoleShellScript}
     }
     var loadChannels = form.querySelector('#slackLoadChannels');
     var channelSelect = form.querySelector('#slackChannelSelect');
-    if (loadChannels) {
-      loadChannels.addEventListener('click', function () {
-        loadChannels.disabled = true;
-        result.textContent = 'Loading channels' + String.fromCharCode(8230);
-        var token = form.querySelector('input[name="secret_slack"]').value;
-        fetchJsonRetryOnce('/agents/' + encodeURIComponent(name) + '/notifier/slack-channels', {
-          method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ botToken: token }),
-        }).then(function (r) {
-          loadChannels.disabled = false;
-          if (!r.ok) { result.textContent = r.body.error || 'Could not load channels'; return; }
-          var current = form.querySelector('input[name="channelId"]').value;
-          channelSelect.innerHTML = '<option value="">Pick a channel</option>' + r.body.channels.map(function (c) {
-            return '<option value="' + escapeHtml(c.id) + '"' + (c.id === current ? ' selected' : '') + '>' + (c.isPrivate ? '&#128274; ' : '#') + escapeHtml(c.name) + (c.isMember ? '' : ' (bot not in channel yet)') + '</option>';
-          }).join('');
-          result.textContent = r.body.channels.length + ' channels found.';
-        });
-      });
-      channelSelect.addEventListener('change', function () {
-        if (channelSelect.value) form.querySelector('input[name="channelId"]').value = channelSelect.value;
-      });
-    }
-
-    form.addEventListener('submit', function (ev) {
-      ev.preventDefault();
-      var data = new FormData(form);
-      var channel = data.get('channel');
-      var body = { channel: channel, events: data.getAll('events'), url: data.get('url'), channelId: data.get('channelId'), appId: data.get('appId'), chatId: data.get('chatId'), publicUrl: data.get('publicUrl') };
-      if (channel === 'email') { body.to = data.get('emailTo'); body.from = data.get('emailFrom'); body.provider = data.get('emailProvider'); }
-      var secret = data.get('secret_' + channel);
-      if (secret) body.secret = secret;
-      if (channel === 'slack' && data.get('signingSecret')) body.signingSecret = data.get('signingSecret');
-      var conversationsBox = form.querySelector('#slackConversations');
-      // A locked switch (free plan) keeps whatever was saved before.
-      if (channel === 'slack' && conversationsBox && !conversationsBox.disabled) body.conversations = conversationsBox.checked;
-      else if (channel === 'slack' && lastNotifier && lastNotifier.file && lastNotifier.file.conversations !== undefined) body.conversations = lastNotifier.file.conversations;
-      result.textContent = 'Saving…';
-      fetchJsonRetryOnce('/agents/' + encodeURIComponent(name) + '/notifier', {
-        method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body),
+    if (!loadChannels) return;
+    loadChannels.addEventListener('click', function () {
+      loadChannels.disabled = true;
+      result.textContent = 'Loading channels' + String.fromCharCode(8230);
+      var token = form.querySelector('input[name="secret"]').value;
+      fetchJsonRetryOnce('/agents/' + encodeURIComponent(name) + '/notifier/slack-channels', {
+        method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ botToken: token }),
       }).then(function (r) {
-        if (!r.ok) { result.textContent = r.body.error || 'Could not save'; return; }
-        loadApprovalsSection(name, 'Saved.');
+        loadChannels.disabled = false;
+        if (!r.ok) { result.textContent = r.body.error || 'Could not load channels'; return; }
+        var current = form.querySelector('input[name="channelId"]').value;
+        channelSelect.innerHTML = '<option value="">Pick a channel</option>' + r.body.channels.map(function (c) {
+          return '<option value="' + escapeHtml(c.id) + '"' + (c.id === current ? ' selected' : '') + '>' + (c.isPrivate ? '&#128274; ' : '#') + escapeHtml(c.name) + (c.isMember ? '' : ' (bot not in channel yet)') + '</option>';
+        }).join('');
+        result.textContent = r.body.channels.length + ' channels found.';
       });
     });
-    content.querySelector('#notifierTestBtn').addEventListener('click', function () {
-      result.textContent = 'Sending…';
-      fetchJsonRetryOnce('/agents/' + encodeURIComponent(name) + '/notifier/test', { method: 'POST' }).then(function (r) {
-        var t = r.body;
-        loadApprovalsSection(name, t.ok ? 'Test delivered (' + (t.status || 'ok') + ').' : 'Test failed: ' + (t.error || 'unknown error'));
-      });
+    channelSelect.addEventListener('change', function () {
+      if (channelSelect.value) form.querySelector('input[name="channelId"]').value = channelSelect.value;
     });
-    var removeBtn = content.querySelector('#notifierRemoveBtn');
-    if (removeBtn) {
-      removeBtn.addEventListener('click', function () {
-        if (removeBtn.dataset.confirming !== '1') { removeBtn.dataset.confirming = '1'; removeBtn.textContent = 'Click again to remove'; return; }
-        fetchJsonRetryOnce('/agents/' + encodeURIComponent(name) + '/notifier', { method: 'DELETE' }).then(function () { loadApprovalsSection(name, 'Removed.'); });
-      });
-    }
   }
 
   function loadApprovalsSection(name, message) {
@@ -1442,7 +1699,13 @@ ${consoleShellScript}
       if (currentName !== name) return;
       if (!results[0].ok) throw new Error(results[0].body.error || 'request failed');
       lastNotifier = results[0].body;
+      // Keep open the app sections that were open (a save redraws the tab).
+      var wasOpen = Array.prototype.map.call(content.querySelectorAll('details.msg-conn[open]'), function (d) { return d.dataset.channel; });
       content.innerHTML = renderApprovalsHtml(results[0].body);
+      wasOpen.forEach(function (channel) {
+        var section = content.querySelector('details.msg-conn[data-channel="' + channel + '"]');
+        if (section) section.open = true;
+      });
       wireApprovalsHandlers(name);
       wireApproversHandlers(name, results[0].body);
       var pendingEl = detail.querySelector('#pendingContent');
@@ -1640,9 +1903,16 @@ ${consoleShellScript}
     return detail.querySelector('#actauthContent');
   }
 
+  function advancedRulesEl() {
+    return detail.querySelector('#advancedRulesContent');
+  }
+
+  // Permissions (one switch per tool, and the default) and Advanced's rule
+  // editor (per-rule switches, Edit, Delete, Add a rule).
   function wireActauthHandlers(name, cfg) {
-    var content = actauthContentEl();
-    if (!content) return;
+    var perm = actauthContentEl();
+    var content = advancedRulesEl();
+    if (!content || !perm) return;
     var editingRuleName = null;
 
     function ruleByName(ruleName) {
@@ -1743,33 +2013,79 @@ ${consoleShellScript}
         });
     });
 
-    var defaultForm = content.querySelector('#defaultDecisionForm');
-    defaultForm.addEventListener('submit', function (ev) {
-      ev.preventDefault();
-      var errorEl = content.querySelector('#defaultDecisionError');
-      errorEl.textContent = '';
-      var decision = content.querySelector('#defaultDecisionSelect').value;
-      fetch('/agents/' + encodeURIComponent(name) + '/actauth/default-decision', {
+    // Allow / Ask me / Never: a click saves at once. The pressed button
+    // moves straight away and moves back if the save fails.
+    function wireDecisionSwitch(group, errorEl, save) {
+      group.addEventListener('click', function (ev) {
+        var btn = ev.target.closest('button[data-decision]');
+        if (!btn || btn.getAttribute('aria-pressed') === 'true' || group.classList.contains('is-saving')) return;
+        var buttons = group.querySelectorAll('button[data-decision]');
+        var before = group.querySelector('button[aria-pressed="true"]');
+        function press(target) {
+          for (var k = 0; k < buttons.length; k++) buttons[k].setAttribute('aria-pressed', buttons[k] === target ? 'true' : 'false');
+        }
+        press(btn);
+        group.classList.add('is-saving');
+        errorEl.textContent = '';
+        save(btn.getAttribute('data-decision'))
+          .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
+          .then(function (result) {
+            if (!result.ok) throw new Error(result.body.error || 'request failed');
+            applyActauthConfig(name, result.body);
+            refreshOverviewPanel(name);
+          })
+          .catch(function (err) {
+            press(before);
+            group.classList.remove('is-saving');
+            errorEl.textContent = 'Could not save: ' + err.message;
+          });
+      });
+    }
+
+    var ruleSwitches = content.querySelectorAll('.decision-switch[data-rule]');
+    for (var s = 0; s < ruleSwitches.length; s++) {
+      (function (group) {
+        var rule = ruleByName(group.getAttribute('data-rule'));
+        if (!rule) return;
+        wireDecisionSwitch(group, content.querySelector('#rulesError'), function (decision) {
+          return fetch('/agents/' + encodeURIComponent(name) + '/actauth/rules/' + encodeURIComponent(rule.name), {
+            method: 'PUT',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ scope: rule.scope, tool: rule.tool, decision: decision }),
+          });
+        });
+      })(ruleSwitches[s]);
+    }
+
+    var toolSwitches = perm.querySelectorAll('.decision-switch[data-tool]');
+    for (var ts = 0; ts < toolSwitches.length; ts++) {
+      (function (group) {
+        var tool = group.getAttribute('data-tool');
+        wireDecisionSwitch(group, perm.querySelector('#toolsDecisionError'), function (decision) {
+          return fetch('/agents/' + encodeURIComponent(name) + '/actauth/tools/' + encodeURIComponent(tool), {
+            method: 'PUT',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ decision: decision }),
+          });
+        });
+      })(toolSwitches[ts]);
+    }
+
+    wireDecisionSwitch(perm.querySelector('#defaultDecisionSwitch'), perm.querySelector('#defaultDecisionError'), function (decision) {
+      return fetch('/agents/' + encodeURIComponent(name) + '/actauth/default-decision', {
         method: 'PUT',
         headers: { 'content-type': 'application/json' },
         body: JSON.stringify({ decision: decision }),
-      })
-        .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
-        .then(function (result) {
-          if (!result.ok) throw new Error(result.body.error || 'request failed');
-          applyActauthConfig(name, result.body);
-          refreshOverviewPanel(name);
-        })
-        .catch(function (err) {
-          errorEl.textContent = err.message;
-        });
+      });
     });
   }
 
   function applyActauthConfig(name, cfg) {
     var content = actauthContentEl();
-    if (!content) return;
-    content.innerHTML = renderActauthConfigHtml(cfg);
+    var advanced = advancedRulesEl();
+    if (!content || !advanced) return;
+    content.innerHTML = renderPermissionsHtml(cfg);
+    advanced.innerHTML = renderRulesEditorHtml(cfg);
     wireActauthHandlers(name, cfg);
     actauthLoadedFor = name;
   }
@@ -1778,6 +2094,8 @@ ${consoleShellScript}
     var content = actauthContentEl();
     if (!content) return;
     content.innerHTML = '<p class="hint">Loading&hellip;</p>';
+    var advanced = advancedRulesEl();
+    if (advanced) advanced.innerHTML = '<p class="hint">Loading&hellip;</p>';
     fetch('/agents/' + encodeURIComponent(name) + '/actauth')
       .then(function (r) { return r.json(); })
       .then(function (cfg) {
@@ -2022,46 +2340,53 @@ ${consoleShellScript}
       actionHtml += ' <button type="button" class="ability-install-deps-btn" data-name="' + escapeHtml(a.name) + '" title="npm install ' + escapeHtml(deps.join(' ')) + '">Install deps</button>';
     }
     actionHtml += ' <button type="button" class="ability-uninstall-btn" data-name="' + escapeHtml(a.name) + '">Uninstall</button>';
+    // Details: what it can do, with this agent's own permissions. Fetched
+    // by its install spec, pinned to the installed version for an npm name.
+    var spec = a.spec || a.name;
+    if (!/^(git[+:]|github:|https?:|file:|[.]|[/])/.test(spec) && spec.lastIndexOf('@') <= 0 && a.version) spec += '@' + a.version;
+    var detailsHtml = '<button type="button" class="ability-details-btn" data-spec="' + escapeHtml(spec) + '" data-agent="' + escapeHtml(currentName) + '">Details</button>';
     return '<tr>' +
       '<td><code>' + escapeHtml(a.name) + '</code></td>' +
       '<td>' + escapeHtml(a.version) + '</td>' +
+      '<td>' + leShell.abilityOriginBadge(a.origin) + '</td>' +
       '<td class="hint">' + escapeHtml((a.tools || []).join(', ')) + '</td>' +
-      '<td>' + actionHtml + '</td>' +
+      '<td style="white-space:nowrap">' + detailsHtml + ' ' + actionHtml + '</td>' +
       '</tr>';
   }
 
-  function renderAbilitySearchResultRow(pkg, installedNames) {
+  // A public (npm) or private ability not installed here yet: its
+  // details show the permissions it ships with.
+  function renderAbilitySearchResultRow(pkg, installedNames, spec) {
+    var installSpec = spec || pkg.name;
     var actionHtml = installedNames.indexOf(pkg.name) !== -1
       ? '<span class="hint">Installed</span>'
-      : '<button type="button" class="ability-install-btn" data-spec="' + escapeHtml(pkg.name) + '">Install</button>';
+      : '<button type="button" class="ability-install-btn" data-spec="' + escapeHtml(installSpec) + '">Install</button>';
+    var detailsSpec = spec || (pkg.version ? pkg.name + '@' + pkg.version : pkg.name);
     return '<tr>' +
-      '<td><code>' + escapeHtml(pkg.name) + '</code> <span class="hint">' + escapeHtml(pkg.version) + '</span></td>' +
+      '<td><code>' + escapeHtml(pkg.name) + '</code>' + (pkg.version ? ' <span class="hint">' + escapeHtml(pkg.version) + '</span>' : '') + '</td>' +
       '<td>' + escapeHtml(pkg.description || '') + '</td>' +
-      '<td>' + actionHtml + '</td>' +
+      '<td style="white-space:nowrap"><button type="button" class="ability-details-btn" data-spec="' + escapeHtml(detailsSpec) + '">Details</button> ' + actionHtml + '</td>' +
       '</tr>';
   }
 
   function renderAbilitiesConfigHtml(data) {
     var installed = data.abilities || [];
     var installedHtml = installed.length
-      ? '<table><thead><tr><th>Name</th><th>Version</th><th>Tools</th><th></th></tr></thead><tbody>' + installed.map(renderInstalledAbilityRow).join('') + '</tbody></table>' +
+      ? '<table><thead><tr><th>Name</th><th>Version</th><th>Source</th><th>Tools</th><th></th></tr></thead><tbody>' + installed.map(renderInstalledAbilityRow).join('') + '</tbody></table>' +
         '<p id="abilityUpgradeStatus" class="hint"></p>'
       : '<p class="hint">No abilities installed for this agent yet.</p>';
 
     return '<h3>Installed</h3>' + installedHtml +
-      '<h3 style="margin-top:24px">Search public abilities</h3>' +
-      '<form id="abilitySearchForm" class="add-source">' +
-        '<input type="text" name="q" placeholder="Search by name or keyword (optional)">' +
+      // Installing by name or spec is on the console's Abilities page.
+      '<p id="abilityInstallStatus" class="hint"></p>' +
+      '<h3 style="margin-top:24px;justify-content:flex-start;align-items:baseline;gap:8px">Public abilities <span class="hint" style="font-weight:400">npm packages tagged loopengine-ability</span></h3>' +
+      '<form id="abilitySearchForm" style="display:flex;gap:6px;margin:0 0 10px;max-width:560px">' +
+        '<input type="search" name="q" placeholder="Search abilities, e.g. gmail" aria-label="Search public abilities" style="flex:1">' +
         '<button type="submit">Search</button>' +
       '</form>' +
-      '<div id="abilitySearchResults"></div>' +
-      '<h3 style="margin-top:24px">Install from a spec</h3>' +
-      '<p class="hint">A git URL, a local <code>file:../path</code>, or a private npm package name/version — for anything not published publicly.</p>' +
-      '<form id="abilityInstallForm" class="add-source">' +
-        '<input type="text" name="spec" placeholder="e.g. git+https://github.com/org/repo.git or file:../my-ability" required>' +
-        '<button type="submit">Install</button>' +
-      '</form>' +
-      '<p id="abilityInstallStatus" class="hint"></p>';
+      '<div id="abilitySearchResults" style="margin-bottom:32px"></div>' +
+      '<h3 style="margin-top:24px;justify-content:flex-start;align-items:baseline;gap:8px">Private abilities <span class="hint" style="font-weight:400">your own, installed in this workspace</span></h3>' +
+      '<div id="abilityPrivateResults" style="margin-bottom:32px"><p class="hint">Loading&hellip;</p></div>';
   }
 
   function abilitiesContentEl() {
@@ -2230,6 +2555,34 @@ ${consoleShellScript}
       });
   }
 
+  // The workspace's private abilities (installed from the console's
+  // Abilities page, core/workspace-abilities.ts), each with Details and
+  // Install into this agent. With none, a link to install some there.
+  function loadPrivateAbilitiesFor(name, content, installedNames) {
+    var el = content.querySelector('#abilityPrivateResults');
+    if (!el) return;
+    fetch('/abilities/workspace')
+      .then(function (r) { return r.json(); })
+      .then(function (d) {
+        if (currentName !== name) return;
+        var abilities = d.abilities || [];
+        if (!abilities.length) {
+          el.innerHTML = '<p><a href="/config?section=abilities#private-abilities">Install private abilities</a></p>';
+          return;
+        }
+        el.innerHTML = '<table><thead><tr><th>Ability</th><th>What it does</th><th></th></tr></thead><tbody>' +
+          abilities.map(function (a) { return renderAbilitySearchResultRow(a, installedNames, a.spec); }).join('') + '</tbody></table>' +
+          '<p class="hint" style="margin:6px 0 0"><a href="/config?section=abilities#private-abilities">Install more private abilities</a></p>';
+        var installBtns = el.querySelectorAll('.ability-install-btn');
+        for (var i = 0; i < installBtns.length; i++) {
+          installBtns[i].addEventListener('click', function (ev) {
+            installAbilitySpec(name, ev.currentTarget.dataset.spec, content.querySelector('#abilityInstallStatus'), ev.currentTarget);
+          });
+        }
+      })
+      .catch(function (err) { el.innerHTML = '<p class="error">Could not list private abilities: ' + escapeHtml(err.message) + '</p>'; });
+  }
+
   // Shared by the initial (empty-query) load right after the tab opens
   // and the search form's own submit — the empty-query case is just
   // "list every published ability" (the keyword filter alone, no extra
@@ -2262,6 +2615,16 @@ ${consoleShellScript}
     var content = abilitiesContentEl();
     if (!content) return;
 
+    // Details buttons anywhere in the tab, including search results that
+    // arrive later. The tab's container outlives each redraw, so wired once.
+    if (!content.dataset.detailsWired) {
+      content.dataset.detailsWired = '1';
+      content.addEventListener('click', function (ev) {
+        var btn = ev.target.closest && ev.target.closest('.ability-details-btn');
+        if (btn) leShell.toggleAbilityDetails(btn);
+      });
+    }
+
     var upgradeStatusEl = content.querySelector('#abilityUpgradeStatus');
     var upgradeBtns = content.querySelectorAll('.ability-upgrade-btn');
     for (var u = 0; u < upgradeBtns.length; u++) {
@@ -2301,17 +2664,7 @@ ${consoleShellScript}
       // operator explicitly searches for something.
       runAbilitySearch(name, '', content, resultsEl, installedNames);
     }
-
-    var installForm = content.querySelector('#abilityInstallForm');
-    if (installForm) {
-      installForm.addEventListener('submit', function (ev) {
-        ev.preventDefault();
-        var spec = new FormData(installForm).get('spec');
-        var statusEl = content.querySelector('#abilityInstallStatus');
-        var btn = installForm.querySelector('button[type="submit"]');
-        installAbilitySpec(name, spec, statusEl, btn);
-      });
-    }
+    loadPrivateAbilitiesFor(name, content, installedNames);
   }
 
   function applyAbilitiesConfig(name, data) {
@@ -2537,8 +2890,10 @@ ${consoleShellScript}
       '<section><h3>Your tools (' + cfg.localTools.length + ')</h3>' + renderLocalTools(cfg.localTools) +
       '<div class="admin-subsection"><h4 id="httpToolFormHeading">Create an HTTP tool</h4>' + renderHttpToolFormHtml() + '</div>' +
       '</section>' +
-      '<section id="gatewayToolsSection">' +
-        '<h3>From integrations <button type="button" id="gatewayToolsRefreshBtn" class="hint-btn">Refresh</button></h3>' +
+      // Shown only for an agent that already has Composio tools
+      // (gateway-tools.yml): see applyGatewaySources.
+      '<section id="gatewayToolsSection" style="display:none">' +
+        '<h3>From Composio <button type="button" id="gatewayToolsRefreshBtn" class="hint-btn">Refresh</button></h3>' +
         '<div id="gatewayToolsContent"><p class="hint">Loading&hellip;</p></div>' +
       '</section>' +
       '<section><h3>Subagents (' + cfg.agentAsTools.length + ')</h3>' + renderTools(cfg.agentAsTools) + '</section>';
@@ -3082,6 +3437,8 @@ ${consoleShellScript}
   function applyGatewaySources(name, sources) {
     var content = gatewayContentEl();
     if (!content) return;
+    var section = detail.querySelector('#gatewayToolsSection');
+    if (section) section.style.display = sources.length ? '' : 'none';
     content.innerHTML = renderGatewayHtml(sources);
     wireGatewayHandlers(name);
     gatewayLoadedFor = name;
@@ -3110,10 +3467,18 @@ ${consoleShellScript}
 
   // ---- Tab switching + agent selection ----
 
-  var CONFIG_TABS = ['overview', 'tools', 'skills', 'abilities', 'actauth', 'messaging', 'schedules', 'env'];
+  var CONFIG_TABS = ['overview', 'abilities', 'actauth', 'messaging', 'schedules', 'env', 'advanced'];
+  // The old Tools and Skills tabs: now parts of Advanced. A link to one
+  // opens Advanced at that part.
+  var TAB_ALIASES = { tools: 'advanced', skills: 'advanced' };
+
+  function resolveTab(tab) {
+    tab = TAB_ALIASES[tab] || tab;
+    return CONFIG_TABS.indexOf(tab) === -1 ? 'overview' : tab;
+  }
 
-  function switchTab(tab) {
-    if (CONFIG_TABS.indexOf(tab) === -1) tab = 'overview';
+  function switchTab(requested) {
+    var tab = resolveTab(requested);
     currentTab = tab;
     leShell.setTab(tab);
     // Same URL a fresh load of this tab would have, so reload, back/forward
@@ -3125,10 +3490,15 @@ ${consoleShellScript}
     for (var i = 0; i < panels.length; i++) {
       panels[i].style.display = panels[i].dataset.tabPanel === tab ? 'block' : 'none';
     }
-    if (tab === 'tools' && gatewayLoadedFor !== currentName) {
+    if (tab === 'advanced' && gatewayLoadedFor !== currentName) {
       loadGatewayTab(currentName);
     }
-    if (tab === 'actauth' && actauthLoadedFor !== currentName) {
+    // Opened through an old Tools or Skills link: scroll to that part.
+    if (TAB_ALIASES[requested]) {
+      var part = detail.querySelector('#advanced-' + requested);
+      if (part) part.scrollIntoView({ block: 'start' });
+    }
+    if ((tab === 'actauth' || tab === 'advanced') && actauthLoadedFor !== currentName) {
       loadActauthTab(currentName);
     }
     if (tab === 'messaging') loadApprovalsSection(currentName);
@@ -3233,8 +3603,18 @@ ${consoleShellScript}
       }) +
       '<div class="le-scroll"><div class="le-page" style="display:block">' +
       '<div class="tab-panel" data-tab-panel="overview">' + renderOverviewHtml(cfg) + '</div>' +
-      '<div class="tab-panel" data-tab-panel="skills">' + renderSkillsTabHtml(cfg) + '</div>' +
-      '<div class="tab-panel" data-tab-panel="tools">' + renderToolsTabHtml(cfg) + '</div>' +
+      // Advanced: the agent's own tools (and Composio, subagents), then its
+      // own skills. Each part keeps its old data-tab-panel name, which the
+      // code that redraws it looks for; only .tab-panel is shown or hidden.
+      '<div class="tab-panel" data-tab-panel="advanced">' +
+        '<p class="muted" style="margin:0 0 20px">For building your own: tools and skills that don&#39;t come from an ability, Composio tools, subagents and permission rules in full. What each ability adds is in its Details on the Abilities tab.</p>' +
+        '<h2 class="advanced-part" id="advanced-tools">Tools</h2>' +
+        '<div data-tab-panel="tools">' + renderToolsTabHtml(cfg) + '</div>' +
+        '<h2 class="advanced-part" id="advanced-skills">Skills</h2>' +
+        '<div data-tab-panel="skills">' + renderSkillsTabHtml(cfg) + '</div>' +
+        '<h2 class="advanced-part" id="advanced-rules">Permission rules</h2>' +
+        '<div id="advancedRulesContent"><p class="hint">Loading&hellip;</p></div>' +
+      '</div>' +
       '<div class="tab-panel" data-tab-panel="actauth">' + renderActauthTabPlaceholder() + '</div>' +
       '<div class="tab-panel" data-tab-panel="messaging">' + renderMessagingTabPlaceholder() + '</div>' +
       '<div class="tab-panel" data-tab-panel="env">' + renderEnvTabPlaceholder() + '</div>' +
@@ -3252,8 +3632,10 @@ ${consoleShellScript}
 
     empty.style.display = 'none';
     detail.style.display = 'flex';
-    switchTab(currentTab);
+    switchTab(initialAdvancedPart || currentTab);
+    initialAdvancedPart = null;
     fillOverviewCards(cfg.name);
+    loadWorkflowsSection(cfg.name);
   }
 
   function selectAgent(name) {
@@ -3297,7 +3679,9 @@ ${consoleShellScript}
   });
 
   var initialParams = new URLSearchParams(location.search);
-  currentTab = CONFIG_TABS.indexOf(initialParams.get('tab')) === -1 ? 'overview' : initialParams.get('tab');
+  currentTab = resolveTab(initialParams.get('tab'));
+  // An old ?tab=tools or ?tab=skills link: scrolled to that part once loaded.
+  var initialAdvancedPart = TAB_ALIASES[initialParams.get('tab')] ? initialParams.get('tab') : null;
   leShell.ready.then(function (agents) {
     if (!agents.length) {
       empty.innerHTML = leShell.loadError()