@mcp-use/client 2.0.0-beta.4 → 2.0.0-beta.5

package/dist/react/index.js

@@ -1473,7 +1473,7 @@ var HttpConnector = class extends BaseConnector {
 };
 
 // src/utils/version.ts
-var VERSION = "2.0.0-beta.3";
+var VERSION = "2.0.0-beta.4";
 function getPackageVersion() {
   return VERSION;
 }
@@ -2370,62 +2370,6 @@ async function telFetch(url, init) {
 }
 var POSTHOG_HOST = "https://eu.i.posthog.com";
 var POSTHOG_API_KEY = "phc_lyTtbYwvkdSbrcMQNPiKiiRWrrM1seyKIMjycSvItEI";
-var SCARF_GATEWAY_URL = "https://mcpuse.gateway.scarf.sh/events-ts";
-var SCARF_GATEWAY_BEACON_URL = "https://mcpuse.gateway.scarf.sh/simple/";
-var SCARF_BEACON_MAX_URL = 1800;
-var SCARF_BEACON_TRUNCATED_KEYS = /* @__PURE__ */ new Set(["query", "response", "messages"]);
-function stringifyScarfValue(value) {
-  if (value === null || value === void 0) return "";
-  if (typeof value === "string") return value;
-  if (typeof value === "number" || typeof value === "boolean") {
-    return String(value);
-  }
-  try {
-    return JSON.stringify(value);
-  } catch {
-    return String(value);
-  }
-}
-function buildScarfBeaconUrl(properties, baseUrl = SCARF_GATEWAY_BEACON_URL) {
-  const params = new URLSearchParams();
-  for (const [key, value] of Object.entries(properties)) {
-    let serialized = stringifyScarfValue(value);
-    if (SCARF_BEACON_TRUNCATED_KEYS.has(key) && serialized.length > 120) {
-      serialized = `${serialized.slice(0, 117)}...`;
-    }
-    if (serialized !== "") params.set(key, serialized);
-  }
-  let url = `${baseUrl}${baseUrl.includes("?") ? "&" : "?"}${params.toString()}`;
-  if (url.length <= SCARF_BEACON_MAX_URL) return url;
-  const keys = [...params.keys()].sort(
-    (a, b) => (params.get(b)?.length ?? 0) - (params.get(a)?.length ?? 0)
-  );
-  for (const key of keys) {
-    if (url.length <= SCARF_BEACON_MAX_URL) break;
-    if (key === "event" || key === "user_id") continue;
-    params.delete(key);
-    url = `${baseUrl}${baseUrl.includes("?") ? "&" : "?"}${params.toString()}`;
-  }
-  return url.slice(0, SCARF_BEACON_MAX_URL);
-}
-function captureScarfPost(properties, endpoint) {
-  return telFetch(endpoint, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    keepalive: true,
-    body: JSON.stringify(properties)
-  });
-}
-function captureScarfBeacon(properties, endpoint) {
-  try {
-    const url = buildScarfBeaconUrl(properties, endpoint);
-    const img = new Image();
-    img.referrerPolicy = "no-referrer-when-downgrade";
-    img.src = url;
-  } catch {
-  }
-  return Promise.resolve();
-}
 function capturePostHog(params) {
   const host = params.host ?? POSTHOG_HOST;
   const apiKey = params.apiKey ?? POSTHOG_API_KEY;
@@ -2442,13 +2386,6 @@ function capturePostHog(params) {
     })
   });
 }
-function captureScarf(properties, endpoint = SCARF_GATEWAY_URL) {
-  if (typeof window !== "undefined") {
-    const beaconEndpoint = endpoint === SCARF_GATEWAY_URL ? SCARF_GATEWAY_BEACON_URL : endpoint;
-    return captureScarfBeacon(properties, beaconEndpoint);
-  }
-  return captureScarfPost(properties, endpoint);
-}
 
 // src/telemetry/telemetry.ts
 function generateUUID() {
@@ -2459,18 +2396,6 @@ function secureRandomString() {
   globalThis.crypto.getRandomValues(array);
   return Array.from(array, (v) => v.toString(16).padStart(2, "0")).join("");
 }
-function isVersionGreater(a, b) {
-  const parse = (v) => v.split("-")[0].split(".").map((n) => parseInt(n, 10) || 0);
-  const pa = parse(a);
-  const pb = parse(b);
-  const len = Math.max(pa.length, pb.length);
-  for (let i = 0; i < len; i++) {
-    const da = pa[i] ?? 0;
-    const db = pb[i] ?? 0;
-    if (da !== db) return da > db;
-  }
-  return false;
-}
 var USER_ID_STORAGE_KEY = "mcp_use_user_id";
 var PROJECT_API_KEY = "phc_lyTtbYwvkdSbrcMQNPiKiiRWrrM1seyKIMjycSvItEI";
 var HOST = "https://eu.i.posthog.com";
@@ -2499,10 +2424,7 @@ function createLocalStorageBackend() {
         localStorage.setItem(USER_ID_STORAGE_KEY, id);
       } catch {
       }
-    },
-    // Package-download dedup is node/Scarf-oriented; localStorage unused.
-    getDownloadedVersion: () => null,
-    setDownloadedVersion: () => void 0
+    }
   };
 }
 function detectRuntimeEnvironment() {
@@ -2570,17 +2492,13 @@ var Telemetry = class _Telemetry {
   _currUserId = null;
   _telemetryEnabled = false;
   _pending = /* @__PURE__ */ new Set();
-  _scarfEnabled = false;
   _runtimeEnvironment;
   _storageCapability;
   _storage;
-  /** True when node entry installed fs storage (package-download dedup). */
-  _fsBacked;
   _source;
   _productVersion;
   constructor() {
     this._runtimeEnvironment = detectRuntimeEnvironment();
-    this._fsBacked = configuredStorage !== null;
     this._storage = configuredStorage ?? createLocalStorageBackend() ?? null;
     this._storageCapability = this._storage ? "persistent" : "session-only";
     this._source = readSourceHint() || this._runtimeEnvironment;
@@ -2599,14 +2517,6 @@ var Telemetry = class _Telemetry {
         "Anonymized telemetry enabled. Set MCP_USE_ANONYMIZED_TELEMETRY=false to disable."
       );
       this._telemetryEnabled = true;
-      this._scarfEnabled = true;
-      if (this._fsBacked) {
-        setTimeout(() => {
-          this.trackPackageDownload({ triggered_by: "initialization" }).catch(
-            (e) => logger.debug(`Failed to track package download: ${e}`)
-          );
-        }, 0);
-      }
     }
   }
   get runtimeEnvironment() {
@@ -2638,7 +2548,7 @@ var Telemetry = class _Telemetry {
     this._productVersion = version;
   }
   get isEnabled() {
-    return this._telemetryEnabled || this._scarfEnabled;
+    return this._telemetryEnabled;
   }
   get userId() {
     if (this._currUserId) return this._currUserId;
@@ -2661,7 +2571,7 @@ var Telemetry = class _Telemetry {
     return this._currUserId;
   }
   async capture(event) {
-    if (!this._telemetryEnabled && !this._scarfEnabled) return;
+    if (!this._telemetryEnabled) return;
     const currentUserId = this.userId;
     const properties = {
       ...event.properties,
@@ -2670,52 +2580,15 @@ var Telemetry = class _Telemetry {
       source: this._source,
       runtime: this._runtimeEnvironment
     };
-    if (this._telemetryEnabled) {
-      const p = capturePostHog({
-        host: HOST,
-        apiKey: PROJECT_API_KEY,
-        event: event.name,
-        distinctId: currentUserId,
-        properties
-      });
-      this._pending.add(p);
-      void p.finally(() => this._pending.delete(p));
-    }
-    if (this._scarfEnabled) {
-      const p = captureScarf({
-        ...properties,
-        user_id: currentUserId,
-        event: event.name
-      });
-      this._pending.add(p);
-      void p.finally(() => this._pending.delete(p));
-    }
-  }
-  async trackPackageDownload(properties) {
-    if (!this._scarfEnabled || !this._fsBacked || !this._storage) return;
-    const currentVersion = getPackageVersion();
-    const saved = this._storage.getDownloadedVersion();
-    let firstDownload = false;
-    let shouldTrack = false;
-    if (!saved) {
-      shouldTrack = true;
-      firstDownload = true;
-      this._storage.setDownloadedVersion(currentVersion);
-    } else if (isVersionGreater(currentVersion, saved)) {
-      shouldTrack = true;
-      this._storage.setDownloadedVersion(currentVersion);
-    }
-    if (!shouldTrack) return;
-    await captureScarf({
-      ...properties || {},
-      mcp_use_version: currentVersion,
-      user_id: this.userId,
-      event: "package_download",
-      first_download: firstDownload,
-      language: "typescript",
-      source: this._source,
-      runtime: this._runtimeEnvironment
+    const p = capturePostHog({
+      host: HOST,
+      apiKey: PROJECT_API_KEY,
+      event: event.name,
+      distinctId: currentUserId,
+      properties
     });
+    this._pending.add(p);
+    void p.finally(() => this._pending.delete(p));
   }
   async trackAgentExecution(data) {
     if (!this.isEnabled) return;
@@ -6881,6 +6754,7 @@ import React2, {
   memo,
   useCallback as useCallback6,
   useEffect as useEffect5,
+  useMemo as useMemo3,
   useRef as useRef4,
   useState as useState4
 } from "react";
@@ -7299,9 +7173,9 @@ function buildSandboxProxyBlobHtml(search) {
 // src/react/view/use-display-mode.ts
 import { useCallback as useCallback5, useEffect as useEffect4 } from "react";
 var SHELL_BASE = "w-full h-full min-h-0 bg-background flex flex-col [&:fullscreen]:h-full [&:fullscreen]:w-full [&:fullscreen]:bg-background";
-var WIDGET_FULLSCREEN_OVERLAY_CLASSES = `fixed inset-0 z-[100] ${SHELL_BASE}`;
+var WIDGET_FULLSCREEN_OVERLAY_CLASSES = `fixed inset-0 z-[200] ${SHELL_BASE}`;
 var WIDGET_PIP_SHELL_CLASSES = [
-  "fixed top-4 left-1/2 -translate-x-1/2 z-[100]",
+  "fixed top-4 left-1/2 -translate-x-1/2 z-[200]",
   "rounded-3xl w-full min-w-[300px] h-[400px]",
   "shadow-2xl border overflow-hidden",
   "bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80",
@@ -7359,7 +7233,8 @@ function useViewDisplayModeControls({
 }
 var VIEW_DIMENSIONS = {
   PIP_MAX_WIDTH: 700,
-  DEFAULT_HEIGHT: 400
+  DEFAULT_HEIGHT: 400,
+  FULLSCREEN_HEADER_HEIGHT: 50
 };
 
 // src/react/view/view-detection.ts
@@ -7390,6 +7265,24 @@ var DEFAULT_HOST_CAPABILITIES = {
   // ponytail: always advertised; bridge.onmessage no-ops when onMessage unset
   message: { text: {} }
 };
+function CloseIcon() {
+  return /* @__PURE__ */ React2.createElement(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true
+    },
+    /* @__PURE__ */ React2.createElement("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ React2.createElement("path", { d: "m6 6 12 12" })
+  );
+}
 function waitForSandboxProxyReady(iframe) {
   return new Promise((resolve) => {
     const listener = (event) => {
@@ -7451,6 +7344,9 @@ function ViewRendererBase({
   wrapTransport,
   toolCallTimeout = DEFAULT_TOOL_CALL_TIMEOUT,
   mockOpenAiFileApis = false,
+  onInlineHeightChange,
+  fullscreenHeader,
+  renderFullscreenClose,
   className,
   testId = "mcp-app-frame",
   invoking,
@@ -7472,8 +7368,13 @@ function ViewRendererBase({
   );
   const [internalDisplayMode, setInternalDisplayMode] = useState4("inline");
   const displayMode = displayModeProp ?? internalDisplayMode;
-  const hostContextRef = useRef4(hostContext);
-  hostContextRef.current = hostContext;
+  const effectiveHostContext = useMemo3(() => {
+    if (!hostContext) return hostContext;
+    if (hostContext.displayMode === displayMode) return hostContext;
+    return { ...hostContext, displayMode };
+  }, [hostContext, displayMode]);
+  const hostContextRef = useRef4(effectiveHostContext);
+  hostContextRef.current = effectiveHostContext;
   const onMessageRef = useRef4(onMessage);
   onMessageRef.current = onMessage;
   const toolInputRef = useRef4(toolInput);
@@ -7498,6 +7399,8 @@ function ViewRendererBase({
   onReadyRef.current = onReady;
   const onLifecycleChangeRef = useRef4(onLifecycleChange);
   onLifecycleChangeRef.current = onLifecycleChange;
+  const onInlineHeightChangeRef = useRef4(onInlineHeightChange);
+  onInlineHeightChangeRef.current = onInlineHeightChange;
   const sandboxUrlRef = useRef4(sandboxUrl);
   sandboxUrlRef.current = sandboxUrl;
   const cspModeRef = useRef4(cspMode);
@@ -7757,7 +7660,10 @@ function ViewRendererBase({
           height
         }) => {
           if (displayModeRef.current !== "inline") return;
-          if (height !== void 0) setInlineHeight(height);
+          if (height !== void 0) {
+            setInlineHeight(height);
+            onInlineHeightChangeRef.current?.(height);
+          }
         };
         const initPromise = hookInitialized(bridge);
         let transport = new PostMessageTransport(
@@ -7844,9 +7750,9 @@ function ViewRendererBase({
   ]);
   useEffect5(() => {
     const bridge = bridgeRef.current;
-    if (!bridge || initCount === 0 || !hostContext) return;
-    bridge.setHostContext(hostContext);
-  }, [hostContext, initCount]);
+    if (!bridge || initCount === 0 || !effectiveHostContext) return;
+    bridge.setHostContext(effectiveHostContext);
+  }, [effectiveHostContext, initCount]);
   useEffect5(() => {
     const bridge = bridgeRef.current;
     if (!bridge || initCount === 0 || !partialToolInput) return;
@@ -7884,6 +7790,7 @@ function ViewRendererBase({
     const timer = setTimeout(() => setShowSpinner(false), 300);
     return () => clearTimeout(timer);
   }, [initCount, showSpinner]);
+  const showHostBorder = resolved !== null && resolved.prefersBorder && displayMode !== "fullscreen";
   if (loadError) {
     return /* @__PURE__ */ React2.createElement("div", { className }, /* @__PURE__ */ React2.createElement("div", { className: "border border-red-200/50 dark:border-red-800/50 bg-red-50/30 dark:bg-red-950/20 rounded-lg p-4" }, /* @__PURE__ */ React2.createElement("p", { className: "text-sm text-red-600 dark:text-red-400" }, "Failed to load view: ", loadError)));
   }
@@ -7901,29 +7808,69 @@ function ViewRendererBase({
     "div",
     {
       ref: containerRef,
-      className: containerClassName,
+      className: isFullscreen ? `${containerClassName} flex flex-col` : containerClassName,
       style: isPip ? {
         height: VIEW_DIMENSIONS.DEFAULT_HEIGHT,
         maxWidth: VIEW_DIMENSIONS.PIP_MAX_WIDTH,
         zIndex: 100
       } : isFullscreen ? { zIndex: 100 } : void 0
     },
-    (isFullscreen || isPip) && /* @__PURE__ */ React2.createElement(
+    isFullscreen && // ponytail: inspector Tailwind may not emit client arbitrary classes
+    // (h-[50px], grid-cols-[auto_1fr_auto]) — use inline layout instead.
+    /* @__PURE__ */ React2.createElement(
+      "header",
+      {
+        className: "grid shrink-0 items-center border-b border-zinc-200 bg-background px-3 dark:border-zinc-700",
+        style: {
+          height: VIEW_DIMENSIONS.FULLSCREEN_HEADER_HEIGHT,
+          gridTemplateColumns: "auto 1fr auto"
+        }
+      },
+      renderFullscreenClose ? renderFullscreenClose({
+        onClick: () => void handleDisplayModeChange("inline"),
+        "data-testid": "debugger-exit-fullscreen-button",
+        "aria-label": "Exit fullscreen"
+      }) : /* @__PURE__ */ React2.createElement(
+        "button",
+        {
+          type: "button",
+          "data-testid": "debugger-exit-fullscreen-button",
+          "aria-label": "Exit fullscreen",
+          className: "flex size-8 cursor-pointer items-center justify-center rounded-full border border-zinc-200 bg-background text-foreground shadow-sm hover:bg-muted dark:border-zinc-700",
+          onClick: () => void handleDisplayModeChange("inline")
+        },
+        /* @__PURE__ */ React2.createElement(CloseIcon, null)
+      ),
+      /* @__PURE__ */ React2.createElement("div", { className: "flex min-w-0 items-center justify-center gap-2 px-2" }, fullscreenHeader?.iconUrl ? /* @__PURE__ */ React2.createElement(
+        "img",
+        {
+          src: fullscreenHeader.iconUrl,
+          alt: "",
+          className: "size-6 shrink-0 rounded-md object-contain"
+        }
+      ) : null, /* @__PURE__ */ React2.createElement("span", { className: "truncate text-sm font-medium text-foreground" }, fullscreenHeader?.title ?? toolName)),
+      /* @__PURE__ */ React2.createElement("div", { className: "size-8 shrink-0", "aria-hidden": true })
+    ),
+    isPip && (renderFullscreenClose ? /* @__PURE__ */ React2.createElement("div", { className: "absolute right-3 top-3", style: { zIndex: 110 } }, renderFullscreenClose({
+      onClick: () => void handleDisplayModeChange("inline"),
+      "data-testid": "debugger-exit-pip-button",
+      "aria-label": "Exit picture-in-picture"
+    })) : /* @__PURE__ */ React2.createElement(
       "button",
       {
         type: "button",
-        "data-testid": isFullscreen ? "debugger-exit-fullscreen-button" : "debugger-exit-pip-button",
-        "aria-label": isFullscreen ? "Exit fullscreen" : "Exit picture-in-picture",
-        className: "absolute right-3 top-3 z-[110] flex size-8 items-center justify-center rounded-full border border-border bg-background/90 text-lg leading-none text-foreground shadow-sm backdrop-blur-sm hover:bg-background",
+        "data-testid": "debugger-exit-pip-button",
+        "aria-label": "Exit picture-in-picture",
+        className: "absolute right-3 top-3 z-[110] flex size-8 cursor-pointer items-center justify-center rounded-full border border-border bg-background/90 text-foreground shadow-sm backdrop-blur-sm hover:bg-background",
         style: { zIndex: 110 },
         onClick: () => void handleDisplayModeChange("inline")
       },
-      "\xD7"
-    ),
+      /* @__PURE__ */ React2.createElement(CloseIcon, null)
+    )),
     /* @__PURE__ */ React2.createElement(
       "div",
       {
-        className: isFullscreen || isPip ? "relative w-full h-full min-h-0 flex flex-1 flex-col" : "relative w-full flex flex-1 justify-center items-center"
+        className: isFullscreen ? "relative flex min-h-0 w-full flex-1 flex-col" : isPip ? "relative w-full h-full min-h-0 flex flex-1 flex-col" : "relative w-full flex flex-1 justify-center items-center"
       },
       showSpinner && /* @__PURE__ */ React2.createElement("div", { className: "flex absolute inset-0 items-center justify-center z-10" }, /* @__PURE__ */ React2.createElement("span", { className: "text-sm text-muted-foreground" }, "Loading\u2026")),
       !isPip && !isFullscreen && (invoking || invoked) && /* @__PURE__ */ React2.createElement("div", { className: "absolute -top-8 left-2 z-10 whitespace-nowrap pointer-events-none text-xs text-muted-foreground" }, invoking && !toolOutput ? invoking : invoked),
@@ -7940,10 +7887,7 @@ function ViewRendererBase({
           {
             ref: iframeRef,
             title: `MCP App: ${toolName}`,
-            className: "w-full h-full border-0 bg-transparent",
-            style: {
-              border: resolved.prefersBorder && displayMode !== "fullscreen" ? void 0 : "none"
-            }
+            className: showHostBorder ? "w-full h-full bg-transparent border border-border rounded-xl" : "w-full h-full bg-transparent border-0"
           }
         )
       )
@@ -7965,6 +7909,9 @@ function viewRendererAreEqual(prev, next) {
   if (prev.hostCapabilities !== next.hostCapabilities) return false;
   if (prev.cspMode !== next.cspMode) return false;
   if (prev.mockOpenAiFileApis !== next.mockOpenAiFileApis) return false;
+  if (prev.onInlineHeightChange !== next.onInlineHeightChange) return false;
+  if (prev.fullscreenHeader !== next.fullscreenHeader) return false;
+  if (prev.renderFullscreenClose !== next.renderFullscreenClose) return false;
   if (prev.className !== next.className) return false;
   if (prev.onReady !== next.onReady) return false;
   if (prev.onLifecycleChange !== next.onLifecycleChange) return false;