dsh-mobilecode 0.10.1 → 0.11.0

package/README.md

@@ -8,9 +8,10 @@ with embedded iOS Simulator / Android Emulator support) into
 It detects the mobile project in a directory (iOS / Android, Expo / React
 Native / native), builds, installs and launches the app on the booted
 simulator or emulator — and exposes the same to the agent through tools. The
-device screen has exactly **one** home in the panel: the **Live device**
-stream. (0.10.0 merged the old Android "Start server" preview into it —
-`serve-avd` is retired for the panel; `serve-sim` remains the iOS-only view.)
+device screen has exactly **one** home in the panel: the **Device 1** live
+stream (co-op adds a second pane, **Device 2**). (0.10.0 merged the old Android
+"Start server" preview into it — `serve-avd` is retired for the panel;
+`serve-sim` remains the iOS-only view.)
 
 ## Installation
 
@@ -32,12 +33,14 @@ If you find this useful, you can support development at [ko-fi.com/spix18](https
 drawer:
 
 - project directory input (persisted in localStorage) + Detect
-- platform pills — Android: attached-device status (its view is the Live
-  device card); iOS: preview-server status
+- platform pills — Android: attached-device status (its view is the Device 1
+  card); iOS: preview-server status. The iOS pill and card only render when the
+  host OS is macOS — on Windows/Linux there is no simulator to drive, so 0.11.0
+  stopped showing that dead affordance.
 - per platform: **Run app / Stop app**, build status/step/error and an
   expandable log tail. iOS additionally **Start/Stop server** with the
   embedded serve-sim iframe — Android's duplicated serve-avd preview was
-  merged into the Live device card in 0.10.0
+  merged into the Device 1 card in 0.10.0
 - a Metro (bundler) status card
 - polls `GET /api/dsh-mobilecode` every 2 s while open
 
@@ -105,9 +108,10 @@ drawer:
   that just need to see the screen should still prefer `device_screen` /
   `device_ui_tree`.
 
-**Live device stream (the panel)**
+**Live device stream (the panel — Device 1 / Device 2)**
 
-The Devices pane shows a real-time mirror of the attached device. It is produced
+The Devices pane shows a real-time mirror of the attached device. The primary
+card is **Device 1**; co-op docks a second, **Device 2**. It is produced
 **in-process** — no inner loopback port, no external helper:
 
 - ONE persistent `adb exec-out "while :; do screencap -p; done"` child **per

package/lib/client.js

@@ -7,7 +7,7 @@
  *   - directory input (remembers the last one) + platform pills from detect,
  *   - per platform: run/stop the app + build status (iOS only: start/stop
  *     the serve-sim preview server with its embedded iframe),
- *   - Live device card: the in-process stream — 0.10.0 merged the Android
+ *   - Device 1 card (the live stream): 0.10.0 merged the Android
  *     "Start server" into it (serve-avd retired; picker ⏻ boot → POST /boot),
  *   - build status, error and expandable log tail,
  *   - polls GET /api/dsh-mobilecode every ~2s while open.
@@ -185,8 +185,17 @@ window.__ModuleLoader__.load({
 		//#endregion
 
 		const API_BASE = "/api/dsh-mobilecode";
-		const PLATFORMS = ["ios", "android"];
+		// 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"]);
 		const label = (p) => (p === "ios" ? "iOS" : "Android");
+		// Shared by both panes so Device 1 and Device 2 scale identically (0.11.0).
+		const stageSizeStyle = (m) => (m.mode === "pct"
+			? { width: m.value + "%", maxWidth: "100%", maxHeight: "60vh" }
+			: m.mode === "px"
+				? { width: m.value + "px", maxWidth: "100%", maxHeight: "60vh" }
+				: {});
+		const stageClassFor = (f) => "mc-live-stage" + (f !== "none" ? " " + f : "");
 
 		function PanelController() {
 			let panelOpen = false;
@@ -297,7 +306,7 @@ window.__ModuleLoader__.load({
 
 			const server = (platform) => info?.servers?.find((s) => s.platform === platform);
 			const build = (platform) => info?.builds?.find((b) => b.platform === platform);
-			const platforms = info?.platforms?.length > 0 ? info.platforms : PLATFORMS;
+			const platforms = info?.platforms?.length > 0 ? info.platforms : fallbackPlatforms(info?.os);
 
 			const statusClass = (status) =>
 				status === "running" ? "on" : status === "starting" ? "warn" : status === "exited" ? "off" : "err";
@@ -337,13 +346,13 @@ window.__ModuleLoader__.load({
 					error !== "" && h("div", { className: "mc-error" }, error),
 					h("div", { className: "mc-pills" },
 						platforms.map((platform) => {
-							// 0.10.0: Android's "server" IS the Live device stream — the pill
+							// 0.10.0: Android's "server" IS the Device 1 stream — the pill
 							// tracks attached devices, not a serve-avd process.
 							const running = platform === "android"
 								? (info?.deviceCount ?? 0) > 0
 								: server(platform)?.status === "running";
 							return h("span", { key: platform, className: "mc-pill", "data-on": running ? "true" : undefined,
-								title: platform === "android" ? (running ? "Android device attached — mirrored in Live device" : "No Android device attached") : "Preview server running" },
+								title: platform === "android" ? (running ? "Android device attached — mirrored in Device 1" : "No Android device attached") : "Preview server running" },
 								h("span", { className: "mc-dot " + (running ? "on" : "off") }),
 								label(platform),
 							);
@@ -353,7 +362,7 @@ window.__ModuleLoader__.load({
 					platforms.map((platform) => {
 						const srv = server(platform);
 						const bld = build(platform);
-						// 0.10.0 merge: "Start server" (serve-avd iframe) and "Live device" were
+						// 0.10.0 merge: "Start server" (serve-avd iframe) and "Device 1" were
 						// two views of the same screen. The in-process stream won; the Android
 						// card keeps project controls only. iOS keeps serve-sim (its only view).
 						const preview = platform === "ios";
@@ -365,7 +374,7 @@ window.__ModuleLoader__.load({
 									? h("button", { className: "mc-btn", disabled: busy !== "", onClick: () => act(platform + "-stop-server", "/stop", { platform }) },
 										srv.status === "running" ? "Stop server" : "Server " + srv.status)
 									: h("button", { className: "mc-btn primary", disabled: busy !== "", onClick: () => act(platform + "-start-server", "/start", { platform }) }, "Start server")),
-								!preview && h("span", { className: "mc-live-cap" }, "screen: Live device ↑"),
+								!preview && h("span", { className: "mc-live-cap" }, "screen: Device 1 ↑"),
 							),
 							preview && (srv?.url
 								? h("iframe", {
@@ -418,7 +427,7 @@ window.__ModuleLoader__.load({
 							openLogs["bundler"] && h("pre", { className: "mc-log" }, info.bundler.log.join("\n")),
 						),
 					info?.servers?.length === 0 && info?.builds?.length === 0 && (info?.deviceCount ?? 0) === 0 &&
-						h("div", { className: "mc-empty" }, "Nothing running yet — pick a project directory and press Run app, or boot an AVD in Live device above."),
+						h("div", { className: "mc-empty" }, "Nothing running yet — pick a project directory and press Run app, or boot an AVD in Device 1 above."),
 				),
 				h("div", { className: "mc-footer" },
 					h("span", null, "dsh-mobilecode · polls every 2s"),
@@ -574,9 +583,9 @@ window.__ModuleLoader__.load({
 			return { streamUrl, grant, reset, control, imgProps: { ref: imgRef, draggable: false, onPointerDown: onDown, onPointerUp: onUp } };
 		}
 
-		/** Live device stream: picker-popover header, SVG toolbar pill, device
+		/** Device 1 stream: picker-popover header, SVG toolbar pill, device
 		 *  menu, quick sizes + frame styles, and tap/drag with duration. */
-		function LiveDeviceCard({ coopOn, onToggleCoop, onSerial }) {
+		function LiveDeviceCard({ coopOn, onToggleCoop, onSerial, sizeMode, setSizeMode, frame, setFrame }) {
 			const [devices, setDevices] = useState([]);
 			const [avds, setAvds] = useState([]);
 			const [serial, setSerial] = useState("");
@@ -585,9 +594,10 @@ window.__ModuleLoader__.load({
 			const [menuOpen, setMenuOpen] = useState(false);
 			const [still, setStill] = useState(null);
 			const [view, setView] = useState("live"); // 'live' | 'still'
-			const [sizeMode, setSizeMode] = useState({ mode: "fit" }); // {mode:'fit'|'pct'|'px', value?}
-			const [frame, setFrame] = useState("none"); // 'none' | 'bezel' | 'device'
+			// sizeMode/frame live in LiveStreamSection (0.11.0) so both co-op
+			// panes scale identically — Device 2 must never be smaller.
 			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;
@@ -653,14 +663,26 @@ window.__ModuleLoader__.load({
 					setBooting("");
 				}
 			};
+			// 0.11.0 device power-off: graceful `adb emu kill` via POST /off.
+			// If we just killed the streamed device, drop back to the picker.
+			const powerOff = async (device) => {
+				setPowering(device); setError("");
+				try {
+					await streamPost("/off", { serial: device });
+					if (device === serial) { setSerial(""); live.reset(); }
+					await refreshDevices();
+				} catch (err) {
+					setError(err instanceof Error ? err.message : String(err));
+					await refreshDevices();
+				} finally {
+					setPowering("");
+				}
+			};
 			const showLive = () => { setView("live"); if (serial !== "" && live.streamUrl === "") grant(serial); };
 
-			const sizeStyle = sizeMode.mode === "pct"
-				? { width: sizeMode.value + "%", maxWidth: "100%", maxHeight: "60vh" }
-				: sizeMode.mode === "px"
-					? { width: sizeMode.value + "px", maxWidth: "100%", maxHeight: "60vh" }
-					: {};
-			const stageClass = "mc-live-stage" + (frame !== "none" ? " " + frame : "");
+			const sizeStyle = stageSizeStyle(sizeMode);
+			const stageClass = stageClassFor(frame);
+			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" }) },
@@ -687,7 +709,7 @@ window.__ModuleLoader__.load({
 
 			return h("div", { className: "mc-card mc-live" },
 				h("div", { className: "mc-card-head" },
-					h("span", null, "Live device"),
+					h("span", null, "Device 1"),
 					live.streamUrl !== "" && h("span", { className: "mc-live-badge" }, h("span", { className: "mc-dot on" }), "Live"),
 					h("span", { className: "sp" }),
 					h("div", { className: "mc-picker" },
@@ -696,20 +718,28 @@ window.__ModuleLoader__.load({
 							devices.length > 0
 								? h("div", { className: "mc-picker-group" },
 									h("div", { className: "mc-picker-label" }, "Online devices"),
-									devices.map((d) => h("button", { key: d.serial, className: "mc-picker-row" + (d.serial === serial ? " on" : ""), onClick: () => pick(d.serial) },
+									devices.map((d) => h("div", { key: d.serial, className: "mc-picker-row" + (d.serial === serial ? " on" : ""), onClick: () => pick(d.serial) },
 										h("span", null, d.kind === "emulator" ? "🖥" : "📱"),
-										h("span", { className: "mc-serial" }, d.serial),
+										h("span", { className: "mc-serial" }, d.avd ? d.avd + " · " + d.serial : d.serial),
 										d.streaming && h("span", { className: "mc-badge" }, "streaming"),
+										d.kind === "emulator" && h("span", { className: "sp" }),
+										d.kind === "emulator" && h("button", {
+											className: "mc-btn", disabled: booting !== "" || powering !== "",
+											title: "Shut down this emulator (adb emu kill)",
+											onClick: (e) => { e.stopPropagation(); powerOff(d.serial); },
+										}, powering === d.serial ? "stopping…" : "⏻ off"),
 									)),
 								)
 								: h("div", { className: "mc-picker-hint" }, "No device attached"),
-							avds.length > 0 && h("div", { className: "mc-picker-group" },
+							// Running AVDs already have their row (with ⏻ off) above;
+							// the boot list shows only the stopped ones.
+							avds.filter((avd) => !runningAvds.has(avd)).length > 0 && h("div", { className: "mc-picker-group" },
 								h("div", { className: "mc-picker-label" }, "AVDs"),
-								avds.map((avd) => h("div", { key: avd, className: "mc-picker-row" },
+								avds.filter((avd) => !runningAvds.has(avd)).map((avd) => h("div", { key: avd, className: "mc-picker-row" },
 									h("span", null, "▫ " + avd),
 									h("span", { className: "sp" }),
 									h("button", {
-										className: "mc-btn", disabled: booting !== "",
+										className: "mc-btn", disabled: booting !== "" || powering !== "",
 										title: "Boot this AVD (runs detached; it appears online when ready)",
 										onClick: () => boot(avd),
 									}, booting === avd ? "booting…" : "⏻ boot"),
@@ -724,12 +754,14 @@ window.__ModuleLoader__.load({
 						),
 					),
 					// 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 two devices side by side", onClick: onToggleCoop }, "⧉"),
+					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 }, "⧉"),
 				),
 				error !== "" && h("div", { className: "mc-error" }, error),
 				booting !== "" && h("div", { className: "mc-status" },
 					h("span", null, h("span", { className: "mc-dot warn" }), " Booting " + booting + " — it appears here once online (about a minute).")),
-				h("div", { className: "mc-toolbar" },
+				// 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 }),
@@ -779,7 +811,7 @@ window.__ModuleLoader__.load({
 		/** Co-op second pane (0.9.0): a compact stream view for a second device —
 		 *  device select, live image, tap/drag. No toolbar/menu/size knobs; the
 		 *  full card next to it carries those for whichever device it shows. */
-		function CoopPane({ excludeSerial }) {
+		function CoopPane({ excludeSerial, sizeMode, frame }) {
 			const [devices, setDevices] = useState([]);
 			const [serial, setSerial] = useState("");
 			const [error, setError] = useState("");
@@ -811,18 +843,18 @@ window.__ModuleLoader__.load({
 
 			return h("div", { className: "mc-card mc-live mc-coop-pane" },
 				h("div", { className: "mc-card-head" },
-					h("span", null, "Player B"),
+					h("span", null, "Device 2"),
 					live.streamUrl !== "" && h("span", { className: "mc-live-badge" }, h("span", { className: "mc-dot on" }), "Live"),
 					h("span", { className: "sp" }),
 					h("select", { className: "mc-input mc-coop-select", value: serial, onChange: (e) => { setSerial(e.target.value); live.reset(); } },
 						devices.length === 0 && h("option", { value: "" }, "no device"),
-						devices.map((d) => h("option", { key: d.serial, value: d.serial }, d.serial + (d.serial === excludeSerial ? " (A)" : d.streaming ? " ●" : ""))),
+						devices.map((d) => h("option", { key: d.serial, value: d.serial }, d.serial + (d.serial === excludeSerial ? " (Device 1)" : d.streaming ? " ●" : ""))),
 					),
 				),
 				error !== "" && h("div", { className: "mc-error" }, error),
-				h("div", { className: "mc-live-stage" },
+				h("div", { className: stageClassFor(frame) },
 					live.streamUrl !== ""
-						? h("img", { ...live.imgProps, src: live.streamUrl, alt: "co-op device screen", onError: () => grant(serial) })
+						? 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-cap" }, "tap or drag on the screen to drive this device"),
@@ -834,9 +866,13 @@ window.__ModuleLoader__.load({
 		function LiveStreamSection() {
 			const [coop, setCoop] = useState(false);
 			const [serialA, setSerialA] = useState("");
+			// Shared knobs (0.11.0): Device 1's Size/Frame controls drive both
+			// panes, so the pair always renders at the same height.
+			const [sizeMode, setSizeMode] = useState({ mode: "fit" }); // {mode:'fit'|'pct'|'px', value?}
+			const [frame, setFrame] = useState("none"); // 'none' | 'bezel' | 'device'
 			return h("div", { className: "mc-live-section" + (coop ? " coop" : "") },
-				h(LiveDeviceCard, { coopOn: coop, onToggleCoop: () => setCoop((v) => !v), onSerial: setSerialA }),
-				coop && h(CoopPane, { excludeSerial: serialA }),
+				h(LiveDeviceCard, { coopOn: coop, onToggleCoop: () => setCoop((v) => !v), onSerial: setSerialA, sizeMode, setSizeMode, frame, setFrame }),
+				coop && h(CoopPane, { excludeSerial: serialA, sizeMode, frame }),
 			);
 		}
 

package/lib/index.js

@@ -140,6 +140,8 @@ function makeRoutes(engine, config, stream) {
           const info = await engine.info({ directory })
           // 0.10.0: Android's device view is the Live device stream, not serve-avd.
           // The panel's pill shows attached-device count instead of a server state.
+          // 0.11.0: os lets the client hide the iOS card on non-mac hosts.
+          info.os = process.platform
           try { info.deviceCount = (await DeviceBuild.devices()).length } catch { /* no adb: pill stays off */ }
           writeJson(res, 200, info)
         } catch (error) {
@@ -502,16 +504,19 @@ function makeRoutes(engine, config, stream) {
         if (!fence(req, res, true) || !isPost(req, res)) return
         await readBody(req, res)
         try {
-          const [devices, avds] = await Promise.all([
+          const [rows, avds] = await Promise.all([
             stream.host.listDevices(),
             DeviceBuild.androidAvds().catch(() => []),
           ])
           const streaming = new Set(stream.host.runningSerials())
-          writeJson(res, 200, {
-            ok: true,
-            avds,
-            devices: devices.map((device) => ({ ...device, ...(streaming.has(device.serial) ? { streaming: true } : {}) })),
-          })
+          // Attach the AVD name to online emulators so the picker can hide them
+          // from the boot list and label its rows (0.11.0).
+          const devices = await Promise.all(rows.map(async (device) => ({
+            ...device,
+            ...(streaming.has(device.serial) ? { streaming: true } : {}),
+            ...(device.serial.startsWith('emulator-') ? { avd: await DeviceBuild.avdName(device.serial).catch(() => undefined) } : {}),
+          })))
+          writeJson(res, 200, { ok: true, avds, devices })
         } catch (error) {
           writeJson(res, 503, { code: 'devices_unavailable', error: error instanceof Error ? error.message : String(error) })
         }
@@ -570,6 +575,30 @@ function makeRoutes(engine, config, stream) {
         }
       },
     },
+    // POST /api/dsh-mobilecode/off {serial} — the picker's ⏻ off button (0.11.0):
+    // graceful `adb emu kill` for a RUNNING emulator. Physical devices are
+    // refused (adb has no power-off verb for phones); starting is /boot's job.
+    {
+      kind: 'exact',
+      path: API_BASE + '/off',
+      handler: async (req, res) => {
+        if (!fence(req, res, true) || !isPost(req, res)) return
+        const body = await readBody(req, res)
+        if (body === undefined) return
+        const serial = String(body.serial ?? '').trim()
+        if (serial === '' || !/^[\w][\w.:-]{0,63}$/.test(serial)) { writeJson(res, 400, { error: 'serial must be an attached device serial' }); return }
+        try {
+          const rows = await DeviceBuild.devices()
+          const row = rows.find((item) => item.serial === serial && item.state === 'device')
+          if (!row) { writeJson(res, 404, { error: `${serial} is not online` }); return }
+          if (!serial.startsWith('emulator-')) { writeJson(res, 400, { error: 'only emulators can be powered off here — a physical device keeps its own power button' }); return }
+          await DeviceBuild.adbRun(serial, ['emu', 'kill'])
+          writeJson(res, 200, { ok: true, serial, killed: true })
+        } catch (error) {
+          writeJson(res, 500, { error: error instanceof Error ? error.message : String(error) })
+        }
+      },
+    },
     // POST /api/dsh-mobilecode/stream/still {device?} — capture ONE fresh
     // screencap PNG and serve it; returns {path, width, height, dataUrl}. The
     // panel's Screenshot button uses this (a still is the current pixels, unlike

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