Frontend Features

The AnyaSelf frontend is organized into 13 feature modules under src/features/. Each module is a self-contained directory with its own page component and any related logic.

Feature Map

graph TB
  subgraph Public["Public Routes"]
    LAND["🏠 Landing<br/>landing-page.tsx"]
    LOGIN["🔐 Login<br/>login-page.tsx"]
  end

  subgraph Core["Core Experience"]
    DASH["📊 Dashboard<br/>dashboard-page.tsx"]
    BOUT["🏪 Boutique<br/>boutique-page.tsx"]
    WARD["👗 Wardrobe<br/>wardrobe-page.tsx"]
    MISS["🤖 Missions<br/>mission-studio-page.tsx"]
  end

  subgraph Shopping["Shopping Flow"]
    BUY["💳 BuyFlow<br/>buy-flow-page.tsx"]
    REQ["📋 Requests<br/>requests-page.tsx"]
    HB["🌐 Hyperbeam<br/>hyperbeam-page.tsx"]
  end

  subgraph AI["AI Features"]
    VTO_F["🎨 VTO<br/>vto-page.tsx"]
    VOICE["🎙️ Voice<br/>aura-bubble.tsx"]
  end

  subgraph Setup["Setup"]
    ONBOARD["📝 Onboarding<br/>onboarding-page.tsx"]
    SETTINGS["⚙️ Settings<br/>settings-page.tsx"]
  end

🏠 Landing (/landing)

The public landing page showcasing AnyaSelf's capabilities. Includes the Unsplash-powered public discover feed and an introduction to the platform.

Files: landing-page.tsx

🔐 Login (/login)

Firebase Authentication integration with Google Sign-In. Redirects authenticated users to /dashboard.

Files: login-page.tsx

📝 Onboarding (/onboarding)

Multi-step onboarding wizard for new users. Collects style preferences, body profile, and initial wardrobe seed data.

Files:

📊 Dashboard (/dashboard)

The main hub after login. Shows household overview, recent missions, pending requests, and quick-action cards.

Files: dashboard-page.tsx

🏪 Boutique (/boutique)

Visual grid for browsing styled outfits, discovery-mode fashion inspiration, and outfit stands grouped by member/season/occasion.

Files: boutique-page.tsx

🤖 Missions (/missions)

The Mission Studio — the primary chat interface for interacting with the AnyaSelf AI agent. Shows conversation history, agent plan execution, embedded Hyperbeam sessions, and tool call results.

Files: mission-studio-page.tsx

👗 Wardrobe (/wardrobe)

Personal wardrobe management. CRUD for items with image uploads, outfit composition, category/season filtering, and discover feed with like/save/impression engagement.

Files: wardrobe-page.tsx

🎨 VTO (/vto)

Virtual Try-On interface. Users select a person image and a garment image, submit a VTO job, and view the blended result. Includes "The Look" panel for outfit context.

Files: vto-page.tsx

🌐 Hyperbeam (/hyperbeam)

Embedded Hyperbeam browser view. Displays the interactive cloud browser iframe with takeover controls. Users and the AI agent can both interact with external retailer websites.

Files:

💳 BuyFlow (/buyflow)

The end-to-end purchase flow. Guides users through purchase request creation, guardian approval, cart preparation status, and final checkout confirmation.

Files: buy-flow-page.tsx

📋 Requests (/requests)

Purchase request management for guardians. Lists pending/approved/completed requests with approval/rejection actions.

Files: requests-page.tsx

⚙️ Settings (/settings)

User and household configuration. Profile editing, member management, and display preferences.

Files: settings-page.tsx

🎙️ Voice — Aura Bubble

The global Aura AI voice assistant, rendered as a floating bubble overlay on every page. Connects to Gemini Live via the API Gateway's WebSocket proxy.

Files:

The Aura bubble follows the Model B voice architecture:

1. Client captures speech → Gemini Live transcribes to text
2. Text is sent to orchestrator mission /chat endpoint
3. Response is spoken via Gemini Live TTS
4. User interrupt (barge-in) stops TTS and sends new turn

Shared Libraries

Located in src/lib/: