refactor(vault): address artifact-modal review feedback

Author: kirugan

services/vault/src/components/deposit/RecoveryArtifactsCard.tsx

@@ -16,8 +16,9 @@ import { COPY } from "@/copy";
 import { useArtifactDownload } from "@/hooks/deposit/useArtifactDownload";
 import { hasArtifactsDownloaded } from "@/utils/artifactDownloadStorage";
 
-const BYTES_PER_MB = 1024 * 1024;
-const BYTES_PER_GB = 1024 * 1024 * 1024;
+const BYTES_PER_KB = 1024;
+const BYTES_PER_MB = BYTES_PER_KB * 1024;
+const BYTES_PER_GB = BYTES_PER_MB * 1024;
 
 // Brand orange (Tailwind's `secondary-main` token), inlined because
 // ProgressBar takes a raw CSS color rather than a class name.
@@ -65,7 +66,7 @@ function formatBytes(bytes: number): string {
   if (bytes >= BYTES_PER_MB) {
     return `${Math.round(bytes / BYTES_PER_MB)} MB`;
   }
-  return `${Math.round(bytes / 1024)} KB`;
+  return `${Math.round(bytes / BYTES_PER_KB)} KB`;
 }
 
 interface RecoveryArtifactsCardProps {
@@ -168,7 +169,10 @@ export const RecoveryArtifactsCard = forwardRef<
           <>
             <div className="flex items-baseline justify-between gap-2">
               <span className="text-base leading-[1.5] tracking-[0.15px] text-accent-primary">
-                <span>{formatBytes(receivedBytes)}</span>
+                {/* Clamp to total so a gzip'd Content-Length or an
+                    underestimated fallback can't render "1.40 GB / 1.30 GB"
+                    — matches the percent/bar clamps below. */}
+                <span>{formatBytes(Math.min(receivedBytes, totalBytes))}</span>
                 <span className="text-accent-secondary">
                   {" / "}
                   {formatBytes(totalBytes)}

services/vault/src/copy.ts

@@ -312,15 +312,23 @@ export const COPY = {
       cardSizeDownloaded: "~1 GB",
       downloadButton: "Download Artifacts",
       downloadingButton: "Downloading...",
-      cancelDownloadButton: "Cancel",
-      downloadedLabel: "Downloaded",
       retryButton: "Retry",
       walletSignatureHint:
         "You may be asked to approve a signature in your wallet to authenticate.",
       // Caption under the progress bar while bytes are streaming.
       doNotCloseHint: "Do not close this window while downloading.",
       cannotAuthenticate:
         "Cannot authenticate with the vault provider. Please refresh and try again.",
+      // Progress/status lines surfaced in the card while the download hook
+      // works through its fetch / re-auth / wait-for-signatures states.
+      fetchingArtifacts: "Fetching artifacts from vault provider...",
+      reauthenticating: "Re-authenticating with vault provider...",
+      waitingForSignatures:
+        "Waiting for vault provider to process signatures...",
+      // Error fallbacks shown when a thrown error carries no usable message.
+      authenticationFailed: "Authentication failed",
+      reauthenticationFailed: "Re-authentication failed",
+      downloadFailed: "Download failed",
     },
     form: {
       computingAllocation: "Computing allocation...",

services/vault/src/hooks/deposit/useArtifactDownload.ts

@@ -96,7 +96,7 @@ export function useArtifactDownload(options?: {
       setState({
         ...INITIAL_STATE,
         loading: true,
-        progress: "Fetching artifacts from vault provider...",
+        progress: COPY.deposit.recoveryArtifacts.fetchingArtifacts,
       });
 
       const normalizedPeginTxid = stripHexPrefix(peginTxid);
@@ -136,7 +136,7 @@ export function useArtifactDownload(options?: {
           setError(
             primeErr instanceof Error
               ? primeErr.message
-              : "Authentication failed",
+              : COPY.deposit.recoveryArtifacts.authenticationFailed,
           );
           return false;
         }
@@ -157,7 +157,7 @@ export function useArtifactDownload(options?: {
 
         setState((prev) => ({
           ...prev,
-          progress: "Re-authenticating with vault provider...",
+          progress: COPY.deposit.recoveryArtifacts.reauthenticating,
           // Reset byte counters so the bar doesn't linger between attempts;
           // the next fetchAndDownloadArtifacts call seeds them from 0 again.
           receivedBytes: 0,
@@ -215,7 +215,7 @@ export function useArtifactDownload(options?: {
           if (isPreDepositorSignaturesError(err)) {
             setState((prev) => ({
               ...prev,
-              progress: "Waiting for vault provider to process signatures...",
+              progress: COPY.deposit.recoveryArtifacts.waitingForSignatures,
               receivedBytes: 0,
               totalBytes: 0,
             }));
@@ -232,7 +232,7 @@ export function useArtifactDownload(options?: {
               if (primed && !cancelledRef.current) {
                 setState((prev) => ({
                   ...prev,
-                  progress: "Fetching artifacts from vault provider...",
+                  progress: COPY.deposit.recoveryArtifacts.fetchingArtifacts,
                 }));
                 continue;
               }
@@ -241,14 +241,18 @@ export function useArtifactDownload(options?: {
               setError(
                 primeErr instanceof Error
                   ? primeErr.message
-                  : "Re-authentication failed",
+                  : COPY.deposit.recoveryArtifacts.reauthenticationFailed,
               );
               return;
             }
           }
 
           if (cancelledRef.current) return;
-          setError(err instanceof Error ? err.message : "Download failed");
+          setError(
+            err instanceof Error
+              ? err.message
+              : COPY.deposit.recoveryArtifacts.downloadFailed,
+          );
           return;
         }
       }