feat(install): phase-based progress bar replaces unparseable pull bytes

Podman emits zero parseable progress when stderr is piped (no TTY), so
the old byte-counter regex never matched in real installs. Users saw
0% for the whole pull, then a jump to 95%, then silence through
create-container, health-check, and post-install hooks.

Replace with 7 explicit lifecycle phases wired through install.rs and
update.rs: Preparing (5%), PullingImage (20%), CreatingContainer (70%),
StartingContainer (80%), WaitingHealthy (88%), PostInstall (95%),
Done (100%). Each maps to a fixed UI progress and status message.

Frontend PHASE_INFO mapper in stores/server.ts prioritizes phase when
present, falls back to byte-counter for legacy. A Math.max forward-only
guard ensures the bar never regresses. Deleted the duplicate watcher
in Discover.vue that was fighting the store's watcher with stale byte
logic. Added shimmer CSS on the fill (with prefers-reduced-motion
opt-out) so the bar looks alive during long phases.

neode-ui/src/stores/server.ts

@@ -5,6 +5,32 @@ import { computed, ref, watch } from 'vue'
 import { rpcClient } from '../api/rpc-client'
 import { useSyncStore } from './sync'
 import type { InstallProgress } from '../views/marketplace/marketplaceData'
+import type { InstallPhase } from '../types/api'
+
+/**
+ * Phase-to-UI mapping. Each backend pipeline phase maps to a fixed
+ * progress percentage (so the bar only ever advances forward) and a
+ * descriptive label the user can actually understand. This is the
+ * source of truth — byte counters from `install-progress.size/downloaded`
+ * are a fallback for the rare cases where podman does emit parseable
+ * progress on a piped stderr.
+ *
+ * Percentages chosen so:
+ *   - the bar is never fully empty (users panic)
+ *   - the bar visibly advances at every phase boundary
+ *   - the slowest phases (PullingImage, WaitingHealthy) get the widest
+ *     bands so shimmer/indeterminate treatment has room
+ *   - 100% is reserved for "Done" / terminal success
+ */
+const PHASE_INFO: Record<InstallPhase, { progress: number; message: string; status: InstallProgress['status'] }> = {
+  'preparing':          { progress: 5,  message: 'Preparing…',                status: 'downloading' },
+  'pulling-image':      { progress: 20, message: 'Downloading image…',        status: 'downloading' },
+  'creating-container': { progress: 70, message: 'Creating container…',       status: 'installing' },
+  'starting-container': { progress: 80, message: 'Starting container…',       status: 'starting' },
+  'waiting-healthy':    { progress: 88, message: 'Waiting for container…',    status: 'starting' },
+  'post-install':       { progress: 95, message: 'Finalizing…',                status: 'installing' },
+  'done':               { progress: 100, message: 'Installed',                status: 'complete' },
+}
 
 export const useServerStore = defineStore('server', () => {
   const sync = useSyncStore()
@@ -25,26 +51,45 @@ export const useServerStore = defineStore('server', () => {
             title: pkg.manifest?.title || appId,
             status: 'downloading',
             progress: 0,
-            message: 'Installing...',
+            message: 'Installing…',
             attempt: 0,
           })
         }
         const progress = pkg['install-progress']
         if (progress) {
           const current = installingApps.value.get(appId)!
+          // Primary source: the pipeline phase. Each phase maps to a
+          // fixed progress% and a user-facing label.
+          if (progress.phase) {
+            const info = PHASE_INFO[progress.phase]
+            if (info) {
+              // Only advance forward — never let the bar step backward
+              // between patches (can happen briefly during scan merges).
+              const nextProgress = Math.max(current.progress, info.progress)
+              installingApps.value.set(appId, {
+                ...current,
+                status: info.status,
+                progress: nextProgress,
+                message: info.message,
+              })
+              continue
+            }
+          }
+          // Fallback: byte counters (rare — podman usually doesn't
+          // emit parseable progress on a piped stderr).
           const pct = progress.size > 0 ? Math.round((progress.downloaded / progress.size) * 100) : 0
           const downloadedMB = (progress.downloaded / (1024 * 1024)).toFixed(1)
           const totalMB = (progress.size / (1024 * 1024)).toFixed(1)
-          let message = 'Downloading...'
+          let message = 'Downloading…'
           if (progress.size > 1024 && pct < 100) {
             message = `Downloading: ${downloadedMB} / ${totalMB} MB (${pct}%)`
           } else if (pct >= 100 || (progress.size > 0 && progress.downloaded >= progress.size)) {
-            message = 'Installing package...'
+            message = 'Installing package…'
           }
           installingApps.value.set(appId, {
             ...current,
             status: pct >= 100 ? 'installing' : 'downloading',
-            progress: Math.min(pct, 95),
+            progress: Math.max(current.progress, Math.min(pct, 95)),
             message,
           })
         }

neode-ui/src/types/api.ts

@@ -150,9 +150,22 @@ export const ServiceStatus = {
 
 export type ServiceStatus = typeof ServiceStatus[keyof typeof ServiceStatus]
 
+export type InstallPhase =
+  | 'preparing'
+  | 'pulling-image'
+  | 'creating-container'
+  | 'starting-container'
+  | 'waiting-healthy'
+  | 'post-install'
+  | 'done'
+
 export interface InstallProgress {
   size: number
   downloaded: number
+  /** High-level pipeline phase. Preferred by the UI over the byte
+   *  counters — podman pull doesn't emit parseable progress when
+   *  stderr is piped, so byte counters are usually (0,0). */
+  phase?: InstallPhase
 }
 
 // RPC Request/Response types

neode-ui/src/views/Discover.vue

@@ -176,7 +176,7 @@ let discoverAnimationDone = false
 </script>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useRouter, RouterLink } from 'vue-router'
 import { useAppStore } from '@/stores/app'
 import { useServerStore } from '@/stores/server'
@@ -215,29 +215,14 @@ const categories = computed(() => [
   { id: 'other', name: 'Other' }
 ])
 
-// Installation state — uses global store so it persists across navigation
+// Installation state — uses global store so it persists across navigation.
+// The store's watcher (stores/server.ts) handles install-progress updates
+// globally, so this view doesn't need its own watcher. Previously had a
+// local watcher that duplicated logic using byte counters only — it has
+// been removed in favour of the store's phase-aware mapping.
 const installingApps = serverStore.installingApps
 const maxAttempts = ref(60)
 
-watch(() => store.packages, (packages) => {
-  if (!packages) return
-  for (const [appId, pkg] of Object.entries(packages)) {
-    const progress = pkg['install-progress']
-    if (progress && pkg.state === 'installing' && installingApps.has(appId)) {
-      const current = installingApps.get(appId)!
-      const pct = progress.size > 0 ? Math.round((progress.downloaded / progress.size) * 100) : 0
-      const downloadedMB = (progress.downloaded / (1024 * 1024)).toFixed(1)
-      const totalMB = (progress.size / (1024 * 1024)).toFixed(1)
-      installingApps.set(appId, {
-        ...current,
-        status: 'downloading',
-        progress: Math.min(pct, 95),
-        message: progress.size > 0 ? `Downloading: ${downloadedMB} / ${totalMB} MB (${pct}%)` : 'Downloading...',
-      })
-    }
-  }
-}, { deep: true })
-
 function selectCategory(id: string) {
   selectedCategory.value = id
   if (id === 'nostr' && nostrApps.value.length === 0 && !nostrLoading.value) {

neode-ui/src/views/apps/AppCard.vue

@@ -93,7 +93,7 @@
       </div>
       <div class="w-full h-1.5 bg-white/10 rounded-full overflow-hidden">
         <div
-          class="h-full bg-white/60 rounded-full transition-all duration-500"
+          class="install-progress-fill h-full bg-white/60 rounded-full transition-all duration-500"
           :style="{ width: `${Math.max(installProgress?.progress || 2, 2)}%` }"
         ></div>
       </div>
@@ -288,3 +288,32 @@ const isTransitioning = computed(() => {
   return s === 'starting' || s === 'installing' || s === 'stopping' || s === 'restarting' || s === 'updating' || (s === 'running' && h === 'starting')
 })
 </script>
+
+<style scoped>
+/* Shimmer overlay on the install progress bar so users see motion even
+ * when the bar is parked at a fixed phase percentage (pulling-image can
+ * take minutes, and podman doesn't give us byte-level progress). */
+.install-progress-fill {
+  background-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.55) 0%,
+    rgba(255, 255, 255, 0.9) 50%,
+    rgba(255, 255, 255, 0.55) 100%
+  );
+  background-size: 200% 100%;
+  animation: install-shimmer 1.8s ease-in-out infinite;
+}
+
+@keyframes install-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* Respect user motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  .install-progress-fill {
+    animation: none;
+    background-image: none;
+  }
+}
+</style>