@floless/app 0.24.0 → 0.25.0

package/dist/floless-server.cjs

@@ -51852,6 +51852,28 @@ var aware = {
     const { data } = await runJson(["agent", "describe", assertId(id)]);
     return data;
   },
+  /**
+   * GET /api/agents/available — every agent in the registry catalog (installed or
+   * not), for the Agent Library's "Available" tab. `vendor`/`keywords` (CLI ≥ 0.72,
+   * the catalog-enrichment release) let the UI group by category; older CLIs that
+   * support `catalog` but predate the enrichment simply omit them → the UI falls
+   * back to a flat list. A CLI too old to know `catalog` at all (pre-0.54) throws
+   * AwareUnsupportedError so the caller can say "update AWARE".
+   */
+  async agentCatalog() {
+    try {
+      const { data } = await runJson(["agent", "catalog"]);
+      return data.agents ?? [];
+    } catch (err) {
+      if (err instanceof AwareError && isInvokeUnsupported(err.detail)) {
+        throw new AwareUnsupportedError(
+          `aware CLI does not support \`agent catalog\` (needs \u2265 0.54) \u2014 update AWARE`,
+          err.detail
+        );
+      }
+      throw err;
+    }
+  },
   /**
    * Invoke a BUILTIN agent command directly (`aware agent invoke <agent> <command>
    * --inputs @file --json`, CLI ≥ 0.63) and return the envelope's `data` — e.g.
@@ -52755,7 +52777,7 @@ function appVersion() {
   return resolveVersion({
     isSea: isSea2(),
     sqVersionXml: readSqVersionXml(),
-    define: true ? "0.24.0" : void 0,
+    define: true ? "0.25.0" : void 0,
     pkgVersion: readPkgVersion()
   });
 }
@@ -52765,7 +52787,7 @@ function resolveChannel(s) {
   return "dev";
 }
 function appChannel() {
-  return resolveChannel({ isSea: isSea2(), define: true ? "0.24.0" : void 0 });
+  return resolveChannel({ isSea: isSea2(), define: true ? "0.25.0" : void 0 });
 }
 
 // oauth-presets.ts
@@ -57603,6 +57625,21 @@ async function startServer() {
     const agent = await aware.agentDescribe(req.params.id);
     return { ok: true, agent };
   });
+  app.get("/api/agents/available", async () => {
+    try {
+      const agents = await aware.agentCatalog();
+      return { ok: true, agents };
+    } catch (err) {
+      if (err instanceof AwareUnsupportedError) return { ok: true, agents: [], unsupported: true };
+      throw err;
+    }
+  });
+  app.post("/api/agents/install", async (req, reply) => {
+    const id = req.body?.id;
+    if (!id || typeof id !== "string") return reply.status(400).send({ ok: false, error: "id is required" });
+    const result = await aware.ensureAgentInstalled(id);
+    return { ok: true, id: result.installed ?? id };
+  });
   app.get("/api/integrations", async () => {
     let integrations = listIntegrations();
     try {

package/dist/web/app.css

@@ -1174,6 +1174,38 @@
   }
   .lib-item .lib-fav.faved { color: var(--star); border-color: var(--star); }
 
+  /* Two-tab Agent Library: the tab bar sits between title and panes; each pane is a
+     flex column so its inner .lib-list keeps scrolling within the modal's max-height.
+     The hidden pane uses [hidden] (display:none) so it's skipped by assistive tech. */
+  .lib-tabs { margin: 4px 0 14px; }
+  /* flex-basis:auto (not 0) so the pane's content height still drives the modal up to
+     its max-height; min-height:0 lets the inner .lib-list (overflow:auto) scroll. With
+     basis:0 the pane contributes no intrinsic height and the modal collapses. */
+  .lib-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
+  .lib-pane[hidden] { display: none; }
+
+  /* Available tab: a category band spans both grid columns; the same .lib-item shell
+     as Installed carries the vendor tag, the description blurb, and the Install action. */
+  .lib-section { grid-column: 1 / -1; font-size: 10px; text-transform: uppercase;
+    letter-spacing: 0.12em; color: var(--text-dim); padding: 10px 2px 2px; }
+  .lib-section:first-child { padding-top: 2px; }
+  .lib-vendor { color: var(--text-dim); font-weight: 400; font-size: 11px; }
+  .lib-item .info .blurb {
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+  }
+  .lib-install {
+    background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim);
+    padding: 4px 11px; font-size: 11px; cursor: pointer; border-radius: 3px; flex-shrink: 0;
+    line-height: 1; transition: color 0.15s, border-color 0.15s;
+    display: inline-flex; align-items: center; gap: 6px;
+  }
+  .lib-install:hover { color: var(--text); border-color: var(--accent-dim); }
+  .lib-install[aria-busy="true"] { color: var(--text-dim); border-color: var(--border-strong); cursor: default; pointer-events: none; }
+  .lib-install .rtn-spinner { width: 11px; height: 11px; border-width: 2px; }
+  .lib-update-link { background: none; border: none; color: var(--accent); cursor: pointer;
+    font-size: 13px; padding: 6px 0 0; font-family: var(--ui); }
+  .lib-update-link:hover { text-decoration: underline; }
+
   /* ========== INTEGRATIONS MODAL ========== */
   .modal.integrations { width: 760px; max-height: 86vh; display: flex; flex-direction: column; }
   .integrations-hint {
@@ -2518,7 +2550,7 @@ body {
 
   /* ===== Tweak modal: screenshot attach ===== */
   .fm-file-input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
-  .fm-drop { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: 4px; background: var(--surface-2); color: var(--text-dim); font-size: 11px; text-align: center; line-height: 1.45; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
+  .fm-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: 4px; background: var(--surface-2); color: var(--text-dim); font-size: 11px; text-align: center; line-height: 1.45; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
   .fm-drop:hover, .fm-drop:focus-visible, .fm-drop.drag-over { border-color: var(--accent-dim); background: var(--accent-soft); color: var(--text-muted); outline: 2px solid var(--accent); outline-offset: 2px; }
   .fm-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
   .fm-thumbs[hidden] { display: none; }

package/dist/web/aware.js

@@ -1628,7 +1628,7 @@
           const has = st.mode !== 'empty';
           drop.classList.toggle('has-file', has);
           if (!has) {
-            drop.innerHTML = `Paste (Ctrl+V) or click to attach<span class="fm-drop-hint">${escapeHtml(hint)}</span>`;
+            drop.innerHTML = `<span class="fm-drop-main">Paste (Ctrl+V) or click to attach</span><span class="fm-drop-hint">${escapeHtml(hint)}</span>`;
             return;
           }
           const glyph = st.ext === 'pdf' ? 'pdf' : 'img';
@@ -3699,6 +3699,8 @@
 
   openLibrary = function openLibraryReal() {
     $libSearch.value = '';
+    if ($libAvailSearch) $libAvailSearch.value = '';
+    switchLibTab('installed'); // always open on Installed (the primary job)
     renderLibrary();
     $libModal.classList.add('show');
     if (!agentCatalog.length) loadAgentCatalog().then(renderLibrary).catch(reportErr);
@@ -3762,6 +3764,192 @@
     } catch (e) { reportErr(e); }
   }
 
+  // ── Agents library: "Available" tab (browse the registry, install on click) ──
+  // Functional categories derived from each agent's registry `keywords` (the CLI
+  // surfaces them in `agent catalog --json` from ≥0.72). First matching category
+  // wins; an agent matching none falls to "Other"; a catalog with NO keywords at
+  // all (older CLI) renders as a flat list (no headers). Categories are a browse
+  // aid only — search always cuts across every agent regardless of category.
+  const AGENT_CATEGORIES = [
+    { label: 'Structural & Analysis', kw: ['structural', 'analysis', 'engineering', 'fabrication', 'cnc'] },
+    { label: 'Productivity & Communication', kw: ['messaging', 'chat', 'email', 'calendar', 'teams', 'outlook', 'gmail', 'm365', 'microsoft-365', 'sharepoint', 'onedrive', 'gworkspace'] },
+    { label: 'Visualization & Viewers', kw: ['visualization', 'viewer', 'rendering', 'webgl', 'digital-twin', '3d'] },
+    { label: 'Model Checking & Coordination', kw: ['model-checking', 'clash-detection', 'bim-coordination', 'federation', 'inspection', 'validation'] },
+    { label: 'Construction & Document Control', kw: ['cde', 'document-control', 'construction', 'project-management', 'rfi', 'submittals', 'issues', 'correspondence', 'file-management', 'file-storage', 'drawings', 'specifications', 'spec', 'markup', 'masterformat', 'classification', 'ribadrm', 'sharing', 'redline'] },
+    { label: 'Interoperability & Formats', kw: ['ifc', 'bcf', 'dstv', 'nc1', 'file-format', 'cobie', 'openbim', 'bcf-xml'] },
+    { label: 'BIM Authoring & CAD', kw: ['architecture', 'bim', 'cad', 'drafting', 'parametric'] },
+    { label: 'Web, Data & Automation', kw: ['rest', 'http', 'api', 'webhook', 'openapi', 'json', 'vision', 'extract', 'escape-hatch'] },
+    { label: 'AWARE Tooling', kw: ['meta', 'builder', 'skill', 'descriptor', 'panels', 'blocks', 'introspection', 'uiautomation', 'codegen', 'agent'] },
+  ];
+  const OTHER_CATEGORY = 'Other';
+
+  function categorizeAgent(a) {
+    const kws = a.keywords || [];
+    for (const cat of AGENT_CATEGORIES) {
+      if (kws.some((k) => cat.kw.includes(k))) return cat.label;
+    }
+    return OTHER_CATEGORY;
+  }
+
+  let availableCatalog = [];        // every registry agent (installed or not)
+  let availableLoaded = false;      // first-switch lazy-load guard (set once loaded)
+  let availableLoading = false;     // a fetch is in flight (prevents a double-fetch race)
+  let availableUnsupported = false; // CLI too old to know `agent catalog`
+  let libTab = 'installed';
+
+  async function loadAvailableAgents() {
+    const { agents, unsupported } = await api('/api/agents/available');
+    availableCatalog = agents || [];
+    availableUnsupported = !!unsupported;
+    availableLoaded = true;
+  }
+
+  // "Available" means available-to-install, so already-installed agents live only
+  // in the Installed tab. agentCatalog holds the installed set (id per item).
+  function installedIdSet() { return new Set(agentCatalog.map((a) => a.id)); }
+
+  function availCardHtml(a) {
+    const name = escapeHtml(a.display_name || a.id);
+    const vendor = a.vendor ? ` <span class="lib-vendor">· ${escapeHtml(a.vendor)}</span>` : '';
+    const desc = (a.description || '').trim();
+    const blurb = desc ? `<div class="blurb">${escapeHtml(desc)}</div>` : '';
+    // Counts come from the CLI; default to 0 so an older CLI omitting them never
+    // renders "undefined command". (Numbers, so no escaping needed.)
+    const cmds = Number(a.commands) || 0;
+    const skills = Number(a.skills) || 0;
+    return `
+      <div class="lib-card" data-agent="${escapeAttr(a.id)}">
+        <div class="lib-item">
+          <div class="info">
+            <div class="name">${name}${vendor}</div>
+            <div class="meta">${cmds} command${cmds === 1 ? '' : 's'} · ${skills} skill${skills === 1 ? '' : 's'}</div>
+            ${blurb}
+          </div>
+          <button class="lib-install" data-install="${escapeAttr(a.id)}" aria-label="Install ${escapeAttr(a.display_name || a.id)}">Install</button>
+        </div>
+      </div>`;
+  }
+
+  function renderAvailable() {
+    // Degradation (i): CLI predates `agent catalog` entirely — hide search, show notice.
+    if (availableUnsupported) {
+      $libAvailSearch.hidden = true;
+      $libAvailList.innerHTML =
+        '<div class="empty-state">Browsing available agents needs AWARE 0.54 or later.' +
+        '<br><button class="lib-update-link" id="lib-avail-update">Update AWARE →</button></div>';
+      const up = document.getElementById('lib-avail-update');
+      if (up) up.onclick = () => {
+        hideModal($libModal);
+        const pill = document.getElementById('aware-update');
+        if (pill && !pill.hidden) pill.click();
+        else showToast('Update AWARE (@aware-aeco/cli) to 0.54+ to browse available agents', 'info');
+      };
+      $libAvailCount.textContent = '';
+      return;
+    }
+    $libAvailSearch.hidden = false;
+
+    if (!availableLoaded) {
+      $libAvailList.innerHTML = '<div class="empty-state"><span class="rtn-spinner"></span> Loading available agents…</div>';
+      $libAvailCount.textContent = '';
+      return;
+    }
+
+    const installed = installedIdSet();
+    const notInstalled = availableCatalog.filter((a) => !installed.has(a.id));
+    const q = ($libAvailSearch.value || '').toLowerCase().trim();
+    const match = (a) => !q
+      || a.id.toLowerCase().includes(q)
+      || (a.display_name || '').toLowerCase().includes(q)
+      || (a.description || '').toLowerCase().includes(q)
+      || (a.vendor || '').toLowerCase().includes(q)
+      || (a.keywords || []).some((k) => k.toLowerCase().includes(q));
+    const items = notInstalled.filter(match);
+    $libAvailCount.textContent = `${items.length} agent${items.length === 1 ? '' : 's'}`;
+
+    if (!items.length) {
+      $libAvailList.innerHTML = '<div class="empty-state">No agents match.</div>';
+      return;
+    }
+
+    const hasKeywords = items.some((a) => (a.keywords || []).length);
+    let html;
+    if (q || !hasKeywords) {
+      // Searching, or no keyword data (older CLI) → one flat list, no headers.
+      html = items.map(availCardHtml).join('');
+    } else {
+      // Browse mode: group by category in AGENT_CATEGORIES order, "Other" last.
+      const order = [...AGENT_CATEGORIES.map((c) => c.label), OTHER_CATEGORY];
+      const byCat = new Map();
+      for (const a of items) {
+        const c = categorizeAgent(a);
+        if (!byCat.has(c)) byCat.set(c, []);
+        byCat.get(c).push(a);
+      }
+      html = order.filter((c) => byCat.has(c)).map((c) =>
+        `<div class="lib-section">${escapeHtml(c)}</div>` + byCat.get(c).map(availCardHtml).join('')
+      ).join('');
+    }
+    $libAvailList.innerHTML = html;
+    $libAvailList.querySelectorAll('[data-install]').forEach((btn) => {
+      btn.onclick = () => installAgent(btn.dataset.install, btn);
+    });
+  }
+
+  async function installAgent(id, btn) {
+    const label = btn.getAttribute('aria-label') || `Install ${id}`;
+    const a = availableCatalog.find((x) => x.id === id);
+    btn.setAttribute('aria-busy', 'true');
+    btn.setAttribute('aria-label', label.replace(/^Install/, 'Installing') + '…');
+    btn.innerHTML = '<span class="rtn-spinner"></span>';
+    try {
+      await api('/api/agents/install', { method: 'POST', body: JSON.stringify({ id }) });
+    } catch (e) {
+      btn.removeAttribute('aria-busy');
+      btn.setAttribute('aria-label', label);
+      btn.textContent = 'Install';
+      reportErr(e);
+      return;
+    }
+    // Installed now — signal success BEFORE the catalog refresh so a transient refresh
+    // failure can't swallow the confirmation of an install that already succeeded.
+    showToast(`Installed “${a && a.display_name ? a.display_name : id}” — find it in Installed`, 'ok');
+    // Refresh the Installed catalog (footer count + Installed tab) best-effort, then
+    // re-render Available so the now-installed agent drops out (= not-yet-installed).
+    try { await loadAgentCatalog(); } catch (e) { console.warn('post-install catalog refresh failed', e); }
+    renderAvailable();
+    if (libTab === 'installed') renderLibrary();
+  }
+
+  function switchLibTab(tab) {
+    libTab = tab;
+    $libTabs.querySelectorAll('[data-libtab]').forEach((b) => {
+      const on = b.dataset.libtab === tab;
+      b.classList.toggle('active', on);
+      b.setAttribute('aria-selected', on ? 'true' : 'false');
+    });
+    $libPaneInstalled.hidden = tab !== 'installed';
+    $libPaneAvailable.hidden = tab !== 'available';
+    if (tab === 'available') {
+      renderAvailable(); // shows the loading spinner first if not yet loaded
+      if (!availableLoaded && !availableLoading && !availableUnsupported) {
+        availableLoading = true;
+        loadAvailableAgents()
+          .then(renderAvailable)
+          .catch((e) => {
+            $libAvailList.innerHTML = '<div class="empty-state">Could not load available agents.</div>';
+            $libAvailCount.textContent = '';
+            reportErr(e);
+          })
+          .finally(() => { availableLoading = false; });
+      }
+      setTimeout(() => { if (!$libAvailSearch.hidden) $libAvailSearch.focus(); }, 0);
+    } else {
+      renderLibrary(); // repaint from agentCatalog — it may have grown via an Install on the other tab
+      setTimeout(() => $libSearch.focus(), 0);
+    }
+  }
+
   // ── Integrations: real connection state from the local vault ────────────────
   const VENDOR_ICON = { microsoft: '▦', google: 'G', trimble: '◬', autodesk: 'A' };
   let integrations = [];
@@ -4755,6 +4943,19 @@
   $browseBtn.onclick = () => openLibrary();
   $libSearch.oninput = () => renderLibrary();
 
+  // Agent Library two-tab wiring (Installed | Available). The Available tab is
+  // lazy-loaded on first switch (see switchLibTab).
+  const $libTabs = document.getElementById('lib-tabs');
+  const $libPaneInstalled = document.getElementById('lib-pane-installed');
+  const $libPaneAvailable = document.getElementById('lib-pane-available');
+  const $libAvailSearch = document.getElementById('lib-avail-search');
+  const $libAvailList = document.getElementById('lib-avail-list');
+  const $libAvailCount = document.getElementById('lib-avail-count');
+  if ($libTabs) $libTabs.querySelectorAll('[data-libtab]').forEach((b) => {
+    b.onclick = () => switchLibTab(b.dataset.libtab);
+  });
+  if ($libAvailSearch) $libAvailSearch.oninput = () => renderAvailable();
+
   // Compile-notes strip: × collapses it to a faint one-line pill; clicking the
   // collapsed pill re-expands. Delegated (the strip's innerHTML is rebuilt each
   // load). The choice is remembered per app+note-signature (see notesSig).

package/dist/web/index.html

@@ -416,9 +416,24 @@
   <div class="modal-backdrop" id="lib-modal">
     <div class="modal library">
       <div class="modal-title">Agent Library</div>
-      <div class="modal-sub">All installed agents · star a command to save it as a Template.</div>
-      <input id="lib-search" class="lib-search" type="text" placeholder="Search (tekla, slack, file, …)">
-      <div class="lib-list" id="lib-list"></div>
+      <div class="tabs lib-tabs" id="lib-tabs" role="tablist" aria-label="Agent Library tabs">
+        <button data-libtab="installed" class="active" role="tab" aria-selected="true" aria-controls="lib-pane-installed">Installed</button>
+        <button data-libtab="available" role="tab" aria-selected="false" aria-controls="lib-pane-available">Available</button>
+      </div>
+
+      <div class="lib-pane" id="lib-pane-installed" role="tabpanel" aria-label="Installed agents">
+        <div class="modal-sub">All installed agents · star a command to save it as a Template.</div>
+        <input id="lib-search" class="lib-search" type="text" placeholder="Search (tekla, slack, file, …)" aria-label="Search installed agents">
+        <div class="lib-list" id="lib-list"></div>
+      </div>
+
+      <div class="lib-pane" id="lib-pane-available" role="tabpanel" aria-label="Available agents" hidden>
+        <div class="modal-sub">Every agent in the AWARE registry · install one to add it to your library.</div>
+        <input id="lib-avail-search" class="lib-search" type="text" placeholder="Search available agents (revit, ifc, slack, …)" aria-label="Search available agents">
+        <span class="sr-only" aria-live="polite" id="lib-avail-count"></span>
+        <div class="lib-list" id="lib-avail-list"></div>
+      </div>
+
       <div class="modal-actions">
         <button id="lib-graft" style="margin-right:auto;" data-tip="Build a new agent from a tool you own — a DLL, C# source, NuGet package, or API spec.">⊕ Graft new agent</button>
         <button id="lib-close">Close</button>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floless/app",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "type": "module",
   "description": "Thin localhost host for floless.app — serves web/ and shells the aware CLI. No engine, no LLM.",
   "bin": {