@floless/app 0.16.0 → 0.16.1

package/dist/floless-server.cjs

@@ -52666,7 +52666,7 @@ function appVersion() {
   return resolveVersion({
     isSea: isSea2(),
     sqVersionXml: readSqVersionXml(),
-    define: true ? "0.16.0" : void 0,
+    define: true ? "0.16.1" : void 0,
     pkgVersion: readPkgVersion()
   });
 }
@@ -52676,7 +52676,7 @@ function resolveChannel(s) {
   return "dev";
 }
 function appChannel() {
-  return resolveChannel({ isSea: isSea2(), define: true ? "0.16.0" : void 0 });
+  return resolveChannel({ isSea: isSea2(), define: true ? "0.16.1" : void 0 });
 }
 
 // oauth-presets.ts

package/dist/web/app.css

@@ -109,9 +109,10 @@
     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). */
+       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;
   }
   /* Brand + view-toggle stay full size; .controls is the shrink sink instead. */
@@ -130,6 +131,10 @@
   .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; 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; }
@@ -351,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; }
@@ -1429,13 +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) ========== */
-  /* 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; }
+  /* 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: 0; width: 100%;
+    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;

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,7 +354,17 @@ function cardEl(id, ports) {
   `;
   div.onclick = (e) => {
     if (e.target.closest('.fav-btn')) return;
-    selectAgent(id, { reveal: true }); // clicking the card (incl. "inspect ▸") opens the panel if collapsed
+    // 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();
@@ -1167,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%';
@@ -1189,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;
@@ -1213,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;
@@ -1241,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', () => {
@@ -1262,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
@@ -1292,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/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.16.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": {