@fabrika/canvas-kernel 0.1.44

package/src/client/AnnotationProvider.tsx

@@ -0,0 +1,294 @@
+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 { annotationDraftKey, clearPersistedDraft, type AnnotationDraftPhase } from "./annotationDraft";
+import { canPruneResponses, pruneStaleResponses } from "./generateMarkdown";
+import { generateAnnotationId } from "./utils";
+
+// Re-export types for convenience
+export type { Annotation, AnnotationContext, PlanResponse, FeedbackEntry, AnnotationContextValue };
+export { useAnnotations } from "#canvas/runtime";
+
+export interface PersistedState {
+  annotations: Annotation[];
+  generalNote: string;
+  responses: [string, PlanResponse][];
+  feedbackEntries?: [string, FeedbackEntry][];
+}
+
+interface AnnotationProviderProps {
+  sessionId: string;
+  revision: number;
+  isReadOnly: boolean;
+  draftPhase: AnnotationDraftPhase;
+  /** Remote annotations fetched from shared views. Merged read-only into
+   *  the annotation list so they render alongside the author's own. */
+  remoteAnnotations?: Annotation[];
+  /** Canvas files this revision is made of. Supplying it enables pruning of
+   *  answers to questions the revision no longer asks; omit it and every
+   *  answer is submitted, which is what a host without canvas tabs wants. */
+  canvasFiles?: readonly string[];
+  /** Server-authoritative persistence. When supplied, the draft is loaded and
+   *  saved through these instead of localStorage, so it survives reloads and
+   *  follows the author across browsers. Omit for the localStorage default. */
+  loadState?: (sessionId: string, revision: number, phase: AnnotationDraftPhase) => Promise<PersistedState | null>;
+  saveState?: (sessionId: string, revision: number, state: PersistedState, phase: AnnotationDraftPhase) => void;
+  children: React.ReactNode;
+}
+
+function loadPersisted(sessionId: string, revision: number, phase: AnnotationDraftPhase): PersistedState | null {
+  try {
+    const raw = localStorage.getItem(annotationDraftKey(sessionId, revision, phase));
+    if (!raw) return null;
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+
+function savePersisted(sessionId: string, revision: number, phase: AnnotationDraftPhase, state: PersistedState) {
+  try {
+    localStorage.setItem(annotationDraftKey(sessionId, revision, phase), JSON.stringify(state));
+  } catch {}
+}
+
+/** What the reader has been shown for one draft. Stamped with the draft it
+ *  belongs to rather than cleared in an effect: response controls register from
+ *  their own effects, which run before the provider's, so an effect-based reset
+ *  would wipe registrations that already happened. */
+interface SeenState {
+  draft: string;
+  responseIds: Set<string>;
+  canvases: Set<string>;
+}
+
+function seenFor(draft: string): SeenState {
+  return { draft, responseIds: new Set(), canvases: new Set() };
+}
+
+export function AnnotationProvider({ sessionId, revision, isReadOnly, draftPhase, remoteAnnotations, canvasFiles, loadState, saveState, children }: AnnotationProviderProps) {
+  // Server-authoritative persistence loads asynchronously, so that mode starts
+  // empty and hydrates in an effect. localStorage mode seeds synchronously.
+  const serverMode = !!loadState;
+  const seed = serverMode ? null : loadPersisted(sessionId, revision, draftPhase);
+
+  const [localAnnotations, setAnnotations] = useState<Annotation[]>(() =>
+    (seed?.annotations ?? []).map((a) => ({ ...a, source: a.source ?? "local" as const })),
+  );
+
+  // Merge local + remote annotations. Remote annotations are always
+  // rendered read-only; mutation helpers below operate on localAnnotations
+  // only so they silently no-op on remote ids.
+  const annotations = useMemo<Annotation[]>(() => {
+    if (!remoteAnnotations || remoteAnnotations.length === 0) return localAnnotations;
+    const localIds = new Set(localAnnotations.map((a) => a.id));
+    const filtered = remoteAnnotations.filter((a) => !localIds.has(a.id));
+    return [...localAnnotations, ...filtered.map((a) => ({ ...a, source: "remote" as const }))];
+  }, [localAnnotations, remoteAnnotations]);
+  const [generalNote, setGeneralNote] = useState(() => seed?.generalNote ?? "");
+  const [activeAnnotationId, setActiveAnnotationId] = useState<string | null>(null);
+  const [responses, setResponses] = useState<Map<string, PlanResponse>>(() =>
+    seed?.responses ? new Map(seed.responses) : new Map(),
+  );
+  const draftId = `${sessionId}:${revision}:${draftPhase}`;
+  const draftIdRef = useRef(draftId);
+  draftIdRef.current = draftId;
+  const [seen, setSeen] = useState<SeenState>(() => seenFor(draftId));
+  const [feedbackEntries, setFeedbackEntries] = useState<Map<string, FeedbackEntry>>(() =>
+    seed?.feedbackEntries ? new Map(seed.feedbackEntries) : new Map(),
+  );
+
+  // Re-hydrate when the draft identity changes. Hosts that remount the provider
+  // per revision (via a key) get this for free from the initializers, but hosts
+  // that keep it mounted need it here — otherwise one revision's answers leak
+  // into the next and the persist effect writes them over the new revision's
+  // saved draft. `hydrated` gates that effect so an async server load cannot be
+  // clobbered by the empty initial state.
+  const [hydrated, setHydrated] = useState(!serverMode);
+  useEffect(() => {
+    const apply = (saved: PersistedState | null) => {
+      setAnnotations((saved?.annotations ?? []).map((a) => ({ ...a, source: a.source ?? "local" as const })));
+      setGeneralNote(saved?.generalNote ?? "");
+      setResponses(saved?.responses ? new Map(saved.responses) : new Map());
+      setFeedbackEntries(saved?.feedbackEntries ? new Map(saved.feedbackEntries) : new Map());
+      setActiveAnnotationId(null);
+    };
+    if (serverMode) {
+      let cancelled = false;
+      setHydrated(false);
+      loadState!(sessionId, revision, draftPhase).then((saved) => {
+        if (cancelled) return;
+        apply(saved);
+        setHydrated(true);
+      });
+      return () => { cancelled = true; };
+    }
+    apply(loadPersisted(sessionId, revision, draftPhase));
+    setHydrated(true);
+    return undefined;
+  }, [sessionId, revision, draftPhase, serverMode, loadState]);
+
+  // Post-feedback drafts save immediately so a new revision can carry the latest edit.
+  const persistTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    if (isReadOnly && draftPhase !== "next") return;
+    if (!hydrated) return;
+    if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
+    const state: PersistedState = {
+      // Persist only local annotations — remote ones are re-fetched on load.
+      annotations: localAnnotations,
+      generalNote,
+      responses: Array.from(responses.entries()),
+      feedbackEntries: Array.from(feedbackEntries.entries()),
+    };
+    const persist = () => {
+      if (saveState) saveState(sessionId, revision, state, draftPhase);
+      else savePersisted(sessionId, revision, draftPhase, state);
+    };
+    if (draftPhase === "next") {
+      persist();
+      return;
+    }
+    persistTimerRef.current = setTimeout(persist, 300);
+    return () => { if (persistTimerRef.current) clearTimeout(persistTimerRef.current); };
+  }, [localAnnotations, generalNote, responses, feedbackEntries, sessionId, revision, isReadOnly, draftPhase, hydrated, saveState]);
+
+  const addAnnotationWithId = useCallback((id: string, snippet: string, note: string, filePath?: string, context?: AnnotationContext, images?: string[], canvasFile?: string) => {
+    setAnnotations((prev) => [...prev, { id, snippet, note, createdAt: new Date().toISOString(), filePath, context, ...(images?.length ? { images } : {}), ...(canvasFile ? { canvasFile } : {}) }]);
+  }, []);
+
+  const addAnnotation = useCallback((snippet: string, note: string, filePath?: string) => {
+    addAnnotationWithId(generateAnnotationId(), snippet, note, filePath);
+  }, [addAnnotationWithId]);
+
+  const updateAnnotation = useCallback((id: string, note: string) => {
+    setAnnotations((prev) => prev.map((a) => (a.id === id ? { ...a, note } : a)));
+  }, []);
+
+  const removeAnnotation = useCallback((id: string) => {
+    removeMarksFromDom(id);
+    setAnnotations((prev) => prev.filter((a) => a.id !== id));
+    setActiveAnnotationId((prev) => (prev === id ? null : prev));
+  }, []);
+
+  const addAnnotationImage = useCallback((id: string, imagePath: string) => {
+    setAnnotations((prev) => prev.map((a) =>
+      a.id === id ? { ...a, images: [...(a.images || []), imagePath] } : a
+    ));
+  }, []);
+
+  const removeAnnotationImage = useCallback((id: string, imagePath: string) => {
+    setAnnotations((prev) => prev.map((a) =>
+      a.id === id ? { ...a, images: (a.images || []).filter((p) => p !== imagePath) } : a
+    ));
+  }, []);
+
+  const setResponse = useCallback((id: string, response: PlanResponse) => {
+    setResponses((prev) => {
+      const next = new Map(prev);
+      next.set(id, response);
+      return next;
+    });
+  }, []);
+
+  // Both registrations accumulate for the life of one draft and are idempotent,
+  // so re-running the caller's effect cannot loop.
+  const registerResponse = useCallback((id: string) => {
+    setSeen((prev) => {
+      const base = prev.draft === draftIdRef.current ? prev : seenFor(draftIdRef.current);
+      if (base.responseIds.has(id)) return base;
+      return { ...base, responseIds: new Set(base.responseIds).add(id) };
+    });
+  }, []);
+
+  const registerCanvasRendered = useCallback((filename: string) => {
+    setSeen((prev) => {
+      const base = prev.draft === draftIdRef.current ? prev : seenFor(draftIdRef.current);
+      if (base.canvases.has(filename)) return base;
+      return { ...base, canvases: new Set(base.canvases).add(filename) };
+    });
+  }, []);
+
+  // Answers survive until a canvas proves the question is gone. `seen` can lag
+  // the draft by a render when the host keeps the provider mounted across
+  // revisions, and stale evidence must never prune.
+  const current = seen.draft === draftId ? seen : null;
+  const submittableResponses = useMemo(() => {
+    if (!current || !canPruneResponses(canvasFiles, current.canvases)) return responses;
+    return pruneStaleResponses(responses, current.responseIds);
+  }, [current, canvasFiles, responses]);
+
+  const setFeedbackEntry = useCallback((id: string, entry: FeedbackEntry) => {
+    setFeedbackEntries((prev) => {
+      const existing = prev.get(id);
+      if (existing && existing.markdown === entry.markdown && existing.label === entry.label && existing.required === entry.required) {
+        return prev; // same reference → no re-render
+      }
+      const next = new Map(prev);
+      next.set(id, entry);
+      return next;
+    });
+  }, []);
+
+  const removeFeedbackEntry = useCallback((id: string) => {
+    setFeedbackEntries((prev) => {
+      if (!prev.has(id)) return prev;
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+
+  const clearAll = useCallback(() => {
+    for (const mark of document.querySelectorAll("[data-annotation-id]")) {
+      unwrapMark(mark as HTMLElement);
+    }
+    setAnnotations([]);
+    setGeneralNote("");
+    setActiveAnnotationId(null);
+    setResponses(new Map());
+    setFeedbackEntries(new Map());
+    if (saveState) {
+      saveState(sessionId, revision, { annotations: [], generalNote: "", responses: [], feedbackEntries: [] }, draftPhase);
+    } else if (draftPhase === "next") {
+      localStorage.removeItem(annotationDraftKey(sessionId, revision, draftPhase));
+    } else {
+      clearPersistedDraft(localStorage, sessionId, revision);
+    }
+  }, [sessionId, revision, draftPhase, saveState]);
+
+  return (
+    <AnnotationCtx.Provider
+      value={{
+        annotations, addAnnotation, addAnnotationWithId, updateAnnotation, removeAnnotation, addAnnotationImage, removeAnnotationImage,
+        generalNote, setGeneralNote, clearAll,
+        activeAnnotationId, setActiveAnnotationId,
+        responses, setResponse, submittableResponses,
+        registerResponse, registerCanvasRendered,
+        feedbackEntries, setFeedbackEntry, removeFeedbackEntry,
+        isReadOnly,
+      }}
+    >
+      {children}
+    </AnnotationCtx.Provider>
+  );
+}
+
+function removeMarksFromDom(id: string) {
+  const marks = document.querySelectorAll(`[data-annotation-id="${id}"]`);
+  for (const mark of marks) unwrapMark(mark as HTMLElement);
+}
+
+function unwrapMark(mark: HTMLElement) {
+  const parent = mark.parentNode;
+  if (!parent) return;
+  // A region overlay wraps no text; swapping it for its text content would
+  // leave a stray empty node inside the image.
+  if (mark.tagName !== "MARK") {
+    parent.removeChild(mark);
+    return;
+  }
+  const text = document.createTextNode(mark.textContent || "");
+  parent.replaceChild(text, mark);
+  parent.normalize();
+}

package/src/client/AnnotationSidebar.tsx

@@ -0,0 +1,374 @@
+import React, { useEffect, useState, useContext, useMemo, useCallback } from "react";
+import { useAnnotations } from "./AnnotationProvider";
+import type { Annotation } from "./AnnotationProvider";
+import { generateMarkdown, hasValue, getMissingRequiredLabels } from "./generateMarkdown";
+import { RevisionContext, ActiveViewContext } from "./appContext";
+import { SessionContext } from "#canvas/runtime";
+import { MarkdownPreview } from "./ResponsePreview";
+import { FileIcon } from "./FileIcon";
+import { fileAnnotationPath, RESPONSE_ANNOTATION_PATH } from "./utils";
+import { AnnotationList } from "./AnnotationList";
+import { AnnotationDraftFooter } from "./AnnotationDraftFooter";
+import { findAnnotationElement, scrollToAnnotation } from "./annotationDom";
+import { useCanvasHost } from "./hostContext";
+import { ResponsePreview } from "./ResponsePreview";
+
+/**
+ * The canvas host's sidebar: the reusable annotation list and draft footer,
+ * wrapped in the chrome only a canvas has — revisions, per-revision feedback,
+ * canvas files, agent responses, and the wait for the agent to come back.
+ */
+
+interface AnnotationSidebarProps {
+  onSubmit: (feedback: string) => void;
+  collapseButton?: React.ReactNode;
+}
+
+export function AnnotationSidebar({ onSubmit, collapseButton }: AnnotationSidebarProps) {
+  const { isReadOnly, selectedRevision, currentRevision, revisions, agentWatching } = useContext(RevisionContext);
+  const sessionId = useContext(SessionContext);
+  const selectedRevInfo = revisions.find((r) => r.revision === selectedRevision);
+  const isCurrentButSubmitted = isReadOnly && selectedRevision === currentRevision;
+  const feedbackConsumed = !!selectedRevInfo?.feedbackConsumed;
+  const roundLabel = selectedRevInfo?.label || `Round ${selectedRevision}`;
+
+  if (isReadOnly) {
+    return <ReadOnlyAnnotationSidebar sessionId={sessionId} revision={selectedRevision} label={roundLabel} waitingForUpdate={isCurrentButSubmitted} feedbackConsumed={feedbackConsumed} agentWatching={agentWatching} collapseButton={collapseButton} />;
+  }
+
+  return <AnnotationSidebarInner onSubmit={onSubmit} agentWatching={agentWatching} collapseButton={collapseButton} />;
+}
+
+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 host = useCanvasHost();
+  const isSharedMode = host.isShared;
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="px-4 py-3 flex items-center justify-between flex-shrink-0">
+        <span className="text-[11px] font-medium uppercase tracking-widest text-text-tertiary font-body">
+          {waitingForUpdate ? "Feedback sent" : `Feedback — ${label}`}
+        </span>
+        {collapseButton}
+      </div>
+
+      {waitingForUpdate && !isSharedMode && <WaitingBanner feedbackConsumed={feedbackConsumed} agentWatching={agentWatching} />}
+
+      <FeedbackDisplayContent sessionId={sessionId} revision={revision} />
+    </div>
+  );
+}
+
+function WaitingBanner({ feedbackConsumed, agentWatching }: { feedbackConsumed?: boolean; agentWatching?: boolean }) {
+  if (feedbackConsumed) {
+    return (
+      <div className="mx-4 mb-3 px-3 py-2.5 rounded-lg bg-accent-green-muted flex items-center gap-2 flex-shrink-0">
+        <span className="w-2 h-2 rounded-full bg-accent-green animate-pulse" />
+        <span className="text-[12px] font-body text-accent-green">Feedback received — waiting for next revision...</span>
+      </div>
+    );
+  }
+  if (agentWatching) {
+    return (
+      <div className="mx-4 mb-3 px-3 py-2.5 rounded-lg bg-accent-blue-muted flex items-center gap-2 flex-shrink-0">
+        <span className="w-2 h-2 rounded-full bg-accent-blue animate-pulse" />
+        <span className="text-[12px] font-body text-accent-blue">Waiting for agent to pick up feedback...</span>
+      </div>
+    );
+  }
+  return (
+    <div className="mx-4 mb-3 px-3 py-2.5 rounded-lg bg-accent-amber-muted flex items-center gap-2 flex-shrink-0">
+      <span className="w-2 h-2 rounded-full bg-accent-amber" />
+      <span className="text-[12px] font-body text-accent-amber">Agent disconnected — tell Claude to check feedback</span>
+    </div>
+  );
+}
+
+type ReadOnlyTab = "feedback" | "annotations";
+
+function ReadOnlyAnnotationSidebar({ sessionId, revision, label, waitingForUpdate, feedbackConsumed, agentWatching, collapseButton }: { sessionId: string; revision: number; label: string; waitingForUpdate?: boolean; feedbackConsumed?: boolean; agentWatching?: boolean; collapseButton?: React.ReactNode }) {
+  const { annotations, generalNote } = useAnnotations();
+  const hasAnnotations = annotations.length > 0 || generalNote.trim().length > 0;
+  const [activeTab, setActiveTab] = useState<ReadOnlyTab>("feedback");
+
+  // If no annotations in localStorage, just show feedback
+  if (!hasAnnotations) {
+    return <FeedbackDisplay sessionId={sessionId} revision={revision} label={label} waitingForUpdate={waitingForUpdate} feedbackConsumed={feedbackConsumed} agentWatching={agentWatching} collapseButton={collapseButton} />;
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header with tab switcher */}
+      <div className="px-4 py-3 flex items-center justify-between flex-shrink-0">
+        <div className="flex items-center gap-1 bg-bg-input rounded-md p-0.5">
+          <button
+            onClick={() => setActiveTab("feedback")}
+            className={`px-2.5 py-1 rounded text-[11px] font-medium font-body transition-colors ${
+              activeTab === "feedback"
+                ? "bg-bg-elevated text-text-primary shadow-sm"
+                : "text-text-tertiary hover:text-text-secondary"
+            }`}
+          >
+            Feedback
+          </button>
+          <button
+            onClick={() => setActiveTab("annotations")}
+            className={`px-2.5 py-1 rounded text-[11px] font-medium font-body transition-colors flex items-center gap-1.5 ${
+              activeTab === "annotations"
+                ? "bg-bg-elevated text-text-primary shadow-sm"
+                : "text-text-tertiary hover:text-text-secondary"
+            }`}
+          >
+            Annotations
+            <span className="inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 rounded-full bg-border-subtle text-[10px] font-medium">{annotations.length}</span>
+          </button>
+        </div>
+        {collapseButton}
+      </div>
+
+      {waitingForUpdate && <WaitingBanner feedbackConsumed={feedbackConsumed} agentWatching={agentWatching} />}
+
+      {activeTab === "feedback" ? (
+        <FeedbackDisplayContent sessionId={sessionId} revision={revision} />
+      ) : (
+        <>
+          <div className="flex-1 overflow-y-auto">
+            <CanvasAnnotationGroups annotations={annotations} readOnly />
+          </div>
+          {generalNote.trim() && (
+            <div className="border-t border-border-subtle px-4 py-3 flex-shrink-0">
+              <div className="text-[13px] font-body text-text-primary leading-relaxed">
+                {generalNote}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+function FeedbackDisplayContent({ sessionId, revision }: { sessionId: string; revision: number }) {
+  const host = useCanvasHost();
+  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 (!host.fsAvailable) { 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); })
+      .catch(() => { setFeedback(null); setLoading(false); });
+  }, [sessionId, revision]);
+
+  return (
+    <div className="flex-1 overflow-y-auto px-4">
+      {loading ? (
+        <p className="text-[12px] text-text-tertiary font-body py-4">Loading...</p>
+      ) : feedback ? (
+        <MarkdownPreview text={feedback} />
+      ) : (
+        <p className="text-[12px] text-text-tertiary font-body py-4">No feedback was submitted for this revision.</p>
+      )}
+    </div>
+  );
+}
+
+/** How a canvas splits its annotations: the agent's response, the canvas
+ *  itself, then one group per file the reader opened. */
+function groupAnnotations(annotations: Annotation[]) {
+  const response = annotations.filter((a) => a.filePath === RESPONSE_ANNOTATION_PATH);
+  const plan = annotations.filter((a) => !a.filePath);
+  const files = annotations.filter((a) => fileAnnotationPath(a) !== undefined);
+  const fileGroups: Record<string, Annotation[]> = {};
+  for (const ann of files) {
+    const key = fileAnnotationPath(ann);
+    if (!key) continue;
+    const group = fileGroups[key];
+    if (group) group.push(ann);
+    else fileGroups[key] = [ann];
+  }
+  const hasMultipleGroups = [response, plan, files].filter((g) => g.length > 0).length > 1;
+  return { response, plan, fileGroups, hasMultipleGroups };
+}
+
+function GroupHeading({ children }: { children: React.ReactNode }) {
+  return <div className="text-[10px] uppercase tracking-widest text-text-tertiary font-body px-3 mb-1 mt-1">{children}</div>;
+}
+
+function CanvasAnnotationGroups({ annotations, readOnly, includedRemoteIds, onToggleRemoteId }: {
+  annotations: Annotation[];
+  readOnly?: boolean;
+  includedRemoteIds?: Set<string>;
+  onToggleRemoteId?: (id: string) => void;
+}) {
+  const { setActiveView } = useContext(ActiveViewContext);
+  const { response, plan, fileGroups, hasMultipleGroups } = groupAnnotations(annotations);
+
+  // Selecting a file annotation means opening its file first; the element only
+  // exists once that view is mounted.
+  const onSelect = useCallback((ann: Annotation) => {
+    const filePath = fileAnnotationPath(ann);
+    if (!filePath) return;
+    setActiveView({ type: "file", path: filePath });
+    setTimeout(() => {
+      const el = findAnnotationElement(ann);
+      if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
+    }, 150);
+  }, [setActiveView]);
+
+  const onReveal = useCallback((ann: Annotation) => scrollToAnnotation(ann, setActiveView), [setActiveView]);
+  const listProps = { readOnly, onSelect, onReveal, includedRemoteIds, onToggleRemoteId };
+
+  return (
+    <>
+      {response.length > 0 && (
+        <>
+          {hasMultipleGroups && <GroupHeading>Agent Response</GroupHeading>}
+          <AnnotationList annotations={response} {...listProps} />
+        </>
+      )}
+
+      {plan.length > 0 && (
+        <>
+          {hasMultipleGroups && <GroupHeading>Canvas</GroupHeading>}
+          <AnnotationList annotations={plan} {...listProps} />
+        </>
+      )}
+
+      {Object.entries(fileGroups).map(([filePath, anns]) => (
+        <div key={filePath}>
+          <button
+            onClick={() => setActiveView({ type: "file", path: filePath })}
+            className="flex items-center gap-1.5 text-[10px] uppercase tracking-widest text-text-tertiary hover:text-text-secondary font-body px-3 pt-3 pb-1 truncate transition-colors w-full text-left"
+            title={filePath}
+          >
+            <FileIcon name={filePath.split("/").pop() || filePath} type="file" />
+            <span className="truncate">{filePath}</span>
+          </button>
+          <AnnotationList annotations={anns} {...listProps} />
+        </div>
+      ))}
+    </>
+  );
+}
+
+function AnnotationSidebarInner({ onSubmit, agentWatching, collapseButton }: Omit<AnnotationSidebarProps, "onPreview"> & { agentWatching: boolean }) {
+  const host = useCanvasHost();
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const {
+    annotations, generalNote,
+    submittableResponses, feedbackEntries,
+  } = useAnnotations();
+
+  const remoteAnnotations = useMemo(() => annotations.filter((a) => a.source === "remote"), [annotations]);
+  const [includedRemoteIds, setIncludedRemoteIds] = useState<Set<string>>(() => new Set());
+
+  // Auto-include new remote annotations as they arrive
+  useEffect(() => {
+    if (remoteAnnotations.length === 0) return;
+    setIncludedRemoteIds((prev) => {
+      const next = new Set(prev);
+      for (const a of remoteAnnotations) next.add(a.id);
+      return next.size === prev.size ? prev : next;
+    });
+  }, [remoteAnnotations]);
+
+  const toggleRemoteId = useCallback((id: string) => {
+    setIncludedRemoteIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id); else next.add(id);
+      return next;
+    });
+  }, []);
+
+  const hasResponses = Array.from(submittableResponses.values()).some(hasValue);
+  const hasFeedback = feedbackEntries.size > 0;
+  const hasContent = annotations.length > 0 || generalNote.trim().length > 0 || hasResponses || hasFeedback;
+  const [validationError, setValidationError] = useState<string | null>(null);
+
+  const submitMarkdown = () => {
+    const md = generateMarkdown(annotations, generalNote, submittableResponses, feedbackEntries, includedRemoteIds);
+    onSubmit(md);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="px-4 py-3 flex items-center justify-between flex-shrink-0">
+        <span className="text-[11px] font-medium uppercase tracking-widest text-text-tertiary font-body flex items-center gap-2">
+          Annotations
+          {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>
+          )}
+          {!host.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>
+
+      {/* Annotation list */}
+      <div className="flex-1 overflow-y-auto">
+        {annotations.length === 0 && (
+          <p className="text-[12px] text-text-tertiary px-3 py-4 leading-relaxed font-body">
+            Select text in the canvas or in files to add annotations.
+          </p>
+        )}
+
+        <CanvasAnnotationGroups
+          annotations={annotations}
+          includedRemoteIds={includedRemoteIds}
+          onToggleRemoteId={toggleRemoteId}
+        />
+      </div>
+
+      <AnnotationDraftFooter
+        hasContent={hasContent}
+        onSubmit={() => {
+          const allMissing = getMissingRequiredLabels(submittableResponses, feedbackEntries);
+          if (allMissing.length > 0) {
+            setValidationError(`Please answer: ${allMissing.join(", ")}`);
+            return;
+          }
+          setValidationError(null);
+          submitMarkdown();
+        }}
+        onSubmitEmpty={() => onSubmit("No feedback — looks good.")}
+        notice={validationError && (
+          <div className="px-4 py-2 text-[12px] text-accent-red font-body border-t border-border-subtle flex-shrink-0 flex items-center justify-between gap-2">
+            <span>{validationError}</span>
+            <button
+              onClick={() => { setValidationError(null); submitMarkdown(); }}
+              className="text-[11px] text-text-tertiary hover:text-text-secondary font-body whitespace-nowrap underline"
+            >
+              Submit anyway
+            </button>
+          </div>
+        )}
+        secondaryAction={
+          <button
+            onClick={() => setPreviewOpen(true)}
+            className="flex-1 py-2 rounded-lg font-body text-[13px] font-medium transition-all bg-border-subtle text-text-secondary hover:bg-border-medium hover:text-text-primary"
+          >
+            Preview
+          </button>
+        }
+      />
+
+      <ResponsePreview
+        open={previewOpen}
+        onClose={() => setPreviewOpen(false)}
+        onSubmit={onSubmit}
+        includedRemoteIds={includedRemoteIds}
+        onToggleRemoteId={toggleRemoteId}
+      />
+    </div>
+  );
+}