agent-canvas 0.8.0 → 0.8.2

package/daemon/src/review/proxy.ts

@@ -1,5 +1,22 @@
+import { z } from 'zod'
 import type { ReviewStore } from './store'
 
+/** Vite's hot reload message that makes its client reload the page. */
+const viteFullReloadSchema = z.object({ type: z.literal('full-reload'), path: z.string().default('*') })
+
+/** The page path a Vite full reload names, or `undefined` for any other frame. */
+export function viteFullReloadPath(frame: string): string | undefined {
+	if (!frame.includes('full-reload')) return undefined
+	let message: unknown
+	try {
+		message = JSON.parse(frame)
+	} catch {
+		return undefined
+	}
+	const parsed = viteFullReloadSchema.safeParse(message)
+	return parsed.success ? parsed.data.path : undefined
+}
+
 /** One browser socket proxied to the application, e.g. its dev server's hot reload. */
 interface ProxySocketData {
 	upstream: WebSocket
@@ -38,7 +55,15 @@ function connectUpstream(url: URL, protocols: string[]): Promise<WebSocket> {
 export class ReviewProxies {
 	private readonly running = new Map<string, RunningProxy>()
 
-	constructor(private readonly store: ReviewStore, private readonly widgetScript: string) {}
+	/**
+	 * `onFullReload` receives the full reloads the application's dev server asks for: the proxy holds them back from
+	 * the page, so a reload does not take the comment the reviewer is writing.
+	 */
+	constructor(
+		private readonly store: ReviewStore,
+		private readonly widgetScript: string,
+		private readonly onFullReload: (project: string, path: string) => void,
+	) {}
 
 	/** Serves the project's application at `target` and returns where the reviewer opens it, `target`'s path kept. */
 	open(project: string, target: string): string {
@@ -94,7 +119,7 @@ export class ReviewProxies {
 				const upstreamUrl = new URL(`${url.pathname}${url.search}`, target)
 				if (req.headers.get('Upgrade')?.toLowerCase() === 'websocket') {
 					upstreamUrl.protocol = upstreamUrl.protocol === 'https:' ? 'wss:' : 'ws:'
-					return await this.upgrade(req, server, upstreamUrl)
+					return await this.upgrade(project, req, server, upstreamUrl)
 				}
 				return await forward(req, upstreamUrl, url.origin, widgetTag)
 			},
@@ -116,7 +141,7 @@ export class ReviewProxies {
 	}
 
 	/** Connects to the application first, so the browser gets the subprotocol the application chose. */
-	private async upgrade(req: Request, server: ProxyServer, upstreamUrl: URL): Promise<Response | undefined> {
+	private async upgrade(project: string, req: Request, server: ProxyServer, upstreamUrl: URL): Promise<Response | undefined> {
 		const protocols = (req.headers.get('Sec-WebSocket-Protocol') ?? '').split(',').map((protocol) => protocol.trim()).filter((protocol) =>
 			protocol !== ''
 		)
@@ -129,6 +154,8 @@ export class ReviewProxies {
 		const data: ProxySocketData = { upstream, early: [], browser: null }
 		upstream.onmessage = (event) => {
 			if (typeof event.data !== 'string' && !(event.data instanceof ArrayBuffer)) return
+			const reloadPath = typeof event.data === 'string' ? viteFullReloadPath(event.data) : undefined
+			if (reloadPath !== undefined) return this.onFullReload(project, reloadPath)
 			if (data.browser === null) data.early.push(event.data)
 			else data.browser.send(event.data)
 		}

package/daemon/src/review/server.ts

@@ -130,6 +130,15 @@ export function createReviewServer(store: ReviewStore, proxies: ReviewProxies) {
 			notifyAgent(project)
 			return { thread }
 		}),
+		route('POST', '/api/review/:project/notes/send', 'browser', async (_req, match) => {
+			const project = projectOf(match)
+			const threads = store.sendNotes(project)
+			if (threads.length > 0) {
+				publish(project)
+				notifyAgent(project)
+			}
+			return { threads }
+		}),
 		route('POST', '/api/review/:project/threads/:thread/resolve', 'browser', async (_req, match) => {
 			const project = projectOf(match)
 			const thread = store.setResolved(project, threadIdOf(match), true)
@@ -170,6 +179,11 @@ export function createReviewServer(store: ReviewStore, proxies: ReviewProxies) {
 
 	return {
 		channel,
+		/** Hands a full reload the application asked for to the project's widgets, which reload unless the reviewer is writing. */
+		fullReload(project: string, path: string): void {
+			const frame: ReviewBrowserFrame = { type: 'reload', path }
+			channel.broadcast(project, frame)
+		},
 		/** Answers the request when it is review mode's: CORS preflight, a route, or a WebSocket upgrade. */
 		fetch(
 			req: Request,

package/daemon/src/review/store.ts

@@ -1,6 +1,7 @@
 import { existsSync, mkdirSync, readdirSync, readFileSync, renameSync, rmSync, writeFileSync } from 'fs'
 import { join } from 'path'
 import {
+	isUnsentNote,
 	PROJECT_RE,
 	type ReviewAnchor,
 	type ReviewAuthor,
@@ -61,6 +62,16 @@ export class ReviewStore {
 		})
 	}
 
+	/** Sends every unsent note at once, so the agent picks them up as one batch. */
+	sendNotes(project: string): readonly ReviewThread[] {
+		const threads = this.list(project)
+		const updatedAt = this.timestamp()
+		const sent = threads.filter(isUnsentNote).map((thread): ReviewThread => ({ ...thread, state: 'queued', updatedAt }))
+		const sentById = new Map(sent.map((thread) => [thread.id, thread]))
+		this.save(project, threads.map((thread) => sentById.get(thread.id) ?? thread))
+		return sent
+	}
+
 	setResolved(project: string, threadId: string, resolved: boolean): ReviewThread {
 		return this.update(project, threadId, (thread) => ({ ...thread, state: resolved ? 'resolved' : 'open', updatedAt: this.timestamp() }))
 	}

package/daemon/src/server.ts

@@ -27,7 +27,7 @@ chmodSync(CLI_AUTH_FILE, 0o600)
 const sessionManager = new SessionManager(SESSIONS_DIR)
 const wsManager = createWebSocketManager(sessionManager)
 const reviewStore = new ReviewStore(REVIEWS_DIR)
-const reviewProxies = new ReviewProxies(reviewStore, `http://localhost:${PORT}/assets/review.js`)
+const reviewProxies = new ReviewProxies(reviewStore, `http://localhost:${PORT}/assets/review.js`, (project, path) => review.fullReload(project, path))
 const review = createReviewServer(reviewStore, reviewProxies)
 
 type SocketData = WSData | ReviewSocketData

package/daemon/tsconfig.json

@@ -14,7 +14,7 @@
 			"#canvas/components": ["./client/components/index.ts"]
 		}
 	},
-	"include": ["src/**/*", "client/**/*"],
+	"include": ["src/**/*", "client/**/*", "review-widget/**/*.test.ts"],
 	"exclude": [
 		"src/share-e2e.test.ts"
 	]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "agent-canvas",
-	"version": "0.8.0",
+	"version": "0.8.2",
 	"description": "Interactive visual canvas for Claude Code — rich annotatable documents in the browser",
 	"license": "MIT",
 	"repository": {
@@ -30,9 +30,9 @@
 		"test": "bun test"
 	},
 	"dependencies": {
-		"@fabrika/annotations": "0.8.0",
-		"@fabrika/canvas-kernel": "0.8.0",
-		"@fabrika/daemon-kit": "0.8.0",
+		"@fabrika/annotations": "0.8.2",
+		"@fabrika/canvas-kernel": "0.8.2",
+		"@fabrika/daemon-kit": "0.8.2",
 		"@jridgewell/trace-mapping": "^0.3.31",
 		"marked": "^17.0.4",
 		"mermaid-parser-bundle": "^0.1.2",