feat: support settings

frontend/src/components/workspace/settings/tool-settings-page.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from "@/components/ui/item";
+import { Switch } from "@/components/ui/switch";
+import { useI18n } from "@/core/i18n/hooks";
+import { useMCPConfig, useEnableMCPServer } from "@/core/mcp/hooks";
+import type { MCPServerConfig } from "@/core/mcp/types";
+
+import { SettingsSection } from "./settings-section";
+
+export function ToolSettingsPage() {
+  const { t } = useI18n();
+  const { config, isLoading, error } = useMCPConfig();
+  return (
+    <SettingsSection
+      title={t.settings.tools.title}
+      description={t.settings.tools.description}
+    >
+      {isLoading ? (
+        <div>Loading...</div>
+      ) : error ? (
+        <div>Error: {error.message}</div>
+      ) : (
+        config && <MCPServerList servers={config.mcp_servers} />
+      )}
+    </SettingsSection>
+  );
+}
+
+function MCPServerList({
+  servers,
+}: {
+  servers: Record<string, MCPServerConfig>;
+}) {
+  const { mutate: enableMCPServer } = useEnableMCPServer();
+  return (
+    <div className="flex w-full flex-col gap-4">
+      {Object.entries(servers).map(([name, config]) => (
+        <Item className="w-full" variant="outline" key={name}>
+          <ItemContent>
+            <ItemTitle>
+              <div className="flex items-center gap-2">
+                <div>{name}</div>
+              </div>
+            </ItemTitle>
+            <ItemDescription className="line-clamp-4">
+              {config.description}
+            </ItemDescription>
+          </ItemContent>
+          <ItemActions>
+            <Switch
+              checked={config.enabled}
+              onCheckedChange={(checked) =>
+                enableMCPServer({ serverName: name, enabled: checked })
+              }
+            />
+          </ItemActions>
+        </Item>
+      ))}
+    </div>
+  );
+}