@le-space/ui 0.3.20 → 0.3.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@le-space/ui",
-  "version": "0.3.20",
+  "version": "0.3.22",
   "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.3.20",
-    "@le-space/core": "0.3.20",
+    "@le-space/browser": "0.3.22",
+    "@le-space/core": "0.3.22",
     "viem": "^2.38.5"
   },
   "peerDependencies": {

package/react/index.d.ts

@@ -303,7 +303,7 @@ declare class SponsorRelayController {
     private runtimeCooldownByHash;
     private runtimeDetailsByHash;
     private debugEnabled;
-    private lastRuntimeReadyHash;
+    private lastCompletedDeploymentHash;
     constructor(props?: SponsorRelayProps);
     subscribeToDeploymentProgress(listener: DeploymentProgressListener): () => void;
     subscribe(subscriber: SponsorRelaySubscriber): () => void;

package/react/index.js

@@ -39,7 +39,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.3.20";
+var UI_PACKAGE_VERSION = "0.3.22";
 
 // src/shared/format.ts
 function shortHash(value, head = 8, tail = 6) {
@@ -2951,7 +2951,7 @@ var SponsorRelayController = class {
   runtimeCooldownByHash = /* @__PURE__ */ new Map();
   runtimeDetailsByHash = /* @__PURE__ */ new Map();
   debugEnabled;
-  lastRuntimeReadyHash = null;
+  lastCompletedDeploymentHash = null;
   constructor(props = {}) {
     this.props = props;
     this.state = defaultState(props);
@@ -3063,7 +3063,7 @@ var SponsorRelayController = class {
       this.emitProgress({
         stage: "deployment-confirmed",
         label: "Applying relay networking",
-        progress: 94,
+        progress: 93,
         status: "info",
         itemHash: args.itemHash,
         detail: "Publishing the host port mapping into the guest relay configuration."
@@ -3099,7 +3099,7 @@ var SponsorRelayController = class {
       this.emitProgress({
         stage: "deployment-confirmed",
         label: "Publishing relay config",
-        progress: 94,
+        progress: 93,
         status: "info",
         itemHash: args.itemHash,
         detail: "Publishing runtime networking into the Aleph guest bootstrap config aggregate."
@@ -3196,7 +3196,7 @@ var SponsorRelayController = class {
     this.emitProgress({
       stage: "publishing-bootstrap",
       label: "Waiting for guest bootstrap registration",
-      progress: 96,
+      progress: 97,
       status: "info",
       itemHash: args.itemHash,
       detail: "Waiting for the relay VM to publish its own bootstrap registration to Aleph."
@@ -3251,7 +3251,7 @@ var SponsorRelayController = class {
     }
     const currentProgress = this.state.deploymentProgress;
     const currentProgressIsForLatestHash = currentProgress.itemHash === itemHash || currentProgress.itemHash == null && currentProgress.stage !== "idle" && currentProgress.stage !== "error";
-    const keepTerminalSuccess = this.lastRuntimeReadyHash === itemHash || currentProgressIsForLatestHash && currentProgress.stage === "completed" && currentProgress.status === "success";
+    const keepTerminalSuccess = this.lastCompletedDeploymentHash === itemHash || currentProgressIsForLatestHash && currentProgress.stage === "completed" && currentProgress.status === "success";
     const status = latest.details.messageStatus;
     if (status === "rejected") {
       this.emitProgress({
@@ -3305,12 +3305,12 @@ var SponsorRelayController = class {
       return;
     }
     this.emitProgress({
-      stage: "completed",
+      stage: "deployment-confirmed",
       label: "Runtime ready",
-      progress: 100,
-      status: "success",
+      progress: 92,
+      status: "info",
       itemHash,
-      detail: "Deployment processed and runtime networking is available."
+      detail: "Deployment processed and runtime networking is available. Finishing relay setup and bootstrap verification."
     });
   }
   canSkipRuntimeRefresh(instance) {
@@ -3761,7 +3761,7 @@ var SponsorRelayController = class {
             crnHash: candidateCrn.hash,
             crnName: candidateCrn.name
           });
-          this.lastRuntimeReadyHash = null;
+          this.lastCompletedDeploymentHash = null;
           const inspection = await waitForDeploymentResult2(result.itemHash, {
             rootfsRef: this.state.manifest.rootfsItemHash,
             apiHost: this.client.apiHost,
@@ -3867,12 +3867,12 @@ var SponsorRelayController = class {
             onAttempt: (runtime2) => {
               if (runtime2.hostIpv4 && Object.keys(runtime2.mappedPorts ?? {}).length > 0) {
                 this.emitProgress({
-                  stage: "completed",
+                  stage: "deployment-confirmed",
                   label: "Runtime ready",
-                  progress: 100,
-                  status: "success",
+                  progress: 92,
+                  status: "info",
                   itemHash: result.itemHash,
-                  detail: "Runtime networking and mapped ports are now available."
+                  detail: "Runtime networking and mapped ports are now available. Finishing relay setup and bootstrap verification."
                 });
                 return;
               }
@@ -3892,7 +3892,6 @@ var SponsorRelayController = class {
             );
           }
           this.trace("deploy:runtime-ready", runtime);
-          this.lastRuntimeReadyHash = result.itemHash;
           this.rememberRuntimeDetails(result.itemHash, {
             messageStatus: "processed",
             allocationSource: runtime.allocation?.source ?? null,
@@ -3917,12 +3916,21 @@ var SponsorRelayController = class {
           this.emitProgress({
             stage: "refreshing-instances",
             label: "Refreshing instances",
-            progress: 96,
+            progress: 99,
             status: "info",
             itemHash: result.itemHash,
             detail: "Reloading deployments and runtime state."
           });
           await this.refresh();
+          this.lastCompletedDeploymentHash = result.itemHash;
+          this.emitProgress({
+            stage: "completed",
+            label: "Relay ready",
+            progress: 100,
+            status: "success",
+            itemHash: result.itemHash,
+            detail: "Relay runtime, setup, metadata, and bootstrap registration are confirmed."
+          });
           return;
         } catch (error) {
           lastError = error instanceof Error ? error : new Error(String(error));
@@ -4192,6 +4200,12 @@ function progressBadgeLabel(stage) {
   }
 }
 var COMPLETED_PROGRESS_VISIBLE_MS = 12e3;
+var POLLING_STAGES = /* @__PURE__ */ new Set([
+  "waiting-for-aleph",
+  "deployment-confirmed",
+  "publishing-bootstrap",
+  "refreshing-instances"
+]);
 function isDeploymentProgressVisible(state) {
   const stage = state.deploymentProgress.stage;
   if (stage === "idle") {
@@ -4205,6 +4219,21 @@ function isDeploymentProgressVisible(state) {
   }
   return true;
 }
+function pollingIndicator(state) {
+  if (state.busy.refreshing) {
+    return {
+      label: "Checking relay state",
+      detail: state.statusText || "Refreshing relay sponsor data from Aleph and the selected CRN."
+    };
+  }
+  if (!POLLING_STAGES.has(state.deploymentProgress.stage)) {
+    return null;
+  }
+  return {
+    label: state.deploymentProgress.label || "Polling relay state",
+    detail: state.deploymentProgress.detail || state.statusText || "Waiting for the next confirmed relay state from Aleph."
+  };
+}
 function launcherIndicator(state) {
   if (state.deploymentProgress.stage !== "idle" && state.deploymentProgress.stage !== "completed") {
     return {
@@ -4346,6 +4375,7 @@ function SponsorRelayFab(props) {
   }, [launcherMode]);
   const progressActive = state.deploymentProgress.stage !== "idle" && state.deploymentProgress.stage !== "completed" && state.deploymentProgress.stage !== "error";
   const deploymentProgressVisible = isDeploymentProgressVisible(state);
+  const pollingState = pollingIndicator(state);
   const pulseScale = progressActive ? 1.03 : hovered ? 1.015 : 1;
   const pulseShadow = progressActive ? `0 0 0 4px ${progressToneColor(indicator.tone)}22, 0 12px 28px rgba(15, 23, 42, 0.22)` : successFlash ? `0 0 0 5px rgba(55, 214, 122, 0.22), 0 14px 32px rgba(55, 214, 122, 0.22)` : launcherMode === "inline" ? hovered ? "var(--le-space-sponsor-relay-launcher-hover-shadow, 0 14px 30px rgba(79, 70, 229, 0.28))" : "var(--le-space-sponsor-relay-launcher-shadow, 0 10px 24px rgba(99, 102, 241, 0.22))" : void 0;
   const inlineButtonBackground = themedLauncherBackground;
@@ -4366,6 +4396,7 @@ function SponsorRelayFab(props) {
   };
   const launcherLabel = launcherMode === "inline" && compactInlineLabel ? "Relay" : "Sponsor Relay";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `@keyframes leSpaceRelayPulse { 0%, 100% { transform: scale(1); opacity: 0.74; } 50% { transform: scale(1.22); opacity: 1; } }` }),
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -4460,7 +4491,8 @@ function SponsorRelayFab(props) {
                       background: progressToneColor(indicator.tone),
                       boxShadow: `0 0 0 ${progressActive ? "4px" : "3px"} ${progressToneColor(indicator.tone)}22`,
                       transform: `scale(${progressActive ? 1.12 : successFlash ? 1.18 : 1})`,
-                      transition: "transform 180ms ease, box-shadow 220ms ease"
+                      transition: "transform 180ms ease, box-shadow 220ms ease",
+                      animation: pollingState ? "leSpaceRelayPulse 1.6s ease-in-out infinite" : void 0
                     }
                   }
                 ),
@@ -4542,6 +4574,52 @@ function SponsorRelayFab(props) {
         ),
         /* @__PURE__ */ jsx("p", { style: { color: "#9fb2ca" }, children: state.statusText }),
         state.errorText ? /* @__PURE__ */ jsx("p", { style: { color: "#ffd9d9" }, children: state.errorText }) : null,
+        pollingState ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "aria-live": "polite",
+            style: {
+              marginTop: "0.25rem",
+              marginBottom: "0.8rem",
+              padding: "0.7rem 0.8rem",
+              borderRadius: "1rem",
+              border: "1px solid rgba(125, 211, 252, 0.18)",
+              background: "linear-gradient(180deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.05))",
+              display: "grid",
+              gap: "0.28rem"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: "0.45rem"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        style: {
+                          width: "0.62rem",
+                          height: "0.62rem",
+                          borderRadius: "999px",
+                          background: progressToneColor("info"),
+                          boxShadow: `0 0 0 3px ${progressToneColor("info")}22`,
+                          animation: "leSpaceRelayPulse 1.6s ease-in-out infinite"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("strong", { style: { fontSize: "0.88rem" }, children: pollingState.label })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("small", { style: { color: "#9fb2ca", lineHeight: 1.35 }, children: pollingState.detail })
+            ]
+          }
+        ) : null,
         deploymentProgressVisible ? /* @__PURE__ */ jsxs(
           "div",
           {

package/shared/index.d.ts

@@ -304,7 +304,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.3.20";
+declare const UI_PACKAGE_VERSION = "0.3.22";
 
 interface RootfsRequiredPortForward {
     port: number;
@@ -353,7 +353,7 @@ declare class SponsorRelayController {
     private runtimeCooldownByHash;
     private runtimeDetailsByHash;
     private debugEnabled;
-    private lastRuntimeReadyHash;
+    private lastCompletedDeploymentHash;
     constructor(props?: SponsorRelayProps);
     subscribeToDeploymentProgress(listener: DeploymentProgressListener): () => void;
     subscribe(subscriber: SponsorRelaySubscriber): () => void;

package/shared/index.js

@@ -38,7 +38,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.3.20";
+var UI_PACKAGE_VERSION = "0.3.22";
 
 // src/shared/format.ts
 function shortHash(value, head = 8, tail = 6) {
@@ -2950,7 +2950,7 @@ var SponsorRelayController = class {
   runtimeCooldownByHash = /* @__PURE__ */ new Map();
   runtimeDetailsByHash = /* @__PURE__ */ new Map();
   debugEnabled;
-  lastRuntimeReadyHash = null;
+  lastCompletedDeploymentHash = null;
   constructor(props = {}) {
     this.props = props;
     this.state = defaultState(props);
@@ -3062,7 +3062,7 @@ var SponsorRelayController = class {
       this.emitProgress({
         stage: "deployment-confirmed",
         label: "Applying relay networking",
-        progress: 94,
+        progress: 93,
         status: "info",
         itemHash: args.itemHash,
         detail: "Publishing the host port mapping into the guest relay configuration."
@@ -3098,7 +3098,7 @@ var SponsorRelayController = class {
       this.emitProgress({
         stage: "deployment-confirmed",
         label: "Publishing relay config",
-        progress: 94,
+        progress: 93,
         status: "info",
         itemHash: args.itemHash,
         detail: "Publishing runtime networking into the Aleph guest bootstrap config aggregate."
@@ -3195,7 +3195,7 @@ var SponsorRelayController = class {
     this.emitProgress({
       stage: "publishing-bootstrap",
       label: "Waiting for guest bootstrap registration",
-      progress: 96,
+      progress: 97,
       status: "info",
       itemHash: args.itemHash,
       detail: "Waiting for the relay VM to publish its own bootstrap registration to Aleph."
@@ -3250,7 +3250,7 @@ var SponsorRelayController = class {
     }
     const currentProgress = this.state.deploymentProgress;
     const currentProgressIsForLatestHash = currentProgress.itemHash === itemHash || currentProgress.itemHash == null && currentProgress.stage !== "idle" && currentProgress.stage !== "error";
-    const keepTerminalSuccess = this.lastRuntimeReadyHash === itemHash || currentProgressIsForLatestHash && currentProgress.stage === "completed" && currentProgress.status === "success";
+    const keepTerminalSuccess = this.lastCompletedDeploymentHash === itemHash || currentProgressIsForLatestHash && currentProgress.stage === "completed" && currentProgress.status === "success";
     const status = latest.details.messageStatus;
     if (status === "rejected") {
       this.emitProgress({
@@ -3304,12 +3304,12 @@ var SponsorRelayController = class {
       return;
     }
     this.emitProgress({
-      stage: "completed",
+      stage: "deployment-confirmed",
       label: "Runtime ready",
-      progress: 100,
-      status: "success",
+      progress: 92,
+      status: "info",
       itemHash,
-      detail: "Deployment processed and runtime networking is available."
+      detail: "Deployment processed and runtime networking is available. Finishing relay setup and bootstrap verification."
     });
   }
   canSkipRuntimeRefresh(instance) {
@@ -3760,7 +3760,7 @@ var SponsorRelayController = class {
             crnHash: candidateCrn.hash,
             crnName: candidateCrn.name
           });
-          this.lastRuntimeReadyHash = null;
+          this.lastCompletedDeploymentHash = null;
           const inspection = await waitForDeploymentResult2(result.itemHash, {
             rootfsRef: this.state.manifest.rootfsItemHash,
             apiHost: this.client.apiHost,
@@ -3866,12 +3866,12 @@ var SponsorRelayController = class {
             onAttempt: (runtime2) => {
               if (runtime2.hostIpv4 && Object.keys(runtime2.mappedPorts ?? {}).length > 0) {
                 this.emitProgress({
-                  stage: "completed",
+                  stage: "deployment-confirmed",
                   label: "Runtime ready",
-                  progress: 100,
-                  status: "success",
+                  progress: 92,
+                  status: "info",
                   itemHash: result.itemHash,
-                  detail: "Runtime networking and mapped ports are now available."
+                  detail: "Runtime networking and mapped ports are now available. Finishing relay setup and bootstrap verification."
                 });
                 return;
               }
@@ -3891,7 +3891,6 @@ var SponsorRelayController = class {
             );
           }
           this.trace("deploy:runtime-ready", runtime);
-          this.lastRuntimeReadyHash = result.itemHash;
           this.rememberRuntimeDetails(result.itemHash, {
             messageStatus: "processed",
             allocationSource: runtime.allocation?.source ?? null,
@@ -3916,12 +3915,21 @@ var SponsorRelayController = class {
           this.emitProgress({
             stage: "refreshing-instances",
             label: "Refreshing instances",
-            progress: 96,
+            progress: 99,
             status: "info",
             itemHash: result.itemHash,
             detail: "Reloading deployments and runtime state."
           });
           await this.refresh();
+          this.lastCompletedDeploymentHash = result.itemHash;
+          this.emitProgress({
+            stage: "completed",
+            label: "Relay ready",
+            progress: 100,
+            status: "success",
+            itemHash: result.itemHash,
+            detail: "Relay runtime, setup, metadata, and bootstrap registration are confirmed."
+          });
           return;
         } catch (error) {
           lastError = error instanceof Error ? error : new Error(String(error));

package/svelte/SponsorRelayFab.svelte

@@ -42,6 +42,15 @@ export let apiHost = undefined
   const versionLabel = resolvedVersion.trim()
     ? (resolvedVersion.trim().startsWith('v') ? resolvedVersion.trim() : `v${resolvedVersion.trim()}`)
     : ''
+  const pollingStages = new Set(['waiting-for-aleph', 'deployment-confirmed', 'publishing-bootstrap', 'refreshing-instances'])
+
+  $: pollingActive = state.busy.refreshing || pollingStages.has(state.deploymentProgress.stage)
+  $: pollingLabel = state.busy.refreshing
+    ? 'Checking relay state'
+    : (state.deploymentProgress.label || 'Polling relay state')
+  $: pollingDetail = state.busy.refreshing
+    ? (state.statusText || 'Refreshing relay sponsor data from Aleph and the selected CRN.')
+    : (state.deploymentProgress.detail || state.statusText || 'Waiting for the next confirmed relay state from Aleph.')
 
   onMount(async () => {
     const unsubscribe = controller.subscribe((next) => {
@@ -113,6 +122,16 @@ export let apiHost = undefined
     {/if}
     <p class="status-text">{state.statusText}</p>
 
+    {#if pollingActive}
+      <div class="polling-row" aria-live="polite">
+        <div class="polling-head">
+          <StatusLed tone="idle" pulse={true} />
+          <strong>{pollingLabel}</strong>
+        </div>
+        <small>{pollingDetail}</small>
+      </div>
+    {/if}
+
     <div class="grid">
       <label class="field">
         <span>Instance Name</span>
@@ -319,6 +338,31 @@ export let apiHost = undefined
     justify-content: space-between;
   }
 
+  .polling-row {
+    display: grid;
+    gap: 0.28rem;
+    margin: 0.25rem 0 0.8rem;
+    padding: 0.7rem 0.85rem;
+    border-radius: 1rem;
+    background: linear-gradient(180deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.05));
+    border: 1px solid rgba(125, 211, 252, 0.18);
+  }
+
+  .polling-head {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+  }
+
+  .polling-row strong {
+    font-size: 0.88rem;
+  }
+
+  .polling-row small {
+    color: var(--relay-text-dim);
+    line-height: 1.35;
+  }
+
   .eyebrow,
   .mini-label,
   .field span,