perf: Optimize Active Jobs polling and caching for faster updates

Active Jobs Performance Improvements:
- Add 30-second cache to getPipelineJobs to reduce API calls
- Reduce getAllActivePipelines cache from 2 minutes to 30 seconds
- Use direct API calls in getAllActivePipelines to bypass stale cache
- Increase running pipelines limit from 5 to 20 for better visibility
- Increase active jobs display limit from 10 to 20

This fixes the issue where short-running jobs (20-30 seconds) were missed
due to slow polling and long cache times. Jobs now appear within 30 seconds.

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

Co-Authored-By: Claude <[email protected]>

Author: ismoilovdevml

src/components/Overview.tsx

@@ -76,8 +76,8 @@ export default function Overview() {
         .slice(0, 50);  // Keep more pipelines for accurate counting
       setRecentPipelines(recent);
 
-      // Load active jobs from running pipelines
-      const runningPipelines = pipelines.slice(0, 5);
+      // Load active jobs from running pipelines (increased to 20 for better visibility)
+      const runningPipelines = pipelines.slice(0, 20);
       const jobsPromises = runningPipelines.map(pipeline =>
         api.getPipelineJobs(pipeline.project_id, pipeline.id).catch(() => [])
       );
@@ -88,7 +88,7 @@ export default function Overview() {
           .flat()
           .filter(job => job.status === 'running' || job.status === 'pending')
           .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
-          .slice(0, 10);
+          .slice(0, 20); // Show up to 20 active jobs
 
         // Enrich jobs with project data from store
         const enrichedJobs = jobs.map(job => {

src/lib/gitlab-api.ts

@@ -426,17 +426,30 @@ class GitLabAPI {
   }
 
   async getAllActivePipelines(): Promise<Pipeline[]> {
-    // Limit to 20 most active projects to reduce memory usage
-    const projects = await this.getProjects(1, 20);
-    const pipelinePromises = projects.map(project =>
-      this.getPipelines(project.id, 1, 5).catch(() => [])
+    return cachedFetch(
+      'gitlab:active-pipelines',
+      async () => {
+        // Limit to 20 most active projects to reduce memory usage
+        const projects = await this.getProjects(1, 20);
+        const pipelinePromises = projects.map(project =>
+          // Direct API call without cache for fresh data
+          this.api.get(`/projects/${project.id}/pipelines`, {
+            params: {
+              per_page: 10,
+              page: 1,
+              order_by: 'updated_at',
+            },
+          }).then(res => res.data as Pipeline[]).catch(() => [])
+        );
+        const allPipelines = await Promise.all(pipelinePromises);
+        return allPipelines
+          .flat()
+          .filter(p => ['running', 'pending', 'created'].includes(p.status))
+          .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
+          .slice(0, 50); // Limit to 50 active pipelines max
+      },
+      CacheTTL.SHORT // 30 seconds cache for active pipelines - fast updates
     );
-    const allPipelines = await Promise.all(pipelinePromises);
-    return allPipelines
-      .flat()
-      .filter(p => ['running', 'pending', 'created'].includes(p.status))
-      .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
-      .slice(0, 50); // Limit to 50 active pipelines max
   }
 
   async getPipeline(projectId: number, pipelineId: number): Promise<Pipeline> {
@@ -456,8 +469,14 @@ class GitLabAPI {
 
   // Jobs
   async getPipelineJobs(projectId: number, pipelineId: number): Promise<Job[]> {
-    const response = await this.api.get(`/projects/${projectId}/pipelines/${pipelineId}/jobs`);
-    return response.data;
+    return cachedFetch(
+      `gitlab:jobs:${projectId}:${pipelineId}`,
+      async () => {
+        const response = await this.api.get(`/projects/${projectId}/pipelines/${pipelineId}/jobs`);
+        return response.data;
+      },
+      CacheTTL.SHORT // 30 seconds cache for jobs to catch running jobs quickly
+    );
   }
 
   async getJob(projectId: number, jobId: number): Promise<Job> {