FRONTEND_UI_IMPROVEMENT_PHASES.md

Pierre Frontend UI Improvement Phases

Branch: feature/frontend-vertical-sidebar

Overview

Transform the Pierre Admin Frontend with a vertical sidebar navigation and full alignment with BRAND.md design system.

Bug Fix (Pre-Phase - COMPLETED)

• Fix check_setup_status() in src/auth.rs - was checking hardcoded admin@pierre.mcp instead of any user with is_admin=true

---

Phase 1: Design System Foundation (COMPLETED)

Goal: Establish reusable UI components following BRAND.md

Completed

• Tailwind config with Pierre colors (pierre-violet, pierre-cyan, pierre-activity, pierre-nutrition, pierre-recovery)
• Reusable UI components in frontend/src/components/ui/:
  • Button.tsx
  • Card.tsx
  • Badge.tsx
  • StatusIndicator.tsx
  • Input.tsx, Select.tsx, Slider.tsx
  • Modal.tsx
  • Tabs.tsx
  • Toast.tsx
  • Skeleton.tsx (loading states)
• Visual testing of all Phase 1 components
• Verified Pierre violet (#7C3AED) and cyan (#06B6D4) usage
• Verified three-pillar colors (Activity/Emerald, Nutrition/Amber, Recovery/Indigo)
• Fixed test regressions (API endpoint path, Dashboard tests)

---

Phase 2: Vertical Sidebar Navigation (COMPLETED)

Goal: Replace horizontal navigation with collapsible vertical sidebar

Completed

• Vertical sidebar in Dashboard.tsx with:
  • Pierre logo at top
  • Collapsible navigation with toggle button
  • Active state with violet highlight
  • Hover states with subtle background
• Navigation structure: Overview, Connections, Analytics, Monitor, Tools, Users
• Admin-only Users tab with pending badge
• Responsive behavior (collapsible sidebar)

---

Phase 3: Dashboard Redesign

Goal: Modern dashboard with Pierre branding

Tasks

• Stats cards with pillar colors for metrics
• Connection status cards with provider icons
• Real-time activity feed
• Usage charts with Pierre color scheme
• Quick action buttons

---

Phase 4: List/Table Components

Goal: Consistent data display across all management pages

Tasks

• Refactor UserManagement.tsx with new design system
• Refactor AdminTokenList.tsx
• Refactor A2AClientList.tsx
• Refactor ApiKeyList.tsx
• Refactor UnifiedConnections.tsx
• Consistent empty states
• Loading skeletons

---

Phase 5: Forms & Polish

Goal: Consistent form experience with proper validation

Tasks

• Refactor Login.tsx with Pierre design
• Refactor registration forms
• Refactor admin token creation
• Refactor API key creation
• Form validation with error states
• Success/error toast notifications

---

Server Commands

Backend

```bash DATABASE_URL="sqlite:./data/users.db" HTTP_PORT=8082 RUST_LOG=info cargo run --bin pierre-mcp-server ```

Frontend

```bash cd frontend && VITE_BACKEND_URL=http://localhost:8082 npm run dev ```

Admin Setup

```bash cargo run --bin admin-setup -- create-admin-user --email admin@pierre.mcp --password adminpass123 ```

---

Key Files

• frontend/BRAND.md - Design system reference
• frontend/src/components/ui/ - UI components
• frontend/src/App.tsx - Main app layout
• frontend/src/components/Dashboard.tsx - Dashboard with vertical sidebar