init client

client/src/components/ConsoleTab.tsx

@@ -0,0 +1,12 @@
+import { TabsContent } from "@/components/ui/tabs";
+
+const ConsoleTab = () => (
+  <TabsContent value="console" className="h-96">
+    <div className="bg-gray-900 text-gray-100 p-4 rounded-lg h-full font-mono text-sm overflow-auto">
+      <div className="opacity-50">Welcome to MCP Client Console</div>
+      {/* Console output would go here */}
+    </div>
+  </TabsContent>
+);
+
+export default ConsoleTab;

client/src/components/NotificationsTab.tsx

@@ -0,0 +1,33 @@
+import { Bell } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { TabsContent } from "@/components/ui/tabs";
+
+const NotificationsTab = () => (
+  <TabsContent value="notifications" className="space-y-4">
+    <div className="grid grid-cols-2 gap-4">
+      <div className="space-y-4">
+        <div className="flex space-x-2">
+          <Input placeholder="Notification method" />
+          <Button>
+            <Bell className="w-4 h-4 mr-2" />
+            Send
+          </Button>
+        </div>
+        <Textarea
+          placeholder="Notification parameters (JSON)"
+          className="h-64 font-mono"
+        />
+      </div>
+      <div className="bg-white rounded-lg shadow p-4">
+        <h3 className="font-semibold mb-4">Recent Notifications</h3>
+        <div className="space-y-2">
+          {/* Notification history would go here */}
+        </div>
+      </div>
+    </div>
+  </TabsContent>
+);
+
+export default NotificationsTab;

client/src/components/RequestsTabs.tsx

@@ -0,0 +1,33 @@
+import { TabsContent } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Send } from "lucide-react";
+
+const RequestsTab = () => (
+  <TabsContent value="requests" className="space-y-4">
+    <div className="grid grid-cols-2 gap-4">
+      <div className="space-y-4">
+        <div className="flex space-x-2">
+          <Input placeholder="Method name" />
+          <Button>
+            <Send className="w-4 h-4 mr-2" />
+            Send
+          </Button>
+        </div>
+        <Textarea
+          placeholder="Request parameters (JSON)"
+          className="h-64 font-mono"
+        />
+      </div>
+      <div>
+        <div className="bg-gray-50 p-4 rounded-lg h-96 font-mono text-sm overflow-auto">
+          <div className="text-gray-500 mb-2">Response:</div>
+          {/* Response content would go here */}
+        </div>
+      </div>
+    </div>
+  </TabsContent>
+);
+
+export default RequestsTab;

client/src/components/ResourcesTab.tsx

@@ -0,0 +1,89 @@
+import { FileText, PlayCircle, ChevronRight, AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { TabsContent } from "@/components/ui/tabs";
+
+export type Resource = {
+  uri: string;
+};
+
+const ResourcesTab = ({
+  resources,
+  listResources,
+  readResource,
+  selectedResource,
+  setSelectedResource,
+  resourceContent,
+  error,
+}: {
+  resources: Resource[];
+  listResources: () => void;
+  readResource: (uri: string) => void;
+  selectedResource: Resource | null;
+  setSelectedResource: (resource: Resource) => void;
+  resourceContent: string;
+  error: string | null;
+}) => (
+  <TabsContent value="resources" className="grid grid-cols-2 gap-4">
+    <div className="bg-white rounded-lg shadow">
+      <div className="p-4 border-b border-gray-200">
+        <h3 className="font-semibold">Resources</h3>
+      </div>
+      <div className="p-4">
+        <Button
+          variant="outline"
+          className="w-full mb-4"
+          onClick={listResources}
+        >
+          <PlayCircle className="w-4 h-4 mr-2" />
+          List Resources
+        </Button>
+        <div className="space-y-2">
+          {resources.map((resource, index) => (
+            <div
+              key={index}
+              className="flex items-center p-2 rounded hover:bg-gray-50 cursor-pointer"
+              onClick={() => {
+                setSelectedResource(resource);
+                readResource(resource.uri);
+              }}
+            >
+              <FileText className="w-4 h-4 mr-2 text-gray-500" />
+              <span className="flex-1">{resource.uri}</span>
+              <ChevronRight className="w-4 h-4 text-gray-400" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+
+    <div className="bg-white rounded-lg shadow">
+      <div className="p-4 border-b border-gray-200">
+        <h3 className="font-semibold">
+          {selectedResource ? selectedResource.uri : "Select a resource"}
+        </h3>
+      </div>
+      <div className="p-4">
+        {error ? (
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        ) : selectedResource ? (
+          <pre className="bg-gray-50 p-4 rounded text-sm overflow-auto max-h-96">
+            {resourceContent}
+          </pre>
+        ) : (
+          <Alert>
+            <AlertDescription>
+              Select a resource from the list to view its contents
+            </AlertDescription>
+          </Alert>
+        )}
+      </div>
+    </div>
+  </TabsContent>
+);
+
+export default ResourcesTab;

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;

client/src/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

client/src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

client/src/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

client/src/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

client/src/components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }