@onlook/storybook-plugin 0.4.0-beta.14 → 0.4.0-beta.16

package/dist/cli/index.js

@@ -63,6 +63,9 @@ var execFileAsync = promisify(execFile);
 var require2 = createRequire$1(import.meta.url);
 var browserPromise = null;
 var installPromise = null;
+var ChromiumUnavailableError = class extends Error {
+  code = "CHROMIUM_UNAVAILABLE";
+};
 var isMissingExecutableError = (err) => {
   const msg = err instanceof Error ? err.message : String(err);
   return msg.includes("Executable doesn't exist") || msg.includes("Please run the following command to download new browsers") || // Older playwright revisions phrase the version-mismatch case differently.
@@ -95,7 +98,9 @@ async function installChromium() {
       } catch (err) {
         const detail = err instanceof Error ? err.message : String(err);
         console.error(`[STORYBOOK_PLUGIN] chromium install FAILED: ${detail}`);
-        throw new Error(`Playwright chromium install failed: ${detail}`);
+        throw new ChromiumUnavailableError(
+          `Playwright chromium install failed: ${detail}`
+        );
       } finally {
         installPromise = null;
       }
@@ -117,7 +122,7 @@ async function launchWithSelfHeal() {
       console.error(
         `[STORYBOOK_PLUGIN] launch still failing after install \u2014 likely path or libs issue: ${detail}`
       );
-      throw new Error(
+      throw new ChromiumUnavailableError(
         `Playwright chromium is unavailable in this sandbox (install ran but launch still failed): ${detail}`
       );
     }

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createRequire } from 'node:module';
-import path7, { dirname, join, relative } from 'path';
+import path8, { dirname, join, relative } from 'path';
 import crypto, { createHash } from 'crypto';
 import fs5, { existsSync } from 'fs';
 import { fileURLToPath } from 'url';
@@ -61,7 +61,7 @@ function envContainmentPlugin(options) {
   const resolveOutcomes = /* @__PURE__ */ new Map();
   const roots = /* @__PURE__ */ new Set([normalizeSlashes(process.cwd())]);
   const matchTarget = (absPath) => {
-    const norm = normalizeSlashes(path7.normalize(absPath));
+    const norm = normalizeSlashes(path8.normalize(absPath));
     for (const rel of byModule.keys()) {
       for (const root of roots) {
         const target = `${root}/${rel}`;
@@ -96,10 +96,10 @@ function envContainmentPlugin(options) {
       if (source.startsWith("\0")) return null;
       const cleaned = stripQuery(source);
       let direct = null;
-      if (path7.isAbsolute(cleaned)) {
+      if (path8.isAbsolute(cleaned)) {
         direct = cleaned;
       } else if (importer && (cleaned.startsWith("./") || cleaned.startsWith("../"))) {
-        direct = path7.resolve(path7.dirname(stripQuery(importer)), cleaned);
+        direct = path8.resolve(path8.dirname(stripQuery(importer)), cleaned);
       }
       if (direct) {
         const rel = matchTarget(direct);
@@ -108,7 +108,7 @@ function envContainmentPlugin(options) {
       }
       if (!specifierMightMatch(cleaned)) return null;
       if (typeof this.resolve !== "function") return null;
-      const importerDir = importer ? path7.dirname(stripQuery(importer)) : "";
+      const importerDir = importer ? path8.dirname(stripQuery(importer)) : "";
       const outcomeKey = `${importerDir}|${source}`;
       const memoized = resolveOutcomes.get(outcomeKey);
       if (memoized !== void 0) return memoized;
@@ -328,7 +328,7 @@ function componentLocPlugin(options = {}) {
         sourceFilename: filepath
       });
       let mutated = false;
-      const relativePath = path7.relative(root, filepath);
+      const relativePath = path8.relative(root, filepath);
       traverse(ast, {
         JSXElement(nodePath) {
           const opening = nodePath.node.openingElement;
@@ -387,9 +387,9 @@ function fastRefreshTolerantExportsPlugin() {
     }
   };
 }
-var CACHE_DIR = path7.join(process.cwd(), ".storybook-cache");
-var SCREENSHOTS_DIR = path7.join(CACHE_DIR, "screenshots");
-var MANIFEST_PATH = path7.join(CACHE_DIR, "manifest.json");
+var CACHE_DIR = path8.join(process.cwd(), ".storybook-cache");
+var SCREENSHOTS_DIR = path8.join(CACHE_DIR, "screenshots");
+var MANIFEST_PATH = path8.join(CACHE_DIR, "manifest.json");
 var VIEWPORT_WIDTH = 1920;
 var VIEWPORT_HEIGHT = 1080;
 var MIN_COMPONENT_WIDTH = 420;
@@ -440,6 +440,9 @@ var execFileAsync = promisify(execFile);
 var require2 = createRequire$1(import.meta.url);
 var browserPromise = null;
 var installPromise = null;
+var ChromiumUnavailableError = class extends Error {
+  code = "CHROMIUM_UNAVAILABLE";
+};
 var isMissingExecutableError = (err) => {
   const msg = err instanceof Error ? err.message : String(err);
   return msg.includes("Executable doesn't exist") || msg.includes("Please run the following command to download new browsers") || // Older playwright revisions phrase the version-mismatch case differently.
@@ -472,7 +475,9 @@ async function installChromium() {
       } catch (err) {
         const detail = err instanceof Error ? err.message : String(err);
         console.error(`[STORYBOOK_PLUGIN] chromium install FAILED: ${detail}`);
-        throw new Error(`Playwright chromium install failed: ${detail}`);
+        throw new ChromiumUnavailableError(
+          `Playwright chromium install failed: ${detail}`
+        );
       } finally {
         installPromise = null;
       }
@@ -494,7 +499,7 @@ async function launchWithSelfHeal() {
       console.error(
         `[STORYBOOK_PLUGIN] launch still failing after install \u2014 likely path or libs issue: ${detail}`
       );
-      throw new Error(
+      throw new ChromiumUnavailableError(
         `Playwright chromium is unavailable in this sandbox (install ran but launch still failed): ${detail}`
       );
     }
@@ -575,8 +580,8 @@ async function detectRenderState(page, opts = {}) {
   }
 }
 function getScreenshotPath(storyId, theme) {
-  const storyDir = path7.join(SCREENSHOTS_DIR, storyId);
-  return path7.join(storyDir, `${theme}.png`);
+  const storyDir = path8.join(SCREENSHOTS_DIR, storyId);
+  return path8.join(storyDir, `${theme}.png`);
 }
 async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT, storybookUrl = "http://localhost:6006", loadTimeoutMs = 9e4, renderTimeoutMs = 2e4) {
   const browser = await getBrowser();
@@ -664,7 +669,7 @@ async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, h
 async function generateScreenshot(storyId, theme, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   try {
     ensureCacheDirectories();
-    const storyDir = path7.join(SCREENSHOTS_DIR, storyId);
+    const storyDir = path8.join(SCREENSHOTS_DIR, storyId);
     if (!fs5.existsSync(storyDir)) {
       fs5.mkdirSync(storyDir, { recursive: true });
     }
@@ -785,7 +790,7 @@ async function fetchStorybookIndex() {
 }
 function getStoriesForFile(filePath) {
   if (!cachedIndex) return [];
-  const fileName = path7.basename(filePath);
+  const fileName = path8.basename(filePath);
   return Object.values(cachedIndex.entries).filter((entry) => entry.type === "story" && entry.importPath.endsWith(fileName)).map((entry) => entry.id);
 }
 async function regenerateScreenshotsForFiles(files) {
@@ -980,8 +985,8 @@ function softStoryRerenderPlugin() {
     preview.onStoriesChanged({ importFn: newModule.importFn });
   }
 });`;
-      const out = code.replace(pattern, (_match, quote, path8) => {
-        return replacement.replace("$QUOTE$$PATH$$QUOTE$", `${quote}${path8}${quote}`);
+      const out = code.replace(pattern, (_match, quote, path9) => {
+        return replacement.replace("$QUOTE$$PATH$$QUOTE$", `${quote}${path9}${quote}`);
       });
       return out === code ? null : { code: out, map: null };
     }
@@ -992,14 +997,14 @@ function resolveTsconfigAliases(root) {
   try {
     const config = readTsconfigAliasConfig(root);
     if (!config) return [];
-    const base = path7.resolve(root, config.baseUrl ?? ".");
+    const base = path8.resolve(root, config.baseUrl ?? ".");
     const aliases = [];
     for (const [key, targets] of Object.entries(config.paths)) {
       const target = targets[0];
       if (!target) continue;
       if (key.endsWith("/*") && target.endsWith("/*")) {
         const findPrefix = key.slice(0, -1);
-        const targetDir = path7.resolve(base, target.slice(0, -2));
+        const targetDir = path8.resolve(base, target.slice(0, -2));
         aliases.push({
           find: new RegExp(`^${escapeRegExp(findPrefix)}`),
           replacement: `${targetDir}/`
@@ -1007,7 +1012,7 @@ function resolveTsconfigAliases(root) {
       } else if (!key.includes("*") && !target.includes("*")) {
         aliases.push({
           find: new RegExp(`^${escapeRegExp(key)}$`),
-          replacement: path7.resolve(base, target)
+          replacement: path8.resolve(base, target)
         });
       }
     }
@@ -1018,7 +1023,7 @@ function resolveTsconfigAliases(root) {
 }
 function readTsconfigAliasConfig(root) {
   for (const candidate of TSCONFIG_CANDIDATES) {
-    const abs = path7.join(root, candidate);
+    const abs = path8.join(root, candidate);
     let text;
     try {
       text = fs5.readFileSync(abs, "utf-8");
@@ -1099,8 +1104,128 @@ function findGitRoot(startPath) {
   }
   return null;
 }
+var STORY_FILE_PATTERN = /\.stories\.(js|jsx|mjs|ts|tsx|mdx)$/;
+function isStoryFile(file) {
+  return STORY_FILE_PATTERN.test(file);
+}
+function missingFromIndex(index, files) {
+  const importPaths = [];
+  for (const entry of Object.values(index.entries ?? {})) {
+    if (typeof entry.importPath === "string") importPaths.push(entry.importPath);
+  }
+  return files.filter((file) => {
+    const base = path8.basename(file);
+    return !importPaths.some((importPath) => importPath.endsWith(base));
+  });
+}
+function portFromArgv(argv) {
+  for (let i = 0; i < argv.length; i += 1) {
+    const arg = argv[i];
+    if (arg === void 0) continue;
+    let raw;
+    if (arg === "-p" || arg === "--port") {
+      raw = argv[i + 1];
+    } else {
+      raw = /^(?:-p|--port)=(\d+)$/.exec(arg)?.[1];
+    }
+    if (raw === void 0) continue;
+    const parsed = Number.parseInt(raw, 10);
+    if (Number.isInteger(parsed) && parsed > 0 && parsed < 65536) return parsed;
+  }
+  return null;
+}
+async function defaultFetchIndex(port) {
+  try {
+    const res = await fetch(`http://localhost:${port}/index.json?_t=${Date.now()}`, {
+      cache: "no-store",
+      signal: AbortSignal.timeout(2e3)
+    });
+    if (!res.ok) return null;
+    return await res.json();
+  } catch {
+    return null;
+  }
+}
+var sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+function createStoryIndexBroadcaster({
+  ports,
+  notify,
+  fetchIndex = defaultFetchIndex,
+  debounceMs = 500,
+  probeIntervalMs = 500,
+  probeCeilingMs = 15e3
+}) {
+  const candidatePorts = [...new Set(ports)];
+  const pendingAdds = /* @__PURE__ */ new Set();
+  let addDebounce = null;
+  let unlinkDebounce = null;
+  let probing = false;
+  const scheduleProbe = () => {
+    if (addDebounce) clearTimeout(addDebounce);
+    addDebounce = setTimeout(() => {
+      addDebounce = null;
+      void probeThenNotify();
+    }, debounceMs);
+  };
+  const probeThenNotify = async () => {
+    if (probing) return;
+    probing = true;
+    const files = Array.from(pendingAdds);
+    const deadline = Date.now() + probeCeilingMs;
+    try {
+      if (files.length === 0) return;
+      while (Date.now() < deadline) {
+        for (const candidate of candidatePorts) {
+          const index = await fetchIndex(candidate);
+          if (index && missingFromIndex(index, files).length === 0) {
+            console.log(
+              "[STORYBOOK_PLUGIN] Index caught up with new story files \u2014 broadcasting",
+              { files, port: candidate }
+            );
+            for (const file of files) pendingAdds.delete(file);
+            notify();
+            return;
+          }
+        }
+        await sleep(probeIntervalMs);
+      }
+      console.warn("[STORYBOOK_PLUGIN] Index probe hit ceiling \u2014 broadcasting anyway", {
+        files,
+        probeCeilingMs
+      });
+      for (const file of files) pendingAdds.delete(file);
+      notify();
+    } finally {
+      probing = false;
+      if (pendingAdds.size > 0) scheduleProbe();
+    }
+  };
+  return {
+    onStoryFileAdded(file) {
+      if (!isStoryFile(file)) return;
+      pendingAdds.add(file);
+      scheduleProbe();
+    },
+    onStoryFileRemoved(file) {
+      if (!isStoryFile(file)) return;
+      pendingAdds.delete(file);
+      if (unlinkDebounce) clearTimeout(unlinkDebounce);
+      unlinkDebounce = setTimeout(() => {
+        unlinkDebounce = null;
+        console.log("[STORYBOOK_PLUGIN] Story file removed \u2014 broadcasting", { file });
+        notify();
+      }, debounceMs);
+    }
+  };
+}
 
 // src/storybook-onlook-plugin.ts
+function errorCode(error) {
+  if (error && typeof error === "object" && "code" in error && typeof error.code === "string") {
+    return error.code;
+  }
+  return void 0;
+}
 var __dirname$1 = dirname(fileURLToPath(import.meta.url));
 var storybookDir = join(__dirname$1, "..");
 var gitRoot = findGitRoot(storybookDir);
@@ -1159,7 +1284,7 @@ var TAILWIND_ENTRY_CANDIDATES = [
 var TAILWIND_DIRECTIVE_PATTERN = /@import\s+['"](?:tailwindcss|tailwindcss\/.+)['"]|@tailwind\s+(?:base|components|utilities)/;
 function detectTailwindEntryCss(cwd) {
   for (const rel of TAILWIND_ENTRY_CANDIDATES) {
-    const abs = path7.join(cwd, rel);
+    const abs = path8.join(cwd, rel);
     try {
       if (!fs5.existsSync(abs)) continue;
       const head = fs5.readFileSync(abs, "utf-8").slice(0, 2048);
@@ -1246,11 +1371,13 @@ var serveMetadataAndScreenshots = (req, res, next) => {
       res.end(buffer);
     }).catch((error) => {
       console.error("Screenshot capture error:", error);
+      const code = errorCode(error);
       res.statusCode = 500;
       res.setHeader("Content-Type", "application/json");
       res.end(
         JSON.stringify({
           error: "Failed to capture screenshot",
+          ...code ? { code } : {},
           details: String(error)
         })
       );
@@ -1280,11 +1407,13 @@ var serveMetadataAndScreenshots = (req, res, next) => {
       res.end(JSON.stringify(result));
     }).catch((error) => {
       console.error("Console log capture error:", error);
+      const code = errorCode(error);
       res.statusCode = 500;
       res.setHeader("Content-Type", "application/json");
       res.end(
         JSON.stringify({
           error: "Failed to capture console logs",
+          ...code ? { code } : {},
           details: String(error)
         })
       );
@@ -1292,7 +1421,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
     return;
   }
   if (req.url?.startsWith("/screenshots/")) {
-    const screenshotPath = path7.join(
+    const screenshotPath = path8.join(
       process.cwd(),
       ".storybook-cache",
       req.url.replace("/screenshots/", "screenshots/")
@@ -1313,7 +1442,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         `[STORYBOOK_PLUGIN] Generating screenshot on-demand: ${storyId}/${theme}`
       );
       captureScreenshotBuffer(storyId, theme).then(({ buffer }) => {
-        const storyDir = path7.join(
+        const storyDir = path8.join(
           process.cwd(),
           ".storybook-cache",
           "screenshots",
@@ -1332,6 +1461,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
           `[STORYBOOK_PLUGIN] Failed to generate screenshot: ${storyId}/${theme}`,
           error
         );
+        const code = errorCode(error);
         res.statusCode = 500;
         res.setHeader("Content-Type", "application/json");
         res.setHeader("Access-Control-Allow-Origin", "*");
@@ -1339,6 +1469,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         res.end(
           JSON.stringify({
             error: "Failed to generate screenshot",
+            ...code ? { code } : {},
             details: String(error)
           })
         );
@@ -1430,7 +1561,7 @@ function storybookOnlookPlugin(options = {}) {
     configureServer(server) {
       console.log("[STORYBOOK_PLUGIN] Configuring server middleware");
       server.middlewares.use(serveMetadataAndScreenshots);
-      const cachedManifestPath = path7.join(
+      const cachedManifestPath = path8.join(
         process.cwd(),
         ".storybook-cache",
         "manifest.json"
@@ -1449,7 +1580,7 @@ function storybookOnlookPlugin(options = {}) {
       server.watcher.on("change", scheduleRefresh);
       const storyGlobs = options.storyGlobs ?? ["**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)"];
       const resolvedStoryGlobs = storyGlobs.map(
-        (glob) => path7.isAbsolute(glob) ? glob : path7.join(process.cwd(), glob)
+        (glob) => path8.isAbsolute(glob) ? glob : path8.join(process.cwd(), glob)
       );
       if (resolvedStoryGlobs.length > 0) {
         server.watcher.add(resolvedStoryGlobs);
@@ -1457,10 +1588,36 @@ function storybookOnlookPlugin(options = {}) {
           storyGlobs: resolvedStoryGlobs
         });
       }
+      const probeCandidatePorts = [
+        ...new Set(
+          [portFromArgv(process.argv), port, server.config.server.port].filter(
+            (p) => typeof p === "number"
+          )
+        )
+      ];
+      console.log("[STORYBOOK_PLUGIN] Story add/unlink index broadcast enabled", {
+        probeCandidatePorts
+      });
+      const indexBroadcaster = createStoryIndexBroadcaster({
+        ports: probeCandidatePorts,
+        notify: notifyOnbookIndexChanged
+      });
+      let indexBroadcastWatcherReady = false;
+      server.watcher.once("ready", () => {
+        indexBroadcastWatcherReady = true;
+      });
+      server.watcher.on("add", (file) => {
+        if (!indexBroadcastWatcherReady) return;
+        indexBroadcaster.onStoryFileAdded(file);
+      });
+      server.watcher.on("unlink", (file) => {
+        if (!indexBroadcastWatcherReady) return;
+        indexBroadcaster.onStoryFileRemoved(file);
+      });
       const tailwindEntryPath = (() => {
         if (options.tailwindEntryCss === false) return null;
         if (typeof options.tailwindEntryCss === "string") {
-          return path7.isAbsolute(options.tailwindEntryCss) ? options.tailwindEntryCss : path7.join(process.cwd(), options.tailwindEntryCss);
+          return path8.isAbsolute(options.tailwindEntryCss) ? options.tailwindEntryCss : path8.join(process.cwd(), options.tailwindEntryCss);
         }
         return detectTailwindEntryCss(process.cwd());
       })();
@@ -1476,7 +1633,7 @@ function storybookOnlookPlugin(options = {}) {
         });
         server.watcher.on("add", (file) => {
           if (!/\.tsx?$/.test(file)) return;
-          const dir = path7.dirname(file);
+          const dir = path8.dirname(file);
           const isNewDir = !seenDirs.has(dir);
           seenDirs.add(dir);
           if (!watcherReady || !isNewDir) return;
@@ -1507,7 +1664,7 @@ function storybookOnlookPlugin(options = {}) {
     configurePreviewServer(server) {
       console.log("[STORYBOOK_PLUGIN] Configuring preview server middleware");
       server.middlewares.use(serveMetadataAndScreenshots);
-      refreshManifest(path7.join(process.cwd(), ".storybook-cache", "manifest.json"));
+      refreshManifest(path8.join(process.cwd(), ".storybook-cache", "manifest.json"));
     },
     handleHotUpdate: handleStoryFileChange
   };

package/dist/preset/index.js

@@ -1,7 +1,7 @@
 import { createRequire } from 'node:module';
 import crypto, { createHash } from 'crypto';
 import fs5, { existsSync } from 'fs';
-import path7, { dirname, join, relative } from 'path';
+import path8, { dirname, join, relative } from 'path';
 import { fileURLToPath } from 'url';
 import generateModule from '@babel/generator';
 import { parse } from '@babel/parser';
@@ -45,7 +45,7 @@ function componentLocPlugin(options = {}) {
         sourceFilename: filepath
       });
       let mutated = false;
-      const relativePath = path7.relative(root, filepath);
+      const relativePath = path8.relative(root, filepath);
       traverse(ast, {
         JSXElement(nodePath) {
           const opening = nodePath.node.openingElement;
@@ -117,7 +117,7 @@ function envContainmentPlugin(options) {
   const resolveOutcomes = /* @__PURE__ */ new Map();
   const roots = /* @__PURE__ */ new Set([normalizeSlashes(process.cwd())]);
   const matchTarget = (absPath) => {
-    const norm = normalizeSlashes(path7.normalize(absPath));
+    const norm = normalizeSlashes(path8.normalize(absPath));
     for (const rel of byModule.keys()) {
       for (const root of roots) {
         const target = `${root}/${rel}`;
@@ -152,10 +152,10 @@ function envContainmentPlugin(options) {
       if (source.startsWith("\0")) return null;
       const cleaned = stripQuery(source);
       let direct = null;
-      if (path7.isAbsolute(cleaned)) {
+      if (path8.isAbsolute(cleaned)) {
         direct = cleaned;
       } else if (importer && (cleaned.startsWith("./") || cleaned.startsWith("../"))) {
-        direct = path7.resolve(path7.dirname(stripQuery(importer)), cleaned);
+        direct = path8.resolve(path8.dirname(stripQuery(importer)), cleaned);
       }
       if (direct) {
         const rel = matchTarget(direct);
@@ -164,7 +164,7 @@ function envContainmentPlugin(options) {
       }
       if (!specifierMightMatch(cleaned)) return null;
       if (typeof this.resolve !== "function") return null;
-      const importerDir = importer ? path7.dirname(stripQuery(importer)) : "";
+      const importerDir = importer ? path8.dirname(stripQuery(importer)) : "";
       const outcomeKey = `${importerDir}|${source}`;
       const memoized = resolveOutcomes.get(outcomeKey);
       if (memoized !== void 0) return memoized;
@@ -267,9 +267,9 @@ function fastRefreshTolerantExportsPlugin() {
     }
   };
 }
-var CACHE_DIR = path7.join(process.cwd(), ".storybook-cache");
-var SCREENSHOTS_DIR = path7.join(CACHE_DIR, "screenshots");
-var MANIFEST_PATH = path7.join(CACHE_DIR, "manifest.json");
+var CACHE_DIR = path8.join(process.cwd(), ".storybook-cache");
+var SCREENSHOTS_DIR = path8.join(CACHE_DIR, "screenshots");
+var MANIFEST_PATH = path8.join(CACHE_DIR, "manifest.json");
 var VIEWPORT_WIDTH = 1920;
 var VIEWPORT_HEIGHT = 1080;
 var MIN_COMPONENT_WIDTH = 420;
@@ -320,6 +320,9 @@ var execFileAsync = promisify(execFile);
 var require2 = createRequire$1(import.meta.url);
 var browserPromise = null;
 var installPromise = null;
+var ChromiumUnavailableError = class extends Error {
+  code = "CHROMIUM_UNAVAILABLE";
+};
 var isMissingExecutableError = (err) => {
   const msg = err instanceof Error ? err.message : String(err);
   return msg.includes("Executable doesn't exist") || msg.includes("Please run the following command to download new browsers") || // Older playwright revisions phrase the version-mismatch case differently.
@@ -352,7 +355,9 @@ async function installChromium() {
       } catch (err) {
         const detail = err instanceof Error ? err.message : String(err);
         console.error(`[STORYBOOK_PLUGIN] chromium install FAILED: ${detail}`);
-        throw new Error(`Playwright chromium install failed: ${detail}`);
+        throw new ChromiumUnavailableError(
+          `Playwright chromium install failed: ${detail}`
+        );
       } finally {
         installPromise = null;
       }
@@ -374,7 +379,7 @@ async function launchWithSelfHeal() {
       console.error(
         `[STORYBOOK_PLUGIN] launch still failing after install \u2014 likely path or libs issue: ${detail}`
       );
-      throw new Error(
+      throw new ChromiumUnavailableError(
         `Playwright chromium is unavailable in this sandbox (install ran but launch still failed): ${detail}`
       );
     }
@@ -455,8 +460,8 @@ async function detectRenderState(page, opts = {}) {
   }
 }
 function getScreenshotPath(storyId, theme) {
-  const storyDir = path7.join(SCREENSHOTS_DIR, storyId);
-  return path7.join(storyDir, `${theme}.png`);
+  const storyDir = path8.join(SCREENSHOTS_DIR, storyId);
+  return path8.join(storyDir, `${theme}.png`);
 }
 async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT, storybookUrl = "http://localhost:6006", loadTimeoutMs = 9e4, renderTimeoutMs = 2e4) {
   const browser = await getBrowser();
@@ -544,7 +549,7 @@ async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, h
 async function generateScreenshot(storyId, theme, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   try {
     ensureCacheDirectories();
-    const storyDir = path7.join(SCREENSHOTS_DIR, storyId);
+    const storyDir = path8.join(SCREENSHOTS_DIR, storyId);
     if (!fs5.existsSync(storyDir)) {
       fs5.mkdirSync(storyDir, { recursive: true });
     }
@@ -665,7 +670,7 @@ async function fetchStorybookIndex() {
 }
 function getStoriesForFile(filePath) {
   if (!cachedIndex) return [];
-  const fileName = path7.basename(filePath);
+  const fileName = path8.basename(filePath);
   return Object.values(cachedIndex.entries).filter((entry) => entry.type === "story" && entry.importPath.endsWith(fileName)).map((entry) => entry.id);
 }
 async function regenerateScreenshotsForFiles(files) {
@@ -976,8 +981,8 @@ function softStoryRerenderPlugin() {
     preview.onStoriesChanged({ importFn: newModule.importFn });
   }
 });`;
-      const out = code.replace(pattern, (_match, quote, path8) => {
-        return replacement.replace("$QUOTE$$PATH$$QUOTE$", `${quote}${path8}${quote}`);
+      const out = code.replace(pattern, (_match, quote, path9) => {
+        return replacement.replace("$QUOTE$$PATH$$QUOTE$", `${quote}${path9}${quote}`);
       });
       return out === code ? null : { code: out, map: null };
     }
@@ -988,14 +993,14 @@ function resolveTsconfigAliases(root) {
   try {
     const config = readTsconfigAliasConfig(root);
     if (!config) return [];
-    const base = path7.resolve(root, config.baseUrl ?? ".");
+    const base = path8.resolve(root, config.baseUrl ?? ".");
     const aliases = [];
     for (const [key, targets] of Object.entries(config.paths)) {
       const target = targets[0];
       if (!target) continue;
       if (key.endsWith("/*") && target.endsWith("/*")) {
         const findPrefix = key.slice(0, -1);
-        const targetDir = path7.resolve(base, target.slice(0, -2));
+        const targetDir = path8.resolve(base, target.slice(0, -2));
         aliases.push({
           find: new RegExp(`^${escapeRegExp(findPrefix)}`),
           replacement: `${targetDir}/`
@@ -1003,7 +1008,7 @@ function resolveTsconfigAliases(root) {
       } else if (!key.includes("*") && !target.includes("*")) {
         aliases.push({
           find: new RegExp(`^${escapeRegExp(key)}$`),
-          replacement: path7.resolve(base, target)
+          replacement: path8.resolve(base, target)
         });
       }
     }
@@ -1014,7 +1019,7 @@ function resolveTsconfigAliases(root) {
 }
 function readTsconfigAliasConfig(root) {
   for (const candidate of TSCONFIG_CANDIDATES) {
-    const abs = path7.join(root, candidate);
+    const abs = path8.join(root, candidate);
     let text;
     try {
       text = fs5.readFileSync(abs, "utf-8");
@@ -1095,8 +1100,128 @@ function findGitRoot(startPath) {
   }
   return null;
 }
+var STORY_FILE_PATTERN = /\.stories\.(js|jsx|mjs|ts|tsx|mdx)$/;
+function isStoryFile(file) {
+  return STORY_FILE_PATTERN.test(file);
+}
+function missingFromIndex(index, files) {
+  const importPaths = [];
+  for (const entry of Object.values(index.entries ?? {})) {
+    if (typeof entry.importPath === "string") importPaths.push(entry.importPath);
+  }
+  return files.filter((file) => {
+    const base = path8.basename(file);
+    return !importPaths.some((importPath) => importPath.endsWith(base));
+  });
+}
+function portFromArgv(argv) {
+  for (let i = 0; i < argv.length; i += 1) {
+    const arg = argv[i];
+    if (arg === void 0) continue;
+    let raw;
+    if (arg === "-p" || arg === "--port") {
+      raw = argv[i + 1];
+    } else {
+      raw = /^(?:-p|--port)=(\d+)$/.exec(arg)?.[1];
+    }
+    if (raw === void 0) continue;
+    const parsed = Number.parseInt(raw, 10);
+    if (Number.isInteger(parsed) && parsed > 0 && parsed < 65536) return parsed;
+  }
+  return null;
+}
+async function defaultFetchIndex(port) {
+  try {
+    const res = await fetch(`http://localhost:${port}/index.json?_t=${Date.now()}`, {
+      cache: "no-store",
+      signal: AbortSignal.timeout(2e3)
+    });
+    if (!res.ok) return null;
+    return await res.json();
+  } catch {
+    return null;
+  }
+}
+var sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+function createStoryIndexBroadcaster({
+  ports,
+  notify,
+  fetchIndex = defaultFetchIndex,
+  debounceMs = 500,
+  probeIntervalMs = 500,
+  probeCeilingMs = 15e3
+}) {
+  const candidatePorts = [...new Set(ports)];
+  const pendingAdds = /* @__PURE__ */ new Set();
+  let addDebounce = null;
+  let unlinkDebounce = null;
+  let probing = false;
+  const scheduleProbe = () => {
+    if (addDebounce) clearTimeout(addDebounce);
+    addDebounce = setTimeout(() => {
+      addDebounce = null;
+      void probeThenNotify();
+    }, debounceMs);
+  };
+  const probeThenNotify = async () => {
+    if (probing) return;
+    probing = true;
+    const files = Array.from(pendingAdds);
+    const deadline = Date.now() + probeCeilingMs;
+    try {
+      if (files.length === 0) return;
+      while (Date.now() < deadline) {
+        for (const candidate of candidatePorts) {
+          const index = await fetchIndex(candidate);
+          if (index && missingFromIndex(index, files).length === 0) {
+            console.log(
+              "[STORYBOOK_PLUGIN] Index caught up with new story files \u2014 broadcasting",
+              { files, port: candidate }
+            );
+            for (const file of files) pendingAdds.delete(file);
+            notify();
+            return;
+          }
+        }
+        await sleep(probeIntervalMs);
+      }
+      console.warn("[STORYBOOK_PLUGIN] Index probe hit ceiling \u2014 broadcasting anyway", {
+        files,
+        probeCeilingMs
+      });
+      for (const file of files) pendingAdds.delete(file);
+      notify();
+    } finally {
+      probing = false;
+      if (pendingAdds.size > 0) scheduleProbe();
+    }
+  };
+  return {
+    onStoryFileAdded(file) {
+      if (!isStoryFile(file)) return;
+      pendingAdds.add(file);
+      scheduleProbe();
+    },
+    onStoryFileRemoved(file) {
+      if (!isStoryFile(file)) return;
+      pendingAdds.delete(file);
+      if (unlinkDebounce) clearTimeout(unlinkDebounce);
+      unlinkDebounce = setTimeout(() => {
+        unlinkDebounce = null;
+        console.log("[STORYBOOK_PLUGIN] Story file removed \u2014 broadcasting", { file });
+        notify();
+      }, debounceMs);
+    }
+  };
+}
 
 // src/storybook-onlook-plugin.ts
+function errorCode(error) {
+  if (error && typeof error === "object" && "code" in error && typeof error.code === "string") {
+    return error.code;
+  }
+  return void 0;
+}
 var __dirname$1 = dirname(fileURLToPath(import.meta.url));
 var storybookDir = join(__dirname$1, "..");
 var gitRoot = findGitRoot(storybookDir);
@@ -1155,7 +1280,7 @@ var TAILWIND_ENTRY_CANDIDATES = [
 var TAILWIND_DIRECTIVE_PATTERN = /@import\s+['"](?:tailwindcss|tailwindcss\/.+)['"]|@tailwind\s+(?:base|components|utilities)/;
 function detectTailwindEntryCss(cwd) {
   for (const rel of TAILWIND_ENTRY_CANDIDATES) {
-    const abs = path7.join(cwd, rel);
+    const abs = path8.join(cwd, rel);
     try {
       if (!fs5.existsSync(abs)) continue;
       const head = fs5.readFileSync(abs, "utf-8").slice(0, 2048);
@@ -1242,11 +1367,13 @@ var serveMetadataAndScreenshots = (req, res, next) => {
       res.end(buffer);
     }).catch((error) => {
       console.error("Screenshot capture error:", error);
+      const code = errorCode(error);
       res.statusCode = 500;
       res.setHeader("Content-Type", "application/json");
       res.end(
         JSON.stringify({
           error: "Failed to capture screenshot",
+          ...code ? { code } : {},
           details: String(error)
         })
       );
@@ -1276,11 +1403,13 @@ var serveMetadataAndScreenshots = (req, res, next) => {
       res.end(JSON.stringify(result));
     }).catch((error) => {
       console.error("Console log capture error:", error);
+      const code = errorCode(error);
       res.statusCode = 500;
       res.setHeader("Content-Type", "application/json");
       res.end(
         JSON.stringify({
           error: "Failed to capture console logs",
+          ...code ? { code } : {},
           details: String(error)
         })
       );
@@ -1288,7 +1417,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
     return;
   }
   if (req.url?.startsWith("/screenshots/")) {
-    const screenshotPath = path7.join(
+    const screenshotPath = path8.join(
       process.cwd(),
       ".storybook-cache",
       req.url.replace("/screenshots/", "screenshots/")
@@ -1309,7 +1438,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         `[STORYBOOK_PLUGIN] Generating screenshot on-demand: ${storyId}/${theme}`
       );
       captureScreenshotBuffer(storyId, theme).then(({ buffer }) => {
-        const storyDir = path7.join(
+        const storyDir = path8.join(
           process.cwd(),
           ".storybook-cache",
           "screenshots",
@@ -1328,6 +1457,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
           `[STORYBOOK_PLUGIN] Failed to generate screenshot: ${storyId}/${theme}`,
           error
         );
+        const code = errorCode(error);
         res.statusCode = 500;
         res.setHeader("Content-Type", "application/json");
         res.setHeader("Access-Control-Allow-Origin", "*");
@@ -1335,6 +1465,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         res.end(
           JSON.stringify({
             error: "Failed to generate screenshot",
+            ...code ? { code } : {},
             details: String(error)
           })
         );
@@ -1426,7 +1557,7 @@ function storybookOnlookPlugin(options = {}) {
     configureServer(server) {
       console.log("[STORYBOOK_PLUGIN] Configuring server middleware");
       server.middlewares.use(serveMetadataAndScreenshots);
-      const cachedManifestPath = path7.join(
+      const cachedManifestPath = path8.join(
         process.cwd(),
         ".storybook-cache",
         "manifest.json"
@@ -1445,7 +1576,7 @@ function storybookOnlookPlugin(options = {}) {
       server.watcher.on("change", scheduleRefresh);
       const storyGlobs = options.storyGlobs ?? ["**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)"];
       const resolvedStoryGlobs = storyGlobs.map(
-        (glob) => path7.isAbsolute(glob) ? glob : path7.join(process.cwd(), glob)
+        (glob) => path8.isAbsolute(glob) ? glob : path8.join(process.cwd(), glob)
       );
       if (resolvedStoryGlobs.length > 0) {
         server.watcher.add(resolvedStoryGlobs);
@@ -1453,10 +1584,36 @@ function storybookOnlookPlugin(options = {}) {
           storyGlobs: resolvedStoryGlobs
         });
       }
+      const probeCandidatePorts = [
+        ...new Set(
+          [portFromArgv(process.argv), port, server.config.server.port].filter(
+            (p) => typeof p === "number"
+          )
+        )
+      ];
+      console.log("[STORYBOOK_PLUGIN] Story add/unlink index broadcast enabled", {
+        probeCandidatePorts
+      });
+      const indexBroadcaster = createStoryIndexBroadcaster({
+        ports: probeCandidatePorts,
+        notify: notifyOnbookIndexChanged
+      });
+      let indexBroadcastWatcherReady = false;
+      server.watcher.once("ready", () => {
+        indexBroadcastWatcherReady = true;
+      });
+      server.watcher.on("add", (file) => {
+        if (!indexBroadcastWatcherReady) return;
+        indexBroadcaster.onStoryFileAdded(file);
+      });
+      server.watcher.on("unlink", (file) => {
+        if (!indexBroadcastWatcherReady) return;
+        indexBroadcaster.onStoryFileRemoved(file);
+      });
       const tailwindEntryPath = (() => {
         if (options.tailwindEntryCss === false) return null;
         if (typeof options.tailwindEntryCss === "string") {
-          return path7.isAbsolute(options.tailwindEntryCss) ? options.tailwindEntryCss : path7.join(process.cwd(), options.tailwindEntryCss);
+          return path8.isAbsolute(options.tailwindEntryCss) ? options.tailwindEntryCss : path8.join(process.cwd(), options.tailwindEntryCss);
         }
         return detectTailwindEntryCss(process.cwd());
       })();
@@ -1472,7 +1629,7 @@ function storybookOnlookPlugin(options = {}) {
         });
         server.watcher.on("add", (file) => {
           if (!/\.tsx?$/.test(file)) return;
-          const dir = path7.dirname(file);
+          const dir = path8.dirname(file);
           const isNewDir = !seenDirs.has(dir);
           seenDirs.add(dir);
           if (!watcherReady || !isNewDir) return;
@@ -1503,7 +1660,7 @@ function storybookOnlookPlugin(options = {}) {
     configurePreviewServer(server) {
       console.log("[STORYBOOK_PLUGIN] Configuring preview server middleware");
       server.middlewares.use(serveMetadataAndScreenshots);
-      refreshManifest(path7.join(process.cwd(), ".storybook-cache", "manifest.json"));
+      refreshManifest(path8.join(process.cwd(), ".storybook-cache", "manifest.json"));
     },
     handleHotUpdate: handleStoryFileChange
   };

package/dist/screenshot-service/index.js

@@ -61,6 +61,9 @@ var execFileAsync = promisify(execFile);
 var require2 = createRequire$1(import.meta.url);
 var browserPromise = null;
 var installPromise = null;
+var ChromiumUnavailableError = class extends Error {
+  code = "CHROMIUM_UNAVAILABLE";
+};
 var isMissingExecutableError = (err) => {
   const msg = err instanceof Error ? err.message : String(err);
   return msg.includes("Executable doesn't exist") || msg.includes("Please run the following command to download new browsers") || // Older playwright revisions phrase the version-mismatch case differently.
@@ -93,7 +96,9 @@ async function installChromium() {
       } catch (err) {
         const detail = err instanceof Error ? err.message : String(err);
         console.error(`[STORYBOOK_PLUGIN] chromium install FAILED: ${detail}`);
-        throw new Error(`Playwright chromium install failed: ${detail}`);
+        throw new ChromiumUnavailableError(
+          `Playwright chromium install failed: ${detail}`
+        );
       } finally {
         installPromise = null;
       }
@@ -115,7 +120,7 @@ async function launchWithSelfHeal() {
       console.error(
         `[STORYBOOK_PLUGIN] launch still failing after install \u2014 likely path or libs issue: ${detail}`
       );
-      throw new Error(
+      throw new ChromiumUnavailableError(
         `Playwright chromium is unavailable in this sandbox (install ran but launch still failed): ${detail}`
       );
     }

package/dist/screenshot-service/utils/browser/index.d.ts

@@ -1,6 +1,17 @@
 import { Browser } from 'playwright';
 
+/**
+ * Terminal "this sandbox cannot launch chromium" failure (ONL-1429/ONL-1602).
+ * The `code` property rides the plugin's HTTP 5xx JSON error bodies
+ * (storybook-onlook-plugin.ts) so consumers — the agent runner's canvas
+ * tools — can classify the failure as tool_unavailable via a contract WE own,
+ * instead of regex-parsing Playwright's error prose (which reworded across
+ * versions and broke the detection twice: ONL-1085 → ONL-1364).
+ */
+declare class ChromiumUnavailableError extends Error {
+    readonly code = "CHROMIUM_UNAVAILABLE";
+}
 declare function getBrowser(): Promise<Browser>;
 declare function closeBrowser(): Promise<void>;
 
-export { closeBrowser, getBrowser };
+export { ChromiumUnavailableError, closeBrowser, getBrowser };

package/dist/screenshot-service/utils/browser/index.js

@@ -10,6 +10,9 @@ var execFileAsync = promisify(execFile);
 var require2 = createRequire$1(import.meta.url);
 var browserPromise = null;
 var installPromise = null;
+var ChromiumUnavailableError = class extends Error {
+  code = "CHROMIUM_UNAVAILABLE";
+};
 var isMissingExecutableError = (err) => {
   const msg = err instanceof Error ? err.message : String(err);
   return msg.includes("Executable doesn't exist") || msg.includes("Please run the following command to download new browsers") || // Older playwright revisions phrase the version-mismatch case differently.
@@ -42,7 +45,9 @@ async function installChromium() {
       } catch (err) {
         const detail = err instanceof Error ? err.message : String(err);
         console.error(`[STORYBOOK_PLUGIN] chromium install FAILED: ${detail}`);
-        throw new Error(`Playwright chromium install failed: ${detail}`);
+        throw new ChromiumUnavailableError(
+          `Playwright chromium install failed: ${detail}`
+        );
       } finally {
         installPromise = null;
       }
@@ -64,7 +69,7 @@ async function launchWithSelfHeal() {
       console.error(
         `[STORYBOOK_PLUGIN] launch still failing after install \u2014 likely path or libs issue: ${detail}`
       );
-      throw new Error(
+      throw new ChromiumUnavailableError(
         `Playwright chromium is unavailable in this sandbox (install ran but launch still failed): ${detail}`
       );
     }
@@ -91,4 +96,4 @@ async function closeBrowser() {
   }
 }
 
-export { closeBrowser, getBrowser };
+export { ChromiumUnavailableError, closeBrowser, getBrowser };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onlook/storybook-plugin",
-  "version": "0.4.0-beta.14",
+  "version": "0.4.0-beta.16",
   "type": "module",
   "bin": {
     "onlook-storybook": "./dist/cli/index.js"
@@ -47,12 +47,12 @@
     "@babel/traverse": "^7.26.9",
     "@babel/types": "^7.29.0",
     "@drizzle-team/brocli": "^0.11.0",
-    "playwright": "^1.52.0",
-    "playwright-core": "^1.52.0",
+    "playwright": "1.57.0",
+    "playwright-core": "1.57.0",
     "storybook": "^10.1.11"
   },
   "devDependencies": {
-    "@onbook/tsconfig": "0.1.0",
+    "@onbook/tsconfig": "workspace:*",
     "@types/babel__generator": "^7.6.8",
     "@types/babel__traverse": "^7.20.6",
     "@types/node": "^22.15.32",