diff --git a/app/components/ConfigSelector.tsx b/app/components/ConfigSelector.tsx
index 41d64d5..5e47493 100644
--- a/app/components/ConfigSelector.tsx
+++ b/app/components/ConfigSelector.tsx
@@ -4,10 +4,12 @@
  */
 
 "use client"
-import { useState } from 'react';
+
+import { useState, useRef, useLayoutEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { colors } from '@/app/lib/colors';
 import { useConfigs, SavedConfig, formatRelativeTime } from '@/app/lib/useConfigs';
+import { ChevronUpIcon, ChevronDownIcon, EditIcon, GearIcon, CheckIcon } from '@/app/components/icons';
 
 interface ConfigSelectorProps {
   selectedConfigId: string;
@@ -34,6 +36,19 @@ export default function ConfigSelector({
   const { configs, configGroups, isLoading, error } = useConfigs();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
+  const [promptExpanded, setPromptExpanded] = useState(false);
+  const [isPromptOverflowing, setIsPromptOverflowing] = useState(false);
+  const promptRef = useRef<HTMLDivElement>(null);
+
+  // Reset expanded state and recheck overflow whenever selected config changes.
+  useLayoutEffect(() => {
+    setPromptExpanded(false);
+    const el = promptRef.current;
+    if (!el) return;
+    // clientHeight is capped by max-h-12; scrollHeight is the full content height.
+    // Only show the icon when content actually overflows the collapsed box.
+    setIsPromptOverflowing(el.scrollHeight > el.clientHeight);
+  }, [selectedConfigId, selectedVersion, configs]);
 
   // Find currently selected config
   const selectedConfig = configs.find(
@@ -173,9 +188,7 @@ export default function ConfigSelector({
             onMouseEnter={(e) => e.currentTarget.style.backgroundColor = colors.bg.secondary}
             onMouseLeave={(e) => e.currentTarget.style.backgroundColor = colors.bg.primary}
           >
-            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-            </svg>
+            <EditIcon className="w-3.5 h-3.5" />
             {selectedConfig ? 'Edit Config' : 'Create Config'}
           </button>
         </div>
@@ -187,16 +200,10 @@ export default function ConfigSelector({
           className="rounded-lg p-6 text-center"
           style={{ backgroundColor: colors.bg.secondary, border: `2px dashed ${colors.border}` }}
         >
-          <svg
+          <GearIcon
             className="w-10 h-10 mx-auto mb-2"
             style={{ color: colors.text.secondary }}
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-          </svg>
+          />
           <p className="text-sm font-medium" style={{ color: colors.text.primary }}>
             No configurations found
           </p>
@@ -238,12 +245,11 @@ export default function ConfigSelector({
                 <button
                   onClick={() => !disabled && setIsDropdownOpen(!isDropdownOpen)}
                   disabled={disabled}
-                  className="w-full px-3 py-2 pr-8 rounded-md border text-sm text-left transition-colors"
+                  className="w-full px-3 py-2 pr-8 rounded-md border text-sm text-left transition-colors cursor-pointer disabled:cursor-not-allowed"
                   style={{
                     backgroundColor: disabled ? colors.bg.secondary : colors.bg.primary,
                     borderColor: selectedConfig ? colors.accent.primary : colors.border,
                     color: selectedConfig ? colors.text.primary : colors.text.secondary,
-                    cursor: disabled ? 'not-allowed' : 'pointer',
                   }}
                 >
                   {selectedConfig
@@ -251,15 +257,10 @@ export default function ConfigSelector({
                     : '-- Select a configuration --'
                   }
                 </button>
-                <svg
+                <ChevronDownIcon
                   className="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none"
                   style={{ color: colors.text.secondary }}
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                </svg>
+                />
               </div>
             )}
 
@@ -323,9 +324,7 @@ export default function ConfigSelector({
                           </div>
                         </div>
                         {selectedConfig?.id === version.id && (
-                          <svg className="w-4 h-4 flex-shrink-0" style={{ color: colors.status.success }} fill="currentColor" viewBox="0 0 20 20">
-                            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-                          </svg>
+                          <CheckIcon className="w-4 h-4 flex-shrink-0" style={{ color: colors.status.success }} />
                         )}
                       </button>
                     ))}
@@ -361,11 +360,11 @@ export default function ConfigSelector({
                 </div>
                 {selectedConfig.tools && selectedConfig.tools.length > 0 && (
                   <>
-                    <div>
+                    <div className="col-span-2">
                       <div className="text-xs font-medium mb-1" style={{ color: colors.text.secondary }}>
                         Knowledge Base IDs
                       </div>
-                      <div className="text-xs font-mono" style={{ color: colors.text.primary }}>
+                      <div className="text-xs font-mono break-all" style={{ color: colors.text.primary }}>
                         {selectedConfig.tools.map(tool => tool.knowledge_base_ids).flat().join(', ') || 'None'}
                       </div>
                     </div>
@@ -383,11 +382,28 @@ export default function ConfigSelector({
 
               {/* Prompt Preview */}
               <div className="border-t pt-3" style={{ borderColor: colors.border }}>
-                <div className="text-xs font-medium mb-2" style={{ color: colors.text.secondary }}>
-                  Prompt Preview
+                <div className="flex items-center justify-between mb-2">
+                  <div className="text-xs font-medium" style={{ color: colors.text.secondary }}>
+                    Prompt Preview
+                  </div>
+                  {selectedConfig.instructions && isPromptOverflowing && (
+                    <button
+                      onClick={() => setPromptExpanded(p => !p)}
+                      className="rounded p-0.5 transition-colors"
+                      style={{ color: colors.text.secondary }}
+                      title={promptExpanded ? 'Collapse' : 'Expand'}
+                    >
+                      {promptExpanded ? (
+                        <ChevronUpIcon />
+                      ) : (
+                        <ChevronDownIcon />
+                      )}
+                    </button>
+                  )}
                 </div>
                 <div
-                  className="text-xs font-mono line-clamp-3"
+                  ref={promptRef}
+                  className={`text-xs font-mono overflow-y-auto transition-all ${promptExpanded ? 'max-h-48' : 'max-h-12 line-clamp-3'}`}
                   style={{ color: colors.text.primary }}
                 >
                   {selectedConfig.instructions || 'No instructions set'}
diff --git a/app/components/evaluations/DatasetsTab.tsx b/app/components/evaluations/DatasetsTab.tsx
new file mode 100644
index 0000000..aec7f11
--- /dev/null
+++ b/app/components/evaluations/DatasetsTab.tsx
@@ -0,0 +1,588 @@
+"use client"
+
+import { useState, useEffect, useRef } from 'react';
+import { colors } from '@/app/lib/colors';
+import { APIKey } from '@/app/keystore/page';
+import { Dataset } from '@/app/datasets/page';
+import { useToast } from '@/app/components/Toast';
+import EvalDatasetDescription from './EvalDatasetDescription';
+
+export interface DatasetsTabProps {
+  leftPanelWidth: number;
+  datasetName: string;
+  setDatasetName: (name: string) => void;
+  datasetDescription: string;
+  setDatasetDescription: (desc: string) => void;
+  duplicationFactor: string;
+  setDuplicationFactor: (factor: string) => void;
+  uploadedFile: File | null;
+  onFileSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onRemoveFile: () => void;
+  isUploading: boolean;
+  handleCreateDataset: () => void;
+  resetForm: () => void;
+  storedDatasets: Dataset[];
+  apiKeys: APIKey[];
+  selectedKeyId: string;
+  loadStoredDatasets: () => void;
+  toast: ReturnType<typeof useToast>;
+}
+
+export default function DatasetsTab({
+  leftPanelWidth,
+  datasetName,
+  setDatasetName,
+  datasetDescription,
+  setDatasetDescription,
+  duplicationFactor,
+  setDuplicationFactor,
+  uploadedFile,
+  onFileSelect,
+  onRemoveFile,
+  isUploading,
+  handleCreateDataset,
+  resetForm,
+  storedDatasets,
+  apiKeys,
+  selectedKeyId,
+  loadStoredDatasets,
+  toast,
+}: DatasetsTabProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [deletingId, setDeletingId] = useState<number | null>(null);
+  const [showDuplicationInfo, setShowDuplicationInfo] = useState(false);
+  const [duplicationInfoPos, setDuplicationInfoPos] = useState({ top: 0, left: 0 });
+
+  useEffect(() => {
+    if (!showDuplicationInfo) return;
+    const handleClick = () => setShowDuplicationInfo(false);
+    const handleScroll = () => setShowDuplicationInfo(false);
+    document.addEventListener('click', handleClick);
+    window.addEventListener('scroll', handleScroll, true);
+    return () => {
+      document.removeEventListener('click', handleClick);
+      window.removeEventListener('scroll', handleScroll, true);
+    };
+  }, [showDuplicationInfo]);
+
+  const handleDeleteDataset = async (datasetId: number) => {
+    const selectedKey = apiKeys.find(k => k.id === selectedKeyId);
+    if (!selectedKey) return;
+
+    setDeletingId(datasetId);
+    try {
+      const response = await fetch(`/api/evaluations/datasets/${datasetId}`, {
+        method: 'DELETE',
+        headers: { 'X-API-KEY': selectedKey.key },
+      });
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error || 'Failed to delete dataset');
+      }
+      toast.success('Dataset deleted');
+      loadStoredDatasets();
+    } catch (err: any) {
+      toast.error(err.message || 'Failed to delete dataset');
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  const [confirmDeleteId, setConfirmDeleteId] = useState<number | null>(null);
+  const [viewingId, setViewingId] = useState<number | null>(null);
+  const [viewModalData, setViewModalData] = useState<{ name: string; headers: string[]; rows: string[][]; signedUrl: string } | null>(null);
+
+  const handleViewDataset = async (datasetId: number, datasetName: string) => {
+    const selectedKey = apiKeys.find(k => k.id === selectedKeyId);
+    if (!selectedKey) return;
+
+    setViewingId(datasetId);
+    try {
+      const response = await fetch(`/api/evaluations/datasets/${datasetId}?include_signed_url=true&fetch_content=true`, {
+        method: 'GET',
+        headers: { 'X-API-KEY': selectedKey.key },
+      });
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error || 'Failed to get dataset');
+      }
+      const data = await response.json();
+      const signedUrl = data?.data?.signed_url || data?.signed_url;
+      const csvText = data?.csv_content;
+      if (!csvText) {
+        toast.error('No data available for this dataset');
+        return;
+      }
+
+      // Parse CSV
+      const lines = csvText.split('\n').filter((l: string) => l.trim());
+      const parseRow = (line: string): string[] => {
+        const result: string[] = [];
+        let current = '';
+        let inQuotes = false;
+        for (let i = 0; i < line.length; i++) {
+          if (line[i] === '"') {
+            if (inQuotes && line[i + 1] === '"') { current += '"'; i++; }
+            else { inQuotes = !inQuotes; }
+          } else if (line[i] === ',' && !inQuotes) {
+            result.push(current.trim());
+            current = '';
+          } else {
+            current += line[i];
+          }
+        }
+        result.push(current.trim());
+        return result;
+      };
+
+      const headers = lines.length > 0 ? parseRow(lines[0]) : [];
+      const rows = lines.slice(1).map(parseRow);
+
+      setViewModalData({ name: datasetName, headers, rows, signedUrl: signedUrl || '' });
+    } catch (err: any) {
+      toast.error(err.message || 'Failed to view dataset');
+    } finally {
+      setViewingId(null);
+    }
+  };
+
+  const handleDownloadFromModal = () => {
+    if (!viewModalData) return;
+    const csvLines = [viewModalData.headers.join(',')];
+    viewModalData.rows.forEach(row => {
+      csvLines.push(row.map(cell => cell.includes(',') || cell.includes('"') || cell.includes('\n') ? `"${cell.replace(/"/g, '""')}"` : cell).join(','));
+    });
+    const blob = new Blob([csvLines.join('\n')], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${viewModalData.name}.csv`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const file = e.dataTransfer.files?.[0];
+    if (file && file.name.endsWith('.csv')) {
+      const dt = new DataTransfer();
+      dt.items.add(file);
+      if (fileInputRef.current) {
+        fileInputRef.current.files = dt.files;
+        fileInputRef.current.dispatchEvent(new Event('change', { bubbles: true }));
+      }
+    }
+  };
+
+  return (
+    <div className="flex-1 flex overflow-hidden">
+      {/* Left Panel - Create Dataset Form */}
+      <div
+        className="flex-shrink-0 border-r flex flex-col overflow-hidden"
+        style={{ width: `${leftPanelWidth}px`, backgroundColor: colors.bg.primary, borderColor: colors.border }}
+      >
+        <div className="flex-1 overflow-auto p-4 space-y-4">
+          {/* Page Title */}
+          <div>
+            <h2 className="text-base font-semibold" style={{ color: colors.text.primary }}>
+              Create New Dataset
+            </h2>
+            <p className="text-xs mt-0.5" style={{ color: colors.text.secondary }}>
+              Upload a CSV with golden question-answer pairs
+            </p>
+          </div>
+
+          {/* Name */}
+          <div>
+            <label className="block text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
+              Name *
+            </label>
+            <input
+              type="text"
+              value={datasetName}
+              onChange={e => setDatasetName(e.target.value)}
+              placeholder="e.g., QnA Dataset v1"
+              className="w-full px-3 py-2 border rounded-md text-sm"
+              style={{ backgroundColor: colors.bg.primary, borderColor: colors.border, color: colors.text.primary }}
+            />
+          </div>
+
+          {/* Description */}
+          <div>
+            <label className="block text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
+              Description
+            </label>
+            <input
+              type="text"
+              value={datasetDescription}
+              onChange={e => setDatasetDescription(e.target.value)}
+              placeholder="Optional description"
+              className="w-full px-3 py-2 border rounded-md text-sm"
+              style={{ backgroundColor: colors.bg.primary, borderColor: colors.border, color: colors.text.primary }}
+            />
+          </div>
+
+          {/* Duplication Factor */}
+          <div>
+            <label className="text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
+              <span className="inline-flex items-center gap-1">
+                Duplication Factor
+                <span
+                  className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-[9px] font-normal cursor-pointer shrink-0"
+                  style={{ backgroundColor: colors.bg.primary, border: `1px solid ${colors.border}`, color: colors.text.secondary }}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    const rect = e.currentTarget.getBoundingClientRect();
+                    setDuplicationInfoPos({ top: rect.bottom + 4, left: rect.left });
+                    setShowDuplicationInfo(!showDuplicationInfo);
+                  }}
+                >
+                  i
+                </span>
+                {showDuplicationInfo && (
+                  <div
+                    className="fixed z-50 rounded-lg shadow-lg border text-xs p-3"
+                    style={{ backgroundColor: colors.bg.primary, borderColor: colors.border, width: '280px', top: duplicationInfoPos.top, left: duplicationInfoPos.left }}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <div className="font-semibold mb-1" style={{ color: colors.text.primary }}>Duplication Factor</div>
+                    <p style={{ color: colors.text.secondary, lineHeight: '1.5' }}>
+                      Controls how many times each question is sent to the AI to generate an answer. For example, setting this to 3 means the AI answers each question 3 separate times — helpful for checking if the AI gives consistent and reliable responses each time.
+                    </p>
+                  </div>
+                )}
+              </span>
+            </label>
+            <select
+              value={duplicationFactor}
+              onChange={e => setDuplicationFactor(e.target.value)}
+              className="w-full px-3 py-2 border rounded-md text-sm"
+              style={{ backgroundColor: colors.bg.primary, borderColor: colors.border, color: colors.text.primary }}
+            >
+              {[1, 2, 3, 4, 5].map(n => (
+                <option key={n} value={String(n)}>{n}</option>
+              ))}
+            </select>
+          </div>
+
+          {/* CSV Upload */}
+          <div>
+            <label className="block text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
+              Upload CSV *
+            </label>
+
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".csv"
+              onChange={onFileSelect}
+              className="hidden"
+            />
+
+            {uploadedFile ? (
+              <div className="rounded-lg p-3" style={{ backgroundColor: colors.bg.secondary }}>
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2.5">
+                    <svg className="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: colors.status.success }}>
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                    <div>
+                      <p className="text-sm font-medium" style={{ color: colors.text.primary }}>{uploadedFile.name}</p>
+                      <p className="text-xs" style={{ color: colors.text.secondary }}>
+                        {(uploadedFile.size / 1024).toFixed(1)} KB
+                      </p>
+                    </div>
+                  </div>
+                  <button
+                    onClick={() => {
+                      onRemoveFile();
+                      if (fileInputRef.current) fileInputRef.current.value = '';
+                    }}
+                    className="p-1 rounded"
+                    style={{ color: colors.text.secondary }}
+                    aria-label="Remove file"
+                  >
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <div
+                className={`border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors ${isDragging ? 'border-blue-400 bg-blue-50/30' : ''}`}
+                style={{ borderColor: isDragging ? colors.accent.primary : colors.border }}
+                onClick={() => fileInputRef.current?.click()}
+                onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
+                onDragLeave={() => setIsDragging(false)}
+                onDrop={handleDrop}
+              >
+                <svg className="mx-auto h-8 w-8 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: colors.border }}>
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                </svg>
+                <p className="text-sm font-medium mb-1" style={{ color: colors.text.primary }}>
+                  Drop CSV here, or click to browse
+                </p>
+                <p className="text-xs" style={{ color: colors.text.secondary }}>
+                  Format: <span className="font-mono" style={{ color: colors.text.primary }}>question,answer</span>
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Bottom Action Bar */}
+        <div className="flex-shrink-0 border-t px-4 py-3 flex items-center justify-end gap-3" style={{ borderColor: colors.border, backgroundColor: colors.bg.primary }}>
+          <button
+            onClick={resetForm}
+            className="px-4 py-2 rounded-lg text-sm font-medium"
+            style={{ color: colors.text.secondary }}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleCreateDataset}
+            disabled={!uploadedFile || !datasetName.trim() || isUploading}
+            className="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium"
+            style={{
+              backgroundColor: (!uploadedFile || !datasetName.trim() || isUploading) ? colors.bg.secondary : colors.accent.primary,
+              color: (!uploadedFile || !datasetName.trim() || isUploading) ? colors.text.secondary : '#fff',
+              cursor: (!uploadedFile || !datasetName.trim() || isUploading) ? 'not-allowed' : 'pointer',
+            }}
+          >
+            {isUploading ? (
+              <>
+                <div className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin" style={{ borderColor: colors.text.secondary, borderTopColor: 'transparent' }} />
+                Creating...
+              </>
+            ) : (
+              'Create Dataset'
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Right Panel - Dataset List */}
+      <div className="flex-1 flex flex-col overflow-hidden" style={{ backgroundColor: colors.bg.secondary }}>
+        <div className="flex-1 overflow-auto p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-base font-semibold" style={{ color: colors.text.primary }}>
+              Datasets
+            </h3>
+          </div>
+
+          {storedDatasets.length === 0 ? (
+            <div className="p-16 text-center">
+              <svg className="w-12 h-12 mx-auto mb-3" style={{ color: colors.border }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 7v10c0 2 3.6 3 8 3s8-1 8-3V7M4 7c0 2 3.6 3 8 3s8-1 8-3M4 7c0-2 3.6-3 8-3s8 1 8 3M4 12c0 2 3.6 3 8 3s8-1 8-3" />
+              </svg>
+              <p className="text-sm font-medium mb-1" style={{ color: colors.text.primary }}>No datasets yet</p>
+              <p className="text-xs" style={{ color: colors.text.secondary }}>Create your first dataset using the form on the left</p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {storedDatasets.map((dataset) => (
+                <div
+                  key={dataset.dataset_id}
+                  className="rounded-lg overflow-hidden"
+                  style={{
+                    backgroundColor: colors.bg.primary,
+                    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.04)',
+                    borderLeft: '3px solid #DCCFC3',
+                  }}
+                >
+                  <div className="px-5 py-4">
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="min-w-0 flex-1">
+                        <div className="text-sm font-semibold truncate" style={{ color: colors.text.primary }}>
+                          {dataset.dataset_name}
+                        </div>
+                        {dataset.description && (
+                          <EvalDatasetDescription description={dataset.description} />
+                        )}
+                        <div className="flex items-center gap-3 mt-2 text-xs" style={{ color: colors.text.secondary }}>
+                          <span>{dataset.total_items} items</span>
+                          {dataset.duplication_factor > 1 && (
+                            <>
+                              <span style={{ color: colors.border }}>·</span>
+                              <span>x{dataset.duplication_factor} duplication</span>
+                            </>
+                          )}
+                          {dataset.original_items > 0 && dataset.original_items !== dataset.total_items && (
+                            <>
+                              <span style={{ color: colors.border }}>·</span>
+                              <span>{dataset.original_items} original</span>
+                            </>
+                          )}
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2 flex-shrink-0">
+                        <button
+                          onClick={() => handleViewDataset(dataset.dataset_id, dataset.dataset_name)}
+                          disabled={viewingId === dataset.dataset_id}
+                          className="px-3 py-1.5 rounded-lg text-xs font-medium border"
+                          style={{
+                            backgroundColor: 'transparent',
+                            borderColor: colors.border,
+                            color: colors.text.primary,
+                            opacity: viewingId === dataset.dataset_id ? 0.5 : 1,
+                          }}
+                        >
+                          {viewingId === dataset.dataset_id ? 'Loading...' : 'View'}
+                        </button>
+                        <button
+                          onClick={() => setConfirmDeleteId(dataset.dataset_id)}
+                          className="px-3 py-1.5 rounded-lg text-xs font-medium border"
+                          style={{ backgroundColor: 'transparent', borderColor: colors.border, color: 'hsl(8, 86%, 40%)' }}
+                        >
+                          Delete
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* View Dataset Modal */}
+      {viewModalData && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center"
+          style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+          onClick={() => setViewModalData(null)}
+        >
+          <div
+            className="rounded-lg shadow-xl flex flex-col"
+            style={{ backgroundColor: colors.bg.primary, width: '80vw', maxWidth: '1000px', maxHeight: '80vh' }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Modal Header */}
+            <div className="flex items-center justify-between px-6 py-4 border-b flex-shrink-0" style={{ borderColor: colors.border }}>
+              <div>
+                <h3 className="text-sm font-semibold" style={{ color: colors.text.primary }}>
+                  {viewModalData.name}
+                </h3>
+                <p className="text-xs mt-0.5" style={{ color: colors.text.secondary }}>
+                  {viewModalData.rows.length} rows · {viewModalData.headers.length} columns
+                </p>
+              </div>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={handleDownloadFromModal}
+                  className="px-3 py-1.5 rounded-md text-xs font-medium"
+                  style={{ backgroundColor: colors.accent.primary, color: '#ffffff' }}
+                >
+                  Download CSV
+                </button>
+                <button
+                  onClick={() => setViewModalData(null)}
+                  className="p-1.5 rounded"
+                  style={{ color: colors.text.secondary }}
+                  aria-label="Close modal"
+                >
+                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            {/* Modal Body - Table */}
+            <div className="flex-1 overflow-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr style={{ backgroundColor: colors.bg.secondary, borderBottom: `1px solid ${colors.border}` }}>
+                    <th className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0" style={{ color: colors.text.secondary, backgroundColor: colors.bg.secondary, width: '40px' }}>
+                    </th>
+                    {viewModalData.headers.map((header, i) => (
+                      <th key={i} className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0" style={{ color: colors.text.secondary, backgroundColor: colors.bg.secondary }}>
+                        {header}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {viewModalData.rows.map((row, rowIdx) => (
+                    <tr key={rowIdx} style={{ borderBottom: `1px solid ${colors.border}` }}>
+                      <td className="px-4 py-2.5 text-xs" style={{ color: colors.text.secondary }}>
+                        {rowIdx + 1}
+                      </td>
+                      {row.map((cell, cellIdx) => (
+                        <td key={cellIdx} className="px-4 py-2.5" style={{ color: colors.text.primary }}>
+                          <div className="text-sm" style={{ maxHeight: '120px', overflow: 'auto', lineHeight: '1.5' }}>
+                            {cell || <span style={{ color: colors.text.secondary }}>—</span>}
+                          </div>
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Delete Confirmation Modal */}
+      {confirmDeleteId !== null && (() => {
+        const dataset = storedDatasets.find(d => d.dataset_id === confirmDeleteId);
+        return (
+          <div
+            className="fixed inset-0 z-50 flex items-center justify-center"
+            style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+            onClick={() => setConfirmDeleteId(null)}
+          >
+            <div
+              className="rounded-lg shadow-xl w-full max-w-md"
+              style={{ backgroundColor: colors.bg.primary }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="px-6 py-5">
+                <div className="flex items-start gap-3">
+                  <div className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0" style={{ backgroundColor: 'rgba(220, 38, 38, 0.1)' }}>
+                    <svg className="w-5 h-5" style={{ color: 'hsl(8, 86%, 40%)' }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01M5.07 19h13.86c1.54 0 2.5-1.67 1.73-3L13.73 4c-.77-1.33-2.69-1.33-3.46 0L3.34 16c-.77 1.33.19 3 1.73 3z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <h3 className="text-sm font-semibold" style={{ color: colors.text.primary }}>
+                      Delete dataset
+                    </h3>
+                    <p className="text-sm mt-1" style={{ color: colors.text.secondary }}>
+                      Are you sure you want to delete <strong style={{ color: colors.text.primary }}>{dataset?.dataset_name}</strong>? This action cannot be undone.
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div className="flex items-center justify-end gap-3 px-6 py-4 border-t" style={{ borderColor: colors.border }}>
+                <button
+                  onClick={() => setConfirmDeleteId(null)}
+                  className="px-4 py-2 rounded-lg text-sm font-medium border"
+                  style={{ backgroundColor: 'transparent', borderColor: colors.border, color: colors.text.primary }}
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={() => { handleDeleteDataset(confirmDeleteId); setConfirmDeleteId(null); }}
+                  disabled={deletingId === confirmDeleteId}
+                  className="px-4 py-2 rounded-lg text-sm font-medium"
+                  style={{ backgroundColor: 'hsl(8, 86%, 40%)', color: '#ffffff', opacity: deletingId === confirmDeleteId ? 0.5 : 1 }}
+                >
+                  {deletingId === confirmDeleteId ? 'Deleting...' : 'Delete'}
+                </button>
+              </div>
+            </div>
+          </div>
+        );
+      })()}
+    </div>
+  );
+}
diff --git a/app/components/evaluations/EvalDatasetDescription.tsx b/app/components/evaluations/EvalDatasetDescription.tsx
new file mode 100644
index 0000000..76c9f01
--- /dev/null
+++ b/app/components/evaluations/EvalDatasetDescription.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import { useState } from 'react';
+import { colors } from '@/app/lib/colors';
+
+const EVAL_DESCRIPTION_CHAR_LIMIT = 100;
+
+export default function EvalDatasetDescription({ description }: { description: string }) {
+  const [expanded, setExpanded] = useState(false);
+  const isLong = description.length > EVAL_DESCRIPTION_CHAR_LIMIT;
+
+  return (
+    <div className="mt-2 text-xs leading-relaxed break-words overflow-hidden" style={{ color: colors.text.secondary }}>
+      <span>
+        {isLong && !expanded
+          ? description.slice(0, EVAL_DESCRIPTION_CHAR_LIMIT).trimEnd() + '...'
+          : description}
+      </span>
+      {isLong && (
+        <button
+          onClick={(e) => { e.stopPropagation(); setExpanded(!expanded); }}
+          className="mt-1 block text-xs font-medium"
+          style={{ color: colors.text.primary }}
+        >
+          {expanded ? 'Show less' : 'Read more'}
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/evaluations/EvalRunCard.tsx b/app/components/evaluations/EvalRunCard.tsx
new file mode 100644
index 0000000..606bf38
--- /dev/null
+++ b/app/components/evaluations/EvalRunCard.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { colors } from '@/app/lib/colors';
+import { EvalJob, AssistantConfig, getScoreObject } from '@/app/components/types';
+import { getStatusColor } from '@/app/components/utils';
+import { timeAgo } from '@/app/lib/utils';
+import ConfigModal from '@/app/components/ConfigModal';
+import ScoreDisplay from '@/app/components/ScoreDisplay';
+
+export interface EvalRunCardProps {
+  job: EvalJob;
+  assistantConfig?: AssistantConfig;
+}
+
+export default function EvalRunCard({ job, assistantConfig }: EvalRunCardProps) {
+  const router = useRouter();
+  const [isConfigModalOpen, setIsConfigModalOpen] = useState(false);
+
+  const isCompleted = job.status?.toLowerCase() === 'completed';
+  const scoreObj = getScoreObject(job);
+  const statusColor = getStatusColor(job.status || '');
+
+  return (
+    <div
+      className="rounded-lg overflow-hidden"
+      style={{
+        backgroundColor: colors.bg.primary,
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.04)',
+        borderLeft: `3px solid ${statusColor.border}`,
+      }}
+    >
+      <div className="px-5 py-4">
+        {/* Row 1: Run Name (left) | Status (right) */}
+        <div className="flex items-start justify-between gap-4">
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-semibold truncate" style={{ color: colors.text.primary }}>
+              {job.run_name}
+            </div>
+            {job.inserted_at && (
+              <div className="text-xs mt-0.5" style={{ color: colors.text.secondary }}>
+                {timeAgo(job.inserted_at)}
+              </div>
+            )}
+            {/* Error message (if failed) */}
+            {job.error_message && (
+              <div className="mt-2 text-xs break-words overflow-hidden" style={{ color: 'hsl(8, 86%, 40%)' }}>
+                {job.error_message}
+              </div>
+            )}
+          </div>
+          <span
+            className="px-2.5 py-1 rounded text-xs font-semibold uppercase tracking-wide flex-shrink-0"
+            style={{ backgroundColor: statusColor.bg, color: statusColor.text }}
+          >
+            {job.status}
+          </span>
+        </div>
+
+        {/* Row 2: Scores */}
+        {scoreObj && (
+          <div className="mt-3">
+            <ScoreDisplay score={scoreObj} errorMessage={job.error_message} />
+          </div>
+        )}
+
+        {/* Row 3: Dataset + Config (left) | Actions (right) */}
+        <div className="flex items-center justify-between gap-4 mt-3">
+          <div className="flex items-center gap-3 text-xs" style={{ color: colors.text.secondary }}>
+            {job.dataset_name && (
+              <span className="flex items-center gap-1.5">
+                <svg className="w-3.5 h-3.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M4 7v10c0 2 3.6 3 8 3s8-1 8-3V7M4 7c0 2 3.6 3 8 3s8-1 8-3M4 7c0-2 3.6-3 8-3s8 1 8 3M4 12c0 2 3.6 3 8 3s8-1 8-3" />
+                </svg>
+                {job.dataset_name}
+              </span>
+            )}
+            {job.assistant_id && assistantConfig?.name && (
+              <span className="px-1.5 py-0.5 rounded" style={{ backgroundColor: colors.bg.secondary }}>
+                {assistantConfig.name}
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-3 flex-shrink-0">
+            <button
+              onClick={() => setIsConfigModalOpen(true)}
+              className="px-3 py-1.5 rounded-lg text-xs font-medium border"
+              style={{
+                backgroundColor: 'transparent',
+                borderColor: colors.border,
+                color: colors.text.primary,
+              }}
+            >
+              View Config
+            </button>
+            <button
+              onClick={() => router.push(`/evaluations/${job.id}`)}
+              disabled={!isCompleted}
+              className="px-3 py-1.5 rounded-lg text-xs font-medium border cursor-pointer disabled:cursor-not-allowed"
+              style={{
+                backgroundColor: 'transparent',
+                borderColor: colors.border,
+                color: isCompleted ? colors.text.primary : colors.text.secondary,
+                opacity: isCompleted ? 1 : 0.5,
+              }}
+            >
+              View Results
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <ConfigModal
+        isOpen={isConfigModalOpen}
+        onClose={() => setIsConfigModalOpen(false)}
+        job={job}
+        assistantConfig={assistantConfig}
+      />
+    </div>
+  );
+}
diff --git a/app/components/evaluations/EvaluationsTab.tsx b/app/components/evaluations/EvaluationsTab.tsx
new file mode 100644
index 0000000..94739b2
--- /dev/null
+++ b/app/components/evaluations/EvaluationsTab.tsx
@@ -0,0 +1,382 @@
+"use client"
+
+import { useState, useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { colors } from '@/app/lib/colors';
+import { APIKey } from '@/app/keystore/page';
+import { Dataset } from '@/app/datasets/page';
+import { EvalJob, AssistantConfig } from '@/app/components/types';
+import ConfigSelector from '@/app/components/ConfigSelector';
+import Loader from '@/app/components/Loader';
+import EvalRunCard from './EvalRunCard';
+import EvalDatasetDescription from './EvalDatasetDescription';
+
+type Tab = 'datasets' | 'evaluations';
+
+export interface EvaluationsTabProps {
+  leftPanelWidth: number;
+  apiKeys: APIKey[];
+  selectedKeyId: string;
+  storedDatasets: Dataset[];
+  selectedDatasetId: string;
+  setSelectedDatasetId: (id: string) => void;
+  selectedConfigId: string;
+  selectedConfigVersion: number;
+  onConfigSelect: (configId: string, configVersion: number) => void;
+  experimentName: string;
+  setExperimentName: (name: string) => void;
+  isEvaluating: boolean;
+  handleRunEvaluation: () => Promise<boolean>;
+  setActiveTab: (tab: Tab) => void;
+}
+
+export default function EvaluationsTab({
+  leftPanelWidth,
+  apiKeys,
+  selectedKeyId,
+  storedDatasets,
+  selectedDatasetId,
+  setSelectedDatasetId,
+  selectedConfigId,
+  selectedConfigVersion,
+  onConfigSelect,
+  experimentName,
+  setExperimentName,
+  isEvaluating,
+  handleRunEvaluation,
+  setActiveTab,
+}: EvaluationsTabProps) {
+  const router = useRouter();
+  const [evalJobs, setEvalJobs] = useState<EvalJob[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [assistantConfigs, setAssistantConfigs] = useState<Map<string, AssistantConfig>>(new Map());
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+
+  const selectedDataset = storedDatasets.find(d => d.dataset_id.toString() === selectedDatasetId);
+  const canRun = experimentName.trim() && selectedDatasetId && selectedConfigId && selectedConfigVersion && !isEvaluating;
+
+  // Fetch evaluation jobs
+  const fetchEvaluations = useCallback(async () => {
+    if (!selectedKeyId) {
+      setError('Please select an API key first');
+      return;
+    }
+    const selectedKey = apiKeys.find(k => k.id === selectedKeyId);
+    if (!selectedKey) {
+      setError('Selected API key not found');
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch('/api/evaluations', {
+        method: 'GET',
+        headers: { 'X-API-KEY': selectedKey.key },
+      });
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error || errorData.message || `Failed to fetch evaluations: ${response.status}`);
+      }
+      const data = await response.json();
+      setEvalJobs(Array.isArray(data) ? data : (data.data || []));
+    } catch (err: any) {
+      setError(err.message || 'Failed to fetch evaluation jobs');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [apiKeys, selectedKeyId]);
+
+  // Fetch assistant config
+  const fetchAssistantConfig = useCallback(async (assistantId: string) => {
+    if (!selectedKeyId) return;
+    const selectedKey = apiKeys.find(k => k.id === selectedKeyId);
+    if (!selectedKey) return;
+
+    try {
+      const response = await fetch(`/api/assistant/${assistantId}`, {
+        method: 'GET',
+        headers: { 'X-API-KEY': selectedKey.key },
+      });
+      if (!response.ok) return;
+      const result = await response.json();
+      if (result.success && result.data) {
+        setAssistantConfigs(prev => new Map(prev).set(assistantId, result.data));
+      }
+    } catch (err) {
+      console.error(`Failed to fetch assistant config for ${assistantId}:`, err);
+    }
+  }, [apiKeys, selectedKeyId]);
+
+  useEffect(() => {
+    evalJobs.forEach(job => {
+      if (job.assistant_id && !assistantConfigs.has(job.assistant_id)) {
+        fetchAssistantConfig(job.assistant_id);
+      }
+    });
+  }, [evalJobs, assistantConfigs, fetchAssistantConfig]);
+
+  useEffect(() => {
+    if (selectedKeyId) fetchEvaluations();
+  }, [selectedKeyId, fetchEvaluations]);
+
+  return (
+    <div className="flex-1 flex overflow-hidden">
+      {/* Left Panel - Configuration */}
+      <div
+        className="flex-shrink-0 border-r flex flex-col overflow-hidden"
+        style={{ width: `${leftPanelWidth}px`, backgroundColor: colors.bg.primary, borderColor: colors.border }}
+      >
+        <div className="flex-1 overflow-auto p-4 space-y-4">
+          {/* Page Title */}
+          <div>
+            <h2 className="text-base font-semibold" style={{ color: colors.text.primary }}>
+              Run New Evaluation
+            </h2>
+            <p className="text-xs mt-0.5" style={{ color: colors.text.secondary }}>
+              Test model responses against your golden datasets
+            </p>
+          </div>
+
+          {/* Evaluation Name */}
+          <div>
+            <label className="block text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
+              Name *
+            </label>
+            <input
+              type="text"
+              value={experimentName}
+              onChange={e => setExperimentName(e.target.value)}
+              placeholder="e.g., test_run_1"
+              disabled={isEvaluating}
+              className="w-full px-3 py-2 border rounded-md text-sm"
+              style={{
+                backgroundColor: isEvaluating ? colors.bg.secondary : colors.bg.primary,
+                borderColor: colors.border,
+                color: colors.text.primary,
+              }}
+            />
+          </div>
+
+          {/* Config Selector */}
+          <ConfigSelector
+            selectedConfigId={selectedConfigId}
+            selectedVersion={selectedConfigVersion}
+            onConfigSelect={onConfigSelect}
+            disabled={isEvaluating}
+            compact
+            datasetId={selectedDatasetId}
+            experimentName={experimentName}
+          />
+
+          {/* Dataset Selection */}
+          <div className="pt-2">
+            <label className="block text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
+              Select Dataset *
+            </label>
+            {storedDatasets.length === 0 ? (
+              <div className="border rounded-md p-8 text-center" style={{ borderColor: colors.border }}>
+                <p className="text-sm" style={{ color: colors.text.secondary }}>No datasets available</p>
+                <p className="text-xs mt-1" style={{ color: colors.text.secondary }}>
+                  Create a dataset first in the{' '}
+                  <button
+                    onClick={() => setActiveTab('datasets')}
+                    className="underline"
+                    style={{ color: colors.accent.primary }}
+                  >
+                    Datasets tab
+                  </button>
+                </p>
+              </div>
+            ) : (
+              <div className="relative">
+                <select
+                  value={selectedDatasetId}
+                  onChange={e => setSelectedDatasetId(e.target.value)}
+                  className="w-full px-3 py-2 border rounded-md text-sm appearance-none pr-8"
+                  style={{
+                    backgroundColor: colors.bg.primary,
+                    borderColor: colors.border,
+                    color: selectedDatasetId ? colors.text.primary : colors.text.secondary,
+                  }}
+                >
+                  <option value="">-- Select a dataset --</option>
+                  {storedDatasets.map(dataset => (
+                    <option key={dataset.dataset_id} value={dataset.dataset_id}>
+                      {dataset.dataset_name} ({dataset.total_items} items)
+                    </option>
+                  ))}
+                </select>
+                <svg
+                  className="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none"
+                  style={{ color: colors.text.secondary }}
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </div>
+            )}
+          </div>
+
+          {/* Selected Dataset Info */}
+          {selectedDataset && (
+            <div className="border rounded-lg p-3" style={{ borderColor: colors.status.success, backgroundColor: 'rgba(22, 163, 74, 0.02)' }}>
+              <div className="flex items-start gap-2">
+                <svg className="w-5 h-5 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: colors.status.success }}>
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <div className="flex-1">
+                  <div className="text-sm font-medium" style={{ color: colors.text.primary }}>
+                    {selectedDataset.dataset_name}
+                  </div>
+                  {selectedDataset.description && (
+                    <EvalDatasetDescription description={selectedDataset.description} />
+                  )}
+                  <div className="text-xs mt-1" style={{ color: colors.text.secondary }}>
+                    {selectedDataset.total_items} items · x{selectedDataset.duplication_factor} duplication
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Run Evaluation Button */}
+        <div className="flex-shrink-0 border-t px-4 py-3" style={{ borderColor: colors.border, backgroundColor: colors.bg.primary }}>
+          <button
+            onClick={async () => {
+              const success = await handleRunEvaluation();
+              if (success) fetchEvaluations();
+            }}
+            disabled={!canRun}
+            className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium"
+            style={{
+              backgroundColor: canRun ? colors.accent.primary : colors.bg.secondary,
+              color: canRun ? '#fff' : colors.text.secondary,
+              cursor: canRun ? 'pointer' : 'not-allowed',
+            }}
+          >
+            {isEvaluating ? (
+              <>
+                <div className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin" style={{ borderColor: colors.text.secondary, borderTopColor: 'transparent' }} />
+                Running Evaluation...
+              </>
+            ) : (
+              <>
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M8 5v14l11-7z" />
+                </svg>
+                Run Evaluation
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Right Panel - Evaluation Runs */}
+      <div className="flex-1 flex flex-col overflow-hidden" style={{ backgroundColor: colors.bg.secondary }}>
+        <div className="flex-1 overflow-auto p-4">
+          {/* Header */}
+          <div className="mb-4 flex items-center justify-between">
+            <h2 className="text-base font-semibold" style={{ color: colors.text.primary }}>
+              Evaluation Runs
+            </h2>
+            <div className="flex items-center gap-2">
+              <select
+                value={statusFilter}
+                onChange={(e) => setStatusFilter(e.target.value)}
+                className="px-2.5 py-1 rounded-md text-xs font-medium border appearance-none cursor-pointer pr-7"
+                style={{
+                  backgroundColor: colors.bg.primary,
+                  borderColor: colors.border,
+                  color: colors.text.primary,
+                  backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")`,
+                  backgroundRepeat: 'no-repeat',
+                  backgroundPosition: 'right 6px center',
+                }}
+              >
+                <option value="all">All Status</option>
+                <option value="completed">Completed</option>
+                <option value="processing">Processing</option>
+                <option value="pending">Pending</option>
+                <option value="failed">Failed</option>
+              </select>
+              <button
+                onClick={fetchEvaluations}
+                disabled={isLoading}
+                className="p-1.5 rounded"
+                style={{ color: colors.text.secondary }}
+                aria-label="Refresh evaluations"
+              >
+                <svg
+                  className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`}
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <div className="rounded-lg overflow-visible" style={{ backgroundColor: colors.bg.primary, boxShadow: '0 1px 3px rgba(0, 0, 0, 0.04)' }}>
+            {/* Loading */}
+            {isLoading && evalJobs.length === 0 && (
+              <div className="p-16">
+                <Loader size="md" message="Loading evaluation runs..." />
+              </div>
+            )}
+
+            {/* Error */}
+            {error && (
+              <div className="p-4">
+                <div className="rounded-lg p-3" style={{ backgroundColor: 'hsl(8, 86%, 95%)' }}>
+                  <p className="text-sm" style={{ color: 'hsl(8, 86%, 40%)' }}>Error: {error}</p>
+                </div>
+              </div>
+            )}
+
+            {/* Empty State */}
+            {!isLoading && evalJobs.length === 0 && !error && (
+              <div className="p-16 text-center">
+                <svg className="w-12 h-12 mx-auto mb-3" style={{ color: colors.border }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                </svg>
+                <p className="text-sm font-medium mb-1" style={{ color: colors.text.primary }}>No evaluation runs yet</p>
+                <p className="text-xs" style={{ color: colors.text.secondary }}>Select a dataset and configuration, then run your first evaluation</p>
+              </div>
+            )}
+
+            {/* Runs List */}
+            {evalJobs.length > 0 && (() => {
+              const filteredJobs = statusFilter === 'all'
+                ? evalJobs
+                : evalJobs.filter(job => job.status.toLowerCase() === statusFilter);
+              return filteredJobs.length > 0 ? (
+                <div className="p-4 space-y-3">
+                  {filteredJobs.map((job) => (
+                    <EvalRunCard
+                      key={job.id}
+                      job={job}
+                      assistantConfig={job.assistant_id ? assistantConfigs.get(job.assistant_id) : undefined}
+                    />
+                  ))}
+                </div>
+              ) : (
+                <div className="p-16 text-center">
+                  <p className="text-sm font-medium mb-1" style={{ color: colors.text.primary }}>No {statusFilter} runs</p>
+                  <p className="text-xs" style={{ color: colors.text.secondary }}>No evaluation runs with status "{statusFilter}"</p>
+                </div>
+              );
+            })()}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/icons/evaluations/CheckIcon.tsx b/app/components/icons/evaluations/CheckIcon.tsx
new file mode 100644
index 0000000..4ffc20e
--- /dev/null
+++ b/app/components/icons/evaluations/CheckIcon.tsx
@@ -0,0 +1,12 @@
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function CheckIcon({ className, style }: IconProps) {
+  return (
+    <svg className={className} fill="currentColor" viewBox="0 0 20 20" style={style}>
+      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+    </svg>
+  );
+}
diff --git a/app/components/icons/evaluations/ChevronDownIcon.tsx b/app/components/icons/evaluations/ChevronDownIcon.tsx
new file mode 100644
index 0000000..f4049e4
--- /dev/null
+++ b/app/components/icons/evaluations/ChevronDownIcon.tsx
@@ -0,0 +1,12 @@
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function ChevronDownIcon({ className, style }: IconProps) {
+  return (
+    <svg className={`w-3.5 h-3.5 ${className ?? ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} style={style}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+    </svg>
+  );
+}
diff --git a/app/components/icons/evaluations/ChevronUpIcon.tsx b/app/components/icons/evaluations/ChevronUpIcon.tsx
new file mode 100644
index 0000000..c2f3488
--- /dev/null
+++ b/app/components/icons/evaluations/ChevronUpIcon.tsx
@@ -0,0 +1,12 @@
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function ChevronUpIcon({ className, style }: IconProps) {
+  return (
+    <svg className={`w-3.5 h-3.5 ${className ?? ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} style={style}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
+    </svg>
+  );
+}
diff --git a/app/components/icons/evaluations/EditIcon.tsx b/app/components/icons/evaluations/EditIcon.tsx
new file mode 100644
index 0000000..51fb243
--- /dev/null
+++ b/app/components/icons/evaluations/EditIcon.tsx
@@ -0,0 +1,12 @@
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function EditIcon({ className, style }: IconProps) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" style={style}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+    </svg>
+  );
+}
diff --git a/app/components/icons/evaluations/GearIcon.tsx b/app/components/icons/evaluations/GearIcon.tsx
new file mode 100644
index 0000000..cba5702
--- /dev/null
+++ b/app/components/icons/evaluations/GearIcon.tsx
@@ -0,0 +1,13 @@
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function GearIcon({ className, style }: IconProps) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" style={style}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+  );
+}
diff --git a/app/components/icons/index.tsx b/app/components/icons/index.tsx
new file mode 100644
index 0000000..92eba34
--- /dev/null
+++ b/app/components/icons/index.tsx
@@ -0,0 +1,6 @@
+// Evaluations Icons
+export { default as ChevronUpIcon } from './evaluations/ChevronUpIcon';
+export { default as ChevronDownIcon } from './evaluations/ChevronDownIcon';
+export { default as EditIcon } from './evaluations/EditIcon';
+export { default as GearIcon } from './evaluations/GearIcon';
+export { default as CheckIcon } from './evaluations/CheckIcon';
diff --git a/app/evaluations/page.tsx b/app/evaluations/page.tsx
index a35b68e..ead350c 100644
--- a/app/evaluations/page.tsx
+++ b/app/evaluations/page.tsx
@@ -6,20 +6,18 @@
  */
 
 "use client"
-import { useState, useEffect, useCallback, useRef, Suspense } from 'react';
+
+import { useState, useEffect, useCallback, Suspense } from 'react';
 import { colors } from '@/app/lib/colors';
 import { useRouter, useSearchParams } from 'next/navigation'
-import { APIKey, STORAGE_KEY } from '../keystore/page';
-import { Dataset } from '../datasets/page';
-import { EvalJob, AssistantConfig, getScoreObject } from '../components/types';
-import { getStatusColor } from '../components/utils';
-import ConfigModal from '../components/ConfigModal';
-import ScoreDisplay from '../components/ScoreDisplay';
-import Sidebar from '../components/Sidebar';
-import TabNavigation from '../components/TabNavigation';
-import ConfigSelector from '../components/ConfigSelector';
-import { useToast } from '../components/Toast';
-import Loader from '../components/Loader';
+import { APIKey, STORAGE_KEY } from '@/app/keystore/page';
+import { Dataset } from '@/app/datasets/page';
+import Sidebar from '@/app/components/Sidebar';
+import TabNavigation from '@/app/components/TabNavigation';
+import { useToast } from '@/app/components/Toast';
+import Loader from '@/app/components/Loader';
+import DatasetsTab from '@/app/components/evaluations/DatasetsTab';
+import EvaluationsTab from '@/app/components/evaluations/EvaluationsTab';
 
 type Tab = 'datasets' | 'evaluations';
 
@@ -376,1086 +374,6 @@ function SimplifiedEvalContent() {
     </div>
   );
 }
-
-// ============ DATASET DESCRIPTION COMPONENT ============
-const EVAL_DESCRIPTION_CHAR_LIMIT = 100;
-
-function EvalDatasetDescription({ description }: { description: string }) {
-  const [expanded, setExpanded] = useState(false);
-  const isLong = description.length > EVAL_DESCRIPTION_CHAR_LIMIT;
-
-  return (
-    <div className="mt-2 text-xs leading-relaxed break-words overflow-hidden" style={{ color: colors.text.secondary }}>
-      <span>
-        {isLong && !expanded
-          ? description.slice(0, EVAL_DESCRIPTION_CHAR_LIMIT).trimEnd() + '...'
-          : description}
-      </span>
-      {isLong && (
-        <button
-          onClick={(e) => { e.stopPropagation(); setExpanded(!expanded); }}
-          className="mt-1 block text-xs font-medium"
-          style={{ color: colors.text.primary }}
-        >
-          {expanded ? 'Show less' : 'Read more'}
-        </button>
-      )}
-    </div>
-  );
-}
-
-// ============ DATASETS TAB COMPONENT ============
-interface DatasetsTabProps {
-  leftPanelWidth: number;
-  datasetName: string;
-  setDatasetName: (name: string) => void;
-  datasetDescription: string;
-  setDatasetDescription: (desc: string) => void;
-  duplicationFactor: string;
-  setDuplicationFactor: (factor: string) => void;
-  uploadedFile: File | null;
-  onFileSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  onRemoveFile: () => void;
-  isUploading: boolean;
-  handleCreateDataset: () => void;
-  resetForm: () => void;
-  storedDatasets: Dataset[];
-  apiKeys: APIKey[];
-  selectedKeyId: string;
-  loadStoredDatasets: () => void;
-  toast: ReturnType<typeof useToast>;
-}
-
-function DatasetsTab({
-  leftPanelWidth,
-  datasetName,
-  setDatasetName,
-  datasetDescription,
-  setDatasetDescription,
-  duplicationFactor,
-  setDuplicationFactor,
-  uploadedFile,
-  onFileSelect,
-  onRemoveFile,
-  isUploading,
-  handleCreateDataset,
-  resetForm,
-  storedDatasets,
-  apiKeys,
-  selectedKeyId,
-  loadStoredDatasets,
-  toast,
-}: DatasetsTabProps) {
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [deletingId, setDeletingId] = useState<number | null>(null);
-  const [showDuplicationInfo, setShowDuplicationInfo] = useState(false);
-  const [duplicationInfoPos, setDuplicationInfoPos] = useState({ top: 0, left: 0 });
-
-  useEffect(() => {
-    if (!showDuplicationInfo) return;
-    const handleClick = () => setShowDuplicationInfo(false);
-    const handleScroll = () => setShowDuplicationInfo(false);
-    document.addEventListener('click', handleClick);
-    window.addEventListener('scroll', handleScroll, true);
-    return () => {
-      document.removeEventListener('click', handleClick);
-      window.removeEventListener('scroll', handleScroll, true);
-    };
-  }, [showDuplicationInfo]);
-
-  const handleDeleteDataset = async (datasetId: number) => {
-    const selectedKey = apiKeys.find(k => k.id === selectedKeyId);
-    if (!selectedKey) return;
-
-    setDeletingId(datasetId);
-    try {
-      const response = await fetch(`/api/evaluations/datasets/${datasetId}`, {
-        method: 'DELETE',
-        headers: { 'X-API-KEY': selectedKey.key },
-      });
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || 'Failed to delete dataset');
-      }
-      toast.success('Dataset deleted');
-      loadStoredDatasets();
-    } catch (err: any) {
-      toast.error(err.message || 'Failed to delete dataset');
-    } finally {
-      setDeletingId(null);
-    }
-  };
-
-  const [confirmDeleteId, setConfirmDeleteId] = useState<number | null>(null);
-  const [viewingId, setViewingId] = useState<number | null>(null);
-  const [viewModalData, setViewModalData] = useState<{ name: string; headers: string[]; rows: string[][]; signedUrl: string } | null>(null);
-
-  const handleViewDataset = async (datasetId: number, datasetName: string) => {
-    const selectedKey = apiKeys.find(k => k.id === selectedKeyId);
-    if (!selectedKey) return;
-
-    setViewingId(datasetId);
-    try {
-      const response = await fetch(`/api/evaluations/datasets/${datasetId}?include_signed_url=true&fetch_content=true`, {
-        method: 'GET',
-        headers: { 'X-API-KEY': selectedKey.key },
-      });
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || 'Failed to get dataset');
-      }
-      const data = await response.json();
-      const signedUrl = data?.data?.signed_url || data?.signed_url;
-      const csvText = data?.csv_content;
-      if (!csvText) {
-        toast.error('No data available for this dataset');
-        return;
-      }
-
-      // Parse CSV
-      const lines = csvText.split('\n').filter(l => l.trim());
-      const parseRow = (line: string): string[] => {
-        const result: string[] = [];
-        let current = '';
-        let inQuotes = false;
-        for (let i = 0; i < line.length; i++) {
-          if (line[i] === '"') {
-            if (inQuotes && line[i + 1] === '"') { current += '"'; i++; }
-            else { inQuotes = !inQuotes; }
-          } else if (line[i] === ',' && !inQuotes) {
-            result.push(current.trim());
-            current = '';
-          } else {
-            current += line[i];
-          }
-        }
-        result.push(current.trim());
-        return result;
-      };
-
-      const headers = lines.length > 0 ? parseRow(lines[0]) : [];
-      const rows = lines.slice(1).map(parseRow);
-
-      setViewModalData({ name: datasetName, headers, rows, signedUrl: signedUrl || '' });
-    } catch (err: any) {
-      toast.error(err.message || 'Failed to view dataset');
-    } finally {
-      setViewingId(null);
-    }
-  };
-
-  const handleDownloadFromModal = () => {
-    if (!viewModalData) return;
-    // Reconstruct CSV from parsed data
-    const csvLines = [viewModalData.headers.join(',')];
-    viewModalData.rows.forEach(row => {
-      csvLines.push(row.map(cell => cell.includes(',') || cell.includes('"') || cell.includes('\n') ? `"${cell.replace(/"/g, '""')}"` : cell).join(','));
-    });
-    const blob = new Blob([csvLines.join('\n')], { type: 'text/csv;charset=utf-8;' });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = `${viewModalData.name}.csv`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  };
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-    const file = e.dataTransfer.files?.[0];
-    if (file && file.name.endsWith('.csv')) {
-      const dt = new DataTransfer();
-      dt.items.add(file);
-      if (fileInputRef.current) {
-        fileInputRef.current.files = dt.files;
-        fileInputRef.current.dispatchEvent(new Event('change', { bubbles: true }));
-      }
-    }
-  };
-
-  return (
-    <div className="flex-1 flex overflow-hidden">
-      {/* Left Panel - Create Dataset Form */}
-      <div
-        className="flex-shrink-0 border-r flex flex-col overflow-hidden"
-        style={{ width: `${leftPanelWidth}px`, backgroundColor: colors.bg.primary, borderColor: colors.border }}
-      >
-        <div className="flex-1 overflow-auto p-4 space-y-4">
-          {/* Page Title */}
-          <div>
-            <h2 className="text-base font-semibold" style={{ color: colors.text.primary }}>
-              Create New Dataset
-            </h2>
-            <p className="text-xs mt-0.5" style={{ color: colors.text.secondary }}>
-              Upload a CSV with golden question-answer pairs
-            </p>
-          </div>
-
-          {/* Name */}
-          <div>
-            <label className="block text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
-              Name *
-            </label>
-            <input
-              type="text"
-              value={datasetName}
-              onChange={e => setDatasetName(e.target.value)}
-              placeholder="e.g., QnA Dataset v1"
-              className="w-full px-3 py-2 border rounded-md text-sm"
-              style={{ backgroundColor: colors.bg.primary, borderColor: colors.border, color: colors.text.primary }}
-            />
-          </div>
-
-          {/* Description */}
-          <div>
-            <label className="block text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
-              Description
-            </label>
-            <input
-              type="text"
-              value={datasetDescription}
-              onChange={e => setDatasetDescription(e.target.value)}
-              placeholder="Optional description"
-              className="w-full px-3 py-2 border rounded-md text-sm"
-              style={{ backgroundColor: colors.bg.primary, borderColor: colors.border, color: colors.text.primary }}
-            />
-          </div>
-
-          {/* Duplication Factor */}
-          <div>
-            <label className="text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
-              <span className="inline-flex items-center gap-1">
-                Duplication Factor
-                <span
-                  className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-[9px] font-normal cursor-pointer shrink-0"
-                  style={{ backgroundColor: colors.bg.primary, border: `1px solid ${colors.border}`, color: colors.text.secondary }}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    const rect = e.currentTarget.getBoundingClientRect();
-                    setDuplicationInfoPos({ top: rect.bottom + 4, left: rect.left });
-                    setShowDuplicationInfo(!showDuplicationInfo);
-                  }}
-                >
-                  i
-                </span>
-                {showDuplicationInfo && (
-                  <div
-                    className="fixed z-50 rounded-lg shadow-lg border text-xs p-3"
-                    style={{ backgroundColor: colors.bg.primary, borderColor: colors.border, width: '280px', top: duplicationInfoPos.top, left: duplicationInfoPos.left }}
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    <div className="font-semibold mb-1" style={{ color: colors.text.primary }}>Duplication Factor</div>
-                    <p style={{ color: colors.text.secondary, lineHeight: '1.5' }}>
-                      Controls how many times each question is sent to the AI to generate an answer. For example, setting this to 3 means the AI answers each question 3 separate times — helpful for checking if the AI gives consistent and reliable responses each time.
-                    </p>
-                  </div>
-                )}
-              </span>
-            </label>
-            <select
-              value={duplicationFactor}
-              onChange={e => setDuplicationFactor(e.target.value)}
-              className="w-full px-3 py-2 border rounded-md text-sm"
-              style={{ backgroundColor: colors.bg.primary, borderColor: colors.border, color: colors.text.primary }}
-            >
-              {[1, 2, 3, 4, 5].map(n => (
-                <option key={n} value={String(n)}>{n}</option>
-              ))}
-            </select>
-          </div>
-
-          {/* CSV Upload */}
-          <div>
-            <label className="block text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
-              Upload CSV *
-            </label>
-
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept=".csv"
-              onChange={onFileSelect}
-              className="hidden"
-            />
-
-            {uploadedFile ? (
-              <div className="rounded-lg p-3" style={{ backgroundColor: colors.bg.secondary }}>
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2.5">
-                    <svg className="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: colors.status.success }}>
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                    </svg>
-                    <div>
-                      <p className="text-sm font-medium" style={{ color: colors.text.primary }}>{uploadedFile.name}</p>
-                      <p className="text-xs" style={{ color: colors.text.secondary }}>
-                        {(uploadedFile.size / 1024).toFixed(1)} KB
-                      </p>
-                    </div>
-                  </div>
-                  <button
-                    onClick={() => {
-                      onRemoveFile();
-                      if (fileInputRef.current) fileInputRef.current.value = '';
-                    }}
-                    className="p-1 rounded"
-                    style={{ color: colors.text.secondary }}
-                    aria-label="Remove file"
-                  >
-                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                  </button>
-                </div>
-              </div>
-            ) : (
-              <div
-                className={`border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors ${isDragging ? 'border-blue-400 bg-blue-50/30' : ''}`}
-                style={{ borderColor: isDragging ? colors.accent.primary : colors.border }}
-                onClick={() => fileInputRef.current?.click()}
-                onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
-                onDragLeave={() => setIsDragging(false)}
-                onDrop={handleDrop}
-              >
-                <svg className="mx-auto h-8 w-8 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: colors.border }}>
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
-                </svg>
-                <p className="text-sm font-medium mb-1" style={{ color: colors.text.primary }}>
-                  Drop CSV here, or click to browse
-                </p>
-                <p className="text-xs" style={{ color: colors.text.secondary }}>
-                  Format: <span className="font-mono" style={{ color: colors.text.primary }}>question,answer</span>
-                </p>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Bottom Action Bar */}
-        <div className="flex-shrink-0 border-t px-4 py-3 flex items-center justify-end gap-3" style={{ borderColor: colors.border, backgroundColor: colors.bg.primary }}>
-          <button
-            onClick={resetForm}
-            className="px-4 py-2 rounded-lg text-sm font-medium"
-            style={{ color: colors.text.secondary }}
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleCreateDataset}
-            disabled={!uploadedFile || !datasetName.trim() || isUploading}
-            className="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium"
-            style={{
-              backgroundColor: (!uploadedFile || !datasetName.trim() || isUploading) ? colors.bg.secondary : colors.accent.primary,
-              color: (!uploadedFile || !datasetName.trim() || isUploading) ? colors.text.secondary : '#fff',
-              cursor: (!uploadedFile || !datasetName.trim() || isUploading) ? 'not-allowed' : 'pointer',
-            }}
-          >
-            {isUploading ? (
-              <>
-                <div className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin" style={{ borderColor: colors.text.secondary, borderTopColor: 'transparent' }} />
-                Creating...
-              </>
-            ) : (
-              'Create Dataset'
-            )}
-          </button>
-        </div>
-      </div>
-
-      {/* Right Panel - Dataset List */}
-      <div className="flex-1 flex flex-col overflow-hidden" style={{ backgroundColor: colors.bg.secondary }}>
-        <div className="flex-1 overflow-auto p-6">
-          <div className="flex items-center justify-between mb-4">
-            <h3 className="text-base font-semibold" style={{ color: colors.text.primary }}>
-              Datasets
-            </h3>
-          </div>
-
-          {storedDatasets.length === 0 ? (
-            <div className="p-16 text-center">
-              <svg className="w-12 h-12 mx-auto mb-3" style={{ color: colors.border }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 7v10c0 2 3.6 3 8 3s8-1 8-3V7M4 7c0 2 3.6 3 8 3s8-1 8-3M4 7c0-2 3.6-3 8-3s8 1 8 3M4 12c0 2 3.6 3 8 3s8-1 8-3" />
-              </svg>
-              <p className="text-sm font-medium mb-1" style={{ color: colors.text.primary }}>No datasets yet</p>
-              <p className="text-xs" style={{ color: colors.text.secondary }}>Create your first dataset using the form on the left</p>
-            </div>
-          ) : (
-            <div className="space-y-3">
-              {storedDatasets.map((dataset) => (
-                <div
-                  key={dataset.dataset_id}
-                  className="rounded-lg overflow-hidden"
-                  style={{
-                    backgroundColor: colors.bg.primary,
-                    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.04)',
-                    borderLeft: '3px solid #DCCFC3',
-                  }}
-                >
-                  <div className="px-5 py-4">
-                    <div className="flex items-start justify-between gap-4">
-                      <div className="min-w-0 flex-1">
-                        <div className="text-sm font-semibold truncate" style={{ color: colors.text.primary }}>
-                          {dataset.dataset_name}
-                        </div>
-                        {dataset.description && (
-                          <EvalDatasetDescription description={dataset.description} />
-                        )}
-                        <div className="flex items-center gap-3 mt-2 text-xs" style={{ color: colors.text.secondary }}>
-                          <span>{dataset.total_items} items</span>
-                          {dataset.duplication_factor > 1 && (
-                            <>
-                              <span style={{ color: colors.border }}>·</span>
-                              <span>x{dataset.duplication_factor} duplication</span>
-                            </>
-                          )}
-                          {dataset.original_items > 0 && dataset.original_items !== dataset.total_items && (
-                            <>
-                              <span style={{ color: colors.border }}>·</span>
-                              <span>{dataset.original_items} original</span>
-                            </>
-                          )}
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-2 flex-shrink-0">
-                        <button
-                          onClick={() => handleViewDataset(dataset.dataset_id, dataset.dataset_name)}
-                          disabled={viewingId === dataset.dataset_id}
-                          className="px-3 py-1.5 rounded-lg text-xs font-medium border"
-                          style={{
-                            backgroundColor: 'transparent',
-                            borderColor: colors.border,
-                            color: colors.text.primary,
-                            opacity: viewingId === dataset.dataset_id ? 0.5 : 1,
-                          }}
-                        >
-                          {viewingId === dataset.dataset_id ? 'Loading...' : 'View'}
-                        </button>
-                        <button
-                          onClick={() => setConfirmDeleteId(dataset.dataset_id)}
-                          className="px-3 py-1.5 rounded-lg text-xs font-medium border"
-                          style={{ backgroundColor: 'transparent', borderColor: colors.border, color: 'hsl(8, 86%, 40%)' }}
-                        >
-                          Delete
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* View Dataset Modal */}
-      {viewModalData && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center"
-          style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
-          onClick={() => setViewModalData(null)}
-        >
-          <div
-            className="rounded-lg shadow-xl flex flex-col"
-            style={{ backgroundColor: colors.bg.primary, width: '80vw', maxWidth: '1000px', maxHeight: '80vh' }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {/* Modal Header */}
-            <div className="flex items-center justify-between px-6 py-4 border-b flex-shrink-0" style={{ borderColor: colors.border }}>
-              <div>
-                <h3 className="text-sm font-semibold" style={{ color: colors.text.primary }}>
-                  {viewModalData.name}
-                </h3>
-                <p className="text-xs mt-0.5" style={{ color: colors.text.secondary }}>
-                  {viewModalData.rows.length} rows · {viewModalData.headers.length} columns
-                </p>
-              </div>
-              <div className="flex items-center gap-2">
-                <button
-                  onClick={handleDownloadFromModal}
-                  className="px-3 py-1.5 rounded-md text-xs font-medium"
-                  style={{ backgroundColor: colors.accent.primary, color: '#ffffff' }}
-                >
-                  Download CSV
-                </button>
-                <button
-                  onClick={() => setViewModalData(null)}
-                  className="p-1.5 rounded"
-                  style={{ color: colors.text.secondary }}
-                  aria-label="Close modal"
-                >
-                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                  </svg>
-                </button>
-              </div>
-            </div>
-
-            {/* Modal Body - Table */}
-            <div className="flex-1 overflow-auto">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr style={{ backgroundColor: colors.bg.secondary, borderBottom: `1px solid ${colors.border}` }}>
-                    <th className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0" style={{ color: colors.text.secondary, backgroundColor: colors.bg.secondary, width: '40px' }}>
-                    </th>
-                    {viewModalData.headers.map((header, i) => (
-                      <th key={i} className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0" style={{ color: colors.text.secondary, backgroundColor: colors.bg.secondary }}>
-                        {header}
-                      </th>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody>
-                  {viewModalData.rows.map((row, rowIdx) => (
-                    <tr key={rowIdx} style={{ borderBottom: `1px solid ${colors.border}` }}>
-                      <td className="px-4 py-2.5 text-xs" style={{ color: colors.text.secondary }}>
-                        {rowIdx + 1}
-                      </td>
-                      {row.map((cell, cellIdx) => (
-                        <td key={cellIdx} className="px-4 py-2.5" style={{ color: colors.text.primary }}>
-                          <div className="text-sm" style={{ maxHeight: '120px', overflow: 'auto', lineHeight: '1.5' }}>
-                            {cell || <span style={{ color: colors.text.secondary }}>—</span>}
-                          </div>
-                        </td>
-                      ))}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      )}
-      {/* Delete Confirmation Modal */}
-      {confirmDeleteId !== null && (() => {
-        const dataset = storedDatasets.find(d => d.dataset_id === confirmDeleteId);
-        return (
-          <div
-            className="fixed inset-0 z-50 flex items-center justify-center"
-            style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
-            onClick={() => setConfirmDeleteId(null)}
-          >
-            <div
-              className="rounded-lg shadow-xl w-full max-w-md"
-              style={{ backgroundColor: colors.bg.primary }}
-              onClick={(e) => e.stopPropagation()}
-            >
-              <div className="px-6 py-5">
-                <div className="flex items-start gap-3">
-                  <div className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0" style={{ backgroundColor: 'rgba(220, 38, 38, 0.1)' }}>
-                    <svg className="w-5 h-5" style={{ color: 'hsl(8, 86%, 40%)' }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01M5.07 19h13.86c1.54 0 2.5-1.67 1.73-3L13.73 4c-.77-1.33-2.69-1.33-3.46 0L3.34 16c-.77 1.33.19 3 1.73 3z" />
-                    </svg>
-                  </div>
-                  <div>
-                    <h3 className="text-sm font-semibold" style={{ color: colors.text.primary }}>
-                      Delete dataset
-                    </h3>
-                    <p className="text-sm mt-1" style={{ color: colors.text.secondary }}>
-                      Are you sure you want to delete <strong style={{ color: colors.text.primary }}>{dataset?.dataset_name}</strong>? This action cannot be undone.
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div className="flex items-center justify-end gap-3 px-6 py-4 border-t" style={{ borderColor: colors.border }}>
-                <button
-                  onClick={() => setConfirmDeleteId(null)}
-                  className="px-4 py-2 rounded-lg text-sm font-medium border"
-                  style={{ backgroundColor: 'transparent', borderColor: colors.border, color: colors.text.primary }}
-                >
-                  Cancel
-                </button>
-                <button
-                  onClick={() => { handleDeleteDataset(confirmDeleteId); setConfirmDeleteId(null); }}
-                  disabled={deletingId === confirmDeleteId}
-                  className="px-4 py-2 rounded-lg text-sm font-medium"
-                  style={{ backgroundColor: 'hsl(8, 86%, 40%)', color: '#ffffff', opacity: deletingId === confirmDeleteId ? 0.5 : 1 }}
-                >
-                  {deletingId === confirmDeleteId ? 'Deleting...' : 'Delete'}
-                </button>
-              </div>
-            </div>
-          </div>
-        );
-      })()}
-    </div>
-  );
-}
-
-// ============ EVALUATIONS TAB COMPONENT ============
-interface EvaluationsTabProps {
-  leftPanelWidth: number;
-  apiKeys: APIKey[];
-  selectedKeyId: string;
-  storedDatasets: Dataset[];
-  selectedDatasetId: string;
-  setSelectedDatasetId: (id: string) => void;
-  selectedConfigId: string;
-  selectedConfigVersion: number;
-  onConfigSelect: (configId: string, configVersion: number) => void;
-  experimentName: string;
-  setExperimentName: (name: string) => void;
-  isEvaluating: boolean;
-  handleRunEvaluation: () => Promise<boolean>;
-  setActiveTab: (tab: Tab) => void;
-}
-
-function EvaluationsTab({
-  leftPanelWidth,
-  apiKeys,
-  selectedKeyId,
-  storedDatasets,
-  selectedDatasetId,
-  setSelectedDatasetId,
-  selectedConfigId,
-  selectedConfigVersion,
-  onConfigSelect,
-  experimentName,
-  setExperimentName,
-  isEvaluating,
-  handleRunEvaluation,
-  setActiveTab,
-}: EvaluationsTabProps) {
-  const router = useRouter();
-  const [evalJobs, setEvalJobs] = useState<EvalJob[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [assistantConfigs, setAssistantConfigs] = useState<Map<string, AssistantConfig>>(new Map());
-  const [statusFilter, setStatusFilter] = useState<string>('all');
-
-  const selectedDataset = storedDatasets.find(d => d.dataset_id.toString() === selectedDatasetId);
-  const canRun = experimentName.trim() && selectedDatasetId && selectedConfigId && selectedConfigVersion && !isEvaluating;
-
-  // Fetch evaluation jobs
-  const fetchEvaluations = useCallback(async () => {
-    if (!selectedKeyId) {
-      setError('Please select an API key first');
-      return;
-    }
-    const selectedKey = apiKeys.find(k => k.id === selectedKeyId);
-    if (!selectedKey) {
-      setError('Selected API key not found');
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const response = await fetch('/api/evaluations', {
-        method: 'GET',
-        headers: { 'X-API-KEY': selectedKey.key },
-      });
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || errorData.message || `Failed to fetch evaluations: ${response.status}`);
-      }
-      const data = await response.json();
-      setEvalJobs(Array.isArray(data) ? data : (data.data || []));
-    } catch (err: any) {
-      setError(err.message || 'Failed to fetch evaluation jobs');
-    } finally {
-      setIsLoading(false);
-    }
-  }, [apiKeys, selectedKeyId]);
-
-  // Fetch assistant config
-  const fetchAssistantConfig = useCallback(async (assistantId: string) => {
-    if (!selectedKeyId) return;
-    const selectedKey = apiKeys.find(k => k.id === selectedKeyId);
-    if (!selectedKey) return;
-
-    try {
-      const response = await fetch(`/api/assistant/${assistantId}`, {
-        method: 'GET',
-        headers: { 'X-API-KEY': selectedKey.key },
-      });
-      if (!response.ok) return;
-      const result = await response.json();
-      if (result.success && result.data) {
-        setAssistantConfigs(prev => new Map(prev).set(assistantId, result.data));
-      }
-    } catch (err) {
-      console.error(`Failed to fetch assistant config for ${assistantId}:`, err);
-    }
-  }, [apiKeys, selectedKeyId]);
-
-  useEffect(() => {
-    evalJobs.forEach(job => {
-      if (job.assistant_id && !assistantConfigs.has(job.assistant_id)) {
-        fetchAssistantConfig(job.assistant_id);
-      }
-    });
-  }, [evalJobs, assistantConfigs, fetchAssistantConfig]);
-
-  useEffect(() => {
-    if (selectedKeyId) fetchEvaluations();
-  }, [selectedKeyId, fetchEvaluations]);
-
-  return (
-    <div className="flex-1 flex overflow-hidden">
-      {/* Left Panel - Configuration */}
-      <div
-        className="flex-shrink-0 border-r flex flex-col overflow-hidden"
-        style={{ width: `${leftPanelWidth}px`, backgroundColor: colors.bg.primary, borderColor: colors.border }}
-      >
-        <div className="flex-1 overflow-auto p-4 space-y-4">
-          {/* Page Title */}
-          <div>
-            <h2 className="text-base font-semibold" style={{ color: colors.text.primary }}>
-              Run New Evaluation
-            </h2>
-            <p className="text-xs mt-0.5" style={{ color: colors.text.secondary }}>
-              Test model responses against your golden datasets
-            </p>
-          </div>
-
-          {/* Evaluation Name */}
-          <div>
-            <label className="block text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
-              Name *
-            </label>
-            <input
-              type="text"
-              value={experimentName}
-              onChange={e => setExperimentName(e.target.value)}
-              placeholder="e.g., test_run_1"
-              disabled={isEvaluating}
-              className="w-full px-3 py-2 border rounded-md text-sm"
-              style={{
-                backgroundColor: isEvaluating ? colors.bg.secondary : colors.bg.primary,
-                borderColor: colors.border,
-                color: colors.text.primary,
-              }}
-            />
-          </div>
-
-          {/* Config Selector */}
-          <ConfigSelector
-            selectedConfigId={selectedConfigId}
-            selectedVersion={selectedConfigVersion}
-            onConfigSelect={onConfigSelect}
-            disabled={isEvaluating}
-            compact
-            datasetId={selectedDatasetId}
-            experimentName={experimentName}
-          />
-
-          {/* Dataset Selection */}
-          <div className="pt-2">
-            <label className="block text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
-              Select Dataset *
-            </label>
-            {storedDatasets.length === 0 ? (
-              <div className="border rounded-md p-8 text-center" style={{ borderColor: colors.border }}>
-                <p className="text-sm" style={{ color: colors.text.secondary }}>No datasets available</p>
-                <p className="text-xs mt-1" style={{ color: colors.text.secondary }}>
-                  Create a dataset first in the Datasets tab
-                </p>
-              </div>
-            ) : (
-              <div className="relative">
-                <select
-                  value={selectedDatasetId}
-                  onChange={e => setSelectedDatasetId(e.target.value)}
-                  className="w-full px-3 py-2 border rounded-md text-sm appearance-none pr-8"
-                  style={{
-                    backgroundColor: colors.bg.primary,
-                    borderColor: colors.border,
-                    color: selectedDatasetId ? colors.text.primary : colors.text.secondary,
-                  }}
-                >
-                  <option value="">-- Select a dataset --</option>
-                  {storedDatasets.map(dataset => (
-                    <option key={dataset.dataset_id} value={dataset.dataset_id}>
-                      {dataset.dataset_name} ({dataset.total_items} items)
-                    </option>
-                  ))}
-                </select>
-                <svg
-                  className="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none"
-                  style={{ color: colors.text.secondary }}
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                </svg>
-              </div>
-            )}
-          </div>
-
-          {/* Selected Dataset Info */}
-          {selectedDataset && (
-            <div className="border rounded-lg p-3" style={{ borderColor: colors.status.success, backgroundColor: 'rgba(22, 163, 74, 0.02)' }}>
-              <div className="flex items-start gap-2">
-                <svg className="w-5 h-5 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: colors.status.success }}>
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-                <div className="flex-1">
-                  <div className="text-sm font-medium" style={{ color: colors.text.primary }}>
-                    {selectedDataset.dataset_name}
-                  </div>
-                  {selectedDataset.description && (
-                    <EvalDatasetDescription description={selectedDataset.description} />
-                  )}
-                  <div className="text-xs mt-1" style={{ color: colors.text.secondary }}>
-                    {selectedDataset.total_items} items · x{selectedDataset.duplication_factor} duplication
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Run Evaluation Button */}
-        <div className="flex-shrink-0 border-t px-4 py-3" style={{ borderColor: colors.border, backgroundColor: colors.bg.primary }}>
-          <button
-            onClick={async () => {
-              const success = await handleRunEvaluation();
-              if (success) fetchEvaluations();
-            }}
-            disabled={!canRun}
-            className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium"
-            style={{
-              backgroundColor: canRun ? colors.accent.primary : colors.bg.secondary,
-              color: canRun ? '#fff' : colors.text.secondary,
-              cursor: canRun ? 'pointer' : 'not-allowed',
-            }}
-          >
-            {isEvaluating ? (
-              <>
-                <div className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin" style={{ borderColor: colors.text.secondary, borderTopColor: 'transparent' }} />
-                Running Evaluation...
-              </>
-            ) : (
-              <>
-                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                  <path d="M8 5v14l11-7z" />
-                </svg>
-                Run Evaluation
-              </>
-            )}
-          </button>
-        </div>
-      </div>
-
-      {/* Right Panel - Evaluation Runs */}
-      <div className="flex-1 flex flex-col overflow-hidden" style={{ backgroundColor: colors.bg.secondary }}>
-        <div className="flex-1 overflow-auto p-4">
-          {/* Header */}
-          <div className="mb-4 flex items-center justify-between">
-            <h2 className="text-base font-semibold" style={{ color: colors.text.primary }}>
-              Evaluation Runs
-            </h2>
-            <div className="flex items-center gap-2">
-              <select
-                value={statusFilter}
-                onChange={(e) => setStatusFilter(e.target.value)}
-                className="px-2.5 py-1 rounded-md text-xs font-medium border appearance-none cursor-pointer pr-7"
-                style={{
-                  backgroundColor: colors.bg.primary,
-                  borderColor: colors.border,
-                  color: colors.text.primary,
-                  backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")`,
-                  backgroundRepeat: 'no-repeat',
-                  backgroundPosition: 'right 6px center',
-                }}
-              >
-                <option value="all">All Status</option>
-                <option value="completed">Completed</option>
-                <option value="processing">Processing</option>
-                <option value="pending">Pending</option>
-                <option value="failed">Failed</option>
-              </select>
-              <button
-                onClick={fetchEvaluations}
-                disabled={isLoading}
-                className="p-1.5 rounded"
-                style={{ color: colors.text.secondary }}
-                aria-label="Refresh evaluations"
-              >
-                <svg
-                  className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`}
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                </svg>
-              </button>
-            </div>
-          </div>
-
-          <div className="rounded-lg overflow-visible" style={{ backgroundColor: colors.bg.primary, boxShadow: '0 1px 3px rgba(0, 0, 0, 0.04)' }}>
-            {/* Loading */}
-            {isLoading && evalJobs.length === 0 && (
-              <div className="p-16">
-                <Loader size="md" message="Loading evaluation runs..." />
-              </div>
-            )}
-
-            {/* Error */}
-            {error && (
-              <div className="p-4">
-                <div className="rounded-lg p-3" style={{ backgroundColor: 'hsl(8, 86%, 95%)' }}>
-                  <p className="text-sm" style={{ color: 'hsl(8, 86%, 40%)' }}>Error: {error}</p>
-                </div>
-              </div>
-            )}
-
-            {/* Empty State */}
-            {!isLoading && evalJobs.length === 0 && !error && (
-              <div className="p-16 text-center">
-                <svg className="w-12 h-12 mx-auto mb-3" style={{ color: colors.border }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
-                </svg>
-                <p className="text-sm font-medium mb-1" style={{ color: colors.text.primary }}>No evaluation runs yet</p>
-                <p className="text-xs" style={{ color: colors.text.secondary }}>Select a dataset and configuration, then run your first evaluation</p>
-              </div>
-            )}
-
-            {/* Runs List */}
-            {evalJobs.length > 0 && (() => {
-              const filteredJobs = statusFilter === 'all'
-                ? evalJobs
-                : evalJobs.filter(job => job.status.toLowerCase() === statusFilter);
-              return filteredJobs.length > 0 ? (
-                <div className="p-4 space-y-3">
-                  {filteredJobs.map((job) => (
-                    <EvalRunCard
-                      key={job.id}
-                      job={job}
-                      assistantConfig={job.assistant_id ? assistantConfigs.get(job.assistant_id) : undefined}
-                    />
-                  ))}
-                </div>
-              ) : (
-                <div className="p-16 text-center">
-                  <p className="text-sm font-medium mb-1" style={{ color: colors.text.primary }}>No {statusFilter} runs</p>
-                  <p className="text-xs" style={{ color: colors.text.secondary }}>No evaluation runs with status "{statusFilter}"</p>
-                </div>
-              );
-            })()}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ============ EVAL RUN CARD COMPONENT ============
-interface EvalRunCardProps {
-  job: EvalJob;
-  assistantConfig?: AssistantConfig;
-}
-
-function EvalRunCard({ job, assistantConfig }: EvalRunCardProps) {
-  const router = useRouter();
-  const [isConfigModalOpen, setIsConfigModalOpen] = useState(false);
-
-  const isCompleted = job.status?.toLowerCase() === 'completed';
-  const scoreObj = getScoreObject(job);
-  const statusColor = getStatusColor(job.status || '');
-
-  return (
-    <div
-      className="rounded-lg overflow-hidden"
-      style={{
-        backgroundColor: colors.bg.primary,
-        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.04)',
-        borderLeft: `3px solid ${statusColor.border}`,
-      }}
-    >
-      <div className="px-5 py-4">
-        {/* Row 1: Run Name (left) | Status (right) */}
-        <div className="flex items-start justify-between gap-4">
-          <div className="min-w-0 flex-1">
-            <div className="text-sm font-semibold truncate" style={{ color: colors.text.primary }}>
-              {job.run_name}
-            </div>
-            {/* Error message (if failed) */}
-            {job.error_message && (
-              <div className="mt-2 text-xs break-words overflow-hidden" style={{ color: 'hsl(8, 86%, 40%)' }}>
-                {job.error_message}
-              </div>
-            )}
-          </div>
-          <span
-            className="px-2.5 py-1 rounded text-xs font-semibold uppercase tracking-wide flex-shrink-0"
-            style={{ backgroundColor: statusColor.bg, color: statusColor.text }}
-          >
-            {job.status}
-          </span>
-        </div>
-
-        {/* Row 2: Scores */}
-        {scoreObj && (
-          <div className="mt-3">
-            <ScoreDisplay score={scoreObj} errorMessage={job.error_message} />
-          </div>
-        )}
-
-        {/* Row 3: Dataset + Config (left) | Actions (right) */}
-        <div className="flex items-center justify-between gap-4 mt-3">
-          <div className="flex items-center gap-3 text-xs" style={{ color: colors.text.secondary }}>
-            {job.dataset_name && (
-              <span className="flex items-center gap-1.5">
-                <svg className="w-3.5 h-3.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M4 7v10c0 2 3.6 3 8 3s8-1 8-3V7M4 7c0 2 3.6 3 8 3s8-1 8-3M4 7c0-2 3.6-3 8-3s8 1 8 3M4 12c0 2 3.6 3 8 3s8-1 8-3" />
-                </svg>
-                {job.dataset_name}
-              </span>
-            )}
-            {job.assistant_id && assistantConfig?.name && (
-              <span className="px-1.5 py-0.5 rounded" style={{ backgroundColor: colors.bg.secondary }}>
-                {assistantConfig.name}
-              </span>
-            )}
-          </div>
-          <div className="flex items-center gap-3 flex-shrink-0">
-            <button
-              onClick={() => setIsConfigModalOpen(true)}
-              className="px-3 py-1.5 rounded-lg text-xs font-medium border"
-              style={{
-                backgroundColor: 'transparent',
-                borderColor: colors.border,
-                color: colors.text.primary,
-              }}
-            >
-              View Config
-            </button>
-            <button
-              onClick={() => router.push(`/evaluations/${job.id}`)}
-              disabled={!isCompleted}
-              className="px-3 py-1.5 rounded-lg text-xs font-medium border"
-              style={{
-                backgroundColor: 'transparent',
-                borderColor: colors.border,
-                color: isCompleted ? colors.text.primary : colors.text.secondary,
-                cursor: isCompleted ? 'pointer' : 'not-allowed',
-                opacity: isCompleted ? 1 : 0.5,
-              }}
-            >
-              View Results
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <ConfigModal
-        isOpen={isConfigModalOpen}
-        onClose={() => setIsConfigModalOpen(false)}
-        job={job}
-        assistantConfig={assistantConfig}
-      />
-    </div>
-  );
-}
-
 // Wrapper component with Suspense
 export default function SimplifiedEval() {
   return (
