@vintasoftware/pr-review-canvas 0.2.0 → 0.4.0

package/static/js/api.js

@@ -1,5 +1,6 @@
 // @ts-check
 /** @typedef {import('./contract-types.js').ErrorEnvelope} ErrorEnvelope */
+/** @typedef {import('./contract-types.js').ReviewKey} ReviewKey */
 /** @typedef {import('./contract-types.js').PrBundle} PrBundle */
 /** @typedef {import('./contract-types.js').PatchesResponse} PatchesResponse */
 
@@ -69,17 +70,20 @@ export async function fetchJson(url, opts = {}) {
 }
 
 /**
- * @param {number} prNumber
- * @param {{ refresh?: boolean, fetchImpl?: typeof fetch | undefined }} [opts]
+ * The bundle for one target. `refresh` asks the server to read the forge, or the working tree,
+ * again; `poll` says this is the background poller, which is answered from the head the page was
+ * opened with rather than by snapshotting the working tree every few seconds.
+ * @param {ReviewKey} prNumber
+ * @param {{ refresh?: boolean, poll?: boolean, fetchImpl?: typeof fetch | undefined }} [opts]
  * @returns {Promise<PrBundle>}
  */
 export function fetchBundle(prNumber, opts = {}) {
-  const q = opts.refresh ? '?refresh=1' : ''
+  const q = opts.refresh ? '?refresh=1' : opts.poll ? '?poll=1' : ''
   return fetchJson(`/api/prs/${prNumber}${q}`, { fetchImpl: opts.fetchImpl })
 }
 
 /**
- * @param {number} prNumber
+ * @param {ReviewKey} prNumber
  * @param {{ headSha?: string, fetchImpl?: typeof fetch }} [opts]
  * @returns {Promise<PatchesResponse>}
  */
@@ -89,7 +93,7 @@ export function fetchPatches(prNumber, opts = {}) {
 }
 
 /**
- * @param {number} prNumber
+ * @param {ReviewKey} prNumber
  * @param {{ fetchImpl?: typeof fetch }} [opts]
  * @returns {Promise<import('./contract-types.js').StateResponse>}
  */
@@ -98,14 +102,18 @@ export function fetchState(prNumber, opts = {}) {
 }
 
 /**
- * @param {number} prNumber
+ * @param {ReviewKey} prNumber
  * @param {string} id `layer:<id>` or `layer:<id>/file:<key>`
  * @param {boolean} reviewed
- * @param {{ headSha?: string, fetchImpl?: typeof fetch }} [opts]
+ * @param {{ headSha?: string, canvasSha?: string, fetchImpl?: typeof fetch }} [opts]
  * @returns {Promise<import('./contract-types.js').StateResponse>}
  */
 export function putReviewed(prNumber, id, reviewed, opts = {}) {
-  const body = opts.headSha === undefined ? { reviewed } : { reviewed, headSha: opts.headSha }
+  const body = {
+    reviewed,
+    ...(opts.headSha === undefined ? {} : { headSha: opts.headSha }),
+    ...(opts.canvasSha === undefined ? {} : { canvasSha: opts.canvasSha }),
+  }
   return fetchJson(`/api/prs/${prNumber}/reviewed/${id}`, {
     method: 'PUT',
     body,
@@ -114,7 +122,7 @@ export function putReviewed(prNumber, id, reviewed, opts = {}) {
 }
 
 /**
- * @param {number} prNumber
+ * @param {ReviewKey} prNumber
  * @param {string} fingerprint
  * @param {boolean} dismissed
  * @param {{ reason?: string, fetchImpl?: typeof fetch }} [opts]
@@ -130,7 +138,7 @@ export function putDismissed(prNumber, fingerprint, dismissed, opts = {}) {
 }
 
 /**
- * @param {number} prNumber
+ * @param {ReviewKey} prNumber
  * @param {number} rootCommentId
  * @param {boolean} hidden
  * @param {{ fetchImpl?: typeof fetch }} [opts]
@@ -145,7 +153,7 @@ export function putThreadHidden(prNumber, rootCommentId, hidden, opts = {}) {
 }
 
 /**
- * @param {number} prNumber
+ * @param {ReviewKey} prNumber
  * @param {{ refresh?: boolean, fetchImpl?: typeof fetch }} [opts]
  * @returns {Promise<import('./contract-types.js').Capabilities>}
  */
@@ -155,17 +163,21 @@ export function fetchCapabilities(prNumber, opts = {}) {
 }
 
 /**
- * @param {number} prNumber
+ * @param {ReviewKey} prNumber
  * @param {import('./contract-types.js').PostCommentInput} input
  * @param {{ fetchImpl?: typeof fetch }} [opts]
  * @returns {Promise<import('./contract-types.js').PostCommentResponse>}
  */
 export function postComment(prNumber, input, opts = {}) {
-  return fetchJson(`/api/prs/${prNumber}/comments`, { method: 'POST', body: input, fetchImpl: opts.fetchImpl })
+  return fetchJson(`/api/prs/${prNumber}/comments`, {
+    method: 'POST',
+    body: input,
+    fetchImpl: opts.fetchImpl,
+  })
 }
 
 /**
- * @param {number} prNumber
+ * @param {ReviewKey} prNumber
  * @param {{ fetchImpl?: typeof fetch }} [opts]
  * @returns {Promise<import('./contract-types.js').ReviewBodyResponse>}
  */
@@ -174,7 +186,7 @@ export function fetchReviewBody(prNumber, opts = {}) {
 }
 
 /**
- * @param {number} prNumber
+ * @param {ReviewKey} prNumber
  * @param {{ event: 'APPROVE' | 'REQUEST_CHANGES', body?: string, headSha?: string }} input
  * @param {{ fetchImpl?: typeof fetch }} [opts]
  * @returns {Promise<import('./contract-types.js').PostReviewResponse>}
@@ -206,7 +218,7 @@ export const POLL_SLOW_INTERVAL_MS = 15_000
  * After five minutes of waiting the gap grows to 15 s, because a generation that has not finished
  * by then takes minutes more. A failed poll is reported and polling goes on; the page never
  * blocks on it.
- * @param {number} prNumber
+ * @param {ReviewKey} prNumber
  * @param {PollOptions} [opts]
  * @returns {{ stop: () => void }}
  */
@@ -226,7 +238,7 @@ export function pollBundle(prNumber, opts = {}) {
     /** @type {PrBundle} */
     let bundle
     try {
-      bundle = await fetchBundle(prNumber, { fetchImpl: opts.fetchImpl })
+      bundle = await fetchBundle(prNumber, { poll: true, fetchImpl: opts.fetchImpl })
     } catch (err) {
       if (!stopped) {
         opts.onError?.(err)
@@ -302,7 +314,7 @@ export function uploadForm(url, form, opts = {}) {
 }
 
 /**
- * @param {number} prNumber
+ * @param {ReviewKey} prNumber
  * @param {File} file
  * @param {{ force?: boolean, onProgress?: (fraction: number) => void, xhrImpl?: () => XMLHttpRequest }} [opts]
  * @returns {Promise<import('./contract-types.js').ImportResult>}
@@ -317,7 +329,7 @@ export function importCanvas(prNumber, file, opts = {}) {
 }
 
 /**
- * @param {number} prNumber
+ * @param {ReviewKey} prNumber
  * @param {{ fetchImpl?: typeof fetch }} [opts]
  * @returns {Promise<import('./contract-types.js').SharedCanvasFetchResponse>}
  */
@@ -327,7 +339,7 @@ export function fetchSharedCanvas(prNumber, opts = {}) {
 
 /**
  * The zip as a blob plus the name the server chose, ready to hand to the browser.
- * @param {number} prNumber
+ * @param {ReviewKey} prNumber
  * @param {{ headSha?: string, fetchImpl?: typeof fetch }} [opts]
  * @returns {Promise<{ blob: Blob, filename: string }>}
  */
@@ -374,7 +386,7 @@ export function saveAppearance(input, opts = {}) {
 /* ---- AI Chat and its settings ---- */
 
 /**
- * @param {number} prNumber
+ * @param {ReviewKey} prNumber
  * @param {{ fetchImpl?: typeof fetch }} [opts]
  * @returns {Promise<import('./contract-types.js').ChatThreadsResponse>}
  */
@@ -383,16 +395,20 @@ export function fetchThreads(prNumber, opts = {}) {
 }
 
 /**
- * @param {number} prNumber
+ * @param {ReviewKey} prNumber
  * @param {{ fetchImpl?: typeof fetch }} [opts]
  * @returns {Promise<import('./contract-types.js').ChatThreadsResponse>}
  */
 export function createThread(prNumber, opts = {}) {
-  return fetchJson(`/api/prs/${prNumber}/chat/threads`, { method: 'POST', body: {}, fetchImpl: opts.fetchImpl })
+  return fetchJson(`/api/prs/${prNumber}/chat/threads`, {
+    method: 'POST',
+    body: {},
+    fetchImpl: opts.fetchImpl,
+  })
 }
 
 /**
- * @param {number} prNumber
+ * @param {ReviewKey} prNumber
  * @param {string} name
  * @param {{ fetchImpl?: typeof fetch }} [opts]
  * @returns {Promise<import('./contract-types.js').ChatHistoryResponse>}
@@ -404,12 +420,16 @@ export function fetchThreadHistory(prNumber, name, opts = {}) {
 }
 
 /**
- * @param {number} prNumber
+ * @param {ReviewKey} prNumber
  * @param {{ fetchImpl?: typeof fetch }} [opts]
  * @returns {Promise<{ cancelled: boolean }>}
  */
 export function cancelChat(prNumber, opts = {}) {
-  return fetchJson(`/api/prs/${prNumber}/chat/cancel`, { method: 'POST', body: {}, fetchImpl: opts.fetchImpl })
+  return fetchJson(`/api/prs/${prNumber}/chat/cancel`, {
+    method: 'POST',
+    body: {},
+    fetchImpl: opts.fetchImpl,
+  })
 }
 
 /**
@@ -489,7 +509,7 @@ export function readSseFrames(buffer, chunk) {
 /**
  * Sends one chat message and calls `onEvent` for every frame until the turn ends. Rejects with
  * an ApiError when the server refuses the message (a busy chat, a context it cannot resolve).
- * @param {number} prNumber
+ * @param {ReviewKey} prNumber
  * @param {{ message: string, context: import('./chat-context.js').ChatContext, thread?: string }} input
  * @param {{
  *   onEvent: (event: { event: string, data: unknown }) => void,

package/static/js/app.js

@@ -19,7 +19,7 @@ import { initDeepLinks } from './deep-link.js'
 import { initDiagrams } from './diagram.js'
 import { esc, qs } from './dom.js'
 import { exportCanvasZip } from './download.js'
-import { renderEmptyState, renderStaleState, staleBarHtml } from './empty-state.js'
+import { carriedOverBarHtml, renderEmptyState, renderStaleState, staleBarHtml } from './empty-state.js'
 import { errorCardHtml } from './errors.js'
 import { renderHeader } from './header.js'
 import { wireDropZone } from './import-zone.js'
@@ -33,8 +33,10 @@ import { initScrollSpy } from './scroll-spy.js'
 import { openSettingsDialog } from './settings.js'
 import { applySkin, nextSkin, readSkin, skinLabel } from './skin.js'
 import { applyTheme, nextTheme, readTheme, themeLabel } from './theme.js'
+import { hostLabel, setHost } from './host.js'
 
-/** @typedef {{ prNumber: number, owner: string, repo: string, version: string }} Bootstrap */
+/** @typedef {import('./contract-types.js').ReviewKey} ReviewKey */
+/** @typedef {{ prNumber: ReviewKey, owner: string, repo: string, version: string, host: import('./contract-types.js').PublicHost }} Bootstrap */
 
 /** @returns {Bootstrap | null} */
 function readBootstrap() {
@@ -57,12 +59,14 @@ function footerHtml(version, bundle) {
   const canvas = bundle?.canvas
     ? `<span>canvas <span class="mono">${esc(bundle.canvas.headSha.slice(0, 7))}</span> · ${esc(bundle.canvas.source)}</span>`
     : ''
-  return `<footer><span>pr-review ${esc(version)}</span>${canvas}<span>localhost only · nothing leaves this machine except GitHub posts you confirm</span></footer>`
+  return `<footer><span>pr-review ${esc(version)}</span>${canvas}<span>localhost only · nothing leaves this machine except ${esc(hostLabel())} posts you confirm</span></footer>`
 }
 
 /** @param {ReadonlyArray<string>} warnings */
 function bannerHtml(warnings) {
-  return warnings.length === 0 ? '' : `<div class="banner" role="status">${warnings.map(w => esc(w)).join(' · ')}</div>`
+  return warnings.length === 0
+    ? ''
+    : `<div class="banner" role="status">${warnings.map(w => esc(w)).join(' · ')}</div>`
 }
 
 /**
@@ -81,7 +85,7 @@ function toEnvelopeError(err) {
 /**
  * The patches for the bundle. The first visit builds derived/ while the bundle resolves, so the
  * parallel fetch can land before the patches exist; one more try after the bundle is enough.
- * @param {number} prNumber
+ * @param {ReviewKey} prNumber
  * @param {Promise<Record<string, string> | null>} started
  * @param {string} [headSha] the canvas commit, when it is not the PR head
  */
@@ -153,6 +157,7 @@ export class PrAppElement extends HTMLElement {
       this.innerHTML = errorCardHtml({ code: 'INTERNAL', message: 'missing bootstrap data' })
       return
     }
+    setHost(this.bootstrap.host)
     this.theme = readTheme(document.documentElement)
     this.skin = readSkin(document.documentElement)
     const patchesPromise = fetchPatches(this.bootstrap.prNumber).then(
@@ -222,7 +227,12 @@ export class PrAppElement extends HTMLElement {
         now,
       })
       defineLayerElements()
-      const staleBar = bundle.status === 'stale' && bundle.stale ? staleBarHtml(bundle.stale) : ''
+      const staleBar =
+        bundle.status === 'stale' && bundle.stale
+          ? staleBarHtml(bundle.stale, bundle.local)
+          : bundle.carriedOver
+            ? carriedOverBarHtml(bundle.carriedOver)
+            : ''
       this.innerHTML =
         header +
         bannerHtml(bundle.warnings) +
@@ -247,6 +257,8 @@ export class PrAppElement extends HTMLElement {
         state: bundle.state,
         capabilities,
         headSha: bundle.pr.headSha,
+        // The marks are keyed to the canvas on the page, so every mark names it.
+        ...(bundle.canvas === undefined ? {} : { canvasSha: bundle.canvas.headSha }),
       })
       const interactions = wireReview(this, session, {
         chat: () => this.chat,
@@ -369,7 +381,15 @@ export class PrAppElement extends HTMLElement {
       this.viewStale = true
       void this.render(bundle)
     })
-    wireDropZone(this, { prNumber: boot.prNumber, importImpl: importCanvas, onImported: () => void this.reload() })
+    // Importing a canvas a teammate attached is a pull request thing; local work has no thread
+    // to attach one to, and the local screens draw no drop zone.
+    if (typeof boot.prNumber === 'number') {
+      wireDropZone(this, {
+        prNumber: boot.prNumber,
+        importImpl: importCanvas,
+        onImported: () => void this.reload(),
+      })
+    }
   }
 
   /**

package/static/js/chat-panel.js

@@ -0,0 +1,93 @@
+// @ts-check
+
+/** Keeps the same chat mounted while switching between the sidebar and floating panel.
+ * @param {HTMLElement} root
+ * @param {HTMLElement} pane
+ */
+export function wireChatPanel(root, pane) {
+  const dialog = /** @type {HTMLDialogElement} */ (root.querySelector('#chat-dialog'))
+  const launcher = /** @type {HTMLButtonElement} */ (root.querySelector('#chat-launcher'))
+  const minimize = /** @type {HTMLButtonElement} */ (root.querySelector('#chat-minimize'))
+  const narrow = window.matchMedia('(max-width: 1360px)')
+  const mobile = window.matchMedia('(max-width: 600px)')
+  let expanded = false
+
+  function sync() {
+    if (dialog.open) dialog.close()
+    if (narrow.matches) {
+      dialog.append(pane)
+      if (expanded) {
+        if (mobile.matches) dialog.showModal()
+        else dialog.show()
+      }
+    } else {
+      dialog.before(pane)
+    }
+    launcher.setAttribute('aria-expanded', String(narrow.matches && expanded))
+    launcher.hidden = narrow.matches && expanded
+  }
+
+  function open() {
+    if (narrow.matches && !expanded) {
+      expanded = true
+      sync()
+    }
+    pane.querySelector('textarea')?.focus()
+  }
+
+  function close() {
+    expanded = false
+    sync()
+    launcher.focus()
+  }
+
+  /** @param {Event} event */
+  function cancel(event) {
+    event.preventDefault()
+    close()
+  }
+
+  /** @param {KeyboardEvent} event */
+  function trapFocus(event) {
+    if (event.key !== 'Tab' || !mobile.matches || !dialog.open) return
+    const controls = [
+      ...dialog.querySelectorAll('button, select, textarea, input, a[href], [tabindex]'),
+    ].filter(
+      el =>
+        el instanceof HTMLElement &&
+        el.tabIndex >= 0 &&
+        !el.matches(':disabled') &&
+        el.getClientRects().length
+    )
+    const first = /** @type {HTMLElement | undefined} */ (controls[0])
+    const last = /** @type {HTMLElement | undefined} */ (controls.at(-1))
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault()
+      last?.focus()
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault()
+      first?.focus()
+    }
+  }
+
+  launcher.addEventListener('click', open)
+  minimize.addEventListener('click', close)
+  dialog.addEventListener('cancel', cancel)
+  dialog.addEventListener('keydown', trapFocus)
+  narrow.addEventListener('change', sync)
+  mobile.addEventListener('change', sync)
+  sync()
+
+  return {
+    open,
+    stop() {
+      if (dialog.open) dialog.close()
+      launcher.removeEventListener('click', open)
+      minimize.removeEventListener('click', close)
+      dialog.removeEventListener('cancel', cancel)
+      dialog.removeEventListener('keydown', trapFocus)
+      narrow.removeEventListener('change', sync)
+      mobile.removeEventListener('change', sync)
+    },
+  }
+}

package/static/js/chat.js

@@ -8,6 +8,7 @@
 /** @typedef {import('./review-session.js').ReviewSession} ReviewSession */
 import { cancelChat, createThread, fetchThreadHistory, fetchThreads, streamChat } from './api.js'
 import { chatContextAttrs, chatContextLabel, sameChatContext, WHOLE_PR } from './chat-context.js'
+import { wireChatPanel } from './chat-panel.js'
 import {
   canScrollBy,
   chatScrollReducer,
@@ -22,6 +23,7 @@ import { postedCommentUrl, viewCommentHtml } from './comment-link.js'
 import { esc, qs } from './dom.js'
 import { getRenderContext } from './layers.js'
 import { renderMarkdown } from './markdown.js'
+import { postToLabel } from './host.js'
 import { splitChatAnswer, targetsFromFiles } from './proposed-comment.js'
 
 export const CHAT_WIDTH_KEY = 'pr-review.chat-width'
@@ -43,7 +45,8 @@ export function renderChatShell(opts) {
     `<button class="handle" type="button" id="chat-handle" role="separator" aria-orientation="vertical" aria-label="Resize AI Chat" aria-valuenow="${width}" aria-valuemin="${CHAT_WIDTH_MIN}" aria-valuemax="${CHAT_WIDTH_MAX}"></button>` +
     '<div class="chat-h"><h2 id="chat-h">AI Chat</h2><label class="sr" for="thread">Thread</label>' +
     '<select id="thread"></select>' +
-    '<button class="cmd" type="button" id="new-thread">new thread</button></div>' +
+    '<button class="cmd" type="button" id="new-thread">new thread</button>' +
+    '<button class="cmd chat-minimize" type="button" id="chat-minimize" aria-label="Minimize AI Chat">minimize</button></div>' +
     '<p class="ctx-line" id="chat-ctx-line">Context: <span class="ctx-chip" id="chat-ctx">whole PR</span>' +
     ' <button class="cmd" type="button" id="chat-clear" hidden>clear</button></p>' +
     '<div class="transcript" id="chat-log" role="log" aria-label="Transcript" aria-live="polite" tabindex="0">' +
@@ -55,7 +58,9 @@ export function renderChatShell(opts) {
     '<div class="tbtns"><button class="cmd fill" type="submit" id="chat-send">send</button>' +
     '<button class="cmd" type="button" id="chat-stop" hidden>stop</button>' +
     '<span class="muted small">enter to send</span></div></form>' +
-    '</aside>'
+    '</aside>' +
+    '<dialog class="chat-dialog" id="chat-dialog" aria-labelledby="chat-h"></dialog>' +
+    '<button class="chat-launcher" id="chat-launcher" type="button" aria-controls="chat-dialog" aria-expanded="false">AI Chat</button>'
   )
 }
 
@@ -97,18 +102,19 @@ export function writeChatWidth(storage, width) {
   storage?.setItem(CHAT_WIDTH_KEY, String(clampWidth(width)))
 }
 
-/** The four questions the quick menu offers, and the one that just focuses the box. */
+/** The questions the quick menu offers, and the one that just focuses the box. */
 export const QUICK_QUESTIONS = [
-  'Is this covered by tests?',
-  'What could break?',
+  'Suggestion to solve this?',
   'Why this way, and what were the alternatives?',
+  'What could break?',
   'Does this follow how the codebase already does it?',
+  'Is this covered by tests?',
 ]
 
 /**
  * @typedef {{
  *   root: HTMLElement,
- *   prNumber: number,
+ *   prNumber: import('./contract-types.js').ReviewKey,
  *   session: ReviewSession,
  *   storage?: Storage | null,
  *   api?: Partial<ChatApi>,
@@ -148,7 +154,9 @@ function turnHtml(role, bodyHtml, opts = {}) {
  */
 function turnInnerHtml(role, bodyHtml, opts = {}) {
   const note =
-    opts.incomplete === undefined ? '' : `<p class="muted small">the answer stopped early (${esc(opts.incomplete)})</p>`
+    opts.incomplete === undefined
+      ? ''
+      : `<p class="muted small">the answer stopped early (${esc(opts.incomplete)})</p>`
   return (
     `<span class="role">${role === 'assistant' ? 'AI Chat' : 'You'}</span>` +
     `<div class="prose">${bodyHtml}</div>${note}`
@@ -172,7 +180,7 @@ export function proposedCommentHtml(comment, id, postedUrl) {
     `<div class="prose">${renderMarkdown(comment.body)}</div>` +
     '<span class="tbtns">' +
     (postedUrl === undefined
-      ? `<button class="cmd fill" type="button" data-act="proposed-post" data-proposed="${esc(id)}" data-needs-post>post to github</button>`
+      ? `<button class="cmd fill" type="button" data-act="proposed-post" data-proposed="${esc(id)}" data-needs-post>${postToLabel()}</button>`
       : viewCommentHtml(postedUrl, true)) +
     `<button class="cmd" type="button" data-act="proposed-edit" data-proposed="${esc(id)}" data-needs-post>edit</button>` +
     `<button class="cmd" type="button" data-copy="${esc(comment.body)}">copy</button>` +
@@ -235,7 +243,11 @@ export function wireChat(options) {
   const { root, prNumber, session } = options
   const api = withDefaults(options.api)
   const storage =
-    options.storage === undefined ? (typeof localStorage === 'undefined' ? null : localStorage) : options.storage
+    options.storage === undefined
+      ? typeof localStorage === 'undefined'
+        ? null
+        : localStorage
+      : options.storage
   const paths = new Set(session.artifact.files.map(f => f.path))
   const targets = targetsFromFiles(session.artifact.files)
   const reducedMotion =
@@ -304,7 +316,8 @@ export function wireChat(options) {
   applyWidth(readChatWidth(storage))
 
   const layerTitle = /** @param {string} id */ id => session.artifact.layers.find(l => l.id === id)?.title
-  const pointTitle = /** @param {string} fp */ fp => session.artifact.points.find(p => p.fingerprint === fp)?.title
+  const pointTitle = /** @param {string} fp */ fp =>
+    session.artifact.points.find(p => p.fingerprint === fp)?.title
 
   const drawContext = () => {
     chip.textContent = chatContextLabel(context, layerTitle, pointTitle)
@@ -416,7 +429,8 @@ export function wireChat(options) {
     activeThread = data.activeThread
     select.innerHTML = data.threads
       .map(
-        t => `<option value="${esc(t.name)}"${t.name === data.activeThread ? ' selected' : ''}>${esc(t.title)}</option>`
+        t =>
+          `<option value="${esc(t.name)}"${t.name === data.activeThread ? ' selected' : ''}>${esc(t.title)}</option>`
       )
       .join('')
     if (data.threads.length === 0) {
@@ -510,7 +524,7 @@ export function wireChat(options) {
     const started = Date.now()
     const updateActivity = () => {
       const elapsed = Date.now() - started
-      activity.textContent = `Preparing answer${'.'.repeat(Math.floor(elapsed / 400) % 3 + 1)} · ${Math.floor(elapsed / 1000)}s`
+      activity.textContent = `Preparing answer${'.'.repeat((Math.floor(elapsed / 400) % 3) + 1)} · ${Math.floor(elapsed / 1000)}s`
     }
     updateActivity()
     const timer = setInterval(updateActivity, 400)
@@ -544,7 +558,10 @@ export function wireChat(options) {
               const previous = tools.get(id)
               const title = String(field('title') ?? 'tool')
               tools.delete(id)
-              tools.set(id, { title: title === 'tool' && previous ? previous.title : title, status: String(field('status') ?? 'pending') })
+              tools.set(id, {
+                title: title === 'tool' && previous ? previous.title : title,
+                status: String(field('status') ?? 'pending'),
+              })
               toolDetails.hidden = false
               const latest = tools.get(id)
               toolDetails.innerHTML = `<summary>${esc(latest.title)} · ${esc(latest.status)} (${tools.size} tool calls)</summary><ul>${[...tools.values()].map(t => `<li>${esc(t.title)} · ${esc(t.status)}</li>`).join('')}</ul>`
@@ -578,9 +595,13 @@ export function wireChat(options) {
       const toolSummary = toolDetails.querySelector('summary')
       if (toolSummary) toolSummary.textContent = `${tools.size} tool calls`
       activity.textContent = `Elapsed: ${Math.floor((Date.now() - started) / 1000)}s`
-      if (frame !== 0) { cancelFrame(frame); frame = 0 }
+      if (frame !== 0) {
+        cancelFrame(frame)
+        frame = 0
+      }
       setStreaming(false)
-      answer.body.innerHTML = text === '' ? '<span class="muted">no answer</span>' : renderAnswer(text, turnKey)
+      answer.body.innerHTML =
+        text === '' ? '<span class="muted">no answer</span>' : renderAnswer(text, turnKey)
       if (scroll.pinned) {
         scrollToBottom('follow')
       }
@@ -728,6 +749,7 @@ export function wireChat(options) {
   }
 
   const stopResize = wireResize(pane, root, storage, applyWidth)
+  const panel = wireChatPanel(root, pane)
 
   form.addEventListener('submit', onSubmit)
   root.addEventListener('click', onClick)
@@ -744,12 +766,12 @@ export function wireChat(options) {
     },
     setContext,
     focusInput() {
-      box.focus()
+      panel.open()
     },
     /** @param {ChatContext} next */
     ask(next) {
       setContext(next)
-      box.focus()
+      panel.open()
     },
     /**
      * Sends one of the quick questions about a target.
@@ -758,6 +780,7 @@ export function wireChat(options) {
      */
     askQuestion(next, question) {
       setContext(next)
+      panel.open()
       box.value = question
       void runCommand(sendButton, send, { pendingLabel: 'sending…' })
     },
@@ -775,6 +798,7 @@ export function wireChat(options) {
       select.removeEventListener('change', onThreadChange)
       box.removeEventListener('keydown', /** @type {EventListener} */ (onKeyDown))
       stopResize()
+      panel.stop()
     },
   }
 }