@hienlh/ppm 0.8.87 → 0.8.89

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

@@ -9,12 +9,9 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { getAISettings, updateAISettings, type AISettings } from "@/lib/api-settings";
-
-const MODEL_OPTIONS = [
-  { value: "claude-sonnet-4-6", label: "Claude Sonnet 4.6" },
-  { value: "claude-opus-4-6", label: "Claude Opus 4.6" },
-  { value: "claude-haiku-4-5", label: "Claude Haiku 4.5" },
-];
+import { api } from "@/lib/api-client";
+import { ProviderBadge } from "@/components/chat/provider-selector";
+import type { ModelOption } from "../../../types/chat";
 
 const EFFORT_OPTIONS = [
   { value: "low", label: "Low" },
@@ -29,19 +26,47 @@ const PERMISSION_MODE_OPTIONS = [
   { value: "plan", label: "Plan mode" },
 ];
 
+const PROVIDER_NAMES: Record<string, string> = {
+  claude: "Claude",
+  cursor: "Cursor",
+  codex: "Codex",
+  gemini: "Gemini",
+};
+
 export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
   const [settings, setSettings] = useState<AISettings | null>(null);
+  const [activeTab, setActiveTab] = useState<string>("");
+  const [models, setModels] = useState<ModelOption[]>([]);
+  const [modelsLoading, setModelsLoading] = useState(false);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  // Revision counter forces number inputs to re-render with fresh defaultValue after save
   const [revision, setRevision] = useState(0);
 
   useEffect(() => {
-    getAISettings().then(setSettings).catch((e) => setError(e.message));
+    getAISettings().then((s) => {
+      setSettings(s);
+      setActiveTab(s.default_provider ?? "claude");
+    }).catch((e) => setError(e.message));
   }, []);
 
-  const providerName = settings?.default_provider ?? "claude";
-  const config = settings?.providers[providerName];
+  // Fetch models when active tab changes — uses global settings endpoint
+  useEffect(() => {
+    if (!activeTab) return;
+    setModelsLoading(true);
+    api.get<ModelOption[]>(`/api/settings/ai/providers/${activeTab}/models`)
+      .then(setModels)
+      .catch(() => setModels([]))
+      .finally(() => setModelsLoading(false));
+  }, [activeTab]);
+
+  const providerTabs = settings
+    ? Object.keys(settings.providers)
+        .filter((k) => k !== "mock")
+        .map((id) => ({ id, name: PROVIDER_NAMES[id] ?? id }))
+    : [];
+
+  const config = settings?.providers[activeTab];
+  const isSdkProvider = config?.type === "agent-sdk" || (!config?.type && activeTab === "claude");
 
   const handleSave = async (field: string, value: unknown) => {
     if (!settings) return;
@@ -49,7 +74,7 @@ export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
     setError(null);
     try {
       const updated = await updateAISettings({
-        providers: { [providerName]: { [field]: value } },
+        providers: { [activeTab]: { [field]: value } },
       });
       setSettings(updated);
       setRevision((r) => r + 1);
@@ -69,7 +94,7 @@ export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
   if (!settings) {
     return (
       <div className={innerGap}>
-        <h3 className={`${headingSize} font-medium text-text-secondary`}>AI Provider</h3>
+        <h3 className={`${headingSize} font-medium text-text-secondary`}>AI Settings</h3>
         <p className={`${labelSize} text-text-subtle`}>
           {error ? `Error: ${error}` : "Loading..."}
         </p>
@@ -77,139 +102,173 @@ export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
     );
   }
 
+  // Model select options: use fetched models, with "auto" option for non-SDK providers
+  const modelOptions = isSdkProvider
+    ? models
+    : [{ value: "__default__", label: "Auto (default)" }, ...models];
+
   return (
     <div className={gapSize}>
-      <h3 className={`${headingSize} font-medium text-text-secondary`}>AI Provider</h3>
+      <h3 className={`${headingSize} font-medium text-text-secondary`}>AI Settings</h3>
 
-      <div className={innerGap}>
-        <div className={fieldGap}>
-          <Label htmlFor="ai-model" className={compact ? labelSize : undefined}>Model</Label>
-          <Select
-            value={config?.model ?? "claude-sonnet-4-6"}
-            onValueChange={(v) => handleSave("model", v)}
-          >
-            <SelectTrigger id="ai-model" className={`w-full ${compact ? "h-7 text-[11px]" : ""}`}>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {MODEL_OPTIONS.map((opt) => (
-                <SelectItem key={opt.value} value={opt.value}>
-                  {opt.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+      {/* Provider tabs */}
+      {providerTabs.length > 1 && (
+        <div className="flex gap-0.5 border-b border-border/50 -mx-1 px-1">
+          {providerTabs.map((p) => (
+            <button
+              key={p.id}
+              onClick={() => setActiveTab(p.id)}
+              className={`flex items-center gap-1 px-2 py-1 text-[11px] rounded-t transition-colors ${
+                activeTab === p.id
+                  ? "text-primary border-b-2 border-primary font-medium"
+                  : "text-text-subtle hover:text-text-secondary"
+              }`}
+            >
+              <ProviderBadge providerId={p.id} />
+              <span className="capitalize">{p.name}</span>
+            </button>
+          ))}
         </div>
+      )}
 
-        <div className={fieldGap}>
-          <Label htmlFor="ai-base-url" className={compact ? labelSize : undefined}>Base URL</Label>
-          <Input
-            key={`baseurl-${revision}`}
-            id="ai-base-url"
-            type="url"
-            defaultValue={config?.base_url ?? ""}
-            placeholder="https://api.anthropic.com (default)"
-            className={compact ? "h-7 text-[11px]" : undefined}
-            onBlur={(e) => {
-              const val = e.target.value.trim();
-              handleSave("base_url", val || undefined);
-            }}
-          />
-        </div>
+      <div className={innerGap}>
+        {/* Model selector — dynamic, works for all providers */}
+        {models.length > 0 && (
+          <div className={fieldGap}>
+            <Label htmlFor="ai-model" className={compact ? labelSize : undefined}>Model</Label>
+            <Select
+              value={isSdkProvider ? (config?.model ?? models[0]?.value) : (config?.model || "__default__")}
+              onValueChange={(v) => handleSave("model", v === "__default__" ? undefined : v)}
+              disabled={modelsLoading}
+            >
+              <SelectTrigger id="ai-model" className={`w-full ${compact ? "h-7 text-[11px]" : ""}`}>
+                <SelectValue placeholder={modelsLoading ? "Loading models..." : "Select model"} />
+              </SelectTrigger>
+              <SelectContent className="max-h-[300px]">
+                {modelOptions.map((opt) => (
+                  <SelectItem key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
 
-        <div className={fieldGap}>
-          <Label htmlFor="ai-api-key" className={compact ? labelSize : undefined}>API Key / Token</Label>
-          <Input
-            key={`apikey-${revision}`}
-            id="ai-api-key"
-            type="password"
-            defaultValue={config?.api_key ?? ""}
-            placeholder="sk-ant-... (optional, overrides accounts)"
-            className={compact ? "h-7 text-[11px] font-mono" : "font-mono"}
-            onBlur={(e) => {
-              const val = e.target.value.trim();
-              // Don't save if it's the masked value
-              if (val.startsWith("••••")) return;
-              handleSave("api_key", val || undefined);
-            }}
-          />
-          <p className={`${compact ? "text-[9px]" : "text-[11px]"} text-muted-foreground`}>
-            Direct API key or OAuth token. Leave empty to use connected accounts.
-          </p>
-        </div>
+        {/* SDK-specific fields */}
+        {isSdkProvider && (
+          <>
+            <div className={fieldGap}>
+              <Label htmlFor="ai-base-url" className={compact ? labelSize : undefined}>Base URL</Label>
+              <Input
+                key={`baseurl-${activeTab}-${revision}`}
+                id="ai-base-url"
+                type="url"
+                defaultValue={config?.base_url ?? ""}
+                placeholder="https://api.anthropic.com (default)"
+                className={compact ? "h-7 text-[11px]" : undefined}
+                onBlur={(e) => {
+                  const val = e.target.value.trim();
+                  handleSave("base_url", val || undefined);
+                }}
+              />
+            </div>
 
-        <div className={fieldGap}>
-          <Label htmlFor="ai-effort" className={compact ? labelSize : undefined}>Effort</Label>
-          <Select
-            value={config?.effort ?? "high"}
-            onValueChange={(v) => handleSave("effort", v)}
-          >
-            <SelectTrigger id="ai-effort" className={`w-full ${compact ? "h-7 text-[11px]" : ""}`}>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {EFFORT_OPTIONS.map((opt) => (
-                <SelectItem key={opt.value} value={opt.value}>
-                  {opt.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
+            <div className={fieldGap}>
+              <Label htmlFor="ai-api-key" className={compact ? labelSize : undefined}>API Key / Token</Label>
+              <Input
+                key={`apikey-${activeTab}-${revision}`}
+                id="ai-api-key"
+                type="password"
+                defaultValue={config?.api_key ?? ""}
+                placeholder="sk-ant-... (optional, overrides accounts)"
+                className={compact ? "h-7 text-[11px] font-mono" : "font-mono"}
+                onBlur={(e) => {
+                  const val = e.target.value.trim();
+                  if (val.startsWith("••••")) return;
+                  handleSave("api_key", val || undefined);
+                }}
+              />
+              <p className={`${compact ? "text-[9px]" : "text-[11px]"} text-muted-foreground`}>
+                Direct API key or OAuth token. Leave empty to use connected accounts.
+              </p>
+            </div>
 
-        <div className={fieldGap}>
-          <Label htmlFor="ai-max-turns" className={compact ? labelSize : undefined}>Max Turns (1-500)</Label>
-          <Input
-            key={`turns-${revision}`}
-            id="ai-max-turns"
-            type="number"
-            min={1}
-            max={500}
-            defaultValue={config?.max_turns ?? 100}
-            className={compact ? "h-7 text-[11px]" : undefined}
-            onBlur={(e) => {
-              const val = parseInt(e.target.value);
-              if (!isNaN(val)) handleSave("max_turns", val);
-            }}
-          />
-        </div>
+            <div className={fieldGap}>
+              <Label htmlFor="ai-effort" className={compact ? labelSize : undefined}>Effort</Label>
+              <Select
+                value={config?.effort ?? "high"}
+                onValueChange={(v) => handleSave("effort", v)}
+              >
+                <SelectTrigger id="ai-effort" className={`w-full ${compact ? "h-7 text-[11px]" : ""}`}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {EFFORT_OPTIONS.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
 
-        <div className={fieldGap}>
-          <Label htmlFor="ai-budget" className={compact ? labelSize : undefined}>Max Budget (USD)</Label>
-          <Input
-            key={`budget-${revision}`}
-            id="ai-budget"
-            type="number"
-            step={0.1}
-            min={0.01}
-            max={50}
-            defaultValue={config?.max_budget_usd ?? ""}
-            placeholder="No limit"
-            className={compact ? "h-7 text-[11px]" : undefined}
-            onBlur={(e) => {
-              const val = parseFloat(e.target.value);
-              handleSave("max_budget_usd", isNaN(val) ? undefined : val);
-            }}
-          />
-        </div>
+            <div className={fieldGap}>
+              <Label htmlFor="ai-max-turns" className={compact ? labelSize : undefined}>Max Turns (1-500)</Label>
+              <Input
+                key={`turns-${activeTab}-${revision}`}
+                id="ai-max-turns"
+                type="number"
+                min={1}
+                max={500}
+                defaultValue={config?.max_turns ?? 100}
+                className={compact ? "h-7 text-[11px]" : undefined}
+                onBlur={(e) => {
+                  const val = parseInt(e.target.value);
+                  if (!isNaN(val)) handleSave("max_turns", val);
+                }}
+              />
+            </div>
 
-        <div className={fieldGap}>
-          <Label htmlFor="ai-thinking" className={compact ? labelSize : undefined}>Thinking Budget (tokens)</Label>
-          <Input
-            key={`thinking-${revision}`}
-            id="ai-thinking"
-            type="number"
-            min={0}
-            defaultValue={config?.thinking_budget_tokens ?? ""}
-            placeholder="Disabled"
-            className={compact ? "h-7 text-[11px]" : undefined}
-            onBlur={(e) => {
-              const val = parseInt(e.target.value);
-              handleSave("thinking_budget_tokens", isNaN(val) ? undefined : val);
-            }}
-          />
-        </div>
+            <div className={fieldGap}>
+              <Label htmlFor="ai-budget" className={compact ? labelSize : undefined}>Max Budget (USD)</Label>
+              <Input
+                key={`budget-${activeTab}-${revision}`}
+                id="ai-budget"
+                type="number"
+                step={0.1}
+                min={0.01}
+                max={50}
+                defaultValue={config?.max_budget_usd ?? ""}
+                placeholder="No limit"
+                className={compact ? "h-7 text-[11px]" : undefined}
+                onBlur={(e) => {
+                  const val = parseFloat(e.target.value);
+                  handleSave("max_budget_usd", isNaN(val) ? undefined : val);
+                }}
+              />
+            </div>
+
+            <div className={fieldGap}>
+              <Label htmlFor="ai-thinking" className={compact ? labelSize : undefined}>Thinking Budget (tokens)</Label>
+              <Input
+                key={`thinking-${activeTab}-${revision}`}
+                id="ai-thinking"
+                type="number"
+                min={0}
+                defaultValue={config?.thinking_budget_tokens ?? ""}
+                placeholder="Disabled"
+                className={compact ? "h-7 text-[11px]" : undefined}
+                onBlur={(e) => {
+                  const val = parseInt(e.target.value);
+                  handleSave("thinking_budget_tokens", isNaN(val) ? undefined : val);
+                }}
+              />
+            </div>
+          </>
+        )}
 
+        {/* Common fields: permission mode + system prompt (all providers) */}
         <div className={fieldGap}>
           <Label htmlFor="ai-permission-mode" className={compact ? labelSize : undefined}>Default Permission Mode</Label>
           <Select
@@ -232,11 +291,11 @@ export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
         <div className={fieldGap}>
           <Label htmlFor="ai-system-prompt" className={compact ? labelSize : undefined}>Additional Instructions</Label>
           <textarea
-            key={`sysprompt-${revision}`}
+            key={`sysprompt-${activeTab}-${revision}`}
             id="ai-system-prompt"
-            rows={4}
+            rows={compact ? 3 : 4}
             defaultValue={config?.system_prompt ?? ""}
-            placeholder="Enter additional instructions for Claude..."
+            placeholder={`Enter additional instructions for ${activeTab}...`}
             className={`w-full rounded-md border border-input bg-background px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${compact ? "text-[11px]" : "text-sm"}`}
             onBlur={(e) => {
               const val = e.target.value.trim();

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