agent-canvas 0.1.44 → 0.2.0

package/README.md

@@ -82,6 +82,20 @@ Agent Canvas supports light and dark themes, automatically matching your system
 
 ## Development
 
+### Reusable packages
+
+| Package | Use without the Agent Canvas shell |
+| --- | --- |
+| [`@fabrika/daemon-kit`](https://github.com/contember/fabrika-platform/tree/main/packages/daemon-kit) | Bun daemon lifecycle, HTTP routing, WebSocket channels and CLI waiters |
+| [`@fabrika/annotations`](https://github.com/contember/fabrika-platform/tree/main/packages/annotations) | Annotation state, editors and text/block/region locators |
+| [`@fabrika/canvas-kernel`](https://github.com/contember/fabrika-platform/tree/main/packages/canvas-kernel) | JSX compiler, revisions, renderer and interactive canvas components |
+
+The kernel depends on the other two; neither depends on the kernel. All ship as
+TypeScript sources from the [`fabrika-platform`](https://github.com/contember/fabrika-platform)
+repository. See the kernel README for the breaking 0.2 import migration.
+
+### Local commands
+
 ```bash
 bun install
 bun run build                  # build client assets

package/bin/lib/commands/daemon.ts

@@ -23,7 +23,7 @@ export async function handleDaemon(args: string[]) {
       break;
     }
     case "stop": {
-      stopDaemon();
+      await stopDaemon();
       break;
     }
     case "start": {
@@ -35,11 +35,8 @@ export async function handleDaemon(args: string[]) {
       break;
     }
     case "restart": {
-      stopDaemon();
-      for (let i = 0; i < 10; i++) {
-        if (!(await isDaemonRunning())) break;
-        await new Promise((r) => setTimeout(r, 100));
-      }
+      // stopDaemon() already waits for the daemon to go down.
+      await stopDaemon();
       await startDaemon();
       break;
     }

package/bin/lib/commands/push.ts

@@ -67,7 +67,7 @@ export async function handlePush(args: string[]) {
   const shouldRestart = !result.ok && result.error === "Canvas compilation failed" && !isUserError;
   if (shouldRestart) {
     console.error("Compilation failed, restarting daemon and retrying...");
-    stopDaemon();
+    await stopDaemon();
     await startDaemon();
     const retryResponse = await fetch(`${BASE_URL}/api/session/${sessionId}/plan`, {
       method: "POST",

package/bin/lib/daemon-lifecycle.ts

@@ -1,94 +1,87 @@
-import { spawn } from "child_process";
-import { openSync, closeSync, readFileSync, existsSync, mkdirSync, unlinkSync } from "fs";
+import { readFileSync } from "fs";
 import { join } from "path";
+import {
+  createDaemonLifecycle,
+  DaemonStartError,
+  type DaemonEvent,
+} from "@fabrika/daemon-kit";
 import { PACKAGE_ROOT, TEMP_DIR, BASE_URL, PID_FILE, CLI_AUTH_FILE, VERSION } 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;
-  }
+interface CanvasHealth {
+  pid: number;
+  version: string;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 
-async function getDaemonVersion(): Promise<string | null> {
+/**
+ * Transitional: daemons before the pid landed in `/health` only leave a pid file
+ * behind. Drop this fallback once no such daemon can still be running.
+ */
+function legacyPidFromFile(): number | undefined {
   try {
-    const res = await fetch(`${BASE_URL}/health`, { signal: AbortSignal.timeout(1000) });
-    const data = await res.json() as any;
-    return data.version || null;
+    const pid = Number(readFileSync(PID_FILE, "utf-8").trim());
+    return Number.isInteger(pid) && pid > 0 ? pid : undefined;
   } catch {
-    return null;
+    return undefined;
   }
 }
 
-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");
+function parseHealth(body: unknown): CanvasHealth | undefined {
+  if (!isRecord(body) || body.ok !== true || typeof body.version !== "string") return undefined;
+  const pid = typeof body.pid === "number" ? body.pid : legacyPidFromFile();
+  if (pid === undefined) return undefined;
+  return { pid, version: body.version };
+}
 
-  const child = spawn("bun", ["run", daemonScript], {
-    detached: true,
-    stdio: ["ignore", "ignore", stderrFd],
-    cwd: join(PACKAGE_ROOT, "daemon"),
-  });
+function report(event: DaemonEvent) {
+  if (event.type === "version-mismatch") {
+    console.error(`Daemon version mismatch (daemon: ${event.running}, CLI: ${VERSION}), restarting...`);
+  }
+  if (event.type === "starting") console.error("Starting canvas daemon...");
+  if (event.type === "started") console.error("Daemon started.");
+}
 
-  child.unref();
-  closeSync(stderrFd);
+const lifecycle = createDaemonLifecycle<CanvasHealth>({
+  baseUrl: BASE_URL,
+  parseHealth,
+  pidFile: PID_FILE,
+  // The running Bun, not a PATH lookup — `Bun.spawn` throws on a missing executable.
+  command: [process.execPath, "run", join(PACKAGE_ROOT, "daemon", "src", "server.ts")],
+  cwd: join(PACKAGE_ROOT, "daemon"),
+  logFile: join(TEMP_DIR, "daemon-startup.log"),
+  versionCheck: { expected: VERSION, of: (health) => health.version },
+  cleanupFiles: [CLI_AUTH_FILE],
+  onEvent: report,
+});
 
-  for (let i = 0; i < 30; i++) {
-    await new Promise((r) => setTimeout(r, 100));
-    if (await isDaemonRunning()) {
-      console.error("Daemon started.");
-      return;
-    }
-  }
+export async function isDaemonRunning(): Promise<boolean> {
+  return lifecycle.isRunning();
+}
 
-  if (existsSync(stderrPath)) {
-    const stderr = readFileSync(stderrPath, "utf-8").trim();
-    if (stderr) {
-      console.error("Daemon stderr:\n" + stderr);
-    }
+function reportStartFailure(error: unknown): never {
+  if (error instanceof DaemonStartError && error.logTail) {
+    console.error("Daemon stderr:\n" + error.logTail);
   }
-
-  console.error("Error: Daemon failed to start within 3 seconds.");
+  console.error(`Error: ${error instanceof Error ? error.message : String(error)}`);
   process.exit(1);
 }
 
+export async function startDaemon(): Promise<void> {
+  await lifecycle.start().catch(reportStartFailure);
+}
+
 export async function ensureDaemon(): Promise<void> {
-  if (await isDaemonRunning()) {
-    const daemonVersion = await getDaemonVersion();
-    if (daemonVersion && daemonVersion !== VERSION) {
-      console.error(`Daemon version mismatch (daemon: ${daemonVersion}, CLI: ${VERSION}), restarting...`);
-      stopDaemon();
-      await startDaemon();
-    }
-    return;
-  }
-  await startDaemon();
+  await lifecycle.ensure().catch(reportStartFailure);
 }
 
-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 {}
-      try { unlinkSync(CLI_AUTH_FILE); } catch {}
-      return true;
-    } catch {
-      console.log("Daemon was not running (stale PID file).");
-      try { unlinkSync(PID_FILE); } catch {}
-      try { unlinkSync(CLI_AUTH_FILE); } catch {}
-      return false;
-    }
-  } else {
-    console.log("No daemon PID file found.");
-    return false;
-  }
+export async function stopDaemon(): Promise<boolean> {
+  const result = await lifecycle.stop();
+  if (result.reason === "stopped") console.log("Daemon stopped.");
+  else if (result.reason === "stale-pid") console.log("Daemon was not running (stale PID file).");
+  else if (result.reason === "not-running") console.log("No daemon PID file found.");
+  else console.log(result.message);
+  return result.stopped;
 }

package/bin/lib/helpers.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, test } from "bun:test";
 import { waitForFeedback } from "./helpers";
 
 class FakeSocket {
+  onopen: ((event: Event) => void) | null = null;
   onmessage: ((event: MessageEvent) => void) | null = null;
   onerror: ((event: Event) => void) | null = null;
   onclose: ((event: CloseEvent) => void) | null = null;

package/bin/lib/helpers.ts

@@ -1,5 +1,6 @@
 import { spawn } from "child_process";
 import { randomUUID } from "crypto";
+import { waitForEvent, type WaiterSocket, type WaitVerdict } from "@fabrika/daemon-kit";
 import { BASE_URL, WS_URL, TIMEOUT_MS } from "./config.ts";
 
 export function getSessionId(session?: string): string {
@@ -33,15 +34,8 @@ export function openBrowser(url: string) {
   console.error(`Open this URL in your browser: ${url}`);
 }
 
-interface FeedbackSocket {
-  close(): void;
-  onmessage: ((event: MessageEvent) => void) | null;
-  onerror: ((event: Event) => void) | null;
-  onclose: ((event: CloseEvent) => void) | null;
-}
-
 interface FeedbackWaitOptions {
-  createSocket?: (url: string) => FeedbackSocket;
+  createSocket?: (url: string) => WaiterSocket;
   timeoutMs?: number;
   reconnectAttempts?: number;
   reconnectDelayMs?: number;
@@ -55,6 +49,10 @@ interface CanvasRenderError {
   componentStack?: string;
 }
 
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
 function isCanvasRenderError(value: unknown): value is CanvasRenderError {
   return typeof value === "object" && value !== null
     && "revision" in value && Number.isInteger(value.revision)
@@ -71,78 +69,36 @@ function formatCanvasRenderError(error: CanvasRenderError): string {
   return details.join("\n");
 }
 
-class FeedbackWaitError extends Error {
-  constructor(message: string, readonly retryable: boolean) {
-    super(message);
+/** A canvas that failed to render is the answer — retrying the socket cannot fix it. */
+function readFeedbackFrame(frame: unknown): WaitVerdict<string> | undefined {
+  if (!isRecord(frame)) return undefined;
+  if (frame.type === "submit" && typeof frame.feedback === "string") {
+    return { type: "settle", value: frame.feedback };
   }
+  if (frame.type === "render-error" && isCanvasRenderError(frame.error)) {
+    return { type: "fail", error: new Error(formatCanvasRenderError(frame.error)) };
+  }
+  return undefined;
 }
 
-function waitForFeedbackConnection(
-  sessionId: string,
-  timeoutMs: number,
-  createSocket: (url: string) => FeedbackSocket,
-): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const ws = createSocket(`${WS_URL}/ws/wait/${sessionId}`);
-    let settled = false;
-
-    const finish = (result: string | FeedbackWaitError) => {
-      if (settled) return;
-      settled = true;
-      clearTimeout(timeout);
-      ws.close();
-      if (result instanceof FeedbackWaitError) reject(result);
-      else resolve(result);
-    };
-
-    const timeout = setTimeout(() => {
-      finish(new FeedbackWaitError("Timeout waiting for feedback.", false));
-    }, timeoutMs);
-
-    ws.onmessage = (event) => {
-      try {
-        const data = JSON.parse(typeof event.data === "string" ? event.data : "");
-        if (data.type === "submit") {
-          finish(data.feedback);
-        }
-        if (data.type === "render-error" && isCanvasRenderError(data.error)) {
-          finish(new FeedbackWaitError(formatCanvasRenderError(data.error), false));
-        }
-      } catch {}
-    };
-
-    ws.onerror = () => {
-      finish(new FeedbackWaitError("WebSocket connection failed.", true));
-    };
-
-    ws.onclose = () => {
-      finish(new FeedbackWaitError("WebSocket closed before feedback was submitted.", true));
-    };
+export function waitForFeedback(sessionId: string, options: FeedbackWaitOptions = {}): Promise<string> {
+  return waitForEvent<string>({
+    url: `${WS_URL}/ws/wait/${sessionId}`,
+    onFrame: readFeedbackFrame,
+    ...(options.createSocket ? { createSocket: options.createSocket } : {}),
+    timeoutMs: options.timeoutMs ?? TIMEOUT_MS,
+    reconnect: {
+      attempts: options.reconnectAttempts ?? 3,
+      delayMs: options.reconnectDelayMs ?? 1_000,
+    },
+    messages: {
+      timeout: "Timeout waiting for feedback.",
+      closed: "WebSocket closed before feedback was submitted.",
+      connectionFailed: "WebSocket connection failed.",
+    },
   });
 }
 
-export async function waitForFeedback(sessionId: string, options: FeedbackWaitOptions = {}): Promise<string> {
-  const createSocket = options.createSocket ?? ((url: string) => new WebSocket(url));
-  const timeoutMs = options.timeoutMs ?? TIMEOUT_MS;
-  const reconnectAttempts = options.reconnectAttempts ?? 3;
-  const reconnectDelayMs = options.reconnectDelayMs ?? 1_000;
-  const deadline = Date.now() + timeoutMs;
-
-  for (let attempt = 0; ; attempt++) {
-    const remainingMs = deadline - Date.now();
-    if (remainingMs <= 0) throw new FeedbackWaitError("Timeout waiting for feedback.", false);
-
-    try {
-      return await waitForFeedbackConnection(sessionId, remainingMs, createSocket);
-    } catch (error) {
-      if (!(error instanceof FeedbackWaitError) || !error.retryable || attempt >= reconnectAttempts) {
-        throw error;
-      }
-      await Bun.sleep(Math.min(reconnectDelayMs, Math.max(0, deadline - Date.now())));
-    }
-  }
-}
-
 export async function readLine(): Promise<string> {
   const buf: number[] = [];
   for await (const chunk of Bun.stdin.stream()) {

package/daemon/build.ts

@@ -1,9 +1,13 @@
 import { mkdirSync, cpSync, writeFileSync, readFileSync, existsSync, watch as fsWatch } from "fs";
 import { join, dirname } from "path";
+import { fileURLToPath } from "url";
 import { $ } from "bun";
 
 const ROOT = dirname(import.meta.path);
 const DIST = join(ROOT, "dist");
+/** The kernel ships the runtime, the component library and the base stylesheet. */
+const KERNEL_CLIENT = dirname(fileURLToPath(import.meta.resolve("@fabrika/canvas-kernel/runtime")));
+const ANNOTATIONS_RUNTIME = fileURLToPath(import.meta.resolve("@fabrika/annotations/runtime"));
 
 async function build() {
   console.log("Building canvas client...");
@@ -11,11 +15,25 @@ async function build() {
   mkdirSync(DIST, { recursive: true });
 
   const REACT_EXTERNALS = ["react", "react-dom", "react-dom/client", "react/jsx-runtime", "react/jsx-dev-runtime"];
+  const ANNOTATION_EXTERNALS = [...REACT_EXTERNALS, "@fabrika/annotations/runtime"];
+
+  const annotationResult = await Bun.build({
+    entrypoints: [ANNOTATIONS_RUNTIME],
+    outdir: DIST,
+    format: "esm",
+    external: REACT_EXTERNALS,
+    naming: "annotations-runtime.js",
+    minify: true,
+  });
+  if (!annotationResult.success) {
+    console.error("Annotation runtime build failed:", annotationResult.logs);
+    process.exit(1);
+  }
 
   // 0. Build preact-compat bundle
   console.log("  Building preact-compat...");
   const preactResult = await Bun.build({
-    entrypoints: [join(ROOT, "client/compat/preact-all.ts")],
+    entrypoints: [join(KERNEL_CLIENT, "preact-all.ts")],
     outdir: DIST,
     format: "esm",
     naming: "preact-compat.js",
@@ -35,10 +53,10 @@ async function build() {
   // 1. Build runtime (shared context between app and components)
   console.log("  Building #canvas/runtime...");
   const runtimeResult = await Bun.build({
-    entrypoints: [join(ROOT, "client/runtime.ts")],
+    entrypoints: [join(KERNEL_CLIENT, "runtime.ts")],
     outdir: DIST,
     format: "esm",
-    external: [...REACT_EXTERNALS],
+    external: ANNOTATION_EXTERNALS,
     naming: "runtime.js",
     minify: true,
   });
@@ -54,7 +72,7 @@ async function build() {
     entrypoints: [join(ROOT, "client/components/index.ts")],
     outdir: DIST,
     format: "esm",
-    external: [...REACT_EXTERNALS, "#canvas/runtime"],
+    external: [...ANNOTATION_EXTERNALS, "#canvas/runtime"],
     naming: "components.js",
     minify: true,
   });
@@ -70,7 +88,7 @@ async function build() {
     entrypoints: [join(ROOT, "client/App.tsx")],
     outdir: DIST,
     format: "esm",
-    external: [...REACT_EXTERNALS, "#canvas/components", "#canvas/runtime"],
+    external: [...ANNOTATION_EXTERNALS, "#canvas/components", "#canvas/runtime"],
     naming: "client.js",
     minify: true,
   });
@@ -85,7 +103,7 @@ async function build() {
   await $`cd ${ROOT} && npx @tailwindcss/cli -i client/styles.css -o dist/client.css --minify`.quiet();
 
   // 5. Read theme.css to inline into HTML for browser Tailwind runtime
-  const themeCss = readFileSync(join(ROOT, "client/theme.css"), "utf-8");
+  const themeCss = readFileSync(join(KERNEL_CLIENT, "theme.css"), "utf-8");
 
   // 6. Create index.html
   console.log("  Creating index.html...");
@@ -118,6 +136,7 @@ ${themeCss}
       "react/jsx-runtime": "/assets/jsx-runtime.js",
       "react/jsx-dev-runtime": "/assets/jsx-runtime.js",
       "#canvas/components": "/assets/components.js",
+      "@fabrika/annotations/runtime": "/assets/annotations-runtime.js",
       "#canvas/runtime": "/assets/runtime.js"
     }
   }
@@ -142,6 +161,7 @@ ${themeCss}
       "preact-compat.js",
       "jsx-runtime.js",
       "runtime.js",
+      "annotations-runtime.js",
       "components.js",
       "client.js",
       "client.css",
@@ -155,17 +175,18 @@ ${themeCss}
 
 build().then(() => {
   if (process.argv.includes("--watch")) {
-    const clientDir = join(ROOT, "client");
     let timeout: ReturnType<typeof setTimeout> | null = null;
-    console.log("Watching for changes in client/...");
-    fsWatch(clientDir, { recursive: true }, (_event: string, filename: string | null) => {
-      if (!filename || filename.endsWith("~")) return;
-      if (timeout) clearTimeout(timeout);
-      timeout = setTimeout(() => {
-        console.log(`\n  Changed: ${filename}`);
-        build().catch((e) => console.error("Rebuild failed:", e));
-      }, 200);
-    });
+    console.log("Watching for changes in client/ and the kernel client...");
+    for (const dir of [join(ROOT, "client"), KERNEL_CLIENT, dirname(ANNOTATIONS_RUNTIME)]) {
+      fsWatch(dir, { recursive: true }, (_event: string, filename: string | null) => {
+        if (!filename || filename.endsWith("~")) return;
+        if (timeout) clearTimeout(timeout);
+        timeout = setTimeout(() => {
+          console.log(`\n  Changed: ${filename}`);
+          build().catch((e) => console.error("Rebuild failed:", e));
+        }, 200);
+      });
+    }
   }
 }).catch((e) => {
   console.error("Build failed:", e);

package/daemon/client/App.tsx

@@ -2,29 +2,41 @@ import React, { useEffect, useLayoutEffect, useState, useCallback, useRef, creat
 import { createRoot } from "react-dom/client";
 import { marked } from "marked";
 import { SessionContext, ActiveViewCtx } from "#canvas/runtime";
-import { AnnotationProvider, useAnnotations } from "./AnnotationProvider";
-import { PlanRenderer } from "./PlanRenderer";
-import { AnnotationSidebar } from "./AnnotationSidebar";
+import {
+  ActiveViewContext,
+  AnnotationProvider,
+  AnnotationSidebar,
+  CanvasHostContext,
+  FileIcon,
+  PlanRenderer,
+  RenderErrorContext,
+  RevisionContext,
+  carryUnsubmittedDraft,
+  clearPersistedDraft,
+  useAnnotations,
+  type ActiveView,
+  type AnnotationDraftPhase,
+  type CanvasFileInfo,
+  type CanvasRenderError,
+  type RevisionInfo,
+} from "@fabrika/canvas-kernel/client";
+import {
+  AnnotationCreatePopover, AnnotationEditPopover, RESPONSE_ANNOTATION_PATH,
+  extractContext, generateAnnotationId, renameMarkId, restoreMarks,
+  unwrapMarks, updateAllMarkStates, wrapRangeWithMark,
+} from "@fabrika/annotations";
 import { FileBrowser } from "./FileBrowser";
-import { FileIcon } from "./FileIcon";
 import { FileViewer } from "./FileViewer";
 import { SessionSwitcher } from "./SessionSwitcher";
 import { exportCanvasToMarkdown } from "./exportMarkdown";
 import { CompareView } from "./CompareView";
 import { OverviewView, categorizeChanges, getAffectedFiles } from "./OverviewView";
 import { RevisionSelect } from "./RevisionSelect";
-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, fetchMeta, FS_AVAILABLE, WS_AVAILABLE, submitSharedFeedback, getReviewerIdentity, setReviewerIdentity } from "./clientApi";
-import { carryUnsubmittedDraft, clearPersistedDraft, type AnnotationDraftPhase } from "./annotationDraft";
-import { RenderErrorContext, type CanvasRenderError } from "./RenderErrorContext";
+import { MODE, fetchMeta, FS_AVAILABLE, WS_AVAILABLE, submitSharedFeedback, getReviewerIdentity, setReviewerIdentity, canvasHost } 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
@@ -62,55 +74,6 @@ function remoteFeedbackToAnnotations(entries: RemoteFeedbackEntry[]): Annotation
   return out;
 }
 
-export interface CanvasFileInfo {
-  filename: string;
-  diffStats?: { added: number; removed: number };
-}
-
-export interface RevisionInfo {
-  revision: number;
-  label?: string;
-  canvasFiles: CanvasFileInfo[];
-  createdAt: string;
-  hasFeedback: boolean;
-  feedbackConsumed: boolean;
-  response?: string;
-}
-
-export const ActiveViewContext = createContext<{
-  activeView: ActiveView;
-  setActiveView: (v: ActiveView) => void;
-  openFiles: string[];
-  closeFile: (path: string) => void;
-  canvasFiles: string[];
-}>({
-  activeView: { type: "overview" },
-  setActiveView: () => {},
-  openFiles: [],
-  closeFile: () => {},
-  canvasFiles: [],
-});
-
-export const RevisionContext = createContext<{
-  currentRevision: number;
-  selectedRevision: number;
-  revisions: RevisionInfo[];
-  setSelectedRevision: (rev: number) => void;
-  isReadOnly: boolean;
-  compareRevision: { left: number; right: number } | null;
-  setCompareRevision: (rev: { left: number; right: number } | null) => void;
-  agentWatching: boolean;
-}>({
-  currentRevision: 1,
-  selectedRevision: 1,
-  revisions: [],
-  setSelectedRevision: () => {},
-  isReadOnly: false,
-  compareRevision: null,
-  setCompareRevision: () => {},
-  agentWatching: false,
-});
-
 function resolveTheme(pref: string): "light" | "dark" {
   if (pref === "auto") return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   return pref as "light" | "dark";
@@ -519,6 +482,7 @@ function App() {
   }
 
   return (
+    <CanvasHostContext.Provider value={canvasHost}>
     <SessionContext.Provider value={sessionId}>
       <RenderErrorContext.Provider value={reportRenderError}>
         <RevisionContext.Provider value={{ currentRevision, selectedRevision, revisions, setSelectedRevision, isReadOnly, compareRevision, setCompareRevision, agentWatching }}>
@@ -529,6 +493,7 @@ function App() {
             isReadOnly={isReadOnly}
             draftPhase={draftPhase}
             remoteAnnotations={remoteAnnotationsByRev.get(selectedRevision)}
+            canvasFiles={canvasFiles}
           >
           <ActiveViewContext.Provider value={{ activeView, setActiveView, openFiles, closeFile, canvasFiles }}>
           <ActiveViewCtx.Provider value={{ setActiveView }}>
@@ -707,6 +672,7 @@ function App() {
         </RevisionContext.Provider>
       </RenderErrorContext.Provider>
     </SessionContext.Provider>
+    </CanvasHostContext.Provider>
   );
 }
 

package/daemon/client/CompareView.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState, useRef, useCallback, useMemo, useContext } from "react";
 import { RevisionSelect } from "./RevisionSelect";
-import { RevisionContext, type RevisionInfo, type CanvasFileInfo } from "./App";
+import { RevisionContext, type RevisionInfo, type CanvasFileInfo } from "@fabrika/canvas-kernel/client";
 import { runDomDiff } from "./domDiff";
 import { extractBlockTree, matchBlocks, buildUnifiedDom } from "./unifiedDiff";
-import { useAnnotations } from "./AnnotationProvider";
-import { useTextAnnotation } from "./useTextAnnotation";
-import { extractContext } from "./annotationContext";
+import { useAnnotations } from "@fabrika/canvas-kernel/client";
+import { useTextAnnotation } from "@fabrika/annotations";
+import { extractContext } from "@fabrika/annotations";
 
 interface CompareViewProps {
   initialLeft: number;

package/daemon/client/FileBrowser.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState, useContext, useCallback, useMemo } from "react";
 import { SessionContext } from "#canvas/runtime";
-import { useAnnotations } from "./AnnotationProvider";
-import { ActiveViewContext } from "./App";
-import { FileIcon } from "./FileIcon";
-import { RESPONSE_ANNOTATION_PATH } from "./utils";
+import { useAnnotations } from "@fabrika/canvas-kernel/client";
+import { ActiveViewContext } from "@fabrika/canvas-kernel/client";
+import { FileIcon } from "@fabrika/canvas-kernel/client";
+import { RESPONSE_ANNOTATION_PATH } from "@fabrika/annotations";
 import { FS_AVAILABLE } from "./clientApi";
 
 interface TreeEntry { name: string; type: "file" | "dir"; }