loopengine 0.1.93 → 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>'
@@ -1484,10 +1484,22 @@ ${consoleShellScript}
     scheduled: 'scheduled', running: 'running', awaiting_approval: 'waiting for approval', paused: 'paused', done: 'done', cancelled: 'cancelled'
   };
 
+  // The workspace's time zone, from GET /agents/:name/schedules (an
+  // older project adapter doesn't send it: then the browser's own).
+  var schedulesTimeZone = null;
+
+  function fmtScheduleTime(iso) {
+    var d = new Date(iso);
+    if (schedulesTimeZone) {
+      try { return d.toLocaleString(undefined, { timeZone: schedulesTimeZone, timeZoneName: 'short' }); } catch (e) {}
+    }
+    return d.toLocaleString();
+  }
+
   function scheduleText(s) {
     // A repeating task's anchor is its first run, so it says when the
     // later ones fall (e.g. every 1d from 9:00).
-    return s.run_at ? 'Once, ' + new Date(s.run_at).toLocaleString() : 'Every ' + escapeHtml(s.every) + (s.anchor ? '<div class="hint">from ' + escapeHtml(new Date(s.anchor).toLocaleString()) + '</div>' : '');
+    return s.run_at ? 'Once, ' + escapeHtml(fmtScheduleTime(s.run_at)) : 'Every ' + escapeHtml(s.every) + (s.anchor ? '<div class="hint">from ' + escapeHtml(fmtScheduleTime(s.anchor)) + '</div>' : '');
   }
 
   function renderScheduleRow(t) {
@@ -1499,17 +1511,17 @@ ${consoleShellScript}
     if (t.status === 'cancelled' || t.status === 'done') actions.push(['delete', 'Delete']);
     var last = t.last_run_at
       ? '<span class="le-pill ' + (t.last_status === 'ok' ? 'good' : 'bad') + '">' + escapeHtml(t.last_status) + '</span> ' +
-        '<span class="hint">' + escapeHtml(new Date(t.last_run_at).toLocaleString()) + '</span>' +
+        '<span class="hint">' + escapeHtml(fmtScheduleTime(t.last_run_at)) + '</span>' +
         '<div class="schedule-result">' + escapeHtml(t.last_status === 'ok' ? (t.last_result || '') : (t.last_error || '')) + '</div>'
       : '<span class="hint">not run yet</span>';
     var history = (t.history || []).slice().reverse().map(function (h) {
-      return '<li><span class="le-pill ' + (h.status === 'ok' ? 'good' : 'bad') + '">' + escapeHtml(h.status) + '</span> <span class="hint">' + escapeHtml(new Date(h.ran_at).toLocaleString()) + '</span>' +
+      return '<li><span class="le-pill ' + (h.status === 'ok' ? 'good' : 'bad') + '">' + escapeHtml(h.status) + '</span> <span class="hint">' + escapeHtml(fmtScheduleTime(h.ran_at)) + '</span>' +
         '<div class="schedule-result">' + escapeHtml(h.status === 'ok' ? (h.result || '') : (h.error || '')) + '</div></li>';
     }).join('');
     return '<tr>' +
       '<td style="min-width:180px"><strong>' + escapeHtml(t.task_name || 'Untitled') + '</strong>' + (t.notify ? ' <span class="le-pill accent" title="Each result goes through this agent&#39;s notifier">notifies</span>' : '') +
         '<div class="schedule-result hint">' + escapeHtml(t.message) + '</div></td>' +
-      '<td>' + scheduleText(t.schedule) + (t.next_run_at ? '<div class="hint">next ' + escapeHtml(new Date(t.next_run_at).toLocaleString()) + '</div>' : '') + '</td>' +
+      '<td>' + scheduleText(t.schedule) + (t.next_run_at ? '<div class="hint">next ' + escapeHtml(fmtScheduleTime(t.next_run_at)) + '</div>' : '') + '</td>' +
       '<td><span class="le-pill ' + (SCHEDULE_PILLS[t.status] || 'neutral') + '">' + escapeHtml(SCHEDULE_LABELS[t.status] || t.status) + '</span>' +
         (t.status === 'awaiting_approval' ? '<div class="hint"><a href="#" class="schedule-to-approvals">Decide in Messaging</a></div>' : '') + '</td>' +
       '<td style="min-width:200px">' + last + (history ? '<details><summary class="hint">History (' + (t.history || []).length + ')</summary><ul class="schedule-history">' + history + '</ul></details>' : '') + '</td>' +
@@ -1533,7 +1545,8 @@ ${consoleShellScript}
               '<input type="number" name="everyN" value="1" min="1" aria-label="How many">' +
               '<select name="everyUnit" aria-label="Unit"><option value="m">minutes</option><option value="h" selected>hours</option><option value="d">days</option><option value="w">weeks</option></select>' +
               '<label for="everyStart">starting</label><input type="datetime-local" name="everyStart" id="everyStart" aria-label="First run"></div>' +
-            '<p class="hint" style="margin:0 0 4px 22px">Optional. The first run, which sets the time of day (and the weekday, for weeks) every later run keeps, e.g. every 1 day starting tomorrow 09:00. Without it, the first run is one interval from now.</p>' +
+            '<p class="hint" style="margin:0 0 4px 22px">Optional. The first run, which sets the time of day (and the weekday, for weeks) every later run keeps, e.g. every 1 day starting tomorrow 09:00. Without it, the first run is one interval from now.' +
+              (schedulesTimeZone ? ' Times are in ' + escapeHtml(schedulesTimeZone.replace(/_/g, ' ')) + ' (<a href="/config?section=settings">change</a>).' : '') + '</p>' +
             '<div class="schedule-when"><input type="radio" name="when" value="once" id="whenOnce"><label for="whenOnce">Once at</label>' +
               '<input type="datetime-local" name="runAt" aria-label="Date and time"></div>' +
           '</div>' +
@@ -1544,6 +1557,13 @@ ${consoleShellScript}
         '</form></section>';
   }
 
+  // A date field's value ("2026-11-02T09:00") goes as it is, for the
+  // server to read in the workspace's time zone; with no workspace time
+  // zone known, it's the browser's.
+  function scheduleFormTime(value) {
+    return schedulesTimeZone ? value : new Date(value).toISOString();
+  }
+
   function wireSchedulesHandlers(name) {
     var content = schedulesContentEl();
     if (!content) return;
@@ -1576,14 +1596,13 @@ ${consoleShellScript}
       var schedule;
       if (data.get('when') === 'once') {
         if (!data.get('runAt')) { result.textContent = 'Pick a date and time.'; return; }
-        schedule = { run_at: new Date(data.get('runAt')).toISOString() };
+        schedule = { run_at: scheduleFormTime(data.get('runAt')) };
       } else {
-        // Weeks go to the scheduler as days; the start comes from the
-        // browser's own time zone.
+        // Weeks go to the scheduler as days.
         var unit = data.get('everyUnit');
         var n = Number(data.get('everyN')) || 1;
         schedule = { every: unit === 'w' ? String(n * 7) + 'd' : String(n) + unit };
-        if (data.get('everyStart')) schedule.start_at = new Date(data.get('everyStart')).toISOString();
+        if (data.get('everyStart')) schedule.start_at = scheduleFormTime(data.get('everyStart'));
       }
       result.textContent = 'Scheduling' + String.fromCharCode(8230);
       fetchJsonRetryOnce('/agents/' + encodeURIComponent(name) + '/schedules', {
@@ -1604,6 +1623,7 @@ ${consoleShellScript}
       if (currentName !== name) return;
       if (!r.ok) throw new Error(r.body.error || 'request failed');
       var tasks = r.body.tasks || [];
+      schedulesTimeZone = r.body.time_zone || null;
       content.innerHTML = renderSchedulesHtml(tasks);
       wireSchedulesHandlers(name);
       leShell.setCount('schedules', tasks.filter(function (t) { return t.status !== 'cancelled' && t.status !== 'done'; }).length);
@@ -2034,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">' +
@@ -2517,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>';
@@ -3062,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>';
       });
   }
 
@@ -298,14 +365,78 @@ ${consoleShellScript}
       ['Environment name', '<code>' + escapeHtml(d.environment) + '</code> <span class="hint">(LOOPENGINE_ENV)</span>'],
       ['Public address', d.publicUrl ? '<code>' + escapeHtml(d.publicUrl) + '</code>' : '<span class="hint">Not set (LOOPENGINE_PUBLIC_URL); links in notifications use the address saved with each notifier</span>'],
       ['Scheduled tasks', d.scheduler === 'off' ? 'Off on this server (LOOPENGINE_SCHEDULER=off)' : 'Run by this server'],
+      ['Time zone', d.timeZone ? '<code>' + escapeHtml(d.timeZone) + '</code>' : '<span class="hint">The server' + String.fromCharCode(8217) + 's own. Update the template below to choose one here.</span>'],
       ['Theme', 'Follows your system'],
     ];
     return '<section><table><thead><tr><th>Setting</th><th>Value</th></tr></thead><tbody>' +
       rows.map(function (r) { return '<tr><td>' + r[0] + '</td><td>' + r[1] + '</td></tr>'; }).join('') +
       '</tbody></table></section>' +
+      (d.timeZone ? '<section><h3>Time zone</h3><div class="source" id="timeZoneBox"><p class="hint">Loading' + String.fromCharCode(8230) + '</p></div></section>' : '') +
       '<section><h3>Updates</h3><div class="source" id="upgradeBox"><p class="hint">Checking for a newer LoopEngine' + String.fromCharCode(8230) + '</p></div></section>';
   }
 
+  // ---- Time zone ----
+
+  function renderTimeZone(t) {
+    var box = document.getElementById('timeZoneBox');
+    if (!box) return;
+    var intro = '<p>Schedules and templates use this for times of day: &ldquo;daily at 09:00&rdquo; runs at 9:00 here, and daily and weekly schedules keep that time when the clocks change. ' +
+      (t.chosen ? '' : 'Not chosen yet, so it' + String.fromCharCode(8217) + 's the server' + String.fromCharCode(8217) + 's (<code>' + escapeHtml(t.server) + '</code>).') + '</p>';
+    if (!t.canSave) {
+      box.innerHTML = intro + '<p>In use: <code>' + escapeHtml(t.timeZone) + '</code></p><p class="hint">Set LOOPENGINE_ADMIN_AUTH to change it here, or put <code>LOOPENGINE_TIME_ZONE</code> in .env.</p>';
+      return;
+    }
+    var browserZone = '';
+    try { browserZone = Intl.DateTimeFormat().resolvedOptions().timeZone || ''; } catch (e) {}
+    var options = t.zones.map(function (z) {
+      return '<option value="' + escapeHtml(z) + '"' + (z === t.timeZone ? ' selected' : '') + '>' + escapeHtml(z.replace(/_/g, ' ')) + '</option>';
+    }).join('');
+    box.innerHTML = intro +
+      '<form id="timeZoneForm" style="display:flex;flex-direction:column;gap:10px;max-width:480px">' +
+        '<label for="timeZoneSelect">Time zone</label>' +
+        '<select id="timeZoneSelect" name="timeZone">' + options + '</select>' +
+        (browserZone && browserZone !== t.timeZone && t.zones.indexOf(browserZone) >= 0
+          ? '<p class="hint" style="margin:0"><a href="#" id="timeZoneUseBrowser">Use this browser' + String.fromCharCode(8217) + 's, ' + escapeHtml(browserZone) + '</a></p>' : '') +
+        '<label style="display:flex;gap:8px;align-items:center"><input type="checkbox" name="moveSchedules" checked> Move existing daily and weekly schedules too, keeping their time of day</label>' +
+        '<div><button type="submit" class="primary">Save</button></div>' +
+        '<div id="timeZoneMsg" class="hint"></div>' +
+      '</form>';
+    var form = document.getElementById('timeZoneForm');
+    var useBrowser = document.getElementById('timeZoneUseBrowser');
+    if (useBrowser) useBrowser.addEventListener('click', function (ev) { ev.preventDefault(); form.timeZone.value = browserZone; });
+    form.addEventListener('submit', function (ev) {
+      ev.preventDefault();
+      var msg = document.getElementById('timeZoneMsg');
+      var btn = form.querySelector('button[type="submit"]');
+      btn.disabled = true;
+      msg.textContent = 'Saving' + String.fromCharCode(8230);
+      fetch('/config/time-zone', {
+        method: 'PUT',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ timeZone: form.timeZone.value, moveSchedules: form.moveSchedules.checked }),
+      })
+        .then(function (r) { return r.json().then(function (b) { return { ok: r.ok, body: b }; }); })
+        .then(function (r) {
+          btn.disabled = false;
+          if (!r.ok) { msg.innerHTML = '<span class="error">' + escapeHtml(r.body.error || 'Could not save') + '</span>'; return; }
+          msg.textContent = 'Saved: ' + r.body.timeZone.replace(/_/g, ' ') + '.' +
+            (r.body.moved ? ' Moved ' + r.body.moved + ' schedule' + (r.body.moved === 1 ? '' : 's') + '.' : '');
+        })
+        .catch(function (err) { btn.disabled = false; msg.innerHTML = '<span class="error">' + escapeHtml(err.message) + '</span>'; });
+    });
+  }
+
+  function loadTimeZone() {
+    if (!document.getElementById('timeZoneBox')) return;
+    fetch('/config/time-zone', { cache: 'no-store' })
+      .then(function (r) { return r.json(); })
+      .then(renderTimeZone)
+      .catch(function (err) {
+        var box = document.getElementById('timeZoneBox');
+        if (box) box.innerHTML = '<p class="error">Could not load the time zone: ' + escapeHtml(err.message) + '</p>';
+      });
+  }
+
   // ---- Upgrade ----
 
   var UPGRADE_NOTE = 'Updates this server' + String.fromCharCode(8217) + 's LoopEngine code and restarts it, which takes a minute or two. ' +
@@ -436,6 +567,7 @@ ${consoleShellScript}
       .then(function (d) {
         content.innerHTML = renderSettings(d);
         loadedSections.settings = true;
+        loadTimeZone();
         loadUpgrade();
       })
       .catch(function (err) {
@@ -455,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();
   }
 
@@ -463,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/dist/web/global-config.d.ts

@@ -69,3 +69,27 @@ export declare function modelKeyEnvVar(provider: string): string | undefined;
  */
 export declare function setModelProviderKey(provider: string, key: unknown): Promise<void>;
 export declare function clearModelProviderKey(provider: string): Promise<void>;
+export declare class TimeZoneError extends Error {
+}
+export interface TimeZoneView {
+    /** The one in use. */
+    timeZone: string;
+    /** Whether it was chosen (LOOPENGINE_TIME_ZONE), not the server's. */
+    chosen: boolean;
+    server: string;
+    zones: string[];
+}
+export declare function describeTimeZone(): TimeZoneView;
+/**
+ * The console's Settings → Time zone: saved like a model key (the
+ * project's .env by default) and applied to this process at once. New
+ * schedules and template start times use it from then on; with
+ * `moveSchedules`, existing daily and weekly schedules move to it too,
+ * keeping their time of day. An empty value goes back to the server's.
+ */
+export declare function setWorkspaceTimeZone(value: unknown, options?: {
+    moveSchedules?: boolean;
+}): Promise<{
+    timeZone: string;
+    moved: number;
+}>;

package/dist/web/global-config.js

@@ -1,4 +1,6 @@
 import { getComposioAuthStatus } from '../core/gateway-tools.js';
+import { moveScheduledTasksToTimeZone } from '../core/scheduler.js';
+import { TIME_ZONE_ENV, isValidTimeZone, listTimeZones, serverTimeZone, workspaceTimeZone } from '../core/time-zone.js';
 import { setEnvVar, unsetEnvVar } from './env-admin.js';
 export class ModelKeyError extends Error {
 }
@@ -102,3 +104,31 @@ export async function clearModelProviderKey(provider) {
         throw new ModelKeyError(`unknown provider '${provider}'`);
     await unsetEnvVar(envVar);
 }
+export class TimeZoneError extends Error {
+}
+export function describeTimeZone() {
+    const timeZone = workspaceTimeZone();
+    const configured = process.env[TIME_ZONE_ENV]?.trim();
+    return { timeZone, chosen: Boolean(configured && isValidTimeZone(configured)), server: serverTimeZone(), zones: listTimeZones() };
+}
+/**
+ * The console's Settings → Time zone: saved like a model key (the
+ * project's .env by default) and applied to this process at once. New
+ * schedules and template start times use it from then on; with
+ * `moveSchedules`, existing daily and weekly schedules move to it too,
+ * keeping their time of day. An empty value goes back to the server's.
+ */
+export async function setWorkspaceTimeZone(value, options = {}) {
+    const requested = typeof value === 'string' ? value.trim() : '';
+    if (requested && !isValidTimeZone(requested))
+        throw new TimeZoneError(`"${requested}" isn't a time zone this server knows, such as America/New_York or Europe/London`);
+    const before = workspaceTimeZone();
+    // Saved by its canonical name ("america/new_york" → "America/New_York").
+    if (requested)
+        await setEnvVar(TIME_ZONE_ENV, new Intl.DateTimeFormat('en-US', { timeZone: requested }).resolvedOptions().timeZone);
+    else
+        await unsetEnvVar(TIME_ZONE_ENV);
+    const timeZone = workspaceTimeZone();
+    const moved = options.moveSchedules && timeZone !== before ? await moveScheduledTasksToTimeZone(before, timeZone) : 0;
+    return { timeZone, moved };
+}