@mcpjam/inspector 0.3.7 → 0.3.9

package/client/dist/assets/{OAuthCallback-CEBEd-Vt.js → OAuthCallback-BSOXmPlE.js}

@@ -1,4 +1,4 @@
-import { u as useToast, r as reactExports, S as SESSION_KEYS, j as jsxRuntimeExports, p as parseOAuthCallbackParams, g as generateOAuthErrorDescription, I as InspectorOAuthClientProvider, a as auth } from "./index-BG-3VNs4.js";
+import { u as useToast, r as reactExports, S as SESSION_KEYS, j as jsxRuntimeExports, p as parseOAuthCallbackParams, g as generateOAuthErrorDescription, I as InspectorOAuthClientProvider, a as auth } from "./index-BT03cD-1.js";
 const OAuthCallback = ({ onConnect }) => {
   const { toast } = useToast();
   const hasProcessedRef = reactExports.useRef(false);

package/client/dist/assets/{OAuthDebugCallback-D-raj6yP.js → OAuthDebugCallback-DyzqkofK.js}

@@ -1,4 +1,4 @@
-import { r as reactExports, S as SESSION_KEYS, p as parseOAuthCallbackParams, j as jsxRuntimeExports, g as generateOAuthErrorDescription } from "./index-BG-3VNs4.js";
+import { r as reactExports, S as SESSION_KEYS, p as parseOAuthCallbackParams, j as jsxRuntimeExports, g as generateOAuthErrorDescription } from "./index-BT03cD-1.js";
 const OAuthDebugCallback = ({ onConnect }) => {
   reactExports.useEffect(() => {
     let isProcessed = false;

package/client/dist/assets/{index-BG-3VNs4.js → index-BT03cD-1.js}

@@ -34088,7 +34088,7 @@ const useTheme = () => {
     [theme, setThemeWithSideEffect]
   );
 };
-const version$1 = "0.3.7";
+const version$1 = "0.3.9";
 var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
   createPopperScope
 ]);
@@ -39916,6 +39916,282 @@ const RootsTab = ({
     ] })
   ] });
 };
+var CHECKBOX_NAME = "Checkbox";
+var [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
+var [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
+function CheckboxProvider(props) {
+  const {
+    __scopeCheckbox,
+    checked: checkedProp,
+    children,
+    defaultChecked,
+    disabled,
+    form,
+    name,
+    onCheckedChange,
+    required: required2,
+    value = "on",
+    // @ts-expect-error
+    internal_do_not_use_render
+  } = props;
+  const [checked, setChecked] = useControllableState({
+    prop: checkedProp,
+    defaultProp: defaultChecked ?? false,
+    onChange: onCheckedChange,
+    caller: CHECKBOX_NAME
+  });
+  const [control, setControl] = reactExports.useState(null);
+  const [bubbleInput, setBubbleInput] = reactExports.useState(null);
+  const hasConsumerStoppedPropagationRef = reactExports.useRef(false);
+  const isFormControl = control ? !!form || !!control.closest("form") : (
+    // We set this to true by default so that events bubble to forms without JS (SSR)
+    true
+  );
+  const context = {
+    checked,
+    disabled,
+    setChecked,
+    control,
+    setControl,
+    name,
+    form,
+    value,
+    hasConsumerStoppedPropagationRef,
+    required: required2,
+    defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,
+    isFormControl,
+    bubbleInput,
+    setBubbleInput
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    CheckboxProviderImpl,
+    {
+      scope: __scopeCheckbox,
+      ...context,
+      children: isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children
+    }
+  );
+}
+var TRIGGER_NAME = "CheckboxTrigger";
+var CheckboxTrigger = reactExports.forwardRef(
+  ({ __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }, forwardedRef) => {
+    const {
+      control,
+      value,
+      disabled,
+      checked,
+      required: required2,
+      setControl,
+      setChecked,
+      hasConsumerStoppedPropagationRef,
+      isFormControl,
+      bubbleInput
+    } = useCheckboxContext(TRIGGER_NAME, __scopeCheckbox);
+    const composedRefs = useComposedRefs(forwardedRef, setControl);
+    const initialCheckedStateRef = reactExports.useRef(checked);
+    reactExports.useEffect(() => {
+      const form = control == null ? void 0 : control.form;
+      if (form) {
+        const reset = () => setChecked(initialCheckedStateRef.current);
+        form.addEventListener("reset", reset);
+        return () => form.removeEventListener("reset", reset);
+      }
+    }, [control, setChecked]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Primitive.button,
+      {
+        type: "button",
+        role: "checkbox",
+        "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
+        "aria-required": required2,
+        "data-state": getState(checked),
+        "data-disabled": disabled ? "" : void 0,
+        disabled,
+        value,
+        ...checkboxProps,
+        ref: composedRefs,
+        onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+          if (event.key === "Enter") event.preventDefault();
+        }),
+        onClick: composeEventHandlers(onClick, (event) => {
+          setChecked((prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked);
+          if (bubbleInput && isFormControl) {
+            hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+            if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+          }
+        })
+      }
+    );
+  }
+);
+CheckboxTrigger.displayName = TRIGGER_NAME;
+var Checkbox$1 = reactExports.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeCheckbox,
+      name,
+      checked,
+      defaultChecked,
+      required: required2,
+      disabled,
+      value,
+      onCheckedChange,
+      form,
+      ...checkboxProps
+    } = props;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CheckboxProvider,
+      {
+        __scopeCheckbox,
+        checked,
+        defaultChecked,
+        disabled,
+        required: required2,
+        onCheckedChange,
+        name,
+        form,
+        value,
+        internal_do_not_use_render: ({ isFormControl }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CheckboxTrigger,
+            {
+              ...checkboxProps,
+              ref: forwardedRef,
+              __scopeCheckbox
+            }
+          ),
+          isFormControl && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CheckboxBubbleInput,
+            {
+              __scopeCheckbox
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Checkbox$1.displayName = CHECKBOX_NAME;
+var INDICATOR_NAME = "CheckboxIndicator";
+var CheckboxIndicator = reactExports.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
+    const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Presence,
+      {
+        present: forceMount || isIndeterminate(context.checked) || context.checked === true,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Primitive.span,
+          {
+            "data-state": getState(context.checked),
+            "data-disabled": context.disabled ? "" : void 0,
+            ...indicatorProps,
+            ref: forwardedRef,
+            style: { pointerEvents: "none", ...props.style }
+          }
+        )
+      }
+    );
+  }
+);
+CheckboxIndicator.displayName = INDICATOR_NAME;
+var BUBBLE_INPUT_NAME = "CheckboxBubbleInput";
+var CheckboxBubbleInput = reactExports.forwardRef(
+  ({ __scopeCheckbox, ...props }, forwardedRef) => {
+    const {
+      control,
+      hasConsumerStoppedPropagationRef,
+      checked,
+      defaultChecked,
+      required: required2,
+      disabled,
+      name,
+      value,
+      form,
+      bubbleInput,
+      setBubbleInput
+    } = useCheckboxContext(BUBBLE_INPUT_NAME, __scopeCheckbox);
+    const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);
+    const prevChecked = usePrevious(checked);
+    const controlSize = useSize(control);
+    reactExports.useEffect(() => {
+      const input = bubbleInput;
+      if (!input) return;
+      const inputProto = window.HTMLInputElement.prototype;
+      const descriptor = Object.getOwnPropertyDescriptor(
+        inputProto,
+        "checked"
+      );
+      const setChecked = descriptor.set;
+      const bubbles = !hasConsumerStoppedPropagationRef.current;
+      if (prevChecked !== checked && setChecked) {
+        const event = new Event("click", { bubbles });
+        input.indeterminate = isIndeterminate(checked);
+        setChecked.call(input, isIndeterminate(checked) ? false : checked);
+        input.dispatchEvent(event);
+      }
+    }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);
+    const defaultCheckedRef = reactExports.useRef(isIndeterminate(checked) ? false : checked);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Primitive.input,
+      {
+        type: "checkbox",
+        "aria-hidden": true,
+        defaultChecked: defaultChecked ?? defaultCheckedRef.current,
+        required: required2,
+        disabled,
+        name,
+        value,
+        form,
+        ...props,
+        tabIndex: -1,
+        ref: composedRefs,
+        style: {
+          ...props.style,
+          ...controlSize,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0,
+          // We transform because the input is absolutely positioned but we have
+          // rendered it **after** the button. This pulls it back to sit on top
+          // of the button.
+          transform: "translateX(-100%)"
+        }
+      }
+    );
+  }
+);
+CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;
+function isFunction(value) {
+  return typeof value === "function";
+}
+function isIndeterminate(checked) {
+  return checked === "indeterminate";
+}
+function getState(checked) {
+  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+const Checkbox = reactExports.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  Checkbox$1,
+  {
+    ref: ref2,
+    className: cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CheckboxIndicator,
+      {
+        className: cn("flex items-center justify-center text-current"),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "h-4 w-4" })
+      }
+    )
+  }
+));
+Checkbox.displayName = Checkbox$1.displayName;
 var lib = {};
 var hasRequiredLib;
 function requireLib() {
@@ -41993,24 +42269,17 @@ const DynamicJsonForm = ({
           const fieldValue = objectValue[fieldName];
           const fieldRequired2 = isFieldRequired([fieldName]);
           return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "label",
-              {
-                htmlFor: fieldName,
-                className: "block text-sm font-medium",
-                children: [
-                  fieldSchema.title || fieldName,
-                  fieldRequired2 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" })
-                ]
-              }
-            ),
-            fieldSchema.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500", children: fieldSchema.description }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: renderFieldInput(
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(Label, { htmlFor: fieldName, className: "text-sm font-medium", children: [
+              fieldSchema.title || fieldName,
+              fieldRequired2 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-destructive ml-1", children: "*" })
+            ] }),
+            fieldSchema.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: fieldSchema.description }),
+            renderFieldInput(
               fieldSchema,
               fieldValue,
               fieldPath,
               fieldRequired2
-            ) })
+            )
           ] }, fieldName);
         }
       ) });
@@ -42023,25 +42292,22 @@ const DynamicJsonForm = ({
       case "string": {
         if (propSchema.enum) {
           return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "select",
+            Select,
             {
               value: currentValue ?? "",
-              onChange: (e) => {
-                const val = e.target.value;
+              onValueChange: (val) => {
                 if (!val && !fieldRequired) {
                   handleFieldChange(path2, void 0);
                 } else {
                   handleFieldChange(path2, val);
                 }
               },
-              required: fieldRequired,
-              className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800",
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Select an option..." }),
-                propSchema.enum.map((option, index2) => {
+                /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select an option..." }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(SelectContent, { children: propSchema.enum.map((option, index2) => {
                   var _a2;
-                  return /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: option, children: ((_a2 = propSchema.enumNames) == null ? void 0 : _a2[index2]) || option }, option);
-                })
+                  return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: option, children: ((_a2 = propSchema.enumNames) == null ? void 0 : _a2[index2]) || option }, option);
+                }) })
               ]
             }
           );
@@ -42135,506 +42401,224 @@ const DynamicJsonForm = ({
       case "boolean":
         return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Input,
+            Checkbox,
             {
-              type: "checkbox",
               checked: currentValue ?? false,
-              onChange: (e) => handleFieldChange(path2, e.target.checked),
-              className: "w-4 h-4",
+              onCheckedChange: (checked) => handleFieldChange(path2, checked),
               required: fieldRequired
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm", children: propSchema.description || "Enable this option" })
-        ] });
-      default:
-        return null;
-    }
-  };
-  const handleFieldChange = (path2, fieldValue) => {
-    if (path2.length === 0) {
-      onChange(fieldValue);
-      return;
-    }
-    try {
-      const newValue = updateValueAtPath(value, path2, fieldValue);
-      onChange(newValue);
-    } catch (error) {
-      console.error("Failed to update form value:", error);
-      onChange(value);
-    }
-  };
-  const shouldUseJsonMode = schema.type === "object" && (!schema.properties || Object.keys(schema.properties).length === 0);
-  reactExports.useEffect(() => {
-    if (shouldUseJsonMode && !isJsonMode) {
-      setIsJsonMode(true);
-    }
-  }, [shouldUseJsonMode, isJsonMode]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end space-x-2", children: [
-      isJsonMode && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
-        {
-          type: "button",
-          variant: "outline",
-          size: "sm",
-          onClick: formatJson,
-          children: "Format JSON"
-        }
-      ),
-      !isOnlyJSON && /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", onClick: handleSwitchToFormMode, children: isJsonMode ? "Switch to Form" : "Switch to JSON" })
-    ] }),
-    isJsonMode ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-      JsonEditor,
-      {
-        value: rawJsonValue,
-        onChange: (newValue) => {
-          setRawJsonValue(newValue);
-          debouncedUpdateParent(newValue);
-        },
-        error: jsonError
-      }
-    ) : (
-      // If schema type is object but value is not an object or is empty, and we have actual JSON data,
-      // render a simple representation of the JSON data
-      schema.type === "object" && (typeof value !== "object" || value === null || Object.keys(value).length === 0) && rawJsonValue && rawJsonValue !== "{}" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 border rounded-md p-4", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: "Form view not available for this JSON structure. Using simplified view:" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto", children: rawJsonValue }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: "Use JSON mode for full editing capabilities." })
-      ] }) : renderFormFields(schema, value)
-    )
-  ] });
-};
-const SamplingRequest = ({
-  onApprove,
-  request,
-  onReject
-}) => {
-  var _a2;
-  const { toast: toast2 } = useToast();
-  const [messageResult, setMessageResult] = reactExports.useState({
-    model: "stub-model",
-    stopReason: "endTurn",
-    role: "assistant",
-    content: {
-      type: "text",
-      text: ""
-    }
-  });
-  const contentType = (_a2 = messageResult == null ? void 0 : messageResult.content) == null ? void 0 : _a2.type;
-  const schema = reactExports.useMemo(() => {
-    const s = {
-      type: "object",
-      description: "Message result",
-      properties: {
-        model: {
-          type: "string",
-          default: "stub-model",
-          description: "model name"
-        },
-        stopReason: {
-          type: "string",
-          default: "endTurn",
-          description: "Stop reason"
-        },
-        role: {
-          type: "string",
-          default: "endTurn",
-          description: "Role of the model"
-        },
-        content: {
-          type: "object",
-          properties: {
-            type: {
-              type: "string",
-              default: "text",
-              description: "Type of content"
-            }
-          }
-        }
-      }
-    };
-    if (contentType === "text" && s.properties) {
-      s.properties.content.properties = {
-        ...s.properties.content.properties,
-        text: {
-          type: "string",
-          default: "",
-          description: "text content"
-        }
-      };
-      setMessageResult((prev) => ({
-        ...prev,
-        content: {
-          type: contentType,
-          text: ""
-        }
-      }));
-    } else if (contentType === "image" && s.properties) {
-      s.properties.content.properties = {
-        ...s.properties.content.properties,
-        data: {
-          type: "string",
-          default: "",
-          description: "Base64 encoded image data"
-        },
-        mimeType: {
-          type: "string",
-          default: "",
-          description: "Mime type of the image"
-        }
-      };
-      setMessageResult((prev) => ({
-        ...prev,
-        content: {
-          type: contentType,
-          data: "",
-          mimeType: ""
-        }
-      }));
-    }
-    return s;
-  }, [contentType]);
-  const handleApprove = (id2) => {
-    const validationResult = CreateMessageResultSchema.safeParse(messageResult);
-    if (!validationResult.success) {
-      toast2({
-        title: "Error",
-        description: `There was an error validating the message result: ${validationResult.error.message}`,
-        variant: "destructive"
-      });
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-sm", children: propSchema.description || "Enable this option" })
+        ] });
+      default:
+        return null;
+    }
+  };
+  const handleFieldChange = (path2, fieldValue) => {
+    if (path2.length === 0) {
+      onChange(fieldValue);
       return;
     }
-    onApprove(id2, validationResult.data);
+    try {
+      const newValue = updateValueAtPath(value, path2, fieldValue);
+      onChange(newValue);
+    } catch (error) {
+      console.error("Failed to update form value:", error);
+      onChange(value);
+    }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
-    {
-      "data-testid": "sampling-request",
-      className: "flex gap-4 p-4 border rounded-lg space-y-4",
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-2 rounded", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: JSON.stringify(request.request) }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { className: "flex-1 space-y-4", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            DynamicJsonForm,
-            {
-              schema,
-              value: messageResult,
-              onChange: (newValue) => {
-                setMessageResult(newValue);
-              }
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex space-x-2 mt-1", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", onClick: () => handleApprove(request.id), children: "Approve" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Button,
-              {
-                type: "button",
-                variant: "outline",
-                onClick: () => onReject(request.id),
-                children: "Reject"
-              }
-            )
-          ] })
-        ] })
-      ]
+  const shouldUseJsonMode = schema.type === "object" && (!schema.properties || Object.keys(schema.properties).length === 0);
+  reactExports.useEffect(() => {
+    if (shouldUseJsonMode && !isJsonMode) {
+      setIsJsonMode(true);
     }
-  );
-};
-const SamplingTab = ({ pendingRequests, onApprove, onReject }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-96", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDescription, { children: "When the server requests LLM sampling, requests will appear here for approval." }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 space-y-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold", children: "Recent Requests" }),
-      pendingRequests.map((request) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-        SamplingRequest,
+  }, [shouldUseJsonMode, isJsonMode]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2", children: [
+      isJsonMode && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
         {
-          request,
-          onApprove,
-          onReject
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          onClick: formatJson,
+          children: "Format JSON"
+        }
+      ),
+      !isOnlyJSON && /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", onClick: handleSwitchToFormMode, children: isJsonMode ? "Switch to Form" : "Switch to JSON" })
+    ] }),
+    isJsonMode ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      JsonEditor,
+      {
+        value: rawJsonValue,
+        onChange: (newValue) => {
+          setRawJsonValue(newValue);
+          debouncedUpdateParent(newValue);
         },
-        request.id
-      )),
-      pendingRequests.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500", children: "No pending requests" })
-    ] })
+        error: jsonError
+      }
+    ) : schema.type === "object" && (typeof value !== "object" || value === null || Object.keys(value).length === 0) && rawJsonValue && rawJsonValue !== "{}" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3 border rounded-md p-4 bg-muted/50", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Form view not available for this JSON structure. Using simplified view:" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "bg-background border rounded p-3 text-sm overflow-auto", children: rawJsonValue }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Use JSON mode for full editing capabilities." })
+    ] }) : renderFormFields(schema, value)
   ] });
 };
-var CHECKBOX_NAME = "Checkbox";
-var [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
-var [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
-function CheckboxProvider(props) {
-  const {
-    __scopeCheckbox,
-    checked: checkedProp,
-    children,
-    defaultChecked,
-    disabled,
-    form,
-    name,
-    onCheckedChange,
-    required: required2,
-    value = "on",
-    // @ts-expect-error
-    internal_do_not_use_render
-  } = props;
-  const [checked, setChecked] = useControllableState({
-    prop: checkedProp,
-    defaultProp: defaultChecked ?? false,
-    onChange: onCheckedChange,
-    caller: CHECKBOX_NAME
-  });
-  const [control, setControl] = reactExports.useState(null);
-  const [bubbleInput, setBubbleInput] = reactExports.useState(null);
-  const hasConsumerStoppedPropagationRef = reactExports.useRef(false);
-  const isFormControl = control ? !!form || !!control.closest("form") : (
-    // We set this to true by default so that events bubble to forms without JS (SSR)
-    true
-  );
-  const context = {
-    checked,
-    disabled,
-    setChecked,
-    control,
-    setControl,
-    name,
-    form,
-    value,
-    hasConsumerStoppedPropagationRef,
-    required: required2,
-    defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,
-    isFormControl,
-    bubbleInput,
-    setBubbleInput
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    CheckboxProviderImpl,
-    {
-      scope: __scopeCheckbox,
-      ...context,
-      children: isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children
+const SamplingRequest = ({
+  onApprove,
+  request,
+  onReject
+}) => {
+  var _a2;
+  const { toast: toast2 } = useToast();
+  const [messageResult, setMessageResult] = reactExports.useState({
+    model: "stub-model",
+    stopReason: "endTurn",
+    role: "assistant",
+    content: {
+      type: "text",
+      text: ""
     }
-  );
-}
-var TRIGGER_NAME = "CheckboxTrigger";
-var CheckboxTrigger = reactExports.forwardRef(
-  ({ __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }, forwardedRef) => {
-    const {
-      control,
-      value,
-      disabled,
-      checked,
-      required: required2,
-      setControl,
-      setChecked,
-      hasConsumerStoppedPropagationRef,
-      isFormControl,
-      bubbleInput
-    } = useCheckboxContext(TRIGGER_NAME, __scopeCheckbox);
-    const composedRefs = useComposedRefs(forwardedRef, setControl);
-    const initialCheckedStateRef = reactExports.useRef(checked);
-    reactExports.useEffect(() => {
-      const form = control == null ? void 0 : control.form;
-      if (form) {
-        const reset = () => setChecked(initialCheckedStateRef.current);
-        form.addEventListener("reset", reset);
-        return () => form.removeEventListener("reset", reset);
-      }
-    }, [control, setChecked]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Primitive.button,
-      {
-        type: "button",
-        role: "checkbox",
-        "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
-        "aria-required": required2,
-        "data-state": getState(checked),
-        "data-disabled": disabled ? "" : void 0,
-        disabled,
-        value,
-        ...checkboxProps,
-        ref: composedRefs,
-        onKeyDown: composeEventHandlers(onKeyDown, (event) => {
-          if (event.key === "Enter") event.preventDefault();
-        }),
-        onClick: composeEventHandlers(onClick, (event) => {
-          setChecked((prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked);
-          if (bubbleInput && isFormControl) {
-            hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
-            if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
-          }
-        })
-      }
-    );
-  }
-);
-CheckboxTrigger.displayName = TRIGGER_NAME;
-var Checkbox$1 = reactExports.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      __scopeCheckbox,
-      name,
-      checked,
-      defaultChecked,
-      required: required2,
-      disabled,
-      value,
-      onCheckedChange,
-      form,
-      ...checkboxProps
-    } = props;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      CheckboxProvider,
-      {
-        __scopeCheckbox,
-        checked,
-        defaultChecked,
-        disabled,
-        required: required2,
-        onCheckedChange,
-        name,
-        form,
-        value,
-        internal_do_not_use_render: ({ isFormControl }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            CheckboxTrigger,
-            {
-              ...checkboxProps,
-              ref: forwardedRef,
-              __scopeCheckbox
-            }
-          ),
-          isFormControl && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            CheckboxBubbleInput,
-            {
-              __scopeCheckbox
+  });
+  const contentType = (_a2 = messageResult == null ? void 0 : messageResult.content) == null ? void 0 : _a2.type;
+  const schema = reactExports.useMemo(() => {
+    const s = {
+      type: "object",
+      description: "Message result",
+      properties: {
+        model: {
+          type: "string",
+          default: "stub-model",
+          description: "model name"
+        },
+        stopReason: {
+          type: "string",
+          default: "endTurn",
+          description: "Stop reason"
+        },
+        role: {
+          type: "string",
+          default: "endTurn",
+          description: "Role of the model"
+        },
+        content: {
+          type: "object",
+          properties: {
+            type: {
+              type: "string",
+              default: "text",
+              description: "Type of content"
             }
-          )
-        ] })
-      }
-    );
-  }
-);
-Checkbox$1.displayName = CHECKBOX_NAME;
-var INDICATOR_NAME = "CheckboxIndicator";
-var CheckboxIndicator = reactExports.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
-    const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Presence,
-      {
-        present: forceMount || isIndeterminate(context.checked) || context.checked === true,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Primitive.span,
-          {
-            "data-state": getState(context.checked),
-            "data-disabled": context.disabled ? "" : void 0,
-            ...indicatorProps,
-            ref: forwardedRef,
-            style: { pointerEvents: "none", ...props.style }
           }
-        )
-      }
-    );
-  }
-);
-CheckboxIndicator.displayName = INDICATOR_NAME;
-var BUBBLE_INPUT_NAME = "CheckboxBubbleInput";
-var CheckboxBubbleInput = reactExports.forwardRef(
-  ({ __scopeCheckbox, ...props }, forwardedRef) => {
-    const {
-      control,
-      hasConsumerStoppedPropagationRef,
-      checked,
-      defaultChecked,
-      required: required2,
-      disabled,
-      name,
-      value,
-      form,
-      bubbleInput,
-      setBubbleInput
-    } = useCheckboxContext(BUBBLE_INPUT_NAME, __scopeCheckbox);
-    const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);
-    const prevChecked = usePrevious(checked);
-    const controlSize = useSize(control);
-    reactExports.useEffect(() => {
-      const input = bubbleInput;
-      if (!input) return;
-      const inputProto = window.HTMLInputElement.prototype;
-      const descriptor = Object.getOwnPropertyDescriptor(
-        inputProto,
-        "checked"
-      );
-      const setChecked = descriptor.set;
-      const bubbles = !hasConsumerStoppedPropagationRef.current;
-      if (prevChecked !== checked && setChecked) {
-        const event = new Event("click", { bubbles });
-        input.indeterminate = isIndeterminate(checked);
-        setChecked.call(input, isIndeterminate(checked) ? false : checked);
-        input.dispatchEvent(event);
-      }
-    }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);
-    const defaultCheckedRef = reactExports.useRef(isIndeterminate(checked) ? false : checked);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Primitive.input,
-      {
-        type: "checkbox",
-        "aria-hidden": true,
-        defaultChecked: defaultChecked ?? defaultCheckedRef.current,
-        required: required2,
-        disabled,
-        name,
-        value,
-        form,
-        ...props,
-        tabIndex: -1,
-        ref: composedRefs,
-        style: {
-          ...props.style,
-          ...controlSize,
-          position: "absolute",
-          pointerEvents: "none",
-          opacity: 0,
-          margin: 0,
-          // We transform because the input is absolutely positioned but we have
-          // rendered it **after** the button. This pulls it back to sit on top
-          // of the button.
-          transform: "translateX(-100%)"
         }
       }
-    );
-  }
-);
-CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;
-function isFunction(value) {
-  return typeof value === "function";
-}
-function isIndeterminate(checked) {
-  return checked === "indeterminate";
-}
-function getState(checked) {
-  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
-}
-const Checkbox = reactExports.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  Checkbox$1,
-  {
-    ref: ref2,
-    className: cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      CheckboxIndicator,
-      {
-        className: cn("flex items-center justify-center text-current"),
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "h-4 w-4" })
-      }
-    )
-  }
-));
-Checkbox.displayName = Checkbox$1.displayName;
+    };
+    if (contentType === "text" && s.properties) {
+      s.properties.content.properties = {
+        ...s.properties.content.properties,
+        text: {
+          type: "string",
+          default: "",
+          description: "text content"
+        }
+      };
+      setMessageResult((prev) => ({
+        ...prev,
+        content: {
+          type: contentType,
+          text: ""
+        }
+      }));
+    } else if (contentType === "image" && s.properties) {
+      s.properties.content.properties = {
+        ...s.properties.content.properties,
+        data: {
+          type: "string",
+          default: "",
+          description: "Base64 encoded image data"
+        },
+        mimeType: {
+          type: "string",
+          default: "",
+          description: "Mime type of the image"
+        }
+      };
+      setMessageResult((prev) => ({
+        ...prev,
+        content: {
+          type: contentType,
+          data: "",
+          mimeType: ""
+        }
+      }));
+    }
+    return s;
+  }, [contentType]);
+  const handleApprove = (id2) => {
+    const validationResult = CreateMessageResultSchema.safeParse(messageResult);
+    if (!validationResult.success) {
+      toast2({
+        title: "Error",
+        description: `There was an error validating the message result: ${validationResult.error.message}`,
+        variant: "destructive"
+      });
+      return;
+    }
+    onApprove(id2, validationResult.data);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      "data-testid": "sampling-request",
+      className: "flex gap-4 p-4 border rounded-lg space-y-4",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-2 rounded", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: JSON.stringify(request.request) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { className: "flex-1 space-y-4", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            DynamicJsonForm,
+            {
+              schema,
+              value: messageResult,
+              onChange: (newValue) => {
+                setMessageResult(newValue);
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex space-x-2 mt-1", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", onClick: () => handleApprove(request.id), children: "Approve" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                onClick: () => onReject(request.id),
+                children: "Reject"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+const SamplingTab = ({ pendingRequests, onApprove, onReject }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-96", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDescription, { children: "When the server requests LLM sampling, requests will appear here for approval." }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 space-y-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold", children: "Recent Requests" }),
+      pendingRequests.map((request) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SamplingRequest,
+        {
+          request,
+          onApprove,
+          onReject
+        },
+        request.id
+      )),
+      pendingRequests.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500", children: "No pending requests" })
+    ] })
+  ] });
+};
 function generateRequestId() {
   return `req_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
 }
@@ -52101,7 +52085,7 @@ class Client extends Protocol {
     return this.notification({ method: "notifications/roots/list_changed" });
   }
 }
-const version = "0.3.7";
+const version = "0.3.9";
 const packageJson = {
   version
 };
@@ -62208,10 +62192,10 @@ const ElicitationModal = ({ request, onClose }) => {
   const schemaDescription = request.requestedSchema.description;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { open: true, onOpenChange: handleCancel, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogContent, { className: "max-w-2xl max-h-[80vh] overflow-y-auto", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogHeader, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTitle, { children: schemaTitle }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogDescription, { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block", children: request.message }),
-        schemaDescription && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-sm text-muted-foreground", children: schemaDescription })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTitle, { className: "text-lg font-semibold", children: schemaTitle }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogDescription, { className: "text-sm", children: [
+        request.message,
+        schemaDescription && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 text-xs text-muted-foreground", children: schemaDescription })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-4", children: [
@@ -62226,10 +62210,9 @@ const ElicitationModal = ({ request, onClose }) => {
           }
         }
       ),
-      validationError && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm text-red-600 dark:text-red-400", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Validation Error:" }),
-        " ",
-        validationError
+      validationError && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 p-3 bg-destructive/10 border border-destructive/20 rounded-md", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4 text-destructive mt-0.5 flex-shrink-0" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-destructive", children: validationError })
       ] }) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogFooter, { className: "gap-2", children: [
@@ -62789,7 +62772,7 @@ const __vitePreload = function preload(baseModule, deps, importerUrl) {
   });
 };
 const renderOAuthCallback = (onOAuthConnect) => {
-  const OAuthCallback = React.lazy(() => __vitePreload(() => import("./OAuthCallback-CEBEd-Vt.js"), true ? [] : void 0));
+  const OAuthCallback = React.lazy(() => __vitePreload(() => import("./OAuthCallback-BSOXmPlE.js"), true ? [] : void 0));
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     reactExports.Suspense,
     {
@@ -62803,7 +62786,7 @@ const renderOAuthCallback = (onOAuthConnect) => {
 };
 const renderOAuthDebugCallback = (onOAuthDebugConnect) => {
   const OAuthDebugCallback = React.lazy(
-    () => __vitePreload(() => import("./OAuthDebugCallback-D-raj6yP.js"), true ? [] : void 0)
+    () => __vitePreload(() => import("./OAuthDebugCallback-DyzqkofK.js"), true ? [] : void 0)
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     reactExports.Suspense,

package/client/dist/assets/{index-CWDemo1t.css → index-Bwd_BFIj.css}

@@ -1779,6 +1779,9 @@ video {
 .border-destructive {
   border-color: hsl(var(--destructive));
 }
+.border-destructive\/20 {
+  border-color: hsl(var(--destructive) / 0.2);
+}
 .border-destructive\/50 {
   border-color: hsl(var(--destructive) / 0.5);
 }
@@ -1899,6 +1902,9 @@ video {
 .bg-destructive {
   background-color: hsl(var(--destructive));
 }
+.bg-destructive\/10 {
+  background-color: hsl(var(--destructive) / 0.1);
+}
 .bg-emerald-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
@@ -2746,8 +2752,6 @@ video {
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -2777,10 +2781,6 @@ h1 {
 }
 
 @media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
   a:hover {
     color: #747bff;
   }
@@ -3621,10 +3621,6 @@ h1 {
   background-color: rgb(5 46 22 / 0.3);
 }
 
-.dark\:bg-red-900\/20:is(.dark *) {
-  background-color: rgb(127 29 29 / 0.2);
-}
-
 .dark\:bg-red-950\/20:is(.dark *) {
   background-color: rgb(69 10 10 / 0.2);
 }

package/client/dist/index.html

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/mcp_jam.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MCPJam Inspector</title>
-    <script type="module" crossorigin src="/assets/index-BG-3VNs4.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CWDemo1t.css">
+    <script type="module" crossorigin src="/assets/index-BT03cD-1.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Bwd_BFIj.css">
   </head>
   <body>
     <div id="root" class="w-full"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcpjam/inspector",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "description": "MCPJam inspector",
   "license": "Apache-2.0",
   "author": "MCPJam (https://mcpjam.com)",
@@ -44,6 +44,7 @@
   "dependencies": {
     "@anthropic-ai/sdk": "^0.52.0",
     "@heroicons/react": "^2.2.0",
+    "@libsql/client": "^0.14.0",
     "@mcpjam/inspector-cli": "^0.1.6",
     "@mcpjam/inspector-client": "^0.1.6",
     "@mcpjam/inspector-server": "^0.1.6",