agent-canvas 0.1.41 → 0.1.43

package/daemon/client/AnnotationProvider.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import { AnnotationCtx } from "#canvas/runtime";
 import type { Annotation, AnnotationContext, PlanResponse, FeedbackEntry, AnnotationContextValue } from "#canvas/runtime";
+import { clearPersistedDraft } from "./annotationDraft";
 import { generateAnnotationId } from "./utils";
 
 // Re-export types for convenience
@@ -44,12 +45,6 @@ function savePersisted(sessionId: string, revision: number, state: PersistedStat
   } catch {}
 }
 
-function clearPersisted(sessionId: string, revision: number) {
-  try {
-    localStorage.removeItem(storageKey(sessionId, revision));
-  } catch {}
-}
-
 export function AnnotationProvider({ sessionId, revision, isReadOnly, remoteAnnotations, children }: AnnotationProviderProps) {
   const [localAnnotations, setAnnotations] = useState<Annotation[]>(() => {
     const saved = loadPersisted(sessionId, revision);
@@ -164,7 +159,7 @@ export function AnnotationProvider({ sessionId, revision, isReadOnly, remoteAnno
     setActiveAnnotationId(null);
     setResponses(new Map());
     setFeedbackEntries(new Map());
-    clearPersisted(sessionId, revision);
+    clearPersistedDraft(localStorage, sessionId, revision);
   }, [sessionId, revision]);
 
   return (

package/daemon/client/App.tsx

@@ -21,7 +21,8 @@ import { ShareDialog, ShareButton, type ShareEntry } from "./ShareDialog";
 import { ReviewerIdentityDialog } from "./ReviewerIdentityDialog";
 import type { Annotation } from "#canvas/runtime";
 import { MODE, fetchMeta, FS_AVAILABLE, WS_AVAILABLE, submitSharedFeedback, getReviewerIdentity, setReviewerIdentity } from "./clientApi";
-import { carryUnsubmittedDraft } from "./annotationDraft";
+import { carryUnsubmittedDraft, clearPersistedDraft } from "./annotationDraft";
+import { RenderErrorContext, type CanvasRenderError } from "./RenderErrorContext";
 
 export type ActiveView = { type: "overview" } | { type: "canvas"; filename: string } | { type: "file"; path: string };
 
@@ -232,6 +233,8 @@ function App() {
   const [activeView, setActiveViewRaw] = useState<ActiveView>({ type: "overview" });
   const [openFiles, setOpenFiles] = useState<string[]>([]);
   const wsRef = useRef<WebSocket | null>(null);
+  const pendingRenderErrorsRef = useRef<CanvasRenderError[]>([]);
+  const reportedRenderErrorsRef = useRef(new Set<string>());
 
   const [projectRoot, setProjectRoot] = useState<string | undefined>();
   const [mobileSidebar, setMobileSidebar] = useState(false);
@@ -247,6 +250,21 @@ function App() {
   const [reviewerDialogOpen, setReviewerDialogOpen] = useState(false);
   const [pendingFeedback, setPendingFeedback] = useState<string | null>(null);
   const [toast, setToast] = useState<{ kind: "error" | "success"; message: string } | null>(null);
+
+  const reportRenderError = useCallback((error: CanvasRenderError) => {
+    if (isSharedMode) return;
+    const signature = `${error.revision}\0${error.filename}\0${error.message}`;
+    if (reportedRenderErrorsRef.current.has(signature)) return;
+    reportedRenderErrorsRef.current.add(signature);
+
+    const payload = JSON.stringify({ type: "render-error", error });
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(payload);
+    } else {
+      pendingRenderErrorsRef.current.push(error);
+    }
+  }, [isSharedMode]);
+
   useEffect(() => {
     if (!toast) return;
     const t = setTimeout(() => setToast(null), 4000);
@@ -314,6 +332,9 @@ function App() {
       .then((data: any) => {
         if (data.currentRevision) {
           const nextRevisions: RevisionInfo[] = data.revisions || [];
+          for (const revision of nextRevisions) {
+            if (revision.hasFeedback) clearPersistedDraft(localStorage, sessionId, revision.revision);
+          }
           carryUnsubmittedDraft(localStorage, sessionId, data.currentRevision, nextRevisions);
           setCurrentRevision(data.currentRevision);
           setSelectedRevision(data.currentRevision);
@@ -375,7 +396,13 @@ function App() {
       const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
       const ws = new WebSocket(`${protocol}//${window.location.host}/ws/session/${sessionId}`);
       wsRef.current = ws;
-      ws.onopen = () => setConnected(true);
+      ws.onopen = () => {
+        setConnected(true);
+        for (const error of pendingRenderErrorsRef.current) {
+          ws.send(JSON.stringify({ type: "render-error", error }));
+        }
+        pendingRenderErrorsRef.current = [];
+      };
       ws.onclose = () => { setConnected(false); reconnectTimer = setTimeout(connect, 2000); };
       ws.onmessage = (event) => {
         try {
@@ -407,7 +434,13 @@ function App() {
             }
           }
           if (data.type === "revision-updated") {
-            if (data.revisions) setRevisions(data.revisions);
+            if (Array.isArray(data.revisions)) {
+              const nextRevisions: RevisionInfo[] = data.revisions;
+              for (const revision of nextRevisions) {
+                if (revision.hasFeedback) clearPersistedDraft(localStorage, sessionId, revision.revision);
+              }
+              setRevisions(nextRevisions);
+            }
           }
           if (data.type === "watcher-status") {
             setAgentWatching(!!data.watching);
@@ -448,6 +481,7 @@ function App() {
         annotations: structuredAnnotations,
         generalNote: feedback,
       });
+      clearPersistedDraft(localStorage, sessionId, selectedRevision);
       setSharedFeedbackSubmitted(true);
       setToast({ kind: "success", message: "Feedback submitted. The canvas author will see it shortly." });
     } catch (e: any) {
@@ -482,14 +516,15 @@ function App() {
 
   return (
     <SessionContext.Provider value={sessionId}>
-      <RevisionContext.Provider value={{ currentRevision, selectedRevision, revisions, setSelectedRevision, isReadOnly, compareRevision, setCompareRevision, agentWatching }}>
-        <AnnotationProvider
-          key={`${sessionId}:${selectedRevision}`}
-          sessionId={sessionId}
-          revision={selectedRevision}
-          isReadOnly={isReadOnly}
-          remoteAnnotations={remoteAnnotationsByRev.get(selectedRevision)}
-        >
+      <RenderErrorContext.Provider value={reportRenderError}>
+        <RevisionContext.Provider value={{ currentRevision, selectedRevision, revisions, setSelectedRevision, isReadOnly, compareRevision, setCompareRevision, agentWatching }}>
+          <AnnotationProvider
+            key={`${sessionId}:${selectedRevision}`}
+            sessionId={sessionId}
+            revision={selectedRevision}
+            isReadOnly={isReadOnly}
+            remoteAnnotations={remoteAnnotationsByRev.get(selectedRevision)}
+          >
           <ActiveViewContext.Provider value={{ activeView, setActiveView, openFiles, closeFile, canvasFiles }}>
           <ActiveViewCtx.Provider value={{ setActiveView }}>
             <div className="min-h-screen bg-bg-base">
@@ -663,8 +698,9 @@ function App() {
             </div>
           </ActiveViewCtx.Provider>
           </ActiveViewContext.Provider>
-        </AnnotationProvider>
-      </RevisionContext.Provider>
+          </AnnotationProvider>
+        </RevisionContext.Provider>
+      </RenderErrorContext.Provider>
     </SessionContext.Provider>
   );
 }

package/daemon/client/PlanRenderer.tsx

@@ -7,6 +7,7 @@ import { AnnotationCreatePopover, AnnotationEditPopover } from "./Popover";
 import { generateAnnotationId } from "./utils";
 import { useTextAnnotation } from "./useTextAnnotation";
 import { loadCanvasModule } from "./clientApi";
+import { RenderErrorContext, type CanvasRenderError } from "./RenderErrorContext";
 
 /** 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']";
@@ -18,8 +19,53 @@ interface PlanRendererProps {
   filename: string;
 }
 
+interface CanvasErrorBoundaryProps {
+  revision: number;
+  filename: string;
+  reportError: (error: CanvasRenderError) => void;
+  children: React.ReactNode;
+}
+
+interface CanvasErrorBoundaryState {
+  error: Error | null;
+}
+
+class CanvasErrorBoundary extends React.Component<CanvasErrorBoundaryProps, CanvasErrorBoundaryState> {
+  state: CanvasErrorBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: Error): CanvasErrorBoundaryState {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    this.props.reportError({
+      revision: this.props.revision,
+      filename: this.props.filename,
+      message: error.message,
+      ...(error.stack ? { stack: error.stack } : {}),
+      ...(info.componentStack ? { componentStack: info.componentStack } : {}),
+    });
+  }
+
+  render() {
+    if (!this.state.error) return this.props.children;
+    return <CanvasErrorDisplay message={this.state.error.message} />;
+  }
+}
+
+function CanvasErrorDisplay({ message }: { message: string }) {
+  return (
+    <div className="bg-accent-red-muted rounded-lg p-5">
+      <h3 className="font-body font-semibold text-accent-red mb-2">Canvas render failed</h3>
+      <pre className="text-code font-mono text-text-secondary whitespace-pre-wrap">{message}</pre>
+      <p className="text-meta font-body text-text-tertiary mt-3">The error was sent back to the canvas author.</p>
+    </div>
+  );
+}
+
 export function PlanRenderer({ revision, filename }: PlanRendererProps) {
   const sessionId = useContext(SessionContext);
+  const reportError = useContext(RenderErrorContext);
   const [PlanComponent, setPlanComponent] = useState<React.ComponentType | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
@@ -44,8 +90,18 @@ export function PlanRenderer({ revision, filename }: PlanRendererProps) {
     void sessionId; // sessionId is implied by the URL in clientApi (shared or local)
     loadCanvasModule(filename, revision)
       .then((mod) => { setPlanComponent(() => mod.default); setLoading(false); })
-      .catch((e) => { setError(e.message); setLoading(false); });
-  }, [sessionId, revision, filename]);
+      .catch((cause: unknown) => {
+        const moduleError = cause instanceof Error ? cause : new Error(String(cause));
+        setError(moduleError.message);
+        setLoading(false);
+        reportError({
+          revision,
+          filename,
+          message: moduleError.message,
+          ...(moduleError.stack ? { stack: moduleError.stack } : {}),
+        });
+      });
+  }, [sessionId, revision, filename, reportError]);
 
   const scrollContainer = document.getElementById("plan-scroll-container");
 
@@ -250,12 +306,7 @@ export function PlanRenderer({ revision, filename }: PlanRendererProps) {
   }
 
   if (error) {
-    return (
-      <div className="bg-accent-red-muted rounded-lg p-5">
-        <h3 className="font-body font-semibold text-accent-red mb-2">Compilation Error</h3>
-        <pre className="text-code font-mono text-text-secondary whitespace-pre-wrap">{error}</pre>
-      </div>
-    );
+    return <CanvasErrorDisplay message={error} />;
   }
 
   if (!PlanComponent) {
@@ -265,7 +316,14 @@ export function PlanRenderer({ revision, filename }: PlanRendererProps) {
   return (
     <CanvasFileCtx.Provider value={filename}>
       <div ref={containerRef} className="plan-content plan-updated">
-        {planElement}
+        <CanvasErrorBoundary
+          key={`${revision}:${filename}`}
+          revision={revision}
+          filename={filename}
+          reportError={reportError}
+        >
+          {planElement}
+        </CanvasErrorBoundary>
       </div>
       {editingAnn && (
         <EditAnnotationModal
@@ -554,4 +612,3 @@ function EditAnnotationModal({ note, onSave, onCancel }: { note: string; onSave:
     </div>
   );
 }
-

package/daemon/client/RenderErrorContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+
+export interface CanvasRenderError {
+  revision: number;
+  filename: string;
+  message: string;
+  stack?: string;
+  componentStack?: string;
+}
+
+export const RenderErrorContext = createContext<(error: CanvasRenderError) => void>(() => {});

package/daemon/client/annotationDraft.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test";
-import { carryUnsubmittedDraft } from "./annotationDraft";
+import { carryUnsubmittedDraft, clearPersistedDraft } from "./annotationDraft";
 
 class MemoryStorage {
   private readonly values = new Map<string, string>();
@@ -11,12 +11,27 @@ class MemoryStorage {
   setItem(key: string, value: string): void {
     this.values.set(key, value);
   }
+
+  removeItem(key: string): void {
+    this.values.delete(key);
+  }
 }
 
 const sessionId = "session";
 const key = (revision: number) => `canvas:${sessionId}:rev:${revision}`;
 
 describe("carryUnsubmittedDraft", () => {
+  test("clears a submitted draft and its carry marker", () => {
+    const storage = new MemoryStorage();
+    storage.setItem(key(2), JSON.stringify({ generalNote: "Submitted" }));
+    storage.setItem(`${key(2)}:draft-handled`, "1");
+
+    clearPersistedDraft(storage, sessionId, 2);
+
+    expect(storage.getItem(key(2))).toBeNull();
+    expect(storage.getItem(`${key(2)}:draft-handled`)).toBeNull();
+  });
+
   test("carries the latest unsent draft into a new revision", () => {
     const storage = new MemoryStorage();
     storage.setItem(key(2), JSON.stringify({

package/daemon/client/annotationDraft.ts

@@ -8,6 +8,10 @@ interface AnnotationStorage {
   setItem(key: string, value: string): void;
 }
 
+interface RemovableAnnotationStorage {
+  removeItem(key: string): void;
+}
+
 function storageKey(sessionId: string, revision: number): string {
   return `canvas:${sessionId}:rev:${revision}`;
 }
@@ -16,6 +20,17 @@ function handledKey(sessionId: string, revision: number): string {
   return `${storageKey(sessionId, revision)}:draft-handled`;
 }
 
+export function clearPersistedDraft(
+  storage: RemovableAnnotationStorage,
+  sessionId: string,
+  revision: number,
+): void {
+  try {
+    storage.removeItem(storageKey(sessionId, revision));
+    storage.removeItem(handledKey(sessionId, revision));
+  } catch {}
+}
+
 function parseState(raw: string | null): object | null {
   if (!raw) return null;
   try {

package/daemon/client/clientApi.ts

@@ -118,6 +118,47 @@ export function uploadUrl(): string {
   return `/api/session/${MODE.sessionId}/upload`;
 }
 
+function localSecretUrl(fieldId: string, suffix: "status" | "value"): string {
+  if (MODE.isShared) throw new Error("Secret inputs are available only on the local canvas daemon");
+  return `/api/session/${encodeURIComponent(MODE.sessionId)}/secrets/${encodeURIComponent(fieldId)}/${suffix}`;
+}
+
+async function secretApiError(response: Response): Promise<Error> {
+  const raw: unknown = await response.json().catch(() => null);
+  if (typeof raw === "object" && raw !== null && "error" in raw && typeof raw.error === "string") {
+    return new Error(raw.error);
+  }
+  return new Error(`Secret API request failed with status ${response.status}`);
+}
+
+/** Return only readiness metadata. The secret value is never sent back to the browser. */
+export async function getLocalSecretStatus(fieldId: string): Promise<boolean> {
+  const response = await fetch(localSecretUrl(fieldId, "status"), { cache: "no-store" });
+  if (!response.ok) throw await secretApiError(response);
+  const raw: unknown = await response.json();
+  return typeof raw === "object" && raw !== null && "ready" in raw && raw.ready === true;
+}
+
+/** Deposit a secret into the daemon's in-memory vault. */
+export async function storeLocalSecret(fieldId: string, value: string): Promise<void> {
+  const response = await fetch(localSecretUrl(fieldId, "value"), {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    cache: "no-store",
+    body: JSON.stringify({ value }),
+  });
+  if (!response.ok) throw await secretApiError(response);
+}
+
+/** Remove a deposited secret without retrieving its value. */
+export async function clearLocalSecret(fieldId: string): Promise<void> {
+  const response = await fetch(localSecretUrl(fieldId, "value"), {
+    method: "DELETE",
+    cache: "no-store",
+  });
+  if (!response.ok) throw await secretApiError(response);
+}
+
 // --- Meta fetch (with optional decryption) ---------------------------------
 
 interface RawMetaResponse {

package/daemon/client/components/SecretInput.tsx

@@ -0,0 +1,156 @@
+import React, { useEffect, useState } from "react";
+import { useFeedback } from "#canvas/runtime";
+import { MODE, clearLocalSecret, getLocalSecretStatus, storeLocalSecret } from "../clientApi";
+
+const FIELD_ID_RE = /^[A-Za-z0-9][A-Za-z0-9._-]{0,127}$/;
+const ENV_NAME_RE = /^[A-Za-z_][A-Za-z0-9_]*$/;
+
+interface SecretInputProps {
+  id: string;
+  label: string;
+  env: string;
+  placeholder?: string;
+  required?: boolean;
+}
+
+/** Local-only secret handoff that never enters annotation or feedback state. */
+export function SecretInput({ id, label, env, placeholder, required }: SecretInputProps) {
+  const [value, setValue] = useState("");
+  const [ready, setReady] = useState(false);
+  const [busy, setBusy] = useState(!MODE.isShared);
+  const [error, setError] = useState<string | null>(null);
+  const validFieldId = FIELD_ID_RE.test(id);
+  const validEnvName = ENV_NAME_RE.test(env);
+  const locallyAvailable = !MODE.isShared;
+
+  useEffect(() => {
+    if (!locallyAvailable || !validFieldId) {
+      setBusy(false);
+      return;
+    }
+
+    let active = true;
+    getLocalSecretStatus(id)
+      .then((isReady) => {
+        if (active) setReady(isReady);
+      })
+      .catch((cause: unknown) => {
+        if (active) setError(cause instanceof Error ? cause.message : "Could not read secret status");
+      })
+      .finally(() => {
+        if (active) setBusy(false);
+      });
+    return () => { active = false; };
+  }, [id, locallyAvailable, validFieldId]);
+
+  const feedback = ready
+    ? `**${label}**\nSecret is ready. Field: \`${id}\`. Environment variable: \`${env}\`.\n`
+    : "";
+  useFeedback(`secret:${id}`, feedback, {
+    label,
+    required: required && locallyAvailable,
+  });
+
+  const store = async () => {
+    if (!value || !validFieldId || !validEnvName) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await storeLocalSecret(id, value);
+      setValue("");
+      setReady(true);
+    } catch (cause: unknown) {
+      setError(cause instanceof Error ? cause.message : "Could not store secret");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const clear = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      await clearLocalSecret(id);
+      setReady(false);
+    } catch (cause: unknown) {
+      setError(cause instanceof Error ? cause.message : "Could not clear secret");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (!locallyAvailable) {
+    return (
+      <div data-md="secretinput" data-md-label={label} className="-mx-4 px-4 py-3 my-1 rounded-lg bg-accent-amber-muted">
+        <div className="text-[13px] font-body font-medium text-text-primary">{label}</div>
+        <p className="text-[12px] font-body text-text-secondary mt-1">
+          Secret input is unavailable in shared canvases. Open this runbook on the author's local canvas daemon.
+        </p>
+      </div>
+    );
+  }
+
+  const configurationError = !validFieldId
+    ? "Secret field IDs may contain letters, numbers, dots, underscores, and hyphens."
+    : !validEnvName
+      ? "Environment variable names must use letters, numbers, and underscores and may not start with a number."
+      : null;
+
+  return (
+    <div data-md="secretinput" 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 justify-between gap-3 mb-2">
+        <div className="flex items-baseline gap-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>
+        <span className={`text-[11px] font-body ${ready ? "text-accent-green" : "text-text-tertiary"}`}>
+          {busy ? "Working…" : ready ? "Ready in memory" : "Not stored"}
+        </span>
+      </div>
+
+      <div className="flex gap-2">
+        <input
+          type="password"
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              void store();
+            }
+          }}
+          placeholder={placeholder || "Paste secret value"}
+          autoComplete="off"
+          spellCheck={false}
+          disabled={busy || !!configurationError}
+          className="min-w-0 flex-1 bg-bg-input text-[13px] font-mono text-text-primary rounded-lg px-3 py-2 focus:outline-none border border-border-subtle focus:border-border-hover placeholder:text-text-tertiary disabled:opacity-50 transition-colors"
+        />
+        <button
+          type="button"
+          onClick={() => void store()}
+          disabled={busy || !value || !!configurationError}
+          className="px-3 py-2 rounded-lg bg-btn-primary text-btn-primary-text text-[12px] font-body font-medium disabled:opacity-40 disabled:cursor-default"
+        >
+          {ready ? "Replace" : "Store"}
+        </button>
+        {ready && (
+          <button
+            type="button"
+            onClick={() => void clear()}
+            disabled={busy}
+            className="px-3 py-2 rounded-lg border border-border-subtle text-text-secondary text-[12px] font-body font-medium hover:border-border-hover disabled:opacity-40"
+          >
+            Clear
+          </button>
+        )}
+      </div>
+
+      <p className="text-[11px] font-body text-text-tertiary mt-1.5">
+        Stored only in daemon memory. The agent receives field {id} for {env}, not the value.
+      </p>
+      {(configurationError || error) && (
+        <p className="text-[11px] text-accent-red font-body mt-1">{configurationError || error}</p>
+      )}
+    </div>
+  );
+}

package/daemon/client/components/index.ts

@@ -11,6 +11,7 @@ export { Mermaid } from "./Mermaid";
 export { Diff } from "./Diff";
 export { Choice, MultiChoice } from "./Choice";
 export { UserInput, RangeInput } from "./UserInput";
+export { SecretInput } from "./SecretInput";
 export { ImageView } from "./Image";
 export { Markdown } from "./Markdown";
 export { useFeedback } from "#canvas/runtime";