Redesign jobs dashboard with unified table and progress bar

- Add overall progress bar showing completed/active/failed counts
- Unify all job types into single table with Type column
- Simplify status to Working/Pending/Failed badges
- Remove NPM "Coming Soon" section
- Add get_recent_activity() function for future activity feed
- Fix dark mode CSS using CSS variables

backend/app/pypi_cache_worker.py

@@ -600,6 +600,40 @@ def get_active_tasks(db: Session, limit: int = 50) -> List[dict]:
     ]
 
 
+def get_recent_activity(db: Session, limit: int = 20) -> List[dict]:
+    """
+    Get recent task completions and failures for activity feed.
+
+    Args:
+        db: Database session.
+        limit: Maximum number of items to return.
+
+    Returns:
+        List of recent activity items sorted by time descending.
+    """
+    # Get recently completed and failed tasks
+    tasks = (
+        db.query(PyPICacheTask)
+        .filter(PyPICacheTask.status.in_(["completed", "failed"]))
+        .filter(PyPICacheTask.completed_at != None)
+        .order_by(PyPICacheTask.completed_at.desc())
+        .limit(limit)
+        .all()
+    )
+
+    return [
+        {
+            "id": str(task.id),
+            "package": task.package_name,
+            "status": task.status,
+            "type": "pypi",
+            "error": task.error_message if task.status == "failed" else None,
+            "completed_at": task.completed_at.isoformat() if task.completed_at else None,
+        }
+        for task in tasks
+    ]
+
+
 def retry_failed_task(db: Session, package_name: str) -> Optional[PyPICacheTask]:
     """
     Reset a failed task to retry.

backend/app/pypi_proxy.py

@@ -29,6 +29,7 @@ from .pypi_cache_worker import (
     get_cache_status,
     get_failed_tasks,
     get_active_tasks,
+    get_recent_activity,
     retry_failed_task,
     retry_all_failed_tasks,
 )

frontend/src/pages/AdminJobsPage.css

@@ -54,19 +54,19 @@
 /* Messages */
 .success-message {
   padding: 0.75rem 1rem;
-  background-color: #d4edda;
+  background-color: rgba(16, 185, 129, 0.1);
-  border: 1px solid #c3e6cb;
+  border: 1px solid rgba(16, 185, 129, 0.3);
   border-radius: 4px;
-  color: #155724;
+  color: #10b981;
   margin-bottom: 1rem;
 }
 
 .error-message {
   padding: 0.75rem 1rem;
-  background-color: #f8d7da;
+  background-color: rgba(239, 68, 68, 0.1);
-  border: 1px solid #f5c6cb;
+  border: 1px solid rgba(239, 68, 68, 0.3);
   border-radius: 4px;
-  color: #721c24;
+  color: #ef4444;
   margin-bottom: 1rem;
 }
 
@@ -77,10 +77,10 @@
 }
 
 .success-text {
-  color: #2e7d32;
+  color: #10b981;
   padding: 1rem;
   text-align: center;
-  background: #e8f5e9;
+  background: rgba(16, 185, 129, 0.1);
   border-radius: 4px;
   margin-top: 1rem;
 }
@@ -92,6 +92,69 @@
   text-align: center;
 }
 
+/* Overall Progress Bar */
+.overall-progress {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 1rem 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.progress-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.progress-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.progress-stats {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+}
+
+.progress-bar-container {
+  height: 8px;
+  background: var(--bg-tertiary);
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+
+.progress-bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #10b981, #34d399);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.progress-bar-active {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 30%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5), transparent);
+  animation: progress-sweep 1.5s ease-in-out infinite;
+}
+
+@keyframes progress-sweep {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+
 /* Jobs Section */
 .jobs-section {
   background: var(--bg-secondary);
@@ -101,10 +164,6 @@
   margin-bottom: 1.5rem;
 }
 
-.jobs-section.coming-soon {
-  opacity: 0.7;
-}
-
 .section-header {
   display: flex;
   justify-content: space-between;
@@ -112,51 +171,6 @@
   margin-bottom: 1rem;
 }
 
-/* Status Cards */
-.status-cards {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-
-.status-card {
-  background: var(--bg-primary);
-  border-radius: 8px;
-  padding: 1rem;
-  text-align: center;
-  border: 1px solid var(--border-color);
-}
-
-.status-card .status-value {
-  font-size: 2rem;
-  font-weight: 600;
-  line-height: 1.2;
-}
-
-.status-card .status-label {
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  margin-top: 0.25rem;
-}
-
-.status-card.pending .status-value {
-  color: #f59e0b;
-}
-
-.status-card.in-progress .status-value {
-  color: #3b82f6;
-}
-
-.status-card.completed .status-value {
-  color: #10b981;
-}
-
-.status-card.failed .status-value {
-  color: #ef4444;
-}
-
 /* Jobs Table */
 .jobs-table {
   width: 100%;
@@ -189,41 +203,190 @@
   font-family: monospace;
   font-weight: 500;
   color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
-.jobs-table .error-cell {
+/* Job Row States */
-  max-width: 300px;
+.job-row.in_progress {
+  background-color: rgba(59, 130, 246, 0.05);
+}
+
+.job-row.failed {
+  background-color: rgba(239, 68, 68, 0.05);
+}
+
+.job-row.stale {
+  background-color: rgba(245, 158, 11, 0.1);
+}
+
+.job-row:hover {
+  background-color: var(--bg-tertiary);
+}
+
+/* Type Badge */
+.type-badge {
+  display: inline-block;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.type-badge.pypi {
+  background-color: rgba(59, 130, 246, 0.15);
+  color: var(--color-primary, #3b82f6);
+}
+
+/* Status Cell */
+.status-cell {
+  min-width: 120px;
+}
+
+.status-with-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.mini-progress-bar {
+  width: 80px;
+  height: 4px;
+  background: var(--bg-tertiary);
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative;
+}
+
+.mini-progress-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 40%;
+  height: 100%;
+  background: var(--color-primary, #3b82f6);
+  border-radius: 2px;
+  animation: mini-progress 1s ease-in-out infinite;
+}
+
+@keyframes mini-progress {
+  0%, 100% {
+    left: 0;
+    width: 40%;
+  }
+  50% {
+    left: 60%;
+    width: 40%;
+  }
+}
+
+/* Status Badges */
+.status-badge {
+  display: inline-block;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.status-badge.running,
+.status-badge.working {
+  background-color: rgba(59, 130, 246, 0.15);
+  color: var(--color-primary, #3b82f6);
+}
+
+.status-badge.failed {
+  background-color: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
+}
+
+.status-badge.pending {
+  background-color: rgba(245, 158, 11, 0.15);
+  color: #f59e0b;
+}
+
+.status-badge.stale {
+  background-color: rgba(245, 158, 11, 0.15);
+  color: #f59e0b;
+}
+
+/* Spinner */
+.spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--border-color);
+  border-top-color: var(--color-primary, #3b82f6);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Pulse Indicator */
+.pulse-indicator {
+  width: 8px;
+  height: 8px;
+  background-color: var(--color-primary, #3b82f6);
+  border-radius: 50%;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(1.2);
+  }
+}
+
+/* Details Cell */
+.details-cell {
+  max-width: 200px;
+}
+
+.error-text {
+  color: #ef4444;
+  font-size: 0.85rem;
+  display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: #c62828;
-  font-size: 0.9rem;
 }
 
-.jobs-table .timestamp {
+.version-text {
+  font-family: monospace;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+}
+
+.elapsed-time {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  font-family: monospace;
+}
+
+.timestamp {
   font-size: 0.85rem;
   color: var(--text-secondary);
   white-space: nowrap;
 }
 
-.jobs-table .actions-cell {
+.actions-cell {
   white-space: nowrap;
   text-align: right;
 }
 
-/* Badges */
-.coming-soon-badge {
-  display: inline-block;
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
-  font-size: 0.7rem;
-  font-weight: 500;
-  background-color: #e0e0e0;
-  color: #616161;
-  margin-left: 0.75rem;
-  text-transform: uppercase;
-}
-
 /* Buttons */
 .btn {
   padding: 0.5rem 1rem;
@@ -271,128 +434,8 @@
   font-size: 0.8rem;
 }
 
-/* Active Workers Section */
-.active-workers-section {
-  margin-bottom: 1.5rem;
-}
-
-.active-workers-section h3 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: var(--color-primary, #3b82f6);
-  margin-top: 1rem;
-}
-
-.pulse-indicator {
-  width: 8px;
-  height: 8px;
-  background-color: var(--color-primary, #3b82f6);
-  border-radius: 50%;
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.5;
-    transform: scale(1.2);
-  }
-}
-
-.jobs-table.active-table {
-  border: 1px solid var(--color-primary, #3b82f6);
-  border-radius: 4px;
-}
-
-.jobs-table.active-table th {
-  background: var(--bg-tertiary);
-  color: var(--color-primary, #3b82f6);
-}
-
-.jobs-table .active-row {
-  background-color: var(--bg-secondary);
-}
-
-.jobs-table .active-row:hover {
-  background-color: var(--bg-tertiary);
-}
-
-.jobs-table .version-constraint {
-  font-family: monospace;
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-}
-
-/* Spinner for active tasks */
-.spinner {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  border: 2px solid var(--border-color);
-  border-top-color: var(--color-primary, #3b82f6);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-right: 0.5rem;
-  vertical-align: middle;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* Elapsed time */
-.elapsed-time {
-  font-family: monospace;
-  font-size: 0.9rem;
-  color: var(--text-secondary);
-}
-
-.elapsed-time.stale {
-  color: #f59e0b;
-  font-weight: 500;
-}
-
-/* Status badges */
-.status-badge {
-  display: inline-block;
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-}
-
-.status-badge.running {
-  background-color: rgba(59, 130, 246, 0.15);
-  color: var(--color-primary, #3b82f6);
-}
-
-.status-badge.stale {
-  background-color: rgba(245, 158, 11, 0.15);
-  color: #f59e0b;
-}
-
-/* Stale row highlighting */
-.jobs-table .stale-row {
-  background-color: rgba(245, 158, 11, 0.1);
-}
-
-.jobs-table .stale-row:hover {
-  background-color: rgba(245, 158, 11, 0.15);
-}
-
 /* Responsive */
 @media (max-width: 768px) {
-  .status-cards {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
   .page-header {
     flex-direction: column;
     align-items: flex-start;
@@ -403,7 +446,13 @@
     font-size: 0.85rem;
   }
 
-  .jobs-table .error-cell {
+  .details-cell {
-    max-width: 150px;
+    max-width: 100px;
+  }
+
+  .progress-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
   }
 }

frontend/src/pages/AdminJobsPage.tsx

@@ -126,6 +126,49 @@ function AdminJobsPage() {
     ? cacheStatus.pending + cacheStatus.in_progress + cacheStatus.completed + cacheStatus.failed
     : 0;
 
+  const completedPercent = totalJobs > 0
+    ? Math.round((cacheStatus?.completed ?? 0) / totalJobs * 100)
+    : 0;
+
+  // Combine all jobs into unified list with type column
+  type UnifiedJob = {
+    id: string;
+    type: 'pypi';
+    package: string;
+    status: 'pending' | 'in_progress' | 'completed' | 'failed';
+    depth: number;
+    attempts: number;
+    error?: string | null;
+    started_at?: string | null;
+    failed_at?: string | null;
+    version_constraint?: string | null;
+  };
+
+  const allJobs: UnifiedJob[] = [
+    // Active tasks first
+    ...activeTasks.map((t): UnifiedJob => ({
+      id: t.id,
+      type: 'pypi',
+      package: t.package,
+      status: 'in_progress',
+      depth: t.depth,
+      attempts: t.attempts,
+      started_at: t.started_at,
+      version_constraint: t.version_constraint,
+    })),
+    // Then failed tasks
+    ...failedTasks.map((t): UnifiedJob => ({
+      id: t.id,
+      type: 'pypi',
+      package: t.package,
+      status: 'failed',
+      depth: t.depth,
+      attempts: t.attempts,
+      error: t.error,
+      failed_at: t.failed_at,
+    })),
+  ];
+
   return (
     <div className="admin-jobs-page">
       <div className="page-header">
@@ -148,7 +191,33 @@ function AdminJobsPage() {
       {successMessage && <div className="success-message">{successMessage}</div>}
       {statusError && <div className="error-message">{statusError}</div>}
 
-      {/* PyPI Cache Jobs Section */}
+      {/* Overall Progress Bar */}
+      {totalJobs > 0 && (
+        <div className="overall-progress">
+          <div className="progress-header">
+            <span className="progress-label">
+              <span className="pulse-indicator"></span>
+              Overall Progress
+            </span>
+            <span className="progress-stats">
+              {cacheStatus?.completed ?? 0} / {totalJobs} completed
+              {(cacheStatus?.in_progress ?? 0) > 0 && ` · ${cacheStatus?.in_progress} active`}
+              {(cacheStatus?.failed ?? 0) > 0 && ` · ${cacheStatus?.failed} failed`}
+            </span>
+          </div>
+          <div className="progress-bar-container">
+            <div
+              className="progress-bar-fill"
+              style={{ width: `${completedPercent}%` }}
+            />
+            {(cacheStatus?.in_progress ?? 0) > 0 && (
+              <div className="progress-bar-active" />
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Unified Jobs Section */}
       <section className="jobs-section">
         <div className="section-header">
           <h2>
@@ -157,7 +226,7 @@ function AdminJobsPage() {
               <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
               <line x1="12" y1="22.08" x2="12" y2="12"/>
             </svg>
-            PyPI Cache Jobs
+            All Jobs
           </h2>
           {failedTasks.length > 0 && (
             <button
@@ -172,162 +241,77 @@ function AdminJobsPage() {
 
         {loadingStatus && !cacheStatus ? (
           <p className="loading-text">Loading job status...</p>
+        ) : totalJobs === 0 ? (
+          <p className="empty-message">No jobs yet. Jobs are created when packages are downloaded through the PyPI proxy.</p>
+        ) : allJobs.length === 0 ? (
+          <p className="success-text">All {cacheStatus?.completed ?? 0} jobs completed successfully!</p>
         ) : (
-          <>
+          <table className="jobs-table">
-            {/* Status Cards */}
-            <div className="status-cards">
-              <div className="status-card pending">
-                <div className="status-value">{cacheStatus?.pending ?? 0}</div>
-                <div className="status-label">Pending</div>
-              </div>
-              <div className="status-card in-progress">
-                <div className="status-value">{cacheStatus?.in_progress ?? 0}</div>
-                <div className="status-label">In Progress</div>
-              </div>
-              <div className="status-card completed">
-                <div className="status-value">{cacheStatus?.completed ?? 0}</div>
-                <div className="status-label">Completed</div>
-              </div>
-              <div className="status-card failed">
-                <div className="status-value">{cacheStatus?.failed ?? 0}</div>
-                <div className="status-label">Failed</div>
-              </div>
-            </div>
-
-            {totalJobs === 0 ? (
-              <p className="empty-message">No cache jobs yet. Jobs are created when packages are downloaded through the PyPI proxy.</p>
-            ) : (
-              <>
-                {/* Active Workers Table */}
-                {activeTasks.length > 0 && (
-                  <div className="active-workers-section">
-                    <h3>
-                      <span className="pulse-indicator"></span>
-                      Active Workers ({activeTasks.length})
-                    </h3>
-                    <table className="jobs-table active-table">
             <thead>
               <tr>
+                <th>Type</th>
                 <th>Package</th>
-                          <th>Version</th>
-                          <th>Depth</th>
-                          <th>Attempt</th>
-                          <th>Elapsed</th>
                 <th>Status</th>
+                <th>Depth</th>
+                <th>Attempts</th>
+                <th>Details</th>
+                <th>Actions</th>
               </tr>
             </thead>
             <tbody>
-                        {activeTasks.map((task) => {
+              {allJobs.map((job) => {
-                          const elapsed = task.started_at
-                            ? Math.floor((Date.now() - new Date(task.started_at).getTime()) / 1000)
-                            : 0;
-                          const minutes = Math.floor(elapsed / 60);
-                          const seconds = elapsed % 60;
-                          const elapsedStr = minutes > 0
-                            ? `${minutes}m ${seconds}s`
-                            : `${seconds}s`;
-                          const isStale = elapsed > 300; // 5 minutes
                 return (
-                            <tr key={task.id} className={`active-row ${isStale ? 'stale-row' : ''}`}>
+                  <tr key={job.id} className={`job-row ${job.status}`}>
+                    <td>
+                      <span className="type-badge pypi">PyPI</span>
+                    </td>
                     <td className="package-name">
-                                <span className="spinner"></span>
+                      {job.status === 'in_progress' && <span className="spinner"></span>}
-                                {task.package}
+                      {job.package}
-                              </td>
-                              <td className="version-constraint">
-                                {task.version_constraint || '*'}
-                              </td>
-                              <td>{task.depth}</td>
-                              <td>{task.attempts + 1}</td>
-                              <td className={`elapsed-time ${isStale ? 'stale' : ''}`}>
-                                {elapsedStr}
                     </td>
                     <td className="status-cell">
-                                <span className={`status-badge ${isStale ? 'stale' : 'running'}`}>
+                      {job.status === 'in_progress' ? (
-                                  {isStale ? 'Stale?' : 'Running'}
+                        <span className="status-badge working">Working</span>
+                      ) : job.status === 'failed' ? (
+                        <span className="status-badge failed">Failed</span>
+                      ) : (
+                        <span className="status-badge pending">Pending</span>
+                      )}
+                    </td>
+                    <td>{job.depth}</td>
+                    <td>{job.attempts}</td>
+                    <td className="details-cell">
+                      {job.status === 'failed' && job.error && (
+                        <span className="error-text" title={job.error}>
+                          {job.error.length > 40 ? job.error.substring(0, 40) + '...' : job.error}
                         </span>
+                      )}
+                      {job.status === 'in_progress' && job.version_constraint && (
+                        <span className="version-text">{job.version_constraint}</span>
+                      )}
+                      {job.status === 'failed' && job.failed_at && (
+                        <span className="timestamp">
+                          {new Date(job.failed_at).toLocaleTimeString()}
+                        </span>
+                      )}
+                    </td>
+                    <td className="actions-cell">
+                      {job.status === 'failed' && (
+                        <button
+                          className="btn btn-sm btn-secondary"
+                          onClick={() => handleRetryPackage(job.package)}
+                          disabled={retryingPackage === job.package}
+                        >
+                          {retryingPackage === job.package ? '...' : 'Retry'}
+                        </button>
+                      )}
                     </td>
                   </tr>
                 );
               })}
             </tbody>
           </table>
-                  </div>
         )}
-
-                {/* Failed Tasks Table */}
-                {failedTasks.length > 0 && (
-                  <>
-                    <h3>Failed Tasks</h3>
-                    <table className="jobs-table">
-                      <thead>
-                        <tr>
-                          <th>Package</th>
-                          <th>Error</th>
-                          <th>Attempts</th>
-                          <th>Depth</th>
-                          <th>Failed At</th>
-                          <th>Actions</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {failedTasks.map((task) => (
-                          <tr key={task.id}>
-                            <td className="package-name">{task.package}</td>
-                            <td className="error-cell" title={task.error || ''}>
-                              {task.error || 'Unknown error'}
-                            </td>
-                            <td>{task.attempts}</td>
-                            <td>{task.depth}</td>
-                            <td className="timestamp">
-                              {task.failed_at
-                                ? new Date(task.failed_at).toLocaleString()
-                                : '-'}
-                            </td>
-                            <td className="actions-cell">
-                              <button
-                                className="btn btn-sm btn-secondary"
-                                onClick={() => handleRetryPackage(task.package)}
-                                disabled={retryingPackage === task.package}
-                              >
-                                {retryingPackage === task.package ? 'Retrying...' : 'Retry'}
-                              </button>
-                            </td>
-                          </tr>
-                        ))}
-                      </tbody>
-                    </table>
-                  </>
-                )}
-
-                {/* Success message when nothing is pending/in-progress/failed */}
-                {failedTasks.length === 0 && activeTasks.length === 0 && cacheStatus?.pending === 0 && (
-                  <p className="success-text">All jobs completed successfully.</p>
-                )}
-
-                {/* In progress message */}
-                {activeTasks.length === 0 && failedTasks.length === 0 && (cacheStatus?.pending ?? 0) > 0 && (
-                  <p className="empty-message">Jobs queued for processing...</p>
-                )}
-              </>
-            )}
-          </>
-        )}
-      </section>
-
-      {/* Placeholder for future job types */}
-      <section className="jobs-section coming-soon">
-        <div className="section-header">
-          <h2>
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
-              <line x1="3" y1="9" x2="21" y2="9"/>
-              <line x1="9" y1="21" x2="9" y2="9"/>
-            </svg>
-            NPM Cache Jobs
-            <span className="coming-soon-badge">Coming Soon</span>
-          </h2>
-        </div>
-        <p className="empty-message">NPM proxy support is planned for a future release.</p>
       </section>
     </div>
   );