agent-canvas 0.1.34 → 0.1.37

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/renderMarkdownChildren.tsx

@@ -3,6 +3,27 @@ import { marked } from "marked";
 
 marked.setOptions({ gfm: true, breaks: false });
 
+/** Host tags that flow inline and must not break a prose run into separate blocks. */
+const INLINE_TAGS = new Set([
+  "a", "abbr", "b", "br", "code", "del", "em", "i", "kbd", "mark",
+  "q", "s", "small", "span", "strong", "sub", "sup", "time", "u",
+]);
+
+/** Custom components that render inline (e.g. <Priority>). */
+const INLINE_COMPONENTS = new Set(["Priority"]);
+
+function isInlineNode(node: React.ReactNode): boolean {
+  if (typeof node === "string" || typeof node === "number") return true;
+  if (!React.isValidElement(node)) return false;
+  const type = node.type;
+  if (typeof type === "string") return INLINE_TAGS.has(type);
+  if (typeof type === "function") {
+    const name = (type as { displayName?: string; name?: string }).displayName ?? (type as { name?: string }).name;
+    return name ? INLINE_COMPONENTS.has(name) : false;
+  }
+  return false;
+}
+
 function renderTextAsMarkdown(text: string, key: string): React.ReactNode {
   const trimmed = text.trim();
   if (!trimmed) return null;
@@ -18,30 +39,54 @@ function renderTextAsMarkdown(text: string, key: string): React.ReactNode {
   );
 }
 
+/**
+ * Render a run of inline content (text + inline JSX like <code>/<strong>) as a single
+ * flowing paragraph. Text segments are parsed as inline markdown; JSX passes through.
+ * No `data-md` attribute so the markdown exporter treats it as an inline container.
+ */
+function renderInlineRun(run: React.ReactNode[], key: string): React.ReactNode {
+  return (
+    <div key={key} className="prose-canvas">
+      {run.map((node, i) => {
+        if (typeof node === "string" || typeof node === "number") {
+          const html = marked.parseInline(String(node), { async: false }) as string;
+          return <span key={i} dangerouslySetInnerHTML={{ __html: html }} />;
+        }
+        return node;
+      })}
+    </div>
+  );
+}
+
 /**
  * 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.
+ * Block-level JSX (Callout, Diff, etc.) breaks the prose into separate markdown blocks,
+ * while inline JSX (code, strong, links) stays within the surrounding paragraph so text
+ * keeps flowing instead of stacking one fragment per line.
  */
 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;
+  let segment: React.ReactNode[] = [];
+  let segIdx = 0;
 
   const flush = () => {
-    if (buffer) {
-      const node = renderTextAsMarkdown(buffer, `md-${bufferIdx++}`);
+    if (segment.length === 0) return;
+    const hasInlineJsx = segment.some((n) => typeof n !== "string" && typeof n !== "number");
+    if (hasInlineJsx) {
+      result.push(renderInlineRun(segment, `md-${segIdx++}`));
+    } else {
+      const node = renderTextAsMarkdown(segment.join(""), `md-${segIdx++}`);
       if (node) result.push(node);
-      buffer = "";
     }
+    segment = [];
   };
 
   for (const child of kids) {
-    if (typeof child === "string" || typeof child === "number") {
-      buffer += String(child);
+    if (isInlineNode(child)) {
+      segment.push(child);
     } else {
       flush();
       result.push(child);

package/daemon/client/shareCrypto.ts

@@ -0,0 +1,123 @@
+/**
+ * AES-GCM-256 helpers for end-to-end encrypted canvas shares.
+ *
+ * The same module is loaded in the browser (decrypts payloads) and in the
+ * daemon's Bun runtime (encrypts payloads + decrypts polled feedback). It
+ * only uses `crypto.subtle`, `TextEncoder`/`TextDecoder`, and
+ * `btoa`/`atob` — all available in both environments.
+ *
+ * Wire format
+ * -----------
+ * - Key: 32 random bytes, transported in the URL fragment as base64url
+ *   (e.g. `#k=<key>`). Fragments are never sent to the worker, so the
+ *   worker cannot decrypt the payloads it stores.
+ * - Each encrypted string is `base64(IV || ciphertext-with-tag)` where the
+ *   IV is 12 fresh random bytes. This is the standard AES-GCM packing.
+ * - The presence of an `encryption: { alg: "AES-GCM", v: 1 }` marker on a
+ *   SharePayload / FeedbackPostBody / ShareRecord tells the consumer that
+ *   the marked fields contain ciphertext rather than plaintext.
+ */
+
+export const CRYPTO_ALG = "AES-GCM" as const;
+export const CRYPTO_VERSION = 1 as const;
+
+export interface EncryptionMeta {
+  alg: typeof CRYPTO_ALG;
+  v: typeof CRYPTO_VERSION;
+}
+
+export const ENCRYPTION_META: EncryptionMeta = { alg: CRYPTO_ALG, v: CRYPTO_VERSION };
+
+/** Generate a fresh 256-bit AES-GCM key. */
+export async function generateShareKey(): Promise<CryptoKey> {
+  return crypto.subtle.generateKey(
+    { name: CRYPTO_ALG, length: 256 },
+    true,
+    ["encrypt", "decrypt"],
+  );
+}
+
+/** Export a CryptoKey to a base64url string suitable for URL fragments. */
+export async function exportShareKey(key: CryptoKey): Promise<string> {
+  const raw = await crypto.subtle.exportKey("raw", key);
+  return b64urlFromBytes(new Uint8Array(raw));
+}
+
+/** Import a base64url-encoded key for AES-GCM. */
+export async function importShareKey(encoded: string): Promise<CryptoKey> {
+  const raw = bytesFromB64url(encoded);
+  return crypto.subtle.importKey(
+    "raw",
+    raw as BufferSource,
+    { name: CRYPTO_ALG, length: 256 },
+    false,
+    ["encrypt", "decrypt"],
+  );
+}
+
+/** Encrypt a UTF-8 string. Returns base64(IV || ciphertext+tag). */
+export async function encryptString(key: CryptoKey, plaintext: string): Promise<string> {
+  const iv = crypto.getRandomValues(new Uint8Array(12));
+  const data = new TextEncoder().encode(plaintext);
+  const ct = await crypto.subtle.encrypt(
+    { name: CRYPTO_ALG, iv: iv as BufferSource },
+    key,
+    data as BufferSource,
+  );
+  const combined = new Uint8Array(iv.byteLength + ct.byteLength);
+  combined.set(iv, 0);
+  combined.set(new Uint8Array(ct), iv.byteLength);
+  return b64FromBytes(combined);
+}
+
+/** Decrypt a base64-encoded ciphertext back to a UTF-8 string. */
+export async function decryptString(key: CryptoKey, ciphertext: string): Promise<string> {
+  const combined = bytesFromB64(ciphertext);
+  if (combined.byteLength < 12 + 16) throw new Error("Ciphertext too short");
+  const iv = combined.subarray(0, 12);
+  const ct = combined.subarray(12);
+  const pt = await crypto.subtle.decrypt(
+    { name: CRYPTO_ALG, iv: iv as BufferSource },
+    key,
+    ct as BufferSource,
+  );
+  return new TextDecoder().decode(pt);
+}
+
+/** Convenience: encrypt a JSON-serializable value as a single ciphertext blob. */
+export async function encryptJson(key: CryptoKey, value: unknown): Promise<string> {
+  return encryptString(key, JSON.stringify(value));
+}
+
+/** Convenience: decrypt a ciphertext blob into a JSON value. */
+export async function decryptJson<T = unknown>(key: CryptoKey, ciphertext: string): Promise<T> {
+  return JSON.parse(await decryptString(key, ciphertext)) as T;
+}
+
+// --- base64 helpers ---------------------------------------------------------
+
+function b64FromBytes(bytes: Uint8Array): string {
+  let bin = "";
+  // Chunk to avoid stack overflow on large inputs.
+  const CHUNK = 0x8000;
+  for (let i = 0; i < bytes.byteLength; i += CHUNK) {
+    bin += String.fromCharCode.apply(null, Array.from(bytes.subarray(i, i + CHUNK)));
+  }
+  return btoa(bin);
+}
+
+function bytesFromB64(s: string): Uint8Array {
+  const bin = atob(s);
+  const out = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+  return out;
+}
+
+function b64urlFromBytes(bytes: Uint8Array): string {
+  return b64FromBytes(bytes).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+
+function bytesFromB64url(s: string): Uint8Array {
+  const padded = s.replace(/-/g, "+").replace(/_/g, "/") + "===".slice((s.length + 3) % 4);
+  return bytesFromB64(padded);
+}