acrylblends 1.0.3 → 1.0.4

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

@@ -15,8 +15,8 @@ import { dirname, join, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { readDoorFile, STATE_DIR, DOOR_FILE } from '../host/door-file.ts'
 
-const ACT_OPS = new Set(['click', 'type', 'select', 'press', 'scroll', 'wait'])
-const VALUED = new Set(['--dir', '--ref', '--text', '--option', '--key', '--direction', '--amount', '--cursor', '--max-nodes', '--role', '--name', '--timeout-ms', '--tool', '--args'])
+const ACT_OPS = new Set(['click', 'type', 'select', 'press', 'scroll', 'wait', 'reload', 'navigate'])
+const VALUED = new Set(['--dir', '--ref', '--text', '--option', '--key', '--direction', '--amount', '--cursor', '--max-nodes', '--role', '--name', '--timeout-ms', '--tool', '--args', '--path'])
 const FLAGS = new Set(['--json', '--submit', '--no-clear', '--gone', '--help'])
 
 export class UsageError extends Error {}
@@ -36,6 +36,8 @@ const USAGE = `usage: acryl <verb> [options] [--json] [--dir <app folder>]
   act select --ref <r> --option <o>
   act press --key <key> [--ref <r>]
   act scroll --direction up|down|left|right [--ref <r>] [--amount <px>]
+  act reload
+  act navigate --path <path of the app, e.g. /demo>
   act wait (--text <t> | --role <role> [--name <n>]) [--gone] [--timeout-ms <ms>]
   plugin list | plugin add <folder> | plugin remove <name> | plugin reload
   tool list | tool call --tool <name> [--args '<json>']
@@ -90,7 +92,7 @@ export function parseInvocation(argv: readonly string[]): Invocation {
       return make('act', {
         op: second,
         ...pick('--ref', 'ref'), ...pick('--text', 'text'), ...pick('--option', 'option'), ...pick('--key', 'key'),
-        ...pick('--direction', 'direction'), ...pick('--role', 'role'), ...pick('--name', 'name'),
+        ...pick('--direction', 'direction'), ...pick('--role', 'role'), ...pick('--name', 'name'), ...pick('--path', 'path'),
         ...(amount === undefined ? {} : { amount }),
         ...(timeoutMs === undefined ? {} : { timeoutMs }),
         ...(set.has('--submit') ? { submit: true } : {}),

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

@@ -45,6 +45,8 @@ export class UiChannel {
   private nextId = 1
   private clock = 0
   private closed = false
+  /** Callers waiting for a page to (re)connect: each is told once, by the next stream that attaches. */
+  private readonly attachWaiters = new Set<() => void>()
 
   /**
    * Register a page's stream. A stream already open for the same window is closed first, and its calls settle as `disconnected`.
@@ -55,6 +57,7 @@ export class UiChannel {
     if (previous !== undefined) this.drop(previous, true)
     const connection: Connection = { stream, windowId, focused, lastActive: ++this.clock }
     this.connections.set(windowId, connection)
+    for (const waiter of [...this.attachWaiters]) waiter()
     return () => { if (this.connections.get(windowId) === connection) this.drop(connection, false) }
   }
 
@@ -109,6 +112,39 @@ export class UiChannel {
     })
   }
 
+  /**
+   * A promise for the next time a page connects (a page that reloaded or moved opens a new stream). Ask for it BEFORE the call that makes the page leave, or a fast page is missed.
+   * @returns whether a page connected within `timeoutMs`.
+   */
+  expectAttach(timeoutMs: number, count = 1): Promise<boolean> {
+    return new Promise((resolve) => {
+      let left = count
+      const done = (value: boolean): void => { clearTimeout(timer); this.attachWaiters.delete(waiter); resolve(value) }
+      const waiter = (): void => { left -= 1; if (left <= 0) done(true) }
+      const timer = setTimeout(() => { done(false) }, timeoutMs)
+      this.attachWaiters.add(waiter)
+    })
+  }
+
+  /**
+   * Ask every connected page to reload (the app just changed under them) and wait, up to `timeoutMs`, for them to come back. Best effort: a page that does not come back
+   * (it was closed, or it moved to a page without the door) is not an error here.
+   * @returns how many pages were asked.
+   */
+  async reloadAll(timeoutMs = 8000): Promise<number> {
+    const targets = this.byRecency()
+    if (this.closed || targets.length === 0) return 0
+    const back = this.expectAttach(timeoutMs, targets.length)
+    for (const target of targets) {
+      const id = this.nextId
+      this.nextId += 1
+      // No call is waiting for the answer: the page answers by POST and the Host ignores an id it does not know.
+      try { target.stream.send(JSON.stringify({ t: 'call', id, request: { op: 'reload' } } satisfies ChannelToPage)) } catch { /* that page is gone */ }
+    }
+    await back
+    return targets.length
+  }
+
   /** Close every page's stream and settle every pending call as `unloaded`. */
   close(): void {
     this.closed = true

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

@@ -50,6 +50,10 @@ export interface DoorDeps {
   readonly tools: () => ToolsPort | undefined
   /** The app tools the door offers; anything else is refused before it reaches the registry. */
   readonly expose: readonly string[]
+  /** Reload the open pages after a plugin was added, removed or reloaded, so the page an agent looks at next is the new one. Default: true. */
+  readonly reloadOnChange?: boolean
+  /** How long a reload or a move may take before the new page has connected again (tests shorten it). Default 15 s. */
+  readonly pageBackMs?: number
 }
 
 /** What one verb answered: the value for `--json` and programs, the text for an agent reading a terminal. */
@@ -61,6 +65,9 @@ export interface VerbAnswer {
 /** The files an agent should read first, when the app has them. */
 const SELF_KNOWLEDGE = ['AGENTS.md', 'CLAUDE.md', '.agents/skills', '.claude/skills', 'docs', 'plugins']
 
+/** How long a reload or a move may take before the new page has connected to the door again. */
+const PAGE_BACK_MS = 15_000
+
 export class Door {
   private readonly deps: DoorDeps
 
@@ -81,7 +88,7 @@ export class Door {
         const result = await this.act(input, signal)
         return { value: result, text: `done${result.target === undefined ? '' : `: ${result.target.role} "${result.target.name}"`}${result.detail === undefined ? '' : ` (${result.detail})`}; look again before the next act` }
       }
-      case 'plugin-list': return this.plugin(extensions => extensions.list())
+      case 'plugin-list': return this.plugin(extensions => extensions.list(), false)
       case 'plugin-add': return this.plugin(extensions => extensions.install(this.insideApp(input.folder)))
       case 'plugin-remove': {
         const name = input.name
@@ -127,9 +134,21 @@ export class Door {
     return this.callPage('look', request, signal) as Promise<UiSnapshot>
   }
 
-  act(input: Record<string, unknown>, signal: AbortSignal): Promise<UiActionResult> {
+  async act(input: Record<string, unknown>, signal: AbortSignal): Promise<UiActionResult> {
     if (input.op === 'snapshot') throw new DoorError('invalid', 'use look to see the page')
-    return this.callPage(`act ${String(input.op)}`, this.parse(input), signal) as Promise<UiActionResult>
+    const request = this.parse(input)
+    if (request.op !== 'reload' && request.op !== 'navigate') return await this.callPage(`act ${String(input.op)}`, request, signal) as UiActionResult
+    // The page is replaced: wait for the new one to connect, so the next look sees it. The page may drop before it has answered; that is the reload working.
+    const back = this.deps.channel.expectAttach(this.deps.pageBackMs ?? PAGE_BACK_MS)
+    let answer: UiActionResult
+    try {
+      answer = await this.callPage(`act ${request.op}`, request, signal) as UiActionResult
+    } catch (cause) {
+      if (!(cause instanceof UiControlError && cause.code === 'disconnected')) { void back; throw cause }
+      answer = { ok: true, detail: request.op === 'reload' ? 'reloading' : `going to ${request.path}` }
+    }
+    if (!await back) throw new UiControlError('timeout', request.op === 'reload' ? 'the page did not come back after the reload' : `the page did not come back after going to ${request.path}: is there a page at that path, and does it load the door's script?`)
+    return { ...answer, detail: `${answer.detail ?? 'done'}; the page is back: look again` }
   }
 
   private parse(input: Record<string, unknown>): UiRequest {
@@ -156,10 +175,13 @@ export class Door {
     }
   }
 
-  private async plugin(run: (extensions: ExtensionsPort) => unknown): Promise<VerbAnswer> {
+  private async plugin(run: (extensions: ExtensionsPort) => unknown, mutates = true): Promise<VerbAnswer> {
     const extensions = this.deps.extensions()
     if (extensions === undefined) throw new DoorError('unavailable', 'this app has no extensions plugin, so plugins cannot be installed while it runs')
     const value = await run(extensions)
+    // The app changed under the open pages: reload them (not when the plugin was already as it should be), and answer once they are back.
+    const unchanged = typeof value === 'object' && value !== null && (value as { action?: unknown }).action === 'unchanged'
+    if (mutates && !unchanged && this.deps.reloadOnChange !== false) await this.deps.channel.reloadAll()
     return { value, text: JSON.stringify(value, null, 2) }
   }
 

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

@@ -7,6 +7,7 @@
  * app is running in the folder (exit 3). It carries no secret; the client reads `door.json` at each call.
  */
 
+import { spawnSync } from 'node:child_process'
 import { chmodSync, mkdirSync, renameSync, writeFileSync } from 'node:fs'
 import { join } from 'node:path'
 import { ensureStateDir } from './door-file.ts'
@@ -25,6 +26,28 @@ export interface ShimTarget {
   readonly electron: boolean
 }
 
+/** The oldest Node the client runs on (the framework's own floor). */
+const MIN_NODE = [22, 19]
+
+/**
+ * A real Node for the command, when the app runs inside Electron: Electron can run the client as Node, but on macOS every such call prints a code-signing complaint on stderr,
+ * which lands in an agent's transcript. A `node` on the PATH that is new enough is used instead; without one, Electron runs the client. `find` is replaceable for tests.
+ */
+export function realNode(find: () => { path: string; version: string } | undefined = findNodeOnPath): string | undefined {
+  const found = find()
+  if (found === undefined) return undefined
+  const [major = 0, minor = 0] = found.version.replace(/^v/u, '').split('.').map(Number)
+  return major > MIN_NODE[0]! || (major === MIN_NODE[0] && minor >= MIN_NODE[1]!) ? found.path : undefined
+}
+
+function findNodeOnPath(): { path: string; version: string } | undefined {
+  const located = spawnSync(process.platform === 'win32' ? 'where' : 'which', ['node'], { encoding: 'utf8', env: { ...process.env, ELECTRON_RUN_AS_NODE: undefined } })
+  const path = located.status === 0 ? located.stdout.split(/\r?\n/u).find((line) => line.trim() !== '')?.trim() : undefined
+  if (path === undefined) return undefined
+  const asked = spawnSync(path, ['--version'], { encoding: 'utf8' })
+  return asked.status === 0 ? { path, version: asked.stdout.trim() } : undefined
+}
+
 /** A word for `sh`: single-quoted, with each `'` closed, escaped and reopened. */
 function shWord(value: string): string {
   return `'${value.replaceAll('\'', '\'\\\'\'')}'`

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

@@ -47,12 +47,13 @@ export const VERB_SPECS: Readonly<Record<Verb, VerbSpec>> = {
     },
   },
   'act': {
-    usage: 'act click|type|select|press|scroll|wait ...: do one thing on the page (refs from the latest look)',
-    description: 'Do one thing on the page: click, type, select, press a key, scroll, or wait for text or a control. Look again before the next act.',
+    usage: 'act click|type|select|press|scroll|wait|reload|navigate ...: do one thing on the page (refs from the latest look)',
+    description: 'Do one thing on the page: click, type, select, press a key, scroll, wait for text or a control, reload the page, or navigate to another path of the app. Look again before the next act.',
     arguments: {
       type: 'object',
       properties: {
-        op: { type: 'string', enum: ['click', 'type', 'select', 'press', 'scroll', 'wait'] },
+        op: { type: 'string', enum: ['click', 'type', 'select', 'press', 'scroll', 'wait', 'reload', 'navigate'] },
+        path: { type: 'string', description: 'navigate: a path of this app, e.g. /demo (the page must load the door script to be controlled afterwards)' },
         ref,
         text: { type: 'string', description: 'type: what to type; wait: the text to wait for' },
         submit: { type: 'boolean', description: 'type: press Enter after' },

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

@@ -23,7 +23,7 @@ import { DOOR_PREFIX, privateApi } from './host/http.ts'
 import { mcpRoutes } from './host/mcp-routes.ts'
 import { operatorRoutes } from './host/operator-routes.ts'
 import { pageChannelRoutes } from './host/page-routes.ts'
-import { writeShims, type ShimTarget } from './host/shim.ts'
+import { realNode, writeShims, type ShimTarget } from './host/shim.ts'
 
 /** Stable Cordis plugin name, equal to the package name and the Loader row id. */
 export const name = 'acryl-door'
@@ -54,10 +54,13 @@ export interface Config {
    * run it in production (a packaged desktop app whose user drives it with an agent) says so here; `ACRYL_DOOR=off` still wins.
    */
   allowInProduction?: boolean
+  /** Reload the open pages after a live plugin change, so an agent that built a feature sees it on the page it has open. Default: true. */
+  reloadOnChange?: boolean
 }
 
 export const Config: z<Config> = z.object({
   allowInProduction: z.boolean().default(false).description('Run in production too (NODE_ENV=production); ACRYL_DOOR=off still turns it off.'),
+  reloadOnChange: z.boolean().default(true).description('Reload the open pages after a plugin was added, removed or reloaded while the app runs.'),
   tools: z.object({
     // Not a `door_` name: those are the door's own verbs in the registry, never offered back as app tools.
     expose: z.array(z.string().pattern(/^(?!door_)[A-Za-z][A-Za-z0-9_-]{0,63}$/u)).description('App tools (from the tools registry) the door offers; none by default.'),
@@ -73,11 +76,14 @@ const CLIENT = import.meta.url.endsWith('.ts') ? join(import.meta.dirname, 'cli'
 /** How the folder's `.acryl/bin/acryl` starts the client: with the Node that runs the app, and its type-stripping flag when run from source. */
 function shimTarget(): ShimTarget {
   const fromSource = CLIENT.endsWith('.ts')
+  const inElectron = process.versions.electron !== undefined
+  // Inside Electron the command prefers a real Node (no code-signing noise on every call); without one, Electron runs the client.
+  const node = inElectron ? realNode() : undefined
   return {
-    node: process.execPath,
+    node: node ?? process.execPath,
     nodeOptions: fromSource ? process.execArgv.filter(option => /^--experimental-(strip|transform)-types$/u.test(option)) : [],
     client: CLIENT,
-    electron: process.versions.electron !== undefined,
+    electron: inElectron && node === undefined,
   }
 }
 
@@ -108,12 +114,29 @@ export function apply(ctx: Context, rawConfig: Config = {}): void {
     extensions: () => ctx.get('extensions') as unknown as ExtensionsPort | undefined,
     tools: () => ctx.get('tools') as unknown as ToolsPort | undefined,
     expose: config.tools?.expose ?? [],
+    reloadOnChange: config.reloadOnChange !== false,
   })
   ctx.effect(() => () => { channel.close() }, 'acryl-door: page channel')
   // One script tag for the page (`page.js`): it imports the module tree served below it.
   const pageModule = new Acryl()
     .get(`${DOOR_PREFIX}/page.js`, c => c.body(`import '${DOOR_PREFIX}/page/main.ts'\n`, 200, { 'content-type': 'text/javascript; charset=utf-8' }))
     .route(`${DOOR_PREFIX}/page`, clientModules({ root: PAGE_DIR }))
+  // The page script on every HTML page the app answers, whenever its plugin was mounted (the pages of a plugin that loaded at boot, before this one, included): a page an agent writes
+  // can be looked at and driven without anyone adding the tag. A page that already carries it (the templates' own pages) is left as it is. Development only, like the rest of the door.
+  const tag = `<script type="module" src="${DOOR_PREFIX}/page.js"></script>`
+  const addScript = async (c: { res: Response }, next: () => Promise<void>): Promise<void> => {
+    await next()
+    if (!(c.res.headers.get('content-type') ?? '').includes('text/html')) return
+    const html = await c.res.text()
+    const headers = new Headers(c.res.headers)
+    headers.delete('content-length')
+    const carries = html.includes(`${DOOR_PREFIX}/page.js`)
+    c.res = new Response(carries ? html : html.includes('</body>') ? html.replace('</body>', `${tag}</body>`) : html + tag, { status: c.res.status, headers })
+  }
+  const router = ctx.router as unknown as { wrap?: (middleware: typeof addScript) => unknown }
+  // An app whose router copy is older than this plugin has no `wrap`: the middleware then covers the routes mounted after the door, as the agent panel's does.
+  if (typeof router.wrap === 'function') router.wrap(addScript)
+  else ctx.router.route('/', new Acryl().use('*', addScript as never))
   ctx.router.route('/', privateApi(
     DOOR_PREFIX,
     pageModule,

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

@@ -5,7 +5,7 @@
  * shows. It touches only the document it is given, never another window and never the OS.
  */
 
-import { UiControlError, MUTATING_OPS, type UiRequest, type UiResult } from '../protocol.ts'
+import { UiControlError, MUTATING_OPS, type UiActionResult, type UiRequest, type UiResult } from '../protocol.ts'
 import { click, pressKey, scroll, selectOption, typeText, wait, type ActionEnvironment } from './actions.ts'
 import { RefTable } from './ref-table.ts'
 import { SnapshotBuilder } from './snapshot.ts'
@@ -13,6 +13,8 @@ import { SnapshotBuilder } from './snapshot.ts'
 /** After the user touches the page, agent actions wait this long, so the user always wins. */
 const YIELD_MS = 400
 const MAX_YIELD_MS = 2000
+/** How long after the answer a reload or a move starts, so the answer is on its way first. */
+export const LEAVE_DELAY_MS = 150
 
 export interface DriverActivity {
   /** True from the moment a call starts until it ends. */
@@ -28,6 +30,8 @@ export interface UiDriverOptions {
   /** Milliseconds since the user last used the page (mouse, keyboard); Infinity when never. */
   readonly msSinceUserInput?: () => number
   readonly sleep?: (ms: number, signal: AbortSignal) => Promise<void>
+  /** Leave the page: reload it, or go to a path of the app. Default: the document's own `location`, a moment after the answer is sent. */
+  readonly leave?: (to: { readonly reload: true } | { readonly path: string }) => void
 }
 
 function realSleep(ms: number, signal: AbortSignal): Promise<void> {
@@ -130,9 +134,26 @@ export class UiDriver {
       case 'press': return pressKey(this.env, request)
       case 'scroll': return scroll(this.env, request)
       case 'wait': return wait(this.env, request, signal)
+      case 'reload': return this.leave({ reload: true }, 'reloading')
+      case 'navigate': return this.leave({ path: request.path }, `going to ${request.path}`)
     }
   }
 
+  /**
+   * The page is about to be replaced, so the answer is given first and the move happens a moment later (the answer is a POST that the page's own unload would cut off).
+   * The Host does not wait for this answer to be the last word: it waits for the page to come back.
+   */
+  private leave(to: { readonly reload: true } | { readonly path: string }, detail: string): UiActionResult {
+    const go = this.options.leave ?? ((target) => {
+      const location = this.options.document().defaultView?.location
+      if (location === undefined) return
+      if ('reload' in target) location.reload()
+      else location.assign(target.path)
+    })
+    setTimeout(() => { if (!this.disposed) go(to) }, LEAVE_DELAY_MS)
+    return { ok: true, detail }
+  }
+
   private async yieldToUser(signal: AbortSignal): Promise<void> {
     const since = this.options.msSinceUserInput
     if (since === undefined) return

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

@@ -7,11 +7,14 @@
  */
 
 /** The operations the driver performs on the page. */
-export const UI_OPS = ['snapshot', 'click', 'type', 'select', 'press', 'scroll', 'wait'] as const
+export const UI_OPS = ['snapshot', 'click', 'type', 'select', 'press', 'scroll', 'wait', 'reload', 'navigate'] as const
 export type UiOp = (typeof UI_OPS)[number]
 
 /** Operations that change the page, so each call needs approval. `snapshot`, `scroll` and `wait` only look. */
-export const MUTATING_OPS: readonly UiOp[] = ['click', 'type', 'select', 'press']
+export const MUTATING_OPS: readonly UiOp[] = ['click', 'type', 'select', 'press', 'reload', 'navigate']
+
+/** A place in the app to go to: a path on the page's own origin (`/demo`, `/notes?q=a#top`), never another site and never a `//host` address. */
+export const APP_PATH = /^\/(?![/\\])[^\0\\]{0,2000}$/u
 
 export const MAX_TEXT_LENGTH = 10_000
 export const MAX_WAIT_MS = 10_000
@@ -77,6 +80,8 @@ export type UiRequest =
   | { readonly op: 'press'; readonly key: string; readonly ref?: string }
   | { readonly op: 'scroll'; readonly direction: 'up' | 'down' | 'left' | 'right'; readonly ref?: string; readonly amount?: number }
   | { readonly op: 'wait'; readonly text?: string; readonly role?: string; readonly name?: string; readonly gone?: boolean; readonly timeoutMs?: number }
+  | { readonly op: 'reload' }
+  | { readonly op: 'navigate'; readonly path: string }
 
 /** What the page did, and to which control (for the audit log and the approval prompt). */
 export interface UiActionResult {
@@ -164,6 +169,12 @@ export function parseUiRequest(value: unknown): UiRequest {
         ...(timeoutMs === undefined ? {} : { timeoutMs }),
       }
     }
+    case 'reload': only([]); return { op }
+    case 'navigate': {
+      only(['path'])
+      if (typeof value.path !== 'string' || !APP_PATH.test(value.path)) return invalid('path must be a path of this app, such as /demo (it starts with one /, and names no other site)')
+      return { op, path: value.path }
+    }
     default: return invalid(`unknown op ${String(op)}`)
   }
 }

package/plugins/acryl-router/src/service.ts

@@ -94,6 +94,8 @@ interface Mount {
 
 interface RouterState {
   readonly mounts: Set<Mount>
+  /** Middleware around every request, whenever it was added (see {@link Router.wrap}). */
+  readonly wrappers: Set<H>
   errorHandler: ErrorHandler | undefined
   notFoundHandler: NotFoundHandler | undefined
   /** The app composed from the live mounts; dropped on every change and composed again by the next request. */
@@ -125,7 +127,7 @@ async function drain(tasks: readonly Promise<unknown>[]): Promise<void> {
 
 export class Router extends Service {
   /** Everything that changes after construction, kept in one object so the service's live state is in one place. */
-  private readonly state: RouterState = { mounts: new Set(), errorHandler: undefined, notFoundHandler: undefined, composed: undefined, closing: false }
+  private readonly state: RouterState = { mounts: new Set(), wrappers: new Set(), errorHandler: undefined, notFoundHandler: undefined, composed: undefined, closing: false }
   private readonly flights = new Set<Flight>()
   /** The flight of each request the router dispatched, keyed by the request its handlers see as `c.req.raw`. */
   private readonly flightOf = new WeakMap<Request, Flight>()
@@ -185,6 +187,21 @@ export class Router extends Service {
     return () => { void remove() }
   }
 
+  /**
+   * Run `middleware` around every request the router serves, whenever the plugin that asks was mounted: a middleware in a plain mount wraps only the routes mounted after it,
+   * which is the wrong tool for a plugin that must see every page (the door adds its script to each HTML response, the pages of a plugin that loaded earlier included). It goes
+   * outside all mounts, in the order wrappers were added, and goes away when the calling plugin unloads or when the returned function is called.
+   */
+  wrap(middleware: H): () => void {
+    this.state.wrappers.add(middleware)
+    this.state.composed = undefined
+    const remove = (): void => {
+      if (this.state.wrappers.delete(middleware)) this.state.composed = undefined
+    }
+    this.ctx.effect(() => remove, 'acryl-router: wrapper')
+    return remove
+  }
+
   /**
    * The mount's own copy of `app`'s routes as they are now (like the core's `app.route`), each handler wrapped so the router knows which
    * mount's code a request is in. The core's `app.route` runs first so a sub-app's own `onError` still applies to its routes.
@@ -331,6 +348,7 @@ export class Router extends Service {
     // over all routes on its first request, which grows faster than the route count (measured: 22 ms at 1000 routes, 163 ms at 2000),
     // while the trie rebuilds in about 1 ms per 1000 routes and matches as fast (scripts/bench-remount.mjs).
     const root = new Acryl({ strict: this.strict, router: new TrieRouter() })
+    for (const wrapper of this.state.wrappers) root.use('*', wrapper)
     for (const mount of this.state.mounts) root.route(mount.path, mount.app)
     root.onError(this.state.errorHandler ?? this.logError)
     if (this.state.notFoundHandler !== undefined) root.notFound(this.state.notFoundHandler)

package/plugins/agent-panel/client/main.ts

@@ -88,6 +88,7 @@ async function start(): Promise<void> {
   const termStop = $<HTMLButtonElement>('.termstop')
   termStop.addEventListener('click', () => void terminal?.stop())
   const form = $<HTMLFormElement>('form')
+  document.body.append(host)
   const kindOf = (name: string): 'chat' | 'terminal' =>
     session.drivers.find((d) => d.name === name)?.kind ?? 'chat'
   let terminal: { detach(): void; stop(): Promise<void> } | undefined
@@ -147,36 +148,36 @@ async function start(): Promise<void> {
     return el
   }
 
-  let controller: AbortController | undefined
-  stop.addEventListener('click', () => controller?.abort())
-  shadow.querySelector('form')!.addEventListener('submit', async (submitted) => {
-    submitted.preventDefault()
-    const message = input.value.trim()
-    if (message === '' || controller) return
-    input.value = ''
-    line(message, 'me')
-    controller = new AbortController()
+  // A run belongs to the app, not to this page: it goes on when the page reloads (the door reloads it after a plugin change, an agent may move it to another page) and the page that
+  // loads next follows it again. Only Stop cancels it.
+  const headers = { 'content-type': 'application/json', 'x-agent-panel-token': session.token }
+  let following = false
+  stop.addEventListener('click', () => void fetch(`${PREFIX}/stop`, { method: 'POST', headers }))
+  /**
+   * Show one run, as its events come, until it ends. `own` is true for a run this page just started (its question is on screen); a run found on load is shown from its question, and
+   * a run that had already ended before the page loaded is only shown, never reloads the page.
+   */
+  const watch = async (response: Response, own: boolean): Promise<void> => {
+    let live = true
+    following = true
     send.disabled = true
     stop.disabled = false
     let changed = false
     let answer: HTMLElement | undefined
     try {
-      const response = await fetch(`${PREFIX}/ask`, {
-        method: 'POST',
-        headers: { 'content-type': 'application/json', 'x-agent-panel-token': session.token },
-        body: JSON.stringify({ message, driver: driver.value }),
-        signal: controller.signal,
-      })
-      if (!response.ok) {
-        line(
-          ((await response.json().catch(() => ({}))) as { error?: string }).error ??
-            `The panel answered ${response.status}.`,
-          'err',
-        )
-        return
-      }
       for await (const { event, data } of events(response)) {
-        if (event === 'text') {
+        if (event === 'run') {
+          live = data.ended !== true
+          if (!own) {
+            if (typeof data.message === 'string') line(data.message, 'me')
+            if (typeof data.driver === 'string' && kindOf(data.driver) === 'chat')
+              driver.value = data.driver
+            const recent =
+              data.ended !== true ||
+              (typeof data.endedAt === 'number' && Date.now() - data.endedAt < 120_000)
+            if (recent) show(true)
+          }
+        } else if (event === 'text') {
           answer ??= line('')
           answer.textContent += String(data.text ?? '')
         } else if (event === 'tool') {
@@ -191,24 +192,52 @@ async function start(): Promise<void> {
         }
       }
     } catch (error) {
-      line(
-        controller?.signal.aborted
-          ? 'Stopped.'
-          : `The request failed: ${error instanceof Error ? error.message : String(error)}`,
-        'err',
-      )
+      line(`The request failed: ${error instanceof Error ? error.message : String(error)}`, 'err')
     } finally {
-      controller = undefined
+      following = false
       send.disabled = false
       stop.disabled = true
     }
-    // A plugin was installed or removed: the new feature is served by the running app, so the page only needs to be loaded again (unless something is being typed).
-    if (changed && input.value.trim() === '') {
+    // A plugin was installed or removed while this page watched: the new feature is served by the running app, so the page only needs to be loaded again (unless something is being typed).
+    // A run that ended before this page loaded was already shown after its reload, and does not reload it again.
+    if (live && changed && input.value.trim() === '') {
       line('Reloading the page to show it.', 'tool')
       setTimeout(() => location.reload(), 900)
     }
+  }
+  form.addEventListener('submit', async (submitted) => {
+    submitted.preventDefault()
+    const message = input.value.trim()
+    if (message === '' || following) return
+    input.value = ''
+    line(message, 'me')
+    try {
+      const response = await fetch(`${PREFIX}/ask`, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({ message, driver: driver.value }),
+      })
+      if (!response.ok) {
+        line(
+          ((await response.json().catch(() => ({}))) as { error?: string }).error ??
+            `The panel answered ${response.status}.`,
+          'err',
+        )
+        return
+      }
+      await watch(response, true)
+    } catch (error) {
+      line(`The request failed: ${error instanceof Error ? error.message : String(error)}`, 'err')
+    }
   })
-  document.body.append(host)
+  // The latest run, if there is one: shown again after a reload (its question, its events), and followed if it is still going.
+  try {
+    const latest = await fetch(`${PREFIX}/run`, { headers })
+    if (latest.ok && (latest.headers.get('content-type') ?? '').includes('text/event-stream'))
+      void watch(latest, false)
+  } catch {
+    // No run to show.
+  }
   // A terminal that was open before a reload is still running on the server: show it again.
   try {
     const remembered = JSON.parse(sessionStorage.getItem('driver-pty-session') ?? 'null') as {