loopengine 0.1.94 → 0.1.95

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

@@ -533,7 +533,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>'
@@ -2054,7 +2054,7 @@ ${consoleShellScript}
         '<input type="text" name="q" placeholder="Search by name or keyword (optional)">' +
         '<button type="submit">Search</button>' +
       '</form>' +
-      '<div id="abilitySearchResults"></div>' +
+      '<div id="abilitySearchResults" style="margin-bottom:32px"></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">' +
@@ -2537,8 +2537,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 +3084,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;

package/dist/web/console-shell.js

@@ -1,5 +1,5 @@
 // The app shell every console page renders inside: a sidebar listing the
-// agents (plus Models and Integrations), and, for a page about one agent,
+// agents (plus Models, Abilities and Settings), and, for a page about one agent,
 // a header with its name, prompt and tabs. The tabs span two pages —
 // Chat is playground.ts, every other tab is agents-config-page.ts — so
 // both render the header through this one script and read as one app.
@@ -22,11 +22,11 @@ export const consoleSidebarHtml = `<aside class="le-sidebar" aria-label="Console
   <a class="le-brand" href="/agents"><span class="le-brand-mark">${BRAND_MARK}</span><span class="le-brand-name">LoopEngine</span></a>
   <div class="le-nav-label"><span>Agents</span><a href="/agents?new=1">+ New</a></div>
   <ul class="le-agent-list" id="leAgentList"></ul>
-  <a class="le-find" href="/templates" data-le-nav="templates">Start from a template</a>
   <a class="le-find" href="/interview" data-le-nav="interview">Find your first agent</a>
+  <a class="le-find" href="/templates" data-le-nav="templates">Start from a template</a>
   <nav class="le-foot" aria-label="Settings">
     <a href="/config?section=models" data-le-nav="models">Models</a>
-    <a href="/config?section=gateways" data-le-nav="integrations">Integrations</a>
+    <a href="/config?section=abilities" data-le-nav="abilities">Abilities</a>
     <a href="/config?section=settings" data-le-nav="settings">Settings</a>
     <div class="le-who" id="leWho" hidden></div>
   </nav>
@@ -161,7 +161,7 @@ export const consoleShellScript = `<script>
   }
 
   var section = params.get('section');
-  var foot = page === 'config' ? (section === 'gateways' ? 'integrations' : section === 'settings' ? 'settings' : 'models') : page === 'interview' || page === 'templates' ? page : '';
+  var foot = page === 'config' ? (section === 'abilities' || section === 'gateways' ? 'abilities' : section === 'settings' ? 'settings' : 'models') : page === 'interview' || page === 'templates' ? page : '';
   var footLinks = document.querySelectorAll('[data-le-nav]');
   for (var i = 0; i < footLinks.length; i++) {
     if (footLinks[i].getAttribute('data-le-nav') === foot) footLinks[i].setAttribute('aria-current', 'page');

package/dist/web/dev-ui-styles.js

@@ -1,6 +1,6 @@
 // Shared look for every browser page adapters/http.ts serves — the agent
 // console (agents-config-page.ts), its Chat tab (playground.ts), the
-// agents home (agents-list-page.ts) and the Models/Integrations pages
+// agents home (agents-list-page.ts) and the Models/Abilities pages
 // (global-config-page.ts). All four render inside the same app shell
 // (web/console-shell.ts), so the shell's own classes (.le-*) live here
 // too, alongside the shared base: color tokens, type, form controls,

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

@@ -4,9 +4,9 @@
 // Overview/Skills/Tools/ActAuth tabs (served separately at
 // /agents/config, deliberately left untouched by this page). A left
 // sidebar picks between Models (which providers this deployment can
-// call, and which agents use which) and Gateways (whether the composio
-// CLI is authenticated on this machine) — see global-config.ts for where
-// that data actually comes from. "Agents" is a plain link out to
+// call, and which agents use which), Abilities (what each agent has
+// installed, and adding more) and Settings — see global-config.ts for
+// where most of that data comes from. "Agents" is a plain link out to
 // /agents/config, not a third client-rendered section here: that page
 // already owns the full per-agent picture, duplicating or embedding it
 // would just be two places for the same UI to drift apart.
@@ -78,10 +78,10 @@ ${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="gateways" style="display:none">
+  <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>Integrations</h1><p>Outside tool sources (such as Composio) that agents can add tools from.</p></div></div></div>
-    <div class="le-scroll"><div class="le-page" style="display:block"><div id="gatewaysContent"><p class="hint">Loading&hellip;</p></div></div></div>
+      <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 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">
     <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>
@@ -202,83 +202,150 @@ ${consoleShellScript}
       });
   }
 
-  // ---- Gateways section ----
-
-  function renderGatewayCard(g) {
-    var statusHtml;
-    var bodyHtml = '';
-    if (!g.supported) {
-      statusHtml = '<span class="hint">not yet supported</span>';
-    } else if (g.connected) {
-      statusHtml = badge(true, 'connected', 'not connected');
-      bodyHtml = '<p class="hint">' + escapeHtml(g.email || '') + (g.org ? ' &middot; ' + escapeHtml(g.org) : '') + '</p>' +
-        '<button type="button" class="delete-btn disconnect-btn" data-provider="' + escapeHtml(g.provider) + '">Disconnect</button>';
-    } else {
-      // No Connect button/form here — composio login's only
-      // non-interactive path (--user-api-key) doesn't accept the kind of
-      // key an operator actually has on hand (Composio hands out a
-      // separate x-consumer-api-key credential for MCP clients, which
-      // 401s against this flag); composio login itself opens a real
-      // browser, which a web request can't drive. These are the same
-      // two commands Composio's own docs give for getting started.
-      statusHtml = badge(false, 'connected', 'not connected');
-      bodyHtml = '<pre><code>curl -fsSL https://composio.dev/install | sh</code></pre>' +
-        '<pre><code>composio login</code></pre>' +
-        '<p class="hint">Run both on the machine running this server, then reload this page.</p>';
+  // ---- Abilities section ----
+  // How agents reach outside apps: an ability (lp-gmail, lp-shopify...)
+  // installed into an agent brings its tools, skills and permission
+  // rules. Abilities live in each agent, so this page gathers them from
+  // every agent's own Abilities routes and installs through the same
+  // route, which also keeps it working with any project template.
+
+  var abilityAgents = [];
+  var abilitiesByAgent = {};
+
+  function agentAbilitiesHref(agent) {
+    return '/agents/config?agent=' + encodeURIComponent(agent) + '&tab=abilities';
+  }
+
+  function renderInstalledAbilities() {
+    var byName = {};
+    abilityAgents.forEach(function (agent) {
+      (abilitiesByAgent[agent] || []).forEach(function (a) {
+        if (!byName[a.name]) byName[a.name] = { name: a.name, versions: [], agents: [] };
+        if (byName[a.name].versions.indexOf(a.version) === -1) byName[a.name].versions.push(a.version);
+        byName[a.name].agents.push(agent);
+      });
+    });
+    var names = Object.keys(byName).sort();
+    if (!names.length) return '<p class="hint">No agent has an ability yet. Add one below, or start from a template, which installs the ones it needs.</p>';
+    return '<table><thead><tr><th>Ability</th><th>Version</th><th>Agents</th></tr></thead><tbody>' +
+      names.map(function (n) {
+        var a = byName[n];
+        return '<tr><td><code>' + escapeHtml(a.name) + '</code></td>' +
+          '<td>' + escapeHtml(a.versions.join(', ')) + '</td>' +
+          '<td>' + a.agents.map(function (agent) { return '<a href="' + agentAbilitiesHref(agent) + '">' + escapeHtml(agent) + '</a>'; }).join(', ') + '</td></tr>';
+      }).join('') + '</tbody></table>';
+  }
+
+  function renderAbilities() {
+    var content = document.getElementById('abilitiesContent');
+    var add = abilityAgents.length
+      ? '<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px">' +
+          '<label for="abilityAgent">Install into</label>' +
+          '<select id="abilityAgent">' + abilityAgents.map(function (a) { return '<option value="' + escapeHtml(a) + '">' + escapeHtml(a) + '</option>'; }).join('') + '</select>' +
+          '<form id="abilitySearchForm" style="display:flex;gap:6px;flex:1;min-width:220px;margin:0">' +
+            '<input type="search" name="q" placeholder="Search abilities, e.g. gmail" aria-label="Search abilities" style="flex:1">' +
+            '<button type="submit">Search</button>' +
+          '</form>' +
+        '</div>' +
+        '<p id="abilityInstallStatus" class="hint"></p>' +
+        '<div id="abilitySearchResults"><p class="hint">Loading&hellip;</p></div>'
+      : '<p>Create an agent first: abilities are installed into one. <a href="/templates">Start from a template</a> or <a href="/agents?new=1">create an agent</a>.</p>';
+    content.innerHTML =
+      '<section><h3>Installed</h3><div id="abilitiesInstalled">' + renderInstalledAbilities() + '</div></section>' +
+      '<section><h3>Add an ability</h3>' + add + '</section>';
+    if (!abilityAgents.length) return;
+    var form = document.getElementById('abilitySearchForm');
+    form.addEventListener('submit', function (ev) { ev.preventDefault(); searchAbilities(form.q.value.trim()); });
+    document.getElementById('abilityAgent').addEventListener('change', function () { searchAbilities(form.q.value.trim()); });
+    searchAbilities('');
+  }
+
+  var lastSearch = { q: null, results: [] };
+
+  function renderSearchResults() {
+    var resultsEl = document.getElementById('abilitySearchResults');
+    var agent = document.getElementById('abilityAgent').value;
+    var installed = (abilitiesByAgent[agent] || []).map(function (a) { return a.name; });
+    var results = lastSearch.results;
+    resultsEl.innerHTML = results.length
+      ? '<table><thead><tr><th>Ability</th><th>What it does</th><th></th></tr></thead><tbody>' + results.map(function (pkg) {
+          var action = installed.indexOf(pkg.name) !== -1
+            ? '<span class="hint">In ' + escapeHtml(agent) + '</span>'
+            : '<button type="button" class="ability-install-btn" data-spec="' + escapeHtml(pkg.name) + '">Install</button>';
+          return '<tr><td><code>' + escapeHtml(pkg.name) + '</code> <span class="hint">' + escapeHtml(pkg.version) + '</span></td>' +
+            '<td>' + escapeHtml(pkg.description || '') + '</td><td>' + action + '</td></tr>';
+        }).join('') + '</tbody></table>'
+      : '<p class="hint">No published abilities match.</p>';
+    var buttons = resultsEl.querySelectorAll('.ability-install-btn');
+    for (var i = 0; i < buttons.length; i++) {
+      buttons[i].addEventListener('click', function (ev) { installAbility(agent, ev.currentTarget.dataset.spec, ev.currentTarget); });
     }
-    return '<div class="source' + (g.supported ? '' : ' unsupported') + '">' +
-      '<div class="source-head">' +
-        '<h4>' + escapeHtml(g.provider) + '</h4>' +
-        statusHtml +
-      '</div>' +
-      bodyHtml +
-      '</div>';
   }
 
-  function applyGateways(gateways) {
-    var content = document.getElementById('gatewaysContent');
-    content.innerHTML = (gateways || []).map(renderGatewayCard).join('');
-    wireGatewayCards(content);
-    loadedSections.gateways = true;
+  function searchAbilities(q) {
+    var resultsEl = document.getElementById('abilitySearchResults');
+    if (lastSearch.q === q) { renderSearchResults(); return; }
+    resultsEl.innerHTML = '<p class="hint">Loading&hellip;</p>';
+    // Search doesn't depend on the agent; the route just lives under one.
+    fetch('/agents/' + encodeURIComponent(abilityAgents[0]) + '/abilities/search' + (q ? '?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');
+        lastSearch = { q: q, results: r.body.results || [] };
+        renderSearchResults();
+      })
+      .catch(function (err) { resultsEl.innerHTML = '<p class="error">Could not search abilities: ' + escapeHtml(err.message) + '</p>'; });
   }
 
-  // Disconnect is a machine-wide CLI-session action (see
-  // disconnectComposioAccount's own doc comment in gateway-tools.ts) —
-  // it gets a confirm() for that reason, same as this admin UI's other
-  // consequential-but-not-undoable actions (removing a skill, a rule, a
-  // gateway tool). No Connect counterpart to wire — see renderGatewayCard's
-  // own comment for why that's instructions, not a form.
-  function wireGatewayCards(content) {
-    var disconnectButtons = content.querySelectorAll('.disconnect-btn');
-    for (var j = 0; j < disconnectButtons.length; j++) {
-      disconnectButtons[j].addEventListener('click', function (ev) {
-        var btn = ev.currentTarget;
-        var provider = btn.getAttribute('data-provider');
-        if (!confirm('Disconnect ' + provider + '? This logs out the CLI on this machine for every agent’s gateway tools, not just this browser tab.')) return;
-        btn.disabled = true;
-        fetch('/config/gateways/' + encodeURIComponent(provider) + '/disconnect', { method: 'POST' })
-          .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');
-            applyGateways(result.body.gateways || []);
-          })
-          .catch(function (err) {
-            alert('Could not disconnect: ' + err.message);
-            btn.disabled = false;
-          });
+  function installAbility(agent, spec, btn) {
+    var status = document.getElementById('abilityInstallStatus');
+    btn.disabled = true;
+    status.className = 'hint';
+    status.textContent = 'Installing ' + spec + ' into ' + agent + String.fromCharCode(8230);
+    fetch('/agents/' + encodeURIComponent(agent) + '/abilities', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ spec: spec }),
+    })
+      .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');
+        var deps = r.body.dependencies || [];
+        status.innerHTML = 'Installed ' + escapeHtml(spec) + ' into ' + escapeHtml(agent) + '. ' +
+          '<a href="' + agentAbilitiesHref(agent) + '">Add its keys in ' + escapeHtml(agent) + String.fromCharCode(8217) + 's Abilities tab</a>.' +
+          (deps.length ? ' <strong>It also needs <code>' + escapeHtml(deps.join(', ')) + '</code>:</strong> use Install deps there.' : '');
+        return loadAgentAbilities(agent).then(function () {
+          document.getElementById('abilitiesInstalled').innerHTML = renderInstalledAbilities();
+          renderSearchResults();
+        });
+      })
+      .catch(function (err) {
+        btn.disabled = false;
+        status.className = 'error';
+        status.textContent = 'Could not install: ' + err.message;
       });
-    }
   }
 
-  function loadGateways() {
-    var content = document.getElementById('gatewaysContent');
-    fetch('/config/gateways')
-      .then(function (r) { return r.json(); })
-      .then(function (data) {
-        applyGateways(data.gateways || []);
+  function loadAgentAbilities(agent) {
+    return fetch('/agents/' + encodeURIComponent(agent) + '/abilities')
+      .then(function (r) { return r.ok ? r.json() : { abilities: [] }; })
+      .then(function (d) { abilitiesByAgent[agent] = d.abilities || []; })
+      .catch(function () { abilitiesByAgent[agent] = []; });
+  }
+
+  function loadAbilities() {
+    var content = document.getElementById('abilitiesContent');
+    leShell.ready
+      .then(function (agents) {
+        abilityAgents = agents.map(function (a) { return a.name; });
+        return Promise.all(abilityAgents.map(loadAgentAbilities));
+      })
+      .then(function () {
+        renderAbilities();
+        loadedSections.abilities = true;
       })
       .catch(function (err) {
-        content.innerHTML = '<p class="error">Could not load gateways: ' + escapeHtml(err.message) + '</p>';
+        content.innerHTML = '<p class="error">Could not load abilities: ' + escapeHtml(err.message) + '</p>';
       });
   }
 
@@ -520,7 +587,7 @@ ${consoleShellScript}
       panels[j].style.display = panels[j].dataset.sectionPanel === section ? 'contents' : 'none';
     }
     if (section === 'models' && !loadedSections.models) loadModels();
-    if (section === 'gateways' && !loadedSections.gateways) loadGateways();
+    if (section === 'abilities' && !loadedSections.abilities) loadAbilities();
     if (section === 'settings' && !loadedSections.settings) loadSettings();
   }
 
@@ -528,12 +595,14 @@ ${consoleShellScript}
     sectionButtons[i].addEventListener('click', function (ev) { switchSection(ev.currentTarget.dataset.section); });
   }
 
-  // Deep-linked from agents-config-page.ts's own Models/Gateways sidebar
-  // links (/config?section=gateways, say) — preselect it if it names a
+  // Deep-linked from the console sidebar's Models/Abilities/Settings
+  // links (/config?section=abilities, say) — preselect it if it names a
   // real section, same "trust the query param only if it's valid"
   // caution playground.ts's own ?agent= handling already uses.
   var requestedSection = new URLSearchParams(location.search).get('section');
-  var initialSection = requestedSection === 'gateways' || requestedSection === 'models' || requestedSection === 'settings' ? requestedSection : currentSection;
+  // ?section=gateways is the old Integrations page's link.
+  if (requestedSection === 'gateways') requestedSection = 'abilities';
+  var initialSection = requestedSection === 'abilities' || requestedSection === 'models' || requestedSection === 'settings' ? requestedSection : currentSection;
   switchSection(initialSection);
 })();
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "loopengine",
-  "version": "0.1.94",
+  "version": "0.1.95",
   "type": "module",
   "description": "Runtime for tool-using AI agents with a transparent ReAct loop.",
   "license": "MIT",