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"
             >
-               {children}
+               <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,18 +45,16 @@ 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")} />
-                  <Tools.Sidebar open={feature === "tools"} toggle={() => setFeature("tools")} />
+               <AppShell.SectionHeaderAccordionItem
-                  <AppShell.SectionHeaderAccordionItem
+                  title="Resources"
-                     title="Resources"
+                  open={feature === "resources"}
-                     open={feature === "resources"}
+                  toggle={() => setFeature("resources")}
-                     toggle={() => setFeature("resources")}
+               >
-                  >
+                  <div className="flex flex-col flex-grow p-3 gap-3 justify-center items-center opacity-40">
-                     <div className="flex flex-col flex-grow p-3 gap-3 justify-center items-center opacity-40">
+                     <i>Resources</i>
-                        <i>Resources</i>
+                  </div>
-                     </div>
+               </AppShell.SectionHeaderAccordionItem>
-                  </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,13 +105,15 @@ export function Content() {
          name: content.name,
          arguments: payload,
       };
-      addHistory("request", request);
+      startTransition(async () => {
-      const res = await client.callTool(request);
+         addHistory("request", request);
-      if (res) {
+         const res = await client.callTool(request);
-         setResult(res);
+         if (res) {
-         addHistory("response", res);
+            setResult(res);
-         jsonViewerTabsRef.current?.setSelected("Result");
+            addHistory("response", res);
-      }
+            jsonViewerTabsRef.current?.setSelected("Result");
+         }
+      });
    }, [payload]);
 
    if (!content) return null;
@@ -124,76 +128,82 @@ export function Content() {
    } catch (e) {}
 
    return (
-      <div className="flex flex-grow flex-col">
+      <div className="flex flex-grow flex-col max-w-screen">
-         <AppShell.SectionHeader
+         <Form
-            className="max-w-full min-w-0 debug"
+            key={content.name}
-            right={
+            schema={{
-               <div className="flex flex-row gap-2">
+               title: "InputSchema",
-                  <IconButton
+               ...content?.inputSchema,
-                     Icon={historyVisible ? TbHistoryOff : TbHistory}
+            }}
-                     onClick={() => setHistoryVisible(!historyVisible)}
+            validateOn="submit"
-                  />
+            initialValues={payload}
-                  <Button
+            hiddenSubmit={false}
-                     type="button"
+            onChange={(value) => {
-                     disabled={!content?.name}
+               setPayload(value);
-                     variant="primary"
+            }}
-                     onClick={handleSubmit}
+            onSubmit={handleSubmit}
-                     className="whitespace-nowrap"
-                  >
-                     Call Tool
-                  </Button>
-               </div>
-            }
          >
-            <AppShell.SectionHeaderTitle className="leading-tight">
+            <AppShell.SectionHeader
-               <span className="opacity-50">
+               className="max-w-full min-w-0"
-                  Tools <span className="opacity-70">/</span>
+               right={
-               </span>{" "}
+                  <div className="flex flex-row gap-2">
-               <span className="truncate">{content?.name}</span>
+                     <IconButton
-            </AppShell.SectionHeaderTitle>
+                        Icon={historyVisible ? TbHistory : TbHistoryOff}
-         </AppShell.SectionHeader>
+                        onClick={() => setHistoryVisible(!historyVisible)}
-         <div className="flex flex-grow flex-row w-full">
+                     />
-            <div className="flex flex-grow flex-col w-full">
+                     <Button
-               <AppShell.Scrollable>
+                        type="submit"
-                  <div key={JSON.stringify(content)} className="flex flex-col py-4 px-5  gap-4">
+                        disabled={!content?.name || isPending}
-                     <p className="text-primary/80">{content?.description}</p>
+                        variant="primary"
+                        className="whitespace-nowrap"
+                     >
+                        Call Tool
+                     </Button>
+                  </div>
+               }
+            >
+               <AppShell.SectionHeaderTitle className="leading-tight">
+                  <span className="opacity-50">
+                     Tools <span className="opacity-70">/</span>
+                  </span>{" "}
+                  <span className="truncate">{content?.name}</span>
+               </AppShell.SectionHeaderTitle>
+            </AppShell.SectionHeader>
+            <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
+                        <JsonViewerTabs
-                           schema={{
+                           ref={jsonViewerTabsRef}
-                              title: "InputSchema",
+                           expand={9}
-                              ...content?.inputSchema,
+                           showCopy
-                           }}
+                           showSize
-                           initialValues={payload}
+                           tabs={{
-                           hiddenSubmit={false}
+                              Arguments: {
-                           onChange={(value) => {
+                                 json: payload,
-                              setPayload(value);
+                                 title: "Payload",
+                                 enabled: hasInputSchema,
+                              },
+                              Result: { json: readableResult, title: "Result" },
+                              Configuration: {
+                                 json: content ?? null,
+                                 title: "Configuration",
+                              },
                            }}
                         />
-                     )}
+                     </div>
-                     <JsonViewerTabs
+                  </AppShell.Scrollable>
-                        ref={jsonViewerTabsRef}
+               </div>
-                        expand={9}
+               {historyVisible && (
-                        showCopy
+                  <AppShell.Sidebar name="right" handle="left" maxWidth={window.innerWidth * 0.4}>
-                        showSize
+                     <History />
-                        tabs={{
+                  </AppShell.Sidebar>
-                           Arguments: { json: payload, title: "Payload", enabled: hasInputSchema },
+               )}
-                           Result: { json: readableResult, title: "Result" },
-                           "Tool Configuration": {
-                              json: content ?? null,
-                              title: "Tool Configuration",
-                           },
-                        }}
-                     />
-                  </div>
-               </AppShell.Scrollable>
             </div>
-            {historyVisible && (
+         </Form>
-               <AppShell.Sidebar name="right" handle="left" maxWidth={window.innerWidth * 0.25}>
-                  <History />
-               </AppShell.Sidebar>
-            )}
-         </div>
       </div>
    );
 }
@@ -211,7 +221,7 @@ const History = () => {
                      key={`${item.type}-${i}`}
                      json={item.data}
                      title={item.type}
-                     expand={1}
+                     expand={2}
                   />
                ))}
             </div>