agent-canvas 0.1.4 → 0.1.7

package/daemon/client/FileViewer.tsx

@@ -1,9 +1,21 @@
 import React, { useEffect, useState, useContext, useCallback, useRef, useMemo } from "react";
 import { SessionContext } from "#canvas/runtime";
+import type { AnnotationContext } from "#canvas/runtime";
 import { useAnnotations } from "./AnnotationProvider";
 import { wrapRangeWithMark, updateAllMarkStates, renameMarkId, unwrapMarks, restoreMarks } from "./highlightRange";
 import { AnnotationCreatePopover, AnnotationEditPopover } from "./Popover";
 import { LANG_MAP } from "../langMap";
+import { generateAnnotationId } from "./utils";
+
+/** Walk up from a node to find the parent line div with data-line-num */
+function findLineDiv(node: Node): HTMLElement | null {
+  let el: HTMLElement | null = node instanceof HTMLElement ? node : node.parentElement;
+  while (el) {
+    if (el.hasAttribute("data-line-num")) return el;
+    el = el.parentElement;
+  }
+  return null;
+}
 
 interface FileViewerProps {
   path: string;
@@ -21,9 +33,16 @@ export function FileViewer({ path }: FileViewerProps) {
   const [pendingMarkId, setPendingMarkId] = useState<string | null>(null);
   const pendingSnippetRef = useRef("");
 
+  // Line gutter selection state
+  const [lineSelectStart, setLineSelectStart] = useState<number | null>(null);
+  const [lineSelectEnd, setLineSelectEnd] = useState<number | null>(null);
+  const lineSelectStartRef = useRef<number | null>(null);
+  const lineSelectEndRef = useRef<number | null>(null);
+  const linesRef = useRef<string[]>([]);
+
   // Popover state
   const [editPopover, setEditPopover] = useState<{ anchorEl: HTMLElement; annId: string } | null>(null);
-  const [createPopover, setCreatePopover] = useState<{ anchorEl: HTMLElement; tempId: string; snippet: string } | null>(null);
+  const [createPopover, setCreatePopover] = useState<{ anchorEl: HTMLElement; tempId: string; snippet: string; ctx?: AnnotationContext } | null>(null);
 
   const fileAnns = annotations.filter((a) => a.filePath === path);
 
@@ -51,7 +70,11 @@ export function FileViewer({ path }: FileViewerProps) {
   }, [content, path]);
 
   // Update mark active states
-  useEffect(() => { updateAllMarkStates(activeAnnotationId); }, [activeAnnotationId]);
+  const prevActiveRef = useRef<string | null>(null);
+  useEffect(() => {
+    updateAllMarkStates(activeAnnotationId, prevActiveRef.current);
+    prevActiveRef.current = activeAnnotationId;
+  }, [activeAnnotationId]);
 
   // Click handler for marks
   useEffect(() => {
@@ -108,6 +131,30 @@ export function FileViewer({ path }: FileViewerProps) {
     if ((range.startContainer.parentElement as HTMLElement)?.closest?.("[data-annotation-id]")) return;
     const snippet = sel.toString().trim();
     if (snippet.length < 2) return;
+
+    // Compute line numbers from DOM
+    const startLineDiv = findLineDiv(range.startContainer);
+    const endLineDiv = findLineDiv(range.endContainer);
+    const lineStart = startLineDiv ? parseInt(startLineDiv.getAttribute("data-line-num")!, 10) : undefined;
+    const lineEnd = endLineDiv ? parseInt(endLineDiv.getAttribute("data-line-num")!, 10) : undefined;
+
+    // Compute before/after context for short snippets on a single line
+    let before = "";
+    let after = "";
+    if (snippet.length < 30 && startLineDiv && startLineDiv === endLineDiv) {
+      const code = startLineDiv.querySelector("code");
+      if (code) {
+        const lineText = code.textContent || "";
+        const idx = lineText.indexOf(snippet);
+        if (idx >= 0) {
+          before = lineText.slice(0, idx).trimStart();
+          after = lineText.slice(idx + snippet.length).trimEnd();
+        }
+      }
+    }
+
+    const ctx: AnnotationContext = { before, after, hierarchy: [], lineStart, lineEnd };
+
     const tempId = `__pending_${Date.now()}`;
     const cloned = range.cloneRange();
     try { wrapRangeWithMark(cloned, tempId); } catch {}
@@ -119,7 +166,82 @@ export function FileViewer({ path }: FileViewerProps) {
 
     pendingSnippetRef.current = snippet;
     setPendingMarkId(tempId);
-    setCreatePopover({ anchorEl: lastMark, tempId, snippet });
+    setCreatePopover({ anchorEl: lastMark, tempId, snippet, ctx });
+  }, []);
+
+  // Line gutter: mousedown starts line selection
+  const handleGutterMouseDown = useCallback((e: React.MouseEvent, lineNum: number) => {
+    e.preventDefault(); // Prevent text selection
+    lineSelectStartRef.current = lineNum;
+    lineSelectEndRef.current = lineNum;
+    setLineSelectStart(lineNum);
+    setLineSelectEnd(lineNum);
+  }, []);
+
+  // Line gutter: mousemove + mouseup for drag selection
+  useEffect(() => {
+    const handleMouseMoveForLines = (e: MouseEvent) => {
+      if (lineSelectStartRef.current === null) return;
+      const lineDiv = (e.target as HTMLElement).closest("[data-line-num]") as HTMLElement;
+      if (lineDiv) {
+        const num = parseInt(lineDiv.getAttribute("data-line-num")!, 10);
+        lineSelectEndRef.current = num;
+        setLineSelectEnd(num);
+      }
+    };
+
+    const handleMouseUpForLines = () => {
+      const start = lineSelectStartRef.current;
+      if (start === null) return;
+      lineSelectStartRef.current = null;
+      const end = lineSelectEndRef.current ?? start;
+      const startLine = Math.min(start, end);
+      const endLine = Math.max(start, end);
+      const currentLines = linesRef.current;
+      const snippet = currentLines.slice(startLine - 1, endLine).join("\n");
+      if (!snippet.trim()) {
+        setLineSelectStart(null);
+        setLineSelectEnd(null);
+        return;
+      }
+
+      const tempId = `__pending_${Date.now()}`;
+      const ctx: AnnotationContext = { before: "", after: "", hierarchy: [], lineStart: startLine, lineEnd: endLine };
+
+      // Wrap code content of selected lines with marks
+      if (contentRef.current) {
+        const lineDivs = contentRef.current.querySelectorAll("[data-line-num]");
+        const firstDiv = lineDivs[startLine - 1] as HTMLElement;
+        const lastDiv = lineDivs[endLine - 1] as HTMLElement;
+        if (firstDiv && lastDiv) {
+          const firstCode = firstDiv.querySelector("code");
+          const lastCode = lastDiv.querySelector("code");
+          if (firstCode && lastCode) {
+            try {
+              const range = document.createRange();
+              range.setStartBefore(firstCode.firstChild || firstCode);
+              range.setEndAfter(lastCode.lastChild || lastCode);
+              wrapRangeWithMark(range, tempId);
+            } catch {}
+          }
+        }
+        const anchorEl = lineDivs[endLine - 1] as HTMLElement;
+        if (anchorEl) {
+          pendingSnippetRef.current = snippet;
+          setPendingMarkId(tempId);
+          setCreatePopover({ anchorEl, tempId, snippet, ctx });
+        }
+      }
+      setLineSelectStart(null);
+      setLineSelectEnd(null);
+    };
+
+    document.addEventListener("mousemove", handleMouseMoveForLines);
+    document.addEventListener("mouseup", handleMouseUpForLines);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMoveForLines);
+      document.removeEventListener("mouseup", handleMouseUpForLines);
+    };
   }, []);
 
   // Highlight content
@@ -140,10 +262,18 @@ export function FileViewer({ path }: FileViewerProps) {
   if (!content) return null;
 
   const lines = content.split("\n");
+  linesRef.current = lines;
+
+  // Computed selected line range for highlighting during drag
+  const selectedLineRange = useMemo(() => {
+    if (lineSelectStart === null) return null;
+    const end = lineSelectEnd ?? lineSelectStart;
+    return { start: Math.min(lineSelectStart, end), end: Math.max(lineSelectStart, end) };
+  }, [lineSelectStart, lineSelectEnd]);
 
   const addWholeFileWithPopup = () => {
     const preview = content!.split("\n").slice(0, 3).join("\n") + (lines.length > 3 ? "\n..." : "");
-    const id = `ann-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+    const id = generateAnnotationId();
     addAnnotationWithId(id, preview, "", path);
     // Focus the new annotation's note in sidebar by activating it
     setActiveAnnotationId(id);
@@ -155,16 +285,23 @@ export function FileViewer({ path }: FileViewerProps) {
     <div>
       {/* Code */}
       <pre ref={contentRef} className="text-code font-mono text-text-code bg-bg-base select-text cursor-text py-3 hljs">
-        {lines.map((line, i) => (
-          <div key={i} className="flex hover:bg-bg-elevated-half px-5">
-            <span className="text-text-tertiary opacity-40 select-none w-10 text-right pr-4 shrink-0 py-px text-[12px]">{i + 1}</span>
-            {highlightedLines ? (
-              <code className="py-px" dangerouslySetInnerHTML={{ __html: highlightedLines[i] || " " }} />
-            ) : (
-              <code className="py-px">{line || " "}</code>
-            )}
-          </div>
-        ))}
+        {lines.map((line, i) => {
+          const lineNum = i + 1;
+          const isSelected = selectedLineRange && lineNum >= selectedLineRange.start && lineNum <= selectedLineRange.end;
+          return (
+            <div key={i} data-line-num={lineNum} className={`flex px-5 ${isSelected ? "bg-accent-blue/10" : "hover:bg-bg-elevated-half"}`}>
+              <span
+                className="text-text-tertiary select-none w-10 text-right pr-4 shrink-0 py-px text-[12px] cursor-pointer opacity-40 hover:opacity-100 hover:text-accent-blue"
+                onMouseDown={(e) => handleGutterMouseDown(e, lineNum)}
+              >{lineNum}</span>
+              {highlightedLines ? (
+                <code className="py-px" dangerouslySetInnerHTML={{ __html: highlightedLines[i] || " " }} />
+              ) : (
+                <code className="py-px">{line || " "}</code>
+              )}
+            </div>
+          );
+        })}
       </pre>
 
       {editPopover && (() => {
@@ -188,9 +325,9 @@ export function FileViewer({ path }: FileViewerProps) {
           scrollContainer={scrollContainer}
           snippet={createPopover.snippet}
           onAdd={(note) => {
-            const id = `ann-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+            const id = generateAnnotationId();
             renameMarkId(createPopover.tempId, id);
-            addAnnotationWithId(id, createPopover.snippet, note, path);
+            addAnnotationWithId(id, createPopover.snippet, note, path, createPopover.ctx);
             setPendingMarkId(null);
             setCreatePopover(null);
           }}

package/daemon/client/PlanRenderer.tsx

@@ -5,6 +5,7 @@ import { useAnnotations } from "./AnnotationProvider";
 import { wrapRangeWithMark, updateAllMarkStates, renameMarkId, unwrapMarks, restoreMarks } from "./highlightRange";
 import { extractContext } from "./annotationContext";
 import { AnnotationCreatePopover, AnnotationEditPopover } from "./Popover";
+import { generateAnnotationId } from "./utils";
 
 /** All navigable blocks (keyboard arrows) */
 const BLOCK_SELECTOR = "[data-md='item'], [data-md='section'], [data-md='table'] tbody tr, [data-md='callout'], [data-md='note'], [data-md='checklist-item'], [data-md='choice-option'], [data-md='multichoice-option'], [data-md='userinput'], [data-md='rangeinput'], [data-md='image']";
@@ -58,8 +59,10 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
   }, [PlanComponent]);
 
   // Update mark active states when activeAnnotationId changes
+  const prevActiveRef = useRef<string | null>(null);
   useEffect(() => {
-    updateAllMarkStates(activeAnnotationId);
+    updateAllMarkStates(activeAnnotationId, prevActiveRef.current);
+    prevActiveRef.current = activeAnnotationId;
   }, [activeAnnotationId]);
 
   // Click handler for marks in plan
@@ -383,7 +386,7 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
           snippet={createPopover.snippet}
           truncateAt={80}
           onAdd={(note) => {
-            const id = `ann-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+            const id = generateAnnotationId();
             renameMarkId(createPopover.tempId, id);
             addAnnotationWithId(id, createPopover.snippet, note, undefined, createPopover.ctx);
             setCreatePopover(null);
@@ -421,7 +424,7 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
           snippet={blockPopover.snippet}
           truncateAt={80}
           onAdd={(note) => {
-            const id = `ann-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+            const id = generateAnnotationId();
             addAnnotationWithId(id, blockPopover.snippet, note);
             setBlockPopover(null);
           }}

package/daemon/client/ResponsePreview.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useRef, useMemo } from "react";
+import { marked } from "marked";
 import { useAnnotations } from "./AnnotationProvider";
-import { generateMarkdown, getMissingRequired, getMissingRequiredFeedback } from "./generateMarkdown";
+import { generateMarkdown, getMissingRequiredLabels } from "./generateMarkdown";
 
 interface ResponsePreviewProps {
   open: boolean;
@@ -119,12 +120,7 @@ export function ResponsePreview({ open, onClose, onSubmit }: ResponsePreviewProp
           </button>
           <button
             onClick={() => {
-              const missingResponses = getMissingRequired(responses);
-              const missingFeedback = getMissingRequiredFeedback(feedbackEntries);
-              const allMissing = [
-                ...missingResponses.map((r) => r.label),
-                ...missingFeedback.map((e) => e.label || e.id),
-              ];
+              const allMissing = getMissingRequiredLabels(responses, feedbackEntries);
               if (allMissing.length > 0) {
                 setValidationError(`Please answer: ${allMissing.join(", ")}`);
                 return;
@@ -148,113 +144,6 @@ export function ResponsePreview({ open, onClose, onSubmit }: ResponsePreviewProp
 }
 
 export function MarkdownPreview({ text }: { text: string }) {
-  const elements = useMemo(() => parseMarkdown(text), [text]);
-  return <div className="font-body text-body text-text-primary leading-relaxed">{elements}</div>;
-}
-
-function InlineText({ text }: { text: string }) {
-  const parts: React.ReactNode[] = [];
-  const regex = /(\*\*(.+?)\*\*|`(.+?)`)/g;
-  let last = 0;
-  let match: RegExpExecArray | null;
-  let key = 0;
-
-  while ((match = regex.exec(text)) !== null) {
-    if (match.index > last) parts.push(text.slice(last, match.index));
-    if (match[2]) parts.push(<strong key={key++} className="font-semibold text-text-primary">{match[2]}</strong>);
-    else if (match[3]) parts.push(<code key={key++} className="font-mono text-code bg-bg-code px-1 py-px rounded">{match[3]}</code>);
-    last = regex.lastIndex;
-  }
-  if (last < text.length) parts.push(text.slice(last));
-  return <>{parts}</>;
-}
-
-function parseMarkdown(md: string): React.ReactNode[] {
-  const lines = md.split("\n");
-  const elements: React.ReactNode[] = [];
-  let i = 0;
-  let key = 0;
-
-  while (i < lines.length) {
-    const line = lines[i];
-
-    // Headings
-    if (line.startsWith("#### ")) {
-      elements.push(<h4 key={key++} className="text-[13px] font-body font-semibold text-text-primary mt-5 mb-1">{line.slice(5)}</h4>);
-      i++; continue;
-    }
-    if (line.startsWith("### ")) {
-      elements.push(<h3 key={key++} className="text-[14px] font-body font-semibold text-text-primary mt-5 mb-1">{line.slice(4)}</h3>);
-      i++; continue;
-    }
-    if (line.startsWith("## ")) {
-      elements.push(<h2 key={key++} className="text-task-label font-body font-semibold text-text-primary mt-6 mb-2 pb-1 border-b border-border-subtle">{line.slice(3)}</h2>);
-      i++; continue;
-    }
-
-    // Blockquote — collect consecutive > lines
-    if (line.startsWith("> ")) {
-      const quoteLines: string[] = [];
-      while (i < lines.length && lines[i].startsWith("> ")) {
-        quoteLines.push(lines[i].slice(2));
-        i++;
-      }
-      elements.push(
-        <blockquote key={key++} className="border-l-2 border-border-hover pl-3 my-2 text-text-secondary italic text-[13px]">
-          {quoteLines.map((ql, j) => <div key={j}>{ql}</div>)}
-        </blockquote>
-      );
-      continue;
-    }
-
-    // Checkbox list — collect consecutive - [x]/- [ ] lines
-    if (line.startsWith("- [x] ") || line.startsWith("- [ ] ")) {
-      const items: { checked: boolean; label: string }[] = [];
-      while (i < lines.length && (lines[i].startsWith("- [x] ") || lines[i].startsWith("- [ ] "))) {
-        items.push({ checked: lines[i].startsWith("- [x] "), label: lines[i].slice(6) });
-        i++;
-      }
-      elements.push(
-        <ul key={key++} className="my-1 space-y-0.5">
-          {items.map((item, j) => (
-            <li key={j} className="flex items-center gap-2 text-[13px]">
-              <span className={`w-3.5 h-3.5 rounded flex items-center justify-center flex-shrink-0 ${item.checked ? "bg-accent-amber" : "border border-border-hover"}`}>
-                {item.checked && (
-                  <svg width="8" height="8" viewBox="0 0 10 10" fill="none">
-                    <path d="M2.5 5L4.5 7L7.5 3" style={{ stroke: "var(--color-text-inverse)" }} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-                  </svg>
-                )}
-              </span>
-              <span className={item.checked ? "text-text-primary" : "text-text-tertiary"}>{item.label}</span>
-            </li>
-          ))}
-        </ul>
-      );
-      continue;
-    }
-
-    // Regular list — collect consecutive - lines
-    if (line.startsWith("- ")) {
-      const items: string[] = [];
-      while (i < lines.length && lines[i].startsWith("- ")) {
-        items.push(lines[i].slice(2));
-        i++;
-      }
-      elements.push(
-        <ul key={key++} className="my-1 space-y-0.5 list-disc list-inside">
-          {items.map((item, j) => <li key={j} className="text-[13px] text-text-secondary"><InlineText text={item} /></li>)}
-        </ul>
-      );
-      continue;
-    }
-
-    // Empty line
-    if (line.trim() === "") { i++; continue; }
-
-    // Paragraph
-    elements.push(<p key={key++} className="my-1.5 text-[13px]"><InlineText text={line} /></p>);
-    i++;
-  }
-
-  return elements;
+  const html = useMemo(() => marked.parse(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/SessionSwitcher.tsx

@@ -29,7 +29,11 @@ export function SessionSwitcher({ currentSessionId, projectRoot }: SessionSwitch
     const fetchSessions = async () => {
       try {
         const res = await fetch("/api/sessions");
-        setSessions(await res.json() as SessionInfo[]);
+        const data = await res.json() as SessionInfo[];
+        setSessions((prev) => {
+          const next = JSON.stringify(data);
+          return JSON.stringify(prev) === next ? prev : data;
+        });
       } catch {}
     };
     fetchSessions();
@@ -51,17 +55,24 @@ export function SessionSwitcher({ currentSessionId, projectRoot }: SessionSwitch
 
   return (
     <div className="relative" ref={ref}>
-      <button
-        onClick={() => otherSessions.length > 0 && setOpen(!open)}
-        className="flex items-center gap-1.5 font-body text-body font-medium text-text-primary hover:text-text-secondary transition-colors"
-      >
-        <span>{displayName}</span>
+      <div className="flex items-center gap-1.5 font-body text-body font-medium">
+        <a
+          href={`/s/${currentSessionId}`}
+          className="text-text-primary hover:text-text-secondary transition-colors"
+        >
+          {displayName}
+        </a>
         {otherSessions.length > 0 && (
-          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`text-text-tertiary transition-transform duration-200 ${open ? "rotate-180" : ""}`}>
-            <path d="M3 5l3 3 3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-          </svg>
+          <button
+            onClick={() => setOpen(!open)}
+            className="flex items-center justify-center text-text-tertiary hover:text-text-secondary transition-colors"
+          >
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform duration-200 ${open ? "rotate-180" : ""}`}>
+              <path d="M3 5l3 3 3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+          </button>
         )}
-      </button>
+      </div>
 
       {open && otherSessions.length > 0 && (
         <div className="absolute top-full left-0 mt-2 w-64 bg-bg-elevated border border-border-hover rounded-lg shadow-lg z-50 py-1 overflow-hidden">

package/daemon/client/compat/preact-all.ts

@@ -0,0 +1,4 @@
+export * from "preact/compat";
+export { default } from "preact/compat";
+export { jsx, jsxs } from "preact/jsx-runtime";
+export { createRoot, hydrateRoot } from "preact/compat/client";

package/daemon/client/components/Markdown.tsx

@@ -0,0 +1,44 @@
+import React, { useMemo } from "react";
+import { marked } from "marked";
+
+interface MarkdownProps {
+  /** Inline markdown source (via children) */
+  children?: React.ReactNode;
+  /** File path (resolved at compile time) */
+  file?: string;
+  /** Injected by compiler when file prop is used */
+  __content?: string;
+}
+
+// Configure marked for safe rendering
+marked.setOptions({
+  gfm: true,
+  breaks: false,
+});
+
+export function Markdown({ children, file, __content }: MarkdownProps) {
+  const source = __content ?? (typeof children === "string" ? children : String(children ?? ""));
+
+  const html = useMemo(() => {
+    if (!source) return "";
+    return marked.parse(source, { async: false }) as string;
+  }, [source]);
+
+  if (!source) {
+    return (
+      <div className="text-text-tertiary text-tiny mt-3">
+        {file ? `Could not load: ${file}` : "No markdown content"}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="mt-3 prose-canvas"
+      data-md="markdown"
+      {...(file ? { "data-md-file": file } : {})}
+      data-md-source={source}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}

package/daemon/client/components/ResponseNote.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { autoResizeTextarea } from "../utils";
 
 /** Seamless note input for response components */
 export function ResponseNote({ note, onChange }: { show?: boolean; note: string; onToggle?: () => void; onChange: (n: string) => void }) {
@@ -10,14 +11,8 @@ export function ResponseNote({ note, onChange }: { show?: boolean; note: string;
         className="w-full bg-transparent text-[12px] font-body text-text-primary resize-none focus:outline-none border-none placeholder:text-text-disabled transition-colors min-h-[20px] p-0 leading-relaxed"
         placeholder="Add a note..."
         rows={1}
-        onInput={(e) => {
-          const t = e.target as HTMLTextAreaElement;
-          t.style.height = "auto";
-          t.style.height = t.scrollHeight + "px";
-        }}
-        ref={(el) => {
-          if (el) { el.style.height = "auto"; el.style.height = el.scrollHeight + "px"; }
-        }}
+        onInput={(e) => autoResizeTextarea(e.target as HTMLTextAreaElement)}
+        ref={(el) => { if (el) autoResizeTextarea(el); }}
       />
     </div>
   );

package/daemon/client/components/UserInput.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useAnnotations } from "#canvas/runtime";
 import { ResponseNote } from "./ResponseNote";
+import { autoResizeTextarea } from "../utils";
 
 /** Free text input from user */
 interface UserInputProps {
@@ -29,10 +30,7 @@ export function UserInput({ id, label, placeholder, multiline, required }: UserI
     setResponse(id, { ...current!, value: v });
   };
 
-  const autoResize = (el: HTMLTextAreaElement) => {
-    el.style.height = "auto";
-    el.style.height = Math.max(multiline ? 60 : 32, el.scrollHeight) + "px";
-  };
+  const autoResize = (el: HTMLTextAreaElement) => autoResizeTextarea(el, multiline ? 60 : 32);
 
   const showError = current?.required && !value.trim();
 

package/daemon/client/components/index.ts

@@ -12,4 +12,5 @@ export { Diff } from "./Diff";
 export { Choice, MultiChoice } from "./Choice";
 export { UserInput, RangeInput } from "./UserInput";
 export { ImageView } from "./Image";
+export { Markdown } from "./Markdown";
 export { useFeedback } from "#canvas/runtime";

package/daemon/client/domDiff.ts

@@ -321,16 +321,96 @@ export function runDomDiff(
   oldContainer: HTMLElement,
   newContainer: HTMLElement
 ): boolean {
+  // Handle mermaid blocks separately via data-md-source comparison
+  const mermaidChanged = diffMermaidBlocks(oldContainer, newContainer);
+
   const oldExtract = extractWords(oldContainer);
   const newExtract = extractWords(newContainer);
 
   const { oldOps, newOps } = computeWordDiff(oldExtract.words, newExtract.words);
 
-  const hasChanges =
+  const hasWordChanges =
     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;
+  return hasWordChanges || mermaidChanged;
+}
+
+/**
+ * Compare mermaid blocks between old and new containers by data-md-source.
+ * Highlights changed mermaid blocks with a border and appends a source diff.
+ */
+function diffMermaidBlocks(oldContainer: HTMLElement, newContainer: HTMLElement): boolean {
+  const oldMermaids = Array.from(oldContainer.querySelectorAll<HTMLElement>('[data-md="mermaid"]'));
+  const newMermaids = Array.from(newContainer.querySelectorAll<HTMLElement>('[data-md="mermaid"]'));
+  let changed = false;
+
+  // Match by position (simple 1:1 pairing)
+  const count = Math.max(oldMermaids.length, newMermaids.length);
+  for (let i = 0; i < count; i++) {
+    const oldEl = oldMermaids[i];
+    const newEl = newMermaids[i];
+
+    if (!oldEl && newEl) {
+      // Added
+      newEl.classList.add("diff-block-added");
+      newEl.style.position = "relative";
+      changed = true;
+      continue;
+    }
+    if (oldEl && !newEl) {
+      // Removed
+      oldEl.classList.add("diff-block-removed");
+      oldEl.style.position = "relative";
+      changed = true;
+      continue;
+    }
+    if (!oldEl || !newEl) continue;
+
+    const oldSource = (oldEl.getAttribute("data-md-source") || "").trim();
+    const newSource = (newEl.getAttribute("data-md-source") || "").trim();
+
+    if (oldSource === newSource) continue;
+    changed = true;
+
+    // Highlight containers
+    oldEl.style.borderLeft = "3px solid var(--color-accent-red)";
+    oldEl.style.paddingLeft = "8px";
+    newEl.style.borderLeft = "3px solid var(--color-accent-green)";
+    newEl.style.paddingLeft = "8px";
+
+    // Append source diffs
+    const oldLines = oldSource.split("\n");
+    const newLines = newSource.split("\n");
+    const lcs = simpleLCS(oldLines, newLines);
+
+    const buildDiffEl = (lines: string[], lcsArr: string[], side: "old" | "new") => {
+      const container = document.createElement("div");
+      container.className = "mt-2 bg-bg-code rounded-md overflow-hidden text-tiny font-mono";
+      container.setAttribute("data-no-diff", "true");
+
+      let li = 0, si = 0;
+      while (si < lines.length) {
+        const row = document.createElement("div");
+        row.className = "px-3 py-0.5 whitespace-pre-wrap";
+        if (li < lcsArr.length && lines[si] === lcsArr[li]) {
+          row.textContent = "  " + lines[si];
+          si++; li++;
+        } else {
+          row.classList.add(side === "old" ? "diff-removed" : "diff-added");
+          row.textContent = (side === "old" ? "- " : "+ ") + lines[si];
+          si++;
+        }
+        container.appendChild(row);
+      }
+      return container;
+    };
+
+    oldEl.appendChild(buildDiffEl(oldLines, lcs, "old"));
+    newEl.appendChild(buildDiffEl(newLines, lcs, "new"));
+  }
+
+  return changed;
 }