feat: add status filter for evaluation runs table

Create StatusFilter component with buttons for All, Pending, Running, Completed, Failed.
Add statusFilter state and handleStatusFilterChange handler to EvaluationViewShell.
Add getFilteredRuns method to filter runs by selected status.
Add getStatusCounts method to show count for each status.
Display status filter above runs table with active button highlighting.
Show badge with count for each status on filter buttons.

Author: bekmuradov

src/evaluation-view/EvaluationViewShell.tsx

@@ -16,6 +16,7 @@ import { RunsTable } from './components/RunsTable';
 import { ResultsSummary } from './components/ResultsSummary';
 import { ResultItem } from './components/ResultItem';
 import { FilterControls } from './components/FilterControls';
+import { StatusFilter } from './components/StatusFilter';
 import { Alert, AlertDescription } from '../components/ui/alert';
 import { Button } from '../components/ui/button';
 import './EvaluationView.css';
@@ -52,6 +53,7 @@ export class EvaluationViewShell extends React.Component<
     detailedResults: DetailedEvaluationResult[];
     searchTerm: string;
     correctnessFilter: 'all' | 'correct' | 'incorrect';
+    statusFilter: 'all' | 'pending' | 'running' | 'completed' | 'failed';
     expandedResultIds: Set<string>;
     showDialog: boolean;
     hasInProgressEvaluation: boolean;
@@ -78,6 +80,7 @@ export class EvaluationViewShell extends React.Component<
       detailedResults: [],
       searchTerm: '',
       correctnessFilter: 'all',
+      statusFilter: 'all',
       expandedResultIds: new Set(),
       showDialog: false,
       hasInProgressEvaluation: false,
@@ -314,6 +317,10 @@ export class EvaluationViewShell extends React.Component<
     this.setState({ correctnessFilter: filter });
   };
 
+  handleStatusFilterChange = (status: 'all' | 'pending' | 'running' | 'completed' | 'failed') => {
+    this.setState({ statusFilter: status });
+  };
+
   toggleResultExpanded = (testCaseId: string) => {
     this.setState((prev) => {
       const newExpanded = new Set(prev.expandedResultIds);
@@ -343,6 +350,28 @@ export class EvaluationViewShell extends React.Component<
     });
   };
 
+  getFilteredRuns = () => {
+    const { pastRuns, statusFilter } = this.state;
+
+    if (statusFilter === 'all') {
+      return pastRuns;
+    }
+
+    return pastRuns.filter((run) => run.status === statusFilter);
+  };
+
+  getStatusCounts = () => {
+    const { pastRuns } = this.state;
+
+    return {
+      all: pastRuns.length,
+      pending: pastRuns.filter((r) => r.status === 'pending').length,
+      running: pastRuns.filter((r) => r.status === 'running').length,
+      completed: pastRuns.filter((r) => r.status === 'completed').length,
+      failed: pastRuns.filter((r) => r.status === 'failed').length,
+    };
+  };
+
   render() {
     const {
       availableModels,
@@ -355,12 +384,15 @@ export class EvaluationViewShell extends React.Component<
       expandedResultIds,
       searchTerm,
       correctnessFilter,
+      statusFilter,
       showDialog,
       hasInProgressEvaluation,
       remainingQuestionsCount,
     } = this.state;
 
     const filteredResults = this.getFilteredResults();
+    const filteredRuns = this.getFilteredRuns();
+    const statusCounts = this.getStatusCounts();
     const latestRun = pastRuns.length > 0 ? pastRuns[0] : null;
 
     return (
@@ -452,7 +484,12 @@ export class EvaluationViewShell extends React.Component<
                     : null
                 }
               />
-              <RunsTable runs={pastRuns} onSelectRun={this.handleSelectRun} />
+              <StatusFilter
+                currentStatus={statusFilter}
+                onStatusChange={this.handleStatusFilterChange}
+                counts={statusCounts}
+              />
+              <RunsTable runs={filteredRuns} onSelectRun={this.handleSelectRun} />
             </>
           )}
 

src/evaluation-view/components/StatusFilter.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+type StatusFilterValue = 'all' | 'pending' | 'running' | 'completed' | 'failed';
+
+interface StatusFilterProps {
+  currentStatus: StatusFilterValue;
+  onStatusChange: (status: StatusFilterValue) => void;
+  counts?: {
+    all: number;
+    pending: number;
+    running: number;
+    completed: number;
+    failed: number;
+  };
+}
+
+export const StatusFilter: React.FC<StatusFilterProps> = ({
+  currentStatus,
+  onStatusChange,
+  counts,
+}) => {
+  const filters: { value: StatusFilterValue; label: string }[] = [
+    { value: 'all', label: 'All' },
+    { value: 'pending', label: 'Pending' },
+    { value: 'running', label: 'Running' },
+    { value: 'completed', label: 'Completed' },
+    { value: 'failed', label: 'Failed' },
+  ];
+
+  return (
+    <div className="mb-4 flex items-center gap-2">
+      <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+        Filter by status:
+      </span>
+      <div className="inline-flex rounded-md shadow-sm" role="group">
+        {filters.map((filter, index) => {
+          const isActive = currentStatus === filter.value;
+          const count = counts?.[filter.value];
+
+          return (
+            <button
+              key={filter.value}
+              type="button"
+              onClick={() => onStatusChange(filter.value)}
+              className={`
+                px-4 py-2 text-sm font-medium
+                ${index === 0 ? 'rounded-l-lg' : ''}
+                ${index === filters.length - 1 ? 'rounded-r-lg' : ''}
+                ${
+                  isActive
+                    ? 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800'
+                    : 'bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
+                }
+                border border-gray-300 dark:border-gray-600
+                ${index !== 0 ? 'border-l-0' : ''}
+                focus:z-10 focus:ring-2 focus:ring-blue-500 focus:outline-none
+                transition-colors duration-200
+              `}
+            >
+              {filter.label}
+              {count !== undefined && count > 0 && (
+                <span
+                  className={`ml-2 px-2 py-0.5 text-xs rounded-full ${
+                    isActive
+                      ? 'bg-blue-500 text-white'
+                      : 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
+                  }`}
+                >
+                  {count}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};