agent-canvas 0.1.29 → 0.1.30

package/daemon/client/AnnotationSidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useCallback, useState, useContext } from "react";
+import React, { useRef, useEffect, useCallback, useState, useContext, useMemo } from "react";
 import { useAnnotations, Annotation } from "./AnnotationProvider";
 import { setMarkActive } from "./highlightRange";
 import { generateMarkdown, hasValue, getMissingRequiredLabels } from "./generateMarkdown";
@@ -10,14 +10,14 @@ import { autoResizeTextarea, RESPONSE_ANNOTATION_PATH } from "./utils";
 import { AnnotationEditor, ImageThumbnails } from "./AnnotationEditor";
 import { findAnnotationElement, scrollToAnnotation } from "./annotationDom";
 import { MODE, FS_AVAILABLE } from "./clientApi";
+import { ResponsePreview } from "./ResponsePreview";
 
 interface AnnotationSidebarProps {
-  onPreview: () => void;
   onSubmit: (feedback: string) => void;
   collapseButton?: React.ReactNode;
 }
 
-export function AnnotationSidebar({ onPreview, onSubmit, collapseButton }: AnnotationSidebarProps) {
+export function AnnotationSidebar({ onSubmit, collapseButton }: AnnotationSidebarProps) {
   const { isReadOnly, selectedRevision, currentRevision, revisions, agentWatching } = useContext(RevisionContext);
   const sessionId = useContext(SessionContext);
   const selectedRevInfo = revisions.find((r) => r.revision === selectedRevision);
@@ -29,7 +29,7 @@ export function AnnotationSidebar({ onPreview, onSubmit, collapseButton }: Annot
     return <ReadOnlyAnnotationSidebar sessionId={sessionId} revision={selectedRevision} label={roundLabel} waitingForUpdate={isCurrentButSubmitted} feedbackConsumed={feedbackConsumed} agentWatching={agentWatching} collapseButton={collapseButton} />;
   }
 
-  return <AnnotationSidebarInner onPreview={onPreview} onSubmit={onSubmit} agentWatching={agentWatching} collapseButton={collapseButton} />;
+  return <AnnotationSidebarInner onSubmit={onSubmit} agentWatching={agentWatching} collapseButton={collapseButton} />;
 }
 
 function FeedbackDisplay({ sessionId, revision, label, waitingForUpdate, feedbackConsumed, agentWatching, collapseButton }: { sessionId: string; revision: number; label: string; waitingForUpdate?: boolean; feedbackConsumed?: boolean; agentWatching?: boolean; collapseButton?: React.ReactNode }) {
@@ -311,7 +311,8 @@ function ReadOnlyAnnotationList({ annotations, generalNote, activeAnnotationId,
   );
 }
 
-function AnnotationSidebarInner({ onPreview, onSubmit, agentWatching, collapseButton }: AnnotationSidebarProps & { agentWatching: boolean }) {
+function AnnotationSidebarInner({ onSubmit, agentWatching, collapseButton }: Omit<AnnotationSidebarProps, "onPreview"> & { agentWatching: boolean }) {
+  const [previewOpen, setPreviewOpen] = useState(false);
   const {
     annotations, updateAnnotation, removeAnnotation,
     addAnnotationImage, removeAnnotationImage,
@@ -355,6 +356,27 @@ function AnnotationSidebarInner({ onPreview, onSubmit, agentWatching, collapseBu
     setMarkActive(annId, false);
   }, [activeAnnotationId]);
 
+  const remoteAnnotations = useMemo(() => annotations.filter((a) => a.source === "remote"), [annotations]);
+  const [includedRemoteIds, setIncludedRemoteIds] = useState<Set<string>>(() => new Set());
+
+  // Auto-include new remote annotations as they arrive
+  useEffect(() => {
+    if (remoteAnnotations.length === 0) return;
+    setIncludedRemoteIds((prev) => {
+      const next = new Set(prev);
+      for (const a of remoteAnnotations) next.add(a.id);
+      return next.size === prev.size ? prev : next;
+    });
+  }, [remoteAnnotations]);
+
+  const toggleRemoteId = useCallback((id: string) => {
+    setIncludedRemoteIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id); else next.add(id);
+      return next;
+    });
+  }, []);
+
   const hasResponses = Array.from(responses.values()).some(hasValue);
   const hasFeedback = feedbackEntries.size > 0;
   const hasContent = annotations.length > 0 || generalNote.trim().length > 0 || hasResponses || hasFeedback;
@@ -392,6 +414,14 @@ function AnnotationSidebarInner({ onPreview, onSubmit, agentWatching, collapseBu
     >
       {isRemote && ann.author && (
         <div className="flex items-center gap-1.5 mb-1.5">
+          <input
+            type="checkbox"
+            checked={includedRemoteIds.has(ann.id)}
+            onChange={(e) => { e.stopPropagation(); toggleRemoteId(ann.id); }}
+            onClick={(e) => e.stopPropagation()}
+            className="accent-accent-purple flex-shrink-0"
+            title="Include in submission"
+          />
           <span className="inline-flex items-center justify-center w-4 h-4 rounded-full bg-accent-purple text-white text-[9px] font-medium uppercase">
             {ann.author.name.charAt(0)}
           </span>
@@ -539,7 +569,7 @@ function AnnotationSidebarInner({ onPreview, onSubmit, agentWatching, collapseBu
           <button
             onClick={() => {
               setValidationError(null);
-              const md = generateMarkdown(annotations, generalNote, responses, feedbackEntries);
+              const md = generateMarkdown(annotations, generalNote, responses, feedbackEntries, includedRemoteIds);
               onSubmit(md);
             }}
             className="text-[11px] text-text-tertiary hover:text-text-secondary font-body whitespace-nowrap underline"
@@ -554,7 +584,7 @@ function AnnotationSidebarInner({ onPreview, onSubmit, agentWatching, collapseBu
         {hasContent ? (
           <div className="flex gap-2">
             <button
-              onClick={onPreview}
+              onClick={() => setPreviewOpen(true)}
               className="flex-1 py-2 rounded-lg font-body text-[13px] font-medium transition-all bg-border-subtle text-text-secondary hover:bg-border-medium hover:text-text-primary"
             >
               Preview
@@ -567,7 +597,7 @@ function AnnotationSidebarInner({ onPreview, onSubmit, agentWatching, collapseBu
                   return;
                 }
                 setValidationError(null);
-                const md = generateMarkdown(annotations, generalNote, responses, feedbackEntries);
+                const md = generateMarkdown(annotations, generalNote, responses, feedbackEntries, includedRemoteIds);
                 onSubmit(md);
               }}
               className="flex-1 py-2 rounded-lg font-body text-[13px] font-medium transition-all bg-btn-primary text-btn-primary-text hover:opacity-90 hover:-translate-y-px shadow-sm"
@@ -584,8 +614,14 @@ function AnnotationSidebarInner({ onPreview, onSubmit, agentWatching, collapseBu
           </button>
         )}
       </div>
+      <ResponsePreview
+        open={previewOpen}
+        onClose={() => setPreviewOpen(false)}
+        onSubmit={onSubmit}
+        includedRemoteIds={includedRemoteIds}
+        onToggleRemoteId={toggleRemoteId}
+      />
     </div>
   );
 }
 
-

package/daemon/client/App.tsx

@@ -5,7 +5,6 @@ import { SessionContext, ActiveViewCtx } from "#canvas/runtime";
 import { AnnotationProvider, useAnnotations } from "./AnnotationProvider";
 import { PlanRenderer } from "./PlanRenderer";
 import { AnnotationSidebar } from "./AnnotationSidebar";
-import { ResponsePreview } from "./ResponsePreview";
 import { FileBrowser } from "./FileBrowser";
 import { FileIcon } from "./FileIcon";
 import { FileViewer } from "./FileViewer";
@@ -226,8 +225,8 @@ function App() {
   const [revisions, setRevisions] = useState<RevisionInfo[]>([]);
   const [compareRevision, setCompareRevision] = useState<{ left: number; right: number } | null>(null);
   const [connected, setConnected] = useState(false);
+  const [sharedFeedbackSubmitted, setSharedFeedbackSubmitted] = useState(false);
   const [agentWatching, setAgentWatching] = useState(false);
-  const [previewOpen, setPreviewOpen] = useState(false);
   const [canvasFiles, setCanvasFiles] = useState<string[]>([]);
   const [activeView, setActiveViewRaw] = useState<ActiveView>({ type: "overview" });
   const [openFiles, setOpenFiles] = useState<string[]>([]);
@@ -278,7 +277,7 @@ function App() {
   const scrollPositions = useRef<Map<string, number>>(new Map());
 
   const selectedRevInfo = revisions.find((r) => r.revision === selectedRevision);
-  const isReadOnly = selectedRevision !== currentRevision || !!selectedRevInfo?.hasFeedback;
+  const isReadOnly = selectedRevision !== currentRevision || !!selectedRevInfo?.hasFeedback || sharedFeedbackSubmitted;
 
   const setActiveView = useCallback((v: ActiveView) => {
     // Save current scroll position before switching
@@ -446,7 +445,7 @@ function App() {
         annotations: structuredAnnotations,
         generalNote: feedback,
       });
-      setPreviewOpen(false);
+      setSharedFeedbackSubmitted(true);
       setToast({ kind: "success", message: "Feedback submitted. The canvas author will see it shortly." });
     } catch (e: any) {
       setToast({ kind: "error", message: `Failed to submit feedback: ${e.message || e}` });
@@ -469,7 +468,6 @@ function App() {
 
     if (wsRef.current?.readyState === WebSocket.OPEN) {
       wsRef.current.send(JSON.stringify({ type: "submit", feedback }));
-      setPreviewOpen(false);
       // Server will broadcast revision-updated with hasFeedback: true
       // which triggers isReadOnly via revisions state
     }
@@ -497,7 +495,7 @@ function App() {
 
               {/* Right panel — fixed to viewport, resizable */}
               <ResizableSidebar collapsed={rightCollapsed} onToggle={() => setRightCollapsed((c) => !c)}>
-                <AnnotationSidebar onPreview={() => setPreviewOpen(true)} onSubmit={handleSubmit} />
+                <AnnotationSidebar onSubmit={handleSubmit} />
               </ResizableSidebar>
 
               {/* Center content — normal document flow, browser scroll */}
@@ -606,14 +604,12 @@ function App() {
                       <button onClick={() => setMobileSidebar(false)} className="text-text-tertiary hover:text-text-secondary w-7 h-7 flex items-center justify-center">&#x2715;</button>
                     </div>
                     <div className="flex-1 overflow-hidden">
-                      <AnnotationSidebar onPreview={() => setPreviewOpen(true)} onSubmit={handleSubmit} />
+                      <AnnotationSidebar onSubmit={handleSubmit} />
                     </div>
                   </div>
                 </div>
               )}
 
-              <ResponsePreview open={previewOpen} onClose={() => setPreviewOpen(false)} onSubmit={handleSubmit} />
-
               <ShareDialog
                 sessionId={sessionId}
                 revision={selectedRevision}

package/daemon/client/ResponsePreview.tsx

@@ -7,9 +7,11 @@ interface ResponsePreviewProps {
   open: boolean;
   onClose: () => void;
   onSubmit: (feedback: string) => void;
+  includedRemoteIds: Set<string>;
+  onToggleRemoteId: (id: string) => void;
 }
 
-export function ResponsePreview({ open, onClose, onSubmit }: ResponsePreviewProps) {
+export function ResponsePreview({ open, onClose, onSubmit, includedRemoteIds, onToggleRemoteId }: ResponsePreviewProps) {
   const { annotations, generalNote, responses, feedbackEntries } = useAnnotations();
   const [editedText, setEditedText] = useState("");
   const [manuallyEdited, setManuallyEdited] = useState(false);
@@ -18,6 +20,11 @@ export function ResponsePreview({ open, onClose, onSubmit }: ResponsePreviewProp
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [prevOpen, setPrevOpen] = useState(false);
 
+  const remoteAnnotations = useMemo(
+    () => annotations.filter((a) => a.source === "remote"),
+    [annotations],
+  );
+
   if (open && !prevOpen) {
     setManuallyEdited(false);
     setEditMode(false);
@@ -33,8 +40,8 @@ export function ResponsePreview({ open, onClose, onSubmit }: ResponsePreviewProp
   }
 
   const generatedText = useMemo(
-    () => generateMarkdown(annotations, generalNote, responses, feedbackEntries),
-    [annotations, generalNote, responses, feedbackEntries]
+    () => generateMarkdown(annotations, generalNote, responses, feedbackEntries, includedRemoteIds),
+    [annotations, generalNote, responses, feedbackEntries, includedRemoteIds],
   );
   const text = manuallyEdited ? editedText : generatedText;
 
@@ -111,6 +118,15 @@ export function ResponsePreview({ open, onClose, onSubmit }: ResponsePreviewProp
           </div>
         )}
 
+        {/* Remote feedback summary */}
+        {remoteAnnotations.length > 0 && (
+          <div className="px-5 py-2 border-t border-border-subtle flex-shrink-0">
+            <span className="text-[12px] text-text-secondary font-body">
+              Reviewer feedback: {includedRemoteIds.size}/{remoteAnnotations.length} included
+            </span>
+          </div>
+        )}
+
         {/* Actions */}
         {validationError && (
           <div className="px-5 py-2 text-[12px] text-accent-red font-body border-t border-border-subtle flex-shrink-0 flex items-center justify-between gap-2">

package/daemon/client/generateMarkdown.ts

@@ -10,11 +10,15 @@ export function generateMarkdown(
   generalNote: string,
   responses?: Map<string, PlanResponse>,
   feedbackEntries?: Map<string, FeedbackEntry>,
+  includedRemoteIds?: Set<string>,
 ): string {
   const parts: string[] = [];
-  const responseAnns = annotations.filter((a) => a.filePath === RESPONSE_ANNOTATION_PATH);
-  const canvasAnns = annotations.filter((a) => !a.filePath);
-  const fileAnns = annotations.filter((a) => a.filePath && a.filePath !== RESPONSE_ANNOTATION_PATH);
+  const included = annotations.filter((a) =>
+    a.source !== "remote" || (includedRemoteIds && includedRemoteIds.has(a.id))
+  );
+  const responseAnns = included.filter((a) => a.filePath === RESPONSE_ANNOTATION_PATH);
+  const canvasAnns = included.filter((a) => !a.filePath);
+  const fileAnns = included.filter((a) => a.filePath && a.filePath !== RESPONSE_ANNOTATION_PATH);
   const resps = responses ? Array.from(responses.values()).filter((r) => hasValue(r)) : [];
   const fbEntries = feedbackEntries
     ? Array.from(feedbackEntries.values()).filter((e) => e.markdown.trim())