# MONIKA Frontend

A comprehensive, modern web interface for the MONIKA salience-driven AI system. This frontend provides real-time monitoring, conversation interface, memory management, training controls, and system administration capabilities.

## Features

### 🧠 **Dashboard**
- Real-time metrics monitoring (confidence, ROI, runtime steps)
- Interactive salience channel visualizations
- Controller action priorities and scores
- System status and resource utilization
- Recent activity timeline

### 💬 **Conversation Interface**
- Direct interaction with MONIKA
- Real-time response confidence metrics
- Salience-driven response analysis
- Beautiful chat interface with typing indicators

### 🗄️ **Memory Management**
- Browse facts, hypotheses, and todos
- Search and filter memory items
- Edit and delete memory entries
- Metadata and scoring visualization

### 🎓 **Training Center**
- Monitor training progress in real-time
- Control training batches and checkpoints
- Performance metrics and loss tracking
- GPU and resource utilization

### ⚙️ **System Monitor**
- CPU, GPU, memory, storage monitoring
- Network performance tracking
- Service status management
- Temperature and power monitoring
- Alert system for system events

### 🔧 **Settings**
- General interface configuration
- MONIKA behavior parameters
- Privacy and data controls
- Notification preferences

## Technology Stack

- **React 18** - Modern UI framework
- **Vite** - Fast build tool and dev server
- **TailwindCSS** - Utility-first CSS framework
- **Framer Motion** - Smooth animations and transitions
- **Recharts** - Data visualization and charts
- **Lucide React** - Beautiful icon library
- **React Query** - Server state management
- **Zustand** - Client state management

## Getting Started

### Prerequisites

- Node.js 18+ 
- npm or yarn package manager

### Installation

1. Clone the repository:
```bash
git clone <repository-url>
cd MONIKA/frontend
```

2. Install dependencies:
```bash
npm install
```

3. Start the development server:
```bash
npm run dev
```

4. Open your browser and navigate to `http://localhost:3000`

### Build for Production

```bash
npm run build
```

The built files will be in the `dist` directory.

## Configuration

The frontend is configured to communicate with the MONIKA backend through API calls. Update the proxy configuration in `vite.config.js` to match your backend server:

```javascript
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000', // Update this to your backend URL
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})
```

## Architecture

### Component Structure

```
src/
├── components/          # Reusable UI components
│   ├── MetricCard.jsx
│   ├── SalienceChart.jsx
│   ├── ControllerActions.jsx
│   ├── SystemStatus.jsx
│   └── RecentActivity.jsx
├── pages/              # Main application pages
│   ├── Dashboard.jsx
│   ├── Conversation.jsx
│   ├── Memory.jsx
│   ├── Training.jsx
│   ├── System.jsx
│   └── Settings.jsx
├── hooks/              # Custom React hooks
├── utils/              # Utility functions
└── styles/             # Global styles and configurations
```

### Design System

The frontend uses a custom design system built on TailwindCSS with:

- **Color Palette**: Purple/violet theme with salience-based color coding
- **Glass Morphism**: Translucent cards with backdrop blur
- **Micro-interactions**: Smooth hover states and transitions
- **Responsive Design**: Mobile-first approach with breakpoints

### State Management

- **React Query**: For server state and API caching
- **Zustand**: For client-side state management
- **Local State**: For component-specific state

## API Integration

The frontend is designed to integrate with MONIKA's MCP (Model Context Protocol) server. Key API endpoints include:

- `/api/conversation` - Chat interactions
- `/api/memory` - Memory management
- `/api/training` - Training control
- `/api/system` - System monitoring
- `/api/metrics` - Real-time metrics

## Contributing

1. Follow the existing code style and patterns
2. Use meaningful component and variable names
3. Add proper TypeScript types (when migrating to TS)
4. Test on different screen sizes
5. Ensure accessibility standards are met

## License

This project is part of the MONIKA system. See the main project license for details.

## Support

For issues and questions related to the frontend, please refer to the main MONIKA project documentation.