@sudajs/cli 0.3.0 → 0.4.1

package/dist/index.js

@@ -7,11 +7,9 @@ import { fileURLToPath, pathToFileURL } from 'url';
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
 import { createAgentPageSchemaOutput, checkThemeModule, formatThemeCheckResult, createThemeAgentManifest, validateAgentPageContentWithManifest, agentValidationResultSchema, createPageDataFromAgentContent, findAgentSection, createAgentComponentSchemaOutput, agentPageSchemaOutputSchema, agentComponentOutputSchema } from '@sudajs/theme-engine';
-import { extractLayoutChrome, ThemeRender } from '@sudajs/theme-engine/server';
+import { FileSystemThemeRegistry } from '@sudajs/theme-engine/server';
 import { Command } from 'commander';
 import { build, context } from 'esbuild';
-import { createElement } from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
 import { z } from 'zod';
 import os from 'os';
 
@@ -43,9 +41,42 @@ async function clearAuthConfig() {
     }
   }
 }
+function protocolForHost(host) {
+  return host.includes("localhost") || host.includes("127.0.0.1") ? "http" : "https";
+}
+var CliAuthExpiredError = class extends Error {
+  code;
+  constructor(code, message) {
+    super(message);
+    this.name = "CliAuthExpiredError";
+    this.code = code;
+  }
+};
+async function cliAuthFetch(pathname, init = {}) {
+  const config = await readAuthConfig();
+  if (!config) {
+    throw new CliAuthExpiredError(
+      "unauthorized",
+      "Not logged in. Run `suda auth login` to authenticate first."
+    );
+  }
+  const baseUrl = `${protocolForHost(config.host)}://${config.host}`;
+  const headers = new Headers(init.headers);
+  headers.set("Authorization", `Bearer ${config.sessionToken}`);
+  const res = await fetch(`${baseUrl}${pathname}`, { ...init, headers });
+  if (res.status === 401) {
+    const body = await res.clone().json().catch(() => ({}));
+    const code = ["token_invalid", "token_revoked", "token_expired"].includes(body.error ?? "") ? body.error : "unauthorized";
+    await clearAuthConfig();
+    throw new CliAuthExpiredError(
+      code,
+      body.message ?? "Authentication is no longer valid. Run `suda auth login` to authenticate again."
+    );
+  }
+  return res;
+}
 async function login(host = "app.sudayun.cn") {
-  const protocol = host.includes("localhost") || host.includes("127.0.0.1") ? "http" : "https";
-  const baseUrl = `${protocol}://${host}`;
+  const baseUrl = `${protocolForHost(host)}://${host}`;
   console.log(`Requesting device authorization from ${baseUrl}...`);
   const deviceRes = await fetch(`${baseUrl}/api/cli-auth/device`, {
     method: "POST"
@@ -97,30 +128,26 @@ async function status() {
     console.log("Not logged in. Run `suda auth login` to authenticate.");
     return;
   }
-  const protocol = config.host.includes("localhost") || config.host.includes("127.0.0.1") ? "http" : "https";
   let res;
   try {
-    res = await fetch(`${protocol}://${config.host}/api/auth/get-session`, {
-      headers: {
-        Authorization: `Bearer ${config.sessionToken}`
-      }
-    });
-  } catch {
+    res = await cliAuthFetch("/api/cli-auth/whoami");
+  } catch (err) {
+    if (err instanceof CliAuthExpiredError) {
+      console.log(err.message);
+      return;
+    }
     console.error(`Failed to connect to ${config.host}.`);
     return;
   }
   if (!res.ok) {
-    console.log("Session expired or invalid. Please run `suda auth login` again.");
-    await clearAuthConfig();
-    return;
-  }
-  const session = await res.json();
-  if (!session?.user) {
-    console.log("Session expired or invalid. Please run `suda auth login` again.");
-    await clearAuthConfig();
+    console.error(
+      `Failed to verify session (${res.status} ${res.statusText}). Try again later.`
+    );
     return;
   }
-  console.log(`Logged in as ${session.user.email || session.user.name} on ${config.host}`);
+  const data = await res.json();
+  const label = data.user?.email ?? data.user?.name ?? "your account";
+  console.log(`Logged in as ${label} on ${config.host}`);
 }
 async function logout() {
   const config = await readAuthConfig();
@@ -128,6 +155,17 @@ async function logout() {
     console.log("Not logged in.");
     return;
   }
+  try {
+    await cliAuthFetch("/api/cli-auth/revoke", { method: "POST" });
+  } catch (err) {
+    if (err instanceof CliAuthExpiredError) {
+      console.log("Logged out (token was already invalid).");
+      return;
+    }
+    console.warn(
+      `Could not contact ${config.host} to revoke token. The token will be cleared locally only.`
+    );
+  }
   await clearAuthConfig();
   console.log("Logged out successfully.");
 }
@@ -327,7 +365,7 @@ async function readJsonIfExists(filePath) {
   }
   return readJson(filePath);
 }
-function protocolForHost(host) {
+function protocolForHost2(host) {
   return host.includes("localhost") || host.includes("127.0.0.1") ? "http" : "https";
 }
 async function requireCliBaseUrl() {
@@ -336,7 +374,7 @@ async function requireCliBaseUrl() {
     throw new Error("Not logged in. Run `suda auth login` to authenticate first.");
   }
   return {
-    baseUrl: `${protocolForHost(config.host)}://${config.host}`,
+    baseUrl: `${protocolForHost2(config.host)}://${config.host}`,
     token: config.sessionToken
   };
 }
@@ -526,11 +564,12 @@ function runThemeCheck(theme) {
   }
   return result.ok;
 }
-async function watchTheme(root, skipThemeBuild) {
+async function watchTheme(root, skipThemeBuild, port) {
   if (!skipThemeBuild) {
     await runThemePackageBuild(root);
   }
   await buildServerBundle(root);
+  const theme = await validateTheme(root);
   const entryPoint = await findClientEntry(root);
   await mkdir(path2.join(root, "dist"), { recursive: true });
   const hostReactShimPlugin = createHostReactShimPlugin();
@@ -549,7 +588,8 @@ async function watchTheme(root, skipThemeBuild) {
     treeShaking: true
   });
   await context$1.watch();
-  console.log("watching theme runtime; press Ctrl+C to stop");
+  const handle = await startPreviewServer(theme, port);
+  console.log(`watching theme runtime; previewing at ${handle.url}`);
   await new Promise(() => void 0);
 }
 function createWatchLogPlugin(label) {
@@ -573,27 +613,65 @@ function createWatchLogPlugin(label) {
     }
   };
 }
-function pickStarterPage(theme) {
+var PREVIEW_PUBLIC_BASE_PATH = "/api/themes";
+function pickStarterSlug(theme) {
   const pages = theme.module.starterPages;
   if (pages.length === 0) {
     return null;
   }
-  return pages.find((page) => page.isHome) ?? pages[0] ?? null;
+  return (pages.find((page) => page.isHome) ?? pages[0])?.slug ?? null;
+}
+function findStarterPage(theme, slug) {
+  return theme.module.starterPages.find((page) => page.slug === slug) ?? null;
 }
 function escapeHtml(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function renderStarterPageHtml(theme, page) {
-  const chrome = extractLayoutChrome(theme.module.defaultLayout);
-  const body = renderToStaticMarkup(
-    createElement(ThemeRender, {
+function createPreviewAssetResolver(resolveAssetPath) {
+  return (value) => {
+    return resolveAssetPath(value, {
+      legacyResolve: (key) => {
+        if (key.startsWith("themes/")) {
+          return `${PREVIEW_PUBLIC_BASE_PATH}/${key.slice("themes/".length)}`;
+        }
+        return void 0;
+      }
+    });
+  };
+}
+async function loadThemeScopedRenderer(themeRoot) {
+  const themeRequire = createRequire(path2.join(themeRoot, "package.json"));
+  const reactPath = themeRequire.resolve("react");
+  const reactDomServerPath = themeRequire.resolve("react-dom/server");
+  const themeEngineServerPath = themeRequire.resolve("@sudajs/theme-engine/server");
+  const [reactModule, reactDomServerModule, themeEngineServerModule] = await Promise.all([
+    import(pathToFileURL(reactPath).href),
+    import(pathToFileURL(reactDomServerPath).href),
+    import(pathToFileURL(themeEngineServerPath).href)
+  ]);
+  return {
+    ThemeRender: themeEngineServerModule.ThemeRender,
+    extractLayoutChrome: themeEngineServerModule.extractLayoutChrome,
+    resolveAssetPath: themeEngineServerModule.resolveAssetPath,
+    createElement: reactModule.createElement,
+    renderToStaticMarkup: reactDomServerModule.renderToStaticMarkup
+  };
+}
+function renderStarterPageHtml(theme, resolved, page, renderer) {
+  const chrome = renderer.extractLayoutChrome(theme.module.defaultLayout);
+  const metadata = {
+    resolveAssetUrl: createPreviewAssetResolver(renderer.resolveAssetPath)
+  };
+  const body = renderer.renderToStaticMarkup(
+    renderer.createElement(renderer.ThemeRender, {
       theme: theme.module,
       pageData: page.data,
-      layoutData: theme.module.defaultLayout
+      layoutData: theme.module.defaultLayout,
+      metadata
     })
   );
   const cssVarStyle = Object.entries(chrome.cssVariables).map(([key, value]) => `${key}: ${value};`).join(" ");
-  const stylesheetTag = theme.stylesheetPath ? '<link rel="stylesheet" href="/styles.css" />' : "";
+  const stylesheetTag = resolved.runtime?.stylesheetUrl ? `<link rel="stylesheet" href="${escapeHtml(resolved.runtime.stylesheetUrl)}" />` : "";
   const customHead = chrome.customHeadCode ?? "";
   const customBody = chrome.customBodyCode ?? "";
   return [
@@ -613,40 +691,129 @@ function renderStarterPageHtml(theme, page) {
     "</html>"
   ].join("");
 }
+function renderPreviewShellHtml(theme, activeSlug) {
+  const items = theme.module.starterPages.map((page) => {
+    const slug = page.slug;
+    const label = `${page.title}${page.isHome ? " (home)" : ""}`;
+    const active = slug === activeSlug;
+    const href = `/?page=${encodeURIComponent(slug)}`;
+    const className = active ? "suda-preview-tab suda-preview-tab--active" : "suda-preview-tab";
+    return `<a class="${className}" href="${escapeHtml(href)}" target="_self">${escapeHtml(label)}</a>`;
+  }).join("");
+  const frameSrc = `/pages/${encodeURIComponent(activeSlug)}`;
+  return [
+    "<!doctype html>",
+    '<html lang="en">',
+    "<head>",
+    '<meta charset="utf-8" />',
+    '<meta name="viewport" content="width=device-width, initial-scale=1" />',
+    `<title>${escapeHtml(theme.module.manifest.name)} \u2014 preview</title>`,
+    "<style>",
+    "html,body{margin:0;height:100%;font-family:system-ui,sans-serif;background:#0b0d12;color:#e6e8ee;}",
+    ".suda-preview-bar{display:flex;flex-wrap:wrap;gap:.25rem;padding:.5rem .75rem;background:#0b0d12;border-bottom:1px solid #1f2330;position:sticky;top:0;z-index:10;}",
+    ".suda-preview-tab{display:inline-flex;align-items:center;padding:.35rem .75rem;border-radius:.5rem;font-size:.875rem;color:#c9cdd6;text-decoration:none;border:1px solid transparent;}",
+    ".suda-preview-tab:hover{background:#1a1d27;}",
+    ".suda-preview-tab--active{background:#222633;color:#fff;border-color:#2c3142;}",
+    ".suda-preview-frame{display:block;border:0;width:100%;height:calc(100vh - 2.5rem);background:#fff;}",
+    "</style>",
+    "</head>",
+    "<body>",
+    `<nav class="suda-preview-bar">${items}</nav>`,
+    `<iframe class="suda-preview-frame" src="${escapeHtml(frameSrc)}" title="theme preview"></iframe>`,
+    "</body>",
+    "</html>"
+  ].join("");
+}
 async function startPreviewServer(theme, port) {
   const { createServer } = await import('http');
-  const starterPage = pickStarterPage(theme);
+  const renderer = await loadThemeScopedRenderer(theme.root);
+  const registry = new FileSystemThemeRegistry({
+    publicBasePath: PREVIEW_PUBLIC_BASE_PATH,
+    artifacts: [
+      {
+        rootPath: theme.root,
+        serverEntryPath: theme.serverEntryPath,
+        module: theme.module
+      }
+    ]
+  });
+  const themeKey = theme.module.manifest.key;
+  const themeVersion = theme.module.manifest.version;
+  const assetPathPrefix = `${PREVIEW_PUBLIC_BASE_PATH}/${themeKey}/${themeVersion}/assets/`;
+  const clientRuntimePrefix = `${PREVIEW_PUBLIC_BASE_PATH}/${themeKey}/${themeVersion}/runtime/client`;
   const server = createServer((request, response) => {
     void (async () => {
       const url = new URL(request.url ?? "/", `http://localhost:${port}`);
       const pathname = url.pathname;
       if (pathname === "/" || pathname === "/index.html") {
-        if (!starterPage) {
+        const fallbackSlug = pickStarterSlug(theme);
+        if (!fallbackSlug) {
           response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
-          response.end("No starter page available for preview.");
+          response.end("No starter pages declared by this theme.");
           return;
         }
+        const requested = url.searchParams.get("page");
+        const activeSlug = requested && findStarterPage(theme, requested) ? requested : fallbackSlug;
         response.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
-        response.end(renderStarterPageHtml(theme, starterPage));
+        response.end(renderPreviewShellHtml(theme, activeSlug));
         return;
       }
-      if (pathname === "/styles.css" && theme.stylesheetPath) {
-        response.writeHead(200, { "Content-Type": "text/css; charset=utf-8" });
-        response.end(await readFile(theme.stylesheetPath));
+      if (pathname.startsWith("/pages/")) {
+        const slug = decodeURIComponent(pathname.slice("/pages/".length));
+        const starter = findStarterPage(theme, slug);
+        if (!starter) {
+          response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
+          response.end(`Unknown starter page: ${slug}`);
+          return;
+        }
+        const resolved = await registry.resolve(themeKey, themeVersion);
+        if (!resolved) {
+          response.writeHead(500, { "Content-Type": "text/plain; charset=utf-8" });
+          response.end("Failed to resolve theme via FileSystemThemeRegistry.");
+          return;
+        }
+        const html = renderStarterPageHtml(theme, resolved, starter, renderer);
+        response.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+        response.end(html);
         return;
       }
-      const relativePath = pathname.replace(/^\/+/, "");
-      const filePath = path2.resolve(theme.root, relativePath);
-      const normalizedRoot = path2.resolve(theme.root) + path2.sep;
-      if (!filePath.startsWith(normalizedRoot) || !await pathExists(filePath)) {
-        response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
-        response.end("Not found");
+      if (pathname.startsWith(assetPathPrefix)) {
+        const relativePath = decodeURIComponent(pathname.slice(assetPathPrefix.length));
+        const filePath = await registry.resolveAssetPath(themeKey, themeVersion, relativePath);
+        if (!filePath) {
+          response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
+          response.end("Not found");
+          return;
+        }
+        const body = await readFile(filePath);
+        response.writeHead(200, {
+          "Content-Type": contentTypeFor(relativePath),
+          "Cache-Control": "no-cache"
+        });
+        response.end(body);
         return;
       }
-      response.writeHead(200, { "Content-Type": contentTypeFor(relativePath) });
-      response.end(await readFile(filePath));
+      if (pathname === clientRuntimePrefix) {
+        const filePath = await registry.resolveClientEntryPath(themeKey, themeVersion);
+        if (!filePath) {
+          response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
+          response.end("Theme has no client runtime bundle.");
+          return;
+        }
+        const body = await readFile(filePath);
+        response.writeHead(200, {
+          "Content-Type": "application/javascript; charset=utf-8",
+          "Cache-Control": "no-cache"
+        });
+        response.end(body);
+        return;
+      }
+      response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
+      response.end("Not found");
     })().catch((error) => {
-      response.writeHead(500, { "Content-Type": "text/plain; charset=utf-8" });
+      if (!response.headersSent) {
+        response.writeHead(500, { "Content-Type": "text/plain; charset=utf-8" });
+      }
       response.end(error instanceof Error ? error.message : "Internal error");
     });
   });
@@ -670,14 +837,6 @@ async function startPreviewServer(theme, port) {
     })
   };
 }
-async function previewTheme(root, port) {
-  const theme = await buildTheme(root, false);
-  const handle = await startPreviewServer(theme, port);
-  console.log(
-    `previewing ${theme.module.manifest.key}@${theme.module.manifest.version} at ${handle.url}`
-  );
-  await new Promise(() => void 0);
-}
 var DEFAULT_SCREENSHOT_RELATIVE = path2.join("dist", "preview", "desktop.png");
 function parsePositiveInt(value, fallback) {
   if (!value) {
@@ -1173,6 +1332,24 @@ async function checksum(files) {
   }
   return hash.digest("hex");
 }
+async function formatHttpErrorBody(res) {
+  const fallback = `${res.status} ${res.statusText}`;
+  const body = await res.json().catch(() => null);
+  if (!body) {
+    return fallback;
+  }
+  const message = body.error ?? fallback;
+  if (Array.isArray(body.issues) && body.issues.length > 0) {
+    const lines = body.issues.map((issue) => {
+      const pathSegments = Array.isArray(issue.path) ? issue.path : [];
+      const where = pathSegments.length > 0 ? pathSegments.join(".") : "<root>";
+      return `  - ${where}: ${issue.message ?? "invalid"}`;
+    });
+    return `${message}
+${lines.join("\n")}`;
+  }
+  return message;
+}
 async function publishTheme(root, skipBuild, skipCheck) {
   const theme = skipBuild ? await validateTheme(root) : await buildTheme(root, false);
   if (!skipCheck) {
@@ -1191,7 +1368,7 @@ async function publishTheme(root, skipBuild, skipCheck) {
   if (!config) {
     throw new Error("Not logged in. Run `suda auth login` to authenticate first.");
   }
-  const baseUrl = `${protocolForHost(config.host)}://${config.host}`;
+  const baseUrl = `${protocolForHost2(config.host)}://${config.host}`;
   const { key, version } = theme.module.manifest;
   const intentRes = await fetch(`${baseUrl}/api/cli/themes/publish-intent`, {
     method: "POST",
@@ -1206,8 +1383,9 @@ async function publishTheme(root, skipBuild, skipCheck) {
     })
   });
   if (!intentRes.ok) {
-    const errorData = await intentRes.json().catch(() => ({}));
-    throw new Error(`Failed to get publish intent: ${errorData.error || intentRes.statusText}`);
+    throw new Error(
+      `Failed to get publish intent: ${await formatHttpErrorBody(intentRes)}`
+    );
   }
   const { urls } = await intentRes.json();
   for (const file of files) {
@@ -1254,8 +1432,9 @@ async function publishTheme(root, skipBuild, skipCheck) {
     })
   });
   if (!completeRes.ok) {
-    const errorData = await completeRes.json().catch(() => ({}));
-    throw new Error(`Failed to complete publish: ${errorData.error || completeRes.statusText}`);
+    throw new Error(
+      `Failed to complete publish: ${await formatHttpErrorBody(completeRes)}`
+    );
   }
   console.log(`published ${key}@${version}`);
 }
@@ -1328,8 +1507,7 @@ async function initTheme(target) {
           build: "pnpm run build:src && suda theme build --theme-root . --skip-theme-build",
           dev: "suda theme dev --theme-root . --skip-theme-build",
           typecheck: "tsc -p tsconfig.json --noEmit",
-          validate: "suda theme validate --theme-root .",
-          preview: "suda theme preview --theme-root ."
+          validate: "suda theme validate --theme-root ."
         },
         dependencies: {
           "@sudajs/theme-engine": cliPackageVersions.themeEngine
@@ -1931,7 +2109,7 @@ pnpm install
 pnpm typecheck
 pnpm build               # tsc + suda theme build --skip-theme-build (runs AI check)
 pnpm validate
-pnpm preview
+pnpm dev                 # watch and serve local theme artifact files
 suda theme check         # AI metadata check only
 suda agent theme describe local --theme-root .
 suda agent section schema --theme local --section Hero --theme-root .
@@ -1964,8 +2142,7 @@ pnpm install
 \`\`\`bash
 pnpm typecheck      # type-check sources
 pnpm build          # tsc + suda theme build (server bundle + client runtime + manifest)
-pnpm dev            # watch the browser runtime
-pnpm preview        # build and preview the home starter page
+pnpm dev            # watch the browser runtime and start preview server
 pnpm validate       # validate the dist artifact
 \`\`\`
 
@@ -2028,12 +2205,13 @@ function buildProgram() {
       process.exitCode = 1;
     }
   });
-  theme.command("dev").description("Watch and rebuild the browser runtime.").option("--theme-root <path>", "Theme source/artifact root.").option("--skip-theme-build", "Skip the theme package build script.").action(async (options) => {
-    await watchTheme(resolveThemeRoot(options), options.skipThemeBuild === true);
-  });
-  theme.command("preview").description("Build and serve the local theme artifact files.").option("--theme-root <path>", "Theme source/artifact root.").option("--port <port>", "Preview server port.", "4177").action(async (options) => {
+  theme.command("dev").description("Watch and rebuild the browser runtime, and serve the local theme artifact files.").option("--theme-root <path>", "Theme source/artifact root.").option("--skip-theme-build", "Skip the theme package build script.").option("--port <port>", "Preview server port.", "4177").action(async (options) => {
     const port = Number(options.port ?? "4177");
-    await previewTheme(resolveThemeRoot(options), Number.isFinite(port) ? port : 4177);
+    await watchTheme(
+      resolveThemeRoot(options),
+      options.skipThemeBuild === true,
+      Number.isFinite(port) ? port : 4177
+    );
   });
   theme.command("screenshot").description(
     "Capture a desktop preview screenshot of the home starter page using Playwright."