Refactor StatusIndicator component to accept status prop, enhancing flexibility for displaying connection and evaluation statuses. Update App and Row components to utilize the new StatusIndicator implementation.

Author: Dylan Huang

vite-app/src/App.tsx

@@ -123,7 +123,9 @@ const App = observer(() => {
               <img src={logoLight} alt="Eval Protocol" className="h-6 w-auto" />
             </div>
             <div className="flex items-center gap-2">
-              <StatusIndicator isConnected={state.isConnected} />
+              <StatusIndicator
+                status={state.isConnected ? "connected" : "disconnected"}
+              />
               <Button onClick={handleManualRefresh} className="ml-2">
                 Refresh
               </Button>

vite-app/src/components/Row.tsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import type { EvaluationRow } from "../types/eval-protocol";
 import { ChatInterface } from "./ChatInterface";
 import { MetadataSection } from "./MetadataSection";
+import StatusIndicator from "./StatusIndicator";
 
 export const Row = observer(
   ({ row }: { row: EvaluationRow; index: number }) => {
@@ -59,19 +60,7 @@ export const Row = observer(
 
           {/* Status */}
           <td className="px-3 py-3 text-xs">
-            <span
-              className={`px-2 py-1 rounded text-xs font-medium ${
-                row.eval_metadata?.status === "finished"
-                  ? "bg-green-100 text-green-800"
-                  : row.eval_metadata?.status === "running"
-                  ? "bg-blue-100 text-blue-800"
-                  : row.eval_metadata?.status === "error"
-                  ? "bg-red-100 text-red-800"
-                  : "bg-gray-100 text-gray-800"
-              }`}
-            >
-              {row.eval_metadata?.status || "N/A"}
-            </span>
+            <StatusIndicator status={row.eval_metadata?.status || "N/A"} />
           </td>
 
           {/* Row ID */}

vite-app/src/components/StatusIndicator.tsx

@@ -1,27 +1,63 @@
 import React from "react";
 
 interface StatusIndicatorProps {
-  isConnected: boolean;
+  status: string;
   className?: string;
 }
 
 const StatusIndicator: React.FC<StatusIndicatorProps> = ({
-  isConnected,
+  status,
   className = "",
 }) => {
+  const getStatusConfig = (status: string) => {
+    switch (status.toLowerCase()) {
+      case "connected":
+        return {
+          dotColor: "bg-green-500",
+          textColor: "text-green-700",
+          text: "Connected",
+        };
+      case "disconnected":
+        return {
+          dotColor: "bg-red-500",
+          textColor: "text-red-700",
+          text: "Disconnected",
+        };
+      case "finished":
+        return {
+          dotColor: "bg-green-500",
+          textColor: "text-green-700",
+          text: "finished",
+        };
+      case "running":
+        return {
+          dotColor: "bg-blue-500",
+          textColor: "text-blue-700",
+          text: "running",
+        };
+      case "error":
+        return {
+          dotColor: "bg-red-500",
+          textColor: "text-red-700",
+          text: "error",
+        };
+      default:
+        return {
+          dotColor: "bg-gray-500",
+          textColor: "text-gray-700",
+          text: status,
+        };
+    }
+  };
+
+  const config = getStatusConfig(status);
+
   return (
     <div
-      className={`inline-flex items-center px-2 py-0.5 border text-xs font-medium ${className}`}
-      style={{ boxShadow: "none" }}
+      className={`inline-flex items-center gap-1.5 text-xs font-medium ${config.textColor} ${className}`}
     >
-      <div
-        className={`w-1 h-1 border mr-1 ${
-          isConnected
-            ? "bg-green-500 border-green-500"
-            : "bg-red-500 border-red-500"
-        }`}
-      />
-      {isConnected ? "Connected" : "Disconnected"}
+      <div className={`w-1.5 h-1.5 rounded-full ${config.dotColor}`} />
+      {config.text}
     </div>
   );
 };