frameshot-mcp 0.7.0 → 0.8.0

package/dist/cli.js

@@ -1,14 +1,10 @@
 #!/usr/bin/env node
 import {
-  BrowserPool,
-  CatalogUseCase,
-  DiffUseCase,
-  EXT_TO_FRAMEWORK,
-  HtmlBuilder,
-  ImageComparator,
-  RenderUseCase,
-  ViteBundler
-} from "./chunk-Q7A3DLED.js";
+  createContainer
+} from "./chunk-MA3FOIQY.js";
+import {
+  EXT_TO_FRAMEWORK
+} from "./chunk-PYWXJZTZ.js";
 
 // src/cli.ts
 import { execFileSync, execSync } from "child_process";
@@ -196,18 +192,8 @@ async function main() {
   log(`
   ${brand()} ${c.dim}v0.7.0${c.reset}
 `);
-  const pool = new BrowserPool();
-  const htmlBuilder = new HtmlBuilder();
-  const imageComparator = new ImageComparator();
-  const viteBundler = new ViteBundler();
-  const renderUseCase = new RenderUseCase(
-    pool,
-    htmlBuilder,
-    imageComparator,
-    viteBundler
-  );
-  const catalogUseCase = new CatalogUseCase(renderUseCase);
-  const diffUseCase = new DiffUseCase(renderUseCase, imageComparator);
+  const container = createContainer();
+  const { pool, renderUseCase, catalogUseCase, diffUseCase } = container;
   const outDir = resolve(flags.out);
   mkdirSync(outDir, { recursive: true });
   try {
@@ -228,8 +214,7 @@ async function main() {
         );
     }
   } finally {
-    await viteBundler.shutdown();
-    await pool.shutdown();
+    await container.shutdown();
   }
   log("");
 }

package/dist/index.js

@@ -1,22 +1,12 @@
 #!/usr/bin/env node
 import {
-  AuditUseCase,
-  ScreenshotUseCase,
-  SnapshotStore,
-  SnapshotUseCase
-} from "./chunk-FTYTZW6D.js";
+  createContainer
+} from "./chunk-MA3FOIQY.js";
 import {
-  BrowserPool,
-  CatalogUseCase,
   DEVICE_PRESETS,
-  DiffUseCase,
   EXT_TO_FRAMEWORK,
-  HtmlBuilder,
-  ImageComparator,
-  RenderUseCase,
-  ViteBundler,
   __export
-} from "./chunk-Q7A3DLED.js";
+} from "./chunk-PYWXJZTZ.js";
 
 // src/index.ts
 import { execSync } from "child_process";
@@ -15581,6 +15571,133 @@ ${lines.join("\n")}`
   );
 }
 
+// src/tools/watch-tools.ts
+function registerWatchTools(server2, useCase) {
+  server2.tool(
+    "watch_start",
+    "Start watching component files for changes. On every save, the component is automatically rendered and you will receive a notification \u2014 call watch_get_latest(id) to retrieve the rendered screenshot. Use this to create a live feedback loop while editing UI \u2014 the AI sees each change without you needing to call render_file manually.",
+    {
+      patterns: external_exports.array(external_exports.string()).describe(
+        "Glob patterns or absolute file paths to watch (e.g. ['src/components/Button.tsx'])"
+      ),
+      props: external_exports.record(external_exports.string(), external_exports.unknown()).optional().describe("Props to pass to the component on each render")
+    },
+    async ({ patterns, props }) => {
+      const session = useCase.start(patterns, props, async (event) => {
+        if (event.error) {
+          await server2.server.notification({
+            method: "notifications/message",
+            params: {
+              level: "error",
+              logger: "frameshot/watch",
+              data: `[${event.sessionId}] \u274C ${event.filePath}: ${event.error}`
+            }
+          });
+          return;
+        }
+        const summary = `[${event.sessionId}] \u2713 ${event.filePath} \u2014 ${event.width}\xD7${event.height} \xB7 ${event.elapsedMs}ms \xB7 ${event.mode}` + (event.consoleErrors.length ? `
+\u26A0\uFE0F ${event.consoleErrors.join("\n")}` : "") + `
+Call watch_get_latest("${event.sessionId}") to see the render.`;
+        await server2.server.notification({
+          method: "notifications/message",
+          params: {
+            level: "info",
+            logger: "frameshot/watch",
+            data: summary
+          }
+        });
+      });
+      return {
+        content: [
+          {
+            type: "text",
+            text: `\u2713 Watch started (${session.id})
+Watching: ${patterns.join(", ")}
+
+Every time a matched file is saved, it will be rendered automatically and a notification will appear in your MCP log stream. Call \`watch_get_latest\` with id "${session.id}" to retrieve the screenshot.
+
+Call \`watch_stop\` with id "${session.id}" to stop.`
+          }
+        ]
+      };
+    }
+  );
+  server2.tool(
+    "watch_stop",
+    "Stop a running file watcher started with watch_start.",
+    {
+      id: external_exports.string().describe("Watch session ID returned by watch_start (e.g. 'watch-1')")
+    },
+    async ({ id }) => {
+      const stopped = useCase.stop(id);
+      return {
+        content: [
+          {
+            type: "text",
+            text: stopped ? `\u2713 Watch session "${id}" stopped.` : `No active watch session with id "${id}".`
+          }
+        ]
+      };
+    }
+  );
+  server2.tool(
+    "watch_list",
+    "List all currently active file watch sessions.",
+    {},
+    async () => {
+      const sessions = useCase.activeSessions();
+      if (sessions.length === 0) {
+        return {
+          content: [{ type: "text", text: "No active watch sessions." }]
+        };
+      }
+      const lines = sessions.map(
+        (s) => `${s.id}: watching ${s.patterns.join(", ")}`
+      );
+      return {
+        content: [{ type: "text", text: lines.join("\n") }]
+      };
+    }
+  );
+  server2.tool(
+    "watch_get_latest",
+    "Get the latest rendered screenshot from a watch session. Call this after receiving a watch notification to see the current state of the component.",
+    {
+      id: external_exports.string().describe("Watch session ID from watch_start")
+    },
+    async ({ id }) => {
+      const render = useCase.getLatestRender(id);
+      if (!render) {
+        return {
+          content: [
+            { type: "text", text: `No render yet for session "${id}".` }
+          ]
+        };
+      }
+      if (render.error) {
+        return {
+          content: [
+            { type: "text", text: `Last render failed: ${render.error}` }
+          ]
+        };
+      }
+      return {
+        content: [
+          {
+            type: "image",
+            data: render.image,
+            mimeType: "image/png"
+          },
+          {
+            type: "text",
+            text: `${render.filePath} \u2014 ${render.width}\xD7${render.height} \xB7 ${render.elapsedMs}ms \xB7 ${render.mode}`
+          }
+        ]
+      };
+    }
+  );
+}
+
 // src/tools/register.ts
 function registerAllTools(server2, useCases) {
   registerRenderTools(server2, useCases.render);
@@ -15589,36 +15706,18 @@ function registerAllTools(server2, useCases) {
   registerAuditTools(server2, useCases.audit);
   registerSnapshotTools(server2, useCases.snapshot);
   registerCatalogTools(server2, useCases.catalog);
+  registerWatchTools(server2, useCases.watch);
 }
 
 // src/index.ts
-var browserPool = new BrowserPool();
-var htmlBuilder = new HtmlBuilder();
-var imageComparator = new ImageComparator();
-var snapshotStore = new SnapshotStore();
-var viteBundler = new ViteBundler();
-var renderUseCase = new RenderUseCase(
-  browserPool,
-  htmlBuilder,
-  imageComparator,
-  viteBundler
-);
-var screenshotUseCase = new ScreenshotUseCase(browserPool);
-var diffUseCase = new DiffUseCase(renderUseCase, imageComparator);
-var auditUseCase = new AuditUseCase(browserPool, htmlBuilder);
-var snapshotUseCase = new SnapshotUseCase(
-  snapshotStore,
-  renderUseCase,
-  diffUseCase
-);
-var catalogUseCase = new CatalogUseCase(renderUseCase);
+var container = createContainer();
 async function ensureBrowser() {
   try {
-    await browserPool.warmup(["chromium"]);
+    await container.pool.warmup(["chromium"]);
   } catch {
     try {
       execSync("npx playwright install chromium", { stdio: "pipe" });
-      await browserPool.warmup(["chromium"]);
+      await container.pool.warmup(["chromium"]);
     } catch {
     }
   }
@@ -15626,25 +15725,24 @@ async function ensureBrowser() {
 await ensureBrowser();
 var server = new McpServer({
   name: "frameshot",
-  version: "0.5.0"
+  version: "0.8.0"
 });
 registerAllTools(server, {
-  render: renderUseCase,
-  screenshot: screenshotUseCase,
-  diff: diffUseCase,
-  audit: auditUseCase,
-  snapshot: snapshotUseCase,
-  catalog: catalogUseCase
+  render: container.renderUseCase,
+  screenshot: container.screenshotUseCase,
+  diff: container.diffUseCase,
+  audit: container.auditUseCase,
+  snapshot: container.snapshotUseCase,
+  catalog: container.catalogUseCase,
+  watch: container.watchUseCase
 });
 var transport = new StdioServerTransport();
 await server.connect(transport);
 process.on("SIGINT", async () => {
-  await viteBundler.shutdown();
-  await browserPool.shutdown();
+  await container.shutdown();
   process.exit(0);
 });
 process.on("SIGTERM", async () => {
-  await viteBundler.shutdown();
-  await browserPool.shutdown();
+  await container.shutdown();
   process.exit(0);
 });

package/dist/renderer.d.ts

@@ -90,6 +90,7 @@ interface CatalogEntry {
     width: number;
     height: number;
     consoleErrors: string[];
+    error?: string;
 }
 declare const DEVICE_PRESETS: Record<string, Viewport>;
 declare const EXT_TO_FRAMEWORK: Record<string, Framework>;
@@ -106,11 +107,18 @@ interface ProjectConfig {
 
 declare class BrowserPool {
     private pool;
+    private waiters;
+    private totalPages;
+    private readonly maxPages;
+    constructor(maxConcurrentPages?: number);
     warmup(engines: Engine[]): Promise<void>;
     getPage(engine: Engine): Promise<Page>;
-    setViewport(engine: Engine, viewport: Viewport): Promise<void>;
+    releasePage(engine: Engine, page: Page): void;
+    private acquireSlot;
+    private releaseSlot;
     shutdown(): Promise<void>;
     private getSlot;
+    private createPage;
 }
 
 declare class HtmlBuilder {
@@ -129,7 +137,7 @@ interface DiffComparison {
 }
 declare class ImageComparator {
     diff(imageA: string, imageB: string, threshold?: number): DiffComparison;
-    composite(images: Buffer[], columns: number, labelHeight?: number): {
+    composite(images: Buffer[], columns: number): {
         image: string;
         width: number;
         height: number;
@@ -169,7 +177,7 @@ declare class ViteBundler {
     private ensureServer;
     private importVite;
     private hasPackage;
-    private generateEntry;
+    generateEntry(componentPath: string, framework: Framework, props?: Record<string, unknown>, projectRoot?: string): string;
     private findGlobalCss;
     private getOptimizeDepsInclude;
 }
@@ -226,8 +234,6 @@ declare class RenderUseCase {
     private renderUrl;
     private navigateAndWait;
     private resolveAutoFitViewport;
-    private attachConsoleCapture;
-    private takeScreenshot;
     private resolveOptions;
 }
 

package/dist/renderer.js

@@ -1,10 +1,5 @@
 import {
   AuditUseCase,
-  ScreenshotUseCase,
-  SnapshotStore,
-  SnapshotUseCase
-} from "./chunk-FTYTZW6D.js";
-import {
   BrowserPool,
   CatalogUseCase,
   DEVICE_PRESETS,
@@ -14,8 +9,11 @@ import {
   ImageComparator,
   ProjectDetector,
   RenderUseCase,
+  ScreenshotUseCase,
+  SnapshotStore,
+  SnapshotUseCase,
   ViteBundler
-} from "./chunk-Q7A3DLED.js";
+} from "./chunk-PYWXJZTZ.js";
 export {
   AuditUseCase,
   BrowserPool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frameshot-mcp",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Zero-config visual testing for AI agents. Render project components with full Vite dependency resolution — no stories, no config.",
   "type": "module",
   "main": "dist/index.js",
@@ -67,6 +67,7 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.12.1",
     "axe-core": "^4.12.1",
+    "chokidar": "^5.0.0",
     "pixelmatch": "^7.2.0",
     "playwright": "^1.52.0",
     "pngjs": "^7.0.0"
@@ -85,7 +86,7 @@
     "@types/pngjs": "^6.0.5",
     "tsup": "^8.0.0",
     "typescript": "^5.7.0",
-    "vite": "^6.0.0",
+    "vite": "^8.0.16",
     "vitest": "^4.1.9"
   },
   "mcpName": "io.github.kamegoro/frameshot-mcp",

package/scripts/render-changed.mjs

@@ -1,11 +1,13 @@
 #!/usr/bin/env node
 
 import { execSync } from "node:child_process";
-import { mkdirSync, writeFileSync } from "node:fs";
+import { existsSync, mkdirSync, writeFileSync } from "node:fs";
 import { basename, extname, join, relative } from "node:path";
 
 const {
   INPUT_PATHS = "",
+  INPUT_EXTENSIONS = ".jsx,.tsx,.vue,.svelte,.astro,.mdx",
+  INPUT_EXCLUDE = "*.test.*,*.spec.*,*.stories.*,*.story.*",
   INPUT_WIDTH = "",
   INPUT_HEIGHT = "",
   INPUT_BASE_REF = "",
@@ -20,19 +22,33 @@ const patterns = INPUT_PATHS.split(/[,\n]/)
   .map((p) => p.trim())
   .filter(Boolean);
 
-const COMPONENT_EXTS = new Set([
-  ".jsx",
-  ".tsx",
-  ".vue",
-  ".svelte",
-]);
+const COMPONENT_EXTS = new Set(
+  INPUT_EXTENSIONS.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean),
+);
+
+const EXCLUDE_PATTERNS = INPUT_EXCLUDE.split(",")
+  .map((p) => p.trim())
+  .filter(Boolean)
+  .map((p) => {
+    // Convert glob pattern to regex: *.test.* → /[^/]*\.test\.[^/]*/
+    const escaped = p.replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*/g, "[^/]*");
+    return new RegExp(escaped);
+  });
+
+function isExcluded(filePath) {
+  const base = filePath.split("/").pop() ?? "";
+  return EXCLUDE_PATTERNS.some((re) => re.test(base));
+}
 
 function findFiles(workspace, patterns) {
   const allFiles = [];
   for (const pattern of patterns) {
     try {
+      const absPattern = pattern.startsWith("/")
+        ? pattern
+        : join(workspace, pattern.replace(/^\.\//, ""));
       const result = execSync(
-        `find ${workspace} -path '${pattern}' -type f 2>/dev/null`,
+        `find "${workspace}" -path "${absPattern}" -type f 2>/dev/null`,
         { encoding: "utf-8" },
       );
       allFiles.push(...result.split("\n").filter(Boolean));
@@ -40,7 +56,23 @@ function findFiles(workspace, patterns) {
       // Pattern didn't match
     }
   }
-  return allFiles.filter((f) => COMPONENT_EXTS.has(extname(f).toLowerCase()));
+  return allFiles
+    .filter((f) => COMPONENT_EXTS.has(extname(f).toLowerCase()))
+    .filter((f) => !isExcluded(f));
+}
+
+// When no paths specified, scan all component files in the workspace
+function findAllComponentFiles(workspace) {
+  try {
+    const exts = [...COMPONENT_EXTS].map((e) => `-name "*${e}"`).join(" -o ");
+    const result = execSync(
+      `find "${workspace}" \\( ${exts} \\) -not -path "*/node_modules/*" -not -path "*/.git/*" -type f 2>/dev/null`,
+      { encoding: "utf-8" },
+    );
+    return result.split("\n").filter(Boolean).filter((f) => !isExcluded(f));
+  } catch {
+    return [];
+  }
 }
 
 function getChangedFiles(baseRef) {
@@ -78,8 +110,26 @@ function restoreFile(filePath) {
 }
 
 async function main() {
-  const { BrowserPool, HtmlBuilder, ImageComparator, RenderUseCase, ViteBundler } =
-    await import("frameshot-mcp/renderer");
+  // Try to resolve frameshot-mcp/renderer from multiple locations:
+  // 1. The action's own node_modules (when run as a GitHub Action)
+  // 2. Standard module resolution (when installed globally or in PATH)
+  let renderer;
+  const actionDir = new URL("..", import.meta.url).pathname;
+  const localPath = new URL(
+    "node_modules/frameshot-mcp/dist/renderer.js",
+    `file://${actionDir}/`,
+  ).href;
+  try {
+    renderer = await import(localPath);
+  } catch {
+    try {
+      renderer = await import("frameshot-mcp/renderer");
+    } catch {
+      console.error("Could not load frameshot-mcp. Run: npm install frameshot-mcp");
+      process.exit(1);
+    }
+  }
+  const { BrowserPool, HtmlBuilder, ImageComparator, RenderUseCase, ViteBundler } = renderer;
 
   const browserPool = new BrowserPool();
   const htmlBuilder = new HtmlBuilder();
@@ -94,16 +144,33 @@ async function main() {
 
   await browserPool.warmup(["chromium"]);
 
-  const allFiles = findFiles(GITHUB_WORKSPACE, patterns);
+  // If no paths specified, use changed files detected from git diff
+  let allFiles;
+  if (patterns.length === 0) {
+    const changedFiles = getChangedFiles(INPUT_BASE_REF);
+    if (!changedFiles) {
+      // No base ref — render all component files in workspace
+      allFiles = findAllComponentFiles(GITHUB_WORKSPACE);
+    } else {
+      // Render only the changed component files
+      allFiles = [...changedFiles]
+        .filter((f) => COMPONENT_EXTS.has(extname(f).toLowerCase()))
+        .filter((f) => !isExcluded(f))
+        .map((f) => join(GITHUB_WORKSPACE, f))
+        .filter((f) => existsSync(f));
+    }
+  } else {
+    allFiles = findFiles(GITHUB_WORKSPACE, patterns);
+  }
 
   if (allFiles.length === 0) {
-    console.log("No component files found matching the specified patterns.");
+    console.log("No changed component files to render.");
     await viteBundler.shutdown();
     await browserPool.shutdown();
     process.exit(0);
   }
 
-  const changedFiles = getChangedFiles(INPUT_BASE_REF);
+  const changedFiles = patterns.length > 0 ? getChangedFiles(INPUT_BASE_REF) : null;
   const filesToRender = changedFiles
     ? allFiles.filter((f) => {
         const rel = relative(GITHUB_WORKSPACE, f);
@@ -123,8 +190,8 @@ async function main() {
   const autoFit = !INPUT_WIDTH || !INPUT_HEIGHT;
   const renderOpts = {
     viewport: {
-      width: INPUT_WIDTH ? parseInt(INPUT_WIDTH) : 1280,
-      height: INPUT_HEIGHT ? parseInt(INPUT_HEIGHT) : 800,
+      width: INPUT_WIDTH ? parseInt(INPUT_WIDTH, 10) : 1280,
+      height: INPUT_HEIGHT ? parseInt(INPUT_HEIGHT, 10) : 800,
     },
     autoFit,
     fullPage: true,