agent-canvas 0.8.0 → 0.8.2

package/daemon/review-widget/anchor.ts

@@ -1,5 +1,8 @@
 import type { ReviewAnchor } from '../src/review/model'
+import { browserOf } from './browser'
 import { contextOf, htmlOf } from './markup'
+import { createdInLibrary } from './source'
+import { styleOf } from './style'
 
 const MAX_TEXT = 120
 const QUOTE_CONTEXT = 40
@@ -10,6 +13,14 @@ function shorten(text: string, max = MAX_TEXT): string {
 	return collapsed.length > max ? `${collapsed.slice(0, max - 1)}…` : collapsed
 }
 
+/** The element's text with a space between text nodes: adjacent inline elements otherwise run their words together. */
+function textOf(element: Element): string {
+	const walker = element.ownerDocument.createTreeWalker(element, NodeFilter.SHOW_TEXT)
+	const parts: string[] = []
+	for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) parts.push(node.textContent ?? '')
+	return parts.join(' ')
+}
+
 const IMPLICIT_ROLES: Record<string, string> = {
 	button: 'button',
 	select: 'combobox',
@@ -65,7 +76,8 @@ export function nameOf(element: Element): string | undefined {
 	const role = roleOf(element)
 	const namedByContent = role === 'button' || role === 'link' || role === 'heading' || role === 'cell' || role === 'columnheader' || role === 'tab'
 		|| role === 'menuitem' || role === 'option'
-	if (namedByContent && element.textContent !== null && element.textContent.trim() !== '') return shorten(element.textContent)
+	const text = textOf(element)
+	if (namedByContent && text.trim() !== '') return shorten(text)
 	return undefined
 }
 
@@ -114,8 +126,9 @@ export function componentsOf(element: Element): string[] {
 	while (isRecord(fiber) && names.length < 40) {
 		// Bundlers suffix a name that collides in their scope (`Card` → `Card13`); the source still says `Card`.
 		const name = componentName(fiber['type'])?.replace(/(?<=[a-z])\d+$/, '')
-		// Context providers wrap whole apps and say nothing about where the element is.
-		if (name !== undefined && /^[A-Z]/.test(name) && !name.endsWith('Provider') && names[0] !== name) names.unshift(name)
+		// Context providers wrap whole apps and say nothing about where the element is; nor do a library's own wrappers.
+		const telling = name !== undefined && /^[A-Z]/.test(name) && !name.endsWith('Provider') && !createdInLibrary(fiber)
+		if (telling && names[0] !== name) names.unshift(name)
 		fiber = fiber['return']
 	}
 	return names.slice(-MAX_COMPONENTS)
@@ -144,10 +157,12 @@ function quoteOf(element: Element, range: Range): ReviewAnchor['quote'] {
 export function describe(element: Element, url: string, range?: Range): ReviewAnchor {
 	const role = roleOf(element)
 	const name = nameOf(element)
-	const text = element.textContent === null ? '' : shorten(element.textContent)
+	const text = shorten(textOf(element))
 	const components = componentsOf(element)
 	const quote = range === undefined ? undefined : quoteOf(element, range)
 	const context = contextOf(element)
+	const view = element.ownerDocument.defaultView
+	const style = view === null ? '' : styleOf(view.getComputedStyle(element))
 	return {
 		url,
 		selector: selectorOf(element),
@@ -157,6 +172,8 @@ export function describe(element: Element, url: string, range?: Range): ReviewAn
 		...(components.length === 0 ? {} : { components }),
 		...(quote === undefined ? {} : { quote }),
 		...(context === undefined ? {} : { context }),
+		...(view === null ? {} : { browser: browserOf(view) }),
+		...(style === '' ? {} : { style }),
 		html: htmlOf(element),
 	}
 }

package/daemon/review-widget/browser.ts

@@ -0,0 +1,46 @@
+import type { ReviewAnchor } from '../src/review/model'
+
+type ReviewBrowser = NonNullable<ReviewAnchor['browser']>
+
+const MAX_UNKNOWN = 100
+
+/** Most specific first: Edge and Opera also name Chrome, and Chrome also names Safari. */
+const BROWSERS: ReadonlyArray<readonly [string, RegExp]> = [
+	['Edge', /\bEdg(?:e|A|iOS)?\/(\d+)/],
+	['Opera', /\bOPR\/(\d+)/],
+	['Firefox', /\b(?:Firefox|FxiOS)\/(\d+)/],
+	['Chrome', /\b(?:Chrome|CriOS)\/(\d+)/],
+	['Safari', /\bVersion\/(\d+)[^ ]* (?:Mobile\/\S+ )?Safari\//],
+]
+
+/** Most specific first: Android also names Linux, and iOS names Mac OS X. */
+const SYSTEMS: ReadonlyArray<readonly [string, RegExp]> = [
+	['Android', /\bAndroid\b/],
+	['iOS', /\b(?:iPhone|iPad|iPod)\b/],
+	['Windows', /\bWindows\b/],
+	['macOS', /\bMac OS X\b/],
+	['Linux', /\bLinux\b/],
+]
+
+/** Browser, major version and operating system, e.g. `Chrome 141 · Linux`; the rest of a user agent is noise. */
+export function browserName(userAgent: string): string {
+	let browser: string | undefined
+	for (const [name, pattern] of BROWSERS) {
+		const version = pattern.exec(userAgent)?.[1]
+		if (version !== undefined) {
+			browser = `${name} ${version}`
+			break
+		}
+	}
+	const system = SYSTEMS.find(([, pattern]) => pattern.test(userAgent))?.[0]
+	const parts = [browser, system].filter((part) => part !== undefined)
+	return parts.length === 0 ? userAgent.slice(0, MAX_UNKNOWN) : parts.join(' · ')
+}
+
+export function browserOf(view: Window): ReviewBrowser {
+	return {
+		name: browserName(view.navigator.userAgent),
+		viewport: { width: view.innerWidth, height: view.innerHeight, scale: view.devicePixelRatio },
+		colorScheme: view.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
+	}
+}

package/daemon/review-widget/client.ts

@@ -7,6 +7,7 @@ export interface ReviewEvents {
 	threads(threads: readonly ReviewThread[]): void
 	agentWatching(watching: boolean): void
 	connected(connected: boolean): void
+	reload(path: string): void
 }
 
 function isRecord(value: unknown): value is Record<string, unknown> {
@@ -24,6 +25,7 @@ function readFrame(data: unknown): ReviewBrowserFrame | undefined {
 	}
 	if (!isRecord(frame)) return undefined
 	if (frame['type'] === 'agent-status' && typeof frame['watching'] === 'boolean') return { type: 'agent-status', watching: frame['watching'] }
+	if (frame['type'] === 'reload' && typeof frame['path'] === 'string') return { type: 'reload', path: frame['path'] }
 	if (frame['type'] !== 'threads') return undefined
 	const parsed = threadListSchema.safeParse(frame)
 	return parsed.success ? { type: 'threads', threads: parsed.data.threads } : undefined
@@ -51,6 +53,7 @@ export class ReviewClient {
 			const frame = readFrame(event.data)
 			if (frame?.type === 'threads') events.threads(frame.threads)
 			if (frame?.type === 'agent-status') events.agentWatching(frame.watching)
+			if (frame?.type === 'reload') events.reload(frame.path)
 		}
 		socket.onclose = () => {
 			events.connected(false)
@@ -75,6 +78,10 @@ export class ReviewClient {
 		return this.request('POST', `/threads/${threadId}/send`)
 	}
 
+	sendNotes(): Promise<unknown> {
+		return this.request('POST', '/notes/send')
+	}
+
 	setResolved(threadId: string, resolved: boolean): Promise<unknown> {
 		return this.request('POST', `/threads/${threadId}/${resolved ? 'resolve' : 'reopen'}`)
 	}

package/daemon/review-widget/source.ts

@@ -1,5 +1,5 @@
 import { originalPositionFor, TraceMap } from '@jridgewell/trace-mapping'
-import type { ReviewSource } from '../src/review/model'
+import { MAX_SOURCE_FILE, type ReviewSource } from '../src/review/model'
 
 /** A frame of a development stack, still in the bundle the page loaded. */
 export interface BundleFrame {
@@ -19,13 +19,20 @@ function isRecord(value: unknown): value is Record<string, unknown> {
 	return typeof value === 'object' && value !== null
 }
 
+/** React Refresh assigns an anonymous component to `_c`, `_c2`, …, which then becomes its name. */
+const REFRESH_TEMPORARY = /^_c\d*$/
+
 function nameOf(type: unknown): string | undefined {
 	if (typeof type === 'string') return type
-	if (typeof type === 'function') return type.name === '' ? undefined : type.name.replace(/(?<=[a-z])\d+$/, '')
+	if (typeof type === 'function') {
+		return type.name === '' || REFRESH_TEMPORARY.test(type.name) ? undefined : type.name.replace(/(?<=[a-z])\d+$/, '')
+	}
 	if (isRecord(type)) return nameOf(type['type']) ?? nameOf(type['render'])
 	return undefined
 }
 
+const LIBRARY = /\/node_modules\//
+
 /** The first application frame of a stack: where the JSX was written. */
 function creationFrame(stack: string): Omit<BundleFrame, 'label'> | undefined {
 	for (const line of stack.split('\n').slice(1)) {
@@ -54,13 +61,22 @@ export function bundleFrames(element: Element): BundleFrame[] {
 		const stack = isRecord(fiber['_debugStack']) ? fiber['_debugStack']['stack'] : undefined
 		if (typeof stack !== 'string') continue
 		const frame = creationFrame(stack)
-		if (frame === undefined) continue
+		// An element a dependency created is not the reviewer's code to change.
+		if (frame === undefined || LIBRARY.test(frame.url)) continue
 		const owner = isRecord(fiber['_debugOwner']) ? nameOf(fiber['_debugOwner']['type']) : undefined
 		frames.push({ label: owner === undefined ? `<${name}>` : `<${name}> in ${owner}`, ...frame })
 	}
 	return frames
 }
 
+/** Whether a dependency, not the application, created the fiber's element; unknown without a development stack. */
+export function createdInLibrary(fiber: Record<string, unknown>): boolean {
+	const stack = isRecord(fiber['_debugStack']) ? fiber['_debugStack']['stack'] : undefined
+	if (typeof stack !== 'string') return false
+	const frame = creationFrame(stack)
+	return frame !== undefined && LIBRARY.test(frame.url)
+}
+
 const traceMaps = new Map<string, Promise<TraceMap | null>>()
 
 async function loadTraceMap(scriptUrl: string): Promise<TraceMap | null> {
@@ -70,7 +86,17 @@ async function loadTraceMap(scriptUrl: string): Promise<TraceMap | null> {
 	const mapUrl = new URL(reference, scriptUrl).href
 	const map: unknown = await fetch(mapUrl).then((response) => response.json())
 	if (!isRecord(map) || map['version'] !== 3) return null
-	return new TraceMap(JSON.stringify(map), mapUrl)
+	return new TraceMap(JSON.stringify(map), sourcesBase(map, mapUrl, scriptUrl))
+}
+
+/**
+ * The URL a map's relative `sources` resolve against. An inline `data:` map has no location of its own: Vite names
+ * the module's absolute path in `file`; otherwise the sources sit next to the script.
+ */
+function sourcesBase(map: Record<string, unknown>, mapUrl: string, scriptUrl: string): string {
+	if (!mapUrl.startsWith('data:')) return mapUrl
+	const file = map['file']
+	return typeof file === 'string' && file.startsWith('/') ? new URL(file, 'file:///').href : scriptUrl
 }
 
 function traceMapFor(scriptUrl: string): Promise<TraceMap | null> {
@@ -82,8 +108,15 @@ function traceMapFor(scriptUrl: string): Promise<TraceMap | null> {
 	return map
 }
 
-function sourcePath(source: string): string {
-	return source.startsWith('file://') ? decodeURIComponent(new URL(source).pathname) : source
+/** A file path when the map names one; a source on the dev server becomes its path from the server's root. */
+function sourcePath(source: string, scriptUrl: string): string {
+	if (!URL.canParse(source)) return source
+	const url = new URL(source)
+	if (url.protocol === 'file:') return decodeURIComponent(url.pathname)
+	if (url.origin !== new URL(scriptUrl).origin) return source
+	const path = decodeURIComponent(url.pathname)
+	// Vite serves files outside its root under `/@fs/<absolute path>`.
+	return path.startsWith('/@fs/') ? path.slice('/@fs'.length) : path.slice(1)
 }
 
 async function resolveFrame(frame: BundleFrame): Promise<ReviewSource | null> {
@@ -92,7 +125,10 @@ async function resolveFrame(frame: BundleFrame): Promise<ReviewSource | null> {
 	// Stack columns count from 1, source map columns from 0.
 	const position = originalPositionFor(map, { line: frame.line, column: frame.column - 1 })
 	if (position.source === null || position.line === null) return null
-	return { label: frame.label, file: sourcePath(position.source), line: position.line, column: position.column + 1 }
+	const file = sourcePath(position.source, frame.url)
+	// One unusable source must not fail the whole thread against the schema.
+	if (file.length > MAX_SOURCE_FILE) return null
+	return { label: frame.label, file, line: position.line, column: position.column + 1 }
 }
 
 /** Source positions of the frames, through the bundles' source maps; frames a map does not cover are left out. */

package/daemon/review-widget/style.ts

@@ -0,0 +1,51 @@
+import { MAX_STYLE } from '../src/review/model'
+
+type ComputedStyle = Pick<CSSStyleDeclaration, 'getPropertyValue'>
+
+const TRANSPARENT = 'rgba(0, 0, 0, 0)'
+
+/** Four sides in CSS shorthand order, collapsed the way a person writes them: `8px`, `8px 12px`, … */
+function sides(style: ComputedStyle, property: 'margin' | 'padding'): string {
+	const [top, right, bottom, left] = ['top', 'right', 'bottom', 'left'].map((side) => style.getPropertyValue(`${property}-${side}`))
+	if (top === right && right === bottom && bottom === left) return top ?? ''
+	if (top === bottom && right === left) return `${top} ${right}`
+	if (right === left) return `${top} ${right} ${bottom}`
+	return `${top} ${right} ${bottom} ${left}`
+}
+
+function gapOf(style: ComputedStyle): string {
+	const row = style.getPropertyValue('row-gap')
+	const column = style.getPropertyValue('column-gap')
+	return row === column ? row : `${row} ${column}`
+}
+
+/**
+ * The computed values that explain an element's box, layout and type, as CSS declarations. Initial values are left
+ * out; flex and grid properties only appear on flex and grid containers.
+ */
+export function styleOf(style: ComputedStyle): string {
+	const display = style.getPropertyValue('display')
+	const flex = display.endsWith('flex')
+	const grid = display.endsWith('grid')
+	const declarations: Array<readonly [string, string, boolean]> = [
+		['display', display, true],
+		['position', style.getPropertyValue('position'), style.getPropertyValue('position') !== 'static'],
+		['flex-direction', style.getPropertyValue('flex-direction'), flex],
+		['flex-wrap', style.getPropertyValue('flex-wrap'), flex && style.getPropertyValue('flex-wrap') !== 'nowrap'],
+		['grid-template-columns', style.getPropertyValue('grid-template-columns'), grid],
+		['align-items', style.getPropertyValue('align-items'), flex || grid],
+		['justify-content', style.getPropertyValue('justify-content'), flex || grid],
+		['gap', gapOf(style), (flex || grid) && gapOf(style) !== 'normal'],
+		['width', style.getPropertyValue('width'), true],
+		['height', style.getPropertyValue('height'), true],
+		['margin', sides(style, 'margin'), sides(style, 'margin') !== '0px'],
+		['padding', sides(style, 'padding'), sides(style, 'padding') !== '0px'],
+		['font-size', style.getPropertyValue('font-size'), true],
+		['line-height', style.getPropertyValue('line-height'), true],
+		['font-weight', style.getPropertyValue('font-weight'), true],
+		['color', style.getPropertyValue('color'), true],
+		['background-color', style.getPropertyValue('background-color'), style.getPropertyValue('background-color') !== TRANSPARENT],
+	]
+	const text = declarations.filter(([, value, shown]) => shown && value !== '').map(([property, value]) => `${property}: ${value}`).join('; ')
+	return text.length > MAX_STYLE ? `${text.slice(0, MAX_STYLE - 1)}…` : text
+}

package/daemon/review-widget/styles.css

@@ -268,6 +268,14 @@ textarea:focus {
 	border-bottom: 1px solid var(--border);
 }
 
+.send-notes {
+	padding: 0 12px 8px;
+}
+
+.send-notes button {
+	width: 100%;
+}
+
 .tabs button.active {
 	background: var(--bg-muted);
 	font-weight: 600;
@@ -297,6 +305,10 @@ textarea:focus {
 	gap: 8px;
 }
 
+.thread.resolved {
+	opacity: 0.65;
+}
+
 .thread.current {
 	border-color: var(--accent);
 }
@@ -357,3 +369,21 @@ textarea:focus {
 	color: var(--warn);
 	font-size: 12px;
 }
+
+.reload-pending {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 6px 8px;
+	border-radius: 6px;
+	background: var(--bg-muted);
+	font-size: 12px;
+}
+
+.reload-pending button {
+	flex: none;
+}
+
+.panel > .error {
+	padding: 0 12px 8px;
+}

package/daemon/review-widget/tsconfig.json

@@ -12,5 +12,6 @@
 		"noEmit": true,
 		"types": []
 	},
-	"include": ["**/*.ts", "**/*.tsx", "../src/review/model.ts"]
+	"include": ["**/*.ts", "**/*.tsx", "../src/review/model.ts"],
+	"exclude": ["**/*.test.ts"]
 }

package/daemon/review-widget/widget.tsx

@@ -1,5 +1,13 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
-import type { ReviewAnchor, ReviewSource, ReviewThread, ReviewThreadState } from '../src/review/model'
+import { z } from 'zod'
+import {
+	isUnsentNote,
+	type ReviewAnchor,
+	reviewAnchorSchema,
+	type ReviewSource,
+	type ReviewThread,
+	type ReviewThreadState,
+} from '../src/review/model'
 import { describe, find } from './anchor'
 import type { ReviewClient } from './client'
 import { captureElement } from './screenshot'
@@ -19,6 +27,32 @@ interface Draft {
 	element: Element
 	/** Resolved while the reviewer writes: source maps can take a moment to load. */
 	sources: Promise<ReviewSource[]>
+	body: string
+	screenshot: boolean
+}
+
+/** The comment being written, kept for the tab: a dev server reloads the page on many edits. */
+const savedDraftSchema = z.object({ anchor: reviewAnchorSchema, body: z.string(), screenshot: z.boolean() })
+type SavedDraft = z.infer<typeof savedDraftSchema>
+
+const DRAFT_KEY = 'agent-canvas-review:draft'
+
+function saveDraft(draft: SavedDraft | null): void {
+	try {
+		if (draft === null) sessionStorage.removeItem(DRAFT_KEY)
+		else sessionStorage.setItem(DRAFT_KEY, JSON.stringify(draft))
+	} catch {}
+}
+
+function loadDraft(): SavedDraft | null {
+	try {
+		const saved = sessionStorage.getItem(DRAFT_KEY)
+		if (saved === null) return null
+		const parsed = savedDraftSchema.safeParse(JSON.parse(saved))
+		return parsed.success ? parsed.data : null
+	} catch {
+		return null
+	}
 }
 
 const STATE_LABELS: Record<ReviewThreadState, string> = {
@@ -57,6 +91,13 @@ function takePendingReveal(): string | null {
 	}
 }
 
+/** Vite reloads every page for a module change, and for an HTML change only the page that file serves. */
+function reloadsThisPage(path: string): boolean {
+	if (!path.endsWith('.html')) return true
+	const page = decodeURI(location.pathname)
+	return path === '/index.html' || page === path || (page.endsWith('/') && `${page}index.html` === path)
+}
+
 function boxOf(element: Element): Box {
 	const rect = element.getBoundingClientRect()
 	return { top: rect.top, left: rect.left, width: rect.width, height: rect.height }
@@ -179,9 +220,17 @@ function popoverPosition(box: Box): { top: number; left: number } {
 	return { top, left }
 }
 
-function Composer(props: { draft: Draft; onSubmit: (body: string, send: boolean, screenshot: boolean) => Promise<void>; onCancel: () => void }) {
-	const [body, setBody] = useState('')
-	const [screenshot, setScreenshot] = useState(false)
+function Composer(props: {
+	draft: Draft
+	reloadPending: boolean
+	onChange: (body: string, screenshot: boolean) => void
+	onSubmit: (body: string, send: boolean, screenshot: boolean) => Promise<void>
+	onCancel: () => void
+}) {
+	const [body, setBody] = useState(props.draft.body)
+	const [screenshot, setScreenshot] = useState(props.draft.screenshot)
+	const { onChange } = props
+	useEffect(() => onChange(body, screenshot), [onChange, body, screenshot])
 	const [busy, setBusy] = useState(false)
 	const [error, setError] = useState<string | null>(null)
 	const textarea = useRef<HTMLTextAreaElement>(null)
@@ -217,6 +266,12 @@ function Composer(props: { draft: Draft; onSubmit: (body: string, send: boolean,
 				<input type="checkbox" checked={screenshot} onChange={(event) => setScreenshot(event.currentTarget.checked)} />
 				Attach a screenshot
 			</label>
+			{props.reloadPending && (
+				<div class="reload-pending">
+					<span>The application changed. It reloads once you save or cancel this comment.</span>
+					<button type="button" class="ghost" onClick={() => location.reload()}>Reload now</button>
+				</div>
+			)}
 			{error !== null && <div class="error">{error}</div>}
 			<div class="actions">
 				<button type="button" class="ghost" onClick={props.onCancel}>Cancel</button>
@@ -242,7 +297,7 @@ function ThreadCard(props: { thread: ReviewThread; number: number | null; client
 	}
 
 	return (
-		<div class={`thread${props.number === null ? '' : ' current'}`}>
+		<div class={`thread${props.number === null ? '' : ' current'}${thread.state === 'resolved' ? ' resolved' : ''}`}>
 			<div class="thread-head">
 				<button type="button" class="ghost" title="Show in page" aria-label="Show in page" onClick={props.onReveal}>
 					{props.number === null ? '↗' : `#${props.number}`}
@@ -299,16 +354,26 @@ export function ReviewWidget(props: { client: ReviewClient; host: HTMLElement })
 	const [picking, setPicking] = useState(false)
 	const [hovered, setHovered] = useState<Element | null>(null)
 	const [draft, setDraft] = useState<Draft | null>(null)
+	const [unrestored, setUnrestored] = useState<SavedDraft | null>(loadDraft)
+	const [reloadPending, setReloadPending] = useState(false)
 	const [panelOpen, setPanelOpen] = useState(false)
 	const [showAll, setShowAll] = useState(false)
-	const [showResolved, setShowResolved] = useState(false)
+	const [hideResolved, setHideResolved] = useState(false)
+	const [panelError, setPanelError] = useState<string | null>(null)
 	const [revealId, setRevealId] = useState<string | null>(takePendingReveal)
 	const [flash, setFlash] = useState<Box | null>(null)
 	const href = useHref()
-	useLayoutTick()
+	const tick = useLayoutTick()
 
 	useEffect(() => {
-		client.connect({ threads: setThreads, agentWatching: setWatching, connected: setConnected })
+		client.connect({
+			threads: setThreads,
+			agentWatching: setWatching,
+			connected: setConnected,
+			reload: (path) => {
+				if (reloadsThisPage(path)) setReloadPending(true)
+			},
+		})
 		return () => client.close()
 	}, [client])
 
@@ -320,24 +385,39 @@ export function ReviewWidget(props: { client: ReviewClient; host: HTMLElement })
 		setPicking(false)
 		setHovered(null)
 		window.getSelection()?.removeAllRanges()
-		setDraft({ anchor: describe(element, location.href, range), box: boxOf(element), element, sources: resolveSources(bundleFrames(element)) })
+		setUnrestored(null)
+		const anchor = describe(element, location.href, range)
+		setDraft({ anchor, box: boxOf(element), element, sources: resolveSources(bundleFrames(element)), body: '', screenshot: false })
 	}, [])
+	const discardDraft = useCallback(() => {
+		setDraft(null)
+		saveDraft(null)
+	}, [])
+	const anchor = draft?.anchor
+	const keepDraft = useCallback((body: string, screenshot: boolean) => {
+		if (anchor !== undefined) saveDraft({ anchor, body, screenshot })
+	}, [anchor])
 	usePicker(host, picking, setHovered, pick, cancelPicking)
 	// The panel covers the right edge of the page, which the reviewer may want to pick from.
 	const startPicking = () => {
 		setPanelOpen(false)
-		setDraft(null)
+		discardDraft()
 		setPicking(true)
 	}
 
 	const page = pageKey(href)
 	const onPage = useMemo(
-		() => threads.filter((thread) => pageKey(thread.anchor.url) === page && (showResolved || thread.state !== 'resolved')),
-		[threads, page, showResolved],
+		() => threads.filter((thread) => pageKey(thread.anchor.url) === page && (!hideResolved || thread.state !== 'resolved')),
+		[threads, page, hideResolved],
 	)
-	const listed = showAll ? threads.filter((thread) => showResolved || thread.state !== 'resolved') : onPage
+	const listed = showAll ? threads.filter((thread) => !hideResolved || thread.state !== 'resolved') : onPage
 	const numbers = new Map(onPage.map((thread, index) => [thread.id, index + 1]))
 	const pending = threads.filter((thread) => thread.state !== 'resolved').length
+	const notes = threads.filter(isUnsentNote).length
+	const sendNotes = () => {
+		setPanelError(null)
+		client.sendNotes().catch((failure: unknown) => setPanelError(failure instanceof Error ? failure.message : String(failure)))
+	}
 
 	useEffect(() => {
 		if (revealId === null) return
@@ -351,6 +431,20 @@ export function ReviewWidget(props: { client: ReviewClient; host: HTMLElement })
 		setTimeout(() => setFlash(null), 1600)
 	}, [revealId, threads, page])
 
+	// The draft survives the reload in sessionStorage; held back only so the reviewer can finish writing.
+	useEffect(() => {
+		if (reloadPending && draft === null) location.reload()
+	}, [reloadPending, draft])
+
+	// The application may render the element a moment after the reload.
+	useEffect(() => {
+		if (unrestored === null || draft !== null || pageKey(unrestored.anchor.url) !== page) return
+		const element = find(document, unrestored.anchor)
+		if (element === null) return
+		setUnrestored(null)
+		setDraft({ ...unrestored, box: boxOf(element), element, sources: resolveSources(bundleFrames(element)) })
+	}, [unrestored, draft, page, tick])
+
 	const reveal = (thread: ReviewThread) => {
 		setRevealId(thread.id)
 		if (pageKey(thread.anchor.url) !== page) navigate(thread.anchor.url, thread.id)
@@ -384,13 +478,15 @@ export function ReviewWidget(props: { client: ReviewClient; host: HTMLElement })
 			{draft !== null && (
 				<Composer
 					draft={draft}
-					onCancel={() => setDraft(null)}
+					reloadPending={reloadPending}
+					onChange={keepDraft}
+					onCancel={discardDraft}
 					onSubmit={async (body, send, screenshot) => {
 						// The capture asks for the tab, which the browser allows only while the click still counts as a gesture.
 						const image = screenshot ? await captureElement(draft.element, host) : undefined
 						const sources = await draft.sources
 						await client.createThread(sources.length === 0 ? draft.anchor : { ...draft.anchor, sources }, body, send, image)
-						setDraft(null)
+						discardDraft()
 					}}
 				/>
 			)}
@@ -403,8 +499,16 @@ export function ReviewWidget(props: { client: ReviewClient; host: HTMLElement })
 					<div class="tabs">
 						<button type="button" class={showAll ? '' : 'active'} onClick={() => setShowAll(false)}>This page</button>
 						<button type="button" class={showAll ? 'active' : ''} onClick={() => setShowAll(true)}>All pages</button>
-						<button type="button" class={showResolved ? 'active' : ''} onClick={() => setShowResolved(!showResolved)}>Resolved</button>
+						<button type="button" class={hideResolved ? 'active' : ''} onClick={() => setHideResolved(!hideResolved)}>Hide resolved</button>
 					</div>
+					{notes > 0 && (
+						<div class="send-notes">
+							<button type="button" class="primary" onClick={sendNotes}>
+								Send {notes === 1 ? '1 note' : `${notes} notes`} to Claude
+							</button>
+						</div>
+					)}
+					{panelError !== null && <div class="error">{panelError}</div>}
 					<div class="threads">
 						{listed.length === 0 && <div class="empty">No comments yet. Click “Comment”, then an element or a text selection.</div>}
 						{listed.map((thread) => (

package/daemon/src/review/markdown.ts

@@ -19,9 +19,14 @@ function describeAnchor(anchor: ReviewAnchor, screenshot: string | undefined): s
 	}
 	if (anchor.quote !== undefined) {
 		lines.push(`- Selected text: …${anchor.quote.before}**${anchor.quote.exact}**${anchor.quote.after}…`)
-	} else if (anchor.text !== undefined && anchor.text !== '') {
+	} else if (anchor.text !== undefined && anchor.text !== '' && anchor.text !== anchor.name) {
 		lines.push(`- Text: "${anchor.text}"`)
 	}
+	if (anchor.browser !== undefined) {
+		const { name, viewport, colorScheme } = anchor.browser
+		lines.push(`- Browser: ${name}, viewport ${viewport.width}×${viewport.height} @${viewport.scale}x, ${colorScheme} color scheme`)
+	}
+	if (anchor.style !== undefined) lines.push(`- Computed style: \`${anchor.style}\``)
 	if (screenshot !== undefined) lines.push(`- Screenshot, the element outlined in red: \`${screenshot}\` (read the file to see it)`)
 	if (anchor.html !== undefined) lines.push('- Markup, trimmed:', '', fence('html', anchor.html))
 	return lines

package/daemon/src/review/model.ts

@@ -25,12 +25,14 @@ export function isLoopbackOrigin(origin: string): boolean {
 const shortText = z.string().max(500)
 
 export const MAX_HTML = 4000
+export const MAX_SOURCE_FILE = 1000
+export const MAX_STYLE = 1000
 
 /** A position in the application's source, resolved from a development stack through the page's source maps. */
 export const reviewSourceSchema = z.object({
 	/** What was created there, e.g. `<a> in ProductListCell` or `<ProductListCell> in DataGrid`. */
 	label: shortText,
-	file: z.string().max(1000),
+	file: z.string().max(MAX_SOURCE_FILE),
 	line: z.number().int().positive(),
 	column: z.number().int().nonnegative(),
 })
@@ -53,6 +55,14 @@ export const reviewAnchorSchema = z.object({
 	sources: z.array(reviewSourceSchema).max(10).optional(),
 	/** The landmarks around the element: page heading, section, dialog. */
 	context: shortText.optional(),
+	/** The reviewer's browser and operating system, e.g. `Chrome 141 · Linux`, viewport and colour scheme. */
+	browser: z.object({
+		name: shortText,
+		viewport: z.object({ width: z.number().int().nonnegative(), height: z.number().int().nonnegative(), scale: z.number().positive() }),
+		colorScheme: z.enum(['light', 'dark']),
+	}).optional(),
+	/** The element's computed box, layout and type as CSS declarations, initial values left out. */
+	style: z.string().max(MAX_STYLE).optional(),
 	/** The element's markup, trimmed: deep subtrees, long lists and long texts are cut. */
 	html: z.string().max(MAX_HTML).optional(),
 	/** A text selection inside the element, with its surroundings. */
@@ -92,6 +102,11 @@ export const reviewThreadSchema = z.object({
 })
 export type ReviewThread = z.infer<typeof reviewThreadSchema>
 
+/** A note the person saved and has not sent: open, with their own comment last rather than the agent's answer. */
+export function isUnsentNote(thread: ReviewThread): boolean {
+	return thread.state === 'open' && thread.comments.at(-1)?.author === 'user'
+}
+
 export const reviewThreadsFileSchema = z.object({ threads: z.array(reviewThreadSchema) })
 
 const commentBody = z.string().trim().min(1).max(20_000)
@@ -125,6 +140,8 @@ export type ReviewProxy = z.infer<typeof reviewProxySchema>
 export type ReviewBrowserFrame =
 	| { type: 'threads'; threads: readonly ReviewThread[] }
 	| { type: 'agent-status'; watching: boolean }
+	/** The application's dev server asked for a full reload; the widget holds it while the reviewer writes. */
+	| { type: 'reload'; path: string }
 
 /** The frame a waiting CLI receives when the person sends threads; it reads them back through the claim endpoint. */
 export interface ReviewWaitFrame {