@stackable-labs/cli-app-extension 1.30.0 → 1.31.0

package/dist/index.js

@@ -1053,6 +1053,20 @@ var fetchExtensions = async (token, appId) => {
     ])
   );
 };
+var requestDevSessionToken = async (token, appId, extensionId) => {
+  const baseUrl = getAdminApiBaseUrl();
+  const res = await fetch(`${baseUrl}/app-extension/${appId}/dev-session`, {
+    method: "POST",
+    headers: authHeaders(token),
+    body: JSON.stringify({ extensionId })
+  });
+  if (!res.ok) {
+    const body = await res.text();
+    throw new Error(`Failed to request dev session token: ${res.status} ${body}`);
+  }
+  const data = await res.json();
+  return data.token;
+};
 var updateExtension = async (token, appId, extensionId, payload) => {
   const baseUrl = getAdminApiBaseUrl();
   const res = await fetch(`${baseUrl}/app-extension/${appId}/extensions/${extensionId}`, {
@@ -2269,12 +2283,42 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
 };
 
 // src/components/DevApp.tsx
-import { useRef, useState as useState12, useEffect as useEffect6, useCallback as useCallback2 } from "react";
-import { useInput as useInput11, Box as Box18, Text as Text18 } from "ink";
+import { useRef, useState as useState13, useEffect as useEffect6, useCallback as useCallback3 } from "react";
+import { useInput as useInput12, Box as Box19, Text as Text19 } from "ink";
+
+// src/lib/devServer.ts
+import { spawn } from "child_process";
+var startDevServer = (projectRoot) => {
+  const child = spawn("pnpm", ["dev"], {
+    cwd: projectRoot,
+    stdio: "pipe"
+  });
+  const stop = () => {
+    child.kill("SIGTERM");
+  };
+  return { process: child, stop };
+};
 
 // src/lib/tunnel.ts
 import { Tunnel } from "cloudflared";
-var startTunnel = (port) => new Promise((resolve, reject) => {
+var MAX_RETRIES = 3;
+var RETRY_DELAY_MS = 2e3;
+var isValidTunnelUrl = (url) => {
+  try {
+    const { protocol, hostname } = new URL(url);
+    if (protocol !== "https:" || !hostname.endsWith(".trycloudflare.com")) {
+      return false;
+    }
+    const subdomain = hostname.replace(".trycloudflare.com", "");
+    if (!subdomain || subdomain === "api") {
+      return false;
+    }
+    return true;
+  } catch {
+    return false;
+  }
+};
+var startTunnelOnce = (port) => new Promise((resolve, reject) => {
   const tunnel = Tunnel.quick(`http://localhost:${port}`);
   const timeout = setTimeout(() => {
     tunnel.stop();
@@ -2282,6 +2326,10 @@ var startTunnel = (port) => new Promise((resolve, reject) => {
   }, 3e4);
   tunnel.once("url", (url) => {
     clearTimeout(timeout);
+    if (!isValidTunnelUrl(url)) {
+      tunnel.stop();
+      return reject(new Error(`Tunnel returned invalid URL: ${url}`));
+    }
     resolve({ url, stop: () => tunnel.stop() });
   });
   tunnel.once("error", (err) => {
@@ -2289,18 +2337,22 @@ var startTunnel = (port) => new Promise((resolve, reject) => {
     reject(err);
   });
 });
-
-// src/lib/devServer.ts
-import { spawn } from "child_process";
-var startDevServer = (projectRoot) => {
-  const child = spawn("pnpm", ["dev"], {
-    cwd: projectRoot,
-    stdio: "pipe"
-  });
-  const stop = () => {
-    child.kill("SIGTERM");
-  };
-  return { process: child, stop };
+var delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+var startTunnel = async (port) => {
+  for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+    try {
+      return await startTunnelOnce(port);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      if (attempt < MAX_RETRIES && message.includes("invalid URL")) {
+        console.log(`[dev] Tunnel returned invalid URL, retrying (attempt ${attempt + 1}/${MAX_RETRIES})...`);
+        await delay(RETRY_DELAY_MS);
+      } else {
+        throw err;
+      }
+    }
+  }
+  throw new Error(`Tunnel failed to return a valid URL after ${MAX_RETRIES} attempts`);
 };
 
 // src/components/DevSetup.tsx
@@ -2352,9 +2404,71 @@ var DevSetup = ({ initialContext, token, onReady }) => {
 };
 
 // src/components/DevDashboard.tsx
-import { Box as Box17, Text as Text17, useInput as useInput10 } from "ink";
-import { useEffect as useEffect5 } from "react";
+import { Box as Box18, Text as Text18, useInput as useInput11 } from "ink";
+import { useEffect as useEffect5, useMemo } from "react";
+
+// src/components/CopyableField.tsx
+import { useState as useState12, useCallback as useCallback2 } from "react";
+import { useInput as useInput10, Box as Box17, Text as Text17 } from "ink";
+import clipboard from "clipboardy";
 import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+var CopyableField = ({
+  label,
+  value,
+  shortcutKey,
+  shortcutLabel,
+  maxLength = 60,
+  labelColor,
+  children
+}) => {
+  const [expanded, setExpanded] = useState12(false);
+  const [copied, setCopied] = useState12(false);
+  const handleCopy = useCallback2(async () => {
+    if (expanded) {
+      setExpanded(false);
+      setCopied(false);
+      return;
+    }
+    try {
+      await clipboard.write(value);
+      setExpanded(true);
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+        setExpanded(false);
+      }, 3e3);
+    } catch {
+      setExpanded(true);
+    }
+  }, [expanded, value]);
+  useInput10((input) => {
+    if (input === shortcutKey) {
+      handleCopy();
+    }
+  });
+  const truncated = value.length > maxLength ? `${value.slice(0, maxLength)}...` : value;
+  const keyHint = shortcutLabel || shortcutKey;
+  return /* @__PURE__ */ jsxs17(Box17, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs17(Box17, { gap: 2, children: [
+      /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: label }),
+      copied && /* @__PURE__ */ jsx17(Text17, { color: "green", bold: true, children: "Copied!" }),
+      !copied && /* @__PURE__ */ jsxs17(Text17, { dimColor: true, children: [
+        "press ",
+        /* @__PURE__ */ jsxs17(Text17, { bold: true, color: "yellow", children: [
+          "[",
+          keyHint,
+          "]"
+        ] }),
+        " to copy (and see full value)"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx17(Box17, { paddingLeft: 2, children: expanded ? /* @__PURE__ */ jsx17(Text17, { wrap: "wrap", children: value }) : children || /* @__PURE__ */ jsx17(Text17, { children: labelColor ? /* @__PURE__ */ jsx17(Text17, { color: labelColor, children: truncated }) : truncated }) })
+  ] });
+};
+
+// src/components/DevDashboard.tsx
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+var toBase64Url = (input) => btoa(input).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
 var DevDashboard = ({
   previewTunnelUrl,
   tunnelUrl,
@@ -2367,6 +2481,7 @@ var DevDashboard = ({
   extensionPort,
   previewPort,
   manifestWarnings = [],
+  devSessionToken,
   onQuit
 }) => {
   useEffect5(() => {
@@ -2378,79 +2493,132 @@ var DevDashboard = ({
       process.off("SIGINT", handler);
     };
   }, [onQuit]);
-  useInput10((input, key) => {
+  const devParamBlob = useMemo(() => {
+    if (!tunnelUrl || !devSessionToken) return "";
+    return toBase64Url(JSON.stringify({ url: tunnelUrl, token: devSessionToken }));
+  }, [tunnelUrl, devSessionToken]);
+  useInput11((input, key) => {
     if (input === "q" || key.ctrl && input === "c") {
       onQuit();
     }
   });
-  return /* @__PURE__ */ jsxs17(Box17, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx17(Banner, { userId, orgId }),
-    /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(Box18, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx18(Banner, { userId, orgId }),
+    /* @__PURE__ */ jsxs18(
       StepShell,
       {
         title: "dev",
-        hint: `Live development ${tunnelUrl ? "with" : "w/o"} Tunnel`,
-        footer: /* @__PURE__ */ jsx17(Box17, { flexDirection: "column", gap: 1, children: /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "Press q or Ctrl-C to quit" }) }),
+        hint: `Live development ${tunnelUrl ? "with" : "w/o"} Tunnel \u2014 ${appName ? `${appName} ` : ""}(${appId})`,
+        footer: /* @__PURE__ */ jsxs18(Box18, { flexDirection: "column", gap: 1, children: [
+          devParamBlob && /* @__PURE__ */ jsxs18(Text18, { dimColor: true, children: [
+            "Press ",
+            /* @__PURE__ */ jsx18(Text18, { bold: true, color: "yellow", children: "[d]" }),
+            " to copy Dev Param, ",
+            /* @__PURE__ */ jsx18(Text18, { bold: true, color: "yellow", children: "[s]" }),
+            " to copy Staging Param"
+          ] }),
+          /* @__PURE__ */ jsxs18(Text18, { dimColor: true, children: [
+            "Press ",
+            /* @__PURE__ */ jsx18(Text18, { bold: true, color: "yellow", children: "[q]" }),
+            " or Ctrl-C to quit"
+          ] })
+        ] }),
         children: [
-          /* @__PURE__ */ jsxs17(Box17, { flexDirection: "column", children: [
-            /* @__PURE__ */ jsxs17(Box17, { gap: 2, children: [
-              /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "Extension:" }),
-              /* @__PURE__ */ jsxs17(Text17, { children: [
+          /* @__PURE__ */ jsxs18(Box18, { flexDirection: "column", children: [
+            /* @__PURE__ */ jsxs18(Box18, { gap: 2, children: [
+              /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "Extension:" }),
+              /* @__PURE__ */ jsxs18(Text18, { children: [
                 extensionName,
                 " (",
                 extensionId,
                 ")"
               ] })
             ] }),
-            /* @__PURE__ */ jsxs17(Box17, { gap: 2, children: [
-              /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "App:" }),
-              /* @__PURE__ */ jsx17(Text17, { children: `${appName ? `${appName} ` : ""}(${appId})` })
-            ] }),
-            /* @__PURE__ */ jsxs17(Box17, { gap: 2, children: [
-              /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "Bundle URL:" }),
-              /* @__PURE__ */ jsx17(Text17, { children: tunnelUrl || `http://localhost:${extensionPort}` })
+            /* @__PURE__ */ jsxs18(Box18, { gap: 2, children: [
+              /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "Bundle URL:" }),
+              /* @__PURE__ */ jsx18(Text18, { children: tunnelUrl || `http://localhost:${extensionPort}` })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs17(Box17, { flexDirection: "column", children: [
-            previewTunnelUrl && /* @__PURE__ */ jsxs17(Box17, { gap: 2, children: [
-              /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "Tunnel Dev - Preview:" }),
-              /* @__PURE__ */ jsx17(Text17, { children: previewTunnelUrl })
+          /* @__PURE__ */ jsxs18(Box18, { flexDirection: "column", children: [
+            previewTunnelUrl && /* @__PURE__ */ jsxs18(Box18, { gap: 2, children: [
+              /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "Tunnel Dev - Preview:" }),
+              /* @__PURE__ */ jsx18(Text18, { children: previewTunnelUrl })
             ] }),
-            /* @__PURE__ */ jsxs17(Box17, { gap: 2, children: [
-              /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "Local Dev - Preview:" }),
-              /* @__PURE__ */ jsxs17(Text17, { children: [
+            /* @__PURE__ */ jsxs18(Box18, { gap: 2, children: [
+              /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "Local Dev - Preview:" }),
+              /* @__PURE__ */ jsxs18(Text18, { children: [
                 "http://localhost:",
                 previewPort
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs17(Box17, { flexDirection: "column", children: [
-            tunnelUrl && /* @__PURE__ */ jsxs17(Box17, { gap: 2, children: [
-              /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "Tunnel Dev - Extension:" }),
-              /* @__PURE__ */ jsx17(Text17, { children: tunnelUrl })
+          /* @__PURE__ */ jsxs18(Box18, { flexDirection: "column", children: [
+            tunnelUrl && /* @__PURE__ */ jsxs18(Box18, { gap: 2, children: [
+              /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "Tunnel Dev - Extension:" }),
+              /* @__PURE__ */ jsx18(Text18, { children: tunnelUrl })
             ] }),
-            /* @__PURE__ */ jsxs17(Box17, { gap: 2, children: [
-              /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "Local Dev - Extension:" }),
-              /* @__PURE__ */ jsxs17(Text17, { children: [
+            /* @__PURE__ */ jsxs18(Box18, { gap: 2, children: [
+              /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "Local Dev - Extension:" }),
+              /* @__PURE__ */ jsxs18(Text18, { children: [
                 "http://localhost:",
                 extensionPort
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx17(Box17, { flexDirection: "column", children: tunnelUrl && /* @__PURE__ */ jsxs17(Box17, { gap: 2, children: [
-            /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "Host Dev - Query Param:" }),
-            /* @__PURE__ */ jsxs17(Text17, { children: [
-              "?_stackable_dev=",
-              encodeURIComponent(`${extensionId}:${tunnelUrl}`)
+          tunnelUrl && devSessionToken && /* @__PURE__ */ jsxs18(Fragment2, { children: [
+            /* @__PURE__ */ jsx18(
+              CopyableField,
+              {
+                label: "Dev Param (no encryption):",
+                value: `?_stackable_dev=${extensionId}:${devParamBlob}`,
+                shortcutKey: "d",
+                children: /* @__PURE__ */ jsxs18(Text18, { children: [
+                  "?",
+                  /* @__PURE__ */ jsx18(Text18, { color: "yellow", children: "_stackable_dev" }),
+                  "=",
+                  /* @__PURE__ */ jsx18(Text18, { color: "cyan", children: extensionId }),
+                  ":",
+                  devParamBlob.slice(0, 20),
+                  "..."
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx18(
+              CopyableField,
+              {
+                label: "Staging Param (with encryption):",
+                value: `?_stackable_staging=${extensionId}:${devParamBlob}`,
+                shortcutKey: "s",
+                children: /* @__PURE__ */ jsxs18(Text18, { children: [
+                  "?",
+                  /* @__PURE__ */ jsx18(Text18, { color: "yellow", children: "_stackable_staging" }),
+                  "=",
+                  /* @__PURE__ */ jsx18(Text18, { color: "cyan", children: extensionId }),
+                  ":",
+                  devParamBlob.slice(0, 20),
+                  "..."
+                ] })
+              }
+            )
+          ] }),
+          tunnelUrl && !devSessionToken && /* @__PURE__ */ jsxs18(Box18, { gap: 2, children: [
+            /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "Host Dev - Query Param:" }),
+            /* @__PURE__ */ jsxs18(Text18, { children: [
+              "?",
+              /* @__PURE__ */ jsx18(Text18, { color: "yellow", children: "_stackable_dev" }),
+              "=",
+              /* @__PURE__ */ jsx18(Text18, { color: "cyan", children: extensionId }),
+              ":",
+              tunnelUrl
             ] })
-          ] }) }),
-          manifestWarnings.length > 0 && /* @__PURE__ */ jsxs17(Box17, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [
-            /* @__PURE__ */ jsx17(Text17, { color: "yellow", bold: true, children: "Local manifest differs from registry:" }),
-            manifestWarnings.map((w, i) => /* @__PURE__ */ jsxs17(Text17, { color: "yellow", children: [
+          ] }),
+          manifestWarnings.length > 0 && /* @__PURE__ */ jsxs18(Box18, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [
+            /* @__PURE__ */ jsx18(Text18, { color: "yellow", bold: true, children: "Local manifest differs from registry:" }),
+            manifestWarnings.map((w, i) => /* @__PURE__ */ jsxs18(Text18, { color: "yellow", children: [
               "  ",
               w
             ] }, i)),
-            /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "  Run `pnpm --config.dlx-cache-max-age=0 dlx @stackable-labs/cli-app-extension@latest update` to review and sync." })
+            /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "  Run `pnpm --config.dlx-cache-max-age=0 dlx @stackable-labs/cli-app-extension@latest update` to review and sync." })
           ] })
         ]
       }
@@ -2459,17 +2627,18 @@ var DevDashboard = ({
 };
 
 // src/components/DevApp.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var DevApp = ({ token, userId, orgId, options = {} }) => {
-  const [state, setState] = useState12("setup");
-  const [devContext, setDevContext] = useState12(null);
-  const [resolvedContext, setResolvedContext] = useState12(null);
-  const [tunnelUrl, setTunnelUrl] = useState12(null);
-  const [previewTunnelUrl, setPreviewTunnelUrl] = useState12(null);
-  const [tunnelHandle, setTunnelHandle] = useState12(null);
-  const [previewTunnelHandle, setPreviewTunnelHandle] = useState12(null);
-  const [devServerHandle, setDevServerHandle] = useState12(null);
-  const [manifestWarnings, setManifestWarnings] = useState12([]);
+  const [state, setState] = useState13("setup");
+  const [devContext, setDevContext] = useState13(null);
+  const [resolvedContext, setResolvedContext] = useState13(null);
+  const [tunnelUrl, setTunnelUrl] = useState13(null);
+  const [previewTunnelUrl, setPreviewTunnelUrl] = useState13(null);
+  const [tunnelHandle, setTunnelHandle] = useState13(null);
+  const [previewTunnelHandle, setPreviewTunnelHandle] = useState13(null);
+  const [devServerHandle, setDevServerHandle] = useState13(null);
+  const [manifestWarnings, setManifestWarnings] = useState13([]);
+  const [devSessionToken, setDevSessionToken] = useState13(null);
   const shuttingDown = useRef(false);
   const useTunnel = options.tunnel !== false;
   useEffect6(() => {
@@ -2480,7 +2649,7 @@ var DevApp = ({ token, userId, orgId, options = {} }) => {
       setDevContext(ctx);
     });
   }, [options.dir]);
-  const handleSetupReady = useCallback2(async (resolved) => {
+  const handleSetupReady = useCallback3(async (resolved) => {
     if (!devContext) return;
     setResolvedContext(resolved);
     console.log(`[dev] Saving context: appId=${resolved.appId} extensionId=${resolved.extensionId}`);
@@ -2538,6 +2707,14 @@ var DevApp = ({ token, userId, orgId, options = {} }) => {
     } else {
       console.log("[dev] Tunnel disabled (--no-tunnel)");
     }
+    try {
+      console.log("[dev] Requesting dev session token...");
+      const sessionToken = await requestDevSessionToken(token, resolved.appId, resolved.extensionId);
+      console.log("[dev] Dev session token received");
+      setDevSessionToken(sessionToken);
+    } catch (err) {
+      console.warn("[dev] Failed to obtain dev session token \u2014 dev/staging mode URLs will not include auth token:", err);
+    }
     console.log(`[dev] Starting dev server in ${devContext.projectRoot}`);
     const serverHandle = startDevServer(devContext.projectRoot);
     setDevServerHandle(serverHandle);
@@ -2579,7 +2756,7 @@ var DevApp = ({ token, userId, orgId, options = {} }) => {
     console.log("[dev] Done");
     process.exit(0);
   };
-  useInput11((input, key) => {
+  useInput12((input, key) => {
     if (input === "c" && key.ctrl) {
       if (state === "running") {
         handleQuit();
@@ -2590,7 +2767,7 @@ var DevApp = ({ token, userId, orgId, options = {} }) => {
   });
   if (state === "setup" && devContext) {
     if (!devContext.appId || !devContext.extensionId) {
-      return /* @__PURE__ */ jsx18(
+      return /* @__PURE__ */ jsx19(
         DevSetup,
         {
           token,
@@ -2602,7 +2779,7 @@ var DevApp = ({ token, userId, orgId, options = {} }) => {
     return null;
   }
   if (state === "running" && devContext && resolvedContext) {
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       DevDashboard,
       {
         previewTunnelUrl,
@@ -2616,6 +2793,7 @@ var DevApp = ({ token, userId, orgId, options = {} }) => {
         extensionPort: options.extensionPort ? parseInt(options.extensionPort, 10) : devContext.extensionPort,
         previewPort: options.previewPort ? parseInt(options.previewPort, 10) : devContext.previewPort,
         manifestWarnings,
+        devSessionToken,
         onQuit: handleQuit
       }
     );
@@ -2623,13 +2801,13 @@ var DevApp = ({ token, userId, orgId, options = {} }) => {
   if (state === "stopping") {
     return null;
   }
-  return /* @__PURE__ */ jsx18(Box18, { children: /* @__PURE__ */ jsx18(Text18, { children: "Loading..." }) });
+  return /* @__PURE__ */ jsx19(Box19, { children: /* @__PURE__ */ jsx19(Text19, { children: "Loading..." }) });
 };
 
 // src/components/AIScaffold.tsx
-import { Box as Box19, Text as Text19, useApp as useApp2 } from "ink";
+import { Box as Box20, Text as Text20, useApp as useApp2 } from "ink";
 import Spinner4 from "ink-spinner";
-import { useState as useState13, useEffect as useEffect7 } from "react";
+import { useState as useState14, useEffect as useEffect7 } from "react";
 
 // src/lib/aiDocs.ts
 import { existsSync, readFileSync } from "fs";
@@ -2682,12 +2860,12 @@ var downloadAndExtractAiDocs = async (targetDir, version2) => {
 };
 
 // src/components/AIScaffold.tsx
-import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
 var AIScaffold = ({ version: version2 }) => {
   const { exit } = useApp2();
-  const [state, setState] = useState13("validating");
-  const [files, setFiles] = useState13([]);
-  const [errorMessage, setErrorMessage] = useState13("");
+  const [state, setState] = useState14("validating");
+  const [files, setFiles] = useState14([]);
+  const [errorMessage, setErrorMessage] = useState14("");
   useEffect7(() => {
     const run = async () => {
       const projectDir = process.cwd();
@@ -2711,35 +2889,35 @@ var AIScaffold = ({ version: version2 }) => {
     };
     run();
   }, []);
-  return /* @__PURE__ */ jsxs18(Box19, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx19(Banner, {}),
-    /* @__PURE__ */ jsxs18(StepShell, { title: "AI Editor Config", children: [
-      state === "validating" && /* @__PURE__ */ jsxs18(Box19, { gap: 1, children: [
-        /* @__PURE__ */ jsx19(Text19, { color: "cyan", children: /* @__PURE__ */ jsx19(Spinner4, { type: "dots" }) }),
-        /* @__PURE__ */ jsx19(Text19, { children: "Checking project..." })
+  return /* @__PURE__ */ jsxs19(Box20, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx20(Banner, {}),
+    /* @__PURE__ */ jsxs19(StepShell, { title: "AI Editor Config", children: [
+      state === "validating" && /* @__PURE__ */ jsxs19(Box20, { gap: 1, children: [
+        /* @__PURE__ */ jsx20(Text20, { color: "cyan", children: /* @__PURE__ */ jsx20(Spinner4, { type: "dots" }) }),
+        /* @__PURE__ */ jsx20(Text20, { children: "Checking project..." })
       ] }),
-      state === "downloading" && /* @__PURE__ */ jsxs18(Box19, { gap: 1, children: [
-        /* @__PURE__ */ jsx19(Text19, { color: "cyan", children: /* @__PURE__ */ jsx19(Spinner4, { type: "dots" }) }),
-        /* @__PURE__ */ jsxs18(Text19, { children: [
+      state === "downloading" && /* @__PURE__ */ jsxs19(Box20, { gap: 1, children: [
+        /* @__PURE__ */ jsx20(Text20, { color: "cyan", children: /* @__PURE__ */ jsx20(Spinner4, { type: "dots" }) }),
+        /* @__PURE__ */ jsxs19(Text20, { children: [
           "Downloading AI editor configs (",
           version2,
           ")..."
         ] })
       ] }),
-      state === "done" && /* @__PURE__ */ jsxs18(Box19, { flexDirection: "column", gap: 1, children: [
-        /* @__PURE__ */ jsxs18(Box19, { gap: 1, children: [
-          /* @__PURE__ */ jsx19(Text19, { color: "green", bold: true, children: "\u2714" }),
-          /* @__PURE__ */ jsxs18(Text19, { bold: true, children: [
+      state === "done" && /* @__PURE__ */ jsxs19(Box20, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs19(Box20, { gap: 1, children: [
+          /* @__PURE__ */ jsx20(Text20, { color: "green", bold: true, children: "\u2714" }),
+          /* @__PURE__ */ jsxs19(Text20, { bold: true, children: [
             "AI editor configs installed (",
             files.length,
             " files)"
           ] })
         ] }),
-        /* @__PURE__ */ jsx19(Box19, { flexDirection: "column", marginLeft: 2, children: files.map((f) => /* @__PURE__ */ jsx19(Text19, { dimColor: true, children: f }, f)) })
+        /* @__PURE__ */ jsx20(Box20, { flexDirection: "column", marginLeft: 2, children: files.map((f) => /* @__PURE__ */ jsx20(Text20, { dimColor: true, children: f }, f)) })
       ] }),
-      state === "error" && /* @__PURE__ */ jsxs18(Box19, { gap: 1, children: [
-        /* @__PURE__ */ jsx19(Text19, { color: "red", children: "\u2716" }),
-        /* @__PURE__ */ jsx19(Text19, { children: errorMessage })
+      state === "error" && /* @__PURE__ */ jsxs19(Box20, { gap: 1, children: [
+        /* @__PURE__ */ jsx20(Text20, { color: "red", children: "\u2716" }),
+        /* @__PURE__ */ jsx20(Text20, { children: errorMessage })
       ] })
     ] })
   ] });
@@ -2747,10 +2925,10 @@ var AIScaffold = ({ version: version2 }) => {
 
 // src/components/AuthLogin.tsx
 import { createServer } from "http";
-import { Box as Box20, Text as Text20, useApp as useApp3 } from "ink";
+import { Box as Box21, Text as Text21, useApp as useApp3 } from "ink";
 import Spinner5 from "ink-spinner";
 import open from "open";
-import { useState as useState14, useEffect as useEffect8 } from "react";
+import { useState as useState15, useEffect as useEffect8 } from "react";
 
 // src/lib/auth.ts
 import { readFile as readFile4, writeFile as writeFile4, mkdir as mkdir2, unlink } from "fs/promises";
@@ -2803,7 +2981,7 @@ var getToken = async () => {
 };
 
 // src/components/AuthLogin.tsx
-import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
 var LOGIN_TIMEOUT_MS = 5 * 60 * 1e3;
 var callbackPage = (heading, sub, redirectUrl) => `<!DOCTYPE html>
 <html><head><meta charset="utf-8"><title>Stackable CLI</title>
@@ -2814,11 +2992,11 @@ ${redirectUrl ? `<script>(function(){var s=3,el=document.getElementById('h');fun
 </body></html>`;
 var AuthLogin = ({ dashboardUrl }) => {
   const { exit } = useApp3();
-  const [state, setState] = useState14("waiting");
-  const [loginUrl, setLoginUrl] = useState14("");
-  const [userIdLabel, setUserIdLabel] = useState14("");
-  const [orgIdLabel, setOrgIdLabel] = useState14("");
-  const [errorMessage, setErrorMessage] = useState14("");
+  const [state, setState] = useState15("waiting");
+  const [loginUrl, setLoginUrl] = useState15("");
+  const [userIdLabel, setUserIdLabel] = useState15("");
+  const [orgIdLabel, setOrgIdLabel] = useState15("");
+  const [errorMessage, setErrorMessage] = useState15("");
   useEffect8(() => {
     let server;
     let timeout;
@@ -2894,38 +3072,38 @@ var AuthLogin = ({ dashboardUrl }) => {
       server?.close();
     };
   }, []);
-  return /* @__PURE__ */ jsxs19(Box20, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx20(Banner, {}),
-    /* @__PURE__ */ jsxs19(StepShell, { title: "Authenticate with Stackable", children: [
-      state === "waiting" && /* @__PURE__ */ jsxs19(Box20, { flexDirection: "column", gap: 1, children: [
-        /* @__PURE__ */ jsxs19(Box20, { gap: 1, children: [
-          /* @__PURE__ */ jsx20(Text20, { color: "cyan", children: /* @__PURE__ */ jsx20(Spinner5, { type: "dots" }) }),
-          /* @__PURE__ */ jsx20(Text20, { children: "Waiting for browser authentication..." })
+  return /* @__PURE__ */ jsxs20(Box21, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx21(Banner, {}),
+    /* @__PURE__ */ jsxs20(StepShell, { title: "Authenticate with Stackable", children: [
+      state === "waiting" && /* @__PURE__ */ jsxs20(Box21, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs20(Box21, { gap: 1, children: [
+          /* @__PURE__ */ jsx21(Text21, { color: "cyan", children: /* @__PURE__ */ jsx21(Spinner5, { type: "dots" }) }),
+          /* @__PURE__ */ jsx21(Text21, { children: "Waiting for browser authentication..." })
         ] }),
-        loginUrl && /* @__PURE__ */ jsxs19(Text20, { dimColor: true, children: [
+        loginUrl && /* @__PURE__ */ jsxs20(Text21, { dimColor: true, children: [
           "  ",
           loginUrl
         ] })
       ] }),
-      state === "success" && /* @__PURE__ */ jsxs19(Box20, { flexDirection: "column", gap: 1, children: [
-        /* @__PURE__ */ jsxs19(Box20, { flexDirection: "column", children: [
-          /* @__PURE__ */ jsxs19(Box20, { gap: 2, children: [
-            /* @__PURE__ */ jsx20(Text20, { dimColor: true, children: "User:" }),
-            /* @__PURE__ */ jsx20(Text20, { color: "cyan", children: userIdLabel })
+      state === "success" && /* @__PURE__ */ jsxs20(Box21, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs20(Box21, { flexDirection: "column", children: [
+          /* @__PURE__ */ jsxs20(Box21, { gap: 2, children: [
+            /* @__PURE__ */ jsx21(Text21, { dimColor: true, children: "User:" }),
+            /* @__PURE__ */ jsx21(Text21, { color: "cyan", children: userIdLabel })
           ] }),
-          /* @__PURE__ */ jsxs19(Box20, { gap: 2, children: [
-            /* @__PURE__ */ jsx20(Text20, { dimColor: true, children: "Org: " }),
-            /* @__PURE__ */ jsx20(Text20, { color: "cyan", children: orgIdLabel })
+          /* @__PURE__ */ jsxs20(Box21, { gap: 2, children: [
+            /* @__PURE__ */ jsx21(Text21, { dimColor: true, children: "Org: " }),
+            /* @__PURE__ */ jsx21(Text21, { color: "cyan", children: orgIdLabel })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs19(Box20, { gap: 1, children: [
-          /* @__PURE__ */ jsx20(Text20, { color: "green", bold: true, children: "\u2714" }),
-          /* @__PURE__ */ jsx20(Text20, { bold: true, children: "Authenticated" })
+        /* @__PURE__ */ jsxs20(Box21, { gap: 1, children: [
+          /* @__PURE__ */ jsx21(Text21, { color: "green", bold: true, children: "\u2714" }),
+          /* @__PURE__ */ jsx21(Text21, { bold: true, children: "Authenticated" })
         ] })
       ] }),
-      state === "error" && /* @__PURE__ */ jsxs19(Box20, { gap: 1, children: [
-        /* @__PURE__ */ jsx20(Text20, { color: "red", children: "\u2716" }),
-        /* @__PURE__ */ jsx20(Text20, { children: errorMessage })
+      state === "error" && /* @__PURE__ */ jsxs20(Box21, { gap: 1, children: [
+        /* @__PURE__ */ jsx21(Text21, { color: "red", children: "\u2716" }),
+        /* @__PURE__ */ jsx21(Text21, { children: errorMessage })
       ] })
     ] })
   ] });
@@ -2933,70 +3111,70 @@ var AuthLogin = ({ dashboardUrl }) => {
 
 // src/components/AuthLogout.tsx
 import { useEffect as useEffect9 } from "react";
-import { Box as Box21, Text as Text21, useApp as useApp4 } from "ink";
-import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Box as Box22, Text as Text22, useApp as useApp4 } from "ink";
+import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
 var AuthLogout = () => {
   const { exit } = useApp4();
   useEffect9(() => {
     exit();
   }, [exit]);
-  return /* @__PURE__ */ jsxs20(Box21, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx21(Banner, {}),
-    /* @__PURE__ */ jsx21(StepShell, { title: "Authenticate with Stackable", children: /* @__PURE__ */ jsxs20(Box21, { gap: 1, children: [
-      /* @__PURE__ */ jsx21(Text21, { color: "green", bold: true, children: "\u2714" }),
-      /* @__PURE__ */ jsx21(Text21, { bold: true, children: "Logged out" })
+  return /* @__PURE__ */ jsxs21(Box22, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx22(Banner, {}),
+    /* @__PURE__ */ jsx22(StepShell, { title: "Authenticate with Stackable", children: /* @__PURE__ */ jsxs21(Box22, { gap: 1, children: [
+      /* @__PURE__ */ jsx22(Text22, { color: "green", bold: true, children: "\u2714" }),
+      /* @__PURE__ */ jsx22(Text22, { bold: true, children: "Logged out" })
     ] }) })
   ] });
 };
 
 // src/components/AuthStatus.tsx
 import { useEffect as useEffect10 } from "react";
-import { useApp as useApp5, Box as Box22, Text as Text22 } from "ink";
-import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useApp as useApp5, Box as Box23, Text as Text23 } from "ink";
+import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 var AuthStatus = ({ state, userId, orgId, expiry }) => {
   const { exit } = useApp5();
   useEffect10(() => {
     exit();
   }, [exit]);
-  return /* @__PURE__ */ jsxs21(Box22, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx22(Banner, {}),
-    /* @__PURE__ */ jsxs21(StepShell, { title: "Authenticate with Stackable", children: [
-      state === "authenticated" && /* @__PURE__ */ jsxs21(Box22, { flexDirection: "column", gap: 1, children: [
-        /* @__PURE__ */ jsxs21(Box22, { flexDirection: "column", children: [
-          /* @__PURE__ */ jsxs21(Box22, { gap: 2, children: [
-            /* @__PURE__ */ jsx22(Text22, { dimColor: true, children: "User:" }),
-            /* @__PURE__ */ jsx22(Text22, { color: "cyan", children: userId })
+  return /* @__PURE__ */ jsxs22(Box23, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx23(Banner, {}),
+    /* @__PURE__ */ jsxs22(StepShell, { title: "Authenticate with Stackable", children: [
+      state === "authenticated" && /* @__PURE__ */ jsxs22(Box23, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs22(Box23, { flexDirection: "column", children: [
+          /* @__PURE__ */ jsxs22(Box23, { gap: 2, children: [
+            /* @__PURE__ */ jsx23(Text23, { dimColor: true, children: "User:" }),
+            /* @__PURE__ */ jsx23(Text23, { color: "cyan", children: userId })
           ] }),
-          /* @__PURE__ */ jsxs21(Box22, { gap: 2, children: [
-            /* @__PURE__ */ jsx22(Text22, { dimColor: true, children: "Org: " }),
-            /* @__PURE__ */ jsx22(Text22, { color: "cyan", children: orgId })
+          /* @__PURE__ */ jsxs22(Box23, { gap: 2, children: [
+            /* @__PURE__ */ jsx23(Text23, { dimColor: true, children: "Org: " }),
+            /* @__PURE__ */ jsx23(Text23, { color: "cyan", children: orgId })
           ] }),
-          expiry && /* @__PURE__ */ jsxs21(Box22, { gap: 2, children: [
-            /* @__PURE__ */ jsx22(Text22, { dimColor: true, children: "Exp: " }),
-            /* @__PURE__ */ jsx22(Text22, { color: "cyan", children: expiry.toLocaleDateString() })
+          expiry && /* @__PURE__ */ jsxs22(Box23, { gap: 2, children: [
+            /* @__PURE__ */ jsx23(Text23, { dimColor: true, children: "Exp: " }),
+            /* @__PURE__ */ jsx23(Text23, { color: "cyan", children: expiry.toLocaleDateString() })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs21(Box22, { gap: 1, children: [
-          /* @__PURE__ */ jsx22(Text22, { color: "green", bold: true, children: "\u2714" }),
-          /* @__PURE__ */ jsx22(Text22, { bold: true, children: "Authenticated" })
+        /* @__PURE__ */ jsxs22(Box23, { gap: 1, children: [
+          /* @__PURE__ */ jsx23(Text23, { color: "green", bold: true, children: "\u2714" }),
+          /* @__PURE__ */ jsx23(Text23, { bold: true, children: "Authenticated" })
         ] })
       ] }),
-      state === "expired" && /* @__PURE__ */ jsxs21(Box22, { flexDirection: "column", gap: 1, children: [
-        /* @__PURE__ */ jsxs21(Box22, { gap: 1, children: [
-          /* @__PURE__ */ jsx22(Text22, { color: "red", children: "\u2716" }),
-          /* @__PURE__ */ jsxs21(Text22, { children: [
+      state === "expired" && /* @__PURE__ */ jsxs22(Box23, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs22(Box23, { gap: 1, children: [
+          /* @__PURE__ */ jsx23(Text23, { color: "red", children: "\u2716" }),
+          /* @__PURE__ */ jsxs22(Text23, { children: [
             "Session expired",
             expiry ? ` (${expiry.toLocaleDateString()})` : ""
           ] })
         ] }),
-        /* @__PURE__ */ jsx22(Text22, { dimColor: true, children: "Run `stackable-app-extension auth login` to re-authenticate." })
+        /* @__PURE__ */ jsx23(Text23, { dimColor: true, children: "Run `stackable-app-extension auth login` to re-authenticate." })
       ] }),
-      state === "not-logged-in" && /* @__PURE__ */ jsxs21(Box22, { flexDirection: "column", gap: 1, children: [
-        /* @__PURE__ */ jsxs21(Box22, { gap: 1, children: [
-          /* @__PURE__ */ jsx22(Text22, { color: "red", children: "\u2716" }),
-          /* @__PURE__ */ jsx22(Text22, { children: "Not logged in" })
+      state === "not-logged-in" && /* @__PURE__ */ jsxs22(Box23, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs22(Box23, { gap: 1, children: [
+          /* @__PURE__ */ jsx23(Text23, { color: "red", children: "\u2716" }),
+          /* @__PURE__ */ jsx23(Text23, { children: "Not logged in" })
         ] }),
-        /* @__PURE__ */ jsx22(Text22, { dimColor: true, children: "Run `stackable-app-extension auth login`" })
+        /* @__PURE__ */ jsx23(Text23, { dimColor: true, children: "Run `stackable-app-extension auth login`" })
       ] })
     ] })
   ] });
@@ -3050,7 +3228,7 @@ var checkForUpdate = (currentVersion) => {
 };
 
 // src/index.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var require2 = createRequire(import.meta.url);
 var { version } = require2("../package.json");
 checkForUpdate(version);
@@ -3063,7 +3241,7 @@ var ensureToken = async () => {
     const message = err instanceof Error ? err.message : String(err);
     const isExpired = message.toLowerCase().includes("expired");
     render(
-      /* @__PURE__ */ jsx23(AuthStatus, { state: isExpired ? "expired" : "not-logged-in" })
+      /* @__PURE__ */ jsx24(AuthStatus, { state: isExpired ? "expired" : "not-logged-in" })
     );
     return null;
   }
@@ -3076,7 +3254,7 @@ program.command("create" /* CREATE */).description("Create a new Extension proje
   }
   const { token, userId, orgId } = auth2;
   render(
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(
       App,
       {
         command: "create" /* CREATE */,
@@ -3096,7 +3274,7 @@ program.command("scaffold" /* SCAFFOLD */).description("Scaffold a local project
   }
   const { token, userId, orgId } = auth2;
   render(
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(
       App,
       {
         command: "scaffold" /* SCAFFOLD */,
@@ -3115,7 +3293,7 @@ program.command("update" /* UPDATE */).description("Update an existing Extension
   }
   const { token, userId, orgId } = auth2;
   render(
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(
       App,
       {
         command: "update" /* UPDATE */,
@@ -3135,7 +3313,7 @@ program.command("dev" /* DEV */).description("Start dev servers with a public tu
   }
   const { token, userId, orgId } = auth2;
   render(
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(
       DevApp,
       {
         options,
@@ -3150,17 +3328,17 @@ program.command("dev" /* DEV */).description("Start dev servers with a public tu
 var DASHBOARD_URL = process.env.ADMIN_DASHBOARD_URL ?? "https://admin.stackablelabs.io";
 var auth = program.command("auth").description("Manage CLI authentication");
 auth.command("login").description("Authenticate with Stackable via browser").action(async () => {
-  render(/* @__PURE__ */ jsx23(AuthLogin, { dashboardUrl: DASHBOARD_URL }));
+  render(/* @__PURE__ */ jsx24(AuthLogin, { dashboardUrl: DASHBOARD_URL }));
 });
 auth.command("logout").description("Clear stored CLI credentials").action(async () => {
   await clearAuthState();
-  render(/* @__PURE__ */ jsx23(AuthLogout, {}));
+  render(/* @__PURE__ */ jsx24(AuthLogout, {}));
 });
 auth.command("status").description("Show current authentication status").action(async () => {
   const state = await readAuthState();
   if (!state) {
     render(
-      /* @__PURE__ */ jsx23(AuthStatus, { state: "not-logged-in" })
+      /* @__PURE__ */ jsx24(AuthStatus, { state: "not-logged-in" })
     );
     return;
   }
@@ -3168,11 +3346,11 @@ auth.command("status").description("Show current authentication status").action(
   const payload = JSON.parse(Buffer.from(payloadB64, "base64url").toString());
   const expiry = payload.exp ? new Date(payload.exp * 1e3) : null;
   if (expiry && Date.now() >= expiry.getTime()) {
-    render(/* @__PURE__ */ jsx23(AuthStatus, { state: "expired", expiry }));
+    render(/* @__PURE__ */ jsx24(AuthStatus, { state: "expired", expiry }));
     return;
   }
   render(
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(
       AuthStatus,
       {
         state: "authenticated",
@@ -3185,6 +3363,6 @@ auth.command("status").description("Show current authentication status").action(
 });
 var ai = program.command("ai").description("AI editor configuration tools");
 ai.command("scaffold").description("Download AI editor config files into your Extension project").option("--version <version>", 'AI docs version (semver or "latest")', "latest").action(async (options) => {
-  render(/* @__PURE__ */ jsx23(AIScaffold, { version: options.version }));
+  render(/* @__PURE__ */ jsx24(AIScaffold, { version: options.version }));
 });
 program.parse(process.argv.filter((arg) => arg !== "--"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackable-labs/cli-app-extension",
-  "version": "1.30.0",
+  "version": "1.31.0",
   "type": "module",
   "private": false,
   "bin": {
@@ -13,6 +13,7 @@
   ],
   "dependencies": {
     "adm-zip": "0.x",
+    "clipboardy": "5.x",
     "cloudflared": "0.x",
     "commander": "12.x",
     "giget": "3.x",