fix(apps): preserve lifecycle state and wait for usable launch endpoints

2026-09-30 09:10:30 -04:00
parent 27d81e956d
commit 6ac26f637c
26 changed files with 933 additions and 403 deletions
@@ -259,7 +259,7 @@ const canLaunch = computed(() => {
  const hasRuntimeAddress = !!pkg.value.installed?.['interface-addresses']?.main?.['lan-address']
  const hasKnownLaunchUrl = typeof window !== 'undefined' && !!resolveAppUrl(pkg.value.manifest.id)
  const hasUI = !!(pkg.value.manifest.interfaces?.main?.ui || hasRuntimeAddress || hasKnownLaunchUrl)
-  return hasUI && pkg.value.state === 'running' && pkg.value.health !== 'starting' && pkg.value.health !== 'unhealthy'
+  return hasUI && pkg.value['ui-ready'] !== false && pkg.value.state === 'running' && pkg.value.health !== 'starting' && pkg.value.health !== 'unhealthy'
 })

 const features = computed(() => {
@@ -39,6 +39,7 @@
        :must-open-new-tab="mustOpenNewTab"
        :auto-retry-count="autoRetryCount"
        :refresh-key="refreshKey"
+        :ui-ready-blocked="packageEntry?.['ui-ready'] === false"
        :blocked-reason="blockedReason"
        :blocked-title="blockedTitle"
        :warming-up="warmingUp"
@@ -375,6 +376,20 @@ const panelClasses = computed(() => {
  return `${base} app-session-overlay`
 })

+// A cold/restarting upstream is held outside the iframe. Start one fresh
+// load when the scanner observes HTTP readiness; no manual refresh required.
+watch(() => packageEntry.value?.['ui-ready'], (ready, previous) => {
+  if (ready === false) {
+    if (loadTimeoutId) clearTimeout(loadTimeoutId)
+    if (autoRetryId) clearTimeout(autoRetryId)
+    if (iframeCheckId) clearTimeout(iframeCheckId)
+    loading.value = false
+  } else if (previous === false && ready === true) {
+    autoRetryCount.value = 0
+    refresh()
+  }
+})
+
 // --- Lifecycle handlers ---

 function onLoad() {
@@ -433,6 +448,7 @@ function refresh() {

 function startLoadTimeout() {
  if (loadTimeoutId) clearTimeout(loadTimeoutId)
+  if (packageEntry.value?.['ui-ready'] === false) return
  loadTimeoutId = setTimeout(() => {
    if (loading.value) {
      loading.value = false
@@ -442,11 +458,13 @@ function startLoadTimeout() {
 }

 function openNewTabAndBack() {
+  if (packageEntry.value?.['ui-ready'] === false) return
  if (appUrl.value) openExternalUrl(appUrl.value)
  closeSession()
 }

 function openNewTab() {
+  if (packageEntry.value?.['ui-ready'] === false) return
  if (appUrl.value) openExternalUrl(appUrl.value)
 }

@@ -6,7 +6,7 @@
           first, then sync status arrives), and the sync screen is strictly
           more informative, so it takes precedence instead of the two
           rendering on top of each other. -->
-      <AppLoadingScreen v-if="loading && !(electrsSync && !electrsSync.stale)" :icon="appIcon" :title="appTitle" :progress="loadProgress" />
+      <AppLoadingScreen v-if="loading && !uiReadyBlocked && !(electrsSync && !electrsSync.stale)" :icon="appIcon" :title="appTitle" :progress="loadProgress" />
    </Transition>

    <!-- ElectrumX sync screen — shown before the real UI while the on-chain
@@ -43,7 +43,7 @@
    </Transition>

    <div
-      v-if="appUrl && !iframeBlocked && (!electrsSync || electrsSync.stale)"
+      v-if="appUrl && !iframeBlocked && !uiReadyBlocked && (!electrsSync || electrsSync.stale)"
      class="absolute inset-0 app-session-frame-scroll-host"
      tabindex="-1"
      @pointerdown="focusIframe"
@@ -66,7 +66,7 @@
         reachable yet, so the "App not reachable / retry" overlay would just
         paint over the sync progress and read as a hard error. -->
    <Transition name="content-fade">
-      <div v-if="iframeBlocked && !electrsSync" class="absolute inset-0 z-10 flex flex-col items-center justify-center">
+      <div v-if="(iframeBlocked || uiReadyBlocked) && !electrsSync" class="absolute inset-0 z-10 flex flex-col items-center justify-center">
        <div class="text-center px-8">
          <!-- Warm-up uses the app's own icon, pulsing, rather than the padlock:
               the padlock reads as "blocked/denied" and this state is neither. -->
@@ -78,7 +78,8 @@
          </div>
          <h3 class="text-lg font-semibold text-white mb-2">{{ warmingUp ? `${appTitle} is starting…` : blockedReason ? blockedTitle : (mustOpenNewTab ? 'This app opens in a new tab' : 'App not reachable') }}</h3>
          <p class="text-white/50 text-sm mb-6">
-            <template v-if="mustOpenNewTab">{{ appTitle }} sets security headers that prevent iframe embedding.<br>Open it in a new browser tab instead.</template>
+            <template v-if="uiReadyBlocked">{{ blockedReason }} This screen opens automatically when it is ready.</template>
+            <template v-else-if="mustOpenNewTab">{{ appTitle }} sets security headers that prevent iframe embedding.<br>Open it in a new browser tab instead.</template>
            <template v-else-if="warmingUp">The container is running but hasn't finished warming up yet.<br>This screen opens on its own as soon as it answers.<span v-if="autoRetryCount > 0" class="block text-yellow-400/70">Checking again automatically ({{ autoRetryCount }})...</span></template>
            <template v-else-if="blockedReason">{{ blockedReason }}<br><span v-if="autoRetryCount > 0" class="text-yellow-400/70">Checking again automatically ({{ autoRetryCount }})...</span></template>
            <template v-else>{{ appTitle }} may still be starting up or the container is stopped.<br><span v-if="autoRetryCount > 0" class="text-yellow-400/70">Retrying automatically ({{ autoRetryCount }})...</span></template>
@@ -95,6 +96,7 @@
              Retry now
            </button>
            <button
+              v-if="!uiReadyBlocked"
              @click="$emit('openNewTabAndBack')"
              class="glass-button px-6 py-3 rounded-lg text-sm font-semibold inline-flex items-center gap-2"
            >
@@ -108,7 +110,7 @@
      </div>
    </Transition>

-    <div v-if="!appUrl" class="absolute inset-0 flex items-center justify-center">
+    <div v-if="!appUrl && !uiReadyBlocked" class="absolute inset-0 flex items-center justify-center">
      <div class="text-center px-8">
        <h3 class="text-lg font-semibold text-white mb-2">App not configured</h3>
        <p class="text-white/50 text-sm">No URL found for {{ appId }}</p>
@@ -133,6 +135,7 @@ const props = defineProps<{
  mustOpenNewTab: boolean
  autoRetryCount: number
  refreshKey: number
+  uiReadyBlocked?: boolean
  blockedReason?: string
  blockedTitle?: string
  // True while the container is up but its probe hasn't answered yet and the
@@ -66,3 +66,19 @@ describe('AppSessionFrame warm-up state', () => {
    expect(text).toContain('This app opens in a new tab')
  })
 })
+
+describe('HTTP readiness gate', () => {
+  it('does not show a missing-configuration error during initial installation', () => {
+    const frame = mountFrame({ appUrl: '', uiReadyBlocked: true, blockedReason: 'Waiting for the app to be ready…' })
+    expect(frame.text()).not.toContain('App not configured')
+    expect(frame.find('iframe').exists()).toBe(false)
+  })
+  it('does not mount an iframe before readiness, then opens automatically', async () => {
+    const frame = mountFrame({ iframeBlocked: false, uiReadyBlocked: true, blockedReason: 'Waiting for the app to be ready…', blockedTitle: 'App not ready' })
+    expect(frame.find('iframe').exists()).toBe(false)
+    expect(frame.text()).toContain('opens automatically')
+    expect(frame.text()).not.toContain('Open in new tab')
+    await frame.setProps({ uiReadyBlocked: false, blockedReason: '' })
+    expect(frame.find('iframe').exists()).toBe(true)
+  })
+})
@@ -184,3 +184,24 @@ describe('appsConfig service filtering', () => {
    expect(canLaunch(pkg)).toBe(true)
  })
 })
+
+describe('HTTP readiness independent of container health', () => {
+  it('blocks fixed launch URLs while the HTTP upstream is unavailable', () => {
+    for (const id of ['gitea', 'filebrowser', 'fedimint', 'lnd']) {
+      const pkg = makePkg(id, id, 'other')
+      pkg['ui-ready'] = false
+      pkg.health = 'healthy'
+      expect(canLaunch(pkg)).toBe(false)
+      expect(isAppReadyForLaunch(pkg)).toBe(false)
+      expect(launchBlockedReason(id, pkg)).toContain('Waiting')
+      pkg['ui-ready'] = true
+      expect(isAppReadyForLaunch(pkg)).toBe(true)
+    }
+  })
+  it('allows a ready companion while its backend is syncing', () => {
+    const pkg = makePkg('lnd', 'Lightning', 'bitcoin')
+    pkg.health = 'starting'
+    pkg['ui-ready'] = true
+    expect(isAppReadyForLaunch(pkg)).toBe(true)
+  })
+})
@@ -244,6 +244,7 @@ export function resolveAppIcon(id: string, pkg: PackageDataEntry, curatedIcon?:

 export function canLaunch(pkg: PackageDataEntry): boolean {
  if (isWebOnlyApp(pkg.manifest.id)) return true
+  if (pkg['ui-ready'] === false) return false
  // Headless backends never get a Launch button, even with a published port.
  if (isServicePackage(pkg.manifest.id, pkg)) return false
  const hasRuntimeAddress = !!pkg.installed?.['interface-addresses']?.main?.['lan-address']
@@ -277,6 +278,7 @@ export function canLaunch(pkg: PackageDataEntry): boolean {
 * health check retain the legacy state/port behaviour.
 */
 export function isAppReadyForLaunch(pkg: PackageDataEntry): boolean {
+  if (pkg['ui-ready'] !== undefined) return pkg['ui-ready']
  const manifest = pkg.manifest as unknown as Record<string, unknown>
  const hasHealthCheck = Boolean(manifest.health_check || manifest['health-check'])
  if (!hasHealthCheck) return pkg.health !== 'unhealthy'
@@ -285,6 +287,10 @@ export function isAppReadyForLaunch(pkg: PackageDataEntry): boolean {

 export function launchBlockedReason(id: string, pkg?: PackageDataEntry | null): string {
  const appId = pkg?.manifest?.id || id
+  if (pkg?.['ui-ready'] === false && !isServicePackage(appId, pkg)) {
+    if (pkg.state === PackageState.Stopped || pkg.state === PackageState.Exited) return 'App is stopped. Start it to open it.'
+    return 'Waiting for the app to be ready…'
+  }
  if (
    (appId === 'fedimint' || appId === 'fedimintd') &&
    (pkg?.state === PackageState.Starting || (pkg?.state === PackageState.Running && pkg?.health === 'starting'))