agent-canvas 0.1.0

package/daemon/client/generateMarkdown.ts

@@ -0,0 +1,194 @@
+import type { Annotation, PlanResponse, FeedbackEntry } from "./AnnotationProvider";
+import { formatSnippetInContext } from "./annotationContext";
+
+/**
+ * Generate human-readable markdown feedback from annotations and responses.
+ */
+export function generateMarkdown(
+  annotations: Annotation[],
+  generalNote: string,
+  responses?: Map<string, PlanResponse>,
+  feedbackEntries?: Map<string, FeedbackEntry>,
+): string {
+  const parts: string[] = [];
+  const planAnns = annotations.filter((a) => !a.filePath);
+  const fileAnns = annotations.filter((a) => a.filePath);
+  const resps = responses ? Array.from(responses.values()).filter((r) => hasValue(r)) : [];
+  const fbEntries = feedbackEntries
+    ? Array.from(feedbackEntries.values()).filter((e) => e.markdown.trim())
+    : [];
+
+  // Responses section
+  const hasResponseSection = resps.length > 0 || fbEntries.length > 0;
+  if (hasResponseSection) {
+    parts.push("## Responses");
+    parts.push("");
+    for (const r of resps) {
+      parts.push(renderResponse(r));
+    }
+    for (const entry of fbEntries) {
+      parts.push(entry.markdown.trim());
+      parts.push("");
+    }
+  }
+
+  // Plan annotations grouped by hierarchy
+  if (planAnns.length > 0) {
+    parts.push("## Plan annotations");
+    parts.push("");
+    const grouped = groupByHierarchy(planAnns);
+    parts.push(renderHierarchyGroup(grouped));
+  }
+
+  // File annotations grouped by path
+  if (fileAnns.length > 0) {
+    const groups: Record<string, Annotation[]> = {};
+    for (const ann of fileAnns) {
+      const key = ann.filePath!;
+      if (!groups[key]) groups[key] = [];
+      groups[key].push(ann);
+    }
+    parts.push("## File annotations");
+    parts.push("");
+    for (const [filePath, anns] of Object.entries(groups)) {
+      parts.push(`### ${filePath}`);
+      parts.push("");
+      for (const ann of anns) {
+        parts.push(renderAnnotation(ann));
+      }
+    }
+  }
+
+  // General notes
+  if (generalNote.trim()) {
+    parts.push("## General notes");
+    parts.push("");
+    parts.push(generalNote.trim());
+    parts.push("");
+  }
+
+  return parts.join("\n").trim() + "\n";
+}
+
+export function hasValue(r: PlanResponse): boolean {
+  if (r.note?.trim()) return true;
+  if (r.value === null || r.value === undefined) return false;
+  if (r.type === "text" && !(r.value as string).trim()) return false;
+  if (r.type === "checkbox" && (r.value as string[]).length === 0) return false;
+  return true;
+}
+
+export function getMissingRequired(responses: Map<string, PlanResponse>): PlanResponse[] {
+  const missing: PlanResponse[] = [];
+  for (const r of responses.values()) {
+    if (!r.required) continue;
+    if (r.value === null || r.value === undefined) { missing.push(r); continue; }
+    if (r.type === "text" && !(r.value as string).trim()) { missing.push(r); continue; }
+    if (r.type === "checkbox" && (r.value as string[]).length === 0) { missing.push(r); continue; }
+  }
+  return missing;
+}
+
+export function getMissingRequiredFeedback(entries: Map<string, FeedbackEntry>): FeedbackEntry[] {
+  const missing: FeedbackEntry[] = [];
+  for (const entry of entries.values()) {
+    if (entry.required && !entry.markdown.trim()) {
+      missing.push(entry);
+    }
+  }
+  return missing;
+}
+
+function renderResponse(r: PlanResponse): string {
+  const lines: string[] = [];
+  lines.push(`**${r.label}**`);
+
+  switch (r.type) {
+    case "radio":
+    case "select":
+      lines.push(`Answer: ${r.value}`);
+      break;
+    case "checkbox":
+      for (const v of r.value as string[]) {
+        lines.push(`- [x] ${v}`);
+      }
+      break;
+    case "text":
+      lines.push("");
+      lines.push((r.value as string).trim());
+      break;
+    case "range":
+      lines.push(`Answer: ${r.value}`);
+      break;
+  }
+
+  if (r.note?.trim()) {
+    lines.push("");
+    lines.push(`Note: ${r.note.trim()}`);
+  }
+
+  lines.push("");
+  return lines.join("\n");
+}
+
+function renderAnnotation(ann: Annotation): string {
+  const lines: string[] = [];
+  const snippet = ann.snippet.trim();
+  const context = formatSnippetInContext(ann);
+
+  // Show selected text as a quote
+  if (snippet.split("\n").length <= 3) {
+    lines.push(`> ${context.split("\n").join("\n> ")}`);
+  } else {
+    // Longer selections — just first/last line
+    const snippetLines = snippet.split("\n");
+    lines.push(`> ${snippetLines[0]}`);
+    lines.push(`> ... (${snippetLines.length} lines)`);
+    lines.push(`> ${snippetLines[snippetLines.length - 1]}`);
+  }
+
+  // Comment
+  if (ann.note.trim()) {
+    lines.push("");
+    lines.push(ann.note.trim());
+  }
+
+  lines.push("");
+  return lines.join("\n");
+}
+
+interface HierarchyNode {
+  label: string;
+  annotations: Annotation[];
+  children: Map<string, HierarchyNode>;
+}
+
+function groupByHierarchy(annotations: Annotation[]): HierarchyNode {
+  const root: HierarchyNode = { label: "", annotations: [], children: new Map() };
+  for (const ann of annotations) {
+    const path = ann.context?.hierarchy || [];
+    let current = root;
+    for (const segment of path) {
+      if (!current.children.has(segment)) {
+        current.children.set(segment, { label: segment, annotations: [], children: new Map() });
+      }
+      current = current.children.get(segment)!;
+    }
+    current.annotations.push(ann);
+  }
+  return root;
+}
+
+function renderHierarchyGroup(node: HierarchyNode, depth: number = 0): string {
+  const parts: string[] = [];
+  for (const ann of node.annotations) {
+    parts.push(renderAnnotation(ann));
+  }
+  for (const [, child] of node.children) {
+    const prefix = depth === 0 ? "###" : "####";
+    parts.push(`${prefix} ${child.label}`);
+    parts.push("");
+    parts.push(renderHierarchyGroup(child, depth + 1));
+  }
+  return parts.join("\n");
+}

package/daemon/client/highlightRange.ts

@@ -0,0 +1,233 @@
+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.
+ */
+export function wrapRangeWithMark(range: Range, annotationId: string): HTMLElement[] {
+  const marks: HTMLElement[] = [];
+
+  // Collect all text nodes within the range
+  const textNodes = getTextNodesInRange(range);
+
+  for (const tn of textNodes) {
+    const nodeRange = document.createRange();
+    nodeRange.selectNodeContents(tn);
+
+    // Clamp to the actual selection range
+    if (tn === range.startContainer) {
+      nodeRange.setStart(tn, range.startOffset);
+    }
+    if (tn === range.endContainer) {
+      nodeRange.setEnd(tn, range.endOffset);
+    }
+
+    const text = nodeRange.toString();
+    if (!text || !text.trim()) continue;
+
+    // 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);
+    } catch {
+      // surroundContents fails if range crosses element boundaries within a single text node
+      // (shouldn't happen for a single text node, but handle gracefully)
+      const fragment = nodeRange.extractContents();
+      mark.appendChild(fragment);
+      nodeRange.insertNode(mark);
+    }
+
+    marks.push(mark);
+  }
+
+  return marks;
+}
+
+function getTextNodesInRange(range: Range): Text[] {
+  const nodes: Text[] = [];
+  const ancestor = range.commonAncestorContainer;
+
+  if (ancestor.nodeType === Node.TEXT_NODE) {
+    nodes.push(ancestor as Text);
+    return nodes;
+  }
+
+  const walker = document.createTreeWalker(ancestor, NodeFilter.SHOW_TEXT);
+  let node: Text | null;
+  while ((node = walker.nextNode() as Text | null)) {
+    // Skip line numbers and existing marks
+    const parent = node.parentElement;
+    if (parent?.classList.contains("select-none")) continue;
+
+    if (range.intersectsNode(node)) {
+      nodes.push(node);
+    }
+  }
+
+  return nodes;
+}
+
+/**
+ * Update the visual state of marks for a given annotation ID.
+ */
+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;
+  }
+}
+
+/**
+ * Update active state for all annotation marks.
+ */
+export function updateAllMarkStates(activeId: string | null) {
+  const allMarks = document.querySelectorAll("[data-annotation-id]");
+  for (const mark of allMarks) {
+    const id = mark.getAttribute("data-annotation-id");
+    (mark as HTMLElement).style.cssText = id === activeId ? MARK_STYLE_ACTIVE : MARK_STYLE_INACTIVE;
+  }
+}
+
+/**
+ * Rename annotation ID on existing marks (e.g. temp → real ID).
+ */
+export function renameMarkId(oldId: string, newId: string) {
+  const marks = document.querySelectorAll(`[data-annotation-id="${oldId}"]`);
+  for (const mark of marks) {
+    mark.setAttribute("data-annotation-id", newId);
+  }
+}
+
+/**
+ * Restore marks for persisted annotations by finding their snippet text in the DOM.
+ * Uses before/after context for disambiguation when the same text appears multiple times.
+ */
+export function restoreMarks(
+  container: HTMLElement,
+  annotations: { id: string; snippet: string; filePath?: string; context?: { before: string; after: string; hierarchy: string[] } }[]
+) {
+  // Skip annotations that already have marks in the DOM
+  const toRestore = annotations.filter(
+    (a) => !document.querySelector(`[data-annotation-id="${a.id}"]`)
+  );
+  if (!toRestore.length) return;
+
+  // Build full text content + mapping from text offset to (textNode, offsetInNode)
+  const textNodes: { node: Text; start: number }[] = [];
+  let fullText = "";
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+  let tn: Text | null;
+  while ((tn = walker.nextNode() as Text | null)) {
+    if (tn.parentElement?.classList.contains("select-none")) continue;
+    textNodes.push({ node: tn, start: fullText.length });
+    fullText += tn.textContent || "";
+  }
+
+  for (const ann of toRestore) {
+    const snippet = ann.snippet;
+    if (!snippet) continue;
+
+    // Find all occurrences of the snippet in the full text
+    const occurrences: number[] = [];
+    let searchFrom = 0;
+    while (true) {
+      const idx = fullText.indexOf(snippet, searchFrom);
+      if (idx === -1) break;
+      occurrences.push(idx);
+      searchFrom = idx + 1;
+    }
+
+    if (occurrences.length === 0) continue;
+
+    // Pick the best occurrence using context
+    let bestIdx = occurrences[0];
+    if (occurrences.length > 1 && ann.context) {
+      let bestScore = -1;
+      for (const idx of occurrences) {
+        let score = 0;
+        if (ann.context.before) {
+          const preceding = fullText.slice(Math.max(0, idx - 80), idx);
+          if (preceding.includes(ann.context.before)) score += 2;
+          else if (ann.context.before.length > 10 && preceding.includes(ann.context.before.slice(-10))) score += 1;
+        }
+        if (ann.context.after) {
+          const following = fullText.slice(idx + snippet.length, idx + snippet.length + 80);
+          if (following.includes(ann.context.after)) score += 2;
+          else if (ann.context.after.length > 10 && following.includes(ann.context.after.slice(0, 10))) score += 1;
+        }
+        if (score > bestScore) {
+          bestScore = score;
+          bestIdx = idx;
+        }
+      }
+    }
+
+    // Map text offsets to DOM positions
+    const startOffset = bestIdx;
+    const endOffset = bestIdx + snippet.length;
+
+    const startPos = offsetToNode(textNodes, startOffset);
+    const endPos = offsetToNode(textNodes, endOffset);
+    if (!startPos || !endPos) continue;
+
+    try {
+      const range = document.createRange();
+      range.setStart(startPos.node, startPos.offset);
+      range.setEnd(endPos.node, endPos.offset);
+      wrapRangeWithMark(range, ann.id);
+    } catch {}
+  }
+}
+
+function offsetToNode(
+  textNodes: { node: Text; start: number }[],
+  offset: number
+): { node: Text; offset: number } | null {
+  for (let i = textNodes.length - 1; i >= 0; i--) {
+    if (textNodes[i].start <= offset) {
+      const localOffset = offset - textNodes[i].start;
+      const nodeLen = textNodes[i].node.textContent?.length ?? 0;
+      if (localOffset <= nodeLen) {
+        return { node: textNodes[i].node, offset: localOffset };
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * Remove marks for a given annotation ID, restoring the original text nodes.
+ */
+export function unwrapMarks(annotationId: string) {
+  const marks = document.querySelectorAll(`[data-annotation-id="${annotationId}"]`);
+  for (const mark of marks) {
+    const parent = mark.parentNode;
+    if (!parent) continue;
+    while (mark.firstChild) {
+      parent.insertBefore(mark.firstChild, mark);
+    }
+    parent.removeChild(mark);
+    parent.normalize();
+  }
+}

package/daemon/client/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <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>
+  <link rel="stylesheet" href="/assets/client.css" />
+</head>
+<body class="min-h-screen">
+  <div id="root"></div>
+  <script type="importmap">
+  {
+    "imports": {
+      "react": "/assets/react.js",
+      "react-dom": "/assets/react-dom.js",
+      "react-dom/client": "/assets/react-dom-client.js",
+      "react/jsx-runtime": "/assets/react-jsx-runtime.js",
+      "react/jsx-dev-runtime": "/assets/react-jsx-dev-runtime.js",
+      "#canvas/components": "/assets/components.js"
+    }
+  }
+  </script>
+  <script type="module" src="/assets/client.js"></script>
+</body>
+</html>

package/daemon/client/lcs.ts

@@ -0,0 +1,19 @@
+/** Simple O(mn) space LCS for small inputs. */
+export function simpleLCS(a: string[], b: string[]): string[] {
+  const m = a.length, n = b.length;
+  if (m === 0 || n === 0) return [];
+
+  const dp: number[][] = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0));
+  for (let i = 1; i <= m; i++)
+    for (let j = 1; j <= n; j++)
+      dp[i][j] = a[i - 1] === b[j - 1] ? dp[i - 1][j - 1] + 1 : Math.max(dp[i - 1][j], dp[i][j - 1]);
+
+  const result: string[] = [];
+  let i = m, j = n;
+  while (i > 0 && j > 0) {
+    if (a[i - 1] === b[j - 1]) { result.unshift(a[i - 1]); i--; j--; }
+    else if (dp[i - 1][j] > dp[i][j - 1]) i--;
+    else j--;
+  }
+  return result;
+}

package/daemon/client/popoverPosition.ts

@@ -0,0 +1,31 @@
+/**
+ * Calculate popover position relative to an anchor element.
+ * Returns absolute position within the scroll container (or body).
+ */
+export function getPopoverPosition(
+  anchor: HTMLElement,
+  scrollContainer?: HTMLElement | null,
+): { style: Record<string, string>; parent: HTMLElement } {
+  const popoverWidth = 280;
+  const gap = 8;
+  const parent = scrollContainer || document.body;
+
+  // Use getBoundingClientRect for both anchor and parent,
+  // then add scroll offsets to get absolute position within parent
+  const anchorRect = anchor.getBoundingClientRect();
+  const parentRect = parent.getBoundingClientRect();
+
+  // Vertical: anchor bottom relative to parent top + any scroll
+  const scrollTop = parent === document.body ? window.scrollY : parent.scrollTop;
+  const top = anchorRect.bottom - parentRect.top + scrollTop + gap;
+
+  // Horizontal: clamp to parent width
+  const left = Math.max(0, Math.min(anchorRect.left - parentRect.left, parentRect.width - popoverWidth - 12));
+
+  parent.style.position = "relative";
+
+  return {
+    style: { position: "absolute", top: `${top}px`, left: `${left}px` },
+    parent,
+  };
+}

package/daemon/client/runtime.ts

@@ -0,0 +1,89 @@
+// #canvas/runtime — shared context between client app and components bundle
+// The React.createContext call MUST live here (not in AnnotationProvider)
+// so that both bundles reference the same context object.
+
+import { createContext, useContext, useEffect } from "react";
+
+export interface AnnotationContext {
+  before: string;
+  after: string;
+  hierarchy: string[];
+}
+
+export interface Annotation {
+  id: string;
+  snippet: string;
+  note: string;
+  createdAt: string;
+  filePath?: string;
+  context?: AnnotationContext;
+}
+
+export interface PlanResponse {
+  id: string;
+  type: "select" | "radio" | "checkbox" | "text" | "range";
+  label: string;
+  value: any;
+  options?: string[];
+  required?: boolean;
+  note?: string;
+}
+
+export interface FeedbackEntry {
+  id: string;
+  markdown: string;
+  label?: string;
+  required?: boolean;
+}
+
+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;
+  updateAnnotation: (id: string, note: string) => void;
+  removeAnnotation: (id: string) => void;
+  generalNote: string;
+  setGeneralNote: (text: string) => void;
+  clearAll: () => void;
+  activeAnnotationId: string | null;
+  setActiveAnnotationId: (id: string | null) => void;
+  responses: Map<string, PlanResponse>;
+  setResponse: (id: string, response: PlanResponse) => void;
+  feedbackEntries: Map<string, FeedbackEntry>;
+  setFeedbackEntry: (id: string, entry: FeedbackEntry) => void;
+  removeFeedbackEntry: (id: string) => void;
+}
+
+export const AnnotationCtx = createContext<AnnotationContextValue>(null!);
+
+export function useAnnotations(): AnnotationContextValue {
+  return useContext(AnnotationCtx);
+}
+
+export function useFeedback(
+  id: string,
+  markdown: string,
+  options?: { label?: string; required?: boolean },
+): void {
+  const { setFeedbackEntry, removeFeedbackEntry } = useAnnotations();
+  useEffect(() => {
+    setFeedbackEntry(id, {
+      id,
+      markdown,
+      label: options?.label,
+      required: options?.required,
+    });
+    return () => removeFeedbackEntry(id);
+  }, [id, markdown, options?.label, options?.required]);
+}
+
+export { SessionContext } from "./SessionContext";
+
+// ActiveView navigation — allows components (e.g. FilePreview) to open files
+export type ActiveView = { type: "plan" } | { type: "file"; path: string };
+
+export const ActiveViewCtx = createContext<{
+  setActiveView: (v: ActiveView) => void;
+}>({
+  setActiveView: () => {},
+});