init client

client/src/components/Sidebar.tsx

@@ -0,0 +1,39 @@
+import { Menu, Settings } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+const Sidebar = ({ connectionStatus }: { connectionStatus: string }) => (
+  <div className="w-64 bg-white border-r border-gray-200">
+    <div className="flex items-center p-4 border-b border-gray-200">
+      <Menu className="w-6 h-6 text-gray-500" />
+      <h1 className="ml-2 text-lg font-semibold">MCP Client</h1>
+    </div>
+
+    <div className="p-4">
+      <div className="flex items-center space-x-2 mb-4">
+        <div
+          className={`w-2 h-2 rounded-full ${
+            connectionStatus === "connected"
+              ? "bg-green-500"
+              : connectionStatus === "error"
+                ? "bg-red-500"
+                : "bg-gray-500"
+          }`}
+        />
+        <span className="text-sm text-gray-600">
+          {connectionStatus === "connected"
+            ? "Connected"
+            : connectionStatus === "error"
+              ? "Connection Error"
+              : "Disconnected"}
+        </span>
+      </div>
+
+      <Button variant="outline" className="w-full justify-start">
+        <Settings className="w-4 h-4 mr-2" />
+        Connection Settings
+      </Button>
+    </div>
+  </div>
+);
+
+export default Sidebar;