@storifycli/cli 0.1.1 → 0.2.0

package/dist/cli.js

@@ -301,8 +301,86 @@ async function runInteractiveLoginFlow(options) {
 }
 
 // src/lib/ui.ts
-import pc from "picocolors";
+import pc2 from "picocolors";
 import ora from "ora";
+
+// src/lib/brand-banner.ts
+import pc from "picocolors";
+var brandName = "Storify";
+var brandTagline = "Theme development toolkit";
+var LOGO_FACE = [
+  " \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557   \u2588\u2588\u2557",
+  " \u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2588\u2588\u2554\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u255A\u2588\u2588\u2557 \u2588\u2588\u2554\u255D",
+  " \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557   \u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2557   \u255A\u2588\u2588\u2588\u2588\u2554\u255D ",
+  " \u255A\u2550\u2550\u2550\u2550\u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u255D    \u255A\u2588\u2588\u2554\u255D  ",
+  " \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551   \u2588\u2588\u2551   \u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2551\u2588\u2588\u2551        \u2588\u2588\u2551   ",
+  " \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D   \u255A\u2550\u255D    \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u255D  \u255A\u2550\u255D\u255A\u2550\u255D\u255A\u2550\u255D        \u255A\u2550\u255D   "
+];
+var LOGO_SHADOW = ["  \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580 \u2580\u2580\u2580\u2580\u2580\u2580\u2580\u2580 \u2580\u2580  \u2580\u2580"];
+function supportsColor() {
+  return pc.isColorSupported;
+}
+function colorFace(line) {
+  if (!supportsColor()) return line;
+  return pc.bold(pc.cyan(line));
+}
+function colorShadow(line) {
+  if (!supportsColor()) return line;
+  return pc.dim(pc.blue(line));
+}
+function colorAccent(line) {
+  if (!supportsColor()) return line;
+  return pc.bold(pc.white(line));
+}
+function paintMuted(text3) {
+  if (!supportsColor()) return text3;
+  return pc.dim(text3);
+}
+function paintAccent(text3) {
+  if (!supportsColor()) return text3;
+  return pc.magenta(text3);
+}
+function paintBrand(text3) {
+  if (!supportsColor()) return text3;
+  return pc.bold(pc.cyan(text3));
+}
+function centerText(text3, width) {
+  const trimmed = text3.length > width ? text3.slice(0, width) : text3;
+  const pad = Math.max(0, Math.floor((width - trimmed.length) / 2));
+  return `${" ".repeat(pad)}${trimmed}${" ".repeat(Math.max(0, width - pad - trimmed.length))}`;
+}
+function printPlatformBanner(subtitle) {
+  const logoWidth = LOGO_FACE[0].length;
+  const rule = "\u2550".repeat(logoWidth);
+  const tagline = subtitle || "Theme live preview";
+  console.log("");
+  console.log(colorShadow(`   ${rule}`));
+  for (const line of LOGO_SHADOW) {
+    console.log(colorShadow(` ${line}`));
+  }
+  for (const line of LOGO_FACE) {
+    console.log(colorFace(` ${line}`));
+  }
+  console.log(colorShadow(`   ${rule}`));
+  console.log("");
+  console.log(paintAccent(` ${centerText(tagline, logoWidth)}`));
+  console.log(paintMuted(` ${centerText(brandTagline, logoWidth)}`));
+  console.log("");
+  console.log(colorAccent(` ${"\u2593".repeat(logoWidth)}`));
+  console.log("");
+}
+function printBannerWithLogo(version2) {
+  console.log("");
+  for (const line of LOGO_FACE) {
+    console.log(colorFace(` ${line}`));
+  }
+  console.log("");
+  console.log(paintBrand(` ${centerText(`${brandName} CLI  v${version2}`, LOGO_FACE[0].length)}`));
+  console.log(paintMuted(` ${centerText(brandTagline, LOGO_FACE[0].length)}`));
+  console.log("");
+}
+
+// src/lib/ui.ts
 var brand = {
   name: "Storify",
   cli: "storify",
@@ -311,26 +389,26 @@ var brand = {
 function isInteractive() {
   return Boolean(process.stdin.isTTY && process.stdout.isTTY && !process.env.CI);
 }
-function supportsColor() {
-  return pc.isColorSupported;
+function supportsColor2() {
+  return pc2.isColorSupported;
 }
 function paint(text3, tone) {
-  if (!supportsColor()) return text3;
+  if (!supportsColor2()) return text3;
   switch (tone) {
     case "brand":
-      return pc.bold(pc.cyan(text3));
+      return pc2.bold(pc2.cyan(text3));
     case "muted":
-      return pc.dim(text3);
+      return pc2.dim(text3);
     case "success":
-      return pc.green(text3);
+      return pc2.green(text3);
     case "warn":
-      return pc.yellow(text3);
+      return pc2.yellow(text3);
     case "error":
-      return pc.red(text3);
+      return pc2.red(text3);
     case "info":
-      return pc.blue(text3);
+      return pc2.blue(text3);
     case "accent":
-      return pc.magenta(text3);
+      return pc2.magenta(text3);
     default:
       return text3;
   }
@@ -341,12 +419,7 @@ function formatBytes(bytes) {
   return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
 }
 function printBanner(version2) {
-  const line = "\u2500".repeat(52);
-  console.log("");
-  console.log(paint(`  ${brand.name} CLI`, "brand") + paint(`  v${version2}`, "muted"));
-  console.log(paint(`  ${brand.tagline}`, "muted"));
-  console.log(paint(`  ${line}`, "muted"));
-  console.log("");
+  printBannerWithLogo(version2);
 }
 function printHeading(title, subtitle) {
   console.log("");
@@ -377,16 +450,6 @@ function printHint(message) {
 function printCommandExample(label, command) {
   console.log(`  ${paint(label.padEnd(16), "muted")}${paint(command, "accent")}`);
 }
-function printPreviewPanel(title, rows) {
-  console.log("");
-  console.log(paint(`  ${title}`, "brand"));
-  printDivider();
-  const labelWidth = Math.max(16, ...rows.map((row) => row.label.length + 2));
-  for (const row of rows) {
-    printStep(row.label, row.value, labelWidth);
-  }
-  console.log("");
-}
 function printQuickStart() {
   printHeading("Quick start");
   printCommandExample("Live storefront preview", "storify theme dev");
@@ -407,14 +470,14 @@ function createSpinner(text3) {
   });
 }
 async function withSpinner(text3, task) {
-  const spinner2 = createSpinner(text3);
-  spinner2.start();
+  const spinner3 = createSpinner(text3);
+  spinner3.start();
   try {
     const result = await task();
-    spinner2.stop();
+    spinner3.stop();
     return result;
   } catch (error) {
-    spinner2.fail(text3);
+    spinner3.fail(text3);
     throw error;
   }
 }
@@ -843,9 +906,106 @@ async function runBuildCommand(options) {
 import path6 from "path";
 import { execa as execa3 } from "execa";
 
+// src/lib/clack-ui.ts
+import * as p2 from "@clack/prompts";
+import pc3 from "picocolors";
+async function runTask(startMessage, doneMessage, task) {
+  const spinner3 = p2.spinner();
+  spinner3.start(startMessage);
+  try {
+    const result = await task();
+    spinner3.stop(pc3.green("\u2713") + ` ${doneMessage}`);
+    return result;
+  } catch (error) {
+    spinner3.stop(pc3.red("\u2717") + ` ${startMessage}`);
+    throw error;
+  }
+}
+
+// src/lib/dev-dashboard.ts
+import pc4 from "picocolors";
+
+// src/lib/terminal-screen.ts
+function clearScreen() {
+  if (!isInteractive()) return;
+  process.stdout.write("\x1Bc");
+}
+function hideCursor() {
+  if (!isInteractive()) return;
+  process.stdout.write("\x1B[?25l");
+}
+function showCursor() {
+  if (!isInteractive()) return;
+  process.stdout.write("\x1B[?25h");
+}
+
+// src/lib/dev-dashboard.ts
+function truncateMiddle(value, max = 64) {
+  if (value.length <= max) return value;
+  const head = Math.ceil((max - 1) / 2);
+  const tail = Math.floor((max - 1) / 2);
+  return `${value.slice(0, head)}\u2026${value.slice(-tail)}`;
+}
+function renderUrlPanel(urls) {
+  const w = 62;
+  console.log(paint(`  \u256D${"\u2500".repeat(w)}\u256E`, "brand"));
+  console.log(
+    paint(`  \u2502${" ".repeat(Math.floor((w - 13) / 2))}Preview URLs${" ".repeat(Math.ceil((w - 13) / 2))}\u2502`, "brand")
+  );
+  console.log(paint(`  \u251C${"\u2500".repeat(w)}\u2524`, "brand"));
+  for (const row of urls) {
+    const label = row.label.padEnd(14);
+    const value = truncateMiddle(row.value, w - 20);
+    const gap = Math.max(1, w - label.length - value.length - 1);
+    console.log(`  \u2502 ${paint(label, "muted")}${value}${" ".repeat(gap)}\u2502`);
+  }
+  console.log(paint(`  \u2570${"\u2500".repeat(w)}\u256F`, "brand"));
+}
+function renderControls(interactiveShell) {
+  const w = 62;
+  console.log("");
+  console.log(paint(`  \u256D${"\u2500".repeat(w)}\u256E`, "brand"));
+  console.log(
+    paint(`  \u2502${" ".repeat(Math.floor((w - 8) / 2))}Controls${" ".repeat(Math.ceil((w - 8) / 2))}\u2502`, "brand")
+  );
+  console.log(paint(`  \u251C${"\u2500".repeat(w)}\u2524`, "brand"));
+  console.log(paint(`  \u2502 ${paint("Enter / Q".padEnd(14), "muted")}Stop preview \xB7 disable dev link`, "muted"));
+  console.log(
+    paint(
+      `  \u2502 ${paint("Ctrl+C".padEnd(14), "muted")}${interactiveShell ? "Stop \xB7 return to main menu" : "Stop preview \xB7 exit"}`,
+      "muted"
+    )
+  );
+  console.log(paint(`  \u2502 ${paint("Save files".padEnd(14), "muted")}Vite hot-reloads in the background`, "muted"));
+  console.log(paint(`  \u2570${"\u2500".repeat(w)}\u256F`, "brand"));
+  console.log("");
+}
+function renderDevDashboard(options) {
+  clearScreen();
+  printPlatformBanner(options.subtitle);
+  if (options.storeLabel) {
+    console.log(
+      paint(`  ${paint("Store", "muted")}  ${options.storeLabel}`, "info")
+    );
+  }
+  console.log(paint(`  ${paint("Theme", "muted")}  ${truncateMiddle(options.themeRoot, 70)}`, "info"));
+  console.log("");
+  for (const step of options.steps) {
+    const mark = supportsColor2() ? pc4.green("\u2713") : "\u2713";
+    console.log(`  ${mark} ${paint(step.label.padEnd(16), "muted")}${step.value}`);
+  }
+  console.log("");
+  renderUrlPanel(options.urls);
+  if (options.note) {
+    console.log(paint(`  ${options.note}`, "muted"));
+  }
+  renderControls(options.interactiveShell);
+}
+
 // src/lib/dev-link.ts
 async function updateDevLink(auth, payload) {
-  const response = await fetch(`${auth.apiUrl}/theme/dev-link`, {
+  const url = `${auth.apiUrl}/theme/dev-link`;
+  const init = {
     method: "PATCH",
     headers: {
       "Content-Type": "application/json",
@@ -853,18 +1013,72 @@ async function updateDevLink(auth, payload) {
       "X-Store-Id": auth.storeId
     },
     body: JSON.stringify(payload)
-  });
-  const body = await response.json().catch(() => ({}));
-  if (!response.ok) {
-    const message = (body && typeof body === "object" && "error" in body ? String(body.error) : "") || `Failed to update dev link (${response.status})`;
-    throw new Error(message);
-  }
-  return {
-    devThemeEnabled: body.devThemeEnabled === true,
-    devThemeBaseUrl: body.devThemeBaseUrl == null || body.devThemeBaseUrl === "" ? null : String(body.devThemeBaseUrl).trim(),
-    storefrontPreviewUrl: typeof body.storefrontPreviewUrl === "string" ? body.storefrontPreviewUrl : void 0,
-    devSessionId: typeof body.devSessionId === "string" ? body.devSessionId : void 0
   };
+  const retryDelaysMs = [0, 2e3, 5e3];
+  let lastError = null;
+  for (const delayMs of retryDelaysMs) {
+    if (delayMs > 0) {
+      await new Promise((resolve) => setTimeout(resolve, delayMs));
+    }
+    const response = await fetch(url, init);
+    const body = await response.json().catch(() => ({}));
+    if (response.status === 429) {
+      lastError = new Error(
+        (body && typeof body === "object" && "error" in body ? String(body.error) : "") || "Too many requests, please slow down"
+      );
+      continue;
+    }
+    if (!response.ok) {
+      const message = (body && typeof body === "object" && "error" in body ? String(body.error) : "") || `Failed to update dev link (${response.status})`;
+      throw new Error(message);
+    }
+    return {
+      devThemeEnabled: body.devThemeEnabled === true,
+      devThemeBaseUrl: body.devThemeBaseUrl == null || body.devThemeBaseUrl === "" ? null : String(body.devThemeBaseUrl).trim(),
+      storefrontPreviewUrl: typeof body.storefrontPreviewUrl === "string" ? body.storefrontPreviewUrl : void 0,
+      devSessionId: typeof body.devSessionId === "string" ? body.devSessionId : void 0
+    };
+  }
+  throw lastError ?? new Error("Failed to update dev link (rate limited)");
+}
+
+// src/lib/dev-session-wait.ts
+import readline from "readline";
+async function waitForDevSessionEnd(viteProcess, options) {
+  if (!isInteractive()) {
+    await viteProcess;
+    return;
+  }
+  hideCursor();
+  await new Promise((resolve, reject) => {
+    let settled = false;
+    const finish = (error) => {
+      if (settled) return;
+      settled = true;
+      showCursor();
+      rl.close();
+      if (error) reject(error);
+      else resolve();
+    };
+    viteProcess.then(() => finish()).catch((error) => finish(error));
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout,
+      terminal: true
+    });
+    const stopSession = () => {
+      void options.stop().then(
+        () => finish(),
+        (error) => finish(error)
+      );
+    };
+    rl.on("line", (line) => {
+      const key = line.trim().toLowerCase();
+      if (key === "" || key === "q" || key === "quit" || key === "stop" || key === "s") {
+        stopSession();
+      }
+    });
+  });
 }
 
 // src/lib/port.ts
@@ -900,7 +1114,7 @@ function buildPreviewUrls(auth, devBaseUrl, storefrontUrlOverride) {
 }
 
 // src/lib/session.ts
-import * as p2 from "@clack/prompts";
+import * as p3 from "@clack/prompts";
 async function ensureAuthenticatedSession(options = {}) {
   const stored = await readStoredConfig();
   const hasCredentials = Boolean(stored.token?.trim() && stored.storeId?.trim());
@@ -927,7 +1141,7 @@ async function ensureAuthenticatedSession(options = {}) {
   if (!options.token && !options.forceLogin) {
     const valid = await verifyAuthToken(apiUrl, token);
     if (!valid && isInteractive()) {
-      p2.log.warn("Session expired. Sign in again.");
+      p3.log.warn("Session expired. Sign in again.");
       const session = await runInteractiveLoginFlow({
         apiUrl: options.api,
         currentStoreId: options.storeId || stored.storeId
@@ -1001,10 +1215,14 @@ async function waitForDevServer(baseUrl, timeoutMs = 45e3) {
 
 // src/lib/tunnel.ts
 async function startCloudflaredTunnel(localUrl) {
-  const child = execa2("cloudflared", ["tunnel", "--url", localUrl], {
-    all: true,
-    reject: false
-  });
+  const child = execa2(
+    "cloudflared",
+    ["tunnel", "--url", localUrl, "--no-autoupdate", "--loglevel", "error"],
+    {
+      all: true,
+      reject: false
+    }
+  );
   const url = await new Promise((resolve, reject) => {
     const timeout = setTimeout(() => {
       reject(new Error("Timed out while waiting for cloudflared public URL."));
@@ -1057,7 +1275,6 @@ async function runDevCommand(options) {
   const preferredPort = toPort(options.port);
   const shouldLinkStore = options.linkStore !== false;
   const shouldUnlinkOnExit = options.unlinkOnExit !== false;
-  printHeading("Theme preview", themeRoot);
   const session = await ensureAuthenticatedSession({
     api: options.api,
     storeId: options.storeId,
@@ -1073,33 +1290,36 @@ async function runDevCommand(options) {
   if (useLocalDev) {
     auth.storefrontUrl = localStorefrontBaseUrl(auth.storefrontUrl);
   }
+  const subtitle = options.remote ? "Remote preview \xB7 production storefront" : useLocalDev ? "Local preview \xB7 localhost storefront" : "Theme live preview";
   const port = await findAvailablePort(preferredPort);
   const localUrl = `http://localhost:${port}`;
   const shouldUseTunnel = !useLocalDev && options.tunnel !== false;
-  if (port !== preferredPort) {
-    printWarn(`Port ${preferredPort} was busy. Using ${port} instead.`);
-  }
+  const portNote = port !== preferredPort ? ` (port ${preferredPort} was busy)` : "";
   let tunnelProcess = null;
   let linkedDevUrl = null;
   let liveStorefrontUrl = null;
+  let viteProcess = null;
+  let viteStderr = "";
   const viteBin = path6.join(themeRoot, "node_modules", "vite", "bin", "vite.js");
-  const viteArgs = [viteBin, "--host", "0.0.0.0", "--port", String(port), "--strictPort"];
+  const viteArgs = [
+    viteBin,
+    "--host",
+    "0.0.0.0",
+    "--port",
+    String(port),
+    "--strictPort",
+    "--logLevel",
+    "error"
+  ];
   const viteEnv = { ...process.env };
   viteEnv.VITE_DEV_STORE_ID = auth.storeId;
-  let viteProcess = null;
   const teardown = async () => {
-    if (tunnelProcess) {
-      tunnelProcess.kill("SIGTERM");
-    }
-    if (viteProcess) {
-      viteProcess.kill("SIGTERM");
-    }
+    if (tunnelProcess) tunnelProcess.kill("SIGTERM");
+    if (viteProcess) viteProcess.kill("SIGTERM");
     if (shouldLinkStore && shouldUnlinkOnExit) {
       try {
         await updateDevLink(auth, { devThemeEnabled: false, devThemeBaseUrl: null });
-        printSuccess("Dev link disabled.");
-      } catch (error) {
-        printWarn(`Failed to disable dev link: ${error.message}`);
+      } catch {
       }
     }
   };
@@ -1109,88 +1329,103 @@ async function runDevCommand(options) {
     tearingDown = true;
     await teardown();
   };
-  process.on("SIGINT", async () => {
+  const onSigint = async () => {
     await handleExit();
-    process.exit(130);
-  });
-  process.on("SIGTERM", async () => {
+    if (!options.interactiveShell) process.exit(130);
+  };
+  const onSigterm = async () => {
     await handleExit();
-    process.exit(143);
-  });
-  const viteSpinner = createSpinner(`Starting Vite on ${localUrl}`);
-  viteSpinner.start();
-  viteProcess = execa3("node", viteArgs, {
-    cwd: themeRoot,
-    env: viteEnv,
-    stdout: "pipe",
-    stderr: "pipe"
-  });
-  viteProcess.stdout?.pipe(process.stdout);
-  viteProcess.stderr?.pipe(process.stderr);
+    if (!options.interactiveShell) process.exit(143);
+  };
+  process.on("SIGINT", onSigint);
+  process.on("SIGTERM", onSigterm);
+  const removeSignalHandlers = () => {
+    process.off("SIGINT", onSigint);
+    process.off("SIGTERM", onSigterm);
+  };
+  const dashboardSteps = [];
   try {
-    await waitForDevServer(localUrl);
-    viteSpinner.succeed(`Vite ready at ${localUrl}`);
-  } catch (error) {
-    viteSpinner.fail("Vite failed to start");
-    viteProcess.kill("SIGTERM");
-    throw error;
-  }
-  if (shouldLinkStore) {
-    if (useLocalDev) {
-      linkedDevUrl = localUrl;
-      printStep("Mode", "Localhost (storefront + theme on your machine)");
-    } else if (options.publicUrl) {
-      linkedDevUrl = options.publicUrl.replace(/\/+$/, "");
-    } else if (shouldUseTunnel) {
-      const tunnelSpinner = createSpinner("Creating public tunnel for theme assets");
-      tunnelSpinner.start();
-      try {
-        const tunnel = await startCloudflaredTunnel(localUrl);
-        linkedDevUrl = tunnel.url.replace(/\/+$/, "");
-        tunnelProcess = tunnel.process;
-        tunnelSpinner.succeed(`Public theme URL: ${linkedDevUrl}`);
-      } catch (error) {
-        tunnelSpinner.warn(`Tunnel unavailable (${error.message})`);
+    await runTask(`Starting Vite${portNote}`, `Vite on :${port}`, async () => {
+      viteProcess = execa3("node", viteArgs, {
+        cwd: themeRoot,
+        env: viteEnv,
+        stdout: "ignore",
+        stderr: "pipe"
+      });
+      viteProcess.stderr?.on("data", (chunk) => {
+        viteStderr += String(chunk);
+      });
+      await waitForDevServer(localUrl);
+    });
+    dashboardSteps.push({ label: "Vite dev server", value: localUrl });
+    if (shouldLinkStore) {
+      if (useLocalDev) {
+        linkedDevUrl = localUrl;
+      } else if (options.publicUrl) {
+        linkedDevUrl = options.publicUrl.replace(/\/+$/, "");
+      } else if (shouldUseTunnel) {
+        try {
+          const tunnel = await runTask(
+            "Creating secure tunnel",
+            "Public tunnel ready",
+            () => startCloudflaredTunnel(localUrl)
+          );
+          linkedDevUrl = tunnel.url.replace(/\/+$/, "");
+          tunnelProcess = tunnel.process;
+          dashboardSteps.push({ label: "Public tunnel", value: linkedDevUrl });
+        } catch {
+          linkedDevUrl = localUrl;
+          dashboardSteps.push({ label: "Public tunnel", value: "Unavailable \u2014 using localhost" });
+        }
+      } else {
         linkedDevUrl = localUrl;
-        printWarn("Storefront preview needs a public URL. Use --local or install cloudflared.");
       }
+      const devLinkResult = await runTask(
+        "Linking store preview",
+        "Store preview linked",
+        () => updateDevLink(auth, { devThemeEnabled: true, devThemeBaseUrl: linkedDevUrl })
+      );
+      liveStorefrontUrl = (useLocalDev ? formatLivePreviewUrl(auth, devLinkResult.devSessionId, session.store) : devLinkResult.storefrontPreviewUrl) || formatLivePreviewUrl(auth, devLinkResult.devSessionId, session.store);
+      dashboardSteps.push({
+        label: "Storefront link",
+        value: session.store ? displayStoreName(session.store) : auth.storeId
+      });
     } else {
       linkedDevUrl = localUrl;
+      dashboardSteps.push({ label: "Local only", value: "Store link skipped" });
     }
-    const devLinkResult = await withSpinner(
-      "Linking dev theme to your store on Storify",
-      async () => updateDevLink(auth, { devThemeEnabled: true, devThemeBaseUrl: linkedDevUrl })
-    );
-    liveStorefrontUrl = (useLocalDev ? formatLivePreviewUrl(auth, devLinkResult.devSessionId, session.store) : devLinkResult.storefrontPreviewUrl) || formatLivePreviewUrl(auth, devLinkResult.devSessionId, session.store);
-    const urls = buildPreviewUrls(auth, linkedDevUrl, liveStorefrontUrl);
-    printPreviewPanel("Live preview", [
-      { label: "Storefront", value: urls.storefrontUrl },
-      { label: "Theme (Vite)", value: linkedDevUrl },
-      { label: "Theme direct", value: urls.themeDirectUrl },
-      { label: "Admin editor", value: urls.adminEditorUrl }
-    ]);
-    if (useLocalDev) {
-      printHint(`Storefront must be running at ${DEFAULT_STOREFRONT_URL.replace(/\/+$/, "")}`);
-    } else {
-      printHint("Open the storefront link to see your theme with real store data.");
+    const urls = shouldLinkStore && linkedDevUrl && liveStorefrontUrl ? buildPreviewUrls(auth, linkedDevUrl, liveStorefrontUrl) : null;
+    renderDevDashboard({
+      subtitle,
+      themeRoot,
+      storeLabel: session.store ? displayStoreName(session.store) : auth.storeId,
+      steps: dashboardSteps,
+      urls: urls ? [
+        { label: "Storefront", value: urls.storefrontUrl },
+        { label: "Theme (Vite)", value: linkedDevUrl },
+        { label: "Theme direct", value: urls.themeDirectUrl },
+        { label: "Admin editor", value: urls.adminEditorUrl }
+      ] : [{ label: "Vite", value: localUrl }],
+      interactiveShell: options.interactiveShell,
+      note: useLocalDev ? "Ensure the storefront is running on localhost:3004" : "Edit theme files \u2014 changes hot-reload on the storefront"
+    });
+    const openTarget = options.openStorefront && liveStorefrontUrl ? liveStorefrontUrl : options.open ? localUrl : useLocalDev && shouldLinkStore && liveStorefrontUrl ? liveStorefrontUrl : null;
+    if (openTarget) {
+      await openInBrowser(openTarget);
     }
-    printHint("Press Ctrl+C to stop and disable dev link.");
-  } else {
-    printStep("Local URL", localUrl);
-    printStep("Store ID", auth.storeId);
-    printHint("Run without --no-link-store to preview on the storefront.");
-    console.log("");
-  }
-  const openTarget = options.openStorefront && liveStorefrontUrl ? liveStorefrontUrl : options.open ? localUrl : useLocalDev && shouldLinkStore && liveStorefrontUrl ? liveStorefrontUrl : null;
-  if (openTarget) {
-    await openInBrowser(openTarget);
-  }
-  printSuccess("Waiting for file changes...");
-  console.log("");
-  try {
-    await viteProcess;
+    if (!viteProcess) throw new Error("Vite process failed to start.");
+    await waitForDevSessionEnd(viteProcess, {
+      interactiveShell: options.interactiveShell,
+      stop: handleExit
+    });
+  } catch (error) {
+    if (viteStderr.trim()) {
+      console.error("\n" + viteStderr.trim() + "\n");
+    }
+    throw error;
   } finally {
-    await handleExit();
+    removeSignalHandlers();
+    if (!tearingDown) await handleExit();
   }
 }
 
@@ -1567,40 +1802,40 @@ async function runValidateCommand(options) {
   const manifestPath = path11.join(themeRoot, "theme-manifest.json");
   const manifestRaw = await fs11.readFile(manifestPath, "utf8");
   const manifest = JSON.parse(manifestRaw);
-  let spinner2 = createSpinner("Checking manifest DSL");
-  spinner2.start();
+  let spinner3 = createSpinner("Checking manifest DSL");
+  spinner3.start();
   const dslValidation = validateThemeManifestDSL(manifest);
   if (!dslValidation.ok) {
-    spinner2.fail("Manifest DSL validation failed");
+    spinner3.fail("Manifest DSL validation failed");
     throw new Error(dslValidation.error);
   }
-  spinner2.succeed("Manifest DSL is valid");
-  spinner2 = createSpinner("Checking page section references");
-  spinner2.start();
+  spinner3.succeed("Manifest DSL is valid");
+  spinner3 = createSpinner("Checking page section references");
+  spinner3.start();
   const refValidation = validateThemeManifestDSLReferences(dslValidation.manifest);
   if (!refValidation.ok) {
-    spinner2.fail("Manifest references validation failed");
+    spinner3.fail("Manifest references validation failed");
     throw new Error(refValidation.error);
   }
-  spinner2.succeed("Page layout references are valid");
+  spinner3.succeed("Page layout references are valid");
   const sectionRendererPath = path11.join(themeRoot, "src", "SectionRenderer.tsx");
   if (await fileExists3(sectionRendererPath)) {
-    spinner2 = createSpinner("Matching SECTION_MAP components");
-    spinner2.start();
+    spinner3 = createSpinner("Matching SECTION_MAP components");
+    spinner3.start();
     const sectionMapInfo = await validateManifestSectionMap(themeRoot);
-    spinner2.succeed(`SECTION_MAP matched (${sectionMapInfo.sections} sections, ${sectionMapInfo.mapKeys} keys)`);
+    spinner3.succeed(`SECTION_MAP matched (${sectionMapInfo.sections} sections, ${sectionMapInfo.mapKeys} keys)`);
   } else {
     printWarn("Skipped SECTION_MAP check (src/SectionRenderer.tsx not found).");
   }
-  spinner2 = createSpinner("Validating config/pages defaults");
-  spinner2.start();
+  spinner3 = createSpinner("Validating config/pages defaults");
+  spinner3.start();
   const dryRun = await buildThemeManifest({
     themeRoot,
     writeToDist: false,
     syncEntryFromDist: false,
     quiet: true
   });
-  spinner2.succeed("Page defaults are consistent");
+  spinner3.succeed("Page defaults are consistent");
   if (!dslValidation.manifest.entry || !dslValidation.manifest.entry.trim()) {
     throw new Error("Manifest entry is required.");
   }
@@ -1623,79 +1858,117 @@ async function runValidateCommand(options) {
 }
 
 // src/lib/interactive.ts
-import * as p3 from "@clack/prompts";
-import pc2 from "picocolors";
+import * as p4 from "@clack/prompts";
+import pc5 from "picocolors";
+function showMenuShell() {
+  clearScreen();
+  printPlatformBanner("Theme development toolkit");
+}
+var MENU_OPTIONS = [
+  { value: "preview", label: "Start live theme preview", hint: "Local or remote storefront" },
+  { value: "validate", label: "Validate theme", hint: "Manifest + sections" },
+  { value: "build", label: "Build theme", hint: "dist/ output" },
+  { value: "pack", label: "Pack zip", hint: "Upload-ready archive" },
+  { value: "upload", label: "Upload theme", hint: "Send zip to Storify" },
+  { value: "new", label: "Create new theme", hint: "From starter template" },
+  { value: "login", label: "Sign in / switch store", hint: "Save credentials" },
+  { value: "status", label: "Check setup", hint: "Config + theme folder" },
+  { value: "help", label: "Show quick start", hint: "Common commands" },
+  { value: "exit", label: "Exit", hint: "Leave the CLI" }
+];
+async function runMenuAction(action) {
+  switch (action) {
+    case "preview": {
+      const mode = await p4.select({
+        message: "Preview mode",
+        options: [
+          { value: "local", label: "Local", hint: "localhost storefront + Vite" },
+          { value: "remote", label: "Remote", hint: "Production storefront + cloudflared tunnel" }
+        ]
+      });
+      if (p4.isCancel(mode)) {
+        p4.cancel("Preview cancelled.");
+        return;
+      }
+      await runDevCommand({
+        linkStore: true,
+        openStorefront: true,
+        local: mode === "local",
+        remote: mode === "remote",
+        interactiveShell: true
+      });
+      p4.log.success("Preview stopped. Back to menu.");
+      break;
+    }
+    case "validate":
+      await runValidateCommand({});
+      break;
+    case "build":
+      await runBuildCommand({});
+      break;
+    case "pack":
+      await runPackCommand({});
+      break;
+    case "upload":
+      await runUploadCommand({});
+      break;
+    case "new": {
+      const name = await p4.text({
+        message: "Theme folder name",
+        placeholder: "my-theme",
+        validate: (value) => value?.trim() ? void 0 : "Name is required"
+      });
+      if (p4.isCancel(name)) {
+        p4.cancel("Cancelled.");
+        return;
+      }
+      await runNewCommand(String(name).trim(), {});
+      break;
+    }
+    case "login":
+      await runLoginCommand({});
+      break;
+    case "status":
+      await runStatusCommand({});
+      break;
+    case "help":
+      printQuickStart();
+      break;
+    case "exit":
+      break;
+    default:
+      break;
+  }
+}
 async function runInteractiveRoot(version2) {
   if (!isInteractive()) {
     printBanner(version2);
     printQuickStart();
     return;
   }
-  p3.intro(`${brand.name} CLI ${pc2.dim(`v${version2}`)}`);
-  const action = await p3.select({
-    message: "What would you like to do?",
-    options: [
-      { value: "preview", label: "Start live theme preview", hint: "Login \u2192 pick store \u2192 storefront" },
-      { value: "validate", label: "Validate theme", hint: "Manifest + sections" },
-      { value: "build", label: "Build theme", hint: "dist/ output" },
-      { value: "pack", label: "Pack zip", hint: "Upload-ready archive" },
-      { value: "upload", label: "Upload theme", hint: "Send zip to Storify" },
-      { value: "new", label: "Create new theme", hint: "From starter template" },
-      { value: "login", label: "Sign in / switch store", hint: "Save credentials" },
-      { value: "status", label: "Check setup", hint: "Config + theme folder" },
-      { value: "help", label: "Show quick start", hint: "Common commands" }
-    ]
-  });
-  if (p3.isCancel(action)) {
-    p3.cancel("Cancelled.");
-    process.exit(0);
-  }
-  try {
-    switch (action) {
-      case "preview":
-        await runDevCommand({ linkStore: true, openStorefront: true, local: true });
-        break;
-      case "validate":
-        await runValidateCommand({});
-        break;
-      case "build":
-        await runBuildCommand({});
-        break;
-      case "pack":
-        await runPackCommand({});
-        break;
-      case "upload":
-        await runUploadCommand({});
-        break;
-      case "new": {
-        const name = await p3.text({
-          message: "Theme folder name",
-          placeholder: "my-theme",
-          validate: (value) => value?.trim() ? void 0 : "Name is required"
-        });
-        if (p3.isCancel(name)) {
-          p3.cancel("Cancelled.");
-          process.exit(0);
-        }
-        await runNewCommand(String(name).trim(), {});
-        break;
+  showMenuShell();
+  while (true) {
+    const action = await p4.select({
+      message: "What would you like to do?",
+      options: MENU_OPTIONS
+    });
+    if (p4.isCancel(action)) {
+      p4.outro("Goodbye.");
+      break;
+    }
+    if (action === "exit") {
+      p4.outro("Goodbye.");
+      break;
+    }
+    try {
+      await runMenuAction(action);
+      if (action !== "help") {
+        showMenuShell();
       }
-      case "login":
-        await runLoginCommand({});
-        break;
-      case "status":
-        await runStatusCommand({});
-        break;
-      case "help":
-        printQuickStart();
-        p3.outro("Done.");
-        break;
-      default:
-        break;
+    } catch (error) {
+      p4.log.error(error instanceof Error ? error.message : String(error));
+      p4.log.message(pc5.dim("Press \u2191 to pick another command."));
     }
-  } catch (error) {
-    p3.log.error(error instanceof Error ? error.message : String(error));
-    process.exit(1);
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storifycli/cli",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
   "description": "Storify theme development CLI — login, live dev preview, validate, build, pack, and upload themes.",
   "bin": {