skema-core 0.1.0 → 0.1.2

package/dist/server.js

@@ -2,8 +2,37 @@
 
 var child_process = require('child_process');
 var generativeAi = require('@google/generative-ai');
+var ws = require('ws');
+var fs = require('fs');
+var path = require('path');
 
-// src/server/gemini-cli.ts
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var fs__namespace = /*#__PURE__*/_interopNamespace(fs);
+var path__namespace = /*#__PURE__*/_interopNamespace(path);
+
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 
 // src/lib/utils.ts
 function getGridCellReference(x, y, gridSize = 100) {
@@ -13,6 +42,204 @@ function getGridCellReference(x, y, gridSize = 100) {
   return `${colLabel}${row}`;
 }
 
+// src/server/prompts.ts
+var CRITICAL_RULES = `CRITICAL RULES:
+- Do NOT create new files. Only edit existing files.
+- Do NOT modify the import { SkemaWrapper } from "@/components/skema-wrapper" line.
+- Ensure all JSX tags are properly closed - every <tag> needs a matching </tag>.
+- Do NOT run any shell commands. No npm, no git, no lint, no build commands. Just edit files.
+- STOP immediately after making the file changes. Do not verify, do not run tests, do not check status.`;
+var JSX_VALIDATION_RULE = `JSX SYNTAX: Every opening tag (<div>, <a>, <span>, <button>) MUST have a matching closing tag. Self-closing tags (<img />, <input />, <br />) must end with />.`;
+function buildFastDomSelectionPrompt(input) {
+  const { comment, selector, text, tagName } = input;
+  const parts = [];
+  if (tagName) {
+    parts.push(`<${tagName.toLowerCase()}>`);
+  }
+  if (selector) {
+    parts.push(`selector: ${selector}`);
+  }
+  if (text) {
+    parts.push(`text: "${text.slice(0, 50)}"`);
+  }
+  const target = parts.length > 0 ? ` (${parts.join(" | ")})` : "";
+  return `${comment}${target}. Make the change directly, no explanation needed. ${CRITICAL_RULES} ${JSX_VALIDATION_RULE}`;
+}
+function buildDetailedDomSelectionPrompt(input) {
+  const { comment, tagName, selector, text, elementPath, cssClasses, attributes, elements } = input;
+  let prompt = `Make this code change: "${comment || "No specific comment provided"}"
+
+## Target Element
+- Tag: <${tagName?.toLowerCase() || "unknown"}>`;
+  if (selector) {
+    prompt += `
+- Selector: ${selector}`;
+  }
+  if (elementPath) {
+    prompt += `
+- DOM Path: ${elementPath}`;
+  }
+  if (cssClasses) {
+    prompt += `
+- CSS Classes: ${cssClasses}`;
+  }
+  if (attributes && Object.keys(attributes).length > 0) {
+    const attrStr = Object.entries(attributes).map(([k, v]) => `${k}="${v}"`).join(", ");
+    prompt += `
+- Attributes: ${attrStr}`;
+  }
+  if (text) {
+    prompt += `
+- Text Content: "${text.slice(0, 150)}"`;
+  }
+  if (elements && elements.length > 1) {
+    prompt += `
+
+## Multi-Selection (${elements.length} elements)`;
+    elements.slice(0, 5).forEach((el, i) => {
+      prompt += `
+${i + 1}. <${el.tagName}> ${el.selector}`;
+      if (el.text) prompt += ` - "${el.text.slice(0, 50)}"`;
+    });
+    if (elements.length > 5) {
+      prompt += `
+... and ${elements.length - 5} more`;
+    }
+  }
+  prompt += `
+
+Make minimal changes. ${CRITICAL_RULES} ${JSX_VALIDATION_RULE}`;
+  return prompt;
+}
+function buildGesturePrompt(input) {
+  const { comment, gesture, boundingBox } = input;
+  return `Make this code change: "${comment || "No specific comment provided"}"
+
+Element: gesture: ${gesture || "unknown"} at (${boundingBox?.x || 0}, ${boundingBox?.y || 0})
+
+Make minimal changes. ${CRITICAL_RULES} ${JSX_VALIDATION_RULE}`;
+}
+function buildDrawingToCodePrompt(input) {
+  const {
+    comment = "Create a component based on this drawing",
+    boundingBox,
+    extractedText,
+    gridConfig,
+    viewport,
+    nearbyElements = [],
+    visionDescription
+  } = input;
+  const gridSize = gridConfig?.size || 100;
+  let gridCellRef = "";
+  if (boundingBox) {
+    gridCellRef = getGridCellReference(boundingBox.x, boundingBox.y, gridSize);
+  }
+  const positionContext = buildPositionContext(boundingBox, viewport, gridCellRef);
+  const nearbyContext = buildNearbyElementsContext(nearbyElements);
+  const textContext = extractedText?.trim() ? `
+**Text found in drawing (use as reference if hard to read):**
+${extractedText}` : "";
+  const imageNote = buildImageNote(!!input.drawingImage, visionDescription);
+  return `Your task is to interpret a user's sketch/wireframe and turn it into code that is integrated in the codebase.
+
+## User's Request
+"${comment}"
+
+## Drawing Context
+${positionContext}${textContext}${nearbyContext}${imageNote}
+
+## Your Process
+1. **Analyze the Sketch:** Understand the visual intent\u2014what UI component does the user want?
+2. **Interpret, Don't Transcribe:** Elevate the low-fidelity drawing into a high-fidelity component. Choose appropriate spacing, colors, and typography that match modern design standards.
+3. **Infer Missing Details:** If something is underspecified, use your expertise to make the best choice. An informed decision is better than an incomplete component.
+
+## Implementation Guidelines
+${DRAWING_IMPLEMENTATION_GUIDELINES}
+
+Make the changes directly. Insert the UI elements inline at the appropriate location in the page. No explanation needed.
+
+## Error Prevention Rules
+${DRAWING_ERROR_PREVENTION_RULES}`;
+}
+var DRAWING_IMPLEMENTATION_GUIDELINES = `- **CRITICAL: DO NOT CREATE ANY NEW FILES. NEVER CREATE NEW FILES. You must ONLY edit existing files.**
+- Add your code directly inline within the existing JSX of the page file - do NOT create separate component files.
+- DO NOT run any shell commands (no npm, git, lint, build, or verification commands). Just edit files and STOP.
+- After making your file edits, you are DONE. Do not run any follow-up commands or checks.
+- Write the UI as inline JSX elements (divs, sections, etc.) directly in the return statement - NOT as a separate component definition
+- Use Tailwind CSS classes for styling (the project uses Tailwind)
+- Do NOT use hardcoded pixel positions or absolute coordinates - integrate naturally with existing page flow
+- Use flexbox, grid, or relative positioning to place the component appropriately
+- If the sketch shows:
+  - **Rectangle/box:** Card, container, button, or input field depending on context
+  - **Text elements:** Headings, paragraphs, or labels with appropriate hierarchy
+  - **Form layout:** Input fields with labels, proper spacing
+  - **Icons/shapes:** Use appropriate icons from lucide-react or inline SVGs (but DO NOT add new imports mid-file)
+  - **Navigation:** Nav links, menus, or breadcrumbs
+  - **Lists:** Ordered/unordered lists or grid layouts
+- Make the UI fit naturally with the existing page design
+- Style it nicely and according to the existing codebase
+- Use semantic HTML and ARIA attributes where appropriate
+- **NEVER add import statements inside JSX or in the middle of a file - all imports must be at the very top of the file**
+- If you need a new import, add it at the TOP of the file with the other imports, then use it in the JSX below`;
+var DRAWING_ERROR_PREVENTION_RULES = `1. **NEVER CREATE NEW FILES** - Do NOT create new component files, utility files, or any other files. Write everything inline in the existing file
+2. You do not need to update package.json or anything, just add / edit the react component.
+3. Do NOT add import statements in the middle of the file or inside JSX - imports go ONLY at the top
+4. Do NOT modify the import { SkemaWrapper } from "@/components/skema-wrapper" line or the SkemaWrapper component itself
+5. If you need something that requires an import and it's not already imported, either use an alternative that doesn't need an import, or add the import at the very TOP of the file with the other imports
+6. DONT MAKE ANY CHANGES THAT WOULD RESULT IN A Build Error
+7. **JSX SYNTAX VALIDATION** - ALWAYS ensure every JSX tag is properly closed. Every opening tag like <div>, <a>, <span>, <button> MUST have a matching closing tag </div>, </a>, </span>, </button>. Self-closing tags like <img />, <input />, <br /> must end with />. Before finishing, mentally verify all tag pairs are balanced.`;
+var IMAGE_ANALYSIS_PROMPT = `
+Analyze this UI wireframe sketch in some detail (not too long) for a front-end developer.
+
+Describe every element, layout, spacing, icons, and text you see.
+Focus on whats apparent, don't overthink it.
+Mention relative positions and hierarchy.
+Be distinct about what is drawn vs what might be background.
+
+Do NOT focus on exact pixel coordinates or absolute positions - describe layouts
+in terms of relative positioning (left/right/top/bottom, centered, evenly spaced, etc.).
+
+It is expected that they will be rough draft's / hand-drawn things. Interpret the drawing and its goals as best as you can.
+DO NOT MENTION THAT THINGS HAVE "Hand-sketched" or "Hand-drawn" vibes. Make assumptions of what they were trying to do.
+Just FYI, this gets passed onto a generator to generate the actual code of modern UI componenents.
+`.trim();
+function buildPositionContext(bbox, viewport, gridCellRef) {
+  if (!bbox) return "";
+  if (viewport) {
+    const relX = (bbox.x / viewport.width * 100).toFixed(1);
+    const relY = (bbox.y / viewport.height * 100).toFixed(1);
+    let context = `**Drawing Location:** Approximately ${relX}% from left, ${relY}% from top of viewport`;
+    if (gridCellRef) {
+      context += ` (grid cell ${gridCellRef})`;
+    }
+    return context;
+  }
+  return `**Drawing Area:** ${Math.round(bbox.width)}\xD7${Math.round(bbox.height)}px`;
+}
+function buildNearbyElementsContext(nearbyElements) {
+  if (nearbyElements.length === 0) return "";
+  const elementList = nearbyElements.slice(0, 5).map((el) => {
+    let desc = `- <${el.tagName.toLowerCase()}>`;
+    if (el.text) desc += `: "${el.text.slice(0, 50)}"`;
+    if (el.className) desc += ` (class: ${el.className.slice(0, 50)})`;
+    desc += ` (${el.selector})`;
+    return desc;
+  }).join("\n");
+  return `
+**Nearby DOM Elements (for placement reference):**
+${elementList}`;
+}
+function buildImageNote(hasImage, visionDescription) {
+  let note = hasImage ? "\n**[Drawing image provided as base64 PNG with labeled grid overlay]**" : "";
+  if (visionDescription) {
+    note += `
+
+## Visual Analysis of Drawing
+${visionDescription}`;
+  }
+  return note;
+}
+
 // src/server/gemini-cli.ts
 var annotationSnapshots = /* @__PURE__ */ new Map();
 function createSnapshot(annotationId, cwd) {
@@ -66,135 +293,50 @@ function revertAnnotation(annotationId, cwd = process.cwd()) {
 function getTrackedAnnotations() {
   return Array.from(annotationSnapshots.keys());
 }
-function buildPromptFromAnnotation(annotation, projectContext, options) {
+function buildPromptFromAnnotation(annotation, _projectContext, options) {
   const fastMode = options?.fastMode ?? true;
   if (annotation.type === "drawing") {
-    return buildDrawingPrompt(annotation, projectContext, options?.visionDescription);
+    const drawingAnnotation = annotation;
+    return buildDrawingToCodePrompt({
+      comment: drawingAnnotation.comment || "Create a component based on this drawing",
+      boundingBox: drawingAnnotation.boundingBox,
+      drawingSvg: drawingAnnotation.drawingSvg,
+      drawingImage: drawingAnnotation.drawingImage,
+      extractedText: drawingAnnotation.extractedText,
+      gridConfig: drawingAnnotation.gridConfig,
+      viewport: drawingAnnotation.viewport,
+      projectStyles: drawingAnnotation.projectStyles,
+      nearbyElements: drawingAnnotation.nearbyElements,
+      visionDescription: options?.visionDescription
+    });
   }
-  if (fastMode) {
-    const selector = annotation.selector || "";
-    const text = annotation.text || "";
-    const tag = annotation.tagName?.toLowerCase() || "";
-    let target = "";
-    if (text) {
-      target = `"${text.slice(0, 50)}"`;
-    } else if (selector) {
-      target = `\`${selector}\``;
-    } else if (tag) {
-      target = `<${tag}>`;
-    }
-    return `${annotation.comment}${target ? ` (target: ${target})` : ""}. Make the change directly, no explanation needed. IMPORTANT: Do NOT modify the import { SkemaWrapper } from "@/components/skema-wrapper" line.`;
-  }
-  let prompt = `Make this code change: "${annotation.comment || "No specific comment provided"}"
-
-Element: `;
-  if (annotation.type === "dom_selection") {
-    const domAnnotation = annotation;
-    prompt += `<${domAnnotation.tagName?.toLowerCase() || "unknown"}>`;
-    if (domAnnotation.selector) prompt += ` | selector: ${domAnnotation.selector}`;
-    if (domAnnotation.text) prompt += ` | text: "${domAnnotation.text.slice(0, 100)}"`;
-    if (domAnnotation.elements && domAnnotation.elements.length > 1) {
-      prompt += `
-${domAnnotation.elements.length} elements selected`;
-    }
-  } else if (annotation.type === "gesture") {
+  if (annotation.type === "gesture") {
     const gestureAnnotation = annotation;
-    prompt += `gesture: ${gestureAnnotation.gesture || "unknown"} at (${gestureAnnotation.boundingBox?.x}, ${gestureAnnotation.boundingBox?.y})`;
-  } else {
-    prompt += `annotation at (${annotation.boundingBox?.x}, ${annotation.boundingBox?.y})`;
-  }
-  prompt += `
-
-Make minimal changes. IMPORTANT: Do NOT modify the import { SkemaWrapper } from "@/components/skema-wrapper" line.`;
-  return prompt;
-}
-function buildDrawingPrompt(annotation, projectContext, visionDescription) {
-  const drawingAnnotation = annotation;
-  const bbox = drawingAnnotation.boundingBox;
-  const nearbyElements = drawingAnnotation.nearbyElements || [];
-  const extractedText = drawingAnnotation.extractedText;
-  const comment = drawingAnnotation.comment || "Create a component based on this drawing";
-  const hasImage = !!drawingAnnotation.drawingImage;
-  const gridSize = drawingAnnotation.gridConfig?.size || 100;
-  let gridCellRef = "";
-  if (bbox) {
-    gridCellRef = getGridCellReference(bbox.x, bbox.y, gridSize);
-  }
-  let positionContext = "";
-  if (bbox && drawingAnnotation.viewport) {
-    const vp = drawingAnnotation.viewport;
-    const relX = (bbox.x / vp.width * 100).toFixed(1);
-    const relY = (bbox.y / vp.height * 100).toFixed(1);
-    positionContext = `**Drawing Location:** Approximately ${relX}% from left, ${relY}% from top of viewport`;
-    if (gridCellRef) {
-      positionContext += ` (grid cell ${gridCellRef})`;
-    }
-  } else if (bbox) {
-    positionContext = `**Drawing Area:** ${Math.round(bbox.width)}\xD7${Math.round(bbox.height)}px`;
-  }
-  let nearbyContext = "";
-  if (nearbyElements.length > 0) {
-    const elementList = nearbyElements.slice(0, 5).map((el) => {
-      let desc = `- <${el.tagName.toLowerCase()}>`;
-      if (el.text) desc += `: "${el.text.slice(0, 50)}"`;
-      if (el.className) desc += ` (class: ${el.className.slice(0, 50)})`;
-      desc += ` (${el.selector})`;
-      return desc;
-    }).join("\n");
-    nearbyContext = `
-**Nearby DOM Elements (for placement reference):**
-${elementList}`;
-  }
-  let textContext = "";
-  if (extractedText && extractedText.trim()) {
-    textContext = `
-**Text found in drawing (use as reference if hard to read):**
-${extractedText}`;
+    return buildGesturePrompt({
+      comment: annotation.comment || "No specific comment provided",
+      gesture: gestureAnnotation.gesture,
+      boundingBox: gestureAnnotation.boundingBox
+    });
   }
-  let imageNote = hasImage ? "\n**[Drawing image provided as base64 PNG with labeled grid overlay]**" : "";
-  if (visionDescription) {
-    imageNote += `
-
-## Visual Analysis of Drawing
-${visionDescription}`;
+  const domAnnotation = annotation;
+  if (fastMode) {
+    return buildFastDomSelectionPrompt({
+      comment: annotation.comment || "No specific comment provided",
+      selector: domAnnotation.selector,
+      text: domAnnotation.text,
+      tagName: domAnnotation.tagName
+    });
   }
-  const prompt = `Your task is to interpret a user's sketch/wireframe and turn it into code that is integrated in the codebase.
-
-## User's Request
-"${comment}"
-
-## Drawing Context
-${positionContext}${textContext}${nearbyContext}${imageNote}
-
-## Your Process
-1. **Analyze the Sketch:** Understand the visual intent\u2014what UI component does the user want?
-2. **Interpret, Don't Transcribe:** Elevate the low-fidelity drawing into a high-fidelity component. Choose appropriate spacing, colors, and typography that match modern design standards.
-3. **Infer Missing Details:** If something is underspecified, use your expertise to make the best choice. An informed decision is better than an incomplete component.
-
-## Implementation Guidelines
-- Create a React component with inline styles or Tailwind CSS classes
-- Do NOT use hardcoded pixel positions or absolute coordinates - integrate naturally with existing page flow
-- Use flexbox, grid, or relative positioning to place the component appropriately
-- If the sketch shows:
-  - **Rectangle/box:** Card, container, button, or input field depending on context
-  - **Text elements:** Headings, paragraphs, or labels with appropriate hierarchy
-  - **Form layout:** Input fields with labels, proper spacing
-  - **Icons/shapes:** Use appropriate icons from lucide-react or inline SVGs
-  - **Navigation:** Nav links, menus, or breadcrumbs
-  - **Lists:** Ordered/unordered lists or grid layouts
-- Make the component fit naturally with the existing page design
-- Style it nicely and according to the existing codebase
-- Use semantic HTML and ARIA attributes where appropriate
-- The component should integrate well with the existing codebase structure
-
-## Annotations
-- Any **red marks** in the drawing are instructions\u2014follow them but don't render them
-- Text annotations describe intent or constraints
-
-Make the changes directly. Insert the component at the appropriate location in the page. No explanation needed.
-
-IMPORTANT: Do NOT modify the import { SkemaWrapper } from "@/components/skema-wrapper" line or the SkemaWrapper component itself.`;
-  return prompt;
+  return buildDetailedDomSelectionPrompt({
+    comment: annotation.comment || "No specific comment provided",
+    tagName: domAnnotation.tagName,
+    selector: domAnnotation.selector,
+    text: domAnnotation.text,
+    elementPath: domAnnotation.elementPath,
+    cssClasses: domAnnotation.cssClasses,
+    attributes: domAnnotation.attributes,
+    elements: domAnnotation.elements
+  });
 }
 function spawnGeminiCLI(prompt, options = {}) {
   const {
@@ -300,22 +442,8 @@ async function analyzeImageWithGemini(apiKey, base64Image, modelName = "gemini-2
         }
       }
     ];
-    const imageAnalysisPrompt = `
-Analyze this UI wireframe sketch in extreme detail for a front-end developer.
-
-Describe every element, layout, spacing, icons, and text you see.
-Mention relative positions and hierarchy.
-Be distinct about what is drawn vs what might be background.
-
-Do NOT focus on exact pixel coordinates or absolute positions - describe layouts 
-in terms of relative positioning (left/right/top/bottom, centered, evenly spaced, etc.).
-
-It is expected that they will be rough draft's / hand-drawn things. Interpret the drawing and its goals as best as you can.
-DO NOT MENTION THAT THINGS HAVE "Hand-sketched" or "Hand-drawn" vibes. Make assumptions of what they were trying to do.
-Just FYI, this gets passed onto a generator to generate the actual code of modern UI componenents.
-`.trim();
     const result = await model.generateContent([
-      imageAnalysisPrompt,
+      IMAGE_ANALYSIS_PROMPT,
       ...imageParts
     ]);
     const response = await result.response;
@@ -328,15 +456,32 @@ Just FYI, this gets passed onto a generator to generate the actual code of moder
 }
 function createGeminiCLIStream(annotation, projectContext, options) {
   const encoder = new TextEncoder();
+  let geminiProcess = null;
+  let isCancelled = false;
   return new ReadableStream({
     async start(controller) {
       const apiKey = options?.apiKey || process.env.GEMINI_API_KEY;
       let visionDescription = "";
+      if (options?.signal) {
+        options.signal.addEventListener("abort", () => {
+          isCancelled = true;
+          if (geminiProcess && !geminiProcess.killed) {
+            console.log("[Skema Server] Killing Gemini CLI process due to client disconnect");
+            geminiProcess.kill("SIGTERM");
+          }
+          options.onCancel?.();
+          try {
+            controller.close();
+          } catch {
+          }
+        });
+      }
       if (annotation.type === "drawing" && annotation.drawingImage && apiKey) {
+        if (isCancelled) return;
         const progressEvent = {
           type: "message",
           role: "assistant",
-          content: "\u{1F3A8} Analyzing drawing image with Gemini Vision...",
+          content: "[Analyzing] Drawing image with Gemini Vision...",
           timestamp: (/* @__PURE__ */ new Date()).toISOString()
         };
         controller.enqueue(encoder.encode(`data: ${JSON.stringify(progressEvent)}
@@ -347,10 +492,11 @@ function createGeminiCLIStream(annotation, projectContext, options) {
           annotation.drawingImage,
           options?.model || "gemini-2.5-flash"
         );
+        if (isCancelled) return;
         const analysisEvent = {
           type: "message",
           role: "assistant",
-          content: `\u{1F441}\uFE0F Visual Analysis:
+          content: `[Vision] Visual Analysis:
 ${visionDescription}`,
           timestamp: (/* @__PURE__ */ new Date()).toISOString()
         };
@@ -358,6 +504,7 @@ ${visionDescription}`,
 
 `));
       }
+      if (isCancelled) return;
       const prompt = buildPromptFromAnnotation(
         annotation,
         projectContext,
@@ -375,8 +522,10 @@ ${visionDescription}`,
       controller.enqueue(encoder.encode(`data: ${JSON.stringify(promptEvent)}
 
 `));
-      const { events } = spawnGeminiCLI(prompt, options);
+      const { process: proc, events } = spawnGeminiCLI(prompt, options);
+      geminiProcess = proc;
       for await (const event of events) {
+        if (isCancelled) break;
         const sseData = `data: ${JSON.stringify(event)}
 
 `;
@@ -386,6 +535,13 @@ ${visionDescription}`,
           break;
         }
       }
+    },
+    cancel() {
+      isCancelled = true;
+      if (geminiProcess && !geminiProcess.killed) {
+        geminiProcess.kill("SIGTERM");
+      }
+      options?.onCancel?.();
     }
   });
 }
@@ -430,7 +586,19 @@ function createGeminiRouteHandler(defaultOptions) {
     createSnapshot(annotationId, cwd);
     const stream = createGeminiCLIStream(annotation, projectContext, {
       cwd,
-      ...defaultOptions
+      ...defaultOptions,
+      // Pass abort signal from request for client disconnect detection
+      signal: request.signal,
+      // Revert snapshot if client cancels/disconnects
+      onCancel: () => {
+        console.log(`[Skema Server] Client disconnected, reverting snapshot for: ${annotationId}`);
+        const result = revertAnnotation(annotationId, cwd);
+        if (result.success) {
+          console.log(`[Skema Server] Successfully reverted changes for: ${annotationId}`);
+        } else {
+          console.error(`[Skema Server] Failed to revert changes: ${result.message}`);
+        }
+      }
     });
     return new Response(stream, {
       headers: {
@@ -461,16 +629,717 @@ function createRevertRouteHandler(defaultOptions) {
 }
 var POST = createGeminiRouteHandler();
 var DELETE = createRevertRouteHandler();
+var PROVIDERS = {
+  gemini: {
+    command: "gemini",
+    buildArgs: (prompt, options) => {
+      const args = ["-p", prompt];
+      if (options?.yolo !== false) args.push("--yolo");
+      args.push("--output-format", "stream-json");
+      if (options?.model) args.push("-m", options.model);
+      else args.push("-m", "gemini-2.5-flash");
+      return args;
+    },
+    parseOutput: (line) => {
+      try {
+        const parsed = JSON.parse(line);
+        return {
+          type: mapGeminiEventType(parsed.type),
+          content: parsed.content || parsed.message,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          provider: "gemini",
+          raw: parsed
+        };
+      } catch {
+        return {
+          type: "text",
+          content: line,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          provider: "gemini"
+        };
+      }
+    }
+  },
+  claude: {
+    command: "claude",
+    buildArgs: (prompt, options) => {
+      const args = ["-p", prompt, "--output-format", "stream-json"];
+      if (options?.yolo !== false) args.push("--dangerously-skip-permissions");
+      if (options?.model) args.push("--model", options.model);
+      return args;
+    },
+    parseOutput: (line) => {
+      try {
+        const parsed = JSON.parse(line);
+        return {
+          type: mapClaudeEventType(parsed.type),
+          content: parsed.content || extractClaudeContent(parsed),
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          provider: "claude",
+          raw: parsed
+        };
+      } catch {
+        return {
+          type: "text",
+          content: line,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          provider: "claude"
+        };
+      }
+    }
+  }
+};
+function mapGeminiEventType(type) {
+  switch (type) {
+    case "init":
+      return "init";
+    case "message":
+      return "text";
+    case "tool_use":
+      return "tool_use";
+    case "tool_result":
+      return "tool_result";
+    case "error":
+      return "error";
+    case "done":
+    case "result":
+      return "done";
+    default:
+      return "text";
+  }
+}
+function mapClaudeEventType(type) {
+  switch (type) {
+    case "system":
+      return "init";
+    case "assistant":
+    case "text":
+      return "text";
+    case "tool_use":
+      return "tool_use";
+    case "tool_result":
+      return "tool_result";
+    case "error":
+      return "error";
+    case "result":
+      return "done";
+    default:
+      return "text";
+  }
+}
+function extractClaudeContent(parsed) {
+  if (typeof parsed.content === "string") return parsed.content;
+  if (parsed.message && typeof parsed.message === "object") {
+    const msg = parsed.message;
+    if (typeof msg.content === "string") return msg.content;
+  }
+  return void 0;
+}
+function spawnAICLI(prompt, config) {
+  const spec = PROVIDERS[config.provider];
+  const args = spec.buildArgs(prompt, { model: config.model });
+  const cwd = config.cwd || process.cwd();
+  console.log(`[Skema] Spawning ${config.provider}: ${spec.command} ${args.join(" ")}`);
+  const child = child_process.spawn(spec.command, args, {
+    cwd,
+    env: process.env
+  });
+  const events = {
+    [Symbol.asyncIterator]() {
+      let buffer = "";
+      let done = false;
+      const queue = [];
+      let resolveNext = null;
+      const pushEvent = (event) => {
+        if (resolveNext) {
+          resolveNext({ value: event, done: false });
+          resolveNext = null;
+        } else {
+          queue.push(event);
+        }
+      };
+      child.stdout?.on("data", (data) => {
+        buffer += data.toString();
+        const lines = buffer.split("\n");
+        buffer = lines.pop() || "";
+        for (const line of lines) {
+          if (line.trim()) {
+            const event = spec.parseOutput(line.trim());
+            if (event) pushEvent(event);
+          }
+        }
+      });
+      child.stderr?.on("data", (data) => {
+        const content = data.toString().trim();
+        if (content) {
+          pushEvent({
+            type: "error",
+            content,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            provider: config.provider
+          });
+        }
+      });
+      child.on("close", (code) => {
+        if (buffer.trim()) {
+          const event = spec.parseOutput(buffer.trim());
+          if (event) pushEvent(event);
+        }
+        pushEvent({
+          type: "done",
+          content: `Process exited with code ${code}`,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          provider: config.provider
+        });
+        done = true;
+        if (resolveNext) {
+          resolveNext({ value: void 0, done: true });
+        }
+      });
+      child.on("error", (err) => {
+        pushEvent({
+          type: "error",
+          content: `Failed to spawn ${config.provider}: ${err.message}`,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          provider: config.provider
+        });
+        done = true;
+        if (resolveNext) {
+          resolveNext({ value: void 0, done: true });
+        }
+      });
+      return {
+        next() {
+          if (queue.length > 0) {
+            return Promise.resolve({ value: queue.shift(), done: false });
+          }
+          if (done) {
+            return Promise.resolve({ value: void 0, done: true });
+          }
+          return new Promise((resolve) => {
+            resolveNext = resolve;
+          });
+        }
+      };
+    }
+  };
+  return { process: child, events };
+}
+async function runAICLI(prompt, config) {
+  const { events } = spawnAICLI(prompt, config);
+  const collectedEvents = [];
+  let output = "";
+  let success = true;
+  for await (const event of events) {
+    collectedEvents.push(event);
+    if (event.type === "text" && event.content) {
+      output += event.content + "\n";
+    }
+    if (event.type === "error") {
+      success = false;
+    }
+  }
+  return {
+    success,
+    output: output.trim(),
+    events: collectedEvents,
+    provider: config.provider
+  };
+}
+function isProviderAvailable(provider) {
+  const spec = PROVIDERS[provider];
+  try {
+    const { execSync: execSync3 } = __require("child_process");
+    execSync3(`which ${spec.command}`, { stdio: "ignore" });
+    return true;
+  } catch {
+    return false;
+  }
+}
+function getAvailableProviders() {
+  return ["gemini", "claude"].filter(isProviderAvailable);
+}
+async function analyzeWithGemini(base64Image, apiKey, model = "gemini-2.5-flash") {
+  try {
+    const genAI = new generativeAi.GoogleGenerativeAI(apiKey);
+    const visionModel = genAI.getGenerativeModel({ model });
+    const cleanBase64 = base64Image.replace(/^data:image\/\w+;base64,/, "");
+    const result = await visionModel.generateContent([
+      IMAGE_ANALYSIS_PROMPT,
+      {
+        inlineData: {
+          data: cleanBase64,
+          mimeType: "image/png"
+        }
+      }
+    ]);
+    const response = await result.response;
+    const text = response.text();
+    return {
+      success: true,
+      description: text,
+      provider: "gemini"
+    };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.error("[Vision] Gemini analysis failed:", message);
+    return {
+      success: false,
+      description: "",
+      provider: "gemini",
+      error: message
+    };
+  }
+}
+async function analyzeWithClaude(base64Image, apiKey, model = "claude-sonnet-4-20250514") {
+  try {
+    const Anthropic = (await import('@anthropic-ai/sdk')).default;
+    const client = new Anthropic({ apiKey });
+    const cleanBase64 = base64Image.replace(/^data:image\/\w+;base64,/, "");
+    const response = await client.messages.create({
+      model,
+      max_tokens: 1024,
+      messages: [
+        {
+          role: "user",
+          content: [
+            {
+              type: "image",
+              source: {
+                type: "base64",
+                media_type: "image/png",
+                data: cleanBase64
+              }
+            },
+            {
+              type: "text",
+              text: IMAGE_ANALYSIS_PROMPT
+            }
+          ]
+        }
+      ]
+    });
+    const textContent = response.content.find((c) => c.type === "text");
+    const description = textContent && "text" in textContent ? textContent.text : "";
+    return {
+      success: true,
+      description,
+      provider: "claude"
+    };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.error("[Vision] Claude analysis failed:", message);
+    return {
+      success: false,
+      description: "",
+      provider: "claude",
+      error: message
+    };
+  }
+}
+async function analyzeImage(base64Image, config) {
+  const { provider } = config;
+  let apiKey = config.apiKey;
+  if (!apiKey) {
+    apiKey = provider === "gemini" ? process.env.GEMINI_API_KEY : process.env.ANTHROPIC_API_KEY;
+  }
+  if (!apiKey) {
+    return {
+      success: false,
+      description: "",
+      provider,
+      error: `No API key found for ${provider} vision. Set ${provider === "gemini" ? "GEMINI_API_KEY" : "ANTHROPIC_API_KEY"} environment variable.`
+    };
+  }
+  console.log(`[Vision] Analyzing image with ${provider}...`);
+  if (provider === "gemini") {
+    return analyzeWithGemini(base64Image, apiKey, config.model);
+  } else {
+    return analyzeWithClaude(base64Image, apiKey, config.model);
+  }
+}
+function isVisionAvailable(provider) {
+  if (provider === "gemini") {
+    return !!process.env.GEMINI_API_KEY;
+  } else {
+    return !!process.env.ANTHROPIC_API_KEY;
+  }
+}
+
+// src/server/daemon.ts
+var currentProvider = "gemini";
+var workingDirectory = process.cwd();
+var annotationSnapshots2 = /* @__PURE__ */ new Map();
+function createSnapshot2(annotationId) {
+  try {
+    const stashRef = child_process.execSync("git stash create", { cwd: workingDirectory, encoding: "utf-8" }).trim();
+    if (stashRef) {
+      annotationSnapshots2.set(annotationId, stashRef);
+      console.log(`[Daemon] Created snapshot ${stashRef.slice(0, 7)} for ${annotationId}`);
+      return stashRef;
+    }
+    const headRef = child_process.execSync("git rev-parse HEAD", { cwd: workingDirectory, encoding: "utf-8" }).trim();
+    annotationSnapshots2.set(annotationId, headRef);
+    return headRef;
+  } catch (error) {
+    console.error("[Daemon] Failed to create snapshot:", error);
+    return null;
+  }
+}
+function revertSnapshot(annotationId) {
+  const snapshotRef = annotationSnapshots2.get(annotationId);
+  if (!snapshotRef) {
+    return { success: false, message: `No snapshot found for ${annotationId}` };
+  }
+  try {
+    const changedFiles = child_process.execSync(`git diff --name-only ${snapshotRef}`, {
+      cwd: workingDirectory,
+      encoding: "utf-8"
+    }).trim().split("\n").filter(Boolean);
+    if (changedFiles.length === 0) {
+      annotationSnapshots2.delete(annotationId);
+      return { success: true, message: "No changes to revert" };
+    }
+    for (const file of changedFiles) {
+      try {
+        child_process.execSync(`git checkout ${snapshotRef} -- "${file}"`, { cwd: workingDirectory });
+      } catch {
+      }
+    }
+    annotationSnapshots2.delete(annotationId);
+    return { success: true, message: `Reverted ${changedFiles.length} file(s)` };
+  } catch (error) {
+    return { success: false, message: String(error) };
+  }
+}
+var handlers = {
+  // -------------------------------------------------------------------------
+  // Provider Management
+  // -------------------------------------------------------------------------
+  "get-provider": async (msg) => {
+    return {
+      id: msg.id,
+      type: "provider",
+      provider: currentProvider,
+      available: getAvailableProviders()
+    };
+  },
+  "set-provider": async (msg) => {
+    const newProvider = msg.provider;
+    if (!["gemini", "claude"].includes(newProvider)) {
+      return { id: msg.id, type: "error", error: `Invalid provider: ${newProvider}` };
+    }
+    if (!isProviderAvailable(newProvider)) {
+      return {
+        id: msg.id,
+        type: "error",
+        error: `Provider "${newProvider}" is not installed. Run: ${newProvider === "gemini" ? "npm install -g @anthropic-ai/gemini-cli" : "npm install -g @anthropic-ai/claude-code"}`
+      };
+    }
+    currentProvider = newProvider;
+    console.log(`[Daemon] Switched to provider: ${currentProvider}`);
+    return { id: msg.id, type: "provider-changed", provider: currentProvider };
+  },
+  // -------------------------------------------------------------------------
+  // AI Generation (streaming)
+  // -------------------------------------------------------------------------
+  generate: async (msg, ws) => {
+    const annotation = msg.annotation;
+    const projectContext = msg.projectContext;
+    const annotationId = annotation.id || `temp-${Date.now()}`;
+    createSnapshot2(annotationId);
+    let visionDescription = "";
+    const drawingAnnotation = annotation;
+    if (annotation.type === "drawing" && drawingAnnotation.drawingImage) {
+      if (isVisionAvailable("gemini")) {
+        sendMessage(ws, {
+          id: msg.id,
+          type: "ai-event",
+          event: {
+            type: "text",
+            content: `[Analyzing drawing with Gemini vision...]`,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            provider: currentProvider
+          }
+        });
+        const visionResult = await analyzeImage(drawingAnnotation.drawingImage, {
+          provider: "gemini"
+        });
+        if (visionResult.success) {
+          visionDescription = visionResult.description;
+          sendMessage(ws, {
+            id: msg.id,
+            type: "ai-event",
+            event: {
+              type: "text",
+              content: `[Vision analysis complete]
+${visionDescription}`,
+              timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+              provider: currentProvider
+            }
+          });
+        } else {
+          sendMessage(ws, {
+            id: msg.id,
+            type: "ai-event",
+            event: {
+              type: "error",
+              content: `Vision analysis failed: ${visionResult.error}`,
+              timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+              provider: currentProvider
+            }
+          });
+        }
+      } else {
+        sendMessage(ws, {
+          id: msg.id,
+          type: "ai-event",
+          event: {
+            type: "text",
+            content: `[Vision not available - set GEMINI_API_KEY for image analysis]`,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            provider: currentProvider
+          }
+        });
+      }
+    }
+    const prompt = buildPromptFromAnnotation(annotation, projectContext, {
+      fastMode: msg.fastMode === true,
+      // Default to detailed mode (false) unless explicitly set to true
+      visionDescription
+    });
+    sendMessage(ws, {
+      id: msg.id,
+      type: "ai-event",
+      event: {
+        type: "debug",
+        content: prompt,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        provider: currentProvider
+      }
+    });
+    const config = {
+      provider: currentProvider,
+      cwd: workingDirectory,
+      model: msg.model
+    };
+    const { process: aiProcess, events } = spawnAICLI(prompt, config);
+    for await (const event of events) {
+      sendMessage(ws, {
+        id: msg.id,
+        type: "ai-event",
+        event,
+        annotationId
+      });
+      if (event.type === "done") {
+        sendMessage(ws, {
+          id: msg.id,
+          type: "generate-complete",
+          success: true,
+          annotationId,
+          provider: currentProvider
+        });
+        break;
+      }
+    }
+  },
+  // -------------------------------------------------------------------------
+  // Undo/Revert
+  // -------------------------------------------------------------------------
+  revert: async (msg) => {
+    const annotationId = msg.annotationId;
+    if (!annotationId) {
+      return { id: msg.id, type: "error", error: "Missing annotationId" };
+    }
+    const result = revertSnapshot(annotationId);
+    return { id: msg.id, type: "revert-result", ...result };
+  },
+  // -------------------------------------------------------------------------
+  // File Operations
+  // -------------------------------------------------------------------------
+  "read-file": async (msg) => {
+    const filePath = msg.path;
+    const absolutePath = path__namespace.isAbsolute(filePath) ? filePath : path__namespace.join(workingDirectory, filePath);
+    try {
+      const content = fs__namespace.readFileSync(absolutePath, "utf-8");
+      return { id: msg.id, type: "file-content", path: filePath, content };
+    } catch (error) {
+      return { id: msg.id, type: "error", error: `Failed to read file: ${error}` };
+    }
+  },
+  "write-file": async (msg) => {
+    const filePath = msg.path;
+    const content = msg.content;
+    const absolutePath = path__namespace.isAbsolute(filePath) ? filePath : path__namespace.join(workingDirectory, filePath);
+    try {
+      fs__namespace.mkdirSync(path__namespace.dirname(absolutePath), { recursive: true });
+      fs__namespace.writeFileSync(absolutePath, content, "utf-8");
+      console.log(`[Daemon] Wrote file: ${filePath}`);
+      return { id: msg.id, type: "write-success", path: filePath };
+    } catch (error) {
+      return { id: msg.id, type: "error", error: `Failed to write file: ${error}` };
+    }
+  },
+  "list-files": async (msg) => {
+    const dirPath = msg.path || ".";
+    const absolutePath = path__namespace.isAbsolute(dirPath) ? dirPath : path__namespace.join(workingDirectory, dirPath);
+    try {
+      const entries = fs__namespace.readdirSync(absolutePath, { withFileTypes: true });
+      const files = entries.map((entry) => ({
+        name: entry.name,
+        isDirectory: entry.isDirectory()
+      }));
+      return { id: msg.id, type: "file-list", path: dirPath, files };
+    } catch (error) {
+      return { id: msg.id, type: "error", error: `Failed to list files: ${error}` };
+    }
+  },
+  // -------------------------------------------------------------------------
+  // Command Execution
+  // -------------------------------------------------------------------------
+  "run-command": async (msg, ws) => {
+    const command = msg.command;
+    if (!command) {
+      return { id: msg.id, type: "error", error: "Missing command" };
+    }
+    console.log(`[Daemon] Running command: ${command}`);
+    return new Promise((resolve) => {
+      child_process.exec(command, { cwd: workingDirectory }, (error, stdout, stderr) => {
+        resolve({
+          id: msg.id,
+          type: "command-result",
+          stdout,
+          stderr,
+          exitCode: error ? error.code : 0
+        });
+      });
+    });
+  },
+  // -------------------------------------------------------------------------
+  // Status
+  // -------------------------------------------------------------------------
+  ping: async (msg) => {
+    return {
+      id: msg.id,
+      type: "pong",
+      provider: currentProvider,
+      cwd: workingDirectory,
+      availableProviders: getAvailableProviders()
+    };
+  }
+};
+function sendMessage(ws$1, message) {
+  if (ws$1.readyState === ws.WebSocket.OPEN) {
+    ws$1.send(JSON.stringify(message));
+  }
+}
+function handleConnection(ws) {
+  console.log("[Daemon] Client connected");
+  sendMessage(ws, {
+    type: "connected",
+    provider: currentProvider,
+    cwd: workingDirectory,
+    availableProviders: getAvailableProviders()
+  });
+  ws.on("message", async (data) => {
+    let msg;
+    try {
+      msg = JSON.parse(data.toString());
+    } catch {
+      sendMessage(ws, { type: "error", error: "Invalid JSON" });
+      return;
+    }
+    const handler = handlers[msg.type];
+    if (!handler) {
+      sendMessage(ws, { id: msg.id, type: "error", error: `Unknown message type: ${msg.type}` });
+      return;
+    }
+    try {
+      const response = await handler(msg, ws);
+      if (response) {
+        sendMessage(ws, response);
+      }
+    } catch (error) {
+      sendMessage(ws, {
+        id: msg.id,
+        type: "error",
+        error: `Handler error: ${error}`
+      });
+    }
+  });
+  ws.on("close", () => {
+    console.log("[Daemon] Client disconnected");
+  });
+  ws.on("error", (error) => {
+    console.error("[Daemon] WebSocket error:", error);
+  });
+}
+function startDaemon(config = {}) {
+  const port = config.port ?? 9999;
+  workingDirectory = config.cwd ?? process.cwd();
+  currentProvider = config.defaultProvider ?? "gemini";
+  if (!isProviderAvailable(currentProvider)) {
+    const available = getAvailableProviders();
+    if (available.length > 0) {
+      console.log(`[Daemon] ${currentProvider} not found, falling back to ${available[0]}`);
+      currentProvider = available[0];
+    } else {
+      console.warn("[Daemon] Warning: No AI providers found. Install gemini or claude CLI.");
+    }
+  }
+  const wss = new ws.WebSocketServer({ port });
+  wss.on("connection", handleConnection);
+  wss.on("listening", () => {
+    console.log("");
+    console.log("  \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510");
+    console.log("  \u2502                                                 \u2502");
+    console.log(`  \u2502   \u{1F3A8} Skema Daemon running on ws://localhost:${port}  \u2502`);
+    console.log("  \u2502                                                 \u2502");
+    console.log(`  \u2502   Provider: ${currentProvider.padEnd(35)}\u2502`);
+    console.log(`  \u2502   Directory: ${workingDirectory.slice(-33).padEnd(34)}\u2502`);
+    console.log("  \u2502                                                 \u2502");
+    console.log("  \u2502   Waiting for browser connections...           \u2502");
+    console.log("  \u2502                                                 \u2502");
+    console.log("  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518");
+    console.log("");
+  });
+  wss.on("error", (error) => {
+    if (error.code === "EADDRINUSE") {
+      console.error(`[Daemon] Port ${port} is already in use. Is another Skema daemon running?`);
+    } else {
+      console.error("[Daemon] Server error:", error);
+    }
+  });
+  return {
+    port,
+    close: () => {
+      wss.close();
+      console.log("[Daemon] Server stopped");
+    }
+  };
+}
 
 exports.DELETE = DELETE;
+exports.IMAGE_ANALYSIS_PROMPT = IMAGE_ANALYSIS_PROMPT;
 exports.POST = POST;
+exports.analyzeImage = analyzeImage;
+exports.buildDetailedDomSelectionPrompt = buildDetailedDomSelectionPrompt;
+exports.buildDrawingToCodePrompt = buildDrawingToCodePrompt;
+exports.buildFastDomSelectionPrompt = buildFastDomSelectionPrompt;
+exports.buildGesturePrompt = buildGesturePrompt;
 exports.buildPromptFromAnnotation = buildPromptFromAnnotation;
 exports.createGeminiCLIStream = createGeminiCLIStream;
 exports.createGeminiRouteHandler = createGeminiRouteHandler;
 exports.createRevertRouteHandler = createRevertRouteHandler;
+exports.getAvailableProviders = getAvailableProviders;
 exports.getTrackedAnnotations = getTrackedAnnotations;
+exports.isProviderAvailable = isProviderAvailable;
+exports.isVisionAvailable = isVisionAvailable;
 exports.revertAnnotation = revertAnnotation;
+exports.runAICLI = runAICLI;
 exports.runGeminiCLI = runGeminiCLI;
+exports.spawnAICLI = spawnAICLI;
 exports.spawnGeminiCLI = spawnGeminiCLI;
+exports.startDaemon = startDaemon;
 //# sourceMappingURL=server.js.map
 //# sourceMappingURL=server.js.map