locadot 2.6.1 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 2.7.0 (2026-10-02)
+
+### Added
+- Change which hosts a viewer sees after pairing: ⋯ → **Choose hosts…** on a viewer under Remote → Peers, `locadot
+  peers:hosts <id> [hosts] [--add …] [--remove …]`, or `PUT /api/peers/:id {"hosts": [...]}`. Peers now show the hosts
+  they see.
+- Opening an unmapped `*.localhost` on a connected machine syncs with the machines it's connected to first, then
+  carries on to the page if the name turned up. Otherwise the "not mapped" page says what each sync found, or its
+  error, and has a **Sync again** link.
+- A locadot logo (a padlock whose keyhole is the "dot"). The dashboard and sign-in page use it as their favicon
+  (`/favicon.svg`; `/favicon.ico` serves the same) and in the sidebar.
+
+### Changed
+- Syncing a connection now also removes mappings (and aliases) the sender no longer shares with you, instead of
+  leaving them behind. `remote:sync` lists them.
+- The proxy's own pages ("not mapped", "upstream unreachable" and a remote's localhost page) have the dashboard's
+  look: light and dark themes, the logo, buttons for the dashboard and docs, and copyable `locadot add` commands.
+
 ## 2.6.1 (2026-09-30)
 
 ### Fixed

package/README.md

@@ -1,3 +1,5 @@
+<img src="https://raw.githubusercontent.com/avinashid/locadot/main/docs/logo.svg" alt="" width="72" align="right">
+
 # locadot 🔐
 
 [![npm](https://img.shields.io/npm/v/locadot.svg)](https://www.npmjs.com/package/locadot)
@@ -152,8 +154,9 @@ short-lived pairing string, and the sender's mappings then show up in the receiv
 | `locadot hub:panel <on\|off>` | Sender: serve this dashboard to any browser at the hub's public URL, behind the [dashboard password](#dashboard-password). Off by default. See [Sharing the dashboard](#sharing-the-dashboard-in-a-browser). |
 | `locadot share --role viewer\|editor\|admin [--hosts a.localhost,b.localhost]` | Sender: print a pairing string. It works once and expires after 5 minutes. `--hosts` limits a viewer to those mappings. |
 | `locadot peers` / `peers:role <id> <role>` / `peers:revoke <id>` | Sender: list the connected machines, change a role, or cut one off. |
+| `locadot peers:hosts <id> [a.localhost,b.localhost] [--add …] [--remove …]` | Sender: show or change the mappings a viewer sees after pairing. A list replaces them; `--add`/`--remove` edit them. Taking one away cuts it off at once; the viewer gets the new list on its next sync. Also under ⋯ → **Choose hosts…** on a viewer in the dashboard. |
 | `locadot connect "<pairing string>" [--name alice] [--domain dev]` | Receiver: connect and import the sender's mappings. If a name clashes, `app.localhost` becomes `app.alice.localhost`. Admins get a local domain that opens the sender's dashboard and localhost (see below); `--domain` picks it, otherwise it's a random `adjective-noun`. |
-| `locadot remotes` / `remote:sync <name>` / `disconnect <name>` | Receiver: list the connections (with their domain), pull new mappings, or remove the connection and its names. |
+| `locadot remotes` / `remote:sync <name>` / `disconnect <name>` | Receiver: list the connections (with their domain), pull new mappings and drop ones no longer shared, or remove the connection and its names. |
 | `locadot remote:domain <name> [domain] [--off]` | Receiver, admin only: set the local domain for a remote's localhost, randomize it (no domain given), or remove it (`--off`). |
 | `locadot remote:alias <name> <remote host> <local host>` | Receiver: give a sender mapping another local name, e.g. `he.localhost`. |
 | `locadot remote:add\|remote:update\|remote:rm <name> …` | Receiver: change mappings on the sender (editor or admin). |
@@ -175,6 +178,11 @@ headers work as they do locally, and origins in the sender's pages are rewritten
 An admin's `<port>.<domain>.localhost` gets the same treatment when a `--cors` mapping points at that port.
 `remote:sync` picks up a sender turning `--cors` on or off.
 
+Opening a name that isn't mapped on the receiver (say a host the sender just added, or assigned to you) syncs every
+connected machine first, then sends the browser back to the same URL if the name turned up. If it didn't, the "not mapped"
+page lists what each sync found or why it failed, with a **Sync again** link. Requests through a tunnel or the hub never
+trigger a sync, and a sync less than 10 seconds old is reused (2 seconds for **Sync again**).
+
 When a target is down, requests through the hub or a public share get a **503** with locadot's "upstream unreachable" page.
 Cloudflare replaces an origin's 502 with its own generic "bad gateway" error, which would hide the real cause.
 
@@ -295,6 +303,7 @@ each time the proxy starts.
 | `GET /api/hub` | | Hub status/config, plus `localhost` (sender: is localhost access on) and `panel` (is the dashboard shared). |
 | `PUT /api/hub/localhost` | `{ "enabled": true }` | Sender: turn localhost access for admin peers on/off (400 if the hub isn't configured). |
 | `PUT /api/hub/panel` | `{ "enabled": true }` | Sender: share the dashboard at the hub's public URL on/off (400 if the hub isn't configured, or no dashboard password is set). |
+| `PUT /api/peers/:id` | `{ "role": "viewer", "hosts": ["app.localhost"] }` or `{ "hosts": [...] }` | Sender: change a peer's role, or only a viewer's mappings (400 for an editor or admin, 404 unknown). |
 | `GET /api/remotes` | | Every remote (never the token), including `domain` and `localhost`. |
 | `POST /api/remotes` | `{ "string": "<pairing string>", "name": "alice", "domain": "dev" }` | Receiver: connect using a pairing string; `domain` is optional (admin only, random if omitted). |
 | `PUT /api/remotes/:name` | `{ "domain": "dev" }` or `{ "domain": "random" }` or `{ "domain": null }` | Receiver: set, randomize or remove a remote's local domain (400 invalid, 409 clash, 404 unknown). |

package/dist/cli/commands/remote.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -13,6 +46,7 @@ exports.hubPanel = hubPanel;
 exports.share = share;
 exports.peers = peers;
 exports.peersRole = peersRole;
+exports.peersHosts = peersHosts;
 exports.peersRevoke = peersRevoke;
 exports.connect = connect;
 exports.remotes = remotes;
@@ -31,7 +65,7 @@ const localhost_1 = require("../../lib/localhost");
 const urls_1 = require("../../lib/urls");
 const registry_1 = __importDefault(require("../../lib/registry"));
 const file_1 = __importDefault(require("../../utils/file"));
-const links_1 = __importDefault(require("../../lib/links"));
+const links_1 = __importStar(require("../../lib/links"));
 const hub_config_1 = __importDefault(require("../../lib/hub-config"));
 const hub_tunnel_1 = require("../../proxy/hub-tunnel");
 const remotes_1 = __importDefault(require("../../lib/remotes"));
@@ -235,6 +269,20 @@ async function peersRole(id, role, options) {
     const peer = links_1.default.setRole(id, parsedRole, hosts);
     (0, shared_1.print)(`✅ ${peer.name} is now ${peer.role}${peer.hosts ? ` [${peer.hosts.join(", ")}]` : ""}.`);
 }
+/** A viewer's hosts: replace them, or --add / --remove some; with neither, print them. */
+async function peersHosts(id, hosts, options) {
+    const peer = links_1.default.list().peers.find((p) => p.id === id);
+    if (!peer)
+        throw new links_1.LinkError(404, "Peer not found.");
+    if (hosts === undefined && !options.add && !options.remove) {
+        (0, shared_1.print)(peer.role === "viewer" ? `${peer.name}: ${peer.hosts?.length ? peer.hosts.join(", ") : "no hosts"}` : `${peer.name} is ${peer.role} and sees every host.`);
+        return;
+    }
+    const remove = new Set(splitHosts(options.remove)?.map((h) => h.toLowerCase()));
+    const next = [...(hosts !== undefined ? splitHosts(hosts) ?? [] : peer.hosts ?? []), ...(splitHosts(options.add) ?? [])].filter((h) => !remove.has(h.toLowerCase()));
+    const updated = links_1.default.setHosts(id, next);
+    (0, shared_1.print)(`✅ ${updated.name} now sees ${updated.hosts?.length ? updated.hosts.join(", ") : "no hosts"}. They get the change on their next sync.`);
+}
 async function peersRevoke(id) {
     links_1.default.revoke(id);
     (0, shared_1.print)(`🗑️  Revoked peer ${id}.`);
@@ -277,10 +325,12 @@ async function remotes(options) {
     }
 }
 async function remoteSync(name) {
-    const { remote, mapped } = await remotes_1.default.sync(name);
+    const { remote, mapped, removed } = await remotes_1.default.sync(name);
     (0, shared_1.print)(`✅ ${name} synced.`);
     for (const m of mapped)
         (0, shared_1.print)(`   + ${(0, urls_1.urlFor)(m.local)}  →  ${m.host}`);
+    for (const local of removed)
+        (0, shared_1.print)(`   - ${(0, urls_1.urlFor)(local)}  (no longer shared)`);
     printDomain(remote);
 }
 async function remoteDomain(name, domain, options) {

package/dist/constants/template.js

@@ -2,87 +2,188 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.upstreamDown = exports.remoteLocalhost = exports.proxyNotFound = void 0;
 const escape_1 = require("../dashboard/escape");
-const page = (title, body, dashboardUrl) => `<!DOCTYPE html>
+const logo_1 = require("../dashboard/logo");
+const theme_1 = require("../dashboard/ui/theme");
+/** The proxy's own pages (not mapped, upstream unreachable, remote localhost), in the dashboard's look. */
+const page = (opts) => `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>${(0, escape_1.escapeHtml)(title)}</title>
+  <meta name="color-scheme" content="dark light" />
+  <title>${(0, escape_1.escapeHtml)(opts.title)}</title>
   <style>
+    :root {${theme_1.darkVars}
+      --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+      --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+    }
+    @media (prefers-color-scheme: light) { :root {${theme_1.lightVars}} }
+    * { box-sizing: border-box; }
     body {
-      background-color: #121212;
-      color: #f8d7da;
-      font-family: 'Segoe UI', system-ui, sans-serif;
-      margin: 0;
-      padding: 20px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 90vh;
+      margin: 0; min-height: 100vh; padding: 24px;
+      display: flex; align-items: center; justify-content: center;
+      background: var(--bg); color: var(--fg);
+      font: 14px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
+    }
+    a { color: var(--accent); text-decoration: none; }
+    a:hover { text-decoration: underline; text-underline-offset: 2px; }
+    *:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
+    .card {
+      width: 100%; max-width: 600px; background: var(--surface); border: 1px solid var(--border);
+      border-radius: 16px; box-shadow: var(--shadow-md); overflow: hidden;
+    }
+    .head { display: flex; align-items: center; gap: 10px; padding: 16px 24px; border-bottom: 1px solid var(--border); }
+    .logo { width: 24px; height: 24px; flex: none; }
+    .logo svg { display: block; width: 100%; height: 100%; }
+    .wordmark { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
+    .badge {
+      margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px;
+      border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
     }
-    .error-box {
-      background-color: #1e1e1e;
-      border: 1px solid #d9534f;
-      padding: 24px;
-      border-radius: 8px;
-      max-width: 640px;
-      width: 100%;
-      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
-      line-height: 1.6;
+    .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+    .tone-down { color: var(--down); background: var(--down-bg); }
+    .tone-warn { color: var(--warn); background: var(--warn-bg); }
+    .tone-accent { color: var(--accent-strong); background: var(--accent-bg); }
+    .body { padding: 24px; }
+    h1 { margin: 0 0 6px; font-size: 22px; line-height: 1.25; letter-spacing: -0.015em; }
+    p { margin: 0 0 14px; color: var(--fg-2); }
+    .muted { color: var(--muted); }
+    code { font-family: var(--mono); font-size: 0.92em; background: var(--surface-2); border: 1px solid var(--border); padding: 1px 6px; border-radius: 6px; color: var(--fg); overflow-wrap: anywhere; }
+    h2 { margin: 22px 0 8px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
+    .cmd {
+      display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 8px 8px 12px;
+      background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
     }
-    .error-box code {
-      background: #2e2e2e;
-      color: #ffd5d5;
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: monospace;
+    .cmd code { flex: 1; background: none; border: 0; padding: 0; line-height: 1.6; }
+    .cmd code::before { content: "$ "; color: var(--muted-dim); }
+    .list { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
+    .list li { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; }
+    .list li + li { border-top: 1px solid var(--border); }
+    .list .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; align-self: center; }
+    .dot.up { background: var(--up); } .dot.down { background: var(--down); }
+    .list .name { font-family: var(--mono); font-size: 13px; font-weight: 600; }
+    .list .detail { color: var(--muted); font-size: 13px; }
+    .route { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
+    .route .arrow { color: var(--muted); }
+    .note { padding: 10px 12px; border-radius: 10px; background: var(--down-bg); color: var(--fg-2); margin: 0 0 14px; }
+    .btn {
+      display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px;
+      border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--fg);
+      font: 600 13px/1 var(--sans); cursor: pointer; white-space: nowrap;
+      transition: background 120ms, border-color 120ms;
     }
-    .error-box a { color: #61dafb; text-decoration: none; font-weight: bold; }
-    .error-box a:hover { text-decoration: underline; }
+    .btn:hover { text-decoration: none; background: var(--surface-3); }
+    .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
+    .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
+    .btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
+    .btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
+    .btn-ghost:hover { background: var(--surface-3); color: var(--fg); }
+    .foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface-2); }
+    .foot .spacer { flex: 1; }
+    form.go { display: flex; gap: 8px; margin: 0 0 8px; }
+    .input {
+      flex: 1; min-width: 0; height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong);
+      background: var(--bg); color: var(--fg); font: 14px var(--mono);
+    }
+    .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
+    @media (max-width: 520px) { body { padding: 12px; } .body, .head, .foot { padding-left: 16px; padding-right: 16px; } }
   </style>
 </head>
 <body>
-  <div class="error-box">
-    ${body}
-    <br/><br/>
-    <a href="${(0, escape_1.escapeHtml)(dashboardUrl)}">📋 Open the locadot dashboard</a> ·
-    <a href="https://github.com/avinashid/locadot#readme" target="_blank" rel="noopener noreferrer">📘 Docs</a>
-  </div>
+  <main class="card">
+    <div class="head">
+      <span class="logo" aria-hidden="true">${logo_1.LOGO_SVG}</span>
+      <span class="wordmark">locadot</span>
+      <span class="badge tone-${opts.tone}">${(0, escape_1.escapeHtml)(opts.badge)}</span>
+    </div>
+    <div class="body">
+      <h1>${opts.heading}</h1>
+      ${opts.body}
+    </div>
+    <div class="foot">
+      <a class="btn btn-primary" href="${(0, escape_1.escapeHtml)(opts.dashboardUrl)}">Open the dashboard</a>
+      <a class="btn" href="https://github.com/avinashid/locadot#readme" target="_blank" rel="noopener noreferrer">Docs</a>
+    </div>
+  </main>
+  <script>
+    document.querySelectorAll("[data-copy]").forEach(function (b) {
+      b.addEventListener("click", function () {
+        var text = b.parentNode.querySelector("code").textContent;
+        var done = function () { b.textContent = "Copied"; setTimeout(function () { b.textContent = "Copy"; }, 1500); };
+        if (navigator.clipboard) navigator.clipboard.writeText(text).then(done, function () {});
+      });
+    });
+  </script>
 </body>
 </html>
 `;
-const proxyNotFound = (host, dashboardUrl) => page("locadot: host not mapped", `<strong style="color: #ff6b6b;">Not mapped:</strong>
-    no locadot mapping exists for <code>${(0, escape_1.escapeHtml)(host)}</code>.<br/><br/>
-    Add one with<br/>
-    <code>npx locadot add --host ${(0, escape_1.escapeHtml)(host)} --port PORT</code><br/>
-    or<br/>
-    <code>npx locadot add --host ${(0, escape_1.escapeHtml)(host)} --target https://example.com</code>`, dashboardUrl);
+const cmd = (text) => `<div class="cmd"><code>${(0, escape_1.escapeHtml)(text)}</code><button type="button" class="btn btn-sm btn-ghost" data-copy>Copy</button></div>`;
+const syncLine = (r) => {
+    if (!r.ok)
+        return `<li><span class="dot down"></span><span class="name">${(0, escape_1.escapeHtml)(r.name)}</span><span class="detail">couldn't sync: ${(0, escape_1.escapeHtml)(r.error || "unknown error")}</span></li>`;
+    const changes = [...r.added.map((h) => `+${h}`), ...r.removed.map((h) => `−${h}`)];
+    return `<li><span class="dot up"></span><span class="name">${(0, escape_1.escapeHtml)(r.name)}</span><span class="detail">synced, ${changes.length ? (0, escape_1.escapeHtml)(changes.join(", ")) : "nothing new"}</span></li>`;
+};
+/** `sync`: when there are connected machines, what syncing with them just now found, and the "Sync again" link. */
+const proxyNotFound = (host, dashboardUrl, sync) => page({
+    title: "locadot: host not mapped",
+    badge: "Not mapped",
+    tone: "down",
+    heading: "Not mapped",
+    body: `<p>No locadot mapping exists for <code>${(0, escape_1.escapeHtml)(host)}</code>.</p>
+      ${sync
+        ? `<h2>Connected machines</h2>
+      <p class="muted">Synced just now; none of them shares <code>${(0, escape_1.escapeHtml)(host)}</code> with you.</p>
+      <ul class="list">${sync.reports.map(syncLine).join("")}</ul>
+      <p><a class="btn" href="${(0, escape_1.escapeHtml)(sync.href)}">🔄 Sync again</a></p>
+      <p class="muted">If it should be shared with you, ask whoever shared their locadot to add it to your hosts. Or map it here:</p>`
+        : `<h2>Map it</h2>`}
+      ${cmd(`npx locadot add --host ${host} --port PORT`)}
+      ${cmd(`npx locadot add --host ${host} --target https://example.com`)}`,
+    dashboardUrl,
+});
 exports.proxyNotFound = proxyNotFound;
-const upstreamDown = (host, target, reason, dashboardUrl) => page("locadot: upstream unreachable", `<strong style="color: #ff6b6b;">Upstream unreachable:</strong>
-    <code>${(0, escape_1.escapeHtml)(host)}</code> → <code>${(0, escape_1.escapeHtml)(target)}</code><br/><br/>
-    ${(0, escape_1.escapeHtml)(reason)}. Is the app running?`, dashboardUrl);
+const upstreamDown = (host, target, reason, dashboardUrl) => page({
+    title: "locadot: upstream unreachable",
+    badge: "Upstream unreachable",
+    tone: "down",
+    heading: "Upstream unreachable",
+    body: `<div class="route"><code>${(0, escape_1.escapeHtml)(host)}</code><span class="arrow">→</span><code>${(0, escape_1.escapeHtml)(target)}</code></div>
+      <div class="note">${(0, escape_1.escapeHtml)(reason)}</div>
+      <p class="muted">Is the app running? Start it, then reload this page.</p>`,
+    dashboardUrl,
+});
 exports.upstreamDown = upstreamDown;
 /** Receiver side: `<domain>.localhost/_locadot/ports`, the port picker and shared hosts of an admin remote. */
-const remoteLocalhost = (opts) => page(`locadot: ${opts.sender} localhost`, opts.allowed
-    ? `<strong style="color: #7ee2a8;">${(0, escape_1.escapeHtml)(opts.sender)}</strong>: localhost<br/><br/>
-    Its dashboard is <a href="/">${(0, escape_1.escapeHtml)(opts.domain)}.localhost</a>.<br/>
-    Any port on that machine is at <code>${(0, escape_1.escapeHtml)(opts.portUrl.replace("PORT", "<port>"))}</code>.<br/><br/>
-    <form id="go" style="display:flex;gap:8px">
-      <input id="port" inputmode="numeric" pattern="[0-9]{1,5}" placeholder="3000" required
-        style="flex:1;padding:6px 10px;border-radius:4px;border:1px solid #444;background:#2e2e2e;color:#fff" />
-      <button style="padding:6px 14px;border-radius:4px;border:0;background:#61dafb;color:#000;font-weight:bold">Open</button>
-    </form>
-    <script>
-      document.getElementById("go").addEventListener("submit", function (e) {
-        e.preventDefault();
-        var port = document.getElementById("port").value.trim();
-        if (/^[0-9]{1,5}$/.test(port)) location.href = ${JSON.stringify(opts.portUrl)}.replace("PORT", port);
-      });
-    </script>
-    ${opts.hosts.length
-        ? `<br/>Shared hosts:<br/>${opts.hosts.map((h) => `<a href="${(0, escape_1.escapeHtml)(h.url)}">${(0, escape_1.escapeHtml)(h.local)}</a>`).join("<br/>")}`
-        : ""}`
-    : `<strong style="color: #ff6b6b;">Not available:</strong>
-    <code>${(0, escape_1.escapeHtml)(opts.domain)}.localhost</code> reaches ${(0, escape_1.escapeHtml)(opts.sender)}'s localhost only while you're an
-    admin there and it allows localhost access. Ask its owner, then run <code>locadot remote:sync ${(0, escape_1.escapeHtml)(opts.name)}</code>.`, opts.dashboardUrl);
+const remoteLocalhost = (opts) => page({
+    title: `locadot: ${opts.sender} localhost`,
+    badge: opts.allowed ? "Remote" : "Not available",
+    tone: opts.allowed ? "accent" : "warn",
+    heading: `${(0, escape_1.escapeHtml)(opts.sender)}: localhost`,
+    body: opts.allowed
+        ? `<p>Its dashboard is <a href="/">${(0, escape_1.escapeHtml)(opts.domain)}.localhost</a>.
+      Any port on that machine is at <code>${(0, escape_1.escapeHtml)(opts.portUrl.replace("PORT", "<port>"))}</code>.</p>
+      <h2>Open a port</h2>
+      <form id="go" class="go">
+        <input id="port" class="input" inputmode="numeric" pattern="[0-9]{1,5}" placeholder="3000" required aria-label="Port" />
+        <button class="btn btn-primary">Open</button>
+      </form>
+      <script>
+        document.getElementById("go").addEventListener("submit", function (e) {
+          e.preventDefault();
+          var port = document.getElementById("port").value.trim();
+          if (/^[0-9]{1,5}$/.test(port)) location.href = ${JSON.stringify(opts.portUrl)}.replace("PORT", port);
+        });
+      </script>
+      ${opts.hosts.length
+            ? `<h2>Shared hosts</h2><ul class="list">${opts.hosts
+                .map((h) => `<li><span class="dot up"></span><a class="name" href="${(0, escape_1.escapeHtml)(h.url)}">${(0, escape_1.escapeHtml)(h.local)}</a></li>`)
+                .join("")}</ul>`
+            : ""}`
+        : `<p><code>${(0, escape_1.escapeHtml)(opts.domain)}.localhost</code> reaches ${(0, escape_1.escapeHtml)(opts.sender)}'s localhost only while you're an
+      admin there and it allows localhost access.</p>
+      <p class="muted">Ask its owner, then run:</p>
+      ${cmd(`locadot remote:sync ${opts.name}`)}`,
+    dashboardUrl: opts.dashboardUrl,
+});
 exports.remoteLocalhost = remoteLocalhost;

package/dist/dashboard/api.js

@@ -535,9 +535,11 @@ async function route(req, url, ctx) {
         }
         if (peerMatch && method === "PUT") {
             const id = decodeURIComponent(peerMatch[1]);
+            const hosts = optionalHosts(body.hosts);
+            if (body.role === undefined && hosts !== undefined)
+                return { status: 200, body: { peer: sanitizePeer(links_1.default.setHosts(id, hosts)) } };
             if (!isRole(body.role))
                 throw new ApiError(400, "`role` must be viewer, editor or admin.");
-            const hosts = optionalHosts(body.hosts);
             const peer = links_1.default.setRole(id, body.role, hosts);
             return { status: 200, body: { peer: sanitizePeer(peer) } };
         }

package/dist/dashboard/index.js

@@ -40,6 +40,7 @@ exports.handleDashboardRequest = handleDashboardRequest;
 const crypto_1 = __importDefault(require("crypto"));
 const host_auth_1 = __importDefault(require("../lib/host-auth"));
 const page_1 = require("./page");
+const logo_1 = require("./logo");
 const api_1 = require("./api");
 const request_1 = require("../proxy/request");
 const login_1 = require("./login");
@@ -149,9 +150,10 @@ function handleDashboardRequest(req, res, ctx) {
         case "/":
             sendBody(res, method, 200, "text/html; charset=utf-8", (0, page_1.renderPage)(nonce, (0, request_1.peerOriginOf)(req) ? api_1.PEER_TOKEN : ctx.token, ui_auth_1.default.enabled()));
             return;
+        case "/favicon.svg":
         case "/favicon.ico":
-            res.statusCode = 204;
-            res.end();
+            res.setHeader("Cache-Control", "public, max-age=86400");
+            sendBody(res, method, 200, "image/svg+xml", logo_1.LOGO_SVG);
             return;
         case "/healthz":
             sendBody(res, method, 200, "text/plain; charset=utf-8", "ok");

package/dist/dashboard/login.js

@@ -41,6 +41,7 @@ exports.gate = gate;
 const crypto_1 = __importDefault(require("crypto"));
 const logger_1 = __importDefault(require("../utils/logger"));
 const escape_1 = require("./escape");
+const logo_1 = require("./logo");
 const api_1 = require("./api");
 const ui_auth_1 = __importStar(require("../lib/ui-auth"));
 const request_1 = require("../proxy/request");
@@ -53,6 +54,7 @@ const loginPage = (nonce, error) => `<!doctype html>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="color-scheme" content="dark light">
 <title>Sign in · locadot</title>
+<link rel="icon" type="image/svg+xml" href="/favicon.svg">
 <style nonce="${(0, escape_1.escapeHtml)(nonce)}">
 :root { --bg: #f6f7f9; --surface: #fff; --border: #e3e6eb; --fg: #111827; --muted: #6b7280; --accent: #2563eb; --down: #dc2626; }
 @media (prefers-color-scheme: dark) { :root { --bg: #0d1117; --surface: #161b22; --border: #30363d; --fg: #e6edf3; --muted: #8b949e; --accent: #3b82f6; --down: #f87171; } }
@@ -60,8 +62,7 @@ const loginPage = (nonce, error) => `<!doctype html>
 body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--fg); font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
 form { width: 100%; max-width: 340px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
 .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
-.logo { width: 24px; height: 24px; border-radius: 7px; background: var(--accent); position: relative; }
-.logo::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
+.logo { width: 24px; height: 24px; background: url("${logo_1.LOGO_DATA_URI}") center / contain no-repeat; }
 p { margin: 0; color: var(--muted); }
 label { font-weight: 600; font-size: 13px; }
 input { width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); font: inherit; }
@@ -111,7 +112,7 @@ const secure = (req) => ((0, request_1.isPanel)(req) ? (0, request_1.isTls)(req)
 const cookie = (req, value, maxAge) => `${ui_auth_1.SESSION_COOKIE}=${value}; Path=/; HttpOnly; SameSite=Strict; Max-Age=${maxAge}${secure(req) ? "; Secure" : ""}`;
 const sendLogin = (res, method, nonce, status, error) => {
     // The dashboard's CSP forbids form posts; the login form needs one.
-    res.setHeader("Content-Security-Policy", `default-src 'none'; style-src 'nonce-${nonce}'; form-action 'self'; base-uri 'none'; frame-ancestors 'none'`);
+    res.setHeader("Content-Security-Policy", `default-src 'none'; style-src 'nonce-${nonce}'; img-src 'self' data:; form-action 'self'; base-uri 'none'; frame-ancestors 'none'`);
     res.statusCode = status;
     res.setHeader("Content-Type", "text/html; charset=utf-8");
     res.end(method === "HEAD" ? undefined : loginPage(nonce, error));
@@ -207,7 +208,7 @@ function gate(req, res, url, token, nonce) {
         res.end(JSON.stringify({ ok: true }));
         return true;
     }
-    if (path === "/healthz" || path === "/favicon.ico")
+    if (path === "/healthz" || path === "/favicon.ico" || path === "/favicon.svg")
         return false;
     if ((0, exports.signedIn)(req) || hasToken(req, token))
         return false;

package/dist/dashboard/logo.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LOGO_DATA_URI = exports.LOGO_SVG = void 0;
+/**
+ * The locadot mark: a padlock on a blue tile, its body the "dot". Served as the favicon and used by the
+ * sidebar and sign-in page (.logo background). docs/logo.svg is the same drawing for the README.
+ */
+exports.LOGO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">` +
+    `<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">` +
+    `<stop offset="0" stop-color="#4f8ff7"/><stop offset=".55" stop-color="#2563eb"/><stop offset="1" stop-color="#1e4fd6"/>` +
+    `</linearGradient></defs>` +
+    `<rect width="64" height="64" rx="15" fill="url(#g)"/>` +
+    `<path d="M23.5 30v-6.5a8.5 8.5 0 0 1 17 0V30" fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"/>` +
+    `<rect x="15" y="28" width="34" height="24" rx="6" fill="#fff"/>` +
+    `<circle cx="32" cy="40" r="5" fill="#2563eb"/>` +
+    `</svg>`;
+exports.LOGO_DATA_URI = `data:image/svg+xml,${encodeURIComponent(exports.LOGO_SVG)}`;

package/dist/dashboard/page.js

@@ -36,6 +36,7 @@ function renderPage(nonce, token, uiAuth = false) {
 <meta name="locadot-token" content="${safeToken}">
 <meta name="locadot-ui-auth" content="${uiAuth ? "on" : "off"}">
 <title>locadot dashboard</title>
+<link rel="icon" type="image/svg+xml" href="/favicon.svg">
 <script nonce="${safeNonce}">try { var t = localStorage.getItem("locadot.theme"); if (t === "light" || t === "dark") document.documentElement.setAttribute("data-theme", t); var s = localStorage.getItem("locadot.sidebar"); if (s === "collapsed" || (s !== "expanded" && window.innerWidth < 1100)) document.documentElement.setAttribute("data-sidebar", "collapsed"); } catch (e) {}</script>
 <style nonce="${safeNonce}">${theme_1.css}${hosts_1.css}${remote_1.css}${system_1.css}</style>
 </head>

package/dist/dashboard/ui/remote.js

@@ -56,6 +56,13 @@ exports.jsHub = `  // ---------- remote access: hub (sender) ----------
       sub.className = "muted";
       sub.textContent = "last seen " + fmtRelative(peer.lastSeen);
       main.appendChild(sub);
+      if (peer.role === "viewer") {
+        var seesLine = document.createElement("div");
+        seesLine.className = "muted peer-hosts";
+        var sees = peer.hosts || [];
+        seesLine.textContent = sees.length ? "sees " + sees.join(", ") : "sees no hosts";
+        main.appendChild(seesLine);
+      }
       row.appendChild(main);
 
       var meta = document.createElement("div");
@@ -80,9 +87,10 @@ exports.jsHub = `  // ---------- remote access: hub (sender) ----------
         });
       }
       meta.appendChild(makeMoreButton(function () {
-        return ["viewer", "editor", "admin"].map(function (r) {
+        var items = peer.role === "viewer" ? [{ label: "Choose hosts\\u2026", icon: ICONS.edit, onSelect: function () { choosePeerHosts(peer); } }, "-"] : [];
+        return items.concat(["viewer", "editor", "admin"].map(function (r) {
           return { label: "Set as " + r.charAt(0).toUpperCase() + r.slice(1), disabled: r === peer.role, onSelect: function () { setRole(r); } };
-        }).concat(["-", { label: "Revoke", icon: ICONS.trash, danger: true, onSelect: revoke }]);
+        })).concat(["-", { label: "Revoke", icon: ICONS.trash, danger: true, onSelect: revoke }]);
       }, { label: "Actions for " + peer.name, small: true }));
       row.appendChild(meta);
       peersListEl.appendChild(row);
@@ -90,6 +98,57 @@ exports.jsHub = `  // ---------- remote access: hub (sender) ----------
     });
   }
 
+  // Which of this machine's hosts a viewer peer sees; the peer picks the change up on its next sync.
+  var peerHostsDialog = null;
+  function choosePeerHosts(peer) {
+    if (!peerHostsDialog) {
+      peerHostsDialog = document.createElement("dialog");
+      peerHostsDialog.id = "peer-hosts-dialog";
+      peerHostsDialog.innerHTML =
+        '<div class="modal-head"><div><h3 class="modal-title"></h3><p class="modal-desc">They see only the hosts you tick. Changes reach them on their next sync.</p></div>' +
+        '<button type="button" class="btn btn-ghost modal-close" data-close aria-label="Close"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button></div>' +
+        '<div class="modal-body"><div class="host-checks"></div><p class="dim" data-empty hidden>No hosts on this machine yet.</p></div>' +
+        '<div class="modal-foot"><button type="button" class="btn" data-close>Cancel</button><button type="button" class="btn btn-primary" data-save>Save</button></div>';
+      document.body.appendChild(peerHostsDialog);
+      Array.prototype.forEach.call(peerHostsDialog.querySelectorAll("[data-close]"), function (b) {
+        b.addEventListener("click", function () { peerHostsDialog.close(); });
+      });
+      peerHostsDialog.addEventListener("click", function (e) { if (e.target === peerHostsDialog) peerHostsDialog.close(); });
+    }
+    var dialog = peerHostsDialog;
+    dialog.querySelector(".modal-title").textContent = "Hosts " + peer.name + " sees";
+    var checks = dialog.querySelector(".host-checks");
+    clear(checks);
+    var current = {};
+    (peer.hosts || []).forEach(function (h) { current[h] = true; });
+    var own = lastHosts.filter(function (r) { return !r.remote; }).map(function (r) { return r.host; });
+    // Keep assigned names that have no mapping right now, so saving doesn't drop them silently.
+    (peer.hosts || []).forEach(function (h) { if (own.indexOf(h) < 0) own.push(h); });
+    own.forEach(function (h) {
+      var label = document.createElement("label");
+      var cb = document.createElement("input");
+      cb.type = "checkbox";
+      cb.value = h;
+      cb.checked = Boolean(current[h]);
+      label.appendChild(cb);
+      label.appendChild(document.createTextNode(h));
+      checks.appendChild(label);
+    });
+    dialog.querySelector("[data-empty]").hidden = own.length !== 0;
+    var save = dialog.querySelector("[data-save]");
+    var fresh = save.cloneNode(true);
+    save.parentNode.replaceChild(fresh, save);
+    fresh.addEventListener("click", function () {
+      var hosts = Array.prototype.filter.call(checks.querySelectorAll("input"), function (cb) { return cb.checked; }).map(function (cb) { return cb.value; });
+      fresh.disabled = true;
+      apiFetch("/api/peers/" + encodeURIComponent(peer.id), { method: "PUT", body: JSON.stringify({ hosts: hosts }) })
+        .then(function () { dialog.close(); showToast("Updated hosts for " + peer.name, "success"); return loadHub(); })
+        .catch(function (err) { apiError(err, "Couldn't update hosts"); })
+        .then(function () { fresh.disabled = false; });
+    });
+    dialog.showModal();
+  }
+
   function renderInvites(invites) {
     invitesEmptyEl.hidden = invites.length !== 0;
     clear(invitesListEl);

package/dist/dashboard/ui/theme.js

@@ -1,4 +1,6 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.css = exports.darkVars = exports.lightVars = void 0;
 /**
  * The dashboard's styles: design tokens, base, app shell, shared components, pages, responsive rules.
  *
@@ -21,8 +23,7 @@
  *   Motion        .anim-in (one element), .anim-list (children stagger in); all motion off under prefers-reduced-motion
  *   Tooltips      data-tip="text" on any element (data-tip-pos="right|bottom|top")
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.css = exports.lightVars = void 0;
+const logo_1 = require("../logo");
 exports.lightVars = `
   color-scheme: light;
   --bg: #f7f7f8;
@@ -59,8 +60,7 @@ exports.lightVars = `
   --shadow-md: 0 4px 12px rgba(16, 16, 24, 0.08), 0 1px 3px rgba(16, 16, 24, 0.06);
   --shadow-lg: 0 16px 40px rgba(16, 16, 24, 0.16), 0 2px 6px rgba(16, 16, 24, 0.06);
 `;
-exports.css = `
-:root {
+exports.darkVars = `
   color-scheme: dark;
   --bg: #09090b;
   --surface: #111114;
@@ -95,7 +95,9 @@ exports.css = `
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
   --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02);
   --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
-
+`;
+exports.css = `
+:root {${exports.darkVars}
   --radius-xs: 6px;
   --radius-sm: 8px;
   --radius-md: 10px;
@@ -199,19 +201,10 @@ header {
 .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
 .logo {
   width: 24px; height: 24px;
-  border-radius: 7px;
-  background: linear-gradient(145deg, #4f8ff7, var(--accent) 55%, #1e4fd6);
-  position: relative;
+  border-radius: 6px;
+  background: url("${logo_1.LOGO_DATA_URI}") center / contain no-repeat;
   flex-shrink: 0;
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 1px 2px rgba(37, 99, 235, 0.35);
-}
-.logo::after {
-  content: "";
-  position: absolute;
-  left: 8px; top: 8px;
-  width: 8px; height: 8px;
-  border-radius: 50%;
-  background: #fff;
+  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.35);
 }
 .wordmark {
   font-size: 15px;

package/dist/index.js

@@ -188,6 +188,12 @@ program
     .description("Change a peer's role")
     .option("--hosts <hosts>", "Comma separated hosts (viewer role only)")
     .action(run((id, role, options) => commands_1.default.peersRole(id, role, options)));
+program
+    .command("peers:hosts <id> [hosts]")
+    .description("Show or change the hosts a viewer peer sees (comma separated hosts replace the list)")
+    .option("--add <hosts>", "Comma separated hosts to add")
+    .option("--remove <hosts>", "Comma separated hosts to remove")
+    .action(run((id, hosts, options) => commands_1.default.peersHosts(id, hosts, options)));
 program.command("peers:revoke <id>").description("Revoke a peer").action(run((id) => commands_1.default.peersRevoke(id)));
 program
     .command("connect <string>")

package/dist/lib/links.js

@@ -134,6 +134,18 @@ class Links {
         save(data);
         return peer;
     }
+    /** A viewer's mappings, changed after pairing. Editors and admins see everything, so they have no list. */
+    static setHosts(peerId, hosts) {
+        const data = load();
+        const peer = data.peers.find((p) => p.id === peerId);
+        if (!peer)
+            throw new LinkError(404, "Peer not found.");
+        if (peer.role !== "viewer")
+            throw new LinkError(400, `${peer.name} is ${peer.role === "admin" ? "an admin" : "an editor"} and already sees every host.`);
+        peer.hosts = [...new Set(hosts.map((h) => h.trim().toLowerCase()).filter(Boolean))].sort();
+        save(data);
+        return peer;
+    }
     static revoke(peerId) {
         const data = load();
         const peers = data.peers.filter((p) => p.id !== peerId);

package/dist/lib/remotes.js

@@ -244,15 +244,23 @@ class Remotes {
         const hostsRes = await call(`${apiBase(remote.url)}/hosts`, { token: remote.token });
         const hosts = hostsRes.hosts;
         const now = new Date().toISOString();
+        const added = [];
+        const removed = [];
         await registry_1.default.mutate((registry) => {
             const already = new Set();
             const flags = new Map(hosts.map((h) => [h.host, h]));
             for (const [local, entry] of Object.entries(registry.hosts)) {
                 if (entry.remote?.name !== name)
                     continue;
-                already.add(entry.remote.host);
                 const h = flags.get(entry.remote.host);
-                if (h && Boolean(h.cors) !== Boolean(entry.cors))
+                // No longer shared with us (unassigned from a viewer, or deleted on the sender): drop it, aliases too.
+                if (!h) {
+                    delete registry.hosts[local];
+                    removed.push(local);
+                    continue;
+                }
+                already.add(entry.remote.host);
+                if (Boolean(h.cors) !== Boolean(entry.cors))
                     registry.hosts[local] = { ...entry, cors: h.cors || undefined };
             }
             const taken = new Set(Object.keys(registry.hosts));
@@ -264,13 +272,14 @@ class Remotes {
                     continue;
                 taken.add(local);
                 registry.hosts[local] = { target: updated.url, remote: { name, host: h.host }, ...inherited(h), createdAt: now, updatedAt: now };
+                added.push(local);
             }
         });
         const registry = registry_1.default.read();
         const mapped = Object.entries(registry.hosts)
             .filter(([, e]) => e.remote?.name === name)
             .map(([local, e]) => ({ local, host: e.remote.host }));
-        return { remote: updated, hosts, mapped, domain: updated.domain };
+        return { remote: updated, hosts, mapped, added, removed, domain: updated.domain };
     }
     static async alias(name, remoteHost, localHost) {
         const remote = Remotes.mustGet(name);

package/dist/proxy/auto-sync.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withoutSyncParam = exports.wantsForcedSync = exports.mayAutoSync = exports.SYNC_PARAM = void 0;
+exports.createAutoSync = createAutoSync;
+const request_1 = require("./request");
+/** The "Sync again" button on the not-mapped page: same URL plus this query parameter. */
+exports.SYNC_PARAM = "locadot-sync";
+const withTimeout = (promise, ms) => new Promise((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error(`timed out after ${Math.round(ms / 1000)}s`)), ms);
+    promise.then((value) => (clearTimeout(timer), resolve(value)), (error) => (clearTimeout(timer), reject(error)));
+});
+const message = (error) => String(error?.message || error).replace(/^❌\s*/u, "");
+/**
+ * Syncs every connected machine when a browser asks for a name that isn't mapped: the sender may have
+ * added or assigned it since the last sync. Concurrent requests share one run, and a recent run is reused.
+ * Resolves undefined when there's nothing to sync with.
+ */
+function createAutoSync(opts) {
+    const freshMs = opts.freshMs ?? 10000;
+    const forcedFreshMs = opts.forcedFreshMs ?? 2000;
+    const timeoutMs = opts.timeoutMs ?? 5000;
+    let running;
+    let last;
+    const run = async (names) => {
+        const reports = await Promise.all(names.map((name) => withTimeout(opts.sync(name), timeoutMs).then((r) => ({ name, ok: true, added: r.added, removed: r.removed }), (error) => ({ name, ok: false, added: [], removed: [], error: message(error) }))));
+        if (reports.some((r) => r.added.length || r.removed.length))
+            opts.changed();
+        return reports;
+    };
+    return (force = false) => {
+        const names = opts.remotes();
+        if (!names.length)
+            return Promise.resolve(undefined);
+        if (running)
+            return running;
+        if (last && Date.now() - last.at < (force ? forcedFreshMs : freshMs))
+            return Promise.resolve(last.reports);
+        running = run(names).then((reports) => {
+            last = { at: Date.now(), reports };
+            return reports;
+        });
+        running.finally(() => (running = undefined)).catch(() => { });
+        return running;
+    };
+}
+/** Only this machine's own browser triggers a sync; tunnels, the hub and peers just get the page. */
+const mayAutoSync = (req, hub) => !(hub && hub.kind !== "none") && !(0, request_1.fromTunnel)(req) && !(0, request_1.fromRemote)(req) && !req.headers["cf-ray"];
+exports.mayAutoSync = mayAutoSync;
+const wantsForcedSync = (req) => new URLSearchParams((req.url || "").split("?")[1] || "").has(exports.SYNC_PARAM);
+exports.wantsForcedSync = wantsForcedSync;
+/** The URL the browser asked for, minus the sync parameter: where to send it once the name is mapped. */
+const withoutSyncParam = (url) => {
+    const [path, query = ""] = url.split("?");
+    const params = new URLSearchParams(query);
+    params.delete(exports.SYNC_PARAM);
+    const rest = params.toString();
+    return (path.startsWith("/") ? path : "/") + (rest ? `?${rest}` : "");
+};
+exports.withoutSyncParam = withoutSyncParam;

package/dist/proxy/router.js

@@ -21,6 +21,7 @@ const request_1 = require("./request");
 const stats_1 = require("./stats");
 const protect_1 = require("./protect");
 const https_redirect_1 = require("./https-redirect");
+const auto_sync_1 = require("./auto-sync");
 // Cloudflare swaps an origin's 502/504 for its own "bad gateway" page, so through a tunnel say 503 and the page survives.
 const downStatus = (req) => ((0, request_1.fromTunnel)(req) || (0, request_1.fromRemote)(req) ? 503 : 502);
 /** Resolves a tunnel's public host to its mapping and tags the request, before any routing. */
@@ -111,6 +112,33 @@ const localTarget = (req, ctx, host, hub) => {
         return undefined;
     return ctx.localFor?.(host);
 };
+/** An unknown name may be one a connected machine shared since the last sync: sync, then retry or explain. */
+function notMapped(req, res, ctx, host, hub) {
+    const notFound = (reports) => {
+        res.writeHead(downStatus(req), { "Content-Type": "text/html; charset=utf-8", "Cache-Control": "no-store" });
+        const href = (path) => `${path}${path.includes("?") ? "&" : "?"}${auto_sync_1.SYNC_PARAM}=1`;
+        res.end((0, template_1.proxyNotFound)(host, dashboardUrl(req), reports && { reports, href: href((0, auto_sync_1.withoutSyncParam)(req.url || "/")) }));
+    };
+    if (!ctx.autoSync || !(0, auto_sync_1.mayAutoSync)(req, hub))
+        return notFound();
+    ctx
+        .autoSync((0, auto_sync_1.wantsForcedSync)(req))
+        .then((reports) => {
+        if (res.headersSent || res.destroyed)
+            return;
+        if (reports && (ctx.lookup(host) || localTarget(req, ctx, host, hub))) {
+            res.writeHead(307, { Location: (0, auto_sync_1.withoutSyncParam)(req.url || "/"), "Cache-Control": "no-store" });
+            res.end();
+            return;
+        }
+        notFound(reports);
+    })
+        .catch((error) => {
+        logger_1.default.warn(`auto-sync for ${host}: ${error?.message || error}`);
+        if (!res.headersSent)
+            notFound();
+    });
+}
 function handleRequest(req, res, ctx) {
     const hub = ctx.hub?.classify(req);
     if (hub?.kind === "api") {
@@ -139,8 +167,7 @@ function handleRequest(req, res, ctx) {
                 forwardLocal(req, res, ctx, host, local);
                 return;
             }
-            res.writeHead(downStatus(req), { "Content-Type": "text/html; charset=utf-8", "Cache-Control": "no-store" });
-            res.end((0, template_1.proxyNotFound)(host, dashboardUrl(req)));
+            notMapped(req, res, ctx, host, hub);
             return;
         }
         if (entry.remote) {

package/dist/server/index.js

@@ -16,6 +16,8 @@ const tunnel_1 = require("../proxy/tunnel");
 const hub_tunnel_1 = require("../proxy/hub-tunnel");
 const hub_1 = require("../proxy/hub");
 const remote_1 = require("../proxy/remote");
+const auto_sync_1 = require("../proxy/auto-sync");
+const remotes_1 = __importDefault(require("../lib/remotes"));
 const hub_config_1 = __importDefault(require("../lib/hub-config"));
 const config_1 = __importDefault(require("../lib/config"));
 const file_1 = __importDefault(require("../utils/file"));
@@ -71,6 +73,11 @@ async function startCentralProxy() {
         ownPorts: () => [info.httpPort, info.httpsPort],
         httpsRedirect: () => config_1.default.httpsRedirect(),
         httpsPort: () => info.httpsPort,
+        autoSync: (0, auto_sync_1.createAutoSync)({
+            remotes: () => remotes_1.default.list().map((remote) => remote.name),
+            sync: (name) => remotes_1.default.sync(name),
+            changed: registry.reload,
+        }),
         remoteFor: remote_1.remoteFor,
         localFor: remote_1.localFor,
         remoteHosts: (name) => Object.entries(registry.get().hosts)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "locadot",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "description": "Secure your local development environment with HTTPS and custom domains like dev.localhost.",
   "homepage": "https://www.npmjs.com/package/locadot",
   "main": "dist/index.js",