feat: move status filter to runs table header row

Status filter now displays inline with 'Recent Evaluation Runs' title - title left-aligned, filter right-aligned. Removed standalone card wrapper from StatusFilter component.

Author: bekmuradov

src/evaluation-view/EvaluationViewShell.tsx

@@ -484,12 +484,17 @@ export class EvaluationViewShell extends React.Component<
                     : null
                 }
               />
-              <StatusFilter
-                currentStatus={statusFilter}
-                onStatusChange={this.handleStatusFilterChange}
-                counts={statusCounts}
+              <RunsTable
+                runs={filteredRuns}
+                onSelectRun={this.handleSelectRun}
+                headerActions={
+                  <StatusFilter
+                    currentStatus={statusFilter}
+                    onStatusChange={this.handleStatusFilterChange}
+                    counts={statusCounts}
+                  />
+                }
               />
-              <RunsTable runs={filteredRuns} onSelectRun={this.handleSelectRun} />
             </>
           )}
 

src/evaluation-view/components/RunsTable.tsx

@@ -5,9 +5,10 @@ import type { EvaluationRun } from '../evaluationViewTypes';
 interface RunsTableProps {
   runs: EvaluationRun[];
   onSelectRun: (runId: string) => void;
+  headerActions?: React.ReactNode;
 }
 
-export const RunsTable: React.FC<RunsTableProps> = ({ runs, onSelectRun }) => {
+export const RunsTable: React.FC<RunsTableProps> = ({ runs, onSelectRun, headerActions }) => {
   const formatDate = (dateString: string): string => {
     const date = new Date(dateString);
     return date.toLocaleString('en-US', {
@@ -59,10 +60,11 @@ export const RunsTable: React.FC<RunsTableProps> = ({ runs, onSelectRun }) => {
   if (runs.length === 0) {
     return (
       <div className="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
-        <div className="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
+        <div className="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
           <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
             Recent Evaluation Runs
           </h3>
+          {headerActions}
         </div>
         <div className="px-6 py-12 text-center">
           <Inbox className="mx-auto h-12 w-12 text-gray-400" />
@@ -79,10 +81,11 @@ export const RunsTable: React.FC<RunsTableProps> = ({ runs, onSelectRun }) => {
 
   return (
     <div className="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
-      <div className="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
+      <div className="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
         <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
           Recent Evaluation Runs
         </h3>
+        {headerActions}
       </div>
       <div className="overflow-x-auto">
         <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">

src/evaluation-view/components/StatusFilter.tsx

@@ -19,60 +19,41 @@ export const StatusFilter: React.FC<StatusFilterProps> = ({
   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' },
-  ];
+  const formatLabel = (value: StatusFilterValue): string => {
+    if (value === 'all') {
+      return `All Runs${counts ? ` (${counts.all})` : ''}`;
+    }
 
-  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];
+    const labels: Record<Exclude<StatusFilterValue, 'all'>, string> = {
+      pending: 'Pending',
+      running: 'Running',
+      completed: 'Completed',
+      failed: 'Failed',
+    };
+
+    const label = labels[value as Exclude<StatusFilterValue, 'all'>];
+    const count = counts?.[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>
+    return count !== undefined ? `${label} (${count})` : label;
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <label htmlFor="status-filter" className="text-sm font-medium text-gray-700 dark:text-gray-300">
+        Status:
+      </label>
+      <select
+        id="status-filter"
+        value={currentStatus}
+        onChange={(e) => onStatusChange(e.target.value as StatusFilterValue)}
+        className="rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 px-3 py-2"
+      >
+        <option value="all">{formatLabel('all')}</option>
+        <option value="pending">{formatLabel('pending')}</option>
+        <option value="running">{formatLabel('running')}</option>
+        <option value="completed">{formatLabel('completed')}</option>
+        <option value="failed">{formatLabel('failed')}</option>
+      </select>
     </div>
   );
 };