@floless/app 0.27.0 → 0.28.0

package/dist/floless-server.cjs

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

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).
@@ -2900,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
@@ -3006,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floless/app",
-  "version": "0.27.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": {