The frontend is a Single Page Application (SPA) built with React, Vite, and TailwindCSS. It communicates with the FastAPI backend to provide a rich, reactive interface for the agent.

📁 Folder Structure

The web/ directory is structured by feature domain (Phase 6+):

web/
├── package.json
├── vite.config.js
├── tailwind.config.js
├── src/
│   ├── App.jsx             # Main Component
│   ├── index.jsx           # Entry logic
│   ├── context/            # Global State
│   │   └── PersonaContext.jsx # Global emotion/persona state
│   ├── chat/               # Chat Components
│   │   ├── FollowUpChat.jsx
│   │   └── ...
│   ├── emotion/            # Emotion UI Components
│   │   ├── EmotionOverlay.jsx
│   │   ├── EmotionBadge.jsx
│   │   └── ...
│   └── ...

2. Setup & Installation

📦 Prerequisites

Node.js: v16+ (Recommended)
npm or yarn

📥 Install Dependencies

Navigate to the web directory and install dependencies:

cd web
npm install

Key dependencies:

react, react-dom
axios (API requests)
tailwindcss, postcss, autoprefixer (Styling)

3. Running Development Server

To start the Vite development server:

npm run dev

The UI will be available at http://localhost:5173 (default).

4. Key Features & Components

🎭 Persona & Context

PersonaContext.jsx: Wraps the application to provide global access to the current persona and userEmotion.
App.jsx: Consumes PersonaContext to dynamically change the background theme/gradient based on the agent's mood.

💬 Chat Interface

FollowUpChat.jsx: The main chat window. It renders messages and handles user input. It also listens for emotion updates from the backend response to trigger UI state changes.

🎨 Styling

TailwindCSS: Used for all styling.
Emotion Overlays: emotion/EmotionOverlay.jsx provides visual feedback (e.g., color shifts, particles) based on the detected emotion.

6. Mission Control & Gradio (Phase 10/11)

The Mission Control dashboard acts as the central hub for multi-agent coordination.

📊 Live Monitoring

Gradio Integration: A live monitoring feed is embedded in web/src/dashboard/MissionControl.jsx.
Telemetry: Real-time activity traces and trust scores are fetched from the /api/crew endpoints and displayed in reactive widgets.

🔧 Automation Hub

Browser Automation: Integrated with Playwright for agentic web navigation.
Connectors: Supports IMAP (Email) and CalDAV (Calendar) sync via the backend orchestration layer.

2.9 KiB Raw Permalink Blame History

🌐 Web UI Development Guide

1. Project Overview