acrylblends 1.0.6 → 1.0.8

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

@@ -13,6 +13,7 @@ import { join } from 'node:path'
 import type { Context } from '@deepseek-ai/cordis'
 import z from '@deepseek-ai/schemastery'
 import { Acryl } from 'acryl-router'
+import type { UpgradeWebSocket } from 'acryl-router/helpers'
 import { clientModules } from 'acryl-node-server/client-modules'
 import { auditPath, AuditLog } from './host/audit.ts'
 import { UiChannel } from './host/channel.ts'
@@ -23,6 +24,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 { pageSocketRoutes } from './host/page-socket.ts'
 import { ShellChannel, shellRoutes } from './host/shell.ts'
 import { realNode, writeShims, type ShimTarget } from './host/shim.ts'
 
@@ -154,10 +156,18 @@ export function apply(ctx: Context, rawConfig: Config = {}): void {
   // 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))
+  // The page channel also runs over a WebSocket, which is not one of the browser's six connections per host. Without the `ws` package or an adapter that upgrades, the pages use the stream.
+  let upgrade: UpgradeWebSocket | undefined
+  try {
+    upgrade = (ctx as unknown as { nodeServer?: { upgrades?: () => UpgradeWebSocket } }).nodeServer?.upgrades?.()
+  } catch (cause) {
+    reportError('open the page channel over a WebSocket (the pages use the event stream)', cause)
+  }
   ctx.router.route('/', privateApi(
     DOOR_PREFIX,
     pageModule,
     pageChannelRoutes(channel, { prefix: DOOR_PREFIX }),
+    ...(upgrade === undefined ? [] : [pageSocketRoutes(channel, { prefix: DOOR_PREFIX, upgrade })]),
     shellRoutes(DOOR_PREFIX, secret, shell),
     operatorRoutes(DOOR_PREFIX, secret, door, reportError),
     mcpRoutes(DOOR_PREFIX, secret, door, reportError),

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

@@ -9,6 +9,7 @@
 
 import { UiControlError, parseChannelToPage, type ChannelToHost } from './protocol.ts'
 import type { UiDriver } from './driver/driver.ts'
+import { type SocketLike, type SocketSource, socketSource } from './socket-source.ts'
 
 /** The slice of an `EventSource` the channel uses, so tests can supply their own. */
 export interface ChannelSource {
@@ -32,6 +33,11 @@ export interface PageChannelOptions {
   /** Where the door's routes are, e.g. `/api/acryl-door`. */
   readonly base: string
   readonly createSource?: (url: string) => ChannelSource
+  /** Opens the WebSocket form of the channel (`<base>/channel/ws`); the browser's own by default. Pass `transport: 'stream'` to keep to the event stream. */
+  readonly createSocket?: (url: string) => SocketSource
+  readonly transport?: 'auto' | 'stream'
+  /** Where the page says it fell back to the event stream (the console by default). */
+  readonly warn?: (message: string) => void
   readonly post?: (url: string, body: string) => Promise<unknown>
   readonly silenceMs?: number
   readonly now?: () => number
@@ -42,6 +48,9 @@ export class PageChannel {
   private reconnectTimer: ReturnType<typeof setTimeout> | undefined
   private watchdog: ReturnType<typeof setInterval> | undefined
   private backoff = BACKOFF_START_MS
+  /** The WebSocket form is tried first; once it fails to open (a proxy that cannot upgrade, no `ws` on the server) the page keeps to the event stream. */
+  private socketAllowed: boolean
+  private socketReady = false
   private lastHeard = 0
   private disposed = false
   private readonly now: () => number
@@ -53,38 +62,79 @@ export class PageChannel {
     this.driver = driver
     this.options = options
     this.now = options.now ?? (() => Date.now())
+    // A test that supplies only a stream keeps to it; the browser's own WebSocket is tried when the page supplies neither.
+    this.socketAllowed = options.transport !== 'stream' && (options.createSocket !== undefined || (options.createSource === undefined && typeof WebSocket !== 'undefined'))
   }
 
   connect(): void {
     if (this.disposed || this.source !== undefined) return
-    const create = this.options.createSource ?? ((url: string): ChannelSource => new EventSource(url))
     const query = `window=${encodeURIComponent(this.options.windowId)}&focused=${this.options.focused() ? '1' : '0'}${this.options.shellWindow === undefined ? '' : `&shell=${String(this.options.shellWindow)}`}`
-    const source = create(`${this.options.base}/channel?${query}`)
+    const viaSocket = this.socketAllowed
+    this.socketReady = false
+    const source: ChannelSource = viaSocket
+      ? (this.options.createSocket ?? ((url: string): SocketSource => socketSource(new WebSocket(url) as unknown as SocketLike)))(`${socketBase(this.options.base)}/channel/ws?${query}`)
+      : (this.options.createSource ?? ((url: string): ChannelSource => new EventSource(url) as unknown as ChannelSource))(`${this.options.base}/channel?${query}`)
     this.source = source
     this.lastHeard = this.now()
     const heard = (): void => {
       this.lastHeard = this.now()
       this.backoff = BACKOFF_START_MS
     }
-    source.addEventListener('ready', heard)
+    source.addEventListener('ready', () => {
+      this.socketReady = true
+      heard()
+    })
     source.addEventListener('ping', heard)
     source.addEventListener('call', (event) => {
       heard()
       if (typeof event.data === 'string') this.answer(event.data)
     })
-    // An EventSource retries by itself after a network error; once it gives up (CLOSED), the channel starts over.
-    source.onerror = () => { if (source.readyState === CLOSED) this.restart(source) }
+    // An EventSource retries by itself after a network error; once it gives up (CLOSED), the channel starts over. A WebSocket that never became ready is not retried: the page
+    // falls back to the event stream, and says so once.
+    source.onerror = () => {
+      if (source.readyState !== CLOSED) return
+      if (viaSocket && !this.socketReady) this.fallBack(source)
+      else this.restart(source)
+    }
     const silence = this.options.silenceMs ?? SILENCE_MS
     this.watchdog = setInterval(() => {
       if (this.now() - this.lastHeard > silence) this.restart(source)
     }, Math.max(50, Math.floor(silence / 3)))
   }
 
+  /** The WebSocket did not open: use the event stream from now on, and say why once. */
+  private fallBack(source: ChannelSource): void {
+    if (this.source !== source) return
+    this.socketAllowed = false
+    const warn = this.options.warn ?? ((message: string) => { console.warn(message) })
+    warn('acryl-door: the page channel could not open a WebSocket (the server has no upgrade route, or a proxy refused it); using server-sent events, which count against the browser\'s six connections per host')
+    this.stop()
+    this.connect()
+  }
+
   /** Tell the Host whether this window is the one in front. */
   reportFocus(focused: boolean): void {
     this.send({ t: 'focus', focused })
   }
 
+  /**
+   * Let go of the stream without ending the channel: the page is going away but the browser may keep it (the back/forward cache keeps a page that was left, still holding its
+   * connections). A browser allows six connections per host, so pages kept like that would queue the live page's own answers behind them. `resume` opens the stream again.
+   */
+  suspend(): void {
+    if (this.disposed) return
+    if (this.reconnectTimer !== undefined) clearTimeout(this.reconnectTimer)
+    this.reconnectTimer = undefined
+    this.stop()
+  }
+
+  /** The page is back (restored from the cache): open the stream again with the same window id. */
+  resume(): void {
+    if (this.disposed) return
+    this.backoff = BACKOFF_START_MS
+    this.connect()
+  }
+
   dispose(): void {
     this.disposed = true
     if (this.reconnectTimer !== undefined) clearTimeout(this.reconnectTimer)
@@ -119,6 +169,8 @@ export class PageChannel {
       // A malformed call carries no usable id; there is nothing to answer.
       return
     }
+    // Alive: said before anything is done, so the Host can tell a page that heard the call from one that is frozen or gone.
+    this.send({ t: 'ack', id: call.id })
     this.driver.handle(call.request).then(
       (value) => { this.send({ t: 'result', id: call.id, value }) },
       (cause: unknown) => {
@@ -129,9 +181,19 @@ export class PageChannel {
   }
 
   private send(message: ChannelToHost): void {
+    // On a WebSocket the answer goes up the socket: a request would queue behind the browser's six connections per host.
+    const source = this.source as Partial<SocketSource> | undefined
+    if (source?.send?.(JSON.stringify(message)) === true) return
     const post = this.options.post ?? ((url: string, body: string) => fetch(url, { method: 'POST', headers: { 'content-type': 'application/json' }, body }))
     post(`${this.options.base}/channel/answer`, JSON.stringify({ window: this.options.windowId, message })).catch(() => {
       // The Host is gone or restarting; the call it made settles on its side.
     })
   }
 }
+
+/** The WebSocket address of the door's routes: this page's own origin, `ws:` or `wss:`, then the base path. */
+function socketBase(base: string): string {
+  const here = (globalThis as { location?: { protocol: string; host: string } }).location
+  if (here === undefined) return base
+  return `${here.protocol === 'https:' ? 'wss' : 'ws'}://${here.host}${base}`
+}

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

@@ -3,11 +3,46 @@
  * secrets and payment fields (sensitive), and controls that govern the agent itself (protected).
  */
 
-/** Field names and labels that mean a secret or a payment detail. */
-const SENSITIVE_WORDS = /pass(?:word|code|phrase)|secret|token|api[-_ ]?key|credential|private[-_ ]?key|\bpin\b|card|cvv|cvc|iban|routing|account[-_ ]?number|ssn|social[-_ ]?security|one[-_ ]?time|otp/i
+/**
+ * Field names and labels that unmistakably name a secret or a payment detail. A word that is only sometimes one is not here: a bare "card" is the title of a card on a board,
+ * "pin" a map marker, "routing" a page. What a field *is* decides first: a password input, an `autocomplete` of a credential or a payment detail, a value
+ * that looks like a key. The words only catch a field that says what it holds in plain text.
+ */
+const SENSITIVE_WORDS = new RegExp(
+  [
+    'pass(?:word|code|phrase)',
+    'secret',
+    'api[-_ ]?key',
+    'private[-_ ]?key',
+    'credential',
+    '\\btoken\\b',
+    '(?:pin|security)[-_ ]?(?:code|number)',
+    '\\bcvv\\b',
+    '\\bcvc\\b',
+    '(?:credit|debit|payment)?[-_ ]?card[-_ ]?(?:number|no|num|code|expir)',
+    '\\bcc[-_ ]?(?:num|number|exp|csc)',
+    'iban',
+    '(?:bank[-_ ]?)?routing[-_ ]?number',
+    'account[-_ ]?number',
+    '\\bssn\\b',
+    'social[-_ ]?security',
+    'one[-_ ]?time[-_ ]?(?:code|password)',
+    '\\botp\\b',
+  ].join('|'),
+  'i',
+)
 /** `autocomplete` values that browsers treat as credentials or payment data. */
 const SENSITIVE_AUTOCOMPLETE = /^(?:cc-|current-password|new-password|one-time-code)/
 
+/** A value that is a key or a token by its shape: a known prefix, a JSON web token, or one long unbroken string that mixes lower case, upper case and digits (a git hash is lower-case hex and is not one). */
+const KEY_PREFIX = /^(?:sk[-_]|pk[-_]|rk[-_]|ghp_|gho_|ghs_|github_pat_|glpat-|xox[abprs]-|AKIA[0-9A-Z]{12,}|AIza[0-9A-Za-z_-]{20,}|eyJ[A-Za-z0-9_-]{10,}\.[A-Za-z0-9_-]{10,}\.)/
+export function looksLikeSecret(value: string): boolean {
+  const text = value.trim()
+  if (text.length < 20 || /\s/u.test(text)) return false
+  if (KEY_PREFIX.test(text)) return true
+  return text.length >= 32 && /^[A-Za-z0-9+/_=-]+$/u.test(text) && /[a-z]/u.test(text) && /[A-Z]/u.test(text) && /\d/u.test(text)
+}
+
 const label = (el: Element, attr: string): string => el.getAttribute(attr) ?? ''
 
 /** True for a form field (or anything marked) that holds a secret or payment detail. */
@@ -17,7 +52,8 @@ export function isSensitive(el: Element): boolean {
   if (el instanceof HTMLInputElement && el.type === 'password') return true
   const autocomplete = label(el, 'autocomplete').trim().toLowerCase()
   if (autocomplete.split(/\s+/).some(token => SENSITIVE_AUTOCOMPLETE.test(token))) return true
-  return SENSITIVE_WORDS.test([el.name, el.id, label(el, 'placeholder'), label(el, 'aria-label')].join(' '))
+  if (SENSITIVE_WORDS.test([el.name, el.id, label(el, 'placeholder'), label(el, 'aria-label')].join(' '))) return true
+  return !(el instanceof HTMLSelectElement) && looksLikeSecret(el.value)
 }
 
 /** Areas whose controls the agent may look at but never operate. */

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

@@ -22,15 +22,30 @@ export function startDoor(document: Document, base: string = DOOR_BASE): () => v
   const detachInput = clock.attach(document)
   const removeIndicator = mountIndicator(driver, document)
   const shellWindow = Number(/\bAcrylWindow\/(\d{1,9})\b/u.exec(view.navigator?.userAgent ?? '')?.[1])
-  const channel = new PageChannel(driver, { windowId, focused, base, ...(Number.isSafeInteger(shellWindow) && shellWindow > 0 ? { shellWindow } : {}) })
+  // `localStorage.setItem('acryl-door-transport', 'stream')` keeps this browser to the event stream (to compare, or behind a proxy that cannot upgrade).
+  const transport = ((): 'auto' | 'stream' => {
+    try {
+      return view.localStorage.getItem('acryl-door-transport') === 'stream' ? 'stream' : 'auto'
+    } catch {
+      return 'auto'
+    }
+  })()
+  const channel = new PageChannel(driver, { windowId, focused, base, transport, ...(Number.isSafeInteger(shellWindow) && shellWindow > 0 ? { shellWindow } : {}) })
   const reportFocus = (): void => { channel.reportFocus(focused()) }
   view.addEventListener('focus', reportFocus)
   view.addEventListener('blur', reportFocus)
+  // A page that is left may be kept by the browser (back/forward cache) with its stream open, and six open streams hold up every request of the live page: let go on the way out.
+  const leave = (): void => { channel.suspend() }
+  const back = (event: Event): void => { if ((event as PageTransitionEvent).persisted) channel.resume() }
+  view.addEventListener('pagehide', leave)
+  view.addEventListener('pageshow', back)
   document.addEventListener('visibilitychange', reportFocus)
   channel.connect()
   return () => {
     view.removeEventListener('focus', reportFocus)
     view.removeEventListener('blur', reportFocus)
+    view.removeEventListener('pagehide', leave)
+    view.removeEventListener('pageshow', back)
     document.removeEventListener('visibilitychange', reportFocus)
     channel.dispose()
     removeIndicator()

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

@@ -100,6 +100,8 @@ export type ChannelToPage =
   | { readonly t: 'call'; readonly id: number; readonly request: UiRequest }
 export type ChannelToHost =
   | { readonly t: 'focus'; readonly focused: boolean }
+  /** The page received call `id` and is about to run it: proof that it is alive, sent before anything is done. */
+  | { readonly t: 'ack'; readonly id: number }
   | { readonly t: 'result'; readonly id: number; readonly value: UiResult }
   | { readonly t: 'error'; readonly id: number; readonly code: UiErrorCode; readonly message: string }
 
@@ -198,6 +200,7 @@ export const WINDOW_ID = /^[A-Za-z0-9-]{1,80}$/u
 export function parseChannelToHost(value: unknown): ChannelToHost | null {
   if (!isRecord(value)) return null
   if (value.t === 'focus' && typeof value.focused === 'boolean') return { t: 'focus', focused: value.focused }
+  if (value.t === 'ack' && typeof value.id === 'number') return { t: 'ack', id: value.id }
   if (value.t === 'result' && typeof value.id === 'number' && isRecord(value.value)) return { t: 'result', id: value.id, value: value.value as unknown as UiResult }
   if (value.t === 'error' && typeof value.id === 'number' && typeof value.message === 'string' && UI_ERROR_CODES.includes(value.code as UiErrorCode)) {
     return { t: 'error', id: value.id, code: value.code as UiErrorCode, message: value.message.slice(0, 500) }

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

@@ -0,0 +1,75 @@
+/**
+ * A WebSocket that looks like the event stream the channel already runs on: `addEventListener('call' | 'ready' | 'ping')`, `onerror`, `close()` and `readyState` (0 connecting, 1 open,
+ * 2 closed). Each frame from the Host is `{ "e": <event>, "d": <data> }`. It can also send, so the page's answers go up the same socket and need no request of their own: a request
+ * would wait behind the browser's six connections per host, which is what the socket is for.
+ */
+
+import type { ChannelSource } from './channel.ts'
+
+/** The slice of the browser's `WebSocket` used here, so a test can supply its own. */
+export interface SocketLike {
+  readyState: number
+  onopen: ((event: Event) => void) | null
+  onmessage: ((event: MessageEvent) => void) | null
+  onerror: ((event: Event) => void) | null
+  onclose: ((event: CloseEvent) => void) | null
+  send(data: string): void
+  close(code?: number, reason?: string): void
+}
+
+export interface SocketSource extends ChannelSource {
+  /** Send one message up; false when the socket is not open (the caller posts it instead). */
+  send(text: string): boolean
+}
+
+export function socketSource(socket: SocketLike): SocketSource {
+  const listeners = new Map<string, Array<(event: MessageEvent) => void>>()
+  let closed = false
+  const source: SocketSource = {
+    onerror: null,
+    get readyState(): number {
+      return closed || socket.readyState >= 2 ? 2 : socket.readyState
+    },
+    addEventListener(type, listener) {
+      listeners.set(type, [...(listeners.get(type) ?? []), listener])
+    },
+    send(text) {
+      if (socket.readyState !== 1) return false
+      try {
+        socket.send(text)
+        return true
+      } catch {
+        return false
+      }
+    },
+    close() {
+      closed = true
+      socket.onmessage = null
+      socket.onerror = null
+      socket.onclose = null
+      try {
+        socket.close(1000, 'page left')
+      } catch {
+        // Already closed.
+      }
+    },
+  }
+  socket.onmessage = (event) => {
+    if (typeof event.data !== 'string') return
+    let frame: { e?: unknown; d?: unknown }
+    try {
+      frame = JSON.parse(event.data) as { e?: unknown; d?: unknown }
+    } catch {
+      return
+    }
+    if (typeof frame.e !== 'string') return
+    for (const listener of listeners.get(frame.e) ?? []) listener({ data: typeof frame.d === 'string' ? frame.d : '' } as MessageEvent)
+  }
+  // An error or a close that this side did not ask for is the channel's cue to start over, or to fall back to the event stream.
+  const lost = (event: Event): void => {
+    if (!closed) source.onerror?.(event)
+  }
+  socket.onerror = lost
+  socket.onclose = lost
+  return source
+}

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

@@ -1,6 +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'
+import { renderMarkdown } from './markdown.ts'
 
 const PREFIX = '/api/agent-panel'
 
@@ -36,6 +37,77 @@ async function* events(response: Response): AsyncGenerator<PanelEvent> {
   }
 }
 
+/** What a run is read from: its events, and a way to end the run. A socket and a stream give the same events. */
+interface RunSource {
+  readonly events: AsyncIterable<PanelEvent>
+}
+
+/** A WebSocket is not one of the browser's six connections per host, so the panel's Stop and a run still work when two windows stream their own state. */
+let socketBroken = false
+let activeSocket: WebSocket | undefined
+
+/** Open the run socket and send the token and the first action. Rejects when the page cannot upgrade (a proxy, a server without `ws`): the caller falls back to the stream. */
+function openSocket(token: string, action: Record<string, unknown>): Promise<WebSocket> {
+  return new Promise((resolve, reject) => {
+    const socket = new WebSocket(
+      `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}${PREFIX}/run/ws`,
+    )
+    const timer = setTimeout(() => {
+      socket.close()
+      reject(new Error('the socket did not open in time'))
+    }, 4000)
+    socket.onopen = () => {
+      clearTimeout(timer)
+      socket.send(JSON.stringify({ t: 'hello', token }))
+      socket.send(JSON.stringify(action))
+      resolve(socket)
+    }
+    socket.onerror = () => {
+      clearTimeout(timer)
+      reject(new Error('the server refused the upgrade'))
+    }
+  })
+}
+
+/** The frames of an open run socket as panel events, until it closes. */
+async function* socketEvents(socket: WebSocket): AsyncGenerator<PanelEvent> {
+  const queue: PanelEvent[] = []
+  let wake: (() => void) | undefined
+  let closed: CloseEvent | undefined
+  socket.onmessage = (message) => {
+    try {
+      const frame = JSON.parse(String(message.data)) as { e?: unknown; d?: unknown }
+      if (typeof frame.e === 'string')
+        queue.push({ event: frame.e, data: (frame.d ?? {}) as Record<string, unknown> })
+    } catch {
+      // Not a frame of ours.
+    }
+    wake?.()
+  }
+  socket.onclose = (event) => {
+    closed = event
+    wake?.()
+  }
+  for (;;) {
+    const next = queue.shift()
+    if (next !== undefined) {
+      yield next
+      continue
+    }
+    if (closed !== undefined) {
+      if (closed.code === 4401)
+        yield {
+          event: 'error',
+          data: { message: 'the panel was not accepted (reload the page and try again)' },
+        }
+      return
+    }
+    await new Promise<void>((resolve) => {
+      wake = resolve
+    })
+  }
+}
+
 const css = `
 :host { all: initial }
 * { box-sizing: border-box; font: 14px system-ui, sans-serif }
@@ -51,11 +123,23 @@ header strong { flex: 1 }
 .me { background: #dbeafe; align-self: flex-end }
 .tool { font: 12px ui-monospace, monospace; color: #4b5563; background: none; padding: 0 }
 .err { background: #fee2e2 }
+.msg.md { white-space: normal; overflow-wrap: anywhere }
+.md > :first-child { margin-top: 0 } .md > :last-child { margin-bottom: 0 }
+.md p, .md ul, .md ol, .md pre, .md blockquote { margin: 0 0 8px }
+.md h3, .md h4, .md h5, .md h6 { margin: 10px 0 4px; font-weight: 600 } .md h3 { font-size: 16px } .md h4, .md h5, .md h6 { font-size: 14px }
+.md ul, .md ol { padding-left: 20px } .md li { margin: 2px 0 }
+.md code { font: 12px ui-monospace, monospace; background: #e5e7eb; padding: 1px 4px; border-radius: 4px }
+.md pre { overflow: auto; background: #111827; color: #f9fafb; padding: 8px 10px; border-radius: 6px }
+.md pre code { background: none; padding: 0; color: inherit; white-space: pre }
+.md blockquote { border-left: 3px solid #d1d5db; padding-left: 10px; color: #4b5563 }
+.md a { color: #1d4ed8 }
+.working { font: 12px ui-monospace, monospace; color: #6b7280; padding: 0 }
 form { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-top: 1px solid #e5e7eb }
 textarea { width: 100%; min-height: 64px; resize: vertical; padding: 8px; border: 1px solid #d1d5db; border-radius: 6px }
 .row { display: flex; gap: 8px; align-items: center }
 .row button, header button { padding: 6px 12px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; cursor: pointer }
 .row button.send { background: #1f2937; color: #fff; border-color: #1f2937 }
+.row button:disabled { opacity: 0.45; cursor: not-allowed }
 `
 
 async function start(): Promise<void> {
@@ -135,8 +219,36 @@ async function start(): Promise<void> {
     }
   }
   driver.addEventListener('change', () => void choose())
+  // The panel sits beside the page, not over it: while it is open the page is narrower by the panel's width, so its header and right-hand columns stay in view. (An element of the page
+  // that is positioned fixed to the window is not part of that layout and can still lie under the panel.)
+  const root = document.documentElement
+  const docked = ['margin-right'] as const
+  const saved = new Map<string, [string, string]>()
+  const dock = (open: boolean): void => {
+    if (open) {
+      for (const property of docked)
+        saved.set(property, [
+          root.style.getPropertyValue(property),
+          root.style.getPropertyPriority(property),
+        ])
+      root.style.setProperty(
+        'margin-right',
+        `${String(Math.min(380, Math.floor(window.innerWidth * 0.9)))}px`,
+        'important',
+      )
+    } else {
+      for (const property of docked) {
+        const [value, priority] = saved.get(property) ?? ['', '']
+        if (value === '') root.style.removeProperty(property)
+        else root.style.setProperty(property, value, priority)
+      }
+      saved.clear()
+    }
+  }
   const show = (open: boolean): void => {
+    const was = panel.classList.contains('shown')
     panel.classList.toggle('shown', open)
+    if (open !== was) dock(open)
     if (open) input.focus()
   }
   $('button.open').addEventListener('click', () => show(true))
@@ -154,20 +266,74 @@ async function start(): Promise<void> {
   // 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 }))
+  stop.addEventListener('click', () => {
+    // On the run's socket when there is one: a request would wait behind the browser's six connections per host.
+    if (activeSocket?.readyState === WebSocket.OPEN)
+      activeSocket.send(JSON.stringify({ t: 'stop' }))
+    else void fetch(`${PREFIX}/stop`, { method: 'POST', headers })
+  })
+  /** A run over the socket when the server upgrades, else over the stream, with one console warning saying why. */
+  const openRun = async (
+    action: { t: 'ask'; message: string; driver: string } | { t: 'follow' },
+  ): Promise<RunSource | { error: string } | undefined> => {
+    if (!socketBroken && typeof WebSocket !== 'undefined') {
+      try {
+        const socket = await openSocket(session.token, action)
+        activeSocket = socket
+        socket.addEventListener('close', () => {
+          if (activeSocket === socket) activeSocket = undefined
+        })
+        return { events: socketEvents(socket) }
+      } catch (cause) {
+        socketBroken = true
+        console.warn(
+          `agent-panel: the run could not open a WebSocket (${cause instanceof Error ? cause.message : String(cause)}); using server-sent events, which count against the browser's six connections per host`,
+        )
+      }
+    }
+    if (action.t === 'ask') {
+      const response = await fetch(`${PREFIX}/ask`, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({ message: action.message, driver: action.driver }),
+      })
+      if (!response.ok)
+        return {
+          error:
+            ((await response.json().catch(() => ({}))) as { error?: string }).error ??
+            `The panel answered ${response.status}.`,
+        }
+      return { events: events(response) }
+    }
+    const latest = await fetch(`${PREFIX}/run`, { headers })
+    return latest.ok && (latest.headers.get('content-type') ?? '').includes('text/event-stream')
+      ? { events: events(latest) }
+      : undefined
+  }
   /**
    * 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> => {
+  const watch = async (source: RunSource, own: boolean): Promise<void> => {
     let live = true
     following = true
     send.disabled = true
     stop.disabled = false
     let changed = false
     let answer: HTMLElement | undefined
+    let answered = ''
+    // A coding agent started headless says little until it is done, so the panel says it is working, and for how long.
+    const started = Date.now()
+    const working = line('', 'working')
+    const tick = (): void => {
+      const seconds = Math.floor((Date.now() - started) / 1000)
+      working.textContent = `Working... ${String(Math.floor(seconds / 60))}:${String(seconds % 60).padStart(2, '0')}`
+      log.append(working)
+    }
+    tick()
+    const timer = setInterval(tick, 1000)
     try {
-      for await (const { event, data } of events(response)) {
+      for await (const { event, data } of source.events) {
         if (event === 'run') {
           live = data.ended !== true
           if (!own) {
@@ -180,8 +346,10 @@ async function start(): Promise<void> {
             if (recent) show(true)
           }
         } else if (event === 'text') {
-          answer ??= line('')
-          answer.textContent += String(data.text ?? '')
+          answer ??= line('', 'md')
+          answered += String(data.text ?? '')
+          answer.replaceChildren(renderMarkdown(answered, document))
+          log.scrollTop = log.scrollHeight
         } else if (event === 'tool') {
           const described = describeTool(data)
           if (described !== undefined) line(described, 'tool')
@@ -197,6 +365,8 @@ async function start(): Promise<void> {
     } catch (error) {
       line(`The request failed: ${error instanceof Error ? error.message : String(error)}`, 'err')
     } finally {
+      clearInterval(timer)
+      working.remove()
       following = false
       send.disabled = false
       stop.disabled = true
@@ -215,29 +385,21 @@ async function start(): Promise<void> {
     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',
-        )
+      const run = await openRun({ t: 'ask', message, driver: driver.value })
+      if (run === undefined) return
+      if ('error' in run) {
+        line(run.error, 'err')
         return
       }
-      await watch(response, true)
+      await watch(run, true)
     } catch (error) {
       line(`The request failed: ${error instanceof Error ? error.message : String(error)}`, 'err')
     }
   })
   // 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)
+    const latest = await openRun({ t: 'follow' })
+    if (latest !== undefined && !('error' in latest)) void watch(latest, false)
   } catch {
     // No run to show.
   }