@executor-js/plugin-mcp 0.1.0 → 0.2.1

package/dist/AddMcpSource-VM3HY26S.js

@@ -0,0 +1,762 @@
+import {
+  mcpPresets
+} from "./chunk-SKSXXFOA.js";
+import {
+  McpRemoteSourceFields
+} from "./chunk-ZIRGIRGP.js";
+import {
+  addMcpSourceOptimistic,
+  probeMcpEndpoint
+} from "./chunk-2ETJ6LQH.js";
+import {
+  MCP_OAUTH_CONNECTION_SLOT
+} from "./chunk-Z4CRPOLI.js";
+
+// src/react/AddMcpSource.tsx
+import { useReducer, useCallback, useEffect, useRef, useState } from "react";
+import { useAtomSet } from "@effect/atom-react";
+import * as Exit from "effect/Exit";
+import * as Match from "effect/Match";
+import * as Option from "effect/Option";
+import * as Schema from "effect/Schema";
+import { useScope } from "@executor-js/react/api/scope-context";
+import { Button } from "@executor-js/react/components/button";
+import {
+  CardStack,
+  CardStackContent,
+  CardStackEntry,
+  CardStackEntryField
+} from "@executor-js/react/components/card-stack";
+import { FieldLabel } from "@executor-js/react/components/field";
+import { FilterTabs } from "@executor-js/react/components/filter-tabs";
+import { FloatActions } from "@executor-js/react/components/float-actions";
+import { Input } from "@executor-js/react/components/input";
+import { Label } from "@executor-js/react/components/label";
+import { Spinner } from "@executor-js/react/components/spinner";
+import { Textarea } from "@executor-js/react/components/textarea";
+import {
+  emptyHttpCredentials,
+  httpCredentialsValid,
+  HttpCredentialsEditor,
+  serializeScopedHttpCredentials,
+  serializeHttpCredentials
+} from "@executor-js/react/plugins/http-credentials";
+import {
+  sourceDisplayNameFromUrl,
+  slugifyNamespace,
+  SourceIdentityFields,
+  useSourceIdentity
+} from "@executor-js/react/plugins/source-identity";
+import { useSecretPickerSecrets } from "@executor-js/react/plugins/use-secret-picker-secrets";
+import {
+  oauthCallbackUrl,
+  oauthConnectionId,
+  useOAuthPopupFlow
+} from "@executor-js/react/plugins/oauth-sign-in";
+import {
+  CredentialControlField,
+  CredentialUsageRow,
+  useCredentialTargetScope
+} from "@executor-js/react/plugins/credential-target-scope";
+import { sourceWriteKeys } from "@executor-js/react/api/reactivity-keys";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ErrorMessage = Schema.Struct({ message: Schema.String });
+var decodeErrorMessage = Schema.decodeUnknownOption(ErrorMessage);
+var errorMessageFromExit = (exit, fallback) => Option.match(Option.flatMap(Exit.findErrorOption(exit), decodeErrorMessage), {
+  onNone: () => fallback,
+  onSome: ({ message }) => message
+});
+function findPreset(id) {
+  if (!id) return void 0;
+  return mcpPresets.find((p) => p.id === id);
+}
+var init = { step: "url", url: "" };
+function reducer(state, action) {
+  return Match.value(action).pipe(
+    Match.discriminator("type")("set-url", (a) => ({ step: "url", url: a.url })),
+    Match.discriminator("type")(
+      "probe-start",
+      () => ({
+        step: "probing",
+        url: state.url,
+        probe: "probe" in state ? state.probe : null
+      })
+    ),
+    Match.discriminator("type")(
+      "probe-ok",
+      (a) => ({ step: "probed", url: state.url, probe: a.probe })
+    ),
+    Match.discriminator("type")(
+      "probe-fail",
+      (a) => ({
+        step: "error",
+        url: state.url,
+        probe: null,
+        tokens: null,
+        error: a.error
+      })
+    ),
+    Match.discriminator("type")("oauth-start", () => {
+      if (state.step !== "probed" && state.step !== "error") return state;
+      return {
+        step: "oauth-starting",
+        url: state.url,
+        probe: state.step === "probed" ? state.probe : state.probe
+      };
+    }),
+    Match.discriminator("type")("oauth-waiting", (a) => {
+      if (state.step !== "oauth-starting") return state;
+      return {
+        step: "oauth-waiting",
+        url: state.url,
+        probe: state.probe,
+        sessionId: a.sessionId
+      };
+    }),
+    Match.discriminator("type")("oauth-ok", (a) => {
+      if (state.step !== "oauth-waiting") return state;
+      return {
+        step: "oauth-done",
+        url: state.url,
+        probe: state.probe,
+        tokens: a.tokens
+      };
+    }),
+    Match.discriminator("type")("oauth-fail", (a) => {
+      if (state.step !== "oauth-starting" && state.step !== "oauth-waiting") return state;
+      return {
+        step: "error",
+        url: state.url,
+        probe: state.probe,
+        tokens: null,
+        error: a.error
+      };
+    }),
+    Match.discriminator("type")("oauth-cancelled", () => {
+      if (state.step !== "oauth-waiting") return state;
+      return { step: "probed", url: state.url, probe: state.probe };
+    }),
+    Match.discriminator("type")("oauth-reset", () => {
+      if ("probe" in state && state.probe) {
+        return { step: "probed", url: state.url, probe: state.probe };
+      }
+      return state;
+    }),
+    Match.discriminator("type")("add-start", () => {
+      const tokens = state.step === "oauth-done" ? state.tokens : state.step === "probed" ? null : null;
+      const probe = "probe" in state ? state.probe : null;
+      if (!probe) return state;
+      return { step: "adding", url: state.url, probe, tokens };
+    }),
+    Match.discriminator("type")("add-fail", (a) => {
+      if (state.step !== "adding") return state;
+      return {
+        step: "error",
+        url: state.url,
+        probe: state.probe,
+        tokens: state.tokens,
+        error: a.error
+      };
+    }),
+    Match.discriminator("type")("retry", () => {
+      if (state.step !== "error") return state;
+      return state.probe ? state.tokens ? {
+        step: "oauth-done",
+        url: state.url,
+        probe: state.probe,
+        tokens: state.tokens
+      } : { step: "probed", url: state.url, probe: state.probe } : { step: "url", url: state.url };
+    }),
+    Match.exhaustive
+  );
+}
+function AddMcpSource(props) {
+  const allowStdio = props.allowStdio ?? false;
+  const rawPreset = findPreset(props.initialPreset);
+  const preset = rawPreset?.transport === "stdio" && !allowStdio ? void 0 : rawPreset;
+  const isStdioPreset = preset?.transport === "stdio";
+  const [transport, setTransport] = useState(
+    isStdioPreset && allowStdio ? "stdio" : "remote"
+  );
+  const [stdioCommand, setStdioCommand] = useState(isStdioPreset ? preset.command : "");
+  const [stdioArgs, setStdioArgs] = useState(
+    isStdioPreset && preset.args ? preset.args.join(" ") : ""
+  );
+  const [stdioEnv, setStdioEnv] = useState("");
+  const stdioIdentity = useSourceIdentity({
+    fallbackName: isStdioPreset ? preset.name : stdioCommand
+  });
+  const [stdioAdding, setStdioAdding] = useState(false);
+  const [stdioError, setStdioError] = useState(null);
+  const remoteUrl = !isStdioPreset && preset?.transport === void 0 && preset?.url ? preset.url : props.initialUrl ?? "";
+  const [state, dispatch] = useReducer(
+    reducer,
+    remoteUrl ? { step: "url", url: remoteUrl } : init
+  );
+  const scopeId = useScope();
+  const { credentialTargetScope: requestCredentialTargetScope } = useCredentialTargetScope();
+  const {
+    credentialTargetScope: oauthCredentialTargetScope,
+    setCredentialTargetScope: setOAuthCredentialTargetScope,
+    credentialScopeOptions
+  } = useCredentialTargetScope();
+  const doProbe = useAtomSet(probeMcpEndpoint, { mode: "promiseExit" });
+  const doAdd = useAtomSet(addMcpSourceOptimistic(scopeId), {
+    mode: "promiseExit"
+  });
+  const secretList = useSecretPickerSecrets();
+  const oauth = useOAuthPopupFlow({
+    popupName: "mcp-oauth",
+    popupBlockedMessage: "OAuth popup was blocked",
+    detectPopupClosed: false,
+    startErrorMessage: "Failed to start OAuth"
+  });
+  const [remoteAuthMode, setRemoteAuthMode] = useState("none");
+  const [remoteHeaders, setRemoteHeaders] = useState([]);
+  const [remoteCredentials, setRemoteCredentials] = useState(() => emptyHttpCredentials());
+  const probe = "probe" in state ? state.probe : null;
+  const tokens = "tokens" in state ? state.tokens : null;
+  const remoteIdentity = useSourceIdentity({
+    fallbackName: sourceDisplayNameFromUrl(state.url, "MCP") ?? probe?.serverName ?? probe?.name ?? ""
+  });
+  const isProbing = state.step === "probing";
+  const isAdding = state.step === "adding";
+  const isOAuthBusy = state.step === "oauth-starting" || state.step === "oauth-waiting" || oauth.busy;
+  const canUseNone = probe?.requiresOAuth !== true || probe.supportsDynamicRegistration === false;
+  const remoteHeadersComplete = remoteHeaders.every(
+    (header) => header.name.trim() && header.value.trim()
+  );
+  const remoteCredentialsComplete = httpCredentialsValid(remoteCredentials);
+  const authReady = remoteAuthMode === "none" ? canUseNone : tokens !== null;
+  const canAdd = Boolean(probe) && authReady && remoteHeadersComplete && remoteCredentialsComplete && !isAdding && !isOAuthBusy;
+  const probeError = state.step === "error" && state.probe === null ? state.error : null;
+  const otherError = state.step === "error" && state.probe !== null ? state.error : null;
+  const handleProbe = useCallback(async () => {
+    dispatch({ type: "probe-start" });
+    const { headers, queryParams } = serializeHttpCredentials(remoteCredentials);
+    const exit = await doProbe({
+      params: { scopeId },
+      payload: {
+        endpoint: state.url.trim(),
+        ...Object.keys(headers).length > 0 ? { headers } : {},
+        ...Object.keys(queryParams).length > 0 ? { queryParams } : {}
+      }
+    });
+    if (Exit.isFailure(exit)) {
+      dispatch({
+        type: "probe-fail",
+        error: errorMessageFromExit(exit, "Failed to connect")
+      });
+      return;
+    }
+    setRemoteAuthMode(exit.value.requiresOAuth ? "oauth2" : "none");
+    dispatch({ type: "probe-ok", probe: exit.value });
+  }, [state.url, scopeId, doProbe, remoteCredentials]);
+  const handleProbeRef = useRef(handleProbe);
+  handleProbeRef.current = handleProbe;
+  useEffect(() => {
+    if (transport !== "remote") return;
+    if (state.step !== "url") return;
+    const trimmed = state.url.trim();
+    if (!trimmed) return;
+    const handle = setTimeout(() => {
+      handleProbeRef.current();
+    }, 400);
+    return () => clearTimeout(handle);
+  }, [transport, state.step, state.url]);
+  const handleRemoteCredentialsChange = useCallback((next) => {
+    setRemoteCredentials(next);
+  }, []);
+  const handleOAuth = useCallback(async () => {
+    dispatch({ type: "oauth-start" });
+    const namespaceSlug = slugifyNamespace(remoteIdentity.namespace) || slugifyNamespace(probe?.namespace ?? "") || "mcp";
+    const { headers, queryParams } = serializeHttpCredentials(remoteCredentials);
+    await oauth.start({
+      payload: {
+        endpoint: state.url.trim(),
+        ...Object.keys(headers).length > 0 ? { headers } : {},
+        ...Object.keys(queryParams).length > 0 ? { queryParams } : {},
+        redirectUrl: oauthCallbackUrl(),
+        connectionId: oauthConnectionId({
+          pluginId: "mcp",
+          namespace: namespaceSlug
+        }),
+        tokenScope: oauthCredentialTargetScope,
+        strategy: { kind: "dynamic-dcr" },
+        pluginId: "mcp",
+        identityLabel: `${remoteIdentity.name.trim() || probe?.serverName || probe?.name || "MCP"} OAuth`
+      },
+      onSuccess: (result) => {
+        dispatch({
+          type: "oauth-ok",
+          tokens: {
+            connectionId: result.connectionId,
+            expiresAt: result.expiresAt,
+            scope: result.scope
+          }
+        });
+      },
+      onAuthorizationStarted: (result) => dispatch({ type: "oauth-waiting", sessionId: result.sessionId }),
+      onError: (error) => dispatch({ type: "oauth-fail", error })
+    });
+  }, [state.url, remoteIdentity, probe, remoteCredentials, oauth, oauthCredentialTargetScope]);
+  const handleCancelOAuth = useCallback(() => {
+    oauth.cancel();
+    dispatch({ type: "oauth-cancelled" });
+  }, [oauth]);
+  const handleAddRemote = useCallback(async () => {
+    if (!probe) return;
+    dispatch({ type: "add-start" });
+    const auth = remoteAuthMode === "oauth2" ? tokens ? {
+      kind: "oauth2",
+      connectionId: tokens.connectionId
+    } : {
+      kind: "oauth2",
+      connectionSlot: MCP_OAUTH_CONNECTION_SLOT
+    } : { kind: "none" };
+    const headers = Object.fromEntries(
+      remoteHeaders.map((header) => [header.name.trim(), header.value.trim()]).filter(([name, value2]) => name && value2)
+    );
+    const credentials = serializeScopedHttpCredentials(
+      remoteCredentials,
+      requestCredentialTargetScope
+    );
+    const remoteRequestHeaders = {
+      ...headers,
+      ...credentials.headers
+    };
+    const displayName = remoteIdentity.name.trim() || probe.serverName || probe.name;
+    const slugNamespace = slugifyNamespace(remoteIdentity.namespace);
+    const exit = await doAdd({
+      params: { scopeId },
+      payload: {
+        targetScope: scopeId,
+        transport: "remote",
+        name: displayName,
+        namespace: slugNamespace || void 0,
+        endpoint: state.url.trim(),
+        auth,
+        credentialTargetScope: remoteAuthMode === "oauth2" && tokens ? oauthCredentialTargetScope : requestCredentialTargetScope,
+        ...Object.keys(remoteRequestHeaders).length > 0 ? { headers: remoteRequestHeaders } : {},
+        ...Object.keys(credentials.queryParams).length > 0 ? { queryParams: credentials.queryParams } : {}
+      },
+      reactivityKeys: sourceWriteKeys
+    });
+    if (Exit.isFailure(exit)) {
+      dispatch({
+        type: "add-fail",
+        error: errorMessageFromExit(exit, "Failed to add source")
+      });
+      return;
+    }
+    props.onComplete();
+  }, [
+    probe,
+    remoteAuthMode,
+    remoteHeaders,
+    remoteCredentials,
+    remoteIdentity,
+    tokens,
+    state.url,
+    doAdd,
+    props,
+    scopeId,
+    requestCredentialTargetScope,
+    oauthCredentialTargetScope
+  ]);
+  const parseStdioArgs = (raw) => {
+    if (!raw.trim()) return [];
+    const args = [];
+    const regex = /[^\s"]+|"([^"]*)"/g;
+    let match2;
+    while ((match2 = regex.exec(raw)) !== null) {
+      args.push(match2[1] ?? match2[0]);
+    }
+    return args;
+  };
+  const parseStdioEnv = (raw) => {
+    if (!raw.trim()) return void 0;
+    const env = {};
+    for (const line of raw.split("\n")) {
+      const eq = line.indexOf("=");
+      if (eq > 0) {
+        env[line.slice(0, eq).trim()] = line.slice(eq + 1).trim();
+      }
+    }
+    return Object.keys(env).length > 0 ? env : void 0;
+  };
+  const handleAddStdio = useCallback(async () => {
+    const cmd = stdioCommand.trim();
+    if (!cmd) return;
+    setStdioAdding(true);
+    setStdioError(null);
+    const displayName = stdioIdentity.name.trim() || cmd;
+    const slugNamespace = slugifyNamespace(stdioIdentity.namespace);
+    const exit = await doAdd({
+      params: { scopeId },
+      payload: {
+        targetScope: scopeId,
+        transport: "stdio",
+        name: displayName,
+        namespace: slugNamespace || void 0,
+        command: cmd,
+        args: parseStdioArgs(stdioArgs),
+        env: parseStdioEnv(stdioEnv)
+      },
+      reactivityKeys: sourceWriteKeys
+    });
+    if (Exit.isFailure(exit)) {
+      setStdioError(errorMessageFromExit(exit, "Failed to add source"));
+      setStdioAdding(false);
+      return;
+    }
+    props.onComplete();
+  }, [stdioCommand, stdioArgs, stdioEnv, stdioIdentity, doAdd, scopeId, props]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-6", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-foreground", children: "Add MCP Source" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-[13px] text-muted-foreground", children: "Connect to an MCP server to discover and use its tools." })
+    ] }),
+    allowStdio && /* @__PURE__ */ jsxs("div", { className: "flex gap-1 rounded-lg border border-border bg-muted/30 p-1", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          type: "button",
+          onClick: () => setTransport("remote"),
+          className: `flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${transport === "remote" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+          children: "Remote"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          type: "button",
+          onClick: () => setTransport("stdio"),
+          className: `flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${transport === "stdio" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+          children: "Stdio"
+        }
+      )
+    ] }),
+    transport === "remote" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        McpRemoteSourceFields,
+        {
+          url: state.url,
+          onUrlChange: (url) => dispatch({ type: "set-url", url }),
+          identity: remoteIdentity,
+          preview: probe,
+          probing: isProbing,
+          error: probeError,
+          onRetry: handleProbe
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        HttpCredentialsEditor,
+        {
+          credentials: remoteCredentials,
+          onChange: handleRemoteCredentialsChange,
+          existingSecrets: secretList,
+          sourceName: remoteIdentity.name,
+          targetScope: requestCredentialTargetScope,
+          credentialScopeOptions,
+          bindingScopeOptions: credentialScopeOptions,
+          labels: {
+            headers: "Request headers",
+            queryParams: "Query parameters"
+          }
+        }
+      ),
+      probe && /* @__PURE__ */ jsxs("section", { className: "space-y-2.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx(FieldLabel, { children: "Authentication" }),
+          /* @__PURE__ */ jsx(
+            FilterTabs,
+            {
+              tabs: probe.requiresOAuth && probe.supportsDynamicRegistration ? [{ value: "oauth2", label: "OAuth" }] : [
+                { value: "none", label: "None" },
+                { value: "oauth2", label: "OAuth" }
+              ],
+              value: remoteAuthMode,
+              onChange: setRemoteAuthMode
+            }
+          )
+        ] }),
+        remoteAuthMode === "oauth2" && /* @__PURE__ */ jsx(
+          CredentialUsageRow,
+          {
+            value: oauthCredentialTargetScope,
+            options: credentialScopeOptions,
+            onChange: (targetScope) => {
+              setOAuthCredentialTargetScope(targetScope);
+              dispatch({ type: "oauth-reset" });
+            },
+            label: "Connection saved to",
+            help: "Choose who can use the OAuth connection.",
+            children: /* @__PURE__ */ jsxs(
+              CredentialControlField,
+              {
+                label: "Connect via OAuth",
+                help: "Start the provider OAuth flow.",
+                children: [
+                  !tokens && state.step === "probed" && (probe.supportsDynamicRegistration ? /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      onClick: handleOAuth,
+                      variant: "outline",
+                      className: "w-full",
+                      children: "Sign in"
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: "rounded-md border border-border bg-muted/30 px-3 py-2 text-xs text-muted-foreground", children: "This server requires OAuth, but its authorization server does not support dynamic client registration. Use request headers with a bearer token, or save the source and connect a supported OAuth connection later." })),
+                  !tokens && state.step === "oauth-starting" && /* @__PURE__ */ jsxs("div", { className: "flex min-h-9 items-center gap-2 rounded-md border border-border bg-muted/30 px-3 py-2", children: [
+                    /* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }),
+                    /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Starting authorization..." })
+                  ] }),
+                  !tokens && state.step === "oauth-waiting" && /* @__PURE__ */ jsxs("div", { className: "flex min-h-9 items-center gap-2 rounded-md border border-blue-500/30 bg-blue-500/5 px-3 py-2", children: [
+                    /* @__PURE__ */ jsx(Spinner, { className: "size-3.5 text-blue-500" }),
+                    /* @__PURE__ */ jsx("span", { className: "text-xs text-blue-600 dark:text-blue-400", children: "Waiting for authorization..." }),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "button",
+                        variant: "ghost",
+                        size: "sm",
+                        onClick: handleCancelOAuth,
+                        className: "ml-auto h-7 px-2 text-xs",
+                        children: "Cancel"
+                      }
+                    )
+                  ] }),
+                  tokens && /* @__PURE__ */ jsxs("div", { className: "flex min-h-9 items-center gap-2 rounded-md border border-emerald-500/30 bg-emerald-500/5 px-3 py-2", children: [
+                    /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-3.5 text-emerald-500", children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M3 8.5l3 3 7-7",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-emerald-600 dark:text-emerald-400", children: "Authenticated" })
+                  ] })
+                ]
+              }
+            )
+          }
+        )
+      ] }),
+      probe && /* @__PURE__ */ jsxs("section", { className: "space-y-2.5", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Label, { children: "Additional headers" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-[12px] text-muted-foreground", children: "Plaintext headers sent with every request. Use request headers above for secret-backed values." })
+        ] }),
+        /* @__PURE__ */ jsx(CardStack, { children: /* @__PURE__ */ jsx(CardStackContent, { children: remoteHeaders.length === 0 ? /* @__PURE__ */ jsx(
+          AddPlainHeaderRow,
+          {
+            leading: /* @__PURE__ */ jsx("span", { children: "No headers" }),
+            onClick: () => setRemoteHeaders((headers) => [...headers, { name: "", value: "" }])
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          remoteHeaders.map((header, index) => /* @__PURE__ */ jsxs(CardStackEntry, { className: "flex-col items-stretch gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx(Label, { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: "Header" }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "xs",
+                  className: "text-muted-foreground hover:text-destructive",
+                  onClick: () => setRemoteHeaders(
+                    (headers) => headers.filter((_, headerIndex) => headerIndex !== index)
+                  ),
+                  children: "Remove"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsx(Label, { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: "Name" }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    value: header.name,
+                    onChange: (event) => setRemoteHeaders(
+                      (headers) => headers.map(
+                        (current, headerIndex) => headerIndex === index ? {
+                          ...current,
+                          name: event.target.value
+                        } : current
+                      )
+                    ),
+                    placeholder: "X-Organization-Id",
+                    className: "h-8 text-xs font-mono"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsx(Label, { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: "Value" }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    value: header.value,
+                    onChange: (event) => setRemoteHeaders(
+                      (headers) => headers.map(
+                        (current, headerIndex) => headerIndex === index ? {
+                          ...current,
+                          value: event.target.value
+                        } : current
+                      )
+                    ),
+                    placeholder: "workspace-id",
+                    className: "h-8 text-xs font-mono"
+                  }
+                )
+              ] })
+            ] })
+          ] }, index)),
+          /* @__PURE__ */ jsx(
+            AddPlainHeaderRow,
+            {
+              onClick: () => setRemoteHeaders((headers) => [...headers, { name: "", value: "" }])
+            }
+          )
+        ] }) }) })
+      ] }),
+      otherError && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2", children: /* @__PURE__ */ jsx("p", { className: "text-[12px] text-destructive", children: otherError }) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: () => dispatch({ type: "retry" }),
+            className: "text-xs",
+            children: "Try again"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(FloatActions, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            onClick: () => {
+              oauth.cancel();
+              props.onCancel();
+            },
+            disabled: isAdding,
+            children: "Cancel"
+          }
+        ),
+        (probe || isProbing) && /* @__PURE__ */ jsx(Button, { type: "button", onClick: handleAddRemote, disabled: !canAdd, children: isAdding ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }),
+          " Adding\u2026"
+        ] }) : "Add source" })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(CardStack, { children: /* @__PURE__ */ jsxs(CardStackContent, { className: "border-t-0", children: [
+        /* @__PURE__ */ jsx(
+          CardStackEntryField,
+          {
+            label: "Command",
+            description: "- The executable to run (e.g. npx, uvx, node).",
+            children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: stdioCommand,
+                onChange: (e) => setStdioCommand(e.target.value),
+                placeholder: "npx",
+                className: "font-mono text-sm"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CardStackEntryField,
+          {
+            label: "Arguments",
+            description: "- Space-separated arguments passed to the command.",
+            children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: stdioArgs,
+                onChange: (e) => setStdioArgs(e.target.value),
+                placeholder: "-y chrome-devtools-mcp@latest",
+                className: "font-mono text-sm"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CardStackEntryField,
+          {
+            label: "Environment variables",
+            description: "- One per line, KEY=value format.",
+            children: /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                value: stdioEnv,
+                onChange: (e) => setStdioEnv(e.target.value),
+                placeholder: "KEY=value\nANOTHER=value",
+                rows: 3,
+                maxRows: 10,
+                className: "font-mono text-sm"
+              }
+            )
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(SourceIdentityFields, { identity: stdioIdentity, namePlaceholder: "My MCP Server" }),
+      stdioError && /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2", children: /* @__PURE__ */ jsx("p", { className: "text-[12px] text-destructive", children: stdioError }) }),
+      /* @__PURE__ */ jsxs(FloatActions, { children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: props.onCancel, disabled: stdioAdding, children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            onClick: handleAddStdio,
+            disabled: !stdioCommand.trim() || stdioAdding,
+            children: stdioAdding ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }),
+              " Adding\u2026"
+            ] }) : "Add source"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function AddPlainHeaderRow({
+  onClick,
+  leading
+}) {
+  return (
+    // oxlint-disable-next-line react/forbid-elements
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: (event) => {
+          event.stopPropagation();
+          onClick();
+        },
+        "aria-label": "Add header",
+        className: "flex w-full items-center justify-between gap-4 px-4 py-3 text-sm text-muted-foreground outline-none transition-[background-color] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-accent/40 focus-visible:bg-accent/40",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-left", children: leading }),
+          /* @__PURE__ */ jsx("svg", { "aria-hidden": true, viewBox: "0 0 16 16", fill: "none", className: "size-4 shrink-0", children: /* @__PURE__ */ jsx("path", { d: "M8 3.5v9M3.5 8h9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+        ]
+      }
+    )
+  );
+}
+export {
+  AddMcpSource as default
+};
+//# sourceMappingURL=AddMcpSource-VM3HY26S.js.map