agent-canvas 0.1.42 → 0.1.44

package/bin/lib/helpers.test.ts

@@ -45,4 +45,34 @@ describe("waitForFeedback", () => {
 
     await expect(result).rejects.toThrow("WebSocket closed before feedback was submitted.");
   });
+
+  test("reports a browser render error without reconnecting", async () => {
+    const sockets: FakeSocket[] = [];
+    const result = waitForFeedback("session", {
+      createSocket: () => {
+        const socket = new FakeSocket();
+        sockets.push(socket);
+        queueMicrotask(() => socket.onmessage?.(new MessageEvent("message", {
+          data: JSON.stringify({
+            type: "render-error",
+            error: {
+              revision: 3,
+              filename: "architecture.jsx",
+              message: "Table: required prop `headers` must be an array",
+              componentStack: "\n    at Table",
+            },
+          }),
+        })));
+        return socket;
+      },
+      timeoutMs: 1_000,
+      reconnectAttempts: 2,
+      reconnectDelayMs: 0,
+    });
+
+    await expect(result).rejects.toThrow(
+      "Canvas render failed in architecture.jsx (revision 3):\nTable: required prop `headers` must be an array",
+    );
+    expect(sockets).toHaveLength(1);
+  });
 });

package/bin/lib/helpers.ts

@@ -47,6 +47,30 @@ interface FeedbackWaitOptions {
   reconnectDelayMs?: number;
 }
 
+interface CanvasRenderError {
+  revision: number;
+  filename: string;
+  message: string;
+  stack?: string;
+  componentStack?: string;
+}
+
+function isCanvasRenderError(value: unknown): value is CanvasRenderError {
+  return typeof value === "object" && value !== null
+    && "revision" in value && Number.isInteger(value.revision)
+    && "filename" in value && typeof value.filename === "string"
+    && "message" in value && typeof value.message === "string"
+    && (!("stack" in value) || value.stack === undefined || typeof value.stack === "string")
+    && (!("componentStack" in value) || value.componentStack === undefined || typeof value.componentStack === "string");
+}
+
+function formatCanvasRenderError(error: CanvasRenderError): string {
+  const details = [`Canvas render failed in ${error.filename} (revision ${error.revision}):`, error.message];
+  if (error.componentStack?.trim()) details.push(`Component stack:${error.componentStack}`);
+  if (error.stack?.trim()) details.push(`Browser stack:\n${error.stack}`);
+  return details.join("\n");
+}
+
 class FeedbackWaitError extends Error {
   constructor(message: string, readonly retryable: boolean) {
     super(message);
@@ -81,6 +105,9 @@ function waitForFeedbackConnection(
         if (data.type === "submit") {
           finish(data.feedback);
         }
+        if (data.type === "render-error" && isCanvasRenderError(data.error)) {
+          finish(new FeedbackWaitError(formatCanvasRenderError(data.error), false));
+        }
       } catch {}
     };
 

package/bin/lib/instructions/overview.md

@@ -76,6 +76,11 @@ In Codex, a wait may yield before feedback arrives. Continue waiting on the same
 process handle; do not start another watcher. Keep user-facing progress updates
 brief and no more than 60 seconds apart while waiting.
 
+If the watcher exits with `Canvas render failed`, treat it like a compilation
+error: fix the reported canvas file, push the corrected revision, and start a
+new watcher. The browser reports these failures automatically; do not ask the
+user to transcribe console output.
+
 **Important**: The push → watch sequence is atomic. Never push without starting
 the host-specific watcher immediately afterward. Do not continue with unrelated
 work while waiting for feedback.

package/daemon/client/AnnotationProvider.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import { AnnotationCtx } from "#canvas/runtime";
 import type { Annotation, AnnotationContext, PlanResponse, FeedbackEntry, AnnotationContextValue } from "#canvas/runtime";
-import { clearPersistedDraft } from "./annotationDraft";
+import { annotationDraftKey, clearPersistedDraft, type AnnotationDraftPhase } from "./annotationDraft";
 import { generateAnnotationId } from "./utils";
 
 // Re-export types for convenience
@@ -12,6 +12,7 @@ interface AnnotationProviderProps {
   sessionId: string;
   revision: number;
   isReadOnly: boolean;
+  draftPhase: AnnotationDraftPhase;
   /** Remote annotations fetched from shared views. Merged read-only into
    *  the annotation list so they render alongside the author's own. */
   remoteAnnotations?: Annotation[];
@@ -25,13 +26,9 @@ interface PersistedState {
   feedbackEntries?: [string, FeedbackEntry][];
 }
 
-function storageKey(sessionId: string, revision: number): string {
-  return `canvas:${sessionId}:rev:${revision}`;
-}
-
-function loadPersisted(sessionId: string, revision: number): PersistedState | null {
+function loadPersisted(sessionId: string, revision: number, phase: AnnotationDraftPhase): PersistedState | null {
   try {
-    const raw = localStorage.getItem(storageKey(sessionId, revision));
+    const raw = localStorage.getItem(annotationDraftKey(sessionId, revision, phase));
     if (!raw) return null;
     return JSON.parse(raw);
   } catch {
@@ -39,15 +36,15 @@ function loadPersisted(sessionId: string, revision: number): PersistedState | nu
   }
 }
 
-function savePersisted(sessionId: string, revision: number, state: PersistedState) {
+function savePersisted(sessionId: string, revision: number, phase: AnnotationDraftPhase, state: PersistedState) {
   try {
-    localStorage.setItem(storageKey(sessionId, revision), JSON.stringify(state));
+    localStorage.setItem(annotationDraftKey(sessionId, revision, phase), JSON.stringify(state));
   } catch {}
 }
 
-export function AnnotationProvider({ sessionId, revision, isReadOnly, remoteAnnotations, children }: AnnotationProviderProps) {
+export function AnnotationProvider({ sessionId, revision, isReadOnly, draftPhase, remoteAnnotations, children }: AnnotationProviderProps) {
   const [localAnnotations, setAnnotations] = useState<Annotation[]>(() => {
-    const saved = loadPersisted(sessionId, revision);
+    const saved = loadPersisted(sessionId, revision, draftPhase);
     return (saved?.annotations ?? []).map((a) => ({ ...a, source: a.source ?? "local" as const }));
   });
 
@@ -61,35 +58,38 @@ export function AnnotationProvider({ sessionId, revision, isReadOnly, remoteAnno
     return [...localAnnotations, ...filtered.map((a) => ({ ...a, source: "remote" as const }))];
   }, [localAnnotations, remoteAnnotations]);
   const [generalNote, setGeneralNote] = useState(() => {
-    const saved = loadPersisted(sessionId, revision);
+    const saved = loadPersisted(sessionId, revision, draftPhase);
     return saved?.generalNote ?? "";
   });
   const [activeAnnotationId, setActiveAnnotationId] = useState<string | null>(null);
   const [responses, setResponses] = useState<Map<string, PlanResponse>>(() => {
-    const saved = loadPersisted(sessionId, revision);
+    const saved = loadPersisted(sessionId, revision, draftPhase);
     return saved?.responses ? new Map(saved.responses) : new Map();
   });
   const [feedbackEntries, setFeedbackEntries] = useState<Map<string, FeedbackEntry>>(() => {
-    const saved = loadPersisted(sessionId, revision);
+    const saved = loadPersisted(sessionId, revision, draftPhase);
     return saved?.feedbackEntries ? new Map(saved.feedbackEntries) : new Map();
   });
 
-  // Persist to localStorage (debounced)
+  // Post-feedback drafts save immediately so a new revision can carry the latest edit.
   const persistTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   useEffect(() => {
-    if (isReadOnly) return;
+    if (isReadOnly && draftPhase !== "next") return;
     if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
-    persistTimerRef.current = setTimeout(() => {
-      savePersisted(sessionId, revision, {
-        // Persist only local annotations — remote ones are re-fetched on load.
-        annotations: localAnnotations,
-        generalNote,
-        responses: Array.from(responses.entries()),
-        feedbackEntries: Array.from(feedbackEntries.entries()),
-      });
-    }, 300);
+    const state = {
+      // Persist only local annotations — remote ones are re-fetched on load.
+      annotations: localAnnotations,
+      generalNote,
+      responses: Array.from(responses.entries()),
+      feedbackEntries: Array.from(feedbackEntries.entries()),
+    };
+    if (draftPhase === "next") {
+      savePersisted(sessionId, revision, draftPhase, state);
+      return;
+    }
+    persistTimerRef.current = setTimeout(() => savePersisted(sessionId, revision, draftPhase, state), 300);
     return () => { if (persistTimerRef.current) clearTimeout(persistTimerRef.current); };
-  }, [localAnnotations, generalNote, responses, feedbackEntries, sessionId, revision, isReadOnly]);
+  }, [localAnnotations, generalNote, responses, feedbackEntries, sessionId, revision, isReadOnly, draftPhase]);
 
   const addAnnotationWithId = useCallback((id: string, snippet: string, note: string, filePath?: string, context?: AnnotationContext, images?: string[], canvasFile?: string) => {
     setAnnotations((prev) => [...prev, { id, snippet, note, createdAt: new Date().toISOString(), filePath, context, ...(images?.length ? { images } : {}), ...(canvasFile ? { canvasFile } : {}) }]);
@@ -159,8 +159,12 @@ export function AnnotationProvider({ sessionId, revision, isReadOnly, remoteAnno
     setActiveAnnotationId(null);
     setResponses(new Map());
     setFeedbackEntries(new Map());
-    clearPersistedDraft(localStorage, sessionId, revision);
-  }, [sessionId, revision]);
+    if (draftPhase === "next") {
+      localStorage.removeItem(annotationDraftKey(sessionId, revision, draftPhase));
+    } else {
+      clearPersistedDraft(localStorage, sessionId, revision);
+    }
+  }, [sessionId, revision, draftPhase]);
 
   return (
     <AnnotationCtx.Provider

package/daemon/client/App.tsx

@@ -21,7 +21,8 @@ import { ShareDialog, ShareButton, type ShareEntry } from "./ShareDialog";
 import { ReviewerIdentityDialog } from "./ReviewerIdentityDialog";
 import type { Annotation } from "#canvas/runtime";
 import { MODE, fetchMeta, FS_AVAILABLE, WS_AVAILABLE, submitSharedFeedback, getReviewerIdentity, setReviewerIdentity } from "./clientApi";
-import { carryUnsubmittedDraft, clearPersistedDraft } from "./annotationDraft";
+import { carryUnsubmittedDraft, clearPersistedDraft, type AnnotationDraftPhase } from "./annotationDraft";
+import { RenderErrorContext, type CanvasRenderError } from "./RenderErrorContext";
 
 export type ActiveView = { type: "overview" } | { type: "canvas"; filename: string } | { type: "file"; path: string };
 
@@ -232,6 +233,8 @@ function App() {
   const [activeView, setActiveViewRaw] = useState<ActiveView>({ type: "overview" });
   const [openFiles, setOpenFiles] = useState<string[]>([]);
   const wsRef = useRef<WebSocket | null>(null);
+  const pendingRenderErrorsRef = useRef<CanvasRenderError[]>([]);
+  const reportedRenderErrorsRef = useRef(new Set<string>());
 
   const [projectRoot, setProjectRoot] = useState<string | undefined>();
   const [mobileSidebar, setMobileSidebar] = useState(false);
@@ -247,6 +250,21 @@ function App() {
   const [reviewerDialogOpen, setReviewerDialogOpen] = useState(false);
   const [pendingFeedback, setPendingFeedback] = useState<string | null>(null);
   const [toast, setToast] = useState<{ kind: "error" | "success"; message: string } | null>(null);
+
+  const reportRenderError = useCallback((error: CanvasRenderError) => {
+    if (isSharedMode) return;
+    const signature = `${error.revision}\0${error.filename}\0${error.message}`;
+    if (reportedRenderErrorsRef.current.has(signature)) return;
+    reportedRenderErrorsRef.current.add(signature);
+
+    const payload = JSON.stringify({ type: "render-error", error });
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(payload);
+    } else {
+      pendingRenderErrorsRef.current.push(error);
+    }
+  }, [isSharedMode]);
+
   useEffect(() => {
     if (!toast) return;
     const t = setTimeout(() => setToast(null), 4000);
@@ -279,6 +297,10 @@ function App() {
 
   const selectedRevInfo = revisions.find((r) => r.revision === selectedRevision);
   const isReadOnly = selectedRevision !== currentRevision || !!selectedRevInfo?.hasFeedback || sharedFeedbackSubmitted;
+  // Keep feedback added after submission separate from the already-sent draft.
+  const draftPhase: AnnotationDraftPhase = selectedRevision === currentRevision && (!!selectedRevInfo?.hasFeedback || sharedFeedbackSubmitted)
+    ? "next"
+    : "current";
 
   const setActiveView = useCallback((v: ActiveView) => {
     // Save current scroll position before switching
@@ -378,7 +400,13 @@ function App() {
       const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
       const ws = new WebSocket(`${protocol}//${window.location.host}/ws/session/${sessionId}`);
       wsRef.current = ws;
-      ws.onopen = () => setConnected(true);
+      ws.onopen = () => {
+        setConnected(true);
+        for (const error of pendingRenderErrorsRef.current) {
+          ws.send(JSON.stringify({ type: "render-error", error }));
+        }
+        pendingRenderErrorsRef.current = [];
+      };
       ws.onclose = () => { setConnected(false); reconnectTimer = setTimeout(connect, 2000); };
       ws.onmessage = (event) => {
         try {
@@ -492,14 +520,16 @@ function App() {
 
   return (
     <SessionContext.Provider value={sessionId}>
-      <RevisionContext.Provider value={{ currentRevision, selectedRevision, revisions, setSelectedRevision, isReadOnly, compareRevision, setCompareRevision, agentWatching }}>
-        <AnnotationProvider
-          key={`${sessionId}:${selectedRevision}`}
-          sessionId={sessionId}
-          revision={selectedRevision}
-          isReadOnly={isReadOnly}
-          remoteAnnotations={remoteAnnotationsByRev.get(selectedRevision)}
-        >
+      <RenderErrorContext.Provider value={reportRenderError}>
+        <RevisionContext.Provider value={{ currentRevision, selectedRevision, revisions, setSelectedRevision, isReadOnly, compareRevision, setCompareRevision, agentWatching }}>
+          <AnnotationProvider
+            key={`${sessionId}:${selectedRevision}:${draftPhase}`}
+            sessionId={sessionId}
+            revision={selectedRevision}
+            isReadOnly={isReadOnly}
+            draftPhase={draftPhase}
+            remoteAnnotations={remoteAnnotationsByRev.get(selectedRevision)}
+          >
           <ActiveViewContext.Provider value={{ activeView, setActiveView, openFiles, closeFile, canvasFiles }}>
           <ActiveViewCtx.Provider value={{ setActiveView }}>
             <div className="min-h-screen bg-bg-base">
@@ -673,8 +703,9 @@ function App() {
             </div>
           </ActiveViewCtx.Provider>
           </ActiveViewContext.Provider>
-        </AnnotationProvider>
-      </RevisionContext.Provider>
+          </AnnotationProvider>
+        </RevisionContext.Provider>
+      </RenderErrorContext.Provider>
     </SessionContext.Provider>
   );
 }

package/daemon/client/PlanRenderer.tsx

@@ -7,6 +7,7 @@ import { AnnotationCreatePopover, AnnotationEditPopover } from "./Popover";
 import { generateAnnotationId } from "./utils";
 import { useTextAnnotation } from "./useTextAnnotation";
 import { loadCanvasModule } from "./clientApi";
+import { RenderErrorContext, type CanvasRenderError } from "./RenderErrorContext";
 
 /** All navigable blocks (keyboard arrows) */
 const BLOCK_SELECTOR = "[data-md='item'], [data-md='section'], [data-md='table'] tbody tr, [data-md='callout'], [data-md='note'], [data-md='checklist-item'], [data-md='choice-option'], [data-md='multichoice-option'], [data-md='userinput'], [data-md='rangeinput'], [data-md='image']";
@@ -18,8 +19,53 @@ interface PlanRendererProps {
   filename: string;
 }
 
+interface CanvasErrorBoundaryProps {
+  revision: number;
+  filename: string;
+  reportError: (error: CanvasRenderError) => void;
+  children: React.ReactNode;
+}
+
+interface CanvasErrorBoundaryState {
+  error: Error | null;
+}
+
+class CanvasErrorBoundary extends React.Component<CanvasErrorBoundaryProps, CanvasErrorBoundaryState> {
+  state: CanvasErrorBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: Error): CanvasErrorBoundaryState {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    this.props.reportError({
+      revision: this.props.revision,
+      filename: this.props.filename,
+      message: error.message,
+      ...(error.stack ? { stack: error.stack } : {}),
+      ...(info.componentStack ? { componentStack: info.componentStack } : {}),
+    });
+  }
+
+  render() {
+    if (!this.state.error) return this.props.children;
+    return <CanvasErrorDisplay message={this.state.error.message} />;
+  }
+}
+
+function CanvasErrorDisplay({ message }: { message: string }) {
+  return (
+    <div className="bg-accent-red-muted rounded-lg p-5">
+      <h3 className="font-body font-semibold text-accent-red mb-2">Canvas render failed</h3>
+      <pre className="text-code font-mono text-text-secondary whitespace-pre-wrap">{message}</pre>
+      <p className="text-meta font-body text-text-tertiary mt-3">The error was sent back to the canvas author.</p>
+    </div>
+  );
+}
+
 export function PlanRenderer({ revision, filename }: PlanRendererProps) {
   const sessionId = useContext(SessionContext);
+  const reportError = useContext(RenderErrorContext);
   const [PlanComponent, setPlanComponent] = useState<React.ComponentType | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
@@ -44,8 +90,18 @@ export function PlanRenderer({ revision, filename }: PlanRendererProps) {
     void sessionId; // sessionId is implied by the URL in clientApi (shared or local)
     loadCanvasModule(filename, revision)
       .then((mod) => { setPlanComponent(() => mod.default); setLoading(false); })
-      .catch((e) => { setError(e.message); setLoading(false); });
-  }, [sessionId, revision, filename]);
+      .catch((cause: unknown) => {
+        const moduleError = cause instanceof Error ? cause : new Error(String(cause));
+        setError(moduleError.message);
+        setLoading(false);
+        reportError({
+          revision,
+          filename,
+          message: moduleError.message,
+          ...(moduleError.stack ? { stack: moduleError.stack } : {}),
+        });
+      });
+  }, [sessionId, revision, filename, reportError]);
 
   const scrollContainer = document.getElementById("plan-scroll-container");
 
@@ -250,12 +306,7 @@ export function PlanRenderer({ revision, filename }: PlanRendererProps) {
   }
 
   if (error) {
-    return (
-      <div className="bg-accent-red-muted rounded-lg p-5">
-        <h3 className="font-body font-semibold text-accent-red mb-2">Compilation Error</h3>
-        <pre className="text-code font-mono text-text-secondary whitespace-pre-wrap">{error}</pre>
-      </div>
-    );
+    return <CanvasErrorDisplay message={error} />;
   }
 
   if (!PlanComponent) {
@@ -265,7 +316,14 @@ export function PlanRenderer({ revision, filename }: PlanRendererProps) {
   return (
     <CanvasFileCtx.Provider value={filename}>
       <div ref={containerRef} className="plan-content plan-updated">
-        {planElement}
+        <CanvasErrorBoundary
+          key={`${revision}:${filename}`}
+          revision={revision}
+          filename={filename}
+          reportError={reportError}
+        >
+          {planElement}
+        </CanvasErrorBoundary>
       </div>
       {editingAnn && (
         <EditAnnotationModal
@@ -554,4 +612,3 @@ function EditAnnotationModal({ note, onSave, onCancel }: { note: string; onSave:
     </div>
   );
 }
-

package/daemon/client/RenderErrorContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+
+export interface CanvasRenderError {
+  revision: number;
+  filename: string;
+  message: string;
+  stack?: string;
+  componentStack?: string;
+}
+
+export const RenderErrorContext = createContext<(error: CanvasRenderError) => void>(() => {});

package/daemon/client/annotationDraft.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test";
-import { carryUnsubmittedDraft, clearPersistedDraft } from "./annotationDraft";
+import { annotationDraftKey, carryUnsubmittedDraft, clearPersistedDraft } from "./annotationDraft";
 
 class MemoryStorage {
   private readonly values = new Map<string, string>();
@@ -18,7 +18,8 @@ class MemoryStorage {
 }
 
 const sessionId = "session";
-const key = (revision: number) => `canvas:${sessionId}:rev:${revision}`;
+const key = (revision: number) => annotationDraftKey(sessionId, revision);
+const nextKey = (revision: number) => annotationDraftKey(sessionId, revision, "next");
 
 describe("carryUnsubmittedDraft", () => {
   test("clears a submitted draft and its carry marker", () => {
@@ -78,6 +79,44 @@ describe("carryUnsubmittedDraft", () => {
     expect(storage.getItem(key(3))).toBeNull();
   });
 
+  test("carries a post-feedback draft into the next revision", () => {
+    const storage = new MemoryStorage();
+    storage.setItem(key(2), JSON.stringify({
+      annotations: [{ id: "submitted-annotation" }],
+      generalNote: "Submitted feedback",
+      responses: [],
+    }));
+    storage.setItem(nextKey(2), JSON.stringify({
+      annotations: [{ id: "next-annotation" }],
+      generalNote: "",
+      responses: [],
+      feedbackEntries: [["generated", { markdown: "stale generated content" }]],
+    }));
+
+    expect(carryUnsubmittedDraft(storage, sessionId, 3, [
+      { revision: 2, hasFeedback: true },
+      { revision: 3, hasFeedback: false },
+    ])).toBe(2);
+    expect(JSON.parse(storage.getItem(key(3)) ?? "")).toEqual({
+      annotations: [{ id: "next-annotation" }],
+      generalNote: "",
+      responses: [],
+      feedbackEntries: [],
+    });
+    expect(storage.getItem(nextKey(2))).toBeNull();
+  });
+
+  test("clearing submitted feedback preserves its next-revision draft", () => {
+    const storage = new MemoryStorage();
+    storage.setItem(key(2), JSON.stringify({ annotations: [{ id: "submitted" }] }));
+    storage.setItem(nextKey(2), JSON.stringify({ annotations: [{ id: "next" }] }));
+
+    clearPersistedDraft(storage, sessionId, 2);
+
+    expect(storage.getItem(key(2))).toBeNull();
+    expect(storage.getItem(nextKey(2))).not.toBeNull();
+  });
+
   test("does not overwrite meaningful target data", () => {
     const storage = new MemoryStorage();
     storage.setItem(key(2), JSON.stringify({

package/daemon/client/annotationDraft.ts

@@ -6,18 +6,26 @@ interface RevisionState {
 interface AnnotationStorage {
   getItem(key: string): string | null;
   setItem(key: string, value: string): void;
+  removeItem(key: string): void;
 }
 
 interface RemovableAnnotationStorage {
   removeItem(key: string): void;
 }
 
-function storageKey(sessionId: string, revision: number): string {
-  return `canvas:${sessionId}:rev:${revision}`;
+export type AnnotationDraftPhase = "current" | "next";
+
+export function annotationDraftKey(
+  sessionId: string,
+  revision: number,
+  phase: AnnotationDraftPhase = "current",
+): string {
+  const base = `canvas:${sessionId}:rev:${revision}`;
+  return phase === "next" ? `${base}:next-draft` : base;
 }
 
 function handledKey(sessionId: string, revision: number): string {
-  return `${storageKey(sessionId, revision)}:draft-handled`;
+  return `${annotationDraftKey(sessionId, revision)}:draft-handled`;
 }
 
 export function clearPersistedDraft(
@@ -26,7 +34,7 @@ export function clearPersistedDraft(
   revision: number,
 ): void {
   try {
-    storage.removeItem(storageKey(sessionId, revision));
+    storage.removeItem(annotationDraftKey(sessionId, revision));
     storage.removeItem(handledKey(sessionId, revision));
   } catch {}
 }
@@ -77,7 +85,7 @@ export function carryUnsubmittedDraft(
   revisions: RevisionState[],
 ): number | null {
   try {
-    const targetKey = storageKey(sessionId, targetRevision);
+    const targetKey = annotationDraftKey(sessionId, targetRevision);
     if (hasDraftContent(parseState(storage.getItem(targetKey)))) {
       storage.setItem(handledKey(sessionId, targetRevision), "1");
       return null;
@@ -89,9 +97,21 @@ export function carryUnsubmittedDraft(
       .sort((left, right) => right.revision - left.revision);
 
     for (const revision of previous) {
-      if (revision.hasFeedback) return null;
+      if (revision.hasFeedback) {
+        const sourceKey = annotationDraftKey(sessionId, revision.revision, "next");
+        const source = parseState(storage.getItem(sourceKey));
+        if (!hasDraftContent(source)) return null;
+
+        storage.setItem(targetKey, JSON.stringify({
+          ...source,
+          feedbackEntries: [],
+        }));
+        storage.setItem(handledKey(sessionId, targetRevision), "1");
+        storage.removeItem(sourceKey);
+        return revision.revision;
+      }
 
-      const source = parseState(storage.getItem(storageKey(sessionId, revision.revision)));
+      const source = parseState(storage.getItem(annotationDraftKey(sessionId, revision.revision)));
       if (!hasDraftContent(source)) {
         if (storage.getItem(handledKey(sessionId, revision.revision)) !== null) return null;
         continue;