# 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 └── └── Home.vue (dispatcher) ├── (Pro mode) ├── (Easy mode) └── (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 ```