feat: support settings

frontend/src/components/ui/empty.tsx

@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("text-lg font-medium tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}

frontend/src/components/ui/item.tsx

@@ -0,0 +1,193 @@
+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"
+import { Separator } from "@/components/ui/separator"
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn("group/item-group flex flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn("my-0", className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50",
+      },
+      size: {
+        default: "p-4 gap-4 ",
+        sm: "py-3 px-4 gap-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div"
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}

frontend/src/components/ui/switch.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

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

@@ -0,0 +1,5 @@
+"use client";
+
+export function AcknowledgePage() {
+  return null;
+}

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

@@ -0,0 +1,193 @@
+"use client";
+
+import { MonitorSmartphoneIcon, MoonIcon, SunIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useMemo, type ComponentType, type SVGProps } from "react";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { enUS, zhCN, type Locale } from "@/core/i18n";
+import { useI18n } from "@/core/i18n/hooks";
+import { cn } from "@/lib/utils";
+
+import { SettingsSection } from "./settings-section";
+
+const languageOptions: { value: Locale; label: string }[] = [
+  { value: "en-US", label: enUS.locale.localName },
+  { value: "zh-CN", label: zhCN.locale.localName },
+];
+
+export function AppearanceSettingsPage() {
+  const { t, locale, changeLocale } = useI18n();
+  const { theme, setTheme, resolvedTheme } = useTheme();
+  const currentTheme = (theme ?? "system") as "system" | "light" | "dark";
+
+  const themeOptions = useMemo(
+    () => [
+      {
+        id: "system",
+        label: t.settings.appearance.system,
+        description: t.settings.appearance.systemDescription,
+        icon: MonitorSmartphoneIcon,
+      },
+      {
+        id: "light",
+        label: t.settings.appearance.light,
+        description: t.settings.appearance.lightDescription,
+        icon: SunIcon,
+      },
+      {
+        id: "dark",
+        label: t.settings.appearance.dark,
+        description: t.settings.appearance.darkDescription,
+        icon: MoonIcon,
+      },
+    ],
+    [
+      t.settings.appearance.dark,
+      t.settings.appearance.darkDescription,
+      t.settings.appearance.light,
+      t.settings.appearance.lightDescription,
+      t.settings.appearance.system,
+      t.settings.appearance.systemDescription,
+    ],
+  );
+
+  return (
+    <div className="space-y-8">
+      <SettingsSection
+        title={t.settings.appearance.themeTitle}
+        description={t.settings.appearance.themeDescription}
+      >
+        <div className="grid gap-3 lg:grid-cols-3">
+          {themeOptions.map((option) => (
+            <ThemePreviewCard
+              key={option.id}
+              icon={option.icon}
+              label={option.label}
+              description={option.description}
+              active={currentTheme === option.id}
+              mode={option.id as "system" | "light" | "dark"}
+              resolvedTheme={resolvedTheme}
+              onSelect={(value) => setTheme(value)}
+            />
+          ))}
+        </div>
+      </SettingsSection>
+
+      <Separator />
+
+      <SettingsSection
+        title={t.settings.appearance.languageTitle}
+        description={t.settings.appearance.languageDescription}
+      >
+        <Select
+          value={locale}
+          onValueChange={(value) => changeLocale(value as Locale)}
+        >
+          <SelectTrigger className="w-[220px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {languageOptions.map((item) => (
+              <SelectItem key={item.value} value={item.value}>
+                {item.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </SettingsSection>
+    </div>
+  );
+}
+
+function ThemePreviewCard({
+  icon: Icon,
+  label,
+  description,
+  active,
+  mode,
+  resolvedTheme,
+  onSelect,
+}: {
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
+  label: string;
+  description: string;
+  active: boolean;
+  mode: "system" | "light" | "dark";
+  resolvedTheme?: string;
+  onSelect: (mode: "system" | "light" | "dark") => void;
+}) {
+  const previewMode =
+    mode === "system" ? (resolvedTheme === "dark" ? "dark" : "light") : mode;
+
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(mode)}
+      className={cn(
+        "group flex h-full flex-col gap-3 rounded-lg border p-4 text-left transition-all",
+        active
+          ? "border-primary ring-primary/30 shadow-sm ring-2"
+          : "hover:border-border hover:shadow-sm",
+      )}
+    >
+      <div className="flex items-start gap-3">
+        <div className="bg-muted rounded-md p-2">
+          <Icon className="size-4" />
+        </div>
+        <div className="space-y-1">
+          <div className="text-sm leading-none font-semibold">{label}</div>
+          <p className="text-muted-foreground text-xs leading-snug">
+            {description}
+          </p>
+        </div>
+      </div>
+      <div
+        className={cn(
+          "relative overflow-hidden rounded-md border text-xs transition-colors",
+          previewMode === "dark"
+            ? "border-neutral-800 bg-neutral-900 text-neutral-200"
+            : "border-slate-200 bg-white text-slate-900",
+        )}
+      >
+        <div className="border-border/50 flex items-center gap-2 border-b px-3 py-2">
+          <div
+            className={cn(
+              "h-2 w-2 rounded-full",
+              previewMode === "dark" ? "bg-emerald-400" : "bg-emerald-500",
+            )}
+          />
+          <div className="h-2 w-10 rounded-full bg-current/20" />
+          <div className="h-2 w-6 rounded-full bg-current/15" />
+        </div>
+        <div className="grid grid-cols-[1fr_240px] gap-3 px-3 py-3">
+          <div className="space-y-2">
+            <div className="h-3 w-3/4 rounded-full bg-current/15" />
+            <div className="h-3 w-1/2 rounded-full bg-current/10" />
+            <div className="h-[90px] rounded-md border border-current/10 bg-current/5" />
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <div className="h-8 w-8 rounded-md bg-current/10" />
+              <div className="space-y-2">
+                <div className="h-2 w-14 rounded-full bg-current/15" />
+                <div className="h-2 w-10 rounded-full bg-current/10" />
+              </div>
+            </div>
+            <div className="flex flex-col gap-1 rounded-md border border-dashed border-current/15 p-2">
+              <div className="h-2 w-3/5 rounded-full bg-current/15" />
+              <div className="h-2 w-2/5 rounded-full bg-current/10" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </button>
+  );
+}

frontend/src/components/workspace/settings/index.ts

@@ -0,0 +1 @@
+export { SettingsDialog } from "./settings-dialog";

frontend/src/components/workspace/settings/settings-dialog.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { PaletteIcon, SparklesIcon, WrenchIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { AcknowledgePage } from "@/components/workspace/settings/acknowledge-page";
+import { AppearanceSettingsPage } from "@/components/workspace/settings/appearance-settings-page";
+import { SkillSettingsPage } from "@/components/workspace/settings/skill-settings-page";
+import { ToolSettingsPage } from "@/components/workspace/settings/tool-settings-page";
+import { useI18n } from "@/core/i18n/hooks";
+import { cn } from "@/lib/utils";
+
+type SettingsSection = "appearance" | "tools" | "skills" | "acknowledge";
+
+type SettingsDialogProps = React.ComponentProps<typeof Dialog> & {
+  defaultSection?: SettingsSection;
+};
+
+export function SettingsDialog({
+  defaultSection = "appearance",
+  ...dialogProps
+}: SettingsDialogProps) {
+  const { t } = useI18n();
+  const [activeSection, setActiveSection] =
+    useState<SettingsSection>(defaultSection);
+
+  const sections = useMemo(
+    () => [
+      {
+        id: "appearance",
+        label: t.settings.sections.appearance,
+        icon: PaletteIcon,
+      },
+      { id: "tools", label: t.settings.sections.tools, icon: WrenchIcon },
+      { id: "skills", label: t.settings.sections.skills, icon: SparklesIcon },
+    ],
+    [
+      t.settings.sections.appearance,
+      t.settings.sections.tools,
+      t.settings.sections.skills,
+    ],
+  );
+
+  return (
+    <Dialog {...dialogProps}>
+      <DialogContent
+        className="flex h-[75vh] max-h-[calc(100vh-2rem)] flex-col sm:max-w-5xl md:max-w-6xl"
+        aria-describedby={undefined}
+      >
+        <DialogHeader className="gap-1">
+          <DialogTitle>{t.settings.title}</DialogTitle>
+          <p className="text-muted-foreground text-sm">
+            {t.settings.description}
+          </p>
+        </DialogHeader>
+        <div className="grid min-h-0 flex-1 gap-4 md:grid-cols-[220px_1fr]">
+          <nav className="bg-muted/30 min-h-0 overflow-y-auto rounded-lg border p-2">
+            <ul className="space-y-1 pr-1">
+              {sections.map(({ id, label, icon: Icon }) => {
+                const active = activeSection === id;
+                return (
+                  <li key={id}>
+                    <button
+                      type="button"
+                      onClick={() => setActiveSection(id as SettingsSection)}
+                      className={cn(
+                        "flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                        active
+                          ? "bg-primary text-primary-foreground shadow-sm"
+                          : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                      )}
+                    >
+                      <Icon className="size-4" />
+                      <span>{label}</span>
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          </nav>
+          <ScrollArea className="h-full min-h-0 rounded-lg border">
+            <div className="space-y-8 p-6">
+              {activeSection === "appearance" && <AppearanceSettingsPage />}
+              {activeSection === "tools" && <ToolSettingsPage />}
+              {activeSection === "skills" && <SkillSettingsPage />}
+              {activeSection === "acknowledge" && <AcknowledgePage />}
+            </div>
+          </ScrollArea>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/components/workspace/settings/settings-section.tsx

@@ -0,0 +1,25 @@
+import { cn } from "@/lib/utils";
+
+export function SettingsSection({
+  className,
+  title,
+  description,
+  children,
+}: {
+  className?: string;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className={cn(className)}>
+      <header className="space-y-2">
+        <h3 className="text-lg font-semibold">{title}</h3>
+        {description && (
+          <p className="text-muted-foreground text-sm">{description}</p>
+        )}
+      </header>
+      <main className="mt-4">{children}</main>
+    </section>
+  );
+}

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

@@ -0,0 +1,91 @@
+"use client";
+
+import { SparklesIcon } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import {
+  Item,
+  ItemActions,
+  ItemTitle,
+  ItemContent,
+  ItemDescription,
+} from "@/components/ui/item";
+import { Switch } from "@/components/ui/switch";
+import { useI18n } from "@/core/i18n/hooks";
+import { useEnableSkill, useSkills } from "@/core/skills/hooks";
+import type { Skill } from "@/core/skills/type";
+
+import { SettingsSection } from "./settings-section";
+
+export function SkillSettingsPage() {
+  const { t } = useI18n();
+  const { skills, isLoading, error } = useSkills();
+  return (
+    <SettingsSection
+      title={t.settings.skills.title}
+      description={t.settings.skills.description}
+    >
+      {isLoading ? (
+        <div>Loading...</div>
+      ) : error ? (
+        <div>Error: {error.message}</div>
+      ) : (
+        <SkillSettingsList skills={skills} />
+      )}
+    </SettingsSection>
+  );
+}
+
+function SkillSettingsList({ skills }: { skills: Skill[] }) {
+  const { mutate: enableSkill } = useEnableSkill();
+  if (skills.length === 0) {
+    return (
+      <Empty>
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <SparklesIcon />
+          </EmptyMedia>
+          <EmptyTitle>No skill yet</EmptyTitle>
+          <EmptyDescription>
+            Put your skill folders under the `/skills/custom` folder under the
+            root folder of DeerFlow.
+          </EmptyDescription>
+        </EmptyHeader>
+      </Empty>
+    );
+  }
+  return (
+    <div className="flex w-full flex-col gap-4">
+      {skills.map((skill) => (
+        <Item className="w-full" variant="outline" key={skill.name}>
+          <ItemContent>
+            <ItemTitle>
+              <div className="flex items-center gap-2">
+                <div>{skill.name}</div>
+                <Badge variant="outline">{skill.category}</Badge>
+              </div>
+            </ItemTitle>
+            <ItemDescription className="line-clamp-4">
+              {skill.description}
+            </ItemDescription>
+          </ItemContent>
+          <ItemActions>
+            <Switch
+              checked={skill.enabled}
+              onCheckedChange={(checked) =>
+                enableSkill({ skillName: skill.name, enabled: checked })
+              }
+            />
+          </ItemActions>
+        </Item>
+      ))}
+    </div>
+  );
+}

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>
+  );
+}

frontend/src/components/workspace/workspace-sidebar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { SettingsIcon } from "lucide-react";
+import { useState } from "react";
 
 import {
   Sidebar,
@@ -14,6 +15,7 @@ import {
   SidebarGroup,
   SidebarGroupContent,
 } from "@/components/ui/sidebar";
+import { SettingsDialog } from "@/components/workspace/settings";
 import { useI18n } from "@/core/i18n/hooks";
 
 import { RecentChatList } from "./recent-chat-list";
@@ -24,32 +26,42 @@ export function WorkspaceSidebar({
   ...props
 }: React.ComponentProps<typeof Sidebar>) {
   const { t } = useI18n();
+  const [settingsOpen, setSettingsOpen] = useState(false);
+
   return (
-    <Sidebar variant="sidebar" collapsible="icon" {...props}>
-      <SidebarHeader className="py-0">
-        <WorkspaceHeader />
-      </SidebarHeader>
-      <SidebarContent>
-        <WorkspaceNavMenu />
-        <RecentChatList />
-      </SidebarContent>
-      <SidebarFooter>
-        <SidebarGroup className="px-0">
-          <SidebarGroupContent>
-            <SidebarMenu>
-              <SidebarMenuItem>
-                <SidebarMenuButton asChild>
-                  <div className="text-muted-foreground cursor-pointer">
-                    <SettingsIcon size={16} />
-                    <span>{t.common.settings}</span>
-                  </div>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-      </SidebarFooter>
-      <SidebarRail />
-    </Sidebar>
+    <>
+      <Sidebar variant="sidebar" collapsible="icon" {...props}>
+        <SidebarHeader className="py-0">
+          <WorkspaceHeader />
+        </SidebarHeader>
+        <SidebarContent>
+          <WorkspaceNavMenu />
+          <RecentChatList />
+        </SidebarContent>
+        <SidebarFooter>
+          <SidebarGroup className="px-0">
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem>
+                  <SidebarMenuButton asChild>
+                    <button
+                      type="button"
+                      className="text-muted-foreground flex w-full cursor-pointer items-center gap-2"
+                      onClick={() => setSettingsOpen(true)}
+                    >
+                      <SettingsIcon size={16} />
+                      <span>{t.common.settings}</span>
+                    </button>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarFooter>
+        <SidebarRail />
+      </Sidebar>
+
+      <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
+    </>
   );
 }

frontend/src/core/i18n/locales/en-US.ts

@@ -1,6 +1,11 @@
 import type { Translations } from "./types";
 
 export const enUS: Translations = {
+  // Locale meta
+  locale: {
+    localName: "English",
+  },
+
   // Common
   common: {
     home: "Home",
@@ -83,4 +88,41 @@ export const enUS: Translations = {
     readFile: "Read file",
     writeFile: "Write file",
   },
+
+  // Settings
+  settings: {
+    title: "Settings",
+    description: "Adjust how DeerFlow looks and behaves for you.",
+    sections: {
+      appearance: "Appearance",
+      tools: "Tools",
+      skills: "Skills",
+      acknowledge: "Acknowledge",
+    },
+    appearance: {
+      themeTitle: "Theme",
+      themeDescription:
+        "Choose how the interface follows your device or stays fixed.",
+      system: "System",
+      light: "Light",
+      dark: "Dark",
+      systemDescription: "Match the operating system preference automatically.",
+      lightDescription: "Bright palette with higher contrast for daytime.",
+      darkDescription: "Dim palette that reduces glare for focus.",
+      languageTitle: "Language",
+      languageDescription: "Switch between languages.",
+    },
+    tools: {
+      title: "Tools",
+      description: "Manage the configuration and enabled status of MCP tools.",
+    },
+    skills: {
+      title: "Skills",
+      description: "Manage the configuration and enabled status of the skills.",
+    },
+    acknowledge: {
+      emptyTitle: "Acknowledgements",
+      emptyDescription: "Credits and acknowledgements will show here.",
+    },
+  },
 };

frontend/src/core/i18n/locales/types.ts

@@ -1,4 +1,9 @@
 export interface Translations {
+  // Locale meta
+  locale: {
+    localName: string;
+  };
+
   // Common
   common: {
     home: string;
@@ -80,4 +85,40 @@ export interface Translations {
     readFile: string;
     writeFile: string;
   };
+
+  // Settings
+  settings: {
+    title: string;
+    description: string;
+    sections: {
+      appearance: string;
+      tools: string;
+      skills: string;
+      acknowledge: string;
+    };
+    appearance: {
+      themeTitle: string;
+      themeDescription: string;
+      system: string;
+      light: string;
+      dark: string;
+      systemDescription: string;
+      lightDescription: string;
+      darkDescription: string;
+      languageTitle: string;
+      languageDescription: string;
+    };
+    tools: {
+      title: string;
+      description: string;
+    };
+    skills: {
+      title: string;
+      description: string;
+    };
+    acknowledge: {
+      emptyTitle: string;
+      emptyDescription: string;
+    };
+  };
 }

frontend/src/core/i18n/locales/zh-CN.ts

@@ -1,6 +1,11 @@
 import type { Translations } from "./types";
 
 export const zhCN: Translations = {
+  // Locale meta
+  locale: {
+    localName: "中文",
+  },
+
   // Common
   common: {
     home: "首页",
@@ -83,4 +88,40 @@ export const zhCN: Translations = {
     readFile: "读取文件",
     writeFile: "写入文件",
   },
+
+  // Settings
+  settings: {
+    title: "设置",
+    description: "根据你的偏好调整 DeerFlow 的界面和行为。",
+    sections: {
+      appearance: "外观",
+      tools: "工具",
+      skills: "技能",
+      acknowledge: "致谢",
+    },
+    appearance: {
+      themeTitle: "主题",
+      themeDescription: "跟随系统或选择固定的界面模式。",
+      system: "系统",
+      light: "浅色",
+      dark: "深色",
+      systemDescription: "自动匹配操作系统偏好。",
+      lightDescription: "更明亮的配色，适合日间使用。",
+      darkDescription: "更暗的配色，减少眩光方便专注。",
+      languageTitle: "语言",
+      languageDescription: "在不同语言之间切换。",
+    },
+    tools: {
+      title: "工具",
+      description: "管理 MCP 工具的配置和启用状态。",
+    },
+    skills: {
+      title: "技能",
+      description: "管理智能体的技能配置和启用状态。",
+    },
+    acknowledge: {
+      emptyTitle: "致谢",
+      emptyDescription: "相关的致谢信息会展示在这里。",
+    },
+  },
 };

frontend/src/core/mcp/api.ts

@@ -0,0 +1,24 @@
+import { env } from "@/env";
+
+import type { MCPConfig } from "./types";
+
+export async function loadMCPConfig() {
+  const response = await fetch(
+    `${env.NEXT_PUBLIC_BACKEND_BASE_URL}/api/mcp/config`,
+  );
+  return response.json() as Promise<MCPConfig>;
+}
+
+export async function updateMCPConfig(config: MCPConfig) {
+  const response = await fetch(
+    `${env.NEXT_PUBLIC_BACKEND_BASE_URL}/api/mcp/config`,
+    {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(config),
+    },
+  );
+  return response.json();
+}

frontend/src/core/mcp/hooks.ts

@@ -0,0 +1,44 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { loadMCPConfig, updateMCPConfig } from "./api";
+
+export function useMCPConfig() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["mcpConfig"],
+    queryFn: () => loadMCPConfig(),
+  });
+  return { config: data, isLoading, error };
+}
+
+export function useEnableMCPServer() {
+  const queryClient = useQueryClient();
+  const { config } = useMCPConfig();
+  return useMutation({
+    mutationFn: async ({
+      serverName,
+      enabled,
+    }: {
+      serverName: string;
+      enabled: boolean;
+    }) => {
+      if (!config) {
+        throw new Error("MCP config not found");
+      }
+      if (!config.mcp_servers[serverName]) {
+        throw new Error(`MCP server ${serverName} not found`);
+      }
+      await updateMCPConfig({
+        mcp_servers: {
+          ...config.mcp_servers,
+          [serverName]: {
+            ...config.mcp_servers[serverName],
+            enabled,
+          },
+        },
+      });
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["mcpConfig"] });
+    },
+  });
+}

frontend/src/core/mcp/index.ts

@@ -0,0 +1,2 @@
+export * from "./api";
+export * from "./types";

frontend/src/core/mcp/types.ts

@@ -0,0 +1,8 @@
+export interface MCPServerConfig extends Record<string, unknown> {
+  enabled: boolean;
+  description: string;
+}
+
+export interface MCPConfig {
+  mcp_servers: Record<string, MCPServerConfig>;
+}

frontend/src/core/skills/api.ts

@@ -0,0 +1,25 @@
+import { env } from "@/env";
+
+import type { Skill } from "./type";
+
+export async function loadSkills() {
+  const skills = await fetch(`${env.NEXT_PUBLIC_BACKEND_BASE_URL}/api/skills`);
+  const json = await skills.json();
+  return json.skills as Skill[];
+}
+
+export async function enableSkill(skillName: string, enabled: boolean) {
+  const response = await fetch(
+    `${env.NEXT_PUBLIC_BACKEND_BASE_URL}/api/skills/${skillName}`,
+    {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        enabled,
+      }),
+    },
+  );
+  return response.json();
+}

frontend/src/core/skills/hooks.ts

@@ -0,0 +1,31 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { enableSkill } from "./api";
+
+import { loadSkills } from ".";
+
+export function useSkills() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["skills"],
+    queryFn: () => loadSkills(),
+  });
+  return { skills: data ?? [], isLoading, error };
+}
+
+export function useEnableSkill() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      skillName,
+      enabled,
+    }: {
+      skillName: string;
+      enabled: boolean;
+    }) => {
+      await enableSkill(skillName, enabled);
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["skills"] });
+    },
+  });
+}

frontend/src/core/skills/index.ts

@@ -0,0 +1,2 @@
+export * from "./api";
+export * from "./type";

frontend/src/core/skills/type.ts

@@ -0,0 +1,7 @@
+export interface Skill {
+  name: string;
+  description: string;
+  category: string;
+  license: string;
+  enabled: boolean;
+}