agent-canvas 0.1.26 → 0.1.28

package/daemon/client/AnnotationSidebar.tsx

@@ -9,6 +9,7 @@ import { FileIcon } from "./FileIcon";
 import { autoResizeTextarea, RESPONSE_ANNOTATION_PATH } from "./utils";
 import { AnnotationEditor, ImageThumbnails } from "./AnnotationEditor";
 import { findAnnotationElement, scrollToAnnotation } from "./annotationDom";
+import { MODE, FS_AVAILABLE } from "./clientApi";
 
 interface AnnotationSidebarProps {
   onPreview: () => void;
@@ -32,11 +33,15 @@ export function AnnotationSidebar({ onPreview, onSubmit, collapseButton }: Annot
 }
 
 function FeedbackDisplay({ sessionId, revision, label, waitingForUpdate, feedbackConsumed, agentWatching, collapseButton }: { sessionId: string; revision: number; label: string; waitingForUpdate?: boolean; feedbackConsumed?: boolean; agentWatching?: boolean; collapseButton?: React.ReactNode }) {
+  const isSharedMode = MODE.isShared;
   const [feedback, setFeedback] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     setLoading(true);
+    // Shared mode has no prior local feedback to fetch — shared canvases
+    // are always one-off snapshots. Skip the call entirely.
+    if (!FS_AVAILABLE) { setFeedback(null); setLoading(false); return; }
     fetch(`/api/session/${sessionId}/revision/${revision}/feedback`)
       .then((r) => r.json())
       .then((data: any) => { setFeedback(data.feedback || null); setLoading(false); })
@@ -52,7 +57,7 @@ function FeedbackDisplay({ sessionId, revision, label, waitingForUpdate, feedbac
         {collapseButton}
       </div>
 
-      {waitingForUpdate && <WaitingBanner feedbackConsumed={feedbackConsumed} agentWatching={agentWatching} />}
+      {waitingForUpdate && !isSharedMode && <WaitingBanner feedbackConsumed={feedbackConsumed} agentWatching={agentWatching} />}
 
       <div className="flex-1 overflow-y-auto px-4">
         {loading ? (
@@ -158,6 +163,9 @@ function FeedbackDisplayContent({ sessionId, revision }: { sessionId: string; re
 
   useEffect(() => {
     setLoading(true);
+    // Shared mode has no prior local feedback to fetch — shared canvases
+    // are always one-off snapshots. Skip the call entirely.
+    if (!FS_AVAILABLE) { setFeedback(null); setLoading(false); return; }
     fetch(`/api/session/${sessionId}/revision/${revision}/feedback`)
       .then((r) => r.json())
       .then((data: any) => { setFeedback(data.feedback || null); setLoading(false); })
@@ -352,14 +360,18 @@ function AnnotationSidebarInner({ onPreview, onSubmit, agentWatching, collapseBu
   const hasContent = annotations.length > 0 || generalNote.trim().length > 0 || hasResponses || hasFeedback;
   const [validationError, setValidationError] = useState<string | null>(null);
 
-  const renderAnnotation = (ann: Annotation) => (
+  const renderAnnotation = (ann: Annotation) => {
+    const isRemote = ann.source === "remote";
+    return (
     <div
       key={ann.id}
       ref={(el) => { if (el) annRefs.current.set(ann.id, el); else annRefs.current.delete(ann.id); }}
       className={`group/ann relative px-3 py-2.5 transition-colors duration-150 ${
         activeAnnotationId === ann.id
           ? "bg-highlight-selected"
-          : "odd:bg-bg-elevated-half hover:bg-bg-input"
+          : isRemote
+            ? "bg-accent-purple-muted/30 hover:bg-accent-purple-muted/50"
+            : "odd:bg-bg-elevated-half hover:bg-bg-input"
       }`}
       onMouseEnter={() => handleMouseEnter(ann.id)}
       onMouseLeave={() => handleMouseLeave(ann.id)}
@@ -378,28 +390,48 @@ function AnnotationSidebarInner({ onPreview, onSubmit, agentWatching, collapseBu
         }
       }}
     >
+      {isRemote && ann.author && (
+        <div className="flex items-center gap-1.5 mb-1.5">
+          <span className="inline-flex items-center justify-center w-4 h-4 rounded-full bg-accent-purple text-white text-[9px] font-medium uppercase">
+            {ann.author.name.charAt(0)}
+          </span>
+          <span className="text-[11px] font-medium text-accent-purple font-body">
+            {ann.author.name}
+          </span>
+          <span className="text-[10px] text-text-tertiary font-body uppercase tracking-widest">
+            Remote
+          </span>
+        </div>
+      )}
+
       {/* Snippet quote */}
       <div className="text-[11px] text-text-tertiary italic line-clamp-2 mb-1.5 leading-snug font-body border-l-2 border-border-medium pl-2">
         {ann.snippet.length > 80 ? ann.snippet.slice(0, 80) + "..." : ann.snippet}
       </div>
 
-      {/* Editable note + images */}
-      <div onClick={(e) => e.stopPropagation()}>
-        <AnnotationEditor
-          note={ann.note}
-          onNoteChange={(note) => updateAnnotation(ann.id, note)}
-          images={ann.images || []}
-          onAddImage={(path) => addAnnotationImage(ann.id, path)}
-          onRemoveImage={(path) => removeAnnotationImage(ann.id, path)}
-          sessionId={sessionId}
-          autoResize
-          minHeight={20}
-          textareaClassName="w-full bg-transparent text-[13px] font-body text-text-primary resize-none focus:outline-none leading-relaxed p-0 border-none min-h-[20px]"
-          textareaStyle={{ height: "auto", overflow: "hidden" }}
-          placeholder="Add your note..."
-          attachButton="on-focus"
-        />
-      </div>
+      {/* Editable note + images — only for local annotations. Remote are read-only. */}
+      {isRemote ? (
+        <div className="text-[13px] font-body text-text-primary leading-relaxed whitespace-pre-wrap">
+          {ann.note}
+        </div>
+      ) : (
+        <div onClick={(e) => e.stopPropagation()}>
+          <AnnotationEditor
+            note={ann.note}
+            onNoteChange={(note) => updateAnnotation(ann.id, note)}
+            images={ann.images || []}
+            onAddImage={(path) => addAnnotationImage(ann.id, path)}
+            onRemoveImage={(path) => removeAnnotationImage(ann.id, path)}
+            sessionId={sessionId}
+            autoResize
+            minHeight={20}
+            textareaClassName="w-full bg-transparent text-[13px] font-body text-text-primary resize-none focus:outline-none leading-relaxed p-0 border-none min-h-[20px]"
+            textareaStyle={{ height: "auto", overflow: "hidden" }}
+            placeholder="Add your note..."
+            attachButton="on-focus"
+          />
+        </div>
+      )}
 
       {/* Actions — top right on hover */}
       <div className="absolute top-1.5 right-1.5 opacity-0 group-hover/ann:opacity-100 transition-opacity duration-100 flex items-center gap-0.5">
@@ -415,19 +447,22 @@ function AnnotationSidebarInner({ onPreview, onSubmit, agentWatching, collapseBu
             <circle cx="12" cy="12" r="3" /><path d="M12 2v4M12 18v4M2 12h4M18 12h4" />
           </svg>
         </button>
-        <button
-          onClick={(e) => { e.stopPropagation(); removeAnnotation(ann.id); }}
-          className="w-5 h-5 flex items-center justify-center rounded text-text-tertiary hover:text-accent-red hover:bg-accent-red-muted transition-colors"
-          title="Delete annotation"
-        >
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <polyline points="3 6 5 6 21 6"/>
-            <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
-          </svg>
-        </button>
+        {!isRemote && (
+          <button
+            onClick={(e) => { e.stopPropagation(); removeAnnotation(ann.id); }}
+            className="w-5 h-5 flex items-center justify-center rounded text-text-tertiary hover:text-accent-red hover:bg-accent-red-muted transition-colors"
+            title="Delete annotation"
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="3 6 5 6 21 6"/>
+              <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
+            </svg>
+          </button>
+        )}
       </div>
     </div>
-  );
+    );
+  };
 
   return (
     <div className="flex flex-col h-full">
@@ -438,10 +473,12 @@ function AnnotationSidebarInner({ onPreview, onSubmit, agentWatching, collapseBu
           {annotations.length > 0 && (
             <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-border-subtle text-[10px] font-medium text-text-secondary">{annotations.length}</span>
           )}
-          <span
-            className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${agentWatching ? "bg-accent-green" : "bg-accent-amber"}`}
-            title={agentWatching ? "Agent connected" : "Agent disconnected"}
-          />
+          {!MODE.isShared && (
+            <span
+              className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${agentWatching ? "bg-accent-green" : "bg-accent-amber"}`}
+              title={agentWatching ? "Agent connected" : "Agent disconnected"}
+            />
+          )}
         </span>
         {collapseButton}
       </div>

package/daemon/client/App.tsx

@@ -18,9 +18,49 @@ import { generateAnnotationId, RESPONSE_ANNOTATION_PATH } from "./utils";
 import { wrapRangeWithMark, restoreMarks, renameMarkId, unwrapMarks, updateAllMarkStates } from "./highlightRange";
 import { extractContext } from "./annotationContext";
 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";
 
 export type ActiveView = { type: "overview" } | { type: "canvas"; filename: string } | { type: "file"; path: string };
 
+/**
+ * Wire shape of a remote feedback entry as delivered by the daemon
+ * (polled from CF Worker). Mirrors RemoteFeedbackEntry on the server side.
+ */
+interface RemoteFeedbackEntry {
+  id: string;
+  shareId: string;
+  revision: number;
+  submittedAt: string;
+  author: { id: string; name: string };
+  annotations: Array<Omit<Annotation, "source" | "author">>;
+  generalNote?: string;
+}
+
+/**
+ * Flatten an array of remote feedback entries into a list of Annotations
+ * tagged with author + source so they can be rendered read-only alongside
+ * the local author's annotations. The `generalNote` field is intentionally
+ * dropped for now — the MVP surfaces only spatial (highlight-anchored)
+ * feedback. General notes could be surfaced in a "remote feedback" panel
+ * in a later iteration.
+ */
+function remoteFeedbackToAnnotations(entries: RemoteFeedbackEntry[]): Annotation[] {
+  const out: Annotation[] = [];
+  for (const entry of entries) {
+    for (const ann of entry.annotations) {
+      out.push({
+        ...ann,
+        source: "remote",
+        author: entry.author,
+      });
+    }
+  }
+  return out;
+}
+
 export interface CanvasFileInfo {
   filename: string;
   diffStats?: { added: number; removed: number };
@@ -176,7 +216,11 @@ function RevisionSelector() {
 }
 
 function App() {
-  const sessionId = window.location.pathname.replace("/s/", "") || "";
+  // In shared mode the "sessionId" as far as the annotation system cares is
+  // the shareId (stable identifier for localStorage scoping). In local mode
+  // it's the real daemon session id from the URL.
+  const sessionId = MODE.isShared ? MODE.shareId : MODE.sessionId;
+  const isSharedMode = MODE.isShared;
   const [currentRevision, setCurrentRevision] = useState(1);
   const [selectedRevision, setSelectedRevision] = useState(1);
   const [revisions, setRevisions] = useState<RevisionInfo[]>([]);
@@ -193,6 +237,21 @@ function App() {
   const [mobileSidebar, setMobileSidebar] = useState(false);
   const [leftCollapsed, setLeftCollapsed] = useState(false);
   const [rightCollapsed, setRightCollapsed] = useState(false);
+  const [shareDialogOpen, setShareDialogOpen] = useState(false);
+  const [shares, setShares] = useState<ShareEntry[]>([]);
+  const [shareEnabled, setShareEnabled] = useState(false);
+  // Remote annotations keyed by revision — merged read-only into the
+  // annotation provider so reviewer feedback shows up as extra annotations.
+  const [remoteAnnotationsByRev, setRemoteAnnotationsByRev] = useState<Map<number, Annotation[]>>(new Map());
+  // Shared-mode state
+  const [reviewerDialogOpen, setReviewerDialogOpen] = useState(false);
+  const [pendingFeedback, setPendingFeedback] = useState<string | null>(null);
+  const [toast, setToast] = useState<{ kind: "error" | "success"; message: string } | null>(null);
+  useEffect(() => {
+    if (!toast) return;
+    const t = setTimeout(() => setToast(null), 4000);
+    return () => clearTimeout(t);
+  }, [toast]);
 
   // Dynamic document title
   useEffect(() => {
@@ -251,7 +310,7 @@ function App() {
   // Fetch initial meta
   useEffect(() => {
     if (!sessionId) return;
-    fetch(`/api/session/${sessionId}/meta`)
+    fetch(metaUrl())
       .then((r) => r.json())
       .then((data: any) => {
         if (data.currentRevision) {
@@ -274,12 +333,42 @@ function App() {
           });
         }
         if (data.projectRoot) setProjectRoot(data.projectRoot);
+        if (Array.isArray(data.shares)) setShares(data.shares);
+        setShareEnabled(!!data.shareEnabled);
       })
       .catch(() => {});
   }, [sessionId]);
 
+  // Load any already-persisted remote feedback for the currently selected
+  // revision on first render. New entries arrive via WebSocket broadcast.
+  // This only runs in local (daemon) mode — shared mode has no notion of
+  // "previously polled remote feedback": the reviewer IS the remote.
+  useEffect(() => {
+    if (!sessionId || !selectedRevision || isSharedMode) return;
+    fetch(`/api/session/${sessionId}/revision/${selectedRevision}/remote-feedback`)
+      .then((r) => r.json())
+      .then((data: any) => {
+        if (!Array.isArray(data.entries)) return;
+        const anns = remoteFeedbackToAnnotations(data.entries);
+        setRemoteAnnotationsByRev((prev) => {
+          const next = new Map(prev);
+          next.set(selectedRevision, anns);
+          return next;
+        });
+      })
+      .catch(() => {});
+  }, [sessionId, selectedRevision, isSharedMode]);
+
   useEffect(() => {
     if (!sessionId) return;
+    if (!WS_AVAILABLE) {
+      // In shared mode there is no WebSocket — the worker only exposes HTTP.
+      // Live updates and watcher status are unavailable. The canvas is a
+      // static snapshot from the author's perspective, so "connected" is
+      // effectively always true.
+      setConnected(true);
+      return;
+    }
     let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
     const connect = () => {
       const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
@@ -321,6 +410,19 @@ function App() {
           if (data.type === "watcher-status") {
             setAgentWatching(!!data.watching);
           }
+          if (data.type === "remote-feedback") {
+            const rev = data.revision as number;
+            const entries = (data.entries || []) as RemoteFeedbackEntry[];
+            const anns = remoteFeedbackToAnnotations(entries);
+            setRemoteAnnotationsByRev((prev) => {
+              const next = new Map(prev);
+              const existing = next.get(rev) || [];
+              const seenIds = new Set(existing.map((a) => a.id));
+              const merged = [...existing, ...anns.filter((a) => !seenIds.has(a.id))];
+              next.set(rev, merged);
+              return next;
+            });
+          }
         } catch {}
       };
     };
@@ -328,14 +430,50 @@ function App() {
     return () => { if (reconnectTimer) clearTimeout(reconnectTimer); wsRef.current?.close(); };
   }, [sessionId]);
 
-  const handleSubmit = useCallback((feedback: string) => {
+  const submitSharedFeedbackWithIdentity = useCallback(async (feedback: string, identity: { id: string; name: string }) => {
+    try {
+      const raw = localStorage.getItem(`canvas:${sessionId}:rev:${selectedRevision}`);
+      let structuredAnnotations: any[] = [];
+      if (raw) {
+        try {
+          const parsed = JSON.parse(raw);
+          structuredAnnotations = (parsed.annotations || []).filter((a: any) => a.source !== "remote");
+        } catch {}
+      }
+      await submitSharedFeedback({
+        author: identity,
+        revision: selectedRevision,
+        annotations: structuredAnnotations,
+        generalNote: feedback,
+      });
+      setPreviewOpen(false);
+      setToast({ kind: "success", message: "Feedback submitted. The canvas author will see it shortly." });
+    } catch (e: any) {
+      setToast({ kind: "error", message: `Failed to submit feedback: ${e.message || e}` });
+    }
+  }, [sessionId, selectedRevision]);
+
+  const handleSubmit = useCallback(async (feedback: string) => {
+    if (isSharedMode) {
+      // Shared mode: POST feedback to the worker via the reviewer identity
+      // modal flow. If identity already cached, skip the modal.
+      const identity = getReviewerIdentity();
+      if (!identity) {
+        setPendingFeedback(feedback);
+        setReviewerDialogOpen(true);
+        return;
+      }
+      await submitSharedFeedbackWithIdentity(feedback, identity);
+      return;
+    }
+
     if (wsRef.current?.readyState === WebSocket.OPEN) {
       wsRef.current.send(JSON.stringify({ type: "submit", feedback }));
       setPreviewOpen(false);
       // Server will broadcast revision-updated with hasFeedback: true
       // which triggers isReadOnly via revisions state
     }
-  }, []);
+  }, [isSharedMode, submitSharedFeedbackWithIdentity]);
 
   if (!sessionId) {
     return <div className="flex items-center justify-center h-screen text-text-tertiary font-body">No session selected.</div>;
@@ -344,7 +482,13 @@ 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}>
+        <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">
@@ -371,8 +515,9 @@ function App() {
                 {/* Mobile top bar — only visible < lg */}
                 <div className="lg:hidden sticky top-0 z-20 flex items-center justify-between px-4 py-2 border-b border-border-subtle bg-bg-surface">
                   <div className="flex items-center gap-2">
-                    <SessionSwitcher currentSessionId={sessionId} projectRoot={projectRoot} />
-                    <span className={`w-1.5 h-1.5 rounded-full ${connected ? "bg-accent-green" : "bg-accent-red"}`} />
+                    {!isSharedMode && <SessionSwitcher currentSessionId={sessionId} projectRoot={projectRoot} />}
+                    {isSharedMode && <span className="text-[11px] text-text-tertiary font-body">Shared canvas</span>}
+                    {!isSharedMode && <span className={`w-1.5 h-1.5 rounded-full ${connected ? "bg-accent-green" : "bg-accent-red"}`} />}
                   </div>
                   <div className="flex items-center gap-1">
                     <RevisionSelector />
@@ -400,6 +545,15 @@ function App() {
                 {/* Individual canvas view — only mounted when active */}
                 {activeView.type === "canvas" && canvasFiles.includes(activeView.filename) && (
                   <div className="relative max-w-[720px] mx-auto px-6 pt-12 pb-32">
+                    {shareEnabled && (
+                      <div className="absolute top-3 right-12 z-10">
+                        <ShareButton
+                          onClick={() => setShareDialogOpen(true)}
+                          hasShare={shares.some((s) => s.revision === selectedRevision)}
+                          title={shares.some((s) => s.revision === selectedRevision) ? "Manage share link" : "Share this revision"}
+                        />
+                      </div>
+                    )}
                     <button
                       onClick={() => {
                         const planContent = document.querySelector(`[data-canvas-file="${activeView.filename}"] .plan-content`);
@@ -459,6 +613,54 @@ function App() {
               )}
 
               <ResponsePreview open={previewOpen} onClose={() => setPreviewOpen(false)} onSubmit={handleSubmit} />
+
+              <ShareDialog
+                sessionId={sessionId}
+                revision={selectedRevision}
+                open={shareDialogOpen}
+                shareEnabled={shareEnabled}
+                existingShares={shares}
+                onClose={() => setShareDialogOpen(false)}
+                onShareCreated={(share) => {
+                  setShares((prev) => [...prev.filter((s) => s.shareId !== share.shareId), share]);
+                  setToast({ kind: "success", message: "Share link created. Copy and send it to reviewers." });
+                }}
+                onShareRevoked={(shareId) => {
+                  setShares((prev) => prev.filter((s) => s.shareId !== shareId));
+                  setToast({ kind: "success", message: "Share link revoked." });
+                }}
+              />
+
+              <ReviewerIdentityDialog
+                open={reviewerDialogOpen}
+                onClose={() => { setReviewerDialogOpen(false); setPendingFeedback(null); }}
+                onSubmit={async (name) => {
+                  const identity = setReviewerIdentity(name);
+                  setReviewerDialogOpen(false);
+                  if (pendingFeedback !== null) {
+                    await submitSharedFeedbackWithIdentity(pendingFeedback, identity);
+                    setPendingFeedback(null);
+                  }
+                }}
+              />
+
+              {toast && (
+                <div
+                  className={`fixed bottom-4 left-1/2 -translate-x-1/2 z-50 px-4 py-2.5 rounded-lg shadow-lg text-[13px] font-body font-medium flex items-center gap-2 ${
+                    toast.kind === "error"
+                      ? "bg-accent-red text-white"
+                      : "bg-accent-green text-white"
+                  }`}
+                >
+                  {toast.message}
+                  <button
+                    onClick={() => setToast(null)}
+                    className="ml-2 opacity-70 hover:opacity-100"
+                  >
+                    &#x2715;
+                  </button>
+                </div>
+              )}
             </div>
           </ActiveViewCtx.Provider>
           </ActiveViewContext.Provider>
@@ -469,6 +671,7 @@ function App() {
 }
 
 function LeftPanel({ sessionId, projectRoot, connected, onMobileSidebar, collapsed, onToggle }: { sessionId: string; projectRoot?: string; connected: boolean; onMobileSidebar: () => void; collapsed: boolean; onToggle: () => void }) {
+  const isSharedMode = MODE.isShared;
   return (
     <>
       {/* Collapsed toggle button */}
@@ -491,8 +694,14 @@ function LeftPanel({ sessionId, projectRoot, connected, onMobileSidebar, collaps
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="text-text-tertiary flex-shrink-0">
               <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
             </svg>
-            <SessionSwitcher currentSessionId={sessionId} projectRoot={projectRoot} />
-            <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${connected ? "bg-accent-green" : "bg-accent-red"}`} />
+            {isSharedMode ? (
+              <span className="text-[12px] font-body text-text-secondary truncate flex-1">Shared canvas</span>
+            ) : (
+              <>
+                <SessionSwitcher currentSessionId={sessionId} projectRoot={projectRoot} />
+                <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${connected ? "bg-accent-green" : "bg-accent-red"}`} />
+              </>
+            )}
             <button
               onClick={onToggle}
               className="ml-auto w-6 h-6 flex items-center justify-center rounded text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated transition-colors"
@@ -871,7 +1080,7 @@ function ContentTabs() {
 
       {/* Right-aligned actions */}
       <div className="ml-auto flex items-center gap-1 flex-shrink-0">
-        {activeView.type === "file" && (
+        {activeView.type === "file" && FS_AVAILABLE && (
           <button
             onClick={async () => {
               const path = activeView.path;

package/daemon/client/FileBrowser.tsx

@@ -4,6 +4,7 @@ import { useAnnotations } from "./AnnotationProvider";
 import { ActiveViewContext } from "./App";
 import { FileIcon } from "./FileIcon";
 import { RESPONSE_ANNOTATION_PATH } from "./utils";
+import { FS_AVAILABLE } from "./clientApi";
 
 interface TreeEntry { name: string; type: "file" | "dir"; }
 interface DirState { entries: TreeEntry[]; expanded: boolean; loaded: boolean; }
@@ -15,6 +16,21 @@ export function FileBrowser({ embedded }: { embedded?: boolean } = {}) {
   const [collapsed, setCollapsed] = useState(false);
   const [dirs, setDirs] = useState<Record<string, DirState>>({});
 
+  // Shared-mode canvases have no filesystem backing — the daemon's /api/tree
+  // endpoint isn't reachable. Render a simple placeholder so reviewers see
+  // something informative instead of a broken tree.
+  if (!FS_AVAILABLE) {
+    return (
+      <div className={embedded ? "px-4 py-3" : "p-4"}>
+        <div className="text-[11px] uppercase tracking-widest text-text-tertiary font-body mb-2">Files</div>
+        <p className="text-[11px] text-text-tertiary font-body leading-relaxed">
+          File browsing is not available in shared view. File previews embedded
+          in the canvas still work.
+        </p>
+      </div>
+    );
+  }
+
   const { annCountMap, annotatedFiles } = useMemo(() => {
     const map = new Map<string, number>();
     for (const a of annotations) {

package/daemon/client/FileViewer.tsx

@@ -6,6 +6,7 @@ import { wrapRangeWithMark } from "./highlightRange";
 import { LANG_MAP } from "../langMap";
 import { generateAnnotationId } from "./utils";
 import { useTextAnnotation } from "./useTextAnnotation";
+import { FS_AVAILABLE } from "./clientApi";
 
 /** Walk up from a node to find the parent line div with data-line-num */
 function findLineDiv(node: Node): HTMLElement | null {
@@ -47,6 +48,23 @@ interface FileViewerProps {
 }
 
 export function FileViewer({ path }: FileViewerProps) {
+  if (!FS_AVAILABLE) {
+    return (
+      <div className="max-w-[720px] mx-auto px-6 pt-12 pb-32">
+        <div className="p-4 rounded-lg border border-border-subtle bg-bg-surface">
+          <div className="text-[11px] uppercase tracking-widest text-text-tertiary font-body mb-2">
+            File not available
+          </div>
+          <p className="text-[13px] text-text-secondary font-body leading-relaxed">
+            Opening <code className="px-1 py-0.5 rounded bg-bg-elevated text-text-primary text-[11px]">{path}</code> requires
+            filesystem access, which isn't available in shared view. If the
+            canvas author wanted this file visible, they should embed it as
+            a <code className="px-1 py-0.5 rounded bg-bg-elevated text-text-primary text-[11px]">&lt;FilePreview&gt;</code> in the canvas.
+          </p>
+        </div>
+      </div>
+    );
+  }
   const sessionId = useContext(SessionContext);
   const { annotations, addAnnotationWithId, activeAnnotationId, setActiveAnnotationId } = useAnnotations();
   const [content, setContent] = useState<string | null>(null);

package/daemon/client/PlanRenderer.tsx

@@ -6,6 +6,7 @@ import { extractContext } from "./annotationContext";
 import { AnnotationCreatePopover, AnnotationEditPopover } from "./Popover";
 import { generateAnnotationId } from "./utils";
 import { useTextAnnotation } from "./useTextAnnotation";
+import { canvasJsUrl } 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']";
@@ -40,8 +41,8 @@ export function PlanRenderer({ revision, filename }: PlanRendererProps) {
     setLoading(true);
     setError(null);
     setFocusedBlockIndex(null);
-    const jsName = filename.replace(/\.jsx$/, ".js");
-    import(`/api/session/${sessionId}/canvas/${encodeURIComponent(jsName)}?rev=${revision}&t=${Date.now()}`)
+    void sessionId; // sessionId is implied by the URL in clientApi (shared or local)
+    import(/* @vite-ignore */ canvasJsUrl(filename, revision))
       .then((mod) => { setPlanComponent(() => mod.default); setLoading(false); })
       .catch((e) => { setError(e.message); setLoading(false); });
   }, [sessionId, revision, filename]);