agent-canvas 0.1.4 → 0.1.7

package/bin/lib/commands/watch.ts

@@ -0,0 +1,23 @@
+import { parseArgs } from "util";
+import { ensureDaemon } from "../daemon-lifecycle.ts";
+import { getSessionId, consumeFeedback, waitForFeedback } from "../helpers.ts";
+
+export async function handleWatch(args: string[]) {
+  const { values } = parseArgs({
+    args,
+    options: {
+      session: { type: "string" },
+    },
+  });
+
+  const sessionId = getSessionId(values.session);
+  await ensureDaemon();
+
+  const feedback = await consumeFeedback(sessionId);
+  if (feedback) {
+    process.stdout.write(feedback);
+    process.exit(0);
+  }
+
+  await waitForFeedback(sessionId);
+}

package/bin/lib/config.ts

@@ -0,0 +1,10 @@
+import { resolve, join, dirname } from "path";
+import { tmpdir } from "os";
+
+export const PACKAGE_ROOT = resolve(join(dirname(import.meta.path), "../.."));
+export const TEMP_DIR = join(tmpdir(), "agent-canvas");
+export const DAEMON_PORT = parseInt(process.env.CANVAS_PORT || "19400", 10);
+export const BASE_URL = `http://localhost:${DAEMON_PORT}`;
+export const WS_URL = `ws://localhost:${DAEMON_PORT}`;
+export const TIMEOUT_MS = parseInt(process.env.CANVAS_TIMEOUT || String(60 * 60 * 1000), 10);
+export const PID_FILE = join(TEMP_DIR, "daemon.pid");

package/bin/lib/daemon-lifecycle.ts

@@ -0,0 +1,74 @@
+import { spawn } from "child_process";
+import { openSync, closeSync, readFileSync, existsSync, mkdirSync, unlinkSync } from "fs";
+import { join } from "path";
+import { PACKAGE_ROOT, TEMP_DIR, BASE_URL, PID_FILE } from "./config.ts";
+
+export async function isDaemonRunning(): Promise<boolean> {
+  try {
+    const res = await fetch(`${BASE_URL}/health`, { signal: AbortSignal.timeout(1000) });
+    const data = await res.json() as any;
+    return data.ok === true;
+  } catch {
+    return false;
+  }
+}
+
+export async function startDaemon(): Promise<void> {
+  console.error("Starting canvas daemon...");
+  mkdirSync(TEMP_DIR, { recursive: true });
+
+  const daemonScript = join(PACKAGE_ROOT, "daemon", "src", "server.ts");
+  const stderrPath = join(TEMP_DIR, "daemon-startup.log");
+  const stderrFd = openSync(stderrPath, "w");
+
+  const child = spawn("bun", ["run", daemonScript], {
+    detached: true,
+    stdio: ["ignore", "ignore", stderrFd],
+    cwd: join(PACKAGE_ROOT, "daemon"),
+  });
+
+  child.unref();
+  closeSync(stderrFd);
+
+  for (let i = 0; i < 30; i++) {
+    await new Promise((r) => setTimeout(r, 100));
+    if (await isDaemonRunning()) {
+      console.error("Daemon started.");
+      return;
+    }
+  }
+
+  if (existsSync(stderrPath)) {
+    const stderr = readFileSync(stderrPath, "utf-8").trim();
+    if (stderr) {
+      console.error("Daemon stderr:\n" + stderr);
+    }
+  }
+
+  console.error("Error: Daemon failed to start within 3 seconds.");
+  process.exit(1);
+}
+
+export async function ensureDaemon(): Promise<void> {
+  if (await isDaemonRunning()) return;
+  await startDaemon();
+}
+
+export function stopDaemon(): boolean {
+  if (existsSync(PID_FILE)) {
+    const pid = parseInt(readFileSync(PID_FILE, "utf-8").trim(), 10);
+    try {
+      process.kill(pid, "SIGTERM");
+      console.log("Daemon stopped.");
+      try { unlinkSync(PID_FILE); } catch {}
+      return true;
+    } catch {
+      console.log("Daemon was not running (stale PID file).");
+      try { unlinkSync(PID_FILE); } catch {}
+      return false;
+    }
+  } else {
+    console.log("No daemon PID file found.");
+    return false;
+  }
+}

package/bin/lib/helpers.ts

@@ -0,0 +1,78 @@
+import { spawn } from "child_process";
+import { randomUUID } from "crypto";
+import { BASE_URL, WS_URL, TIMEOUT_MS } from "./config.ts";
+
+export function getSessionId(session?: string): string {
+  if (session) return session;
+  return process.env.CANVAS_SESSION_ID || (() => {
+    const id = randomUUID();
+    console.error(`Warning: CANVAS_SESSION_ID not set, using generated ID: ${id}`);
+    return id;
+  })();
+}
+
+export async function consumeFeedback(sessionId: string): Promise<string | null> {
+  const res = await fetch(`${BASE_URL}/api/session/${sessionId}/feedback/consume`, { method: "POST" });
+  const data = await res.json() as any;
+  if (data.found) return data.feedback;
+  return null;
+}
+
+export function openBrowser(url: string) {
+  const candidates = process.platform === "darwin"
+    ? ["open"]
+    : ["xdg-open", "wslview", "sensible-browser"];
+
+  for (const cmd of candidates) {
+    const which = Bun.spawnSync(["which", cmd]);
+    if (which.exitCode === 0) {
+      spawn(cmd, [url], { detached: true, stdio: "ignore" }).unref();
+      return;
+    }
+  }
+  console.error(`Open this URL in your browser: ${url}`);
+}
+
+export async function waitForFeedback(sessionId: string): Promise<void> {
+  return new Promise((resolveP, rejectP) => {
+    const ws = new WebSocket(`${WS_URL}/ws/wait/${sessionId}`);
+    const timeout = setTimeout(() => {
+      ws.close();
+      console.error("Error: Timeout waiting for feedback.");
+      process.exit(1);
+    }, TIMEOUT_MS);
+
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(typeof event.data === "string" ? event.data : "");
+        if (data.type === "submit") {
+          clearTimeout(timeout);
+          process.stdout.write(data.feedback);
+          ws.close();
+          process.exit(0);
+        }
+      } catch {}
+    };
+
+    ws.onerror = () => {
+      clearTimeout(timeout);
+      console.error("Error: WebSocket connection failed.");
+      process.exit(1);
+    };
+
+    ws.onclose = () => {
+      clearTimeout(timeout);
+    };
+  });
+}
+
+export async function readLine(): Promise<string> {
+  const buf: number[] = [];
+  for await (const chunk of Bun.stdin.stream()) {
+    for (const byte of chunk) {
+      if (byte === 10) return Buffer.from(buf).toString("utf-8");
+      buf.push(byte);
+    }
+  }
+  return Buffer.from(buf).toString("utf-8");
+}

package/daemon/build.ts

@@ -12,6 +12,26 @@ async function build() {
 
   const REACT_EXTERNALS = ["react", "react-dom", "react-dom/client", "react/jsx-runtime", "react/jsx-dev-runtime"];
 
+  // 0. Build preact-compat bundle
+  console.log("  Building preact-compat...");
+  const preactResult = await Bun.build({
+    entrypoints: [join(ROOT, "client/compat/preact-all.ts")],
+    outdir: DIST,
+    format: "esm",
+    naming: "preact-compat.js",
+    minify: true,
+  });
+
+  if (!preactResult.success) {
+    console.error("Preact-compat build failed:", preactResult.logs);
+    process.exit(1);
+  }
+
+  // Write jsx-runtime shim
+  writeFileSync(join(DIST, "jsx-runtime.js"),
+    `import { jsx, jsxs, Fragment } from "./preact-compat.js";\nexport { jsx, jsxs, Fragment };\nexport const jsxDEV = jsx;\n`
+  );
+
   // 1. Build runtime (shared context between app and components)
   console.log("  Building #canvas/runtime...");
   const runtimeResult = await Bun.build({
@@ -67,11 +87,9 @@ async function build() {
   // 5. Read theme.css to inline into HTML for browser Tailwind runtime
   const themeCss = readFileSync(join(ROOT, "client/theme.css"), "utf-8");
 
-  // 6. Create React shims for import maps
-  // These re-export from the global React loaded via UMD
-  console.log("  Creating React shims...");
+  // 6. Create index.html
+  console.log("  Creating index.html...");
 
-  // Write the index.html to use CDN React
   const indexHtml = `<!DOCTYPE html>
 <html lang="en" data-theme="dark">
 <head>
@@ -91,21 +109,14 @@ ${themeCss}
   <script src="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/highlight.min.js"></script>
   <script src="https://unpkg.com/mermaid@11.4.1/dist/mermaid.min.js"></script>
   <script>mermaid.initialize({ startOnLoad: false, theme: document.documentElement.dataset.theme === 'light' ? 'default' : 'dark' });</script>
-  <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
-  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
-  <script>
-    // Create ESM modules from UMD globals
-    window.__REACT_ESM__ = Object.keys(React).reduce((m, k) => { m[k] = React[k]; return m; }, { default: React, __esModule: true });
-    window.__REACT_DOM_ESM__ = Object.keys(ReactDOM).reduce((m, k) => { m[k] = ReactDOM[k]; return m; }, { default: ReactDOM, __esModule: true });
-  </script>
   <script type="importmap">
   {
     "imports": {
-      "react": "/assets/react-shim.js",
-      "react-dom": "/assets/react-dom-shim.js",
-      "react-dom/client": "/assets/react-dom-client-shim.js",
-      "react/jsx-runtime": "/assets/jsx-runtime-shim.js",
-      "react/jsx-dev-runtime": "/assets/jsx-dev-runtime-shim.js",
+      "react": "/assets/preact-compat.js",
+      "react-dom": "/assets/preact-compat.js",
+      "react-dom/client": "/assets/preact-compat.js",
+      "react/jsx-runtime": "/assets/jsx-runtime.js",
+      "react/jsx-dev-runtime": "/assets/jsx-runtime.js",
       "#canvas/components": "/assets/components.js",
       "#canvas/runtime": "/assets/runtime.js"
     }
@@ -117,51 +128,6 @@ ${themeCss}
 
   writeFileSync(join(DIST, "index.html"), indexHtml);
 
-  // React ESM shims
-  writeFileSync(join(DIST, "react-shim.js"), `
-const R = window.React;
-export default R;
-export const { useState, useEffect, useRef, useCallback, useContext, useMemo, useReducer, createContext, createElement, Fragment, Children, cloneElement, isValidElement, memo, forwardRef, lazy, Suspense, startTransition, useTransition, useDeferredValue, useId, useSyncExternalStore, useInsertionEffect, useImperativeHandle, useLayoutEffect, useDebugValue, Component, PureComponent } = R;
-`);
-
-  writeFileSync(join(DIST, "react-dom-shim.js"), `
-const RD = window.ReactDOM;
-export default RD;
-export const { createPortal, flushSync, hydrate, render, unmountComponentAtNode, findDOMNode, unstable_batchedUpdates } = RD;
-`);
-
-  writeFileSync(join(DIST, "react-dom-client-shim.js"), `
-const RD = window.ReactDOM;
-export const { createRoot, hydrateRoot } = RD;
-export default { createRoot: RD.createRoot, hydrateRoot: RD.hydrateRoot };
-`);
-
-  // jsxDEV signature: (type, props, key, isStaticChildren, source, self)
-  // jsx/jsxs signature: (type, props, key)
-  // createElement signature: (type, props, ...children)
-  // We need to adapt: extract children from props and pass to createElement
-  const jsxShimCode = `
-const R = window.React;
-export const Fragment = R.Fragment;
-function _jsx(type, props, key) {
-  if (props && 'children' in props) {
-    const { children, ...rest } = props;
-    if (key !== undefined && key !== null) rest.key = key;
-    return Array.isArray(children)
-      ? R.createElement(type, rest, ...children)
-      : R.createElement(type, rest, children);
-  }
-  if (key !== undefined && key !== null) props = { ...props, key };
-  return R.createElement(type, props);
-}
-export const jsx = _jsx;
-export const jsxs = _jsx;
-export function jsxDEV(type, props, key) { return _jsx(type, props, key); }
-`;
-
-  writeFileSync(join(DIST, "jsx-runtime-shim.js"), jsxShimCode);
-  writeFileSync(join(DIST, "jsx-dev-runtime-shim.js"), jsxShimCode);
-
   console.log("Build complete! Output in dist/");
 }
 

package/daemon/client/AnnotationProvider.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useCallback, useEffect, useRef } from "react";
 import { AnnotationCtx } from "#canvas/runtime";
 import type { Annotation, AnnotationContext, PlanResponse, FeedbackEntry, AnnotationContextValue } from "#canvas/runtime";
+import { generateAnnotationId } from "./utils";
 
 // Re-export types for convenience
 export type { Annotation, AnnotationContext, PlanResponse, FeedbackEntry, AnnotationContextValue };
@@ -101,8 +102,7 @@ export function AnnotationProvider({ sessionId, revision, isReadOnly, children }
   }, []);
 
   const addAnnotation = useCallback((snippet: string, note: string, filePath?: string) => {
-    const id = `ann-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
-    addAnnotationWithId(id, snippet, note, filePath);
+    addAnnotationWithId(generateAnnotationId(), snippet, note, filePath);
   }, [addAnnotationWithId]);
 
   const updateAnnotation = useCallback((id: string, note: string) => {

package/daemon/client/AnnotationSidebar.tsx

@@ -1,11 +1,12 @@
 import React, { useRef, useEffect, useCallback, useState, useContext } from "react";
 import { useAnnotations, Annotation } from "./AnnotationProvider";
 import { setMarkActive } from "./highlightRange";
-import { generateMarkdown, hasValue, getMissingRequired, getMissingRequiredFeedback } from "./generateMarkdown";
-import { RevisionContext, ActiveViewContext } from "./App";
+import { generateMarkdown, hasValue, getMissingRequiredLabels } from "./generateMarkdown";
+import { RevisionContext, ActiveViewContext, type ActiveView } from "./App";
 import { SessionContext } from "#canvas/runtime";
 import { MarkdownPreview } from "./ResponsePreview";
 import { FileIcon } from "./FileIcon";
+import { autoResizeTextarea } from "./utils";
 
 interface AnnotationSidebarProps {
   onPreview: () => void;
@@ -21,7 +22,7 @@ export function AnnotationSidebar({ onPreview, onSubmit, collapseButton }: Annot
   const roundLabel = selectedRevInfo?.label || `Round ${selectedRevision}`;
 
   if (isReadOnly) {
-    return <FeedbackDisplay sessionId={sessionId} revision={selectedRevision} label={roundLabel} waitingForUpdate={isCurrentButSubmitted} collapseButton={collapseButton} />;
+    return <ReadOnlyAnnotationSidebar sessionId={sessionId} revision={selectedRevision} label={roundLabel} waitingForUpdate={isCurrentButSubmitted} collapseButton={collapseButton} />;
   }
 
   return <AnnotationSidebarInner onPreview={onPreview} onSubmit={onSubmit} collapseButton={collapseButton} />;
@@ -68,6 +69,196 @@ function FeedbackDisplay({ sessionId, revision, label, waitingForUpdate, collaps
   );
 }
 
+type ReadOnlyTab = "feedback" | "annotations";
+
+function ReadOnlyAnnotationSidebar({ sessionId, revision, label, waitingForUpdate, collapseButton }: { sessionId: string; revision: number; label: string; waitingForUpdate?: boolean; collapseButton?: React.ReactNode }) {
+  const { annotations, generalNote, activeAnnotationId, setActiveAnnotationId } = useAnnotations();
+  const { setActiveView } = useContext(ActiveViewContext);
+  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} 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 && (
+        <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">Waiting for next revision...</span>
+        </div>
+      )}
+
+      {activeTab === "feedback" ? (
+        <FeedbackDisplayContent sessionId={sessionId} revision={revision} />
+      ) : (
+        <ReadOnlyAnnotationList
+          annotations={annotations}
+          generalNote={generalNote}
+          activeAnnotationId={activeAnnotationId}
+          setActiveAnnotationId={setActiveAnnotationId}
+          setActiveView={setActiveView}
+        />
+      )}
+    </div>
+  );
+}
+
+function FeedbackDisplayContent({ sessionId, revision }: { sessionId: string; revision: number }) {
+  const [feedback, setFeedback] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    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>
+  );
+}
+
+function ReadOnlyAnnotationList({ annotations, generalNote, activeAnnotationId, setActiveAnnotationId, setActiveView }: {
+  annotations: Annotation[];
+  generalNote: string;
+  activeAnnotationId: string | null;
+  setActiveAnnotationId: (id: string | null) => void;
+  setActiveView: (view: ActiveView) => void;
+}) {
+  const planAnnotations = annotations.filter((a) => !a.filePath);
+  const fileAnnotations = annotations.filter((a) => a.filePath);
+  const fileGroups: Record<string, Annotation[]> = {};
+  for (const ann of fileAnnotations) {
+    const key = ann.filePath!;
+    if (!fileGroups[key]) fileGroups[key] = [];
+    fileGroups[key].push(ann);
+  }
+
+  const handleMouseEnter = (annId: string) => {
+    setActiveAnnotationId(annId);
+    setMarkActive(annId, true);
+    const mark = document.querySelector(`[data-annotation-id="${annId}"]`) as HTMLElement | null;
+    if (mark) mark.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  };
+
+  const handleMouseLeave = (annId: string) => {
+    setActiveAnnotationId(null);
+    setMarkActive(annId, false);
+  };
+
+  const handleClick = (ann: Annotation) => {
+    if (ann.id === activeAnnotationId) {
+      setActiveAnnotationId(null);
+    } else {
+      setActiveAnnotationId(ann.id);
+      if (ann.filePath) {
+        setActiveView({ type: "file", path: ann.filePath });
+        setTimeout(() => {
+          const mark = document.querySelector(`[data-annotation-id="${ann.id}"]`) as HTMLElement | null;
+          if (mark) mark.scrollIntoView({ behavior: "smooth", block: "center" });
+        }, 150);
+      }
+    }
+  };
+
+  const renderAnnotation = (ann: Annotation) => (
+    <div
+      key={ann.id}
+      className={`relative px-3 py-2.5 transition-colors duration-150 cursor-pointer ${
+        activeAnnotationId === ann.id
+          ? "bg-highlight-selected"
+          : "odd:bg-bg-elevated-half hover:bg-bg-input"
+      }`}
+      onMouseEnter={() => handleMouseEnter(ann.id)}
+      onMouseLeave={() => handleMouseLeave(ann.id)}
+      onClick={() => handleClick(ann)}
+    >
+      <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>
+      {ann.note.trim() && (
+        <div className="text-[13px] font-body text-text-primary leading-relaxed">
+          {ann.note}
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <>
+      <div className="flex-1 overflow-y-auto">
+        {planAnnotations.length > 0 && fileAnnotations.length > 0 && (
+          <div className="text-[10px] uppercase tracking-widest text-text-tertiary font-body px-3 mb-1 mt-1">Plan</div>
+        )}
+        {planAnnotations.map(renderAnnotation)}
+
+        {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>
+            {anns.map(renderAnnotation)}
+          </div>
+        ))}
+      </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>
+      )}
+    </>
+  );
+}
+
 function AnnotationSidebarInner({ onPreview, onSubmit, collapseButton }: AnnotationSidebarProps) {
   const {
     annotations, updateAnnotation, removeAnnotation,
@@ -159,17 +350,8 @@ function AnnotationSidebarInner({ onPreview, onSubmit, collapseButton }: Annotat
         className="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]"
         rows={1}
         style={{ height: "auto", overflow: "hidden" }}
-        onInput={(e) => {
-          const t = e.target as HTMLTextAreaElement;
-          t.style.height = "auto";
-          t.style.height = t.scrollHeight + "px";
-        }}
-        ref={(el) => {
-          if (el) {
-            el.style.height = "auto";
-            el.style.height = el.scrollHeight + "px";
-          }
-        }}
+        onInput={(e) => autoResizeTextarea(e.target as HTMLTextAreaElement)}
+        ref={(el) => { if (el) autoResizeTextarea(el); }}
       />
 
       {/* Delete — top right on hover */}
@@ -236,17 +418,8 @@ function AnnotationSidebarInner({ onPreview, onSubmit, collapseButton }: Annotat
           onChange={(e) => setGeneralNote(e.target.value)}
           className="w-full bg-transparent text-[13px] font-body text-text-primary resize-none leading-relaxed p-0 border-none ring-0 shadow-none outline-none focus:outline-none focus:ring-0 focus:border-none placeholder:text-text-disabled min-h-[40px]"
           placeholder="General notes..."
-          onInput={(e) => {
-            const t = e.target as HTMLTextAreaElement;
-            t.style.height = "auto";
-            t.style.height = Math.max(40, t.scrollHeight) + "px";
-          }}
-          ref={(el) => {
-            if (el) {
-              el.style.height = "auto";
-              el.style.height = Math.max(40, el.scrollHeight) + "px";
-            }
-          }}
+          onInput={(e) => autoResizeTextarea(e.target as HTMLTextAreaElement, 40)}
+          ref={(el) => { if (el) autoResizeTextarea(el, 40); }}
         />
       </div>
 
@@ -279,12 +452,7 @@ function AnnotationSidebarInner({ onPreview, onSubmit, collapseButton }: Annotat
             </button>
             <button
               onClick={() => {
-                const missingResponses = getMissingRequired(responses);
-                const missingFeedback = getMissingRequiredFeedback(feedbackEntries);
-                const allMissing = [
-                  ...missingResponses.map((r) => r.label),
-                  ...missingFeedback.map((e) => e.label || e.id),
-                ];
+                const allMissing = getMissingRequiredLabels(responses, feedbackEntries);
                 if (allMissing.length > 0) {
                   setValidationError(`Please answer: ${allMissing.join(", ")}`);
                   return;

package/daemon/client/App.tsx

@@ -11,6 +11,7 @@ import { SessionSwitcher } from "./SessionSwitcher";
 import { exportCanvasToMarkdown } from "./exportMarkdown";
 import { CompareView } from "./CompareView";
 import { RevisionSelect } from "./RevisionSelect";
+import { generateAnnotationId } from "./utils";
 
 export type ActiveView = { type: "plan" } | { type: "file"; path: string };
 
@@ -101,7 +102,7 @@ function RevisionSelector() {
   const isLatest = selectedRevision === currentRevision;
 
   return (
-    <div className="flex items-center gap-1.5">
+    <div className="flex flex-col gap-1">
       <RevisionSelect
         value={selectedRevision}
         onChange={setSelectedRevision}
@@ -123,7 +124,7 @@ function RevisionSelector() {
           }
           setCompareRevision({ left, right: currentRevision });
         }}
-        className="text-[11px] font-body font-medium px-2 py-0.5 rounded-md text-accent-blue hover:bg-accent-blue-muted transition-colors"
+        className="text-[11px] font-body font-medium px-2 py-0.5 rounded-md text-accent-blue hover:bg-accent-blue-muted transition-colors self-start"
       >
         Compare
       </button>
@@ -595,7 +596,7 @@ function ContentTabs() {
                 const data = await res.json() as any;
                 if (!data.error) {
                   const preview = data.content.split("\n").slice(0, 3).join("\n") + (data.content.split("\n").length > 3 ? "\n..." : "");
-                  const id = `ann-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+                  const id = generateAnnotationId();
                   addAnnotationWithId(id, preview, "", path);
                   setActiveAnnotationId(id);
                 }

package/daemon/client/FileBrowser.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext, useCallback } from "react";
+import React, { useEffect, useState, useContext, useCallback, useMemo } from "react";
 import { SessionContext } from "#canvas/runtime";
 import { useAnnotations } from "./AnnotationProvider";
 import { ActiveViewContext } from "./App";
@@ -14,12 +14,13 @@ export function FileBrowser({ embedded }: { embedded?: boolean } = {}) {
   const [collapsed, setCollapsed] = useState(false);
   const [dirs, setDirs] = useState<Record<string, DirState>>({});
 
-  const fileAnnotations = annotations.filter((a) => a.filePath);
-  const annCountMap = new Map<string, number>();
-  for (const a of fileAnnotations) {
-    annCountMap.set(a.filePath!, (annCountMap.get(a.filePath!) || 0) + 1);
-  }
-  const annotatedFiles = [...annCountMap.keys()];
+  const { annCountMap, annotatedFiles } = useMemo(() => {
+    const map = new Map<string, number>();
+    for (const a of annotations) {
+      if (a.filePath) map.set(a.filePath, (map.get(a.filePath) || 0) + 1);
+    }
+    return { annCountMap: map, annotatedFiles: [...map.keys()] };
+  }, [annotations]);
 
   const loadDir = async (path: string) => {
     const res = await fetch(`/api/tree?session=${sessionId}&path=${encodeURIComponent(path)}`);