htmlhost-cli 1.6.0 → 1.8.0

package/README.md

@@ -38,8 +38,11 @@ Deploy an HTML file — or an entire directory of HTML files — and get live UR
 # Single file
 htmlhost deploy index.html
 
-# All .html files in the current directory
+# All .html files in the current directory (as separate sites)
 htmlhost deploy .
+
+# All .html files as ONE multi-page site
+htmlhost deploy . --pages
 ```
 
 Local assets (scripts, CSS, images, fonts) referenced in the HTML are
@@ -51,16 +54,34 @@ 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.
 
+**Multi-page deploy:** Use `--pages` to deploy a directory as a single
+multi-page site. File names map to URL paths:
+
+```
+index.html       → /
+about.html       → /about
+contact.html     → /contact
+blog/index.html  → /blog
+blog/post-1.html → /blog/post-1
+```
+
+Add a `404.html` file and it will be served automatically for missing pages.
+
 | 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) |
+| `--slug <slug>` | Re-deploy to an existing site |
+| `--title <title>` | Set the site title |
 | `--new` | Force new sites (ignore .htmlhost link) |
 | `--no-assets` | Skip automatic asset uploading |
+| `--pages` | Deploy directory as one multi-page site |
+| `--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.

package/package.json

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

package/src/api.mjs

@@ -2,6 +2,7 @@
  * HTTP client wrapper for the htmlhost API.
  */
 import { getToken, getApi } from "./config.mjs";
+import { dim, yellow } from "./ui.mjs";
 
 export class ApiError extends Error {
   constructor(message, status) {
@@ -10,6 +11,39 @@ export class ApiError extends Error {
   }
 }
 
+const MAX_RETRIES = 3;
+const BASE_DELAY_MS = 500;
+
+/**
+ * Retry wrapper with exponential backoff.
+ * Retries on network errors ("fetch failed", ECONNRESET, etc.)
+ * and 5xx server errors. Does NOT retry on 4xx client errors.
+ */
+async function withRetry(fn, label = "request") {
+  let lastError;
+  for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+    try {
+      return await fn();
+    } catch (e) {
+      lastError = e;
+      const isNetworkError =
+        !(e instanceof ApiError) ||
+        (e.status >= 500 && e.status < 600);
+
+      if (!isNetworkError || attempt === MAX_RETRIES) {
+        throw e;
+      }
+
+      const delay = BASE_DELAY_MS * Math.pow(2, attempt - 1);
+      console.log(
+        `   ${yellow("↻")} ${label} failed (attempt ${attempt}/${MAX_RETRIES}), retrying in ${delay}ms… ${dim(e.message)}`
+      );
+      await new Promise((r) => setTimeout(r, delay));
+    }
+  }
+  throw lastError;
+}
+
 function headers(extra = {}) {
   const token = getToken();
   if (!token) throw new ApiError("Not logged in. Run: htmlhost login", 0);
@@ -20,52 +54,61 @@ function headers(extra = {}) {
 }
 
 export async function get(path) {
-  const res = await fetch(`${getApi()}${path}`, {
-    headers: headers(),
-  });
-  const data = await res.json();
-  if (!res.ok) throw new ApiError(data.error || `HTTP ${res.status}`, res.status);
-  return data;
+  return withRetry(async () => {
+    const res = await fetch(`${getApi()}${path}`, {
+      headers: headers(),
+    });
+    const data = await res.json();
+    if (!res.ok) throw new ApiError(data.error || `HTTP ${res.status}`, res.status);
+    return data;
+  }, `GET ${path}`);
 }
 
 export async function post(path, body) {
-  const res = await fetch(`${getApi()}${path}`, {
-    method: "POST",
-    headers: headers({ "Content-Type": "application/json" }),
-    body: JSON.stringify(body),
-  });
-  const data = await res.json();
-  if (!res.ok) throw new ApiError(data.error || `HTTP ${res.status}`, res.status);
-  return data;
+  return withRetry(async () => {
+    const res = await fetch(`${getApi()}${path}`, {
+      method: "POST",
+      headers: headers({ "Content-Type": "application/json" }),
+      body: JSON.stringify(body),
+    });
+    const data = await res.json();
+    if (!res.ok) throw new ApiError(data.error || `HTTP ${res.status}`, res.status);
+    return data;
+  }, `POST ${path}`);
 }
 
 export async function del(path) {
-  const res = await fetch(`${getApi()}${path}`, {
-    method: "DELETE",
-    headers: headers(),
-  });
-  const data = await res.json();
-  if (!res.ok) throw new ApiError(data.error || `HTTP ${res.status}`, res.status);
-  return data;
+  return withRetry(async () => {
+    const res = await fetch(`${getApi()}${path}`, {
+      method: "DELETE",
+      headers: headers(),
+    });
+    const data = await res.json();
+    if (!res.ok) throw new ApiError(data.error || `HTTP ${res.status}`, res.status);
+    return data;
+  }, `DELETE ${path}`);
 }
 
 /**
  * Upload a file via multipart/form-data.
  */
 export async function uploadFile(path, filePath, fileName, mimeType) {
-  const { readFileSync } = await import("node:fs");
-  const fileBuffer = readFileSync(filePath);
-  const blob = new Blob([fileBuffer], { type: mimeType });
+  return withRetry(async () => {
+    const { readFileSync } = await import("node:fs");
+    const fileBuffer = readFileSync(filePath);
+    const blob = new Blob([fileBuffer], { type: mimeType });
 
-  const form = new FormData();
-  form.append("file", blob, fileName);
+    const form = new FormData();
+    form.append("file", blob, fileName);
 
-  const res = await fetch(`${getApi()}${path}`, {
-    method: "POST",
-    headers: { Authorization: `Bearer ${getToken()}` },
-    body: form,
-  });
-  const data = await res.json();
-  if (!res.ok) throw new ApiError(data.error || `HTTP ${res.status}`, res.status);
-  return data;
+    const res = await fetch(`${getApi()}${path}`, {
+      method: "POST",
+      headers: { Authorization: `Bearer ${getToken()}` },
+      body: form,
+    });
+    const data = await res.json();
+    if (!res.ok) throw new ApiError(data.error || `HTTP ${res.status}`, res.status);
+    return data;
+  }, `upload ${fileName}`);
 }
+

package/src/assets.mjs

@@ -137,7 +137,14 @@ async function processCssContent(css, cssDir, sharedCache, urlMap) {
       if (sharedCache) sharedCache.set(asset.filePath, hostedUrl);
       ok(`  ${cyan(ref)} ${dim(`(${formatBytes(asset.size)})`)} → ${hostedUrl}`);
     } catch (e) {
-      warn(`  Failed to upload ${cyan(ref)}: ${e.message}`);
+      // Fall back to shared cache (which includes persisted entries)
+      if (sharedCache && sharedCache.has(asset.filePath)) {
+        const fallbackUrl = sharedCache.get(asset.filePath);
+        urlMap.set(ref, fallbackUrl);
+        warn(`  Upload failed for CSS asset ${cyan(ref)}, using cached URL`);
+      } else {
+        warn(`  Failed to upload ${cyan(ref)}: ${e.message}`);
+      }
     }
   }
 
@@ -232,12 +239,13 @@ function findAssetRefs(html) {
  * @param {string} html         The original HTML content
  * @param {string} baseDir      Directory the HTML file lives in
  * @param {Map<string, string>} [sharedCache]  Optional filePath → hostedUrl cache for batch deploys
- * @returns {Promise<string>}   Rewritten HTML with inlined/hosted assets
+ * @param {Map<string, string>} [persistedCache]  Optional filePath → hostedUrl cache from .htmlhost (survives between deploys)
+ * @returns {Promise<{html: string, resolvedCache: Map<string, string>}>}   Rewritten HTML + cache to persist
  */
-export async function processAssets(html, baseDir, sharedCache) {
+export async function processAssets(html, baseDir, sharedCache, persistedCache) {
   const entries = findAssetRefs(html);
 
-  if (entries.length === 0) return html;
+  if (entries.length === 0) return { html, resolvedCache: persistedCache || new Map() };
 
   const api = getApi();
 
@@ -283,13 +291,25 @@ export async function processAssets(html, baseDir, sharedCache) {
       continue;
     }
 
-    // Check shared cache first
+    // Check shared cache first (in-memory, within this deploy)
     if (sharedCache && sharedCache.has(asset.filePath)) {
       urlMap.set(ref, sharedCache.get(asset.filePath));
       ok(`${cyan(ref)} ${dim("(cached)")}`);
       continue;
     }
 
+    // Check persisted cache (from .htmlhost, across deploys)
+    if (persistedCache && persistedCache.has(asset.filePath)) {
+      const cached = persistedCache.get(asset.filePath);
+      // Invalidate cache if file size changed (file was modified)
+      if (cached.size === asset.size) {
+        urlMap.set(ref, cached.url);
+        if (sharedCache) sharedCache.set(asset.filePath, cached.url);
+        ok(`${cyan(ref)} ${dim("(previously uploaded)")}`);
+        continue;
+      }
+    }
+
     const ext = extname(asset.filePath).toLowerCase();
 
     // --- CSS file: inline (with nested url() processing) ---
@@ -325,14 +345,22 @@ export async function processAssets(html, baseDir, sharedCache) {
       const hostedUrl = `${api}${data.url}`;
       urlMap.set(ref, hostedUrl);
       if (sharedCache) sharedCache.set(asset.filePath, hostedUrl);
+      if (persistedCache) persistedCache.set(asset.filePath, { url: hostedUrl, size: asset.size });
       uploadCount++;
       ok(`${cyan(ref)} ${dim(`(${formatBytes(asset.size)})`)} → ${hostedUrl}`);
     } catch (e) {
-      warn(`Failed to upload ${cyan(ref)}: ${e.message}`);
+      // Fall back to persisted cache if available — don't lose previously working URLs
+      if (persistedCache && persistedCache.has(asset.filePath)) {
+        const fallback = persistedCache.get(asset.filePath);
+        urlMap.set(ref, fallback.url);
+        warn(`Upload failed for ${cyan(ref)}, using cached URL`);
+      } else {
+        warn(`Failed to upload ${cyan(ref)}: ${e.message}`);
+      }
     }
   }
 
-  if (urlMap.size === 0 && inlineMap.size === 0) return html;
+  if (urlMap.size === 0 && inlineMap.size === 0) return { html, resolvedCache: persistedCache || new Map() };
 
   // --- Phase 2: Rewrite the HTML ---
 
@@ -385,7 +413,17 @@ export async function processAssets(html, baseDir, sharedCache) {
     ok(`Uploaded ${cyan(String(uploadCount))} asset${uploadCount === 1 ? "" : "s"} to media library`);
   }
 
-  return result;
+  // Build the final resolved cache — merge persisted + newly uploaded
+  const resolvedCache = persistedCache || new Map();
+  for (const [ref, hostedUrl] of urlMap) {
+    const asset = resolveAsset(baseDir, ref);
+    if (asset.filePath && !resolvedCache.has(asset.filePath)) {
+      // Only add entries not already set (upload path sets {url, size} directly)
+      resolvedCache.set(asset.filePath, { url: hostedUrl, size: asset.size || 0 });
+    }
+  }
+
+  return { html: result, resolvedCache };
 }
 
 /**

package/src/cli.mjs

@@ -4,7 +4,7 @@
 import { bold, dim, cyan, err } from "./ui.mjs";
 import { ApiError } from "./api.mjs";
 
-const VERSION = "1.6.0";
+const VERSION = "1.8.0";
 
 const HELP = `
   ${bold("htmlhost")} ${dim(`v${VERSION}`)} — deploy HTML from the terminal
@@ -17,6 +17,7 @@ const HELP = `
     ${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
@@ -24,6 +25,7 @@ const HELP = `
     --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
 
   ${bold("Delete options:")}
     --force, -f       Skip confirmation prompt
@@ -32,6 +34,7 @@ const HELP = `
     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)
 
@@ -39,8 +42,10 @@ const HELP = `
     ${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 --ttl 30d      ${dim("# deploy with 30-day TTL")}
     ${dim("$")} htmlhost deploy --new          ${dim("# force new sites")}
+    ${dim("$")} htmlhost deploy index.html --json  ${dim("# JSON output for CI/CD")}
     ${dim("$")} htmlhost upload logo.png
     ${dim("$")} htmlhost delete old-project --force
 
@@ -51,6 +56,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;
@@ -80,13 +93,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":
@@ -100,6 +113,11 @@ export async function run(argv) {
         await upload(args);
         break;
       }
+      case "open": {
+        const { open } = await import("./commands/open.mjs");
+        await open(args);
+        break;
+      }
       default:
         err(`Unknown command: ${command}`);
         console.log(`  Run ${cyan("htmlhost --help")} for usage.`);

package/src/commands/deploy.mjs

@@ -58,11 +58,12 @@ function promptChoice(question, options) {
  * - Remembers the site(s) via .htmlhost file (auto re-deploy)
  * - Use --new to force fresh deploys
  */
-export async function deploy(args) {
+export async function deploy(args, { json = false } = {}) {
   let file = 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");
@@ -74,7 +75,7 @@ export async function deploy(args) {
       const stat = statSync(filePath);
       if (stat.isDirectory()) {
         if (multiPage) {
-          return deployMultiPage(filePath, { ttl, title, forceNew, skipAssets });
+          return deployMultiPage(filePath, { ttl, title, slug, forceNew, skipAssets, json });
         }
         return deployDirectory(filePath, { ttl, forceNew, skipAssets });
       }
@@ -85,7 +86,7 @@ export async function deploy(args) {
 
   // --pages without explicit dir defaults to cwd
   if (multiPage && !file) {
-    return deployMultiPage(resolve("."), { ttl, title, forceNew, skipAssets });
+    return deployMultiPage(resolve("."), { ttl, title, slug, forceNew, skipAssets, json });
   }
 
   // Default to index.html in the current directory
@@ -102,13 +103,13 @@ export async function deploy(args) {
   }
 
   // Single-file deploy
-  await deploySingleFile(file, { ttl, title, forceNew, skipAssets, slug: getFlag(args, "--slug") });
+  await deploySingleFile(file, { ttl, title, forceNew, skipAssets, slug, json });
 }
 
 /**
  * Deploy a single HTML file.
  */
-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);
@@ -202,7 +203,15 @@ async function deploySingleFile(file, { ttl, title, forceNew, skipAssets, slug }
 
   // Upload local assets (scripts, css, images) and rewrite references
   if (!skipAssets) {
-    html = await processAssets(html, projectDir);
+    // 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);
   }
 
   info(slug ? `Re-deploying to ${cyan(slug)}…` : "Deploying new site…");
@@ -230,6 +239,11 @@ async function deploySingleFile(file, { ttl, title, forceNew, skipAssets, slug }
     });
   }
 
+  if (json) {
+    console.log(JSON.stringify(data));
+    return;
+  }
+
   console.log("");
   ok(`${bold("Live")} at ${cyan(`https://${data.url}`)}`);
   if (data.version > 1) {
@@ -327,6 +341,9 @@ async function deployDirectory(dirPath, { ttl, forceNew, skipAssets }) {
   // 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));
 
   for (const fileName of htmlFiles) {
     const filePath = join(dirPath, fileName);
@@ -337,9 +354,10 @@ async function deployDirectory(dirPath, { ttl, forceNew, skipAssets }) {
 
     let html = readFileSync(filePath, "utf8");
 
-    // Upload local assets with shared cache
+    // Upload local assets with shared + persisted cache
     if (!skipAssets) {
-      html = await processAssets(html, dirPath, assetCache);
+      const result = await processAssets(html, dirPath, assetCache, persistedCache);
+      html = result.html;
     }
 
     // Determine slug
@@ -373,6 +391,7 @@ async function deployDirectory(dirPath, { ttl, forceNew, skipAssets }) {
   const finalOnRedeploy = freshLink?.onRedeploy || onRedeploy;
   writeLink(dirPath, {
     sites: { ...existingSites, ...results },
+    assets: Object.fromEntries(persistedCache),
     ...(finalOnRedeploy ? { onRedeploy: finalOnRedeploy } : {}),
   });
 
@@ -399,7 +418,7 @@ async function deployDirectory(dirPath, { ttl, forceNew, skipAssets }) {
  *   blog/index.html → /blog
  *   blog/post.html → /blog/post
  */
-async function deployMultiPage(dirPath, { ttl, title, forceNew, skipAssets }) {
+async function deployMultiPage(dirPath, { ttl, title, slug: explicitSlug, forceNew, skipAssets, json }) {
   // Find all .html files (recursive) — skip dotfiles
   const htmlFiles = findHtmlFiles(dirPath, dirPath);
 
@@ -410,7 +429,7 @@ async function deployMultiPage(dirPath, { ttl, title, forceNew, skipAssets }) {
 
   // Read existing link data
   const link = readLink(dirPath);
-  const existingSlug = (!forceNew && link?.multipage?.slug) || null;
+  const existingSlug = explicitSlug || (!forceNew && link?.multipage?.slug) || null;
 
   console.log("");
   info(`Multi-page deploy: ${cyan(bold(String(htmlFiles.length)))} page${htmlFiles.length > 1 ? "s" : ""} in ${cyan(basename(dirPath) || ".")}`);
@@ -429,16 +448,19 @@ async function deployMultiPage(dirPath, { ttl, title, forceNew, skipAssets }) {
 
   // 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)})`)}`);
+    info(`${bold(relativePath)} ${dim(`(${formatBytes(stat.size)})`)}`);  
 
     let html = readFileSync(filePath, "utf8");
 
     if (!skipAssets) {
-      html = await processAssets(html, dirname(filePath), assetCache);
+      const result = await processAssets(html, dirname(filePath), assetCache, persistedCache);
+      html = result.html;
     }
 
     pagePayloads.push({
@@ -465,8 +487,14 @@ 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}`)}`);

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}`);
+    }
+  });
+}