lfg2025/archy
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases 44 Wiki Activity

feat: Tor status + cleanup, Tailscale admin, marketplace install UX

Browse Source 
- 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:
Dorian 2026-03-19 16:38:11 +00:00
parent 623c0fa954
commit 83dfed17c0
4 changed files with 71 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
neode-ui/src/views/AppSession.vue
View File

@ -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))

2
neode-ui/src/views/Apps.vue
View File

@ -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 {

104
neode-ui/src/views/Marketplace.vue
View File

@ -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)"

63
neode-ui/src/views/Server.vue
View File

@ -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()