agent-canvas 0.1.42 → 0.1.43

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/App.tsx

@@ -22,6 +22,7 @@ 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 { 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);
@@ -378,7 +396,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 +516,15 @@ 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}`}
+            sessionId={sessionId}
+            revision={selectedRevision}
+            isReadOnly={isReadOnly}
+            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 +698,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>(() => {});