agent-canvas 0.1.0

package/daemon/client/domDiff.ts

@@ -0,0 +1,336 @@
+/**
+ * Word-level DOM diff engine.
+ *
+ * Three stages:
+ * 1. Extract words from a DOM container with source-node mapping
+ * 2. Compute word-level LCS diff
+ * 3. Inject highlight <span> elements into the DOM
+ */
+
+import { simpleLCS } from "./lcs";
+
+interface WordEntry {
+  text: string;
+  node: Text;
+  offset: number; // character offset within the Text node
+}
+
+/** Walk all text nodes, tokenize into words+whitespace, record originating node+offset. */
+export function extractWords(container: HTMLElement): { words: string[]; map: WordEntry[] } {
+  const words: string[] = [];
+  const map: WordEntry[] = [];
+
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, {
+    acceptNode(node) {
+      const parent = node.parentElement;
+      if (!parent) return NodeFilter.FILTER_REJECT;
+      // Skip SVG, select-none, and data-no-diff elements
+      if (parent.closest("svg, .select-none, [data-no-diff]")) return NodeFilter.FILTER_REJECT;
+      return NodeFilter.FILTER_ACCEPT;
+    },
+  });
+
+  let textNode: Text | null;
+  while ((textNode = walker.nextNode() as Text | null)) {
+    const content = textNode.nodeValue || "";
+    // Tokenize: split on whitespace boundaries, keeping whitespace as tokens
+    const tokens = content.match(/\S+|\s+/g);
+    if (!tokens) continue;
+
+    let offset = 0;
+    for (const token of tokens) {
+      words.push(token);
+      map.push({ text: token, node: textNode, offset });
+      offset += token.length;
+    }
+  }
+
+  return { words, map };
+}
+
+interface DiffOp {
+  type: "same" | "added" | "removed";
+  index: number; // index in the original words array
+}
+
+/**
+ * Compute word-level LCS and return diff ops for both sides.
+ *
+ * For large inputs (>5k tokens), falls back to chunked diffing.
+ */
+export function computeWordDiff(
+  oldWords: string[],
+  newWords: string[]
+): { oldOps: DiffOp[]; newOps: DiffOp[] } {
+  if (oldWords.length > 5000 || newWords.length > 5000) {
+    return chunkedDiff(oldWords, newWords);
+  }
+  return directDiff(oldWords, newWords);
+}
+
+function directDiff(
+  oldWords: string[],
+  newWords: string[]
+): { oldOps: DiffOp[]; newOps: DiffOp[] } {
+  const lcs = computeLCS(oldWords, newWords);
+
+  const oldOps: DiffOp[] = [];
+  const newOps: DiffOp[] = [];
+
+  let oi = 0,
+    ni = 0,
+    li = 0;
+
+  while (oi < oldWords.length || ni < newWords.length) {
+    if (
+      li < lcs.length &&
+      oi < oldWords.length &&
+      ni < newWords.length &&
+      oldWords[oi] === lcs[li] &&
+      newWords[ni] === lcs[li]
+    ) {
+      oldOps.push({ type: "same", index: oi });
+      newOps.push({ type: "same", index: ni });
+      oi++;
+      ni++;
+      li++;
+    } else if (oi < oldWords.length && (li >= lcs.length || oldWords[oi] !== lcs[li])) {
+      oldOps.push({ type: "removed", index: oi });
+      oi++;
+    } else if (ni < newWords.length) {
+      newOps.push({ type: "added", index: ni });
+      ni++;
+    }
+  }
+
+  return { oldOps, newOps };
+}
+
+/**
+ * Compute LCS using Hirschberg's algorithm — O(mn) time but only O(n) space.
+ * Recursively divides the problem, using two-row DP to find the split point.
+ */
+function computeLCS(a: string[], b: string[]): string[] {
+  const m = a.length, n = b.length;
+  if (m === 0 || n === 0) return [];
+  if (m === 1) return b.includes(a[0]) ? [a[0]] : [];
+  if (n === 1) return a.includes(b[0]) ? [b[0]] : [];
+
+  // For small inputs, use the simple DP approach
+  if (m * n <= 1_000_000) {
+    return simpleLCS(a, b);
+  }
+
+  // Hirschberg divide-and-conquer
+  const mid = Math.floor(m / 2);
+  const aFirst = a.slice(0, mid);
+  const aSecond = a.slice(mid);
+
+  const scoreL = lcsLengthRow(aFirst, b);
+  const scoreR = lcsLengthRow([...aSecond].reverse(), [...b].reverse());
+
+  // Find optimal split in b
+  let best = 0, bestK = 0;
+  for (let k = 0; k <= n; k++) {
+    const score = scoreL[k] + scoreR[n - k];
+    if (score > best) { best = score; bestK = k; }
+  }
+
+  const bFirst = b.slice(0, bestK);
+  const bSecond = b.slice(bestK);
+
+  return [...computeLCS(aFirst, bFirst), ...computeLCS(aSecond, bSecond)];
+}
+
+/** Two-row DP: returns last row of LCS length table. O(n) space. */
+function lcsLengthRow(a: string[], b: string[]): number[] {
+  const n = b.length;
+  let prev = new Array(n + 1).fill(0);
+  let curr = new Array(n + 1).fill(0);
+  for (let i = 0; i < a.length; i++) {
+    for (let j = 1; j <= n; j++) {
+      curr[j] = a[i] === b[j - 1] ? prev[j - 1] + 1 : Math.max(prev[j], curr[j - 1]);
+    }
+    [prev, curr] = [curr, prev];
+    curr.fill(0);
+  }
+  return prev;
+}
+
+
+/**
+ * Chunked fallback for very large plans.
+ * Splits words into fixed-size chunks, aligns chunks via LCS,
+ * then runs word-level diff within each aligned chunk pair.
+ */
+function chunkedDiff(
+  oldWords: string[],
+  newWords: string[]
+): { oldOps: DiffOp[]; newOps: DiffOp[] } {
+  const CHUNK_SIZE = 200;
+
+  const splitIntoChunks = (words: string[]) => {
+    const chunks: { start: number; end: number; text: string }[] = [];
+    for (let i = 0; i < words.length; i += CHUNK_SIZE) {
+      const end = Math.min(i + CHUNK_SIZE, words.length);
+      chunks.push({ start: i, end, text: words.slice(i, end).join("") });
+    }
+    return chunks;
+  };
+
+  const oldChunks = splitIntoChunks(oldWords);
+  const newChunks = splitIntoChunks(newWords);
+
+  const oldTexts = oldChunks.map((c) => c.text);
+  const newTexts = newChunks.map((c) => c.text);
+  const chunkLCS = computeLCS(oldTexts, newTexts);
+
+  const oldOps: DiffOp[] = [];
+  const newOps: DiffOp[] = [];
+
+  let oci = 0, nci = 0, cli = 0;
+
+  while (oci < oldChunks.length || nci < newChunks.length) {
+    if (
+      cli < chunkLCS.length &&
+      oci < oldChunks.length &&
+      nci < newChunks.length &&
+      oldTexts[oci] === chunkLCS[cli] &&
+      newTexts[nci] === chunkLCS[cli]
+    ) {
+      // Identical chunks
+      for (let i = oldChunks[oci].start; i < oldChunks[oci].end; i++)
+        oldOps.push({ type: "same", index: i });
+      for (let i = newChunks[nci].start; i < newChunks[nci].end; i++)
+        newOps.push({ type: "same", index: i });
+      oci++;
+      nci++;
+      cli++;
+    } else if (oci < oldChunks.length && (cli >= chunkLCS.length || oldTexts[oci] !== chunkLCS[cli])) {
+      if (
+        nci < newChunks.length &&
+        (cli >= chunkLCS.length || newTexts[nci] !== chunkLCS[cli])
+      ) {
+        // Both sides changed — word-level diff within these chunks
+        const sub = directDiff(
+          oldWords.slice(oldChunks[oci].start, oldChunks[oci].end),
+          newWords.slice(newChunks[nci].start, newChunks[nci].end)
+        );
+        for (const op of sub.oldOps)
+          oldOps.push({ type: op.type, index: op.index + oldChunks[oci].start });
+        for (const op of sub.newOps)
+          newOps.push({ type: op.type, index: op.index + newChunks[nci].start });
+        oci++;
+        nci++;
+      } else {
+        // Only old side — removed
+        for (let i = oldChunks[oci].start; i < oldChunks[oci].end; i++)
+          oldOps.push({ type: "removed", index: i });
+        oci++;
+      }
+    } else if (nci < newChunks.length) {
+      // Only new side — added
+      for (let i = newChunks[nci].start; i < newChunks[nci].end; i++)
+        newOps.push({ type: "added", index: i });
+      nci++;
+    }
+  }
+
+  return { oldOps, newOps };
+}
+
+/**
+ * Apply highlights by grouping changed tokens per text node,
+ * then rebuilding each affected text node in a single pass.
+ *
+ * This avoids the stale-reference bug where wrapping one token
+ * removes the text node and breaks subsequent tokens from the same node.
+ */
+function applyHighlightsByNode(
+  ops: DiffOp[],
+  map: WordEntry[],
+  cssClass: string
+): void {
+  // Collect changed indices grouped by source text node
+  const nodeGroups = new Map<Text, { offset: number; length: number }[]>();
+
+  for (const op of ops) {
+    if (op.type === "same") continue;
+    const entry = map[op.index];
+    if (!entry || !entry.node.parentNode) continue;
+
+    let group = nodeGroups.get(entry.node);
+    if (!group) {
+      group = [];
+      nodeGroups.set(entry.node, group);
+    }
+    group.push({ offset: entry.offset, length: entry.text.length });
+  }
+
+  // For each text node, rebuild it with highlight spans
+  for (const [textNode, ranges] of nodeGroups) {
+    if (!textNode.parentNode) continue;
+    const content = textNode.nodeValue || "";
+
+    // Sort ranges by offset
+    ranges.sort((a, b) => a.offset - b.offset);
+
+    // Merge overlapping/adjacent ranges
+    const merged: { offset: number; length: number }[] = [];
+    for (const r of ranges) {
+      const last = merged[merged.length - 1];
+      if (last && r.offset <= last.offset + last.length) {
+        last.length = Math.max(last.length, r.offset + r.length - last.offset);
+      } else {
+        merged.push({ ...r });
+      }
+    }
+
+    // Build replacement nodes: alternating text and highlighted spans
+    const parent = textNode.parentNode;
+    const frag = document.createDocumentFragment();
+    let pos = 0;
+
+    for (const r of merged) {
+      // Text before this highlight
+      if (r.offset > pos) {
+        frag.appendChild(document.createTextNode(content.slice(pos, r.offset)));
+      }
+      // Highlighted span
+      const span = document.createElement("span");
+      span.className = cssClass;
+      span.textContent = content.slice(r.offset, r.offset + r.length);
+      frag.appendChild(span);
+      pos = r.offset + r.length;
+    }
+
+    // Remaining text after last highlight
+    if (pos < content.length) {
+      frag.appendChild(document.createTextNode(content.slice(pos)));
+    }
+
+    parent.replaceChild(frag, textNode);
+  }
+}
+
+/**
+ * Main entry point: run the full diff pipeline on two rendered containers.
+ * Returns true if there were any changes.
+ */
+export function runDomDiff(
+  oldContainer: HTMLElement,
+  newContainer: HTMLElement
+): boolean {
+  const oldExtract = extractWords(oldContainer);
+  const newExtract = extractWords(newContainer);
+
+  const { oldOps, newOps } = computeWordDiff(oldExtract.words, newExtract.words);
+
+  const hasChanges =
+    oldOps.some((op) => op.type === "removed") || newOps.some((op) => op.type === "added");
+
+  applyHighlightsByNode(oldOps, oldExtract.map, "diff-removed");
+  applyHighlightsByNode(newOps, newExtract.map, "diff-added");
+
+  return hasChanges;
+}

package/daemon/client/exportMarkdown.ts

@@ -0,0 +1,267 @@
+/**
+ * Export the rendered plan canvas to markdown.
+ * Reads data-md attributes from known components, falls back to text extraction for unknown elements.
+ */
+import { LANG_MAP } from "../langMap";
+export function exportCanvasToMarkdown(container: HTMLElement): string {
+  const lines: string[] = [];
+  walkChildren(container, lines, 0);
+  return lines.join("\n").replace(/\n{3,}/g, "\n\n").trim() + "\n";
+}
+
+const INLINE_TAGS = new Set(["CODE", "SPAN", "STRONG", "EM", "A", "B", "I", "U", "SMALL", "SUB", "SUP", "MARK", "ABBR"]);
+
+function walkChildren(el: HTMLElement, lines: string[], depth: number) {
+  // Detect if this element contains only inline content (text nodes + inline elements).
+  // If so, concatenate into a single paragraph instead of splitting across lines.
+  if (isInlineContainer(el)) {
+    const text = extractInlineText(el);
+    if (text) lines.push(text, "");
+    return;
+  }
+
+  for (const child of el.childNodes) {
+    if (child.nodeType === Node.ELEMENT_NODE) {
+      walkNode(child as HTMLElement, lines, depth);
+    } else if (child.nodeType === Node.TEXT_NODE) {
+      const text = child.textContent?.trim();
+      if (text) lines.push(text, "");
+    }
+  }
+}
+
+/** Check if an element contains only text nodes and inline elements (no block-level children) */
+function isInlineContainer(el: HTMLElement): boolean {
+  for (const child of el.childNodes) {
+    if (child.nodeType === Node.TEXT_NODE) continue;
+    if (child.nodeType === Node.ELEMENT_NODE) {
+      const childEl = child as HTMLElement;
+      if (!INLINE_TAGS.has(childEl.tagName) || childEl.hasAttribute("data-md")) return false;
+    }
+  }
+  return el.childNodes.length > 0;
+}
+
+/** Extract text from an inline container, wrapping <code> in backticks */
+function extractInlineText(el: HTMLElement): string {
+  let result = "";
+  for (const child of el.childNodes) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      result += child.textContent || "";
+    } else if (child.nodeType === Node.ELEMENT_NODE) {
+      const childEl = child as HTMLElement;
+      if (childEl.tagName === "CODE") {
+        result += "`" + (childEl.textContent || "") + "`";
+      } else {
+        result += childEl.textContent || "";
+      }
+    }
+  }
+  return result.trim();
+}
+
+function walkNode(el: HTMLElement, lines: string[], depth: number) {
+  const md = el.getAttribute("data-md");
+
+  if (md) {
+    switch (md) {
+      case "section": return handleSection(el, lines, depth);
+      case "item": return handleItem(el, lines);
+      case "codeblock": return handleCodeBlock(el, lines);
+      case "callout": return handleCallout(el, lines);
+      case "note": return handleNote(el, lines);
+      case "table": return handleTable(el, lines);
+      case "checklist": return handleChecklist(el, lines);
+      case "diff": return handleDiff(el, lines);
+      case "mermaid": return handleMermaid(el, lines);
+      case "choice": return handleChoice(el, lines);
+      case "multichoice": return handleMultiChoice(el, lines);
+      case "choice-option":
+      case "multichoice-option": return; // handled by parent
+      case "userinput": return handleUserInput(el, lines);
+      case "rangeinput": return handleRangeInput(el, lines);
+      case "checklist-item": return; // handled by parent (checklist)
+      case "filepreview": return handleFilePreview(el, lines);
+      case "priority": return handlePriority(el, lines);
+    }
+  }
+
+  // Skip interactive widgets (custom components with buttons/inputs/selects)
+  if (el.querySelector("button, input, select, textarea")) return;
+
+  // Unknown element — if it has text, extract it; if it has children, recurse
+  if (el.children.length > 0) {
+    walkChildren(el, lines, depth);
+  } else {
+    const text = el.textContent?.trim();
+    if (text) lines.push(text, "");
+  }
+}
+
+function handleSection(el: HTMLElement, lines: string[], depth: number) {
+  const title = el.getAttribute("data-md-title") || "Untitled";
+  const prefix = depth === 0 ? "##" : "###";
+  lines.push(`${prefix} ${title}`, "");
+
+  // Process section content (skip the heading div, process the content div)
+  // Use :last-of-type instead of :last-child — portaled <button> elements from
+  // BlockCommentButtons can be appended as the last child, breaking :last-child
+  const contentDiv = el.querySelector(":scope > div:last-of-type");
+  if (contentDiv) {
+    walkChildren(contentDiv as HTMLElement, lines, depth + 1);
+  }
+}
+
+function handleItem(el: HTMLElement, lines: string[]) {
+  const label = el.getAttribute("data-md-label") || "";
+  const status = el.getAttribute("data-md-status");
+  const badge = el.getAttribute("data-md-badge");
+
+  let prefix = "-";
+  if (status === "done") prefix = "- [x]";
+  else if (status) prefix = "- [ ]";
+
+  let line = `${prefix} **${label}**`;
+  if (badge) line += ` \`${badge}\``;
+  lines.push(line);
+
+  // Walk children content (description, nested CodeBlock, Callout, Priority, etc.)
+  const childrenDiv = el.querySelector(".text-text-secondary");
+  if (childrenDiv) {
+    const childLines: string[] = [];
+    walkChildren(childrenDiv as HTMLElement, childLines, 0);
+    // Indent child content under the list item
+    for (const cl of childLines) {
+      lines.push(cl ? `  ${cl}` : "");
+    }
+  }
+  lines.push("");
+}
+
+function handleCodeBlock(el: HTMLElement, lines: string[]) {
+  const language = el.getAttribute("data-md-language") || "";
+  const code = el.querySelector("code");
+  const text = code?.textContent || "";
+  lines.push(`\`\`\`${language}`, text, "```", "");
+}
+
+function handleCallout(el: HTMLElement, lines: string[]) {
+  const type = el.getAttribute("data-md-type") || "info";
+  const labels: Record<string, string> = { info: "Info", warning: "Warning", danger: "Danger", tip: "Tip" };
+  const content = extractText(el.querySelector(".text-text-secondary") as HTMLElement || el);
+  lines.push(`> **${labels[type] || type}:** ${content}`, "");
+}
+
+function handleNote(el: HTMLElement, lines: string[]) {
+  const text = el.textContent?.trim() || "";
+  lines.push(`> *${text}*`, "");
+}
+
+function handleTable(el: HTMLElement, lines: string[]) {
+  const table = el.querySelector("table");
+  if (!table) return;
+
+  const headers: string[] = [];
+  for (const th of table.querySelectorAll("thead th")) {
+    headers.push(th.textContent?.trim() || "");
+  }
+  if (headers.length === 0) return;
+
+  lines.push(`| ${headers.join(" | ")} |`);
+  lines.push(`| ${headers.map(() => "---").join(" | ")} |`);
+
+  for (const tr of table.querySelectorAll("tbody tr")) {
+    const cells: string[] = [];
+    for (const td of tr.querySelectorAll("td")) {
+      cells.push(td.textContent?.trim() || "");
+    }
+    lines.push(`| ${cells.join(" | ")} |`);
+  }
+  lines.push("");
+}
+
+function handleChecklist(el: HTMLElement, lines: string[]) {
+  for (const li of el.querySelectorAll("li")) {
+    const hasCheck = li.querySelector(".bg-accent-green") !== null;
+    const label = li.textContent?.trim() || "";
+    lines.push(`- [${hasCheck ? "x" : " "}] ${label}`);
+  }
+  lines.push("");
+}
+
+function handleDiff(el: HTMLElement, lines: string[]) {
+  const language = el.getAttribute("data-md-language") || "";
+  lines.push(`\`\`\`diff${language ? ` (${language})` : ""}`);
+  for (const row of el.querySelectorAll("[class*='flex']")) {
+    const prefix = row.querySelector(".text-accent-red") ? "-" :
+                   row.querySelector(".text-accent-green") ? "+" : " ";
+    const code = row.querySelector("code");
+    if (code) lines.push(`${prefix} ${code.textContent}`);
+  }
+  lines.push("```", "");
+}
+
+function handleMermaid(el: HTMLElement, lines: string[]) {
+  const source = el.getAttribute("data-md-source") || "";
+  if (source) {
+    lines.push("```mermaid", source, "```", "");
+  }
+}
+
+function handleChoice(el: HTMLElement, lines: string[]) {
+  const label = el.getAttribute("data-md-label") || "";
+  lines.push(`**${label}:**`);
+  for (const opt of el.querySelectorAll("[data-md='choice-option']")) {
+    const optLabel = opt.getAttribute("data-md-label") || opt.textContent?.trim() || "";
+    const selected = opt.querySelector(".bg-accent-amber") !== null;
+    lines.push(`- ${selected ? "(x)" : "( )"} ${optLabel}`);
+  }
+  lines.push("");
+}
+
+function handleMultiChoice(el: HTMLElement, lines: string[]) {
+  const label = el.getAttribute("data-md-label") || "";
+  lines.push(`**${label}:**`);
+  for (const opt of el.querySelectorAll("[data-md='multichoice-option']")) {
+    const optLabel = opt.getAttribute("data-md-label") || opt.textContent?.trim() || "";
+    const checked = opt.querySelector(".bg-accent-amber") !== null;
+    lines.push(`- [${checked ? "x" : " "}] ${optLabel}`);
+  }
+  lines.push("");
+}
+
+function handleUserInput(el: HTMLElement, lines: string[]) {
+  const label = el.getAttribute("data-md-label") || "";
+  const textarea = el.querySelector("textarea") as HTMLTextAreaElement | null;
+  const value = textarea?.value?.trim() || "";
+  lines.push(`**${label}:** ${value || "_empty_"}`, "");
+}
+
+function handleRangeInput(el: HTMLElement, lines: string[]) {
+  const label = el.getAttribute("data-md-label") || "";
+  const input = el.querySelector("input[type='range']") as HTMLInputElement | null;
+  const display = el.querySelector(".font-mono");
+  const value = display?.textContent?.trim() || input?.value || "—";
+  lines.push(`**${label}:** ${value}`, "");
+}
+
+function handleFilePreview(el: HTMLElement, lines: string[]) {
+  const path = el.getAttribute("data-md-path") || "";
+  const linesAttr = el.getAttribute("data-md-lines") || "";
+  const code = el.querySelector("code");
+  const text = code?.textContent || "";
+  const ext = path.split(".").pop() || "";
+  const lang = LANG_MAP[ext] || "";
+  const header = linesAttr ? `${path} (L${linesAttr})` : path;
+  lines.push(header, "", `\`\`\`${lang}`, text, "```", "");
+}
+
+function handlePriority(_el: HTMLElement, _lines: string[]) {
+  // Priority is rendered inline within Task items — the Task handler already
+  // captures it as part of child content. Skip standalone rendering to avoid
+  // duplicating the bare level text (e.g. "high").
+}
+
+function extractText(el: HTMLElement): string {
+  return el?.textContent?.trim() || "";
+}