@hienlh/ppm 0.8.86 → 0.8.88

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/proxy-settings-section.tsx

@@ -127,78 +127,76 @@ export function ProxySettingsSection() {
         <div className="space-y-2 rounded-md border p-3 bg-muted/30">
           <h4 className="text-[11px] font-medium">Connection Info</h4>
 
-          {/* Base URL */}
+          {/* Local endpoint */}
           <div className="space-y-1">
-            <Label className="text-[10px] text-muted-foreground">Base URL</Label>
+            <Label className="text-[10px] text-muted-foreground">Local Endpoint</Label>
             <div className="flex gap-1.5 items-center">
               <code className="text-[10px] font-mono bg-muted px-1.5 py-0.5 rounded flex-1 truncate">
-                {hasTunnel && settings.tunnelUrl
-                  ? `${settings.tunnelUrl}/proxy`
-                  : `${window.location.origin}/proxy`}
+                {`${window.location.origin}/proxy/v1/messages`}
               </code>
               <Button
                 variant="ghost"
                 size="sm"
                 className="h-6 px-1.5 cursor-pointer shrink-0"
-                onClick={() => copyToClipboard(
-                  hasTunnel && settings.tunnelUrl
-                    ? `${settings.tunnelUrl}/proxy`
-                    : `${window.location.origin}/proxy`,
-                  "baseurl",
-                )}
+                onClick={() => copyToClipboard(`${window.location.origin}/proxy/v1/messages`, "local")}
               >
-                {copied === "baseurl" ? "Copied!" : <Copy className="size-3" />}
+                {copied === "local" ? "Copied!" : <Copy className="size-3" />}
               </Button>
             </div>
           </div>
 
+          {/* Tunnel endpoint */}
+          {hasTunnel && settings.proxyEndpoint && (
+            <div className="space-y-1">
+              <Label className="text-[10px] text-muted-foreground">Public Endpoint (Tunnel)</Label>
+              <div className="flex gap-1.5 items-center">
+                <code className="text-[10px] font-mono bg-muted px-1.5 py-0.5 rounded flex-1 truncate">
+                  {settings.proxyEndpoint}
+                </code>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 px-1.5 cursor-pointer shrink-0"
+                  onClick={() => copyToClipboard(settings.proxyEndpoint!, "tunnel")}
+                >
+                  {copied === "tunnel" ? "Copied!" : <Copy className="size-3" />}
+                </Button>
+              </div>
+            </div>
+          )}
+
           {!hasTunnel && (
             <p className="text-[10px] text-muted-foreground">
               Start a Cloudflare tunnel (Share) to get a public URL.
             </p>
           )}
 
-          {/* Claude Code CLI usage */}
-          <div className="space-y-1 pt-1">
-            <Label className="text-[10px] text-muted-foreground">Claude Code CLI</Label>
-            <div className="relative">
-              <pre className="text-[9px] font-mono bg-muted p-2 rounded overflow-x-auto whitespace-pre">
-{`ANTHROPIC_BASE_URL=${hasTunnel && settings.tunnelUrl ? settings.tunnelUrl + "/proxy" : window.location.origin + "/proxy"} \\
-ANTHROPIC_API_KEY=${settings.authKey} \\
-claude`}
-              </pre>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="absolute top-1 right-1 h-5 px-1 cursor-pointer"
-                onClick={() => copyToClipboard(
-                  `ANTHROPIC_BASE_URL=${hasTunnel && settings.tunnelUrl ? settings.tunnelUrl + "/proxy" : window.location.origin + "/proxy"} ANTHROPIC_API_KEY=${settings.authKey} claude`,
-                  "claude-cli",
-                )}
-              >
-                {copied === "claude-cli" ? "Copied!" : <Copy className="size-2.5" />}
-              </Button>
-            </div>
-          </div>
-
-          {/* Generic env vars */}
+          {/* Usage example */}
           <div className="space-y-1 pt-1">
-            <Label className="text-[10px] text-muted-foreground">Environment Variables</Label>
+            <Label className="text-[10px] text-muted-foreground">Usage Example</Label>
             <div className="relative">
               <pre className="text-[9px] font-mono bg-muted p-2 rounded overflow-x-auto whitespace-pre">
-{`export ANTHROPIC_BASE_URL=${hasTunnel && settings.tunnelUrl ? settings.tunnelUrl + "/proxy" : window.location.origin + "/proxy"}
-export ANTHROPIC_API_KEY=${settings.authKey}`}
+{`# Set as base URL in your tool
+ANTHROPIC_BASE_URL=${hasTunnel && settings.proxyEndpoint ? settings.tunnelUrl + "/proxy" : window.location.origin + "/proxy"}
+ANTHROPIC_API_KEY=${settings.authKey}
+
+# Or use curl
+curl ${hasTunnel && settings.proxyEndpoint ? settings.proxyEndpoint : window.location.origin + "/proxy/v1/messages"} \\
+  -H "x-api-key: ${settings.authKey}" \\
+  -H "content-type: application/json" \\
+  -H "anthropic-version: 2023-06-01" \\
+  -d '{"model":"claude-sonnet-4-6","max_tokens":1024,"messages":[{"role":"user","content":"Hello"}]}'`}
               </pre>
               <Button
                 variant="ghost"
                 size="sm"
                 className="absolute top-1 right-1 h-5 px-1 cursor-pointer"
                 onClick={() => copyToClipboard(
-                  `export ANTHROPIC_BASE_URL=${hasTunnel && settings.tunnelUrl ? settings.tunnelUrl + "/proxy" : window.location.origin + "/proxy"}\nexport ANTHROPIC_API_KEY=${settings.authKey}`,
-                  "envvars",
+                  `ANTHROPIC_BASE_URL=${hasTunnel ? settings.tunnelUrl + "/proxy" : window.location.origin + "/proxy"}\nANTHROPIC_API_KEY=${settings.authKey}`,
+                  "example",
                 )}
               >
-                {copied === "envvars" ? "Copied!" : <Copy className="size-2.5" />}
+                {copied === "example" ? "Copied!" : <Copy className="size-2.5" />}
               </Button>
             </div>
           </div>

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/components/shared/connection-lost-overlay.tsx

@@ -0,0 +1,89 @@
+import { WifiOff, ServerOff, RefreshCw } from "lucide-react";
+import { useState } from "react";
+import { useConnectionStore } from "@/stores/connection-store";
+
+const CLOUD_URL = "https://ppm.hienle.tech";
+
+function isTunnelDomain(): boolean {
+  return window.location.hostname.endsWith(".trycloudflare.com");
+}
+
+export function ConnectionLostOverlay() {
+  const showOverlay = useConnectionStore((s) => s.showOverlay);
+  const [retrying, setRetrying] = useState(false);
+
+  if (!showOverlay) return null;
+
+  const isTunnel = isTunnelDomain();
+
+  async function handleRetry() {
+    setRetrying(true);
+    try {
+      const res = await fetch("/api/health", { cache: "no-store" });
+      if (res.ok) {
+        useConnectionStore.getState().markUp();
+        if ("caches" in window) {
+          const keys = await caches.keys();
+          await Promise.all(keys.map((k) => caches.delete(k)));
+        }
+        window.location.reload();
+        return;
+      }
+    } catch {
+      // still down
+    }
+    setRetrying(false);
+  }
+
+  const Icon = isTunnel ? WifiOff : ServerOff;
+
+  return (
+    <div className="fixed inset-0 z-[200] bg-background/95 backdrop-blur-sm flex items-center justify-center p-4">
+      <div className="max-w-sm w-full text-center space-y-6">
+        <div className="flex justify-center">
+          <div className="rounded-full bg-destructive/10 p-4">
+            <Icon className="h-10 w-10 text-destructive" />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <h2 className="text-xl font-semibold text-foreground">
+            {isTunnel ? "Connection Lost" : "Server Unreachable"}
+          </h2>
+          <p className="text-sm text-muted-foreground leading-relaxed">
+            {isTunnel
+              ? "The tunnel appears to have closed. The server may have restarted with a new URL."
+              : "Cannot connect to the PPM server. It may have stopped or is restarting."}
+          </p>
+        </div>
+
+        <div className="flex flex-col gap-3">
+          {isTunnel && (
+            <a
+              href={CLOUD_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+            >
+              Open PPM Cloud
+            </a>
+          )}
+          <button
+            onClick={handleRetry}
+            disabled={retrying}
+            className="inline-flex items-center justify-center gap-2 rounded-md border border-border px-4 py-2.5 text-sm font-medium text-foreground hover:bg-accent transition-colors disabled:opacity-50"
+          >
+            <RefreshCw className={`h-4 w-4 ${retrying ? "animate-spin" : ""}`} />
+            {retrying ? "Retrying…" : "Retry Connection"}
+          </button>
+        </div>
+
+        {!isTunnel && (
+          <p className="text-xs text-muted-foreground">
+            If the server was stopped, run <code className="bg-muted px-1 py-0.5 rounded text-[11px]">ppm start</code> to restart it.
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}