loopengine 0.1.98 → 0.2.0

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

@@ -78,6 +78,32 @@ export const globalConfigPageHtml = `<!doctype html>
   form.key-form button { font-size: 12px; }
   .key-msg { font-size: 11px; margin-top: 4px; }
   .key-msg.bad { color: var(--bad); }
+  .app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
+  .app-tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: grid; gap: 8px; align-content: start; background: var(--bg); }
+  .app-head { display: flex; gap: 10px; align-items: center; min-width: 0; }
+  .app-head strong { overflow-wrap: anywhere; }
+  .app-icon { width: 32px; height: 32px; border-radius: 8px; flex: none; object-fit: contain; background: var(--surface); border: 1px solid var(--line); }
+  .app-letter { width: 32px; height: 32px; border-radius: 8px; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: var(--accent-soft, var(--surface)); color: var(--accent); border: 1px solid var(--line); }
+  .app-desc { font-size: 12.5px; color: var(--ink-muted); margin: 0; }
+  .app-foot { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
+  .app-form { display: grid; gap: 6px; }
+  .app-form input { font: inherit; font-size: 12px; font-family: ui-monospace, monospace; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); width: 100%; box-sizing: border-box; }
+  .app-row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--line); }
+  .app-row:first-child { border-top: 0; }
+  .app-row-main { flex: 1; min-width: 200px; display: grid; gap: 3px; }
+  .app-list { border: 1px solid var(--line); border-radius: var(--radius); }
+  .app-tools { display: grid; gap: 8px; margin-top: 8px; font-size: 12.5px; }
+  .app-tools input[type=search] { font: inherit; font-size: 12px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); max-width: 280px; }
+  .app-tool-list { display: grid; gap: 2px; max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px; }
+  .app-tool { display: flex; gap: 8px; align-items: flex-start; padding: 5px 6px; border-radius: 6px; cursor: pointer; }
+  .app-tool:hover { background: var(--surface); }
+  .app-tool input { margin-top: 3px; }
+  .app-tool code { overflow-wrap: anywhere; }
+  .app-tool-desc { display: block; }
+  .app-decision { font: inherit; font-size: 11.5px; padding: 1px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
+  .app-cats { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
+  .app-cats button { font-size: 12px; }
+  .app-cats button.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
 </style>
 </head>
 <body data-le-page="config">
@@ -89,9 +115,14 @@ ${consoleSidebarHtml}
       <div><h1>Models</h1><p>API keys for each model provider, and which agents use each one. A saved key is stored on this server and never shown again.</p></div></div></div>
     <div class="le-scroll"><div class="le-page" style="display:block"><div id="modelsContent"><p class="hint">Loading&hellip;</p></div></div></div>
   </div>
+  <div class="section-panel" data-section-panel="apps" style="display:none">
+    <div class="le-head plain"><div class="le-title"><button type="button" class="le-menu-btn" data-le-menu aria-label="Open navigation">&#9776;</button>
+      <div><h1>Apps</h1><p>Connect the apps your agents work in. All of a connected app&rsquo;s tools become available to the workspace, each with a default permission; each agent then chooses which tools it gets, from its Apps tab.</p></div></div></div>
+    <div class="le-scroll"><div class="le-page" style="display:block"><div id="appsContent"><p class="hint">Loading&hellip;</p></div></div></div>
+  </div>
   <div class="section-panel" data-section-panel="abilities" style="display:none">
     <div class="le-head plain"><div class="le-title"><button type="button" class="le-menu-btn" data-le-menu aria-label="Open navigation">&#9776;</button>
-      <div><h1>Abilities</h1><p>How agents reach your apps, such as Gmail, Shopify or GitHub. An ability installed into an agent adds its tools, skills and permission rules.</p></div></div></div>
+      <div><h1>Abilities</h1><p>What agents can do beyond your connected apps: search the web, read documents, schedule work, or your own code. An ability added to an agent brings its tools, skills and permission rules.</p></div></div></div>
     <div class="le-scroll"><div class="le-page" style="display:block"><div id="abilitiesContent"><p class="hint">Loading&hellip;</p></div></div></div>
   </div>
   <div class="section-panel" data-section-panel="settings" style="display:none">
@@ -221,12 +252,12 @@ ${consoleShellScript}
 
   // ---- Abilities section ----
   // How agents reach outside apps. Public abilities (npm) are browsed
-  // here and installed from an agent's own Abilities tab. A private one
+  // here and installed from an agent's own Apps tab. A private one
   // (from the sources in Settings) is installed here into the workspace
   // (core/workspace-abilities.ts), then added to any agent from its tab.
 
   // An ability's details (tools with their permissions, skills, settings)
-  // come from the console shell, shared with each agent's Abilities tab.
+  // come from the console shell, shared with each agent's Apps tab.
   var toggleAbilityDetails = leShell.toggleAbilityDetails;
 
   function detailsButton(spec) {
@@ -240,13 +271,13 @@ ${consoleShellScript}
   function renderAbilities() {
     var content = document.getElementById('abilitiesContent');
     content.innerHTML = '<section>' +
-      '<h4>Public <span class="hint">npm packages tagged loopengine-ability; add one to an agent from its Abilities tab</span></h4>' +
+      '<h4>Public <span class="hint">npm packages tagged loopengine-ability; add one to an agent from its Apps tab</span></h4>' +
       '<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"><p class="hint">Loading&hellip;</p></div>' +
-      '<h4 id="private-abilities">Private <span class="hint">your own, from the sources in <a href="/config?section=settings">Settings</a>; install one into the workspace, then add it to agents from their Abilities tab</span></h4>' +
+      '<h4 id="private-abilities">Private <span class="hint">your own, from the sources in <a href="/config?section=settings">Settings</a>; install one into the workspace, then add it to agents from their Apps tab</span></h4>' +
       '<p id="abilityInstallStatus" class="hint"></p>' +
       '<div id="workspaceAbilities"></div>' +
       '<div id="privateAbilities"><p class="hint">Loading&hellip;</p></div>' +
@@ -296,7 +327,7 @@ ${consoleShellScript}
       .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
       .then(function (r) {
         if (!r.ok) throw new Error(r.body.error || 'upload failed');
-        status.textContent = 'Uploaded ' + label + ' into the workspace. Add it to an agent from the agent' + String.fromCharCode(8217) + 's Abilities tab.';
+        status.textContent = 'Uploaded ' + label + ' into the workspace. Add it to an agent from the agent' + String.fromCharCode(8217) + 's Apps tab.';
         workspaceAbilities = r.body.abilities || [];
         renderWorkspaceAbilities();
         renderPrivateAbilities();
@@ -367,14 +398,17 @@ ${consoleShellScript}
   function renderWorkspaceAbilities() {
     var el = document.getElementById('workspaceAbilities');
     if (!el || !workspaceAbilities) return;
-    el.innerHTML = workspaceAbilities.length
-      ? '<div class="source"><p style="margin:0 0 8px"><strong>In this workspace</strong> <span class="hint">add these to an agent from its Abilities tab</span></p>' +
-          '<table><thead><tr><th>Ability</th><th>From</th><th></th></tr></thead><tbody>' + workspaceAbilities.map(function (a) {
+    // Abilities made from a connected app are listed under Apps.
+    var fromApps = workspaceAbilities.filter(function (a) { return a.app || a.source.indexOf('mcp:') === 0; }).length;
+    var own = workspaceAbilities.filter(function (a) { return !a.app && a.source.indexOf('mcp:') !== 0; });
+    el.innerHTML = (fromApps ? '<p class="hint" style="margin:0 0 8px">' + fromApps + ' connected app' + (fromApps === 1 ? '' : 's') + ' also in this workspace: see <a href="/config?section=apps">Apps</a>.</p>' : '') + (own.length
+      ? '<div class="source"><p style="margin:0 0 8px"><strong>In this workspace</strong> <span class="hint">add these to an agent from its Apps tab</span></p>' +
+          '<table><thead><tr><th>Ability</th><th>From</th><th></th></tr></thead><tbody>' + own.map(function (a) {
             return '<tr><td><code>' + escapeHtml(a.name) + '</code>' + (a.version ? ' <span class="hint">' + escapeHtml(a.version) + '</span>' : '') + '</td>' +
               '<td><span class="hint">' + escapeHtml(a.source.indexOf('upload:') === 0 ? 'Uploaded ' + a.source.slice(7) : a.source) + '</span></td>' +
               '<td style="white-space:nowrap">' + detailsButton(a.spec) + ' <button type="button" class="delete-btn workspace-remove-btn" data-name="' + escapeHtml(a.name) + '">Remove</button></td></tr>';
           }).join('') + '</tbody></table></div>'
-      : '';
+      : '');
   }
 
   // Each source's abilities: Install puts one into the workspace; one
@@ -408,7 +442,7 @@ ${consoleShellScript}
     }).join('');
   }
 
-  // Linked from an agent's Abilities tab (/config?section=abilities#private-abilities):
+  // Linked from an agent's Apps tab (/config?section=abilities#private-abilities):
   // once every list has loaded, so the public results don't push it down.
   var scrolledToPrivate = false;
   function scrollToPrivateIfLinked() {
@@ -472,7 +506,7 @@ ${consoleShellScript}
       .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
       .then(function (r) {
         if (!r.ok) throw new Error(r.body.error || 'request failed');
-        status.textContent = 'Installed ' + spec + ' into the workspace. Add it to an agent from the agent' + String.fromCharCode(8217) + 's Abilities tab.';
+        status.textContent = 'Installed ' + spec + ' into the workspace. Add it to an agent from the agent' + String.fromCharCode(8217) + 's Apps tab.';
         workspaceAbilities = r.body.abilities || [];
         renderWorkspaceAbilities();
         renderPrivateAbilities();
@@ -503,6 +537,251 @@ ${consoleShellScript}
     loadedSections.abilities = true;
   }
 
+  // ---- Apps section ----
+  // Popular apps' own MCP servers (core/mcp-apps.ts) and the connected
+  // ones. Connecting makes a workspace ability from the server; agents
+  // add it from their Apps tab.
+
+  var apps = null;
+  var appCategory = 'All';
+  // Open tool panels, by ability: { tools, filter, error, busy }.
+  var openTools = {};
+  var appSearch = { q: '', servers: null, error: '' };
+
+  function appLetter(title) {
+    return '<span class="app-letter" aria-hidden="true">' + escapeHtml((title || '?').charAt(0).toUpperCase()) + '</span>';
+  }
+  function appIcon(app) {
+    return app.icon
+      ? '<img class="app-icon" src="' + escapeHtml(app.icon) + '" alt="" data-title="' + escapeHtml(app.title || '') + '" loading="lazy" referrerpolicy="no-referrer">'
+      : appLetter(app.title);
+  }
+  // An icon that doesn't load becomes the app's first letter.
+  document.getElementById('appsContent').addEventListener('error', function (ev) {
+    var img = ev.target;
+    if (!img.classList || !img.classList.contains('app-icon')) return;
+    var holder = document.createElement('span');
+    holder.innerHTML = appLetter(img.dataset.title);
+    img.replaceWith(holder.firstChild);
+  }, true);
+
+  function connectForm(id) {
+    return '<form class="app-form" data-connect="' + escapeHtml(id) + '">' +
+      '<input type="password" name="key" autocomplete="off" placeholder="API key, if it needs one" aria-label="API key">' +
+      '<div class="app-foot"><button type="submit">Connect</button><button type="button" class="app-cancel">Cancel</button></div>' +
+      '<p class="hint app-msg" style="margin:0"></p></form>';
+  }
+
+  function renderApps() {
+    var el = document.getElementById('appsContent');
+    if (!apps) return;
+    var categories = ['All'];
+    apps.apps.forEach(function (a) { if (categories.indexOf(a.category) === -1) categories.push(a.category); });
+    var shown = apps.apps.filter(function (a) { return appCategory === 'All' || a.category === appCategory; });
+    el.innerHTML =
+      (apps.canConnect ? '' : '<p class="error">Connecting an app saves its key on this server, so it needs LOOPENGINE_ADMIN_AUTH set first.</p>') +
+      '<section><h3>Connected</h3>' + (apps.connected.length
+        ? '<div class="app-list">' + apps.connected.map(function (c) {
+            var used = c.agents.length ? 'Used by ' + c.agents.map(escapeHtml).join(', ') : 'Not added to an agent yet: add <code>' + escapeHtml(c.ability) + '</code> from an agent' + String.fromCharCode(8217) + 's Apps tab';
+            return '<div class="app-row"><div class="app-head">' + appIcon(findApp(c) || c) + '</div>' +
+              '<div class="app-row-main"><div><strong>' + escapeHtml(c.title) + '</strong> <span class="hint">' + c.tools.length + ' tool' + (c.tools.length === 1 ? '' : 's') + ' &middot; <code>' + escapeHtml(c.ability) + '</code></span></div>' +
+                '<div class="hint">' + used + '</div>' +
+                (c.keyEnv && !c.keySet ? '<div class="error" style="font-size:12px">Its key, ' + escapeHtml(c.keyEnv) + ', isn' + String.fromCharCode(8217) + 't set.</div>' : '') +
+              (openTools[c.ability] ? toolsPanel(c.ability) : '') +
+              '</div>' +
+              '<div class="app-foot"><button type="button" class="app-tools-btn" data-ability="' + escapeHtml(c.ability) + '">' + (openTools[c.ability] ? 'Hide tools' : 'Tools') + '</button> <button type="button" class="delete-btn app-disconnect" data-ability="' + escapeHtml(c.ability) + '">Disconnect</button></div></div>';
+          }).join('') + '</div>'
+        : '<p class="hint">No apps connected yet. Pick one below.</p>') + '</section>' +
+      '<section><h3>Popular apps</h3>' +
+        '<div class="app-cats">' + categories.map(function (c) { return '<button type="button" class="' + (c === appCategory ? 'active' : '') + '" data-app-cat="' + escapeHtml(c) + '">' + escapeHtml(c) + '</button>'; }).join('') + '</div>' +
+        '<div class="app-grid">' + shown.map(function (a) {
+          return '<div class="app-tile" data-app="' + escapeHtml(a.id) + '"><div class="app-head">' + appIcon(a) + '<div><strong>' + escapeHtml(a.title) + '</strong><div class="hint">' + escapeHtml(a.category) + '</div></div></div>' +
+            '<p class="app-desc">' + escapeHtml(a.description) + '</p>' +
+            '<div class="app-slot">' + (a.connected ? '<span class="badge badge-custom">Connected</span>' : '<button type="button" class="app-connect" data-id="' + escapeHtml(a.id) + '"' + (apps.canConnect ? '' : ' disabled') + '>Connect</button>') + '</div></div>';
+        }).join('') + '</div>' +
+        '<p class="hint">Each is the app' + String.fromCharCode(8217) + 's own MCP server. Apps that only offer a sign-in (OAuth) can' + String.fromCharCode(8217) + 't be connected yet; their Connect says so.</p>' +
+      '</section>' +
+      '<section><h3>More apps</h3>' +
+        '<form id="appSearchForm" style="display:flex;gap:6px;margin:0 0 10px;max-width:560px"><input type="search" name="q" placeholder="Search the MCP Registry, e.g. calendly" aria-label="Search apps" style="flex:1" value="' + escapeHtml(appSearch.q) + '"><button type="submit">Search</button></form>' +
+        '<div id="appSearchResults">' + renderAppSearch() + '</div>' +
+      '</section>';
+  }
+
+  var DECISION_LABEL = { allow: 'Allow', ask: 'Ask me', deny: 'Never' };
+
+  function toolsPanel(ability) {
+    var panel = openTools[ability];
+    if (panel.error) return '<div class="app-tools"><p class="error" style="margin:0">' + escapeHtml(panel.error) + '</p></div>';
+    if (!panel.tools) return '<div class="app-tools"><p class="hint" style="margin:0">Asking the app for its tools' + String.fromCharCode(8230) + '</p></div>';
+    var used = panel.tools.filter(function (t) { return t.usedBy.length; }).length;
+    var f = (panel.filter || '').toLowerCase();
+    var shown = panel.tools.filter(function (t) { return !f || (t.remote + ' ' + t.description).toLowerCase().indexOf(f) !== -1; });
+    return '<div class="app-tools">' +
+      '<p class="hint" style="margin:0">All ' + panel.tools.length + ' tools are available to this workspace; ' + used + ' are used by an agent. Agents choose their own tools and permissions when you add the app to them (their Apps tab). The permission here is the default an agent starts from: Allow runs it, Ask me waits for your OK, Never blocks it.</p>' +
+      '<div class="app-foot">' + (panel.tools.length > 12 ? '<input type="search" class="app-tools-filter" data-ability="' + escapeHtml(ability) + '" placeholder="Filter tools" value="' + escapeHtml(panel.filter || '') + '" aria-label="Filter tools">' : '') +
+        '<button type="button" class="app-refresh" data-ability="' + escapeHtml(ability) + '"' + (apps.canConnect && !panel.busy ? '' : ' disabled') + '>Check for new tools</button></div>' +
+      (panel.message ? '<p class="' + (panel.messageBad ? 'error' : 'hint') + '" style="margin:0">' + escapeHtml(panel.message) + '</p>' : '') +
+      '<div class="app-tool-list">' + shown.map(function (t) {
+        var who = t.usedBy.length
+          ? 'Used by ' + t.usedBy.map(function (u) { return escapeHtml(u.agent) + ' (' + escapeHtml(DECISION_LABEL[u.decision]) + ')'; }).join(', ')
+          : 'Not used by an agent';
+        return '<div class="app-tool"><span><code>' + escapeHtml(t.name) + '</code> ' +
+          '<select class="app-decision" data-tool="' + escapeHtml(t.remote) + '" data-ability="' + escapeHtml(ability) + '" aria-label="Default permission for ' + escapeHtml(t.name) + '"' + (apps.canConnect && !panel.busy ? '' : ' disabled') + '>' +
+            ['allow', 'ask', 'deny'].map(function (d) { return '<option value="' + d + '"' + (d === t.decision ? ' selected' : '') + '>' + DECISION_LABEL[d] + '</option>'; }).join('') + '</select>' +
+          (t.destructive ? ' <span class="hint">destructive</span>' : t.readOnly ? ' <span class="hint">read-only</span>' : '') +
+          (t.description ? '<span class="hint app-tool-desc">' + escapeHtml(t.description) + '</span>' : '') +
+          '<span class="hint app-tool-desc">' + who + '</span></span></div>';
+      }).join('') + '</div></div>';
+  }
+
+  function loadTools(ability, fresh) {
+    openTools[ability] = { tools: null, filter: openTools[ability] ? openTools[ability].filter : '' };
+    renderApps();
+    fetch('/config/apps/tools?ability=' + encodeURIComponent(ability) + (fresh ? '&fresh=1' : ''), { cache: 'no-store' })
+      .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
+      .then(function (r) {
+        if (!openTools[ability]) return;
+        if (!r.ok) openTools[ability].error = r.body.error || 'Could not list its tools.';
+        else openTools[ability].tools = r.body.tools;
+        renderApps();
+      })
+      .catch(function (err) { if (openTools[ability]) { openTools[ability].error = err.message; renderApps(); } });
+  }
+
+  // Sets a tool's default permission, or (tool null) checks the server
+  // for tools it added since.
+  function setDefault(ability, tool, decision) {
+    var panel = openTools[ability];
+    panel.busy = true;
+    panel.message = (tool ? 'Setting ' + tool + String.fromCharCode(8217) + 's default to ' + DECISION_LABEL[decision] : 'Checking the app for new tools') + String.fromCharCode(8230);
+    panel.messageBad = false;
+    renderApps();
+    var path = tool ? '/config/apps/tools' : '/config/apps/refresh';
+    fetch(path, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ ability: ability, tool: tool, decision: decision }) })
+      .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
+      .then(function (r) {
+        panel.busy = false;
+        if (!r.ok) { panel.message = r.body.error || 'Could not change it.'; panel.messageBad = true; renderApps(); return; }
+        panel.tools = r.body.tools;
+        if (r.body.connected) apps = { apps: r.body.apps, connected: r.body.connected, canConnect: r.body.canConnect };
+        panel.message = tool
+          ? tool + ' now starts at ' + DECISION_LABEL[decision] + ' for agents that add it; agents that have it keep theirs.'
+          : (r.body.added.length || r.body.removed.length
+            ? (r.body.added.length ? 'New: ' + r.body.added.join(', ') + '. ' : '') + (r.body.removed.length ? 'No longer offered: ' + r.body.removed.join(', ') + '.' : '')
+            : 'No new tools.');
+        renderApps();
+      })
+      .catch(function (err) { panel.busy = false; panel.message = err.message; panel.messageBad = true; renderApps(); });
+  }
+
+  function findApp(c) {
+    for (var i = 0; i < apps.apps.length; i++) if (apps.apps[i].id === c.id || apps.apps[i].url === c.url) return apps.apps[i];
+    return null;
+  }
+
+  function renderAppSearch() {
+    if (appSearch.error) return '<p class="error">' + escapeHtml(appSearch.error) + '</p>';
+    if (!appSearch.servers) return '<p class="hint">Over a thousand apps publish an MCP server. Verified means it' + String.fromCharCode(8217) + 's on its publisher' + String.fromCharCode(8217) + 's own domain; only add a key to one you trust.</p>';
+    if (!appSearch.servers.length) return '<p class="hint">Nothing found for ' + escapeHtml(appSearch.q) + '.</p>';
+    return '<div class="app-list">' + appSearch.servers.map(function (s) {
+      var connected = apps.connected.some(function (c) { return c.url === s.url; });
+      return '<div class="app-row" data-app="' + escapeHtml(s.id) + '"><div class="app-head">' + appIcon(s) + '</div>' +
+        '<div class="app-row-main"><div><strong>' + escapeHtml(s.title) + '</strong> ' + (s.verified ? '<span class="badge badge-custom">Verified</span>' : '<span class="badge badge-default">Unverified</span>') + '</div>' +
+          '<div class="hint">' + escapeHtml(s.url) + (s.description ? ' &middot; ' + escapeHtml(s.description) : '') + '</div></div>' +
+        '<div class="app-slot">' + (connected ? '<span class="badge badge-custom">Connected</span>' : '<button type="button" class="app-connect" data-id="' + escapeHtml(s.id) + '"' + (apps.canConnect ? '' : ' disabled') + '>Connect</button>') + '</div></div>';
+    }).join('') + '</div>';
+  }
+
+  function loadApps() {
+    loadedSections.apps = true;
+    fetch('/config/apps', { cache: 'no-store' })
+      .then(function (r) { return r.json(); })
+      .then(function (d) { apps = d; renderApps(); })
+      .catch(function (err) { document.getElementById('appsContent').innerHTML = '<p class="error">Could not load apps: ' + escapeHtml(err.message) + '</p>'; });
+  }
+
+  document.getElementById('appsContent').addEventListener('click', function (ev) {
+    var t = ev.target;
+    if (t.dataset && t.dataset.appCat) { appCategory = t.dataset.appCat; renderApps(); return; }
+    if (t.classList.contains('app-refresh')) { setDefault(t.dataset.ability, null, null); return; }
+    if (t.classList.contains('app-tools-btn')) {
+      if (openTools[t.dataset.ability]) { delete openTools[t.dataset.ability]; renderApps(); }
+      else loadTools(t.dataset.ability, false);
+      return;
+    }
+    if (t.classList.contains('app-connect')) {
+      var slot = t.parentNode;
+      slot.innerHTML = connectForm(t.dataset.id);
+      slot.querySelector('input').focus();
+      return;
+    }
+    if (t.classList.contains('app-cancel')) { renderApps(); return; }
+    if (t.classList.contains('app-disconnect')) {
+      if (t.dataset.confirming !== '1') { t.dataset.confirming = '1'; t.textContent = 'Click again to disconnect'; return; }
+      t.disabled = true;
+      fetch('/config/apps/connect?ability=' + encodeURIComponent(t.dataset.ability), { method: 'DELETE' })
+        .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
+        .then(function (r) {
+          if (!r.ok) throw new Error(r.body.error || 'request failed');
+          apps = r.body;
+          renderApps();
+        })
+        .catch(function (err) { t.disabled = false; t.textContent = 'Could not disconnect: ' + err.message; });
+    }
+  });
+
+  document.getElementById('appsContent').addEventListener('change', function (ev) {
+    var t = ev.target;
+    if (t.classList.contains('app-decision')) setDefault(t.dataset.ability, t.dataset.tool, t.value);
+  });
+  document.getElementById('appsContent').addEventListener('input', function (ev) {
+    var t = ev.target;
+    if (!t.classList.contains('app-tools-filter')) return;
+    openTools[t.dataset.ability].filter = t.value;
+    renderApps();
+    var again = document.querySelector('.app-tools-filter[data-ability="' + t.dataset.ability + '"]');
+    if (again) { again.focus(); again.setSelectionRange(again.value.length, again.value.length); }
+  });
+
+  document.getElementById('appsContent').addEventListener('submit', function (ev) {
+    ev.preventDefault();
+    var form = ev.target;
+    if (form.id === 'appSearchForm') {
+      var q = form.q.value.trim();
+      appSearch = { q: q, servers: null, error: '' };
+      document.getElementById('appSearchResults').innerHTML = '<p class="hint">Searching' + String.fromCharCode(8230) + '</p>';
+      fetch('/config/apps/search?q=' + encodeURIComponent(q))
+        .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
+        .then(function (r) {
+          if (!r.ok) throw new Error(r.body.error || 'search failed');
+          appSearch.servers = r.body.servers || [];
+          document.getElementById('appSearchResults').innerHTML = renderAppSearch();
+        })
+        .catch(function (err) { appSearch.error = 'Could not search: ' + err.message; document.getElementById('appSearchResults').innerHTML = renderAppSearch(); });
+      return;
+    }
+    if (!form.dataset.connect) return;
+    var btn = form.querySelector('button[type=submit]');
+    var msg = form.querySelector('.app-msg');
+    btn.disabled = true;
+    msg.className = 'hint app-msg';
+    msg.textContent = 'Connecting' + String.fromCharCode(8230) + ' it looks at the app' + String.fromCharCode(8217) + 's tools and sets their permissions, which can take a minute.';
+    fetch('/config/apps/connect', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id: form.dataset.connect, key: form.key.value }) })
+      .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
+      .then(function (r) {
+        if (!r.ok) throw new Error(r.body.error || 'request failed');
+        apps = r.body;
+        // Straight to its tools, to choose what agents may use.
+        if (r.body.connectedAbility) loadTools(r.body.connectedAbility, false);
+        else renderApps();
+      })
+      .catch(function (err) {
+        btn.disabled = false;
+        msg.className = 'error app-msg';
+        msg.textContent = err.message;
+      });
+  });
+
   // ---- Settings section ----
 
   function renderSettings(d) {
@@ -841,6 +1120,7 @@ ${consoleShellScript}
     }
     if (section === 'models' && !loadedSections.models) loadModels();
     if (section === 'abilities' && !loadedSections.abilities) loadAbilities();
+    if (section === 'apps' && !loadedSections.apps) loadApps();
     if (section === 'settings' && !loadedSections.settings) loadSettings();
   }
 
@@ -855,7 +1135,7 @@ ${consoleShellScript}
   var requestedSection = new URLSearchParams(location.search).get('section');
   // ?section=gateways is the old Integrations page's link.
   if (requestedSection === 'gateways') requestedSection = 'abilities';
-  var initialSection = requestedSection === 'abilities' || requestedSection === 'models' || requestedSection === 'settings' ? requestedSection : currentSection;
+  var initialSection = requestedSection === 'abilities' || requestedSection === 'apps' || requestedSection === 'models' || requestedSection === 'settings' ? requestedSection : currentSection;
   switchSection(initialSection);
 })();
 </script>

package/dist/web/interview-admin.js

@@ -125,6 +125,8 @@ export function setupChecklist(candidate, agentName) {
         switch (need.kind) {
             case 'ability':
                 return { label: `Install the ${need.name ?? need.description} ability`, href: tab('abilities') };
+            case 'app':
+                return { label: `Connect ${need.name ?? need.description} on the Apps page, then add it from the agent's Apps tab`, href: '/config?section=apps' };
             case 'api':
                 return { label: `Connect ${need.description} (an HTTP tool, or an MCP server)`, href: tab('advanced') };
             case 'key':

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

@@ -10,7 +10,12 @@ export interface TemplateCreateDeps {
     /** Installs an ability (an npm spec) into the agent. Absent where
      * installing isn't allowed (no admin login): the abilities then head the
      * checklist instead. */
-    installAbility?: (name: string, spec: string) => Promise<void>;
+    installAbility?: (name: string, spec: string, options?: {
+        mcpTools?: string[];
+    }) => Promise<void>;
+    /** The workspace ability of a connected app (by catalog id), if it's
+     * connected. */
+    prepareApp?: (id: string) => Promise<string | undefined>;
     /** A setting as the agent sees it (its own, else the shared one). */
     envValue(name: string, variable: string): string | undefined;
     /** Whether approval requests from the agent reach anyone. */
@@ -37,12 +42,15 @@ export interface TemplateSummary {
     trigger: string;
     asksFirst: string[];
     abilities: string[];
+    apps: string[];
     schedule: string | null;
 }
 export interface TemplatePreview {
     name: string;
     systemPrompt: string;
     abilities: string[];
+    /** Apps it uses, by title. */
+    apps: string[];
     skills: string[];
     rules: {
         tool: string;
@@ -88,7 +96,7 @@ export declare function previewTemplate(id: string, deps: Pick<TemplateCreateDep
 export declare function templateChecklist(template: StarterTemplate, name: string, deps: Pick<TemplateCreateDeps, 'envValue' | 'messagingConfigured'>, failed?: {
     name: string;
     error: string;
-}[]): TemplateChecklistItem[];
+}[], appsToConnect?: string[]): TemplateChecklistItem[];
 /** Creates a new agent from the template, with its whole setup, under the
  * first free name, so the same template can be used more than once. */
 export declare function createFromTemplate(id: string, deps: TemplateCreateDeps | LegacyTemplateCreateDeps): Promise<CreatedTemplateAgent>;

package/dist/web/templates-admin.js

@@ -24,7 +24,7 @@ export function installFailureReason(err) {
     if (/E404|404 Not Found|is not in this registry/i.test(text))
         return "it isn't published on npm yet";
     if (/ENOTFOUND|ECONNREFUSED|ETIMEDOUT|EAI_AGAIN/.test(text))
-        return 'npm could not be reached; try again from the Abilities tab';
+        return 'npm could not be reached; try again from the Apps tab';
     const line = text.split('\n').map((l) => l.trim()).find((l) => l && !/^Command failed:/.test(l)) ?? text.split('\n')[0];
     return line.length > 200 ? `${line.slice(0, 200)}…` : line;
 }
@@ -57,6 +57,7 @@ export function listTemplates() {
         trigger: setup.schedule ? describeTemplateSchedule(setup.schedule) : c.trigger.description,
         asksFirst: c.asksFirst,
         abilities: setup.abilities,
+        apps: (setup.apps ?? []).map((a) => a.title),
         schedule: setup.schedule ? describeTemplateSchedule(setup.schedule) : null,
     }));
 }
@@ -72,6 +73,7 @@ export function previewTemplate(id, deps) {
         name,
         systemPrompt: template.candidate.agent.systemPrompt,
         abilities: setup.abilities,
+        apps: (setup.apps ?? []).map((a) => a.title),
         skills: (setup.skills ?? []).map((s) => s.id),
         rules: setup.rules.map((r) => ({ tool: r.tool, decision: r.decision })),
         // A key set for the whole project already counts for a new agent.
@@ -83,9 +85,11 @@ export function previewTemplate(id, deps) {
     };
 }
 /** What's left once the agent exists, each linked to where it's done. */
-export function templateChecklist(template, name, deps, failed = []) {
+export function templateChecklist(template, name, deps, failed = [], appsToConnect = []) {
     const tab = (t) => `/agents/config?agent=${encodeURIComponent(name)}&tab=${t}`;
     const items = [];
+    for (const title of appsToConnect)
+        items.push({ label: `Connect ${title} on the Apps page, then add it to ${name} from its Apps tab`, href: '/config?section=apps' });
     for (const f of failed)
         items.push({ label: `Install the ${f.name} ability (it couldn't be installed: ${f.error})`, href: tab('abilities') });
     const missing = keyGroups(template).filter((names) => !names.some((n) => deps.envValue(name, n)));
@@ -147,6 +151,35 @@ export async function createFromTemplateObject(template, deps) {
             failed.push({ name: spec, error: installFailureReason(err) });
         }
     }
+    // Apps: a connected one is added with just the tools the template relies
+    // on; one not connected heads the checklist.
+    const appsToConnect = [];
+    for (const app of setup.apps ?? []) {
+        let spec;
+        try {
+            spec = deps.prepareApp ? await deps.prepareApp(app.id) : undefined;
+        }
+        catch (err) {
+            failed.push({ name: app.title, error: err instanceof Error ? err.message : String(err) });
+            continue;
+        }
+        if (!spec) {
+            appsToConnect.push(app.title);
+            continue;
+        }
+        if (!deps.installAbility) {
+            failed.push({ name: app.title, error: 'adding apps needs LOOPENGINE_ADMIN_AUTH set on the server' });
+            continue;
+        }
+        try {
+            // Just the tools the template relies on.
+            await deps.installAbility(name, spec, { mcpTools: app.tools });
+            installed.push(app.title);
+        }
+        catch (err) {
+            failed.push({ name: app.title, error: installFailureReason(err) });
+        }
+    }
     // 3. Its own skills and non-secret settings.
     for (const skill of setup.skills ?? [])
         writeSkill(name, skill.id, { description: skill.description, body: skill.body });
@@ -182,7 +215,7 @@ export async function createFromTemplateObject(template, deps) {
     return {
         name,
         abilities: { installed, failed },
-        checklist: templateChecklist(template, name, deps, failed),
+        checklist: templateChecklist(template, name, deps, failed, appsToConnect),
         ...(candidate.agent.exampleMessage ? { exampleMessage: candidate.agent.exampleMessage } : {}),
         ...(schedule ? { schedule } : {}),
         ...(scheduleError ? { scheduleError } : {}),

package/dist/web/templates-page.js

@@ -111,6 +111,7 @@ ${consoleShellScript}
         '<div><strong>Installs</strong> <span class="hint">(abilities: their tools, skills and permission rules)</span>' +
           listHtml(p.abilities.map(function (a) { return '<li><code>' + esc(a) + '</code></li>'; })) +
           (canInstall ? '' : '<p class="error" style="margin:4px 0 0">Installing abilities needs <code>LOOPENGINE_ADMIN_AUTH</code> set on the server. Without it, the agent is created and its abilities head the checklist.</p>') + '</div>' +
+        (p.apps && p.apps.length ? '<div><strong>Apps it uses</strong> <span class="hint">(connected on the <a href="/config?section=apps">Apps</a> page; one that isn' + String.fromCharCode(8217) + 't connected yet heads the checklist)</span>' + listHtml(p.apps.map(function (a) { return '<li>' + esc(a) + '</li>'; })) + '</div>' : '') +
         '<div><strong>Permissions</strong> <span class="hint">(anything not listed asks you first)</span>' +
           listHtml(p.rules.map(function (rule) { return '<li><code>' + esc(rule.tool) + '</code>: ' + esc(DECISIONS[rule.decision] || rule.decision) + '</li>'; })) + '</div>' +
         '<div><strong>Keys it needs</strong>' +

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

@@ -1,5 +1,7 @@
 import { type CreatedTemplateAgent, type TemplateChecklistItem, type TemplateCreateDeps } from './templates-admin.js';
 import { type WorkflowPlan, type WorkflowPlannerTools } from '../core/system-agents/workflow-planner.js';
+import { type GeneratedMcpAbility, type McpAbilityRequest } from '../core/mcp-ability-generator.js';
+import type { McpDirectoryServer } from '../core/mcp-directory.js';
 import { type WorkflowRecord } from '../core/workflows.js';
 import type { ModelCall } from '../core/run-agent.js';
 export declare class WorkflowError extends Error {
@@ -45,6 +47,43 @@ export declare function checkWorkflowForAgent(plan: WorkflowPlan, agent: Workflo
  * (whatever the model said) and drops that service from the abilities to
  * install: it's copied over, not installed. */
 export declare function resolveConnections(plan: WorkflowPlan, agents: WorkflowAgentInfo[]): void;
+/** What planning and Create need for steps done by an MCP server. */
+export interface WorkflowMcpDeps {
+    getServer(id: string): Promise<McpDirectoryServer | undefined>;
+    /** The workspace ability already made from the server at `url`, with
+     * its tools (the server's names and the installed ones). */
+    existingFor(url: string): {
+        spec: string;
+        tools: {
+            name: string;
+            remote: string;
+        }[];
+    } | undefined;
+    /** A setting's value, project-wide. */
+    keyValue(name: string): string | undefined;
+}
+export interface WorkflowMcpCreateDeps extends WorkflowMcpDeps {
+    generate(request: Omit<McpAbilityRequest, 'modelCall'>): Promise<GeneratedMcpAbility>;
+    /** Stores a generated package as a workspace ability; returns its spec. */
+    store(dir: string, source: string): string;
+    /** Saves a key project-wide. */
+    saveKey(name: string, value: string): Promise<void>;
+}
+/** Looks up each MCP server the plan's steps name: a server that can't
+ * be found leaves its steps missing; the rest are listed on the plan
+ * with the ability each would become and whether its key is set. */
+export declare function resolveMcpServers(plan: WorkflowPlan, deps: WorkflowMcpDeps): Promise<void>;
+/** On Create: each MCP server on the plan becomes a private ability (or
+ * reuses the one already made from it), and its steps point at that
+ * ability's tools. A server that can't be set up leaves its steps
+ * missing and is reported. `keys` are what the person typed per server. */
+export declare function prepareMcpAbilities(plan: WorkflowPlan, keys: Record<string, string>, deps: WorkflowMcpCreateDeps | undefined): Promise<{
+    made: string[];
+    failed: {
+        name: string;
+        error: string;
+    }[];
+}>;
 export interface PlannedWorkflow {
     plan: WorkflowPlan;
     /** The check against the suggested agent, when the plan names one. */
@@ -57,6 +96,7 @@ export interface PlannedWorkflow {
  * agent instead, saying why. */
 export declare function planWorkflow(description: unknown, modelCall: ModelCall, tools: WorkflowPlannerTools & {
     agentInfo(): Promise<WorkflowAgentInfo[]>;
+    mcp?: WorkflowMcpDeps;
 }): Promise<PlannedWorkflow>;
 export interface PlanJob {
     id: string;
@@ -92,6 +132,11 @@ export interface WorkflowCreateDeps extends TemplateCreateDeps {
     agentInfo(): Promise<WorkflowAgentInfo[]>;
     /** Makes sure the agent is loaded once its new tools and skill are in place. */
     reloadAgent(name: string): Promise<void>;
+    /** Sets up the plan's MCP servers as private abilities. */
+    mcp?: WorkflowMcpCreateDeps;
+    /** Gives an agent that already has an app more of its tools (at their
+     * default permission), keeping the ones it has. */
+    addAppTools?: (agent: string, spec: string, tools: string[]) => Promise<void>;
 }
 /** Creates the workflow: in a new agent (as a template would), or in an
  * existing one. An existing agent keeps every decision it already has: a
@@ -100,6 +145,7 @@ export declare function createWorkflow(input: {
     plan?: unknown;
     target?: unknown;
     description?: unknown;
+    mcpKeys?: unknown;
 }, deps: WorkflowCreateDeps): Promise<CreatedWorkflow>;
 export interface AgentWorkflowView extends WorkflowRecord {
     schedule?: {