tiendu 0.4.0 → 0.6.0

package/lib/preview.mjs

@@ -1,13 +1,54 @@
 import * as p from "@clack/prompts";
 import { loadConfigOrFail, writeConfig } from "./config.mjs";
-import { apiFetch } from "./api.mjs";
+import { apiFetch, fetchPreview } from "./api.mjs";
 
-const buildPreviewUrl = (apiBaseUrl, previewHostname) => {
+export const buildPreviewUrl = (apiBaseUrl, previewHostname) => {
   const base = new URL(apiBaseUrl);
   const hasExplicitPort = previewHostname.includes(":");
   return `${base.protocol}//${previewHostname}${!hasExplicitPort && base.port ? `:${base.port}` : ""}/`;
 };
 
+const formatShortDateTime = (value) => {
+  if (!value) return "Unknown";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "Unknown";
+
+  const months = [
+    "Jan", "Feb", "Mar", "Apr", "May", "Jun",
+    "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
+  ];
+  const month = months[date.getMonth()];
+  const day = date.getDate();
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  return `${month} ${day} ${hours}:${minutes}`;
+};
+
+export const getPreviewDisplayName = (preview) =>
+  preview.name || `${formatShortDateTime(preview.createdAt)} preview (no name)`;
+
+export const getPreviewUrl = (apiBaseUrl, preview) =>
+  buildPreviewUrl(apiBaseUrl, preview.previewHostname);
+
+export const fetchPreviewDetails = async (
+  apiBaseUrl,
+  apiKey,
+  storeId,
+  previewKey,
+) => {
+  const result = await fetchPreview(apiBaseUrl, apiKey, storeId, previewKey);
+  if (!result.ok) return result;
+
+  return {
+    ok: true,
+    data: {
+      preview: result.data,
+      displayName: getPreviewDisplayName(result.data),
+      url: getPreviewUrl(apiBaseUrl, result.data),
+    },
+  };
+};
+
 /**
  * @param {Array<any>} previews
  * @param {string | undefined} previewKey
@@ -42,18 +83,10 @@ export const createPreview = async (apiBaseUrl, apiKey, storeId, name) => {
       `/api/v2/stores/${storeId}/theme-previews`,
       {
         method: "POST",
-        body: JSON.stringify({ name: name ?? "Dev" }),
+        body: JSON.stringify({ name: name ?? "" }),
       },
     );
 
-    if (response.status === 409) {
-      const body = await response.json().catch(() => ({}));
-      const message =
-        body?.error?.message ??
-        "A preview already exists for this store. Delete it first with: tiendu preview delete";
-      return { ok: false, error: message };
-    }
-
     if (!response.ok) {
       const body = await response.text().catch(() => "");
       return {
@@ -158,6 +191,116 @@ export const publishPreview = async (
   }
 };
 
+// ---------------------------------------------------------------------------
+// Shared interactive preview picker
+// ---------------------------------------------------------------------------
+
+const CREATE_NEW_VALUE = "__create_new__";
+
+/**
+ * Interactively resolve a preview key. Uses attached key if valid, otherwise
+ * prompts the user to pick an existing preview or create a new one.
+ *
+ * @param {{ config: import("./config.mjs").TienduConfig, credentials: import("./config.mjs").TienduCredentials }} opts
+ * @returns {Promise<string>} The resolved preview key
+ */
+export const resolvePreviewKeyInteractively = async ({ config, credentials }) => {
+  const { apiBaseUrl, storeId } = config;
+  const { apiKey } = credentials;
+
+  // 1. Validate stored key
+  if (config.previewKey) {
+    const result = await fetchPreview(apiBaseUrl, apiKey, storeId, config.previewKey);
+    if (result.ok) {
+      return config.previewKey;
+    }
+
+    p.log.warn(`Stored preview ${config.previewKey} was not found. Please select a preview.`);
+    const { previewKey: _, ...rest } = config;
+    await writeConfig(rest);
+  } else {
+    p.log.warn("No preview attached.");
+  }
+
+  // 2. List previews
+  const listResult = await listPreviews(apiBaseUrl, apiKey, storeId);
+  if (!listResult.ok) {
+    p.log.error(listResult.error);
+    process.exit(1);
+  }
+
+  const previews = listResult.data;
+
+  if (previews.length === 0) {
+    p.log.info("No previews found for this store.");
+  }
+
+  // 3. Show picker
+  const options = [
+    ...previews.map((preview) => ({
+      value: preview.previewKey,
+      label: getPreviewDisplayName(preview),
+      hint: preview.previewKey,
+    })),
+    {
+      value: CREATE_NEW_VALUE,
+      label: "Create a new preview",
+    },
+  ];
+
+  const selected = await p.select({
+    message: "Select a preview",
+    options,
+  });
+
+  if (p.isCancel(selected)) {
+    p.cancel("Cancelled.");
+    process.exit(0);
+  }
+
+  // 4. Handle create new
+  if (selected === CREATE_NEW_VALUE) {
+    const nameInput = await p.text({
+      message: "Preview name (optional)",
+      placeholder: "Press Enter to skip",
+      defaultValue: "",
+    });
+
+    if (p.isCancel(nameInput)) {
+      p.cancel("Cancelled.");
+      process.exit(0);
+    }
+
+    const name = (nameInput ?? "").trim();
+    const spinner = p.spinner();
+    spinner.start("Creating preview...");
+
+    const createResult = await createPreview(apiBaseUrl, apiKey, storeId, name);
+    if (!createResult.ok) {
+      spinner.stop("Failed to create preview.", 1);
+      p.log.error(createResult.error);
+      process.exit(1);
+    }
+
+    const preview = createResult.data;
+    const displayName = getPreviewDisplayName(preview);
+    const url = getPreviewUrl(apiBaseUrl, preview);
+    spinner.stop(`Preview "${displayName}" created (${preview.previewKey})`);
+    p.log.message(`  ${url}`);
+
+    await writeConfig({ ...config, previewKey: preview.previewKey });
+    return preview.previewKey;
+  }
+
+  // 5. Attach to selected preview
+  await writeConfig({ ...config, previewKey: selected });
+  const selectedPreview = previews.find((p) => p.previewKey === selected);
+  const displayName = selectedPreview ? getPreviewDisplayName(selectedPreview) : selected;
+  p.log.success(`Attached to "${displayName}" (${selected})`);
+
+  return selected;
+};
+
 // ---------------------------------------------------------------------------
 // CLI commands
 // ---------------------------------------------------------------------------
@@ -182,8 +325,10 @@ export const previewCreate = async (name) => {
   }
 
   const preview = result.data;
-  const url = buildPreviewUrl(config.apiBaseUrl, preview.previewHostname);
-  spinner.stop(`Preview created: ${url}`);
+  const url = getPreviewUrl(config.apiBaseUrl, preview);
+  const displayName = getPreviewDisplayName(preview);
+  spinner.stop(`Preview "${displayName}" created (${preview.previewKey})`);
+  p.log.message(`  ${url}`);
 
   await writeConfig({ ...config, previewKey: preview.previewKey });
 };
@@ -215,14 +360,15 @@ export const previewList = async () => {
     `${result.data.length} preview${result.data.length === 1 ? "" : "s"}:`,
   );
 
-  const activePreview = resolveActivePreview(result.data, config.previewKey);
-
   for (const preview of result.data) {
-    const active =
-      activePreview?.previewKey === preview.previewKey ? " ← active" : "";
+    const isAttached = config.previewKey === preview.previewKey;
+    const indicator = isAttached ? "  \u2190 attached" : "";
     const url = buildPreviewUrl(config.apiBaseUrl, preview.previewHostname);
-    p.log.message(`  ${preview.name}  ${url}${active}`);
+    const displayName = getPreviewDisplayName(preview);
+    p.log.message(`  ${displayName}  ${url}${indicator}`);
   }
+
+  p.log.info("Tip: run tiendu preview attach <key> to switch previews.");
 };
 
 const formatRelativeDate = (value) => {
@@ -245,67 +391,119 @@ const formatRelativeDate = (value) => {
 export const previewShow = async () => {
   const { config, credentials } = await loadConfigOrFail();
 
-  const result = await listPreviews(
+  if (!config.previewKey) {
+    p.log.warn("No preview attached. Run tiendu preview list or tiendu preview create.");
+    process.exit(0);
+  }
+
+  const result = await fetchPreview(
     config.apiBaseUrl,
     credentials.apiKey,
     config.storeId,
+    config.previewKey,
   );
 
   if (!result.ok) {
-    p.log.error(result.error);
+    p.log.warn(`Stored preview ${config.previewKey} was not found.`);
+    p.log.info("Run tiendu preview list to see available previews.");
     process.exit(1);
   }
 
-  const preview = resolveActivePreview(result.data, config.previewKey);
-  if (!preview) {
-    p.log.error(
-      result.data.length === 0
-        ? "No previews found for this store."
-        : "Run tiendu preview list to inspect available previews.",
-    );
-    process.exit(1);
-  }
-
-  const url = buildPreviewUrl(config.apiBaseUrl, preview.previewHostname);
+  const preview = result.data;
+  const url = getPreviewUrl(config.apiBaseUrl, preview);
+  const displayName = getPreviewDisplayName(preview);
 
   p.note(
     [
-      `Name: ${preview.name || "Unnamed preview"}`,
+      `Name: ${displayName}`,
+      `Key: ${preview.previewKey}`,
       `URL: ${url}`,
       `Created: ${formatRelativeDate(preview.createdAt)}`,
     ].join("\n"),
-    "Active preview",
+    "Attached preview",
   );
 };
 
-export const previewDelete = async () => {
+export const previewAttach = async (keyArg) => {
   const { config, credentials } = await loadConfigOrFail();
 
-  const listResult = await listPreviews(
+  if (!keyArg) {
+    await resolvePreviewKeyInteractively({ config, credentials });
+    return;
+  }
+
+  const spinner = p.spinner();
+  spinner.start("Validating preview...");
+
+  const result = await fetchPreview(
     config.apiBaseUrl,
     credentials.apiKey,
     config.storeId,
+    keyArg,
   );
-  if (!listResult.ok) {
-    p.log.error(listResult.error);
+
+  if (!result.ok) {
+    spinner.stop("Preview not found.", 1);
+    p.log.error("Preview not found. Run tiendu preview list to see available previews.");
     process.exit(1);
   }
 
-  const activePreview = resolveActivePreview(
-    listResult.data,
-    config.previewKey,
+  const preview = result.data;
+  const url = getPreviewUrl(config.apiBaseUrl, preview);
+  const displayName = getPreviewDisplayName(preview);
+  spinner.stop(`Attached to preview "${displayName}" (${preview.previewKey})`);
+  p.log.message(`  ${url}`);
+
+  await writeConfig({ ...config, previewKey: preview.previewKey });
+};
+
+export const previewDetach = async () => {
+  const { config } = await loadConfigOrFail();
+
+  if (!config.previewKey) {
+    p.log.warn("No preview is currently attached.");
+    process.exit(0);
+  }
+
+  const detachedKey = config.previewKey;
+  const { previewKey: _, ...rest } = config;
+  await writeConfig(rest);
+
+  p.log.success(`Detached from preview ${detachedKey}. No active preview.`);
+};
+
+export const previewDelete = async (keyArg) => {
+  const { config, credentials } = await loadConfigOrFail();
+
+  let previewKey = keyArg;
+
+  if (!previewKey) {
+    if (!config.previewKey) {
+      p.log.warn("No preview attached and no key provided.");
+      p.log.info("Run tiendu preview delete <key> or tiendu preview attach first.");
+      process.exit(1);
+    }
+    previewKey = config.previewKey;
+  }
+
+  // Fetch preview to show its name in the confirmation
+  const fetchResult = await fetchPreview(
+    config.apiBaseUrl,
+    credentials.apiKey,
+    config.storeId,
+    previewKey,
   );
-  if (!activePreview) {
-    p.log.error(
-      listResult.data.length === 0
-        ? "No previews found for this store."
-        : "Could not determine the active preview. Run tiendu preview list first.",
-    );
+
+  if (!fetchResult.ok) {
+    p.log.error(`Preview ${previewKey} not found.`);
     process.exit(1);
   }
 
+  const displayName = getPreviewDisplayName(fetchResult.data);
+  const url = getPreviewUrl(config.apiBaseUrl, fetchResult.data);
+
   const confirmed = await p.confirm({
-    message: `Delete preview ${activePreview.previewKey}?`,
+    message: `Delete preview ${previewKey} "${displayName}" (${url})?`,
   });
 
   if (p.isCancel(confirmed) || !confirmed) {
@@ -320,7 +518,7 @@ export const previewDelete = async () => {
     config.apiBaseUrl,
     credentials.apiKey,
     config.storeId,
-    activePreview.previewKey,
+    previewKey,
   );
 
   if (!result.ok) {
@@ -331,48 +529,56 @@ export const previewDelete = async () => {
 
   spinner.stop("Preview deleted.");
 
-  const { previewKey, ...rest } = config;
-  await writeConfig(rest);
+  if (config.previewKey === previewKey) {
+    const { previewKey: _, ...rest } = config;
+    await writeConfig(rest);
+  }
 };
 
 export const previewOpen = async () => {
   const { config, credentials } = await loadConfigOrFail();
 
+  if (!config.previewKey) {
+    p.log.warn("No preview attached. Run tiendu preview attach or tiendu preview create.");
+    process.exit(1);
+  }
+
   const spinner = p.spinner();
   spinner.start("Fetching preview URL...");
 
-  const result = await listPreviews(
+  const result = await fetchPreview(
     config.apiBaseUrl,
     credentials.apiKey,
     config.storeId,
+    config.previewKey,
   );
 
   if (!result.ok) {
-    spinner.stop("Failed to fetch previews.", 1);
-    p.log.error(result.error);
-    process.exit(1);
-  }
-
-  const preview = resolveActivePreview(result.data, config.previewKey);
-  if (!preview) {
-    spinner.stop("Could not determine the active preview.", 1);
-    p.log.error(
-      result.data.length === 0
-        ? "No previews found for this store."
-        : "Run tiendu preview list and then set or recreate the preview.",
-    );
+    spinner.stop("Preview not found.", 1);
+    p.log.error("Stored preview was not found. Run tiendu preview list.");
     process.exit(1);
   }
 
-  const url = buildPreviewUrl(config.apiBaseUrl, preview.previewHostname);
+  const preview = result.data;
+  const url = getPreviewUrl(config.apiBaseUrl, preview);
   spinner.stop(`Opening ${url}`);
 
-  const { exec } = await import("node:child_process");
-  const cmd =
-    process.platform === "darwin"
-      ? "open"
-      : process.platform === "win32"
-        ? "start"
-        : "xdg-open";
-  exec(`${cmd} ${url}`);
+  const { spawn } = await import("node:child_process");
+
+  if (process.platform === "win32") {
+    const child = spawn("cmd", ["/c", "start", "", url], {
+      detached: true,
+      stdio: "ignore",
+      windowsHide: true,
+    });
+    child.unref();
+    return;
+  }
+
+  const cmd = process.platform === "darwin" ? "open" : "xdg-open";
+  const child = spawn(cmd, [url], {
+    detached: true,
+    stdio: "ignore",
+  });
+  child.unref();
 };

package/lib/publish.mjs

@@ -1,18 +1,35 @@
 import * as p from "@clack/prompts";
-import { loadConfigOrFail, writeConfig, isBuiltTheme } from "./config.mjs";
-import { publishPreview } from "./preview.mjs";
+import { loadConfigOrFail, isBuiltTheme } from "./config.mjs";
+import {
+  fetchPreviewDetails,
+  publishPreview,
+  resolvePreviewKeyInteractively,
+} from "./preview.mjs";
 import { push } from "./push.mjs";
 
-export const publish = async ({ skipBuild = false } = {}) => {
+export const publish = async ({ skipBuild = false, previewKey: previewKeyArg } = {}) => {
   const { config, credentials } = await loadConfigOrFail();
 
-  if (!config.previewKey) {
-    p.log.error("No active preview. Create one with: tiendu preview create");
-    process.exit(1);
-  }
+  // Resolve preview key: explicit arg > interactive picker
+  const previewKey = previewKeyArg ?? await resolvePreviewKeyInteractively({ config, credentials });
+
+  // Fetch preview to show its name in the confirmation
+  const fetchResult = await fetchPreviewDetails(
+    config.apiBaseUrl,
+    credentials.apiKey,
+    config.storeId,
+    previewKey,
+  );
+
+  const displayName = fetchResult.ok
+    ? fetchResult.data.displayName
+    : previewKey;
+  const previewUrl = fetchResult.ok ? fetchResult.data.url : null;
 
   const confirmed = await p.confirm({
-    message: `Publish preview ${config.previewKey} to the live storefront?`,
+    message: previewUrl
+      ? `Publish preview "${displayName}" (${previewKey}) at ${previewUrl} to the live storefront?`
+      : `Publish preview "${displayName}" (${previewKey}) to the live storefront?`,
   });
 
   if (p.isCancel(confirmed) || !confirmed) {
@@ -26,17 +43,17 @@ export const publish = async ({ skipBuild = false } = {}) => {
         ? "Syncing existing dist/ output to the preview before publishing..."
         : "Building and syncing the latest dist/ output before publishing...",
     );
-    await push({ skipBuild });
+    await push({ skipBuild, previewKey });
   }
 
   const spinner = p.spinner();
-  spinner.start("Publishing preview...");
+  spinner.start("Publishing preview to live storefront...");
 
   const result = await publishPreview(
     config.apiBaseUrl,
     credentials.apiKey,
     config.storeId,
-    config.previewKey,
+    previewKey,
   );
 
   if (!result.ok) {
@@ -45,10 +62,8 @@ export const publish = async ({ skipBuild = false } = {}) => {
     process.exit(1);
   }
 
-  spinner.stop("Preview published. Your live storefront has been updated.");
-  p.log.info("All previews for this store have been removed.");
-
-  // Remove preview key from config
-  const { previewKey, ...rest } = config;
-  await writeConfig(rest);
+  spinner.stop(`Preview ${previewKey} published. Your live storefront has been updated.`);
+  if (previewUrl) {
+    p.log.message(`  ${previewUrl}`);
+  }
 };

package/lib/pull.mjs

@@ -1,6 +1,7 @@
 import * as p from "@clack/prompts";
 import { loadConfigOrFail, isBuiltTheme, getDistDir } from "./config.mjs";
-import { downloadStorefrontArchive } from "./api.mjs";
+import { downloadStorefrontArchive, downloadPreviewArchive } from "./api.mjs";
+import { fetchPreviewDetails } from "./preview.mjs";
 import { extractZip } from "./zip.mjs";
 
 /** @param {number} bytes */
@@ -10,32 +11,56 @@ const formatBytes = (bytes) => {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 };
 
-export const pull = async () => {
+export const pull = async ({ previewKey } = {}) => {
   const { config, credentials } = await loadConfigOrFail();
+  const previewDetails = previewKey
+    ? await fetchPreviewDetails(
+        config.apiBaseUrl,
+        credentials.apiKey,
+        config.storeId,
+        previewKey,
+      )
+    : null;
 
   const spinner = p.spinner();
-  spinner.start(`Downloading theme from store #${config.storeId}...`);
+  const isPreviewPull = Boolean(previewKey);
 
-  const result = await downloadStorefrontArchive(
-    config.apiBaseUrl,
-    credentials.apiKey,
-    config.storeId,
+  spinner.start(
+    isPreviewPull
+      ? `Downloading preview ${previewKey} from store #${config.storeId}...`
+      : `Downloading live theme from store #${config.storeId}...`,
   );
 
+  const result = isPreviewPull
+    ? await downloadPreviewArchive(
+        config.apiBaseUrl,
+        credentials.apiKey,
+        config.storeId,
+        previewKey,
+      )
+    : await downloadStorefrontArchive(
+        config.apiBaseUrl,
+        credentials.apiKey,
+        config.storeId,
+      );
+
   if (!result.ok) {
     spinner.stop("Download failed.", 1);
     p.log.error(result.error);
     process.exit(1);
   }
 
-  spinner.stop(
-    `Archive received (${formatBytes(result.data.length)}). Extracting...`,
-  );
+  spinner.message(`Extracting archive (${formatBytes(result.data.length)})...`);
 
   const outputDir = (await isBuiltTheme()) ? getDistDir() : process.cwd();
   const extractedFiles = await extractZip(result.data, outputDir);
 
-  p.log.success(
-    `${extractedFiles.length} file${extractedFiles.length === 1 ? "" : "s"} extracted.`,
+  const suffix = isPreviewPull ? ` from preview ${previewKey}` : "";
+  spinner.stop(
+    `${extractedFiles.length} file${extractedFiles.length === 1 ? "" : "s"} extracted${suffix}.`,
   );
+
+  if (previewDetails?.ok) {
+    p.log.message(`  ${previewDetails.data.url}`);
+  }
 };