agent-canvas 0.1.44 → 0.1.45

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/canvas-kernel/server";
 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/canvas-kernel/server";
 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

@@ -4,6 +4,8 @@ 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 = join(ROOT, "..", "packages", "canvas-kernel", "src", "client");
 
 async function build() {
   console.log("Building canvas client...");
@@ -15,7 +17,7 @@ async function build() {
   // 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,7 +37,7 @@ 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],
@@ -85,7 +87,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...");
@@ -155,17 +157,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]) {
+      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,46 @@ 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,
+  AnnotationCreatePopover,
+  AnnotationEditPopover,
+  AnnotationProvider,
+  AnnotationSidebar,
+  CanvasHostContext,
+  FileIcon,
+  PlanRenderer,
+  RenderErrorContext,
+  RevisionContext,
+  RESPONSE_ANNOTATION_PATH,
+  carryUnsubmittedDraft,
+  clearPersistedDraft,
+  extractContext,
+  generateAnnotationId,
+  renameMarkId,
+  restoreMarks,
+  unwrapMarks,
+  updateAllMarkStates,
+  useAnnotations,
+  wrapRangeWithMark,
+  type ActiveView,
+  type AnnotationDraftPhase,
+  type CanvasFileInfo,
+  type CanvasRenderError,
+  type RevisionInfo,
+} from "@fabrika/canvas-kernel/client";
 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 +79,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 +487,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 +498,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 +677,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/canvas-kernel/client";
+import { extractContext } from "@fabrika/canvas-kernel/client";
 
 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/canvas-kernel/client";
 import { FS_AVAILABLE } from "./clientApi";
 
 interface TreeEntry { name: string; type: "file" | "dir"; }

package/daemon/client/FileViewer.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState, useContext, useCallback, useRef, useMemo } from "react";
 import { SessionContext } from "#canvas/runtime";
 import type { AnnotationContext } from "#canvas/runtime";
-import { useAnnotations } from "./AnnotationProvider";
-import { wrapRangeWithMark } from "./highlightRange";
+import { useAnnotations } from "@fabrika/canvas-kernel/client";
+import { wrapRangeWithMark } from "@fabrika/canvas-kernel/client";
 import { LANG_MAP } from "../langMap";
-import { generateAnnotationId } from "./utils";
-import { useTextAnnotation } from "./useTextAnnotation";
+import { generateAnnotationId } from "@fabrika/canvas-kernel/client";
+import { useTextAnnotation } from "@fabrika/canvas-kernel/client";
 import { FS_AVAILABLE } from "./clientApi";
 
 /** Walk up from a node to find the parent line div with data-line-num */

package/daemon/client/OverviewView.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useContext, useMemo, useRef, useEffect, useCallback } from "react";
 import { SessionContext } from "#canvas/runtime";
-import { PlanRenderer } from "./PlanRenderer";
+import { PlanRenderer } from "@fabrika/canvas-kernel/client";
 import { ComparePanelRenderer } from "./CompareView";
-import { ActiveViewContext, RevisionContext, type CanvasFileInfo, type RevisionInfo } from "./App";
+import { ActiveViewContext, RevisionContext, type CanvasFileInfo, type RevisionInfo } from "@fabrika/canvas-kernel/client";
 import { extractBlockTree, matchBlocks, buildUnifiedDom } from "./unifiedDiff";
 import { runDomDiff } from "./domDiff";
 

package/daemon/client/RevisionSelect.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef, useContext } from "react";
-import { RevisionContext, RevisionInfo } from "./App";
+import { RevisionContext, RevisionInfo } from "@fabrika/canvas-kernel/client";
 
 /** Format a revision for the trigger button: label or "Round N" */
 function revisionButtonLabel(r: RevisionInfo) {

package/daemon/client/clientApi.ts

@@ -28,6 +28,7 @@ import {
   ENCRYPTION_META,
   type EncryptionMeta,
 } from "./shareCrypto";
+import type { CanvasHost } from "@fabrika/canvas-kernel/client";
 
 declare global {
   interface Window {
@@ -334,3 +335,20 @@ export const FS_AVAILABLE: boolean = !MODE.isShared;
 
 /** Is live WebSocket session updates available? */
 export const WS_AVAILABLE: boolean = !MODE.isShared;
+
+// --- Kernel host binding ----------------------------------------------------
+
+/**
+ * What the kernel's annotation surface needs from this host. agent-canvas
+ * serves canvases in two modes, so these cannot use the kernel's local-only
+ * defaults: shared canvases come from the worker (and may be encrypted).
+ */
+export const canvasHost: CanvasHost = {
+  get sessionId() {
+    return getIdentifier();
+  },
+  isShared: MODE.isShared,
+  fsAvailable: FS_AVAILABLE,
+  uploadUrl,
+  loadCanvasModule,
+};