@milesroxas/create-design-hub 0.0.0-stage → 0.1.1

package/setup/lib.mjs

@@ -0,0 +1,147 @@
+// The pure parts of the setup app: naming, validation, the arguments handed to
+// create-design-hub and bootstrap, and the plain-language version of their errors.
+// No I/O here, so every rule is tested without a server or a disk.
+import { isAbsolute, join } from 'node:path';
+import { slugify } from './slug.mjs';
+
+/** What to do when nothing more specific is known. */
+export const FALLBACK_FIX = 'Try again. If it fails twice, send the details to a developer.';
+
+/** Where new projects go unless the person picks another folder. No space in it, so every tool copes. */
+export function defaultParent(home) {
+  return join(home, 'Design');
+}
+
+/** `~/…` for display; the server always works with the absolute path. */
+export function tildify(path, home) {
+  return path === home || path.startsWith(`${home}/`) ? `~${path.slice(home.length)}` : path;
+}
+
+/** The PORT line of a project's .env, or null. */
+export function readPort(envText) {
+  const match = String(envText ?? '').match(/^\s*PORT\s*=\s*"?(\d+)"?\s*$/m);
+  return match ? Number(match[1]) : null;
+}
+
+/** Where a new project goes: its parent folder joined with the slug of its name. */
+export function projectPath({ name, parent } = {}, home) {
+  const slug = slugify(name);
+  const dir = parent?.trim() || defaultParent(home);
+  const errors = {};
+  if (!slug) errors.name = 'Use at least one letter or number in the name.';
+  if (!isAbsolute(dir)) errors.parent = 'Pick a folder on this computer.';
+  return Object.keys(errors).length ? { errors } : { path: join(dir, slug) };
+}
+
+/**
+ * The create request's own fields: the default when empty, and the rule a
+ * filled-in value must meet. An empty optional field is always fine.
+ */
+const FIELDS = {
+  visibility: {
+    fallback: 'local',
+    valid: /^(local|private|public)$/,
+    error: 'Choose this computer or GitHub.',
+  },
+  owner: { valid: /^[A-Za-z0-9][A-Za-z0-9-]{0,38}$/, error: 'A GitHub account or organization name.' },
+  typesafeKey: { valid: /^[\w.-]{16,}$/, error: 'That does not look like a TypeSafe key.' },
+  conductorBranch: { valid: /^[\w./-]+$/, error: 'A branch name, like main.' },
+};
+
+/** Checks a create request from the page; returns the clean value or the problems by field. */
+export function validateCreate(body, { home }) {
+  const b = body ?? {};
+  const value = {};
+  const errors = {};
+  for (const [field, rule] of Object.entries(FIELDS)) {
+    const v = String(b[field] ?? '').trim() || rule.fallback;
+    if (v && !rule.valid.test(v)) errors[field] = rule.error;
+    value[field] = v;
+  }
+  const target = projectPath(b, home);
+  Object.assign(errors, target.errors);
+  value.path = target.path;
+  return Object.keys(errors).length ? { ok: false, errors } : { ok: true, value };
+}
+
+/** Flags for create-design-hub: the copy only; the install is its own step. `link` is a local design-hub checkout. */
+export function createArgs({ path, visibility, owner, link }) {
+  const args = ['--path', path, '--visibility', visibility === 'local' ? 'none' : visibility, '--no-install'];
+  if (owner && visibility !== 'local') args.push('--owner', owner);
+  if (link) args.push('--link', link);
+  return args;
+}
+
+/** Flags for the bootstrap run: everything but the install, which ran as its own step. */
+export function bootstrapArgs({ typesafeKey, conductorBranch }) {
+  const args = ['--no-install'];
+  if (typesafeKey) args.push('--typesafe-key', typesafeKey);
+  if (conductorBranch) args.push('--conductor', '--branch', conductorBranch);
+  return args;
+}
+
+const PLAIN = [
+  [
+    /exists and is not empty/,
+    'That folder already has files in it.',
+    'Pick another name or another place to save it.',
+  ],
+  [
+    /gh is not installed/,
+    'GitHub needs the GitHub CLI on this computer.',
+    'Keep the project on this computer for now, or ask a developer to install the GitHub CLI.',
+  ],
+  [
+    /gh auth status failed|not logged in/i,
+    'You are not signed in to GitHub.',
+    'Go back and sign in to GitHub, then try again.',
+  ],
+  [
+    /gh repo failed/,
+    'GitHub would not create the repo.',
+    'A repo with this name may exist already on that account. Try another name.',
+  ],
+  [
+    /Could not resolve host|unable to access|ERR_PNPM_FETCH|ENOTFOUND/i,
+    'Could not download what the project needs.',
+    'Check the internet connection, then try again.',
+  ],
+  [
+    /git is not installed|xcrun/i,
+    "Apple's developer tools are missing.",
+    'Install them from the first screen, then try again.',
+  ],
+  [
+    /pnpm install failed|npx|ERR_PNPM/i,
+    'Installing the project failed.',
+    'Check the internet connection, then try again. Setup picks up where it stopped.',
+  ],
+  [
+    /No free port/,
+    'Every port Design Hub uses is taken.',
+    'Close other Design Hub projects, then try again.',
+  ],
+];
+
+/** A script's `{ ok: false, error, fix? }` in words a non-developer can act on; the raw text stays in `detail`. */
+export function explain(result) {
+  const raw = [result?.error, result?.stderr].filter(Boolean).join('\n');
+  for (const [pattern, message, fix] of PLAIN) if (pattern.test(raw)) return { message, fix, detail: raw };
+  return {
+    message: result?.error || 'Something went wrong.',
+    fix: typeof result?.fix === 'string' ? result.fix : FALLBACK_FIX,
+    detail: raw,
+  };
+}
+
+/** The one-time code and URL `gh auth login --web` prints when it has no terminal. */
+export function parseDeviceCode(text) {
+  const code = String(text).match(/\b([A-Z0-9]{4}-[A-Z0-9]{4})\b/)?.[1];
+  const url = String(text).match(/https:\/\/\S+\/login\/device\S*/)?.[0];
+  return code && url ? { code, url } : null;
+}
+
+/** Only this machine's own name for the server: blocks DNS rebinding from a web page. */
+export function hostAllowed(host, port) {
+  return host === `127.0.0.1:${port}` || host === `localhost:${port}`;
+}

package/setup/lib.test.mjs

@@ -0,0 +1,96 @@
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import {
+  bootstrapArgs,
+  createArgs,
+  explain,
+  hostAllowed,
+  parseDeviceCode,
+  readPort,
+  tildify,
+  validateCreate,
+} from './lib.mjs';
+import { slugify } from './slug.mjs';
+
+const HOME = '/Users/sam';
+
+test('slugify makes a folder name create-design-hub accepts', () => {
+  assert.equal(slugify('Acme Checkout'), 'acme-checkout');
+  assert.equal(slugify('  Café / Menü 2.0!  '), 'cafe-menu-2.0');
+  assert.equal(slugify('---'), '');
+  assert.match(slugify('x'.repeat(200)), /^x{80}$/);
+});
+
+test('tildify shortens only paths under home', () => {
+  assert.equal(tildify('/Users/sam/Design/a', HOME), '~/Design/a');
+  assert.equal(tildify('/Users/samuel/a', HOME), '/Users/samuel/a');
+});
+
+test('readPort reads the PORT line', () => {
+  assert.equal(readPort('A=1\nPORT=3104\n'), 3104);
+  assert.equal(readPort('PORT="3105"'), 3105);
+  assert.equal(readPort('EXPORT=1'), null);
+});
+
+test('validateCreate builds the path and rejects bad fields', () => {
+  const ok = validateCreate({ name: 'Acme', visibility: 'local' }, { home: HOME });
+  assert.equal(ok.ok, true);
+  assert.equal(ok.value.path, '/Users/sam/Design/acme');
+  const bad = validateCreate(
+    {
+      name: '!!',
+      parent: 'relative',
+      visibility: 'x',
+      typesafeKey: 'short',
+      owner: '-bad',
+    },
+    { home: HOME },
+  );
+  assert.deepEqual(Object.keys(bad.errors).sort(), ['name', 'owner', 'parent', 'typesafeKey', 'visibility']);
+});
+
+test('createArgs maps local to none, drops the owner there, never installs, and links a local hub', () => {
+  const base = { path: '/p/a', owner: 'team' };
+  assert.deepEqual(createArgs({ ...base, visibility: 'local' }), [
+    '--path',
+    '/p/a',
+    '--visibility',
+    'none',
+    '--no-install',
+  ]);
+  assert.deepEqual(createArgs({ ...base, visibility: 'private' }).slice(-2), ['--owner', 'team']);
+  assert.deepEqual(createArgs({ ...base, visibility: 'local', link: '/hub' }).slice(-2), ['--link', '/hub']);
+});
+
+test('bootstrapArgs never installs; the install is its own step', () => {
+  assert.deepEqual(bootstrapArgs({}), ['--no-install']);
+  assert.deepEqual(bootstrapArgs({ typesafeKey: 'k'.repeat(20), conductorBranch: 'main' }), [
+    '--no-install',
+    '--typesafe-key',
+    'k'.repeat(20),
+    '--conductor',
+    '--branch',
+    'main',
+  ]);
+});
+
+test('explain turns known failures into plain words and keeps the raw text', () => {
+  const e = explain({ ok: false, error: '/x exists and is not empty.' });
+  assert.equal(e.message, 'That folder already has files in it.');
+  assert.match(e.detail, /not empty/);
+  assert.equal(explain({ error: 'Odd.', fix: 'Do y.' }).fix, 'Do y.');
+});
+
+test('parseDeviceCode reads what gh prints without a terminal', () => {
+  const text =
+    '! One-time code (4B12-7915) copied to clipboard\nOpen this URL to continue in your web browser: https://github.com/login/device\n';
+  assert.deepEqual(parseDeviceCode(text), { code: '4B12-7915', url: 'https://github.com/login/device' });
+  assert.equal(parseDeviceCode('nothing yet'), null);
+});
+
+test('hostAllowed accepts only this machine on this port', () => {
+  assert.equal(hostAllowed('127.0.0.1:4000', 4000), true);
+  assert.equal(hostAllowed('localhost:4000', 4000), true);
+  assert.equal(hostAllowed('evil.test:4000', 4000), false);
+  assert.equal(hostAllowed('127.0.0.1:4001', 4000), false);
+});

package/setup/server.mjs

@@ -0,0 +1,444 @@
+#!/usr/bin/env node
+// The setup app's local server. `Design Hub.command` starts it; it opens the
+// page in the browser and runs the same commands an agent would
+// (create-design-hub, pnpm install, design-hub bootstrap), so the mechanics
+// live in one place. Plain JavaScript with no dependencies, because it runs
+// before anything is installed.
+//
+// It runs commands on this machine, so it listens on 127.0.0.1 only, accepts
+// only its own Host name (no DNS rebinding), and every POST must carry the
+// token printed into the page (no other site can send one).
+import { spawn, spawnSync } from 'node:child_process';
+import { randomBytes } from 'node:crypto';
+import {
+  chmodSync,
+  existsSync,
+  mkdirSync,
+  openSync,
+  readdirSync,
+  readFileSync,
+  writeFileSync,
+} from 'node:fs';
+import { createServer } from 'node:http';
+import { homedir, platform } from 'node:os';
+import { basename, delimiter, dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import {
+  bootstrapArgs,
+  createArgs,
+  defaultParent,
+  explain,
+  FALLBACK_FIX,
+  hostAllowed,
+  parseDeviceCode,
+  projectPath,
+  readPort,
+  tildify,
+  validateCreate,
+} from './lib.mjs';
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const HOME = homedir();
+const MAC = platform() === 'darwin';
+const TOKEN = randomBytes(16).toString('hex');
+const CREATE = join(HERE, '..', 'index.mjs');
+// Inside the Design Hub repo itself, new projects link the local package instead of the published one.
+const LOCAL_HUB = join(HERE, '..', '..', 'design-hub');
+const LINK = existsSync(join(LOCAL_HUB, 'package.json')) ? LOCAL_HUB : undefined;
+// The pnpm major projects are installed with.
+const PNPM = 'pnpm@12';
+
+/** Projects this server may start or reveal: the ones it made. */
+const known = new Set();
+/** Dev servers this launcher started, by project path. */
+const servers = new Map();
+let githubLogin = null;
+
+// ---------- machine ----------
+
+const has = (cmd, args = ['--version']) => spawnSync(cmd, args, { encoding: 'utf8' }).status === 0;
+
+/** pnpm, or a shim that fetches it through npx, so nobody installs it by hand. */
+function ensurePnpm() {
+  if (has('pnpm')) return;
+  const config = process.env.XDG_CONFIG_HOME || join(HOME, '.config');
+  const bin = join(config, 'design-hub', 'bin');
+  mkdirSync(bin, { recursive: true });
+  const shim = join(bin, 'pnpm');
+  writeFileSync(shim, `#!/bin/sh\nexec npx --yes ${PNPM} "$@"\n`);
+  chmodSync(shim, 0o755);
+  process.env.PATH = `${bin}${delimiter}${process.env.PATH}`;
+}
+
+/** The signed-in GitHub account, or null. */
+function githubUser() {
+  if (!has('gh', ['auth', 'status'])) return null;
+  return (
+    spawnSync('gh', ['api', 'user', '--jq', '.login'], { encoding: 'utf8' }).stdout.trim() || 'signed in'
+  );
+}
+
+function tools() {
+  // On a Mac without Apple's developer tools, `git` is a stub that opens an install dialog.
+  const devtools = !MAC || has('xcode-select', ['-p']);
+  const gh = has('gh');
+  return { git: devtools && has('git'), gh: { installed: gh, login: gh ? githubUser() : null } };
+}
+
+/** Opens a URL or folder in its default app. `args` go before the target, for example `-R` to select a file in Finder. */
+function openExternal(target, args = []) {
+  spawn(MAC ? 'open' : 'xdg-open', [...(MAC ? args : []), target], {
+    stdio: 'ignore',
+    detached: true,
+  }).unref();
+}
+
+/** The pid listening on a port, or null. */
+function listener(port) {
+  if (!port) return null;
+  const out = spawnSync('lsof', ['-nP', `-iTCP:${port}`, '-sTCP:LISTEN', '-t'], { encoding: 'utf8' });
+  const pid = Number(out.stdout?.trim().split('\n')[0]);
+  return Number.isInteger(pid) && pid > 0 ? pid : null;
+}
+
+// ---------- projects ----------
+
+/** The port a project's .env claims, or null before setup. */
+function portOf(path) {
+  const env = join(path, '.env');
+  return existsSync(env) ? readPort(readFileSync(env, 'utf8')) : null;
+}
+
+function project(path) {
+  const port = portOf(path);
+  return {
+    name: basename(path),
+    path,
+    display: tildify(path, HOME),
+    port,
+    running: listener(port) !== null,
+    url: port ? `http://localhost:${port}/` : null,
+  };
+}
+
+/** Whether a new project can go at `path`: a missing or empty folder only. */
+function isFree(path) {
+  return !existsSync(path) || readdirSync(path).length === 0;
+}
+
+/** Runs a script that prints one JSON object; resolves with it, never rejects. */
+function runJson(cmd, args, cwd) {
+  return new Promise((resolve) => {
+    const child = spawn(cmd, args, { cwd, env: process.env });
+    let out = '';
+    let err = '';
+    child.stdout.on('data', (d) => (out += d));
+    child.stderr.on('data', (d) => (err += d));
+    child.on('error', (e) => resolve({ ok: false, error: `${cmd} is not installed.`, stderr: e.message }));
+    child.on('close', (code) => {
+      try {
+        resolve(JSON.parse(out));
+      } catch {
+        resolve({
+          ok: code === 0,
+          error: code === 0 ? undefined : `${cmd} failed.`,
+          stderr: (err || out).slice(-1200),
+        });
+      }
+    });
+  });
+}
+
+/** Sends a step's running, then done or error; resolves with the result, or null when it failed. */
+async function step(send, name, run) {
+  send({ step: name, status: 'running' });
+  const result = await run();
+  send(result.ok ? { step: name, status: 'done' } : { step: name, status: 'error', ...explain(result) });
+  return result.ok ? result : null;
+}
+
+/** The template copy. */
+async function copyTemplate(value, send) {
+  mkdirSync(dirname(value.path), { recursive: true });
+  const made = await step(send, 'copy', () =>
+    runJson(process.execPath, [CREATE, ...createArgs({ ...value, link: LINK })], HOME),
+  );
+  if (!made) return null;
+  known.add(value.path);
+  return value.path;
+}
+
+/** Checks the request and copies the template; resolves with the project path, or null. */
+async function prepare(body, send) {
+  const checked = validateCreate(body, { home: HOME });
+  if (!checked.ok) {
+    send({ step: 'invalid', status: 'error', errors: checked.errors });
+    return null;
+  }
+  const path = await copyTemplate(checked.value, send);
+  return path && { path, value: checked.value };
+}
+
+/** pnpm install, then the miles-* skills from the installed package. */
+function install(path) {
+  return new Promise((resolve) => {
+    const child = spawn('pnpm', ['install'], { cwd: path, env: process.env });
+    let err = '';
+    child.stderr.on('data', (d) => (err += d));
+    child.on('error', (e) => resolve({ ok: false, error: 'pnpm is not installed.', stderr: e.message }));
+    child.on('close', (code) => {
+      if (code !== 0) return resolve({ ok: false, error: 'pnpm install failed.', stderr: err.slice(-1200) });
+      resolve(runJson(join(path, 'node_modules', '.bin', 'design-hub'), ['skills'], path));
+    });
+  });
+}
+
+async function create(body, send) {
+  const ready = await prepare(body, send);
+  if (!ready) return;
+  const installed = await step(send, 'install', () => install(ready.path));
+  if (!installed) return;
+  const hub = join(ready.path, 'node_modules', '.bin', 'design-hub');
+  const ported = await step(send, 'port', () =>
+    runJson(hub, ['bootstrap', ...bootstrapArgs(ready.value)], ready.path),
+  );
+  if (!ported) return;
+  send({ step: 'ready', status: 'done', project: project(ready.path), warnings: ported.warnings ?? [] });
+}
+
+async function reachable(url, ms) {
+  const until = Date.now() + ms;
+  while (Date.now() < until) {
+    try {
+      await fetch(url, { signal: AbortSignal.timeout(1500) });
+      return true;
+    } catch {
+      await new Promise((r) => setTimeout(r, 400));
+    }
+  }
+  return false;
+}
+
+/** Runs `design-hub dev` in its own process group, so Stop ends it and anything under it together. */
+function launch(path) {
+  const logDir = join(path, '.design-hub');
+  mkdirSync(logDir, { recursive: true });
+  const logFile = join(logDir, 'dev.log');
+  const log = openSync(logFile, 'w');
+  const child = spawn(join(path, 'node_modules', '.bin', 'design-hub'), ['dev'], {
+    cwd: path,
+    detached: true,
+    stdio: ['ignore', log, log],
+  });
+  servers.set(path, child);
+  return {
+    exited: new Promise((r) => child.on('exit', () => r(false))),
+    tail: () => (existsSync(logFile) ? readFileSync(logFile, 'utf8').slice(-1200) : ''),
+  };
+}
+
+async function start(path) {
+  const p = project(path);
+  if (!p.port) return { ok: false, message: 'This project is not set up yet.', fix: 'Run setup first.' };
+  if (p.running) return { ok: true, project: p };
+  const { exited, tail } = launch(path);
+  if (await Promise.race([reachable(p.url, 45_000), exited])) return { ok: true, project: project(path) };
+  stop(path);
+  return { ok: false, message: 'Design Hub did not start.', fix: FALLBACK_FIX, detail: tail() };
+}
+
+function kill(pid) {
+  if (!pid) return;
+  try {
+    process.kill(pid, 'SIGTERM');
+  } catch {
+    // Already gone.
+  }
+}
+
+/** Stops the hub: the process group this server started, or else whatever serves the project's port. */
+function stop(path) {
+  const own = servers.get(path)?.pid;
+  servers.delete(path);
+  kill(own ? -own : listener(portOf(path)));
+}
+
+function githubSignIn() {
+  return new Promise((resolve) => {
+    if (githubLogin) return resolve(githubLogin.device ?? { pending: true });
+    // Without a terminal, gh prints the code and the URL, then waits for the browser.
+    const child = spawn(
+      'gh',
+      ['auth', 'login', '--web', '--hostname', 'github.com', '--git-protocol', 'https', '--skip-ssh-key'],
+      { stdio: ['ignore', 'pipe', 'pipe'] },
+    );
+    githubLogin = { child, device: null };
+    let text = '';
+    const timer = setTimeout(() => resolve({ error: 'GitHub did not answer. Try again.' }), 15_000);
+    const read = (d) => {
+      text += d;
+      const device = parseDeviceCode(text);
+      if (device && !githubLogin.device) {
+        githubLogin.device = device;
+        clearTimeout(timer);
+        openExternal(device.url);
+        resolve(device);
+      }
+    };
+    child.stdout.on('data', read);
+    child.stderr.on('data', read);
+    child.on('error', () => resolve({ error: 'The GitHub CLI is not installed.' }));
+    child.on('close', () => {
+      githubLogin = null;
+      clearTimeout(timer);
+      resolve({ error: 'Sign-in stopped. Try again.' });
+    });
+  });
+}
+
+function pickFolder() {
+  if (!MAC) return {};
+  const out = spawnSync(
+    'osascript',
+    [
+      '-e',
+      'activate',
+      '-e',
+      'POSIX path of (choose folder with prompt "Where should Design Hub save the project?")',
+    ],
+    { encoding: 'utf8' },
+  );
+  if (out.status !== 0) return { cancelled: true };
+  const path = out.stdout.trim().replace(/\/$/, '');
+  return { path, display: tildify(path, HOME) };
+}
+
+// ---------- http ----------
+
+const json = (res, status, body) => {
+  res.writeHead(status, { 'content-type': 'application/json', 'cache-control': 'no-store' });
+  res.end(JSON.stringify(body));
+};
+
+async function readBody(req) {
+  let raw = '';
+  for await (const chunk of req) {
+    raw += chunk;
+    if (raw.length > 64_000) throw new Error('too large');
+  }
+  return raw ? JSON.parse(raw) : {};
+}
+
+function state() {
+  const parent = defaultParent(HOME);
+  return {
+    mode: 'create',
+    defaults: { parent, parentDisplay: tildify(parent, HOME) },
+    here: null,
+    tools: tools(),
+  };
+}
+
+/** Copies the path for pasting into Claude Code and opens the Claude app; false when the app is missing. */
+function openClaude(path) {
+  const copied = MAC && spawnSync('pbcopy', { input: path }).status === 0;
+  if (copied && has('open', ['-a', 'Claude'])) return true;
+  openExternal('https://claude.ai/download');
+  return false;
+}
+
+/** Shows the project's own launcher in Finder, so people see what to double-click next time. */
+function reveal(path) {
+  const launcher = join(path, 'Design Hub.command');
+  if (existsSync(launcher)) openExternal(launcher, ['-R']);
+  else openExternal(path);
+}
+
+/** Actions on a project take only one this server owns: its own folder or one it created. */
+const onProject = (action) => (b) =>
+  known.has(b.path) ? action(b.path) : { ok: false, message: 'Unknown project.' };
+
+/** Every action is a POST with the page's token. */
+const routes = {
+  '/api/state': () => state(),
+  // Step 1's check: the same rule create uses, so the page never guesses.
+  '/api/path': (b) => {
+    const target = projectPath(b, HOME);
+    if (target.errors) return { ok: false, error: target.errors.name ?? target.errors.parent };
+    if (!isFree(target.path))
+      return { ok: false, error: 'A folder with that name already has files in it. Try another name.' };
+    return { ok: true };
+  },
+  '/api/pick-folder': () => pickFolder(),
+  '/api/devtools': () => {
+    if (MAC) spawn('xcode-select', ['--install'], { stdio: 'ignore', detached: true }).unref();
+    return { ok: true };
+  },
+  '/api/github': () => githubSignIn(),
+  '/api/start': onProject(start),
+  '/api/stop': onProject((path) => {
+    stop(path);
+    // The port can stay bound for a moment after the signal, so don't ask lsof yet.
+    return { ok: true, project: { ...project(path), running: false } };
+  }),
+  '/api/reveal': onProject((path) => {
+    reveal(path);
+    return { ok: true };
+  }),
+  '/api/claude': onProject((path) => ({ ok: true, app: openClaude(path) })),
+};
+
+/** Files the page loads. slug.mjs is the naming rule, shared with the server. */
+const files = {
+  '/': ['app.html', 'text/html; charset=utf-8'],
+  '/slug.mjs': ['slug.mjs', 'text/javascript; charset=utf-8'],
+};
+
+function serveFile(res, [name, type]) {
+  const body = readFileSync(join(HERE, name), 'utf8').replace('__TOKEN__', TOKEN);
+  res.writeHead(200, { 'content-type': type, 'cache-control': 'no-store', 'x-frame-options': 'DENY' });
+  res.end(body);
+}
+
+/** One JSON object per line, one per step, so the page shows progress as it happens. */
+async function streamCreate(req, res) {
+  const body = await readBody(req);
+  res.writeHead(200, { 'content-type': 'application/x-ndjson', 'cache-control': 'no-store' });
+  await create(body, (event) => res.write(`${JSON.stringify(event)}\n`));
+  res.end();
+}
+
+async function handle(req, res) {
+  if (!hostAllowed(req.headers.host, server.address().port)) return json(res, 403, { error: 'Wrong host.' });
+  const { pathname } = new URL(req.url, 'http://localhost');
+  if (req.method === 'GET' && files[pathname]) return serveFile(res, files[pathname]);
+  if (req.method !== 'POST' || req.headers['x-setup-token'] !== TOKEN)
+    return json(res, 403, { error: 'Bad token.' });
+  if (pathname === '/api/create') return streamCreate(req, res);
+  const route = routes[pathname];
+  if (!route) return json(res, 404, { error: 'Not found.' });
+  json(res, 200, await route(await readBody(req)));
+}
+
+const server = createServer((req, res) =>
+  handle(req, res).catch((error) => {
+    if (res.headersSent) res.end();
+    else json(res, 500, { error: error.message });
+  }),
+);
+
+function shutdown() {
+  for (const path of servers.keys()) stop(path);
+  githubLogin?.child.kill();
+  process.exit(0);
+}
+for (const signal of ['SIGINT', 'SIGTERM', 'SIGHUP']) process.on(signal, shutdown);
+
+ensurePnpm();
+server.listen(0, '127.0.0.1', () => {
+  const url = `http://127.0.0.1:${server.address().port}/`;
+  console.log(
+    `\n  Design Hub is open in your browser.\n  If it did not open, go to ${url}\n\n  Keep this window open while you work. Close it to stop Design Hub.\n`,
+  );
+  if (!process.argv.includes('--no-open')) openExternal(url);
+});