dsh-mobilecode 0.11.1 → 0.11.2

package/README.md

@@ -133,22 +133,26 @@ card is **Device 1**; co-op docks a second, **Device 2**. It is produced
   stage, and a ☰ **device menu** adds notifications / quick settings / collapse /
   lock / wake / assistant.
 - The header **device picker** groups online devices (🖥 emulator / 📱 physical,
-  streaming badge) and lists configured AVDs with a one-click **⏻ boot** button
+  streaming badge) — each online emulator row carries a **⏻ off** power button
+  (`POST /off` → `adb emu kill`; physical devices are refused) — and lists
+  *stopped* configured AVDs with a one-click **⏻ boot** button
   (`POST /boot`, the merged device-start action from the retired Start-server
   flow: validate → spawn detached → adopt if already running → wait boot
-  complete → the card streams it immediately); 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.
+  complete → the card streams it immediately); a running AVD appears only as
+  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).
 - **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 compact **Player B** pane beside it —
-  its own device select, its own live `<img>`, and its own tap/drag control, so
-  a human watches both players fight at the same instant. Each pane grants its
-  own HMAC capability; closing one pane never stalls or disturbs the other
-  stream.
+  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
+  independently. Each pane grants its own HMAC capability; closing one pane
+  never stalls or disturbs the other stream.
 - **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

@@ -118,14 +118,14 @@ window.__ModuleLoader__.load({
 .mc-live-bar select { background: light-dark(#fff, #20242b); color: inherit; border: 1px solid light-dark(rgba(0,0,0,.18), rgba(255,255,255,.18)); border-radius: 6px; padding: 3px 6px; font: inherit; font-size: 12px; max-width: 200px; }
 .mc-live-stage { position: relative; align-self: center; background: #000; border-radius: 10px; overflow: hidden; line-height: 0; box-shadow: inset 0 0 0 1px light-dark(rgba(0,0,0,.12), rgba(255,255,255,.14)); }
 .mc-live-stage img { display: block; max-width: 100%; max-height: 60vh; width: auto; height: auto; cursor: crosshair; touch-action: none; user-select: none; }
-.mc-live-stage .mc-live-off { display: flex; align-items: center; justify-content: center; width: 260px; height: 460px; color: #9aa0a8; font-size: 13px; line-height: 1.5; text-align: center; }
+.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 > .mc-card { min-width: 0; }
 .mc-live-section.coop .mc-card-head { flex-wrap: wrap; }
-.mc-live-section.coop .mc-live-stage img { max-height: 48vh; }
-.mc-live-section.coop .mc-live-off { width: 180px; height: 340px; }
+/* 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-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; }
@@ -196,6 +196,42 @@ window.__ModuleLoader__.load({
 				? { width: m.value + "px", maxWidth: "100%", maxHeight: "60vh" }
 				: {});
 		const stageClassFor = (f) => "mc-live-stage" + (f !== "none" ? " " + f : "");
+		const SIZE_PRESETS = [
+			{ label: "Fit", mode: { mode: "fit" } },
+			{ label: "100%", mode: { mode: "pct", value: 100 } },
+			{ label: "S · 240", mode: { mode: "px", value: 240 } },
+			{ label: "M · 320", mode: { mode: "px", value: 320 } },
+		];
+		/** Size presets + px/% select + frame seg — shared by both stream panes
+		 *  (0.11.2) so Device 2 gets the same controls as Device 1. */
+		function StageControls({ sizeMode, setSizeMode, frame, setFrame }) {
+			const isCurrent = (m) => m.mode === sizeMode.mode && (m.value === undefined || m.value === sizeMode.value);
+			return h("div", { className: "mc-live-size" },
+				h("span", { className: "mc-hint" }, "Size"),
+				h("div", { className: "mc-seg" }, SIZE_PRESETS.map((p) => h("button", { key: p.label, "data-on": isCurrent(p.mode) || undefined, onClick: () => setSizeMode(p.mode) }, p.label))),
+				h("select", { className: "mc-input mc-live-sizesel", value: sizeMode.mode === "pct" ? sizeMode.value + "%" : sizeMode.mode === "px" ? String(sizeMode.value) : "fit", onChange: (e) => {
+					const v = e.target.value;
+					if (v === "fit") setSizeMode({ mode: "fit" });
+					else if (v.endsWith("%")) setSizeMode({ mode: "pct", value: Number(v.slice(0, -1)) });
+					else setSizeMode({ mode: "px", value: Number(v) });
+				} },
+					h("option", { value: "fit" }, "fit"),
+					h("option", { value: "50%" }, "50%"),
+					h("option", { value: "75%" }, "75%"),
+					h("option", { value: "100%" }, "100%"),
+					h("option", { value: "125%" }, "125%"),
+					h("option", { value: "240" }, "S · 240px"),
+					h("option", { value: "320" }, "M · 320px"),
+					h("option", { value: "420" }, "L · 420px"),
+				),
+				h("span", { className: "mc-hint" }, "Frame"),
+				h("div", { className: "mc-seg" },
+					h("button", { "data-on": frame === "none" || undefined, onClick: () => setFrame("none") }, "none"),
+					h("button", { "data-on": frame === "bezel" || undefined, onClick: () => setFrame("bezel") }, "bezel"),
+					h("button", { "data-on": frame === "device" || undefined, onClick: () => setFrame("device") }, "device"),
+				),
+			);
+		}
 
 		function PanelController() {
 			let panelOpen = false;
@@ -585,7 +621,9 @@ window.__ModuleLoader__.load({
 
 		/** 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, sizeMode, setSizeMode, frame, setFrame }) {
+		function LiveDeviceCard({ coopOn, onToggleCoop, onSerial }) {
+			const [sizeMode, setSizeMode] = useState({ mode: "fit" }); // {mode:'fit'|'pct'|'px', value?}
+			const [frame, setFrame] = useState("none"); // 'none' | 'bezel' | 'device'
 			const [devices, setDevices] = useState([]);
 			const [avds, setAvds] = useState([]);
 			const [serial, setSerial] = useState("");
@@ -699,13 +737,6 @@ window.__ModuleLoader__.load({
 				{ action: "wake", label: "Wake" },
 				{ action: "assistant", label: "Assistant" },
 			];
-			const SIZE_PRESETS = [
-				{ label: "Fit", mode: { mode: "fit" } },
-				{ label: "100%", mode: { mode: "pct", value: 100 } },
-				{ label: "S · 240", mode: { mode: "px", value: 240 } },
-				{ label: "M · 320", mode: { mode: "px", value: 320 } },
-			];
-			const isCurrent = (m) => m.mode === sizeMode.mode && (m.value === undefined || m.value === sizeMode.value);
 
 			return h("div", { className: "mc-card mc-live" },
 				h("div", { className: "mc-card-head" },
@@ -781,39 +812,19 @@ window.__ModuleLoader__.load({
 					? 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-size" },
-					h("span", { className: "mc-hint" }, "Size"),
-					h("div", { className: "mc-seg" }, SIZE_PRESETS.map((p) => h("button", { key: p.label, "data-on": isCurrent(p.mode) || undefined, onClick: () => setSizeMode(p.mode) }, p.label))),
-					h("select", { className: "mc-input mc-live-sizesel", value: sizeMode.mode === "pct" ? sizeMode.value + "%" : sizeMode.mode === "px" ? String(sizeMode.value) : "fit", onChange: (e) => {
-						const v = e.target.value;
-						if (v === "fit") setSizeMode({ mode: "fit" });
-						else if (v.endsWith("%")) setSizeMode({ mode: "pct", value: Number(v.slice(0, -1)) });
-						else setSizeMode({ mode: "px", value: Number(v) });
-					} },
-						h("option", { value: "fit" }, "fit"),
-						h("option", { value: "50%" }, "50%"),
-						h("option", { value: "75%" }, "75%"),
-						h("option", { value: "100%" }, "100%"),
-						h("option", { value: "125%" }, "125%"),
-						h("option", { value: "240" }, "S · 240px"),
-						h("option", { value: "320" }, "M · 320px"),
-						h("option", { value: "420" }, "L · 420px"),
-					),
-					h("span", { className: "mc-hint" }, "Frame"),
-					h("div", { className: "mc-seg" },
-						h("button", { "data-on": frame === "none" || undefined, onClick: () => setFrame("none") }, "none"),
-						h("button", { "data-on": frame === "bezel" || undefined, onClick: () => setFrame("bezel") }, "bezel"),
-						h("button", { "data-on": frame === "device" || undefined, onClick: () => setFrame("device") }, "device"),
-					),
-				),
+				h(StageControls, { sizeMode, setSizeMode, frame, setFrame }),
 			);
 		}
 		/** 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, sizeMode, frame }) {
+		 *  device select, live image, tap/drag — and (0.11.2) its own Size/Frame
+		 *  row, mirroring Device 1's controls. No toolbar/menu: those belong to
+		 *  the full card. Defaults are identical, so the panes match out of the
+		 *  box and can be adjusted independently. */
+		function CoopPane({ excludeSerial }) {
 			const [devices, setDevices] = useState([]);
 			const [serial, setSerial] = useState("");
+			const [sizeMode, setSizeMode] = useState({ mode: "fit" });
+			const [frame, setFrame] = useState("none");
 			const [error, setError] = useState("");
 			const live = useLiveStream({ serial, onError: setError });
 			const grant = (device) => live.grant(device).then((ok) => { if (ok) setError(""); });
@@ -858,21 +869,19 @@ window.__ModuleLoader__.load({
 						: 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"),
+				h(StageControls, { sizeMode, setSizeMode, frame, setFrame }),
 			);
 		}
 
 		/** Stream section: the classic single card, plus a co-op mode that docks
-		 *  a second pane next to it for two-player testing. */
+		 *  a second pane next to it for two-player testing. Each pane owns its
+		 *  Size/Frame knobs (0.11.2); the shared CSS base makes them match. */
 		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, sizeMode, setSizeMode, frame, setFrame }),
-				coop && h(CoopPane, { excludeSerial: serialA, sizeMode, frame }),
+				h(LiveDeviceCard, { coopOn: coop, onToggleCoop: () => setCoop((v) => !v), onSerial: setSerialA }),
+				coop && h(CoopPane, { excludeSerial: serialA }),
 			);
 		}
 

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