chore(ui): polish batch — downloads icon, button alignment, progress spacing, Indelible spinner

components/ProgressLine.vue

@@ -1,11 +1,25 @@
 <template>
+  <!-- Indeterminate single-bar override: used when the upload backend gives
+       us no progress signal at all (Indelible has no per-chunk event stream,
+       so the segmented quote/pay/store bar would stay empty for the entire
+       transfer). The pulsing single bar at least confirms the row is alive. -->
+  <div
+    v-if="indeterminate"
+    class="h-1 w-full min-w-[8rem] overflow-hidden rounded bg-autonomi-surface"
+    role="progressbar"
+    aria-valuemin="0"
+    aria-valuemax="100"
+  >
+    <div class="h-full w-1/3 animate-pulse bg-autonomi-blue/60" />
+  </div>
+
   <!-- Segmented bar for uploads: [quote] · [pay] · [store]
        For downloads: a single bar (no payment phase).
        Stage detail text is rendered separately by the parent (next to the
        status badge), not here — this component is purely the bar. -->
   <div
-    v-if="kind === 'upload'"
-    class="mt-1 flex w-full min-w-[8rem] items-center gap-1.5"
+    v-else-if="kind === 'upload'"
+    class="flex w-full min-w-[8rem] items-center gap-1.5"
     role="progressbar"
     :aria-valuenow="overallPercent"
     aria-valuemin="0"
@@ -18,7 +32,7 @@
 
   <div
     v-else
-    class="mt-1 h-1 w-full min-w-[8rem] overflow-hidden rounded bg-autonomi-surface"
+    class="h-1 w-full min-w-[8rem] overflow-hidden rounded bg-autonomi-surface"
     role="progressbar"
     :aria-valuenow="overallPercent"
     aria-valuemin="0"
@@ -50,6 +64,10 @@ const props = defineProps<{
   stage: TransferStage | undefined
   stageDone: number | undefined
   stageTotal: number | undefined
+  /** Render the indeterminate single bar regardless of `kind`. Used when the
+   *  backend produces no progress events (e.g. Indelible). Optional; defaults
+   *  to false for backwards compatibility with existing callers. */
+  indeterminate?: boolean
 }>()
 
 function clamp(p: number) {

pages/files.vue

@@ -107,16 +107,19 @@
                 @click="onRowClick(file)"
               >
                 <td class="px-4 py-2.5">
-                  <div>{{ file.name }}</div>
-                  <ProgressLine
-                    v-if="showsProgressBar(file)"
-                    :percent="file.progress"
-                    :kind="file.kind"
-                    :status="file.status"
-                    :stage="file.stage"
-                    :stage-done="file.stageDone"
-                    :stage-total="file.stageTotal"
-                  />
+                  <div class="flex flex-col gap-1.5">
+                    <div>{{ file.name }}</div>
+                    <ProgressLine
+                      v-if="showsProgressBar(file)"
+                      :percent="file.progress"
+                      :kind="file.kind"
+                      :status="file.status"
+                      :stage="file.stage"
+                      :stage-done="file.stageDone"
+                      :stage-total="file.stageTotal"
+                      :indeterminate="isIndeterminateUpload(file)"
+                    />
+                  </div>
                 </td>
                 <td class="px-4 py-2.5 align-top">
                   <div><StatusBadge :status="statusLabel(file)" /></div>
@@ -221,6 +224,9 @@
         v-if="sortedDownloads.length === 0"
         class="flex flex-col items-center justify-center rounded-lg border border-dashed border-autonomi-border py-12"
       >
+        <svg class="mb-3 h-8 w-8 text-autonomi-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
+        </svg>
         <p class="text-sm text-autonomi-muted">No downloads yet</p>
         <p class="mt-1 text-xs text-autonomi-muted">Use "Download by Address" or "Download by Datamap"</p>
       </div>
@@ -252,16 +258,18 @@
               @click="onRowClick(file)"
             >
               <td class="px-4 py-2.5">
-                <div>{{ file.name }}</div>
-                <ProgressLine
-                  v-if="showsProgressBar(file)"
-                  :percent="file.progress"
-                  :kind="file.kind"
-                  :status="file.status"
-                  :stage="file.stage"
-                  :stage-done="file.stageDone"
-                  :stage-total="file.stageTotal"
-                />
+                <div class="flex flex-col gap-1.5">
+                  <div>{{ file.name }}</div>
+                  <ProgressLine
+                    v-if="showsProgressBar(file)"
+                    :percent="file.progress"
+                    :kind="file.kind"
+                    :status="file.status"
+                    :stage="file.stage"
+                    :stage-done="file.stageDone"
+                    :stage-total="file.stageTotal"
+                  />
+                </div>
               </td>
               <td class="px-4 py-2.5 align-top">
                 <div><StatusBadge :status="statusLabel(file)" /></div>
@@ -546,6 +554,19 @@ function showsProgressBar(file: FileEntry): boolean {
   )
 }
 
+/** True when the segmented quote/pay/store bar would never advance — the
+ *  Indelible backend ships no per-chunk progress events, so the row would
+ *  sit on three empty segments for the whole transfer. Fall back to the
+ *  indeterminate single-bar pulse so the user at least sees motion. */
+function isIndeterminateUpload(file: FileEntry): boolean {
+  return (
+    file.kind === 'upload'
+    && file.status === 'uploading'
+    && settingsStore.indelibleConnected
+    && !settingsStore.devnetActive
+  )
+}
+
 /** Settled = not currently transferring or queued. Per-row Remove and (for
  *  failed uploads) Retry are gated on this — we don't want a row to vanish
  *  mid-store. */

pages/wallet.vue

@@ -23,13 +23,13 @@
         <!-- Suggest using payment wallet address (local mode only) -->
         <div
           v-if="!settingsStore.indelibleConnected && walletStore.connected && walletStore.paymentAddress && walletStore.earningsAddress !== walletStore.paymentAddress"
-          class="mt-3 flex items-center gap-3 rounded-md border border-autonomi-blue/20 bg-autonomi-blue/5 px-3 py-2"
+          class="mt-3 flex items-center justify-between gap-3 rounded-md border border-autonomi-blue/20 bg-autonomi-blue/5 px-3 py-2"
         >
           <span class="text-xs text-autonomi-muted">
             Use your connected wallet address for earnings?
           </span>
           <button
-            class="rounded-md bg-autonomi-blue px-2.5 py-1 text-xs font-medium text-white hover:opacity-90"
+            class="shrink-0 rounded-md bg-autonomi-blue px-2.5 py-1 text-xs font-medium text-white hover:opacity-90"
             @click="usePaymentAsEarnings"
           >
             Use {{ truncateAddress(walletStore.paymentAddress) }}