vite-plugin-ai-annotator 1.14.9 → 1.14.11

package/dist/vite-plugin.js

@@ -1077,114 +1077,142 @@ var MagicString = class _MagicString {
   }
 };
 
-// src/auto-setup-mcp.ts
+// src/auto-setup-skills.ts
 import { existsSync, readFileSync, writeFileSync, mkdirSync } from "node:fs";
 import { join, dirname } from "node:path";
-var MCP_SERVER_NAME = "ai-annotator";
-function detectPackageManager(projectRoot) {
-  if (existsSync(join(projectRoot, "bun.lockb")) || existsSync(join(projectRoot, "bun.lock"))) {
-    return "bunx";
-  }
-  if (existsSync(join(projectRoot, "pnpm-lock.yaml"))) {
-    return "pnpm dlx";
-  }
-  return "npx";
-}
-function buildMcpServerConfig(packageManager, serverUrl) {
-  const baseArgs = ["vite-plugin-ai-annotator", "mcp", "-s", serverUrl];
-  if (packageManager === "pnpm dlx") {
-    return {
-      command: "pnpm",
-      args: ["dlx", ...baseArgs]
-    };
-  }
-  return {
-    command: packageManager,
-    args: baseArgs
-  };
-}
-function readJsonFile(filePath) {
-  try {
-    const content = readFileSync(filePath, "utf-8");
-    return JSON.parse(content);
-  } catch {
-    return null;
-  }
+var MARKER_START = "<!-- ai-annotator:start -->";
+var MARKER_END = "<!-- ai-annotator:end -->";
+function generateSkillBody(serverUrl) {
+  return `AI Annotator provides access to the user's live browser session. Users select UI elements and add feedback comments. Use the REST API to read feedback, capture screenshots, inject CSS/JS, and read console logs.
+
+Server: \`${serverUrl}\`
+
+## REST API
+
+All endpoints return JSON. Obtain session ID from \`GET /api/sessions\` first.
+
+| Method | Endpoint | Body/Query | Description |
+|--------|----------|------------|-------------|
+| \`GET\` | \`${serverUrl}/api/sessions\` | \u2014 | List connected browser sessions |
+| \`GET\` | \`${serverUrl}/api/sessions/:id/page-context\` | \u2014 | Page URL, title, selection count |
+| \`POST\` | \`${serverUrl}/api/sessions/:id/select\` | \`{mode?, selector?, selectorType?}\` | Trigger feedback selection |
+| \`GET\` | \`${serverUrl}/api/sessions/:id/feedback\` | \`?fields=xpath,attributes,styles,children\` | Get selected feedback items |
+| \`DELETE\` | \`${serverUrl}/api/sessions/:id/feedback\` | \u2014 | Clear all selections |
+| \`POST\` | \`${serverUrl}/api/sessions/:id/screenshot\` | \`{type?, selector?, quality?}\` | Capture screenshot |
+| \`POST\` | \`${serverUrl}/api/sessions/:id/inject-css\` | \`{css}\` | Inject CSS into page |
+| \`POST\` | \`${serverUrl}/api/sessions/:id/inject-js\` | \`{code}\` | Execute JS in page context |
+| \`GET\` | \`${serverUrl}/api/sessions/:id/console\` | \`?clear=true\` | Get captured console logs |
+
+## Workflow
+
+1. \`GET ${serverUrl}/api/sessions\` \u2192 get session ID
+2. \`GET ${serverUrl}/api/sessions/{id}/feedback\` \u2192 read user feedback
+3. Make code changes based on feedback
+4. \`DELETE ${serverUrl}/api/sessions/{id}/feedback\` \u2192 clear feedback after addressing it`;
 }
-function writeJsonFile(filePath, data) {
+function writeIfChanged(filePath, content, verbose) {
   const dir = dirname(filePath);
   if (!existsSync(dir)) {
     mkdirSync(dir, { recursive: true });
   }
-  writeFileSync(filePath, JSON.stringify(data, null, 2) + "\n");
-}
-function setupConfigFile(filePath, serverConfig, verbose) {
-  const existingConfig = readJsonFile(filePath);
-  if (existingConfig) {
-    const existing = existingConfig.mcpServers?.[MCP_SERVER_NAME];
-    if (existing && existing.command === serverConfig.command && JSON.stringify(existing.args) === JSON.stringify(serverConfig.args)) {
-      if (verbose) {
-        console.log(`[ai-annotator] ${filePath} already configured`);
-      }
+  if (existsSync(filePath)) {
+    const existing = readFileSync(filePath, "utf-8");
+    if (existing === content) {
+      if (verbose) console.log(`[ai-annotator] ${filePath} already up-to-date`);
       return false;
     }
-    existingConfig.mcpServers = existingConfig.mcpServers || {};
-    existingConfig.mcpServers[MCP_SERVER_NAME] = serverConfig;
-    writeJsonFile(filePath, existingConfig);
-    if (verbose) {
-      console.log(`[ai-annotator] Updated ${filePath}`);
+  }
+  writeFileSync(filePath, content);
+  if (verbose) console.log(`[ai-annotator] Updated ${filePath}`);
+  return true;
+}
+function updateMarkerSection(filePath, content, verbose) {
+  const section = `${MARKER_START}
+${content}
+${MARKER_END}`;
+  if (existsSync(filePath)) {
+    const existing = readFileSync(filePath, "utf-8");
+    const startIdx = existing.indexOf(MARKER_START);
+    const endIdx = existing.indexOf(MARKER_END);
+    if (startIdx !== -1 && endIdx !== -1) {
+      const updated = existing.slice(0, startIdx) + section + existing.slice(endIdx + MARKER_END.length);
+      if (updated === existing) {
+        if (verbose) console.log(`[ai-annotator] ${filePath} already up-to-date`);
+        return false;
+      }
+      writeFileSync(filePath, updated);
+      if (verbose) console.log(`[ai-annotator] Updated ${filePath}`);
+      return true;
     }
+    const separator = existing.endsWith("\n") ? "\n" : "\n\n";
+    writeFileSync(filePath, existing + separator + section + "\n");
+    if (verbose) console.log(`[ai-annotator] Appended to ${filePath}`);
     return true;
   }
-  const newConfig = {
-    mcpServers: {
-      [MCP_SERVER_NAME]: serverConfig
-    }
-  };
-  writeJsonFile(filePath, newConfig);
-  if (verbose) {
-    console.log(`[ai-annotator] Created ${filePath}`);
+  const dir = dirname(filePath);
+  if (!existsSync(dir)) {
+    mkdirSync(dir, { recursive: true });
   }
+  writeFileSync(filePath, section + "\n");
+  if (verbose) console.log(`[ai-annotator] Created ${filePath}`);
   return true;
 }
-function detectExistingConfigs(projectRoot) {
-  const potentialConfigs = [
-    join(projectRoot, ".mcp.json"),
-    join(projectRoot, ".cursor", "mcp.json"),
-    join(projectRoot, ".vscode", "mcp.json")
-  ];
-  return potentialConfigs.filter(existsSync);
+function track(result, filePath, updated) {
+  if (updated) {
+    result.updated.push(filePath);
+  } else {
+    result.alreadyConfigured.push(filePath);
+  }
 }
-function autoSetupMcp(options) {
+function autoSetupSkills(options) {
   const { projectRoot, serverUrl, verbose = false } = options;
-  const result = {
-    updated: [],
-    alreadyConfigured: []
-  };
-  const packageManager = detectPackageManager(projectRoot);
-  const serverConfig = buildMcpServerConfig(packageManager, serverUrl);
-  if (verbose) {
-    console.log(`[ai-annotator] Detected package manager: ${packageManager}`);
-  }
-  const existingConfigs = detectExistingConfigs(projectRoot);
-  if (existingConfigs.length === 0) {
-    const defaultConfigPath = join(projectRoot, ".mcp.json");
-    const wasUpdated = setupConfigFile(defaultConfigPath, serverConfig, verbose);
-    if (wasUpdated) {
-      result.updated.push(defaultConfigPath);
-    }
-    return result;
-  }
-  if (verbose) {
-    console.log(`[ai-annotator] Found ${existingConfigs.length} MCP config file(s)`);
+  const result = { updated: [], alreadyConfigured: [] };
+  const body = generateSkillBody(serverUrl);
+  const claudeSkill = join(projectRoot, ".claude", "skills", "ai-annotator", "SKILL.md");
+  track(result, claudeSkill, writeIfChanged(claudeSkill, `---
+name: ai-annotator
+description: This skill should be used when the user asks to "check browser feedback", "get user feedback", "capture screenshot", "inspect element", "inject CSS", "inject JS", "read console logs", or mentions AI Annotator, browser session, or UI feedback.
+---
+
+${body}
+`, verbose));
+  if (existsSync(join(projectRoot, ".cursor"))) {
+    const cursorRule = join(projectRoot, ".cursor", "rules", "ai-annotator.mdc");
+    track(result, cursorRule, writeIfChanged(cursorRule, `---
+description: AI Annotator - interact with user's live browser session for UI feedback
+globs:
+alwaysApply: true
+---
+
+${body}
+`, verbose));
+  }
+  if (existsSync(join(projectRoot, ".windsurf"))) {
+    const windsurfRule = join(projectRoot, ".windsurf", "rules", "ai-annotator.md");
+    track(result, windsurfRule, writeIfChanged(windsurfRule, `---
+trigger: always_on
+---
+
+${body}
+`, verbose));
+  }
+  const agentsMd = join(projectRoot, "AGENTS.md");
+  if (existsSync(agentsMd)) {
+    track(result, agentsMd, updateMarkerSection(agentsMd, body, verbose));
+  }
+  if (existsSync(join(projectRoot, ".github"))) {
+    const copilotInstructions = join(projectRoot, ".github", "instructions", "ai-annotator.instructions.md");
+    track(result, copilotInstructions, writeIfChanged(copilotInstructions, `---
+applyTo: "**"
+---
+
+${body}
+`, verbose));
   }
-  for (const configFile of existingConfigs) {
-    const wasUpdated = setupConfigFile(configFile, serverConfig, verbose);
-    if (wasUpdated) {
-      result.updated.push(configFile);
-    } else {
-      result.alreadyConfigured.push(configFile);
-    }
+  if (existsSync(join(projectRoot, ".clinerules"))) {
+    const clineRule = join(projectRoot, ".clinerules", "ai-annotator.md");
+    track(result, clineRule, writeIfChanged(clineRule, `${body}
+`, verbose));
   }
   return result;
 }
@@ -1273,7 +1301,7 @@ var AiAnnotatorServer = class {
       publicAddress: options.publicAddress ?? `http://${listenAddress}:${port}`,
       verbose: options.verbose ?? false,
       injectSourceLoc: options.injectSourceLoc ?? true,
-      autoSetupMcp: options.autoSetupMcp ?? false
+      autoSetupSkills: options.autoSetupSkills ?? true
     };
     const currentFileDir = dirname2(fileURLToPath(import.meta.url));
     this.isRunningFromSource = currentFileDir.endsWith("/src") || currentFileDir.endsWith("\\src");
@@ -1320,9 +1348,6 @@ var AiAnnotatorServer = class {
     if (this.options.verbose) {
       args.push("--verbose");
     }
-    if (this.options.autoSetupMcp) {
-      args.push("--skip-mcp-instructions");
-    }
     this.log(`Starting annotator server: ${cmd} ${args.join(" ")}`);
     this.log(`Working directory: ${this.packageDir}`);
     this.serverProcess = spawn(cmd, args, {
@@ -1415,17 +1440,15 @@ function aiAnnotator(options = {}) {
     configResolved(config) {
       serverManager = new AiAnnotatorServer(options);
       root = config.root;
-      if (options.autoSetupMcp) {
-        const serverUrl = `http://${options.listenAddress ?? "127.0.0.1"}:${options.port ?? 7318}`;
-        const result = autoSetupMcp({
+      if (options.autoSetupSkills !== false) {
+        const serverUrl = options.publicAddress ?? `http://${options.listenAddress ?? "127.0.0.1"}:${options.port ?? 7318}`;
+        const skillsResult = autoSetupSkills({
           projectRoot: root,
           serverUrl,
           verbose: options.verbose
         });
-        if (result.updated.length > 0) {
-          console.log(`[ai-annotator] \u2705 MCP config updated: ${result.updated.map((f) => f.replace(root + "/", "")).join(", ")}`);
-        } else if (result.alreadyConfigured.length > 0) {
-          console.log(`[ai-annotator] \u2705 MCP config already up-to-date`);
+        if (skillsResult.updated.length > 0) {
+          console.log(`[ai-annotator] \u2705 AI skills updated: ${skillsResult.updated.map((f) => f.replace(root + "/", "")).join(", ")}`);
         }
       }
     },