loopengine 0.1.5 → 0.1.6

package/PROTOCOL.md

@@ -190,7 +190,7 @@ loopengine run customer-service --json "order A-1001 arrived broken, can you ref
 
 ```
 {"type":"session","sessionId":"5a83c6b4-..."}
-{"type":"budget:check","action":"ok","usedTokens":2,"budgetTokens":8000,"ratio":0.00025}
+{"type":"budget:check","action":"ok","usedTokens":2,"budgetTokens":100000,"ratio":0.00002}
 {"type":"tool:started","id":"call_1","tool":"issue_refund", ...}
 {"type":"done","text":"Refunded $42.00..."}
 ```

package/dist/core/run-agent.js

@@ -310,7 +310,12 @@ async function buildTurnContext(config, modelCall, options) {
     // that doesn't exist (a flat-file agent with no skills at all)
     // harmless: an empty index, not an error.
     const skillsDirs = config.skillsDirs ?? [`agents/${config.name}/skills`];
-    const skillGarden = new SkillGarden({ dirs: [...skillsDirs, systemSkillsDir], indexBudgetTokens: config.skillIndexBudgetTokens ?? 200 });
+    // 2000, not an arbitrary round number: skillgarden's own default is
+    // ~1% of a real agent context window (~100k-200k tokens for the
+    // providers this repo wires up) — see its own SkillGardenOptions doc
+    // comment. loopengine used to default lower (200), which left barely
+    // enough room for a handful of skills before truncating the index.
+    const skillGarden = new SkillGarden({ dirs: [...skillsDirs, systemSkillsDir], indexBudgetTokens: config.skillIndexBudgetTokens ?? 2000 });
     const skillIndex = skillGarden.buildIndex().included;
     // Also the tail-preservation window recover() below relies on — kept as
     // one named constant so the two can never drift out of sync.
@@ -321,8 +326,17 @@ async function buildTurnContext(config, modelCall, options) {
     // budgetTokens/softThreshold so a nudge firing and compaction's own
     // recovery target agree — see budget.ts's own BudgetTrackerOptions doc
     // comment.
-    const budgetTracker = new BudgetTracker({ budgetTokens: config.contextBudgetTokens ?? 8000 });
-    const compactor = new Compactor({ budgetTokens: config.contextBudgetTokens ?? 8000, softThreshold: budgetTracker.softThreshold, tailMessages });
+    // 100000, not 8000: the providers this repo wires up (Claude, GPT-4o,
+    // DeepSeek) all give a real conversation 128k-200k tokens of window,
+    // and 8000 was small enough that a handful of tool calls (each with a
+    // full JSON schema + result) routinely tripped compaction on an
+    // otherwise ordinary turn. 100000 leaves headroom under even the
+    // smallest of those windows for the system prompt, tool schemas, and
+    // the model's own response, while softThreshold's default 0.7 (a
+    // 70000-token nudge point) and hardThreshold's 0.92 still leave real
+    // margin before hitting it.
+    const budgetTracker = new BudgetTracker({ budgetTokens: config.contextBudgetTokens ?? 100000 });
+    const compactor = new Compactor({ budgetTokens: config.contextBudgetTokens ?? 100000, softThreshold: budgetTracker.softThreshold, tailMessages });
     const rules = loadRules(config);
     // AgentConfig.httpNotifier only ever stands in for the http channel —
     // see its own doc comment for why cli/http_stream never consult it at

package/dist/index.d.ts

@@ -35,6 +35,8 @@ export { globalConfigPageHtml } from './web/global-config-page.js';
 export { playgroundHtml } from './web/playground.js';
 export { readSkill, writeSkill, deleteSkill, SkillInvalidIdError, SkillNotFoundError } from './web/skills-admin.js';
 export type { SkillContent } from './web/skills-admin.js';
+export { listSkillgardenCatalog, readSkillgardenCatalogEntry, addSkillgardenSkillToAgent, SkillgardenUnavailableError } from './web/skillgarden-admin.js';
+export type { SkillgardenCatalogEntry, SkillgardenCatalogDetail } from './web/skillgarden-admin.js';
 export { readActauthConfig, addActauthRule, updateActauthRule, removeActauthRule, setDefaultDecision, ActauthRuleExistsError, ActauthRuleNotFoundError, } from './web/actauth-admin.js';
 export type { ActauthRuleInput, ActauthConfigView } from './web/actauth-admin.js';
 export { describeModelProviders, describeGateways } from './web/global-config.js';

package/dist/index.js

@@ -40,6 +40,7 @@ export { agentsListPageHtml } from './web/agents-list-page.js';
 export { globalConfigPageHtml } from './web/global-config-page.js';
 export { playgroundHtml } from './web/playground.js';
 export { readSkill, writeSkill, deleteSkill, SkillInvalidIdError, SkillNotFoundError } from './web/skills-admin.js';
+export { listSkillgardenCatalog, readSkillgardenCatalogEntry, addSkillgardenSkillToAgent, SkillgardenUnavailableError } from './web/skillgarden-admin.js';
 export { readActauthConfig, addActauthRule, updateActauthRule, removeActauthRule, setDefaultDecision, ActauthRuleExistsError, ActauthRuleNotFoundError, } from './web/actauth-admin.js';
 export { describeModelProviders, describeGateways } from './web/global-config.js';
 export { createTrackedApprover, listApprovals, decideApproval, findApproval } from './web/web-approver.js';

package/dist/web/agent-file-admin.d.ts

@@ -9,6 +9,9 @@ export interface AgentEditableFields {
         provider: Provider;
         model?: string;
     };
+    maxTurns?: number;
+    contextBudgetTokens?: number;
+    skillIndexBudgetTokens?: number;
 }
 export interface AgentEditResult {
     systemPrompt?: string;
@@ -16,6 +19,9 @@ export interface AgentEditResult {
         provider: Provider;
         model: string;
     };
+    maxTurns?: number;
+    contextBudgetTokens?: number;
+    skillIndexBudgetTokens?: number;
 }
 /** Surgically rewrites just the fields given in `fields` — see this
  * file's own header comment for why, and for the "refuse rather than

package/dist/web/agent-file-admin.js

@@ -89,6 +89,31 @@ function findConfigObjectLiteral(sourceFile) {
 function findProperty(obj, name) {
     return obj.properties.find((p) => p.name !== undefined && ts.isIdentifier(p.name) && p.name.text === name);
 }
+// maxTurns/contextBudgetTokens/skillIndexBudgetTokens are the only three
+// AgentConfig fields this file edits that are *usually absent* — every
+// agent in this repo, and create-loopengine's own scaffold template,
+// leaves all three unset and rides run-agent.ts's own defaults (25 /
+// 100000 / 2000), unlike systemPrompt/model which agentIndexTemplate always
+// writes out explicitly. So "the property isn't in this file" can't mean
+// refuse here the way it does for a genuinely unusual systemPrompt/model
+// shape — that would make every freshly scaffolded agent's limits
+// permanently uneditable through this API. Missing properties are
+// collected into `toInsert` instead and spliced in as new lines just
+// before the object literal's closing brace (see editAgentFile's own use
+// of this); an *existing* property whose value isn't a plain number
+// literal is still refused, same "don't guess" rule as everything else
+// in this file.
+function upsertNumericProperty(configObj, sourceFile, edits, toInsert, name, value) {
+    const prop = findProperty(configObj, name);
+    if (!prop) {
+        toInsert.push(`${name}: ${value}`);
+        return;
+    }
+    if (!ts.isPropertyAssignment(prop) || !ts.isNumericLiteral(prop.initializer)) {
+        throw new AgentEditNotSupportedError(`${name} in this file is not a plain number literal — edit it directly.`);
+    }
+    edits.push({ start: prop.initializer.getStart(sourceFile), end: prop.initializer.getEnd(), text: String(value) });
+}
 /** Surgically rewrites just the fields given in `fields` — see this
  * file's own header comment for why, and for the "refuse rather than
  * guess" rule this follows for anything that isn't a plain, recognizable
@@ -150,6 +175,31 @@ export function editAgentFile(agentName, fields) {
             edits.push({ start: comment.pos, end: comment.end, text: `// reads ${MODEL_ENV_VAR[provider]}` });
         }
     }
+    const toInsert = [];
+    for (const name of ['maxTurns', 'contextBudgetTokens', 'skillIndexBudgetTokens']) {
+        const value = fields[name];
+        if (value === undefined)
+            continue;
+        if (!Number.isInteger(value) || value < 1) {
+            throw new AgentEditNotSupportedError(`${name} must be a positive integer.`);
+        }
+        upsertNumericProperty(configObj, sourceFile, edits, toInsert, name, value);
+        result[name] = value;
+    }
+    if (toInsert.length) {
+        // Insert right before the closing "}", not right after the last
+        // property node — a hand-written trailing line comment there (like
+        // model's own "// reads ANTHROPIC_API_KEY" above) would otherwise end
+        // up with new properties spliced into the middle of it. The object's
+        // own pre-existing newline-before-"}" becomes the separator before
+        // the first inserted line for free; only an object with *no*
+        // properties at all needs its own leading newline.
+        const closeBracePos = configObj.getEnd() - 1;
+        const hasProps = configObj.properties.length > 0;
+        const needsLeadingComma = hasProps && !configObj.properties.hasTrailingComma;
+        const text = (hasProps ? '' : '\n') + (needsLeadingComma ? ',' : '') + toInsert.map((p) => `  ${p},\n`).join('');
+        edits.push({ start: closeBracePos, end: closeBracePos, text });
+    }
     if (!edits.length)
         return result;
     // Apply from the end of the file backward — each edit's start/end was

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

@@ -131,12 +131,12 @@ export const agentsConfigPageHtml = `<!doctype html>
     letter-spacing: normal;
     padding: 2px 8px;
   }
-  .http-tool-subsection {
+  .admin-subsection {
     margin-top: 14px;
     padding-top: 14px;
     border-top: 1px dashed light-dark(#eee, #2a2a2e);
   }
-  .http-tool-subsection h4 {
+  .admin-subsection h4 {
     font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 0.04em;
@@ -309,6 +309,84 @@ export const agentsConfigPageHtml = `<!doctype html>
      stretches the checkbox to the full row width, which visually
      overlaps the description text under it instead of sitting beside it. */
   form.add-source input[type="checkbox"] { width: auto; flex-shrink: 0; margin-top: 2px; }
+  /* Same column-stacking issue as .tool-picker-item above: .http-tool-
+     inline-label (the "required" / "send as JSON body" checkboxes in the
+     HTTP tool builder) is a <label> too, so "form.add-source label" wins
+     on specificity alone and stacks the checkbox above its own text
+     instead of beside it — this rule needs to match "label" too to win. */
+  form.add-source label.http-tool-inline-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+  }
+  /* These three are plain <div>s of sibling inputs/selects/buttons, not
+     <label>s, so none of the rules above touch them — without an explicit
+     row layout they just wrap at the browser's default inline spacing,
+     which reads as everything jammed together with no breathing room.
+     form.add-source itself caps at max-width: 480px (see above), which
+     isn't wide enough to hold a field row's 5 items (name/type/
+     description/required/delete) on one line at a readable width, so
+     this wraps rather than forcing a single cramped line — each item
+     gets a min-width so text inputs wrap onto their own line instead of
+     shrinking to an unreadable sliver. */
+  .http-tool-field-row, .http-tool-header-row, .http-tool-method-url {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+  /* Same "form.add-source input { width: 100% }" override as the checkbox
+     fix above — each field here sits beside its siblings in a row, not
+     stacked full-width above them. */
+  .http-tool-field-row input[type="text"],
+  .http-tool-field-row select,
+  .http-tool-header-row input[type="text"],
+  .http-tool-method-url input[type="text"],
+  .http-tool-method-url select {
+    width: auto;
+  }
+  .http-tool-field-row .http-tool-field-name { flex: 1 1 100px; min-width: 100px; }
+  .http-tool-field-row .http-tool-field-type { flex: 0 0 auto; }
+  .http-tool-field-row .http-tool-field-description { flex: 2 1 140px; min-width: 140px; }
+  .http-tool-field-row .http-tool-inline-label { flex: 0 0 auto; white-space: nowrap; }
+  .http-tool-header-row .http-tool-header-key { flex: 1 1 100px; min-width: 100px; }
+  .http-tool-header-row .http-tool-header-value { flex: 2 1 140px; min-width: 140px; }
+  .http-tool-method-url select { flex: 0 0 auto; }
+  .http-tool-method-url input[type="text"] { flex: 1 1 160px; min-width: 160px; }
+  .http-tool-field-row .http-tool-remove-row,
+  .http-tool-header-row .http-tool-remove-row {
+    flex: 0 0 auto;
+    margin-left: auto;
+  }
+  /* Taller than .hint-btn's own 2px 8px default (shared with the Gateway
+     Tools "Refresh" button, which sits inline in an <h3> and shouldn't
+     grow) — these two sit on their own line below the field/header rows,
+     so there's no header-row height to match. */
+  #httpToolAddFieldBtn, #httpToolAddHeaderBtn {
+    padding: 6px 12px;
+  }
+  .skillgarden-category-badge {
+    display: inline-block;
+    font-family: ui-sans-serif, system-ui, sans-serif;
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    padding: 1px 7px;
+    border-radius: 999px;
+    background: light-dark(#eef1ec, #1e2519);
+    color: light-dark(#3f6b4a, #7fbf8f);
+    margin-right: 6px;
+  }
+  #skillgardenFilterInput { margin-bottom: 8px; }
+  .skillgarden-catalog-body {
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px solid light-dark(#eee, #2a2a2e);
+    font-size: 13px;
+  }
 </style>
 </head>
 <body>
@@ -599,15 +677,31 @@ export const agentsConfigPageHtml = `<!doctype html>
         '<dt>tenantFor</dt><dd>' + badge(cfg.tenantFor.indexOf('custom') === 0 ? 'custom' : 'default') + ' <span class="muted">' + escapeHtml(cfg.tenantFor) + '</span></dd>' +
         '<dt>isSafeTool</dt><dd>' + badge(cfg.isSafeTool === 'custom' ? 'custom' : 'default') + ' <span class="muted">' + escapeHtml(cfg.isSafeTool) + '</span></dd>' +
         '</dl></section>' +
-      '<section><h3>Limits &amp; budgets</h3><dl class="kv">' +
-        '<dt>maxTurns</dt><dd>' + escapeHtml(cfg.maxTurns) + '</dd>' +
-        '<dt>contextBudgetTokens</dt><dd>' + escapeHtml(cfg.contextBudgetTokens) + '</dd>' +
-        '<dt>skillIndexBudgetTokens</dt><dd>' + escapeHtml(cfg.skillIndexBudgetTokens) + '</dd>' +
-        '<dt>skillsDirs</dt><dd>' + escapeHtml(cfg.skillsDirs.join(', ') || '(none)') + '</dd>' +
-        '</dl></section>';
+      '<section><h3>Limits &amp; budgets <button type="button" class="edit-btn" id="editLimitsBtn">Edit</button></h3>' +
+        '<dl class="kv" id="limitsDisplay">' +
+          '<dt>maxTurns</dt><dd>' + escapeHtml(cfg.maxTurns) + '</dd>' +
+          '<dt>contextBudgetTokens</dt><dd>' + escapeHtml(cfg.contextBudgetTokens) + '</dd>' +
+          '<dt>skillIndexBudgetTokens</dt><dd>' + escapeHtml(cfg.skillIndexBudgetTokens) + '</dd>' +
+        '</dl>' +
+        '<form class="add-source" id="limitsForm" style="display:none">' +
+          '<label>Max turns <span class="hint">(hard cap on model calls in one turn)</span>' +
+            '<input type="number" name="maxTurns" min="1" step="1" value="' + escapeHtml(cfg.maxTurns) + '">' +
+          '</label>' +
+          '<label>Context budget <span class="hint">(tokens — triggers compaction of older messages once exceeded)</span>' +
+            '<input type="number" name="contextBudgetTokens" min="1" step="1" value="' + escapeHtml(cfg.contextBudgetTokens) + '">' +
+          '</label>' +
+          '<label>Skill index budget <span class="hint">(tokens — caps the always-loaded skill name/description index)</span>' +
+            '<input type="number" name="skillIndexBudgetTokens" min="1" step="1" value="' + escapeHtml(cfg.skillIndexBudgetTokens) + '">' +
+          '</label>' +
+          '<button type="submit">Save</button>' +
+          '<button type="button" id="cancelLimitsBtn">Cancel</button>' +
+          '<div class="error" id="limitsError"></div>' +
+        '</form>' +
+        '<dl class="kv"><dt>skillsDirs</dt><dd>' + escapeHtml(cfg.skillsDirs.join(', ') || '(none)') + '</dd></dl>' +
+      '</section>';
   }
 
-  // Wires the System prompt / Model Edit buttons rendered by
+  // Wires the System prompt / Model / Limits & budgets Edit buttons rendered by
   // renderOverviewHtml above — called every time that HTML gets (re)set
   // (renderDetail, refreshOverviewPanel, refreshSkillsDependentPanels),
   // same pattern every other tab's own wireXHandlers already follows.
@@ -708,6 +802,53 @@ export const agentsConfigPageHtml = `<!doctype html>
           });
       });
     }
+
+    var editLimitsBtn = overviewPanel.querySelector('#editLimitsBtn');
+    if (editLimitsBtn) {
+      var limitsDisplay = overviewPanel.querySelector('#limitsDisplay');
+      var limitsForm = overviewPanel.querySelector('#limitsForm');
+      var limitsError = overviewPanel.querySelector('#limitsError');
+
+      editLimitsBtn.addEventListener('click', function () {
+        limitsDisplay.style.display = 'none';
+        editLimitsBtn.style.display = 'none';
+        limitsForm.style.display = '';
+      });
+      overviewPanel.querySelector('#cancelLimitsBtn').addEventListener('click', function () {
+        limitsForm.style.display = 'none';
+        limitsDisplay.style.display = '';
+        editLimitsBtn.style.display = '';
+        limitsError.textContent = '';
+      });
+      limitsForm.addEventListener('submit', function (ev) {
+        ev.preventDefault();
+        limitsError.textContent = '';
+        var data = new FormData(limitsForm);
+        var submitBtn = limitsForm.querySelector('button[type="submit"]');
+        submitBtn.disabled = true;
+        var body = {
+          maxTurns: Number(data.get('maxTurns')),
+          contextBudgetTokens: Number(data.get('contextBudgetTokens')),
+          skillIndexBudgetTokens: Number(data.get('skillIndexBudgetTokens')),
+        };
+        fetch('/agents/' + encodeURIComponent(name), {
+          method: 'PUT',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify(body),
+        })
+          .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');
+            currentCfg = result.body;
+            overviewPanel.innerHTML = renderOverviewHtml(result.body);
+            wireOverviewHandlers(name);
+          })
+          .catch(function (err) {
+            limitsError.textContent = err.message;
+            submitBtn.disabled = false;
+          });
+      });
+    }
   }
 
   // ---- Overview's own Actauth section: read-only, from cfg.permissions
@@ -1016,18 +1157,194 @@ export const agentsConfigPageHtml = `<!doctype html>
           '<button type="submit" id="skillSubmitBtn">Add</button>' +
           '<button type="button" id="skillCancelBtn" style="display:none">Cancel</button>' +
           '<div id="skillFormError" class="error"></div>' +
-        '</form></section>';
+        '</form></section>' +
+      '<section><h3>Browse skillgarden catalog</h3>' +
+        '<input type="text" id="skillgardenFilterInput" placeholder="Filter by name or category&hellip;">' +
+        '<div id="skillgardenCatalogList"><p class="hint">Loading&hellip;</p></div>' +
+      '</section>';
   }
 
   function skillsPanelEl() {
     return detail.querySelector('[data-tab-panel="skills"]');
   }
 
+  // ---- Skills tab's "Browse skillgarden catalog" section: a
+  // read-only, agent-independent list of everything GET /skillgarden-
+  // catalog reports (see web/skillgarden-admin.ts) — cached in this one
+  // module-level variable, not per-agent like gatewayLoadedFor, since
+  // the catalog itself never varies by agent. renderSkillsTabHtml
+  // regenerates the whole Skills panel (including this section's own
+  // markup) on every agent switch/refresh, so loadSkillgardenCatalogSection
+  // re-renders from this cache instead of re-fetching every time — only
+  // the very first time this tab is opened in the page's lifetime hits
+  // the network at all. ----
+  var skillgardenCatalog = null;
+
+  function skillgardenCatalogListEl() {
+    var panel = skillsPanelEl();
+    return panel ? panel.querySelector('#skillgardenCatalogList') : null;
+  }
+
+  function renderSkillgardenCatalogEntry(entry) {
+    return '<div class="source" data-category="' + escapeHtml(entry.category) + '" data-id="' + escapeHtml(entry.id) + '">' +
+      '<div class="source-head">' +
+        '<h4><span class="skillgarden-category-badge">' + escapeHtml(entry.category) + '</span>' + escapeHtml(entry.id) + '</h4>' +
+        '<span>' +
+          '<button type="button" class="skillgarden-view-btn" data-category="' + escapeHtml(entry.category) + '" data-id="' + escapeHtml(entry.id) + '">View</button> ' +
+          '<button type="button" class="skillgarden-add-btn" data-category="' + escapeHtml(entry.category) + '" data-id="' + escapeHtml(entry.id) + '">Add to this agent</button>' +
+        '</span>' +
+      '</div>' +
+      '<p class="hint">' + escapeHtml(entry.description) + '</p>' +
+      '<div class="skillgarden-catalog-body" style="display:none"></div>' +
+      '</div>';
+  }
+
+  function renderSkillgardenCatalogList(entries) {
+    return entries.length ? entries.map(renderSkillgardenCatalogEntry).join('') : '<p class="hint">No skills match.</p>';
+  }
+
+  function applySkillgardenCatalog(name, entries) {
+    var listEl = skillgardenCatalogListEl();
+    if (!listEl) return;
+    listEl.innerHTML = renderSkillgardenCatalogList(entries);
+    wireSkillgardenCatalogHandlers(name);
+  }
+
+  function filteredSkillgardenCatalog(filterText) {
+    if (!filterText) return skillgardenCatalog;
+    var needle = filterText.toLowerCase();
+    return skillgardenCatalog.filter(function (entry) {
+      return entry.category.toLowerCase().indexOf(needle) !== -1 || entry.id.toLowerCase().indexOf(needle) !== -1;
+    });
+  }
+
+  function loadSkillgardenCatalogSection(name) {
+    var listEl = skillgardenCatalogListEl();
+    if (!listEl) return;
+    if (skillgardenCatalog) {
+      var panel = skillsPanelEl();
+      var filterInput = panel ? panel.querySelector('#skillgardenFilterInput') : null;
+      applySkillgardenCatalog(name, filteredSkillgardenCatalog(filterInput ? filterInput.value.trim() : ''));
+      return;
+    }
+    listEl.innerHTML = '<p class="hint">Loading&hellip;</p>';
+    fetch('/skillgarden-catalog')
+      .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');
+        skillgardenCatalog = result.body;
+        if (currentName !== name) return;
+        applySkillgardenCatalog(name, skillgardenCatalog);
+      })
+      .catch(function (err) {
+        if (currentName !== name) return;
+        listEl.innerHTML = '<p class="error">Could not load skillgarden catalog: ' + escapeHtml(err.message) + '</p>';
+      });
+  }
+
+  // force=true retries as an explicit overwrite after the operator
+  // confirms — same "ask once a plain add collides, don't ask up front"
+  // flow the rest of this page never has to think about since nothing
+  // else lets an operator add something whose id they don't already
+  // control the uniqueness of themselves.
+  function performSkillgardenAdd(name, category, id, btn, originalText, force) {
+    fetch('/agents/' + encodeURIComponent(name) + '/skillgarden-catalog/' + encodeURIComponent(category) + '/' + encodeURIComponent(id), {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ force: !!force }),
+    })
+      .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
+      .then(function (result) {
+        if (result.ok) {
+          refreshSkillsDependentPanels(name);
+          return;
+        }
+        if (!force && /already exists/.test(result.body.error || '')) {
+          if (confirm('A skill named "' + id + '" already exists for this agent. Overwrite it?')) {
+            performSkillgardenAdd(name, category, id, btn, originalText, true);
+            return;
+          }
+          btn.disabled = false;
+          btn.textContent = originalText;
+          return;
+        }
+        throw new Error(result.body.error || 'request failed');
+      })
+      .catch(function (err) {
+        alert('Could not add "' + id + '": ' + err.message);
+        btn.disabled = false;
+        btn.textContent = originalText;
+      });
+  }
+
+  function wireSkillgardenCatalogHandlers(name) {
+    var listEl = skillgardenCatalogListEl();
+    if (!listEl) return;
+
+    var viewButtons = listEl.querySelectorAll('.skillgarden-view-btn');
+    for (var i = 0; i < viewButtons.length; i++) {
+      viewButtons[i].addEventListener('click', function (ev) {
+        var btn = ev.currentTarget;
+        var category = btn.getAttribute('data-category');
+        var id = btn.getAttribute('data-id');
+        var card = btn.closest('.source');
+        var bodyEl = card.querySelector('.skillgarden-catalog-body');
+        if (bodyEl.style.display !== 'none') {
+          bodyEl.style.display = 'none';
+          btn.textContent = 'View';
+          return;
+        }
+        if (bodyEl.getAttribute('data-loaded') === '1') {
+          bodyEl.style.display = 'block';
+          btn.textContent = 'Hide';
+          return;
+        }
+        btn.disabled = true;
+        fetch('/skillgarden-catalog/' + encodeURIComponent(category) + '/' + encodeURIComponent(id))
+          .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');
+            bodyEl.innerHTML = renderMarkdownPreview(result.body.body);
+            bodyEl.setAttribute('data-loaded', '1');
+            bodyEl.style.display = 'block';
+            btn.textContent = 'Hide';
+          })
+          .catch(function (err) {
+            bodyEl.innerHTML = '<p class="error">' + escapeHtml(err.message) + '</p>';
+            bodyEl.style.display = 'block';
+          })
+          .then(function () { btn.disabled = false; });
+      });
+    }
+
+    var addButtons = listEl.querySelectorAll('.skillgarden-add-btn');
+    for (var j = 0; j < addButtons.length; j++) {
+      addButtons[j].addEventListener('click', function (ev) {
+        var btn = ev.currentTarget;
+        var category = btn.getAttribute('data-category');
+        var id = btn.getAttribute('data-id');
+        var originalText = btn.textContent;
+        btn.disabled = true;
+        btn.textContent = 'Adding…';
+        performSkillgardenAdd(name, category, id, btn, originalText, false);
+      });
+    }
+  }
+
   function wireSkillsHandlers(name) {
     var panel = skillsPanelEl();
     if (!panel) return;
     var editingSkillId = null;
 
+    loadSkillgardenCatalogSection(name);
+    var skillgardenFilterInput = panel.querySelector('#skillgardenFilterInput');
+    if (skillgardenFilterInput) {
+      skillgardenFilterInput.addEventListener('input', function () {
+        if (!skillgardenCatalog) return;
+        applySkillgardenCatalog(name, filteredSkillgardenCatalog(skillgardenFilterInput.value.trim()));
+      });
+    }
+
     // Write/Preview toggle for the Body field — same idea as GitHub's own
     // issue/PR editor: the textarea and the rendered preview show/hide
     // each other, the textarea's value is the only source of truth (the
@@ -1158,7 +1475,7 @@ export const agentsConfigPageHtml = `<!doctype html>
 
   function renderToolsTabHtml(cfg) {
     return '<section><h3>Local tools (' + cfg.localTools.length + ')</h3>' + renderTools(cfg.localTools) +
-      '<div class="http-tool-subsection"><h4>Create an HTTP tool</h4>' + renderHttpToolFormHtml() + '</div>' +
+      '<div class="admin-subsection"><h4>Create an HTTP tool</h4>' + renderHttpToolFormHtml() + '</div>' +
       '</section>' +
       '<section id="gatewayToolsSection">' +
         '<h3>Gateway Tools <button type="button" id="gatewayToolsRefreshBtn" class="hint-btn">Refresh</button></h3>' +
@@ -1207,7 +1524,7 @@ export const agentsConfigPageHtml = `<!doctype html>
         '<input type="text" name="name" required pattern="[a-z][a-z0-9_]*" placeholder="lookup_order_status">' +
       '</label>' +
       '<label>Description' +
-        '<input type="text" name="description" required placeholder="What this tool does">' +
+        '<textarea name="description" id="httpToolDescriptionInput" required placeholder="What this tool does"></textarea>' +
       '</label>' +
       '<label>Fields' +
         '<div id="httpToolFieldRows"></div>' +

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

@@ -0,0 +1,24 @@
+export declare class SkillgardenUnavailableError extends Error {
+}
+export interface SkillgardenCatalogEntry {
+    category: string;
+    id: string;
+    description: string;
+}
+export interface SkillgardenCatalogDetail extends SkillgardenCatalogEntry {
+    body: string;
+}
+export declare function listSkillgardenCatalog(): SkillgardenCatalogEntry[];
+export declare function readSkillgardenCatalogEntry(category: string, id: string): SkillgardenCatalogDetail;
+/** Copies `registry/<category>/<id>/` into `agents/<agentName>/skills/<id>/`
+ * — delegates entirely to skillgarden's own `addSkill`, which already
+ * knows this exact `agents/<agent>/skills` destination convention (see
+ * its own doc comment) and already refuses (or, with `force`,
+ * overwrites) an existing destination. Returns the bare skill id actually
+ * installed — never category-qualified, matching `addSkill`'s own
+ * "category is a registry-organization concept, not forced onto what a
+ * caller now owns" convention. */
+export declare function addSkillgardenSkillToAgent(agentName: string, category: string, id: string, force?: boolean): {
+    id: string;
+    path: string;
+};

package/dist/web/skillgarden-admin.js

@@ -0,0 +1,76 @@
+// Lets an operator browse skillgarden's own bundled skill registry from
+// the Skills tab in /agents/config, and add one straight into an agent's
+// agents/<name>/skills/ folder — a shortcut for the same thing
+// `npx skillgarden add <skill> --agent <name>` already does from a
+// terminal, surfaced in the UI instead. This module only ever *reads*
+// the registry and delegates the actual copy to skillgarden's own
+// exported `addSkill` (see below) — it never re-implements that logic.
+import { createRequire } from 'node:module';
+import { dirname, join } from 'node:path';
+import { SkillGarden, addSkill as skillgardenAddSkill } from 'skillgarden';
+export class SkillgardenUnavailableError extends Error {
+}
+// skillgarden's own CLI resolves its bundled registry/ relative to its
+// own compiled dist/cli.js location (see its cli.ts's own
+// DEFAULT_REGISTRY_DIR), but doesn't export that path — `addSkill`
+// itself defaults to it internally, which is enough for *installing* a
+// skill, but browsing/previewing the catalog needs the directory path
+// itself. Re-derived here the same way Node's own module resolution
+// would: from package.json's real installed location, not assumed
+// relative to this file (skillgarden is a real npm dependency, not a
+// vendored copy).
+function registryDir() {
+    const require = createRequire(import.meta.url);
+    let pkgJsonPath;
+    try {
+        pkgJsonPath = require.resolve('skillgarden/package.json');
+    }
+    catch {
+        throw new SkillgardenUnavailableError('skillgarden is not installed — run `npm install skillgarden` to enable the skill catalog.');
+    }
+    return join(dirname(pkgJsonPath), 'registry');
+}
+// A large, fixed budget, not run-agent.ts's own live skillIndexBudgetTokens
+// default — this indexes a small, fixed, bundled catalog for browsing,
+// not an agent's own live context, so nothing here should ever silently
+// truncate the list an operator sees.
+const CATALOG_INDEX_BUDGET_TOKENS = 1_000_000;
+// discoverSkillFiles namespaces registry/<category>/<skill>/SKILL.md as
+// "<category>:<skill>" (colon-joined, one level of nesting) — split on
+// just the first colon, not skillId itself, in case a future entry ever
+// nests deeper than one category level.
+function splitNamespacedName(namespacedName) {
+    const colon = namespacedName.indexOf(':');
+    return { category: namespacedName.slice(0, colon), id: namespacedName.slice(colon + 1) };
+}
+function catalogGarden() {
+    return new SkillGarden({ dirs: [registryDir()], indexBudgetTokens: CATALOG_INDEX_BUDGET_TOKENS });
+}
+export function listSkillgardenCatalog() {
+    const { included } = catalogGarden().buildIndex();
+    return included
+        .map((entry) => ({ ...splitNamespacedName(entry.name), description: entry.description }))
+        .sort((a, b) => (a.category === b.category ? a.id.localeCompare(b.id) : a.category.localeCompare(b.category)));
+}
+export function readSkillgardenCatalogEntry(category, id) {
+    const garden = catalogGarden();
+    garden.buildIndex();
+    // load() throws a plain Error for an unindexed name — same "not found"
+    // shape a bad category/id combination should surface as; the caller
+    // (adapters/http.ts) maps any throw here to 404, so there's nothing
+    // more specific to catch and re-throw.
+    const loaded = garden.load(`${category}:${id}`);
+    return { category, id, description: loaded.description, body: loaded.body };
+}
+/** Copies `registry/<category>/<id>/` into `agents/<agentName>/skills/<id>/`
+ * — delegates entirely to skillgarden's own `addSkill`, which already
+ * knows this exact `agents/<agent>/skills` destination convention (see
+ * its own doc comment) and already refuses (or, with `force`,
+ * overwrites) an existing destination. Returns the bare skill id actually
+ * installed — never category-qualified, matching `addSkill`'s own
+ * "category is a registry-organization concept, not forced onto what a
+ * caller now owns" convention. */
+export function addSkillgardenSkillToAgent(agentName, category, id, force = false) {
+    const result = skillgardenAddSkill({ skill: `${category}/${id}`, agent: agentName, registryDir: registryDir(), force });
+    return { id, path: join(result.destination, 'SKILL.md') };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "loopengine",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "description": "Runtime for tool-using AI agents with a transparent ReAct loop.",
   "license": "MIT",
@@ -78,7 +78,7 @@
     "mcpplug": "^0.0.1",
     "openai": "^7.4.0",
     "sessionknit": "^0.0.2",
-    "skillgarden": "^0.0.5",
+    "skillgarden": "^0.0.9",
     "toollane": "^0.0.1",
     "typescript": "^5.7.0",
     "yaml": "^2.6.0"