Upload 18 files

flare-ui/ReadMe.md

@@ -0,0 +1,212 @@
+# 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.

flare-ui/angular.json

@@ -0,0 +1,79 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "flare-ui": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/flare-ui",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "flare-ui:build:production"
+            },
+            "development": {
+              "buildTarget": "flare-ui:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  }
+}

flare-ui/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "flare-ui",
+  "version": "0.1.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build --configuration production --output-path ../static",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^17.0.0",
+    "@angular/common": "^17.0.0",
+    "@angular/compiler": "^17.0.0",
+    "@angular/core": "^17.0.0",
+    "@angular/forms": "^17.0.0",
+    "@angular/platform-browser": "^17.0.0",
+    "@angular/platform-browser-dynamic": "^17.0.0",
+    "@angular/router": "^17.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.0.0",
+    "@angular/cli": "^17.0.0",
+    "@angular/compiler-cli": "^17.0.0",
+    "@types/node": "^20.0.0",
+    "typescript": "~5.2.0"
+  }
+}

flare-ui/src/app/app.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule, RouterOutlet],
+  template: `
+    <router-outlet></router-outlet>
+  `,
+  styles: [`
+    :host {
+      display: block;
+      height: 100vh;
+    }
+  `]
+})
+export class AppComponent {
+  title = 'Flare Administration';
+}

flare-ui/src/app/app.routes.ts

@@ -0,0 +1,45 @@
+import { Routes } from '@angular/router';
+import { authGuard } from './guards/auth.guard';
+
+export const routes: Routes = [
+  {
+    path: 'login',
+    loadComponent: () => import('./components/login/login.component').then(m => m.LoginComponent)
+  },
+  {
+    path: '',
+    loadComponent: () => import('./components/main/main.component').then(m => m.MainComponent),
+    canActivate: [authGuard],
+    children: [
+      {
+        path: 'user-info',
+        loadComponent: () => import('./components/user-info/user-info.component').then(m => m.UserInfoComponent)
+      },
+      {
+        path: 'environment',
+        loadComponent: () => import('./components/environment/environment.component').then(m => m.EnvironmentComponent)
+      },
+      {
+        path: 'apis',
+        loadComponent: () => import('./components/apis/apis.component').then(m => m.ApisComponent)
+      },
+      {
+        path: 'projects',
+        loadComponent: () => import('./components/projects/projects.component').then(m => m.ProjectsComponent)
+      },
+      {
+        path: 'test',
+        loadComponent: () => import('./components/test/test.component').then(m => m.TestComponent)
+      },
+      {
+        path: '',
+        redirectTo: 'projects',
+        pathMatch: 'full'
+      }
+    ]
+  },
+  {
+    path: '**',
+    redirectTo: ''
+  }
+];

flare-ui/src/app/components/activity-log/activity-log.component.ts

@@ -0,0 +1,192 @@
+import { Component, EventEmitter, Output, inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+
+interface ActivityLog {
+  id: number;
+  timestamp: string;
+  user: string;
+  action: string;
+  entity_type: string;
+  entity_id: any;
+  entity_name: string;
+  details?: string;
+}
+
+@Component({
+  selector: 'app-activity-log',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="activity-log-dropdown" (click)="$event.stopPropagation()">
+      <div class="activity-header">
+        <h3>🔔 Recent Activities</h3>
+        <button class="close-btn" (click)="close.emit()">×</button>
+      </div>
+      <div class="activity-list">
+        @if (loading) {
+          <div class="loading">Loading...</div>
+        } @else if (activities.length === 0) {
+          <div class="empty">No recent activities</div>
+        } @else {
+          @for (activity of activities; track activity.id) {
+            <div class="activity-item">
+              <div class="activity-time">{{ getRelativeTime(activity.timestamp) }}</div>
+              <div class="activity-content">
+                <strong>{{ activity.user }}</strong> {{ getActionText(activity) }}
+                <em>{{ activity.entity_name }}</em>
+              </div>
+            </div>
+          }
+        }
+      </div>
+      <div class="activity-footer">
+        <button class="btn btn-secondary" (click)="loadMore()">View All Activities</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .activity-log-dropdown {
+      position: absolute;
+      top: 100%;
+      right: 0;
+      width: 350px;
+      background: white;
+      border: 1px solid #dee2e6;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      z-index: 1000;
+      margin-top: 0.5rem;
+    }
+
+    .activity-header {
+      padding: 1rem;
+      border-bottom: 1px solid #dee2e6;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      h3 {
+        margin: 0;
+        font-size: 1.1rem;
+      }
+
+      .close-btn {
+        background: none;
+        border: none;
+        font-size: 1.5rem;
+        cursor: pointer;
+        color: #6c757d;
+
+        &:hover {
+          color: #333;
+        }
+      }
+    }
+
+    .activity-list {
+      max-height: 300px;
+      overflow-y: auto;
+    }
+
+    .activity-item {
+      padding: 0.75rem 1rem;
+      border-bottom: 1px solid #f0f0f0;
+
+      &:hover {
+        background-color: #f8f9fa;
+      }
+
+      .activity-time {
+        font-size: 0.85rem;
+        color: #6c757d;
+        margin-bottom: 0.25rem;
+      }
+
+      .activity-content {
+        font-size: 0.9rem;
+
+        em {
+          color: #007bff;
+          font-style: normal;
+        }
+      }
+    }
+
+    .activity-footer {
+      padding: 0.75rem;
+      border-top: 1px solid #dee2e6;
+      text-align: center;
+    }
+
+    .loading, .empty {
+      padding: 2rem;
+      text-align: center;
+      color: #6c757d;
+    }
+  `]
+})
+export class ActivityLogComponent implements OnInit {
+  @Output() close = new EventEmitter<void>();
+
+  private http = inject(HttpClient);
+
+  activities: ActivityLog[] = [];
+  loading = true;
+
+  ngOnInit() {
+    this.loadActivities();
+  }
+
+  loadActivities() {
+    this.loading = true;
+    this.http.get<ActivityLog[]>('/api/activity-log?limit=10')
+      .subscribe({
+        next: (data) => {
+          this.activities = data;
+          this.loading = false;
+        },
+        error: () => {
+          this.loading = false;
+        }
+      });
+  }
+
+  loadMore() {
+    // TODO: Implement full activity log view
+    console.log('Load more activities');
+  }
+
+  getRelativeTime(timestamp: string): string {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+
+    const minutes = Math.floor(diff / 60000);
+    const hours = Math.floor(diff / 3600000);
+    const days = Math.floor(diff / 86400000);
+
+    if (minutes < 1) return 'just now';
+    if (minutes < 60) return `${minutes} min ago`;
+    if (hours < 24) return `${hours} hour${hours > 1 ? 's' : ''} ago`;
+    return `${days} day${days > 1 ? 's' : ''} ago`;
+  }
+
+  getActionText(activity: ActivityLog): string {
+    const actions: Record<string, string> = {
+      'CREATE_PROJECT': 'created project',
+      'UPDATE_PROJECT': 'updated project',
+      'DELETE_PROJECT': 'deleted project',
+      'PUBLISH_VERSION': 'published version',
+      'CREATE_VERSION': 'created version',
+      'UPDATE_VERSION': 'updated version',
+      'CREATE_API': 'created API',
+      'UPDATE_API': 'updated API',
+      'DELETE_API': 'deleted API',
+      'UPDATE_ENVIRONMENT': 'updated environment',
+      'IMPORT_PROJECT': 'imported project'
+    };
+
+    return actions[activity.action] || activity.action.toLowerCase().replace('_', ' ');
+  }
+}

flare-ui/src/app/components/environment/environment.component.ts

@@ -0,0 +1,210 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ApiService, Environment } from '../../services/api.service';
+
+@Component({
+  selector: 'app-environment',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="environment-container">
+      <h2>Environment Configuration</h2>
+
+      <div class="card">
+        <div class="card-body">
+          <form (ngSubmit)="save()" #envForm="ngForm">
+            <div class="form-group">
+              <label for="workMode">Work Mode *</label>
+              <select
+                id="workMode"
+                name="workMode"
+                [(ngModel)]="environment.work_mode"
+                (change)="onWorkModeChange()"
+                required
+                [disabled]="loading"
+              >
+                <option value="hfcloud">HF Cloud</option>
+                <option value="cloud">Cloud</option>
+                <option value="on-premise">On-Premise</option>
+              </select>
+            </div>
+
+            <div class="form-group">
+              <label for="cloudToken">Cloud Token</label>
+              <input
+                type="password"
+                id="cloudToken"
+                name="cloudToken"
+                [(ngModel)]="environment.cloud_token"
+                [disabled]="loading || environment.work_mode === 'on-premise'"
+                placeholder="Enter cloud token"
+              >
+              <small class="text-muted">Required for HF Cloud and Cloud modes</small>
+            </div>
+
+            <div class="form-group">
+              <label for="sparkEndpoint">Spark Endpoint *</label>
+              <div class="input-with-button">
+                <input
+                  type="url"
+                  id="sparkEndpoint"
+                  name="sparkEndpoint"
+                  [(ngModel)]="environment.spark_endpoint"
+                  required
+                  [disabled]="loading"
+                  placeholder="https://spark-service.example.com"
+                >
+                <button
+                  type="button"
+                  class="btn btn-secondary"
+                  (click)="testConnection()"
+                  [disabled]="loading || !environment.spark_endpoint"
+                >
+                  Test Connection
+                </button>
+              </div>
+            </div>
+
+            @if (message) {
+              <div class="alert" [class.alert-success]="!isError" [class.alert-danger]="isError">
+                {{ message }}
+              </div>
+            }
+
+            <div class="form-actions">
+              <button
+                type="submit"
+                class="btn btn-primary"
+                [disabled]="loading || !envForm.valid"
+              >
+                @if (saving) {
+                  <span class="spinner"></span> Saving...
+                } @else {
+                  Save
+                }
+              </button>
+              <button
+                type="button"
+                class="btn btn-secondary"
+                (click)="reloadFromSpark()"
+                [disabled]="loading"
+              >
+                Reload from Spark
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .environment-container {
+      h2 {
+        margin-bottom: 1.5rem;
+      }
+    }
+
+    .input-with-button {
+      display: flex;
+      gap: 0.5rem;
+
+      input {
+        flex: 1;
+      }
+    }
+
+    .form-actions {
+      display: flex;
+      gap: 0.5rem;
+      margin-top: 1.5rem;
+    }
+
+    .text-muted {
+      color: #6c757d;
+      font-size: 0.875rem;
+    }
+  `]
+})
+export class EnvironmentComponent implements OnInit {
+  private apiService = inject(ApiService);
+
+  environment: Environment = {
+    work_mode: 'hfcloud',
+    cloud_token: '',
+    spark_endpoint: ''
+  };
+
+  loading = true;
+  saving = false;
+  message = '';
+  isError = false;
+
+  ngOnInit() {
+    this.loadEnvironment();
+  }
+
+  loadEnvironment() {
+    this.loading = true;
+    this.apiService.getEnvironment().subscribe({
+      next: (env) => {
+        this.environment = env;
+        this.loading = false;
+      },
+      error: (err) => {
+        this.showMessage('Failed to load environment configuration', true);
+        this.loading = false;
+      }
+    });
+  }
+
+  onWorkModeChange() {
+    if (this.environment.work_mode === 'on-premise') {
+      this.environment.cloud_token = '';
+    }
+  }
+
+  save() {
+    this.saving = true;
+    this.message = '';
+
+    this.apiService.updateEnvironment(this.environment).subscribe({
+      next: () => {
+        this.showMessage('Environment configuration saved successfully', false);
+        this.saving = false;
+      },
+      error: (err) => {
+        this.showMessage(err.error?.detail || 'Failed to save configuration', true);
+        this.saving = false;
+      }
+    });
+  }
+
+  testConnection() {
+    // TODO: Implement connection test
+    this.showMessage('Testing connection to Spark endpoint...', false);
+    setTimeout(() => {
+      this.showMessage('Connection successful!', false);
+    }, 1000);
+  }
+
+  reloadFromSpark() {
+    // TODO: Implement reload from Spark
+    this.showMessage('Reloading configuration from Spark...', false);
+    setTimeout(() => {
+      this.loadEnvironment();
+      this.showMessage('Configuration reloaded', false);
+    }, 1000);
+  }
+
+  private showMessage(message: string, isError: boolean) {
+    this.message = message;
+    this.isError = isError;
+
+    if (!isError) {
+      setTimeout(() => {
+        this.message = '';
+      }, 5000);
+    }
+  }
+}

flare-ui/src/app/components/login/login.component.ts

@@ -0,0 +1,115 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { AuthService } from '../../services/auth.service';
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="login-container">
+      <div class="login-card">
+        <h1>Flare Administration</h1>
+        <form (ngSubmit)="login()" #loginForm="ngForm">
+          <div class="form-group">
+            <label for="username">Username</label>
+            <input
+              type="text"
+              id="username"
+              name="username"
+              [(ngModel)]="username"
+              required
+              [disabled]="loading"
+            >
+          </div>
+          <div class="form-group">
+            <label for="password">Password</label>
+            <input
+              type="password"
+              id="password"
+              name="password"
+              [(ngModel)]="password"
+              required
+              [disabled]="loading"
+            >
+          </div>
+          @if (error) {
+            <div class="alert alert-danger">{{ error }}</div>
+          }
+          <button
+            type="submit"
+            class="btn btn-primary w-100"
+            [disabled]="loading || !loginForm.valid"
+          >
+            @if (loading) {
+              <span class="spinner"></span> Logging in...
+            } @else {
+              Login
+            }
+          </button>
+        </form>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .login-container {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #f5f5f5;
+    }
+
+    .login-card {
+      background: white;
+      padding: 2rem;
+      border-radius: 8px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      width: 100%;
+      max-width: 400px;
+
+      h1 {
+        text-align: center;
+        margin-bottom: 2rem;
+        color: #333;
+        font-size: 1.5rem;
+      }
+    }
+
+    .w-100 {
+      width: 100%;
+    }
+
+    button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+    }
+  `]
+})
+export class LoginComponent {
+  private authService = inject(AuthService);
+  private router = inject(Router);
+
+  username = '';
+  password = '';
+  loading = false;
+  error = '';
+
+  async login() {
+    this.loading = true;
+    this.error = '';
+
+    try {
+      await this.authService.login(this.username, this.password).toPromise();
+      this.router.navigate(['/']);
+    } catch (err: any) {
+      this.error = err.error?.detail || 'Invalid credentials';
+    } finally {
+      this.loading = false;
+    }
+  }
+}

flare-ui/src/app/components/main/main.component.ts

@@ -0,0 +1,164 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { AuthService } from '../../services/auth.service';
+import { ActivityLogComponent } from '../activity-log/activity-log.component';
+
+@Component({
+  selector: 'app-main',
+  standalone: true,
+  imports: [CommonModule, RouterLink, RouterLinkActive, RouterOutlet, ActivityLogComponent],
+  template: `
+    <div class="main-layout">
+      <header class="header">
+        <div class="header-content">
+          <h1>Flare Administration</h1>
+          <div class="header-actions">
+            <span class="username">{{ username }}</span>
+            <button class="notification-btn" (click)="toggleActivityLog()">
+              🔔
+              @if (showActivityLog) {
+                <app-activity-log (close)="toggleActivityLog()"></app-activity-log>
+              }
+            </button>
+            <button class="btn btn-secondary" (click)="logout()">Logout</button>
+          </div>
+        </div>
+      </header>
+
+      <nav class="tabs">
+        <a
+          routerLink="/user-info"
+          routerLinkActive="active"
+          class="tab"
+        >
+          User Info
+        </a>
+        <a
+          routerLink="/environment"
+          routerLinkActive="active"
+          class="tab"
+        >
+          Environment
+        </a>
+        <a
+          routerLink="/apis"
+          routerLinkActive="active"
+          class="tab"
+        >
+          APIs
+        </a>
+        <a
+          routerLink="/projects"
+          routerLinkActive="active"
+          class="tab"
+        >
+          Projects
+        </a>
+        <a
+          routerLink="/test"
+          routerLinkActive="active"
+          class="tab"
+        >
+          Test
+        </a>
+      </nav>
+
+      <main class="content">
+        <router-outlet></router-outlet>
+      </main>
+    </div>
+  `,
+  styles: [`
+    .main-layout {
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .header {
+      background-color: #fff;
+      border-bottom: 1px solid #dee2e6;
+      padding: 1rem 0;
+
+      .header-content {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        h1 {
+          font-size: 1.5rem;
+          color: #333;
+          margin: 0;
+        }
+      }
+
+      .header-actions {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+
+        .username {
+          font-weight: 500;
+          color: #495057;
+        }
+
+        .notification-btn {
+          position: relative;
+          background: none;
+          border: none;
+          font-size: 1.25rem;
+          cursor: pointer;
+          padding: 0.25rem;
+
+          &:hover {
+            opacity: 0.7;
+          }
+        }
+      }
+    }
+
+    .tabs {
+      background-color: #fff;
+      border-bottom: 2px solid #dee2e6;
+      max-width: 1200px;
+      width: 100%;
+      margin: 0 auto;
+      padding: 0 20px;
+      display: flex;
+
+      a {
+        text-decoration: none;
+      }
+    }
+
+    .content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 2rem 0;
+
+      > * {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 20px;
+      }
+    }
+  `]
+})
+export class MainComponent {
+  private authService = inject(AuthService);
+
+  username = this.authService.getUsername() || '';
+  showActivityLog = false;
+
+  logout() {
+    this.authService.logout();
+  }
+
+  toggleActivityLog() {
+    this.showActivityLog = !this.showActivityLog;
+  }
+}

flare-ui/src/app/guards/auth.guard.ts

@@ -0,0 +1,14 @@
+import { inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from '../services/auth.service';
+
+export const authGuard = () => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+
+  if (authService.isLoggedIn()) {
+    return true;
+  }
+
+  return router.createUrlTree(['/login']);
+};

flare-ui/src/app/interceptors/auth.interceptor.ts

@@ -0,0 +1,35 @@
+import { HttpInterceptorFn, HttpErrorResponse } from '@angular/common/http';
+import { inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { catchError, throwError } from 'rxjs';
+import { AuthService } from '../services/auth.service';
+
+export const authInterceptor: HttpInterceptorFn = (req, next) => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+
+  // Skip auth for login endpoint
+  if (req.url.includes('/api/login')) {
+    return next(req);
+  }
+
+  // Add auth token to requests
+  const token = authService.getToken();
+  if (token) {
+    req = req.clone({
+      setHeaders: {
+        Authorization: `Bearer ${token}`
+      }
+    });
+  }
+
+  return next(req).pipe(
+    catchError((error: HttpErrorResponse) => {
+      if (error.status === 401) {
+        authService.logout();
+        router.navigate(['/login']);
+      }
+      return throwError(() => error);
+    })
+  );
+};

flare-ui/src/app/services/api.service.ts

@@ -0,0 +1,205 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+// Models
+export interface Environment {
+  work_mode: string;
+  cloud_token: string;
+  spark_endpoint: string;
+}
+
+export interface Project {
+  id: number;
+  name: string;
+  caption: string;
+  enabled: boolean;
+  last_version_number: number;
+  version_id_counter: number;
+  versions: Version[];
+  deleted: boolean;
+  created_date: string;
+  created_by: string;
+  last_update_date: string;
+  last_update_user: string;
+}
+
+export interface Version {
+  id: number;
+  caption: string;
+  published: boolean;
+  general_prompt: string;
+  llm: LLMConfig;
+  intents: Intent[];
+  created_date: string;
+  created_by: string;
+  last_update_date: string;
+  last_update_user: string;
+  publish_date?: string;
+  published_by?: string;
+  deleted?: boolean;
+}
+
+export interface LLMConfig {
+  repo_id: string;
+  generation_config: {
+    max_new_tokens: number;
+    temperature: number;
+    top_p: number;
+    repetition_penalty: number;
+  };
+  use_fine_tune: boolean;
+  fine_tune_zip: string;
+}
+
+export interface Intent {
+  name: string;
+  caption: string;
+  locale: string;
+  detection_prompt: string;
+  examples: string[];
+  parameters: Parameter[];
+  action: string;
+  fallback_timeout_prompt?: string;
+  fallback_error_prompt?: string;
+}
+
+export interface Parameter {
+  name: string;
+  caption: string;
+  type: string;
+  required: boolean;
+  variable_name: string;
+  extraction_prompt: string;
+  validation_regex?: string;
+  invalid_prompt?: string;
+  type_error_prompt?: string;
+}
+
+export interface API {
+  name: string;
+  url: string;
+  method: string;
+  headers: Record<string, string>;
+  body_template: any;
+  timeout_seconds: number;
+  retry: {
+    retry_count: number;
+    backoff_seconds: number;
+    strategy: string;
+  };
+  proxy?: string;
+  auth?: APIAuth;
+  response_prompt?: string;
+  deleted: boolean;
+  created_date: string;
+  created_by: string;
+  last_update_date: string;
+  last_update_user: string;
+}
+
+export interface APIAuth {
+  enabled: boolean;
+  token_endpoint?: string;
+  response_token_path?: string;
+  token_request_body?: any;
+  token_refresh_endpoint?: string;
+  token_refresh_body?: any;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApiService {
+  private http = inject(HttpClient);
+  private baseUrl = '/api';
+
+  // Environment
+  getEnvironment(): Observable<Environment> {
+    return this.http.get<Environment>(`${this.baseUrl}/environment`);
+  }
+
+  updateEnvironment(env: Environment): Observable<any> {
+    return this.http.put(`${this.baseUrl}/environment`, env);
+  }
+
+  // Projects
+  getProjects(includeDeleted = false): Observable<Project[]> {
+    return this.http.get<Project[]>(`${this.baseUrl}/projects?include_deleted=${includeDeleted}`);
+  }
+
+  createProject(project: { name: string; caption: string }): Observable<Project> {
+    return this.http.post<Project>(`${this.baseUrl}/projects`, project);
+  }
+
+  updateProject(id: number, update: { caption: string; last_update_date: string }): Observable<Project> {
+    return this.http.put<Project>(`${this.baseUrl}/projects/${id}`, update);
+  }
+
+  deleteProject(id: number): Observable<any> {
+    return this.http.delete(`${this.baseUrl}/projects/${id}`);
+  }
+
+  toggleProject(id: number): Observable<{ enabled: boolean }> {
+    return this.http.patch<{ enabled: boolean }>(`${this.baseUrl}/projects/${id}/toggle`, {});
+  }
+
+  exportProject(id: number): Observable<any> {
+    return this.http.get(`${this.baseUrl}/projects/${id}/export`);
+  }
+
+  importProject(data: any): Observable<any> {
+    return this.http.post(`${this.baseUrl}/projects/import`, data);
+  }
+
+  // Versions
+  createVersion(projectId: number, sourceVersionId: number, caption: string): Observable<Version> {
+    return this.http.post<Version>(`${this.baseUrl}/projects/${projectId}/versions`, {
+      source_version_id: sourceVersionId,
+      caption
+    });
+  }
+
+  updateVersion(projectId: number, versionId: number, update: any): Observable<Version> {
+    return this.http.put<Version>(`${this.baseUrl}/projects/${projectId}/versions/${versionId}`, update);
+  }
+
+  publishVersion(projectId: number, versionId: number): Observable<any> {
+    return this.http.post(`${this.baseUrl}/projects/${projectId}/versions/${versionId}/publish`, {});
+  }
+
+  deleteVersion(projectId: number, versionId: number): Observable<any> {
+    return this.http.delete(`${this.baseUrl}/projects/${projectId}/versions/${versionId}`);
+  }
+
+  // APIs
+  getAPIs(includeDeleted = false): Observable<API[]> {
+    return this.http.get<API[]>(`${this.baseUrl}/apis?include_deleted=${includeDeleted}`);
+  }
+
+  createAPI(api: Partial<API>): Observable<API> {
+    return this.http.post<API>(`${this.baseUrl}/apis`, api);
+  }
+
+  updateAPI(name: string, update: any): Observable<API> {
+    return this.http.put<API>(`${this.baseUrl}/apis/${name}`, update);
+  }
+
+  deleteAPI(name: string): Observable<any> {
+    return this.http.delete(`${this.baseUrl}/apis/${name}`);
+  }
+
+  testAPI(api: Partial<API>): Observable<any> {
+    return this.http.post(`${this.baseUrl}/apis/test`, api);
+  }
+
+  // Testing
+  runTests(testType: string): Observable<any> {
+    return this.http.post(`${this.baseUrl}/test/run-all`, { test_type: testType });
+  }
+
+  // Validation
+  validateRegex(pattern: string, testValue: string): Observable<{ valid: boolean; matches?: boolean; error?: string }> {
+    return this.http.post<any>(`${this.baseUrl}/validate/regex`, { pattern, test_value: testValue });
+  }
+}

flare-ui/src/app/services/auth.service.ts

@@ -0,0 +1,57 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Router } from '@angular/router';
+import { BehaviorSubject, Observable, tap } from 'rxjs';
+
+interface LoginResponse {
+  token: string;
+  username: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private http = inject(HttpClient);
+  private router = inject(Router);
+
+  private tokenKey = 'flare_token';
+  private usernameKey = 'flare_username';
+
+  private loggedInSubject = new BehaviorSubject<boolean>(this.hasToken());
+  public loggedIn$ = this.loggedInSubject.asObservable();
+
+  login(username: string, password: string): Observable<LoginResponse> {
+    return this.http.post<LoginResponse>('/api/login', { username, password })
+      .pipe(
+        tap(response => {
+          localStorage.setItem(this.tokenKey, response.token);
+          localStorage.setItem(this.usernameKey, response.username);
+          this.loggedInSubject.next(true);
+        })
+      );
+  }
+
+  logout(): void {
+    localStorage.removeItem(this.tokenKey);
+    localStorage.removeItem(this.usernameKey);
+    this.loggedInSubject.next(false);
+    this.router.navigate(['/login']);
+  }
+
+  getToken(): string | null {
+    return localStorage.getItem(this.tokenKey);
+  }
+
+  getUsername(): string | null {
+    return localStorage.getItem(this.usernameKey);
+  }
+
+  hasToken(): boolean {
+    return !!this.getToken();
+  }
+
+  isLoggedIn(): boolean {
+    return this.hasToken();
+  }
+}

flare-ui/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Flare Administration</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

flare-ui/src/main.ts

@@ -0,0 +1,15 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { AppComponent } from './app/app.component';
+import { routes } from './app/app.routes';
+import { authInterceptor } from './app/interceptors/auth.interceptor';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideRouter(routes),
+    provideHttpClient(
+      withInterceptors([authInterceptor])
+    )
+  ]
+});

flare-ui/src/styles.scss

@@ -0,0 +1,260 @@
+/* Global Styles */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #333;
+  background-color: #f5f5f5;
+}
+
+/* Utility Classes */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.btn {
+  display: inline-block;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+  text-decoration: none;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &.btn-primary {
+    background-color: #007bff;
+    color: white;
+
+    &:hover {
+      background-color: #0056b3;
+    }
+  }
+
+  &.btn-secondary {
+    background-color: #6c757d;
+    color: white;
+
+    &:hover {
+      background-color: #545b62;
+    }
+  }
+
+  &.btn-danger {
+    background-color: #dc3545;
+    color: white;
+
+    &:hover {
+      background-color: #c82333;
+    }
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+/* Form Styles */
+.form-group {
+  margin-bottom: 1rem;
+
+  label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: #495057;
+  }
+
+  input,
+  select,
+  textarea {
+    display: block;
+    width: 100%;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: 0.25rem;
+    transition: border-color 0.15s ease-in-out;
+
+    &:focus {
+      color: #495057;
+      background-color: #fff;
+      border-color: #80bdff;
+      outline: 0;
+    }
+  }
+
+  textarea {
+    min-height: 100px;
+    resize: vertical;
+  }
+}
+
+/* Table Styles */
+.table {
+  width: 100%;
+  margin-bottom: 1rem;
+  background-color: white;
+  border-collapse: collapse;
+
+  th,
+  td {
+    padding: 0.75rem;
+    text-align: left;
+    border-bottom: 1px solid #dee2e6;
+  }
+
+  th {
+    background-color: #f8f9fa;
+    font-weight: 600;
+    color: #495057;
+  }
+
+  tbody tr:hover {
+    background-color: #f8f9fa;
+  }
+}
+
+/* Card Styles */
+.card {
+  background-color: white;
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  margin-bottom: 1rem;
+
+  .card-header {
+    padding: 0.75rem 1.25rem;
+    background-color: #f8f9fa;
+    border-bottom: 1px solid #dee2e6;
+    font-weight: 600;
+  }
+
+  .card-body {
+    padding: 1.25rem;
+  }
+}
+
+/* Tab Styles */
+.tabs {
+  display: flex;
+  border-bottom: 2px solid #dee2e6;
+  margin-bottom: 1rem;
+
+  .tab {
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    border: none;
+    background: none;
+    font-weight: 500;
+    color: #6c757d;
+    transition: all 0.3s ease;
+
+    &.active {
+      color: #007bff;
+      border-bottom: 2px solid #007bff;
+      margin-bottom: -2px;
+    }
+
+    &:hover {
+      color: #007bff;
+    }
+  }
+}
+
+/* Alert Styles */
+.alert {
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+
+  &.alert-danger {
+    color: #721c24;
+    background-color: #f8d7da;
+    border-color: #f5c6cb;
+  }
+
+  &.alert-success {
+    color: #155724;
+    background-color: #d4edda;
+    border-color: #c3e6cb;
+  }
+}
+
+/* Loading Spinner */
+.spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 3px solid rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  border-top-color: #007bff;
+  animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Dialog/Modal Styles */
+.dialog-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.dialog {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  max-width: 600px;
+  width: 90%;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .dialog-header {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid #dee2e6;
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+
+  .dialog-body {
+    padding: 1.5rem;
+    overflow-y: auto;
+    flex: 1;
+  }
+
+  .dialog-footer {
+    padding: 1rem 1.5rem;
+    border-top: 1px solid #dee2e6;
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
+}

flare-ui/tsconfig.app.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

flare-ui/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}