agent-canvas 0.1.9 → 0.1.11

package/daemon/client/RevisionSelect.tsx

@@ -85,7 +85,14 @@ export function RevisionSelect({ value, onChange, accent = "default", className
                   <>Round {r.revision}</>
                 )}
               </span>
-              <span className="text-[10px] text-text-tertiary flex-shrink-0">
+              <span className="text-[10px] text-text-tertiary flex-shrink-0 flex items-center gap-1.5">
+                {r.diffStats && (
+                  <span className="font-mono">
+                    <span className="text-accent-green">+{r.diffStats.added}</span>
+                    {" "}
+                    <span className="text-accent-red">-{r.diffStats.removed}</span>
+                  </span>
+                )}
                 {r.revision === currentRevision ? "current" : r.hasFeedback ? "sent" : relativeTime(r.createdAt)}
               </span>
             </button>

package/daemon/client/annotationDom.ts

@@ -0,0 +1,104 @@
+import type { Annotation } from "./AnnotationProvider";
+import type { ActiveView } from "./App";
+
+/** All blocks that can be annotated via block-level comments */
+const ANNOTATABLE_SELECTOR = "[data-md='item'], [data-md='section'], [data-md='table'] tbody tr, [data-md='callout'], [data-md='note'], [data-md='checklist-item'], [data-md='image']";
+
+/** Extract snippet identifier for a block element (mirrors PlanRenderer's getBlockSnippet) */
+function getBlockSnippet(block: HTMLElement): string | null {
+  const md = block.getAttribute("data-md");
+  if (md === "item") {
+    const label = block.getAttribute("data-md-label");
+    return label ? `[Item] ${label}` : null;
+  }
+  if (md === "section") {
+    const title = block.getAttribute("data-md-title");
+    return title ? `[Section] ${title}` : null;
+  }
+  if (md === "callout") {
+    const type = block.getAttribute("data-md-type") || "info";
+    const text = block.textContent?.trim().slice(0, 60) || "Callout";
+    return `[Callout:${type}] ${text}`;
+  }
+  if (md === "note") {
+    const text = block.textContent?.trim().slice(0, 60) || "Note";
+    return `[Note] ${text}`;
+  }
+  if (block.tagName === "TR") {
+    const cells = Array.from(block.querySelectorAll("td")).map((td) => td.textContent?.trim()).filter(Boolean);
+    return cells.length ? `[Row] ${cells.join(" | ")}` : null;
+  }
+  if (md === "checklist-item") {
+    const label = block.getAttribute("data-md-label");
+    return label ? `[Checklist] ${label}` : null;
+  }
+  if (md === "choice-option" || md === "multichoice-option") {
+    const label = block.getAttribute("data-md-label");
+    return label ? `[Option] ${label}` : null;
+  }
+  if (md === "userinput") {
+    const label = block.getAttribute("data-md-label");
+    return label ? `[Input] ${label}` : null;
+  }
+  if (md === "rangeinput") {
+    const label = block.getAttribute("data-md-label");
+    return label ? `[Range] ${label}` : null;
+  }
+  if (md === "image") {
+    const src = block.getAttribute("data-md-src");
+    return src ? `[Image] ${src}` : null;
+  }
+  return null;
+}
+
+/**
+ * Find the DOM element for an annotation — either an inline mark (data-annotation-id)
+ * or a block element matched by snippet.
+ */
+export function findAnnotationElement(ann: Annotation): HTMLElement | null {
+  // Try inline mark first
+  const mark = document.querySelector(`[data-annotation-id="${ann.id}"]`) as HTMLElement | null;
+  if (mark) return mark;
+
+  // For block annotations (snippet starts with "["), find by matching snippet against blocks
+  if (ann.snippet.startsWith("[")) {
+    for (const el of document.querySelectorAll(ANNOTATABLE_SELECTOR)) {
+      if (getBlockSnippet(el as HTMLElement) === ann.snippet) {
+        return el as HTMLElement;
+      }
+    }
+  }
+
+  return null;
+}
+
+/** Flash/pulse the element briefly — blinks bg via CSS animation */
+function flashElement(el: HTMLElement) {
+  el.classList.remove("ann-flash");
+  void el.offsetWidth; // force reflow to restart
+  el.classList.add("ann-flash");
+  el.addEventListener("animationend", () => { el.classList.remove("ann-flash"); }, { once: true });
+}
+
+/**
+ * Scroll the canvas/file view to an annotation element and flash it.
+ * Handles file annotations by switching view first.
+ */
+export function scrollToAnnotation(ann: Annotation, setActiveView: (view: ActiveView) => void) {
+  if (ann.filePath) {
+    setActiveView({ type: "file", path: ann.filePath });
+    setTimeout(() => {
+      const el = findAnnotationElement(ann);
+      if (el) {
+        el.scrollIntoView({ behavior: "smooth", block: "center" });
+        flashElement(el);
+      }
+    }, 150);
+  } else {
+    const el = findAnnotationElement(ann);
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "center" });
+      flashElement(el);
+    }
+  }
+}

package/daemon/client/components/Mermaid.tsx

@@ -276,9 +276,9 @@ export function Mermaid({ children }: MermaidProps) {
               {nodePopover.snippet}
             </div>
           }
-          onAdd={(note) => {
+          onAdd={(note, images) => {
             const id = `ann-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
-            addAnnotationWithId(id, `[Diagram ${nodePopover.prefix.toLowerCase()}] ${nodePopover.snippet}`, note);
+            addAnnotationWithId(id, `[Diagram ${nodePopover.prefix.toLowerCase()}] ${nodePopover.snippet}`, note, undefined, undefined, images);
             setNodePopover(null);
           }}
           onCancel={() => setNodePopover(null)}

package/daemon/client/generateMarkdown.ts

@@ -201,6 +201,14 @@ function renderAnnotation(ann: Annotation): string {
     lines.push(ann.note.trim());
   }
 
+  // Attached images
+  if (ann.images?.length) {
+    lines.push("");
+    for (const img of ann.images) {
+      lines.push(`![screenshot](${img})`);
+    }
+  }
+
   lines.push("");
   return lines.join("\n");
 }

package/daemon/client/highlightRange.ts

@@ -1,23 +1,3 @@
-const MARK_STYLE_INACTIVE = `
-  background: var(--color-highlight-annotation);
-  border-bottom: 1.5px solid var(--color-highlight-bg);
-  border-radius: 2px;
-  cursor: pointer;
-  transition: background 150ms ease;
-  color: inherit;
-  padding: 1px 0;
-`;
-
-const MARK_STYLE_ACTIVE = `
-  background: var(--color-highlight-bg);
-  border-bottom: 1.5px solid var(--color-highlight-border);
-  border-radius: 2px;
-  cursor: pointer;
-  transition: background 150ms ease;
-  color: inherit;
-  padding: 1px 0;
-`;
-
 /**
  * Wraps the current browser Range in <mark> elements with the given annotation ID.
  * Works for multiline / cross-element selections.
@@ -46,7 +26,6 @@ export function wrapRangeWithMark(range: Range, annotationId: string): HTMLEleme
     // Wrap this portion in a <mark>
     const mark = document.createElement("mark");
     mark.setAttribute("data-annotation-id", annotationId);
-    mark.style.cssText = MARK_STYLE_INACTIVE;
 
     try {
       nodeRange.surroundContents(mark);
@@ -94,7 +73,7 @@ function getTextNodesInRange(range: Range): Text[] {
 export function setMarkActive(annotationId: string, active: boolean) {
   const marks = document.querySelectorAll(`[data-annotation-id="${annotationId}"]`);
   for (const mark of marks) {
-    (mark as HTMLElement).style.cssText = active ? MARK_STYLE_ACTIVE : MARK_STYLE_INACTIVE;
+    (mark as HTMLElement).classList.toggle("mark-active", active);
   }
 }
 

package/daemon/client/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Agent Canvas</title>
-  <script>document.documentElement.dataset.theme = localStorage.getItem('canvas-theme') || 'dark';</script>
+  <script>!function(){var p=localStorage.getItem('canvas-theme')||'auto';document.documentElement.dataset.theme=p==='auto'?(matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light'):p}()</script>
   <link rel="stylesheet" href="/assets/client.css" />
 </head>
 <body class="min-h-screen">

package/daemon/client/runtime.ts

@@ -19,6 +19,7 @@ export interface Annotation {
   createdAt: string;
   filePath?: string;
   context?: AnnotationContext;
+  images?: string[];
 }
 
 export interface PlanResponse {
@@ -41,9 +42,11 @@ export interface FeedbackEntry {
 export interface AnnotationContextValue {
   annotations: Annotation[];
   addAnnotation: (snippet: string, note: string, filePath?: string) => void;
-  addAnnotationWithId: (id: string, snippet: string, note: string, filePath?: string, context?: AnnotationContext) => void;
+  addAnnotationWithId: (id: string, snippet: string, note: string, filePath?: string, context?: AnnotationContext, images?: string[]) => void;
   updateAnnotation: (id: string, note: string) => void;
   removeAnnotation: (id: string) => void;
+  addAnnotationImage: (id: string, imagePath: string) => void;
+  removeAnnotationImage: (id: string, imagePath: string) => void;
   generalNote: string;
   setGeneralNote: (text: string) => void;
   clearAll: () => void;

package/daemon/client/styles.css

@@ -56,7 +56,7 @@
   --color-highlight-bg: rgba(200, 160, 30, 0.15);
   --color-highlight-border: rgba(200, 160, 30, 0.40);
   --color-highlight-annotation: rgba(200, 160, 30, 0.18);
-  --color-highlight-active: rgba(200, 160, 30, 0.25);
+  --color-highlight-active: rgba(200, 160, 30, 0.35);
   --color-highlight-selected: rgba(200, 160, 30, 0.10);
 
   --color-badge-bg: rgba(160, 120, 32, 0.15);
@@ -96,7 +96,33 @@ code, pre, .font-mono {
   font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
 }
 
-/* Annotation highlight */
+/* Annotation inline marks */
+mark[data-annotation-id] {
+  background: var(--color-highlight-annotation);
+  border-bottom: 1.5px solid var(--color-highlight-bg);
+  border-radius: 2px;
+  cursor: pointer;
+  transition: background 150ms ease, box-shadow 150ms ease;
+  color: inherit;
+  padding: 1px 0;
+}
+
+mark[data-annotation-id].mark-active {
+  background: var(--color-highlight-active);
+  border-bottom: 2px solid var(--color-highlight-border);
+  box-shadow: 0 0 0 1px var(--color-highlight-border);
+}
+
+@keyframes ann-flash {
+  0%, 100% { background: var(--color-highlight-annotation); }
+  25%, 75% { background: var(--color-highlight-active); }
+}
+
+.ann-flash {
+  animation: ann-flash 0.6s ease 2;
+}
+
+/* Annotation highlight (legacy) */
 .annotation-highlight {
   background: var(--color-highlight-bg);
   border-bottom: 2px solid var(--color-highlight-border);

package/daemon/client/theme.css

@@ -31,7 +31,7 @@
   --color-highlight-bg: rgba(255, 220, 100, 0.15);
   --color-highlight-border: rgba(255, 220, 100, 0.35);
   --color-highlight-annotation: rgba(255, 220, 100, 0.18);
-  --color-highlight-active: rgba(255, 220, 100, 0.25);
+  --color-highlight-active: rgba(255, 220, 100, 0.35);
   --color-highlight-selected: rgba(255, 220, 100, 0.10);
 
   --color-badge-bg: rgba(196, 154, 58, 0.20);

package/daemon/client/useTextAnnotation.tsx

@@ -0,0 +1,183 @@
+import React, { useEffect, useState, useRef, useCallback } from "react";
+import type { AnnotationContext, Annotation } from "./AnnotationProvider";
+import { useAnnotations } from "./AnnotationProvider";
+import { wrapRangeWithMark, updateAllMarkStates, renameMarkId, unwrapMarks, restoreMarks } from "./highlightRange";
+import { AnnotationCreatePopover, AnnotationEditPopover } from "./Popover";
+import { generateAnnotationId } from "./utils";
+
+interface UseTextAnnotationOptions {
+  /** Ref to the container element where text can be selected and marks are placed */
+  containerRef: React.RefObject<HTMLElement | null>;
+  /** Trigger for mark restoration — when this value changes, marks are restored */
+  restoreKey: unknown;
+  /** Subset of annotations to restore in this container */
+  restoreAnnotations: Annotation[];
+  /** Build AnnotationContext from a selection Range */
+  extractContext: (range: Range) => AnnotationContext | undefined;
+  /** Optional filePath to associate with created annotations */
+  filePath?: string;
+  /** Scroll container for popover positioning */
+  scrollContainer?: HTMLElement | null;
+}
+
+export function useTextAnnotation(options: UseTextAnnotationOptions) {
+  const { containerRef, restoreKey, restoreAnnotations, extractContext, filePath, scrollContainer } = options;
+  const { annotations: allAnnotations, addAnnotationWithId, removeAnnotation, updateAnnotation, addAnnotationImage, removeAnnotationImage, activeAnnotationId, setActiveAnnotationId } = useAnnotations();
+
+  const [editPopover, setEditPopover] = useState<{ anchorEl: HTMLElement; annId: string } | null>(null);
+  const [createPopover, setCreatePopover] = useState<{ anchorEl: HTMLElement; tempId: string; snippet: string; ctx?: AnnotationContext } | null>(null);
+
+  // Refs for stable handlers (registered with empty or minimal deps)
+  const extractContextRef = useRef(extractContext);
+  extractContextRef.current = extractContext;
+  const filePathRef = useRef(filePath);
+  filePathRef.current = filePath;
+  const addAnnotationRef = useRef(addAnnotationWithId);
+  addAnnotationRef.current = addAnnotationWithId;
+  const activeAnnotationIdRef = useRef(activeAnnotationId);
+  activeAnnotationIdRef.current = activeAnnotationId;
+  const setActiveAnnotationIdRef = useRef(setActiveAnnotationId);
+  setActiveAnnotationIdRef.current = setActiveAnnotationId;
+
+  // Mark restoration after content renders
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const timer = setTimeout(() => {
+      if (containerRef.current) {
+        restoreMarks(containerRef.current, restoreAnnotations);
+      }
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [restoreKey]);
+
+  // Mark active state tracking
+  const prevActiveRef = useRef<string | null>(null);
+  useEffect(() => {
+    updateAllMarkStates(activeAnnotationId, prevActiveRef.current);
+    prevActiveRef.current = activeAnnotationId;
+  }, [activeAnnotationId]);
+
+  // Mark click/hover/out handlers on the container (uses refs to avoid re-registration on every hover)
+  useEffect(() => {
+    const container = containerRef.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 === activeAnnotationIdRef.current) {
+        setEditPopover({ anchorEl: mark, annId });
+      } else {
+        setActiveAnnotationIdRef.current(annId);
+      }
+    };
+
+    const handleMouseOver = (e: MouseEvent) => {
+      const mark = (e.target as HTMLElement).closest("[data-annotation-id]") as HTMLElement | null;
+      if (mark) setActiveAnnotationIdRef.current(mark.getAttribute("data-annotation-id")!);
+    };
+
+    const handleMouseOut = (e: MouseEvent) => {
+      const mark = (e.target as HTMLElement).closest("[data-annotation-id]");
+      const related = (e.relatedTarget as HTMLElement | null)?.closest?.("[data-annotation-id]");
+      if (mark && !related && !document.getElementById("ann-inline-popover")) setActiveAnnotationIdRef.current(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);
+    };
+  }, [restoreKey]);
+
+  // Document-level mouseup for text selection → mark → popover
+  useEffect(() => {
+    const handler = () => handleMouseUp();
+    document.addEventListener("mouseup", handler);
+    return () => document.removeEventListener("mouseup", handler);
+  }, []);
+
+  const handleMouseUp = useCallback(() => {
+    const sel = window.getSelection();
+    if (!sel || sel.isCollapsed || !sel.toString().trim()) return;
+    if (!containerRef.current) return;
+    const range = sel.getRangeAt(0);
+    if (!containerRef.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;
+
+    // Extract context before wrapping disturbs the DOM
+    const ctx = extractContextRef.current(range);
+    const savedRange = range.cloneRange();
+    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 });
+  }, []);
+
+  const openCreatePopover = useCallback((anchorEl: HTMLElement, tempId: string, snippet: string, ctx?: AnnotationContext) => {
+    setCreatePopover({ anchorEl, tempId, snippet, ctx });
+  }, []);
+
+  const popovers = (
+    <>
+      {editPopover && (() => {
+        const ann = allAnnotations.find((a) => a.id === editPopover.annId);
+        if (!ann) return null;
+        return (
+          <AnnotationEditPopover
+            anchorEl={editPopover.anchorEl}
+            scrollContainer={scrollContainer}
+            initialNote={ann.note}
+            initialImages={ann.images}
+            onUpdate={(note, images) => {
+              updateAnnotation(editPopover.annId, note);
+              // Sync images
+              const current = ann.images || [];
+              for (const img of images) {
+                if (!current.includes(img)) addAnnotationImage(editPopover.annId, img);
+              }
+              for (const img of current) {
+                if (!images.includes(img)) removeAnnotationImage(editPopover.annId, img);
+              }
+            }}
+            onDelete={() => { removeAnnotation(editPopover.annId); setActiveAnnotationId(null); }}
+            onClose={() => setEditPopover(null)}
+          />
+        );
+      })()}
+
+      {createPopover && (
+        <AnnotationCreatePopover
+          anchorEl={createPopover.anchorEl}
+          scrollContainer={scrollContainer}
+          snippet={createPopover.snippet}
+          truncateAt={80}
+          onAdd={(note, images) => {
+            const id = generateAnnotationId();
+            renameMarkId(createPopover.tempId, id);
+            addAnnotationRef.current(id, createPopover.snippet, note, filePathRef.current, createPopover.ctx, images);
+            setCreatePopover(null);
+          }}
+          onCancel={() => {
+            unwrapMarks(createPopover.tempId);
+            setCreatePopover(null);
+          }}
+        />
+      )}
+    </>
+  );
+
+  return { popovers, openCreatePopover, isPopoverOpen: !!(editPopover || createPopover) };
+}