Major UI update

web/src/components/Header.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { WebSocketState, AgentState, Tabs } from '../constants';
+
+export const Header = ({ 
+  wsState, 
+  agentState, 
+  activeTab, 
+  setActiveTab, 
+}) => (
+  <header className="bg-white shadow-sm">
+    <div className="flex items-center justify-between px-4 py-3">
+      <div className="flex items-center space-x-4">
+        <h1 className="text-xl font-semibold">SIA Control Interface</h1>
+      </div>
+      <div className="flex items-center space-x-2">
+        <div className={`px-3 py-1 rounded-full text-sm ${
+          wsState === WebSocketState.CONNECTED 
+            ? 'bg-green-100 text-green-800'
+            : wsState === WebSocketState.CONNECTING
+            ? 'bg-yellow-100 text-yellow-800'
+            : 'bg-red-100 text-red-800'
+        }`}>
+          {wsState}
+        </div>
+        <div className="px-3 py-1 rounded-full bg-blue-100 text-blue-800 text-sm">
+          {agentState}
+        </div>
+      </div>
+    </div>
+    <div className="border-t">
+      <div className="flex px-4">
+        {Object.values(Tabs).map((tab) => (
+          <button
+            key={tab}
+            onClick={() => setActiveTab(tab)}
+            className={`px-4 py-2 font-medium text-sm border-b-2 ${
+              activeTab === tab
+                ? 'border-blue-500 text-blue-600'
+                : 'border-transparent text-gray-500 hover:text-gray-700'
+            }`}
+          >
+            {tab.charAt(0).toUpperCase() + tab.slice(1)}
+          </button>
+        ))}
+      </div>
+    </div>
+  </header>
+);