# 🔐 ZAI Bridge License Manager GUI

A modern, web-based interface for managing ZAI Bridge licenses, monitoring usage, and configuring AI-to-AI communication features.

## ✨ Features

### 🔑 License Management
- **Easy License Input**: Simple form to enter and validate license keys
- **Real-time Validation**: Instant feedback on license format and validity
- **Multiple Input Methods**: Paste from clipboard, import from file, or manual entry
- **Secure Storage**: Local storage of license data with encryption

### 📊 Status Dashboard
- **License Information**: View tier, status, expiration, and features
- **Device Usage**: Monitor connected devices and usage limits
- **Usage Statistics**: Track sessions, conversations, and messages
- **Real-time Updates**: Automatic refresh of license status

### 🖥️ Device Management
- **Device List**: View all devices registered to your license
- **Device Details**: See device names, registration dates, and last activity
- **Device Removal**: Remove unused devices to free up license slots
- **Usage Monitoring**: Track device usage against license limits

### ⚙️ Advanced Features
- **Export/Import**: Backup and restore license configurations
- **Support Integration**: Direct links to documentation and support
- **Responsive Design**: Works on desktop, tablet, and mobile devices
- **Dark/Light Theme**: Automatic theme detection and manual override

## 🚀 Quick Start

### Prerequisites
- Node.js 16.0.0 or higher
- ZAI Bridge license (get one at [zai-platform.com](https://zai-platform.com/pricing))

### Installation

1. **Navigate to the GUI directory**:
   ```bash
   cd src/gui
   ```

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

3. **Start the GUI**:
   ```bash
   npm start
   ```

4. **Open your browser**:
   The GUI will automatically open at `http://localhost:8080`

### Alternative Start Methods

**Development mode** (port 3000):
```bash
npm run dev
```

**Server only** (no browser auto-open):
```bash
npm run server
```

**Custom port**:
```bash
ZAI_GUI_PORT=9000 npm start
```

## 🎯 Usage Guide

### 1. Enter Your License

1. **Open the GUI** in your browser
2. **Enter your license key** in the input field
3. **Click "Validate"** to verify the license
4. **View the results** in the feedback area

### 2. Monitor License Status

Once validated, you'll see:
- **License tier** and features
- **Device usage** and limits
- **Usage statistics** and history
- **Expiration status** (if applicable)

### 3. Manage Devices

- **View connected devices** in the Device Usage card
- **Remove unused devices** to free up slots
- **Monitor device activity** and last seen dates

### 4. Export/Import Configuration

- **Export**: Download your license configuration as JSON
- **Import**: Upload a previously exported configuration
- **Backup**: Keep copies of your license data for recovery

## 🔧 Configuration

### Environment Variables

| Variable | Default | Description |
|----------|---------|-------------|
| `ZAI_GUI_PORT` | `8080` | Port for the GUI server |
| `ZAI_LICENSE_TOKEN` | - | Pre-configured license token |
| `NODE_ENV` | `production` | Environment mode |

### API Endpoints

The GUI communicates with these API endpoints:

| Endpoint | Method | Description |
|----------|--------|-------------|
| `/api/status` | GET | Server and connection status |
| `/api/license/validate` | POST | Validate a license key |
| `/api/license/status` | GET | Get current license status |
| `/api/license/devices` | GET | List registered devices |
| `/api/license/usage` | GET | Get usage statistics |
| `/api/license/refresh` | POST | Refresh license data |

## 🛡️ Security Features

### 🔐 License Protection
- **Secure validation** through encrypted channels
- **Token masking** in UI to prevent shoulder surfing
- **Automatic session timeout** for security
- **Audit logging** of all license operations

### 🔒 Data Security
- **Local storage encryption** for sensitive data
- **HTTPS enforcement** in production
- **CORS protection** for API endpoints
- **Input sanitization** and validation

### 🛡️ Access Control
- **Device fingerprinting** for license binding
- **Multi-factor validation** for license changes
- **Rate limiting** on API endpoints
- **Session management** and timeout

## 🎨 Customization

### Themes
The GUI supports automatic theme detection and manual override:
- **Light theme**: Clean, professional appearance
- **Dark theme**: Reduced eye strain for extended use
- **Auto theme**: Follows system preferences

### Branding
Customize the appearance by modifying:
- `license-manager.css`: Styles and colors
- `license-manager.html`: Layout and structure
- Logo and branding elements

## 🔍 Troubleshooting

### Common Issues

**GUI won't start**:
- Check Node.js version (16.0.0+)
- Verify port availability
- Check firewall settings

**License validation fails**:
- Verify license key format
- Check internet connection
- Ensure ZAI Bridge is running

**Connection errors**:
- Confirm API server is running
- Check CORS settings
- Verify network connectivity

### Debug Mode

Enable debug logging:
```bash
DEBUG=zai:* npm start
```

### Support

- 📖 **Documentation**: [docs.zai-platform.com](https://docs.zai-platform.com)
- 💬 **Support**: [zai-platform.com/support](https://zai-platform.com/support)
- 🐛 **Bug Reports**: [GitHub Issues](https://github.com/zai-platform/bridge/issues)

## 📝 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

## 📋 Changelog

### v1.1.1
- Initial release of License Manager GUI
- Real-time license validation
- Device management interface
- Usage statistics dashboard
- Export/import functionality
- Responsive design implementation

---

**Made with ❤️ by the ZAI Platform team**
