agent-canvas 0.1.32 → 0.1.34

package/bun.lock

@@ -5,8 +5,8 @@
     "": {
       "name": "agent-canvas",
       "dependencies": {
-        "@aj-archipelago/merval": "^1.0.7",
         "marked": "^17.0.4",
+        "mermaid-parser-bundle": "^0.1.2",
         "preact": "^10.25.0",
         "preact-render-to-string": "^6.6.6",
       },
@@ -34,8 +34,6 @@
     },
   },
   "packages": {
-    "@aj-archipelago/merval": ["@aj-archipelago/merval@1.0.7", "", {}, "sha512-z2/cmv5t04fUxlPJMMV0j9o9ZFG5PtuQq3pSpwKRPVpsZvAfHp7zuUJfyKcf+Uj9YKGWfnLeZr23DkwhT00iSg=="],
-
     "@cloudflare/kv-asset-handler": ["@cloudflare/kv-asset-handler@0.4.2", "", {}, "sha512-SIOD2DxrRRwQ+jgzlXCqoEFiKOFqaPjhnNTGKXSRLvp1HiOvapLaFG2kEr9dYQTYe8rKrd9uvDUzmAITeNyaHQ=="],
 
     "@cloudflare/unenv-preset": ["@cloudflare/unenv-preset@2.16.0", "", { "peerDependencies": { "unenv": "2.0.0-rc.24", "workerd": "1.20260301.1 || ~1.20260302.1 || ~1.20260303.1 || ~1.20260304.1 || >1.20260305.0 <2.0.0-0" }, "optionalPeers": ["workerd"] }, "sha512-8ovsRpwzPoEqPUzoErAYVv8l3FMZNeBVQfJTvtzP4AgLSRGZISRfuChFxHWUQd3n6cnrwkuTGxT+2cGo8EsyYg=="],
@@ -306,6 +304,8 @@
 
     "marked": ["marked@17.0.6", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-gB0gkNafnonOw0obSTEGZTT86IuhILt2Wfx0mWH/1Au83kybTayroZ/V6nS25mN7u8ASy+5fMhgB3XPNrOZdmA=="],
 
+    "mermaid-parser-bundle": ["mermaid-parser-bundle@0.1.2", "", {}, "sha512-vQ4gNKChTZR25183+PmWcQ8zaqN/e7l+jDi9VUH+hxe5t8DymvWrROIR35LrEObwnFqUjo7RKUKmHeaPftWudg=="],
+
     "miniflare": ["miniflare@4.20260409.0", "", { "dependencies": { "@cspotcode/source-map-support": "0.8.1", "sharp": "^0.34.5", "undici": "7.24.4", "workerd": "1.20260409.1", "ws": "8.18.0", "youch": "4.1.0-beta.10" }, "bin": { "miniflare": "bootstrap.js" } }, "sha512-ayl6To4av0YuXsSivGgWLj+Ug8xZ0Qz3sGV8+Ok2LhNVl6m8m5ktEBM3LX9iT9MtLZRJwBlJrKcraNs/DlZQfA=="],
 
     "mri": ["mri@1.2.0", "", {}, "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="],

package/daemon/client/components/Callout.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { renderMarkdownChildren } from "./renderMarkdownChildren";
 
 interface CalloutProps {
   type?: "info" | "warning" | "danger" | "tip";
@@ -19,7 +20,7 @@ export function Callout({ type = "info", children }: CalloutProps) {
       <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 className="text-body text-text-secondary leading-relaxed">{renderMarkdownChildren(children)}</div>
     </div>
   );
 }

package/daemon/client/components/Choice.tsx

@@ -1,17 +1,30 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useAnnotations } from "#canvas/runtime";
 import { ResponseNote } from "./ResponseNote";
 
+export type ChoiceOption = string | { value: string; label?: string };
+
+type NormalizedOption = { value: string; label: string };
+
+function normalizeOptions(options: ChoiceOption[]): NormalizedOption[] {
+  return options.map((opt) =>
+    typeof opt === "string"
+      ? { value: opt, label: opt }
+      : { value: opt.value, label: opt.label ?? opt.value },
+  );
+}
+
 /** Radio — pick one option */
 interface ChoiceProps {
   id: string;
   label: string;
-  options: string[];
+  options: ChoiceOption[];
   required?: boolean;
 }
 
 export function Choice({ id, label, options, required }: ChoiceProps) {
   const { responses, setResponse } = useAnnotations();
+  const normalized = useMemo(() => normalizeOptions(options), [options]);
   const current = responses.get(id);
   const selected = current?.value as string | undefined;
   const note = current?.note || "";
@@ -19,11 +32,11 @@ export function Choice({ id, label, options, required }: ChoiceProps) {
   const wrapperRef = useRef<HTMLDivElement>(null);
 
   if (!responses.has(id)) {
-    setResponse(id, { id, type: "radio", label, value: null, options, required });
+    setResponse(id, { id, type: "radio", label, value: null, options: normalized.map((o) => o.value), required });
   }
 
-  const handleSelect = (opt: string) => {
-    setResponse(id, { ...current!, value: opt });
+  const handleSelect = (value: string) => {
+    setResponse(id, { ...current!, value });
   };
 
   // Keyboard selection via custom event from PlanRenderer
@@ -32,12 +45,13 @@ export function Choice({ id, label, options, required }: ChoiceProps) {
     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);
+      const labelAttr = target?.getAttribute("data-md-label");
+      const match = normalized.find((o) => o.label === labelAttr);
+      if (match) handleSelect(match.value);
     };
     el.addEventListener("kb-select", handler);
     return () => el.removeEventListener("kb-select", handler);
-  }, [options, handleSelect]);
+  }, [normalized, handleSelect]);
 
   const showError = current?.required && !selected;
 
@@ -48,26 +62,26 @@ export function Choice({ id, label, options, required }: ChoiceProps) {
         {required && <span className="text-[10px] text-accent-red font-body">*</span>}
       </div>
       <div className="space-y-1">
-        {options.map((opt) => (
+        {normalized.map(({ value, label: optLabel }) => (
           <label
-            key={opt}
+            key={value}
             data-md="choice-option"
-            data-md-label={opt}
-            onClick={() => handleSelect(opt)}
+            data-md-label={optLabel}
+            onClick={() => handleSelect(value)}
             className={`flex items-center gap-2.5 px-3 py-2 rounded-lg cursor-pointer transition-all duration-150 ${
-              selected === opt
+              selected === value
                 ? "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
+              selected === value
                 ? "border-accent-amber bg-accent-amber"
                 : "border-border-strong"
             }`}>
-              {selected === opt && <span className="w-1.5 h-1.5 rounded-full bg-text-inverse" />}
+              {selected === value && <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>
+            <span className="text-[13px] font-body text-text-secondary">{optLabel}</span>
           </label>
         ))}
       </div>
@@ -81,12 +95,13 @@ export function Choice({ id, label, options, required }: ChoiceProps) {
 interface MultiChoiceProps {
   id: string;
   label: string;
-  options: string[];
+  options: ChoiceOption[];
   required?: boolean;
 }
 
 export function MultiChoice({ id, label, options, required }: MultiChoiceProps) {
   const { responses, setResponse } = useAnnotations();
+  const normalized = useMemo(() => normalizeOptions(options), [options]);
   const current = responses.get(id);
   const selected: string[] = (current?.value as string[]) || [];
   const note = current?.note || "";
@@ -94,11 +109,11 @@ export function MultiChoice({ id, label, options, required }: MultiChoiceProps)
   const wrapperRef = useRef<HTMLDivElement>(null);
 
   if (!responses.has(id)) {
-    setResponse(id, { id, type: "checkbox", label, value: [], options, required });
+    setResponse(id, { id, type: "checkbox", label, value: [], options: normalized.map((o) => o.value), required });
   }
 
-  const toggle = (opt: string) => {
-    const next = selected.includes(opt) ? selected.filter((o) => o !== opt) : [...selected, opt];
+  const toggle = (value: string) => {
+    const next = selected.includes(value) ? selected.filter((o) => o !== value) : [...selected, value];
     setResponse(id, { ...current!, value: next });
   };
 
@@ -108,12 +123,13 @@ export function MultiChoice({ id, label, options, required }: MultiChoiceProps)
     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);
+      const labelAttr = target?.getAttribute("data-md-label");
+      const match = normalized.find((o) => o.label === labelAttr);
+      if (match) toggle(match.value);
     };
     el.addEventListener("kb-select", handler);
     return () => el.removeEventListener("kb-select", handler);
-  }, [options, toggle]);
+  }, [normalized, toggle]);
 
   const showError = current?.required && selected.length === 0;
 
@@ -124,14 +140,14 @@ export function MultiChoice({ id, label, options, required }: MultiChoiceProps)
         {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);
+        {normalized.map(({ value, label: optLabel }) => {
+          const checked = selected.includes(value);
           return (
             <label
-              key={opt}
+              key={value}
               data-md="multichoice-option"
-              data-md-label={opt}
-              onClick={() => toggle(opt)}
+              data-md-label={optLabel}
+              onClick={() => toggle(value)}
               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"
               }`}
@@ -147,7 +163,7 @@ export function MultiChoice({ id, label, options, required }: MultiChoiceProps)
                   </svg>
                 )}
               </span>
-              <span className="text-[13px] font-body text-text-secondary">{opt}</span>
+              <span className="text-[13px] font-body text-text-secondary">{optLabel}</span>
             </label>
           );
         })}

package/daemon/client/components/Note.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { renderMarkdownChildren } from "./renderMarkdownChildren";
 
 interface NoteProps {
   children?: React.ReactNode;
@@ -7,7 +8,7 @@ interface NoteProps {
 export function Note({ children }: NoteProps) {
   return (
     <div className="relative bg-bg-elevated rounded-lg px-5 py-4 mt-3 text-body text-text-secondary italic leading-relaxed" data-md="note">
-      {children}
+      {renderMarkdownChildren(children)}
     </div>
   );
 }

package/daemon/client/components/Section.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { renderMarkdownChildren } from "./renderMarkdownChildren";
 
 interface SectionProps {
   title: string;
@@ -26,7 +27,7 @@ export function Section({ title, children }: SectionProps) {
           {title}
         </h2>
       </div>
-      <div className={collapsed ? "mt-6 hidden" : "mt-6"}>{children}</div>
+      <div className={collapsed ? "mt-6 hidden" : "mt-6"}>{renderMarkdownChildren(children)}</div>
     </div>
   );
 }

package/daemon/client/components/Task.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { renderMarkdownChildren } from "./renderMarkdownChildren";
 
 type Status = "todo" | "done" | "blocked" | "in-progress";
 type BadgeVariant = "info" | "success" | "warning" | "danger" | "neutral";
@@ -61,7 +62,7 @@ export function Item({ id, label, status, badge, badgeVariant = "neutral", child
             )}
           </div>
           {children && (
-            <div className="text-body text-text-secondary mt-1 leading-relaxed">{children}</div>
+            <div className="text-body text-text-secondary mt-1 leading-relaxed">{renderMarkdownChildren(children)}</div>
           )}
         </div>
       </div>

package/daemon/client/components/renderMarkdownChildren.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { marked } from "marked";
+
+marked.setOptions({ gfm: true, breaks: false });
+
+function renderTextAsMarkdown(text: string, key: string): React.ReactNode {
+  const trimmed = text.trim();
+  if (!trimmed) return null;
+  const html = marked.parse(trimmed, { async: false }) as string;
+  return (
+    <div
+      key={key}
+      className="prose-canvas"
+      data-md="markdown"
+      data-md-source={trimmed}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}
+
+/**
+ * Auto-render markdown for string children, passing JSX children through.
+ * Consecutive string runs are grouped into a single markdown block so multi-paragraph
+ * prose between JSX elements renders correctly.
+ */
+export function renderMarkdownChildren(children: React.ReactNode): React.ReactNode {
+  const kids = React.Children.toArray(children);
+  if (kids.length === 0) return null;
+
+  const result: React.ReactNode[] = [];
+  let buffer = "";
+  let bufferIdx = 0;
+
+  const flush = () => {
+    if (buffer) {
+      const node = renderTextAsMarkdown(buffer, `md-${bufferIdx++}`);
+      if (node) result.push(node);
+      buffer = "";
+    }
+  };
+
+  for (const child of kids) {
+    if (typeof child === "string" || typeof child === "number") {
+      buffer += String(child);
+    } else {
+      flush();
+      result.push(child);
+    }
+  }
+  flush();
+  return result;
+}

package/daemon/client/exportMarkdown.ts

@@ -70,6 +70,7 @@ function walkNode(el: HTMLElement, lines: string[], depth: number) {
       case "codeblock": return handleCodeBlock(el, lines);
       case "callout": return handleCallout(el, lines);
       case "note": return handleNote(el, lines);
+      case "markdown": return handleMarkdown(el, lines);
       case "table": return handleTable(el, lines);
       case "checklist": return handleChecklist(el, lines);
       case "diff": return handleDiff(el, lines);
@@ -208,6 +209,11 @@ function handleMermaid(el: HTMLElement, lines: string[]) {
   }
 }
 
+function handleMarkdown(el: HTMLElement, lines: string[]) {
+  const source = el.getAttribute("data-md-source") || "";
+  if (source) lines.push(source, "");
+}
+
 function handleChoice(el: HTMLElement, lines: string[]) {
   const label = el.getAttribute("data-md-label") || "";
   lines.push(`**${label}:**`);