feat(mcp): enhance MCP transport support and add server management UI

- Extend McpTransport to support "sse" in schemas.
- Refactor McpToolClient to handle both "streamable_http" and "sse" transports.
- Introduce McpServerDialog for managing MCP server configurations, including transport settings and tool synchronization.
- Replace McpServersSection with the new dialog component for improved server management.
- Add tests for MCP transport handling and server dialog functionality.

frontend/src/components/tools/tool-form-controls.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { Textarea } from "@/components/ui/textarea";
+
+export const TOOL_DIALOG_CONTENT_CLASS =
+  "max-h-[calc(100vh-3rem)] grid-rows-[auto_minmax(0,1fr)_auto] overflow-y-auto sm:h-[48.875rem] sm:max-w-6xl lg:overflow-hidden";
+
+export function ToolFormField({
+  label,
+  required,
+  children,
+}: {
+  label: string;
+  required?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <label className="block space-y-2">
+      <span className="text-sm font-medium text-foreground">
+        {label}
+        {required && <span className="ml-1 text-destructive">*</span>}
+      </span>
+      {children}
+    </label>
+  );
+}
+
+export function ToolFormSection({
+  title,
+  scrollable = false,
+  tall = false,
+  children,
+}: {
+  title: string;
+  scrollable?: boolean;
+  tall?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <section
+      className={[
+        "rounded-xl border border-hairline bg-surface-strong/20",
+        tall ? "lg:flex lg:h-[38rem] lg:flex-col" : "",
+      ].join(" ")}
+    >
+      <div className="border-b border-hairline px-4 py-3 text-sm font-medium">
+        {title}
+      </div>
+      <div
+        className={[
+          "space-y-4 p-4",
+          scrollable ? "max-h-72 overflow-y-auto" : "",
+          tall ? "lg:max-h-none lg:flex-1" : "",
+        ].join(" ")}
+      >
+        {children}
+      </div>
+    </section>
+  );
+}
+
+export function ToolJsonField({
+  label,
+  value,
+  onChange,
+  rows = 4,
+  disabled = false,
+  placeholder,
+  hint,
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  rows?: number;
+  disabled?: boolean;
+  placeholder?: string;
+  hint?: string;
+}) {
+  return (
+    <ToolFormField label={label}>
+      <Textarea
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        rows={rows}
+        disabled={disabled}
+        placeholder={placeholder}
+        className="font-mono text-xs"
+        spellCheck={false}
+      />
+      {hint && <span className="block text-xs text-muted-foreground">{hint}</span>}
+    </ToolFormField>
+  );
+}