fix: overhaul container lifecycle — recovery, health, uninstall, UI state

Container recovery: - Health monitor: MAX_RESTART_ATTEMPTS 3→10, interval 60s→120s - Dependency-aware restarts: won't restart services before their deps - Reset dependent counters when a dependency recovers - Handle "created" state containers (were invisible to health monitor) - Added IndeedHub, mempool-api, mysql to tier system - Crash recovery: podman start timeout 30s→120s with retry - Podman client: socket timeout 5s→30s, added restart policy UI state representation: - Exit code 0 shows "stopped" (gray), not "crashed" (red) - Exit code 137 shows "killed (OOM)" - Non-zero exit shows "crashed" (red) - Added exit_code field to PackageDataEntry Install/uninstall fixes: - Install returns error when container doesn't start (was silent success) - Post-install hooks awaited instead of fire-and-forget tokio::spawn - Uninstall: graceful rm before force, volume prune, network cleanup - Uninstall returns error on partial failure (was 200 OK) Config consistency: - DB passwords read from /var/lib/archipelago/secrets/ (was hardcoded) - Bitcoin: added ZMQ ports 28332/28333 for LND block notifications - IndeedHub port 7777→8190 (was conflicting with strfry) - Marketplace versions: LND 0.17.4→0.18.4, Mempool 2.5.0→3.0.0 Performance: - Metrics collector interval 60s→300s (was duplicating health monitor) - Podman client: proper error propagation instead of unwrap_or_default Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 07:03:57 +01:00
parent cdff10a8bc
commit 64b57dca7d
65 changed files with 3950 additions and 298 deletions
--- a/neode-ui/src/components/ToastStack.vue
+++ b/neode-ui/src/components/ToastStack.vue
@@ -1,6 +1,6 @@
 <template>
  <Teleport to="body">
-    <div class="fixed top-4 right-4 z-[9999] flex flex-col gap-2 pointer-events-none max-w-sm w-full">
+    <div class="fixed right-4 z-[9999] flex flex-col gap-2 pointer-events-none max-w-sm w-full" style="top: calc(var(--safe-area-top, env(safe-area-inset-top, 0px)) + 16px);">
      <TransitionGroup name="toast-stack">
        <div
          v-for="toast in toasts"
--- a/neode-ui/src/style.css
+++ b/neode-ui/src/style.css
@@ -96,10 +96,18 @@ select:focus-visible {
 /* Mobile: override with tab bar clearance */
@media (max-width: 767px) {
  .mobile-scroll-pad {
-    padding-bottom: calc(var(--mobile-tab-bar-height, 88px) + env(safe-area-inset-bottom, 0px) + 16px);
+    padding-bottom: calc(var(--mobile-tab-bar-height, 88px) + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)) + 16px);
  }
  .mobile-scroll-pad-back {
-    padding-bottom: calc(var(--mobile-tab-bar-height, 88px) + env(safe-area-inset-bottom, 0px) + 64px);
+    padding-bottom: calc(var(--mobile-tab-bar-height, 88px) + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)) + 64px);
+  }
+
+  /* Safe area top padding for all mobile content views.
+     When tabs are showing, Dashboard.vue sets an explicit paddingTop via :style
+     which overrides this. When no tabs (e.g. Home), this kicks in.
+     Android WebView sets --safe-area-top; iOS uses env(). */
+  .mobile-safe-top {
+    padding-top: calc(var(--safe-area-top, env(safe-area-inset-top, 0px)) + 16px);
  }
 }

@@ -309,7 +317,7 @@ input[type="radio"]:active + * {
  .chat-mode-pill {
    position: absolute;
    top: 2.25rem;
-    right: 1.25rem;
+    right: 2.25rem;
    z-index: 10;
  }

--- a/neode-ui/src/types/api.ts
+++ b/neode-ui/src/types/api.ts
@@ -81,6 +81,7 @@ export type PackageState = typeof PackageState[keyof typeof PackageState]
 export interface PackageDataEntry {
  state: PackageState
  health?: string | null // "healthy", "unhealthy", "starting", or null
+  'exit-code'?: number | null // container exit code: 0 = clean stop, non-zero = crash
  'static-files'?: {
    license: string
    instructions: string
--- a/neode-ui/src/views/AppSession.vue
+++ b/neode-ui/src/views/AppSession.vue
@@ -38,16 +38,29 @@
        @open-new-tab-and-back="openNewTabAndBack"
      />

-      <!-- Mobile: floating glass close button -->
-      <button
-        class="md:hidden app-session-mobile-close"
-        aria-label="Close"
-        @click="closeSession"
-      >
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-        </svg>
-      </button>
+      <!-- Mobile bottom browser bar — part of flex layout, doesn't overlay content -->
+      <div class="md:hidden app-session-mobile-bar">
+        <button class="app-session-bar-btn" aria-label="Back" @click="iframeGoBack">
+          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+          </svg>
+        </button>
+        <button class="app-session-bar-btn" aria-label="Forward" @click="iframeGoForward">
+          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+          </svg>
+        </button>
+        <button class="app-session-bar-btn" aria-label="Open in new tab" @click="openNewTab">
+          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+          </svg>
+        </button>
+        <button class="app-session-bar-btn" aria-label="Close" @click="closeSession">
+          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
    </div>

    <NostrIdentityPicker
@@ -116,7 +129,10 @@ const appId = computed(() => {
 })

 const appTitle = computed(() => resolveAppTitle(appId.value))
-const mustOpenNewTab = computed(() => NEW_TAB_APPS.has(appId.value))
+const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
+// On mobile (Android WebView), all apps load in the iframe — X-Frame-Options
+// doesn't apply since the WebView is the top-level browsing context.
+const mustOpenNewTab = computed(() => isMobile ? false : NEW_TAB_APPS.has(appId.value))

 const appUrl = computed(() => {
  return resolveAppUrl(appId.value, route.query.path as string | undefined)
@@ -347,6 +363,7 @@ onBeforeUnmount(() => {
  width: 100%;
  height: 100%;
  border-radius: 0;
+  border: none;
 }

@media (min-width: 768px) {
@@ -389,7 +406,8 @@ onBeforeUnmount(() => {
  width: 100%;
  height: 100%;
  border-radius: 0;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
+  border: none;
+  box-shadow: none;
 }

@media (min-width: 768px) {
@@ -472,29 +490,63 @@ onBeforeUnmount(() => {
  opacity: 0;
 }

-/* Mobile floating glass close button */
-.app-session-mobile-close {
-  position: fixed;
-  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 2500;
-  width: 48px;
-  height: 48px;
+/* Mobile: full-bleed app sessions — no border, no radius, no shadow */
+@media (max-width: 767px) {
+  .app-session-panel.glass-card {
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+  }
+  .app-session-backdrop-overlay {
+    padding: 0;
+    backdrop-filter: none;
+    background: black;
+  }
+  /* Iframe frame: push content below status bar on mobile */
+  .app-session-frame-safe {
+    padding-top: var(--safe-area-top, env(safe-area-inset-top, 0px));
+  }
+  /* Iframe within padded container: fill remaining space */
+  .app-session-frame-safe iframe {
+    top: var(--safe-area-top, env(safe-area-inset-top, 0px));
+    height: calc(100% - var(--safe-area-top, env(safe-area-inset-top, 0px)));
+  }
+}
+
+/* Mobile bottom browser bar — sized like the main tab bar.
+   Uses !important-free display so Tailwind md:hidden can override. */
+@media (min-width: 768px) {
+  .app-session-mobile-bar { display: none !important; }
+}
+.app-session-mobile-bar {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 12px 16px;
+  padding-bottom: calc(12px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.app-session-bar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.45);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  color: rgba(255, 255, 255, 0.85);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
-  transition: background 0.15s ease, transform 0.15s ease;
+  width: 56px;
+  height: 56px;
+  border-radius: 14px;
+  color: rgba(255, 255, 255, 0.65);
+  transition: color 0.15s ease, background 0.15s ease;
 }
-.app-session-mobile-close:active {
-  background: rgba(0, 0, 0, 0.65);
-  transform: translateX(-50%) scale(0.9);
+.app-session-bar-btn svg {
+  width: 24px;
+  height: 24px;
+}
+.app-session-bar-btn:active {
+  color: white;
+  background: rgba(255, 255, 255, 0.12);
 }
 </style>
--- a/neode-ui/src/views/Dashboard.vue
+++ b/neode-ui/src/views/Dashboard.vue
@@ -83,14 +83,15 @@
                <div
                  v-if="route.path === '/dashboard/chat' || route.path === '/dashboard/mesh'"
                  :class="['h-full', mobileTabPaddingTop ? 'overflow-y-auto' : '']"
-                  :style="mobileTabPaddingTop ? { paddingTop: (mobileTabPaddingTop + 16) + 'px' } : undefined"
+                  :style="{ paddingTop: mobileTabPaddingTop ? (mobileTabPaddingTop + 16) + 'px' : undefined }"
+                  class="mobile-safe-top"
                >
                  <component :is="Component" />
                </div>
                <div
                  v-else
                  :class="[
-                    'absolute inset-0 px-4 pt-4 md:pt-8 md:px-8 overflow-y-auto',
+                    'absolute inset-0 px-4 pt-4 md:pt-8 md:px-8 overflow-y-auto mobile-safe-top',
                    needsMobileBackButtonSpace
                      ? 'mobile-scroll-pad-back'
                      : 'mobile-scroll-pad'
--- a/neode-ui/src/views/Login.vue
+++ b/neode-ui/src/views/Login.vue
@@ -566,6 +566,7 @@ async function restartOnboarding() {
 }

 .login-card {
+  overflow: visible !important;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
--- a/neode-ui/src/views/Server.vue
+++ b/neode-ui/src/views/Server.vue
@@ -450,7 +450,26 @@ async function loadTorServices() {
  catch { torServices.value = []; torDaemonRunning.value = false } finally { torServicesLoading.value = false }
 }

-function copyTorAddress(address: string) { navigator.clipboard.writeText(address); logsToast.value = 'Onion address copied to clipboard'; setTimeout(() => { logsToast.value = '' }, 3000) }
+async function copyTorAddress(address: string) {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(address)
+    } else {
+      const ta = document.createElement('textarea')
+      ta.value = address
+      ta.style.position = 'fixed'
+      ta.style.opacity = '0'
+      document.body.appendChild(ta)
+      ta.select()
+      document.execCommand('copy')
+      document.body.removeChild(ta)
+    }
+    logsToast.value = 'Onion address copied to clipboard'
+  } catch {
+    logsToast.value = 'Failed to copy address'
+  }
+  setTimeout(() => { logsToast.value = '' }, 3000)
+}

 async function toggleTorApp(appId: string, enabled: boolean) { try { await rpcClient.call({ method: 'tor.toggle-app', params: { app_id: appId, enabled }, timeout: 90000 }); await loadTorServices() } catch { /* handled */ } }
 async function rotateService(name: string) { torRotating.value = name; try { await rpcClient.call({ method: 'tor.rotate-service', params: { name }, timeout: 90000 }); await loadTorServices() } catch { /* handled */ } finally { torRotating.value = false } }
--- a/neode-ui/src/views/appDetails/AppHeroSection.vue
+++ b/neode-ui/src/views/appDetails/AppHeroSection.vue
@@ -15,10 +15,10 @@
        <div class="flex items-center gap-2">
          <span
            class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium"
-            :class="getStatusClass(pkg.state, pkg.health)"
+            :class="getStatusClass(pkg.state, pkg.health, pkg['exit-code'])"
          >
-            <span class="w-1.5 h-1.5 rounded-full mr-1.5" :class="getStatusDotClass(pkg.state, pkg.health)"></span>
-            {{ getStatusLabel(pkg.state, pkg.health) }}
+            <span class="w-1.5 h-1.5 rounded-full mr-1.5" :class="getStatusDotClass(pkg.state, pkg.health, pkg['exit-code'])"></span>
+            {{ getStatusLabel(pkg.state, pkg.health, pkg['exit-code']) }}
          </span>
          <span class="text-white/50 text-xs">v{{ pkg.manifest.version }}</span>
        </div>
@@ -107,10 +107,10 @@
          <div class="flex flex-wrap items-center gap-2">
            <span
              class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
-              :class="getStatusClass(pkg.state, pkg.health)"
+              :class="getStatusClass(pkg.state, pkg.health, pkg['exit-code'])"
            >
-              <span class="w-1.5 h-1.5 rounded-full mr-1" :class="getStatusDotClass(pkg.state, pkg.health)"></span>
-              {{ getStatusLabel(pkg.state, pkg.health) }}
+              <span class="w-1.5 h-1.5 rounded-full mr-1" :class="getStatusDotClass(pkg.state, pkg.health, pkg['exit-code'])"></span>
+              {{ getStatusLabel(pkg.state, pkg.health, pkg['exit-code']) }}
            </span>
            <span class="text-white/50 text-xs">v{{ pkg.manifest.version }}</span>
          </div>
--- a/neode-ui/src/views/appDetails/appDetailsData.ts
+++ b/neode-ui/src/views/appDetails/appDetailsData.ts
@@ -107,7 +107,7 @@ export function isRealOnionAddress(addr: string | undefined): boolean {
  return !!(addr && addr.endsWith('.onion') && addr.length >= 60 && addr.length <= 70)
 }

-export function getStatusClass(state: PackageState, health?: string | null): string {
+export function getStatusClass(state: PackageState, health?: string | null, exitCode?: number | null): string {
  if (state === PackageState.Running && health === 'starting') return 'bg-yellow-500/20 text-yellow-200 border border-yellow-500/30'
  if (state === PackageState.Running && health === 'unhealthy') return 'bg-orange-500/20 text-orange-200 border border-orange-500/30'
  switch (state) {
@@ -116,7 +116,9 @@ export function getStatusClass(state: PackageState, health?: string | null): str
    case PackageState.Stopped:
      return 'bg-gray-500/20 text-gray-200 border border-gray-500/30'
    case PackageState.Exited:
-      return 'bg-red-500/20 text-red-200 border border-red-500/30'
+      return exitCode != null && exitCode !== 0
+        ? 'bg-red-500/20 text-red-200 border border-red-500/30'
+        : 'bg-gray-500/20 text-gray-200 border border-gray-500/30'
    case PackageState.Starting:
    case PackageState.Stopping:
    case PackageState.Restarting:
@@ -128,7 +130,7 @@ export function getStatusClass(state: PackageState, health?: string | null): str
  }
 }

-export function getStatusDotClass(state: PackageState, health?: string | null): string {
+export function getStatusDotClass(state: PackageState, health?: string | null, exitCode?: number | null): string {
  if (state === PackageState.Running && health === 'starting') return 'bg-yellow-400 animate-pulse'
  if (state === PackageState.Running && health === 'unhealthy') return 'bg-orange-400 animate-pulse'
  switch (state) {
@@ -137,7 +139,9 @@ export function getStatusDotClass(state: PackageState, health?: string | null):
    case PackageState.Stopped:
      return 'bg-gray-400'
    case PackageState.Exited:
-      return 'bg-red-400 animate-pulse'
+      return exitCode != null && exitCode !== 0
+        ? 'bg-red-400 animate-pulse'
+        : 'bg-gray-400'
    case PackageState.Starting:
    case PackageState.Stopping:
    case PackageState.Restarting:
@@ -149,10 +153,14 @@ export function getStatusDotClass(state: PackageState, health?: string | null):
  }
 }

-export function getStatusLabel(state: PackageState, health?: string | null): string {
+export function getStatusLabel(state: PackageState, health?: string | null, exitCode?: number | null): string {
  if (state === PackageState.Running && health === 'starting') return 'starting up'
  if (state === PackageState.Running && health === 'unhealthy') return 'unhealthy'
  if (state === PackageState.Running && health === 'healthy') return 'healthy'
-  if (state === PackageState.Exited) return 'crashed'
+  if (state === PackageState.Exited) {
+    if (exitCode === 137) return 'killed (OOM)'
+    if (exitCode != null && exitCode !== 0) return 'crashed'
+    return 'stopped'
+  }
  return state
 }
--- a/neode-ui/src/views/appSession/AppSessionFrame.vue
+++ b/neode-ui/src/views/appSession/AppSessionFrame.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex-1 min-h-0 bg-black/40 overflow-hidden">
+  <div class="relative flex-1 min-h-0 bg-black/40 overflow-hidden app-session-frame-safe">
    <Transition name="content-fade">
      <div v-if="loading" class="absolute inset-0 z-10 flex items-center justify-center bg-black/40">
        <svg class="animate-spin h-8 w-8 text-blue-400" viewBox="0 0 24 24" fill="none">
--- a/neode-ui/src/views/apps/AppCard.vue
+++ b/neode-ui/src/views/apps/AppCard.vue
@@ -84,7 +84,7 @@
    <div class="flex items-center gap-2">
      <span
        class="inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium"
-        :class="getStatusClass(pkg.state, pkg.health)"
+        :class="getStatusClass(pkg.state, pkg.health, pkg['exit-code'])"
      >
        <svg
          v-if="isTransitioning"
@@ -97,12 +97,13 @@
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
        <span v-if="pkg.state === 'running' && pkg.health === 'unhealthy'" class="w-1.5 h-1.5 rounded-full bg-orange-400 animate-pulse"></span>
-        {{ getStatusLabel(pkg.state, pkg.health) }}
+        {{ getStatusLabel(pkg.state, pkg.health, pkg['exit-code']) }}
      </span>
    </div>

-    <!-- Quick Actions -->
+    <!-- Quick Actions — icon buttons in uniform dark containers -->
    <div v-if="!isUninstalling" class="mt-4 flex gap-2">
+      <!-- Launch -->
      <button
        v-if="canLaunch(pkg)"
        data-controller-launch-btn
@@ -112,51 +113,56 @@
        {{ t('common.launch') }}
        <svg v-if="opensInTab(id)" class="w-3.5 h-3.5 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /></svg>
      </button>
+      <!-- Start (play icon) -->
      <button
        v-if="!isWebOnly && !isLoading && (pkg.state === 'stopped' || pkg.state === 'exited')"
        @click.stop="$emit('start', id)"
-        class="flex-1 px-4 py-2 glass-button glass-button-success rounded-lg text-sm font-medium flex items-center justify-center gap-2"
+        class="px-3 py-2 glass-button glass-button-sm rounded-lg flex items-center justify-center"
+        :title="pkg.state === 'exited' ? 'Restart' : t('common.start')"
      >
-        <span>{{ pkg.state === 'exited' ? 'Restart' : t('common.start') }}</span>
+        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
      </button>
+      <!-- Starting (spinner) -->
      <button
        v-if="!isWebOnly && isLoading && (pkg.state === 'stopped' || pkg.state === 'exited' || pkg.state === 'starting')"
        disabled
-        class="flex-1 px-4 py-2 glass-button glass-button-success rounded-lg text-sm font-medium opacity-50 cursor-not-allowed flex items-center justify-center gap-2"
+        class="px-3 py-2 glass-button glass-button-sm rounded-lg opacity-50 cursor-not-allowed flex items-center justify-center"
      >
-        <svg class="animate-spin h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
-        <span>{{ t('common.starting') }}</span>
      </button>
+      <!-- Stop (square icon) -->
      <button
        v-if="!isWebOnly && !isLoading && (pkg.state === 'running' || pkg.state === 'starting')"
        @click.stop="$emit('stop', id)"
-        class="flex-1 px-4 py-2 bg-yellow-500/20 border border-yellow-500/40 rounded-lg text-yellow-200 text-sm font-medium hover:bg-yellow-500/30 transition-colors flex items-center justify-center gap-2"
+        class="px-3 py-2 glass-button glass-button-sm rounded-lg flex items-center justify-center"
+        :title="t('common.stop')"
      >
-        <span>{{ t('common.stop') }}</span>
+        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="1" /></svg>
      </button>
+      <!-- Restart -->
      <button
        v-if="!isWebOnly && !isLoading && (pkg.state === 'running' || pkg.state === 'starting')"
        @click.stop="$emit('restart', id)"
-        class="px-2.5 py-2 glass-button glass-button-sm rounded-lg flex items-center justify-center"
+        class="px-3 py-2 glass-button glass-button-sm rounded-lg flex items-center justify-center"
        :title="t('common.restart')"
      >
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
        </svg>
      </button>
+      <!-- Stopping (spinner) -->
      <button
        v-if="!isWebOnly && isLoading && (pkg.state === 'running' || pkg.state === 'starting' || pkg.state === 'stopping')"
        disabled
-        class="flex-1 px-4 py-2 bg-yellow-500/20 border border-yellow-500/40 rounded-lg text-yellow-200 text-sm font-medium opacity-50 cursor-not-allowed flex items-center justify-center gap-2"
+        class="px-3 py-2 glass-button glass-button-sm rounded-lg opacity-50 cursor-not-allowed flex items-center justify-center"
      >
-        <svg class="animate-spin h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
-        <span>{{ t('common.stopping') }}</span>
      </button>
    </div>
  </div>
--- a/neode-ui/src/views/apps/appsConfig.ts
+++ b/neode-ui/src/views/apps/appsConfig.ts
@@ -116,7 +116,7 @@ export function canLaunch(pkg: PackageDataEntry): boolean {
  return !!hasUI && canLaunchState
 }

-export function getStatusClass(state: PackageState, health?: string | null): string {
+export function getStatusClass(state: PackageState, health?: string | null, exitCode?: number | null): string {
  if (state === PackageState.Running && health === 'starting') return 'bg-yellow-500/20 text-yellow-200'
  if (state === PackageState.Running && health === 'unhealthy') return 'bg-orange-500/20 text-orange-200'
  switch (state) {
@@ -125,7 +125,10 @@ export function getStatusClass(state: PackageState, health?: string | null): str
    case PackageState.Stopped:
      return 'bg-gray-500/20 text-gray-200'
    case PackageState.Exited:
-      return 'bg-red-500/20 text-red-200'
+      // Exit code 0 = clean shutdown (gray), non-zero = crash (red)
+      return exitCode != null && exitCode !== 0
+        ? 'bg-red-500/20 text-red-200'
+        : 'bg-gray-500/20 text-gray-200'
    case PackageState.Starting:
    case PackageState.Stopping:
    case PackageState.Restarting:
@@ -137,11 +140,15 @@ export function getStatusClass(state: PackageState, health?: string | null): str
  }
 }

-export function getStatusLabel(state: PackageState, health?: string | null): string {
+export function getStatusLabel(state: PackageState, health?: string | null, exitCode?: number | null): string {
  if (state === PackageState.Running && health === 'starting') return 'starting up'
  if (state === PackageState.Running && health === 'unhealthy') return 'unhealthy'
  if (state === PackageState.Running && health === 'healthy') return 'healthy'
-  if (state === PackageState.Exited) return 'crashed'
+  if (state === PackageState.Exited) {
+    if (exitCode === 137) return 'killed (OOM)'
+    if (exitCode != null && exitCode !== 0) return 'crashed'
+    return 'stopped'
+  }
  return state
 }

--- a/neode-ui/src/views/apps/useAppsActions.ts
+++ b/neode-ui/src/views/apps/useAppsActions.ts
@@ -72,12 +72,10 @@ export function useAppsActions() {
    try {
      uninstallingApps.value.add(appId)
      await store.uninstallPackage(appId)
-      if (store.packages && store.packages[appId]) {
-        delete store.packages[appId]
-      }
+      // State update comes via WebSocket — no manual deletion needed
    } catch (err) {
      if (import.meta.env.DEV) console.error('Failed to uninstall app:', err)
-      showActionError(`Failed to uninstall app: ${err instanceof Error ? err.message : 'Unknown error'}`)
+      showActionError(`Failed to uninstall: ${err instanceof Error ? err.message : 'Unknown error'}`)
    } finally {
      uninstallingApps.value.delete(appId)
      uninstalling.value = false
--- a/neode-ui/src/views/dashboard/DashboardMobileNav.vue
+++ b/neode-ui/src/views/dashboard/DashboardMobileNav.vue
@@ -2,9 +2,9 @@
  <!-- Persistent Mobile Tabs for Apps/Marketplace -->
  <div
    v-if="showAppsTabs && !isAppSessionActive"
-    class="md:hidden fixed top-0 left-0 right-0 z-40 px-4 pt-4 pb-2 glass-piece"
+    class="md:hidden fixed top-0 left-0 right-0 z-40 px-4 pb-2 glass-piece mobile-top-tabs"
    :class="{ 'glass-throw-mobile-tabs': showZoomIn }"
-    style="background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: translateZ(0);"
+    style="background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: translateZ(0); padding-top: calc(var(--safe-area-top, env(safe-area-inset-top, 0px)) + 16px);"
  >
    <div class="mode-switcher mode-switcher-full">
      <RouterLink
@@ -29,10 +29,10 @@
  <!-- Persistent Mobile Tabs for Network/Cloud -->
  <div
    v-if="showNetworkTabs && !isAppSessionActive"
-    class="md:hidden fixed top-0 left-0 right-0 z-40 px-4 pt-4 pb-2 glass-piece"
+    class="md:hidden fixed left-0 right-0 z-40 px-4 pb-2 glass-piece mobile-top-tabs"
    :class="{ 'glass-throw-mobile-tabs-2': showZoomIn }"
    style="background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: translateZ(0);"
-    :style="{ top: showAppsTabs ? '80px' : '0' }"
+    :style="{ top: showAppsTabs ? '80px' : '0', paddingTop: showAppsTabs ? '16px' : 'calc(var(--safe-area-top, env(safe-area-inset-top, 0px)) + 16px)' }"
  >
    <div class="mode-switcher mode-switcher-full">
      <RouterLink
@@ -66,7 +66,7 @@
    :aria-label="t('dashboard.mobileNav')"
    class="md:hidden fixed bottom-0 left-0 right-0 border-t border-glass-border shadow-glass z-50 glass-piece"
    :class="{ 'glass-throw-tabbar': showZoomIn }"
-    style="background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding-bottom: env(safe-area-inset-bottom, 0px);"
+    style="background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding-bottom: var(--safe-area-bottom, env(safe-area-inset-bottom, 0px));"
  >
    <div class="flex justify-around items-center px-2 py-3 relative">
      <RouterLink
@@ -160,11 +160,21 @@ const showNetworkTabs = computed(() => {
  return route.path.includes('/server') || route.path.includes('/cloud') || route.path.includes('/web5') || route.path.includes('/mesh')
 })

-// Top padding for content div to clear fixed mobile tab overlays
+// Top padding for content div to clear fixed mobile tab overlays.
+// Includes safe area inset for Android (read from CSS custom property set by WebView).
+const safeAreaTop = ref(0)
+
+function readSafeAreaTop() {
+  if (typeof window === 'undefined') return
+  const val = getComputedStyle(document.documentElement).getPropertyValue('--safe-area-top').trim()
+  if (val) safeAreaTop.value = parseInt(val, 10) || 0
+}
+
 const mobileTabPaddingTop = computed(() => {
  if (typeof window === 'undefined' || window.innerWidth >= 768) return 0
-  if (showAppsTabs.value && showNetworkTabs.value) return 160
-  if (showAppsTabs.value || showNetworkTabs.value) return 80
+  const sat = safeAreaTop.value
+  if (showAppsTabs.value && showNetworkTabs.value) return 160 + sat
+  if (showAppsTabs.value || showNetworkTabs.value) return 80 + sat
  return 0
 })

@@ -188,7 +198,10 @@ function onResize() {

 onMounted(() => {
  updateTabBarHeight()
+  readSafeAreaTop()
  window.addEventListener('resize', onResize)
+  // Re-read after WebView injection has had time to run
+  setTimeout(readSafeAreaTop, 500)
 })

 onBeforeUnmount(() => {
--- a/neode-ui/src/views/dashboard/HealthNotifications.vue
+++ b/neode-ui/src/views/dashboard/HealthNotifications.vue
@@ -1,7 +1,8 @@
 <template>
  <div
    v-if="healthNotifications.length > 0"
-    class="fixed top-4 right-4 z-[200] flex flex-col gap-2 max-w-sm"
+    class="fixed right-4 z-[200] flex flex-col gap-2 max-w-sm"
+    style="top: calc(var(--safe-area-top, env(safe-area-inset-top, 0px)) + 16px);"
  >
    <div
      v-for="notif in healthNotifications"
--- a/neode-ui/src/views/marketplace/marketplaceData.ts
+++ b/neode-ui/src/views/marketplace/marketplaceData.ts
@@ -152,7 +152,7 @@ export function getCuratedAppList(): MarketplaceApp[] {
    {
      id: 'lnd',
      title: 'LND',
-      version: '0.17.4',
+      version: '0.18.4',
      description: 'Lightning Network Daemon. Fast and cheap Bitcoin payments through the Lightning Network.',
      icon: '/assets/img/app-icons/lnd.svg',
      author: 'Lightning Labs',
@@ -174,11 +174,11 @@ export function getCuratedAppList(): MarketplaceApp[] {
    {
      id: 'mempool',
      title: 'Mempool Explorer',
-      version: '2.5.0',
+      version: '3.0.0',
      description: 'Self-hosted Bitcoin blockchain and mempool visualizer with beautiful explorer interface.',
      icon: '/assets/img/app-icons/mempool.webp',
      author: 'Mempool',
-      dockerImage: `${REGISTRY}/mempool-frontend:v2.5.0`,
+      dockerImage: `${REGISTRY}/mempool-frontend:v3.0.0`,
      manifestUrl: undefined,
      repoUrl: 'https://github.com/mempool/mempool'
    },