acrylblends 1.0.7 → 1.0.9

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,33 +62,56 @@ 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 })
@@ -149,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/index.ts

@@ -22,7 +22,15 @@ 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)

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/acryl-door/src/shell/protocol.ts

@@ -27,6 +27,9 @@ export interface ShellWindow {
   readonly focused: boolean
   readonly width: number
   readonly height: number
+  /** Where the window's top left corner is on the screen (so two windows on top of each other can be told). */
+  readonly x?: number
+  readonly y?: number
 }
 
 export interface ShellMenuItem {

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

@@ -37,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 }
@@ -68,6 +139,7 @@ textarea { width: 100%; min-height: 64px; resize: vertical; padding: 8px; border
 .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> {
@@ -194,32 +266,88 @@ 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')
+    // A coding agent started headless says little until it is done, so the panel says it is working, and for how long (from when the run began, not from when this page loaded).
+    let started = Date.now()
+    let working: HTMLElement | undefined
+    let timer: ReturnType<typeof setInterval> | undefined
     const tick = (): void => {
-      const seconds = Math.floor((Date.now() - started) / 1000)
+      if (working === undefined) return
+      const seconds = Math.max(0, 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)
+    // The panel is busy once there is a run to show. A page that just loaded asks the server for the latest run first, and "there is none" must not make a message typed in that moment
+    // wait or vanish, so a run that is only being looked for does not count (it begins at its first event).
+    const begin = (): void => {
+      if (working !== undefined) return
+      following = true
+      send.disabled = true
+      stop.disabled = false
+      working = line('', 'working')
+      tick()
+      timer = setInterval(tick, 1000)
+    }
+    if (own) begin()
     try {
-      for await (const { event, data } of events(response)) {
+      for await (const { event, data } of source.events) {
+        if (event === 'idle') continue
+        begin()
         if (event === 'run') {
+          if (typeof data.startedAt === 'number') started = data.startedAt
+          tick()
           live = data.ended !== true
           if (!own) {
             if (typeof data.message === 'string') line(data.message, 'me')
@@ -250,11 +378,13 @@ 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
+      if (timer !== undefined) clearInterval(timer)
+      if (working !== undefined) {
+        working.remove()
+        following = false
+        send.disabled = false
+        stop.disabled = true
+      }
     }
     // 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.
@@ -270,29 +400,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.
   }

package/plugins/agent-panel/headless.ts

@@ -195,3 +195,23 @@ export function headlessDriver(name: HeadlessName, root: string): ChatDriver {
     },
   }
 }
+
+/**
+ * Why a driver name cannot be used to ask a question, in a sentence: it is a terminal (picked in the panel, not asked over `/ask`), it is a coding agent that is not installed or not
+ * able to start, or pi without a key to reach its model. Nothing when the name is not one of the headless agents.
+ */
+export function whyNotChat(
+  name: string,
+  kind: 'chat' | 'terminal' | undefined,
+): string | undefined {
+  if (kind === 'terminal')
+    return `"${name}" is a terminal driver: pick it in the panel to open its terminal; /ask runs the chat drivers`
+  if (name !== 'claude' && name !== 'codex' && name !== 'pi') return undefined
+  if (!onPath(name))
+    return `${name} was not found on the PATH of the app, so the panel cannot start it`
+  const launch = resolveLaunch(name, [])
+  if ('error' in launch) return launch.error
+  if (name === 'pi' && !piHasDeepseekKey())
+    return 'pi needs a DeepSeek key: set DEEPSEEK_API_KEY in the environment of the app, or log in with pi once (it keeps the key in ~/.pi/agent/auth.json)'
+  return undefined
+}