openmagic 0.1.0

package/dist/cli.js

@@ -0,0 +1,1222 @@
+#!/usr/bin/env node
+
+// src/cli.ts
+import { Command } from "commander";
+import chalk from "chalk";
+import open from "open";
+import { resolve as resolve2 } from "path";
+
+// src/proxy.ts
+import http from "http";
+import httpProxy from "http-proxy";
+
+// src/security.ts
+import { randomBytes } from "crypto";
+var sessionToken = null;
+function generateSessionToken() {
+  sessionToken = randomBytes(32).toString("hex");
+  return sessionToken;
+}
+function getSessionToken() {
+  if (!sessionToken) {
+    return generateSessionToken();
+  }
+  return sessionToken;
+}
+function validateToken(token) {
+  return token === sessionToken;
+}
+
+// src/proxy.ts
+function createProxyServer(targetHost, targetPort, serverPort) {
+  const proxy = httpProxy.createProxyServer({
+    target: `http://${targetHost}:${targetPort}`,
+    ws: true,
+    selfHandleResponse: true
+  });
+  const token = getSessionToken();
+  proxy.on("proxyRes", (proxyRes, req, res) => {
+    const contentType = proxyRes.headers["content-type"] || "";
+    const isHtml = contentType.includes("text/html");
+    if (!isHtml) {
+      res.writeHead(proxyRes.statusCode || 200, proxyRes.headers);
+      proxyRes.pipe(res);
+      return;
+    }
+    const chunks = [];
+    proxyRes.on("data", (chunk) => chunks.push(chunk));
+    proxyRes.on("end", () => {
+      let body = Buffer.concat(chunks).toString("utf-8");
+      const toolbarScript = buildInjectionScript(serverPort, token);
+      if (body.includes("</body>")) {
+        body = body.replace("</body>", `${toolbarScript}</body>`);
+      } else if (body.includes("</html>")) {
+        body = body.replace("</html>", `${toolbarScript}</html>`);
+      } else {
+        body += toolbarScript;
+      }
+      const headers = { ...proxyRes.headers };
+      delete headers["content-length"];
+      delete headers["content-encoding"];
+      res.writeHead(proxyRes.statusCode || 200, headers);
+      res.end(body);
+    });
+  });
+  proxy.on("error", (err, _req, res) => {
+    console.error("[OpenMagic] Proxy error:", err.message);
+    if (res instanceof http.ServerResponse && !res.headersSent) {
+      res.writeHead(502, { "Content-Type": "text/plain" });
+      res.end(
+        `OpenMagic proxy error: Could not connect to dev server at ${targetHost}:${targetPort}
+
+Make sure your dev server is running.`
+      );
+    }
+  });
+  const server = http.createServer((req, res) => {
+    if (req.url?.startsWith("/__openmagic__/")) {
+      handleToolbarAsset(req, res, serverPort);
+      return;
+    }
+    proxy.web(req, res);
+  });
+  server.on("upgrade", (req, socket, head) => {
+    if (req.url?.startsWith("/__openmagic__")) {
+      return;
+    }
+    proxy.ws(req, socket, head);
+  });
+  return server;
+}
+function handleToolbarAsset(_req, res, _serverPort) {
+  res.writeHead(404, { "Content-Type": "text/plain" });
+  res.end("Not found");
+}
+function buildInjectionScript(serverPort, token) {
+  return `
+<script data-openmagic="true">
+(function() {
+  if (window.__OPENMAGIC_LOADED__) return;
+  window.__OPENMAGIC_LOADED__ = true;
+  window.__OPENMAGIC_CONFIG__ = {
+    wsPort: ${serverPort},
+    token: "${token}"
+  };
+  var script = document.createElement("script");
+  script.src = "http://127.0.0.1:${serverPort}/__openmagic__/toolbar.js";
+  script.dataset.openmagic = "true";
+  document.body.appendChild(script);
+})();
+</script>`;
+}
+
+// src/server.ts
+import http2 from "http";
+import { readFileSync as readFileSync3, existsSync as existsSync3 } from "fs";
+import { join as join3, dirname as dirname2 } from "path";
+import { fileURLToPath } from "url";
+import { WebSocketServer, WebSocket } from "ws";
+
+// src/config.ts
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from "fs";
+import { join } from "path";
+import { homedir } from "os";
+var CONFIG_DIR = join(homedir(), ".openmagic");
+var CONFIG_FILE = join(CONFIG_DIR, "config.json");
+function ensureConfigDir() {
+  if (!existsSync(CONFIG_DIR)) {
+    mkdirSync(CONFIG_DIR, { recursive: true });
+  }
+}
+function loadConfig() {
+  ensureConfigDir();
+  if (!existsSync(CONFIG_FILE)) {
+    return {};
+  }
+  try {
+    const raw = readFileSync(CONFIG_FILE, "utf-8");
+    return JSON.parse(raw);
+  } catch {
+    return {};
+  }
+}
+function saveConfig(updates) {
+  ensureConfigDir();
+  const existing = loadConfig();
+  const merged = { ...existing, ...updates };
+  writeFileSync(CONFIG_FILE, JSON.stringify(merged, null, 2), "utf-8");
+}
+
+// src/filesystem.ts
+import {
+  readFileSync as readFileSync2,
+  writeFileSync as writeFileSync2,
+  existsSync as existsSync2,
+  statSync,
+  readdirSync,
+  copyFileSync,
+  mkdirSync as mkdirSync2
+} from "fs";
+import { join as join2, resolve, relative, dirname, extname } from "path";
+var IGNORED_DIRS = /* @__PURE__ */ new Set([
+  "node_modules",
+  ".git",
+  ".next",
+  ".nuxt",
+  ".svelte-kit",
+  "dist",
+  "build",
+  ".cache",
+  ".turbo",
+  "__pycache__",
+  ".venv",
+  "venv",
+  ".DS_Store"
+]);
+var IGNORED_EXTENSIONS = /* @__PURE__ */ new Set([
+  ".png",
+  ".jpg",
+  ".jpeg",
+  ".gif",
+  ".svg",
+  ".ico",
+  ".webp",
+  ".mp4",
+  ".mp3",
+  ".woff",
+  ".woff2",
+  ".ttf",
+  ".eot",
+  ".lock"
+]);
+function isPathSafe(filePath, roots) {
+  const resolved = resolve(filePath);
+  return roots.some((root) => {
+    const resolvedRoot = resolve(root);
+    return resolved.startsWith(resolvedRoot);
+  });
+}
+function readFileSafe(filePath, roots) {
+  if (!isPathSafe(filePath, roots)) {
+    return { error: "Path is outside allowed roots" };
+  }
+  if (!existsSync2(filePath)) {
+    return { error: "File not found" };
+  }
+  try {
+    const content = readFileSync2(filePath, "utf-8");
+    return { content };
+  } catch (e) {
+    return { error: `Failed to read file: ${e.message}` };
+  }
+}
+function writeFileSafe(filePath, content, roots) {
+  if (!isPathSafe(filePath, roots)) {
+    return { ok: false, error: "Path is outside allowed roots" };
+  }
+  try {
+    let backupPath;
+    if (existsSync2(filePath)) {
+      backupPath = filePath + ".openmagic-backup";
+      copyFileSync(filePath, backupPath);
+    }
+    const dir = dirname(filePath);
+    if (!existsSync2(dir)) {
+      mkdirSync2(dir, { recursive: true });
+    }
+    writeFileSync2(filePath, content, "utf-8");
+    return { ok: true, backupPath };
+  } catch (e) {
+    return { ok: false, error: `Failed to write file: ${e.message}` };
+  }
+}
+function listFiles(rootPath, roots, maxDepth = 4) {
+  if (!isPathSafe(rootPath, roots)) {
+    return [];
+  }
+  const entries = [];
+  function walk(dir, depth) {
+    if (depth > maxDepth) return;
+    let items;
+    try {
+      items = readdirSync(dir);
+    } catch {
+      return;
+    }
+    for (const item of items) {
+      if (IGNORED_DIRS.has(item)) continue;
+      if (item.startsWith(".") && item !== ".env.example") continue;
+      const fullPath = join2(dir, item);
+      let stat;
+      try {
+        stat = statSync(fullPath);
+      } catch {
+        continue;
+      }
+      const relPath = relative(rootPath, fullPath);
+      if (stat.isDirectory()) {
+        entries.push({ path: relPath, type: "dir", name: item });
+        walk(fullPath, depth + 1);
+      } else if (stat.isFile()) {
+        const ext = extname(item).toLowerCase();
+        if (!IGNORED_EXTENSIONS.has(ext)) {
+          entries.push({ path: relPath, type: "file", name: item });
+        }
+      }
+    }
+  }
+  walk(rootPath, 0);
+  return entries;
+}
+function getProjectTree(roots) {
+  const lines = [];
+  for (const root of roots) {
+    lines.push(`[${root}]`);
+    const files = listFiles(root, roots, 3);
+    for (const f of files) {
+      const indent = f.path.split("/").length - 1;
+      const prefix = "  ".repeat(indent);
+      const icon = f.type === "dir" ? "/" : "";
+      lines.push(`${prefix}${f.name}${icon}`);
+    }
+    lines.push("");
+  }
+  return lines.join("\n");
+}
+
+// src/llm/registry.ts
+var MODEL_REGISTRY = {
+  openai: {
+    name: "OpenAI",
+    models: [
+      { id: "gpt-4.1", name: "GPT-4.1", vision: true, context: 1047576 },
+      { id: "gpt-4.1-mini", name: "GPT-4.1 Mini", vision: true, context: 1047576 },
+      { id: "gpt-4.1-nano", name: "GPT-4.1 Nano", vision: true, context: 1047576 },
+      { id: "gpt-4o", name: "GPT-4o", vision: true, context: 128e3 },
+      { id: "gpt-4o-mini", name: "GPT-4o Mini", vision: true, context: 128e3 },
+      { id: "o3", name: "o3 (Reasoning)", vision: true, context: 2e5 },
+      { id: "o4-mini", name: "o4-mini (Reasoning)", vision: true, context: 2e5 }
+    ],
+    apiBase: "https://api.openai.com/v1",
+    keyPrefix: "sk-",
+    keyPlaceholder: "sk-..."
+  },
+  anthropic: {
+    name: "Anthropic",
+    models: [
+      { id: "claude-opus-4-20250514", name: "Claude Opus 4", vision: true, context: 2e5 },
+      { id: "claude-sonnet-4-20250514", name: "Claude Sonnet 4", vision: true, context: 2e5 },
+      { id: "claude-haiku-4-20250514", name: "Claude Haiku 4", vision: true, context: 2e5 }
+    ],
+    apiBase: "https://api.anthropic.com/v1",
+    keyPrefix: "sk-ant-",
+    keyPlaceholder: "sk-ant-..."
+  },
+  google: {
+    name: "Google Gemini",
+    models: [
+      { id: "gemini-2.5-pro", name: "Gemini 2.5 Pro", vision: true, context: 1048576 },
+      { id: "gemini-2.5-flash", name: "Gemini 2.5 Flash", vision: true, context: 1048576 },
+      { id: "gemini-2.0-flash", name: "Gemini 2.0 Flash", vision: true, context: 1048576 }
+    ],
+    apiBase: "https://generativelanguage.googleapis.com/v1beta",
+    keyPrefix: "AI",
+    keyPlaceholder: "AIza..."
+  },
+  deepseek: {
+    name: "DeepSeek",
+    models: [
+      { id: "deepseek-chat", name: "DeepSeek V3", vision: false, context: 65536 },
+      { id: "deepseek-reasoner", name: "DeepSeek R1", vision: false, context: 65536 }
+    ],
+    apiBase: "https://api.deepseek.com/v1",
+    keyPrefix: "sk-",
+    keyPlaceholder: "sk-..."
+  },
+  groq: {
+    name: "Groq",
+    models: [
+      { id: "llama-3.3-70b-versatile", name: "Llama 3.3 70B", vision: false, context: 131072 },
+      { id: "llama-3.1-8b-instant", name: "Llama 3.1 8B", vision: false, context: 131072 },
+      { id: "gemma2-9b-it", name: "Gemma 2 9B", vision: false, context: 8192 }
+    ],
+    apiBase: "https://api.groq.com/openai/v1",
+    keyPrefix: "gsk_",
+    keyPlaceholder: "gsk_..."
+  },
+  mistral: {
+    name: "Mistral",
+    models: [
+      { id: "mistral-large-latest", name: "Mistral Large", vision: false, context: 131072 },
+      { id: "mistral-small-latest", name: "Mistral Small", vision: false, context: 131072 },
+      { id: "codestral-latest", name: "Codestral", vision: false, context: 262144 }
+    ],
+    apiBase: "https://api.mistral.ai/v1",
+    keyPrefix: "",
+    keyPlaceholder: "Enter API key..."
+  },
+  xai: {
+    name: "xAI (Grok)",
+    models: [
+      { id: "grok-3", name: "Grok 3", vision: true, context: 131072 },
+      { id: "grok-3-mini", name: "Grok 3 Mini", vision: true, context: 131072 }
+    ],
+    apiBase: "https://api.x.ai/v1",
+    keyPrefix: "xai-",
+    keyPlaceholder: "xai-..."
+  },
+  ollama: {
+    name: "Ollama (Local)",
+    models: [],
+    apiBase: "http://localhost:11434/v1",
+    keyPrefix: "",
+    keyPlaceholder: "not required",
+    local: true
+  },
+  openrouter: {
+    name: "OpenRouter",
+    models: [],
+    apiBase: "https://openrouter.ai/api/v1",
+    keyPrefix: "sk-or-",
+    keyPlaceholder: "sk-or-..."
+  }
+};
+
+// src/llm/prompts.ts
+var SYSTEM_PROMPT = `You are OpenMagic, an AI coding assistant embedded in a developer's web application. You help modify the codebase based on visual context from the running app.
+
+## Your Role
+- You can see the developer's running web application (DOM elements, screenshots, styles)
+- You propose code modifications to their source files
+- Your changes are applied directly to their codebase and reflected via hot reload
+
+## Response Format
+You MUST respond with valid JSON in this exact format:
+
+\`\`\`json
+{
+  "modifications": [
+    {
+      "file": "relative/path/to/file.tsx",
+      "type": "edit",
+      "search": "exact code to find (multi-line ok)",
+      "replace": "replacement code"
+    }
+  ],
+  "explanation": "Brief description of what was changed and why"
+}
+\`\`\`
+
+## Modification Types
+- \`edit\`: Replace existing code. \`search\` must match exactly in the file. \`replace\` is the new code.
+- \`create\`: Create a new file. Use \`content\` instead of search/replace.
+- \`delete\`: Delete a file. No search/replace/content needed.
+
+## Rules
+1. The \`search\` field must contain the EXACT text from the source file \u2014 copy it precisely, including whitespace and indentation
+2. Keep modifications minimal \u2014 change only what's needed
+3. If you need to read a file first, say so in the explanation and the developer can provide it
+4. For style changes, prefer modifying existing CSS/Tailwind classes over adding inline styles
+5. Always preserve the existing code style and conventions
+6. If the change involves multiple files, include all modifications in the array
+7. ALWAYS respond with the JSON format above, even for explanations (put them in the "explanation" field)
+8. If you cannot make the requested change, set modifications to an empty array and explain why`;
+function buildUserMessage(userPrompt, context) {
+  const parts = [];
+  if (context.projectTree) {
+    parts.push(`## Project Structure
+\`\`\`
+${context.projectTree}
+\`\`\``);
+  }
+  if (context.filePath && context.fileContent) {
+    parts.push(
+      `## Source File: ${context.filePath}
+\`\`\`
+${context.fileContent}
+\`\`\``
+    );
+  }
+  if (context.selectedElement) {
+    parts.push(`## Selected Element (DOM)
+\`\`\`html
+${context.selectedElement}
+\`\`\``);
+  }
+  if (context.networkLogs) {
+    parts.push(`## Recent Network Requests
+\`\`\`
+${context.networkLogs}
+\`\`\``);
+  }
+  if (context.consoleLogs) {
+    parts.push(`## Console Output
+\`\`\`
+${context.consoleLogs}
+\`\`\``);
+  }
+  parts.push(`## User Request
+${userPrompt}`);
+  return parts.join("\n\n");
+}
+
+// src/llm/openai.ts
+async function chatOpenAICompatible(provider, model, apiKey, messages, context, onChunk, onDone, onError) {
+  const providerConfig = MODEL_REGISTRY[provider];
+  if (!providerConfig) {
+    onError(`Unknown provider: ${provider}`);
+    return;
+  }
+  const apiBase = providerConfig.apiBase;
+  const url = `${apiBase}/chat/completions`;
+  const apiMessages = [
+    { role: "system", content: SYSTEM_PROMPT }
+  ];
+  for (const msg of messages) {
+    if (msg.role === "user" && typeof msg.content === "string") {
+      const contextParts = {};
+      if (context.selectedElement) {
+        contextParts.selectedElement = context.selectedElement.outerHTML;
+      }
+      if (context.files && context.files.length > 0) {
+        contextParts.filePath = context.files[0].path;
+        contextParts.fileContent = context.files[0].content;
+      }
+      if (context.projectTree) {
+        contextParts.projectTree = context.projectTree;
+      }
+      if (context.networkLogs) {
+        contextParts.networkLogs = context.networkLogs.map((l) => `${l.method} ${l.url} \u2192 ${l.status || "pending"}`).join("\n");
+      }
+      if (context.consoleLogs) {
+        contextParts.consoleLogs = context.consoleLogs.map((l) => `[${l.level}] ${l.args.join(" ")}`).join("\n");
+      }
+      const enrichedContent = buildUserMessage(msg.content, contextParts);
+      const modelInfo = providerConfig.models.find((m) => m.id === model);
+      if (context.screenshot && modelInfo?.vision) {
+        apiMessages.push({
+          role: "user",
+          content: [
+            { type: "text", text: enrichedContent },
+            {
+              type: "image_url",
+              image_url: { url: context.screenshot }
+            }
+          ]
+        });
+      } else {
+        apiMessages.push({ role: "user", content: enrichedContent });
+      }
+    } else {
+      apiMessages.push({
+        role: msg.role,
+        content: msg.content
+      });
+    }
+  }
+  const body = {
+    model,
+    messages: apiMessages,
+    stream: true,
+    max_tokens: 4096
+  };
+  try {
+    const headers = {
+      "Content-Type": "application/json"
+    };
+    if (provider === "ollama") {
+    } else {
+      headers["Authorization"] = `Bearer ${apiKey}`;
+    }
+    const response = await fetch(url, {
+      method: "POST",
+      headers,
+      body: JSON.stringify(body)
+    });
+    if (!response.ok) {
+      const errorText = await response.text();
+      onError(`API error ${response.status}: ${errorText}`);
+      return;
+    }
+    if (!response.body) {
+      onError("No response body");
+      return;
+    }
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let fullContent = "";
+    let buffer = "";
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+      buffer = lines.pop() || "";
+      for (const line of lines) {
+        if (!line.startsWith("data: ")) continue;
+        const data = line.slice(6).trim();
+        if (data === "[DONE]") continue;
+        try {
+          const parsed = JSON.parse(data);
+          const delta = parsed.choices?.[0]?.delta?.content;
+          if (delta) {
+            fullContent += delta;
+            onChunk(delta);
+          }
+        } catch {
+        }
+      }
+    }
+    onDone({ content: fullContent });
+  } catch (e) {
+    onError(`Request failed: ${e.message}`);
+  }
+}
+
+// src/llm/anthropic.ts
+async function chatAnthropic(model, apiKey, messages, context, onChunk, onDone, onError) {
+  const url = "https://api.anthropic.com/v1/messages";
+  const apiMessages = [];
+  for (const msg of messages) {
+    if (msg.role === "system") continue;
+    if (msg.role === "user" && typeof msg.content === "string") {
+      const contextParts = {};
+      if (context.selectedElement) {
+        contextParts.selectedElement = context.selectedElement.outerHTML;
+      }
+      if (context.files && context.files.length > 0) {
+        contextParts.filePath = context.files[0].path;
+        contextParts.fileContent = context.files[0].content;
+      }
+      if (context.projectTree) {
+        contextParts.projectTree = context.projectTree;
+      }
+      if (context.networkLogs) {
+        contextParts.networkLogs = context.networkLogs.map((l) => `${l.method} ${l.url} \u2192 ${l.status || "pending"}`).join("\n");
+      }
+      if (context.consoleLogs) {
+        contextParts.consoleLogs = context.consoleLogs.map((l) => `[${l.level}] ${l.args.join(" ")}`).join("\n");
+      }
+      const enrichedContent = buildUserMessage(msg.content, contextParts);
+      if (context.screenshot) {
+        const base64Data = context.screenshot.replace(
+          /^data:image\/\w+;base64,/,
+          ""
+        );
+        apiMessages.push({
+          role: "user",
+          content: [
+            { type: "text", text: enrichedContent },
+            {
+              type: "image",
+              source: {
+                type: "base64",
+                media_type: "image/png",
+                data: base64Data
+              }
+            }
+          ]
+        });
+      } else {
+        apiMessages.push({ role: "user", content: enrichedContent });
+      }
+    } else {
+      apiMessages.push({
+        role: msg.role,
+        content: msg.content
+      });
+    }
+  }
+  const body = {
+    model,
+    max_tokens: 4096,
+    system: SYSTEM_PROMPT,
+    messages: apiMessages,
+    stream: true
+  };
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": apiKey,
+        "anthropic-version": "2023-06-01"
+      },
+      body: JSON.stringify(body)
+    });
+    if (!response.ok) {
+      const errorText = await response.text();
+      onError(`Anthropic API error ${response.status}: ${errorText}`);
+      return;
+    }
+    if (!response.body) {
+      onError("No response body");
+      return;
+    }
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let fullContent = "";
+    let buffer = "";
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+      buffer = lines.pop() || "";
+      for (const line of lines) {
+        if (!line.startsWith("data: ")) continue;
+        const data = line.slice(6).trim();
+        try {
+          const parsed = JSON.parse(data);
+          if (parsed.type === "content_block_delta") {
+            const delta = parsed.delta?.text;
+            if (delta) {
+              fullContent += delta;
+              onChunk(delta);
+            }
+          }
+        } catch {
+        }
+      }
+    }
+    onDone({ content: fullContent });
+  } catch (e) {
+    onError(`Request failed: ${e.message}`);
+  }
+}
+
+// src/llm/google.ts
+async function chatGoogle(model, apiKey, messages, context, onChunk, onDone, onError) {
+  const url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:streamGenerateContent?key=${apiKey}&alt=sse`;
+  const contents = [];
+  for (const msg of messages) {
+    if (msg.role === "system") continue;
+    const role = msg.role === "assistant" ? "model" : "user";
+    if (msg.role === "user" && typeof msg.content === "string") {
+      const contextParts = {};
+      if (context.selectedElement) {
+        contextParts.selectedElement = context.selectedElement.outerHTML;
+      }
+      if (context.files && context.files.length > 0) {
+        contextParts.filePath = context.files[0].path;
+        contextParts.fileContent = context.files[0].content;
+      }
+      if (context.projectTree) {
+        contextParts.projectTree = context.projectTree;
+      }
+      const enrichedContent = buildUserMessage(msg.content, contextParts);
+      const parts = [
+        { text: enrichedContent }
+      ];
+      if (context.screenshot) {
+        const base64Data = context.screenshot.replace(
+          /^data:image\/\w+;base64,/,
+          ""
+        );
+        parts.push({
+          inline_data: {
+            mime_type: "image/png",
+            data: base64Data
+          }
+        });
+      }
+      contents.push({ role, parts });
+    } else {
+      contents.push({
+        role,
+        parts: [{ text: msg.content }]
+      });
+    }
+  }
+  const body = {
+    system_instruction: {
+      parts: [{ text: SYSTEM_PROMPT }]
+    },
+    contents,
+    generationConfig: {
+      maxOutputTokens: 4096
+    }
+  };
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body)
+    });
+    if (!response.ok) {
+      const errorText = await response.text();
+      onError(`Google API error ${response.status}: ${errorText}`);
+      return;
+    }
+    if (!response.body) {
+      onError("No response body");
+      return;
+    }
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let fullContent = "";
+    let buffer = "";
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+      buffer = lines.pop() || "";
+      for (const line of lines) {
+        if (!line.startsWith("data: ")) continue;
+        const data = line.slice(6).trim();
+        try {
+          const parsed = JSON.parse(data);
+          const text = parsed.candidates?.[0]?.content?.parts?.[0]?.text;
+          if (text) {
+            fullContent += text;
+            onChunk(text);
+          }
+        } catch {
+        }
+      }
+    }
+    onDone({ content: fullContent });
+  } catch (e) {
+    onError(`Request failed: ${e.message}`);
+  }
+}
+
+// src/llm/proxy.ts
+var OPENAI_COMPATIBLE_PROVIDERS = /* @__PURE__ */ new Set([
+  "openai",
+  "deepseek",
+  "groq",
+  "mistral",
+  "xai",
+  "ollama",
+  "openrouter"
+]);
+async function handleLlmChat(params, onChunk, onDone, onError) {
+  const { provider, model, apiKey, messages, context } = params;
+  const wrappedOnDone = (result) => {
+    let modifications;
+    try {
+      const jsonMatch = result.content.match(/```json\s*([\s\S]*?)```/) || result.content.match(/\{[\s\S]*"modifications"[\s\S]*\}/);
+      if (jsonMatch) {
+        const jsonStr = jsonMatch[1] || jsonMatch[0];
+        const parsed = JSON.parse(jsonStr);
+        modifications = parsed.modifications;
+      }
+    } catch {
+    }
+    onDone({ content: result.content, modifications });
+  };
+  if (provider === "anthropic") {
+    await chatAnthropic(model, apiKey, messages, context, onChunk, wrappedOnDone, onError);
+  } else if (provider === "google") {
+    await chatGoogle(model, apiKey, messages, context, onChunk, wrappedOnDone, onError);
+  } else if (OPENAI_COMPATIBLE_PROVIDERS.has(provider)) {
+    await chatOpenAICompatible(
+      provider,
+      model,
+      apiKey,
+      messages,
+      context,
+      onChunk,
+      wrappedOnDone,
+      onError
+    );
+  } else {
+    onError(`Unsupported provider: ${provider}`);
+  }
+}
+
+// src/server.ts
+var __dirname = dirname2(fileURLToPath(import.meta.url));
+function createOpenMagicServer(proxyPort, roots) {
+  const httpServer = http2.createServer((req, res) => {
+    if (req.url === "/__openmagic__/toolbar.js") {
+      serveToolbarBundle(res);
+      return;
+    }
+    if (req.url === "/__openmagic__/health") {
+      res.writeHead(200, {
+        "Content-Type": "application/json",
+        "Access-Control-Allow-Origin": "*"
+      });
+      res.end(JSON.stringify({ status: "ok", version: "0.1.0" }));
+      return;
+    }
+    res.writeHead(404);
+    res.end("Not found");
+  });
+  const wss = new WebSocketServer({
+    server: httpServer,
+    path: "/__openmagic__/ws"
+  });
+  const clientStates = /* @__PURE__ */ new WeakMap();
+  wss.on("connection", (ws) => {
+    clientStates.set(ws, { authenticated: false });
+    ws.on("message", async (data) => {
+      let msg;
+      try {
+        msg = JSON.parse(data.toString());
+      } catch {
+        sendError(ws, "parse_error", "Invalid JSON");
+        return;
+      }
+      const state = clientStates.get(ws);
+      if (!state.authenticated && msg.type !== "handshake") {
+        sendError(ws, "auth_required", "Handshake required");
+        return;
+      }
+      try {
+        await handleMessage(ws, msg, state, roots, proxyPort);
+      } catch (e) {
+        sendError(ws, "internal_error", e.message, msg.id);
+      }
+    });
+    ws.on("close", () => {
+      clientStates.delete(ws);
+    });
+  });
+  return { httpServer, wss };
+}
+async function handleMessage(ws, msg, state, roots, _proxyPort) {
+  switch (msg.type) {
+    case "handshake": {
+      const payload = msg.payload;
+      if (!validateToken(payload.token)) {
+        sendError(ws, "auth_failed", "Invalid token", msg.id);
+        ws.close();
+        return;
+      }
+      state.authenticated = true;
+      const config = loadConfig();
+      send(ws, {
+        id: msg.id,
+        type: "handshake.ok",
+        payload: {
+          version: "0.1.0",
+          roots,
+          config: {
+            provider: config.provider,
+            model: config.model,
+            hasApiKey: !!config.apiKey
+          }
+        }
+      });
+      break;
+    }
+    case "fs.read": {
+      const payload = msg.payload;
+      const result = readFileSafe(payload.path, roots);
+      if ("error" in result) {
+        sendError(ws, "fs_error", result.error, msg.id);
+      } else {
+        send(ws, {
+          id: msg.id,
+          type: "fs.content",
+          payload: { path: payload.path, content: result.content }
+        });
+      }
+      break;
+    }
+    case "fs.write": {
+      const payload = msg.payload;
+      const result = writeFileSafe(payload.path, payload.content, roots);
+      send(ws, {
+        id: msg.id,
+        type: "fs.written",
+        payload: { path: payload.path, ok: result.ok, error: result.error }
+      });
+      break;
+    }
+    case "fs.list": {
+      const payload = msg.payload;
+      const root = payload?.root || roots[0];
+      const files = listFiles(root, roots);
+      send(ws, {
+        id: msg.id,
+        type: "fs.tree",
+        payload: { files, projectTree: getProjectTree(roots) }
+      });
+      break;
+    }
+    case "llm.chat": {
+      const payload = msg.payload;
+      const config = loadConfig();
+      if (!config.apiKey) {
+        sendError(ws, "config_error", "API key not configured", msg.id);
+        return;
+      }
+      await handleLlmChat(
+        {
+          provider: payload.provider || config.provider || "openai",
+          model: payload.model || config.model || "gpt-4o",
+          apiKey: config.apiKey,
+          messages: payload.messages,
+          context: payload.context
+        },
+        (chunk) => {
+          send(ws, { id: msg.id, type: "llm.chunk", payload: { delta: chunk } });
+        },
+        (result) => {
+          send(ws, { id: msg.id, type: "llm.done", payload: result });
+        },
+        (error) => {
+          send(ws, { id: msg.id, type: "llm.error", payload: { message: error } });
+        }
+      );
+      break;
+    }
+    case "config.get": {
+      const config = loadConfig();
+      send(ws, {
+        id: msg.id,
+        type: "config.value",
+        payload: {
+          provider: config.provider,
+          model: config.model,
+          hasApiKey: !!config.apiKey,
+          roots: config.roots || roots
+        }
+      });
+      break;
+    }
+    case "config.set": {
+      const payload = msg.payload;
+      const updates = {};
+      if (payload.provider !== void 0) updates.provider = payload.provider;
+      if (payload.model !== void 0) updates.model = payload.model;
+      if (payload.apiKey !== void 0) updates.apiKey = payload.apiKey;
+      if (payload.roots !== void 0) updates.roots = payload.roots;
+      saveConfig(updates);
+      send(ws, {
+        id: msg.id,
+        type: "config.saved",
+        payload: { ok: true }
+      });
+      break;
+    }
+    default:
+      sendError(ws, "unknown_type", `Unknown message type: ${msg.type}`, msg.id);
+  }
+}
+function send(ws, msg) {
+  if (ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify(msg));
+  }
+}
+function sendError(ws, code, message, id) {
+  send(ws, {
+    id: id || "error",
+    type: "error",
+    payload: { code, message }
+  });
+}
+function serveToolbarBundle(res) {
+  const bundlePaths = [
+    join3(__dirname, "toolbar", "index.global.js"),
+    join3(__dirname, "..", "dist", "toolbar", "index.global.js")
+  ];
+  for (const bundlePath of bundlePaths) {
+    if (existsSync3(bundlePath)) {
+      const content = readFileSync3(bundlePath, "utf-8");
+      res.writeHead(200, {
+        "Content-Type": "application/javascript",
+        "Access-Control-Allow-Origin": "*",
+        "Cache-Control": "no-cache"
+      });
+      res.end(content);
+      return;
+    }
+  }
+  res.writeHead(200, {
+    "Content-Type": "application/javascript",
+    "Access-Control-Allow-Origin": "*"
+  });
+  res.end(`
+    (function() {
+      var div = document.createElement("div");
+      div.style.cssText = "position:fixed;bottom:20px;right:20px;background:#1a1a2e;color:#e94560;padding:16px 24px;border-radius:12px;font-family:system-ui;font-size:14px;z-index:2147483647;box-shadow:0 4px 24px rgba(0,0,0,0.3);";
+      div.textContent = "OpenMagic: Toolbar bundle not found. Run 'npm run build:toolbar' first.";
+      document.body.appendChild(div);
+    })();
+  `);
+}
+
+// src/detect.ts
+import { createConnection } from "net";
+var COMMON_DEV_PORTS = [
+  3e3,
+  // React (CRA), Next.js, Express
+  5173,
+  // Vite
+  5174,
+  // Vite (alternate)
+  4200,
+  // Angular
+  8080,
+  // Vue CLI, generic
+  8e3,
+  // Django, Python
+  8888,
+  // Jupyter, generic
+  3001,
+  // Common alternate
+  4e3,
+  // Phoenix, generic
+  1234
+  // Parcel
+];
+function checkPort(port, host = "127.0.0.1") {
+  return new Promise((resolve3) => {
+    const socket = createConnection({ port, host, timeout: 500 });
+    socket.on("connect", () => {
+      socket.destroy();
+      resolve3(true);
+    });
+    socket.on("error", () => {
+      socket.destroy();
+      resolve3(false);
+    });
+    socket.on("timeout", () => {
+      socket.destroy();
+      resolve3(false);
+    });
+  });
+}
+async function detectDevServer() {
+  const checks = COMMON_DEV_PORTS.map(async (port) => {
+    const isOpen = await checkPort(port);
+    return isOpen ? port : null;
+  });
+  const results = await Promise.all(checks);
+  const foundPort = results.find((p) => p !== null);
+  if (foundPort) {
+    return { port: foundPort, host: "127.0.0.1" };
+  }
+  return null;
+}
+async function isPortOpen(port) {
+  return checkPort(port);
+}
+async function findAvailablePort(startPort) {
+  let port = startPort;
+  while (await isPortOpen(port)) {
+    port++;
+    if (port > startPort + 100) {
+      throw new Error(`Could not find an available port near ${startPort}`);
+    }
+  }
+  return port;
+}
+
+// src/cli.ts
+var VERSION = "0.1.0";
+var program = new Command();
+program.name("openmagic").description("AI-powered coding toolbar for any web application").version(VERSION).option("-p, --port <port>", "Dev server port to proxy", "").option(
+  "-l, --listen <port>",
+  "Port for the OpenMagic proxy",
+  "4567"
+).option(
+  "-r, --root <paths...>",
+  "Project root directories (defaults to cwd)"
+).option("--no-open", "Don't auto-open browser").option("--host <host>", "Dev server host", "127.0.0.1").action(async (opts) => {
+  console.log("");
+  console.log(
+    chalk.bold.magenta("  \u2728 OpenMagic") + chalk.dim(` v${VERSION}`)
+  );
+  console.log("");
+  let targetPort;
+  let targetHost = opts.host;
+  if (opts.port) {
+    targetPort = parseInt(opts.port, 10);
+    const isRunning = await isPortOpen(targetPort);
+    if (!isRunning) {
+      console.log(
+        chalk.yellow(
+          `  \u26A0  No server found at ${targetHost}:${targetPort}`
+        )
+      );
+      console.log(
+        chalk.dim(
+          "     Start your dev server first, then run openmagic again."
+        )
+      );
+      console.log("");
+      process.exit(1);
+    }
+  } else {
+    console.log(chalk.dim("  Scanning for dev server..."));
+    const detected = await detectDevServer();
+    if (!detected) {
+      console.log(
+        chalk.yellow(
+          "  \u26A0  No dev server detected on common ports (3000, 5173, 8080, etc.)"
+        )
+      );
+      console.log("");
+      console.log(
+        chalk.white("  Specify the port manually:")
+      );
+      console.log(
+        chalk.cyan("    npx openmagic --port 3000")
+      );
+      console.log("");
+      process.exit(1);
+    }
+    targetPort = detected.port;
+    targetHost = detected.host;
+  }
+  console.log(
+    chalk.green(`  \u2713  Dev server found at ${targetHost}:${targetPort}`)
+  );
+  const roots = (opts.root || [process.cwd()]).map(
+    (r) => resolve2(r)
+  );
+  const config = loadConfig();
+  saveConfig({ ...config, roots, targetPort });
+  const token = generateSessionToken();
+  let proxyPort = parseInt(opts.listen, 10);
+  if (await isPortOpen(proxyPort)) {
+    proxyPort = await findAvailablePort(proxyPort);
+  }
+  const { httpServer: omServer } = createOpenMagicServer(proxyPort, roots);
+  omServer.listen(proxyPort + 1, "127.0.0.1", () => {
+  });
+  const proxyServer = createProxyServer(
+    targetHost,
+    targetPort,
+    proxyPort + 1
+  );
+  proxyServer.listen(proxyPort, "127.0.0.1", () => {
+    console.log("");
+    console.log(
+      chalk.bold.green(`  \u{1F680} Proxy running at \u2192 `) + chalk.bold.underline.cyan(`http://localhost:${proxyPort}`)
+    );
+    console.log("");
+    console.log(
+      chalk.dim("  Open the URL above in your browser to start.")
+    );
+    console.log(chalk.dim("  Press Ctrl+C to stop."));
+    console.log("");
+    if (opts.open !== false) {
+      open(`http://localhost:${proxyPort}`).catch(() => {
+      });
+    }
+  });
+  proxyServer.on("upgrade", (req, socket, head) => {
+    if (req.url?.startsWith("/__openmagic__")) {
+      omServer.emit("upgrade", req, socket, head);
+    }
+  });
+  const shutdown = () => {
+    console.log("");
+    console.log(chalk.dim("  Shutting down OpenMagic..."));
+    proxyServer.close();
+    omServer.close();
+    process.exit(0);
+  };
+  process.on("SIGINT", shutdown);
+  process.on("SIGTERM", shutdown);
+});
+program.parse();
+//# sourceMappingURL=cli.js.map