looks good

Author: Dylan Huang

vite-app/src/App.tsx

@@ -2,6 +2,8 @@ import { useEffect, useRef } from "react";
 import { makeAutoObservable } from "mobx";
 import { observer } from "mobx-react";
 import Dashboard from "./components/Dashboard";
+import Button from "./components/Button";
+import StatusIndicator from "./components/StatusIndicator";
 import { EvaluationRowSchema, type EvaluationRow } from "./types/eval-protocol";
 import { WebSocketServerMessageSchema } from "./types/websocket";
 
@@ -97,6 +99,18 @@ const App = observer(() => {
     }, delay);
   };
 
+  // Manual refresh handler
+  const handleManualRefresh = () => {
+    if (wsRef.current) {
+      try {
+        wsRef.current.onclose = null; // Prevent triggering reconnect logic
+        wsRef.current.close();
+      } catch (e) {}
+      wsRef.current = null;
+    }
+    connectWebSocket();
+  };
+
   useEffect(() => {
     connectWebSocket();
 
@@ -120,21 +134,11 @@ const App = observer(() => {
                 Eval Protocol Logs
               </h1>
             </div>
-            <div className="flex items-center">
-              <div
-                className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${
-                  state.isConnected
-                    ? "bg-green-100 text-green-700"
-                    : "bg-red-100 text-red-700"
-                }`}
-              >
-                <div
-                  className={`w-1 h-1 rounded-full mr-1 ${
-                    state.isConnected ? "bg-green-500" : "bg-red-500"
-                  }`}
-                ></div>
-                {state.isConnected ? "Connected" : "Disconnected"}
-              </div>
+            <div className="flex items-center gap-2">
+              <StatusIndicator isConnected={state.isConnected} />
+              <Button onClick={handleManualRefresh} className="ml-2">
+                Refresh
+              </Button>
             </div>
           </div>
         </div>

vite-app/src/components/Button.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary";
+  size?: "sm" | "md";
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    { className = "", variant = "secondary", size = "sm", children, ...props },
+    ref
+  ) => {
+    const baseClasses = "border text-xs font-medium focus:outline-none";
+
+    const variantClasses = {
+      primary: "border-gray-300 bg-gray-100 text-gray-700 hover:bg-gray-200",
+      secondary: "border-gray-300 bg-gray-100 text-gray-700 hover:bg-gray-200",
+    };
+
+    const sizeClasses = {
+      sm: "px-2 py-0.5",
+      md: "px-3 py-1",
+    };
+
+    return (
+      <button
+        ref={ref}
+        className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
+        style={{ boxShadow: "none" }}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = "Button";
+
+export default Button;