dsh-mobilecode 0.11.2 → 0.11.3

package/README.md

@@ -142,17 +142,24 @@ 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).
+  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).
 - **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 and share
-  one CSS height cap, so the pair starts identical and can be styled
+  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.
+  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 the card
+  stays idle instead of silently grabbing another device (0.11.3). 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

@@ -171,6 +171,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.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 ── */
@@ -185,6 +187,10 @@ window.__ModuleLoader__.load({
 		//#endregion
 
 		const API_BASE = "/api/dsh-mobilecode";
+		// 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.3";
 		// 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"]);
@@ -195,7 +201,10 @@ window.__ModuleLoader__.load({
 			: m.mode === "px"
 				? { width: m.value + "px", maxWidth: "100%", maxHeight: "60vh" }
 				: {});
-		const stageClassFor = (f) => "mc-live-stage" + (f !== "none" ? " " + f : "");
+		// Fit panes lock to a shared stage height so devices with different
+		// aspect ratios still sit at the same height (0.11.3); presets stay
+		// width-driven (S·240 / M·320 = device width px).
+		const stageClassFor = (f, fit = false) => "mc-live-stage" + (fit ? " fit" : "") + (f !== "none" ? " " + f : "");
 		const SIZE_PRESETS = [
 			{ label: "Fit", mode: { mode: "fit" } },
 			{ label: "100%", mode: { mode: "pct", value: 100 } },
@@ -585,6 +594,24 @@ window.__ModuleLoader__.load({
 			};
 			const reset = () => { clearTimeout(grantTimer.current); setStreamUrl(""); };
 			useEffect(() => () => clearTimeout(grantTimer.current), []);
+			// Presence watcher (0.11.3): an MJPEG <img> does NOT fire error when
+			// the device dies — it just freezes on the last frame with the Live
+			// badge stuck. While a stream is up, poll device presence and drop
+			// the stream if the serial vanished (⏻ off, crash, unplug).
+			useEffect(() => {
+				if (streamUrl === "") return;
+				const watch = setInterval(async () => {
+					try {
+						const r = await streamPost("/stream/devices", {});
+						if (!r.devices.some((d) => d.serial === serialRef.current)) {
+							clearTimeout(grantTimer.current);
+							setStreamUrl("");
+							onErrorRef.current("device offline — stream stopped");
+						}
+					} catch { /* the next tick decides */ }
+				}, 5000);
+				return () => clearInterval(watch);
+			}, [streamUrl]);
 
 			const control = async (action) => {
 				if (serialRef.current === "") return;
@@ -632,13 +659,16 @@ window.__ModuleLoader__.load({
 			const [menuOpen, setMenuOpen] = useState(false);
 			const [still, setStill] = useState(null);
 			const [view, setView] = useState("live"); // 'live' | 'still'
-			// sizeMode/frame live in LiveStreamSection (0.11.0) so both co-op
-			// panes scale identically — Device 2 must never be smaller.
+			// sizeMode/frame are per-pane (0.11.2); StageControls renders the
+			// identical row in both cards, and Fit locks both to one height.
 			const [booting, setBooting] = useState(""); // AVD name while POST /boot is in flight
 			const [powering, setPowering] = useState(""); // serial while POST /off is in flight
 			const live = useLiveStream({ serial, onError: setError });
 			const grant = (device) => live.grant(device).then((ok) => { if (ok) setError(""); });
 			const control = live.control;
+			const serialRef = useRef(serial);
+			serialRef.current = serial;
+			const autoPicked = useRef(false);
 			useEffect(() => { if (onSerial) onSerial(serial); }, [serial]);
 
 			const refreshDevices = async () => {
@@ -646,7 +676,17 @@ window.__ModuleLoader__.load({
 					const r = await streamPost("/stream/devices", {});
 					setDevices(r.devices);
 					setAvds(r.avds ?? []);
-					setSerial((cur) => cur || (r.devices.find((d) => d.streaming)?.serial ?? r.devices[0]?.serial ?? ""));
+					const first = r.devices.find((d) => d.streaming)?.serial ?? r.devices[0]?.serial ?? "";
+					const cur = serialRef.current;
+					if (cur === "") {
+						// Auto-stream once per page load (the welcome flow). After
+						// an explicit ⏻ off, the card stays idle — it must NOT
+						// silently grab the partner device (0.11.3).
+						if (!autoPicked.current && first !== "") { autoPicked.current = true; setSerial(first); }
+					} else if (!r.devices.some((d) => d.serial === cur)) {
+						autoPicked.current = true;
+						setSerial(""); live.reset();
+					}
 				} catch (err) {
 					setError(err instanceof Error ? err.message : String(err));
 				}
@@ -685,7 +725,7 @@ window.__ModuleLoader__.load({
 				catch (err) { setError(err instanceof Error ? err.message : String(err)); }
 			};
 
-			const pick = (device) => { setSerial(device); live.reset(); setStill(null); setView("live"); setError(""); setPickerOpen(false); };
+			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.
 			const boot = async (avd) => {
@@ -719,7 +759,7 @@ window.__ModuleLoader__.load({
 			const showLive = () => { setView("live"); if (serial !== "" && live.streamUrl === "") grant(serial); };
 
 			const sizeStyle = stageSizeStyle(sizeMode);
-			const stageClass = stageClassFor(frame);
+			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" }) },
@@ -804,14 +844,16 @@ window.__ModuleLoader__.load({
 						? h("img", { src: still.dataUrl, alt: "still capture", draggable: false })
 						: live.streamUrl !== ""
 							? h("img", { ...live.imgProps, src: live.streamUrl, alt: "device screen", style: sizeStyle, onError: () => grant(serial) })
-							: h("div", { className: "mc-live-off" }, devices.length === 0
-								? "No device attached — boot an AVD from the ▾ picker, or press Run app."
-								: "Connecting to " + serial + "..."),
+							: h("div", { className: "mc-live-off" }, serial === ""
+									? (devices.length === 0
+										? "No device attached — boot an AVD from the ▾ picker, or press Run app."
+										: "Device was shut down — pick one from ▾, or ⏻ boot an AVD.")
+									: "Connecting to " + serial + "..."),
 				),
 				view === "still"
 					? h("div", { className: "mc-live-cap" }, "Still captured" + (still?.width ? " (" + still.width + "x" + still.height + ")" : "") + " · ",
 						h("a", { className: "mc-log-toggle", onClick: showLive }, "back to Live"))
-					: h("div", { className: "mc-live-cap" }, "tap or drag on the screen to drive the device"),
+					: h("div", { className: "mc-live-cap" }, "tap or drag on the screen to drive the device · v" + MC_VERSION),
 				h(StageControls, { sizeMode, setSizeMode, frame, setFrame }),
 			);
 		}
@@ -828,17 +870,22 @@ window.__ModuleLoader__.load({
 			const [error, setError] = useState("");
 			const live = useLiveStream({ serial, onError: setError });
 			const grant = (device) => live.grant(device).then((ok) => { if (ok) setError(""); });
+			// Serial mirror for the interval (avoids stale-closure on setInterval).
+			const serialRef = useRef(serial);
+			serialRef.current = serial;
 
 			const refresh = async () => {
 				try {
 					const r = await streamPost("/stream/devices", {});
 					setDevices(r.devices);
-					// Keep my pick unless it vanished or became the other pane's device.
-					setSerial((cur) => {
-						if (cur !== "" && cur !== excludeSerial && r.devices.some((d) => d.serial === cur)) return cur;
-						const others = r.devices.filter((d) => d.serial !== excludeSerial);
-						return (others.find((d) => d.streaming) ?? others[0])?.serial ?? "";
-					});
+					const others = r.devices.filter((d) => d.serial !== excludeSerial);
+					const next = (others.find((d) => d.streaming) ?? others[0])?.serial ?? "";
+					const cur = serialRef.current;
+					// If the current device is still valid (online and not excluded), keep it.
+					if (cur !== "" && cur !== excludeSerial && others.some((d) => d.serial === cur)) return;
+					// On any change (death, exclusion, or manual), drop the stream so we
+					// don't show a frozen frame under the new serial.
+					if (next !== cur) { setSerial(next); live.reset(); }
 				} catch {
 					/* the header keeps the last device list */
 				}
@@ -863,12 +910,16 @@ window.__ModuleLoader__.load({
 					),
 				),
 				error !== "" && h("div", { className: "mc-error" }, error),
-				h("div", { className: stageClassFor(frame) },
+				h("div", { className: stageClassFor(frame, sizeMode.mode === "fit") },
 					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.length === 0 ? "No second device — boot another emulator." : "Connecting to " + serial + "..."),
+						: h("div", { className: "mc-live-off" }, devices.filter((d) => d.serial !== excludeSerial).length === 0
+							? "No second device — boot another emulator."
+							: serial === "" || !devices.some((d) => d.serial === serial)
+								? "Second device offline — pick one above."
+								: "Connecting to " + serial + "..."),
 				),
-				h("div", { className: "mc-live-cap" }, "tap or drag on the screen to drive this device"),
+				h("div", { className: "mc-live-cap" }, "tap or drag on the screen to drive this device · v" + MC_VERSION),
 				h(StageControls, { sizeMode, setSizeMode, frame, setFrame }),
 			);
 		}

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.2",
+  "version": "0.11.3",
   "type": "module",
   "packageManager": "pnpm@11.22.0",
   "engines": {