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>
This commit is contained in:
co-authored by
Claude Opus 4.6
parent
623c0fa954
commit
83dfed17c0
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user