locadot 2.1.0 → 2.3.0

package/dist/dashboard/page.js

@@ -348,11 +348,16 @@ td.badges .badge + .badge { margin-left: 4px; }
 .btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--muted-dim); }
 .btn:disabled { opacity: 0.5; cursor: not-allowed; }
 .btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
+.btn-sm.btn-icon { width: 28px; padding: 0; color: var(--muted); }
+.btn-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.btn-icon.is-set { color: var(--accent); border-color: transparent; background: var(--accent-bg); }
 .btn-block { width: 100%; }
 .btn-primary { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
 .btn-primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
 .btn-danger { border-color: var(--down); color: var(--down); background: transparent; }
 .btn-danger:hover:not(:disabled) { background: var(--down-bg); border-color: var(--down); }
+.modal-foot .btn-danger { background: var(--down); border-color: var(--down); color: #fff; }
+.modal-foot .btn-danger:hover:not(:disabled) { background: var(--down); filter: brightness(0.92); }
 .btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
 .btn-ghost:hover:not(:disabled) { background: var(--surface-2); border-color: transparent; color: var(--fg); }
 .btn-ghost-danger { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
@@ -575,6 +580,8 @@ td .inline-check + .inline-check { margin-top: 4px; }
 .inline-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
 .tunnel-cell { white-space: normal; }
 .tunnel-status { display: flex; align-items: center; gap: 6px; max-width: 240px; }
+.tunnel-login { display: flex; flex-direction: column; gap: 2px; font-size: 12px; white-space: nowrap; }
+.tunnel-login a { font-weight: 500; }
 .tunnel-status a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; display: inline-block; vertical-align: middle; font-size: 12px; }
 .tunnel-error { color: var(--down); cursor: help; }
 .tunnel-error-text {
@@ -729,6 +736,139 @@ details.card[open] summary { border-bottom: 1px solid var(--border); border-bott
   margin: 0;
 }
 
+/* ---------- allow dialog ---------- */
+#allow-dialog {
+  width: min(520px, calc(100vw - 32px));
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--fg);
+  box-shadow: var(--shadow-md);
+}
+#allow-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
+.modal-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+}
+.modal-title { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
+.modal-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
+.modal-close { width: 28px; height: 28px; padding: 0; border-radius: 999px; flex-shrink: 0; }
+.modal-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
+.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
+.modal-desc { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
+.modal-warn {
+  font-size: 12.5px;
+  color: var(--warn);
+  background: var(--warn-bg);
+  border: 1px solid var(--warn);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  line-height: 1.5;
+}
+.allow-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
+.allow-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 6px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+}
+.allow-row span { font-size: 13px; word-break: break-all; }
+.allow-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  font-size: 15px;
+  line-height: 1;
+  border-radius: var(--radius-xs);
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.allow-remove:hover { color: var(--down); background: var(--down-bg); border-color: transparent; }
+.allow-empty { font-size: 13px; padding: 4px 0; }
+.allow-add-row { display: flex; gap: 8px; }
+.allow-add-row .input { flex: 1; }
+.allow-add-row .btn { height: auto; align-self: stretch; padding: 0 14px; }
+.modal-hint { margin: 0; font-size: 12px; color: var(--muted-dim); }
+.modal-foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px;
+  border-top: 1px solid var(--border);
+}
+
+/* ---------- confirm / prompt / share dialogs ---------- */
+#confirm-dialog, #prompt-dialog, #share-dialog {
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--fg);
+  box-shadow: var(--shadow-md);
+}
+#confirm-dialog::backdrop, #prompt-dialog::backdrop, #share-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
+#confirm-dialog { width: min(420px, calc(100vw - 32px)); }
+#prompt-dialog { width: min(420px, calc(100vw - 32px)); }
+#share-dialog { width: min(480px, calc(100vw - 32px)); }
+.share-options { display: flex; flex-direction: column; gap: 10px; }
+.option-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  width: 100%;
+  text-align: left;
+  padding: 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-2);
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.option-card:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
+.option-card[aria-checked="true"] { border-color: var(--accent); background: var(--accent-bg); }
+.option-dot {
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  flex-shrink: 0;
+  border-radius: 999px;
+  border: 1.5px solid var(--border-strong);
+  background: var(--surface);
+  position: relative;
+}
+.option-card[aria-checked="true"] .option-dot { border-color: var(--accent); }
+.option-card[aria-checked="true"] .option-dot::after {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--accent);
+}
+.option-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.option-title { font-size: 13.5px; font-weight: 600; }
+.option-desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
+.option-extra { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
+.option-extra .field-error { margin-top: 4px; }
+
 /* ---------- toasts ---------- */
 .toast-container {
   position: fixed;
@@ -1061,6 +1201,10 @@ const clientJs = `
   var connectDomainInput = document.getElementById("connect-domain");
   var hubLocalhostRow = document.getElementById("hub-localhost-row");
   var hubLocalhostSwitch = document.getElementById("hub-localhost");
+  var hubPanelRow = document.getElementById("hub-panel-row");
+  var hubPanelSwitch = document.getElementById("hub-panel");
+  var hubPanelSub = document.getElementById("hub-panel-sub");
+  var hubPanelUrl = "";
   var connectSubmitBtn = document.getElementById("connect-submit");
   var connectErrorEl = document.getElementById("connect-error");
   var remotesEmptyEl = document.getElementById("remotes-empty");
@@ -1076,6 +1220,7 @@ const clientJs = `
   var startupBusy = false;
   var cfInstallBusy = false;
   var cloudflaredInstalled = false;
+  var cloudflareLoggedIn = false;
   var proxyStopped = false;
   var pollTimer = null;
   var remotesPollTimer = null;
@@ -1293,6 +1438,7 @@ const clientJs = `
 
     var cf = sys.cloudflared || { installed: false };
     cloudflaredInstalled = !!cf.installed;
+    cloudflareLoggedIn = !!cf.loggedIn;
     if (cf.installed) {
       cfValueEl.textContent = "Installed";
       cfValueEl.className = "tile-value ok";
@@ -1374,11 +1520,13 @@ const clientJs = `
       revokeBtn.className = "btn btn-sm btn-danger";
       revokeBtn.textContent = "Revoke";
       revokeBtn.addEventListener("click", function () {
-        if (!window.confirm("Revoke " + peer.name + "?")) return;
-        revokeBtn.disabled = true;
-        apiFetch("/api/peers/" + encodeURIComponent(peer.id), { method: "DELETE" })
-          .then(function () { showToast("Revoked " + peer.name, "success"); return loadHub(); })
-          .catch(function (err) { apiError(err, "Couldn't revoke peer"); revokeBtn.disabled = false; });
+        confirmDialog({ title: "Revoke " + peer.name + "?", message: "This peer will lose access immediately.", confirmLabel: "Revoke", danger: true }).then(function (ok) {
+          if (!ok) return;
+          revokeBtn.disabled = true;
+          apiFetch("/api/peers/" + encodeURIComponent(peer.id), { method: "DELETE" })
+            .then(function () { showToast("Revoked " + peer.name, "success"); return loadHub(); })
+            .catch(function (err) { apiError(err, "Couldn't revoke peer"); revokeBtn.disabled = false; });
+        });
       });
       controls.appendChild(revokeBtn);
       row.appendChild(controls);
@@ -1509,6 +1657,9 @@ const clientJs = `
 
     hubLocalhostRow.hidden = !data.config;
     setSwitch(hubLocalhostSwitch, data.localhost !== false);
+    hubPanelUrl = status === "up" && hub.url ? hub.url : "";
+    hubPanelRow.hidden = !data.config;
+    renderHubPanel(data.panel === true);
 
     hubErrorRow.hidden = !(status === "error" && hub.error);
     if (status === "error" && hub.error) hubErrorRow.textContent = hub.error;
@@ -1558,13 +1709,15 @@ const clientJs = `
   });
 
   hubStopBtn.addEventListener("click", function () {
-    if (!window.confirm("Stop remote access? Connected peers will be disconnected.")) return;
-    hubStopBtn.disabled = true;
-    hubStopBtn.classList.add("busy");
-    apiFetch("/api/hub", { method: "POST", body: JSON.stringify({ mode: "off" }) })
-      .then(function () { showToast("Remote access stopped", "success"); return loadHub(); })
-      .catch(function (err) { apiError(err, "Couldn't stop remote access"); })
-      .then(function () { hubStopBtn.disabled = false; hubStopBtn.classList.remove("busy"); });
+    confirmDialog({ title: "Stop remote access?", message: "Connected peers will be disconnected.", confirmLabel: "Stop remote access", danger: true }).then(function (ok) {
+      if (!ok) return;
+      hubStopBtn.disabled = true;
+      hubStopBtn.classList.add("busy");
+      apiFetch("/api/hub", { method: "POST", body: JSON.stringify({ mode: "off" }) })
+        .then(function () { showToast("Remote access stopped", "success"); return loadHub(); })
+        .catch(function (err) { apiError(err, "Couldn't stop remote access"); })
+        .then(function () { hubStopBtn.disabled = false; hubStopBtn.classList.remove("busy"); });
+    });
   });
 
   // ---------- remote access: connected machines (receiver) ----------
@@ -1626,11 +1779,12 @@ const clientJs = `
       urlEditBtn.className = "btn btn-sm btn-ghost";
       urlEditBtn.textContent = "Update URL";
       urlEditBtn.addEventListener("click", function () {
-        var next = window.prompt("New URL for " + remote.name, remote.url);
-        if (!next || !next.trim() || next.trim() === remote.url) return;
-        apiFetch("/api/remotes/" + encodeURIComponent(remote.name), { method: "PUT", body: JSON.stringify({ url: next.trim() }) })
-          .then(function () { showToast("Updated URL for " + remote.name, "success"); return loadRemotes(); })
-          .catch(function (err) { apiError(err, "Couldn't update URL"); });
+        promptDialog({ title: "Update URL", message: "New URL for " + remote.name, label: "URL", value: remote.url, confirmLabel: "Save" }).then(function (next) {
+          if (!next || !next.trim() || next.trim() === remote.url) return;
+          apiFetch("/api/remotes/" + encodeURIComponent(remote.name), { method: "PUT", body: JSON.stringify({ url: next.trim() }) })
+            .then(function () { showToast("Updated URL for " + remote.name, "success"); return loadRemotes(); })
+            .catch(function (err) { apiError(err, "Couldn't update URL"); });
+        });
       });
       urlRow.appendChild(urlEditBtn);
       item.appendChild(urlRow);
@@ -1656,11 +1810,13 @@ const clientJs = `
       disconnectBtn.className = "btn btn-sm btn-danger";
       disconnectBtn.textContent = "Disconnect";
       disconnectBtn.addEventListener("click", function () {
-        if (!window.confirm("Disconnect from " + remote.name + "? This removes its hosts too.")) return;
-        disconnectBtn.disabled = true;
-        apiFetch("/api/remotes/" + encodeURIComponent(remote.name), { method: "DELETE" })
-          .then(function () { showToast("Disconnected " + remote.name, "success"); return Promise.all([loadRemotes(), loadHosts()]); })
-          .catch(function (err) { apiError(err, "Couldn't disconnect"); disconnectBtn.disabled = false; });
+        confirmDialog({ title: "Disconnect from " + remote.name + "?", message: "This removes its hosts too.", confirmLabel: "Disconnect", danger: true }).then(function (ok) {
+          if (!ok) return;
+          disconnectBtn.disabled = true;
+          apiFetch("/api/remotes/" + encodeURIComponent(remote.name), { method: "DELETE" })
+            .then(function () { showToast("Disconnected " + remote.name, "success"); return Promise.all([loadRemotes(), loadHosts()]); })
+            .catch(function (err) { apiError(err, "Couldn't disconnect"); disconnectBtn.disabled = false; });
+        });
       });
       actions.appendChild(disconnectBtn);
       item.appendChild(actions);
@@ -1711,11 +1867,13 @@ const clientJs = `
             delBtn.className = "btn btn-sm btn-danger";
             delBtn.textContent = "Delete";
             delBtn.addEventListener("click", function () {
-              if (!window.confirm("Delete " + h.host + " on " + remote.name + "?")) return;
-              delBtn.disabled = true;
-              apiFetch("/api/remotes/" + encodeURIComponent(remote.name) + "/hosts/" + encodeURIComponent(h.host), { method: "DELETE" })
-                .then(function () { showToast("Deleted " + h.host, "success"); return Promise.all([loadRemotes(), loadHosts()]); })
-                .catch(function (err) { apiError(err, "Couldn't delete host"); delBtn.disabled = false; });
+              confirmDialog({ title: "Delete " + h.host + " on " + remote.name + "?", message: "This can't be undone.", confirmLabel: "Delete", danger: true }).then(function (ok) {
+                if (!ok) return;
+                delBtn.disabled = true;
+                apiFetch("/api/remotes/" + encodeURIComponent(remote.name) + "/hosts/" + encodeURIComponent(h.host), { method: "DELETE" })
+                  .then(function () { showToast("Deleted " + h.host, "success"); return Promise.all([loadRemotes(), loadHosts()]); })
+                  .catch(function (err) { apiError(err, "Couldn't delete host"); delBtn.disabled = false; });
+              });
             });
             hostRow.appendChild(delBtn);
           }
@@ -1874,6 +2032,29 @@ const clientJs = `
     return row;
   }
 
+  function renderHubPanel(on) {
+    setSwitch(hubPanelSwitch, on);
+    // Turning it on needs a password; turning it off never does.
+    hubPanelSwitch.disabled = !on && !UI_AUTH;
+    if (!UI_AUTH && !on) hubPanelSub.textContent = "Set a dashboard password in Settings first. Visitors sign in with it.";
+    else if (on) hubPanelSub.textContent = "Open " + (hubPanelUrl || "the public URL") + " in any browser and sign in with the dashboard password.";
+    else hubPanelSub.textContent = "Open this dashboard from any browser at the public URL, after signing in with the dashboard password.";
+  }
+
+  hubPanelSwitch.addEventListener("click", function () {
+    var next = hubPanelSwitch.getAttribute("aria-checked") !== "true";
+    hubPanelSwitch.disabled = true;
+    apiFetch("/api/hub/panel", { method: "PUT", body: JSON.stringify({ enabled: next }) })
+      .then(function () {
+        renderHubPanel(next);
+        showToast(next ? "The dashboard is shared at the public URL" : "The dashboard is no longer shared", "success");
+      })
+      .catch(function (err) {
+        apiError(err, "Couldn't change dashboard sharing");
+        renderHubPanel(!next);
+      });
+  });
+
   hubLocalhostSwitch.addEventListener("click", function () {
     var next = hubLocalhostSwitch.getAttribute("aria-checked") !== "true";
     hubLocalhostSwitch.disabled = true;
@@ -1931,29 +2112,31 @@ const clientJs = `
 
   stopProxyBtn.addEventListener("click", function () {
     if (proxyStopped) return;
-    if (!window.confirm("Stop the locadot proxy? Run \\"locadot start\\" to bring it back up.")) return;
-    stopProxyBtn.disabled = true;
-    stopProxyBtn.classList.add("busy");
-    apiFetch("/api/proxy/stop", { method: "POST" })
-      .then(function () {
-        proxyStopped = true;
-        clear(stoppedBanner);
-        stoppedBanner.appendChild(document.createTextNode("Proxy stopped. Run "));
-        var code = document.createElement("code");
-        code.className = "mono";
-        code.textContent = "locadot start";
-        stoppedBanner.appendChild(code);
-        stoppedBanner.appendChild(document.createTextNode(" to bring it back."));
-        stoppedBanner.hidden = false;
-        if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
-        if (remotesPollTimer) { clearInterval(remotesPollTimer); remotesPollTimer = null; }
-        showToast("Proxy stopped", "warn");
-      })
-      .catch(function (err) {
-        apiError(err, "Couldn't stop the proxy");
-        stopProxyBtn.disabled = false;
-        stopProxyBtn.classList.remove("busy");
-      });
+    confirmDialog({ title: "Stop the locadot proxy?", message: "Run \\"locadot start\\" to bring it back up.", confirmLabel: "Stop proxy", danger: true }).then(function (ok) {
+      if (!ok) return;
+      stopProxyBtn.disabled = true;
+      stopProxyBtn.classList.add("busy");
+      apiFetch("/api/proxy/stop", { method: "POST" })
+        .then(function () {
+          proxyStopped = true;
+          clear(stoppedBanner);
+          stoppedBanner.appendChild(document.createTextNode("Proxy stopped. Run "));
+          var code = document.createElement("code");
+          code.className = "mono";
+          code.textContent = "locadot start";
+          stoppedBanner.appendChild(code);
+          stoppedBanner.appendChild(document.createTextNode(" to bring it back."));
+          stoppedBanner.hidden = false;
+          if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
+          if (remotesPollTimer) { clearInterval(remotesPollTimer); remotesPollTimer = null; }
+          showToast("Proxy stopped", "warn");
+        })
+        .catch(function (err) {
+          apiError(err, "Couldn't stop the proxy");
+          stopProxyBtn.disabled = false;
+          stopProxyBtn.classList.remove("busy");
+        });
+    });
   });
 
   cfInstallBtn.addEventListener("click", function () {
@@ -2102,12 +2285,36 @@ const clientJs = `
       link.textContent = t.url.replace("https://", "");
       link.title = t.url;
       statusWrap.appendChild(link);
+      if (t.mode === "custom") {
+        var modeBadge = document.createElement("span");
+        modeBadge.className = "badge badge-accent";
+        modeBadge.textContent = "custom";
+        statusWrap.appendChild(modeBadge);
+      }
       statusWrap.appendChild(makeCopyButton(function () { return t.url; }));
     } else if (t.status === "starting") {
       var spin = document.createElement("span");
       spin.className = "spinner";
       statusWrap.appendChild(spin);
       statusWrap.appendChild(document.createTextNode("Starting\\u2026"));
+    } else if (t.status === "login") {
+      var loginDot = document.createElement("span");
+      loginDot.className = "dot warn";
+      statusWrap.appendChild(loginDot);
+      var loginText = document.createElement("span");
+      loginText.className = "tunnel-login";
+      var loginLabel = document.createElement("span");
+      loginLabel.textContent = "Waiting for Cloudflare login";
+      loginText.appendChild(loginLabel);
+      if (t.loginUrl) {
+        var loginLink = document.createElement("a");
+        loginLink.href = t.loginUrl;
+        loginLink.target = "_blank";
+        loginLink.rel = "noopener noreferrer";
+        loginLink.textContent = "Log in to Cloudflare \u2197";
+        loginText.appendChild(loginLink);
+      }
+      statusWrap.appendChild(loginText);
     } else if (t.status === "error") {
       var errDot = document.createElement("span");
       errDot.className = "dot down";
@@ -2129,35 +2336,392 @@ const clientJs = `
 
   function shareButton(row) {
     var t = tunnelInfo(row);
-    var isOn = t.enabled || t.status === "up" || t.status === "starting";
+    var isOn = t.enabled || t.status === "up" || t.status === "starting" || t.status === "login";
     var isRetry = !isOn && t.status === "error";
     var shareBtn = document.createElement("button");
     shareBtn.type = "button";
     shareBtn.className = "btn btn-sm" + (isOn ? " btn-danger" : "");
     shareBtn.textContent = isOn ? "Unshare" : (isRetry ? "Retry" : "Share");
-    shareBtn.title = isOn ? "Stop the public tunnel" : (isRetry ? "Retry starting the tunnel" : "Share on a public trycloudflare.com URL");
+    shareBtn.title = isOn ? "Stop the public tunnel" : "Share on a public URL";
     if (!cloudflaredInstalled && !isOn) {
       shareBtn.disabled = true;
       shareBtn.title = "Install cloudflared first";
     }
     shareBtn.addEventListener("click", function () {
-      if (!isOn && !window.confirm("This will make " + row.host + " reachable from the internet by anyone with the link. Continue?")) return;
-      shareBtn.disabled = true;
-      shareBtn.classList.add("busy");
-      apiFetch("/api/hosts/" + encodeURIComponent(row.host), { method: "PUT", body: JSON.stringify({ tunnel: !isOn }) })
-        .then(function () {
-          showToast(isOn ? "Stopping tunnel for " + row.host : "Starting tunnel for " + row.host, "success");
-          return loadHosts();
-        })
-        .catch(function (err) {
-          apiError(err, "Couldn't change sharing for " + row.host);
-          shareBtn.disabled = false;
-          shareBtn.classList.remove("busy");
+      if (isOn) {
+        confirmDialog({ title: "Stop sharing " + row.host + "?", message: "The public URL for " + row.host + " stops working.", confirmLabel: "Stop sharing", danger: true }).then(function (ok) {
+          if (!ok) return;
+          shareBtn.disabled = true;
+          shareBtn.classList.add("busy");
+          apiFetch("/api/hosts/" + encodeURIComponent(row.host), { method: "PUT", body: JSON.stringify({ tunnel: false }) })
+            .then(function () {
+              showToast("Stopping tunnel for " + row.host, "success");
+              return loadHosts();
+            })
+            .catch(function (err) {
+              apiError(err, "Couldn't change sharing for " + row.host);
+              shareBtn.disabled = false;
+              shareBtn.classList.remove("busy");
+            });
         });
+      } else {
+        openShareDialog(row);
+      }
     });
     return shareBtn;
   }
 
+  // ---------- share dialog ----------
+
+  var shareDialogEl = document.getElementById("share-dialog");
+  var shareHostEl = document.getElementById("share-host");
+  var shareCloseBtn = document.getElementById("share-close");
+  var shareCancelBtn = document.getElementById("share-cancel");
+  var shareSubmitBtn = document.getElementById("share-submit");
+  var shareOptionRandom = document.getElementById("share-option-random");
+  var shareOptionCustom = document.getElementById("share-option-custom");
+  var shareCustomExtra = document.getElementById("share-custom-extra");
+  var shareDomainInput = document.getElementById("share-domain-input");
+  var shareDomainError = document.getElementById("share-domain-error");
+  var shareDomainHint = document.getElementById("share-domain-hint");
+  var shareErrorEl = document.getElementById("share-error");
+  var shareRow = null;
+  var shareMode = "random";
+  var HOSTNAME_RE = /^([a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z]{2,}$/;
+
+  function normalizeHostname(value) {
+    return String(value || "").trim().toLowerCase().replace(/^https?:\\/\\//, "").replace(/\\/$/, "");
+  }
+
+  function validateHostname(raw) {
+    var value = normalizeHostname(raw);
+    if (!value) return "Enter a hostname.";
+    if (value.slice(-10) === ".localhost") return "Hostname can't be a .localhost address.";
+    if (!HOSTNAME_RE.test(value)) return "Enter a valid hostname, e.g. app.example.com.";
+    return null;
+  }
+
+  function setShareMode(mode) {
+    shareMode = mode;
+    shareOptionRandom.setAttribute("aria-checked", String(mode === "random"));
+    shareOptionCustom.setAttribute("aria-checked", String(mode === "custom"));
+    shareCustomExtra.hidden = mode !== "custom";
+    shareDomainHint.textContent = cloudflareLoggedIn
+      ? "The DNS record is created or updated for you."
+      : "You'll be asked to log in to Cloudflare once; the login link appears on the row.";
+    shareDomainError.hidden = true;
+    shareDomainError.textContent = "";
+    shareErrorEl.hidden = true;
+    shareErrorEl.textContent = "";
+    if (mode === "custom") setTimeout(function () { shareDomainInput.focus(); }, 0);
+  }
+
+  function closeShareDialog() {
+    shareRow = null;
+    shareDialogEl.close();
+  }
+
+  function openShareDialog(row) {
+    shareRow = row;
+    shareHostEl.textContent = row.host;
+    shareErrorEl.hidden = true;
+    shareErrorEl.textContent = "";
+    shareDomainError.hidden = true;
+    shareDomainError.textContent = "";
+    var hasDomain = typeof row.tunnelDomain === "string" && !!row.tunnelDomain;
+    shareDomainInput.value = hasDomain ? row.tunnelDomain : "";
+    setShareMode(hasDomain ? "custom" : "random");
+    shareSubmitBtn.disabled = false;
+    shareSubmitBtn.classList.remove("busy");
+    shareCancelBtn.disabled = false;
+    shareDialogEl.showModal();
+  }
+
+  shareOptionRandom.addEventListener("click", function () { setShareMode("random"); });
+  shareOptionCustom.addEventListener("click", function () { setShareMode("custom"); });
+  shareOptionRandom.addEventListener("keydown", function (e) {
+    if (e.key === "ArrowDown" || e.key === "ArrowRight") { e.preventDefault(); setShareMode("custom"); shareOptionCustom.focus(); }
+  });
+  shareOptionCustom.addEventListener("keydown", function (e) {
+    if (e.key === "ArrowUp" || e.key === "ArrowLeft") { e.preventDefault(); setShareMode("random"); shareOptionRandom.focus(); }
+  });
+  shareCancelBtn.addEventListener("click", closeShareDialog);
+  shareCloseBtn.addEventListener("click", closeShareDialog);
+  shareDialogEl.addEventListener("click", function (e) {
+    if (e.target === shareDialogEl) closeShareDialog();
+  });
+  shareDomainInput.addEventListener("keydown", function (e) {
+    if (e.key === "Enter") { e.preventDefault(); shareSubmitBtn.click(); }
+  });
+
+  shareSubmitBtn.addEventListener("click", function () {
+    if (!shareRow) return;
+    var row = shareRow;
+    var body = { tunnel: true };
+    if (shareMode === "custom") {
+      var err = validateHostname(shareDomainInput.value);
+      if (err) {
+        shareDomainError.textContent = err;
+        shareDomainError.hidden = false;
+        return;
+      }
+      body.domain = normalizeHostname(shareDomainInput.value);
+    }
+    shareSubmitBtn.disabled = true;
+    shareSubmitBtn.classList.add("busy");
+    shareCancelBtn.disabled = true;
+    apiFetch("/api/hosts/" + encodeURIComponent(row.host), { method: "PUT", body: JSON.stringify(body) })
+      .then(function () {
+        showToast("Starting tunnel for " + row.host, "success");
+        closeShareDialog();
+        return loadHosts();
+      })
+      .catch(function (err2) {
+        shareErrorEl.textContent = (err2 && err2.message) ? err2.message : String(err2);
+        shareErrorEl.hidden = false;
+      })
+      .then(function () {
+        shareSubmitBtn.disabled = false;
+        shareSubmitBtn.classList.remove("busy");
+        shareCancelBtn.disabled = false;
+      });
+  });
+
+  var allowDialog = document.getElementById("allow-dialog");
+  var allowHostEl = document.getElementById("allow-host");
+  var allowWarnEl = document.getElementById("allow-warn");
+  var allowListEl = document.getElementById("allow-list");
+  var allowInput = document.getElementById("allow-input");
+  var allowAddBtn = document.getElementById("allow-add");
+  var allowErrorEl = document.getElementById("allow-error");
+  var allowCancelBtn = document.getElementById("allow-cancel");
+  var allowSaveBtn = document.getElementById("allow-save");
+  var allowCloseBtn = document.getElementById("allow-close");
+  var allowOriginal = [];
+  var allowCurrent = [];
+  var allowRow = null;
+
+  function allowListsEqual(a, b) {
+    if (a.length !== b.length) return false;
+    for (var i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) return false;
+    }
+    return true;
+  }
+
+  function updateAllowSave() {
+    allowSaveBtn.disabled = allowListsEqual(allowCurrent, allowOriginal);
+  }
+
+  function renderAllowList() {
+    clear(allowListEl);
+    if (!allowCurrent.length) {
+      var empty = document.createElement("div");
+      empty.className = "dim allow-empty";
+      empty.textContent = "No internal addresses. Shared visitors reach public hosts only.";
+      allowListEl.appendChild(empty);
+      return;
+    }
+    allowCurrent.forEach(function (entry) {
+      var entryRow = document.createElement("div");
+      entryRow.className = "allow-row";
+      var text = document.createElement("span");
+      text.className = "mono";
+      text.textContent = entry;
+      entryRow.appendChild(text);
+      var removeBtn = document.createElement("button");
+      removeBtn.type = "button";
+      removeBtn.className = "allow-remove";
+      removeBtn.textContent = "\\u00d7";
+      removeBtn.setAttribute("aria-label", "Remove " + entry);
+      removeBtn.addEventListener("click", function () {
+        allowCurrent = allowCurrent.filter(function (item) { return item !== entry; });
+        renderAllowList();
+        updateAllowSave();
+      });
+      entryRow.appendChild(removeBtn);
+      allowListEl.appendChild(entryRow);
+    });
+  }
+
+  function allowAddEntry() {
+    var value = allowInput.value.trim().toLowerCase().replace(/^[a-z][a-z0-9+.-]*:\\/\\//, "").replace(/\\/$/, "");
+    allowErrorEl.hidden = true;
+    allowErrorEl.textContent = "";
+    if (!value || /\\s/.test(value)) {
+      allowErrorEl.textContent = "Enter a host or host:port, e.g. localhost:3000.";
+      allowErrorEl.hidden = false;
+      return;
+    }
+    if (allowCurrent.indexOf(value) !== -1) {
+      allowErrorEl.textContent = value + " is already in the list.";
+      allowErrorEl.hidden = false;
+      return;
+    }
+    allowCurrent.push(value);
+    allowInput.value = "";
+    renderAllowList();
+    updateAllowSave();
+  }
+
+  function closeAllowDialog() {
+    allowDialog.close();
+  }
+
+  function openAllowDialog(row) {
+    allowRow = row;
+    allowOriginal = (row.allow || []).slice();
+    allowCurrent = allowOriginal.slice();
+    allowHostEl.textContent = row.host;
+    allowWarnEl.hidden = !!row.cors;
+    allowErrorEl.hidden = true;
+    allowErrorEl.textContent = "";
+    allowInput.value = "";
+    renderAllowList();
+    allowSaveBtn.disabled = true;
+    allowSaveBtn.classList.remove("busy");
+    allowCancelBtn.disabled = false;
+    allowDialog.showModal();
+    setTimeout(function () { allowInput.focus(); }, 0);
+  }
+
+  allowAddBtn.addEventListener("click", allowAddEntry);
+  allowInput.addEventListener("keydown", function (e) {
+    if (e.key === "Enter") { e.preventDefault(); allowAddEntry(); }
+  });
+  allowCancelBtn.addEventListener("click", closeAllowDialog);
+  allowCloseBtn.addEventListener("click", closeAllowDialog);
+  allowDialog.addEventListener("click", function (e) {
+    if (e.target === allowDialog) closeAllowDialog();
+  });
+
+  allowSaveBtn.addEventListener("click", function () {
+    if (!allowRow) return;
+    var host = allowRow.host;
+    allowSaveBtn.disabled = true;
+    allowSaveBtn.classList.add("busy");
+    allowCancelBtn.disabled = true;
+    apiFetch("/api/hosts/" + encodeURIComponent(host), { method: "PUT", body: JSON.stringify({ allow: allowCurrent }) })
+      .then(function () {
+        showToast("Saved internal access for " + host, "success");
+        closeAllowDialog();
+        return loadHosts();
+      })
+      .catch(function (err) {
+        allowErrorEl.textContent = err && err.message ? err.message : String(err);
+        allowErrorEl.hidden = false;
+        allowSaveBtn.disabled = false;
+        allowSaveBtn.classList.remove("busy");
+        allowCancelBtn.disabled = false;
+      });
+  });
+
+  // ---------- confirm / prompt dialogs ----------
+
+  var confirmDialogEl = document.getElementById("confirm-dialog");
+  var confirmTitleEl = document.getElementById("confirm-title");
+  var confirmMessageEl = document.getElementById("confirm-message");
+  var confirmCancelBtn = document.getElementById("confirm-cancel");
+  var confirmOkBtn = document.getElementById("confirm-ok");
+  var confirmCloseBtn = document.getElementById("confirm-close");
+  var confirmResolve = null;
+
+  function closeConfirmDialog(result) {
+    var resolve = confirmResolve;
+    confirmResolve = null;
+    confirmDialogEl.close();
+    if (resolve) resolve(result);
+  }
+
+  function confirmDialog(opts) {
+    opts = opts || {};
+    return new Promise(function (resolve) {
+      confirmResolve = resolve;
+      confirmTitleEl.textContent = opts.title || "Are you sure?";
+      confirmMessageEl.textContent = opts.message || "";
+      confirmOkBtn.textContent = opts.confirmLabel || "OK";
+      confirmOkBtn.className = "btn " + (opts.danger ? "btn-danger" : "btn-primary");
+      confirmDialogEl.showModal();
+      setTimeout(function () { confirmOkBtn.focus(); }, 0);
+    });
+  }
+
+  confirmCancelBtn.addEventListener("click", function () { closeConfirmDialog(false); });
+  confirmCloseBtn.addEventListener("click", function () { closeConfirmDialog(false); });
+  confirmOkBtn.addEventListener("click", function () { closeConfirmDialog(true); });
+  confirmDialogEl.addEventListener("click", function (e) {
+    if (e.target === confirmDialogEl) closeConfirmDialog(false);
+  });
+  confirmDialogEl.addEventListener("close", function () {
+    if (confirmResolve) { var resolve = confirmResolve; confirmResolve = null; resolve(false); }
+  });
+
+  var promptDialogEl = document.getElementById("prompt-dialog");
+  var promptTitleEl = document.getElementById("prompt-title");
+  var promptMessageEl = document.getElementById("prompt-message");
+  var promptLabelEl = document.getElementById("prompt-label");
+  var promptInput = document.getElementById("prompt-input");
+  var promptErrorEl = document.getElementById("prompt-error");
+  var promptCancelBtn = document.getElementById("prompt-cancel");
+  var promptConfirmBtn = document.getElementById("prompt-confirm");
+  var promptCloseBtn = document.getElementById("prompt-close");
+  var promptResolve = null;
+  var promptValidate = null;
+
+  function closePromptDialog(result) {
+    var resolve = promptResolve;
+    promptResolve = null;
+    promptValidate = null;
+    promptDialogEl.close();
+    if (resolve) resolve(result);
+  }
+
+  function promptDialog(opts) {
+    opts = opts || {};
+    return new Promise(function (resolve) {
+      promptResolve = resolve;
+      promptValidate = typeof opts.validate === "function" ? opts.validate : null;
+      promptTitleEl.textContent = opts.title || "";
+      promptMessageEl.textContent = opts.message || "";
+      promptMessageEl.hidden = !opts.message;
+      promptLabelEl.textContent = opts.label || "";
+      promptLabelEl.hidden = !opts.label;
+      promptInput.placeholder = opts.placeholder || "";
+      promptInput.value = opts.value || "";
+      promptConfirmBtn.textContent = opts.confirmLabel || "OK";
+      promptErrorEl.hidden = true;
+      promptErrorEl.textContent = "";
+      promptDialogEl.showModal();
+      setTimeout(function () { promptInput.focus(); promptInput.select(); }, 0);
+    });
+  }
+
+  function submitPromptDialog() {
+    var value = promptInput.value;
+    if (promptValidate) {
+      var err = promptValidate(value);
+      if (err) {
+        promptErrorEl.textContent = err;
+        promptErrorEl.hidden = false;
+        return;
+      }
+    }
+    closePromptDialog(value);
+  }
+
+  promptCancelBtn.addEventListener("click", function () { closePromptDialog(null); });
+  promptCloseBtn.addEventListener("click", function () { closePromptDialog(null); });
+  promptConfirmBtn.addEventListener("click", submitPromptDialog);
+  promptInput.addEventListener("keydown", function (e) {
+    if (e.key === "Enter") { e.preventDefault(); submitPromptDialog(); }
+  });
+  promptDialogEl.addEventListener("click", function (e) {
+    if (e.target === promptDialogEl) closePromptDialog(null);
+  });
+  promptDialogEl.addEventListener("close", function () {
+    if (promptResolve) { var resolve = promptResolve; promptResolve = null; resolve(null); }
+  });
+
   function labelCells(tr, labels) {
     for (var i = 0; i < tr.children.length; i++) tr.children[i].setAttribute("data-label", labels[i] || "");
   }
@@ -2198,13 +2762,14 @@ const clientJs = `
 
     var optionsTd = document.createElement("td");
     var flags = [];
-    if (row.insecure) flags.push(["insecure", "Upstream TLS certificate is not verified"]);
-    if (row.cors) flags.push(["cors", "Origin/Referer rewritten to the target; any origin may call this host"]);
+    if (row.insecure) flags.push(["insecure", "Upstream TLS certificate is not verified", "badge-warn"]);
+    if (row.cors) flags.push(["cors", "Origin/Referer rewritten to the target; any origin may call this host", "badge-cors"]);
+    if (row.allow && row.allow.length) flags.push(["allow " + row.allow.length, row.allow.join(", "), "badge-accent"]);
     if (flags.length) {
       optionsTd.className = "badges";
       flags.forEach(function (flag) {
         var badge = document.createElement("span");
-        badge.className = "badge " + (flag[0] === "cors" ? "badge-cors" : "badge-warn");
+        badge.className = "badge " + flag[2];
         badge.textContent = flag[0];
         badge.title = flag[1];
         optionsTd.appendChild(badge);
@@ -2235,6 +2800,20 @@ const clientJs = `
     var actionsWrap = document.createElement("div");
     actionsWrap.className = "row-actions";
     actionsTd.appendChild(actionsWrap);
+    var accessBtn = document.createElement("button");
+    accessBtn.type = "button";
+    var allowCount = row.allow ? row.allow.length : 0;
+    accessBtn.className = "btn btn-sm btn-icon" + (allowCount ? " is-set" : "");
+    accessBtn.title = allowCount ? "Internal access: " + row.allow.join(", ") : "Internal access: let shared visitors reach addresses such as localhost:3000";
+    accessBtn.setAttribute("aria-label", "Internal access for " + row.host);
+    var accessSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    accessSvg.setAttribute("viewBox", "0 0 24 24");
+    accessSvg.setAttribute("aria-hidden", "true");
+    var accessPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    accessPath.setAttribute("d", "M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6l7-3zM9.5 12l1.8 1.8L15 10");
+    accessSvg.appendChild(accessPath);
+    accessBtn.appendChild(accessSvg);
+    accessBtn.addEventListener("click", function () { openAllowDialog(row); });
     var editBtn = document.createElement("button");
     editBtn.type = "button";
     editBtn.className = "btn btn-sm";
@@ -2245,20 +2824,23 @@ const clientJs = `
     removeBtn.className = "btn btn-sm btn-danger";
     removeBtn.textContent = "Remove";
     removeBtn.addEventListener("click", function () {
-      if (prefs.confirm && !window.confirm("Remove host " + row.host + "?")) return;
-      removeBtn.disabled = true;
-      apiFetch("/api/hosts/" + encodeURIComponent(row.host), { method: "DELETE" })
-        .then(function () {
-          showToast("Removed " + row.host, "success");
-          return loadHosts();
-        })
-        .catch(function (err) {
-          apiError(err, "Couldn't remove " + row.host);
-          removeBtn.disabled = false;
-        });
+      (prefs.confirm ? confirmDialog({ title: "Remove host " + row.host + "?", message: "This can't be undone.", confirmLabel: "Remove host", danger: true }) : Promise.resolve(true)).then(function (ok) {
+        if (!ok) return;
+        removeBtn.disabled = true;
+        apiFetch("/api/hosts/" + encodeURIComponent(row.host), { method: "DELETE" })
+          .then(function () {
+            showToast("Removed " + row.host, "success");
+            return loadHosts();
+          })
+          .catch(function (err) {
+            apiError(err, "Couldn't remove " + row.host);
+            removeBtn.disabled = false;
+          });
+      });
     });
     if (!row.remote) {
       actionsWrap.appendChild(shareButton(row));
+      actionsWrap.appendChild(accessBtn);
       actionsWrap.appendChild(editBtn);
     }
     actionsWrap.appendChild(removeBtn);
@@ -2424,13 +3006,15 @@ const clientJs = `
 
   logsRefreshBtn.addEventListener("click", loadLogs);
   logsClearBtn.addEventListener("click", function () {
-    if (!window.confirm("Clear logs?")) return;
-    apiFetch("/api/logs/clear", { method: "POST" })
-      .then(function () {
-        showToast("Logs cleared", "success");
-        return loadLogs();
-      })
-      .catch(function (err) { apiError(err, "Couldn't clear logs"); });
+    confirmDialog({ title: "Clear logs?", message: "This can't be undone.", confirmLabel: "Clear logs", danger: true }).then(function (ok) {
+      if (!ok) return;
+      apiFetch("/api/logs/clear", { method: "POST" })
+        .then(function () {
+          showToast("Logs cleared", "success");
+          return loadLogs();
+        })
+        .catch(function (err) { apiError(err, "Couldn't clear logs"); });
+    });
   });
 
   cliAddCopy.addEventListener("click", function () { copyText(cliAddPre.textContent, cliAddCopy); });
@@ -2856,7 +3440,8 @@ const clientJs = `
   });
 
   restartBtn.addEventListener("click", function () {
-    if (!window.confirm("Restart the proxy? Hosts are unavailable for a few seconds.")) return;
+    confirmDialog({ title: "Restart the proxy?", message: "Hosts are unavailable for a few seconds.", confirmLabel: "Restart", danger: true }).then(function (ok) {
+    if (!ok) return;
     var s = settingsLoaded;
     var nextPort = s ? ((s.env && s.env.httpPort) ? s.httpPort : ((s.saved && s.saved.httpPort) || s.httpPort)) : null;
     restartBtn.disabled = true;
@@ -2889,6 +3474,7 @@ const clientJs = `
         restartBtn.disabled = false;
         restartBtn.classList.remove("busy");
       });
+    });
   });
 
   document.getElementById("set-home-copy").addEventListener("click", function (e) { copyText(setHome.textContent, e.currentTarget); });
@@ -2962,6 +3548,7 @@ const clientJs = `
     uiAuthSave.textContent = enabled ? "Change password" : "Set password";
     uiAuthRemove.hidden = !enabled;
     signOutBtn.hidden = !enabled;
+    renderHubPanel(enabled && hubPanelSwitch.getAttribute("aria-checked") === "true");
   }
   renderUiAuth(UI_AUTH);
 
@@ -3314,6 +3901,13 @@ function renderPage(nonce, token, uiAuth = false) {
             </div>
             <button type="button" id="hub-localhost" class="switch" role="switch" aria-checked="true" aria-label="Let admins open this dashboard and any port on this machine"><span class="switch-knob"></span></button>
           </div>
+          <div id="hub-panel-row" class="toggle-row" hidden>
+            <div>
+              <div class="label">Share this dashboard</div>
+              <div id="hub-panel-sub" class="tile-sub"></div>
+            </div>
+            <button type="button" id="hub-panel" class="switch" role="switch" aria-checked="false" aria-label="Share this dashboard at the public URL, behind the dashboard password"><span class="switch-knob"></span></button>
+          </div>
         </div>
 
         <div id="hub-share-section" class="hub-section" hidden>
@@ -3611,6 +4205,104 @@ function renderPage(nonce, token, uiAuth = false) {
   <a href="https://github.com/avinashid/locadot" target="_blank" rel="noopener noreferrer">github.com/avinashid/locadot</a>
 </footer>
 </div>
+<dialog id="allow-dialog">
+  <div class="modal-head">
+    <div>
+      <h3 class="modal-title">Internal access</h3>
+      <p id="allow-host" class="modal-sub mono"></p>
+    </div>
+    <button type="button" id="allow-close" class="btn btn-ghost modal-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">
+    <p class="modal-desc">People who open this mapping through a tunnel or remote access can only reach public hosts. Allow the internal addresses this app calls, such as its API on localhost.</p>
+    <div id="allow-warn" class="modal-warn" hidden>Bypass CORS is off for this mapping. These addresses take effect once it's on, because the page reaches them through locadot's pass-through.</div>
+    <div id="allow-list" class="allow-list"></div>
+    <div class="allow-add-row">
+      <input type="text" id="allow-input" class="input" placeholder="localhost:3000" aria-label="Address" autocomplete="off">
+      <button type="button" id="allow-add" class="btn btn-sm">Add</button>
+    </div>
+    <p class="modal-hint">host:port, or a host alone for any port. locadot's own ports are always blocked.</p>
+    <div id="allow-error" class="field-error" role="alert" hidden></div>
+  </div>
+  <div class="modal-foot">
+    <button type="button" id="allow-cancel" class="btn">Cancel</button>
+    <button type="button" id="allow-save" class="btn btn-primary" disabled>Save changes</button>
+  </div>
+</dialog>
+<dialog id="confirm-dialog">
+  <div class="modal-head">
+    <div>
+      <h3 class="modal-title" id="confirm-title"></h3>
+    </div>
+    <button type="button" id="confirm-close" class="btn btn-ghost modal-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">
+    <p class="modal-desc" id="confirm-message"></p>
+  </div>
+  <div class="modal-foot">
+    <button type="button" id="confirm-cancel" class="btn">Cancel</button>
+    <button type="button" id="confirm-ok" class="btn btn-primary">OK</button>
+  </div>
+</dialog>
+<dialog id="prompt-dialog">
+  <div class="modal-head">
+    <div>
+      <h3 class="modal-title" id="prompt-title"></h3>
+    </div>
+    <button type="button" id="prompt-close" class="btn btn-ghost modal-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">
+    <p class="modal-desc" id="prompt-message"></p>
+    <div class="field">
+      <label id="prompt-label" for="prompt-input"></label>
+      <input type="text" id="prompt-input" class="input" autocomplete="off">
+    </div>
+    <div id="prompt-error" class="field-error" role="alert" hidden></div>
+  </div>
+  <div class="modal-foot">
+    <button type="button" id="prompt-cancel" class="btn">Cancel</button>
+    <button type="button" id="prompt-confirm" class="btn btn-primary">OK</button>
+  </div>
+</dialog>
+<dialog id="share-dialog">
+  <div class="modal-head">
+    <div>
+      <h3 class="modal-title">Share publicly</h3>
+      <p id="share-host" class="modal-sub mono"></p>
+    </div>
+    <button type="button" id="share-close" class="btn btn-ghost modal-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">
+    <p class="modal-desc">Anyone with the link will be able to reach this host, without signing in.</p>
+    <div id="share-options" class="share-options" role="radiogroup" aria-label="Sharing method">
+      <button type="button" id="share-option-random" class="option-card" role="radio" aria-checked="false">
+        <span class="option-dot" aria-hidden="true"></span>
+        <span class="option-body">
+          <span class="option-title">Random URL</span>
+          <span class="option-desc">https://&lt;random&gt;.trycloudflare.com &middot; No account needed. Changes each time sharing restarts.</span>
+        </span>
+      </button>
+      <button type="button" id="share-option-custom" class="option-card" role="radio" aria-checked="false">
+        <span class="option-dot" aria-hidden="true"></span>
+        <span class="option-body">
+          <span class="option-title">Custom domain</span>
+          <span class="option-desc">Your own hostname on a domain in your Cloudflare account. Stable URL.</span>
+          <span id="share-custom-extra" class="option-extra" hidden>
+            <label for="share-domain-input" class="dim">Hostname</label>
+            <input type="text" id="share-domain-input" class="input mono" placeholder="app.example.com" autocomplete="off">
+            <div id="share-domain-error" class="field-error" role="alert" hidden></div>
+            <p id="share-domain-hint" class="modal-hint"></p>
+          </span>
+        </span>
+      </button>
+    </div>
+    <div id="share-error" class="field-error" role="alert" hidden></div>
+  </div>
+  <div class="modal-foot">
+    <button type="button" id="share-cancel" class="btn">Cancel</button>
+    <button type="button" id="share-submit" class="btn btn-primary">Start sharing</button>
+  </div>
+</dialog>
 <div id="toast-container" class="toast-container" aria-live="polite"></div>
 <script nonce="${safeNonce}">${clientJs}</script>
 </body>