archipelagoandClaude Opus 5
a5b923fa0b
Demo images / Build & push demo images (push) Successful in 3m30s
Reported: the nav above the bottom bar — back buttons, the mesh tabs —
stayed stuck across other screens.
Cause is the KeepAlive work from phase 2, and specifically the half of it
that is invisible from the view's own file. Main tabs are KeepAlive'd, so
navigating DEACTIVATES a view instead of unmounting it. Content the view
Teleports to <body> is not in the view's DOM subtree, so deactivation
does not remove it and it keeps rendering over the destination screen.
Two offenders, matching the report exactly:
- Mesh.vue teleports its mobile TAB BAR and its chat BACK BUTTON to
<body>, gated only on `mobileShowChat` — never on whether Mesh was the
screen you were looking at.
- components/BackButton.vue teleports the shared mobile back button with
NO gate at all, so it leaked out of every view that uses it. Fixing the
shared component fixes every caller at once: Vue propagates
activated/deactivated from the KeepAlive boundary down through the
subtree, so a child can guard itself.
BaseModal already solved the transient-dialog half of this class in
204d4523 by closing on route change. That is the right fix for a dialog
and the wrong one for chrome: a tab bar has no "closed" state to fall
back to, and forcing one would lose the user's place. New
useViewActive() composable instead — chrome is simply not rendered while
its owner is off screen, and returns exactly as it was.
THE PERFORMANCE IS NOT SACRIFICED, which was the explicit constraint.
The Teleport is gated, not the view, so the instance stays cached and
revisiting a tab is still instant. A test pins this: setup() must run
exactly ONCE across a navigate-away-and-back round trip. If someone
later "fixes" this by dropping KeepAlive, that test fails.
Deliberately untouched: AppSession.vue, whose teleport is load-bearing —
its own comment records that moving the iframe node reloads the app, and
app-session is excluded from KeepAlive anyway so it cannot leak. Toasts,
the app launcher and the connection banner are app-level rather than
view-owned; gating those would be wrong.
Verified: 3 new tests; full suite 105 files / 848 tests green.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Archipelago Web UI
Vue 3 + TypeScript + Vite + Tailwind CSS + Pinia
The web interface for Archipelago — a self-sovereign Bitcoin Node OS.
Quick Start
cd neode-ui
npm install
npm start
Visit http://localhost:8100 — login with password: password123
This starts:
- Mock backend on port 5959 (no Docker required)
- Vite dev server on port 8100 with HMR
Stop with npm stop.
Architecture
neode-ui/
├── src/
│ ├── api/ # RPC client (rpc-client.ts), WebSocket, container client
│ ├── stores/ # Pinia stores (app, container, appLauncher, monitoring)
│ ├── views/ # Page components (Dashboard, Marketplace, Settings, etc.)
│ ├── components/ # Reusable components (SplashScreen, AppSession, etc.)
│ ├── router/ # Vue Router configuration
│ ├── types/ # TypeScript type definitions
│ └── style.css # Global styles + Tailwind utilities
├── public/assets/ # Static assets (images, fonts, app icons, audio)
├── mock-backend.js # Mock backend server (simulates Rust backend)
├── docker/ # Docker configs (nginx, entrypoint)
└── vite.config.ts # Vite config with backend proxy
Dev Modes
The mock backend supports multiple startup modes via VITE_DEV_MODE:
| Mode | Command | Behavior |
|---|---|---|
| default | npm start |
Fully set up, login screen |
| existing | VITE_DEV_MODE=existing npm run dev:mock |
Same as default |
| setup | VITE_DEV_MODE=setup npm run dev:mock |
First-time password setup flow |
| onboarding | VITE_DEV_MODE=onboarding npm run dev:mock |
Post-setup onboarding flow |
| boot | npm run dev:boot |
25s simulated boot sequence |
Mock Backend
The mock backend (mock-backend.js) simulates the full Rust backend for local development:
Pre-installed apps (always visible in My Apps):
- Bitcoin Core, LND, Electrs, Mempool, FileBrowser, LoraBell, Fedimint
Marketplace: 30+ curated apps with Docker images, install/uninstall simulation
Features simulated:
- Authentication (login, password change, TOTP 2FA)
- System metrics (CPU, memory, disk — randomized for realism)
- Node identity (DID, Nostr pubkey, Tor address)
- Federation (3 mock nodes with apps, metrics, trust levels)
- Mesh networking (4 LoRa peers, encrypted messaging, invoices)
- Peer-to-peer messaging
- FileBrowser API (mock file system with Music, Documents, Photos, Videos)
- DWN sync status
- Transport layer (mesh/LAN/Tor routing)
- Notifications (5 realistic entries)
- Claude AI chat proxy (requires
ANTHROPIC_API_KEY)
Container runtime: If Docker/Podman is available, the mock backend will run real containers for installed apps. Otherwise, it simulates them.
Demo Deployment (Portainer)
Deploy the demo via Docker Compose for showcasing:
docker compose -f docker-compose.demo.yml build
docker compose -f docker-compose.demo.yml up -d
Or deploy through Portainer Stacks:
- Stacks > Add stack > name:
archy-demo - Web editor: paste
docker-compose.demo.ymlcontents - Add environment variable:
ANTHROPIC_API_KEY(for Claude chat) - Deploy
Access at http://your-host:4848 — password: password123
Development Commands
npm start # Start mock backend + Vite (recommended)
npm stop # Stop all servers
npm run dev:mock # Same as start, without port cleanup
npm run dev:boot # Boot mode (simulated startup delay)
npm run backend:mock # Mock backend only
npm run dev # Vite only (needs backend running separately)
npm run dev:real # Vite with real Rust backend
npm run build # Production build (outputs to ../web/dist/neode-ui/)
npm run build:docker # Build for Docker (no type checking)
npm run type-check # TypeScript type checking
npm test # Run tests
Design System
Glass Classes
| Class | Use |
|---|---|
.glass-card |
Content containers, modals, panels |
.glass-button |
ALL buttons (primary and secondary) |
.path-option-card |
Interactive cards with hover lift |
.info-card |
Status badges, metric displays |
Tokens
- Font: Avenir Next (primary), Montserrat (
font-archipelago) - Glass:
bg: rgba(0,0,0,0.60),blur: 24px,border: rgba(255,255,255,0.22) - Accent:
#fb923c(Bitcoin orange),#4ade80(green),#ef4444(red) - Text:
rgba(255,255,255,0.9)primary,rgba(255,255,255,0.6)muted
Rules
- Global CSS classes in
style.cssonly — never inline Tailwind in components .gradient-buttonis banned — use.glass-button- All components use
<script setup lang="ts">
API
import { rpcClient } from '@/api/rpc-client'
await rpcClient.login('password')
await rpcClient.startPackage('bitcoin')
const metrics = await rpcClient.getMetrics()
State management via Pinia stores. WebSocket patches applied automatically.
Build Output
- Dev build:
../web/dist/neode-ui/ - Docker build:
dist/(deployed to nginx) - Production deploy: via
scripts/deploy-to-target.sh --live
License
MIT