@stackable-labs/cli-app-extension 1.17.0 → 1.19.0

package/dist/index.js

@@ -752,9 +752,17 @@ import { useEffect as useEffect2, useState as useState6 } from "react";
 // src/lib/api.ts
 var DEFAULT_ADMIN_API_URL = "https://api-use1.stackablelabs.io/admin";
 var getAdminApiBaseUrl = () => process.env.ADMIN_API_BASE_URL ?? DEFAULT_ADMIN_API_URL;
-var fetchApps = async () => {
+var CLI_CLIENT_NAME = "@stackable-labs/cli-app-extension";
+var authHeaders = (token) => ({
+  authorization: `Bearer ${token}`,
+  "content-type": "application/json",
+  "x-client-name": CLI_CLIENT_NAME
+});
+var fetchApps = async (token) => {
   const baseUrl = getAdminApiBaseUrl();
-  const res = await fetch(`${baseUrl}/app-extension`);
+  const res = await fetch(`${baseUrl}/app-extension`, {
+    headers: authHeaders(token)
+  });
   if (!res.ok) {
     throw new Error(`Failed to fetch apps${baseUrl !== DEFAULT_ADMIN_API_URL ? ` (from ${baseUrl})` : ""}: ${res.status} ${res.statusText}`);
   }
@@ -767,11 +775,11 @@ var fetchApps = async () => {
     iconUrl
   }));
 };
-var createExtensionRemote = async (appId, payload) => {
+var createExtensionRemote = async (appId, payload, token) => {
   const baseUrl = getAdminApiBaseUrl();
   const res = await fetch(`${baseUrl}/app-extension/${appId}/extensions`, {
     method: "POST",
-    headers: { "content-type": "application/json" },
+    headers: authHeaders(token),
     body: JSON.stringify(payload)
   });
   if (!res.ok) {
@@ -780,9 +788,11 @@ var createExtensionRemote = async (appId, payload) => {
   }
   return res.json();
 };
-var fetchExtensions = async (appId) => {
+var fetchExtensions = async (appId, token) => {
   const baseUrl = getAdminApiBaseUrl();
-  const res = await fetch(`${baseUrl}/app-extension/${appId}/extensions`);
+  const res = await fetch(`${baseUrl}/app-extension/${appId}/extensions`, {
+    headers: authHeaders(token)
+  });
   if (!res.ok) {
     throw new Error(`Failed to fetch Extensions: ${res.status} ${res.statusText}`);
   }
@@ -800,11 +810,11 @@ var fetchExtensions = async (appId) => {
     ])
   );
 };
-var updateExtension = async (appId, extensionId, payload) => {
+var updateExtension = async (appId, extensionId, payload, token) => {
   const baseUrl = getAdminApiBaseUrl();
   const res = await fetch(`${baseUrl}/app-extension/${appId}/extensions/${extensionId}`, {
     method: "PUT",
-    headers: { "content-type": "application/json" },
+    headers: authHeaders(token),
     body: JSON.stringify(payload)
   });
   if (!res.ok) {
@@ -848,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 = ({ 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().then(setApps).catch((err) => setError(err instanceof Error ? err.message : String(err))).finally(() => setLoading(false));
-  }, []);
+    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) {
@@ -907,7 +929,7 @@ var AppSelect = ({ 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() })
   ] });
 };
@@ -917,14 +939,14 @@ import { Box as Box12, Text as Text12, useInput as useInput7 } from "ink";
 import Spinner3 from "ink-spinner";
 import { useEffect as useEffect3, useState as useState7 } from "react";
 import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
-var ExtensionSelect = ({ appId, command, onSubmit, onBack }) => {
+var ExtensionSelect = ({ appId, token, command, onSubmit, onBack }) => {
   const [extensions, setExtensions] = useState7([]);
   const [loading, setLoading] = useState7(true);
   const [error, setError] = useState7();
   const [cursor, setCursor] = useState7(0);
   useEffect3(() => {
-    fetchExtensions(appId).then((byId) => setExtensions(Object.values(byId))).catch((err) => setError(err instanceof Error ? err.message : String(err))).finally(() => setLoading(false));
-  }, [appId]);
+    fetchExtensions(appId, token).then((byId) => setExtensions(Object.values(byId))).catch((err) => setError(err instanceof Error ? err.message : String(err))).finally(() => setLoading(false));
+  }, [appId, token]);
   useInput7((_, key) => {
     if (key.upArrow) {
       if (!loading && !error && extensions.length > 0) {
@@ -1074,6 +1096,7 @@ var readDevContext = async (projectRoot) => {
     appId: stackableEnv.APP_ID || null,
     extensionId: stackableEnv.EXTENSION_ID || null,
     appName: stackableEnv.APP_NAME || null,
+    orgId: stackableEnv.ORG_ID || null,
     extensionPort,
     previewPort
   };
@@ -1498,7 +1521,7 @@ var derivePermissions2 = (targets) => {
   }
   return [...permissions];
 };
-var App = ({ command, 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 ?? "");
@@ -1636,7 +1659,7 @@ var App = ({ command, initialName, initialExtensionId, options }) => {
           },
           bundleUrl: bundleUrl || void 0,
           enabled
-        });
+        }, token);
         updateStep(0, "done");
         setExtensionVersion(resolvedVersion);
         setStep("updateDone");
@@ -1664,7 +1687,7 @@ var App = ({ command, initialName, initialExtensionId, options }) => {
             allowedDomains: []
           },
           bundleUrl: `http://localhost:${extensionPort}`
-        });
+        }, token);
         resolvedExtensionId = created.id;
         setExtensionId(created.id);
         updateStep(0, "done");
@@ -1703,13 +1726,14 @@ var App = ({ command, initialName, initialExtensionId, options }) => {
   };
   switch (step) {
     case "app": {
-      return /* @__PURE__ */ jsx13(AppSelect, { onSubmit: handleAppSelect });
+      return /* @__PURE__ */ jsx13(AppSelect, { token, userId, orgId, onSubmit: handleAppSelect });
     }
     case "extensionSelect": {
       return /* @__PURE__ */ jsx13(
         ExtensionSelect,
         {
           appId: selectedApp.id,
+          token,
           command,
           onSubmit: handleExtensionSelect,
           onBack: goBack
@@ -1842,7 +1866,7 @@ var App = ({ command, initialName, initialExtensionId, options }) => {
 };
 
 // src/components/DevApp.tsx
-import { Box as Box16, Text as Text16 } from "ink";
+import { Box as Box16, Text as Text16, useInput as useInput9 } from "ink";
 import { useRef, useState as useState10, useEffect as useEffect6, useCallback as useCallback2 } from "react";
 
 // src/lib/tunnel.ts
@@ -1880,7 +1904,7 @@ var startDevServer = (projectRoot) => {
 import { Box as Box14, Text as Text14 } from "ink";
 import { useState as useState9, useEffect as useEffect4 } from "react";
 import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
-var DevSetup = ({ initialContext, onReady }) => {
+var DevSetup = ({ initialContext, token, onReady }) => {
   const [step, setStep] = useState9("app");
   const [selectedApp, setSelectedApp] = useState9(null);
   useEffect4(() => {
@@ -1902,7 +1926,7 @@ var DevSetup = ({ initialContext, 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, { onSubmit: handleAppSelect })
+      /* @__PURE__ */ jsx14(AppSelect, { token, onSubmit: handleAppSelect })
     ] });
   }
   return /* @__PURE__ */ jsxs14(Box14, { flexDirection: "column", children: [
@@ -1911,6 +1935,7 @@ var DevSetup = ({ initialContext, onReady }) => {
       ExtensionSelect,
       {
         appId: selectedApp?.id || initialContext.appId,
+        token,
         onSubmit: handleExtensionSelect
       }
     )
@@ -1922,6 +1947,8 @@ 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 = ({
+  userId,
+  orgId,
   extensionName,
   extensionId,
   appId,
@@ -1947,7 +1974,7 @@ var DevDashboard = ({
     }
   });
   return /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx15(Banner, {}),
+    /* @__PURE__ */ jsx15(Banner, { userId, orgId }),
     /* @__PURE__ */ jsxs15(
       StepShell,
       {
@@ -2015,7 +2042,7 @@ var DevDashboard = ({
 
 // src/components/DevApp.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
-var DevApp = ({ options = {} }) => {
+var DevApp = ({ token, userId, orgId, options = {} }) => {
   const [state, setState] = useState10("setup");
   const [devContext, setDevContext] = useState10(null);
   const [resolvedContext, setResolvedContext] = useState10(null);
@@ -2108,12 +2135,22 @@ var DevApp = ({ 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,
           onReady: handleSetupReady
         }
       );
@@ -2124,6 +2161,8 @@ var DevApp = ({ options = {} }) => {
     return /* @__PURE__ */ jsx16(
       DevDashboard,
       {
+        userId,
+        orgId,
         extensionName: devContext.extensionName,
         extensionId: resolvedContext.extensionId,
         appId: resolvedContext.appId,
@@ -2142,6 +2181,261 @@ var DevApp = ({ options = {} }) => {
   return /* @__PURE__ */ jsx16(Box16, { children: /* @__PURE__ */ jsx16(Text16, { children: "Loading..." }) });
 };
 
+// src/components/AuthLogin.tsx
+import { createServer } from "http";
+import { Box as Box17, Text as Text17, useApp as useApp2 } from "ink";
+import Spinner4 from "ink-spinner";
+import open from "open";
+import { useState as useState11, useEffect as useEffect7 } 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 { homedir } from "os";
+var AUTH_DIR = join4(homedir(), ".stackable");
+var AUTH_FILE = join4(AUTH_DIR, "auth.json");
+var readAuthState = async () => {
+  try {
+    const content = await readFile3(AUTH_FILE, "utf8");
+    return JSON.parse(content);
+  } catch {
+    return null;
+  }
+};
+var writeAuthState = async (state) => {
+  await mkdir(AUTH_DIR, { recursive: true, mode: 448 });
+  await writeFile3(AUTH_FILE, JSON.stringify(state, null, 2), { mode: 384 });
+};
+var clearAuthState = async () => {
+  try {
+    await unlink(AUTH_FILE);
+  } catch {
+  }
+};
+var decodeJwtPayload = (token) => {
+  try {
+    const [, payload] = token.split(".");
+    if (!payload) return null;
+    const json = Buffer.from(payload, "base64url").toString("utf8");
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+};
+var getToken = async () => {
+  const state = await readAuthState();
+  if (!state) {
+    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-app-extension auth login` to re-authenticate.");
+    }
+  }
+  return state.token;
+};
+
+// src/components/AuthLogin.tsx
+import { jsx as jsx17, jsxs as jsxs16 } 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 } = useApp2();
+  const [state, setState] = useState11("waiting");
+  const [loginUrl, setLoginUrl] = useState11("");
+  const [userIdLabel, setUserIdLabel] = useState11("");
+  const [orgIdLabel, setOrgIdLabel] = useState11("");
+  const [errorMessage, setErrorMessage] = useState11("");
+  useEffect7(() => {
+    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__ */ jsxs16(Box17, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx17(Banner, {}),
+    /* @__PURE__ */ jsxs16(StepShell, { title: "Authenticate with Stackable", children: [
+      state === "waiting" && /* @__PURE__ */ jsxs16(Box17, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs16(Box17, { gap: 1, children: [
+          /* @__PURE__ */ jsx17(Text17, { color: "cyan", children: /* @__PURE__ */ jsx17(Spinner4, { type: "dots" }) }),
+          /* @__PURE__ */ jsx17(Text17, { children: "Waiting for browser authentication..." })
+        ] }),
+        loginUrl && /* @__PURE__ */ jsxs16(Text17, { dimColor: true, children: [
+          "  ",
+          loginUrl
+        ] })
+      ] }),
+      state === "success" && /* @__PURE__ */ jsxs16(Box17, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs16(Box17, { flexDirection: "column", children: [
+          /* @__PURE__ */ jsxs16(Box17, { gap: 2, children: [
+            /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "User:" }),
+            /* @__PURE__ */ jsx17(Text17, { color: "cyan", children: userIdLabel })
+          ] }),
+          /* @__PURE__ */ jsxs16(Box17, { gap: 2, children: [
+            /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "Org: " }),
+            /* @__PURE__ */ jsx17(Text17, { color: "cyan", children: orgIdLabel })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs16(Box17, { gap: 1, children: [
+          /* @__PURE__ */ jsx17(Text17, { color: "green", bold: true, children: "\u2714" }),
+          /* @__PURE__ */ jsx17(Text17, { bold: true, children: "Authenticated" })
+        ] })
+      ] }),
+      state === "error" && /* @__PURE__ */ jsxs16(Box17, { gap: 1, children: [
+        /* @__PURE__ */ jsx17(Text17, { color: "red", children: "\u2716" }),
+        /* @__PURE__ */ jsx17(Text17, { children: errorMessage })
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/AuthLogout.tsx
+import { useEffect as useEffect8 } from "react";
+import { Box as Box18, Text as Text18, useApp as useApp3 } from "ink";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+var AuthLogout = () => {
+  const { exit } = useApp3();
+  useEffect8(() => {
+    exit();
+  }, [exit]);
+  return /* @__PURE__ */ jsxs17(Box18, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx18(Banner, {}),
+    /* @__PURE__ */ jsx18(StepShell, { title: "Authenticate with Stackable", children: /* @__PURE__ */ jsxs17(Box18, { gap: 1, children: [
+      /* @__PURE__ */ jsx18(Text18, { color: "green", bold: true, children: "\u2714" }),
+      /* @__PURE__ */ jsx18(Text18, { bold: true, children: "Logged out" })
+    ] }) })
+  ] });
+};
+
+// src/components/AuthStatus.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 AuthStatus = ({ state, userId, orgId, expiry }) => {
+  const { exit } = useApp4();
+  useEffect9(() => {
+    exit();
+  }, [exit]);
+  return /* @__PURE__ */ jsxs18(Box19, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx19(Banner, {}),
+    /* @__PURE__ */ jsxs18(StepShell, { title: "Authenticate with Stackable", children: [
+      state === "authenticated" && /* @__PURE__ */ jsxs18(Box19, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs18(Box19, { flexDirection: "column", children: [
+          /* @__PURE__ */ jsxs18(Box19, { gap: 2, children: [
+            /* @__PURE__ */ jsx19(Text19, { dimColor: true, children: "User:" }),
+            /* @__PURE__ */ jsx19(Text19, { color: "cyan", children: userId })
+          ] }),
+          /* @__PURE__ */ jsxs18(Box19, { gap: 2, children: [
+            /* @__PURE__ */ jsx19(Text19, { dimColor: true, children: "Org: " }),
+            /* @__PURE__ */ jsx19(Text19, { color: "cyan", children: orgId })
+          ] }),
+          expiry && /* @__PURE__ */ jsxs18(Box19, { gap: 2, children: [
+            /* @__PURE__ */ jsx19(Text19, { dimColor: true, children: "Exp: " }),
+            /* @__PURE__ */ jsx19(Text19, { color: "cyan", children: expiry.toLocaleDateString() })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs18(Box19, { gap: 1, children: [
+          /* @__PURE__ */ jsx19(Text19, { color: "green", bold: true, children: "\u2714" }),
+          /* @__PURE__ */ jsx19(Text19, { bold: true, children: "Authenticated" })
+        ] })
+      ] }),
+      state === "expired" && /* @__PURE__ */ jsxs18(Box19, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs18(Box19, { gap: 1, children: [
+          /* @__PURE__ */ jsx19(Text19, { color: "red", children: "\u2716" }),
+          /* @__PURE__ */ jsxs18(Text19, { children: [
+            "Session expired",
+            expiry ? ` (${expiry.toLocaleDateString()})` : ""
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx19(Text19, { dimColor: true, children: "Run `stackable-app-extension auth login` to re-authenticate." })
+      ] }),
+      state === "not-logged-in" && /* @__PURE__ */ jsxs18(Box19, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs18(Box19, { gap: 1, children: [
+          /* @__PURE__ */ jsx19(Text19, { color: "red", children: "\u2716" }),
+          /* @__PURE__ */ jsx19(Text19, { children: "Not logged in" })
+        ] }),
+        /* @__PURE__ */ jsx19(Text19, { 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";
@@ -2190,21 +2484,77 @@ var checkForUpdate = (currentVersion) => {
 };
 
 // src/index.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx20 } 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__ */ jsx20(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((name, options) => {
-  render(/* @__PURE__ */ jsx17(App, { command: "create" /* CREATE */, initialName: name, options }));
+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 auth2 = await ensureToken();
+  if (!auth2) {
+    return;
+  }
+  const { token, userId, orgId } = auth2;
+  render(/* @__PURE__ */ jsx20(App, { command: "create" /* CREATE */, initialName: name, options, token, userId, orgId }));
 });
-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((options) => {
-  render(/* @__PURE__ */ jsx17(App, { command: "scaffold" /* SCAFFOLD */, options }));
+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 auth2 = await ensureToken();
+  if (!auth2) {
+    return;
+  }
+  const { token, userId, orgId } = auth2;
+  render(/* @__PURE__ */ jsx20(App, { command: "scaffold" /* SCAFFOLD */, options, token, userId, orgId }));
+});
+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 auth2 = await ensureToken();
+  if (!auth2) {
+    return;
+  }
+  const { token, userId, orgId } = auth2;
+  render(/* @__PURE__ */ jsx20(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 auth2 = await ensureToken();
+  if (!auth2) {
+    return;
+  }
+  const { token, userId, orgId } = auth2;
+  render(/* @__PURE__ */ jsx20(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");
+auth.command("login").description("Authenticate with Stackable via browser").action(async () => {
+  render(/* @__PURE__ */ jsx20(AuthLogin, { dashboardUrl: DASHBOARD_URL }));
 });
-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 }));
+auth.command("logout").description("Clear stored CLI credentials").action(async () => {
+  await clearAuthState();
+  render(/* @__PURE__ */ jsx20(AuthLogout, {}));
 });
-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((options) => {
-  render(/* @__PURE__ */ jsx17(DevApp, { options }), { exitOnCtrlC: false });
+auth.command("status").description("Show current authentication status").action(async () => {
+  const state = await readAuthState();
+  if (!state) {
+    render(/* @__PURE__ */ jsx20(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()) {
+    render(/* @__PURE__ */ jsx20(AuthStatus, { state: "expired", expiry }));
+    return;
+  }
+  render(/* @__PURE__ */ jsx20(AuthStatus, { state: "authenticated", userId: state.userId, orgId: state.orgId, expiry }));
 });
 program.parse(process.argv.filter((arg) => arg !== "--"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackable-labs/cli-app-extension",
-  "version": "1.17.0",
+  "version": "1.19.0",
   "type": "module",
   "private": false,
   "bin": {
@@ -19,6 +19,7 @@
     "ink-spinner": "5.x",
     "ink-text-input": "6.x",
     "nypm": "0.4.x",
+    "open": "10.x",
     "react": "18.x"
   },
   "description": "CLI for scaffolding Stackable extension projects.",