@le-space/ui 0.9.2 → 0.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@le-space/ui",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "description": "Floating Aleph Relay Button UI components for Svelte and React.",
   "license": "MIT",
   "type": "module",
@@ -44,8 +44,8 @@
     "url": "https://github.com/NiKrause/relay-button/issues"
   },
   "dependencies": {
-    "@le-space/browser": "0.9.2",
-    "@le-space/core": "0.9.2",
+    "@le-space/browser": "0.9.4",
+    "@le-space/core": "0.9.4",
     "viem": "^2.53.1"
   },
   "peerDependencies": {

package/react/index.d.ts

@@ -424,6 +424,7 @@ declare class SponsorRelayController {
     private emit;
     private trace;
     private patch;
+    private lastProgressLabel;
     private emitProgress;
     private configureRelayBootstrapRegistration;
     private probeRelayReachableOverProxy;

package/react/index.js

@@ -96,7 +96,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.9.2";
+var UI_PACKAGE_VERSION = "0.9.4";
 
 // src/shared/format.ts
 function shortHash(value, head = 8, tail = 6) {
@@ -2830,7 +2830,8 @@ function browserMultiaddrTransport(addr) {
 }
 function selectCompactRelayBootstrapMultiaddrs(addrs, limit = DEFAULT_BOOTSTRAP_COMPACT_MULTIADDR_LIMIT) {
   const entries = filterPublicMultiaddrs(addrs, {
-    browserDialableOnly: true
+    browserDialableOnly: true,
+    allowInsecureWebSockets: true
   }).map((addr, index) => ({
     addr,
     index,
@@ -2900,12 +2901,23 @@ function isLocalHostname(host) {
 function hasPeerId(addr) {
   return splitMultiaddr(addr).includes("p2p");
 }
-function isBrowserDialableMultiaddr(addr) {
+function isSecureWebSocketMultiaddr(addr) {
+  const parts = splitMultiaddr(addr.toLowerCase());
+  if (parts.includes("wss")) return true;
+  const wsIndex = parts.indexOf("ws");
+  return wsIndex > 0 && parts.lastIndexOf("tls", wsIndex) >= 0;
+}
+function isWebSocketMultiaddr(addr) {
+  const parts = splitMultiaddr(addr.toLowerCase());
+  return parts.includes("ws") || parts.includes("wss");
+}
+function isBrowserDialableMultiaddr(addr, options = {}) {
   const normalized = addr.toLowerCase();
   if (normalized.includes("/webtransport") || normalized.includes("/webrtc-direct")) {
     return normalized.includes("/certhash/");
   }
-  return normalized.includes("/ws") || normalized.includes("/wss");
+  if (!isWebSocketMultiaddr(addr)) return false;
+  return (options.allowInsecureWebSockets ?? false) || isSecureWebSocketMultiaddr(addr);
 }
 function dedupeMultiaddrs(addrs) {
   const seen = /* @__PURE__ */ new Set();
@@ -2939,7 +2951,9 @@ function filterPublicMultiaddrs(addrs, options = {}) {
   return dedupeMultiaddrs(addrs).filter((addr) => {
     if (!isPublicMultiaddr(addr)) return false;
     if (options.requirePeerId !== false && !hasPeerId(addr)) return false;
-    if (options.browserDialableOnly && !isBrowserDialableMultiaddr(addr)) {
+    if (options.browserDialableOnly && !isBrowserDialableMultiaddr(addr, {
+      allowInsecureWebSockets: options.allowInsecureWebSockets
+    })) {
       return false;
     }
     return true;
@@ -3054,7 +3068,8 @@ function buildRelayBootstrapPostContent(args) {
   const updatedAt = args.now ?? Date.now();
   const fullMultiaddrs = filterPublicMultiaddrs(args.multiaddrs);
   const fullBrowserMultiaddrs = args.browserMultiaddrs ? filterPublicMultiaddrs(args.browserMultiaddrs, {
-    browserDialableOnly: true
+    browserDialableOnly: true,
+    allowInsecureWebSockets: true
   }) : void 0;
   const compactMultiaddrs = selectCompactRelayBootstrapMultiaddrs(
     fullBrowserMultiaddrs && fullBrowserMultiaddrs.length > 0 ? fullBrowserMultiaddrs : fullMultiaddrs,
@@ -3136,7 +3151,8 @@ async function signRelayBootstrapAuthorization(args) {
 async function signRelayBootstrapProof(args) {
   const fullMultiaddrs = filterPublicMultiaddrs(args.multiaddrs);
   const fullBrowserMultiaddrs = args.browserMultiaddrs ? filterPublicMultiaddrs(args.browserMultiaddrs, {
-    browserDialableOnly: true
+    browserDialableOnly: true,
+    allowInsecureWebSockets: true
   }) : void 0;
   const compactMultiaddrs = selectCompactRelayBootstrapMultiaddrs(
     fullBrowserMultiaddrs && fullBrowserMultiaddrs.length > 0 ? fullBrowserMultiaddrs : fullMultiaddrs,
@@ -3938,12 +3954,30 @@ function validateUcanStoreBootstrapPackage(value) {
 function deploymentNoun(profile) {
   return profile === "ucan-store" ? "service" : "relay";
 }
+function describeRequest(input, init) {
+  const method = String(init?.method ?? "GET").toUpperCase();
+  const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : typeof input?.url === "string" ? input.url : "<unknown url>";
+  return `${method} ${url}`;
+}
+function deploymentFailureMessage(error, stage) {
+  const message = error instanceof Error ? error.message : String(error);
+  const step = String(stage ?? "").trim();
+  return step ? `${message} (while: ${step})` : message;
+}
 function asJsonFetch(input, init) {
-  return fetch(input, init).then(async (response) => ({
-    ok: response.ok,
-    status: response.status,
-    json: async () => await response.json()
-  }));
+  return fetch(input, init).then(
+    async (response) => ({
+      ok: response.ok,
+      status: response.status,
+      json: async () => await response.json()
+    }),
+    (error) => {
+      const reason = error instanceof Error ? error.message : String(error);
+      throw new Error(`${reason} (${describeRequest(input, init)})`, {
+        cause: error
+      });
+    }
+  );
 }
 function isConfirmedGuestSetupResult(value) {
   return Boolean(
@@ -4586,11 +4620,15 @@ var SponsorRelayController = class {
     };
     this.emit();
   }
+  lastProgressLabel = null;
   emitProgress(event) {
     const nextEvent = {
       ...event,
       timestamp: Date.now()
     };
+    if (nextEvent.stage !== "error") {
+      this.lastProgressLabel = nextEvent.label;
+    }
     this.trace(`progress:${nextEvent.stage}`, {
       label: nextEvent.label,
       progress: nextEvent.progress,
@@ -6507,10 +6545,15 @@ var SponsorRelayController = class {
         attemptErrors.length > 0 ? `All compatible CRNs failed. ${attemptErrors.join(" | ")}` : lastError?.message ?? "All compatible CRNs failed."
       );
     } catch (error) {
-      this.trace("deploy:error", error);
+      const message = deploymentFailureMessage(error, this.lastProgressLabel);
+      this.trace("deploy:error", {
+        message,
+        stage: this.lastProgressLabel,
+        error
+      });
       this.patch({
         busy: { deploying: false },
-        errorText: error instanceof Error ? error.message : String(error),
+        errorText: message,
         statusText: "Deployment failed"
       });
       this.emitProgress({
@@ -6518,7 +6561,7 @@ var SponsorRelayController = class {
         label: "Deployment failed",
         progress: 100,
         status: "error",
-        error: error instanceof Error ? error.message : String(error)
+        error: message
       });
     }
   }

package/shared/index.d.ts

@@ -480,7 +480,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.9.2";
+declare const UI_PACKAGE_VERSION = "0.9.4";
 
 interface RootfsRequiredPortForward {
     port: number;
@@ -516,6 +516,30 @@ 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;
 
+/**
+ * What a request was, for an error that otherwise says nothing.
+ *
+ * `fetch` rejects with a bare `TypeError: Failed to fetch` for every network
+ * failure — no URL, no method, no cause. Carried up through the deploy path
+ * that becomes "Relay Button deployment failed: Failed to fetch", which is
+ * where a run of this project ended with no way to tell which of a dozen calls
+ * had failed.
+ *
+ * Exported for its test; `init.method` is read defensively because a call site
+ * may pass none.
+ */
+declare function describeRequest(input: RequestInfo | URL, init?: RequestInit): string;
+/**
+ * The failure message, with the step it happened in.
+ *
+ * A deployment walks two dozen calls across Aleph, a CRN and a guest VM. When
+ * one of them fails with a message that names none of them — `Failed to fetch`
+ * is the standard case — the step is the only thing that narrows it down, and
+ * it is already known.
+ *
+ * Exported for its test.
+ */
+declare function deploymentFailureMessage(error: unknown, stage: string | null | undefined): string;
 /**
  * Normalise the two address documents in the fleet into one list of groups.
  *
@@ -550,6 +574,7 @@ declare class SponsorRelayController {
     private emit;
     private trace;
     private patch;
+    private lastProgressLabel;
     private emitProgress;
     private configureRelayBootstrapRegistration;
     private probeRelayReachableOverProxy;
@@ -603,4 +628,4 @@ interface DeploymentProgressEmitter {
 }
 declare function createDeploymentProgressEmitter(): DeploymentProgressEmitter;
 
-export { type CompactBootstrapRegistrationRecord, type CompactInstanceDetails, type CompactInstanceRecord, DEFAULT_FAB_CORNER, 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, FAB_DRAG_THRESHOLD, FAB_EDGE_MARGIN, type FabCorner, type FabPanelPlacement, type FabPanelSide, type FabPlacement, type FabPoint, type FabSize, type FabViewport, 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, anchorPanelToLauncher, buildSshCommand, clampToViewport, connectWallet, createDeploymentProgressEmitter, createSponsorRelayController, dragExceedsThreshold, formatDateTime, formatNumber, formatTierSpecLabel, getEthereumProvider, joinMappedPorts, joinRequiredPortForwards, parseInstanceAddressPayload, personalSign, readStoredPosition, resolveCornerPlacement, resolveManifestSource, rootfsHealth, shortHash, toChecksumAddress, watchWallet, writeStoredPosition };
+export { type CompactBootstrapRegistrationRecord, type CompactInstanceDetails, type CompactInstanceRecord, DEFAULT_FAB_CORNER, 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, FAB_DRAG_THRESHOLD, FAB_EDGE_MARGIN, type FabCorner, type FabPanelPlacement, type FabPanelSide, type FabPlacement, type FabPoint, type FabSize, type FabViewport, 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, anchorPanelToLauncher, buildSshCommand, clampToViewport, connectWallet, createDeploymentProgressEmitter, createSponsorRelayController, deploymentFailureMessage, describeRequest, dragExceedsThreshold, formatDateTime, formatNumber, formatTierSpecLabel, getEthereumProvider, joinMappedPorts, joinRequiredPortForwards, parseInstanceAddressPayload, personalSign, readStoredPosition, resolveCornerPlacement, resolveManifestSource, rootfsHealth, shortHash, toChecksumAddress, watchWallet, writeStoredPosition };

package/shared/index.js

@@ -96,7 +96,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.9.2";
+var UI_PACKAGE_VERSION = "0.9.4";
 
 // src/shared/format.ts
 function shortHash(value, head = 8, tail = 6) {
@@ -2830,7 +2830,8 @@ function browserMultiaddrTransport(addr) {
 }
 function selectCompactRelayBootstrapMultiaddrs(addrs, limit = DEFAULT_BOOTSTRAP_COMPACT_MULTIADDR_LIMIT) {
   const entries = filterPublicMultiaddrs(addrs, {
-    browserDialableOnly: true
+    browserDialableOnly: true,
+    allowInsecureWebSockets: true
   }).map((addr, index) => ({
     addr,
     index,
@@ -2900,12 +2901,23 @@ function isLocalHostname(host) {
 function hasPeerId(addr) {
   return splitMultiaddr(addr).includes("p2p");
 }
-function isBrowserDialableMultiaddr(addr) {
+function isSecureWebSocketMultiaddr(addr) {
+  const parts = splitMultiaddr(addr.toLowerCase());
+  if (parts.includes("wss")) return true;
+  const wsIndex = parts.indexOf("ws");
+  return wsIndex > 0 && parts.lastIndexOf("tls", wsIndex) >= 0;
+}
+function isWebSocketMultiaddr(addr) {
+  const parts = splitMultiaddr(addr.toLowerCase());
+  return parts.includes("ws") || parts.includes("wss");
+}
+function isBrowserDialableMultiaddr(addr, options = {}) {
   const normalized = addr.toLowerCase();
   if (normalized.includes("/webtransport") || normalized.includes("/webrtc-direct")) {
     return normalized.includes("/certhash/");
   }
-  return normalized.includes("/ws") || normalized.includes("/wss");
+  if (!isWebSocketMultiaddr(addr)) return false;
+  return (options.allowInsecureWebSockets ?? false) || isSecureWebSocketMultiaddr(addr);
 }
 function dedupeMultiaddrs(addrs) {
   const seen = /* @__PURE__ */ new Set();
@@ -2939,7 +2951,9 @@ function filterPublicMultiaddrs(addrs, options = {}) {
   return dedupeMultiaddrs(addrs).filter((addr) => {
     if (!isPublicMultiaddr(addr)) return false;
     if (options.requirePeerId !== false && !hasPeerId(addr)) return false;
-    if (options.browserDialableOnly && !isBrowserDialableMultiaddr(addr)) {
+    if (options.browserDialableOnly && !isBrowserDialableMultiaddr(addr, {
+      allowInsecureWebSockets: options.allowInsecureWebSockets
+    })) {
       return false;
     }
     return true;
@@ -3054,7 +3068,8 @@ function buildRelayBootstrapPostContent(args) {
   const updatedAt = args.now ?? Date.now();
   const fullMultiaddrs = filterPublicMultiaddrs(args.multiaddrs);
   const fullBrowserMultiaddrs = args.browserMultiaddrs ? filterPublicMultiaddrs(args.browserMultiaddrs, {
-    browserDialableOnly: true
+    browserDialableOnly: true,
+    allowInsecureWebSockets: true
   }) : void 0;
   const compactMultiaddrs = selectCompactRelayBootstrapMultiaddrs(
     fullBrowserMultiaddrs && fullBrowserMultiaddrs.length > 0 ? fullBrowserMultiaddrs : fullMultiaddrs,
@@ -3136,7 +3151,8 @@ async function signRelayBootstrapAuthorization(args) {
 async function signRelayBootstrapProof(args) {
   const fullMultiaddrs = filterPublicMultiaddrs(args.multiaddrs);
   const fullBrowserMultiaddrs = args.browserMultiaddrs ? filterPublicMultiaddrs(args.browserMultiaddrs, {
-    browserDialableOnly: true
+    browserDialableOnly: true,
+    allowInsecureWebSockets: true
   }) : void 0;
   const compactMultiaddrs = selectCompactRelayBootstrapMultiaddrs(
     fullBrowserMultiaddrs && fullBrowserMultiaddrs.length > 0 ? fullBrowserMultiaddrs : fullMultiaddrs,
@@ -3938,12 +3954,30 @@ function validateUcanStoreBootstrapPackage(value) {
 function deploymentNoun(profile) {
   return profile === "ucan-store" ? "service" : "relay";
 }
+function describeRequest(input, init) {
+  const method = String(init?.method ?? "GET").toUpperCase();
+  const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : typeof input?.url === "string" ? input.url : "<unknown url>";
+  return `${method} ${url}`;
+}
+function deploymentFailureMessage(error, stage) {
+  const message = error instanceof Error ? error.message : String(error);
+  const step = String(stage ?? "").trim();
+  return step ? `${message} (while: ${step})` : message;
+}
 function asJsonFetch(input, init) {
-  return fetch(input, init).then(async (response) => ({
-    ok: response.ok,
-    status: response.status,
-    json: async () => await response.json()
-  }));
+  return fetch(input, init).then(
+    async (response) => ({
+      ok: response.ok,
+      status: response.status,
+      json: async () => await response.json()
+    }),
+    (error) => {
+      const reason = error instanceof Error ? error.message : String(error);
+      throw new Error(`${reason} (${describeRequest(input, init)})`, {
+        cause: error
+      });
+    }
+  );
 }
 function isConfirmedGuestSetupResult(value) {
   return Boolean(
@@ -4586,11 +4620,15 @@ var SponsorRelayController = class {
     };
     this.emit();
   }
+  lastProgressLabel = null;
   emitProgress(event) {
     const nextEvent = {
       ...event,
       timestamp: Date.now()
     };
+    if (nextEvent.stage !== "error") {
+      this.lastProgressLabel = nextEvent.label;
+    }
     this.trace(`progress:${nextEvent.stage}`, {
       label: nextEvent.label,
       progress: nextEvent.progress,
@@ -6507,10 +6545,15 @@ var SponsorRelayController = class {
         attemptErrors.length > 0 ? `All compatible CRNs failed. ${attemptErrors.join(" | ")}` : lastError?.message ?? "All compatible CRNs failed."
       );
     } catch (error) {
-      this.trace("deploy:error", error);
+      const message = deploymentFailureMessage(error, this.lastProgressLabel);
+      this.trace("deploy:error", {
+        message,
+        stage: this.lastProgressLabel,
+        error
+      });
       this.patch({
         busy: { deploying: false },
-        errorText: error instanceof Error ? error.message : String(error),
+        errorText: message,
         statusText: "Deployment failed"
       });
       this.emitProgress({
@@ -6518,7 +6561,7 @@ var SponsorRelayController = class {
         label: "Deployment failed",
         progress: 100,
         status: "error",
-        error: error instanceof Error ? error.message : String(error)
+        error: message
       });
     }
   }
@@ -6808,6 +6851,8 @@ export {
   connectWallet,
   createDeploymentProgressEmitter,
   createSponsorRelayController,
+  deploymentFailureMessage,
+  describeRequest,
   dragExceedsThreshold,
   formatDateTime,
   formatNumber,

package/svelte/SponsorRelayFab.svelte

@@ -212,8 +212,19 @@ export let apiHosts = undefined
       state = next
     })
 
-    await controller.init()
+    // Before `controller.init()`, not after it, and the order is the whole
+    // feature. Placement reads storage and the viewport — no network — while
+    // `init()` fetches the manifest and the account's instances. Behind that
+    // await, `placement` stays null for as long as Aleph takes to answer, and
+    // `handleDragStart` returns early on a null placement: the launcher simply
+    // cannot be dragged. Measured in simple-todo: still immovable 20 seconds
+    // after the app was ready, with pointerdown, eight pointermoves and
+    // pointerup all arriving at the button.
+    //
+    // The React build never had this — it resolves placement in its own effect.
     initPlacement()
+
+    await controller.init()
     window.addEventListener('resize', handleViewportChange)
     window.addEventListener('orientationchange', handleViewportChange)
     return () => {