agent-canvas 0.1.5 → 0.1.8

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;
 }

package/daemon/client/generateMarkdown.ts

@@ -99,6 +99,16 @@ export function getMissingRequiredFeedback(entries: Map<string, FeedbackEntry>):
   return missing;
 }
 
+/** Returns list of missing required field labels, or empty if all valid */
+export function getMissingRequiredLabels(responses: Map<string, PlanResponse>, feedbackEntries: Map<string, FeedbackEntry>): string[] {
+  const missingResponses = getMissingRequired(responses);
+  const missingFeedback = getMissingRequiredFeedback(feedbackEntries);
+  return [
+    ...missingResponses.map((r) => r.label),
+    ...missingFeedback.map((e) => e.label || e.id),
+  ];
+}
+
 function renderResponse(r: PlanResponse): string {
   const lines: string[] = [];
   lines.push(`**${r.label}**`);
@@ -134,17 +144,44 @@ function renderResponse(r: PlanResponse): string {
 function renderAnnotation(ann: Annotation): string {
   const lines: string[] = [];
   const snippet = ann.snippet.trim();
-  const context = formatSnippetInContext(ann);
+  const ctx = ann.context;
+  const hasLineInfo = ctx?.lineStart != null;
 
-  // 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
+  if (ann.filePath && hasLineInfo) {
+    // File annotation with line numbers
+    const lineStart = ctx!.lineStart!;
+    const lineEnd = ctx!.lineEnd ?? lineStart;
     const snippetLines = snippet.split("\n");
-    lines.push(`> ${snippetLines[0]}`);
-    lines.push(`> ... (${snippetLines.length} lines)`);
-    lines.push(`> ${snippetLines[snippetLines.length - 1]}`);
+    const isShort = snippet.length < 30 && lineStart === lineEnd;
+
+    if (isShort && (ctx!.before || ctx!.after)) {
+      // Short snippet on single line — show full line context
+      const expanded = formatSnippetInContext(ann);
+      lines.push(`> L${lineStart}: ${expanded}`);
+    } else if (snippetLines.length <= 6) {
+      for (let i = 0; i < snippetLines.length; i++) {
+        lines.push(`> ${lineStart + i} | ${snippetLines[i]}`);
+      }
+    } else {
+      for (let i = 0; i < 3; i++) {
+        lines.push(`> ${lineStart + i} | ${snippetLines[i]}`);
+      }
+      lines.push(`> ... (${snippetLines.length} lines)`);
+      for (let i = snippetLines.length - 3; i < snippetLines.length; i++) {
+        lines.push(`> ${lineStart + i} | ${snippetLines[i]}`);
+      }
+    }
+  } else {
+    // Plan annotations or file annotations without line info
+    const context = formatSnippetInContext(ann);
+    if (snippet.split("\n").length <= 3) {
+      lines.push(`> ${context.split("\n").join("\n> ")}`);
+    } else {
+      const snippetLines = snippet.split("\n");
+      lines.push(`> ${snippetLines[0]}`);
+      lines.push(`> ... (${snippetLines.length} lines)`);
+      lines.push(`> ${snippetLines[snippetLines.length - 1]}`);
+    }
   }
 
   // Comment

package/daemon/client/highlightRange.ts

@@ -99,13 +99,15 @@ export function setMarkActive(annotationId: string, active: boolean) {
 }
 
 /**
- * Update active state for all annotation marks.
+ * Update active state for annotation marks.
+ * Only touches marks for the previous and current active IDs to avoid full DOM scans.
  */
-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;
+export function updateAllMarkStates(activeId: string | null, prevActiveId?: string | null) {
+  if (prevActiveId != null && prevActiveId !== activeId) {
+    setMarkActive(prevActiveId, false);
+  }
+  if (activeId != null) {
+    setMarkActive(activeId, true);
   }
 }
 

package/daemon/client/runtime.ts

@@ -8,6 +8,8 @@ export interface AnnotationContext {
   before: string;
   after: string;
   hierarchy: string[];
+  lineStart?: number;
+  lineEnd?: number;
 }
 
 export interface Annotation {

package/daemon/client/styles.css

@@ -258,6 +258,132 @@ input[type="range"]::-moz-range-track {
   background: transparent;
 }
 
+/* Prose (Markdown component) */
+.prose-canvas {
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+  line-height: 1.7;
+}
+
+.prose-canvas h1, .prose-canvas h2, .prose-canvas h3,
+.prose-canvas h4, .prose-canvas h5, .prose-canvas h6 {
+  color: var(--color-text-primary);
+  font-weight: 600;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  line-height: 1.3;
+}
+
+.prose-canvas h1 { font-size: 1.5rem; }
+.prose-canvas h2 { font-size: 1.25rem; }
+.prose-canvas h3 { font-size: 1.1rem; }
+
+.prose-canvas h1:first-child, .prose-canvas h2:first-child,
+.prose-canvas h3:first-child {
+  margin-top: 0;
+}
+
+.prose-canvas p {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+.prose-canvas p:first-child {
+  margin-top: 0;
+}
+
+.prose-canvas a {
+  color: var(--color-accent-blue);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--color-accent-blue) 40%, transparent);
+  text-underline-offset: 2px;
+}
+
+.prose-canvas a:hover {
+  text-decoration-color: var(--color-accent-blue);
+}
+
+.prose-canvas strong {
+  color: var(--color-text-primary);
+  font-weight: 600;
+}
+
+.prose-canvas code {
+  font-size: 0.8em;
+  background: var(--color-bg-code);
+  color: var(--color-text-code);
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+
+.prose-canvas pre {
+  background: var(--color-bg-code);
+  border-radius: 8px;
+  padding: 1em;
+  overflow-x: auto;
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+.prose-canvas pre code {
+  background: transparent;
+  padding: 0;
+  font-size: 0.8rem;
+}
+
+.prose-canvas ul, .prose-canvas ol {
+  padding-left: 1.5em;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose-canvas ul { list-style-type: disc; }
+.prose-canvas ol { list-style-type: decimal; }
+.prose-canvas li { margin-top: 0.25em; }
+.prose-canvas li > ul, .prose-canvas li > ol { margin-top: 0.25em; margin-bottom: 0; }
+
+.prose-canvas blockquote {
+  border-left: 3px solid var(--color-border-strong);
+  padding-left: 1em;
+  margin-left: 0;
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+  color: var(--color-text-tertiary);
+}
+
+.prose-canvas hr {
+  border: none;
+  border-top: 1px solid var(--color-border-subtle);
+  margin: 1.5em 0;
+}
+
+.prose-canvas table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+  font-size: 0.8rem;
+}
+
+.prose-canvas th, .prose-canvas td {
+  border: 1px solid var(--color-border-subtle);
+  padding: 0.5em 0.75em;
+  text-align: left;
+}
+
+.prose-canvas th {
+  background: var(--color-bg-elevated);
+  color: var(--color-text-primary);
+  font-weight: 600;
+}
+
+.prose-canvas img {
+  max-width: 100%;
+  border-radius: 8px;
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
 /* highlight.js overrides */
 .hljs {
   background: transparent !important;