@le-space/ui 0.12.2 → 0.12.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@le-space/ui",
-  "version": "0.12.2",
+  "version": "0.12.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.12.2",
-    "@le-space/core": "0.12.2",
+    "@le-space/browser": "0.12.4",
+    "@le-space/core": "0.12.4",
     "viem": "^2.53.1"
   },
   "peerDependencies": {

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.12.2";
+var UI_PACKAGE_VERSION = "0.12.4";
 
 // src/shared/format.ts
 function shortHash(value, head = 8, tail = 6) {
@@ -118,6 +118,12 @@ function formatDateTime(value) {
   if (Number.isNaN(date.getTime())) return String(value);
   return date.toLocaleString();
 }
+function formatElapsed(ms) {
+  const totalSeconds = Math.max(0, Math.round(ms / 1e3));
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
 function formatTierSpecLabel(vcpus, memoryMiB, diskMiB) {
   if (vcpus == null || !Number.isFinite(vcpus) || memoryMiB == null || !Number.isFinite(memoryMiB) || diskMiB == null || !Number.isFinite(diskMiB)) {
     return "-";
@@ -5154,6 +5160,7 @@ var UI_DEPLOY_WAIT_ATTEMPTS = 60;
 var UI_DEPLOY_WAIT_DELAY_MS = 5e3;
 var UI_RUNTIME_WAIT_ATTEMPTS = 120;
 var UI_RUNTIME_WAIT_DELAY_MS = 5e3;
+var UI_2N6_ACTIVATION_HINT = "This is usually done within 4 minutes, and can take up to 10 when Aleph's 2n6 service is busy. The deploy continues on its own.";
 function hasUsableRuntime(details) {
   return Boolean(details.hostIpv4) || Boolean(details.vmIpv4) || details.mappedPorts.length > 0 || Boolean(details.webUrl) || Boolean(details.execution);
 }
@@ -5514,8 +5521,9 @@ var SponsorRelayController = class {
           progress: 93,
           status: "warning",
           itemHash: args.itemHash,
-          detail: "The relay received a 2n6 hostname, but it is not active yet. Waiting before handing HTTPS config to the guest."
+          detail: `The relay received a 2n6 hostname, but it is not active yet. ${UI_2N6_ACTIVATION_HINT}`
         });
+        const activationStartedAt = Date.now();
         let latestRuntime = runtime;
         let activationAbsentStreak = 0;
         for (let attempt = 0; attempt < UI_RUNTIME_WAIT_ATTEMPTS; attempt += 1) {
@@ -5557,7 +5565,7 @@ var SponsorRelayController = class {
             progress: 93,
             status: latestRuntime.webAccess?.active === true ? "info" : "warning",
             itemHash: args.itemHash,
-            detail: `2n6 activation ${attempt + 1}/${UI_RUNTIME_WAIT_ATTEMPTS}: ${latestRuntime.webAccess?.active === true ? "active" : "still pending"} for ${latestRuntime.proxyUrl ?? runtime.proxyUrl ?? "reserved proxy URL"}.`
+            detail: `2n6 activation for ${latestRuntime.proxyUrl ?? runtime.proxyUrl ?? "reserved proxy URL"}: ` + (latestRuntime.webAccess?.active === true ? `active after ${formatElapsed(Date.now() - activationStartedAt)}.` : `still pending after ${formatElapsed(Date.now() - activationStartedAt)}. ${UI_2N6_ACTIVATION_HINT}`)
           });
           this.trace("deploy:bootstrap-proxy-activation", {
             itemHash: args.itemHash,

package/shared/index.d.ts

@@ -549,7 +549,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.12.2";
+declare const UI_PACKAGE_VERSION = "0.12.4";
 
 interface RootfsRequiredPortForward {
     port: number;
@@ -561,6 +561,7 @@ interface RootfsRequiredPortForward {
 declare function shortHash(value: string | null | undefined, head?: number, tail?: number): string;
 declare function formatNumber(value: number | null | undefined, digits?: number): string;
 declare function formatDateTime(value: string | number | null | undefined): string;
+declare function formatElapsed(ms: number): string;
 declare function formatTierSpecLabel(vcpus: number | null | undefined, memoryMiB: number | null | undefined, diskMiB: number | null | undefined): string;
 declare function buildSshCommand(hostIpv4: string | null, mappedPorts: CompactInstanceRecord["details"]["mappedPorts"]): string | null;
 declare function joinMappedPorts(mappedPorts: CompactInstanceRecord["details"]["mappedPorts"]): string;
@@ -747,4 +748,4 @@ declare function demoteUnverifiableCrns<T extends {
 /** Tests only. */
 declare function forgetUnverifiableCrns(): void;
 
-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, type SponsorRelayConfidentialStart, 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, demoteUnverifiableCrns, deploymentFailureMessage, describeRequest, describeThrown, dragExceedsThreshold, forgetUnverifiableCrns, formatCrnOptionLabel, formatDateTime, formatNumber, formatTierSpecLabel, getEthereumProvider, isUnverifiableNodeError, joinMappedPorts, joinRequiredPortForwards, parseInstanceAddressPayload, personalSign, readStoredPosition, rememberUnverifiableCrn, resolveCornerPlacement, resolveManifestSource, rootfsHealth, shortHash, toChecksumAddress, unverifiableCrnHashes, 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, type SponsorRelayConfidentialStart, 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, demoteUnverifiableCrns, deploymentFailureMessage, describeRequest, describeThrown, dragExceedsThreshold, forgetUnverifiableCrns, formatCrnOptionLabel, formatDateTime, formatElapsed, formatNumber, formatTierSpecLabel, getEthereumProvider, isUnverifiableNodeError, joinMappedPorts, joinRequiredPortForwards, parseInstanceAddressPayload, personalSign, readStoredPosition, rememberUnverifiableCrn, resolveCornerPlacement, resolveManifestSource, rootfsHealth, shortHash, toChecksumAddress, unverifiableCrnHashes, 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.12.2";
+var UI_PACKAGE_VERSION = "0.12.4";
 
 // src/shared/format.ts
 function shortHash(value, head = 8, tail = 6) {
@@ -118,6 +118,12 @@ function formatDateTime(value) {
   if (Number.isNaN(date.getTime())) return String(value);
   return date.toLocaleString();
 }
+function formatElapsed(ms) {
+  const totalSeconds = Math.max(0, Math.round(ms / 1e3));
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
 function formatTierSpecLabel(vcpus, memoryMiB, diskMiB) {
   if (vcpus == null || !Number.isFinite(vcpus) || memoryMiB == null || !Number.isFinite(memoryMiB) || diskMiB == null || !Number.isFinite(diskMiB)) {
     return "-";
@@ -5157,6 +5163,7 @@ var UI_DEPLOY_WAIT_ATTEMPTS = 60;
 var UI_DEPLOY_WAIT_DELAY_MS = 5e3;
 var UI_RUNTIME_WAIT_ATTEMPTS = 120;
 var UI_RUNTIME_WAIT_DELAY_MS = 5e3;
+var UI_2N6_ACTIVATION_HINT = "This is usually done within 4 minutes, and can take up to 10 when Aleph's 2n6 service is busy. The deploy continues on its own.";
 function hasUsableRuntime(details) {
   return Boolean(details.hostIpv4) || Boolean(details.vmIpv4) || details.mappedPorts.length > 0 || Boolean(details.webUrl) || Boolean(details.execution);
 }
@@ -5517,8 +5524,9 @@ var SponsorRelayController = class {
           progress: 93,
           status: "warning",
           itemHash: args.itemHash,
-          detail: "The relay received a 2n6 hostname, but it is not active yet. Waiting before handing HTTPS config to the guest."
+          detail: `The relay received a 2n6 hostname, but it is not active yet. ${UI_2N6_ACTIVATION_HINT}`
         });
+        const activationStartedAt = Date.now();
         let latestRuntime = runtime;
         let activationAbsentStreak = 0;
         for (let attempt = 0; attempt < UI_RUNTIME_WAIT_ATTEMPTS; attempt += 1) {
@@ -5560,7 +5568,7 @@ var SponsorRelayController = class {
             progress: 93,
             status: latestRuntime.webAccess?.active === true ? "info" : "warning",
             itemHash: args.itemHash,
-            detail: `2n6 activation ${attempt + 1}/${UI_RUNTIME_WAIT_ATTEMPTS}: ${latestRuntime.webAccess?.active === true ? "active" : "still pending"} for ${latestRuntime.proxyUrl ?? runtime.proxyUrl ?? "reserved proxy URL"}.`
+            detail: `2n6 activation for ${latestRuntime.proxyUrl ?? runtime.proxyUrl ?? "reserved proxy URL"}: ` + (latestRuntime.webAccess?.active === true ? `active after ${formatElapsed(Date.now() - activationStartedAt)}.` : `still pending after ${formatElapsed(Date.now() - activationStartedAt)}. ${UI_2N6_ACTIVATION_HINT}`)
           });
           this.trace("deploy:bootstrap-proxy-activation", {
             itemHash: args.itemHash,
@@ -7598,6 +7606,7 @@ export {
   forgetUnverifiableCrns,
   formatCrnOptionLabel,
   formatDateTime,
+  formatElapsed,
   formatNumber,
   formatTierSpecLabel,
   getEthereumProvider,

package/svelte/SponsorRelayFab.svelte

@@ -101,12 +101,11 @@ export let apiHosts = undefined
   $: orphanRegistrations = state.orphanBootstrapRegistrations ?? []
 
   // Which tab each expanded deployment card is showing, keyed by item hash.
+  // The template reads it directly: a legacy-mode `let` only becomes reactive
+  // when the markup references it, and reading it through a helper function
+  // left a tab click without effect until the next state update.
   let instanceTabs = {}
 
-  function instanceTab(itemHash) {
-    return instanceTabs[itemHash] ?? 'general'
-  }
-
   function selectInstanceTab(itemHash, tab) {
     instanceTabs = { ...instanceTabs, [itemHash]: tab }
     if (tab !== 'general') {
@@ -536,7 +535,7 @@ export let apiHosts = undefined
 
             {@const itemHash = entry.instance.item_hash}
             {@const addresses = addressesOf(itemHash)}
-            {@const tab = instanceTab(itemHash)}
+            {@const tab = instanceTabs[itemHash] ?? 'general'}
 
             <div class="tab-bar" role="tablist">
               <button
@@ -762,7 +761,12 @@ export let apiHosts = undefined
     bottom: 11.5rem;
     z-index: 9999;
     width: min(28rem, calc(100vw - 2rem));
+    /* The height budget includes padding and border, as in the React build;
+       otherwise the panel runs 34px past it, under the launcher or the top
+       edge. dvh leaves out the mobile browser bars that 100vh counts. */
+    box-sizing: border-box;
     max-height: calc(100vh - 12.5rem);
+    max-height: calc(100dvh - 12.5rem);
     overflow: auto;
     border: 1px solid var(--relay-panel-border);
     border-radius: 0.625rem;
@@ -1318,6 +1322,7 @@ export let apiHosts = undefined
       width: auto;
       bottom: 7.4rem;
       max-height: calc(100vh - 8.4rem);
+      max-height: calc(100dvh - 8.4rem);
     }
 
     .grid,