@vintasoftware/pr-review-canvas 0.2.0 → 0.3.0

package/static/js/interactions.js

@@ -27,13 +27,25 @@ import { flash, scrollIntoViewSafe } from './dom.js'
 import { refreshProgress } from './header.js'
 import { keyAction, openHelpDialog } from './keyboard.js'
 import { pointAnchorId, sanitizeKey } from './keys.js'
-import { getRenderContext, pathSet, setCardRenderedHook, setRenderContext, updateRenderState } from './layers.js'
+import {
+  getRenderContext,
+  pathSet,
+  setCardRenderedHook,
+  setRenderContext,
+  updateRenderState,
+} from './layers.js'
 import { buildNavOrder, layerOf, nextFile, nextLayer, prevFile, prevLayer } from './nav.js'
 import { issueCommentHtml } from './overview.js'
 import { applyDismissed, pointToMarkdown, postedUrls } from './points.js'
 import { layerProgress } from './progress.js'
 import { lineRefFromEvent, markSelection, selectionReducer } from './selection.js'
-import { fillSignoffDialog, openSignoffDialog, showSignoffError, showSignoffResult, signoffBody } from './signoff.js'
+import {
+  fillSignoffDialog,
+  openSignoffDialog,
+  showSignoffError,
+  showSignoffResult,
+  signoffBody,
+} from './signoff.js'
 
 /** @typedef {NonNullable<ReturnType<typeof import('./chat.js').wireChat>>} ChatHandle */
 
@@ -148,7 +160,8 @@ export function nextUnreviewedTarget(root, session, fromId, kind) {
     if (item === undefined || item.kind !== kind || item.other) {
       continue
     }
-    const id = item.kind === 'file' ? `layer:${item.layerId}/file:${sanitizeKey(item.path)}` : `layer:${item.layerId}`
+    const id =
+      item.kind === 'file' ? `layer:${item.layerId}/file:${sanitizeKey(item.path)}` : `layer:${item.layerId}`
     if (!session.isReviewed(id)) {
       return root.querySelector(`#${cssEscape(item.id)}`)
     }
@@ -167,7 +180,13 @@ export function nextUnreviewedTarget(root, session, fromId, kind) {
  */
 export function askTargetFor(root, focusId, focusPointId, selection) {
   if (selection !== null) {
-    return { kind: 'lines', path: selection.path, side: selection.side, start: selection.start, end: selection.end }
+    return {
+      kind: 'lines',
+      path: selection.path,
+      side: selection.side,
+      start: selection.start,
+      end: selection.end,
+    }
   }
   if (focusPointId !== null) {
     const el = root.querySelector(`[data-point="${cssEscape(focusPointId)}"] [data-act="ask"]`)
@@ -213,7 +232,8 @@ export function wireReview(root, session, opts = {}) {
 
   const paths = () => pathSet(getRenderContext()?.files ?? [])
   /** The diff key of a path, which is what the row ids are built from. */
-  const keyForPath = (/** @type {string} */ path) => getRenderContext()?.files.find(f => f.path === path)?.key ?? null
+  const keyForPath = (/** @type {string} */ path) =>
+    getRenderContext()?.files.find(f => f.path === path)?.key ?? null
   /** The time the page was drawn, which the comments it adds are timed against. */
   const renderNow = () => getRenderContext()?.now ?? new Date()
 
@@ -263,7 +283,10 @@ export function wireReview(root, session, opts = {}) {
     const answer = await session.postComment(input)
     const ctx = getRenderContext()
     if (answer.kind === 'review' && ctx !== null) {
-      setRenderContext({ ...ctx, comments: [...ctx.comments.filter(c => c.id !== answer.comment.id), answer.comment] })
+      setRenderContext({
+        ...ctx,
+        comments: [...ctx.comments.filter(c => c.id !== answer.comment.id), answer.comment],
+      })
       onState(session.state)
     }
     return answer
@@ -325,7 +348,8 @@ export function wireReview(root, session, opts = {}) {
    */
   const openComposer = (anchor, options, shape) => {
     closeComposers(root)
-    const node = shape === 'row' ? rowFrom(doc, composerRowHtml(options)) : nodeFrom(doc, composerHtml(options))
+    const node =
+      shape === 'row' ? rowFrom(doc, composerRowHtml(options)) : nodeFrom(doc, composerHtml(options))
     if (node === null) {
       return null
     }
@@ -364,7 +388,10 @@ export function wireReview(root, session, opts = {}) {
   }
 
   /** The inline comment that a posted review comment becomes on the page. */
-  const insertPostedReviewComment = (/** @type {Element} */ composerNode, /** @type {ReviewComment} */ comment) => {
+  const insertPostedReviewComment = (
+    /** @type {Element} */ composerNode,
+    /** @type {ReviewComment} */ comment
+  ) => {
     const thread = root.querySelector(
       `tr.thread[data-thread="${cssEscape(String(comment.inReplyToId ?? comment.id))}"]`
     )
@@ -461,9 +488,9 @@ export function wireReview(root, session, opts = {}) {
    * @param {string} id
    * @param {boolean} reviewed
    * @param {'layer' | 'file'} kind
-   * @param {{ quiet?: boolean }} [opts] `quiet` keeps a checkbox label intact while it runs
+   * @param {{ quiet?: boolean }} [reviewOptions] `quiet` keeps a checkbox label intact while it runs
    */
-  const markReviewed = (button, id, reviewed, kind, opts = {}) => {
+  const markReviewed = (button, id, reviewed, kind, reviewOptions = {}) => {
     const run = async () => {
       await session.setReviewed(id, reviewed)
       const parts = cardForReviewedId(root, id)
@@ -479,7 +506,7 @@ export function wireReview(root, session, opts = {}) {
       }
       toast(root, reviewed ? `${kind} marked reviewed` : `${kind} reopened`)
     }
-    void (opts.quiet === true
+    void (reviewOptions.quiet === true
       ? runControl(button, run)
       : runCommand(button, run, { pendingLabel: reviewed ? 'marking…' : 'unmarking…' }))
   }
@@ -641,7 +668,11 @@ export function wireReview(root, session, opts = {}) {
         return
       }
       composerSeq += 1
-      openComposer(full, { id: `composer-${composerSeq}`, label: 'Reply', kind: 'reply', inReplyToId: id }, 'block')
+      openComposer(
+        full,
+        { id: `composer-${composerSeq}`, label: 'Reply', kind: 'reply', inReplyToId: id },
+        'block'
+      )
     },
     'pr-comment': () => {
       const host = root.querySelector('.conversation .pr-composer-host')
@@ -733,7 +764,10 @@ export function wireReview(root, session, opts = {}) {
     }
     event.preventDefault()
     setSelection(
-      selectionReducer(selection, event.shiftKey ? { type: 'shift-click', target } : { type: 'click', target })
+      selectionReducer(
+        selection,
+        event.shiftKey ? { type: 'shift-click', target } : { type: 'click', target }
+      )
     )
     if (selection !== null && !event.shiftKey) {
       setSelection(selectionReducer(selection, { type: 'drag-start', target }))
@@ -807,12 +841,18 @@ export function wireReview(root, session, opts = {}) {
         const item = order.find(i => i.id === focusId)
         const wanted = decided.action === 'reviewed-file' ? 'file' : 'layer'
         const found =
-          item?.kind === wanted ? item : wanted === 'layer' && focusId !== null ? layerOf(order, focusId) : null
+          item?.kind === wanted
+            ? item
+            : wanted === 'layer' && focusId !== null
+              ? layerOf(order, focusId)
+              : null
         if (found === null || found === undefined || found.kind === 'overview') {
           break
         }
         const id =
-          found.kind === 'file' ? `layer:${found.layerId}/file:${sanitizeKey(found.path)}` : `layer:${found.layerId}`
+          found.kind === 'file'
+            ? `layer:${found.layerId}/file:${sanitizeKey(found.path)}`
+            : `layer:${found.layerId}`
         const parts = cardForReviewedId(root, id)
         const box = parts?.card.querySelector('input[data-reviewed-id]')
         if (box instanceof HTMLElement) {

package/static/js/keyboard.js

@@ -35,7 +35,10 @@ export function isTypingTarget(target) {
   }
   const tag = target.tagName.toLowerCase()
   return (
-    tag === 'input' || tag === 'textarea' || tag === 'select' || target.closest('[contenteditable="true"]') !== null
+    tag === 'input' ||
+    tag === 'textarea' ||
+    tag === 'select' ||
+    target.closest('[contenteditable="true"]') !== null
   )
 }
 
@@ -97,7 +100,9 @@ export function keyAction(event, opts = {}) {
 export const HELP_DIALOG_ID = 'help-dialog'
 
 export function helpDialogHtml() {
-  const rows = KEY_HELP.map(r => `<tr><td class="mono">${esc(r.keys)}</td><td>${esc(r.what)}</td></tr>`).join('')
+  const rows = KEY_HELP.map(r => `<tr><td class="mono">${esc(r.keys)}</td><td>${esc(r.what)}</td></tr>`).join(
+    ''
+  )
   return (
     `<dialog id="${HELP_DIALOG_ID}" class="help" aria-labelledby="help-h"><form method="dialog">` +
     '<h2 id="help-h">Keyboard</h2>' +

package/static/js/layers.js

@@ -117,7 +117,8 @@ export function railInnerHtml(artifact, state, opts = {}) {
     .map((layer, i) => {
       const progress = layerProgress(layer, state)
       const dotClass = progress === 'done' ? 'dot on' : progress === 'partial' ? 'dot half' : 'dot'
-      const dotLabel = progress === 'done' ? 'reviewed' : progress === 'partial' ? 'in progress' : 'not started'
+      const dotLabel =
+        progress === 'done' ? 'reviewed' : progress === 'partial' ? 'in progress' : 'not started'
       const reviewed = filesReviewed(layer, state)
       const files = layer.files.length
       const meta = reviewed > 0 && reviewed < files ? `${reviewed} of ${files} files` : fileCount(files)
@@ -206,7 +207,11 @@ export function layerDiagramHtml(layer) {
  * @param {ReadonlySet<string>} paths
  */
 export function judgmentHtml(layer, paths) {
-  const block = /** @param {string} cls @param {string} label @param {string | undefined} text */ (cls, label, text) =>
+  const block = /** @param {string} cls @param {string} label @param {string | undefined} text */ (
+    cls,
+    label,
+    text
+  ) =>
     text === undefined
       ? ''
       : `<div class="judgment ${cls}"><h3 class="lbl">${label}</h3><div class="prose">${renderMarkdown(text, { paths })}</div></div>`
@@ -230,7 +235,9 @@ export function layerPointsHtml(layer, points, paths, state, posted) {
     return ''
   }
   const active = own.filter(p => state.dismissed[p.fingerprint] === undefined).length
-  const cards = own.map(p => pointCardHtml(p, posted === undefined ? { paths, state } : { paths, state, posted }))
+  const cards = own.map(p =>
+    pointCardHtml(p, posted === undefined ? { paths, state } : { paths, state, posted })
+  )
   return `<h3 class="lbl sub">Attention points · <span class="point-count">${active}</span></h3><ol class="findings">${cards.join('')}</ol>`
 }
 
@@ -245,14 +252,16 @@ export function renderFileCard(lf, entry, layer, ctx) {
   const key = entry?.key ?? sanitizeKey(lf.path)
   const cardReviewedId = `layer:${layer.id}/file:${sanitizeKey(lf.path)}`
   const cardReviewed = ctx.state?.reviewed[cardReviewedId] === true
-  const collapsed = cardReviewed || (lf.collapsed === true && lf.annotations.length === 0 && ctx.keepOpen !== true)
+  const collapsed =
+    cardReviewed || (lf.collapsed === true && lf.annotations.length === 0 && ctx.keepOpen !== true)
   const isFirst = !ctx.firstCardFor.has(key)
   ctx.firstCardFor.add(key)
   const id = isFirst ? fileAnchorId(key) : `${fileAnchorId(key)}-${layer.key}`
   const pills = entry
     ? `<span class="pill add">+${entry.additions}</span><span class="pill del">&minus;${entry.deletions}</span>`
     : ''
-  const status = entry && entry.status !== 'modified' ? `<span class="status">${esc(entry.status)}</span>` : ''
+  const status =
+    entry && entry.status !== 'modified' ? `<span class="status">${esc(entry.status)}</span>` : ''
   const path =
     entry?.oldPath !== undefined
       ? `<span class="old">${esc(entry.oldPath)} &rarr; </span>${esc(lf.path)}`
@@ -411,7 +420,8 @@ export function hydrateFileCard(card, ctx, opts = {}) {
   const entry = ctx.files.find(f => f.key === key)
   const patch = ctx.patches?.[key]
   if (!entry || patch === undefined) {
-    host.innerHTML = '<div class="unavailable">Diff not available locally. Fetch the PR head and reload.</div>'
+    host.innerHTML =
+      '<div class="unavailable">Diff not available locally. Fetch the PR head and reload.</div>'
     return { rendered: false, deferred: false, placed: 0, missed: 0 }
   }
   const lines = patchLineCount(patch)
@@ -432,10 +442,10 @@ export function hydrateFileCard(card, ctx, opts = {}) {
         async () => {
           hydrateFileCard(card, ctx, { force: true })
           // The host element now holds a drawn diff, so a later link into it leaves it alone.
-          const host = card.closest('pr-file')
-          if (host instanceof PrFileElement) {
-            host.rendered = true
-            host.deferred = false
+          const fileHost = card.closest('pr-file')
+          if (fileHost instanceof PrFileElement) {
+            fileHost.rendered = true
+            fileHost.deferred = false
           }
         },
         { pendingLabel: 'drawing…' }
@@ -450,7 +460,9 @@ export function hydrateFileCard(card, ctx, opts = {}) {
   const layer = ctx.artifact.layers.find(l => l.id === layerId)
   const lf = layer?.files.find(f => f.path === entry.path)
   const annotations = lf?.annotations ?? []
-  const points = ctx.artifact.points.filter(p => p.path === entry.path && hunkIds.has(hunkIdForPoint(p, entry)))
+  const points = ctx.artifact.points.filter(
+    p => p.path === entry.path && hunkIds.has(hunkIdForPoint(p, entry))
+  )
   const threads = threadsForHunks(ctx.comments, entry, hunkIds)
   const { placed, missed } = applyDecorations(card, key, {
     annotations,

package/static/js/links.js

@@ -99,14 +99,20 @@ export function resolveLink(link, targets) {
     return { ok: false, message: `${link.path} is not in the diff` }
   }
   if (link.kind === 'hunk' && (link.n < 1 || link.n > file.hunks.length)) {
-    return { ok: false, message: `${link.path}#${link.n} does not exist (file has ${file.hunks.length} hunks)` }
+    return {
+      ok: false,
+      message: `${link.path}#${link.n} does not exist (file has ${file.hunks.length} hunks)`,
+    }
   }
   if (link.kind === 'line') {
     const start = hunkForLine(file.hunks, link.side, link.start)
     const end = hunkForLine(file.hunks, link.side, link.end)
     if (start === null || start !== end) {
       const range = link.end === link.start ? `${link.start}` : `${link.start}-${link.end}`
-      return { ok: false, message: `${link.path}:${range} (${link.side}) is not inside one hunk of the diff (${hunkLineRanges(file.hunks, link.side)})` }
+      return {
+        ok: false,
+        message: `${link.path}:${range} (${link.side}) is not inside one hunk of the diff (${hunkLineRanges(file.hunks, link.side)})`,
+      }
     }
   }
   return { ok: true }

package/static/js/nav.js

@@ -46,7 +46,8 @@ export function buildNavOrder(artifact) {
  * @returns {NavItem | null}
  */
 function step(order, currentId, kind, direction) {
-  const from = currentId === null ? (direction === 1 ? -1 : order.length) : order.findIndex(i => i.id === currentId)
+  const from =
+    currentId === null ? (direction === 1 ? -1 : order.length) : order.findIndex(i => i.id === currentId)
   const start = from === -1 && currentId !== null ? (direction === 1 ? -1 : order.length) : from
   for (let i = start + direction; i >= 0 && i < order.length; i += direction) {
     const item = order[i]
@@ -87,5 +88,7 @@ export function layerOf(order, id) {
   if (!item || item.kind === 'overview') {
     return null
   }
-  return item.kind === 'layer' ? item : (order.find(i => i.kind === 'layer' && i.layerId === item.layerId) ?? null)
+  return item.kind === 'layer'
+    ? item
+    : (order.find(i => i.kind === 'layer' && i.layerId === item.layerId) ?? null)
 }

package/static/js/overview.js

@@ -2,11 +2,32 @@
 /** @typedef {import('./contract-types.js').PrBundle} PrBundle */
 /** @typedef {import('./contract-types.js').IssueComment} IssueComment */
 
-import { commentHtml } from './diff-decorations.js'
 import { viewCommentHtml } from './comment-link.js'
 import { detailsSummaryHtml, esc, avatarHtml, timeAgo } from './dom.js'
 import { renderMarkdown } from './markdown.js'
 import { dismissedListHtml, postedUrls, sevsumHtml } from './points.js'
+import { buildThreads } from './threads.js'
+
+/**
+ * @param {PrBundle['comments']['reviewComments']} comments
+ * @param {Date} now
+ */
+function outdatedCommentsHtml(comments, now) {
+  const threads = [...buildThreads(comments).outdated.values()].flat()
+  if (!threads.length) return ''
+  const count = threads.reduce((total, thread) => total + 1 + thread.replies.length, 0)
+  const entries = threads
+    .map(thread => {
+      const line = thread.root.originalLine
+      return (
+        `<div class="body"><p class="muted small">${esc(thread.path)}${line === null ? '' : `:${line} (original)`}${thread.resolved ? ' · resolved' : ''}</p>` +
+        [thread.root, ...thread.replies].map(comment => issueCommentHtml(comment, now)).join('') +
+        '</div>'
+      )
+    })
+    .join('')
+  return `<details class="outdated-comments">${detailsSummaryHtml(`<span>Outdated comments · ${count}</span>`, 'Toggle outdated comments')}${entries}</details>`
+}
 
 /**
  * "What changes": the PR-wide summary as one prose block.
@@ -61,7 +82,12 @@ export function conversationHtml(comments, now) {
  */
 export function renderOverview(bundle, ctx) {
   const artifact = bundle.artifact
-  const active = artifact ? artifact.points.filter(p => bundle.state.dismissed[p.fingerprint] === undefined) : []
+  const reviews = (bundle.comments.reviews ?? []).filter(
+    review => review.state !== 'COMMENTED' || review.body.trim().length > 0
+  )
+  const active = artifact
+    ? artifact.points.filter(p => bundle.state.dismissed[p.fingerprint] === undefined)
+    : []
   const summary = artifact ? summaryHtml(artifact.summary, ctx.paths) : ''
   const description = bundle.pr.body.trim()
     ? `<details class="pr-desc">${detailsSummaryHtml('<span>PR description (from GitHub)</span>', 'Toggle PR description')}<div class="body prose">${renderMarkdown(bundle.pr.body, { paths: ctx.paths, github: true })}</div></details>`
@@ -72,8 +98,10 @@ export function renderOverview(bundle, ctx) {
     `<div class="body">${summary}</div>` +
     description +
     conversationHtml(bundle.comments.issueComments, ctx.now) +
-    (bundle.comments.reviews ?? []).map(review => `<div class="body"><span class="pill">${esc(review.state.toLowerCase().replaceAll('_', ' '))}</span>${issueCommentHtml(review, ctx.now)}</div>`).join('') +
-    (bundle.comments.reviewComments.length ? `<details class="body all-review-comments">${detailsSummaryHtml(`<span>All review comments · ${bundle.comments.reviewComments.length}</span>`, 'Toggle all review comments')}${bundle.comments.reviewComments.map(c => `<div><p class="muted small">${esc(c.path)}${c.line ? `:${c.line}` : ''}${c.outdated ? ' · outdated' : ''}${c.resolved ? ' · resolved' : ''}</p>${commentHtml(c, ctx.now)}</div>`).join('')}</details>` : '') +
+    (reviews.length
+      ? `<details class="review-history">${detailsSummaryHtml(`<span>Review history · ${reviews.length}</span>`, 'Toggle review history')}${reviews.map(review => `<div class="body review-entry"><span class="pill">${esc(review.state.toLowerCase().replaceAll('_', ' '))}</span>${issueCommentHtml(review, ctx.now)}</div>`).join('')}</details>`
+      : '') +
+    outdatedCommentsHtml(bundle.comments.reviewComments, ctx.now) +
     (artifact
       ? dismissedListHtml(artifact.points, bundle.state, {
           paths: ctx.paths,

package/static/js/points.js

@@ -190,7 +190,8 @@ export function applyDismissed(root, points, state, ctx) {
   }
   const host = root.querySelector('.dismissed-list')
   if (host !== null) {
-    const expanded = host.querySelector('[data-act="show-dismissed"]')?.getAttribute('aria-expanded') === 'true'
+    const expanded =
+      host.querySelector('[data-act="show-dismissed"]')?.getAttribute('aria-expanded') === 'true'
     const template = document.createElement('template')
     template.innerHTML = dismissedListHtml(points, state, ctx, expanded)
     const next = template.content.firstElementChild
@@ -219,7 +220,7 @@ export function pointRowHtml(p, ctx) {
   const dismissed = ctx.state?.dismissed[p.fingerprint] !== undefined
   const posted = postedFor(p, ctx)
   return (
-    `<tr class="ifind ${p.level}" data-point="${esc(p.id)}" data-fingerprint="${esc(p.fingerprint)}"${dismissed ? ' hidden' : ''}><td class="ln" colspan="3"></td><td class="code x">` +
+    `<tr class="ifind ${p.level}" data-point="${esc(p.id)}" data-fingerprint="${esc(p.fingerprint)}"${dismissed ? ' hidden' : ''}><td class="code x" colspan="4">` +
     `<div class="f-title">${squareHtml(p)}<span>${esc(p.title)}</span><span class="pill kind">${esc(p.kind)}</span></div>` +
     `<div class="prose">${renderMarkdown(p.body, { paths: ctx.paths })}</div>` +
     `${pointCommandsHtml(p, { postedUrl: posted })}</td></tr>`

package/static/js/progress.js

@@ -45,5 +45,6 @@ export function progressSummary(artifact, state) {
  * @param {PrState} state
  */
 export function filesReviewed(layer, state) {
-  return layer.files.filter(f => state.reviewed[`layer:${layer.id}/file:${sanitizeKey(f.path)}`] === true).length
+  return layer.files.filter(f => state.reviewed[`layer:${layer.id}/file:${sanitizeKey(f.path)}`] === true)
+    .length
 }

package/static/js/proposed-comment.js

@@ -63,7 +63,10 @@ export function parseProposedComment(source, targets) {
     return { reason: 'side must be "new" or "old"' }
   }
   const side = sideRaw === 'old' ? 'old' : 'new'
-  if (startRaw !== undefined && (typeof startRaw !== 'number' || !Number.isInteger(startRaw) || startRaw <= 0)) {
+  if (
+    startRaw !== undefined &&
+    (typeof startRaw !== 'number' || !Number.isInteger(startRaw) || startRaw <= 0)
+  ) {
     return { reason: 'startLine must be a line number' }
   }
   const startLine = typeof startRaw === 'number' ? startRaw : undefined

package/static/js/quick-questions.js

@@ -18,7 +18,8 @@ export const ASK_SOMETHING_ELSE = 'ask something else…'
 export function quickMenuHtml() {
   const items = [...QUICK_QUESTIONS, ASK_SOMETHING_ELSE]
     .map(
-      (q, i) => `<button class="qq-item" type="button" role="menuitem" tabindex="-1" data-qq="${i}">${esc(q)}</button>`
+      (q, i) =>
+        `<button class="qq-item" type="button" role="menuitem" tabindex="-1" data-qq="${i}">${esc(q)}</button>`
     )
     .join('')
   return `<div class="qq-menu" id="${QQ_MENU_ID}" role="menu" aria-label="Quick questions" hidden>${items}</div>`

package/static/js/regenerate.js

@@ -65,5 +65,8 @@ export function canvasChanged(current, next) {
   if (current.status !== 'ready' || !current.artifact || !current.canvas) {
     return true
   }
-  return next.canvas.headSha !== current.canvas.headSha || next.artifact.generatedAt !== current.artifact.generatedAt
+  return (
+    next.canvas.headSha !== current.canvas.headSha ||
+    next.artifact.generatedAt !== current.artifact.generatedAt
+  )
 }

package/static/js/signoff.js

@@ -20,7 +20,9 @@ export const LOADING_REASON = 'the review body is still loading'
  * @returns {string | null}
  */
 export function approveBlockedReason(artifact, state) {
-  const [first, ...rest] = artifact.layers.filter(l => l.kind !== 'other' && layerProgress(l, state) !== 'done')
+  const [first, ...rest] = artifact.layers.filter(
+    l => l.kind !== 'other' && layerProgress(l, state) !== 'done'
+  )
   if (first === undefined) {
     return null
   }
@@ -75,7 +77,9 @@ export function openSignoffDialog(root, opts) {
   if (!(dialog instanceof HTMLDialogElement)) {
     throw new Error('sign-off dialog did not render')
   }
-  dialog.querySelector('[data-act="markdown-write"]')?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+  dialog
+    .querySelector('[data-act="markdown-write"]')
+    ?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
   dialog.setAttribute('data-event', opts.event)
   const heading = dialog.querySelector('#signoff-h')
   if (heading !== null) {

package/static/styles/base.css

@@ -22,8 +22,10 @@
   --s4: var(--v4);
   --s5: var(--v5);
   --s6: var(--v6);
-  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --sans:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji';
+  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
 
   --v1: light-dark(#ffd43b, #ffe066);
   --v2: light-dark(#ffa94d, #ffc078);
@@ -31,7 +33,15 @@
   --v4: light-dark(#da77f2, #e599f7);
   --v5: light-dark(#9775fa, #b197fc);
   --v6: light-dark(#748ffc, #91a7ff);
-  --stripe-y: linear-gradient(180deg, var(--v1) 0 1px, var(--v2) 1px 2px, var(--v3) 2px 3px, var(--v4) 3px 4px, var(--v5) 4px 5px, var(--v6) 5px 6px);
+  --stripe-y: linear-gradient(
+    180deg,
+    var(--v1) 0 1px,
+    var(--v2) 1px 2px,
+    var(--v3) 2px 3px,
+    var(--v4) 3px 4px,
+    var(--v5) 4px 5px,
+    var(--v6) 5px 6px
+  );
 
   --bg: light-dark(#ffffff, #1e1f2b);
   --panel: light-dark(#ffffff, #282a3a);
@@ -80,10 +90,10 @@
 
 /* The server writes `data-theme` for every load. `auto` matches neither rule, which leaves the
    `color-scheme: light dark` above to follow the operating system. */
-:root[data-theme="dark"] {
+:root[data-theme='dark'] {
   color-scheme: dark;
 }
-:root[data-theme="light"] {
+:root[data-theme='light'] {
   color-scheme: light;
 }
 
@@ -218,6 +228,6 @@ strong {
 }
 
 /* The hidden attribute takes priority over component layout styles. */
-[hidden]:not([hidden="until-found"]) {
+[hidden]:not([hidden='until-found']) {
   display: none !important;
 }

package/static/styles/chat-panel.css

@@ -0,0 +1,81 @@
+.chat-launcher,
+.chat-minimize {
+  display: none;
+}
+@media (max-width: 1360px) {
+  .chat-launcher {
+    display: block;
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    z-index: 10;
+    padding: 14px 20px;
+    border: 1px solid var(--ink);
+    border-radius: 999px;
+    background: var(--accent);
+    color: var(--bg);
+    box-shadow: 0 4px 20px #0003;
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  .chat-launcher[hidden] {
+    display: none;
+  }
+  .chat-minimize {
+    display: inline-block;
+  }
+  dialog.chat-dialog {
+    position: fixed;
+    inset: auto 20px 20px auto;
+    width: min(420px, calc(100vw - 40px));
+    height: min(680px, calc(100dvh - 40px));
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: 1px solid var(--ink);
+    border-radius: 12px;
+    background: var(--panel);
+    color: var(--fg);
+    box-shadow: 0 8px 32px #0004;
+    overflow: hidden;
+    z-index: 11;
+  }
+  .chat-dialog .chat {
+    position: relative;
+    top: auto;
+    height: 100%;
+    padding: 0;
+  }
+  .chat-dialog .chat-h,
+  .chat-dialog .ctx-line,
+  .chat-dialog .chat-composer {
+    flex-shrink: 0;
+  }
+  .chat-dialog .chat-h h2 {
+    margin-bottom: 0;
+  }
+  .chat-dialog .chat-composer {
+    margin: 0;
+    padding: 12px 14px;
+    gap: 8px;
+  }
+  .chat-dialog textarea {
+    max-height: 25dvh;
+  }
+}
+@media (max-width: 600px) {
+  dialog.chat-dialog {
+    inset: auto 8px max(8px, env(safe-area-inset-bottom)) 8px;
+    width: auto;
+    height: calc(100dvh - 24px - env(safe-area-inset-bottom));
+  }
+  .chat-launcher {
+    right: 16px;
+    bottom: max(16px, env(safe-area-inset-bottom));
+  }
+  html:has(.chat-dialog:modal) {
+    overflow: hidden;
+  }
+}

package/static/styles/chat-tools.css

@@ -1,4 +1,32 @@
 /* Chat context, proposed comments, quick questions, and settings. */
+.chat-tool-calls > summary {
+  padding: 4px 0;
+  gap: 8px;
+  align-items: baseline;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+.chat-tool-calls > summary::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  flex: 0 0 6px;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(-45deg);
+}
+.chat-tool-calls[open] > summary::before {
+  transform: rotate(45deg);
+}
+.chat-tool-calls > ul {
+  margin: 4px 0 8px;
+  padding-left: 14px;
+  list-style: none;
+}
+.chat-tool-calls > ul > li {
+  margin: 4px 0;
+  overflow-wrap: anywhere;
+}
 .ctx-line {
   display: flex;
   align-items: baseline;

package/static/styles/chat.css

@@ -25,7 +25,7 @@
   z-index: 3;
 }
 .handle::before {
-  content: "";
+  content: '';
   width: 4px;
   height: 36px;
   border-left: 1px solid currentColor;