@stackable-labs/cli-app-extension 1.18.0 → 1.19.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";
@@ -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,7 +1726,7 @@ var App = ({ command, token, initialName, initialExtensionId, options }) => {
   };
   switch (step) {
     case "app": {
-      return /* @__PURE__ */ jsx13(AppSelect, { token, onSubmit: handleAppSelect });
+      return /* @__PURE__ */ jsx13(AppSelect, { token, userId, orgId, onSubmit: handleAppSelect });
     }
     case "extensionSelect": {
       return /* @__PURE__ */ jsx13(
@@ -1856,7 +1866,7 @@ var App = ({ command, token, 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
@@ -1937,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,
@@ -1962,7 +1974,7 @@ var DevDashboard = ({
     }
   });
   return /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx15(Banner, {}),
+    /* @__PURE__ */ jsx15(Banner, { userId, orgId }),
     /* @__PURE__ */ jsxs15(
       StepShell,
       {
@@ -2030,7 +2042,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,6 +2135,15 @@ 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(
@@ -2140,6 +2161,8 @@ var DevApp = ({ token, options = {} }) => {
     return /* @__PURE__ */ jsx16(
       DevDashboard,
       {
+        userId,
+        orgId,
         extensionName: devContext.extensionName,
         extensionId: resolvedContext.extensionId,
         appId: resolvedContext.appId,
@@ -2158,6 +2181,13 @@ var DevApp = ({ token, 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";
@@ -2195,17 +2225,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 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";
@@ -2254,112 +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(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__ */ 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(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__ */ 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 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__ */ 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 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__ */ 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");
-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__ */ jsx20(AuthLogin, { dashboardUrl: DASHBOARD_URL }));
 });
 auth.command("logout").description("Clear stored CLI credentials").action(async () => {
   await clearAuthState();
-  console.log("Logged out.");
+  render(/* @__PURE__ */ jsx20(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__ */ 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()) {
-    console.log(`Session expired (${expiry.toLocaleDateString()}). Run \`stackable auth login\` to re-authenticate.`);
+    render(/* @__PURE__ */ jsx20(AuthStatus, { state: "expired", expiry }));
     return;
   }
-  console.log(`Logged in \u2014 org: ${state.orgSlug ?? state.orgId}${expiry ? `. Token expires: ${expiry.toLocaleDateString()}.` : ""}`);
+  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.18.0",
+  "version": "1.19.0",
   "type": "module",
   "private": false,
   "bin": {