agent-canvas 0.1.33 → 0.1.36

package/daemon/client/App.tsx

@@ -20,7 +20,7 @@ import { AnnotationCreatePopover, AnnotationEditPopover } from "./Popover";
 import { ShareDialog, ShareButton, type ShareEntry } from "./ShareDialog";
 import { ReviewerIdentityDialog } from "./ReviewerIdentityDialog";
 import type { Annotation } from "#canvas/runtime";
-import { MODE, metaUrl, FS_AVAILABLE, WS_AVAILABLE, submitSharedFeedback, getReviewerIdentity, setReviewerIdentity } from "./clientApi";
+import { MODE, fetchMeta, FS_AVAILABLE, WS_AVAILABLE, submitSharedFeedback, getReviewerIdentity, setReviewerIdentity } from "./clientApi";
 
 export type ActiveView = { type: "overview" } | { type: "canvas"; filename: string } | { type: "file"; path: string };
 
@@ -309,8 +309,7 @@ function App() {
   // Fetch initial meta
   useEffect(() => {
     if (!sessionId) return;
-    fetch(metaUrl())
-      .then((r) => r.json())
+    fetchMeta()
       .then((data: any) => {
         if (data.currentRevision) {
           setCurrentRevision(data.currentRevision);

package/daemon/client/PlanRenderer.tsx

@@ -6,7 +6,7 @@ import { extractContext } from "./annotationContext";
 import { AnnotationCreatePopover, AnnotationEditPopover } from "./Popover";
 import { generateAnnotationId } from "./utils";
 import { useTextAnnotation } from "./useTextAnnotation";
-import { canvasJsUrl } from "./clientApi";
+import { loadCanvasModule } from "./clientApi";
 
 /** 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']";
@@ -42,7 +42,7 @@ export function PlanRenderer({ revision, filename }: PlanRendererProps) {
     setError(null);
     setFocusedBlockIndex(null);
     void sessionId; // sessionId is implied by the URL in clientApi (shared or local)
-    import(/* @vite-ignore */ canvasJsUrl(filename, revision))
+    loadCanvasModule(filename, revision)
       .then((mod) => { setPlanComponent(() => mod.default); setLoading(false); })
       .catch((e) => { setError(e.message); setLoading(false); });
   }, [sessionId, revision, filename]);

package/daemon/client/ShareDialog.tsx

@@ -8,6 +8,9 @@ export interface ShareEntry {
   ownerToken?: string;
   expiresAt?: string;
   lastFeedbackAt?: string;
+  /** Present iff the share is end-to-end encrypted; the URL itself
+   *  carries the key in the `#k=...` fragment. */
+  encryptionKey?: string;
 }
 
 interface ShareDialogProps {
@@ -160,6 +163,15 @@ export function ShareDialog({
                 Expires {new Date(shareForRev.expiresAt).toLocaleDateString()}.
               </p>
             )}
+            {shareForRev.encryptionKey && (
+              <p className="text-[11px] text-accent-green font-body flex items-center gap-1.5">
+                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+                  <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+                </svg>
+                End-to-end encrypted — the key is part of the link and never leaves your browser.
+              </p>
+            )}
             <p className="text-[11px] text-text-tertiary font-body">
               Anyone with this link can view and leave feedback. Reviewer
               feedback will appear in your annotation sidebar within seconds.

package/daemon/client/clientApi.ts

@@ -8,8 +8,27 @@
  * `window.__CANVAS_SHARE__`, which the CF Worker injects into the HTML
  * shell it serves. Local daemon never sets this, so the app defaults to
  * local mode.
+ *
+ * End-to-end encryption
+ * ---------------------
+ * When the share URL carries a `#k=<base64url>` fragment, every secret
+ * payload going over the wire is encrypted with that key:
+ *   - canvas JS bodies (decrypted before being imported as ES modules),
+ *   - origin.sessionId / origin.label in the meta response,
+ *   - feedback fields submitted by the reviewer.
+ * The key is never sent to the worker — browsers strip URL fragments
+ * before issuing requests. Legacy shares with no fragment continue to
+ * work in cleartext.
  */
 
+import {
+  importShareKey,
+  encryptString,
+  decryptString,
+  ENCRYPTION_META,
+  type EncryptionMeta,
+} from "./shareCrypto";
+
 declare global {
   interface Window {
     __CANVAS_SHARE__?: {
@@ -22,6 +41,8 @@ declare global {
 export interface SharedModeInfo {
   isShared: true;
   shareId: string;
+  /** Lazy-imported AES-GCM key parsed from the URL fragment, if any. */
+  encryptionKey: Promise<CryptoKey> | null;
 }
 
 export interface LocalModeInfo {
@@ -31,11 +52,28 @@ export interface LocalModeInfo {
 
 export type ModeInfo = SharedModeInfo | LocalModeInfo;
 
+/** Strip the `#k=...` fragment and parse out the key (base64url). */
+function readFragmentKey(): string | null {
+  if (typeof window === "undefined") return null;
+  const hash = window.location.hash.replace(/^#/, "");
+  if (!hash) return null;
+  for (const part of hash.split("&")) {
+    const [k, v] = part.split("=");
+    if (k === "k" && v) return decodeURIComponent(v);
+  }
+  return null;
+}
+
 /** One-time detection. In shared mode the daemon-provided sessionId from
  *  the URL path is ignored in favor of the worker-injected shareId. */
 export function detectMode(): ModeInfo {
   if (typeof window !== "undefined" && window.__CANVAS_SHARE__?.shareId) {
-    return { isShared: true, shareId: window.__CANVAS_SHARE__.shareId };
+    const encoded = readFragmentKey();
+    return {
+      isShared: true,
+      shareId: window.__CANVAS_SHARE__.shareId,
+      encryptionKey: encoded ? importShareKey(encoded) : null,
+    };
   }
   // Local: session id is the path suffix /s/:sessionId
   const sessionId = typeof window !== "undefined"
@@ -46,6 +84,11 @@ export function detectMode(): ModeInfo {
 
 export const MODE: ModeInfo = detectMode();
 
+/** True iff we're in a shared canvas AND have a fragment key. */
+export function isEncryptedShare(): boolean {
+  return MODE.isShared && MODE.encryptionKey !== null;
+}
+
 /** Build a canonical id-ish string used as React keys / identifiers. */
 export function getIdentifier(): string {
   return MODE.isShared ? MODE.shareId : MODE.sessionId;
@@ -75,6 +118,73 @@ export function uploadUrl(): string {
   return `/api/session/${MODE.sessionId}/upload`;
 }
 
+// --- Meta fetch (with optional decryption) ---------------------------------
+
+interface RawMetaResponse {
+  encryption?: EncryptionMeta;
+  origin?: { sessionId?: string; label?: string; revision?: number; createdAt?: string };
+  [key: string]: unknown;
+}
+
+/** Fetch + parse meta, decrypting origin.sessionId/label for encrypted
+ *  shares. The shape returned is the same as the worker/daemon emits, so
+ *  callers don't have to branch. */
+export async function fetchMeta(): Promise<any> {
+  const res = await fetch(metaUrl());
+  if (!res.ok) throw new Error(`meta ${res.status}`);
+  const data = (await res.json()) as RawMetaResponse;
+
+  if (data.encryption && MODE.isShared && MODE.encryptionKey) {
+    const key = await MODE.encryptionKey;
+    if (data.origin) {
+      const o: any = { ...data.origin };
+      if (o.sessionId) o.sessionId = await decryptString(key, o.sessionId);
+      if (o.label) o.label = await decryptString(key, o.label);
+      data.origin = o;
+    }
+    // The worker synthesizes a one-element revisions array from the same
+    // ShareRecord.origin, so its `label` is also ciphertext — decrypt it
+    // in lockstep with origin.label above.
+    const revs = (data as any).revisions;
+    if (Array.isArray(revs)) {
+      for (const r of revs) {
+        if (r.label) {
+          try { r.label = await decryptString(key, r.label); } catch {}
+        }
+      }
+    }
+  }
+  return data;
+}
+
+// --- Canvas module loading -------------------------------------------------
+
+/** Dynamically import the compiled canvas JS for a revision. In encrypted
+ *  shared mode the body is ciphertext, so we fetch it, decrypt to plain JS
+ *  source, then materialize as a Blob URL the browser can `import()`.
+ *  Import maps still apply to Blob-URL module imports, so the resulting
+ *  module's `#canvas/runtime` / `#canvas/components` imports resolve
+ *  exactly as they would for an in-place script. */
+export async function loadCanvasModule(filename: string, revision?: number): Promise<any> {
+  const url = canvasJsUrl(filename, revision);
+  if (!isEncryptedShare()) {
+    return import(/* @vite-ignore */ url);
+  }
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`canvas ${res.status}`);
+  const ciphertext = await res.text();
+  const key = await (MODE as SharedModeInfo).encryptionKey!;
+  const js = await decryptString(key, ciphertext);
+  const blob = new Blob([js], { type: "application/javascript" });
+  const blobUrl = URL.createObjectURL(blob);
+  try {
+    return await import(/* @vite-ignore */ blobUrl);
+  } finally {
+    // Revoke after a tick so the import has fully resolved its source.
+    setTimeout(() => URL.revokeObjectURL(blobUrl), 0);
+  }
+}
+
 // --- Feedback submission ----------------------------------------------------
 
 /**
@@ -115,17 +225,60 @@ export interface SharedFeedbackPayload {
   generalNote?: string;
 }
 
+/** Encrypt the secret fields of a feedback payload in-place semantics. */
+async function encryptFeedback(
+  payload: SharedFeedbackPayload,
+  key: CryptoKey,
+): Promise<SharedFeedbackPayload & { encryption: EncryptionMeta }> {
+  const annotations = await Promise.all(
+    payload.annotations.map(async (a) => {
+      const out: Record<string, unknown> = {
+        id: a.id,
+        createdAt: a.createdAt,
+        snippet: await encryptString(key, String(a.snippet ?? "")),
+        note: await encryptString(key, String(a.note ?? "")),
+      };
+      if (a.filePath) out.filePath = await encryptString(key, String(a.filePath));
+      if (a.canvasFile) out.canvasFile = await encryptString(key, String(a.canvasFile));
+      if (a.context !== undefined && a.context !== null) {
+        out.context = await encryptString(key, JSON.stringify(a.context));
+      }
+      // Image attachments are content-addressed worker URLs — already public
+      // by virtue of being served by the worker, so leaving them plaintext
+      // is fine and avoids breaking client-side rendering of the URL.
+      if (a.attachments) out.attachments = a.attachments;
+      return out;
+    }),
+  );
+  return {
+    author: {
+      id: payload.author.id,
+      name: await encryptString(key, payload.author.name),
+    },
+    revision: payload.revision,
+    annotations,
+    ...(payload.generalNote ? { generalNote: await encryptString(key, payload.generalNote) } : {}),
+    encryption: ENCRYPTION_META,
+  };
+}
+
 /**
  * Submit feedback in shared mode. Throws on HTTP error. Caller is
  * responsible for collecting + prompting for the reviewer's name before
- * invoking this.
+ * invoking this. Transparently encrypts when the share URL carried a
+ * fragment key.
  */
 export async function submitSharedFeedback(payload: SharedFeedbackPayload): Promise<void> {
   if (!MODE.isShared) throw new Error("submitSharedFeedback called outside shared mode");
+  let body: unknown = payload;
+  if (MODE.encryptionKey) {
+    const key = await MODE.encryptionKey;
+    body = await encryptFeedback(payload, key);
+  }
   const res = await fetch(`/s/${MODE.shareId}/feedback`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(payload),
+    body: JSON.stringify(body),
   });
   if (!res.ok) {
     const text = await res.text().catch(() => "");

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}:**`);