bug fixing and deploy and build diagnostics

neode-ui/src/components/EasyHome.vue

@@ -68,7 +68,7 @@ const APP_ICON_MAP: Record<string, string> = {
   'bitcoin-knots': '/assets/img/app-icons/bitcoin-knots.webp',
   lnd: '/assets/img/app-icons/lnd.svg',
   'btcpay-server': '/assets/img/app-icons/btcpay-server.png',
-  immich: '/assets/img/app-icons/immich.png',
+  filebrowser: '/assets/img/app-icons/file-browser.webp',
   nextcloud: '/assets/img/app-icons/nextcloud.webp',
   fedimint: '/assets/img/app-icons/fedimint.png',
   mempool: '/assets/img/app-icons/mempool.webp',

neode-ui/src/composables/useMarketplaceApp.ts

@@ -6,7 +6,7 @@ export interface MarketplaceAppInfo {
   version: string
   icon: string
   category: string
-  description: string | { short: string; long: string }
+  description: string | { short?: string; long?: string }
   author: string
   source: string
   manifestUrl: string

neode-ui/src/data/goals.ts

@@ -80,37 +80,30 @@ export const GOALS: GoalDefinition[] = [
     difficulty: 'beginner',
   },
   {
-    id: 'store-photos',
-    title: 'Store My Photos',
-    subtitle: 'Private photo backup and gallery on your own hardware',
-    icon: 'photos',
+    id: 'file-browser',
+    title: 'File Browser',
+    subtitle: 'Browse, upload, and manage files on your server',
+    icon: 'files',
     category: 'storage',
-    requiredApps: ['immich'],
+    requiredApps: ['filebrowser'],
     steps: [
       {
-        id: 'install-immich',
-        title: 'Install Immich',
-        description: 'Immich is a self-hosted photo and video management solution. It looks and feels like Google Photos, but your data stays on your server.',
-        appId: 'immich',
+        id: 'install-filebrowser',
+        title: 'Install FileBrowser',
+        description: 'FileBrowser is a lightweight web file manager. Upload, download, and organize files on your server from any browser.',
+        appId: 'filebrowser',
         action: 'install',
         isAutomatic: true,
       },
       {
-        id: 'configure-immich',
-        title: 'Create Your Account',
-        description: 'Set up your Immich account and configure your photo library. Quick and simple.',
+        id: 'configure-filebrowser',
+        title: 'Log In',
+        description: 'Open FileBrowser and log in. Change your password on first login, then start managing your files.',
         action: 'configure',
         isAutomatic: false,
       },
-      {
-        id: 'mobile-sync',
-        title: 'Connect Your Phone',
-        description: 'Download the Immich app on your phone and scan the QR code to start automatic photo backup.',
-        action: 'info',
-        isAutomatic: false,
-      },
     ],
-    estimatedTime: '~15 min',
+    estimatedTime: '~5 min',
     difficulty: 'beginner',
   },
   {

neode-ui/src/stores/app.ts

@@ -1,342 +1,69 @@
-// Main application store using Pinia
+// Facade store — re-exports auth, sync, and server stores for backward compatibility.
+// All 29+ files that import useAppStore() continue to work without changes.
+// Uses defineStore with computed/writableComputed to preserve full reactivity.
 
-import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
-import type { DataModel } from '../types/api'
-import { wsClient, applyDataPatch } from '../api/websocket'
-import { rpcClient } from '../api/rpc-client'
+import { defineStore, storeToRefs } from 'pinia'
+import { useAuthStore } from './auth'
+import { useSyncStore } from './sync'
+import { useServerStore } from './server'
 
 export const useAppStore = defineStore('app', () => {
-  // State
-  const data = ref<DataModel | null>(null)
-  const isAuthenticated = ref(localStorage.getItem('neode-auth') === 'true')
-  const isConnected = ref(false)
-  const isReconnecting = ref(false)
-  const isLoading = ref(false)
-  const error = ref<string | null>(null)
-  let isWsSubscribed = false
-  let isWsConnecting = false
-  let sessionValidated = false
+  const auth = useAuthStore()
+  const sync = useSyncStore()
+  const server = useServerStore()
 
-  // Computed
-  const serverInfo = computed(() => data.value?.['server-info'])
-  const packages = computed(() => data.value?.['package-data'] || {})
-  const peerHealth = computed<Record<string, boolean>>(() => data.value?.['peer-health'] || {})
-  const uiData = computed(() => data.value?.ui)
-  const serverName = computed(() => serverInfo.value?.name || 'Archipelago')
-  const isRestarting = computed(() => serverInfo.value?.['status-info']?.restarting || false)
-  const isShuttingDown = computed(() => serverInfo.value?.['status-info']?.['shutting-down'] || false)
-  const isOffline = computed(() => !isConnected.value || isRestarting.value || isShuttingDown.value)
+  // Writable refs — delegate reads and writes to the sub-stores
+  const { isAuthenticated, isLoading, error } = storeToRefs(auth)
+  const { data, isConnected, isReconnecting } = storeToRefs(sync)
 
-  // Actions
-  async function login(password: string): Promise<{ requires_totp?: boolean }> {
-    isLoading.value = true
-    error.value = null
-
-    try {
-      const result = await rpcClient.login(password)
-      if (result && result.requires_totp) {
-        return { requires_totp: true }
-      }
-
-      isAuthenticated.value = true
-      sessionValidated = true
-      try { localStorage.setItem('neode-auth', 'true') } catch { /* localStorage full or unavailable */ }
-
-      // Initialize data structure immediately so dashboard can render
-      await initializeData()
-
-      // Connect WebSocket in background - don't block login flow
-      connectWebSocket().catch((err) => {
-        if (import.meta.env.DEV) console.warn('[Store] WebSocket connection failed after login, will retry:', err)
-      })
-      return {}
-    } catch (err) {
-      error.value = err instanceof Error ? err.message : 'Login failed'
-      throw err
-    } finally {
-      isLoading.value = false
-    }
-  }
-
-  async function completeLoginAfterTotp(): Promise<void> {
-    isAuthenticated.value = true
-    sessionValidated = true
-    try { localStorage.setItem('neode-auth', 'true') } catch { /* localStorage full or unavailable */ }
-    await initializeData()
-    connectWebSocket().catch((err) => {
-      if (import.meta.env.DEV) console.warn('[Store] WebSocket connection failed after TOTP login, will retry:', err)
-    })
-  }
-
-  async function logout(): Promise<void> {
-    try {
-      await rpcClient.logout()
-    } catch (err) {
-      if (import.meta.env.DEV) console.error('Logout error:', err)
-    } finally {
-      isAuthenticated.value = false
-      sessionValidated = false
-      localStorage.removeItem('neode-auth')
-      data.value = null
-      isWsSubscribed = false
-      wsClient.disconnect()
-      isConnected.value = false
-      isReconnecting.value = false
-    }
-  }
-
-  async function connectWebSocket(): Promise<void> {
-    // Prevent concurrent connection attempts
-    if (isWsConnecting) return
-    isWsConnecting = true
-
-    try {
-      if (import.meta.env.DEV) console.log('[Store] Connecting WebSocket...')
-      isReconnecting.value = true
-
-      // Don't create multiple subscriptions - check if already subscribed
-      if (!isWsSubscribed) {
-        // Subscribe to updates BEFORE connecting (so we catch initial data)
-        isWsSubscribed = true
-        
-        // Listen for connection state changes
-        wsClient.onConnectionStateChange((state) => {
-          if (import.meta.env.DEV) console.log('[Store] WebSocket connection state changed:', state)
-          isConnected.value = state === 'connected'
-          isReconnecting.value = state === 'connecting'
-        })
-        
-        wsClient.subscribe((update: { type?: string; data?: DataModel; rev?: number; patch?: import('@/types/api').PatchOperation[] }) => {
-        // Handle mock backend format: {type: 'initial', data: {...}}
-        if (update?.type === 'initial' && update?.data) {
-          if (import.meta.env.DEV) console.log('[Store] Received initial data from mock backend')
-          data.value = update.data
-          isConnected.value = true
-          isReconnecting.value = false
-        }
-        // Handle real backend format: {rev: 0, data: {...}}
-        else if (update?.data && update?.rev !== undefined) {
-          data.value = update.data
-          isConnected.value = true
-          isReconnecting.value = false
-        }
-        // Handle patch updates (both backends)
-        else if (data.value && update?.patch) {
-          try {
-            if (import.meta.env.DEV) console.log('[Store] Applying patch at revision', update.rev || 'unknown')
-          data.value = applyDataPatch(data.value, update.patch)
-            // Mark as connected once we receive any valid patch
-            if (!isConnected.value) {
-              isConnected.value = true
-              isReconnecting.value = false
-            }
-          } catch (err) {
-            if (import.meta.env.DEV) console.error('[Store] Failed to apply WebSocket patch:', err)
-          }
-        }
-        })
-      }
-      
-      // Now connect (or reconnect if already connected)
-      // Only attempt to connect if not already connected
-      if (wsClient.isConnected()) {
-        if (import.meta.env.DEV) console.log('[Store] WebSocket already connected')
-        isConnected.value = true
-        isReconnecting.value = false
-        return
-      }
-      
-      await wsClient.connect()
-      if (import.meta.env.DEV) console.log('[Store] WebSocket connected')
-
-      // Fetch fresh state after reconnect to avoid stale patch application
-      try {
-        const freshState = await rpcClient.call<{ data: DataModel }>({ method: 'server.get-state' })
-        if (freshState?.data) {
-          data.value = freshState.data
-        }
-      } catch {
-        // Non-fatal: WebSocket patches will still work
-        if (import.meta.env.DEV) console.warn('[Store] Failed to fetch fresh state after reconnect')
-      }
-
-      // Connection state will be updated via the callback
-      if (wsClient.isConnected()) {
-        isConnected.value = true
-        isReconnecting.value = false
-      }
-      
-    } catch (err) {
-      if (import.meta.env.DEV) console.error('[Store] WebSocket connection failed:', err)
-      // Don't mark as disconnected immediately - let reconnection logic handle it
-      // The WebSocket client will retry automatically
-      isReconnecting.value = true
-      isConnected.value = false
-      // Don't throw - allow app to work without real-time updates
-      // The WebSocket will reconnect in the background
-    } finally {
-      isWsConnecting = false
-    }
-  }
-
-  async function initializeData(): Promise<void> {
-    // Initialize with empty data structure
-    // The WebSocket will populate it with real data
-    data.value = {
-      'server-info': {
-        id: '',
-        version: '',
-        name: null,
-        pubkey: '',
-        'status-info': {
-          restarting: false,
-          'shutting-down': false,
-          updated: false,
-          'backup-progress': null,
-          'update-progress': null,
-        },
-        'lan-address': null,
-        'tor-address': null,
-        unread: 0,
-        'wifi-ssids': [],
-        'zram-enabled': false,
-      },
-      'package-data': {},
-      ui: {
-        name: null,
-        'ack-welcome': '',
-        marketplace: {
-          'selected-hosts': [],
-          'known-hosts': {},
-        },
-        theme: 'dark',
-      },
-    }
-  }
-  
-  // Check session validity on app load or stale auth
-  async function checkSession(): Promise<boolean> {
-    if (!localStorage.getItem('neode-auth')) {
-      return false
-    }
-    
-    try {
-      await rpcClient.call({ method: 'server.echo', params: { message: 'ping' } })
-      isAuthenticated.value = true
-      sessionValidated = true
-      
-      await initializeData()
-      
-      connectWebSocket().catch((err) => {
-        if (import.meta.env.DEV) console.warn('[Store] WebSocket reconnection failed, will retry:', err)
-        isReconnecting.value = true
-      })
-      
-      return true
-    } catch (err) {
-      if (import.meta.env.DEV) console.error('[Store] Session check failed:', err)
-      localStorage.removeItem('neode-auth')
-      isAuthenticated.value = false
-      sessionValidated = false
-      isWsSubscribed = false
-      isConnected.value = false
-      isReconnecting.value = false
-      wsClient.disconnect()
-      return false
-    }
-  }
-
-  function needsSessionValidation(): boolean {
-    return isAuthenticated.value && !sessionValidated
-  }
-
-  // Package actions
-  async function installPackage(id: string, marketplaceUrl: string, version: string): Promise<string> {
-    return rpcClient.installPackage(id, marketplaceUrl, version)
-  }
-
-  async function uninstallPackage(id: string): Promise<void> {
-    return rpcClient.uninstallPackage(id)
-  }
-
-  async function startPackage(id: string): Promise<void> {
-    return rpcClient.startPackage(id)
-  }
-
-  async function stopPackage(id: string): Promise<void> {
-    return rpcClient.stopPackage(id)
-  }
-
-  async function restartPackage(id: string): Promise<void> {
-    return rpcClient.restartPackage(id)
-  }
-
-  // Server actions
-  async function updateServer(marketplaceUrl: string): Promise<'updating' | 'no-updates'> {
-    return rpcClient.updateServer(marketplaceUrl)
-  }
-
-  async function restartServer(): Promise<void> {
-    return rpcClient.restartServer()
-  }
-
-  async function shutdownServer(): Promise<void> {
-    return rpcClient.shutdownServer()
-  }
-
-  async function getMetrics(): Promise<Record<string, unknown>> {
-    return rpcClient.getMetrics()
-  }
-
-  // Marketplace actions
-  async function getMarketplace(url: string): Promise<Record<string, unknown>> {
-    return rpcClient.getMarketplace(url)
-  }
-
-  function updateServerName(name: string) {
-    if (data.value?.['server-info']) {
-      data.value['server-info'].name = name
-    }
-  }
+  // Read-only computed — delegate to sub-stores
+  const { serverInfo, packages, peerHealth, uiData } = storeToRefs(sync)
+  const { serverName, isRestarting, isShuttingDown, isOffline } = storeToRefs(server)
 
   return {
-    // State
-    data,
+    // Auth state (writable refs)
     isAuthenticated,
-    isConnected,
-    isReconnecting,
     isLoading,
     error,
 
-    // Computed
+    // Sync state (writable refs)
+    data,
+    isConnected,
+    isReconnecting,
+
+    // Sync computed (read-only)
     serverInfo,
     packages,
     peerHealth,
     uiData,
+
+    // Server computed (read-only)
     serverName,
     isRestarting,
     isShuttingDown,
     isOffline,
 
-    // Actions
-    login,
-    completeLoginAfterTotp,
-    logout,
-    checkSession,
-    needsSessionValidation,
-    connectWebSocket,
-    installPackage,
-    uninstallPackage,
-    startPackage,
-    stopPackage,
-    restartPackage,
-    updateServer,
-    restartServer,
-    shutdownServer,
-    getMetrics,
-    getMarketplace,
-    updateServerName,
+    // Auth actions
+    login: auth.login,
+    completeLoginAfterTotp: auth.completeLoginAfterTotp,
+    logout: auth.logout,
+    checkSession: auth.checkSession,
+    needsSessionValidation: auth.needsSessionValidation,
+
+    // Sync actions
+    connectWebSocket: sync.connectWebSocket,
+
+    // Server actions
+    installPackage: server.installPackage,
+    uninstallPackage: server.uninstallPackage,
+    startPackage: server.startPackage,
+    stopPackage: server.stopPackage,
+    restartPackage: server.restartPackage,
+    updateServer: server.updateServer,
+    restartServer: server.restartServer,
+    shutdownServer: server.shutdownServer,
+    getMetrics: server.getMetrics,
+    getMarketplace: server.getMarketplace,
+    updateServerName: server.updateServerName,
   }
 })
-

neode-ui/src/stores/auth.ts

@@ -0,0 +1,121 @@
+// Authentication store — login, logout, session management
+
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { rpcClient } from '../api/rpc-client'
+import { useSyncStore } from './sync'
+
+export const useAuthStore = defineStore('auth', () => {
+  // State
+  const isAuthenticated = ref(localStorage.getItem('neode-auth') === 'true')
+  const isLoading = ref(false)
+  const error = ref<string | null>(null)
+  let sessionValidated = false
+
+  // Actions
+  async function login(password: string): Promise<{ requires_totp?: boolean }> {
+    isLoading.value = true
+    error.value = null
+
+    try {
+      const result = await rpcClient.login(password)
+      if (result && result.requires_totp) {
+        return { requires_totp: true }
+      }
+
+      isAuthenticated.value = true
+      sessionValidated = true
+      try { localStorage.setItem('neode-auth', 'true') } catch { /* localStorage full or unavailable */ }
+
+      const sync = useSyncStore()
+
+      // Initialize data structure immediately so dashboard can render
+      await sync.initializeData()
+
+      // Connect WebSocket in background - don't block login flow
+      sync.connectWebSocket().catch((err) => {
+        if (import.meta.env.DEV) console.warn('[Store] WebSocket connection failed after login, will retry:', err)
+      })
+      return {}
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : 'Login failed'
+      throw err
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  async function completeLoginAfterTotp(): Promise<void> {
+    isAuthenticated.value = true
+    sessionValidated = true
+    try { localStorage.setItem('neode-auth', 'true') } catch { /* localStorage full or unavailable */ }
+
+    const sync = useSyncStore()
+    await sync.initializeData()
+    sync.connectWebSocket().catch((err) => {
+      if (import.meta.env.DEV) console.warn('[Store] WebSocket connection failed after TOTP login, will retry:', err)
+    })
+  }
+
+  async function logout(): Promise<void> {
+    const sync = useSyncStore()
+    try {
+      await rpcClient.logout()
+    } catch (err) {
+      if (import.meta.env.DEV) console.error('Logout error:', err)
+    } finally {
+      isAuthenticated.value = false
+      sessionValidated = false
+      localStorage.removeItem('neode-auth')
+      sync.resetOnLogout()
+    }
+  }
+
+  async function checkSession(): Promise<boolean> {
+    if (!localStorage.getItem('neode-auth')) {
+      return false
+    }
+
+    try {
+      await rpcClient.call({ method: 'server.echo', params: { message: 'ping' } })
+      isAuthenticated.value = true
+      sessionValidated = true
+
+      const sync = useSyncStore()
+      await sync.initializeData()
+
+      sync.connectWebSocket().catch((err) => {
+        if (import.meta.env.DEV) console.warn('[Store] WebSocket reconnection failed, will retry:', err)
+      })
+
+      return true
+    } catch (err) {
+      if (import.meta.env.DEV) console.error('[Store] Session check failed:', err)
+      localStorage.removeItem('neode-auth')
+      isAuthenticated.value = false
+      sessionValidated = false
+
+      const sync = useSyncStore()
+      sync.resetOnLogout()
+      return false
+    }
+  }
+
+  function needsSessionValidation(): boolean {
+    return isAuthenticated.value && !sessionValidated
+  }
+
+  return {
+    // State
+    isAuthenticated,
+    isLoading,
+    error,
+
+    // Actions
+    login,
+    completeLoginAfterTotp,
+    logout,
+    checkSession,
+    needsSessionValidation,
+  }
+})

neode-ui/src/stores/server.ts

@@ -0,0 +1,86 @@
+// Server store — computed server state and RPC action proxies
+
+import { defineStore } from 'pinia'
+import { computed } from 'vue'
+import { rpcClient } from '../api/rpc-client'
+import { useSyncStore } from './sync'
+
+export const useServerStore = defineStore('server', () => {
+  const sync = useSyncStore()
+
+  // Computed — derived from sync store's data
+  const serverName = computed(() => sync.serverInfo?.name || 'Archipelago')
+  const isRestarting = computed(() => sync.serverInfo?.['status-info']?.restarting || false)
+  const isShuttingDown = computed(() => sync.serverInfo?.['status-info']?.['shutting-down'] || false)
+  const isOffline = computed(() => !sync.isConnected || isRestarting.value || isShuttingDown.value)
+
+  // Package actions
+  async function installPackage(id: string, marketplaceUrl: string, version: string): Promise<string> {
+    return rpcClient.installPackage(id, marketplaceUrl, version)
+  }
+
+  async function uninstallPackage(id: string): Promise<void> {
+    return rpcClient.uninstallPackage(id)
+  }
+
+  async function startPackage(id: string): Promise<void> {
+    return rpcClient.startPackage(id)
+  }
+
+  async function stopPackage(id: string): Promise<void> {
+    return rpcClient.stopPackage(id)
+  }
+
+  async function restartPackage(id: string): Promise<void> {
+    return rpcClient.restartPackage(id)
+  }
+
+  // Server actions
+  async function updateServer(marketplaceUrl: string): Promise<'updating' | 'no-updates'> {
+    return rpcClient.updateServer(marketplaceUrl)
+  }
+
+  async function restartServer(): Promise<void> {
+    return rpcClient.restartServer()
+  }
+
+  async function shutdownServer(): Promise<void> {
+    return rpcClient.shutdownServer()
+  }
+
+  async function getMetrics(): Promise<Record<string, unknown>> {
+    return rpcClient.getMetrics()
+  }
+
+  // Marketplace actions
+  async function getMarketplace(url: string): Promise<Record<string, unknown>> {
+    return rpcClient.getMarketplace(url)
+  }
+
+  function updateServerName(name: string) {
+    if (sync.data?.['server-info']) {
+      sync.data['server-info'].name = name
+    }
+  }
+
+  return {
+    // Computed
+    serverName,
+    isRestarting,
+    isShuttingDown,
+    isOffline,
+
+    // Actions
+    installPackage,
+    uninstallPackage,
+    startPackage,
+    stopPackage,
+    restartPackage,
+    updateServer,
+    restartServer,
+    shutdownServer,
+    getMetrics,
+    getMarketplace,
+    updateServerName,
+  }
+})

neode-ui/src/stores/sync.ts

@@ -0,0 +1,179 @@
+// Sync store — WebSocket connection, real-time data, patch application
+
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type { DataModel } from '../types/api'
+import { wsClient, applyDataPatch } from '../api/websocket'
+import { rpcClient } from '../api/rpc-client'
+
+export const useSyncStore = defineStore('sync', () => {
+  // State
+  const data = ref<DataModel | null>(null)
+  const isConnected = ref(false)
+  const isReconnecting = ref(false)
+  let isWsSubscribed = false
+  let isWsConnecting = false
+
+  // Computed
+  const serverInfo = computed(() => data.value?.['server-info'])
+  const packages = computed(() => data.value?.['package-data'] || {})
+  const peerHealth = computed<Record<string, boolean>>(() => data.value?.['peer-health'] || {})
+  const uiData = computed(() => data.value?.ui)
+
+  // Actions
+  async function connectWebSocket(): Promise<void> {
+    // Prevent concurrent connection attempts
+    if (isWsConnecting) return
+    isWsConnecting = true
+
+    try {
+      if (import.meta.env.DEV) console.log('[Store] Connecting WebSocket...')
+      isReconnecting.value = true
+
+      // Don't create multiple subscriptions - check if already subscribed
+      if (!isWsSubscribed) {
+        // Subscribe to updates BEFORE connecting (so we catch initial data)
+        isWsSubscribed = true
+
+        // Listen for connection state changes
+        wsClient.onConnectionStateChange((state) => {
+          if (import.meta.env.DEV) console.log('[Store] WebSocket connection state changed:', state)
+          isConnected.value = state === 'connected'
+          isReconnecting.value = state === 'connecting'
+        })
+
+        wsClient.subscribe((update: { type?: string; data?: DataModel; rev?: number; patch?: import('@/types/api').PatchOperation[] }) => {
+        // Handle mock backend format: {type: 'initial', data: {...}}
+        if (update?.type === 'initial' && update?.data) {
+          if (import.meta.env.DEV) console.log('[Store] Received initial data from mock backend')
+          data.value = update.data
+          isConnected.value = true
+          isReconnecting.value = false
+        }
+        // Handle real backend format: {rev: 0, data: {...}}
+        else if (update?.data && update?.rev !== undefined) {
+          data.value = update.data
+          isConnected.value = true
+          isReconnecting.value = false
+        }
+        // Handle patch updates (both backends)
+        else if (data.value && update?.patch) {
+          try {
+            if (import.meta.env.DEV) console.log('[Store] Applying patch at revision', update.rev || 'unknown')
+          data.value = applyDataPatch(data.value, update.patch)
+            // Mark as connected once we receive any valid patch
+            if (!isConnected.value) {
+              isConnected.value = true
+              isReconnecting.value = false
+            }
+          } catch (err) {
+            if (import.meta.env.DEV) console.error('[Store] Failed to apply WebSocket patch:', err)
+          }
+        }
+        })
+      }
+
+      // Now connect (or reconnect if already connected)
+      // Only attempt to connect if not already connected
+      if (wsClient.isConnected()) {
+        if (import.meta.env.DEV) console.log('[Store] WebSocket already connected')
+        isConnected.value = true
+        isReconnecting.value = false
+        return
+      }
+
+      await wsClient.connect()
+      if (import.meta.env.DEV) console.log('[Store] WebSocket connected')
+
+      // Fetch fresh state after reconnect to avoid stale patch application
+      try {
+        const freshState = await rpcClient.call<{ data: DataModel }>({ method: 'server.get-state' })
+        if (freshState?.data) {
+          data.value = freshState.data
+        }
+      } catch {
+        // Non-fatal: WebSocket patches will still work
+        if (import.meta.env.DEV) console.warn('[Store] Failed to fetch fresh state after reconnect')
+      }
+
+      // Connection state will be updated via the callback
+      if (wsClient.isConnected()) {
+        isConnected.value = true
+        isReconnecting.value = false
+      }
+
+    } catch (err) {
+      if (import.meta.env.DEV) console.error('[Store] WebSocket connection failed:', err)
+      // Don't mark as disconnected immediately - let reconnection logic handle it
+      // The WebSocket client will retry automatically
+      isReconnecting.value = true
+      isConnected.value = false
+      // Don't throw - allow app to work without real-time updates
+      // The WebSocket will reconnect in the background
+    } finally {
+      isWsConnecting = false
+    }
+  }
+
+  async function initializeData(): Promise<void> {
+    // Initialize with empty data structure
+    // The WebSocket will populate it with real data
+    data.value = {
+      'server-info': {
+        id: '',
+        version: '',
+        name: null,
+        pubkey: '',
+        'status-info': {
+          restarting: false,
+          'shutting-down': false,
+          updated: false,
+          'backup-progress': null,
+          'update-progress': null,
+        },
+        'lan-address': null,
+        'tor-address': null,
+        unread: 0,
+        'wifi-ssids': [],
+        'zram-enabled': false,
+      },
+      'package-data': {},
+      ui: {
+        name: null,
+        'ack-welcome': '',
+        marketplace: {
+          'selected-hosts': [],
+          'known-hosts': {},
+        },
+        theme: 'dark',
+      },
+    }
+  }
+
+  /** Reset sync state on logout — called by auth store */
+  function resetOnLogout(): void {
+    data.value = null
+    isWsSubscribed = false
+    wsClient.disconnect()
+    isConnected.value = false
+    isReconnecting.value = false
+  }
+
+  return {
+    // State
+    data,
+    isConnected,
+    isReconnecting,
+
+    // Computed
+    serverInfo,
+    packages,
+    peerHealth,
+    uiData,
+
+    // Actions
+    connectWebSocket,
+    initializeData,
+    resetOnLogout,
+  }
+})

neode-ui/src/style.css

@@ -2169,3 +2169,58 @@ html:has(body.video-background-active)::before {
   }
 }
 
+/* =========================================================================
+   Mesh Bitcoin & Deadman Panels (child components of Mesh.vue)
+   ========================================================================= */
+.mesh-bitcoin-panel,
+.mesh-deadman-panel { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
+.mesh-panel-title { font-size: 1rem; font-weight: 700; color: rgba(255,255,255,0.95); margin: 0; }
+.mesh-panel-sub { font-size: 0.8rem; color: rgba(255,255,255,0.45); margin: -4px 0 0; }
+.mesh-bitcoin-section { display: flex; flex-direction: column; gap: 8px; }
+.mesh-bitcoin-section-header { display: flex; justify-content: space-between; align-items: center; }
+.mesh-bitcoin-label { font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.5px; }
+.mesh-bitcoin-height { font-size: 0.85rem; font-weight: 700; color: #fb923c; font-family: monospace; }
+.mesh-bitcoin-height.mesh-muted { color: rgba(255,255,255,0.3); font-weight: 400; }
+.mesh-bitcoin-hint { font-size: 0.8rem; color: rgba(255,255,255,0.45); margin: 0; }
+.mesh-bitcoin-input { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: rgba(255,255,255,0.9); padding: 10px 12px; font-size: 0.85rem; font-family: inherit; outline: none; box-sizing: border-box; }
+.mesh-bitcoin-input:focus { border-color: rgba(251,146,60,0.4); }
+.mesh-bitcoin-input::placeholder { color: rgba(255,255,255,0.25); }
+.mesh-bitcoin-input-sm { padding: 8px 12px; font-size: 0.8rem; }
+textarea.mesh-bitcoin-input { resize: vertical; min-height: 60px; }
+select.mesh-bitcoin-input { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(255,255,255,0.4)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
+select.mesh-bitcoin-input option { background: #1a1a2e; color: rgba(255,255,255,0.9); }
+.mesh-bitcoin-advanced { margin-top: 4px; }
+.mesh-bitcoin-advanced summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
+.mesh-bitcoin-advanced summary::before { content: '\25B6'; font-size: 0.6rem; color: rgba(255,255,255,0.4); transition: transform 0.2s; }
+.mesh-bitcoin-advanced[open] summary::before { transform: rotate(90deg); }
+.mesh-block-list { display: flex; flex-direction: column; gap: 4px; }
+.mesh-block-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(255,255,255,0.04); border-radius: 6px; }
+.mesh-block-height { font-size: 0.8rem; font-weight: 600; color: #a855f7; font-family: monospace; }
+.mesh-block-hash { font-size: 0.7rem; color: rgba(255,255,255,0.35); font-family: monospace; }
+.mesh-send-tabs { display: flex; gap: 2px; background: rgba(0,0,0,0.3); border-radius: 8px; padding: 2px; }
+.mesh-send-tab { flex: 1; padding: 6px 12px; border: none; background: transparent; color: rgba(255,255,255,0.5); font-size: 0.8rem; font-weight: 500; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
+.mesh-send-tab:hover { color: rgba(255,255,255,0.8); }
+.mesh-send-tab.active { color: #fff; background: rgba(255,255,255,0.1); }
+.mesh-relay-mode { display: flex; gap: 4px; flex-wrap: wrap; }
+.mesh-relay-mode-option { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 0.8rem; color: rgba(255,255,255,0.6); transition: all 0.15s; }
+.mesh-relay-mode-option.active { color: rgba(255,255,255,0.9); }
+.mesh-relay-mode-option small { color: rgba(255,255,255,0.35); font-size: 0.7rem; }
+.mesh-relay-mode-option input[type="radio"] { accent-color: #fb923c; }
+.mesh-relay-result { padding: 8px 12px; border-radius: 8px; font-size: 0.8rem; }
+.mesh-relay-result.success { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.2); color: #4ade80; }
+.mesh-relay-result.error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); color: #ef4444; }
+
+/* Deadman panel */
+.mesh-deadman-status { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgba(0,0,0,0.2); border-radius: 10px; }
+.mesh-deadman-indicator { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 4px 10px; border-radius: 6px; width: fit-content; }
+.mesh-deadman-indicator.armed { background: rgba(251,146,60,0.15); color: #fb923c; border: 1px solid rgba(251,146,60,0.3); }
+.mesh-deadman-indicator.disabled { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.08); }
+.mesh-deadman-indicator.triggered { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); animation: pulse-alert 1.5s infinite; }
+.mesh-deadman-timer { font-size: 1.8rem; font-weight: 700; color: #fb923c; font-family: monospace; }
+.mesh-deadman-message { font-size: 0.8rem; color: rgba(255,255,255,0.5); font-style: italic; }
+.mesh-deadman-checkin-btn { margin-top: 4px; }
+.mesh-deadman-config { display: flex; flex-direction: column; gap: 10px; }
+.mesh-deadman-field { display: flex; flex-direction: column; gap: 4px; }
+.mesh-deadman-info { display: flex; gap: 12px; flex-wrap: wrap; }
+.mesh-deadman-info-item { font-size: 0.75rem; color: rgba(255,255,255,0.4); }
+

neode-ui/src/views/AppDetails.vue

@@ -135,7 +135,7 @@ import { useAppStore } from '../stores/app'
 import { useAppLauncherStore } from '../stores/appLauncher'
 import { useModalKeyboard } from '@/composables/useModalKeyboard'
 import { dummyApps } from '../utils/dummyApps'
-import rpcClient from '@/api/rpc-client'
+import { rpcClient } from '@/api/rpc-client'
 import AppHeroSection from './appDetails/AppHeroSection.vue'
 import AppContentSection from './appDetails/AppContentSection.vue'
 import AppSidebar from './appDetails/AppSidebar.vue'
@@ -266,7 +266,7 @@ const backButtonText = computed(() => {
 const canLaunch = computed(() => {
   if (!pkg.value) return false
   if (isWebOnly.value) return true
-  const hasUI = pkg.value.manifest.interfaces?.main?.ui || pkg.value.installed?.['interface-addresses']?.main
+  const hasUI = !!(pkg.value.manifest.interfaces?.main?.ui || pkg.value.installed?.['interface-addresses']?.main)
   const isRunning = pkg.value.state === 'running'
   return hasUI && isRunning
 })

neode-ui/src/views/AppSession.vue

@@ -10,178 +10,39 @@
       :class="panelClasses"
       @click.stop
     >
-      <!-- Header bar -->
-      <div class="sticky top-0 z-10 flex items-center gap-3 border-b border-white/10 px-4 py-3 bg-black/60 backdrop-blur-md md:bg-transparent md:backdrop-blur-none">
-        <!-- Back / Forward navigation -->
-        <div class="flex items-center gap-0.5">
-          <button class="app-session-btn" aria-label="Back" title="Go back" @click="iframeGoBack">
-            <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="M15 19l-7-7 7-7" />
-            </svg>
-          </button>
-          <button class="app-session-btn" aria-label="Forward" title="Go forward" @click="iframeGoForward">
-            <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="M9 5l7 7-7 7" />
-            </svg>
-          </button>
-        </div>
+      <AppSessionHeader
+        :app-title="appTitle"
+        :is-refreshing="isRefreshing"
+        :display-mode="displayMode"
+        @go-back="iframeGoBack"
+        @go-forward="iframeGoForward"
+        @refresh="refresh"
+        @open-new-tab="openNewTab"
+        @close="closeSession"
+        @set-mode="setMode"
+      />
 
-        <span class="flex-1 truncate text-sm font-medium text-white/90">{{ appTitle }}</span>
-
-        <button class="app-session-btn" aria-label="Refresh" :disabled="isRefreshing" @click="refresh">
-          <svg class="w-5 h-5 transition-transform duration-300" :class="{ 'animate-spin': isRefreshing }" 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>
-
-        <!-- Display mode selector -->
-        <div class="relative" ref="modeMenuRef">
-          <button
-            class="app-session-btn"
-            aria-label="Display mode"
-            title="Display mode"
-            @click="showModeMenu = !showModeMenu"
-          >
-            <!-- Panel icon -->
-            <svg v-if="displayMode === 'panel'" 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 3v18m12-18H3a1 1 0 00-1 1v16a1 1 0 001 1h18a1 1 0 001-1V4a1 1 0 00-1-1z" />
-            </svg>
-            <!-- Overlay icon -->
-            <svg v-else-if="displayMode === 'overlay'" 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="M4 5a1 1 0 011-1h14a1 1 0 011 1v14a1 1 0 01-1 1H5a1 1 0 01-1-1V5z" />
-            </svg>
-            <!-- Fullscreen icon -->
-            <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="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
-            </svg>
-          </button>
-
-          <!-- Dropdown -->
-          <Transition name="menu-fade">
-            <div v-if="showModeMenu" class="absolute right-0 top-full mt-1 w-48 bg-black/90 border border-white/10 rounded-lg backdrop-blur-xl shadow-2xl overflow-hidden z-50">
-              <button
-                class="mode-option"
-                :class="{ 'mode-option-active': displayMode === 'panel' }"
-                @click="setMode('panel')"
-              >
-                <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v18m12-18H3a1 1 0 00-1 1v16a1 1 0 001 1h18a1 1 0 001-1V4a1 1 0 00-1-1z" />
-                </svg>
-                <span>Right panel</span>
-              </button>
-              <button
-                class="mode-option"
-                :class="{ 'mode-option-active': displayMode === 'overlay' }"
-                @click="setMode('overlay')"
-              >
-                <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v14a1 1 0 01-1 1H5a1 1 0 01-1-1V5z" />
-                </svg>
-                <span>Over whole app</span>
-              </button>
-              <button
-                class="mode-option"
-                :class="{ 'mode-option-active': displayMode === 'fullscreen' }"
-                @click="setMode('fullscreen')"
-              >
-                <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
-                </svg>
-                <span>Open fullscreen</span>
-              </button>
-            </div>
-          </Transition>
-        </div>
-
-        <button class="app-session-btn" aria-label="Open in new tab" title="Open in new tab" @click="openNewTab">
-          <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="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-btn" 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>
-
-        <kbd class="hidden sm:inline-flex px-2 py-1 text-xs text-white/50 bg-white/10 rounded">Esc</kbd>
-      </div>
-
-      <!-- App frame -->
-      <div class="relative flex-1 min-h-0 bg-black/40 overflow-hidden">
-        <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">
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-              <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" />
-            </svg>
-          </div>
-        </Transition>
-
-        <iframe
-          v-if="appUrl && !iframeBlocked"
-          ref="iframeRef"
-          :key="refreshKey"
-          :src="appUrl"
-          class="absolute inset-0 w-full h-full border-0 iframe-scrollbar-hide"
-          title="App content"
-          @load="onLoad"
-          @error="onError"
-        />
-
-        <!-- Iframe blocked fallback -->
-        <Transition name="content-fade">
-          <div v-if="iframeBlocked" class="absolute inset-0 z-10 flex flex-col items-center justify-center">
-            <div class="text-center px-8">
-              <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center">
-                <svg class="w-8 h-8 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                </svg>
-              </div>
-              <h3 class="text-lg font-semibold text-white mb-2">{{ 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-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>
-              </p>
-              <div class="flex items-center gap-3">
-                <button
-                  v-if="!mustOpenNewTab"
-                  @click="refresh"
-                  class="glass-button px-6 py-3 rounded-lg text-sm font-semibold inline-flex items-center gap-2"
-                >
-                  <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>
-                  Retry now
-                </button>
-                <button
-                  @click="openNewTabAndBack"
-                  class="glass-button px-6 py-3 rounded-lg text-sm font-semibold inline-flex items-center gap-2"
-                >
-                  <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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                  </svg>
-                  Open in new tab
-                </button>
-              </div>
-            </div>
-          </div>
-        </Transition>
-
-        <div v-if="!appUrl" 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>
-          </div>
-        </div>
-      </div>
+      <AppSessionFrame
+        ref="frameRef"
+        :app-url="appUrl"
+        :app-id="appId"
+        :app-title="appTitle"
+        :loading="loading"
+        :iframe-blocked="iframeBlocked"
+        :must-open-new-tab="mustOpenNewTab"
+        :auto-retry-count="autoRetryCount"
+        :refresh-key="refreshKey"
+        @iframe-load="onLoad"
+        @iframe-error="onError"
+        @refresh="refresh"
+        @open-new-tab-and-back="openNewTabAndBack"
+      />
     </div>
 
     <NostrIdentityPicker
       :show="showIdentityPicker"
       :app-name="appTitle"
-      @select="onIdentitySelected"
+      @select="identity.onIdentitySelected"
       @cancel="showIdentityPicker = false"
     />
   </div>
@@ -192,13 +53,16 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { rpcClient } from '@/api/rpc-client'
 import { useAppLauncherStore } from '@/stores/appLauncher'
 import NostrIdentityPicker from '@/components/NostrIdentityPicker.vue'
-
-type DisplayMode = 'panel' | 'overlay' | 'fullscreen'
-
-const DISPLAY_MODE_KEY = 'archipelago_app_display_mode'
+import AppSessionHeader from './appSession/AppSessionHeader.vue'
+import AppSessionFrame from './appSession/AppSessionFrame.vue'
+import {
+  type DisplayMode, DISPLAY_MODE_KEY, NEW_TAB_APPS, IFRAME_BLOCKED_APPS,
+  resolveAppUrl, resolveAppTitle,
+} from './appSession/appSessionConfig'
+import { useAppIdentity } from './appSession/useAppIdentity'
+import { useNostrBridge } from './appSession/useNostrBridge'
 
 const props = defineProps<{
   appIdProp?: string
@@ -215,37 +79,55 @@ const route = useRoute()
 const router = useRouter()
 
 const sessionRef = ref<HTMLElement | null>(null)
-const iframeRef = ref<HTMLIFrameElement | null>(null)
-const modeMenuRef = ref<HTMLElement | null>(null)
+const frameRef = ref<InstanceType<typeof AppSessionFrame> | null>(null)
 const loading = ref(true)
 const isRefreshing = ref(false)
 const iframeBlocked = ref(false)
 const refreshKey = ref(0)
 const showIdentityPicker = ref(false)
-const showModeMenu = ref(false)
 const autoRetryCount = ref(0)
 let loadTimeoutId: ReturnType<typeof setTimeout> | null = null
 let autoRetryId: ReturnType<typeof setTimeout> | null = null
 let iframeCheckId: ReturnType<typeof setTimeout> | null = null
 
-/** Sites known to block iframes — skip the timeout and go straight to fallback */
-const IFRAME_BLOCKED_APPS = new Set<string>([])
-
-// Display mode — persisted in localStorage
+// Display mode -- persisted in localStorage
 const displayMode = ref<DisplayMode>(
   (localStorage.getItem(DISPLAY_MODE_KEY) as DisplayMode) || 'panel'
 )
 
+const appId = computed(() => {
+  const id = props.appIdProp || (route.params.appId as string)
+  if (typeof id !== 'string' || !/^[a-z0-9][a-z0-9._-]*$/.test(id) || id.length > 64) {
+    router.replace('/apps')
+    return ''
+  }
+  return id
+})
+
+const appTitle = computed(() => resolveAppTitle(appId.value))
+const mustOpenNewTab = computed(() => NEW_TAB_APPS.has(appId.value))
+
+const appUrl = computed(() => {
+  return resolveAppUrl(appId.value, route.query.path as string | undefined)
+})
+
+// --- Identity & Nostr bridge ---
+
+const iframeRef = computed(() => frameRef.value?.iframeRef ?? null)
+
+const identity = useAppIdentity(appId, iframeRef, showIdentityPicker)
+const nostrBridge = useNostrBridge(identity.getStoredIdentity, () => appUrl.value)
+
+// --- Display mode ---
+
 function setMode(mode: DisplayMode) {
-  // Exit fullscreen first if switching away
   if (displayMode.value === 'fullscreen' && document.fullscreenElement) {
     document.exitFullscreen().catch(() => {})
   }
   displayMode.value = mode
   localStorage.setItem(DISPLAY_MODE_KEY, mode)
-  showModeMenu.value = false
 
-  // Switch from inline panel → route-based overlay/fullscreen
+  // Switch from inline panel to route-based overlay/fullscreen
   if (isInlinePanel.value && mode !== 'panel') {
     const id = appId.value
     emit('close')
@@ -253,7 +135,7 @@ function setMode(mode: DisplayMode) {
     return
   }
 
-  // Switch from route-based → inline panel
+  // Switch from route-based to inline panel
   if (!isInlinePanel.value && mode === 'panel') {
     const id = appId.value
     const launcher = useAppLauncherStore()
@@ -263,7 +145,6 @@ function setMode(mode: DisplayMode) {
     return
   }
 
-  // Enter fullscreen if selected
   if (mode === 'fullscreen' && sessionRef.value && !document.fullscreenElement) {
     sessionRef.value.requestFullscreen().catch(() => {})
   }
@@ -282,221 +163,7 @@ const panelClasses = computed(() => {
   return `${base} app-session-overlay`
 })
 
-const appId = computed(() => {
-  const id = props.appIdProp || (route.params.appId as string)
-  if (typeof id !== 'string' || !/^[a-z0-9][a-z0-9._-]*$/.test(id) || id.length > 64) {
-    router.replace('/apps')
-    return ''
-  }
-  return id
-})
-
-/** Container apps: direct port access (avoids root-relative asset breakage under /app/xxx/ proxy) */
-const APP_PORTS: Record<string, number> = {
-  'bitcoin-knots': 8334,
-  'bitcoin-ui':    8334,
-  'electrumx':     50002,
-  'electrs':       50002,
-  'archy-electrs-ui': 50002,
-  'mempool-electrs': 50002,
-  'btcpay-server': 23000,
-  'lnd':           8081,
-  'archy-lnd-ui':  8081,
-  'mempool':       4080,
-  'mempool-web':   4080,
-  'archy-mempool-web': 4080,
-  'homeassistant': 8123,
-  'grafana':       3000,
-  'searxng':       8888,
-  'ollama':        11434,
-  'onlyoffice':    8044,
-  'penpot':        9001,
-  'nextcloud':     8085,
-  'vaultwarden':   8082,
-  'jellyfin':      8096,
-  'photoprism':    2342,
-  'immich':        2283,
-  'immich_server': 2283,
-  'filebrowser':   8083,
-  'nginx-proxy-manager': 8181,
-  'portainer':     9000,
-  'uptime-kuma':   3001,
-  'fedimint':      8175,
-  'fedimintd':     8175,
-  'fedimint-gateway': 8176,
-  'nostr-rs-relay': 18081,
-  'indeedhub':     7777,
-  'dwn':           3100,
-  'endurain':      8080,
-}
-
-/** Apps that need nginx proxy for iframe embedding.
- *  IndeedHub loads via direct port 7777 — deploy script removes X-Frame-Options
- *  from the container's internal nginx so iframe works on all servers. */
-const PROXY_APPS: Record<string, string> = {}
-
-/** Nginx proxy paths — used on HTTPS to avoid mixed content (HTTPS parent + HTTP port iframe).
- *  On HTTP, direct port access is used instead (faster, no proxy). */
-const HTTPS_PROXY_PATHS: Record<string, string> = {
-  'bitcoin-knots': '/app/bitcoin-ui/',
-  'bitcoin-ui': '/app/bitcoin-ui/',
-  'lnd': '/app/lnd/',
-  'electrumx': '/app/electrs/',
-  'electrs': '/app/electrs/',
-  'mempool-electrs': '/app/electrs/',
-  'mempool': '/app/mempool/',
-  'mempool-web': '/app/mempool/',
-  'archy-mempool-web': '/app/mempool/',
-  'fedimint': '/app/fedimint/',
-  'fedimintd': '/app/fedimint/',
-  'fedimint-gateway': '/app/fedimint-gateway/',
-  'jellyfin': '/app/jellyfin/',
-  'searxng': '/app/searxng/',
-  'filebrowser': '/app/filebrowser/',
-  'ollama': '/app/ollama/',
-  'onlyoffice': '/app/onlyoffice/',
-  'immich': '/app/immich/',
-  'immich_server': '/app/immich/',
-  'portainer': '/app/portainer/',
-  'nginx-proxy-manager': '/app/nginx-proxy-manager/',
-  'uptime-kuma': '/app/uptime-kuma/',
-  'homeassistant': '/app/homeassistant/',
-  'vaultwarden': '/app/vaultwarden/',
-  'photoprism': '/app/photoprism/',
-  'endurain': '/app/endurain/',
-  'dwn': '/app/dwn/',
-}
-
-/** External HTTPS apps — always loaded directly */
-const EXTERNAL_URLS: Record<string, string> = {
-  'botfights': 'https://botfights.net',
-  'nwnn': 'https://nwnn.l484.com',
-  '484-kitchen': 'https://484.kitchen',
-  'call-the-operator': 'https://cta.tx1138.com',
-  // 'arch-presentation': hidden until X-Frame-Options fixed on present.l484.com
-  'syntropy-institute': 'https://syntropy.institute',
-  't-zero': 'https://teeminuszero.net',
-  'nostrudel': 'https://nostrudel.ninja',
-  'tailscale': 'https://login.tailscale.com/admin/machines',
-}
-
-const APP_TITLES: Record<string, string> = {
-  'bitcoin-knots': 'Bitcoin', 'btcpay-server': 'BTCPay Server', 'indeedhub': 'Indeehub',
-  'botfights': 'BotFights', '484-kitchen': '484 Kitchen', 'arch-presentation': 'Presentation',
-  'homeassistant': 'Home Assistant', 'uptime-kuma': 'Uptime Kuma',
-  'nginx-proxy-manager': 'Nginx Proxy Manager', 'nostr-rs-relay': 'Nostr Relay',
-  'call-the-operator': 'Call The Operator', 'syntropy-institute': 'Syntropy Institute',
-  't-zero': 'T-Zero', 'nostrudel': 'noStrudel',
-}
-
-const appTitle = computed(() => APP_TITLES[appId.value] || appId.value.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase()))
-
-/** Apps that set X-Frame-Options and MUST open in a new tab (can't iframe) */
-const NEW_TAB_APPS = new Set([
-  'btcpay-server',      // X-Frame-Options: DENY
-  'grafana',            // X-Frame-Options: deny
-  'photoprism',         // X-Frame-Options: DENY
-  'homeassistant',      // X-Frame-Options: SAMEORIGIN
-  'vaultwarden',        // X-Frame-Options: SAMEORIGIN
-  'nextcloud',          // X-Frame-Options: SAMEORIGIN
-  'uptime-kuma',        // X-Frame-Options: SAMEORIGIN
-  'penpot',             // Blocks iframe
-  'portainer',          // X-Frame-Options: deny
-  'onlyoffice',         // X-Frame-Options: SAMEORIGIN
-  'nginx-proxy-manager', // X-Frame-Options blocks
-  'tailscale',          // No local web UI — opens Tailscale admin
-])
-
-const mustOpenNewTab = computed(() => NEW_TAB_APPS.has(appId.value))
-
-const appUrl = computed(() => {
-  const id = appId.value
-
-  // External HTTPS apps — iframe overlay
-  const ext = EXTERNAL_URLS[id]
-  if (ext) return ext
-
-  // Apps that need nginx proxy (nostr-provider.js injection for NIP-07)
-  const proxyPath = PROXY_APPS[id]
-  if (proxyPath) return `${window.location.origin}${proxyPath}`
-
-  // IndeedHub: always direct port (X-Frame-Options removed by deploy script)
-  if (id === 'indeedhub') {
-    const port = APP_PORTS[id]
-    if (port) {
-      let base = `${window.location.protocol}//${window.location.hostname}:${port}`
-      const subpath = route.query.path as string | undefined
-      if (subpath) base += subpath
-      return base
-    }
-  }
-
-  // HTTPS: use nginx proxy to avoid mixed content (browser blocks HTTP iframes in HTTPS pages)
-  if (window.location.protocol === 'https:') {
-    const httpsProxy = HTTPS_PROXY_PATHS[id]
-    if (httpsProxy) return `${window.location.origin}${httpsProxy}`
-  }
-
-  // HTTP: direct port access (faster, no proxy overhead)
-  const port = APP_PORTS[id]
-  if (!port) return ''
-  let base = `http://${window.location.hostname}:${port}`
-
-  // Append sub-path from query param (e.g. ?path=/tx/abc123)
-  const subpath = route.query.path as string | undefined
-  if (subpath) base += subpath
-
-  return base
-})
-
-// --- Identity ---
-
-function isIdentityAwareApp(id: string): boolean {
-  return id === 'indeedhub' || id === 'nostrudel'
-}
-
-const IDENTITY_KEY = 'archipelago_app_identity_'
-
-interface SelectedIdentity {
-  id: string; name: string; did: string; pubkey: string
-  nostr_pubkey?: string; nostr_npub?: string
-}
-
-function getStoredIdentity(): SelectedIdentity | null {
-  try {
-    const stored = localStorage.getItem(IDENTITY_KEY + appId.value)
-    return stored ? JSON.parse(stored) as SelectedIdentity : null
-  } catch { return null }
-}
-
-function storeIdentity(identity: SelectedIdentity) {
-  try { localStorage.setItem(IDENTITY_KEY + appId.value, JSON.stringify(identity)) } catch {}
-}
-
-function onIdentitySelected(identity: SelectedIdentity) {
-  showIdentityPicker.value = false
-  storeIdentity(identity)
-  sendIdentity(identity)
-  // NIP-98 auto-login disabled — apps like IndeedHub have their own login flow
-  // that properly sets up internal account state. We provide window.nostr via
-  // nostr-provider.js so the app's built-in "Sign In" button works.
-}
-
-async function sendIdentity(identity: SelectedIdentity) {
-  try {
-    const challenge = `archipelago-identity:${Date.now()}`
-    const sigRes = await rpcClient.call<{ signature: string }>({ method: 'identity.sign', params: { id: identity.id, message: challenge } })
-    iframeRef.value?.contentWindow?.postMessage({
-      type: 'archipelago:identity', did: identity.did, name: identity.name,
-      pubkey: identity.pubkey, nostr_pubkey: identity.nostr_pubkey || null,
-      nostr_npub: identity.nostr_npub || null, challenge, signature: sigRes.signature
-    }, '*')
-  } catch {}
-}
-
-// NIP-98 auto-login removed — apps handle their own login via window.nostr (NIP-07)
-
-// --- Lifecycle ---
+// --- Lifecycle handlers ---
 
 function onLoad() {
   if (loadTimeoutId) { clearTimeout(loadTimeoutId); loadTimeoutId = null }
@@ -507,7 +174,8 @@ function onLoad() {
   // Check if iframe actually loaded content (same-origin only)
   iframeCheckId = setTimeout(() => {
     try {
-      const doc = iframeRef.value?.contentDocument
+      const iframe = frameRef.value?.iframeRef
+      const doc = iframe?.contentDocument
       if (doc) {
         const body = doc.body
         if (!body || (body.children.length === 0 && body.innerText.trim() === '')) {
@@ -515,14 +183,10 @@ function onLoad() {
         }
       }
     } catch {
-      // Cross-origin — can't check, assume OK
+      // Cross-origin -- can't check, assume OK
     }
   }, 1000)
-  if (isIdentityAwareApp(appId.value)) {
-    const stored = getStoredIdentity()
-    if (stored) sendIdentity(stored)
-    else showIdentityPicker.value = true
-  }
+  identity.onIframeLoadIdentity()
 }
 
 function onError() {
@@ -568,11 +232,11 @@ function openNewTab() {
 }
 
 function iframeGoBack() {
-  try { iframeRef.value?.contentWindow?.history.back() } catch {}
+  try { frameRef.value?.iframeRef?.contentWindow?.history.back() } catch {}
 }
 
 function iframeGoForward() {
-  try { iframeRef.value?.contentWindow?.history.forward() } catch {}
+  try { frameRef.value?.iframeRef?.contentWindow?.history.forward() } catch {}
 }
 
 function handleBackdropClick() {
@@ -593,21 +257,18 @@ function onKeyDown(e: KeyboardEvent) {
   }
 }
 
-// Close dropdown on outside click
-function onClickOutside(e: MouseEvent) {
-  if (showModeMenu.value && modeMenuRef.value && !modeMenuRef.value.contains(e.target as Node)) {
-    showModeMenu.value = false
-  }
-}
-
 function onFullscreenChange() {
   if (!document.fullscreenElement && displayMode.value === 'fullscreen') {
-    // User exited fullscreen via browser UI — switch to overlay
     displayMode.value = 'overlay'
     localStorage.setItem(DISPLAY_MODE_KEY, 'overlay')
   }
 }
 
+function onMessage(e: MessageEvent) {
+  if (e.data?.type === 'nostr-request') nostrBridge.handleNostrRequest(e)
+  if (e.data?.type === 'archipelago:identity:request') identity.handleIdentityRequest()
+}
+
 // Enter fullscreen on mount if mode is fullscreen
 watch(displayMode, (mode) => {
   if (mode === 'fullscreen' && sessionRef.value && !document.fullscreenElement) {
@@ -615,64 +276,8 @@ watch(displayMode, (mode) => {
   }
 })
 
-// --- NIP-07 ---
-
-function onMessage(e: MessageEvent) {
-  if (e.data?.type === 'nostr-request') handleNostrRequest(e)
-  if (e.data?.type === 'archipelago:identity:request') {
-    const stored = getStoredIdentity()
-    if (stored) sendIdentity(stored)
-    else showIdentityPicker.value = true
-  }
-}
-
-async function handleNostrRequest(event: MessageEvent) {
-  const { id, method, params } = event.data
-  const source = event.source as Window | null
-  if (!source) return
-  const storedIdentity = getStoredIdentity()
-  const identityId = storedIdentity?.id || null
-  if (import.meta.env.DEV) console.log(`[NIP-07] ${method} identityId=${identityId} storedPubkey=${storedIdentity?.nostr_pubkey?.slice(0, 12) || 'none'}`)
-
-  try {
-    let result: unknown
-    if (method === 'getPublicKey') {
-      // Use stored nostr_pubkey directly if available (avoids RPC call that may 401)
-      if (storedIdentity?.nostr_pubkey) {
-        result = storedIdentity.nostr_pubkey
-        if (import.meta.env.DEV) console.log('[NIP-07] getPublicKey from stored identity:', (result as string).slice(0, 12))
-      } else if (identityId) {
-        const res = await rpcClient.call<{ nostr_pubkey: string }>({ method: 'identity.get', params: { id: identityId } })
-        result = res.nostr_pubkey
-      } else {
-        const res = await rpcClient.call<{ nostr_pubkey: string }>({ method: 'node.nostr-pubkey' })
-        result = res.nostr_pubkey
-      }
-    } else if (method === 'signEvent') {
-      if (import.meta.env.DEV) console.log(`[NIP-07] signEvent kind=${params.event?.kind} using identity=${identityId || 'node-default'}`)
-      if (identityId) {
-        result = await rpcClient.call<unknown>({ method: 'identity.nostr-sign', params: { id: identityId, event: params.event } })
-      } else {
-        result = await rpcClient.call<unknown>({ method: 'node.nostr-sign', params: { event: params.event } })
-      }
-      if (import.meta.env.DEV) console.log('[NIP-07] signEvent OK')
-    } else if (method === 'getRelays') { result = {} }
-    else if (method === 'nip04.encrypt') { result = (await rpcClient.call<{ ciphertext: string }>({ method: 'identity.nostr-encrypt-nip04', params: { id: identityId || undefined, pubkey: params.pubkey, plaintext: params.plaintext } })).ciphertext }
-    else if (method === 'nip04.decrypt') { result = (await rpcClient.call<{ plaintext: string }>({ method: 'identity.nostr-decrypt-nip04', params: { id: identityId || undefined, pubkey: params.pubkey, ciphertext: params.ciphertext } })).plaintext }
-    else if (method === 'nip44.encrypt') { result = (await rpcClient.call<{ ciphertext: string }>({ method: 'identity.nostr-encrypt-nip44', params: { id: identityId || undefined, pubkey: params.pubkey, plaintext: params.plaintext } })).ciphertext }
-    else if (method === 'nip44.decrypt') { result = (await rpcClient.call<{ plaintext: string }>({ method: 'identity.nostr-decrypt-nip44', params: { id: identityId || undefined, pubkey: params.pubkey, ciphertext: params.ciphertext } })).plaintext }
-    else { throw new Error(`Unsupported NIP-07 method: ${method}`) }
-    const targetOrigin = appUrl.value ? new URL(appUrl.value).origin : '*'
-    source.postMessage({ type: 'nostr-response', id, result }, targetOrigin)
-  } catch (err) {
-    if (import.meta.env.DEV) console.error(`[NIP-07] ${method} FAILED:`, err instanceof Error ? err.message : err)
-    const targetOrigin = appUrl.value ? new URL(appUrl.value).origin : '*'
-    source.postMessage({ type: 'nostr-response', id, error: err instanceof Error ? err.message : 'Unknown error' }, targetOrigin)
-  }
-}
-
 onMounted(() => {
-  // Apps that block iframes (X-Frame-Options) — open in new tab, close session
+  // Apps that block iframes (X-Frame-Options) -- open in new tab, close session
   if (mustOpenNewTab.value && appUrl.value) {
     window.open(appUrl.value, '_blank', 'noopener,noreferrer')
     if (isInlinePanel.value) emit('close')
@@ -682,7 +287,6 @@ onMounted(() => {
 
   window.addEventListener('keydown', onKeyDown, true)
   window.addEventListener('message', onMessage)
-  document.addEventListener('click', onClickOutside)
   document.addEventListener('fullscreenchange', onFullscreenChange)
   if (IFRAME_BLOCKED_APPS.has(appId.value)) {
     loading.value = false
@@ -703,18 +307,18 @@ onBeforeUnmount(() => {
   if (iframeCheckId) clearTimeout(iframeCheckId)
   window.removeEventListener('keydown', onKeyDown, true)
   window.removeEventListener('message', onMessage)
-  document.removeEventListener('click', onClickOutside)
   document.removeEventListener('fullscreenchange', onFullscreenChange)
   if (document.fullscreenElement) document.exitFullscreen().catch(() => {})
 })
 </script>
 
-<style scoped>
+<style>
+/* Unscoped so children can use these classes */
 .app-session-root {
   width: 100%;
   height: 100%;
 }
-/* Inline panel mode — fills content area, no blur, original layout */
+/* Inline panel mode -- fills content area, no blur, original layout */
 .app-session-backdrop-inline {
   position: absolute;
   inset: 0;
@@ -746,7 +350,7 @@ onBeforeUnmount(() => {
   }
 }
 
-/* Overlay mode — covers entire viewport including sidebar */
+/* Overlay mode -- covers entire viewport including sidebar */
 .app-session-backdrop-overlay {
   position: fixed;
   inset: 0;

neode-ui/src/views/Apps.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pb-6">
-    <!-- Nav header — tabs + categories + search -->
+    <!-- Nav header -- tabs + categories + search -->
     <div class="mb-4">
       <!-- Desktop: page tabs + category tabs + search -->
       <div class="hidden md:flex items-center gap-4">
@@ -91,217 +91,40 @@
       <p class="text-white/70">{{ t('apps.noResults', { query: searchQuery }) }}</p>
     </div>
 
-    <!-- Apps Grid (alphabetically by title, stable across run state) -->
+    <!-- Apps Grid -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pb-6">
-      <div
+      <AppCard
         v-for="([id, pkg], index) in filteredPackageEntries"
         :key="id"
-        data-controller-container
-        :data-controller-launch="canLaunch(pkg) ? '' : undefined"
-        tabindex="0"
-        role="link"
-        class="glass-card p-6 transition-all hover:-translate-y-1 cursor-pointer relative min-w-0 overflow-hidden"
-        :class="{ 'card-stagger': showStagger }"
-        :style="{ '--stagger-index': index }"
-        @click="goToApp(id as string)"
-        @keydown.enter="goToApp(id as string)"
-      >
-        <!-- Uninstalling overlay -->
-        <div
-          v-if="uninstallingApps.has(id as string)"
-          class="absolute inset-0 z-20 flex items-center justify-center bg-black/70 backdrop-blur-sm rounded-xl"
-        >
-          <div class="flex items-center gap-3 text-white/90">
-            <svg class="animate-spin h-5 w-5" 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 class="text-sm font-medium">{{ t('common.uninstalling') }}...</span>
-          </div>
-        </div>
-
-        <!-- Uninstall Icon (not for web-only apps) -->
-        <button
-          v-if="!isWebOnlyApp(id as string) && !uninstallingApps.has(id as string)"
-          @click.stop="showUninstallModal(id as string, pkg)"
-          class="absolute top-4 right-4 p-2 rounded-lg text-white/60 hover:text-red-400 hover:bg-red-500/20 transition-colors z-10"
-          :aria-label="`${t('common.uninstall')} ${pkg.manifest?.title || id}`"
-          :title="t('common.uninstall')"
-        >
-          <svg class="w-5 h-5" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-          </svg>
-        </button>
-
-        <div class="flex items-start gap-4">
-          <img
-            :src="pkg['static-files']?.icon || `/assets/img/app-icons/${id}.png`"
-            :alt="pkg.manifest?.title || String(id)"
-            class="w-16 h-16 rounded-lg object-cover bg-white/10"
-            @error="handleImageError"
-          />
-          <div class="flex-1 min-w-0 overflow-hidden">
-            <h3 class="text-lg font-semibold text-white mb-1 truncate" :title="pkg.manifest.title">
-              {{ pkg.manifest.title }}
-            </h3>
-            <p class="text-sm text-white/70 mb-2 truncate">
-              {{ pkg.manifest?.description?.short || '' }}
-            </p>
-            <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)"
-              >
-                <svg
-                  v-if="pkg.state === 'starting' || pkg.state === 'installing' || pkg.state === 'stopping' || pkg.state === 'restarting' || (pkg.state === 'running' && pkg.health === 'starting')"
-                  class="animate-spin h-3 w-3"
-                  xmlns="http://www.w3.org/2000/svg"
-                  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 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) }}
-              </span>
-              <span class="text-xs text-white/50">
-                v{{ pkg.manifest.version }}
-              </span>
-            </div>
-          </div>
-        </div>
-
-        <!-- Quick Actions — hide during uninstall, freeze during loading actions to prevent flicker -->
-        <div v-if="!uninstallingApps.has(id as string)" class="mt-4 flex gap-2">
-          <button
-            v-if="canLaunch(pkg)"
-            data-controller-launch-btn
-            @click.stop="launchApp(id as string)"
-            class="flex-1 px-4 py-2 glass-button glass-button-sm rounded-lg text-sm font-medium flex items-center justify-center gap-1.5"
-          >
-            {{ t('common.launch') }}
-            <svg v-if="opensInTab(id as string)" 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>
-          <button
-            v-if="!isWebOnlyApp(id as string) && !loadingActions[id as string] && (pkg.state === 'stopped' || pkg.state === 'exited')"
-            @click.stop="startApp(id as string)"
-            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"
-          >
-            <span>{{ pkg.state === 'exited' ? 'Restart' : t('common.start') }}</span>
-          </button>
-          <button
-            v-if="!isWebOnlyApp(id as string) && loadingActions[id as string] && (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"
-          >
-            <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">
-              <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>
-          <button
-            v-if="!isWebOnlyApp(id as string) && !loadingActions[id as string] && (pkg.state === 'running' || pkg.state === 'starting')"
-            @click.stop="stopApp(id as string)"
-            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"
-          >
-            <span>{{ t('common.stop') }}</span>
-          </button>
-          <button
-            v-if="!isWebOnlyApp(id as string) && !loadingActions[id as string] && (pkg.state === 'running' || pkg.state === 'starting')"
-            @click.stop="restartApp(id as string)"
-            class="px-2.5 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>
-          <button
-            v-if="!isWebOnlyApp(id as string) && loadingActions[id as string] && (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"
-          >
-            <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">
-              <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>
+        :id="id as string"
+        :pkg="pkg"
+        :index="index"
+        :show-stagger="showStagger"
+        :is-loading="!!actions.loadingActions.value[id as string]"
+        :is-uninstalling="actions.uninstallingApps.value.has(id as string)"
+        @go-to-app="goToApp"
+        @launch="launchApp"
+        @start="actions.startApp"
+        @stop="actions.stopApp"
+        @restart="actions.restartApp"
+        @show-uninstall="showUninstallModal"
+      />
     </div>
 
-    <!-- Uninstall Confirmation Modal — Teleport to body to escape sidebar stacking context -->
-    <Teleport to="body">
-      <Transition name="modal">
-        <div
-          v-if="uninstallModal.show"
-          class="fixed inset-0 z-[3000] flex items-center justify-center p-4"
-          @click="closeUninstallModal()"
-        >
-          <div class="absolute inset-0 bg-black/60 backdrop-blur-md"></div>
-          <div
-            ref="uninstallModalRef"
-            @click.stop
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby="uninstall-dialog-title"
-            class="glass-card p-6 max-w-2xl w-full relative z-10"
-          >
-            <div class="flex items-start gap-4 mb-4">
-              <div class="p-3 bg-red-500/20 rounded-lg">
-                <svg class="w-6 h-6 text-red-400" aria-hidden="true" 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-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                </svg>
-              </div>
-              <div class="flex-1">
-                <h3 id="uninstall-dialog-title" class="text-xl font-semibold text-white mb-2">{{ t('apps.uninstallTitle') }}</h3>
-                <p class="text-white/70">
-                  {{ t('apps.uninstallConfirm', { name: uninstallModal.appTitle }) }}
-                </p>
-              </div>
-            </div>
-
-            <div class="flex gap-3 justify-end">
-              <button
-                @click="closeUninstallModal()"
-                class="px-4 py-2 glass-button rounded-lg text-sm font-medium"
-              >
-                {{ t('common.cancel') }}
-              </button>
-              <button
-                @click="confirmUninstall"
-                :disabled="uninstalling"
-                class="px-4 py-2 glass-button glass-button-danger rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-              >
-                <svg
-                  v-if="uninstalling"
-                  class="animate-spin h-4 w-4"
-                  aria-hidden="true"
-                  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>{{ uninstalling ? t('common.uninstalling') : t('common.uninstall') }}</span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </Transition>
-    </Teleport>
-
-
+    <AppsUninstallModal
+      :show="uninstallModal.show"
+      :app-title="uninstallModal.appTitle"
+      :uninstalling="actions.uninstalling.value"
+      @close="closeUninstallModal"
+      @confirm="onConfirmUninstall"
+    />
 
     <!-- Action error toast -->
     <Transition name="fade">
-      <div v-if="actionError" class="fixed bottom-20 left-1/2 -translate-x-1/2 z-50 max-w-md w-full px-4" role="alert" aria-live="assertive">
+      <div v-if="actions.actionError.value" class="fixed bottom-20 left-1/2 -translate-x-1/2 z-50 max-w-md w-full px-4" role="alert" aria-live="assertive">
         <div class="alert-error backdrop-blur-sm rounded-lg px-4 py-3 text-sm flex items-center justify-between gap-3">
-          <span>{{ actionError }}</span>
-          <button @click="actionError = ''" :aria-label="t('apps.dismissError')" class="text-red-300 hover:text-white shrink-0">&times;</button>
+          <span>{{ actions.actionError.value }}</span>
+          <button @click="actions.actionError.value = ''" :aria-label="t('apps.dismissError')" class="text-red-300 hover:text-white shrink-0">&times;</button>
         </div>
       </div>
     </Transition>
@@ -309,8 +132,7 @@
 </template>
 
 <script lang="ts">
-// Module-level — persists across component unmount/remount within same session
-// Prevents stagger animation replaying every time user navigates back to Apps
+// Module-level -- persists across component unmount/remount within same session
 let appsAnimationDone = false
 </script>
 
@@ -318,54 +140,32 @@ let appsAnimationDone = false
 import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import { useRouter, useRoute, RouterLink } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { useAppStore } from '../stores/app'
-import { useAppLauncherStore } from '../stores/appLauncher'
-import { PackageState, type PackageDataEntry } from '../types/api'
-import { useModalKeyboard } from '@/composables/useModalKeyboard'
+import { useAppStore } from '@/stores/app'
+import { useAppLauncherStore } from '@/stores/appLauncher'
+import type { PackageDataEntry } from '@/types/api'
+import AppCard from './apps/AppCard.vue'
+import AppsUninstallModal from './apps/AppsUninstallModal.vue'
+import { useAppsActions } from './apps/useAppsActions'
+import {
+  isServiceContainer, isWebOnlyApp, getAppCategory,
+  WEB_ONLY_APPS, buildAllCategories, useCategoriesWithApps,
+} from './apps/appsConfig'
 
 const { t } = useI18n()
-
 const router = useRouter()
 const route = useRoute()
 const store = useAppStore()
+const actions = useAppsActions()
 
-// Only stagger-animate on first mount — skip on revisits
+// Only stagger-animate on first mount
 const showStagger = !appsAnimationDone
 
-// Tabs — support ?tab=services from Marketplace link
+// Tabs
 const activeTab = ref<'apps' | 'services'>(
   route.query.tab === 'services' ? 'services' : 'apps'
 )
 
-
-// Service container name patterns (backend/infra, not user-facing)
-const SERVICE_NAMES = new Set([
-  // Database & backend infrastructure
-  'dwn', 'archy-mempool-db', 'archy-btcpay-db', 'archy-nbxplorer', 'archy-tor',
-  'immich_postgres', 'immich_redis',
-  'penpot-postgres', 'penpot-valkey', 'penpot-backend', 'penpot-exporter',
-  'mysql-mempool', 'mempool-api', 'archy-mempool-web',
-  // UI containers (served via /app/ proxy, not standalone apps)
-  'archy-bitcoin-ui', 'archy-lnd-ui', 'archy-electrs-ui',
-  // IndeedHub infrastructure
-  'indeedhub-postgres', 'indeedhub-redis', 'indeedhub-minio',
-  'indeedhub-relay', 'indeedhub-build_api_1', 'indeedhub-build_ffmpeg-worker_1',
-  'indeedhub-build_postgres_1', 'indeedhub-build_redis_1', 'indeedhub-build_minio_1',
-  'indeedhub-build_minio-init_1', 'indeedhub-build_relay_1',
-])
-
-function isServiceContainer(id: string): boolean {
-  if (SERVICE_NAMES.has(id)) return true
-  // Catch any indeedhub-build_* compose infrastructure containers
-  if (id.startsWith('indeedhub-build_')) return true
-  // Catch archy-* UI/infrastructure containers
-  if (id.startsWith('archy-')) return true
-  // Catch database containers
-  if (id.endsWith('_db') || id.endsWith('-db')) return true
-  return false
-}
-
-// Search (debounced to avoid filtering on every keystroke)
+// Search (debounced)
 const searchQuery = ref('')
 const debouncedSearchQuery = ref('')
 let searchDebounceTimer: ReturnType<typeof setTimeout> | undefined
@@ -375,56 +175,20 @@ watch(searchQuery, (val) => {
 })
 onBeforeUnmount(() => { clearTimeout(searchDebounceTimer) })
 
-// Category filter (same categories as App Store)
+// Category filter
 const selectedCategory = ref('all')
 
-// Known app → category mappings (matches App Store categorisation)
-const APP_CATEGORY_MAP: Record<string, string> = {
-  'bitcoin-knots': 'money', 'bitcoin-ui': 'money', 'electrumx': 'money', 'electrs': 'money',
-  'lnd': 'money', 'mempool': 'money', 'mempool-web': 'money', 'btcpay-server': 'commerce',
-  'fedimint': 'money', 'fedimint-gateway': 'money',
-  'indeedhub': 'media', 'jellyfin': 'media', 'photoprism': 'media', 'immich': 'media',
-  'nextcloud': 'data', 'vaultwarden': 'data', 'filebrowser': 'data', 'onlyoffice': 'data',
-  'homeassistant': 'home', 'lorabell': 'home', 'endurain': 'home',
-  'searxng': 'community', 'ollama': 'community', 'grafana': 'data',
-  'nostr-rs-relay': 'nostr', 'nostrudel': 'nostr',
-  'tailscale': 'networking', 'nginx-proxy-manager': 'networking', 'portainer': 'networking',
-  'uptime-kuma': 'networking', 'dwn': 'data',
-  'botfights': 'l484', 'nwnn': 'l484', '484-kitchen': 'l484',
-  'call-the-operator': 'l484', 'syntropy-institute': 'l484', 't-zero': 'l484',
-}
+const ALL_CATEGORIES = computed(() => buildAllCategories(t))
 
-function getAppCategory(id: string, pkg: PackageDataEntry): string {
-  // Check hardcoded map first, then manifest category, then fallback
-  if (APP_CATEGORY_MAP[id]) return APP_CATEGORY_MAP[id]
-  const cat = (pkg.manifest as unknown as Record<string, unknown>)?.category as string | undefined
-  return cat || 'other'
-}
-
-const ALL_CATEGORIES = computed(() => [
-  { id: 'all', name: t('marketplace.all') },
-  { id: 'community', name: t('marketplace.community') },
-  { id: 'nostr', name: 'Nostr' },
-  { id: 'commerce', name: t('marketplace.commerce') },
-  { id: 'money', name: t('marketplace.money') },
-  { id: 'data', name: t('marketplace.data') },
-  { id: 'media', name: 'Media' },
-  { id: 'home', name: t('marketplace.homeCategory') },
-  { id: 'networking', name: t('marketplace.networking') },
-  { id: 'l484', name: 'L484' },
-  { id: 'other', name: t('marketplace.other') },
-])
-
-const categoriesWithApps = computed(() => {
-  const entries = Object.entries(packages.value).filter(([id]) => !isServiceContainer(id))
-  return ALL_CATEGORIES.value.filter(cat => {
-    if (cat.id === 'all') return true
-    return entries.some(([id, pkg]) => getAppCategory(id, pkg) === cat.id)
-  })
+// Merge real packages from store with web-only app bookmarks
+const packages = computed(() => {
+  const realPackages = store.packages || {}
+  return { ...WEB_ONLY_APPS, ...realPackages }
 })
 
+const categoriesWithApps = useCategoriesWithApps(packages, ALL_CATEGORIES)
 
-// Connection error state — show after timeout if backend never connects
+// Connection error state
 const connectionError = ref('')
 let connectionTimer: ReturnType<typeof setTimeout> | undefined
 
@@ -439,84 +203,13 @@ onMounted(() => {
   }
 })
 
-// Track loading states for each app action
-const loadingActions = ref<Record<string, boolean>>({})
-
-// Action error toast
-const actionError = ref('')
-let errorTimer: ReturnType<typeof setTimeout> | undefined
-
-function showActionError(msg: string) {
-  actionError.value = msg
-  if (errorTimer) clearTimeout(errorTimer)
-  errorTimer = setTimeout(() => { actionError.value = '' }, 5000)
-}
-
-// Web-only app IDs and their URLs
-const WEB_ONLY_APP_URLS: Record<string, string> = {
-  'botfights': 'https://botfights.net',
-  'nwnn': 'https://nwnn.l484.com',
-  '484-kitchen': 'https://484.kitchen',
-  'call-the-operator': 'https://cta.tx1138.com',
-  // 'arch-presentation': hidden until X-Frame-Options fixed
-  'syntropy-institute': 'https://syntropy.institute',
-  't-zero': 'https://teeminuszero.net',
-}
-
-function isWebOnlyApp(id: string): boolean {
-  return id in WEB_ONLY_APP_URLS
-}
-
-// Web-only apps (no container) — always show as installed bookmarks
-const WEB_ONLY_APPS: Record<string, PackageDataEntry> = {
-  'botfights': {
-    state: 'running' as PackageState,
-    manifest: { id: 'botfights', title: 'BotFights', version: '1.0.0', description: { short: 'AI bot arena — build, train, and battle autonomous agents', long: '' }, 'release-notes': '', license: '', 'wrapper-repo': '', 'upstream-repo': '', 'support-site': '', 'marketing-site': '', 'donation-url': null },
-    'static-files': { license: '', instructions: '', icon: '/assets/img/app-icons/botfights.svg' },
-  },
-  'nwnn': {
-    state: 'running' as PackageState,
-    manifest: { id: 'nwnn', title: 'Next Web News Network', version: '1.0.0', description: { short: 'Decentralized news aggregator, synced from Telegram', long: '' }, 'release-notes': '', license: '', 'wrapper-repo': '', 'upstream-repo': '', 'support-site': '', 'marketing-site': '', 'donation-url': null },
-    'static-files': { license: '', instructions: '', icon: '/assets/img/app-icons/nwnn.png' },
-  },
-  '484-kitchen': {
-    state: 'running' as PackageState,
-    manifest: { id: '484-kitchen', title: '484 Kitchen', version: '1.0.0', description: { short: 'K484 application platform', long: '' }, 'release-notes': '', license: '', 'wrapper-repo': '', 'upstream-repo': '', 'support-site': '', 'marketing-site': '', 'donation-url': null },
-    'static-files': { license: '', instructions: '', icon: '/assets/img/app-icons/484-kitchen.png' },
-  },
-  'call-the-operator': {
-    state: 'running' as PackageState,
-    manifest: { id: 'call-the-operator', title: 'Call the Operator', version: '1.0.0', description: { short: 'Escape the Matrix — explore decentralized alternatives', long: '' }, 'release-notes': '', license: '', 'wrapper-repo': '', 'upstream-repo': '', 'support-site': '', 'marketing-site': '', 'donation-url': null },
-    'static-files': { license: '', instructions: '', icon: '/assets/img/app-icons/call-the-operator.png' },
-  },
-  /* arch-presentation hidden until X-Frame-Options fixed
-  'arch-presentation': {
-    state: 'running' as PackageState,
-    manifest: { id: 'arch-presentation', title: 'Arch Presentation', version: '1.0.0', description: { short: 'Archipelago: The Future of Decentralized Infrastructure', long: '' }, 'release-notes': '', license: '', 'wrapper-repo': '', 'upstream-repo': '', 'support-site': '', 'marketing-site': '', 'donation-url': null },
-    'static-files': { license: '', instructions: '', icon: '/assets/img/app-icons/arch-presentation.png' },
-  }, */
-  'syntropy-institute': {
-    state: 'running' as PackageState,
-    manifest: { id: 'syntropy-institute', title: 'Syntropy Institute', version: '1.0.0', description: { short: 'Medicine Reimagined — frequency analysis-therapy', long: '' }, 'release-notes': '', license: '', 'wrapper-repo': '', 'upstream-repo': '', 'support-site': '', 'marketing-site': '', 'donation-url': null },
-    'static-files': { license: '', instructions: '', icon: '/assets/img/app-icons/syntropy-institute.png' },
-  },
-  't-zero': {
-    state: 'running' as PackageState,
-    manifest: { id: 't-zero', title: 'T-0', version: '1.0.0', description: { short: 'Documentary series on decentralization and Bitcoin', long: '' }, 'release-notes': '', license: '', 'wrapper-repo': '', 'upstream-repo': '', 'support-site': '', 'marketing-site': '', 'donation-url': null },
-    'static-files': { license: '', instructions: '', icon: '/assets/img/app-icons/t-zero.png' },
-  },
-}
-
-// Merge real packages from store with web-only app bookmarks
-const packages = computed(() => {
-  const realPackages = store.packages || {}
-  return { ...WEB_ONLY_APPS, ...realPackages }
+onBeforeUnmount(() => {
+  if (connectionTimer) clearTimeout(connectionTimer)
 })
 
-// Web-only apps first (alphabetically), then all other apps (alphabetically)
+// Sorted entries: web-only first, then alphabetical by title
 const sortedPackageEntries = computed(() => {
   const entries = Object.entries(packages.value)
-  // Filter by active tab and category
   const filtered = entries.filter(([id, pkg]) => {
     const isSvc = isServiceContainer(id)
     if (activeTab.value === 'services' ? !isSvc : isSvc) return false
@@ -543,189 +236,28 @@ const filteredPackageEntries = computed(() => {
   )
 })
 
-const uninstallModal = ref({
-  show: false,
-  appId: '',
-  appTitle: ''
-})
-const uninstallModalRef = ref<HTMLElement | null>(null)
-const uninstallRestoreFocusRef = ref<HTMLElement | null>(null)
+// Uninstall modal
+const uninstallModal = ref({ show: false, appId: '', appTitle: '' })
+
+function showUninstallModal(id: string, pkg: PackageDataEntry) {
+  uninstallModal.value = { show: true, appId: id, appTitle: pkg.manifest.title }
+}
+
 function closeUninstallModal() {
-  uninstallRestoreFocusRef.value?.focus?.()
   uninstallModal.value.show = false
 }
-useModalKeyboard(
-  uninstallModalRef,
-  computed(() => uninstallModal.value.show),
-  closeUninstallModal,
-  { restoreFocusRef: uninstallRestoreFocusRef }
-)
 
-function canLaunch(pkg: PackageDataEntry): boolean {
-  // Web-only apps are always launchable
-  if (isWebOnlyApp(pkg.manifest.id)) return true
-  // For real apps, check for UI interface
-  const hasUI = pkg.manifest.interfaces?.main?.ui || pkg.installed?.['interface-addresses']?.main
-  const canLaunchState = pkg.state === 'running' || pkg.state === 'starting'
-  return !!hasUI && canLaunchState
-}
-
-/** Apps that open in a new browser tab (X-Frame-Options blocks iframe) */
-const TAB_LAUNCH_APPS = new Set([
-  'btcpay-server', 'grafana', 'photoprism', 'homeassistant',
-  'vaultwarden', 'nextcloud', 'uptime-kuma', 'portainer',
-  'onlyoffice', 'nginx-proxy-manager', 'tailscale',
-])
-
-function opensInTab(id: string): boolean {
-  return TAB_LAUNCH_APPS.has(id)
-}
-
-function launchApp(id: string) {
-  useAppLauncherStore().openSession(id)
-}
-
-function getStatusClass(state: PackageState, health?: string | 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) {
-    case PackageState.Running:
-      return 'bg-green-500/20 text-green-200'
-    case PackageState.Stopped:
-      return 'bg-gray-500/20 text-gray-200'
-    case PackageState.Exited:
-      return 'bg-red-500/20 text-red-200'
-    case PackageState.Starting:
-    case PackageState.Stopping:
-    case PackageState.Restarting:
-      return 'bg-yellow-500/20 text-yellow-200'
-    case PackageState.Installing:
-      return 'bg-blue-500/20 text-blue-200'
-    default:
-      return 'bg-gray-500/20 text-gray-200'
-  }
-}
-
-function getStatusLabel(state: PackageState, health?: string | 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'
-  return state
+async function onConfirmUninstall() {
+  const { appId } = uninstallModal.value
+  uninstallModal.value.show = false
+  await actions.confirmUninstall(appId)
 }
 
 function goToApp(id: string) {
   router.push(`/dashboard/apps/${id}`).catch(() => {})
 }
 
-const actionTimers = new Map<string, ReturnType<typeof setTimeout>>()
-
-async function startApp(id: string) {
-  loadingActions.value[id] = true
-  try {
-    await store.startPackage(id)
-    if (actionTimers.has(id)) clearTimeout(actionTimers.get(id)!)
-    actionTimers.set(id, setTimeout(() => {
-      loadingActions.value[id] = false
-      actionTimers.delete(id)
-    }, 5000))
-  } catch (err) {
-    if (import.meta.env.DEV) console.error('Failed to start app:', err)
-    showActionError(`Failed to start app: ${err instanceof Error ? err.message : 'Unknown error'}`)
-    loadingActions.value[id] = false
-  }
+function launchApp(id: string) {
+  useAppLauncherStore().openSession(id)
 }
-
-async function stopApp(id: string) {
-  loadingActions.value[id] = true
-  try {
-    await store.stopPackage(id)
-    if (actionTimers.has(id)) clearTimeout(actionTimers.get(id)!)
-    actionTimers.set(id, setTimeout(() => {
-      loadingActions.value[id] = false
-      actionTimers.delete(id)
-    }, 5000))
-  } catch (err) {
-    if (import.meta.env.DEV) console.error('Failed to stop app:', err)
-    showActionError(`Failed to stop app: ${err instanceof Error ? err.message : 'Unknown error'}`)
-    loadingActions.value[id] = false
-  }
-}
-
-async function restartApp(id: string) {
-  loadingActions.value[id] = true
-  try {
-    await store.restartPackage(id)
-    if (actionTimers.has(id)) clearTimeout(actionTimers.get(id)!)
-    actionTimers.set(id, setTimeout(() => {
-      loadingActions.value[id] = false
-      actionTimers.delete(id)
-    }, 8000))
-  } catch (err) {
-    if (import.meta.env.DEV) console.error('Failed to restart app:', err)
-    showActionError(`Failed to restart app: ${err instanceof Error ? err.message : 'Unknown error'}`)
-    loadingActions.value[id] = false
-  }
-}
-
-onBeforeUnmount(() => {
-  for (const t of actionTimers.values()) clearTimeout(t)
-  actionTimers.clear()
-  if (connectionTimer) clearTimeout(connectionTimer)
-})
-
-
-function showUninstallModal(id: string, pkg: PackageDataEntry) {
-  uninstallModal.value = {
-    show: true,
-    appId: id,
-    appTitle: pkg.manifest.title
-  }
-}
-
-const uninstalling = ref(false)
-const uninstallingApps = ref<Set<string>>(new Set())
-
-async function confirmUninstall() {
-  const { appId } = uninstallModal.value
-  uninstalling.value = true
-
-  try {
-    uninstallModal.value.show = false
-    uninstallingApps.value.add(appId)
-    await store.uninstallPackage(appId)
-    // Optimistically remove from store so card disappears immediately
-    if (store.packages && store.packages[appId]) {
-      delete store.packages[appId]
-    }
-  } 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'}`)
-  } finally {
-    uninstallingApps.value.delete(appId)
-    uninstalling.value = false
-  }
-}
-
-function handleImageError(e: Event) {
-  const target = e.target as HTMLImageElement
-  const currentSrc = target.src
-  
-  // Try fallback icon - use a simple placeholder SVG
-  // Create a data URI for a simple icon placeholder
-  const placeholderSvg = `data:image/svg+xml,${encodeURIComponent(`
-    <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <rect width="64" height="64" rx="12" fill="rgba(255,255,255,0.1)"/>
-      <path d="M32 20L40 28H36V40H28V28H24L32 20Z" fill="rgba(255,255,255,0.6)"/>
-      <path d="M20 44H44V48H20V44Z" fill="rgba(255,255,255,0.4)"/>
-    </svg>
-  `)}`
-  
-  // Only set fallback if we haven't already tried it
-  if (!currentSrc.includes('data:image')) {
-    target.src = placeholderSvg
-  }
-}
-
 </script>
-

neode-ui/src/views/Discover.vue

@@ -45,168 +45,25 @@
       </div>
     </div>
 
-    <!-- Hero Section -->
-    <div v-if="!searchQuery" class="discover-hero glass-card p-8 md:p-12 mb-8 relative overflow-hidden">
-      <div class="discover-hero-scanline" aria-hidden="true"></div>
-      <div class="relative z-10">
-        <div class="flex items-center gap-3 mb-4">
-          <span class="discover-terminal-tag">~ $</span>
-          <span class="text-white/40 text-sm font-mono tracking-wider">ARCHIPELAGO://DISCOVER</span>
-        </div>
-        <h1 class="text-4xl md:text-5xl font-extrabold text-white mb-4 tracking-tight font-archipelago">
-          Reclaim Your<br />
-          <span class="discover-hero-accent">Digital Sovereignty</span>
-        </h1>
-        <p class="text-white/70 text-lg md:text-xl max-w-2xl leading-relaxed mb-6">
-          Your node. Your rules. Every app runs on <em>your</em> hardware, verified by <em>your</em> Bitcoin node.
-          No cloud. No custodians. No permission needed.
-        </p>
-        <div class="flex flex-wrap gap-4 text-sm">
-          <div class="discover-stat-pill">
-            <span class="text-white font-bold">{{ allApps.length }}</span>
-            <span class="text-white/50">apps available</span>
-          </div>
-          <div class="discover-stat-pill">
-            <span class="text-white font-bold">{{ installedCount }}</span>
-            <span class="text-white/50">installed</span>
-          </div>
-          <div class="discover-stat-pill">
-            <span class="text-white font-bold">100%</span>
-            <span class="text-white/50">self-hosted</span>
-          </div>
-        </div>
-      </div>
-    </div>
+    <!-- Hero + Featured (only when no search) -->
+    <template v-if="!searchQuery">
+      <DiscoverHero
+        :total-apps="allApps.length"
+        :installed-count="installedCount"
+      />
 
-    <!-- Install progress shown on cards inline, no separate banner -->
-
-    <!-- Featured Apps Section (only when no search) -->
-    <div v-if="!searchQuery" class="mb-10">
-      <div class="flex items-center gap-3 mb-5">
-        <span class="discover-terminal-tag">featured</span>
-        <h2 class="text-xl font-bold text-white">Sovereignty Stack</h2>
-        <div class="flex-1 h-px bg-white/10"></div>
-      </div>
-
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-        <div
-          v-for="(app, index) in featuredApps"
-          :key="app.id"
-          data-controller-container
-          tabindex="0"
-          role="link"
-          class="discover-featured-card glass-card p-6 cursor-pointer"
-          :class="{ 'card-stagger': showStagger }"
-          :style="{ '--stagger-index': index }"
-          @click="viewAppDetails(app)"
-          @keydown.enter="viewAppDetails(app)"
-        >
-          <div class="flex items-start gap-5">
-            <img
-              v-if="app.icon"
-              :src="app.icon"
-              :alt="app.title"
-              class="w-20 h-20 rounded-xl object-cover flex-shrink-0"
-              @error="handleImageError"
-            />
-            <div class="flex-1 min-w-0">
-              <div class="flex items-center gap-2 mb-1">
-                <h3 class="text-xl font-bold text-white truncate">{{ app.title }}</h3>
-                <span
-                  v-if="getAppTier(app.id) !== 'optional'"
-                  class="tier-badge"
-                  :class="getAppTier(app.id) === 'core' ? 'tier-badge-core' : 'tier-badge-recommended'"
-                >{{ getAppTier(app.id) }}</span>
-                <span v-if="isInstalled(app.id)" class="discover-installed-badge">installed</span>
-              </div>
-              <p class="text-white/50 text-sm mb-3">{{ app.author }} &middot; v{{ app.version }}</p>
-              <p class="text-white/80 text-sm leading-relaxed">{{ app.featuredDescription }}</p>
-            </div>
-          </div>
-          <div class="flex items-center justify-between mt-4 pt-4 border-t border-white/8">
-            <div class="flex items-center gap-2">
-              <svg class="w-4 h-4 text-orange-400/70" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
-              </svg>
-              <span class="text-white/40 text-xs font-mono">{{ app.privacyTag }}</span>
-            </div>
-            <button
-              v-if="isInstalled(app.id) && !isStartingUp(app.id)"
-              @click.stop="launchInstalledApp(app)"
-              class="glass-button glass-button-sm rounded-lg text-sm font-medium"
-            >Launch</button>
-            <span
-              v-else-if="isInstalled(app.id) && isStartingUp(app.id)"
-              class="text-yellow-200 text-sm flex items-center gap-2"
-            >
-              <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" 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>
-              Starting...
-            </span>
-            <button
-              v-else-if="!containersScanned && app.dockerImage"
-              disabled
-              class="text-white/40 text-sm flex items-center gap-2"
-            >
-              <svg class="animate-spin h-3.5 w-3.5 opacity-60" xmlns="http://www.w3.org/2000/svg" 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>
-              Checking...
-            </button>
-            <button
-              v-else-if="!isInstalled(app.id) && app.dockerImage"
-              data-controller-install-btn
-              @click.stop="app.source === 'local' ? installApp(app) : installCommunityApp(app)"
-              :disabled="installingApps.has(app.id)"
-              class="glass-button glass-button-sm rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              <span v-if="installingApps.has(app.id)" class="flex items-center gap-2">
-                <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" 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>
-                Installing...
-              </span>
-              <span v-else>Install</span>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Principles Row -->
-      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
-        <div class="discover-principle-card">
-          <svg class="w-6 h-6 text-orange-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-          </svg>
-          <h3 class="text-white text-sm font-bold mb-1">Privacy First</h3>
-          <p class="text-white/40 text-xs leading-relaxed">No telemetry. No tracking. Your data never leaves your hardware.</p>
-        </div>
-        <div class="discover-principle-card">
-          <svg class="w-6 h-6 text-orange-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-          </svg>
-          <h3 class="text-white text-sm font-bold mb-1">Verify, Don't Trust</h3>
-          <p class="text-white/40 text-xs leading-relaxed">Run your own node. Validate every transaction. Be your own bank.</p>
-        </div>
-        <div class="discover-principle-card">
-          <svg class="w-6 h-6 text-orange-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-          </svg>
-          <h3 class="text-white text-sm font-bold mb-1">Open Source</h3>
-          <p class="text-white/40 text-xs leading-relaxed">Every app is open source. Audit the code. Trust the math, not the company.</p>
-        </div>
-        <div class="discover-principle-card">
-          <svg class="w-6 h-6 text-orange-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>
-          <h3 class="text-white text-sm font-bold mb-1">No Permission Needed</h3>
-          <p class="text-white/40 text-xs leading-relaxed">Permissionless commerce. Permissionless money. Permissionless freedom.</p>
-        </div>
-      </div>
+      <FeaturedApps
+        :featured-apps="featuredApps"
+        :show-stagger="showStagger"
+        :containers-scanned="containersScanned"
+        :installing-apps="installingApps"
+        :is-installed="isInstalled"
+        :is-starting-up="isStartingUp"
+        :get-app-tier="getAppTier"
+        @view-details="viewAppDetails"
+        @launch="launchInstalledApp"
+        @install="handleInstall"
+      />
 
       <!-- Category Section Divider -->
       <div class="flex items-center gap-3 mb-5">
@@ -215,7 +72,7 @@
         <div class="flex-1 h-px bg-white/10"></div>
         <span class="text-white/30 text-sm">{{ filteredApps.length }} apps</span>
       </div>
-    </div>
+    </template>
 
     <!-- Search results header -->
     <div v-else class="flex items-center gap-3 mb-5">
@@ -231,145 +88,26 @@
       <button @click="loadCommunityMarketplace()" class="ml-2 underline hover:no-underline">Retry</button>
     </div>
 
-    <!-- Apps Grid -->
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 pb-8">
-      <div
-        v-for="(app, index) in filteredApps"
-        :key="app.id"
-        data-controller-container
-        :data-controller-install="!(isInstalled(app.id) || installingApps.has(app.id)) && (app.source === 'local' || !!app.dockerImage) ? '1' : undefined"
-        tabindex="0"
-        role="link"
-        class="discover-app-card glass-card p-5 cursor-pointer flex flex-col"
-        :class="{ 'card-stagger': showStagger }"
-        :style="{ '--stagger-index': index + (selectedCategory === 'all' && !searchQuery ? 4 : 0) }"
-        @click="viewAppDetails(app)"
-        @keydown.enter="viewAppDetails(app)"
-      >
-        <div class="flex items-start gap-4 mb-3">
-          <img
-            v-if="app.icon"
-            :src="app.icon"
-            :alt="app.title"
-            class="w-14 h-14 rounded-lg object-cover"
-            @error="handleImageError"
-          />
-          <div v-else class="w-14 h-14 rounded-lg bg-white/10 flex items-center justify-center">
-            <svg class="w-7 h-7 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
-            </svg>
-          </div>
-          <div class="flex-1 min-w-0">
-            <div class="flex items-center gap-2 mb-0.5">
-              <h3 class="text-lg font-semibold text-white truncate">{{ app.title }}</h3>
-              <span
-                v-if="getAppTier(app.id) !== 'optional'"
-                class="tier-badge"
-                :class="getAppTier(app.id) === 'core' ? 'tier-badge-core' : 'tier-badge-recommended'"
-              >{{ getAppTier(app.id) }}</span>
-            </div>
-            <p class="text-sm text-white/50">{{ app.version ? `v${app.version}` : 'latest' }}</p>
-            <p v-if="app.author" class="text-xs text-white/40 mt-0.5">{{ app.author }}</p>
-          </div>
-        </div>
-
-        <!-- Trust badge for Nostr apps -->
-        <div v-if="app.trustTier" class="flex items-center gap-2 mb-2">
-          <span
-            class="text-xs px-2 py-0.5 rounded-full font-medium"
-            :class="{
-              'bg-green-400/20 text-green-400': app.trustTier === 'verified',
-              'bg-yellow-400/20 text-yellow-400': app.trustTier === 'community',
-              'bg-orange-400/20 text-orange-400': app.trustTier === 'unverified',
-              'bg-red-400/20 text-red-400': app.trustTier === 'untrusted',
-            }"
-          >{{ app.trustTier }}</span>
-          <span class="text-xs text-white/40">Score: {{ app.trustScore }}/100</span>
-        </div>
-
-        <p class="text-white/70 text-sm mb-4 line-clamp-3 flex-1">
-          {{ typeof app.description === 'object' ? app.description.short : (app.description || 'No description available') }}
-        </p>
-
-        <div class="flex gap-2 mt-auto">
-          <!-- Installed & starting up -->
-          <span
-            v-if="isInstalled(app.id) && isStartingUp(app.id)"
-            class="flex-1 px-4 py-2 bg-yellow-500/15 border border-yellow-500/30 rounded-lg text-yellow-200 text-sm font-medium text-center cursor-default flex items-center justify-center gap-2"
-          >
-            <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" 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>
-            {{ getInstalledState(app.id) === 'installing' ? 'Installing...' : 'Starting...' }}
-          </span>
-          <!-- Installed & ready -->
-          <span
-            v-else-if="isInstalled(app.id)"
-            class="flex-1 px-4 py-2 bg-white/20 rounded-lg text-white/60 text-sm font-medium text-center cursor-default"
-          >Installed</span>
-          <button
-            v-if="isInstalled(app.id) && !isStartingUp(app.id)"
-            @click.stop="launchInstalledApp(app)"
-            class="px-4 py-2 glass-button glass-button-sm rounded-lg text-sm font-medium"
-          >Launch</button>
-          <!-- Scanning -->
-          <span
-            v-else-if="!containersScanned && (app.source === 'local' || app.dockerImage)"
-            class="flex-1 px-4 py-2 rounded-lg text-white/50 text-sm font-medium text-center cursor-default relative overflow-hidden"
-          >
-            <span class="discover-shimmer-bg"></span>
-            <span class="relative flex items-center justify-center gap-2">
-              <svg class="animate-spin h-3.5 w-3.5 opacity-60" xmlns="http://www.w3.org/2000/svg" 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>
-              Checking...
-            </span>
-          </span>
-          <!-- Install button -->
-          <button
-            v-else-if="!isInstalled(app.id) && (app.source === 'local' || app.dockerImage)"
-            data-controller-install-btn
-            @click.stop="app.source === 'local' ? installApp(app) : installCommunityApp(app)"
-            :disabled="installingApps.has(app.id)"
-            class="flex-1 px-4 py-2 glass-button glass-button-sm rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            <span v-if="installingApps.has(app.id)" class="flex items-center justify-center gap-2">
-              <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" 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>
-              {{ installingApps.get(app.id)?.message || 'Installing...' }}
-            </span>
-            <span v-else>Install</span>
-          </button>
-          <!-- Not available -->
-          <button
-            v-else-if="!isInstalled(app.id)"
-            disabled
-            class="flex-1 px-4 py-2 bg-white/10 rounded-lg text-white/40 text-sm font-medium cursor-not-allowed"
-          >Not Available</button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Empty State -->
-    <div v-if="filteredApps.length === 0" class="text-center py-12">
-      <div v-if="loadingCommunity || nostrLoading" class="flex flex-col items-center gap-4">
-        <svg class="animate-spin h-12 w-12 text-blue-400" xmlns="http://www.w3.org/2000/svg" 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>
-        <p class="text-white/70">{{ nostrLoading ? 'Querying Nostr relays...' : 'Loading...' }}</p>
-      </div>
-      <div v-else-if="nostrError && selectedCategory === 'nostr'" class="flex flex-col items-center gap-4">
-        <p class="text-white/70">No community apps found</p>
-        <p class="text-white/40 text-sm">{{ nostrError }}</p>
-        <button @click="nostrApps = []; loadNostrMarketplace()" class="px-4 py-2 glass-button rounded-lg text-sm">Retry</button>
-      </div>
-      <p v-else class="text-white/70">No apps found{{ searchQuery ? ` for "${searchQuery}"` : '' }}</p>
-    </div>
+    <AppGrid
+      :filtered-apps="filteredApps"
+      :show-stagger="showStagger"
+      :stagger-offset="selectedCategory === 'all' && !searchQuery ? 4 : 0"
+      :containers-scanned="containersScanned"
+      :installing-apps="installingApps"
+      :is-installed="isInstalled"
+      :is-starting-up="isStartingUp"
+      :get-installed-state="getInstalledState"
+      :get-app-tier="getAppTier"
+      :is-loading="loadingCommunity || nostrLoading"
+      :loading-message="nostrLoading ? 'Querying Nostr relays...' : 'Loading...'"
+      :nostr-error="nostrError"
+      :is-nostr-category="selectedCategory === 'nostr'"
+      :search-query="searchQuery"
+      @view-details="viewAppDetails"
+      @launch="launchInstalledApp"
+      @install="handleInstall"
+      @retry-nostr="retryNostr"
+    />
 
     <!-- Manifesto Footer (only when no search) -->
     <div v-if="!searchQuery && filteredApps.length > 0" class="discover-manifesto glass-card p-8 mt-4 mb-8">
@@ -386,61 +124,11 @@
       <p class="text-white/30 text-xs mt-4 font-mono">// Cypherpunks write code. We run nodes.</p>
     </div>
 
-    <!-- Floating Filter Button (Mobile) -->
-    <Teleport to="body">
-      <button
-        @click="showFilterModal = true"
-        class="md:hidden fixed right-4 z-40 w-14 h-14 rounded-full glass-button flex items-center justify-center shadow-2xl mobile-back-btn"
-        style="left: auto;"
-      >
-        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
-        </svg>
-      </button>
-    </Teleport>
-
-    <!-- Filter Modal (Mobile) -->
-    <Transition name="modal">
-      <div
-        v-if="showFilterModal"
-        class="fixed inset-0 z-50 flex items-end justify-center md:hidden bg-black/10 backdrop-blur-md"
-        @click.self="closeFilterModal()"
-      >
-        <div ref="filterModalRef" class="glass-card p-6 w-full rounded-t-3xl max-h-[80vh] overflow-y-auto">
-          <div class="flex items-center justify-between mb-6">
-            <h2 class="text-2xl font-bold text-white">Filter</h2>
-            <button @click="closeFilterModal()" class="text-white/60 hover:text-white transition-colors">
-              <svg class="w-6 h-6" 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 class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-            <button
-              v-for="category in categoriesWithApps"
-              :key="category.id"
-              @click="selectCategory(category.id); closeFilterModal()"
-              :class="[
-                'p-4 rounded-xl font-medium transition-all text-left',
-                selectedCategory === category.id
-                  ? 'bg-white/20 text-white border-2 border-white/40'
-                  : 'glass-card text-white/80 hover:bg-orange-500/5 hover:border-orange-500/15'
-              ]"
-            >
-              <div class="flex items-center gap-3">
-                <div class="flex-1">
-                  <p class="font-semibold">{{ category.name }}</p>
-                  <p v-if="selectedCategory === category.id" class="text-xs text-white/60 mt-1">Currently viewing</p>
-                </div>
-                <svg v-if="selectedCategory === category.id" class="w-5 h-5 text-white flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
-                </svg>
-              </div>
-            </button>
-          </div>
-        </div>
-      </div>
-    </Transition>
+    <FilterModal
+      :categories="categoriesWithApps"
+      :selected-category="selectedCategory"
+      @select-category="selectCategory"
+    />
   </div>
 </template>
 
@@ -453,12 +141,14 @@ import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
 import { useRouter, RouterLink } from 'vue-router'
 import { useAppStore } from '@/stores/app'
 import { rpcClient } from '@/api/rpc-client'
-import { useMarketplaceApp, type MarketplaceAppInfo } from '@/composables/useMarketplaceApp'
+import { useMarketplaceApp } from '@/composables/useMarketplaceApp'
 import { useAppLauncherStore } from '@/stores/appLauncher'
-import { useModalKeyboard } from '@/composables/useModalKeyboard'
-
-type MarketplaceApp = Partial<MarketplaceAppInfo> & { id: string; trustScore?: number; trustTier?: string; relayCount?: number }
-type FeaturedApp = MarketplaceApp & { featuredDescription: string; privacyTag: string }
+import DiscoverHero from './discover/DiscoverHero.vue'
+import FeaturedApps from './discover/FeaturedApps.vue'
+import AppGrid from './discover/AppGrid.vue'
+import FilterModal from './discover/FilterModal.vue'
+import type { MarketplaceApp, FeaturedApp, InstallProgress } from './discover/types'
+import { getCuratedAppList, INSTALLED_ALIASES, FEATURED_DEFINITIONS, categorizeCommunityApp } from './discover/curatedApps'
 
 const router = useRouter()
 const store = useAppStore()
@@ -484,15 +174,6 @@ const categories = computed(() => [
 ])
 
 // Installation state
-interface InstallProgress {
-  id: string
-  title: string
-  status: 'downloading' | 'installing' | 'starting' | 'complete' | 'error'
-  progress: number
-  message: string
-  attempt: number
-}
-
 const installingApps = ref<Map<string, InstallProgress>>(new Map())
 const maxAttempts = ref(60)
 
@@ -515,16 +196,6 @@ watch(() => store.packages, (packages) => {
   }
 }, { deep: true })
 
-// Filter modal
-const showFilterModal = ref(false)
-const filterModalRef = ref<HTMLElement | null>(null)
-const filterRestoreFocusRef = ref<HTMLElement | null>(null)
-function closeFilterModal() {
-  filterRestoreFocusRef.value?.focus?.()
-  showFilterModal.value = false
-}
-useModalKeyboard(filterModalRef, showFilterModal, closeFilterModal, { restoreFocusRef: filterRestoreFocusRef })
-
 function selectCategory(id: string) {
   selectedCategory.value = id
   if (id === 'nostr' && nostrApps.value.length === 0 && !nostrLoading.value) {
@@ -540,7 +211,7 @@ function navigateToMarketplace(categoryId: string) {
 const loadingCommunity = ref(false)
 const communityError = ref('')
 const communityApps = ref<MarketplaceApp[]>([])
-const nostrApps = ref<(MarketplaceApp & { trustScore?: number; trustTier?: string; relayCount?: number })[]>([])
+const nostrApps = ref<MarketplaceApp[]>([])
 const nostrLoading = ref(false)
 const nostrError = ref('')
 
@@ -575,25 +246,14 @@ async function loadNostrMarketplace() {
   }
 }
 
+function retryNostr() {
+  nostrApps.value = []
+  loadNostrMarketplace()
+}
+
 const installedPackages = computed(() => store.data?.['package-data'] || {})
 const containersScanned = computed(() => store.data?.['server-info']?.['status-info']?.['containers-scanned'] ?? false)
 
-function categorizeCommunityApp(app: MarketplaceApp): string {
-  if (app.category) return app.category
-  const id = app.id.toLowerCase()
-  const title = app.title?.toLowerCase() || ''
-  const description = (typeof app.description === 'string' ? app.description : app.description?.short ?? '').toLowerCase()
-  const combined = `${id} ${title} ${description}`
-
-  if (id.includes('bitcoin') || id.includes('btc') || id.includes('lightning') || id.includes('lnd') || id.includes('electr') || id.includes('fedimint') || id.includes('cashu') || combined.includes('wallet')) return 'money'
-  if (id.includes('btcpay') || id.includes('commerce') || id.includes('shop') || id.includes('pos') || combined.includes('merchant')) return 'commerce'
-  if (id.includes('cloud') || id.includes('nextcloud') || id.includes('storage') || id.includes('file') || id.includes('photo') || id.includes('immich') || id.includes('jellyfin') || id.includes('media') || id.includes('vault') || combined.includes('password manager')) return 'data'
-  if (id.includes('home-assistant') || id.includes('homeassistant') || combined.includes('home automation')) return 'home'
-  if (id.includes('nostr') || combined.includes('nostr relay')) return 'nostr'
-  if (id.includes('vpn') || id.includes('wireguard') || id.includes('tailscale') || id.includes('proxy') || id.includes('dns') || id.includes('tor') || combined.includes('network')) return 'networking'
-  if (id.includes('matrix') || id.includes('mastodon') || id.includes('chat') || id.includes('social') || combined.includes('messaging')) return 'community'
-  return 'other'
-}
 
 const allApps = computed(() => {
   const local: (MarketplaceApp & { category: string; source: string })[] = []
@@ -622,7 +282,6 @@ const categoriesWithApps = computed(() => {
   })
 })
 
-
 const filteredApps = computed(() => {
   let apps = allApps.value
   if (searchQuery.value) {
@@ -647,32 +306,8 @@ const installedCount = computed(() => {
   return allApps.value.filter(app => isInstalled(app.id)).length
 })
 
-// Featured apps with rich descriptions
 const featuredApps = computed<FeaturedApp[]>(() => {
-  const featured: { id: string; desc: string; tag: string }[] = [
-    {
-      id: 'bitcoin-knots',
-      desc: 'The foundation of sovereignty. Run a full Bitcoin node to validate every transaction yourself. No trusted third parties. No asking permission. Your node enforces the consensus rules that protect your wealth. Don\'t trust — verify.',
-      tag: 'FULL VALIDATION // ZERO TRUST'
-    },
-    {
-      id: 'lnd',
-      desc: 'Lightning-fast payments over the Lightning Network. Open channels, route transactions, and earn routing fees — all from your sovereign node. Instant settlement. Near-zero fees. The future of money, running on your hardware.',
-      tag: 'INSTANT SETTLEMENT // YOUR CHANNELS'
-    },
-    {
-      id: 'btcpay-server',
-      desc: 'Accept Bitcoin payments without intermediaries. No fees to payment processors. No KYC. No permission needed. Your commerce, your terms. Self-hosted payment infrastructure that makes you truly independent.',
-      tag: 'NO INTERMEDIARIES // NO KYC'
-    },
-    {
-      id: 'vaultwarden',
-      desc: 'Your passwords belong to you. Self-hosted password vault with full Bitwarden compatibility. Zero-knowledge encryption means even you can\'t see your passwords without your master key. No cloud required — your secrets, your server.',
-      tag: 'ZERO KNOWLEDGE // SELF-HOSTED'
-    },
-  ]
-
-  return featured
+  return FEATURED_DEFINITIONS
     .map(f => {
       const app = allApps.value.find(a => a.id === f.id)
       if (!app) return null
@@ -681,25 +316,6 @@ const featuredApps = computed<FeaturedApp[]>(() => {
     .filter((a): a is FeaturedApp => a !== null)
 })
 
-const INSTALLED_ALIASES: Record<string, string[]> = {
-  mempool: ['mempool-web', 'mempool-api', 'archy-mempool-web', 'archy-mempool-db'],
-  bitcoin: ['bitcoin-knots'],
-  btcpay: ['btcpay-server', 'archy-btcpay-db', 'archy-nbxplorer'],
-  immich: ['immich-server', 'immich-app', 'immich_server', 'immich_postgres', 'immich_redis'],
-  nextcloud: ['nextcloud-aio', 'nextcloud-server'],
-  fedimint: ['fedimint-gateway'],
-  electrumx: ['electrumx', 'archy-electrs-ui'],
-  grafana: ['grafana'],
-  jellyfin: ['jellyfin'],
-  vaultwarden: ['vaultwarden'],
-  searxng: ['searxng'],
-  homeassistant: ['homeassistant'],
-  photoprism: ['photoprism'],
-  lnd: ['lnd', 'archy-lnd-ui'],
-  filebrowser: ['filebrowser'],
-  tailscale: ['tailscale'],
-  ollama: ['ollama'],
-}
 
 function isInstalled(appId: string): boolean {
   if (appId in installedPackages.value) return true
@@ -737,58 +353,12 @@ function launchInstalledApp(app: MarketplaceApp) {
   appLauncher.openSession(app.id)
 }
 
-// Curated app list
-function getCuratedAppList() {
-  return [
-    { id: 'bitcoin-knots', title: 'Bitcoin Knots', version: '28.1.0', description: 'Run a full Bitcoin node. Validate and relay blocks and transactions on the Bitcoin network.', icon: '/assets/img/app-icons/bitcoin-knots.webp', author: 'Bitcoin Knots', dockerImage: 'docker.io/bitcoinknots/bitcoin:v28.1', repoUrl: 'https://github.com/bitcoinknots/bitcoin' },
-    { id: 'btcpay-server', title: 'BTCPay Server', version: '1.13.5', description: 'Self-hosted Bitcoin payment processor. Accept Bitcoin payments without intermediaries or fees.', icon: '/assets/img/app-icons/btcpay-server.png', author: 'BTCPay Server Foundation', dockerImage: 'docker.io/btcpayserver/btcpayserver:1.13.5', repoUrl: 'https://github.com/btcpayserver/btcpayserver' },
-    { id: 'lnd', title: 'LND', version: '0.17.4', description: 'Lightning Network Daemon. Fast and cheap Bitcoin payments through the Lightning Network.', icon: '/assets/img/app-icons/lnd.svg', author: 'Lightning Labs', dockerImage: 'docker.io/lightninglabs/lnd:v0.17.4-beta', repoUrl: 'https://github.com/lightningnetwork/lnd' },
-    { id: 'thunderhub', title: 'ThunderHub', version: '0.13.31', description: 'Lightning node management UI. Manage channels, payments, routing fees, and monitor your Lightning node.', icon: '/assets/img/app-icons/thunderhub.svg', author: 'Anthony Potdevin', dockerImage: 'docker.io/apotdevin/thunderhub:v0.13.31', repoUrl: 'https://github.com/apotdevin/thunderhub' },
-    { id: 'mempool', title: 'Mempool Explorer', version: '2.5.0', description: 'Self-hosted Bitcoin blockchain and mempool visualizer. Monitor transactions without revealing your addresses to third parties.', icon: '/assets/img/app-icons/mempool.webp', author: 'Mempool', dockerImage: 'docker.io/mempool/frontend:v2.5.0', repoUrl: 'https://github.com/mempool/mempool' },
-    { id: 'homeassistant', title: 'Home Assistant', version: '2024.1', description: 'Open-source home automation. Control smart home devices privately, on your own hardware.', icon: '/assets/img/app-icons/homeassistant.png', author: 'Home Assistant', dockerImage: 'docker.io/homeassistant/home-assistant:2024.1', repoUrl: 'https://github.com/home-assistant/core' },
-    { id: 'grafana', title: 'Grafana', version: '10.2.0', description: 'Analytics and monitoring platform. Dashboards for your node metrics and system health.', icon: '/assets/img/app-icons/grafana.png', author: 'Grafana Labs', dockerImage: 'docker.io/grafana/grafana:10.2.0', repoUrl: 'https://github.com/grafana/grafana' },
-    { id: 'searxng', title: 'SearXNG', version: '2024.1.0', description: 'Privacy-respecting metasearch engine. Search the internet without being tracked or profiled.', icon: '/assets/img/app-icons/searxng.png', author: 'SearXNG', dockerImage: 'docker.io/searxng/searxng:2024.11.17-e2554de75', repoUrl: 'https://github.com/searxng/searxng' },
-    { id: 'ollama', title: 'Ollama', version: '0.1.0', description: 'Run AI models locally. Llama, Mistral, and more — on your hardware, completely private.', icon: '/assets/img/app-icons/ollama.png', author: 'Ollama', dockerImage: 'docker.io/ollama/ollama:0.5.4', repoUrl: 'https://github.com/ollama/ollama' },
-    { id: 'onlyoffice', title: 'OnlyOffice', version: '7.5.1', description: 'Self-hosted office suite. Documents, spreadsheets, and presentations without the cloud.', icon: '/assets/img/app-icons/onlyoffice.webp', author: 'Ascensio System SIA', dockerImage: 'docker.io/onlyoffice/documentserver:7.5.1', repoUrl: 'https://github.com/ONLYOFFICE/DocumentServer' },
-    { id: 'penpot', title: 'Penpot', version: '2.4', description: 'Open-source design platform. Self-hosted alternative to Figma for design and prototyping.', icon: '/assets/img/app-icons/penpot.webp', author: 'Penpot', dockerImage: 'docker.io/penpotapp/frontend:2.4', repoUrl: 'https://github.com/penpot/penpot' },
-    { id: 'nextcloud', title: 'Nextcloud', version: '28.0', description: 'Your own private cloud. File sync, calendars, contacts — all on your hardware.', icon: '/assets/img/app-icons/nextcloud.webp', author: 'Nextcloud', dockerImage: 'docker.io/library/nextcloud:28', repoUrl: 'https://github.com/nextcloud/server' },
-    { id: 'vaultwarden', title: 'Vaultwarden', version: '1.30.0', description: 'Self-hosted password vault. Bitwarden-compatible with zero-knowledge encryption.', icon: '/assets/img/app-icons/vaultwarden.webp', author: 'Vaultwarden', dockerImage: 'docker.io/vaultwarden/server:1.30.0-alpine', repoUrl: 'https://github.com/dani-garcia/vaultwarden' },
-    { id: 'jellyfin', title: 'Jellyfin', version: '10.8.0', description: 'Free media server. Stream your movies, music, and photos to any device.', icon: '/assets/img/app-icons/jellyfin.webp', author: 'Jellyfin', dockerImage: 'docker.io/jellyfin/jellyfin:10.8.13', repoUrl: 'https://github.com/jellyfin/jellyfin' },
-    { id: 'photoprism', title: 'PhotoPrism', version: '240915', description: 'AI-powered photo management. Organize photos with facial recognition, privately.', icon: '/assets/img/app-icons/photoprism.svg', author: 'PhotoPrism', dockerImage: 'docker.io/photoprism/photoprism:240915', repoUrl: 'https://github.com/photoprism/photoprism' },
-    { id: 'immich', title: 'Immich', version: '1.90.0', description: 'High-performance photo and video backup. Mobile-first with ML features.', icon: '/assets/img/app-icons/immich.png', author: 'Immich', dockerImage: 'ghcr.io/immich-app/immich-server:release', repoUrl: 'https://github.com/immich-app/immich' },
-    { id: 'filebrowser', title: 'File Browser', version: '2.27.0', description: 'Web-based file manager. Browse, upload, and manage files on your server.', icon: '/assets/img/app-icons/file-browser.webp', author: 'File Browser', dockerImage: 'docker.io/filebrowser/filebrowser:v2.27.0', repoUrl: 'https://github.com/filebrowser/filebrowser' },
-    { id: 'nginx-proxy-manager', title: 'Nginx Proxy Manager', version: '2.11.0', description: 'Reverse proxy with SSL. Beautiful web interface for managing proxies.', icon: '/assets/img/app-icons/nginx.svg', author: 'Nginx Proxy Manager', dockerImage: 'docker.io/jc21/nginx-proxy-manager:2.12.1', repoUrl: 'https://github.com/NginxProxyManager/nginx-proxy-manager' },
-    { id: 'portainer', title: 'Portainer', version: '2.19.0', description: 'Container management UI. Manage your containerized services through the web.', icon: '/assets/img/app-icons/portainer.webp', author: 'Portainer', dockerImage: 'docker.io/portainer/portainer-ce:2.19.4', repoUrl: 'https://github.com/portainer/portainer' },
-    { id: 'uptime-kuma', title: 'Uptime Kuma', version: '1.23.0', description: 'Self-hosted uptime monitoring. Track HTTP, TCP, DNS, and more.', icon: '/assets/img/app-icons/uptime-kuma.webp', author: 'Uptime Kuma', dockerImage: 'docker.io/louislam/uptime-kuma:1', repoUrl: 'https://github.com/louislam/uptime-kuma' },
-    { id: 'tailscale', title: 'Tailscale', version: '1.78.0', description: 'Zero-config VPN. Secure remote access with WireGuard mesh networking.', icon: '/assets/img/app-icons/tailscale.webp', author: 'Tailscale', dockerImage: 'docker.io/tailscale/tailscale:stable', repoUrl: 'https://github.com/tailscale/tailscale' },
-    { id: 'fedimint', title: 'Fedimint', version: '0.10.0', description: 'Federated Bitcoin mint. Private, scalable Bitcoin through federated guardians.', icon: '/assets/img/app-icons/fedimint.png', author: 'Fedimint', dockerImage: 'docker.io/fedimint/fedimintd:v0.10.0', repoUrl: 'https://github.com/fedimint/fedimint' },
-    { id: 'indeedhub', title: 'Indeehub', version: '0.1.0', description: 'Bitcoin documentary streaming with Nostr identity. Stream sovereignty content.', icon: '/assets/img/app-icons/indeedhub.png', author: 'Indeehub Team', dockerImage: 'localhost/indeedhub:latest', repoUrl: 'https://github.com/indeedhub/indeedhub' },
-    { id: 'dwn', title: 'Decentralized Web Node', version: '0.4.0', description: 'Own your data with DID-based access control. Sync across devices, sovereign.', icon: '/assets/img/app-icons/dwn.svg', author: 'TBD', dockerImage: 'ghcr.io/tbd54566975/dwn-server:main', repoUrl: 'https://github.com/TBD54566975/dwn-server' },
-    { id: 'nostrudel', title: 'noStrudel', version: '0.40.0', category: 'nostr', description: 'Feature-rich Nostr web client. Browse feeds, post notes, manage relays with NIP-07.', icon: '/assets/img/app-icons/nostrudel.svg', author: 'hzrd149', dockerImage: '', repoUrl: 'https://github.com/hzrd149/nostrudel', webUrl: 'https://nostrudel.ninja' },
-    { id: 'nostr-rs-relay', title: 'Nostr Relay', version: '0.9.0', category: 'nostr', description: 'Your own Nostr relay. Store events locally, relay for friends, publish over Tor.', icon: '/assets/img/app-icons/nostr-rs-relay.svg', author: 'scsiblade', dockerImage: 'docker.io/scsiblade/nostr-rs-relay:0.9.0', repoUrl: 'https://sr.ht/~gheartsfield/nostr-rs-relay/' },
-    { id: 'botfights', title: 'BotFights', version: '1.0.0', description: 'AI bot arena — build, train, and battle autonomous agents in strategy tournaments.', icon: '/assets/img/app-icons/botfights.svg', author: 'BotFights', dockerImage: '', repoUrl: 'https://botfights.net', webUrl: 'https://botfights.net' },
-    { id: 'nwnn', title: 'Next Web News Network', version: '1.0.0', category: 'l484', description: 'Decentralized news aggregator. Community-curated Bitcoin and sovereignty content.', icon: '/assets/img/app-icons/nwnn.png', author: 'L484', dockerImage: '', repoUrl: 'https://nwnn.l484.com', webUrl: 'https://nwnn.l484.com' },
-    { id: '484-kitchen', title: '484 Kitchen', version: '1.0.0', category: 'l484', description: 'K484 application platform for the L484 network.', icon: '/assets/img/app-icons/484-kitchen.png', author: 'L484', dockerImage: '', repoUrl: 'https://484.kitchen', webUrl: 'https://484.kitchen' },
-    { id: 'call-the-operator', title: 'Call the Operator', version: '1.0.0', category: 'l484', description: 'Escape the Matrix — explore decentralized alternatives and reclaim sovereignty.', icon: '/assets/img/app-icons/call-the-operator.png', author: 'TX1138', dockerImage: '', repoUrl: 'https://cta.tx1138.com', webUrl: 'https://cta.tx1138.com' },
-    { id: 'arch-presentation', title: 'Arch Presentation', version: '1.0.0', category: 'l484', description: 'The Future of Decentralized Infrastructure — interactive Archipelago presentation.', icon: '/assets/img/app-icons/arch-presentation.png', author: 'L484', dockerImage: '', repoUrl: 'https://present.l484.com', webUrl: 'https://present.l484.com' },
-    { id: 'syntropy-institute', title: 'Syntropy Institute', version: '1.0.0', category: 'l484', description: 'Medicine Reimagined — Manual Kinetics, Syntropy Frequency, and concierge protocols.', icon: '/assets/img/app-icons/syntropy-institute.png', author: 'Syntropy Institute', dockerImage: '', repoUrl: 'https://syntropy.institute', webUrl: 'https://syntropy.institute' },
-    { id: 't-zero', title: 'T-0', version: '1.0.0', category: 'l484', description: 'Documentary series exploring decentralization and the mavericks building the ungovernable future.', icon: '/assets/img/app-icons/t-zero.png', author: 'T-0', dockerImage: '', repoUrl: 'https://teeminuszero.net', webUrl: 'https://teeminuszero.net' },
-  ]
-}
-
-onMounted(() => {
-  discoverAnimationDone = true
-  if (communityApps.value.length === 0 && !loadingCommunity.value) {
-    loadCommunityMarketplace()
+function handleInstall(app: MarketplaceApp) {
+  if (app.source === 'local') {
+    installApp(app)
+  } else {
+    installCommunityApp(app)
   }
-})
-
-async function loadCommunityMarketplace() {
-  loadingCommunity.value = true
-  communityError.value = ''
-  if (import.meta.env.DEV) console.log('Loading Docker-based app marketplace')
-  communityApps.value = getCuratedAppList()
-  loadingCommunity.value = false
 }
 
 function viewAppDetails(app: MarketplaceApp) {
@@ -886,31 +456,20 @@ async function installCommunityApp(app: MarketplaceApp) {
   }
 }
 
-function handleImageError(event: Event) {
-  const img = event.target as HTMLImageElement
-  img.src = '/assets/img/logo-archipelago.svg'
+
+onMounted(() => {
+  discoverAnimationDone = true
+  if (communityApps.value.length === 0 && !loadingCommunity.value) {
+    loadCommunityMarketplace()
+  }
+})
+
+async function loadCommunityMarketplace() {
+  loadingCommunity.value = true
+  communityError.value = ''
+  if (import.meta.env.DEV) console.log('Loading Docker-based app marketplace')
+  communityApps.value = getCuratedAppList()
+  loadingCommunity.value = false
 }
 </script>
 
-<style scoped>
-.line-clamp-3 {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.discover-shimmer-bg {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 100%);
-  background-size: 200% 100%;
-  animation: shimmer 2s ease-in-out infinite;
-  border-radius: inherit;
-}
-
-@keyframes shimmer {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-</style>

neode-ui/src/views/Federation.vue

@@ -1,64 +1,19 @@
 <template>
   <div class="pb-6">
-    <div class="mb-6">
-      <button
-        @click="router.push('/dashboard/web5')"
-        class="flex items-center gap-2 text-white/50 hover:text-white/80 transition-colors text-sm mb-4"
-      >
-        <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="M15 19l-7-7 7-7" />
-        </svg>
-        Back to Web5
-      </button>
-      <div class="flex items-start justify-between gap-4">
-        <div>
-          <h1 class="text-3xl font-bold text-white mb-2">Federation & Peers</h1>
-          <p class="text-white/70">Connect, sync, and share with trusted nodes</p>
-        </div>
-        <!-- Your Node DID — top right card -->
-        <div v-if="selfDid" class="hidden md:block shrink-0">
-          <div class="glass-card px-4 py-3 flex items-center gap-3">
-            <div class="min-w-0">
-              <p class="text-[10px] text-white/40 mb-0.5">{{ appStore.serverName }}</p>
-              <p class="text-xs text-white/80 font-mono cursor-pointer" :title="selfDid" @click="copyDid">{{ didCopied ? 'Copied!' : shortDid(selfDid) }}</p>
-            </div>
-            <button @click="copyDid" class="glass-button px-2.5 py-1 rounded text-[10px]">{{ didCopied ? 'Copied!' : 'Copy' }}</button>
-            <button @click="showRotateModal = true" class="glass-button px-2.5 py-1 rounded text-[10px] text-orange-300">Rotate</button>
-          </div>
-        </div>
-      </div>
-      <!-- Mobile: DID below title -->
-      <div v-if="selfDid" class="md:hidden glass-card px-4 py-3 mt-3 flex items-center gap-3">
-        <div class="min-w-0 flex-1">
-          <p class="text-[10px] text-white/40 mb-0.5">{{ appStore.serverName }}</p>
-          <p class="text-xs text-white/80 font-mono truncate cursor-pointer" :title="selfDid" @click="copyDid">{{ didCopied ? 'Copied!' : shortDid(selfDid) }}</p>
-        </div>
-        <button @click="copyDid" class="glass-button px-2.5 py-1 rounded text-[10px]">{{ didCopied ? 'Copied!' : 'Copy' }}</button>
-        <button @click="showRotateModal = true" class="glass-button px-2.5 py-1 rounded text-[10px] text-orange-300">Rotate</button>
-      </div>
-    </div>
+    <FederationHeader
+      :self-did="selfDid"
+      :server-name="appStore.serverName"
+      @rotate="showRotateModal = true"
+    />
 
-    <!-- Rotate DID Modal -->
-    <Teleport to="body">
-      <Transition name="modal">
-        <div v-if="showRotateModal" class="fixed inset-0 z-[3000] flex items-center justify-center p-4" @click.self="showRotateModal = false">
-          <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
-          <div class="glass-card p-6 max-w-md w-full relative z-10">
-            <h3 class="text-lg font-semibold text-white mb-2">Rotate Node DID</h3>
-            <p class="text-sm text-white/60 mb-4">This generates a new identity keypair and notifies all federated peers. Your old DID will no longer be valid.</p>
-            <input v-model="rotatePassword" type="password" placeholder="Enter your password to confirm" class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-orange-500/50 mb-4" />
-            <p v-if="rotateError" class="text-red-400 text-xs mb-3">{{ rotateError }}</p>
-            <p v-if="rotateSuccess" class="text-green-400 text-xs mb-3">{{ rotateSuccess }}</p>
-            <div class="flex gap-3">
-              <button @click="showRotateModal = false; rotatePassword = ''; rotateError = ''; rotateSuccess = ''" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">Cancel</button>
-              <button @click="rotateDid" :disabled="rotatingDid || !rotatePassword" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm font-medium bg-orange-500/20 border-orange-500/30 disabled:opacity-50">
-                {{ rotatingDid ? 'Rotating...' : 'Rotate & Notify Peers' }}
-              </button>
-            </div>
-          </div>
-        </div>
-      </Transition>
-    </Teleport>
+    <RotateDidModal
+      :visible="showRotateModal"
+      :rotating="rotatingDid"
+      :error="rotateError"
+      :success="rotateSuccess"
+      @close="showRotateModal = false; rotateError = ''; rotateSuccess = ''"
+      @rotate="rotateDid"
+    />
 
     <!-- View Tabs -->
     <div v-if="nodes.length > 0" class="flex gap-1 mb-6 p-1 bg-black/20 rounded-lg w-fit">
@@ -79,488 +34,92 @@
     </div>
 
     <template v-if="activeView === 'list'">
-    <!-- Quick Actions -->
-    <div class="glass-card p-6 mb-6">
-      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-        <!-- Link Your Nodes (Trusted) -->
-        <div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
-          <div class="flex items-center gap-3 min-w-0">
-            <svg class="w-5 h-5 text-green-400 shrink-0" 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="min-w-0">
-              <p class="text-sm font-medium text-white">Link Your Nodes</p>
-              <p class="text-xs text-white/60">Full trust, sync everything</p>
-            </div>
-          </div>
-          <button
-            @click="inviteType = 'trusted'; generateInvite()"
-            class="w-fit px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
-            :disabled="generatingInvite"
-          >
-            {{ generatingInvite && inviteType === 'trusted' ? 'Generating...' : 'Generate Code' }}
-          </button>
-        </div>
-
-        <!-- Invite a Peer (Observer) -->
-        <div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
-          <div class="flex items-center gap-3 min-w-0">
-            <svg class="w-5 h-5 text-orange-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-            </svg>
-            <div class="min-w-0">
-              <p class="text-sm font-medium text-white">Invite a Peer</p>
-              <p class="text-xs text-white/60">Share public content</p>
-            </div>
-          </div>
-          <button
-            @click="inviteType = 'observer'; generateInvite()"
-            class="w-fit px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
-            :disabled="generatingInvite"
-          >
-            {{ generatingInvite && inviteType === 'observer' ? 'Generating...' : 'Generate Code' }}
-          </button>
-        </div>
-
-        <!-- Join (accept code) -->
-        <div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
-          <div class="flex items-center gap-3 min-w-0">
-            <svg class="w-5 h-5 text-blue-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
-            </svg>
-            <div class="min-w-0">
-              <p class="text-sm font-medium text-white">Join</p>
-              <p class="text-xs text-white/60">Accept an invite code</p>
-            </div>
-          </div>
-          <button
-            @click="showJoinModal = true"
-            class="w-fit px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
-          >
-            Enter Code
-          </button>
-        </div>
-
-        <!-- Sync State -->
-        <div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
-          <div class="flex items-center gap-3 min-w-0">
-            <svg class="w-5 h-5 text-green-400 shrink-0" 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>
-            <div class="min-w-0">
-              <p class="text-sm font-medium text-white">Sync</p>
-              <p class="text-xs text-white/60">Refresh all node states</p>
-            </div>
-          </div>
-          <button
-            @click="syncAll"
-            class="w-fit px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
-            :disabled="syncing"
-          >
-            {{ syncing ? 'Syncing...' : 'Sync Now' }}
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Invite Code Modal -->
-    <Teleport to="body">
-      <Transition name="modal">
-        <div v-if="inviteCode" class="fixed inset-0 z-[3000] flex items-center justify-center p-4" @click.self="inviteCode = ''">
-          <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
-          <div class="glass-card p-6 max-w-md w-full relative z-10">
-            <div class="flex items-center justify-between mb-4">
-              <h2 class="text-lg font-semibold text-white">{{ inviteType === 'trusted' ? 'Link Your Nodes — Invite Code' : 'Peer Invite Code' }}</h2>
-              <button @click="inviteCode = ''" class="text-white/40 hover:text-white/70 transition-colors">
-                <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>
-            </div>
-            <p class="text-xs text-white/60 mb-3">Share this code with the node you want to federate with. It can only be used once.</p>
-            <div class="bg-black/30 rounded-lg p-4 font-mono text-xs text-orange-300 break-all select-all">{{ inviteCode }}</div>
-            <button
-              @click="copyInviteCode"
-              class="mt-3 px-4 py-2 glass-button rounded text-sm text-white/90 hover:text-white transition-colors"
-            >
-              {{ copiedInvite ? 'Copied' : 'Copy to Clipboard' }}
-            </button>
-          </div>
-        </div>
-      </Transition>
-    </Teleport>
-
-    <!-- Sync Results -->
-    <div v-if="syncResults.length > 0" class="glass-card p-6 mb-6">
-      <div class="flex items-center justify-between mb-4">
-        <h2 class="text-lg font-semibold text-white">Sync Results</h2>
-        <button @click="syncResults = []" class="text-white/40 hover:text-white/70 transition-colors text-sm">Dismiss</button>
-      </div>
-      <div class="space-y-2">
-        <div v-for="r in syncResults" :key="r.did" class="flex items-center gap-3 p-3 bg-white/5 rounded-lg">
-          <div class="w-2 h-2 rounded-full shrink-0" :class="r.status === 'ok' ? 'bg-green-400' : 'bg-red-400'"></div>
-          <span class="text-sm text-white/80 truncate" :title="r.did">{{ nodeNameFromDid(r.did) }}</span>
-          <span v-if="r.status === 'ok'" class="text-xs text-green-400">{{ r.apps }} apps</span>
-          <span v-else class="text-xs text-red-400 truncate">{{ r.error }}</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- Error Display -->
-    <div v-if="error" class="glass-card p-4 mb-6 border-red-400/30">
-      <p class="text-sm text-red-400">{{ error }}</p>
-    </div>
-
-    <!-- Two-column: Your Nodes + Peers -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-
-    <!-- Your Nodes (Trusted) -->
-    <div class="glass-card p-6 max-h-[60vh] flex flex-col">
-      <h2 class="text-lg font-semibold text-white mb-4">Your Nodes <span v-if="trustedNodes.length > 0" class="text-sm font-normal text-white/50">({{ trustedNodes.length }})</span></h2>
-
-      <div v-if="loading" class="flex items-center gap-3 py-8 justify-center">
-        <div class="w-5 h-5 border-2 border-white/20 border-t-orange-400 rounded-full animate-spin"></div>
-        <span class="text-white/60 text-sm">Loading nodes...</span>
-      </div>
-
-      <div v-else-if="nodes.length === 0" class="text-center py-12">
-        <svg class="w-16 h-16 text-white/20 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
-        <p class="text-white/50 text-sm mb-2">No federated nodes yet</p>
-        <p class="text-white/30 text-xs">Generate an invite code or join an existing federation</p>
-      </div>
-
-      <div v-else class="space-y-3 overflow-y-auto">
-        <div
-          v-for="node in trustedNodes"
-          :key="node.did"
-          class="bg-black/20 rounded-xl border border-white/10 p-4 cursor-pointer hover:border-white/20 transition-colors"
-          @click="selectedNode = node"
-        >
-          <div class="flex items-center justify-between mb-2">
-            <div class="flex items-center gap-3 min-w-0">
-              <div class="w-2.5 h-2.5 rounded-full shrink-0" :class="isOnline(node) ? 'bg-green-400' : 'bg-white/30'"></div>
-              <span class="text-sm font-medium text-white truncate" :title="node.did">{{ nodeName(node) }}</span>
-              <span
-                class="text-xs shrink-0"
-                :class="nodeTransportIcon(node.did).color"
-                :title="'Transport: ' + nodeTransportIcon(node.did).label"
-              >{{ nodeTransportIcon(node.did).icon }}</span>
-            </div>
-            <span
-              class="text-xs px-2 py-0.5 rounded-full shrink-0"
-              :class="trustBadgeClass(node.trust_level)"
-            >{{ node.trust_level }}</span>
-          </div>
-
-          <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs text-white/50">
-            <div>
-              <span class="text-white/30">Apps:</span>
-              {{ node.last_state?.apps?.length ?? '--' }}
-            </div>
-            <div>
-              <span class="text-white/30">CPU:</span>
-              {{ node.last_state?.cpu_usage_percent != null ? node.last_state.cpu_usage_percent.toFixed(1) + '%' : '--' }}
-            </div>
-            <div class="flex items-center gap-1">
-              <span class="text-white/30">DWN:</span>
-              <span class="w-1.5 h-1.5 rounded-full" :class="dwnSyncDotClass"></span>
-            </div>
-            <div>
-              <span class="text-white/30">Seen:</span>
-              {{ node.last_seen ? timeAgo(node.last_seen) : 'never' }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Peers (Observer level) -->
-    <div class="glass-card p-6 max-h-[60vh] flex flex-col">
-      <div class="flex items-center justify-between mb-4">
-        <h2 class="text-lg font-semibold text-white">Peers <span v-if="peerNodes.length > 0" class="text-sm font-normal text-white/50">({{ peerNodes.length }})</span></h2>
-        <button
-          v-if="nodes.some(n => !isOnline(n) && n.last_seen === 'never')"
-          @click="cleanupDeadNodes"
-          :disabled="cleaningNodes"
-          class="glass-button px-3 py-1.5 rounded-lg text-xs text-red-300"
-        >
-          {{ cleaningNodes ? 'Removing...' : 'Remove Dead Nodes' }}
-        </button>
-      </div>
-      <div v-if="peerNodes.length === 0" class="text-center py-6">
-        <p class="text-white/50 text-sm">No peers yet</p>
-        <p class="text-white/30 text-xs mt-1">Invite a peer to share public content</p>
-      </div>
-      <div v-else class="space-y-3 overflow-y-auto">
-        <div
-          v-for="node in peerNodes"
-          :key="node.did"
-          class="bg-black/20 rounded-xl border border-white/10 p-4 cursor-pointer hover:border-white/20 transition-colors"
-          @click="selectedNode = node"
-        >
-          <div class="flex items-center justify-between mb-2">
-            <div class="flex items-center gap-3 min-w-0">
-              <div class="w-2.5 h-2.5 rounded-full shrink-0" :class="isOnline(node) ? 'bg-green-400' : 'bg-white/30'"></div>
-              <span class="text-sm font-medium text-white truncate" :title="node.did">{{ nodeName(node) }}</span>
-            </div>
-            <span class="text-xs px-2 py-0.5 rounded-full shrink-0" :class="trustBadgeClass(node.trust_level)">{{ node.trust_level }}</span>
-          </div>
-          <div class="text-xs text-white/40">
-            <span>Seen: {{ node.last_seen ? formatTimeAgo(node.last_seen) : 'never' }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    </div><!-- /grid -->
+      <QuickActions
+        :generating-invite="generatingInvite"
+        :invite-type="inviteType"
+        :invite-code="inviteCode"
+        :syncing="syncing"
+        @generate-invite="handleGenerateInvite"
+        @show-join="showJoinModal = true"
+        @sync="syncAll"
+        @clear-invite="inviteCode = ''"
+      />
 
+      <NodeList
+        :nodes="nodes"
+        :loading="loading"
+        :error="error"
+        :sync-results="syncResults"
+        :dwn-sync-dot-class="dwnSyncDotClass"
+        :cleaning-nodes="cleaningNodes"
+        @select-node="selectedNode = $event"
+        @clear-sync-results="syncResults = []"
+        @cleanup-dead="cleanupDeadNodes"
+      />
     </template>
 
-    <!-- Node Detail Modal -->
-    <div v-if="selectedNode" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md" @click.self="selectedNode = null; confirmRemove = false">
-      <div class="glass-card p-6 w-full max-w-lg max-h-[80vh] overflow-y-auto">
-        <div class="flex items-center justify-between mb-6">
-          <h2 class="text-xl font-semibold text-white">Node Details</h2>
-          <button @click="selectedNode = null; confirmRemove = false" class="text-white/40 hover:text-white/70 transition-colors">
-            <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>
-        </div>
-
-        <div class="space-y-4">
-          <div class="bg-white/5 rounded-lg p-3">
-            <p class="text-xs text-white/40 mb-1">DID</p>
-            <p class="text-sm text-white/80 font-mono break-all">{{ selectedNode.did }}</p>
-          </div>
-          <div class="bg-white/5 rounded-lg p-3">
-            <p class="text-xs text-white/40 mb-1">Onion Address</p>
-            <p v-if="selectedNode.trust_level === 'trusted'" class="text-sm text-white/80 font-mono break-all">{{ selectedNode.onion }}</p>
-            <p v-else class="text-sm text-white/30 italic">Not visible to peers</p>
-          </div>
-          <div class="bg-white/5 rounded-lg p-3">
-            <p class="text-xs text-white/40 mb-1">Trust Level</p>
-            <div class="flex items-center gap-2 mt-1">
-              <select
-                :value="selectedNode.trust_level"
-                @change="changeTrust(selectedNode.did, ($event.target as HTMLSelectElement).value)"
-                class="bg-black/30 text-white text-sm rounded px-2 py-1 border border-white/10"
-              >
-                <option value="trusted">Trusted</option>
-                <option value="observer">Observer</option>
-                <option value="untrusted">Blocked</option>
-              </select>
-            </div>
-          </div>
-          <div class="bg-white/5 rounded-lg p-3">
-            <p class="text-xs text-white/40 mb-1">Added</p>
-            <p class="text-sm text-white/80">{{ selectedNode.added_at }}</p>
-          </div>
-
-          <div v-if="selectedNode.trust_level === 'trusted' && selectedNode.last_state" class="bg-white/5 rounded-lg p-3">
-            <p class="text-xs text-white/40 mb-2">Resource Usage</p>
-            <div class="grid grid-cols-2 gap-2 text-sm text-white/70">
-              <div>CPU: {{ selectedNode.last_state.cpu_usage_percent?.toFixed(1) ?? '--' }}%</div>
-              <div>Uptime: {{ selectedNode.last_state.uptime_secs ? formatUptime(selectedNode.last_state.uptime_secs) : '--' }}</div>
-              <div>RAM: {{ formatBytes(selectedNode.last_state.mem_used_bytes) }} / {{ formatBytes(selectedNode.last_state.mem_total_bytes) }}</div>
-              <div>Disk: {{ formatBytes(selectedNode.last_state.disk_used_bytes) }} / {{ formatBytes(selectedNode.last_state.disk_total_bytes) }}</div>
-            </div>
-          </div>
-
-          <div v-if="selectedNode.last_state?.apps?.length && selectedNode.trust_level === 'trusted'" class="bg-white/5 rounded-lg p-3">
-            <p class="text-xs text-white/40 mb-2">Apps ({{ selectedNode.last_state.apps.length }})</p>
-            <div class="space-y-1">
-              <div v-for="app in selectedNode.last_state.apps" :key="app.id" class="flex items-center justify-between text-sm">
-                <span class="text-white/80">{{ app.id }}</span>
-                <span class="text-xs" :class="app.status === 'running' ? 'text-green-400' : 'text-white/40'">{{ app.status }}</span>
-              </div>
-            </div>
-          </div>
-
-          <!-- Deploy App (trusted only) -->
-          <div v-if="selectedNode.trust_level === 'trusted'" class="bg-white/5 rounded-lg p-3">
-            <p class="text-xs text-white/40 mb-2">Deploy App</p>
-            <div class="flex gap-2">
-              <input
-                v-model="deployAppId"
-                placeholder="App ID (e.g. bitcoin)"
-                class="flex-1 bg-black/30 text-white text-sm rounded px-2 py-1.5 border border-white/10 focus:border-orange-400/50 focus:outline-none"
-              />
-              <button
-                @click="deployApp(selectedNode.did)"
-                class="px-3 py-1.5 glass-button rounded text-xs text-white/90 font-medium disabled:opacity-50"
-                :disabled="deploying || !deployAppId.trim()"
-              >
-                {{ deploying ? 'Deploying...' : 'Deploy' }}
-              </button>
-            </div>
-            <p v-if="deployResult" class="text-xs mt-2" :class="deployResult.startsWith('Error') ? 'text-red-400' : 'text-green-400'">{{ deployResult }}</p>
-          </div>
-
-          <!-- DWN Sync -->
-          <div class="bg-white/5 rounded-lg p-3">
-            <div class="flex items-center justify-between mb-2">
-              <p class="text-xs text-white/40">DWN Sync</p>
-              <div class="flex items-center gap-1.5">
-                <span class="w-1.5 h-1.5 rounded-full" :class="dwnSyncDotClass"></span>
-                <span class="text-xs text-white/50">{{ dwnSyncLabel }}</span>
-              </div>
-            </div>
-            <div class="grid grid-cols-2 gap-2 text-sm text-white/70 mb-3">
-              <div><span class="text-white/30">Messages:</span> {{ dwnStatus?.message_count ?? '--' }}</div>
-              <div><span class="text-white/30">Last sync:</span> {{ dwnStatus?.last_sync ? timeAgo(dwnStatus.last_sync) : 'never' }}</div>
-            </div>
-            <button
-              @click="triggerDwnSync"
-              class="px-3 py-1.5 glass-button rounded text-xs text-white/90 font-medium disabled:opacity-50"
-              :disabled="dwnSyncing"
-            >
-              {{ dwnSyncing ? 'Syncing...' : 'Sync Now' }}
-            </button>
-          </div>
-
-          <div v-if="!confirmRemove">
-            <button
-              @click="confirmRemove = true"
-              class="w-full mt-4 px-4 py-2 rounded text-sm glass-button glass-button-danger transition-colors"
-            >
-              Remove from Federation
-            </button>
-          </div>
-          <div v-else class="mt-4 p-3 bg-red-400/10 rounded-lg border border-red-400/20">
-            <p class="text-sm text-red-400 mb-3">Are you sure? This node will be removed from your federation.</p>
-            <div class="flex gap-3">
-              <button
-                @click="confirmRemove = false"
-                class="flex-1 px-3 py-1.5 glass-button rounded text-sm text-white/70"
-              >Cancel</button>
-              <button
-                @click="removeNode(selectedNode!.did)"
-                class="flex-1 px-3 py-1.5 rounded text-sm glass-button glass-button-danger transition-colors font-medium"
-              >Confirm Remove</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Join Modal -->
-    <Teleport to="body">
-      <Transition name="modal">
-        <div v-if="showJoinModal" class="fixed inset-0 z-[3000] flex items-center justify-center p-4" @click.self="showJoinModal = false">
-          <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
-          <div class="glass-card p-6 max-w-md w-full relative z-10">
-            <div class="flex items-center justify-between mb-6">
-              <h2 class="text-xl font-semibold text-white">Join Federation</h2>
-              <button @click="showJoinModal = false" class="text-white/40 hover:text-white/70 transition-colors">
-                <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>
-            </div>
-
-            <p class="text-sm text-white/60 mb-4">Paste the invite code from the node you want to federate with.</p>
-
-            <textarea
-              v-model="joinCode"
-              placeholder="fed1:..."
-              rows="3"
-              class="w-full bg-black/30 text-white text-sm rounded-lg p-3 border border-white/10 focus:border-orange-400/50 focus:outline-none font-mono resize-none"
-            ></textarea>
-
-            <div v-if="joinError" class="mt-3 text-sm text-red-400">{{ joinError }}</div>
-            <div v-if="joinSuccess" class="mt-3 text-sm text-green-400">Successfully joined federation</div>
-
-            <div class="flex gap-3 mt-4">
-              <button
-                @click="showJoinModal = false"
-                class="flex-1 px-4 py-2 glass-button rounded text-sm text-white/70"
-              >Cancel</button>
-              <button
-                @click="joinFederation"
-                class="flex-1 px-4 py-2 glass-button rounded text-sm text-white font-medium disabled:opacity-50"
-                :disabled="joining || !joinCode.trim()"
-              >
-                {{ joining ? 'Joining...' : 'Join' }}
-              </button>
-            </div>
-          </div>
-        </div>
-      </Transition>
-    </Teleport>
+    <NodeDetailModal
+      :node="selectedNode"
+      :dwn-sync-dot-class="dwnSyncDotClass"
+      :dwn-sync-label="dwnSyncLabel"
+      :dwn-message-count="String(dwnStatus?.message_count ?? '--')"
+      :dwn-last-sync="dwnStatus?.last_sync ? timeAgo(dwnStatus.last_sync) : 'never'"
+      :dwn-syncing="dwnSyncing"
+      :deploying="deploying"
+      :deploy-result="deployResult"
+      @close="selectedNode = null"
+      @change-trust="changeTrust"
+      @remove-node="removeNode"
+      @deploy-app="deployApp"
+      @dwn-sync="triggerDwnSync"
+    />
 
+    <JoinModal
+      :visible="showJoinModal"
+      :joining="joining"
+      :error="joinError"
+      :success="joinSuccess"
+      @close="showJoinModal = false"
+      @join="joinFederation"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
 import { rpcClient } from '@/api/rpc-client'
 import { useTransportStore } from '@/stores/transport'
 import { useAppStore } from '@/stores/app'
 import NetworkMap from '@/components/federation/NetworkMap.vue'
+import FederationHeader from './federation/FederationHeader.vue'
+import RotateDidModal from './federation/RotateDidModal.vue'
+import QuickActions from './federation/QuickActions.vue'
+import NodeList from './federation/NodeList.vue'
+import NodeDetailModal from './federation/NodeDetailModal.vue'
+import JoinModal from './federation/JoinModal.vue'
+import type { FederatedNode, DwnStatus, SyncResult } from './federation/types'
+import { nodeName, timeAgo } from './federation/utils'
 
-const router = useRouter()
 const transportStore = useTransportStore()
 const appStore = useAppStore()
 
-interface AppStatus {
-  id: string
-  status: string
-  version?: string
-}
-
-interface NodeState {
-  timestamp: string
-  apps: AppStatus[]
-  cpu_usage_percent?: number
-  mem_used_bytes?: number
-  mem_total_bytes?: number
-  disk_used_bytes?: number
-  disk_total_bytes?: number
-  uptime_secs?: number
-  tor_active?: boolean
-}
-
-interface FederatedNode {
-  did: string
-  pubkey: string
-  onion: string
-  trust_level: string
-  added_at: string
-  name?: string
-  last_seen?: string
-  last_state?: NodeState
-}
-
 const nodes = ref<FederatedNode[]>([])
 const loading = ref(true)
 const error = ref('')
 const selectedNode = ref<FederatedNode | null>(null)
 const inviteType = ref<'trusted' | 'observer'>('trusted')
 
-// Split nodes into Your Nodes (trusted) and Peers (observer/untrusted)
-const trustedNodes = computed(() => nodes.value.filter(n => n.trust_level === 'trusted'))
-const peerNodes = computed(() => nodes.value.filter(n => n.trust_level !== 'trusted'))
-
 const inviteCode = ref('')
 const generatingInvite = ref(false)
-const copiedInvite = ref(false)
 
 const showJoinModal = ref(false)
-const joinCode = ref('')
 const joining = ref(false)
 const joinError = ref('')
 const joinSuccess = ref(false)
 
 const syncing = ref(false)
-const syncResults = ref<Array<{ did: string; status: string; apps?: number; error?: string }>>([])
+const syncResults = ref<SyncResult[]>([])
 
-const confirmRemove = ref(false)
-
-const deployAppId = ref('')
 const deploying = ref(false)
 const deployResult = ref('')
 
@@ -598,7 +157,7 @@ const mapNodes = computed(() => {
       did: node.did,
       label: nodeName(node),
       trust_level: node.trust_level as 'trusted' | 'observer' | 'untrusted',
-      online: isOnline(node),
+      online: isOnlineCheck(node),
       app_count: node.last_state?.apps?.length ?? 0,
       is_self: false,
     })
@@ -614,13 +173,6 @@ const mapLinks = computed(() => {
   }))
 })
 
-interface DwnStatus {
-  sync_status: string
-  last_sync: string | null
-  messages_synced: number
-  message_count: number
-}
-
 const dwnStatus = ref<DwnStatus | null>(null)
 const dwnSyncing = ref(false)
 
@@ -644,6 +196,22 @@ const dwnSyncLabel = computed(() => {
   }
 })
 
+// DID rotation
+const showRotateModal = ref(false)
+const rotatingDid = ref(false)
+const rotateError = ref('')
+const rotateSuccess = ref('')
+
+// Dead node cleanup
+const cleaningNodes = ref(false)
+
+function isOnlineCheck(node: FederatedNode): boolean {
+  if (!node.last_seen) return false
+  const lastSeen = new Date(node.last_seen).getTime()
+  const tenMinutesAgo = Date.now() - 10 * 60 * 1000
+  return lastSeen > tenMinutesAgo
+}
+
 async function loadNodes() {
   try {
     loading.value = true
@@ -656,6 +224,11 @@ async function loadNodes() {
   }
 }
 
+function handleGenerateInvite(type: 'trusted' | 'observer') {
+  inviteType.value = type
+  generateInvite()
+}
+
 async function generateInvite() {
   try {
     generatingInvite.value = true
@@ -669,31 +242,13 @@ async function generateInvite() {
   }
 }
 
-async function copyInviteCode() {
-  try {
-    await window.navigator.clipboard.writeText(inviteCode.value)
-  } catch {
-    const ta = document.createElement('textarea')
-    ta.value = inviteCode.value
-    ta.style.position = 'fixed'
-    ta.style.opacity = '0'
-    document.body.appendChild(ta)
-    ta.select()
-    document.execCommand('copy')
-    document.body.removeChild(ta)
-  }
-  copiedInvite.value = true
-  setTimeout(() => { copiedInvite.value = false }, 2000)
-}
-
-async function joinFederation() {
+async function joinFederation(code: string) {
   try {
     joining.value = true
     joinError.value = ''
     joinSuccess.value = false
-    await rpcClient.federationJoin(joinCode.value.trim())
+    await rpcClient.federationJoin(code)
     joinSuccess.value = true
-    joinCode.value = ''
     await loadNodes()
     setTimeout(() => { showJoinModal.value = false; joinSuccess.value = false }, 1500)
   } catch (e) {
@@ -710,7 +265,7 @@ async function syncAll() {
     syncResults.value = []
     const result = await rpcClient.call<{
       synced: number; failed: number;
-      results: Array<{ did: string; status: string; apps?: number; error?: string }>
+      results: SyncResult[]
     }>({ method: 'federation.sync-state', timeout: 180000 })
     syncResults.value = result.results
     await loadNodes()
@@ -736,25 +291,19 @@ async function changeTrust(did: string, level: string) {
 async function removeNode(did: string) {
   try {
     await rpcClient.federationRemoveNode(did)
-    confirmRemove.value = false
     selectedNode.value = null
     await loadNodes()
   } catch (e) {
-    confirmRemove.value = false
     error.value = e instanceof Error ? e.message : 'Failed to remove node'
   }
 }
 
-async function deployApp(did: string) {
+async function deployApp(did: string, appId: string) {
   try {
     deploying.value = true
     deployResult.value = ''
-    await rpcClient.federationDeployApp({
-      did,
-      appId: deployAppId.value.trim(),
-    })
-    deployResult.value = `Successfully deployed ${deployAppId.value} to remote node`
-    deployAppId.value = ''
+    await rpcClient.federationDeployApp({ did, appId })
+    deployResult.value = `Successfully deployed ${appId} to remote node`
   } catch (e) {
     deployResult.value = `Error: ${e instanceof Error ? e.message : 'Deploy failed'}`
   } finally {
@@ -783,59 +332,10 @@ async function triggerDwnSync() {
   }
 }
 
-function isOnline(node: FederatedNode): boolean {
-  if (!node.last_seen) return false
-  const lastSeen = new Date(node.last_seen).getTime()
-  const tenMinutesAgo = Date.now() - 10 * 60 * 1000
-  return lastSeen > tenMinutesAgo
-}
-
-function shortDid(did: string): string {
-  if (did.length <= 24) return did
-  return did.slice(0, 16) + '...' + did.slice(-8)
-}
-
-/** User-friendly node display name. Prefers name, falls back to "Node-XXXX" from DID hash. */
-function nodeName(node: { name?: string | null; did: string }): string {
-  if (node.name) return node.name
-  const suffix = node.did.replace(/^did:key:z6Mk/, '').slice(-6).toUpperCase()
-  return `Node-${suffix}`
-}
-
-/** Look up display name from DID (for sync results that only have a DID). */
-function nodeNameFromDid(did: string): string {
-  const node = nodes.value.find(n => n.did === did)
-  if (node) return nodeName(node)
-  const suffix = did.replace(/^did:key:z6Mk/, '').slice(-6).toUpperCase()
-  return `Node-${suffix}`
-}
-
-function timeAgo(iso: string): string {
-  const seconds = Math.floor((Date.now() - new Date(iso).getTime()) / 1000)
-  if (seconds < 60) return 'just now'
-  if (seconds < 3600) return Math.floor(seconds / 60) + 'm ago'
-  if (seconds < 86400) return Math.floor(seconds / 3600) + 'h ago'
-  return Math.floor(seconds / 86400) + 'd ago'
-}
-
-function formatBytes(bytes?: number): string {
-  if (bytes == null || bytes === 0) return '--'
-  const units = ['B', 'KB', 'MB', 'GB', 'TB']
-  let i = 0
-  let val = bytes
-  while (val >= 1024 && i < units.length - 1) {
-    val /= 1024
-    i++
-  }
-  return val.toFixed(1) + ' ' + units[i]
-}
-
-// Dead node cleanup
-const cleaningNodes = ref(false)
 async function cleanupDeadNodes() {
   cleaningNodes.value = true
   try {
-    const deadNodes = nodes.value.filter(n => !isOnline(n) && (!n.last_seen || n.last_seen === 'never'))
+    const deadNodes = nodes.value.filter(n => !isOnlineCheck(n) && (!n.last_seen || n.last_seen === 'never'))
     for (const node of deadNodes) {
       await rpcClient.federationRemoveNode(node.did)
     }
@@ -847,47 +347,20 @@ async function cleanupDeadNodes() {
   }
 }
 
-function formatTimeAgo(iso: string): string {
-  if (!iso || iso === 'never') return 'never'
-  const ms = Date.now() - new Date(iso).getTime()
-  if (ms < 60000) return 'just now'
-  if (ms < 3600000) return `${Math.floor(ms / 60000)}m ago`
-  if (ms < 86400000) return `${Math.floor(ms / 3600000)}h ago`
-  return `${Math.floor(ms / 86400000)}d ago`
-}
-
-// DID rotation
-const showRotateModal = ref(false)
-const rotatePassword = ref('')
-const rotatingDid = ref(false)
-const rotateError = ref('')
-const rotateSuccess = ref('')
-const didCopied = ref(false)
-
-function copyDid() {
-  if (selfDid.value) {
-    navigator.clipboard.writeText(selfDid.value).catch(() => {})
-    didCopied.value = true
-    setTimeout(() => { didCopied.value = false }, 2000)
-  }
-}
-
-async function rotateDid() {
-  if (!rotatePassword.value) return
+async function rotateDid(password: string) {
+  if (!password) return
   rotatingDid.value = true
   rotateError.value = ''
   rotateSuccess.value = ''
   try {
     const result = await rpcClient.call<{
       old_did: string; new_did: string; proof_signature: string; proof_message: string
-    }>({ method: 'node.rotate-did', params: { password: rotatePassword.value } })
+    }>({ method: 'node.rotate-did', params: { password } })
 
     selfDid.value = result.new_did
-    // Sync with Web5 view's localStorage DID
     try { localStorage.setItem('neode_did', result.new_did) } catch { /* noop */ }
     rotateSuccess.value = `DID rotated. Notifying peers...`
 
-    // Notify federation peers
     const notify = await rpcClient.call<{ notified: number; failed: number }>({
       method: 'federation.notify-did-change',
       params: {
@@ -899,7 +372,6 @@ async function rotateDid() {
       timeout: 120000,
     })
     rotateSuccess.value = `DID rotated successfully. ${notify.notified} peers notified${notify.failed > 0 ? `, ${notify.failed} failed` : ''}.`
-    rotatePassword.value = ''
   } catch (err: unknown) {
     rotateError.value = err instanceof Error ? err.message : 'Rotation failed'
   } finally {
@@ -907,35 +379,6 @@ async function rotateDid() {
   }
 }
 
-function formatUptime(secs: number): string {
-  const days = Math.floor(secs / 86400)
-  const hours = Math.floor((secs % 86400) / 3600)
-  if (days > 0) return `${days}d ${hours}h`
-  const mins = Math.floor((secs % 3600) / 60)
-  return `${hours}h ${mins}m`
-}
-
-function trustBadgeClass(level: string): string {
-  switch (level) {
-    case 'trusted': return 'bg-green-400/20 text-green-400'
-    case 'observer': return 'bg-blue-400/20 text-blue-400'
-    case 'untrusted': return 'bg-white/10 text-white/50'
-    default: return 'bg-white/10 text-white/50'
-  }
-}
-
-/** Get the preferred transport icon for a federated node by DID. */
-function nodeTransportIcon(did: string): { icon: string; color: string; label: string } {
-  const peer = transportStore.peers.find(p => p.did === did)
-  if (!peer) return { icon: '?', color: 'text-white/30', label: 'unknown' }
-  switch (peer.preferred_transport) {
-    case 'mesh': return { icon: '📡', color: 'text-orange-400', label: 'mesh' }
-    case 'lan': return { icon: '🌐', color: 'text-green-400', label: 'lan' }
-    case 'tor': return { icon: '🧅', color: 'text-purple-400', label: 'tor' }
-    default: return { icon: '?', color: 'text-white/30', label: 'unknown' }
-  }
-}
-
 onMounted(async () => {
   loadNodes()
   loadDwnStatus()

neode-ui/src/views/Fleet.vue

@@ -5,17 +5,17 @@
       <div class="flex items-center justify-between">
         <div>
           <h1 class="text-3xl font-bold text-white mb-2">Fleet Dashboard</h1>
-          <p class="text-white/70">Beta Telemetry — monitoring {{ nodes.length }} node{{ nodes.length !== 1 ? 's' : '' }}</p>
+          <p class="text-white/70">Beta Telemetry — monitoring {{ fleet.nodes.value.length }} node{{ fleet.nodes.value.length !== 1 ? 's' : '' }}</p>
         </div>
         <div class="flex gap-2 items-center">
-          <span v-if="autoRefresh" class="text-xs text-white/40">Auto-refresh 60s</span>
-          <button class="glass-button text-sm px-4 py-2" @click="toggleAutoRefresh">
-            {{ autoRefresh ? 'Pause' : 'Resume' }}
+          <span v-if="fleet.autoRefresh.value" class="text-xs text-white/40">Auto-refresh 60s</span>
+          <button class="glass-button text-sm px-4 py-2" @click="fleet.toggleAutoRefresh">
+            {{ fleet.autoRefresh.value ? 'Pause' : 'Resume' }}
           </button>
-          <button class="glass-button text-sm px-4 py-2" @click="refreshAll">
+          <button class="glass-button text-sm px-4 py-2" @click="fleet.refreshAll">
             Refresh
           </button>
-          <button class="glass-button text-sm px-4 py-2" @click="exportFleetData">
+          <button class="glass-button text-sm px-4 py-2" @click="fleet.exportFleetData">
             Export JSON
           </button>
         </div>
@@ -25,709 +25,85 @@
     <!-- Mobile Header -->
     <div class="md:hidden mb-6">
       <h1 class="text-2xl font-bold text-white mb-1">Fleet Dashboard</h1>
-      <p class="text-white/60 text-sm mb-3">Monitoring {{ nodes.length }} node{{ nodes.length !== 1 ? 's' : '' }}</p>
+      <p class="text-white/60 text-sm mb-3">Monitoring {{ fleet.nodes.value.length }} node{{ fleet.nodes.value.length !== 1 ? 's' : '' }}</p>
       <div class="flex gap-2">
-        <button class="glass-button text-xs px-3 py-2 flex-1" @click="refreshAll">Refresh</button>
-        <button class="glass-button text-xs px-3 py-2 flex-1" @click="exportFleetData">Export</button>
+        <button class="glass-button text-xs px-3 py-2 flex-1" @click="fleet.refreshAll">Refresh</button>
+        <button class="glass-button text-xs px-3 py-2 flex-1" @click="fleet.exportFleetData">Export</button>
       </div>
     </div>
 
     <!-- Loading State -->
-    <div v-if="loading" class="flex items-center justify-center py-20">
+    <div v-if="fleet.loading.value" class="flex items-center justify-center py-20">
       <div class="text-white/50 text-sm">Loading fleet data...</div>
     </div>
 
     <!-- Error State -->
-    <div v-else-if="errorMessage" class="glass-card p-6 mb-6">
-      <div class="alert-error rounded-lg mb-4">{{ errorMessage }}</div>
-      <button class="glass-button text-sm px-4 py-2" @click="refreshAll">Retry</button>
+    <div v-else-if="fleet.errorMessage.value" class="glass-card p-6 mb-6">
+      <div class="alert-error rounded-lg mb-4">{{ fleet.errorMessage.value }}</div>
+      <button class="glass-button text-sm px-4 py-2" @click="fleet.refreshAll">Retry</button>
     </div>
 
     <!-- Dashboard Content -->
     <template v-else>
-      <!-- Section 1: Fleet Overview Cards -->
-      <div class="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
-        <div class="monitoring-stat-card">
-          <p class="text-xs text-white/50 uppercase tracking-wide">Total Nodes</p>
-          <p class="text-2xl font-bold text-white">{{ nodes.length }}</p>
-          <p class="text-xs text-white/40">
-            <span class="fleet-dot-online"></span> {{ onlineCount }} online
-            <span class="ml-1 fleet-dot-offline"></span> {{ offlineCount }} offline
-          </p>
-        </div>
-        <div class="monitoring-stat-card">
-          <p class="text-xs text-white/50 uppercase tracking-wide">Fleet Health</p>
-          <p class="text-2xl font-bold text-white">{{ fleetHealthPct }}%</p>
-          <p class="text-xs text-white/40">{{ healthyCount }}/{{ nodes.length }} no alerts</p>
-        </div>
-        <div class="monitoring-stat-card">
-          <p class="text-xs text-white/50 uppercase tracking-wide">Avg CPU</p>
-          <p class="text-2xl font-bold text-white" :class="healthTextClass(avgCpu)">{{ avgCpu.toFixed(1) }}%</p>
-          <p class="text-xs text-white/40">across fleet</p>
-        </div>
-        <div class="monitoring-stat-card">
-          <p class="text-xs text-white/50 uppercase tracking-wide">Avg RAM</p>
-          <p class="text-2xl font-bold text-white" :class="healthTextClass(avgMem)">{{ avgMem.toFixed(1) }}%</p>
-          <p class="text-xs text-white/40">across fleet</p>
-        </div>
-        <div class="monitoring-stat-card">
-          <p class="text-xs text-white/50 uppercase tracking-wide">Avg Disk</p>
-          <p class="text-2xl font-bold text-white" :class="healthTextClass(avgDisk)">{{ avgDisk.toFixed(1) }}%</p>
-          <p class="text-xs text-white/40">across fleet</p>
-        </div>
-      </div>
+      <FleetOverviewCards
+        :node-count="fleet.nodes.value.length"
+        :online-count="fleet.onlineCount.value"
+        :offline-count="fleet.offlineCount.value"
+        :fleet-health-pct="fleet.fleetHealthPct.value"
+        :healthy-count="fleet.healthyCount.value"
+        :avg-cpu="fleet.avgCpu.value"
+        :avg-mem="fleet.avgMem.value"
+        :avg-disk="fleet.avgDisk.value"
+      />
 
-      <!-- Section 2: Node Grid -->
-      <div class="glass-card p-5 mb-6">
-        <div class="flex items-center justify-between mb-4">
-          <h3 class="text-sm font-medium text-white/80">Nodes</h3>
-          <div class="flex gap-2">
-            <button
-              v-for="opt in sortOptions"
-              :key="opt.value"
-              class="fleet-sort-btn"
-              :class="{ 'fleet-sort-btn-active': sortBy === opt.value }"
-              @click="sortBy = opt.value"
-            >
-              {{ opt.label }}
-            </button>
-          </div>
-        </div>
+      <FleetNodeGrid
+        :nodes="fleet.nodes.value"
+        :sorted-nodes="fleet.sortedNodes.value"
+        :sort-by="fleet.sortBy.value"
+        :selected-node-id="fleet.selectedNodeId.value"
+        @update:sort-by="fleet.sortBy.value = $event"
+        @select-node="fleet.selectNode"
+      />
 
-        <!-- Empty State -->
-        <div v-if="!nodes.length" class="text-white/40 text-sm py-8 text-center">
-          No nodes reporting. Ensure telemetry is enabled on beta nodes.
-        </div>
+      <FleetAlerts
+        :alerts="fleet.fleetAlerts.value"
+        :alerts-loading="fleet.alertsLoading.value"
+      />
 
-        <div v-else class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-          <div
-            v-for="node in sortedNodes"
-            :key="node.node_id"
-            class="fleet-node-card"
-            :class="{ 'fleet-node-card-selected': selectedNodeId === node.node_id }"
-            @click="selectNode(node.node_id)"
-          >
-            <div class="flex items-center justify-between mb-3">
-              <div class="flex items-center gap-2">
-                <span
-                  class="fleet-status-dot"
-                  :class="isOnline(node.reported_at) ? 'fleet-dot-online' : 'fleet-dot-offline'"
-                ></span>
-                <span class="text-sm font-mono text-white">{{ node.node_id.slice(0, 8) }}</span>
-              </div>
-              <span class="fleet-version-badge">v{{ node.version }}</span>
-            </div>
+      <FleetNodeDetail
+        v-if="fleet.selectedNodeId.value && fleet.selectedNode.value"
+        :node="fleet.selectedNode.value"
+        :node-id="fleet.selectedNodeId.value"
+        :history-loading="fleet.nodeHistoryLoading.value"
+        :history-labels="fleet.nodeHistoryLabels.value"
+        :cpu-datasets="fleet.nodeHistoryCpuDatasets.value"
+        :mem-datasets="fleet.nodeHistoryMemDatasets.value"
+        :disk-datasets="fleet.nodeHistoryDiskDatasets.value"
+        :chart-width="fleet.chartWidth.value"
+        @close="fleet.selectedNodeId.value = null"
+      />
 
-            <div class="space-y-2 mb-3">
-              <div class="fleet-metric-row">
-                <span class="text-xs text-white/50">CPU</span>
-                <div class="fleet-bar-track">
-                  <div
-                    class="fleet-bar-fill"
-                    :class="healthBarClass(node.cpu_pct)"
-                    :style="{ width: Math.min(node.cpu_pct, 100) + '%' }"
-                  ></div>
-                </div>
-                <span class="text-xs text-white/60 w-10 text-right">{{ node.cpu_pct.toFixed(0) }}%</span>
-              </div>
-              <div class="fleet-metric-row">
-                <span class="text-xs text-white/50">RAM</span>
-                <div class="fleet-bar-track">
-                  <div
-                    class="fleet-bar-fill"
-                    :class="healthBarClass(node.mem_pct)"
-                    :style="{ width: Math.min(node.mem_pct, 100) + '%' }"
-                  ></div>
-                </div>
-                <span class="text-xs text-white/60 w-10 text-right">{{ node.mem_pct.toFixed(0) }}%</span>
-              </div>
-              <div class="fleet-metric-row">
-                <span class="text-xs text-white/50">Disk</span>
-                <div class="fleet-bar-track">
-                  <div
-                    class="fleet-bar-fill"
-                    :class="healthBarClass(node.disk_pct)"
-                    :style="{ width: Math.min(node.disk_pct, 100) + '%' }"
-                  ></div>
-                </div>
-                <span class="text-xs text-white/60 w-10 text-right">{{ node.disk_pct.toFixed(0) }}%</span>
-              </div>
-            </div>
-
-            <div class="flex items-center justify-between text-xs text-white/40">
-              <span>{{ node.running_count }}/{{ node.container_count }} containers</span>
-              <span>{{ node.federation_peers }} peers</span>
-            </div>
-            <div class="flex items-center justify-between text-xs text-white/40 mt-1">
-              <span>Up {{ formatUptime(node.uptime_secs) }}</span>
-              <span>{{ timeAgo(node.reported_at) }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Section 3: Fleet Alerts Timeline -->
-      <div class="glass-card p-5 mb-6">
-        <h3 class="text-sm font-medium text-white/80 mb-4">Fleet Alerts</h3>
-
-        <div v-if="alertsLoading" class="text-white/40 text-sm py-4 text-center">
-          Loading alerts...
-        </div>
-        <div v-else-if="!fleetAlerts.length" class="text-white/40 text-sm py-4 text-center">
-          No alerts across the fleet.
-        </div>
-        <div v-else class="space-y-2 max-h-80 overflow-y-auto">
-          <div
-            v-for="(alert, idx) in fleetAlerts.slice(0, 50)"
-            :key="idx"
-            class="flex items-start gap-3 p-3 bg-white/5 rounded-lg"
-          >
-            <span
-              class="inline-block w-2 h-2 rounded-full mt-1.5 flex-shrink-0"
-              :class="alertSeverityDot(alert.rule)"
-            ></span>
-            <div class="flex-1 min-w-0">
-              <div class="flex items-center gap-2 mb-0.5">
-                <span class="fleet-node-badge">{{ alert.node_id.slice(0, 8) }}</span>
-                <span class="text-xs text-white/40">{{ alertTypeLabel(alert.rule) }}</span>
-              </div>
-              <p class="text-sm text-white/80">{{ alert.message }}</p>
-              <p class="text-xs text-white/30 mt-0.5">{{ formatTimestamp(alert.timestamp) }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Section 4: Node Detail (expanded view) -->
-      <div v-if="selectedNodeId && selectedNode" class="glass-card p-5 mb-6">
-        <div class="flex items-center justify-between mb-4">
-          <h3 class="text-sm font-medium text-white/80">
-            Node Detail — <span class="font-mono">{{ selectedNodeId.slice(0, 8) }}</span>
-          </h3>
-          <button class="glass-button text-xs px-3 py-1" @click="selectedNodeId = null">Close</button>
-        </div>
-
-        <!-- Node Info Summary -->
-        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-          <div class="monitoring-stat-card">
-            <p class="text-xs text-white/50 uppercase tracking-wide">Version</p>
-            <p class="text-lg font-bold text-white">v{{ selectedNode.version }}</p>
-          </div>
-          <div class="monitoring-stat-card">
-            <p class="text-xs text-white/50 uppercase tracking-wide">Uptime</p>
-            <p class="text-lg font-bold text-white">{{ formatUptime(selectedNode.uptime_secs) }}</p>
-          </div>
-          <div class="monitoring-stat-card">
-            <p class="text-xs text-white/50 uppercase tracking-wide">CPU Cores</p>
-            <p class="text-lg font-bold text-white">{{ selectedNode.cpu_cores }}</p>
-          </div>
-          <div class="monitoring-stat-card">
-            <p class="text-xs text-white/50 uppercase tracking-wide">Federation Peers</p>
-            <p class="text-lg font-bold text-white">{{ selectedNode.federation_peers }}</p>
-          </div>
-        </div>
-
-        <!-- History Charts -->
-        <div v-if="nodeHistoryLoading" class="text-white/40 text-sm py-4 text-center mb-4">
-          Loading history...
-        </div>
-        <div v-else-if="nodeHistory.length" class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
-          <div class="glass-card p-4">
-            <h4 class="text-xs font-medium text-white/60 mb-2">CPU History</h4>
-            <LineChart
-              :datasets="nodeHistoryCpuDatasets"
-              :labels="nodeHistoryLabels"
-              :width="chartWidth"
-              :height="160"
-              :y-max="100"
-            />
-          </div>
-          <div class="glass-card p-4">
-            <h4 class="text-xs font-medium text-white/60 mb-2">RAM History</h4>
-            <LineChart
-              :datasets="nodeHistoryMemDatasets"
-              :labels="nodeHistoryLabels"
-              :width="chartWidth"
-              :height="160"
-              :y-max="100"
-            />
-          </div>
-          <div class="glass-card p-4">
-            <h4 class="text-xs font-medium text-white/60 mb-2">Disk History</h4>
-            <LineChart
-              :datasets="nodeHistoryDiskDatasets"
-              :labels="nodeHistoryLabels"
-              :width="chartWidth"
-              :height="160"
-              :y-max="100"
-            />
-          </div>
-        </div>
-
-        <!-- Container List -->
-        <div class="mb-4">
-          <h4 class="text-xs font-medium text-white/60 mb-2 uppercase tracking-wide">Containers</h4>
-          <div v-if="!selectedNode.containers.length" class="text-white/40 text-sm py-2">
-            No containers reported.
-          </div>
-          <div v-else class="space-y-1">
-            <div
-              v-for="c in selectedNode.containers"
-              :key="c.id"
-              class="flex items-center gap-3 p-2 bg-white/5 rounded-lg"
-            >
-              <span
-                class="inline-block w-2 h-2 rounded-full flex-shrink-0"
-                :class="c.state === 'running' ? 'bg-green-400' : 'bg-red-400'"
-              ></span>
-              <span class="text-sm text-white flex-1 truncate">{{ c.id }}</span>
-              <span class="text-xs text-white/40">{{ c.state }}</span>
-              <span class="text-xs text-white/30">{{ c.version }}</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- Node Alerts -->
-        <div>
-          <h4 class="text-xs font-medium text-white/60 mb-2 uppercase tracking-wide">Recent Alerts</h4>
-          <div v-if="!selectedNode.recent_alerts.length" class="text-white/40 text-sm py-2">
-            No recent alerts for this node.
-          </div>
-          <div v-else class="space-y-1">
-            <div
-              v-for="(alert, idx) in selectedNode.recent_alerts"
-              :key="idx"
-              class="flex items-start gap-3 p-2 bg-white/5 rounded-lg"
-            >
-              <span
-                class="inline-block w-2 h-2 rounded-full mt-1.5 flex-shrink-0"
-                :class="alertSeverityDot(alert.rule)"
-              ></span>
-              <div class="flex-1 min-w-0">
-                <p class="text-sm text-white/80">{{ alert.message }}</p>
-                <p class="text-xs text-white/30">{{ formatTimestamp(alert.timestamp) }}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Section 5: Container Matrix -->
-      <div class="glass-card p-5">
-        <h3 class="text-sm font-medium text-white/80 mb-4">Container Matrix</h3>
-
-        <div v-if="!nodes.length" class="text-white/40 text-sm py-4 text-center">
-          No nodes to display.
-        </div>
-        <div v-else class="overflow-x-auto">
-          <table class="fleet-matrix-table">
-            <thead>
-              <tr>
-                <th class="fleet-matrix-header-cell">App</th>
-                <th
-                  v-for="node in sortedNodes"
-                  :key="node.node_id"
-                  class="fleet-matrix-header-cell font-mono"
-                >
-                  {{ node.node_id.slice(0, 6) }}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="app in allAppIds" :key="app">
-                <td class="fleet-matrix-cell text-white/70">{{ app }}</td>
-                <td
-                  v-for="node in sortedNodes"
-                  :key="node.node_id"
-                  class="fleet-matrix-cell text-center"
-                >
-                  <span v-if="getContainerState(node, app) === 'running'" class="text-green-400">&#10003;</span>
-                  <span v-else-if="getContainerState(node, app) === 'stopped'" class="text-red-400">&#10007;</span>
-                  <span v-else class="text-white/20">&mdash;</span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
+      <FleetContainerMatrix
+        :nodes="fleet.nodes.value"
+        :sorted-nodes="fleet.sortedNodes.value"
+        :all-app-ids="fleet.allAppIds.value"
+      />
 
       <p class="text-xs text-white/30 mt-4 text-center">
-        {{ autoRefresh ? 'Auto-refreshing every 60s' : 'Auto-refresh paused' }}
-        &middot; Last updated {{ lastRefreshed ? timeAgo(lastRefreshed) : 'never' }}
+        {{ fleet.autoRefresh.value ? 'Auto-refreshing every 60s' : 'Auto-refresh paused' }}
+        &middot; Last updated {{ fleet.lastRefreshed.value ? timeAgo(fleet.lastRefreshed.value) : 'never' }}
       </p>
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
-import { rpcClient } from '@/api/rpc-client'
-import LineChart from '@/components/LineChart.vue'
-import type { ChartDataset } from '@/components/LineChart.vue'
+import FleetOverviewCards from './fleet/FleetOverviewCards.vue'
+import FleetNodeGrid from './fleet/FleetNodeGrid.vue'
+import FleetAlerts from './fleet/FleetAlerts.vue'
+import FleetNodeDetail from './fleet/FleetNodeDetail.vue'
+import FleetContainerMatrix from './fleet/FleetContainerMatrix.vue'
+import { useFleetData, timeAgo } from './fleet/useFleetData'
 
-// --- Types ---
-
-interface FleetNode {
-  node_id: string
-  version: string
-  uptime_secs: number
-  cpu_cores: number
-  cpu_pct: number
-  mem_pct: number
-  disk_pct: number
-  container_count: number
-  running_count: number
-  federation_peers: number
-  recent_alerts: Array<{ rule: string; message: string; timestamp: string }>
-  containers: Array<{ id: string; state: string; version: string }>
-  reported_at: string
-}
-
-interface FleetAlert {
-  node_id: string
-  rule: string
-  message: string
-  timestamp: string
-}
-
-interface NodeHistoryEntry {
-  timestamp: string
-  cpu_pct: number
-  mem_pct: number
-  disk_pct: number
-}
-
-type SortOption = 'status' | 'last-seen' | 'name'
-
-// --- State ---
-
-const loading = ref(true)
-const errorMessage = ref('')
-const nodes = ref<FleetNode[]>([])
-const fleetAlerts = ref<FleetAlert[]>([])
-const alertsLoading = ref(false)
-const selectedNodeId = ref<string | null>(null)
-const nodeHistory = ref<NodeHistoryEntry[]>([])
-const nodeHistoryLoading = ref(false)
-const autoRefresh = ref(true)
-const lastRefreshed = ref('')
-const sortBy = ref<SortOption>('status')
-const chartWidth = ref(300)
-let pollTimer: ReturnType<typeof setInterval> | null = null
-
-const sortOptions: Array<{ label: string; value: SortOption }> = [
-  { label: 'Status', value: 'status' },
-  { label: 'Last Seen', value: 'last-seen' },
-  { label: 'Name', value: 'name' },
-]
-
-// --- Computed ---
-
-const onlineCount = computed(() => nodes.value.filter(n => isOnline(n.reported_at)).length)
-const offlineCount = computed(() => nodes.value.length - onlineCount.value)
-const healthyCount = computed(() => nodes.value.filter(n => n.recent_alerts.length === 0).length)
-
-const fleetHealthPct = computed(() => {
-  if (!nodes.value.length) return 0
-  return Math.round((healthyCount.value / nodes.value.length) * 100)
-})
-
-const avgCpu = computed(() => {
-  if (!nodes.value.length) return 0
-  return nodes.value.reduce((sum, n) => sum + n.cpu_pct, 0) / nodes.value.length
-})
-
-const avgMem = computed(() => {
-  if (!nodes.value.length) return 0
-  return nodes.value.reduce((sum, n) => sum + n.mem_pct, 0) / nodes.value.length
-})
-
-const avgDisk = computed(() => {
-  if (!nodes.value.length) return 0
-  return nodes.value.reduce((sum, n) => sum + n.disk_pct, 0) / nodes.value.length
-})
-
-const selectedNode = computed(() => {
-  if (!selectedNodeId.value) return null
-  return nodes.value.find(n => n.node_id === selectedNodeId.value) ?? null
-})
-
-const sortedNodes = computed(() => {
-  const sorted = [...nodes.value]
-  switch (sortBy.value) {
-    case 'status':
-      // Offline first, then by last seen descending
-      sorted.sort((a, b) => {
-        const aOnline = isOnline(a.reported_at)
-        const bOnline = isOnline(b.reported_at)
-        if (aOnline !== bOnline) return aOnline ? 1 : -1
-        return new Date(b.reported_at).getTime() - new Date(a.reported_at).getTime()
-      })
-      break
-    case 'last-seen':
-      sorted.sort((a, b) => new Date(b.reported_at).getTime() - new Date(a.reported_at).getTime())
-      break
-    case 'name':
-      sorted.sort((a, b) => a.node_id.localeCompare(b.node_id))
-      break
-  }
-  return sorted
-})
-
-const allAppIds = computed(() => {
-  const appSet = new Set<string>()
-  for (const node of nodes.value) {
-    for (const c of node.containers) {
-      appSet.add(c.id)
-    }
-  }
-  return Array.from(appSet).sort()
-})
-
-// Node history chart datasets
-const nodeHistoryLabels = computed(() => {
-  return nodeHistory.value.map(h => {
-    const d = new Date(h.timestamp)
-    return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`
-  })
-})
-
-const nodeHistoryCpuDatasets = computed<ChartDataset[]>(() => [{
-  label: 'CPU',
-  data: nodeHistory.value.map(h => h.cpu_pct),
-  color: '#fb923c',
-}])
-
-const nodeHistoryMemDatasets = computed<ChartDataset[]>(() => [{
-  label: 'RAM',
-  data: nodeHistory.value.map(h => h.mem_pct),
-  color: '#3b82f6',
-}])
-
-const nodeHistoryDiskDatasets = computed<ChartDataset[]>(() => [{
-  label: 'Disk',
-  data: nodeHistory.value.map(h => h.disk_pct),
-  color: '#a78bfa',
-}])
-
-// --- Utility Functions ---
-
-function formatUptime(secs: number): string {
-  if (secs < 60) return `${secs}s`
-  const days = Math.floor(secs / 86400)
-  const hours = Math.floor((secs % 86400) / 3600)
-  const mins = Math.floor((secs % 3600) / 60)
-  if (days > 0) return `${days}d ${hours}h`
-  if (hours > 0) return `${hours}h ${mins}m`
-  return `${mins}m`
-}
-
-function timeAgo(dateStr: string): string {
-  const now = Date.now()
-  const then = new Date(dateStr).getTime()
-  const diffMs = now - then
-  if (diffMs < 0) return 'just now'
-  const diffSecs = Math.floor(diffMs / 1000)
-  if (diffSecs < 60) return `${diffSecs}s ago`
-  const diffMins = Math.floor(diffSecs / 60)
-  if (diffMins < 60) return `${diffMins}m ago`
-  const diffHours = Math.floor(diffMins / 60)
-  if (diffHours < 24) return `${diffHours}h ago`
-  const diffDays = Math.floor(diffHours / 24)
-  return `${diffDays}d ago`
-}
-
-function isOnline(reportedAt: string): boolean {
-  const thirtyMinMs = 30 * 60 * 1000
-  return Date.now() - new Date(reportedAt).getTime() < thirtyMinMs
-}
-
-function healthBarClass(pct: number): string {
-  if (pct >= 85) return 'monitoring-bar-danger'
-  if (pct >= 60) return 'monitoring-bar-warn'
-  return 'monitoring-bar-ok'
-}
-
-function healthTextClass(pct: number): string {
-  if (pct >= 85) return 'fleet-text-danger'
-  if (pct >= 60) return 'fleet-text-warn'
-  return ''
-}
-
-function alertSeverityDot(rule: string): string {
-  const critical = ['container_crash', 'disk_critical', 'node_offline']
-  if (critical.includes(rule)) return 'bg-red-400'
-  return 'bg-orange-400'
-}
-
-function alertTypeLabel(rule: string): string {
-  const labels: Record<string, string> = {
-    container_crash: 'Container Crash',
-    disk_critical: 'Disk Critical',
-    disk_warning: 'Disk Warning',
-    ram_high: 'High RAM',
-    cpu_high: 'High CPU',
-    node_offline: 'Node Offline',
-    version_mismatch: 'Version Mismatch',
-  }
-  return labels[rule] ?? rule
-}
-
-function formatTimestamp(ts: string): string {
-  const d = new Date(ts)
-  return d.toLocaleString()
-}
-
-function getContainerState(node: FleetNode, appId: string): string | null {
-  const container = node.containers.find(c => c.id === appId)
-  if (!container) return null
-  return container.state
-}
-
-// --- Data Fetching ---
-
-async function fetchFleetStatus() {
-  try {
-    const data = await rpcClient.call<{ nodes: FleetNode[] }>({
-      method: 'telemetry.fleet-status',
-    })
-    if (data?.nodes) {
-      nodes.value = data.nodes
-      lastRefreshed.value = new Date().toISOString()
-    }
-  } catch (err) {
-    if (loading.value) {
-      errorMessage.value = err instanceof Error ? err.message : 'Failed to load fleet data'
-    }
-  }
-}
-
-async function fetchFleetAlerts() {
-  alertsLoading.value = true
-  try {
-    const data = await rpcClient.call<{ alerts: FleetAlert[] }>({
-      method: 'telemetry.fleet-alerts',
-    })
-    if (data?.alerts) {
-      fleetAlerts.value = data.alerts
-    }
-  } catch {
-    // Non-critical, retry on next poll
-  } finally {
-    alertsLoading.value = false
-  }
-}
-
-async function fetchNodeHistory(nodeId: string) {
-  nodeHistoryLoading.value = true
-  nodeHistory.value = []
-  try {
-    const data = await rpcClient.call<{ history: NodeHistoryEntry[] }>({
-      method: 'telemetry.fleet-node-history',
-      params: { node_id: nodeId },
-    })
-    if (data?.history) {
-      nodeHistory.value = data.history
-    }
-  } catch {
-    // Non-critical
-  } finally {
-    nodeHistoryLoading.value = false
-  }
-}
-
-async function refreshAll() {
-  loading.value = !nodes.value.length
-  errorMessage.value = ''
-  await Promise.all([fetchFleetStatus(), fetchFleetAlerts()])
-  loading.value = false
-}
-
-function selectNode(nodeId: string) {
-  if (selectedNodeId.value === nodeId) {
-    selectedNodeId.value = null
-    nodeHistory.value = []
-  } else {
-    selectedNodeId.value = nodeId
-    fetchNodeHistory(nodeId)
-  }
-}
-
-function toggleAutoRefresh() {
-  autoRefresh.value = !autoRefresh.value
-  if (autoRefresh.value) {
-    startAutoRefresh()
-  } else {
-    stopAutoRefresh()
-  }
-}
-
-function startAutoRefresh() {
-  stopAutoRefresh()
-  pollTimer = setInterval(async () => {
-    await Promise.all([fetchFleetStatus(), fetchFleetAlerts()])
-    // Refresh selected node history if one is selected
-    if (selectedNodeId.value) {
-      await fetchNodeHistory(selectedNodeId.value)
-    }
-  }, 60000)
-}
-
-function stopAutoRefresh() {
-  if (pollTimer) {
-    clearInterval(pollTimer)
-    pollTimer = null
-  }
-}
-
-function exportFleetData() {
-  const exportData = {
-    exported_at: new Date().toISOString(),
-    nodes: nodes.value,
-    alerts: fleetAlerts.value,
-  }
-  const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' })
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement('a')
-  a.href = url
-  a.download = `fleet-telemetry-${new Date().toISOString().slice(0, 10)}.json`
-  a.click()
-  URL.revokeObjectURL(url)
-}
-
-function updateChartWidth() {
-  const container = document.querySelector('.glass-card')
-  if (container) {
-    // For 3-column layout, approximate each chart container width
-    const cardWidth = container.clientWidth
-    chartWidth.value = Math.max(Math.floor((cardWidth - 80) / 3), 200)
-  }
-}
-
-// Fetch node history when selection changes
-watch(selectedNodeId, (newId) => {
-  if (newId) {
-    fetchNodeHistory(newId)
-  } else {
-    nodeHistory.value = []
-  }
-})
-
-// --- Lifecycle ---
-
-onMounted(async () => {
-  updateChartWidth()
-  window.addEventListener('resize', updateChartWidth)
-
-  await refreshAll()
-
-  if (autoRefresh.value) {
-    startAutoRefresh()
-  }
-})
-
-onUnmounted(() => {
-  stopAutoRefresh()
-  window.removeEventListener('resize', updateChartWidth)
-})
+const fleet = useFleetData()
 </script>

neode-ui/src/views/Home.vue

@@ -377,6 +377,10 @@ function uploadFiles() { const pkg = packages.value['filebrowser']; if (pkg && p
 <style scoped>
 .typing-caret::after { content: ''; display: inline-block; width: 3px; height: 1.1em; background: #fbbf24; margin-left: 2px; vertical-align: text-bottom; animation: caret-blink 0.7s step-end infinite; }
 @keyframes caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+</style>
+
+<style>
+/* Home card styles — unscoped so they reach child components (HomeWalletCard, HomeSystemCard) */
 .grid > .home-card { min-height: 280px; }
 .home-card-shell { background-color: rgba(0, 0, 0, 0.65); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 1rem; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); border: 1px solid transparent; height: 100%; }
 .home-card-animate .home-card-shell { animation: card-fly-in 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation-delay: calc(var(--card-stagger) * 0.18s); opacity: 0; transform: translateY(50px) scale(0.92); }

neode-ui/src/views/Mesh.vue

@@ -8,6 +8,7 @@ import MeshMap from '@/components/MeshMap.vue'
 import MeshBitcoinPanel from '@/views/mesh/MeshBitcoinPanel.vue'
 import MeshDeadmanPanel from '@/views/mesh/MeshDeadmanPanel.vue'
 import { rpcClient } from '@/api/rpc-client'
+import '@/views/mesh/mesh-styles.css'
 
 const mesh = useMeshStore()
 const transport = useTransportStore()
@@ -661,180 +662,4 @@ function truncatePubkey(hex: string | null): string {
   </div>
 </template>
 
-<style scoped>
-/* All the original scoped styles are preserved below */
-.mesh-view {
-  padding: 24px;
-  max-width: 1600px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  height: 100%;
-  overflow: hidden;
-}
-.mesh-header { justify-content: space-between; align-items: center; gap: 16px; flex-shrink: 0; }
-.mesh-header-left { flex: 1; }
-.mesh-title { font-size: 1.5rem; font-weight: 700; color: rgba(255, 255, 255, 0.95); margin: 0; }
-.mesh-subtitle { color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; margin: 2px 0 0; display: flex; align-items: center; gap: 8px; }
-.mesh-subtitle-badge { font-size: 0.65rem; font-weight: 600; color: #4ade80; background: rgba(74, 222, 128, 0.12); padding: 1px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
-.mesh-flasher-btn { display: inline-flex; align-items: center; gap: 0; padding: 8px 16px; font-size: 0.9rem; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
-.mesh-flasher-sep { margin: 0 8px; color: rgba(255, 255, 255, 0.2); }
-.mesh-error { color: #ef4444; font-size: 0.85rem; padding: 8px 12px; background: rgba(239, 68, 68, 0.1); border-radius: 8px; border: 1px solid rgba(239, 68, 68, 0.2); flex-shrink: 0; }
-.mesh-columns { display: flex; gap: 16px; flex: 1; min-height: 0; overflow: hidden; }
-.mesh-left { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; }
-.mesh-right { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
-.mesh-tools-wrapper { display: contents; }
-.mesh-tools-tab-bar { display: none; }
-.mesh-columns-wide { display: grid; grid-template-columns: 340px 1fr 1fr; gap: 16px; }
-.mesh-columns-wide .mesh-left { grid-column: 1; width: auto; }
-.mesh-columns-wide .mesh-right { display: contents; }
-.mesh-columns-wide .mesh-chat-card { grid-column: 2; grid-row: 1; min-height: 0; overflow: hidden; }
-.mesh-columns-wide .mesh-tools-wrapper { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; gap: 0; min-height: 0; overflow-y: auto; }
-.mesh-columns-wide .mesh-tools-tab-bar { display: flex; gap: 2px; background: rgba(0,0,0,0.3); border-radius: 10px; padding: 3px; flex-shrink: 0; margin-bottom: 12px; }
-.mesh-columns-wide .mesh-mobile-back-btn,
-.mesh-columns-wide .mesh-tab-bar { display: none; }
-.mesh-status-card { padding: 16px; flex-shrink: 0; }
-.mesh-status-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
-.mesh-status-indicator { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
-.mesh-status-indicator.connected { background: #4ade80; box-shadow: 0 0 6px rgba(74, 222, 128, 0.5); }
-.mesh-status-indicator.disconnected { background: rgba(255, 255, 255, 0.3); }
-.mesh-section-title { font-size: 0.95rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); margin: 0; }
-.mesh-status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
-.mesh-stat { display: flex; flex-direction: column; gap: 1px; padding: 8px; background: rgba(255, 255, 255, 0.05); border-radius: 6px; }
-.mesh-stat-label { font-size: 0.65rem; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; letter-spacing: 0.5px; }
-.mesh-stat-value { font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); font-weight: 500; }
-.text-green { color: #4ade80; }
-.text-orange { color: #fb923c; }
-.text-muted { color: rgba(255, 255, 255, 0.4); }
-.mesh-loading, .mesh-empty { color: rgba(255, 255, 255, 0.4); font-size: 0.85rem; text-align: center; padding: 16px 0; }
-.mesh-detected-devices { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
-.mesh-device-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(255, 255, 255, 0.04); border-radius: 6px; }
-.mesh-device-indicator { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 4px rgba(74, 222, 128, 0.4); flex-shrink: 0; }
-.mesh-device-path { font-family: monospace; font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); flex: 1; }
-.mesh-connect-btn { padding: 3px 12px; font-size: 0.75rem; flex-shrink: 0; }
-.mesh-offgrid-banner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(251, 146, 60, 0.1); border: 1px solid rgba(251, 146, 60, 0.3); border-radius: 8px; flex-shrink: 0; }
-.mesh-offgrid-active { border-color: rgba(251, 146, 60, 0.4) !important; color: #fb923c !important; }
-.mesh-actions { display: flex; gap: 8px; flex-shrink: 0; }
-.mesh-action-btn { flex: 1; padding: 8px 0; font-size: 0.8rem; }
-.mesh-peers-card { padding: 14px; flex: 1; min-height: 0; display: flex; flex-direction: column; }
-.mesh-peers-card .mesh-section-title { margin-bottom: 10px; flex-shrink: 0; }
-.mesh-peer-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; flex: 1; min-height: 0; }
-.mesh-peer-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; cursor: pointer; transition: background 0.15s; }
-.mesh-peer-row:hover { background: rgba(255, 255, 255, 0.06); }
-.mesh-peer-row.active { background: rgba(251, 146, 60, 0.1); border: 1px solid rgba(251, 146, 60, 0.2); }
-.mesh-peer-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); flex-shrink: 0; font-weight: 600; }
-.mesh-peer-avatar.archy { background: rgba(251, 146, 60, 0.15); padding: 0; overflow: hidden; }
-.mesh-peer-avatar.archy :deep(> div) { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; }
-.mesh-peer-avatar.channel { background: rgba(59, 130, 246, 0.15); color: #3b82f6; font-weight: 700; font-size: 1.1rem; }
-.mesh-peer-channel-badge { font-size: 0.6rem; font-weight: 700; color: #3b82f6; background: rgba(59, 130, 246, 0.12); padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
-.mesh-peer-count { font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.08); padding: 2px 8px; border-radius: 10px; margin-left: 6px; vertical-align: middle; }
-.mesh-peer-row.is-channel { border-bottom: 1px solid rgba(255, 255, 255, 0.04); padding-bottom: 12px; margin-bottom: 4px; }
-.mesh-peer-info { flex: 1; min-width: 0; }
-.mesh-peer-name { font-weight: 600; font-size: 0.85rem; color: rgba(255, 255, 255, 0.9); display: flex; align-items: center; gap: 6px; }
-.mesh-peer-archy-badge { font-size: 0.6rem; font-weight: 700; color: #fb923c; background: rgba(251, 146, 60, 0.12); padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
-.mesh-peer-sub { font-size: 0.7rem; color: rgba(255, 255, 255, 0.3); font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.mesh-peer-signal { flex-shrink: 0; }
-.mesh-signal-bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
-.mesh-signal-bar { width: 3px; border-radius: 1px; background: rgba(255, 255, 255, 0.12); }
-.mesh-signal-bar:nth-child(1) { height: 3px; }
-.mesh-signal-bar:nth-child(2) { height: 6px; }
-.mesh-signal-bar:nth-child(3) { height: 10px; }
-.mesh-signal-bar:nth-child(4) { height: 14px; }
-.mesh-signal-bar.active { background: #4ade80; }
-.mesh-unread-badge { background: #fb923c; color: #000; font-size: 0.65rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px; flex-shrink: 0; }
-.mesh-chat-card { padding: 0; flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
-.mesh-chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.3); gap: 8px; padding: 40px; }
-.mesh-chat-empty-icon { font-size: 3rem; opacity: 0.4; }
-.mesh-chat-empty p { margin: 0; font-size: 0.9rem; }
-.mesh-chat-empty-sub { font-size: 0.75rem !important; color: rgba(255, 255, 255, 0.2); }
-.mesh-chat-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; }
-.mesh-chat-back { background: none; border: none; color: rgba(255, 255, 255, 0.6); font-size: 1.2rem; cursor: pointer; padding: 4px 8px; border-radius: 6px; display: none; }
-.mesh-chat-header-info { flex: 1; min-width: 0; }
-.mesh-chat-header-name { font-weight: 600; font-size: 0.95rem; color: rgba(255, 255, 255, 0.9); display: flex; align-items: center; gap: 6px; }
-.mesh-chat-header-sub { font-size: 0.7rem; color: rgba(255, 255, 255, 0.3); font-family: monospace; }
-.mesh-chat-header-status { flex-shrink: 0; }
-.mesh-chat-header-time { font-size: 0.7rem; color: rgba(255, 255, 255, 0.3); }
-.mesh-chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
-.mesh-chat-no-messages { flex: 1; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.25); font-size: 0.85rem; }
-.mesh-chat-bubble-wrapper { display: flex; }
-.mesh-chat-bubble-wrapper.sent { justify-content: flex-end; }
-.mesh-chat-bubble-wrapper.received { justify-content: flex-start; }
-.mesh-chat-bubble { max-width: 75%; padding: 10px 14px; border-radius: 16px; word-break: break-word; }
-.mesh-chat-bubble.sent { background: rgba(251, 146, 60, 0.15); border: 1px solid rgba(251, 146, 60, 0.2); border-bottom-right-radius: 4px; }
-.mesh-chat-bubble.received { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); border-bottom-left-radius: 4px; }
-.mesh-chat-bubble-text { color: rgba(255, 255, 255, 0.9); font-size: 0.9rem; line-height: 1.4; }
-.mesh-chat-bubble-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; justify-content: flex-end; }
-.mesh-chat-bubble-time { font-size: 0.65rem; color: rgba(255, 255, 255, 0.3); }
-.mesh-chat-e2e { font-size: 0.55rem; font-weight: 700; color: #4ade80; padding: 0 3px; border: 1px solid rgba(74, 222, 128, 0.3); border-radius: 3px; }
-.mesh-chat-ack { font-size: 0.7rem; color: #3b82f6; }
-.mesh-chat-compose { padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; }
-.mesh-chat-send-error { color: #ef4444; font-size: 0.75rem; margin-bottom: 6px; }
-.mesh-chat-compose-row { display: flex; gap: 8px; }
-.mesh-chat-input { flex: 1; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; color: rgba(255, 255, 255, 0.9); padding: 10px 16px; font-size: 0.9rem; font-family: inherit; outline: none; }
-.mesh-chat-input:focus { border-color: rgba(251, 146, 60, 0.4); }
-.mesh-chat-input::placeholder { color: rgba(255, 255, 255, 0.25); }
-.mesh-chat-send-btn { padding: 10px 20px; border-radius: 20px; font-size: 0.85rem; background: rgba(251, 146, 60, 0.15); border-color: rgba(251, 146, 60, 0.25); }
-.mesh-chat-send-btn:hover:not(:disabled) { background: rgba(251, 146, 60, 0.25); }
-.mesh-mobile-back-btn { display: none; }
-
-@media (max-width: 1279px) {
-  .mesh-view { height: auto; overflow: visible; padding: 0 12px 100px 12px; }
-  .mesh-columns { flex-direction: column; overflow: visible; }
-  .mesh-left { width: 100%; overflow: visible; }
-  .mesh-right { min-height: auto; overflow: visible; }
-  .mesh-chat-card { min-height: 60dvh; max-height: 75dvh; overflow: hidden; display: flex; flex-direction: column; }
-  .mesh-tools-wrapper { display: none !important; }
-  .mesh-mobile-tools { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
-  .mesh-mobile-tools .mesh-tools-tab-bar { display: flex; gap: 2px; background: rgba(0,0,0,0.3); border-radius: 10px; padding: 3px; }
-  .mesh-mobile-tools :deep(.mesh-bitcoin-panel),
-  .mesh-mobile-tools :deep(.mesh-deadman-panel) { min-height: 320px; }
-  .mesh-mobile-tools .mesh-map-panel { min-height: 400px; }
-  .mesh-status-grid { grid-template-columns: repeat(2, 1fr); }
-  .mesh-chat-back { display: block; }
-  .mobile-hidden { display: none !important; }
-  :deep(.mesh-bitcoin-panel),
-  :deep(.mesh-deadman-panel) { flex: none; cursor: pointer; flex-shrink: 0; }
-  .mesh-mobile-back-btn:hover { color: rgba(255, 255, 255, 0.9); }
-}
-
-.mesh-session-badge { font-size: 0.75rem; margin-right: 6px; opacity: 0.7; }
-.session-ratchet { color: #4ade80; opacity: 1; }
-.session-static { color: #fbbf24; }
-.session-none { color: rgba(255,255,255,0.3); }
-.mesh-typed-icon { margin-right: 4px; }
-.mesh-typed-label { font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
-.typed-invoice { border-left: 3px solid #fb923c; }
-.mesh-typed-invoice { padding: 4px 0; }
-.mesh-typed-invoice-header { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; color: #fb923c; font-size: 0.75rem; }
-.mesh-typed-invoice-amount { font-size: 1.1rem; font-weight: 700; color: #fb923c; }
-.mesh-typed-invoice-memo { font-size: 0.8rem; color: rgba(255,255,255,0.7); margin-top: 2px; }
-.mesh-typed-invoice-bolt11 { font-size: 0.65rem; color: rgba(255,255,255,0.3); font-family: monospace; margin-top: 4px; word-break: break-all; }
-.mesh-typed-paid { background: rgba(74,222,128,0.2); color: #4ade80; font-size: 0.65rem; padding: 1px 6px; border-radius: 4px; margin-left: auto; }
-.typed-alert { border-left: 3px solid #ef4444; }
-.typed-alert.alert-status { border-left-color: #3b82f6; }
-.mesh-typed-alert { padding: 4px 0; }
-.mesh-typed-alert-header { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; font-size: 0.75rem; }
-.alert-emergency .mesh-typed-alert-header { color: #ef4444; }
-.alert-dead_man .mesh-typed-alert-header { color: #ef4444; }
-.alert-status .mesh-typed-alert-header { color: #3b82f6; }
-.mesh-typed-alert-message { font-size: 0.85rem; color: rgba(255,255,255,0.9); }
-.mesh-typed-alert-location { display: block; font-size: 0.75rem; color: #3b82f6; margin-top: 4px; text-decoration: underline; }
-.mesh-typed-signed { font-size: 0.6rem; color: #4ade80; border: 1px solid rgba(74,222,128,0.3); padding: 0 4px; border-radius: 3px; margin-left: auto; }
-.typed-coordinate { border-left: 3px solid #3b82f6; }
-.mesh-typed-coordinate { padding: 4px 0; }
-.mesh-typed-coordinate-header { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; color: #3b82f6; font-size: 0.75rem; }
-.mesh-typed-coordinate-value { font-size: 0.9rem; font-family: monospace; color: rgba(255,255,255,0.8); }
-.mesh-typed-coordinate-label { font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-top: 2px; }
-.mesh-typed-coordinate-link { display: inline-block; font-size: 0.75rem; color: #3b82f6; margin-top: 4px; text-decoration: underline; }
-.typed-block_header { border-left: 3px solid #a855f7; }
-.mesh-typed-block { display: flex; align-items: center; gap: 4px; color: #a855f7; font-size: 0.8rem; }
-.mesh-tab-bar { display: flex; gap: 2px; background: rgba(0,0,0,0.3); border-radius: 10px; padding: 3px; flex-shrink: 0; }
-.mesh-tab { flex: 1; padding: 8px 12px; border: none; background: transparent; color: rgba(255,255,255,0.5); font-size: 0.82rem; font-weight: 500; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 6px; }
-.mesh-tab:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.05); }
-.mesh-tab.active { color: #fff; background: rgba(255,255,255,0.1); }
-.mesh-tab-badge { font-size: 0.65rem; background: rgba(251,146,60,0.2); color: #fb923c; padding: 1px 5px; border-radius: 4px; font-weight: 600; }
-.mesh-tab-badge-alert { background: rgba(239,68,68,0.3); color: #ef4444; animation: pulse-alert 1.5s infinite; }
-@keyframes pulse-alert { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
-.mesh-map-panel { flex: 1; min-height: 400px; padding: 0 !important; overflow: hidden; border-radius: 12px; position: relative; }
-</style>
+<!-- Styles extracted to mesh/mesh-styles.css -->

neode-ui/src/views/appDetails/AppSidebar.vue

@@ -155,7 +155,7 @@ defineProps<{
   packageKey: string
   isWebOnly: boolean
   gatewayState: string
-  interfaceAddresses: Record<string, string> | null
+  interfaceAddresses: { 'tor-address': string; 'lan-address': string | null } | null
   lanUrl: string
   torUrl: string
   showTorAddress: boolean

neode-ui/src/views/appSession/AppSessionFrame.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="relative flex-1 min-h-0 bg-black/40 overflow-hidden">
+    <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">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+          <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" />
+        </svg>
+      </div>
+    </Transition>
+
+    <iframe
+      v-if="appUrl && !iframeBlocked"
+      ref="iframeRef"
+      :key="refreshKey"
+      :src="appUrl"
+      class="absolute inset-0 w-full h-full border-0 iframe-scrollbar-hide"
+      title="App content"
+      @load="$emit('iframeLoad')"
+      @error="$emit('iframeError')"
+    />
+
+    <!-- Iframe blocked fallback -->
+    <Transition name="content-fade">
+      <div v-if="iframeBlocked" class="absolute inset-0 z-10 flex flex-col items-center justify-center">
+        <div class="text-center px-8">
+          <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center">
+            <svg class="w-8 h-8 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+            </svg>
+          </div>
+          <h3 class="text-lg font-semibold text-white mb-2">{{ 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-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>
+          </p>
+          <div class="flex items-center gap-3">
+            <button
+              v-if="!mustOpenNewTab"
+              @click="$emit('refresh')"
+              class="glass-button px-6 py-3 rounded-lg text-sm font-semibold inline-flex items-center gap-2"
+            >
+              <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>
+              Retry now
+            </button>
+            <button
+              @click="$emit('openNewTabAndBack')"
+              class="glass-button px-6 py-3 rounded-lg text-sm font-semibold inline-flex items-center gap-2"
+            >
+              <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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+              </svg>
+              Open in new tab
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+
+    <div v-if="!appUrl" 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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+  appUrl: string
+  appId: string
+  appTitle: string
+  loading: boolean
+  iframeBlocked: boolean
+  mustOpenNewTab: boolean
+  autoRetryCount: number
+  refreshKey: number
+}>()
+
+defineEmits<{
+  iframeLoad: []
+  iframeError: []
+  refresh: []
+  openNewTabAndBack: []
+}>()
+
+const iframeRef = ref<HTMLIFrameElement | null>(null)
+
+defineExpose({ iframeRef })
+</script>

neode-ui/src/views/appSession/AppSessionHeader.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="sticky top-0 z-10 flex items-center gap-3 border-b border-white/10 px-4 py-3 bg-black/60 backdrop-blur-md md:bg-transparent md:backdrop-blur-none">
+    <!-- Back / Forward navigation -->
+    <div class="flex items-center gap-0.5">
+      <button class="app-session-btn" aria-label="Back" title="Go back" @click="$emit('goBack')">
+        <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="M15 19l-7-7 7-7" />
+        </svg>
+      </button>
+      <button class="app-session-btn" aria-label="Forward" title="Go forward" @click="$emit('goForward')">
+        <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="M9 5l7 7-7 7" />
+        </svg>
+      </button>
+    </div>
+
+    <span class="flex-1 truncate text-sm font-medium text-white/90">{{ appTitle }}</span>
+
+    <button class="app-session-btn" aria-label="Refresh" :disabled="isRefreshing" @click="$emit('refresh')">
+      <svg class="w-5 h-5 transition-transform duration-300" :class="{ 'animate-spin': isRefreshing }" 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>
+
+    <!-- Display mode selector -->
+    <div class="relative" ref="modeMenuRef">
+      <button
+        class="app-session-btn"
+        aria-label="Display mode"
+        title="Display mode"
+        @click="showModeMenu = !showModeMenu"
+      >
+        <!-- Panel icon -->
+        <svg v-if="displayMode === 'panel'" 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 3v18m12-18H3a1 1 0 00-1 1v16a1 1 0 001 1h18a1 1 0 001-1V4a1 1 0 00-1-1z" />
+        </svg>
+        <!-- Overlay icon -->
+        <svg v-else-if="displayMode === 'overlay'" 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="M4 5a1 1 0 011-1h14a1 1 0 011 1v14a1 1 0 01-1 1H5a1 1 0 01-1-1V5z" />
+        </svg>
+        <!-- Fullscreen icon -->
+        <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="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
+        </svg>
+      </button>
+
+      <!-- Dropdown -->
+      <Transition name="menu-fade">
+        <div v-if="showModeMenu" class="absolute right-0 top-full mt-1 w-48 bg-black/90 border border-white/10 rounded-lg backdrop-blur-xl shadow-2xl overflow-hidden z-50">
+          <button
+            class="mode-option"
+            :class="{ 'mode-option-active': displayMode === 'panel' }"
+            @click="selectMode('panel')"
+          >
+            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v18m12-18H3a1 1 0 00-1 1v16a1 1 0 001 1h18a1 1 0 001-1V4a1 1 0 00-1-1z" />
+            </svg>
+            <span>Right panel</span>
+          </button>
+          <button
+            class="mode-option"
+            :class="{ 'mode-option-active': displayMode === 'overlay' }"
+            @click="selectMode('overlay')"
+          >
+            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v14a1 1 0 01-1 1H5a1 1 0 01-1-1V5z" />
+            </svg>
+            <span>Over whole app</span>
+          </button>
+          <button
+            class="mode-option"
+            :class="{ 'mode-option-active': displayMode === 'fullscreen' }"
+            @click="selectMode('fullscreen')"
+          >
+            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
+            </svg>
+            <span>Open fullscreen</span>
+          </button>
+        </div>
+      </Transition>
+    </div>
+
+    <button class="app-session-btn" aria-label="Open in new tab" title="Open in new tab" @click="$emit('openNewTab')">
+      <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="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-btn" aria-label="Close" @click="$emit('close')">
+      <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>
+
+    <kbd class="hidden sm:inline-flex px-2 py-1 text-xs text-white/50 bg-white/10 rounded">Esc</kbd>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import type { DisplayMode } from './appSessionConfig'
+
+defineProps<{
+  appTitle: string
+  isRefreshing: boolean
+  displayMode: DisplayMode
+}>()
+
+const emit = defineEmits<{
+  goBack: []
+  goForward: []
+  refresh: []
+  openNewTab: []
+  close: []
+  setMode: [mode: DisplayMode]
+}>()
+
+const showModeMenu = ref(false)
+const modeMenuRef = ref<HTMLElement | null>(null)
+
+function selectMode(mode: DisplayMode) {
+  showModeMenu.value = false
+  emit('setMode', mode)
+}
+
+function onClickOutside(e: MouseEvent) {
+  if (showModeMenu.value && modeMenuRef.value && !modeMenuRef.value.contains(e.target as Node)) {
+    showModeMenu.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', onClickOutside)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onClickOutside)
+})
+</script>

neode-ui/src/views/appSession/appSessionConfig.ts

@@ -0,0 +1,160 @@
+/** Static configuration maps for app session routing and display */
+
+export type DisplayMode = 'panel' | 'overlay' | 'fullscreen'
+
+export const DISPLAY_MODE_KEY = 'archipelago_app_display_mode'
+
+/** Container apps: direct port access (avoids root-relative asset breakage under /app/xxx/ proxy) */
+export const APP_PORTS: Record<string, number> = {
+  'bitcoin-knots': 8334,
+  'bitcoin-ui':    8334,
+  'electrumx':     50002,
+  'electrs':       50002,
+  'archy-electrs-ui': 50002,
+  'mempool-electrs': 50002,
+  'btcpay-server': 23000,
+  'lnd':           8081,
+  'archy-lnd-ui':  8081,
+  'mempool':       4080,
+  'mempool-web':   4080,
+  'archy-mempool-web': 4080,
+  'homeassistant': 8123,
+  'grafana':       3000,
+  'searxng':       8888,
+  'ollama':        11434,
+  'onlyoffice':    8044,
+  'penpot':        9001,
+  'nextcloud':     8085,
+  'vaultwarden':   8082,
+  'jellyfin':      8096,
+  'photoprism':    2342,
+  'immich':        2283,
+  'immich_server': 2283,
+  'filebrowser':   8083,
+  'nginx-proxy-manager': 8181,
+  'portainer':     9000,
+  'uptime-kuma':   3001,
+  'fedimint':      8175,
+  'fedimintd':     8175,
+  'fedimint-gateway': 8176,
+  'nostr-rs-relay': 18081,
+  'indeedhub':     7777,
+  'dwn':           3100,
+  'endurain':      8080,
+}
+
+/** Apps that need nginx proxy for iframe embedding.
+ *  IndeedHub loads via direct port 7777 -- deploy script removes X-Frame-Options
+ *  from the container's internal nginx so iframe works on all servers. */
+export const PROXY_APPS: Record<string, string> = {}
+
+/** Nginx proxy paths -- used on HTTPS to avoid mixed content (HTTPS parent + HTTP port iframe).
+ *  On HTTP, direct port access is used instead (faster, no proxy). */
+export const HTTPS_PROXY_PATHS: Record<string, string> = {
+  'bitcoin-knots': '/app/bitcoin-ui/',
+  'bitcoin-ui': '/app/bitcoin-ui/',
+  'lnd': '/app/lnd/',
+  'electrumx': '/app/electrs/',
+  'electrs': '/app/electrs/',
+  'mempool-electrs': '/app/electrs/',
+  'mempool': '/app/mempool/',
+  'mempool-web': '/app/mempool/',
+  'archy-mempool-web': '/app/mempool/',
+  'fedimint': '/app/fedimint/',
+  'fedimintd': '/app/fedimint/',
+  'fedimint-gateway': '/app/fedimint-gateway/',
+  'jellyfin': '/app/jellyfin/',
+  'searxng': '/app/searxng/',
+  'filebrowser': '/app/filebrowser/',
+  'ollama': '/app/ollama/',
+  'onlyoffice': '/app/onlyoffice/',
+  'immich': '/app/immich/',
+  'immich_server': '/app/immich/',
+  'portainer': '/app/portainer/',
+  'nginx-proxy-manager': '/app/nginx-proxy-manager/',
+  'uptime-kuma': '/app/uptime-kuma/',
+  'homeassistant': '/app/homeassistant/',
+  'vaultwarden': '/app/vaultwarden/',
+  'photoprism': '/app/photoprism/',
+  'endurain': '/app/endurain/',
+  'dwn': '/app/dwn/',
+}
+
+/** External HTTPS apps -- always loaded directly */
+export const EXTERNAL_URLS: Record<string, string> = {
+  'botfights': 'https://botfights.net',
+  'nwnn': 'https://nwnn.l484.com',
+  '484-kitchen': 'https://484.kitchen',
+  'call-the-operator': 'https://cta.tx1138.com',
+  'syntropy-institute': 'https://syntropy.institute',
+  't-zero': 'https://teeminuszero.net',
+  'nostrudel': 'https://nostrudel.ninja',
+  'tailscale': 'https://login.tailscale.com/admin/machines',
+}
+
+export const APP_TITLES: Record<string, string> = {
+  'bitcoin-knots': 'Bitcoin', 'btcpay-server': 'BTCPay Server', 'indeedhub': 'Indeehub',
+  'botfights': 'BotFights', '484-kitchen': '484 Kitchen', 'arch-presentation': 'Presentation',
+  'homeassistant': 'Home Assistant', 'uptime-kuma': 'Uptime Kuma',
+  'nginx-proxy-manager': 'Nginx Proxy Manager', 'nostr-rs-relay': 'Nostr Relay',
+  'call-the-operator': 'Call The Operator', 'syntropy-institute': 'Syntropy Institute',
+  't-zero': 'T-Zero', 'nostrudel': 'noStrudel',
+}
+
+/** Apps that set X-Frame-Options and MUST open in a new tab (can't iframe) */
+export const NEW_TAB_APPS = new Set([
+  'btcpay-server',
+  'grafana',
+  'photoprism',
+  'homeassistant',
+  'vaultwarden',
+  'nextcloud',
+  'uptime-kuma',
+  'penpot',
+  'portainer',
+  'onlyoffice',
+  'nginx-proxy-manager',
+  'tailscale',
+])
+
+/** Sites known to block iframes -- skip the timeout and go straight to fallback */
+export const IFRAME_BLOCKED_APPS = new Set<string>([])
+
+/** Resolve the app URL given its ID and current route query */
+export function resolveAppUrl(id: string, routeQueryPath?: string): string {
+  // External HTTPS apps
+  const ext = EXTERNAL_URLS[id]
+  if (ext) return ext
+
+  // Apps that need nginx proxy (nostr-provider.js injection for NIP-07)
+  const proxyPath = PROXY_APPS[id]
+  if (proxyPath) return `${window.location.origin}${proxyPath}`
+
+  // IndeedHub: always direct port (X-Frame-Options removed by deploy script)
+  if (id === 'indeedhub') {
+    const port = APP_PORTS[id]
+    if (port) {
+      let base = `${window.location.protocol}//${window.location.hostname}:${port}`
+      if (routeQueryPath) base += routeQueryPath
+      return base
+    }
+  }
+
+  // HTTPS: use nginx proxy to avoid mixed content
+  if (window.location.protocol === 'https:') {
+    const httpsProxy = HTTPS_PROXY_PATHS[id]
+    if (httpsProxy) return `${window.location.origin}${httpsProxy}`
+  }
+
+  // HTTP: direct port access (faster, no proxy overhead)
+  const port = APP_PORTS[id]
+  if (!port) return ''
+  let base = `http://${window.location.hostname}:${port}`
+  if (routeQueryPath) base += routeQueryPath
+  return base
+}
+
+/** Resolve a human-readable title for an app */
+export function resolveAppTitle(id: string): string {
+  return APP_TITLES[id] || id.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
+}

neode-ui/src/views/appSession/useAppIdentity.ts

@@ -0,0 +1,78 @@
+/** Composable for managing app identity selection and NIP-07 identity injection */
+
+import { type Ref } from 'vue'
+import { rpcClient } from '@/api/rpc-client'
+
+const IDENTITY_KEY = 'archipelago_app_identity_'
+
+export interface SelectedIdentity {
+  id: string
+  name: string
+  did: string
+  pubkey: string
+  nostr_pubkey?: string
+  nostr_npub?: string
+}
+
+function isIdentityAwareApp(id: string): boolean {
+  return id === 'indeedhub' || id === 'nostrudel'
+}
+
+export function useAppIdentity(
+  appId: Ref<string>,
+  iframeRef: Ref<HTMLIFrameElement | null>,
+  showIdentityPicker: Ref<boolean>,
+) {
+  function getStoredIdentity(): SelectedIdentity | null {
+    try {
+      const stored = localStorage.getItem(IDENTITY_KEY + appId.value)
+      return stored ? JSON.parse(stored) as SelectedIdentity : null
+    } catch { return null }
+  }
+
+  function storeIdentity(identity: SelectedIdentity) {
+    try { localStorage.setItem(IDENTITY_KEY + appId.value, JSON.stringify(identity)) } catch {}
+  }
+
+  async function sendIdentity(identity: SelectedIdentity) {
+    try {
+      const challenge = `archipelago-identity:${Date.now()}`
+      const sigRes = await rpcClient.call<{ signature: string }>({ method: 'identity.sign', params: { id: identity.id, message: challenge } })
+      iframeRef.value?.contentWindow?.postMessage({
+        type: 'archipelago:identity', did: identity.did, name: identity.name,
+        pubkey: identity.pubkey, nostr_pubkey: identity.nostr_pubkey || null,
+        nostr_npub: identity.nostr_npub || null, challenge, signature: sigRes.signature
+      }, '*')
+    } catch {}
+  }
+
+  function onIdentitySelected(identity: SelectedIdentity) {
+    showIdentityPicker.value = false
+    storeIdentity(identity)
+    sendIdentity(identity)
+  }
+
+  /** Called on iframe load to inject identity if the app supports it */
+  function onIframeLoadIdentity() {
+    if (isIdentityAwareApp(appId.value)) {
+      const stored = getStoredIdentity()
+      if (stored) sendIdentity(stored)
+      else showIdentityPicker.value = true
+    }
+  }
+
+  /** Handle identity request messages from iframe */
+  function handleIdentityRequest() {
+    const stored = getStoredIdentity()
+    if (stored) sendIdentity(stored)
+    else showIdentityPicker.value = true
+  }
+
+  return {
+    getStoredIdentity,
+    sendIdentity,
+    onIdentitySelected,
+    onIframeLoadIdentity,
+    handleIdentityRequest,
+  }
+}

neode-ui/src/views/appSession/useNostrBridge.ts

@@ -0,0 +1,58 @@
+/** Composable for NIP-07 Nostr signing bridge between parent and iframe */
+
+import { rpcClient } from '@/api/rpc-client'
+import type { SelectedIdentity } from './useAppIdentity'
+
+export function useNostrBridge(
+  getStoredIdentity: () => SelectedIdentity | null,
+  getAppUrl: () => string,
+) {
+  async function handleNostrRequest(event: MessageEvent) {
+    const { id, method, params } = event.data
+    const source = event.source as Window | null
+    if (!source) return
+    const storedIdentity = getStoredIdentity()
+    const identityId = storedIdentity?.id || null
+    if (import.meta.env.DEV) console.log(`[NIP-07] ${method} identityId=${identityId} storedPubkey=${storedIdentity?.nostr_pubkey?.slice(0, 12) || 'none'}`)
+
+    try {
+      let result: unknown
+      if (method === 'getPublicKey') {
+        // Use stored nostr_pubkey directly if available (avoids RPC call that may 401)
+        if (storedIdentity?.nostr_pubkey) {
+          result = storedIdentity.nostr_pubkey
+          if (import.meta.env.DEV) console.log('[NIP-07] getPublicKey from stored identity:', (result as string).slice(0, 12))
+        } else if (identityId) {
+          const res = await rpcClient.call<{ nostr_pubkey: string }>({ method: 'identity.get', params: { id: identityId } })
+          result = res.nostr_pubkey
+        } else {
+          const res = await rpcClient.call<{ nostr_pubkey: string }>({ method: 'node.nostr-pubkey' })
+          result = res.nostr_pubkey
+        }
+      } else if (method === 'signEvent') {
+        if (import.meta.env.DEV) console.log(`[NIP-07] signEvent kind=${params.event?.kind} using identity=${identityId || 'node-default'}`)
+        if (identityId) {
+          result = await rpcClient.call<unknown>({ method: 'identity.nostr-sign', params: { id: identityId, event: params.event } })
+        } else {
+          result = await rpcClient.call<unknown>({ method: 'node.nostr-sign', params: { event: params.event } })
+        }
+        if (import.meta.env.DEV) console.log('[NIP-07] signEvent OK')
+      } else if (method === 'getRelays') { result = {} }
+      else if (method === 'nip04.encrypt') { result = (await rpcClient.call<{ ciphertext: string }>({ method: 'identity.nostr-encrypt-nip04', params: { id: identityId || undefined, pubkey: params.pubkey, plaintext: params.plaintext } })).ciphertext }
+      else if (method === 'nip04.decrypt') { result = (await rpcClient.call<{ plaintext: string }>({ method: 'identity.nostr-decrypt-nip04', params: { id: identityId || undefined, pubkey: params.pubkey, ciphertext: params.ciphertext } })).plaintext }
+      else if (method === 'nip44.encrypt') { result = (await rpcClient.call<{ ciphertext: string }>({ method: 'identity.nostr-encrypt-nip44', params: { id: identityId || undefined, pubkey: params.pubkey, plaintext: params.plaintext } })).ciphertext }
+      else if (method === 'nip44.decrypt') { result = (await rpcClient.call<{ plaintext: string }>({ method: 'identity.nostr-decrypt-nip44', params: { id: identityId || undefined, pubkey: params.pubkey, ciphertext: params.ciphertext } })).plaintext }
+      else { throw new Error(`Unsupported NIP-07 method: ${method}`) }
+      const url = getAppUrl()
+      const targetOrigin = url ? new URL(url).origin : '*'
+      source.postMessage({ type: 'nostr-response', id, result }, targetOrigin)
+    } catch (err) {
+      if (import.meta.env.DEV) console.error(`[NIP-07] ${method} FAILED:`, err instanceof Error ? err.message : err)
+      const url = getAppUrl()
+      const targetOrigin = url ? new URL(url).origin : '*'
+      source.postMessage({ type: 'nostr-response', id, error: err instanceof Error ? err.message : 'Unknown error' }, targetOrigin)
+    }
+  }
+
+  return { handleNostrRequest }
+}

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

@@ -0,0 +1,176 @@
+<template>
+  <div
+    data-controller-container
+    :data-controller-launch="canLaunch(pkg) ? '' : undefined"
+    tabindex="0"
+    role="link"
+    class="glass-card p-6 transition-all hover:-translate-y-1 cursor-pointer relative min-w-0 overflow-hidden"
+    :class="{ 'card-stagger': showStagger }"
+    :style="{ '--stagger-index': index }"
+    @click="$emit('goToApp', id)"
+    @keydown.enter="$emit('goToApp', id)"
+  >
+    <!-- Uninstalling overlay -->
+    <div
+      v-if="isUninstalling"
+      class="absolute inset-0 z-20 flex items-center justify-center bg-black/70 backdrop-blur-sm rounded-xl"
+    >
+      <div class="flex items-center gap-3 text-white/90">
+        <svg class="animate-spin h-5 w-5" 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 class="text-sm font-medium">{{ t('common.uninstalling') }}...</span>
+      </div>
+    </div>
+
+    <!-- Uninstall Icon (not for web-only apps) -->
+    <button
+      v-if="!isWebOnly && !isUninstalling"
+      @click.stop="$emit('showUninstall', id, pkg)"
+      class="absolute top-4 right-4 p-2 rounded-lg text-white/60 hover:text-red-400 hover:bg-red-500/20 transition-colors z-10"
+      :aria-label="`${t('common.uninstall')} ${pkg.manifest?.title || id}`"
+      :title="t('common.uninstall')"
+    >
+      <svg class="w-5 h-5" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+      </svg>
+    </button>
+
+    <div class="flex items-start gap-4">
+      <img
+        :src="pkg['static-files']?.icon || `/assets/img/app-icons/${id}.png`"
+        :alt="pkg.manifest?.title || String(id)"
+        class="w-16 h-16 rounded-lg object-cover bg-white/10"
+        @error="handleImageError"
+      />
+      <div class="flex-1 min-w-0 overflow-hidden">
+        <h3 class="text-lg font-semibold text-white mb-1 truncate" :title="pkg.manifest.title">
+          {{ pkg.manifest.title }}
+        </h3>
+        <p class="text-sm text-white/70 mb-2 truncate">
+          {{ pkg.manifest?.description?.short || '' }}
+        </p>
+        <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)"
+          >
+            <svg
+              v-if="isTransitioning"
+              class="animate-spin h-3 w-3"
+              xmlns="http://www.w3.org/2000/svg"
+              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 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) }}
+          </span>
+          <span class="text-xs text-white/50">
+            v{{ pkg.manifest.version }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Quick Actions -->
+    <div v-if="!isUninstalling" class="mt-4 flex gap-2">
+      <button
+        v-if="canLaunch(pkg)"
+        data-controller-launch-btn
+        @click.stop="$emit('launch', id)"
+        class="flex-1 px-4 py-2 glass-button glass-button-sm rounded-lg text-sm font-medium flex items-center justify-center gap-1.5"
+      >
+        {{ 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>
+      <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"
+      >
+        <span>{{ pkg.state === 'exited' ? 'Restart' : t('common.start') }}</span>
+      </button>
+      <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"
+      >
+        <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">
+          <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>
+      <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"
+      >
+        <span>{{ t('common.stop') }}</span>
+      </button>
+      <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"
+        :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>
+      <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"
+      >
+        <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">
+          <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>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { PackageDataEntry } from '@/types/api'
+import {
+  isWebOnlyApp, opensInTab, canLaunch,
+  getStatusClass, getStatusLabel, handleImageError,
+} from './appsConfig'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  id: string
+  pkg: PackageDataEntry
+  index: number
+  showStagger: boolean
+  isLoading: boolean
+  isUninstalling: boolean
+}>()
+
+defineEmits<{
+  goToApp: [id: string]
+  launch: [id: string]
+  start: [id: string]
+  stop: [id: string]
+  restart: [id: string]
+  showUninstall: [id: string, pkg: PackageDataEntry]
+}>()
+
+const isWebOnly = computed(() => isWebOnlyApp(props.id))
+
+const isTransitioning = computed(() => {
+  const s = props.pkg.state
+  const h = props.pkg.health
+  return s === 'starting' || s === 'installing' || s === 'stopping' || s === 'restarting' || (s === 'running' && h === 'starting')
+})
+</script>

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

@@ -0,0 +1,90 @@
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div
+        v-if="show"
+        class="fixed inset-0 z-[3000] flex items-center justify-center p-4"
+        @click="$emit('close')"
+      >
+        <div class="absolute inset-0 bg-black/60 backdrop-blur-md"></div>
+        <div
+          ref="modalRef"
+          @click.stop
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="uninstall-dialog-title"
+          class="glass-card p-6 max-w-2xl w-full relative z-10"
+        >
+          <div class="flex items-start gap-4 mb-4">
+            <div class="p-3 bg-red-500/20 rounded-lg">
+              <svg class="w-6 h-6 text-red-400" aria-hidden="true" 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-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+            </div>
+            <div class="flex-1">
+              <h3 id="uninstall-dialog-title" class="text-xl font-semibold text-white mb-2">{{ t('apps.uninstallTitle') }}</h3>
+              <p class="text-white/70">
+                {{ t('apps.uninstallConfirm', { name: appTitle }) }}
+              </p>
+            </div>
+          </div>
+
+          <div class="flex gap-3 justify-end">
+            <button
+              @click="$emit('close')"
+              class="px-4 py-2 glass-button rounded-lg text-sm font-medium"
+            >
+              {{ t('common.cancel') }}
+            </button>
+            <button
+              @click="$emit('confirm')"
+              :disabled="uninstalling"
+              class="px-4 py-2 glass-button glass-button-danger rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+            >
+              <svg
+                v-if="uninstalling"
+                class="animate-spin h-4 w-4"
+                aria-hidden="true"
+                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>{{ uninstalling ? t('common.uninstalling') : t('common.uninstall') }}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useModalKeyboard } from '@/composables/useModalKeyboard'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  show: boolean
+  appTitle: string
+  uninstalling: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  confirm: []
+}>()
+
+const modalRef = ref<HTMLElement | null>(null)
+const restoreFocusRef = ref<HTMLElement | null>(null)
+
+useModalKeyboard(
+  modalRef,
+  computed(() => props.show),
+  () => emit('close'),
+  { restoreFocusRef },
+)
+</script>

neode-ui/src/views/apps/appsConfig.ts

@@ -0,0 +1,187 @@
+/** Static configuration for the Apps view */
+
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import { PackageState, type PackageDataEntry } from '@/types/api'
+
+// Service container name patterns (backend/infra, not user-facing)
+export const SERVICE_NAMES = new Set([
+  'dwn', 'archy-mempool-db', 'archy-btcpay-db', 'archy-nbxplorer', 'archy-tor',
+  'immich_postgres', 'immich_redis',
+  'penpot-postgres', 'penpot-valkey', 'penpot-backend', 'penpot-exporter',
+  'mysql-mempool', 'mempool-api', 'archy-mempool-web',
+  'archy-bitcoin-ui', 'archy-lnd-ui', 'archy-electrs-ui',
+  'indeedhub-postgres', 'indeedhub-redis', 'indeedhub-minio',
+  'indeedhub-relay', 'indeedhub-build_api_1', 'indeedhub-build_ffmpeg-worker_1',
+  'indeedhub-build_postgres_1', 'indeedhub-build_redis_1', 'indeedhub-build_minio_1',
+  'indeedhub-build_minio-init_1', 'indeedhub-build_relay_1',
+])
+
+export function isServiceContainer(id: string): boolean {
+  if (SERVICE_NAMES.has(id)) return true
+  if (id.startsWith('indeedhub-build_')) return true
+  if (id.startsWith('archy-')) return true
+  if (id.endsWith('_db') || id.endsWith('-db')) return true
+  return false
+}
+
+// Known app -> category mappings (matches App Store categorisation)
+export const APP_CATEGORY_MAP: Record<string, string> = {
+  'bitcoin-knots': 'money', 'bitcoin-ui': 'money', 'electrumx': 'money', 'electrs': 'money',
+  'lnd': 'money', 'mempool': 'money', 'mempool-web': 'money', 'btcpay-server': 'commerce',
+  'fedimint': 'money', 'fedimint-gateway': 'money',
+  'indeedhub': 'media', 'jellyfin': 'media', 'photoprism': 'media', 'immich': 'media',
+  'nextcloud': 'data', 'vaultwarden': 'data', 'filebrowser': 'data', 'onlyoffice': 'data',
+  'homeassistant': 'home', 'lorabell': 'home', 'endurain': 'home',
+  'searxng': 'community', 'ollama': 'community', 'grafana': 'data',
+  'nostr-rs-relay': 'nostr', 'nostrudel': 'nostr',
+  'tailscale': 'networking', 'nginx-proxy-manager': 'networking', 'portainer': 'networking',
+  'uptime-kuma': 'networking', 'dwn': 'data',
+  'botfights': 'l484', 'nwnn': 'l484', '484-kitchen': 'l484',
+  'call-the-operator': 'l484', 'syntropy-institute': 'l484', 't-zero': 'l484',
+}
+
+export function getAppCategory(id: string, pkg: PackageDataEntry): string {
+  if (APP_CATEGORY_MAP[id]) return APP_CATEGORY_MAP[id]
+  const cat = (pkg.manifest as unknown as Record<string, unknown>)?.category as string | undefined
+  return cat || 'other'
+}
+
+// Web-only app IDs and their URLs
+export const WEB_ONLY_APP_URLS: Record<string, string> = {
+  'botfights': 'https://botfights.net',
+  'nwnn': 'https://nwnn.l484.com',
+  '484-kitchen': 'https://484.kitchen',
+  'call-the-operator': 'https://cta.tx1138.com',
+  'syntropy-institute': 'https://syntropy.institute',
+  't-zero': 'https://teeminuszero.net',
+}
+
+export function isWebOnlyApp(id: string): boolean {
+  return id in WEB_ONLY_APP_URLS
+}
+
+// Web-only apps (no container) -- always show as installed bookmarks
+export const WEB_ONLY_APPS: Record<string, PackageDataEntry> = {
+  'botfights': {
+    state: 'running' as PackageState,
+    manifest: { id: 'botfights', title: 'BotFights', version: '1.0.0', description: { short: 'AI bot arena — build, train, and battle autonomous agents', long: '' }, 'release-notes': '', license: '', 'wrapper-repo': '', 'upstream-repo': '', 'support-site': '', 'marketing-site': '', 'donation-url': null },
+    'static-files': { license: '', instructions: '', icon: '/assets/img/app-icons/botfights.svg' },
+  },
+  'nwnn': {
+    state: 'running' as PackageState,
+    manifest: { id: 'nwnn', title: 'Next Web News Network', version: '1.0.0', description: { short: 'Decentralized news aggregator, synced from Telegram', long: '' }, 'release-notes': '', license: '', 'wrapper-repo': '', 'upstream-repo': '', 'support-site': '', 'marketing-site': '', 'donation-url': null },
+    'static-files': { license: '', instructions: '', icon: '/assets/img/app-icons/nwnn.png' },
+  },
+  '484-kitchen': {
+    state: 'running' as PackageState,
+    manifest: { id: '484-kitchen', title: '484 Kitchen', version: '1.0.0', description: { short: 'K484 application platform', long: '' }, 'release-notes': '', license: '', 'wrapper-repo': '', 'upstream-repo': '', 'support-site': '', 'marketing-site': '', 'donation-url': null },
+    'static-files': { license: '', instructions: '', icon: '/assets/img/app-icons/484-kitchen.png' },
+  },
+  'call-the-operator': {
+    state: 'running' as PackageState,
+    manifest: { id: 'call-the-operator', title: 'Call the Operator', version: '1.0.0', description: { short: 'Escape the Matrix — explore decentralized alternatives', long: '' }, 'release-notes': '', license: '', 'wrapper-repo': '', 'upstream-repo': '', 'support-site': '', 'marketing-site': '', 'donation-url': null },
+    'static-files': { license: '', instructions: '', icon: '/assets/img/app-icons/call-the-operator.png' },
+  },
+  'syntropy-institute': {
+    state: 'running' as PackageState,
+    manifest: { id: 'syntropy-institute', title: 'Syntropy Institute', version: '1.0.0', description: { short: 'Medicine Reimagined — frequency analysis-therapy', long: '' }, 'release-notes': '', license: '', 'wrapper-repo': '', 'upstream-repo': '', 'support-site': '', 'marketing-site': '', 'donation-url': null },
+    'static-files': { license: '', instructions: '', icon: '/assets/img/app-icons/syntropy-institute.png' },
+  },
+  't-zero': {
+    state: 'running' as PackageState,
+    manifest: { id: 't-zero', title: 'T-0', version: '1.0.0', description: { short: 'Documentary series on decentralization and Bitcoin', long: '' }, 'release-notes': '', license: '', 'wrapper-repo': '', 'upstream-repo': '', 'support-site': '', 'marketing-site': '', 'donation-url': null },
+    'static-files': { license: '', instructions: '', icon: '/assets/img/app-icons/t-zero.png' },
+  },
+}
+
+/** Apps that open in a new browser tab (X-Frame-Options blocks iframe) */
+export const TAB_LAUNCH_APPS = new Set([
+  'btcpay-server', 'grafana', 'photoprism', 'homeassistant',
+  'vaultwarden', 'nextcloud', 'uptime-kuma', 'portainer',
+  'onlyoffice', 'nginx-proxy-manager', 'tailscale',
+])
+
+export function opensInTab(id: string): boolean {
+  return TAB_LAUNCH_APPS.has(id)
+}
+
+export function canLaunch(pkg: PackageDataEntry): boolean {
+  if (isWebOnlyApp(pkg.manifest.id)) return true
+  const hasUI = pkg.manifest.interfaces?.main?.ui || pkg.installed?.['interface-addresses']?.main
+  const canLaunchState = pkg.state === 'running' || pkg.state === 'starting'
+  return !!hasUI && canLaunchState
+}
+
+export function getStatusClass(state: PackageState, health?: string | 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) {
+    case PackageState.Running:
+      return 'bg-green-500/20 text-green-200'
+    case PackageState.Stopped:
+      return 'bg-gray-500/20 text-gray-200'
+    case PackageState.Exited:
+      return 'bg-red-500/20 text-red-200'
+    case PackageState.Starting:
+    case PackageState.Stopping:
+    case PackageState.Restarting:
+      return 'bg-yellow-500/20 text-yellow-200'
+    case PackageState.Installing:
+      return 'bg-blue-500/20 text-blue-200'
+    default:
+      return 'bg-gray-500/20 text-gray-200'
+  }
+}
+
+export function getStatusLabel(state: PackageState, health?: string | 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'
+  return state
+}
+
+export function buildAllCategories(t: (key: string) => string) {
+  return [
+    { id: 'all', name: t('marketplace.all') },
+    { id: 'community', name: t('marketplace.community') },
+    { id: 'nostr', name: 'Nostr' },
+    { id: 'commerce', name: t('marketplace.commerce') },
+    { id: 'money', name: t('marketplace.money') },
+    { id: 'data', name: t('marketplace.data') },
+    { id: 'media', name: 'Media' },
+    { id: 'home', name: t('marketplace.homeCategory') },
+    { id: 'networking', name: t('marketplace.networking') },
+    { id: 'l484', name: 'L484' },
+    { id: 'other', name: t('marketplace.other') },
+  ]
+}
+
+export function useCategoriesWithApps(
+  packages: Ref<Record<string, PackageDataEntry>>,
+  allCategories: Ref<Array<{ id: string; name: string }>>,
+) {
+  return computed(() => {
+    const entries = Object.entries(packages.value).filter(([id]) => !isServiceContainer(id))
+    return allCategories.value.filter(cat => {
+      if (cat.id === 'all') return true
+      return entries.some(([id, pkg]) => getAppCategory(id, pkg) === cat.id)
+    })
+  })
+}
+
+export function handleImageError(e: Event) {
+  const target = e.target as HTMLImageElement
+  const currentSrc = target.src
+  const placeholderSvg = `data:image/svg+xml,${encodeURIComponent(`
+    <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="64" height="64" rx="12" fill="rgba(255,255,255,0.1)"/>
+      <path d="M32 20L40 28H36V40H28V28H24L32 20Z" fill="rgba(255,255,255,0.6)"/>
+      <path d="M20 44H44V48H20V44Z" fill="rgba(255,255,255,0.4)"/>
+    </svg>
+  `)}`
+  if (!currentSrc.includes('data:image')) {
+    target.src = placeholderSvg
+  }
+}

neode-ui/src/views/apps/useAppsActions.ts

@@ -0,0 +1,104 @@
+/** Composable for app start/stop/restart/uninstall actions */
+
+import { ref, onBeforeUnmount } from 'vue'
+import { useAppStore } from '@/stores/app'
+
+export function useAppsActions() {
+  const store = useAppStore()
+  const loadingActions = ref<Record<string, boolean>>({})
+  const actionError = ref('')
+  let errorTimer: ReturnType<typeof setTimeout> | undefined
+  const actionTimers = new Map<string, ReturnType<typeof setTimeout>>()
+
+  const uninstalling = ref(false)
+  const uninstallingApps = ref<Set<string>>(new Set())
+
+  function showActionError(msg: string) {
+    actionError.value = msg
+    if (errorTimer) clearTimeout(errorTimer)
+    errorTimer = setTimeout(() => { actionError.value = '' }, 5000)
+  }
+
+  async function startApp(id: string) {
+    loadingActions.value[id] = true
+    try {
+      await store.startPackage(id)
+      if (actionTimers.has(id)) clearTimeout(actionTimers.get(id)!)
+      actionTimers.set(id, setTimeout(() => {
+        loadingActions.value[id] = false
+        actionTimers.delete(id)
+      }, 5000))
+    } catch (err) {
+      if (import.meta.env.DEV) console.error('Failed to start app:', err)
+      showActionError(`Failed to start app: ${err instanceof Error ? err.message : 'Unknown error'}`)
+      loadingActions.value[id] = false
+    }
+  }
+
+  async function stopApp(id: string) {
+    loadingActions.value[id] = true
+    try {
+      await store.stopPackage(id)
+      if (actionTimers.has(id)) clearTimeout(actionTimers.get(id)!)
+      actionTimers.set(id, setTimeout(() => {
+        loadingActions.value[id] = false
+        actionTimers.delete(id)
+      }, 5000))
+    } catch (err) {
+      if (import.meta.env.DEV) console.error('Failed to stop app:', err)
+      showActionError(`Failed to stop app: ${err instanceof Error ? err.message : 'Unknown error'}`)
+      loadingActions.value[id] = false
+    }
+  }
+
+  async function restartApp(id: string) {
+    loadingActions.value[id] = true
+    try {
+      await store.restartPackage(id)
+      if (actionTimers.has(id)) clearTimeout(actionTimers.get(id)!)
+      actionTimers.set(id, setTimeout(() => {
+        loadingActions.value[id] = false
+        actionTimers.delete(id)
+      }, 8000))
+    } catch (err) {
+      if (import.meta.env.DEV) console.error('Failed to restart app:', err)
+      showActionError(`Failed to restart app: ${err instanceof Error ? err.message : 'Unknown error'}`)
+      loadingActions.value[id] = false
+    }
+  }
+
+  async function confirmUninstall(appId: string) {
+    uninstalling.value = true
+    try {
+      uninstallingApps.value.add(appId)
+      await store.uninstallPackage(appId)
+      if (store.packages && store.packages[appId]) {
+        delete store.packages[appId]
+      }
+    } 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'}`)
+    } finally {
+      uninstallingApps.value.delete(appId)
+      uninstalling.value = false
+    }
+  }
+
+  onBeforeUnmount(() => {
+    for (const t of actionTimers.values()) clearTimeout(t)
+    actionTimers.clear()
+    if (errorTimer) clearTimeout(errorTimer)
+  })
+
+  return {
+    loadingActions,
+    actionError,
+    uninstalling,
+    uninstallingApps,
+    showActionError,
+    startApp,
+    stopApp,
+    restartApp,
+    confirmUninstall,
+  }
+}

neode-ui/src/views/dashboard/ConnectionBanner.vue

@@ -0,0 +1,34 @@
+<template>
+  <!-- Offline Banner -->
+  <div v-if="isOffline && !store.isReconnecting && store.isAuthenticated" class="path-option-card mx-6 mt-6 px-6 py-3 border-l-4 border-yellow-500">
+    <div class="flex items-center gap-2 text-yellow-200">
+      <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+      </svg>
+      <span class="font-medium">
+        {{ isRestarting ? 'Server is restarting...' : isShuttingDown ? 'Server is shutting down...' : 'Connection lost' }}
+      </span>
+    </div>
+  </div>
+
+  <!-- Reconnecting Banner -->
+  <div v-if="store.isReconnecting && store.isAuthenticated" class="path-option-card mx-6 mt-6 px-6 py-3 border-l-4 border-blue-500">
+    <div class="flex items-center gap-2 text-blue-200">
+      <svg class="w-5 h-5 animate-spin" 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>
+      <span class="font-medium">Reconnecting...</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useAppStore } from '@/stores/app'
+
+const store = useAppStore()
+
+const isOffline = computed(() => store.isOffline)
+const isRestarting = computed(() => store.isRestarting)
+const isShuttingDown = computed(() => store.isShuttingDown)
+</script>

neode-ui/src/views/dashboard/DashboardMobileNav.vue

@@ -0,0 +1,244 @@
+<template>
+  <!-- Persistent Mobile Tabs for Apps/Marketplace -->
+  <div
+    v-if="showAppsTabs"
+    class="md:hidden fixed top-0 left-0 right-0 z-40 px-4 pt-4 pb-2 glass-piece"
+    :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);"
+  >
+    <div class="mode-switcher mode-switcher-full">
+      <RouterLink
+        to="/dashboard/apps"
+        class="mode-switcher-btn"
+        :class="{ 'mode-switcher-btn-active': (route.path === '/dashboard/apps' || route.path.startsWith('/dashboard/apps/')) && route.query.tab !== 'services' }"
+        @click.prevent="router.push({ path: '/dashboard/apps', query: {} })"
+      >My Apps</RouterLink>
+      <RouterLink
+        to="/dashboard/discover"
+        class="mode-switcher-btn"
+        :class="{ 'mode-switcher-btn-active': route.path === '/dashboard/marketplace' || route.path.startsWith('/dashboard/marketplace/') || route.path === '/dashboard/discover' }"
+      >App Store</RouterLink>
+      <RouterLink
+        to="/dashboard/apps?tab=services"
+        class="mode-switcher-btn"
+        :class="{ 'mode-switcher-btn-active': route.query.tab === 'services' }"
+      >Services</RouterLink>
+    </div>
+  </div>
+
+  <!-- Persistent Mobile Tabs for Network/Cloud -->
+  <div
+    v-if="showNetworkTabs"
+    class="md:hidden fixed top-0 left-0 right-0 z-40 px-4 pt-4 pb-2 glass-piece"
+    :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' }"
+  >
+    <div class="mode-switcher mode-switcher-full">
+      <RouterLink
+        to="/dashboard/web5"
+        class="mode-switcher-btn"
+        :class="{ 'mode-switcher-btn-active': route.path === '/dashboard/web5' || route.path.startsWith('/dashboard/web5/') }"
+      >Web5</RouterLink>
+      <RouterLink
+        to="/dashboard/cloud"
+        class="mode-switcher-btn"
+        :class="{ 'mode-switcher-btn-active': route.path === '/dashboard/cloud' || route.path.startsWith('/dashboard/cloud/') }"
+      >Cloud</RouterLink>
+      <RouterLink
+        to="/dashboard/server"
+        class="mode-switcher-btn"
+        :class="{ 'mode-switcher-btn-active': route.path === '/dashboard/server' || route.path.startsWith('/dashboard/server/') }"
+      >Network</RouterLink>
+      <RouterLink
+        to="/dashboard/mesh"
+        class="mode-switcher-btn"
+        :class="{ 'mode-switcher-btn-active': route.path === '/dashboard/mesh' || route.path.startsWith('/dashboard/mesh/') }"
+      >Mesh</RouterLink>
+    </div>
+  </div>
+
+  <!-- Mobile Bottom Tab Bar -->
+  <nav
+    ref="mobileTabBar"
+    data-mobile-tab-bar
+    :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);"
+  >
+    <div class="flex justify-around items-center px-2 py-3 relative">
+      <RouterLink
+        v-for="item in mobileNavItems"
+        :key="item.path"
+        :to="item.path"
+        aria-current-value="page"
+        @click="appLauncher.closePanel()"
+        class="flex flex-col items-center justify-center w-full py-1.5 rounded-lg text-white/70 transition-all duration-300 relative z-10 gap-0.5"
+        :class="{
+          'nav-tab-active': item.isCombined
+            ? (item.path === '/dashboard/apps'
+                ? (route.path.includes('/apps') || route.path.includes('/marketplace') || route.path.includes('/discover') || route.path.includes('/app-session'))
+                : item.path === '/dashboard/web5'
+                  ? (route.path.includes('/web5') || route.path.includes('/federation') || route.path.includes('/mesh'))
+                  : (route.path.includes('/cloud') || route.path.includes('/server')))
+            : undefined
+        }"
+        :exact-active-class="item.isCombined ? undefined : 'nav-tab-active'"
+      >
+        <svg v-if="item.icon === 'web5'" class="w-6 h-6 transition-all duration-300" aria-hidden="true" fill="currentColor" viewBox="0 0 1631 1624">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M914.932 359.228H916.229V715.252H1630.47V1088.98H1451.41V1267.98H1274.33V1445H1093.31V1624H715.534V1264.77H714.237V908.748H0V535.02H179.051V356.025H356.135V178.996H537.154V0H914.932V359.228ZM916.229 1425.33H1073.64V1248.31H1254.66V1071.28H1431.74V913.918H916.229V1425.33ZM556.83 375.695H375.811V552.723H198.727V710.082H714.237V198.666H556.83V375.695Z" />
+        </svg>
+        <svg v-else class="w-6 h-6 transition-all duration-300" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            v-for="(path, index) in getIconPath(item.icon)"
+            :key="index"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            :d="path"
+          />
+        </svg>
+        <span class="text-[10px] leading-tight">{{ item.label }}</span>
+      </RouterLink>
+      <!-- Chat launcher -->
+      <button
+        @click="router.push('/dashboard/chat')"
+        class="chat-launcher-btn-mobile flex flex-col items-center justify-center w-full py-1.5 rounded-lg transition-all duration-300 relative z-10 gap-0.5"
+      >
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path v-for="(path, index) in getIconPath('chat')" :key="index" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="path" />
+        </svg>
+        <span class="text-[10px] leading-tight">AIUI</span>
+      </button>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { RouterLink, useRouter, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useAppLauncherStore } from '@/stores/appLauncher'
+import { useUIModeStore } from '@/stores/uiMode'
+
+interface NavItem {
+  path: string
+  label: string
+  icon: string
+  isCombined?: boolean
+}
+
+defineProps<{
+  showZoomIn: boolean
+}>()
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const appLauncher = useAppLauncherStore()
+const uiMode = useUIModeStore()
+
+const mobileTabBar = ref<HTMLElement | null>(null)
+
+// Show persistent tabs for Apps/Marketplace on mobile
+const showAppsTabs = computed(() => {
+  if (typeof window === 'undefined') return false
+  if (window.innerWidth >= 768) return false
+  return route.path.includes('/apps') || route.path.includes('/marketplace') || route.path.includes('/discover')
+})
+
+// Show persistent tabs for Network/Cloud on mobile
+const showNetworkTabs = computed(() => {
+  if (typeof window === 'undefined') return false
+  if (window.innerWidth >= 768) return false
+  if (route.name === 'cloud-folder') return false
+  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
+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
+  return 0
+})
+
+defineExpose({
+  showAppsTabs,
+  showNetworkTabs,
+  mobileTabPaddingTop,
+})
+
+function updateTabBarHeight() {
+  if (typeof window === 'undefined') return
+  if (mobileTabBar.value) {
+    const height = mobileTabBar.value.offsetHeight
+    document.documentElement.style.setProperty('--mobile-tab-bar-height', `${height}px`)
+  }
+}
+
+function onResize() {
+  updateTabBarHeight()
+}
+
+onMounted(() => {
+  updateTabBarHeight()
+  window.addEventListener('resize', onResize)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', onResize)
+})
+
+// Re-measure on route changes
+watch(() => route.path, () => {
+  nextTick(() => {
+    updateTabBarHeight()
+  })
+})
+
+const gamerMobileNav: NavItem[] = [
+  { path: '/dashboard', label: 'Home', icon: 'home' },
+  { path: '/dashboard/apps', label: 'Apps', icon: 'apps', isCombined: true },
+  { path: '/dashboard/web5', label: 'Web5', icon: 'web5', isCombined: true },
+  { path: '/dashboard/settings', label: 'Settings', icon: 'settings' },
+]
+
+const easyMobileNav: NavItem[] = [
+  { path: '/dashboard', label: 'Home', icon: 'home' },
+  { path: '/dashboard/apps', label: 'Apps', icon: 'apps' },
+  { path: '/dashboard/cloud', label: 'Cloud', icon: 'cloud' },
+  { path: '/dashboard/settings', label: 'Settings', icon: 'settings' },
+]
+
+const chatMobileNav: NavItem[] = [
+  { path: '/dashboard', label: 'Home', icon: 'home' },
+  { path: '/dashboard/apps', label: 'Apps', icon: 'apps' },
+  { path: '/dashboard/settings', label: 'Settings', icon: 'settings' },
+]
+
+const mobileNavItems = computed(() => {
+  if (uiMode.isEasy) return easyMobileNav
+  if (uiMode.isChat) return chatMobileNav
+  return gamerMobileNav
+})
+
+function getIconPath(iconName: string): string[] {
+  const icons: Record<string, string[]> = {
+    home: ['M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'],
+    apps: ['M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z'],
+    cloud: ['M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z'],
+    server: ['M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01'],
+    web5: ['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'],
+    mesh: ['M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01M5.636 13.636a9 9 0 0112.728 0M1.5 10.5a14 14 0 0121 0'],
+    fleet: ['M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2'],
+    chat: ['M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'],
+    settings: [
+      'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z',
+      'M15 12a3 3 0 11-6 0 3 3 0 016 0z',
+    ],
+  }
+  return icons[iconName] || []
+}
+</script>

neode-ui/src/views/dashboard/DashboardSidebar.vue

@@ -0,0 +1,187 @@
+<template>
+  <aside
+    v-show="!chatFullscreen"
+    data-controller-zone="sidebar"
+    class="hidden md:flex w-[256px] flex-shrink-0 relative flex-col z-10"
+    :class="{ 'sidebar-animate': showZoomIn }"
+  >
+    <div class="sidebar-shell">
+      <div class="sidebar-inner flex flex-col min-h-full">
+        <div class="sidebar-logo flex items-center gap-3 mb-8 p-6 pb-0 shrink-0">
+          <AnimatedLogo />
+          <div class="min-w-0 flex-1">
+            <h2 class="text-lg font-semibold text-white truncate">{{ serverName }}</h2>
+            <p class="text-xs text-white/60">v{{ version }}</p>
+          </div>
+        </div>
+
+        <nav class="sidebar-nav flex-1 min-h-0 space-y-2 p-6 pt-4" :aria-label="t('dashboard.mainNav')">
+          <RouterLink
+            v-for="(item, idx) in desktopNavItems"
+            :key="item.path"
+            :to="item.path"
+            aria-current-value="page"
+            class="sidebar-nav-item flex items-center gap-3 px-4 py-3 rounded-lg text-white/80 hover:bg-white/10 hover:text-white transition-colors"
+            :class="{ 'nav-tab-active': item.isCombined && (route.path.includes('/apps') || route.path.includes('/marketplace') || route.path.includes('/discover') || route.path.includes('/app-session') || (item.path === '/dashboard/apps' && !!appLauncher.panelAppId)) }"
+            :exact-active-class="item.isCombined ? undefined : 'nav-tab-active'"
+            @click="appLauncher.closePanel()"
+            :style="{ '--nav-stagger': idx }"
+          >
+            <svg v-if="item.icon === 'web5'" class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 1631 1624">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M914.932 359.228H916.229V715.252H1630.47V1088.98H1451.41V1267.98H1274.33V1445H1093.31V1624H715.534V1264.77H714.237V908.748H0V535.02H179.051V356.025H356.135V178.996H537.154V0H914.932V359.228ZM916.229 1425.33H1073.64V1248.31H1254.66V1071.28H1431.74V913.918H916.229V1425.33ZM556.83 375.695H375.811V552.723H198.727V710.082H714.237V198.666H556.83V375.695Z" />
+            </svg>
+            <svg v-else class="w-5 h-5" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                v-for="(path, index) in getIconPath(item.icon)"
+                :key="index"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                :d="path"
+              />
+            </svg>
+            <span>{{ item.label }}</span>
+            <span
+              v-if="item.path === '/dashboard/web5' && web5Badge.pendingRequestCount > 0"
+              class="ml-auto w-5 h-5 flex items-center justify-center rounded-full bg-orange-500 text-white text-[10px] font-bold"
+            >{{ web5Badge.pendingRequestCount }}</span>
+            <span
+              v-if="item.path === '/dashboard/mesh' && meshStore.totalUnread > 0"
+              class="ml-auto w-5 h-5 flex items-center justify-center rounded-full bg-orange-500 text-white text-[10px] font-bold"
+            >{{ meshStore.totalUnread }}</span>
+          </RouterLink>
+
+          <!-- Chat launcher button -->
+          <button
+            @click="router.push('/dashboard/chat')"
+            class="chat-launcher-btn w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-300"
+          >
+            <svg class="w-5 h-5" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path v-for="(path, index) in getIconPath('chat')" :key="index" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="path" />
+            </svg>
+            <span>AIUI</span>
+          </button>
+
+          <!-- Logout - styled as nav item, below Settings -->
+          <button
+            @click="$emit('logout')"
+            class="sidebar-logout-btn w-full flex items-center gap-3 px-4 py-3 rounded-lg text-white/80 hover:bg-white/10 hover:text-white transition-colors"
+          >
+            <svg class="w-5 h-5" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+            </svg>
+            <span>Logout</span>
+          </button>
+        </nav>
+
+        <div class="sidebar-controller px-6 pb-2 shrink-0">
+          <ControllerIndicator />
+        </div>
+
+        <!-- Online status -->
+        <div class="px-6 pb-2 shrink-0">
+          <div class="rounded-lg bg-white/5 border border-white/10 px-4 py-2.5">
+            <OnlineStatusPill />
+          </div>
+        </div>
+
+        <!-- Mode switcher -->
+        <div class="px-6 pb-6 shrink-0">
+          <ModeSwitcher />
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RouterLink, useRouter, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@/stores/app'
+import { useAppLauncherStore } from '@/stores/appLauncher'
+import { useUIModeStore } from '@/stores/uiMode'
+import { useWeb5BadgeStore } from '@/stores/web5Badge'
+import { useMeshStore } from '@/stores/mesh'
+import AnimatedLogo from '@/components/AnimatedLogo.vue'
+import OnlineStatusPill from '@/components/OnlineStatusPill.vue'
+import ControllerIndicator from '@/components/ControllerIndicator.vue'
+import ModeSwitcher from '@/components/ModeSwitcher.vue'
+
+interface NavItem {
+  path: string
+  label: string
+  icon: string
+  isCombined?: boolean
+}
+
+defineProps<{
+  showZoomIn: boolean
+}>()
+
+defineEmits<{
+  logout: []
+}>()
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const store = useAppStore()
+const appLauncher = useAppLauncherStore()
+const uiMode = useUIModeStore()
+const web5Badge = useWeb5BadgeStore()
+const meshStore = useMeshStore()
+
+const chatFullscreen = computed(() => route.path === '/dashboard/chat')
+const serverName = computed(() => store.serverName)
+const version = computed(() => store.serverInfo?.version || '0.0.0')
+
+const gamerDesktopNav: NavItem[] = [
+  { path: '/dashboard', label: 'Home', icon: 'home' },
+  { path: '/dashboard/apps', label: 'Apps', icon: 'apps', isCombined: true },
+  { path: '/dashboard/cloud', label: 'Cloud', icon: 'cloud' },
+  { path: '/dashboard/mesh', label: 'Mesh', icon: 'mesh' },
+  { path: '/dashboard/server', label: 'Network', icon: 'server' },
+  { path: '/dashboard/web5', label: 'Web5', icon: 'web5' },
+  { path: '/dashboard/fleet', label: 'Fleet', icon: 'fleet' },
+  { path: '/dashboard/settings', label: 'Settings', icon: 'settings' },
+]
+
+const easyDesktopNav: NavItem[] = [
+  { path: '/dashboard', label: 'Home', icon: 'home' },
+  { path: '/dashboard/apps', label: 'My Apps', icon: 'apps' },
+  { path: '/dashboard/cloud', label: 'Cloud', icon: 'cloud' },
+  { path: '/dashboard/settings', label: 'Settings', icon: 'settings' },
+]
+
+const chatDesktopNav: NavItem[] = [
+  { path: '/dashboard', label: 'Home', icon: 'home' },
+  { path: '/dashboard/apps', label: 'My Apps', icon: 'apps' },
+  { path: '/dashboard/settings', label: 'Settings', icon: 'settings' },
+]
+
+const desktopNavItems = computed(() => {
+  if (uiMode.isEasy) return easyDesktopNav
+  if (uiMode.isChat) return chatDesktopNav
+  return gamerDesktopNav
+})
+
+function getIconPath(iconName: string): string[] {
+  const icons: Record<string, string[]> = {
+    home: ['M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'],
+    apps: ['M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z'],
+    marketplace: ['M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z'],
+    cloud: ['M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z'],
+    server: ['M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01'],
+    web5: ['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'],
+    mesh: ['M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01M5.636 13.636a9 9 0 0112.728 0M1.5 10.5a14 14 0 0121 0'],
+    fleet: ['M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2'],
+    chat: ['M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'],
+    settings: [
+      'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z',
+      'M15 12a3 3 0 11-6 0 3 3 0 016 0z',
+    ],
+  }
+  return icons[iconName] || []
+}
+</script>

neode-ui/src/views/dashboard/HealthNotifications.vue

@@ -0,0 +1,66 @@
+<template>
+  <div
+    v-if="healthNotifications.length > 0"
+    class="fixed top-4 right-4 z-[200] flex flex-col gap-2 max-w-sm"
+  >
+    <div
+      v-for="notif in healthNotifications"
+      :key="notif.id"
+      class="p-3 rounded-xl border backdrop-blur-lg shadow-lg"
+      :class="notif.level === 'error'
+        ? 'bg-red-500/15 border-red-500/30'
+        : notif.level === 'warning'
+          ? 'bg-yellow-500/15 border-yellow-500/30'
+          : 'bg-blue-500/15 border-blue-500/30'"
+    >
+      <div class="flex items-start gap-2">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mt-0.5 shrink-0" :class="notif.level === 'error' ? 'text-red-400' : notif.level === 'warning' ? 'text-yellow-400' : 'text-blue-400'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <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 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z" />
+        </svg>
+        <div class="flex-1 min-w-0">
+          <p class="text-sm font-medium text-white">{{ notif.title }}</p>
+          <p class="text-xs text-white/60 mt-0.5">{{ notif.message }}</p>
+        </div>
+        <button
+          class="text-white/40 hover:text-white/80 transition-colors shrink-0"
+          @click="dismissNotification(notif.id)"
+        >
+          <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="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useAppStore } from '@/stores/app'
+
+const store = useAppStore()
+
+const dismissedNotifications = ref<Set<string>>(new Set())
+
+const healthNotifications = computed(() => {
+  const notifs = store.data?.notifications ?? []
+  const visible = notifs.filter(n => !dismissedNotifications.value.has(n.id))
+  // Deduplicate: keep only the latest notification per container/title
+  const seen = new Map<string, typeof visible[0]>()
+  for (const n of visible) {
+    seen.set(n.title, n)
+  }
+  return [...seen.values()].slice(-3)
+})
+
+function dismissNotification(id: string) {
+  // Dismiss all notifications with the same title (container name)
+  const notif = (store.data?.notifications ?? []).find(n => n.id === id)
+  if (notif) {
+    for (const n of store.data?.notifications ?? []) {
+      if (n.title === notif.title) dismissedNotifications.value.add(n.id)
+    }
+  }
+  dismissedNotifications.value.add(id)
+}
+</script>

neode-ui/src/views/dashboard/dashboard-styles.css

@@ -0,0 +1,900 @@
+/* Dashboard animations and transitions
+ * Extracted from Dashboard.vue — 2advanced-style cinematic motion system
+ */
+
+/* Background - zoom in from depth with motion blur */
+.zoom-reveal-bg {
+  animation: zoom-reveal 2.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  transform-origin: center center;
+  opacity: 0;
+  transform: scale(0.15);
+  filter: blur(24px);
+}
+
+@keyframes zoom-reveal {
+  0% {
+    opacity: 0;
+    transform: scale(0.15);
+    filter: blur(24px);
+  }
+  35% {
+    opacity: 0.5;
+    transform: scale(0.5);
+    filter: blur(20px);
+  }
+  65% {
+    opacity: 0.85;
+    transform: scale(0.88);
+    filter: blur(6px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0);
+  }
+}
+
+/* 2advanced-style glass assembly - fluid, layered, deliberate timing */
+.glass-throw-active {
+  perspective: 1400px;
+}
+
+.glass-piece {
+  will-change: transform, opacity;
+}
+
+/* Sidebar - animates in at end with separate parts (like cards) */
+.sidebar-shell {
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  border-right: 1px solid transparent;
+  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}
+
+.sidebar-animate .sidebar-shell {
+  animation: sidebar-shell-fly 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  animation-delay: 5.2s;
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+@keyframes sidebar-shell-fly {
+  0% {
+    opacity: 0;
+    transform: translateX(-100%);
+    border-color: transparent;
+  }
+  70% {
+    opacity: 1;
+    transform: translateX(0);
+    border-color: transparent;
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+    border-color: rgba(255, 255, 255, 0.18);
+  }
+}
+
+.sidebar-inner {
+  overflow: hidden;
+}
+
+/* Only hide sidebar content when doing the login entrance animation */
+.sidebar-animate .sidebar-inner {
+  opacity: 0;
+  animation: sidebar-inner-draw 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  animation-delay: 6.1s;
+}
+
+@keyframes sidebar-inner-draw {
+  0% {
+    opacity: 0;
+    clip-path: inset(0 100% 0 0);
+  }
+  20% { opacity: 1; }
+  100% {
+    opacity: 1;
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+.sidebar-nav-item {
+  opacity: 0;
+  transform: translateX(-12px);
+}
+
+.sidebar-animate .sidebar-nav-item {
+  animation: sidebar-nav-item-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  animation-delay: calc(6.3s + var(--nav-stagger, 0) * 0.06s);
+}
+
+@keyframes sidebar-nav-item-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-12px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.sidebar-controller {
+  opacity: 0;
+}
+
+.sidebar-animate .sidebar-controller {
+  animation: sidebar-fade-in 0.4s ease-out forwards;
+  animation-delay: 6.9s;
+}
+
+.sidebar-logout-btn {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.sidebar-animate .sidebar-logout-btn {
+  animation: sidebar-logout-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  animation-delay: 7.1s;
+}
+
+@keyframes sidebar-fade-in {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes sidebar-logout-pop {
+  0% {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.sidebar-logo {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.sidebar-animate .sidebar-logo {
+  animation: sidebar-logo-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  animation-delay: 6.15s;
+}
+
+@keyframes sidebar-logo-in {
+  0% {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* When not animating, show everything (direct load / hard refresh) */
+aside:not(.sidebar-animate) .sidebar-shell {
+  border-color: rgba(255, 255, 255, 0.18);
+  opacity: 1;
+  transform: none;
+}
+aside:not(.sidebar-animate) .sidebar-inner,
+aside:not(.sidebar-animate) .sidebar-logo,
+aside:not(.sidebar-animate) .sidebar-nav-item,
+aside:not(.sidebar-animate) .sidebar-controller,
+aside:not(.sidebar-animate) .sidebar-logout-btn {
+  opacity: 1;
+  transform: none;
+  animation: none;
+  clip-path: none;
+}
+
+/* Glass throw animations — smooth easeInOut, no overshoot */
+
+.glass-throw-main {
+  animation: glass-throw-main 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s forwards;
+  opacity: 0;
+  transform: translateX(20%) scale(0.2);
+  filter: blur(14px);
+}
+
+.glass-throw-content {
+  animation: glass-throw-content 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.22s forwards;
+  opacity: 0;
+  transform: translateY(12%) scale(0.25);
+  filter: blur(10px);
+}
+
+.glass-throw-mobile-tabs {
+  animation: glass-throw-top 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.08s forwards;
+  opacity: 0;
+  transform: translateY(-90%) scale(0.28);
+  filter: blur(10px);
+}
+
+.glass-throw-mobile-tabs-2 {
+  animation: glass-throw-top 1.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.18s forwards;
+  opacity: 0;
+  transform: translateY(-90%) scale(0.28);
+  filter: blur(10px);
+}
+
+.glass-throw-tabbar {
+  animation: glass-throw-bottom 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
+  opacity: 0;
+  transform: translateY(85%) scale(0.25);
+  filter: blur(10px);
+}
+
+@keyframes glass-throw-sidebar {
+  0% {
+    opacity: 0;
+    transform: translateX(-100%) scale(0.25);
+    filter: blur(12px);
+  }
+  45% {
+    opacity: 0.9;
+    transform: translateX(-15%) scale(0.85);
+    filter: blur(8px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+    filter: blur(0);
+  }
+}
+
+@keyframes glass-throw-main {
+  0% {
+    opacity: 0;
+    transform: translateX(20%) scale(0.2);
+    filter: blur(14px);
+  }
+  50% {
+    opacity: 0.85;
+    transform: translateX(0) scale(0.9);
+    filter: blur(6px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+    filter: blur(0);
+  }
+}
+
+@keyframes glass-throw-content {
+  0% {
+    opacity: 0;
+    transform: translateY(12%) scale(0.25);
+    filter: blur(10px);
+  }
+  50% {
+    opacity: 0.9;
+    transform: translateY(0) scale(0.9);
+    filter: blur(4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    filter: blur(0);
+  }
+}
+
+@keyframes glass-throw-top {
+  0% {
+    opacity: 0;
+    transform: translateY(-90%) scale(0.28);
+    filter: blur(10px);
+  }
+  50% {
+    opacity: 0.9;
+    transform: translateY(0) scale(0.95);
+    filter: blur(4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    filter: blur(0);
+  }
+}
+
+@keyframes glass-throw-bottom {
+  0% {
+    opacity: 0;
+    transform: translateY(85%) scale(0.25);
+    filter: blur(10px);
+  }
+  50% {
+    opacity: 0.9;
+    transform: translateY(0) scale(0.95);
+    filter: blur(4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    filter: blur(0);
+  }
+}
+
+/* Oomph accent - subtle flash synced with boot thud */
+.oomph-flash {
+  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.08) 0%, transparent 65%);
+  animation: oomph-flash 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+}
+
+@keyframes oomph-flash {
+  0% { opacity: 0; }
+  25% { opacity: 0.9; }
+  100% { opacity: 0; }
+}
+
+/* Reveal flashes - enthralling entrance during zoom */
+.reveal-flash-glitch {
+  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
+  animation: reveal-flash-sequence 2.8s ease-out forwards;
+}
+
+@keyframes reveal-flash-sequence {
+  0% { opacity: 0; }
+  12% { opacity: 0.6; }
+  18% { opacity: 0; }
+  42% { opacity: 0.4; }
+  48% { opacity: 0; }
+  70% { opacity: 0.35; }
+  78% { opacity: 0; }
+  100% { opacity: 0; }
+}
+
+/* Panel mode app session */
+.app-panel-container {
+  position: absolute;
+  inset: 0;
+  z-index: 100;
+}
+
+.panel-slide-enter-active {
+  transition: opacity 0.25s ease;
+}
+.panel-slide-leave-active {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.panel-slide-enter-from {
+  opacity: 0;
+}
+.panel-slide-leave-to {
+  transform: translateX(40px) scale(0.97);
+  opacity: 0;
+}
+
+/* Perspective container for 3D depth effect */
+.perspective-container-wrapper {
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+}
+
+.perspective-container {
+  perspective: 2000px;
+  perspective-origin: 50% 50%;
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* View wrapper — smooth transitions with absolute positioning */
+.view-wrapper {
+  position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  will-change: transform, opacity;
+  opacity: 1;
+}
+
+.view-container {
+  /* No forced height — content sizes naturally, spacer below provides clearance */
+}
+
+/* Forward transition: 2advanced fluid depth */
+.depth-forward-enter-active.view-wrapper,
+.depth-forward-leave-active.view-wrapper {
+  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.depth-forward-enter-from.view-wrapper {
+  opacity: 0;
+  transform: translateZ(-800px) scale(0.75);
+  filter: blur(4px);
+}
+
+.depth-forward-enter-to.view-wrapper {
+  opacity: 1;
+  transform: translateZ(0) scale(1);
+  filter: blur(0px);
+}
+
+.depth-forward-leave-from.view-wrapper {
+  opacity: 1;
+  transform: translateZ(0) scale(1);
+  filter: blur(0px);
+}
+
+.depth-forward-leave-to.view-wrapper {
+  opacity: 0;
+  transform: translateZ(400px) scale(1.2);
+  filter: blur(8px);
+}
+
+/* Back transition: 2advanced fluid depth */
+.depth-back-enter-active.view-wrapper,
+.depth-back-leave-active.view-wrapper {
+  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.depth-back-enter-from.view-wrapper {
+  opacity: 0;
+  transform: translateZ(400px) scale(1.2);
+  filter: blur(8px);
+}
+
+.depth-back-enter-to.view-wrapper {
+  opacity: 1;
+  transform: translateZ(0) scale(1);
+  filter: blur(0px);
+}
+
+.depth-back-leave-from.view-wrapper {
+  opacity: 1;
+  transform: translateZ(0) scale(1);
+  filter: blur(0px);
+}
+
+.depth-back-leave-to.view-wrapper {
+  opacity: 0;
+  transform: translateZ(-800px) scale(0.75);
+  filter: blur(4px);
+}
+
+/* Subtle 3D tilt - 2advanced layered depth (desktop only) */
+@media (min-width: 768px) {
+  .depth-forward-enter-from.view-wrapper {
+    transform: translateZ(-800px) scale(0.75) rotateX(5deg);
+  }
+
+  .depth-forward-leave-to.view-wrapper {
+    transform: translateZ(400px) scale(1.2) rotateX(-4deg);
+  }
+
+  .depth-back-enter-from.view-wrapper {
+    transform: translateZ(400px) scale(1.2) rotateX(-4deg);
+  }
+
+  .depth-back-leave-to.view-wrapper {
+    transform: translateZ(-800px) scale(0.75) rotateX(5deg);
+  }
+}
+
+/* Chat open transition — chat slides in from left */
+.chat-open-enter-active.view-wrapper,
+.chat-open-leave-active.view-wrapper {
+  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.chat-open-enter-from.view-wrapper {
+  opacity: 0;
+  transform: translateX(-60px) scale(0.96);
+}
+
+.chat-open-enter-to.view-wrapper {
+  opacity: 1;
+  transform: translateX(0) scale(1);
+}
+
+.chat-open-leave-from.view-wrapper {
+  opacity: 1;
+  transform: translateX(0) scale(1);
+}
+
+.chat-open-leave-to.view-wrapper {
+  opacity: 0;
+  transform: translateX(60px) scale(0.96);
+}
+
+/* Chat close transition — chat slides out to left */
+.chat-close-enter-active.view-wrapper,
+.chat-close-leave-active.view-wrapper {
+  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.chat-close-enter-from.view-wrapper {
+  opacity: 0;
+  transform: translateX(60px) scale(0.96);
+}
+
+.chat-close-enter-to.view-wrapper {
+  opacity: 1;
+  transform: translateX(0) scale(1);
+}
+
+.chat-close-leave-from.view-wrapper {
+  opacity: 1;
+  transform: translateX(0) scale(1);
+}
+
+.chat-close-leave-to.view-wrapper {
+  opacity: 0;
+  transform: translateX(-60px) scale(0.96);
+}
+
+/* Fade transition for initial loads and default cases */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+/* Mobile: Slide left transition (Apps -> Marketplace) */
+.slide-left-enter-active.view-wrapper,
+.slide-left-leave-active.view-wrapper {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
+}
+
+.slide-left-enter-from.view-wrapper {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.slide-left-enter-to.view-wrapper {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+.slide-left-leave-from.view-wrapper {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+.slide-left-leave-to.view-wrapper {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+
+/* Mobile: Slide right transition (Marketplace -> Apps) */
+.slide-right-enter-active.view-wrapper,
+.slide-right-leave-active.view-wrapper {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
+}
+
+.slide-right-enter-from.view-wrapper {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+
+.slide-right-enter-to.view-wrapper {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+.slide-right-leave-from.view-wrapper {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+.slide-right-leave-to.view-wrapper {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+/* Slide down: Moving down the menu (content slides up like a scroll) */
+.slide-down-enter-active.view-wrapper {
+  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.slide-down-leave-active.view-wrapper {
+  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+              opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.slide-down-enter-from.view-wrapper {
+  opacity: 0;
+  transform: translateY(40vh);
+}
+
+.slide-down-enter-to.view-wrapper {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.slide-down-leave-from.view-wrapper {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.slide-down-leave-to.view-wrapper {
+  opacity: 0;
+  transform: translateY(-30vh);
+}
+
+/* Slide up: Moving up the menu (content slides down like a scroll) */
+.slide-up-enter-active.view-wrapper {
+  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.slide-up-leave-active.view-wrapper {
+  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+              opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.slide-up-enter-from.view-wrapper {
+  opacity: 0;
+  transform: translateY(-40vh);
+}
+
+.slide-up-enter-to.view-wrapper {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.slide-up-leave-from.view-wrapper {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.slide-up-leave-to.view-wrapper {
+  opacity: 0;
+  transform: translateY(30vh);
+}
+
+/* Background 3D container - full width, black fill during zoom */
+.dashboard-view .bg-perspective-container {
+  position: fixed;
+  inset: 0;
+  z-index: -10;
+  perspective: 1000px;
+  perspective-origin: 50% 50%;
+  overflow: hidden;
+  left: 0 !important;
+  right: 0 !important;
+  width: 100% !important;
+  min-width: 100% !important;
+  background: #000;
+}
+
+/* Background layers with 3D transitions */
+.dashboard-view .bg-layer {
+  position: absolute;
+  inset: 0;
+  background-size: cover !important;
+  background-position: center center !important;
+  background-repeat: no-repeat !important;
+  transition: all 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  transform-style: preserve-3d;
+  will-change: transform, opacity;
+}
+
+/* Default state - bg-intro visible, bg-intro-3 hidden back */
+.dashboard-view .bg-layer:first-of-type {
+  opacity: 1;
+  transform: translateZ(0) scale(1);
+}
+
+.dashboard-view .bg-layer:nth-of-type(2) {
+  opacity: 0;
+  transform: translateZ(-200px) scale(0.9) rotateY(-15deg);
+}
+
+/* Transitioning out - current background moves away with zoom */
+.dashboard-view .bg-layer.bg-transitioning-out {
+  opacity: 0;
+  transform: translateZ(200px) scale(1.15) rotateY(15deg) !important;
+}
+
+/* Transitioning in - new background comes forward with zoom */
+.dashboard-view .bg-layer.bg-transitioning-in {
+  opacity: 1;
+  transform: translateZ(0) scale(1.05) rotateY(0deg) !important;
+}
+
+/* Background glitch effect layers - World Fair style */
+.bg-glitch-layer-1,
+.bg-glitch-layer-2,
+.bg-glitch-scan {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 10;
+  opacity: 0;
+}
+
+.bg-glitch-layer-1 {
+  background-size: cover;
+  background-position: center;
+  mix-blend-mode: lighten;
+  filter: brightness(1.8) contrast(2) saturate(1.5) hue-rotate(180deg);
+  will-change: transform, clip-path, opacity;
+}
+
+.bg-glitch-layer-2 {
+  background-size: cover;
+  background-position: center;
+  mix-blend-mode: color-dodge;
+  filter: brightness(2) contrast(2) saturate(2) hue-rotate(90deg);
+  will-change: transform, clip-path, opacity;
+}
+
+.bg-glitch-scan {
+  background:
+    linear-gradient(90deg,
+      rgba(255,0,255,0.2) 0%,
+      rgba(0,255,255,0.2) 25%,
+      rgba(255,255,0,0.2) 50%,
+      rgba(0,255,255,0.2) 75%,
+      rgba(255,0,255,0.2) 100%
+    ),
+    repeating-linear-gradient(0deg,
+      rgba(255,255,255,0.05) 0px,
+      rgba(255,255,255,0.05) 2px,
+      transparent 2px,
+      transparent 4px
+    );
+  will-change: transform, opacity;
+}
+
+/* Trigger glitch animation when active */
+.bg-glitch-layer-1.glitch-active {
+  animation: bg-glitch-shift 0.375s steps(15, end) forwards;
+}
+
+.bg-glitch-layer-2.glitch-active {
+  animation: bg-glitch-shift-2 0.375s steps(12, end) forwards;
+}
+
+.bg-glitch-scan.glitch-active {
+  animation: bg-glitch-scan 0.375s linear forwards;
+}
+
+/* World Fair style - visible but tasteful glitch */
+@keyframes bg-glitch-shift {
+  0% { transform: translate(0,0); clip-path: inset(0% 0 0 0); opacity: 0; }
+  5% { opacity: 0.5; }
+  12% { transform: translate(15px,-8px); clip-path: inset(12% 0 70% 0); }
+  20% { transform: translate(-20px,10px); clip-path: inset(45% 0 35% 0); }
+  28% { transform: translate(18px,-5px); clip-path: inset(68% 0 15% 0); }
+  36% { transform: translate(-15px,12px); clip-path: inset(20% 0 60% 0); }
+  44% { transform: translate(22px,-10px); clip-path: inset(52% 0 28% 0); }
+  52% { transform: translate(-18px,8px); clip-path: inset(10% 0 75% 0); }
+  60% { transform: translate(12px,-6px); clip-path: inset(58% 0 22% 0); }
+  68% { transform: translate(-10px,15px); clip-path: inset(32% 0 48% 0); }
+  76% { transform: translate(16px,-4px); clip-path: inset(72% 0 12% 0); }
+  84% { transform: translate(-12px,7px); clip-path: inset(18% 0 65% 0); }
+  92% { transform: translate(8px,-3px); clip-path: inset(42% 0 40% 0); }
+  96% { opacity: 0.4; }
+  100% { transform: translate(0,0); clip-path: inset(0% 0 0 0); opacity: 0; }
+}
+
+@keyframes bg-glitch-shift-2 {
+  0% { transform: translate(0,0) skewX(0deg); clip-path: inset(0% 0 0 0); opacity: 0; }
+  8% { opacity: 0.5; }
+  15% { transform: translate(-18px,10px) skewX(4deg); clip-path: inset(25% 0 55% 0); }
+  23% { transform: translate(22px,-12px) skewX(-5deg); clip-path: inset(50% 0 30% 0); }
+  31% { transform: translate(-16px,8px) skewX(3deg); clip-path: inset(72% 0 12% 0); }
+  39% { transform: translate(20px,-15px) skewX(-4deg); clip-path: inset(18% 0 65% 0); }
+  47% { transform: translate(-22px,12px) skewX(5deg); clip-path: inset(42% 0 38% 0); }
+  55% { transform: translate(18px,-8px) skewX(-3deg); clip-path: inset(62% 0 20% 0); }
+  63% { transform: translate(-14px,14px) skewX(4deg); clip-path: inset(30% 0 52% 0); }
+  71% { transform: translate(16px,-6px) skewX(-2deg); clip-path: inset(8% 0 78% 0); }
+  79% { transform: translate(-12px,10px) skewX(3deg); clip-path: inset(55% 0 28% 0); }
+  87% { transform: translate(10px,-4px) skewX(-2deg); clip-path: inset(35% 0 45% 0); }
+  95% { opacity: 0.4; }
+  100% { transform: translate(0,0) skewX(0deg); clip-path: inset(0% 0 0 0); opacity: 0; }
+}
+
+@keyframes bg-glitch-scan {
+  0% { opacity: 0; transform: translateX(-120%); }
+  5% { opacity: 0.5; }
+  15% { opacity: 0.55; transform: translateX(-80%); }
+  30% { opacity: 0.6; transform: translateX(-40%); }
+  50% { opacity: 0.6; transform: translateX(0%); }
+  70% { opacity: 0.55; transform: translateX(40%); }
+  85% { opacity: 0.5; transform: translateX(80%); }
+  95% { opacity: 0.45; }
+  100% { opacity: 0; transform: translateX(120%); }
+}
+
+/* Full width background */
+.dashboard-view .bg-fullwidth {
+  min-width: 100%;
+  width: 100%;
+  background-size: cover !important;
+  background-position: center center !important;
+}
+
+/* Continuous glitch overlays - every 5s */
+.dashboard-glitch-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 5;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  opacity: 0;
+}
+
+.dashboard-glitch-1 {
+  mix-blend-mode: screen;
+  filter: hue-rotate(22deg) saturate(1.35);
+  animation: dashboard-glitch-shift 5s steps(10, end) infinite;
+  background-size: cover !important;
+  background-position: center center !important;
+}
+
+.dashboard-glitch-2 {
+  mix-blend-mode: screen;
+  filter: hue-rotate(-30deg) saturate(1.45);
+  animation: dashboard-glitch-shift-2 5s steps(9, end) infinite;
+  background-size: cover !important;
+  background-position: center center !important;
+}
+
+.dashboard-glitch-scan {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 6;
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(0,0,0,0) 60%),
+    repeating-linear-gradient(180deg, rgba(255,255,255,0.05) 0 2px, rgba(0,0,0,0) 2px 4px),
+    radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%);
+  opacity: 0;
+  animation: dashboard-glitch-scan 5s ease-out infinite;
+}
+
+@keyframes dashboard-glitch-shift {
+  0%, 82% { transform: translate(0,0); clip-path: inset(0% 0 0 0); opacity: 0; }
+  82.1% { opacity: 0.28; }
+  84% { transform: translate(6px,-2px); clip-path: inset(8% 0 70% 0); }
+  86% { transform: translate(-5px,2px); clip-path: inset(42% 0 40% 0); }
+  88% { transform: translate(3px,0); clip-path: inset(68% 0 10% 0); }
+  91% { transform: translate(-4px,3px); clip-path: inset(18% 0 60% 0); }
+  93% { transform: translate(5px,-3px); clip-path: inset(55% 0 20% 0); }
+  95% { transform: translate(-3px,1px); clip-path: inset(10% 0 80% 0); }
+  100% { transform: translate(0,0); clip-path: inset(0% 0 0 0); opacity: 0; }
+}
+
+@keyframes dashboard-glitch-shift-2 {
+  0%, 82% { transform: translate(0,0); clip-path: inset(0% 0 0 0); opacity: 0; }
+  82.1% { opacity: 0.24; }
+  84% { transform: translate(-6px,2px); clip-path: inset(12% 0 65% 0); }
+  86% { transform: translate(5px,-1px) skewX(0.6deg); clip-path: inset(36% 0 42% 0); }
+  89% { transform: translate(-3px,2px); clip-path: inset(72% 0 8% 0); }
+  92% { transform: translate(4px,-3px); clip-path: inset(22% 0 58% 0); }
+  95% { transform: translate(-4px,1px); clip-path: inset(50% 0 26% 0); }
+  100% { transform: translate(0,0); clip-path: inset(0% 0 0 0); opacity: 0; }
+}
+
+@keyframes dashboard-glitch-scan {
+  0%, 82% { opacity: 0; transform: translateY(-20%); }
+  84% { opacity: 0.5; }
+  90% { opacity: 0.35; }
+  100% { opacity: 0; transform: translateY(115%); }
+}

neode-ui/src/views/dashboard/useRouteTransitions.ts

@@ -0,0 +1,152 @@
+import { type RouteLocationNormalizedLoaded } from 'vue-router'
+
+/** Tab order for vertical transitions between main navigation items */
+const TAB_ORDER = [
+  '/dashboard',
+  '/dashboard/apps',
+  '/dashboard/marketplace',
+  '/dashboard/cloud',
+  '/dashboard/mesh',
+  '/dashboard/server',
+  '/dashboard/web5',
+  '/dashboard/fleet',
+  '/dashboard/chat',
+  '/dashboard/settings'
+]
+
+/** Web5 group sub-tab order for mobile horizontal swipe transitions */
+const WEB5_TAB_ORDER = ['/dashboard/web5', '/dashboard/cloud', '/dashboard/server', '/dashboard/mesh']
+
+/** Route-to-background image mapping */
+export const ROUTE_BACKGROUNDS: Record<string, string> = {
+  '/dashboard': 'bg-home.jpg',
+  '/dashboard/': 'bg-home.jpg',
+  '/dashboard/apps': 'bg-myapps.jpg',
+  '/dashboard/discover': 'bg-appstore.jpg',
+  '/dashboard/marketplace': 'bg-appstore.jpg',
+  '/dashboard/cloud': 'bg-cloud.jpg',
+  '/dashboard/mesh': 'bg-mesh.jpg',
+  '/dashboard/server': 'bg-network.jpg',
+  '/dashboard/web5': 'bg-web5.jpg',
+  '/dashboard/federation': 'bg-web5.jpg',
+  '/dashboard/settings': 'bg-settings.jpg',
+  '/dashboard/chat': 'bg-aiui.jpg',
+}
+
+export function isDetailRoute(path: string): boolean {
+  return (path.includes('/apps/') && !path.endsWith('/apps')) ||
+    (path.includes('/marketplace/') && !path.endsWith('/marketplace'))
+}
+
+/**
+ * Creates a route transition tracker that determines the appropriate
+ * CSS transition name based on navigation direction and route depth.
+ */
+export function useRouteTransitions() {
+  let previousPath = ''
+  let previousTab = ''
+
+  function getTransitionName(currentRoute: RouteLocationNormalizedLoaded): string {
+    const currentPath = currentRoute.path
+
+    if (!previousPath) {
+      previousPath = currentPath
+      return 'fade'
+    }
+
+    // Chat transitions: directional slide
+    const isChat = currentPath === '/dashboard/chat'
+    const wasChat = previousPath === '/dashboard/chat'
+    if (isChat) {
+      previousPath = currentPath
+      return 'chat-open'
+    }
+    if (wasChat) {
+      previousPath = currentPath
+      return 'chat-close'
+    }
+
+    const isAppDetails = currentPath.includes('/apps/') && !currentPath.endsWith('/apps')
+    const isAppsList = currentPath === '/dashboard/apps'
+    const wasAppDetails = previousPath.includes('/apps/') && !previousPath.endsWith('/apps')
+    const wasAppsList = previousPath === '/dashboard/apps'
+
+    const isMarketplaceDetails = currentPath.includes('/marketplace/') && !currentPath.endsWith('/marketplace')
+    const isMarketplaceList = currentPath === '/dashboard/marketplace'
+    const wasMarketplaceDetails = previousPath.includes('/marketplace/') && !previousPath.endsWith('/marketplace')
+    const wasMarketplaceList = previousPath === '/dashboard/marketplace'
+
+    const isCloudFolder = currentPath.includes('/cloud/') && !currentPath.endsWith('/cloud')
+    const isCloudList = currentPath === '/dashboard/cloud'
+    const wasCloudFolder = previousPath.includes('/cloud/') && !previousPath.endsWith('/cloud')
+    const wasCloudList = previousPath === '/dashboard/cloud'
+
+    let transitionName = 'fade'
+
+    // Mobile: Horizontal slide transitions between sub-tabs
+    if (typeof window !== 'undefined' && window.innerWidth < 768) {
+      const isServices = currentPath === '/dashboard/apps' && currentRoute.query.tab === 'services'
+      const wasServices = previousTab === 'services'
+      const currentAppsIdx = isServices ? 2
+        : currentPath === '/dashboard/marketplace' ? 1
+        : currentPath === '/dashboard/apps' ? 0 : -1
+      const prevAppsIdx = wasServices ? 2
+        : previousPath === '/dashboard/marketplace' ? 1
+        : previousPath === '/dashboard/apps' ? 0 : -1
+
+      const currentWeb5Idx = WEB5_TAB_ORDER.indexOf(currentPath)
+      const prevWeb5Idx = WEB5_TAB_ORDER.indexOf(previousPath)
+
+      if (currentAppsIdx !== -1 && prevAppsIdx !== -1 && currentAppsIdx !== prevAppsIdx) {
+        transitionName = currentAppsIdx > prevAppsIdx ? 'slide-left' : 'slide-right'
+      } else if (currentWeb5Idx !== -1 && prevWeb5Idx !== -1 && currentWeb5Idx !== prevWeb5Idx) {
+        transitionName = currentWeb5Idx > prevWeb5Idx ? 'slide-left' : 'slide-right'
+      } else {
+        const currentIndex = TAB_ORDER.indexOf(currentPath)
+        const previousIndex = TAB_ORDER.indexOf(previousPath)
+
+        if (currentIndex !== -1 && previousIndex !== -1 && currentIndex !== previousIndex) {
+          transitionName = currentIndex > previousIndex ? 'slide-down' : 'slide-up'
+        }
+      }
+    }
+    // Desktop depth transitions: list <-> detail
+    else if (wasAppsList && isAppDetails) {
+      transitionName = 'depth-forward'
+    } else if (wasAppDetails && isAppsList) {
+      transitionName = 'depth-back'
+    } else if (wasMarketplaceList && isMarketplaceDetails) {
+      transitionName = 'depth-forward'
+    } else if (wasMarketplaceDetails && isMarketplaceList) {
+      transitionName = 'depth-back'
+    } else if (wasCloudList && isCloudFolder) {
+      transitionName = 'depth-forward'
+    } else if (wasCloudFolder && isCloudList) {
+      transitionName = 'depth-back'
+    } else if (wasMarketplaceList && isAppDetails) {
+      transitionName = 'depth-forward'
+    } else if (wasAppDetails && isMarketplaceList) {
+      transitionName = 'depth-back'
+    }
+    // Desktop: no transition between Apps <-> Marketplace (same-page tab feel)
+    else if ((wasAppsList && isMarketplaceList) || (wasMarketplaceList && isAppsList)) {
+      transitionName = 'fade'
+    }
+    // Vertical transition: between main tabs (desktop)
+    else {
+      const currentIndex = TAB_ORDER.indexOf(currentPath)
+      const previousIndex = TAB_ORDER.indexOf(previousPath)
+
+      if (currentIndex !== -1 && previousIndex !== -1 && currentIndex !== previousIndex) {
+        transitionName = currentIndex > previousIndex ? 'slide-down' : 'slide-up'
+      }
+    }
+
+    previousPath = currentPath
+    previousTab = (currentRoute.query.tab as string) || ''
+
+    return transitionName
+  }
+
+  return { getTransitionName }
+}

neode-ui/src/views/discover/AppGrid.vue

@@ -0,0 +1,199 @@
+<template>
+  <div>
+    <!-- Apps Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 pb-8">
+      <div
+        v-for="(app, index) in filteredApps"
+        :key="app.id"
+        data-controller-container
+        :data-controller-install="!(isInstalled(app.id) || installingApps.has(app.id)) && (app.source === 'local' || !!app.dockerImage) ? '1' : undefined"
+        tabindex="0"
+        role="link"
+        class="discover-app-card glass-card p-5 cursor-pointer flex flex-col"
+        :class="{ 'card-stagger': showStagger }"
+        :style="{ '--stagger-index': index + staggerOffset }"
+        @click="$emit('view-details', app)"
+        @keydown.enter="$emit('view-details', app)"
+      >
+        <div class="flex items-start gap-4 mb-3">
+          <img
+            v-if="app.icon"
+            :src="app.icon"
+            :alt="app.title"
+            class="w-14 h-14 rounded-lg object-cover"
+            @error="handleImageError"
+          />
+          <div v-else class="w-14 h-14 rounded-lg bg-white/10 flex items-center justify-center">
+            <svg class="w-7 h-7 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+            </svg>
+          </div>
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2 mb-0.5">
+              <h3 class="text-lg font-semibold text-white truncate">{{ app.title }}</h3>
+              <span
+                v-if="getAppTier(app.id) !== 'optional'"
+                class="tier-badge"
+                :class="getAppTier(app.id) === 'core' ? 'tier-badge-core' : 'tier-badge-recommended'"
+              >{{ getAppTier(app.id) }}</span>
+            </div>
+            <p class="text-sm text-white/50">{{ app.version ? `v${app.version}` : 'latest' }}</p>
+            <p v-if="app.author" class="text-xs text-white/40 mt-0.5">{{ app.author }}</p>
+          </div>
+        </div>
+
+        <!-- Trust badge for Nostr apps -->
+        <div v-if="app.trustTier" class="flex items-center gap-2 mb-2">
+          <span
+            class="text-xs px-2 py-0.5 rounded-full font-medium"
+            :class="{
+              'bg-green-400/20 text-green-400': app.trustTier === 'verified',
+              'bg-yellow-400/20 text-yellow-400': app.trustTier === 'community',
+              'bg-orange-400/20 text-orange-400': app.trustTier === 'unverified',
+              'bg-red-400/20 text-red-400': app.trustTier === 'untrusted',
+            }"
+          >{{ app.trustTier }}</span>
+          <span class="text-xs text-white/40">Score: {{ app.trustScore }}/100</span>
+        </div>
+
+        <p class="text-white/70 text-sm mb-4 line-clamp-3 flex-1">
+          {{ typeof app.description === 'object' ? app.description.short : (app.description || 'No description available') }}
+        </p>
+
+        <div class="flex gap-2 mt-auto">
+          <!-- Installed & starting up -->
+          <span
+            v-if="isInstalled(app.id) && isStartingUp(app.id)"
+            class="flex-1 px-4 py-2 bg-yellow-500/15 border border-yellow-500/30 rounded-lg text-yellow-200 text-sm font-medium text-center cursor-default flex items-center justify-center gap-2"
+          >
+            <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" 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>
+            {{ getInstalledState(app.id) === 'installing' ? 'Installing...' : 'Starting...' }}
+          </span>
+          <!-- Installed & ready -->
+          <span
+            v-else-if="isInstalled(app.id)"
+            class="flex-1 px-4 py-2 bg-white/20 rounded-lg text-white/60 text-sm font-medium text-center cursor-default"
+          >Installed</span>
+          <button
+            v-if="isInstalled(app.id) && !isStartingUp(app.id)"
+            @click.stop="$emit('launch', app)"
+            class="px-4 py-2 glass-button glass-button-sm rounded-lg text-sm font-medium"
+          >Launch</button>
+          <!-- Scanning -->
+          <span
+            v-else-if="!containersScanned && (app.source === 'local' || app.dockerImage)"
+            class="flex-1 px-4 py-2 rounded-lg text-white/50 text-sm font-medium text-center cursor-default relative overflow-hidden"
+          >
+            <span class="discover-shimmer-bg"></span>
+            <span class="relative flex items-center justify-center gap-2">
+              <svg class="animate-spin h-3.5 w-3.5 opacity-60" xmlns="http://www.w3.org/2000/svg" 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>
+              Checking...
+            </span>
+          </span>
+          <!-- Install button -->
+          <button
+            v-else-if="!isInstalled(app.id) && (app.source === 'local' || app.dockerImage)"
+            data-controller-install-btn
+            @click.stop="$emit('install', app)"
+            :disabled="installingApps.has(app.id)"
+            class="flex-1 px-4 py-2 glass-button glass-button-sm rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <span v-if="installingApps.has(app.id)" class="flex items-center justify-center gap-2">
+              <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" 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>
+              {{ installingApps.get(app.id)?.message || 'Installing...' }}
+            </span>
+            <span v-else>Install</span>
+          </button>
+          <!-- Not available -->
+          <button
+            v-else-if="!isInstalled(app.id)"
+            disabled
+            class="flex-1 px-4 py-2 bg-white/10 rounded-lg text-white/40 text-sm font-medium cursor-not-allowed"
+          >Not Available</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Empty State -->
+    <div v-if="filteredApps.length === 0" class="text-center py-12">
+      <div v-if="isLoading" class="flex flex-col items-center gap-4">
+        <svg class="animate-spin h-12 w-12 text-blue-400" xmlns="http://www.w3.org/2000/svg" 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>
+        <p class="text-white/70">{{ loadingMessage }}</p>
+      </div>
+      <div v-else-if="nostrError && isNostrCategory" class="flex flex-col items-center gap-4">
+        <p class="text-white/70">No community apps found</p>
+        <p class="text-white/40 text-sm">{{ nostrError }}</p>
+        <button @click="$emit('retry-nostr')" class="px-4 py-2 glass-button rounded-lg text-sm">Retry</button>
+      </div>
+      <p v-else class="text-white/70">No apps found{{ searchQuery ? ` for "${searchQuery}"` : '' }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MarketplaceApp } from './types'
+
+defineProps<{
+  filteredApps: MarketplaceApp[]
+  showStagger: boolean
+  staggerOffset: number
+  containersScanned: boolean
+  installingApps: Map<string, { message: string }>
+  isInstalled: (id: string) => boolean
+  isStartingUp: (id: string) => boolean
+  getInstalledState: (id: string) => string | null
+  getAppTier: (id: string) => string
+  isLoading: boolean
+  loadingMessage: string
+  nostrError: string
+  isNostrCategory: boolean
+  searchQuery: string
+}>()
+
+defineEmits<{
+  'view-details': [app: MarketplaceApp]
+  'launch': [app: MarketplaceApp]
+  'install': [app: MarketplaceApp]
+  'retry-nostr': []
+}>()
+
+function handleImageError(event: Event) {
+  const img = event.target as HTMLImageElement
+  img.src = '/assets/img/logo-archipelago.svg'
+}
+</script>
+
+<style scoped>
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.discover-shimmer-bg {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 100%);
+  background-size: 200% 100%;
+  animation: shimmer 2s ease-in-out infinite;
+  border-radius: inherit;
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+</style>

neode-ui/src/views/discover/DiscoverHero.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <!-- Hero Section -->
+    <div class="discover-hero glass-card p-8 md:p-12 mb-8 relative overflow-hidden">
+      <div class="discover-hero-scanline" aria-hidden="true"></div>
+      <div class="relative z-10">
+        <div class="flex items-center gap-3 mb-4">
+          <span class="discover-terminal-tag">~ $</span>
+          <span class="text-white/40 text-sm font-mono tracking-wider">ARCHIPELAGO://DISCOVER</span>
+        </div>
+        <h1 class="text-4xl md:text-5xl font-extrabold text-white mb-4 tracking-tight font-archipelago">
+          Reclaim Your<br />
+          <span class="discover-hero-accent">Digital Sovereignty</span>
+        </h1>
+        <p class="text-white/70 text-lg md:text-xl max-w-2xl leading-relaxed mb-6">
+          Your node. Your rules. Every app runs on <em>your</em> hardware, verified by <em>your</em> Bitcoin node.
+          No cloud. No custodians. No permission needed.
+        </p>
+        <div class="flex flex-wrap gap-4 text-sm">
+          <div class="discover-stat-pill">
+            <span class="text-white font-bold">{{ totalApps }}</span>
+            <span class="text-white/50">apps available</span>
+          </div>
+          <div class="discover-stat-pill">
+            <span class="text-white font-bold">{{ installedCount }}</span>
+            <span class="text-white/50">installed</span>
+          </div>
+          <div class="discover-stat-pill">
+            <span class="text-white font-bold">100%</span>
+            <span class="text-white/50">self-hosted</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Principles Row -->
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
+      <div class="discover-principle-card">
+        <svg class="w-6 h-6 text-orange-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+        </svg>
+        <h3 class="text-white text-sm font-bold mb-1">Privacy First</h3>
+        <p class="text-white/40 text-xs leading-relaxed">No telemetry. No tracking. Your data never leaves your hardware.</p>
+      </div>
+      <div class="discover-principle-card">
+        <svg class="w-6 h-6 text-orange-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+        </svg>
+        <h3 class="text-white text-sm font-bold mb-1">Verify, Don't Trust</h3>
+        <p class="text-white/40 text-xs leading-relaxed">Run your own node. Validate every transaction. Be your own bank.</p>
+      </div>
+      <div class="discover-principle-card">
+        <svg class="w-6 h-6 text-orange-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+        </svg>
+        <h3 class="text-white text-sm font-bold mb-1">Open Source</h3>
+        <p class="text-white/40 text-xs leading-relaxed">Every app is open source. Audit the code. Trust the math, not the company.</p>
+      </div>
+      <div class="discover-principle-card">
+        <svg class="w-6 h-6 text-orange-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        <h3 class="text-white text-sm font-bold mb-1">No Permission Needed</h3>
+        <p class="text-white/40 text-xs leading-relaxed">Permissionless commerce. Permissionless money. Permissionless freedom.</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  totalApps: number
+  installedCount: number
+}>()
+</script>

neode-ui/src/views/discover/FeaturedApps.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="mb-10">
+    <div class="flex items-center gap-3 mb-5">
+      <span class="discover-terminal-tag">featured</span>
+      <h2 class="text-xl font-bold text-white">Sovereignty Stack</h2>
+      <div class="flex-1 h-px bg-white/10"></div>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+      <div
+        v-for="(app, index) in featuredApps"
+        :key="app.id"
+        data-controller-container
+        tabindex="0"
+        role="link"
+        class="discover-featured-card glass-card p-6 cursor-pointer"
+        :class="{ 'card-stagger': showStagger }"
+        :style="{ '--stagger-index': index }"
+        @click="$emit('view-details', app)"
+        @keydown.enter="$emit('view-details', app)"
+      >
+        <div class="flex items-start gap-5">
+          <img
+            v-if="app.icon"
+            :src="app.icon"
+            :alt="app.title"
+            class="w-20 h-20 rounded-xl object-cover flex-shrink-0"
+            @error="handleImageError"
+          />
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2 mb-1">
+              <h3 class="text-xl font-bold text-white truncate">{{ app.title }}</h3>
+              <span
+                v-if="getAppTier(app.id) !== 'optional'"
+                class="tier-badge"
+                :class="getAppTier(app.id) === 'core' ? 'tier-badge-core' : 'tier-badge-recommended'"
+              >{{ getAppTier(app.id) }}</span>
+              <span v-if="isInstalled(app.id)" class="discover-installed-badge">installed</span>
+            </div>
+            <p class="text-white/50 text-sm mb-3">{{ app.author }} &middot; v{{ app.version }}</p>
+            <p class="text-white/80 text-sm leading-relaxed">{{ app.featuredDescription }}</p>
+          </div>
+        </div>
+        <div class="flex items-center justify-between mt-4 pt-4 border-t border-white/8">
+          <div class="flex items-center gap-2">
+            <svg class="w-4 h-4 text-orange-400/70" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
+            </svg>
+            <span class="text-white/40 text-xs font-mono">{{ app.privacyTag }}</span>
+          </div>
+          <button
+            v-if="isInstalled(app.id) && !isStartingUp(app.id)"
+            @click.stop="$emit('launch', app)"
+            class="glass-button glass-button-sm rounded-lg text-sm font-medium"
+          >Launch</button>
+          <span
+            v-else-if="isInstalled(app.id) && isStartingUp(app.id)"
+            class="text-yellow-200 text-sm flex items-center gap-2"
+          >
+            <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" 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>
+            Starting...
+          </span>
+          <button
+            v-else-if="!containersScanned && app.dockerImage"
+            disabled
+            class="text-white/40 text-sm flex items-center gap-2"
+          >
+            <svg class="animate-spin h-3.5 w-3.5 opacity-60" xmlns="http://www.w3.org/2000/svg" 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>
+            Checking...
+          </button>
+          <button
+            v-else-if="!isInstalled(app.id) && app.dockerImage"
+            data-controller-install-btn
+            @click.stop="$emit('install', app)"
+            :disabled="installingApps.has(app.id)"
+            class="glass-button glass-button-sm rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <span v-if="installingApps.has(app.id)" class="flex items-center gap-2">
+              <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" 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>
+              Installing...
+            </span>
+            <span v-else>Install</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FeaturedApp, MarketplaceApp } from './types'
+
+defineProps<{
+  featuredApps: FeaturedApp[]
+  showStagger: boolean
+  containersScanned: boolean
+  installingApps: Map<string, { message: string }>
+  isInstalled: (id: string) => boolean
+  isStartingUp: (id: string) => boolean
+  getAppTier: (id: string) => string
+}>()
+
+defineEmits<{
+  'view-details': [app: MarketplaceApp]
+  'launch': [app: MarketplaceApp]
+  'install': [app: MarketplaceApp]
+}>()
+
+function handleImageError(event: Event) {
+  const img = event.target as HTMLImageElement
+  img.src = '/assets/img/logo-archipelago.svg'
+}
+</script>

neode-ui/src/views/discover/FilterModal.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <!-- Floating Filter Button (Mobile) -->
+    <Teleport to="body">
+      <button
+        @click="showFilter = true"
+        class="md:hidden fixed right-4 z-40 w-14 h-14 rounded-full glass-button flex items-center justify-center shadow-2xl mobile-back-btn"
+        style="left: auto;"
+      >
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+        </svg>
+      </button>
+    </Teleport>
+
+    <!-- Filter Modal (Mobile) -->
+    <Transition name="modal">
+      <div
+        v-if="showFilter"
+        class="fixed inset-0 z-50 flex items-end justify-center md:hidden bg-black/10 backdrop-blur-md"
+        @click.self="closeFilter"
+      >
+        <div ref="filterModalRef" class="glass-card p-6 w-full rounded-t-3xl max-h-[80vh] overflow-y-auto">
+          <div class="flex items-center justify-between mb-6">
+            <h2 class="text-2xl font-bold text-white">Filter</h2>
+            <button @click="closeFilter" class="text-white/60 hover:text-white transition-colors">
+              <svg class="w-6 h-6" 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 class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            <button
+              v-for="category in categories"
+              :key="category.id"
+              @click="$emit('select-category', category.id); closeFilter()"
+              :class="[
+                'p-4 rounded-xl font-medium transition-all text-left',
+                selectedCategory === category.id
+                  ? 'bg-white/20 text-white border-2 border-white/40'
+                  : 'glass-card text-white/80 hover:bg-orange-500/5 hover:border-orange-500/15'
+              ]"
+            >
+              <div class="flex items-center gap-3">
+                <div class="flex-1">
+                  <p class="font-semibold">{{ category.name }}</p>
+                  <p v-if="selectedCategory === category.id" class="text-xs text-white/60 mt-1">Currently viewing</p>
+                </div>
+                <svg v-if="selectedCategory === category.id" class="w-5 h-5 text-white flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                </svg>
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useModalKeyboard } from '@/composables/useModalKeyboard'
+import type { CategoryDef } from './types'
+
+defineProps<{
+  categories: CategoryDef[]
+  selectedCategory: string
+}>()
+
+defineEmits<{
+  'select-category': [id: string]
+}>()
+
+const showFilter = ref(false)
+const filterModalRef = ref<HTMLElement | null>(null)
+const filterRestoreFocusRef = ref<HTMLElement | null>(null)
+
+function closeFilter() {
+  filterRestoreFocusRef.value?.focus?.()
+  showFilter.value = false
+}
+
+useModalKeyboard(filterModalRef, showFilter, closeFilter, { restoreFocusRef: filterRestoreFocusRef })
+</script>

neode-ui/src/views/discover/curatedApps.ts

@@ -0,0 +1,99 @@
+import type { MarketplaceApp } from './types'
+
+export function getCuratedAppList(): MarketplaceApp[] {
+  return [
+    { id: 'bitcoin-knots', title: 'Bitcoin Knots', version: '28.1.0', description: 'Run a full Bitcoin node. Validate and relay blocks and transactions on the Bitcoin network.', icon: '/assets/img/app-icons/bitcoin-knots.webp', author: 'Bitcoin Knots', dockerImage: 'docker.io/bitcoinknots/bitcoin:v28.1', repoUrl: 'https://github.com/bitcoinknots/bitcoin' },
+    { id: 'btcpay-server', title: 'BTCPay Server', version: '1.13.5', description: 'Self-hosted Bitcoin payment processor. Accept Bitcoin payments without intermediaries or fees.', icon: '/assets/img/app-icons/btcpay-server.png', author: 'BTCPay Server Foundation', dockerImage: 'docker.io/btcpayserver/btcpayserver:1.13.5', repoUrl: 'https://github.com/btcpayserver/btcpayserver' },
+    { id: 'lnd', title: 'LND', version: '0.17.4', description: 'Lightning Network Daemon. Fast and cheap Bitcoin payments through the Lightning Network.', icon: '/assets/img/app-icons/lnd.svg', author: 'Lightning Labs', dockerImage: 'docker.io/lightninglabs/lnd:v0.17.4-beta', repoUrl: 'https://github.com/lightningnetwork/lnd' },
+    { id: 'thunderhub', title: 'ThunderHub', version: '0.13.31', description: 'Lightning node management UI. Manage channels, payments, routing fees, and monitor your Lightning node.', icon: '/assets/img/app-icons/thunderhub.svg', author: 'Anthony Potdevin', dockerImage: 'docker.io/apotdevin/thunderhub:v0.13.31', repoUrl: 'https://github.com/apotdevin/thunderhub' },
+    { id: 'mempool', title: 'Mempool Explorer', version: '2.5.0', description: 'Self-hosted Bitcoin blockchain and mempool visualizer. Monitor transactions without revealing your addresses to third parties.', icon: '/assets/img/app-icons/mempool.webp', author: 'Mempool', dockerImage: 'docker.io/mempool/frontend:v2.5.0', repoUrl: 'https://github.com/mempool/mempool' },
+    { id: 'homeassistant', title: 'Home Assistant', version: '2024.1', description: 'Open-source home automation. Control smart home devices privately, on your own hardware.', icon: '/assets/img/app-icons/homeassistant.png', author: 'Home Assistant', dockerImage: 'docker.io/homeassistant/home-assistant:2024.1', repoUrl: 'https://github.com/home-assistant/core' },
+    { id: 'grafana', title: 'Grafana', version: '10.2.0', description: 'Analytics and monitoring platform. Dashboards for your node metrics and system health.', icon: '/assets/img/app-icons/grafana.png', author: 'Grafana Labs', dockerImage: 'docker.io/grafana/grafana:10.2.0', repoUrl: 'https://github.com/grafana/grafana' },
+    { id: 'searxng', title: 'SearXNG', version: '2024.1.0', description: 'Privacy-respecting metasearch engine. Search the internet without being tracked or profiled.', icon: '/assets/img/app-icons/searxng.png', author: 'SearXNG', dockerImage: 'docker.io/searxng/searxng:2024.11.17-e2554de75', repoUrl: 'https://github.com/searxng/searxng' },
+    { id: 'ollama', title: 'Ollama', version: '0.1.0', description: 'Run AI models locally. Llama, Mistral, and more — on your hardware, completely private.', icon: '/assets/img/app-icons/ollama.png', author: 'Ollama', dockerImage: 'docker.io/ollama/ollama:0.5.4', repoUrl: 'https://github.com/ollama/ollama' },
+    { id: 'onlyoffice', title: 'OnlyOffice', version: '7.5.1', description: 'Self-hosted office suite. Documents, spreadsheets, and presentations without the cloud.', icon: '/assets/img/app-icons/onlyoffice.webp', author: 'Ascensio System SIA', dockerImage: 'docker.io/onlyoffice/documentserver:7.5.1', repoUrl: 'https://github.com/ONLYOFFICE/DocumentServer' },
+    { id: 'penpot', title: 'Penpot', version: '2.4', description: 'Open-source design platform. Self-hosted alternative to Figma for design and prototyping.', icon: '/assets/img/app-icons/penpot.webp', author: 'Penpot', dockerImage: 'docker.io/penpotapp/frontend:2.4', repoUrl: 'https://github.com/penpot/penpot' },
+    { id: 'nextcloud', title: 'Nextcloud', version: '28.0', description: 'Your own private cloud. File sync, calendars, contacts — all on your hardware.', icon: '/assets/img/app-icons/nextcloud.webp', author: 'Nextcloud', dockerImage: 'docker.io/library/nextcloud:28', repoUrl: 'https://github.com/nextcloud/server' },
+    { id: 'vaultwarden', title: 'Vaultwarden', version: '1.30.0', description: 'Self-hosted password vault. Bitwarden-compatible with zero-knowledge encryption.', icon: '/assets/img/app-icons/vaultwarden.webp', author: 'Vaultwarden', dockerImage: 'docker.io/vaultwarden/server:1.30.0-alpine', repoUrl: 'https://github.com/dani-garcia/vaultwarden' },
+    { id: 'jellyfin', title: 'Jellyfin', version: '10.8.0', description: 'Free media server. Stream your movies, music, and photos to any device.', icon: '/assets/img/app-icons/jellyfin.webp', author: 'Jellyfin', dockerImage: 'docker.io/jellyfin/jellyfin:10.8.13', repoUrl: 'https://github.com/jellyfin/jellyfin' },
+    { id: 'photoprism', title: 'PhotoPrism', version: '240915', description: 'AI-powered photo management. Organize photos with facial recognition, privately.', icon: '/assets/img/app-icons/photoprism.svg', author: 'PhotoPrism', dockerImage: 'docker.io/photoprism/photoprism:240915', repoUrl: 'https://github.com/photoprism/photoprism' },
+    { id: 'immich', title: 'Immich', version: '1.90.0', description: 'High-performance photo and video backup. Mobile-first with ML features.', icon: '/assets/img/app-icons/immich.png', author: 'Immich', dockerImage: 'ghcr.io/immich-app/immich-server:release', repoUrl: 'https://github.com/immich-app/immich' },
+    { id: 'filebrowser', title: 'File Browser', version: '2.27.0', description: 'Web-based file manager. Browse, upload, and manage files on your server.', icon: '/assets/img/app-icons/file-browser.webp', author: 'File Browser', dockerImage: 'docker.io/filebrowser/filebrowser:v2.27.0', repoUrl: 'https://github.com/filebrowser/filebrowser' },
+    { id: 'nginx-proxy-manager', title: 'Nginx Proxy Manager', version: '2.11.0', description: 'Reverse proxy with SSL. Beautiful web interface for managing proxies.', icon: '/assets/img/app-icons/nginx.svg', author: 'Nginx Proxy Manager', dockerImage: 'docker.io/jc21/nginx-proxy-manager:2.12.1', repoUrl: 'https://github.com/NginxProxyManager/nginx-proxy-manager' },
+    { id: 'portainer', title: 'Portainer', version: '2.19.0', description: 'Container management UI. Manage your containerized services through the web.', icon: '/assets/img/app-icons/portainer.webp', author: 'Portainer', dockerImage: 'docker.io/portainer/portainer-ce:2.19.4', repoUrl: 'https://github.com/portainer/portainer' },
+    { id: 'uptime-kuma', title: 'Uptime Kuma', version: '1.23.0', description: 'Self-hosted uptime monitoring. Track HTTP, TCP, DNS, and more.', icon: '/assets/img/app-icons/uptime-kuma.webp', author: 'Uptime Kuma', dockerImage: 'docker.io/louislam/uptime-kuma:1', repoUrl: 'https://github.com/louislam/uptime-kuma' },
+    { id: 'tailscale', title: 'Tailscale', version: '1.78.0', description: 'Zero-config VPN. Secure remote access with WireGuard mesh networking.', icon: '/assets/img/app-icons/tailscale.webp', author: 'Tailscale', dockerImage: 'docker.io/tailscale/tailscale:stable', repoUrl: 'https://github.com/tailscale/tailscale' },
+    { id: 'fedimint', title: 'Fedimint', version: '0.10.0', description: 'Federated Bitcoin mint. Private, scalable Bitcoin through federated guardians.', icon: '/assets/img/app-icons/fedimint.png', author: 'Fedimint', dockerImage: 'docker.io/fedimint/fedimintd:v0.10.0', repoUrl: 'https://github.com/fedimint/fedimint' },
+    { id: 'indeedhub', title: 'Indeehub', version: '0.1.0', description: 'Bitcoin documentary streaming with Nostr identity. Stream sovereignty content.', icon: '/assets/img/app-icons/indeedhub.png', author: 'Indeehub Team', dockerImage: 'localhost/indeedhub:latest', repoUrl: 'https://github.com/indeedhub/indeedhub' },
+    { id: 'dwn', title: 'Decentralized Web Node', version: '0.4.0', description: 'Own your data with DID-based access control. Sync across devices, sovereign.', icon: '/assets/img/app-icons/dwn.svg', author: 'TBD', dockerImage: 'ghcr.io/tbd54566975/dwn-server:main', repoUrl: 'https://github.com/TBD54566975/dwn-server' },
+    { id: 'nostrudel', title: 'noStrudel', version: '0.40.0', category: 'nostr', description: 'Feature-rich Nostr web client. Browse feeds, post notes, manage relays with NIP-07.', icon: '/assets/img/app-icons/nostrudel.svg', author: 'hzrd149', dockerImage: '', repoUrl: 'https://github.com/hzrd149/nostrudel', webUrl: 'https://nostrudel.ninja' },
+    { id: 'nostr-rs-relay', title: 'Nostr Relay', version: '0.9.0', category: 'nostr', description: 'Your own Nostr relay. Store events locally, relay for friends, publish over Tor.', icon: '/assets/img/app-icons/nostr-rs-relay.svg', author: 'scsiblade', dockerImage: 'docker.io/scsiblade/nostr-rs-relay:0.9.0', repoUrl: 'https://sr.ht/~gheartsfield/nostr-rs-relay/' },
+    { id: 'botfights', title: 'BotFights', version: '1.0.0', description: 'AI bot arena — build, train, and battle autonomous agents in strategy tournaments.', icon: '/assets/img/app-icons/botfights.svg', author: 'BotFights', dockerImage: '', repoUrl: 'https://botfights.net', webUrl: 'https://botfights.net' },
+    { id: 'nwnn', title: 'Next Web News Network', version: '1.0.0', category: 'l484', description: 'Decentralized news aggregator. Community-curated Bitcoin and sovereignty content.', icon: '/assets/img/app-icons/nwnn.png', author: 'L484', dockerImage: '', repoUrl: 'https://nwnn.l484.com', webUrl: 'https://nwnn.l484.com' },
+    { id: '484-kitchen', title: '484 Kitchen', version: '1.0.0', category: 'l484', description: 'K484 application platform for the L484 network.', icon: '/assets/img/app-icons/484-kitchen.png', author: 'L484', dockerImage: '', repoUrl: 'https://484.kitchen', webUrl: 'https://484.kitchen' },
+    { id: 'call-the-operator', title: 'Call the Operator', version: '1.0.0', category: 'l484', description: 'Escape the Matrix — explore decentralized alternatives and reclaim sovereignty.', icon: '/assets/img/app-icons/call-the-operator.png', author: 'TX1138', dockerImage: '', repoUrl: 'https://cta.tx1138.com', webUrl: 'https://cta.tx1138.com' },
+    { id: 'arch-presentation', title: 'Arch Presentation', version: '1.0.0', category: 'l484', description: 'The Future of Decentralized Infrastructure — interactive Archipelago presentation.', icon: '/assets/img/app-icons/arch-presentation.png', author: 'L484', dockerImage: '', repoUrl: 'https://present.l484.com', webUrl: 'https://present.l484.com' },
+    { id: 'syntropy-institute', title: 'Syntropy Institute', version: '1.0.0', category: 'l484', description: 'Medicine Reimagined — Manual Kinetics, Syntropy Frequency, and concierge protocols.', icon: '/assets/img/app-icons/syntropy-institute.png', author: 'Syntropy Institute', dockerImage: '', repoUrl: 'https://syntropy.institute', webUrl: 'https://syntropy.institute' },
+    { id: 't-zero', title: 'T-0', version: '1.0.0', category: 'l484', description: 'Documentary series exploring decentralization and the mavericks building the ungovernable future.', icon: '/assets/img/app-icons/t-zero.png', author: 'T-0', dockerImage: '', repoUrl: 'https://teeminuszero.net', webUrl: 'https://teeminuszero.net' },
+  ]
+}
+
+export const INSTALLED_ALIASES: Record<string, string[]> = {
+  mempool: ['mempool-web', 'mempool-api', 'archy-mempool-web', 'archy-mempool-db'],
+  bitcoin: ['bitcoin-knots'],
+  btcpay: ['btcpay-server', 'archy-btcpay-db', 'archy-nbxplorer'],
+  immich: ['immich-server', 'immich-app', 'immich_server', 'immich_postgres', 'immich_redis'],
+  nextcloud: ['nextcloud-aio', 'nextcloud-server'],
+  fedimint: ['fedimint-gateway'],
+  electrumx: ['electrumx', 'archy-electrs-ui'],
+  grafana: ['grafana'],
+  jellyfin: ['jellyfin'],
+  vaultwarden: ['vaultwarden'],
+  searxng: ['searxng'],
+  homeassistant: ['homeassistant'],
+  photoprism: ['photoprism'],
+  lnd: ['lnd', 'archy-lnd-ui'],
+  filebrowser: ['filebrowser'],
+  tailscale: ['tailscale'],
+  ollama: ['ollama'],
+}
+
+export const FEATURED_DEFINITIONS = [
+  {
+    id: 'bitcoin-knots',
+    desc: 'The foundation of sovereignty. Run a full Bitcoin node to validate every transaction yourself. No trusted third parties. No asking permission. Your node enforces the consensus rules that protect your wealth. Don\'t trust — verify.',
+    tag: 'FULL VALIDATION // ZERO TRUST'
+  },
+  {
+    id: 'lnd',
+    desc: 'Lightning-fast payments over the Lightning Network. Open channels, route transactions, and earn routing fees — all from your sovereign node. Instant settlement. Near-zero fees. The future of money, running on your hardware.',
+    tag: 'INSTANT SETTLEMENT // YOUR CHANNELS'
+  },
+  {
+    id: 'btcpay-server',
+    desc: 'Accept Bitcoin payments without intermediaries. No fees to payment processors. No KYC. No permission needed. Your commerce, your terms. Self-hosted payment infrastructure that makes you truly independent.',
+    tag: 'NO INTERMEDIARIES // NO KYC'
+  },
+  {
+    id: 'vaultwarden',
+    desc: 'Your passwords belong to you. Self-hosted password vault with full Bitwarden compatibility. Zero-knowledge encryption means even you can\'t see your passwords without your master key. No cloud required — your secrets, your server.',
+    tag: 'ZERO KNOWLEDGE // SELF-HOSTED'
+  },
+]
+
+export function categorizeCommunityApp(app: MarketplaceApp): string {
+  if (app.category) return app.category
+  const id = app.id.toLowerCase()
+  const title = app.title?.toLowerCase() || ''
+  const description = (typeof app.description === 'string' ? app.description : app.description?.short ?? '').toLowerCase()
+  const combined = `${id} ${title} ${description}`
+
+  if (id.includes('bitcoin') || id.includes('btc') || id.includes('lightning') || id.includes('lnd') || id.includes('electr') || id.includes('fedimint') || id.includes('cashu') || combined.includes('wallet')) return 'money'
+  if (id.includes('btcpay') || id.includes('commerce') || id.includes('shop') || id.includes('pos') || combined.includes('merchant')) return 'commerce'
+  if (id.includes('cloud') || id.includes('nextcloud') || id.includes('storage') || id.includes('file') || id.includes('photo') || id.includes('immich') || id.includes('jellyfin') || id.includes('media') || id.includes('vault') || combined.includes('password manager')) return 'data'
+  if (id.includes('home-assistant') || id.includes('homeassistant') || combined.includes('home automation')) return 'home'
+  if (id.includes('nostr') || combined.includes('nostr relay')) return 'nostr'
+  if (id.includes('vpn') || id.includes('wireguard') || id.includes('tailscale') || id.includes('proxy') || id.includes('dns') || id.includes('tor') || combined.includes('network')) return 'networking'
+  if (id.includes('matrix') || id.includes('mastodon') || id.includes('chat') || id.includes('social') || combined.includes('messaging')) return 'community'
+  return 'other'
+}

neode-ui/src/views/discover/types.ts

@@ -0,0 +1,27 @@
+import type { MarketplaceAppInfo } from '@/composables/useMarketplaceApp'
+
+export type MarketplaceApp = Partial<MarketplaceAppInfo> & {
+  id: string
+  trustScore?: number
+  trustTier?: string
+  relayCount?: number
+}
+
+export type FeaturedApp = MarketplaceApp & {
+  featuredDescription: string
+  privacyTag: string
+}
+
+export interface InstallProgress {
+  id: string
+  title: string
+  status: 'downloading' | 'installing' | 'starting' | 'complete' | 'error'
+  progress: number
+  message: string
+  attempt: number
+}
+
+export interface CategoryDef {
+  id: string
+  name: string
+}

neode-ui/src/views/federation/FederationHeader.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="mb-6">
+    <button
+      @click="router.push('/dashboard/web5')"
+      class="flex items-center gap-2 text-white/50 hover:text-white/80 transition-colors text-sm mb-4"
+    >
+      <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="M15 19l-7-7 7-7" />
+      </svg>
+      Back to Web5
+    </button>
+    <div class="flex items-start justify-between gap-4">
+      <div>
+        <h1 class="text-3xl font-bold text-white mb-2">Federation & Peers</h1>
+        <p class="text-white/70">Connect, sync, and share with trusted nodes</p>
+      </div>
+      <!-- Your Node DID — top right card (desktop) -->
+      <div v-if="selfDid" class="hidden md:block shrink-0">
+        <div class="glass-card px-4 py-3 flex items-center gap-3">
+          <div class="min-w-0">
+            <p class="text-[10px] text-white/40 mb-0.5">{{ serverName }}</p>
+            <p class="text-xs text-white/80 font-mono cursor-pointer" :title="selfDid" @click="handleCopy">{{ didCopied ? 'Copied!' : shortDidDisplay }}</p>
+          </div>
+          <button @click="handleCopy" class="glass-button px-2.5 py-1 rounded text-[10px]">{{ didCopied ? 'Copied!' : 'Copy' }}</button>
+          <button @click="$emit('rotate')" class="glass-button px-2.5 py-1 rounded text-[10px] text-orange-300">Rotate</button>
+        </div>
+      </div>
+    </div>
+    <!-- Mobile: DID below title -->
+    <div v-if="selfDid" class="md:hidden glass-card px-4 py-3 mt-3 flex items-center gap-3">
+      <div class="min-w-0 flex-1">
+        <p class="text-[10px] text-white/40 mb-0.5">{{ serverName }}</p>
+        <p class="text-xs text-white/80 font-mono truncate cursor-pointer" :title="selfDid" @click="handleCopy">{{ didCopied ? 'Copied!' : shortDidDisplay }}</p>
+      </div>
+      <button @click="handleCopy" class="glass-button px-2.5 py-1 rounded text-[10px]">{{ didCopied ? 'Copied!' : 'Copy' }}</button>
+      <button @click="$emit('rotate')" class="glass-button px-2.5 py-1 rounded text-[10px] text-orange-300">Rotate</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { shortDid } from './utils'
+
+const props = defineProps<{
+  selfDid: string
+  serverName: string
+}>()
+
+defineEmits<{
+  rotate: []
+}>()
+
+const router = useRouter()
+const didCopied = ref(false)
+
+const shortDidDisplay = computed(() => shortDid(props.selfDid))
+
+function handleCopy() {
+  if (props.selfDid) {
+    navigator.clipboard.writeText(props.selfDid).catch(() => {})
+    didCopied.value = true
+    setTimeout(() => { didCopied.value = false }, 2000)
+  }
+}
+</script>

neode-ui/src/views/federation/JoinModal.vue

@@ -0,0 +1,74 @@
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="visible" class="fixed inset-0 z-[3000] flex items-center justify-center p-4" @click.self="$emit('close')">
+        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
+        <div class="glass-card p-6 max-w-md w-full relative z-10">
+          <div class="flex items-center justify-between mb-6">
+            <h2 class="text-xl font-semibold text-white">Join Federation</h2>
+            <button @click="$emit('close')" class="text-white/40 hover:text-white/70 transition-colors">
+              <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>
+          </div>
+
+          <p class="text-sm text-white/60 mb-4">Paste the invite code from the node you want to federate with.</p>
+
+          <textarea
+            v-model="joinCode"
+            placeholder="fed1:..."
+            rows="3"
+            class="w-full bg-black/30 text-white text-sm rounded-lg p-3 border border-white/10 focus:border-orange-400/50 focus:outline-none font-mono resize-none"
+          ></textarea>
+
+          <div v-if="error" class="mt-3 text-sm text-red-400">{{ error }}</div>
+          <div v-if="success" class="mt-3 text-sm text-green-400">Successfully joined federation</div>
+
+          <div class="flex gap-3 mt-4">
+            <button
+              @click="$emit('close')"
+              class="flex-1 px-4 py-2 glass-button rounded text-sm text-white/70"
+            >Cancel</button>
+            <button
+              @click="handleJoin"
+              class="flex-1 px-4 py-2 glass-button rounded text-sm text-white font-medium disabled:opacity-50"
+              :disabled="joining || !joinCode.trim()"
+            >
+              {{ joining ? 'Joining...' : 'Join' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = defineProps<{
+  visible: boolean
+  joining: boolean
+  error: string
+  success: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  join: [code: string]
+}>()
+
+const joinCode = ref('')
+
+function handleJoin() {
+  if (joinCode.value.trim()) {
+    emit('join', joinCode.value.trim())
+  }
+}
+
+// Clear code on successful join
+watch(() => props.success, (val) => {
+  if (val) joinCode.value = ''
+})
+</script>

neode-ui/src/views/federation/NodeDetailModal.vue

@@ -0,0 +1,169 @@
+<template>
+  <div v-if="node" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md" @click.self="handleClose">
+    <div class="glass-card p-6 w-full max-w-lg max-h-[80vh] overflow-y-auto">
+      <div class="flex items-center justify-between mb-6">
+        <h2 class="text-xl font-semibold text-white">Node Details</h2>
+        <button @click="handleClose" class="text-white/40 hover:text-white/70 transition-colors">
+          <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>
+      </div>
+
+      <div class="space-y-4">
+        <div class="bg-white/5 rounded-lg p-3">
+          <p class="text-xs text-white/40 mb-1">DID</p>
+          <p class="text-sm text-white/80 font-mono break-all">{{ node.did }}</p>
+        </div>
+        <div class="bg-white/5 rounded-lg p-3">
+          <p class="text-xs text-white/40 mb-1">Onion Address</p>
+          <p v-if="node.trust_level === 'trusted'" class="text-sm text-white/80 font-mono break-all">{{ node.onion }}</p>
+          <p v-else class="text-sm text-white/30 italic">Not visible to peers</p>
+        </div>
+        <div class="bg-white/5 rounded-lg p-3">
+          <p class="text-xs text-white/40 mb-1">Trust Level</p>
+          <div class="flex items-center gap-2 mt-1">
+            <select
+              :value="node.trust_level"
+              @change="emit('change-trust', node!.did, ($event.target as HTMLSelectElement).value)"
+              class="bg-black/30 text-white text-sm rounded px-2 py-1 border border-white/10"
+            >
+              <option value="trusted">Trusted</option>
+              <option value="observer">Observer</option>
+              <option value="untrusted">Blocked</option>
+            </select>
+          </div>
+        </div>
+        <div class="bg-white/5 rounded-lg p-3">
+          <p class="text-xs text-white/40 mb-1">Added</p>
+          <p class="text-sm text-white/80">{{ node.added_at }}</p>
+        </div>
+
+        <div v-if="node.trust_level === 'trusted' && node.last_state" class="bg-white/5 rounded-lg p-3">
+          <p class="text-xs text-white/40 mb-2">Resource Usage</p>
+          <div class="grid grid-cols-2 gap-2 text-sm text-white/70">
+            <div>CPU: {{ node.last_state.cpu_usage_percent?.toFixed(1) ?? '--' }}%</div>
+            <div>Uptime: {{ node.last_state.uptime_secs ? formatUptime(node.last_state.uptime_secs) : '--' }}</div>
+            <div>RAM: {{ formatBytes(node.last_state.mem_used_bytes) }} / {{ formatBytes(node.last_state.mem_total_bytes) }}</div>
+            <div>Disk: {{ formatBytes(node.last_state.disk_used_bytes) }} / {{ formatBytes(node.last_state.disk_total_bytes) }}</div>
+          </div>
+        </div>
+
+        <div v-if="node.last_state?.apps?.length && node.trust_level === 'trusted'" class="bg-white/5 rounded-lg p-3">
+          <p class="text-xs text-white/40 mb-2">Apps ({{ node.last_state.apps.length }})</p>
+          <div class="space-y-1">
+            <div v-for="app in node.last_state.apps" :key="app.id" class="flex items-center justify-between text-sm">
+              <span class="text-white/80">{{ app.id }}</span>
+              <span class="text-xs" :class="app.status === 'running' ? 'text-green-400' : 'text-white/40'">{{ app.status }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Deploy App (trusted only) -->
+        <div v-if="node.trust_level === 'trusted'" class="bg-white/5 rounded-lg p-3">
+          <p class="text-xs text-white/40 mb-2">Deploy App</p>
+          <div class="flex gap-2">
+            <input
+              v-model="deployAppId"
+              placeholder="App ID (e.g. bitcoin)"
+              class="flex-1 bg-black/30 text-white text-sm rounded px-2 py-1.5 border border-white/10 focus:border-orange-400/50 focus:outline-none"
+            />
+            <button
+              @click="handleDeploy"
+              class="px-3 py-1.5 glass-button rounded text-xs text-white/90 font-medium disabled:opacity-50"
+              :disabled="deploying || !deployAppId.trim()"
+            >
+              {{ deploying ? 'Deploying...' : 'Deploy' }}
+            </button>
+          </div>
+          <p v-if="deployResult" class="text-xs mt-2" :class="deployResult.startsWith('Error') ? 'text-red-400' : 'text-green-400'">{{ deployResult }}</p>
+        </div>
+
+        <!-- DWN Sync -->
+        <div class="bg-white/5 rounded-lg p-3">
+          <div class="flex items-center justify-between mb-2">
+            <p class="text-xs text-white/40">DWN Sync</p>
+            <div class="flex items-center gap-1.5">
+              <span class="w-1.5 h-1.5 rounded-full" :class="dwnSyncDotClass"></span>
+              <span class="text-xs text-white/50">{{ dwnSyncLabel }}</span>
+            </div>
+          </div>
+          <div class="grid grid-cols-2 gap-2 text-sm text-white/70 mb-3">
+            <div><span class="text-white/30">Messages:</span> {{ dwnMessageCount }}</div>
+            <div><span class="text-white/30">Last sync:</span> {{ dwnLastSync }}</div>
+          </div>
+          <button
+            @click="emit('dwn-sync')"
+            class="px-3 py-1.5 glass-button rounded text-xs text-white/90 font-medium disabled:opacity-50"
+            :disabled="dwnSyncing"
+          >
+            {{ dwnSyncing ? 'Syncing...' : 'Sync Now' }}
+          </button>
+        </div>
+
+        <div v-if="!confirmRemove">
+          <button
+            @click="confirmRemove = true"
+            class="w-full mt-4 px-4 py-2 rounded text-sm glass-button glass-button-danger transition-colors"
+          >
+            Remove from Federation
+          </button>
+        </div>
+        <div v-else class="mt-4 p-3 bg-red-400/10 rounded-lg border border-red-400/20">
+          <p class="text-sm text-red-400 mb-3">Are you sure? This node will be removed from your federation.</p>
+          <div class="flex gap-3">
+            <button
+              @click="confirmRemove = false"
+              class="flex-1 px-3 py-1.5 glass-button rounded text-sm text-white/70"
+            >Cancel</button>
+            <button
+              @click="emit('remove-node', node!.did)"
+              class="flex-1 px-3 py-1.5 rounded text-sm glass-button glass-button-danger transition-colors font-medium"
+            >Confirm Remove</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { FederatedNode } from './types'
+import { formatBytes, formatUptime } from './utils'
+
+const props = defineProps<{
+  node: FederatedNode | null
+  dwnSyncDotClass: string
+  dwnSyncLabel: string
+  dwnMessageCount: string
+  dwnLastSync: string
+  dwnSyncing: boolean
+  deploying: boolean
+  deployResult: string
+}>()
+
+const emit = defineEmits<{
+  close: []
+  'change-trust': [did: string, level: string]
+  'remove-node': [did: string]
+  'deploy-app': [did: string, appId: string]
+  'dwn-sync': []
+}>()
+
+const confirmRemove = ref(false)
+const deployAppId = ref('')
+
+function handleClose() {
+  confirmRemove.value = false
+  deployAppId.value = ''
+  emit('close')
+}
+
+function handleDeploy() {
+  if (props.node && deployAppId.value.trim()) {
+    emit('deploy-app', props.node.did, deployAppId.value.trim())
+    deployAppId.value = ''
+  }
+}
+</script>

neode-ui/src/views/federation/NodeList.vue

@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <!-- Sync Results -->
+    <div v-if="syncResults.length > 0" class="glass-card p-6 mb-6">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-lg font-semibold text-white">Sync Results</h2>
+        <button @click="$emit('clear-sync-results')" class="text-white/40 hover:text-white/70 transition-colors text-sm">Dismiss</button>
+      </div>
+      <div class="space-y-2">
+        <div v-for="r in syncResults" :key="r.did" class="flex items-center gap-3 p-3 bg-white/5 rounded-lg">
+          <div class="w-2 h-2 rounded-full shrink-0" :class="r.status === 'ok' ? 'bg-green-400' : 'bg-red-400'"></div>
+          <span class="text-sm text-white/80 truncate" :title="r.did">{{ nodeNameFromDid(r.did, nodes) }}</span>
+          <span v-if="r.status === 'ok'" class="text-xs text-green-400">{{ r.apps }} apps</span>
+          <span v-else class="text-xs text-red-400 truncate">{{ r.error }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Error Display -->
+    <div v-if="error" class="glass-card p-4 mb-6 border-red-400/30">
+      <p class="text-sm text-red-400">{{ error }}</p>
+    </div>
+
+    <!-- Two-column: Your Nodes + Peers -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+
+      <!-- Your Nodes (Trusted) -->
+      <div class="glass-card p-6 max-h-[60vh] flex flex-col">
+        <h2 class="text-lg font-semibold text-white mb-4">Your Nodes <span v-if="trustedNodes.length > 0" class="text-sm font-normal text-white/50">({{ trustedNodes.length }})</span></h2>
+
+        <div v-if="loading" class="flex items-center gap-3 py-8 justify-center">
+          <div class="w-5 h-5 border-2 border-white/20 border-t-orange-400 rounded-full animate-spin"></div>
+          <span class="text-white/60 text-sm">Loading nodes...</span>
+        </div>
+
+        <div v-else-if="nodes.length === 0" class="text-center py-12">
+          <svg class="w-16 h-16 text-white/20 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
+          <p class="text-white/50 text-sm mb-2">No federated nodes yet</p>
+          <p class="text-white/30 text-xs">Generate an invite code or join an existing federation</p>
+        </div>
+
+        <div v-else class="space-y-3 overflow-y-auto">
+          <div
+            v-for="node in trustedNodes"
+            :key="node.did"
+            class="bg-black/20 rounded-xl border border-white/10 p-4 cursor-pointer hover:border-white/20 transition-colors"
+            @click="$emit('select-node', node)"
+          >
+            <div class="flex items-center justify-between mb-2">
+              <div class="flex items-center gap-3 min-w-0">
+                <div class="w-2.5 h-2.5 rounded-full shrink-0" :class="isOnline(node) ? 'bg-green-400' : 'bg-white/30'"></div>
+                <span class="text-sm font-medium text-white truncate" :title="node.did">{{ nodeName(node) }}</span>
+                <span
+                  class="text-xs shrink-0"
+                  :class="nodeTransportIcon(node.did).color"
+                  :title="'Transport: ' + nodeTransportIcon(node.did).label"
+                >{{ nodeTransportIcon(node.did).icon }}</span>
+              </div>
+              <span
+                class="text-xs px-2 py-0.5 rounded-full shrink-0"
+                :class="trustBadgeClass(node.trust_level)"
+              >{{ node.trust_level }}</span>
+            </div>
+
+            <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs text-white/50">
+              <div>
+                <span class="text-white/30">Apps:</span>
+                {{ node.last_state?.apps?.length ?? '--' }}
+              </div>
+              <div>
+                <span class="text-white/30">CPU:</span>
+                {{ node.last_state?.cpu_usage_percent != null ? node.last_state.cpu_usage_percent.toFixed(1) + '%' : '--' }}
+              </div>
+              <div class="flex items-center gap-1">
+                <span class="text-white/30">DWN:</span>
+                <span class="w-1.5 h-1.5 rounded-full" :class="dwnSyncDotClass"></span>
+              </div>
+              <div>
+                <span class="text-white/30">Seen:</span>
+                {{ node.last_seen ? timeAgo(node.last_seen) : 'never' }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Peers (Observer level) -->
+      <div class="glass-card p-6 max-h-[60vh] flex flex-col">
+        <div class="flex items-center justify-between mb-4">
+          <h2 class="text-lg font-semibold text-white">Peers <span v-if="peerNodes.length > 0" class="text-sm font-normal text-white/50">({{ peerNodes.length }})</span></h2>
+          <button
+            v-if="nodes.some(n => !isOnline(n) && n.last_seen === 'never')"
+            @click="$emit('cleanup-dead')"
+            :disabled="cleaningNodes"
+            class="glass-button px-3 py-1.5 rounded-lg text-xs text-red-300"
+          >
+            {{ cleaningNodes ? 'Removing...' : 'Remove Dead Nodes' }}
+          </button>
+        </div>
+        <div v-if="peerNodes.length === 0" class="text-center py-6">
+          <p class="text-white/50 text-sm">No peers yet</p>
+          <p class="text-white/30 text-xs mt-1">Invite a peer to share public content</p>
+        </div>
+        <div v-else class="space-y-3 overflow-y-auto">
+          <div
+            v-for="node in peerNodes"
+            :key="node.did"
+            class="bg-black/20 rounded-xl border border-white/10 p-4 cursor-pointer hover:border-white/20 transition-colors"
+            @click="$emit('select-node', node)"
+          >
+            <div class="flex items-center justify-between mb-2">
+              <div class="flex items-center gap-3 min-w-0">
+                <div class="w-2.5 h-2.5 rounded-full shrink-0" :class="isOnline(node) ? 'bg-green-400' : 'bg-white/30'"></div>
+                <span class="text-sm font-medium text-white truncate" :title="node.did">{{ nodeName(node) }}</span>
+              </div>
+              <span class="text-xs px-2 py-0.5 rounded-full shrink-0" :class="trustBadgeClass(node.trust_level)">{{ node.trust_level }}</span>
+            </div>
+            <div class="text-xs text-white/40">
+              <span>Seen: {{ node.last_seen ? formatTimeAgo(node.last_seen) : 'never' }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useTransportStore } from '@/stores/transport'
+import type { FederatedNode, SyncResult } from './types'
+import { nodeName, nodeNameFromDid, timeAgo, formatTimeAgo, trustBadgeClass, isOnline } from './utils'
+
+const props = defineProps<{
+  nodes: FederatedNode[]
+  loading: boolean
+  error: string
+  syncResults: SyncResult[]
+  dwnSyncDotClass: string
+  cleaningNodes: boolean
+}>()
+
+defineEmits<{
+  'select-node': [node: FederatedNode]
+  'clear-sync-results': []
+  'cleanup-dead': []
+}>()
+
+const transportStore = useTransportStore()
+
+const trustedNodes = computed(() => props.nodes.filter(n => n.trust_level === 'trusted'))
+const peerNodes = computed(() => props.nodes.filter(n => n.trust_level !== 'trusted'))
+
+function nodeTransportIcon(did: string): { icon: string; color: string; label: string } {
+  const peer = transportStore.peers.find(p => p.did === did)
+  if (!peer) return { icon: '?', color: 'text-white/30', label: 'unknown' }
+  switch (peer.preferred_transport) {
+    case 'mesh': return { icon: '\u{1F4E1}', color: 'text-orange-400', label: 'mesh' }
+    case 'lan': return { icon: '\u{1F310}', color: 'text-green-400', label: 'lan' }
+    case 'tor': return { icon: '\u{1F9C5}', color: 'text-purple-400', label: 'tor' }
+    default: return { icon: '?', color: 'text-white/30', label: 'unknown' }
+  }
+}
+</script>

neode-ui/src/views/federation/QuickActions.vue

@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <!-- Quick Actions -->
+    <div class="glass-card p-6 mb-6">
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <!-- Link Your Nodes (Trusted) -->
+        <div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
+          <div class="flex items-center gap-3 min-w-0">
+            <svg class="w-5 h-5 text-green-400 shrink-0" 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="min-w-0">
+              <p class="text-sm font-medium text-white">Link Your Nodes</p>
+              <p class="text-xs text-white/60">Full trust, sync everything</p>
+            </div>
+          </div>
+          <button
+            @click="$emit('generate-invite', 'trusted')"
+            class="w-fit px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
+            :disabled="generatingInvite"
+          >
+            {{ generatingInvite && inviteType === 'trusted' ? 'Generating...' : 'Generate Code' }}
+          </button>
+        </div>
+
+        <!-- Invite a Peer (Observer) -->
+        <div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
+          <div class="flex items-center gap-3 min-w-0">
+            <svg class="w-5 h-5 text-orange-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+            </svg>
+            <div class="min-w-0">
+              <p class="text-sm font-medium text-white">Invite a Peer</p>
+              <p class="text-xs text-white/60">Share public content</p>
+            </div>
+          </div>
+          <button
+            @click="$emit('generate-invite', 'observer')"
+            class="w-fit px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
+            :disabled="generatingInvite"
+          >
+            {{ generatingInvite && inviteType === 'observer' ? 'Generating...' : 'Generate Code' }}
+          </button>
+        </div>
+
+        <!-- Join (accept code) -->
+        <div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
+          <div class="flex items-center gap-3 min-w-0">
+            <svg class="w-5 h-5 text-blue-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
+            </svg>
+            <div class="min-w-0">
+              <p class="text-sm font-medium text-white">Join</p>
+              <p class="text-xs text-white/60">Accept an invite code</p>
+            </div>
+          </div>
+          <button
+            @click="$emit('show-join')"
+            class="w-fit px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
+          >
+            Enter Code
+          </button>
+        </div>
+
+        <!-- Sync State -->
+        <div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
+          <div class="flex items-center gap-3 min-w-0">
+            <svg class="w-5 h-5 text-green-400 shrink-0" 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>
+            <div class="min-w-0">
+              <p class="text-sm font-medium text-white">Sync</p>
+              <p class="text-xs text-white/60">Refresh all node states</p>
+            </div>
+          </div>
+          <button
+            @click="$emit('sync')"
+            class="w-fit px-3 py-1.5 glass-button glass-button-sm rounded text-xs font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
+            :disabled="syncing"
+          >
+            {{ syncing ? 'Syncing...' : 'Sync Now' }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Invite Code Modal -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="inviteCode" class="fixed inset-0 z-[3000] flex items-center justify-center p-4" @click.self="$emit('clear-invite')">
+          <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
+          <div class="glass-card p-6 max-w-md w-full relative z-10">
+            <div class="flex items-center justify-between mb-4">
+              <h2 class="text-lg font-semibold text-white">{{ inviteType === 'trusted' ? 'Link Your Nodes — Invite Code' : 'Peer Invite Code' }}</h2>
+              <button @click="$emit('clear-invite')" class="text-white/40 hover:text-white/70 transition-colors">
+                <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>
+            </div>
+            <p class="text-xs text-white/60 mb-3">Share this code with the node you want to federate with. It can only be used once.</p>
+            <div class="bg-black/30 rounded-lg p-4 font-mono text-xs text-orange-300 break-all select-all">{{ inviteCode }}</div>
+            <button
+              @click="handleCopyInvite"
+              class="mt-3 px-4 py-2 glass-button rounded text-sm text-white/90 hover:text-white transition-colors"
+            >
+              {{ copiedInvite ? 'Copied' : 'Copy to Clipboard' }}
+            </button>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps<{
+  generatingInvite: boolean
+  inviteType: 'trusted' | 'observer'
+  inviteCode: string
+  syncing: boolean
+}>()
+
+defineEmits<{
+  'generate-invite': [type: 'trusted' | 'observer']
+  'show-join': []
+  'sync': []
+  'clear-invite': []
+}>()
+
+const copiedInvite = ref(false)
+
+async function handleCopyInvite() {
+  try {
+    await window.navigator.clipboard.writeText(props.inviteCode)
+  } catch {
+    const ta = document.createElement('textarea')
+    ta.value = props.inviteCode
+    ta.style.position = 'fixed'
+    ta.style.opacity = '0'
+    document.body.appendChild(ta)
+    ta.select()
+    document.execCommand('copy')
+    document.body.removeChild(ta)
+  }
+  copiedInvite.value = true
+  setTimeout(() => { copiedInvite.value = false }, 2000)
+}
+</script>

neode-ui/src/views/federation/RotateDidModal.vue

@@ -0,0 +1,50 @@
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="visible" class="fixed inset-0 z-[3000] flex items-center justify-center p-4" @click.self="$emit('close')">
+        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
+        <div class="glass-card p-6 max-w-md w-full relative z-10">
+          <h3 class="text-lg font-semibold text-white mb-2">Rotate Node DID</h3>
+          <p class="text-sm text-white/60 mb-4">This generates a new identity keypair and notifies all federated peers. Your old DID will no longer be valid.</p>
+          <input v-model="password" type="password" placeholder="Enter your password to confirm" class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-orange-500/50 mb-4" />
+          <p v-if="error" class="text-red-400 text-xs mb-3">{{ error }}</p>
+          <p v-if="success" class="text-green-400 text-xs mb-3">{{ success }}</p>
+          <div class="flex gap-3">
+            <button @click="handleClose" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">Cancel</button>
+            <button @click="$emit('rotate', password)" :disabled="rotating || !password" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm font-medium bg-orange-500/20 border-orange-500/30 disabled:opacity-50">
+              {{ rotating ? 'Rotating...' : 'Rotate & Notify Peers' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = defineProps<{
+  visible: boolean
+  rotating: boolean
+  error: string
+  success: string
+}>()
+
+const emit = defineEmits<{
+  close: []
+  rotate: [password: string]
+}>()
+
+const password = ref('')
+
+function handleClose() {
+  password.value = ''
+  emit('close')
+}
+
+// Reset password when modal opens/closes
+watch(() => props.visible, (val) => {
+  if (!val) password.value = ''
+})
+</script>

neode-ui/src/views/federation/types.ts

@@ -0,0 +1,42 @@
+export interface AppStatus {
+  id: string
+  status: string
+  version?: string
+}
+
+export interface NodeState {
+  timestamp: string
+  apps: AppStatus[]
+  cpu_usage_percent?: number
+  mem_used_bytes?: number
+  mem_total_bytes?: number
+  disk_used_bytes?: number
+  disk_total_bytes?: number
+  uptime_secs?: number
+  tor_active?: boolean
+}
+
+export interface FederatedNode {
+  did: string
+  pubkey: string
+  onion: string
+  trust_level: string
+  added_at: string
+  name?: string
+  last_seen?: string
+  last_state?: NodeState
+}
+
+export interface DwnStatus {
+  sync_status: string
+  last_sync: string | null
+  messages_synced: number
+  message_count: number
+}
+
+export interface SyncResult {
+  did: string
+  status: string
+  apps?: number
+  error?: string
+}

neode-ui/src/views/federation/utils.ts

@@ -0,0 +1,72 @@
+/** User-friendly node display name. Prefers name, falls back to "Node-XXXX" from DID hash. */
+export function nodeName(node: { name?: string | null; did: string }): string {
+  if (node.name) return node.name
+  const suffix = node.did.replace(/^did:key:z6Mk/, '').slice(-6).toUpperCase()
+  return `Node-${suffix}`
+}
+
+/** Look up display name from DID using a node list. */
+export function nodeNameFromDid(did: string, nodes: { name?: string; did: string }[]): string {
+  const node = nodes.find(n => n.did === did)
+  if (node) return nodeName(node)
+  const suffix = did.replace(/^did:key:z6Mk/, '').slice(-6).toUpperCase()
+  return `Node-${suffix}`
+}
+
+export function shortDid(did: string): string {
+  if (did.length <= 24) return did
+  return did.slice(0, 16) + '...' + did.slice(-8)
+}
+
+export function timeAgo(iso: string): string {
+  const seconds = Math.floor((Date.now() - new Date(iso).getTime()) / 1000)
+  if (seconds < 60) return 'just now'
+  if (seconds < 3600) return Math.floor(seconds / 60) + 'm ago'
+  if (seconds < 86400) return Math.floor(seconds / 3600) + 'h ago'
+  return Math.floor(seconds / 86400) + 'd ago'
+}
+
+export function formatTimeAgo(iso: string): string {
+  if (!iso || iso === 'never') return 'never'
+  const ms = Date.now() - new Date(iso).getTime()
+  if (ms < 60000) return 'just now'
+  if (ms < 3600000) return `${Math.floor(ms / 60000)}m ago`
+  if (ms < 86400000) return `${Math.floor(ms / 3600000)}h ago`
+  return `${Math.floor(ms / 86400000)}d ago`
+}
+
+export function formatBytes(bytes?: number): string {
+  if (bytes == null || bytes === 0) return '--'
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  let i = 0
+  let val = bytes
+  while (val >= 1024 && i < units.length - 1) {
+    val /= 1024
+    i++
+  }
+  return val.toFixed(1) + ' ' + units[i]
+}
+
+export function formatUptime(secs: number): string {
+  const days = Math.floor(secs / 86400)
+  const hours = Math.floor((secs % 86400) / 3600)
+  if (days > 0) return `${days}d ${hours}h`
+  const mins = Math.floor((secs % 3600) / 60)
+  return `${hours}h ${mins}m`
+}
+
+export function trustBadgeClass(level: string): string {
+  switch (level) {
+    case 'trusted': return 'bg-green-400/20 text-green-400'
+    case 'observer': return 'bg-blue-400/20 text-blue-400'
+    case 'untrusted': return 'bg-white/10 text-white/50'
+    default: return 'bg-white/10 text-white/50'
+  }
+}
+
+export function isOnline(node: { last_seen?: string }): boolean {
+  if (!node.last_seen) return false
+  const lastSeen = new Date(node.last_seen).getTime()
+  const tenMinutesAgo = Date.now() - 10 * 60 * 1000
+  return lastSeen > tenMinutesAgo
+}

neode-ui/src/views/fleet/FleetAlerts.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="glass-card p-5 mb-6">
+    <h3 class="text-sm font-medium text-white/80 mb-4">Fleet Alerts</h3>
+
+    <div v-if="alertsLoading" class="text-white/40 text-sm py-4 text-center">
+      Loading alerts...
+    </div>
+    <div v-else-if="!alerts.length" class="text-white/40 text-sm py-4 text-center">
+      No alerts across the fleet.
+    </div>
+    <div v-else class="space-y-2 max-h-80 overflow-y-auto">
+      <div
+        v-for="(alert, idx) in alerts.slice(0, 50)"
+        :key="idx"
+        class="flex items-start gap-3 p-3 bg-white/5 rounded-lg"
+      >
+        <span
+          class="inline-block w-2 h-2 rounded-full mt-1.5 flex-shrink-0"
+          :class="alertSeverityDot(alert.rule)"
+        ></span>
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-2 mb-0.5">
+            <span class="fleet-node-badge">{{ alert.node_id.slice(0, 8) }}</span>
+            <span class="text-xs text-white/40">{{ alertTypeLabel(alert.rule) }}</span>
+          </div>
+          <p class="text-sm text-white/80">{{ alert.message }}</p>
+          <p class="text-xs text-white/30 mt-0.5">{{ formatTimestamp(alert.timestamp) }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type FleetAlert, alertSeverityDot, alertTypeLabel, formatTimestamp } from './useFleetData'
+
+defineProps<{
+  alerts: FleetAlert[]
+  alertsLoading: boolean
+}>()
+</script>

neode-ui/src/views/fleet/FleetContainerMatrix.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="glass-card p-5">
+    <h3 class="text-sm font-medium text-white/80 mb-4">Container Matrix</h3>
+
+    <div v-if="!nodes.length" class="text-white/40 text-sm py-4 text-center">
+      No nodes to display.
+    </div>
+    <div v-else class="overflow-x-auto">
+      <table class="fleet-matrix-table">
+        <thead>
+          <tr>
+            <th class="fleet-matrix-header-cell">App</th>
+            <th
+              v-for="node in sortedNodes"
+              :key="node.node_id"
+              class="fleet-matrix-header-cell font-mono"
+            >
+              {{ node.node_id.slice(0, 6) }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="app in allAppIds" :key="app">
+            <td class="fleet-matrix-cell text-white/70">{{ app }}</td>
+            <td
+              v-for="node in sortedNodes"
+              :key="node.node_id"
+              class="fleet-matrix-cell text-center"
+            >
+              <span v-if="getContainerState(node, app) === 'running'" class="text-green-400">&#10003;</span>
+              <span v-else-if="getContainerState(node, app) === 'stopped'" class="text-red-400">&#10007;</span>
+              <span v-else class="text-white/20">&mdash;</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type FleetNode, getContainerState } from './useFleetData'
+
+defineProps<{
+  nodes: FleetNode[]
+  sortedNodes: FleetNode[]
+  allAppIds: string[]
+}>()
+</script>

neode-ui/src/views/fleet/FleetNodeDetail.vue

@@ -0,0 +1,135 @@
+<template>
+  <div v-if="node" class="glass-card p-5 mb-6">
+    <div class="flex items-center justify-between mb-4">
+      <h3 class="text-sm font-medium text-white/80">
+        Node Detail — <span class="font-mono">{{ nodeId.slice(0, 8) }}</span>
+      </h3>
+      <button class="glass-button text-xs px-3 py-1" @click="$emit('close')">Close</button>
+    </div>
+
+    <!-- Node Info Summary -->
+    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+      <div class="monitoring-stat-card">
+        <p class="text-xs text-white/50 uppercase tracking-wide">Version</p>
+        <p class="text-lg font-bold text-white">v{{ node.version }}</p>
+      </div>
+      <div class="monitoring-stat-card">
+        <p class="text-xs text-white/50 uppercase tracking-wide">Uptime</p>
+        <p class="text-lg font-bold text-white">{{ formatUptime(node.uptime_secs) }}</p>
+      </div>
+      <div class="monitoring-stat-card">
+        <p class="text-xs text-white/50 uppercase tracking-wide">CPU Cores</p>
+        <p class="text-lg font-bold text-white">{{ node.cpu_cores }}</p>
+      </div>
+      <div class="monitoring-stat-card">
+        <p class="text-xs text-white/50 uppercase tracking-wide">Federation Peers</p>
+        <p class="text-lg font-bold text-white">{{ node.federation_peers }}</p>
+      </div>
+    </div>
+
+    <!-- History Charts -->
+    <div v-if="historyLoading" class="text-white/40 text-sm py-4 text-center mb-4">
+      Loading history...
+    </div>
+    <div v-else-if="historyLabels.length" class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
+      <div class="glass-card p-4">
+        <h4 class="text-xs font-medium text-white/60 mb-2">CPU History</h4>
+        <LineChart
+          :datasets="cpuDatasets"
+          :labels="historyLabels"
+          :width="chartWidth"
+          :height="160"
+          :y-max="100"
+        />
+      </div>
+      <div class="glass-card p-4">
+        <h4 class="text-xs font-medium text-white/60 mb-2">RAM History</h4>
+        <LineChart
+          :datasets="memDatasets"
+          :labels="historyLabels"
+          :width="chartWidth"
+          :height="160"
+          :y-max="100"
+        />
+      </div>
+      <div class="glass-card p-4">
+        <h4 class="text-xs font-medium text-white/60 mb-2">Disk History</h4>
+        <LineChart
+          :datasets="diskDatasets"
+          :labels="historyLabels"
+          :width="chartWidth"
+          :height="160"
+          :y-max="100"
+        />
+      </div>
+    </div>
+
+    <!-- Container List -->
+    <div class="mb-4">
+      <h4 class="text-xs font-medium text-white/60 mb-2 uppercase tracking-wide">Containers</h4>
+      <div v-if="!node.containers.length" class="text-white/40 text-sm py-2">
+        No containers reported.
+      </div>
+      <div v-else class="space-y-1">
+        <div
+          v-for="c in node.containers"
+          :key="c.id"
+          class="flex items-center gap-3 p-2 bg-white/5 rounded-lg"
+        >
+          <span
+            class="inline-block w-2 h-2 rounded-full flex-shrink-0"
+            :class="c.state === 'running' ? 'bg-green-400' : 'bg-red-400'"
+          ></span>
+          <span class="text-sm text-white flex-1 truncate">{{ c.id }}</span>
+          <span class="text-xs text-white/40">{{ c.state }}</span>
+          <span class="text-xs text-white/30">{{ c.version }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Node Alerts -->
+    <div>
+      <h4 class="text-xs font-medium text-white/60 mb-2 uppercase tracking-wide">Recent Alerts</h4>
+      <div v-if="!node.recent_alerts.length" class="text-white/40 text-sm py-2">
+        No recent alerts for this node.
+      </div>
+      <div v-else class="space-y-1">
+        <div
+          v-for="(alert, idx) in node.recent_alerts"
+          :key="idx"
+          class="flex items-start gap-3 p-2 bg-white/5 rounded-lg"
+        >
+          <span
+            class="inline-block w-2 h-2 rounded-full mt-1.5 flex-shrink-0"
+            :class="alertSeverityDot(alert.rule)"
+          ></span>
+          <div class="flex-1 min-w-0">
+            <p class="text-sm text-white/80">{{ alert.message }}</p>
+            <p class="text-xs text-white/30">{{ formatTimestamp(alert.timestamp) }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import LineChart from '@/components/LineChart.vue'
+import type { ChartDataset } from '@/components/LineChart.vue'
+import { type FleetNode, formatUptime, alertSeverityDot, formatTimestamp } from './useFleetData'
+
+defineProps<{
+  node: FleetNode | null
+  nodeId: string
+  historyLoading: boolean
+  historyLabels: string[]
+  cpuDatasets: ChartDataset[]
+  memDatasets: ChartDataset[]
+  diskDatasets: ChartDataset[]
+  chartWidth: number
+}>()
+
+defineEmits<{
+  close: []
+}>()
+</script>

neode-ui/src/views/fleet/FleetNodeGrid.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="glass-card p-5 mb-6">
+    <div class="flex items-center justify-between mb-4">
+      <h3 class="text-sm font-medium text-white/80">Nodes</h3>
+      <div class="flex gap-2">
+        <button
+          v-for="opt in SORT_OPTIONS"
+          :key="opt.value"
+          class="fleet-sort-btn"
+          :class="{ 'fleet-sort-btn-active': sortBy === opt.value }"
+          @click="$emit('update:sortBy', opt.value)"
+        >
+          {{ opt.label }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Empty State -->
+    <div v-if="!nodes.length" class="text-white/40 text-sm py-8 text-center">
+      No nodes reporting. Ensure telemetry is enabled on beta nodes.
+    </div>
+
+    <div v-else class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+      <div
+        v-for="node in sortedNodes"
+        :key="node.node_id"
+        class="fleet-node-card"
+        :class="{ 'fleet-node-card-selected': selectedNodeId === node.node_id }"
+        @click="$emit('selectNode', node.node_id)"
+      >
+        <div class="flex items-center justify-between mb-3">
+          <div class="flex items-center gap-2">
+            <span
+              class="fleet-status-dot"
+              :class="isOnline(node.reported_at) ? 'fleet-dot-online' : 'fleet-dot-offline'"
+            ></span>
+            <span class="text-sm font-mono text-white">{{ node.node_id.slice(0, 8) }}</span>
+          </div>
+          <span class="fleet-version-badge">v{{ node.version }}</span>
+        </div>
+
+        <div class="space-y-2 mb-3">
+          <div class="fleet-metric-row">
+            <span class="text-xs text-white/50">CPU</span>
+            <div class="fleet-bar-track">
+              <div
+                class="fleet-bar-fill"
+                :class="healthBarClass(node.cpu_pct)"
+                :style="{ width: Math.min(node.cpu_pct, 100) + '%' }"
+              ></div>
+            </div>
+            <span class="text-xs text-white/60 w-10 text-right">{{ node.cpu_pct.toFixed(0) }}%</span>
+          </div>
+          <div class="fleet-metric-row">
+            <span class="text-xs text-white/50">RAM</span>
+            <div class="fleet-bar-track">
+              <div
+                class="fleet-bar-fill"
+                :class="healthBarClass(node.mem_pct)"
+                :style="{ width: Math.min(node.mem_pct, 100) + '%' }"
+              ></div>
+            </div>
+            <span class="text-xs text-white/60 w-10 text-right">{{ node.mem_pct.toFixed(0) }}%</span>
+          </div>
+          <div class="fleet-metric-row">
+            <span class="text-xs text-white/50">Disk</span>
+            <div class="fleet-bar-track">
+              <div
+                class="fleet-bar-fill"
+                :class="healthBarClass(node.disk_pct)"
+                :style="{ width: Math.min(node.disk_pct, 100) + '%' }"
+              ></div>
+            </div>
+            <span class="text-xs text-white/60 w-10 text-right">{{ node.disk_pct.toFixed(0) }}%</span>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-between text-xs text-white/40">
+          <span>{{ node.running_count }}/{{ node.container_count }} containers</span>
+          <span>{{ node.federation_peers }} peers</span>
+        </div>
+        <div class="flex items-center justify-between text-xs text-white/40 mt-1">
+          <span>Up {{ formatUptime(node.uptime_secs) }}</span>
+          <span>{{ timeAgo(node.reported_at) }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  type FleetNode, type SortOption, SORT_OPTIONS,
+  isOnline, healthBarClass, formatUptime, timeAgo,
+} from './useFleetData'
+
+defineProps<{
+  nodes: FleetNode[]
+  sortedNodes: FleetNode[]
+  sortBy: SortOption
+  selectedNodeId: string | null
+}>()
+
+defineEmits<{
+  'update:sortBy': [value: SortOption]
+  selectNode: [nodeId: string]
+}>()
+</script>

neode-ui/src/views/fleet/FleetOverviewCards.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
+    <div class="monitoring-stat-card">
+      <p class="text-xs text-white/50 uppercase tracking-wide">Total Nodes</p>
+      <p class="text-2xl font-bold text-white">{{ nodeCount }}</p>
+      <p class="text-xs text-white/40">
+        <span class="fleet-dot-online"></span> {{ onlineCount }} online
+        <span class="ml-1 fleet-dot-offline"></span> {{ offlineCount }} offline
+      </p>
+    </div>
+    <div class="monitoring-stat-card">
+      <p class="text-xs text-white/50 uppercase tracking-wide">Fleet Health</p>
+      <p class="text-2xl font-bold text-white">{{ fleetHealthPct }}%</p>
+      <p class="text-xs text-white/40">{{ healthyCount }}/{{ nodeCount }} no alerts</p>
+    </div>
+    <div class="monitoring-stat-card">
+      <p class="text-xs text-white/50 uppercase tracking-wide">Avg CPU</p>
+      <p class="text-2xl font-bold text-white" :class="healthTextClass(avgCpu)">{{ avgCpu.toFixed(1) }}%</p>
+      <p class="text-xs text-white/40">across fleet</p>
+    </div>
+    <div class="monitoring-stat-card">
+      <p class="text-xs text-white/50 uppercase tracking-wide">Avg RAM</p>
+      <p class="text-2xl font-bold text-white" :class="healthTextClass(avgMem)">{{ avgMem.toFixed(1) }}%</p>
+      <p class="text-xs text-white/40">across fleet</p>
+    </div>
+    <div class="monitoring-stat-card">
+      <p class="text-xs text-white/50 uppercase tracking-wide">Avg Disk</p>
+      <p class="text-2xl font-bold text-white" :class="healthTextClass(avgDisk)">{{ avgDisk.toFixed(1) }}%</p>
+      <p class="text-xs text-white/40">across fleet</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { healthTextClass } from './useFleetData'
+
+defineProps<{
+  nodeCount: number
+  onlineCount: number
+  offlineCount: number
+  fleetHealthPct: number
+  healthyCount: number
+  avgCpu: number
+  avgMem: number
+  avgDisk: number
+}>()
+</script>

neode-ui/src/views/fleet/useFleetData.ts

@@ -0,0 +1,378 @@
+/** Composable encapsulating fleet telemetry data fetching, types, and utilities */
+
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { rpcClient } from '@/api/rpc-client'
+import type { ChartDataset } from '@/components/LineChart.vue'
+
+// --- Types ---
+
+export interface FleetNode {
+  node_id: string
+  version: string
+  uptime_secs: number
+  cpu_cores: number
+  cpu_pct: number
+  mem_pct: number
+  disk_pct: number
+  container_count: number
+  running_count: number
+  federation_peers: number
+  recent_alerts: Array<{ rule: string; message: string; timestamp: string }>
+  containers: Array<{ id: string; state: string; version: string }>
+  reported_at: string
+}
+
+export interface FleetAlert {
+  node_id: string
+  rule: string
+  message: string
+  timestamp: string
+}
+
+export interface NodeHistoryEntry {
+  timestamp: string
+  cpu_pct: number
+  mem_pct: number
+  disk_pct: number
+}
+
+export type SortOption = 'status' | 'last-seen' | 'name'
+
+// --- Utility Functions ---
+
+export function formatUptime(secs: number): string {
+  if (secs < 60) return `${secs}s`
+  const days = Math.floor(secs / 86400)
+  const hours = Math.floor((secs % 86400) / 3600)
+  const mins = Math.floor((secs % 3600) / 60)
+  if (days > 0) return `${days}d ${hours}h`
+  if (hours > 0) return `${hours}h ${mins}m`
+  return `${mins}m`
+}
+
+export function timeAgo(dateStr: string): string {
+  const now = Date.now()
+  const then = new Date(dateStr).getTime()
+  const diffMs = now - then
+  if (diffMs < 0) return 'just now'
+  const diffSecs = Math.floor(diffMs / 1000)
+  if (diffSecs < 60) return `${diffSecs}s ago`
+  const diffMins = Math.floor(diffSecs / 60)
+  if (diffMins < 60) return `${diffMins}m ago`
+  const diffHours = Math.floor(diffMins / 60)
+  if (diffHours < 24) return `${diffHours}h ago`
+  const diffDays = Math.floor(diffHours / 24)
+  return `${diffDays}d ago`
+}
+
+export function isOnline(reportedAt: string): boolean {
+  const thirtyMinMs = 30 * 60 * 1000
+  return Date.now() - new Date(reportedAt).getTime() < thirtyMinMs
+}
+
+export function healthBarClass(pct: number): string {
+  if (pct >= 85) return 'monitoring-bar-danger'
+  if (pct >= 60) return 'monitoring-bar-warn'
+  return 'monitoring-bar-ok'
+}
+
+export function healthTextClass(pct: number): string {
+  if (pct >= 85) return 'fleet-text-danger'
+  if (pct >= 60) return 'fleet-text-warn'
+  return ''
+}
+
+export function alertSeverityDot(rule: string): string {
+  const critical = ['container_crash', 'disk_critical', 'node_offline']
+  if (critical.includes(rule)) return 'bg-red-400'
+  return 'bg-orange-400'
+}
+
+export function alertTypeLabel(rule: string): string {
+  const labels: Record<string, string> = {
+    container_crash: 'Container Crash',
+    disk_critical: 'Disk Critical',
+    disk_warning: 'Disk Warning',
+    ram_high: 'High RAM',
+    cpu_high: 'High CPU',
+    node_offline: 'Node Offline',
+    version_mismatch: 'Version Mismatch',
+  }
+  return labels[rule] ?? rule
+}
+
+export function formatTimestamp(ts: string): string {
+  const d = new Date(ts)
+  return d.toLocaleString()
+}
+
+export function getContainerState(node: FleetNode, appId: string): string | null {
+  const container = node.containers.find(c => c.id === appId)
+  if (!container) return null
+  return container.state
+}
+
+export const SORT_OPTIONS: Array<{ label: string; value: SortOption }> = [
+  { label: 'Status', value: 'status' },
+  { label: 'Last Seen', value: 'last-seen' },
+  { label: 'Name', value: 'name' },
+]
+
+// --- Composable ---
+
+export function useFleetData() {
+  const loading = ref(true)
+  const errorMessage = ref('')
+  const nodes = ref<FleetNode[]>([])
+  const fleetAlerts = ref<FleetAlert[]>([])
+  const alertsLoading = ref(false)
+  const selectedNodeId = ref<string | null>(null)
+  const nodeHistory = ref<NodeHistoryEntry[]>([])
+  const nodeHistoryLoading = ref(false)
+  const autoRefresh = ref(true)
+  const lastRefreshed = ref('')
+  const sortBy = ref<SortOption>('status')
+  const chartWidth = ref(300)
+  let pollTimer: ReturnType<typeof setInterval> | null = null
+
+  // --- Computed ---
+
+  const onlineCount = computed(() => nodes.value.filter(n => isOnline(n.reported_at)).length)
+  const offlineCount = computed(() => nodes.value.length - onlineCount.value)
+  const healthyCount = computed(() => nodes.value.filter(n => n.recent_alerts.length === 0).length)
+
+  const fleetHealthPct = computed(() => {
+    if (!nodes.value.length) return 0
+    return Math.round((healthyCount.value / nodes.value.length) * 100)
+  })
+
+  const avgCpu = computed(() => {
+    if (!nodes.value.length) return 0
+    return nodes.value.reduce((sum, n) => sum + n.cpu_pct, 0) / nodes.value.length
+  })
+
+  const avgMem = computed(() => {
+    if (!nodes.value.length) return 0
+    return nodes.value.reduce((sum, n) => sum + n.mem_pct, 0) / nodes.value.length
+  })
+
+  const avgDisk = computed(() => {
+    if (!nodes.value.length) return 0
+    return nodes.value.reduce((sum, n) => sum + n.disk_pct, 0) / nodes.value.length
+  })
+
+  const selectedNode = computed(() => {
+    if (!selectedNodeId.value) return null
+    return nodes.value.find(n => n.node_id === selectedNodeId.value) ?? null
+  })
+
+  const sortedNodes = computed(() => {
+    const sorted = [...nodes.value]
+    switch (sortBy.value) {
+      case 'status':
+        sorted.sort((a, b) => {
+          const aOnline = isOnline(a.reported_at)
+          const bOnline = isOnline(b.reported_at)
+          if (aOnline !== bOnline) return aOnline ? 1 : -1
+          return new Date(b.reported_at).getTime() - new Date(a.reported_at).getTime()
+        })
+        break
+      case 'last-seen':
+        sorted.sort((a, b) => new Date(b.reported_at).getTime() - new Date(a.reported_at).getTime())
+        break
+      case 'name':
+        sorted.sort((a, b) => a.node_id.localeCompare(b.node_id))
+        break
+    }
+    return sorted
+  })
+
+  const allAppIds = computed(() => {
+    const appSet = new Set<string>()
+    for (const node of nodes.value) {
+      for (const c of node.containers) {
+        appSet.add(c.id)
+      }
+    }
+    return Array.from(appSet).sort()
+  })
+
+  // Node history chart datasets
+  const nodeHistoryLabels = computed(() => {
+    return nodeHistory.value.map(h => {
+      const d = new Date(h.timestamp)
+      return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`
+    })
+  })
+
+  const nodeHistoryCpuDatasets = computed<ChartDataset[]>(() => [{
+    label: 'CPU',
+    data: nodeHistory.value.map(h => h.cpu_pct),
+    color: '#fb923c',
+  }])
+
+  const nodeHistoryMemDatasets = computed<ChartDataset[]>(() => [{
+    label: 'RAM',
+    data: nodeHistory.value.map(h => h.mem_pct),
+    color: '#3b82f6',
+  }])
+
+  const nodeHistoryDiskDatasets = computed<ChartDataset[]>(() => [{
+    label: 'Disk',
+    data: nodeHistory.value.map(h => h.disk_pct),
+    color: '#a78bfa',
+  }])
+
+  // --- Data Fetching ---
+
+  async function fetchFleetStatus() {
+    try {
+      const data = await rpcClient.call<{ nodes: FleetNode[] }>({
+        method: 'telemetry.fleet-status',
+      })
+      if (data?.nodes) {
+        nodes.value = data.nodes
+        lastRefreshed.value = new Date().toISOString()
+      }
+    } catch (err) {
+      if (loading.value) {
+        errorMessage.value = err instanceof Error ? err.message : 'Failed to load fleet data'
+      }
+    }
+  }
+
+  async function fetchFleetAlerts() {
+    alertsLoading.value = true
+    try {
+      const data = await rpcClient.call<{ alerts: FleetAlert[] }>({
+        method: 'telemetry.fleet-alerts',
+      })
+      if (data?.alerts) {
+        fleetAlerts.value = data.alerts
+      }
+    } catch {
+      // Non-critical, retry on next poll
+    } finally {
+      alertsLoading.value = false
+    }
+  }
+
+  async function fetchNodeHistory(nodeId: string) {
+    nodeHistoryLoading.value = true
+    nodeHistory.value = []
+    try {
+      const data = await rpcClient.call<{ history: NodeHistoryEntry[] }>({
+        method: 'telemetry.fleet-node-history',
+        params: { node_id: nodeId },
+      })
+      if (data?.history) {
+        nodeHistory.value = data.history
+      }
+    } catch {
+      // Non-critical
+    } finally {
+      nodeHistoryLoading.value = false
+    }
+  }
+
+  async function refreshAll() {
+    loading.value = !nodes.value.length
+    errorMessage.value = ''
+    await Promise.all([fetchFleetStatus(), fetchFleetAlerts()])
+    loading.value = false
+  }
+
+  function selectNode(nodeId: string) {
+    if (selectedNodeId.value === nodeId) {
+      selectedNodeId.value = null
+      nodeHistory.value = []
+    } else {
+      selectedNodeId.value = nodeId
+      fetchNodeHistory(nodeId)
+    }
+  }
+
+  function toggleAutoRefresh() {
+    autoRefresh.value = !autoRefresh.value
+    if (autoRefresh.value) {
+      startAutoRefresh()
+    } else {
+      stopAutoRefresh()
+    }
+  }
+
+  function startAutoRefresh() {
+    stopAutoRefresh()
+    pollTimer = setInterval(async () => {
+      await Promise.all([fetchFleetStatus(), fetchFleetAlerts()])
+      if (selectedNodeId.value) {
+        await fetchNodeHistory(selectedNodeId.value)
+      }
+    }, 60000)
+  }
+
+  function stopAutoRefresh() {
+    if (pollTimer) {
+      clearInterval(pollTimer)
+      pollTimer = null
+    }
+  }
+
+  function exportFleetData() {
+    const exportData = {
+      exported_at: new Date().toISOString(),
+      nodes: nodes.value,
+      alerts: fleetAlerts.value,
+    }
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `fleet-telemetry-${new Date().toISOString().slice(0, 10)}.json`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  function updateChartWidth() {
+    const container = document.querySelector('.glass-card')
+    if (container) {
+      const cardWidth = container.clientWidth
+      chartWidth.value = Math.max(Math.floor((cardWidth - 80) / 3), 200)
+    }
+  }
+
+  // Fetch node history when selection changes
+  watch(selectedNodeId, (newId) => {
+    if (newId) {
+      fetchNodeHistory(newId)
+    } else {
+      nodeHistory.value = []
+    }
+  })
+
+  // --- Lifecycle ---
+
+  onMounted(async () => {
+    updateChartWidth()
+    window.addEventListener('resize', updateChartWidth)
+    await refreshAll()
+    if (autoRefresh.value) {
+      startAutoRefresh()
+    }
+  })
+
+  onUnmounted(() => {
+    stopAutoRefresh()
+    window.removeEventListener('resize', updateChartWidth)
+  })
+
+  return {
+    loading, errorMessage, nodes, fleetAlerts, alertsLoading,
+    selectedNodeId, selectedNode, nodeHistory, nodeHistoryLoading,
+    autoRefresh, lastRefreshed, sortBy, chartWidth,
+    onlineCount, offlineCount, healthyCount, fleetHealthPct,
+    avgCpu, avgMem, avgDisk, sortedNodes, allAppIds,
+    nodeHistoryLabels, nodeHistoryCpuDatasets, nodeHistoryMemDatasets, nodeHistoryDiskDatasets,
+    refreshAll, selectNode, toggleAutoRefresh, exportFleetData,
+  }
+}

neode-ui/src/views/mesh/MeshBitcoinPanel.vue

@@ -178,3 +178,40 @@ async function handleRelayLightning() {
     </div>
   </div>
 </template>
+
+<style>
+.mesh-bitcoin-panel { padding: 18px; display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; overflow-y: auto; }
+.mesh-panel-title { font-size: 1rem; font-weight: 700; color: rgba(255,255,255,0.95); margin: 0; }
+.mesh-panel-sub { font-size: 0.78rem; color: rgba(255,255,255,0.45); margin: -6px 0 0; }
+.mesh-bitcoin-section { display: flex; flex-direction: column; gap: 10px; }
+.mesh-bitcoin-section-header { display: flex; justify-content: space-between; align-items: center; }
+.mesh-bitcoin-label { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.5px; }
+.mesh-bitcoin-height { font-size: 0.85rem; font-weight: 700; color: #fb923c; font-family: monospace; }
+.mesh-bitcoin-height.mesh-muted { color: rgba(255,255,255,0.3); font-weight: 400; }
+.mesh-bitcoin-hint { font-size: 0.78rem; color: rgba(255,255,255,0.4); margin: 0; }
+.mesh-bitcoin-input { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: rgba(255,255,255,0.9); padding: 10px 12px; font-size: 0.85rem; font-family: inherit; outline: none; box-sizing: border-box; }
+.mesh-bitcoin-input:focus { border-color: rgba(251,146,60,0.4); }
+.mesh-bitcoin-input::placeholder { color: rgba(255,255,255,0.25); }
+.mesh-bitcoin-input-sm { padding: 8px 12px; font-size: 0.8rem; }
+textarea.mesh-bitcoin-input { resize: vertical; min-height: 60px; }
+select.mesh-bitcoin-input { cursor: pointer; }
+.mesh-block-list { display: flex; flex-direction: column; gap: 4px; }
+.mesh-block-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: rgba(255,255,255,0.04); border-radius: 6px; font-size: 0.78rem; }
+.mesh-block-height { color: #fb923c; font-weight: 600; font-family: monospace; }
+.mesh-block-hash { color: rgba(255,255,255,0.4); font-family: monospace; font-size: 0.72rem; }
+.mesh-send-tabs { display: flex; gap: 2px; background: rgba(0,0,0,0.3); border-radius: 8px; padding: 3px; }
+.mesh-send-tab { flex: 1; padding: 7px 10px; border: none; background: transparent; color: rgba(255,255,255,0.5); font-size: 0.8rem; font-weight: 500; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
+.mesh-send-tab:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.05); }
+.mesh-send-tab.active { color: #fff; background: rgba(255,255,255,0.1); }
+.mesh-relay-mode { display: flex; gap: 6px; flex-wrap: wrap; }
+.mesh-relay-mode-option { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); cursor: pointer; font-size: 0.8rem; color: rgba(255,255,255,0.7); transition: all 0.2s; flex: 1; }
+.mesh-relay-mode-option:hover { border-color: rgba(255,255,255,0.2); }
+.mesh-relay-mode-option.active { border-color: rgba(251,146,60,0.4); background: rgba(251,146,60,0.08); color: rgba(255,255,255,0.9); }
+.mesh-relay-mode-option small { color: rgba(255,255,255,0.4); }
+.mesh-relay-mode-option input[type="radio"] { accent-color: #fb923c; }
+.mesh-relay-result { padding: 10px 14px; border-radius: 8px; font-size: 0.8rem; }
+.mesh-relay-result.success { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.2); color: #4ade80; }
+.mesh-relay-result.error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); color: #ef4444; }
+.mesh-bitcoin-advanced { margin-top: 4px; }
+.mesh-bitcoin-advanced summary { cursor: pointer; color: rgba(255,255,255,0.5); font-size: 0.8rem; }
+</style>

neode-ui/src/views/mesh/MeshDeadmanPanel.vue

@@ -121,3 +121,20 @@ async function handleDeadmanCheckin() {
     </div>
   </div>
 </template>
+
+<style>
+.mesh-deadman-panel { padding: 18px; display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; overflow-y: auto; }
+.mesh-deadman-status { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 16px; background: rgba(0,0,0,0.2); border-radius: 10px; }
+.mesh-deadman-indicator { font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; padding: 4px 14px; border-radius: 6px; text-transform: uppercase; }
+.mesh-deadman-indicator.armed { background: rgba(251,146,60,0.15); color: #fb923c; border: 1px solid rgba(251,146,60,0.3); }
+.mesh-deadman-indicator.disabled { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.1); }
+.mesh-deadman-indicator.triggered { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); animation: pulse-alert 1.5s infinite; }
+@keyframes pulse-alert { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+.mesh-deadman-timer { font-size: 1.6rem; font-weight: 700; color: #fb923c; font-family: monospace; }
+.mesh-deadman-message { font-size: 0.78rem; color: rgba(255,255,255,0.4); text-align: center; }
+.mesh-deadman-checkin-btn { margin-top: 4px; }
+.mesh-deadman-config { display: flex; flex-direction: column; gap: 10px; }
+.mesh-deadman-field { display: flex; flex-direction: column; gap: 4px; }
+.mesh-deadman-info { display: flex; gap: 12px; flex-wrap: wrap; }
+.mesh-deadman-info-item { font-size: 0.75rem; color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); padding: 3px 10px; border-radius: 4px; }
+</style>

neode-ui/src/views/mesh/mesh-styles.css

@@ -0,0 +1,231 @@
+/* Mesh view styles — extracted from Mesh.vue
+ * Unscoped — mesh-* classes must reach child components (MeshBitcoinPanel, MeshDeadmanPanel)
+ */
+
+.mesh-view {
+  padding: 24px;
+  max-width: 1600px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  height: 100%;
+  overflow: hidden;
+}
+.mesh-header { justify-content: space-between; align-items: center; gap: 16px; flex-shrink: 0; }
+.mesh-header-left { flex: 1; }
+.mesh-title { font-size: 1.5rem; font-weight: 700; color: rgba(255, 255, 255, 0.95); margin: 0; }
+.mesh-subtitle { color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; margin: 2px 0 0; display: flex; align-items: center; gap: 8px; }
+.mesh-subtitle-badge { font-size: 0.65rem; font-weight: 600; color: #4ade80; background: rgba(74, 222, 128, 0.12); padding: 1px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
+.mesh-flasher-btn { display: inline-flex; align-items: center; gap: 0; padding: 8px 16px; font-size: 0.9rem; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
+.mesh-flasher-sep { margin: 0 8px; color: rgba(255, 255, 255, 0.2); }
+.mesh-error { color: #ef4444; font-size: 0.85rem; padding: 8px 12px; background: rgba(239, 68, 68, 0.1); border-radius: 8px; border: 1px solid rgba(239, 68, 68, 0.2); flex-shrink: 0; }
+.mesh-columns { display: flex; gap: 16px; flex: 1; min-height: 0; overflow: hidden; }
+.mesh-left { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; }
+.mesh-right { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
+.mesh-tools-wrapper { display: contents; }
+.mesh-tools-tab-bar { display: none; }
+.mesh-columns-wide { display: grid; grid-template-columns: 340px 1fr 1fr; gap: 16px; }
+.mesh-columns-wide .mesh-left { grid-column: 1; width: auto; }
+.mesh-columns-wide .mesh-right { display: contents; }
+.mesh-columns-wide .mesh-chat-card { grid-column: 2; grid-row: 1; min-height: 0; overflow: hidden; }
+.mesh-columns-wide .mesh-tools-wrapper { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; gap: 0; min-height: 0; overflow-y: auto; }
+.mesh-columns-wide .mesh-tools-tab-bar { display: flex; gap: 2px; background: rgba(0,0,0,0.3); border-radius: 10px; padding: 3px; flex-shrink: 0; margin-bottom: 12px; }
+.mesh-columns-wide .mesh-mobile-back-btn,
+.mesh-columns-wide .mesh-tab-bar { display: none; }
+.mesh-status-card { padding: 16px; flex-shrink: 0; }
+.mesh-status-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
+.mesh-status-indicator { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.mesh-status-indicator.connected { background: #4ade80; box-shadow: 0 0 6px rgba(74, 222, 128, 0.5); }
+.mesh-status-indicator.disconnected { background: rgba(255, 255, 255, 0.3); }
+.mesh-section-title { font-size: 0.95rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); margin: 0; }
+.mesh-status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
+.mesh-stat { display: flex; flex-direction: column; gap: 1px; padding: 8px; background: rgba(255, 255, 255, 0.05); border-radius: 6px; }
+.mesh-stat-label { font-size: 0.65rem; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; letter-spacing: 0.5px; }
+.mesh-stat-value { font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); font-weight: 500; }
+.text-green { color: #4ade80; }
+.text-orange { color: #fb923c; }
+.text-muted { color: rgba(255, 255, 255, 0.4); }
+.mesh-loading, .mesh-empty { color: rgba(255, 255, 255, 0.4); font-size: 0.85rem; text-align: center; padding: 16px 0; }
+.mesh-detected-devices { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
+.mesh-device-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(255, 255, 255, 0.04); border-radius: 6px; }
+.mesh-device-indicator { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 4px rgba(74, 222, 128, 0.4); flex-shrink: 0; }
+.mesh-device-path { font-family: monospace; font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); flex: 1; }
+.mesh-connect-btn { padding: 3px 12px; font-size: 0.75rem; flex-shrink: 0; }
+.mesh-offgrid-banner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(251, 146, 60, 0.1); border: 1px solid rgba(251, 146, 60, 0.3); border-radius: 8px; flex-shrink: 0; }
+.mesh-offgrid-active { border-color: rgba(251, 146, 60, 0.4) !important; color: #fb923c !important; }
+.mesh-actions { display: flex; gap: 8px; flex-shrink: 0; }
+.mesh-action-btn { flex: 1; padding: 8px 0; font-size: 0.8rem; }
+.mesh-peers-card { padding: 14px; flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.mesh-peers-card .mesh-section-title { margin-bottom: 10px; flex-shrink: 0; }
+.mesh-peer-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; flex: 1; min-height: 0; }
+.mesh-peer-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; cursor: pointer; transition: background 0.15s; }
+.mesh-peer-row:hover { background: rgba(255, 255, 255, 0.06); }
+.mesh-peer-row.active { background: rgba(251, 146, 60, 0.1); border: 1px solid rgba(251, 146, 60, 0.2); }
+.mesh-peer-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); flex-shrink: 0; font-weight: 600; }
+.mesh-peer-avatar.archy { background: rgba(251, 146, 60, 0.15); padding: 0; overflow: hidden; }
+.mesh-peer-avatar.archy :deep(> div) { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; }
+.mesh-peer-avatar.channel { background: rgba(59, 130, 246, 0.15); color: #3b82f6; font-weight: 700; font-size: 1.1rem; }
+.mesh-peer-channel-badge { font-size: 0.6rem; font-weight: 700; color: #3b82f6; background: rgba(59, 130, 246, 0.12); padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
+.mesh-peer-count { font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.08); padding: 2px 8px; border-radius: 10px; margin-left: 6px; vertical-align: middle; }
+.mesh-peer-row.is-channel { border-bottom: 1px solid rgba(255, 255, 255, 0.04); padding-bottom: 12px; margin-bottom: 4px; }
+.mesh-peer-info { flex: 1; min-width: 0; }
+.mesh-peer-name { font-weight: 600; font-size: 0.85rem; color: rgba(255, 255, 255, 0.9); display: flex; align-items: center; gap: 6px; }
+.mesh-peer-archy-badge { font-size: 0.6rem; font-weight: 700; color: #fb923c; background: rgba(251, 146, 60, 0.12); padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
+.mesh-peer-sub { font-size: 0.7rem; color: rgba(255, 255, 255, 0.3); font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mesh-peer-signal { flex-shrink: 0; }
+.mesh-signal-bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
+.mesh-signal-bar { width: 3px; border-radius: 1px; background: rgba(255, 255, 255, 0.12); }
+.mesh-signal-bar:nth-child(1) { height: 3px; }
+.mesh-signal-bar:nth-child(2) { height: 6px; }
+.mesh-signal-bar:nth-child(3) { height: 10px; }
+.mesh-signal-bar:nth-child(4) { height: 14px; }
+.mesh-signal-bar.active { background: #4ade80; }
+.mesh-unread-badge { background: #fb923c; color: #000; font-size: 0.65rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px; flex-shrink: 0; }
+.mesh-chat-card { padding: 0; flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
+.mesh-chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.3); gap: 8px; padding: 40px; }
+.mesh-chat-empty-icon { font-size: 3rem; opacity: 0.4; }
+.mesh-chat-empty p { margin: 0; font-size: 0.9rem; }
+.mesh-chat-empty-sub { font-size: 0.75rem !important; color: rgba(255, 255, 255, 0.2); }
+.mesh-chat-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; }
+.mesh-chat-back { background: none; border: none; color: rgba(255, 255, 255, 0.6); font-size: 1.2rem; cursor: pointer; padding: 4px 8px; border-radius: 6px; display: none; }
+.mesh-chat-header-info { flex: 1; min-width: 0; }
+.mesh-chat-header-name { font-weight: 600; font-size: 0.95rem; color: rgba(255, 255, 255, 0.9); display: flex; align-items: center; gap: 6px; }
+.mesh-chat-header-sub { font-size: 0.7rem; color: rgba(255, 255, 255, 0.3); font-family: monospace; }
+.mesh-chat-header-status { flex-shrink: 0; }
+.mesh-chat-header-time { font-size: 0.7rem; color: rgba(255, 255, 255, 0.3); }
+.mesh-chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
+.mesh-chat-no-messages { flex: 1; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.25); font-size: 0.85rem; }
+.mesh-chat-bubble-wrapper { display: flex; }
+.mesh-chat-bubble-wrapper.sent { justify-content: flex-end; }
+.mesh-chat-bubble-wrapper.received { justify-content: flex-start; }
+.mesh-chat-bubble { max-width: 75%; padding: 10px 14px; border-radius: 16px; word-break: break-word; }
+.mesh-chat-bubble.sent { background: rgba(251, 146, 60, 0.15); border: 1px solid rgba(251, 146, 60, 0.2); border-bottom-right-radius: 4px; }
+.mesh-chat-bubble.received { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); border-bottom-left-radius: 4px; }
+.mesh-chat-bubble-text { color: rgba(255, 255, 255, 0.9); font-size: 0.9rem; line-height: 1.4; }
+.mesh-chat-bubble-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; justify-content: flex-end; }
+.mesh-chat-bubble-time { font-size: 0.65rem; color: rgba(255, 255, 255, 0.3); }
+.mesh-chat-e2e { font-size: 0.55rem; font-weight: 700; color: #4ade80; padding: 0 3px; border: 1px solid rgba(74, 222, 128, 0.3); border-radius: 3px; }
+.mesh-chat-ack { font-size: 0.7rem; color: #3b82f6; }
+.mesh-chat-compose { padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; }
+.mesh-chat-send-error { color: #ef4444; font-size: 0.75rem; margin-bottom: 6px; }
+.mesh-chat-compose-row { display: flex; gap: 8px; }
+.mesh-chat-input { flex: 1; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; color: rgba(255, 255, 255, 0.9); padding: 10px 16px; font-size: 0.9rem; font-family: inherit; outline: none; }
+.mesh-chat-input:focus { border-color: rgba(251, 146, 60, 0.4); }
+.mesh-chat-input::placeholder { color: rgba(255, 255, 255, 0.25); }
+.mesh-chat-send-btn { padding: 10px 20px; border-radius: 20px; font-size: 0.85rem; background: rgba(251, 146, 60, 0.15); border-color: rgba(251, 146, 60, 0.25); }
+.mesh-chat-send-btn:hover:not(:disabled) { background: rgba(251, 146, 60, 0.25); }
+.mesh-mobile-back-btn { display: none; }
+
+@media (max-width: 1279px) {
+  .mesh-view { height: auto; overflow: visible; padding: 0 12px 100px 12px; }
+  .mesh-columns { flex-direction: column; overflow: visible; }
+  .mesh-left { width: 100%; overflow: visible; }
+  .mesh-right { min-height: auto; overflow: visible; }
+  .mesh-chat-card { min-height: 60dvh; max-height: 75dvh; overflow: hidden; display: flex; flex-direction: column; }
+  .mesh-tools-wrapper { display: none !important; }
+  .mesh-mobile-tools { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
+  .mesh-mobile-tools .mesh-tools-tab-bar { display: flex; gap: 2px; background: rgba(0,0,0,0.3); border-radius: 10px; padding: 3px; }
+  .mesh-mobile-tools :deep(.mesh-bitcoin-panel),
+  .mesh-mobile-tools :deep(.mesh-deadman-panel) { min-height: 320px; }
+  .mesh-mobile-tools .mesh-map-panel { min-height: 400px; }
+  .mesh-status-grid { grid-template-columns: repeat(2, 1fr); }
+  .mesh-chat-back { display: block; }
+  .mobile-hidden { display: none !important; }
+  :deep(.mesh-bitcoin-panel),
+  :deep(.mesh-deadman-panel) { flex: none; cursor: pointer; flex-shrink: 0; }
+  .mesh-mobile-back-btn:hover { color: rgba(255, 255, 255, 0.9); }
+}
+
+.mesh-session-badge { font-size: 0.75rem; margin-right: 6px; opacity: 0.7; }
+.session-ratchet { color: #4ade80; opacity: 1; }
+.session-static { color: #fbbf24; }
+.session-none { color: rgba(255,255,255,0.3); }
+.mesh-typed-icon { margin-right: 4px; }
+.mesh-typed-label { font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
+.typed-invoice { border-left: 3px solid #fb923c; }
+.mesh-typed-invoice { padding: 4px 0; }
+.mesh-typed-invoice-header { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; color: #fb923c; font-size: 0.75rem; }
+.mesh-typed-invoice-amount { font-size: 1.1rem; font-weight: 700; color: #fb923c; }
+.mesh-typed-invoice-memo { font-size: 0.8rem; color: rgba(255,255,255,0.7); margin-top: 2px; }
+.mesh-typed-invoice-bolt11 { font-size: 0.65rem; color: rgba(255,255,255,0.3); font-family: monospace; margin-top: 4px; word-break: break-all; }
+.mesh-typed-paid { background: rgba(74,222,128,0.2); color: #4ade80; font-size: 0.65rem; padding: 1px 6px; border-radius: 4px; margin-left: auto; }
+.typed-alert { border-left: 3px solid #ef4444; }
+.typed-alert.alert-status { border-left-color: #3b82f6; }
+.mesh-typed-alert { padding: 4px 0; }
+.mesh-typed-alert-header { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; font-size: 0.75rem; }
+.alert-emergency .mesh-typed-alert-header { color: #ef4444; }
+.alert-dead_man .mesh-typed-alert-header { color: #ef4444; }
+.alert-status .mesh-typed-alert-header { color: #3b82f6; }
+.mesh-typed-alert-message { font-size: 0.85rem; color: rgba(255,255,255,0.9); }
+.mesh-typed-alert-location { display: block; font-size: 0.75rem; color: #3b82f6; margin-top: 4px; text-decoration: underline; }
+.mesh-typed-signed { font-size: 0.6rem; color: #4ade80; border: 1px solid rgba(74,222,128,0.3); padding: 0 4px; border-radius: 3px; margin-left: auto; }
+.typed-coordinate { border-left: 3px solid #3b82f6; }
+.mesh-typed-coordinate { padding: 4px 0; }
+.mesh-typed-coordinate-header { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; color: #3b82f6; font-size: 0.75rem; }
+.mesh-typed-coordinate-value { font-size: 0.9rem; font-family: monospace; color: rgba(255,255,255,0.8); }
+.mesh-typed-coordinate-label { font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-top: 2px; }
+.mesh-typed-coordinate-link { display: inline-block; font-size: 0.75rem; color: #3b82f6; margin-top: 4px; text-decoration: underline; }
+.typed-block_header { border-left: 3px solid #a855f7; }
+.mesh-typed-block { display: flex; align-items: center; gap: 4px; color: #a855f7; font-size: 0.8rem; }
+.mesh-tab-bar { display: flex; gap: 2px; background: rgba(0,0,0,0.3); border-radius: 10px; padding: 3px; flex-shrink: 0; }
+.mesh-tab { flex: 1; padding: 8px 12px; border: none; background: transparent; color: rgba(255,255,255,0.5); font-size: 0.82rem; font-weight: 500; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 6px; }
+.mesh-tab:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.05); }
+.mesh-tab.active { color: #fff; background: rgba(255,255,255,0.1); }
+.mesh-tab-badge { font-size: 0.65rem; background: rgba(251,146,60,0.2); color: #fb923c; padding: 1px 5px; border-radius: 4px; font-weight: 600; }
+.mesh-tab-badge-alert { background: rgba(239,68,68,0.3); color: #ef4444; animation: pulse-alert 1.5s infinite; }
+@keyframes pulse-alert { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+.mesh-map-panel { flex: 1; min-height: 400px; padding: 0 !important; overflow: hidden; border-radius: 12px; position: relative; }
+
+/* Bitcoin & Deadman panels (child components) */
+.mesh-bitcoin-panel,
+.mesh-deadman-panel { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overflow-y: auto; }
+.mesh-panel-title { font-size: 1rem; font-weight: 700; color: rgba(255,255,255,0.95); margin: 0; }
+.mesh-panel-sub { font-size: 0.8rem; color: rgba(255,255,255,0.45); margin: -4px 0 0; }
+.mesh-bitcoin-section { display: flex; flex-direction: column; gap: 8px; }
+.mesh-bitcoin-section-header { display: flex; justify-content: space-between; align-items: center; }
+.mesh-bitcoin-label { font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.5px; }
+.mesh-bitcoin-height { font-size: 0.85rem; font-weight: 700; color: #fb923c; font-family: monospace; }
+.mesh-bitcoin-height.mesh-muted { color: rgba(255,255,255,0.3); font-weight: 400; }
+.mesh-bitcoin-hint { font-size: 0.8rem; color: rgba(255,255,255,0.45); margin: 0; }
+.mesh-bitcoin-input { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: rgba(255,255,255,0.9); padding: 10px 12px; font-size: 0.85rem; font-family: inherit; outline: none; box-sizing: border-box; }
+.mesh-bitcoin-input:focus { border-color: rgba(251,146,60,0.4); }
+.mesh-bitcoin-input::placeholder { color: rgba(255,255,255,0.25); }
+.mesh-bitcoin-input-sm { padding: 8px 12px; font-size: 0.8rem; }
+textarea.mesh-bitcoin-input { resize: vertical; min-height: 60px; }
+select.mesh-bitcoin-input { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(255,255,255,0.4)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
+select.mesh-bitcoin-input option { background: #1a1a2e; color: rgba(255,255,255,0.9); }
+.mesh-bitcoin-advanced { margin-top: 4px; }
+.mesh-bitcoin-advanced summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
+.mesh-bitcoin-advanced summary::before { content: '\25B6'; font-size: 0.6rem; color: rgba(255,255,255,0.4); transition: transform 0.2s; }
+.mesh-bitcoin-advanced[open] summary::before { transform: rotate(90deg); }
+.mesh-block-list { display: flex; flex-direction: column; gap: 4px; }
+.mesh-block-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(255,255,255,0.04); border-radius: 6px; }
+.mesh-block-height { font-size: 0.8rem; font-weight: 600; color: #a855f7; font-family: monospace; }
+.mesh-block-hash { font-size: 0.7rem; color: rgba(255,255,255,0.35); font-family: monospace; }
+.mesh-send-tabs { display: flex; gap: 2px; background: rgba(0,0,0,0.3); border-radius: 8px; padding: 2px; }
+.mesh-send-tab { flex: 1; padding: 6px 12px; border: none; background: transparent; color: rgba(255,255,255,0.5); font-size: 0.8rem; font-weight: 500; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
+.mesh-send-tab:hover { color: rgba(255,255,255,0.8); }
+.mesh-send-tab.active { color: #fff; background: rgba(255,255,255,0.1); }
+.mesh-relay-mode { display: flex; gap: 4px; flex-wrap: wrap; }
+.mesh-relay-mode-option { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 0.8rem; color: rgba(255,255,255,0.6); transition: all 0.15s; }
+.mesh-relay-mode-option.active { color: rgba(255,255,255,0.9); }
+.mesh-relay-mode-option small { color: rgba(255,255,255,0.35); font-size: 0.7rem; }
+.mesh-relay-mode-option input[type="radio"] { accent-color: #fb923c; }
+.mesh-relay-result { padding: 8px 12px; border-radius: 8px; font-size: 0.8rem; }
+.mesh-relay-result.success { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.2); color: #4ade80; }
+.mesh-relay-result.error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); color: #ef4444; }
+
+/* Deadman panel specifics */
+.mesh-deadman-status { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgba(0,0,0,0.2); border-radius: 10px; }
+.mesh-deadman-indicator { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 4px 10px; border-radius: 6px; width: fit-content; }
+.mesh-deadman-indicator.armed { background: rgba(251,146,60,0.15); color: #fb923c; border: 1px solid rgba(251,146,60,0.3); }
+.mesh-deadman-indicator.disabled { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.08); }
+.mesh-deadman-indicator.triggered { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); animation: pulse-alert 1.5s infinite; }
+.mesh-deadman-timer { font-size: 1.8rem; font-weight: 700; color: #fb923c; font-family: monospace; }
+.mesh-deadman-message { font-size: 0.8rem; color: rgba(255,255,255,0.5); font-style: italic; }
+.mesh-deadman-checkin-btn { margin-top: 4px; }
+.mesh-deadman-config { display: flex; flex-direction: column; gap: 10px; }
+.mesh-deadman-field { display: flex; flex-direction: column; gap: 4px; }
+.mesh-deadman-info { display: flex; gap: 12px; flex-wrap: wrap; }
+.mesh-deadman-info-item { font-size: 0.75rem; color: rgba(255,255,255,0.4); }

neode-ui/src/views/settings/AIDataAccessSection.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAIPermissionsStore, AI_PERMISSION_CATEGORIES } from '@/stores/aiPermissions'
+import ToggleSwitch from '@/components/ToggleSwitch.vue'
+
+const { t } = useI18n()
+const aiPermissions = useAIPermissionsStore()
+
+const aiCategoryGroups = computed(() => {
+  const groups: { label: string; items: typeof AI_PERMISSION_CATEGORIES }[] = []
+  for (const cat of AI_PERMISSION_CATEGORIES) {
+    const existing = groups.find(g => g.label === cat.group)
+    if (existing) {
+      existing.items.push(cat)
+    } else {
+      groups.push({ label: cat.group, items: [cat] })
+    }
+  }
+  return groups
+})
+</script>
+
+<template>
+  <!-- AI Data Access Section -->
+  <div class="glass-card px-6 py-6 mb-6">
+    <div class="mb-2">
+      <h2 class="text-xl font-semibold text-white/96">{{ t('settings.aiDataAccess') }}</h2>
+    </div>
+    <p class="text-sm text-white/60 mb-6">{{ t('settings.aiDataAccessDesc') }}</p>
+    <button
+      @click="aiPermissions.allEnabled ? aiPermissions.disableAll() : aiPermissions.enableAll()"
+      class="w-full flex items-center gap-4 p-4 rounded-xl border transition-all text-left mb-6"
+      :class="aiPermissions.allEnabled
+        ? 'bg-white/10 border-orange-500/40'
+        : 'bg-black/20 border-white/10 hover:border-white/20'"
+    >
+      <svg class="w-5 h-5 shrink-0" :class="aiPermissions.allEnabled ? 'text-orange-400' : 'text-white/40'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+      </svg>
+      <div class="flex-1 min-w-0">
+        <p class="text-sm font-medium" :class="aiPermissions.allEnabled ? 'text-white/95' : 'text-white/70'">{{ t('common.enableAll') }}</p>
+        <p class="text-xs text-white/50 mt-0.5">{{ t('settings.enableAllDesc') }}</p>
+      </div>
+      <ToggleSwitch :model-value="aiPermissions.allEnabled" @update:model-value="aiPermissions.allEnabled ? aiPermissions.disableAll() : aiPermissions.enableAll()" @click.stop />
+    </button>
+    <div class="space-y-5">
+      <div v-for="group in aiCategoryGroups" :key="group.label">
+        <p class="text-xs font-medium text-white/40 uppercase tracking-wider mb-2 px-1">{{ group.label }}</p>
+        <div class="space-y-2">
+          <button
+            v-for="cat in group.items"
+            :key="cat.id"
+            @click="aiPermissions.toggle(cat.id)"
+            class="w-full flex items-center gap-4 p-4 rounded-xl border transition-all text-left"
+            :class="aiPermissions.isEnabled(cat.id)
+              ? 'bg-white/10 border-orange-500/40'
+              : 'bg-black/20 border-white/10 hover:border-white/20'"
+          >
+            <svg class="w-5 h-5 shrink-0" :class="aiPermissions.isEnabled(cat.id) ? 'text-orange-400' : 'text-white/40'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="cat.icon" />
+            </svg>
+            <div class="flex-1 min-w-0">
+              <p class="text-sm font-medium" :class="aiPermissions.isEnabled(cat.id) ? 'text-white/95' : 'text-white/70'">{{ cat.label }}</p>
+              <p class="text-xs text-white/50 mt-0.5">{{ cat.description }}</p>
+            </div>
+            <ToggleSwitch :model-value="aiPermissions.isEnabled(cat.id)" @update:model-value="aiPermissions.toggle(cat.id)" @click.stop />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

neode-ui/src/views/settings/AccountInfoSection.vue

@@ -0,0 +1,370 @@
+<script setup lang="ts">
+import { computed, ref, nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@/stores/app'
+import ControllerIndicator from '@/components/ControllerIndicator.vue'
+import { rpcClient } from '@/api/rpc-client'
+
+const { t } = useI18n()
+const store = useAppStore()
+
+// Server name
+const serverName = computed(() => store.serverName)
+const editingServerName = ref(false)
+const serverNameDraft = ref('')
+const serverNameInput = ref<HTMLInputElement | null>(null)
+
+function startEditServerName() {
+  serverNameDraft.value = serverName.value
+  editingServerName.value = true
+  nextTick(() => serverNameInput.value?.select())
+}
+
+async function saveServerName() {
+  const name = serverNameDraft.value.trim()
+  if (!name || name === serverName.value) {
+    editingServerName.value = false
+    return
+  }
+  try {
+    await rpcClient.call({ method: 'server.set-name', params: { name } })
+    store.updateServerName(name)
+  } catch (e) {
+    if (import.meta.env.DEV) console.error('Failed to rename server:', e)
+  }
+  editingServerName.value = false
+}
+
+// Version & release notes
+const version = computed(() => store.serverInfo?.version || '0.0.0')
+const showReleaseNotes = ref(false)
+
+// Identity
+const serverTorAddressFromStore = computed(() => store.serverInfo?.['tor-address'] || null)
+const torAddressFromRpc = ref<string | null>(null)
+const serverTorAddress = computed(() => serverTorAddressFromStore.value || torAddressFromRpc.value)
+const userDid = computed(() => {
+  try {
+    return localStorage.getItem('neode_did') || null
+  } catch {
+    return null
+  }
+})
+
+const copiedOnion = ref(false)
+const copiedDid = ref(false)
+let copiedTimer: ReturnType<typeof setTimeout> | null = null
+
+async function copyOnionAddress() {
+  const addr = serverTorAddress.value
+  if (!addr) return
+  try {
+    await navigator.clipboard.writeText(addr)
+  } catch {
+    const ta = document.createElement('textarea')
+    ta.value = addr
+    ta.style.position = 'fixed'
+    ta.style.opacity = '0'
+    document.body.appendChild(ta)
+    ta.select()
+    document.execCommand('copy')
+    document.body.removeChild(ta)
+  }
+  copiedOnion.value = true
+  if (copiedTimer) clearTimeout(copiedTimer)
+  copiedTimer = setTimeout(() => { copiedOnion.value = false }, 2000)
+}
+
+async function copyDid() {
+  if (!userDid.value) return
+  try {
+    await navigator.clipboard.writeText(userDid.value)
+  } catch {
+    const ta = document.createElement('textarea')
+    ta.value = userDid.value
+    ta.style.position = 'fixed'
+    ta.style.opacity = '0'
+    document.body.appendChild(ta)
+    ta.select()
+    document.execCommand('copy')
+    document.body.removeChild(ta)
+  }
+  copiedDid.value = true
+  setTimeout(() => { copiedDid.value = false }, 2000)
+}
+
+// Load Tor address on mount if not in store
+async function init() {
+  if (!serverTorAddressFromStore.value) {
+    try {
+      const res = await rpcClient.getTorAddress()
+      torAddressFromRpc.value = res.tor_address ?? null
+    } catch (e) {
+      if (import.meta.env.DEV) console.warn('Tor address may not be available yet', e)
+    }
+  }
+}
+init()
+</script>
+
+<template>
+  <!-- Controller indicator - Mobile only -->
+  <div class="md:hidden mb-4">
+    <ControllerIndicator />
+  </div>
+
+  <!-- Info Grid -->
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+    <!-- Server Name Card (editable) -->
+    <div class="bg-black/20 rounded-xl px-5 py-4 border border-white/10">
+      <div class="flex items-center gap-3 mb-2">
+        <svg class="w-5 h-5 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
+        </svg>
+        <p class="text-xs font-semibold text-white/60 uppercase tracking-wide">{{ t('settings.serverName') }}</p>
+      </div>
+      <div v-if="editingServerName" class="flex items-center gap-2">
+        <input
+          ref="serverNameInput"
+          v-model="serverNameDraft"
+          type="text"
+          maxlength="64"
+          class="flex-1 px-3 py-1.5 bg-white/10 border border-white/20 rounded-lg text-white text-lg font-semibold focus:outline-none focus:border-white/40 transition-colors"
+          @keydown.enter="saveServerName"
+          @keydown.escape="editingServerName = false"
+        />
+        <button
+          class="px-3 py-1.5 bg-white/10 border border-white/20 rounded-lg text-white/70 hover:text-white hover:bg-white/15 transition-colors text-sm"
+          @click="saveServerName"
+        >Save</button>
+        <button
+          class="px-3 py-1.5 text-white/50 hover:text-white/70 transition-colors text-sm"
+          @click="editingServerName = false"
+        >Cancel</button>
+      </div>
+      <div v-else class="flex items-center gap-2 group cursor-pointer" @click="startEditServerName">
+        <p class="text-lg font-semibold text-white/95">{{ serverName }}</p>
+        <svg class="w-4 h-4 text-white/30 group-hover:text-white/60 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+        </svg>
+      </div>
+    </div>
+
+    <!-- Version Card -->
+    <div class="bg-black/20 rounded-xl px-5 py-4 border border-white/10">
+      <div class="flex items-center gap-3 mb-2">
+        <svg class="w-5 h-5 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+        </svg>
+        <p class="text-xs font-semibold text-white/60 uppercase tracking-wide">{{ t('common.version') }}</p>
+      </div>
+      <div class="flex items-center justify-between">
+        <p class="text-lg font-semibold text-white/95">{{ version }}</p>
+        <button
+          @click="showReleaseNotes = true"
+          class="glass-button px-3 py-1.5 text-xs"
+        >What's New</button>
+      </div>
+    </div>
+
+    <!-- Release Notes Modal -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showReleaseNotes" class="fixed inset-0 z-[3000] flex items-center justify-center p-4" @click="showReleaseNotes = false">
+          <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
+          <div @click.stop class="glass-card p-6 max-w-lg w-full relative z-10 flex flex-col" style="max-height: 85vh">
+            <div class="flex items-start justify-between gap-4 mb-5 shrink-0">
+              <h3 class="text-xl font-semibold text-white">What's New</h3>
+              <button @click="showReleaseNotes = false" class="p-2 rounded-lg hover:bg-white/10 text-white/70 hover:text-white transition-colors" aria-label="Close">
+                <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>
+            </div>
+            <div class="overflow-y-auto flex-1 min-h-0 space-y-6 pr-1">
+              <!-- v1.3.0 -->
+              <div>
+                <div class="flex items-center gap-2 mb-3">
+                  <span class="text-xs font-mono px-2 py-0.5 rounded bg-orange-500/20 text-orange-300">v1.3.0</span>
+                  <span class="text-xs text-white/40">Mar 19, 2026</span>
+                </div>
+                <div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
+                  <div>
+                    <h4 class="text-white font-medium mb-1">Full Security Audit</h4>
+                    <p>33 security findings from a comprehensive penetration test — all fixed. Backend now only accessible through nginx. Path traversal, SSRF, and XSS vulnerabilities eliminated. Federation requires cryptographic signatures. Session tokens rotate after 2FA. Destructive operations now require password confirmation.</p>
+                  </div>
+                  <div>
+                    <h4 class="text-white font-medium mb-1">Container Reliability</h4>
+                    <p>Memory limits on every container prevent one app from crashing the whole system. Crashed apps now show a red "crashed" badge with a restart button instead of disappearing. Smart health status shows "starting up", "healthy", or "unhealthy" in real time. Apps you stop stay stopped — no more auto-restart fighting.</p>
+                  </div>
+                  <div>
+                    <h4 class="text-white font-medium mb-1">Wallet on Home</h4>
+                    <p>The Home dashboard now shows your Bitcoin wallet with on-chain, Lightning, and ecash balances. Send, receive, and view transaction history right from the home screen. New Transactions modal shows your full history with confirmations.</p>
+                  </div>
+                  <div>
+                    <h4 class="text-white font-medium mb-1">LND Connect Fixed</h4>
+                    <p>Connect Your Wallet (Zeus, Zap, BlueWallet) now works over both local network and Tor. QR codes generate correctly with REST API access.</p>
+                  </div>
+                  <div>
+                    <h4 class="text-white font-medium mb-1">UI Polish</h4>
+                    <p>Mesh view redesigned. New glass button styles throughout. Restart button on running apps. Improved app status badges. Cleaner navigation on the Apps page.</p>
+                  </div>
+                </div>
+              </div>
+              <!-- alpha.9 -->
+              <div>
+                <div class="flex items-center gap-2 mb-3">
+                  <span class="text-xs font-mono px-2 py-0.5 rounded bg-white/10 text-white/60">v1.2.0-alpha.9</span>
+                  <span class="text-xs text-white/40">Mar 18, 2026</span>
+                </div>
+                <div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
+                  <div>
+                    <h4 class="text-white font-medium mb-1">Security Hardening Complete</h4>
+                    <p>All 12 pentest findings fixed. CSRF tokens now survive restarts. Password hashing upgraded to Argon2id. Bitcoin RPC gets a unique random password on every install. Federation messages require ed25519 signatures.</p>
+                  </div>
+                  <div>
+                    <h4 class="text-white font-medium mb-1">7 Bugs Squashed</h4>
+                    <p>Random logouts fixed (P0). Uninstall dialog is now a proper full-screen modal with an "Uninstalling..." overlay. App cards no longer flicker between Start/Launch during container scans. ElectrumX index estimate corrected.</p>
+                  </div>
+                  <div>
+                    <h4 class="text-white font-medium mb-1">Bitcoin Sync on Dashboard</h4>
+                    <p>Homepage System card now shows Bitcoin Core sync progress, block height, and green/orange status indicator when Bitcoin is running.</p>
+                  </div>
+                </div>
+              </div>
+              <!-- alpha.8 -->
+              <div>
+                <div class="flex items-center gap-2 mb-3">
+                  <span class="text-xs font-mono px-2 py-0.5 rounded bg-white/10 text-white/60">v1.2.0-alpha.8</span>
+                  <span class="text-xs text-white/40">Mar 18, 2026</span>
+                </div>
+                <div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
+                  <div>
+                    <h4 class="text-white font-medium mb-1">Pentest Remediation (9/12)</h4>
+                    <p>Fixed 9 of 12 security findings: session auth on LND connect info, DEV_MODE removed from production, ed25519 signature verification on node messages, path traversal protection, NIP-07 origin validation, AIUI session checks, strict onion validation.</p>
+                  </div>
+                  <div>
+                    <h4 class="text-white font-medium mb-1">UI Polish Batch</h4>
+                    <p>Fedimint renamed to "Fedimint Guardian". Tab-launch icons. Marketplace sorts installed apps to end. Mesh mobile layout fixed. On-Chain first in receive modals. Federation shows names instead of DIDs. Cleaner iframe error screens.</p>
+                  </div>
+                </div>
+              </div>
+              <!-- alpha.7 -->
+              <div>
+                <div class="flex items-center gap-2 mb-3">
+                  <span class="text-xs font-mono px-2 py-0.5 rounded bg-white/10 text-white/60">v1.2.0-alpha.7</span>
+                  <span class="text-xs text-white/40">Mar 18, 2026</span>
+                </div>
+                <div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
+                  <div>
+                    <h4 class="text-white font-medium mb-1">Marketplace & Credentials</h4>
+                    <p>29 containers running rootless. Marketplace app aliases working. Credential injection for inter-container authentication.</p>
+                  </div>
+                </div>
+              </div>
+              <!-- alpha.4-6 -->
+              <div>
+                <div class="flex items-center gap-2 mb-3">
+                  <span class="text-xs font-mono px-2 py-0.5 rounded bg-white/10 text-white/60">v1.2.0-alpha.4-6</span>
+                  <span class="text-xs text-white/40">Mar 18, 2026</span>
+                </div>
+                <div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
+                  <div>
+                    <h4 class="text-white font-medium mb-1">Rootless Podman Migration</h4>
+                    <p>Migrated all containers from root to rootless Podman. UID namespace mapping, volume ownership fixes, sysctl tuning. Bitcoin RPC verified, all web services confirmed healthy. 29 containers up and running.</p>
+                  </div>
+                </div>
+              </div>
+              <!-- alpha.2-3 -->
+              <div>
+                <div class="flex items-center gap-2 mb-3">
+                  <span class="text-xs font-mono px-2 py-0.5 rounded bg-white/10 text-white/60">v1.2.0-alpha.2-3</span>
+                  <span class="text-xs text-white/40">Mar 18, 2026</span>
+                </div>
+                <div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
+                  <div>
+                    <h4 class="text-white font-medium mb-1">Systemd Hardening Restored</h4>
+                    <p>Full systemd security sandbox restored now that containers run rootless. NoNewPrivileges, restricted namespaces, and system call filtering re-enabled. Session persistence and boot sequence fixes.</p>
+                  </div>
+                </div>
+              </div>
+              <!-- alpha.1 -->
+              <div>
+                <div class="flex items-center gap-2 mb-3">
+                  <span class="text-xs font-mono px-2 py-0.5 rounded bg-white/10 text-white/60">v1.2.0-alpha.1</span>
+                  <span class="text-xs text-white/40">Mar 18, 2026</span>
+                </div>
+                <div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
+                  <div>
+                    <h4 class="text-white font-medium mb-1">Mesh Radio & Container Stability</h4>
+                    <p>LoRa mesh radio auto-detects USB port changes with a new Connect button. Fixed container crash loops — all apps start cleanly and stay stable. Apps starting up show progress instead of re-appearing in the store. Tor routing enabled by default for Bitcoin and Lightning.</p>
+                  </div>
+                  <div>
+                    <h4 class="text-white font-medium mb-1">Off-Grid Bitcoin</h4>
+                    <p>Receive Bitcoin block headers over mesh radio. Dead man's switch broadcasts location to trusted contacts if you go silent. GPS sharing is opt-in only.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <button @click="showReleaseNotes = false" class="glass-button w-full mt-4 py-2 text-sm shrink-0">Close</button>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- Session Card -->
+    <div class="bg-black/20 rounded-xl px-5 py-4 border border-white/10 md:col-span-2">
+      <div class="flex items-center gap-3 mb-2">
+        <svg class="w-5 h-5 text-green-400" 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>
+        <p class="text-xs font-semibold text-white/60 uppercase tracking-wide">{{ t('settings.sessionStatus') }}</p>
+      </div>
+      <p class="text-base font-medium text-white/90">{{ t('settings.loggedIn') }}</p>
+    </div>
+
+    <!-- Identity Card: DID + Tor Address -->
+    <div v-if="userDid || serverTorAddress" class="bg-black/20 rounded-xl px-5 py-4 border border-white/10 md:col-span-2 space-y-4">
+      <div v-if="userDid">
+        <div class="flex items-center justify-between gap-2 mb-2">
+          <div class="flex items-center gap-3 min-w-0">
+            <svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+            </svg>
+            <p class="text-xs font-semibold text-white/60 uppercase tracking-wide">{{ t('settings.yourDid') }}</p>
+          </div>
+          <button
+            @click="copyDid"
+            class="shrink-0 px-3 py-1.5 rounded-lg glass-button glass-button-sm text-xs font-medium text-white/90 hover:text-white transition-colors flex items-center gap-1.5"
+          >
+            <svg v-if="!copiedDid" 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+            </svg>
+            <span v-else class="text-green-400 text-xs">{{ t('common.copied') }}</span>
+            <span v-if="!copiedDid">{{ t('common.copy') }}</span>
+          </button>
+        </div>
+        <p class="text-sm font-mono text-white/90 break-all" :title="userDid">{{ userDid }}</p>
+        <p class="text-xs text-white/50 mt-1">{{ t('settings.didHelper') }}</p>
+      </div>
+      <div v-if="serverTorAddress" :class="userDid ? 'pt-4 border-t border-white/10' : ''">
+        <div class="flex items-center gap-3 mb-2">
+          <svg class="w-5 h-5 text-amber-400 shrink-0" 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>
+          <p class="text-xs font-semibold text-white/60 uppercase tracking-wide">{{ t('settings.onionAddress') }}</p>
+        </div>
+        <p class="text-sm font-mono text-amber-400/90 break-all mb-1" :title="serverTorAddress">{{ serverTorAddress }}</p>
+        <p class="text-xs text-white/50 mb-3">{{ t('settings.onionHelper') }}</p>
+        <button
+          @click="copyOnionAddress"
+          class="w-full min-h-[44px] rounded-lg glass-button text-sm font-medium text-white/90 hover:text-white transition-colors flex items-center justify-center gap-2"
+        >
+          <svg v-if="!copiedOnion" 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+          </svg>
+          <span v-if="!copiedOnion">{{ t('common.copy') }}</span>
+          <span v-else class="text-green-400">{{ t('common.copied') }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

neode-ui/src/views/settings/AccountSection.vue

@@ -1,857 +1,29 @@
 <script setup lang="ts">
-import { computed, ref, nextTick } from 'vue'
-import DOMPurify from 'dompurify'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
-import ControllerIndicator from '@/components/ControllerIndicator.vue'
-import { rpcClient } from '@/api/rpc-client'
-import { useModalKeyboard } from '@/composables/useModalKeyboard'
+import AccountInfoSection from '@/views/settings/AccountInfoSection.vue'
+import ChangePasswordSection from '@/views/settings/ChangePasswordSection.vue'
+import TwoFactorSection from '@/views/settings/TwoFactorSection.vue'
 
 const router = useRouter()
 const { t } = useI18n()
 const store = useAppStore()
 
-// Server name
-const serverName = computed(() => store.serverName)
-const editingServerName = ref(false)
-const serverNameDraft = ref('')
-const serverNameInput = ref<HTMLInputElement | null>(null)
-
-function startEditServerName() {
-  serverNameDraft.value = serverName.value
-  editingServerName.value = true
-  nextTick(() => serverNameInput.value?.select())
-}
-
-async function saveServerName() {
-  const name = serverNameDraft.value.trim()
-  if (!name || name === serverName.value) {
-    editingServerName.value = false
-    return
-  }
-  try {
-    await rpcClient.call({ method: 'server.set-name', params: { name } })
-    store.updateServerName(name)
-  } catch (e) {
-    if (import.meta.env.DEV) console.error('Failed to rename server:', e)
-  }
-  editingServerName.value = false
-}
-
-// Version & release notes
-const version = computed(() => store.serverInfo?.version || '0.0.0')
-const showReleaseNotes = ref(false)
-
-// Identity
-const serverTorAddressFromStore = computed(() => store.serverInfo?.['tor-address'] || null)
-const torAddressFromRpc = ref<string | null>(null)
-const serverTorAddress = computed(() => serverTorAddressFromStore.value || torAddressFromRpc.value)
-const userDid = computed(() => {
-  try {
-    return localStorage.getItem('neode_did') || null
-  } catch {
-    return null
-  }
-})
-
-const copiedOnion = ref(false)
-const copiedDid = ref(false)
-let copiedTimer: ReturnType<typeof setTimeout> | null = null
-
-async function copyOnionAddress() {
-  const addr = serverTorAddress.value
-  if (!addr) return
-  try {
-    await navigator.clipboard.writeText(addr)
-  } catch {
-    const ta = document.createElement('textarea')
-    ta.value = addr
-    ta.style.position = 'fixed'
-    ta.style.opacity = '0'
-    document.body.appendChild(ta)
-    ta.select()
-    document.execCommand('copy')
-    document.body.removeChild(ta)
-  }
-  copiedOnion.value = true
-  if (copiedTimer) clearTimeout(copiedTimer)
-  copiedTimer = setTimeout(() => { copiedOnion.value = false }, 2000)
-}
-
-async function copyDid() {
-  if (!userDid.value) return
-  try {
-    await navigator.clipboard.writeText(userDid.value)
-  } catch {
-    const ta = document.createElement('textarea')
-    ta.value = userDid.value
-    ta.style.position = 'fixed'
-    ta.style.opacity = '0'
-    document.body.appendChild(ta)
-    ta.select()
-    document.execCommand('copy')
-    document.body.removeChild(ta)
-  }
-  copiedDid.value = true
-  setTimeout(() => { copiedDid.value = false }, 2000)
-}
-
-// Change password
-const showChangePasswordModal = ref(false)
-const changePasswordModalRef = ref<HTMLElement | null>(null)
-const changePasswordRestoreFocusRef = ref<HTMLElement | null>(null)
-useModalKeyboard(changePasswordModalRef, showChangePasswordModal, closeChangePasswordModal, { restoreFocusRef: changePasswordRestoreFocusRef })
-const changingPassword = ref(false)
-const changePasswordError = ref('')
-const changePasswordSuccess = ref('')
-const changePasswordForm = ref({
-  currentPassword: '',
-  newPassword: '',
-  confirmPassword: '',
-  alsoChangeSsh: true,
-})
-
-function validatePasswordStrength(pw: string): string | null {
-  if (pw.length < 12) return t('settings.passwordMinLength')
-  if (!/[A-Z]/.test(pw)) return t('settings.passwordNeedUppercase')
-  if (!/[a-z]/.test(pw)) return t('settings.passwordNeedLowercase')
-  if (!/\d/.test(pw)) return t('settings.passwordNeedDigit')
-  if (!/[^A-Za-z0-9]/.test(pw)) return t('settings.passwordNeedSpecial')
-  return null
-}
-
-async function handleChangePassword() {
-  changePasswordError.value = ''
-  changePasswordSuccess.value = ''
-  const { currentPassword, newPassword, confirmPassword, alsoChangeSsh } = changePasswordForm.value
-  if (!currentPassword || !newPassword || !confirmPassword) {
-    changePasswordError.value = t('settings.passwordAllFieldsRequired')
-    return
-  }
-  if (newPassword !== confirmPassword) {
-    changePasswordError.value = t('settings.passwordMismatch')
-    return
-  }
-  const strengthError = validatePasswordStrength(newPassword)
-  if (strengthError) {
-    changePasswordError.value = strengthError
-    return
-  }
-  changingPassword.value = true
-  try {
-    await rpcClient.changePassword({
-      currentPassword,
-      newPassword,
-      alsoChangeSsh,
-    })
-    changePasswordSuccess.value = t('settings.passwordUpdatedSuccess')
-    changePasswordForm.value = { currentPassword: '', newPassword: '', confirmPassword: '', alsoChangeSsh: true }
-    setTimeout(() => {
-      closeChangePasswordModal()
-    }, 2000)
-  } catch (e) {
-    changePasswordError.value = e instanceof Error ? e.message : t('settings.passwordChangeFailed')
-  } finally {
-    changingPassword.value = false
-  }
-}
-
-function closeChangePasswordModal() {
-  changePasswordRestoreFocusRef.value?.focus?.()
-  showChangePasswordModal.value = false
-  changePasswordError.value = ''
-  changePasswordSuccess.value = ''
-  changePasswordForm.value = { currentPassword: '', newPassword: '', confirmPassword: '', alsoChangeSsh: true }
-}
-
-// 2FA / TOTP
-const totpEnabled = ref(false)
-const showTotpSetupModal = ref(false)
-const showTotpDisableModal = ref(false)
-const totpSetupStep = ref(1)
-const totpSetupPassword = ref('')
-const totpSetupCode = ref('')
-const totpSetupError = ref('')
-const totpSetupLoading = ref(false)
-const totpQrSvg = ref('')
-const sanitizedQrSvg = computed(() => DOMPurify.sanitize(totpQrSvg.value, { USE_PROFILES: { svg: true } }))
-const totpSecretBase32 = ref('')
-const showTotpSecret = ref(false)
-const totpPendingToken = ref('')
-const totpBackupCodes = ref<string[]>([])
-const backupCodesCopied = ref(false)
-const totpDisablePassword = ref('')
-const totpDisableCode = ref('')
-const totpDisableError = ref('')
-const totpDisableLoading = ref(false)
-
-async function loadTotpStatus() {
-  try {
-    const res = await rpcClient.totpStatus()
-    totpEnabled.value = res.enabled
-  } catch (e) {
-    if (import.meta.env.DEV) console.warn('TOTP status may not be available', e)
-  }
-}
-
-async function beginTotpSetup() {
-  totpSetupError.value = ''
-  totpSetupLoading.value = true
-  try {
-    const res = await rpcClient.totpSetupBegin(totpSetupPassword.value)
-    totpQrSvg.value = res.qr_svg
-    totpSecretBase32.value = res.secret_base32
-    totpPendingToken.value = res.pending_token
-    totpSetupStep.value = 2
-  } catch (e) {
-    totpSetupError.value = e instanceof Error ? e.message : t('settings.setupFailed')
-  } finally {
-    totpSetupLoading.value = false
-  }
-}
-
-async function confirmTotpSetup() {
-  totpSetupError.value = ''
-  totpSetupLoading.value = true
-  try {
-    const res = await rpcClient.totpSetupConfirm({
-      code: totpSetupCode.value,
-      password: totpSetupPassword.value,
-      pendingToken: totpPendingToken.value,
-    })
-    totpBackupCodes.value = res.backup_codes
-    totpEnabled.value = true
-    totpSetupStep.value = 3
-  } catch (e) {
-    totpSetupError.value = e instanceof Error ? e.message : t('settings.verificationFailed')
-  } finally {
-    totpSetupLoading.value = false
-  }
-}
-
-function closeTotpSetup() {
-  showTotpSetupModal.value = false
-  totpSetupStep.value = 1
-  totpSetupPassword.value = ''
-  totpSetupCode.value = ''
-  totpSetupError.value = ''
-  totpQrSvg.value = ''
-  totpSecretBase32.value = ''
-  totpPendingToken.value = ''
-  totpBackupCodes.value = []
-  backupCodesCopied.value = false
-}
-
-async function disableTotp() {
-  totpDisableError.value = ''
-  totpDisableLoading.value = true
-  try {
-    await rpcClient.totpDisable(totpDisablePassword.value, totpDisableCode.value)
-    totpEnabled.value = false
-    closeTotpDisable()
-  } catch (e) {
-    totpDisableError.value = e instanceof Error ? e.message : t('settings.disableFailed')
-  } finally {
-    totpDisableLoading.value = false
-  }
-}
-
-function closeTotpDisable() {
-  showTotpDisableModal.value = false
-  totpDisablePassword.value = ''
-  totpDisableCode.value = ''
-  totpDisableError.value = ''
-}
-
-async function copyBackupCodes() {
-  const text = totpBackupCodes.value.join('\n')
-  try {
-    await navigator.clipboard.writeText(text)
-  } catch {
-    const ta = document.createElement('textarea')
-    ta.value = text
-    ta.style.position = 'fixed'
-    ta.style.opacity = '0'
-    document.body.appendChild(ta)
-    ta.select()
-    document.execCommand('copy')
-    document.body.removeChild(ta)
-  }
-  backupCodesCopied.value = true
-  setTimeout(() => { backupCodesCopied.value = false }, 2000)
-}
-
-// Logout
 async function handleLogout() {
   try { await store.logout() } catch (e) { if (import.meta.env.DEV) console.warn('Logout failed, proceeding anyway', e) }
   router.push('/login').catch(() => { window.location.href = '/login' })
 }
-
-// Load on mount
-async function init() {
-  loadTotpStatus()
-  if (!serverTorAddressFromStore.value) {
-    try {
-      const res = await rpcClient.getTorAddress()
-      torAddressFromRpc.value = res.tor_address ?? null
-    } catch (e) {
-      if (import.meta.env.DEV) console.warn('Tor address may not be available yet', e)
-    }
-  }
-}
-init()
 </script>
 
 <template>
-  <!-- Controller indicator - Mobile only -->
-  <div class="md:hidden mb-4">
-    <ControllerIndicator />
-  </div>
-
   <!-- Account Section -->
   <div class="glass-card px-6 py-6 mb-6">
     <h2 class="text-xl font-semibold text-white/96 mb-6">{{ t('settings.account') }}</h2>
 
-    <!-- Info Grid -->
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-      <!-- Server Name Card (editable) -->
-      <div class="bg-black/20 rounded-xl px-5 py-4 border border-white/10">
-        <div class="flex items-center gap-3 mb-2">
-          <svg class="w-5 h-5 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
-          </svg>
-          <p class="text-xs font-semibold text-white/60 uppercase tracking-wide">{{ t('settings.serverName') }}</p>
-        </div>
-        <div v-if="editingServerName" class="flex items-center gap-2">
-          <input
-            ref="serverNameInput"
-            v-model="serverNameDraft"
-            type="text"
-            maxlength="64"
-            class="flex-1 px-3 py-1.5 bg-white/10 border border-white/20 rounded-lg text-white text-lg font-semibold focus:outline-none focus:border-white/40 transition-colors"
-            @keydown.enter="saveServerName"
-            @keydown.escape="editingServerName = false"
-          />
-          <button
-            class="px-3 py-1.5 bg-white/10 border border-white/20 rounded-lg text-white/70 hover:text-white hover:bg-white/15 transition-colors text-sm"
-            @click="saveServerName"
-          >Save</button>
-          <button
-            class="px-3 py-1.5 text-white/50 hover:text-white/70 transition-colors text-sm"
-            @click="editingServerName = false"
-          >Cancel</button>
-        </div>
-        <div v-else class="flex items-center gap-2 group cursor-pointer" @click="startEditServerName">
-          <p class="text-lg font-semibold text-white/95">{{ serverName }}</p>
-          <svg class="w-4 h-4 text-white/30 group-hover:text-white/60 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-          </svg>
-        </div>
-      </div>
-
-      <!-- Version Card -->
-      <div class="bg-black/20 rounded-xl px-5 py-4 border border-white/10">
-        <div class="flex items-center gap-3 mb-2">
-          <svg class="w-5 h-5 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-          </svg>
-          <p class="text-xs font-semibold text-white/60 uppercase tracking-wide">{{ t('common.version') }}</p>
-        </div>
-        <div class="flex items-center justify-between">
-          <p class="text-lg font-semibold text-white/95">{{ version }}</p>
-          <button
-            @click="showReleaseNotes = true"
-            class="glass-button px-3 py-1.5 text-xs"
-          >What's New</button>
-        </div>
-      </div>
-
-      <!-- Release Notes Modal -->
-      <Teleport to="body">
-        <Transition name="modal">
-          <div v-if="showReleaseNotes" class="fixed inset-0 z-[3000] flex items-center justify-center p-4" @click="showReleaseNotes = false">
-            <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
-            <div @click.stop class="glass-card p-6 max-w-lg w-full relative z-10 flex flex-col" style="max-height: 85vh">
-              <div class="flex items-start justify-between gap-4 mb-5 shrink-0">
-                <h3 class="text-xl font-semibold text-white">What's New</h3>
-                <button @click="showReleaseNotes = false" class="p-2 rounded-lg hover:bg-white/10 text-white/70 hover:text-white transition-colors" aria-label="Close">
-                  <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>
-              </div>
-              <div class="overflow-y-auto flex-1 min-h-0 space-y-6 pr-1">
-                <!-- v1.3.0 -->
-                <div>
-                  <div class="flex items-center gap-2 mb-3">
-                    <span class="text-xs font-mono px-2 py-0.5 rounded bg-orange-500/20 text-orange-300">v1.3.0</span>
-                    <span class="text-xs text-white/40">Mar 19, 2026</span>
-                  </div>
-                  <div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
-                    <div>
-                      <h4 class="text-white font-medium mb-1">Full Security Audit</h4>
-                      <p>33 security findings from a comprehensive penetration test — all fixed. Backend now only accessible through nginx. Path traversal, SSRF, and XSS vulnerabilities eliminated. Federation requires cryptographic signatures. Session tokens rotate after 2FA. Destructive operations now require password confirmation.</p>
-                    </div>
-                    <div>
-                      <h4 class="text-white font-medium mb-1">Container Reliability</h4>
-                      <p>Memory limits on every container prevent one app from crashing the whole system. Crashed apps now show a red "crashed" badge with a restart button instead of disappearing. Smart health status shows "starting up", "healthy", or "unhealthy" in real time. Apps you stop stay stopped — no more auto-restart fighting.</p>
-                    </div>
-                    <div>
-                      <h4 class="text-white font-medium mb-1">Wallet on Home</h4>
-                      <p>The Home dashboard now shows your Bitcoin wallet with on-chain, Lightning, and ecash balances. Send, receive, and view transaction history right from the home screen. New Transactions modal shows your full history with confirmations.</p>
-                    </div>
-                    <div>
-                      <h4 class="text-white font-medium mb-1">LND Connect Fixed</h4>
-                      <p>Connect Your Wallet (Zeus, Zap, BlueWallet) now works over both local network and Tor. QR codes generate correctly with REST API access.</p>
-                    </div>
-                    <div>
-                      <h4 class="text-white font-medium mb-1">UI Polish</h4>
-                      <p>Mesh view redesigned. New glass button styles throughout. Restart button on running apps. Improved app status badges. Cleaner navigation on the Apps page.</p>
-                    </div>
-                  </div>
-                </div>
-                <!-- alpha.9 -->
-                <div>
-                  <div class="flex items-center gap-2 mb-3">
-                    <span class="text-xs font-mono px-2 py-0.5 rounded bg-white/10 text-white/60">v1.2.0-alpha.9</span>
-                    <span class="text-xs text-white/40">Mar 18, 2026</span>
-                  </div>
-                  <div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
-                    <div>
-                      <h4 class="text-white font-medium mb-1">Security Hardening Complete</h4>
-                      <p>All 12 pentest findings fixed. CSRF tokens now survive restarts. Password hashing upgraded to Argon2id. Bitcoin RPC gets a unique random password on every install. Federation messages require ed25519 signatures.</p>
-                    </div>
-                    <div>
-                      <h4 class="text-white font-medium mb-1">7 Bugs Squashed</h4>
-                      <p>Random logouts fixed (P0). Uninstall dialog is now a proper full-screen modal with an "Uninstalling..." overlay. App cards no longer flicker between Start/Launch during container scans. ElectrumX index estimate corrected.</p>
-                    </div>
-                    <div>
-                      <h4 class="text-white font-medium mb-1">Bitcoin Sync on Dashboard</h4>
-                      <p>Homepage System card now shows Bitcoin Core sync progress, block height, and green/orange status indicator when Bitcoin is running.</p>
-                    </div>
-                  </div>
-                </div>
-                <!-- alpha.8 -->
-                <div>
-                  <div class="flex items-center gap-2 mb-3">
-                    <span class="text-xs font-mono px-2 py-0.5 rounded bg-white/10 text-white/60">v1.2.0-alpha.8</span>
-                    <span class="text-xs text-white/40">Mar 18, 2026</span>
-                  </div>
-                  <div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
-                    <div>
-                      <h4 class="text-white font-medium mb-1">Pentest Remediation (9/12)</h4>
-                      <p>Fixed 9 of 12 security findings: session auth on LND connect info, DEV_MODE removed from production, ed25519 signature verification on node messages, path traversal protection, NIP-07 origin validation, AIUI session checks, strict onion validation.</p>
-                    </div>
-                    <div>
-                      <h4 class="text-white font-medium mb-1">UI Polish Batch</h4>
-                      <p>Fedimint renamed to "Fedimint Guardian". Tab-launch icons. Marketplace sorts installed apps to end. Mesh mobile layout fixed. On-Chain first in receive modals. Federation shows names instead of DIDs. Cleaner iframe error screens.</p>
-                    </div>
-                  </div>
-                </div>
-                <!-- alpha.7 -->
-                <div>
-                  <div class="flex items-center gap-2 mb-3">
-                    <span class="text-xs font-mono px-2 py-0.5 rounded bg-white/10 text-white/60">v1.2.0-alpha.7</span>
-                    <span class="text-xs text-white/40">Mar 18, 2026</span>
-                  </div>
-                  <div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
-                    <div>
-                      <h4 class="text-white font-medium mb-1">Marketplace & Credentials</h4>
-                      <p>29 containers running rootless. Marketplace app aliases working. Credential injection for inter-container authentication.</p>
-                    </div>
-                  </div>
-                </div>
-                <!-- alpha.4-6 -->
-                <div>
-                  <div class="flex items-center gap-2 mb-3">
-                    <span class="text-xs font-mono px-2 py-0.5 rounded bg-white/10 text-white/60">v1.2.0-alpha.4-6</span>
-                    <span class="text-xs text-white/40">Mar 18, 2026</span>
-                  </div>
-                  <div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
-                    <div>
-                      <h4 class="text-white font-medium mb-1">Rootless Podman Migration</h4>
-                      <p>Migrated all containers from root to rootless Podman. UID namespace mapping, volume ownership fixes, sysctl tuning. Bitcoin RPC verified, all web services confirmed healthy. 29 containers up and running.</p>
-                    </div>
-                  </div>
-                </div>
-                <!-- alpha.2-3 -->
-                <div>
-                  <div class="flex items-center gap-2 mb-3">
-                    <span class="text-xs font-mono px-2 py-0.5 rounded bg-white/10 text-white/60">v1.2.0-alpha.2-3</span>
-                    <span class="text-xs text-white/40">Mar 18, 2026</span>
-                  </div>
-                  <div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
-                    <div>
-                      <h4 class="text-white font-medium mb-1">Systemd Hardening Restored</h4>
-                      <p>Full systemd security sandbox restored now that containers run rootless. NoNewPrivileges, restricted namespaces, and system call filtering re-enabled. Session persistence and boot sequence fixes.</p>
-                    </div>
-                  </div>
-                </div>
-                <!-- alpha.1 -->
-                <div>
-                  <div class="flex items-center gap-2 mb-3">
-                    <span class="text-xs font-mono px-2 py-0.5 rounded bg-white/10 text-white/60">v1.2.0-alpha.1</span>
-                    <span class="text-xs text-white/40">Mar 18, 2026</span>
-                  </div>
-                  <div class="space-y-3 text-sm text-white/80 pl-3 border-l border-white/10">
-                    <div>
-                      <h4 class="text-white font-medium mb-1">Mesh Radio & Container Stability</h4>
-                      <p>LoRa mesh radio auto-detects USB port changes with a new Connect button. Fixed container crash loops — all apps start cleanly and stay stable. Apps starting up show progress instead of re-appearing in the store. Tor routing enabled by default for Bitcoin and Lightning.</p>
-                    </div>
-                    <div>
-                      <h4 class="text-white font-medium mb-1">Off-Grid Bitcoin</h4>
-                      <p>Receive Bitcoin block headers over mesh radio. Dead man's switch broadcasts location to trusted contacts if you go silent. GPS sharing is opt-in only.</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <button @click="showReleaseNotes = false" class="glass-button w-full mt-4 py-2 text-sm shrink-0">Close</button>
-            </div>
-          </div>
-        </Transition>
-      </Teleport>
-
-      <!-- Session Card -->
-      <div class="bg-black/20 rounded-xl px-5 py-4 border border-white/10 md:col-span-2">
-        <div class="flex items-center gap-3 mb-2">
-          <svg class="w-5 h-5 text-green-400" 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>
-          <p class="text-xs font-semibold text-white/60 uppercase tracking-wide">{{ t('settings.sessionStatus') }}</p>
-        </div>
-        <p class="text-base font-medium text-white/90">{{ t('settings.loggedIn') }}</p>
-      </div>
-
-      <!-- Identity Card: DID + Tor Address -->
-      <div v-if="userDid || serverTorAddress" class="bg-black/20 rounded-xl px-5 py-4 border border-white/10 md:col-span-2 space-y-4">
-        <div v-if="userDid">
-          <div class="flex items-center justify-between gap-2 mb-2">
-            <div class="flex items-center gap-3 min-w-0">
-              <svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
-              </svg>
-              <p class="text-xs font-semibold text-white/60 uppercase tracking-wide">{{ t('settings.yourDid') }}</p>
-            </div>
-            <button
-              @click="copyDid"
-              class="shrink-0 px-3 py-1.5 rounded-lg glass-button glass-button-sm text-xs font-medium text-white/90 hover:text-white transition-colors flex items-center gap-1.5"
-            >
-              <svg v-if="!copiedDid" 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-              </svg>
-              <span v-else class="text-green-400 text-xs">{{ t('common.copied') }}</span>
-              <span v-if="!copiedDid">{{ t('common.copy') }}</span>
-            </button>
-          </div>
-          <p class="text-sm font-mono text-white/90 break-all" :title="userDid">{{ userDid }}</p>
-          <p class="text-xs text-white/50 mt-1">{{ t('settings.didHelper') }}</p>
-        </div>
-        <div v-if="serverTorAddress" :class="userDid ? 'pt-4 border-t border-white/10' : ''">
-          <div class="flex items-center gap-3 mb-2">
-            <svg class="w-5 h-5 text-amber-400 shrink-0" 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>
-            <p class="text-xs font-semibold text-white/60 uppercase tracking-wide">{{ t('settings.onionAddress') }}</p>
-          </div>
-          <p class="text-sm font-mono text-amber-400/90 break-all mb-1" :title="serverTorAddress">{{ serverTorAddress }}</p>
-          <p class="text-xs text-white/50 mb-3">{{ t('settings.onionHelper') }}</p>
-          <button
-            @click="copyOnionAddress"
-            class="w-full min-h-[44px] rounded-lg glass-button text-sm font-medium text-white/90 hover:text-white transition-colors flex items-center justify-center gap-2"
-          >
-            <svg v-if="!copiedOnion" 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-            </svg>
-            <span v-if="!copiedOnion">{{ t('common.copy') }}</span>
-            <span v-else class="text-green-400">{{ t('common.copied') }}</span>
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Change Password -->
-    <div data-controller-container tabindex="0" class="mb-6">
-      <button
-        @click="showChangePasswordModal = true"
-        class="w-full flex items-center justify-center gap-2 mb-4 px-4 py-2 rounded-lg glass-button glass-button-warning font-medium"
-      >
-        <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="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
-        </svg>
-        <span>{{ t('settings.changePassword') }}</span>
-      </button>
-    </div>
-
-    <!-- Change Password Modal -->
-    <Teleport to="body">
-      <div
-        v-if="showChangePasswordModal"
-        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md"
-        @click.self="closeChangePasswordModal()"
-      >
-        <div ref="changePasswordModalRef" class="glass-card p-6 max-w-md w-full">
-          <h3 class="text-lg font-semibold text-white mb-4">{{ t('settings.changePasswordTitle') }}</h3>
-          <p class="text-white/70 text-sm mb-4">{{ t('settings.changePasswordDesc') }}</p>
-          <form @submit.prevent="handleChangePassword" class="space-y-4">
-            <div>
-              <label class="block text-sm font-medium text-white/80 mb-2">{{ t('settings.currentPassword') }}</label>
-              <input
-                v-model="changePasswordForm.currentPassword"
-                type="password"
-                required
-                autocomplete="current-password"
-                class="w-full px-3 py-2 rounded-lg bg-white/10 text-white border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
-                :placeholder="t('login.enterPasswordPlaceholder')"
-              />
-            </div>
-            <div>
-              <label class="block text-sm font-medium text-white/80 mb-2">{{ t('settings.newPassword') }}</label>
-              <input
-                v-model="changePasswordForm.newPassword"
-                type="password"
-                required
-                autocomplete="new-password"
-                class="w-full px-3 py-2 rounded-lg bg-white/10 text-white border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
-                :placeholder="t('settings.passwordPlaceholder')"
-              />
-            </div>
-            <div>
-              <label class="block text-sm font-medium text-white/80 mb-2">{{ t('settings.confirmNewPassword') }}</label>
-              <input
-                v-model="changePasswordForm.confirmPassword"
-                type="password"
-                required
-                autocomplete="new-password"
-                class="w-full px-3 py-2 rounded-lg bg-white/10 text-white border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
-                :placeholder="t('settings.confirmNewPassword')"
-              />
-            </div>
-            <label class="flex items-center gap-2 text-sm text-white/80">
-              <input v-model="changePasswordForm.alsoChangeSsh" type="checkbox" class="rounded border-white/30" />
-              {{ t('settings.updateSshCheckbox') }}
-            </label>
-            <p v-if="changePasswordError" class="text-sm text-red-400">{{ changePasswordError }}</p>
-            <p v-if="changePasswordSuccess" class="text-sm text-green-400">{{ changePasswordSuccess }}</p>
-            <div class="flex gap-3 pt-2">
-              <button
-                type="submit"
-                :disabled="changingPassword"
-                class="flex-1 px-4 py-2 rounded-lg bg-orange-500 text-white font-medium hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-              >
-                {{ changingPassword ? t('settings.updatingPassword') : t('settings.updatePassword') }}
-              </button>
-              <button
-                type="button"
-                @click="closeChangePasswordModal"
-                class="px-4 py-2 rounded-lg bg-white/10 text-white font-medium hover:bg-white/20 transition-colors"
-              >
-                {{ t('common.cancel') }}
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </Teleport>
-
-    <!-- Two-Factor Authentication -->
-    <div class="mb-6">
-      <div class="flex items-center justify-between mb-3">
-        <div class="flex items-center gap-3">
-          <svg class="w-5 h-5 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-          </svg>
-          <div>
-            <p class="text-sm font-medium text-white/90">{{ t('settings.twoFactorAuth') }}</p>
-            <p class="text-xs text-white/50">{{ t('settings.twoFaProtect') }}</p>
-          </div>
-        </div>
-        <span
-          class="text-xs font-semibold px-2 py-1 rounded-full"
-          :class="totpEnabled ? 'status-success' : 'bg-white/10 text-white/50'"
-        >
-          {{ totpEnabled ? t('common.enabled') : t('common.disabled') }}
-        </span>
-      </div>
-      <button
-        v-if="!totpEnabled"
-        @click="showTotpSetupModal = true"
-        class="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg glass-button glass-button-warning font-medium"
-      >
-        <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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-        </svg>
-        <span>{{ t('settings.enable2fa') }}</span>
-      </button>
-      <button
-        v-else
-        @click="showTotpDisableModal = true"
-        class="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg glass-button glass-button-danger font-medium"
-      >
-        <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="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
-        </svg>
-        <span>{{ t('settings.disable2fa') }}</span>
-      </button>
-    </div>
-
-    <!-- TOTP Setup Modal -->
-    <Teleport to="body">
-      <div
-        v-if="showTotpSetupModal"
-        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md"
-        @click.self="closeTotpSetup"
-        @keydown.escape="closeTotpSetup"
-      >
-        <div class="glass-card p-6 max-w-md w-full" role="dialog" aria-modal="true" aria-labelledby="totp-setup-title">
-          <template v-if="totpSetupStep === 1">
-            <h3 id="totp-setup-title" class="text-lg font-semibold text-white mb-2">{{ t('settings.setup2faTitle') }}</h3>
-            <p class="text-white/60 text-sm mb-4">{{ t('settings.setup2faPasswordPrompt') }}</p>
-            <form @submit.prevent="beginTotpSetup" class="space-y-4">
-              <input
-                v-model="totpSetupPassword"
-                type="password"
-                required
-                autocomplete="current-password"
-                class="w-full px-3 py-2 rounded-lg bg-white/10 text-white border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
-                :placeholder="t('login.enterPasswordPlaceholder')"
-              />
-              <p v-if="totpSetupError" class="text-sm text-red-400">{{ totpSetupError }}</p>
-              <div class="flex gap-3">
-                <button
-                  type="submit"
-                  :disabled="totpSetupLoading"
-                  class="flex-1 px-4 py-2 rounded-lg bg-orange-500 text-white font-medium hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                >
-                  {{ totpSetupLoading ? t('common.loading') : t('common.continue') }}
-                </button>
-                <button type="button" @click="closeTotpSetup" class="px-4 py-2 rounded-lg bg-white/10 text-white font-medium hover:bg-white/20 transition-colors">{{ t('common.cancel') }}</button>
-              </div>
-            </form>
-          </template>
-          <template v-else-if="totpSetupStep === 2">
-            <h3 class="text-lg font-semibold text-white mb-2">{{ t('settings.scanQrCode') }}</h3>
-            <p class="text-white/60 text-sm mb-4">{{ t('settings.scanQrInstruction') }}</p>
-            <div class="flex justify-center mb-4 bg-white rounded-xl p-4 mx-auto w-fit" v-html="sanitizedQrSvg" />
-            <div v-if="totpSecretBase32" class="bg-black/30 rounded-lg px-3 py-2 mb-4">
-              <p class="text-xs text-white/50 mb-1">Manual entry key (keep secret!):</p>
-              <div v-if="showTotpSecret" class="flex items-center gap-2">
-                <p class="text-sm font-mono text-orange-400 break-all">{{ totpSecretBase32 }}</p>
-                <button type="button" class="glass-button text-xs px-2 py-1" @click="showTotpSecret = false">Hide</button>
-              </div>
-              <button v-else type="button" class="glass-button text-xs px-3 py-1" @click="showTotpSecret = true">
-                Show manual entry key
-              </button>
-            </div>
-            <form @submit.prevent="confirmTotpSetup" class="space-y-4">
-              <input
-                v-model="totpSetupCode"
-                type="text"
-                inputmode="numeric"
-                pattern="[0-9]{6}"
-                maxlength="6"
-                required
-                autocomplete="one-time-code"
-                class="w-full px-3 py-3 rounded-lg bg-white/10 text-white text-center text-2xl tracking-[0.5em] border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500 font-mono"
-                :placeholder="t('login.totpPlaceholder')"
-              />
-              <p v-if="totpSetupError" class="text-sm text-red-400">{{ totpSetupError }}</p>
-              <div class="flex gap-3">
-                <button
-                  type="submit"
-                  :disabled="totpSetupLoading || totpSetupCode.length !== 6"
-                  class="flex-1 px-4 py-2 rounded-lg bg-orange-500 text-white font-medium hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                >
-                  {{ totpSetupLoading ? t('login.verifying') : t('settings.verifyAndEnable') }}
-                </button>
-                <button type="button" @click="closeTotpSetup" class="px-4 py-2 rounded-lg bg-white/10 text-white font-medium hover:bg-white/20 transition-colors">{{ t('common.cancel') }}</button>
-              </div>
-            </form>
-          </template>
-          <template v-else-if="totpSetupStep === 3">
-            <h3 class="text-lg font-semibold text-white mb-2">{{ t('settings.saveBackupCodes') }}</h3>
-            <p class="text-white/60 text-sm mb-4">{{ t('settings.backupCodesInstruction') }}</p>
-            <div class="bg-black/30 rounded-xl p-4 mb-4">
-              <div class="grid grid-cols-2 gap-2">
-                <div
-                  v-for="(code, i) in totpBackupCodes"
-                  :key="i"
-                  class="text-sm font-mono text-white/90 bg-white/5 rounded px-3 py-2 text-center"
-                >
-                  {{ code }}
-                </div>
-              </div>
-            </div>
-            <button
-              @click="copyBackupCodes"
-              class="w-full mb-3 flex items-center justify-center gap-2 px-4 py-2 rounded-lg border border-white/20 text-white/80 font-medium hover:bg-white/5 transition-colors"
-            >
-              <svg v-if="!backupCodesCopied" 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-              </svg>
-              <span>{{ backupCodesCopied ? t('common.copiedBang') : t('settings.copyAllCodes') }}</span>
-            </button>
-            <button
-              @click="closeTotpSetup"
-              class="w-full px-4 py-2 rounded-lg bg-orange-500 text-white font-medium hover:bg-orange-600 transition-colors"
-            >
-              {{ t('common.done') }}
-            </button>
-          </template>
-        </div>
-      </div>
-    </Teleport>
-
-    <!-- TOTP Disable Modal -->
-    <Teleport to="body">
-      <div
-        v-if="showTotpDisableModal"
-        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md"
-        @click.self="closeTotpDisable"
-        @keydown.escape="closeTotpDisable"
-      >
-        <div class="glass-card p-6 max-w-md w-full" role="dialog" aria-modal="true" aria-labelledby="totp-disable-title">
-          <h3 id="totp-disable-title" class="text-lg font-semibold text-white mb-2">{{ t('settings.disable2faTitle') }}</h3>
-          <p class="text-white/60 text-sm mb-4">{{ t('settings.disable2faDesc') }}</p>
-          <form @submit.prevent="disableTotp" class="space-y-4">
-            <div>
-              <label class="block text-sm font-medium text-white/80 mb-2">{{ t('login.password') }}</label>
-              <input
-                v-model="totpDisablePassword"
-                type="password"
-                required
-                autocomplete="current-password"
-                class="w-full px-3 py-2 rounded-lg bg-white/10 text-white border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
-                :placeholder="t('login.enterPasswordPlaceholder')"
-              />
-            </div>
-            <div>
-              <label class="block text-sm font-medium text-white/80 mb-2">{{ t('settings.authenticatorCode') }}</label>
-              <input
-                v-model="totpDisableCode"
-                type="text"
-                inputmode="numeric"
-                pattern="[0-9]{6}"
-                maxlength="6"
-                required
-                autocomplete="one-time-code"
-                class="w-full px-3 py-3 rounded-lg bg-white/10 text-white text-center text-2xl tracking-[0.5em] border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500 font-mono"
-                :placeholder="t('login.totpPlaceholder')"
-              />
-            </div>
-            <p v-if="totpDisableError" class="text-sm text-red-400">{{ totpDisableError }}</p>
-            <div class="flex gap-3">
-              <button
-                type="submit"
-                :disabled="totpDisableLoading"
-                class="flex-1 px-4 py-2 rounded-lg bg-red-500 text-white font-medium hover:bg-red-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-              >
-                {{ totpDisableLoading ? t('common.disabling') : t('settings.disable2fa') }}
-              </button>
-              <button type="button" @click="closeTotpDisable" class="px-4 py-2 rounded-lg bg-white/10 text-white font-medium hover:bg-white/20 transition-colors">{{ t('common.cancel') }}</button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </Teleport>
+    <AccountInfoSection />
+    <ChangePasswordSection />
+    <TwoFactorSection />
 
     <!-- Logout Button -->
     <button

neode-ui/src/views/settings/BackupSection.vue

@@ -0,0 +1,300 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { rpcClient } from '@/api/rpc-client'
+
+const { t } = useI18n()
+
+// Backup & Restore
+interface BackupEntry {
+  id: string
+  created_at: string
+  size_bytes: number
+  encrypted: boolean
+  description: string | null
+}
+const backupList = ref<BackupEntry[]>([])
+const loadingBackups = ref(false)
+const showCreateBackupModal = ref(false)
+const backupPassphrase = ref('')
+const backupDescription = ref('')
+const creatingBackup = ref(false)
+const showRestoreModal = ref(false)
+const restoreBackupId = ref('')
+const restorePassphrase = ref('')
+const restoringBackup = ref(false)
+const verifyingBackupId = ref<string | null>(null)
+const deletingBackupId = ref<string | null>(null)
+const backupStatusMsg = ref('')
+const backupStatusType = ref<'success' | 'error'>('success')
+
+function formatBackupSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`
+}
+
+function showBackupStatus(msg: string, type: 'success' | 'error') {
+  backupStatusMsg.value = msg
+  backupStatusType.value = type
+  setTimeout(() => { backupStatusMsg.value = '' }, 5000)
+}
+
+async function loadBackups() {
+  loadingBackups.value = true
+  try {
+    const res = await rpcClient.call<{ backups: BackupEntry[] }>({ method: 'backup.list' })
+    backupList.value = res.backups || []
+  } catch {
+    backupList.value = []
+  } finally {
+    loadingBackups.value = false
+  }
+}
+
+async function createBackup() {
+  if (creatingBackup.value || !backupPassphrase.value) return
+  creatingBackup.value = true
+  try {
+    await rpcClient.call({ method: 'backup.create', params: { passphrase: backupPassphrase.value, description: backupDescription.value || undefined } })
+    showCreateBackupModal.value = false
+    backupPassphrase.value = ''
+    backupDescription.value = ''
+    showBackupStatus(t('settings.backupCreatedSuccess'), 'success')
+    await loadBackups()
+  } catch {
+    showBackupStatus(t('settings.backupCreateFailed'), 'error')
+  } finally {
+    creatingBackup.value = false
+  }
+}
+
+async function verifyBackup(id: string) {
+  const passphrase = prompt(t('settings.verifyPassphrasePrompt'))
+  if (!passphrase) return
+  verifyingBackupId.value = id
+  try {
+    const res = await rpcClient.call<{ valid: boolean; error: string | null }>({ method: 'backup.verify', params: { id, passphrase } })
+    if (res.valid) {
+      showBackupStatus(t('settings.backupVerifiedOk'), 'success')
+    } else {
+      showBackupStatus(t('settings.backupVerifyFailed', { error: res.error || 'Unknown error' }), 'error')
+    }
+  } catch {
+    showBackupStatus(t('settings.backupVerifyRequestFailed'), 'error')
+  } finally {
+    verifyingBackupId.value = null
+  }
+}
+
+function confirmRestoreBackup(id: string) {
+  restoreBackupId.value = id
+  restorePassphrase.value = ''
+  showRestoreModal.value = true
+}
+
+async function restoreBackup() {
+  if (restoringBackup.value || !restorePassphrase.value) return
+  restoringBackup.value = true
+  try {
+    await rpcClient.call({ method: 'backup.restore', params: { id: restoreBackupId.value, passphrase: restorePassphrase.value } })
+    showRestoreModal.value = false
+    showBackupStatus(t('settings.backupRestored'), 'success')
+  } catch {
+    showBackupStatus(t('settings.backupRestoreFailed'), 'error')
+  } finally {
+    restoringBackup.value = false
+  }
+}
+
+async function deleteBackup(id: string) {
+  if (!confirm(t('settings.deleteBackupConfirm'))) return
+  deletingBackupId.value = id
+  try {
+    await rpcClient.call({ method: 'backup.delete', params: { id } })
+    showBackupStatus(t('settings.backupDeleted'), 'success')
+    await loadBackups()
+  } catch {
+    showBackupStatus(t('settings.backupDeleteFailed'), 'error')
+  } finally {
+    deletingBackupId.value = null
+  }
+}
+
+// USB Drive Backup
+interface UsbDriveInfo {
+  device: string
+  mount_point: string | null
+  label: string | null
+  size_bytes: number
+  removable: boolean
+}
+const usbCopyingId = ref<string | null>(null)
+
+async function backupToUsb(backupId: string) {
+  usbCopyingId.value = backupId
+  try {
+    const drivesRes = await rpcClient.call<{ drives: UsbDriveInfo[] }>({ method: 'backup.list-drives' })
+    const drives = drivesRes.drives || []
+    const mounted = drives.filter(d => d.mount_point)
+    const target = mounted[0]
+    if (!target?.mount_point) {
+      showBackupStatus(t('settings.noUsbDrives'), 'error')
+      return
+    }
+    const label = target.label || target.device
+    if (!confirm(`Copy backup to USB drive "${label}" at ${target.mount_point}?`)) return
+    await rpcClient.call({ method: 'backup.to-usb', params: { id: backupId, mount_point: target.mount_point } })
+    showBackupStatus(t('settings.backupCopiedToUsb', { path: target.mount_point }), 'success')
+  } catch {
+    showBackupStatus(t('settings.backupUsbFailed'), 'error')
+  } finally {
+    usbCopyingId.value = null
+  }
+}
+
+// Lightning channel backup
+const exportingChannelBackup = ref(false)
+const channelBackupData = ref('')
+const channelBackupChannels = ref(0)
+const channelBackupTime = ref('')
+const channelBackupError = ref('')
+const channelBackupCopied = ref(false)
+
+async function exportChannelBackup() {
+  exportingChannelBackup.value = true
+  channelBackupError.value = ''
+  try {
+    const res = await rpcClient.call<{ backup: string; channel_count: number; timestamp: string }>({
+      method: 'lnd.export-channel-backup',
+      timeout: 15000,
+    })
+    channelBackupData.value = res.backup
+    channelBackupChannels.value = res.channel_count
+    channelBackupTime.value = new Date(res.timestamp).toLocaleString()
+  } catch (err: unknown) {
+    channelBackupError.value = err instanceof Error ? err.message : 'Failed to export'
+  } finally {
+    exportingChannelBackup.value = false
+  }
+}
+
+function copyChannelBackup() {
+  if (channelBackupData.value) {
+    navigator.clipboard.writeText(channelBackupData.value).catch(() => {})
+    channelBackupCopied.value = true
+    setTimeout(() => { channelBackupCopied.value = false }, 2000)
+  }
+}
+
+loadBackups()
+</script>
+
+<template>
+  <!-- Backup & Restore Section -->
+  <div class="glass-card px-6 py-6 mb-6">
+    <div class="mb-4">
+      <h2 class="text-xl font-semibold text-white/96 mb-1">{{ t('settings.backup') }}</h2>
+      <p class="text-sm text-white/60 mb-3">{{ t('settings.backupRestoreDesc') }}</p>
+      <button @click="showCreateBackupModal = true" class="w-full min-h-[44px] glass-button rounded-lg text-sm font-medium flex items-center justify-center gap-2">
+        <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="M12 4v16m8-8H4" />
+        </svg>
+        {{ t('settings.createBackup') }}
+      </button>
+    </div>
+    <div v-if="loadingBackups" class="text-sm text-white/40 py-4 text-center">{{ t('settings.loadingBackups') }}</div>
+    <div v-else-if="backupList.length === 0" class="text-sm text-white/40 py-4 text-center">{{ t('settings.noBackups') }}</div>
+    <div v-else class="space-y-2">
+      <div v-for="b in backupList" :key="b.id" class="flex flex-col sm:flex-row sm:items-center sm:justify-between p-3 bg-white/5 rounded-lg gap-2">
+        <div class="min-w-0">
+          <div class="text-sm text-white font-medium">{{ b.description || t('settings.systemBackup') }}</div>
+          <div class="text-xs text-white/50">{{ new Date(b.created_at).toLocaleString() }} &middot; {{ formatBackupSize(b.size_bytes) }}</div>
+        </div>
+        <div class="flex items-center gap-2 shrink-0 flex-wrap">
+          <button @click="verifyBackup(b.id)" :disabled="verifyingBackupId === b.id" class="glass-button glass-button-sm px-3 py-1.5 rounded text-xs disabled:opacity-50" :title="t('common.verify')">
+            {{ verifyingBackupId === b.id ? '...' : t('common.verify') }}
+          </button>
+          <button @click="backupToUsb(b.id)" :disabled="usbCopyingId === b.id" class="glass-button glass-button-sm px-3 py-1.5 rounded text-xs text-blue-400 disabled:opacity-50" :title="t('settings.copyToUsb')">
+            {{ usbCopyingId === b.id ? '...' : 'USB' }}
+          </button>
+          <button @click="confirmRestoreBackup(b.id)" class="glass-button glass-button-sm px-3 py-1.5 rounded text-xs text-orange-400" :title="t('common.restore')">
+            {{ t('common.restore') }}
+          </button>
+          <button @click="deleteBackup(b.id)" :disabled="deletingBackupId === b.id" :aria-label="t('settings.deleteBackup')" class="glass-button glass-button-sm px-3 py-1.5 rounded text-xs text-red-400 disabled:opacity-50" :title="t('common.delete')">
+            &times;
+          </button>
+        </div>
+      </div>
+    </div>
+    <div v-if="backupStatusMsg" role="status" aria-live="polite" class="mt-3 text-xs px-3 py-2 rounded-lg" :class="backupStatusType === 'error' ? 'alert-error' : 'alert-success'">
+      {{ backupStatusMsg }}
+    </div>
+  </div>
+
+  <!-- Create Backup Modal -->
+  <Teleport to="body">
+    <div v-if="showCreateBackupModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md" @click.self="showCreateBackupModal = false">
+      <div class="glass-card p-6 w-full max-w-md" role="dialog" aria-modal="true" aria-labelledby="create-backup-title">
+        <h3 id="create-backup-title" class="text-lg font-semibold text-white mb-4">{{ t('settings.createEncryptedBackup') }}</h3>
+        <div class="space-y-3">
+          <div>
+            <label class="text-xs text-white/50 block mb-1">{{ t('settings.encryptionPassphrase') }}</label>
+            <input v-model="backupPassphrase" type="password" :placeholder="t('settings.enterPassphrase')" class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-blue-500/50" />
+          </div>
+          <div>
+            <label class="text-xs text-white/50 block mb-1">{{ t('settings.descriptionOptional') }}</label>
+            <input v-model="backupDescription" type="text" :placeholder="t('settings.descriptionPlaceholder')" class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-blue-500/50" />
+          </div>
+        </div>
+        <div class="flex gap-3 mt-5">
+          <button @click="showCreateBackupModal = false" class="glass-button px-4 py-2 rounded-lg text-sm flex-1">{{ t('common.cancel') }}</button>
+          <button @click="createBackup" :disabled="creatingBackup || !backupPassphrase" class="glass-button glass-button-warning px-4 py-2 rounded-lg text-sm flex-1 disabled:opacity-50">
+            {{ creatingBackup ? t('settings.creatingBackup') : t('settings.createBackup') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+
+  <!-- Restore Backup Modal -->
+  <Teleport to="body">
+    <div v-if="showRestoreModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md" @click.self="showRestoreModal = false">
+      <div class="glass-card p-6 w-full max-w-md" role="dialog" aria-modal="true" aria-labelledby="restore-backup-title">
+        <h3 id="restore-backup-title" class="text-lg font-semibold text-white mb-2">{{ t('settings.restoreBackupTitle') }}</h3>
+        <p class="text-sm text-red-400/80 mb-4">{{ t('settings.restoreWarning') }}</p>
+        <div>
+          <label class="text-xs text-white/50 block mb-1">{{ t('settings.encryptionPassphrase') }}</label>
+          <input v-model="restorePassphrase" type="password" :placeholder="t('settings.enterBackupPassphrase')" class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-blue-500/50" />
+        </div>
+        <div class="flex gap-3 mt-5">
+          <button @click="showRestoreModal = false" class="glass-button px-4 py-2 rounded-lg text-sm flex-1">{{ t('common.cancel') }}</button>
+          <button @click="restoreBackup" :disabled="restoringBackup || !restorePassphrase" class="glass-button glass-button-danger px-4 py-2 rounded-lg text-sm flex-1 disabled:opacity-50">
+            {{ restoringBackup ? t('common.restoring') : t('common.restore') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+
+  <!-- Lightning Channel Backup -->
+  <div class="glass-card px-6 py-6 mb-6">
+    <h2 class="text-xl font-semibold text-white/96 mb-1">Lightning Channel Backup</h2>
+    <p class="text-sm text-white/60 mb-3">Export your channel state so you can restore channels on a new node. Does not include on-chain wallet seed.</p>
+    <div class="flex gap-3">
+      <button @click="exportChannelBackup" :disabled="exportingChannelBackup" class="glass-button px-4 py-2 rounded-lg text-sm flex items-center gap-2">
+        <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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+        </svg>
+        {{ exportingChannelBackup ? 'Exporting...' : 'Export Channel Backup' }}
+      </button>
+    </div>
+    <div v-if="channelBackupData" class="mt-3 bg-black/30 rounded-lg p-3">
+      <p class="text-xs text-white/40 mb-1">{{ channelBackupChannels }} channel{{ channelBackupChannels !== 1 ? 's' : '' }} backed up at {{ channelBackupTime }}</p>
+      <textarea readonly :value="channelBackupData" rows="3" class="w-full bg-black/20 text-xs font-mono text-white/60 rounded p-2 resize-none border border-white/10"></textarea>
+      <button @click="copyChannelBackup" class="mt-2 glass-button px-3 py-1.5 rounded text-xs">{{ channelBackupCopied ? 'Copied!' : 'Copy Backup Data' }}</button>
+    </div>
+    <p v-if="channelBackupError" class="mt-2 text-xs text-red-400">{{ channelBackupError }}</p>
+  </div>
+</template>

neode-ui/src/views/settings/ChangePasswordSection.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { rpcClient } from '@/api/rpc-client'
+import { useModalKeyboard } from '@/composables/useModalKeyboard'
+
+const { t } = useI18n()
+
+const showChangePasswordModal = ref(false)
+const changePasswordModalRef = ref<HTMLElement | null>(null)
+const changePasswordRestoreFocusRef = ref<HTMLElement | null>(null)
+useModalKeyboard(changePasswordModalRef, showChangePasswordModal, closeChangePasswordModal, { restoreFocusRef: changePasswordRestoreFocusRef })
+const changingPassword = ref(false)
+const changePasswordError = ref('')
+const changePasswordSuccess = ref('')
+const changePasswordForm = ref({
+  currentPassword: '',
+  newPassword: '',
+  confirmPassword: '',
+  alsoChangeSsh: true,
+})
+
+function validatePasswordStrength(pw: string): string | null {
+  if (pw.length < 12) return t('settings.passwordMinLength')
+  if (!/[A-Z]/.test(pw)) return t('settings.passwordNeedUppercase')
+  if (!/[a-z]/.test(pw)) return t('settings.passwordNeedLowercase')
+  if (!/\d/.test(pw)) return t('settings.passwordNeedDigit')
+  if (!/[^A-Za-z0-9]/.test(pw)) return t('settings.passwordNeedSpecial')
+  return null
+}
+
+async function handleChangePassword() {
+  changePasswordError.value = ''
+  changePasswordSuccess.value = ''
+  const { currentPassword, newPassword, confirmPassword, alsoChangeSsh } = changePasswordForm.value
+  if (!currentPassword || !newPassword || !confirmPassword) {
+    changePasswordError.value = t('settings.passwordAllFieldsRequired')
+    return
+  }
+  if (newPassword !== confirmPassword) {
+    changePasswordError.value = t('settings.passwordMismatch')
+    return
+  }
+  const strengthError = validatePasswordStrength(newPassword)
+  if (strengthError) {
+    changePasswordError.value = strengthError
+    return
+  }
+  changingPassword.value = true
+  try {
+    await rpcClient.changePassword({
+      currentPassword,
+      newPassword,
+      alsoChangeSsh,
+    })
+    changePasswordSuccess.value = t('settings.passwordUpdatedSuccess')
+    changePasswordForm.value = { currentPassword: '', newPassword: '', confirmPassword: '', alsoChangeSsh: true }
+    setTimeout(() => {
+      closeChangePasswordModal()
+    }, 2000)
+  } catch (e) {
+    changePasswordError.value = e instanceof Error ? e.message : t('settings.passwordChangeFailed')
+  } finally {
+    changingPassword.value = false
+  }
+}
+
+function closeChangePasswordModal() {
+  changePasswordRestoreFocusRef.value?.focus?.()
+  showChangePasswordModal.value = false
+  changePasswordError.value = ''
+  changePasswordSuccess.value = ''
+  changePasswordForm.value = { currentPassword: '', newPassword: '', confirmPassword: '', alsoChangeSsh: true }
+}
+</script>
+
+<template>
+  <!-- Change Password -->
+  <div data-controller-container tabindex="0" class="mb-6">
+    <button
+      ref="changePasswordRestoreFocusRef"
+      @click="showChangePasswordModal = true"
+      class="w-full flex items-center justify-center gap-2 mb-4 px-4 py-2 rounded-lg glass-button glass-button-warning font-medium"
+    >
+      <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="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+      </svg>
+      <span>{{ t('settings.changePassword') }}</span>
+    </button>
+  </div>
+
+  <!-- Change Password Modal -->
+  <Teleport to="body">
+    <div
+      v-if="showChangePasswordModal"
+      class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md"
+      @click.self="closeChangePasswordModal()"
+    >
+      <div ref="changePasswordModalRef" class="glass-card p-6 max-w-md w-full">
+        <h3 class="text-lg font-semibold text-white mb-4">{{ t('settings.changePasswordTitle') }}</h3>
+        <p class="text-white/70 text-sm mb-4">{{ t('settings.changePasswordDesc') }}</p>
+        <form @submit.prevent="handleChangePassword" class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-white/80 mb-2">{{ t('settings.currentPassword') }}</label>
+            <input
+              v-model="changePasswordForm.currentPassword"
+              type="password"
+              required
+              autocomplete="current-password"
+              class="w-full px-3 py-2 rounded-lg bg-white/10 text-white border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
+              :placeholder="t('login.enterPasswordPlaceholder')"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-white/80 mb-2">{{ t('settings.newPassword') }}</label>
+            <input
+              v-model="changePasswordForm.newPassword"
+              type="password"
+              required
+              autocomplete="new-password"
+              class="w-full px-3 py-2 rounded-lg bg-white/10 text-white border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
+              :placeholder="t('settings.passwordPlaceholder')"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-white/80 mb-2">{{ t('settings.confirmNewPassword') }}</label>
+            <input
+              v-model="changePasswordForm.confirmPassword"
+              type="password"
+              required
+              autocomplete="new-password"
+              class="w-full px-3 py-2 rounded-lg bg-white/10 text-white border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
+              :placeholder="t('settings.confirmNewPassword')"
+            />
+          </div>
+          <label class="flex items-center gap-2 text-sm text-white/80">
+            <input v-model="changePasswordForm.alsoChangeSsh" type="checkbox" class="rounded border-white/30" />
+            {{ t('settings.updateSshCheckbox') }}
+          </label>
+          <p v-if="changePasswordError" class="text-sm text-red-400">{{ changePasswordError }}</p>
+          <p v-if="changePasswordSuccess" class="text-sm text-green-400">{{ changePasswordSuccess }}</p>
+          <div class="flex gap-3 pt-2">
+            <button
+              type="submit"
+              :disabled="changingPassword"
+              class="flex-1 px-4 py-2 rounded-lg bg-orange-500 text-white font-medium hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              {{ changingPassword ? t('settings.updatingPassword') : t('settings.updatePassword') }}
+            </button>
+            <button
+              type="button"
+              @click="closeChangePasswordModal"
+              class="px-4 py-2 rounded-lg bg-white/10 text-white font-medium hover:bg-white/20 transition-colors"
+            >
+              {{ t('common.cancel') }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </Teleport>
+</template>

neode-ui/src/views/settings/ClaudeAuthSection.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const claudeConnected = ref(false)
+const showClaudeLoginModal = ref(false)
+
+function checkClaudeStatus() {
+  fetch('/aiui/api/claude/v1/messages', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ model: 'haiku', messages: [{ role: 'user', content: 'ping' }] }) })
+    .then(r => {
+      if (!r.ok) { claudeConnected.value = false; return }
+      const reader = r.body?.getReader()
+      if (!reader) return
+      const decoder = new TextDecoder()
+      let text = ''
+      function read(): Promise<void> {
+        return reader!.read().then(({ done, value }) => {
+          if (done) {
+            claudeConnected.value = !text.includes('Not logged in') && !text.includes('error')
+            return
+          }
+          text += decoder.decode(value, { stream: true })
+          return read()
+        })
+      }
+      read()
+    })
+    .catch(() => { claudeConnected.value = false })
+}
+
+function onClaudeIframeLoad() {
+  window.addEventListener('message', handleClaudeLoginMessage)
+}
+
+function handleClaudeLoginMessage(e: MessageEvent) {
+  if (e.data?.type === 'claude-auth-success') {
+    claudeConnected.value = true
+    showClaudeLoginModal.value = false
+    window.removeEventListener('message', handleClaudeLoginMessage)
+  }
+}
+
+checkClaudeStatus()
+</script>
+
+<template>
+  <!-- Claude Authentication Section -->
+  <div class="glass-card px-6 py-6 mb-6">
+    <h2 class="text-xl font-semibold text-white/96 mb-2">{{ t('settings.claudeAuth') }}</h2>
+    <p class="text-sm text-white/60 mb-6">{{ t('settings.claudeAuthDesc') }}</p>
+    <div class="bg-black/20 rounded-xl px-5 py-4 border border-white/10 mb-4">
+      <div class="flex items-center gap-3 mb-2">
+        <svg class="w-5 h-5 shrink-0" :class="claudeConnected ? 'text-green-400' : 'text-white/40'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path v-if="claudeConnected" 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" />
+          <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 11-12.728 0M12 9v4m0 4h.01" />
+        </svg>
+        <p class="text-xs font-semibold text-white/60 uppercase tracking-wide">{{ t('settings.connectionStatus') }}</p>
+      </div>
+      <p class="text-base font-medium" :class="claudeConnected ? 'text-green-400' : 'text-white/50'">
+        {{ claudeConnected ? t('common.connected') : t('settings.notConnected') }}
+      </p>
+    </div>
+    <button
+      @click="showClaudeLoginModal = true"
+      class="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg border transition-colors"
+      :class="claudeConnected
+        ? 'border-white/20 text-white/70 hover:bg-white/5'
+        : 'glass-button-warning font-medium'"
+    >
+      <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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
+      </svg>
+      <span>{{ claudeConnected ? t('settings.reAuthenticate') : t('settings.loginWithClaude') }}</span>
+    </button>
+  </div>
+
+  <!-- Claude Login Modal -->
+  <Teleport to="body">
+    <div
+      v-if="showClaudeLoginModal"
+      class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md"
+      @click.self="showClaudeLoginModal = false"
+    >
+      <div class="glass-card p-0 max-w-lg w-full overflow-hidden" style="height: 480px">
+        <div class="flex items-center justify-between px-4 py-3 border-b border-white/10">
+          <h3 class="text-sm font-semibold text-white/80">{{ t('settings.claudeAuth') }}</h3>
+          <button @click="showClaudeLoginModal = false" class="text-white/50 hover:text-white/80 transition-colors">
+            <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>
+        </div>
+        <iframe
+          src="/claude-login"
+          class="w-full border-0"
+          style="height: calc(100% - 49px)"
+          @load="onClaudeIframeLoad"
+        />
+      </div>
+    </div>
+  </Teleport>
+</template>

neode-ui/src/views/settings/InterfaceModeSection.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { SUPPORTED_LOCALES, setLocale, type SupportedLocale } from '@/i18n'
+import { useUIModeStore } from '@/stores/uiMode'
+import type { UIMode } from '@/types/api'
+
+const { t, locale } = useI18n()
+const uiMode = useUIModeStore()
+
+const interfaceModes = computed<{ id: UIMode; label: string; description: string; iconPaths: string[] }[]>(() => [
+  {
+    id: 'easy',
+    label: t('settings.modeEasy'),
+    description: t('settings.modeEasyDesc'),
+    iconPaths: ['M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'],
+  },
+  {
+    id: 'gamer',
+    label: t('settings.modePro'),
+    description: t('settings.modeProDesc'),
+    iconPaths: ['M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z', 'M15 12a3 3 0 11-6 0 3 3 0 016 0z'],
+  },
+  {
+    id: 'chat',
+    label: t('settings.modeChat'),
+    description: t('settings.modeChatDesc'),
+    iconPaths: ['M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'],
+  },
+])
+
+const supportedLocales = SUPPORTED_LOCALES
+const currentLocale = computed(() => locale.value)
+
+async function changeLocale(code: string) {
+  await setLocale(code as SupportedLocale)
+}
+</script>
+
+<template>
+  <!-- Interface Mode Section -->
+  <div class="glass-card px-6 py-6 mb-6">
+    <h2 class="text-xl font-semibold text-white/96 mb-2">{{ t('settings.interfaceMode') }}</h2>
+    <p class="text-sm text-white/60 mb-6">{{ t('settings.interfaceModeDesc') }}</p>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <button
+        v-for="m in interfaceModes"
+        :key="m.id"
+        @click="uiMode.setMode(m.id)"
+        class="path-option-card text-left p-5"
+        :class="{ 'path-option-card--selected': uiMode.mode === m.id }"
+      >
+        <div class="flex items-center gap-3 mb-3">
+          <svg class="w-6 h-6 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+              v-for="(path, index) in m.iconPaths"
+              :key="index"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              :d="path"
+            />
+          </svg>
+          <h3 class="text-lg font-semibold text-white/96">{{ m.label }}</h3>
+        </div>
+        <p class="text-sm text-white/60 leading-relaxed">{{ m.description }}</p>
+      </button>
+    </div>
+  </div>
+
+  <!-- Language Section -->
+  <div class="glass-card px-6 py-6 mb-6">
+    <h2 class="text-xl font-semibold text-white/96 mb-2">Language</h2>
+    <p class="text-sm text-white/60 mb-4">Choose your preferred language</p>
+    <div class="flex gap-3 flex-wrap">
+      <button
+        v-for="loc in supportedLocales"
+        :key="loc.code"
+        @click="changeLocale(loc.code)"
+        class="glass-button px-4 py-2 rounded-lg text-sm font-medium transition-all"
+        :class="currentLocale === loc.code ? 'ring-2 ring-orange-400/60 bg-white/10' : ''"
+      >
+        <span class="mr-2">{{ loc.flag }}</span>{{ loc.name }}
+      </button>
+    </div>
+  </div>
+</template>

neode-ui/src/views/settings/SystemDangerZone.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { rpcClient } from '@/api/rpc-client'
+
+const router = useRouter()
+const { t } = useI18n()
+
+// Reboot
+const showRebootConfirm = ref(false)
+const rebooting = ref(false)
+const rebootPassword = ref('')
+const rebootError = ref('')
+
+async function performReboot() {
+  if (!rebootPassword.value) return
+  rebooting.value = true
+  rebootError.value = ''
+  try {
+    await rpcClient.call({ method: 'system.reboot', params: { password: rebootPassword.value } })
+    showRebootConfirm.value = false
+    rebootPassword.value = ''
+  } catch (e) {
+    rebootError.value = e instanceof Error ? e.message : 'Reboot failed'
+    rebooting.value = false
+  }
+}
+
+// Factory Reset
+const showFactoryResetConfirm = ref(false)
+const factoryResetLoading = ref(false)
+
+async function performFactoryReset() {
+  factoryResetLoading.value = true
+  try {
+    await rpcClient.call({ method: 'system.factory-reset', params: { confirm: true } })
+    localStorage.clear()
+    showFactoryResetConfirm.value = false
+    router.push('/onboarding/intro')
+  } catch {
+    localStorage.clear()
+    showFactoryResetConfirm.value = false
+    router.push('/onboarding/intro')
+  }
+}
+</script>
+
+<template>
+  <!-- Network Diagnostics Link -->
+  <div class="glass-card px-6 py-6 mb-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <h2 class="text-xl font-semibold text-white/96">{{ t('common.network') }}</h2>
+        <p class="text-sm text-white/60 mt-1">{{ t('settings.networkDesc') }}</p>
+      </div>
+      <button @click="router.push('/dashboard/server')" class="glass-button px-4 py-2 rounded-lg text-sm flex items-center gap-2">
+        <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="M13 7l5 5m0 0l-5 5m5-5H6" />
+        </svg>
+        {{ t('common.networkDiagnostics') }}
+      </button>
+    </div>
+  </div>
+
+  <!-- Reboot Section -->
+  <div class="path-option-card px-6 py-6 mt-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <h2 class="text-xl font-semibold text-white/90 mb-1">Reboot</h2>
+        <p class="text-sm text-white/60">Restart the machine. All containers will restart automatically.</p>
+      </div>
+      <button
+        class="glass-button px-6 py-2 text-sm"
+        :disabled="rebooting"
+        @click="showRebootConfirm = true"
+      >
+        {{ rebooting ? 'Rebooting...' : 'Reboot' }}
+      </button>
+    </div>
+  </div>
+
+  <!-- Reboot Confirmation Modal -->
+  <Teleport to="body">
+    <div v-if="showRebootConfirm" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showRebootConfirm = false">
+      <div class="glass-card px-8 py-8 max-w-md mx-4">
+        <h3 class="text-lg font-semibold text-white/90 mb-3">Reboot Node</h3>
+        <p class="text-sm text-white/60 mb-4">Enter your password to confirm reboot. The node will be temporarily unavailable.</p>
+        <input
+          v-model="rebootPassword"
+          type="password"
+          class="w-full px-3 py-2 rounded-lg bg-white/10 text-white border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500 mb-4"
+          placeholder="Password"
+          @keydown.enter="performReboot"
+        />
+        <p v-if="rebootError" class="text-sm text-red-400 mb-3">{{ rebootError }}</p>
+        <div class="flex gap-3 justify-end">
+          <button class="glass-button" @click="showRebootConfirm = false">Cancel</button>
+          <button
+            class="glass-button px-6"
+            :disabled="rebooting || !rebootPassword"
+            @click="performReboot"
+          >
+            {{ rebooting ? 'Rebooting...' : 'Confirm Reboot' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+
+  <!-- Factory Reset Section -->
+  <div class="path-option-card px-6 py-6 mt-6 border-red-500/30">
+    <h2 class="text-xl font-semibold text-red-400/90 mb-3">Factory Reset</h2>
+    <p class="text-sm text-white/60 mb-4">
+      Wipe all user data, identities, and credentials. Container images are preserved. The node will restart and show the onboarding screen.
+    </p>
+    <button
+      class="glass-button glass-button-danger"
+      @click="showFactoryResetConfirm = true"
+    >
+      Factory Reset
+    </button>
+  </div>
+
+  <!-- Factory Reset Confirmation Modal -->
+  <Teleport to="body">
+    <div v-if="showFactoryResetConfirm" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+      <div class="glass-card px-8 py-8 max-w-md mx-4">
+        <h3 class="text-lg font-semibold text-white/90 mb-3">Are you sure?</h3>
+        <p class="text-sm text-white/60 mb-6">
+          This will delete all identities, credentials, and settings. This cannot be undone.
+        </p>
+        <div class="flex gap-3 justify-end">
+          <button class="glass-button" @click="showFactoryResetConfirm = false">Cancel</button>
+          <button
+            class="glass-button glass-button-danger"
+            :disabled="factoryResetLoading"
+            @click="performFactoryReset"
+          >
+            {{ factoryResetLoading ? 'Resetting...' : 'Yes, Reset' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>

neode-ui/src/views/settings/SystemSection.vue

@@ -1,913 +1,21 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { SUPPORTED_LOCALES, setLocale, type SupportedLocale } from '@/i18n'
-import { useUIModeStore } from '@/stores/uiMode'
-import { useAIPermissionsStore, AI_PERMISSION_CATEGORIES } from '@/stores/aiPermissions'
-import ToggleSwitch from '@/components/ToggleSwitch.vue'
-import { rpcClient } from '@/api/rpc-client'
-import type { UIMode } from '@/types/api'
-
-const router = useRouter()
-const { t, locale } = useI18n()
-const uiMode = useUIModeStore()
-const aiPermissions = useAIPermissionsStore()
-
-// Interface modes
-const interfaceModes = computed<{ id: UIMode; label: string; description: string; iconPaths: string[] }[]>(() => [
-  {
-    id: 'easy',
-    label: t('settings.modeEasy'),
-    description: t('settings.modeEasyDesc'),
-    iconPaths: ['M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'],
-  },
-  {
-    id: 'gamer',
-    label: t('settings.modePro'),
-    description: t('settings.modeProDesc'),
-    iconPaths: ['M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z', 'M15 12a3 3 0 11-6 0 3 3 0 016 0z'],
-  },
-  {
-    id: 'chat',
-    label: t('settings.modeChat'),
-    description: t('settings.modeChatDesc'),
-    iconPaths: ['M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'],
-  },
-])
-
-// Language
-const supportedLocales = SUPPORTED_LOCALES
-const currentLocale = computed(() => locale.value)
-async function changeLocale(code: string) {
-  await setLocale(code as SupportedLocale)
-}
-
-// AI Data Access
-const aiCategoryGroups = computed(() => {
-  const groups: { label: string; items: typeof AI_PERMISSION_CATEGORIES }[] = []
-  for (const cat of AI_PERMISSION_CATEGORIES) {
-    const existing = groups.find(g => g.label === cat.group)
-    if (existing) {
-      existing.items.push(cat)
-    } else {
-      groups.push({ label: cat.group, items: [cat] })
-    }
-  }
-  return groups
-})
-
-// Claude Auth
-const claudeConnected = ref(false)
-const showClaudeLoginModal = ref(false)
-
-function checkClaudeStatus() {
-  fetch('/aiui/api/claude/v1/messages', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ model: 'haiku', messages: [{ role: 'user', content: 'ping' }] }) })
-    .then(r => {
-      if (!r.ok) { claudeConnected.value = false; return }
-      const reader = r.body?.getReader()
-      if (!reader) return
-      const decoder = new TextDecoder()
-      let text = ''
-      function read(): Promise<void> {
-        return reader!.read().then(({ done, value }) => {
-          if (done) {
-            claudeConnected.value = !text.includes('Not logged in') && !text.includes('error')
-            return
-          }
-          text += decoder.decode(value, { stream: true })
-          return read()
-        })
-      }
-      read()
-    })
-    .catch(() => { claudeConnected.value = false })
-}
-
-function onClaudeIframeLoad() {
-  window.addEventListener('message', handleClaudeLoginMessage)
-}
-
-function handleClaudeLoginMessage(e: MessageEvent) {
-  if (e.data?.type === 'claude-auth-success') {
-    claudeConnected.value = true
-    showClaudeLoginModal.value = false
-    window.removeEventListener('message', handleClaudeLoginMessage)
-  }
-}
-
-// Telemetry
-const telemetryEnabled = ref(false)
-const telemetryLoading = ref(false)
-async function loadTelemetryStatus() {
-  try {
-    const res = await rpcClient.call<{ enabled: boolean }>({ method: 'analytics.get-status' })
-    telemetryEnabled.value = res.enabled
-  } catch { /* ignore */ }
-}
-async function toggleTelemetry() {
-  telemetryLoading.value = true
-  try {
-    const method = telemetryEnabled.value ? 'analytics.disable' : 'analytics.enable'
-    await rpcClient.call({ method })
-    telemetryEnabled.value = !telemetryEnabled.value
-  } catch { /* ignore */ }
-  telemetryLoading.value = false
-}
-
-// Webhook Notifications
-interface WebhookConfigData {
-  enabled: boolean
-  url: string
-  secret: string
-  events: string[]
-}
-const webhookConfig = ref<WebhookConfigData>({
-  enabled: false,
-  url: '',
-  secret: '',
-  events: [],
-})
-const savingWebhook = ref(false)
-const testingWebhook = ref(false)
-const webhookStatusMsg = ref('')
-const webhookStatusType = ref<'success' | 'error'>('success')
-
-const webhookEventTypes = computed(() => [
-  { id: 'container_crash', label: t('settings.containerCrash'), description: t('settings.containerCrashDesc') },
-  { id: 'update_available', label: t('settings.updateAvailableEvent'), description: t('settings.updateAvailableDesc') },
-  { id: 'disk_warning', label: t('settings.diskSpaceWarning'), description: t('settings.diskWarningDesc') },
-  { id: 'backup_complete', label: t('settings.backupComplete'), description: t('settings.backupCompleteDesc') },
-])
-
-function showWebhookStatus(msg: string, type: 'success' | 'error') {
-  webhookStatusMsg.value = msg
-  webhookStatusType.value = type
-  setTimeout(() => { webhookStatusMsg.value = '' }, 5000)
-}
-
-function toggleWebhookEvent(id: string) {
-  const idx = webhookConfig.value.events.indexOf(id)
-  if (idx >= 0) {
-    webhookConfig.value.events.splice(idx, 1)
-  } else {
-    webhookConfig.value.events.push(id)
-  }
-}
-
-function toggleWebhookEnabled() {
-  webhookConfig.value.enabled = !webhookConfig.value.enabled
-}
-
-async function loadWebhookConfig() {
-  try {
-    const res = await rpcClient.call<{ enabled: boolean; url: string; events: string[]; has_secret: boolean }>({ method: 'webhook.get-config' })
-    webhookConfig.value.enabled = res.enabled
-    webhookConfig.value.url = res.url
-    webhookConfig.value.events = res.events || []
-  } catch {
-    // Webhook system may not be available
-  }
-}
-
-async function saveWebhookConfig() {
-  savingWebhook.value = true
-  try {
-    await rpcClient.call({
-      method: 'webhook.configure',
-      params: {
-        enabled: webhookConfig.value.enabled,
-        url: webhookConfig.value.url,
-        secret: webhookConfig.value.secret || null,
-        events: webhookConfig.value.events,
-      },
-    })
-    showWebhookStatus(t('settings.webhookSaved'), 'success')
-  } catch {
-    showWebhookStatus(t('settings.webhookSaveFailed'), 'error')
-  } finally {
-    savingWebhook.value = false
-  }
-}
-
-async function testWebhook() {
-  testingWebhook.value = true
-  try {
-    const res = await rpcClient.call<{ sent: boolean; url: string }>({ method: 'webhook.test' })
-    if (res.sent) {
-      showWebhookStatus(t('settings.webhookTestSent'), 'success')
-    } else {
-      showWebhookStatus(t('settings.webhookTestFailed'), 'error')
-    }
-  } catch {
-    showWebhookStatus(t('settings.webhookSendFailed'), 'error')
-  } finally {
-    testingWebhook.value = false
-  }
-}
-
-// Backup & Restore
-interface BackupEntry {
-  id: string
-  created_at: string
-  size_bytes: number
-  encrypted: boolean
-  description: string | null
-}
-const backupList = ref<BackupEntry[]>([])
-const loadingBackups = ref(false)
-const showCreateBackupModal = ref(false)
-const backupPassphrase = ref('')
-const backupDescription = ref('')
-const creatingBackup = ref(false)
-const showRestoreModal = ref(false)
-const restoreBackupId = ref('')
-const restorePassphrase = ref('')
-const restoringBackup = ref(false)
-const verifyingBackupId = ref<string | null>(null)
-const deletingBackupId = ref<string | null>(null)
-const backupStatusMsg = ref('')
-const backupStatusType = ref<'success' | 'error'>('success')
-
-function formatBackupSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`
-}
-
-function showBackupStatus(msg: string, type: 'success' | 'error') {
-  backupStatusMsg.value = msg
-  backupStatusType.value = type
-  setTimeout(() => { backupStatusMsg.value = '' }, 5000)
-}
-
-async function loadBackups() {
-  loadingBackups.value = true
-  try {
-    const res = await rpcClient.call<{ backups: BackupEntry[] }>({ method: 'backup.list' })
-    backupList.value = res.backups || []
-  } catch {
-    backupList.value = []
-  } finally {
-    loadingBackups.value = false
-  }
-}
-
-async function createBackup() {
-  if (creatingBackup.value || !backupPassphrase.value) return
-  creatingBackup.value = true
-  try {
-    await rpcClient.call({ method: 'backup.create', params: { passphrase: backupPassphrase.value, description: backupDescription.value || undefined } })
-    showCreateBackupModal.value = false
-    backupPassphrase.value = ''
-    backupDescription.value = ''
-    showBackupStatus(t('settings.backupCreatedSuccess'), 'success')
-    await loadBackups()
-  } catch {
-    showBackupStatus(t('settings.backupCreateFailed'), 'error')
-  } finally {
-    creatingBackup.value = false
-  }
-}
-
-async function verifyBackup(id: string) {
-  const passphrase = prompt(t('settings.verifyPassphrasePrompt'))
-  if (!passphrase) return
-  verifyingBackupId.value = id
-  try {
-    const res = await rpcClient.call<{ valid: boolean; error: string | null }>({ method: 'backup.verify', params: { id, passphrase } })
-    if (res.valid) {
-      showBackupStatus(t('settings.backupVerifiedOk'), 'success')
-    } else {
-      showBackupStatus(t('settings.backupVerifyFailed', { error: res.error || 'Unknown error' }), 'error')
-    }
-  } catch {
-    showBackupStatus(t('settings.backupVerifyRequestFailed'), 'error')
-  } finally {
-    verifyingBackupId.value = null
-  }
-}
-
-function confirmRestoreBackup(id: string) {
-  restoreBackupId.value = id
-  restorePassphrase.value = ''
-  showRestoreModal.value = true
-}
-
-async function restoreBackup() {
-  if (restoringBackup.value || !restorePassphrase.value) return
-  restoringBackup.value = true
-  try {
-    await rpcClient.call({ method: 'backup.restore', params: { id: restoreBackupId.value, passphrase: restorePassphrase.value } })
-    showRestoreModal.value = false
-    showBackupStatus(t('settings.backupRestored'), 'success')
-  } catch {
-    showBackupStatus(t('settings.backupRestoreFailed'), 'error')
-  } finally {
-    restoringBackup.value = false
-  }
-}
-
-async function deleteBackup(id: string) {
-  if (!confirm(t('settings.deleteBackupConfirm'))) return
-  deletingBackupId.value = id
-  try {
-    await rpcClient.call({ method: 'backup.delete', params: { id } })
-    showBackupStatus(t('settings.backupDeleted'), 'success')
-    await loadBackups()
-  } catch {
-    showBackupStatus(t('settings.backupDeleteFailed'), 'error')
-  } finally {
-    deletingBackupId.value = null
-  }
-}
-
-// USB Drive Backup
-interface UsbDriveInfo {
-  device: string
-  mount_point: string | null
-  label: string | null
-  size_bytes: number
-  removable: boolean
-}
-const usbCopyingId = ref<string | null>(null)
-
-async function backupToUsb(backupId: string) {
-  usbCopyingId.value = backupId
-  try {
-    const drivesRes = await rpcClient.call<{ drives: UsbDriveInfo[] }>({ method: 'backup.list-drives' })
-    const drives = drivesRes.drives || []
-    const mounted = drives.filter(d => d.mount_point)
-    const target = mounted[0]
-    if (!target?.mount_point) {
-      showBackupStatus(t('settings.noUsbDrives'), 'error')
-      return
-    }
-    const label = target.label || target.device
-    if (!confirm(`Copy backup to USB drive "${label}" at ${target.mount_point}?`)) return
-    await rpcClient.call({ method: 'backup.to-usb', params: { id: backupId, mount_point: target.mount_point } })
-    showBackupStatus(t('settings.backupCopiedToUsb', { path: target.mount_point }), 'success')
-  } catch {
-    showBackupStatus(t('settings.backupUsbFailed'), 'error')
-  } finally {
-    usbCopyingId.value = null
-  }
-}
-
-// Lightning channel backup
-const exportingChannelBackup = ref(false)
-const channelBackupData = ref('')
-const channelBackupChannels = ref(0)
-const channelBackupTime = ref('')
-const channelBackupError = ref('')
-const channelBackupCopied = ref(false)
-
-async function exportChannelBackup() {
-  exportingChannelBackup.value = true
-  channelBackupError.value = ''
-  try {
-    const res = await rpcClient.call<{ backup: string; channel_count: number; timestamp: string }>({
-      method: 'lnd.export-channel-backup',
-      timeout: 15000,
-    })
-    channelBackupData.value = res.backup
-    channelBackupChannels.value = res.channel_count
-    channelBackupTime.value = new Date(res.timestamp).toLocaleString()
-  } catch (err: unknown) {
-    channelBackupError.value = err instanceof Error ? err.message : 'Failed to export'
-  } finally {
-    exportingChannelBackup.value = false
-  }
-}
-
-function copyChannelBackup() {
-  if (channelBackupData.value) {
-    navigator.clipboard.writeText(channelBackupData.value).catch(() => {})
-    channelBackupCopied.value = true
-    setTimeout(() => { channelBackupCopied.value = false }, 2000)
-  }
-}
-
-// Reboot
-const showRebootConfirm = ref(false)
-const rebooting = ref(false)
-const rebootPassword = ref('')
-const rebootError = ref('')
-async function performReboot() {
-  if (!rebootPassword.value) return
-  rebooting.value = true
-  rebootError.value = ''
-  try {
-    await rpcClient.call({ method: 'system.reboot', params: { password: rebootPassword.value } })
-    showRebootConfirm.value = false
-    rebootPassword.value = ''
-  } catch (e) {
-    rebootError.value = e instanceof Error ? e.message : 'Reboot failed'
-    rebooting.value = false
-  }
-}
-
-// Factory Reset
-const showFactoryResetConfirm = ref(false)
-const factoryResetLoading = ref(false)
-async function performFactoryReset() {
-  factoryResetLoading.value = true
-  try {
-    await rpcClient.call({ method: 'system.factory-reset', params: { confirm: true } })
-    localStorage.clear()
-    showFactoryResetConfirm.value = false
-    router.push('/onboarding/intro')
-  } catch {
-    localStorage.clear()
-    showFactoryResetConfirm.value = false
-    router.push('/onboarding/intro')
-  }
-}
-
-// Load on mount
-function init() {
-  checkClaudeStatus()
-  loadTelemetryStatus()
-  loadBackups()
-  loadWebhookConfig()
-}
-init()
+import InterfaceModeSection from '@/views/settings/InterfaceModeSection.vue'
+import ClaudeAuthSection from '@/views/settings/ClaudeAuthSection.vue'
+import AIDataAccessSection from '@/views/settings/AIDataAccessSection.vue'
+import SystemUpdatesSection from '@/views/settings/SystemUpdatesSection.vue'
+import WebhookSection from '@/views/settings/WebhookSection.vue'
+import TelemetrySection from '@/views/settings/TelemetrySection.vue'
+import BackupSection from '@/views/settings/BackupSection.vue'
+import SystemDangerZone from '@/views/settings/SystemDangerZone.vue'
 </script>
 
 <template>
-  <!-- Interface Mode Section -->
-  <div class="glass-card px-6 py-6 mb-6">
-    <h2 class="text-xl font-semibold text-white/96 mb-2">{{ t('settings.interfaceMode') }}</h2>
-    <p class="text-sm text-white/60 mb-6">{{ t('settings.interfaceModeDesc') }}</p>
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-      <button
-        v-for="m in interfaceModes"
-        :key="m.id"
-        @click="uiMode.setMode(m.id)"
-        class="path-option-card text-left p-5"
-        :class="{ 'path-option-card--selected': uiMode.mode === m.id }"
-      >
-        <div class="flex items-center gap-3 mb-3">
-          <svg class="w-6 h-6 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path
-              v-for="(path, index) in m.iconPaths"
-              :key="index"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              :d="path"
-            />
-          </svg>
-          <h3 class="text-lg font-semibold text-white/96">{{ m.label }}</h3>
-        </div>
-        <p class="text-sm text-white/60 leading-relaxed">{{ m.description }}</p>
-      </button>
-    </div>
-  </div>
-
-  <!-- Language Section -->
-  <div class="glass-card px-6 py-6 mb-6">
-    <h2 class="text-xl font-semibold text-white/96 mb-2">Language</h2>
-    <p class="text-sm text-white/60 mb-4">Choose your preferred language</p>
-    <div class="flex gap-3 flex-wrap">
-      <button
-        v-for="loc in supportedLocales"
-        :key="loc.code"
-        @click="changeLocale(loc.code)"
-        class="glass-button px-4 py-2 rounded-lg text-sm font-medium transition-all"
-        :class="currentLocale === loc.code ? 'ring-2 ring-orange-400/60 bg-white/10' : ''"
-      >
-        <span class="mr-2">{{ loc.flag }}</span>{{ loc.name }}
-      </button>
-    </div>
-  </div>
-
-  <!-- Claude Authentication Section -->
-  <div class="glass-card px-6 py-6 mb-6">
-    <h2 class="text-xl font-semibold text-white/96 mb-2">{{ t('settings.claudeAuth') }}</h2>
-    <p class="text-sm text-white/60 mb-6">{{ t('settings.claudeAuthDesc') }}</p>
-    <div class="bg-black/20 rounded-xl px-5 py-4 border border-white/10 mb-4">
-      <div class="flex items-center gap-3 mb-2">
-        <svg class="w-5 h-5 shrink-0" :class="claudeConnected ? 'text-green-400' : 'text-white/40'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path v-if="claudeConnected" 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" />
-          <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 11-12.728 0M12 9v4m0 4h.01" />
-        </svg>
-        <p class="text-xs font-semibold text-white/60 uppercase tracking-wide">{{ t('settings.connectionStatus') }}</p>
-      </div>
-      <p class="text-base font-medium" :class="claudeConnected ? 'text-green-400' : 'text-white/50'">
-        {{ claudeConnected ? t('common.connected') : t('settings.notConnected') }}
-      </p>
-    </div>
-    <button
-      @click="showClaudeLoginModal = true"
-      class="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg border transition-colors"
-      :class="claudeConnected
-        ? 'border-white/20 text-white/70 hover:bg-white/5'
-        : 'glass-button-warning font-medium'"
-    >
-      <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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
-      </svg>
-      <span>{{ claudeConnected ? t('settings.reAuthenticate') : t('settings.loginWithClaude') }}</span>
-    </button>
-  </div>
-
-  <!-- Claude Login Modal -->
-  <Teleport to="body">
-    <div
-      v-if="showClaudeLoginModal"
-      class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md"
-      @click.self="showClaudeLoginModal = false"
-    >
-      <div class="glass-card p-0 max-w-lg w-full overflow-hidden" style="height: 480px">
-        <div class="flex items-center justify-between px-4 py-3 border-b border-white/10">
-          <h3 class="text-sm font-semibold text-white/80">{{ t('settings.claudeAuth') }}</h3>
-          <button @click="showClaudeLoginModal = false" class="text-white/50 hover:text-white/80 transition-colors">
-            <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>
-        </div>
-        <iframe
-          src="/claude-login"
-          class="w-full border-0"
-          style="height: calc(100% - 49px)"
-          @load="onClaudeIframeLoad"
-        />
-      </div>
-    </div>
-  </Teleport>
-
-  <!-- AI Data Access Section -->
-  <div class="glass-card px-6 py-6 mb-6">
-    <div class="mb-2">
-      <h2 class="text-xl font-semibold text-white/96">{{ t('settings.aiDataAccess') }}</h2>
-    </div>
-    <p class="text-sm text-white/60 mb-6">{{ t('settings.aiDataAccessDesc') }}</p>
-    <button
-      @click="aiPermissions.allEnabled ? aiPermissions.disableAll() : aiPermissions.enableAll()"
-      class="w-full flex items-center gap-4 p-4 rounded-xl border transition-all text-left mb-6"
-      :class="aiPermissions.allEnabled
-        ? 'bg-white/10 border-orange-500/40'
-        : 'bg-black/20 border-white/10 hover:border-white/20'"
-    >
-      <svg class="w-5 h-5 shrink-0" :class="aiPermissions.allEnabled ? 'text-orange-400' : 'text-white/40'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-      </svg>
-      <div class="flex-1 min-w-0">
-        <p class="text-sm font-medium" :class="aiPermissions.allEnabled ? 'text-white/95' : 'text-white/70'">{{ t('common.enableAll') }}</p>
-        <p class="text-xs text-white/50 mt-0.5">{{ t('settings.enableAllDesc') }}</p>
-      </div>
-      <ToggleSwitch :model-value="aiPermissions.allEnabled" @update:model-value="aiPermissions.allEnabled ? aiPermissions.disableAll() : aiPermissions.enableAll()" @click.stop />
-    </button>
-    <div class="space-y-5">
-      <div v-for="group in aiCategoryGroups" :key="group.label">
-        <p class="text-xs font-medium text-white/40 uppercase tracking-wider mb-2 px-1">{{ group.label }}</p>
-        <div class="space-y-2">
-          <button
-            v-for="cat in group.items"
-            :key="cat.id"
-            @click="aiPermissions.toggle(cat.id)"
-            class="w-full flex items-center gap-4 p-4 rounded-xl border transition-all text-left"
-            :class="aiPermissions.isEnabled(cat.id)
-              ? 'bg-white/10 border-orange-500/40'
-              : 'bg-black/20 border-white/10 hover:border-white/20'"
-          >
-            <svg class="w-5 h-5 shrink-0" :class="aiPermissions.isEnabled(cat.id) ? 'text-orange-400' : 'text-white/40'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="cat.icon" />
-            </svg>
-            <div class="flex-1 min-w-0">
-              <p class="text-sm font-medium" :class="aiPermissions.isEnabled(cat.id) ? 'text-white/95' : 'text-white/70'">{{ cat.label }}</p>
-              <p class="text-xs text-white/50 mt-0.5">{{ cat.description }}</p>
-            </div>
-            <ToggleSwitch :model-value="aiPermissions.isEnabled(cat.id)" @update:model-value="aiPermissions.toggle(cat.id)" @click.stop />
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- System Updates Section -->
-  <div class="glass-card px-6 py-6 mb-6">
-    <div class="flex items-center justify-between">
-      <div>
-        <h2 class="text-xl font-semibold text-white/96">{{ t('settings.systemUpdates') }}</h2>
-        <p class="text-sm text-white/60 mt-1">{{ t('settings.systemUpdatesDesc') }}</p>
-      </div>
-      <RouterLink to="/dashboard/settings/update" class="glass-button px-4 py-2 rounded-lg text-sm flex items-center gap-2">
-        <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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-        </svg>
-        {{ t('common.manageUpdates') }}
-      </RouterLink>
-    </div>
-  </div>
-
-  <!-- Webhook Notifications Section -->
-  <div class="glass-card px-6 py-6 mb-6">
-    <div class="flex items-center justify-between mb-4">
-      <div>
-        <h2 class="text-xl font-semibold text-white/96">{{ t('settings.webhookNotifications') }}</h2>
-        <p class="text-sm text-white/60 mt-1">{{ t('settings.webhookNotificationsDesc') }}</p>
-      </div>
-      <ToggleSwitch :model-value="webhookConfig.enabled" @update:model-value="toggleWebhookEnabled" />
-    </div>
-    <div class="space-y-4">
-      <div>
-        <label class="text-xs text-white/50 block mb-1">{{ t('settings.webhookUrlLabel') }}</label>
-        <input
-          v-model="webhookConfig.url"
-          type="url"
-          :placeholder="t('settings.webhookUrlPlaceholder')"
-          class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-orange-500/50"
-        />
-      </div>
-      <div>
-        <label class="text-xs text-white/50 block mb-1">{{ t('settings.webhookSecretLabel') }}</label>
-        <input
-          v-model="webhookConfig.secret"
-          type="password"
-          :placeholder="t('settings.webhookSecretPlaceholderFull')"
-          class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-orange-500/50"
-        />
-      </div>
-      <div>
-        <label class="text-xs text-white/50 block mb-2">{{ t('settings.eventsToNotify') }}</label>
-        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
-          <button
-            v-for="evt in webhookEventTypes"
-            :key="evt.id"
-            @click="toggleWebhookEvent(evt.id)"
-            role="checkbox"
-            :aria-checked="webhookConfig.events.includes(evt.id)"
-            :aria-label="evt.label"
-            class="flex items-center gap-3 p-3 rounded-lg border transition-colors text-left"
-            :class="webhookConfig.events.includes(evt.id)
-              ? 'bg-orange-500/10 border-orange-500/30'
-              : 'bg-white/5 border-white/10 hover:border-white/20'"
-          >
-            <div
-              class="w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 transition-colors"
-              :class="webhookConfig.events.includes(evt.id)
-                ? 'border-orange-500 bg-orange-500'
-                : 'border-white/30'"
-            >
-              <svg v-if="webhookConfig.events.includes(evt.id)" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
-              </svg>
-            </div>
-            <div class="min-w-0">
-              <p class="text-sm text-white/90 font-medium">{{ evt.label }}</p>
-              <p class="text-xs text-white/50">{{ evt.description }}</p>
-            </div>
-          </button>
-        </div>
-      </div>
-      <div class="flex flex-col sm:flex-row gap-2 pt-2">
-        <button
-          @click="saveWebhookConfig"
-          :disabled="savingWebhook"
-          class="glass-button glass-button-warning px-4 py-2 rounded-lg text-sm flex items-center justify-center gap-2 disabled:opacity-50"
-        >
-          {{ savingWebhook ? t('settings.savingWebhook') : t('common.saveConfiguration') }}
-        </button>
-        <button
-          @click="testWebhook"
-          :disabled="testingWebhook || !webhookConfig.url"
-          class="glass-button px-4 py-2 rounded-lg text-sm flex items-center justify-center gap-2 disabled:opacity-50"
-        >
-          {{ testingWebhook ? t('common.sending') : t('common.sendTest') }}
-        </button>
-      </div>
-    </div>
-    <div v-if="webhookStatusMsg" role="status" aria-live="polite" class="mt-3 text-xs px-3 py-2 rounded-lg" :class="webhookStatusType === 'error' ? 'alert-error' : 'alert-success'">
-      {{ webhookStatusMsg }}
-    </div>
-  </div>
-
-  <!-- Beta Telemetry Section -->
-  <div class="glass-card px-6 py-6 mb-6">
-    <div class="flex items-center justify-between mb-3">
-      <div>
-        <h2 class="text-xl font-semibold text-white/96 mb-1">Beta Telemetry</h2>
-        <p class="text-sm text-white/60">Help improve Archipelago by sharing anonymous system health data. No wallet data, no keys, no personal info.</p>
-      </div>
-      <button
-        @click="toggleTelemetry"
-        :disabled="telemetryLoading"
-        class="shrink-0 ml-4 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
-        :class="telemetryEnabled ? 'glass-button glass-button-success' : 'glass-button'"
-      >
-        {{ telemetryLoading ? '...' : telemetryEnabled ? 'Enabled' : 'Enable' }}
-      </button>
-    </div>
-    <div v-if="telemetryEnabled" class="mt-3 text-xs text-white/50 space-y-1">
-      <p>Reporting: version, uptime, container states, CPU/RAM, error alerts.</p>
-      <p>Not reporting: wallet balances, private keys, DIDs, IP addresses.</p>
-    </div>
-  </div>
-
-  <!-- Backup & Restore Section -->
-  <div class="glass-card px-6 py-6 mb-6">
-    <div class="mb-4">
-      <h2 class="text-xl font-semibold text-white/96 mb-1">{{ t('settings.backup') }}</h2>
-      <p class="text-sm text-white/60 mb-3">{{ t('settings.backupRestoreDesc') }}</p>
-      <button @click="showCreateBackupModal = true" class="w-full min-h-[44px] glass-button rounded-lg text-sm font-medium flex items-center justify-center gap-2">
-        <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="M12 4v16m8-8H4" />
-        </svg>
-        {{ t('settings.createBackup') }}
-      </button>
-    </div>
-    <div v-if="loadingBackups" class="text-sm text-white/40 py-4 text-center">{{ t('settings.loadingBackups') }}</div>
-    <div v-else-if="backupList.length === 0" class="text-sm text-white/40 py-4 text-center">{{ t('settings.noBackups') }}</div>
-    <div v-else class="space-y-2">
-      <div v-for="b in backupList" :key="b.id" class="flex flex-col sm:flex-row sm:items-center sm:justify-between p-3 bg-white/5 rounded-lg gap-2">
-        <div class="min-w-0">
-          <div class="text-sm text-white font-medium">{{ b.description || t('settings.systemBackup') }}</div>
-          <div class="text-xs text-white/50">{{ new Date(b.created_at).toLocaleString() }} &middot; {{ formatBackupSize(b.size_bytes) }}</div>
-        </div>
-        <div class="flex items-center gap-2 shrink-0 flex-wrap">
-          <button @click="verifyBackup(b.id)" :disabled="verifyingBackupId === b.id" class="glass-button glass-button-sm px-3 py-1.5 rounded text-xs disabled:opacity-50" :title="t('common.verify')">
-            {{ verifyingBackupId === b.id ? '...' : t('common.verify') }}
-          </button>
-          <button @click="backupToUsb(b.id)" :disabled="usbCopyingId === b.id" class="glass-button glass-button-sm px-3 py-1.5 rounded text-xs text-blue-400 disabled:opacity-50" :title="t('settings.copyToUsb')">
-            {{ usbCopyingId === b.id ? '...' : 'USB' }}
-          </button>
-          <button @click="confirmRestoreBackup(b.id)" class="glass-button glass-button-sm px-3 py-1.5 rounded text-xs text-orange-400" :title="t('common.restore')">
-            {{ t('common.restore') }}
-          </button>
-          <button @click="deleteBackup(b.id)" :disabled="deletingBackupId === b.id" :aria-label="t('settings.deleteBackup')" class="glass-button glass-button-sm px-3 py-1.5 rounded text-xs text-red-400 disabled:opacity-50" :title="t('common.delete')">
-            &times;
-          </button>
-        </div>
-      </div>
-    </div>
-    <div v-if="backupStatusMsg" role="status" aria-live="polite" class="mt-3 text-xs px-3 py-2 rounded-lg" :class="backupStatusType === 'error' ? 'alert-error' : 'alert-success'">
-      {{ backupStatusMsg }}
-    </div>
-  </div>
-
-  <!-- Create Backup Modal -->
-  <Teleport to="body">
-    <div v-if="showCreateBackupModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md" @click.self="showCreateBackupModal = false">
-      <div class="glass-card p-6 w-full max-w-md" role="dialog" aria-modal="true" aria-labelledby="create-backup-title">
-        <h3 id="create-backup-title" class="text-lg font-semibold text-white mb-4">{{ t('settings.createEncryptedBackup') }}</h3>
-        <div class="space-y-3">
-          <div>
-            <label class="text-xs text-white/50 block mb-1">{{ t('settings.encryptionPassphrase') }}</label>
-            <input v-model="backupPassphrase" type="password" :placeholder="t('settings.enterPassphrase')" class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-blue-500/50" />
-          </div>
-          <div>
-            <label class="text-xs text-white/50 block mb-1">{{ t('settings.descriptionOptional') }}</label>
-            <input v-model="backupDescription" type="text" :placeholder="t('settings.descriptionPlaceholder')" class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-blue-500/50" />
-          </div>
-        </div>
-        <div class="flex gap-3 mt-5">
-          <button @click="showCreateBackupModal = false" class="glass-button px-4 py-2 rounded-lg text-sm flex-1">{{ t('common.cancel') }}</button>
-          <button @click="createBackup" :disabled="creatingBackup || !backupPassphrase" class="glass-button glass-button-warning px-4 py-2 rounded-lg text-sm flex-1 disabled:opacity-50">
-            {{ creatingBackup ? t('settings.creatingBackup') : t('settings.createBackup') }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </Teleport>
-
-  <!-- Restore Backup Modal -->
-  <Teleport to="body">
-    <div v-if="showRestoreModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md" @click.self="showRestoreModal = false">
-      <div class="glass-card p-6 w-full max-w-md" role="dialog" aria-modal="true" aria-labelledby="restore-backup-title">
-        <h3 id="restore-backup-title" class="text-lg font-semibold text-white mb-2">{{ t('settings.restoreBackupTitle') }}</h3>
-        <p class="text-sm text-red-400/80 mb-4">{{ t('settings.restoreWarning') }}</p>
-        <div>
-          <label class="text-xs text-white/50 block mb-1">{{ t('settings.encryptionPassphrase') }}</label>
-          <input v-model="restorePassphrase" type="password" :placeholder="t('settings.enterBackupPassphrase')" class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-blue-500/50" />
-        </div>
-        <div class="flex gap-3 mt-5">
-          <button @click="showRestoreModal = false" class="glass-button px-4 py-2 rounded-lg text-sm flex-1">{{ t('common.cancel') }}</button>
-          <button @click="restoreBackup" :disabled="restoringBackup || !restorePassphrase" class="glass-button glass-button-danger px-4 py-2 rounded-lg text-sm flex-1 disabled:opacity-50">
-            {{ restoringBackup ? t('common.restoring') : t('common.restore') }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </Teleport>
-
-  <!-- Lightning Channel Backup -->
-  <div class="glass-card px-6 py-6 mb-6">
-    <h2 class="text-xl font-semibold text-white/96 mb-1">Lightning Channel Backup</h2>
-    <p class="text-sm text-white/60 mb-3">Export your channel state so you can restore channels on a new node. Does not include on-chain wallet seed.</p>
-    <div class="flex gap-3">
-      <button @click="exportChannelBackup" :disabled="exportingChannelBackup" class="glass-button px-4 py-2 rounded-lg text-sm flex items-center gap-2">
-        <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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-        </svg>
-        {{ exportingChannelBackup ? 'Exporting...' : 'Export Channel Backup' }}
-      </button>
-    </div>
-    <div v-if="channelBackupData" class="mt-3 bg-black/30 rounded-lg p-3">
-      <p class="text-xs text-white/40 mb-1">{{ channelBackupChannels }} channel{{ channelBackupChannels !== 1 ? 's' : '' }} backed up at {{ channelBackupTime }}</p>
-      <textarea readonly :value="channelBackupData" rows="3" class="w-full bg-black/20 text-xs font-mono text-white/60 rounded p-2 resize-none border border-white/10"></textarea>
-      <button @click="copyChannelBackup" class="mt-2 glass-button px-3 py-1.5 rounded text-xs">{{ channelBackupCopied ? 'Copied!' : 'Copy Backup Data' }}</button>
-    </div>
-    <p v-if="channelBackupError" class="mt-2 text-xs text-red-400">{{ channelBackupError }}</p>
-  </div>
-
-  <!-- Network Diagnostics Link -->
-  <div class="glass-card px-6 py-6 mb-6">
-    <div class="flex items-center justify-between">
-      <div>
-        <h2 class="text-xl font-semibold text-white/96">{{ t('common.network') }}</h2>
-        <p class="text-sm text-white/60 mt-1">{{ t('settings.networkDesc') }}</p>
-      </div>
-      <button @click="router.push('/dashboard/server')" class="glass-button px-4 py-2 rounded-lg text-sm flex items-center gap-2">
-        <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="M13 7l5 5m0 0l-5 5m5-5H6" />
-        </svg>
-        {{ t('common.networkDiagnostics') }}
-      </button>
-    </div>
-  </div>
-
-  <!-- Reboot Section -->
-  <div class="path-option-card px-6 py-6 mt-6">
-    <div class="flex items-center justify-between">
-      <div>
-        <h2 class="text-xl font-semibold text-white/90 mb-1">Reboot</h2>
-        <p class="text-sm text-white/60">Restart the machine. All containers will restart automatically.</p>
-      </div>
-      <button
-        class="glass-button px-6 py-2 text-sm"
-        :disabled="rebooting"
-        @click="showRebootConfirm = true"
-      >
-        {{ rebooting ? 'Rebooting...' : 'Reboot' }}
-      </button>
-    </div>
-  </div>
-
-  <!-- Reboot Confirmation Modal -->
-  <Teleport to="body">
-    <div v-if="showRebootConfirm" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showRebootConfirm = false">
-      <div class="glass-card px-8 py-8 max-w-md mx-4">
-        <h3 class="text-lg font-semibold text-white/90 mb-3">Reboot Node</h3>
-        <p class="text-sm text-white/60 mb-4">Enter your password to confirm reboot. The node will be temporarily unavailable.</p>
-        <input
-          v-model="rebootPassword"
-          type="password"
-          class="w-full px-3 py-2 rounded-lg bg-white/10 text-white border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500 mb-4"
-          placeholder="Password"
-          @keydown.enter="performReboot"
-        />
-        <p v-if="rebootError" class="text-sm text-red-400 mb-3">{{ rebootError }}</p>
-        <div class="flex gap-3 justify-end">
-          <button class="glass-button" @click="showRebootConfirm = false">Cancel</button>
-          <button
-            class="glass-button px-6"
-            :disabled="rebooting || !rebootPassword"
-            @click="performReboot"
-          >
-            {{ rebooting ? 'Rebooting...' : 'Confirm Reboot' }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </Teleport>
-
-  <!-- Factory Reset Section -->
-  <div class="path-option-card px-6 py-6 mt-6 border-red-500/30">
-    <h2 class="text-xl font-semibold text-red-400/90 mb-3">Factory Reset</h2>
-    <p class="text-sm text-white/60 mb-4">
-      Wipe all user data, identities, and credentials. Container images are preserved. The node will restart and show the onboarding screen.
-    </p>
-    <button
-      class="glass-button glass-button-danger"
-      @click="showFactoryResetConfirm = true"
-    >
-      Factory Reset
-    </button>
-  </div>
-
-  <!-- Factory Reset Confirmation Modal -->
-  <Teleport to="body">
-    <div v-if="showFactoryResetConfirm" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
-      <div class="glass-card px-8 py-8 max-w-md mx-4">
-        <h3 class="text-lg font-semibold text-white/90 mb-3">Are you sure?</h3>
-        <p class="text-sm text-white/60 mb-6">
-          This will delete all identities, credentials, and settings. This cannot be undone.
-        </p>
-        <div class="flex gap-3 justify-end">
-          <button class="glass-button" @click="showFactoryResetConfirm = false">Cancel</button>
-          <button
-            class="glass-button glass-button-danger"
-            :disabled="factoryResetLoading"
-            @click="performFactoryReset"
-          >
-            {{ factoryResetLoading ? 'Resetting...' : 'Yes, Reset' }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </Teleport>
+  <InterfaceModeSection />
+  <ClaudeAuthSection />
+  <AIDataAccessSection />
+  <SystemUpdatesSection />
+  <WebhookSection />
+  <TelemetrySection />
+  <BackupSection />
+  <SystemDangerZone />
 </template>

neode-ui/src/views/settings/SystemUpdatesSection.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <!-- System Updates Section -->
+  <div class="glass-card px-6 py-6 mb-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <h2 class="text-xl font-semibold text-white/96">{{ t('settings.systemUpdates') }}</h2>
+        <p class="text-sm text-white/60 mt-1">{{ t('settings.systemUpdatesDesc') }}</p>
+      </div>
+      <RouterLink to="/dashboard/settings/update" class="glass-button px-4 py-2 rounded-lg text-sm flex items-center gap-2">
+        <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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+        </svg>
+        {{ t('common.manageUpdates') }}
+      </RouterLink>
+    </div>
+  </div>
+</template>

neode-ui/src/views/settings/TelemetrySection.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { rpcClient } from '@/api/rpc-client'
+
+const telemetryEnabled = ref(false)
+const telemetryLoading = ref(false)
+
+async function loadTelemetryStatus() {
+  try {
+    const res = await rpcClient.call<{ enabled: boolean }>({ method: 'analytics.get-status' })
+    telemetryEnabled.value = res.enabled
+  } catch { /* ignore */ }
+}
+
+async function toggleTelemetry() {
+  telemetryLoading.value = true
+  try {
+    const method = telemetryEnabled.value ? 'analytics.disable' : 'analytics.enable'
+    await rpcClient.call({ method })
+    telemetryEnabled.value = !telemetryEnabled.value
+  } catch { /* ignore */ }
+  telemetryLoading.value = false
+}
+
+loadTelemetryStatus()
+</script>
+
+<template>
+  <!-- Beta Telemetry Section -->
+  <div class="glass-card px-6 py-6 mb-6">
+    <div class="flex items-center justify-between mb-3">
+      <div>
+        <h2 class="text-xl font-semibold text-white/96 mb-1">Beta Telemetry</h2>
+        <p class="text-sm text-white/60">Help improve Archipelago by sharing anonymous system health data. No wallet data, no keys, no personal info.</p>
+      </div>
+      <button
+        @click="toggleTelemetry"
+        :disabled="telemetryLoading"
+        class="shrink-0 ml-4 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+        :class="telemetryEnabled ? 'glass-button glass-button-success' : 'glass-button'"
+      >
+        {{ telemetryLoading ? '...' : telemetryEnabled ? 'Enabled' : 'Enable' }}
+      </button>
+    </div>
+    <div v-if="telemetryEnabled" class="mt-3 text-xs text-white/50 space-y-1">
+      <p>Reporting: version, uptime, container states, CPU/RAM, error alerts.</p>
+      <p>Not reporting: wallet balances, private keys, DIDs, IP addresses.</p>
+    </div>
+  </div>
+</template>

neode-ui/src/views/settings/TwoFactorSection.vue

@@ -0,0 +1,330 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import DOMPurify from 'dompurify'
+import { useI18n } from 'vue-i18n'
+import { rpcClient } from '@/api/rpc-client'
+
+const { t } = useI18n()
+
+// 2FA / TOTP
+const totpEnabled = ref(false)
+const showTotpSetupModal = ref(false)
+const showTotpDisableModal = ref(false)
+const totpSetupStep = ref(1)
+const totpSetupPassword = ref('')
+const totpSetupCode = ref('')
+const totpSetupError = ref('')
+const totpSetupLoading = ref(false)
+const totpQrSvg = ref('')
+const sanitizedQrSvg = computed(() => DOMPurify.sanitize(totpQrSvg.value, { USE_PROFILES: { svg: true } }))
+const totpSecretBase32 = ref('')
+const showTotpSecret = ref(false)
+const totpPendingToken = ref('')
+const totpBackupCodes = ref<string[]>([])
+const backupCodesCopied = ref(false)
+const totpDisablePassword = ref('')
+const totpDisableCode = ref('')
+const totpDisableError = ref('')
+const totpDisableLoading = ref(false)
+
+async function loadTotpStatus() {
+  try {
+    const res = await rpcClient.totpStatus()
+    totpEnabled.value = res.enabled
+  } catch (e) {
+    if (import.meta.env.DEV) console.warn('TOTP status may not be available', e)
+  }
+}
+
+async function beginTotpSetup() {
+  totpSetupError.value = ''
+  totpSetupLoading.value = true
+  try {
+    const res = await rpcClient.totpSetupBegin(totpSetupPassword.value)
+    totpQrSvg.value = res.qr_svg
+    totpSecretBase32.value = res.secret_base32
+    totpPendingToken.value = res.pending_token
+    totpSetupStep.value = 2
+  } catch (e) {
+    totpSetupError.value = e instanceof Error ? e.message : t('settings.setupFailed')
+  } finally {
+    totpSetupLoading.value = false
+  }
+}
+
+async function confirmTotpSetup() {
+  totpSetupError.value = ''
+  totpSetupLoading.value = true
+  try {
+    const res = await rpcClient.totpSetupConfirm({
+      code: totpSetupCode.value,
+      password: totpSetupPassword.value,
+      pendingToken: totpPendingToken.value,
+    })
+    totpBackupCodes.value = res.backup_codes
+    totpEnabled.value = true
+    totpSetupStep.value = 3
+  } catch (e) {
+    totpSetupError.value = e instanceof Error ? e.message : t('settings.verificationFailed')
+  } finally {
+    totpSetupLoading.value = false
+  }
+}
+
+function closeTotpSetup() {
+  showTotpSetupModal.value = false
+  totpSetupStep.value = 1
+  totpSetupPassword.value = ''
+  totpSetupCode.value = ''
+  totpSetupError.value = ''
+  totpQrSvg.value = ''
+  totpSecretBase32.value = ''
+  totpPendingToken.value = ''
+  totpBackupCodes.value = []
+  backupCodesCopied.value = false
+}
+
+async function disableTotp() {
+  totpDisableError.value = ''
+  totpDisableLoading.value = true
+  try {
+    await rpcClient.totpDisable(totpDisablePassword.value, totpDisableCode.value)
+    totpEnabled.value = false
+    closeTotpDisable()
+  } catch (e) {
+    totpDisableError.value = e instanceof Error ? e.message : t('settings.disableFailed')
+  } finally {
+    totpDisableLoading.value = false
+  }
+}
+
+function closeTotpDisable() {
+  showTotpDisableModal.value = false
+  totpDisablePassword.value = ''
+  totpDisableCode.value = ''
+  totpDisableError.value = ''
+}
+
+async function copyBackupCodes() {
+  const text = totpBackupCodes.value.join('\n')
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch {
+    const ta = document.createElement('textarea')
+    ta.value = text
+    ta.style.position = 'fixed'
+    ta.style.opacity = '0'
+    document.body.appendChild(ta)
+    ta.select()
+    document.execCommand('copy')
+    document.body.removeChild(ta)
+  }
+  backupCodesCopied.value = true
+  setTimeout(() => { backupCodesCopied.value = false }, 2000)
+}
+
+loadTotpStatus()
+</script>
+
+<template>
+  <!-- Two-Factor Authentication -->
+  <div class="mb-6">
+    <div class="flex items-center justify-between mb-3">
+      <div class="flex items-center gap-3">
+        <svg class="w-5 h-5 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+        </svg>
+        <div>
+          <p class="text-sm font-medium text-white/90">{{ t('settings.twoFactorAuth') }}</p>
+          <p class="text-xs text-white/50">{{ t('settings.twoFaProtect') }}</p>
+        </div>
+      </div>
+      <span
+        class="text-xs font-semibold px-2 py-1 rounded-full"
+        :class="totpEnabled ? 'status-success' : 'bg-white/10 text-white/50'"
+      >
+        {{ totpEnabled ? t('common.enabled') : t('common.disabled') }}
+      </span>
+    </div>
+    <button
+      v-if="!totpEnabled"
+      @click="showTotpSetupModal = true"
+      class="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg glass-button glass-button-warning font-medium"
+    >
+      <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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+      </svg>
+      <span>{{ t('settings.enable2fa') }}</span>
+    </button>
+    <button
+      v-else
+      @click="showTotpDisableModal = true"
+      class="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg glass-button glass-button-danger font-medium"
+    >
+      <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="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
+      </svg>
+      <span>{{ t('settings.disable2fa') }}</span>
+    </button>
+  </div>
+
+  <!-- TOTP Setup Modal -->
+  <Teleport to="body">
+    <div
+      v-if="showTotpSetupModal"
+      class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md"
+      @click.self="closeTotpSetup"
+      @keydown.escape="closeTotpSetup"
+    >
+      <div class="glass-card p-6 max-w-md w-full" role="dialog" aria-modal="true" aria-labelledby="totp-setup-title">
+        <template v-if="totpSetupStep === 1">
+          <h3 id="totp-setup-title" class="text-lg font-semibold text-white mb-2">{{ t('settings.setup2faTitle') }}</h3>
+          <p class="text-white/60 text-sm mb-4">{{ t('settings.setup2faPasswordPrompt') }}</p>
+          <form @submit.prevent="beginTotpSetup" class="space-y-4">
+            <input
+              v-model="totpSetupPassword"
+              type="password"
+              required
+              autocomplete="current-password"
+              class="w-full px-3 py-2 rounded-lg bg-white/10 text-white border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
+              :placeholder="t('login.enterPasswordPlaceholder')"
+            />
+            <p v-if="totpSetupError" class="text-sm text-red-400">{{ totpSetupError }}</p>
+            <div class="flex gap-3">
+              <button
+                type="submit"
+                :disabled="totpSetupLoading"
+                class="flex-1 px-4 py-2 rounded-lg bg-orange-500 text-white font-medium hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                {{ totpSetupLoading ? t('common.loading') : t('common.continue') }}
+              </button>
+              <button type="button" @click="closeTotpSetup" class="px-4 py-2 rounded-lg bg-white/10 text-white font-medium hover:bg-white/20 transition-colors">{{ t('common.cancel') }}</button>
+            </div>
+          </form>
+        </template>
+        <template v-else-if="totpSetupStep === 2">
+          <h3 class="text-lg font-semibold text-white mb-2">{{ t('settings.scanQrCode') }}</h3>
+          <p class="text-white/60 text-sm mb-4">{{ t('settings.scanQrInstruction') }}</p>
+          <div class="flex justify-center mb-4 bg-white rounded-xl p-4 mx-auto w-fit" v-html="sanitizedQrSvg" />
+          <div v-if="totpSecretBase32" class="bg-black/30 rounded-lg px-3 py-2 mb-4">
+            <p class="text-xs text-white/50 mb-1">Manual entry key (keep secret!):</p>
+            <div v-if="showTotpSecret" class="flex items-center gap-2">
+              <p class="text-sm font-mono text-orange-400 break-all">{{ totpSecretBase32 }}</p>
+              <button type="button" class="glass-button text-xs px-2 py-1" @click="showTotpSecret = false">Hide</button>
+            </div>
+            <button v-else type="button" class="glass-button text-xs px-3 py-1" @click="showTotpSecret = true">
+              Show manual entry key
+            </button>
+          </div>
+          <form @submit.prevent="confirmTotpSetup" class="space-y-4">
+            <input
+              v-model="totpSetupCode"
+              type="text"
+              inputmode="numeric"
+              pattern="[0-9]{6}"
+              maxlength="6"
+              required
+              autocomplete="one-time-code"
+              class="w-full px-3 py-3 rounded-lg bg-white/10 text-white text-center text-2xl tracking-[0.5em] border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500 font-mono"
+              :placeholder="t('login.totpPlaceholder')"
+            />
+            <p v-if="totpSetupError" class="text-sm text-red-400">{{ totpSetupError }}</p>
+            <div class="flex gap-3">
+              <button
+                type="submit"
+                :disabled="totpSetupLoading || totpSetupCode.length !== 6"
+                class="flex-1 px-4 py-2 rounded-lg bg-orange-500 text-white font-medium hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                {{ totpSetupLoading ? t('login.verifying') : t('settings.verifyAndEnable') }}
+              </button>
+              <button type="button" @click="closeTotpSetup" class="px-4 py-2 rounded-lg bg-white/10 text-white font-medium hover:bg-white/20 transition-colors">{{ t('common.cancel') }}</button>
+            </div>
+          </form>
+        </template>
+        <template v-else-if="totpSetupStep === 3">
+          <h3 class="text-lg font-semibold text-white mb-2">{{ t('settings.saveBackupCodes') }}</h3>
+          <p class="text-white/60 text-sm mb-4">{{ t('settings.backupCodesInstruction') }}</p>
+          <div class="bg-black/30 rounded-xl p-4 mb-4">
+            <div class="grid grid-cols-2 gap-2">
+              <div
+                v-for="(code, i) in totpBackupCodes"
+                :key="i"
+                class="text-sm font-mono text-white/90 bg-white/5 rounded px-3 py-2 text-center"
+              >
+                {{ code }}
+              </div>
+            </div>
+          </div>
+          <button
+            @click="copyBackupCodes"
+            class="w-full mb-3 flex items-center justify-center gap-2 px-4 py-2 rounded-lg border border-white/20 text-white/80 font-medium hover:bg-white/5 transition-colors"
+          >
+            <svg v-if="!backupCodesCopied" 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+            </svg>
+            <span>{{ backupCodesCopied ? t('common.copiedBang') : t('settings.copyAllCodes') }}</span>
+          </button>
+          <button
+            @click="closeTotpSetup"
+            class="w-full px-4 py-2 rounded-lg bg-orange-500 text-white font-medium hover:bg-orange-600 transition-colors"
+          >
+            {{ t('common.done') }}
+          </button>
+        </template>
+      </div>
+    </div>
+  </Teleport>
+
+  <!-- TOTP Disable Modal -->
+  <Teleport to="body">
+    <div
+      v-if="showTotpDisableModal"
+      class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md"
+      @click.self="closeTotpDisable"
+      @keydown.escape="closeTotpDisable"
+    >
+      <div class="glass-card p-6 max-w-md w-full" role="dialog" aria-modal="true" aria-labelledby="totp-disable-title">
+        <h3 id="totp-disable-title" class="text-lg font-semibold text-white mb-2">{{ t('settings.disable2faTitle') }}</h3>
+        <p class="text-white/60 text-sm mb-4">{{ t('settings.disable2faDesc') }}</p>
+        <form @submit.prevent="disableTotp" class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-white/80 mb-2">{{ t('login.password') }}</label>
+            <input
+              v-model="totpDisablePassword"
+              type="password"
+              required
+              autocomplete="current-password"
+              class="w-full px-3 py-2 rounded-lg bg-white/10 text-white border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
+              :placeholder="t('login.enterPasswordPlaceholder')"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-white/80 mb-2">{{ t('settings.authenticatorCode') }}</label>
+            <input
+              v-model="totpDisableCode"
+              type="text"
+              inputmode="numeric"
+              pattern="[0-9]{6}"
+              maxlength="6"
+              required
+              autocomplete="one-time-code"
+              class="w-full px-3 py-3 rounded-lg bg-white/10 text-white text-center text-2xl tracking-[0.5em] border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500 font-mono"
+              :placeholder="t('login.totpPlaceholder')"
+            />
+          </div>
+          <p v-if="totpDisableError" class="text-sm text-red-400">{{ totpDisableError }}</p>
+          <div class="flex gap-3">
+            <button
+              type="submit"
+              :disabled="totpDisableLoading"
+              class="flex-1 px-4 py-2 rounded-lg bg-red-500 text-white font-medium hover:bg-red-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              {{ totpDisableLoading ? t('common.disabling') : t('settings.disable2fa') }}
+            </button>
+            <button type="button" @click="closeTotpDisable" class="px-4 py-2 rounded-lg bg-white/10 text-white font-medium hover:bg-white/20 transition-colors">{{ t('common.cancel') }}</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </Teleport>
+</template>

neode-ui/src/views/settings/WebhookSection.vue

@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { rpcClient } from '@/api/rpc-client'
+import ToggleSwitch from '@/components/ToggleSwitch.vue'
+
+const { t } = useI18n()
+
+interface WebhookConfigData {
+  enabled: boolean
+  url: string
+  secret: string
+  events: string[]
+}
+
+const webhookConfig = ref<WebhookConfigData>({
+  enabled: false,
+  url: '',
+  secret: '',
+  events: [],
+})
+const savingWebhook = ref(false)
+const testingWebhook = ref(false)
+const webhookStatusMsg = ref('')
+const webhookStatusType = ref<'success' | 'error'>('success')
+
+const webhookEventTypes = computed(() => [
+  { id: 'container_crash', label: t('settings.containerCrash'), description: t('settings.containerCrashDesc') },
+  { id: 'update_available', label: t('settings.updateAvailableEvent'), description: t('settings.updateAvailableDesc') },
+  { id: 'disk_warning', label: t('settings.diskSpaceWarning'), description: t('settings.diskWarningDesc') },
+  { id: 'backup_complete', label: t('settings.backupComplete'), description: t('settings.backupCompleteDesc') },
+])
+
+function showWebhookStatus(msg: string, type: 'success' | 'error') {
+  webhookStatusMsg.value = msg
+  webhookStatusType.value = type
+  setTimeout(() => { webhookStatusMsg.value = '' }, 5000)
+}
+
+function toggleWebhookEvent(id: string) {
+  const idx = webhookConfig.value.events.indexOf(id)
+  if (idx >= 0) {
+    webhookConfig.value.events.splice(idx, 1)
+  } else {
+    webhookConfig.value.events.push(id)
+  }
+}
+
+function toggleWebhookEnabled() {
+  webhookConfig.value.enabled = !webhookConfig.value.enabled
+}
+
+async function loadWebhookConfig() {
+  try {
+    const res = await rpcClient.call<{ enabled: boolean; url: string; events: string[]; has_secret: boolean }>({ method: 'webhook.get-config' })
+    webhookConfig.value.enabled = res.enabled
+    webhookConfig.value.url = res.url
+    webhookConfig.value.events = res.events || []
+  } catch {
+    // Webhook system may not be available
+  }
+}
+
+async function saveWebhookConfig() {
+  savingWebhook.value = true
+  try {
+    await rpcClient.call({
+      method: 'webhook.configure',
+      params: {
+        enabled: webhookConfig.value.enabled,
+        url: webhookConfig.value.url,
+        secret: webhookConfig.value.secret || null,
+        events: webhookConfig.value.events,
+      },
+    })
+    showWebhookStatus(t('settings.webhookSaved'), 'success')
+  } catch {
+    showWebhookStatus(t('settings.webhookSaveFailed'), 'error')
+  } finally {
+    savingWebhook.value = false
+  }
+}
+
+async function testWebhook() {
+  testingWebhook.value = true
+  try {
+    const res = await rpcClient.call<{ sent: boolean; url: string }>({ method: 'webhook.test' })
+    if (res.sent) {
+      showWebhookStatus(t('settings.webhookTestSent'), 'success')
+    } else {
+      showWebhookStatus(t('settings.webhookTestFailed'), 'error')
+    }
+  } catch {
+    showWebhookStatus(t('settings.webhookSendFailed'), 'error')
+  } finally {
+    testingWebhook.value = false
+  }
+}
+
+loadWebhookConfig()
+</script>
+
+<template>
+  <!-- Webhook Notifications Section -->
+  <div class="glass-card px-6 py-6 mb-6">
+    <div class="flex items-center justify-between mb-4">
+      <div>
+        <h2 class="text-xl font-semibold text-white/96">{{ t('settings.webhookNotifications') }}</h2>
+        <p class="text-sm text-white/60 mt-1">{{ t('settings.webhookNotificationsDesc') }}</p>
+      </div>
+      <ToggleSwitch :model-value="webhookConfig.enabled" @update:model-value="toggleWebhookEnabled" />
+    </div>
+    <div class="space-y-4">
+      <div>
+        <label class="text-xs text-white/50 block mb-1">{{ t('settings.webhookUrlLabel') }}</label>
+        <input
+          v-model="webhookConfig.url"
+          type="url"
+          :placeholder="t('settings.webhookUrlPlaceholder')"
+          class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-orange-500/50"
+        />
+      </div>
+      <div>
+        <label class="text-xs text-white/50 block mb-1">{{ t('settings.webhookSecretLabel') }}</label>
+        <input
+          v-model="webhookConfig.secret"
+          type="password"
+          :placeholder="t('settings.webhookSecretPlaceholderFull')"
+          class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-orange-500/50"
+        />
+      </div>
+      <div>
+        <label class="text-xs text-white/50 block mb-2">{{ t('settings.eventsToNotify') }}</label>
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          <button
+            v-for="evt in webhookEventTypes"
+            :key="evt.id"
+            @click="toggleWebhookEvent(evt.id)"
+            role="checkbox"
+            :aria-checked="webhookConfig.events.includes(evt.id)"
+            :aria-label="evt.label"
+            class="flex items-center gap-3 p-3 rounded-lg border transition-colors text-left"
+            :class="webhookConfig.events.includes(evt.id)
+              ? 'bg-orange-500/10 border-orange-500/30'
+              : 'bg-white/5 border-white/10 hover:border-white/20'"
+          >
+            <div
+              class="w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 transition-colors"
+              :class="webhookConfig.events.includes(evt.id)
+                ? 'border-orange-500 bg-orange-500'
+                : 'border-white/30'"
+            >
+              <svg v-if="webhookConfig.events.includes(evt.id)" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
+              </svg>
+            </div>
+            <div class="min-w-0">
+              <p class="text-sm text-white/90 font-medium">{{ evt.label }}</p>
+              <p class="text-xs text-white/50">{{ evt.description }}</p>
+            </div>
+          </button>
+        </div>
+      </div>
+      <div class="flex flex-col sm:flex-row gap-2 pt-2">
+        <button
+          @click="saveWebhookConfig"
+          :disabled="savingWebhook"
+          class="glass-button glass-button-warning px-4 py-2 rounded-lg text-sm flex items-center justify-center gap-2 disabled:opacity-50"
+        >
+          {{ savingWebhook ? t('settings.savingWebhook') : t('common.saveConfiguration') }}
+        </button>
+        <button
+          @click="testWebhook"
+          :disabled="testingWebhook || !webhookConfig.url"
+          class="glass-button px-4 py-2 rounded-lg text-sm flex items-center justify-center gap-2 disabled:opacity-50"
+        >
+          {{ testingWebhook ? t('common.sending') : t('common.sendTest') }}
+        </button>
+      </div>
+    </div>
+    <div v-if="webhookStatusMsg" role="status" aria-live="polite" class="mt-3 text-xs px-3 py-2 rounded-lg" :class="webhookStatusType === 'error' ? 'alert-error' : 'alert-success'">
+      {{ webhookStatusMsg }}
+    </div>
+  </div>
+</template>

neode-ui/src/views/web5/Web5QuickActions.vue

@@ -6,7 +6,7 @@
       <div data-controller-container tabindex="0" :class="{ 'card-stagger': showStagger }" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0" style="--stagger-index: 0">
         <div class="flex items-center gap-3 min-w-0">
           <div class="relative shrink-0">
-            <span class="text-2xl text-orange-500 font-bold">&bitcoin;</span>
+            <span class="text-2xl text-orange-500 font-bold">₿</span>
           </div>
           <div class="min-w-0">
             <p class="text-sm font-medium text-white">{{ t('web5.networkingProfits') }}</p>

neode-ui/src/views/web5/Web5Wallet.vue

@@ -98,7 +98,7 @@
       <!-- On-chain Balance -->
       <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
         <div class="flex items-center gap-3">
-          <span class="text-lg text-orange-500 font-bold">&bitcoin;</span>
+          <span class="text-lg text-orange-500 font-bold">₿</span>
           <span class="text-white/80 text-sm">{{ t('web5.onChain') }}</span>
         </div>
         <span class="text-orange-500 text-sm font-medium">{{ lndOnchainBalance.toLocaleString() }} sats</span>