dsh-mobilecode 0.11.4 → 0.11.5

package/lib/client.js

@@ -121,7 +121,7 @@ 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; }
 /* No coop-specific height cap: both panes must share Device 1's 60vh rule so
@@ -171,8 +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.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 +190,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.5";
 		// 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 +242,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 +618,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 +699,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 +727,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 +794,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 +830,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 +872,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 +881,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 +967,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.5",
   "type": "module",
   "packageManager": "pnpm@11.22.0",
   "engines": {