agent-device-lab 0.4.0 → 0.4.1

package/README.md

@@ -11,7 +11,7 @@ The same commands work from a terminal (`agentlab`), from an MCP server for Clau
 
 ![The dashboard after a run on the demo app: the live viewport in the centre, the timeline of actions on the left, and the findings on the right with one selected to show its evidence and reproduction steps](docs/images/dashboard.png)
 
-**Status:** Web V1 (`0.4.0`). It is tested on Linux x64 (Debian 12 and Ubuntu 24.04) with Node.js 22 and 24. macOS, Windows and arm64 are untested, and Alpine does not work. See [Limitations](#limitations).
+**Status:** Web V1 (`0.4.1`). It is tested on Linux x64 (Debian 12 and Ubuntu 24.04) with Node.js 22 and 24. macOS, Windows and arm64 are untested, and Alpine does not work. See [Limitations](#limitations).
 
 ## Install
 

package/assets/dashboard/app.js

@@ -53,6 +53,16 @@ function connect() {
   loadCapabilities();
   source = new EventSource(api('/api/events'));
   source.addEventListener('open', () => setConn('live', 'live'));
+  source.addEventListener('session-replaced', (e) => {
+    const next = JSON.parse(e.data).token;
+    if (typeof next !== 'string' || !/^[\w-]{32}$/.test(next)) return;
+    source.close();
+    setConn('reconnecting', 'new session…');
+    // Replace the fragment without keeping the expired link in history, then reload to discard
+    // the previous session's state, pending requests and cached evidence frames.
+    history.replaceState(null, '', `#token=${encodeURIComponent(next)}`);
+    location.reload();
+  });
   source.addEventListener('snapshot', (e) => {
     const snap = JSON.parse(e.data);
     model.timeline = snap.timeline;
@@ -72,9 +82,9 @@ function connect() {
   source.addEventListener('feed', (e) => apply(JSON.parse(e.data).event));
   source.addEventListener('error', () => {
     const s = model.status && model.status.state;
+    if (s === 'ended' || s === 'failed') return setConn('closed', 'session over');
     if (source.readyState === EventSource.CLOSED) {
       // The server refused the stream (e.g. 401 after a new session rotated the token) or went away.
-      if (s === 'ended' || s === 'failed') return setConn('closed', 'session over');
       setConn('denied', 'disconnected');
       checkAccess();
     } else {
@@ -270,7 +280,8 @@ function setStatus(s) {
   }
   if (s.state === 'ended' || s.state === 'failed') {
     setConn('closed', 'session over');
-    if (source) source.close();
+    // Keep the event stream attached: an MCP server can start another session and hand us its link.
+    // Frame capture still stops when the session ends.
   }
   if (s.control) { model.control = s.control; model.controlEpoch++; }
   renderControl();

package/dist/dashboard/server.js

@@ -38,7 +38,8 @@ export class Dashboard {
     token = newToken();
     /** Read-only access; this is the URL placed in start and status results that agents see. */
     viewToken = newToken();
-    events = new Set();
+    /** Each authenticated stream keeps its access level for the next session's handoff. */
+    events = new Map();
     viewers = new Set();
     lastFrame;
     cast;
@@ -63,7 +64,7 @@ export class Dashboard {
             d.server.listen(opts.port ?? 0, '127.0.0.1', () => resolve());
         });
         d.port = d.server.address().port;
-        d.heartbeat = setInterval(() => { for (const res of d.events)
+        d.heartbeat = setInterval(() => { for (const res of d.events.keys())
             res.write(': ping\n\n'); }, HEARTBEAT_MS);
         d.heartbeat.unref();
         return d;
@@ -98,16 +99,20 @@ export class Dashboard {
     // ---------- feed ----------
     onMessage(m) {
         if (m.event.type === 'reset') {
-            // A new session: previous viewers and the old tokens lose access.
+            // Rotate credentials, but let already authenticated, connected dashboards follow the new
+            // session. Send only the matching access level, outside the shared/replayable feed.
             this.token = newToken();
             this.viewToken = newToken();
+            for (const [res, control] of this.events) {
+                res.write(`event: session-replaced\ndata: ${JSON.stringify({ token: control ? this.token : this.viewToken })}\n\n`);
+            }
             this.lastFrame = undefined;
             this.endStreams();
             void this.stopCast();
             return;
         }
         const frame = `id: ${m.seq}\nevent: feed\ndata: ${JSON.stringify(m)}\n\n`;
-        for (const res of this.events)
+        for (const res of this.events.keys())
             res.write(frame);
         if (m.event.type === 'status') {
             const state = m.event.status.state;
@@ -120,7 +125,7 @@ export class Dashboard {
         }
     }
     endStreams() {
-        for (const res of [...this.events, ...this.viewers])
+        for (const res of [...this.events.keys(), ...this.viewers])
             res.end();
         this.events.clear();
         this.viewers.clear();
@@ -221,15 +226,17 @@ export class Dashboard {
             return void this.sendFile(res, this.opts.feed.sweepFrameFile(sweep[1], sweep[2]));
         res.writeHead(404).end();
     }
-    authorized(req, url) {
+    requestToken(req, url) {
         const header = req.headers.authorization;
-        const given = header?.startsWith('Bearer ') ? header.slice(7) : url.searchParams.get('token');
+        return header?.startsWith('Bearer ') ? header.slice(7) : url.searchParams.get('token');
+    }
+    authorized(req, url) {
+        const given = this.requestToken(req, url);
         return !!given && (same(given, this.token) || same(given, this.viewToken));
     }
     /** Whether this request carries the control token (the page shows control buttons only then). */
     canControl(req, url) {
-        const header = req.headers.authorization;
-        const given = header?.startsWith('Bearer ') ? header.slice(7) : url.searchParams.get('token');
+        const given = this.requestToken(req, url);
         return !!given && !!this.opts.control && same(given, this.token);
     }
     /**
@@ -321,7 +328,7 @@ export class Dashboard {
             const snap = this.opts.feed.snapshot();
             res.write(`id: ${snap.seq}\nevent: snapshot\ndata: ${JSON.stringify(snap)}\n\n`);
         }
-        this.events.add(res);
+        this.events.set(res, same(this.requestToken(req, url), this.token));
         res.on('close', () => { this.events.delete(res); });
     }
     /** MJPEG stream of the live viewport. Capture runs only while at least one of these is open. */

package/dist/mcp/server.js

@@ -22,8 +22,8 @@ export async function runMcpServer(opts) {
     const version = productVersion();
     const ui = opts.ui ?? true;
     const feed = new SessionFeed();
-    // A new session rotates the dashboard's tokens (old viewers lose access), so the person's control URL
-    // is re-published whenever one starts; it would otherwise stop working after the agent's second start.
+    // A new session rotates the dashboard's tokens. Connected tabs receive a handoff; re-publish the
+    // person's control URL too, so `agentlab ui` and newly opened tabs use the current credentials.
     let announce;
     const host = new SessionHost({
         stateDir: opts.stateDir, evidenceFrames: ui,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-device-lab",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Lets a coding agent start your web app, use it at phone, tablet or desktop size, and report what breaks, while you watch.",
   "keywords": [
     "agent",