Upload 22 files

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

@@ -0,0 +1,299 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ApiService, API } from '../../services/api.service';
+
+@Component({
+  selector: 'app-apis',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="apis-container">
+      <div class="toolbar">
+        <h2>API Definitions</h2>
+        <div class="toolbar-actions">
+          <button class="btn btn-primary" (click)="createAPI()">
+            New API
+          </button>
+          <button class="btn btn-secondary" disabled>
+            Import
+          </button>
+          <button class="btn btn-secondary" disabled>
+            Export
+          </button>
+          <input
+            type="text"
+            placeholder="Search APIs..."
+            [(ngModel)]="searchTerm"
+            (input)="filterAPIs()"
+            class="search-input"
+          >
+          <label class="checkbox-label">
+            <input
+              type="checkbox"
+              [(ngModel)]="showDeleted"
+              (change)="loadAPIs()"
+            >
+            Display Deleted
+          </label>
+        </div>
+      </div>
+
+      @if (loading) {
+        <div class="loading">
+          <span class="spinner"></span> Loading APIs...
+        </div>
+      } @else if (filteredAPIs.length === 0) {
+        <div class="empty-state">
+          <p>No APIs found.</p>
+          <button class="btn btn-primary" (click)="createAPI()">
+            Create your first API
+          </button>
+        </div>
+      } @else {
+        <table class="table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>URL</th>
+              <th>Method</th>
+              <th>Timeout</th>
+              <th>Auth</th>
+              <th>Deleted</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (api of filteredAPIs; track api.name) {
+              <tr [class.deleted]="api.deleted">
+                <td>{{ api.name }}</td>
+                <td class="url-cell">{{ api.url }}</td>
+                <td>
+                  <span class="method-badge" [class]="'method-' + api.method.toLowerCase()">
+                    {{ api.method }}
+                  </span>
+                </td>
+                <td>{{ api.timeout_seconds }}s</td>
+                <td>
+                  @if (api.auth?.enabled) {
+                    <span class="status-badge enabled">✓</span>
+                  } @else {
+                    <span class="status-badge">✗</span>
+                  }
+                </td>
+                <td>
+                  @if (api.deleted) {
+                    <span class="status-badge deleted">✓</span>
+                  } @else {
+                    <span class="status-badge">✗</span>
+                  }
+                </td>
+                <td class="actions">
+                  <button class="action-btn" title="Edit" (click)="editAPI(api)">
+                    🖊️
+                  </button>
+                  <button class="action-btn" title="Test" (click)="testAPI(api)">
+                    🧪
+                  </button>
+                  <button class="action-btn" title="Duplicate" (click)="duplicateAPI(api)">
+                    📋
+                  </button>
+                  @if (!api.deleted) {
+                    <button class="action-btn danger" title="Delete" (click)="deleteAPI(api)">
+                      🗑️
+                    </button>
+                  }
+                </td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      }
+
+      @if (message) {
+        <div class="alert" [class.alert-success]="!isError" [class.alert-danger]="isError">
+          {{ message }}
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .apis-container {
+      .toolbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1.5rem;
+
+        h2 {
+          margin: 0;
+        }
+
+        .toolbar-actions {
+          display: flex;
+          gap: 0.5rem;
+          align-items: center;
+        }
+      }
+
+      .search-input {
+        padding: 0.375rem 0.75rem;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+        width: 200px;
+      }
+
+      .checkbox-label {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        cursor: pointer;
+      }
+
+      .loading, .empty-state {
+        text-align: center;
+        padding: 3rem;
+        background-color: white;
+        border-radius: 0.25rem;
+
+        p {
+          margin-bottom: 1rem;
+          color: #6c757d;
+        }
+      }
+
+      .url-cell {
+        max-width: 300px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .method-badge {
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.25rem;
+        font-size: 0.75rem;
+        font-weight: 600;
+
+        &.method-get { background-color: #28a745; color: white; }
+        &.method-post { background-color: #007bff; color: white; }
+        &.method-put { background-color: #ffc107; color: #333; }
+        &.method-patch { background-color: #17a2b8; color: white; }
+        &.method-delete { background-color: #dc3545; color: white; }
+      }
+
+      .status-badge {
+        &.enabled { color: #28a745; }
+        &.deleted { color: #dc3545; }
+      }
+
+      .actions {
+        display: flex;
+        gap: 0.25rem;
+      }
+
+      .action-btn {
+        background: none;
+        border: none;
+        cursor: pointer;
+        font-size: 1.1rem;
+        padding: 0.25rem;
+        border-radius: 0.25rem;
+
+        &:hover {
+          background-color: #f8f9fa;
+        }
+
+        &.danger:hover {
+          background-color: #f8d7da;
+        }
+      }
+
+      tr.deleted {
+        opacity: 0.6;
+        background-color: #f8f9fa;
+      }
+    }
+  `]
+})
+export class ApisComponent implements OnInit {
+  private apiService = inject(ApiService);
+
+  apis: API[] = [];
+  filteredAPIs: API[] = [];
+  loading = true;
+  showDeleted = false;
+  searchTerm = '';
+  message = '';
+  isError = false;
+
+  ngOnInit() {
+    this.loadAPIs();
+  }
+
+  loadAPIs() {
+    this.loading = true;
+    this.apiService.getAPIs(this.showDeleted).subscribe({
+      next: (apis) => {
+        this.apis = apis;
+        this.filterAPIs();
+        this.loading = false;
+      },
+      error: (err) => {
+        this.showMessage('Failed to load APIs', true);
+        this.loading = false;
+      }
+    });
+  }
+
+  filterAPIs() {
+    const term = this.searchTerm.toLowerCase();
+    this.filteredAPIs = this.apis.filter(api =>
+      api.name.toLowerCase().includes(term) ||
+      api.url.toLowerCase().includes(term)
+    );
+  }
+
+  createAPI() {
+    // TODO: Open create dialog
+    console.log('Create API - not implemented yet');
+  }
+
+  editAPI(api: API) {
+    // TODO: Open edit dialog
+    console.log('Edit API:', api.name);
+  }
+
+  testAPI(api: API) {
+    // TODO: Test API
+    console.log('Test API:', api.name);
+  }
+
+  duplicateAPI(api: API) {
+    // TODO: Duplicate API
+    console.log('Duplicate API:', api.name);
+  }
+
+  deleteAPI(api: API) {
+    if (confirm(`Are you sure you want to delete "${api.name}"?`)) {
+      this.apiService.deleteAPI(api.name).subscribe({
+        next: () => {
+          this.showMessage(`API "${api.name}" deleted successfully`, false);
+          this.loadAPIs();
+        },
+        error: (err) => {
+          this.showMessage(err.error?.detail || 'Failed to delete API', true);
+        }
+      });
+    }
+  }
+
+  private showMessage(message: string, isError: boolean) {
+    this.message = message;
+    this.isError = isError;
+
+    setTimeout(() => {
+      this.message = '';
+    }, 5000);
+  }
+}

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

@@ -0,0 +1,425 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ApiService, Project } from '../../services/api.service';
+
+@Component({
+  selector: 'app-projects',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="projects-container">
+      <div class="toolbar">
+        <h2>Projects</h2>
+        <div class="toolbar-actions">
+          <button class="btn btn-primary" (click)="createProject()">
+            New Project
+          </button>
+          <button class="btn btn-secondary" disabled>
+            Import Project
+          </button>
+          <input
+            type="text"
+            placeholder="Search projects..."
+            [(ngModel)]="searchTerm"
+            (input)="filterProjects()"
+            class="search-input"
+          >
+          <label class="checkbox-label">
+            <input
+              type="checkbox"
+              [(ngModel)]="showDeleted"
+              (change)="loadProjects()"
+            >
+            Display Deleted
+          </label>
+          <div class="view-toggle">
+            <button [class.active]="viewMode === 'card'" (click)="viewMode = 'card'">
+              Card
+            </button>
+            <button [class.active]="viewMode === 'list'" (click)="viewMode = 'list'">
+              List
+            </button>
+          </div>
+        </div>
+      </div>
+
+      @if (loading) {
+        <div class="loading">
+          <span class="spinner"></span> Loading projects...
+        </div>
+      } @else if (filteredProjects.length === 0) {
+        <div class="empty-state">
+          <p>No projects found.</p>
+          <button class="btn btn-primary" (click)="createProject()">
+            Create your first project
+          </button>
+        </div>
+      } @else {
+        @if (viewMode === 'card') {
+          <div class="project-cards">
+            @for (project of filteredProjects; track project.id) {
+              <div class="project-card" [class.disabled]="!project.enabled" [class.deleted]="project.deleted">
+                <div class="project-icon">🛩️</div>
+                <h3>{{ project.name }}</h3>
+                <p>{{ project.caption || 'No description' }}</p>
+                <div class="project-meta">
+                  <span>Versions: {{ project.versions?.length || 0 }} ({{ getPublishedCount(project) }} published)</span>
+                  <span>Status: {{ project.enabled ? '✓ Enabled' : '✗ Disabled' }}</span>
+                  <span>Last update: {{ getRelativeTime(project.last_update_date) }}</span>
+                </div>
+                <div class="project-actions">
+                  <button class="btn btn-secondary" (click)="editProject(project)">Edit</button>
+                  <button class="btn btn-secondary" (click)="manageVersions(project)">Versions</button>
+                  <button class="btn btn-secondary" (click)="exportProject(project)">Export</button>
+                  <button class="btn btn-secondary" (click)="toggleProject(project)">
+                    {{ project.enabled ? 'Disable' : 'Enable' }}
+                  </button>
+                </div>
+              </div>
+            }
+          </div>
+        } @else {
+          <table class="table">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Caption</th>
+                <th>Versions</th>
+                <th>Enabled</th>
+                <th>Deleted</th>
+                <th>Last Update</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (project of filteredProjects; track project.id) {
+                <tr [class.deleted]="project.deleted">
+                  <td>{{ project.name }}</td>
+                  <td>{{ project.caption || '-' }}</td>
+                  <td>{{ project.versions?.length || 0 }} ({{ getPublishedCount(project) }} published)</td>
+                  <td>
+                    @if (project.enabled) {
+                      <span class="status-badge enabled">✓</span>
+                    } @else {
+                      <span class="status-badge">✗</span>
+                    }
+                  </td>
+                  <td>
+                    @if (project.deleted) {
+                      <span class="status-badge deleted">✓</span>
+                    } @else {
+                      <span class="status-badge">✗</span>
+                    }
+                  </td>
+                  <td>{{ getRelativeTime(project.last_update_date) }}</td>
+                  <td class="actions">
+                    <button class="action-btn" title="Edit" (click)="editProject(project)">🖊️</button>
+                    <button class="action-btn" title="Versions" (click)="manageVersions(project)">📋</button>
+                    <button class="action-btn" title="Export" (click)="exportProject(project)">📤</button>
+                    @if (!project.deleted) {
+                      <button class="action-btn danger" title="Delete" (click)="deleteProject(project)">🗑️</button>
+                    }
+                  </td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        }
+      }
+
+      @if (message) {
+        <div class="alert" [class.alert-success]="!isError" [class.alert-danger]="isError">
+          {{ message }}
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .projects-container {
+      .toolbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1.5rem;
+
+        h2 {
+          margin: 0;
+        }
+
+        .toolbar-actions {
+          display: flex;
+          gap: 0.5rem;
+          align-items: center;
+        }
+      }
+
+      .search-input {
+        padding: 0.375rem 0.75rem;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+        width: 200px;
+      }
+
+      .checkbox-label {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        cursor: pointer;
+      }
+
+      .view-toggle {
+        display: flex;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+        overflow: hidden;
+
+        button {
+          background: white;
+          border: none;
+          padding: 0.375rem 0.75rem;
+          cursor: pointer;
+
+          &.active {
+            background-color: #007bff;
+            color: white;
+          }
+        }
+      }
+
+      .loading, .empty-state {
+        text-align: center;
+        padding: 3rem;
+        background-color: white;
+        border-radius: 0.25rem;
+
+        p {
+          margin-bottom: 1rem;
+          color: #6c757d;
+        }
+      }
+
+      .project-cards {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        gap: 1rem;
+      }
+
+      .project-card {
+        background: white;
+        border: 1px solid #dee2e6;
+        border-radius: 0.5rem;
+        padding: 1.5rem;
+
+        &:hover {
+          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        &.disabled {
+          opacity: 0.7;
+        }
+
+        &.deleted {
+          background-color: #f8f9fa;
+        }
+
+        .project-icon {
+          font-size: 2rem;
+          margin-bottom: 0.5rem;
+        }
+
+        h3 {
+          margin: 0 0 0.5rem 0;
+          font-size: 1.25rem;
+        }
+
+        p {
+          color: #6c757d;
+          margin-bottom: 1rem;
+        }
+
+        .project-meta {
+          font-size: 0.875rem;
+          color: #6c757d;
+          margin-bottom: 1rem;
+
+          span {
+            display: block;
+            margin-bottom: 0.25rem;
+          }
+        }
+
+        .project-actions {
+          display: flex;
+          gap: 0.5rem;
+          flex-wrap: wrap;
+
+          button {
+            flex: 1;
+            min-width: 80px;
+            font-size: 0.875rem;
+            padding: 0.375rem 0.5rem;
+          }
+        }
+      }
+
+      .status-badge {
+        &.enabled { color: #28a745; }
+        &.deleted { color: #dc3545; }
+      }
+
+      .actions {
+        display: flex;
+        gap: 0.25rem;
+      }
+
+      .action-btn {
+        background: none;
+        border: none;
+        cursor: pointer;
+        font-size: 1.1rem;
+        padding: 0.25rem;
+        border-radius: 0.25rem;
+
+        &:hover {
+          background-color: #f8f9fa;
+        }
+
+        &.danger:hover {
+          background-color: #f8d7da;
+        }
+      }
+
+      tr.deleted {
+        opacity: 0.6;
+        background-color: #f8f9fa;
+      }
+    }
+  `]
+})
+export class ProjectsComponent implements OnInit {
+  private apiService = inject(ApiService);
+
+  projects: Project[] = [];
+  filteredProjects: Project[] = [];
+  loading = true;
+  showDeleted = false;
+  searchTerm = '';
+  viewMode: 'card' | 'list' = 'card';
+  message = '';
+  isError = false;
+
+  ngOnInit() {
+    this.loadProjects();
+  }
+
+  loadProjects() {
+    this.loading = true;
+    this.apiService.getProjects(this.showDeleted).subscribe({
+      next: (projects) => {
+        this.projects = projects;
+        this.filterProjects();
+        this.loading = false;
+      },
+      error: (err) => {
+        this.showMessage('Failed to load projects', true);
+        this.loading = false;
+      }
+    });
+  }
+
+  filterProjects() {
+    const term = this.searchTerm.toLowerCase();
+    this.filteredProjects = this.projects.filter(project =>
+      project.name.toLowerCase().includes(term) ||
+      (project.caption || '').toLowerCase().includes(term)
+    );
+  }
+
+  getPublishedCount(project: Project): number {
+    return project.versions?.filter(v => v.published).length || 0;
+  }
+
+  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`;
+  }
+
+  createProject() {
+    // TODO: Open create dialog
+    console.log('Create project - not implemented yet');
+  }
+
+  editProject(project: Project) {
+    // TODO: Open edit dialog
+    console.log('Edit project:', project.name);
+  }
+
+  manageVersions(project: Project) {
+    // TODO: Open versions dialog
+    console.log('Manage versions:', project.name);
+  }
+
+  exportProject(project: Project) {
+    this.apiService.exportProject(project.id).subscribe({
+      next: (data) => {
+        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${project.name}_export.json`;
+        a.click();
+        window.URL.revokeObjectURL(url);
+        this.showMessage(`Project "${project.name}" exported successfully`, false);
+      },
+      error: (err) => {
+        this.showMessage('Failed to export project', true);
+      }
+    });
+  }
+
+  toggleProject(project: Project) {
+    this.apiService.toggleProject(project.id).subscribe({
+      next: (result) => {
+        project.enabled = result.enabled;
+        this.showMessage(`Project "${project.name}" ${result.enabled ? 'enabled' : 'disabled'}`, false);
+      },
+      error: (err) => {
+        this.showMessage('Failed to toggle project', true);
+      }
+    });
+  }
+
+  deleteProject(project: Project) {
+    if (confirm(`Are you sure you want to delete "${project.name}"?`)) {
+      this.apiService.deleteProject(project.id).subscribe({
+        next: () => {
+          this.showMessage(`Project "${project.name}" deleted successfully`, false);
+          this.loadProjects();
+        },
+        error: (err) => {
+          this.showMessage(err.error?.detail || 'Failed to delete project', true);
+        }
+      });
+    }
+  }
+
+  private showMessage(message: string, isError: boolean) {
+    this.message = message;
+    this.isError = isError;
+
+    setTimeout(() => {
+      this.message = '';
+    }, 5000);
+  }
+}

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

@@ -0,0 +1,338 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ApiService } from '../../services/api.service';
+
+interface TestResult {
+  name: string;
+  status: 'PASS' | 'FAIL' | 'RUNNING';
+  duration_ms?: number;
+  error?: string;
+}
+
+interface TestRun {
+  test_type: string;
+  start_time: string;
+  tests: TestResult[];
+  summary: {
+    total: number;
+    passed: number;
+    failed: number;
+    duration_ms: number;
+  };
+}
+
+@Component({
+  selector: 'app-test',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="test-container">
+      <h2>System Tests</h2>
+
+      <div class="test-controls">
+        <button class="btn btn-primary" (click)="runAllTests()" [disabled]="running">
+          Run All Tests
+        </button>
+        <button class="btn btn-secondary" (click)="runSelectedTests()" [disabled]="running || selectedTests.length === 0">
+          Run Selected
+        </button>
+        <button class="btn btn-danger" (click)="stopTests()" [disabled]="!running">
+          Stop
+        </button>
+      </div>
+
+      <div class="test-categories">
+        <div class="category">
+          <label>
+            <input type="checkbox" [(ngModel)]="allSelected" (change)="toggleAll()">
+            <strong>All Tests</strong>
+          </label>
+        </div>
+        <div class="category">
+          <label>
+            <input type="checkbox" [(ngModel)]="categories.ui" (change)="updateSelection()">
+            UI Tests (15 tests)
+          </label>
+          <div class="sub-tests" *ngIf="categories.ui">
+            <label><input type="checkbox"> Login Flow</label>
+            <label><input type="checkbox"> Project CRUD</label>
+            <label><input type="checkbox"> Version Management</label>
+          </div>
+        </div>
+        <div class="category">
+          <label>
+            <input type="checkbox" [(ngModel)]="categories.backend" (change)="updateSelection()">
+            Backend Tests (22 tests)
+          </label>
+          <div class="sub-tests" *ngIf="categories.backend">
+            <label><input type="checkbox"> Authentication</label>
+            <label><input type="checkbox"> API Endpoints</label>
+            <label><input type="checkbox"> Race Conditions</label>
+          </div>
+        </div>
+        <div class="category">
+          <label>
+            <input type="checkbox" [(ngModel)]="categories.integration" (change)="updateSelection()">
+            Integration Tests (18 tests)
+          </label>
+        </div>
+        <div class="category">
+          <label>
+            <input type="checkbox" [(ngModel)]="categories.spark" (change)="updateSelection()">
+            Spark Tests (8 tests)
+          </label>
+        </div>
+      </div>
+
+      @if (currentRun) {
+        <div class="test-results">
+          <h3>Test Results:</h3>
+          <div class="results-list">
+            @for (test of currentRun.tests; track test.name) {
+              <div class="test-result" [class.pass]="test.status === 'PASS'" [class.fail]="test.status === 'FAIL'">
+                @if (test.status === 'PASS') {
+                  <span class="status">✓</span>
+                } @else if (test.status === 'FAIL') {
+                  <span class="status">✗</span>
+                } @else {
+                  <span class="status spinner"></span>
+                }
+                <span class="name">{{ test.name }}</span>
+                @if (test.duration_ms) {
+                  <span class="duration">{{ test.duration_ms }}ms</span>
+                }
+                @if (test.error) {
+                  <div class="error">{{ test.error }}</div>
+                }
+              </div>
+            }
+          </div>
+
+          @if (!running && currentRun.summary) {
+            <div class="test-summary">
+              <div class="progress-bar">
+                <div
+                  class="progress-fill"
+                  [style.width.%]="(currentRun.summary.passed / currentRun.summary.total) * 100"
+                  [class.success]="currentRun.summary.failed === 0"
+                  [class.warning]="currentRun.summary.failed > 0"
+                ></div>
+              </div>
+              <div class="summary-text">
+                Progress: {{ currentRun.summary.passed + currentRun.summary.failed }}/{{ currentRun.summary.total }}
+                ({{ ((currentRun.summary.passed / currentRun.summary.total) * 100).toFixed(0) }}%)
+              </div>
+              <div class="summary-stats">
+                Passed: {{ currentRun.summary.passed }} |
+                Failed: {{ currentRun.summary.failed }} |
+                Total time: {{ (currentRun.summary.duration_ms / 1000).toFixed(1) }}s
+              </div>
+            </div>
+          }
+        </div>
+      }
+
+      @if (!currentRun && !running) {
+        <div class="empty-state">
+          <p>No test results yet. Click "Run All Tests" to start.</p>
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .test-container {
+      h2 {
+        margin-bottom: 1.5rem;
+      }
+    }
+
+    .test-controls {
+      display: flex;
+      gap: 0.5rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .test-categories {
+      background: white;
+      border: 1px solid #dee2e6;
+      border-radius: 0.25rem;
+      padding: 1rem;
+      margin-bottom: 1.5rem;
+
+      .category {
+        margin-bottom: 0.5rem;
+
+        label {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          cursor: pointer;
+
+          input[type="checkbox"] {
+            cursor: pointer;
+          }
+        }
+      }
+
+      .sub-tests {
+        margin-left: 1.5rem;
+        margin-top: 0.5rem;
+
+        label {
+          display: block;
+          margin-bottom: 0.25rem;
+          font-weight: normal;
+          color: #6c757d;
+        }
+      }
+    }
+
+    .test-results {
+      background: white;
+      border: 1px solid #dee2e6;
+      border-radius: 0.25rem;
+      padding: 1rem;
+
+      h3 {
+        margin-top: 0;
+        margin-bottom: 1rem;
+      }
+
+      .results-list {
+        max-height: 400px;
+        overflow-y: auto;
+        margin-bottom: 1rem;
+      }
+
+      .test-result {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem;
+        border-bottom: 1px solid #f0f0f0;
+
+        &.pass .status { color: #28a745; }
+        &.fail .status { color: #dc3545; }
+
+        .status {
+          width: 20px;
+          text-align: center;
+        }
+
+        .name {
+          flex: 1;
+        }
+
+        .duration {
+          color: #6c757d;
+          font-size: 0.875rem;
+        }
+
+        .error {
+          width: 100%;
+          margin-top: 0.5rem;
+          padding: 0.5rem;
+          background-color: #f8d7da;
+          color: #721c24;
+          border-radius: 0.25rem;
+          font-size: 0.875rem;
+        }
+      }
+    }
+
+    .test-summary {
+      border-top: 1px solid #dee2e6;
+      padding-top: 1rem;
+
+      .progress-bar {
+        height: 20px;
+        background-color: #e9ecef;
+        border-radius: 0.25rem;
+        overflow: hidden;
+        margin-bottom: 0.5rem;
+
+        .progress-fill {
+          height: 100%;
+          transition: width 0.3s ease;
+
+          &.success { background-color: #28a745; }
+          &.warning { background-color: #ffc107; }
+        }
+      }
+
+      .summary-text, .summary-stats {
+        text-align: center;
+        color: #6c757d;
+        margin-bottom: 0.5rem;
+      }
+    }
+
+    .empty-state {
+      text-align: center;
+      padding: 3rem;
+      background-color: white;
+      border-radius: 0.25rem;
+
+      p {
+        color: #6c757d;
+      }
+    }
+  `]
+})
+export class TestComponent {
+  private apiService = inject(ApiService);
+
+  running = false;
+  allSelected = false;
+  categories = {
+    ui: false,
+    backend: false,
+    integration: false,
+    spark: false
+  };
+  selectedTests: string[] = [];
+  currentRun: TestRun | null = null;
+
+  toggleAll() {
+    this.categories.ui = this.allSelected;
+    this.categories.backend = this.allSelected;
+    this.categories.integration = this.allSelected;
+    this.categories.spark = this.allSelected;
+    this.updateSelection();
+  }
+
+  updateSelection() {
+    this.selectedTests = [];
+    if (this.categories.ui) this.selectedTests.push('ui');
+    if (this.categories.backend) this.selectedTests.push('backend');
+    if (this.categories.integration) this.selectedTests.push('integration');
+    if (this.categories.spark) this.selectedTests.push('spark');
+
+    this.allSelected = this.selectedTests.length === 4;
+  }
+
+  runAllTests() {
+    this.running = true;
+    this.apiService.runTests('all').subscribe({
+      next: (result) => {
+        this.currentRun = result;
+        this.running = false;
+      },
+      error: (err) => {
+        console.error('Test run failed:', err);
+        this.running = false;
+      }
+    });
+  }
+
+  runSelectedTests() {
+    // TODO: Implement selected tests
+    console.log('Running selected tests:', this.selectedTests);
+    this.runAllTests(); // For now, just run all
+  }
+
+  stopTests() {
+    this.running = false;
+    // TODO: Implement stop functionality
+  }
+}

flare-ui/src/app/components/user-info/user-info.component.ts

@@ -0,0 +1,83 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-user-info',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="user-info-container">
+      <h2>User Information</h2>
+
+      <div class="card">
+        <div class="card-body">
+          <p class="text-muted">Password change functionality coming soon...</p>
+
+          <form (ngSubmit)="changePassword()" #passwordForm="ngForm">
+            <div class="form-group">
+              <label for="currentPassword">Current Password</label>
+              <input
+                type="password"
+                id="currentPassword"
+                name="currentPassword"
+                [(ngModel)]="currentPassword"
+                required
+                disabled
+              >
+            </div>
+
+            <div class="form-group">
+              <label for="newPassword">New Password</label>
+              <input
+                type="password"
+                id="newPassword"
+                name="newPassword"
+                [(ngModel)]="newPassword"
+                required
+                disabled
+              >
+            </div>
+
+            <div class="form-group">
+              <label for="confirmPassword">Confirm New Password</label>
+              <input
+                type="password"
+                id="confirmPassword"
+                name="confirmPassword"
+                [(ngModel)]="confirmPassword"
+                required
+                disabled
+              >
+            </div>
+
+            <button type="submit" class="btn btn-primary" disabled>
+              Change Password
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .user-info-container {
+      h2 {
+        margin-bottom: 1.5rem;
+      }
+    }
+
+    .text-muted {
+      color: #6c757d;
+      margin-bottom: 1rem;
+    }
+  `]
+})
+export class UserInfoComponent {
+  currentPassword = '';
+  newPassword = '';
+  confirmPassword = '';
+
+  changePassword() {
+    console.log('Password change not implemented yet');
+  }
+}