loopengine 0.1.95 → 0.1.97

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

@@ -61,22 +61,24 @@ ${consoleSidebarHtml}
       <label>Name <span class="hint">(lowercase, hyphens allowed: becomes agents/&lt;name&gt;/)</span>
         <input type="text" name="name" placeholder="weather-agent" pattern="[a-z0-9]+(-[a-z0-9]+)*" required>
       </label>
-      <details>
-        <summary>Prompt and model (optional)</summary>
-        <label>System prompt
-          <textarea name="systemPrompt" placeholder="You are ..."></textarea>
-        </label>
-        <label>Model provider
-          <select name="provider">
-            <option value="anthropic">anthropic</option>
-            <option value="openai">openai</option>
-            <option value="deepseek">deepseek</option>
-          </select>
-        </label>
-        <label>Model name <span class="hint">(required for openai/deepseek; defaults to claude-sonnet-5 for anthropic)</span>
-          <input type="text" name="modelName" placeholder="claude-sonnet-5">
-        </label>
-      </details>
+      <label>System prompt
+        <textarea name="systemPrompt" placeholder="You are ..."></textarea>
+      </label>
+      <label>Model provider
+        <select name="provider">
+          <option value="openai" selected>openai</option>
+          <option value="anthropic">anthropic</option>
+          <option value="gemini">gemini</option>
+          <option value="meta">meta</option>
+          <option value="xai">xai</option>
+          <option value="deepseek">deepseek</option>
+          <option value="kimi">kimi</option>
+          <option value="glm">glm</option>
+        </select>
+      </label>
+      <label id="modelNameLabel">Model name <span class="hint">(choose Other&hellip; to type a model that isn't listed)</span>
+        <input type="text" name="modelName" value="gpt-6-luna" placeholder="model name">
+      </label>
       <div class="row">
         <button type="submit">Create agent</button>
         <button type="button" id="cancelNewAgentBtn">Cancel</button>
@@ -152,11 +154,40 @@ ${consoleShellScript}
   // same as before this existed; loopengine dev picks it up
   // automatically via its own --include 'agents/*/index.ts' (see
   // bin/cli.ts's own comment there).
+  // Only providers with a key saved can be chosen (leShell.applyProviderKeys).
+  // With no key at all, the agent is created without a model (the
+  // scaffold's default), so the provider and model fields are switched off
+  // and the note says so. If the keys can't be read, nothing is disabled.
+  var providerSelect = newAgentForm.querySelector('select[name="provider"]');
+  var modelNameLabel = document.getElementById('modelNameLabel');
+  var providerKeys = null;
+
+  function applyProviderKeys() {
+    if (!providerKeys) return;
+    var any = leShell.applyProviderKeys(newAgentForm, providerKeys);
+    providerSelect.disabled = !any;
+    modelNameLabel.style.display = any ? '' : 'none';
+  }
+
+  // form.reset() after an agent is created goes back to the markup's
+  // openai default even without a key; apply the keys again first. The
+  // model dropdown's own reset listener is added later, so runs after.
+  newAgentForm.addEventListener('reset', function () { setTimeout(applyProviderKeys, 0); });
+
   newAgentBtn.addEventListener('click', function () {
     newAgentBtn.style.display = 'none';
     newAgentForm.style.display = 'grid';
     newAgentResult.style.display = 'none';
     newAgentForm.querySelector('input[name="name"]').focus();
+    // Checks which providers have keys, then loads the chosen provider's
+    // models; both when the form opens, not on every visit to this page.
+    // Starts on openai / gpt-6-luna (the markup's defaults) when openai
+    // has a key.
+    leShell.loadProviderKeys().then(function (keys) {
+      providerKeys = keys;
+      applyProviderKeys();
+      if (!providerSelect.disabled) leShell.wireModelPicker(newAgentForm);
+    });
   });
 
   cancelNewAgentBtn.addEventListener('click', function () {
@@ -172,11 +203,9 @@ ${consoleShellScript}
     var submitBtn = newAgentForm.querySelector('button[type="submit"]');
     submitBtn.disabled = true;
 
-    // systemPrompt/model are both optional — see
+    // A blank system prompt or model name is left out of the body — see
     // adapters/http.ts's parseAgentTemplateOptions for the defaults
-    // scaffoldAgent falls back to when either is left out of the body
-    // entirely (blank/untouched Advanced fields are treated the same
-    // as not sending them at all).
+    // scaffoldAgent falls back to then.
     var body = { name: data.get('name') };
     var systemPrompt = data.get('systemPrompt');
     if (systemPrompt && systemPrompt.trim()) body.systemPrompt = systemPrompt;

package/dist/web/console-shell.js

@@ -12,6 +12,11 @@
 //   leShell.renderHead(opts) agent header + tabs HTML (see below)
 //   leShell.setTab(tab)      move the tab highlight without a reload
 //   leShell.esc(s)           HTML-escape
+//   leShell.wireModelPicker(form)  model dropdown for a provider select
+//   leShell.loadProviderKeys()     Promise of {provider: key saved?}, or null
+//   leShell.applyProviderKeys(form, keys, keep)  only providers with a key
+//   leShell.abilityOriginBadge(origin)    Public/Private badge for an ability
+//   leShell.toggleAbilityDetails(btn)     an ability's tools, skills and settings
 // Same embedded-string conventions as the pages themselves: plain
 // string concatenation and no backslashes inside the script, so nothing
 // here needs double-escaping in the template literal.
@@ -24,6 +29,7 @@ export const consoleSidebarHtml = `<aside class="le-sidebar" aria-label="Console
   <ul class="le-agent-list" id="leAgentList"></ul>
   <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>
+  <a class="le-find" href="/workflows/new" data-le-nav="workflows">Describe a workflow</a>
   <nav class="le-foot" aria-label="Settings">
     <a href="/config?section=models" data-le-nav="models">Models</a>
     <a href="/config?section=abilities" data-le-nav="abilities">Abilities</a>
@@ -44,9 +50,12 @@ export const consoleShellScript = `<script>
   // that's certainly missing (see core/agent-env.ts). Filled in per agent
   // after the list loads.
   var toSet = {};
+  // Tools and Skills live under Advanced (an agent's own tools and skills,
+  // Composio, subagents): what an agent can do is shown per ability in
+  // Abilities. ?tab=tools and ?tab=skills still open Advanced.
   var TABS = [
-    ['overview', 'Overview'], ['chat', 'Chat'], ['abilities', 'Abilities'], ['tools', 'Tools'],
-    ['skills', 'Skills'], ['actauth', 'Permissions'], ['messaging', 'Messaging'], ['schedules', 'Schedules'], ['env', 'Environment']
+    ['overview', 'Overview'], ['chat', 'Chat'], ['abilities', 'Abilities'], ['actauth', 'Permissions'],
+    ['messaging', 'Messaging'], ['schedules', 'Schedules'], ['env', 'Environment'], ['advanced', 'Advanced']
   ];
 
   function esc(s) {
@@ -193,6 +202,238 @@ export const consoleShellScript = `<script>
     if (app.classList.contains('nav-open') && !ev.target.closest('.le-sidebar')) app.classList.remove('nav-open');
   });
 
-  window.leShell = { loadError: function () { return loadError; }, ready: ready, renderHead: renderHead, setTab: setTab, setActive: setActive, esc: esc, tabHref: tabHref, envCountHtml: envCountHtml, setCount: setCount };
+  // A model dropdown for a form with select[name=provider] and
+  // input[name=modelName] (New agent, and an agent's Model form): the
+  // provider's models from GET /config/models/:provider/models, reloaded
+  // when the provider changes. The text input is still what the form
+  // submits; it shows for "Other", which is all the dropdown offers when
+  // a provider has no models to list. A short or empty list says why
+  // (no key saved, provider down) under it. Safe to call more than once
+  // for the same form.
+  var OTHER_MODEL = '__other__';
+  function wireModelPicker(form) {
+    var providerSelect = form.querySelector('select[name="provider"]');
+    var input = form.querySelector('input[name="modelName"]');
+    if (!providerSelect || !input || input.getAttribute('data-le-model-picker')) return;
+    input.setAttribute('data-le-model-picker', '1');
+    var select = document.createElement('select');
+    select.setAttribute('aria-label', 'Model name');
+    var note = document.createElement('span');
+    note.className = 'hint';
+    note.style.display = 'none';
+    input.parentNode.insertBefore(select, input);
+    input.parentNode.insertBefore(note, input.nextSibling);
+    var request = 0;
+
+    function showInput(show) { input.style.display = show ? '' : 'none'; }
+    function showNote(message) {
+      note.textContent = message || '';
+      note.style.display = message ? '' : 'none';
+    }
+
+    select.addEventListener('change', function () {
+      if (select.value === OTHER_MODEL) {
+        input.value = '';
+        showInput(true);
+        input.focus();
+      } else {
+        input.value = select.value;
+        showInput(false);
+      }
+    });
+
+    function load() {
+      var provider = providerSelect.value;
+      var current = input.value.trim();
+      var mine = ++request;
+      select.innerHTML = '<option>Loading models&hellip;</option>';
+      select.disabled = true;
+      showNote('');
+      showInput(false);
+      fetch('/config/models/' + encodeURIComponent(provider) + '/models')
+        .then(function (r) { return r.json(); })
+        .then(function (data) {
+          if (mine !== request) return;
+          var models = data.models || [];
+          showNote(data.error);
+          // Only Anthropic has a default model (see agents' model config).
+          var options = provider === 'anthropic' ? '<option value="">(provider default)</option>' : '';
+          if (current && models.indexOf(current) === -1) options += '<option value="' + esc(current) + '">' + esc(current) + '</option>';
+          options += models.map(function (m) { return '<option value="' + esc(m) + '">' + esc(m) + '</option>'; }).join('');
+          options += '<option value="' + OTHER_MODEL + '">Other&hellip;</option>';
+          select.innerHTML = options;
+          select.disabled = false;
+          if (current || provider === 'anthropic' || models.length) {
+            select.value = current || (provider === 'anthropic' ? '' : models[0]);
+            input.value = select.value;
+          } else {
+            // Nothing listed: "Other" with the name box open.
+            select.value = OTHER_MODEL;
+            showInput(true);
+          }
+        })
+        .catch(function (err) {
+          if (mine !== request) return;
+          select.innerHTML = '<option value="' + OTHER_MODEL + '">Other&hellip;</option>';
+          select.disabled = false;
+          showInput(true);
+          showNote('Could not list models: ' + err.message);
+        });
+    }
+
+    providerSelect.addEventListener('change', function () { input.value = ''; load(); });
+    // form.reset() (after New agent creates one) puts the provider and
+    // the hidden model name back to their defaults, but not this
+    // dropdown's options; reload once the reset has happened.
+    form.addEventListener('reset', function () { setTimeout(load, 0); });
+    load();
+  }
+
+  // Which model providers have a key saved, from GET /config/models:
+  // {provider: true/false}, or null when that can't be read.
+  function loadProviderKeys() {
+    return fetch('/config/models')
+      .then(function (r) { return r.ok ? r.json() : null; })
+      .then(function (data) {
+        if (!data) return null;
+        var keys = {};
+        data.providers.forEach(function (p) { keys[p.provider] = p.configured; });
+        return keys;
+      })
+      .catch(function () { return null; });
+  }
+
+  // Lets a form's select[name=provider] choose only providers with a key
+  // saved, since an agent on one without a key can't answer. The rest stay
+  // listed, disabled and marked "(no key)", with a note under the select
+  // linking to the Models page. keepProvider (an agent's current provider)
+  // stays selectable without a key, so its other settings can still be
+  // saved. Moves a disabled choice to the first provider with a key and
+  // fires change, so the model dropdown follows. Returns that first
+  // provider with a key, or null when there's none.
+  function applyProviderKeys(form, keys, keepProvider) {
+    var select = form.querySelector('select[name="provider"]');
+    if (!select || !keys) return null;
+    var note = form.querySelector('[data-le-provider-note]');
+    if (!note) {
+      note = document.createElement('p');
+      note.className = 'hint';
+      note.style.margin = '0';
+      note.setAttribute('data-le-provider-note', '');
+      var label = select.closest('label') || select;
+      label.parentNode.insertBefore(note, label.nextSibling);
+    }
+    var firstWithKey = null;
+    var withoutKey = 0;
+    Array.prototype.forEach.call(select.options, function (option) {
+      var hasKey = Boolean(keys[option.value]);
+      option.disabled = !hasKey && option.value !== keepProvider;
+      option.textContent = hasKey ? option.value : option.value + ' (no key)';
+      if (hasKey && !firstWithKey) firstWithKey = option.value;
+      if (!hasKey) withoutKey++;
+    });
+    var modelsLink = '<a href="/config?section=models">Models page</a>';
+    note.innerHTML = firstWithKey
+      ? 'Add a key on the ' + modelsLink + ' to use more providers.'
+      : 'No model provider has a key yet. Add one on the ' + modelsLink + ' to choose a model.';
+    note.style.display = withoutKey ? '' : 'none';
+    var chosen = select.options[select.selectedIndex];
+    if (firstWithKey && chosen && chosen.disabled) {
+      select.value = firstWithKey;
+      var input = form.querySelector('input[name="modelName"]');
+      if (input) input.value = '';
+      select.dispatchEvent(new Event('change'));
+    }
+    return firstWithKey;
+  }
+
+  // ---- Abilities: where one came from, and what it can do ----
+  // Used by the Abilities page and each agent's Abilities tab.
+
+  var DECISION_LABELS = { allow: 'Allow', ask: 'Ask me', deny: 'Never' };
+
+  function decisionPill(decision) {
+    return decision ? '<span class="le-pill ' + decision + '">' + DECISION_LABELS[decision] + '</span>' : '<span class="hint">No rule</span>';
+  }
+
+  // Public (npm) or Private, with where it came from on hover.
+  function abilityOriginBadge(origin) {
+    if (!origin) return '';
+    return '<span class="le-pill ' + (origin.kind === 'private' ? 'accent' : '') + '" title="' + esc(origin.label) + '">' +
+      (origin.kind === 'private' ? 'Private' : 'Public') + '</span> <span class="hint">' + esc(origin.label) + '</span>';
+  }
+
+
+
+
+
+  // What an ability can do: its tools (what each one does and its
+  // permission: this agent's own when it's installed, else the one it
+  // ships with), skills and settings.
+  function renderAbilityDetails(d) {
+    var tools = d.tools || [];
+    var skills = d.skills || [];
+    var settings = d.settings || [];
+    var toolRows = tools.map(function (t) {
+      var permission = d.agent
+        ? decisionPill(t.agentDecision) + (t.decision && t.decision !== t.agentDecision ? ' <span class="hint">ships as ' + DECISION_LABELS[t.decision] + '</span>' : '')
+        : decisionPill(t.decision);
+      return '<tr><td><code>' + esc(t.name) + '</code></td><td>' + (t.description ? esc(t.description) : '<span class="hint">No description</span>') + '</td><td>' + permission + '</td></tr>';
+    }).join('');
+    // A one-line summary at the top: how many tools, by permission, and skills.
+    var counts = {};
+    tools.forEach(function (t) {
+      var decision = d.agent ? t.agentDecision : t.decision;
+      if (decision) counts[decision] = (counts[decision] || 0) + 1;
+    });
+    var byDecision = ['allow', 'ask', 'deny'].filter(function (k) { return counts[k]; }).map(function (k) { return counts[k] + ' ' + DECISION_LABELS[k]; });
+    var summary = tools.length + (tools.length === 1 ? ' tool' : ' tools') + (byDecision.length ? ' (' + byDecision.join(', ') + ')' : '') +
+      ' ' + String.fromCharCode(183) + ' ' + skills.length + (skills.length === 1 ? ' skill' : ' skills') +
+      (settings.length ? ' ' + String.fromCharCode(183) + ' ' + settings.length + (settings.length === 1 ? ' setting' : ' settings') : '');
+    return '<div class="ability-details">' +
+      '<div class="ability-details-head"><span class="ability-details-title">What <code>' + esc(d.name) + '</code>' + (d.version ? ' <span class="hint">' + esc(d.version) + '</span>' : '') + ' can do</span>' +
+        '<span class="ability-details-summary">' + summary + '</span></div>' +
+      (d.description ? '<p style="margin:0 0 6px">' + esc(d.description) + '</p>' : '') +
+      '<h4>Tools (' + tools.length + ')</h4>' +
+      (tools.length
+        ? '<table><thead><tr><th>Tool</th><th>What it does</th><th>' + (d.agent ? 'Permission in ' + esc(d.agent) : 'Permission it ships with') + '</th></tr></thead><tbody>' + toolRows + '</tbody></table>'
+        : '<p class="hint">No tools.</p>') +
+      '<h4>Skills (' + skills.length + ')</h4>' +
+      (skills.length
+        ? '<ul class="ability-skills">' + skills.map(function (s) { return '<li><code>' + esc(s.name) + '</code>' + (s.description ? ' ' + String.fromCharCode(8212) + ' ' + esc(s.description) : '') + '</li>'; }).join('') + '</ul>'
+        : '<p class="hint">No skills.</p>') +
+      (settings.length
+        ? '<h4>Settings it needs (' + settings.length + ')</h4><ul class="ability-skills">' + settings.map(function (s) { return '<li><code>' + esc(s.name) + '</code>' + (s.description ? ' ' + String.fromCharCode(8212) + ' ' + esc(s.description) : '') + '</li>'; }).join('') + '</ul>'
+        : '') +
+      '</div>';
+  }
+
+  // Opens (or closes) an ability's details in a row right under its own.
+  function toggleAbilityDetails(btn) {
+    var tr = btn.closest('tr');
+    var next = tr.nextElementSibling;
+    if (next && next.classList.contains('ability-details-row')) {
+      next.remove();
+      btn.textContent = 'Details';
+      btn.classList.remove('is-open');
+      return;
+    }
+    var row = document.createElement('tr');
+    row.className = 'ability-details-row';
+    row.innerHTML = '<td colspan="' + tr.children.length + '"><div class="ability-details"><p class="hint" style="margin:0">Reading what it can do' + String.fromCharCode(8230) + '</p></div></td>';
+    tr.parentNode.insertBefore(row, tr.nextSibling);
+    btn.textContent = 'Hide details';
+    btn.classList.add('is-open');
+    var agent = btn.dataset.agent;
+    fetch('/abilities/details?spec=' + encodeURIComponent(btn.dataset.spec) + (agent ? '&agent=' + encodeURIComponent(agent) : ''))
+      .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
+      .then(function (r) {
+        row.firstChild.innerHTML = r.ok ? renderAbilityDetails(r.body) : '<div class="ability-details"><p class="error" style="margin:0">Could not read it: ' + esc(r.body.error || 'unknown error') + '</p></div>';
+      })
+      .catch(function (err) { row.firstChild.innerHTML = '<div class="ability-details"><p class="error" style="margin:0">Could not read it: ' + esc(err.message) + '</p></div>'; });
+  }
+
+
+  window.leShell = { loadError: function () { return loadError; }, ready: ready, renderHead: renderHead, setTab: setTab, setActive: setActive, esc: esc, tabHref: tabHref, envCountHtml: envCountHtml, setCount: setCount, wireModelPicker: wireModelPicker, loadProviderKeys: loadProviderKeys, applyProviderKeys: applyProviderKeys, abilityOriginBadge: abilityOriginBadge, toggleAbilityDetails: toggleAbilityDetails };
 })();
 </script>`;

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

@@ -107,6 +107,18 @@ export const devUiCss = `
   .le-pill.allow, .le-pill.good { background: var(--good-soft); color: var(--good); }
   .le-pill.ask, .le-pill.warn { background: var(--warn-soft); color: var(--warn); }
   .le-pill.deny, .le-pill.bad { background: var(--bad-soft); color: var(--bad); }
+  /* An ability's details (leShell.toggleAbilityDetails), on the Abilities
+     page and each agent's Abilities tab. */
+  .ability-details-row > td { padding: 0 10px 14px; border-top: 0; background: transparent; }
+  .ability-details { border: 1px solid var(--accent); border-left-width: 4px; border-radius: var(--radius); background: var(--accent-soft); padding: 12px 16px 14px; }
+  .ability-details-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
+  .ability-details-title { font-size: 14px; font-weight: 600; }
+  .ability-details-summary { font-size: 12.5px; color: var(--ink-muted); }
+  .ability-details h4 { font-size: 13px; font-weight: 600; margin: 12px 0 6px; }
+  .ability-details table { width: 100%; background: var(--surface); border-radius: var(--radius); }
+  .ability-details-btn.is-open { border-color: var(--accent); color: var(--accent-ink, var(--accent)); }
+  .ability-skills { margin: 0; padding-left: 18px; }
+  .ability-skills li { margin: 3px 0; }
   .le-pill.neutral { background: var(--surface-2); color: var(--ink-muted); }
   .le-pill.accent { background: var(--accent-soft); color: var(--accent-ink); }