@floless/app 0.26.0 → 0.28.0

package/dist/floless-server.cjs

@@ -51710,8 +51710,11 @@ function parseBuildOutput(stdout) {
 function agentInstallArgv(id) {
   return ["agent", "install", assertId(id)];
 }
+function agentUpdateArgv(id) {
+  return ["agent", "update", assertId(id)];
+}
 function parseAgentInstallOutput(stdout) {
-  const m = stdout.match(/✓\s+installed\s+(\S+)/);
+  const m = stdout.match(/✓\s+(?:installed|updated)\s+(\S+)/);
   return { installed: m?.[1] ?? null };
 }
 function isAgentInstalled(agents, id) {
@@ -52023,6 +52026,18 @@ var aware = {
     if (isAgentInstalled(agents, id)) return { installed: id, output: "already installed" };
     return this.agentInstall(id);
   },
+  /**
+   * Update an installed agent to the latest registry version (`aware agent update
+   * <id>`). Unlike `ensureAgentInstalled`, this always re-pulls — it is the Agent
+   * Library's in-place "Update" action for a card whose installed version trails the
+   * catalog. Like install, the pull fetches a tarball (slow), so use the generous
+   * timeout. The token is NOT involved — only the agent manifest is fetched.
+   */
+  async agentUpdate(id) {
+    const { code, stdout, stderr } = await runRawWithEnv(agentUpdateArgv(id), void 0, 6e5);
+    if (code !== 0) throw new AwareError(`aware agent update ${id} failed (exit ${code})`, { stdout, stderr });
+    return { ...parseAgentInstallOutput(stdout), output: stdout.trim() };
+  },
   /**
    * POST /api/run — installed ID. `run` ignores --json and prints
    * "✓ run complete; trace at <path>"; we parse the path and read the JSONL.
@@ -52777,7 +52792,7 @@ function appVersion() {
   return resolveVersion({
     isSea: isSea2(),
     sqVersionXml: readSqVersionXml(),
-    define: true ? "0.26.0" : void 0,
+    define: true ? "0.28.0" : void 0,
     pkgVersion: readPkgVersion()
   });
 }
@@ -52787,7 +52802,7 @@ function resolveChannel(s) {
   return "dev";
 }
 function appChannel() {
-  return resolveChannel({ isSea: isSea2(), define: true ? "0.26.0" : void 0 });
+  return resolveChannel({ isSea: isSea2(), define: true ? "0.28.0" : void 0 });
 }
 
 // oauth-presets.ts
@@ -57673,28 +57688,38 @@ async function startServer() {
       throw err;
     }
   });
-  const installingAgents = /* @__PURE__ */ new Set();
-  let installQueue = Promise.resolve();
-  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" });
-    if (installingAgents.has(id)) return reply.status(202).send({ ok: true, started: true });
-    installingAgents.add(id);
-    installQueue = installQueue.then(async () => {
+  const agentJobsInFlight = /* @__PURE__ */ new Set();
+  let agentJobQueue = Promise.resolve();
+  function startAgentJob(id, action, run) {
+    agentJobsInFlight.add(id);
+    agentJobQueue = agentJobQueue.then(async () => {
       let result;
       try {
-        const res = await aware.ensureAgentInstalled(id);
-        result = { type: "agent-install-result", id, ok: true, installed: res.installed ?? id };
+        const res = await run();
+        result = { type: "agent-install-result", action, id, ok: true, installed: res.installed ?? id };
       } catch (err) {
-        result = { type: "agent-install-result", id, ok: false, error: err instanceof Error ? err.message : String(err) };
+        result = { type: "agent-install-result", action, id, ok: false, error: err instanceof Error ? err.message : String(err) };
       } finally {
-        installingAgents.delete(id);
+        agentJobsInFlight.delete(id);
       }
       try {
         broadcast(result);
       } catch {
       }
     });
+  }
+  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" });
+    if (agentJobsInFlight.has(id)) return reply.status(202).send({ ok: true, started: true });
+    startAgentJob(id, "install", () => aware.ensureAgentInstalled(id));
+    return reply.status(202).send({ ok: true, started: true });
+  });
+  app.post("/api/agents/update", async (req, reply) => {
+    const id = req.body?.id;
+    if (!id || typeof id !== "string") return reply.status(400).send({ ok: false, error: "id is required" });
+    if (agentJobsInFlight.has(id)) return reply.status(202).send({ ok: true, started: true });
+    startAgentJob(id, "update", () => aware.agentUpdate(id));
     return reply.status(202).send({ ok: true, started: true });
   });
   app.get("/api/integrations", async () => {

package/dist/web/app.css

@@ -344,6 +344,9 @@
     overflow: hidden;
     min-width: 0;
     position: relative;
+    /* Touch: the canvas is a one-finger-pan + pinch-zoom surface on phones (handled in app.js);
+       touch-action:none stops the browser claiming the gesture first. .dashboard re-enables scroll. */
+    touch-action: none;
     /* The whole canvas is a pannable infinite surface (drag the background / middle-mouse),
        so the grab affordance covers the entire grid-area — not just .topology, which is
        sized around the node cards and left distant background areas as a plain arrow (#115).
@@ -1165,6 +1168,17 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  /* Version as a small dim pill on the meta line — matches the canvas node-card
+     `.ver` token, so the version no longer competes with the agent name (#119). */
+  .lib-item .info .meta .lib-ver {
+    font-family: var(--mono);
+    font-size: 9px;
+    color: var(--text-dim);
+    background: var(--surface-2);
+    padding: 1px 5px;
+    border-radius: 3px;
+    margin-right: 4px;
+  }
   .lib-item .info .blurb { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
   .lib-item .lib-fav {
     background: transparent;
@@ -1180,6 +1194,22 @@
   }
   .lib-item .lib-fav.faved { color: var(--star); border-color: var(--star); }
 
+  /* Installed-tab action cluster: the transient "Update" action sits LEFT of the
+     persistent ⌄ "show commands" caret (#119). */
+  .lib-item .lib-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
+  /* "Update" affordance — outline-accent-dim: signals "an action is available / newer
+     version" without the full-accent weight reserved for primary/selected. Shown only
+     when the registry is strictly ahead of the installed version; hidden when current. */
+  .lib-update {
+    background: transparent; border: 1px solid var(--accent-dim); color: var(--accent-dim);
+    padding: 4px 9px; font-size: 11px; cursor: pointer; border-radius: 3px; flex-shrink: 0;
+    line-height: 1; transition: color 0.15s, border-color 0.15s; font-family: var(--ui);
+    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
+  }
+  .lib-update:hover { color: var(--accent); border-color: var(--accent); }
+  .lib-update[aria-busy="true"] { color: var(--text-dim); border-color: var(--border-strong); cursor: default; pointer-events: none; }
+  .lib-update .rtn-spinner { width: 11px; height: 11px; border-width: 2px; }
+
   /* 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. */
@@ -2873,7 +2903,7 @@ body {
 /* In dashboard view the pannable topology is hidden, so the canvas isn't a drag surface —
    drop the grab affordance the .canvas rule sets for the normal view (#115 follow-up). */
 .canvas.view-dashboard { cursor: default; }
-.dashboard { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 24px; }
+.dashboard { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 24px; touch-action: pan-y; }
 .dashboard[hidden] { display: none; }
 
 /* Notices above the panels: dim note (degraded validation / warnings) and the
@@ -2979,3 +3009,19 @@ body {
 
 /* Inspect-tab panels reuse the same block styles inside the inspect body. */
 .ext-inspect { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; }
+
+/* ===== MOBILE REFLOW =====
+   Phone/touch access (e.g. over Tailscale). The desktop 3-column shell is wider than a phone
+   and html,body{overflow:hidden} (top of file) clips the off-screen columns with no way to pan
+   to them — single-finger AND pinch do nothing. On narrow screens, WITHIN the locked skin:
+     (1) let the shell scroll so nothing is ever unreachable;
+     (2) collapse both side panels by default (see app.js) — canvas full-width, tap the existing
+         48px stubs to reveal chat/inspect one at a time;
+     (3) let the header wrap and the workflow picker shrink so it fits one phone-width row.
+   Guarded by the media query → desktop layout is 100% untouched. No new fonts/colors/components. */
+@media (max-width: 760px) {
+  html, body { overflow: auto; }
+  .app { height: auto; min-height: 100vh; grid-template-rows: auto 1fr 44px; }
+  header { flex-wrap: wrap; gap: 8px; padding: 8px 14px; }
+  select, .wf-combo { min-width: 0; }
+}

package/dist/web/app.js

@@ -31,6 +31,13 @@ function loadState() {
     if (c.left !== undefined)  state.collapse.left = c.left;
     if (c.right !== undefined) state.collapse.right = c.right;
   } catch {}
+  // Mobile/touch: start with both side panels collapsed so the canvas is full-width and the
+  // desktop 3-column shell fits a phone. In-memory only — NOT persisted, so it never clobbers
+  // the desktop collapse preference. The user can still tap the stubs to reveal chat/inspect.
+  if (window.matchMedia('(max-width: 760px)').matches) {
+    state.collapse.left = true;
+    state.collapse.right = true;
+  }
 }
 function saveFavs() {
   document.getElementById('fav-count').textContent = state.favorites.length;
@@ -1448,6 +1455,54 @@ window.addEventListener('mouseup', () => {
 });
 $canvasEl.addEventListener('auxclick', (e) => { if (e.button === 1) e.preventDefault(); });
 
+// ----- Touch: one-finger pan + two-finger pinch-zoom (phones). The mouse handlers above are
+// untouched (touch events never fire from a mouse), so desktop is unaffected. touch-action:none
+// on .canvas (CSS) stops the browser hijacking the gesture and suppresses synthetic mouse events.
+let tPan = false, tPinch = false, tFromX = 0, tFromY = 0, tBaseX = 0, tBaseY = 0, pinchDist0 = 0, pinchZoom0 = 1;
+const pinchSpan = (ts) => Math.hypot(ts[0].clientX - ts[1].clientX, ts[0].clientY - ts[1].clientY);
+$canvasEl.addEventListener('touchstart', (e) => {
+  if (e.touches.length === 2) {
+    e.preventDefault();
+    tPinch = true; tPan = false;
+    pinchDist0 = pinchSpan(e.touches) || 1; pinchZoom0 = zoom;
+  } else if (e.touches.length === 1) {
+    // Let taps on interactive chrome through (node select, zoom toolbar, fav-bar, find, dashboard).
+    if (e.target.closest('.agent-card, .canvas-toolbar, .fav-bar, .find-overlay, .dashboard')) return;
+    e.preventDefault();
+    tPan = true; tPinch = false;
+    tFromX = e.touches[0].clientX; tFromY = e.touches[0].clientY;
+    tBaseX = panX; tBaseY = panY;
+    $canvasEl.classList.add('panning');
+  }
+}, { passive: false });
+$canvasEl.addEventListener('touchmove', (e) => {
+  if (tPinch && e.touches.length === 2) {
+    e.preventDefault();
+    const ratio = pinchSpan(e.touches) / pinchDist0;
+    zoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, pinchZoom0 * ratio));
+    autoFit = false;
+    applyTransform();
+  } else if (tPan && e.touches.length === 1) {
+    e.preventDefault();
+    panX = tBaseX + (e.touches[0].clientX - tFromX);
+    panY = tBaseY + (e.touches[0].clientY - tFromY);
+    autoFit = false;
+    applyTransform();
+  }
+}, { passive: false });
+function endTouch(e) {
+  if (e.touches.length === 0) {
+    tPan = false; tPinch = false; $canvasEl.classList.remove('panning');
+  } else if (e.touches.length === 1 && tPinch) {
+    // 2->1 finger: hand off from pinch to pan without a jump.
+    tPinch = false; tPan = true;
+    tFromX = e.touches[0].clientX; tFromY = e.touches[0].clientY;
+    tBaseX = panX; tBaseY = panY;
+  }
+}
+$canvasEl.addEventListener('touchend', endTouch);
+$canvasEl.addEventListener('touchcancel', endTouch);
+
 // Keep the auto-fitted view fitted as the canvas resizes (a panel toggling/dragging,
 // the window resizing) — but never override a view the user has zoomed/panned. A
 // trailing debounce fires ONE clean re-fit after the resize settles (rather than on

package/dist/web/aware.js

@@ -3296,21 +3296,31 @@
           if ($libModal && $libModal.classList.contains('show')) renderLibrary();
         }).catch(() => {});
       } else if (m.type === 'agent-install-result') {
-        // A background `aware agent install` (from the Available tab) finished. Clear
-        // its in-flight state, then on success refresh so it drops out of Available and
-        // appears under Installed; on failure restore its Install button + surface why.
+        // A background `aware agent install` (Available tab) or `aware agent update`
+        // (Installed tab) finished — `m.action` says which. Clear its in-flight state,
+        // then on success refresh the catalog (install: drops out of Available, appears
+        // under Installed; update: the new version replaces the old → its Update button
+        // disappears). On failure restore the card + surface why.
+        const isUpdate = m.action === 'update';
         installingIds.delete(m.id);
         if (m.ok) {
-          const a = availableCatalog.find((x) => x.id === m.id);
-          showToast(`Installed “${a && a.display_name ? a.display_name : m.id}” — find it in Installed`, 'ok');
+          if (isUpdate) {
+            showToast(`Updated “${m.id}”`, 'ok');
+          } else {
+            const a = availableCatalog.find((x) => x.id === m.id);
+            showToast(`Installed “${a && a.display_name ? a.display_name : m.id}” — find it in Installed`, 'ok');
+          }
           loadAgentCatalog().then(() => {
             if (!($libModal && $libModal.classList.contains('show'))) return;
             renderAvailable();
             if (libTab === 'installed') renderLibrary();
           }).catch(() => {});
         } else {
-          showToast(`Install failed: ${String(m.error || '').slice(0, 80)}`, 'err');
-          if ($libModal && $libModal.classList.contains('show')) renderAvailable();
+          showToast(`${isUpdate ? 'Update' : 'Install'} failed: ${String(m.error || '').slice(0, 80)}`, 'err');
+          if ($libModal && $libModal.classList.contains('show')) {
+            if (isUpdate) renderLibrary();
+            else renderAvailable();
+          }
         }
       } else if (m.type === 'request-added' || m.type === 'requests-changed') {
         loadRequests();
@@ -3726,29 +3736,85 @@
     renderLibrary();
     $libModal.classList.add('show');
     if (!agentCatalog.length) loadAgentCatalog().then(renderLibrary).catch(reportErr);
+    // Load the registry catalog too, so the Installed tab can flag outdated agents
+    // with an "Update" button (and the Available tab is instant when switched to).
+    ensureAvailableLoaded(() => {
+      renderLibrary();
+      if (libTab === 'available') renderAvailable();
+    });
   };
 
+  // Compare two dotted version strings numerically, segment by segment (missing
+  // segments = 0). Returns 1 if a>b, -1 if a<b, 0 if equal — so the Installed tab
+  // only offers an "Update" when the registry is STRICTLY ahead (never a downgrade).
+  // Handles the registry's mixed schemes (e.g. "0.2.0" vs "1.0.0", "0.1.0" vs
+  // "2025.0.1"). ponytail: numeric-only compare — registry versions are pure dotted
+  // integers; a pre-release/build suffix (none today) compares by its leading int.
+  function cmpVer(a, b) {
+    const pa = String(a).split('.');
+    const pb = String(b).split('.');
+    const n = Math.max(pa.length, pb.length);
+    for (let i = 0; i < n; i++) {
+      const x = parseInt(pa[i], 10) || 0;
+      const y = parseInt(pb[i], 10) || 0;
+      if (x !== y) return x > y ? 1 : -1;
+    }
+    return 0;
+  }
+
+  // Latest installable version for an installed id, from availableCatalog (lazy-loaded
+  // on library open). Uses the catalog's `manifest_version` — the agent's manifest
+  // version for the latest registry entry, i.e. the version an in-place `aware agent
+  // update` actually pulls. This is the SAME axis as the installed agent's version
+  // (agentCatalog/`agent list` also reports manifest.version), so the comparison is
+  // valid — the catalog's `version` field is the registry INDEX key (the install
+  // spec, a different axis) and must NOT be compared. null when the registry hasn't
+  // loaded, the agent isn't in it (e.g. a grafted/local agent), or the CLI predates
+  // manifest_version (aware < the catalog-manifest-version release) → no Update shown.
+  function latestVersionFor(id) {
+    const a = availableCatalog.find((x) => x.id === id);
+    return a && a.manifest_version ? a.manifest_version : null;
+  }
+
   renderLibrary = function renderLibraryReal() {
     const q = ($libSearch.value || '').toLowerCase().trim();
     const items = agentCatalog.filter((a) => !q || a.id.toLowerCase().includes(q) || (a.kind || '').toLowerCase().includes(q));
     // Each agent is ONE grid cell: the card header + its (lazy) command list live
     // in the same `.lib-card`, so expanding nests the commands directly under the
     // picked card instead of scattering them into a neighbouring grid slot.
-    $libList.innerHTML = items.map((a) => `
-      <div class="lib-card" data-agent="${escapeAttr(a.id)}">
+    $libList.innerHTML = items.map((a) => {
+      const id = escapeAttr(a.id);
+      // "Update" shows only when the registry is strictly ahead of the installed
+      // version AND the registry catalog has loaded (else we can't know) — hidden,
+      // not disabled, when up to date. A pull in flight shows a spinner instead.
+      const latest = availableLoaded ? latestVersionFor(a.id) : null;
+      const canUpdate = !!latest && cmpVer(latest, a.version) > 0;
+      const updateBtn = installingIds.has(a.id)
+        ? `<button class="lib-update" aria-busy="true" aria-label="Updating ${escapeAttr(a.id)}…" data-tip="Downloading update from the registry — this can take a minute"><span class="rtn-spinner"></span></button>`
+        : canUpdate
+          ? `<button class="lib-update" data-update="${id}" aria-label="Update ${escapeAttr(a.id)} to v${escapeAttr(String(latest))}" data-tip="Update to v${escapeAttr(String(latest))}">↑ v${escapeHtml(String(latest))}</button>`
+          : '';
+      return `
+      <div class="lib-card" data-agent="${id}">
         <div class="lib-item">
           <div class="info">
-            <div class="name">${escapeHtml(a.id)} <span style="color:var(--text-dim);font-weight:400">v${escapeHtml(String(a.version))}</span></div>
-            <div class="meta">${escapeHtml(a.kind || 'agent')} · ${a.commands} command${a.commands === 1 ? '' : 's'} · ${a.skills} skill${a.skills === 1 ? '' : 's'}</div>
+            <div class="name">${escapeHtml(a.id)}</div>
+            <div class="meta"><span class="lib-ver">v${escapeHtml(String(a.version))}</span> ${escapeHtml(a.kind || 'agent')} · ${a.commands} command${a.commands === 1 ? '' : 's'} · ${a.skills} skill${a.skills === 1 ? '' : 's'}</div>
+          </div>
+          <div class="lib-actions">
+            ${updateBtn}
+            <button class="lib-fav" data-expand="${id}" data-tip="Show commands">⌄</button>
           </div>
-          <button class="lib-fav" data-expand="${escapeAttr(a.id)}" data-tip="Show commands">⌄</button>
         </div>
-        <div class="lib-commands" id="cmds-${escapeAttr(a.id)}" hidden></div>
-      </div>
-    `).join('') || '<div class="empty-state">No agents match.</div>';
+        <div class="lib-commands" id="cmds-${id}" hidden></div>
+      </div>`;
+    }).join('') || '<div class="empty-state">No agents match.</div>';
     $libList.querySelectorAll('[data-expand]').forEach((btn) => {
       btn.onclick = () => expandAgent(btn.dataset.expand);
     });
+    $libList.querySelectorAll('[data-update]').forEach((btn) => {
+      btn.onclick = () => updateAgent(btn.dataset.update, btn);
+    });
   };
 
   async function expandAgent(id) {
@@ -3948,6 +4014,49 @@
       });
   }
 
+  // Update an installed agent in place to the latest registry version (Installed tab
+  // "Update" button). Mirrors installAgent: the server runs `aware agent update`
+  // asynchronously (a registry pull, ~a minute) and reports completion over SSE
+  // (`agent-install-result`, action:'update'), so we flip the card to a busy spinner
+  // and let the SSE handler refresh the catalog + re-render. `installingIds` is the
+  // shared in-flight set (an id can't be installing and updating at once).
+  function updateAgent(id, btn) {
+    if (installingIds.has(id)) return; // already in flight (server dedupes too)
+    installingIds.add(id);
+    if (btn) { // immediate feedback before the next render
+      btn.setAttribute('aria-busy', 'true');
+      btn.setAttribute('aria-label', `Updating ${id}…`);
+      btn.removeAttribute('data-update'); // a stray re-wire can't re-trigger it
+      btn.innerHTML = '<span class="rtn-spinner"></span>';
+    }
+    showToast(`Updating “${id}” — this can take a minute or two`, 'info');
+    api('/api/agents/update', { method: 'POST', body: JSON.stringify({ id }) })
+      .catch((e) => { // the START failed (bad id / server) — completion errors arrive via SSE
+        installingIds.delete(id);
+        if ($libModal && $libModal.classList.contains('show')) renderLibrary();
+        reportErr(e);
+      });
+  }
+
+  // Lazy-load the registry catalog once. Used by the Available tab (to list agents)
+  // AND the Installed tab (to detect outdated agents → show "Update"). `onLoaded`
+  // fires after the data is available (immediately if already loaded), so the caller
+  // can re-render whichever view needs it. No-op on a pre-0.54 CLI (no catalog).
+  function ensureAvailableLoaded(onLoaded) {
+    if (availableUnsupported) return;
+    if (availableLoaded) { if (onLoaded) onLoaded(); return; }
+    if (availableLoading) return; // a load is already in flight; its onLoaded re-renders
+    availableLoading = true;
+    loadAvailableAgents()
+      .then(() => { if (onLoaded) onLoaded(); })
+      .catch((e) => {
+        $libAvailList.innerHTML = '<div class="empty-state">Could not load available agents.</div>';
+        $libAvailCount.textContent = '';
+        reportErr(e);
+      })
+      .finally(() => { availableLoading = false; });
+  }
+
   function switchLibTab(tab) {
     libTab = tab;
     $libTabs.querySelectorAll('[data-libtab]').forEach((b) => {
@@ -3959,17 +4068,7 @@
     $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; });
-      }
+      ensureAvailableLoaded(() => { renderAvailable(); renderLibrary(); });
       setTimeout(() => { if (!$libAvailSearch.hidden) $libAvailSearch.focus(); }, 0);
     } else {
       renderLibrary(); // repaint from agentCatalog — it may have grown via an Install on the other tab

package/package.json

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