agent-canvas 0.1.44 → 0.2.0

package/daemon/client/Popover.tsx

@@ -1,350 +0,0 @@
-import React, { useEffect, useRef, useState, useCallback, useMemo, useContext } from "react";
-import { createPortal } from "react-dom";
-import { getPopoverPosition } from "./popoverPosition";
-import { AnnotationEditor, AttachButton } from "./AnnotationEditor";
-import { SessionContext } from "#canvas/runtime";
-
-interface PopoverProps {
-  anchorEl: HTMLElement;
-  scrollContainer?: HTMLElement | null;
-  onClose: () => void;
-  /** Selectors that should not trigger outside-click close */
-  ignoreSelector?: string;
-  zIndex?: string;
-  padding?: string;
-  width?: string;
-  children: React.ReactNode;
-}
-
-export function Popover({ anchorEl, scrollContainer, onClose, ignoreSelector, zIndex = "50", padding = "12px", width = "280px", children }: PopoverProps) {
-  const popRef = useRef<HTMLDivElement>(null);
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
-  const { style: posStyle, parent } = getPopoverPosition(anchorEl, scrollContainer);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      const handler = (e: MouseEvent) => {
-        if (popRef.current && !popRef.current.contains(e.target as Node)) {
-          if (ignoreSelector && (e.target as HTMLElement).closest?.(ignoreSelector)) return;
-          onCloseRef.current();
-          document.removeEventListener("mousedown", handler);
-        }
-      };
-      document.addEventListener("mousedown", handler);
-      return () => document.removeEventListener("mousedown", handler);
-    }, 0);
-    return () => clearTimeout(timer);
-  }, [ignoreSelector]);
-
-  return createPortal(
-    <div
-      ref={popRef}
-      style={{
-        ...posStyle,
-        zIndex,
-        width,
-        background: "var(--color-bg-elevated)",
-        border: "1px solid var(--color-border-hover)",
-        borderRadius: "8px",
-        boxShadow: "0 4px 12px var(--color-shadow)",
-        padding,
-        fontFamily: "'Inter', sans-serif",
-      }}
-    >
-      {children}
-    </div>,
-    parent,
-  );
-}
-
-/* ── Create/Edit annotation popover ────────────────────────── */
-
-interface AnnotationPopoverProps {
-  anchorEl: HTMLElement;
-  scrollContainer?: HTMLElement | null;
-  snippet: string;
-  /** Max length for displayed snippet (default 100) */
-  truncateAt?: number;
-  /** Custom header instead of the default quoted snippet */
-  header?: React.ReactNode;
-  /** Initial note text (for edit mode) */
-  initialNote?: string;
-  /** Initial images (for edit mode) */
-  initialImages?: string[];
-  /** Called on confirm — passes note and images */
-  onConfirm: (note: string, images: string[]) => void;
-  /** Called on cancel / close without saving */
-  onCancel: () => void;
-  /** Called when annotation should be deleted (edit mode) */
-  onDelete?: () => void;
-}
-
-const SUGGESTION_GROUPS: { label: string; items: string[] }[] = [
-  { label: "Clarity", items: ["Unclear", "Why?", "Needs example", "Missing context"] },
-  { label: "Scope", items: ["Overkill", "Out of scope", "Important", "Risky"] },
-  { label: "Action", items: ["Simplify", "Rethink", "Expand on this", "Skip this"] },
-];
-const ALL_SUGGESTIONS = SUGGESTION_GROUPS.flatMap((g) => g.items);
-
-export function AnnotationPopover({
-  anchorEl, scrollContainer, snippet, truncateAt = 100, header,
-  initialNote = "", initialImages, onConfirm, onCancel, onDelete,
-}: AnnotationPopoverProps) {
-  const sessionId = useContext(SessionContext);
-  const isEditMode = initialNote !== "" || !!onDelete;
-  const [note, setNote] = useState(initialNote);
-  const [images, setImages] = useState<string[]>(initialImages || []);
-  const [selectedIdx, setSelectedIdx] = useState<number | null>(null);
-  const [suppressed, setSuppressed] = useState(isEditMode);
-  const [deleteHover, setDeleteHover] = useState(false);
-  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
-  const openFilePickerRef = useRef<(() => void) | null>(null);
-
-  const submit = useCallback(() => {
-    if (note.trim() || images.length > 0) onConfirm(note.trim(), images);
-    else if (isEditMode && onDelete) onDelete();
-    else onCancel();
-  }, [note, images, onConfirm, onCancel, isEditMode, onDelete]);
-
-  const handleClose = useCallback(() => {
-    if (isEditMode) {
-      if (!note.trim() && images.length === 0 && onDelete) { onDelete(); onCancel(); return; }
-      onConfirm(note, images);
-      return;
-    }
-    onCancel();
-  }, [note, images, isEditMode, onConfirm, onCancel, onDelete]);
-
-  // Suggestions (only in create mode)
-  const showSuggestions = !isEditMode;
-  const matches = note.trim().length > 0
-    ? ALL_SUGGESTIONS.filter((s) => s.toLowerCase().startsWith(note.trim().toLowerCase()))
-    : ALL_SUGGESTIONS;
-  const filtered = !showSuggestions || suppressed ? [] : matches.length === 1 && matches[0].toLowerCase() === note.trim().toLowerCase() ? [] : matches;
-  const matchSet = new Set(filtered);
-
-  const filteredGroups = SUGGESTION_GROUPS
-    .map((g) => ({ label: g.label, items: g.items.filter((s) => matchSet.has(s)) }))
-    .filter((g) => g.items.length > 0);
-
-  const colItems = filteredGroups.map((g) => g.items);
-  const flatFiltered = colItems.flat();
-
-  const selectedCol = useMemo(() => {
-    if (selectedIdx === null) return 0;
-    let count = 0;
-    for (let c = 0; c < colItems.length; c++) {
-      if (selectedIdx < count + colItems[c].length) return c;
-      count += colItems[c].length;
-    }
-    return 0;
-  }, [selectedIdx, colItems]);
-  const selectedRow = useMemo(() => {
-    if (selectedIdx === null) return 0;
-    let count = 0;
-    for (let c = 0; c < selectedCol; c++) count += colItems[c].length;
-    return selectedIdx - count;
-  }, [selectedIdx, selectedCol, colItems]);
-
-  const colRowToFlat = (col: number, row: number) => {
-    let idx = 0;
-    for (let c = 0; c < col; c++) idx += colItems[c].length;
-    return idx + row;
-  };
-
-  const [prevNote, setPrevNote] = useState(note);
-  if (note !== prevNote) {
-    setPrevNote(note);
-    setSelectedIdx(null);
-    setSuppressed(isEditMode);
-  }
-
-  const applySuggestion = useCallback((s: string) => {
-    setNote(s);
-  }, []);
-
-  const truncated = snippet.length > truncateAt ? snippet.slice(0, truncateAt) + "..." : snippet;
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (flatFiltered.length > 0 && (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft" || e.key === "ArrowRight")) {
-      e.preventDefault();
-      if (selectedIdx === null) { setSelectedIdx(0); return; }
-      if (e.key === "ArrowDown") {
-        const newRow = Math.min(selectedRow + 1, colItems[selectedCol].length - 1);
-        setSelectedIdx(colRowToFlat(selectedCol, newRow));
-      } else if (e.key === "ArrowUp") {
-        const newRow = Math.max(selectedRow - 1, 0);
-        setSelectedIdx(colRowToFlat(selectedCol, newRow));
-      } else if (e.key === "ArrowRight") {
-        const newCol = Math.min(selectedCol + 1, colItems.length - 1);
-        const newRow = Math.min(selectedRow, colItems[newCol].length - 1);
-        setSelectedIdx(colRowToFlat(newCol, newRow));
-      } else if (e.key === "ArrowLeft") {
-        const newCol = Math.max(selectedCol - 1, 0);
-        const newRow = Math.min(selectedRow, colItems[newCol].length - 1);
-        setSelectedIdx(colRowToFlat(newCol, newRow));
-      }
-      return;
-    }
-    if (selectedIdx !== null && flatFiltered.length > 0) {
-      if (e.key === "Tab") { e.preventDefault(); applySuggestion(flatFiltered[selectedIdx]); return; }
-      if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); onConfirm(flatFiltered[selectedIdx], images); return; }
-    }
-    if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); return; }
-    if (e.key === "Escape") {
-      if (flatFiltered.length > 0 && !suppressed) { setSuppressed(true); }
-      else if (isEditMode) { handleClose(); }
-      else { onCancel(); }
-    }
-  }, [flatFiltered, selectedIdx, selectedRow, selectedCol, colItems, colRowToFlat, applySuggestion, onConfirm, images, submit, suppressed, isEditMode, handleClose, onCancel]);
-
-  return (
-    <Popover
-      anchorEl={anchorEl}
-      scrollContainer={scrollContainer}
-      onClose={isEditMode ? handleClose : onCancel}
-      ignoreSelector={isEditMode ? "[data-annotation-id]" : undefined}
-      zIndex={isEditMode ? "60" : "50"}
-      padding={isEditMode ? "10px 12px" : "12px"}
-      width="420px"
-    >
-      {!isEditMode && (header ?? (
-        <div style={{ fontSize: "11px", color: "var(--color-text-tertiary)", fontStyle: "italic", marginBottom: "8px", lineHeight: "1.4", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }}>
-          &ldquo;{truncated}&rdquo;
-        </div>
-      ))}
-
-      <AnnotationEditor
-        note={note}
-        onNoteChange={setNote}
-        images={images}
-        onAddImage={(path) => setImages((prev) => [...prev, path])}
-        onRemoveImage={(path) => setImages((prev) => prev.filter((p) => p !== path))}
-        sessionId={sessionId}
-        autoFocus
-        autoResize={isEditMode}
-        textareaRef={textareaRef}
-        onKeyDown={handleKeyDown}
-        attachButton="none"
-        openFilePickerRef={openFilePickerRef}
-        textareaStyle={isEditMode ? {
-          width: "100%", background: "transparent", border: "none",
-          color: "var(--color-text-primary)", fontFamily: "'Inter', sans-serif",
-          fontSize: "13px", lineHeight: "1.5", resize: "none", outline: "none",
-          overflow: "hidden",
-        } : {
-          width: "100%", minHeight: "60px", background: "transparent", border: "none",
-          color: "var(--color-text-primary)", fontFamily: "'Inter', sans-serif",
-          fontSize: "13px", lineHeight: "1.5", resize: "vertical", outline: "none",
-        }}
-        placeholder="Add your note..."
-      />
-
-      {/* Action buttons */}
-      {/* Action buttons */}
-      <div style={{ display: "flex", alignItems: "center", gap: "8px", marginTop: isEditMode ? "6px" : "8px" }}>
-        <AttachButton onClick={() => openFilePickerRef.current?.()} size={14} />
-        <div style={{ flex: 1 }} />
-        {isEditMode ? (
-          <button
-            onClick={() => { if (onDelete) onDelete(); onCancel(); }}
-            onMouseEnter={() => setDeleteHover(true)}
-            onMouseLeave={() => setDeleteHover(false)}
-            style={{ fontSize: "11px", color: deleteHover ? "var(--color-accent-red)" : "var(--color-text-tertiary)", background: "none", border: "none", cursor: "pointer", padding: "2px 0", fontFamily: "'Inter', sans-serif" }}
-          >Delete</button>
-        ) : (
-          <>
-            <button onClick={onCancel} style={{ fontSize: "11px", color: "var(--color-text-tertiary)", background: "none", border: "none", cursor: "pointer", padding: "4px 12px", fontFamily: "'Inter', sans-serif" }}>Cancel</button>
-            <button onClick={submit} style={{ fontSize: "11px", fontWeight: 500, padding: "4px 12px", borderRadius: "6px", background: "var(--color-highlight-bg)", color: "var(--color-text-primary)", border: "1px solid var(--color-highlight-border)", cursor: "pointer", fontFamily: "'Inter', sans-serif" }}>Add</button>
-          </>
-        )}
-      </div>
-
-      {/* Suggestions (create mode only) */}
-      {flatFiltered.length > 0 && (
-        <div style={{ marginTop: "6px", borderTop: "1px solid var(--color-border-subtle)", paddingTop: "8px", display: "flex", gap: "4px" }}>
-          {filteredGroups.map((group) => (
-            <div key={group.label} style={{ flex: 1 }}>
-              <div style={{ fontSize: "10px", fontWeight: 600, color: "var(--color-text-disabled)", textTransform: "uppercase", letterSpacing: "0.05em", padding: "2px 6px", marginBottom: "2px", fontFamily: "'Inter', sans-serif" }}>
-                {group.label}
-              </div>
-              {group.items.map((s) => {
-                const flatIdx = flatFiltered.indexOf(s);
-                return (
-                  <div
-                    key={s}
-                    onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); applySuggestion(s); }}
-                    onMouseEnter={() => setSelectedIdx(flatIdx)}
-                    style={{
-                      padding: "3px 6px",
-                      fontSize: "12px",
-                      borderRadius: "4px",
-                      fontFamily: "'Inter', sans-serif",
-                      color: flatIdx === selectedIdx ? "var(--color-text-primary)" : "var(--color-text-secondary)",
-                      background: flatIdx === selectedIdx ? "var(--color-highlight-selected)" : "transparent",
-                      cursor: "pointer",
-                    }}
-                  >
-                    <span style={{ fontWeight: 500 }}>{s.slice(0, note.trim().length)}</span>{s.slice(note.trim().length)}
-                  </div>
-                );
-              })}
-            </div>
-          ))}
-        </div>
-      )}
-    </Popover>
-  );
-}
-
-/* ── Legacy exports for backwards compatibility ───────────── */
-
-interface AnnotationCreatePopoverProps {
-  anchorEl: HTMLElement;
-  scrollContainer?: HTMLElement | null;
-  snippet: string;
-  truncateAt?: number;
-  header?: React.ReactNode;
-  onAdd: (note: string, images?: string[]) => void;
-  onCancel: () => void;
-}
-
-export function AnnotationCreatePopover({ anchorEl, scrollContainer, snippet, truncateAt, header, onAdd, onCancel }: AnnotationCreatePopoverProps) {
-  return (
-    <AnnotationPopover
-      anchorEl={anchorEl}
-      scrollContainer={scrollContainer}
-      snippet={snippet}
-      truncateAt={truncateAt}
-      header={header}
-      onConfirm={(note, images) => onAdd(note, images)}
-      onCancel={onCancel}
-    />
-  );
-}
-
-interface AnnotationEditPopoverProps {
-  anchorEl: HTMLElement;
-  scrollContainer?: HTMLElement | null;
-  initialNote: string;
-  initialImages?: string[];
-  onUpdate: (note: string, images: string[]) => void;
-  onDelete: () => void;
-  onClose: () => void;
-}
-
-export function AnnotationEditPopover({ anchorEl, scrollContainer, initialNote, initialImages, onUpdate, onDelete, onClose }: AnnotationEditPopoverProps) {
-  return (
-    <AnnotationPopover
-      anchorEl={anchorEl}
-      scrollContainer={scrollContainer}
-      snippet=""
-      initialNote={initialNote}
-      initialImages={initialImages}
-      onConfirm={(note, images) => { onUpdate(note, images); onClose(); }}
-      onDelete={onDelete}
-      onCancel={onClose}
-    />
-  );
-}

package/daemon/client/RenderErrorContext.ts

@@ -1,11 +0,0 @@
-import { createContext } from "react";
-
-export interface CanvasRenderError {
-  revision: number;
-  filename: string;
-  message: string;
-  stack?: string;
-  componentStack?: string;
-}
-
-export const RenderErrorContext = createContext<(error: CanvasRenderError) => void>(() => {});

package/daemon/client/ResponsePreview.tsx

@@ -1,186 +0,0 @@
-import React, { useEffect, useState, useRef, useMemo } from "react";
-import { marked } from "marked";
-import { useAnnotations } from "./AnnotationProvider";
-import { generateMarkdown, getMissingRequiredLabels } from "./generateMarkdown";
-
-interface ResponsePreviewProps {
-  open: boolean;
-  onClose: () => void;
-  onSubmit: (feedback: string) => void;
-  includedRemoteIds: Set<string>;
-  onToggleRemoteId: (id: string) => void;
-}
-
-export function ResponsePreview({ open, onClose, onSubmit, includedRemoteIds, onToggleRemoteId }: ResponsePreviewProps) {
-  const { annotations, generalNote, responses, feedbackEntries } = useAnnotations();
-  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);
-
-  const remoteAnnotations = useMemo(
-    () => annotations.filter((a) => a.source === "remote"),
-    [annotations],
-  );
-
-  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, includedRemoteIds),
-    [annotations, generalNote, responses, feedbackEntries, includedRemoteIds],
-  );
-  const text = manuallyEdited ? editedText : generatedText;
-
-  useEffect(() => {
-    if (open && editMode && textareaRef.current) {
-      textareaRef.current.focus();
-    }
-  }, [open, editMode]);
-
-  useEffect(() => {
-    if (!open) return;
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [open, onClose]);
-
-  if (!open) return null;
-
-  const hasContent = text.trim().length > 0;
-
-  return (
-    <div className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-8" onClick={onClose}>
-      <div className="bg-bg-surface border border-border-medium rounded-xl shadow-lg w-full max-w-2xl flex flex-col" style={{ height: "80vh" }} onClick={(e) => e.stopPropagation()}>
-        {/* Header */}
-        <div className="flex items-center justify-between px-5 py-3 border-b border-border-subtle flex-shrink-0">
-          <div className="flex items-center gap-3">
-            <span className="text-[13px] font-medium text-text-primary font-body">Response preview</span>
-            {manuallyEdited && (
-              <button onClick={() => { setManuallyEdited(false); setEditMode(false); }} className="text-[11px] text-text-tertiary hover:text-text-secondary font-body">
-                Reset
-              </button>
-            )}
-          </div>
-          <div className="flex items-center gap-2">
-            {/* Mode toggle */}
-            <div className="flex items-center bg-bg-base rounded-md p-0.5">
-              <button
-                onClick={() => setEditMode(false)}
-                className={`px-2.5 py-1 rounded text-[11px] font-body font-medium transition-colors ${
-                  !editMode ? "bg-bg-elevated text-text-primary shadow-sm" : "text-text-tertiary hover:text-text-secondary"
-                }`}
-              >
-                Preview
-              </button>
-              <button
-                onClick={() => setEditMode(true)}
-                className={`px-2.5 py-1 rounded text-[11px] font-body font-medium transition-colors ${
-                  editMode ? "bg-bg-elevated text-text-primary shadow-sm" : "text-text-tertiary hover:text-text-secondary"
-                }`}
-              >
-                Edit
-              </button>
-            </div>
-            <button onClick={onClose} className="text-text-tertiary hover:text-text-secondary w-7 h-7 flex items-center justify-center rounded-md hover:bg-border-subtle transition-colors">
-              &#x2715;
-            </button>
-          </div>
-        </div>
-
-        {/* Content */}
-        {editMode ? (
-          <textarea
-            ref={textareaRef}
-            value={text}
-            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..."
-          />
-        ) : (
-          <div className="flex-1 overflow-y-auto p-5">
-            <MarkdownPreview text={text} />
-          </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">
-            <span>{validationError}</span>
-            <button
-              onClick={() => {
-                setValidationError(null);
-                onSubmit(text);
-              }}
-              className="text-[11px] text-text-tertiary hover:text-text-secondary font-body whitespace-nowrap underline"
-            >
-              Submit anyway
-            </button>
-          </div>
-        )}
-        <div className="flex justify-end gap-2 px-5 py-3 border-t border-border-subtle flex-shrink-0">
-          <button
-            onClick={onClose}
-            className="px-4 py-2 rounded-lg text-[13px] font-body text-text-tertiary hover:text-text-secondary transition-colors"
-          >
-            Cancel
-          </button>
-          <button
-            onClick={() => {
-              const allMissing = getMissingRequiredLabels(responses, feedbackEntries);
-              if (allMissing.length > 0) {
-                setValidationError(`Please answer: ${allMissing.join(", ")}`);
-                return;
-              }
-              setValidationError(null);
-              onSubmit(text);
-            }}
-            disabled={!hasContent}
-            className={`px-6 py-2 rounded-lg font-body text-[13px] font-medium transition-all ${
-              hasContent
-                ? "bg-btn-primary text-btn-primary-text hover:opacity-90"
-                : "bg-bg-input text-text-disabled cursor-default"
-            }`}
-          >
-            Submit feedback
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-const UPLOADS_PATH_RE = /!\[([^\]]*)\]\((\/tmp\/agent-canvas\/uploads\/([^)]+))\)/g;
-
-function rewriteUploadPaths(md: string): string {
-  return md.replace(UPLOADS_PATH_RE, (_match, alt, _fullPath, filename) => `![${alt}](/api/uploads/${filename})`);
-}
-
-export function MarkdownPreview({ text }: { text: string }) {
-  const html = useMemo(() => marked.parse(rewriteUploadPaths(text), { async: false }) as string, [text]);
-  return <div className="prose-canvas font-body text-body text-text-primary leading-relaxed" dangerouslySetInnerHTML={{ __html: html }} />;
-}

package/daemon/client/SessionContext.tsx

@@ -1,3 +0,0 @@
-import { createContext } from "react";
-
-export const SessionContext = createContext<string>("");

package/daemon/client/annotationContext.ts

@@ -1,114 +0,0 @@
-import type { AnnotationContext } from "./AnnotationProvider";
-
-/**
- * Extract disambiguation context from a Range:
- * - surrounding text (before/after the selection)
- * - hierarchy path (Section title → Task label)
- */
-export function extractContext(range: Range, planContainer: HTMLElement): AnnotationContext {
-  const before = getSurroundingText(range, "before", 60);
-  const after = getSurroundingText(range, "after", 60);
-  const hierarchy = getHierarchy(range.startContainer, planContainer);
-
-  return { before, after, hierarchy };
-}
-
-function getSurroundingText(range: Range, direction: "before" | "after", maxChars: number): string {
-  const block = getBlockParent(direction === "before" ? range.startContainer : range.endContainer);
-  if (!block) return "";
-
-  let text = "";
-
-  if (direction === "before") {
-    const walker = document.createTreeWalker(block, NodeFilter.SHOW_TEXT);
-    let node: Text | null;
-    while ((node = walker.nextNode() as Text | null)) {
-      if (node === range.startContainer) {
-        text += (node.textContent || "").slice(0, range.startOffset);
-        break;
-      }
-      if (node.parentElement?.hasAttribute("data-annotation-id")) continue;
-      text += node.textContent || "";
-    }
-    if (text.length > maxChars) {
-      text = text.slice(-maxChars);
-      const spaceIdx = text.indexOf(" ");
-      if (spaceIdx > 0) text = text.slice(spaceIdx + 1);
-    }
-  } else {
-    const walker = document.createTreeWalker(block, NodeFilter.SHOW_TEXT);
-    let found = false;
-    let node: Text | null;
-    while ((node = walker.nextNode() as Text | null)) {
-      if (node === range.endContainer) {
-        text += (node.textContent || "").slice(range.endOffset);
-        found = true;
-        continue;
-      }
-      if (found) {
-        if (node.parentElement?.hasAttribute("data-annotation-id")) continue;
-        text += node.textContent || "";
-      }
-    }
-    if (text.length > maxChars) {
-      text = text.slice(0, maxChars);
-      const spaceIdx = text.lastIndexOf(" ");
-      if (spaceIdx > 0) text = text.slice(0, spaceIdx);
-    }
-  }
-
-  return text.trim();
-}
-
-function getBlockParent(node: Node): Element | null {
-  const blockTags = new Set(["DIV", "P", "LI", "PRE", "BLOCKQUOTE", "SECTION", "ARTICLE"]);
-  let el = node.parentElement;
-  while (el) {
-    if (blockTags.has(el.tagName)) return el;
-    el = el.parentElement;
-  }
-  return null;
-}
-
-function getHierarchy(node: Node, planContainer: HTMLElement): string[] {
-  const path: string[] = [];
-  let el = node instanceof Element ? node : node.parentElement;
-
-  while (el && el !== planContainer) {
-    const taskId = el.getAttribute?.("data-task-id");
-    if (taskId) {
-      const label = el.querySelector(".font-semibold");
-      if (label) path.unshift(label.textContent?.trim() || taskId);
-    }
-
-    if (el.tagName === "DIV" && el.querySelector(":scope > button .font-heading, :scope > div .font-heading")) {
-      const heading = el.querySelector(".font-heading");
-      if (heading) path.unshift(heading.textContent?.trim() || "");
-    }
-
-    el = el.parentElement;
-  }
-
-  return path;
-}
-
-/**
- * Format a snippet with surrounding context for disambiguation.
- * Short snippets get before/after context.
- */
-export function formatSnippetInContext(ann: { snippet: string; context?: AnnotationContext }): string {
-  const snippet = ann.snippet.trim();
-  const ctx = ann.context;
-
-  const isShort = snippet.length < 30;
-
-  if (ctx && isShort && (ctx.before || ctx.after)) {
-    const parts: string[] = [];
-    if (ctx.before) parts.push(`...${ctx.before} `);
-    parts.push(`**${snippet}**`);
-    if (ctx.after) parts.push(` ${ctx.after}...`);
-    return parts.join("");
-  }
-
-  return snippet;
-}