Archipelago — open-source initial import

2026-08-12 10:55:49 +00:00
commit dc80b552a1
1639 changed files with 352647 additions and 0 deletions
@@ -0,0 +1,109 @@
+<template>
+  <div class="lg:col-span-2 space-y-6">
+    <!-- Screenshots Gallery -->
+    <div v-if="screenshots.length > 0" class="glass-card p-6">
+      <h2 class="text-2xl font-bold text-white mb-4">{{ t('appDetails.screenshots') }}</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <img
+          v-for="screenshot in screenshots"
+          :key="screenshot.src"
+          :src="screenshot.src"
+          :alt="screenshot.alt"
+          class="aspect-video w-full rounded-xl border border-white/10 object-cover"
+          loading="lazy"
+        />
+      </div>
+    </div>
+
+    <!-- Bitcoin Sync Warning (for dependent apps) -->
+    <div v-if="needsBitcoinSync && !bitcoinSynced" class="glass-card p-6 border border-orange-500/30">
+      <div class="flex items-start gap-3 mb-4">
+        <svg class="w-6 h-6 text-orange-400 flex-shrink-0 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
+        </svg>
+        <div class="flex-1">
+          <p class="text-orange-300 font-semibold text-xl">Bitcoin is syncing</p>
+          <p class="text-white/70 mt-2 leading-relaxed">
+            Some features may be unavailable until Bitcoin finishes syncing.
+            Wallet connections and block data require a fully synced node.
+          </p>
+        </div>
+      </div>
+      <div class="w-full h-2 bg-white/10 rounded-full overflow-hidden">
+        <div
+          class="h-full rounded-full bg-orange-400 transition-all duration-500"
+          :style="{ width: Math.min(bitcoinSyncPercent, 100) + '%' }"
+        ></div>
+      </div>
+      <p class="text-sm text-white/55 mt-2">
+        {{ bitcoinSyncPercent.toFixed(1) }}% synced — Block {{ bitcoinBlockHeight.toLocaleString() }}
+      </p>
+    </div>
+
+    <!-- Description -->
+    <div class="glass-card p-6">
+      <h2 class="text-2xl font-bold text-white mb-4">{{ t('appDetails.about', { name: pkg.manifest.title }) }}</h2>
+      <p class="text-white/80 leading-relaxed whitespace-pre-line">
+        {{ pkg.manifest.description.long }}
+      </p>
+    </div>
+
+    <!-- Features (if available) -->
+    <div v-if="features.length > 0" class="glass-card p-6">
+      <h2 class="text-2xl font-bold text-white mb-4">{{ t('appDetails.features') }}</h2>
+      <ul class="space-y-3">
+        <li
+          v-for="(feature, index) in features"
+          :key="index"
+          class="flex items-start gap-3 text-white/80"
+        >
+          <svg class="w-6 h-6 text-green-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <span>{{ feature }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { AppScreenshot } from '@/types/api'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  pkg: Record<string, any>
+  features: string[]
+  needsBitcoinSync: boolean
+  bitcoinSynced: boolean
+  bitcoinSyncPercent: number
+  bitcoinBlockHeight: number
+}>()
+
+const screenshots = computed(() => {
+  const manifestScreenshots = props.pkg.manifest?.screenshots
+  const staticScreenshots = props.pkg['static-files']?.screenshots
+  return normalizeScreenshots(Array.isArray(staticScreenshots) ? staticScreenshots : manifestScreenshots)
+})
+
+function normalizeScreenshots(items: AppScreenshot[] | undefined) {
+  if (!Array.isArray(items)) return []
+  return items
+    .map((item, index) => {
+      if (typeof item === 'string') {
+        const src = item.trim()
+        return src ? { src, alt: `${props.pkg.manifest?.title || 'App'} screenshot ${index + 1}` } : null
+      }
+      const src = item.src?.trim()
+      if (!src) return null
+      return {
+        src,
+        alt: item.alt?.trim() || `${props.pkg.manifest?.title || 'App'} screenshot ${index + 1}`,
+      }
+    })
+    .filter((item): item is { src: string; alt: string } => item !== null)
+}
+</script>
@@ -0,0 +1,233 @@
+<template>
+  <div class="glass-card p-6 mb-6">
+    <div class="flex items-start md:items-center gap-4 md:gap-6">
+      <img
+        :src="icon"
+        :alt="pkg.manifest.title"
+        class="app-detail-icon archy-app-icon w-20 h-20 shadow-xl flex-shrink-0"
+        @error="handleImageError"
+      />
+
+      <div class="flex-1 min-w-0">
+        <h1 class="text-xl md:text-2xl font-bold text-white mb-1">{{ pkg.manifest.title }}</h1>
+        <p class="text-white/70 text-xs md:text-sm mb-2 line-clamp-2 md:line-clamp-none">{{ pkg.manifest.description.short }}</p>
+        <div class="flex flex-wrap items-center gap-2">
+          <span
+            class="inline-flex items-center px-2 py-0.5 md:px-2.5 md:py-1 rounded-lg text-xs font-medium"
+            :class="getStatusClass(pkg.state, pkg.health, pkg['exit-code'])"
+          >
+            <span class="w-1.5 h-1.5 rounded-full mr-1 md: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">{{ $ver(pkg.manifest.version) }}</span>
+        </div>
+      </div>
+
+      <div class="app-detail-actions-top items-center gap-2 flex-shrink-0">
+        <span
+          v-if="pkg.state === 'updating'"
+          class="px-4 py-2.5 bg-orange-500/20 border border-orange-500/40 rounded-lg text-orange-200 text-sm font-medium"
+        >
+          Updating...
+        </span>
+        <button
+          v-for="action in actionItems"
+          :key="`top-${action.key}`"
+          type="button"
+          :disabled="controlsDisabled"
+          :class="['app-detail-action-btn px-4 py-2.5 rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed', action.class]"
+          @click="emitAction(action.emit)"
+        >
+          {{ action.label }}
+        </button>
+      </div>
+    </div>
+
+    <div class="app-detail-actions-bottom mt-5 grid grid-cols-2 gap-3">
+      <template v-if="pkg.state === 'updating'">
+        <span
+          class="col-span-2 mobile-card-action bg-orange-500/20 border border-orange-500/40 rounded-lg text-orange-200 text-sm font-medium"
+        >
+          Updating...
+        </span>
+      </template>
+      <button
+        v-for="action in actionItems"
+        :key="`bottom-${action.key}`"
+        type="button"
+        :disabled="controlsDisabled"
+        :class="[
+          'mobile-card-action rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed',
+          action.class,
+          actionItems.length === 1 || action.full ? 'col-span-2' : '',
+        ]"
+        @click="emitAction(action.emit)"
+      >
+        {{ action.label }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
+import type { PackageDataEntry } from '@/types/api'
+import { resolveAppIcon } from '@/views/apps/appsConfig'
+import { DEFAULT_APP_ICON } from '@/views/apps/appsConfig'
+import { getStatusClass, getStatusDotClass, getStatusLabel } from './appDetailsData'
+import { displayVersion } from '@/utils/version'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  pkg: PackageDataEntry
+  appId: string
+  packageKey: string
+  canLaunch: boolean
+  isWebOnly: boolean
+  pendingAction: 'start' | 'stop' | 'restart' | 'update' | 'uninstall' | null
+}>()
+
+const icon = computed(() => resolveAppIcon(props.pkg.manifest?.id || props.appId, props.pkg))
+const controlsDisabled = computed(() => props.pendingAction !== null || props.pkg.state === 'updating')
+
+const emit = defineEmits<{
+  launch: []
+  start: []
+  stop: []
+  restart: []
+  uninstall: []
+  update: []
+  channels: []
+}>()
+
+type ActionEmit = 'launch' | 'start' | 'stop' | 'restart' | 'uninstall' | 'update' | 'channels'
+
+const actionItems = computed(() => {
+  const actions: Array<{ key: string; emit: ActionEmit; label: string; class: string; full?: boolean }> = []
+
+  if (props.pkg['available-update'] && props.pkg.state !== 'updating') {
+    actions.push({
+      key: 'update',
+      emit: 'update',
+      label: props.pendingAction === 'update' ? 'Updating...' : `Update to ${displayVersion(props.pkg['available-update'])}`,
+      class: 'bg-orange-500/20 border border-orange-500/40 text-orange-200 hover:bg-orange-500/30',
+      full: true,
+    })
+  }
+
+  if (props.packageKey === 'lnd') {
+    actions.push({
+      key: 'channels',
+      emit: 'channels',
+      label: t('appDetails.channels'),
+      class: 'glass-button',
+    })
+  }
+
+  if (props.canLaunch) {
+    actions.push({
+      key: 'launch',
+      emit: 'launch',
+      label: t('common.launch'),
+      class: 'glass-button font-semibold',
+    })
+  }
+
+  if (!props.isWebOnly) {
+    if (props.pkg.state === 'stopped' || props.pkg.state === 'exited') {
+      actions.push({
+        key: 'start',
+        emit: 'start',
+        label: props.pendingAction === 'start' ? 'Starting...' : props.pkg.state === 'exited' ? 'Restart' : t('common.start'),
+        class: props.pkg.state === 'exited' ? 'glass-button glass-button-danger' : 'glass-button glass-button-success',
+      })
+    }
+
+    if (props.pkg.state === 'running') {
+      actions.push({
+        key: 'stop',
+        emit: 'stop',
+        label: props.pendingAction === 'stop' ? 'Stopping...' : t('common.stop'),
+        class: 'glass-button text-yellow-200 border-yellow-500/30 hover:bg-yellow-500/10',
+      })
+    }
+
+    actions.push({
+      key: 'restart',
+      emit: 'restart',
+      label: props.pendingAction === 'restart' ? 'Restarting...' : t('common.restart'),
+      class: 'glass-button',
+    })
+
+    actions.push({
+      key: 'uninstall',
+      emit: 'uninstall',
+      label: props.pendingAction === 'uninstall' ? 'Uninstalling...' : t('common.uninstall'),
+      class: 'glass-button text-red-300 border-red-500/30 hover:bg-red-500/10',
+    })
+  }
+
+  return actions
+})
+
+function emitAction(action: ActionEmit) {
+  switch (action) {
+    case 'launch':
+      emit('launch')
+      break
+    case 'start':
+      emit('start')
+      break
+    case 'stop':
+      emit('stop')
+      break
+    case 'restart':
+      emit('restart')
+      break
+    case 'uninstall':
+      emit('uninstall')
+      break
+    case 'update':
+      emit('update')
+      break
+    case 'channels':
+      emit('channels')
+      break
+  }
+}
+
+function handleImageError(e: Event) {
+  const target = e.target as HTMLImageElement
+  if (!target.src.includes(DEFAULT_APP_ICON)) {
+    target.src = DEFAULT_APP_ICON
+    target.dataset.defaultIcon = '1'
+  }
+}
+</script>
+
+<style scoped>
+.app-detail-actions-top {
+  display: none;
+}
+
+.app-detail-actions-bottom {
+  display: grid;
+}
+
+.app-detail-action-btn {
+  min-height: 44px;
+  white-space: nowrap;
+}
+
+@media (min-width: 1280px) {
+  .app-detail-actions-top {
+    display: flex;
+  }
+
+  .app-detail-actions-bottom {
+    display: none;
+  }
+}
+</style>
@@ -0,0 +1,416 @@
+<template>
+  <div class="space-y-6">
+    <!-- App Info Card -->
+    <div class="glass-card p-6">
+      <h3 class="text-lg font-bold text-white mb-4">{{ t('appDetails.information') }}</h3>
+      <div class="space-y-3">
+        <div class="flex items-center justify-between py-2 border-b border-white/10">
+          <span class="text-white/60 text-sm">{{ t('common.version') }}</span>
+          <div class="text-right">
+            <span class="text-white font-medium">{{ $ver(pkg.manifest.version) }}</span>
+            <span v-if="pkg['available-update']" class="text-orange-300 text-xs ml-2">
+              {{ $ver(pkg['available-update']) }} available
+            </span>
+          </div>
+        </div>
+        <div v-if="pkg.manifest.author" class="flex items-center justify-between py-2 border-b border-white/10">
+          <span class="text-white/60 text-sm">{{ t('common.developer') }}</span>
+          <span class="text-white font-medium">{{ pkg.manifest.author }}</span>
+        </div>
+        <div class="flex items-center justify-between py-2 border-b border-white/10">
+          <span class="text-white/60 text-sm">{{ t('common.status') }}</span>
+          <span class="text-white font-medium capitalize">{{ pkg.state }}</span>
+        </div>
+        <div v-if="pkg.manifest.license" class="flex items-center justify-between py-2 border-b border-white/10">
+          <span class="text-white/60 text-sm">{{ t('common.license') }}</span>
+          <span class="text-white font-medium">{{ pkg.manifest.license }}</span>
+        </div>
+        <div class="flex items-center justify-between py-2">
+          <span class="text-white/60 text-sm">{{ t('common.category') }}</span>
+          <span class="text-white font-medium">App</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Version & Updates Card (multi-version apps: Bitcoin Core / Knots).
+         Lets a runner switch versions, pin, and opt into auto-update. See
+         docs/bitcoin-multi-version-design.md §3 Phase 3. -->
+    <div v-if="versionInfo && versionInfo.supportsVersions && versionInfo.versions.length" class="glass-card p-6">
+      <h3 class="text-lg font-bold text-white mb-4">{{ t('appDetails.versionUpdates') }}</h3>
+      <div class="space-y-4">
+        <div class="flex items-center justify-between">
+          <span class="text-white/60 text-sm">{{ t('appDetails.runningVersion') }}</span>
+          <span class="text-white font-medium">{{ versionInfo.installedVersion || $ver(pkg.manifest.version) }}</span>
+        </div>
+
+        <div>
+          <label class="block text-white/60 text-sm mb-1">{{ t('appDetails.selectVersion') }}</label>
+          <select
+            v-model="selectedVersion"
+            :disabled="versionBusy"
+            class="w-full rounded-lg bg-white/[0.06] border border-white/10 text-white pl-3 pr-9 py-2 text-sm focus:outline-none focus:border-orange-400/60"
+          >
+            <option v-for="v in versionInfo.versions" :key="v.version" :value="v.version">{{ versionOptionLabel(v) }}</option>
+          </select>
+        </div>
+
+        <label class="flex items-center justify-between gap-3 cursor-pointer">
+          <span class="text-white/80 text-sm">{{ t('appDetails.autoUpdateLatest') }}</span>
+          <input
+            type="checkbox"
+            v-model="autoUpdate"
+            :disabled="versionBusy || isPinned"
+            class="h-4 w-4 accent-orange-500"
+          />
+        </label>
+        <p v-if="isPinned" class="text-white/40 text-xs -mt-2">{{ t('appDetails.autoUpdatePinnedNote') }}</p>
+
+        <!-- Downgrade confirmation -->
+        <div v-if="downgradeWarning" class="rounded-lg border border-orange-400/40 bg-orange-500/10 p-3">
+          <p class="text-orange-200 text-xs leading-relaxed">⚠️ {{ downgradeWarning }}</p>
+          <div class="flex gap-2 mt-3">
+            <button type="button" class="text-xs px-3 py-1.5 rounded-md bg-orange-500/80 hover:bg-orange-500 text-white" :disabled="versionBusy" @click="applyVersionConfig(true)">
+              {{ t('appDetails.confirmDowngrade') }}
+            </button>
+            <button type="button" class="text-xs px-3 py-1.5 rounded-md bg-white/10 hover:bg-white/20 text-white" :disabled="versionBusy" @click="cancelDowngrade">
+              {{ t('common.cancel') }}
+            </button>
+          </div>
+        </div>
+
+        <button
+          v-else
+          type="button"
+          class="w-full glass-button glass-button-warning rounded-lg disabled:opacity-50 text-sm font-medium py-2"
+          :disabled="versionBusy || !versionDirty"
+          @click="applyVersionConfig(false)"
+        >
+          {{ versionBusy ? t('appDetails.applyingVersion') : t('appDetails.applyVersion') }}
+        </button>
+        <p v-if="versionError" class="text-red-300 text-xs">{{ versionError }}</p>
+      </div>
+    </div>
+
+    <!-- Fedimint Services Card -->
+    <div v-if="packageKey === 'fedimint'" class="glass-card p-6">
+      <h3 class="text-lg font-bold text-white mb-4">{{ t('appDetails.services') }}</h3>
+      <div class="space-y-3">
+        <div class="flex items-center gap-3 py-2 border-b border-white/10">
+          <span class="w-2 h-2 rounded-full" :class="pkg.state === 'running' ? 'bg-green-400' : 'bg-yellow-400'"></span>
+          <div class="flex-1">
+            <p class="text-white/80 font-medium text-sm">{{ t('appDetails.guardian') }}</p>
+            <p class="text-white/50 text-xs capitalize">{{ pkg.state }}</p>
+          </div>
+        </div>
+        <div class="flex items-center gap-3 py-2">
+          <span class="w-2 h-2 rounded-full" :class="gatewayState === 'running' ? 'bg-green-400' : gatewayState === 'stopped' ? 'bg-yellow-400' : 'bg-red-400'"></span>
+          <div class="flex-1">
+            <p class="text-white/80 font-medium text-sm">{{ t('appDetails.gateway') }}</p>
+            <p class="text-white/50 text-xs capitalize">{{ gatewayState }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Access (LAN + Tor) Card -->
+    <div v-if="interfaceAddresses" class="glass-card p-6">
+      <h3 class="text-lg font-bold text-white mb-4">{{ t('appDetails.access') }}</h3>
+      <div class="space-y-3">
+        <div v-if="interfaceAddresses['lan-address']" class="flex items-start gap-3">
+          <svg class="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+          </svg>
+          <div class="flex-1 min-w-0">
+            <p class="text-white/80 font-medium">{{ t('appDetails.lan') }}</p>
+            <a
+              :href="lanUrl"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-orange-300 hover:text-orange-200 text-sm break-all"
+            >
+              {{ interfaceAddresses['lan-address'] }}
+            </a>
+          </div>
+        </div>
+        <div v-if="showTorAddress" class="flex items-start gap-3">
+          <svg class="w-5 h-5 text-amber-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+          </svg>
+          <div class="flex-1 min-w-0">
+            <p class="text-white/80 font-medium">{{ t('appDetails.tor') }}</p>
+            <span class="text-amber-300/90 text-sm font-mono break-all">{{ torUrl }}</span>
+            <p class="text-white/50 text-xs mt-1">{{ t('appDetails.requiresTor') }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Setup Instructions -->
+    <div v-if="setupInstructions" class="glass-card p-6">
+      <h3 class="text-lg font-bold text-white mb-3">{{ t('appDetails.setupInstructions') }}</h3>
+      <p class="text-sm text-white/70 leading-relaxed whitespace-pre-line">
+        {{ setupInstructions }}
+      </p>
+    </div>
+
+    <div v-if="credentialsLoading || credentials?.credentials?.length" class="glass-card p-6">
+      <h3 class="text-lg font-bold text-white mb-2">Credentials</h3>
+      <p v-if="credentials?.description" class="text-sm text-white/60 mb-4">{{ credentials.description }}</p>
+      <div v-if="credentialsLoading" class="space-y-3" aria-live="polite">
+        <div class="rounded-lg border border-white/10 bg-white/[0.04] p-3">
+          <div class="h-3 w-28 rounded bg-white/10 mb-3"></div>
+          <div class="h-4 w-full rounded bg-white/10"></div>
+        </div>
+        <p class="text-xs text-white/50">Loading credentials...</p>
+      </div>
+      <div v-else-if="credentials" class="space-y-3">
+        <div v-for="cred in credentials.credentials" :key="cred.label" class="rounded-lg border border-white/10 bg-white/[0.04] p-3">
+          <div class="flex items-center justify-between gap-3 mb-1">
+            <span class="text-white/60 text-xs uppercase tracking-wide">{{ cred.label }}</span>
+            <button type="button" class="text-xs text-orange-300 hover:text-orange-200" @click="copyCredential(cred.label, cred.value)">
+              {{ copiedCredential === cred.label ? 'Copied' : 'Copy' }}
+            </button>
+          </div>
+          <p class="font-mono text-sm text-white break-all">{{ cred.value }}</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Requirements Card (hidden for web-only apps) -->
+    <div v-if="!isWebOnly" class="glass-card p-6">
+      <h3 class="text-lg font-bold text-white mb-4">{{ t('appDetails.requirements') }}</h3>
+      <div class="space-y-3">
+        <div class="flex items-start gap-3">
+          <svg class="w-5 h-5 text-orange-300 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+          </svg>
+          <div class="flex-1">
+            <p class="text-white/80 font-medium">{{ t('appDetails.ram') }}</p>
+            <p class="text-white/60 text-sm">{{ t('appDetails.ramDesc') }}</p>
+          </div>
+        </div>
+        <div class="flex items-start gap-3">
+          <svg class="w-5 h-5 text-purple-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
+          </svg>
+          <div class="flex-1">
+            <p class="text-white/80 font-medium">{{ t('appDetails.storage') }}</p>
+            <p class="text-white/60 text-sm">{{ t('appDetails.storageDesc') }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Links Card -->
+    <div v-if="links.length > 0" class="glass-card p-6">
+      <h3 class="text-lg font-bold text-white mb-4">{{ t('appDetails.links') }}</h3>
+      <div class="space-y-2">
+        <a
+          v-for="link in links"
+          :key="link.kind"
+          :href="link.url"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="flex items-center gap-2 text-orange-300 hover:text-orange-200 transition-colors"
+        >
+          <svg
+            v-if="link.kind === 'website'"
+            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="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+          </svg>
+          <svg
+            v-else-if="link.kind === 'source'"
+            class="w-5 h-5"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.840 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+          </svg>
+          <svg
+            v-else
+            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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+          {{ link.label }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { AppCredentialsResponse } from '@/types/api'
+import { rpcClient, type PackageVersionsResponse, type CatalogVersionInfo } from '../../api/rpc-client'
+import { displayVersion } from '@/utils/version'
+
+const { t } = useI18n()
+const copiedCredential = ref('')
+
+async function copyCredential(label: string, value: string) {
+  try {
+    await navigator.clipboard.writeText(value)
+  } catch {
+    const textarea = document.createElement('textarea')
+    textarea.value = value
+    document.body.appendChild(textarea)
+    textarea.select()
+    document.execCommand('copy')
+    document.body.removeChild(textarea)
+  }
+  copiedCredential.value = label
+  setTimeout(() => {
+    if (copiedCredential.value === label) copiedCredential.value = ''
+  }, 1800)
+}
+
+const props = defineProps<{
+  pkg: Record<string, any>
+  packageKey: string
+  isWebOnly: boolean
+  gatewayState: string
+  interfaceAddresses: { 'tor-address': string; 'lan-address': string | null } | null
+  lanUrl: string
+  torUrl: string
+  showTorAddress: boolean
+  credentials: AppCredentialsResponse | null
+  credentialsLoading: boolean
+}>()
+
+type LinkKind = 'website' | 'source' | 'documentation'
+
+interface SidebarLink {
+  kind: LinkKind
+  label: string
+  url: string
+}
+
+function normalizeHttpUrl(value: unknown): string {
+  const url = typeof value === 'string' ? value.trim() : ''
+  if (!url || url === '#') return ''
+  if (/^https?:\/\//i.test(url)) return url
+  return ''
+}
+
+const links = computed<SidebarLink[]>(() => {
+  const manifest = props.pkg.manifest || {}
+  const website = normalizeHttpUrl(manifest.website || manifest['marketing-site'])
+  const source = normalizeHttpUrl(manifest['upstream-repo'] || manifest['wrapper-repo'])
+  const documentation = normalizeHttpUrl(manifest['support-site'])
+
+  return [
+    website ? { kind: 'website' as const, label: t('appDetails.website'), url: website } : null,
+    source ? { kind: 'source' as const, label: t('appDetails.sourceCode'), url: source } : null,
+    documentation ? { kind: 'documentation' as const, label: t('appDetails.documentation'), url: documentation } : null,
+  ].filter((link): link is SidebarLink => link !== null)
+})
+
+const setupInstructions = computed(() => {
+  const raw = props.pkg['static-files']?.instructions
+  const instructions = typeof raw === 'string' ? raw.trim() : ''
+  return instructions ? instructions : ''
+})
+
+// ---- Version & Updates (multi-version support) -----------------------------
+const versionInfo = ref<PackageVersionsResponse | null>(null)
+const selectedVersion = ref('')
+const autoUpdate = ref(false)
+const versionBusy = ref(false)
+const versionError = ref('')
+const downgradeWarning = ref('')
+
+const isPinned = computed(() => !!versionInfo.value?.pinnedVersion)
+// "Apply" is enabled when the runner changed the version or the toggle.
+const versionDirty = computed(() => {
+  const info = versionInfo.value
+  if (!info) return false
+  return selectedVersion.value !== pickSelection(info) || autoUpdate.value !== info.autoUpdate
+})
+
+// Option label: the floating "latest" entry reads as a sentence (no "v"
+// prefix); every concrete version is normalized via $ver + status suffixes.
+function versionOptionLabel(v: CatalogVersionInfo): string {
+  if (v.version === 'latest') return t('appDetails.alwaysUseLatestVersion')
+  let label = displayVersion(v.version)
+  if (v.deprecated) label += ' (deprecated)'
+  if (v.eol) label += ` · EOL ${v.eol}`
+  return label
+}
+
+// Resolve the dropdown's current value and GUARANTEE it matches a real option,
+// otherwise the native <select> renders blank. Prefer the pin, then the catalog
+// default, then the running version — but fall back to the default/first option
+// when none of those is actually in the list (e.g. a stale installedVersion the
+// catalog no longer carries, which is what left the control blank).
+function pickSelection(info: PackageVersionsResponse): string {
+  const options = info.versions.map((v) => v.version)
+  const preferred = info.pinnedVersion || info.default || info.installedVersion || ''
+  if (preferred && options.includes(preferred)) return preferred
+  return info.default && options.includes(info.default)
+    ? info.default
+    : info.versions[0]?.version || ''
+}
+
+async function loadVersions(appId: string) {
+  versionInfo.value = null
+  versionError.value = ''
+  downgradeWarning.value = ''
+  try {
+    const info = await rpcClient.getPackageVersions(appId)
+    if (!info.supportsVersions || !info.versions.length) return
+    versionInfo.value = info
+    selectedVersion.value = pickSelection(info)
+    autoUpdate.value = info.autoUpdate
+  } catch (err) {
+    if (import.meta.env.DEV) console.warn('[AppSidebar] getPackageVersions failed:', err)
+  }
+}
+
+async function applyVersionConfig(confirm: boolean) {
+  if (!versionInfo.value) return
+  versionBusy.value = true
+  versionError.value = ''
+  try {
+    const res = await rpcClient.setPackageConfig(versionInfo.value.id, {
+      version: selectedVersion.value,
+      autoUpdate: autoUpdate.value,
+      confirm,
+    })
+    if (res.status === 'confirm_required') {
+      downgradeWarning.value = res.warning || t('appDetails.downgradeGeneric')
+      return
+    }
+    downgradeWarning.value = ''
+    // Refresh so the card reflects the new pin / running version.
+    await loadVersions(versionInfo.value.id)
+  } catch (err: unknown) {
+    versionError.value = err instanceof Error ? err.message : String(err)
+  } finally {
+    versionBusy.value = false
+  }
+}
+
+function cancelDowngrade() {
+  downgradeWarning.value = ''
+  // Reset the dropdown to the current selection.
+  const info = versionInfo.value
+  if (info) selectedVersion.value = pickSelection(info)
+}
+
+watch(
+  () => props.packageKey,
+  (key) => {
+    if (key) void loadVersions(key)
+  },
+  { immediate: true },
+)
+</script>
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { rpcClient } from '@/api/rpc-client'
+
+// Lightning seed (aezeed) backup card. Shown on the LND app detail page.
+// The backend captures the aezeed at wallet-init time; until the user
+// confirms writing it down (`acknowledged`), the card renders as a
+// prominent first-launch prompt.
+
+const route = useRoute()
+const router = useRouter()
+
+const available = ref(false)
+const acknowledged = ref(true)
+const statusLoaded = ref(false)
+
+async function loadStatus(): Promise<boolean> {
+  try {
+    const res = await rpcClient.call<{ available: boolean; acknowledged: boolean }>({
+      method: 'lnd.seed-backup-status',
+      timeout: 5000,
+    })
+    available.value = !!res.available
+    acknowledged.value = !!res.acknowledged
+    statusLoaded.value = true
+    return true
+  } catch {
+    // Leave statusLoaded as-is; a one-off RPC blip must not permanently
+    // hide the card (the global banner may have just promised it's here).
+    return false
+  }
+}
+
+onMounted(async () => {
+  // Retry a few times — on fresh installs the backend can still be warming
+  // up when the user lands here straight from the backup banner.
+  for (let attempt = 0; attempt < 4; attempt++) {
+    if (await loadStatus()) break
+    await new Promise((r) => setTimeout(r, 1500 * (attempt + 1)))
+  }
+  // Deep link from the "Back up your Lightning seed" banner: open the
+  // reveal flow directly so the click visibly does something.
+  if (route.query['seed-backup'] === '1') {
+    router.replace({ query: { ...route.query, 'seed-backup': undefined } }).catch(() => {})
+    if (statusLoaded.value && available.value) openReveal()
+  }
+})
+
+// Reveal modal — re-auth gated (password + 2FA when enabled), same UX as
+// the recovery-phrase reveal in Settings → Backup.
+const showRevealModal = ref(false)
+const revealPassword = ref('')
+const revealCode = ref('')
+const revealing = ref(false)
+const revealError = ref('')
+const revealedWords = ref<string[]>([])
+const wordsHidden = ref(true)
+const wordsCopied = ref(false)
+const acking = ref(false)
+
+function openReveal() {
+  revealPassword.value = ''
+  revealCode.value = ''
+  revealError.value = ''
+  revealedWords.value = []
+  wordsHidden.value = true
+  showRevealModal.value = true
+}
+
+async function submitReveal() {
+  if (revealing.value || !revealPassword.value) return
+  revealing.value = true
+  revealError.value = ''
+  try {
+    const params: Record<string, string> = { password: revealPassword.value }
+    if (revealCode.value) params.code = revealCode.value
+    const res = await rpcClient.call<{ words: string[] }>({ method: 'lnd.seed-reveal', params })
+    revealedWords.value = res.words || []
+    wordsHidden.value = true
+  } catch (e: unknown) {
+    revealError.value = e instanceof Error ? e.message : 'Failed to reveal the Lightning seed'
+  } finally {
+    revealing.value = false
+  }
+}
+
+function closeReveal() {
+  showRevealModal.value = false
+  revealedWords.value = []
+  revealPassword.value = ''
+  revealCode.value = ''
+}
+
+async function copyRevealedWords() {
+  try {
+    await navigator.clipboard.writeText(revealedWords.value.join(' '))
+    wordsCopied.value = true
+    setTimeout(() => { wordsCopied.value = false }, 2000)
+  } catch { /* clipboard unavailable */ }
+}
+
+async function confirmBackedUp() {
+  if (acking.value) return
+  acking.value = true
+  try {
+    await rpcClient.call({ method: 'lnd.seed-backup-ack' })
+    acknowledged.value = true
+    closeReveal()
+  } catch { /* keep the modal open; user can retry */ } finally {
+    acking.value = false
+  }
+}
+</script>
+
+<template>
+  <div v-if="statusLoaded && available" class="glass-card px-6 py-6 mb-6" :class="!acknowledged ? 'border border-orange-400/40' : ''">
+    <div v-if="!acknowledged" class="flex items-center gap-2 mb-3 text-orange-300 text-sm font-medium" role="alert">
+      <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M10.29 3.86l-8.4 14.55A1.5 1.5 0 003.19 21h17.62a1.5 1.5 0 001.3-2.59l-8.4-14.55a1.5 1.5 0 00-2.62 0z" />
+      </svg>
+      Your Lightning seed hasn't been backed up yet
+    </div>
+    <div class="flex items-start justify-between gap-4">
+      <div class="min-w-0">
+        <h2 class="text-xl font-semibold text-white/96 mb-1">Lightning wallet seed</h2>
+        <p class="text-sm text-white/60">
+          View the 24-word recovery seed for this node's Lightning wallet. You'll need to
+          confirm your password (and 2FA code, if enabled). Write it down and store it
+          offline — anyone with these words controls your Lightning funds.
+        </p>
+      </div>
+      <button
+        type="button"
+        class="shrink-0 glass-button rounded-lg px-4 py-2 text-sm font-medium"
+        :class="!acknowledged ? 'bg-orange-500/20 border-orange-400/30' : ''"
+        @click="openReveal"
+      >{{ acknowledged ? 'Reveal' : 'Back up now' }}</button>
+    </div>
+  </div>
+
+  <Teleport to="body">
+    <div v-if="showRevealModal" class="fixed inset-0 z-[3000] flex items-center justify-center p-4 bg-black/60 backdrop-blur-md" @click.self="closeReveal">
+      <div class="glass-card p-6 w-full max-w-md" role="dialog" aria-modal="true" aria-labelledby="reveal-lnd-seed-title">
+        <h3 id="reveal-lnd-seed-title" class="text-lg font-semibold text-white mb-1">Reveal Lightning seed</h3>
+
+        <template v-if="revealedWords.length === 0">
+          <p class="text-sm text-white/60 mb-4">Confirm your credentials to display the 24-word Lightning seed.</p>
+          <form @submit.prevent="submitReveal" class="space-y-3">
+            <div>
+              <label class="block text-xs text-white/60 mb-1">Password</label>
+              <input v-model="revealPassword" type="password" autocomplete="current-password" class="w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-white text-sm focus:outline-none focus:border-white/30" placeholder="Your login password" />
+            </div>
+            <div>
+              <label class="block text-xs text-white/60 mb-1">2FA code <span class="text-white/30">(if enabled)</span></label>
+              <input v-model="revealCode" inputmode="numeric" autocomplete="one-time-code" class="w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-white text-sm font-mono tracking-widest focus:outline-none focus:border-white/30" placeholder="123456" />
+            </div>
+            <p v-if="revealError" class="text-xs text-red-300 bg-red-500/10 border border-red-400/20 rounded-lg px-3 py-2">{{ revealError }}</p>
+            <div class="flex gap-2 pt-1">
+              <button type="button" @click="closeReveal" class="flex-1 glass-button rounded-lg px-4 py-2 text-sm font-medium">Cancel</button>
+              <button type="submit" :disabled="revealing || !revealPassword" class="flex-1 glass-button rounded-lg px-4 py-2 text-sm font-medium bg-orange-500/20 border-orange-400/30 disabled:opacity-50">
+                {{ revealing ? 'Verifying…' : 'Reveal' }}
+              </button>
+            </div>
+          </form>
+        </template>
+
+        <template v-else>
+          <p class="text-sm text-white/60 mb-3">Write these down and store them offline. Tap to {{ wordsHidden ? 'reveal' : 'hide' }}.</p>
+          <div class="relative">
+            <div
+              class="grid grid-cols-2 sm:grid-cols-3 gap-2 p-3 bg-white/5 rounded-lg transition-all select-text"
+              :class="wordsHidden ? 'blur-md' : ''"
+              @click="wordsHidden = !wordsHidden"
+            >
+              <div v-for="(w, i) in revealedWords" :key="i" class="flex items-center gap-1.5 text-sm">
+                <span class="text-white/30 text-xs w-5 text-right">{{ i + 1 }}.</span>
+                <span class="text-white font-mono">{{ w }}</span>
+              </div>
+            </div>
+            <button v-if="wordsHidden" type="button" class="absolute inset-0 flex items-center justify-center text-xs text-white/70 font-medium" @click="wordsHidden = false">Tap to reveal</button>
+          </div>
+          <div class="flex gap-2 pt-4">
+            <button type="button" @click="copyRevealedWords" class="flex-1 glass-button rounded-lg px-4 py-2 text-sm font-medium">{{ wordsCopied ? 'Copied!' : 'Copy' }}</button>
+            <button type="button" :disabled="acking" @click="confirmBackedUp" class="flex-1 glass-button rounded-lg px-4 py-2 text-sm font-medium bg-orange-500/20 border-orange-400/30 disabled:opacity-50">
+              {{ acking ? 'Saving…' : "I've backed it up" }}
+            </button>
+          </div>
+        </template>
+      </div>
+    </div>
+  </Teleport>
+</template>
@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createI18n } from 'vue-i18n'
+import AppContentSection from '../AppContentSection.vue'
+import { PackageState, type PackageDataEntry } from '@/types/api'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      appDetails: {
+        about: 'About {name}',
+        features: 'Features',
+        screenshots: 'Screenshots',
+      },
+    },
+  },
+})
+
+function packageData(overrides: Partial<PackageDataEntry> = {}): PackageDataEntry {
+  return {
+    state: PackageState.Running,
+    health: 'healthy',
+    manifest: {
+      id: 'example',
+      title: 'Example',
+      version: '1.0.0',
+      description: {
+        short: 'Example app',
+        long: 'Example app details',
+      },
+      'release-notes': '',
+      license: '',
+      'wrapper-repo': '',
+      'upstream-repo': '',
+      'support-site': '',
+      'marketing-site': '',
+      'donation-url': null,
+    },
+    ...overrides,
+  }
+}
+
+function mountContent(pkg: PackageDataEntry) {
+  return mount(AppContentSection, {
+    props: {
+      pkg,
+      features: [],
+      needsBitcoinSync: false,
+      bitcoinSynced: true,
+      bitcoinSyncPercent: 100,
+      bitcoinBlockHeight: 100,
+    },
+    global: {
+      plugins: [i18n],
+    },
+  })
+}
+
+describe('AppContentSection', () => {
+  it('does not show screenshot placeholders when no screenshots exist', () => {
+    const wrapper = mountContent(packageData())
+
+    expect(wrapper.text()).not.toContain('Screenshots')
+    expect(wrapper.findAll('img')).toHaveLength(0)
+  })
+
+  it('renders real screenshot metadata when provided', () => {
+    const wrapper = mountContent(packageData({
+      manifest: {
+        ...packageData().manifest,
+        screenshots: [
+          '/assets/screenshots/example-dashboard.png',
+          { src: '/assets/screenshots/example-settings.png', alt: 'Settings screen' },
+          '   ',
+        ],
+      },
+    }))
+
+    const images = wrapper.findAll('img')
+
+    expect(wrapper.text()).toContain('Screenshots')
+    expect(images).toHaveLength(2)
+    expect(images[0]?.attributes('src')).toBe('/assets/screenshots/example-dashboard.png')
+    expect(images[0]?.attributes('alt')).toBe('Example screenshot 1')
+    expect(images[1]?.attributes('src')).toBe('/assets/screenshots/example-settings.png')
+    expect(images[1]?.attributes('alt')).toBe('Settings screen')
+  })
+})
@@ -0,0 +1,86 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createI18n } from 'vue-i18n'
+import AppHeroSection from '../AppHeroSection.vue'
+import { PackageState, type PackageDataEntry } from '@/types/api'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      common: {
+        launch: 'Launch',
+        restart: 'Restart',
+        start: 'Start',
+        stop: 'Stop',
+        uninstall: 'Uninstall',
+      },
+      appDetails: {
+        channels: 'Channels',
+      },
+    },
+  },
+})
+
+function packageData(overrides: Partial<PackageDataEntry> = {}): PackageDataEntry {
+  return {
+    state: PackageState.Running,
+    health: 'healthy',
+    manifest: {
+      id: 'example',
+      title: 'Example',
+      version: '1.0.0',
+      description: {
+        short: 'Example app',
+        long: 'Example app',
+      },
+      'release-notes': '',
+      license: '',
+      'wrapper-repo': '',
+      'upstream-repo': '',
+      'support-site': '',
+      'marketing-site': '',
+      'donation-url': null,
+    },
+    ...overrides,
+  }
+}
+
+function mountHero(props: Partial<InstanceType<typeof AppHeroSection>['$props']> = {}) {
+  return mount(AppHeroSection, {
+    props: {
+      pkg: packageData(),
+      appId: 'example',
+      packageKey: 'example',
+      canLaunch: true,
+      isWebOnly: false,
+      pendingAction: null,
+      ...props,
+    },
+    global: {
+      plugins: [i18n],
+    },
+  })
+}
+
+describe('AppHeroSection', () => {
+  it('disables app controls while a container action is running', () => {
+    const wrapper = mountHero({ pendingAction: 'restart' })
+
+    expect(wrapper.text()).toContain('Restarting...')
+    expect(wrapper.findAll('button').every(button => button.attributes('disabled') !== undefined)).toBe(true)
+  })
+
+  it('labels update progress and disables update controls', () => {
+    const wrapper = mountHero({
+      pendingAction: 'update',
+      pkg: packageData({ 'available-update': '1.1.0' }),
+    })
+
+    expect(wrapper.text()).toContain('Updating...')
+    const updateButtons = wrapper.findAll('button').filter(button => button.text().includes('Updating...'))
+    expect(updateButtons.length).toBeGreaterThan(0)
+    expect(updateButtons.every(button => button.attributes('disabled') !== undefined)).toBe(true)
+  })
+})
@@ -0,0 +1,135 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createI18n } from 'vue-i18n'
+import AppSidebar from '../AppSidebar.vue'
+import { PackageState } from '@/types/api'
+
+function mountSidebar(manifestOverrides: Record<string, unknown>, propOverrides: Record<string, unknown> = {}) {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+      en: {
+        appDetails: {
+          access: 'Access',
+          documentation: 'Documentation',
+          gateway: 'Gateway',
+          information: 'Information',
+          lan: 'LAN',
+          links: 'Links',
+          ram: 'RAM',
+          ramDesc: 'Memory required',
+          requirements: 'Requirements',
+          setupInstructions: 'Setup Instructions',
+          requiresTor: 'Requires Tor',
+          services: 'Services',
+          sourceCode: 'Source Code',
+          storage: 'Storage',
+          storageDesc: 'Storage required',
+          tor: 'Tor',
+          website: 'Website',
+        },
+        common: {
+          category: 'Category',
+          developer: 'Developer',
+          license: 'License',
+          status: 'Status',
+          version: 'Version',
+        },
+      },
+    },
+  })
+
+  return mount(AppSidebar, {
+    props: {
+      pkg: {
+        state: PackageState.Running,
+        manifest: {
+          id: 'example',
+          title: 'Example',
+          version: '1.0.0',
+          license: '',
+          ...manifestOverrides,
+        },
+        'static-files': { license: '', instructions: 'Follow step 1.\nThen step 2.', icon: '' },
+      },
+      packageKey: 'example',
+      isWebOnly: false,
+      gatewayState: 'stopped',
+      interfaceAddresses: null,
+      lanUrl: '',
+      torUrl: '',
+      showTorAddress: false,
+      credentials: null,
+      credentialsLoading: false,
+      ...propOverrides,
+    },
+    global: {
+      plugins: [i18n],
+    },
+  })
+}
+
+describe('AppSidebar', () => {
+  it('renders manifest links with real URLs', () => {
+    const wrapper = mountSidebar({
+      website: 'https://example.com',
+      'upstream-repo': 'https://github.com/example/app',
+      'support-site': 'https://docs.example.com',
+    })
+
+    const hrefs = wrapper.findAll('a').map(anchor => anchor.attributes('href'))
+
+    expect(hrefs).toEqual([
+      'https://example.com',
+      'https://github.com/example/app',
+      'https://docs.example.com',
+    ])
+    expect(wrapper.text()).toContain('Website')
+    expect(wrapper.text()).toContain('Source Code')
+    expect(wrapper.text()).toContain('Documentation')
+  })
+
+  it('does not render dead placeholder links', () => {
+    const wrapper = mountSidebar({
+      website: '#',
+      'upstream-repo': '',
+      'support-site': undefined,
+    })
+
+    expect(wrapper.findAll('a')).toHaveLength(0)
+    expect(wrapper.text()).not.toContain('Links')
+  })
+
+  it('shows a credentials loading state before credentials arrive', () => {
+    const wrapper = mountSidebar({}, { credentialsLoading: true })
+
+    expect(wrapper.text()).toContain('Credentials')
+    expect(wrapper.text()).toContain('Loading credentials...')
+  })
+
+  it('renders setup instructions when provided', () => {
+    const wrapper = mountSidebar({})
+
+    expect(wrapper.text()).toContain('Setup Instructions')
+    expect(wrapper.text()).toContain('Follow step 1.')
+    expect(wrapper.text()).toContain('Then step 2.')
+  })
+
+  it('hides setup instructions when empty', () => {
+    const wrapper = mountSidebar({}, {
+      pkg: {
+        state: PackageState.Running,
+        manifest: {
+          id: 'example',
+          title: 'Example',
+          version: '1.0.0',
+          license: '',
+        },
+        'static-files': { license: '', instructions: '   ', icon: '' },
+      },
+    })
+
+    expect(wrapper.text()).not.toContain('Setup Instructions')
+  })
+})
@@ -0,0 +1,154 @@
+/**
+ * AppDetails data: URL maps, route-to-package mappings, aliases, and status helpers.
+ * Extracted from AppDetails.vue to keep the view under 500 lines.
+ */
+import { PackageState } from '@/types/api'
+
+/** Web-only app detection (no container -- external websites) */
+export const WEB_ONLY_APP_URLS: Record<string, string> = {}
+
+/** Map route/marketplace app IDs to backend package keys (container names). */
+export const ROUTE_TO_PACKAGE_KEY: Record<string, string> = {
+  mempool: 'mempool',
+  'mempool-electrs': 'mempool-electrs',
+  electrs: 'mempool-electrs',
+  btcpay: 'btcpay-server',
+  'btcpay-server': 'btcpay-server',
+  fedimint: 'fedimint',
+  'fedimint-gateway': 'fedimint-gateway',
+  lnd: 'lnd',
+  'lnd-ui': 'lnd',
+  bitcoin: 'bitcoin-knots',
+  'bitcoin-knots': 'bitcoin-knots',
+  homeassistant: 'homeassistant',
+  'home-assistant': 'homeassistant',
+  grafana: 'grafana',
+  searxng: 'searxng',
+  ollama: 'ollama',
+  nextcloud: 'nextcloud',
+  vaultwarden: 'vaultwarden',
+  jellyfin: 'jellyfin',
+  photoprism: 'photoprism',
+  immich: 'immich',
+  filebrowser: 'filebrowser',
+  'nginx-proxy-manager': 'nginx-proxy-manager',
+  'gitea': 'gitea',
+  portainer: 'portainer',
+  'uptime-kuma': 'uptime-kuma',
+  tailscale: 'tailscale',
+  netbird: 'netbird',
+}
+
+/** Backend may register under variant container names */
+export const PACKAGE_ALIASES: Record<string, string[]> = {
+  immich: ['immich_server', 'immich-server'],
+  nextcloud: ['nextcloud-aio', 'nextcloud-server'],
+}
+
+export function resolvePackageKey(routeId: string): string {
+  return ROUTE_TO_PACKAGE_KEY[routeId] ?? routeId
+}
+
+/** Apps that depend on Bitcoin being synced */
+export const BITCOIN_DEPENDENT_APPS = ['lnd', 'electrumx', 'electrs', 'mempool-electrs', 'btcpay-server', 'btcpayserver']
+
+/** App launch URLs for dev and prod environments */
+export const APP_URLS: Record<string, { dev: string; prod: string }> = {
+  'lorabell': { dev: 'http://192.168.1.166', prod: 'http://192.168.1.166' },
+  'atob': { dev: 'http://localhost:8102', prod: 'https://app.atobitcoin.io' },
+  'k484': { dev: 'http://localhost:8103', prod: 'http://localhost:8103' },
+  'bitcoin': { dev: 'http://localhost:8332', prod: 'http://localhost:8332' },
+  'btcpay-server': { dev: 'http://localhost:23000', prod: 'http://localhost:23000' },
+  'homeassistant': { dev: 'http://localhost:8123', prod: 'http://localhost:8123' },
+  'grafana': { dev: 'http://localhost:3000', prod: 'http://localhost:3000' },
+  'endurain': { dev: 'http://localhost:8080', prod: 'http://localhost:8080' },
+  'fedimint': { dev: 'http://localhost:8175', prod: 'http://192.168.1.228:8175' },
+  'fedimint-gateway': { dev: 'http://localhost:8176', prod: 'http://192.168.1.228:8176' },
+  'morphos-server': { dev: 'http://localhost:8081', prod: 'http://localhost:8081' },
+  'lightning-stack': { dev: 'http://localhost:9735', prod: 'http://localhost:9735' },
+  'mempool': { dev: 'http://localhost:4080', prod: 'http://localhost:4080' },
+  'ollama': { dev: 'http://localhost:11434', prod: 'http://localhost:11434' },
+  'searxng': { dev: 'http://localhost:8888', prod: 'http://localhost:8888' },
+  'nextcloud': { dev: 'http://localhost:8085', prod: 'http://localhost:8085' },
+  'vaultwarden': { dev: 'http://localhost:8082', prod: 'http://localhost:8082' },
+  'jellyfin': { dev: 'http://localhost:8096', prod: 'http://localhost:8096' },
+  'photoprism': { dev: 'http://localhost:2342', prod: 'http://localhost:2342' },
+  'immich': { dev: 'http://localhost:2283', prod: 'http://localhost:2283' },
+  'filebrowser': { dev: 'http://localhost:8083', prod: 'http://localhost:8083' },
+  'nginx-proxy-manager': { dev: 'http://localhost:8081', prod: 'http://localhost:8081' },
+  'gitea': { dev: 'http://localhost:3001', prod: 'http://localhost:3001' },
+  'portainer': { dev: 'http://localhost:9000', prod: 'http://localhost:9000' },
+  'uptime-kuma': { dev: 'http://localhost:3002', prod: 'http://localhost:3002' },
+  'tailscale': { dev: 'http://localhost:8240', prod: 'http://localhost:8240' },
+  'lnd': { dev: 'http://localhost:18083', prod: 'http://localhost:18083' },
+  'bitcoin-knots': { dev: 'http://localhost:8334', prod: 'http://localhost:8334' },
+  'botfights': { dev: 'http://localhost:9100', prod: 'http://localhost:9100' },
+}
+
+/** V3 onion addresses are 56+ chars + .onion. Placeholders like "btcpay.onion" are not real. */
+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, 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) {
+    case PackageState.Running:
+      return 'bg-green-500/20 text-green-200 border border-green-500/30'
+    case PackageState.Stopped:
+      return 'bg-gray-500/20 text-gray-200 border border-gray-500/30'
+    case PackageState.Exited:
+      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:
+      return 'bg-yellow-500/20 text-yellow-200 border border-yellow-500/30'
+    case PackageState.Installing:
+      return 'bg-blue-500/20 text-blue-200 border border-blue-500/30'
+    case PackageState.Updating:
+      return 'bg-orange-500/20 text-orange-200 border border-orange-500/30'
+    default:
+      return 'bg-gray-500/20 text-gray-200 border border-gray-500/30'
+  }
+}
+
+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) {
+    case PackageState.Running:
+      return 'bg-green-400'
+    case PackageState.Stopped:
+      return 'bg-gray-400'
+    case PackageState.Exited:
+      return exitCode != null && exitCode !== 0
+        ? 'bg-red-400 animate-pulse'
+        : 'bg-gray-400'
+    case PackageState.Starting:
+    case PackageState.Stopping:
+    case PackageState.Restarting:
+      return 'bg-yellow-400 animate-pulse'
+    case PackageState.Installing:
+      return 'bg-blue-400 animate-pulse'
+    case PackageState.Updating:
+      return 'bg-orange-400 animate-pulse'
+    default:
+      return 'bg-gray-400'
+  }
+}
+
+export function getStatusLabel(state: PackageState, health?: string | null, exitCode?: number | null): string {
+  if (state === PackageState.Updating) return 'updating...'
+  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) {
+    if (exitCode === 137) return 'killed (SIGKILL)'
+    if (exitCode != null && exitCode !== 0) return 'crashed'
+    return 'stopped'
+  }
+  return state
+}