Fix paid-file recovery, app lifecycle regressions and wallet controls

2026-10-01 10:31:55 -04:00
parent 227174e541
commit f4d3455496
31 changed files with 1638 additions and 269 deletions
@@ -56,14 +56,7 @@
          </button>
        </div>
        <div class="app-header-search-wrap flex items-center gap-2">
-          <input
-            v-model="searchQuery"
-            type="text"
-            :placeholder="t('apps.searchPlaceholder')"
-            :aria-label="t('apps.searchLabel')"
-            data-controller-no-submit
-            class="app-header-search min-w-0 flex-1 text-white placeholder-white/50 focus:outline-none transition-colors"
-          />
+          <AppSearchField v-model="searchQuery" :placeholder="t('apps.searchPlaceholder')" :label="t('apps.searchLabel')" />
          <button
            type="button"
            class="sideload-icon-btn"
@@ -106,14 +99,7 @@
          >{{ category.name }}</button>
        </div>
        <div class="flex items-center gap-2">
-          <input
-            v-model="searchQuery"
-            type="text"
-            :placeholder="t('apps.searchPlaceholder')"
-            :aria-label="t('apps.searchLabel')"
-            data-controller-no-submit
-            class="app-header-search min-w-0 flex-1 text-white placeholder-white/50 focus:outline-none transition-colors"
-          />
+          <AppSearchField v-model="searchQuery" :placeholder="t('apps.searchPlaceholder')" :label="t('apps.searchLabel')" />
          <button
            type="button"
            class="sideload-icon-btn sideload-icon-btn-mobile"
@@ -374,6 +360,7 @@ let appsAnimationDone = false
 </script>

 <script setup lang="ts">
+import AppSearchField from '@/components/AppSearchField.vue'
 import { computed, ref, watch, onActivated, onBeforeUnmount, onDeactivated, onMounted } from 'vue'
 import { useRouter, useRoute, RouterLink } from 'vue-router'
 import { useI18n } from 'vue-i18n'
@@ -39,6 +39,8 @@
      </div>
    </div>

+    <UploadProgress />
+
    <!-- App Not Installed -->
    <div v-if="!appRunning" class="glass-card p-12 text-center flex-1 flex flex-col items-center justify-center">
      <svg class="w-20 h-20 text-white/15 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -75,19 +77,11 @@
          <p class="text-sm text-white/50">Files will be added to the current folder</p>
        </div>
      </div>
-      <!-- Upload progress -->
-      <div v-if="uploading" class="glass-card p-3 mb-3 flex items-center gap-3">
-        <div class="w-5 h-5 border-2 border-white/20 border-t-white/80 rounded-full animate-spin"></div>
-        <span class="text-sm text-white/70">Uploading...</span>
-      </div>
-      <div v-if="uploadError" class="glass-card p-3 mb-3 flex items-center gap-3 border border-red-500/30">
-        <span class="text-sm text-red-400">{{ uploadError }}</span>
-        <button class="text-xs text-white/50 hover:text-white ml-auto" @click="uploadError = null">Dismiss</button>
-      </div>

      <CloudToolbar
        :breadcrumbs="cloudStore.breadcrumbs"
        :view-mode="viewMode"
+        :uploading="!!cloudStore.upload?.active"
        @navigate="navigateCloudPath"
        @refresh="cloudStore.refresh()"
        @upload="handleUpload"
@@ -105,6 +99,7 @@
          :items="cloudStore.sortedItems"
          :loading="cloudStore.loading"
          :view-mode="viewMode"
+        :uploading="!!cloudStore.upload?.active"
          @navigate="navigateCloudPath"
          @delete="handleDelete"
          @play="handlePlay"
@@ -159,6 +154,7 @@
 </template>

 <script setup lang="ts">
+import UploadProgress from '@/components/cloud/UploadProgress.vue'
 import { ref, computed, watch } from 'vue'
 import { useRouter, useRoute, RouterLink } from 'vue-router'
 import { useAppStore } from '../stores/app'
@@ -193,7 +189,6 @@ watch(() => cloudStore.currentPath, (path) => {
 })

 const iframeLoaded = ref(false)
-const uploading = ref(false)
 const folderId = computed(() => route.params.folderId as string)
 const routeFolderPath = computed(() => normalizeCloudPath(route.query.path, section.value?.initialPath || '/'))

@@ -348,7 +343,6 @@ function handleShare(path: string, name: string, isDir: boolean) {
  shareTarget.value = { path, name, isDir }
 }

-const uploadError = ref<string | null>(null)
 const draggingOver = ref(false)
 let dragLeaveTimer: ReturnType<typeof setTimeout> | null = null

@@ -372,17 +366,7 @@ function onDrop(e: DragEvent) {
 }

 async function handleUpload(files: File[]) {
-  uploading.value = true
-  uploadError.value = null
-  try {
-    for (const file of files) {
-      await cloudStore.uploadFile(file)
-    }
-  } catch (e) {
-    uploadError.value = e instanceof Error ? e.message : 'Upload failed'
-  } finally {
-    uploading.value = false
-  }
+  await cloudStore.uploadFiles(files)
 }

 async function handleDelete(path: string) {
@@ -49,14 +49,7 @@
            {{ section.name }}
          </button>
        </div>
-        <input
-          v-model="searchQuery"
-          type="text"
-          placeholder="Search apps..."
-          aria-label="Search apps"
-          data-controller-no-submit
-          class="app-header-search text-white placeholder-white/50 focus:outline-none transition-colors"
-        />
+        <AppSearchField v-model="searchQuery" placeholder="Search apps..." label="Search apps" />
        <RefreshIndicator :state="catalogResource.entry.loadState" label="Refreshing app store catalog" />
      </div>

@@ -82,14 +75,7 @@
            type="button"
          >{{ section.name }}</button>
        </div>
-        <input
-          v-model="searchQuery"
-          type="text"
-          placeholder="Search apps..."
-          aria-label="Search apps"
-          data-controller-no-submit
-          class="app-header-search w-full text-white placeholder-white/50 focus:outline-none transition-colors"
-        />
+        <AppSearchField v-model="searchQuery" placeholder="Search apps..." label="Search apps" />
      </div>
    </div>

@@ -345,6 +331,7 @@ let discoverAnimationDone = false
 </script>

 <script setup lang="ts">
+import AppSearchField from '@/components/AppSearchField.vue'
 import { ref, computed, onBeforeUnmount, onMounted } from 'vue'
 import { useRouter, RouterLink } from 'vue-router'
 import { useAppStore } from '@/stores/app'
@@ -396,7 +396,7 @@
                 accepts for this item are offered -->
            <div v-if="payMode === 'choose'" class="space-y-3">
              <button
-                v-if="acceptsMethod(payItem.access, 'ecash') || acceptsMethod(payItem.access, 'fedimint')"
+                v-if="!lnReceipt && (acceptsMethod(payItem.access, 'ecash') || acceptsMethod(payItem.access, 'fedimint'))"
                class="w-full glass-button px-4 py-3 rounded-xl flex items-center justify-start gap-3 text-left"
                :disabled="ecashPreparing || downloading === payItem.id"
                @click="prepareEcashPay"
@@ -420,8 +420,8 @@
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
                <span>
-                  <span class="block text-base text-white">{{ lnPaying ? 'Paying…' : 'Pay with my Lightning node' }}</span>
-                  <span class="block text-sm text-white/50">Pays the seller’s invoice from your node’s Lightning wallet</span>
+                  <span class="block text-base text-white">{{ lnPaying ? (lnReceipt ? 'Checking payment…' : 'Paying…') : (lnReceipt ? 'Retry paid download' : 'Pay with my Lightning node') }}</span>
+                  <span class="block text-sm text-white/50">{{ lnReceipt ? 'Uses the saved payment; does not send more sats' : 'Pays the seller’s invoice from your node’s Lightning wallet' }}</span>
                </span>
              </button>

@@ -843,6 +843,22 @@ const onchainError = ref('')
 const onchainCopied = ref(false)
 const lnPaying = ref(false)
 const lnError = ref('')
+type LightningReceipt = { bolt11: string; payment_hash: string; price_sats: number }
+const lnReceipt = ref<LightningReceipt | null>(null)
+function receiptKey(onion: string, id: string) { return `peer-file-lightning:${onion}:${id}` }
+function readReceipt(onion: string, id: string): LightningReceipt | null {
+  const raw = localStorage.getItem(receiptKey(onion, id))
+  if (!raw) return null
+  const receipt = JSON.parse(raw) as LightningReceipt
+  if (!receipt.bolt11 || !/^[a-f0-9]{64}$/i.test(receipt.payment_hash)) throw new Error('Saved payment needs recovery. Do not pay again.')
+  return receipt
+}
+function keepReceipt(onion: string, id: string, receipt: LightningReceipt) {
+  // Must succeed before handing an invoice to a payer. A failed transfer or
+  // navigation must never turn Retry into a second payment.
+  localStorage.setItem(receiptKey(onion, id), JSON.stringify(receipt))
+  lnReceipt.value = receipt
+}
 const onchainPaying = ref(false)
 let onchainPollTimer: ReturnType<typeof setTimeout> | null = null
 let invoicePollTimer: ReturnType<typeof setTimeout> | null = null
@@ -1095,6 +1111,8 @@ function openPayModal(item: CatalogItem) {
  onchainCopied.value = false
  lnPaying.value = false
  lnError.value = ''
+  try { lnReceipt.value = readReceipt(props.peerId || currentPeer.value?.onion || '', item.id) }
+  catch { lnError.value = 'Saved payment could not be read. Do not pay again.' }
  onchainPaying.value = false
 }

@@ -1116,6 +1134,8 @@ function closePayModal() {
 * immediately for any external wallet).
 */
 function openQrPay() {
+  payMode.value = 'qr'
+  if (lnReceipt.value) { qrTab.value = 'lightning'; void payWithInvoice(); return }
  payMode.value = 'qr'
  invoiceData.value = null
  invoiceQr.value = ''
@@ -1139,6 +1159,10 @@ function openQrPay() {
 * forth doesn't silently stop watching for payment). */
 function selectQrTab(tab: 'onchain' | 'lightning') {
  if (qrTab.value === tab) return
+  if (tab === 'onchain' && lnReceipt.value) {
+    invoiceError.value = 'A Lightning payment is saved. Recover it before choosing another payment method.'
+    return
+  }
  qrTab.value = tab
  if (tab === 'onchain') {
    if (invoicePollTimer) { clearTimeout(invoicePollTimer); invoicePollTimer = null }
@@ -1338,20 +1362,27 @@ async function prepareEcashPay() {
 * mobile companion ("paid but never unlocked"); the viewer's Save button
 * still offers an explicit download.
 */
-function openPurchased(item: CatalogItem, base64Data: string, mimeType?: string) {
-  const onion = props.peerId || currentPeer.value?.onion
+function openPurchased(item: CatalogItem, base64Data: string | undefined, mimeType?: string, seller?: string) {
+  const onion = seller || props.peerId || currentPeer.value?.onion
+  const url = base64Data !== undefined
+    ? URL.createObjectURL(base64ToBlob(base64Data, mimeType || item.mime_type))
+    : `/api/peer-content/${encodeURIComponent(onion || "")}/${encodeURIComponent(item.id)}`
+  if (onion) {
+    try { localStorage.removeItem(receiptKey(onion, item.id)) } catch { /* owned cache remains authoritative */ }
+    lnReceipt.value = null
+  }
  if (onion) ownedKeys.value = new Set(ownedKeys.value).add(ownKey(onion, item.id))
  const mime = mimeType || item.mime_type
  if (mime.startsWith('audio/')) {
    // Straight to the bottom-bar player — the blob URL intentionally stays
    // alive while the bar owns playback.
    audioPlayer.play(
-      URL.createObjectURL(base64ToBlob(base64Data, mime)),
+      url,
      item.filename.split('/').pop() || item.filename,
    )
  } else {
    releaseViewerUrl()
-    viewerUrl.value = URL.createObjectURL(base64ToBlob(base64Data, mime))
+    viewerUrl.value = url
    viewerMime.value = mime
    viewerItem.value = item
  }
@@ -1399,7 +1430,7 @@ async function payWithInvoice() {
  invoiceError.value = ''
  invoiceWaiting.value = true
  try {
-    const res = await rpcClient.call<{ bolt11?: string; payment_hash?: string; price_sats?: number; error?: string }>({
+    const res = readReceipt(onion, item.id) as (LightningReceipt & { error?: string }) | null || await rpcClient.call<{ bolt11?: string; payment_hash?: string; price_sats?: number; error?: string }>({
      method: 'content.request-invoice',
      params: { onion, content_id: item.id },
      timeout: 45000,
@@ -1410,6 +1441,7 @@ async function payWithInvoice() {
      return
    }
    invoiceData.value = { bolt11: res.bolt11, payment_hash: res.payment_hash, price_sats: res.price_sats ?? getItemPrice(item.access) }
+    keepReceipt(onion, item.id, invoiceData.value)
    try {
      invoiceQr.value = await QRCode.toDataURL(res.bolt11.toUpperCase(), { margin: 1, width: 240 })
    } catch {
@@ -1424,54 +1456,46 @@ async function payWithInvoice() {

 /**
 * Pay the seller's invoice straight from THIS node's Lightning wallet, then
- * release the file. payLightningInvoice resolves to a real terminal state, so
- * on success the payment_hash is immediately valid as the download gate token.
+ * release the file. Keep the invoice before payment so uncertain outcomes can
+ * retry seller verification and delivery without sending a second payment.
 */
 async function payWithLightning() {
  const item = payItem.value
  const onion = props.peerId || currentPeer.value?.onion
  if (!item || !onion || lnPaying.value) return
-
  lnPaying.value = true
  lnError.value = ''
  try {
-    // 1. Ask the seller to mint a bolt11 (also records the pending entitlement).
-    const inv = await rpcClient.call<{ bolt11?: string; payment_hash?: string; error?: string }>({
-      method: 'content.request-invoice',
-      params: { onion, content_id: item.id },
-      timeout: 45000,
-    })
-    if (!inv?.bolt11 || !inv?.payment_hash) {
-      lnError.value = inv?.error || 'The seller could not create an invoice (is its Lightning node running?).'
-      return
+    let inv = readReceipt(onion, item.id)
+    if (!inv) {
+      const result = await rpcClient.call<{ bolt11?: string; payment_hash?: string; error?: string }>({
+        method: 'content.request-invoice', params: { onion, content_id: item.id }, timeout: 45000,
+      })
+      if (!result?.bolt11 || !result.payment_hash) throw new Error(result?.error || 'The seller could not create an invoice.')
+      inv = { bolt11: result.bolt11, payment_hash: result.payment_hash, price_sats: getItemPrice(item.access) }
+      keepReceipt(onion, item.id, inv)
+      const pay = await rpcClient.payLightningInvoice({ payment_request: inv.bolt11 })
+      if (pay.status === 'failed') {
+        localStorage.removeItem(receiptKey(onion, item.id)); lnReceipt.value = null
+        lnError.value = `Payment failed: ${pay.failure_reason || 'unknown reason'}`
+        return
+      }
+      if (pay.status === 'pending') {
+        lnError.value = 'Payment is still settling. Retry checks this payment without sending more sats.'
+        return
+      }
    }
-    // 2. Pay it from our own node. Tracked to a REAL terminal state — a slow
-    // multi-hop route resolves via status polling instead of a false failure.
-    const pay = await rpcClient.payLightningInvoice({ payment_request: inv.bolt11 })
-    if (pay.status === 'failed') {
-      lnError.value = `Payment failed: ${pay.failure_reason || 'unknown reason'}`
-      return
-    }
-    if (pay.status === 'pending') {
-      lnError.value = 'Payment is still settling — this can take a few minutes. Check your wallet transactions before paying again.'
-      return
-    }
-    // 3. Settled — pull the file using the payment hash as the gate token.
-    const dl = await rpcClient.call<{ data?: string; mime_type?: string; error?: string }>({
+    lnReceipt.value = inv
+    const dl = await rpcClient.call<{ data?: string; owned?: boolean; mime_type?: string; error?: string }>({
      method: 'content.download-peer-invoice',
-      params: { onion, content_id: item.id, payment_hash: inv.payment_hash },
-      timeout: 120000,
+      params: { onion, content_id: item.id, payment_hash: inv.payment_hash, filename: item.filename, price_sats: inv.price_sats, cache_only: true },
+      timeout: 960000,
    })
-    if (dl?.data) {
-      openPurchased(item, dl.data, dl.mime_type)
-    } else {
-      lnError.value = dl?.error || 'Paid, but the download failed. Try again shortly.'
-    }
+    if (dl?.data !== undefined || dl?.owned === true) openPurchased(item, dl.data, dl.mime_type, onion)
+    else lnError.value = dl?.error || 'Download unavailable. Retry uses this payment without sending more sats.'
  } catch (e: unknown) {
-    lnError.value = e instanceof Error ? e.message : 'Could not pay from your Lightning node'
-  } finally {
-    lnPaying.value = false
-  }
+    lnError.value = (e instanceof Error ? e.message : 'Payment or download could not be confirmed') + ' Retry checks the saved payment; do not pay again.'
+  } finally { lnPaying.value = false }
 }

 function scheduleInvoicePoll() {
@@ -1487,19 +1511,19 @@ async function pollInvoice() {
  try {
    const res = await rpcClient.call<{ paid?: boolean }>({
      method: 'content.invoice-status',
-      params: { onion, content_id: item.id, payment_hash: inv.payment_hash },
+      params: { onion, content_id: item.id, payment_hash: inv.payment_hash, filename: item.filename, price_sats: inv.price_sats, cache_only: true },
      timeout: 30000,
    })
    if (res?.paid) {
      // Settled — pull the file using the payment hash as the gate token.
      invoiceWaiting.value = false
-      const dl = await rpcClient.call<{ data?: string; mime_type?: string; error?: string }>({
+      const dl = await rpcClient.call<{ data?: string; owned?: boolean; mime_type?: string; error?: string }>({
        method: 'content.download-peer-invoice',
-        params: { onion, content_id: item.id, payment_hash: inv.payment_hash },
-        timeout: 120000,
+        params: { onion, content_id: item.id, payment_hash: inv.payment_hash, filename: item.filename, price_sats: inv.price_sats, cache_only: true },
+        timeout: 960000,
      })
-      if (dl?.data) {
-        openPurchased(item, dl.data, dl.mime_type)
+      if (dl?.data !== undefined || dl?.owned === true) {
+        openPurchased(item, dl.data, dl.mime_type, onion)
      } else {
        invoiceError.value = dl?.error || 'Paid, but the download failed. Try again shortly.'
      }
@@ -0,0 +1,92 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createPinia } from 'pinia'
+import PeerFiles from '../PeerFiles.vue'
+import { rpcClient } from '@/api/rpc-client'
+vi.mock('vue-router', () => ({ useRouter: () => ({ push: vi.fn() }) }))
+vi.mock('@/api/rpc-client', () => ({ rpcClient: { call: vi.fn(), federationListNodes: vi.fn(), payLightningInvoice: vi.fn() } }))
+vi.mock('@/composables/useAudioPlayer', () => ({ useAudioPlayer: () => ({ play: vi.fn() }) }))
+const hash = 'a'.repeat(64)
+const item = { id: 'paid-file', filename: 'bought.txt', mime_type: 'text/plain', size_bytes: 4, description: '', access: { paid: { price_sats: 5, accepted: ['lightning'] } } }
+const receiptKey = 'peer-file-lightning:peer.onion:paid-file'
+const download = vi.fn()
+async function open() {
+  const wrapper = mount(PeerFiles, { props: { peerId: 'peer.onion' }, global: { plugins: [createPinia()], stubs: { Teleport: true } } })
+  await flushPromises()
+  // Drive the actual component payment handlers, asserting RPC effects rather
+  // than a duplicate implementation of the payment state machine.
+  const vm = (wrapper.vm as any).$.setupState
+  vm.openPayModal(item)
+  return { wrapper, vm }
+}
+beforeEach(() => {
+  localStorage.clear(); vi.clearAllMocks()
+  vi.mocked(rpcClient.federationListNodes).mockResolvedValue({ nodes: [] } as never)
+  vi.mocked(rpcClient.call).mockImplementation(async ({ method }) => {
+    if (method === 'content.request-invoice') return { bolt11: 'ln-test', payment_hash: hash, price_sats: 5 }
+    if (method === 'content.download-peer-invoice') return download()
+    return { items: [] }
+  })
+  vi.mocked(rpcClient.payLightningInvoice).mockResolvedValue({ status: 'succeeded' } as never)
+})
+describe('Lightning file delivery recovery', () => {
+  it('retries delivery after a seller rejection without paying or requesting another invoice', async () => {
+    download.mockResolvedValue({ error: 'Seller has not registered this payment yet' })
+    const { wrapper, vm } = await open()
+    await vm.payWithLightning()
+    expect(JSON.parse(localStorage.getItem(receiptKey)!)).toMatchObject({ payment_hash: hash })
+    vm.closePayModal(); vm.openPayModal(item)
+    await vm.payWithLightning()
+    expect(rpcClient.payLightningInvoice).toHaveBeenCalledTimes(1)
+    expect(vi.mocked(rpcClient.call).mock.calls.filter(([v]) => v.method === 'content.request-invoice')).toHaveLength(1)
+    expect(download).toHaveBeenCalledTimes(2)
+    expect(vi.mocked(rpcClient.call).mock.calls.find(([v]) => v.method === 'content.download-peer-invoice')![0].params).toMatchObject({ payment_hash: hash, filename: 'bought.txt', price_sats: 5 })
+    wrapper.unmount()
+  })
+  it('restores an uncertain payment on a newly mounted page and only checks/downloads', async () => {
+    vi.mocked(rpcClient.payLightningInvoice).mockRejectedValue(new Error('Connection lost'))
+    download.mockResolvedValue({ error: 'Pending' })
+    const first = await open(); await first.vm.payWithLightning(); first.wrapper.unmount()
+    const second = await open(); await second.vm.payWithLightning()
+    expect(rpcClient.payLightningInvoice).toHaveBeenCalledTimes(1)
+    expect(download).toHaveBeenCalledTimes(1)
+    second.wrapper.unmount()
+  })
+  it('opens cached delivery through HTTP without a base64 file in the response', async () => {
+    download.mockResolvedValue({ owned: true, mime_type: 'video/mp4', size_bytes: 206165161 })
+    const { wrapper, vm } = await open()
+    await vm.payWithLightning()
+    expect(vm.viewerUrl).toBe('/api/peer-content/peer.onion/paid-file')
+    expect(vm.viewerMime).toBe('video/mp4')
+    expect(localStorage.getItem(receiptKey)).toBeNull()
+    expect(vi.mocked(rpcClient.call).mock.calls.find(([v]) => v.method === 'content.download-peer-invoice')![0].params).toMatchObject({ cache_only: true })
+    expect(rpcClient.payLightningInvoice).toHaveBeenCalledTimes(1)
+    wrapper.unmount()
+  })
+  it('never pays again when the saved receipt is corrupt', async () => {
+    localStorage.setItem(receiptKey, '{broken')
+    const { wrapper, vm } = await open()
+    await vm.payWithLightning()
+    expect(rpcClient.payLightningInvoice).not.toHaveBeenCalled()
+    expect(vi.mocked(rpcClient.call).mock.calls.filter(([v]) => v.method === 'content.request-invoice')).toHaveLength(0)
+    wrapper.unmount()
+  })
+  it('keeps QR recovery on the saved Lightning payment instead of creating another rail', async () => {
+    localStorage.setItem(receiptKey, JSON.stringify({ bolt11: 'ln-test', payment_hash: hash, price_sats: 5 }))
+    const { wrapper, vm } = await open()
+    vm.openQrPay(); await flushPromises()
+    expect(vm.payMode).toBe('qr')
+    expect(vm.qrTab).toBe('lightning')
+    vm.selectQrTab('onchain'); await flushPromises()
+    expect(vm.qrTab).toBe('lightning')
+    expect(vi.mocked(rpcClient.call).mock.calls.filter(([v]) => ['content.request-invoice', 'content.request-onchain'].includes(v.method))).toHaveLength(0)
+    wrapper.unmount()
+  })
+  it('does not send payment if the recovery record cannot be saved', async () => {
+    const { wrapper, vm } = await open()
+    const save = vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => { throw new Error('Storage full') })
+    await vm.payWithLightning()
+    expect(rpcClient.payLightningInvoice).not.toHaveBeenCalled()
+    save.mockRestore(); wrapper.unmount()
+  })
+})
@@ -246,3 +246,9 @@ it('does not display a stale Mempool frontend alias beside its live package', ()
  expect(shown.map(([id]) => id)).toEqual(['mempool'])
  expect(filterEntriesForTab([['mempool-web', alias]], 'apps', 'all').map(([id]) => id)).toEqual(['mempool-web'])
 })
+
+it('shows Immich as one app without internal database/cache cards in either tab', () => {
+  const entries: [string, PackageDataEntry][] = ['immich', 'immich-postgres', 'immich-redis', 'immich_postgres', 'immich_redis'].map(id => [id, makePkg(id, id, 'media')])
+  expect(filterEntriesForTab(entries, 'apps', 'all').map(([id]) => id)).toEqual(['immich'])
+  expect(filterEntriesForTab(entries, 'services', 'all')).toEqual([])
+})
@@ -29,6 +29,9 @@ export const isServiceContainer = sharedIsServiceContainer

 const INTERNAL_TOOLING_NAMES = new Set([
  'buildx_buildkit_default',
+  // Stack internals belong to their parent app, including cached inventories
+  // from nodes predating backend alias normalization.
+  'immich-postgres', 'immich-redis', 'immich_postgres', 'immich_redis',
  // Cuprate's dashboard is bundled as a companion of the primary cuprate
  // package; showing the generated container as a second Services entry
  // defeats the one-app presentation.