added a simple mcp ui in tests

app/src/ui/components/code/JsonViewer.tsx

@@ -2,6 +2,35 @@ import { TbCopy } from "react-icons/tb";
 import { JsonView } from "react-json-view-lite";
 import { twMerge } from "tailwind-merge";
 import { IconButton } from "../buttons/IconButton";
+import ErrorBoundary from "ui/components/display/ErrorBoundary";
+import { forwardRef, useImperativeHandle, useState } from "react";
+
+export type JsonViewerProps = {
+   json: object | null;
+   title?: string;
+   expand?: number;
+   showSize?: boolean;
+   showCopy?: boolean;
+   copyIconProps?: any;
+   className?: string;
+};
+
+const style = {
+   basicChildStyle: "pl-5 ml-1 border-l border-muted hover:border-primary/20",
+   container: "ml-[-10px]",
+   label: "text-primary/90 font-bold font-mono mr-2",
+   stringValue: "text-emerald-600 dark:text-emerald-500 font-mono select-text",
+   numberValue: "text-sky-500 dark:text-sky-400 font-mono",
+   nullValue: "text-zinc-400 font-mono",
+   undefinedValue: "text-zinc-400 font-mono",
+   otherValue: "text-zinc-400 font-mono",
+   booleanValue: "text-orange-500 dark:text-orange-400 font-mono",
+   punctuation: "text-zinc-400 font-bold font-mono m-0.5",
+   collapsedContent: "text-zinc-400 font-mono after:content-['...']",
+   collapseIcon: "text-zinc-400 font-mono font-bold text-lg after:content-['▾'] mr-1.5",
+   expandIcon: "text-zinc-400 font-mono font-bold text-lg after:content-['▸'] mr-1.5",
+   noQuotesForStringValues: false,
+} as any;
 
 export const JsonViewer = ({
    json,
@@ -11,16 +40,8 @@ export const JsonViewer = ({
    showCopy = false,
    copyIconProps = {},
    className,
-}: {
-   json: object;
-   title?: string;
-   expand?: number;
-   showSize?: boolean;
-   showCopy?: boolean;
-   copyIconProps?: any;
-   className?: string;
-}) => {
-   const size = showSize ? JSON.stringify(json).length : undefined;
+}: JsonViewerProps) => {
+   const size = showSize ? (json === null ? 0 : (JSON.stringify(json)?.length ?? 0)) : undefined;
    const showContext = size || title || showCopy;
 
    function onCopy() {
@@ -31,9 +52,10 @@ export const JsonViewer = ({
       <div className={twMerge("bg-primary/5 py-3 relative overflow-hidden", className)}>
          {showContext && (
             <div className="absolute right-4 top-3 font-mono text-zinc-400 flex flex-row gap-2 items-center">
-               {(title || size) && (
+               {(title || size !== undefined) && (
                   <div className="flex flex-row">
-                     {title && <span>{title}</span>} {size && <span>({size} Bytes)</span>}
+                     {title && <span>{title}</span>}{" "}
+                     {size !== undefined && <span>({size} Bytes)</span>}
                   </div>
                )}
                {showCopy && (
@@ -43,30 +65,66 @@ export const JsonViewer = ({
                )}
             </div>
          )}
-         <JsonView
-            data={json}
-            shouldExpandNode={(level) => level < expand}
-            style={
-               {
-                  basicChildStyle: "pl-5 ml-1 border-l border-muted hover:border-primary/20",
-                  container: "ml-[-10px]",
-                  label: "text-primary/90 font-bold font-mono mr-2",
-                  stringValue: "text-emerald-500 font-mono select-text",
-                  numberValue: "text-sky-400 font-mono",
-                  nullValue: "text-zinc-400 font-mono",
-                  undefinedValue: "text-zinc-400 font-mono",
-                  otherValue: "text-zinc-400 font-mono",
-                  booleanValue: "text-orange-400 font-mono",
-                  punctuation: "text-zinc-400 font-bold font-mono m-0.5",
-                  collapsedContent: "text-zinc-400 font-mono after:content-['...']",
-                  collapseIcon:
-                     "text-zinc-400 font-mono font-bold text-lg after:content-['▾'] mr-1.5",
-                  expandIcon:
-                     "text-zinc-400 font-mono font-bold text-lg after:content-['▸'] mr-1.5",
-                  noQuotesForStringValues: false,
-               } as any
-            }
-         />
+         <ErrorBoundary>
+            <JsonView
+               data={json as any}
+               shouldExpandNode={(level) => level < expand}
+               style={style}
+            />
+         </ErrorBoundary>
       </div>
    );
 };
+
+export type JsonViewerTabsProps = Omit<JsonViewerProps, "json"> & {
+   selected?: string;
+   tabs: {
+      [key: string]: JsonViewerProps & {
+         enabled?: boolean;
+      };
+   };
+};
+
+export type JsonViewerTabsRef = {
+   setSelected: (selected: string) => void;
+};
+
+export const JsonViewerTabs = forwardRef<JsonViewerTabsRef, JsonViewerTabsProps>(
+   ({ tabs: _tabs, ...defaultProps }, ref) => {
+      const tabs = Object.fromEntries(
+         Object.entries(_tabs).filter(([_, v]) => v.enabled !== false),
+      );
+      const [selected, setSelected] = useState(defaultProps.selected ?? Object.keys(tabs)[0]);
+
+      useImperativeHandle(ref, () => ({
+         setSelected,
+      }));
+
+      return (
+         <div className="flex flex-col bg-primary/5 rounded-md">
+            <div className="flex flex-row gap-4 border-b px-3 border-primary/10">
+               {Object.keys(tabs).map((key) => (
+                  <button
+                     key={key}
+                     type="button"
+                     className={twMerge(
+                        "flex flex-row text-sm cursor-pointer py-3 pt-3.5 px-1 border-b border-transparent -mb-px transition-opacity",
+                        selected === key ? "border-primary" : "opacity-50 hover:opacity-70",
+                     )}
+                     onClick={() => setSelected(key)}
+                  >
+                     <span className="font-mono leading-none">{key}</span>
+                  </button>
+               ))}
+            </div>
+            {/* @ts-ignore */}
+            <JsonViewer
+               className="bg-transparent"
+               {...defaultProps}
+               {...tabs[selected as any]}
+               title={undefined}
+            />
+         </div>
+      );
+   },
+);

app/src/ui/components/display/ErrorBoundary.tsx

@@ -40,7 +40,7 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
             <BaseError>{this.props.fallback}</BaseError>
          );
       }
-      return <BaseError>Error1</BaseError>;
+      return <BaseError>{this.state.error?.message ?? "Unknown error"}</BaseError>;
    }
 
    override render() {
@@ -61,7 +61,7 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
 }
 
 const BaseError = ({ children }: { children: ReactNode }) => (
-   <div className="bg-red-700 text-white py-1 px-2 rounded-md leading-none font-mono">
+   <div className="bg-red-700 text-white py-1 px-2 rounded-md leading-tight font-mono">
       {children}
    </div>
 );

app/src/ui/components/form/json-schema-form/AnyOfField.tsx

@@ -5,8 +5,15 @@ import { twMerge } from "tailwind-merge";
 import * as Formy from "ui/components/form/Formy";
 import { useEvent } from "ui/hooks/use-event";
 import { FieldComponent, Field as FormField, type FieldProps as FormFieldProps } from "./Field";
-import { FormContextOverride, useDerivedFieldContext, useFormError } from "./Form";
+import {
+   FormContextOverride,
+   useDerivedFieldContext,
+   useFormContext,
+   useFormError,
+   useFormValue,
+} from "./Form";
 import { getLabel, getMultiSchemaMatched } from "./utils";
+import { FieldWrapper } from "ui/components/form/json-schema-form/FieldWrapper";
 
 export type AnyOfFieldRootProps = {
    path?: string;
@@ -47,7 +54,17 @@ const Root = ({ path = "", children }: AnyOfFieldRootProps) => {
    const errors = useFormError(path, { strict: true });
    if (!schema) return `AnyOfField(${path}): no schema ${pointer}`;
    const [_selected, setSelected] = useAtom(selectedAtom);
-   const selected = _selected !== null ? _selected : matchedIndex > -1 ? matchedIndex : null;
+   const {
+      options: { anyOfNoneSelectedMode },
+   } = useFormContext();
+   const selected =
+      _selected !== null
+         ? _selected
+         : matchedIndex > -1
+           ? matchedIndex
+           : anyOfNoneSelectedMode === "first"
+             ? 0
+             : null;
 
    const select = useEvent((index: number | null) => {
       setValue(path, index !== null ? lib.getTemplate(undefined, schemas[index]) : undefined);
@@ -117,15 +134,27 @@ const Select = () => {
 const Field = ({ name, label, ...props }: Partial<FormFieldProps>) => {
    const { selected, selectedSchema, path, errors } = useAnyOfContext();
    if (selected === null) return null;
+
    return (
       <FormContextOverride prefix={path} schema={selectedSchema}>
          <div className={twMerge(errors.length > 0 && "bg-red-500/10")}>
-            <FormField key={`${path}_${selected}`} name={""} label={false} {...props} />
+            {/* another wrap is required for primitive schemas */}
+            <AnotherField key={`${path}_${selected}`} label={false} {...props} />
          </div>
       </FormContextOverride>
    );
 };
 
+const AnotherField = (props: Partial<FormFieldProps>) => {
+   const { value } = useFormValue("");
+
+   const inputProps = {
+      // @todo: check, potentially just provide value
+      value: ["string", "number", "boolean"].includes(typeof value) ? value : undefined,
+   };
+   return <FormField name={""} label={false} {...props} inputProps={inputProps} />;
+};
+
 export const AnyOf = {
    Root,
    Select,

app/src/ui/components/form/json-schema-form/Form.tsx

@@ -46,6 +46,7 @@ type FormState<Data = any> = {
 type FormOptions = {
    debug?: boolean;
    keepEmpty?: boolean;
+   anyOfNoneSelectedMode?: "none" | "first";
 };
 
 export type FormContext<Data> = {
@@ -190,7 +191,7 @@ export function Form<
          root: "",
          path: "",
       }),
-      [schema, initialValues],
+      [schema, initialValues, options],
    ) as any;
 
    return (

app/src/ui/components/form/json-schema-form/utils.ts

@@ -62,20 +62,26 @@ export function getParentPointer(pointer: string) {
 }
 
 export function isRequired(lib: Draft, pointer: string, schema: JsonSchema, data?: any) {
-   if (pointer === "#/" || !schema) {
+   try {
+      if (pointer === "#/" || !schema) {
+         return false;
+      }
+
+      const childSchema = lib.getSchema({ pointer, data, schema });
+      if (typeof childSchema === "object" && "const" in childSchema) {
+         return true;
+      }
+
+      const parentPointer = getParentPointer(pointer);
+      if (parentPointer === "" || parentPointer === "#") return false;
+      const parentSchema = lib.getSchema({ pointer: parentPointer, data });
+      const required = parentSchema?.required?.includes(pointer.split("/").pop()!);
+
+      return !!required;
+   } catch (e) {
+      console.error("isRequired", { pointer, schema, data, e });
       return false;
    }
-
-   const childSchema = lib.getSchema({ pointer, data, schema });
-   if (typeof childSchema === "object" && "const" in childSchema) {
-      return true;
-   }
-
-   const parentPointer = getParentPointer(pointer);
-   const parentSchema = lib.getSchema({ pointer: parentPointer, data });
-   const required = parentSchema?.required?.includes(pointer.split("/").pop()!);
-
-   return !!required;
 }
 
 export type IsTypeType =