dsh-mobilecode 0.11.4 → 0.11.6

package/README.md

@@ -142,25 +142,30 @@ card is **Device 1**; co-op docks a second, **Device 2**. It is produced
   its online row, never a duplicate boot entry. A **Live** badge shows the
   streamed serial. Quick sizes (Fit / 100% / S·240 / M·320 presets + a select)
   and frame styles (none / bezel / device) reshape the stage — each stream pane
-  carries its own copy of these controls (0.11.2). In **Fit** the stage locks
-  to a shared height, so the two panes sit at identical heights even when the
-  devices have different screen aspect ratios (0.11.3).
+  carries its own copy of these controls (0.11.2). In **Fit** the stage hugs
+  the device's real aspect — a poller reads the MJPEG `<img>`'s
+  `naturalWidth/naturalHeight`, sets `--mc-ar-n` on the stage, and the stage
+  box becomes `width: min(100%, 60vh · ar); aspect-ratio: ar` — no letterbox
+  bars, and two devices with different aspect ratios keep equal visible
+  height (0.11.5).
 - **Screenshot** captures a still via `POST /stream/still` (a real `screencap`,
   embedded as a data URL up to 4 MB) and flips the stage to a still view with a
   "back to Live" link.
 - **Co-op split view (⧉, v0.9.0)**: with two or more online devices the card
   header grows a ⧉ toggle that docks a second **Device 2** pane beside it —
-  its own device select, live `<img>`, tap/drag control, and (since 0.11.2) its
-  own Size/Frame row mirroring Device 1's; both panes default to Fit, which
-  locks to one stage height, so the pair starts identical and can be styled
-  independently. Each pane grants its own HMAC capability; closing one pane
-  never stalls or disturbs the other stream. A presence watcher polls device
-  liveness while streaming: if a device is powered off (⏻ off, crash, unplug)
-  its pane drops the frozen frame and the Live badge within ~5 s, and stays
-  idle instead of silently grabbing another device — both panes guard against
-  the re-grab (0.11.3–4). Both stream
-  captions carry the running client version (`· v0.11.x`) so a page refresh is
-  visibly proven.
+  its own device select, live `<img>`, tap/drag control, its own Size/Frame
+  row (0.11.2), and since 0.11.5 the same **nav toolbar** (Back/Home/Recents/
+  Rotate/Refresh) and **☰ device-actions menu** as Device 1. The section is a
+  responsive CSS grid `repeat(auto-fit, minmax(min(250px, 100%), 1fr))`, so
+  dragging the drawer narrow stacks the panes vertically and widening it puts
+  them side by side (0.11.5). Each pane grants its own HMAC capability;
+  closing one pane never stalls or disturbs the other stream. A presence
+  watcher polls device liveness while streaming: if a device is powered off
+  (⏻ off, crash, unplug) its pane drops the frozen frame and the Live badge
+  within ~5 s, and stays idle instead of silently grabbing another device —
+  both panes guard against the re-grab (0.11.3–4). Both stream captions carry
+  the running client version (`· v0.11.x`) so a page refresh is visibly
+  proven.
 - **Security**: every stream route sits behind a loopback + trusted-browser
   transport fence (peer address, loopback `Host`, `Sec-Fetch-Site` / `Origin` —
   so a LAN client cannot spoof localhost and a DNS-rebinding `Host` is rejected),

package/lib/client.js

@@ -121,12 +121,18 @@ window.__ModuleLoader__.load({
 .mc-live-stage .mc-live-off { display: flex; align-items: center; justify-content: center; width: 260px; max-width: 100%; height: 460px; color: #9aa0a8; font-size: 13px; line-height: 1.5; text-align: center; }
 /* 0.9.1 co-op: two forced columns — side-by-side MUST survive a narrow drawer. */
 .mc-live-section { display: flex; flex-direction: column; gap: 10px; }
-.mc-live-section.coop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
+.mc-live-section.coop { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 10px; align-items: start; }
 .mc-live-section.coop > .mc-card { min-width: 0; }
-.mc-live-section.coop .mc-card-head { flex-wrap: wrap; }
+/* 0.11.6: the co-op head must NEVER wrap to a second row — a wrapped
+   head offsets one pane's stage ~38px lower than its sibling's, which
+   read as "the bars in Device 1 make the heights differ". Children
+   shrink instead (picker/select ellipsize). */
+.mc-live-section.coop .mc-card-head { flex-wrap: nowrap; min-width: 0; }
+.mc-card-head .mc-picker { flex: 1 1 auto; min-width: 0; }
+.mc-card-head .mc-picker .mc-btn { min-width: 0; }
 /* No coop-specific height cap: both panes must share Device 1's 60vh rule so
    they match at every size, Fit included (0.11.2). */
-.mc-coop-select { width: auto; padding: 3px 6px; font-size: 12px; }
+.mc-coop-select { width: auto; min-width: 0; flex: 0 1 auto; padding: 3px 6px; font-size: 12px; }
 .mc-live-nav { display: flex; align-items: center; justify-content: center; gap: 8px; }
 .mc-live-nav button { border: 1px solid light-dark(rgba(0,0,0,.16), rgba(255,255,255,.18)); background: light-dark(#fff, #20242b); color: inherit; border-radius: 999px; width: 40px; height: 32px; cursor: pointer; font-size: 14px; }
 .mc-live-nav button:hover { background: light-dark(rgba(0,0,0,.06), rgba(255,255,255,.1)); }
@@ -171,8 +177,8 @@ window.__ModuleLoader__.load({
 .mc-seg { display: inline-flex; border: 1px solid light-dark(rgba(0,0,0,.18), rgba(255,255,255,.2)); border-radius: 8px; overflow: hidden; }
 .mc-seg button { border: 0; background: transparent; color: inherit; font: inherit; font-size: 11px; padding: 4px 9px; cursor: pointer; opacity: .6; }
 .mc-seg button[data-on] { background: light-dark(rgba(66,133,244,.12), rgba(66,133,244,.22)); color: #4285f4; opacity: 1; }
-.mc-live-stage.fit { height: 60vh; display: flex; align-items: center; justify-content: center; }
-.mc-live-stage.fit img { max-height: 100%; }
+.mc-live-stage.fit { width: min(100%, calc(60vh * var(--mc-ar-n, 0.45))); aspect-ratio: var(--mc-ar-n, 0.45); display: flex; align-items: center; justify-content: center; margin-inline: auto; }
+.mc-live-stage.fit img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
 .mc-live-stage.bezel { padding: 8px; background: #111; border-radius: 16px; }
 .mc-live-stage.device { padding: 12px; background: linear-gradient(145deg, #2c2f36, #17191d); border-radius: 26px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
 /* ── 0.7.0: compact conversation cards ── */
@@ -190,7 +196,7 @@ window.__ModuleLoader__.load({
 		// Shown on both stream captions so a refresh visibly proves which client
 		// bundle the browser is actually running. Kept in lockstep with
 		// package.json by test/client.mjs.
-		const MC_VERSION = "0.11.4";
+		const MC_VERSION = "0.11.6";
 		// The panel shows cards for platforms the host can actually drive; the
 		// server reports its OS in info.os (iOS tooling is darwin-only).
 		const fallbackPlatforms = (os) => (os === "darwin" ? ["ios", "android"] : ["android"]);
@@ -242,6 +248,58 @@ window.__ModuleLoader__.load({
 			);
 		}
 
+		// Shared SVG icon paths for the stream toolbars (0.11.5 — both panes
+		// carry the same navigation controls; Device 2 used to lack them).
+		const NAV_ICONS = {
+			back: "M15 18l-6-6 6-6",
+			home: "M3 10.5L12 3l9 7.5M5 9.5V21h14V9.5",
+			recents: "M12 3l9 5-9 5-9-5 9-5zM3 13l9 5 9-5",
+			screenshot: "M4 7h4l2-3h4l2 3h4v13H4zM12 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
+			rotate: "M21 12a9 9 0 1 1-2.6-6.3M21 3v6h-6",
+		};
+		/** One icon toolbar row; items: {title, icon, run}. Used by both panes. */
+		function ToolbarRow({ items }) {
+			return h("div", { className: "mc-toolbar" },
+				items.map((item) => h("button", { key: item.title, title: item.title, onClick: item.run },
+					h("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" },
+						h("path", { d: item.icon }),
+					),
+				)),
+			);
+		}
+		/** Back/Home/Recents/(Screen)/Rotate built from nav icons (0.11.5). */
+		const navToolbar = (control, capture, refresh) => [
+			{ title: "Back", icon: NAV_ICONS.back, run: () => control({ kind: "button", name: "back" }) },
+			{ title: "Home", icon: NAV_ICONS.home, run: () => control({ kind: "button", name: "home" }) },
+			{ title: "Recents", icon: NAV_ICONS.recents, run: () => control({ kind: "button", name: "recents" }) },
+			...(capture ? [{ title: "Screenshot", icon: NAV_ICONS.screenshot, run: () => capture() }] : []),
+			{ title: "Rotate", icon: NAV_ICONS.rotate, run: () => control({ kind: "rotate" }) },
+			{ title: "Refresh", icon: NAV_ICONS.rotate, run: refresh },
+		];
+		/** ☰ device-actions popover; serial-bound, shared by both panes. */
+		function DeviceMenu({ serial, onError }) {
+			const [open, setOpen] = useState(false);
+			const ACTION_ITEMS = [
+				{ action: "notifications", label: "Notifications" },
+				{ action: "quick_settings", label: "Quick settings" },
+				{ action: "collapse", label: "Collapse" },
+				{ action: "lock", label: "Lock" },
+				{ action: "wake", label: "Wake" },
+				{ action: "assistant", label: "Assistant" },
+			];
+			const run = async (action) => {
+				if (serial === "") return;
+				try { await streamPost("/stream/device-action", { device: serial, action }); setOpen(false); }
+				catch (err) { onError(err instanceof Error ? err.message : String(err)); }
+			};
+			return h("div", { className: "mc-menu" },
+				h("button", { className: "mc-btn", disabled: serial === "", title: "Device actions", onClick: () => setOpen((v) => !v) }, "☰"),
+				open && h("div", { className: "mc-menu-pop" },
+					ACTION_ITEMS.map((item) => h("button", { key: item.action, onClick: () => run(item.action) }, item.label)),
+				),
+			);
+		}
+
 		function PanelController() {
 			let panelOpen = false;
 			const listeners = new Set();
@@ -566,6 +624,10 @@ window.__ModuleLoader__.load({
 		 *  the full card and by the second co-op pane. */
 		function useLiveStream({ serial, onError }) {
 			const [streamUrl, setStreamUrl] = useState("");
+			// Native aspect ratio (w/h) of the streamed frames, learned from the
+			// first decoded MJPEG frame so the Fit stage has the device's real
+			// shape — zero letterboxing regardless of pane/device mix (0.11.5).
+			const [ar, setAr] = useState(null);
 			const imgRef = useRef(null);
 			const dragRef = useRef(null);
 			const grantTimer = useRef(null);
@@ -643,7 +705,22 @@ window.__ModuleLoader__.load({
 					control({ kind: "tap", x: end.x, y: end.y });
 				}
 			};
-			return { streamUrl, grant, reset, control, imgProps: { ref: imgRef, draggable: false, onPointerDown: onDown, onPointerUp: onUp } };
+			// Aspect-ratio learner: MJPEG frames decode into the same <img>, so
+			// naturalWidth/naturalHeight is live. Poll once a second while the
+			// stream is up; stage boxes read --mc-ar-n from here (fit mode).
+			useEffect(() => {
+				if (streamUrl === "") return;
+				const tick = setInterval(() => {
+					const el = imgRef.current;
+					if (el && el.naturalWidth > 0 && el.naturalHeight > 0) {
+						const a = +(el.naturalWidth / el.naturalHeight).toFixed(4);
+						setAr((prev) => (prev === a ? prev : a));
+					}
+				}, 1000);
+				return () => clearInterval(tick);
+			}, [streamUrl]);
+
+			return { streamUrl, grant, reset, control, ar, imgProps: { ref: imgRef, draggable: false, onPointerDown: onDown, onPointerUp: onUp } };
 		}
 
 		/** Device 1 stream: picker-popover header, SVG toolbar pill, device
@@ -656,7 +733,6 @@ window.__ModuleLoader__.load({
 			const [serial, setSerial] = useState("");
 			const [error, setError] = useState("");
 			const [pickerOpen, setPickerOpen] = useState(false);
-			const [menuOpen, setMenuOpen] = useState(false);
 			const [still, setStill] = useState(null);
 			const [view, setView] = useState("live"); // 'live' | 'still'
 			// sizeMode/frame are per-pane (0.11.2); StageControls renders the
@@ -724,12 +800,6 @@ window.__ModuleLoader__.load({
 				}
 			};
 
-			const menuAction = async (action) => {
-				if (serial === "") return;
-				try { await streamPost("/stream/device-action", { device: serial, action }); setMenuOpen(false); }
-				catch (err) { setError(err instanceof Error ? err.message : String(err)); }
-			};
-
 			const pick = (device) => { autoPicked.current = true; setSerial(device); live.reset(); setStill(null); setView("live"); setError(""); setPickerOpen(false); };
 			// 0.10.0 merged "Start server": boot a configured AVD from the picker.
 			// The route waits for boot completion; then we re-list and stream it.
@@ -766,22 +836,7 @@ window.__ModuleLoader__.load({
 			const sizeStyle = stageSizeStyle(sizeMode);
 			const stageClass = stageClassFor(frame, sizeMode.mode === "fit");
 			const runningAvds = new Set(devices.map((d) => d.avd).filter(Boolean));
-			const toolbar = [
-				{ title: "Back", icon: "M15 18l-6-6 6-6", run: () => control({ kind: "button", name: "back" }) },
-				{ title: "Home", icon: "M3 10.5L12 3l9 7.5M5 9.5V21h14V9.5", run: () => control({ kind: "button", name: "home" }) },
-				{ title: "Recents", icon: "M12 3l9 5-9 5-9-5 9-5zM3 13l9 5 9-5", run: () => control({ kind: "button", name: "recents" }) },
-				{ title: "Screenshot", icon: "M4 7h4l2-3h4l2 3h4v13H4zM12 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6z", run: () => capture() },
-				{ title: "Rotate", icon: "M21 12a9 9 0 1 1-2.6-6.3M21 3v6h-6", run: () => control({ kind: "rotate" }) },
-				{ title: "Refresh", icon: "M21 12a9 9 0 1 1-2.6-6.3M21 3v6h-6", run: () => { if (serial !== "") grant(serial); } },
-			];
-			const menuItems = [
-				{ action: "notifications", label: "Notifications" },
-				{ action: "quick_settings", label: "Quick settings" },
-				{ action: "collapse", label: "Collapse" },
-				{ action: "lock", label: "Lock" },
-				{ action: "wake", label: "Wake" },
-				{ action: "assistant", label: "Assistant" },
-			];
+			const toolbar = navToolbar(control, capture, () => { if (serial !== "") grant(serial); });
 
 			return h("div", { className: "mc-card mc-live" },
 				h("div", { className: "mc-card-head" },
@@ -823,12 +878,7 @@ window.__ModuleLoader__.load({
 							),
 						),
 					),
-					h("div", { className: "mc-menu" },
-						h("button", { className: "mc-btn", disabled: serial === "", title: "Device actions", onClick: () => setMenuOpen((v) => !v) }, "☰"),
-						menuOpen && h("div", { className: "mc-menu-pop" },
-							menuItems.map((item) => h("button", { key: item.action, onClick: () => menuAction(item.action) }, item.label)),
-						),
-					),
+					h(DeviceMenu, { serial, onError: setError }),
 					// 0.9.0 co-op: side-by-side second pane (needs two online devices).
 					devices.length >= 2 && h("button", { className: "mc-btn", "data-on": coopOn || undefined, title: "Co-op: watch Device 1 + Device 2 side by side", onClick: onToggleCoop }, "⧉"),
 				),
@@ -837,14 +887,8 @@ window.__ModuleLoader__.load({
 					h("span", null, h("span", { className: "mc-dot warn" }), " Booting " + booting + " — it appears here once online (about a minute).")),
 				// 0.11.0 audit: no ghost affordances — the toolbar appears once a
 				// device is selected (disabled-grey read as broken).
-				serial !== "" && h("div", { className: "mc-toolbar" },
-					toolbar.map((item) => h("button", { key: item.title, title: item.title, disabled: serial === "", onClick: item.run },
-						h("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" },
-							h("path", { d: item.icon }),
-						),
-					)),
-				),
-				h("div", { className: stageClass },
+				serial !== "" && h(ToolbarRow, { items: toolbar }),
+				h("div", { className: stageClass, style: sizeMode.mode === "fit" && live.ar != null ? { "--mc-ar-n": live.ar } : undefined },
 					view === "still" && still?.dataUrl
 						? h("img", { src: still.dataUrl, alt: "still capture", draggable: false })
 						: live.streamUrl !== ""
@@ -929,9 +973,13 @@ window.__ModuleLoader__.load({
 						!devices.some((d) => d.serial === serial) && h("option", { value: "" }, devices.length === 0 ? "no device" : "— pick device —"),
 						devices.map((d) => h("option", { key: d.serial, value: d.serial }, d.serial + (d.serial === excludeSerial ? " (Device 1)" : d.streaming ? " ●" : ""))),
 					),
+					h(DeviceMenu, { serial, onError: setError }),
 				),
 				error !== "" && h("div", { className: "mc-error" }, error),
-				h("div", { className: stageClassFor(frame, sizeMode.mode === "fit") },
+				// 0.11.5: Device 2 gets the same nav toolbar as Device 1
+				// (back/home/recents/rotate/refresh) — full control of both players.
+				serial !== "" && h(ToolbarRow, { items: navToolbar(live.control, undefined, () => { if (serial !== "") grant(serial); }) }),
+				h("div", { className: stageClassFor(frame, sizeMode.mode === "fit"), style: sizeMode.mode === "fit" && live.ar != null ? { "--mc-ar-n": live.ar } : undefined },
 					live.streamUrl !== ""
 						? h("img", { ...live.imgProps, src: live.streamUrl, alt: "co-op device screen", style: stageSizeStyle(sizeMode), onError: () => grant(serial) })
 						: h("div", { className: "mc-live-off" }, devices.filter((d) => d.serial !== excludeSerial).length === 0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-mobilecode",
   "description": "MobileCode for the dsh web GUI: detect iOS/Android projects, run preview servers, and drive the simulator/emulator from the session — 37 agent tools (device_run, device_screen, device_ui_tree, device_ui_rows, device_tap_row, device_tap_element, device_wait_for, device_scroll_to, device_input, device_batch, device_intent, device_connect, device_pair_qr, device_perf, device_meminfo, device_backtrace, device_display, device_avd_create, device_pair_capture, device_app_info, device_install, device_uninstall, device_reboot, device_log, live screen stream, multimodal screenshots) plus a host-mediated co-op mesh hub (random callsigns, JSON pub/sub, tunable latency/jitter/drop/dup/throttle) so two virtual devices — and the AI watching them — can talk in real time. One classified adb boundary and a Wi-Fi connect/pair QR flow in the Connection settings tab. Hot-pluggable — mounted via the profile bundle list + cordis.patch.yml, no dsh source changes.",
-  "version": "0.11.4",
+  "version": "0.11.6",
   "type": "module",
   "packageManager": "pnpm@11.22.0",
   "engines": {