agent-canvas 0.1.9 → 0.1.11

package/README.md

@@ -5,6 +5,8 @@ Interactive browser-based visual canvas for [Claude Code](https://docs.anthropic
 ![License](https://img.shields.io/npm/l/agent-canvas)
 ![npm](https://img.shields.io/npm/v/agent-canvas)
 
+![Agent Canvas](.github/light.png)
+
 ## What it does
 
 When Claude needs to present a plan, review, explanation, or decision — instead of dumping markdown in the terminal — it renders a full interactive canvas in your browser. You can:
@@ -53,6 +55,14 @@ Claude uses different canvas flows depending on the task:
 | **Review** | Code/architecture review | Findings → Fix Plan → Summary |
 | **Decision** | Choosing between options | Single canvas with comparison |
 
+## Theming
+
+Agent Canvas supports light and dark themes, automatically matching your system preference.
+
+**Dark mode**
+
+![](.github/dark.png)
+
 ## Development
 
 ```bash

package/daemon/build.ts

@@ -96,7 +96,7 @@ async function build() {
   <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" />
   <link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/styles/github-dark-dimmed.min.css" />
   <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

package/daemon/client/AnnotationEditor.tsx

@@ -0,0 +1,307 @@
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import { autoResizeTextarea } from "./utils";
+
+interface AnnotationEditorProps {
+  note: string;
+  onNoteChange: (note: string) => void;
+  images: string[];
+  onAddImage: (path: string) => void;
+  onRemoveImage: (path: string) => void;
+  sessionId: string;
+
+  placeholder?: string;
+  autoFocus?: boolean;
+  autoResize?: boolean;
+  readOnly?: boolean;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  onTextareaClick?: (e: React.MouseEvent) => void;
+  textareaRef?: React.MutableRefObject<HTMLTextAreaElement | null>;
+  textareaClassName?: string;
+  textareaStyle?: React.CSSProperties;
+  minHeight?: number;
+  /** "always" (default), "on-focus" (sidebar), or "none" (popover — use openFilePickerRef) */
+  attachButton?: "always" | "on-focus" | "none";
+  /** Parent can store the open-file-picker function for external trigger */
+  openFilePickerRef?: React.MutableRefObject<(() => void) | null>;
+}
+
+export function imageToUrl(path: string): string {
+  const filename = path.split("/").pop();
+  return `/api/uploads/${filename}`;
+}
+
+async function uploadImage(sessionId: string, file: File): Promise<string | null> {
+  const formData = new FormData();
+  formData.append("image", file);
+  try {
+    const resp = await fetch(`/api/session/${sessionId}/upload`, { method: "POST", body: formData });
+    const data = await resp.json();
+    return data.path || null;
+  } catch {
+    return null;
+  }
+}
+
+export function AnnotationEditor({
+  note, onNoteChange, images, onAddImage, onRemoveImage, sessionId,
+  placeholder = "Add your note...", autoFocus = false, autoResize = false,
+  readOnly = false, onKeyDown, onTextareaClick, textareaRef: externalRef,
+  textareaClassName, textareaStyle, minHeight,
+  attachButton = "always", openFilePickerRef,
+}: AnnotationEditorProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const dragCounter = useRef(0);
+  const internalRef = useRef<HTMLTextAreaElement | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  const openFilePicker = useCallback(() => fileInputRef.current?.click(), []);
+
+  // Expose file picker to parent
+  useEffect(() => {
+    if (openFilePickerRef) openFilePickerRef.current = openFilePicker;
+  }, [openFilePickerRef, openFilePicker]);
+
+  const setRef = useCallback((el: HTMLTextAreaElement | null) => {
+    internalRef.current = el;
+    if (externalRef) externalRef.current = el;
+    if (el && autoResize) autoResizeTextarea(el, minHeight);
+  }, [externalRef, autoResize, minHeight]);
+
+  useEffect(() => {
+    if (autoFocus && internalRef.current) {
+      const ta = internalRef.current;
+      ta.focus();
+      if (ta.value) ta.setSelectionRange(ta.value.length, ta.value.length);
+    }
+  }, [autoFocus]);
+
+  const doUpload = useCallback(async (file: File) => {
+    if (!file.type.startsWith("image/")) return;
+    setIsUploading(true);
+    try {
+      const path = await uploadImage(sessionId, file);
+      if (path) onAddImage(path);
+    } finally {
+      setIsUploading(false);
+    }
+  }, [sessionId, onAddImage]);
+
+  const handlePaste = useCallback((e: React.ClipboardEvent) => {
+    const items = e.clipboardData.items;
+    for (const item of items) {
+      if (item.type.startsWith("image/")) {
+        e.preventDefault();
+        const file = item.getAsFile();
+        if (file) doUpload(file);
+        return;
+      }
+    }
+  }, [doUpload]);
+
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    dragCounter.current++;
+    if (dragCounter.current === 1) setIsDragging(true);
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    dragCounter.current--;
+    if (dragCounter.current === 0) setIsDragging(false);
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    dragCounter.current = 0;
+    setIsDragging(false);
+    for (const file of e.dataTransfer.files) {
+      if (file.type.startsWith("image/")) doUpload(file);
+    }
+  }, [doUpload]);
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onNoteChange(e.target.value);
+    if (autoResize) {
+      e.target.style.height = "auto";
+      e.target.style.height = (minHeight ? Math.max(minHeight, e.target.scrollHeight) : e.target.scrollHeight) + "px";
+    }
+  }, [onNoteChange, autoResize, minHeight]);
+
+  const defaultClassName = "w-full bg-transparent text-[13px] font-body text-text-primary resize-none focus:outline-none leading-relaxed p-0 border-none";
+  const defaultStyle: React.CSSProperties = {
+    width: "100%", background: "transparent", border: "none",
+    color: "var(--color-text-primary)", fontFamily: "'Inter', sans-serif",
+    fontSize: "13px", lineHeight: "1.5", outline: "none",
+    ...(autoResize ? { resize: "none" as const, overflow: "hidden" } : { resize: "vertical" as const }),
+  };
+
+  const showButton = !readOnly && (
+    attachButton === "always" ||
+    (attachButton === "on-focus" && isFocused)
+  );
+
+  return (
+    <div
+      style={{ position: "relative" }}
+      onDragEnter={readOnly ? undefined : handleDragEnter}
+      onDragOver={readOnly ? undefined : handleDragOver}
+      onDragLeave={readOnly ? undefined : handleDragLeave}
+      onDrop={readOnly ? undefined : handleDrop}
+    >
+      <textarea
+        ref={setRef}
+        value={note}
+        onChange={readOnly ? undefined : handleChange}
+        onPaste={readOnly ? undefined : handlePaste}
+        onKeyDown={onKeyDown}
+        onClick={onTextareaClick}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => {
+          // Delay so click on attach button registers before hiding
+          setTimeout(() => setIsFocused(false), 150);
+        }}
+        readOnly={readOnly}
+        placeholder={placeholder}
+        className={textareaClassName ?? defaultClassName}
+        style={textareaStyle ?? defaultStyle}
+        rows={autoResize ? 1 : undefined}
+      />
+
+      {/* Hidden file input — always rendered for paste/drop + external trigger */}
+      {!readOnly && (
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          multiple
+          style={{ display: "none" }}
+          onChange={(e) => {
+            const files = e.target.files;
+            if (files) for (const f of files) doUpload(f);
+            e.target.value = "";
+          }}
+        />
+      )}
+
+      {/* Image thumbnails + inline attach button */}
+      {(images.length > 0 || showButton) && (
+        <div style={{ display: "flex", gap: "6px", flexWrap: "wrap", marginTop: "6px", alignItems: "center" }}>
+          {images.map((img) => (
+            <div
+              key={img}
+              style={{
+                position: "relative", width: "56px", height: "56px",
+                borderRadius: "6px", overflow: "hidden",
+                border: "1px solid var(--color-border-subtle)",
+                flexShrink: 0,
+              }}
+            >
+              <img
+                src={imageToUrl(img)}
+                alt=""
+                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
+              />
+              {!readOnly && (
+                <button
+                  onClick={(e) => { e.stopPropagation(); onRemoveImage(img); }}
+                  style={{
+                    position: "absolute", top: "2px", right: "2px",
+                    width: "16px", height: "16px", borderRadius: "50%",
+                    background: "rgba(0,0,0,0.6)", color: "white",
+                    border: "none", cursor: "pointer", fontSize: "11px",
+                    display: "flex", alignItems: "center", justifyContent: "center",
+                    lineHeight: 1, padding: 0,
+                  }}
+                  title="Remove image"
+                >
+                  &times;
+                </button>
+              )}
+            </div>
+          ))}
+          {showButton && <AttachButton onClick={openFilePicker} />}
+        </div>
+      )}
+
+      {isUploading && (
+        <div style={{
+          fontSize: "11px", color: "var(--color-text-tertiary)",
+          fontFamily: "'Inter', sans-serif", marginTop: "4px",
+        }}>
+          Uploading...
+        </div>
+      )}
+
+      {isDragging && (
+        <div style={{
+          position: "absolute", inset: 0, display: "flex",
+          alignItems: "center", justifyContent: "center",
+          background: "var(--color-highlight-bg)", opacity: 0.9,
+          border: "2px dashed var(--color-highlight-border)",
+          borderRadius: "6px", zIndex: 10, pointerEvents: "none",
+          fontSize: "12px", fontFamily: "'Inter', sans-serif",
+          color: "var(--color-text-secondary)",
+        }}>
+          Drop image
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Small attach-image button — reusable in editor and popover button bar */
+export function AttachButton({ onClick, size = 16 }: { onClick: () => void; size?: number }) {
+  return (
+    <button
+      onClick={(e) => { e.stopPropagation(); onClick(); }}
+      style={{
+        width: `${size * 2}px`, height: `${size * 2}px`, borderRadius: "6px",
+        border: "none",
+        background: "transparent", cursor: "pointer",
+        display: "flex", alignItems: "center", justifyContent: "center",
+        color: "var(--color-text-tertiary)", flexShrink: 0,
+        transition: "color 0.15s",
+      }}
+      title="Attach image"
+      onMouseEnter={(e) => { e.currentTarget.style.color = "var(--color-text-secondary)"; }}
+      onMouseLeave={(e) => { e.currentTarget.style.color = "var(--color-text-tertiary)"; }}
+    >
+      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+        <circle cx="8.5" cy="8.5" r="1.5" />
+        <polyline points="21 15 16 10 5 21" />
+      </svg>
+    </button>
+  );
+}
+
+/** Read-only image thumbnails for display in read-only annotations */
+export function ImageThumbnails({ images }: { images: string[] }) {
+  if (!images.length) return null;
+  return (
+    <div style={{ display: "flex", gap: "6px", flexWrap: "wrap", marginTop: "6px" }}>
+      {images.map((img) => (
+        <div
+          key={img}
+          style={{
+            width: "56px", height: "56px", borderRadius: "6px",
+            overflow: "hidden", border: "1px solid var(--color-border-subtle)",
+            flexShrink: 0,
+          }}
+        >
+          <img
+            src={imageToUrl(img)}
+            alt=""
+            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

package/daemon/client/AnnotationProvider.tsx

@@ -97,8 +97,8 @@ export function AnnotationProvider({ sessionId, revision, isReadOnly, children }
     return () => { if (persistTimerRef.current) clearTimeout(persistTimerRef.current); };
   }, [annotations, generalNote, responses, feedbackEntries, sessionId, revision, isReadOnly]);
 
-  const addAnnotationWithId = useCallback((id: string, snippet: string, note: string, filePath?: string, context?: AnnotationContext) => {
-    setAnnotations((prev) => [...prev, { id, snippet, note, createdAt: new Date().toISOString(), filePath, context }]);
+  const addAnnotationWithId = useCallback((id: string, snippet: string, note: string, filePath?: string, context?: AnnotationContext, images?: string[]) => {
+    setAnnotations((prev) => [...prev, { id, snippet, note, createdAt: new Date().toISOString(), filePath, context, ...(images?.length ? { images } : {}) }]);
   }, []);
 
   const addAnnotation = useCallback((snippet: string, note: string, filePath?: string) => {
@@ -115,6 +115,18 @@ export function AnnotationProvider({ sessionId, revision, isReadOnly, children }
     setActiveAnnotationId((prev) => (prev === id ? null : prev));
   }, []);
 
+  const addAnnotationImage = useCallback((id: string, imagePath: string) => {
+    setAnnotations((prev) => prev.map((a) =>
+      a.id === id ? { ...a, images: [...(a.images || []), imagePath] } : a
+    ));
+  }, []);
+
+  const removeAnnotationImage = useCallback((id: string, imagePath: string) => {
+    setAnnotations((prev) => prev.map((a) =>
+      a.id === id ? { ...a, images: (a.images || []).filter((p) => p !== imagePath) } : a
+    ));
+  }, []);
+
   const setResponse = useCallback((id: string, response: PlanResponse) => {
     setResponses((prev) => {
       const next = new Map(prev);
@@ -159,7 +171,7 @@ export function AnnotationProvider({ sessionId, revision, isReadOnly, children }
   return (
     <AnnotationCtx.Provider
       value={{
-        annotations, addAnnotation, addAnnotationWithId, updateAnnotation, removeAnnotation,
+        annotations, addAnnotation, addAnnotationWithId, updateAnnotation, removeAnnotation, addAnnotationImage, removeAnnotationImage,
         generalNote, setGeneralNote, clearAll,
         activeAnnotationId, setActiveAnnotationId,
         responses, setResponse,

package/daemon/client/AnnotationSidebar.tsx

@@ -7,6 +7,8 @@ import { SessionContext } from "#canvas/runtime";
 import { MarkdownPreview } from "./ResponsePreview";
 import { FileIcon } from "./FileIcon";
 import { autoResizeTextarea, RESPONSE_ANNOTATION_PATH } from "./utils";
+import { AnnotationEditor, ImageThumbnails } from "./AnnotationEditor";
+import { findAnnotationElement, scrollToAnnotation } from "./annotationDom";
 
 interface AnnotationSidebarProps {
   onPreview: () => void;
@@ -179,8 +181,6 @@ function ReadOnlyAnnotationList({ annotations, generalNote, activeAnnotationId,
   const handleMouseEnter = (annId: string) => {
     setActiveAnnotationId(annId);
     setMarkActive(annId, true);
-    const mark = document.querySelector(`[data-annotation-id="${annId}"]`) as HTMLElement | null;
-    if (mark) mark.scrollIntoView({ behavior: "smooth", block: "nearest" });
   };
 
   const handleMouseLeave = (annId: string) => {
@@ -196,8 +196,8 @@ function ReadOnlyAnnotationList({ annotations, generalNote, activeAnnotationId,
       if (ann.filePath) {
         setActiveView({ type: "file", path: ann.filePath });
         setTimeout(() => {
-          const mark = document.querySelector(`[data-annotation-id="${ann.id}"]`) as HTMLElement | null;
-          if (mark) mark.scrollIntoView({ behavior: "smooth", block: "center" });
+          const el = findAnnotationElement(ann);
+          if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
         }, 150);
       }
     }
@@ -206,7 +206,7 @@ function ReadOnlyAnnotationList({ annotations, generalNote, activeAnnotationId,
   const renderAnnotation = (ann: Annotation) => (
     <div
       key={ann.id}
-      className={`relative px-3 py-2.5 transition-colors duration-150 cursor-pointer ${
+      className={`group/ann relative px-3 py-2.5 transition-colors duration-150 cursor-pointer ${
         activeAnnotationId === ann.id
           ? "bg-highlight-selected"
           : "odd:bg-bg-elevated-half hover:bg-bg-input"
@@ -223,6 +223,18 @@ function ReadOnlyAnnotationList({ annotations, generalNote, activeAnnotationId,
           {ann.note}
         </div>
       )}
+      <ImageThumbnails images={ann.images || []} />
+      <div className="absolute top-1.5 right-1.5 opacity-0 group-hover/ann:opacity-100 transition-opacity duration-100">
+        <button
+          onClick={(e) => { e.stopPropagation(); scrollToAnnotation(ann, setActiveView); }}
+          className="w-5 h-5 flex items-center justify-center rounded text-text-tertiary hover:text-text-secondary hover:bg-bg-input transition-colors"
+          title="Scroll to annotation"
+        >
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="12" r="3" /><path d="M12 2v4M12 18v4M2 12h4M18 12h4" />
+          </svg>
+        </button>
+      </div>
     </div>
   );
 
@@ -278,10 +290,12 @@ function ReadOnlyAnnotationList({ annotations, generalNote, activeAnnotationId,
 function AnnotationSidebarInner({ onPreview, onSubmit, collapseButton }: AnnotationSidebarProps) {
   const {
     annotations, updateAnnotation, removeAnnotation,
+    addAnnotationImage, removeAnnotationImage,
     generalNote, setGeneralNote,
     activeAnnotationId, setActiveAnnotationId,
     responses, feedbackEntries,
   } = useAnnotations();
+  const sessionId = useContext(SessionContext);
   const { setActiveView } = React.useContext(ActiveViewContext);
 
   const listRef = useRef<HTMLDivElement>(null);
@@ -306,15 +320,10 @@ function AnnotationSidebarInner({ onPreview, onSubmit, collapseButton }: Annotat
     }
   }, [activeAnnotationId]);
 
-  // Hover on sidebar card → highlight inline mark + block + scroll to it
+  // Hover on sidebar card → highlight inline mark + block
   const handleMouseEnter = useCallback((annId: string) => {
     setActiveAnnotationId(annId);
     setMarkActive(annId, true);
-    // Scroll inline mark into view
-    const mark = document.querySelector(`[data-annotation-id="${annId}"]`) as HTMLElement | null;
-    if (mark) {
-      mark.scrollIntoView({ behavior: "smooth", block: "nearest" });
-    }
   }, [setActiveAnnotationId]);
 
   const handleMouseLeave = useCallback((annId: string) => {
@@ -345,10 +354,9 @@ function AnnotationSidebarInner({ onPreview, onSubmit, collapseButton }: Annotat
           setActiveAnnotationId(ann.id);
           if (ann.filePath) {
             setActiveView({ type: "file", path: ann.filePath });
-            // Scroll to mark after file view renders
             setTimeout(() => {
-              const mark = document.querySelector(`[data-annotation-id="${ann.id}"]`) as HTMLElement | null;
-              if (mark) mark.scrollIntoView({ behavior: "smooth", block: "center" });
+              const el = findAnnotationElement(ann);
+              if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
             }, 150);
           }
         }
@@ -359,20 +367,38 @@ function AnnotationSidebarInner({ onPreview, onSubmit, collapseButton }: Annotat
         {ann.snippet.length > 80 ? ann.snippet.slice(0, 80) + "..." : ann.snippet}
       </div>
 
-      {/* Seamless editable note */}
-      <textarea
-        value={ann.note}
-        onChange={(e) => updateAnnotation(ann.id, e.target.value)}
-        onClick={(e) => e.stopPropagation()}
-        className="w-full bg-transparent text-[13px] font-body text-text-primary resize-none focus:outline-none leading-relaxed p-0 border-none min-h-[20px]"
-        rows={1}
-        style={{ height: "auto", overflow: "hidden" }}
-        onInput={(e) => autoResizeTextarea(e.target as HTMLTextAreaElement)}
-        ref={(el) => { if (el) autoResizeTextarea(el); }}
-      />
-
-      {/* Delete — top right on hover */}
-      <div className="absolute top-1.5 right-1.5 opacity-0 group-hover/ann:opacity-100 transition-opacity duration-100">
+      {/* Editable note + images */}
+      <div onClick={(e) => e.stopPropagation()}>
+        <AnnotationEditor
+          note={ann.note}
+          onNoteChange={(note) => updateAnnotation(ann.id, note)}
+          images={ann.images || []}
+          onAddImage={(path) => addAnnotationImage(ann.id, path)}
+          onRemoveImage={(path) => removeAnnotationImage(ann.id, path)}
+          sessionId={sessionId}
+          autoResize
+          minHeight={20}
+          textareaClassName="w-full bg-transparent text-[13px] font-body text-text-primary resize-none focus:outline-none leading-relaxed p-0 border-none min-h-[20px]"
+          textareaStyle={{ height: "auto", overflow: "hidden" }}
+          placeholder="Add your note..."
+          attachButton="on-focus"
+        />
+      </div>
+
+      {/* Actions — top right on hover */}
+      <div className="absolute top-1.5 right-1.5 opacity-0 group-hover/ann:opacity-100 transition-opacity duration-100 flex items-center gap-0.5">
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            scrollToAnnotation(ann, setActiveView);
+          }}
+          className="w-5 h-5 flex items-center justify-center rounded text-text-tertiary hover:text-text-secondary hover:bg-bg-input transition-colors"
+          title="Scroll to annotation"
+        >
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="12" r="3" /><path d="M12 2v4M12 18v4M2 12h4M18 12h4" />
+          </svg>
+        </button>
         <button
           onClick={(e) => { e.stopPropagation(); removeAnnotation(ann.id); }}
           className="w-5 h-5 flex items-center justify-center rounded text-text-tertiary hover:text-accent-red hover:bg-accent-red-muted transition-colors"