mirror of
https://github.com/luckyyzh/pi-agent-integrated.git
synced 2026-10-03 02:59:35 +00:00
724 lines
27 KiB
TypeScript
724 lines
27 KiB
TypeScript
"use client";
|
||
|
||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||
import { useIsMobile } from "@/hooks/useIsMobile";
|
||
import { useI18n } from "@/hooks/useI18n";
|
||
|
||
interface McpServerEntry {
|
||
command?: string;
|
||
args?: string[];
|
||
socket?: string;
|
||
env?: Record<string, string>;
|
||
cwd?: string;
|
||
url?: string;
|
||
headers?: Record<string, string>;
|
||
auth?: "oauth" | "bearer" | false;
|
||
bearerToken?: string;
|
||
bearerTokenEnv?: string;
|
||
lifecycle?: "keep-alive" | "lazy" | "lazy-keep-alive" | "eager";
|
||
idleTimeout?: number;
|
||
requestTimeoutMs?: number;
|
||
exposeResources?: boolean;
|
||
directTools?: boolean | string[];
|
||
includeTools?: string[];
|
||
excludeTools?: string[];
|
||
debug?: boolean;
|
||
trace?: boolean;
|
||
disabled?: boolean;
|
||
[key: string]: unknown;
|
||
}
|
||
|
||
interface McpConfigFile {
|
||
mcpServers: Record<string, McpServerEntry>;
|
||
settings?: Record<string, unknown>;
|
||
imports?: string[];
|
||
}
|
||
|
||
type TransportKind = "stdio" | "http";
|
||
|
||
function entrySummary(entry: McpServerEntry): string {
|
||
if (entry.url) {
|
||
try {
|
||
return new URL(entry.url).host || entry.url;
|
||
} catch {
|
||
return entry.url;
|
||
}
|
||
}
|
||
if (entry.socket) return entry.socket;
|
||
const cmd = entry.command ?? "";
|
||
const args = entry.args?.length ? ` ${entry.args.join(" ")}` : "";
|
||
return `${cmd}${args}`;
|
||
}
|
||
|
||
function transportOf(entry: McpServerEntry): TransportKind {
|
||
return entry.url ? "http" : "stdio";
|
||
}
|
||
|
||
function envToRows(env?: Record<string, string>): Array<{ key: string; value: string }> {
|
||
return Object.entries(env ?? {}).map(([key, value]) => ({ key, value }));
|
||
}
|
||
|
||
function rowsToEnv(rows: Array<{ key: string; value: string }>): Record<string, string> {
|
||
const env: Record<string, string> = {};
|
||
for (const row of rows) {
|
||
const key = row.key.trim();
|
||
if (key) env[key] = row.value;
|
||
}
|
||
return env;
|
||
}
|
||
|
||
// ── Form helpers ─────────────────────────────────────────────────────────────
|
||
|
||
const inputStyle: React.CSSProperties = {
|
||
padding: "6px 9px",
|
||
background: "var(--bg-panel)",
|
||
border: "1px solid var(--border)",
|
||
borderRadius: 5,
|
||
color: "var(--text)",
|
||
fontSize: 12,
|
||
outline: "none",
|
||
width: "100%",
|
||
boxSizing: "border-box",
|
||
};
|
||
|
||
function Field({ label, children }: { label: string; children: React.ReactNode }) {
|
||
return (
|
||
<div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
|
||
<label style={{ fontSize: 11, color: "var(--text-muted)", fontWeight: 500 }}>{label}</label>
|
||
{children}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function TextInput({ value, onChange, placeholder, mono }: { value: string; onChange: (v: string) => void; placeholder?: string; mono?: boolean }) {
|
||
return (
|
||
<input
|
||
value={value}
|
||
onChange={(e) => onChange(e.target.value)}
|
||
placeholder={placeholder}
|
||
style={{ ...inputStyle, fontFamily: mono ? "var(--font-mono)" : "inherit" }}
|
||
/>
|
||
);
|
||
}
|
||
|
||
function TextArea({
|
||
value,
|
||
onChange,
|
||
rows,
|
||
placeholder,
|
||
mono,
|
||
}: {
|
||
value: string;
|
||
onChange: (v: string) => void;
|
||
rows: number;
|
||
placeholder?: string;
|
||
mono?: boolean;
|
||
}) {
|
||
return (
|
||
<textarea
|
||
value={value}
|
||
onChange={(e) => onChange(e.target.value)}
|
||
rows={rows}
|
||
placeholder={placeholder}
|
||
spellCheck={false}
|
||
style={{
|
||
...inputStyle,
|
||
resize: "vertical",
|
||
lineHeight: 1.5,
|
||
fontFamily: mono ? "var(--font-mono)" : "inherit",
|
||
}}
|
||
/>
|
||
);
|
||
}
|
||
|
||
function NumInput({ value, onChange, placeholder }: { value: string; onChange: (v: string) => void; placeholder?: string }) {
|
||
return <input type="number" value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} style={inputStyle} />;
|
||
}
|
||
|
||
function Select({ value, onChange, options }: { value: string; onChange: (v: string) => void; options: readonly string[] }) {
|
||
const { t } = useI18n();
|
||
return (
|
||
<select value={value} onChange={(e) => onChange(e.target.value)} style={{ ...inputStyle, color: value ? "var(--text)" : "var(--text-dim)" }}>
|
||
<option value="">— {t("i18n.default")} —</option>
|
||
{options.map((o) => (
|
||
<option key={o} value={o}>
|
||
{o}
|
||
</option>
|
||
))}
|
||
</select>
|
||
);
|
||
}
|
||
|
||
function buttonStyle(disabled?: boolean, danger?: boolean): React.CSSProperties {
|
||
return {
|
||
padding: "6px 12px",
|
||
background: danger ? "rgba(239,68,68,0.08)" : "none",
|
||
border: "1px solid var(--border)",
|
||
borderRadius: 6,
|
||
color: danger ? "#ef4444" : "var(--text-muted)",
|
||
cursor: disabled ? "not-allowed" : "pointer",
|
||
fontSize: 12,
|
||
opacity: disabled ? 0.5 : 1,
|
||
};
|
||
}
|
||
|
||
// ── Env row editor ───────────────────────────────────────────────────────────
|
||
|
||
function EnvEditor({ rows, onChange }: { rows: Array<{ key: string; value: string }>; onChange: (rows: Array<{ key: string; value: string }>) => void }) {
|
||
const { t } = useI18n();
|
||
const update = (index: number, patch: Partial<{ key: string; value: string }>) => {
|
||
onChange(rows.map((row, i) => (i === index ? { ...row, ...patch } : row)));
|
||
};
|
||
return (
|
||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||
{rows.map((row, i) => (
|
||
<div key={i} style={{ display: "flex", gap: 6 }}>
|
||
<input
|
||
value={row.key}
|
||
onChange={(e) => update(i, { key: e.target.value })}
|
||
placeholder="NAME"
|
||
spellCheck={false}
|
||
style={{ ...inputStyle, width: "38%", fontFamily: "var(--font-mono)" }}
|
||
/>
|
||
<input
|
||
value={row.value}
|
||
onChange={(e) => update(i, { value: e.target.value })}
|
||
placeholder="value"
|
||
spellCheck={false}
|
||
style={{ ...inputStyle, flex: 1, fontFamily: "var(--font-mono)" }}
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={() => onChange(rows.filter((_, j) => j !== i))}
|
||
title={t("i18n.remove")}
|
||
style={{ ...buttonStyle(false, true), padding: "0 9px", flexShrink: 0 }}
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
))}
|
||
<button type="button" onClick={() => onChange([...rows, { key: "", value: "" }])} style={{ ...buttonStyle(false), alignSelf: "flex-start" }}>
|
||
+ {t("mcp.addEnv")}
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Server detail form ───────────────────────────────────────────────────────
|
||
|
||
function ServerDetail({
|
||
name,
|
||
entry,
|
||
onRename,
|
||
onChange,
|
||
onDelete,
|
||
}: {
|
||
name: string;
|
||
entry: McpServerEntry;
|
||
onRename: (newName: string) => void;
|
||
onChange: (entry: McpServerEntry) => void;
|
||
onDelete: () => void;
|
||
}) {
|
||
const { t } = useI18n();
|
||
const transport = transportOf(entry);
|
||
const [rawJson, setRawJson] = useState(() => JSON.stringify(entry, null, 2));
|
||
const [jsonError, setJsonError] = useState<string | null>(null);
|
||
const [advancedOpen, setAdvancedOpen] = useState(false);
|
||
const [headersDraft, setHeadersDraft] = useState(() => JSON.stringify(entry.headers ?? {}, null, 2));
|
||
const [headersInvalid, setHeadersInvalid] = useState(false);
|
||
|
||
const patch = (p: Partial<McpServerEntry>) => onChange({ ...entry, ...p });
|
||
const num = (v: string): number | undefined => (v.trim() === "" ? undefined : Number(v));
|
||
|
||
const applyJson = () => {
|
||
try {
|
||
const parsed = JSON.parse(rawJson) as McpServerEntry;
|
||
if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) throw new Error("object expected");
|
||
setJsonError(null);
|
||
onChange(parsed);
|
||
setAdvancedOpen(false);
|
||
} catch (e) {
|
||
setJsonError(e instanceof Error ? e.message : String(e));
|
||
}
|
||
};
|
||
|
||
const setTransport = (kind: TransportKind) => {
|
||
if (kind === transport) return;
|
||
if (kind === "stdio") {
|
||
const rest: McpServerEntry = { ...entry };
|
||
delete rest.url;
|
||
delete rest.headers;
|
||
delete rest.auth;
|
||
delete rest.bearerToken;
|
||
delete rest.bearerTokenEnv;
|
||
onChange(rest);
|
||
} else {
|
||
onChange({ ...entry, url: entry.url ?? "https://example.com/mcp" });
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div style={{ display: "flex", flexDirection: "column", gap: 18, maxWidth: 680 }}>
|
||
{/* Header row: name + enable + delete */}
|
||
<div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
|
||
<Field label={t("mcp.serverName")}>
|
||
<div style={{ display: "flex", gap: 6 }}>
|
||
<input
|
||
value={name}
|
||
onChange={(e) => onRename(e.target.value)}
|
||
spellCheck={false}
|
||
style={{ ...inputStyle, width: 200, fontFamily: "var(--font-mono)", fontWeight: 600 }}
|
||
/>
|
||
<button type="button" onClick={onDelete} style={{ ...buttonStyle(false, true), flexShrink: 0 }}>
|
||
{t("i18n.remove")}
|
||
</button>
|
||
</div>
|
||
</Field>
|
||
<div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 8 }}>
|
||
<span style={{ fontSize: 12, color: "var(--text-dim)" }}>{t("mcp.enabled")}</span>
|
||
<input
|
||
type="checkbox"
|
||
checked={!entry.disabled}
|
||
onChange={(e) => patch({ disabled: !e.target.checked })}
|
||
style={{ width: 14, height: 14, accentColor: "var(--accent)", cursor: "pointer" }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Transport */}
|
||
<Field label={t("mcp.transport")}>
|
||
<div style={{ display: "inline-flex", border: "1px solid var(--border)", borderRadius: 7, overflow: "hidden", alignSelf: "flex-start" }}>
|
||
{(["stdio", "http"] as const).map((kind) => (
|
||
<button
|
||
key={kind}
|
||
type="button"
|
||
onClick={() => setTransport(kind)}
|
||
style={{
|
||
padding: "5px 14px",
|
||
border: "none",
|
||
cursor: "pointer",
|
||
fontSize: 12,
|
||
background: transport === kind ? "var(--accent)" : "transparent",
|
||
color: transport === kind ? "#fff" : "var(--text-muted)",
|
||
}}
|
||
>
|
||
{kind.toUpperCase()}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</Field>
|
||
|
||
{transport === "stdio" ? (
|
||
<>
|
||
<Field label={t("mcp.command")}>
|
||
<TextInput value={entry.command ?? ""} onChange={(v) => patch({ command: v || undefined })} placeholder="npx" mono />
|
||
</Field>
|
||
<Field label={t("mcp.args")}>
|
||
<TextArea
|
||
value={(entry.args ?? []).join("\n")}
|
||
onChange={(v) => patch({ args: v.split("\n").map((s) => s.trim()).filter(Boolean) })}
|
||
rows={4}
|
||
mono
|
||
/>
|
||
</Field>
|
||
</>
|
||
) : (
|
||
<>
|
||
<Field label={t("mcp.url")}>
|
||
<TextInput value={entry.url ?? ""} onChange={(v) => patch({ url: v || undefined })} placeholder="https://…/mcp" mono />
|
||
</Field>
|
||
<Field label={t("mcp.headers")}>
|
||
<TextArea
|
||
value={headersDraft}
|
||
onChange={(v) => {
|
||
setHeadersDraft(v);
|
||
try {
|
||
const parsed = JSON.parse(v) as Record<string, string>;
|
||
setHeadersInvalid(false);
|
||
patch({ headers: parsed });
|
||
} catch {
|
||
setHeadersInvalid(true);
|
||
}
|
||
}}
|
||
rows={3}
|
||
mono
|
||
/>
|
||
{headersInvalid && <div style={{ fontSize: 11, color: "#ef4444" }}>{t("mcp.invalidJson")}</div>}
|
||
</Field>
|
||
<Field label={t("mcp.auth")}>
|
||
<Select
|
||
value={entry.auth === undefined ? "" : String(entry.auth)}
|
||
onChange={(v) => {
|
||
if (v === "false") patch({ auth: false });
|
||
else if (v === "") patch({ auth: undefined });
|
||
else patch({ auth: v as "oauth" | "bearer" });
|
||
}}
|
||
options={["oauth", "bearer", "false"]}
|
||
/>
|
||
</Field>
|
||
{entry.auth === "bearer" && (
|
||
<Field label={t("mcp.bearerToken")}>
|
||
<TextInput value={entry.bearerToken ?? ""} onChange={(v) => patch({ bearerToken: v || undefined })} mono />
|
||
</Field>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* env */}
|
||
<EnvEditor rows={envToRows(entry.env)} onChange={(rows) => patch({ env: rowsToEnv(rows) })} />
|
||
|
||
{/* Optional common fields */}
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 14px" }}>
|
||
<Field label={t("mcp.cwd")}>
|
||
<TextInput value={entry.cwd ?? ""} onChange={(v) => patch({ cwd: v || undefined })} placeholder="${PI_AGENT_APP_ROOT}" mono />
|
||
</Field>
|
||
<Field label={t("mcp.lifecycle")}>
|
||
<Select value={entry.lifecycle ?? ""} onChange={(v) => patch({ lifecycle: (v || undefined) as McpServerEntry["lifecycle"] })} options={["lazy", "keep-alive", "lazy-keep-alive", "eager"]} />
|
||
</Field>
|
||
<Field label={t("mcp.idleTimeout")}>
|
||
<NumInput value={entry.idleTimeout === undefined ? "" : String(entry.idleTimeout)} onChange={(v) => patch({ idleTimeout: num(v) })} placeholder="5" />
|
||
</Field>
|
||
<Field label={t("mcp.requestTimeout")}>
|
||
<NumInput value={entry.requestTimeoutMs === undefined ? "" : String(entry.requestTimeoutMs)} onChange={(v) => patch({ requestTimeoutMs: num(v) })} placeholder="120000" />
|
||
</Field>
|
||
</div>
|
||
|
||
{/* Advanced raw JSON */}
|
||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||
<button
|
||
type="button"
|
||
onClick={() => setAdvancedOpen((o) => !o)}
|
||
style={{ ...buttonStyle(false), alignSelf: "flex-start" }}
|
||
>
|
||
{advancedOpen ? "▾ " : "▸ "} {t("mcp.advanced")}
|
||
</button>
|
||
{advancedOpen && (
|
||
<>
|
||
<TextArea value={rawJson} onChange={(v) => { setRawJson(v); setJsonError(null); }} rows={12} mono />
|
||
{jsonError && <div style={{ fontSize: 11, color: "#ef4444" }}>{t("mcp.invalidJson")}: {jsonError}</div>}
|
||
<div>
|
||
<button type="button" onClick={applyJson} style={{ ...buttonStyle(false), background: "var(--accent)", color: "#fff", borderColor: "var(--accent)" }}>
|
||
{t("mcp.applyJson")}
|
||
</button>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Main panel ───────────────────────────────────────────────────────────────
|
||
|
||
export function McpConfig({ onClose }: { onClose: () => void }) {
|
||
const isMobile = useIsMobile();
|
||
const { t } = useI18n();
|
||
const [config, setConfig] = useState<McpConfigFile>({ mcpServers: {} });
|
||
const [loading, setLoading] = useState(true);
|
||
const [saving, setSaving] = useState(false);
|
||
const [saveError, setSaveError] = useState<string | null>(null);
|
||
const [savedOk, setSavedOk] = useState(false);
|
||
const [selected, setSelected] = useState<string | null>(null);
|
||
const [configPath, setConfigPath] = useState("");
|
||
|
||
const load = useCallback(async () => {
|
||
setLoading(true);
|
||
setSaveError(null);
|
||
try {
|
||
const res = await fetch("/api/mcp");
|
||
const data = (await res.json()) as { config?: McpConfigFile; path?: string; error?: string };
|
||
if (!res.ok || data.error) throw new Error(data.error ?? `HTTP ${res.status}`);
|
||
const next = data.config ?? { mcpServers: {} };
|
||
setConfig(next);
|
||
setConfigPath(data.path ?? "");
|
||
setSelected((current) => (current && next.mcpServers[current] ? current : Object.keys(next.mcpServers)[0] ?? null));
|
||
} catch (e) {
|
||
setSaveError(e instanceof Error ? e.message : String(e));
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
void load();
|
||
}, [load]);
|
||
|
||
const updateServer = useCallback((name: string, entry: McpServerEntry) => {
|
||
setConfig((prev) => ({ ...prev, mcpServers: { ...prev.mcpServers, [name]: entry } }));
|
||
}, []);
|
||
|
||
const renameServer = useCallback((oldName: string, newName: string) => {
|
||
const trimmed = newName.trim();
|
||
if (!trimmed || trimmed === oldName) return;
|
||
setConfig((prev) => {
|
||
if (prev.mcpServers[trimmed]) return prev; // 同名已存在
|
||
const mcpServers = { ...prev.mcpServers };
|
||
mcpServers[trimmed] = mcpServers[oldName];
|
||
delete mcpServers[oldName];
|
||
return { ...prev, mcpServers };
|
||
});
|
||
setSelected(trimmed);
|
||
}, []);
|
||
|
||
const deleteServer = useCallback((name: string) => {
|
||
setConfig((prev) => {
|
||
const mcpServers = { ...prev.mcpServers };
|
||
delete mcpServers[name];
|
||
return { ...prev, mcpServers };
|
||
});
|
||
setSelected((current) => {
|
||
if (current !== name) return current;
|
||
const remaining = Object.keys(config.mcpServers).filter((k) => k !== name);
|
||
return remaining[0] ?? null;
|
||
});
|
||
}, [config.mcpServers]);
|
||
|
||
const addServer = useCallback(() => {
|
||
let finalName = "new-server";
|
||
let n = 1;
|
||
while (config.mcpServers[finalName]) finalName = `new-server-${n++}`;
|
||
setConfig((prev) => ({ ...prev, mcpServers: { ...prev.mcpServers, [finalName]: {} } }));
|
||
setSelected(finalName);
|
||
}, [config.mcpServers]);
|
||
|
||
const handleSave = useCallback(async () => {
|
||
setSaving(true);
|
||
setSaveError(null);
|
||
setSavedOk(false);
|
||
try {
|
||
const res = await fetch("/api/mcp", {
|
||
method: "PUT",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify(config),
|
||
});
|
||
const d = (await res.json()) as { success?: boolean; error?: string };
|
||
if (!res.ok || d.error) setSaveError(d.error ?? `HTTP ${res.status}`);
|
||
else {
|
||
setSavedOk(true);
|
||
setTimeout(() => setSavedOk(false), 2000);
|
||
}
|
||
} catch (e) {
|
||
setSaveError(String(e));
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
}, [config]);
|
||
|
||
const names = useMemo(() => Object.entries(config.mcpServers), [config.mcpServers]);
|
||
const selectedEntry = selected ? config.mcpServers[selected] : undefined;
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
position: "fixed",
|
||
inset: 0,
|
||
zIndex: 1000,
|
||
background: "rgba(0,0,0,0.35)",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
}}
|
||
onClick={(e) => {
|
||
if (e.target === e.currentTarget) onClose();
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
width: isMobile ? "calc(100vw - 16px)" : 860,
|
||
maxWidth: "calc(100vw - 16px)",
|
||
height: isMobile ? "calc(100dvh - 16px)" : "78vh",
|
||
maxHeight: "calc(100dvh - 16px)",
|
||
background: "var(--bg)",
|
||
border: "1px solid var(--border)",
|
||
borderRadius: 10,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
|
||
overflow: "hidden",
|
||
}}
|
||
>
|
||
{/* Header */}
|
||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 18px", borderBottom: "1px solid var(--border)", flexShrink: 0 }}>
|
||
<div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
|
||
<span style={{ fontSize: 15, fontWeight: 700, color: "var(--text)" }}>{t("common.mcp")}</span>
|
||
<code style={{ fontSize: 11, color: "var(--text-muted)", fontFamily: "var(--font-mono)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
|
||
{configPath || "data/agent/mcp.json"}
|
||
</code>
|
||
</div>
|
||
<button onClick={onClose} style={{ background: "none", border: "none", color: "var(--text-muted)", cursor: "pointer", fontSize: 20, lineHeight: 1, padding: "2px 6px" }}>
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
{/* Body */}
|
||
<div style={{ flex: 1, display: "flex", flexDirection: isMobile ? "column" : "row", overflow: "hidden" }}>
|
||
{/* Left: server list */}
|
||
<div
|
||
style={{
|
||
width: isMobile ? "100%" : 230,
|
||
maxHeight: isMobile ? "40vh" : undefined,
|
||
borderRight: isMobile ? "none" : "1px solid var(--border)",
|
||
borderBottom: isMobile ? "1px solid var(--border)" : "none",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
flexShrink: 0,
|
||
background: "var(--bg-panel)",
|
||
}}
|
||
>
|
||
<div style={{ flex: 1, overflowY: "auto", padding: "8px 6px" }}>
|
||
{loading ? (
|
||
<div style={{ padding: "10px 8px", fontSize: 12, color: "var(--text-muted)" }}>{t("i18n.loading")}</div>
|
||
) : names.length === 0 ? (
|
||
<div style={{ padding: "10px 8px", fontSize: 11, color: "var(--text-dim)" }}>{t("mcp.noServers")}</div>
|
||
) : (
|
||
names.map(([sName, sEntry]) => {
|
||
const isSelected = selected === sName;
|
||
return (
|
||
<div
|
||
key={sName}
|
||
onClick={() => setSelected(sName)}
|
||
style={{ display: "flex", alignItems: "center", gap: 7, padding: "8px 8px", borderRadius: 5, cursor: "pointer", background: isSelected ? "var(--bg-selected)" : "none" }}
|
||
onMouseEnter={(e) => {
|
||
if (!isSelected) e.currentTarget.style.background = "var(--bg-hover)";
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
if (!isSelected) e.currentTarget.style.background = "none";
|
||
}}
|
||
>
|
||
<span
|
||
style={{
|
||
flexShrink: 0,
|
||
width: 7,
|
||
height: 7,
|
||
borderRadius: "50%",
|
||
background: sEntry.disabled ? "var(--text-dim)" : "var(--accent)",
|
||
}}
|
||
/>
|
||
<div style={{ minWidth: 0, flex: 1 }}>
|
||
<div
|
||
style={{
|
||
fontSize: 12,
|
||
fontWeight: isSelected ? 600 : 400,
|
||
color: "var(--text)",
|
||
fontFamily: "var(--font-mono)",
|
||
overflow: "hidden",
|
||
textOverflow: "ellipsis",
|
||
whiteSpace: "nowrap",
|
||
}}
|
||
>
|
||
{sName}
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: 10,
|
||
color: "var(--text-dim)",
|
||
fontFamily: "var(--font-mono)",
|
||
overflow: "hidden",
|
||
textOverflow: "ellipsis",
|
||
whiteSpace: "nowrap",
|
||
marginTop: 2,
|
||
}}
|
||
title={entrySummary(sEntry)}
|
||
>
|
||
{entrySummary(sEntry) || (sEntry.disabled ? t("i18n.disabled") : "—")}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})
|
||
)}
|
||
</div>
|
||
{/* Add server */}
|
||
<div style={{ borderTop: "1px solid var(--border)", padding: "8px 6px" }}>
|
||
<button
|
||
type="button"
|
||
onClick={addServer}
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
gap: 5,
|
||
width: "100%",
|
||
padding: "6px 0",
|
||
background: "none",
|
||
border: "1px dashed var(--border)",
|
||
borderRadius: 5,
|
||
color: "var(--text-muted)",
|
||
cursor: "pointer",
|
||
fontSize: 12,
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
e.currentTarget.style.borderColor = "var(--accent)";
|
||
e.currentTarget.style.color = "var(--accent)";
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
e.currentTarget.style.borderColor = "var(--border)";
|
||
e.currentTarget.style.color = "var(--text-muted)";
|
||
}}
|
||
>
|
||
+ {t("mcp.addServer")}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right: detail */}
|
||
<div style={{ flex: 1, overflowY: "auto", padding: 20 }}>
|
||
{loading ? null : selected && selectedEntry ? (
|
||
<ServerDetail
|
||
key={selected}
|
||
name={selected}
|
||
entry={selectedEntry}
|
||
onRename={(n) => renameServer(selected, n)}
|
||
onChange={(entry) => updateServer(selected, entry)}
|
||
onDelete={() => deleteServer(selected)}
|
||
/>
|
||
) : (
|
||
<div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-dim)", fontSize: 13 }}>
|
||
{t("mcp.selectServer")}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Footer */}
|
||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: "10px 18px", borderTop: "1px solid var(--border)", flexShrink: 0 }}>
|
||
<div style={{ minWidth: 0, flex: 1, fontSize: 11, color: "var(--text-dim)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
|
||
{t("mcp.restartHint")}
|
||
</div>
|
||
{saveError && <span style={{ fontSize: 12, color: "#f87171", flexShrink: 0 }}>{saveError}</span>}
|
||
<button onClick={onClose} style={buttonStyle(false)}>
|
||
{t("i18n.close")}
|
||
</button>
|
||
<button
|
||
onClick={handleSave}
|
||
disabled={saving || savedOk}
|
||
style={{
|
||
position: "relative",
|
||
padding: "6px 16px",
|
||
minWidth: 92,
|
||
background: savedOk ? "#16a34a" : saving ? "var(--bg-panel)" : "var(--accent)",
|
||
border: "none",
|
||
borderRadius: 6,
|
||
color: savedOk ? "#fff" : saving ? "var(--text-muted)" : "#fff",
|
||
cursor: saving || savedOk ? "default" : "pointer",
|
||
fontSize: 13,
|
||
fontWeight: 600,
|
||
display: "inline-flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
gap: 6,
|
||
}}
|
||
>
|
||
{savedOk && (
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg>
|
||
)}
|
||
<span>{savedOk ? t("i18n.saved") : saving ? t("i18n.saving") : t("i18n.save")}</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|