@stackable-labs/cli-app-extension 1.7.2 → 1.8.0

package/README.md

@@ -1,6 +1,6 @@
 # @stackable-labs/cli-app-extension
 
-CLI for scaffolding new [Stackable](https://www.npmjs.com/package/@stackable-labs/sdk-extension-react) extension projects.
+CLI for scaffolding new [Stackable](https://www.npmjs.com/package/@stackable-labs/sdk-extension-react) App Extension projects.
 
 ## Quick Start
 
@@ -79,10 +79,10 @@ my-extension/
 ```bash
 cd my-extension
 pnpm install     # if --skip-install was used
-pnpm dev         # starts both extension + preview with hot-reload
+pnpm dev         # starts both Extension + Preview with hot-reload
 ```
 
-The preview host runs at the configured preview port and hot-reloads whenever the extension changes.
+The preview host runs at the configured preview port and hot-reloads whenever the Extension changes.
 
 ## Requirements
 

package/dist/index.js

@@ -6,7 +6,7 @@ import { program } from "commander";
 import { render } from "ink";
 
 // src/App.tsx
-import { join as join2 } from "path";
+import { join as join3 } from "path";
 import { Box as Box13, Text as Text13, useApp } from "ink";
 import { useCallback, useState as useState8 } from "react";
 
@@ -776,7 +776,7 @@ var createExtensionRemote = async (appId, payload) => {
   });
   if (!res.ok) {
     const body = await res.text();
-    throw new Error(`Failed to create extension: ${res.status} ${body}`);
+    throw new Error(`Failed to create Extension: ${res.status} ${body}`);
   }
   return res.json();
 };
@@ -784,7 +784,7 @@ var fetchExtensions = async (appId) => {
   const baseUrl = getAdminApiBaseUrl();
   const res = await fetch(`${baseUrl}/app-extension/${appId}/extensions`);
   if (!res.ok) {
-    throw new Error(`Failed to fetch extensions: ${res.status} ${res.statusText}`);
+    throw new Error(`Failed to fetch Extensions: ${res.status} ${res.statusText}`);
   }
   const adminExtensions = await res.json();
   return Object.fromEntries(
@@ -1020,9 +1020,96 @@ var postScaffold = async (options) => {
 };
 
 // src/lib/scaffold.ts
-import { readFile, readdir, rm, writeFile } from "fs/promises";
-import { join } from "path";
+import { readFile as readFile2, readdir, rm, writeFile as writeFile2 } from "fs/promises";
+import { join as join2 } from "path";
 import { downloadTemplate } from "giget";
+
+// src/lib/devContext.ts
+import { readFile, writeFile } from "fs/promises";
+import { join } from "path";
+var parseEnvFile = (content) => {
+  const lines = content.split("\n");
+  const env = {};
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (trimmed && !trimmed.startsWith("#")) {
+      const [key, ...rest] = trimmed.split("=");
+      if (key && rest.length > 0) {
+        env[key.trim()] = rest.join("=").trim();
+      }
+    }
+  }
+  return env;
+};
+var readEnvFile = async (filePath) => {
+  try {
+    const content = await readFile(filePath, "utf8");
+    return parseEnvFile(content);
+  } catch {
+    return {};
+  }
+};
+var writeEnvFile = async (filePath, env) => {
+  const lines = Object.entries(env).map(([key, value]) => `${key}=${value}`).join("\n");
+  await writeFile(filePath, `${lines}
+`);
+};
+var readDevContext = async (projectRoot) => {
+  const stackableEnv = await readEnvFile(join(projectRoot, ".env.stackable"));
+  const env = await readEnvFile(join(projectRoot, ".env"));
+  let extensionName = stackableEnv.EXTENSION_NAME || "Unknown Extension";
+  try {
+    const manifestPath = join(projectRoot, "packages/extension/public/manifest.json");
+    const manifestContent = await readFile(manifestPath, "utf8");
+    const manifest = JSON.parse(manifestContent);
+    extensionName = manifest.name;
+  } catch {
+  }
+  const devLocalEnv = await readEnvFile(join(projectRoot, ".env.development.local"));
+  const extensionPort = parseInt(devLocalEnv.VITE_EXTENSION_PORT || env.VITE_EXTENSION_PORT || "5173", 10);
+  const previewPort = parseInt(devLocalEnv.VITE_PREVIEW_PORT || env.VITE_PREVIEW_PORT || "5174", 10);
+  return {
+    projectRoot,
+    extensionName,
+    appId: stackableEnv.APP_ID || null,
+    extensionId: stackableEnv.EXTENSION_ID || null,
+    appName: stackableEnv.APP_NAME || null,
+    originalBundleUrl: stackableEnv.ORIGINAL_BUNDLE_URL || null,
+    extensionPort,
+    previewPort
+  };
+};
+var DEV_LOCAL_ENV = ".env.development.local";
+var patchProjectEnv = async (projectRoot, key, value) => {
+  const envPath = join(projectRoot, DEV_LOCAL_ENV);
+  const existing = await readEnvFile(envPath);
+  existing[key] = value;
+  await writeEnvFile(envPath, existing);
+};
+var removeProjectEnvKey = async (projectRoot, key) => {
+  const envPath = join(projectRoot, DEV_LOCAL_ENV);
+  const existing = await readEnvFile(envPath);
+  delete existing[key];
+  await writeEnvFile(envPath, existing);
+};
+var writeDevContext = async (projectRoot, ctx) => {
+  const env = {
+    APP_ID: ctx.appId || "",
+    EXTENSION_ID: ctx.extensionId || ""
+  };
+  if (ctx.appName) {
+    env.APP_NAME = ctx.appName;
+  }
+  if (ctx.extensionName && ctx.extensionName !== "Unknown Extension") {
+    env.EXTENSION_NAME = ctx.extensionName;
+  }
+  if (ctx.originalBundleUrl) {
+    env.ORIGINAL_BUNDLE_URL = ctx.originalBundleUrl;
+  }
+  await writeEnvFile(join(projectRoot, ".env.stackable"), env);
+};
+
+// src/lib/scaffold.ts
 var toKebabCase = (value) => value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 var isTextFile = (filePath) => /\.(ts|tsx|js|jsx|json|md|html|yml|yaml|env|gitignore|nvmrc)$/i.test(filePath);
 var normalizeTargets = (targets) => Array.from(new Set(targets));
@@ -1042,7 +1129,7 @@ var derivePermissions = (targets) => {
 };
 var upsertOrRemove = async (filePath, shouldExist, content) => {
   if (shouldExist) {
-    await writeFile(filePath, content);
+    await writeFile2(filePath, content);
     return;
   }
   await rm(filePath, { force: true });
@@ -1054,7 +1141,7 @@ var walkFiles = async (rootDir) => {
     if (entry.name === ".git" || entry.name === "node_modules" || entry.name === "dist") {
       continue;
     }
-    const fullPath = join(rootDir, entry.name);
+    const fullPath = join2(rootDir, entry.name);
     if (entry.isDirectory()) {
       files.push(...await walkFiles(fullPath));
       continue;
@@ -1069,7 +1156,7 @@ var replacePlaceholders = async (rootDir, replacements) => {
     if (!isTextFile(filePath)) {
       continue;
     }
-    let content = await readFile(filePath, "utf8");
+    let content = await readFile2(filePath, "utf8");
     let changed = false;
     for (const [needle, value] of Object.entries(replacements)) {
       if (content.includes(needle)) {
@@ -1078,18 +1165,18 @@ var replacePlaceholders = async (rootDir, replacements) => {
       }
     }
     if (changed) {
-      await writeFile(filePath, content);
+      await writeFile2(filePath, content);
     }
   }
 };
 var generateManifest = async (rootDir, extensionName, targets, permissions) => {
-  const manifestPath = join(rootDir, "packages/extension/public/manifest.json");
-  const raw = await readFile(manifestPath, "utf8");
+  const manifestPath = join2(rootDir, "packages/extension/public/manifest.json");
+  const raw = await readFile2(manifestPath, "utf8");
   const manifest = JSON.parse(raw);
   manifest.name = extensionName;
   manifest.targets = targets;
   manifest.permissions = permissions;
-  await writeFile(manifestPath, `${JSON.stringify(manifest, null, 2)}
+  await writeFile2(manifestPath, `${JSON.stringify(manifest, null, 2)}
 `);
 };
 var buildFooterSurface = (targets) => {
@@ -1116,12 +1203,12 @@ ${blocks.join("\n")}
 `;
 };
 var generateSurfaceFiles = async (rootDir, targets) => {
-  const surfaceDir = join(rootDir, "packages/extension/src/surfaces");
+  const surfaceDir = join2(rootDir, "packages/extension/src/surfaces");
   const wantsHeader = targets.includes("slot.header");
   const wantsContent = targets.includes("slot.content");
   const wantsFooter = targets.includes("slot.footer") || targets.includes("slot.footer-links");
   await upsertOrRemove(
-    join(surfaceDir, "Header.tsx"),
+    join2(surfaceDir, "Header.tsx"),
     wantsHeader,
     `import { ui, Surface } from '@stackable-labs/sdk-extension-react'
 
@@ -1135,7 +1222,7 @@ export function Header() {
 `
   );
   await upsertOrRemove(
-    join(surfaceDir, "Content.tsx"),
+    join2(surfaceDir, "Content.tsx"),
     wantsContent,
     `import { ui, useStore, useContextData, Surface } from '@stackable-labs/sdk-extension-react'
 import { appStore } from '../store'
@@ -1168,14 +1255,14 @@ export function Content() {
 `
   );
   await upsertOrRemove(
-    join(rootDir, "packages/extension/src/store.ts"),
+    join2(rootDir, "packages/extension/src/store.ts"),
     wantsContent,
     "import { createStore } from '@stackable-labs/sdk-extension-react'\n\nexport type ViewState = { type: 'menu' }\n\nexport interface AppState {\n  viewState: ViewState\n}\n\nexport const appStore = createStore<AppState>({\n  viewState: { type: 'menu' },\n})\n"
   );
-  await upsertOrRemove(join(surfaceDir, "Footer.tsx"), wantsFooter, buildFooterSurface(targets));
+  await upsertOrRemove(join2(surfaceDir, "Footer.tsx"), wantsFooter, buildFooterSurface(targets));
 };
 var rewriteExtensionIndex = async (rootDir, extensionId, targets) => {
-  const indexPath = join(rootDir, "packages/extension/src/index.tsx");
+  const indexPath = join2(rootDir, "packages/extension/src/index.tsx");
   const imports = ["import { createExtension } from '@stackable-labs/sdk-extension-react'"];
   const components = [];
   if (targets.includes("slot.header")) {
@@ -1201,10 +1288,10 @@ ${components.join("\n")}
   { extensionId: '${toKebabCase(extensionId)}' },
 )
 `;
-  await writeFile(indexPath, content);
+  await writeFile2(indexPath, content);
 };
 var rewritePreviewApp = async (rootDir, targets, permissions) => {
-  const appPath = join(rootDir, "packages/preview/src/App.tsx");
+  const appPath = join2(rootDir, "packages/preview/src/App.tsx");
   const includeDataQuery = permissions.includes("data:query");
   const includeToast = permissions.includes("actions:toast");
   const includeInvoke = permissions.includes("actions:invoke");
@@ -1280,17 +1367,17 @@ export default function App() {
   )
 }
 `;
-  await writeFile(appPath, appContent);
+  await writeFile2(appPath, appContent);
 };
 var patchViteAllowedHosts = async (rootDir) => {
   const configs = [
-    join(rootDir, "packages/extension/vite.config.ts"),
-    join(rootDir, "packages/preview/vite.config.ts")
+    join2(rootDir, "packages/extension/vite.config.ts"),
+    join2(rootDir, "packages/preview/vite.config.ts")
   ];
   for (const configPath of configs) {
     let content;
     try {
-      content = await readFile(configPath, "utf8");
+      content = await readFile2(configPath, "utf8");
     } catch {
       continue;
     }
@@ -1300,38 +1387,38 @@ var patchViteAllowedHosts = async (rootDir) => {
       "server: {\n    allowedHosts: true,"
     );
     if (patched !== content) {
-      await writeFile(configPath, patched);
+      await writeFile2(configPath, patched);
     }
   }
 };
 var rewriteTurboJson = async (rootDir) => {
-  const turboPath = join(rootDir, "turbo.json");
-  const raw = await readFile(turboPath, "utf8");
+  const turboPath = join2(rootDir, "turbo.json");
+  const raw = await readFile2(turboPath, "utf8");
   const turbo = JSON.parse(raw);
   delete turbo["extends"];
   turbo["globalEnv"] = ["VITE_EXTENSION_PORT", "VITE_PREVIEW_PORT", "VITE_EXTENSION_BUNDLE_URL"];
-  await writeFile(turboPath, `${JSON.stringify(turbo, null, 2)}
+  await writeFile2(turboPath, `${JSON.stringify(turbo, null, 2)}
 `);
 };
-var writeEnvFile = async (dir, extensionPort, previewPort) => {
-  const envPath = join(dir, ".env");
+var writeEnvFile2 = async (dir, extensionPort, previewPort) => {
+  const envPath = join2(dir, ".env");
   const content = `VITE_EXTENSION_PORT=${extensionPort}
 VITE_PREVIEW_PORT=${previewPort}
 `;
-  await writeFile(envPath, content);
+  await writeFile2(envPath, content);
 };
 var updateGitignore = async (dir) => {
-  const gitignorePath = join(dir, ".gitignore");
+  const gitignorePath = join2(dir, ".gitignore");
   let gitignore = "";
   try {
-    gitignore = await readFile(gitignorePath, "utf8");
+    gitignore = await readFile2(gitignorePath, "utf8");
   } catch {
   }
   if (!gitignore.includes(".env.stackable")) {
     const newGitignore = gitignore ? `${gitignore}
 .env.stackable
 ` : ".env.stackable\n";
-    await writeFile(gitignorePath, newGitignore);
+    await writeFile2(gitignorePath, newGitignore);
   }
 };
 var scaffold = async (options) => {
@@ -1353,8 +1440,17 @@ var scaffold = async (options) => {
   await rewritePreviewApp(dir, selectedTargets, derivedPermissions);
   await rewriteTurboJson(dir);
   await patchViteAllowedHosts(dir);
-  await writeEnvFile(dir, options.extensionPort, options.previewPort);
+  await writeEnvFile2(dir, options.extensionPort, options.previewPort);
   await updateGitignore(dir);
+  await writeDevContext(dir, {
+    projectRoot: dir,
+    appId: options.appId,
+    extensionId: toKebabCase(options.extensionId || options.name),
+    appName: options.appName || null,
+    extensionName: options.name,
+    extensionPort: options.extensionPort,
+    previewPort: options.previewPort
+  });
   return options;
 };
 
@@ -1369,7 +1465,7 @@ var STEPS = {
 };
 var PROGRESS_STEPS = {
   ["create" /* CREATE */]: [
-    { label: "Registering extension", status: "pending" },
+    { label: "Registering Extension", status: "pending" },
     { label: "Fetching template", status: "pending" },
     { label: "Generating files", status: "pending" },
     { label: "Installing dependencies", status: "pending" }
@@ -1380,7 +1476,7 @@ var PROGRESS_STEPS = {
     { label: "Installing dependencies", status: "pending" }
   ],
   ["update" /* UPDATE */]: [
-    { label: "Updating extension", status: "pending" }
+    { label: "Updating Extension", status: "pending" }
   ],
   ["dev" /* DEV */]: []
   // Dev command has no progress steps
@@ -1486,7 +1582,7 @@ var App = ({ command, initialName, initialExtensionId, options }) => {
   const handleConfirmTargets = (value) => {
     setTargets(value);
     if (options?.extensionPort || options?.previewPort) {
-      setOutputDir(join2(process.cwd(), toKebabCase2(extensionId || name)));
+      setOutputDir(join3(process.cwd(), toKebabCase2(extensionId || name)));
       setStep("confirm");
     } else {
       setStep("settings");
@@ -1500,7 +1596,7 @@ var App = ({ command, initialName, initialExtensionId, options }) => {
   const handleTargets = (value) => {
     setTargets(value);
     if (options?.extensionPort || options?.previewPort) {
-      setOutputDir(join2(process.cwd(), toKebabCase2(extensionId || name)));
+      setOutputDir(join3(process.cwd(), toKebabCase2(extensionId || name)));
       setStep("confirm");
     } else {
       setStep("settings");
@@ -1575,6 +1671,7 @@ var App = ({ command, initialName, initialExtensionId, options }) => {
       updateStep(scaffoldStepOffset + 0, "running");
       await scaffold({
         appId: selectedApp.id,
+        appName: selectedApp.name,
         name,
         extensionId: resolvedExtensionId,
         targets,
@@ -1653,7 +1750,7 @@ var App = ({ command, initialName, initialExtensionId, options }) => {
       return /* @__PURE__ */ jsx13(
         SettingsPrompt,
         {
-          defaultDir: join2(process.cwd(), toKebabCase2(extensionId || name)),
+          defaultDir: join3(process.cwd(), toKebabCase2(extensionId || name)),
           onSubmit: handleSettings,
           onBack: goBack
         }
@@ -1745,86 +1842,7 @@ var App = ({ command, initialName, initialExtensionId, options }) => {
 
 // src/components/DevApp.tsx
 import { Box as Box16, Text as Text16 } from "ink";
-import { useState as useState10, useEffect as useEffect6, useCallback as useCallback2 } from "react";
-
-// src/lib/devContext.ts
-import { readFile as readFile2, writeFile as writeFile2 } from "fs/promises";
-import { join as join3 } from "path";
-var parseEnvFile = (content) => {
-  const lines = content.split("\n");
-  const env = {};
-  for (const line of lines) {
-    const trimmed = line.trim();
-    if (trimmed && !trimmed.startsWith("#")) {
-      const [key, ...rest] = trimmed.split("=");
-      if (key && rest.length > 0) {
-        env[key.trim()] = rest.join("=").trim();
-      }
-    }
-  }
-  return env;
-};
-var readEnvFile = async (filePath) => {
-  try {
-    const content = await readFile2(filePath, "utf8");
-    return parseEnvFile(content);
-  } catch {
-    return {};
-  }
-};
-var writeEnvFile2 = async (filePath, env) => {
-  const lines = Object.entries(env).map(([key, value]) => `${key}=${value}`).join("\n");
-  await writeFile2(filePath, `${lines}
-`);
-};
-var readDevContext = async (projectRoot) => {
-  const stackableEnv = await readEnvFile(join3(projectRoot, ".env.stackable"));
-  const env = await readEnvFile(join3(projectRoot, ".env"));
-  let extensionName = "Unknown Extension";
-  try {
-    const manifestPath = join3(projectRoot, "packages/extension/public/manifest.json");
-    const manifestContent = await readFile2(manifestPath, "utf8");
-    const manifest = JSON.parse(manifestContent);
-    extensionName = manifest.name;
-  } catch {
-  }
-  const extensionPort = parseInt(env.VITE_EXTENSION_PORT || stackableEnv.EXTENSION_PORT || "5173", 10);
-  const previewPort = parseInt(env.VITE_PREVIEW_PORT || stackableEnv.PREVIEW_PORT || "5174", 10);
-  return {
-    projectRoot,
-    extensionName,
-    appId: stackableEnv.APP_ID || null,
-    extensionId: stackableEnv.EXTENSION_ID || null,
-    appName: stackableEnv.APP_NAME || null,
-    extensionPort,
-    previewPort
-  };
-};
-var DEV_LOCAL_ENV = ".env.development.local";
-var patchProjectEnv = async (projectRoot, key, value) => {
-  const envPath = join3(projectRoot, DEV_LOCAL_ENV);
-  const existing = await readEnvFile(envPath);
-  existing[key] = value;
-  await writeEnvFile2(envPath, existing);
-};
-var removeProjectEnvKey = async (projectRoot, key) => {
-  const envPath = join3(projectRoot, DEV_LOCAL_ENV);
-  const existing = await readEnvFile(envPath);
-  delete existing[key];
-  await writeEnvFile2(envPath, existing);
-};
-var writeDevContext = async (projectRoot, ctx) => {
-  const env = {
-    APP_ID: ctx.appId || "",
-    EXTENSION_ID: ctx.extensionId || "",
-    EXTENSION_PORT: ctx.extensionPort.toString(),
-    PREVIEW_PORT: ctx.previewPort.toString()
-  };
-  if (ctx.appName) {
-    env.APP_NAME = ctx.appName;
-  }
-  await writeEnvFile2(join3(projectRoot, ".env.stackable"), env);
-};
+import { useRef, useState as useState10, useEffect as useEffect6, useCallback as useCallback2 } from "react";
 
 // src/lib/tunnel.ts
 import { Tunnel } from "cloudflared";
@@ -1908,6 +1926,7 @@ var DevDashboard = ({
   appId,
   appName,
   tunnelUrl,
+  previewTunnelUrl,
   previewPort,
   extensionPort,
   bundleUrlUpdated,
@@ -1956,22 +1975,30 @@ var DevDashboard = ({
           ] }),
           /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", gap: 1, children: [
             /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
-              /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Preview:" }),
+              /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Tunnel Dev - Preview:" }),
+              /* @__PURE__ */ jsx15(Text15, { children: previewTunnelUrl || "Connecting\u2026" })
+            ] }),
+            /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
+              /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Local Dev - Preview:" }),
               /* @__PURE__ */ jsxs15(Text15, { children: [
                 "http://localhost:",
                 previewPort
               ] })
             ] }),
             /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
-              /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Local:" }),
+              /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Tunnel Dev - Extension:" }),
+              /* @__PURE__ */ jsx15(Text15, { children: tunnelUrl || "Connecting\u2026" })
+            ] }),
+            /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
+              /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Local Dev - Extension:" }),
               /* @__PURE__ */ jsxs15(Text15, { children: [
                 "http://localhost:",
                 extensionPort
               ] })
             ] }),
             /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
-              /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Tunnel:" }),
-              /* @__PURE__ */ jsx15(Text15, { children: tunnelUrl || "Connecting\u2026" })
+              /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Bundle URL:" }),
+              /* @__PURE__ */ jsx15(Text15, { children: bundleUrlUpdated ? `(${tunnelUrl}) updated \u2713` : "" })
             ] })
           ] })
         ]
@@ -1982,15 +2009,25 @@ var DevDashboard = ({
 
 // src/components/DevApp.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
+var isEphemeralUrl = (url) => {
+  try {
+    const { hostname } = new URL(url);
+    return hostname.endsWith(".ngrok.io") || hostname.endsWith(".ngrok-free.app") || hostname.endsWith(".trycloudflare.com");
+  } catch {
+    return true;
+  }
+};
 var DevApp = ({ options = {} }) => {
   const [state, setState] = useState10("setup");
   const [devContext, setDevContext] = useState10(null);
   const [resolvedContext, setResolvedContext] = useState10(null);
   const [tunnelUrl, setTunnelUrl] = useState10(null);
+  const [previewTunnelUrl, setPreviewTunnelUrl] = useState10(null);
   const [bundleUrlUpdated, setBundleUrlUpdated] = useState10(false);
   const [tunnelHandle, setTunnelHandle] = useState10(null);
+  const [previewTunnelHandle, setPreviewTunnelHandle] = useState10(null);
   const [devServerHandle, setDevServerHandle] = useState10(null);
-  const [originalBundleUrl, setOriginalBundleUrl] = useState10("");
+  const shuttingDown = useRef(false);
   const useTunnel = options.tunnel !== false;
   const useUpdate = options.update !== false;
   const useRestore = options.restore !== false;
@@ -2013,19 +2050,49 @@ var DevApp = ({ options = {} }) => {
       appName: resolved.appName || null
     });
     const extensionPort = options.extensionPort ? parseInt(options.extensionPort, 10) : devContext.extensionPort;
+    const previewPort = options.previewPort ? parseInt(options.previewPort, 10) : devContext.previewPort;
     await patchViteAllowedHosts(devContext.projectRoot);
+    let cachedOriginalUrl = devContext.originalBundleUrl;
+    if (useUpdate) {
+      try {
+        console.log("[dev] Fetching current bundleUrl from API...");
+        const extensions = await fetchExtensions(resolved.appId);
+        const currentExtension = extensions[resolved.extensionId];
+        if (currentExtension?.bundleUrl) {
+          console.log(`[dev] Current bundleUrl: ${currentExtension.bundleUrl}`);
+          if (!isEphemeralUrl(currentExtension.bundleUrl)) {
+            console.log("[dev] Caching stable bundleUrl to .env.stackable");
+            cachedOriginalUrl = currentExtension.bundleUrl;
+            await writeDevContext(devContext.projectRoot, {
+              ...devContext,
+              appId: resolved.appId,
+              extensionId: resolved.extensionId,
+              appName: resolved.appName || null,
+              originalBundleUrl: cachedOriginalUrl
+            });
+          } else {
+            console.log("[dev] Current bundleUrl is ephemeral, keeping previous cached value");
+          }
+        }
+      } catch (err) {
+        console.warn("[dev] Failed to fetch current bundleUrl:", err);
+      }
+    }
     if (useTunnel) {
       try {
-        console.log(`[dev] Starting tunnel on port ${extensionPort}...`);
+        console.log(`[dev] Starting extension tunnel on port ${extensionPort}...`);
         const tunnelResult = await startTunnel(extensionPort);
-        console.log(`[dev] Tunnel ready: ${tunnelResult.url}`);
+        console.log(`[dev] Extension tunnel ready: ${tunnelResult.url}`);
         setTunnelHandle(tunnelResult);
         setTunnelUrl(tunnelResult.url);
+        console.log(`[dev] Starting preview tunnel on port ${previewPort}...`);
+        const previewTunnelResult = await startTunnel(previewPort);
+        console.log(`[dev] Preview tunnel ready: ${previewTunnelResult.url}`);
+        setPreviewTunnelHandle(previewTunnelResult);
+        setPreviewTunnelUrl(previewTunnelResult.url);
         console.log(`[dev] Writing VITE_EXTENSION_BUNDLE_URL=${tunnelResult.url} to .env`);
         await patchProjectEnv(devContext.projectRoot, "VITE_EXTENSION_BUNDLE_URL", tunnelResult.url);
         if (useUpdate) {
-          const originalUrl = `http://localhost:${extensionPort}`;
-          setOriginalBundleUrl(originalUrl);
           console.log(`[dev] Updating bundleUrl to ${tunnelResult.url}`);
           await updateExtension(resolved.appId, resolved.extensionId, {
             bundleUrl: tunnelResult.url
@@ -2044,7 +2111,7 @@ var DevApp = ({ options = {} }) => {
     setDevServerHandle(serverHandle);
     console.log("[dev] Ready");
     setState("running");
-  }, [devContext, options.extensionPort, useTunnel, useUpdate]);
+  }, [devContext, options.extensionPort, options.previewPort, useTunnel, useUpdate]);
   useEffect6(() => {
     if (state === "setup" && devContext && devContext.appId && devContext.extensionId) {
       handleSetupReady({
@@ -2055,23 +2122,30 @@ var DevApp = ({ options = {} }) => {
     }
   }, [state, devContext, handleSetupReady]);
   const handleQuit = async () => {
-    if (!devContext || !resolvedContext) return;
+    if (!devContext || !resolvedContext || shuttingDown.current) return;
+    shuttingDown.current = true;
     setState("stopping");
     console.log("[dev] Shutting down...");
     try {
-      if (useRestore && originalBundleUrl) {
-        console.log(`[dev] Restoring bundleUrl to ${originalBundleUrl}`);
+      if (useRestore && devContext.originalBundleUrl) {
+        console.log(`[dev] Restoring bundleUrl to ${devContext.originalBundleUrl}`);
         await updateExtension(resolvedContext.appId, resolvedContext.extensionId, {
-          bundleUrl: originalBundleUrl
+          bundleUrl: devContext.originalBundleUrl
         });
         console.log("[dev] bundleUrl restored");
+      } else if (useRestore && !devContext.originalBundleUrl) {
+        console.warn("[dev] No cached original bundleUrl to restore");
       }
       console.log("[dev] Removing VITE_EXTENSION_BUNDLE_URL from .env");
       await removeProjectEnvKey(devContext.projectRoot, "VITE_EXTENSION_BUNDLE_URL");
       if (tunnelHandle) {
-        console.log("[dev] Stopping tunnel");
+        console.log("[dev] Stopping Extension tunnel");
         tunnelHandle.stop();
       }
+      if (previewTunnelHandle) {
+        console.log("[dev] Stopping preview tunnel");
+        previewTunnelHandle.stop();
+      }
       if (devServerHandle) {
         console.log("[dev] Stopping dev server");
         devServerHandle.stop();
@@ -2105,6 +2179,7 @@ var DevApp = ({ options = {} }) => {
         extensionPort: options.extensionPort ? parseInt(options.extensionPort, 10) : devContext.extensionPort,
         previewPort: options.previewPort ? parseInt(options.previewPort, 10) : devContext.previewPort,
         tunnelUrl,
+        previewTunnelUrl,
         bundleUrlUpdated,
         onQuit: handleQuit
       }
@@ -2117,17 +2192,17 @@ var DevApp = ({ options = {} }) => {
 import { jsx as jsx17 } from "react/jsx-runtime";
 var require2 = createRequire(import.meta.url);
 var { version } = require2("../package.json");
-program.name("stackable-app-extension").description("Stackable app Extension developer CLI").version(version);
-program.command("create" /* CREATE */).description("Create a new Extension project").argument("[name]", "Extension project name").option("--extension-port <port>", "Extension dev server port (default: 5173)").option("--preview-port <port>", "Preview host dev server port").option("--skip-install", "Skip package manager install").option("--skip-git", "Skip git initialization").action((name, options) => {
+program.name("stackable-app-extension").description("Stackable Labs - App Extension developer CLI").version(version);
+program.command("create" /* CREATE */).description("Create a new Extension project").argument("[name]", "Extension project name").option("--extension-port <port>", "Extension dev server port (default: 5173)").option("--preview-port <port>", "Preview dev server port").option("--skip-install", "Skip package manager install").option("--skip-git", "Skip git initialization").action((name, options) => {
   render(/* @__PURE__ */ jsx17(App, { command: "create" /* CREATE */, initialName: name, options }));
 });
-program.command("scaffold" /* SCAFFOLD */).description("Scaffold a local project from an existing Extension").option("--extension-port <port>", "Extension dev server port (default: 5173)").option("--preview-port <port>", "Preview host dev server port").option("--skip-install", "Skip package manager install").option("--skip-git", "Skip git initialization").action((options) => {
+program.command("scaffold" /* SCAFFOLD */).description("Scaffold a local project from an existing Extension").option("--extension-port <port>", "Extension dev server port (default: 5173)").option("--preview-port <port>", "Preview dev server port").option("--skip-install", "Skip package manager install").option("--skip-git", "Skip git initialization").action((options) => {
   render(/* @__PURE__ */ jsx17(App, { command: "scaffold" /* SCAFFOLD */, options }));
 });
-program.command("update" /* UPDATE */).description("Update an existing Extension").argument("[extensionId]", "Extension ID to update").option("--app-id <id>", "Skip app selection").option("--name <name>", "New extension name").option("--targets <targets>", "Comma-separated target slots (validated against app)").option("--bundle-url <url>", "New bundle URL").option("--enabled <bool>", "Enable/disable extension").option("--set-version <version>", "Explicit version (skips auto-compute)").action((extensionId, options) => {
+program.command("update" /* UPDATE */).description("Update an existing Extension").argument("[extensionId]", "Extension ID to update").option("--app-id <id>", "Skip App selection").option("--name <name>", "New Extension name").option("--targets <targets>", "Comma-separated target slots (validated against app)").option("--bundle-url <url>", "New bundle URL").option("--enabled <bool>", "Enable/disable Extension").option("--set-version <version>", "Explicit version (skips auto-compute)").action((extensionId, options) => {
   render(/* @__PURE__ */ jsx17(App, { command: "update" /* UPDATE */, initialExtensionId: extensionId, options }));
 });
-program.command("dev" /* DEV */).description("Start dev servers with a public tunnel").option("--dir <path>", "Project root (default: cwd)").option("--extension-port <port>", "Override extension port").option("--preview-port <port>", "Override preview port").option("--no-tunnel", "Skip tunnel, just run vite dev").option("--no-update", "Skip bundleUrl update on server").option("--no-restore", "On exit, keep tunnel URL as bundleUrl").action((options) => {
+program.command("dev" /* DEV */).description("Start dev servers with a public tunnel").option("--dir <path>", "Project root (default: cwd)").option("--extension-port <port>", "Override Extension port").option("--preview-port <port>", "Override Preview port").option("--no-tunnel", "Skip tunnel, just run vite dev").option("--no-update", "Skip bundleUrl update on server").option("--no-restore", "On exit, keep tunnel URL as bundleUrl").action((options) => {
   render(/* @__PURE__ */ jsx17(DevApp, { options }));
 });
 program.parse(process.argv.filter((arg) => arg !== "--"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackable-labs/cli-app-extension",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "type": "module",
   "private": false,
   "bin": {