@stackable-labs/cli-app-extension 1.18.0 → 1.20.0

package/dist/index.js

@@ -2,10 +2,8 @@
 
 // src/index.tsx
 import { createRequire } from "module";
-import { createServer } from "http";
 import { program } from "commander";
 import { render } from "ink";
-import open from "open";
 
 // src/App.tsx
 import { join as join3 } from "path";
@@ -777,7 +775,7 @@ var fetchApps = async (token) => {
     iconUrl
   }));
 };
-var createExtensionRemote = async (appId, payload, token) => {
+var createExtensionRemote = async (appId, token, payload) => {
   const baseUrl = getAdminApiBaseUrl();
   const res = await fetch(`${baseUrl}/app-extension/${appId}/extensions`, {
     method: "POST",
@@ -860,25 +858,37 @@ var gradientColor = (row, col, rows, cols) => {
   const hi = Math.min(lo + 1, COLORS.length - 1);
   return lerp(COLORS[lo], COLORS[hi], idx - lo);
 };
-var Banner = () => {
+var Banner = ({ userId, orgId } = {}) => {
   const termWidth = process.stdout.columns ?? 80;
   const maxLen = Math.max(...WORDMARK.map((l) => l.length));
   return /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx10(Text10, { dimColor: true, children: "\u2500".repeat(termWidth) }),
-    /* @__PURE__ */ jsx10(Box10, { flexDirection: "column", paddingX: 1, paddingY: 1, children: WORDMARK.map((line, row) => /* @__PURE__ */ jsx10(Box10, { children: line.split("").map((ch, col) => /* @__PURE__ */ jsx10(Text10, { bold: true, color: ch === " " ? void 0 : gradientColor(row, col, WORDMARK.length, maxLen), children: ch }, col)) }, row)) })
+    /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", paddingX: 1, paddingY: 1, children: [
+      WORDMARK.map((line, row) => /* @__PURE__ */ jsx10(Box10, { children: line.split("").map((ch, col) => /* @__PURE__ */ jsx10(Text10, { bold: true, color: ch === " " ? void 0 : gradientColor(row, col, WORDMARK.length, maxLen), children: ch }, col)) }, row)),
+      userId && orgId && /* @__PURE__ */ jsxs10(Box10, { gap: 2, marginTop: 1, children: [
+        /* @__PURE__ */ jsxs10(Box10, { gap: 1, children: [
+          /* @__PURE__ */ jsx10(Text10, { dimColor: true, children: "User:" }),
+          /* @__PURE__ */ jsx10(Text10, { color: "cyan", children: userId })
+        ] }),
+        /* @__PURE__ */ jsxs10(Box10, { gap: 1, children: [
+          /* @__PURE__ */ jsx10(Text10, { dimColor: true, children: "Org:" }),
+          /* @__PURE__ */ jsx10(Text10, { color: "cyan", children: orgId })
+        ] })
+      ] })
+    ] })
   ] });
 };
 
 // src/components/AppSelect.tsx
 import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
-var AppSelect = ({ token, onSubmit }) => {
+var AppSelect = ({ token, userId, orgId, onSubmit }) => {
   const [apps, setApps] = useState6([]);
   const [loading, setLoading] = useState6(true);
   const [error, setError] = useState6();
   const [cursor, setCursor] = useState6(0);
   useEffect2(() => {
     fetchApps(token).then(setApps).catch((err) => setError(err instanceof Error ? err.message : String(err))).finally(() => setLoading(false));
-  }, []);
+  }, [token]);
   useInput6((_, key) => {
     if (loading || error || apps.length === 0) return;
     if (key.upArrow) {
@@ -919,7 +929,7 @@ var AppSelect = ({ token, onSubmit }) => {
     }) });
   };
   return /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx11(Banner, {}),
+    /* @__PURE__ */ jsx11(Banner, { userId, orgId }),
     /* @__PURE__ */ jsx11(StepShell, { title: "Select the App you are building an Extension for:", children: renderContent() })
   ] });
 };
@@ -936,7 +946,7 @@ var ExtensionSelect = ({ appId, token, command, onSubmit, onBack }) => {
   const [cursor, setCursor] = useState7(0);
   useEffect3(() => {
     fetchExtensions(appId, token).then((byId) => setExtensions(Object.values(byId))).catch((err) => setError(err instanceof Error ? err.message : String(err))).finally(() => setLoading(false));
-  }, [appId]);
+  }, [appId, token]);
   useInput7((_, key) => {
     if (key.upArrow) {
       if (!loading && !error && extensions.length > 0) {
@@ -1511,7 +1521,7 @@ var derivePermissions2 = (targets) => {
   }
   return [...permissions];
 };
-var App = ({ command, token, initialName, initialExtensionId, options }) => {
+var App = ({ command, token, userId, orgId, initialName, initialExtensionId, options }) => {
   const { exit } = useApp();
   const [step, setStep] = useState8("app");
   const [name, setName] = useState8(initialName ?? options?.name ?? "");
@@ -1716,17 +1726,25 @@ var App = ({ command, token, initialName, initialExtensionId, options }) => {
   };
   switch (step) {
     case "app": {
-      return /* @__PURE__ */ jsx13(AppSelect, { token, onSubmit: handleAppSelect });
+      return /* @__PURE__ */ jsx13(
+        AppSelect,
+        {
+          token,
+          orgId,
+          userId,
+          onSubmit: handleAppSelect
+        }
+      );
     }
     case "extensionSelect": {
       return /* @__PURE__ */ jsx13(
         ExtensionSelect,
         {
           appId: selectedApp.id,
-          token,
           command,
-          onSubmit: handleExtensionSelect,
-          onBack: goBack
+          token,
+          onBack: goBack,
+          onSubmit: handleExtensionSelect
         }
       );
     }
@@ -1736,8 +1754,8 @@ var App = ({ command, token, initialName, initialExtensionId, options }) => {
         {
           availableTargets: selectedApp?.targets ?? [],
           preSelected: targets,
-          onSubmit: handleConfirmTargets,
-          onBack: goBack
+          onBack: goBack,
+          onSubmit: handleConfirmTargets
         }
       );
     }
@@ -1746,8 +1764,8 @@ var App = ({ command, token, initialName, initialExtensionId, options }) => {
         NamePrompt,
         {
           initialValue: name,
-          onSubmit: handleName,
-          onBack: goBack
+          onBack: goBack,
+          onSubmit: handleName
         }
       );
     }
@@ -1777,10 +1795,10 @@ var App = ({ command, token, initialName, initialExtensionId, options }) => {
         {
           command,
           name,
-          extensionPort,
-          previewPort,
           targets,
           outputDir,
+          previewPort,
+          extensionPort,
           extensionVersion: command !== "create" /* CREATE */ ? extensionVersion : void 0,
           bundleUrl: command === "update" /* UPDATE */ ? bundleUrl : void 0,
           enabled: command === "update" /* UPDATE */ ? enabled : void 0,
@@ -1801,9 +1819,9 @@ var App = ({ command, token, initialName, initialExtensionId, options }) => {
         {
           name,
           targets,
-          availableTargets: selectedApp?.targets ?? [],
-          bundleUrl,
           enabled,
+          bundleUrl,
+          availableTargets: selectedApp?.targets ?? [],
           onSubmit: (updated) => {
             setName(updated.name);
             setTargets(updated.targets);
@@ -1856,8 +1874,8 @@ var App = ({ command, token, initialName, initialExtensionId, options }) => {
 };
 
 // src/components/DevApp.tsx
-import { Box as Box16, Text as Text16 } from "ink";
 import { useRef, useState as useState10, useEffect as useEffect6, useCallback as useCallback2 } from "react";
+import { useInput as useInput9, Box as Box16, Text as Text16 } from "ink";
 
 // src/lib/tunnel.ts
 import { Tunnel } from "cloudflared";
@@ -1916,7 +1934,13 @@ var DevSetup = ({ initialContext, token, onReady }) => {
   if (step === "app") {
     return /* @__PURE__ */ jsxs14(Box14, { flexDirection: "column", children: [
       /* @__PURE__ */ jsx14(Box14, { marginBottom: 1, children: /* @__PURE__ */ jsx14(Text14, { children: "Select the App for your extension:" }) }),
-      /* @__PURE__ */ jsx14(AppSelect, { token, onSubmit: handleAppSelect })
+      /* @__PURE__ */ jsx14(
+        AppSelect,
+        {
+          token,
+          onSubmit: handleAppSelect
+        }
+      )
     ] });
   }
   return /* @__PURE__ */ jsxs14(Box14, { flexDirection: "column", children: [
@@ -1924,8 +1948,8 @@ var DevSetup = ({ initialContext, token, onReady }) => {
     /* @__PURE__ */ jsx14(
       ExtensionSelect,
       {
-        appId: selectedApp?.id || initialContext.appId,
         token,
+        appId: selectedApp?.id || initialContext.appId,
         onSubmit: handleExtensionSelect
       }
     )
@@ -1937,14 +1961,16 @@ import { Box as Box15, Text as Text15, useInput as useInput8 } from "ink";
 import { useEffect as useEffect5 } from "react";
 import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
 var DevDashboard = ({
-  extensionName,
-  extensionId,
+  previewTunnelUrl,
+  tunnelUrl,
+  userId,
+  orgId,
   appId,
   appName,
-  tunnelUrl,
-  previewTunnelUrl,
-  previewPort,
+  extensionId,
+  extensionName,
   extensionPort,
+  previewPort,
   onQuit
 }) => {
   useEffect5(() => {
@@ -1962,7 +1988,7 @@ var DevDashboard = ({
     }
   });
   return /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx15(Banner, {}),
+    /* @__PURE__ */ jsx15(Banner, { userId, orgId }),
     /* @__PURE__ */ jsxs15(
       StepShell,
       {
@@ -2030,7 +2056,7 @@ var DevDashboard = ({
 
 // src/components/DevApp.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
-var DevApp = ({ token, options = {} }) => {
+var DevApp = ({ token, userId, orgId, options = {} }) => {
   const [state, setState] = useState10("setup");
   const [devContext, setDevContext] = useState10(null);
   const [resolvedContext, setResolvedContext] = useState10(null);
@@ -2123,13 +2149,22 @@ var DevApp = ({ token, options = {} }) => {
     console.log("[dev] Done");
     process.exit(0);
   };
+  useInput9((input, key) => {
+    if (input === "c" && key.ctrl) {
+      if (state === "running") {
+        handleQuit();
+      } else {
+        process.exit(0);
+      }
+    }
+  });
   if (state === "setup" && devContext) {
     if (!devContext.appId || !devContext.extensionId) {
       return /* @__PURE__ */ jsx16(
         DevSetup,
         {
-          initialContext: devContext,
           token,
+          initialContext: devContext,
           onReady: handleSetupReady
         }
       );
@@ -2140,14 +2175,16 @@ var DevApp = ({ token, options = {} }) => {
     return /* @__PURE__ */ jsx16(
       DevDashboard,
       {
-        extensionName: devContext.extensionName,
-        extensionId: resolvedContext.extensionId,
+        previewTunnelUrl,
+        tunnelUrl,
+        orgId,
+        userId,
         appId: resolvedContext.appId,
         appName: resolvedContext.appName,
+        extensionName: devContext.extensionName,
+        extensionId: resolvedContext.extensionId,
         extensionPort: options.extensionPort ? parseInt(options.extensionPort, 10) : devContext.extensionPort,
         previewPort: options.previewPort ? parseInt(options.previewPort, 10) : devContext.previewPort,
-        tunnelUrl,
-        previewTunnelUrl,
         onQuit: handleQuit
       }
     );
@@ -2158,12 +2195,138 @@ var DevApp = ({ token, options = {} }) => {
   return /* @__PURE__ */ jsx16(Box16, { children: /* @__PURE__ */ jsx16(Text16, { children: "Loading..." }) });
 };
 
+// src/components/AIScaffold.tsx
+import { Box as Box17, Text as Text17, useApp as useApp2 } from "ink";
+import Spinner4 from "ink-spinner";
+import { useState as useState11, useEffect as useEffect7 } from "react";
+
+// src/lib/aiDocs.ts
+import { existsSync, readFileSync } from "fs";
+import { join as join4, dirname } from "path";
+import { mkdir, writeFile as writeFile3 } from "fs/promises";
+import AdmZip from "adm-zip";
+var DEFAULT_STATIC_CDN_URL = "https://static.stackablelabs.io";
+var AI_DOCS_FILENAME = "extension-ai-docs.zip";
+var getStaticCdnBaseUrl = () => process.env.STATIC_CDN_BASE_URL ?? DEFAULT_STATIC_CDN_URL;
+var isValidManifest = (data) => {
+  if (!data || typeof data !== "object") return false;
+  const m = data;
+  return typeof m.name === "string" && m.name.length > 0 && typeof m.version === "string" && Array.isArray(m.targets) && Array.isArray(m.permissions) && Array.isArray(m.allowedDomains);
+};
+var isExtensionProject = (dir) => {
+  const manifestPath = join4(dir, "packages/extension/public/manifest.json");
+  if (!existsSync(manifestPath)) {
+    return { valid: false, reason: "No manifest.json found at packages/extension/public/manifest.json \u2014 is this an Extension project?" };
+  }
+  try {
+    const raw = readFileSync(manifestPath, "utf8");
+    const data = JSON.parse(raw);
+    if (!isValidManifest(data)) {
+      return { valid: false, reason: "Invalid manifest: missing required fields (name, version, targets, permissions, allowedDomains)" };
+    }
+  } catch {
+    return { valid: false, reason: "Failed to parse manifest.json" };
+  }
+  return { valid: true };
+};
+var downloadAndExtractAiDocs = async (targetDir, version2) => {
+  const baseUrl = getStaticCdnBaseUrl();
+  const zipUrl = `${baseUrl}/ai-docs/${version2}/${AI_DOCS_FILENAME}`;
+  const response = await fetch(zipUrl);
+  if (!response.ok) {
+    throw new Error(`Failed to download AI docs from ${zipUrl}: ${response.status} ${response.statusText}`);
+  }
+  const buffer = Buffer.from(await response.arrayBuffer());
+  const zip = new AdmZip(buffer);
+  const entries = zip.getEntries();
+  const extractedFiles = [];
+  for (const entry of entries) {
+    if (entry.isDirectory) continue;
+    const targetPath = join4(targetDir, entry.entryName);
+    await mkdir(dirname(targetPath), { recursive: true });
+    await writeFile3(targetPath, entry.getData());
+    extractedFiles.push(entry.entryName);
+  }
+  return { files: extractedFiles.sort() };
+};
+
+// src/components/AIScaffold.tsx
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+var AIScaffold = ({ version: version2 }) => {
+  const { exit } = useApp2();
+  const [state, setState] = useState11("validating");
+  const [files, setFiles] = useState11([]);
+  const [errorMessage, setErrorMessage] = useState11("");
+  useEffect7(() => {
+    const run = async () => {
+      const projectDir = process.cwd();
+      const check = isExtensionProject(projectDir);
+      if (!check.valid) {
+        setErrorMessage(check.reason);
+        setState("error");
+        exit();
+        return;
+      }
+      setState("downloading");
+      try {
+        const result = await downloadAndExtractAiDocs(projectDir, version2);
+        setFiles(result.files);
+        setState("done");
+      } catch (err) {
+        setErrorMessage(err instanceof Error ? err.message : String(err));
+        setState("error");
+      }
+      exit();
+    };
+    run();
+  }, []);
+  return /* @__PURE__ */ jsxs16(Box17, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx17(Banner, {}),
+    /* @__PURE__ */ jsxs16(StepShell, { title: "AI Editor Config", children: [
+      state === "validating" && /* @__PURE__ */ jsxs16(Box17, { gap: 1, children: [
+        /* @__PURE__ */ jsx17(Text17, { color: "cyan", children: /* @__PURE__ */ jsx17(Spinner4, { type: "dots" }) }),
+        /* @__PURE__ */ jsx17(Text17, { children: "Checking project..." })
+      ] }),
+      state === "downloading" && /* @__PURE__ */ jsxs16(Box17, { gap: 1, children: [
+        /* @__PURE__ */ jsx17(Text17, { color: "cyan", children: /* @__PURE__ */ jsx17(Spinner4, { type: "dots" }) }),
+        /* @__PURE__ */ jsxs16(Text17, { children: [
+          "Downloading AI editor configs (",
+          version2,
+          ")..."
+        ] })
+      ] }),
+      state === "done" && /* @__PURE__ */ jsxs16(Box17, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs16(Box17, { gap: 1, children: [
+          /* @__PURE__ */ jsx17(Text17, { color: "green", bold: true, children: "\u2714" }),
+          /* @__PURE__ */ jsxs16(Text17, { bold: true, children: [
+            "AI editor configs installed (",
+            files.length,
+            " files)"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx17(Box17, { flexDirection: "column", marginLeft: 2, children: files.map((f) => /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: f }, f)) })
+      ] }),
+      state === "error" && /* @__PURE__ */ jsxs16(Box17, { gap: 1, children: [
+        /* @__PURE__ */ jsx17(Text17, { color: "red", children: "\u2716" }),
+        /* @__PURE__ */ jsx17(Text17, { children: errorMessage })
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/AuthLogin.tsx
+import { createServer } from "http";
+import { Box as Box18, Text as Text18, useApp as useApp3 } from "ink";
+import Spinner5 from "ink-spinner";
+import open from "open";
+import { useState as useState12, useEffect as useEffect8 } from "react";
+
 // src/lib/auth.ts
-import { readFile as readFile3, writeFile as writeFile3, mkdir, unlink } from "fs/promises";
-import { join as join4 } from "path";
+import { readFile as readFile3, writeFile as writeFile4, mkdir as mkdir2, unlink } from "fs/promises";
+import { join as join5 } from "path";
 import { homedir } from "os";
-var AUTH_DIR = join4(homedir(), ".stackable");
-var AUTH_FILE = join4(AUTH_DIR, "auth.json");
+var AUTH_DIR = join5(homedir(), ".stackable");
+var AUTH_FILE = join5(AUTH_DIR, "auth.json");
 var readAuthState = async () => {
   try {
     const content = await readFile3(AUTH_FILE, "utf8");
@@ -2173,8 +2336,8 @@ var readAuthState = async () => {
   }
 };
 var writeAuthState = async (state) => {
-  await mkdir(AUTH_DIR, { recursive: true, mode: 448 });
-  await writeFile3(AUTH_FILE, JSON.stringify(state, null, 2), { mode: 384 });
+  await mkdir2(AUTH_DIR, { recursive: true, mode: 448 });
+  await writeFile4(AUTH_FILE, JSON.stringify(state, null, 2), { mode: 384 });
 };
 var clearAuthState = async () => {
   try {
@@ -2185,7 +2348,9 @@ var clearAuthState = async () => {
 var decodeJwtPayload = (token) => {
   try {
     const [, payload] = token.split(".");
-    if (!payload) return null;
+    if (!payload) {
+      return null;
+    }
     const json = Buffer.from(payload, "base64url").toString("utf8");
     return JSON.parse(json);
   } catch {
@@ -2195,17 +2360,217 @@ var decodeJwtPayload = (token) => {
 var getToken = async () => {
   const state = await readAuthState();
   if (!state) {
-    throw new Error("Not authenticated. Run `stackable auth login` first.");
+    throw new Error("Not authenticated. Run `stackable-app-extension auth login` first.");
   }
   const payload = decodeJwtPayload(state.token);
   if (payload?.exp && typeof payload.exp === "number") {
     if (Date.now() >= payload.exp * 1e3) {
-      throw new Error("Session expired. Run `stackable auth login` to re-authenticate.");
+      throw new Error("Session expired. Run `stackable-app-extension auth login` to re-authenticate.");
     }
   }
   return state.token;
 };
 
+// src/components/AuthLogin.tsx
+import { jsx as jsx18, jsxs as jsxs17 } 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>
+<style>body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;background:#0a0a0a;color:#fafafa;font-family:system-ui,sans-serif}
+.card{text-align:center;padding:2rem}.card h2{margin:0 0 .5rem}.card p{color:#888;margin:0}.hint{margin-top:1rem;color:#555;font-size:.85rem}</style>
+</head><body><div class="card"><h2>${heading}</h2><p>${sub}</p><p class="hint" id="h"></p></div>
+${redirectUrl ? `<script>(function(){var s=3,el=document.getElementById('h');function t(){if(s<=0){location.href='${redirectUrl}';return}el.textContent='Redirecting in '+s+'s\u2026';s--;setTimeout(t,1000)}t()})()</script>` : ""}
+</body></html>`;
+var AuthLogin = ({ dashboardUrl }) => {
+  const { exit } = useApp3();
+  const [state, setState] = useState12("waiting");
+  const [loginUrl, setLoginUrl] = useState12("");
+  const [userIdLabel, setUserIdLabel] = useState12("");
+  const [orgIdLabel, setOrgIdLabel] = useState12("");
+  const [errorMessage, setErrorMessage] = useState12("");
+  useEffect8(() => {
+    let server;
+    let timeout;
+    const run = async () => {
+      let resolveToken;
+      let rejectToken;
+      const tokenPromise = new Promise((resolve, reject) => {
+        resolveToken = resolve;
+        rejectToken = reject;
+      });
+      server = createServer((req, res) => {
+        const url2 = new URL(req.url, "http://localhost");
+        if (url2.pathname === "/callback") {
+          const error = url2.searchParams.get("error");
+          if (error) {
+            res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+            res.end(callbackPage("Authentication failed", "You can close this tab."));
+            rejectToken(new Error(error));
+            return;
+          }
+          const token2 = url2.searchParams.get("token");
+          if (token2) {
+            res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+            res.end(callbackPage("CLI authenticated", "You can return to your terminal.", dashboardUrl));
+            resolveToken(token2);
+          } else {
+            res.writeHead(400, { "content-type": "text/plain; charset=utf-8" });
+            res.end("Missing token");
+          }
+        } else {
+          res.writeHead(404);
+          res.end();
+        }
+      });
+      await new Promise((r) => server.listen(0, "127.0.0.1", r));
+      const port = server.address().port;
+      const callbackUrl = `http://localhost:${port}/callback`;
+      const url = `${dashboardUrl}/cli-auth?callback=${encodeURIComponent(callbackUrl)}`;
+      setLoginUrl(url);
+      await open(url);
+      timeout = setTimeout(() => {
+        server.close();
+        rejectToken(new Error("Login timed out. Please try again."));
+      }, LOGIN_TIMEOUT_MS);
+      let token;
+      try {
+        token = await tokenPromise;
+      } catch (err) {
+        clearTimeout(timeout);
+        server.close();
+        setErrorMessage(err instanceof Error ? err.message : String(err));
+        setState("error");
+        exit();
+        return;
+      }
+      clearTimeout(timeout);
+      server.close();
+      const [, payloadB64] = token.split(".");
+      const payload = JSON.parse(Buffer.from(payloadB64, "base64url").toString());
+      await writeAuthState({
+        token,
+        userId: payload.sub,
+        orgId: payload.orgId
+      });
+      setUserIdLabel(payload.sub);
+      setOrgIdLabel(payload.orgId);
+      setState("success");
+      exit();
+    };
+    run();
+    return () => {
+      clearTimeout(timeout);
+      server?.close();
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs17(Box18, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx18(Banner, {}),
+    /* @__PURE__ */ jsxs17(StepShell, { title: "Authenticate with Stackable", children: [
+      state === "waiting" && /* @__PURE__ */ jsxs17(Box18, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs17(Box18, { gap: 1, children: [
+          /* @__PURE__ */ jsx18(Text18, { color: "cyan", children: /* @__PURE__ */ jsx18(Spinner5, { type: "dots" }) }),
+          /* @__PURE__ */ jsx18(Text18, { children: "Waiting for browser authentication..." })
+        ] }),
+        loginUrl && /* @__PURE__ */ jsxs17(Text18, { dimColor: true, children: [
+          "  ",
+          loginUrl
+        ] })
+      ] }),
+      state === "success" && /* @__PURE__ */ jsxs17(Box18, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs17(Box18, { flexDirection: "column", children: [
+          /* @__PURE__ */ jsxs17(Box18, { gap: 2, children: [
+            /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "User:" }),
+            /* @__PURE__ */ jsx18(Text18, { color: "cyan", children: userIdLabel })
+          ] }),
+          /* @__PURE__ */ jsxs17(Box18, { gap: 2, children: [
+            /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "Org: " }),
+            /* @__PURE__ */ jsx18(Text18, { color: "cyan", children: orgIdLabel })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs17(Box18, { gap: 1, children: [
+          /* @__PURE__ */ jsx18(Text18, { color: "green", bold: true, children: "\u2714" }),
+          /* @__PURE__ */ jsx18(Text18, { bold: true, children: "Authenticated" })
+        ] })
+      ] }),
+      state === "error" && /* @__PURE__ */ jsxs17(Box18, { gap: 1, children: [
+        /* @__PURE__ */ jsx18(Text18, { color: "red", children: "\u2716" }),
+        /* @__PURE__ */ jsx18(Text18, { children: errorMessage })
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/AuthLogout.tsx
+import { useEffect as useEffect9 } from "react";
+import { Box as Box19, Text as Text19, useApp as useApp4 } from "ink";
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+var AuthLogout = () => {
+  const { exit } = useApp4();
+  useEffect9(() => {
+    exit();
+  }, [exit]);
+  return /* @__PURE__ */ jsxs18(Box19, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx19(Banner, {}),
+    /* @__PURE__ */ jsx19(StepShell, { title: "Authenticate with Stackable", children: /* @__PURE__ */ jsxs18(Box19, { gap: 1, children: [
+      /* @__PURE__ */ jsx19(Text19, { color: "green", bold: true, children: "\u2714" }),
+      /* @__PURE__ */ jsx19(Text19, { bold: true, children: "Logged out" })
+    ] }) })
+  ] });
+};
+
+// src/components/AuthStatus.tsx
+import { useEffect as useEffect10 } from "react";
+import { useApp as useApp5, Box as Box20, Text as Text20 } from "ink";
+import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+var AuthStatus = ({ state, userId, orgId, expiry }) => {
+  const { exit } = useApp5();
+  useEffect10(() => {
+    exit();
+  }, [exit]);
+  return /* @__PURE__ */ jsxs19(Box20, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx20(Banner, {}),
+    /* @__PURE__ */ jsxs19(StepShell, { title: "Authenticate with Stackable", children: [
+      state === "authenticated" && /* @__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: userId })
+          ] }),
+          /* @__PURE__ */ jsxs19(Box20, { gap: 2, children: [
+            /* @__PURE__ */ jsx20(Text20, { dimColor: true, children: "Org: " }),
+            /* @__PURE__ */ jsx20(Text20, { color: "cyan", children: orgId })
+          ] }),
+          expiry && /* @__PURE__ */ jsxs19(Box20, { gap: 2, children: [
+            /* @__PURE__ */ jsx20(Text20, { dimColor: true, children: "Exp: " }),
+            /* @__PURE__ */ jsx20(Text20, { color: "cyan", children: expiry.toLocaleDateString() })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs19(Box20, { gap: 1, children: [
+          /* @__PURE__ */ jsx20(Text20, { color: "green", bold: true, children: "\u2714" }),
+          /* @__PURE__ */ jsx20(Text20, { bold: true, children: "Authenticated" })
+        ] })
+      ] }),
+      state === "expired" && /* @__PURE__ */ jsxs19(Box20, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs19(Box20, { gap: 1, children: [
+          /* @__PURE__ */ jsx20(Text20, { color: "red", children: "\u2716" }),
+          /* @__PURE__ */ jsxs19(Text20, { children: [
+            "Session expired",
+            expiry ? ` (${expiry.toLocaleDateString()})` : ""
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx20(Text20, { dimColor: true, children: "Run `stackable-app-extension auth login` to re-authenticate." })
+      ] }),
+      state === "not-logged-in" && /* @__PURE__ */ jsxs19(Box20, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs19(Box20, { gap: 1, children: [
+          /* @__PURE__ */ jsx20(Text20, { color: "red", children: "\u2716" }),
+          /* @__PURE__ */ jsx20(Text20, { children: "Not logged in" })
+        ] }),
+        /* @__PURE__ */ jsx20(Text20, { dimColor: true, children: "Run `stackable-app-extension auth login`" })
+      ] })
+    ] })
+  ] });
+};
+
 // src/lib/versionCheck.ts
 import https from "https";
 var PACKAGE_NAME = "@stackable-labs/cli-app-extension";
@@ -2254,112 +2619,141 @@ var checkForUpdate = (currentVersion) => {
 };
 
 // src/index.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var require2 = createRequire(import.meta.url);
 var { version } = require2("../package.json");
 checkForUpdate(version);
+var ensureToken = async () => {
+  try {
+    const token = await getToken();
+    const state = await readAuthState();
+    return { token, userId: state.userId, orgId: state.orgId };
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    const isExpired = message.toLowerCase().includes("expired");
+    render(
+      /* @__PURE__ */ jsx21(AuthStatus, { state: isExpired ? "expired" : "not-logged-in" })
+    );
+    return null;
+  }
+};
 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: 6543)").option("--preview-port <port>", "Preview dev server port").option("--skip-install", "Skip package manager install").option("--skip-git", "Skip git initialization").action(async (name, options) => {
-  const token = await getToken();
-  render(/* @__PURE__ */ jsx17(App, { command: "create" /* CREATE */, initialName: name, options, token }));
+  const auth2 = await ensureToken();
+  if (!auth2) {
+    return;
+  }
+  const { token, userId, orgId } = auth2;
+  render(
+    /* @__PURE__ */ jsx21(
+      App,
+      {
+        command: "create" /* CREATE */,
+        initialName: name,
+        options,
+        token,
+        orgId,
+        userId
+      }
+    )
+  );
 });
 program.command("scaffold" /* SCAFFOLD */).description("Scaffold a local project from an existing Extension").option("--extension-port <port>", "Extension dev server port (default: 6543)").option("--preview-port <port>", "Preview dev server port").option("--skip-install", "Skip package manager install").option("--skip-git", "Skip git initialization").action(async (options) => {
-  const token = await getToken();
-  render(/* @__PURE__ */ jsx17(App, { command: "scaffold" /* SCAFFOLD */, options, token }));
+  const auth2 = await ensureToken();
+  if (!auth2) {
+    return;
+  }
+  const { token, userId, orgId } = auth2;
+  render(
+    /* @__PURE__ */ jsx21(
+      App,
+      {
+        command: "scaffold" /* SCAFFOLD */,
+        options,
+        token,
+        orgId,
+        userId
+      }
+    )
+  );
 });
 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(async (extensionId, options) => {
-  const token = await getToken();
-  render(/* @__PURE__ */ jsx17(App, { command: "update" /* UPDATE */, initialExtensionId: extensionId, options, token }));
+  const auth2 = await ensureToken();
+  if (!auth2) {
+    return;
+  }
+  const { token, userId, orgId } = auth2;
+  render(
+    /* @__PURE__ */ jsx21(
+      App,
+      {
+        command: "update" /* UPDATE */,
+        initialExtensionId: extensionId,
+        options,
+        token,
+        userId,
+        orgId
+      }
+    )
+  );
 });
 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").action(async (options) => {
-  const token = await getToken();
-  render(/* @__PURE__ */ jsx17(DevApp, { options, token }), { exitOnCtrlC: false });
+  const auth2 = await ensureToken();
+  if (!auth2) {
+    return;
+  }
+  const { token, userId, orgId } = auth2;
+  render(
+    /* @__PURE__ */ jsx21(
+      DevApp,
+      {
+        options,
+        token,
+        userId,
+        orgId
+      }
+    ),
+    { exitOnCtrlC: false }
+  );
 });
 var DASHBOARD_URL = process.env.ADMIN_DASHBOARD_URL ?? "https://admin.stackablelabs.io";
 var auth = program.command("auth").description("Manage CLI authentication");
-var LOGIN_TIMEOUT_MS = 5 * 60 * 1e3;
 auth.command("login").description("Authenticate with Stackable via browser").action(async () => {
-  let resolveToken;
-  let rejectToken;
-  const tokenPromise = new Promise((resolve, reject) => {
-    resolveToken = resolve;
-    rejectToken = reject;
-  });
-  const server = createServer((req, res) => {
-    const url = new URL(req.url, "http://localhost");
-    if (url.pathname === "/callback") {
-      const error = url.searchParams.get("error");
-      if (error) {
-        res.writeHead(200, { "content-type": "text/html" });
-        res.end("<html><body><h2>Authentication failed \u2014 you can close this tab.</h2></body></html>");
-        rejectToken(new Error(error));
-        return;
-      }
-      const token2 = url.searchParams.get("token");
-      if (token2) {
-        res.writeHead(200, { "content-type": "text/html" });
-        res.end("<html><body><h2>CLI authenticated \u2014 you can close this tab.</h2></body></html>");
-        resolveToken(token2);
-      } else {
-        res.writeHead(400, { "content-type": "text/plain" });
-        res.end("Missing token");
-      }
-    } else {
-      res.writeHead(404);
-      res.end();
-    }
-  });
-  await new Promise((r) => server.listen(0, "127.0.0.1", r));
-  const port = server.address().port;
-  const callbackUrl = `http://localhost:${port}/callback`;
-  const loginUrl = `${DASHBOARD_URL}/cli-auth?callback=${encodeURIComponent(callbackUrl)}`;
-  console.log(`
-Opening browser to authenticate...
-  ${loginUrl}
-`);
-  await open(loginUrl);
-  const timeout = setTimeout(() => {
-    server.close();
-    rejectToken(new Error("Login timed out. Please try again."));
-  }, LOGIN_TIMEOUT_MS);
-  let token;
-  try {
-    token = await tokenPromise;
-  } catch (err) {
-    clearTimeout(timeout);
-    server.close();
-    console.error(err instanceof Error ? err.message : String(err));
-    process.exit(1);
-  }
-  clearTimeout(timeout);
-  server.close();
-  const [, payloadB64] = token.split(".");
-  const payload = JSON.parse(Buffer.from(payloadB64, "base64url").toString());
-  await writeAuthState({
-    token,
-    userId: payload.sub,
-    orgId: payload.orgId,
-    orgSlug: payload.orgSlug
-  });
-  console.log(`Logged in \u2014 org: ${payload.orgSlug ?? payload.orgId}`);
+  render(/* @__PURE__ */ jsx21(AuthLogin, { dashboardUrl: DASHBOARD_URL }));
 });
 auth.command("logout").description("Clear stored CLI credentials").action(async () => {
   await clearAuthState();
-  console.log("Logged out.");
+  render(/* @__PURE__ */ jsx21(AuthLogout, {}));
 });
 auth.command("status").description("Show current authentication status").action(async () => {
   const state = await readAuthState();
   if (!state) {
-    console.log("Not logged in. Run `stackable auth login`.");
+    render(
+      /* @__PURE__ */ jsx21(AuthStatus, { state: "not-logged-in" })
+    );
     return;
   }
   const [, payloadB64] = state.token.split(".");
   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()) {
-    console.log(`Session expired (${expiry.toLocaleDateString()}). Run \`stackable auth login\` to re-authenticate.`);
+    render(/* @__PURE__ */ jsx21(AuthStatus, { state: "expired", expiry }));
     return;
   }
-  console.log(`Logged in \u2014 org: ${state.orgSlug ?? state.orgId}${expiry ? `. Token expires: ${expiry.toLocaleDateString()}.` : ""}`);
+  render(
+    /* @__PURE__ */ jsx21(
+      AuthStatus,
+      {
+        state: "authenticated",
+        userId: state.userId,
+        orgId: state.orgId,
+        expiry
+      }
+    )
+  );
+});
+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__ */ jsx21(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.18.0",
+  "version": "1.20.0",
   "type": "module",
   "private": false,
   "bin": {
@@ -12,6 +12,8 @@
     "LICENSE"
   ],
   "dependencies": {
+    "@stackable-labs/lib-contracts": "workspace:*",
+    "adm-zip": "0.x",
     "cloudflared": "0.x",
     "commander": "12.x",
     "giget": "3.x",