dsh-mobilecode 0.8.1 → 0.9.0

package/README.md

@@ -95,23 +95,29 @@ drawer:
 - `device_stream` — drive the live screen stream the panel shows: `start` an
   online device (returns a signed `streamUrl` **and** an `android-stream`
   `presentationMeta` that renders a compact conversation card and auto-opens the
-  panel), `status`, or `stop`. Agents that just need to see the screen should
-  prefer `device_screen` / `device_ui_tree`.
+  panel), `status`, or `stop`. Streams are **per-serial and independent** since
+  0.9.0 — start both players of a co-op game and `status` lists every live
+  stream (`serials`); `stop` ends one (with `serial`) or all of them. Agents
+  that just need to see the screen should still prefer `device_screen` /
+  `device_ui_tree`.
 
 **Live device stream (the panel)**
 
 The Devices pane shows a real-time mirror of the attached device. It is produced
 **in-process** — no inner loopback port, no external helper:
 
-- ONE persistent `adb exec-out "while :; do screencap -p; done"` child streams
-  ~8 fps with zero per-frame process cost (spawning adb per frame caps at ~5 fps
-  and 100% churn). A quote-safe PNG splitter cuts the concatenated output into
-  frames by walking chunk headers (no marker scanning, no false positives).
+- ONE persistent `adb exec-out "while :; do screencap -p; done"` child **per
+  streamed device** runs at ~8 fps with zero per-frame process cost (spawning
+  adb per frame caps at ~5 fps and 100% churn). A quote-safe PNG splitter cuts
+  the concatenated output into frames by walking chunk headers (no marker
+  scanning, no false positives).
 - The browser `<img>` reads a `multipart/x-mixed-replace` body served straight
   from the latest-frame buffer. Backpressure is **latest-wins**: a slow tab skips
   frames instead of building an unbounded queue or watching a growing delay.
-- A consumer refcount + idle timeout stops the loop when nobody is watching; a
-  keep-alive restarts a crashed loop; switching devices retires the old child.
+- Each stream owns its consumer refcount + idle timeout (nobody watching that
+  device → its child stops) and crash keep-alive. Since 0.9.0 starting device B
+  **never** retires device A's child — co-op streams are fully independent, and
+  a frame from one device can never leak into the other viewer's pipe.
 - **Tap or drag directly on the screen** to drive the device: a short press is a
   tap, a long drag becomes a swipe carrying the real press duration (clamped
   0–5000 ms), coalesced into one control call. A floating **pill toolbar** of SVG
@@ -126,6 +132,12 @@ The Devices pane shows a real-time mirror of the attached device. It is produced
 - **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.
 - **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),
@@ -252,7 +264,8 @@ join it and talk through it, and the AI model reads and steers the same wire.
 Typical loop: `device_avd_create` + `device_boot` a clone → both apps
 `join` → `mesh_link` → `device_batch` inputs at both → `device_pair_capture`
 to watch → `mesh_log` to see the traffic → `mesh_tune` to inject real-world
-network pain.
+network pain. For the human at the keyboard: open the panel and hit ⧉ — the
+Devices pane mirrors **both** devices live, side by side, tappable (v0.9.0).
 
 **Conversation surface (v0.7.0)** — the transcript integration ported from
 dsh-android's UI/UX:

package/lib/android-stream.js

@@ -1,10 +1,14 @@
 /**
- * dsh-mobilecode — host-side lifecycle manager for the one live Android stream.
+ * dsh-mobilecode — host-side lifecycle manager for live Android streams.
  *
- * Ported (lean) from ZSeven-W/dsh-android (android-host.ts, MIT). The stream is
- * in-process: one AdbFrameLoop per streamed serial, a consumer refcount with an
- * idle timeout, and a keep-alive that restarts a crashed loop. Emulators and
- * physical devices share this path — the serial is the only identity.
+ * Ported (lean) from ZSeven-W/dsh-android (android-host.ts, MIT), widened in
+ * 0.9.0 for co-op testing: the host keeps one INDEPENDENT frame loop per
+ * serial (Map<serial, state>) instead of a single global loop, so two devices
+ * stream at once and the panel can show them side by side. Each stream owns
+ * its consumer refcount, idle timer, crash bookkeeping and frame subscribers;
+ * the "primary" stream (most recently ensured; the first live one as a
+ * fallback) preserves every single-stream default the agent tools and the
+ * control surface already rely on.
  *
  * The control surface takes NORMALIZED 0..1 coordinates of the streamed frame
  * (the panel's <img> is scaled, so the browser knows fractions, not pixels) and
@@ -47,98 +51,126 @@ function requireNormalized(x, y) {
   }
 }
 
-/** Lifecycle manager for the (single) in-process Android device stream. */
+/** Lifecycle manager for live Android device streams (one loop per serial). */
 export class AndroidStreamHost {
   #options
-  #loop
-  #starting
-  #launchQueue = Promise.resolve()
-  #consumers = 0
+  /** @type {Map<string, object>} serial → per-stream state. */
+  #streams = new Map()
+  /** Most recently ensured serial; the anchor for single-stream defaults. */
+  #primary = undefined
   #keepAliveTimer
-  #idleTimer
-  #restarts = 0
-  #startedAt
-  #exitAt
-  #lastError
-  #lastSerial
-  #intentionalStop = false
   #disposed = false
-  #frameSubscribers = new Set()
 
   constructor(options = {}) {
     this.#options = {
       restartDelayMs: options.restartDelayMs ?? DEFAULT_RESTART_DELAY_MS,
       idleTimeoutMs: options.idleTimeoutMs ?? DEFAULT_IDLE_TIMEOUT_MS,
       firstFrameTimeoutMs: options.firstFrameTimeoutMs ?? FIRST_FRAME_TIMEOUT_MS,
+      // Test seam: the offline suite injects a fake loop factory + device list.
+      loopFactory: options.loopFactory ?? ((serial, handlers) => new AdbFrameLoop(serial, handlers)),
+      devicesFn: options.devicesFn ?? (() => DeviceBuild.devices()),
     }
   }
 
-  get running() {
-    return this.#loop?.running === true
+  // ── registry ───────────────────────────────────────────────────────────────
+
+  #state(serial) {
+    if (typeof serial !== 'string' || serial === '') {
+      throw new TypeError('dsh-mobilecode: stream operations require a non-empty serial')
+    }
+    let state = this.#streams.get(serial)
+    if (state === undefined) {
+      state = {
+        serial,
+        loop: undefined,
+        starting: undefined,
+        queue: Promise.resolve(),
+        consumers: 0,
+        restarts: 0,
+        startedAt: undefined,
+        exitAt: undefined,
+        lastError: undefined,
+        intentionalStop: false,
+        idleTimer: undefined,
+        subscribers: new Set(),
+      }
+      this.#streams.set(serial, state)
+    }
+    return state
   }
 
-  get streamedSerial() {
-    return this.running ? this.#loop?.serial : undefined
+  /** Serials with a live loop, in start order. */
+  runningSerials() {
+    return [...this.#streams.values()].filter((s) => s.loop?.running === true).map((s) => s.serial)
   }
 
-  get latestFrame() {
-    return this.#loop?.latestFrame
+  isStreaming(serial) {
+    if (typeof serial !== 'string' || serial === '') return false
+    return this.#streams.get(serial)?.loop?.running === true
   }
 
-  /** Observe every decoded frame; the returned function unsubscribes. */
-  subscribeFrames(subscriber) {
-    this.#frameSubscribers.add(subscriber)
-    return () => {
-      this.#frameSubscribers.delete(subscriber)
-    }
+  /** The primary serial: a live stream if any (first started), else the last ensured. */
+  get streamedSerial() {
+    const running = this.runningSerials()
+    if (running.length > 0) return running[0]
+    return this.#primary !== undefined && this.#streams.has(this.#primary) ? this.#primary : undefined
+  }
+
+  get running() {
+    return this.runningSerials().length > 0
   }
 
+  // ── lifecycle ──────────────────────────────────────────────────────────────
+
   /**
-   * Make sure the frame loop is live for `serial`. Concurrent callers share one
-   * launch; a call for a different serial retires the current loop first (one
-   * streamed device at a time).
+   * Make sure a frame loop is live for `serial`. Concurrent callers of the same
+   * serial share one launch; every serial gets its OWN loop — starting a second
+   * device never retires the first (co-op streams are independent).
    */
   async ensureStreaming({ serial }) {
+    const state = this.#state(serial)
+    this.#primary = serial
+    return this.#ensureStream(state)
+  }
+
+  async #ensureStream(state) {
     if (this.#disposed) throw new Error('dsh-mobilecode: the stream host is disposed')
-    if (typeof serial !== 'string' || serial === '') throw new TypeError('dsh-mobilecode: ensureStreaming requires a non-empty serial')
-    const startFor = async () => {
-      const current = this.#loop
-      if (current !== undefined && current.running && current.serial === serial) return this.#infoOf(current)
-      if (current !== undefined && current.serial !== serial) {
-        current.stop()
-        this.#loop = undefined
-      }
-      return this.#startFor(serial)
+    if (state.loop !== undefined && state.loop.running) {
+      this.#armIdle(state)
+      return this.#infoOf(state.loop)
     }
-    let starting = this.#starting
-    if (starting !== undefined) {
+    if (state.starting !== undefined) {
       try {
-        await starting
+        await state.starting
       } catch {
         // A failed shared launch is settled; retry below.
       }
-      if (this.running && this.#loop?.serial === serial) {
-        this.#armIdle()
-        return this.#infoOf(this.#loop)
+      if (state.loop !== undefined && state.loop.running) {
+        this.#armIdle(state)
+        return this.#infoOf(state.loop)
       }
-      starting = undefined
     }
-    starting = this.#serializeLaunch(startFor)
-    this.#starting = starting
+    const launch = async () => {
+      if (state.loop !== undefined && state.loop.running) return this.#infoOf(state.loop)
+      return this.#startFor(state)
+    }
+    const launching = state.queue.then(launch, launch)
+    state.queue = launching.then(() => undefined, () => undefined)
+    state.starting = launching
     try {
-      const info = await starting
-      this.#lastError = undefined
-      this.#armIdle()
+      const info = await launching
+      state.lastError = undefined
+      this.#armIdle(state)
       return info
     } catch (error) {
-      this.#lastError = errorMessage(error)
+      state.lastError = errorMessage(error)
       throw error
     } finally {
-      if (this.#starting === starting) this.#starting = undefined
+      if (state.starting === launching) state.starting = undefined
     }
   }
 
-  /** Start the crash keep-alive loop (restarts an unintentionally dead loop). */
+  /** Start the crash keep-alive loop (restarts any unintentionally dead loop). */
   startKeepAlive() {
     if (this.#keepAliveTimer !== undefined || this.#disposed) return
     this.#keepAliveTimer = setInterval(() => {
@@ -152,55 +184,97 @@ export class AndroidStreamHost {
     this.#keepAliveTimer = undefined
   }
 
-  /** Stop the stream intentionally (keep-alive will not fight it). */
-  async stop() {
-    this.#clearIdle()
-    this.#intentionalStop = true
-    this.#exitAt = undefined
-    const loop = this.#loop
-    this.#loop = undefined
-    this.#startedAt = undefined
+  /** Stop one stream intentionally (defaults to the primary). */
+  async stop(serial = this.streamedSerial) {
+    if (serial === undefined) return
+    const state = this.#streams.get(serial)
+    if (state !== undefined) await this.#stopStream(state)
+  }
+
+  /** Stop every stream (panel teardown, device_stream stop without a serial). */
+  async stopAll() {
+    for (const state of [...this.#streams.values()]) await this.#stopStream(state)
+    this.#primary = undefined
+  }
+
+  async #stopStream(state) {
+    this.#streams.delete(state.serial)
+    if (this.#primary === state.serial) this.#primary = undefined
+    state.intentionalStop = true
+    this.#clearIdle(state)
+    state.exitAt = undefined
+    const loop = state.loop
+    state.loop = undefined
+    state.startedAt = undefined
     loop?.stop()
-    await this.#starting?.catch(() => {})
-    const landed = this.#loop
+    await state.starting?.catch(() => {})
+    const landed = state.loop
     if (landed !== undefined) {
-      this.#loop = undefined
+      state.loop = undefined
       landed.stop()
     }
   }
 
-  /** Hold the stream alive for one consumer; release exactly once. */
-  acquire() {
-    this.#consumers += 1
-    this.#armIdle()
+  dispose() {
+    this.#disposed = true
+    this.stopKeepAlive()
+    for (const state of this.#streams.values()) {
+      state.subscribers.clear()
+      void this.#stopStream(state)
+    }
+    this.#streams.clear()
+    this.#primary = undefined
+  }
+
+  // ── accessors (primary unless a serial is given) ───────────────────────────
+
+  /** Hold a stream alive for one consumer; release exactly once. */
+  acquire(serial = this.streamedSerial) {
+    const state = this.#state(serial)
+    state.consumers += 1
+    this.#armIdle(state)
     let released = false
     return () => {
       if (released) return
       released = true
-      this.#consumers = Math.max(0, this.#consumers - 1)
-      this.#armIdle()
+      state.consumers = Math.max(0, state.consumers - 1)
+      this.#armIdle(state)
+    }
+  }
+
+  /**
+   * Observe every decoded frame of ONE serial; the returned function
+   * unsubscribes. Serial-scoped so two panels never cross frames.
+   */
+  subscribeFrames(serial, subscriber) {
+    const state = this.#state(serial)
+    state.subscribers.add(subscriber)
+    return () => {
+      state.subscribers.delete(subscriber)
     }
   }
 
-  status() {
-    const loop = this.#loop
-    const frame = loop?.latestFrame
+  status(serial = this.streamedSerial) {
+    const state = serial === undefined ? undefined : this.#streams.get(serial)
+    if (state === undefined) {
+      return { running: false, restarts: 0, consumers: 0, stderr: [] }
+    }
+    const frame = state.loop?.latestFrame
     return {
-      running: this.running,
-      ...(loop === undefined ? {} : { serial: loop.serial }),
-      restarts: this.#restarts,
-      ...(this.#lastError === undefined ? {} : { lastError: this.#lastError }),
-      consumers: this.#consumers,
+      running: state.loop?.running === true,
+      serial: state.serial,
+      restarts: state.restarts,
+      ...(state.lastError === undefined ? {} : { lastError: state.lastError }),
+      consumers: state.consumers,
       ...(frame === undefined ? {} : { frameSequence: frame.sequence, lastFrameAt: frame.at, width: frame.width, height: frame.height }),
-      stderr: loop?.stderrLines ?? [],
+      stderr: state.loop?.stderrLines ?? [],
     }
   }
 
-  dispose() {
-    this.#disposed = true
-    this.stopKeepAlive()
-    this.#frameSubscribers.clear()
-    return this.stop()
+  /** Latest frame of one stream (primary by default). */
+  latestFrame(serial = this.streamedSerial) {
+    if (serial === undefined) return undefined
+    return this.#streams.get(serial)?.loop?.latestFrame
   }
 
   // ── control surface (normalized 0..1 of the streamed frame) ────────────────
@@ -262,29 +336,33 @@ export class AndroidStreamHost {
       .map((row) => ({ serial: row.serial, kind: row.serial.startsWith('emulator-') ? 'emulator' : 'physical' }))
   }
 
+  // ── internals ──────────────────────────────────────────────────────────────
+
   async #shell(serial, shell) {
     await DeviceBuild.adbRun(serial, ['shell', ...shell], { timeoutMs: CONTROL_TIMEOUT_MS })
   }
 
   async #keepAliveTick() {
-    if (this.#disposed || this.#intentionalStop) return
-    const exitAt = this.#exitAt
-    const serial = this.#lastSerial
-    if (exitAt === undefined || serial === undefined) return
-    if (Date.now() - exitAt < this.#options.restartDelayMs) return
-    this.#exitAt = undefined
-    this.#restarts += 1
-    try {
-      await this.ensureStreaming({ serial })
-    } catch (error) {
-      this.#lastError = errorMessage(error)
-      if (this.#exitAt === undefined) this.#exitAt = Date.now()
+    if (this.#disposed) return
+    const now = Date.now()
+    for (const state of [...this.#streams.values()]) {
+      if (state.intentionalStop || state.exitAt === undefined) continue
+      if (now - state.exitAt < this.#options.restartDelayMs) continue
+      state.exitAt = undefined
+      state.restarts += 1
+      try {
+        await this.#ensureStream(state)
+      } catch (error) {
+        state.lastError = errorMessage(error)
+        if (state.exitAt === undefined) state.exitAt = Date.now()
+      }
     }
   }
 
-  async #startFor(serial) {
+  async #startFor(state) {
     if (this.#disposed) throw new Error('dsh-mobilecode: the stream host is disposed')
-    const online = await DeviceBuild.devices()
+    const { serial } = state
+    const online = await this.#options.devicesFn()
     if (!online.some((row) => row.serial === serial && row.state === 'device')) {
       const known = online.find((row) => row.serial === serial)
       throw new Error(
@@ -293,9 +371,9 @@ export class AndroidStreamHost {
           : `device ${serial} is ${known.state}, not ready to stream`,
       )
     }
-    const loop = new AdbFrameLoop(serial, {
+    const loop = this.#options.loopFactory(serial, {
       onFrame: (frame) => {
-        for (const subscriber of this.#frameSubscribers) {
+        for (const subscriber of state.subscribers) {
           try {
             subscriber(frame)
           } catch {
@@ -304,27 +382,26 @@ export class AndroidStreamHost {
         }
       },
       onExit: (detail) => {
-        if (this.#loop !== loop) return
-        this.#loop = undefined
-        this.#startedAt = undefined
-        this.#lastError = `the screencap loop for ${serial} died (${detail})`
-        this.#exitAt = Date.now()
+        if (state.loop !== loop) return
+        state.loop = undefined
+        state.startedAt = undefined
+        state.lastError = `the screencap loop for ${serial} died (${detail})`
+        state.exitAt = Date.now()
       },
     })
-    this.#loop = loop
-    this.#lastSerial = serial
-    this.#intentionalStop = false
+    state.loop = loop
+    state.intentionalStop = false
     loop.reset()
     loop.start()
     const frame = await loop.waitForFrame(this.#options.firstFrameTimeoutMs)
     if (frame === undefined) {
       const stderr = loop.stderrLines.join('\n')
       loop.stop()
-      if (this.#loop === loop) this.#loop = undefined
+      if (state.loop === loop) state.loop = undefined
       throw new Error(`no frame arrived from ${serial} within ${this.#options.firstFrameTimeoutMs} ms${stderr === '' ? '' : `: ${stderr}`}`)
     }
-    this.#startedAt = Date.now()
-    this.#exitAt = undefined
+    state.startedAt = Date.now()
+    state.exitAt = undefined
     return this.#infoOf(loop)
   }
 
@@ -335,36 +412,30 @@ export class AndroidStreamHost {
 
   /** Normalized frame coordinates → `input` pixels via the live frame size. */
   async #pixels(serial, x, y) {
-    const frame = this.streamedSerial === serial ? this.latestFrame : undefined
+    const frame = this.#streams.get(serial)?.loop?.latestFrame
     if (frame !== undefined) return { x: Math.round(x * frame.width), y: Math.round(y * frame.height) }
     const size = await screenSize(serial)
     return { x: Math.round(x * size.width), y: Math.round(y * size.height) }
   }
 
-  #armIdle() {
-    this.#clearIdle()
+  #armIdle(state) {
+    this.#clearIdle(state)
     const idleMs = this.#options.idleTimeoutMs
     if (idleMs <= 0) return
-    this.#idleTimer = setTimeout(() => {
-      this.#idleTimer = undefined
-      if (this.#consumers > 0) {
-        this.#armIdle()
+    state.idleTimer = setTimeout(() => {
+      state.idleTimer = undefined
+      if (state.consumers > 0) {
+        this.#armIdle(state)
         return
       }
-      void this.stop()
+      void this.#stopStream(state)
     }, idleMs)
-    this.#idleTimer.unref?.()
-  }
-
-  #clearIdle() {
-    if (this.#idleTimer !== undefined) clearTimeout(this.#idleTimer)
-    this.#idleTimer = undefined
+    state.idleTimer.unref?.()
   }
 
-  #serializeLaunch(task) {
-    const run = this.#launchQueue.then(task, task)
-    this.#launchQueue = run.then(() => undefined, () => undefined)
-    return run
+  #clearIdle(state) {
+    if (state.idleTimer !== undefined) clearTimeout(state.idleTimer)
+    state.idleTimer = undefined
   }
 }
 

package/lib/client.js

@@ -117,6 +117,12 @@ window.__ModuleLoader__.load({
 .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; }
+/* 0.9.0 co-op: card + second pane share the panel width side by side. */
+.mc-live-section { display: flex; flex-direction: column; gap: 10px; }
+.mc-live-section.coop { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
+.mc-live-section.coop > .mc-card { flex: 1 1 320px; min-width: 300px; }
+.mc-live-section.coop .mc-live-stage img { max-height: 48vh; }
+.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; }
 .mc-live-nav button:hover { background: light-dark(rgba(0,0,0,.06), rgba(255,255,255,.1)); }
@@ -332,7 +338,7 @@ window.__ModuleLoader__.load({
 							);
 						}),
 					),
-					h(LiveDeviceCard, null),
+					h(LiveStreamSection, null),
 					platforms.map((platform) => {
 						const srv = server(platform);
 						const bld = build(platform);
@@ -486,69 +492,45 @@ window.__ModuleLoader__.load({
 			);
 		}
 
-		/** Live device stream: picker-popover header, SVG toolbar pill, device
-		 *  menu, quick sizes + frame styles, and tap/drag with duration. */
-		function LiveDeviceCard() {
-			const [devices, setDevices] = useState([]);
-			const [avds, setAvds] = useState([]);
-			const [serial, setSerial] = useState("");
+		/** Shared stream lifecycle (0.9.0 co-op): HMAC-granted frame URL with a
+		 *  re-mint timer, plus tap/drag pointer mapping for the <img>. Used by
+		 *  the full card and by the second co-op pane. */
+		function useLiveStream({ serial, onError }) {
 			const [streamUrl, setStreamUrl] = 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'
-			const [sizeMode, setSizeMode] = useState({ mode: "fit" }); // {mode:'fit'|'pct'|'px', value?}
-			const [frame, setFrame] = useState("none"); // 'none' | 'bezel' | 'device'
 			const imgRef = useRef(null);
 			const dragRef = useRef(null);
 			const grantTimer = useRef(null);
+			const serialRef = useRef(serial);
+			serialRef.current = serial;
+			const onErrorRef = useRef(onError);
+			onErrorRef.current = onError;
 
 			const grant = async (device) => {
-				if (!device) return;
+				if (!device) return false;
 				try {
 					const r = await streamPost("/stream/grant", { device });
 					// Absolute URL: the plugin card can be hosted under a different
 					// origin/path than the API, and <img> src ignores fetch()'s base.
 					setStreamUrl(location.origin + r.streamUrl);
-					setSerial(r.device);
-					setError("");
 					clearTimeout(grantTimer.current);
 					// Re-mint a minute before the 10-minute capability expires.
 					const ms = Math.max(30000, (r.expiresAt - Date.now()) - 60000);
 					grantTimer.current = setTimeout(() => { grant(r.device).catch(() => {}); }, ms);
+					return true;
 				} catch (err) {
-					setError(err instanceof Error ? err.message : String(err));
+					onErrorRef.current(err instanceof Error ? err.message : String(err));
 					setStreamUrl("");
+					return false;
 				}
 			};
-
-			const refreshDevices = async () => {
-				try {
-					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 ?? ""));
-				} catch (err) {
-					setError(err instanceof Error ? err.message : String(err));
-				}
-			};
-
-			useEffect(() => {
-				refreshDevices();
-				const timer = setInterval(refreshDevices, 5000);
-				return () => { clearInterval(timer); clearTimeout(grantTimer.current); };
-			}, []);
-
-			// Auto-grant once a serial is known, no stream, and we're in live view.
-			useEffect(() => { if (serial !== "" && streamUrl === "" && view === "live") grant(serial).catch(() => {}); }, [serial, streamUrl, view]);
+			const reset = () => { clearTimeout(grantTimer.current); setStreamUrl(""); };
+			useEffect(() => () => clearTimeout(grantTimer.current), []);
 
 			const control = async (action) => {
-				if (serial === "") return;
-				try { await streamPost("/stream/control", { device: serial, action }); }
-				catch (err) { setError(err instanceof Error ? err.message : String(err)); }
+				if (serialRef.current === "") return;
+				try { await streamPost("/stream/control", { device: serialRef.current, action }); }
+				catch (err) { onErrorRef.current(err instanceof Error ? err.message : String(err)); }
 			};
-
 			const norm = (clientX, clientY) => {
 				const el = imgRef.current;
 				if (!el) return null;
@@ -574,6 +556,46 @@ 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 } };
+		}
+
+		/** Live device stream: picker-popover header, SVG toolbar pill, device
+		 *  menu, quick sizes + frame styles, and tap/drag with duration. */
+		function LiveDeviceCard({ coopOn, onToggleCoop, onSerial }) {
+			const [devices, setDevices] = useState([]);
+			const [avds, setAvds] = useState([]);
+			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'
+			const [sizeMode, setSizeMode] = useState({ mode: "fit" }); // {mode:'fit'|'pct'|'px', value?}
+			const [frame, setFrame] = useState("none"); // 'none' | 'bezel' | 'device'
+			const live = useLiveStream({ serial, onError: setError });
+			const grant = (device) => live.grant(device).then((ok) => { if (ok) setError(""); });
+			const control = live.control;
+			useEffect(() => { if (onSerial) onSerial(serial); }, [serial]);
+
+			const refreshDevices = async () => {
+				try {
+					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 ?? ""));
+				} catch (err) {
+					setError(err instanceof Error ? err.message : String(err));
+				}
+			};
+
+			useEffect(() => {
+				refreshDevices();
+				const timer = setInterval(refreshDevices, 5000);
+				return () => clearInterval(timer);
+			}, []);
+
+			// Auto-grant once a serial is known, no stream, and we're in live view.
+			useEffect(() => { if (serial !== "" && live.streamUrl === "" && view === "live") grant(serial); }, [serial, live.streamUrl, view]);
 
 			const capture = async () => {
 				if (serial === "") return;
@@ -599,8 +621,8 @@ window.__ModuleLoader__.load({
 				catch (err) { setError(err instanceof Error ? err.message : String(err)); }
 			};
 
-			const pick = (device) => { setSerial(device); setStreamUrl(""); setStill(null); setView("live"); setError(""); setPickerOpen(false); };
-			const showLive = () => { setView("live"); if (serial !== "" && streamUrl === "") grant(serial).catch(() => {}); };
+			const pick = (device) => { setSerial(device); live.reset(); setStill(null); setView("live"); setError(""); setPickerOpen(false); };
+			const showLive = () => { setView("live"); if (serial !== "" && live.streamUrl === "") grant(serial); };
 
 			const sizeStyle = sizeMode.mode === "pct"
 				? { width: sizeMode.value + "%", maxWidth: "100%", maxHeight: "60vh" }
@@ -614,7 +636,7 @@ window.__ModuleLoader__.load({
 				{ 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).catch(() => {}); } },
+				{ 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" },
@@ -635,7 +657,7 @@ window.__ModuleLoader__.load({
 			return h("div", { className: "mc-card mc-live" },
 				h("div", { className: "mc-card-head" },
 					h("span", null, "Live device"),
-					streamUrl !== "" && h("span", { className: "mc-live-badge" }, h("span", { className: "mc-dot on" }), "Live"),
+					live.streamUrl !== "" && h("span", { className: "mc-live-badge" }, h("span", { className: "mc-dot on" }), "Live"),
 					h("span", { className: "sp" }),
 					h("div", { className: "mc-picker" },
 						h("button", { className: "mc-btn", onClick: () => setPickerOpen((v) => !v) }, serial || "no device", " ▾"),
@@ -662,6 +684,8 @@ window.__ModuleLoader__.load({
 							menuItems.map((item) => h("button", { key: item.action, onClick: () => menuAction(item.action) }, item.label)),
 						),
 					),
+					// 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 }, "⧉"),
 				),
 				error !== "" && h("div", { className: "mc-error" }, error),
 				h("div", { className: "mc-toolbar" },
@@ -674,8 +698,8 @@ window.__ModuleLoader__.load({
 				h("div", { className: stageClass },
 					view === "still" && still?.dataUrl
 						? h("img", { src: still.dataUrl, alt: "still capture", draggable: false })
-						: streamUrl !== ""
-							? h("img", { ref: imgRef, src: streamUrl, alt: "device screen", style: sizeStyle, draggable: false, onPointerDown: onDown, onPointerUp: onUp, onError: () => grant(serial) })
+						: 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 one with device_boot, or press Run app."
 								: "Connecting to " + serial + "..."),
@@ -711,6 +735,70 @@ 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 }) {
+			const [devices, setDevices] = useState([]);
+			const [serial, setSerial] = useState("");
+			const [error, setError] = useState("");
+			const live = useLiveStream({ serial, onError: setError });
+			const grant = (device) => live.grant(device).then((ok) => { if (ok) setError(""); });
+
+			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 ?? "";
+					});
+				} catch {
+					/* the header keeps the last device list */
+				}
+			};
+
+			useEffect(() => {
+				refresh();
+				const timer = setInterval(refresh, 5000);
+				return () => clearInterval(timer);
+			}, [excludeSerial]);
+
+			useEffect(() => { if (serial !== "" && live.streamUrl === "") grant(serial); }, [serial, live.streamUrl]);
+
+			return h("div", { className: "mc-card mc-live mc-coop-pane" },
+				h("div", { className: "mc-card-head" },
+					h("span", null, "Player B"),
+					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 ? " ●" : ""))),
+					),
+				),
+				error !== "" && h("div", { className: "mc-error" }, error),
+				h("div", { className: "mc-live-stage" },
+					live.streamUrl !== ""
+						? h("img", { ...live.imgProps, src: live.streamUrl, alt: "co-op device screen", 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"),
+			);
+		}
+
+		/** Stream section: the classic single card, plus a co-op mode that docks
+		 *  a second pane next to it for two-player testing. */
+		function LiveStreamSection() {
+			const [coop, setCoop] = useState(false);
+			const [serialA, setSerialA] = useState("");
+			return h("div", { className: "mc-live-section" + (coop ? " coop" : "") },
+				h(LiveDeviceCard, { coopOn: coop, onToggleCoop: () => setCoop((v) => !v), onSerial: setSerialA }),
+				coop && h(CoopPane, { excludeSerial: serialA }),
+			);
+		}
+
 		//#region setup UI (welcome + settings)
 
 		/** PaddleOCR status card: fetch /ocr, Install button, log tail. */

package/lib/index.js

@@ -421,8 +421,9 @@ function makeRoutes(engine, config, stream) {
         const token = new URL(req.url ?? '/', 'http://localhost').searchParams.get('token') ?? ''
         const payload = await stream.access.verifyStreamToken(token)
         if (payload === undefined) { writeJson(res, 403, { code: 'token_invalid', error: 'the stream token is invalid or expired' }); return }
-        if (stream.host.streamedSerial !== payload.serial) { writeJson(res, 503, { code: 'stream_not_running', error: 'the device stream is not running; request a fresh grant' }); return }
-        const release = stream.host.acquire()
+        // 0.9.0: streams are per-serial and independent (co-op) — a token for
+        // device B never shares a pipe with device A's writer.
+        const release = stream.host.acquire(payload.serial)
         try {
           await stream.host.ensureStreaming({ serial: payload.serial })
         } catch (error) {
@@ -439,15 +440,10 @@ function makeRoutes(engine, config, stream) {
           writer.close()
           release()
         }
-        const unsubscribe = stream.host.subscribeFrames((frame) => {
-          // Frames for a different serial (after a device switch) must not leak
-          // into a capability minted for the old device.
-          if (stream.host.streamedSerial === payload.serial) writer.writeFrame(frame)
-          else teardown()
-        })
+        const unsubscribe = stream.host.subscribeFrames(payload.serial, (frame) => writer.writeFrame(frame))
         res.on('error', teardown)
         res.on('close', teardown)
-        const latest = stream.host.latestFrame
+        const latest = stream.host.latestFrame(payload.serial)
         if (latest !== undefined) writer.writeFrame(latest)
       },
     },
@@ -465,7 +461,7 @@ function makeRoutes(engine, config, stream) {
           const serial = typeof body.device === 'string' && body.device !== '' ? body.device : stream.host.streamedSerial
           if (!serial) { writeJson(res, 409, { error: 'no device is streaming; pass a serial' }); return }
           if (!StreamAccess.SERIAL_PATTERN.test(serial)) { writeJson(res, 400, { error: 'device must be an adb device serial' }); return }
-          if (stream.host.streamedSerial !== serial) {
+          if (!stream.host.isStreaming(serial)) {
             const online = await stream.host.listDevices()
             if (!online.some((device) => device.serial === serial)) { writeJson(res, 409, { error: `device ${serial} is not online` }); return }
           }
@@ -486,9 +482,9 @@ function makeRoutes(engine, config, stream) {
         if (!fence(req, res, true) || !isPost(req, res)) return
         const body = await readBody(req, res)
         if (body === undefined) return
-        const status = stream.host.status()
-        const filter = body.device
-        const running = status.running && status.serial !== undefined && (filter === undefined || filter === '' || status.serial === filter)
+        const filter = typeof body.device === 'string' && body.device !== '' ? body.device : undefined
+        const status = stream.host.status(filter)
+        const running = status.running && status.serial !== undefined
         if (!running) { writeJson(res, 200, { ok: true, running: false }); return }
         writeJson(res, 200, { ok: true, running: true, serial: status.serial, width: status.width, height: status.height })
       },
@@ -506,11 +502,11 @@ function makeRoutes(engine, config, stream) {
             stream.host.listDevices(),
             DeviceBuild.androidAvds().catch(() => []),
           ])
-          const streamed = stream.host.streamedSerial
+          const streaming = new Set(stream.host.runningSerials())
           writeJson(res, 200, {
             ok: true,
             avds,
-            devices: devices.map((device) => ({ ...device, ...(device.serial === streamed ? { streaming: true } : {}) })),
+            devices: devices.map((device) => ({ ...device, ...(streaming.has(device.serial) ? { streaming: true } : {}) })),
           })
         } catch (error) {
           writeJson(res, 503, { code: 'devices_unavailable', error: error instanceof Error ? error.message : String(error) })
@@ -564,7 +560,7 @@ function makeRoutes(engine, config, stream) {
         const argv = DEVICE_ACTIONS[action]
         if (argv === undefined) { writeJson(res, 400, { code: 'unknown_action', error: `unknown device action "${action}"` }); return }
         if (!StreamAccess.SERIAL_PATTERN.test(serial)) { writeJson(res, 400, { code: 'bad_request', error: 'device must be an adb device serial' }); return }
-        if (serial !== stream.host.streamedSerial) {
+        if (!stream.host.isStreaming(serial)) {
           const online = await stream.host.listDevices()
           if (!online.some((device) => device.serial === serial)) { writeJson(res, 409, { code: 'device_not_found', error: `device ${serial} is not online` }); return }
         }
@@ -594,11 +590,11 @@ function makeRoutes(engine, config, stream) {
         if (action.kind === 'drag' && !(point(action.fromX, action.fromY) && point(action.toX, action.toY))) { writeJson(res, 400, { code: 'bad_request', error: 'drag needs normalized fromX,fromY,toX,toY in 0..1' }); return }
         if (action.kind === 'button' && (typeof action.name !== 'string' || action.name === '')) { writeJson(res, 400, { code: 'bad_request', error: 'button requires a non-empty name' }); return }
         if (action.kind === 'type' && (typeof action.text !== 'string' || action.text === '')) { writeJson(res, 400, { code: 'bad_request', error: 'type requires a non-empty text' }); return }
-        if (stream.host.streamedSerial !== serial) {
+        if (!stream.host.isStreaming(serial)) {
           const online = await stream.host.listDevices()
           if (!online.some((device) => device.serial === serial)) { writeJson(res, 409, { code: 'device_offline', error: `device ${serial} is not online` }); return }
         }
-        const release = stream.host.acquire()
+        const release = stream.host.acquire(serial)
         try {
           let result = { ok: true }
           switch (action.kind) {
@@ -2777,8 +2773,10 @@ function deviceStreamTool(host, access) {
   return defineTool({
     name: 'device_stream',
     description: 'Drive the live device screen stream the Devices panel shows. action=start begins the frame loop for an ' +
-      'online device and returns a signed streamUrl; status reports whether it is running; stop tears it down. This is a ' +
-      'human-panel feature — agents that just need to see the screen should use device_screen or device_ui_tree instead.',
+      'online device and returns a signed streamUrl; streams are PER-DEVICE and independent, so a co-op test can start ' +
+      'two emulators at once and the panel shows them side by side. status reports the streams; stop tears down one ' +
+      '(with serial) or all of them (without). This is a human-panel feature — agents that just need to see the screen ' +
+      'should use device_screen or device_ui_tree instead.',
     parameters: {
       action: { type: 'string', enum: ['status', 'start', 'stop'], description: 'What to do (default status).' },
       serial: { type: 'string', description: 'Device serial (start needs an online device; omit to use the first attached one).' },
@@ -2794,6 +2792,7 @@ function deviceStreamTool(host, access) {
           streamUrl: { type: 'string' },
           width: { type: 'integer' },
           height: { type: 'integer' },
+          serials: { type: 'array', description: 'All live stream serials (only when more than one device streams).' },
           presentationMeta: {
             type: 'object',
             additionalProperties: true,
@@ -2803,21 +2802,25 @@ function deviceStreamTool(host, access) {
       },
       render: (_args, value) => {
         const v = value ?? { action: 'status', running: false }
+        const multi = Array.isArray(v.serials) && v.serials.length > 1 ? ` (+${v.serials.length - 1} more: ${v.serials.filter((s) => s !== v.serial).join(', ')})` : ''
         const text = v.action === 'start' && v.streamUrl
-          ? `Streaming ${v.serial} (${v.width}x${v.height}) — ${v.streamUrl}`
-          : `Stream ${v.action}: running=${v.running}${v.serial ? ` (${v.serial})` : ''}`
+          ? `Streaming ${v.serial} (${v.width}x${v.height})${multi} — ${v.streamUrl}`
+          : `Stream ${v.action}: running=${v.running}${v.serial ? ` (${v.serial})` : ''}${v.action === 'status' && Array.isArray(v.serials) && v.serials.length > 1 ? ` streams: ${v.serials.join(', ')}` : ''}`
         return [{ type: 'text', text }]
       },
     },
     async execute(args) {
       const action = args.action ?? 'status'
       if (action === 'stop') {
-        await host.stop()
+        // 0.9.0 co-op: a serial stops one stream; without one, tear down all.
+        if (typeof args.serial === 'string' && args.serial !== '') await host.stop(args.serial)
+        else await host.stopAll()
         return { action, running: false }
       }
       if (action === 'status') {
         const s = host.status()
-        return { action, running: s.running, ...(s.serial !== undefined ? { serial: s.serial } : {}), ...(s.width !== undefined ? { width: s.width, height: s.height } : {}) }
+        const serials = host.runningSerials()
+        return { action, running: s.running, ...(s.serial !== undefined ? { serial: s.serial } : {}), ...(s.width !== undefined ? { width: s.width, height: s.height } : {}), ...(serials.length > 1 ? { serials } : {}) }
       }
       const serial = await requireAndroidDevice(args.serial)
       const online = await host.listDevices()

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