htmlhost-cli 1.7.0 → 2.0.0

package/README.md

@@ -1,6 +1,6 @@
 # htmlhost
 
-Deploy HTML files from the terminal. [htmlhost.co](https://htmlhost.co)
+Deploy HTML projects from the terminal. [htmlhost.co](https://htmlhost.co)
 
 ## Install
 
@@ -14,16 +14,16 @@ npm i -g htmlhost-cli
 # Authenticate (get a token at htmlhost.co/settings#keys)
 htmlhost login
 
-# Deploy an HTML file
-htmlhost deploy index.html
+# Deploy the current directory
+htmlhost deploy
 # → https://bold-fern-x3k.htmlhost.co
 
-# Re-deploy to the same URL
-htmlhost deploy index.html --slug bold-fern-x3k
+# Re-deploy (auto-detects from .htmlhost)
+htmlhost deploy
+# → updated https://bold-fern-x3k.htmlhost.co
 
-# Upload assets
-htmlhost upload logo.png
-# → https://htmlhost.co/m/a3f91c2b
+# Deploy a single file
+htmlhost deploy page.html
 ```
 
 ## Commands
@@ -32,30 +32,31 @@ htmlhost upload logo.png
 Authenticate with an API token. Generate one at [htmlhost.co/settings#keys](https://htmlhost.co/settings#keys).
 
 ### `htmlhost deploy [file|dir] [options]`
-Deploy an HTML file — or an entire directory of HTML files — and get live URLs.
+Deploy an HTML project and get a live URL.
 
 ```bash
-# Single file
-htmlhost deploy index.html
+# Deploy current directory (default)
+htmlhost deploy
 
-# All .html files in the current directory (as separate sites)
-htmlhost deploy .
+# Deploy a specific directory
+htmlhost deploy ./my-project
 
-# All .html files as ONE multi-page site
-htmlhost deploy . --pages
+# Deploy a single HTML file
+htmlhost deploy page.html
 ```
 
-Local assets (scripts, CSS, images, fonts) referenced in the HTML are
-automatically uploaded to your media library and the references are rewritten
-to point at the hosted URLs. Files over 10 MB are skipped.
+**Directory deploy (default):** When you run `htmlhost deploy` with no arguments
+(or pass a directory), the entire folder is deployed as a multi-page site. All
+files — HTML, CSS, JS, images, fonts — are uploaded preserving their original
+folder structure. The site is saved to `.htmlhost` so subsequent deploys update
+the same site.
 
-**Directory deploy:** When you pass a directory (or `.`), every `*.html` file is
-deployed as a separate linked site. The mapping is saved to `.htmlhost` so
-subsequent `htmlhost deploy .` updates all of them in place. Shared assets
-(e.g. a `styles.css` referenced by multiple pages) are uploaded once and reused.
+The following files are automatically excluded:
+- `node_modules/`, `.git/`, `.DS_Store`, `.env*`
+- `package-lock.json`, `yarn.lock`, `pnpm-lock.yaml`
+- `.vscode/`, `.idea/`
 
-**Multi-page deploy:** Use `--pages` to deploy a directory as a single
-multi-page site. File names map to URL paths:
+File names map to URL paths:
 
 ```
 index.html       → /
@@ -67,24 +68,28 @@ blog/post-1.html → /blog/post-1
 
 Add a `404.html` file and it will be served automatically for missing pages.
 
+**Single-file deploy:** When you pass a specific file (`htmlhost deploy page.html`),
+only that file is deployed. Local CSS, JS, and images referenced in the HTML are
+automatically inlined or uploaded and rewritten to hosted URLs.
+
 | Option | Description |
 |---|---|
 | `--ttl <value>` | Set expiry: `1d`, `7d`, `30d`, `never` |
-| `--slug <slug>` | Re-deploy to an existing site (single file only) |
-| `--title <title>` | Set the site title (single file only) |
-| `--new` | Force new sites (ignore .htmlhost link) |
-| `--no-assets` | Skip automatic asset uploading |
-| `--pages` | Deploy directory as one multi-page site |
+| `--slug <slug>` | Re-deploy to an existing site |
+| `--title <title>` | Set the site title |
+| `--new` | Force new site (ignore .htmlhost link) |
+| `--no-assets` | Skip automatic asset processing (single-file only) |
+| `--json` | Output result as JSON (for CI/CD) |
 
 ### `htmlhost list`
-List all your sites with URLs, sizes, and expiry.
+List all your sites with titles, sizes, TTL, and expiry. Multi-page sites are marked with 📄.
+
+### `htmlhost open <slug>`
+Open a deployed site in the default browser.
 
 ### `htmlhost delete <slug>`
 Delete a site. Use `--force` to skip confirmation.
 
-### `htmlhost upload <file|dir>`
-Upload media assets to your library. Returns URLs you can use in your HTML.
-
 ### `htmlhost whoami`
 Show current authenticated user and plan.
 

package/package.json

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

package/src/cli.mjs

@@ -4,7 +4,7 @@
 import { bold, dim, cyan, err } from "./ui.mjs";
 import { ApiError } from "./api.mjs";
 
-const VERSION = "1.7.0";
+const VERSION = "2.0.0";
 
 const HELP = `
   ${bold("htmlhost")} ${dim(`v${VERSION}`)} — deploy HTML from the terminal
@@ -13,38 +13,34 @@ const HELP = `
     ${cyan("htmlhost deploy")} [file|dir] [opts]  Deploy file or directory
     ${cyan("htmlhost list")}                     List your sites
     ${cyan("htmlhost delete")} <slug>            Delete a site
-    ${cyan("htmlhost upload")} <file|dir>        Upload media assets
     ${cyan("htmlhost login")}                    Authenticate with an API token
     ${cyan("htmlhost whoami")}                   Show current user
     ${cyan("htmlhost logout")}                   Remove saved token
+    ${cyan("htmlhost open")} <slug>              Open a site in the browser
 
   ${bold("Deploy options:")}
     --ttl <value>     Set TTL: 1d, 7d, 30d, never
     --slug <slug>     Re-deploy to a specific site
     --title <title>   Set the site title
     --new             Force a new site (ignore .htmlhost link)
-    --no-assets       Skip auto-uploading local assets
-    --pages           Deploy directory as one multi-page site
+    --no-assets       Skip auto-uploading local assets (single-file only)
 
   ${bold("Delete options:")}
     --force, -f       Skip confirmation prompt
 
   ${bold("How deploy works:")}
-    1st deploy: creates a site, saves slug to ${dim(".htmlhost")}
-    2nd deploy: reads ${dim(".htmlhost")}, updates the same site
-    Directory: deploys each .html as a separate linked site
-    ${cyan("--pages")}: deploys all .html as pages within ONE site
-    Local scripts, CSS, and images are auto-uploaded
-    and rewritten to hosted URLs (files >10 MB are skipped)
+    No args or dir: deploys entire folder as a multi-page site
+    Single file:    deploys just that file (assets auto-inlined)
+    Linked:         reads ${dim(".htmlhost")}, updates the same site
+    Local CSS, JS, images, and fonts are auto-uploaded
 
   ${bold("Examples:")}
-    ${dim("$")} htmlhost deploy                ${dim("# deploys ./index.html")}
-    ${dim("$")} htmlhost deploy page.html      ${dim("# deploys a specific file")}
-    ${dim("$")} htmlhost deploy .              ${dim("# deploys all *.html in dir")}
-    ${dim("$")} htmlhost deploy . --pages      ${dim("# multi-page site from dir")}
+    ${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 sites")}
-    ${dim("$")} htmlhost upload logo.png
+    ${dim("$")} htmlhost deploy --new          ${dim("# force new site")}
+    ${dim("$")} htmlhost deploy --json         ${dim("# JSON output for CI/CD")}
     ${dim("$")} htmlhost delete old-project --force
 
   ${dim(`Docs: https://htmlhost.co/docs`)}
@@ -54,6 +50,14 @@ export async function run(argv) {
   const command = argv[0];
   const args = argv.slice(1);
 
+  // Global --json flag — suppress human output, print JSON
+  const jsonMode = args.includes("--json");
+  if (jsonMode) {
+    const filtered = args.filter((a) => a !== "--json");
+    args.length = 0;
+    args.push(...filtered);
+  }
+
   if (!command || command === "help" || command === "--help" || command === "-h") {
     console.log(HELP);
     return;
@@ -83,13 +87,13 @@ export async function run(argv) {
       }
       case "deploy": {
         const { deploy } = await import("./commands/deploy.mjs");
-        await deploy(args);
+        await deploy(args, { json: jsonMode });
         break;
       }
       case "list":
       case "ls": {
         const { list } = await import("./commands/list.mjs");
-        await list();
+        await list({ json: jsonMode });
         break;
       }
       case "delete":
@@ -98,9 +102,9 @@ export async function run(argv) {
         await deleteSite(args);
         break;
       }
-      case "upload": {
-        const { upload } = await import("./commands/upload.mjs");
-        await upload(args);
+      case "open": {
+        const { open } = await import("./commands/open.mjs");
+        await open(args);
         break;
       }
       default:

package/src/commands/deploy.mjs

@@ -1,12 +1,50 @@
 import { readFileSync, writeFileSync, statSync, existsSync, readdirSync } from "node:fs";
-import { basename, resolve, dirname, join } from "node:path";
+import { basename, resolve, dirname, join, extname, relative } from "node:path";
 import { createInterface } from "node:readline";
 import { post } from "../api.mjs";
 import { ok, err, info, cyan, dim, bold, yellow, green, formatBytes } from "../ui.mjs";
 import { processAssets } from "../assets.mjs";
+import { uploadFile } from "../api.mjs";
+import { getApi } from "../config.mjs";
+import { mimeFromExt } from "../ui.mjs";
 
 const LINK_FILE = ".htmlhost";
 
+/**
+ * Default ignore patterns for directory deploys.
+ * Matches directory names and file names/patterns.
+ */
+const DEFAULT_IGNORE = [
+  "node_modules",
+  ".git",
+  ".DS_Store",
+  ".htmlhost",
+  ".env",
+  ".env.local",
+  ".env.production",
+  ".env.development",
+  ".vscode",
+  ".idea",
+  "Thumbs.db",
+  ".gitignore",
+  ".npmrc",
+  "package-lock.json",
+  "yarn.lock",
+  "pnpm-lock.yaml",
+];
+
+/**
+ * Check if a file/directory name should be ignored.
+ */
+function shouldIgnore(name) {
+  if (name.startsWith(".")) {
+    // Allow dotfiles that aren't in the ignore list explicitly
+    // but block common ones
+    if (DEFAULT_IGNORE.includes(name)) return true;
+  }
+  return DEFAULT_IGNORE.includes(name);
+}
+
 /**
  * Read the project link from .htmlhost
  */
@@ -28,6 +66,20 @@ function writeLink(dir, data) {
   writeFileSync(linkPath, JSON.stringify(data, null, 2) + "\n", "utf8");
 }
 
+/**
+ * Simple y/N confirmation prompt.
+ */
+function promptConfirm(question) {
+  return new Promise((resolve) => {
+    const rl = createInterface({ input: process.stdin, output: process.stdout });
+    rl.question(`  ${question} ${dim("(Y/n)")} `, (answer) => {
+      rl.close();
+      const a = answer.trim().toLowerCase();
+      resolve(a === "" || a === "y" || a === "yes");
+    });
+  });
+}
+
 /**
  * Interactive menu prompt — returns the index of the selected option.
  */
@@ -50,65 +102,47 @@ function promptChoice(question, options) {
 }
 
 /**
- * htmlhost deploy [file|dir] [--ttl 7d] [--slug existing-slug] [--title "My Site"] [--new] [--no-assets] [--pages]
+ * htmlhost deploy [file|dir] [--ttl 7d] [--slug existing-slug] [--title "My Site"] [--new] [--no-assets]
  *
- * - Defaults to index.html in the current directory
- * - If a directory (or ".") is given, deploys all *.html files as separate linked sites
- * - Use --pages with a directory to deploy all *.html files as pages within ONE multi-page site
- * - Remembers the site(s) via .htmlhost file (auto re-deploy)
+ * - No args or "." → deploys entire cwd as a multi-page site (with confirmation)
+ * - A directory → deploys that directory as a multi-page site
+ * - A single file → deploys just that file (with asset inlining)
+ * - Remembers the site via .htmlhost file (auto re-deploy)
  * - Use --new to force fresh deploys
  */
-export async function deploy(args) {
-  let file = args.find((a) => !a.startsWith("--"));
+export async function deploy(args, { json = false } = {}) {
+  let target = args.find((a) => !a.startsWith("--"));
 
   const ttl = getFlag(args, "--ttl");
   const title = getFlag(args, "--title");
+  const slug = getFlag(args, "--slug");
   const forceNew = args.includes("--new");
   const skipAssets = args.includes("--no-assets");
-  const multiPage = args.includes("--pages");
-
-  // Check if the target is a directory
-  if (file) {
-    const filePath = resolve(file);
-    try {
-      const stat = statSync(filePath);
-      if (stat.isDirectory()) {
-        if (multiPage) {
-          return deployMultiPage(filePath, { ttl, title, forceNew, skipAssets });
-        }
-        return deployDirectory(filePath, { ttl, forceNew, skipAssets });
-      }
-    } catch {
-      // Will be caught below in single-file flow
-    }
-  }
 
-  // --pages without explicit dir defaults to cwd
-  if (multiPage && !file) {
-    return deployMultiPage(resolve("."), { ttl, title, forceNew, skipAssets });
+  // Resolve target
+  const targetPath = resolve(target || ".");
+
+  let stat;
+  try {
+    stat = statSync(targetPath);
+  } catch {
+    err(`Not found: ${target || "."}`);
+    process.exit(1);
   }
 
-  // Default to index.html in the current directory
-  if (!file) {
-    const defaultFile = resolve("index.html");
-    if (existsSync(defaultFile)) {
-      file = "index.html";
-      info(`No file specified, using ${cyan("index.html")}`);
-    } else {
-      err("No file specified and no index.html found in the current directory.");
-      console.log(`  ${dim("Usage: htmlhost deploy [file.html|dir] [--ttl 7d]")}`);
-      process.exit(1);
-    }
+  // --- Directory deploy (default) ---
+  if (stat.isDirectory()) {
+    return deployDirectory(targetPath, { ttl, title, slug, forceNew, json });
   }
 
-  // Single-file deploy
-  await deploySingleFile(file, { ttl, title, forceNew, skipAssets, slug: getFlag(args, "--slug") });
+  // --- Single-file deploy ---
+  await deploySingleFile(target || "index.html", { ttl, title, forceNew, skipAssets, slug, json });
 }
 
 /**
- * Deploy a single HTML file.
+ * Deploy a single HTML file (existing behavior preserved).
  */
-async function deploySingleFile(file, { ttl, title, forceNew, skipAssets, slug }) {
+async function deploySingleFile(file, { ttl, title, forceNew, skipAssets, slug, json }) {
   const filePath = resolve(file);
   const projectDir = dirname(filePath);
   const fileName = basename(filePath);
@@ -118,24 +152,8 @@ async function deploySingleFile(file, { ttl, title, forceNew, skipAssets, slug }
   if (!slug && !forceNew) {
     const link = readLink(projectDir);
 
-    if (link?.sites) {
-      // Multi-file format — warn that only one file is being deployed
-      const siteCount = Object.keys(link.sites).length;
-      if (siteCount > 1) {
-        console.log("");
-        console.log(`  ${yellow("⚠")}  This project has ${bold(String(siteCount))} linked sites but you're deploying only ${cyan(fileName)}.`);
-        console.log(`     ${dim(`To deploy all files, run: ${bold("htmlhost deploy .")}`)}`);
-        console.log("");
-      }
-      // Look up this file's entry in the sites map
-      const entry = link.sites[fileName];
-      if (entry?.slug) {
-        slug = entry.slug;
-        isLinked = true;
-        info(`Linked to ${cyan(slug)} ${dim(`(via .htmlhost sites map)`)}`);
-      }
-    } else if (link?.slug) {
-      // Single-file format (has slug at top level, no sites map)
+    if (link?.slug && !link?.multipage) {
+      // Single-file format
       if (link.onRedeploy === "overwrite") {
         slug = link.slug;
         isLinked = true;
@@ -202,12 +220,10 @@ async function deploySingleFile(file, { ttl, title, forceNew, skipAssets, slug }
 
   // Upload local assets (scripts, css, images) and rewrite references
   if (!skipAssets) {
-    // Load persisted asset cache from .htmlhost
     const existingLink = readLink(projectDir);
     const persistedCache = new Map(Object.entries(existingLink?.assets || {}));
     const result = await processAssets(html, projectDir, undefined, persistedCache);
     html = result.html;
-    // Persist the asset cache for next deploy
     const linkData = readLink(projectDir) || {};
     linkData.assets = Object.fromEntries(result.resolvedCache);
     writeLink(projectDir, linkData);
@@ -222,20 +238,17 @@ async function deploySingleFile(file, { ttl, title, forceNew, skipAssets, slug }
 
   const data = await post("/api/sites", body);
 
-  // Save/update the link — merge into existing .htmlhost instead of clobbering
+  // Save link
   const existingLink = readLink(projectDir);
+  writeLink(projectDir, {
+    slug: data.slug,
+    url: data.url,
+    ...(existingLink?.onRedeploy ? { onRedeploy: existingLink.onRedeploy } : {}),
+  });
 
-  if (existingLink?.sites) {
-    // Multi-file format: merge this file's entry into the existing sites map
-    existingLink.sites[fileName] = { slug: data.slug, url: data.url };
-    writeLink(projectDir, existingLink);
-  } else {
-    // Single-file format: write the flat slug/url (preserve onRedeploy preference)
-    writeLink(projectDir, {
-      slug: data.slug,
-      url: data.url,
-      ...(existingLink?.onRedeploy ? { onRedeploy: existingLink.onRedeploy } : {}),
-    });
+  if (json) {
+    console.log(JSON.stringify(data));
+    return;
   }
 
   console.log("");
@@ -256,221 +269,169 @@ async function deploySingleFile(file, { ttl, title, forceNew, skipAssets, slug }
 }
 
 /**
- * Deploy all *.html files in a directory as separate linked sites.
+ * Deploy a directory as a multi-page site.
+ * All files are uploaded preserving their original folder structure.
+ * Non-HTML files (CSS, JS, images, fonts) are uploaded via the media endpoint
+ * and included as pages with their hosted URLs.
  */
-async function deployDirectory(dirPath, { ttl, forceNew, skipAssets }) {
-  // Find all .html files in the directory (non-recursive, skip dotfiles)
-  const htmlFiles = readdirSync(dirPath)
-    .filter((f) => f.endsWith(".html") && !f.startsWith("."))
-    .sort((a, b) => {
-      // index.html first, then alphabetical
-      if (a === "index.html") return -1;
-      if (b === "index.html") return 1;
-      return a.localeCompare(b);
-    });
+async function deployDirectory(dirPath, { ttl, title, slug: explicitSlug, forceNew, json }) {
+  // Find all files recursively
+  const allFiles = findAllFiles(dirPath, dirPath);
 
-  if (htmlFiles.length === 0) {
-    err("No .html files found in this directory.");
+  if (allFiles.length === 0) {
+    err("No files found in this directory.");
     process.exit(1);
   }
 
+  // Check for index.html
+  const hasIndex = allFiles.some((f) => f.relativePath === "index.html");
+  if (!hasIndex) {
+    const htmlFiles = allFiles.filter((f) => f.relativePath.endsWith(".html"));
+    if (htmlFiles.length === 0) {
+      err("No index.html or HTML files found. Nothing to deploy.");
+      process.exit(1);
+    }
+  }
+
   // Read existing link data
   const link = readLink(dirPath);
-  const existingSites = link?.sites || {};
-  const onRedeploy = link?.onRedeploy || null;
+  const existingSlug = explicitSlug || (!forceNew && link?.multipage?.slug) || null;
 
-  const isRelink = Object.keys(existingSites).length > 0 && !forceNew;
+  // Calculate total size
+  const totalSize = allFiles.reduce((sum, f) => sum + f.size, 0);
+  const htmlFiles = allFiles.filter((f) => f.relativePath.endsWith(".html"));
+  const assetFiles = allFiles.filter((f) => !f.relativePath.endsWith(".html"));
 
+  // Show deploy summary
   console.log("");
-  info(`Found ${cyan(bold(String(htmlFiles.length)))} HTML file${htmlFiles.length > 1 ? "s" : ""} in ${cyan(basename(dirPath) || ".")}`);
-
-  // Show what we're about to do
-  for (const f of htmlFiles) {
-    const linked = existingSites[f];
-    if (linked && !forceNew) {
-      console.log(`   ${dim("↻")} ${f} → ${dim(linked.slug + ".htmlhost.co")}`);
-    } else {
-      console.log(`   ${dim("+")} ${f} → ${dim("new site")}`);
-    }
+  if (existingSlug) {
+    info(`Re-deploying to ${cyan(bold(existingSlug + ".htmlhost.co"))}`);
+  } else {
+    info(`Deploying ${cyan(bold(basename(dirPath) || "."))} as a new site`);
   }
   console.log("");
 
-  // If relinking, ask for confirmation (unless auto-overwrite)
-  if (isRelink && onRedeploy !== "overwrite") {
-    const linkedCount = htmlFiles.filter((f) => existingSites[f]).length;
-    const newCount = htmlFiles.length - linkedCount;
-
-    let desc = `${linkedCount} site${linkedCount > 1 ? "s" : ""} will be overwritten`;
-    if (newCount > 0) desc += `, ${newCount} new`;
-
-    const choice = await promptChoice(
-      `${desc}. Continue?`,
-      [
-        "Yes, deploy all",
-        "Cancel",
-        `Always overwrite ${dim("(remember for this project)")}`,
-      ]
-    );
-
-    switch (choice) {
-      case 0:
-        break;
-      case 1:
-      case -1:
-        console.log("  Cancelled.");
-        process.exit(0);
-        break;
-      case 2:
-        // Save preference so it auto-deploys next time
-        writeLink(dirPath, { sites: existingSites, onRedeploy: "overwrite" });
-        info(`Saved preference: ${dim("always overwrite")}`);
-        break;
-    }
-  }
-
-  // Deploy each file
-  const results = {};
-  let successCount = 0;
-
-  // Shared asset cache across all files — avoids re-uploading the same CSS/JS/image
-  /** @type {Map<string, string>} absolute file path → hosted URL */
-  const assetCache = new Map();
-  // Load persisted asset cache from .htmlhost
-  const existingAssets = link?.assets || {};
-  const persistedCache = new Map(Object.entries(existingAssets));
+  // Show file tree
+  console.log(`  ${bold("Files to deploy:")} ${dim(`(${allFiles.length} files, ${formatBytes(totalSize)})`)}`);
+  console.log("");
 
-  for (const fileName of htmlFiles) {
-    const filePath = join(dirPath, fileName);
-    const stat = statSync(filePath);
+  // Group by directory for cleaner display
+  const maxShow = 20;
+  const shown = allFiles.slice(0, maxShow);
+  for (const f of shown) {
+    const icon = f.relativePath.endsWith(".html") ? "📄" : "📦";
+    console.log(`   ${dim(icon)} ${f.relativePath} ${dim(`(${formatBytes(f.size)})`)}`);
+  }
+  if (allFiles.length > maxShow) {
+    console.log(`   ${dim(`… and ${allFiles.length - maxShow} more files`)}`);
+  }
+  console.log("");
 
+  // Summary line
+  if (htmlFiles.length > 0 && assetFiles.length > 0) {
+    console.log(`  ${dim(`${htmlFiles.length} page${htmlFiles.length > 1 ? "s" : ""} · ${assetFiles.length} asset${assetFiles.length > 1 ? "s" : ""} · ${formatBytes(totalSize)} total`)}`);
     console.log("");
-    info(`${bold(fileName)} ${dim(`(${formatBytes(stat.size)})`)}`);
-
-    let html = readFileSync(filePath, "utf8");
-
-    // Upload local assets with shared + persisted cache
-    if (!skipAssets) {
-      const result = await processAssets(html, dirPath, assetCache, persistedCache);
-      html = result.html;
-    }
-
-    // Determine slug
-    const slug = (!forceNew && existingSites[fileName]?.slug) || null;
-
-    info(slug ? `Re-deploying to ${cyan(slug)}…` : "Deploying new site…");
-
-    const body = { html };
-    if (ttl) body.ttl = ttl;
-    if (slug) body.slug = slug;
-    // No --title for batch; each site auto-titles from <title> tag
-
-    try {
-      const data = await post("/api/sites", body);
-      results[fileName] = { slug: data.slug, url: data.url };
-      successCount++;
-      ok(`${cyan(fileName)} → ${cyan(`https://${data.url}`)}`);
-    } catch (e) {
-      err(`${fileName}: ${e.message}`);
-      // Keep the old link if we had one
-      if (existingSites[fileName]) {
-        results[fileName] = existingSites[fileName];
-      }
-    }
   }
 
-  // Save all links to .htmlhost — re-read to pick up any preference saved
-  // during the prompt flow (the original `onRedeploy` var was captured before
-  // the user's choice was written).
-  const freshLink = readLink(dirPath);
-  const finalOnRedeploy = freshLink?.onRedeploy || onRedeploy;
-  writeLink(dirPath, {
-    sites: { ...existingSites, ...results },
-    assets: Object.fromEntries(persistedCache),
-    ...(finalOnRedeploy ? { onRedeploy: finalOnRedeploy } : {}),
-  });
+  // Confirmation prompt
+  const confirmed = await promptConfirm(
+    existingSlug
+      ? `Overwrite ${cyan(existingSlug + ".htmlhost.co")}?`
+      : `Deploy ${bold(String(allFiles.length))} files to htmlhost?`
+  );
 
-  // Summary
-  console.log("");
-  console.log(`  ${green("━".repeat(40))}`);
-  ok(`${bold(String(successCount))}/${htmlFiles.length} sites deployed`);
-  console.log("");
-  for (const [fileName, site] of Object.entries(results)) {
-    if (site.url) {
-      console.log(`   ${dim(fileName)} → ${cyan(`https://${site.url}`)}`);
-    }
+  if (!confirmed) {
+    console.log("  Cancelled.");
+    process.exit(0);
   }
-  console.log("");
-  console.log(`   ${dim("Linked → .htmlhost")}`);
-  console.log("");
-}
 
-/**
- * Deploy all *.html files in a directory as pages within a single multi-page site.
- * Uses the --pages flag. File names map to URL paths:
- *   index.html → /
- *   about.html → /about
- *   blog/index.html → /blog
- *   blog/post.html → /blog/post
- */
-async function deployMultiPage(dirPath, { ttl, title, forceNew, skipAssets }) {
-  // Find all .html files (recursive) — skip dotfiles
-  const htmlFiles = findHtmlFiles(dirPath, dirPath);
+  console.log("");
 
-  if (htmlFiles.length === 0) {
-    err("No .html files found in this directory.");
-    process.exit(1);
-  }
+  // --- Upload non-HTML assets first ---
+  const api = getApi();
+  /** @type {Map<string, string>} relativePath → hosted URL */
+  const assetUrlMap = new Map();
 
-  // Read existing link data
-  const link = readLink(dirPath);
-  const existingSlug = (!forceNew && link?.multipage?.slug) || null;
+  if (assetFiles.length > 0) {
+    info(`Uploading ${cyan(bold(String(assetFiles.length)))} asset${assetFiles.length > 1 ? "s" : ""}…`);
+    console.log("");
 
-  console.log("");
-  info(`Multi-page deploy: ${cyan(bold(String(htmlFiles.length)))} page${htmlFiles.length > 1 ? "s" : ""} in ${cyan(basename(dirPath) || ".")}`);
-  console.log("");
+    for (const file of assetFiles) {
+      const fileName = basename(file.filePath);
+      const mime = mimeFromExt(fileName);
+
+      try {
+        const data = await uploadFile("/api/media", file.filePath, fileName, mime);
+        const hostedUrl = `${api}${data.url}`;
+        assetUrlMap.set(file.relativePath, hostedUrl);
+        ok(`${cyan(file.relativePath)} ${dim(`(${formatBytes(file.size)})`)} → ${dim("uploaded")}`);
+      } catch (e) {
+        err(`${file.relativePath}: ${e.message}`);
+      }
+    }
 
-  // Show page mapping
-  for (const { relativePath, pagePath } of htmlFiles) {
-    console.log(`   ${dim("📄")} ${relativePath} → ${cyan(pagePath)}`);
+    console.log("");
   }
-  console.log("");
 
-  // If we have a linked slug, confirm overwrite
-  if (existingSlug) {
-    info(`Linked to ${cyan(existingSlug + ".htmlhost.co")} ${dim("(multi-page)")}`);
-  }
+  // --- Build page payloads (HTML files with asset URLs rewritten) ---
+  info(`Processing ${cyan(bold(String(htmlFiles.length)))} page${htmlFiles.length > 1 ? "s" : ""}…`);
 
-  // Process assets and build page payloads
-  const assetCache = new Map();
-  const existingAssets = link?.assets || {};
-  const persistedCache = new Map(Object.entries(existingAssets));
   const pagePayloads = [];
 
-  for (const { filePath, pagePath, relativePath } of htmlFiles) {
-    const stat = statSync(filePath);
-    info(`${bold(relativePath)} ${dim(`(${formatBytes(stat.size)})`)}`);  
+  for (const file of htmlFiles) {
+    let html = readFileSync(file.filePath, "utf8");
+
+    // Rewrite local asset references to hosted URLs
+    for (const [relPath, hostedUrl] of assetUrlMap) {
+      // Replace both quoted forms: "path" and 'path'
+      // Handle relative paths from the HTML file's perspective
+      const htmlDir = dirname(file.relativePath);
+      const assetFromHtml = htmlDir === "." ? relPath : relative(htmlDir, relPath);
+
+      // Replace the original reference and the relative-from-html reference
+      html = replaceAll(html, `"${relPath}"`, `"${hostedUrl}"`);
+      html = replaceAll(html, `'${relPath}'`, `'${hostedUrl}'`);
+      html = replaceAll(html, `"${assetFromHtml}"`, `"${hostedUrl}"`);
+      html = replaceAll(html, `'${assetFromHtml}'`, `'${hostedUrl}'`);
+
+      // Also handle ./ prefix
+      html = replaceAll(html, `"./${relPath}"`, `"${hostedUrl}"`);
+      html = replaceAll(html, `'./${relPath}'`, `'${hostedUrl}'`);
+      if (assetFromHtml !== relPath) {
+        html = replaceAll(html, `"./${assetFromHtml}"`, `"${hostedUrl}"`);
+        html = replaceAll(html, `'./${assetFromHtml}'`, `'${hostedUrl}'`);
+      }
 
-    let html = readFileSync(filePath, "utf8");
+      // Handle url() in CSS
+      html = replaceAll(html, `url(${relPath})`, `url(${hostedUrl})`);
+      html = replaceAll(html, `url(${assetFromHtml})`, `url(${hostedUrl})`);
+      html = replaceAll(html, `url(./${relPath})`, `url(${hostedUrl})`);
+    }
 
-    if (!skipAssets) {
-      const result = await processAssets(html, dirname(filePath), assetCache, persistedCache);
-      html = result.html;
+    // Derive page path
+    let pagePath;
+    if (file.relativePath === "index.html") {
+      pagePath = "/";
+    } else if (basename(file.relativePath) === "index.html") {
+      const dirRel = dirname(file.relativePath);
+      pagePath = `/${dirRel}`;
+    } else {
+      pagePath = "/" + file.relativePath.replace(/\.html$/, "");
     }
 
-    pagePayloads.push({
-      path: pagePath,
-      html,
-    });
+    pagePayloads.push({ path: pagePath, html });
+    ok(`${cyan(file.relativePath)} → ${cyan(pagePath)}`);
   }
 
-  // Deploy all pages as one multi-page site
+  // --- Deploy ---
+  console.log("");
+  info(existingSlug ? `Deploying to ${cyan(existingSlug)}…` : "Deploying new site…");
+
   const body = { pages: pagePayloads };
   if (ttl) body.ttl = ttl;
   if (existingSlug) body.slug = existingSlug;
   if (title) body.title = title;
 
-  info(existingSlug ? `Re-deploying to ${cyan(existingSlug)}…` : "Deploying new multi-page site…");
-
   try {
     const data = await post("/api/sites", body);
 
@@ -481,21 +442,25 @@ async function deployMultiPage(dirPath, { ttl, title, forceNew, skipAssets }) {
         url: data.url,
         pageCount: data.pageCount || pagePayloads.length,
       },
-      assets: Object.fromEntries(persistedCache),
     });
 
+    if (json) {
+      console.log(JSON.stringify(data));
+      return;
+    }
+
     console.log("");
     console.log(`  ${green("━".repeat(40))}`);
     ok(`${bold("Live")} at ${cyan(`https://${data.url}`)}`);
     console.log(`   ${dim(`${data.pageCount || pagePayloads.length} pages · ${data.ttl} TTL`)}`);
     console.log("");
 
-    for (const { pagePath } of htmlFiles) {
+    for (const { path: pagePath } of pagePayloads) {
       const urlPath = pagePath === "/" ? "" : pagePath;
       console.log(`   ${cyan(`https://${data.url}${urlPath}`)}`);
     }
     console.log("");
-    console.log(`   ${dim("Linked → .htmlhost (multipage)")}`);
+    console.log(`   ${dim("Linked → .htmlhost")}`);
     console.log("");
   } catch (e) {
     err(`Deploy failed: ${e.message}`);
@@ -504,48 +469,58 @@ async function deployMultiPage(dirPath, { ttl, title, forceNew, skipAssets }) {
 }
 
 /**
- * Recursively find all .html files and derive their page paths.
- * Returns [{ filePath, relativePath, pagePath }]
+ * Recursively find all files in a directory.
+ * Skips ignored files/directories.
+ * Returns [{ filePath, relativePath, size }]
  */
-function findHtmlFiles(baseDir, currentDir) {
+function findAllFiles(baseDir, currentDir) {
   const entries = readdirSync(currentDir, { withFileTypes: true });
   const results = [];
 
   for (const entry of entries) {
-    if (entry.name.startsWith(".")) continue;
+    if (shouldIgnore(entry.name)) continue;
 
     const fullPath = join(currentDir, entry.name);
 
     if (entry.isDirectory()) {
-      results.push(...findHtmlFiles(baseDir, fullPath));
-    } else if (entry.name.endsWith(".html")) {
-      const relativePath = fullPath.slice(baseDir.length + 1); // e.g. "about.html" or "blog/post.html"
-
-      // Derive page path from file path
-      let pagePath;
-      if (entry.name === "index.html") {
-        // index.html → parent directory path (or "/" for root)
-        const dirRel = dirname(relativePath);
-        pagePath = dirRel === "." ? "/" : `/${dirRel}`;
-      } else {
-        // about.html → /about, blog/post.html → /blog/post
-        pagePath = "/" + relativePath.replace(/\.html$/, "");
+      results.push(...findAllFiles(baseDir, fullPath));
+    } else if (entry.isFile()) {
+      const relativePath = fullPath.slice(baseDir.length + 1);
+      let size;
+      try {
+        size = statSync(fullPath).size;
+      } catch {
+        continue;
       }
-
-      results.push({ filePath: fullPath, relativePath, pagePath });
+      results.push({ filePath: fullPath, relativePath, size });
     }
   }
 
-  // Sort: root index first, then alphabetical
+  // Sort: index.html first, then HTML files, then others alphabetically
   results.sort((a, b) => {
-    if (a.pagePath === "/") return -1;
-    if (b.pagePath === "/") return 1;
-    return a.pagePath.localeCompare(b.pagePath);
+    const aIsIndex = a.relativePath === "index.html";
+    const bIsIndex = b.relativePath === "index.html";
+    if (aIsIndex) return -1;
+    if (bIsIndex) return 1;
+
+    const aIsHtml = a.relativePath.endsWith(".html");
+    const bIsHtml = b.relativePath.endsWith(".html");
+    if (aIsHtml && !bIsHtml) return -1;
+    if (!aIsHtml && bIsHtml) return 1;
+
+    return a.relativePath.localeCompare(b.relativePath);
   });
 
   return results;
 }
 
+/**
+ * Replace all occurrences of `search` in `str` with `replacement`.
+ */
+function replaceAll(str, search, replacement) {
+  return str.split(search).join(replacement);
+}
+
 function getFlag(args, flag) {
   const idx = args.indexOf(flag);
   if (idx === -1 || idx >= args.length - 1) return null;

package/src/commands/list.mjs

@@ -4,8 +4,14 @@ import { dim, cyan, bold, formatBytes, yellow } from "../ui.mjs";
 /**
  * htmlhost list — show all sites.
  */
-export async function list() {
+export async function list({ json = false } = {}) {
   const data = await get("/api/sites");
+
+  if (json) {
+    console.log(JSON.stringify(data));
+    return;
+  }
+
   const sites = data.sites || [];
 
   if (sites.length === 0) {
@@ -17,11 +23,14 @@ export async function list() {
 
   console.log("");
 
-  // Table header
-  const slugW = Math.max(20, ...sites.map((s) => s.slug.length)) + 2;
+  // Compute column widths dynamically
+  const slugW = Math.max(14, ...sites.map((s) => s.slug.length)) + 2;
+  const titleW = Math.max(10, ...sites.map((s) => (s.title || "").length).filter((n) => n < 30)) + 2;
+  const clampedTitleW = Math.min(titleW, 30);
+
   const hdr = [
     pad("SLUG", slugW),
-    pad("URL", 38),
+    pad("TITLE", clampedTitleW),
     pad("SIZE", 10),
     pad("TTL", 8),
     pad("EXPIRES", 14),
@@ -32,8 +41,10 @@ export async function list() {
   for (const s of sites) {
     const expires = s.expiresAt ? relTime(s.expiresAt) : "never";
     const expiresColor = s.expiresAt && new Date(s.expiresAt) < new Date() ? yellow : dim;
+    const multiIndicator = s.isMultiPage ? "📄 " : "";
+    const title = truncate(s.title && s.title !== s.slug ? s.title : "", clampedTitleW - 2);
     console.log(
-      `  ${pad(cyan(s.slug), slugW)}${pad(`${s.slug}.htmlhost.co`, 38)}${pad(s.size, 10)}${pad(s.ttl, 8)}${expiresColor(expires)}`
+      `  ${pad(cyan(multiIndicator + s.slug), slugW + (multiIndicator ? 2 : 0))}${pad(dim(title), clampedTitleW)}${pad(s.size, 10)}${pad(s.ttl, 8)}${expiresColor(expires)}`
     );
   }
 
@@ -48,7 +59,14 @@ export async function list() {
 
 function pad(str, width) {
   const s = String(str);
-  return s + " ".repeat(Math.max(0, width - s.length));
+  // Account for ANSI escape codes in string length
+  const visible = s.replace(/\x1b\[[0-9;]*m/g, "");
+  return s + " ".repeat(Math.max(0, width - visible.length));
+}
+
+function truncate(str, max) {
+  if (str.length <= max) return str;
+  return str.slice(0, max - 1) + "…";
 }
 
 function relTime(iso) {

package/src/commands/open.mjs

@@ -0,0 +1,29 @@
+import { exec } from "node:child_process";
+import { err, cyan, bold, ok } from "../ui.mjs";
+
+/**
+ * htmlhost open <slug> — open a site in the browser.
+ */
+export async function open(args) {
+  const slug = args.find((a) => !a.startsWith("--"));
+  if (!slug) {
+    err("Usage: htmlhost open <slug>");
+    process.exit(1);
+  }
+
+  const url = `https://${slug}.htmlhost.co`;
+  ok(`Opening ${cyan(bold(url))}…`);
+
+  // Cross-platform open command
+  const cmd =
+    process.platform === "darwin" ? "open" :
+    process.platform === "win32" ? "start" :
+    "xdg-open";
+
+  exec(`${cmd} ${url}`, (error) => {
+    if (error) {
+      err(`Could not open browser: ${error.message}`);
+      console.log(`  ${url}`);
+    }
+  });
+}

package/src/commands/upload.mjs

@@ -1,68 +0,0 @@
-import { statSync, readdirSync } from "node:fs";
-import { resolve, basename, join } from "node:path";
-import { uploadFile } from "../api.mjs";
-import { ok, err, info, cyan, dim, bold, formatBytes, mimeFromExt } from "../ui.mjs";
-import { getApi } from "../config.mjs";
-
-/**
- * htmlhost upload <file|dir> — upload media assets and get URLs.
- */
-export async function upload(args) {
-  const target = args.find((a) => !a.startsWith("--"));
-  if (!target) {
-    err("Usage: htmlhost upload <file|directory>");
-    process.exit(1);
-  }
-
-  const targetPath = resolve(target);
-  let stat;
-  try {
-    stat = statSync(targetPath);
-  } catch {
-    err(`Not found: ${target}`);
-    process.exit(1);
-  }
-
-  const files = stat.isDirectory()
-    ? readdirSync(targetPath)
-        .filter((f) => !f.startsWith("."))
-        .map((f) => ({ path: join(targetPath, f), name: f }))
-        .filter((f) => statSync(f.path).isFile())
-    : [{ path: targetPath, name: basename(targetPath) }];
-
-  if (files.length === 0) {
-    err("No files found.");
-    process.exit(1);
-  }
-
-  console.log("");
-  info(`Uploading ${bold(String(files.length))} file${files.length > 1 ? "s" : ""}…`);
-  console.log("");
-
-  const api = getApi();
-  const results = [];
-
-  for (const file of files) {
-    const size = statSync(file.path).size;
-    const mime = mimeFromExt(file.name);
-
-    try {
-      const data = await uploadFile("/api/media", file.path, file.name, mime);
-      const url = `${api}${data.url}`;
-      results.push({ name: file.name, url, size });
-      ok(`${cyan(file.name)} ${dim(`(${formatBytes(size)})`)} → ${url}`);
-    } catch (e) {
-      err(`${file.name}: ${e.message}`);
-    }
-  }
-
-  if (results.length > 0) {
-    console.log("");
-    console.log(`  ${dim("Use these URLs in your HTML:")}`);
-    console.log("");
-    for (const r of results) {
-      console.log(`  ${dim(`<img src="${r.url}" />`)}`)
-    }
-    console.log("");
-  }
-}