# Epic: Frontend / Dashboard

## DESCRIPTION
Real-time cost savings dashboard (TUI + web), model catalog, node management, gamification. The dashboard shows HONEST savings with real baselines (not strawman "would have cost X on OpenAI") and routing decision TRANSPARENCY so users understand and trust the router's intelligence.

**COURSE CORRECTION (2026-02-14)**: Fixed savings ticker to use real baselines instead of strawman comparisons. Added routing decision transparency (shows WHY a model was chosen). Anthropic API support. Pricing updated to $19 Pro / $49 Team / $50 Enterprise (no credits, flat subscription). Savings messaging: 30-50% typical (not inflated 60%).

## BACKLOG ITEMS

### FE-001: Terminal UI Dashboard (TUI)
- **Priority**: P0
- **Phase**: 1
- **Status**: BACKLOG
- **Description**: Rich terminal UI (textual/rich library) shown alongside `llmhosts serve`. Live: savings ticker, request log with ROUTING DECISIONS, cache hits per tier, backend health.
- **Acceptance**: TUI updates in real-time. Shows savings counter, last 10 requests with routing explanations, cache hit rate per tier, backend status.
- **Dependencies**: CB-003 (cost tracking), CB-012 (metrics)

### FE-002: Localhost Web Dashboard
- **Priority**: P0
- **Phase**: 1
- **Status**: BACKLOG
- **Description**: React web dashboard on localhost:4000/dashboard. WebSocket for real-time updates. Savings ticker, request history with routing decisions, backend status, cache stats per tier.
- **Acceptance**: Dashboard shows live savings with REAL baseline comparisons. Routing decisions visible per request.
- **Dependencies**: CB-003, FE-001 data

### FE-003: Honest Real-Time Savings Ticker
- **Priority**: P0
- **Phase**: 1
- **Status**: BACKLOG
- **Description**: THE core emotional hook, but HONEST. NOT "would have cost $X on OpenAI" strawman. Instead: track what user ACTUALLY spent before LLMHosts (onboarding baseline), show real comparison. Per-request: show the ROUTING DECISION with reasoning. Example: "This month: $47 total. Without LLMHosts: estimated $130. Saved: $83 (64%)". Per-request: "Routed to local Llama-3.2:8b (quality: sufficient, cost: $0.00)" or "Routed to Claude via BYOK (quality: required, cost: $0.04)". Honest range: 30-50% savings typical.
- **Acceptance**: Counter updates within 1 second. Uses real baseline (not strawman). Per-request routing explanation visible. Monthly comparison prominent.
- **Dependencies**: CB-003, CB-011 (routing explanation)

### FE-020: Routing Decision Transparency
- **Priority**: P0
- **Phase**: 1
- **Status**: BACKLOG
- **Description**: Every request in the dashboard shows the router's DECISION and WHY. Components: which tier handled it (rule/kNN/ModernBERT/Qwen), confidence score, factors considered (cost, quality, latency, privacy), model chosen, alternatives considered. Expandable detail view. This is what makes the router's INTELLIGENCE visible and builds trust.
- **Acceptance**: Every request shows: tier used, model chosen, reason, confidence. Users can see "this request was complex, routed to cloud" vs "this was simple, handled locally."
- **Dependencies**: CB-011, CB-012

### FE-021: Onboarding Baseline Capture
- **Priority**: P0
- **Phase**: 1
- **Status**: BACKLOG
- **Description**: During first-run, ask user: "How much do you currently spend on AI tools per month?" Options: $0-50, $50-100, $100-200, $200+. This becomes the REAL baseline for savings comparison. Can also import from cloud provider billing APIs (OpenAI usage page).
- **Acceptance**: Baseline captured on first run. Used in all savings calculations. Adjustable in settings.
- **Dependencies**: OB-002

### FE-004: Model Catalog
- **Priority**: P1
- **Phase**: 2
- **Status**: BACKLOG
- **Description**: Browse available models (local Ollama + cloud APIs). Show: name, size, capabilities, cost, availability, router's assessment of when each is used.
- **Acceptance**: Users see all models with router intelligence: "Used for 45% of your code completion requests."
- **Dependencies**: CF-001, CF-003

### FE-005: Node Status Dashboard
- **Priority**: P1
- **Phase**: 2
- **Status**: BACKLOG
- **Description**: Real-time visualization of all compute nodes including tunnel-connected remote devices. GPU/CPU/RAM utilization, models loaded, latency, health.
- **Acceptance**: Users see all devices (local + tunnel-connected), current load, served models.
- **Dependencies**: CF-006, CF-016

### FE-006: Cost Savings Analytics
- **Priority**: P1
- **Phase**: 2
- **Status**: BACKLOG
- **Description**: Deep analytics with HONEST comparisons. Before/after using REAL baseline. Per-model cost attribution. Projected annual savings. ROI on hardware. Cross-provider comparison (cloud dashboard, paid tier).
- **Acceptance**: Detailed breakdown of savings. Annual projection. Hardware ROI calculator.
- **Dependencies**: CB-003, user accounts

### FE-007: Chat Interface
- **Priority**: P1
- **Phase**: 2
- **Status**: BACKLOG
- **Description**: Web chat with streaming. Model selection. Routing explanation visible per message. Secondary to proxy API.
- **Acceptance**: Chat works. Routing decisions visible. Streaming works.
- **Dependencies**: CB-001, user accounts

### FE-008: User Preference Profile UI
- **Priority**: P1
- **Phase**: 2
- **Status**: BACKLOG
- **Description**: Web UI for routing preferences, model preferences, cost/privacy settings, cache delta threshold.
- **Acceptance**: Users set preferences via web. Routing respects them.
- **Dependencies**: CB-006, user accounts

### FE-009: Feedback System
- **Priority**: P1
- **Phase**: 2
- **Status**: BACKLOG
- **Description**: Thumbs up/down on responses. Quality ratings. Feeds into router retraining (kNN + ModernBERT).
- **Acceptance**: Every response has feedback. Data feeds into router improvement.
- **Dependencies**: FE-007

### FE-010: BYOK Management UI
- **Priority**: P1
- **Phase**: 2
- **Status**: BACKLOG
- **Description**: Web UI for managing cloud API keys. Visual status of providers.
- **Acceptance**: Users manage keys via web. Connection status visible.
- **Dependencies**: CF-003, user accounts

### FE-011: Activity Logs
- **Priority**: P1
- **Phase**: 2
- **Status**: BACKLOG
- **Description**: Request history with routing decisions, costs, latency, models, tier used.
- **Acceptance**: Full audit trail searchable and filterable. Export for paid tier.
- **Dependencies**: CB-012

### FE-012: Auth System (Web)
- **Priority**: P0
- **Phase**: 2
- **Status**: BACKLOG
- **Description**: User registration, login, session management, API key generation. Required for Phase 2+ features.
- **Acceptance**: Secure auth with email/password. OAuth optional.
- **Dependencies**: None

### FE-013: Pricing Page
- **Priority**: P1
- **Phase**: 2
- **Status**: BACKLOG
- **Description**: Transparent pricing: Free (open source) / Pro $19/mo / Team $49/seat/mo / Enterprise $50/user/mo. All self-serve. Feature comparison emphasizing: "Algorithms free. Pay for data intelligence + coordination."
- **Acceptance**: All pricing visible. No "contact us" trap. Self-serve checkout.
- **Dependencies**: Stripe integration

### FE-014: Billing Integration (Stripe)
- **Priority**: P1
- **Phase**: 2
- **Status**: BACKLOG
- **Description**: Stripe integration: checkout, billing portal, invoices, upgrade/downgrade. Flat subscription (no credits, no usage-based).
- **Acceptance**: Users subscribe and manage billing. Clean upgrade path.
- **Dependencies**: FE-013, FE-012

### FE-015: Gamification Elements
- **Priority**: P1
- **Phase**: 3
- **Status**: BACKLOG
- **Description**: Savings milestones, streaks, badges, shareable achievement cards.
- **Acceptance**: Users earn achievements. Shareable cards for social media.
- **Dependencies**: FE-003, FE-006

### FE-016: Hive Mode Dashboard
- **Priority**: P1
- **Phase**: 3
- **Status**: BACKLOG
- **Description**: Hive views: create/manage Hive, invite members, karma scores, shared nodes.
- **Acceptance**: Hive admin and members see shared pool, karma, group savings.
- **Dependencies**: Hive Mode epic

### FE-017: Admin Panel
- **Priority**: P1
- **Phase**: 3
- **Status**: BACKLOG
- **Description**: Platform admin: user management, system health, support.
- **Acceptance**: Admin sees system metrics, manages users.
- **Dependencies**: FE-012

### FE-018: Landing Page
- **Priority**: P0
- **Phase**: 3
- **Status**: BACKLOG
- **Description**: Public landing: hero ("Your hardware. Real AI infrastructure. From anywhere."), demo video, pricing, testimonials. Primary CTA: `pip install llmhosts`. Secondary: `llmhosts tunnel` demo.
- **Acceptance**: Landing page live. Clear value prop. CTA: pip install.
- **Dependencies**: Pricing page

### FE-019: Savings Sharing (Social)
- **Priority**: P2
- **Phase**: 3
- **Status**: BACKLOG
- **Description**: "Share my savings" + "Share my tunnel setup" features for social media.
- **Acceptance**: Branded shareable cards generated.
- **Dependencies**: FE-003
