@floless/app 0.15.0 → 0.16.0

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.0" : 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.0" : 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,15 @@
     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 truncates first (down to its 220px floor), the run spine
+       compresses only slightly after that, and a scrollbar — never off-screen
+       clipping of the run buttons — is the final fallback at tiny widths (#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 +129,7 @@
   .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; }
   /* 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 +246,7 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    min-width: 0;
     position: relative;
   }
   .host-banner {
@@ -326,6 +337,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. */
@@ -738,6 +750,7 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    min-width: 0;
     position: relative;
   }
   .tabs {
@@ -1416,10 +1429,13 @@
   #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: prefers ~300px, but flex-shrink lets it
+     give space back down to a 220px floor (min-width) when the header is tight,
+     so the run spine never overflows the viewport. The name ellipsizes within. */
+  .wf-combo { position: relative; display: inline-flex; flex: 0 1 300px; min-width: 220px; }
   .wf-trigger {
     display: inline-flex; align-items: center; gap: 8px;
-    min-width: 300px; max-width: 400px;
+    min-width: 0; 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 +2057,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

@@ -354,7 +354,7 @@ function cardEl(id, ports) {
   `;
   div.onclick = (e) => {
     if (e.target.closest('.fav-btn')) return;
-    selectAgent(id);
+    selectAgent(id, { reveal: true }); // clicking the card (incl. "inspect ▸") opens the panel if collapsed
   };
   div.querySelector('.fav-btn').onclick = (e) => {
     e.stopPropagation();
@@ -379,13 +379,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 +637,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);

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/package.json

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