@le-space/ui 0.1.53 → 0.1.55

package/react/index.js

@@ -1,3 +1,6 @@
+// src/react/SponsorRelayFab.tsx
+import React from "react";
+
 // src/shared/constants.ts
 var DEFAULT_INSTANCE_NAME = "sponsor-relay";
 var DEFAULT_MANIFEST_URL = "./rootfs-manifest.json";
@@ -17,6 +20,16 @@ var RELAY_PING_IDLE_STATE = {
   lastReceivedAt: null,
   error: null
 };
+var IDLE_DEPLOYMENT_PROGRESS = {
+  stage: "idle",
+  label: "Ready",
+  progress: 0,
+  status: "info",
+  itemHash: null,
+  detail: null,
+  error: null,
+  timestamp: Date.now()
+};
 var REFRESH_INTERVAL_MS = 3e4;
 var RELAY_PING_INTERVAL_MS = 2e4;
 
@@ -696,18 +709,34 @@ function resolveManifestSource(args) {
 }
 
 // src/shared/wallet-controller.ts
+import { keccak_256 } from "@noble/hashes/sha3";
 function getEthereumProvider() {
   return globalThis.window?.ethereum ?? null;
 }
+function toChecksumAddress(address) {
+  if (!/^0x[0-9a-fA-F]{40}$/.test(address)) {
+    throw new Error("Invalid EVM address.");
+  }
+  const normalized = address.slice(2).toLowerCase();
+  const hash = Array.from(keccak_256(new TextEncoder().encode(normalized))).map((byte) => byte.toString(16).padStart(2, "0")).join("");
+  let result = "0x";
+  for (let index = 0; index < normalized.length; index += 1) {
+    result += Number.parseInt(hash[index], 16) >= 8 ? normalized[index].toUpperCase() : normalized[index];
+  }
+  return result;
+}
 async function connectWallet(provider = getEthereumProvider()) {
   if (!provider) {
     throw new Error("MetaMask provider not found.");
   }
-  const accounts = await provider.request({ method: "eth_requestAccounts" });
+  const accounts = await provider.request({
+    method: "eth_requestAccounts"
+  });
   const chainId = await provider.request({ method: "eth_chainId" });
+  const address = accounts[0] ? toChecksumAddress(accounts[0]) : null;
   return {
-    connected: Boolean(accounts[0]),
-    address: accounts[0] ?? null,
+    connected: Boolean(address),
+    address,
     chainId,
     isMetaMask: Boolean(provider.isMetaMask)
   };
@@ -963,6 +992,16 @@ async function createUnsignedForgetMessage(args) {
   };
 }
 async function forgetAlephMessages(args) {
+  args.onProgress?.({
+    stage: "building-delete-message",
+    label: "Building delete message",
+    progress: 18,
+    status: "info",
+    itemHash: null,
+    detail: [...new Set((args.hashes ?? []).filter(Boolean))].join(", ") || null,
+    error: null,
+    timestamp: Date.now()
+  });
   const unsignedMessage = await createUnsignedForgetMessage({
     sender: args.sender,
     hashes: args.hashes,
@@ -972,18 +1011,49 @@ async function forgetAlephMessages(args) {
     channel: args.channel,
     now: args.now
   });
+  args.onProgress?.({
+    stage: "signing-delete-message",
+    label: "Waiting for delete signature",
+    progress: 42,
+    status: "info",
+    itemHash: unsignedMessage.item_hash,
+    detail: unsignedMessage.item_hash,
+    error: null,
+    timestamp: Date.now()
+  });
   const message = await signAlephMessage(unsignedMessage, args.signer);
+  args.onProgress?.({
+    stage: "broadcasting-delete",
+    label: "Broadcasting delete to Aleph",
+    progress: 68,
+    status: "warning",
+    itemHash: message.item_hash,
+    detail: message.item_hash,
+    error: null,
+    timestamp: Date.now()
+  });
   const { response, httpStatus } = await broadcastAlephMessage2(message, {
     apiHost: args.apiHost,
     sync: args.sync,
     fetch: args.fetch
   });
+  const status = normalizeBroadcastStatus(httpStatus, response?.message_status);
+  args.onProgress?.({
+    stage: status === "rejected" ? "error" : "delete-completed",
+    label: status === "rejected" ? "Delete rejected by Aleph" : "Delete submitted to Aleph",
+    progress: 100,
+    status: status === "rejected" ? "error" : "success",
+    itemHash: message.item_hash,
+    detail: status === "rejected" ? String(response?.details ?? "Aleph rejected this delete request.") : null,
+    error: status === "rejected" ? String(response?.details ?? "Aleph rejected this delete request.") : null,
+    timestamp: Date.now()
+  });
   return {
     sender: args.sender,
     itemHash: message.item_hash,
     response,
     httpStatus,
-    status: normalizeBroadcastStatus(httpStatus, response?.message_status)
+    status
   };
 }
 
@@ -1090,6 +1160,16 @@ async function createUnsignedInstanceMessage(args) {
   };
 }
 async function deployInstance(args) {
+  args.onProgress?.({
+    stage: "building-message",
+    label: "Building deployment message",
+    progress: 32,
+    status: "info",
+    detail: args.content.metadata?.name ?? null,
+    itemHash: null,
+    error: null,
+    timestamp: Date.now()
+  });
   const unsignedMessage = await createUnsignedInstanceMessage({
     sender: args.sender,
     content: args.content,
@@ -1097,17 +1177,47 @@ async function deployInstance(args) {
     channel: args.channel,
     now: args.now
   });
+  args.onProgress?.({
+    stage: "signing-message",
+    label: "Waiting for MetaMask signature",
+    progress: 48,
+    status: "info",
+    detail: unsignedMessage.item_hash,
+    itemHash: unsignedMessage.item_hash,
+    error: null,
+    timestamp: Date.now()
+  });
   const signature = await args.signer(unsignedMessage.sender, [unsignedMessage.chain, unsignedMessage.sender, unsignedMessage.type, unsignedMessage.item_hash].join("\n"));
   const message = {
     ...unsignedMessage,
     signature: signature.startsWith("0x") ? signature : `0x${signature}`
   };
+  args.onProgress?.({
+    stage: "broadcasting",
+    label: "Broadcasting to Aleph",
+    progress: 64,
+    status: "info",
+    detail: message.item_hash,
+    itemHash: message.item_hash,
+    error: null,
+    timestamp: Date.now()
+  });
   const { response, httpStatus } = await broadcastAlephMessage2(message, {
     apiHost: args.apiHost,
     sync: args.sync,
     fetch: args.fetch
   });
   const status = httpStatus === 202 ? "pending" : typeof response.message_status === "string" ? response.message_status : "unknown";
+  args.onProgress?.({
+    stage: status === "processed" ? "deployment-confirmed" : status === "rejected" ? "deployment-rejected" : "waiting-for-aleph",
+    label: status === "processed" ? "Deployment accepted by Aleph" : status === "rejected" ? "Deployment rejected by Aleph" : "Deployment submitted to Aleph",
+    progress: status === "processed" ? 88 : status === "rejected" ? 100 : 78,
+    status: status === "processed" ? "success" : status === "rejected" ? "error" : "warning",
+    detail: status === "rejected" ? String(response.details ?? "Aleph rejected this deployment.") : null,
+    itemHash: message.item_hash,
+    error: status === "rejected" ? String(response.details ?? "Aleph rejected this deployment.") : null,
+    timestamp: Date.now()
+  });
   return {
     itemHash: message.item_hash,
     httpStatus,
@@ -1118,6 +1228,25 @@ async function deployInstance(args) {
   };
 }
 
+// src/shared/events.ts
+function createDeploymentProgressEmitter() {
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    emit(event) {
+      listeners.forEach((listener) => listener(event));
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    clear() {
+      listeners.clear();
+    }
+  };
+}
+
 // src/shared/controller.ts
 function defaultState(props = {}) {
   return {
@@ -1167,7 +1296,8 @@ function defaultState(props = {}) {
     selectedCrn: null,
     instances: [],
     relayPing: RELAY_PING_IDLE_STATE,
-    lastDeploymentHash: null
+    lastDeploymentHash: null,
+    deploymentProgress: IDLE_DEPLOYMENT_PROGRESS
   };
 }
 async function sha256Hex(payload) {
@@ -1361,6 +1491,7 @@ var SponsorRelayController = class {
   pingTimer = null;
   stopWalletWatch = null;
   props;
+  progressEmitter = createDeploymentProgressEmitter();
   constructor(props = {}) {
     this.props = props;
     this.state = defaultState(props);
@@ -1371,6 +1502,9 @@ var SponsorRelayController = class {
       twoN6ApiHost: props.twoN6ApiHost
     });
   }
+  subscribeToDeploymentProgress(listener) {
+    return this.progressEmitter.subscribe(listener);
+  }
   subscribe(subscriber) {
     this.subscribers.add(subscriber);
     return () => {
@@ -1395,6 +1529,18 @@ var SponsorRelayController = class {
     };
     this.emit();
   }
+  emitProgress(event) {
+    const nextEvent = {
+      ...event,
+      timestamp: Date.now()
+    };
+    this.patch({
+      deploymentProgress: nextEvent,
+      statusText: event.error ?? event.detail ?? event.label,
+      errorText: event.status === "error" ? event.error ?? event.detail ?? event.label : this.state.errorText
+    });
+    this.progressEmitter.emit(nextEvent);
+  }
   async init() {
     this.stopWalletWatch = watchWallet(() => {
       void this.refreshWalletDerivedState();
@@ -1514,11 +1660,25 @@ var SponsorRelayController = class {
       statusText: "Refreshing relay sponsor data"
     });
     try {
+      this.emitProgress({
+        stage: "loading-manifest",
+        label: "Loading manifest",
+        progress: 8,
+        status: "info",
+        detail: this.state.manifestUrl
+      });
       const manifestState = await resolveManifest({
         manifestUrl: this.state.manifestUrl,
         manifestJson: this.state.manifestJson
       });
       const manifest = manifestState.manifest;
+      this.emitProgress({
+        stage: "loading-pricing",
+        label: "Loading pricing and CRNs",
+        progress: 18,
+        status: "info",
+        detail: "Fetching live Aleph pricing and compatible CRNs."
+      });
       const [pricingSummary, crns] = await Promise.all([
         fetchInstancePricing(this.client.apiHost),
         this.client.fetchCrns()
@@ -1526,6 +1686,13 @@ var SponsorRelayController = class {
       let balance = this.state.balance;
       let instances = [];
       if (this.state.wallet.address) {
+        this.emitProgress({
+          stage: "loading-balance",
+          label: "Loading wallet balance",
+          progress: 28,
+          status: "info",
+          detail: this.state.wallet.address
+        });
         const [nextBalance, rawInstances] = await Promise.all([
           this.client.fetchBalance(this.state.wallet.address),
           this.state.showInstances ? this.client.fetchInstances(this.state.wallet.address) : Promise.resolve([])
@@ -1545,6 +1712,13 @@ var SponsorRelayController = class {
       let rootfsVerified = false;
       let rootfsResolution = null;
       if (manifestState.valid && manifest) {
+        this.emitProgress({
+          stage: "verifying-rootfs",
+          label: "Verifying rootfs",
+          progress: 38,
+          status: "info",
+          detail: manifest.rootfsItemHash
+        });
         rootfsVerified = await verifyRootfsExists(manifest.rootfsItemHash, this.client.apiHost);
         rootfsResolution = await resolveRootfsReference(manifest.rootfsItemHash, this.client.apiHost);
       }
@@ -1569,12 +1743,26 @@ var SponsorRelayController = class {
         statusText: "Relay sponsor data ready"
       });
       this.recomputePricingSummary();
+      this.emitProgress({
+        stage: "completed",
+        label: "Data ready",
+        progress: 100,
+        status: "success",
+        detail: "Manifest, pricing, and wallet state are ready."
+      });
     } catch (error) {
       this.patch({
         busy: { refreshing: false },
         errorText: error instanceof Error ? error.message : String(error),
         statusText: "Refresh failed"
       });
+      this.emitProgress({
+        stage: "error",
+        label: "Refresh failed",
+        progress: 100,
+        status: "error",
+        error: error instanceof Error ? error.message : String(error)
+      });
     }
   }
   async refreshRelayPing() {
@@ -1596,7 +1784,21 @@ var SponsorRelayController = class {
       statusText: "Broadcasting deployment"
     });
     try {
+      this.emitProgress({
+        stage: "validating",
+        label: "Validating deployment",
+        progress: 5,
+        status: "info",
+        detail: "Checking wallet, manifest, rootfs, pricing, and SSH key."
+      });
       const spec = tierSpec(this.state.pricingSummary.pricing, this.state.pricingSummary.tier);
+      this.emitProgress({
+        stage: "selecting-crn",
+        label: "Selecting CRN",
+        progress: 18,
+        status: "info",
+        detail: this.state.selectedCrn?.name ?? this.state.selectedCrn?.hash ?? "Auto-selected compatible CRN"
+      });
       const content = createInstanceContent({
         address: this.state.wallet.address,
         name: this.state.instanceName.trim(),
@@ -1615,20 +1817,47 @@ var SponsorRelayController = class {
         signer: personalSign,
         fetch: (url, init) => fetch(url, init),
         apiHost: this.client.apiHost,
-        sync: false
+        sync: false,
+        onProgress: (event) => {
+          this.emitProgress(event);
+        }
       });
       this.patch({
         busy: { deploying: false },
         statusText: `Deployment submitted: ${result.itemHash}`,
         lastDeploymentHash: result.itemHash
       });
+      this.emitProgress({
+        stage: "refreshing-instances",
+        label: "Refreshing instances",
+        progress: 92,
+        status: "info",
+        itemHash: result.itemHash,
+        detail: "Reloading deployments and runtime state."
+      });
       await this.refresh();
+      this.emitProgress({
+        stage: "completed",
+        label: "Deployment completed",
+        progress: 100,
+        status: result.status === "rejected" ? "error" : "success",
+        itemHash: result.itemHash,
+        detail: result.status === "rejected" ? result.rejectionReason ?? "Aleph rejected the deployment." : "Deployment submitted and synced back into the panel.",
+        error: result.status === "rejected" ? result.rejectionReason ?? "Aleph rejected the deployment." : null
+      });
     } catch (error) {
       this.patch({
         busy: { deploying: false },
         errorText: error instanceof Error ? error.message : String(error),
         statusText: "Deployment failed"
       });
+      this.emitProgress({
+        stage: "error",
+        label: "Deployment failed",
+        progress: 100,
+        status: "error",
+        error: error instanceof Error ? error.message : String(error)
+      });
     }
   }
   async deleteInstance(instanceHash) {
@@ -1642,6 +1871,14 @@ var SponsorRelayController = class {
       statusText: `Deleting ${instanceHash}`
     });
     try {
+      this.emitProgress({
+        stage: "validating",
+        label: "Validating delete request",
+        progress: 6,
+        status: "warning",
+        itemHash: instanceHash,
+        detail: "Preparing Aleph FORGET message."
+      });
       await forgetAlephMessages({
         sender: this.state.wallet.address,
         hashes: [instanceHash],
@@ -1653,13 +1890,33 @@ var SponsorRelayController = class {
           status: response.status,
           json: async () => await response.json()
         })),
-        apiHost: this.client.apiHost
+        apiHost: this.client.apiHost,
+        onProgress: (event) => {
+          this.emitProgress(event);
+        }
       });
       this.patch({
         busy: { deletingInstanceHash: null },
         statusText: `Deletion submitted for ${instanceHash}`
       });
+      this.emitProgress({
+        stage: "refreshing-instances",
+        label: "Refreshing instances after delete",
+        progress: 92,
+        status: "info",
+        itemHash: instanceHash,
+        detail: "Reloading current deployments."
+      });
       await this.refresh();
+      this.emitProgress({
+        stage: "completed",
+        label: "Delete completed",
+        progress: 100,
+        status: "success",
+        itemHash: instanceHash,
+        detail: "Delete request submitted and deployments refreshed.",
+        error: null
+      });
     } catch (error) {
       this.patch({
         busy: { deletingInstanceHash: null },
@@ -1708,13 +1965,10 @@ function useSponsorRelayController(props) {
 
 // src/react/SponsorRelayFab.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var panelStyle = {
+var basePanelStyle = {
   position: "fixed",
-  right: "1.4rem",
-  bottom: "11.5rem",
   zIndex: 9999,
   width: "min(28rem, calc(100vw - 2rem))",
-  maxHeight: "calc(100vh - 12.5rem)",
   overflow: "auto",
   border: "1px solid rgba(255,255,255,0.12)",
   borderRadius: "1.4rem",
@@ -1735,33 +1989,282 @@ var fieldStyle = {
   fontSize: "0.98rem",
   lineHeight: 1.45
 };
+function progressToneColor(status) {
+  switch (status) {
+    case "success":
+      return "#37d67a";
+    case "warning":
+      return "#ffc83f";
+    case "error":
+      return "#e91315";
+    default:
+      return "#0176ce";
+  }
+}
+function progressBadgeLabel(stage) {
+  switch (stage) {
+    case "building-delete-message":
+    case "signing-delete-message":
+    case "broadcasting-delete":
+    case "delete-completed":
+      return "DELETE";
+    case "error":
+      return "ERROR";
+    case "completed":
+      return "DONE";
+    default:
+      return "DEPLOY";
+  }
+}
+function launcherIndicator(state) {
+  if (state.deploymentProgress.stage !== "idle" && state.deploymentProgress.stage !== "completed") {
+    return {
+      label: state.deploymentProgress.progress > 0 ? `${Math.round(state.deploymentProgress.progress)}%` : progressBadgeLabel(state.deploymentProgress.stage),
+      detail: state.deploymentProgress.label,
+      tone: state.deploymentProgress.status
+    };
+  }
+  if (state.deploymentProgress.stage === "completed") {
+    return {
+      label: "DONE",
+      detail: state.deploymentProgress.label,
+      tone: state.deploymentProgress.status === "error" ? "error" : "success"
+    };
+  }
+  if (state.errorText) {
+    return {
+      label: "ERR",
+      detail: state.errorText,
+      tone: "error"
+    };
+  }
+  if (!state.wallet.connected) {
+    return {
+      label: "WALLET",
+      detail: "Connect MetaMask",
+      tone: "warning"
+    };
+  }
+  if (state.rootfsHealth.tone === "error") {
+    return {
+      label: "ROOTFS",
+      detail: state.rootfsHealth.label,
+      tone: "error"
+    };
+  }
+  if (state.rootfsHealth.tone === "caution") {
+    return {
+      label: "CHECK",
+      detail: state.rootfsHealth.label,
+      tone: "warning"
+    };
+  }
+  if (state.busy.refreshing) {
+    return {
+      label: "SYNC",
+      detail: "Refreshing relay state",
+      tone: "info"
+    };
+  }
+  return {
+    label: "READY",
+    detail: state.selectedCrn?.name ?? "Ready to deploy",
+    tone: "success"
+  };
+}
 function SponsorRelayFab(props) {
   const { controller, state } = useSponsorRelayController(props);
   const launcherMode = props.launcherMode ?? "floating";
+  const indicator = launcherIndicator(state);
+  const [successFlash, setSuccessFlash] = React.useState(false);
+  const [hovered, setHovered] = React.useState(false);
+  const launcherRef = React.useRef(null);
+  const [inlinePanelStyle, setInlinePanelStyle] = React.useState(null);
+  const [compactInlineLabel, setCompactInlineLabel] = React.useState(false);
+  React.useEffect(() => {
+    if (state.deploymentProgress.stage !== "completed" || state.deploymentProgress.status !== "success") {
+      return;
+    }
+    setSuccessFlash(true);
+    const timeout = window.setTimeout(() => {
+      setSuccessFlash(false);
+    }, 1400);
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [
+    state.deploymentProgress.stage,
+    state.deploymentProgress.status,
+    state.deploymentProgress.timestamp
+  ]);
+  React.useEffect(() => {
+    if (launcherMode !== "inline" || !state.open) {
+      return;
+    }
+    const updateInlinePanelStyle = () => {
+      const launcher = launcherRef.current;
+      if (launcher == null) {
+        return;
+      }
+      const rect = launcher.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const anchorRight = Math.max(16, viewportWidth - rect.right);
+      const top = Math.max(72, rect.bottom + 12);
+      setInlinePanelStyle({
+        ...basePanelStyle,
+        top,
+        right: anchorRight,
+        maxHeight: `calc(100vh - ${Math.min(viewportHeight - 16, top + 16)}px)`,
+        width: "min(30rem, calc(100vw - 1.5rem))"
+      });
+    };
+    updateInlinePanelStyle();
+    window.addEventListener("resize", updateInlinePanelStyle);
+    window.addEventListener("scroll", updateInlinePanelStyle, true);
+    return () => {
+      window.removeEventListener("resize", updateInlinePanelStyle);
+      window.removeEventListener("scroll", updateInlinePanelStyle, true);
+    };
+  }, [launcherMode, state.open]);
+  React.useEffect(() => {
+    if (launcherMode !== "inline") {
+      setCompactInlineLabel(false);
+      return;
+    }
+    const updateCompactInlineLabel = () => {
+      setCompactInlineLabel(window.innerWidth < 1240);
+    };
+    updateCompactInlineLabel();
+    window.addEventListener("resize", updateCompactInlineLabel);
+    return () => {
+      window.removeEventListener("resize", updateCompactInlineLabel);
+    };
+  }, [launcherMode]);
+  const progressActive = state.deploymentProgress.stage !== "idle" && state.deploymentProgress.stage !== "completed" && state.deploymentProgress.stage !== "error";
+  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 ? "0 14px 30px rgba(79, 70, 229, 0.28)" : "0 10px 24px rgba(99, 102, 241, 0.22)" : void 0;
+  const inlineButtonBackground = indicator.tone === "error" ? "linear-gradient(135deg, #b91c1c 0%, #dc2626 100%)" : indicator.tone === "warning" ? "linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%)" : indicator.tone === "success" ? "linear-gradient(135deg, #4f46e5 0%, #6366f1 100%)" : "linear-gradient(135deg, #4f46e5 0%, #6366f1 100%)";
+  const inlineButtonBorder = indicator.tone === "error" ? "1px solid rgba(254, 202, 202, 0.45)" : indicator.tone === "warning" ? "1px solid rgba(196, 181, 253, 0.42)" : "1px solid rgba(199, 210, 254, 0.42)";
+  const inlineBadgeBackground = indicator.tone === "error" ? "rgba(127, 29, 29, 0.88)" : indicator.tone === "warning" ? "rgba(88, 28, 135, 0.88)" : indicator.tone === "success" ? "rgba(49, 46, 129, 0.92)" : "rgba(30, 41, 59, 0.92)";
+  const inlineBadgeBorder = indicator.tone === "error" ? "1px solid rgba(254, 202, 202, 0.34)" : indicator.tone === "warning" ? "1px solid rgba(233, 213, 255, 0.28)" : indicator.tone === "success" ? "1px solid rgba(191, 219, 254, 0.24)" : "1px solid rgba(191, 219, 254, 0.2)";
+  const panelStyle = launcherMode === "inline" ? inlinePanelStyle ?? {
+    ...basePanelStyle,
+    top: "4.75rem",
+    right: "1rem",
+    maxHeight: "calc(100vh - 6rem)",
+    width: "min(30rem, calc(100vw - 1.5rem))"
+  } : {
+    ...basePanelStyle,
+    right: "1.4rem",
+    bottom: "11.5rem",
+    maxHeight: "calc(100vh - 12.5rem)"
+  };
+  const launcherLabel = launcherMode === "inline" && compactInlineLabel ? "Relay" : "Sponsor Relay";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       "button",
       {
+        ref: launcherRef,
         type: "button",
         onClick: () => controller.toggleOpen(),
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        onFocus: () => setHovered(true),
+        onBlur: () => setHovered(false),
+        title: indicator.detail ?? "Sponsor Relay",
         style: {
           position: launcherMode === "floating" ? "fixed" : "relative",
           right: launcherMode === "floating" ? "1.4rem" : void 0,
           bottom: launcherMode === "floating" ? "5.8rem" : void 0,
           zIndex: launcherMode === "floating" ? 1e4 : "auto",
           borderRadius: "999px",
-          border: "2px solid rgba(255,255,255,0.9)",
-          background: "linear-gradient(135deg, #e91315 0%, #ffc83f 100%)",
+          border: launcherMode === "floating" ? "2px solid rgba(255,255,255,0.9)" : inlineButtonBorder,
+          background: launcherMode === "floating" ? "linear-gradient(135deg, #e91315 0%, #ffc83f 100%)" : inlineButtonBackground,
           color: "white",
-          padding: launcherMode === "floating" ? "0.9rem 1.2rem" : "0.55rem 0.9rem",
+          minHeight: launcherMode === "floating" ? void 0 : "2.25rem",
+          padding: launcherMode === "floating" ? "0.9rem 1.2rem" : "0.42rem 0.56rem 0.42rem 0.76rem",
           fontFamily: '"Epilogue", sans-serif',
           fontWeight: 700,
-          fontSize: launcherMode === "floating" ? "0.84rem" : "0.78rem",
+          fontSize: launcherMode === "floating" ? "0.84rem" : "0.73rem",
           textTransform: "uppercase",
           letterSpacing: "0.08em",
-          cursor: "pointer"
+          cursor: "pointer",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: launcherMode === "floating" ? "0.45rem" : "0.34rem",
+          boxShadow: pulseShadow,
+          transform: `translateY(${hovered && !progressActive ? "-1px" : "0"}) scale(${pulseScale})`,
+          transition: "transform 180ms ease, box-shadow 220ms ease, background 220ms ease, border-color 220ms ease"
         },
-        children: "Sponsor Relay"
+        children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "0.36rem"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    style: {
+                      width: launcherMode === "floating" ? "0.5rem" : "0.42rem",
+                      height: launcherMode === "floating" ? "0.5rem" : "0.42rem",
+                      borderRadius: "999px",
+                      background: launcherMode === "floating" ? "rgba(255,255,255,0.96)" : "#f59e0b",
+                      boxShadow: launcherMode === "floating" ? "0 0 0 3px rgba(255,255,255,0.22)" : "0 0 0 3px rgba(245, 158, 11, 0.18)"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { children: launcherLabel })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "0.36rem",
+                padding: launcherMode === "floating" ? "0.2rem 0.42rem" : "0.21rem 0.5rem",
+                minWidth: launcherMode === "floating" ? void 0 : "3.8rem",
+                borderRadius: "999px",
+                background: launcherMode === "floating" ? "rgba(15, 23, 42, 0.18)" : inlineBadgeBackground,
+                border: launcherMode === "floating" ? "1px solid rgba(255,255,255,0.18)" : inlineBadgeBorder,
+                fontSize: launcherMode === "floating" ? "0.62rem" : "0.61rem",
+                fontWeight: launcherMode === "floating" ? 700 : 800,
+                lineHeight: 1,
+                letterSpacing: "0.08em",
+                justifyContent: "center",
+                boxShadow: launcherMode === "floating" ? void 0 : `inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 16px ${progressToneColor(indicator.tone)}22`
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    style: {
+                      width: "0.42rem",
+                      height: "0.42rem",
+                      borderRadius: "999px",
+                      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"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { children: indicator.label })
+              ]
+            }
+          )
+        ]
       }
     ),
     state.open ? /* @__PURE__ */ jsxs("div", { children: [
@@ -1778,66 +2281,274 @@ function SponsorRelayFab(props) {
         }
       ),
       /* @__PURE__ */ jsxs("aside", { style: panelStyle, children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", gap: "0.75rem", alignItems: "center" }, children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("div", { style: { color: "#9fb2ca", fontSize: "0.72rem", textTransform: "uppercase", letterSpacing: "0.08em" }, children: "Aleph VM credit deployer" }),
-            /* @__PURE__ */ jsx("h2", { style: { margin: "0.2rem 0 0", fontFamily: '"Epilogue", sans-serif' }, children: "Sponsor Relay" })
-          ] }),
-          /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void controller.refresh(), children: state.busy.refreshing ? "Syncing" : "Refresh" })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              gap: "0.75rem",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      color: "#9fb2ca",
+                      fontSize: "0.72rem",
+                      textTransform: "uppercase",
+                      letterSpacing: "0.08em"
+                    },
+                    children: "Aleph VM credit deployer"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    style: {
+                      margin: "0.2rem 0 0",
+                      fontFamily: '"Epilogue", sans-serif'
+                    },
+                    children: "Sponsor Relay"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void controller.refresh(), children: state.busy.refreshing ? "Syncing" : "Refresh" })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx("p", { style: { color: "#9fb2ca" }, children: state.statusText }),
         state.errorText ? /* @__PURE__ */ jsx("p", { style: { color: "#ffd9d9" }, children: state.errorText }) : null,
-        /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: "0.75rem", marginTop: "0.9rem" }, children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              style: fieldStyle,
-              value: state.manifestUrl,
-              onChange: (event) => controller.setManifestUrl(event.currentTarget.value),
-              placeholder: "Manifest URL"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              style: fieldStyle,
-              value: state.instanceName,
-              onChange: (event) => controller.setInstanceName(event.currentTarget.value),
-              placeholder: "Instance name"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "select",
-            {
-              style: fieldStyle,
-              value: state.pricingSummary.tier?.id ?? state.tierId,
-              onChange: (event) => controller.setTierId(event.currentTarget.value),
-              children: (state.pricingSummary.pricing?.tiers ?? []).map((tier) => /* @__PURE__ */ jsx("option", { value: tier.id, children: tier.id }, tier.id))
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "textarea",
-            {
-              style: fieldStyle,
-              rows: 3,
-              value: state.sshPublicKey,
-              onChange: (event) => controller.setSshPublicKey(event.currentTarget.value),
-              placeholder: "SSH public key"
-            }
-          ),
-          /* @__PURE__ */ jsxs("details", { children: [
-            /* @__PURE__ */ jsx("summary", { children: "Paste Manifest" }),
-            /* @__PURE__ */ jsx(
-              "textarea",
-              {
-                style: { ...fieldStyle, marginTop: "0.65rem" },
-                rows: 7,
-                value: state.manifestJson,
-                onChange: (event) => controller.setManifestJson(event.currentTarget.value)
-              }
-            )
-          ] })
-        ] }),
+        state.deploymentProgress.stage !== "idle" ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginTop: "0.85rem",
+              padding: "0.75rem 0.8rem",
+              borderRadius: "1rem",
+              border: "1px solid rgba(255,255,255,0.1)",
+              background: "linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03))",
+              boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    gap: "0.75rem",
+                    alignItems: "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          gap: "0.5rem",
+                          alignItems: "center",
+                          minWidth: 0
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              style: {
+                                display: "inline-flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                minWidth: "3.9rem",
+                                padding: "0.22rem 0.45rem",
+                                borderRadius: "999px",
+                                background: `${progressToneColor(state.deploymentProgress.status)}22`,
+                                color: progressToneColor(
+                                  state.deploymentProgress.status
+                                ),
+                                fontSize: "0.64rem",
+                                fontWeight: 800,
+                                letterSpacing: "0.08em",
+                                textTransform: "uppercase"
+                              },
+                              children: progressBadgeLabel(state.deploymentProgress.stage)
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "strong",
+                            {
+                              style: {
+                                fontSize: "0.84rem",
+                                lineHeight: 1.2,
+                                whiteSpace: "nowrap",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis"
+                              },
+                              children: state.deploymentProgress.label
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "0.72rem",
+                          color: "#9fb2ca",
+                          fontFamily: '"DM Mono", monospace'
+                        },
+                        children: [
+                          String(
+                            Math.round(state.deploymentProgress.progress)
+                          ).padStart(3, " "),
+                          "%"
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    marginTop: "0.5rem",
+                    width: "100%",
+                    height: "0.34rem",
+                    borderRadius: "999px",
+                    background: "rgba(255,255,255,0.08)",
+                    overflow: "hidden"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        width: `${Math.max(0, Math.min(100, state.deploymentProgress.progress))}%`,
+                        height: "100%",
+                        borderRadius: "999px",
+                        background: progressToneColor(
+                          state.deploymentProgress.status
+                        ),
+                        transition: "width 180ms ease"
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    marginTop: "0.45rem",
+                    display: "grid",
+                    gap: "0.28rem"
+                  },
+                  children: [
+                    state.deploymentProgress.itemHash ? /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          color: "#9fb2ca",
+                          fontSize: "0.7rem",
+                          fontFamily: '"DM Mono", monospace',
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis"
+                        },
+                        children: [
+                          "hash ",
+                          shortHash(state.deploymentProgress.itemHash, 10, 8)
+                        ]
+                      }
+                    ) : null,
+                    state.deploymentProgress.detail ? /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          color: "#9fb2ca",
+                          fontSize: "0.72rem",
+                          lineHeight: 1.3,
+                          fontFamily: state.deploymentProgress.detail.includes("0x") || state.deploymentProgress.detail.includes("Qm") ? '"DM Mono", monospace' : void 0
+                        },
+                        children: state.deploymentProgress.detail
+                      }
+                    ) : null,
+                    state.deploymentProgress.error ? /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          color: "#ffd9d9",
+                          fontSize: "0.72rem",
+                          lineHeight: 1.3
+                        },
+                        children: state.deploymentProgress.error
+                      }
+                    ) : null
+                  ]
+                }
+              )
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: { display: "grid", gap: "0.75rem", marginTop: "0.9rem" },
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  style: fieldStyle,
+                  value: state.manifestUrl,
+                  onChange: (event) => controller.setManifestUrl(event.currentTarget.value),
+                  placeholder: "Manifest URL"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  style: fieldStyle,
+                  value: state.instanceName,
+                  onChange: (event) => controller.setInstanceName(event.currentTarget.value),
+                  placeholder: "Instance name"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  style: fieldStyle,
+                  value: state.pricingSummary.tier?.id ?? state.tierId,
+                  onChange: (event) => controller.setTierId(event.currentTarget.value),
+                  children: (state.pricingSummary.pricing?.tiers ?? []).map((tier) => /* @__PURE__ */ jsx("option", { value: tier.id, children: tier.id }, tier.id))
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  style: fieldStyle,
+                  rows: 3,
+                  value: state.sshPublicKey,
+                  onChange: (event) => controller.setSshPublicKey(event.currentTarget.value),
+                  placeholder: "SSH public key"
+                }
+              ),
+              /* @__PURE__ */ jsxs("details", { children: [
+                /* @__PURE__ */ jsx("summary", { children: "Paste Manifest" }),
+                /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    style: { ...fieldStyle, marginTop: "0.65rem" },
+                    rows: 7,
+                    value: state.manifestJson,
+                    onChange: (event) => controller.setManifestJson(event.currentTarget.value)
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: "0.55rem", marginTop: "1rem" }, children: [
           /* @__PURE__ */ jsxs("div", { children: [
             formatNumber(state.pricingSummary.availableCredits, 0),
@@ -1863,40 +2574,68 @@ function SponsorRelayFab(props) {
           "Latest deployment: ",
           shortHash(state.lastDeploymentHash)
         ] }) : null,
-        state.showInstances ? /* @__PURE__ */ jsx("div", { style: { marginTop: "1rem", display: "grid", gap: "0.7rem" }, children: state.instances.map((entry) => /* @__PURE__ */ jsxs("details", { open: true, children: [
-          /* @__PURE__ */ jsx("summary", { children: (entry.instance.content?.metadata?.name ?? "relay") + " \xB7 " + shortHash(entry.instance.item_hash) }),
-          /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: "0.35rem", marginTop: "0.55rem" }, children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              "Status: ",
-              entry.details.messageStatus
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              "Host IPv4: ",
-              entry.details.hostIpv4 ?? "-"
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              "IPv6: ",
-              entry.details.ipv6 ?? "-"
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              "VM IPv4: ",
-              entry.details.vmIpv4 ?? "-"
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              "SSH: ",
-              entry.details.sshCommand ?? "-"
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              "Ports: ",
-              joinMappedPorts(entry.details.mappedPorts)
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              "Submitted: ",
-              formatDateTime(entry.instance.reception_time ?? entry.instance.time)
-            ] }),
-            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void controller.deleteInstance(entry.instance.item_hash), children: state.busy.deletingInstanceHash === entry.instance.item_hash ? "Deleting\u2026" : "Delete" })
-          ] })
-        ] }, entry.instance.item_hash)) }) : null
+        state.showInstances ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: { marginTop: "1rem", display: "grid", gap: "0.7rem" },
+            children: state.instances.map((entry) => /* @__PURE__ */ jsxs("details", { open: true, children: [
+              /* @__PURE__ */ jsx("summary", { children: (entry.instance.content?.metadata?.name ?? "relay") + " \xB7 " + shortHash(entry.instance.item_hash) }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "grid",
+                    gap: "0.35rem",
+                    marginTop: "0.55rem"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      "Status: ",
+                      entry.details.messageStatus
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      "Host IPv4: ",
+                      entry.details.hostIpv4 ?? "-"
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      "IPv6: ",
+                      entry.details.ipv6 ?? "-"
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      "VM IPv4: ",
+                      entry.details.vmIpv4 ?? "-"
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      "SSH: ",
+                      entry.details.sshCommand ?? "-"
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      "Ports: ",
+                      joinMappedPorts(entry.details.mappedPorts)
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      "Submitted:",
+                      " ",
+                      formatDateTime(
+                        entry.instance.reception_time ?? entry.instance.time
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => void controller.deleteInstance(
+                          entry.instance.item_hash
+                        ),
+                        children: state.busy.deletingInstanceHash === entry.instance.item_hash ? "Deleting\u2026" : "Delete"
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }, entry.instance.item_hash))
+          }
+        ) : null
       ] })
     ] }) : null
   ] });