flare-ui/ReadMe.md

# Flare Admin UI Setup

## Quick Start (HuggingFace Deployment)

Just push all files to HuggingFace Space. The Dockerfile will handle everything:
- Build Angular UI
- Install Python dependencies
- Serve both UI and API on port 7860

## Local Development

### Backend Setup
```bash
# Install Python dependencies
pip install -r requirements.txt

# Set encryption key (if needed)
export FLARE_TOKEN_KEY="your-32-byte-base64-key"

# Run backend
python app.py
```

### Frontend Setup (for development only)
```bash
# Navigate to UI directory
cd flare-ui

# Install dependencies
npm install

# Run development server (proxies to backend on port 7860)
npm start

# Build for production (creates static/ directory)
npm run build
```

## Docker Deployment

```bash
# Build and run
docker build -t flare-admin .
docker run -p 7860:7860 flare-admin
```

Access at `http://localhost:7860`

## Default Login

- Username: `admin`
- Password: `admin`

## Creating Admin User

To create a new admin user with proper password hash:

```python
import hashlib

password = "your-password"
password_hash = hashlib.sha256(password.encode()).hexdigest()
print(f"Password hash: {password_hash}")
```

Add the user to `service_config.jsonc`:
```json
{
  "config": {
    "users": [
      {
        "username": "newuser",
        "password_hash": "your-hash-here",
        "salt": "random_salt_string"
      }
    ]
  }
}
```

## Project Structure

```
/
├── app.py                  # Main FastAPI application
├── admin_routes.py         # Admin API endpoints
├── chat_handler.py         # Chat functionality
├── service_config.jsonc    # Configuration file
├── Dockerfile             # Handles everything for deployment
├── flare-ui/              # Angular UI source
│   ├── src/
│   │   ├── app/
│   │   │   ├── components/
│   │   │   ├── services/
│   │   │   └── guards/
│   │   └── index.html
│   └── package.json
└── static/                # Built UI files (auto-generated by Docker)
```

## Features Implemented

- ✅ User authentication with JWT
- ✅ Environment configuration
- ✅ Project management
- ✅ Version control
- ✅ API management
- ✅ Activity logging
- ✅ Race condition handling
- ✅ Import/Export functionality

## TODO

- [ ] User Info tab (password change)
- [ ] APIs tab (CRUD operations)
- [ ] Projects tab (full CRUD)
- [ ] Test tab implementation
- [ ] Intent/Parameter dialogs
- [ ] Version comparison
- [ ] Auto-save for drafts
- [ ] Keyboard shortcuts

---

## ⚠️ Production Deployment Note

**This setup is optimized for HuggingFace Spaces and development environments.** For production on-premise deployment, a more robust architecture will be implemented.

### Planned Production Architecture:

#### 1. **Web Server Layer**
- **Nginx** as reverse proxy and static file server
- SSL/TLS termination
- Request rate limiting and security headers
- Gzip compression for static assets

#### 2. **Application Layer**
- **Gunicorn/Uvicorn** workers for Python ASGI
- Process management with **Supervisor** or **systemd**
- Horizontal scaling with multiple worker processes
- Health check endpoints for monitoring

#### 3. **Session & Cache Layer**
- **Redis** for distributed session storage
- Centralized cache for LLM responses
- Session affinity for WebSocket connections

#### 4. **Database Layer** (Optional)
- **PostgreSQL** for configuration storage (replacing JSON file)
- Backup and replication strategies
- Migration tools for schema updates

#### 5. **Monitoring & Logging**
- **Prometheus** + **Grafana** for metrics
- **ELK Stack** (Elasticsearch, Logstash, Kibana) for log aggregation
- Application Performance Monitoring (APM)
- Alert configuration for critical events

#### 6. **Deployment Options**

**Option A: Docker Compose** (Small-Medium Scale)
```yaml
services:
  nginx:
    image: nginx:alpine
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
      - ./static:/usr/share/nginx/html
    ports:
      - "80:80"
      - "443:443"

  app:
    image: flare-admin:production
    scale: 3  # 3 instances
    environment:
      - REDIS_URL=redis://redis:6379

  redis:
    image: redis:alpine
    volumes:
      - redis-data:/data
```

**Option B: Kubernetes** (Large Scale)
- Helm charts for easy deployment
- Horizontal Pod Autoscaler (HPA)
- Ingress controller for routing
- Persistent Volume Claims for data
- Secrets management for credentials

#### 7. **Security Considerations**
- JWT token rotation and refresh
- API rate limiting per user
- Input validation and sanitization
- Regular security audits
- Compliance with data protection regulations

#### 8. **Backup & Disaster Recovery**
- Automated daily backups
- Point-in-time recovery
- Geo-redundant storage
- Disaster recovery procedures
- RTO/RPO targets defined

### Production Deployment Timeline:
1. **Phase 1**: Current setup (HF Spaces, development)
2. **Phase 2**: Docker Compose setup for on-premise pilot
3. **Phase 3**: Full production architecture with monitoring
4. **Phase 4**: Kubernetes deployment for enterprise scale

A comprehensive `DEPLOYMENT.md` guide will be created when transitioning to production architecture.