Switch to angular

2025-10-14 23:32:38 -05:00
parent 1ce27976a9
commit 82e8cea256
72 changed files with 20815 additions and 991 deletions
--- a/frontend/.editorconfig
+++ b/frontend/.editorconfig
@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,151 @@
+# Test Artifact Data Lake - Angular Frontend
+
+This is the Angular 19 frontend for the Test Artifact Data Lake application. It replaces the static HTML/JS implementation with a modern, component-based architecture.
+
+## Features
+
+✅ **Multi-component Architecture**: Built with reusable Angular components
+✅ **Tab Navigation**: Clean tab-based interface for Artifacts, Upload, and Query
+✅ **Event ID Support**: Group multiple artifacts under the same event ID
+✅ **Expandable Binaries Display**: Show first 4 binaries, expandable for more
+✅ **Advanced Tag Management**: Create tags on-the-spot with database persistence
+✅ **Scoped Tags**: Organize tags by scope (project, environment, priority, etc.)
+✅ **Comprehensive Filtering**: Filter artifacts by all table criteria
+✅ **Real-time Search**: As-you-type filtering in query form
+✅ **Responsive Design**: Mobile-friendly interface
+
+## Components
+
+### Core Components
+- **TabNavigationComponent**: Manages tab switching between Artifacts, Upload, and Query
+- **ArtifactsTableComponent**: Displays artifacts with expandable binaries/tags and Event ID support
+- **UploadFormComponent**: File upload with Event ID and binaries support
+- **QueryFormComponent**: Advanced search with real-time filtering
+- **TagManagerComponent**: On-the-spot tag creation with scoped tags
+
+### Services
+- **ArtifactService**: Handles all artifact-related API calls
+- **ApiService**: Manages general API information
+
+## Development
+
+### Prerequisites
+- Node.js (v18 or later)
+- Angular CLI 19
+
+### Setup
+```bash
+cd frontend
+npm install
+```
+
+### Development Server
+```bash
+npm start
+# or
+ng serve
+```
+The app will be available at `http://localhost:4200`
+
+### Build for Production
+```bash
+npm run build
+# or
+ng build
+```
+Built files will be in `dist/frontend/`
+
+## API Integration
+
+The frontend expects the backend API to be available at:
+- Development: Same origin as the frontend
+- Production: Configurable via environment files
+
+### Required API Endpoints
+- `GET /api` - API information
+- `GET /api/v1/artifacts/` - List artifacts
+- `GET /api/v1/artifacts/{id}` - Get artifact details
+- `POST /api/v1/artifacts/upload` - Upload artifact
+- `DELETE /api/v1/artifacts/{id}` - Delete artifact
+- `GET /api/v1/artifacts/{id}/download` - Download artifact
+- `POST /api/v1/artifacts/query` - Query artifacts
+- `POST /api/v1/seed/generate/{count}` - Generate seed data
+- `GET /api/v1/tags` - List all tags
+- `POST /api/v1/tags` - Create tag
+- `POST /api/v1/artifacts/{id}/tags` - Add tag to artifact
+- `DELETE /api/v1/artifacts/{id}/tags/{tag_id}` - Remove tag from artifact
+
+## Key Features Implementation
+
+### Event ID Support
+Each artifact can be assigned an Event ID to group related artifacts together. This is displayed prominently in the table and can be used for filtering.
+
+### Expandable Binaries
+When an artifact has more than 4 associated binaries, only the first 4 are shown with a "+X more" button to expand and see all binaries.
+
+### Advanced Tag Management
+- Create tags on-the-spot directly in the table
+- Organize tags by scope (project, environment, priority, category, status)
+- Tags persist in the database across app restarts
+- Visual indicators show which tags are already attached
+- Quick-add existing tags from a categorized list
+
+### Comprehensive Filtering
+The query form provides real-time filtering by:
+- Filename (partial match)
+- File type
+- Test name
+- Test suite
+- Test result
+- Tags (comma-separated)
+- Date range
+
+Filters are applied immediately as you type, and active filters are displayed as visual chips.
+
+## Architecture Improvements
+
+### From Static to Angular
+The original static JavaScript implementation has been converted to:
+
+1. **Component-based Architecture**: Each major feature is now a reusable component
+2. **Type Safety**: Full TypeScript support with proper interfaces
+3. **Reactive Programming**: Uses RxJS observables for API calls
+4. **State Management**: Centralized state management through services
+5. **Modular Design**: Easy to extend and maintain
+
+### Benefits
+- **Maintainability**: Clear separation of concerns
+- **Reusability**: Components can be reused and extended
+- **Testing**: Angular's testing framework support
+- **Performance**: Optimized change detection and lazy loading
+- **Developer Experience**: Hot reload, TypeScript, and Angular DevTools
+
+## Deployment
+
+### Development
+The Angular frontend can be served during development using `ng serve` and will proxy API calls to the backend.
+
+### Production
+Build the application and serve the static files from any web server. Ensure the backend API is accessible from the same domain or configure CORS appropriately.
+
+### Integration with Existing Backend
+The Angular frontend is designed to be a drop-in replacement for the static frontend. Simply:
+
+1. Build the Angular app: `npm run build`
+2. Copy contents of `dist/frontend/` to your static files directory
+3. Update your backend to serve the new `index.html`
+4. Ensure API endpoints match the expected interface
+
+## Browser Support
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Future Enhancements
+- Drag and drop file upload
+- Bulk operations
+- Advanced data visualization
+- Real-time updates via WebSocket
+- Export functionality
+- User authentication integration
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -0,0 +1,111 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm",
+    "analytics": false
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "frontend": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/frontend",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "proxyConfig": "proxy.conf.json"
+          },
+          "configurations": {
+            "production": {
+              "buildTarget": "frontend:build:production"
+            },
+            "development": {
+              "buildTarget": "frontend:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "frontend",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/cdk": "^19.2.19",
+    "@angular/common": "^19.2.0",
+    "@angular/compiler": "^19.2.0",
+    "@angular/core": "^19.2.0",
+    "@angular/forms": "^19.2.0",
+    "@angular/material": "^19.2.19",
+    "@angular/platform-browser": "^19.2.0",
+    "@angular/platform-browser-dynamic": "^19.2.0",
+    "@angular/router": "^19.2.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.2.17",
+    "@angular/cli": "^19.2.17",
+    "@angular/compiler-cli": "^19.2.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.6.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.7.2"
+  }
+}
--- a/frontend/proxy.conf.json
+++ b/frontend/proxy.conf.json
@@ -0,0 +1,11 @@
+{
+  "/api": {
+    "target": "http://localhost:8000",
+    "secure": false,
+    "changeOrigin": true,
+    "logLevel": "debug",
+    "pathRewrite": {
+      "^/api": "/api"
+    }
+  }
+}
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -0,0 +1,125 @@
+<div class="app-container">
+  <!-- Material Toolbar Header -->
+  <mat-toolbar color="primary" class="app-toolbar">
+    <mat-icon class="app-icon">storage</mat-icon>
+    <span class="app-title">{{ title }}</span>
+    <span class="spacer"></span>
+    <div class="header-info" *ngIf="apiInfo">
+      <mat-chip-set>
+        <mat-chip>
+          <mat-icon matChipAvatar>settings</mat-icon>
+          {{ apiInfo.deployment_mode }}
+        </mat-chip>
+        <mat-chip>
+          <mat-icon matChipAvatar>folder</mat-icon>
+          {{ apiInfo.storage_backend }}
+        </mat-chip>
+      </mat-chip-set>
+    </div>
+  </mat-toolbar>
+
+  <!-- Tab Navigation -->
+  <mat-tab-group [(selectedIndex)]="selectedTabIndex" class="main-tabs">
+    <!-- Artifacts Tab -->
+    <mat-tab label="Artifacts">
+      <ng-template matTabContent>
+        <div class="tab-content-wrapper">
+          <div class="content-header">
+            <h2>
+              <mat-icon>storage</mat-icon>
+              Artifacts ({{ artifacts.length }})
+            </h2>
+            <button mat-raised-button color="primary" (click)="loadArtifacts()">
+              <mat-icon>refresh</mat-icon>
+              Refresh
+            </button>
+          </div>
+
+          <table mat-table [dataSource]="artifacts" class="artifacts-table mat-elevation-z4">
+            <!-- ID Column -->
+            <ng-container matColumnDef="id">
+              <th mat-header-cell *matHeaderCellDef>ID</th>
+              <td mat-cell *matCellDef="let artifact">{{ artifact.id }}</td>
+            </ng-container>
+
+            <!-- Filename Column -->
+            <ng-container matColumnDef="filename">
+              <th mat-header-cell *matHeaderCellDef>Filename</th>
+              <td mat-cell *matCellDef="let artifact" class="filename-cell">
+                <mat-icon class="file-icon">description</mat-icon>
+                {{ artifact.filename }}
+              </td>
+            </ng-container>
+
+            <!-- Type Column -->
+            <ng-container matColumnDef="file_type">
+              <th mat-header-cell *matHeaderCellDef>Type</th>
+              <td mat-cell *matCellDef="let artifact">
+                <mat-chip class="type-chip">{{ artifact.file_type }}</mat-chip>
+              </td>
+            </ng-container>
+
+            <!-- Size Column -->
+            <ng-container matColumnDef="file_size">
+              <th mat-header-cell *matHeaderCellDef>Size</th>
+              <td mat-cell *matCellDef="let artifact">{{ formatBytes(artifact.file_size) }}</td>
+            </ng-container>
+
+            <!-- Test Name Column -->
+            <ng-container matColumnDef="test_name">
+              <th mat-header-cell *matHeaderCellDef>Test Name</th>
+              <td mat-cell *matCellDef="let artifact">{{ artifact.test_name || '-' }}</td>
+            </ng-container>
+
+            <!-- Test Result Column -->
+            <ng-container matColumnDef="test_result">
+              <th mat-header-cell *matHeaderCellDef>Result</th>
+              <td mat-cell *matCellDef="let artifact">
+                <mat-chip *ngIf="artifact.test_result" [class]="'result-' + artifact.test_result">
+                  {{ artifact.test_result }}
+                </mat-chip>
+                <span *ngIf="!artifact.test_result" class="text-muted">-</span>
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+          </table>
+        </div>
+      </ng-template>
+    </mat-tab>
+
+    <!-- Upload Tab -->
+    <mat-tab label="Upload">
+      <ng-template matTabContent>
+        <div class="tab-content-wrapper">
+          <div class="content-header">
+            <h2>
+              <mat-icon>cloud_upload</mat-icon>
+              Upload Artifacts
+            </h2>
+          </div>
+          <app-upload-form (uploadSuccess)="onUploadSuccess()"></app-upload-form>
+        </div>
+      </ng-template>
+    </mat-tab>
+
+    <!-- Query Tab -->
+    <mat-tab label="Query">
+      <ng-template matTabContent>
+        <div class="tab-content-wrapper">
+          <div class="content-header">
+            <h2>
+              <mat-icon>search</mat-icon>
+              Query Artifacts
+            </h2>
+          </div>
+          <app-query-form
+            (queryResults)="onQueryResults($event)"
+            (filtersChange)="onFiltersChange($event)">
+          </app-query-form>
+        </div>
+      </ng-template>
+    </mat-tab>
+  </mat-tab-group>
+</div>
--- a/frontend/src/app/app.component.scss
+++ b/frontend/src/app/app.component.scss
@@ -0,0 +1,244 @@
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f5f5f5;
+}
+
+.app-toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+
+.app-icon {
+  margin-right: 12px;
+}
+
+.app-title {
+  font-size: 20px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+.header-info {
+  mat-chip-set {
+    mat-chip {
+      background-color: rgba(255, 255, 255, 0.2) !important;
+      color: white !important;
+
+      mat-icon {
+        color: white !important;
+      }
+    }
+  }
+}
+
+// Tab Group Styling
+.main-tabs {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: white;
+
+  ::ng-deep {
+    .mat-mdc-tab-body-wrapper {
+      flex: 1;
+      padding: 0;
+    }
+
+    .mat-mdc-tab-header {
+      background: white;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.08);
+    }
+
+    .mat-mdc-tab-labels {
+      padding: 0 24px;
+    }
+
+    .mat-mdc-tab {
+      min-width: 120px;
+      height: 56px;
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: 0.5px;
+      text-transform: uppercase;
+    }
+  }
+}
+
+// Tab Content Wrapper
+.tab-content-wrapper {
+  padding: 24px;
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
+  min-height: calc(100vh - 180px);
+}
+
+// Content Header
+.content-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid #e0e0e0;
+
+  h2 {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin: 0;
+    font-size: 24px;
+    font-weight: 500;
+    color: #333;
+
+    mat-icon {
+      color: #3f51b5;
+      font-size: 28px;
+      width: 28px;
+      height: 28px;
+    }
+  }
+
+  button {
+    mat-icon {
+      margin-right: 8px;
+    }
+  }
+}
+
+// Artifacts Table Styling
+.artifacts-table {
+  width: 100%;
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+
+  th.mat-mdc-header-cell {
+    background: #f8f9fa;
+    color: #333;
+    font-weight: 600;
+    font-size: 14px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 16px 12px;
+    border-bottom: 2px solid #e0e0e0;
+  }
+
+  td.mat-mdc-cell {
+    padding: 16px 12px;
+    font-size: 14px;
+    color: #555;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  tr.mat-mdc-row {
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: #f8f9fa;
+    }
+  }
+
+  .filename-cell {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 500;
+
+    .file-icon {
+      color: #3f51b5;
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .type-chip {
+    background-color: #e3f2fd !important;
+    color: #1976d2 !important;
+    font-weight: 500;
+    font-size: 12px;
+    padding: 4px 12px;
+    height: 28px;
+  }
+
+  .text-muted {
+    color: #999;
+  }
+}
+
+// Result Chips
+.result-pass {
+  background-color: #e8f5e9 !important;
+  color: #2e7d32 !important;
+  font-weight: 600;
+}
+
+.result-fail {
+  background-color: #ffebee !important;
+  color: #c62828 !important;
+  font-weight: 600;
+}
+
+.result-skip {
+  background-color: #fff3e0 !important;
+  color: #ef6c00 !important;
+  font-weight: 600;
+}
+
+.result-error {
+  background-color: #fce4ec !important;
+  color: #c2185b !important;
+  font-weight: 600;
+}
+
+// Responsive Design
+@media (max-width: 768px) {
+  .tab-content-wrapper {
+    padding: 16px;
+  }
+
+  .app-title {
+    font-size: 16px;
+  }
+
+  .header-info {
+    display: none;
+  }
+
+  .content-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+
+    h2 {
+      font-size: 20px;
+    }
+  }
+
+  .artifacts-table {
+    font-size: 12px;
+
+    th.mat-mdc-header-cell,
+    td.mat-mdc-cell {
+      padding: 12px 8px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .artifacts-table {
+    th.mat-mdc-header-cell:nth-child(n+5),
+    td.mat-mdc-cell:nth-child(n+5) {
+      display: none;
+    }
+  }
+}
--- a/frontend/src/app/app.component.spec.ts
+++ b/frontend/src/app/app.component.spec.ts
@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'frontend' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('frontend');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, frontend');
+  });
+});
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -0,0 +1,93 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { UploadFormComponent } from './components/upload-form/upload-form.component';
+import { QueryFormComponent } from './components/query-form/query-form.component';
+import { ApiService } from './services/api.service';
+import { ArtifactService } from './services/artifact.service';
+import { ApiInfo, Artifact } from './models/artifact.interface';
+
+@Component({
+  selector: 'app-root',
+  imports: [
+    CommonModule,
+    MatToolbarModule,
+    MatTableModule,
+    MatTabsModule,
+    MatChipsModule,
+    MatIconModule,
+    MatButtonModule,
+    UploadFormComponent,
+    QueryFormComponent
+  ],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss'
+})
+export class AppComponent implements OnInit {
+  title = 'Test Artifact Data Lake';
+  apiInfo: ApiInfo | null = null;
+  artifacts: Artifact[] = [];
+  displayedColumns: string[] = ['id', 'filename', 'file_type', 'file_size', 'test_name', 'test_result'];
+  selectedTabIndex = 0;
+
+  constructor(
+    private apiService: ApiService,
+    private artifactService: ArtifactService
+  ) {}
+
+  ngOnInit(): void {
+    this.loadApiInfo();
+    this.loadArtifacts();
+  }
+
+  loadApiInfo(): void {
+    this.apiService.getApiInfo().subscribe({
+      next: (info) => {
+        this.apiInfo = info;
+      },
+      error: (error) => {
+        console.error('Error loading API info:', error);
+      }
+    });
+  }
+
+  loadArtifacts(): void {
+    this.artifactService.getArtifacts().subscribe({
+      next: (artifacts) => {
+        console.log('Loaded artifacts:', artifacts.length);
+        this.artifacts = artifacts;
+      },
+      error: (error) => {
+        console.error('Error loading artifacts:', error);
+      }
+    });
+  }
+
+  onUploadSuccess(): void {
+    this.loadArtifacts();
+    this.selectedTabIndex = 0; // Switch back to artifacts tab
+  }
+
+  onQueryResults(artifacts: Artifact[]): void {
+    this.artifacts = artifacts;
+    this.selectedTabIndex = 0; // Switch to artifacts tab to show results
+  }
+
+  onFiltersChange(filters: any): void {
+    // Filters will be handled by the query component
+    console.log('Filters changed:', filters);
+  }
+
+  formatBytes(bytes: number): string {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+  }
+}
--- a/frontend/src/app/app.config.ts
+++ b/frontend/src/app/app.config.ts
@@ -0,0 +1,13 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideHttpClient()
+  ]
+};
--- a/frontend/src/app/app.routes.ts
+++ b/frontend/src/app/app.routes.ts
@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];
--- a/frontend/src/app/components/artifacts-table/artifacts-table.component.html
+++ b/frontend/src/app/components/artifacts-table/artifacts-table.component.html
@@ -0,0 +1,283 @@
+<div class="artifacts-section">
+  <!-- Debug Loading State -->
+  <div style="background: red; color: white; padding: 10px; margin: 10px;">
+    LOADING STATE: {{ loading ? 'TRUE (Loading...)' : 'FALSE (Not Loading)' }}
+  </div>
+
+  <!-- Toolbar -->
+  <mat-card class="toolbar-card">
+    <mat-card-content>
+      <div class="toolbar">
+        <div class="toolbar-buttons">
+          <button mat-raised-button color="primary" (click)="loadArtifacts()">
+            <mat-icon>refresh</mat-icon>
+            Refresh
+          </button>
+          <button mat-raised-button color="accent" (click)="generateSeedData()">
+            <mat-icon>scatter_plot</mat-icon>
+            Generate Seed Data
+          </button>
+        </div>
+        <mat-chip-set class="count-chip">
+          <mat-chip>
+            <mat-icon matChipAvatar>storage</mat-icon>
+            {{ filteredArtifacts.length }} artifacts
+          </mat-chip>
+        </mat-chip-set>
+      </div>
+    </mat-card-content>
+  </mat-card>
+
+  <!-- Loading Spinner -->
+  <div *ngIf="loading" class="loading-container">
+    <mat-spinner diameter="50"></mat-spinner>
+    <p>Loading artifacts...</p>
+  </div>
+
+  <!-- Simple List Test (No Material Components) -->
+  <div *ngIf="!loading" style="background: lightgreen; padding: 20px; margin: 20px;">
+    <h3>Simple List Test</h3>
+    <p><strong>Filtered Artifacts Count:</strong> {{ filteredArtifacts.length }}</p>
+    <div *ngFor="let artifact of filteredArtifacts.slice(0, 5)" style="border: 1px solid black; padding: 10px; margin: 5px;">
+      <strong>ID:</strong> {{ artifact.id }} |
+      <strong>Filename:</strong> {{ artifact.filename }} |
+      <strong>Type:</strong> {{ artifact.file_type }}
+    </div>
+  </div>
+
+  <!-- Material Table -->
+  <mat-card *ngIf="!loading" class="table-card">
+    <div class="table-container">
+      <table mat-table [dataSource]="filteredArtifacts" class="artifacts-table">
+
+        <!-- ID Column -->
+        <ng-container matColumnDef="id">
+          <th mat-header-cell *matHeaderCellDef>ID</th>
+          <td mat-cell *matCellDef="let artifact">
+            <strong>{{ artifact.id }}</strong>
+          </td>
+        </ng-container>
+
+        <!-- Event ID Column -->
+        <ng-container matColumnDef="eventId">
+          <th mat-header-cell *matHeaderCellDef>Event ID</th>
+          <td mat-cell *matCellDef="let artifact">
+            <mat-chip *ngIf="artifact.event_id" color="primary">
+              {{ artifact.event_id }}
+            </mat-chip>
+            <span *ngIf="!artifact.event_id" class="text-muted">{{ artifact.id }}</span>
+          </td>
+        </ng-container>
+
+        <!-- Filename Column -->
+        <ng-container matColumnDef="filename">
+          <th mat-header-cell *matHeaderCellDef>Filename</th>
+          <td mat-cell *matCellDef="let artifact">
+            <button mat-button (click)="showDetail(artifact)" class="filename-link">
+              <mat-icon>description</mat-icon>
+              {{ artifact.filename }}
+            </button>
+          </td>
+        </ng-container>
+
+        <!-- Type Column -->
+        <ng-container matColumnDef="type">
+          <th mat-header-cell *matHeaderCellDef>Type</th>
+          <td mat-cell *matCellDef="let artifact">
+            <mat-chip class="type-chip">{{ artifact.file_type }}</mat-chip>
+          </td>
+        </ng-container>
+
+        <!-- Size Column -->
+        <ng-container matColumnDef="size">
+          <th mat-header-cell *matHeaderCellDef>Size</th>
+          <td mat-cell *matCellDef="let artifact">{{ formatBytes(artifact.file_size) }}</td>
+        </ng-container>
+
+        <!-- Binaries Column -->
+        <ng-container matColumnDef="binaries">
+          <th mat-header-cell *matHeaderCellDef>Binaries</th>
+          <td mat-cell *matCellDef="let artifact" class="binaries-cell">
+            <div *ngIf="artifact.binaries && artifact.binaries.length > 0; else noBinaries">
+              <mat-chip-set>
+                <mat-chip *ngFor="let binary of getVisibleBinaries(artifact.binaries)" class="binary-chip">
+                  <mat-icon matChipAvatar>code</mat-icon>
+                  {{ binary }}
+                </mat-chip>
+                <mat-chip
+                  *ngIf="getHiddenBinariesCount(artifact.binaries) > 0"
+                  (click)="toggleBinariesExpansion(artifact.id)"
+                  class="expand-chip">
+                  <span *ngIf="!expandedBinaries[artifact.id]">
+                    +{{ getHiddenBinariesCount(artifact.binaries) }} more
+                  </span>
+                  <span *ngIf="expandedBinaries[artifact.id]">- less</span>
+                </mat-chip>
+              </mat-chip-set>
+              <mat-chip-set *ngIf="expandedBinaries[artifact.id]" class="expanded-binaries">
+                <mat-chip *ngFor="let binary of artifact.binaries.slice(4)" class="binary-chip">
+                  <mat-icon matChipAvatar>code</mat-icon>
+                  {{ binary }}
+                </mat-chip>
+              </mat-chip-set>
+            </div>
+            <ng-template #noBinaries>
+              <span class="text-muted">-</span>
+            </ng-template>
+          </td>
+        </ng-container>
+
+        <!-- Test Name Column -->
+        <ng-container matColumnDef="testName">
+          <th mat-header-cell *matHeaderCellDef>Test Name</th>
+          <td mat-cell *matCellDef="let artifact">
+            <span>{{ artifact.test_name || '-' }}</span>
+          </td>
+        </ng-container>
+
+        <!-- Suite Column -->
+        <ng-container matColumnDef="suite">
+          <th mat-header-cell *matHeaderCellDef>Suite</th>
+          <td mat-cell *matCellDef="let artifact">
+            <span>{{ artifact.test_suite || '-' }}</span>
+          </td>
+        </ng-container>
+
+        <!-- Result Column -->
+        <ng-container matColumnDef="result">
+          <th mat-header-cell *matHeaderCellDef>Result</th>
+          <td mat-cell *matCellDef="let artifact">
+            <mat-chip
+              *ngIf="artifact.test_result"
+              [class]="'result-' + artifact.test_result">
+              <mat-icon matChipAvatar>{{ getResultIcon(artifact.test_result) }}</mat-icon>
+              {{ artifact.test_result }}
+            </mat-chip>
+            <span *ngIf="!artifact.test_result" class="text-muted">-</span>
+          </td>
+        </ng-container>
+
+        <!-- Tags Column -->
+        <ng-container matColumnDef="tags">
+          <th mat-header-cell *matHeaderCellDef>Tags</th>
+          <td mat-cell *matCellDef="let artifact" class="tags-cell">
+            <div *ngIf="artifact.tags && artifact.tags.length > 0; else noTags">
+              <mat-chip-set>
+                <mat-chip *ngFor="let tag of getVisibleTags(artifact.tags)" class="tag-chip">
+                  {{ tag }}
+                </mat-chip>
+                <mat-chip
+                  *ngIf="getHiddenTagsCount(artifact.tags) > 0"
+                  (click)="toggleTagsExpansion(artifact.id)"
+                  class="expand-chip">
+                  <span *ngIf="!expandedTags[artifact.id]">
+                    +{{ getHiddenTagsCount(artifact.tags) }} more
+                  </span>
+                  <span *ngIf="expandedTags[artifact.id]">- less</span>
+                </mat-chip>
+              </mat-chip-set>
+              <mat-chip-set *ngIf="expandedTags[artifact.id]" class="expanded-tags">
+                <mat-chip *ngFor="let tag of artifact.tags.slice(3)" class="tag-chip">
+                  {{ tag }}
+                </mat-chip>
+              </mat-chip-set>
+              <app-tag-manager
+                [artifactId]="artifact.id"
+                [currentTags]="artifact.tags"
+                (tagsUpdated)="onTagsUpdated()">
+              </app-tag-manager>
+            </div>
+            <ng-template #noTags>
+              <app-tag-manager
+                [artifactId]="artifact.id"
+                [currentTags]="[]"
+                (tagsUpdated)="onTagsUpdated()">
+              </app-tag-manager>
+            </ng-template>
+          </td>
+        </ng-container>
+
+        <!-- Created Column -->
+        <ng-container matColumnDef="created">
+          <th mat-header-cell *matHeaderCellDef>Created</th>
+          <td mat-cell *matCellDef="let artifact">
+            <small>{{ formatDate(artifact.created_at) }}</small>
+          </td>
+        </ng-container>
+
+        <!-- Actions Column -->
+        <ng-container matColumnDef="actions">
+          <th mat-header-cell *matHeaderCellDef>Actions</th>
+          <td mat-cell *matCellDef="let artifact">
+            <div class="action-buttons">
+              <button mat-icon-button
+                      (click)="downloadArtifact(artifact)"
+                      matTooltip="Download"
+                      color="primary">
+                <mat-icon>download</mat-icon>
+              </button>
+              <button mat-icon-button
+                      (click)="deleteArtifact(artifact)"
+                      matTooltip="Delete"
+                      color="warn">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          </td>
+        </ng-container>
+
+        <!-- Table Header and Rows -->
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+        <!-- No Data Row -->
+        <tr class="mat-row" *matNoDataRow>
+          <td class="mat-cell no-data" [attr.colspan]="displayedColumns.length">
+            <div class="no-data-content">
+              <mat-icon>inbox</mat-icon>
+              <p>No artifacts found. Upload some files to get started!</p>
+            </div>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </mat-card>
+
+  <!-- Pagination -->
+  <mat-card class="pagination-card" *ngIf="!loading">
+    <mat-card-content>
+      <div class="pagination">
+        <button mat-icon-button
+                (click)="previousPage()"
+                [disabled]="currentPage === 1"
+                matTooltip="Previous page">
+          <mat-icon>chevron_left</mat-icon>
+        </button>
+        <mat-chip>Page {{ currentPage }}</mat-chip>
+        <button mat-icon-button
+                (click)="nextPage()"
+                [disabled]="filteredArtifacts.length < pageSize"
+                matTooltip="Next page">
+          <mat-icon>chevron_right</mat-icon>
+        </button>
+      </div>
+    </mat-card-content>
+  </mat-card>
+</div>
+
+<!-- Artifact Detail Modal (placeholder for now) -->
+<div *ngIf="showDetailModal && selectedArtifact" class="detail-backdrop" (click)="closeDetailModal()">
+  <mat-card class="detail-modal" (click)="$event.stopPropagation()">
+    <mat-card-header>
+      <mat-card-title>Artifact Details</mat-card-title>
+      <button mat-icon-button (click)="closeDetailModal()" class="close-button">
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-card-header>
+    <mat-card-content>
+      <!-- Detail content will be added later -->
+      <p>Artifact ID: {{ selectedArtifact.id }}</p>
+      <p>Filename: {{ selectedArtifact.filename }}</p>
+    </mat-card-content>
+  </mat-card>
+</div>
--- a/frontend/src/app/components/artifacts-table/artifacts-table.component.scss
+++ b/frontend/src/app/components/artifacts-table/artifacts-table.component.scss
@@ -0,0 +1,281 @@
+.artifacts-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.toolbar-card {
+  margin-bottom: 0;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.toolbar-buttons {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.count-chip {
+  margin-left: auto;
+}
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  gap: 16px;
+
+  p {
+    color: #666;
+    margin: 0;
+  }
+}
+
+.table-card {
+  overflow: hidden;
+}
+
+.table-container {
+  overflow-x: auto;
+  max-height: 70vh;
+}
+
+.artifacts-table {
+  width: 100%;
+
+  .mat-mdc-cell,
+  .mat-mdc-header-cell {
+    padding: 12px 8px;
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  .mat-mdc-header-cell {
+    font-weight: 600;
+    background-color: #fafafa;
+  }
+
+  .mat-mdc-row:hover {
+    background-color: #f5f5f5;
+  }
+}
+
+// Column specific styles
+.binaries-cell,
+.tags-cell {
+  max-width: 250px;
+
+  mat-chip-set {
+    max-width: 100%;
+  }
+}
+
+.filename-link {
+  text-align: left;
+  justify-content: flex-start;
+  text-transform: none;
+
+  mat-icon {
+    margin-right: 8px;
+  }
+}
+
+.text-muted {
+  color: #999;
+  font-style: italic;
+}
+
+// Chip styles
+.type-chip {
+  background-color: #e3f2fd !important;
+  color: #1976d2 !important;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.binary-chip {
+  background-color: #f3e5f5 !important;
+  color: #7b1fa2 !important;
+  font-size: 10px;
+
+  mat-icon {
+    font-size: 14px;
+  }
+}
+
+.tag-chip {
+  background-color: #e8f5e8 !important;
+  color: #2e7d32 !important;
+  font-size: 10px;
+}
+
+.expand-chip {
+  background-color: #fff3e0 !important;
+  color: #f57c00 !important;
+  font-size: 9px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #ffe0b2 !important;
+  }
+}
+
+.expanded-binaries,
+.expanded-tags {
+  margin-top: 8px;
+}
+
+// Result chips
+.result-pass {
+  background-color: #e8f5e8 !important;
+  color: #2e7d32 !important;
+}
+
+.result-fail {
+  background-color: #ffebee !important;
+  color: #d32f2f !important;
+}
+
+.result-skip {
+  background-color: #fff8e1 !important;
+  color: #f57c00 !important;
+}
+
+.result-error {
+  background-color: #fce4ec !important;
+  color: #c2185b !important;
+}
+
+// Action buttons
+.action-buttons {
+  display: flex;
+  gap: 4px;
+}
+
+// No data state
+.no-data {
+  text-align: center;
+  padding: 40px !important;
+}
+
+.no-data-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  color: #666;
+
+  mat-icon {
+    font-size: 48px;
+    width: 48px;
+    height: 48px;
+    color: #ccc;
+  }
+
+  p {
+    margin: 0;
+    font-size: 16px;
+  }
+}
+
+// Pagination
+.pagination-card {
+  margin-top: 0;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+}
+
+// Detail modal
+.detail-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.detail-modal {
+  max-width: 600px;
+  max-height: 80vh;
+  overflow-y: auto;
+  position: relative;
+
+  .close-button {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+  }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .toolbar-buttons {
+    justify-content: center;
+  }
+
+  .count-chip {
+    margin-left: 0;
+    align-self: center;
+  }
+
+  .artifacts-table {
+    font-size: 12px;
+
+    .mat-mdc-cell,
+    .mat-mdc-header-cell {
+      padding: 8px 4px;
+    }
+  }
+
+  .binaries-cell,
+  .tags-cell {
+    max-width: 150px;
+  }
+
+  .action-buttons {
+    flex-direction: column;
+  }
+}
+
+// Override Material styles
+:host ::ng-deep {
+  .mat-mdc-table {
+    background: transparent;
+  }
+
+  .mat-mdc-chip {
+    --mdc-chip-container-height: 24px;
+    --mdc-chip-with-avatar-container-height: 28px;
+    font-size: 11px;
+  }
+
+  .mat-mdc-chip-set {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+}
--- a/frontend/src/app/components/artifacts-table/artifacts-table.component.ts
+++ b/frontend/src/app/components/artifacts-table/artifacts-table.component.ts
@@ -0,0 +1,279 @@
+import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatTableModule } from '@angular/material/table';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatCardModule } from '@angular/material/card';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { Artifact } from '../../models/artifact.interface';
+import { ArtifactService } from '../../services/artifact.service';
+import { NotificationService } from '../../services/notification.service';
+import { TagManagerComponent } from '../tag-manager/tag-manager.component';
+
+@Component({
+  selector: 'app-artifacts-table',
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatTableModule,
+    MatButtonModule,
+    MatIconModule,
+    MatChipsModule,
+    MatCardModule,
+    MatProgressSpinnerModule,
+    MatTooltipModule,
+    MatDialogModule,
+    MatSnackBarModule,
+    TagManagerComponent
+  ],
+  templateUrl: './artifacts-table.component.html',
+  styleUrl: './artifacts-table.component.scss'
+})
+export class ArtifactsTableComponent implements OnInit, OnChanges {
+  @Input() artifacts: Artifact[] = [];
+  @Input() filters: any = {};
+
+  displayedColumns: string[] = [
+    'id',
+    'eventId',
+    'filename',
+    'type',
+    'size',
+    'binaries',
+    'testName',
+    'suite',
+    'result',
+    'tags',
+    'created',
+    'actions'
+  ];
+
+  expandedBinaries: { [key: number]: boolean } = {};
+  expandedTags: { [key: number]: boolean } = {};
+
+  currentPage = 1;
+  pageSize = 25;
+  loading = false;  // Start with false to show content immediately
+
+  selectedArtifact: Artifact | null = null;
+  showDetailModal = false;
+
+  filteredArtifacts: Artifact[] = [];
+
+  constructor(
+    private artifactService: ArtifactService,
+    private notificationService: NotificationService
+  ) {}
+
+  ngOnInit(): void {
+    console.log('ArtifactsTableComponent ngOnInit - artifacts count:', this.artifacts.length);
+    console.log('Initial loading state:', this.loading);
+    // Always load artifacts on init
+    this.loadArtifacts();
+    // Force show after a delay to debug
+    setTimeout(() => {
+      console.log('Timeout - forcing loading to false');
+      this.loading = false;
+    }, 2000);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    console.log('ArtifactsTableComponent ngOnChanges - artifacts:', changes['artifacts']?.currentValue?.length || 0);
+    // Re-apply filters when artifacts or filters input changes
+    if (changes['artifacts'] || changes['filters']) {
+      this.applyFilters();
+    }
+  }
+
+  loadArtifacts(): void {
+    console.log('Loading artifacts...');
+    this.loading = true;
+    this.artifactService.getArtifacts(this.pageSize, (this.currentPage - 1) * this.pageSize)
+      .subscribe({
+        next: (artifacts) => {
+          console.log('Loaded artifacts:', artifacts.length);
+          this.artifacts = artifacts;
+          this.applyFilters();
+          this.loading = false;
+          console.log('Loading complete. loading =', this.loading);
+        },
+        error: (error) => {
+          console.error('Error loading artifacts:', error);
+          this.loading = false;
+          console.log('Error occurred. loading =', this.loading);
+        }
+      });
+  }
+
+  applyFilters(): void {
+    console.log('Applying filters to', this.artifacts.length, 'artifacts');
+    this.filteredArtifacts = this.artifacts.filter(artifact => {
+      if (this.filters.filename && !artifact.filename.toLowerCase().includes(this.filters.filename.toLowerCase())) {
+        return false;
+      }
+      if (this.filters.fileType && artifact.file_type !== this.filters.fileType) {
+        return false;
+      }
+      if (this.filters.testName && !artifact.test_name?.toLowerCase().includes(this.filters.testName.toLowerCase())) {
+        return false;
+      }
+      if (this.filters.testSuite && !artifact.test_suite?.toLowerCase().includes(this.filters.testSuite.toLowerCase())) {
+        return false;
+      }
+      if (this.filters.testResult && artifact.test_result !== this.filters.testResult) {
+        return false;
+      }
+      if (this.filters.tags && this.filters.tags.length > 0) {
+        const hasMatchingTag = this.filters.tags.some((tag: string) =>
+          artifact.tags.some(artifactTag => artifactTag.toLowerCase().includes(tag.toLowerCase()))
+        );
+        if (!hasMatchingTag) return false;
+      }
+      return true;
+    });
+    console.log('Filtered artifacts count:', this.filteredArtifacts.length);
+  }
+
+  toggleBinariesExpansion(artifactId: number): void {
+    this.expandedBinaries[artifactId] = !this.expandedBinaries[artifactId];
+  }
+
+  toggleTagsExpansion(artifactId: number): void {
+    this.expandedTags[artifactId] = !this.expandedTags[artifactId];
+  }
+
+  showDetail(artifact: Artifact): void {
+    this.selectedArtifact = artifact;
+    this.showDetailModal = true;
+  }
+
+  closeDetailModal(): void {
+    this.showDetailModal = false;
+    this.selectedArtifact = null;
+  }
+
+  downloadArtifact(artifact: Artifact): void {
+    this.artifactService.downloadArtifact(artifact.id).subscribe({
+      next: (blob) => {
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = artifact.filename;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+      },
+      error: (error) => {
+        console.error('Error downloading artifact:', error);
+        this.notificationService.showError('Error downloading artifact: ' + error.message);
+      }
+    });
+  }
+
+  async deleteArtifact(artifact: Artifact): Promise<void> {
+    const confirmed = await this.notificationService.showConfirmation(
+      `Are you sure you want to delete "${artifact.filename}"? This cannot be undone.`,
+      'Delete'
+    );
+
+    if (!confirmed) {
+      return;
+    }
+
+    this.artifactService.deleteArtifact(artifact.id).subscribe({
+      next: () => {
+        this.notificationService.showSuccess('Artifact deleted successfully');
+        this.loadArtifacts();
+      },
+      error: (error) => {
+        console.error('Error deleting artifact:', error);
+        this.notificationService.showError('Error deleting artifact: ' + error.message);
+      }
+    });
+  }
+
+  generateSeedData(): void {
+    const count = prompt('How many artifacts to generate? (1-100)', '10');
+    if (!count) return;
+
+    const num = parseInt(count);
+    if (isNaN(num) || num < 1 || num > 100) {
+      this.notificationService.showWarning('Please enter a number between 1 and 100');
+      return;
+    }
+
+    this.artifactService.generateSeedData(num).subscribe({
+      next: (result) => {
+        this.notificationService.showSuccess(result.message || 'Seed data generated successfully');
+        this.loadArtifacts();
+      },
+      error: (error) => {
+        console.error('Error generating seed data:', error);
+        this.notificationService.showError('Error generating seed data: ' + error.message);
+      }
+    });
+  }
+
+  formatBytes(bytes: number): string {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+  }
+
+  formatDate(dateString: string): string {
+    const date = new Date(dateString);
+    return date.toLocaleString();
+  }
+
+  getVisibleBinaries(binaries: string[] | undefined): string[] {
+    if (!binaries) return [];
+    return binaries.slice(0, 4);
+  }
+
+  getHiddenBinariesCount(binaries: string[] | undefined): number {
+    if (!binaries) return 0;
+    return Math.max(0, binaries.length - 4);
+  }
+
+  getVisibleTags(tags: string[]): string[] {
+    return tags.slice(0, 3);
+  }
+
+  getHiddenTagsCount(tags: string[]): number {
+    return Math.max(0, tags.length - 3);
+  }
+
+  previousPage(): void {
+    if (this.currentPage > 1) {
+      this.currentPage--;
+      this.loadArtifacts();
+    }
+  }
+
+  nextPage(): void {
+    this.currentPage++;
+    this.loadArtifacts();
+  }
+
+  onTagsUpdated(): void {
+    this.loadArtifacts();
+  }
+
+  getResultIcon(result: string): string {
+    switch (result) {
+      case 'pass': return 'check_circle';
+      case 'fail': return 'cancel';
+      case 'skip': return 'skip_next';
+      case 'error': return 'error';
+      default: return 'help';
+    }
+  }
+}
--- a/frontend/src/app/components/query-form/query-form.component.html
+++ b/frontend/src/app/components/query-form/query-form.component.html
@@ -0,0 +1,197 @@
+<mat-card class="query-card">
+  <mat-card-header>
+    <mat-card-title>
+      <mat-icon>search</mat-icon>
+      Query Artifacts
+    </mat-card-title>
+    <mat-card-subtitle>
+      Search and filter your artifact collection
+    </mat-card-subtitle>
+  </mat-card-header>
+
+  <mat-card-content>
+    <form (ngSubmit)="queryArtifacts()" #queryFormRef="ngForm" class="query-form">
+      <!-- Basic Search Section -->
+      <div class="form-section">
+        <h3>Basic Search</h3>
+        <div class="form-row">
+          <mat-form-field appearance="outline">
+            <mat-label>Filename</mat-label>
+            <input
+              matInput
+              name="filename"
+              [(ngModel)]="queryForm.filename"
+              (input)="onFilterChange()"
+              placeholder="Search filename...">
+            <mat-icon matSuffix>description</mat-icon>
+          </mat-form-field>
+
+          <mat-form-field appearance="outline">
+            <mat-label>File Type</mat-label>
+            <mat-select
+              name="file_type"
+              [(ngModel)]="queryForm.file_type"
+              (selectionChange)="onFilterChange()">
+              <mat-option value="">All Types</mat-option>
+              <mat-option *ngFor="let type of fileTypes" [value]="type">
+                {{ type.toUpperCase() }}
+              </mat-option>
+            </mat-select>
+            <mat-icon matSuffix>category</mat-icon>
+          </mat-form-field>
+        </div>
+      </div>
+
+      <!-- Test Information Section -->
+      <div class="form-section">
+        <h3>Test Information</h3>
+        <div class="form-row">
+          <mat-form-field appearance="outline">
+            <mat-label>Test Name</mat-label>
+            <input
+              matInput
+              name="test_name"
+              [(ngModel)]="queryForm.test_name"
+              (input)="onFilterChange()"
+              placeholder="Search test name...">
+            <mat-icon matSuffix>quiz</mat-icon>
+          </mat-form-field>
+
+          <mat-form-field appearance="outline">
+            <mat-label>Test Suite</mat-label>
+            <input
+              matInput
+              name="test_suite"
+              [(ngModel)]="queryForm.test_suite"
+              (input)="onFilterChange()"
+              placeholder="e.g., integration">
+            <mat-icon matSuffix>folder</mat-icon>
+          </mat-form-field>
+        </div>
+
+        <div class="form-row">
+          <mat-form-field appearance="outline">
+            <mat-label>Test Result</mat-label>
+            <mat-select
+              name="test_result"
+              [(ngModel)]="queryForm.test_result"
+              (selectionChange)="onFilterChange()">
+              <mat-option value="">All Results</mat-option>
+              <mat-option *ngFor="let result of testResults" [value]="result">
+                <mat-icon>{{ getResultIcon(result) }}</mat-icon>
+                {{ result | titlecase }}
+              </mat-option>
+            </mat-select>
+            <mat-icon matSuffix>assignment_turned_in</mat-icon>
+          </mat-form-field>
+
+          <mat-form-field appearance="outline">
+            <mat-label>Tags</mat-label>
+            <input
+              matInput
+              name="tags"
+              [(ngModel)]="tagsInput"
+              (input)="onFilterChange()"
+              placeholder="e.g., regression, smoke">
+            <mat-icon matSuffix>label</mat-icon>
+            <mat-hint>Comma-separated tags</mat-hint>
+          </mat-form-field>
+        </div>
+      </div>
+
+      <!-- Date Range Section -->
+      <div class="form-section">
+        <h3>Date Range</h3>
+        <div class="form-row">
+          <mat-form-field appearance="outline">
+            <mat-label>Start Date</mat-label>
+            <input
+              matInput
+              [matDatepicker]="startPicker"
+              name="start_date"
+              [(ngModel)]="queryForm.start_date">
+            <mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
+            <mat-datepicker #startPicker></mat-datepicker>
+          </mat-form-field>
+
+          <mat-form-field appearance="outline">
+            <mat-label>End Date</mat-label>
+            <input
+              matInput
+              [matDatepicker]="endPicker"
+              name="end_date"
+              [(ngModel)]="queryForm.end_date">
+            <mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
+            <mat-datepicker #endPicker></mat-datepicker>
+          </mat-form-field>
+        </div>
+      </div>
+
+      <!-- Search Progress -->
+      <div class="search-progress" *ngIf="searching">
+        <mat-spinner diameter="24"></mat-spinner>
+        <span>Searching artifacts...</span>
+      </div>
+
+      <!-- Form Actions -->
+      <div class="form-actions">
+        <button
+          mat-raised-button
+          color="primary"
+          type="submit"
+          [disabled]="searching"
+          class="search-button">
+          <mat-icon>{{ searching ? 'hourglass_empty' : 'search' }}</mat-icon>
+          {{ searching ? 'Searching...' : 'Search Artifacts' }}
+        </button>
+        <button
+          mat-button
+          type="button"
+          (click)="clearQuery()"
+          [disabled]="searching">
+          <mat-icon>clear</mat-icon>
+          Clear Filters
+        </button>
+      </div>
+    </form>
+  </mat-card-content>
+</mat-card>
+
+<!-- Active Filters Display -->
+<mat-card class="filters-card" *ngIf="queryForm.filename || queryForm.file_type || queryForm.test_name || queryForm.test_suite || queryForm.test_result || tagsInput">
+  <mat-card-header>
+    <mat-card-title>
+      <mat-icon>filter_list</mat-icon>
+      Active Filters
+    </mat-card-title>
+  </mat-card-header>
+
+  <mat-card-content>
+    <mat-chip-set class="filter-chips">
+      <mat-chip *ngIf="queryForm.filename" color="primary">
+        <mat-icon matChipAvatar>description</mat-icon>
+        Filename: {{ queryForm.filename }}
+      </mat-chip>
+      <mat-chip *ngIf="queryForm.file_type" color="accent">
+        <mat-icon matChipAvatar>category</mat-icon>
+        Type: {{ queryForm.file_type }}
+      </mat-chip>
+      <mat-chip *ngIf="queryForm.test_name" color="primary">
+        <mat-icon matChipAvatar>quiz</mat-icon>
+        Test: {{ queryForm.test_name }}
+      </mat-chip>
+      <mat-chip *ngIf="queryForm.test_suite" color="accent">
+        <mat-icon matChipAvatar>folder</mat-icon>
+        Suite: {{ queryForm.test_suite }}
+      </mat-chip>
+      <mat-chip *ngIf="queryForm.test_result" color="primary">
+        <mat-icon matChipAvatar>assignment_turned_in</mat-icon>
+        Result: {{ queryForm.test_result }}
+      </mat-chip>
+      <mat-chip *ngIf="tagsInput" color="accent">
+        <mat-icon matChipAvatar>label</mat-icon>
+        Tags: {{ tagsInput }}
+      </mat-chip>
+    </mat-chip-set>
+  </mat-card-content>
+</mat-card>
--- a/frontend/src/app/components/query-form/query-form.component.scss
+++ b/frontend/src/app/components/query-form/query-form.component.scss
@@ -0,0 +1,207 @@
+.query-card {
+  max-width: 900px;
+  margin: 0 auto 24px;
+}
+
+.filters-card {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.query-form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.form-section {
+  padding: 16px 0;
+
+  h3 {
+    margin: 0 0 16px 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #424242;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &::before {
+      content: '';
+      width: 4px;
+      height: 20px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 2px;
+    }
+  }
+
+  &:not(:last-child) {
+    border-bottom: 1px solid #e0e0e0;
+  }
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.search-progress {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 16px;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  color: #666;
+
+  mat-spinner {
+    margin: 0;
+  }
+
+  span {
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+
+.form-actions {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  padding-top: 16px;
+  border-top: 1px solid #e0e0e0;
+
+  .search-button {
+    padding: 12px 32px;
+    font-size: 16px;
+
+    mat-icon {
+      margin-right: 8px;
+    }
+  }
+}
+
+.filter-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+
+  mat-chip {
+    --mdc-chip-container-height: 36px;
+
+    mat-icon[matChipAvatar] {
+      background-color: transparent !important;
+      color: currentColor !important;
+    }
+  }
+}
+
+// Material Design overrides
+:host ::ng-deep {
+  .mat-mdc-form-field {
+    width: 100%;
+
+    .mat-mdc-form-field-hint {
+      font-size: 12px;
+    }
+  }
+
+  .mat-mdc-select-panel {
+    max-height: 250px;
+  }
+
+  .mat-mdc-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    mat-icon {
+      font-size: 18px;
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  .mat-mdc-chip {
+    font-size: 12px;
+  }
+
+  .mat-mdc-raised-button {
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+
+    &:hover {
+      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+    }
+  }
+
+  .mat-datepicker-toggle {
+    .mat-icon-button {
+      width: 32px;
+      height: 32px;
+
+      .mat-mdc-button-touch-target {
+        width: 32px;
+        height: 32px;
+      }
+    }
+  }
+}
+
+// Card title styling
+:host ::ng-deep .mat-mdc-card-header {
+  .mat-mdc-card-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  .mat-mdc-card-subtitle {
+    margin-top: 4px;
+    color: #666;
+  }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .query-card,
+  .filters-card {
+    margin: 0 16px 16px;
+  }
+
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+
+  .form-actions {
+    flex-direction: column;
+    align-items: stretch;
+
+    .search-button {
+      width: 100%;
+    }
+  }
+
+  .filter-chips {
+    gap: 6px;
+
+    mat-chip {
+      --mdc-chip-container-height: 32px;
+      font-size: 11px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .query-card,
+  .filters-card {
+    margin: 0 8px 12px;
+  }
+
+  .form-section h3 {
+    font-size: 14px;
+  }
+}
--- a/frontend/src/app/components/query-form/query-form.component.ts
+++ b/frontend/src/app/components/query-form/query-form.component.ts
@@ -0,0 +1,137 @@
+import { Component, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+import { ArtifactQuery, Artifact } from '../../models/artifact.interface';
+import { ArtifactService } from '../../services/artifact.service';
+import { NotificationService } from '../../services/notification.service';
+
+@Component({
+  selector: 'app-query-form',
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatButtonModule,
+    MatIconModule,
+    MatChipsModule,
+    MatProgressSpinnerModule,
+    MatDatepickerModule,
+    MatNativeDateModule
+  ],
+  templateUrl: './query-form.component.html',
+  styleUrl: './query-form.component.scss'
+})
+export class QueryFormComponent {
+  @Output() queryResults = new EventEmitter<Artifact[]>();
+  @Output() filtersChange = new EventEmitter<any>();
+
+  queryForm: ArtifactQuery = {
+    filename: '',
+    file_type: '',
+    test_name: '',
+    test_suite: '',
+    test_result: '',
+    tags: [],
+    start_date: '',
+    end_date: '',
+    limit: 100,
+    offset: 0
+  };
+
+  searching = false;
+  fileTypes = ['csv', 'json', 'binary', 'pcap'];
+  testResults = ['pass', 'fail', 'skip', 'error'];
+
+  tagsInput = '';
+
+  constructor(
+    private artifactService: ArtifactService,
+    private notificationService: NotificationService
+  ) {}
+
+  queryArtifacts(): void {
+    this.searching = true;
+
+    const query: ArtifactQuery = { ...this.queryForm };
+
+    if (this.tagsInput) {
+      query.tags = this.tagsInput.split(',').map(t => t.trim()).filter(t => t);
+    }
+
+    if (query.start_date) {
+      query.start_date = new Date(query.start_date).toISOString();
+    }
+
+    if (query.end_date) {
+      query.end_date = new Date(query.end_date).toISOString();
+    }
+
+    this.artifactService.queryArtifacts(query).subscribe({
+      next: (artifacts) => {
+        this.queryResults.emit(artifacts);
+        this.searching = false;
+      },
+      error: (error) => {
+        console.error('Query failed:', error);
+        this.notificationService.showError('Query failed: ' + error.message);
+        this.searching = false;
+      }
+    });
+  }
+
+  clearQuery(): void {
+    this.queryForm = {
+      filename: '',
+      file_type: '',
+      test_name: '',
+      test_suite: '',
+      test_result: '',
+      tags: [],
+      start_date: '',
+      end_date: '',
+      limit: 100,
+      offset: 0
+    };
+    this.tagsInput = '';
+    this.emitFilters();
+  }
+
+  emitFilters(): void {
+    const filters = {
+      filename: this.queryForm.filename,
+      fileType: this.queryForm.file_type,
+      testName: this.queryForm.test_name,
+      testSuite: this.queryForm.test_suite,
+      testResult: this.queryForm.test_result,
+      tags: this.tagsInput ? this.tagsInput.split(',').map(t => t.trim()).filter(t => t) : []
+    };
+    this.filtersChange.emit(filters);
+  }
+
+  onFilterChange(): void {
+    this.emitFilters();
+  }
+
+  getResultIcon(result: string): string {
+    switch (result) {
+      case 'pass': return 'check_circle';
+      case 'fail': return 'cancel';
+      case 'skip': return 'skip_next';
+      case 'error': return 'error';
+      default: return 'help';
+    }
+  }
+}
--- a/frontend/src/app/components/tab-navigation/tab-navigation.component.html
+++ b/frontend/src/app/components/tab-navigation/tab-navigation.component.html
@@ -0,0 +1,30 @@
+<mat-tab-group
+  [(selectedIndex)]="selectedIndex"
+  (selectedTabChange)="onTabChange($event)"
+  animationDuration="300ms"
+  color="primary">
+
+  <!-- Artifacts Tab -->
+  <mat-tab>
+    <ng-template mat-tab-label>
+      <mat-icon class="tab-icon">view_list</mat-icon>
+      Artifacts
+    </ng-template>
+  </mat-tab>
+
+  <!-- Upload Tab -->
+  <mat-tab>
+    <ng-template mat-tab-label>
+      <mat-icon class="tab-icon">cloud_upload</mat-icon>
+      Upload
+    </ng-template>
+  </mat-tab>
+
+  <!-- Query Tab -->
+  <mat-tab>
+    <ng-template mat-tab-label>
+      <mat-icon class="tab-icon">search</mat-icon>
+      Query
+    </ng-template>
+  </mat-tab>
+</mat-tab-group>
--- a/frontend/src/app/components/tab-navigation/tab-navigation.component.scss
+++ b/frontend/src/app/components/tab-navigation/tab-navigation.component.scss
@@ -0,0 +1,44 @@
+.tab-icon {
+  margin-right: 8px;
+  font-size: 18px;
+  vertical-align: middle;
+}
+
+:host ::ng-deep {
+  .mat-mdc-tab-group {
+    .mat-mdc-tab-header {
+      border-bottom: 1px solid #e0e0e0;
+    }
+
+    .mat-mdc-tab {
+      min-width: 120px;
+
+      .mat-mdc-tab-label {
+        display: flex;
+        align-items: center;
+        font-weight: 500;
+      }
+    }
+
+    .mat-mdc-tab-body-wrapper {
+      display: none;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  :host ::ng-deep {
+    .mat-mdc-tab {
+      min-width: 80px;
+
+      .mat-mdc-tab-label {
+        font-size: 12px;
+      }
+    }
+  }
+
+  .tab-icon {
+    font-size: 16px;
+    margin-right: 4px;
+  }
+}
--- a/frontend/src/app/components/tab-navigation/tab-navigation.component.ts
+++ b/frontend/src/app/components/tab-navigation/tab-navigation.component.ts
@@ -0,0 +1,33 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatIconModule } from '@angular/material/icon';
+
+export type TabType = 'artifacts' | 'upload' | 'query';
+
+@Component({
+  selector: 'app-tab-navigation',
+  imports: [
+    CommonModule,
+    MatTabsModule,
+    MatIconModule
+  ],
+  templateUrl: './tab-navigation.component.html',
+  styleUrl: './tab-navigation.component.scss'
+})
+export class TabNavigationComponent {
+  @Output() tabChange = new EventEmitter<TabType>();
+
+  selectedIndex = 0;
+
+  tabs = [
+    { id: 'artifacts' as TabType, label: 'Artifacts', icon: 'view_list' },
+    { id: 'upload' as TabType, label: 'Upload', icon: 'cloud_upload' },
+    { id: 'query' as TabType, label: 'Query', icon: 'search' }
+  ];
+
+  onTabChange(event: any): void {
+    const selectedTab = this.tabs[event.index];
+    this.tabChange.emit(selectedTab.id);
+  }
+}
--- a/frontend/src/app/components/tag-manager/tag-manager.component.html
+++ b/frontend/src/app/components/tag-manager/tag-manager.component.html
@@ -0,0 +1,151 @@
+<div class="tag-manager">
+  <!-- Current Tags Display -->
+  <div class="current-tags-section" *ngIf="currentTags.length > 0">
+    <mat-chip-set>
+      <mat-chip
+        *ngFor="let tag of currentTags"
+        class="current-tag"
+        [removable]="true"
+        (removed)="removeTag(tag)">
+        <mat-icon matChipAvatar>label</mat-icon>
+        {{ tag }}
+        <mat-icon matChipRemove>cancel</mat-icon>
+      </mat-chip>
+    </mat-chip-set>
+  </div>
+
+  <!-- Add Tag Button -->
+  <div class="add-tag-section">
+    <button
+      mat-fab
+      color="primary"
+      class="add-tag-fab"
+      (click)="toggleAddTag()"
+      [matTooltip]="showAddTag ? 'Close tag manager' : 'Add new tag'">
+      <mat-icon>{{ showAddTag ? 'close' : 'add' }}</mat-icon>
+    </button>
+  </div>
+
+  <!-- Add Tag Form -->
+  <mat-card class="add-tag-card" *ngIf="showAddTag">
+    <mat-card-header>
+      <mat-card-title>
+        <mat-icon>new_label</mat-icon>
+        Add New Tag
+      </mat-card-title>
+    </mat-card-header>
+
+    <mat-card-content>
+      <form class="tag-form">
+        <!-- Tag Name Input -->
+        <mat-form-field appearance="outline" class="full-width">
+          <mat-label>Tag Name</mat-label>
+          <input
+            matInput
+            [(ngModel)]="newTagName"
+            name="tagName"
+            placeholder="Enter tag name"
+            (keyup.enter)="addTag()">
+          <mat-icon matSuffix>label</mat-icon>
+        </mat-form-field>
+
+        <!-- Scope Section -->
+        <div class="scope-section">
+          <button
+            mat-button
+            color="accent"
+            type="button"
+            (click)="toggleScopeInput()">
+            <mat-icon>{{ showScopeInput ? 'expand_less' : 'expand_more' }}</mat-icon>
+            {{ showScopeInput ? 'Hide Scope Options' : 'Add Scope' }}
+          </button>
+
+          <div class="scope-inputs" *ngIf="showScopeInput">
+            <mat-form-field appearance="outline">
+              <mat-label>Predefined Scope</mat-label>
+              <mat-select [(ngModel)]="newTagScope" name="scopeSelect">
+                <mat-option value="">No scope</mat-option>
+                <mat-option *ngFor="let scope of predefinedScopes" [value]="scope">
+                  {{ scope | titlecase }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+
+            <mat-form-field appearance="outline">
+              <mat-label>Custom Scope</mat-label>
+              <input
+                matInput
+                [(ngModel)]="newTagScope"
+                name="customScope"
+                placeholder="Enter custom scope">
+              <mat-icon matSuffix>category</mat-icon>
+            </mat-form-field>
+          </div>
+        </div>
+
+        <!-- Form Actions -->
+        <div class="form-actions">
+          <button
+            mat-raised-button
+            color="primary"
+            (click)="addTag()"
+            [disabled]="!newTagName.trim()">
+            <mat-icon>add</mat-icon>
+            Add Tag
+          </button>
+          <button
+            mat-button
+            (click)="resetForm()">
+            <mat-icon>clear</mat-icon>
+            Clear
+          </button>
+        </div>
+      </form>
+    </mat-card-content>
+  </mat-card>
+
+  <!-- Available Tags (Quick Add) -->
+  <mat-expansion-panel class="available-tags-panel" *ngIf="showAddTag && availableTags.length > 0">
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        <mat-icon>library_add</mat-icon>
+        Quick Add Existing Tags
+      </mat-panel-title>
+      <mat-panel-description>
+        Click to add existing tags
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+
+    <!-- Unscoped Tags -->
+    <div class="tag-group" *ngIf="getTagsByScope().length > 0">
+      <h4>General Tags</h4>
+      <mat-chip-set class="available-chip-set">
+        <mat-chip
+          *ngFor="let tag of getTagsByScope()"
+          class="available-tag"
+          [class.attached]="isTagAttached(tag.name)"
+          [disabled]="isTagAttached(tag.name)"
+          (click)="!isTagAttached(tag.name) && addExistingTag(tag)">
+          {{ tag.name }}
+          <mat-icon *ngIf="isTagAttached(tag.name)" matChipTrailingIcon>check</mat-icon>
+        </mat-chip>
+      </mat-chip-set>
+    </div>
+
+    <!-- Scoped Tags -->
+    <div class="tag-group" *ngFor="let scope of getUniqueScopes()">
+      <h4>{{ scope | titlecase }} Tags</h4>
+      <mat-chip-set class="available-chip-set">
+        <mat-chip
+          *ngFor="let tag of getTagsByScope(scope)"
+          class="available-tag scoped"
+          [class.attached]="isTagAttached(tag.name)"
+          [disabled]="isTagAttached(tag.name)"
+          (click)="!isTagAttached(tag.name) && addExistingTag(tag)">
+          {{ tag.name }}
+          <mat-icon *ngIf="isTagAttached(tag.name)" matChipTrailingIcon>check</mat-icon>
+        </mat-chip>
+      </mat-chip-set>
+    </div>
+  </mat-expansion-panel>
+</div>
--- a/frontend/src/app/components/tag-manager/tag-manager.component.scss
+++ b/frontend/src/app/components/tag-manager/tag-manager.component.scss
@@ -0,0 +1,198 @@
+.tag-manager {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+}
+
+.current-tags-section {
+  margin-bottom: 8px;
+
+  mat-chip-set {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .current-tag {
+    background-color: #e3f2fd !important;
+    color: #1976d2 !important;
+
+    mat-icon[matChipAvatar] {
+      background-color: #1976d2 !important;
+      color: white !important;
+    }
+  }
+}
+
+.add-tag-section {
+  display: flex;
+  justify-content: center;
+  margin: 16px 0;
+
+  .add-tag-fab {
+    width: 56px;
+    height: 56px;
+  }
+}
+
+.add-tag-card {
+  max-width: 500px;
+  margin: 0 auto;
+
+  mat-card-header {
+    margin-bottom: 16px;
+
+    mat-card-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+
+  .tag-form {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .full-width {
+      width: 100%;
+    }
+
+    .scope-section {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+
+      .scope-inputs {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 16px;
+      }
+    }
+
+    .form-actions {
+      display: flex;
+      gap: 12px;
+      justify-content: flex-end;
+      margin-top: 16px;
+    }
+  }
+}
+
+.available-tags-panel {
+  margin-top: 16px;
+
+  .tag-group {
+    margin-bottom: 20px;
+
+    h4 {
+      font-size: 14px;
+      font-weight: 500;
+      color: #424242;
+      margin: 0 0 12px 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      &::before {
+        content: '';
+        width: 4px;
+        height: 16px;
+        background-color: #2196f3;
+        border-radius: 2px;
+      }
+    }
+
+    .available-chip-set {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .available-tag {
+      cursor: pointer;
+      transition: all 0.2s ease;
+
+      &:not(.attached):hover {
+        background-color: #e8f5e8 !important;
+        transform: translateY(-1px);
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      }
+
+      &.attached {
+        background-color: #c8e6c9 !important;
+        color: #2e7d32 !important;
+        cursor: default;
+        opacity: 0.7;
+      }
+
+      &.scoped {
+        border-left: 3px solid #ff9800;
+      }
+    }
+  }
+}
+
+// Material Design overrides
+:host ::ng-deep {
+  .mat-mdc-chip {
+    --mdc-chip-container-height: 32px;
+    font-size: 12px;
+
+    &.current-tag {
+      --mdc-chip-with-avatar-container-height: 36px;
+    }
+  }
+
+  .mat-mdc-chip-set {
+    margin: 0;
+  }
+
+  .mat-mdc-fab {
+    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+
+    &:hover {
+      box-shadow: 0 6px 12px rgba(0,0,0,0.2);
+    }
+  }
+
+  .mat-expansion-panel-header {
+    font-weight: 500;
+  }
+
+  .mat-expansion-panel-body {
+    padding: 16px 24px 24px;
+  }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .tag-manager {
+    padding: 12px;
+  }
+
+  .add-tag-card {
+    margin: 0 8px;
+
+    .tag-form .scope-inputs {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .tag-group {
+    .available-chip-set {
+      gap: 6px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .add-tag-card .tag-form .form-actions {
+    flex-direction: column;
+
+    button {
+      width: 100%;
+    }
+  }
+}
--- a/frontend/src/app/components/tag-manager/tag-manager.component.ts
+++ b/frontend/src/app/components/tag-manager/tag-manager.component.ts
@@ -0,0 +1,173 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatCardModule } from '@angular/material/card';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { Tag } from '../../models/artifact.interface';
+import { ArtifactService } from '../../services/artifact.service';
+import { NotificationService } from '../../services/notification.service';
+
+@Component({
+  selector: 'app-tag-manager',
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatChipsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatCardModule,
+    MatTooltipModule,
+    MatExpansionModule
+  ],
+  templateUrl: './tag-manager.component.html',
+  styleUrl: './tag-manager.component.scss'
+})
+export class TagManagerComponent implements OnInit {
+  @Input() artifactId!: number;
+  @Input() currentTags: string[] = [];
+  @Output() tagsUpdated = new EventEmitter<void>();
+
+  availableTags: Tag[] = [];
+  newTagName = '';
+  newTagScope = '';
+  showAddTag = false;
+  showScopeInput = false;
+
+  predefinedScopes = ['project', 'environment', 'priority', 'category', 'status'];
+
+  constructor(
+    private artifactService: ArtifactService,
+    private notificationService: NotificationService
+  ) {}
+
+  ngOnInit(): void {
+    this.loadAvailableTags();
+  }
+
+  loadAvailableTags(): void {
+    this.artifactService.getAllTags().subscribe({
+      next: (tags) => {
+        this.availableTags = tags;
+      },
+      error: (error) => {
+        // Tags endpoint not implemented yet - silently ignore
+        if (error.status === 404) {
+          console.log('Tags API not implemented yet');
+          this.availableTags = [];
+        } else {
+          console.error('Error loading tags:', error);
+        }
+      }
+    });
+  }
+
+  toggleAddTag(): void {
+    this.showAddTag = !this.showAddTag;
+    if (!this.showAddTag) {
+      this.resetForm();
+    }
+  }
+
+  toggleScopeInput(): void {
+    this.showScopeInput = !this.showScopeInput;
+  }
+
+  resetForm(): void {
+    this.newTagName = '';
+    this.newTagScope = '';
+    this.showScopeInput = false;
+  }
+
+  addTag(): void {
+    if (!this.newTagName.trim()) return;
+
+    const tag: Tag = {
+      name: this.newTagName.trim(),
+      scope: this.newTagScope.trim() || undefined
+    };
+
+    this.artifactService.createTag(tag).subscribe({
+      next: (createdTag) => {
+        this.artifactService.addTag(this.artifactId, createdTag).subscribe({
+          next: () => {
+            this.loadAvailableTags();
+            this.tagsUpdated.emit();
+            this.resetForm();
+            this.showAddTag = false;
+          },
+          error: (error) => {
+            console.error('Error adding tag to artifact:', error);
+            this.notificationService.showError('Error adding tag to artifact: ' + error.message);
+          }
+        });
+      },
+      error: (error) => {
+        console.error('Error creating tag:', error);
+        this.notificationService.showError('Error creating tag: ' + error.message);
+      }
+    });
+  }
+
+  removeTag(tag: string): void {
+    const tagToRemove = this.availableTags.find(t => t.name === tag);
+    if (!tagToRemove?.id) return;
+
+    this.artifactService.removeTag(this.artifactId, tagToRemove.id).subscribe({
+      next: () => {
+        this.tagsUpdated.emit();
+      },
+      error: (error) => {
+        console.error('Error removing tag:', error);
+        this.notificationService.showError('Error removing tag: ' + error.message);
+      }
+    });
+  }
+
+  addExistingTag(tag: Tag): void {
+    this.artifactService.addTag(this.artifactId, tag).subscribe({
+      next: () => {
+        this.tagsUpdated.emit();
+      },
+      error: (error) => {
+        console.error('Error adding existing tag:', error);
+        this.notificationService.showError('Error adding tag: ' + error.message);
+      }
+    });
+  }
+
+  isTagAttached(tagName: string): boolean {
+    return this.currentTags.includes(tagName);
+  }
+
+  getTagsByScope(scope?: string): Tag[] {
+    return this.availableTags.filter(tag => tag.scope === scope);
+  }
+
+  getUniqueScopes(): string[] {
+    const scopes = this.availableTags
+      .map(tag => tag.scope)
+      .filter((scope, index, arr) => scope && arr.indexOf(scope) === index) as string[];
+    return scopes.sort();
+  }
+
+  getTagColor(tag: Tag): string {
+    if (tag.color) return tag.color;
+
+    const colors = ['#e0e7ff', '#fef3c7', '#d1fae5', '#fee2e2', '#f3e8ff', '#dbeafe'];
+    const hash = tag.name.split('').reduce((a, b) => {
+      a = ((a << 5) - a) + b.charCodeAt(0);
+      return a & a;
+    }, 0);
+    return colors[Math.abs(hash) % colors.length];
+  }
+}
--- a/frontend/src/app/components/upload-form/upload-form.component.html
+++ b/frontend/src/app/components/upload-form/upload-form.component.html
@@ -0,0 +1,199 @@
+<mat-card class="upload-card">
+  <mat-card-header>
+    <mat-card-title>
+      <mat-icon>cloud_upload</mat-icon>
+      Upload Artifact
+    </mat-card-title>
+  </mat-card-header>
+
+  <mat-card-content>
+    <form (ngSubmit)="uploadArtifact()" #uploadForm="ngForm" class="upload-form">
+      <!-- File Upload Section -->
+      <div class="file-upload-section">
+        <div class="file-input-container">
+          <input
+            #fileInput
+            type="file"
+            id="file"
+            name="file"
+            (change)="onFileSelected($event)"
+            required
+            style="display: none;">
+
+          <mat-form-field appearance="outline" class="full-width">
+            <mat-label>Select File</mat-label>
+            <input matInput
+                   [value]="selectedFile?.name || ''"
+                   placeholder="No file selected"
+                   readonly>
+            <button mat-icon-button
+                    matSuffix
+                    type="button"
+                    (click)="fileInput.click()"
+                    [attr.aria-label]="'Select file'">
+              <mat-icon>folder_open</mat-icon>
+            </button>
+            <mat-hint>Supported: CSV, JSON, binary files, PCAP</mat-hint>
+          </mat-form-field>
+        </div>
+
+        <div *ngIf="selectedFile" class="selected-file-info">
+          <mat-chip-set>
+            <mat-chip color="primary">
+              <mat-icon matChipAvatar>description</mat-icon>
+              {{ selectedFile.name }}
+            </mat-chip>
+            <mat-chip color="accent">
+              <mat-icon matChipAvatar>data_usage</mat-icon>
+              {{ selectedFile.size | number }} bytes
+            </mat-chip>
+          </mat-chip-set>
+        </div>
+      </div>
+
+      <!-- Event ID and Test Name -->
+      <div class="form-row">
+        <mat-form-field appearance="outline">
+          <mat-label>Event ID</mat-label>
+          <input matInput
+                 name="eventId"
+                 [(ngModel)]="formData.eventId"
+                 placeholder="e.g., EVENT_001">
+          <mat-icon matSuffix>event</mat-icon>
+          <mat-hint>Groups multiple artifacts under the same event</mat-hint>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Test Name</mat-label>
+          <input matInput
+                 name="testName"
+                 [(ngModel)]="formData.testName"
+                 placeholder="e.g., login_test">
+          <mat-icon matSuffix>quiz</mat-icon>
+        </mat-form-field>
+      </div>
+
+      <!-- Test Suite and Result -->
+      <div class="form-row">
+        <mat-form-field appearance="outline">
+          <mat-label>Test Suite</mat-label>
+          <input matInput
+                 name="testSuite"
+                 [(ngModel)]="formData.testSuite"
+                 placeholder="e.g., integration">
+          <mat-icon matSuffix>category</mat-icon>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Test Result</mat-label>
+          <mat-select name="testResult" [(ngModel)]="formData.testResult">
+            <mat-option value="">-- Select --</mat-option>
+            <mat-option *ngFor="let result of testResults" [value]="result">
+              <mat-icon>{{ getResultIcon(result) }}</mat-icon>
+              {{ result | titlecase }}
+            </mat-option>
+          </mat-select>
+          <mat-icon matSuffix>assignment_turned_in</mat-icon>
+        </mat-form-field>
+      </div>
+
+      <!-- Version and Binaries -->
+      <div class="form-row">
+        <mat-form-field appearance="outline">
+          <mat-label>Version</mat-label>
+          <input matInput
+                 name="version"
+                 [(ngModel)]="formData.version"
+                 placeholder="e.g., v1.0.0">
+          <mat-icon matSuffix>tag</mat-icon>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Associated Binaries</mat-label>
+          <input matInput
+                 name="binaries"
+                 [(ngModel)]="formData.binaries"
+                 placeholder="e.g., app.exe, lib.dll, config.json">
+          <mat-icon matSuffix>code</mat-icon>
+          <mat-hint>Comma-separated list of binaries/files</mat-hint>
+        </mat-form-field>
+      </div>
+
+      <!-- Tags -->
+      <mat-form-field appearance="outline" class="full-width">
+        <mat-label>Tags</mat-label>
+        <input matInput
+               name="tags"
+               [(ngModel)]="formData.tags"
+               placeholder="e.g., regression, smoke, critical">
+        <mat-icon matSuffix>label</mat-icon>
+        <mat-hint>Comma-separated tags</mat-hint>
+      </mat-form-field>
+
+      <!-- Description -->
+      <mat-form-field appearance="outline" class="full-width">
+        <mat-label>Description</mat-label>
+        <textarea matInput
+                  name="description"
+                  [(ngModel)]="formData.description"
+                  rows="3"
+                  placeholder="Describe this artifact..."></textarea>
+        <mat-icon matSuffix>description</mat-icon>
+      </mat-form-field>
+
+      <!-- JSON Fields -->
+      <div class="json-section">
+        <h3>Advanced Configuration</h3>
+
+        <mat-form-field appearance="outline" class="full-width">
+          <mat-label>Test Config (JSON)</mat-label>
+          <textarea matInput
+                    name="testConfig"
+                    [(ngModel)]="formData.testConfig"
+                    rows="4"
+                    placeholder='{"browser": "chrome", "timeout": 30}'></textarea>
+          <mat-icon matSuffix>settings</mat-icon>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="full-width">
+          <mat-label>Custom Metadata (JSON)</mat-label>
+          <textarea matInput
+                    name="customMetadata"
+                    [(ngModel)]="formData.customMetadata"
+                    rows="4"
+                    placeholder='{"build": "1234", "commit": "abc123"}'></textarea>
+          <mat-icon matSuffix>data_object</mat-icon>
+        </mat-form-field>
+      </div>
+
+      <!-- Upload Progress -->
+      <mat-progress-bar *ngIf="uploading"
+                        mode="indeterminate"
+                        class="upload-progress"></mat-progress-bar>
+
+      <!-- Submit Button -->
+      <div class="form-actions">
+        <button mat-raised-button
+                color="primary"
+                type="submit"
+                [disabled]="uploading || !selectedFile"
+                class="upload-button">
+          <mat-icon>{{ uploading ? 'hourglass_empty' : 'cloud_upload' }}</mat-icon>
+          {{ uploading ? 'Uploading...' : 'Upload Artifact' }}
+        </button>
+      </div>
+    </form>
+
+    <!-- Status Messages -->
+    <div *ngIf="uploadStatus" class="status-section">
+      <mat-chip-set>
+        <mat-chip [class]="uploadStatusType">
+          <mat-icon matChipAvatar>
+            {{ uploadStatusType === 'success' ? 'check_circle' : 'error' }}
+          </mat-icon>
+          {{ uploadStatus }}
+        </mat-chip>
+      </mat-chip-set>
+    </div>
+  </mat-card-content>
+</mat-card>
--- a/frontend/src/app/components/upload-form/upload-form.component.scss
+++ b/frontend/src/app/components/upload-form/upload-form.component.scss
@@ -0,0 +1,124 @@
+.upload-card {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.upload-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.file-upload-section {
+  margin-bottom: 24px;
+
+  .file-input-container {
+    position: relative;
+  }
+}
+
+.selected-file-info {
+  margin-top: 12px;
+
+  mat-chip-set {
+    gap: 8px;
+  }
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.json-section {
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 1px solid #e0e0e0;
+
+  h3 {
+    margin: 0 0 16px 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #424242;
+  }
+}
+
+.upload-progress {
+  margin: 16px 0;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: center;
+  margin-top: 24px;
+}
+
+.upload-button {
+  padding: 12px 32px;
+  font-size: 16px;
+
+  mat-icon {
+    margin-right: 8px;
+  }
+}
+
+.status-section {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+
+  mat-chip-set {
+    justify-content: center;
+  }
+
+  .success {
+    background-color: #c8e6c9 !important;
+    color: #2e7d32 !important;
+  }
+
+  .error {
+    background-color: #ffcdd2 !important;
+    color: #d32f2f !important;
+  }
+}
+
+// Material Design overrides
+:host ::ng-deep {
+  .mat-mdc-form-field {
+    width: 100%;
+  }
+
+  .mat-mdc-form-field-hint {
+    font-size: 12px;
+  }
+
+  .mat-mdc-chip {
+    --mdc-chip-container-height: 28px;
+  }
+
+  .mat-mdc-text-field-wrapper {
+    background-color: transparent;
+  }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+
+  .upload-card {
+    margin: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .upload-button {
+    width: 100%;
+  }
+}
--- a/frontend/src/app/components/upload-form/upload-form.component.ts
+++ b/frontend/src/app/components/upload-form/upload-form.component.ts
@@ -0,0 +1,176 @@
+import { Component, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { ArtifactService } from '../../services/artifact.service';
+
+@Component({
+  selector: 'app-upload-form',
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatButtonModule,
+    MatIconModule,
+    MatChipsModule,
+    MatProgressBarModule,
+    MatSnackBarModule
+  ],
+  templateUrl: './upload-form.component.html',
+  styleUrl: './upload-form.component.scss'
+})
+export class UploadFormComponent {
+  @Output() uploadSuccess = new EventEmitter<void>();
+
+  selectedFile: File | null = null;
+  uploading = false;
+  uploadStatus = '';
+  uploadStatusType: 'success' | 'error' | '' = '';
+
+  formData = {
+    testName: '',
+    testSuite: '',
+    testResult: '',
+    version: '',
+    description: '',
+    tags: '',
+    testConfig: '',
+    customMetadata: '',
+    eventId: '',
+    binaries: ''
+  };
+
+  testResults = ['pass', 'fail', 'skip', 'error'];
+
+  constructor(private artifactService: ArtifactService) {}
+
+  onFileSelected(event: any): void {
+    const file = event.target.files[0];
+    if (file) {
+      this.selectedFile = file;
+    }
+  }
+
+  resetForm(): void {
+    this.selectedFile = null;
+    this.formData = {
+      testName: '',
+      testSuite: '',
+      testResult: '',
+      version: '',
+      description: '',
+      tags: '',
+      testConfig: '',
+      customMetadata: '',
+      eventId: '',
+      binaries: ''
+    };
+
+    const fileInput = document.getElementById('file') as HTMLInputElement;
+    if (fileInput) {
+      fileInput.value = '';
+    }
+  }
+
+  showUploadStatus(message: string, success: boolean): void {
+    this.uploadStatus = message;
+    this.uploadStatusType = success ? 'success' : 'error';
+
+    setTimeout(() => {
+      this.uploadStatus = '';
+      this.uploadStatusType = '';
+    }, 5000);
+  }
+
+  uploadArtifact(): void {
+    if (!this.selectedFile) {
+      this.showUploadStatus('Please select a file to upload', false);
+      return;
+    }
+
+    this.uploading = true;
+
+    const formData = new FormData();
+    formData.append('file', this.selectedFile);
+
+    const fields = ['testName', 'testSuite', 'testResult', 'version', 'description', 'eventId'];
+    fields.forEach(field => {
+      const key = field === 'testName' ? 'test_name' :
+                  field === 'testSuite' ? 'test_suite' :
+                  field === 'testResult' ? 'test_result' :
+                  field === 'eventId' ? 'event_id' : field;
+
+      const value = this.formData[field as keyof typeof this.formData];
+      if (value) {
+        formData.append(key, value);
+      }
+    });
+
+    if (this.formData.tags) {
+      const tagsArray = this.formData.tags.split(',').map(t => t.trim()).filter(t => t);
+      formData.append('tags', JSON.stringify(tagsArray));
+    }
+
+    if (this.formData.binaries) {
+      const binariesArray = this.formData.binaries.split(',').map(b => b.trim()).filter(b => b);
+      formData.append('binaries', JSON.stringify(binariesArray));
+    }
+
+    if (this.formData.testConfig) {
+      try {
+        JSON.parse(this.formData.testConfig);
+        formData.append('test_config', this.formData.testConfig);
+      } catch (e) {
+        this.showUploadStatus('Invalid Test Config JSON', false);
+        this.uploading = false;
+        return;
+      }
+    }
+
+    if (this.formData.customMetadata) {
+      try {
+        JSON.parse(this.formData.customMetadata);
+        formData.append('custom_metadata', this.formData.customMetadata);
+      } catch (e) {
+        this.showUploadStatus('Invalid Custom Metadata JSON', false);
+        this.uploading = false;
+        return;
+      }
+    }
+
+    this.artifactService.uploadArtifact(formData).subscribe({
+      next: (response) => {
+        this.showUploadStatus(`Successfully uploaded: ${response.filename}`, true);
+        this.resetForm();
+        this.uploadSuccess.emit();
+        this.uploading = false;
+      },
+      error: (error) => {
+        console.error('Upload error:', error);
+        this.showUploadStatus('Upload failed: ' + (error.error?.detail || error.message), false);
+        this.uploading = false;
+      }
+    });
+  }
+
+  getResultIcon(result: string): string {
+    switch (result) {
+      case 'pass': return 'check_circle';
+      case 'fail': return 'cancel';
+      case 'skip': return 'skip_next';
+      case 'error': return 'error';
+      default: return 'help';
+    }
+  }
+}
--- a/frontend/src/app/models/artifact.interface.ts
+++ b/frontend/src/app/models/artifact.interface.ts
@@ -0,0 +1,51 @@
+export interface Artifact {
+  id: number;
+  filename: string;
+  file_type: string;
+  file_size: number;
+  storage_path: string;
+  test_name?: string;
+  test_suite?: string;
+  test_result?: 'pass' | 'fail' | 'skip' | 'error';
+  test_config?: any;
+  custom_metadata?: any;
+  description?: string;
+  tags: string[];
+  version?: string;
+  created_at: string;
+  updated_at: string;
+  event_id?: string;
+  binaries?: string[];
+}
+
+export interface ArtifactQuery {
+  filename?: string;
+  file_type?: string;
+  test_name?: string;
+  test_suite?: string;
+  test_result?: string;
+  tags?: string[];
+  start_date?: string;
+  end_date?: string;
+  limit?: number;
+  offset?: number;
+}
+
+export interface ApiInfo {
+  deployment_mode: string;
+  storage_backend: string;
+}
+
+export interface UploadResponse {
+  id: number;
+  filename: string;
+  message: string;
+}
+
+export interface Tag {
+  id?: number;
+  name: string;
+  scope?: string;
+  color?: string;
+  created_at?: string;
+}
--- a/frontend/src/app/services/api.service.ts
+++ b/frontend/src/app/services/api.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { ApiInfo } from '../models/artifact.interface';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApiService {
+  // Use relative URL - proxy will forward to backend
+  private readonly API_BASE = '';
+
+  constructor(private http: HttpClient) { }
+
+  getApiInfo(): Observable<ApiInfo> {
+    return this.http.get<ApiInfo>(`${this.API_BASE}/api`);
+  }
+}
--- a/frontend/src/app/services/artifact.service.ts
+++ b/frontend/src/app/services/artifact.service.ts
@@ -0,0 +1,72 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable, BehaviorSubject } from 'rxjs';
+import { Artifact, ArtifactQuery, UploadResponse, Tag } from '../models/artifact.interface';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ArtifactService {
+  // Use relative URL - proxy will forward to backend
+  private readonly API_BASE = '/api/v1';
+  private artifactsSubject = new BehaviorSubject<Artifact[]>([]);
+  public artifacts$ = this.artifactsSubject.asObservable();
+
+  constructor(private http: HttpClient) { }
+
+  getArtifacts(limit: number = 25, offset: number = 0): Observable<Artifact[]> {
+    const params = new HttpParams()
+      .set('limit', limit.toString())
+      .set('offset', offset.toString());
+
+    return this.http.get<Artifact[]>(`${this.API_BASE}/artifacts/`, { params });
+  }
+
+  getArtifact(id: number): Observable<Artifact> {
+    return this.http.get<Artifact>(`${this.API_BASE}/artifacts/${id}`);
+  }
+
+  uploadArtifact(formData: FormData): Observable<UploadResponse> {
+    return this.http.post<UploadResponse>(`${this.API_BASE}/artifacts/upload`, formData);
+  }
+
+  deleteArtifact(id: number): Observable<any> {
+    return this.http.delete(`${this.API_BASE}/artifacts/${id}`);
+  }
+
+  downloadArtifact(id: number): Observable<Blob> {
+    return this.http.get(`${this.API_BASE}/artifacts/${id}/download`, { responseType: 'blob' });
+  }
+
+  queryArtifacts(query: ArtifactQuery): Observable<Artifact[]> {
+    return this.http.post<Artifact[]>(`${this.API_BASE}/artifacts/query`, query);
+  }
+
+  generateSeedData(count: number): Observable<any> {
+    return this.http.post(`${this.API_BASE}/seed/generate/${count}`, {});
+  }
+
+  updateArtifactsCache(artifacts: Artifact[]): void {
+    this.artifactsSubject.next(artifacts);
+  }
+
+  getCurrentArtifacts(): Artifact[] {
+    return this.artifactsSubject.value;
+  }
+
+  addTag(artifactId: number, tag: Tag): Observable<any> {
+    return this.http.post(`${this.API_BASE}/artifacts/${artifactId}/tags`, tag);
+  }
+
+  removeTag(artifactId: number, tagId: number): Observable<any> {
+    return this.http.delete(`${this.API_BASE}/artifacts/${artifactId}/tags/${tagId}`);
+  }
+
+  getAllTags(): Observable<Tag[]> {
+    return this.http.get<Tag[]>(`${this.API_BASE}/tags`);
+  }
+
+  createTag(tag: Tag): Observable<Tag> {
+    return this.http.post<Tag>(`${this.API_BASE}/tags`, tag);
+  }
+}
--- a/frontend/src/app/services/notification.service.ts
+++ b/frontend/src/app/services/notification.service.ts
@@ -0,0 +1,64 @@
+import { Injectable } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NotificationService {
+
+  constructor(private snackBar: MatSnackBar) {}
+
+  showSuccess(message: string, duration: number = 3000): void {
+    this.snackBar.open(message, 'Close', {
+      duration,
+      panelClass: ['success-snackbar'],
+      horizontalPosition: 'center',
+      verticalPosition: 'bottom'
+    });
+  }
+
+  showError(message: string, duration: number = 5000): void {
+    this.snackBar.open(message, 'Close', {
+      duration,
+      panelClass: ['error-snackbar'],
+      horizontalPosition: 'center',
+      verticalPosition: 'bottom'
+    });
+  }
+
+  showInfo(message: string, duration: number = 3000): void {
+    this.snackBar.open(message, 'Close', {
+      duration,
+      panelClass: ['info-snackbar'],
+      horizontalPosition: 'center',
+      verticalPosition: 'bottom'
+    });
+  }
+
+  showWarning(message: string, duration: number = 4000): void {
+    this.snackBar.open(message, 'Close', {
+      duration,
+      panelClass: ['warning-snackbar'],
+      horizontalPosition: 'center',
+      verticalPosition: 'bottom'
+    });
+  }
+
+  showConfirmation(message: string, action: string = 'Confirm'): Promise<boolean> {
+    const snackBarRef = this.snackBar.open(message, action, {
+      duration: 10000,
+      panelClass: ['confirmation-snackbar'],
+      horizontalPosition: 'center',
+      verticalPosition: 'bottom'
+    });
+
+    return new Promise((resolve) => {
+      snackBarRef.onAction().subscribe(() => resolve(true));
+      snackBarRef.afterDismissed().subscribe((info) => {
+        if (!info.dismissedByAction) {
+          resolve(false);
+        }
+      });
+    });
+  }
+}
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Frontend</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=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -0,0 +1,709 @@
+/* Global styles for the Test Artifact Data Lake Angular app with Material Design */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Roboto, "Helvetica Neue", sans-serif;
+    background: linear-gradient(135deg, #3f51b5 0%, #9c27b0 100%);
+    min-height: 100vh;
+    padding: 20px;
+}
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+}
+
+header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+header h1 {
+    font-size: 28px;
+    font-weight: 600;
+}
+
+.header-info {
+    display: flex;
+    gap: 10px;
+}
+
+.badge {
+    background: rgba(255, 255, 255, 0.2);
+    padding: 6px 12px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 500;
+    text-transform: uppercase;
+    backdrop-filter: blur(10px);
+}
+
+.tabs {
+    display: flex;
+    background: #f7f9fc;
+    border-bottom: 2px solid #e2e8f0;
+}
+
+.tab-button {
+    flex: 1;
+    padding: 16px 24px;
+    background: none;
+    border: none;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s;
+    color: #64748b;
+}
+
+.tab-button:hover {
+    background: #e2e8f0;
+}
+
+.tab-button.active {
+    background: white;
+    color: #667eea;
+    border-bottom: 3px solid #667eea;
+}
+
+.tab-content {
+    display: none;
+    padding: 30px;
+}
+
+.tab-content.active {
+    display: block;
+}
+
+.toolbar {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+    align-items: center;
+}
+
+.btn {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.btn-primary {
+    background: #667eea;
+    color: white;
+}
+
+.btn-primary:hover {
+    background: #5568d3;
+    transform: translateY(-1px);
+}
+
+.btn-secondary {
+    background: #e2e8f0;
+    color: #475569;
+}
+
+.btn-secondary:hover {
+    background: #cbd5e1;
+}
+
+.btn-danger {
+    background: #ef4444;
+    color: white;
+}
+
+.btn-danger:hover {
+    background: #dc2626;
+}
+
+.btn-success {
+    background: #10b981;
+    color: white;
+}
+
+.btn-large {
+    padding: 14px 28px;
+    font-size: 16px;
+}
+
+.btn-sm {
+    padding: 6px 12px;
+    font-size: 12px;
+}
+
+.count-badge {
+    background: #f0f9ff;
+    color: #0369a1;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 13px;
+    font-weight: 600;
+    margin-left: auto;
+}
+
+.table-container {
+    overflow-x: auto;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 14px;
+}
+
+thead {
+    background: #f7f9fc;
+}
+
+th {
+    padding: 14px 12px;
+    text-align: left;
+    font-weight: 600;
+    color: #475569;
+    border-bottom: 2px solid #e2e8f0;
+    white-space: nowrap;
+}
+
+td {
+    padding: 12px;
+    border-bottom: 1px solid #e2e8f0;
+}
+
+tbody tr:hover {
+    background: #f7f9fc;
+}
+
+.loading {
+    text-align: center;
+    color: #94a3b8;
+    padding: 40px !important;
+}
+
+.result-badge {
+    padding: 4px 10px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.result-pass {
+    background: #d1fae5;
+    color: #065f46;
+}
+
+.result-fail {
+    background: #fee2e2;
+    color: #991b1b;
+}
+
+.result-skip {
+    background: #fef3c7;
+    color: #92400e;
+}
+
+.result-error {
+    background: #fecaca;
+    color: #7f1d1d;
+}
+
+.tag {
+    display: inline-block;
+    background: #e0e7ff;
+    color: #3730a3;
+    padding: 3px 8px;
+    border-radius: 10px;
+    font-size: 11px;
+    margin: 2px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.tag:hover {
+    background: #c7d2fe;
+}
+
+.tag.removable {
+    background: #f87171;
+    color: white;
+}
+
+.tag.removable:hover {
+    background: #ef4444;
+}
+
+.tag.available {
+    background: #f3f4f6;
+    color: #374151;
+    border: 1px solid #d1d5db;
+}
+
+.tag.available:hover:not(.attached) {
+    background: #e5e7eb;
+}
+
+.tag.attached {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.file-type-badge {
+    background: #dbeafe;
+    color: #1e40af;
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    margin-top: 20px;
+    padding: 20px;
+}
+
+#page-info {
+    font-weight: 500;
+    color: #64748b;
+}
+
+.upload-section, .query-section {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.form-group {
+    margin-bottom: 20px;
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+}
+
+.form-actions {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+label {
+    display: block;
+    font-weight: 500;
+    color: #475569;
+    margin-bottom: 6px;
+    font-size: 14px;
+}
+
+input[type="text"],
+input[type="file"],
+input[type="datetime-local"],
+select,
+textarea {
+    width: 100%;
+    padding: 10px 14px;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    font-size: 14px;
+    font-family: inherit;
+    transition: border-color 0.3s;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+small {
+    color: #94a3b8;
+    font-size: 12px;
+    display: block;
+    margin-top: 4px;
+}
+
+.upload-status {
+    margin-top: 20px;
+    padding: 14px;
+    border-radius: 6px;
+    display: none;
+}
+
+.upload-status.success {
+    background: #d1fae5;
+    color: #065f46;
+    display: block;
+}
+
+.upload-status.error {
+    background: #fee2e2;
+    color: #991b1b;
+    display: block;
+}
+
+.selected-file {
+    margin-top: 8px;
+    padding: 8px;
+    background: #f0f9ff;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #0369a1;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+}
+
+.modal.active {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-content {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    max-width: 700px;
+    max-height: 80vh;
+    overflow-y: auto;
+    position: relative;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.close {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    font-size: 28px;
+    font-weight: bold;
+    color: #94a3b8;
+    cursor: pointer;
+    transition: color 0.3s;
+}
+
+.close:hover {
+    color: #475569;
+}
+
+.detail-row {
+    margin-bottom: 16px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #e2e8f0;
+}
+
+.detail-row:last-child {
+    border-bottom: none;
+}
+
+.detail-label {
+    font-weight: 600;
+    color: #475569;
+    margin-bottom: 4px;
+}
+
+.detail-value {
+    color: #64748b;
+}
+
+pre {
+    background: #f7f9fc;
+    padding: 12px;
+    border-radius: 6px;
+    overflow-x: auto;
+    font-size: 12px;
+}
+
+.action-buttons {
+    display: flex;
+    gap: 8px;
+}
+
+.icon-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 18px;
+    padding: 6px;
+    border-radius: 4px;
+    transition: background 0.3s;
+}
+
+.icon-btn:hover {
+    background: #e2e8f0;
+}
+
+.filename-link {
+    color: #667eea;
+    text-decoration: none;
+}
+
+.filename-link:hover {
+    text-decoration: underline;
+}
+
+/* Binaries and Tags cells */
+.binaries-cell, .tags-cell {
+    max-width: 200px;
+}
+
+.binaries-list, .tags-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    align-items: center;
+}
+
+.binary-item {
+    background: #f3f4f6;
+    color: #374151;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 10px;
+    font-family: monospace;
+}
+
+.expand-btn {
+    background: #e5e7eb;
+    color: #374151;
+    border: none;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 10px;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.expand-btn:hover {
+    background: #d1d5db;
+}
+
+.expanded-binaries, .expanded-tags {
+    margin-top: 8px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+}
+
+/* Tag Manager */
+.tag-manager {
+    position: relative;
+    display: inline-block;
+}
+
+.current-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-bottom: 8px;
+}
+
+.add-tag-btn {
+    background: #667eea;
+    color: white;
+    border: none;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.2s;
+}
+
+.add-tag-btn:hover {
+    background: #5568d3;
+}
+
+.add-tag-btn.active {
+    background: #ef4444;
+}
+
+.add-tag-form {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background: white;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+    min-width: 300px;
+}
+
+.tag-input, .scope-select, .scope-custom-input {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #e2e8f0;
+    border-radius: 4px;
+    font-size: 12px;
+    margin-bottom: 8px;
+}
+
+.scope-toggle-btn {
+    background: #f3f4f6;
+    color: #374151;
+    border: none;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    cursor: pointer;
+    margin-bottom: 8px;
+}
+
+.scope-input {
+    display: flex;
+    gap: 8px;
+}
+
+.available-tags {
+    margin-top: 16px;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.available-tags h4 {
+    font-size: 12px;
+    color: #475569;
+    margin-bottom: 8px;
+}
+
+.tag-group {
+    margin-bottom: 12px;
+}
+
+.tag-group h5 {
+    font-size: 11px;
+    color: #6b7280;
+    margin-bottom: 4px;
+}
+
+.tag-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+}
+
+.attached-indicator {
+    margin-left: 4px;
+    color: #10b981;
+}
+
+/* Filter chips */
+.filter-info {
+    margin-top: 20px;
+    padding: 16px;
+    background: #f7f9fc;
+    border-radius: 8px;
+}
+
+.filter-info h4 {
+    font-size: 14px;
+    color: #475569;
+    margin-bottom: 8px;
+}
+
+.active-filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.filter-chip {
+    background: #667eea;
+    color: white;
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 11px;
+    font-weight: 500;
+}
+
+@media (max-width: 768px) {
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+
+    header {
+        flex-direction: column;
+        gap: 15px;
+        text-align: center;
+    }
+
+    .table-container {
+        font-size: 12px;
+    }
+
+    th, td {
+        padding: 8px 6px;
+    }
+
+    .binaries-cell, .tags-cell {
+        max-width: 150px;
+    }
+}
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+/* Material Snackbar Styles */
+.success-snackbar {
+  background-color: #4caf50 !important;
+  color: white !important;
+}
+
+.error-snackbar {
+  background-color: #f44336 !important;
+  color: white !important;
+}
+
+.info-snackbar {
+  background-color: #2196f3 !important;
+  color: white !important;
+}
+
+.warning-snackbar {
+  background-color: #ff9800 !important;
+  color: white !important;
+}
+
+.confirmation-snackbar {
+  background-color: #673ab7 !important;
+  color: white !important;
+}
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,27 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
--- a/frontend/tsconfig.spec.json
+++ b/frontend/tsconfig.spec.json
@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}