mcp: improve auth id type + styling fixes

app/src/auth/api/AuthController.ts

@@ -204,6 +204,7 @@ export class AuthController extends Controller {
 
    override registerMcp(): void {
       const { mcp } = this.auth.ctx;
+      const idType = s.anyOf([s.number({ title: "Integer" }), s.string({ title: "UUID" })]);
 
       const getUser = async (params: { id?: string | number; email?: string }) => {
          let user: DB["users"] | undefined = undefined;
@@ -248,7 +249,7 @@ export class AuthController extends Controller {
          {
             description: "Get a user token",
             inputSchema: s.object({
-               id: s.anyOf([s.string(), s.number()]).optional(),
+               id: idType.optional(),
                email: s.string({ format: "email" }).optional(),
             }),
          },
@@ -266,7 +267,7 @@ export class AuthController extends Controller {
          {
             description: "Change a user's password",
             inputSchema: s.object({
-               id: s.anyOf([s.string(), s.number()]).optional(),
+               id: idType.optional(),
                email: s.string({ format: "email" }).optional(),
                password: s.string({ minLength: 8 }),
             }),

app/src/data/api/DataController.ts

@@ -316,6 +316,7 @@ export class DataController extends Controller {
                param: s.object({ entity: entitiesEnum, id: idType }),
                query: saveRepoQuerySchema(["offset", "sort", "select"]),
             },
+            noErrorCodes: [404],
          }),
          jsc(
             "param",

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

@@ -101,25 +101,25 @@ export const JsonViewerTabs = forwardRef<JsonViewerTabsRef, JsonViewerTabsProps>
       }));
 
       return (
-         <div className="flex flex-col bg-primary/5 rounded-md">
+         <div className="flex flex-col bg-primary/5 rounded-md flex-shrink-0">
-            <div className="flex flex-row gap-4 border-b px-3 border-primary/10">
+            <div className="flex flex-row gap-4 border-b px-3 border-primary/10 min-w-0">
                {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",
+                        "flex flex-row text-sm cursor-pointer py-3 pt-3.5 px-1 border-b border-transparent -mb-px transition-opacity flex-shrink-0",
                         selected === key ? "border-primary" : "opacity-50 hover:opacity-70",
                      )}
                      onClick={() => setSelected(key)}
                   >
-                     <span className="font-mono leading-none">{key}</span>
+                     <span className="font-mono leading-none truncate">{key}</span>
                   </button>
                ))}
             </div>
             {/* @ts-ignore */}
             <JsonViewer
-               className="bg-transparent"
+               className="bg-transparent overflow-x-auto"
                {...defaultProps}
                {...tabs[selected as any]}
                title={undefined}

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

@@ -13,7 +13,6 @@ import {
    useFormValue,
 } from "./Form";
 import { getLabel, getMultiSchemaMatched } from "./utils";
-import { FieldWrapper } from "ui/components/form/json-schema-form/FieldWrapper";
 
 export type AnyOfFieldRootProps = {
    path?: string;

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

@@ -109,7 +109,7 @@ export function Form<
    const formRef = useRef<HTMLFormElement | null>(null);
 
    useEffect(() => {
-      if (initialValues) {
+      if (initialValues && validateOn === "change") {
          validate();
       }
    }, [initialValues]);

app/src/ui/layouts/AppShell/AppShell.tsx

@@ -67,7 +67,7 @@ export function Content({ children, center }: { children: React.ReactNode; cente
       <main
          data-shell="content"
          className={twMerge(
-            "flex flex-1 flex-row w-dvw h-full",
+            "flex flex-1 flex-row max-w-screen h-full",
             center && "justify-center items-center",
          )}
       >
@@ -158,7 +158,9 @@ export function Sidebar({
                data-shell="sidebar"
                className="flex-col w-[var(--sidebar-width)] flex-shrink-0 flex-grow-0 h-full border-muted border-r bg-background"
             >
+               <MaxHeightContainer className="overflow-y-scroll md:overflow-y-hidden">
                   {children}
+               </MaxHeightContainer>
             </aside>
          </div>
       </>

app/src/ui/routes/tools/mcp/mcp.tsx

@@ -25,7 +25,7 @@ export default function ToolsMcp() {
    }
 
    return (
-      <div className="flex flex-col flex-grow">
+      <div className="flex flex-col flex-grow max-w-screen">
          <AppShell.SectionHeader>
             <div className="flex flex-row gap-4 items-center">
                <McpIcon />
@@ -45,7 +45,6 @@ export default function ToolsMcp() {
 
          <div className="flex h-full">
             <AppShell.Sidebar>
-               <AppShell.MaxHeightContainer className="overflow-y-scroll md:overflow-auto">
                <Tools.Sidebar open={feature === "tools"} toggle={() => setFeature("tools")} />
                <AppShell.SectionHeaderAccordionItem
                   title="Resources"
@@ -56,7 +55,6 @@ export default function ToolsMcp() {
                      <i>Resources</i>
                   </div>
                </AppShell.SectionHeaderAccordionItem>
-               </AppShell.MaxHeightContainer>
             </AppShell.Sidebar>
             {feature === "tools" && <Tools.Content />}
 

app/src/ui/routes/tools/mcp/tools.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState, useTransition } from "react";
 import { getClient, getTemplate } from "./utils";
 import { useMcpStore } from "./state";
 import { AppShell } from "ui/layouts/AppShell";
@@ -6,7 +6,7 @@ import { TbHistory, TbHistoryOff, TbRefresh } from "react-icons/tb";
 import { IconButton } from "ui/components/buttons/IconButton";
 import { JsonViewer, JsonViewerTabs, type JsonViewerTabsRef } from "ui/components/code/JsonViewer";
 import { twMerge } from "ui/elements/mocks/tailwind-merge";
-import { Form } from "ui/components/form/json-schema-form";
+import { Field, Form } from "ui/components/form/json-schema-form";
 import { Button } from "ui/components/buttons/Button";
 import * as Formy from "ui/components/form/Formy";
 import { appShellStore } from "ui/store";
@@ -52,6 +52,7 @@ export function Sidebar({ open, toggle }) {
                placeholder="Search tools"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
+               autoCapitalize="none"
             />
             <nav className="flex flex-col flex-1 gap-1">
                {tools
@@ -91,6 +92,7 @@ export function Content() {
    const jsonViewerTabsRef = useRef<JsonViewerTabsRef>(null);
    const hasInputSchema =
       content?.inputSchema && Object.keys(content.inputSchema.properties ?? {}).length > 0;
+   const [isPending, startTransition] = useTransition();
 
    useEffect(() => {
       setPayload(getTemplate(content?.inputSchema));
@@ -103,6 +105,7 @@ export function Content() {
          name: content.name,
          arguments: payload,
       };
+      startTransition(async () => {
          addHistory("request", request);
          const res = await client.callTool(request);
          if (res) {
@@ -110,6 +113,7 @@ export function Content() {
             addHistory("response", res);
             jsonViewerTabsRef.current?.setSelected("Result");
          }
+      });
    }, [payload]);
 
    if (!content) return null;
@@ -124,20 +128,33 @@ export function Content() {
    } catch (e) {}
 
    return (
-      <div className="flex flex-grow flex-col">
+      <div className="flex flex-grow flex-col max-w-screen">
+         <Form
+            key={content.name}
+            schema={{
+               title: "InputSchema",
+               ...content?.inputSchema,
+            }}
+            validateOn="submit"
+            initialValues={payload}
+            hiddenSubmit={false}
+            onChange={(value) => {
+               setPayload(value);
+            }}
+            onSubmit={handleSubmit}
+         >
             <AppShell.SectionHeader
-            className="max-w-full min-w-0 debug"
+               className="max-w-full min-w-0"
                right={
                   <div className="flex flex-row gap-2">
                      <IconButton
-                     Icon={historyVisible ? TbHistoryOff : TbHistory}
+                        Icon={historyVisible ? TbHistory : TbHistoryOff}
                         onClick={() => setHistoryVisible(!historyVisible)}
                      />
                      <Button
-                     type="button"
+                        type="submit"
-                     disabled={!content?.name}
+                        disabled={!content?.name || isPending}
                         variant="primary"
-                     onClick={handleSubmit}
                         className="whitespace-nowrap"
                      >
                         Call Tool
@@ -152,36 +169,28 @@ export function Content() {
                   <span className="truncate">{content?.name}</span>
                </AppShell.SectionHeaderTitle>
             </AppShell.SectionHeader>
-         <div className="flex flex-grow flex-row w-full">
+            <div className="flex flex-grow flex-row w-vw">
                <div className="flex flex-grow flex-col w-full">
                   <AppShell.Scrollable>
                      <div key={JSON.stringify(content)} className="flex flex-col py-4 px-5  gap-4">
                         <p className="text-primary/80">{content?.description}</p>
 
-                     {hasInputSchema && (
+                        {hasInputSchema && <Field name="" />}
-                        <Form
-                           schema={{
-                              title: "InputSchema",
-                              ...content?.inputSchema,
-                           }}
-                           initialValues={payload}
-                           hiddenSubmit={false}
-                           onChange={(value) => {
-                              setPayload(value);
-                           }}
-                        />
-                     )}
                         <JsonViewerTabs
                            ref={jsonViewerTabsRef}
                            expand={9}
                            showCopy
                            showSize
                            tabs={{
-                           Arguments: { json: payload, title: "Payload", enabled: hasInputSchema },
+                              Arguments: {
+                                 json: payload,
+                                 title: "Payload",
+                                 enabled: hasInputSchema,
+                              },
                               Result: { json: readableResult, title: "Result" },
-                           "Tool Configuration": {
+                              Configuration: {
                                  json: content ?? null,
-                              title: "Tool Configuration",
+                                 title: "Configuration",
                               },
                            }}
                         />
@@ -189,11 +198,12 @@ export function Content() {
                   </AppShell.Scrollable>
                </div>
                {historyVisible && (
-               <AppShell.Sidebar name="right" handle="left" maxWidth={window.innerWidth * 0.25}>
+                  <AppShell.Sidebar name="right" handle="left" maxWidth={window.innerWidth * 0.4}>
                      <History />
                   </AppShell.Sidebar>
                )}
             </div>
+         </Form>
       </div>
    );
 }
@@ -211,7 +221,7 @@ const History = () => {
                      key={`${item.type}-${i}`}
                      json={item.data}
                      title={item.type}
-                     expand={1}
+                     expand={2}
                   />
                ))}
             </div>