shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-16 12:37:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

mcp: improve auth id type + styling fixes

Browse Source
This commit is contained in:
dswbx
2025-08-21 10:58:31 +02:00
parent f9184a71db
commit dcf88cf587
8 changed files with 110 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/src/ui/components/code/JsonViewer.tsx
View File

@@ -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-row gap-4 border-b px-3 border-primary/10">
<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 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}

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

@@ -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;

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

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

6
app/src/ui/layouts/AppShell/AppShell.tsx
View File

@@ -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>
</>

24
app/src/ui/routes/tools/mcp/mcp.tsx
View File

@@ -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")} />
<AppShell.SectionHeaderAccordionItem
title="Resources"
open={feature === "resources"}
toggle={() => setFeature("resources")}
>
<div className="flex flex-col flex-grow p-3 gap-3 justify-center items-center opacity-40">
<i>Resources</i>
</div>
</AppShell.SectionHeaderAccordionItem>
</AppShell.MaxHeightContainer>
<Tools.Sidebar open={feature === "tools"} toggle={() => setFeature("tools")} />
<AppShell.SectionHeaderAccordionItem
title="Resources"
open={feature === "resources"}
toggle={() => setFeature("resources")}
>
<div className="flex flex-col flex-grow p-3 gap-3 justify-center items-center opacity-40">
<i>Resources</i>
</div>
</AppShell.SectionHeaderAccordionItem>
</AppShell.Sidebar>
{feature === "tools" && <Tools.Content />}

160
app/src/ui/routes/tools/mcp/tools.tsx
View File

@@ -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);
const res = await client.callTool(request);
if (res) {
setResult(res);
addHistory("response", res);
jsonViewerTabsRef.current?.setSelected("Result");
}
startTransition(async () => {
addHistory("request", request);
const res = await client.callTool(request);
if (res) {
setResult(res);
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">
<AppShell.SectionHeader
className="max-w-full min-w-0 debug"
right={
<div className="flex flex-row gap-2">
<IconButton
Icon={historyVisible ? TbHistoryOff : TbHistory}
onClick={() => setHistoryVisible(!historyVisible)}
/>
<Button
type="button"
disabled={!content?.name}
variant="primary"
onClick={handleSubmit}
className="whitespace-nowrap"
>
Call Tool
</Button>
</div>
}
<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.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-full">
<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>
<AppShell.SectionHeader
className="max-w-full min-w-0"
right={
<div className="flex flex-row gap-2">
<IconButton
Icon={historyVisible ? TbHistory : TbHistoryOff}
onClick={() => setHistoryVisible(!historyVisible)}
/>
<Button
type="submit"
disabled={!content?.name || isPending}
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 && (
<Form
schema={{
title: "InputSchema",
...content?.inputSchema,
}}
initialValues={payload}
hiddenSubmit={false}
onChange={(value) => {
setPayload(value);
{hasInputSchema && <Field name="" />}
<JsonViewerTabs
ref={jsonViewerTabsRef}
expand={9}
showCopy
showSize
tabs={{
Arguments: {
json: payload,
title: "Payload",
enabled: hasInputSchema,
},
Result: { json: readableResult, title: "Result" },
Configuration: {
json: content ?? null,
title: "Configuration",
},
}}
/>
)}
<JsonViewerTabs
ref={jsonViewerTabsRef}
expand={9}
showCopy
showSize
tabs={{
Arguments: { json: payload, title: "Payload", enabled: hasInputSchema },
Result: { json: readableResult, title: "Result" },
"Tool Configuration": {
json: content ?? null,
title: "Tool Configuration",
},
}}
/>
</div>
</AppShell.Scrollable>
</div>
</AppShell.Scrollable>
</div>
{historyVisible && (
<AppShell.Sidebar name="right" handle="left" maxWidth={window.innerWidth * 0.4}>
<History />
</AppShell.Sidebar>
)}
</div>
{historyVisible && (
<AppShell.Sidebar name="right" handle="left" maxWidth={window.innerWidth * 0.25}>
<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>