486fc39249
Phase 1a — Gradient Removal: - Replaced all gradient-button/gradient-card with glass-button/path-option-card - Removed banned gradient CSS classes Phase 1b — Security Hardening: - SecretsManager: AES-256-GCM encryption (core/security) - electrs_status: credentials from env vars instead of hardcoded - port_manager: RwLock proper error handling (no unwrap) - Pinned all 11 :latest manifest images to specific versions - parmanode converter: pinned inferred image versions Phase 1c — Code Quality: - Split rpc.rs (1795 lines) into 6 handler modules (auth, node, container, package, peers) - Removed sideload code (UI, store, RPC client, 3 doc files) - Fixed body background flash on logout/refresh - Replaced 30 TypeScript `any` types with proper types - Deleted HelloWorld.vue, removed TODO comments - Added set -euo pipefail to all shell scripts - Made deploy script verbose with timestamps and elapsed time Also adds: - CLAUDE.md project guide - docs/three-mode-ui-design.md — design spec for Easy/Pro/Chat UI modes - OnlineStatusPill component Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
378 lines
18 KiB
Markdown
378 lines
18 KiB
Markdown
# Three-Mode UI System: Easy / Pro / Chat
|
||
|
||
## Overview
|
||
|
||
Archipelago's UI will support three switchable modes, each targeting a different user experience level:
|
||
|
||
| Mode | Label in UI | Target User | What They See |
|
||
|------|-------------|-------------|---------------|
|
||
| **Pro** | Pro | Power users, developers, node operators | Current full interface — all services, configs, technical details |
|
||
| **Easy** | Easy | Complete beginners, non-technical users | Goal-based interface — "Open a Shop", "Store My Photos" |
|
||
| **Chat** | Chat | Everyone (future) | Conversational AI interface powered by AIUI |
|
||
|
||
### Key Principles
|
||
|
||
1. **Pro mode is preserved** — the current interface stays exactly as-is and continues to be improved
|
||
2. **Same URLs** — modes don't change route paths. `/dashboard` shows different content based on mode
|
||
3. **Cross-surfacing** — Easy mode goals are searchable from Spotlight (Cmd+K) and suggested in Pro mode
|
||
4. **Persistent preference** — mode choice saved to localStorage + backend UIData
|
||
|
||
---
|
||
|
||
## How Modes Work
|
||
|
||
### Architecture: Conditional Rendering
|
||
|
||
Rather than separate route trees (`/easy/home`, `/pro/home`), the mode controls **what renders within existing routes**:
|
||
|
||
```
|
||
Dashboard.vue (shared shell)
|
||
├── Sidebar → nav items change per mode
|
||
├── ModeSwitcher → always visible in sidebar
|
||
└── <RouterView>
|
||
└── Home.vue (dispatcher)
|
||
├── <GamerHome /> (Pro mode)
|
||
├── <EasyHome /> (Easy mode)
|
||
└── <ChatHome /> (Chat mode)
|
||
```
|
||
|
||
This means:
|
||
- Auth guards, WebSocket, stores — all shared
|
||
- URLs never change — bookmarks work regardless of mode
|
||
- Both modes use the same component library (glass-card, glass-button, etc.)
|
||
|
||
### Navigation Per Mode
|
||
|
||
**Pro Mode** (current, 7 items):
|
||
```
|
||
Home → My Apps → App Store → Cloud → Network → Web5 → Settings
|
||
```
|
||
|
||
**Easy Mode** (simplified, 3 items):
|
||
```
|
||
Home → My Services → Settings
|
||
```
|
||
|
||
**Chat Mode** (4 items):
|
||
```
|
||
Home → Chat → My Apps → Settings
|
||
```
|
||
|
||
---
|
||
|
||
## Easy Mode: Goal-Based Interface
|
||
|
||
### The Problem
|
||
|
||
Current interface says: "Here are 20+ services you can install. Figure out which ones you need, install them, configure them to talk to each other."
|
||
|
||
Easy mode says: **"What do you want to do?"**
|
||
|
||
### Goal Cards (Easy Mode Home)
|
||
|
||
When in Easy mode, the Home screen shows goal cards instead of the current 4 technical overview cards:
|
||
|
||
```
|
||
┌─────────────────────┐ ┌─────────────────────┐
|
||
│ 🏪 Open a Shop │ │ ⚡ Accept Payments │
|
||
│ │ │ │
|
||
│ Set up your own │ │ Receive Bitcoin & │
|
||
│ Bitcoin-powered │ │ Lightning payments │
|
||
│ online store │ │ │
|
||
│ │ │ ~30 min • Beginner │
|
||
│ ~45 min • Beginner │ │ ▸ Start │
|
||
│ ▸ Start │ └─────────────────────┘
|
||
└─────────────────────┘
|
||
┌─────────────────────┐ ┌─────────────────────┐
|
||
│ 📸 Store My Photos │ │ 📁 Store My Files │
|
||
│ │ │ │
|
||
│ Private photo │ │ Personal cloud │
|
||
│ backup & gallery │ │ storage & sync │
|
||
│ │ │ │
|
||
│ ~15 min • Beginner │ │ ~20 min • Beginner │
|
||
│ ▸ Start │ │ ▸ Start │
|
||
└─────────────────────┘ └─────────────────────┘
|
||
┌─────────────────────┐ ┌─────────────────────┐
|
||
│ ⚡ Lightning Node │ │ 🔑 Create Identity │
|
||
│ │ │ │
|
||
│ Run your own │ │ Sovereign DID & │
|
||
│ Lightning Network │ │ Nostr identity │
|
||
│ routing node │ │ │
|
||
│ │ │ ~5 min • Beginner │
|
||
│ ~40 min • Beginner │ │ ▸ Start │
|
||
│ ▸ Start │ └─────────────────────┘
|
||
└─────────────────────┘
|
||
┌─────────────────────┐
|
||
│ 💾 Back Up │
|
||
│ │
|
||
│ Encrypted backup │
|
||
│ of your entire │
|
||
│ node │
|
||
│ │
|
||
│ ~10 min • Beginner │
|
||
│ ▸ Start │
|
||
└─────────────────────┘
|
||
```
|
||
|
||
### Goal Workflow Wizard
|
||
|
||
Clicking a goal opens a **multi-step wizard** at `/dashboard/goals/:goalId`:
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────────┐
|
||
│ ← Back to Goals │
|
||
│ │
|
||
│ Open a Shop │
|
||
│ Set up your own Bitcoin-powered online store │
|
||
│ │
|
||
│ Step 2 of 4 │
|
||
│ ═══════════════════════▓▓▓░░░░░░░░░░░░ │
|
||
│ │
|
||
│ ┌─────────────────────────────────────────────────┐ │
|
||
│ │ ✅ Step 1: Install Bitcoin Node │ │
|
||
│ │ Bitcoin Core is running and syncing │ │
|
||
│ └─────────────────────────────────────────────────┘ │
|
||
│ ┌─────────────────────────────────────────────────┐ │
|
||
│ │ ⏳ Step 2: Install Lightning Network │ │
|
||
│ │ Installing LND... [45%] │ │
|
||
│ │ ████████████████████░░░░░░░░░░░░░ │ │
|
||
│ └─────────────────────────────────────────────────┘ │
|
||
│ ┌─────────────────────────────────────────────────┐ │
|
||
│ │ ○ Step 3: Install BTCPay Server │ │
|
||
│ │ Waiting for Lightning to be ready │ │
|
||
│ └─────────────────────────────────────────────────┘ │
|
||
│ ┌─────────────────────────────────────────────────┐ │
|
||
│ │ ○ Step 4: Set Up Your Store │ │
|
||
│ │ Configure your store name and settings │ │
|
||
│ └─────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ℹ️ Bitcoin needs to sync before Lightning can │
|
||
│ start. This takes 2-3 days on first run. │
|
||
│ │
|
||
└──────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**Smart features:**
|
||
- Steps already satisfied (app running from a previous goal) are auto-completed
|
||
- Dependency resolution: Bitcoin must be running before LND can start
|
||
- Real-time progress from WebSocket data patches
|
||
- `configure` steps open the app in the iframe launcher for the user to complete
|
||
|
||
### Goal Definitions
|
||
|
||
| Goal | What It Provisions | Estimated Time |
|
||
|------|-------------------|----------------|
|
||
| **Open a Shop** | Bitcoin Knots + LND + BTCPay Server | ~45 min |
|
||
| **Accept Payments** | Bitcoin Knots + LND | ~30 min |
|
||
| **Store My Photos** | Immich (photo management) | ~15 min |
|
||
| **Store My Files** | Nextcloud (cloud storage) | ~20 min |
|
||
| **Run a Lightning Node** | Bitcoin Knots + LND + channel setup | ~40 min |
|
||
| **Create My Identity** | Built-in DID + Nostr keypair | ~5 min |
|
||
| **Back Up Everything** | Built-in encrypted backup | ~10 min |
|
||
|
||
---
|
||
|
||
## Mode Switcher UI
|
||
|
||
### Desktop Sidebar
|
||
|
||
A compact three-segment toggle sits below the logo, above navigation:
|
||
|
||
```
|
||
┌──────────────────────┐
|
||
│ 🏝️ Archipelago │
|
||
│ v0.1.0 │
|
||
│ │
|
||
│ ┌──────┬──────┬────┐ │
|
||
│ │ Easy │ Pro │Chat│ │ ← Mode switcher
|
||
│ └──────┴──────┴────┘ │
|
||
│ │
|
||
│ ○ Home │
|
||
│ ○ My Apps │ ← Nav items change
|
||
│ ○ App Store │ per mode
|
||
│ ○ ... │
|
||
│ │
|
||
│ ⚙ Settings │
|
||
│ ↪ Logout │
|
||
│ ● Online │
|
||
└──────────────────────┘
|
||
```
|
||
|
||
### Settings Page
|
||
|
||
Full-width selection cards in a new "Interface Mode" section:
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────────┐
|
||
│ Interface Mode │
|
||
│ Choose how you want to interact with your node. │
|
||
│ │
|
||
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
|
||
│ │ │ │ ██████ │ │ │ │
|
||
│ │ Easy Mode │ │ Pro Mode │ │ Chat Mode │ │
|
||
│ │ │ │ (Active) │ │ (Soon) │ │
|
||
│ │ Goal-based │ │ Full │ │ AI chat │ │
|
||
│ │ guided │ │ control │ │ interface │ │
|
||
│ │ setup │ │ of all │ │ │ │
|
||
│ │ │ │ services │ │ │ │
|
||
│ └─────────────┘ └─────────────┘ └─────────────┘ │
|
||
└──────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
Uses the existing `.path-option-card` / `.path-option-card--selected` pattern from OnboardingPath.vue.
|
||
|
||
### Mobile
|
||
|
||
Mode switcher is in Settings only (bottom tab bar has limited space).
|
||
|
||
---
|
||
|
||
## Cross-Surfacing: Goals Everywhere
|
||
|
||
### Spotlight Search (Cmd+K)
|
||
|
||
Goals are added to the help tree and appear in search results regardless of mode:
|
||
|
||
```
|
||
┌──────────────────────────────────────┐
|
||
│ 🔍 shop │
|
||
│ │
|
||
│ Quick Start Goals │
|
||
│ 🚀 Open a Shop │
|
||
│ 🚀 Accept Payments │
|
||
│ │
|
||
│ Navigate │
|
||
│ → App Store │
|
||
│ │
|
||
│ Actions │
|
||
│ → Install an App │
|
||
└──────────────────────────────────────┘
|
||
```
|
||
|
||
### Pro Mode Home
|
||
|
||
A "Quick Start Goals" section appears at the bottom of Pro mode's Home, giving power users easy access to the guided workflows:
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────────┐
|
||
│ Quick Start Goals │
|
||
│ Not sure where to start? Try a guided setup. │
|
||
│ │
|
||
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
|
||
│ │ Open a Shop │ │ Accept │ │ Store Photos │ │
|
||
│ │ │ │ Payments │ │ │ │
|
||
│ └──────────────┘ └──────────────┘ └──────────────┘ │
|
||
└──────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## Chat Mode (Placeholder)
|
||
|
||
For now, Chat mode shows a placeholder with a disabled input:
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────────┐
|
||
│ │
|
||
│ 💬 AI Assistant │
|
||
│ │
|
||
│ Conversational interface coming soon. │
|
||
│ Talk to your node, ask questions, and │
|
||
│ manage everything through natural language. │
|
||
│ │
|
||
│ ┌──────────────────────────────────────┐ │
|
||
│ │ What would you like to do? │ │
|
||
│ └──────────────────────────────────────┘ │
|
||
│ │
|
||
│ AIUI integration in development │
|
||
│ │
|
||
└──────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
When AIUI is integrated, this becomes the conversational interface where users can say things like "Set up a Lightning node" and the system guides them through it via chat.
|
||
|
||
---
|
||
|
||
## Data Model
|
||
|
||
### UIMode Type
|
||
|
||
```typescript
|
||
type UIMode = 'gamer' | 'easy' | 'chat'
|
||
```
|
||
|
||
Stored in:
|
||
- `localStorage` as `archipelago-ui-mode` (immediate, works offline)
|
||
- `UIData.mode` on the backend (synced via WebSocket, persists across devices)
|
||
|
||
### Goal Types
|
||
|
||
```typescript
|
||
interface GoalDefinition {
|
||
id: string // 'open-a-shop'
|
||
title: string // 'Open a Shop'
|
||
subtitle: string // 'Accept Bitcoin payments with your own store'
|
||
icon: string // Icon identifier
|
||
category: string // 'commerce', 'payments', 'storage', etc.
|
||
requiredApps: string[] // ['bitcoin-core', 'lnd', 'btcpay-server']
|
||
steps: GoalStep[] // Sequential steps
|
||
estimatedTime: string // '~45 minutes'
|
||
difficulty: 'beginner' | 'intermediate'
|
||
}
|
||
|
||
interface GoalStep {
|
||
id: string
|
||
title: string // 'Install Bitcoin Node'
|
||
description: string
|
||
appId?: string // Which app this step provisions
|
||
action: 'install' | 'configure' | 'verify' | 'info'
|
||
isAutomatic: boolean // Can system do this without user input?
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## Implementation Order
|
||
|
||
| Phase | What | Files Changed | Visible Effect |
|
||
|-------|------|--------------|----------------|
|
||
| 1 | Data layer | types, stores, data files | None (foundation) |
|
||
| 2 | Mode switching | Dashboard, Settings, Router | Mode toggle appears, nav changes |
|
||
| 3 | Easy mode views | Home refactor, EasyHome, GoalDetail | Easy mode is functional |
|
||
| 4 | Chat + polish | Chat placeholder, Spotlight goals, Pro goals section | Complete system |
|
||
|
||
Each phase deploys independently. Phase 1 is invisible. Phase 2 adds the switcher. Phase 3 makes Easy mode work. Phase 4 polishes everything.
|
||
|
||
---
|
||
|
||
## File Inventory
|
||
|
||
### New Files (10)
|
||
```
|
||
src/types/goals.ts — Goal type definitions
|
||
src/data/goals.ts — Goal catalog (7 goals)
|
||
src/stores/uiMode.ts — UI mode Pinia store
|
||
src/stores/goals.ts — Goal progress tracking
|
||
src/components/ModeSwitcher.vue — Mode toggle widget
|
||
src/components/GamerHome.vue — Extracted current Home content
|
||
src/components/EasyHome.vue — Easy mode goal cards
|
||
src/components/ChatHome.vue — Chat mode home wrapper
|
||
src/views/GoalDetail.vue — Goal workflow wizard
|
||
src/views/Chat.vue — Chat placeholder
|
||
```
|
||
|
||
### Modified Files (11)
|
||
```
|
||
src/types/api.ts — Add UIMode type + mode field to UIData
|
||
src/router/index.ts — Add goals/:goalId and chat routes
|
||
src/views/Dashboard.vue — Computed nav items, ModeSwitcher in sidebar
|
||
src/views/Home.vue — Mode dispatcher (GamerHome/EasyHome/ChatHome)
|
||
src/views/Settings.vue — Interface Mode selection section
|
||
src/data/helpTree.ts — Goals in Spotlight search
|
||
src/style.css — Mode switcher, goal card, wizard CSS
|
||
src/stores/app.ts — Sync mode from backend
|
||
src/api/rpc-client.ts — setUIMode() RPC method
|
||
src/components/SpotlightSearch.vue — Visual indicator for goal items
|
||
mock-backend.js — ui.set-mode handler
|
||
```
|