@floless/app 0.15.0 → 0.16.1

package/dist/floless-server.cjs

@@ -50969,6 +50969,13 @@ function readApp(id) {
     compilerVersion: typeof lockDoc["compiler-version"] === "string" ? lockDoc["compiler-version"] : null,
     agentPins
   };
+  const skillCache = /* @__PURE__ */ new Map();
+  const nodeSkill = (agent, command) => {
+    if (!agent || !command) return null;
+    const key = JSON.stringify([agent, command]);
+    if (!skillCache.has(key)) skillCache.set(key, readNodeSkill(agent, command));
+    return skillCache.get(key) ?? null;
+  };
   const srcNodes = Array.isArray(src.nodes) ? src.nodes : [];
   const nodes = srcNodes.map((n) => {
     const nid = String(n.id);
@@ -50984,7 +50991,8 @@ function readApp(id) {
       mode: lockMode === "write" || lockMode === "read" ? lockMode : "unknown",
       inputs: asRecord(locked?.inputs),
       config: asRecord(n.config),
-      notes: notes2
+      notes: notes2,
+      skill: nodeSkill(n.agent != null ? String(n.agent) : null, command)
     };
   });
   const layout = src.layout === "dag" ? "dag" : "linear";
@@ -51038,7 +51046,7 @@ function sourceNodeId(nodes, connections) {
   return nodes.find((n) => !hasIncoming.has(n.id))?.id ?? nodes[0].id;
 }
 function readCommandSpec(agent, command, agentsDir = AGENTS_DIR) {
-  const safe = (n) => !n.includes("/") && !n.includes("\\") && !n.includes("..");
+  const safe = (n) => !/[/\\\0]/.test(n) && !n.includes("..");
   if (!safe(agent) || !safe(command)) return null;
   const manifestPath = (0, import_node_path2.join)(agentsDir, agent, "manifest.yaml");
   if (!(0, import_node_fs3.existsSync)(manifestPath)) return null;
@@ -51065,6 +51073,55 @@ function readCommandSpec(agent, command, agentsDir = AGENTS_DIR) {
   });
   return { lifecycle, streaming, inputs };
 }
+function firstParagraph(s) {
+  if (typeof s !== "string") return "";
+  return (s.trim().split(/\n\s*\n/)[0] ?? "").replace(/\s+/g, " ").trim();
+}
+function parseManifestInputs(raw) {
+  return Object.entries(asRecord(raw)).map(([name, spec]) => {
+    const s = typeof spec === "string" ? { type: spec } : asRecord(spec);
+    const input = {
+      name,
+      type: typeof s.type === "string" ? s.type : "string",
+      default: "default" in s ? s.default : null,
+      description: typeof s.description === "string" ? s.description : ""
+    };
+    if (Array.isArray(s.values)) input.values = s.values.map(String);
+    return input;
+  });
+}
+function readNodeSkill(agent, command, agentsDir = AGENTS_DIR) {
+  const safe = (n) => !/[/\\\0]/.test(n) && !n.includes("..");
+  if (!safe(agent) || !safe(command)) return null;
+  const manifestPath = (0, import_node_path2.join)(agentsDir, agent, "manifest.yaml");
+  if (!(0, import_node_fs3.existsSync)(manifestPath)) return null;
+  let doc;
+  try {
+    doc = asRecord((0, import_yaml.parse)((0, import_node_fs3.readFileSync)(manifestPath, "utf8")));
+  } catch {
+    return null;
+  }
+  const cmd = asRecord(asRecord(doc.commands)[command]);
+  if (Object.keys(cmd).length === 0) return null;
+  const outRec = asRecord(cmd.outputs);
+  const outputs = typeof outRec.type === "string" ? {
+    type: outRec.type,
+    schema: Object.fromEntries(
+      Object.entries(asRecord(outRec.schema)).map(([k, v]) => [k, String(v)])
+    )
+  } : null;
+  return {
+    agent,
+    agentDisplayName: typeof doc["display-name"] === "string" ? doc["display-name"] : agent,
+    agentDescription: firstParagraph(doc.description),
+    homepage: typeof doc.homepage === "string" ? doc.homepage : null,
+    capabilities: Object.keys(asRecord(doc.requires)),
+    command,
+    commandDescription: firstParagraph(cmd.description),
+    inputs: parseManifestInputs(cmd.inputs),
+    outputs
+  };
+}
 function detectTriggerSource(nodes, connections, lookup) {
   const srcId = sourceNodeId(nodes, connections);
   if (!srcId) return null;
@@ -51096,7 +51153,7 @@ function listIntegrations() {
   if (!(0, import_node_fs3.existsSync)(AGENTS_DIR)) return [];
   const out = [];
   const seen = /* @__PURE__ */ new Set();
-  const safe = (n) => !n.includes("/") && !n.includes("\\") && !n.includes("..");
+  const safe = (n) => !/[/\\\0]/.test(n) && !n.includes("..");
   for (const agentId of (0, import_node_fs3.readdirSync)(AGENTS_DIR)) {
     if (!safe(agentId)) continue;
     const manifestPath = (0, import_node_path2.join)(AGENTS_DIR, agentId, "manifest.yaml");
@@ -52609,7 +52666,7 @@ function appVersion() {
   return resolveVersion({
     isSea: isSea2(),
     sqVersionXml: readSqVersionXml(),
-    define: true ? "0.15.0" : void 0,
+    define: true ? "0.16.1" : void 0,
     pkgVersion: readPkgVersion()
   });
 }
@@ -52619,7 +52676,7 @@ function resolveChannel(s) {
   return "dev";
 }
 function appChannel() {
-  return resolveChannel({ isSea: isSea2(), define: true ? "0.15.0" : void 0 });
+  return resolveChannel({ isSea: isSea2(), define: true ? "0.16.1" : void 0 });
 }
 
 // oauth-presets.ts

package/dist/web/app.css

@@ -46,7 +46,10 @@
     grid-template-rows: 60px 1fr 44px;
     --left-width: 340px;
     --right-width: 420px;
-    grid-template-columns: var(--left-width) 1fr var(--right-width);
+    /* minmax(0, 1fr) (not the default minmax(auto, 1fr)) lets the center column
+       shrink below its content's min-size, so a wide center never blows the grid
+       past the viewport. See min-width:0 on the three areas below. */
+    grid-template-columns: var(--left-width) minmax(0, 1fr) var(--right-width);
     grid-template-areas:
       "header  header  header"
       "chat    canvas  inspect"
@@ -104,8 +107,16 @@
     justify-content: space-between;
     padding: 0 18px;
     border-bottom: 1px solid var(--border);
+    /* Let the header's flex children shrink rather than force the whole grid wider
+       than the viewport (the old cause of a page-wide horizontal scrollbar): the
+       workflow picker is the shrink sink — it truncates down to its 180px floor
+       while the run-spine buttons stay on one line (never wrapping). Below that
+       floor a horizontal scrollbar is the final fallback (the run spine stays
+       reachable by scrolling), at viewport widths narrower than the design (#53). */
+    min-width: 0;
   }
-  .header-left { display: flex; align-items: center; gap: 10px; }
+  /* Brand + view-toggle stay full size; .controls is the shrink sink instead. */
+  .header-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
   .brand { display: flex; align-items: center; gap: 12px; }
   .brand .mark {
     display: inline-flex;
@@ -119,7 +130,11 @@
   .brand .mark .mark-node { fill: var(--bg); }
   .brand .name { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; }
   .brand .tag { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em; }
-  .controls { display: flex; align-items: center; gap: 10px; }
+  .controls { display: flex; align-items: center; gap: 10px; min-width: 0; }
+  /* Action buttons keep their labels on ONE line — under a tight header they may
+     compress, but the workflow picker (the shrink sink) gives way first; a button
+     must never wrap to two lines (#53 follow-up). */
+  .controls button { white-space: nowrap; }
   /* Vertical divider separating "which workflow + reference" from the run spine
      (state → Compile → Simulate → Run). Uses the existing border token. */
   .ctl-sep { width: 1px; height: 20px; background: var(--border-strong); flex: none; }
@@ -236,6 +251,7 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    min-width: 0;
     position: relative;
   }
   .host-banner {
@@ -326,6 +342,7 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    min-width: 0;
     position: relative;
   }
   /* While middle-mouse panning, force the grab cursor over the whole canvas. */
@@ -339,8 +356,16 @@
     padding: 24px 36px;
     position: relative;
     min-height: 0;
-    overflow: auto;
+    /* This element is the transformed "world": it's translated/scaled for pan+zoom,
+       so it must NOT clip its own content — clipping here happens BEFORE the scale,
+       so zooming out would shrink an already-clipped view instead of revealing the
+       whole graph. The stable clip box is the parent `.canvas` (overflow:hidden).
+       overflow:visible also means no scrollbar — drag the background / middle-mouse
+       to pan, zoom, or Fit this infinite canvas. */
+    overflow: visible;
+    cursor: grab;
   }
+  /* (the grabbing cursor during a pan is already forced by `.canvas.panning *` above) */
 
   /* LINEAR */
   .topology:not(.dag) .agent-card { flex: 0 0 210px; }
@@ -738,6 +763,7 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    min-width: 0;
     position: relative;
   }
   .tabs {
@@ -1416,10 +1442,16 @@
   #rtn-delete-confirm:hover { color: var(--err); border-color: var(--err); background: color-mix(in srgb, var(--err) 10%, transparent); }
 
   /* ========== WORKFLOW COMBOBOX (searchable, provider-grouped) ========== */
-  .wf-combo { position: relative; display: inline-flex; }
+  /* Shrinkable in the header flex row: the trigger's 300px width is the combo's
+     preferred size (flex-basis:auto reads it), and flex-shrink gives space back
+     down to a 180px floor when the header is tight, so the run spine fits without
+     wrapping its buttons. The name ellipsizes within. The 300px lives on the
+     TRIGGER (not flex-basis on the combo) so the combo's intrinsic size matches
+     its flex size — otherwise the shrink leaks onto the buttons and wraps them. */
+  .wf-combo { position: relative; display: inline-flex; flex: 0 1 auto; min-width: 180px; }
   .wf-trigger {
     display: inline-flex; align-items: center; gap: 8px;
-    min-width: 300px; max-width: 400px;
+    min-width: 0; width: 300px; max-width: 100%;
     background: var(--surface-2); color: var(--text);
     border: 1px solid var(--border-strong); border-radius: 4px;
     padding: 7px 12px; font-family: var(--ui); font-size: 12px; cursor: pointer;
@@ -2041,6 +2073,20 @@ body {
 .kv td { font-family: var(--mono); color: var(--text); word-break: break-word; }
 .kv tr + tr th, .kv tr + tr td { border-top: 1px solid var(--border); }
 
+/* Skill tab (Inspect): capability/mode pills mirror the notes-strip .note-kind
+   pill, and the agent docs link uses the accent — existing tokens only, no new
+   palette (issue #54). */
+.inspect-content .cap-badge {
+  display: inline-block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em;
+  color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 35%, transparent);
+  border-radius: 3px; padding: 0 5px; margin: 0 2px; vertical-align: 1px;
+}
+.inspect-content .cap-badge.write { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
+/* Breathing room above the docs link — it follows a schema table (no margin-bottom). */
+.inspect-content .skill-docs-row { margin-top: 8px; }
+.inspect-content .skill-docs { color: var(--accent); text-decoration: none; }
+.inspect-content .skill-docs:hover { text-decoration: underline; }
+
 /* ── HTML Viewer (report) modal ─────────────────────────────────────────────── */
 .modal.report-viewer {
   width: 1180px; max-width: 94vw; height: 86vh;

package/dist/web/app.js

@@ -226,7 +226,7 @@ function renderTopology() {
   } else {
     selectAgent(state.selectedAgentId);
   }
-  resetView(); // fresh 100% + centred view per render; also re-syncs the zoom % label
+  fitView(); // auto-fit the whole workflow into the canvas per render (never clipped)
 }
 
 function renderLinearTopology(p) {
@@ -354,8 +354,18 @@ function cardEl(id, ports) {
   `;
   div.onclick = (e) => {
     if (e.target.closest('.fav-btn')) return;
+    // A plain card click only SELECTS. Revealing a collapsed Inspect panel is
+    // reserved for the explicit "inspect ▸" affordance (handler below) — a general
+    // node click must not pop open a panel the user deliberately collapsed (#52).
     selectAgent(id);
   };
+  // The "inspect ▸" hint is the explicit inspect affordance: select AND reveal the
+  // Inspect panel if it's collapsed. stopPropagation so the card's plain-select
+  // onclick doesn't also fire (it would just re-select the same node).
+  div.querySelector('.inspect-hint').onclick = (e) => {
+    e.stopPropagation();
+    selectAgent(id, { reveal: true });
+  };
   div.querySelector('.fav-btn').onclick = (e) => {
     e.stopPropagation();
     toggleFav(id);
@@ -379,13 +389,26 @@ function wireEl(idx, label) {
   return wrap;
 }
 
-function selectAgent(id) {
+// `reveal` is set by USER-initiated selections (clicking a node card / the
+// "inspect ▸" hint / a favorite chip). When the Inspect panel is collapsed those
+// would otherwise give zero visible feedback — the panel quietly re-renders behind
+// the rail (issue #52) — so a revealing selection also expands it. Programmatic /
+// initial selection (on render) passes no reveal, so a saved collapsed preference
+// is respected on load.
+function selectAgent(id, { reveal = false } = {}) {
   state.selectedAgentId = id;
   document.querySelectorAll('.agent-card').forEach(c => {
     c.classList.toggle('selected', c.dataset.agentId === id);
   });
   const a = AGENTS[id];
   if (a) $inspectRole.textContent = a.title.toLowerCase();
+  if (reveal && state.collapse.right) {
+    // Momentary reveal — expand the panel for THIS interaction but do NOT persist:
+    // the user collapsed it deliberately, so a single inspect must not overwrite
+    // that saved preference (only an explicit toggle/drag does). UX review on #52.
+    state.collapse.right = false;
+    applyCollapse();
+  }
   renderInspect();
 }
 
@@ -624,7 +647,7 @@ function renderFavBar() {
       const id = chip.dataset.favAgent;
       const p = PROMPTS[state.promptKey];
       if (nodeIds(p).includes(id)) {
-        selectAgent(id);
+        selectAgent(id, { reveal: true });
       } else {
         chip.style.borderColor = 'var(--warn)';
         setTimeout(() => chip.style.borderColor = '', 600);
@@ -1154,8 +1177,16 @@ function showToast(msg, type) {
 const ZOOM_LEVELS = [0.5, 0.6, 0.75, 0.85, 1.0, 1.15, 1.3, 1.5, 1.75, 2.0];
 const MIN_ZOOM = ZOOM_LEVELS[0];
 const MAX_ZOOM = ZOOM_LEVELS[ZOOM_LEVELS.length - 1];
+// Auto-fit/Fit may zoom further out than the interactive MIN_ZOOM so a large graph
+// in a tight canvas is shown whole rather than floored and cut. Floored at 20% for
+// readability — below that, hold here and let the user pan (never scale to noise).
+const FIT_MIN_ZOOM = 0.2;
 let zoom = 1;            // continuous scale (fit produces arbitrary values, not just presets)
 let panX = 0, panY = 0;  // pan offset in screen px (transform-origin is the canvas centre)
+// The view auto-fits the WHOLE workflow into the canvas (so nodes are never clipped)
+// and keeps re-fitting as the canvas resizes (panels toggle, window resize) — UNTIL
+// the user takes manual control (zoom / pan / 100%), after which their view is kept.
+let autoFit = true;
 
 function applyTransform() {
   $topology.style.transformOrigin = '50% 50%';
@@ -1176,17 +1207,19 @@ function zoomBy(delta) {
     : ([...ZOOM_LEVELS].reverse().find((z) => z < zoom - 1e-3) ?? MIN_ZOOM);
   if (Math.abs(next - zoom) < 1e-3) return;
   zoom = next;
+  autoFit = false; // user chose a zoom — stop auto-fitting on resize
   applyTransform();
 }
 
-// Reset to 100% + recentre. Also called by renderTopology so the zoom/pan state
-// matches the transform it clears (otherwise the % label would go stale on switch).
+// Reset to 100% + recentre. Pure — callers decide whether it's a user action.
 function resetView() { zoom = 1; panX = 0; panY = 0; applyTransform(); }
 
 // Fit the whole workflow into the visible canvas (zooms in OR out), then recentre.
 // Measures the real node cluster — offset* are unscaled layout coords, so they're
-// unaffected by the current transform.
-function fitToScreen() {
+// unaffected by the current transform. `maxZoom` caps the scale: the auto-fit on
+// load/resize passes 1 so a small workflow stays 1:1 (never blown up); the explicit
+// Fit button passes the full range (may zoom in to fill).
+function fitToScreen(maxZoom = MAX_ZOOM) {
   const cards = [...$topology.querySelectorAll('.agent-card')];
   if (!cards.length) { resetView(); return; }
   let minL = Infinity, minT = Infinity, maxR = -Infinity, maxB = -Infinity;
@@ -1200,16 +1233,27 @@ function fitToScreen() {
   if (contentW <= 0 || contentH <= 0) { resetView(); return; }
   const pad = 40;
   const fit = Math.min(($topology.clientWidth - pad * 2) / contentW, ($topology.clientHeight - pad * 2) / contentH);
-  zoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, fit));
-  panX = 0; panY = 0; // origin 50% 50% keeps the cluster centred
+  // Floor at FIT_MIN_ZOOM (below the interactive MIN_ZOOM) so a big graph in a
+  // tight canvas is fully visible, never clipped — that's the whole point of Fit.
+  zoom = Math.max(FIT_MIN_ZOOM, Math.min(maxZoom, fit));
+  // Centre the content's bounding box in the viewport. transform-origin is the
+  // topology centre and translate sits OUTSIDE the scale, so pan = (viewport
+  // centre − content centre) × zoom. Required because the DAG grid sits top-left
+  // in the topology — a 0 pan would leave it off-centre and clip the edge nodes.
+  panX = ($topology.clientWidth / 2 - (minL + maxR) / 2) * zoom;
+  panY = ($topology.clientHeight / 2 - (minT + maxB) / 2) * zoom;
   applyTransform();
 }
 
+// Auto-fit used on render + canvas resize: show the whole workflow (capped at 100%
+// so small graphs aren't blown up) and stay in auto-fit mode so it tracks resizes.
+function fitView() { fitToScreen(1); autoFit = true; }
+
 document.getElementById('zoom-out').onclick   = () => zoomBy(-1);
 document.getElementById('zoom-in').onclick    = () => zoomBy(+1);
-document.getElementById('zoom-reset').onclick = () => resetView();
+document.getElementById('zoom-reset').onclick = () => { resetView(); autoFit = false; };
 const $zoomFit = document.getElementById('zoom-fit');
-if ($zoomFit) $zoomFit.onclick = () => fitToScreen();
+if ($zoomFit) $zoomFit.onclick = () => { fitToScreen(); autoFit = true; };
 
 // Ctrl/Cmd + scroll wheel = zoom on canvas (skips OS-level browser zoom)
 let zoomAccum = 0;
@@ -1228,18 +1272,32 @@ document.querySelector('.canvas').addEventListener('wheel', (e) => {
 // cursor) because translate sits OUTSIDE the scale in the transform list.
 const $canvasEl = document.querySelector('.canvas');
 let panning = false, panFromX = 0, panFromY = 0, panBaseX = 0, panBaseY = 0;
-$canvasEl.addEventListener('mousedown', (e) => {
-  if (e.button !== 1) return;
-  e.preventDefault();
+function startPan(e) {
   panning = true;
   panFromX = e.clientX; panFromY = e.clientY;
   panBaseX = panX; panBaseY = panY;
   $canvasEl.classList.add('panning');
+}
+// Middle-mouse drag anywhere on the canvas pans (the classic gesture).
+$canvasEl.addEventListener('mousedown', (e) => {
+  if (e.button !== 1) return;
+  e.preventDefault();
+  startPan(e);
+});
+// Left-drag the empty canvas background also pans — so the infinite, scrollbar-less
+// canvas is navigable with any pointer (trackpads have no middle button). Excludes
+// node cards (those keep click-to-select + their HTML5 drag); the toolbar/hint/
+// fav-bar/find aren't inside .topology, so they're naturally excluded.
+$topology.addEventListener('mousedown', (e) => {
+  if (e.button !== 0 || e.target.closest('.agent-card')) return;
+  e.preventDefault();
+  startPan(e);
 });
 window.addEventListener('mousemove', (e) => {
   if (!panning) return;
   panX = panBaseX + (e.clientX - panFromX);
   panY = panBaseY + (e.clientY - panFromY);
+  autoFit = false; // user dragged the view — stop auto-fitting on resize
   applyTransform();
 });
 window.addEventListener('mouseup', () => {
@@ -1249,6 +1307,18 @@ window.addEventListener('mouseup', () => {
 });
 $canvasEl.addEventListener('auxclick', (e) => { if (e.button === 1) e.preventDefault(); });
 
+// 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
+// every frame of a panel's 0.25s slide, which reads as jitter). The transform
+// fitToScreen sets doesn't change layout size, so this can't loop.
+let _fitTimer = 0;
+new ResizeObserver(() => {
+  if (!autoFit) return;
+  clearTimeout(_fitTimer);
+  _fitTimer = setTimeout(() => { if (autoFit) fitToScreen(1); }, 120);
+}).observe($canvasEl);
+
 /* ============= INTEGRATIONS ============= */
 // The real, server-backed Integrations window lives in aware.js (openIntegrations/
 // renderIntegrations are reassigned there from /api/integrations). app.js only owns
@@ -1279,8 +1349,8 @@ document.addEventListener('keydown', (e) => {
   if (cmd && e.key.toLowerCase() === 'i') { e.preventDefault(); openIntegrations(); return; }
   if (cmd && (e.key === '=' || e.key === '+')) { e.preventDefault(); zoomBy(+1); return; }
   if (cmd && e.key === '-') { e.preventDefault(); zoomBy(-1); return; }
-  if (cmd && e.key === '0') { e.preventDefault(); resetView(); return; }
-  if (e.key === 'Home') { e.preventDefault(); fitToScreen(); return; }
+  if (cmd && e.key === '0') { e.preventDefault(); resetView(); autoFit = false; return; }
+  if (e.key === 'Home') { e.preventDefault(); fitToScreen(); autoFit = true; return; }
   if (e.key === 'Escape') {
     if ($findOverlay.classList.contains('show')) closeFind();
     if ($integrationsModal.classList.contains('show')) $integrationsModal.classList.remove('show');

package/dist/web/aware.js

@@ -144,6 +144,47 @@
       .join('')}</table>`;
   }
 
+  // Plain-text summary of one declared command input (for the Skill tab's inputs
+  // table — kvTable escapes it, so this stays text, no markup): "type (enum vals)
+  // · default X — description".
+  function inputSummary(i) {
+    let s = i.type || 'string';
+    if (i.values && i.values.length) s += ` (${i.values.join(' · ')})`;
+    if (i.default !== null && i.default !== undefined && i.default !== '') {
+      s += ` · default ${typeof i.default === 'string' ? i.default : JSON.stringify(i.default)}`;
+    }
+    if (i.description) s += ` — ${i.description}`;
+    return s;
+  }
+
+  // Inspect → Skill tab body. Rich when the agent manifest is installed (n.skill):
+  // what the agent + command do, capabilities, the command's DECLARED inputs and
+  // output schema, and a docs link. Falls back to the lock-pointer summary for
+  // exec/agent-less nodes or an uninstalled agent. DISPLAY of manifest data only —
+  // every file-derived string is escaped (kvTable/escapeHtml), never injected raw.
+  function skillBody(n, fallback, notesHtml) {
+    const sk = n.skill;
+    if (!sk) return fallback; // fallback already carries notesHtml
+    const modeBadge = `<span class="cap-badge${n.mode === 'write' ? ' write' : ''}">${escapeHtml(n.mode)}</span>`;
+    const capBadges = sk.capabilities.map((c) => `<span class="cap-badge">${escapeHtml(c)}</span>`).join(' ');
+    const inputsObj = Object.fromEntries(sk.inputs.map((i) => [i.name, inputSummary(i)]));
+    const docs = sk.homepage && /^https?:\/\//i.test(sk.homepage)
+      ? `<p class="skill-docs-row"><a class="skill-docs" href="${escapeHtml(sk.homepage)}" target="_blank" rel="noopener">Agent documentation ↗</a></p>`
+      : '';
+    const outputs = sk.outputs
+      ? `<p><strong>Returns</strong> · ${escapeHtml(sk.outputs.type)}</p>${Object.keys(sk.outputs.schema).length ? kvTable(sk.outputs.schema) : ''}`
+      : '';
+    return `
+      <h3>${escapeHtml(sk.agentDisplayName)}</h3>
+      ${sk.agentDescription ? `<p>${escapeHtml(sk.agentDescription)}</p>` : ''}
+      <h3>Command · <code>${escapeHtml(sk.command)}</code></h3>
+      ${sk.commandDescription ? `<p>${escapeHtml(sk.commandDescription)}</p>` : ''}
+      <p><strong>Mode</strong> ${modeBadge}${capBadges ? ' · <strong>Requires</strong> ' + capBadges : ''}</p>
+      <p><strong>Accepts</strong></p>${Object.keys(inputsObj).length ? kvTable(inputsObj) : '<p class="dim-note">No declared inputs.</p>'}
+      ${outputs}
+      ${docs}${notesHtml || ''}`;
+  }
+
   // Dependency-free C# highlighter for the Code tab. Single-pass scanner that
   // handles comments/strings/chars BEFORE keywords (so keywords inside strings
   // aren't recolored), escapes every token's text, and reuses the demo's token
@@ -250,8 +291,14 @@
       subtitle: `${agentLabel}${cmd ? '/' + cmd : ''} · ${mode}`,
       blurb: n.notes[0] ? escapeHtml(humanizeNote(n.notes[0].text)) : `${mode}-mode ${cmd ? '<code>' + cmd + '</code>' : escapeHtml(n.kind)} node`,
       description: `${plainDesc ? `<p>${escapeHtml(plainDesc)}</p>` : ''}<p>Resolves to ${modeBadge} via <code>${escapeHtml(n.agent || n.kind)}${n.command ? '.' + escapeHtml(n.command) : ''}</code>.</p>${Object.keys(inputsNoCode).length ? `<p><strong>Inputs</strong></p>${kvTable(inputsNoCode)}` : ''}${execSource ? `<p class="dim-note">Full source in the <strong>Code</strong> tab.</p>` : ''}${notesHtml}`,
-      skill: `<h3>Provided by</h3><p><code>${escapeHtml(n.agent || n.kind)}</code>${pin ? ' · pinned <code>v' + escapeHtml(pin) + '</code>' : ''}${n.command ? ' · command <code>' + escapeHtml(n.command) + '</code>' : ''}</p>
+      // Rich agent/command detail when the manifest is installed (n.skill); else
+      // the lock-pointer fallback below (exec/agent-less nodes, uninstalled agents).
+      skill: skillBody(
+        n,
+        `<h3>Provided by</h3><p><code>${escapeHtml(n.agent || n.kind)}</code>${pin ? ' · pinned <code>v' + escapeHtml(pin) + '</code>' : ''}${n.command ? ' · command <code>' + escapeHtml(n.command) + '</code>' : ''}</p>
         <p>Resolved write/read mode is part of the approved <code>.lock</code> — see the <strong>Code</strong> tab.</p>${notesHtml}`,
+        notesHtml,
+      ),
       // Code tab: the REAL node source. For exec nodes (Roslyn C# run against a
       // live host) that's `config.code` straight from the .flo — the same text
       // the host compiles, so "Debug in VS" attaches to exactly this. For
@@ -3295,8 +3342,10 @@
   // button only for exec nodes (those carry C# the host can run under a debugger).
   // Debug lives HERE in the main window, not in the report modal.
   const _selectAgent = selectAgent;
-  selectAgent = function selectAgentTweakAware(id) {
-    _selectAgent(id);
+  // Forward ALL args (id + the { reveal } opts from app.js) — dropping them here
+  // silently swallowed the collapsed-panel reveal on inspect (issue #52).
+  selectAgent = function selectAgentTweakAware(id, ...rest) {
+    _selectAgent(id, ...rest);
     const tb = document.getElementById('tweak-btn');
     if (tb) tb.hidden = !id;
     const db = document.getElementById('debug-btn');

package/dist/web/index.html

@@ -114,7 +114,7 @@
            ~/.floless/ui/extensions.json here; the canvas children hide via
            .canvas.view-dashboard). Composed by the terminal AI, rendered by us. -->
       <div class="dashboard" id="dashboard" hidden></div>
-      <div class="hint" id="canvas-hint">Click any node to inspect. Star ★ a node to save it as a reusable Template.</div>
+      <div class="hint" id="canvas-hint">Click any node to inspect. Star ★ a node to save it as a reusable Template. Drag the background to pan — or press Home to fit.</div>
       <div class="fav-bar" id="fav-bar">
         <div class="fav-bar-label"><span class="star">★</span><span>Templates</span></div>
         <div class="fav-chip-row" id="fav-chip-row"></div>

package/package.json

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