htmlhost-cli 2.2.1 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htmlhost-cli",
-  "version": "2.2.1",
+  "version": "2.4.0",
   "description": "Deploy HTML files from the terminal — htmlhost.co CLI",
   "type": "module",
   "bin": {

package/src/api.mjs

@@ -112,6 +112,57 @@ export async function uploadFile(path, filePath, fileName, mimeType) {
   }, `upload ${fileName}`);
 }
 
+const DIRECT_UPLOAD_THRESHOLD = 4 * 1024 * 1024; // 4 MB
+
+/**
+ * Upload a media file. Automatically switches between multipart POST (<=4MB)
+ * and direct-to-R2 presigned upload (>4MB) to stay within Vercel body limits.
+ */
+export async function uploadMediaFile(filePath, fileName, mimeType) {
+  const { statSync, readFileSync } = await import("node:fs");
+  const stats = statSync(filePath);
+  const size = stats.size;
+
+  if (size <= DIRECT_UPLOAD_THRESHOLD) {
+    const data = await uploadFile("/api/media", filePath, fileName, mimeType);
+    return {
+      ...data,
+      fullUrl: `${getApi()}${data.url}`,
+    };
+  }
+
+  // Large file direct-to-R2 flow
+  return withRetry(async () => {
+    // 1. Get presigned upload URL
+    const presign = await post("/api/media/presign", {
+      filename: fileName,
+      mimeType,
+      size,
+    });
+
+    // 2. Direct PUT to R2
+    const fileBuffer = readFileSync(filePath);
+    const putRes = await fetch(presign.uploadUrl, {
+      method: "PUT",
+      headers: { "Content-Type": mimeType },
+      body: fileBuffer,
+    });
+    if (!putRes.ok) {
+      throw new ApiError(`Direct upload failed: HTTP ${putRes.status}`, putRes.status);
+    }
+
+    // 3. Confirm upload
+    const confirmed = await post("/api/media/confirm", {
+      key: presign.key,
+    });
+
+    return {
+      ...confirmed,
+      fullUrl: `${getApi()}${confirmed.url}`,
+    };
+  }, `upload ${fileName} (direct)`);
+}
+
 /**
  * Download a file from a URL as a Buffer.
  * Used for fetching binary assets via presigned R2 download URLs.
@@ -124,3 +175,4 @@ export async function downloadBuffer(url) {
   return Buffer.from(arrayBuffer);
 }
 
+

package/src/cli.mjs

@@ -3,14 +3,16 @@
  */
 import { bold, dim, cyan, err } from "./ui.mjs";
 import { ApiError } from "./api.mjs";
+import { startUpdateCheck, applyUpdate } from "./update.mjs";
 
-const VERSION = "2.2.1";
+const VERSION = "2.4.0";
 
 const HELP = `
   ${bold("htmlhost")} ${dim(`v${VERSION}`)} — deploy HTML from the terminal
 
   ${bold("Usage:")}
     ${cyan("htmlhost deploy")} [file|dir] [opts]  Deploy file or directory
+    ${cyan("htmlhost upload")} <file|dir...> [opts] Upload media file or directory
     ${cyan("htmlhost pull")} [slug] [opts]        Pull remote changes to local
     ${cyan("htmlhost clone")} <slug> [dir]        Clone a site to a local directory
     ${cyan("htmlhost list")}                     List your sites
@@ -28,6 +30,11 @@ const HELP = `
     --no-assets       Skip auto-uploading local assets (single-file only)
     --no-pull-check   Skip remote change detection before deploy
 
+  ${bold("Upload options:")}
+    --open            Open the uploaded media URL in browser
+    --no-copy         Skip copying the URL to clipboard
+    --json            Output response as JSON
+
   ${bold("Pull options:")}
     --force, -f       Pull without confirmation prompt
     --dry-run         Show what would change without writing
@@ -46,13 +53,11 @@ const HELP = `
     ${dim("$")} htmlhost deploy                ${dim("# deploys cwd as a site")}
     ${dim("$")} htmlhost deploy ./my-project   ${dim("# deploys a specific folder")}
     ${dim("$")} htmlhost deploy page.html      ${dim("# deploys a single file")}
-    ${dim("$")} htmlhost deploy --ttl 30d      ${dim("# deploy with 30-day TTL")}
-    ${dim("$")} htmlhost deploy --new          ${dim("# force new site")}
-    ${dim("$")} htmlhost deploy --json         ${dim("# JSON output for CI/CD")}
+    ${dim("$")} htmlhost upload assets/hero.png ${dim("# upload image, copy URL to clipboard")}
+    ${dim("$")} htmlhost upload assets/        ${dim("# upload all files in directory")}
+    ${dim("$")} htmlhost upload photo.jpg --open
     ${dim("$")} htmlhost pull                  ${dim("# pull remote changes")}
-    ${dim("$")} htmlhost pull my-site --force  ${dim("# pull without prompting")}
     ${dim("$")} htmlhost clone my-site         ${dim("# clone into ./my-site/")}
-    ${dim("$")} htmlhost clone my-site ./proj  ${dim("# clone into ./proj/")}
     ${dim("$")} htmlhost delete old-project --force
 
   ${bold("Update:")}
@@ -83,6 +88,9 @@ export async function run(argv) {
     return;
   }
 
+  // Start update check in parallel (non-blocking, won't slow the command)
+  const updatePromise = jsonMode ? Promise.resolve(null) : startUpdateCheck(VERSION);
+
   try {
     switch (command) {
       case "login": {
@@ -105,6 +113,11 @@ export async function run(argv) {
         await deploy(args, { json: jsonMode });
         break;
       }
+      case "upload": {
+        const { upload } = await import("./commands/upload.mjs");
+        await upload(args, { json: jsonMode });
+        break;
+      }
       case "pull": {
         const { pull } = await import("./commands/pull.mjs");
         await pull(args);
@@ -132,10 +145,18 @@ export async function run(argv) {
         await open(args);
         break;
       }
-      default:
+      default: {
+        // Handle common flag misspellings
+        if (command === "-version" || command === "version") {
+          console.log(VERSION);
+          console.log(dim(`  (Tip: use ${cyan("htmlhost -v")} or ${cyan("htmlhost --version")})`));
+          return;
+        }
+
         err(`Unknown command: ${command}`);
         console.log(`  Run ${cyan("htmlhost --help")} for usage.`);
         process.exit(1);
+      }
     }
   } catch (e) {
     if (e instanceof ApiError) {
@@ -144,4 +165,8 @@ export async function run(argv) {
     }
     throw e;
   }
+
+  // After command finishes, check if an update is available
+  const updateInfo = await updatePromise;
+  await applyUpdate(updateInfo);
 }

package/src/commands/deploy.mjs

@@ -3,11 +3,50 @@ import { basename, resolve, dirname, join, extname } from "node:path";
 import { createInterface } from "node:readline";
 import { createHash } from "node:crypto";
 import { post } from "../api.mjs";
-import { ok, err, info, cyan, dim, bold, yellow, green, formatBytes, mimeFromExt } from "../ui.mjs";
+import { ok, err, info, warn, cyan, dim, bold, yellow, green, formatBytes, mimeFromExt } from "../ui.mjs";
 import { checkRemoteChanges } from "./pull.mjs";
 
 const LINK_FILE = ".htmlhost";
 
+/**
+ * Upload a file to a presigned URL with automatic retry.
+ * Retries up to 3 times with exponential backoff on network errors.
+ */
+const MAX_RETRIES = 3;
+
+async function uploadWithRetry(url, contentType, buffer, filePath, fileSize) {
+  for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+    try {
+      const res = await fetch(url, {
+        method: "PUT",
+        headers: { "Content-Type": contentType },
+        body: buffer,
+      });
+
+      if (!res.ok) {
+        throw new Error(`Server returned ${res.status}`);
+      }
+
+      ok(`Uploaded ${cyan(filePath)} ${dim(`(${formatBytes(fileSize)})`)}`);
+      return;
+    } catch (e) {
+      if (attempt < MAX_RETRIES) {
+        const delay = attempt * 2; // 2s, 4s
+        warn(
+          `Upload failed for ${cyan(filePath)} (${e.message}). ` +
+          `Retrying in ${delay}s… (${attempt}/${MAX_RETRIES})`
+        );
+        await new Promise((r) => setTimeout(r, delay * 1000));
+      } else {
+        err(
+          `Failed to upload ${cyan(filePath)} after ${MAX_RETRIES} attempts: ${e.message}`
+        );
+        process.exit(1);
+      }
+    }
+  }
+}
+
 /**
  * Default ignore patterns for directory deploys.
  * Matches directory names and file names/patterns.
@@ -434,24 +473,26 @@ async function deployDirectory(dirPath, { ttl, title, slug: explicitSlug, forceN
     let uploadedCount = 0;
     let skippedCount = 0;
 
+    // Write .htmlhost early so a crash mid-upload doesn't orphan the site
+    if (generatedSlug && !existingSlug) {
+      existingSlug = generatedSlug;
+      writeLink(dirPath, {
+        multipage: {
+          slug: existingSlug,
+          url: `${existingSlug}.htmlhost.co`,
+          pageCount: pagePayloads.length,
+        },
+      });
+    }
+
     for (const u of uploadUrls) {
       const file = assetFiles.find(f => f.relativePath === u.path);
       
       if (u.uploadUrl) {
-        const res = await fetch(u.uploadUrl, {
-          method: "PUT",
-          headers: { "Content-Type": u.mimeType },
-          body: file.buffer
-        });
-        
-        if (!res.ok) {
-          err(`Failed to upload ${u.path}`);
-          process.exit(1);
-        }
-        ok(`✓ Uploaded ${cyan(u.path)} ${dim(`(${formatBytes(file.size)})`)}`);
+        await uploadWithRetry(u.uploadUrl, u.mimeType, file.buffer, u.path, file.size);
         uploadedCount++;
       } else {
-        ok(`● Skipped (unchanged) ${cyan(u.path)} ${dim(`(${formatBytes(file.size)})`)}`);
+        ok(`Skipped (unchanged) ${cyan(u.path)} ${dim(`(${formatBytes(file.size)})`)}`)
         skippedCount++;
       }
       
@@ -463,10 +504,6 @@ async function deployDirectory(dirPath, { ttl, title, slug: explicitSlug, forceN
         hash: u.hash
       });
     }
-    
-    if (!existingSlug) {
-      existingSlug = generatedSlug;
-    }
   }
 
   // --- Deploy ---
@@ -506,10 +543,12 @@ async function deployDirectory(dirPath, { ttl, title, slug: explicitSlug, forceN
       return;
     }
 
+    const pc = data.pageCount || pagePayloads.length;
+    const ac = assetPayloads.length;
     console.log("");
     console.log(`  ${green("━".repeat(40))}`);
     ok(`${bold("Live")} at ${cyan(`https://${data.url}`)}`);
-    console.log(`   ${dim(`${data.pageCount || pagePayloads.length} pages · ${assetPayloads.length} assets · ${data.ttl} TTL`)}`);
+    console.log(`   ${dim(`${pc} page${pc !== 1 ? "s" : ""} · ${ac} asset${ac !== 1 ? "s" : ""} · ${data.ttl} TTL`)}`);
     console.log("");
 
     for (const { path: pagePath } of pagePayloads) {

package/src/commands/upload.mjs

@@ -0,0 +1,170 @@
+import { resolve, basename, relative } from "node:path";
+import { statSync, existsSync, readdirSync } from "node:fs";
+import { exec } from "node:child_process";
+import { uploadMediaFile } from "../api.mjs";
+import { ok, err, info, dim, cyan, bold, formatBytes, mimeFromExt } from "../ui.mjs";
+
+/**
+ * Copy text to system clipboard (cross-platform, fail-safe).
+ */
+async function copyToClipboard(text) {
+  try {
+    const { spawn } = await import("node:child_process");
+    let cmd, args;
+    if (process.platform === "darwin") {
+      cmd = "pbcopy";
+      args = [];
+    } else if (process.platform === "win32") {
+      cmd = "clip";
+      args = [];
+    } else if (process.env.WAYLAND_DISPLAY) {
+      cmd = "wl-copy";
+      args = [];
+    } else {
+      cmd = "xclip";
+      args = ["-selection", "clipboard"];
+    }
+
+    return await new Promise((res) => {
+      const proc = spawn(cmd, args, { stdio: ["pipe", "ignore", "ignore"] });
+      proc.on("error", () => res(false));
+      proc.on("close", (code) => res(code === 0));
+      proc.stdin.write(text);
+      proc.stdin.end();
+    });
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Recursively collect all files in a directory, ignoring hidden files/folders.
+ */
+function collectFiles(dir) {
+  const files = [];
+  const entries = readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    if (entry.name.startsWith(".")) continue;
+    const full = resolve(dir, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...collectFiles(full));
+    } else if (entry.isFile()) {
+      files.push(full);
+    }
+  }
+
+  return files;
+}
+
+/**
+ * htmlhost upload <file|dir...> — upload media files and get hosted URLs.
+ */
+export async function upload(args, { json = false } = {}) {
+  const flags = new Set(args.filter((a) => a.startsWith("--")));
+  const rawPaths = args.filter((a) => !a.startsWith("--"));
+
+  const noCopy = flags.has("--no-copy");
+  const openInBrowser = flags.has("--open");
+
+  if (rawPaths.length === 0) {
+    err("Usage: htmlhost upload <file|dir...> [options]");
+    console.log(`\n  ${bold("Options:")}`);
+    console.log(`    --open       Open the uploaded media URL in your browser`);
+    console.log(`    --no-copy    Do not copy the URL to clipboard`);
+    console.log(`    --json       Output response as JSON\n`);
+    console.log(`  ${bold("Examples:")}`);
+    console.log(`    ${dim("$")} htmlhost upload assets/og-image-ambient.jpg`);
+    console.log(`    ${dim("$")} htmlhost upload photo.jpg logo.svg`);
+    console.log(`    ${dim("$")} htmlhost upload assets/`);
+    process.exit(1);
+  }
+
+  // Resolve all target files
+  const filePaths = [];
+  for (const raw of rawPaths) {
+    const absPath = resolve(process.cwd(), raw);
+    if (!existsSync(absPath)) {
+      err(`File or directory not found: ${raw}`);
+      process.exit(1);
+    }
+
+    const stat = statSync(absPath);
+    if (stat.isDirectory()) {
+      const inside = collectFiles(absPath);
+      if (inside.length === 0) {
+        if (!json) err(`No files found in directory: ${raw}`);
+        process.exit(1);
+      }
+      filePaths.push(...inside);
+    } else if (stat.isFile()) {
+      filePaths.push(absPath);
+    }
+  }
+
+  if (filePaths.length === 0) {
+    err("No files to upload.");
+    process.exit(1);
+  }
+
+  const results = [];
+
+  if (!json && filePaths.length > 1) {
+    console.log("");
+    info(`Uploading ${bold(String(filePaths.length))} files…`);
+  }
+
+  for (const filePath of filePaths) {
+    const fileName = basename(filePath);
+    const relPath = relative(process.cwd(), filePath) || fileName;
+    const stat = statSync(filePath);
+    const mime = mimeFromExt(fileName);
+
+    if (!json && filePaths.length === 1) {
+      info(`Uploading ${cyan(relPath)} ${dim(`(${formatBytes(stat.size)})`)}…`);
+    }
+
+    const uploaded = await uploadMediaFile(filePath, fileName, mime);
+    results.push({
+      ...uploaded,
+      localPath: relPath,
+    });
+
+    if (!json && filePaths.length > 1) {
+      console.log(`  ${cyan(relPath)} ${dim(`(${formatBytes(stat.size)})`)} → ${uploaded.fullUrl}`);
+    }
+  }
+
+  // JSON output
+  if (json) {
+    console.log(JSON.stringify(results.length === 1 ? results[0] : results, null, 2));
+    return;
+  }
+
+  // Single file completion UX
+  if (results.length === 1) {
+    const item = results[0];
+    let copied = false;
+    if (!noCopy) {
+      copied = await copyToClipboard(item.fullUrl);
+    }
+
+    ok(`Uploaded ${cyan(item.localPath)} ${dim(`(${formatBytes(item.size)})`)}`);
+    console.log(`  ${bold(item.fullUrl)}${copied ? dim("  (copied to clipboard)") : ""}`);
+  } else {
+    console.log("");
+    ok(`All ${bold(String(results.length))} files uploaded successfully`);
+  }
+
+  // Open in browser if requested
+  if (openInBrowser) {
+    const cmd =
+      process.platform === "darwin" ? "open" :
+      process.platform === "win32" ? "start" :
+      "xdg-open";
+
+    for (const r of results) {
+      exec(`${cmd} ${r.fullUrl}`);
+    }
+  }
+}

package/src/update.mjs

@@ -0,0 +1,125 @@
+/**
+ * Auto-update checker for the htmlhost CLI.
+ *
+ * - Checks the npm registry for a newer version (non-blocking).
+ * - Throttles to at most once per 24 hours via ~/.htmlhostrc cache.
+ * - After the command finishes, prints a notice and auto-updates.
+ * - Skipped entirely in --json mode or CI environments.
+ */
+import { execSync } from "node:child_process";
+import { readConfig, writeConfig } from "./config.mjs";
+import { bold, dim, cyan, green, yellow, err as errMsg } from "./ui.mjs";
+
+const PACKAGE_NAME = "htmlhost-cli";
+const CHECK_INTERVAL_MS = 24 * 60 * 60 * 1000; // 24 hours
+
+/**
+ * Start a non-blocking version check. Returns a promise that resolves
+ * to { latest, current, needsUpdate } or null if the check was skipped/failed.
+ */
+export function startUpdateCheck(currentVersion) {
+  // Skip in CI or if explicitly disabled
+  if (process.env.CI || process.env.HTMLHOST_NO_UPDATE_CHECK) {
+    return Promise.resolve(null);
+  }
+
+  // Throttle: check at most once per 24 hours
+  const config = readConfig();
+  const lastCheck = config.lastUpdateCheck || 0;
+  if (Date.now() - lastCheck < CHECK_INTERVAL_MS) {
+    // Still within throttle window — but if we know a newer version
+    // from the last check, surface it without re-fetching
+    if (config.latestVersion && isNewer(config.latestVersion, currentVersion)) {
+      return Promise.resolve({
+        latest: config.latestVersion,
+        current: currentVersion,
+        needsUpdate: true,
+      });
+    }
+    return Promise.resolve(null);
+  }
+
+  // Non-blocking fetch to npm registry
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 5000); // 5s max
+
+  return fetch(`https://registry.npmjs.org/${PACKAGE_NAME}/latest`, {
+    signal: controller.signal,
+    headers: { Accept: "application/json" },
+  })
+    .then((res) => {
+      clearTimeout(timeout);
+      if (!res.ok) return null;
+      return res.json();
+    })
+    .then((data) => {
+      if (!data?.version) return null;
+
+      // Cache the result
+      writeConfig({
+        lastUpdateCheck: Date.now(),
+        latestVersion: data.version,
+      });
+
+      if (data.version === currentVersion) return null;
+
+      // Compare semver: only update if registry version is newer
+      if (!isNewer(data.version, currentVersion)) return null;
+
+      return {
+        latest: data.version,
+        current: currentVersion,
+        needsUpdate: true,
+      };
+    })
+    .catch(() => {
+      clearTimeout(timeout);
+      return null; // Silently ignore network errors
+    });
+}
+
+/**
+ * Simple semver comparison: returns true if a > b.
+ */
+function isNewer(a, b) {
+  const pa = a.split(".").map(Number);
+  const pb = b.split(".").map(Number);
+  for (let i = 0; i < 3; i++) {
+    if ((pa[i] || 0) > (pb[i] || 0)) return true;
+    if ((pa[i] || 0) < (pb[i] || 0)) return false;
+  }
+  return false;
+}
+
+/**
+ * Print an update banner and attempt auto-update.
+ * Called after the main command finishes.
+ */
+export async function applyUpdate(updateInfo) {
+  if (!updateInfo?.needsUpdate) return;
+
+  const { latest, current } = updateInfo;
+
+  console.log("");
+  console.log(
+    `  ${yellow("⬆")}  Update available: ${dim(current)} → ${green(bold(latest))}`
+  );
+  console.log(`     Updating ${cyan(PACKAGE_NAME)}…`);
+
+  try {
+    execSync(`npm update -g ${PACKAGE_NAME}`, {
+      stdio: "pipe",
+      timeout: 30000, // 30s max
+    });
+    console.log(`  ${green("✓")}  Updated to v${latest}`);
+
+    // Clear cached version so we don't show the banner again
+    writeConfig({ latestVersion: latest });
+  } catch (e) {
+    // Permission error or other failure — show manual command
+    console.log(
+      `  ${yellow("!")}  Auto-update failed. Run manually:`
+    );
+    console.log(`     ${cyan(`sudo npm update -g ${PACKAGE_NAME}`)}`);
+  }
+}