langchain_agentx_stream_ui 0.7.9 → 0.8.2

package/dist/index.js

@@ -24,7 +24,7 @@ import {
   fixDiagramSvg,
   markEventIdSeen,
   shouldSkipDuplicateEvent
-} from "./chunk-AMUGAG7U.js";
+} from "./chunk-MI4NGIDF.js";
 import {
   DefaultToolBody,
   InteractionBusContext,
@@ -121,7 +121,7 @@ import {
   useSessionStatus,
   useSessionViewOptions,
   useTimeline
-} from "./chunk-RWKNI52H.js";
+} from "./chunk-XEIQBTD2.js";
 import {
   AGENT_PROGRESS_GUTTER,
   AGENT_PROGRESS_INDENT,
@@ -6134,6 +6134,639 @@ var DEMO_WORKFLOW_SCALE = {
   evictCompletedLoops: true
 };
 
+// src/view/mcp/McpPanel.tsx
+import {
+  useCallback as useCallback6,
+  useEffect as useEffect12,
+  useRef as useRef6,
+  useState as useState8
+} from "react";
+import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+var STATE_META = {
+  connecting: { icon: "\u27F3", label: "\u8FDE\u63A5\u4E2D", tone: "running" },
+  connected: { icon: "\u25CF", label: "\u5DF2\u8FDE\u63A5", tone: "success" },
+  failed: { icon: "\u2717", label: "\u8FDE\u63A5\u5931\u8D25", tone: "error" },
+  disconnected: { icon: "\u25CB", label: "\u672A\u8FDE\u63A5", tone: "muted" },
+  reconnecting: { icon: "\u27F3", label: "\u91CD\u8FDE\u4E2D", tone: "running" },
+  needs_auth: { icon: "\u26A0", label: "\u9700\u8981\u9274\u6743", tone: "warning" },
+  disabled: { icon: "\u2298", label: "\u5DF2\u505C\u7528", tone: "muted" }
+};
+var ADJ_META = {
+  allowed: { icon: "\u2713", label: "\u5C06\u8FDB\u6C60", cls: "lax-mcp-adj--allowed" },
+  denied: { icon: "\u2717", label: "\u88AB deny \u5265\u79BB", cls: "lax-mcp-adj--denied" },
+  uncovered: { icon: "\u26A0", label: "\u672A\u8986\u76D6 \u2192 \u4E0D\u8FDB\u6C60", cls: "lax-mcp-adj--uncovered" }
+};
+var EMPTY_FORM = {
+  name: "",
+  transport: "stdio",
+  command: "",
+  argsText: "",
+  envText: "",
+  cwd: "",
+  url: "",
+  headersText: ""
+};
+function errorMessage(err) {
+  return err instanceof Error ? err.message : String(err);
+}
+function splitLines(text) {
+  return text.split("\n").map((line) => line.trim()).filter((line) => line.length > 0);
+}
+function parseKeyValueLines(text) {
+  const lines = splitLines(text);
+  if (lines.length === 0) return void 0;
+  const record = {};
+  for (const line of lines) {
+    const eq = line.indexOf("=");
+    if (eq <= 0) continue;
+    record[line.slice(0, eq).trim()] = line.slice(eq + 1).trim();
+  }
+  return Object.keys(record).length > 0 ? record : void 0;
+}
+function toSpec(status) {
+  return {
+    name: status.name,
+    transport: status.transport,
+    command: status.command,
+    args: status.args,
+    env: status.env,
+    cwd: status.cwd,
+    url: status.url,
+    headers: status.headers,
+    enabled: status.enabled
+  };
+}
+function buildSpec(form) {
+  const spec = { name: form.name.trim(), transport: form.transport, enabled: true };
+  if (form.transport === "stdio") {
+    spec.command = form.command.trim();
+    const args = form.argsText.trim().split(/\s+/).filter(Boolean);
+    if (args.length > 0) spec.args = args;
+    const env = parseKeyValueLines(form.envText);
+    if (env) spec.env = env;
+    if (form.cwd.trim()) spec.cwd = form.cwd.trim();
+  } else {
+    spec.url = form.url.trim();
+    const headers = parseKeyValueLines(form.headersText);
+    if (headers) spec.headers = headers;
+  }
+  return spec;
+}
+function McpPanel({ isOpen, onClose, client, demoServerSpec }) {
+  const panelRef = useRef6(null);
+  const [loading, setLoading] = useState8(true);
+  const [loadError, setLoadError] = useState8(null);
+  const [servers, setServers] = useState8([]);
+  const [summary, setSummary] = useState8(null);
+  const [allowText, setAllowText] = useState8("");
+  const [denyText, setDenyText] = useState8("");
+  const [rulesSaving, setRulesSaving] = useState8(false);
+  const [rulesError, setRulesError] = useState8(null);
+  const [toolsLoads, setToolsLoads] = useState8({});
+  const [expanded, setExpanded] = useState8({});
+  const [busy, setBusy] = useState8(null);
+  const [formOpen, setFormOpen] = useState8(false);
+  const [form, setForm] = useState8(EMPTY_FORM);
+  const [formError, setFormError] = useState8(null);
+  const refresh = useCallback6(
+    async (showLoading = false) => {
+      if (showLoading) setLoading(true);
+      try {
+        const [serversRes, summaryRes, rulesRes] = await Promise.all([
+          client.listServers(),
+          client.getSummary(),
+          client.getRules()
+        ]);
+        setServers(serversRes.servers);
+        setSummary(summaryRes);
+        setAllowText(rulesRes.allow.join("\n"));
+        setDenyText(rulesRes.deny.join("\n"));
+        setLoadError(null);
+      } catch (err) {
+        setLoadError(errorMessage(err));
+      } finally {
+        if (showLoading) setLoading(false);
+      }
+    },
+    [client]
+  );
+  const loadTools = useCallback6(
+    async (name) => {
+      setToolsLoads((prev) => ({ ...prev, [name]: { status: "loading", tools: [] } }));
+      try {
+        const res = await client.listTools(name);
+        setToolsLoads((prev) => ({ ...prev, [name]: { status: "ok", tools: res.tools } }));
+      } catch (err) {
+        setToolsLoads((prev) => ({
+          ...prev,
+          [name]: { status: "error", error: errorMessage(err), tools: [] }
+        }));
+      }
+    },
+    [client]
+  );
+  useEffect12(() => {
+    if (!isOpen) return;
+    void refresh(true);
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    window.addEventListener("keydown", onKeyDown);
+    panelRef.current?.focus();
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [isOpen, refresh, onClose]);
+  const trapTabFocus = (event) => {
+    if (event.key !== "Tab" || panelRef.current === null) return;
+    const focusables = Array.from(
+      panelRef.current.querySelectorAll(
+        "button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href]"
+      )
+    ).filter((el) => el.offsetParent !== null);
+    if (focusables.length === 0) return;
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const active = document.activeElement;
+    if (event.shiftKey && active === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+  const runAction = async (key, fn) => {
+    if (busy !== null) return;
+    setBusy(key);
+    try {
+      await fn();
+    } catch (err) {
+      setLoadError(errorMessage(err));
+    } finally {
+      setBusy(null);
+    }
+  };
+  const saveServerList = (next, after) => runAction("put-servers", async () => {
+    await client.putServers(next);
+    after?.();
+    await refresh();
+  });
+  const submitForm = () => {
+    const spec = buildSpec(form);
+    if (spec.name === "") {
+      setFormError("name \u4E0D\u80FD\u4E3A\u7A7A");
+      return;
+    }
+    if (servers.some((s) => s.name === spec.name)) {
+      setFormError(`server "${spec.name}" \u5DF2\u5B58\u5728`);
+      return;
+    }
+    if (spec.transport === "stdio" && !spec.command) {
+      setFormError("stdio server \u9700\u8981 command");
+      return;
+    }
+    if (spec.transport !== "stdio" && !spec.url) {
+      setFormError(`${spec.transport} server \u9700\u8981 url`);
+      return;
+    }
+    setFormError(null);
+    void saveServerList([...servers.map(toSpec), spec], () => {
+      setFormOpen(false);
+      setForm(EMPTY_FORM);
+    });
+  };
+  const deleteServer = (name) => saveServerList(
+    servers.filter((s) => s.name !== name).map(toSpec)
+  );
+  const toggleEnabled = (server) => runAction(`toggle:${server.name}`, async () => {
+    if (server.enabled) await client.disconnectServer(server.name);
+    else await client.connectServer(server.name);
+    await refresh();
+  });
+  const reconnectServer = (name) => runAction(`reconnect:${name}`, async () => {
+    await client.reconnectServer(name);
+    await refresh();
+  });
+  const toggleTools = (name) => {
+    const next = !expanded[name];
+    setExpanded((prev) => ({ ...prev, [name]: next }));
+    if (next && !toolsLoads[name]) void loadTools(name);
+  };
+  const saveRules = async () => {
+    if (rulesSaving) return;
+    setRulesSaving(true);
+    setRulesError(null);
+    try {
+      const res = await client.putRules({ allow: splitLines(allowText), deny: splitLines(denyText) });
+      setAllowText(res.allow.join("\n"));
+      setDenyText(res.deny.join("\n"));
+      setToolsLoads({});
+      for (const name of Object.keys(expanded)) {
+        if (expanded[name]) void loadTools(name);
+      }
+      await refresh();
+    } catch (err) {
+      setRulesError(errorMessage(err));
+    } finally {
+      setRulesSaving(false);
+    }
+  };
+  if (!isOpen) return null;
+  const toolsInPool = summary !== null ? summary.tools_total - summary.tools_blocked : null;
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      className: "lax-mcp-overlay",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "MCP Servers",
+      "data-testid": "lax-mcp-overlay",
+      onClick: (event) => {
+        if (event.target === event.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxs17(
+        "div",
+        {
+          className: "lax-mcp-panel",
+          ref: panelRef,
+          tabIndex: -1,
+          "data-testid": "lax-mcp-panel",
+          onKeyDown: trapTabFocus,
+          onClick: (event) => event.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs17("header", { className: "lax-mcp-header", children: [
+              /* @__PURE__ */ jsx20("span", { className: "lax-mcp-title", children: "MCP Servers" }),
+              /* @__PURE__ */ jsx20(
+                "span",
+                {
+                  className: `lax-mcp-ready${summary?.ready ? " is-ready" : " is-not-ready"}`,
+                  "aria-live": "polite",
+                  "data-testid": "lax-mcp-ready",
+                  children: summary?.ready ? "\u25CF \u5C31\u7EEA" : "\u26A0 \u672A\u5C31\u7EEA"
+                }
+              ),
+              /* @__PURE__ */ jsx20("button", { type: "button", className: "lax-mcp-close", "aria-label": "\u5173\u95ED", onClick: onClose, children: "\xD7" })
+            ] }),
+            loadError !== null && /* @__PURE__ */ jsxs17("div", { className: "lax-mcp-error", role: "alert", "data-testid": "lax-mcp-error", children: [
+              /* @__PURE__ */ jsx20("span", { className: "lax-mcp-error-text", children: loadError }),
+              /* @__PURE__ */ jsx20("button", { type: "button", className: "lax-mcp-btn", onClick: () => void refresh(true), children: "\u91CD\u8BD5" })
+            ] }),
+            /* @__PURE__ */ jsx20("div", { className: "lax-mcp-body", children: loading ? /* @__PURE__ */ jsx20("div", { className: "lax-mcp-loading", "data-testid": "lax-mcp-loading", children: "\u52A0\u8F7D\u4E2D\u2026" }) : /* @__PURE__ */ jsxs17(Fragment5, { children: [
+              /* @__PURE__ */ jsxs17("section", { className: "lax-mcp-section", "aria-label": "server \u914D\u7F6E", children: [
+                /* @__PURE__ */ jsx20("div", { className: "lax-mcp-section-title", children: "\u2460 Server \u914D\u7F6E" }),
+                /* @__PURE__ */ jsxs17("div", { className: "lax-mcp-config-actions", children: [
+                  /* @__PURE__ */ jsx20(
+                    "button",
+                    {
+                      type: "button",
+                      className: "lax-mcp-btn",
+                      onClick: () => {
+                        setFormOpen((v) => !v);
+                        setFormError(null);
+                      },
+                      children: "\uFF0B \u6DFB\u52A0 server"
+                    }
+                  ),
+                  demoServerSpec !== void 0 && /* @__PURE__ */ jsxs17(
+                    "button",
+                    {
+                      type: "button",
+                      className: "lax-mcp-btn",
+                      disabled: servers.some((s) => s.name === demoServerSpec.name),
+                      onClick: () => void saveServerList([...servers.map(toSpec), demoServerSpec]),
+                      children: [
+                        "\u26A1 \u6DFB\u52A0\u6F14\u793A server\uFF08",
+                        demoServerSpec.name,
+                        "\uFF09"
+                      ]
+                    }
+                  )
+                ] }),
+                formOpen && /* @__PURE__ */ jsx20(
+                  ServerForm,
+                  {
+                    form,
+                    setForm,
+                    error: formError,
+                    busy: busy !== null,
+                    onSubmit: submitForm,
+                    onCancel: () => {
+                      setFormOpen(false);
+                      setFormError(null);
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs17("section", { className: "lax-mcp-section", "aria-label": "\u8FDE\u63A5\u72B6\u6001\u4E0E\u5DE5\u5177\u6E05\u5355", children: [
+                /* @__PURE__ */ jsx20("div", { className: "lax-mcp-section-title", children: "\u2461 \u8FDE\u63A5\u72B6\u6001 / \u2462 \u5DE5\u5177\u6E05\u5355" }),
+                servers.length === 0 ? /* @__PURE__ */ jsx20("div", { className: "lax-mcp-empty", "data-testid": "lax-mcp-empty", children: "\u5C1A\u672A\u914D\u7F6E MCP server" }) : servers.map((server) => /* @__PURE__ */ jsxs17("div", { className: "lax-mcp-server", "data-server": server.name, children: [
+                  /* @__PURE__ */ jsx20(
+                    McpServerRow,
+                    {
+                      server,
+                      busy: busy !== null,
+                      expanded: expanded[server.name] === true,
+                      onReconnect: () => reconnectServer(server.name),
+                      onToggleEnabled: () => toggleEnabled(server),
+                      onDelete: () => deleteServer(server.name),
+                      onToggleTools: () => toggleTools(server.name)
+                    }
+                  ),
+                  expanded[server.name] === true && /* @__PURE__ */ jsx20(ToolsGroup, { load: toolsLoads[server.name] })
+                ] }, server.name))
+              ] }),
+              /* @__PURE__ */ jsxs17("section", { className: "lax-mcp-section", "aria-label": "\u89C4\u5219\u88C1\u51B3", children: [
+                /* @__PURE__ */ jsx20("div", { className: "lax-mcp-section-title", children: "\u2463 \u89C4\u5219\u88C1\u51B3" }),
+                /* @__PURE__ */ jsx20(
+                  McpRuleEditor,
+                  {
+                    allowText,
+                    denyText,
+                    onAllowChange: setAllowText,
+                    onDenyChange: setDenyText,
+                    saving: rulesSaving,
+                    error: rulesError,
+                    disabled: servers.length === 0,
+                    inPool: toolsInPool,
+                    total: summary?.tools_total ?? null,
+                    blocked: summary?.tools_blocked ?? null,
+                    onSave: () => void saveRules()
+                  }
+                )
+              ] })
+            ] }) })
+          ]
+        }
+      )
+    }
+  );
+}
+function McpServerRow(props) {
+  const { server, busy, expanded, onReconnect, onToggleEnabled, onDelete, onToggleTools } = props;
+  const meta = STATE_META[server.state];
+  const rowBusy = server.state === "connecting" || server.state === "reconnecting";
+  return /* @__PURE__ */ jsxs17("div", { className: `lax-mcp-server-row lax-mcp-server-row--${server.state}`, children: [
+    /* @__PURE__ */ jsx20("span", { className: `lax-mcp-state-icon tone-${meta.tone}`, role: "img", "aria-label": meta.label, children: meta.icon }),
+    /* @__PURE__ */ jsx20("span", { className: "lax-mcp-server-name", children: server.name }),
+    /* @__PURE__ */ jsx20("span", { className: "lax-mcp-server-meta", children: server.transport }),
+    /* @__PURE__ */ jsx20("span", { className: "lax-mcp-server-meta", children: server.state === "connected" ? server.tool_count === 0 ? "\u5DF2\u8FDE\u63A5 \xB7 \u672A\u66B4\u9732\u5DE5\u5177" : `${server.tool_count ?? "\u2013"} tool` : null }),
+    /* @__PURE__ */ jsxs17("span", { className: "lax-mcp-server-actions", children: [
+      /* @__PURE__ */ jsx20(
+        "button",
+        {
+          type: "button",
+          className: "lax-mcp-btn",
+          disabled: busy || server.state !== "connected",
+          "aria-expanded": expanded,
+          onClick: onToggleTools,
+          children: expanded ? "\u25BE \u5DE5\u5177" : "\u25B8 \u5DE5\u5177"
+        }
+      ),
+      /* @__PURE__ */ jsx20("button", { type: "button", className: "lax-mcp-btn", disabled: busy || rowBusy, onClick: onReconnect, children: "\u21BB \u91CD\u8FDE" }),
+      /* @__PURE__ */ jsx20(
+        "button",
+        {
+          type: "button",
+          className: "lax-mcp-btn",
+          disabled: busy || rowBusy,
+          onClick: onToggleEnabled,
+          children: server.enabled ? "\u23FB \u505C\u7528" : "\u23FB \u542F\u7528"
+        }
+      ),
+      /* @__PURE__ */ jsx20("button", { type: "button", className: "lax-mcp-btn", disabled: busy, onClick: onDelete, children: "\u{1F5D1} \u5220\u9664" }),
+      server.state === "needs_auth" && /* @__PURE__ */ jsx20(
+        "button",
+        {
+          type: "button",
+          className: "lax-mcp-btn",
+          disabled: true,
+          title: "OAuth \u767B\u5F55\uFF08\u9884\u7559\uFF0C\u672A\u5B9E\u73B0\uFF09",
+          children: "\u{1F511} OAuth \u767B\u5F55"
+        }
+      )
+    ] }),
+    server.state === "failed" && server.error != null && server.error !== "" && /* @__PURE__ */ jsx20("div", { className: "lax-mcp-server-error", children: server.error })
+  ] });
+}
+function ToolsGroup({ load }) {
+  if (load === void 0 || load.status === "loading") {
+    return /* @__PURE__ */ jsx20("div", { className: "lax-mcp-tools lax-mcp-tools--loading", "data-testid": "lax-mcp-tools-loading", children: "\u6E05\u5355\u62C9\u53D6\u4E2D\u2026" });
+  }
+  if (load.status === "error") {
+    return /* @__PURE__ */ jsxs17("div", { className: "lax-mcp-tools lax-mcp-tools--error", role: "alert", children: [
+      "\u53D1\u73B0\u5931\u8D25\uFF1A",
+      load.error
+    ] });
+  }
+  if (load.tools.length === 0) {
+    return /* @__PURE__ */ jsx20("div", { className: "lax-mcp-tools", children: "\u5DF2\u8FDE\u63A5\uFF0C\u4F46\u8BE5 server \u672A\u66B4\u9732\u5DE5\u5177" });
+  }
+  return /* @__PURE__ */ jsx20("div", { className: "lax-mcp-tools", children: load.tools.map((tool) => /* @__PURE__ */ jsx20(McpToolRow, { tool }, tool.model_name)) });
+}
+function McpToolRow({ tool }) {
+  const adj = ADJ_META[tool.adjudication];
+  return /* @__PURE__ */ jsxs17("div", { className: "lax-mcp-tool-row", "data-adjudication": tool.adjudication, children: [
+    /* @__PURE__ */ jsx20("span", { className: "lax-mcp-tool-name", children: tool.model_name }),
+    tool.destructive_hint === true ? /* @__PURE__ */ jsx20("span", { className: "lax-mcp-tool-hint tone-error", children: "\u5199\u64CD\u4F5C" }) : tool.read_only_hint === true ? /* @__PURE__ */ jsx20("span", { className: "lax-mcp-tool-hint tone-success", children: "readOnly" }) : null,
+    /* @__PURE__ */ jsxs17("span", { className: `lax-mcp-adj ${adj.cls}`, children: [
+      adj.icon,
+      " ",
+      adj.label
+    ] })
+  ] });
+}
+function McpRuleEditor(props) {
+  const {
+    allowText,
+    denyText,
+    onAllowChange,
+    onDenyChange,
+    saving,
+    error,
+    disabled,
+    inPool,
+    total,
+    blocked,
+    onSave
+  } = props;
+  return /* @__PURE__ */ jsxs17("div", { className: "lax-mcp-rules", "data-testid": "lax-mcp-rules", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "lax-mcp-rules-grid", children: [
+      /* @__PURE__ */ jsxs17("label", { className: "lax-mcp-field", children: [
+        /* @__PURE__ */ jsx20("span", { children: "allow\uFF08\u6BCF\u884C\u4E00\u4E2A\u5DE5\u5177\u540D\uFF09" }),
+        /* @__PURE__ */ jsx20(
+          "textarea",
+          {
+            className: "lax-mcp-textarea",
+            value: allowText,
+            onChange: (event) => onAllowChange(event.target.value),
+            placeholder: "mcp__demo__echo"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs17("label", { className: "lax-mcp-field", children: [
+        /* @__PURE__ */ jsx20("span", { children: "deny\uFF08\u6BCF\u884C\u4E00\u4E2A\u5DE5\u5177\u540D\uFF09" }),
+        /* @__PURE__ */ jsx20(
+          "textarea",
+          {
+            className: "lax-mcp-textarea",
+            value: denyText,
+            onChange: (event) => onDenyChange(event.target.value),
+            placeholder: "mcp__demo__write"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx20("div", { className: "lax-mcp-hint", children: "\u9ED8\u8BA4\u5168 deny\uFF08fail closed\uFF09\uFF1A\u672A\u8986\u76D6\u89C4\u5219\u7684\u5DE5\u5177\u4E0D\u4F1A\u8FDB\u5165\u4F1A\u8BDD\u3002\u89C4\u5219\u53D8\u66F4\u5BF9\u65B0\u4F1A\u8BDD\u751F\u6548\u3002" }),
+    /* @__PURE__ */ jsxs17("div", { className: "lax-mcp-rules-preview", "data-testid": "lax-mcp-rules-preview", children: [
+      "\u88C1\u51B3\u9884\u89C8\uFF1A",
+      inPool !== null && total !== null ? `${inPool}/${total} \u8FDB\u6C60` : "\u2013",
+      blocked !== null ? ` \xB7 ${blocked} \u88AB\u62E6\u622A\uFF08deny / \u672A\u8986\u76D6\uFF09` : ""
+    ] }),
+    error !== null && /* @__PURE__ */ jsxs17("div", { className: "lax-mcp-inline-error", role: "alert", children: [
+      "\u4FDD\u5B58\u5931\u8D25\uFF1A",
+      error
+    ] }),
+    /* @__PURE__ */ jsx20(
+      "button",
+      {
+        type: "button",
+        className: "lax-mcp-btn lax-mcp-btn--primary",
+        disabled: disabled || saving,
+        onClick: onSave,
+        children: saving ? "\u4FDD\u5B58\u4E2D\u2026" : "\u4FDD\u5B58\u89C4\u5219"
+      }
+    )
+  ] });
+}
+function ServerForm(props) {
+  const { form, setForm, error, busy, onSubmit, onCancel } = props;
+  const set = (patch) => setForm((prev) => ({ ...prev, ...patch }));
+  const isStdio = form.transport === "stdio";
+  return /* @__PURE__ */ jsxs17(
+    "form",
+    {
+      className: "lax-mcp-form",
+      onSubmit: (event) => {
+        event.preventDefault();
+        onSubmit();
+      },
+      children: [
+        /* @__PURE__ */ jsxs17("div", { className: "lax-mcp-form-row", children: [
+          /* @__PURE__ */ jsxs17("label", { className: "lax-mcp-field", children: [
+            /* @__PURE__ */ jsx20("span", { children: "name" }),
+            /* @__PURE__ */ jsx20(
+              "input",
+              {
+                className: "lax-mcp-input",
+                value: form.name,
+                onChange: (event) => set({ name: event.target.value }),
+                placeholder: "demo"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs17("label", { className: "lax-mcp-field", children: [
+            /* @__PURE__ */ jsx20("span", { children: "transport" }),
+            /* @__PURE__ */ jsxs17(
+              "select",
+              {
+                className: "lax-mcp-select",
+                value: form.transport,
+                onChange: (event) => set({ transport: event.target.value }),
+                children: [
+                  /* @__PURE__ */ jsx20("option", { value: "stdio", children: "stdio" }),
+                  /* @__PURE__ */ jsx20("option", { value: "sse", children: "sse" }),
+                  /* @__PURE__ */ jsx20("option", { value: "http", children: "http" })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        isStdio ? /* @__PURE__ */ jsxs17(Fragment5, { children: [
+          /* @__PURE__ */ jsxs17("label", { className: "lax-mcp-field", children: [
+            /* @__PURE__ */ jsx20("span", { children: "command" }),
+            /* @__PURE__ */ jsx20(
+              "input",
+              {
+                className: "lax-mcp-input",
+                value: form.command,
+                onChange: (event) => set({ command: event.target.value }),
+                placeholder: "python"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs17("label", { className: "lax-mcp-field", children: [
+            /* @__PURE__ */ jsx20("span", { children: "args\uFF08\u7A7A\u683C\u5206\u9694\uFF09" }),
+            /* @__PURE__ */ jsx20(
+              "input",
+              {
+                className: "lax-mcp-input",
+                value: form.argsText,
+                onChange: (event) => set({ argsText: event.target.value }),
+                placeholder: "-u echo_server.py"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs17("label", { className: "lax-mcp-field", children: [
+            /* @__PURE__ */ jsx20("span", { children: "env\uFF08\u6BCF\u884C KEY=VALUE\uFF09" }),
+            /* @__PURE__ */ jsx20(
+              "textarea",
+              {
+                className: "lax-mcp-textarea",
+                value: form.envText,
+                onChange: (event) => set({ envText: event.target.value })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs17("label", { className: "lax-mcp-field", children: [
+            /* @__PURE__ */ jsx20("span", { children: "cwd" }),
+            /* @__PURE__ */ jsx20(
+              "input",
+              {
+                className: "lax-mcp-input",
+                value: form.cwd,
+                onChange: (event) => set({ cwd: event.target.value })
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ jsxs17(Fragment5, { children: [
+          /* @__PURE__ */ jsxs17("label", { className: "lax-mcp-field", children: [
+            /* @__PURE__ */ jsx20("span", { children: "url" }),
+            /* @__PURE__ */ jsx20(
+              "input",
+              {
+                className: "lax-mcp-input",
+                value: form.url,
+                onChange: (event) => set({ url: event.target.value }),
+                placeholder: "http://localhost:9000/sse"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs17("label", { className: "lax-mcp-field", children: [
+            /* @__PURE__ */ jsx20("span", { children: "headers\uFF08\u6BCF\u884C KEY=VALUE\uFF09" }),
+            /* @__PURE__ */ jsx20(
+              "textarea",
+              {
+                className: "lax-mcp-textarea",
+                value: form.headersText,
+                onChange: (event) => set({ headersText: event.target.value })
+              }
+            )
+          ] })
+        ] }),
+        error !== null && /* @__PURE__ */ jsx20("div", { className: "lax-mcp-inline-error", role: "alert", children: error }),
+        /* @__PURE__ */ jsxs17("div", { className: "lax-mcp-form-row", children: [
+          /* @__PURE__ */ jsx20("button", { type: "submit", className: "lax-mcp-btn lax-mcp-btn--primary", disabled: busy, children: "\u4FDD\u5B58" }),
+          /* @__PURE__ */ jsx20("button", { type: "button", className: "lax-mcp-btn", onClick: onCancel, children: "\u53D6\u6D88" })
+        ] })
+      ]
+    }
+  );
+}
+
 // src/view/tools/groupParallelTools.ts
 function buildTimelineEntries(rootIds, byId, options = {}) {
   const filtered = options.hideStandalonePermissions ? rootIds.filter((id) => byId[id]?.kind !== "permission") : [...rootIds];
@@ -6171,18 +6804,18 @@ function buildTimelineEntries(rootIds, byId, options = {}) {
 }
 
 // src/view/nodes/SubAgentNode.tsx
-import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 function SubAgentBlock({ nodeId }) {
   const node = useNodeTyped(nodeId, "subagent");
   const childIds = useChildren(nodeId);
   const registry = useNodeRegistry();
   if (!node) return null;
-  return /* @__PURE__ */ jsxs17("div", { className: "lax-subagent-block", "data-status": node.status, children: [
-    /* @__PURE__ */ jsxs17("div", { className: "lax-subagent-block__header", children: [
+  return /* @__PURE__ */ jsxs18("div", { className: "lax-subagent-block", "data-status": node.status, children: [
+    /* @__PURE__ */ jsxs18("div", { className: "lax-subagent-block__header", children: [
       "SubAgent: ",
       node.subagentId
     ] }),
-    /* @__PURE__ */ jsx20("div", { className: "lax-subagent-block__children", children: childIds.map((childId) => /* @__PURE__ */ jsx20(TimelineItem, { nodeId: childId, registry }, childId)) })
+    /* @__PURE__ */ jsx21("div", { className: "lax-subagent-block__children", children: childIds.map((childId) => /* @__PURE__ */ jsx21(TimelineItem, { nodeId: childId, registry }, childId)) })
   ] });
 }
 
@@ -6256,6 +6889,7 @@ export {
   MAX_PREVIEW_LINES,
   MIN_HINT_DISPLAY_MS,
   MarkdownBlock,
+  McpPanel,
   MermaidDiagram,
   MissingApplicationKindError,
   MultiAgentSession,