Enhance Evaluation Detail Page with Scoring Status Indicators & Resync Warning

app/(routes)/evaluations/page.tsx

@@ -53,6 +53,7 @@ function SimplifiedEvalContent() {
 
   // Stored datasets
   const [storedDatasets, setStoredDatasets] = useState<Dataset[]>([]);
+  const [isDatasetsLoading, setIsDatasetsLoading] = useState(false);
 
   // Evaluation config state
   const [selectedDatasetId, setSelectedDatasetId] = useState<string>(() => {
@@ -86,6 +87,7 @@ function SimplifiedEvalContent() {
       console.error("No selected API key found for loading datasets");
       return;
     }
+    setIsDatasetsLoading(true);
     try {
       const response = await fetch("/api/evaluations/datasets", {
         method: "GET",
@@ -96,6 +98,8 @@ function SimplifiedEvalContent() {
       setStoredDatasets(Array.isArray(data) ? data : data.data || []);
     } catch (e) {
       console.error("Failed to load datasets:", e);
+    } finally {
+      setIsDatasetsLoading(false);
     }
   }, [apiKeys, selectedKeyId]);
 
@@ -426,6 +430,7 @@ function SimplifiedEvalContent() {
                 setUploadedFile(null);
               }}
               storedDatasets={storedDatasets}
+              isDatasetsLoading={isDatasetsLoading}
               apiKeys={apiKeys}
               selectedKeyId={selectedKeyId}
               loadStoredDatasets={loadStoredDatasets}

app/components/evaluations/DatasetsTab.tsx

@@ -6,6 +6,7 @@ import { APIKey } from "@/app/lib/types/credentials";
 import { Dataset } from "@/app/(routes)/datasets/page";
 import { useToast } from "@/app/components/Toast";
 import EvalDatasetDescription from "./EvalDatasetDescription";
+import Loader from "@/app/components/Loader";
 
 export interface DatasetsTabProps {
   leftPanelWidth: number;
@@ -22,6 +23,7 @@ export interface DatasetsTabProps {
   handleCreateDataset: () => void;
   resetForm: () => void;
   storedDatasets: Dataset[];
+  isDatasetsLoading: boolean;
   apiKeys: APIKey[];
   selectedKeyId: string;
   loadStoredDatasets: () => void;
@@ -43,6 +45,7 @@ export default function DatasetsTab({
   handleCreateDataset,
   resetForm,
   storedDatasets,
+  isDatasetsLoading,
   apiKeys,
   selectedKeyId,
   loadStoredDatasets,
@@ -559,7 +562,11 @@ export default function DatasetsTab({
             </h3>
           </div>
 
-          {storedDatasets.length === 0 ? (
+          {isDatasetsLoading ? (
+            <div className="p-16 flex justify-center">
+              <Loader size="md" message="Loading datasets..." />
+            </div>
+          ) : storedDatasets.length === 0 ? (
             <div className="p-16 text-center">
               <svg
                 className="w-12 h-12 mx-auto mb-3"

app/components/icons/evaluations/ChevronLeftIcon.tsx

@@ -0,0 +1,19 @@
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function ChevronLeftIcon({ className, style }: IconProps) {
+  return (
+    <svg
+      className={`w-5 h-5 ${className ?? ""}`}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+      style={style}
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+    </svg>
+  );
+}

app/components/icons/evaluations/DatabaseIcon.tsx

@@ -0,0 +1,23 @@
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function DatabaseIcon({ 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="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>
+  );
+}

app/components/icons/evaluations/GroupIcon.tsx

@@ -0,0 +1,23 @@
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function GroupIcon({ 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 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+      />
+    </svg>
+  );
+}

app/components/icons/evaluations/MenuIcon.tsx

@@ -0,0 +1,23 @@
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function MenuIcon({ className, style }: IconProps) {
+  return (
+    <svg
+      className={className ?? "w-5 h-5"}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+      style={style}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M4 6h16M4 12h16M4 18h16"
+      />
+    </svg>
+  );
+}

app/components/icons/evaluations/RefreshIcon.tsx

@@ -0,0 +1,23 @@
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function RefreshIcon({ 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="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>
+  );
+}

app/components/icons/evaluations/WarningTriangleIcon.tsx

@@ -0,0 +1,23 @@
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function WarningTriangleIcon({ 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="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
+      />
+    </svg>
+  );
+}

app/components/icons/index.tsx

@@ -1,6 +1,12 @@
 // Evaluations Icons
 export { default as ChevronUpIcon } from "./evaluations/ChevronUpIcon";
 export { default as ChevronDownIcon } from "./evaluations/ChevronDownIcon";
+export { default as ChevronLeftIcon } from "./evaluations/ChevronLeftIcon";
 export { default as EditIcon } from "./evaluations/EditIcon";
 export { default as GearIcon } from "./evaluations/GearIcon";
 export { default as CheckIcon } from "./evaluations/CheckIcon";
+export { default as WarningTriangleIcon } from "./evaluations/WarningTriangleIcon";
+export { default as MenuIcon } from "./evaluations/MenuIcon";
+export { default as DatabaseIcon } from "./evaluations/DatabaseIcon";
+export { default as GroupIcon } from "./evaluations/GroupIcon";
+export { default as RefreshIcon } from "./evaluations/RefreshIcon";

app/globals.css

@@ -19,6 +19,36 @@
   --font-mono: var(--font-geist-mono);
 }
 
+/* Background colors */
+@theme inline {
+  --color-bg-primary: #ffffff;
+  --color-bg-secondary: #fafafa;
+}
+
+/* Text colors */
+@theme inline {
+  --color-text-primary: #171717;
+  --color-text-secondary: #737373;
+}
+
+/* Border colors */
+@theme inline {
+  --color-border: #e5e5e5;
+}
+
+/* Accent colors */
+@theme inline {
+  --color-accent-primary: #171717;
+  --color-accent-hover: #404040;
+}
+
+/* Status colors */
+@theme inline {
+  --color-status-success: #16a34a;
+  --color-status-error: #dc2626;
+  --color-status-warning: #f59e0b;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #000000;