@nicmeriano/spool-server 0.0.1

package/dist/index.js

@@ -0,0 +1,2195 @@
+// src/orchestrator/types.ts
+var CLAUDE_AUTHOR = {
+  id: "claude",
+  name: "Claude"
+};
+var CLAUDE_MODEL = "claude-opus-4-5-20251101";
+function createEmptyState(appId) {
+  return {
+    appId,
+    status: "idle",
+    currentTaskId: null,
+    pages: {}
+  };
+}
+function getAnnotationsFromState(state, filter) {
+  const allAnnotations = [];
+  for (const page of Object.values(state.pages)) {
+    allAnnotations.push(...page.annotations);
+  }
+  if (filter?.status) {
+    return allAnnotations.filter((a) => a.status === filter.status);
+  }
+  return allAnnotations;
+}
+function findAnnotationInState(state, annotationId) {
+  for (const [url, page] of Object.entries(state.pages)) {
+    const annotation = page.annotations.find((a) => a.id === annotationId);
+    if (annotation) {
+      return { annotation, pageUrl: url };
+    }
+  }
+  return null;
+}
+function updateAnnotationInState(state, annotationId, updates) {
+  const newPages = {};
+  for (const [url, page] of Object.entries(state.pages)) {
+    const annotationIndex = page.annotations.findIndex((a) => a.id === annotationId);
+    if (annotationIndex !== -1) {
+      const newAnnotations = [...page.annotations];
+      newAnnotations[annotationIndex] = {
+        ...newAnnotations[annotationIndex],
+        ...updates
+      };
+      newPages[url] = {
+        ...page,
+        annotations: newAnnotations,
+        lastModified: (/* @__PURE__ */ new Date()).toISOString()
+      };
+    } else {
+      newPages[url] = page;
+    }
+  }
+  return {
+    ...state,
+    pages: newPages
+  };
+}
+
+// src/orchestrator/index.ts
+import { Hono as Hono7 } from "hono";
+import { cors } from "hono/cors";
+import { createAdaptorServer } from "@hono/node-server";
+import { watch } from "chokidar";
+import * as crypto from "crypto";
+import * as fs2 from "fs";
+import * as path2 from "path";
+import { fileURLToPath } from "url";
+import { createRequire } from "module";
+
+// src/orchestrator/routes/events.ts
+import { Hono } from "hono";
+import { streamSSE } from "hono/streaming";
+import { execFile } from "child_process";
+import { platform } from "os";
+var sseClients = /* @__PURE__ */ new Map();
+var clientIdCounter = 0;
+function broadcast(message) {
+  const data = JSON.stringify(message);
+  for (const client of sseClients.values()) {
+    client.send(message.type, data);
+  }
+}
+function getClientCount() {
+  return sseClients.size;
+}
+function createEventsRoutes(ctx) {
+  const app = new Hono();
+  app.get("/events", (c) => {
+    return streamSSE(c, async (stream) => {
+      const clientId = `sse_${++clientIdCounter}`;
+      const client = {
+        id: clientId,
+        send: (event, data) => {
+          stream.writeSSE({ event, data }).catch(() => {
+            sseClients.delete(clientId);
+          });
+        },
+        close: () => {
+          sseClients.delete(clientId);
+        }
+      };
+      sseClients.set(clientId, client);
+      console.error(`[spool] SSE client connected: ${clientId} (total: ${sseClients.size})`);
+      const state = ctx.getState();
+      const initMsg = {
+        type: "state:update",
+        taskId: state.currentTaskId,
+        state
+      };
+      await stream.writeSSE({ event: "state:update", data: JSON.stringify(initMsg) });
+      const keepalive = setInterval(() => {
+        stream.writeSSE({ event: "ping", data: "" }).catch(() => {
+          clearInterval(keepalive);
+          sseClients.delete(clientId);
+        });
+      }, 3e4);
+      stream.onAbort(() => {
+        clearInterval(keepalive);
+        sseClients.delete(clientId);
+        console.error(`[spool] SSE client disconnected: ${clientId} (total: ${sseClients.size})`);
+      });
+      await new Promise(() => {
+      });
+    });
+  });
+  app.post("/app-url", async (c) => {
+    const body = await c.req.json();
+    console.error(`[spool] Received app URL: ${body.url}`);
+    const host = c.req.header("host") || "localhost:3142";
+    const shellUrl = `http://${host}`;
+    console.error(`[spool] Opening ${shellUrl}`);
+    const cmd = platform() === "darwin" ? "open" : platform() === "win32" ? "start" : "xdg-open";
+    execFile(cmd, [shellUrl]);
+    let state = ctx.getState();
+    state = { ...state, appUrl: body.url };
+    ctx.setState(state);
+    ctx.saveState(state);
+    broadcast({ type: "app:url", url: body.url });
+    const stateUpdate = {
+      type: "state:update",
+      taskId: state.currentTaskId,
+      state
+    };
+    broadcast(stateUpdate);
+    return c.json({ ok: true });
+  });
+  return app;
+}
+
+// src/orchestrator/routes/annotations.ts
+import { Hono as Hono2 } from "hono";
+import { execFileSync } from "child_process";
+function createAnnotationsRoutes(ctx) {
+  const app = new Hono2();
+  app.post("/", async (c) => {
+    const { url, annotation } = await c.req.json();
+    console.error(`[spool] annotation:create received for ${url}`);
+    const state = ctx.getState();
+    if (!state.pages[url]) {
+      state.pages[url] = {
+        url,
+        annotations: [],
+        lastModified: (/* @__PURE__ */ new Date()).toISOString()
+      };
+    }
+    state.pages[url].annotations.push(annotation);
+    state.pages[url].lastModified = (/* @__PURE__ */ new Date()).toISOString();
+    ctx.saveState(state);
+    ctx.setState(state);
+    const update = {
+      type: "state:update",
+      taskId: state.currentTaskId,
+      state
+    };
+    broadcast(update);
+    return c.json({ ok: true });
+  });
+  app.patch("/:id", async (c) => {
+    const id = c.req.param("id");
+    const changes = await c.req.json();
+    console.error(`[spool] annotation:update received for ${id}`);
+    const state = ctx.getState();
+    let found = false;
+    for (const page of Object.values(state.pages)) {
+      const index = page.annotations.findIndex((a) => a.id === id);
+      if (index !== -1) {
+        const current = page.annotations[index];
+        if (current.status === "in_progress" && changes.status) {
+          const { status: _status, doneAt: _doneAt, doneBy: _doneBy, ...safeChanges } = changes;
+          page.annotations[index] = { ...current, ...safeChanges };
+        } else {
+          page.annotations[index] = { ...current, ...changes };
+        }
+        page.lastModified = (/* @__PURE__ */ new Date()).toISOString();
+        found = true;
+        break;
+      }
+    }
+    if (!found) {
+      return c.json({ error: "Annotation not found" }, 404);
+    }
+    ctx.saveState(state);
+    ctx.setState(state);
+    const update = {
+      type: "state:update",
+      taskId: state.currentTaskId,
+      state
+    };
+    broadcast(update);
+    return c.json({ ok: true });
+  });
+  app.delete("/:id", async (c) => {
+    const id = c.req.param("id");
+    console.error(`[spool] annotation:delete received for ${id}`);
+    const state = ctx.getState();
+    let deleted = false;
+    for (const page of Object.values(state.pages)) {
+      const index = page.annotations.findIndex((a) => a.id === id);
+      if (index !== -1) {
+        page.annotations.splice(index, 1);
+        page.lastModified = (/* @__PURE__ */ new Date()).toISOString();
+        deleted = true;
+        break;
+      }
+    }
+    if (!deleted) {
+      return c.json({ error: "Annotation not found" }, 404);
+    }
+    ctx.saveState(state);
+    ctx.setState(state);
+    const update = {
+      type: "state:update",
+      taskId: state.currentTaskId,
+      state
+    };
+    broadcast(update);
+    return c.json({ ok: true });
+  });
+  app.post("/:id/revert", async (c) => {
+    const id = c.req.param("id");
+    console.error(`[spool] annotation:revert for ${id}`);
+    let state = ctx.getState();
+    const found = findAnnotationInState(state, id);
+    if (!found || found.annotation.status !== "done" || !found.annotation.commitSha) {
+      return c.json({ success: false, error: "No revertible commit found" });
+    }
+    try {
+      execFileSync("git", ["revert", "--no-edit", found.annotation.commitSha], {
+        cwd: ctx.projectDir,
+        encoding: "utf-8"
+      });
+      state = updateAnnotationInState(state, id, {
+        status: "open",
+        doneAt: void 0,
+        doneBy: void 0,
+        commitSha: void 0
+      });
+      ctx.saveState(state);
+      ctx.setState(state);
+      broadcast({ type: "state:update", taskId: null, state });
+      console.error(`[spool] Successfully reverted ${id}`);
+      return c.json({ success: true });
+    } catch (error) {
+      try {
+        execFileSync("git", ["revert", "--abort"], { cwd: ctx.projectDir });
+      } catch {
+      }
+      console.error(`[spool] Revert failed for ${id}:`, error);
+      return c.json({
+        success: false,
+        error: "Revert failed \u2014 code has likely changed since this annotation was implemented"
+      });
+    }
+  });
+  return app;
+}
+
+// src/orchestrator/routes/changes.ts
+import { Hono as Hono3 } from "hono";
+
+// src/orchestrator/pending-changes-processor.ts
+import { query } from "@anthropic-ai/claude-agent-sdk";
+
+// src/orchestrator/agent-options.ts
+import * as fs from "fs";
+import * as path from "path";
+function isInsideProject(abs, boundary) {
+  return abs === boundary || abs.startsWith(boundary + path.sep);
+}
+function createPathEnforcer(projectDir2) {
+  const resolved = path.resolve(projectDir2);
+  return async (toolName, input, _options) => {
+    const filePath = input.file_path || input.path;
+    if (filePath) {
+      const abs = path.resolve(resolved, filePath);
+      if (!isInsideProject(abs, resolved)) {
+        return { behavior: "deny", message: `Cannot access files outside project directory: ${filePath}` };
+      }
+      if (["Read", "Edit", "Write"].includes(toolName)) {
+        try {
+          const realPath = fs.realpathSync(abs);
+          if (!isInsideProject(realPath, resolved)) {
+            return { behavior: "deny", message: `Cannot access files outside project directory (symlink): ${filePath}` };
+          }
+        } catch {
+        }
+      }
+    }
+    if (toolName === "Glob" || toolName === "Grep") {
+      const pattern = input.pattern;
+      if (pattern && pattern.includes("..")) {
+        return { behavior: "deny", message: "Patterns cannot traverse parent directories" };
+      }
+      if (!input.path) {
+        return { behavior: "allow", updatedInput: { ...input, path: resolved } };
+      }
+    }
+    if (toolName === "Bash") {
+      const command = input.command;
+      if (command) {
+        const normalized = command.replace(/\s+/g, " ");
+        if (normalized.includes("..") && !normalized.startsWith("git ")) {
+          return { behavior: "deny", message: `Cannot run commands referencing paths outside project directory` };
+        }
+      }
+    }
+    return { behavior: "allow", updatedInput: input };
+  };
+}
+
+// src/orchestrator/pending-changes-processor.ts
+function buildSystemPrompt(cwd) {
+  return `You are implementing UI changes from a pending changes queue. Users use a visual editing tool in their browser to specify changes, and your job is to implement them in the source code.
+
+## Working Directory
+
+Your working directory is: ${cwd}
+You can ONLY access files within this directory. Do not attempt to access files outside it.
+
+## Tools
+
+You have the following tools available:
+- **Read**: Read file contents. Parameter: file_path (absolute path)
+- **Edit**: Replace text in a file. Parameters: file_path, old_string, new_string. Read a file before editing it.
+- **Write**: Create or overwrite a file. Parameters: file_path, content
+- **Glob**: Find files by pattern. Parameters: pattern, path (optional directory)
+- **Grep**: Search file contents. Parameters: pattern, path (optional directory)
+
+Always use absolute paths based on your working directory.
+
+## Change Types
+
+There are three types of changes you'll handle:
+
+### 1. Note Changes
+User describes a change in natural language. Read the description and implement it.
+Example: "Make this button blue" or "Add more padding to this card"
+
+### 2. Style Changes
+User modified CSS properties using a visual editor. Apply these style changes to the component.
+The \`styles\` object contains the new values, and \`originalStyles\` contains what was there before.
+You should update the component's styling to match the new values.
+
+### 3. Variant Changes
+User selected an AI-generated HTML variant. Replace the element's current HTML/JSX with the selected variant.
+The \`selectedVariantIndex\` indicates which variant to use from the \`variants\` array.
+
+## Workflow
+
+For each change:
+
+1. Read the \`element.componentFile\` to find the source file
+2. Locate the element using \`selector\` and \`element.componentName\`
+3. Implement the change based on its type
+4. After completing each change, output: "CHANGE_COMPLETE: <change-id>"
+
+## Key Fields to Use
+
+- \`selector\`: CSS selector identifying the element
+- \`element.componentName\`: React component name
+- \`element.componentFile\`: Path to the source file
+- For notes: \`content\` - the user's description
+- For styles: \`styles\` - the CSS properties to apply
+- For variants: \`variants[selectedVariantIndex].html\` - the new HTML
+
+## Constraints
+
+- Make minimal, focused changes
+- Follow existing code patterns and conventions
+- Use Tailwind classes if the project uses Tailwind
+- For style changes, prefer inline styles or add to existing className if using CSS modules`;
+}
+function formatChange(change, index) {
+  const component = change.element.componentFile ? `${change.element.componentName || "Unknown"} (${change.element.componentFile})` : change.element.selector || "Unknown element";
+  let description = "";
+  switch (change.type) {
+    case "note": {
+      const noteChange = change;
+      description = `**Note**: "${noteChange.content}"`;
+      break;
+    }
+    case "style": {
+      const styleChange = change;
+      const styleList = Object.entries(styleChange.styles).map(([key, value]) => `${key}: ${value}`).join(", ");
+      description = `**Style changes**: { ${styleList} }`;
+      break;
+    }
+    case "variant": {
+      const variantChange = change;
+      const selectedVariant = variantChange.variants[variantChange.selectedVariantIndex];
+      description = `**Variant**: Replace with:
+\`\`\`html
+${selectedVariant?.html || "(no variant selected)"}
+\`\`\``;
+      break;
+    }
+  }
+  return `${index + 1}. **${change.id}** - ${component}
+   Type: ${change.type}
+   Selector: \`${change.selector}\`
+   ${description}`;
+}
+function buildTaskPrompt(changes) {
+  if (changes.length === 0) {
+    return "There are no pending changes to apply.";
+  }
+  const changesList = changes.map((c, i) => formatChange(c, i)).join("\n\n");
+  return `## Pending Changes to Apply
+
+${changesList}
+
+Please implement these changes. For each change:
+1. Read the component file
+2. Make the required modifications
+3. Output "CHANGE_COMPLETE: <change-id>" when done
+
+Start with the first change and work through them in order.`;
+}
+async function processChanges(options) {
+  const { changes, cwd, callbacks, abortController } = options;
+  if (changes.length === 0) {
+    return {
+      success: true,
+      changesProcessed: 0,
+      errors: []
+    };
+  }
+  for (const change of changes) {
+    callbacks.onChangeProgress(change.id, "in_progress");
+  }
+  const taskPrompt = buildTaskPrompt(changes);
+  const systemPrompt = buildSystemPrompt(cwd);
+  const errors = [];
+  let changesProcessed = 0;
+  const changeIds = new Set(changes.map((c) => c.id));
+  const completedIds = /* @__PURE__ */ new Set();
+  let textBuffer = "";
+  try {
+    const stream = query({
+      prompt: taskPrompt,
+      options: {
+        systemPrompt,
+        cwd,
+        abortController,
+        tools: { type: "preset", preset: "claude_code" },
+        allowedTools: ["Read", "Edit", "Write", "Glob", "Grep"],
+        // Enforce project directory boundaries
+        canUseTool: createPathEnforcer(cwd),
+        permissionMode: "acceptEdits",
+        includePartialMessages: true,
+        // Don't load external CLAUDE.md (would leak monorepo context into the isolated agent)
+        settingSources: [],
+        model: CLAUDE_MODEL
+      }
+    });
+    for await (const message of stream) {
+      if (abortController.signal.aborted) {
+        break;
+      }
+      switch (message.type) {
+        case "assistant": {
+          const assistantMessage = message.message;
+          if (assistantMessage.content) {
+            for (const block of assistantMessage.content) {
+              if (block.type === "tool_use") {
+                callbacks.onToolCall(block.name, block.input);
+              }
+            }
+          }
+          break;
+        }
+        case "stream_event": {
+          const event = message.event;
+          if (event.type === "content_block_delta") {
+            const delta = event.delta;
+            if ("text" in delta) {
+              callbacks.onText(delta.text, true);
+              textBuffer += delta.text;
+              const regex = /CHANGE_COMPLETE:\s*(\S+)/g;
+              let match;
+              while ((match = regex.exec(textBuffer)) !== null) {
+                const changeId = match[1];
+                if (changeIds.has(changeId) && !completedIds.has(changeId)) {
+                  completedIds.add(changeId);
+                  changesProcessed++;
+                  callbacks.onChangeProgress(changeId, "done");
+                }
+              }
+              if (textBuffer.length > 500) {
+                textBuffer = textBuffer.slice(-200);
+              }
+            }
+          }
+          break;
+        }
+        case "result": {
+          if (message.subtype === "success") {
+            for (const change of changes) {
+              if (!completedIds.has(change.id)) {
+                completedIds.add(change.id);
+                changesProcessed++;
+                callbacks.onChangeProgress(change.id, "done");
+              }
+            }
+          } else {
+            const resultErrors = "errors" in message ? message.errors : [];
+            errors.push(...resultErrors);
+            for (const change of changes) {
+              if (!completedIds.has(change.id)) {
+                callbacks.onChangeProgress(change.id, "error", resultErrors.join(", ") || "Unknown error");
+              }
+            }
+          }
+          break;
+        }
+      }
+    }
+    if (abortController.signal.aborted) {
+      for (const change of changes) {
+        if (!completedIds.has(change.id)) {
+          callbacks.onChangeProgress(change.id, "error", "Task cancelled");
+        }
+      }
+      return {
+        success: false,
+        changesProcessed,
+        errors: ["Task cancelled"]
+      };
+    }
+    return {
+      success: errors.length === 0,
+      changesProcessed,
+      errors
+    };
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    errors.push(errorMessage);
+    for (const change of changes) {
+      if (!completedIds.has(change.id)) {
+        callbacks.onChangeProgress(change.id, "error", errorMessage);
+      }
+    }
+    return {
+      success: false,
+      changesProcessed,
+      errors
+    };
+  }
+}
+
+// src/orchestrator/routes/changes.ts
+function createChangesRoutes(ctx) {
+  const app = new Hono3();
+  app.post("/", async (c) => {
+    const { url, change } = await c.req.json();
+    console.error(`[spool] change:add for ${url}`);
+    const state = ctx.getState();
+    if (!state.pages[url]) {
+      state.pages[url] = {
+        url,
+        annotations: [],
+        pendingChanges: [],
+        lastModified: (/* @__PURE__ */ new Date()).toISOString()
+      };
+    }
+    if (!state.pages[url].pendingChanges) {
+      state.pages[url].pendingChanges = [];
+    }
+    state.pages[url].pendingChanges.push(change);
+    state.pages[url].lastModified = (/* @__PURE__ */ new Date()).toISOString();
+    ctx.saveState(state);
+    ctx.setState(state);
+    const update = {
+      type: "state:update",
+      taskId: state.currentTaskId,
+      state
+    };
+    broadcast(update);
+    return c.json({ ok: true });
+  });
+  app.delete("/:id", async (c) => {
+    const changeId = c.req.param("id");
+    console.error(`[spool] change:remove for ${changeId}`);
+    const state = ctx.getState();
+    let removed = false;
+    for (const page of Object.values(state.pages)) {
+      if (page.pendingChanges) {
+        const index = page.pendingChanges.findIndex((ch) => ch.id === changeId);
+        if (index !== -1) {
+          page.pendingChanges.splice(index, 1);
+          page.lastModified = (/* @__PURE__ */ new Date()).toISOString();
+          removed = true;
+          break;
+        }
+      }
+    }
+    if (!removed) {
+      return c.json({ error: "Change not found" }, 404);
+    }
+    ctx.saveState(state);
+    ctx.setState(state);
+    const update = {
+      type: "state:update",
+      taskId: state.currentTaskId,
+      state
+    };
+    broadcast(update);
+    return c.json({ ok: true });
+  });
+  app.post("/apply-all", async (c) => {
+    const { url } = await c.req.json();
+    console.error(`[spool] change:apply_all for ${url}`);
+    const state = ctx.getState();
+    const page = state.pages[url];
+    if (!page || !page.pendingChanges || page.pendingChanges.length === 0) {
+      return c.json({ accepted: true, message: "No pending changes to apply" });
+    }
+    const pendingChanges = page.pendingChanges.filter((ch) => ch.status === "pending");
+    if (pendingChanges.length === 0) {
+      return c.json({ accepted: true, message: "No pending changes to apply" });
+    }
+    const applyAbortController = new AbortController();
+    (async () => {
+      for (const change of pendingChanges) {
+        const idx = page.pendingChanges.findIndex((ch) => ch.id === change.id);
+        if (idx !== -1) {
+          page.pendingChanges[idx] = { ...change, status: "in_progress" };
+        }
+      }
+      ctx.saveState(state);
+      const result = await processChanges({
+        changes: pendingChanges,
+        cwd: ctx.projectDir,
+        abortController: applyAbortController,
+        callbacks: {
+          onText: (content, isPartial) => {
+            const textMsg = {
+              type: "stream:text",
+              taskId: "apply_all",
+              content,
+              isPartial
+            };
+            broadcast(textMsg);
+          },
+          onToolCall: (toolName, toolInput) => {
+            const toolMsg = {
+              type: "stream:tool_call",
+              taskId: "apply_all",
+              toolName,
+              toolInput
+            };
+            broadcast(toolMsg);
+          },
+          onChangeProgress: (changeId, status, error) => {
+            const idx = page.pendingChanges.findIndex((ch) => ch.id === changeId);
+            if (idx !== -1) {
+              page.pendingChanges[idx] = {
+                ...page.pendingChanges[idx],
+                status,
+                errorMessage: error
+              };
+            }
+            ctx.saveState(state);
+            const progressMsg = {
+              type: "apply:progress",
+              changeId,
+              status,
+              error
+            };
+            broadcast(progressMsg);
+            const stateUpdate = {
+              type: "state:update",
+              taskId: state.currentTaskId,
+              state
+            };
+            broadcast(stateUpdate);
+          }
+        }
+      });
+      const complete = {
+        type: "apply:complete",
+        success: result.success,
+        message: result.errors.length > 0 ? `Applied ${result.changesProcessed} changes, errors: ${result.errors.join(", ")}` : `Applied ${result.changesProcessed} changes`
+      };
+      broadcast(complete);
+      const finalUpdate = {
+        type: "state:update",
+        taskId: state.currentTaskId,
+        state
+      };
+      broadcast(finalUpdate);
+    })();
+    return c.json({ accepted: true });
+  });
+  app.post("/:id/apply", async (c) => {
+    const changeId = c.req.param("id");
+    const { url } = await c.req.json();
+    console.error(`[spool] change:apply for ${changeId} at ${url}`);
+    const state = ctx.getState();
+    const page = state.pages[url];
+    if (!page || !page.pendingChanges) {
+      return c.json({ accepted: false, error: "Page not found" }, 404);
+    }
+    const change = page.pendingChanges.find((ch) => ch.id === changeId);
+    if (!change) {
+      return c.json({ accepted: false, error: "Change not found" }, 404);
+    }
+    if (change.status !== "pending") {
+      return c.json({ accepted: false, error: "Change is not pending" }, 400);
+    }
+    const singleAbortController = new AbortController();
+    (async () => {
+      const idx = page.pendingChanges.findIndex((ch) => ch.id === changeId);
+      if (idx !== -1) {
+        page.pendingChanges[idx] = { ...change, status: "in_progress" };
+      }
+      ctx.saveState(state);
+      const result = await processChanges({
+        changes: [change],
+        cwd: ctx.projectDir,
+        abortController: singleAbortController,
+        callbacks: {
+          onText: (content, isPartial) => {
+            const textMsg = {
+              type: "stream:text",
+              taskId: `apply_${changeId}`,
+              content,
+              isPartial
+            };
+            broadcast(textMsg);
+          },
+          onToolCall: (toolName, toolInput) => {
+            const toolMsg = {
+              type: "stream:tool_call",
+              taskId: `apply_${changeId}`,
+              toolName,
+              toolInput
+            };
+            broadcast(toolMsg);
+          },
+          onChangeProgress: (id, status, error) => {
+            const i = page.pendingChanges.findIndex((ch) => ch.id === id);
+            if (i !== -1) {
+              page.pendingChanges[i] = {
+                ...page.pendingChanges[i],
+                status,
+                errorMessage: error
+              };
+            }
+            ctx.saveState(state);
+            broadcast({ type: "apply:progress", changeId: id, status, error });
+            broadcast({ type: "state:update", taskId: state.currentTaskId, state });
+          }
+        }
+      });
+      broadcast({
+        type: "apply:complete",
+        success: result.success,
+        message: result.errors.length > 0 ? `Error: ${result.errors.join(", ")}` : "Change applied successfully"
+      });
+      broadcast({ type: "state:update", taskId: state.currentTaskId, state });
+    })();
+    return c.json({ accepted: true });
+  });
+  app.post("/apply-direct", async (c) => {
+    const { change } = await c.req.json();
+    console.error(`[spool] change:apply_direct for ${change.selector}`);
+    const directAbortController = new AbortController();
+    broadcast({ type: "apply:progress", changeId: change.id, status: "in_progress" });
+    (async () => {
+      const result = await processChanges({
+        changes: [{ ...change, status: "in_progress" }],
+        cwd: ctx.projectDir,
+        abortController: directAbortController,
+        callbacks: {
+          onText: (content, isPartial) => {
+            broadcast({
+              type: "stream:text",
+              taskId: `apply_direct_${change.id}`,
+              content,
+              isPartial
+            });
+          },
+          onToolCall: (toolName, toolInput) => {
+            broadcast({
+              type: "stream:tool_call",
+              taskId: `apply_direct_${change.id}`,
+              toolName,
+              toolInput
+            });
+          },
+          onChangeProgress: (id, status, error) => {
+            broadcast({ type: "apply:progress", changeId: id, status, error });
+          }
+        }
+      });
+      broadcast({
+        type: "apply:complete",
+        success: result.success,
+        message: result.errors.length > 0 ? `Error: ${result.errors.join(", ")}` : "Change applied successfully"
+      });
+    })();
+    return c.json({ accepted: true });
+  });
+  return app;
+}
+
+// src/orchestrator/routes/tasks.ts
+import { Hono as Hono4 } from "hono";
+import { execFileSync as execFileSync2 } from "child_process";
+
+// src/orchestrator/agent-runner.ts
+import { query as query2 } from "@anthropic-ai/claude-agent-sdk";
+
+// src/orchestrator/system-prompt.ts
+var ANNOTATION_INSTRUCTIONS = `You are implementing UI feedback from annotations. Users mark up UI elements in their browser and describe changes they want. Your job is to implement those changes.
+
+## Your Role
+
+Read annotations from .spool/state.json and implement the requested changes to the codebase.
+
+## Workflow
+
+For each annotation you implement:
+
+1. **Mark as in_progress**: Before starting work, update the annotation's status to "in_progress" in .spool/state.json. This shows a spinner in the user's browser.
+
+2. **Understand the request**: Read the annotation's:
+   - \`element.componentFile\` - The React component file to modify
+   - \`element.componentName\` - The component name
+   - \`element.selector\` - CSS selector identifying the element
+   - \`comments[].content\` - User's description of the desired change
+   - \`selectors[]\` - (optional) Additional CSS selectors for multi-element annotations
+   - \`elements[]\` - (optional) Additional element metadata for multi-element annotations
+
+   **Multi-element annotations**: When \`selectors\` and \`elements\` arrays are present, the user selected multiple elements together. Apply the requested change to ALL elements (the primary \`selector\`/\`element\` AND each item in \`selectors\`/\`elements\`).
+
+3. **Implement the change**: Make the minimal code changes needed. Follow existing patterns in the codebase.
+
+4. **Mark as done**: After successfully implementing, update the annotation's status to "done" in .spool/state.json. Set:
+   - \`status: "done"\`
+   - \`doneAt: "<current ISO timestamp>"\`
+   - \`doneBy: { id: "claude", name: "Claude" }\`
+
+## Updating state.json
+
+The state file is at \`.spool/state.json\`. Use the Edit tool to update annotation statuses. The structure is:
+
+\`\`\`json
+{
+  "pages": {
+    "<url>": {
+      "annotations": [
+        {
+          "id": "ann_xxx",
+          "status": "open",   // Change to "in_progress" then "done"
+          "doneAt": null,     // Set to ISO timestamp when done
+          "doneBy": null,     // Set to { "id": "claude", "name": "Claude" }
+          ...
+        }
+      ]
+    }
+  }
+}
+\`\`\`
+
+To mark as in_progress, edit:
+\`\`\`
+"status": "open"
+\`\`\`
+to:
+\`\`\`
+"status": "in_progress"
+\`\`\`
+
+To mark as done, edit:
+\`\`\`
+"status": "in_progress",
+      "doneAt": null,
+      "doneBy": null
+\`\`\`
+to:
+\`\`\`
+"status": "done",
+      "doneAt": "<timestamp>",
+      "doneBy": { "id": "claude", "name": "Claude" },
+      "commitSha": "<sha from git rev-parse HEAD>"
+\`\`\`
+
+## Git Commits
+
+After implementing each annotation's code changes (before marking as done):
+
+1. Stage only the files you modified for this annotation:
+   \`git add <file1> <file2> ...\`
+   Do NOT use \`git add -A\` or \`git add .\` \u2014 only add files you explicitly changed for this annotation.
+
+2. Commit with the annotation ID in the message:
+   \`git commit -m "[spool] <annotation-id>: <brief description of change>"\`
+
+3. Get the commit SHA:
+   Run \`git rev-parse HEAD\` and note the output.
+
+4. When marking done in state.json, include the commitSha field:
+   \`"status": "done"\`,
+   \`"doneAt": "<timestamp>"\`,
+   \`"doneBy": { "id": "claude", "name": "Claude" }\`,
+   \`"commitSha": "<sha from step 3>"\`
+
+## Answering Questions
+
+If an annotation's comment is a question (asking for information, clarification, or guidance rather than requesting a code change), add a reply comment to the annotation's comments array with your answer. The reply should have \`author: { "id": "claude", "name": "Claude" }\`. Then mark the annotation as done.
+
+## Constraints
+
+- Always update state.json status fields before and after implementing
+- Make minimal, focused changes - don't refactor unrelated code
+- Follow existing code patterns and conventions
+- If an annotation is unclear, implement your best interpretation
+- Process annotations one at a time, completing each before starting the next`;
+function buildAgentSystemPrompt(cwd) {
+  return `${ANNOTATION_INSTRUCTIONS}
+
+## Working Directory
+
+Your working directory is: ${cwd}
+You can ONLY access files within this directory. Do not attempt to access files outside it.
+
+## Tools
+
+You have the following tools available:
+- **Read**: Read file contents. Parameter: file_path (absolute path)
+- **Edit**: Replace text in a file. Parameters: file_path, old_string, new_string. Read a file before editing it.
+- **Write**: Create or overwrite a file. Parameters: file_path, content
+- **Glob**: Find files by pattern. Parameters: pattern, path (optional directory)
+- **Grep**: Search file contents. Parameters: pattern, path (optional directory)
+- **Bash**: Run shell commands. Only git commands are allowed (git add, git commit, git rev-parse).
+
+Always use absolute paths based on your working directory.`;
+}
+function buildTaskPrompt2(annotations) {
+  if (annotations.length === 0) {
+    return "There are no open annotations to address.";
+  }
+  const annotationList = annotations.map((a, i) => {
+    const comment = a.comments[0]?.content || "(no comment)";
+    const component = a.element?.componentFile ? `${a.element.componentName || "Unknown"} (${a.element.componentFile})` : a.element?.selector || "Unknown element";
+    let entry = `${i + 1}. **${a.id}** - ${component}
+   Request: "${comment}"`;
+    if (a.elements && a.elements.length > 0) {
+      const additionalList = a.elements.map((el) => {
+        if (el.componentFile) {
+          return `     - ${el.componentName || "Unknown"} (${el.componentFile})`;
+        }
+        return `     - ${el.selector || "Unknown element"}`;
+      }).join("\n");
+      entry += `
+   Additional elements:
+${additionalList}`;
+    } else if (a.selectors && a.selectors.length > 0) {
+      entry += `
+   Additional selectors: ${a.selectors.join(", ")}`;
+    }
+    return entry;
+  }).join("\n\n");
+  return `## Annotations to Address
+
+${annotationList}
+
+Please implement these changes. For each annotation:
+1. Mark it as in_progress in .spool/state.json
+2. Make the code changes
+3. Mark it as done in .spool/state.json
+
+Start with the first annotation.`;
+}
+
+// src/orchestrator/agent-runner.ts
+function getOpenAnnotations(state, annotationIds) {
+  const open = [];
+  for (const page of Object.values(state.pages)) {
+    for (const annotation of page.annotations) {
+      if (annotation.status !== "open") continue;
+      if (annotationIds && annotationIds.length > 0) {
+        if (annotationIds.includes(annotation.id)) {
+          open.push(annotation);
+        }
+      } else {
+        open.push(annotation);
+      }
+    }
+  }
+  return open;
+}
+function toSummaries(annotations) {
+  return annotations.map((a) => ({
+    id: a.id,
+    selector: a.selector,
+    selectors: a.selectors,
+    comments: a.comments.map((c) => ({ content: c.content })),
+    element: a.element ? {
+      selector: a.element.selector,
+      componentName: a.element.componentName,
+      componentFile: a.element.componentFile
+    } : void 0,
+    elements: a.elements?.map((el) => ({
+      selector: el.selector,
+      componentName: el.componentName,
+      componentFile: el.componentFile
+    }))
+  }));
+}
+async function runAgent(options) {
+  const { taskId, payload, state, cwd, callbacks, abortController } = options;
+  const openAnnotations = getOpenAnnotations(state, payload.annotationIds);
+  if (openAnnotations.length === 0) {
+    return {
+      success: true,
+      annotationsAddressed: 0,
+      message: "No open annotations to address"
+    };
+  }
+  const summaries = toSummaries(openAnnotations);
+  const taskPrompt = buildTaskPrompt2(summaries);
+  const fullPrompt = payload.feedback ? `${taskPrompt}
+
+## Additional Context from User
+
+${payload.feedback}` : taskPrompt;
+  let annotationsAddressed = 0;
+  let hasEmittedText = false;
+  try {
+    const stream = query2({
+      prompt: fullPrompt,
+      options: {
+        systemPrompt: buildAgentSystemPrompt(cwd),
+        cwd,
+        abortController,
+        // Use Claude Code's tools for file operations
+        tools: { type: "preset", preset: "claude_code" },
+        // Enable Skills and git commands for per-annotation commits
+        allowedTools: ["Skill", "Bash(git add*)", "Bash(git commit*)", "Bash(git rev-parse*)"],
+        // Block web access tools
+        disallowedTools: ["WebFetch", "WebSearch"],
+        // Enforce project directory boundaries
+        canUseTool: createPathEnforcer(cwd),
+        // Auto-accept edits since user initiated this
+        permissionMode: "acceptEdits",
+        // Include partial messages for streaming
+        includePartialMessages: true,
+        // Don't load external CLAUDE.md (would leak monorepo context into the isolated agent)
+        settingSources: [],
+        model: CLAUDE_MODEL
+      }
+    });
+    for await (const message of stream) {
+      if (abortController.signal.aborted) {
+        break;
+      }
+      switch (message.type) {
+        case "assistant": {
+          const assistantMessage = message.message;
+          if (assistantMessage.content) {
+            for (const block of assistantMessage.content) {
+              if (block.type === "tool_use") {
+                callbacks.onToolCall(block.name, block.input);
+                if (block.name === "Edit" && typeof block.input === "object" && block.input !== null) {
+                  const input = block.input;
+                  if (input.file_path?.includes("state.json") && input.new_string?.includes('"status": "done"')) {
+                    annotationsAddressed++;
+                    callbacks.onStateChange();
+                  } else if (input.file_path?.includes("state.json") && input.new_string?.includes('"status": "in_progress"')) {
+                    callbacks.onStateChange();
+                  }
+                }
+              }
+            }
+          }
+          break;
+        }
+        case "stream_event": {
+          const event = message.event;
+          if (event.type === "content_block_start") {
+            const contentBlock = event.content_block;
+            if (contentBlock?.type === "text" && hasEmittedText) {
+              callbacks.onText("\n\n", true);
+            }
+          }
+          if (event.type === "content_block_delta") {
+            const delta = event.delta;
+            if ("text" in delta) {
+              callbacks.onText(delta.text, true);
+              hasEmittedText = true;
+            }
+          }
+          break;
+        }
+        case "result": {
+          if (message.subtype === "success") {
+            return {
+              success: true,
+              annotationsAddressed,
+              message: message.result
+            };
+          } else {
+            const errors = "errors" in message ? message.errors : [];
+            return {
+              success: false,
+              annotationsAddressed,
+              message: errors.join(", ") || "Agent execution failed"
+            };
+          }
+        }
+      }
+    }
+    return {
+      success: abortController.signal.aborted ? false : true,
+      annotationsAddressed,
+      message: abortController.signal.aborted ? "Task cancelled" : "Completed"
+    };
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    return {
+      success: false,
+      annotationsAddressed,
+      message: `Agent error: ${errorMessage}`
+    };
+  }
+}
+
+// src/orchestrator/routes/tasks.ts
+function createTasksRoutes(ctx) {
+  const app = new Hono4();
+  app.post("/", async (c) => {
+    const { id: taskId, payload } = await c.req.json();
+    console.error(`[spool] task:submit received`);
+    console.error(`  Task ID: ${taskId}`);
+    console.error(`  Action: ${payload.action}`);
+    console.error(`  Annotation IDs: ${payload.annotationIds?.join(", ") || "all ready"}`);
+    let state = ctx.getState();
+    if (state.status === "generating") {
+      return c.json(
+        { error: { code: "ALREADY_GENERATING", message: "A task is already in progress" } },
+        409
+      );
+    }
+    state = { ...state, status: "generating", currentTaskId: taskId };
+    ctx.saveState(state);
+    ctx.setState(state);
+    broadcast({ type: "task:ack", taskId, status: "started" });
+    const abortController = new AbortController();
+    ctx.setTaskAbortController(abortController);
+    let originalBranch = null;
+    const branchName = `spool/${taskId}`;
+    try {
+      originalBranch = execFileSync2("git", ["rev-parse", "--abbrev-ref", "HEAD"], {
+        cwd: ctx.projectDir,
+        encoding: "utf-8"
+      }).trim();
+      execFileSync2("git", ["checkout", "-b", branchName], { cwd: ctx.projectDir, encoding: "utf-8" });
+      console.error(`[spool] Created branch ${branchName} from ${originalBranch}`);
+    } catch (e) {
+      console.error(`[spool] Could not create branch: ${e}`);
+      originalBranch = null;
+    }
+    runAgent({
+      taskId,
+      payload,
+      state,
+      cwd: ctx.projectDir,
+      abortController,
+      callbacks: {
+        onText: (content, isPartial) => {
+          broadcast({ type: "stream:text", taskId, content, isPartial });
+        },
+        onToolCall: (toolName, toolInput) => {
+          broadcast({ type: "stream:tool_call", taskId, toolName, toolInput });
+        },
+        onStateChange: () => {
+          const newState = ctx.loadState();
+          const currentState2 = ctx.getState();
+          if (JSON.stringify(newState) !== JSON.stringify(currentState2)) {
+            ctx.setState(newState);
+            broadcast({ type: "state:update", taskId, state: newState });
+          }
+        }
+      }
+    }).then((result) => {
+      console.error(`[spool] Task ${taskId} completed:`, result);
+      if (originalBranch) {
+        try {
+          execFileSync2("git", ["checkout", originalBranch], { cwd: ctx.projectDir, encoding: "utf-8" });
+          execFileSync2(
+            "git",
+            ["merge", "--no-ff", branchName, "-m", `Merge annotation changes (${taskId})`],
+            { cwd: ctx.projectDir, encoding: "utf-8" }
+          );
+          execFileSync2("git", ["branch", "-d", branchName], { cwd: ctx.projectDir, encoding: "utf-8" });
+          console.error(`[spool] Merged ${branchName} into ${originalBranch}`);
+        } catch (e) {
+          console.error(`[spool] Branch merge/cleanup error: ${e}`);
+        }
+      }
+      let s = ctx.getState();
+      s = { ...s, status: "idle", currentTaskId: null };
+      ctx.saveState(s);
+      ctx.setState(s);
+      broadcast({ type: "task:complete", taskId, result });
+      if (ctx.getTaskAbortController() === abortController) {
+        ctx.setTaskAbortController(null);
+      }
+    }).catch((error) => {
+      console.error(`[spool] Task ${taskId} error:`, error);
+      if (originalBranch) {
+        try {
+          execFileSync2("git", ["checkout", originalBranch], { cwd: ctx.projectDir, encoding: "utf-8" });
+          execFileSync2("git", ["branch", "-D", branchName], { cwd: ctx.projectDir, encoding: "utf-8" });
+        } catch {
+        }
+      }
+      let s = ctx.getState();
+      s = { ...s, status: "idle", currentTaskId: null };
+      ctx.saveState(s);
+      ctx.setState(s);
+      broadcast({
+        type: "task:error",
+        taskId,
+        error: {
+          code: "EXECUTION_ERROR",
+          message: error instanceof Error ? error.message : String(error)
+        }
+      });
+      if (ctx.getTaskAbortController() === abortController) {
+        ctx.setTaskAbortController(null);
+      }
+    });
+    return c.json({ taskId, status: "started" });
+  });
+  app.post("/:id/cancel", async (c) => {
+    const taskId = c.req.param("id");
+    console.error(`[spool] task:cancel received for ${taskId}`);
+    const state = ctx.getState();
+    if (state.currentTaskId !== taskId) {
+      return c.json({ error: "Task is not current" }, 404);
+    }
+    const ac = ctx.getTaskAbortController();
+    if (ac) {
+      ac.abort();
+      ctx.setTaskAbortController(null);
+    }
+    const newState = { ...state, status: "idle", currentTaskId: null };
+    ctx.saveState(newState);
+    ctx.setState(newState);
+    return c.json({ ok: true });
+  });
+  return app;
+}
+
+// src/orchestrator/routes/variants.ts
+import { Hono as Hono5 } from "hono";
+
+// src/orchestrator/variant-generator.ts
+import { query as query3 } from "@anthropic-ai/claude-agent-sdk";
+function buildSystemPrompt2() {
+  return `You are a UI design assistant that generates alternative HTML/JSX variants for UI elements.
+
+## Your Task
+
+Given an element's current state and a user's prompt, generate 3-6 alternative HTML/JSX variants.
+
+## Output Format
+
+You MUST output EXACTLY the following JSON structure and nothing else:
+
+\`\`\`json
+{
+  "variants": [
+    {
+      "html": "<button class=\\"...\\">....</button>",
+      "description": "Brief description of this variant"
+    },
+    {
+      "html": "<button class=\\"...\\">....</button>",
+      "description": "Brief description of this variant"
+    }
+  ]
+}
+\`\`\`
+
+## Guidelines
+
+1. Generate 3-6 meaningful alternatives based on the user's prompt
+2. Each variant should be a complete, self-contained HTML/JSX snippet
+3. Use Tailwind CSS classes for styling (assume the project uses Tailwind)
+4. Include brief descriptions explaining what makes each variant different
+5. Variants should be progressively more creative/different from the original
+6. Ensure all variants are semantically equivalent (same purpose/functionality)
+7. Output ONLY the JSON - no explanations before or after
+
+## Examples
+
+If user says "make it more prominent":
+- Variant 1: Larger font and more padding
+- Variant 2: Bold colors and shadow
+- Variant 3: Animated hover effect
+- Variant 4: Gradient background
+
+If user says "make it more subtle":
+- Variant 1: Lighter colors
+- Variant 2: Reduced padding and smaller text
+- Variant 3: Ghost/outline style
+- Variant 4: Minimal with icon only
+`;
+}
+function buildTaskPrompt3(payload) {
+  const { element, prompt, currentHtml } = payload;
+  const elementInfo = [
+    `Tag: ${element.tagName}`,
+    element.componentName && `Component: ${element.componentName}`,
+    element.componentFile && `File: ${element.componentFile}`
+  ].filter(Boolean).join("\n");
+  return `## Element Information
+
+${elementInfo}
+
+## Current HTML
+${currentHtml || "(not provided - generate based on element info)"}
+
+## User Request
+"${prompt}"
+
+Generate 3-6 HTML/JSX variants based on the user's request. Output ONLY the JSON structure described.`;
+}
+function parseVariants(text) {
+  console.error("[variant-generator] Parsing response, length:", text.length);
+  console.error("[variant-generator] Response preview:", text.slice(0, 300));
+  const jsonBlockMatch = text.match(/```json\s*([\s\S]*?)\s*```/);
+  if (jsonBlockMatch) {
+    console.error("[variant-generator] Found JSON code block");
+    try {
+      const parsed = JSON.parse(jsonBlockMatch[1]);
+      if (Array.isArray(parsed.variants)) {
+        return parsed.variants.map((v, i) => ({
+          html: v.html || "",
+          metadata: { description: v.description || `Variant ${i + 1}` }
+        }));
+      }
+    } catch (e) {
+      console.error("[variant-generator] Failed to parse JSON block:", e);
+    }
+  }
+  const objectMatch = text.match(/\{[\s\S]*?"variants"\s*:\s*\[[\s\S]*?\]\s*\}/);
+  if (objectMatch) {
+    console.error("[variant-generator] Found JSON object with variants key");
+    try {
+      const parsed = JSON.parse(objectMatch[0]);
+      if (Array.isArray(parsed.variants)) {
+        return parsed.variants.map((v, i) => ({
+          html: v.html || "",
+          metadata: { description: v.description || `Variant ${i + 1}` }
+        }));
+      }
+    } catch (e) {
+      console.error("[variant-generator] Failed to parse object match:", e);
+    }
+  }
+  const arrayMatch = text.match(/\[\s*\{[\s\S]*?"html"[\s\S]*?\}\s*\]/);
+  if (arrayMatch) {
+    console.error("[variant-generator] Found array with html objects");
+    try {
+      const parsed = JSON.parse(arrayMatch[0]);
+      if (Array.isArray(parsed)) {
+        return parsed.map((v, i) => ({
+          html: v.html || "",
+          metadata: { description: v.description || `Variant ${i + 1}` }
+        }));
+      }
+    } catch (e) {
+      console.error("[variant-generator] Failed to parse array:", e);
+    }
+  }
+  try {
+    const parsed = JSON.parse(text.trim());
+    if (Array.isArray(parsed.variants)) {
+      return parsed.variants.map((v, i) => ({
+        html: v.html || "",
+        metadata: { description: v.description || `Variant ${i + 1}` }
+      }));
+    }
+    if (Array.isArray(parsed)) {
+      return parsed.map((v, i) => ({
+        html: v.html || "",
+        metadata: { description: v.description || `Variant ${i + 1}` }
+      }));
+    }
+  } catch (e) {
+  }
+  console.error("[variant-generator] Could not parse variants from response");
+  console.error("[variant-generator] Full response:", text);
+  return [];
+}
+async function generateVariants(payload, cwd) {
+  const systemPrompt = buildSystemPrompt2();
+  const taskPrompt = buildTaskPrompt3(payload);
+  let responseText = "";
+  console.error("[variant-generator] Starting variant generation");
+  console.error("[variant-generator] Prompt:", payload.prompt);
+  console.error("[variant-generator] Element:", payload.element.tagName, payload.element.componentName);
+  try {
+    const stream = query3({
+      prompt: taskPrompt,
+      options: {
+        systemPrompt,
+        cwd,
+        tools: { type: "preset", preset: "claude_code" },
+        allowedTools: [],
+        // No tools needed for this task
+        permissionMode: "acceptEdits",
+        includePartialMessages: false,
+        model: CLAUDE_MODEL,
+        maxTurns: 1
+        // Single turn is enough for variant generation
+      }
+    });
+    for await (const message of stream) {
+      switch (message.type) {
+        case "stream_event": {
+          const event = message.event;
+          if (event.type === "content_block_delta") {
+            const delta = event.delta;
+            if ("text" in delta) {
+              responseText += delta.text;
+              if (responseText.length % 500 < 50) {
+                console.error("[variant-generator] Received", responseText.length, "chars so far");
+              }
+            }
+          }
+          break;
+        }
+        case "assistant": {
+          const assistantMessage = message.message;
+          if (assistantMessage.content) {
+            for (const block of assistantMessage.content) {
+              if (block.type === "text" && block.text) {
+                console.error("[variant-generator] Got text from assistant message, length:", block.text.length);
+                if (!responseText) {
+                  responseText = block.text;
+                }
+              }
+            }
+          }
+          break;
+        }
+        case "result": {
+          if (message.subtype !== "success") {
+            const errors = "errors" in message ? message.errors : [];
+            return {
+              variants: [],
+              error: errors.join(", ") || "Failed to generate variants"
+            };
+          }
+          break;
+        }
+      }
+    }
+    console.error("[variant-generator] Stream complete, total response length:", responseText.length);
+    const variants = parseVariants(responseText);
+    console.error("[variant-generator] Parsed", variants.length, "variants");
+    if (variants.length === 0) {
+      return {
+        variants: [],
+        error: "Failed to parse variants from response"
+      };
+    }
+    return { variants };
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    console.error("[variant-generator] Error:", errorMessage);
+    return {
+      variants: [],
+      error: errorMessage
+    };
+  }
+}
+
+// src/orchestrator/routes/variants.ts
+function createVariantsRoutes(ctx) {
+  const app = new Hono5();
+  app.post("/generate", async (c) => {
+    const { selector, prompt, elementHtml, elementInfo } = await c.req.json();
+    console.error(`[spool] variant:generate for ${selector}`);
+    console.error(`  Prompt: ${prompt}`);
+    try {
+      const result = await generateVariants(
+        {
+          selector,
+          element: {
+            tagName: elementInfo.tagName,
+            componentName: elementInfo.componentName,
+            componentFile: elementInfo.componentFile
+          },
+          prompt,
+          currentHtml: elementHtml
+        },
+        ctx.projectDir
+      );
+      return c.json({ variants: result.variants, error: result.error });
+    } catch (error) {
+      console.error("[spool] variant:generate error:", error);
+      return c.json({
+        variants: [],
+        error: error instanceof Error ? error.message : String(error)
+      });
+    }
+  });
+  return app;
+}
+
+// src/orchestrator/routes/chat.ts
+import { Hono as Hono6 } from "hono";
+
+// src/orchestrator/chat-handler.ts
+import { query as query4 } from "@anthropic-ai/claude-agent-sdk";
+function buildChatSystemPrompt(cwd) {
+  return `You are an AI assistant helping a developer with their React application through a chat interface.
+The developer can reference specific UI elements in their messages by clicking on them in the browser.
+
+## Working Directory
+
+Your working directory is: ${cwd}
+You can ONLY access files within this directory. Do not attempt to access files outside it.
+
+## Tools
+
+You have the following tools available:
+- **Read**: Read file contents. Parameter: file_path (absolute path)
+- **Edit**: Replace text in a file. Parameters: file_path, old_string, new_string
+- **Write**: Create or overwrite a file. Parameters: file_path, content
+- **Glob**: Find files by pattern. Parameters: pattern, path (optional directory)
+- **Grep**: Search file contents. Parameters: pattern, path (optional directory)
+
+Always use absolute paths based on your working directory. Read a file before editing it.
+
+## Element References
+
+When the user references UI elements, you'll see them in the prompt with their details:
+- CSS selector to locate the element
+- Component name and file location (if available)
+- Text content of the element
+
+Use this information to understand what the user is talking about and make targeted changes.
+
+## Capabilities
+
+You can:
+1. **Answer questions** about the codebase, UI elements, or implementation approaches
+2. **Make code changes** when the user requests modifications to their UI or code
+3. **Explain code** and help the user understand how things work
+4. **Suggest improvements** when asked for recommendations
+
+## Guidelines
+
+- Be conversational and helpful
+- When making changes, explain what you're doing
+- If the user's request is unclear, ask clarifying questions
+- Keep responses focused and relevant to the user's question
+- When referencing files, use the component file paths provided in element references when available
+- Focus exclusively on the user's React application code`;
+}
+function buildChatPrompt(content, elementRefs, history) {
+  const parts = [];
+  if (history.length > 0) {
+    parts.push("## Conversation History\n");
+    for (const msg of history) {
+      const role = msg.role === "user" ? "User" : "Assistant";
+      parts.push(`**${role}:** ${msg.content}
+`);
+    }
+    parts.push("");
+  }
+  if (elementRefs.length > 0) {
+    parts.push("## Referenced UI Elements\n");
+    for (const ref of elementRefs) {
+      parts.push(`### Element: ${ref.element.componentName || ref.element.tagName}`);
+      parts.push(`- **Selector:** \`${ref.selector}\``);
+      if (ref.element.componentName) {
+        parts.push(`- **Component:** ${ref.element.componentName}`);
+      }
+      if (ref.element.componentFile) {
+        parts.push(`- **File:** ${ref.element.componentFile}${ref.element.lineNumber ? `:${ref.element.lineNumber}` : ""}`);
+      }
+      if (ref.element.textContent) {
+        const truncated = ref.element.textContent.length > 100 ? ref.element.textContent.slice(0, 100) + "..." : ref.element.textContent;
+        parts.push(`- **Text:** "${truncated}"`);
+      }
+      if (ref.element.className) {
+        parts.push(`- **Classes:** ${ref.element.className}`);
+      }
+      parts.push("");
+    }
+  }
+  parts.push("## Current Message\n");
+  parts.push(content);
+  return parts.join("\n");
+}
+async function handleChat(options) {
+  const { messageId, content, elementRefs, history, cwd, callbacks, abortController } = options;
+  const prompt = buildChatPrompt(content, elementRefs, history);
+  let responseContent = "";
+  try {
+    const stream = query4({
+      prompt,
+      options: {
+        systemPrompt: buildChatSystemPrompt(cwd),
+        cwd,
+        abortController,
+        // Use Claude Code's tools for file operations
+        tools: { type: "preset", preset: "claude_code" },
+        // Only allow file-access tools — no Bash, WebFetch, or WebSearch
+        allowedTools: ["Read", "Edit", "Write", "Glob", "Grep"],
+        // Enforce project directory boundaries
+        canUseTool: createPathEnforcer(cwd),
+        // Auto-accept edits since user initiated this via chat
+        permissionMode: "acceptEdits",
+        // Include partial messages for streaming
+        includePartialMessages: true,
+        // Don't load external CLAUDE.md (would leak monorepo context into the isolated agent)
+        settingSources: [],
+        model: CLAUDE_MODEL
+      }
+    });
+    for await (const message of stream) {
+      if (abortController.signal.aborted) {
+        break;
+      }
+      switch (message.type) {
+        case "assistant": {
+          const assistantMessage = message.message;
+          if (assistantMessage.content) {
+            for (const block of assistantMessage.content) {
+              if (block.type === "tool_use") {
+                callbacks.onToolCall(block.name, block.input);
+              } else if (block.type === "text") {
+                if (!responseContent.includes(block.text)) {
+                  responseContent += block.text;
+                }
+              }
+            }
+          }
+          break;
+        }
+        case "stream_event": {
+          const event = message.event;
+          if (event.type === "content_block_start") {
+            const contentBlock = event.content_block;
+            if (contentBlock?.type === "text" && responseContent.length > 0) {
+              if (!responseContent.endsWith("\n\n")) {
+                const sep2 = responseContent.endsWith("\n") ? "\n" : "\n\n";
+                responseContent += sep2;
+                callbacks.onText(sep2, true);
+              }
+            }
+          }
+          if (event.type === "content_block_delta") {
+            const delta = event.delta;
+            if ("text" in delta) {
+              responseContent += delta.text;
+              callbacks.onText(delta.text, true);
+            }
+          }
+          break;
+        }
+        case "user": {
+          break;
+        }
+        case "result": {
+          if (message.subtype === "success") {
+            return {
+              success: true,
+              responseContent
+            };
+          } else {
+            const errors = "errors" in message ? message.errors : [];
+            return {
+              success: false,
+              error: errors.join(", ") || "Chat request failed",
+              responseContent
+            };
+          }
+        }
+      }
+    }
+    return {
+      success: !abortController.signal.aborted,
+      error: abortController.signal.aborted ? "Chat cancelled" : void 0,
+      responseContent
+    };
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    return {
+      success: false,
+      error: `Chat error: ${errorMessage}`,
+      responseContent
+    };
+  }
+}
+
+// src/orchestrator/routes/chat.ts
+function createChatRoutes(ctx) {
+  const app = new Hono6();
+  app.post("/", async (c) => {
+    const { id: messageId, content, elementRefs, history } = await c.req.json();
+    console.error(`[spool] chat:send received`);
+    console.error(`  Message ID: ${messageId}`);
+    console.error(`  Content: ${content.slice(0, 100)}${content.length > 100 ? "..." : ""}`);
+    console.error(`  Element refs: ${elementRefs.length}`);
+    const prevAc = ctx.getChatAbortController();
+    if (prevAc) {
+      console.error(`[spool] Chat already in progress, aborting previous`);
+      prevAc.abort();
+    }
+    const abortController = new AbortController();
+    ctx.setChatAbortController(abortController);
+    ctx.setChatMessageId(messageId);
+    handleChat({
+      messageId,
+      content,
+      elementRefs,
+      history,
+      cwd: ctx.projectDir,
+      abortController,
+      callbacks: {
+        onText: (text, isPartial) => {
+          broadcast({ type: "chat:stream", messageId, content: text, isPartial });
+        },
+        onToolCall: (toolName, toolInput) => {
+          broadcast({ type: "chat:tool_call", messageId, toolName, toolInput });
+        }
+      }
+    }).then((result) => {
+      console.error(`[spool] Chat ${messageId} completed:`, result.success);
+      const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+      const updatedHistory = [
+        ...history,
+        {
+          id: messageId + "_user",
+          role: "user",
+          content,
+          elementRefs,
+          timestamp
+        }
+      ];
+      if (result.responseContent) {
+        updatedHistory.push({
+          id: messageId,
+          role: "assistant",
+          content: result.responseContent,
+          timestamp
+        });
+      }
+      let state = ctx.getState();
+      state = { ...state, chatMessages: updatedHistory };
+      ctx.saveState(state);
+      ctx.setState(state);
+      broadcast({ type: "state:update", taskId: state.currentTaskId, state });
+      broadcast({
+        type: "chat:complete",
+        messageId,
+        success: result.success,
+        error: result.error
+      });
+      if (ctx.getChatMessageId() === messageId) {
+        ctx.setChatAbortController(null);
+        ctx.setChatMessageId(null);
+      }
+    }).catch((error) => {
+      console.error(`[spool] Chat ${messageId} error:`, error);
+      broadcast({
+        type: "chat:complete",
+        messageId,
+        success: false,
+        error: error instanceof Error ? error.message : String(error)
+      });
+      if (ctx.getChatMessageId() === messageId) {
+        ctx.setChatAbortController(null);
+        ctx.setChatMessageId(null);
+      }
+    });
+    return c.json({ messageId });
+  });
+  app.post("/cancel", async (c) => {
+    const { messageId } = await c.req.json();
+    console.error(`[spool] chat:cancel for ${messageId}`);
+    if (ctx.getChatMessageId() !== messageId) {
+      return c.json({ error: "Not current chat" }, 404);
+    }
+    const ac = ctx.getChatAbortController();
+    if (ac) {
+      ac.abort();
+      ctx.setChatAbortController(null);
+      ctx.setChatMessageId(null);
+    }
+    return c.json({ ok: true });
+  });
+  app.put("/history", async (c) => {
+    const { messages } = await c.req.json();
+    console.error(`[spool] chat:history:update (${messages.length} messages)`);
+    let state = ctx.getState();
+    state = { ...state, chatMessages: messages };
+    ctx.saveState(state);
+    ctx.setState(state);
+    broadcast({ type: "state:update", taskId: state.currentTaskId, state });
+    return c.json({ ok: true });
+  });
+  return app;
+}
+
+// src/orchestrator/index.ts
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = path2.dirname(__filename);
+var require2 = createRequire(import.meta.url);
+var DEFAULT_PORT = 3142;
+var STATE_FILE = ".spool/state.json";
+function generateAppId(dir) {
+  const hash = crypto.createHash("sha256").update(dir).digest("hex").slice(0, 8);
+  return `spool_${hash}`;
+}
+function parseProjectDir() {
+  const args = process.argv;
+  const idx = args.indexOf("--project-dir");
+  if (idx !== -1 && idx + 1 < args.length) {
+    const dir = path2.resolve(args[idx + 1]);
+    if (!fs2.existsSync(dir) || !fs2.statSync(dir).isDirectory()) {
+      console.error(`[annotate-server] --project-dir "${args[idx + 1]}" is not a valid directory`);
+      process.exit(1);
+    }
+    return dir;
+  }
+  return process.cwd();
+}
+var projectDir = parseProjectDir();
+var currentState = createEmptyState(generateAppId(projectDir));
+var stateFilePath;
+function getStateFilePath() {
+  if (!stateFilePath) {
+    stateFilePath = path2.resolve(projectDir, STATE_FILE);
+  }
+  return stateFilePath;
+}
+function ensureStateDir() {
+  const dir = path2.dirname(getStateFilePath());
+  if (!fs2.existsSync(dir)) {
+    fs2.mkdirSync(dir, { recursive: true });
+  }
+}
+function loadState() {
+  const filePath = getStateFilePath();
+  if (fs2.existsSync(filePath)) {
+    try {
+      const content = fs2.readFileSync(filePath, "utf-8");
+      const state = JSON.parse(content);
+      console.error(`[spool] Loaded state from ${filePath}`);
+      return state;
+    } catch (error) {
+      console.error(`[spool] Error loading state:`, error);
+    }
+  }
+  console.error(`[spool] No state file found, starting fresh`);
+  return createEmptyState(generateAppId(projectDir));
+}
+function saveState(state) {
+  ensureStateDir();
+  const filePath = getStateFilePath();
+  try {
+    fs2.writeFileSync(filePath, JSON.stringify(state, null, 2), "utf-8");
+    console.error(`[spool] Saved state to ${filePath}`);
+  } catch (error) {
+    console.error(`[spool] Error saving state:`, error);
+  }
+}
+var currentTaskAbortController = null;
+var currentChatAbortController = null;
+var currentChatMessageId = null;
+var fileWatcher = null;
+function startFileWatcher() {
+  const filePath = getStateFilePath();
+  ensureStateDir();
+  fileWatcher = watch(filePath, {
+    persistent: true,
+    ignoreInitial: true,
+    awaitWriteFinish: {
+      stabilityThreshold: 100,
+      pollInterval: 50
+    }
+  });
+  fileWatcher.on("change", () => {
+    console.error(`[spool] State file changed, reloading...`);
+    const newState = loadState();
+    if (JSON.stringify(newState) !== JSON.stringify(currentState)) {
+      currentState = newState;
+      const update = {
+        type: "state:update",
+        taskId: currentState.currentTaskId,
+        state: currentState
+      };
+      broadcast(update);
+    }
+  });
+  fileWatcher.on("add", () => {
+    console.error(`[spool] State file created`);
+    currentState = loadState();
+    const update = {
+      type: "state:update",
+      taskId: currentState.currentTaskId,
+      state: currentState
+    };
+    broadcast(update);
+  });
+  fileWatcher.on("error", (error) => {
+    console.error(`[spool] File watcher error:`, error);
+  });
+  console.error(`[spool] Watching ${filePath} for changes`);
+}
+function stopFileWatcher() {
+  if (fileWatcher) {
+    fileWatcher.close();
+    fileWatcher = null;
+  }
+}
+function findInjectScript() {
+  try {
+    const injectPkg = require2.resolve("@nicmeriano/spool-inject/package.json");
+    const injectDir = path2.dirname(injectPkg);
+    const injectPath = path2.join(injectDir, "dist", "inject.js");
+    if (fs2.existsSync(injectPath)) {
+      return injectPath;
+    }
+  } catch {
+  }
+  const possiblePaths = [
+    path2.resolve(__dirname, "../../inject/dist/inject.js"),
+    path2.resolve(__dirname, "../../../inject/dist/inject.js")
+  ];
+  for (const scriptPath of possiblePaths) {
+    if (fs2.existsSync(scriptPath)) {
+      return scriptPath;
+    }
+  }
+  return null;
+}
+var MIME_TYPES = {
+  ".html": "text/html",
+  ".js": "application/javascript",
+  ".css": "text/css",
+  ".json": "application/json",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".gif": "image/gif",
+  ".svg": "image/svg+xml",
+  ".ico": "image/x-icon",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+  ".ttf": "font/ttf"
+};
+function findShellDist() {
+  try {
+    const shellPkg = require2.resolve("@nicmeriano/spool-shell/package.json");
+    const shellDir = path2.dirname(shellPkg);
+    const distDir = path2.join(shellDir, "dist");
+    if (fs2.existsSync(distDir)) {
+      return distDir;
+    }
+  } catch {
+  }
+  const possiblePaths = [
+    path2.resolve(__dirname, "../../shell/dist"),
+    path2.resolve(process.cwd(), "packages/shell/dist"),
+    path2.resolve(process.cwd(), "../shell/dist")
+  ];
+  for (const distPath of possiblePaths) {
+    if (fs2.existsSync(distPath)) {
+      return distPath;
+    }
+  }
+  return null;
+}
+async function startServer(options = {}) {
+  const port = options.port ?? parseInt(process.env.PORT || String(DEFAULT_PORT), 10);
+  if (options.cwd) {
+    projectDir = path2.resolve(options.cwd);
+    stateFilePath = "";
+  }
+  console.error(`[spool] Project directory: ${projectDir}`);
+  currentState = loadState();
+  if (currentState.appUrl) {
+    currentState.appUrl = void 0;
+  }
+  if (currentState.status === "generating") {
+    console.error(`[spool] Recovering from interrupted task, resetting state`);
+    currentState.status = "idle";
+    currentState.currentTaskId = null;
+    for (const page of Object.values(currentState.pages)) {
+      for (const ann of page.annotations) {
+        if (ann.status === "in_progress") {
+          ann.status = "open";
+        }
+      }
+    }
+    saveState(currentState);
+  }
+  const routeCtx = {
+    getState: () => currentState,
+    setState: (s) => {
+      currentState = s;
+    },
+    saveState,
+    loadState,
+    projectDir,
+    getTaskAbortController: () => currentTaskAbortController,
+    setTaskAbortController: (ac) => {
+      currentTaskAbortController = ac;
+    },
+    getChatAbortController: () => currentChatAbortController,
+    setChatAbortController: (ac) => {
+      currentChatAbortController = ac;
+    },
+    getChatMessageId: () => currentChatMessageId,
+    setChatMessageId: (id) => {
+      currentChatMessageId = id;
+    }
+  };
+  const app = new Hono7();
+  app.use("/*", cors({
+    origin: (origin) => {
+      if (!origin) return "*";
+      try {
+        const hostname = new URL(origin).hostname;
+        return hostname === "localhost" || hostname === "127.0.0.1" ? origin : null;
+      } catch {
+        return null;
+      }
+    }
+  }));
+  app.route("/api", createEventsRoutes(routeCtx));
+  app.route("/api/annotations", createAnnotationsRoutes(routeCtx));
+  app.route("/api/changes", createChangesRoutes(routeCtx));
+  app.route("/api/tasks", createTasksRoutes(routeCtx));
+  app.route("/api/variants", createVariantsRoutes(routeCtx));
+  app.route("/api/chat", createChatRoutes(routeCtx));
+  app.get("/health", (c) => {
+    const openCount = Object.values(currentState.pages).flatMap((p) => p.annotations).filter((a) => a.status === "open").length;
+    return c.json({
+      status: "ok",
+      open_annotations: openCount,
+      connected_clients: getClientCount()
+    });
+  });
+  app.get("/inject.js", (c) => {
+    const injectPath = findInjectScript();
+    if (!injectPath) {
+      console.error(`[spool] inject.js not found. Run 'pnpm build' in packages/inject.`);
+      return c.text("inject.js not found - please build the inject package", 404);
+    }
+    try {
+      const content = fs2.readFileSync(injectPath, "utf-8");
+      return c.text(content, 200, {
+        "Content-Type": "application/javascript",
+        "Cache-Control": "no-cache"
+      });
+    } catch (error) {
+      console.error(`[spool] Error reading inject.js:`, error);
+      return c.text("Error reading inject.js", 500);
+    }
+  });
+  app.get("/*", (c) => {
+    const shellDist = findShellDist();
+    if (!shellDist) {
+      return c.text("Not Found", 404);
+    }
+    const urlPath = new URL(c.req.url).pathname;
+    const filePath = path2.join(shellDist, urlPath);
+    if (fs2.existsSync(filePath) && fs2.statSync(filePath).isFile()) {
+      const ext = path2.extname(filePath);
+      const contentType = MIME_TYPES[ext] || "application/octet-stream";
+      try {
+        const content = fs2.readFileSync(filePath);
+        return new Response(content, {
+          status: 200,
+          headers: { "Content-Type": contentType }
+        });
+      } catch {
+      }
+    }
+    const indexPath = path2.join(shellDist, "index.html");
+    if (fs2.existsSync(indexPath)) {
+      try {
+        const content = fs2.readFileSync(indexPath, "utf-8");
+        return c.html(content);
+      } catch {
+      }
+    }
+    return c.text("Not Found", 404);
+  });
+  startFileWatcher();
+  const server = createAdaptorServer(app);
+  const MAX_PORT_ATTEMPTS = 20;
+  await new Promise((resolve3, reject) => {
+    let currentPort = port;
+    let attempts = 0;
+    const tryListen = () => {
+      server.once("error", onError);
+      server.listen(currentPort, () => {
+        server.removeListener("error", onError);
+        const actualPort = currentPort;
+        console.error(`[spool] HTTP + SSE server listening on http://localhost:${actualPort}`);
+        if (actualPort !== port) {
+          console.error(`[spool] Port ${port} was in use, using ${actualPort} instead`);
+        }
+        console.error(`[spool] SSE endpoint at http://localhost:${actualPort}/api/events`);
+        console.error(`[spool] Health check at http://localhost:${actualPort}/health`);
+        console.error(`[spool] Inject script at http://localhost:${actualPort}/inject.js`);
+        console.error(`[spool] State file: ${getStateFilePath()}`);
+        try {
+          ensureStateDir();
+          const portFilePath = path2.resolve(projectDir, ".spool/port");
+          fs2.writeFileSync(portFilePath, String(actualPort), "utf-8");
+          console.error(`[spool] Wrote port ${actualPort} to ${portFilePath}`);
+        } catch (e) {
+          console.error(`[spool] Failed to write port file:`, e);
+        }
+        resolve3();
+      });
+    };
+    function onError(err) {
+      if (err.code === "EADDRINUSE") {
+        attempts++;
+        if (attempts >= MAX_PORT_ATTEMPTS) {
+          console.error(`[spool] Could not find an available port after ${MAX_PORT_ATTEMPTS} attempts`);
+          stopFileWatcher();
+          reject(err);
+          return;
+        }
+        currentPort++;
+        console.error(`[spool] Port ${currentPort - 1} is in use, trying ${currentPort}...`);
+        tryListen();
+      } else {
+        reject(err);
+      }
+    }
+    tryListen();
+  });
+  const shutdown = () => {
+    console.error(`[spool] Shutting down...`);
+    stopFileWatcher();
+    try {
+      const portFilePath = path2.resolve(projectDir, ".spool/port");
+      if (fs2.existsSync(portFilePath)) fs2.unlinkSync(portFilePath);
+    } catch {
+    }
+    server.close();
+    process.exit(0);
+  };
+  process.on("SIGINT", shutdown);
+  process.on("SIGTERM", shutdown);
+}
+export {
+  CLAUDE_AUTHOR,
+  CLAUDE_MODEL,
+  createEmptyState,
+  findAnnotationInState,
+  getAnnotationsFromState,
+  startServer,
+  updateAnnotationInState
+};
+//# sourceMappingURL=index.js.map