Fix text visibility and table alignment in dark theme

- Improve badge colors for better readability (white text on blue background)
- Fix count badge with bright blue background and white text
- Fix type chip visibility with brighter blue color
- Fix filename cell alignment by using inline-flex instead of flex
- Improve header chip text color visibility
- Increase artifact fetch limit from 25 to 1000 to show all artifacts
- Add proper styling for accent buttons in toolbar

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

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

.claude/settings.local.json

@@ -31,7 +31,11 @@
       "mcp__ide__getDiagnostics",
       "Read(//c/Users/Pratik/Desktop/code/**)",
       "Bash(cat:*)",
-      "Bash(git add:*)"
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git merge:*)",
+      "Bash(git rm:*)",
+      "Bash(git checkout:*)"
     ],
     "deny": [],
     "ask": []

frontend/src/app/app.component.scss

@@ -31,13 +31,22 @@
 }
 
 .header-info {
-  mat-chip-set {
+  ::ng-deep {
-    mat-chip {
+    mat-chip-set {
-      background-color: rgba(255, 255, 255, 0.2) !important;
+      mat-chip {
-      color: white !important;
+        background-color: rgba(255, 255, 255, 0.2) !important;
 
-      mat-icon {
+        .mdc-evolution-chip__action {
-        color: white !important;
+          color: white !important;
+        }
+
+        .mdc-evolution-chip__text-label {
+          color: white !important;
+        }
+
+        mat-icon {
+          color: white !important;
+        }
       }
     }
   }
@@ -146,11 +155,19 @@
   margin-bottom: 20px;
   align-items: center;
   flex-wrap: wrap;
+
+  // Ensure buttons have proper styling
+  button {
+    &[color="accent"] {
+      background-color: #10b981 !important;
+      color: white !important;
+    }
+  }
 }
 
 .count-badge {
-  background: #1e3a8a;
+  background: #3b82f6;
-  color: #93c5fd;
+  color: #ffffff;
   padding: 8px 16px;
   border-radius: 20px;
   font-size: 13px;
@@ -246,25 +263,27 @@
   }
 
   .filename-cell {
-    display: flex;
+    display: inline-flex;
     align-items: center;
     gap: 8px;
     font-weight: 500;
+    color: #cbd5e1;
 
     .file-icon {
       color: #60a5fa;
       font-size: 20px;
       width: 20px;
       height: 20px;
+      flex-shrink: 0;
     }
   }
 
   .type-chip {
-    background-color: #1e3a8a !important;
+    background-color: #3b82f6 !important;
-    color: #93c5fd !important;
+    color: #ffffff !important;
     font-weight: 600;
     font-size: 11px;
-    padding: 4px 8px;
+    padding: 4px 12px;
     height: auto;
   }
 

frontend/src/app/services/artifact.service.ts

@@ -14,7 +14,7 @@ export class ArtifactService {
 
   constructor(private http: HttpClient) { }
 
-  getArtifacts(limit: number = 25, offset: number = 0): Observable<Artifact[]> {
+  getArtifacts(limit: number = 1000, offset: number = 0): Observable<Artifact[]> {
     const params = new HttpParams()
       .set('limit', limit.toString())
       .set('offset', offset.toString());