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

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>

package/src/web/lib/api-mcp.ts

@@ -0,0 +1,38 @@
+import { api } from "./api-client";
+import type { McpServerConfig } from "../../types/mcp";
+
+export interface McpServerEntry {
+  name: string;
+  transport: string;
+  config: McpServerConfig;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export function getMcpServers(): Promise<McpServerEntry[]> {
+  return api.get<McpServerEntry[]>("/api/settings/mcp");
+}
+
+export function getMcpServer(name: string): Promise<McpServerConfig> {
+  return api.get<McpServerConfig>(`/api/settings/mcp/${encodeURIComponent(name)}`);
+}
+
+export function addMcpServer(name: string, config: McpServerConfig): Promise<{ name: string }> {
+  return api.post<{ name: string }>("/api/settings/mcp", { name, config });
+}
+
+export function updateMcpServer(name: string, config: McpServerConfig): Promise<{ name: string }> {
+  return api.put<{ name: string }>(`/api/settings/mcp/${encodeURIComponent(name)}`, config);
+}
+
+export function deleteMcpServer(name: string): Promise<void> {
+  return api.del(`/api/settings/mcp/${encodeURIComponent(name)}`);
+}
+
+export function importMcpServers(): Promise<{ imported: number; skipped: number }> {
+  return api.post<{ imported: number; skipped: number }>("/api/settings/mcp/import", {});
+}
+
+export function previewMcpImport(): Promise<{ available: boolean; servers: Record<string, McpServerConfig> }> {
+  return api.get<{ available: boolean; servers: Record<string, McpServerConfig> }>("/api/settings/mcp/import/preview");
+}

package/src/web/lib/csv-parser.ts

@@ -0,0 +1,134 @@
+/** Simple state-machine CSV parser handling quoted fields, embedded commas, newlines */
+
+const enum State {
+  FIELD_START,
+  UNQUOTED,
+  QUOTED,
+  QUOTE_IN_QUOTED,
+}
+
+export interface CsvData {
+  headers: string[];
+  rows: string[][];
+}
+
+export function parseCsv(content: string): CsvData {
+  const rows: string[][] = [];
+  let row: string[] = [];
+  let field = "";
+  let state: State = State.FIELD_START;
+
+  for (let i = 0; i < content.length; i++) {
+    const ch = content[i]!;
+
+    switch (state) {
+      case State.FIELD_START:
+        if (ch === '"') {
+          state = State.QUOTED;
+        } else if (ch === ",") {
+          row.push(field);
+          field = "";
+        } else if (ch === "\r") {
+          // skip \r, handle \n next
+        } else if (ch === "\n") {
+          row.push(field);
+          field = "";
+          rows.push(row);
+          row = [];
+        } else {
+          field += ch;
+          state = State.UNQUOTED;
+        }
+        break;
+
+      case State.UNQUOTED:
+        if (ch === ",") {
+          row.push(field);
+          field = "";
+          state = State.FIELD_START;
+        } else if (ch === "\r") {
+          // skip
+        } else if (ch === "\n") {
+          row.push(field);
+          field = "";
+          rows.push(row);
+          row = [];
+          state = State.FIELD_START;
+        } else {
+          field += ch;
+        }
+        break;
+
+      case State.QUOTED:
+        if (ch === '"') {
+          state = State.QUOTE_IN_QUOTED;
+        } else {
+          field += ch;
+        }
+        break;
+
+      case State.QUOTE_IN_QUOTED:
+        if (ch === '"') {
+          // Escaped quote ""
+          field += '"';
+          state = State.QUOTED;
+        } else if (ch === ",") {
+          row.push(field);
+          field = "";
+          state = State.FIELD_START;
+        } else if (ch === "\r") {
+          // skip
+        } else if (ch === "\n") {
+          row.push(field);
+          field = "";
+          rows.push(row);
+          row = [];
+          state = State.FIELD_START;
+        } else {
+          // Malformed — treat closing quote as literal
+          field += ch;
+          state = State.UNQUOTED;
+        }
+        break;
+    }
+  }
+
+  // Flush last field/row
+  if (field || row.length > 0) {
+    row.push(field);
+    rows.push(row);
+  }
+
+  if (rows.length === 0) return { headers: [], rows: [] };
+
+  const headers = rows[0]!;
+  const dataRows = rows.slice(1);
+
+  // Normalize column count — pad short rows, truncate long ones
+  const colCount = headers.length;
+  for (let i = 0; i < dataRows.length; i++) {
+    const r = dataRows[i]!;
+    if (r.length < colCount) {
+      while (r.length < colCount) r.push("");
+    } else if (r.length > colCount) {
+      dataRows[i] = r.slice(0, colCount);
+    }
+  }
+
+  return { headers, rows: dataRows };
+}
+
+export function serializeCsv(headers: string[], rows: string[][]): string {
+  const escape = (val: string): string => {
+    if (val.includes(",") || val.includes('"') || val.includes("\n")) {
+      return `"${val.replace(/"/g, '""')}"`;
+    }
+    return val;
+  };
+
+  const lines = [headers.map(escape).join(",")];
+  for (const row of rows) {
+    lines.push(row.map(escape).join(","));
+  }
+  return lines.join("\n");
+}

package/dist/web/assets/architecture-PBZL5I3N-ChOahOB7.js

@@ -1 +0,0 @@
-import"./chunk-XZSTWKYB-BYxFzZwS.js";import{n as e}from"./chunk-R5LLSJPH-euR2RxLN.js";export{e as createArchitectureServices};

package/dist/web/assets/channel-w7yboq56.js

@@ -1 +0,0 @@
-import{it as e,rt as t}from"./chunk-7R4GIKGN-DXaGAn_K.js";var n=(n,r)=>e.lang.round(t.parse(n)[r]);export{n as t};