@le-space/ui 0.7.0 → 0.8.0

package/react/index.js

@@ -1,5 +1,5 @@
 // src/react/SponsorRelayFab.tsx
-import React from "react";
+import React2 from "react";
 
 // src/shared/constants.ts
 var DEFAULT_INSTANCE_NAME = "sponsor-relay";
@@ -43,7 +43,7 @@ var RECENT_INSTANCE_RUNTIME_GRACE_MS = 10 * 60 * 1e3;
 var DEPLOYMENT_PENDING_WARNING_MS = 3 * 60 * 1e3;
 
 // src/shared/package-version.ts
-var UI_PACKAGE_VERSION = "0.7.0";
+var UI_PACKAGE_VERSION = "0.8.0";
 
 // src/shared/format.ts
 function shortHash(value, head = 8, tail = 6) {
@@ -3832,7 +3832,8 @@ function defaultState(props = {}) {
     bootstrapRegistrations: [],
     orphanBootstrapRegistrations: [],
     lastDeploymentHash: null,
-    deploymentProgress: IDLE_DEPLOYMENT_PROGRESS
+    deploymentProgress: IDLE_DEPLOYMENT_PROGRESS,
+    instanceAddresses: {}
   };
 }
 function manifestLoadErrorState(error) {
@@ -3860,6 +3861,83 @@ async function sha256Hex(payload) {
   );
   return Array.from(new Uint8Array(digest)).map((byte) => byte.toString(16).padStart(2, "0")).join("");
 }
+function hostnameOfUrl(value) {
+  if (!value) return null;
+  try {
+    return new URL(value).hostname || null;
+  } catch {
+    return null;
+  }
+}
+function emptyInstanceAddresses() {
+  return {
+    status: "idle",
+    groups: [],
+    pwaEnv: null,
+    payload: null,
+    peerId: null,
+    version: null,
+    fetchedAt: null,
+    error: null,
+    sourceUrl: null
+  };
+}
+var TRANSPORT_LABELS = {
+  tcp: "TCP",
+  websocket: "WebSocket",
+  webrtc: "WebRTC",
+  direct_tcp: "Direct TCP",
+  autotls_wss: "AutoTLS WSS",
+  proxy_wss: "Proxy WSS",
+  webtransport: "WebTransport",
+  webrtc_direct: "WebRTC Direct",
+  browser_bootstrap: "Browser bootstrap",
+  probe: "Probe"
+};
+function transportLabel(key) {
+  return TRANSPORT_LABELS[key] ?? key.replace(/[_-]+/g, " ").replace(/^./, (first) => first.toUpperCase());
+}
+function addressList(value) {
+  return Array.isArray(value) ? value.filter((entry) => typeof entry === "string" && Boolean(entry.trim())) : [];
+}
+function parseInstanceAddressPayload(payload) {
+  const groups = [];
+  const byTransport = payload.byTransport;
+  if (byTransport && typeof byTransport === "object") {
+    for (const [key, value] of Object.entries(
+      byTransport
+    )) {
+      const addresses = addressList(value);
+      if (addresses.length > 0) {
+        groups.push({ key, label: transportLabel(key), addresses });
+      }
+    }
+  }
+  for (const [key, value] of Object.entries(payload)) {
+    if (!key.endsWith("_multiaddrs")) continue;
+    const addresses = addressList(value);
+    if (addresses.length === 0) continue;
+    const groupKey = key.replace(/_multiaddrs$/, "");
+    groups.push({
+      key: groupKey,
+      label: transportLabel(groupKey),
+      addresses
+    });
+  }
+  const pwaEnvRaw = payload.pwa_env;
+  const pwaEnv = pwaEnvRaw && typeof pwaEnvRaw === "object" ? Object.fromEntries(
+    Object.entries(pwaEnvRaw).filter(([, entry]) => typeof entry === "string").map(([entryKey, entry]) => [entryKey, entry])
+  ) : null;
+  const peerId = typeof payload.peerId === "string" ? payload.peerId : typeof payload.peer_id === "string" ? payload.peer_id : null;
+  return {
+    ...emptyInstanceAddresses(),
+    groups,
+    pwaEnv,
+    payload,
+    peerId,
+    version: typeof payload.version === "string" ? payload.version : null
+  };
+}
 function mappedPorts(execution) {
   return Object.entries(execution?.networking?.mapped_ports ?? {}).map(
     ([port, mapping]) => ({
@@ -4008,6 +4086,7 @@ async function inspectInstanceRuntime(args) {
     vmIpv4: null,
     webUrl: null,
     sshCommand: null,
+    proxyHostname: null,
     mappedPorts: [],
     execution: null,
     error: null
@@ -4072,6 +4151,7 @@ async function inspectInstanceRuntime(args) {
     details.ipv6 = execution.networking.ipv6_ip ?? execution.networking.ipv6 ?? details.ipv6;
     details.vmIpv4 = execution.networking.ipv4_ip ?? null;
     details.webUrl = execution.networking.proxy_url ?? details.webUrl;
+    details.proxyHostname = hostnameOfUrl(details.webUrl);
     details.mappedPorts = mappedPorts(execution);
     details.sshCommand = buildSshCommand(details.hostIpv4, details.mappedPorts);
     return { details, lookup };
@@ -4421,10 +4501,14 @@ var SponsorRelayController = class {
         detail: "Publishing the host port mapping into the guest relay configuration."
       });
       const tcpPort = mappedPorts2["9091"]?.host ?? 0;
-      const wsPort = mappedPorts2["9092"]?.host ?? mappedPorts2["443"]?.host ?? 0;
+      const wsPort = mappedPorts2["9092"]?.host ?? 0;
       if (!tcpPort || !wsPort) {
+        const missing = [
+          tcpPort ? null : "9091 (libp2p TCP)",
+          wsPort ? null : "9092 (libp2p WebSocket)"
+        ].filter(Boolean);
         throw new Error(
-          "OrbitDB relay runtime is missing required mapped TCP/WS ports."
+          `OrbitDB relay runtime has no mapped host port for ${missing.join(" and ")}. Deploy a rootfs whose manifest requests these forwards.`
         );
       }
       const configureResult = await configureOrbitdbRelaySetup2({
@@ -5407,6 +5491,7 @@ var SponsorRelayController = class {
                 vmIpv4: null,
                 webUrl: null,
                 sshCommand: null,
+                proxyHostname: null,
                 mappedPorts: [],
                 execution: null,
                 error: null
@@ -5822,6 +5907,9 @@ var SponsorRelayController = class {
             vmIpv4: runtime.execution?.networking?.ipv4_ip ?? null,
             webUrl: runtime.webAccessUrl ?? runtime.proxyUrl ?? runtime.execution?.networking?.proxy_url ?? null,
             sshCommand: runtime.sshCommand ?? null,
+            proxyHostname: hostnameOfUrl(
+              runtime.proxyUrl ?? runtime.webAccessUrl ?? runtime.execution?.networking?.proxy_url ?? null
+            ),
             mappedPorts: runtime.execution != null ? mappedPorts(runtime.execution) : runtimeMappedPorts(runtime.mappedPorts),
             execution: runtime.execution ?? null,
             error: null
@@ -5919,6 +6007,9 @@ var SponsorRelayController = class {
                       vmIpv4: latestRuntime.execution?.networking?.ipv4_ip ?? null,
                       webUrl: latestRuntime.webAccessUrl ?? latestRuntime.proxyUrl ?? latestRuntime.execution?.networking?.proxy_url ?? null,
                       sshCommand: latestRuntime.sshCommand ?? null,
+                      proxyHostname: hostnameOfUrl(
+                        latestRuntime.proxyUrl ?? latestRuntime.webAccessUrl ?? latestRuntime.execution?.networking?.proxy_url ?? null
+                      ),
                       mappedPorts: latestRuntime.execution != null ? mappedPorts(latestRuntime.execution) : runtimeMappedPorts(latestRuntime.mappedPorts),
                       execution: latestRuntime.execution ?? null,
                       error: null
@@ -6099,6 +6190,82 @@ var SponsorRelayController = class {
       });
     }
   }
+  /**
+   * Read one deployment's own address document over its HTTPS proxy.
+   *
+   * The mapped ports are plain HTTP, which a browser on an HTTPS page refuses to
+   * fetch, so the proxy hostname is the only way in. Deliberately single-shot:
+   * unlike the deploy-time readiness probe this backs a button someone pressed,
+   * and a caller who wants newer data presses it again.
+   */
+  async loadInstanceAddresses(instanceHash, options = {}) {
+    const existing = this.state.instanceAddresses[instanceHash];
+    if (!options.force && existing && existing.status !== "idle") return;
+    const record = this.state.instances.find(
+      (entry) => entry.instance.item_hash === instanceHash
+    );
+    const proxyHostname = record?.details.proxyHostname ?? null;
+    if (!proxyHostname) {
+      this.patchInstanceAddresses(instanceHash, {
+        ...emptyInstanceAddresses(),
+        status: "unsupported",
+        error: "This deployment has no HTTPS proxy hostname yet, so its addresses cannot be read from the browser."
+      });
+      return;
+    }
+    const sourceUrl = `https://${proxyHostname}/multiaddrs`;
+    this.patchInstanceAddresses(instanceHash, {
+      ...existing ?? emptyInstanceAddresses(),
+      status: "loading",
+      sourceUrl,
+      error: null
+    });
+    try {
+      const abort = new AbortController();
+      const timeout = globalThis.setTimeout(() => abort.abort(), 1e4);
+      const response = await fetch(sourceUrl, {
+        cache: "no-cache",
+        signal: abort.signal
+      });
+      globalThis.clearTimeout(timeout);
+      if (response.status === 404) {
+        this.patchInstanceAddresses(instanceHash, {
+          ...emptyInstanceAddresses(),
+          status: "unsupported",
+          sourceUrl,
+          fetchedAt: Date.now(),
+          error: "This profile does not publish an address document."
+        });
+        return;
+      }
+      if (!response.ok) {
+        throw new Error(`${sourceUrl} answered ${response.status}.`);
+      }
+      const payload = await response.json();
+      this.patchInstanceAddresses(instanceHash, {
+        ...parseInstanceAddressPayload(payload),
+        status: "ready",
+        sourceUrl,
+        fetchedAt: Date.now(),
+        error: null
+      });
+    } catch (error) {
+      this.patchInstanceAddresses(instanceHash, {
+        ...this.state.instanceAddresses[instanceHash] ?? emptyInstanceAddresses(),
+        status: "error",
+        sourceUrl,
+        error: error instanceof Error ? error.message : String(error)
+      });
+    }
+  }
+  patchInstanceAddresses(instanceHash, value) {
+    this.patch({
+      instanceAddresses: {
+        ...this.state.instanceAddresses,
+        [instanceHash]: value
+      }
+    });
+  }
   async deleteInstance(instanceHash) {
     this.trace("delete:start", { instanceHash });
     if (!this.state.wallet.address) {
@@ -6272,8 +6439,45 @@ function createSponsorRelayController(props = {}) {
   return new SponsorRelayController(props);
 }
 
+// src/react/components/CopyButton.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var copyButtonStyle = {
+  borderRadius: "999px",
+  border: "1px solid var(--rb-border)",
+  background: "transparent",
+  color: "var(--rb-muted)",
+  padding: "0.28rem 0.7rem",
+  fontFamily: "var(--rb-font-mono, monospace)",
+  fontSize: "0.6563rem",
+  fontWeight: 700,
+  lineHeight: 1,
+  textTransform: "uppercase",
+  letterSpacing: "0.06em",
+  cursor: "pointer",
+  flexShrink: 0
+};
+function CopyButton({ text, label = "Copy" }) {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef(null);
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    []
+  );
+  const handleCopy = async () => {
+    if (!text) return;
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setCopied(false), 1200);
+  };
+  return /* @__PURE__ */ jsx("button", { type: "button", style: copyButtonStyle, onClick: () => void handleCopy(), children: copied ? "Copied" : label });
+}
+
 // src/react/hooks/useSponsorRelayController.ts
-import { useEffect, useMemo, useSyncExternalStore } from "react";
+import { useEffect as useEffect2, useMemo, useSyncExternalStore } from "react";
 function useSponsorRelayController(props) {
   const controller = useMemo(
     () => createSponsorRelayController(props),
@@ -6293,12 +6497,12 @@ function useSponsorRelayController(props) {
       props.ucanStoreBootstrap
     ]
   );
-  useEffect(() => {
+  useEffect2(() => {
     controller.updateProps({
       debug: props.debug
     });
   }, [controller, props.debug]);
-  useEffect(() => {
+  useEffect2(() => {
     void controller.init();
     return () => {
       controller.destroy();
@@ -6313,7 +6517,7 @@ function useSponsorRelayController(props) {
 }
 
 // src/react/SponsorRelayFab.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var THEME_CSS = `
 :root {
   --rb-font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
@@ -6332,6 +6536,8 @@ var THEME_CSS = `
   --rb-panel-shadow: 0 28px 80px rgba(4, 6, 12, 0.55);
   --rb-surface: rgba(11, 14, 21, 0.55);
   --rb-field-bg: rgba(11, 14, 21, 0.85);
+  /* Opaque on purpose - see optionStyle. */
+  --rb-menu-bg: #0b0e15;
   --rb-accent: var(--rb-coral);
   --rb-accent-contrast: #0b0e15;
   --rb-link: var(--rb-cyan);
@@ -6356,6 +6562,7 @@ var THEME_CSS = `
   --rb-panel-shadow: 0 28px 80px rgba(20, 27, 46, 0.18);
   --rb-surface: rgba(20, 27, 46, 0.04);
   --rb-field-bg: #ffffff;
+  --rb-menu-bg: #ffffff;
   --rb-accent-contrast: #ffffff;
   --rb-launcher-start: #ffffff;
   --rb-launcher-end: #f2f5fa;
@@ -6399,6 +6606,10 @@ var fieldStyle = {
   fontSize: "0.8125rem",
   lineHeight: 1.4
 };
+var optionStyle = {
+  background: "var(--rb-menu-bg)",
+  color: "var(--rb-text)"
+};
 var secondaryButtonStyle = {
   borderRadius: "0.5rem",
   border: "1px solid var(--rb-border)",
@@ -6433,6 +6644,53 @@ var containedContentStyle = {
   wordBreak: "break-word",
   whiteSpace: "normal"
 };
+var tabBarStyle = {
+  display: "flex",
+  gap: "0.35rem",
+  margin: "0.55rem 0 0.5rem",
+  borderBottom: "1px solid var(--rb-border)"
+};
+var tabStyle = (active) => ({
+  border: 0,
+  borderBottom: `2px solid ${active ? "var(--rb-accent)" : "transparent"}`,
+  background: "transparent",
+  color: active ? "var(--rb-text)" : "var(--rb-muted)",
+  padding: "0.35rem 0.6rem",
+  fontFamily: "var(--rb-font-mono, monospace)",
+  fontSize: "0.6875rem",
+  fontWeight: 700,
+  textTransform: "uppercase",
+  letterSpacing: "0.06em",
+  cursor: "pointer"
+});
+var addressRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "0.5rem",
+  padding: "0.25rem 0",
+  borderTop: "1px solid var(--rb-border)"
+};
+var payloadStyle = {
+  maxHeight: "20rem",
+  overflow: "auto",
+  padding: "0.5rem",
+  border: "1px solid var(--rb-border)",
+  borderRadius: "0.5rem",
+  fontFamily: "var(--rb-font-mono, monospace)",
+  fontSize: "0.6875rem",
+  lineHeight: 1.5
+};
+function addressTabLabel(addresses) {
+  if (!addresses?.groups.length && addresses?.pwaEnv) return "Endpoints";
+  return "Multiaddresses";
+}
+function copyAllText(addresses) {
+  return addresses.groups.flatMap((group) => group.addresses).join("\n");
+}
+function pwaEnvText(addresses) {
+  return Object.entries(addresses.pwaEnv ?? {}).map(([key, value]) => `${key}=${value}`).join("\n");
+}
 var dangerButtonStyle = {
   borderRadius: "0.5rem",
   border: "1px solid rgba(255, 77, 106, 0.45)",
@@ -6614,12 +6872,19 @@ function SponsorRelayFab(props) {
     (state.bootstrapRegistrations ?? []).filter((entry) => entry.confirmed && entry.instanceItemHash).map((entry) => [entry.instanceItemHash, entry])
   );
   const orphanRegistrations = state.orphanBootstrapRegistrations ?? [];
-  const [successFlash, setSuccessFlash] = React.useState(false);
-  const [hovered, setHovered] = React.useState(false);
-  const launcherRef = React.useRef(null);
-  const [inlinePanelStyle, setInlinePanelStyle] = React.useState(null);
-  const [compactInlineLabel, setCompactInlineLabel] = React.useState(false);
-  React.useEffect(() => {
+  const [successFlash, setSuccessFlash] = React2.useState(false);
+  const [hovered, setHovered] = React2.useState(false);
+  const [instanceTabs, setInstanceTabs] = React2.useState({});
+  const selectInstanceTab = (itemHash, tab) => {
+    setInstanceTabs((current) => ({ ...current, [itemHash]: tab }));
+    if (tab !== "general") {
+      void controller.loadInstanceAddresses(itemHash);
+    }
+  };
+  const launcherRef = React2.useRef(null);
+  const [inlinePanelStyle, setInlinePanelStyle] = React2.useState(null);
+  const [compactInlineLabel, setCompactInlineLabel] = React2.useState(false);
+  React2.useEffect(() => {
     if (state.deploymentProgress.stage !== "completed" || state.deploymentProgress.status !== "success") {
       return;
     }
@@ -6635,7 +6900,7 @@ function SponsorRelayFab(props) {
     state.deploymentProgress.status,
     state.deploymentProgress.timestamp
   ]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (state.deploymentProgress.stage !== "completed") {
       return;
     }
@@ -6646,7 +6911,7 @@ function SponsorRelayFab(props) {
       window.clearTimeout(timeout);
     };
   }, [state.deploymentProgress.stage, state.deploymentProgress.timestamp]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (launcherMode !== "inline" || !state.open) {
       return;
     }
@@ -6676,7 +6941,7 @@ function SponsorRelayFab(props) {
       window.removeEventListener("scroll", updateInlinePanelStyle, true);
     };
   }, [launcherMode, state.open]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (launcherMode !== "inline") {
       setCompactInlineLabel(false);
       return;
@@ -6715,7 +6980,7 @@ function SponsorRelayFab(props) {
   const rootfsBlocked = state.rootfsHealth.tone === "error";
   const deployCallToAction = state.wallet.connected ? state.busy.deploying ? "Deploying\u2026" : rootfsBlocked ? "Deployment blocked \u2014 Rootfs unavailable" : deploymentButtonLabel(state) : "Connect MetaMask";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { children: THEME_CSS }),
+    /* @__PURE__ */ jsx2("style", { children: THEME_CSS }),
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -6773,7 +7038,7 @@ function SponsorRelayFab(props) {
                       flex: "none"
                     },
                     children: [
-                      /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx2(
                         "line",
                         {
                           x1: "17",
@@ -6785,8 +7050,8 @@ function SponsorRelayFab(props) {
                           strokeLinecap: "round"
                         }
                       ),
-                      /* @__PURE__ */ jsx("circle", { cx: "11.5", cy: "20.5", r: "7", fill: "var(--rb-coral)" }),
-                      /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx2("circle", { cx: "11.5", cy: "20.5", r: "7", fill: "var(--rb-coral)" }),
+                      /* @__PURE__ */ jsx2(
                         "circle",
                         {
                           cx: "23.5",
@@ -6800,7 +7065,7 @@ function SponsorRelayFab(props) {
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx("span", { children: launcherLabel })
+                /* @__PURE__ */ jsx2("span", { children: launcherLabel })
               ]
             }
           ),
@@ -6824,7 +7089,7 @@ function SponsorRelayFab(props) {
                 boxShadow: launcherMode === "floating" ? void 0 : `inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 16px ${progressToneColor(indicator.tone)}22`
               },
               children: [
-                /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx2(
                   "span",
                   {
                     "aria-hidden": "true",
@@ -6840,7 +7105,7 @@ function SponsorRelayFab(props) {
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx("span", { children: indicator.label })
+                /* @__PURE__ */ jsx2("span", { children: indicator.label })
               ]
             }
           )
@@ -6848,7 +7113,7 @@ function SponsorRelayFab(props) {
       }
     ),
     state.open ? /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx2(
         "div",
         {
           onClick: () => controller.setOpen(false),
@@ -6887,8 +7152,8 @@ function SponsorRelayFab(props) {
                       letterSpacing: "0.08em"
                     },
                     children: [
-                      /* @__PURE__ */ jsx("span", { children: "Aleph VM credit deployer" }),
-                      /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx2("span", { children: "Aleph VM credit deployer" }),
+                      /* @__PURE__ */ jsx2(
                         "span",
                         {
                           style: {
@@ -6904,7 +7169,7 @@ function SponsorRelayFab(props) {
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx2(
                   "h2",
                   {
                     style: {
@@ -6917,7 +7182,7 @@ function SponsorRelayFab(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx2(
                 "button",
                 {
                   type: "button",
@@ -6929,8 +7194,8 @@ function SponsorRelayFab(props) {
             ]
           }
         ),
-        /* @__PURE__ */ jsx("p", { style: { color: "var(--rb-muted)" }, children: state.statusText }),
-        state.errorText ? /* @__PURE__ */ jsx("p", { style: { color: "var(--rb-danger)" }, children: state.errorText }) : null,
+        /* @__PURE__ */ jsx2("p", { style: { color: "var(--rb-muted)" }, children: state.statusText }),
+        state.errorText ? /* @__PURE__ */ jsx2("p", { style: { color: "var(--rb-danger)" }, children: state.errorText }) : null,
         pollingState ? /* @__PURE__ */ jsxs(
           "div",
           {
@@ -6955,7 +7220,7 @@ function SponsorRelayFab(props) {
                     gap: "0.45rem"
                   },
                   children: [
-                    /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx2(
                       "span",
                       {
                         "aria-hidden": "true",
@@ -6969,11 +7234,11 @@ function SponsorRelayFab(props) {
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx("strong", { style: { fontSize: "0.88rem" }, children: pollingState.label })
+                    /* @__PURE__ */ jsx2("strong", { style: { fontSize: "0.88rem" }, children: pollingState.label })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx("small", { style: { color: "var(--rb-muted)", lineHeight: 1.35 }, children: pollingState.detail })
+              /* @__PURE__ */ jsx2("small", { style: { color: "var(--rb-muted)", lineHeight: 1.35 }, children: pollingState.detail })
             ]
           }
         ) : null,
@@ -7008,7 +7273,7 @@ function SponsorRelayFab(props) {
                           minWidth: 0
                         },
                         children: [
-                          /* @__PURE__ */ jsx(
+                          /* @__PURE__ */ jsx2(
                             "span",
                             {
                               style: {
@@ -7030,7 +7295,7 @@ function SponsorRelayFab(props) {
                               children: progressBadgeLabel(state.deploymentProgress.stage)
                             }
                           ),
-                          /* @__PURE__ */ jsx(
+                          /* @__PURE__ */ jsx2(
                             "strong",
                             {
                               style: {
@@ -7065,7 +7330,7 @@ function SponsorRelayFab(props) {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx2(
                 "div",
                 {
                   style: {
@@ -7076,7 +7341,7 @@ function SponsorRelayFab(props) {
                     background: "rgba(168, 179, 199, 0.18)",
                     overflow: "hidden"
                   },
-                  children: /* @__PURE__ */ jsx(
+                  children: /* @__PURE__ */ jsx2(
                     "div",
                     {
                       style: {
@@ -7118,7 +7383,7 @@ function SponsorRelayFab(props) {
                         ]
                       }
                     ) : null,
-                    state.deploymentProgress.detail ? /* @__PURE__ */ jsx(
+                    state.deploymentProgress.detail ? /* @__PURE__ */ jsx2(
                       "div",
                       {
                         style: {
@@ -7130,7 +7395,7 @@ function SponsorRelayFab(props) {
                         children: state.deploymentProgress.detail
                       }
                     ) : null,
-                    state.deploymentProgress.error ? /* @__PURE__ */ jsx(
+                    state.deploymentProgress.error ? /* @__PURE__ */ jsx2(
                       "div",
                       {
                         style: {
@@ -7152,7 +7417,7 @@ function SponsorRelayFab(props) {
           {
             style: { display: "grid", gap: "0.75rem", marginTop: "0.9rem" },
             children: [
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx2(
                 "input",
                 {
                   style: fieldStyle,
@@ -7161,7 +7426,7 @@ function SponsorRelayFab(props) {
                   placeholder: "Instance name"
                 }
               ),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx2(
                 "select",
                 {
                   style: fieldStyle,
@@ -7172,11 +7437,11 @@ function SponsorRelayFab(props) {
                     const vcpus = unit ? unit.vcpus * tier.compute_units : null;
                     const memoryMiB = unit ? unit.memory_mib * tier.compute_units : null;
                     const diskMiB = unit ? unit.disk_mib * tier.compute_units : null;
-                    return /* @__PURE__ */ jsx("option", { value: tier.id, children: `${tier.id} ${formatTierSpecLabel(vcpus, memoryMiB, diskMiB)}` }, tier.id);
+                    return /* @__PURE__ */ jsx2("option", { style: optionStyle, value: tier.id, children: `${tier.id} ${formatTierSpecLabel(vcpus, memoryMiB, diskMiB)}` }, tier.id);
                   })
                 }
               ),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx2(
                 "div",
                 {
                   style: {
@@ -7200,7 +7465,7 @@ function SponsorRelayFab(props) {
                     event.currentTarget.open
                   ),
                   children: [
-                    /* @__PURE__ */ jsx("summary", { children: "Advanced" }),
+                    /* @__PURE__ */ jsx2("summary", { children: "Advanced" }),
                     /* @__PURE__ */ jsxs(
                       "div",
                       {
@@ -7210,7 +7475,7 @@ function SponsorRelayFab(props) {
                           marginTop: "0.65rem"
                         },
                         children: [
-                          /* @__PURE__ */ jsx(
+                          /* @__PURE__ */ jsx2(
                             "input",
                             {
                               style: fieldStyle,
@@ -7219,7 +7484,7 @@ function SponsorRelayFab(props) {
                               placeholder: "Manifest URL"
                             }
                           ),
-                          /* @__PURE__ */ jsx(
+                          /* @__PURE__ */ jsx2(
                             "textarea",
                             {
                               style: fieldStyle,
@@ -7237,8 +7502,8 @@ function SponsorRelayFab(props) {
                                 event.currentTarget.open
                               ),
                               children: [
-                                /* @__PURE__ */ jsx("summary", { children: "Paste Manifest" }),
-                                /* @__PURE__ */ jsx(
+                                /* @__PURE__ */ jsx2("summary", { children: "Paste Manifest" }),
+                                /* @__PURE__ */ jsx2(
                                   "textarea",
                                   {
                                     style: { ...fieldStyle, marginTop: "0.65rem" },
@@ -7251,7 +7516,7 @@ function SponsorRelayFab(props) {
                             }
                           ),
                           stateDeploymentProfile(state) === "ucan-store" ? /* @__PURE__ */ jsxs("details", { open: true, children: [
-                            /* @__PURE__ */ jsx("summary", { children: "UCAN Store Bootstrap" }),
+                            /* @__PURE__ */ jsx2("summary", { children: "UCAN Store Bootstrap" }),
                             /* @__PURE__ */ jsxs(
                               "div",
                               {
@@ -7261,7 +7526,7 @@ function SponsorRelayFab(props) {
                                   marginTop: "0.65rem"
                                 },
                                 children: [
-                                  /* @__PURE__ */ jsx(
+                                  /* @__PURE__ */ jsx2(
                                     "input",
                                     {
                                       style: fieldStyle,
@@ -7273,7 +7538,7 @@ function SponsorRelayFab(props) {
                                       placeholder: "Admin DID"
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx(
+                                  /* @__PURE__ */ jsx2(
                                     "input",
                                     {
                                       style: fieldStyle,
@@ -7285,7 +7550,7 @@ function SponsorRelayFab(props) {
                                       placeholder: "Service DID override (optional)"
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx(
+                                  /* @__PURE__ */ jsx2(
                                     "input",
                                     {
                                       style: fieldStyle,
@@ -7297,7 +7562,7 @@ function SponsorRelayFab(props) {
                                       placeholder: "Space DID"
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx(
+                                  /* @__PURE__ */ jsx2(
                                     "textarea",
                                     {
                                       style: fieldStyle,
@@ -7310,7 +7575,7 @@ function SponsorRelayFab(props) {
                                       placeholder: "Root delegation proof"
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx(
+                                  /* @__PURE__ */ jsx2(
                                     "textarea",
                                     {
                                       style: fieldStyle,
@@ -7332,7 +7597,7 @@ function SponsorRelayFab(props) {
                                         gridTemplateColumns: "repeat(auto-fit, minmax(10rem, 1fr))"
                                       },
                                       children: [
-                                        /* @__PURE__ */ jsx(
+                                        /* @__PURE__ */ jsx2(
                                           "input",
                                           {
                                             style: fieldStyle,
@@ -7344,7 +7609,7 @@ function SponsorRelayFab(props) {
                                             placeholder: "Default expiration (seconds)"
                                           }
                                         ),
-                                        /* @__PURE__ */ jsx(
+                                        /* @__PURE__ */ jsx2(
                                           "input",
                                           {
                                             style: fieldStyle,
@@ -7359,7 +7624,7 @@ function SponsorRelayFab(props) {
                                       ]
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx(
+                                  /* @__PURE__ */ jsx2(
                                     "input",
                                     {
                                       style: fieldStyle,
@@ -7371,7 +7636,7 @@ function SponsorRelayFab(props) {
                                       placeholder: "PWA origin override (optional, defaults to current page origin)"
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx(
+                                  /* @__PURE__ */ jsx2(
                                     "input",
                                     {
                                       style: fieldStyle,
@@ -7383,7 +7648,7 @@ function SponsorRelayFab(props) {
                                       placeholder: "Service origin override (optional, defaults to runtime proxy URL)"
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx(
+                                  /* @__PURE__ */ jsx2(
                                     "div",
                                     {
                                       style: {
@@ -7417,20 +7682,21 @@ function SponsorRelayFab(props) {
             formatNumber(state.pricingSummary.requiredCredits, 0),
             " credits required"
           ] }),
-          /* @__PURE__ */ jsx("div", { children: state.rootfsHealth.label }),
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx2("div", { children: state.rootfsHealth.label }),
+          /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsxs(
             "select",
             {
+              style: fieldStyle,
               "aria-label": "Select CRN",
               value: state.crnPinnedByUser ? state.selectedCrn?.hash ?? "" : "",
               onChange: (event) => controller.selectCrn(event.currentTarget.value || null),
               children: [
-                /* @__PURE__ */ jsxs("option", { value: "", children: [
+                /* @__PURE__ */ jsxs("option", { style: optionStyle, value: "", children: [
                   "Auto (",
                   state.crnOptions[0]?.name ?? "best score",
                   ")"
                 ] }),
-                state.crnOptions.map((option) => /* @__PURE__ */ jsx("option", { value: option.hash, children: (option.name ?? option.hash.slice(0, 8)) + (option.score != null ? ` \xB7 ${option.score.toFixed(2)}` : "") }, option.hash))
+                state.crnOptions.map((option) => /* @__PURE__ */ jsx2("option", { style: optionStyle, value: option.hash, children: (option.name ?? option.hash.slice(0, 8)) + (option.score != null ? ` \xB7 ${option.score.toFixed(2)}` : "") }, option.hash))
               ]
             }
           ) }),
@@ -7458,11 +7724,11 @@ function SponsorRelayFab(props) {
               color: "var(--rb-text)"
             },
             children: [
-              /* @__PURE__ */ jsx("strong", { children: "Rootfs unavailable \u2014 deployment blocked" }),
-              /* @__PURE__ */ jsx("span", { style: { fontSize: "0.82rem", lineHeight: 1.45 }, children: state.rootfsHealth.detail }),
+              /* @__PURE__ */ jsx2("strong", { children: "Rootfs unavailable \u2014 deployment blocked" }),
+              /* @__PURE__ */ jsx2("span", { style: { fontSize: "0.82rem", lineHeight: 1.45 }, children: state.rootfsHealth.detail }),
               /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.75rem", lineHeight: 1.4 }, children: [
                 "This is separate from the connected MetaMask balance. The manifest must reference an Aleph rootfs STORE with status ",
-                /* @__PURE__ */ jsx("code", { children: "processed" }),
+                /* @__PURE__ */ jsx2("code", { children: "processed" }),
                 "."
               ] }),
               state.manifest?.rootfsItemHash ? /* @__PURE__ */ jsxs("code", { style: { fontSize: "0.7rem", overflowWrap: "anywhere" }, children: [
@@ -7471,14 +7737,14 @@ function SponsorRelayFab(props) {
                 state.rootfsResolution?.messageStatus ? ` \xB7 Aleph status: ${state.rootfsResolution.messageStatus}` : ""
               ] }) : null,
               /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
-                /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void controller.refresh(), disabled: state.busy.refreshing, style: { ...secondaryButtonStyle, padding: "0.55rem 0.7rem" }, children: state.busy.refreshing ? "Checking\u2026" : "Retry validation" }),
-                /* @__PURE__ */ jsx("button", { type: "button", onClick: () => controller.setShowAdvanced(true), style: { ...secondaryButtonStyle, padding: "0.55rem 0.7rem" }, children: "Edit manifest URL" }),
-                /^https?:\/\//.test(state.manifestUrl) ? /* @__PURE__ */ jsx("a", { href: state.manifestUrl, target: "_blank", rel: "noreferrer", style: { color: "var(--rb-link)", alignSelf: "center", fontSize: "0.78rem" }, children: "Open manifest" }) : null
+                /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => void controller.refresh(), disabled: state.busy.refreshing, style: { ...secondaryButtonStyle, padding: "0.55rem 0.7rem" }, children: state.busy.refreshing ? "Checking\u2026" : "Retry validation" }),
+                /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => controller.setShowAdvanced(true), style: { ...secondaryButtonStyle, padding: "0.55rem 0.7rem" }, children: "Edit manifest URL" }),
+                /^https?:\/\//.test(state.manifestUrl) ? /* @__PURE__ */ jsx2("a", { href: state.manifestUrl, target: "_blank", rel: "noreferrer", style: { color: "var(--rb-link)", alignSelf: "center", fontSize: "0.78rem" }, children: "Open manifest" }) : null
               ] })
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "button",
           {
             type: "button",
@@ -7518,7 +7784,7 @@ function SponsorRelayFab(props) {
                     open: true,
                     style: containedContentStyle,
                     children: [
-                      /* @__PURE__ */ jsx("summary", { style: containedContentStyle, children: /* @__PURE__ */ jsxs(
+                      /* @__PURE__ */ jsx2("summary", { style: containedContentStyle, children: /* @__PURE__ */ jsxs(
                         "span",
                         {
                           style: {
@@ -7544,7 +7810,7 @@ function SponsorRelayFab(props) {
                                   fontWeight: 700
                                 },
                                 children: [
-                                  /* @__PURE__ */ jsx(
+                                  /* @__PURE__ */ jsx2(
                                     "span",
                                     {
                                       "aria-hidden": "true",
@@ -7574,57 +7840,264 @@ function SponsorRelayFab(props) {
                             marginTop: "0.55rem"
                           },
                           children: [
-                            /* @__PURE__ */ jsxs("div", { children: [
-                              "Status: ",
-                              entry.details.messageStatus
-                            ] }),
-                            bootstrapUiEnabled && confirmedRegistration ? /* @__PURE__ */ jsxs("div", { children: [
-                              "Bootstrap registration:",
-                              " ",
-                              shortHash(
-                                confirmedRegistration.messageHash ?? confirmedRegistration.content?.registrationId ?? "confirmed",
-                                14,
-                                8
-                              )
-                            ] }) : null,
-                            /* @__PURE__ */ jsxs("div", { children: [
-                              "Host IPv4: ",
-                              entry.details.hostIpv4 ?? "-"
-                            ] }),
-                            /* @__PURE__ */ jsxs("div", { children: [
-                              "IPv6: ",
-                              entry.details.ipv6 ?? "-"
-                            ] }),
-                            /* @__PURE__ */ jsxs("div", { children: [
-                              "VM IPv4: ",
-                              entry.details.vmIpv4 ?? "-"
-                            ] }),
-                            /* @__PURE__ */ jsxs("div", { children: [
-                              "SSH: ",
-                              entry.details.sshCommand ?? "-"
-                            ] }),
-                            /* @__PURE__ */ jsxs("div", { children: [
-                              "Ports: ",
-                              joinMappedPorts(entry.details.mappedPorts)
-                            ] }),
-                            /* @__PURE__ */ jsxs("div", { children: [
-                              "Submitted:",
-                              " ",
-                              formatDateTime(
-                                entry.instance.reception_time ?? entry.instance.time
+                            (() => {
+                              const itemHash = entry.instance.item_hash;
+                              const tab = instanceTabs[itemHash] ?? "general";
+                              const addresses = state.instanceAddresses?.[itemHash] ?? null;
+                              const refreshRow = /* @__PURE__ */ jsxs(
+                                "div",
+                                {
+                                  style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    gap: "0.5rem",
+                                    marginBottom: "0.5rem"
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ jsx2(
+                                      "span",
+                                      {
+                                        style: {
+                                          color: "var(--rb-muted)",
+                                          fontSize: "0.6875rem",
+                                          overflowWrap: "anywhere"
+                                        },
+                                        children: addresses?.sourceUrl ?? "Reading from the deployment"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx2(
+                                      "button",
+                                      {
+                                        type: "button",
+                                        style: secondaryButtonStyle,
+                                        disabled: addresses?.status === "loading",
+                                        onClick: () => void controller.loadInstanceAddresses(
+                                          itemHash,
+                                          { force: true }
+                                        ),
+                                        children: addresses?.status === "loading" ? "Loading\u2026" : "Refresh"
+                                      }
+                                    )
+                                  ]
+                                }
+                              );
+                              return /* @__PURE__ */ jsxs(Fragment, { children: [
+                                /* @__PURE__ */ jsx2("div", { style: tabBarStyle, role: "tablist", children: [
+                                  ["general", "General"],
+                                  ["addresses", addressTabLabel(addresses)],
+                                  ["health", "Health"]
+                                ].map(([key, label]) => /* @__PURE__ */ jsx2(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    role: "tab",
+                                    "aria-selected": tab === key,
+                                    style: tabStyle(tab === key),
+                                    onClick: () => selectInstanceTab(itemHash, key),
+                                    children: label
+                                  },
+                                  key
+                                )) }),
+                                tab === "addresses" ? /* @__PURE__ */ jsxs("div", { style: containedContentStyle, children: [
+                                  refreshRow,
+                                  addresses?.status === "loading" && !addresses.groups.length ? /* @__PURE__ */ jsx2("div", { children: "Reading the deployment's address document\u2026" }) : addresses?.status === "unsupported" || addresses?.status === "error" ? /* @__PURE__ */ jsx2("div", { children: addresses.error }) : addresses?.groups.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                                    addresses.peerId ? /* @__PURE__ */ jsxs("div", { style: addressRowStyle, children: [
+                                      /* @__PURE__ */ jsx2("code", { children: addresses.peerId }),
+                                      /* @__PURE__ */ jsx2(CopyButton, { text: addresses.peerId })
+                                    ] }) : null,
+                                    addresses.groups.map((group) => /* @__PURE__ */ jsxs(
+                                      "div",
+                                      {
+                                        style: { marginBottom: "0.75rem" },
+                                        children: [
+                                          /* @__PURE__ */ jsxs(
+                                            "div",
+                                            {
+                                              style: {
+                                                display: "flex",
+                                                alignItems: "center",
+                                                justifyContent: "space-between",
+                                                gap: "0.5rem"
+                                              },
+                                              children: [
+                                                /* @__PURE__ */ jsx2("strong", { children: group.label }),
+                                                /* @__PURE__ */ jsx2(
+                                                  CopyButton,
+                                                  {
+                                                    text: group.addresses.join("\n"),
+                                                    label: "Copy group"
+                                                  }
+                                                )
+                                              ]
+                                            }
+                                          ),
+                                          group.addresses.map((address) => /* @__PURE__ */ jsxs(
+                                            "div",
+                                            {
+                                              style: addressRowStyle,
+                                              children: [
+                                                /* @__PURE__ */ jsx2("code", { children: address }),
+                                                /* @__PURE__ */ jsx2(CopyButton, { text: address })
+                                              ]
+                                            },
+                                            address
+                                          ))
+                                        ]
+                                      },
+                                      group.key
+                                    )),
+                                    /* @__PURE__ */ jsxs(
+                                      "div",
+                                      {
+                                        style: { display: "flex", gap: "0.5rem" },
+                                        children: [
+                                          /* @__PURE__ */ jsx2(
+                                            CopyButton,
+                                            {
+                                              text: copyAllText(addresses),
+                                              label: "Copy all"
+                                            }
+                                          ),
+                                          /* @__PURE__ */ jsx2(
+                                            CopyButton,
+                                            {
+                                              text: JSON.stringify(
+                                                addresses.payload,
+                                                null,
+                                                2
+                                              ),
+                                              label: "Copy JSON"
+                                            }
+                                          )
+                                        ]
+                                      }
+                                    )
+                                  ] }) : addresses?.pwaEnv ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                                    /* @__PURE__ */ jsxs(
+                                      "div",
+                                      {
+                                        style: {
+                                          display: "flex",
+                                          alignItems: "center",
+                                          justifyContent: "space-between",
+                                          gap: "0.5rem"
+                                        },
+                                        children: [
+                                          /* @__PURE__ */ jsx2("strong", { children: "PWA environment" }),
+                                          /* @__PURE__ */ jsx2(
+                                            CopyButton,
+                                            {
+                                              text: pwaEnvText(addresses),
+                                              label: "Copy block"
+                                            }
+                                          )
+                                        ]
+                                      }
+                                    ),
+                                    Object.entries(addresses.pwaEnv).map(
+                                      ([key, value]) => /* @__PURE__ */ jsxs(
+                                        "div",
+                                        {
+                                          style: addressRowStyle,
+                                          children: [
+                                            /* @__PURE__ */ jsx2("code", { children: `${key}=${value}` }),
+                                            /* @__PURE__ */ jsx2(
+                                              CopyButton,
+                                              {
+                                                text: `${key}=${value}`
+                                              }
+                                            )
+                                          ]
+                                        },
+                                        key
+                                      )
+                                    )
+                                  ] }) : /* @__PURE__ */ jsx2("div", { children: "This deployment reports no addresses yet." })
+                                ] }) : null,
+                                tab === "health" ? /* @__PURE__ */ jsxs("div", { style: containedContentStyle, children: [
+                                  refreshRow,
+                                  addresses?.payload ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                                    /* @__PURE__ */ jsx2("pre", { style: payloadStyle, children: JSON.stringify(
+                                      addresses.payload,
+                                      null,
+                                      2
+                                    ) }),
+                                    /* @__PURE__ */ jsx2(
+                                      CopyButton,
+                                      {
+                                        text: JSON.stringify(
+                                          addresses.payload,
+                                          null,
+                                          2
+                                        ),
+                                        label: "Copy JSON"
+                                      }
+                                    )
+                                  ] }) : addresses?.status === "loading" ? /* @__PURE__ */ jsx2("div", { children: "Reading the deployment's health document\u2026" }) : /* @__PURE__ */ jsx2("div", { children: addresses?.error ?? "No health document read yet." })
+                                ] }) : null
+                              ] });
+                            })(),
+                            (instanceTabs[entry.instance.item_hash] ?? "general") !== "general" ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+                              /* @__PURE__ */ jsxs("div", { children: [
+                                "Status: ",
+                                entry.details.messageStatus
+                              ] }),
+                              bootstrapUiEnabled && confirmedRegistration ? /* @__PURE__ */ jsxs("div", { children: [
+                                "Bootstrap registration:",
+                                " ",
+                                shortHash(
+                                  confirmedRegistration.messageHash ?? confirmedRegistration.content?.registrationId ?? "confirmed",
+                                  14,
+                                  8
+                                )
+                              ] }) : null,
+                              /* @__PURE__ */ jsxs("div", { children: [
+                                "Host IPv4: ",
+                                entry.details.hostIpv4 ?? "-"
+                              ] }),
+                              /* @__PURE__ */ jsxs("div", { children: [
+                                "IPv6: ",
+                                entry.details.ipv6 ?? "-"
+                              ] }),
+                              /* @__PURE__ */ jsxs("div", { children: [
+                                "VM IPv4: ",
+                                entry.details.vmIpv4 ?? "-"
+                              ] }),
+                              /* @__PURE__ */ jsxs("div", { children: [
+                                "SSH: ",
+                                entry.details.sshCommand ?? "-"
+                              ] }),
+                              /* @__PURE__ */ jsxs("div", { children: [
+                                "Ports: ",
+                                joinMappedPorts(entry.details.mappedPorts)
+                              ] }),
+                              entry.details.proxyHostname ? /* @__PURE__ */ jsxs("div", { style: addressRowStyle, children: [
+                                /* @__PURE__ */ jsxs("code", { children: [
+                                  "Proxy: ",
+                                  entry.details.proxyHostname
+                                ] }),
+                                /* @__PURE__ */ jsx2(CopyButton, { text: entry.details.proxyHostname })
+                              ] }) : null,
+                              /* @__PURE__ */ jsxs("div", { children: [
+                                "Submitted:",
+                                " ",
+                                formatDateTime(
+                                  entry.instance.reception_time ?? entry.instance.time
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsx2(
+                                "button",
+                                {
+                                  type: "button",
+                                  style: dangerButtonStyle,
+                                  onClick: () => void controller.deleteInstance(
+                                    entry.instance.item_hash
+                                  ),
+                                  children: state.busy.deletingInstanceHash === entry.instance.item_hash ? "Deleting\u2026" : "Delete"
+                                }
                               )
-                            ] }),
-                            /* @__PURE__ */ jsx(
-                              "button",
-                              {
-                                type: "button",
-                                style: dangerButtonStyle,
-                                onClick: () => void controller.deleteInstance(
-                                  entry.instance.item_hash
-                                ),
-                                children: state.busy.deletingInstanceHash === entry.instance.item_hash ? "Deleting\u2026" : "Delete"
-                              }
-                            )
+                            ] })
                           ]
                         }
                       )
@@ -7647,8 +8120,8 @@ function SponsorRelayFab(props) {
                   },
                   children: [
                     /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: "0.2rem" }, children: [
-                      /* @__PURE__ */ jsx("strong", { children: "Orphan bootstrap registrations" }),
-                      /* @__PURE__ */ jsx("small", { style: { color: "var(--rb-muted)", lineHeight: 1.35 }, children: "Current-wallet registrations without a matching instance. Forget them directly from here." })
+                      /* @__PURE__ */ jsx2("strong", { children: "Orphan bootstrap registrations" }),
+                      /* @__PURE__ */ jsx2("small", { style: { color: "var(--rb-muted)", lineHeight: 1.35 }, children: "Current-wallet registrations without a matching instance. Forget them directly from here." })
                     ] }),
                     orphanRegistrations.map((entry) => {
                       const registrationHash = entry.messageHash ?? entry.hash ?? null;
@@ -7665,7 +8138,7 @@ function SponsorRelayFab(props) {
                             border: "1px solid var(--rb-border)"
                           },
                           children: [
-                            /* @__PURE__ */ jsx(
+                            /* @__PURE__ */ jsx2(
                               "div",
                               {
                                 style: {
@@ -7694,7 +8167,7 @@ function SponsorRelayFab(props) {
                               " ",
                               formatDateTime(entry.content?.updatedAt ?? entry.time)
                             ] }),
-                            /* @__PURE__ */ jsx(
+                            /* @__PURE__ */ jsx2(
                               "button",
                               {
                                 type: "button",