htmlhost-cli 2.9.0 → 2.11.0

package/README.md

@@ -33,7 +33,7 @@ htmlhost deploy page.html
 ## Commands
 
 ### `htmlhost login`
-Authenticate with an API token. Generate one at [htmlhost.co/settings#keys](https://htmlhost.co/settings#keys).
+Sign in by approving in your browser: it opens htmlhost.co, you check the code matches and click Approve. Nothing to paste, so an AI agent can run it for you (without a terminal attached it waits 90 seconds, then the next `htmlhost login` finishes). For CI, save a token from [htmlhost.co/settings#keys](https://htmlhost.co/settings#keys) with `htmlhost login --token <token>`.
 
 ### `htmlhost deploy [file|dir] [options]`
 Deploy an HTML project and get a live URL.
@@ -72,6 +72,22 @@ blog/post-1.html → /blog/post-1
 
 Add a `404.html` file and it will be served automatically for missing pages.
 
+**Redirects:** A `_redirects` file at the folder's root sets the site's
+redirects, one per line in the Netlify style:
+
+```
+# old address        new address         (optional) 301 or 302
+/about-us            /about
+/blog/*              /news/*
+/sale                /offers             302
+/shop                https://shop.example.com
+```
+
+The file is sent with the deploy and isn't published. Each deploy with the file
+replaces the redirects it set before; redirects added in the dashboard stay (and
+win when both cover the same path). Without the file, a deploy leaves redirects
+as they are. `htmlhost pull` and `htmlhost clone` write the file back.
+
 **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.

package/package.json

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

package/src/cli.mjs

@@ -5,7 +5,7 @@ import { bold, dim, cyan, err } from "./ui.mjs";
 import { ApiError } from "./api.mjs";
 import { startUpdateCheck, applyUpdate } from "./update.mjs";
 
-const VERSION = "2.9.0";
+const VERSION = "2.11.0";
 
 const HELP = `
   ${bold("htmlhost")} ${dim(`v${VERSION}`)} — deploy HTML from the terminal
@@ -22,7 +22,7 @@ const HELP = `
     ${cyan("htmlhost versions")} [slug]         List a site's published versions
     ${cyan("htmlhost rollback")} [slug] [ver]    Make an earlier version live again (Pro)
     ${cyan("htmlhost delete")} <slug>            Delete a site
-    ${cyan("htmlhost login")}                    Authenticate with an API token
+    ${cyan("htmlhost login")}                    Sign in (approve in your browser)
     ${cyan("htmlhost whoami")}                   Show current user
     ${cyan("htmlhost logout")}                   Remove saved token
     ${cyan("htmlhost open")} <slug>              Open a site in the browser
@@ -58,6 +58,9 @@ const HELP = `
     ${cyan("recipients resend")} [slug] <ref>   Resend a pending invitation
     --force, -f       Skip confirmation on remove
 
+  ${bold("Login options:")}
+    --token <token>   Save an API token from Settings → API keys (CI)
+
   ${bold("Delete options:")}
     --force, -f       Skip confirmation prompt
 
@@ -123,7 +126,7 @@ export async function run(argv) {
     switch (command) {
       case "login": {
         const { login } = await import("./commands/login.mjs");
-        await login();
+        await login(args);
         break;
       }
       case "logout": {

package/src/commands/clone.mjs

@@ -137,6 +137,13 @@ export async function clone(args) {
     ok(`${cyan(asset.path)} ${dim(`(${formatBytes(asset.sizeBytes)})`)}`);
   }
 
+  // --- Redirects from a deployed _redirects file ---
+  if (data.redirectsFile) {
+    writeFileSync(join(destDir, "_redirects"), data.redirectsFile, "utf8");
+    written++;
+    ok(`${cyan("_redirects")} ${dim(`(${data.redirectsFile.trim().split("\n").length} redirects)`)}`);
+  }
+
   // --- Write .htmlhost link file ---
   // A clone is always the whole site as a folder, so it links in directory
   // mode whatever the page count — `deploy` then updates this same site.

package/src/commands/deploy.mjs

@@ -1,4 +1,4 @@
-import { readFileSync, statSync, readdirSync } from "node:fs";
+import { readFileSync, statSync, readdirSync, existsSync } from "node:fs";
 import { basename, resolve, dirname, join } from "node:path";
 import { createInterface } from "node:readline";
 import { createHash } from "node:crypto";
@@ -7,6 +7,7 @@ import { ok, err, info, warn, cyan, dim, bold, yellow, green, formatBytes, mimeF
 import { checkRemoteChanges } from "./pull.mjs";
 import { fetchAgentGuide, hasAgentGuide, writeAgentGuide } from "./agents.mjs";
 import { readLink, writeLink, directorySite, directoryDeploySlug, fileDeploySlug } from "../link.mjs";
+import { sharedDrift } from "../shared-blocks.mjs";
 
 /**
  * Upload a file to a presigned URL with automatic retry.
@@ -77,6 +78,8 @@ const DEFAULT_IGNORE = [
   ".cursorrules",
   ".windsurfrules",
   ".github",
+  // Redirect rules: sent with the deploy and applied by htmlhost, never published as a file.
+  "_redirects",
 ];
 
 /**
@@ -388,6 +391,27 @@ async function deployDirectory(dirPath, { ttl, title, slug: explicitSlug, forceN
     console.log("");
   }
 
+  // Shared header/footer copies that drifted apart (edited on one page only).
+  const drift = sharedDrift(htmlFiles.map((f) => ({ path: pagePathForFile(f.relativePath), html: readFileSync(f.filePath, "utf8") })));
+  for (const d of drift) {
+    const [main, ...others] = d.groups;
+    const odd = others.flat();
+    warn(`The shared ${bold(d.name)} differs on ${odd.length} page${odd.length === 1 ? "" : "s"}: ${odd.join(", ")} (vs ${main.length} matching).`);
+    console.log(`   ${dim("Make the same change on every page that has it, or open the site in the htmlhost editor to apply one version everywhere.")}`);
+  }
+  if (drift.length) console.log("");
+
+  // Redirect rules (Netlify-style `_redirects`): sent with the deploy, where
+  // they replace the site's rules from this file. Rules added in the dashboard
+  // stay. No file, no change.
+  const redirectsPath = join(dirPath, "_redirects");
+  const redirectsText = existsSync(redirectsPath) ? readFileSync(redirectsPath, "utf8") : null;
+  if (redirectsText !== null) {
+    const lines = redirectsText.split(/\r?\n/).filter((l) => l.trim() && !l.trim().startsWith("#")).length;
+    console.log(`  ${dim("↪")} ${bold("_redirects")} ${dim(`(${lines} rule${lines === 1 ? "" : "s"})`)}`);
+    console.log("");
+  }
+
   // Confirmation prompt
   const confirmed = await promptConfirm(
     existingSlug
@@ -496,6 +520,7 @@ async function deployDirectory(dirPath, { ttl, title, slug: explicitSlug, forceN
   info(existingSlug ? `Deploying to ${cyan(existingSlug)}…` : "Deploying new site…");
 
   const body = { pages: pagePayloads, assets: assetPayloads };
+  if (redirectsText !== null) body.redirects = redirectsText;
   if (ttl) body.ttl = ttl;
   if (existingSlug) {
     body.slug = existingSlug;
@@ -538,6 +563,13 @@ async function deployDirectory(dirPath, { ttl, title, slug: explicitSlug, forceN
       console.log(`   ${cyan(`https://${data.url}${urlPath}`)}`);
     }
     console.log("");
+    if (data.redirects) {
+      const { applied, problems } = data.redirects;
+      ok(`${applied} redirect${applied === 1 ? "" : "s"} from ${bold("_redirects")} applied`);
+      for (const p of problems.slice(0, 10)) warn(p);
+      if (problems.length > 10) console.log(`   ${dim(`… and ${problems.length - 10} more`)}`);
+      console.log("");
+    }
     console.log(`   ${dim("Linked → .htmlhost")}`);
     const guide = await agentGuide;
     if (guide) writeAgentGuide(dirPath, guide, { claude: false });

package/src/commands/login.mjs

@@ -1,61 +1,152 @@
-import { writeConfig, getApi } from "../config.mjs";
-import { ok, err, info, dim, cyan, bold } from "../ui.mjs";
+/**
+ * htmlhost login [--token <token>]
+ *
+ * Signs in by browser approval: asks htmlhost.co for a sign-in, opens the
+ * approval page and waits until the owner approves, then saves the new API
+ * token to ~/.htmlhostrc. Nothing to type, so an AI agent can run it: without a
+ * terminal attached it waits 90 seconds, then keeps the sign-in so the next
+ * `htmlhost login` picks it up. `--token` saves a token from Settings → API keys
+ * (CI). A server without browser sign-in falls back to pasting a token.
+ */
+import { hostname } from "node:os";
 import { createInterface } from "node:readline";
 import { exec } from "node:child_process";
+import { readConfig, writeConfig, getApi } from "../config.mjs";
+import { ok, err, info, dim, cyan, bold } from "../ui.mjs";
 
-export async function login() {
-  const settingsUrl = `${getApi()}/settings#keys`;
-
-  console.log("");
-  info(`Log in to ${cyan(bold("htmlhost.co"))}`);
-
-  // Auto-open the browser; fall back to showing the URL if it fails
-  const browserCmd =
-    process.platform === "darwin" ? "open" :
-    process.platform === "win32" ? "start" :
-    "xdg-open";
+/** How long a run without a terminal (an agent) waits before leaving the sign-in pending. */
+const AGENT_WAIT_MS = 90_000;
 
-  exec(`${browserCmd} ${settingsUrl}`, (error) => {
-    if (error) {
-      console.log(`${dim("  Generate a token at")} ${settingsUrl}`);
-    }
-  });
+function openBrowser(url) {
+  const cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? 'start ""' : "xdg-open";
+  exec(`${cmd} "${url}"`, () => {});
+}
 
-  console.log(`${dim("  Opening")} ${cyan(settingsUrl)}${dim(" in your browser…")}`);
-  console.log("");
+async function saveToken(token) {
+  info("Verifying…");
+  const res = await fetch(`${getApi()}/api/tokens/me`, { headers: { Authorization: `Bearer ${token}` } });
+  if (!res.ok) {
+    err("Invalid or expired token.");
+    process.exit(1);
+  }
+  const data = await res.json();
+  writeConfig({ token, api: getApi(), pendingLogin: undefined });
+  ok(`Logged in as ${cyan(data.email)} (${data.plan})`);
+  console.log(`${dim("  Token saved to ~/.htmlhostrc")}`);
+}
 
+/** The old way, for servers without browser sign-in: paste a token from Settings → API keys. */
+async function pasteLogin() {
+  const settingsUrl = `${getApi()}/settings#keys`;
+  openBrowser(settingsUrl);
+  console.log(`${dim("  Opening")} ${cyan(settingsUrl)}${dim(" in your browser…")}\n`);
   const token = await new Promise((resolve) => {
     const rl = createInterface({ input: process.stdin, output: process.stdout });
-    rl.question(`  Paste your API token: `, (answer) => {
+    rl.question("  Paste your API token: ", (answer) => {
       rl.close();
       resolve(answer.trim());
     });
   });
-
   if (!token) {
     err("No token provided.");
     process.exit(1);
   }
+  await saveToken(token);
+}
 
-  // Validate the token
-  info("Verifying…");
-
+/** A new sign-in, or null when the server doesn't offer browser sign-in. */
+async function startLogin() {
+  let res;
   try {
-    const res = await fetch(`${getApi()}/api/tokens/me`, {
-      headers: { Authorization: `Bearer ${token}` },
+    res = await fetch(`${getApi()}/api/cli-login`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", "X-HTMLHost-Client": "cli" },
+      body: JSON.stringify({ client: "cli", deviceName: hostname() }),
     });
+  } catch (e) {
+    err(`Connection failed: ${e.message}`);
+    process.exit(1);
+  }
+  if (res.status === 404 || res.status === 405) return null;
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    err(data.error || `Couldn't start sign-in (HTTP ${res.status}).`);
+    process.exit(1);
+  }
+  const pending = {
+    deviceCode: data.deviceCode,
+    userCode: data.userCode,
+    verifyUrl: data.verifyUrl,
+    interval: data.interval || 3,
+    expiresAt: Date.now() + (data.expiresIn || 600) * 1000,
+    api: getApi(),
+  };
+  writeConfig({ pendingLogin: pending });
+  openBrowser(pending.verifyUrl);
+  return pending;
+}
 
-    if (!res.ok) {
-      err("Invalid or expired token.");
+export async function login(args = []) {
+  const at = args.indexOf("--token");
+  if (at >= 0) {
+    if (!args[at + 1]) {
+      err("Give the token after --token.");
       process.exit(1);
     }
+    return saveToken(args[at + 1]);
+  }
 
-    const data = await res.json();
-    writeConfig({ token, api: getApi() });
-    ok(`Logged in as ${cyan(data.email)} (${data.plan})`);
-    console.log(`${dim("  Token saved to ~/.htmlhostrc")}`);
-  } catch (e) {
-    err(`Connection failed: ${e.message}`);
-    process.exit(1);
+  console.log("");
+  info(`Log in to ${cyan(bold("htmlhost.co"))}`);
+
+  const saved = readConfig().pendingLogin;
+  let pending = saved && saved.api === getApi() && saved.expiresAt > Date.now() + 5_000 ? saved : null;
+  if (!pending) {
+    pending = await startLogin();
+    if (!pending) return pasteLogin();
+  }
+
+  console.log(`${dim("  Approve this sign-in in your browser:")} ${cyan(pending.verifyUrl)}`);
+  console.log(`${dim("  Check it shows the code")} ${bold(pending.userCode)}\n`);
+
+  const until = Math.min(pending.expiresAt, process.stdin.isTTY ? Infinity : Date.now() + AGENT_WAIT_MS);
+  let interval = pending.interval * 1000;
+  while (Date.now() < until) {
+    await new Promise((r) => setTimeout(r, interval));
+    let data;
+    try {
+      const res = await fetch(`${getApi()}/api/cli-login/poll`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ deviceCode: pending.deviceCode }),
+      });
+      data = await res.json();
+    } catch {
+      continue; // a dropped connection: try again next round
+    }
+    if (data.status === "approved") {
+      writeConfig({ token: data.token, api: getApi(), pendingLogin: undefined });
+      ok(`Logged in as ${cyan(data.email || "your account")}`);
+      console.log(`${dim("  Token saved to ~/.htmlhostrc")}`);
+      return;
+    }
+    if (data.status === "slow_down") interval += 1000;
+    else if (data.status === "denied" || data.status === "expired") {
+      writeConfig({ pendingLogin: undefined });
+      err(data.status === "denied" ? "Sign-in cancelled in the browser." : "This sign-in expired. Run `htmlhost login` again.");
+      process.exit(1);
+    } else if (data.status === "too_many_tokens") {
+      writeConfig({ pendingLogin: undefined });
+      err(`Your account has 10 API keys. Remove one at ${getApi()}/settings#keys, then run \`htmlhost login\` again.`);
+      process.exit(1);
+    }
+  }
+
+  if (pending.expiresAt <= Date.now()) {
+    writeConfig({ pendingLogin: undefined });
+    err("This sign-in expired. Run `htmlhost login` again.");
+  } else {
+    err(`Not signed in yet. Approve at ${pending.verifyUrl} (code ${pending.userCode}), then run \`htmlhost login\` again to finish.`);
   }
+  process.exit(1);
 }

package/src/commands/pull.mjs

@@ -184,6 +184,19 @@ export async function pull(args) {
     }
   }
 
+  // --- Redirects from a deployed _redirects file ---
+  if (data.redirectsFile) {
+    const localPath = join(projectDir, "_redirects");
+    const diff = diffFile(localPath, data.redirectsFile);
+    if (diff) {
+      changes.push({
+        file: "_redirects",
+        ...diff,
+        write: () => writeFileSync(localPath, data.redirectsFile, "utf8"),
+      });
+    }
+  }
+
   // --- Show results ---
   if (changes.length === 0) {
     ok("Already up to date — no changes to pull.");

package/src/shared-blocks.mjs

@@ -0,0 +1,77 @@
+/**
+ * Shared header/footer check for deploys.
+ * Embedded styles, font links and data-URL scripts are part of each copy and
+ * must be compared and deployed intact, just like linked shared assets.
+ *
+ * Pages can share a header and footer by wrapping them in marker comments
+ * (`<!-- hh:shared header … -->` … `<!-- /hh:shared header -->`); the htmlhost
+ * editor keeps the copies identical. When a project is edited elsewhere (an
+ * editor, an AI agent), copies can drift apart. `deploy` warns about that
+ * before uploading. This mirrors the editor's comparison (src/lib/shared-blocks.ts
+ * in the app): copies may differ only in the current page's menu link and in
+ * relative vs root paths.
+ */
+
+const OPEN = /<!--\s*hh:shared\s+([a-z][a-z0-9-]*)((?:\s+[a-z][a-z0-9-]*="[^"]*")*)\s*-->/gi;
+
+/** The first well-formed block of each name on a page: { name, attrs, content }. */
+export function findSharedBlocks(html) {
+  const blocks = [];
+  for (const open of html.matchAll(OPEN)) {
+    const name = open[1].toLowerCase();
+    if (blocks.some((b) => b.name === name)) continue;
+    const start = open.index + open[0].length;
+    const close = new RegExp(`<!--\\s*/hh:shared\\s+${name}\\s*-->`, "i").exec(html.slice(start));
+    if (!close) continue;
+    const attrs = {};
+    for (const m of open[2].matchAll(/([a-z][a-z0-9-]*)="([^"]*)"/gi)) attrs[m[1].toLowerCase()] = m[2];
+    blocks.push({ name, attrs, content: html.slice(start, start + close.index) });
+  }
+  return blocks;
+}
+
+/** Class names sites use for "you are here" (used when a marker doesn't name its own). */
+const ACTIVE_WORD = /^(is-|nav-|menu-|link-)?(active|current|selected)(-page|-item|-link)?$|^current[-_](menu|page)[-_](item|ancestor|parent)$|^router-link-(exact-)?active$|^uk-active$/i;
+
+/** A block reduced to what must match across pages. */
+export function comparable(content, attrs, pagePath) {
+  const named = (attrs["active-class"] ?? "").split(/\s+/).filter(Boolean);
+  const isActive = "active-class" in attrs ? (c) => named.includes(c) : (c) => ACTIVE_WORD.test(c);
+  let out = content.replace(/\s+aria-current\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, "");
+  out = out.replace(/\sclass\s*=\s*("([^"]*)"|'([^']*)')/gi, (m, _q, dq, sq) => {
+    const kept = (dq ?? sq).split(/\s+/).filter((c) => c && !isActive(c));
+    return kept.length ? ` class="${kept.join(" ")}"` : "";
+  });
+  // Relative URLs as root paths, so a page in a subfolder compares equal.
+  const base = new URL(pagePath.startsWith("/") ? pagePath : `/${pagePath}`, "http://site.invalid");
+  out = out.replace(/\s(href|src|poster)\s*=\s*("([^"]*)"|'([^']*)')/gi, (m, name, _q, dq, sq) => {
+    const ref = (dq ?? sq).trim();
+    if (!ref || /^([a-z][a-z0-9+.-]*:|\/|#)/i.test(ref)) return ` ${name}="${ref}"`;
+    try {
+      const u = new URL(ref, base);
+      return ` ${name}="${u.pathname}${u.search}${u.hash}"`;
+    } catch {
+      return ` ${name}="${ref}"`;
+    }
+  });
+  return out.replace(/\s+/g, " ").trim();
+}
+
+/**
+ * Shared blocks whose copies differ between pages.
+ * pages: [{ path: "/about", html }] → [{ name, groups: [["/", "/about"], ["/blog"]] }] (largest group first).
+ */
+export function sharedDrift(pages) {
+  const byName = new Map();
+  for (const page of pages) {
+    for (const block of findSharedBlocks(page.html)) {
+      const key = comparable(block.content, block.attrs, page.path);
+      const groups = byName.get(block.name) ?? new Map();
+      groups.set(key, [...(groups.get(key) ?? []), page.path]);
+      byName.set(block.name, groups);
+    }
+  }
+  return [...byName]
+    .map(([name, groups]) => ({ name, groups: [...groups.values()].sort((a, b) => b.length - a.length) }))
+    .filter((d) => d.groups.length > 1);
+}