@le-space/ui 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@le-space/ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Floating Aleph sponsor relay UI components for Svelte and React.",
   "license": "MIT",
   "type": "module",
@@ -36,8 +36,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@le-space/browser": "0.4.0",
-    "@le-space/core": "0.4.0",
+    "@le-space/browser": "0.4.1",
+    "@le-space/core": "0.4.1",
     "viem": "^2.38.5"
   },
   "peerDependencies": {

package/react/index.d.ts

@@ -189,7 +189,6 @@ type DeploymentProgressListener = (event: DeploymentProgressEvent) => void;
 
 type SponsorRelayHealthTone = 'ok' | 'caution' | 'error' | 'idle';
 interface SponsorRelayProps {
-    libp2p?: unknown;
     debug?: boolean;
     manifestUrl?: string;
     manifestJson?: string;
@@ -224,16 +223,6 @@ interface SponsorRelayRootfsHealth {
     label: string;
     detail: string | null;
 }
-interface RelayPingState {
-    tone: SponsorRelayHealthTone;
-    sent: boolean;
-    received: boolean;
-    lastPeerId: string | null;
-    lastLatencyMs: number | null;
-    lastSentAt: number | null;
-    lastReceivedAt: number | null;
-    error: string | null;
-}
 interface CompactInstanceDetails {
     messageStatus: string;
     allocationSource: string | null;
@@ -303,7 +292,6 @@ interface SponsorRelayState {
     instances: CompactInstanceRecord[];
     bootstrapRegistrations: CompactBootstrapRegistrationRecord[];
     orphanBootstrapRegistrations: CompactBootstrapRegistrationRecord[];
-    relayPing: RelayPingState;
     lastDeploymentHash: string | null;
     deploymentProgress: DeploymentProgressEvent;
 }
@@ -314,7 +302,6 @@ declare class SponsorRelayController {
     private subscribers;
     private client;
     private refreshTimer;
-    private pingTimer;
     private manifestRefreshTimer;
     private stopWalletWatch;
     private props;
@@ -354,7 +341,6 @@ declare class SponsorRelayController {
     connectWallet(): Promise<void>;
     private refreshWalletDerivedState;
     refresh(): Promise<void>;
-    refreshRelayPing(): Promise<void>;
     deploy(): Promise<void>;
     deleteInstance(instanceHash: string): Promise<void>;
     deleteBootstrapRegistration(registrationHash: string): Promise<void>;

package/react/index.js

@@ -10,16 +10,6 @@ var ROOTFS_MISSING_STATE = {
   label: "manifest missing",
   detail: "Provide a manifest URL or paste manifest JSON."
 };
-var RELAY_PING_IDLE_STATE = {
-  tone: "idle",
-  sent: false,
-  received: false,
-  lastPeerId: null,
-  lastLatencyMs: null,
-  lastSentAt: null,
-  lastReceivedAt: null,
-  error: null
-};
 var IDLE_DEPLOYMENT_PROGRESS = {
   stage: "idle",
   label: "Ready",
@@ -31,7 +21,6 @@ var IDLE_DEPLOYMENT_PROGRESS = {
   timestamp: Date.now()
 };
 var REFRESH_INTERVAL_MS = 3e4;
-var RELAY_PING_INTERVAL_MS = 2e4;
 var MANIFEST_SOURCE_REFRESH_DEBOUNCE_MS = 400;
 var INSTANCE_RUNTIME_STALE_REFRESH_MS = 5 * 6e4;
 var STALE_INSTANCE_ALLOCATION_COOLDOWN_MS = 5 * 60 * 1e3;
@@ -39,7 +28,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.4.0";
+var UI_PACKAGE_VERSION = "0.4.1";
 
 // src/shared/format.ts
 function shortHash(value, head = 8, tail = 6) {
@@ -2562,7 +2551,7 @@ async function waitForRelayBootstrapRegistration(args) {
       return false;
     });
     if (match?.content) {
-      return {
+      const visibleRegistration = {
         itemHash: match.itemHash ?? null,
         hash: match.hash ?? null,
         sender: typeof match.address === "string" ? match.address : null,
@@ -2571,7 +2560,10 @@ async function waitForRelayBootstrapRegistration(args) {
         multiaddrs: Array.isArray(match.content.multiaddrs) ? match.content.multiaddrs : [],
         browserMultiaddrs: Array.isArray(match.content.browserMultiaddrs) ? match.content.browserMultiaddrs : []
       };
+      args.onAttempt?.(visibleRegistration, attempt + 1, attempts);
+      return visibleRegistration;
     }
+    args.onAttempt?.(null, attempt + 1, attempts);
     if (attempt < attempts - 1) {
       await sleep(delayMs);
     }
@@ -2944,7 +2936,6 @@ function defaultState(props = {}) {
     instances: [],
     bootstrapRegistrations: [],
     orphanBootstrapRegistrations: [],
-    relayPing: RELAY_PING_IDLE_STATE,
     lastDeploymentHash: null,
     deploymentProgress: IDLE_DEPLOYMENT_PROGRESS
   };
@@ -3171,57 +3162,6 @@ function compatibleCrnsForTier(crns, state) {
   );
   return filterDeployableCrns(crns, { spec });
 }
-async function pingPeer(libp2p) {
-  if (!libp2p || typeof libp2p !== "object") {
-    return RELAY_PING_IDLE_STATE;
-  }
-  const candidate = libp2p;
-  const peers = candidate.getPeers?.() ?? [];
-  const firstPeer = peers[0];
-  if (!firstPeer) {
-    return {
-      ...RELAY_PING_IDLE_STATE,
-      tone: "caution",
-      error: "No connected relay peers available."
-    };
-  }
-  const sentAt = Date.now();
-  try {
-    const pingFn = candidate.services?.ping?.ping?.bind(candidate.services.ping) ?? candidate.ping?.bind(candidate);
-    if (!pingFn) {
-      return {
-        ...RELAY_PING_IDLE_STATE,
-        tone: "caution",
-        sent: true,
-        lastPeerId: String(firstPeer),
-        lastSentAt: sentAt,
-        error: "libp2p ping service not available."
-      };
-    }
-    const latency = await pingFn(firstPeer);
-    return {
-      tone: "ok",
-      sent: true,
-      received: true,
-      lastPeerId: String(firstPeer),
-      lastLatencyMs: Number(latency),
-      lastSentAt: sentAt,
-      lastReceivedAt: Date.now(),
-      error: null
-    };
-  } catch (error) {
-    return {
-      tone: "error",
-      sent: true,
-      received: false,
-      lastPeerId: String(firstPeer),
-      lastLatencyMs: null,
-      lastSentAt: sentAt,
-      lastReceivedAt: null,
-      error: error instanceof Error ? error.message : String(error)
-    };
-  }
-}
 var UI_DEPLOY_WAIT_ATTEMPTS = 60;
 var UI_DEPLOY_WAIT_DELAY_MS = 5e3;
 var UI_RUNTIME_WAIT_ATTEMPTS = 40;
@@ -3252,7 +3192,6 @@ var SponsorRelayController = class {
   subscribers = /* @__PURE__ */ new Set();
   client;
   refreshTimer = null;
-  pingTimer = null;
   manifestRefreshTimer = null;
   stopWalletWatch = null;
   props;
@@ -3308,8 +3247,7 @@ var SponsorRelayController = class {
       ...patch,
       busy: patch.busy ? { ...this.state.busy, ...patch.busy } : this.state.busy,
       wallet: patch.wallet ? { ...this.state.wallet, ...patch.wallet } : this.state.wallet,
-      pricingSummary: patch.pricingSummary ? { ...this.state.pricingSummary, ...patch.pricingSummary } : this.state.pricingSummary,
-      relayPing: patch.relayPing ? { ...this.state.relayPing, ...patch.relayPing } : this.state.relayPing
+      pricingSummary: patch.pricingSummary ? { ...this.state.pricingSummary, ...patch.pricingSummary } : this.state.pricingSummary
     };
     this.emit();
   }
@@ -3362,7 +3300,17 @@ var SponsorRelayController = class {
         fetch: (url, init) => fetch(url, init),
         attempts: 15,
         delayMs: 4e3,
-        httpTimeoutMs: 1e4
+        httpTimeoutMs: 1e4,
+        onAttempt: (result, attempt, attempts) => {
+          this.emitProgress({
+            stage: "deployment-confirmed",
+            label: "Waiting for guest setup",
+            progress: 93,
+            status: result.ok ? "success" : "info",
+            itemHash: args.itemHash,
+            detail: result.ok ? `Setup endpoint ${attempt}/${attempts}: ready at http://${args.runtime.hostIpv4}:${setupPort}/health.` : `Setup endpoint ${attempt}/${attempts}: waiting for http://${args.runtime.hostIpv4}:${setupPort}/health.`
+          });
+        }
       });
       if (!setupHealth.ok) {
         throw new Error(
@@ -3491,6 +3439,14 @@ var SponsorRelayController = class {
             metadata?.browser_bootstrap_multiaddrs
           ) ? metadata.browser_bootstrap_multiaddrs.length : 0
         });
+        this.emitProgress({
+          stage: "publishing-bootstrap",
+          label: "Reading relay multiaddrs",
+          progress: 95,
+          status: result.ready ? "success" : "info",
+          itemHash: args.itemHash,
+          detail: result.ready ? `Relay metadata ${result.attempt}/${result.attempts}: public multiaddrs available.` : `Relay metadata ${result.attempt}/${result.attempts}: waiting for the relay to report public multiaddrs.`
+        });
       }
     });
     if (!relayMetadata) {
@@ -3516,7 +3472,17 @@ var SponsorRelayController = class {
       fetch: asJsonFetch,
       apiHost: this.client.apiHost,
       attempts: 24,
-      delayMs: 2500
+      delayMs: 2500,
+      onAttempt: (match, attempt, attempts) => {
+        this.emitProgress({
+          stage: "publishing-bootstrap",
+          label: "Waiting for guest bootstrap registration",
+          progress: 97,
+          status: match ? "success" : "info",
+          itemHash: args.itemHash,
+          detail: match ? `Guest bootstrap registration ${attempt}/${attempts}: visible on Aleph.` : `Guest bootstrap registration ${attempt}/${attempts}: still waiting for the relay VM registration on Aleph.`
+        });
+      }
     });
     this.trace("deploy:bootstrap-registration-visible", {
       itemHash: args.itemHash,
@@ -3567,7 +3533,17 @@ var SponsorRelayController = class {
         fetch: asJsonFetch,
         apiHost: this.client.apiHost,
         attempts: 24,
-        delayMs: 2500
+        delayMs: 2500,
+        onAttempt: (match, attempt, attempts) => {
+          this.emitProgress({
+            stage: "publishing-bootstrap",
+            label: "Waiting for bootstrap fallback",
+            progress: 98,
+            status: match ? "success" : "warning",
+            itemHash: args.itemHash,
+            detail: match ? `Bootstrap fallback ${attempt}/${attempts}: visible on Aleph.` : `Bootstrap fallback ${attempt}/${attempts}: waiting for the browser-published registration on Aleph.`
+          });
+        }
       });
       this.trace("deploy:bootstrap-registration-fallback-visible", {
         itemHash: args.itemHash,
@@ -3743,16 +3719,11 @@ var SponsorRelayController = class {
     this.refreshTimer = setInterval(() => {
       void this.refresh();
     }, REFRESH_INTERVAL_MS);
-    this.pingTimer = setInterval(() => {
-      void this.refreshRelayPing();
-    }, RELAY_PING_INTERVAL_MS);
-    await this.refreshRelayPing();
     this.patch({ ready: true });
     this.trace("init:ready");
   }
   destroy() {
     if (this.refreshTimer) clearInterval(this.refreshTimer);
-    if (this.pingTimer) clearInterval(this.pingTimer);
     if (this.manifestRefreshTimer) clearTimeout(this.manifestRefreshTimer);
     this.stopWalletWatch?.();
   }
@@ -4047,11 +4018,6 @@ var SponsorRelayController = class {
       });
     }
   }
-  async refreshRelayPing() {
-    const relayPing = await pingPeer(this.props.libp2p);
-    this.patch({ relayPing });
-    this.trace("libp2p:relay-ping", relayPing);
-  }
   async deploy() {
     this.trace("deploy:start", {
       wallet: this.state.wallet.address,
@@ -4168,7 +4134,7 @@ var SponsorRelayController = class {
             fetch: (url, init) => fetch(url, init),
             attempts: UI_DEPLOY_WAIT_ATTEMPTS,
             delayMs: UI_DEPLOY_WAIT_DELAY_MS,
-            onAttempt: (inspectionResult) => {
+            onAttempt: (inspectionResult, attempt, attempts) => {
               if (inspectionResult.status === "processed") {
                 this.emitProgress({
                   stage: "deployment-confirmed",
@@ -4176,7 +4142,7 @@ var SponsorRelayController = class {
                   progress: 82,
                   status: "success",
                   itemHash: result.itemHash,
-                  detail: "Aleph processed the instance message."
+                  detail: `Aleph processing ${attempt}/${attempts}: instance message processed.`
                 });
                 return;
               }
@@ -4198,7 +4164,7 @@ var SponsorRelayController = class {
                 progress: 76,
                 status: "info",
                 itemHash: result.itemHash,
-                detail: "Deployment submitted. Waiting for Aleph to process the instance message."
+                detail: `Aleph processing ${attempt}/${attempts}: waiting for the instance message to be processed.`
               });
             }
           });
@@ -4264,7 +4230,7 @@ var SponsorRelayController = class {
             crnListUrl: this.props.crnListUrl,
             attempts: UI_RUNTIME_WAIT_ATTEMPTS,
             delayMs: UI_RUNTIME_WAIT_DELAY_MS,
-            onAttempt: (runtime2) => {
+            onAttempt: (runtime2, attempt, attempts) => {
               if (runtime2.hostIpv4 && Object.keys(runtime2.mappedPorts ?? {}).length > 0) {
                 this.emitProgress({
                   stage: "deployment-confirmed",
@@ -4272,7 +4238,7 @@ var SponsorRelayController = class {
                   progress: 92,
                   status: "info",
                   itemHash: result.itemHash,
-                  detail: "Runtime networking and mapped ports are now available. Finishing relay setup and bootstrap verification."
+                  detail: `Runtime ${attempt}/${attempts}: networking and mapped ports are now available.`
                 });
                 return;
               }
@@ -4282,7 +4248,7 @@ var SponsorRelayController = class {
                 progress: 90,
                 status: "warning",
                 itemHash: result.itemHash,
-                detail: runtime2.diagnostics?.reason ?? "Waiting for CRN runtime networking and mapped ports."
+                detail: runtime2.diagnostics?.reason ? `Runtime ${attempt}/${attempts}: ${runtime2.diagnostics.reason}` : `Runtime ${attempt}/${attempts}: waiting for CRN runtime networking and mapped ports.`
               });
             }
           });
@@ -4589,10 +4555,9 @@ function useSponsorRelayController(props) {
   );
   useEffect(() => {
     controller.updateProps({
-      libp2p: props.libp2p,
       debug: props.debug
     });
-  }, [controller, props.debug, props.libp2p]);
+  }, [controller, props.debug]);
   useEffect(() => {
     void controller.init();
     return () => {
@@ -4633,6 +4598,53 @@ var fieldStyle = {
   fontSize: "0.98rem",
   lineHeight: 1.45
 };
+var secondaryButtonStyle = {
+  borderRadius: "0.95rem",
+  border: "1px solid rgba(255,255,255,0.22)",
+  background: "rgba(255,255,255,0.10)",
+  color: "#f8fafc",
+  padding: "0.72rem 0.95rem",
+  fontFamily: '"DM Sans", "Inter", sans-serif',
+  fontSize: "0.92rem",
+  fontWeight: 700,
+  lineHeight: 1.1,
+  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
+  backdropFilter: "blur(8px)"
+};
+var primaryButtonStyle = {
+  borderRadius: "0.95rem",
+  border: "1px solid rgba(251, 191, 36, 0.42)",
+  background: "linear-gradient(135deg, #f6c453 0%, #f59e0b 100%)",
+  color: "#281606",
+  padding: "0.82rem 1rem",
+  fontFamily: '"DM Sans", "Inter", sans-serif',
+  fontSize: "0.96rem",
+  fontWeight: 800,
+  lineHeight: 1.1,
+  boxShadow: "0 10px 24px rgba(245, 158, 11, 0.24)"
+};
+var dangerButtonStyle = {
+  borderRadius: "0.95rem",
+  border: "1px solid rgba(248, 113, 113, 0.45)",
+  background: "rgba(239, 68, 68, 0.18)",
+  color: "#ffe2e2",
+  padding: "0.72rem 0.95rem",
+  fontFamily: '"DM Sans", "Inter", sans-serif',
+  fontSize: "0.9rem",
+  fontWeight: 700,
+  lineHeight: 1.1
+};
+var warningButtonStyle = {
+  borderRadius: "0.95rem",
+  border: "1px solid rgba(251, 146, 60, 0.4)",
+  background: "rgba(251, 146, 60, 0.16)",
+  color: "#fed7aa",
+  padding: "0.72rem 0.95rem",
+  fontFamily: '"DM Sans", "Inter", sans-serif',
+  fontSize: "0.9rem",
+  fontWeight: 700,
+  lineHeight: 1.1
+};
 var themedLauncherBackground = "linear-gradient(135deg, var(--le-space-sponsor-relay-launcher-start, #4f46e5) 0%, var(--le-space-sponsor-relay-launcher-end, #6366f1) 100%)";
 var themedLauncherBorder = "var(--le-space-sponsor-relay-launcher-border, rgba(199, 210, 254, 0.42))";
 var themedLauncherBadgeBackground = "var(--le-space-sponsor-relay-launcher-badge-bg, rgba(49, 46, 129, 0.92))";
@@ -5038,7 +5050,15 @@ function SponsorRelayFab(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void controller.refresh(), children: state.busy.refreshing ? "Syncing" : "Refresh" })
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  style: secondaryButtonStyle,
+                  onClick: () => void controller.refresh(),
+                  children: state.busy.refreshing ? "Syncing" : "Refresh"
+                }
+              )
             ]
           }
         ),
@@ -5397,7 +5417,7 @@ function SponsorRelayFab(props) {
           {
             type: "button",
             onClick: () => void (state.wallet.connected ? controller.deploy() : controller.connectWallet()),
-            style: { width: "100%", marginTop: "1rem" },
+            style: { ...primaryButtonStyle, width: "100%", marginTop: "1rem" },
             children: state.wallet.connected ? state.busy.deploying ? "Deploying\u2026" : "Deploy Relay" : "Connect MetaMask"
           }
         ),
@@ -5454,7 +5474,7 @@ function SponsorRelayFab(props) {
                                   }
                                 }
                               ),
-                              "Registration confirmed"
+                              "Aleph bootstrap registered"
                             ]
                           }
                         ) : null
@@ -5514,6 +5534,7 @@ function SponsorRelayFab(props) {
                           "button",
                           {
                             type: "button",
+                            style: dangerButtonStyle,
                             onClick: () => void controller.deleteInstance(
                               entry.instance.item_hash
                             ),
@@ -5579,6 +5600,7 @@ function SponsorRelayFab(props) {
                               "button",
                               {
                                 type: "button",
+                                style: warningButtonStyle,
                                 disabled: !registrationHash || state.busy.deletingRegistrationHash === registrationHash,
                                 onClick: () => registrationHash ? void controller.deleteBootstrapRegistration(
                                   registrationHash

package/shared/index.d.ts

@@ -187,7 +187,6 @@ type DeploymentProgressListener = (event: DeploymentProgressEvent) => void;
 
 type SponsorRelayHealthTone = 'ok' | 'caution' | 'error' | 'idle';
 interface SponsorRelayProps {
-    libp2p?: unknown;
     debug?: boolean;
     manifestUrl?: string;
     manifestJson?: string;
@@ -222,16 +221,6 @@ interface SponsorRelayRootfsHealth {
     label: string;
     detail: string | null;
 }
-interface RelayPingState {
-    tone: SponsorRelayHealthTone;
-    sent: boolean;
-    received: boolean;
-    lastPeerId: string | null;
-    lastLatencyMs: number | null;
-    lastSentAt: number | null;
-    lastReceivedAt: number | null;
-    error: string | null;
-}
 interface CompactInstanceDetails {
     messageStatus: string;
     allocationSource: string | null;
@@ -301,7 +290,6 @@ interface SponsorRelayState {
     instances: CompactInstanceRecord[];
     bootstrapRegistrations: CompactBootstrapRegistrationRecord[];
     orphanBootstrapRegistrations: CompactBootstrapRegistrationRecord[];
-    relayPing: RelayPingState;
     lastDeploymentHash: string | null;
     deploymentProgress: DeploymentProgressEvent;
 }
@@ -311,10 +299,8 @@ declare const DEFAULT_INSTANCE_NAME = "sponsor-relay";
 declare const DEFAULT_MANIFEST_URL = "./rootfs-manifest.json";
 declare const DEFAULT_TIER_ID = "tier-1";
 declare const ROOTFS_MISSING_STATE: SponsorRelayRootfsHealth;
-declare const RELAY_PING_IDLE_STATE: RelayPingState;
 declare const IDLE_DEPLOYMENT_PROGRESS: DeploymentProgressEvent;
 declare const REFRESH_INTERVAL_MS = 30000;
-declare const RELAY_PING_INTERVAL_MS = 20000;
 declare const MANIFEST_SOURCE_REFRESH_DEBOUNCE_MS = 400;
 declare const INSTANCE_RUNTIME_READY_REFRESH_MS = 30000;
 declare const INSTANCE_RUNTIME_PENDING_REFRESH_MS = 45000;
@@ -323,7 +309,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.4.0";
+declare const UI_PACKAGE_VERSION = "0.4.1";
 
 interface RootfsRequiredPortForward {
     port: number;
@@ -364,7 +350,6 @@ declare class SponsorRelayController {
     private subscribers;
     private client;
     private refreshTimer;
-    private pingTimer;
     private manifestRefreshTimer;
     private stopWalletWatch;
     private props;
@@ -404,7 +389,6 @@ declare class SponsorRelayController {
     connectWallet(): Promise<void>;
     private refreshWalletDerivedState;
     refresh(): Promise<void>;
-    refreshRelayPing(): Promise<void>;
     deploy(): Promise<void>;
     deleteInstance(instanceHash: string): Promise<void>;
     deleteBootstrapRegistration(registrationHash: string): Promise<void>;
@@ -418,4 +402,4 @@ interface DeploymentProgressEmitter {
 }
 declare function createDeploymentProgressEmitter(): DeploymentProgressEmitter;
 
-export { type CompactBootstrapRegistrationRecord, type CompactInstanceDetails, type CompactInstanceRecord, DEFAULT_INSTANCE_NAME, DEFAULT_MANIFEST_URL, DEFAULT_TIER_ID, 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, RELAY_PING_IDLE_STATE, RELAY_PING_INTERVAL_MS, ROOTFS_MISSING_STATE, type RelayPingState, STALE_INSTANCE_ALLOCATION_COOLDOWN_MS, SponsorRelayController, type SponsorRelayHealthTone, type SponsorRelayPricingSummary, type SponsorRelayProps, type SponsorRelayRootfsHealth, type SponsorRelayState, type SponsorRelaySubscriber, type SponsorRelayWalletState, UI_PACKAGE_VERSION, buildSshCommand, connectWallet, createDeploymentProgressEmitter, createSponsorRelayController, formatDateTime, formatNumber, formatTierSpecLabel, getEthereumProvider, joinMappedPorts, joinRequiredPortForwards, personalSign, resolveManifestSource, shortHash, toChecksumAddress, watchWallet };
+export { type CompactBootstrapRegistrationRecord, type CompactInstanceDetails, type CompactInstanceRecord, DEFAULT_INSTANCE_NAME, DEFAULT_MANIFEST_URL, DEFAULT_TIER_ID, 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 SponsorRelayWalletState, UI_PACKAGE_VERSION, buildSshCommand, connectWallet, createDeploymentProgressEmitter, createSponsorRelayController, formatDateTime, formatNumber, formatTierSpecLabel, getEthereumProvider, joinMappedPorts, joinRequiredPortForwards, personalSign, resolveManifestSource, shortHash, toChecksumAddress, watchWallet };

package/shared/index.js

@@ -7,16 +7,6 @@ var ROOTFS_MISSING_STATE = {
   label: "manifest missing",
   detail: "Provide a manifest URL or paste manifest JSON."
 };
-var RELAY_PING_IDLE_STATE = {
-  tone: "idle",
-  sent: false,
-  received: false,
-  lastPeerId: null,
-  lastLatencyMs: null,
-  lastSentAt: null,
-  lastReceivedAt: null,
-  error: null
-};
 var IDLE_DEPLOYMENT_PROGRESS = {
   stage: "idle",
   label: "Ready",
@@ -28,7 +18,6 @@ var IDLE_DEPLOYMENT_PROGRESS = {
   timestamp: Date.now()
 };
 var REFRESH_INTERVAL_MS = 3e4;
-var RELAY_PING_INTERVAL_MS = 2e4;
 var MANIFEST_SOURCE_REFRESH_DEBOUNCE_MS = 400;
 var INSTANCE_RUNTIME_READY_REFRESH_MS = 3e4;
 var INSTANCE_RUNTIME_PENDING_REFRESH_MS = 45e3;
@@ -38,7 +27,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.4.0";
+var UI_PACKAGE_VERSION = "0.4.1";
 
 // src/shared/format.ts
 function shortHash(value, head = 8, tail = 6) {
@@ -2561,7 +2550,7 @@ async function waitForRelayBootstrapRegistration(args) {
       return false;
     });
     if (match?.content) {
-      return {
+      const visibleRegistration = {
         itemHash: match.itemHash ?? null,
         hash: match.hash ?? null,
         sender: typeof match.address === "string" ? match.address : null,
@@ -2570,7 +2559,10 @@ async function waitForRelayBootstrapRegistration(args) {
         multiaddrs: Array.isArray(match.content.multiaddrs) ? match.content.multiaddrs : [],
         browserMultiaddrs: Array.isArray(match.content.browserMultiaddrs) ? match.content.browserMultiaddrs : []
       };
+      args.onAttempt?.(visibleRegistration, attempt + 1, attempts);
+      return visibleRegistration;
     }
+    args.onAttempt?.(null, attempt + 1, attempts);
     if (attempt < attempts - 1) {
       await sleep(delayMs);
     }
@@ -2943,7 +2935,6 @@ function defaultState(props = {}) {
     instances: [],
     bootstrapRegistrations: [],
     orphanBootstrapRegistrations: [],
-    relayPing: RELAY_PING_IDLE_STATE,
     lastDeploymentHash: null,
     deploymentProgress: IDLE_DEPLOYMENT_PROGRESS
   };
@@ -3170,57 +3161,6 @@ function compatibleCrnsForTier(crns, state) {
   );
   return filterDeployableCrns(crns, { spec });
 }
-async function pingPeer(libp2p) {
-  if (!libp2p || typeof libp2p !== "object") {
-    return RELAY_PING_IDLE_STATE;
-  }
-  const candidate = libp2p;
-  const peers = candidate.getPeers?.() ?? [];
-  const firstPeer = peers[0];
-  if (!firstPeer) {
-    return {
-      ...RELAY_PING_IDLE_STATE,
-      tone: "caution",
-      error: "No connected relay peers available."
-    };
-  }
-  const sentAt = Date.now();
-  try {
-    const pingFn = candidate.services?.ping?.ping?.bind(candidate.services.ping) ?? candidate.ping?.bind(candidate);
-    if (!pingFn) {
-      return {
-        ...RELAY_PING_IDLE_STATE,
-        tone: "caution",
-        sent: true,
-        lastPeerId: String(firstPeer),
-        lastSentAt: sentAt,
-        error: "libp2p ping service not available."
-      };
-    }
-    const latency = await pingFn(firstPeer);
-    return {
-      tone: "ok",
-      sent: true,
-      received: true,
-      lastPeerId: String(firstPeer),
-      lastLatencyMs: Number(latency),
-      lastSentAt: sentAt,
-      lastReceivedAt: Date.now(),
-      error: null
-    };
-  } catch (error) {
-    return {
-      tone: "error",
-      sent: true,
-      received: false,
-      lastPeerId: String(firstPeer),
-      lastLatencyMs: null,
-      lastSentAt: sentAt,
-      lastReceivedAt: null,
-      error: error instanceof Error ? error.message : String(error)
-    };
-  }
-}
 var UI_DEPLOY_WAIT_ATTEMPTS = 60;
 var UI_DEPLOY_WAIT_DELAY_MS = 5e3;
 var UI_RUNTIME_WAIT_ATTEMPTS = 40;
@@ -3251,7 +3191,6 @@ var SponsorRelayController = class {
   subscribers = /* @__PURE__ */ new Set();
   client;
   refreshTimer = null;
-  pingTimer = null;
   manifestRefreshTimer = null;
   stopWalletWatch = null;
   props;
@@ -3307,8 +3246,7 @@ var SponsorRelayController = class {
       ...patch,
       busy: patch.busy ? { ...this.state.busy, ...patch.busy } : this.state.busy,
       wallet: patch.wallet ? { ...this.state.wallet, ...patch.wallet } : this.state.wallet,
-      pricingSummary: patch.pricingSummary ? { ...this.state.pricingSummary, ...patch.pricingSummary } : this.state.pricingSummary,
-      relayPing: patch.relayPing ? { ...this.state.relayPing, ...patch.relayPing } : this.state.relayPing
+      pricingSummary: patch.pricingSummary ? { ...this.state.pricingSummary, ...patch.pricingSummary } : this.state.pricingSummary
     };
     this.emit();
   }
@@ -3361,7 +3299,17 @@ var SponsorRelayController = class {
         fetch: (url, init) => fetch(url, init),
         attempts: 15,
         delayMs: 4e3,
-        httpTimeoutMs: 1e4
+        httpTimeoutMs: 1e4,
+        onAttempt: (result, attempt, attempts) => {
+          this.emitProgress({
+            stage: "deployment-confirmed",
+            label: "Waiting for guest setup",
+            progress: 93,
+            status: result.ok ? "success" : "info",
+            itemHash: args.itemHash,
+            detail: result.ok ? `Setup endpoint ${attempt}/${attempts}: ready at http://${args.runtime.hostIpv4}:${setupPort}/health.` : `Setup endpoint ${attempt}/${attempts}: waiting for http://${args.runtime.hostIpv4}:${setupPort}/health.`
+          });
+        }
       });
       if (!setupHealth.ok) {
         throw new Error(
@@ -3490,6 +3438,14 @@ var SponsorRelayController = class {
             metadata?.browser_bootstrap_multiaddrs
           ) ? metadata.browser_bootstrap_multiaddrs.length : 0
         });
+        this.emitProgress({
+          stage: "publishing-bootstrap",
+          label: "Reading relay multiaddrs",
+          progress: 95,
+          status: result.ready ? "success" : "info",
+          itemHash: args.itemHash,
+          detail: result.ready ? `Relay metadata ${result.attempt}/${result.attempts}: public multiaddrs available.` : `Relay metadata ${result.attempt}/${result.attempts}: waiting for the relay to report public multiaddrs.`
+        });
       }
     });
     if (!relayMetadata) {
@@ -3515,7 +3471,17 @@ var SponsorRelayController = class {
       fetch: asJsonFetch,
       apiHost: this.client.apiHost,
       attempts: 24,
-      delayMs: 2500
+      delayMs: 2500,
+      onAttempt: (match, attempt, attempts) => {
+        this.emitProgress({
+          stage: "publishing-bootstrap",
+          label: "Waiting for guest bootstrap registration",
+          progress: 97,
+          status: match ? "success" : "info",
+          itemHash: args.itemHash,
+          detail: match ? `Guest bootstrap registration ${attempt}/${attempts}: visible on Aleph.` : `Guest bootstrap registration ${attempt}/${attempts}: still waiting for the relay VM registration on Aleph.`
+        });
+      }
     });
     this.trace("deploy:bootstrap-registration-visible", {
       itemHash: args.itemHash,
@@ -3566,7 +3532,17 @@ var SponsorRelayController = class {
         fetch: asJsonFetch,
         apiHost: this.client.apiHost,
         attempts: 24,
-        delayMs: 2500
+        delayMs: 2500,
+        onAttempt: (match, attempt, attempts) => {
+          this.emitProgress({
+            stage: "publishing-bootstrap",
+            label: "Waiting for bootstrap fallback",
+            progress: 98,
+            status: match ? "success" : "warning",
+            itemHash: args.itemHash,
+            detail: match ? `Bootstrap fallback ${attempt}/${attempts}: visible on Aleph.` : `Bootstrap fallback ${attempt}/${attempts}: waiting for the browser-published registration on Aleph.`
+          });
+        }
       });
       this.trace("deploy:bootstrap-registration-fallback-visible", {
         itemHash: args.itemHash,
@@ -3742,16 +3718,11 @@ var SponsorRelayController = class {
     this.refreshTimer = setInterval(() => {
       void this.refresh();
     }, REFRESH_INTERVAL_MS);
-    this.pingTimer = setInterval(() => {
-      void this.refreshRelayPing();
-    }, RELAY_PING_INTERVAL_MS);
-    await this.refreshRelayPing();
     this.patch({ ready: true });
     this.trace("init:ready");
   }
   destroy() {
     if (this.refreshTimer) clearInterval(this.refreshTimer);
-    if (this.pingTimer) clearInterval(this.pingTimer);
     if (this.manifestRefreshTimer) clearTimeout(this.manifestRefreshTimer);
     this.stopWalletWatch?.();
   }
@@ -4046,11 +4017,6 @@ var SponsorRelayController = class {
       });
     }
   }
-  async refreshRelayPing() {
-    const relayPing = await pingPeer(this.props.libp2p);
-    this.patch({ relayPing });
-    this.trace("libp2p:relay-ping", relayPing);
-  }
   async deploy() {
     this.trace("deploy:start", {
       wallet: this.state.wallet.address,
@@ -4167,7 +4133,7 @@ var SponsorRelayController = class {
             fetch: (url, init) => fetch(url, init),
             attempts: UI_DEPLOY_WAIT_ATTEMPTS,
             delayMs: UI_DEPLOY_WAIT_DELAY_MS,
-            onAttempt: (inspectionResult) => {
+            onAttempt: (inspectionResult, attempt, attempts) => {
               if (inspectionResult.status === "processed") {
                 this.emitProgress({
                   stage: "deployment-confirmed",
@@ -4175,7 +4141,7 @@ var SponsorRelayController = class {
                   progress: 82,
                   status: "success",
                   itemHash: result.itemHash,
-                  detail: "Aleph processed the instance message."
+                  detail: `Aleph processing ${attempt}/${attempts}: instance message processed.`
                 });
                 return;
               }
@@ -4197,7 +4163,7 @@ var SponsorRelayController = class {
                 progress: 76,
                 status: "info",
                 itemHash: result.itemHash,
-                detail: "Deployment submitted. Waiting for Aleph to process the instance message."
+                detail: `Aleph processing ${attempt}/${attempts}: waiting for the instance message to be processed.`
               });
             }
           });
@@ -4263,7 +4229,7 @@ var SponsorRelayController = class {
             crnListUrl: this.props.crnListUrl,
             attempts: UI_RUNTIME_WAIT_ATTEMPTS,
             delayMs: UI_RUNTIME_WAIT_DELAY_MS,
-            onAttempt: (runtime2) => {
+            onAttempt: (runtime2, attempt, attempts) => {
               if (runtime2.hostIpv4 && Object.keys(runtime2.mappedPorts ?? {}).length > 0) {
                 this.emitProgress({
                   stage: "deployment-confirmed",
@@ -4271,7 +4237,7 @@ var SponsorRelayController = class {
                   progress: 92,
                   status: "info",
                   itemHash: result.itemHash,
-                  detail: "Runtime networking and mapped ports are now available. Finishing relay setup and bootstrap verification."
+                  detail: `Runtime ${attempt}/${attempts}: networking and mapped ports are now available.`
                 });
                 return;
               }
@@ -4281,7 +4247,7 @@ var SponsorRelayController = class {
                 progress: 90,
                 status: "warning",
                 itemHash: result.itemHash,
-                detail: runtime2.diagnostics?.reason ?? "Waiting for CRN runtime networking and mapped ports."
+                detail: runtime2.diagnostics?.reason ? `Runtime ${attempt}/${attempts}: ${runtime2.diagnostics.reason}` : `Runtime ${attempt}/${attempts}: waiting for CRN runtime networking and mapped ports.`
               });
             }
           });
@@ -4578,8 +4544,6 @@ export {
   MANIFEST_SOURCE_REFRESH_DEBOUNCE_MS,
   RECENT_INSTANCE_RUNTIME_GRACE_MS,
   REFRESH_INTERVAL_MS,
-  RELAY_PING_IDLE_STATE,
-  RELAY_PING_INTERVAL_MS,
   ROOTFS_MISSING_STATE,
   STALE_INSTANCE_ALLOCATION_COOLDOWN_MS,
   SponsorRelayController,

package/svelte/SponsorRelayFab.svelte

@@ -236,7 +236,7 @@ export let apiHost = undefined
                 {#if confirmedRegistration}
                   <span class="chip chip-confirmed">
                     <span class="chip-dot-confirmed"></span>
-                    Registration confirmed
+                    Aleph bootstrap registered
                   </span>
                 {/if}
               </div>
@@ -318,7 +318,7 @@ export let apiHost = undefined
                 <div>Browser multiaddrs: {String(entry.content?.browserMultiaddrs?.length ?? 0)}</div>
                 <div>Updated: {formatDateTime(entry.content?.updatedAt ?? entry.time)}</div>
                 <button
-                  class="delete"
+                  class="warning"
                   type="button"
                   disabled={!registrationHash || state.busy.deletingRegistrationHash === registrationHash}
                   on:click={() => registrationHash && controller.deleteBootstrapRegistration(registrationHash)}
@@ -429,24 +429,41 @@ export let apiHost = undefined
 
   .refresh,
   .primary,
-  .delete {
-    border: 1px solid rgba(255, 255, 255, 0.12);
+  .delete,
+  .warning {
     border-radius: 0.95rem;
     padding: 0.7rem 0.9rem;
     cursor: pointer;
+    font-weight: 700;
+    line-height: 1.1;
+  }
+
+  .refresh {
+    border: 1px solid rgba(255, 255, 255, 0.22);
     color: var(--relay-text);
-    background: rgba(255, 255, 255, 0.05);
+    background: rgba(255, 255, 255, 0.1);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+    backdrop-filter: blur(8px);
   }
 
   .primary {
     width: 100%;
-    background: linear-gradient(135deg, var(--relay-blue), var(--relay-red));
-    font-weight: 700;
+    border: 1px solid rgba(251, 191, 36, 0.42);
+    background: linear-gradient(135deg, #f6c453 0%, #f59e0b 100%);
+    color: #281606;
+    box-shadow: 0 10px 24px rgba(245, 158, 11, 0.24);
   }
 
   .delete {
-    background: rgba(233, 19, 21, 0.15);
-    color: #ffd4d4;
+    border: 1px solid rgba(248, 113, 113, 0.45);
+    background: rgba(239, 68, 68, 0.18);
+    color: #ffe2e2;
+  }
+
+  .warning {
+    border: 1px solid rgba(251, 146, 60, 0.4);
+    background: rgba(251, 146, 60, 0.16);
+    color: #fed7aa;
   }
 
   .chip-confirmed {