acrylblends 1.0.9 → 1.1.0

package/lib/{snapshot-text-CBi3EMnj.js → snapshot-text-BwM6T2nG.js}

@@ -29,14 +29,16 @@ const DEFAULT_CALL_TIMEOUT_MS = 3e4;
 /** How long a page has to say it heard a read-only call before the call goes to the next page. */
 const DEFAULT_ACK_MS = 3e3;
 /**
-* The pages and who drives which. One page answers a call, chosen the same way every time: the page the Host just sent somewhere (it comes back as a new page, `prefer`), else the
-* one in front (it reports `focused`), else the most recently active; a page that did not acknowledge a call in time goes to the end of the line. An explicit desktop `window` picks its page.
+* The pages and who drives which. One page answers a call, chosen the same way every time: the page whose panel asked for the run that is making the call (`driveFor`), else the page the
+* Host just sent somewhere (it comes back as a new page, `prefer`), else the one in front (it reports `focused`), else the most recently active; a page that did not acknowledge a call in time goes to the end of the line. An explicit desktop `window` picks its page.
 */
 var UiChannel = class {
 	ackMs;
 	attachWaitMs;
 	/** The page the Host sent to a new place and that came back: it keeps being driven until the person focuses another page. */
 	preferred;
+	/** The pages whose panels have a run going, the latest last: a call with no `window` goes to the latest of them that is still connected. */
+	askers = [];
 	constructor(options = {}) {
 		this.ackMs = options.ackMs ?? DEFAULT_ACK_MS;
 		this.attachWaitMs = options.attachWaitMs ?? 0;
@@ -64,6 +66,7 @@ var UiChannel = class {
 			suspect: previous?.suspect === true
 		};
 		this.connections.set(windowId, connection);
+		if (this.askers.some((asker) => asker.windowId === windowId)) this.tell(connection, "1");
 		for (const waiter of [...this.attachWaiters]) waiter(windowId);
 		return () => {
 			if (this.connections.get(windowId) === connection) this.drop(connection, false);
@@ -104,12 +107,39 @@ var UiChannel = class {
 			...shellWindow === void 0 ? {} : { shellWindow }
 		}));
 	}
+	/**
+	* A run asked for from this page's panel is going: its calls (which name no window) are for this page, whatever else is open and whichever was driven last, until the run ends.
+	* An explicit desktop `window` still picks its own page.
+	* @returns the function to call when the run ends.
+	*/
+	driveFor(windowId) {
+		const asker = { windowId };
+		this.askers.push(asker);
+		this.tellPage(windowId, "1");
+		return () => {
+			const at = this.askers.indexOf(asker);
+			if (at === -1) return;
+			this.askers.splice(at, 1);
+			if (!this.askers.some((other) => other.windowId === asker.windowId)) this.tellPage(asker.windowId, "0");
+		};
+	}
+	tellPage(windowId, running) {
+		const connection = this.connections.get(windowId);
+		if (connection !== void 0) this.tell(connection, running);
+	}
+	tell(connection, running) {
+		try {
+			connection.stream.notify?.("run", running);
+		} catch {}
+	}
 	/** Drive this page from now on (it is the one the Host just sent to a new place), until the person focuses another. */
 	prefer(windowId) {
 		const connection = this.connections.get(windowId);
 		if (connection === void 0) return;
 		this.preferred = windowId;
 		connection.lastActive = ++this.clock;
+		for (const asker of this.askers) if (!this.connections.has(asker.windowId)) asker.windowId = windowId;
+		if (this.askers.some((asker) => asker.windowId === windowId)) this.tellPage(windowId, "1");
 	}
 	/**
 	* Ask the current page to do something. A read-only call (`look`, `wait`) that the page does not acknowledge in time goes to the next page, and the silent one is last in line
@@ -142,7 +172,7 @@ var UiChannel = class {
 			const fresh = await this.expectNewPage(this.attachWaitMs);
 			if (fresh !== void 0 && !tried.has(fresh)) return await this.call(request, options, true);
 		}
-		throw new UiControlError("timeout", `no page of the app answered within ${String(Math.round(this.ackMs / 1e3))} s: the app's pages are open but none responded. Likely causes: a tab in the background, a page that is still loading after a navigation (look again), or a page that holds the browser's six connections with event streams of its own (a page should keep to two). Bring the app's tab to the front, or navigate it, then look again`);
+		throw new UiControlError("timeout", `no page of the app answered within ${String(Math.round(this.ackMs / 1e3))} s: the app's pages are open but none responded. Likely causes: a tab in the background, a page that is still loading after a navigation (look again), a page busy running a long script, or a page that holds the browser's six connections with event streams of its own (a page should keep to two). Bring the app's tab to the front, or navigate it, then look again`);
 	}
 	callOne(target, request, options, failOver) {
 		const signal = options.signal;
@@ -258,9 +288,10 @@ var UiChannel = class {
 		for (const connection of [...this.connections.values()]) connection.stream.close();
 		this.connections.clear();
 	}
-	/** The order pages are driven in: the one the Host sent somewhere, suspect ones last, the one in front, then the most recently active. */
+	/** The order pages are driven in: the one whose panel asked, the one the Host sent somewhere, suspect ones last, the one in front, then the most recently active. */
 	ordered() {
-		const rank = (connection) => (connection.suspect ? 0 : 4) + (connection.windowId === this.preferred ? 2 : 0) + (connection.focused ? 1 : 0);
+		const asker = [...this.askers].reverse().find((entry) => this.connections.has(entry.windowId))?.windowId;
+		const rank = (connection) => (connection.suspect ? 0 : 4) + (connection.windowId === this.preferred ? 2 : 0) + (connection.focused ? 1 : 0) + (connection.windowId === asker && !connection.suspect ? 8 : 0);
 		return [...this.connections.values()].sort((a, b) => rank(b) - rank(a) || b.lastActive - a.lastActive);
 	}
 	/** Forget a connection; its calls in flight settle as `disconnected` at once rather than waiting for their timeout. */
@@ -441,6 +472,7 @@ function pageChannelRoutes(channel, options) {
 				send: (data) => {
 					write("call", data);
 				},
+				notify: write,
 				close: end
 			}, shellWindow);
 			const beat = setInterval(() => {

package/lib/vitest-binding-CctNu3jT.d.ts

@@ -0,0 +1,15 @@
+//#region src/vitest-binding.d.ts
+/**
+ * The conformance suites (`acrylblends/db/conformance`, `acrylblends/kv/conformance`) run on the test runner's own vitest, which the test hands them. In the package build their
+ * `import ... from 'vitest'` is pointed here (`tsdown.config.ts`), so the package imports no vitest and does not declare one: it cannot put vitest, vite, rolldown or lightningcss into
+ * a production install, and the suite can never see a second copy of vitest that is not the one running the test.
+ */
+/** The four functions of vitest the suites use; a test passes `import * as vitest from 'vitest'`. */
+interface VitestApi {
+  readonly afterEach: (...args: never[]) => unknown;
+  readonly describe: (...args: never[]) => unknown;
+  readonly expect: (...args: never[]) => unknown;
+  readonly it: (...args: never[]) => unknown;
+}
+//#endregion
+export { VitestApi as t };

package/lib/vitest-binding-CrH7rKg2.js

@@ -0,0 +1,17 @@
+//#region src/vitest-binding.ts
+let bound;
+/** Use `api` for the suites that run next. They register their cases synchronously, so one call per suite is enough. */
+function bind(api) {
+	if (api === void 0 || typeof api.describe !== "function" || typeof api.it !== "function" || typeof api.expect !== "function" || typeof api.afterEach !== "function") throw new Error("the conformance suite needs the vitest your tests run on: pass it as the third argument, `import * as vitest from 'vitest'` then `describeKvConformance(name, open, vitest)`");
+	bound = api;
+}
+const use = () => {
+	if (bound === void 0) throw new Error("the conformance suite ran before it was given vitest");
+	return bound;
+};
+const afterEach = (...args) => Reflect.apply(use().afterEach, void 0, args);
+const describe = (...args) => Reflect.apply(use().describe, void 0, args);
+const expect = (...args) => Reflect.apply(use().expect, void 0, args);
+const it = (...args) => Reflect.apply(use().it, void 0, args);
+//#endregion
+export { it as a, expect as i, bind as n, describe as r, afterEach as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "acrylblends",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "The Acryl web framework (import { Acryl } from \"acrylblends\") and the acrylblends command that scaffolds Cordis apps.",
   "license": "MIT",
   "type": "module",
@@ -436,7 +436,6 @@
     "@deepseek-ai/cordis": "^4.0.2",
     "@deepseek-ai/schemastery": "~3.18.4",
     "react": ">=18",
-    "vitest": ">=3",
     "ws": ">=8"
   },
   "peerDependenciesMeta": {
@@ -449,9 +448,6 @@
     "react": {
       "optional": true
     },
-    "vitest": {
-      "optional": true
-    },
     "ws": {
       "optional": true
     }

package/plugins/acryl-door/src/host/channel.ts

@@ -17,6 +17,8 @@ import {
 /** The slice of a page's stream the channel needs, so tests can supply their own. */
 export interface PageStream {
   send(data: string): void
+  /** Tell the page something that is not a call (`run`: `1` while a run asked for from its panel goes, `0` when it ends). A stream that cannot (a test's) leaves it out. */
+  notify?(event: string, data: string): void
   close(): void
 }
 
@@ -65,14 +67,16 @@ export interface ChannelOptions {
 }
 
 /**
- * The pages and who drives which. One page answers a call, chosen the same way every time: the page the Host just sent somewhere (it comes back as a new page, `prefer`), else the
- * one in front (it reports `focused`), else the most recently active; a page that did not acknowledge a call in time goes to the end of the line. An explicit desktop `window` picks its page.
+ * The pages and who drives which. One page answers a call, chosen the same way every time: the page whose panel asked for the run that is making the call (`driveFor`), else the page the
+ * Host just sent somewhere (it comes back as a new page, `prefer`), else the one in front (it reports `focused`), else the most recently active; a page that did not acknowledge a call in time goes to the end of the line. An explicit desktop `window` picks its page.
  */
 export class UiChannel {
   private readonly ackMs: number
   private readonly attachWaitMs: number
   /** The page the Host sent to a new place and that came back: it keeps being driven until the person focuses another page. */
   private preferred: string | undefined
+  /** The pages whose panels have a run going, the latest last: a call with no `window` goes to the latest of them that is still connected. */
+  private readonly askers: Array<{ windowId: string }> = []
 
   constructor(options: ChannelOptions = {}) {
     this.ackMs = options.ackMs ?? DEFAULT_ACK_MS
@@ -97,6 +101,8 @@ export class UiChannel {
     // A page that did not answer stays last in line when its stream reconnects: a tab that cannot answer reconnects just as readily, and would otherwise be first again.
     const connection: Connection = { stream, windowId, shellWindow, focused, lastActive: ++this.clock, suspect: previous?.suspect === true }
     this.connections.set(windowId, connection)
+    // A page that reloaded or came back during its own run is told the run is still going.
+    if (this.askers.some(asker => asker.windowId === windowId)) this.tell(connection, '1')
     for (const waiter of [...this.attachWaiters]) waiter(windowId)
     return () => { if (this.connections.get(windowId) === connection) this.drop(connection, false) }
   }
@@ -137,12 +143,42 @@ export class UiChannel {
     return this.ordered().map(({ windowId, focused, shellWindow }) => ({ windowId, focused, ...(shellWindow === undefined ? {} : { shellWindow }) }))
   }
 
+  /**
+   * A run asked for from this page's panel is going: its calls (which name no window) are for this page, whatever else is open and whichever was driven last, until the run ends.
+   * An explicit desktop `window` still picks its own page.
+   * @returns the function to call when the run ends.
+   */
+  driveFor(windowId: string): () => void {
+    const asker = { windowId }
+    this.askers.push(asker)
+    this.tellPage(windowId, '1')
+    return () => {
+      const at = this.askers.indexOf(asker)
+      if (at === -1) return
+      this.askers.splice(at, 1)
+      // The page keeps the bar if another run of its own is still going.
+      if (!this.askers.some(other => other.windowId === asker.windowId)) this.tellPage(asker.windowId, '0')
+    }
+  }
+
+  private tellPage(windowId: string, running: '0' | '1'): void {
+    const connection = this.connections.get(windowId)
+    if (connection !== undefined) this.tell(connection, running)
+  }
+
+  private tell(connection: Connection, running: '0' | '1'): void {
+    try { connection.stream.notify?.('run', running) } catch { /* a stream that is going away says so by closing */ }
+  }
+
   /** Drive this page from now on (it is the one the Host just sent to a new place), until the person focuses another. */
   prefer(windowId: string): void {
     const connection = this.connections.get(windowId)
     if (connection === undefined) return
     this.preferred = windowId
     connection.lastActive = ++this.clock
+    // A run's own page that reloaded or navigated comes back as a new page: the run goes on with that one.
+    for (const asker of this.askers) if (!this.connections.has(asker.windowId)) asker.windowId = windowId
+    if (this.askers.some(asker => asker.windowId === windowId)) this.tellPage(windowId, '1')
   }
 
   /**
@@ -179,7 +215,7 @@ export class UiChannel {
       const fresh = await this.expectNewPage(this.attachWaitMs)
       if (fresh !== undefined && !tried.has(fresh)) return await this.call(request, options, true)
     }
-    throw new UiControlError('timeout', `no page of the app answered within ${String(Math.round(this.ackMs / 1000))} s: the app's pages are open but none responded. Likely causes: a tab in the background, a page that is still loading after a navigation (look again), or a page that holds the browser's six connections with event streams of its own (a page should keep to two). Bring the app's tab to the front, or navigate it, then look again`)
+    throw new UiControlError('timeout', `no page of the app answered within ${String(Math.round(this.ackMs / 1000))} s: the app's pages are open but none responded. Likely causes: a tab in the background, a page that is still loading after a navigation (look again), a page busy running a long script, or a page that holds the browser's six connections with event streams of its own (a page should keep to two). Bring the app's tab to the front, or navigate it, then look again`)
   }
 
   private callOne(target: Connection, request: UiRequest, options: { signal?: AbortSignal; timeoutMs?: number }, failOver: boolean): Promise<UiResult> {
@@ -263,9 +299,11 @@ export class UiChannel {
     this.connections.clear()
   }
 
-  /** The order pages are driven in: the one the Host sent somewhere, suspect ones last, the one in front, then the most recently active. */
+  /** The order pages are driven in: the one whose panel asked, the one the Host sent somewhere, suspect ones last, the one in front, then the most recently active. */
   private ordered(): Connection[] {
-    const rank = (connection: Connection): number => (connection.suspect ? 0 : 4) + (connection.windowId === this.preferred ? 2 : 0) + (connection.focused ? 1 : 0)
+    // The latest asker that is still connected; a page that went away is skipped, and the run goes on with whatever is open.
+    const asker = [...this.askers].reverse().find(entry => this.connections.has(entry.windowId))?.windowId
+    const rank = (connection: Connection): number => (connection.suspect ? 0 : 4) + (connection.windowId === this.preferred ? 2 : 0) + (connection.focused ? 1 : 0) + (connection.windowId === asker && !connection.suspect ? 8 : 0)
     return [...this.connections.values()].sort((a, b) => rank(b) - rank(a) || b.lastActive - a.lastActive)
   }
 

package/plugins/acryl-door/src/host/door.ts

@@ -90,6 +90,11 @@ export class Door {
     this.deps = deps
   }
 
+  /** A run asked for from the panel of this page is going: its verbs that name no window are for that page. @returns the function to call when the run ends. */
+  driveFor(windowId: string): () => void {
+    return this.deps.channel.driveFor(windowId)
+  }
+
   /** Run one verb. @throws DoorError or UiControlError. */
   async run(verb: string, args: unknown, signal: AbortSignal): Promise<VerbAnswer> {
     const input = (typeof args === 'object' && args !== null && !Array.isArray(args) ? args : {}) as Record<string, unknown>

package/plugins/acryl-door/src/host/page-routes.ts

@@ -43,7 +43,7 @@ export function pageChannelRoutes(channel: UiChannel, options: PageRoutesOptions
         const write = (event: string, data: string): void => {
           stream.writeSSE({ event, data }).catch(end)
         }
-        const detach = channel.attach(windowId, focused, { send: (data) => { write('call', data) }, close: end }, shellWindow)
+        const detach = channel.attach(windowId, focused, { send: (data) => { write('call', data) }, notify: write, close: end }, shellWindow)
         const beat = setInterval(() => { write('ping', '') }, heartbeatMs)
         try {
           write('ready', '')

package/plugins/acryl-door/src/host/page-socket.ts

@@ -55,7 +55,7 @@ export function pageSocketRoutes(channel: UiChannel, options: PageSocketOptions)
             ws.send(JSON.stringify(frame))
           }
           // A call that cannot be written fails at once (`disconnected`), and a socket that is gone is dropped by its close: the door never holds a call for it.
-          detach = channel.attach(windowId, focused, { send: data => { write({ e: 'call', d: data }) }, close: () => { ws.close(1000, 'replaced') } }, shellWindow)
+          detach = channel.attach(windowId, focused, { send: data => { write({ e: 'call', d: data }) }, notify: (event, data) => { write({ e: event, d: data }) }, close: () => { ws.close(1000, 'replaced') } }, shellWindow)
           write({ e: 'ready' })
           beat = setInterval(() => {
             try { write({ e: 'ping' }) } catch { /* the close event follows */ }

package/plugins/acryl-door/src/page/channel.ts

@@ -41,6 +41,8 @@ export interface PageChannelOptions {
   readonly post?: (url: string, body: string) => Promise<unknown>
   readonly silenceMs?: number
   readonly now?: () => number
+  /** The Host says a run asked for from this page's panel started (`true`) or ended (`false`); false too when the stream is lost, until the Host says again. */
+  readonly onRun?: (running: boolean) => void
 }
 
 export class PageChannel {
@@ -85,6 +87,10 @@ export class PageChannel {
       heard()
     })
     source.addEventListener('ping', heard)
+    source.addEventListener('run', (event) => {
+      heard()
+      this.options.onRun?.(event.data === '1')
+    })
     source.addEventListener('call', (event) => {
       heard()
       if (typeof event.data === 'string') this.answer(event.data)
@@ -158,6 +164,8 @@ export class PageChannel {
     if (source !== undefined) {
       source.onerror = null
       source.close()
+      // Without the stream the page cannot hear the run end: the Host says again if it is still going, once the stream is back.
+      this.options.onRun?.(false)
     }
   }
 

package/plugins/acryl-door/src/page/driver/driver.ts

@@ -19,6 +19,8 @@ export const LEAVE_DELAY_MS = 150
 export interface DriverActivity {
   /** True from the moment a call starts until it ends. */
   readonly busy: boolean
+  /** True from the moment a run asked for from this page's panel starts until it ends, between the calls too. */
+  readonly running: boolean
   /** What the agent is doing, for the indicator ("click", "type", ...). */
   readonly doing: string
   /** True after the user pressed the kill switch. */
@@ -53,7 +55,8 @@ export class UiDriver {
   private disposed = false
   private busyCount = 0
   private doing = ''
-  private current: DriverActivity = { busy: false, doing: '', killed: false }
+  private current: DriverActivity = { busy: false, running: false, doing: '', killed: false }
+  private runningFlag = false
 
   private readonly options: UiDriverOptions
 
@@ -82,6 +85,17 @@ export class UiDriver {
     this.emit()
   }
 
+  /**
+   * A run asked for from this page's panel starts (`true`) or ends (`false`). The indicator stays up for the whole run, not only while a call is in flight. A new run is a new
+   * question from the person, so it also allows the agent to drive again after an earlier Stop.
+   */
+  setRunning(running: boolean): void {
+    if (running === this.runningFlag) return
+    this.runningFlag = running
+    if (running) this.killedFlag = false
+    this.emit()
+  }
+
   /** The user allowed the agent to drive again. */
   resume(): void {
     this.killedFlag = false
@@ -165,8 +179,8 @@ export class UiDriver {
   }
 
   private emit(): void {
-    const next: DriverActivity = { busy: this.busyCount > 0, doing: this.doing, killed: this.killedFlag }
-    if (next.busy === this.current.busy && next.doing === this.current.doing && next.killed === this.current.killed) return
+    const next: DriverActivity = { busy: this.busyCount > 0, running: this.runningFlag, doing: this.doing, killed: this.killedFlag }
+    if (next.busy === this.current.busy && next.running === this.current.running && next.doing === this.current.doing && next.killed === this.current.killed) return
     this.current = next
     const activity = next
     for (const listener of [...this.listeners]) listener(activity)

package/plugins/acryl-door/src/page/index.ts

@@ -11,6 +11,9 @@ import { UserInputClock } from './user-input.ts'
 
 export const DOOR_BASE = '/api/acryl-door'
 
+/** The key on the page's `window` under which the door publishes `{ windowId }`: the agent panel in the same page sends it with a question, and the door drives that page for the run. */
+export const PAGE_KEY = Symbol.for('acryl.door.page')
+
 /** Start the door on `document`. @returns the disposer. */
 export function startDoor(document: Document, base: string = DOOR_BASE): () => void {
   const view = document.defaultView
@@ -18,6 +21,7 @@ export function startDoor(document: Document, base: string = DOOR_BASE): () => v
   const clock = new UserInputClock()
   const driver = new UiDriver({ document: () => document, msSinceUserInput: clock.msSince })
   const windowId = typeof view.crypto?.randomUUID === 'function' ? view.crypto.randomUUID() : `w-${String(Date.now())}-${String(Math.random()).slice(2, 8)}`
+  Object.defineProperty(view, PAGE_KEY, { value: Object.freeze({ windowId }), configurable: true })
   const focused = (): boolean => document.visibilityState === 'visible' && document.hasFocus()
   const detachInput = clock.attach(document)
   const removeIndicator = mountIndicator(driver, document)
@@ -30,7 +34,7 @@ export function startDoor(document: Document, base: string = DOOR_BASE): () => v
       return 'auto'
     }
   })()
-  const channel = new PageChannel(driver, { windowId, focused, base, transport, ...(Number.isSafeInteger(shellWindow) && shellWindow > 0 ? { shellWindow } : {}) })
+  const channel = new PageChannel(driver, { windowId, focused, base, transport, onRun: running => { driver.setRunning(running) }, ...(Number.isSafeInteger(shellWindow) && shellWindow > 0 ? { shellWindow } : {}) })
   const reportFocus = (): void => { channel.reportFocus(focused()) }
   view.addEventListener('focus', reportFocus)
   view.addEventListener('blur', reportFocus)
@@ -47,6 +51,7 @@ export function startDoor(document: Document, base: string = DOOR_BASE): () => v
     view.removeEventListener('pagehide', leave)
     view.removeEventListener('pageshow', back)
     document.removeEventListener('visibilitychange', reportFocus)
+    Reflect.deleteProperty(view, PAGE_KEY)
     channel.dispose()
     removeIndicator()
     detachInput()

package/plugins/acryl-door/src/page/indicator.ts

@@ -1,6 +1,7 @@
 /**
- * "The agent is driving" bar with its kill switch, in plain DOM (the React one in `acryl-agent-control` shows the same states). Shown while
- * a call runs and after the person stopped the agent. It is marked as driver UI (so snapshots skip it) and as off limits to the agent (so
+ * "The agent is driving" bar with its kill switch, in plain DOM (the React one in `acryl-agent-control` shows the same states). Shown for the whole of a run asked for from
+ * this page's panel (between the calls too), while a call runs, and after the person stopped the agent. Stop kills the page's control and asks the panel to stop the run (the
+ * `acryl:stop-run` event on the window, which the panel listens for). It is marked as driver UI (so snapshots skip it) and as off limits to the agent (so
  * it can never press its own Stop or Allow buttons). Escape stops the agent too, while it is working.
  */
 
@@ -8,6 +9,9 @@ import type { DriverActivity, UiDriver } from './driver/driver.ts'
 
 const LABELS: Record<string, string> = { snapshot: 'looking at the page', click: 'clicking', type: 'typing', select: 'choosing an option', press: 'pressing a key', scroll: 'scrolling', wait: 'waiting' }
 
+/** Dispatched on the page's window by the Stop button: the agent panel in the same page cancels its run. */
+export const STOP_RUN_EVENT = 'acryl:stop-run'
+
 const STYLE_ID = 'acryl-door-indicator-style'
 const STYLES = `
 .acrylDoorBar { position: fixed; z-index: 2147483647; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
@@ -32,13 +36,17 @@ export function mountIndicator(driver: UiDriver, document: Document): () => void
   bar.setAttribute('role', 'status')
   bar.setAttribute('aria-live', 'polite')
 
+  const stopAgent = (): void => {
+    driver.kill()
+    document.defaultView?.dispatchEvent(new CustomEvent(STOP_RUN_EVENT))
+  }
   const onKey = (event: KeyboardEvent): void => {
-    if (event.key === 'Escape' && event.isTrusted && driver.activity.busy) driver.kill()
+    if (event.key === 'Escape' && event.isTrusted && (driver.activity.busy || driver.activity.running)) stopAgent()
   }
   document.addEventListener('keydown', onKey, true)
 
   const render = (activity: DriverActivity): void => {
-    if (!activity.busy && !activity.killed) { bar.remove(); return }
+    if (!activity.busy && !activity.running && !activity.killed) { bar.remove(); return }
     const button = document.createElement('button')
     button.type = 'button'
     const text = document.createElement('span')
@@ -53,9 +61,9 @@ export function mountIndicator(driver: UiDriver, document: Document): () => void
       const dot = document.createElement('span')
       dot.className = 'acrylDoorDot'
       dot.setAttribute('aria-hidden', 'true')
-      text.textContent = `Agent is driving: ${LABELS[activity.doing] ?? activity.doing}`
+      text.textContent = `Agent is driving: ${activity.busy ? (LABELS[activity.doing] ?? activity.doing) : 'working on your request'}`
       button.textContent = 'Stop'
-      button.addEventListener('click', () => { driver.kill() })
+      button.addEventListener('click', stopAgent)
       bar.replaceChildren(dot, text, button)
     }
     if (!bar.isConnected) document.body.append(bar)

package/plugins/acryl-state/plugin.json

@@ -1,13 +1,14 @@
 {
   "name": "acryl-state",
-  "description": "Observable cells and derived cells, shared state with JSON and server-sent event routes on the router. Vendored from ACRYL.",
+  "description": "Observable cells and derived cells, shared state with JSON, server-sent event and WebSocket routes on the router, and a browser module (watch) that follows keys over one socket. Vendored from ACRYL.",
   "requires": ["acryl-router"],
   "inject": ["router"],
   "provides": ["state"],
   "dependencies": {
-    "@deepseek-ai/cordis": "4.0.4"
+    "@deepseek-ai/cordis": "4.0.4",
+    "ws": "8.21.3"
   },
-  "mount": "root.plugin(state); ctx.state.cell('todos.count', 0), then count.update((n) => n + 1)",
+  "mount": "root.plugin(state); ctx.state.cell('todos.count', 0), then count.update((n) => n + 1); a page follows it with import { watch } from '/api/state/client.js'; watch('todos.count', (n) => { ... })",
   "omit": ["src/react.ts", "**/*.test.*", "**/*.case.ts"],
   "entries": {
     "": "src/index.ts",