agent-canvas 0.1.0

package/daemon/client/SessionSwitcher.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState, useRef } from "react";
+
+interface SessionInfo {
+  id: string;
+  version: number;
+  updatedAt: string;
+}
+
+interface SessionSwitcherProps {
+  currentSessionId: string;
+}
+
+export function SessionSwitcher({ currentSessionId }: SessionSwitcherProps) {
+  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const fetchSessions = async () => {
+      try {
+        const res = await fetch("/api/sessions");
+        setSessions(await res.json() as SessionInfo[]);
+      } catch {}
+    };
+    fetchSessions();
+    const interval = setInterval(fetchSessions, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  const otherSessions = sessions.filter((s) => s.id !== currentSessionId);
+  const displayName = currentSessionId.length > 30 ? currentSessionId.slice(0, 30) + "..." : currentSessionId;
+
+  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>
+        {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>
+
+      {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">
+          {otherSessions.map((s) => (
+            <a
+              key={s.id}
+              href={`/s/${s.id}`}
+              className="flex items-center gap-2.5 px-4 py-2.5 text-body font-body text-text-secondary hover:bg-bg-surface hover:text-text-primary transition-colors"
+            >
+              <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${s.currentRevision > 0 ? "bg-accent-green" : "bg-border-hover"}`} />
+              <span className="truncate">{s.id}</span>
+            </a>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/daemon/client/annotationContext.ts

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

package/daemon/client/components/Callout.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+interface CalloutProps {
+  type?: "info" | "warning" | "danger" | "tip";
+  children?: React.ReactNode;
+}
+
+const config = {
+  info:    { bg: "bg-accent-blue-muted", icon: "i",  iconColor: "text-accent-blue" },
+  warning: { bg: "bg-accent-amber-muted", icon: "!", iconColor: "text-accent-amber" },
+  danger:  { bg: "bg-accent-red-muted", icon: "\u2715", iconColor: "text-accent-red" },
+  tip:     { bg: "bg-accent-green-muted", icon: "\u2713", iconColor: "text-accent-green" },
+};
+
+export function Callout({ type = "info", children }: CalloutProps) {
+  const cfg = config[type];
+  return (
+    <div className={`${cfg.bg} relative rounded-lg px-5 py-4 mt-3 flex gap-3 items-start`} data-md="callout" data-md-type={type}>
+      <span className={`${cfg.iconColor} opacity-70 text-base leading-relaxed flex-shrink-0 mt-px`}>
+        {cfg.icon}
+      </span>
+      <div className="text-body text-text-secondary leading-relaxed">{children}</div>
+    </div>
+  );
+}

package/daemon/client/components/Checklist.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+interface ChecklistItem {
+  label: string;
+  checked: boolean;
+}
+
+interface ChecklistProps {
+  items: ChecklistItem[];
+}
+
+export function Checklist({ items }: ChecklistProps) {
+  return (
+    <ul className="space-y-1 mt-3" data-md="checklist">
+      {items.map((item, i) => (
+        <li key={i} data-md="checklist-item" data-md-label={item.label} className="relative flex items-start gap-2.5 py-1">
+          <span className={`w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 transition-all ${
+            item.checked
+              ? "bg-accent-green"
+              : "border-[1.5px] border-border-hover"
+          }`}>
+            {item.checked && (
+              <svg width="10" height="10" 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={`text-body font-body ${
+            item.checked ? "text-text-tertiary line-through decoration-border-hover" : "text-text-secondary"
+          }`}>
+            {item.label}
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
+}

package/daemon/client/components/Choice.tsx

@@ -0,0 +1,164 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useAnnotations } from "#canvas/runtime";
+import { ResponseNote } from "./ResponseNote";
+
+/** Radio — pick one option */
+interface ChoiceProps {
+  id: string;
+  label: string;
+  options: string[];
+  required?: boolean;
+}
+
+export function Choice({ id, label, options, required }: ChoiceProps) {
+  const { responses, setResponse } = useAnnotations();
+  const current = responses.get(id);
+  const selected = current?.value as string | undefined;
+  const note = current?.note || "";
+  const [showNote, setShowNote] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!responses.has(id)) {
+      setResponse(id, { id, type: "radio", label, value: null, options, required });
+    }
+  }, [id]);
+
+  const handleSelect = (opt: string) => {
+    setResponse(id, { ...current!, value: opt });
+  };
+
+  // Keyboard selection via custom event from PlanRenderer
+  useEffect(() => {
+    const el = wrapperRef.current;
+    if (!el) return;
+    const handler = (e: Event) => {
+      const target = (e.target as HTMLElement).closest("[data-md-label]");
+      const opt = target?.getAttribute("data-md-label");
+      if (opt && options.includes(opt)) handleSelect(opt);
+    };
+    el.addEventListener("kb-select", handler);
+    return () => el.removeEventListener("kb-select", handler);
+  });
+
+  const showError = current?.required && !selected;
+
+  return (
+    <div ref={wrapperRef} data-md="choice" data-md-label={label} className="-mx-4 px-4 py-3 my-1 rounded-lg transition-colors duration-150 hover:bg-bg-input">
+      <div className="flex items-baseline gap-2 mb-2">
+        <span className="text-[13px] font-body font-medium text-text-primary">{label}</span>
+        {required && <span className="text-[10px] text-accent-red font-body">*</span>}
+      </div>
+      <div className="space-y-1">
+        {options.map((opt) => (
+          <label
+            key={opt}
+            data-md="choice-option"
+            data-md-label={opt}
+            onClick={() => handleSelect(opt)}
+            className={`flex items-center gap-2.5 px-3 py-2 rounded-lg cursor-pointer transition-all duration-150 ${
+              selected === opt
+                ? "bg-highlight-selected"
+                : "hover:bg-bg-elevated"
+            }`}
+          >
+            <span className={`w-4 h-4 rounded-full border-[1.5px] flex items-center justify-center flex-shrink-0 transition-all ${
+              selected === opt
+                ? "border-accent-amber bg-accent-amber"
+                : "border-border-strong"
+            }`}>
+              {selected === opt && <span className="w-1.5 h-1.5 rounded-full bg-text-inverse" />}
+            </span>
+            <span className="text-[13px] font-body text-text-secondary">{opt}</span>
+          </label>
+        ))}
+      </div>
+      <ResponseNote show={showNote} note={note} onToggle={() => setShowNote(!showNote)} onChange={(n) => setResponse(id, { ...current!, note: n })} />
+      {showError && <p className="text-[11px] text-accent-red font-body mt-1">Please select an option.</p>}
+    </div>
+  );
+}
+
+/** Checkbox — pick multiple options */
+interface MultiChoiceProps {
+  id: string;
+  label: string;
+  options: string[];
+  required?: boolean;
+}
+
+export function MultiChoice({ id, label, options, required }: MultiChoiceProps) {
+  const { responses, setResponse } = useAnnotations();
+  const current = responses.get(id);
+  const selected: string[] = (current?.value as string[]) || [];
+  const note = current?.note || "";
+  const [showNote, setShowNote] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!responses.has(id)) {
+      setResponse(id, { id, type: "checkbox", label, value: [], options, required });
+    }
+  }, [id]);
+
+  const toggle = (opt: string) => {
+    const next = selected.includes(opt) ? selected.filter((o) => o !== opt) : [...selected, opt];
+    setResponse(id, { ...current!, value: next });
+  };
+
+  // Keyboard selection via custom event from PlanRenderer
+  useEffect(() => {
+    const el = wrapperRef.current;
+    if (!el) return;
+    const handler = (e: Event) => {
+      const target = (e.target as HTMLElement).closest("[data-md-label]");
+      const opt = target?.getAttribute("data-md-label");
+      if (opt && options.includes(opt)) toggle(opt);
+    };
+    el.addEventListener("kb-select", handler);
+    return () => el.removeEventListener("kb-select", handler);
+  });
+
+  const showError = current?.required && selected.length === 0;
+
+  return (
+    <div ref={wrapperRef} data-md="multichoice" data-md-label={label} className="-mx-4 px-4 py-3 my-1 rounded-lg transition-colors duration-150 hover:bg-bg-input">
+      <div className="flex items-baseline gap-2 mb-2">
+        <span className="text-[13px] font-body font-medium text-text-primary">{label}</span>
+        {required && <span className="text-[10px] text-accent-red font-body">*</span>}
+      </div>
+      <div className="space-y-1">
+        {options.map((opt) => {
+          const checked = selected.includes(opt);
+          return (
+            <label
+              key={opt}
+              data-md="multichoice-option"
+              data-md-label={opt}
+              onClick={() => toggle(opt)}
+              className={`flex items-center gap-2.5 px-3 py-2 rounded-lg cursor-pointer transition-all duration-150 ${
+                checked ? "bg-highlight-selected" : "hover:bg-bg-elevated"
+              }`}
+            >
+              <span className={`w-4 h-4 rounded flex items-center justify-center flex-shrink-0 transition-all ${
+                checked
+                  ? "bg-accent-amber"
+                  : "border-[1.5px] border-border-strong"
+              }`}>
+                {checked && (
+                  <svg width="10" height="10" 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="text-[13px] font-body text-text-secondary">{opt}</span>
+            </label>
+          );
+        })}
+      </div>
+      <ResponseNote show={showNote} note={note} onToggle={() => setShowNote(!showNote)} onChange={(n) => setResponse(id, { ...current!, note: n })} />
+      {showError && <p className="text-[11px] text-accent-red font-body mt-1">Please select at least one option.</p>}
+    </div>
+  );
+}
+

package/daemon/client/components/CodeBlock.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useRef } from "react";
+
+interface CodeBlockProps {
+  language?: string;
+  children?: React.ReactNode;
+}
+
+export function CodeBlock({ language, children }: CodeBlockProps) {
+  const code = typeof children === "string" ? children : String(children ?? "");
+  const codeRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const el = codeRef.current;
+    const hljs = (window as any).hljs;
+    if (!el || !hljs) return;
+    // Reset previous highlighting
+    el.removeAttribute("data-highlighted");
+    el.className = language ? `language-${language}` : "";
+    el.textContent = code;
+    hljs.highlightElement(el);
+  }, [code, language]);
+
+  return (
+    <div className="relative mt-3 group/code" data-md="codeblock" data-md-language={language || ""}>
+      {language && (
+        <span className="absolute top-2 right-3 text-tiny text-text-tertiary opacity-0 group-hover/code:opacity-60 transition-opacity duration-150 z-10 font-mono">
+          {language}
+        </span>
+      )}
+      <pre className="bg-bg-code rounded-md p-4 overflow-x-auto text-code font-mono leading-relaxed">
+        <code ref={codeRef} className={language ? `language-${language}` : ""}>{code}</code>
+      </pre>
+    </div>
+  );
+}

package/daemon/client/components/Diff.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+
+interface DiffProps {
+  before: string;
+  after: string;
+  language?: string;
+}
+
+export function Diff({ before, after, language }: DiffProps) {
+  const beforeLines = before.split("\n");
+  const afterLines = after.split("\n");
+  const lcs = computeLCS(beforeLines, afterLines);
+  const diffLines: Array<{ type: "same" | "removed" | "added"; line: string }> = [];
+
+  let bi = 0, ai = 0, li = 0;
+  while (bi < beforeLines.length || ai < afterLines.length) {
+    if (li < lcs.length && bi < beforeLines.length && ai < afterLines.length
+        && beforeLines[bi] === lcs[li] && afterLines[ai] === lcs[li]) {
+      diffLines.push({ type: "same", line: beforeLines[bi] }); bi++; ai++; li++;
+    } else if (bi < beforeLines.length && (li >= lcs.length || beforeLines[bi] !== lcs[li])) {
+      diffLines.push({ type: "removed", line: beforeLines[bi] }); bi++;
+    } else if (ai < afterLines.length) {
+      diffLines.push({ type: "added", line: afterLines[ai] }); ai++;
+    }
+  }
+
+  return (
+    <div className="mt-3 bg-bg-code rounded-md overflow-hidden group/diff" data-md="diff" data-md-language={language || ""}>
+      {language && (
+        <div className="px-4 py-2 text-meta font-mono text-text-tertiary opacity-0 group-hover/diff:opacity-60 transition-opacity">
+          diff ({language})
+        </div>
+      )}
+      <pre className="px-4 pb-3 overflow-x-auto text-code font-mono">
+        {diffLines.map((d, i) => (
+          <div key={i} className={
+            d.type === "removed" ? "bg-accent-red-muted text-accent-red" :
+            d.type === "added" ? "bg-accent-green-muted text-accent-green" :
+            "text-text-tertiary"
+          }>
+            <span className="select-none w-6 inline-block text-center opacity-60">
+              {d.type === "removed" ? "-" : d.type === "added" ? "+" : " "}
+            </span>
+            {d.line}
+          </div>
+        ))}
+      </pre>
+    </div>
+  );
+}
+
+function computeLCS(a: string[], b: string[]): string[] {
+  const m = a.length, n = b.length;
+  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/components/FilePreview.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useState, useContext, useRef } from "react";
+import { SessionContext, ActiveViewCtx } from "#canvas/runtime";
+
+interface FilePreviewProps {
+  path: string;
+  lines?: [number, number];
+  /** Injected by compiler at build time — skip runtime fetch when present */
+  __content?: string;
+}
+
+const EXT_TO_LANG: Record<string, string> = {
+  ts: "typescript", tsx: "typescript", js: "javascript", jsx: "javascript",
+  py: "python", rs: "rust", go: "go", rb: "ruby", java: "java",
+  json: "json", yaml: "yaml", yml: "yaml", md: "markdown",
+  css: "css", html: "html", sh: "bash", bash: "bash", toml: "toml",
+  sql: "sql", xml: "xml", c: "c", cpp: "cpp", h: "c",
+};
+
+export function FilePreview({ path, lines, __content }: FilePreviewProps) {
+  const sessionId = useContext(SessionContext);
+  const { setActiveView } = useContext(ActiveViewCtx);
+  const [content, setContent] = useState<string | null>(__content ?? null);
+  const [language, setLanguage] = useState(() => {
+    const ext = path.split(".").pop() || "";
+    return EXT_TO_LANG[ext] || "text";
+  });
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(!__content);
+  const codeRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (__content !== undefined) return; // already resolved at compile time
+    setLoading(true);
+    setError(null);
+    fetch(`/api/file?session=${sessionId}&path=${encodeURIComponent(path)}`)
+      .then((r) => r.json())
+      .then((data: any) => {
+        if (data.error) {
+          setError(data.error);
+        } else {
+          let text = data.content;
+          if (lines) {
+            const allLines = text.split("\n");
+            text = allLines.slice(lines[0] - 1, lines[1]).join("\n");
+          }
+          setContent(text);
+          setLanguage(data.language || "text");
+        }
+      })
+      .catch(() => setError("Failed to fetch file"))
+      .finally(() => setLoading(false));
+  }, [sessionId, path, lines?.[0], lines?.[1], __content]);
+
+  // Highlight after content loads
+  useEffect(() => {
+    const el = codeRef.current;
+    const hljs = (window as any).hljs;
+    if (!el || !hljs || !content) return;
+    el.removeAttribute("data-highlighted");
+    el.className = language ? `language-${language}` : "";
+    el.textContent = content;
+    hljs.highlightElement(el);
+  }, [content, language]);
+
+  if (loading) {
+    return <div className="text-text-tertiary text-body mt-3 bg-bg-code rounded-md p-4">Loading {path}...</div>;
+  }
+
+  if (error) {
+    return <div className="text-accent-red text-body mt-3 bg-accent-red-muted rounded-md p-4">{path}: {error}</div>;
+  }
+
+  return (
+    <div className="mt-3 bg-bg-code rounded-md overflow-hidden" data-md="filepreview" data-md-path={path} {...(lines ? { "data-md-lines": `${lines[0]}-${lines[1]}` } : {})}>
+      <div className="px-4 py-2 flex items-center justify-between">
+        <button
+          className="font-mono text-meta text-text-tertiary hover:text-text-secondary hover:underline cursor-pointer text-left"
+          onClick={() => setActiveView({ type: "file", path })}
+          title={`Open ${path}`}
+        >{path}</button>
+        {lines && <span className="font-mono text-meta text-text-tertiary opacity-60">L{lines[0]}–{lines[1]}</span>}
+      </div>
+      <pre className="px-4 pb-3 overflow-x-auto text-code font-mono !bg-transparent" style={{ background: "transparent" }}>
+        <code ref={codeRef} className={language ? `language-${language}` : ""}>{content}</code>
+      </pre>
+    </div>
+  );
+}

package/daemon/client/components/Image.tsx

@@ -0,0 +1,45 @@
+import React, { useContext, useState } from "react";
+import { SessionContext } from "#canvas/runtime";
+
+interface ImageProps {
+  src: string;
+  alt?: string;
+  caption?: string;
+  width?: number | string;
+  height?: number | string;
+}
+
+export function ImageView({ src, alt, caption, width, height }: ImageProps) {
+  const sessionId = useContext(SessionContext);
+  const [error, setError] = useState(false);
+
+  const imgSrc = `/api/image?session=${encodeURIComponent(sessionId)}&path=${encodeURIComponent(src)}`;
+
+  if (error) {
+    return (
+      <div className="mt-3 text-accent-red text-body bg-accent-red-muted rounded-md p-4">
+        {src}: Failed to load image
+      </div>
+    );
+  }
+
+  return (
+    <figure className="mt-3 relative" data-md="image" data-md-src={src}>
+      <div className="rounded-md overflow-hidden border border-border-subtle bg-bg-code inline-block">
+        <img
+          src={imgSrc}
+          alt={alt || src}
+          onError={() => setError(true)}
+          className="block max-w-full h-auto"
+          {...(width ? { width } : {})}
+          {...(height ? { height } : {})}
+        />
+      </div>
+      {caption && (
+        <figcaption className="mt-1.5 text-meta text-text-tertiary font-body">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  );
+}