handmux 0.20.3 → 0.22.0

package/src/cli/setupModel.js

@@ -39,7 +39,7 @@ export function findTunnelId(listJsonOut, name) {
 
 // The config keys the wizard owns: everything it can set. mergeConfig wipes these from the existing config
 // before re-applying the answers, so switching a tunnel (or clearing an optional field) cleanly drops the
-// old value instead of leaving a stale field behind. Anything NOT here (staticDir, previewTtl…) is
+// old value instead of leaving a stale field behind. Anything NOT here (staticDir, uploadExts…) is
 // preserved untouched. `token` IS owned so the Token row can pin one AND clear it back to auto — but it
 // round-trips through answersFromConfig, so a re-run that never touches the row still writes it back.
 const WIZARD_KEYS = [
@@ -127,8 +127,8 @@ export function validateHost(v) {
   const s = String(v || '').trim().replace(/^https?:\/\//, '').replace(/\/.*$/, '');
   return /^[a-z0-9-]+(\.[a-z0-9-]+)+$/i.test(s) ? undefined : t('setup.valHost');
 }
-// Dynamic previews use `https://<name>.<previewDomain>/`; only the base domain belongs in config. Blank
-// deliberately disables the optional feature, while a URL / wildcard would produce a broken host name.
+// The built-in browser maps proxy origins below this domain. Blank deliberately leaves proxy mode disabled;
+// a URL, wildcard, or port would produce an invalid host when Handmux adds its own stable subdomain.
 export function validatePreviewDomain(v) {
   const s = String(v || '').trim();
   if (!s) return undefined;

package/src/cli/setupWizard.js

@@ -73,7 +73,7 @@ export async function runSetup({ home = homedir(), target = configPath(home), lo
           { value: 'name', label: t('setup.secName'), hint: a.name || t('setup.default') },
           { value: 'port', label: t('setup.secPort'), hint: String(a.port) },
           { value: 'token', label: t('setup.secToken'), hint: a.token ? maskSecret(a.token) : t('setup.tokenAuto') },
-          { value: 'preview', label: t('setup.secPreview'), hint: a.previewDomain || t('setup.previewOff') },
+          { value: 'browser', label: t('setup.secBrowser'), hint: a.previewDomain || t('setup.browserOff') },
           { value: 'push', label: t('setup.secPush'), hint: a.vapid ? (a.vapid.subject || t('setup.on')) : t('setup.off') },
           { value: 'voice', label: t('setup.secVoice'), hint: a.xfyun ? (a.xfyun.appId || t('setup.on')) : t('setup.off') },
           // A CLI-tool preference (language of handmux's own terminal output), not an app setting — so it
@@ -101,7 +101,7 @@ export async function runSetup({ home = homedir(), target = configPath(home), lo
         else if (choice === 'name') a.name = await editName(a);
         else if (choice === 'port') a.port = await editPort(a);
         else if (choice === 'token') a.token = await editToken(a);
-        else if (choice === 'preview') a.previewDomain = await editPreviewDomain(a);
+        else if (choice === 'browser') a.previewDomain = await editBrowserDomain(a);
         else if (choice === 'language') a.lang = await editLanguage(a);
         else if (choice === 'push') a.vapid = await editPush(a);
         else if (choice === 'voice') a.xfyun = await editVoice(a);
@@ -140,14 +140,10 @@ async function editPort(a) {
   return Number(v);
 }
 
-async function editPreviewDomain(a) {
-  note(t('setup.previewAbout'));
-  note(t('setup.previewRoute'));
-  note(t('setup.previewHttps'));
-  if (a.tunnel === 'cloudflare-named') note(t('setup.previewTlsCf'));
-  else if (a.tunnel === 'ssh') note(t('setup.previewTlsEdge'));
+async function editBrowserDomain(a) {
+  note(t('setup.browserAbout'));
   const value = await ask(text({
-    message: withBack(t('setup.askPreviewDomain')),
+    message: withBack(t('setup.askBrowserDomain')),
     placeholder: 'preview.example.com',
     initialValue: a.previewDomain || '',
     validate: validatePreviewDomain,

package/src/cli/supervisor.js

@@ -39,6 +39,13 @@ export function bareUrl(base) {
   return `${base.replace(/\/$/, '')}/`;
 }
 
+export function browserPublicOriginEnv(cfg) {
+  return {
+    ...(cfg.previewDomain ? { HANDMUX_PREVIEW_DOMAIN: cfg.previewDomain } : {}),
+    ...(cfg.publicUrl ? { HANDMUX_PUBLIC_URL: cfg.publicUrl } : {}),
+  };
+}
+
 export function supervise(cfg, { home, log = console } = {}) {
   const driver = getDriver(cfg.tunnel);
   const children = {};
@@ -54,7 +61,6 @@ export function supervise(cfg, { home, log = console } = {}) {
     port: cfg.port,
     host: cfg.host,
     token: cfg.token,
-    previewDomain: cfg.previewDomain || null,
     localUrl: `http://localhost:${cfg.port}`,
     lanUrl: lanUrl(cfg.port),
     publicUrl: null,
@@ -89,12 +95,11 @@ export function supervise(cfg, { home, log = console } = {}) {
       PUSH_STORE: pushStorePath(home),
       PREVIEW_STORE: previewStorePath(home),
       NOTIF_DIR: notificationsDirPath(home),
+      ...browserPublicOriginEnv(cfg),
     };
-    if (cfg.previewDomain) env.HANDMUX_PREVIEW_DOMAIN = cfg.previewDomain;
     if (cfg.name) env.HANDMUX_APP_NAME = cfg.name;
     if (cfg.staticDir) env.HANDMUX_STATIC_DIR = cfg.staticDir;
     if (cfg.uploadExts) env.HANDMUX_UPLOAD_EXTS = cfg.uploadExts;
-    if (cfg.previewTtl) env.HANDMUX_PREVIEW_TTL = String(cfg.previewTtl);
     env.HANDMUX_SHORTCUTS = JSON.stringify(cfg.shortcuts);
     if (cfg.vapid) {
       if (cfg.vapid.public) env.VAPID_PUBLIC = cfg.vapid.public;

package/src/httpApi.js

@@ -24,6 +24,7 @@ import { notificationRoutes } from './routes/notifications.js';
 import { transcriptRoutes } from './routes/transcript.js';
 import { DEFAULT_SHORTCUTS } from './shortcutConfig.js';
 import { workspaceRoutes } from './routes/workspace.js';
+import { browserRoutes } from './browser/routes.js';
 
 // Re-exported for tests (test/keys.test.js) and any caller that imported it by this path historically.
 export { isAllowedKey } from './routes/terminal.js';
@@ -31,8 +32,11 @@ export { isAllowedKey } from './routes/terminal.js';
 export function createApiRouter({
   token, commands = defaultCommands, docs = defaultDocs, git = defaultGit, events,
   uploadExts = DEFAULT_UPLOAD_EXTS, maxUploadBytes = MAX_TRANSFER_BYTES,
-  asrEnv = process.env, previews, previewDomain = null,
+  asrEnv = process.env, previews,
   shortcuts = DEFAULT_SHORTCUTS,
+  browser,
+  browserBootstrap,
+  previewDomain,
   workspace,
   home = homedir(), stateFile = process.env.CLAUDE_STATE_FILE || claudeStatePath(homedir()),
 } = {}) {
@@ -43,7 +47,7 @@ export function createApiRouter({
 
   const deps = {
     token, commands, docs, git, push, notifications, claudeEvents,
-    uploadExts, maxUploadBytes, asrEnv, previews, previewDomain, shortcuts, home, stateFile, workspace,
+    uploadExts, maxUploadBytes, asrEnv, previews, shortcuts, home, stateFile, workspace, browser, browserBootstrap, previewDomain,
   };
 
   r.use(sessionRoutes(deps));
@@ -54,6 +58,10 @@ export function createApiRouter({
   r.use(notificationRoutes(deps));
   r.use(systemRoutes(deps));
   r.use(previewRoutes(deps));
+  // In the main process browser APIs are forwarded to the isolated worker before this router. Keep
+  // preview-domain wiring out of this unused fallback route so capability reporting does not require
+  // the worker-owned bootstrap ticket store.
+  r.use('/browser-proxy', browserRoutes(browser ? deps : { ...deps, previewDomain: null }));
   r.use(transcriptRoutes(deps));
   if (workspace) r.use(workspaceRoutes(deps));
 

package/src/previewServer.js

@@ -1,95 +1,141 @@
 // server/src/previewServer.js
-// Serves registered static-preview directories under /preview, reusing the system token via a cookie
-// (a browser opening a URL can't send a Bearer header). Absolute-rooted assets (/assets/...) are
-// served from the right preview dir via a Referer fallback (design's "方案 A").
-// Also handles dynamic preview: Host-based dispatch to loopback ports (HTTP + WS upgrade).
-import net from 'node:net';
-import http from 'node:http';
-import https from 'node:https';
-import tls from 'node:tls';
+// Serves registered static-preview directories under a per-registration capability path. The main
+// Handmux token is never a preview credential. Absolute-rooted assets (/assets/...) are served from the
+// right preview dir via an authenticated Referer fallback (design's "方案 A").
+// Dynamic ports and arbitrary websites are handled by the built-in browser instead.
 import express from 'express';
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
 import { tokenEquals } from './auth.js';
-import { safePreviewName } from './previews.js';
+function credentialOk(provided, token) {
+  if (!provided) return false;
+  try { return tokenEquals(provided, token); } catch { return false; }
+}
 
-const COOKIE = 'tw_preview';
+// Resolve the on-disk file for a request path under a preview: '' or '<dir>/' → its index.html.
+function fileFor(rest) { return (!rest || rest.endsWith('/')) ? `${rest}index.html` : rest; }
 
-// Read one cookie value from a raw Cookie header, URL-decoded. No cookie-parser dep (zero-dep house style).
-export function parseCookie(header, name) {
-  if (!header) return null;
-  const m = new RegExp(`(?:^|;\\s*)${name}=([^;]*)`).exec(header);
-  return m ? decodeURIComponent(m[1]) : null;
+function previewHeaders(res) {
+  res.setHeader('Cache-Control', 'no-store');
+  res.setHeader('Referrer-Policy', 'same-origin');
+  res.setHeader('X-Content-Type-Options', 'nosniff');
+  // Keep preview code isolated even if its capability URL is opened outside the in-app iframe.
+  res.setHeader('Content-Security-Policy', 'sandbox allow-scripts allow-forms allow-downloads allow-modals allow-popups');
+  // A sandboxed static document intentionally has an opaque origin. Its capability path needs to remain
+  // readable by relative fetch(), module scripts, and fonts without restoring same-origin parent access.
+  res.setHeader('Access-Control-Allow-Origin', 'null');
 }
 
-// Credential check shared by the /preview gate AND the referer fallback. Accepts the token via
-// ?token= (first visit) or the tw_preview cookie (subsequent). timing-safe via tokenEquals.
-export function credOk(req, token) {
-  const q = req.query?.token;
-  const provided = (typeof q === 'string' && q) ? q : parseCookie(req.headers?.cookie, COOKIE);
-  if (!provided) return false;
-  try { return tokenEquals(provided, token); } catch { return false; }
+function prefixedRoot(url, prefix) {
+  return url.startsWith('/') && !url.startsWith('//') ? `${prefix}${url.slice(1)}` : url;
 }
 
-export { COOKIE };
+function rewriteCssRoots(source, prefix) {
+  return source
+    .replace(/(url\(\s*["']?)\/(?!\/)/gi, `$1${prefix}`)
+    .replace(/(@import\s+["'])\/(?!\/)/gi, `$1${prefix}`);
+}
 
-// A preview host is exactly `<name>.<domain>` where <name> is one safe label. Anything deeper, the
-// base domain itself, or a foreign domain → not ours (null). domain unset → dynamic disabled → null.
-// The configured domain may carry a :port (the edge runs on a non-standard port, e.g. :39999) — that
-// port belongs in the browser URL, but Host matching is hostname-only, so strip it here. The incoming
-// `host` already has its port stripped by the caller.
-export function isPreviewHost(host, domain) {
-  if (!domain || !host) return null;
-  const base = domain.split(':')[0];
-  const suffix = `.${base}`;
-  if (!host.endsWith(suffix)) return null;
-  const label = host.slice(0, -suffix.length);
-  if (!label || label.includes('.')) return null; // single label only
-  return safePreviewName(label);
+function rewriteModuleRoots(source, prefix) {
+  return source.replace(
+    /(\b(?:from|import)\s*(?:\(\s*)?)(["'])\/(?!\/)/g,
+    `$1$2${prefix}`,
+  );
 }
 
-// Resolve the on-disk file for a request path under a preview: '' or '<dir>/' → its index.html.
-function fileFor(rest) { return (!rest || rest.endsWith('/')) ? `${rest}index.html` : rest; }
+export function rewritePreviewText(source, extension, prefix) {
+  if (extension === '.css') return rewriteCssRoots(source, prefix);
+  if (extension === '.js' || extension === '.mjs') return rewriteModuleRoots(source, prefix);
+  if (extension !== '.html' && extension !== '.htm') return source;
+  let output = source.replace(
+    /(\b(?:src|href|action|poster|data|formaction)\s*=\s*)(["'])(\/[^"']*)\2/gi,
+    (_match, start, quote, url) => `${start}${quote}${prefixedRoot(url, prefix)}${quote}`,
+  );
+  output = output.replace(
+    /(\bsrcset\s*=\s*)(["'])([^"']*)\2/gi,
+    (_match, start, quote, value) => {
+      const rewritten = value.split(',').map((candidate) => {
+        const match = /^(\s*)(\S+)(.*)$/.exec(candidate);
+        return match ? `${match[1]}${prefixedRoot(match[2], prefix)}${match[3]}` : candidate;
+      }).join(',');
+      return `${start}${quote}${rewritten}${quote}`;
+    },
+  );
+  output = output.replace(
+    /(<style\b[^>]*>)([\s\S]*?)(<\/style>)/gi,
+    (_match, open, css, close) => `${open}${rewriteCssRoots(css, prefix)}${close}`,
+  );
+  output = output.replace(
+    /(\bstyle\s*=\s*)(["'])([^"']*)\2/gi,
+    (_match, start, quote, css) => `${start}${quote}${rewriteCssRoots(css, prefix)}${quote}`,
+  );
+  return output.replace(
+    /(<script\b[^>]*\btype\s*=\s*["']module["'][^>]*>)([\s\S]*?)(<\/script>)/gi,
+    (_match, open, script, close) => `${open}${rewriteModuleRoots(script, prefix)}${close}`,
+  );
+}
 
 export function createPreview({
   previews,
-  token,
-  domain = null,
-  httpRequest = http.request,
-  httpsRequest = https.request,
-  netConnect = net.connect,
-  tlsConnect = tls.connect,
 }) {
   const router = express.Router();
 
-  // Gate: ?token= (set cookie + 302 strip) OR a valid cookie; else 401.
-  router.use((req, res, next) => {
-    const q = req.query?.token;
-    if (typeof q === 'string' && q && credOk(req, token)) {
-      res.setHeader('Set-Cookie', `${COOKIE}=${encodeURIComponent(token)}; Path=/; HttpOnly; SameSite=Lax`);
-      const u = new URL(req.originalUrl, 'http://x');
-      u.searchParams.delete('token');
-      return res.redirect(302, u.pathname + u.search);
-    }
-    if (!credOk(req, token)) return res.status(401).send('unauthorized');
-    next();
-  });
-
-  function serve(name, rest, res) {
+  function resolveEntry(name, accessToken, res) {
     const { state, entry } = previews.get(name);
     if (state === 'missing') return res.status(404).type('html').send('<!doctype html><meta charset="utf-8"><h1>预览不存在</h1>');
     if (state === 'expired') return res.status(410).type('html').send('<!doctype html><meta charset="utf-8"><h1>预览已过期</h1><p>请回到 app 重新启动预览。</p>');
-    res.setHeader('Cache-Control', 'no-store');
-    res.sendFile(fileFor(rest), { root: entry.dir, dotfiles: 'deny' }, (err) => {
+    if (!credentialOk(accessToken, entry.accessToken)) return res.status(401).send('unauthorized');
+    return entry;
+  }
+
+  async function serve(entry, rest, prefix, res) {
+    previewHeaders(res);
+    const requested = fileFor(rest);
+    const segments = requested.split('/');
+    const target = path.resolve(entry.dir, requested);
+    const relative = path.relative(entry.dir, target);
+    if (!relative || relative.startsWith('..') || path.isAbsolute(relative)
+      || segments.some((segment) => segment.startsWith('.'))) {
+      if (!relative && requested === 'index.html') {
+        // The root index is the normal preview entry point.
+      } else {
+        res.status(404).end();
+        return;
+      }
+    }
+    const extension = path.extname(target).toLowerCase();
+    if (['.html', '.htm', '.css', '.js', '.mjs'].includes(extension)) {
+      try {
+        const source = await fs.readFile(target, 'utf8');
+        res.type(extension).send(rewritePreviewText(source, extension, prefix));
+      } catch (error) {
+        if (!res.headersSent) res.status(error?.code === 'ENOENT' ? 404 : 500).end();
+      }
+      return;
+    }
+    res.sendFile(requested, { root: entry.dir, dotfiles: 'deny' }, (err) => {
       if (err && !res.headersSent) res.status(err.statusCode || 404).end();
     });
   }
 
-  // /:name catches both '/live' (no trailing slash → redirect) and '/live/' (trailing slash → serve root).
-  // /:name/* catches '/live/index.html', '/live/assets/x.js', etc.
-  router.get('/:name', (req, res, next) => {
-    if (req.url.endsWith('/')) return serve(req.params.name, '', res);
-    res.redirect(301, `/preview/${encodeURIComponent(req.params.name)}/`);
+  // A name without its independent capability is never accepted, including the old ?token=<app-token>
+  // shape. Keeping this explicit makes the failure an authentication result instead of an SPA fallback.
+  router.get('/:name', (_req, res) => res.status(401).send('unauthorized'));
+  router.get('/:name/:accessToken', (req, res) => {
+    const entry = resolveEntry(req.params.name, req.params.accessToken, res);
+    if (!entry || res.headersSent) return;
+    const prefix = `/preview/${encodeURIComponent(req.params.name)}/${encodeURIComponent(req.params.accessToken)}/`;
+    if (!req.url.split('?')[0].endsWith('/')) {
+      return res.redirect(301, prefix);
+    }
+    return void serve(entry, '', prefix, res);
+  });
+  router.get('/:name/:accessToken/*', (req, res) => {
+    const entry = resolveEntry(req.params.name, req.params.accessToken, res);
+    if (!entry || res.headersSent) return;
+    const prefix = `/preview/${encodeURIComponent(req.params.name)}/${encodeURIComponent(req.params.accessToken)}/`;
+    void serve(entry, req.params[0], prefix, res);
   });
-  router.get('/:name/*', (req, res) => serve(req.params.name, req.params[0], res));
 
   // Referer fallback (mount AFTER /preview, BEFORE express.static): an absolute /assets/... request
   // whose Referer is a preview page is served from that preview's dir. Reuses credOk so it can never
@@ -101,96 +147,22 @@ export function createPreview({
     if (!ref) return next();
     let refPath;
     try { refPath = new URL(ref).pathname; } catch { return next(); }
-    const m = /^\/preview\/([^/]+)\//.exec(refPath);
+    const m = /^\/preview\/([^/]+)\/([^/]+)\//.exec(refPath);
     if (!m) return next();
-    if (!credOk(req, token)) return next();
-    const { state, entry } = previews.get(decodeURIComponent(m[1]));
+    let name;
+    let accessToken;
+    try {
+      name = decodeURIComponent(m[1]);
+      accessToken = decodeURIComponent(m[2]);
+    } catch { return next(); }
+    const { state, entry } = previews.get(name);
     if (state !== 'active') return next();
-    res.setHeader('Cache-Control', 'no-store');
+    if (!credentialOk(accessToken, entry.accessToken)) return next();
+    previewHeaders(res);
     res.sendFile(req.path, { root: entry.dir, dotfiles: 'deny' }, (err) => {
       if (err && !res.headersSent) next();
     });
   }
 
-  // Reverse-proxy one request to the dynamic preview's loopback port. No prefix strip — the app owns
-  // its own root, so path/method/headers/body forward as-is. `host` is the loopback family the app was
-  // found on at register time ('127.0.0.1' or '::1'); the Host header stays 127.0.0.1:<port> so a dev
-  // server's host check (e.g. Vite, whose allowedHosts include localhost/127.0.0.1) is satisfied.
-  function proxyHttp(port, host, protocol, req, res) {
-    const headers = { ...req.headers, host: `127.0.0.1:${port}` };
-    const secure = protocol === 'https';
-    const request = secure ? httpsRequest : httpRequest;
-    const options = { host: host || '127.0.0.1', port, method: req.method, path: req.url, headers };
-    // Local HTTPS dev servers commonly use a self-signed certificate. The connection target is constrained
-    // to loopback by registration/probing, so accepting that certificate does not expand trust to a network
-    // host. SNI stays localhost because that is what development certificates are normally issued for.
-    if (secure) Object.assign(options, { servername: 'localhost', rejectUnauthorized: false });
-    const up = request(options, (upRes) => {
-      res.writeHead(upRes.statusCode, upRes.headers);
-      upRes.on('error', () => res.destroy()); // mid-stream upstream reset (after headers) → tear down the client socket
-      upRes.pipe(res);
-    });
-    up.on('error', () => { if (!res.headersSent) res.status(502).type('text').end('preview upstream error'); });
-    req.pipe(up);
-  }
-
-  // Host-based dispatch middleware. Mount FIRST (before /api). A non-preview Host just calls next() →
-  // the request falls through to the existing app, zero impact.
-  function dynamicProxy(req, res, next) {
-    const host = (req.headers.host || '').split(':')[0];
-    const name = isPreviewHost(host, domain);
-    if (!name) return next();
-    const q = req.query?.token;
-    if (typeof q === 'string' && q && credOk(req, token)) {
-      // Host-only by design: the token URL is opened on THIS preview host, and its page + HMR/WS stay on
-      // that host. Sharing the credential with the parent/main app or sibling previews is unnecessary,
-      // expands exposure, and produces invalid Domain=com for a configured two-label domain.
-      res.setHeader('Set-Cookie', `${COOKIE}=${encodeURIComponent(token)}; Path=/; HttpOnly; SameSite=Lax`);
-      const u = new URL(req.originalUrl, 'http://x');
-      u.searchParams.delete('token');
-      return res.redirect(302, u.pathname + u.search);
-    }
-    if (!credOk(req, token)) return res.status(401).send('unauthorized');
-    const { state, entry } = previews.get(name);
-    if (state === 'missing') return res.status(404).type('html').send('<!doctype html><meta charset="utf-8"><h1>预览不存在</h1>');
-    if (state === 'expired') return res.status(410).type('html').send('<!doctype html><meta charset="utf-8"><h1>预览已过期</h1><p>请回到 app 重新启动预览。</p>');
-    if (entry.kind !== 'dynamic') return res.status(404).end(); // a static name reached via subdomain — not served here
-    proxyHttp(entry.port, entry.host, entry.protocol, req, res);
-  }
-
-  // WebSocket (and any raw Upgrade) for a dynamic preview: same cookie auth, then a bare TCP pipe to
-  // the loopback port — covers HMR, SSE-over-ws, and an app's own websockets. Wired via
-  // server.on('upgrade'). A non-preview host or failed auth just destroys the socket (the app has no
-  // other ws endpoints).
-  function onUpgrade(req, socket, head) {
-    const host = (req.headers.host || '').split(':')[0];
-    const name = isPreviewHost(host, domain);
-    if (!name) return socket.destroy();
-    // ws handshakes rarely carry ?token=; the host-only cookie set on the first HTTP load is what
-    // authorizes them. Build a minimal req-shape for credOk (query parsed from the URL for parity).
-    let query = {};
-    try { query = Object.fromEntries(new URL(req.url, 'http://x').searchParams); } catch { /* none */ }
-    if (!credOk({ query, headers: req.headers }, token)) return socket.destroy();
-    const { state, entry } = previews.get(name);
-    if (state !== 'active' || entry.kind !== 'dynamic') return socket.destroy();
-    const secure = entry.protocol === 'https';
-    const options = { port: entry.port, host: entry.host || '127.0.0.1' };
-    if (secure) Object.assign(options, {
-      servername: 'localhost', rejectUnauthorized: false, ALPNProtocols: ['http/1.1'],
-    });
-    const connect = secure ? tlsConnect : netConnect;
-    const up = connect(options, () => {
-      const fwd = { ...req.headers, host: `127.0.0.1:${entry.port}` };
-      up.write(`GET ${req.url} HTTP/1.1\r\n`);
-      for (const [k, v] of Object.entries(fwd)) up.write(`${k}: ${v}\r\n`);
-      up.write('\r\n');
-      if (head && head.length) up.write(head);
-      up.pipe(socket);
-      socket.pipe(up);
-    });
-    up.on('error', () => socket.destroy());
-    socket.on('error', () => up.destroy());
-  }
-
-  return { router, refererFallback, dynamicProxy, onUpgrade };
+  return { router, refererFallback };
 }

package/src/previews.js

@@ -1,14 +1,12 @@
 // server/src/previews.js
-// Preview registry. Maps a safe single-segment name → either an on-disk directory under $HOME
-// (kind:'static') or a local port (kind:'dynamic'), with a TTL. Like push.js it's a single-writer
+// Preview registry. Maps a safe single-segment name to an on-disk directory under $HOME with a lease.
 // in-memory registry (loaded once at construction, flushed atomically on each mutation) — the previous
 // reload-and-write-back on every op was an unguarded read-modify-write that could lose an entry when a
-// GET's expiry-prune raced a concurrent register(). Pure-ish: home/now/store/ttl plus the dynamic switch
-// and port probe are injected so it unit-tests on its own.
+// GET's lease update raced a concurrent register(). Pure-ish: home/now/store/ttl are injected for tests.
 import fs from 'node:fs';
-import net from 'node:net';
 import path from 'node:path';
 import { homedir } from 'node:os';
+import { randomBytes } from 'node:crypto';
 import { fileURLToPath } from 'node:url';
 import { isUnder } from './docPath.js';
 import { readJsonArray, writeJsonAtomic } from './jsonStore.js';
@@ -17,70 +15,68 @@ export function safePreviewName(raw) {
   if (typeof raw !== 'string') return null;
   if (!/^[A-Za-z0-9._-]+$/.test(raw)) return null;
   if (raw === '.' || raw === '..' || raw[0] === '.') return null;
-  // Normalize to lowercase: a dynamic preview is reached via a subdomain, and browsers lowercase the
-  // hostname — so a stored name with uppercase (from a tmux window name) could never be matched. Keep
-  // register/get/subdomain all on the same lowercased key.
+  // Keep lookups stable across clients that may normalize user-provided names differently.
   return raw.toLowerCase();
 }
 
-// Is something listening on a loopback `host:port`? A quick TCP connect with a short timeout.
-function probeHost(port, host, timeout) {
-  return new Promise((resolve) => {
-    const s = net.connect({ port, host });
-    const finish = (ok) => { s.destroy(); resolve(ok); };
-    s.setTimeout(timeout, () => finish(false));
-    s.once('connect', () => finish(true));
-    s.once('error', () => finish(false));
-  });
-}
-
-// Which loopback host answers on `port` — '127.0.0.1', '::1', or null if neither. macOS dev servers
-// often bind ONLY IPv6 localhost (::1), so a 127.0.0.1-only probe wrongly reports "not listening".
-// The answering host is stored on the entry so the proxy connects to the same family the app is on.
-async function probeListening(port, timeout = 300) {
-  if (await probeHost(port, '127.0.0.1', timeout)) return '127.0.0.1';
-  if (await probeHost(port, '::1', timeout)) return '::1';
-  return null;
-}
-
 export function createPreviews({
   home = homedir(),
   store = process.env.PREVIEW_STORE || path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../data/previews.json'),
   now = () => Date.now(),
-  ttlMs = Number(process.env.HANDMUX_PREVIEW_TTL) || 3_600_000,
-  dynamicEnabled = false,
-  probePort = probeListening,
+  ttlMs = 2 * 60 * 60_000,
+  randomToken = () => randomBytes(24).toString('base64url'),
 } = {}) {
   let realHome;
   try { realHome = fs.realpathSync(home); } catch { realHome = home; }
 
   // Loaded ONCE — this in-memory array is the source of truth; every op mutates it and flushes atomically.
   let entries = readJsonArray(store);
-  const flush = () => writeJsonAtomic(store, entries);
+  let flushedExpiries = new Map(entries.map((entry) => [entry?.name, entry?.expiresAt]));
+  const flush = () => {
+    // Access tokens are runtime capabilities. Open device tabs re-register after a restart and receive
+    // a fresh token, so a stale registry file can never resurrect an old preview URL.
+    writeJsonAtomic(store, entries.map(({ accessToken: _accessToken, ...entry }) => entry));
+    flushedExpiries = new Map(entries.map((entry) => [entry?.name, entry?.expiresAt]));
+  };
 
-  // Common upsert: drop any prior entry with this name (so static↔dynamic switching just replaces),
-  // stamp a single now() into createdAt/expiresAt, persist.
+  const resultFor = (entry) => ({
+    name: entry.name,
+    kind: entry.kind,
+    accessToken: entry.accessToken,
+    expiresAt: entry.expiresAt,
+  });
+
+  // Re-registering the same active directory is a lease renewal. Preserve its capability so a
+  // foreground check does not change the iframe URL and reload an already-mounted page. A changed
+  // directory, expired row, or process-restored row without a runtime token receives a fresh one.
   const upsert = (fields) => {
-    entries = entries.filter((e) => e && e.name !== fields.name);
     const ts = now();
-    const entry = { ...fields, createdAt: ts, expiresAt: ts + ttlMs };
+    const current = entries.find((entry) => entry && entry.name === fields.name);
+    if (current?.kind === fields.kind
+      && current.dir === fields.dir
+      && current.expiresAt > ts
+      && typeof current.accessToken === 'string'
+      && current.accessToken) {
+      current.expiresAt = ts + ttlMs;
+      flush();
+      return resultFor(current);
+    }
+    entries = entries.filter((e) => e && e.name !== fields.name);
+    const entry = {
+      ...fields,
+      accessToken: randomToken(),
+      createdAt: ts,
+      expiresAt: ts + ttlMs,
+    };
     entries.push(entry);
     flush();
-    return { name: entry.name, kind: entry.kind, expiresAt: entry.expiresAt };
+    return resultFor(entry);
   };
 
-  async function register({ name, dir, port, protocol = 'http' }) {
+  async function register({ name, dir, port }) {
     const nm = safePreviewName(name);
     if (!nm) return { error: 'bad name', status: 400 };
-    if (port !== undefined && port !== null && port !== '') {
-      if (!dynamicEnabled) return { error: 'dynamic disabled', status: 400 };
-      if (protocol !== 'http' && protocol !== 'https') return { error: 'bad protocol', status: 400 };
-      const p = Number(port);
-      if (!Number.isInteger(p) || p < 1 || p > 65535) return { error: 'bad port', status: 400 };
-      const host = await probePort(p); // '127.0.0.1' | '::1' | null
-      if (!host) return { error: 'port not listening', status: 400 };
-      return upsert({ name: nm, kind: 'dynamic', port: p, host, protocol });
-    }
+    if (port !== undefined && port !== null && port !== '') return { error: 'bad request', status: 400 };
     if (typeof dir !== 'string' || dir[0] !== '/') return { error: 'not absolute', status: 400 };
     let real;
     try { real = fs.realpathSync(dir); } catch { return { error: 'not found', status: 404 }; }
@@ -94,19 +90,21 @@ export function createPreviews({
   function get(name) {
     const entry = entries.find((e) => e && e.name === name);
     if (!entry) return { state: 'missing' };
-    if (entry.expiresAt <= now()) { entries = entries.filter((e) => e.name !== name); flush(); return { state: 'expired' }; }
-    const normalized = entry.kind === 'dynamic'
-      ? { ...entry, kind: 'dynamic', protocol: entry.protocol === 'https' ? 'https' : 'http' }
-      : { kind: 'static', ...entry }; // legacy rows (no kind) → static
-    return { state: 'active', entry: normalized };
+    const ts = now();
+    if (entry.expiresAt <= ts) { entries = entries.filter((e) => e.name !== name); flush(); return { state: 'expired' }; }
+    if (entry.kind === 'dynamic') { entries = entries.filter((e) => e.name !== name); flush(); return { state: 'missing' }; }
+    // Match proxy leases: actual page/resource traffic renews the lease. Throttle persistence so a page
+    // with many assets does not rewrite the registry once per request.
+    const nextExpiry = ts + ttlMs;
+    entry.expiresAt = nextExpiry;
+    if (nextExpiry - (flushedExpiries.get(entry.name) || 0) >= 60_000) flush();
+    return { state: 'active', entry: { kind: 'static', ...entry } }; // legacy rows (no kind) → static
   }
 
   function list() {
-    const active = entries.filter((e) => e && e.expiresAt > now());
+    const active = entries.filter((e) => e && e.kind !== 'dynamic' && e.expiresAt > now());
     if (active.length !== entries.length) { entries = active; flush(); }
-    return active.map((e) => (e.kind === 'dynamic'
-      ? { name: e.name, kind: 'dynamic', port: e.port, protocol: e.protocol === 'https' ? 'https' : 'http', expiresAt: e.expiresAt }
-      : { name: e.name, kind: 'static', dir: e.dir, expiresAt: e.expiresAt }));
+    return active.map((e) => ({ name: e.name, kind: 'static', dir: e.dir, expiresAt: e.expiresAt }));
   }
 
   function remove(name) {