From 83dfed17c0b744db9e2fd6ed95389a72611bc08c Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Thu, 19 Mar 2026 16:38:11 +0000
Subject: [PATCH] feat: Tor status + cleanup, Tailscale admin, marketplace
 install UX

- Task 0: Tor status dot (green/red) + "Cleanup Old" rotated services button
- Task 2: BTCPay already handled (opens new tab)
- Task 3: Tailscale launches https://login.tailscale.com/admin/machines in new tab
- Task 8: Marketplace install shows inline progress on card (removed banner)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 neode-ui/src/views/AppSession.vue  |   2 +
 neode-ui/src/views/Apps.vue        |   2 +-
 neode-ui/src/views/Marketplace.vue | 104 ++++++-----------------------
 neode-ui/src/views/Server.vue      |  63 ++++++++++++-----
 4 files changed, 71 insertions(+), 100 deletions(-)

diff --git a/neode-ui/src/views/AppSession.vue b/neode-ui/src/views/AppSession.vue
index b0d64ed5..b8daa60e 100644
--- a/neode-ui/src/views/AppSession.vue
+++ b/neode-ui/src/views/AppSession.vue
@@ -376,6 +376,7 @@ const EXTERNAL_URLS: Record<string, string> = {
   '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> = {
@@ -402,6 +403,7 @@ const NEW_TAB_APPS = new Set([
   '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))
diff --git a/neode-ui/src/views/Apps.vue b/neode-ui/src/views/Apps.vue
index 75553701..8332fe55 100644
--- a/neode-ui/src/views/Apps.vue
+++ b/neode-ui/src/views/Apps.vue
@@ -561,7 +561,7 @@ function canLaunch(pkg: PackageDataEntry): boolean {
 const TAB_LAUNCH_APPS = new Set([
   'btcpay-server', 'grafana', 'photoprism', 'homeassistant',
   'vaultwarden', 'nextcloud', 'uptime-kuma', 'portainer',
-  'onlyoffice', 'nginx-proxy-manager',
+  'onlyoffice', 'nginx-proxy-manager', 'tailscale',
 ])
 
 function opensInTab(id: string): boolean {
diff --git a/neode-ui/src/views/Marketplace.vue b/neode-ui/src/views/Marketplace.vue
index 61fee6c6..1691e079 100644
--- a/neode-ui/src/views/Marketplace.vue
+++ b/neode-ui/src/views/Marketplace.vue
@@ -2,78 +2,6 @@
   <div class="marketplace-container">
     <!-- Header Section -->
     <div>
-    <!-- Installation Progress Banner - Multiple Apps -->
-    <div v-if="installingApps.size > 0" aria-live="polite" class="mb-6 space-y-3">
-      <div 
-        v-for="[appId, progress] in installingApps" 
-        :key="appId"
-        class="glass-card p-4 border-l-4"
-        :class="{
-          'border-blue-500': progress.status === 'downloading' || progress.status === 'installing',
-          'border-orange-500': progress.status === 'starting',
-          'border-green-500': progress.status === 'complete',
-          'border-red-500': progress.status === 'error'
-        }"
-      >
-        <div class="flex items-center justify-between mb-3">
-          <div class="flex items-center gap-3">
-            <svg
-              v-if="progress.status !== 'complete' && progress.status !== 'error'"
-              class="animate-spin h-5 w-5 text-blue-400"
-              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>
-            <svg 
-              v-else-if="progress.status === 'complete'"
-              class="h-5 w-5 text-green-400" 
-              xmlns="http://www.w3.org/2000/svg" 
-              fill="none" 
-              viewBox="0 0 24 24" 
-              stroke="currentColor"
-            >
-              <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>
-            <svg 
-              v-else
-              class="h-5 w-5 text-red-400" 
-              xmlns="http://www.w3.org/2000/svg" 
-              fill="none" 
-              viewBox="0 0 24 24" 
-              stroke="currentColor"
-            >
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-            <div>
-              <p class="text-white font-medium">{{ progress.title }}</p>
-              <p class="text-white/70 text-sm">{{ progress.message }}</p>
-            </div>
-          </div>
-          <div class="text-white/60 text-sm">
-            {{ progress.progress }}%
-          </div>
-        </div>
-        
-        <!-- Progress Bar -->
-        <div class="w-full bg-white/10 rounded-full h-2 overflow-hidden">
-          <div 
-            class="h-full rounded-full transition-all duration-500"
-            :class="{
-              'bg-gradient-to-r from-blue-500 to-blue-400': progress.status === 'downloading' || progress.status === 'installing',
-              'bg-gradient-to-r from-orange-500 to-orange-400': progress.status === 'starting',
-              'bg-gradient-to-r from-green-500 to-green-400': progress.status === 'complete',
-              'bg-gradient-to-r from-red-500 to-red-400': progress.status === 'error'
-            }"
-            :style="{ width: `${progress.progress}%` }"
-          ></div>
-        </div>
-      </div>
-    </div>
-
       <!-- Desktop: tabs + categories + search -->
       <div class="hidden md:flex mb-4 items-center gap-4">
         <div class="mode-switcher flex-shrink-0">
@@ -228,21 +156,33 @@
                 Checking...
               </span>
             </span>
+            <!-- Installing — inline progress on card -->
+            <div
+              v-else-if="!isInstalled(app.id) && installingApps.has(app.id)"
+              class="flex-1"
+            >
+              <div class="flex items-center gap-2 mb-1.5">
+                <svg class="animate-spin h-4 w-4 text-blue-400 shrink-0" 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 class="text-sm text-white/80 truncate">{{ installingApps.get(app.id)?.message || t('common.installing') }}</span>
+                <span class="text-xs text-white/50 shrink-0">{{ installingApps.get(app.id)?.progress || 0 }}%</span>
+              </div>
+              <div class="w-full bg-white/10 rounded-full h-1.5 overflow-hidden">
+                <div
+                  class="h-full rounded-full transition-all duration-500 bg-blue-500"
+                  :style="{ width: `${installingApps.get(app.id)?.progress || 0}%` }"
+                ></div>
+              </div>
+            </div>
             <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"
+              class="flex-1 px-4 py-2 glass-button glass-button-sm rounded-lg text-sm font-medium"
             >
-              <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 || t('common.installing') }}
-              </span>
-              <span v-else>{{ t('common.install') }}</span>
+              {{ t('common.install') }}
             </button>
             <button
               v-else-if="!isInstalled(app.id)"
diff --git a/neode-ui/src/views/Server.vue b/neode-ui/src/views/Server.vue
index 6791222b..851de1d9 100644
--- a/neode-ui/src/views/Server.vue
+++ b/neode-ui/src/views/Server.vue
@@ -55,24 +55,24 @@
           </button>
         </div>
 
-        <!-- Connectivity Status -->
+        <!-- Tor Status -->
         <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">
             <div class="relative shrink-0">
-              <div class="w-3 h-3 rounded-full" :class="connectivityStatus === 'connected' ? 'bg-green-400' : connectivityStatus === 'checking' ? 'bg-yellow-400' : 'bg-red-400'"></div>
-              <div v-if="connectivityStatus === 'connected'" class="absolute inset-0 w-3 h-3 rounded-full bg-green-400 animate-ping opacity-75"></div>
+              <div class="w-3 h-3 rounded-full" :class="torStatusColor"></div>
+              <div v-if="torStatusLabel === 'running'" class="absolute inset-0 w-3 h-3 rounded-full bg-green-400 animate-ping opacity-75"></div>
             </div>
             <div class="min-w-0">
-              <p class="text-sm font-medium text-white">Connectivity</p>
-              <p class="text-xs text-white/60 capitalize">{{ connectivityStatus }}</p>
+              <p class="text-sm font-medium text-white">Tor Status</p>
+              <p class="text-xs text-white/60 capitalize">{{ torStatusLabel }}</p>
             </div>
           </div>
           <button
-            @click="checkConnectivity"
+            @click="checkTorStatus"
             class="w-full min-h-[44px] glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50 flex items-center justify-center"
-            :disabled="checkingConnectivity"
+            :disabled="checkingTor"
           >
-            {{ checkingConnectivity ? 'Checking...' : 'Check' }}
+            {{ checkingTor ? 'Checking...' : 'Check Tor' }}
           </button>
         </div>
 
@@ -324,16 +324,30 @@
       <!-- Tor Services -->
       <div class="glass-card p-6">
         <div class="flex items-center justify-between mb-4">
-          <div>
-            <h2 class="text-xl font-semibold text-white/96">Tor Services</h2>
-            <p class="text-sm text-white/60 mt-1">Manage hidden service addresses for your node and apps</p>
+          <div class="flex items-center gap-3">
+            <div class="relative shrink-0">
+              <div class="w-3 h-3 rounded-full" :class="torRunning ? 'bg-green-400' : 'bg-red-400'"></div>
+              <div v-if="torRunning" class="absolute inset-0 w-3 h-3 rounded-full bg-green-400 animate-ping opacity-75"></div>
+            </div>
+            <div>
+              <h2 class="text-xl font-semibold text-white/96">Tor Services</h2>
+              <p class="text-sm text-white/60 mt-1">Manage hidden service addresses for your node and apps</p>
+            </div>
+          </div>
+          <div class="flex items-center gap-2">
+            <button @click="cleanupRotatedServices" :disabled="torCleaning" 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="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>
+              {{ torCleaning ? 'Cleaning...' : 'Cleanup Old' }}
+            </button>
+            <button @click="loadTorServices" 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 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>
+              Refresh
+            </button>
           </div>
-          <button @click="loadTorServices" 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 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>
-            Refresh
-          </button>
         </div>
         <div v-if="torServicesLoading && torServices.length === 0" class="text-sm text-white/40 py-4 text-center">Loading Tor services...</div>
         <div v-else-if="torServices.length === 0" class="text-sm text-white/40 py-4 text-center">No Tor services configured</div>
@@ -782,6 +796,9 @@ interface TorServiceInfo {
 
 const torServices = ref<TorServiceInfo[]>([])
 const torServicesLoading = ref(false)
+const torCleaning = ref(false)
+
+const torRunning = computed(() => torServices.value.length > 0 && torServices.value.some(s => s.onion_address))
 
 async function loadTorServices() {
   torServicesLoading.value = true
@@ -824,6 +841,18 @@ async function rotateService(name: string) {
   }
 }
 
+async function cleanupRotatedServices() {
+  torCleaning.value = true
+  try {
+    await rpcClient.call({ method: 'tor.cleanup-rotated' })
+    await loadTorServices()
+  } catch (e) {
+    if (import.meta.env.DEV) console.warn('Failed to cleanup rotated Tor services:', e)
+  } finally {
+    torCleaning.value = false
+  }
+}
+
 onMounted(() => {
   checkConnectivity()
   loadNetworkData()