agent-canvas 0.1.12 → 0.1.13

package/daemon/client/AnnotationEditor.tsx

@@ -59,9 +59,7 @@ export function AnnotationEditor({
   const openFilePicker = useCallback(() => fileInputRef.current?.click(), []);
 
   // Expose file picker to parent
-  useEffect(() => {
-    if (openFilePickerRef) openFilePickerRef.current = openFilePicker;
-  }, [openFilePickerRef, openFilePicker]);
+  if (openFilePickerRef) openFilePickerRef.current = openFilePicker;
 
   const setRef = useCallback((el: HTMLTextAreaElement | null) => {
     internalRef.current = el;

package/daemon/client/AnnotationProvider.tsx

@@ -48,7 +48,6 @@ function clearPersisted(sessionId: string, revision: number) {
 }
 
 export function AnnotationProvider({ sessionId, revision, isReadOnly, children }: AnnotationProviderProps) {
-  const prevKeyRef = useRef(`${sessionId}:${revision}`);
   const [annotations, setAnnotations] = useState<Annotation[]>(() => {
     const saved = loadPersisted(sessionId, revision);
     return saved?.annotations ?? [];
@@ -67,20 +66,6 @@ export function AnnotationProvider({ sessionId, revision, isReadOnly, children }
     return saved?.feedbackEntries ? new Map(saved.feedbackEntries) : new Map();
   });
 
-  // Reset state when session/revision changes
-  useEffect(() => {
-    const key = `${sessionId}:${revision}`;
-    if (key === prevKeyRef.current) return;
-    prevKeyRef.current = key;
-
-    const saved = loadPersisted(sessionId, revision);
-    setAnnotations(saved?.annotations ?? []);
-    setGeneralNote(saved?.generalNote ?? "");
-    setResponses(saved?.responses ? new Map(saved.responses) : new Map());
-    setFeedbackEntries(saved?.feedbackEntries ? new Map(saved.feedbackEntries) : new Map());
-    setActiveAnnotationId(null);
-  }, [sessionId, revision]);
-
   // Persist to localStorage (debounced)
   const persistTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   useEffect(() => {

package/daemon/client/App.tsx

@@ -564,7 +564,11 @@ function ResponseBanner({ markdown }: { markdown: string }) {
   const responseAnnotations = useMemo(() => annotations.filter((a) => a.filePath === RESPONSE_ANNOTATION_PATH), [annotations]);
 
   // Reset dismissed state when markdown changes
-  useEffect(() => { setDismissed(false); }, [markdown]);
+  const [prevMarkdown, setPrevMarkdown] = useState(markdown);
+  if (markdown !== prevMarkdown) {
+    setPrevMarkdown(markdown);
+    setDismissed(false);
+  }
 
   // Restore marks after content renders
   useEffect(() => {

package/daemon/client/Popover.tsx

@@ -153,7 +153,12 @@ export function AnnotationPopover({
     return idx + row;
   };
 
-  useEffect(() => { setSelectedIdx(null); setSuppressed(isEditMode); }, [note]);
+  const [prevNote, setPrevNote] = useState(note);
+  if (note !== prevNote) {
+    setPrevNote(note);
+    setSelectedIdx(null);
+    setSuppressed(isEditMode);
+  }
 
   const applySuggestion = useCallback((s: string) => {
     setNote(s);

package/daemon/client/ResponsePreview.tsx

@@ -11,17 +11,32 @@ interface ResponsePreviewProps {
 
 export function ResponsePreview({ open, onClose, onSubmit }: ResponsePreviewProps) {
   const { annotations, generalNote, responses, feedbackEntries } = useAnnotations();
-  const [text, setText] = useState("");
+  const [editedText, setEditedText] = useState("");
   const [manuallyEdited, setManuallyEdited] = useState(false);
   const [editMode, setEditMode] = useState(false);
   const [validationError, setValidationError] = useState<string | null>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [prevOpen, setPrevOpen] = useState(false);
 
-  useEffect(() => {
-    if (!open) { setManuallyEdited(false); setEditMode(false); setValidationError(null); return; }
-    if (manuallyEdited) return;
-    setText(generateMarkdown(annotations, generalNote, responses, feedbackEntries));
-  }, [annotations, generalNote, responses, feedbackEntries, manuallyEdited, open]);
+  if (open && !prevOpen) {
+    setManuallyEdited(false);
+    setEditMode(false);
+    setValidationError(null);
+  }
+  if (!open && prevOpen) {
+    setManuallyEdited(false);
+    setEditMode(false);
+    setValidationError(null);
+  }
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+  }
+
+  const generatedText = useMemo(
+    () => generateMarkdown(annotations, generalNote, responses, feedbackEntries),
+    [annotations, generalNote, responses, feedbackEntries]
+  );
+  const text = manuallyEdited ? editedText : generatedText;
 
   useEffect(() => {
     if (open && editMode && textareaRef.current) {
@@ -86,7 +101,7 @@ export function ResponsePreview({ open, onClose, onSubmit }: ResponsePreviewProp
           <textarea
             ref={textareaRef}
             value={text}
-            onChange={(e) => { setText(e.target.value); setManuallyEdited(true); }}
+            onChange={(e) => { setEditedText(e.target.value); setManuallyEdited(true); }}
             className="flex-1 w-full bg-bg-base p-5 text-[13px] font-mono text-text-code resize-none focus:outline-none leading-relaxed placeholder:text-text-disabled"
             placeholder="Your feedback will appear here..."
           />

package/daemon/client/components/Choice.tsx

@@ -18,11 +18,9 @@ export function Choice({ id, label, options, required }: ChoiceProps) {
   const [showNote, setShowNote] = useState(false);
   const wrapperRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    if (!responses.has(id)) {
-      setResponse(id, { id, type: "radio", label, value: null, options, required });
-    }
-  }, [id]);
+  if (!responses.has(id)) {
+    setResponse(id, { id, type: "radio", label, value: null, options, required });
+  }
 
   const handleSelect = (opt: string) => {
     setResponse(id, { ...current!, value: opt });
@@ -39,7 +37,7 @@ export function Choice({ id, label, options, required }: ChoiceProps) {
     };
     el.addEventListener("kb-select", handler);
     return () => el.removeEventListener("kb-select", handler);
-  });
+  }, [options, handleSelect]);
 
   const showError = current?.required && !selected;
 
@@ -95,11 +93,9 @@ export function MultiChoice({ id, label, options, required }: MultiChoiceProps)
   const [showNote, setShowNote] = useState(false);
   const wrapperRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    if (!responses.has(id)) {
-      setResponse(id, { id, type: "checkbox", label, value: [], options, required });
-    }
-  }, [id]);
+  if (!responses.has(id)) {
+    setResponse(id, { id, type: "checkbox", label, value: [], options, required });
+  }
 
   const toggle = (opt: string) => {
     const next = selected.includes(opt) ? selected.filter((o) => o !== opt) : [...selected, opt];
@@ -117,7 +113,7 @@ export function MultiChoice({ id, label, options, required }: MultiChoiceProps)
     };
     el.addEventListener("kb-select", handler);
     return () => el.removeEventListener("kb-select", handler);
-  });
+  }, [options, toggle]);
 
   const showError = current?.required && selected.length === 0;
 

package/daemon/client/components/UserInput.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { useAnnotations } from "#canvas/runtime";
 import { ResponseNote } from "./ResponseNote";
 import { autoResizeTextarea } from "../utils";
@@ -20,11 +20,9 @@ export function UserInput({ id, label, placeholder, multiline, required }: UserI
   const [showNote, setShowNote] = useState(false);
   const ref = useRef<HTMLTextAreaElement>(null);
 
-  useEffect(() => {
-    if (!responses.has(id)) {
-      setResponse(id, { id, type: "text", label, value: "", required });
-    }
-  }, [id]);
+  if (!responses.has(id)) {
+    setResponse(id, { id, type: "text", label, value: "", required });
+  }
 
   const handleChange = (v: string) => {
     setResponse(id, { ...current!, value: v });
@@ -75,11 +73,9 @@ export function RangeInput({ id, label, min = 1, max = 10, step = 1, required, m
   const note = current?.note || "";
   const [showNote, setShowNote] = useState(false);
 
-  useEffect(() => {
-    if (!responses.has(id)) {
-      setResponse(id, { id, type: "range", label, value: null, required });
-    }
-  }, [id]);
+  if (!responses.has(id)) {
+    setResponse(id, { id, type: "range", label, value: null, required });
+  }
 
   const handleChange = (v: number) => {
     setResponse(id, { ...current!, value: v });