agent-canvas 0.1.8 → 0.1.9

package/daemon/client/AnnotationSidebar.tsx

@@ -6,7 +6,7 @@ import { RevisionContext, ActiveViewContext, type ActiveView } from "./App";
 import { SessionContext } from "#canvas/runtime";
 import { MarkdownPreview } from "./ResponsePreview";
 import { FileIcon } from "./FileIcon";
-import { autoResizeTextarea } from "./utils";
+import { autoResizeTextarea, RESPONSE_ANNOTATION_PATH } from "./utils";
 
 interface AnnotationSidebarProps {
   onPreview: () => void;
@@ -166,8 +166,9 @@ function ReadOnlyAnnotationList({ annotations, generalNote, activeAnnotationId,
   setActiveAnnotationId: (id: string | null) => void;
   setActiveView: (view: ActiveView) => void;
 }) {
+  const responseAnnotations = annotations.filter((a) => a.filePath === RESPONSE_ANNOTATION_PATH);
   const planAnnotations = annotations.filter((a) => !a.filePath);
-  const fileAnnotations = annotations.filter((a) => a.filePath);
+  const fileAnnotations = annotations.filter((a) => a.filePath && a.filePath !== RESPONSE_ANNOTATION_PATH);
   const fileGroups: Record<string, Annotation[]> = {};
   for (const ann of fileAnnotations) {
     const key = ann.filePath!;
@@ -225,13 +226,28 @@ function ReadOnlyAnnotationList({ annotations, generalNote, activeAnnotationId,
     </div>
   );
 
+  const hasMultipleGroups = [responseAnnotations, planAnnotations, fileAnnotations].filter((g) => g.length > 0).length > 1;
+
   return (
     <>
       <div className="flex-1 overflow-y-auto">
-        {planAnnotations.length > 0 && fileAnnotations.length > 0 && (
-          <div className="text-[10px] uppercase tracking-widest text-text-tertiary font-body px-3 mb-1 mt-1">Plan</div>
+        {responseAnnotations.length > 0 && (
+          <>
+            {hasMultipleGroups && (
+              <div className="text-[10px] uppercase tracking-widest text-text-tertiary font-body px-3 mb-1 mt-1">Agent Response</div>
+            )}
+            {responseAnnotations.map(renderAnnotation)}
+          </>
+        )}
+
+        {planAnnotations.length > 0 && (
+          <>
+            {hasMultipleGroups && (
+              <div className="text-[10px] uppercase tracking-widest text-text-tertiary font-body px-3 mb-1 mt-1">Canvas</div>
+            )}
+            {planAnnotations.map(renderAnnotation)}
+          </>
         )}
-        {planAnnotations.map(renderAnnotation)}
 
         {Object.entries(fileGroups).map(([filePath, anns]) => (
           <div key={filePath}>
@@ -271,8 +287,9 @@ function AnnotationSidebarInner({ onPreview, onSubmit, collapseButton }: Annotat
   const listRef = useRef<HTMLDivElement>(null);
   const annRefs = useRef<Map<string, HTMLDivElement>>(new Map());
 
+  const responseAnnotations = annotations.filter((a) => a.filePath === RESPONSE_ANNOTATION_PATH);
   const planAnnotations = annotations.filter((a) => !a.filePath);
-  const fileAnnotations = annotations.filter((a) => a.filePath);
+  const fileAnnotations = annotations.filter((a) => a.filePath && a.filePath !== RESPONSE_ANNOTATION_PATH);
   const fileGroups: Record<string, Annotation[]> = {};
   for (const ann of fileAnnotations) {
     const key = ann.filePath!;
@@ -387,12 +404,21 @@ function AnnotationSidebarInner({ onPreview, onSubmit, collapseButton }: Annotat
       <div ref={listRef} className="flex-1 overflow-y-auto">
         {annotations.length === 0 && (
           <p className="text-[12px] text-text-tertiary px-3 py-4 leading-relaxed font-body">
-            Select text in the plan or in files to add annotations.
+            Select text in the canvas or in files to add annotations.
           </p>
         )}
 
-        {planAnnotations.length > 0 && fileAnnotations.length > 0 && (
-          <div className="text-[10px] uppercase tracking-widest text-text-tertiary font-body px-3 mb-1 mt-1">Plan</div>
+        {responseAnnotations.length > 0 && (
+          <>
+            {(planAnnotations.length > 0 || fileAnnotations.length > 0) && (
+              <div className="text-[10px] uppercase tracking-widest text-text-tertiary font-body px-3 mb-1 mt-1">Agent Response</div>
+            )}
+            {responseAnnotations.map(renderAnnotation)}
+          </>
+        )}
+
+        {planAnnotations.length > 0 && (responseAnnotations.length > 0 || fileAnnotations.length > 0) && (
+          <div className="text-[10px] uppercase tracking-widest text-text-tertiary font-body px-3 mb-1 mt-1">Canvas</div>
         )}
         {planAnnotations.map(renderAnnotation)}
 

package/daemon/client/App.tsx

@@ -12,7 +12,10 @@ import { SessionSwitcher } from "./SessionSwitcher";
 import { exportCanvasToMarkdown } from "./exportMarkdown";
 import { CompareView } from "./CompareView";
 import { RevisionSelect } from "./RevisionSelect";
-import { generateAnnotationId } from "./utils";
+import { generateAnnotationId, RESPONSE_ANNOTATION_PATH } from "./utils";
+import { wrapRangeWithMark, restoreMarks, renameMarkId, unwrapMarks, updateAllMarkStates } from "./highlightRange";
+import { extractContext } from "./annotationContext";
+import { AnnotationCreatePopover, AnnotationEditPopover } from "./Popover";
 
 export type ActiveView = { type: "plan" } | { type: "file"; path: string };
 
@@ -524,12 +527,95 @@ function ResizableSidebar({ children, collapsed, onToggle }: { children: React.R
 function ResponseBanner({ markdown }: { markdown: string }) {
   const [dismissed, setDismissed] = useState(false);
   const html = useMemo(() => marked.parse(markdown, { async: false }) as string, [markdown]);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const { annotations, addAnnotationWithId, removeAnnotation, updateAnnotation, activeAnnotationId, setActiveAnnotationId } = useAnnotations();
+  const [createPopover, setCreatePopover] = useState<{ anchorEl: HTMLElement; tempId: string; snippet: string; ctx: any } | null>(null);
+  const [editPopover, setEditPopover] = useState<{ anchorEl: HTMLElement; annId: string } | null>(null);
+
+  const responseAnnotations = useMemo(() => annotations.filter((a) => a.filePath === RESPONSE_ANNOTATION_PATH), [annotations]);
 
   // Reset dismissed state when markdown changes
   useEffect(() => { setDismissed(false); }, [markdown]);
 
+  // Restore marks after content renders
+  useEffect(() => {
+    if (!contentRef.current || responseAnnotations.length === 0) return;
+    const timer = setTimeout(() => {
+      if (contentRef.current) restoreMarks(contentRef.current, responseAnnotations);
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [html, responseAnnotations.length]);
+
+  // Update mark active states
+  const prevActiveRef = useRef<string | null>(null);
+  useEffect(() => {
+    updateAllMarkStates(activeAnnotationId, prevActiveRef.current);
+    prevActiveRef.current = activeAnnotationId;
+  }, [activeAnnotationId]);
+
+  // Click/hover handlers on marks
+  useEffect(() => {
+    const container = contentRef.current;
+    if (!container) return;
+    const handleClick = (e: MouseEvent) => {
+      const mark = (e.target as HTMLElement).closest("[data-annotation-id]") as HTMLElement | null;
+      if (!mark) return;
+      e.stopPropagation();
+      const annId = mark.getAttribute("data-annotation-id")!;
+      if (annId === activeAnnotationId) {
+        setEditPopover({ anchorEl: mark, annId });
+      } else {
+        setActiveAnnotationId(annId);
+      }
+    };
+    const handleMouseOver = (e: MouseEvent) => {
+      const mark = (e.target as HTMLElement).closest("[data-annotation-id]") as HTMLElement | null;
+      if (mark) setActiveAnnotationId(mark.getAttribute("data-annotation-id")!);
+    };
+    const handleMouseOut = (e: MouseEvent) => {
+      const mark = (e.target as HTMLElement).closest("[data-annotation-id]");
+      const relatedMark = (e.relatedTarget as HTMLElement | null)?.closest?.("[data-annotation-id]");
+      if (mark && !relatedMark) setActiveAnnotationId(null);
+    };
+    container.addEventListener("click", handleClick);
+    container.addEventListener("mouseover", handleMouseOver);
+    container.addEventListener("mouseout", handleMouseOut);
+    return () => {
+      container.removeEventListener("click", handleClick);
+      container.removeEventListener("mouseover", handleMouseOver);
+      container.removeEventListener("mouseout", handleMouseOut);
+    };
+  }, [html, activeAnnotationId]);
+
+  // Text selection → annotation
+  useEffect(() => {
+    const handler = () => {
+      const sel = window.getSelection();
+      if (!sel || sel.isCollapsed || !sel.toString().trim()) return;
+      if (!contentRef.current) return;
+      const range = sel.getRangeAt(0);
+      if (!contentRef.current.contains(range.startContainer)) return;
+      if ((range.startContainer.parentElement as HTMLElement)?.closest?.("[data-annotation-id]")) return;
+      const snippet = sel.toString().trim();
+      if (snippet.length < 2) return;
+      const savedRange = range.cloneRange();
+      const ctx = extractContext(range, contentRef.current);
+      const tempId = `__pending_${Date.now()}`;
+      try { wrapRangeWithMark(savedRange, tempId); } catch {}
+      window.getSelection()?.removeAllRanges();
+      const marks = document.querySelectorAll(`[data-annotation-id="${tempId}"]`);
+      const lastMark = marks[marks.length - 1] as HTMLElement | undefined;
+      if (!lastMark) return;
+      setCreatePopover({ anchorEl: lastMark, tempId, snippet, ctx });
+    };
+    document.addEventListener("mouseup", handler);
+    return () => document.removeEventListener("mouseup", handler);
+  }, []);
+
   if (dismissed) return null;
 
+  const scrollContainer = document.getElementById("plan-scroll-container");
+
   return (
     <div className="mb-6 rounded-lg border border-accent-blue/20 bg-accent-blue/5 relative">
       <button
@@ -545,8 +631,42 @@ function ResponseBanner({ markdown }: { markdown: string }) {
           </svg>
           <span className="text-[11px] font-medium uppercase tracking-widest text-accent-blue font-body">Agent Response</span>
         </div>
-        <div className="prose-canvas text-sm" dangerouslySetInnerHTML={{ __html: html }} />
+        <div ref={contentRef} className="prose-canvas text-sm" dangerouslySetInnerHTML={{ __html: html }} />
       </div>
+
+      {createPopover && (
+        <AnnotationCreatePopover
+          anchorEl={createPopover.anchorEl}
+          scrollContainer={scrollContainer}
+          snippet={createPopover.snippet}
+          truncateAt={80}
+          onAdd={(note) => {
+            const id = generateAnnotationId();
+            renameMarkId(createPopover.tempId, id);
+            addAnnotationWithId(id, createPopover.snippet, note, RESPONSE_ANNOTATION_PATH, createPopover.ctx);
+            setCreatePopover(null);
+          }}
+          onCancel={() => {
+            unwrapMarks(createPopover.tempId);
+            setCreatePopover(null);
+          }}
+        />
+      )}
+
+      {editPopover && (() => {
+        const ann = annotations.find((a) => a.id === editPopover.annId);
+        if (!ann) return null;
+        return (
+          <AnnotationEditPopover
+            anchorEl={editPopover.anchorEl}
+            scrollContainer={scrollContainer}
+            initialNote={ann.note}
+            onUpdate={(note) => updateAnnotation(editPopover.annId, note)}
+            onDelete={() => { removeAnnotation(editPopover.annId); setActiveAnnotationId(null); }}
+            onClose={() => setEditPopover(null)}
+          />
+        );
+      })()}
     </div>
   );
 }
@@ -574,7 +694,7 @@ function ContentTabs() {
           <svg width="12" height="12" viewBox="0 0 24 24" fill="none" className="opacity-60">
             <path d="M12 2L2 7l10 5 10-5-10-5z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
           </svg>
-          Plan
+          Canvas
           {activeView.type === "plan" && (
             <span className="absolute bottom-0 left-3 right-3 h-[2px] bg-text-primary rounded-full" />
           )}

package/daemon/client/CompareView.tsx

@@ -321,7 +321,7 @@ const ComparePanelRenderer = React.forwardRef<HTMLDivElement, ComparePanelRender
     }
 
     if (!PlanComponent) {
-      return <div className="text-text-tertiary text-center py-8 font-body text-body">No plan loaded</div>;
+      return <div className="text-text-tertiary text-center py-8 font-body text-body">No canvas loaded</div>;
     }
 
     return (

package/daemon/client/PlanRenderer.tsx

@@ -333,7 +333,7 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
   const planElement = useMemo(() => PlanComponent ? <PlanComponent /> : null, [PlanComponent]);
 
   if (loading) {
-    return <div className="flex items-center justify-center h-64 text-text-tertiary font-body text-body">Loading plan...</div>;
+    return <div className="flex items-center justify-center h-64 text-text-tertiary font-body text-body">Loading canvas...</div>;
   }
 
   if (error) {
@@ -346,7 +346,7 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
   }
 
   if (!PlanComponent) {
-    return <div className="text-text-tertiary text-center py-8 font-body text-body">No plan loaded</div>;
+    return <div className="text-text-tertiary text-center py-8 font-body text-body">No canvas loaded</div>;
   }
 
   const scrollContainer = document.getElementById("plan-scroll-container");

package/daemon/client/annotationContext.ts

@@ -105,7 +105,7 @@ export function formatSnippetInContext(ann: { snippet: string; context?: Annotat
   if (ctx && isShort && (ctx.before || ctx.after)) {
     const parts: string[] = [];
     if (ctx.before) parts.push(`...${ctx.before} `);
-    parts.push(snippet);
+    parts.push(`**${snippet}**`);
     if (ctx.after) parts.push(` ${ctx.after}...`);
     return parts.join("");
   }

package/daemon/client/generateMarkdown.ts

@@ -1,5 +1,6 @@
 import type { Annotation, PlanResponse, FeedbackEntry } from "./AnnotationProvider";
 import { formatSnippetInContext } from "./annotationContext";
+import { RESPONSE_ANNOTATION_PATH } from "./utils";
 
 /**
  * Generate human-readable markdown feedback from annotations and responses.
@@ -11,8 +12,9 @@ export function generateMarkdown(
   feedbackEntries?: Map<string, FeedbackEntry>,
 ): string {
   const parts: string[] = [];
+  const responseAnns = annotations.filter((a) => a.filePath === RESPONSE_ANNOTATION_PATH);
   const planAnns = annotations.filter((a) => !a.filePath);
-  const fileAnns = annotations.filter((a) => a.filePath);
+  const fileAnns = annotations.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())
@@ -32,9 +34,18 @@ export function generateMarkdown(
     }
   }
 
+  // Response annotations (on agent response banner)
+  if (responseAnns.length > 0) {
+    parts.push("## Annotations on agent response");
+    parts.push("");
+    for (const ann of responseAnns) {
+      parts.push(renderAnnotation(ann));
+    }
+  }
+
   // Plan annotations grouped by hierarchy
   if (planAnns.length > 0) {
-    parts.push("## Plan annotations");
+    parts.push("## Canvas annotations");
     parts.push("");
     const grouped = groupByHierarchy(planAnns);
     parts.push(renderHierarchyGroup(grouped));

package/daemon/client/utils.ts

@@ -1,3 +1,6 @@
+/** Sentinel filePath for annotations on the agent response banner */
+export const RESPONSE_ANNOTATION_PATH = "__agent-response__";
+
 /** Generate a unique annotation ID */
 export function generateAnnotationId(): string {
   return `ann-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;