@le-space/ui 0.3.21 → 0.3.22

package/package.json

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

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.21";
+var UI_PACKAGE_VERSION = "0.3.22";
 
 // src/shared/format.ts
 function shortHash(value, head = 8, tail = 6) {
@@ -4200,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") {
@@ -4213,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 {
@@ -4354,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;
@@ -4374,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",
       {
@@ -4468,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
                     }
                   }
                 ),
@@ -4550,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.21";
+declare const UI_PACKAGE_VERSION = "0.3.22";
 
 interface RootfsRequiredPortForward {
     port: number;

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.21";
+var UI_PACKAGE_VERSION = "0.3.22";
 
 // src/shared/format.ts
 function shortHash(value, head = 8, tail = 6) {

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,