Integrate dark theme styling from main branch with Angular Material

- Apply dark blue color scheme (#0f172a, #1e293b, #334155) throughout UI
- Update header with blue gradient and Obsidian branding
- Add missing toolbar buttons: Auto-refresh, Seed Data, Search filter
- Implement action buttons (Download, Delete) in artifacts table
- Add client-side search/filtering functionality
- Update app to support sim_source_id field in database
- Move quickstart scripts to repository root for easier access
- Apply dark theme to tables, tabs, and all Material components

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/settings.local.json

@@ -26,7 +26,12 @@
       "Bash(ng serve:*)",
       "Bash(if exist .angular rmdir /s /q .angular)",
       "Bash(dir:*)",
-      "Bash(tree:*)"
+      "Bash(tree:*)",
+      "Bash(git ls-tree:*)",
+      "mcp__ide__getDiagnostics",
+      "Read(//c/Users/Pratik/Desktop/code/**)",
+      "Bash(cat:*)",
+      "Bash(git add:*)"
     ],
     "deny": [],
     "ask": []

app/models/artifact.py

@@ -20,6 +20,7 @@ class Artifact(Base):
     test_suite = Column(String(500), index=True)
     test_config = Column(JSON)
     test_result = Column(String(50), index=True)  # pass, fail, skip, error
+    sim_source_id = Column(String(500), index=True)  # SIM source identifier for grouping
 
     # Additional metadata
     custom_metadata = Column(JSON)

app/schemas/artifact.py

@@ -8,6 +8,7 @@ class ArtifactCreate(BaseModel):
     test_suite: Optional[str] = None
     test_config: Optional[Dict[str, Any]] = None
     test_result: Optional[str] = None
+    sim_source_id: Optional[str] = None
     custom_metadata: Optional[Dict[str, Any]] = None
     description: Optional[str] = None
     tags: Optional[List[str]] = None
@@ -26,6 +27,7 @@ class ArtifactResponse(BaseModel):
     test_suite: Optional[str] = None
     test_config: Optional[Dict[str, Any]] = None
     test_result: Optional[str] = None
+    sim_source_id: Optional[str] = None
     custom_metadata: Optional[Dict[str, Any]] = None
     description: Optional[str] = None
     tags: Optional[List[str]] = None
@@ -44,6 +46,7 @@ class ArtifactQuery(BaseModel):
     test_name: Optional[str] = None
     test_suite: Optional[str] = None
     test_result: Optional[str] = None
+    sim_source_id: Optional[str] = None
     tags: Optional[List[str]] = None
     start_date: Optional[datetime] = None
     end_date: Optional[datetime] = None

frontend/src/app/app.component.html

@@ -1,18 +1,18 @@
 <div class="app-container">
   <!-- Material Toolbar Header -->
   <mat-toolbar color="primary" class="app-toolbar">
-    <mat-icon class="app-icon">storage</mat-icon>
+    <mat-icon class="app-icon">diamond</mat-icon>
-    <span class="app-title">{{ title }}</span>
+    <span class="app-title">◆ Obsidian</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 }}
+          Mode: {{ apiInfo.deployment_mode }}
         </mat-chip>
         <mat-chip>
           <mat-icon matChipAvatar>folder</mat-icon>
-          {{ apiInfo.storage_backend }}
+          Storage: {{ apiInfo.storage_backend }}
         </mat-chip>
       </mat-chip-set>
     </div>
@@ -24,18 +24,30 @@
     <mat-tab label="Artifacts">
       <ng-template matTabContent>
         <div class="tab-content-wrapper">
-          <div class="content-header">
+          <div class="toolbar">
-            <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>
+            <button mat-raised-button [color]="autoRefreshEnabled ? 'accent' : ''" (click)="toggleAutoRefresh()">
+              Auto-refresh: {{ autoRefreshEnabled ? 'ON' : 'OFF' }}
+            </button>
+            <button mat-raised-button (click)="generateSeedData()">
+              <mat-icon>auto_awesome</mat-icon>
+              Generate Seed Data
+            </button>
+            <span class="count-badge">{{ artifacts.length }} artifacts</span>
+            <mat-form-field appearance="outline" class="filter-search">
+              <mat-label>Search</mat-label>
+              <input matInput [(ngModel)]="searchTerm" (input)="filterTable()" placeholder="Search...">
+              <mat-icon matPrefix>search</mat-icon>
+              <button mat-icon-button matSuffix *ngIf="searchTerm" (click)="clearSearch()">
+                <mat-icon>close</mat-icon>
+              </button>
+            </mat-form-field>
           </div>
 
-          <table mat-table [dataSource]="artifacts" class="artifacts-table mat-elevation-z4">
+          <table mat-table [dataSource]="filteredArtifacts" class="artifacts-table mat-elevation-z4">
             <!-- ID Column -->
             <ng-container matColumnDef="id">
               <th mat-header-cell *matHeaderCellDef>ID</th>
@@ -82,6 +94,21 @@
               </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">
+                    <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>
+
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
           </table>

frontend/src/app/app.component.scss

@@ -2,14 +2,18 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background: #f5f5f5;
+  background: #1e293b;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
 }
 
 .app-toolbar {
   position: sticky;
   top: 0;
   z-index: 10;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  background: linear-gradient(135deg, #1e3a8a 0%, #4338ca 100%) !important;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
 }
 
 .app-icon {
@@ -39,22 +43,24 @@
   }
 }
 
-// Tab Group Styling
+// Tab Group Styling - Dark Theme
 .main-tabs {
   flex: 1;
   display: flex;
   flex-direction: column;
-  background: white;
+  background: #1e293b;
 
   ::ng-deep {
     .mat-mdc-tab-body-wrapper {
       flex: 1;
       padding: 0;
+      background: #1e293b;
     }
 
     .mat-mdc-tab-header {
-      background: white;
+      background: #0f172a;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.08);
+      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+      border-bottom: 2px solid #334155;
     }
 
     .mat-mdc-tab-labels {
@@ -67,28 +73,47 @@
       font-size: 14px;
       font-weight: 500;
       letter-spacing: 0.5px;
-      text-transform: uppercase;
+      color: #94a3b8;
+
+      &:hover {
+        background: #1e293b;
+        color: #e2e8f0;
+      }
+    }
+
+    .mat-mdc-tab.mdc-tab--active {
+      .mdc-tab__text-label {
+        color: #60a5fa;
+      }
+    }
+
+    .mat-mdc-tab-indicator {
+      .mdc-tab-indicator__content--underline {
+        background-color: #60a5fa;
+        height: 3px;
+      }
     }
   }
 }
 
-// Tab Content Wrapper
+// Tab Content Wrapper - Dark Theme
 .tab-content-wrapper {
-  padding: 24px;
+  padding: 30px;
   max-width: 1400px;
   margin: 0 auto;
   width: 100%;
   min-height: calc(100vh - 180px);
+  background: #1e293b;
 }
 
-// Content Header
+// Content Header - Dark Theme
 .content-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 24px;
+  margin-bottom: 20px;
-  padding-bottom: 16px;
+  flex-wrap: wrap;
-  border-bottom: 2px solid #e0e0e0;
+  gap: 10px;
 
   h2 {
     display: flex;
@@ -97,10 +122,10 @@
     margin: 0;
     font-size: 24px;
     font-weight: 500;
-    color: #333;
+    color: #e2e8f0;
 
     mat-icon {
-      color: #3f51b5;
+      color: #60a5fa;
       font-size: 28px;
       width: 28px;
       height: 28px;
@@ -114,36 +139,109 @@
   }
 }
 
-// Artifacts Table Styling
+// Toolbar styling
+.toolbar {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.count-badge {
+  background: #1e3a8a;
+  color: #93c5fd;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 600;
+  margin-left: auto;
+}
+
+// Filter Search Styling
+.filter-search {
+  min-width: 250px;
+
+  ::ng-deep {
+    .mat-mdc-text-field-wrapper {
+      background: #0f172a;
+      border-radius: 6px;
+    }
+
+    .mat-mdc-form-field-input-control {
+      color: #e2e8f0;
+    }
+
+    .mat-mdc-form-field-label {
+      color: #94a3b8;
+    }
+
+    .mdc-notched-outline__leading,
+    .mdc-notched-outline__notch,
+    .mdc-notched-outline__trailing {
+      border-color: #334155 !important;
+    }
+
+    .mat-mdc-form-field:hover .mdc-notched-outline__leading,
+    .mat-mdc-form-field:hover .mdc-notched-outline__notch,
+    .mat-mdc-form-field:hover .mdc-notched-outline__trailing {
+      border-color: #60a5fa !important;
+    }
+
+    .mat-mdc-form-field-icon-prefix,
+    .mat-mdc-form-field-icon-suffix {
+      color: #64748b;
+    }
+  }
+}
+
+// Action buttons styling
+.action-buttons {
+  display: flex;
+  gap: 4px;
+
+  button {
+    color: #94a3b8;
+
+    &:hover {
+      color: #e2e8f0;
+      background: #334155;
+    }
+  }
+}
+
+// Artifacts Table Styling - Dark Theme
 .artifacts-table {
   width: 100%;
-  background: white;
+  background: #0f172a;
   border-radius: 8px;
   overflow: hidden;
+  border: 1px solid #334155;
 
   th.mat-mdc-header-cell {
-    background: #f8f9fa;
+    background: #1e293b;
-    color: #333;
+    color: #94a3b8;
     font-weight: 600;
-    font-size: 14px;
+    font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    padding: 16px 12px;
+    padding: 14px 12px;
-    border-bottom: 2px solid #e0e0e0;
+    border-bottom: 2px solid #334155;
   }
 
   td.mat-mdc-cell {
     padding: 16px 12px;
     font-size: 14px;
-    color: #555;
+    color: #cbd5e1;
-    border-bottom: 1px solid #f0f0f0;
+    border-bottom: 1px solid #1e293b;
   }
 
   tr.mat-mdc-row {
     transition: background-color 0.2s ease;
+    background: #0f172a;
 
     &:hover {
-      background-color: #f8f9fa;
+      background-color: #1e293b;
     }
   }
 
@@ -154,7 +252,7 @@
     font-weight: 500;
 
     .file-icon {
-      color: #3f51b5;
+      color: #60a5fa;
       font-size: 20px;
       width: 20px;
       height: 20px;
@@ -162,42 +260,58 @@
   }
 
   .type-chip {
-    background-color: #e3f2fd !important;
+    background-color: #1e3a8a !important;
-    color: #1976d2 !important;
+    color: #93c5fd !important;
-    font-weight: 500;
+    font-weight: 600;
-    font-size: 12px;
+    font-size: 11px;
-    padding: 4px 12px;
+    padding: 4px 8px;
-    height: 28px;
+    height: auto;
   }
 
   .text-muted {
-    color: #999;
+    color: #64748b;
   }
 }
 
-// Result Chips
+// Result Chips - Dark Theme
 .result-pass {
-  background-color: #e8f5e9 !important;
+  background-color: #064e3b !important;
-  color: #2e7d32 !important;
+  color: #6ee7b7 !important;
   font-weight: 600;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  text-transform: uppercase;
 }
 
 .result-fail {
-  background-color: #ffebee !important;
+  background-color: #7f1d1d !important;
-  color: #c62828 !important;
+  color: #fca5a5 !important;
   font-weight: 600;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  text-transform: uppercase;
 }
 
 .result-skip {
-  background-color: #fff3e0 !important;
+  background-color: #78350f !important;
-  color: #ef6c00 !important;
+  color: #fcd34d !important;
   font-weight: 600;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  text-transform: uppercase;
 }
 
 .result-error {
-  background-color: #fce4ec !important;
+  background-color: #7f1d1d !important;
-  color: #c2185b !important;
+  color: #fca5a5 !important;
   font-weight: 600;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  text-transform: uppercase;
 }
 
 // Responsive Design

frontend/src/app/app.component.ts

@@ -1,11 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 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 { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { UploadFormComponent } from './components/upload-form/upload-form.component';
 import { QueryFormComponent } from './components/query-form/query-form.component';
 import { ApiService } from './services/api.service';
@@ -16,24 +20,32 @@ import { ApiInfo, Artifact } from './models/artifact.interface';
   selector: 'app-root',
   imports: [
     CommonModule,
+    FormsModule,
     MatToolbarModule,
     MatTableModule,
     MatTabsModule,
     MatChipsModule,
     MatIconModule,
     MatButtonModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatTooltipModule,
     UploadFormComponent,
     QueryFormComponent
   ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, OnDestroy {
-  title = 'Test Artifact Data Lake';
+  title = 'Obsidian - Test Artifact Data Lake';
   apiInfo: ApiInfo | null = null;
   artifacts: Artifact[] = [];
-  displayedColumns: string[] = ['id', 'filename', 'file_type', 'file_size', 'test_name', 'test_result'];
+  filteredArtifacts: Artifact[] = [];
+  displayedColumns: string[] = ['id', 'filename', 'file_type', 'file_size', 'test_name', 'test_result', 'actions'];
   selectedTabIndex = 0;
+  searchTerm: string = '';
+  autoRefreshEnabled: boolean = true;
+  private autoRefreshInterval: any;
 
   constructor(
     private apiService: ApiService,
@@ -43,6 +55,11 @@ export class AppComponent implements OnInit {
   ngOnInit(): void {
     this.loadApiInfo();
     this.loadArtifacts();
+    this.startAutoRefresh();
+  }
+
+  ngOnDestroy(): void {
+    this.stopAutoRefresh();
   }
 
   loadApiInfo(): void {
@@ -61,6 +78,7 @@ export class AppComponent implements OnInit {
       next: (artifacts) => {
         console.log('Loaded artifacts:', artifacts.length);
         this.artifacts = artifacts;
+        this.filterTable();
       },
       error: (error) => {
         console.error('Error loading artifacts:', error);
@@ -68,18 +86,122 @@ export class AppComponent implements OnInit {
     });
   }
 
+  filterTable(): void {
+    if (!this.searchTerm) {
+      this.filteredArtifacts = this.artifacts;
+      return;
+    }
+
+    const term = this.searchTerm.toLowerCase();
+    this.filteredArtifacts = this.artifacts.filter(artifact => {
+      return (
+        artifact.filename?.toLowerCase().includes(term) ||
+        artifact.test_name?.toLowerCase().includes(term) ||
+        artifact.test_suite?.toLowerCase().includes(term) ||
+        artifact.file_type?.toLowerCase().includes(term)
+      );
+    });
+  }
+
+  clearSearch(): void {
+    this.searchTerm = '';
+    this.filterTable();
+  }
+
+  toggleAutoRefresh(): void {
+    this.autoRefreshEnabled = !this.autoRefreshEnabled;
+    if (this.autoRefreshEnabled) {
+      this.startAutoRefresh();
+    } else {
+      this.stopAutoRefresh();
+    }
+  }
+
+  startAutoRefresh(): void {
+    this.stopAutoRefresh();
+    if (this.autoRefreshEnabled) {
+      this.autoRefreshInterval = setInterval(() => {
+        if (this.selectedTabIndex === 0) {
+          this.loadArtifacts();
+        }
+      }, 5000);
+    }
+  }
+
+  stopAutoRefresh(): void {
+    if (this.autoRefreshInterval) {
+      clearInterval(this.autoRefreshInterval);
+      this.autoRefreshInterval = null;
+    }
+  }
+
+  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) {
+      alert('Please enter a number between 1 and 100');
+      return;
+    }
+
+    this.artifactService.generateSeedData(num).subscribe({
+      next: (result: any) => {
+        alert(result.message || `Successfully generated ${num} artifacts`);
+        this.loadArtifacts();
+      },
+      error: (error) => {
+        alert('Error generating seed data: ' + error.message);
+      }
+    });
+  }
+
+  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) => {
+        alert('Error downloading artifact: ' + error.message);
+      }
+    });
+  }
+
+  deleteArtifact(artifact: Artifact): void {
+    if (!confirm(`Are you sure you want to delete "${artifact.filename}"? This cannot be undone.`)) {
+      return;
+    }
+
+    this.artifactService.deleteArtifact(artifact.id).subscribe({
+      next: () => {
+        alert('Artifact deleted successfully');
+        this.loadArtifacts();
+      },
+      error: (error) => {
+        alert('Error deleting artifact: ' + error.message);
+      }
+    });
+  }
+
   onUploadSuccess(): void {
     this.loadArtifacts();
-    this.selectedTabIndex = 0; // Switch back to artifacts tab
+    this.selectedTabIndex = 0;
   }
 
   onQueryResults(artifacts: Artifact[]): void {
     this.artifacts = artifacts;
-    this.selectedTabIndex = 0; // Switch to artifacts tab to show results
+    this.filterTable();
+    this.selectedTabIndex = 0;
   }
 
   onFiltersChange(filters: any): void {
-    // Filters will be handled by the query component
     console.log('Filters changed:', filters);
   }
 

frontend/src/styles.scss

@@ -1,4 +1,4 @@
-/* Global styles for the Test Artifact Data Lake Angular app with Material Design */
+/* Global styles for Obsidian - Dark Theme inspired from main branch */
 
 * {
     margin: 0;
@@ -7,10 +7,11 @@
 }
 
 body {
-    font-family: Roboto, "Helvetica Neue", sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-    background: linear-gradient(135deg, #3f51b5 0%, #9c27b0 100%);
+    background: #0f172a;
     min-height: 100vh;
     padding: 20px;
+    color: #e2e8f0;
 }
 
 .container {