@le-space/ui 0.7.0 → 0.8.0

package/shared/index.d.ts

@@ -253,6 +253,12 @@ interface CompactInstanceDetails {
     vmIpv4: string | null;
     webUrl: string | null;
     sshCommand: string | null;
+    /**
+     * Hostname of the deployment's HTTPS proxy. The mapped ports are plain HTTP,
+     * which a browser on an HTTPS page refuses to fetch, so this is the only
+     * address the card can read the relay's own documents from.
+     */
+    proxyHostname: string | null;
     mappedPorts: Array<{
         label: string;
         hostPort: number | null;
@@ -260,6 +266,32 @@ interface CompactInstanceDetails {
     execution: InstanceExecution | null;
     error: string | null;
 }
+/** One transport's worth of addresses, as the relay itself groups them. */
+interface SponsorRelayAddressGroup {
+    key: string;
+    label: string;
+    addresses: string[];
+}
+/**
+ * What a deployment reports about itself at `/multiaddrs`. Deliberately not
+ * normalised into "the best address": the card shows what the relay says, and
+ * choosing between addresses is the consumer's business, not this UI's.
+ */
+interface SponsorRelayInstanceAddresses {
+    status: 'idle' | 'loading' | 'ready' | 'unsupported' | 'error';
+    /** Transport groups, empty for a profile that publishes no libp2p addresses. */
+    groups: SponsorRelayAddressGroup[];
+    /** Ready-to-paste environment block, when the profile publishes one. */
+    pwaEnv: Record<string, string> | null;
+    /** Raw payload, rendered verbatim on the health tab. */
+    payload: Record<string, unknown> | null;
+    peerId: string | null;
+    version: string | null;
+    fetchedAt: number | null;
+    error: string | null;
+    /** Source URL, shown so a person can curl exactly what the card read. */
+    sourceUrl: string | null;
+}
 interface CompactInstanceRecord {
     instance: InstanceMessage;
     details: CompactInstanceDetails;
@@ -324,6 +356,13 @@ interface SponsorRelayState {
     orphanBootstrapRegistrations: CompactBootstrapRegistrationRecord[];
     lastDeploymentHash: string | null;
     deploymentProgress: DeploymentProgressEvent;
+    /**
+     * What each deployment reports at `/multiaddrs`, keyed by instance item hash.
+     * Fetched on demand rather than with the instance list: AutoTLS addresses only
+     * appear a minute or two after a deploy reports success, so this is state that
+     * has to be refreshable on its own.
+     */
+    instanceAddresses: Record<string, SponsorRelayInstanceAddresses>;
 }
 type SponsorRelaySubscriber = (state: SponsorRelayState) => void;
 
@@ -347,7 +386,7 @@ declare const STALE_INSTANCE_ALLOCATION_COOLDOWN_MS: number;
 declare const RECENT_INSTANCE_RUNTIME_GRACE_MS: number;
 declare const DEPLOYMENT_PENDING_WARNING_MS: number;
 
-declare const UI_PACKAGE_VERSION = "0.7.0";
+declare const UI_PACKAGE_VERSION = "0.8.0";
 
 interface RootfsRequiredPortForward {
     port: number;
@@ -383,6 +422,14 @@ declare function connectWallet(provider?: EthereumProviderLike | null): Promise<
 declare function personalSign(address: string, message: string, provider?: EthereumProviderLike | null): Promise<string>;
 declare function watchWallet(onChange: () => void, provider?: EthereumProviderLike | null): () => void;
 
+/**
+ * Normalise the two address documents in the fleet into one list of groups.
+ *
+ * orbitdb-relay reports `byTransport`; uc-go-peer's describe output uses
+ * `<transport>_multiaddrs` keys. Neither is rewritten or ranked here — the card
+ * shows what the relay said, and picking an address is the consumer's job.
+ */
+declare function parseInstanceAddressPayload(payload: Record<string, unknown>): SponsorRelayInstanceAddresses;
 declare function rootfsHealth(args: {
     manifestState: RootfsManifestState;
     rootfsVerified: boolean;
@@ -438,6 +485,18 @@ declare class SponsorRelayController {
     private refreshWalletDerivedState;
     refresh(): Promise<void>;
     deploy(): Promise<void>;
+    /**
+     * 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.
+     */
+    loadInstanceAddresses(instanceHash: string, options?: {
+        force?: boolean;
+    }): Promise<void>;
+    private patchInstanceAddresses;
     deleteInstance(instanceHash: string): Promise<void>;
     deleteBootstrapRegistration(registrationHash: string): Promise<void>;
 }
@@ -450,4 +509,4 @@ interface DeploymentProgressEmitter {
 }
 declare function createDeploymentProgressEmitter(): DeploymentProgressEmitter;
 
-export { type CompactBootstrapRegistrationRecord, type CompactInstanceDetails, type CompactInstanceRecord, DEFAULT_INSTANCE_NAME, DEFAULT_MANIFEST_URL, DEFAULT_TIER_ID, DEFAULT_UCAN_STORE_ALLOWED_CAPABILITIES, DEFAULT_UCAN_STORE_MAX_DELEGATION_EXPIRATION_SECONDS, DEFAULT_UCAN_STORE_PWA_ORIGIN, DEFAULT_UCAN_STORE_SERVICE_DID, DEFAULT_UCAN_STORE_SERVICE_ORIGIN, DEFAULT_UCAN_STORE_USER_DELEGATION_EXPIRATION_SECONDS, DEPLOYMENT_PENDING_WARNING_MS, type DeploymentProgressEmitter, type EthereumProviderLike, IDLE_DEPLOYMENT_PROGRESS, INSTANCE_RUNTIME_PENDING_REFRESH_MS, INSTANCE_RUNTIME_READY_REFRESH_MS, INSTANCE_RUNTIME_STALE_REFRESH_MS, MANIFEST_SOURCE_REFRESH_DEBOUNCE_MS, RECENT_INSTANCE_RUNTIME_GRACE_MS, REFRESH_INTERVAL_MS, ROOTFS_MISSING_STATE, STALE_INSTANCE_ALLOCATION_COOLDOWN_MS, SponsorRelayController, type SponsorRelayHealthTone, type SponsorRelayPricingSummary, type SponsorRelayProps, type SponsorRelayRootfsHealth, type SponsorRelayState, type SponsorRelaySubscriber, type SponsorRelayUcanStoreBootstrapInput, type SponsorRelayWalletState, UI_PACKAGE_VERSION, buildSshCommand, connectWallet, createDeploymentProgressEmitter, createSponsorRelayController, formatDateTime, formatNumber, formatTierSpecLabel, getEthereumProvider, joinMappedPorts, joinRequiredPortForwards, personalSign, resolveManifestSource, rootfsHealth, shortHash, toChecksumAddress, watchWallet };
+export { type CompactBootstrapRegistrationRecord, type CompactInstanceDetails, type CompactInstanceRecord, DEFAULT_INSTANCE_NAME, DEFAULT_MANIFEST_URL, DEFAULT_TIER_ID, DEFAULT_UCAN_STORE_ALLOWED_CAPABILITIES, DEFAULT_UCAN_STORE_MAX_DELEGATION_EXPIRATION_SECONDS, DEFAULT_UCAN_STORE_PWA_ORIGIN, DEFAULT_UCAN_STORE_SERVICE_DID, DEFAULT_UCAN_STORE_SERVICE_ORIGIN, DEFAULT_UCAN_STORE_USER_DELEGATION_EXPIRATION_SECONDS, DEPLOYMENT_PENDING_WARNING_MS, type DeploymentProgressEmitter, type EthereumProviderLike, IDLE_DEPLOYMENT_PROGRESS, INSTANCE_RUNTIME_PENDING_REFRESH_MS, INSTANCE_RUNTIME_READY_REFRESH_MS, INSTANCE_RUNTIME_STALE_REFRESH_MS, MANIFEST_SOURCE_REFRESH_DEBOUNCE_MS, RECENT_INSTANCE_RUNTIME_GRACE_MS, REFRESH_INTERVAL_MS, ROOTFS_MISSING_STATE, STALE_INSTANCE_ALLOCATION_COOLDOWN_MS, type SponsorRelayAddressGroup, SponsorRelayController, type SponsorRelayHealthTone, type SponsorRelayInstanceAddresses, type SponsorRelayPricingSummary, type SponsorRelayProps, type SponsorRelayRootfsHealth, type SponsorRelayState, type SponsorRelaySubscriber, type SponsorRelayUcanStoreBootstrapInput, type SponsorRelayWalletState, UI_PACKAGE_VERSION, buildSshCommand, connectWallet, createDeploymentProgressEmitter, createSponsorRelayController, formatDateTime, formatNumber, formatTierSpecLabel, getEthereumProvider, joinMappedPorts, joinRequiredPortForwards, parseInstanceAddressPayload, personalSign, resolveManifestSource, rootfsHealth, shortHash, toChecksumAddress, watchWallet };

package/shared/index.js

@@ -42,7 +42,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) {
@@ -3831,7 +3831,8 @@ function defaultState(props = {}) {
     bootstrapRegistrations: [],
     orphanBootstrapRegistrations: [],
     lastDeploymentHash: null,
-    deploymentProgress: IDLE_DEPLOYMENT_PROGRESS
+    deploymentProgress: IDLE_DEPLOYMENT_PROGRESS,
+    instanceAddresses: {}
   };
 }
 function manifestLoadErrorState(error) {
@@ -3859,6 +3860,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]) => ({
@@ -4007,6 +4085,7 @@ async function inspectInstanceRuntime(args) {
     vmIpv4: null,
     webUrl: null,
     sshCommand: null,
+    proxyHostname: null,
     mappedPorts: [],
     execution: null,
     error: null
@@ -4071,6 +4150,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 };
@@ -4420,10 +4500,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({
@@ -5406,6 +5490,7 @@ var SponsorRelayController = class {
                 vmIpv4: null,
                 webUrl: null,
                 sshCommand: null,
+                proxyHostname: null,
                 mappedPorts: [],
                 execution: null,
                 error: null
@@ -5821,6 +5906,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
@@ -5918,6 +6006,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
@@ -6098,6 +6189,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) {
@@ -6302,6 +6469,7 @@ export {
   getEthereumProvider,
   joinMappedPorts,
   joinRequiredPortForwards,
+  parseInstanceAddressPayload,
   personalSign,
   resolveManifestSource,
   rootfsHealth,

package/styles.css

@@ -42,6 +42,11 @@
   --relay-surface: rgba(11, 14, 21, 0.55);
   --relay-surface-border: var(--relay-horizon);
   --relay-field-bg: rgba(11, 14, 21, 0.85);
+  /* Opaque on purpose. A select's drop-down takes the control's own colours on
+     the platforms that honour author styling, and it opens over the page rather
+     than over the panel - a translucent background would composite against
+     whatever is behind it and leave light text on a light list. */
+  --relay-menu-bg: var(--relay-deep-space);
   --relay-accent: var(--relay-coral);
   --relay-accent-contrast: #0b0e15;
   --relay-link: var(--relay-cyan);
@@ -81,6 +86,7 @@
   --relay-surface: rgba(20, 27, 46, 0.04);
   --relay-surface-border: #d9e0ec;
   --relay-field-bg: #ffffff;
+  --relay-menu-bg: #ffffff;
   --relay-accent: var(--relay-coral);
   --relay-accent-contrast: #ffffff;
   --relay-link: var(--relay-cyan);