@crewhaus/hangar-ui 0.6.0 → 0.7.0

package/assets/js/dom.js

@@ -142,21 +142,64 @@ export function toast(message, kind = "error") {
   return node;
 }
 
-/** Click-to-copy button (clipboard API; silently no-ops when unavailable). */
-export function copyBtn(value, label = "copy") {
-  const btn = el("button", { class: "btn btn-ghost btn-copy", type: "button", text: label });
-  btn.addEventListener("click", async () => {
+/**
+ * Copy `text`, falling back to the old selection trick.
+ *
+ * `navigator.clipboard` is a secure-context API. `127.0.0.1` counts as
+ * secure, so on the loopback console it always works — and over
+ * `http://192.168.x.x`, which is what `crewhaus hangar --lan` serves, the
+ * whole object is `undefined` and every copy button in the console reads
+ * "copy failed". That is invisible until someone opens the console from a
+ * phone, which is exactly who cannot retype a harness directory by hand.
+ *
+ * The fallback is `document.execCommand("copy")` over a throwaway textarea:
+ * deprecated, still implemented everywhere, and not gated on a secure
+ * context. The textarea is positioned off-screen rather than hidden because
+ * a `display: none` element cannot hold a selection.
+ */
+async function writeClipboard(text) {
+  if (navigator.clipboard !== undefined) {
     try {
-      await navigator.clipboard.writeText(value);
-      btn.textContent = "copied";
-      btn.classList.add("ok");
-      setTimeout(() => {
-        btn.textContent = label;
-        btn.classList.remove("ok");
-      }, 1200);
+      await navigator.clipboard.writeText(text);
+      return true;
     } catch {
-      btn.textContent = "copy failed";
+      // Permission refused, or a non-secure context that still exposes the
+      // object. Fall through rather than giving up.
     }
+  }
+  const scratch = el("textarea");
+  scratch.value = text;
+  scratch.setAttribute("readonly", "readonly");
+  scratch.setAttribute("aria-hidden", "true");
+  // Off-screen rather than hidden: a `display: none` element cannot hold a
+  // selection, and `opacity: 0` alone would still scroll the page.
+  scratch.style.position = "fixed";
+  scratch.style.top = "-1000px";
+  scratch.style.opacity = "0";
+  document.body.appendChild(scratch);
+  try {
+    scratch.select();
+    scratch.setSelectionRange(0, text.length);
+    return document.execCommand("copy");
+  } catch {
+    return false;
+  } finally {
+    scratch.remove();
+  }
+}
+
+/** Click-to-copy button. Works on the loopback console and over a LAN
+ *  address alike — see {@link writeClipboard}. */
+export function copyBtn(value, label = "copy") {
+  const btn = el("button", { class: "btn btn-ghost btn-copy", type: "button", text: label });
+  btn.addEventListener("click", async () => {
+    const copied = await writeClipboard(value);
+    btn.textContent = copied ? "copied" : "copy failed";
+    if (copied) btn.classList.add("ok");
+    setTimeout(() => {
+      btn.textContent = label;
+      btn.classList.remove("ok");
+    }, 1200);
   });
   return btn;
 }

package/assets/js/views/channels.js

@@ -28,6 +28,51 @@ import { api } from "../api.js";
 import { clear, collapsible, dot, el, jsonPre, numberedCode, skeleton, toast } from "../dom.js";
 import { m3, m3Card, m3Empty } from "./creds.js";
 
+/**
+ * True when `hostname` names this machine — the browser-side half of the
+ * CLI's `isLoopbackHost`, deliberately re-implemented rather than imported:
+ * the console's JS is hand-written browser ES modules with no build step and
+ * no imports out of `assets/`.
+ *
+ * `location.hostname` hands IPv6 literals over WITHOUT their brackets, so
+ * `::1` arrives bare; both spellings are accepted. An empty hostname (a
+ * `file://` document) is NOT loopback — falling through to the honest note
+ * is the safe direction to be wrong in.
+ */
+export function isLoopbackHostname(hostname) {
+  const host = typeof hostname === "string" ? hostname.trim().toLowerCase() : "";
+  if (host === "") return false;
+  const bare = host.startsWith("[") && host.endsWith("]") ? host.slice(1, -1) : host;
+  if (bare === "localhost") return true;
+  if (bare === "::1" || bare === "0:0:0:0:0:0:0:1") return true;
+  // The whole of 127.0.0.0/8 — a daemon on 127.0.0.2 is every bit as local.
+  const octets = bare.split(".");
+  if (octets.length !== 4) return false;
+  if (!octets.every((o) => /^\d{1,3}$/.test(o) && Number(o) <= 255)) return false;
+  return octets[0] === "127";
+}
+
+/**
+ * Whether to OFFER the daemon's dashboard as a link, or just name it.
+ *
+ * The daemon's control-UI port is loopback by design — `service-setup`
+ * never tunnels it and it carries no auth — so the address the server sends
+ * is only usable by a browser sitting at that machine. Since
+ * `crewhaus hangar --lan` puts this console on a phone, "usable" is now a
+ * question with two answers, and only the browser can tell which: it knows
+ * the host it reached the console on.
+ *
+ * A link that quietly goes nowhere is worse than a line of text that says
+ * where the thing is, so a remote viewer gets the address and the reason
+ * instead of a dead anchor.
+ */
+export function dashboardReach(dashboardUrl, viewerHostname) {
+  if (typeof dashboardUrl !== "string" || dashboardUrl === "") return null;
+  return isLoopbackHostname(viewerHostname)
+    ? { reachable: true, url: dashboardUrl }
+    : { reachable: false, url: dashboardUrl };
+}
+
 export async function renderChannels(root, ctx) {
   clear(root).appendChild(skeleton(5));
   const [channelsAnswer, gatewayAnswer] = await Promise.all([
@@ -431,16 +476,28 @@ function gatewayCard(body) {
         : null,
     ]),
   ];
-  if (typeof body.dashboardUrl === "string") {
+  const reach = dashboardReach(body.dashboardUrl, window.location.hostname);
+  if (reach !== null) {
     nodes.push(
-      el("p", null, [
-        el("a", {
-          href: body.dashboardUrl,
-          target: "_blank",
-          rel: "noreferrer",
-          text: "open the daemon's own dashboard",
-        }),
-      ]),
+      el(
+        "p",
+        null,
+        reach.reachable
+          ? [
+              el("a", {
+                href: reach.url,
+                target: "_blank",
+                rel: "noreferrer",
+                text: "open the daemon's own dashboard",
+              }),
+            ]
+          : [
+              el("span", {
+                class: "muted",
+                text: `the daemon's own dashboard is at ${reach.url} — it binds loopback and is not tunnelled, so it opens only from the machine running the daemon, not from here`,
+              }),
+            ],
+      ),
     );
   }
   if (body.status !== null && body.status !== undefined) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewhaus/hangar-ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "description": "The Hangar web console's static UI — zero-build, dependency-free browser ES modules embedded as text assets for the single-binary CLI to hand to the hangar server",
   "main": "dist/index.js",