@hienlh/ppm 0.9.0-beta.7 → 0.9.0-beta.8

package/src/web/components/editor/editor-breadcrumb.tsx

@@ -0,0 +1,225 @@
+import { useMemo, useRef, useEffect } from "react";
+import { ChevronRight, Folder, File, FileCode, FileJson, FileText, FileType } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+} from "@/components/ui/dropdown-menu";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useFileStore, type FileNode } from "@/stores/file-store";
+import { useTabStore } from "@/stores/tab-store";
+import { basename } from "@/lib/utils";
+
+const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
+  ts: FileCode, tsx: FileCode, js: FileCode, jsx: FileCode,
+  py: FileCode, rs: FileCode, go: FileCode, html: FileCode,
+  css: FileCode, scss: FileCode,
+  json: FileJson,
+  md: FileText, txt: FileText,
+  yaml: FileType, yml: FileType,
+};
+
+function getIcon(name: string, isDir: boolean) {
+  if (isDir) return Folder;
+  const ext = name.split(".").pop()?.toLowerCase() ?? "";
+  return ICON_MAP[ext] ?? File;
+}
+
+interface BreadcrumbSegment {
+  name: string;
+  fullPath: string;
+  node: FileNode | null;
+  siblings: FileNode[];
+}
+
+function walkTree(tree: FileNode[], segments: string[]): BreadcrumbSegment[] {
+  const result: BreadcrumbSegment[] = [];
+  let current: FileNode[] = tree;
+
+  for (let i = 0; i < segments.length; i++) {
+    const seg = segments[i]!;
+    const fullPath = segments.slice(0, i + 1).join("/");
+    const match = current.find((n) => n.name === seg);
+    result.push({
+      name: seg,
+      fullPath,
+      node: match ?? null,
+      siblings: current,
+    });
+    if (match?.children) {
+      current = match.children;
+    } else {
+      // Remaining segments have no tree data — add as plain
+      for (let j = i + 1; j < segments.length; j++) {
+        result.push({
+          name: segments[j]!,
+          fullPath: segments.slice(0, j + 1).join("/"),
+          node: null,
+          siblings: [],
+        });
+      }
+      break;
+    }
+  }
+  return result;
+}
+
+function sortNodes(nodes: FileNode[]): FileNode[] {
+  return [...nodes].sort((a, b) => {
+    if (a.type !== b.type) return a.type === "directory" ? -1 : 1;
+    return a.name.localeCompare(b.name);
+  });
+}
+
+interface EditorBreadcrumbProps {
+  filePath: string;
+  projectName: string;
+  tabId: string;
+  className?: string;
+}
+
+export function EditorBreadcrumb({ filePath, projectName, tabId, className }: EditorBreadcrumbProps) {
+  const tree = useFileStore((s) => s.tree);
+  const { updateTab, openTab } = useTabStore();
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const segments = useMemo(
+    () => walkTree(tree, filePath.split("/").filter(Boolean)),
+    [tree, filePath],
+  );
+
+  // Auto-scroll to rightmost segment
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollLeft = scrollRef.current.scrollWidth;
+    }
+  }, [segments]);
+
+  function handleFileClick(path: string, e: React.MouseEvent) {
+    const name = basename(path);
+    if (e.metaKey || e.ctrlKey) {
+      openTab({ type: "editor", title: name, metadata: { filePath: path, projectName }, projectId: projectName, closable: true });
+    } else {
+      updateTab(tabId, { title: name, metadata: { filePath: path, projectName } });
+    }
+  }
+
+  return (
+    <div ref={scrollRef} className={className}>
+      {segments.map((seg, i) => (
+        <div key={seg.fullPath} className="flex items-center shrink-0">
+          {i > 0 && <ChevronRight className="size-3 text-muted-foreground shrink-0 mx-0.5" />}
+          {seg.siblings.length > 0 ? (
+            <SegmentDropdown
+              segment={seg}
+              isLast={i === segments.length - 1}
+              projectName={projectName}
+              onFileClick={handleFileClick}
+            />
+          ) : (
+            <span className="text-xs text-muted-foreground px-1 py-0.5">{seg.name}</span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+interface SegmentDropdownProps {
+  segment: BreadcrumbSegment;
+  isLast: boolean;
+  projectName: string;
+  onFileClick: (path: string, e: React.MouseEvent) => void;
+}
+
+function SegmentDropdown({ segment, isLast, projectName, onFileClick }: SegmentDropdownProps) {
+  const sorted = useMemo(() => sortNodes(segment.siblings), [segment.siblings]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          className={`text-xs px-1 py-0.5 rounded hover:bg-muted transition-colors truncate max-w-[120px] ${
+            isLast ? "text-foreground font-medium" : "text-muted-foreground"
+          }`}
+        >
+          {segment.name}
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="max-h-[300px] overflow-hidden p-0">
+        <ScrollArea className="max-h-[300px]">
+          <div className="p-1">
+            {sorted.map((node) => (
+              <NodeMenuItem
+                key={node.path}
+                node={node}
+                projectName={projectName}
+                activePath={segment.fullPath}
+                onFileClick={onFileClick}
+              />
+            ))}
+          </div>
+        </ScrollArea>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+interface NodeMenuItemProps {
+  node: FileNode;
+  projectName: string;
+  activePath: string;
+  onFileClick: (path: string, e: React.MouseEvent) => void;
+}
+
+function NodeMenuItem({ node, projectName, activePath, onFileClick }: NodeMenuItemProps) {
+  const Icon = getIcon(node.name, node.type === "directory");
+  const isActive = node.path === activePath;
+
+  if (node.type === "directory" && node.children && node.children.length > 0) {
+    return (
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger className={`text-xs gap-1.5 ${isActive ? "bg-muted" : ""}`}>
+          <Icon className="size-3.5 shrink-0 text-muted-foreground" />
+          <span className="truncate">{node.name}</span>
+        </DropdownMenuSubTrigger>
+        <DropdownMenuSubContent className="max-h-[300px] overflow-hidden p-0">
+          <ScrollArea className="max-h-[300px]">
+            <div className="p-1">
+              {sortNodes(node.children).map((child) => (
+                <NodeMenuItem
+                  key={child.path}
+                  node={child}
+                  projectName={projectName}
+                  activePath={activePath}
+                  onFileClick={onFileClick}
+                />
+              ))}
+            </div>
+          </ScrollArea>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+    );
+  }
+
+  return (
+    <DropdownMenuItem
+      className={`text-xs gap-1.5 cursor-pointer ${isActive ? "bg-muted" : ""}`}
+      onSelect={(e) => {
+        // onSelect doesn't give MouseEvent, use click handler for Ctrl detection
+      }}
+      onClick={(e) => {
+        if (node.type === "directory") return;
+        onFileClick(node.path, e);
+      }}
+    >
+      <Icon className="size-3.5 shrink-0 text-muted-foreground" />
+      <span className="truncate">{node.name}</span>
+    </DropdownMenuItem>
+  );
+}

package/src/web/components/editor/editor-toolbar.tsx

@@ -0,0 +1,74 @@
+import { Code, Eye, WrapText, Table } from "lucide-react";
+
+interface EditorToolbarProps {
+  ext: string;
+  mdMode?: "edit" | "preview";
+  onMdModeChange?: (mode: "edit" | "preview") => void;
+  csvMode?: "table" | "raw";
+  onCsvModeChange?: (mode: "table" | "raw") => void;
+  wordWrap: boolean;
+  onToggleWordWrap: () => void;
+  className?: string;
+}
+
+function ToolbarButton({
+  active,
+  onClick,
+  icon: Icon,
+  label,
+}: {
+  active: boolean;
+  onClick: () => void;
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors ${
+        active ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"
+      }`}
+    >
+      <Icon className="size-3" />
+      <span className="hidden sm:inline">{label}</span>
+    </button>
+  );
+}
+
+export function EditorToolbar({
+  ext,
+  mdMode,
+  onMdModeChange,
+  csvMode,
+  onCsvModeChange,
+  wordWrap,
+  onToggleWordWrap,
+  className,
+}: EditorToolbarProps) {
+  const isMarkdown = ext === "md" || ext === "mdx";
+  const isCsv = ext === "csv";
+
+  return (
+    <div className={className}>
+      {isMarkdown && onMdModeChange && (
+        <>
+          <ToolbarButton active={mdMode === "edit"} onClick={() => onMdModeChange("edit")} icon={Code} label="Edit" />
+          <ToolbarButton active={mdMode === "preview"} onClick={() => onMdModeChange("preview")} icon={Eye} label="Preview" />
+        </>
+      )}
+      {isCsv && onCsvModeChange && (
+        <>
+          <ToolbarButton active={csvMode === "table"} onClick={() => onCsvModeChange("table")} icon={Table} label="Table" />
+          <ToolbarButton active={csvMode === "raw"} onClick={() => onCsvModeChange("raw")} icon={Code} label="Raw" />
+        </>
+      )}
+      <ToolbarButton
+        active={wordWrap}
+        onClick={onToggleWordWrap}
+        icon={WrapText}
+        label="Wrap"
+      />
+    </div>
+  );
+}

package/src/web/components/settings/mcp-server-dialog.tsx

@@ -0,0 +1,208 @@
+import { useState, useEffect } from "react";
+import { Plus, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
+} from "@/components/ui/dialog";
+import { addMcpServer, updateMcpServer, type McpServerEntry } from "@/lib/api-mcp";
+import { validateMcpName, validateMcpConfig, type McpTransportType } from "../../../types/mcp";
+
+interface Props {
+  open: boolean;
+  onClose: (saved?: boolean) => void;
+  editServer: McpServerEntry | null;
+}
+
+const TRANSPORTS: McpTransportType[] = ["stdio", "http", "sse"];
+
+export function McpServerDialog({ open, onClose, editServer }: Props) {
+  const isEdit = !!editServer;
+  const [name, setName] = useState("");
+  const [transport, setTransport] = useState<McpTransportType>("stdio");
+  const [command, setCommand] = useState("");
+  const [args, setArgs] = useState("");
+  const [url, setUrl] = useState("");
+  const [kvPairs, setKvPairs] = useState<Array<{ key: string; value: string }>>([]);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Reset form when dialog opens
+  useEffect(() => {
+    if (!open) return;
+    setError(null);
+    setSaving(false);
+    if (editServer) {
+      setName(editServer.name);
+      setTransport((editServer.transport as McpTransportType) || "stdio");
+      const c = editServer.config;
+      if ("command" in c) {
+        setCommand(c.command || "");
+        setArgs((c.args ?? []).join(" "));
+        setKvPairs(objToKv(c.env));
+      } else if ("url" in c) {
+        setUrl(c.url || "");
+        setKvPairs(objToKv(c.headers));
+      }
+    } else {
+      setName(""); setTransport("stdio"); setCommand(""); setArgs(""); setUrl("");
+      setKvPairs([]);
+    }
+  }, [open, editServer]);
+
+  const buildConfig = () => {
+    const kv = kvToObj(kvPairs);
+    if (transport === "stdio") {
+      return {
+        type: "stdio" as const,
+        command,
+        ...(args.trim() && { args: args.trim().split(/\s+/) }),
+        ...(Object.keys(kv).length > 0 && { env: kv }),
+      };
+    }
+    return {
+      type: transport,
+      url,
+      ...(Object.keys(kv).length > 0 && { headers: kv }),
+    };
+  };
+
+  const handleSave = async () => {
+    setError(null);
+    if (!isEdit) {
+      const nameErr = validateMcpName(name);
+      if (nameErr) { setError(nameErr); return; }
+    }
+    const config = buildConfig();
+    const configErrs = validateMcpConfig(config);
+    if (configErrs.length) { setError(configErrs.join("; ")); return; }
+
+    setSaving(true);
+    try {
+      if (isEdit) {
+        await updateMcpServer(name, config);
+      } else {
+        await addMcpServer(name, config);
+      }
+      onClose(true);
+    } catch (e: any) {
+      setError(e.message || "Save failed");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const addKvPair = () => setKvPairs([...kvPairs, { key: "", value: "" }]);
+  const removeKvPair = (i: number) => setKvPairs(kvPairs.filter((_, idx) => idx !== i));
+  const updateKv = (i: number, field: "key" | "value", val: string) => {
+    setKvPairs(kvPairs.map((p, idx) =>
+      idx === i ? { key: field === "key" ? val : p.key, value: field === "value" ? val : p.value } : p
+    ));
+  };
+
+  const isStdio = transport === "stdio";
+  const kvLabel = isStdio ? "Environment Variables" : "Headers";
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => { if (!v) onClose(); }}>
+      <DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-sm">{isEdit ? "Edit MCP Server" : "Add MCP Server"}</DialogTitle>
+          <DialogDescription className="text-[11px]">
+            Configure a Model Context Protocol server connection.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3">
+          {/* Name */}
+          <div className="space-y-1">
+            <label className="text-[11px] font-medium text-muted-foreground">Name</label>
+            <Input
+              value={name} onChange={(e) => setName(e.target.value)}
+              placeholder="my-mcp-server" className="h-8 text-xs" disabled={isEdit}
+            />
+          </div>
+
+          {/* Transport toggle */}
+          <div className="space-y-1">
+            <label className="text-[11px] font-medium text-muted-foreground">Transport</label>
+            <div className="flex gap-1">
+              {TRANSPORTS.map((t) => (
+                <Button key={t} variant={transport === t ? "default" : "outline"}
+                  size="sm" className="flex-1 h-7 text-xs cursor-pointer"
+                  onClick={() => { setTransport(t); setKvPairs([]); setCommand(""); setArgs(""); setUrl(""); }}
+                >{t}</Button>
+              ))}
+            </div>
+          </div>
+
+          {/* Conditional fields */}
+          {isStdio ? (
+            <>
+              <div className="space-y-1">
+                <label className="text-[11px] font-medium text-muted-foreground">Command *</label>
+                <Input value={command} onChange={(e) => setCommand(e.target.value)}
+                  placeholder="npx" className="h-8 text-xs" />
+              </div>
+              <div className="space-y-1">
+                <label className="text-[11px] font-medium text-muted-foreground">Arguments (space-separated)</label>
+                <Input value={args} onChange={(e) => setArgs(e.target.value)}
+                  placeholder="@playwright/mcp@latest" className="h-8 text-xs" />
+              </div>
+            </>
+          ) : (
+            <div className="space-y-1">
+              <label className="text-[11px] font-medium text-muted-foreground">URL *</label>
+              <Input value={url} onChange={(e) => setUrl(e.target.value)}
+                placeholder="https://mcp.example.com" className="h-8 text-xs" />
+            </div>
+          )}
+
+          {/* Key-value pairs */}
+          <div className="space-y-1.5">
+            <label className="text-[11px] font-medium text-muted-foreground">{kvLabel}</label>
+            {kvPairs.map((pair, i) => (
+              <div key={i} className="flex gap-1 items-center">
+                <Input value={pair.key} onChange={(e) => updateKv(i, "key", e.target.value)}
+                  placeholder="KEY" className="h-7 text-xs flex-1" />
+                <Input value={pair.value} onChange={(e) => updateKv(i, "value", e.target.value)}
+                  placeholder="value" className="h-7 text-xs flex-1" />
+                <Button variant="ghost" size="icon" className="size-7 shrink-0 cursor-pointer"
+                  onClick={() => removeKvPair(i)}>
+                  <X className="size-3" />
+                </Button>
+              </div>
+            ))}
+            <Button variant="outline" size="sm" className="h-7 text-xs gap-1 cursor-pointer" onClick={addKvPair}>
+              <Plus className="size-3" /> Add {isStdio ? "Variable" : "Header"}
+            </Button>
+          </div>
+
+          {error && <p className="text-[11px] text-destructive">{error}</p>}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" size="sm" className="h-8 text-xs cursor-pointer" onClick={() => onClose()}>
+            Cancel
+          </Button>
+          <Button size="sm" className="h-8 text-xs cursor-pointer" onClick={handleSave} disabled={saving}>
+            {saving ? "Saving..." : "Save"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function objToKv(obj?: Record<string, string>): Array<{ key: string; value: string }> {
+  if (!obj) return [];
+  return Object.entries(obj).map(([key, value]) => ({ key, value }));
+}
+
+function kvToObj(pairs: Array<{ key: string; value: string }>): Record<string, string> {
+  const result: Record<string, string> = {};
+  for (const { key, value } of pairs) {
+    if (key.trim()) result[key.trim()] = value;
+  }
+  return result;
+}

package/src/web/components/settings/mcp-settings-section.tsx

@@ -0,0 +1,143 @@
+import { useState, useEffect, useCallback } from "react";
+import { Plus, Download, Trash2, Pencil, Server } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  getMcpServers, deleteMcpServer, importMcpServers,
+  type McpServerEntry,
+} from "@/lib/api-mcp";
+import { McpServerDialog } from "./mcp-server-dialog";
+
+export function McpSettingsSection() {
+  const [servers, setServers] = useState<McpServerEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editingServer, setEditingServer] = useState<McpServerEntry | null>(null);
+  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
+  const [importing, setImporting] = useState(false);
+  const [importMsg, setImportMsg] = useState<string | null>(null);
+
+  const fetchServers = useCallback(async () => {
+    try {
+      const data = await getMcpServers();
+      setServers(data);
+    } catch (e) {
+      console.error("Failed to load MCP servers:", e);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchServers(); }, [fetchServers]);
+
+  const handleDelete = async (name: string) => {
+    try {
+      await deleteMcpServer(name);
+      setDeleteConfirm(null);
+      fetchServers();
+    } catch (e) {
+      console.error("Failed to delete:", e);
+    }
+  };
+
+  const handleImport = async () => {
+    setImporting(true);
+    setImportMsg(null);
+    try {
+      const result = await importMcpServers();
+      setImportMsg(`Imported ${result.imported}, skipped ${result.skipped}`);
+      fetchServers();
+    } catch (e: any) {
+      setImportMsg(e.message || "Import failed");
+    } finally {
+      setImporting(false);
+    }
+  };
+
+  const handleDialogClose = (saved?: boolean) => {
+    setDialogOpen(false);
+    setEditingServer(null);
+    if (saved) fetchServers();
+  };
+
+  const openAdd = () => { setEditingServer(null); setDialogOpen(true); };
+  const openEdit = (s: McpServerEntry) => { setEditingServer(s); setDialogOpen(true); };
+
+  if (loading) {
+    return (
+      <div className="space-y-3">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="h-16 rounded-lg bg-muted animate-pulse" />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {servers.length === 0 ? (
+        <div className="text-center py-8 space-y-2">
+          <Server className="size-8 mx-auto text-muted-foreground" />
+          <p className="text-xs text-muted-foreground">
+            No MCP servers configured. Add one or import from Claude Code.
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {servers.map((s) => (
+            <div key={s.name} className="rounded-lg border bg-card p-3 space-y-1.5">
+              <div className="flex items-center gap-2">
+                <span className="text-xs font-medium truncate flex-1">{s.name}</span>
+                <span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground shrink-0">
+                  {s.transport}
+                </span>
+              </div>
+              <p className="text-[11px] text-muted-foreground truncate">
+                {serverPreview(s)}
+              </p>
+              <div className="flex justify-end gap-1.5">
+                {deleteConfirm === s.name ? (
+                  <>
+                    <span className="text-[11px] text-destructive self-center mr-1">Delete?</span>
+                    <Button variant="destructive" size="sm" className="h-8 min-w-[44px] text-xs cursor-pointer" onClick={() => handleDelete(s.name)}>Yes</Button>
+                    <Button variant="outline" size="sm" className="h-8 min-w-[44px] text-xs cursor-pointer" onClick={() => setDeleteConfirm(null)}>No</Button>
+                  </>
+                ) : (
+                  <>
+                    <Button variant="ghost" size="sm" className="h-7 text-xs gap-1 cursor-pointer" onClick={() => openEdit(s)}>
+                      <Pencil className="size-3" /> Edit
+                    </Button>
+                    <Button variant="ghost" size="sm" className="h-7 text-xs gap-1 text-destructive hover:text-destructive cursor-pointer" onClick={() => setDeleteConfirm(s.name)}>
+                      <Trash2 className="size-3" /> Delete
+                    </Button>
+                  </>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Actions — thumb zone */}
+      <div className="space-y-2 pt-1">
+        <Button className="w-full h-10 text-xs gap-1.5 cursor-pointer" onClick={openAdd}>
+          <Plus className="size-3.5" /> Add MCP Server
+        </Button>
+        <Button variant="outline" className="w-full h-10 text-xs gap-1.5 cursor-pointer" onClick={handleImport} disabled={importing}>
+          <Download className="size-3.5" /> {importing ? "Importing..." : "Import from Claude Code"}
+        </Button>
+        {importMsg && <p className="text-[11px] text-muted-foreground text-center">{importMsg}</p>}
+      </div>
+
+      <McpServerDialog open={dialogOpen} onClose={handleDialogClose} editServer={editingServer} />
+    </div>
+  );
+}
+
+function serverPreview(s: McpServerEntry): string {
+  const c = s.config;
+  if (s.transport === "stdio" || !("url" in c)) {
+    const stdio = c as { command?: string; args?: string[] };
+    return [stdio.command, ...(stdio.args ?? [])].join(" ");
+  }
+  return (c as { url?: string }).url ?? "";
+}

package/src/web/components/settings/settings-tab.tsx

@@ -1,7 +1,7 @@
 import { useState, useCallback, useRef } from "react";
 import {
   Moon, Sun, Monitor, Bell, BellOff, Check, ChevronRight, ArrowLeft,
-  Bot, BellRing, Keyboard, Globe,
+  Bot, BellRing, Keyboard, Globe, Plug,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -13,6 +13,7 @@ import { AISettingsSection } from "./ai-settings-section";
 import { KeyboardShortcutsSection } from "./keyboard-shortcuts-section";
 import { TelegramSettingsSection } from "./telegram-settings-section";
 import { ProxySettingsSection } from "./proxy-settings-section";
+import { McpSettingsSection } from "./mcp-settings-section";
 import { usePushNotification } from "@/hooks/use-push-notification";
 
 const THEME_OPTIONS: { value: Theme; label: string; icon: React.ElementType }[] = [
@@ -25,13 +26,14 @@ const pushSupported = "PushManager" in window && "serviceWorker" in navigator;
 const isIosNonPwa = /iPhone|iPad/.test(navigator.userAgent) &&
   !window.matchMedia("(display-mode: standalone)").matches;
 
-type SettingsCategory = "ai" | "notifications" | "proxy" | "shortcuts";
+type SettingsCategory = "ai" | "notifications" | "proxy" | "shortcuts" | "mcp";
 
 const CATEGORIES: { value: SettingsCategory; label: string; subtitle: string; icon: React.ElementType }[] = [
   { value: "ai", label: "AI Provider", subtitle: "Model, execution mode, limits", icon: Bot },
   { value: "notifications", label: "Notifications", subtitle: "Push & Telegram alerts", icon: BellRing },
   { value: "proxy", label: "API Proxy", subtitle: "Expose accounts as Anthropic API", icon: Globe },
   { value: "shortcuts", label: "Keyboard Shortcuts", subtitle: "Customize key bindings", icon: Keyboard },
+  { value: "mcp", label: "MCP Servers", subtitle: "Model Context Protocol tools", icon: Plug },
 ];
 
 export function SettingsTab() {
@@ -84,6 +86,7 @@ export function SettingsTab() {
             {activeCategory === "notifications" && <NotificationsContent isSubscribed={isSubscribed} loading={loading} permission={permission} pushError={pushError} subscribe={subscribe} unsubscribe={unsubscribe} />}
             {activeCategory === "proxy" && <ProxySettingsSection />}
             {activeCategory === "shortcuts" && <KeyboardShortcutsSection />}
+            {activeCategory === "mcp" && <McpSettingsSection />}
           </div>
         </ScrollArea>
       </div>