acrylblends 1.0.3 → 1.0.5

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,
   }
 }
 
@@ -88,6 +94,13 @@ function loopbackUrl(url: string): string {
   return parsed.origin
 }
 
+const escapeHtml = (text: string): string => text.replace(/[&<>"']/gu, char => `&#${char.charCodeAt(0)};`)
+
+/** The page of a path the app does not serve, development only: what is missing, a way back, and the door's script. */
+export function notFoundPage(path: string, scriptTag: string): string {
+  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><title>404 Not Found</title></head><body><main><h1>404 Not Found</h1><p>This app has no page at <code>${escapeHtml(path)}</code>.</p><p><a href="/">Back to the app</a></p></main>${scriptTag}</body></html>`
+}
+
 export function apply(ctx: Context, rawConfig: Config = {}): void {
   const config = Config(rawConfig)
   // Development only: nothing is started, mounted or written in production, or when switched off.
@@ -108,12 +121,35 @@ 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; req: { path: string; header(name: string): string | undefined } }, next: () => Promise<void>): Promise<void> => {
+    await next()
+    if (!(c.res.headers.get('content-type') ?? '').includes('text/html')) {
+      // A path the app does not serve, opened as a page: the browser would show a bare "404 Not Found" with no script, and the window would be left where nothing can look at it or
+      // act on it (an agent that mistypes a path would need a person to bring the window back). The page says what is missing, carries the script, and keeps the 404.
+      if (c.res.status === 404 && (c.req.header('accept') ?? '').includes('text/html') && !(c.res.headers.get('content-type') ?? '').includes('json'))
+        c.res = new Response(notFoundPage(c.req.path, tag), { status: 404, headers: { 'content-type': 'text/html; charset=utf-8' } })
+      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-node-server/src/register.ts

@@ -7,9 +7,9 @@
  * `typescript` is loaded from the app, on the first JSX file only; the framework itself has no dependencies.
  */
 
+import { existsSync, readFileSync } from 'node:fs'
 import { registerHooks } from 'node:module'
-import { readFileSync } from 'node:fs'
-import { fileURLToPath } from 'node:url'
+import { fileURLToPath, pathToFileURL } from 'node:url'
 import { compileModule } from './transpile.ts'
 
 /** The JSX runtime the docs set up; an app's tsconfig.json (or a file's own `@jsxImportSource` pragma) chooses another. */
@@ -27,3 +27,30 @@ registerHooks({
     return { format: 'module', source, shortCircuit: true }
   },
 })
+
+/**
+ * The framework's names for a file of the app: in an app the framework plugins are source under `plugins/`, not packages, so `acrylblends`, `acrylblends/body-limit` or `acryl-router`
+ * have nowhere to resolve from. A plugin installed while the app runs gets them from the extensions plugin; a plugin that is a ROW of `blend.yaml` is imported by `src/app.ts` before
+ * any of that exists, so the same names are resolved here, in the preload every `dev`, `start` and `test` script runs. Only a name that Node cannot resolve itself, only for the
+ * app's own files (never for something in `node_modules`), and only in an app that has the framework as vendored source: the published package resolves its own names.
+ */
+const plugins = new URL('../../', import.meta.url)
+const appRoot = new URL('../', plugins).href
+const resolver = new URL('extensions/resolve.ts', plugins)
+if (existsSync(fileURLToPath(new URL('acryl-router/src/index.ts', plugins))) && existsSync(fileURLToPath(resolver))) {
+  const { routerAliases } = (await import(resolver.href)) as { routerAliases(): Record<string, string> }
+  const aliases = routerAliases()
+  registerHooks({
+    resolve(specifier, context, nextResolve) {
+      try {
+        return nextResolve(specifier, context)
+      } catch (error) {
+        const alias = aliases[specifier]
+        const parent = context.parentURL
+        if (alias !== undefined && parent?.startsWith(appRoot) && !parent.includes('/node_modules/'))
+          return nextResolve(pathToFileURL(alias).href, context)
+        throw error
+      }
+    },
+  })
+}

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/model.ts

@@ -21,7 +21,12 @@ export interface ModelInput {
     readonly reasoning?: string
   }>
   /** The tools the model may call. */
-  readonly tools?: ReadonlyArray<{ readonly name: string; readonly description: string }>
+  readonly tools?: ReadonlyArray<{
+    readonly name: string
+    readonly description: string
+    /** The JSON Schema of the tool's input, when it has one. */
+    readonly parameters?: Readonly<Record<string, unknown>>
+  }>
   /** Aborts when the run is cancelled: a provider that can stop its request passes this on. */
   readonly signal?: AbortSignal
 }

package/plugins/agent/tools.ts

@@ -3,6 +3,8 @@ import type { Context } from '@deepseek-ai/cordis'
 /** One tool: what it does (for the model) and how to run it. */
 export interface Tool {
   readonly description: string
+  /** The JSON Schema of the input (an object schema), sent to a real model so it knows which fields the tool takes. A tool without one takes any object. */
+  readonly parameters?: Readonly<Record<string, unknown>>
   /** `options.signal` aborts when the run is cancelled; a tool that can stop its work listens to it. */
   run(input: unknown, options?: { signal?: AbortSignal }): unknown | Promise<unknown>
 }
@@ -11,7 +13,11 @@ export interface Tool {
 export interface Tools {
   /** Register a tool. Returns the function that removes it. */
   register(name: string, tool: Tool): () => void
-  list(): Array<{ name: string; description: string }>
+  list(): Array<{
+    name: string
+    description: string
+    parameters?: Readonly<Record<string, unknown>>
+  }>
   call(name: string, input: unknown, options?: { signal?: AbortSignal }): Promise<unknown>
 }
 
@@ -31,7 +37,11 @@ export function tools(ctx: Context) {
       return () => void table.delete(name)
     },
     list: () =>
-      [...table.entries()].map(([name, tool]) => ({ name, description: tool.description })),
+      [...table.entries()].map(([name, tool]) => ({
+        name,
+        description: tool.description,
+        ...(tool.parameters === undefined ? {} : { parameters: tool.parameters }),
+      })),
     async call(name, input, options) {
       const tool = table.get(name)
       if (!tool) throw new Error(`unknown tool "${name}"`)

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

@@ -0,0 +1,44 @@
+// One line for a tool event of the panel's conversation: what the tool is doing, not only its name. A coding agent started in the folder reports its own log (`{ tool: 'codex', info }`):
+// its bookkeeping is dropped and its command or sentence is kept. The app's own agent reports a call (`{ tool, input, result | error }`): the name and a short form of the arguments.
+
+const MAX = 160
+
+const clip = (text: string): string => (text.length > MAX ? `${text.slice(0, MAX - 1)}…` : text)
+
+/** A shell command as the agent's log writes it: `/bin/zsh -lc 'npm test' in /path/to/app` becomes `npm test`. */
+function commandOf(line: string): string {
+  const withoutCwd = line.replace(/ in \/\S+\s*$/u, '')
+  const wrapped = /^(?:\/\S*\/)?(?:ba|z|da)?sh -l?c (['"])([\s\S]*)\1$/u.exec(withoutCwd.trim())
+  return wrapped?.[2] ?? withoutCwd.trim()
+}
+
+/** @returns the line to show, or `undefined` when the event says nothing worth a line (a hook ran, a token count). */
+export function describeTool(data: Record<string, unknown>): string | undefined {
+  const tool = String(data.tool ?? '')
+  if (typeof data.info === 'string') {
+    const lines = data.info
+      .split('\n')
+      .map((line) => line.trim())
+      .filter(
+        (line) =>
+          line !== '' &&
+          !/^hook:/u.test(line) &&
+          !/^tokens used/u.test(line) &&
+          !/^[\d,]+$/u.test(line),
+      )
+    if (lines.length === 0) return undefined
+    const [first = '', second = ''] = lines
+    if (first === 'exec') return second === '' ? undefined : `${tool}: $ ${clip(commandOf(second))}`
+    // The output of a command that ran: only a failure is worth a line.
+    if (/^succeeded in /u.test(first)) return undefined
+    if (/^exited \d+/u.test(first)) return `${tool}: ${clip(first.replace(/:$/u, ''))}`
+    return `${tool}: ${clip(lines.join(' '))}`
+  }
+  const input =
+    data.input === undefined ||
+    (typeof data.input === 'object' && data.input !== null && Object.keys(data.input).length === 0)
+      ? ''
+      : ` ${clip(JSON.stringify(data.input))}`
+  const failed = data.error ? ` failed: ${clip(String(data.error))}` : ''
+  return `${tool}${input}${failed}`
+}

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

@@ -1,5 +1,7 @@
 // The panel in the page: a button at the corner opens a side panel (a shadow root, so the app's CSS cannot touch it and it cannot touch the app's). It asks the app's
 // agent through POST /api/agent-panel/ask, shows the answer as it arrives, and reloads the page after a run that installed or removed a plugin.
+import { describeTool } from './describe.ts'
+
 const PREFIX = '/api/agent-panel'
 
 interface Session {
@@ -88,6 +90,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,40 +150,41 @@ 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') {
-          line(`${String(data.tool)}${data.error ? ` failed: ${String(data.error)}` : ''}`, 'tool')
+          const described = describeTool(data)
+          if (described !== undefined) line(described, 'tool')
         } else if (event === 'change') {
           changed = true
           line(`plugin ${String(data.extension)}: ${String(data.action)}`, 'tool')
@@ -191,24 +195,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 {