cchost 0.5.0 → 0.6.0

package/lib/cli.js

@@ -15,12 +15,13 @@ const { renderBanner } = require('./banner');
 
 const HELP = `cchost - Multi-profile launcher for Claude Code
 
-Installed as both 'cchost' (preferred) and 'cc' (legacy alias). The examples
-below use cchost; prefer it in scripts because 'cc' shadows the system C
-compiler on macOS and Linux.
+Installed as both 'cchost' (preferred) and 'cc' (legacy alias). 'cc' is also
+the C compiler on macOS and Linux: when 'cc' is called with anything other than
+a cchost command (e.g. 'cc -c foo.c', 'cc --version'), it runs the real
+compiler further down PATH. Use 'cchost' in scripts.
 
 Usage:
-  cchost add <profile> [--custom [...]]                Create a profile (auto-links all 7 resources to ~/.claude/)
+  cchost add <profile> [--private] [--custom [...]]    Create a profile (shares all 7 resources, or --private ones)
   cchost use <profile> [...args]                       Launch Claude under a named profile
   cchost list [<profile>] [--json] [--reveal]          List profiles, or show one in detail
   cchost copy default <profile> [--force] [--dry-run]  Copy ~/.claude/ resources into a profile (only when unlinked)
@@ -28,6 +29,7 @@ Usage:
   cchost unlink <profile> [--projects|--tools|--config]  Restore a profile's private resources (non-destructive)
   cchost remove <profile> [--force]                    Delete a profile and all its data
   cchost doctor [--fix [--force]] [--json]             Diagnose environment, storage, and platform issues
+  cchost ui [--port=N] [--no-open] [--session=8h]      Open the web view (prints a sign-in password, like rclone)
   cchost help [command]                                Show usage (optionally for a single command)
   cchost help sharing                                  Task guide: what is shared, and how to change it
   cchost --version                                     Print the installed cchost version
@@ -47,7 +49,7 @@ for that launch. Args after the profile name are forwarded verbatim to claude.
 `;
 
 const HELP_BY_CMD = {
-  add: `cchost add <profile> [--custom [--base-url=URL --token=TOKEN ...]]
+  add: `cchost add <profile> [--private[=projects,tools,config]] [--custom [--base-url=URL --token=TOKEN ...]]
 
 Create a new profile directory without launching Claude. All 7 shared
 resources (projects/, skills/, agents/, commands/, mcp.json, settings.json,
@@ -58,6 +60,15 @@ profile (and to bare \`claude\`) from the moment the profile is created.
       Create a regular profile. It logs in with your Anthropic
       subscription (OAuth) on the first 'cchost use'.
 
+  cchost add <profile> --private
+  cchost add <profile> --private=projects,config
+      Start some or all resources private and empty instead of shared:
+      nothing from ~/.claude/ is copied in, and nothing this profile writes
+      there is seen by other profiles. Groups: projects (session history),
+      tools (skills/agents/commands), config (mcp.json/settings.json/CLAUDE.md).
+      Combine with --custom for an isolated endpoint profile. Share a group
+      later with 'cchost link <profile> --<group>'.
+
   cchost add <profile> --custom
       Create a profile routed through a custom, Anthropic-compatible API
       endpoint — Moonshot/Kimi, OpenRouter, a self-hosted vLLM, a corporate
@@ -81,6 +92,7 @@ user-only permissions. It is never linked and never copied.
 
 Examples:
   cchost add work
+  cchost add client --private=projects,config
   cchost add kimi --custom
   cchost add kimi --custom --base-url=https://api.moonshot.ai/anthropic --token=sk-... --model=kimi-k2.5
 `,
@@ -231,7 +243,11 @@ See where a profile stands:
   cchost list                          Shared column: 7/7 = all shared
   cchost list work                     state of each resource
 
-Make something private to one profile:
+Start a new profile private (empty, nothing copied in):
+  cchost add client --private          all 7 private
+  cchost add client --private=projects own session history, shared tools/config
+
+Make something private to an existing profile:
   cchost unlink work --config          own mcp.json / settings.json / CLAUDE.md
   cchost unlink work                   all 7 private
   The current shared content is copied in, so nothing disappears; from then
@@ -278,6 +294,26 @@ Exit codes: 0 = all ok, 1 = warnings, 2 = errors.
 --fix --force   Also apply confirmation-required fixes (e.g. reset corrupt
                 .claude.json)
 --json          Machine-readable output for CI / scripting
+`,
+  ui: `cchost ui [--port=N] [--no-open] [--user=NAME] [--pass=PASSWORD] [--session=8h]
+
+Open a local web page that shows every profile, what each one shares with
+~/.claude/, logins, endpoints and doctor results, and lets you add and remove
+profiles, share or unshare resources, copy from ~/.claude/ and apply doctor
+fixes. Every change shows a preview first and lists each step it took.
+
+Sign-in works like rclone's web GUI: the terminal prints a username and a
+random password that is new every run, and your browser opens with a
+one-time sign-in link (valid 2 minutes). The browser then keeps a session
+that ends after --session or when cchost ui stops. The page is served on
+127.0.0.1 only; endpoint tokens are never sent to it. Ctrl+C stops it.
+
+--port=N         Listen on port N (default: a free port)
+--no-open        Print the one-time link instead of opening a browser
+--user=NAME      Sign-in username (default: cchost)
+--pass=PASSWORD  Use this password instead of a random one (8+ characters;
+                 visible in your shell history — prefer the random one)
+--session=8h     How long a sign-in lasts: 30m, 8h, 2d (default: 8h)
 `,
   help: `cchost help [command]
 
@@ -380,7 +416,7 @@ function resourceLabel(resource) {
 const RESOURCE_STATE_NOTES = {
   private: 'only this profile sees it',
   empty: 'private, but empty',
-  missing: 'not set up; cchost link creates it',
+  missing: 'not present; cchost link would share it',
   'foreign-link': 'points outside ~/.claude/; cchost leaves it alone',
 };
 
@@ -405,19 +441,45 @@ const ENDPOINT_VALUE_FLAGS = {
   '--subagent': 'subagent',
 };
 
+// `--private` → all groups; `--private=projects,tools,config` → those groups.
+// Returns the share.resolveSubset() options for the private groups.
+const PRIVATE_GROUPS = ['projects', 'tools', 'config'];
+
+function parsePrivateFlag(value) {
+  if (value === null) return { projects: true, tools: true, config: true };
+  const groups = value.split(',').map((g) => g.trim()).filter(Boolean);
+  if (groups.length === 0) {
+    throw usageError(`--private= needs at least one of: ${PRIVATE_GROUPS.join(', ')}`);
+  }
+  const opts = {};
+  for (const g of groups) {
+    if (!PRIVATE_GROUPS.includes(g)) {
+      throw usageError(`Unknown --private group "${g}". Use: ${PRIVATE_GROUPS.join(', ')}`);
+    }
+    opts[g] = true;
+  }
+  return opts;
+}
+
 async function cmdAdd(rest) {
   const positional = [];
   const provided = {};
   let custom = false;
+  let privateOpts = null;
 
   for (const a of rest) {
     if (a.startsWith('-')) {
       const eq = a.indexOf('=');
       const flagName = eq === -1 ? a : a.slice(0, eq);
       if (flagName === '--custom') {
+        if (eq !== -1) throw usageError('--custom takes no value');
         custom = true;
         continue;
       }
+      if (flagName === '--private') {
+        privateOpts = parsePrivateFlag(eq === -1 ? null : a.slice(eq + 1));
+        continue;
+      }
       if (Object.prototype.hasOwnProperty.call(ENDPOINT_VALUE_FLAGS, flagName)) {
         if (eq === -1) {
           throw usageError(`Flag ${flagName} requires a value: ${flagName}=VALUE`);
@@ -432,7 +494,10 @@ async function cmdAdd(rest) {
 
   const [name, ...extra] = positional;
   if (!name) {
-    throw usageError('Usage: cchost add <profile> [--custom [--base-url=URL --token=TOKEN ...]]');
+    throw usageError(
+      'Usage: cchost add <profile> [--private[=projects,tools,config]] ' +
+        '[--custom [--base-url=URL --token=TOKEN ...]]',
+    );
   }
   if (extra.length > 0) throw usageError(`cchost add takes no extra arguments: ${extra[0]}`);
   profiles.validateProfileName(name);
@@ -450,7 +515,7 @@ async function cmdAdd(rest) {
   if (!custom) {
     const { dir } = profiles.addProfile(name);
     console.log(`Created profile "${name}" at ${dir}.`);
-    autoLinkArtifacts(name);
+    setUpResources(name, dir, privateOpts);
     console.log(`Next: cchost use ${name}`);
     return 0;
   }
@@ -458,9 +523,15 @@ async function cmdAdd(rest) {
   // Custom endpoint profile.
   const dir = profiles.profileDir(name);
   const existed = fs.existsSync(dir);
+  if (existed && privateOpts) {
+    throw usageError(
+      `--private only applies when creating a profile; "${name}" already exists. ` +
+        `Use: cchost unlink ${name} [--projects|--tools|--config]`,
+    );
+  }
   if (!existed) {
     profiles.addProfile(name);
-    autoLinkArtifacts(name);
+    setUpResources(name, dir, privateOpts);
   }
 
   let result;
@@ -515,13 +586,32 @@ function runLegacyPoolMigration() {
   }
 }
 
-// On profile creation, symlink all 7 resources into ~/.claude/. Failures emit
-// a warning but do NOT abort cchost add — the profile is still usable, and the
-// user can re-run `cchost link <name>` to retry.
-function autoLinkArtifacts(name) {
+// On profile creation, link every resource that isn't private into
+// ~/.claude/, and start each private dir empty. Private config files are left
+// absent so Claude Code creates them on first use.
+function setUpResources(name, dir, privateOpts) {
+  if (!privateOpts) {
+    autoLinkArtifacts(name);
+    return;
+  }
+  const privateSet = share.resolveSubset(privateOpts);
+  const sharedGroups = {};
+  for (const g of PRIVATE_GROUPS) if (!privateOpts[g]) sharedGroups[g] = true;
+  if (Object.keys(sharedGroups).length > 0) autoLinkArtifacts(name, sharedGroups);
+  for (const r of privateSet) {
+    if (!share.isFileResource(r)) fs.mkdirSync(path.join(dir, r), { recursive: true });
+  }
+  share.markPrivate(dir, privateSet);
+  console.log(`  Private (not shared with other profiles): ${privateSet.map(resourceLabel).join(', ')}`);
+}
+
+// Symlink resources into ~/.claude/ (all 7, or the groups in `opts`). Failures
+// emit a warning but do NOT abort cchost add — the profile is still usable,
+// and the user can re-run `cchost link <name>` to retry.
+function autoLinkArtifacts(name, opts = {}) {
   let results;
   try {
-    results = share.shareLink(name);
+    results = share.shareLink(name, opts);
   } catch (err) {
     process.stderr.write(
       color.stderr.yellow(
@@ -939,6 +1029,51 @@ async function cmdUnlink(rest) {
   return anyFailure ? 1 : 0;
 }
 
+// `cchost ui` runs until Ctrl+C, so it never resolves.
+// '30m', '8h', '2d' -> milliseconds.
+function parseDuration(text) {
+  const m = /^(\d+)(m|h|d)$/.exec(text);
+  if (!m || Number(m[1]) === 0) return null;
+  return Number(m[1]) * { m: 60e3, h: 3600e3, d: 86400e3 }[m[2]];
+}
+
+async function cmdUi(rest) {
+  let port = 0;
+  let open = true;
+  let user = 'cchost';
+  let pass = null;
+  let sessionTtlMs;
+  for (const a of rest) {
+    if (a === '--no-open') { open = false; continue; }
+    const eq = a.indexOf('=');
+    const flag = eq === -1 ? a : a.slice(0, eq);
+    const value = eq === -1 ? null : a.slice(eq + 1);
+    if (['--port', '--user', '--pass', '--session'].includes(flag) && !value) {
+      throw usageError(`Flag ${flag} requires a value: ${flag}=VALUE`);
+    }
+    if (flag === '--port') {
+      port = Number(value);
+      if (!Number.isInteger(port) || port < 1 || port > 65535) throw usageError(`Invalid port: ${a}`);
+      continue;
+    }
+    if (flag === '--user') { user = value; continue; }
+    if (flag === '--pass') {
+      if (value.length < 8) throw usageError('--pass must be at least 8 characters.');
+      pass = value;
+      continue;
+    }
+    if (flag === '--session') {
+      sessionTtlMs = parseDuration(value);
+      if (!sessionTtlMs) throw usageError(`Invalid --session "${value}". Use e.g. 30m, 8h or 2d.`);
+      continue;
+    }
+    throw usageError(a.startsWith('-') ? `Unknown flag: ${flag}` : `Unexpected argument: ${a}`);
+  }
+  const { startUi } = require('./ui/server');
+  await startUi({ port, open, user, pass, sessionTtlMs });
+  return new Promise(() => {});
+}
+
 async function cmdDoctor(rest) {
   const { flags } = parseFlagsStrict(rest, ['--fix', '--force', '--json']);
   const fix = flags.has('--fix');
@@ -1023,6 +1158,8 @@ async function run(argv) {
       return await cmdRemove(rest);
     case 'doctor':
       return await cmdDoctor(rest);
+    case 'ui':
+      return await cmdUi(rest);
     default: {
       process.stderr.write(color.stderr.red(`Unknown command: ${action}`) + '\n\n');
       printHelp();

package/lib/copy.js

@@ -131,7 +131,7 @@ function formatResourceLabel(resource) {
 // the v0.4 symlink semantics. Logs per-resource progress and a closing
 // summary line. Returns a structured result for tests. With dryRun the same
 // report is printed in the conditional ("would copy") and nothing is written.
-function copy(srcArg, destArg, { force = false, dryRun = false } = {}) {
+function copy(srcArg, destArg, { force = false, dryRun = false, log = console.log } = {}) {
   const src = resolveSource(srcArg);
   const dest = resolveDest(destArg);
 
@@ -142,7 +142,7 @@ function copy(srcArg, destArg, { force = false, dryRun = false } = {}) {
   if (!dryRun) profiles.ensureProfileDir(dest.name);
   const copiedWord = dryRun ? 'would copy' : 'copied';
   if (!fs.existsSync(src.dir)) {
-    console.log(`Source ${src.dir} does not exist. Nothing to copy.`);
+    log(`Source ${src.dir} does not exist. Nothing to copy.`);
     return { copied: 0, skipped: 0, shared: 0, results: [] };
   }
 
@@ -165,14 +165,14 @@ function copy(srcArg, destArg, { force = false, dryRun = false } = {}) {
 
     // Already-shared check: same on-disk target via symlink or hard link.
     if (fs.existsSync(dstPath) && fs.existsSync(srcPath) && sameOnDisk(srcPath, dstPath)) {
-      console.log(`  ${label} shared via symlink — skipped`);
+      log(`  ${label} shared via symlink — skipped`);
       results.push({ resource, status: 'shared' });
       totalShared += 1;
       continue;
     }
 
     if (!fs.existsSync(srcPath)) {
-      console.log(`  ${label} not present at source`);
+      log(`  ${label} not present at source`);
       results.push({ resource, status: 'absent' });
       continue;
     }
@@ -180,13 +180,13 @@ function copy(srcArg, destArg, { force = false, dryRun = false } = {}) {
     if (isFile) {
       const r = copySingleFile(srcPath, dstPath, { force, dryRun });
       if (r === 'copied') {
-        console.log(`  ${label} ${copiedWord}`);
+        log(`  ${label} ${copiedWord}`);
         totalCopied += 1;
       } else if (r === 'skipped') {
-        console.log(`  ${label} skipped (already present — pass --force to overwrite)`);
+        log(`  ${label} skipped (already present — pass --force to overwrite)`);
         totalSkipped += 1;
       } else {
-        console.log(`  ${label} not present at source`);
+        log(`  ${label} not present at source`);
       }
       results.push({ resource, status: r });
       continue;
@@ -194,12 +194,12 @@ function copy(srcArg, destArg, { force = false, dryRun = false } = {}) {
 
     const { copied, skipped } = copyDirContents(srcPath, dstPath, { force, dryRun });
     if (copied === 0 && skipped === 0) {
-      console.log(`  ${label} empty at source`);
+      log(`  ${label} empty at source`);
     } else if (copied > 0) {
       const more = skipped > 0 ? `, skipped ${skipped} (already present)` : '';
-      console.log(`  ${label} ${copiedWord} ${copied} item(s)${more}`);
+      log(`  ${label} ${copiedWord} ${copied} item(s)${more}`);
     } else {
-      console.log(
+      log(
         `  ${label} skipped ${skipped} item(s) (all already present — pass --force to overwrite)`,
       );
     }
@@ -208,21 +208,21 @@ function copy(srcArg, destArg, { force = false, dryRun = false } = {}) {
     results.push({ resource, status: 'dir', copied, skipped });
   }
 
-  console.log('');
+  log('');
   if (totalCopied === 0 && totalShared === share.SHARED_RESOURCES.length) {
-    console.log(
+    log(
       `Nothing to copy — all ${share.SHARED_RESOURCES.length} resources are already shared via symlinks.`,
     );
-    console.log(
+    log(
       `Tip: run \`cchost unlink ${dest.name}\` first if you want private copies in this profile.`,
     );
   } else if (totalCopied === 0) {
-    console.log(
+    log(
       `${dryRun ? 'Nothing would be copied' : 'Nothing copied'}. ` +
         `${totalShared} shared via symlink, ${totalSkipped} skipped (already present).`,
     );
   } else {
-    console.log(
+    log(
       `${dryRun ? 'Dry run: would copy' : 'Done. Copied'} ${totalCopied} item(s), ` +
         `${totalShared} already shared via symlinks` +
         (totalSkipped > 0 ? `, ${totalSkipped} skipped (already present)` : '') +

package/lib/doctor.js

@@ -250,6 +250,16 @@ function checkProfileLinks(prof) {
     let stat;
     try { stat = fs.lstatSync(pp); } catch { stat = null; }
 
+    // Private on purpose (add --private / unlink): never offer to re-share it.
+    if (
+      (!stat || !stat.isSymbolicLink()) &&
+      !share.isSharedResource(prof.dir, resource) &&
+      share.isMarkedPrivate(prof.dir, resource)
+    ) {
+      results.push(mk('Storage', `"${prof.name}" ${label}`, 'ok', 'private by choice'));
+      continue;
+    }
+
     if (!stat) {
       // Resource missing entirely — safe to auto-create the link.
       results.push(
@@ -761,4 +771,4 @@ async function runDoctor({ fix, force, json, prompt: promptFn }) {
   return doctorExitCode(results);
 }
 
-module.exports = { runChecks, runDoctor, checkCcShadow, checkMacKeychain };
+module.exports = { runChecks, runDoctor, applyFixes, checkCcShadow, checkMacKeychain };

package/lib/share.js

@@ -180,9 +180,54 @@ function createResourceLink(target, link, resource) {
   }
 }
 
+// <profile>/.cc-private.json records resources the user made private on
+// purpose (`cchost add --private`, `cchost unlink`), so an empty or absent
+// private resource is not mistaken for a missing link and re-shared by
+// `cchost doctor --fix`. `cchost link` removes entries. Never shared.
+const PRIVATE_FILE = '.cc-private.json';
+
+function readPrivate(profileDir) {
+  try {
+    const data = JSON.parse(fs.readFileSync(path.join(profileDir, PRIVATE_FILE), 'utf8'));
+    const list = data && Array.isArray(data.private) ? data.private : [];
+    return new Set(list.filter((r) => SHARED_RESOURCES.includes(r)));
+  } catch {
+    return new Set();
+  }
+}
+
+function writePrivate(profileDir, set) {
+  const p = path.join(profileDir, PRIVATE_FILE);
+  const list = SHARED_RESOURCES.filter((r) => set.has(r));
+  if (list.length === 0) {
+    fs.rmSync(p, { force: true });
+    return;
+  }
+  fs.writeFileSync(p, JSON.stringify({ private: list }, null, 2) + '\n');
+}
+
+function markPrivate(profileDir, resources) {
+  const set = readPrivate(profileDir);
+  const before = set.size;
+  for (const r of resources) set.add(r);
+  if (set.size !== before) writePrivate(profileDir, set);
+}
+
+function unmarkPrivate(profileDir, resources) {
+  const set = readPrivate(profileDir);
+  let changed = false;
+  for (const r of resources) changed = set.delete(r) || changed;
+  if (changed) writePrivate(profileDir, set);
+}
+
+function isMarkedPrivate(profileDir, resource) {
+  return readPrivate(profileDir).has(resource);
+}
+
 // Where one resource of a profile currently stands. Returns one of:
 //   'shared'       — linked to ~/.claude/ (symlink, junction, or hard link)
-//   'private'      — a real file/dir with content, unique to this profile
+//   'private'      — a real file/dir with content, or one recorded as private
+//                    on purpose in .cc-private.json (even if empty or absent)
 //   'empty'        — a real but empty file/dir (link would replace it)
 //   'missing'      — nothing at the path
 //   'foreign-link' — a symlink pointing somewhere other than ~/.claude/
@@ -190,6 +235,7 @@ function resourceState(profileDir, resource) {
   const p = path.join(profileDir, resource);
   if (isSharedResource(profileDir, resource)) return 'shared';
   if (isLink(p)) return 'foreign-link';
+  if (isMarkedPrivate(profileDir, resource)) return 'private';
   let st;
   try {
     st = fs.statSync(p);
@@ -302,6 +348,14 @@ function shareLink(profileName, opts = {}) {
       results.push({ resource, status: 'failed', message: err.message });
     }
   }
+  if (!dryRun) {
+    unmarkPrivate(
+      pdir,
+      results
+        .filter((r) => r.status === 'linked' || r.status === 'already-linked')
+        .map((r) => r.resource),
+    );
+  }
   return results;
 }
 
@@ -385,6 +439,9 @@ function shareUnlink(profileName, opts = {}) {
       results.push({ resource, status: 'failed', message: err.message });
     }
   }
+  if (!dryRun) {
+    markPrivate(pdir, results.filter((r) => r.status === 'unlinked').map((r) => r.resource));
+  }
   return results;
 }
 
@@ -840,6 +897,10 @@ module.exports = {
   isLink,
   isSharedResource,
   resourceState,
+  PRIVATE_FILE,
+  markPrivate,
+  unmarkPrivate,
+  isMarkedPrivate,
   removeLink,
   shareLink,
   shareUnlink,

package/lib/ui/login.html

@@ -0,0 +1,117 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light dark">
+<link rel="icon" href="data:,">
+<title>Sign in · cchost</title>
+<style nonce="__NONCE__">
+/*__TOKENS__*/
+* { box-sizing: border-box; }
+html, body { margin: 0; min-height: 100%; }
+body {
+  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
+  background: var(--bg); color: var(--text); font: 14px/1.5 var(--sans);
+  -webkit-font-smoothing: antialiased;
+}
+::selection { background: color-mix(in srgb, var(--primary) 28%, transparent); }
+.card {
+  width: min(380px, 100%); display: grid; gap: 20px; padding: 28px;
+  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm);
+  animation: enter 420ms var(--ease) both;
+}
+@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 15px; }
+.brand svg { width: 22px; height: 22px; }
+.brand .mark { fill: var(--primary); opacity: 0.9; }
+.brand small { margin-left: auto; color: var(--text-3); font-weight: 500; font-size: 12px; }
+h1 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
+.lede { margin: 4px 0 0; color: var(--text-2); font-size: 13px; }
+form { display: grid; gap: 14px; }
+label { display: grid; gap: 6px; font-size: 13px; font-weight: 550; }
+.input {
+  height: 36px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--border-strong);
+  background: var(--surface); color: var(--text); font: inherit; font-weight: 400;
+  transition: border-color 120ms, box-shadow 120ms;
+}
+.input:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
+.input[aria-invalid="true"] { border-color: var(--err); }
+.btn {
+  height: 36px; border-radius: 6px; border: 1px solid var(--primary); background: var(--primary); color: var(--primary-fg);
+  font: inherit; font-weight: 550; cursor: pointer; transition: background 120ms, transform 120ms;
+}
+.btn:hover { background: var(--primary-hover); }
+.btn:active { transform: translateY(1px); }
+.btn:disabled { opacity: 0.6; cursor: progress; }
+.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+.err { min-height: 20px; margin: 0; color: var(--err-fg); font-size: 13px; }
+.err.shake { animation: shake 320ms var(--ease); }
+@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
+.hint { margin: 0; padding-top: 16px; border-top: 1px solid var(--border); color: var(--text-3); font-size: 12.5px; }
+code { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
+@media (prefers-reduced-motion: reduce) {
+  .card, .err.shake { animation: none; }
+}
+</style>
+</head>
+<body>
+<main class="card">
+  <div class="brand">
+    <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="2.5" y="6.5" width="12" height="12" rx="3" fill="none" stroke="currentColor" stroke-width="1.75"/><rect class="mark" x="9.5" y="2.5" width="12" height="12" rx="3"/></svg>
+    cchost <small>v__VERSION__</small>
+  </div>
+  <div>
+    <h1>Sign in</h1>
+    <p class="lede" id="lede">Use the username and password printed in the terminal where you ran <code>cchost ui</code>.</p>
+  </div>
+  <form id="form" novalidate>
+    <label>Username<input class="input" id="user" name="user" autocomplete="username" spellcheck="false" value="cchost" required></label>
+    <label>Password<input class="input" id="pass" name="pass" type="password" autocomplete="current-password" spellcheck="false" required autofocus aria-describedby="err"></label>
+    <p class="err" id="err" role="alert"></p>
+    <button class="btn" id="go" type="submit">Sign in</button>
+  </form>
+  <p class="hint">The password changes every time <code>cchost ui</code> starts, and only this machine can reach this page.</p>
+</main>
+<script nonce="__NONCE__">
+(() => {
+  'use strict';
+  const $ = (id) => document.getElementById(id);
+  try {
+    const t = localStorage.getItem('cchost-theme');
+    if (t === 'light' || t === 'dark') document.documentElement.setAttribute('data-theme', t);
+  } catch { /* storage blocked */ }
+  if (new URLSearchParams(location.search).has('expired')) {
+    $('lede').textContent = 'That sign-in link was already used or has expired. Sign in with the password from the terminal.';
+    history.replaceState(null, '', '/');
+  }
+  $('form').addEventListener('submit', async (ev) => {
+    ev.preventDefault();
+    const err = $('err');
+    err.textContent = '';
+    err.classList.remove('shake');
+    $('go').disabled = true;
+    $('go').textContent = 'Signing in…';
+    try {
+      const res = await fetch('/api/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'X-CCHost': '1' },
+        body: JSON.stringify({ user: $('user').value, pass: $('pass').value }),
+      });
+      if (res.ok) { location.replace('/'); return; }
+      const json = await res.json().catch(() => ({}));
+      err.textContent = json.error || `Sign-in failed (${res.status}).`;
+    } catch {
+      err.textContent = 'Cannot reach cchost ui — is it still running?';
+    }
+    void err.offsetWidth;
+    err.classList.add('shake');
+    $('pass').setAttribute('aria-invalid', 'true');
+    $('pass').select();
+    $('go').disabled = false;
+    $('go').textContent = 'Sign in';
+  });
+})();
+</script>
+</body>
+</html>