Enhance authentication and authorization components

- Refactored `AppAuth` to introduce `getGuardContextSchema` for improved user context handling.
- Updated `Authenticator` to utilize `pickKeys` for user data extraction in JWT generation.
- Enhanced `Guard` class to improve permission checks and error handling.
- Modified `SystemController` to return context schema alongside permissions in API responses.
- Added new `permissions` method in `SystemApi` for fetching permissions.
- Improved UI components with additional props and tooltip support for better user experience.
This commit is contained in:
dswbx
2025-10-24 09:14:31 +02:00
parent 38902ebcba
commit eb0822bbff
15 changed files with 290 additions and 57 deletions

View File

@@ -65,7 +65,7 @@
"hono": "4.8.3", "hono": "4.8.3",
"json-schema-library": "10.0.0-rc7", "json-schema-library": "10.0.0-rc7",
"json-schema-to-ts": "^3.1.1", "json-schema-to-ts": "^3.1.1",
"jsonv-ts": "0.8.6", "jsonv-ts": "0.9.1",
"kysely": "0.27.6", "kysely": "0.27.6",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"oauth4webapi": "^2.11.1", "oauth4webapi": "^2.11.1",

View File

@@ -2,7 +2,7 @@ import type { DB, PrimaryFieldType } from "bknd";
import * as AuthPermissions from "auth/auth-permissions"; import * as AuthPermissions from "auth/auth-permissions";
import type { AuthStrategy } from "auth/authenticate/strategies/Strategy"; import type { AuthStrategy } from "auth/authenticate/strategies/Strategy";
import type { PasswordStrategy } from "auth/authenticate/strategies/PasswordStrategy"; import type { PasswordStrategy } from "auth/authenticate/strategies/PasswordStrategy";
import { $console, secureRandomString, transformObject, pick } from "bknd/utils"; import { $console, secureRandomString, transformObject, pickKeys } from "bknd/utils";
import type { Entity, EntityManager } from "data/entities"; import type { Entity, EntityManager } from "data/entities";
import { em, entity, enumm, type FieldSchema } from "data/prototype"; import { em, entity, enumm, type FieldSchema } from "data/prototype";
import { Module } from "modules/Module"; import { Module } from "modules/Module";
@@ -113,6 +113,19 @@ export class AppAuth extends Module<AppAuthSchema> {
return authConfigSchema; return authConfigSchema;
} }
getGuardContextSchema() {
const userschema = this.getUsersEntity().toSchema() as any;
return {
type: "object",
properties: {
user: {
type: "object",
properties: pickKeys(userschema.properties, this.config.jwt.fields as any),
},
},
};
}
get authenticator(): Authenticator { get authenticator(): Authenticator {
this.throwIfNotBuilt(); this.throwIfNotBuilt();
return this._authenticator!; return this._authenticator!;

View File

@@ -6,10 +6,8 @@ import { deleteCookie, getSignedCookie, setSignedCookie } from "hono/cookie";
import { sign, verify } from "hono/jwt"; import { sign, verify } from "hono/jwt";
import { type CookieOptions, serializeSigned } from "hono/utils/cookie"; import { type CookieOptions, serializeSigned } from "hono/utils/cookie";
import type { ServerEnv } from "modules/Controller"; import type { ServerEnv } from "modules/Controller";
import { pick } from "lodash-es";
import { InvalidConditionsException } from "auth/errors"; import { InvalidConditionsException } from "auth/errors";
import { s, parse, secret, runtimeSupports, truncate, $console } from "bknd/utils"; import { s, parse, secret, runtimeSupports, truncate, $console, pickKeys } from "bknd/utils";
import { $object } from "modules/mcp";
import type { AuthStrategy } from "./strategies/Strategy"; import type { AuthStrategy } from "./strategies/Strategy";
type Input = any; // workaround type Input = any; // workaround
@@ -229,7 +227,7 @@ export class Authenticator<
// @todo: add jwt tests // @todo: add jwt tests
async jwt(_user: SafeUser | ProfileExchange): Promise<string> { async jwt(_user: SafeUser | ProfileExchange): Promise<string> {
const user = pick(_user, this.config.jwt.fields); const user = pickKeys(_user, this.config.jwt.fields as any);
const payload: JWTPayload = { const payload: JWTPayload = {
...user, ...user,
@@ -255,7 +253,7 @@ export class Authenticator<
} }
async safeAuthResponse(_user: User): Promise<AuthResponse> { async safeAuthResponse(_user: User): Promise<AuthResponse> {
const user = pick(_user, this.config.jwt.fields) as SafeUser; const user = pickKeys(_user, this.config.jwt.fields as any) as SafeUser;
return { return {
user, user,
token: await this.jwt(user), token: await this.jwt(user),

View File

@@ -125,7 +125,7 @@ export class Guard {
return this.config?.enabled === true; return this.config?.enabled === true;
} }
private collect(permission: Permission, c: GuardContext, context: any) { private collect(permission: Permission, c: GuardContext | undefined, context: any) {
const user = c && "get" in c ? c.get("auth")?.user : c; const user = c && "get" in c ? c.get("auth")?.user : c;
const ctx = { const ctx = {
...((context ?? {}) as any), ...((context ?? {}) as any),
@@ -181,15 +181,15 @@ export class Guard {
} }
if (!role) { if (!role) {
$console.debug("guard: user has no role, denying");
throw new GuardPermissionsException(permission, undefined, "User has no role"); throw new GuardPermissionsException(permission, undefined, "User has no role");
} else if (role.implicit_allow === true) { }
if (!rolePermission) {
if (role.implicit_allow === true) {
$console.debug(`guard: role "${role.name}" has implicit allow, allowing`); $console.debug(`guard: role "${role.name}" has implicit allow, allowing`);
return; return;
} }
if (!rolePermission) {
$console.debug("guard: rolePermission not found, denying");
throw new GuardPermissionsException( throw new GuardPermissionsException(
permission, permission,
undefined, undefined,

View File

@@ -137,6 +137,6 @@ export class ModuleHelper {
} }
const user = await auth.authenticator?.resolveAuthFromRequest(c.raw as any); const user = await auth.authenticator?.resolveAuthFromRequest(c.raw as any);
this.ctx.guard.granted(permission, { user }, context as any); this.ctx.guard.granted(permission, user as any, context as any);
} }
} }

View File

@@ -1,6 +1,7 @@
import type { ConfigUpdateResponse } from "modules/server/SystemController"; import type { ConfigUpdateResponse } from "modules/server/SystemController";
import { ModuleApi } from "./ModuleApi"; import { ModuleApi } from "./ModuleApi";
import type { ModuleConfigs, ModuleKey, ModuleSchemas } from "./ModuleManager"; import type { ModuleConfigs, ModuleKey, ModuleSchemas } from "./ModuleManager";
import type { TPermission } from "auth/authorize/Permission";
export type ApiSchemaResponse = { export type ApiSchemaResponse = {
version: number; version: number;
@@ -54,4 +55,8 @@ export class SystemApi extends ModuleApi<any> {
removeConfig<Module extends ModuleKey>(module: Module, path: string) { removeConfig<Module extends ModuleKey>(module: Module, path: string) {
return this.delete<ConfigUpdateResponse>(["config", "remove", module, path]); return this.delete<ConfigUpdateResponse>(["config", "remove", module, path]);
} }
permissions() {
return this.get<{ permissions: TPermission[]; context: object }>("permissions");
}
} }

View File

@@ -69,10 +69,13 @@ export class SystemController extends Controller {
if (!config.mcp.enabled) { if (!config.mcp.enabled) {
return; return;
} }
const { permission } = this.middlewares;
this.registerMcp(); this.registerMcp();
app.server.use( app.server.all(
config.mcp.path,
permission(SystemPermissions.mcp, {}),
mcpMiddleware({ mcpMiddleware({
setup: async () => { setup: async () => {
if (!this._mcpServer) { if (!this._mcpServer) {
@@ -110,7 +113,6 @@ export class SystemController extends Controller {
explainEndpoint: true, explainEndpoint: true,
}, },
endpoint: { endpoint: {
path: config.mcp.path as any,
// @ts-ignore // @ts-ignore
_init: isNode() ? { duplex: "half" } : {}, _init: isNode() ? { duplex: "half" } : {},
}, },
@@ -415,7 +417,6 @@ export class SystemController extends Controller {
schema, schema,
config: config ? this.app.toJSON(secrets) : undefined, config: config ? this.app.toJSON(secrets) : undefined,
permissions: this.app.modules.ctx().guard.getPermissions(), permissions: this.app.modules.ctx().guard.getPermissions(),
//permissions: this.app.modules.ctx().guard.getPermissionNames(),
}); });
}, },
); );
@@ -428,7 +429,7 @@ export class SystemController extends Controller {
}), }),
(c) => { (c) => {
const permissions = this.app.modules.ctx().guard.getPermissions(); const permissions = this.app.modules.ctx().guard.getPermissions();
return c.json({ permissions }); return c.json({ permissions, context: this.app.module.auth.getGuardContextSchema() });
}, },
); );

View File

@@ -1,6 +1,6 @@
import type { Api } from "Api"; import type { Api } from "Api";
import { FetchPromise, type ModuleApi, type ResponseObject } from "modules/ModuleApi"; import { FetchPromise, type ModuleApi, type ResponseObject } from "modules/ModuleApi";
import useSWR, { type SWRConfiguration, useSWRConfig } from "swr"; import useSWR, { type SWRConfiguration, useSWRConfig, type Middleware, type SWRHook } from "swr";
import useSWRInfinite from "swr/infinite"; import useSWRInfinite from "swr/infinite";
import { useApi } from "ui/client"; import { useApi } from "ui/client";
import { useState } from "react"; import { useState } from "react";
@@ -89,3 +89,25 @@ export const useInvalidate = (options?: { exact?: boolean }) => {
return mutate((k) => typeof k === "string" && k.startsWith(key)); return mutate((k) => typeof k === "string" && k.startsWith(key));
}; };
}; };
const mountOnceCache = new Map<string, any>();
/**
* Simple middleware to only load on first mount.
*/
export const mountOnce: Middleware = (useSWRNext: SWRHook) => (key, fetcher, config) => {
if (typeof key === "string") {
if (mountOnceCache.has(key)) {
return useSWRNext(key, fetcher, {
...config,
revalidateOnMount: false,
});
}
const swr = useSWRNext(key, fetcher, config);
if (swr.data) {
mountOnceCache.set(key, true);
}
return swr;
}
return useSWRNext(key, fetcher, config);
};

View File

@@ -5,13 +5,15 @@ import { twMerge } from "tailwind-merge";
import { Link } from "ui/components/wouter/Link"; import { Link } from "ui/components/wouter/Link";
const sizes = { const sizes = {
smaller: "px-1.5 py-1 rounded-md gap-1 !text-xs",
small: "px-2 py-1.5 rounded-md gap-1 text-sm", small: "px-2 py-1.5 rounded-md gap-1 text-sm",
default: "px-3 py-2.5 rounded-md gap-1.5", default: "px-3 py-2.5 rounded-md gap-1.5",
large: "px-4 py-3 rounded-md gap-2.5 text-lg", large: "px-4 py-3 rounded-md gap-2.5 text-lg",
}; };
const iconSizes = { const iconSizes = {
small: 12, smaller: 12,
small: 14,
default: 16, default: 16,
large: 20, large: 20,
}; };

View File

@@ -0,0 +1,73 @@
import { useEffect, useState } from "react";
import { useTheme } from "ui/client/use-theme";
import { cn } from "ui/lib/utils";
export type CodePreviewProps = {
code: string;
className?: string;
lang?: string;
theme?: string;
enabled?: boolean;
};
export const CodePreview = ({
code,
className,
lang = "typescript",
theme: _theme,
enabled = true,
}: CodePreviewProps) => {
const [highlightedHtml, setHighlightedHtml] = useState<string | null>(null);
const $theme = useTheme();
const theme = (_theme ?? $theme.theme === "dark") ? "github-dark" : "github-light";
useEffect(() => {
if (!enabled) return;
let cancelled = false;
setHighlightedHtml(null);
async function highlightCode() {
try {
// Dynamically import Shiki from CDN
// @ts-expect-error - Dynamic CDN import
const { codeToHtml } = await import("https://esm.sh/shiki@3.13.0");
if (cancelled) return;
const html = await codeToHtml(code, {
lang,
theme,
structure: "inline",
});
if (cancelled) return;
setHighlightedHtml(html);
} catch (error) {
console.error("Failed to load Shiki:", error);
// Fallback to plain text if Shiki fails to load
if (!cancelled) {
setHighlightedHtml(code);
}
}
}
highlightCode();
return () => {
cancelled = true;
};
}, [code, enabled]);
if (!highlightedHtml) {
return <pre className={cn("select-text cursor-text", className)}>{code}</pre>;
}
return (
<pre
className={cn("select-text cursor-text", className)}
dangerouslySetInnerHTML={{ __html: highlightedHtml }}
/>
);
};

View File

@@ -1,4 +1,4 @@
import { IconBug } from "@tabler/icons-react"; import { IconBug, IconInfoCircle } from "@tabler/icons-react";
import type { JsonSchema } from "json-schema-library"; import type { JsonSchema } from "json-schema-library";
import { Children, type ReactElement, type ReactNode, cloneElement, isValidElement } from "react"; import { Children, type ReactElement, type ReactNode, cloneElement, isValidElement } from "react";
import { IconButton } from "ui/components/buttons/IconButton"; import { IconButton } from "ui/components/buttons/IconButton";
@@ -12,6 +12,7 @@ import {
import { Popover } from "ui/components/overlay/Popover"; import { Popover } from "ui/components/overlay/Popover";
import { getLabel } from "./utils"; import { getLabel } from "./utils";
import { twMerge } from "tailwind-merge"; import { twMerge } from "tailwind-merge";
import { Tooltip } from "@mantine/core";
export type FieldwrapperProps = { export type FieldwrapperProps = {
name: string; name: string;
@@ -24,7 +25,7 @@ export type FieldwrapperProps = {
children: ReactElement | ReactNode; children: ReactElement | ReactNode;
errorPlacement?: "top" | "bottom"; errorPlacement?: "top" | "bottom";
description?: string; description?: string;
descriptionPlacement?: "top" | "bottom"; descriptionPlacement?: "top" | "bottom" | "label";
fieldId?: string; fieldId?: string;
className?: string; className?: string;
}; };
@@ -53,11 +54,17 @@ export function FieldWrapper({
<Formy.ErrorMessage>{errors.map((e) => e.message).join(", ")}</Formy.ErrorMessage> <Formy.ErrorMessage>{errors.map((e) => e.message).join(", ")}</Formy.ErrorMessage>
); );
const Description = description && ( const Description = description ? (
["top", "bottom"].includes(descriptionPlacement) ? (
<Formy.Help className={descriptionPlacement === "top" ? "-mt-1 mb-1" : "mb-2"}> <Formy.Help className={descriptionPlacement === "top" ? "-mt-1 mb-1" : "mb-2"}>
{description} {description}
</Formy.Help> </Formy.Help>
); ) : (
<Tooltip label={description}>
<IconInfoCircle className="size-4 opacity-50" />
</Tooltip>
)
) : null;
return ( return (
<Formy.Group <Formy.Group
@@ -72,9 +79,10 @@ export function FieldWrapper({
<Formy.Label <Formy.Label
as={wrapper === "fieldset" ? "legend" : "label"} as={wrapper === "fieldset" ? "legend" : "label"}
htmlFor={fieldId} htmlFor={fieldId}
className="self-start" className="self-start flex flex-row gap-1 items-center"
> >
{label} {required && <span className="font-medium opacity-30">*</span>} {label} {required && <span className="font-medium opacity-30">*</span>}
{descriptionPlacement === "label" && Description}
</Formy.Label> </Formy.Label>
)} )}
{descriptionPlacement === "top" && Description} {descriptionPlacement === "top" && Description}

View File

@@ -7,34 +7,36 @@ import { useNavigate } from "ui/lib/routes";
import { isDebug } from "core/env"; import { isDebug } from "core/env";
import { Dropdown } from "ui/components/overlay/Dropdown"; import { Dropdown } from "ui/components/overlay/Dropdown";
import { IconButton } from "ui/components/buttons/IconButton"; import { IconButton } from "ui/components/buttons/IconButton";
import { TbAdjustments, TbDots, TbFilter, TbTrash } from "react-icons/tb"; import { TbAdjustments, TbDots, TbFilter, TbTrash, TbInfoCircle, TbCodeDots } from "react-icons/tb";
import { Button } from "ui/components/buttons/Button"; import { Button } from "ui/components/buttons/Button";
import { Breadcrumbs2 } from "ui/layouts/AppShell/Breadcrumbs2"; import { Breadcrumbs2 } from "ui/layouts/AppShell/Breadcrumbs2";
import { routes } from "ui/lib/routes"; import { routes } from "ui/lib/routes";
import * as AppShell from "ui/layouts/AppShell/AppShell"; import * as AppShell from "ui/layouts/AppShell/AppShell";
import * as Formy from "ui/components/form/Formy"; import * as Formy from "ui/components/form/Formy";
import { ucFirst, s, transformObject, isObject } from "bknd/utils";
import { ucFirst, type s } from "bknd/utils";
import type { ModuleSchemas } from "bknd"; import type { ModuleSchemas } from "bknd";
import { import {
ArrayField,
CustomField, CustomField,
Field, Field,
FieldWrapper, FieldWrapper,
Form, Form,
FormContextOverride, FormContextOverride,
FormDebug, FormDebug,
ObjectField, ObjectJsonField,
Subscribe, Subscribe,
useDerivedFieldContext, useDerivedFieldContext,
useFormContext, useFormContext,
useFormError,
useFormValue, useFormValue,
} from "ui/components/form/json-schema-form"; } from "ui/components/form/json-schema-form";
import type { TPermission } from "auth/authorize/Permission"; import type { TPermission } from "auth/authorize/Permission";
import type { RoleSchema } from "auth/authorize/Role"; import type { RoleSchema } from "auth/authorize/Role";
import { Indicator, SegmentedControl, Tooltip } from "@mantine/core"; import { SegmentedControl, Tooltip } from "@mantine/core";
import { Popover } from "ui/components/overlay/Popover";
import { cn } from "ui/lib/utils"; import { cn } from "ui/lib/utils";
import type { PolicySchema } from "auth/authorize/Policy"; import { JsonViewer } from "ui/components/code/JsonViewer";
import { mountOnce, useApiQuery } from "ui/client";
import { CodePreview } from "ui/components/code/CodePreview";
export function AuthRolesEdit(props) { export function AuthRolesEdit(props) {
useBrowserTitle(["Auth", "Roles", props.params.role]); useBrowserTitle(["Auth", "Roles", props.params.role]);
@@ -67,7 +69,7 @@ const formConfig = {
}, },
}; };
function AuthRolesEditInternal({ params }) { function AuthRolesEditInternal({ params }: { params: { role: string } }) {
const [navigate] = useNavigate(); const [navigate] = useNavigate();
const { config, schema: authSchema, actions } = useBkndAuth(); const { config, schema: authSchema, actions } = useBkndAuth();
const roleName = params.role; const roleName = params.role;
@@ -225,11 +227,10 @@ const Permission = ({ permission, index }: { permission: TPermission; index?: nu
if (!Array.isArray(v)) return undefined; if (!Array.isArray(v)) return undefined;
return v.find((v) => v && v.permission === permission.name); return v.find((v) => v && v.permission === permission.name);
}); });
const { setValue, deleteValue } = useFormContext(); const { setValue } = useFormContext();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const data = value as PermissionData | undefined; const data = value as PermissionData | undefined;
const policiesCount = data?.policies?.length ?? 0; const policiesCount = data?.policies?.length ?? 0;
const hasContext = !!permission.context;
async function handleSwitch() { async function handleSwitch() {
if (data) { if (data) {
@@ -270,9 +271,9 @@ const Permission = ({ permission, index }: { permission: TPermission; index?: nu
<IconButton <IconButton
size="md" size="md"
variant="ghost" variant="ghost"
disabled={!data || !hasContext} disabled={!data}
Icon={TbAdjustments} Icon={TbAdjustments}
className={cn("disabled:opacity-20", !hasContext && "!opacity-0")} className={cn("disabled:opacity-20")}
onClick={() => setOpen((o) => !o)} onClick={() => setOpen((o) => !o)}
/> />
</div> </div>
@@ -282,14 +283,6 @@ const Permission = ({ permission, index }: { permission: TPermission; index?: nu
{open && ( {open && (
<div className="px-3.5 py-3.5"> <div className="px-3.5 py-3.5">
<Policies path={`permissions.${index}.policies`} permission={permission} /> <Policies path={`permissions.${index}.policies`} permission={permission} />
{/* <ArrayField
path={`permissions.${index}.policies`}
labelAdd="Add Policy"
wrapperProps={{
label: false,
wrapper: "group",
}}
/> */}
</div> </div>
)} )}
</div> </div>
@@ -337,19 +330,68 @@ const Policies = ({ path, permission }: { path: string; permission: TPermission
); );
}; };
const mergeSchemas = (...schemas: object[]) => {
const schema = s.allOf(schemas.filter(Boolean).map(s.fromSchema));
return s.toTypes(schema, "Context");
};
function replaceEntitiesEnum(schema: Record<string, any>, entities: string[]) {
if (!isObject(schema) || !Array.isArray(entities) || entities.length === 0) return schema;
return transformObject(schema, (sub, name) => {
if (name === "properties") {
return transformObject(sub as Record<string, any>, (propConfig, propKey) => {
if (propKey === "entity" && propConfig.type === "string") {
return {
...propConfig,
enum: entities,
};
}
return propConfig;
});
}
return sub;
});
}
const Policy = ({ const Policy = ({
permission, permission,
}: { }: {
permission: TPermission; permission: TPermission;
}) => { }) => {
const { value } = useFormValue(""); const { value } = useFormValue("");
const $bknd = useBknd();
const $permissions = useApiQuery((api) => api.system.permissions(), {
use: [mountOnce],
});
const entities = Object.keys($bknd.config.data.entities ?? {});
const ctx = $permissions.data
? mergeSchemas(
$permissions.data.context,
replaceEntitiesEnum(permission.context ?? null, entities),
)
: undefined;
return ( return (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Field name="description" /> <Field name="description" />
<ObjectField path="condition" wrapperProps={{ wrapper: "group" }} />
<CustomFieldWrapper
name="condition"
label="Condition"
description="The condition that must be met for the policy to be applied."
schema={ctx}
>
<ObjectJsonField path="condition" />
</CustomFieldWrapper>
<CustomField path="effect"> <CustomField path="effect">
{({ value, setValue }) => ( {({ value, setValue }) => (
<FieldWrapper name="effect" label="Effect"> <FieldWrapper
name="effect"
label="Effect"
descriptionPlacement="label"
description="The effect of the policy to take effect on met condition."
>
<SegmentedControl <SegmentedControl
className="border border-muted" className="border border-muted"
defaultValue={value} defaultValue={value}
@@ -368,8 +410,72 @@ const Policy = ({
</CustomField> </CustomField>
{value?.effect === "filter" && ( {value?.effect === "filter" && (
<ObjectField path="filter" wrapperProps={{ wrapper: "group" }} /> <CustomFieldWrapper
name="filter"
label="Filter"
description="Filter to apply to all queries on met condition."
schema={ctx}
>
<ObjectJsonField path="filter" />
</CustomFieldWrapper>
)} )}
</div> </div>
); );
}; };
const CustomFieldWrapper = ({ children, name, label, description, schema }: any) => {
const errors = useFormError(name, { strict: true });
const Errors = errors.length > 0 && (
<Formy.ErrorMessage>{errors.map((e) => e.message).join(", ")}</Formy.ErrorMessage>
);
return (
<Formy.Group as="div">
<Formy.Label
as="label"
htmlFor={name}
className="flex flex-row gap-1 justify-between items-center"
>
<div className="flex flex-row gap-1 items-center">
{label}
{description && (
<Tooltip label={description}>
<TbInfoCircle className="size-4 opacity-50" />
</Tooltip>
)}
</div>
{schema && (
<div>
<Popover
overlayProps={{
className: "max-w-none",
}}
position="bottom-end"
target={() =>
typeof schema === "object" ? (
<JsonViewer
className="w-auto max-w-120 bg-background pr-3 text-sm"
json={schema}
expand={5}
/>
) : (
<CodePreview
code={schema}
lang="typescript"
className="w-auto max-w-120 bg-background p-3 text-sm"
/>
)
}
>
<Button variant="ghost" size="smaller" IconLeft={TbCodeDots}>
Context
</Button>
</Popover>
</div>
)}
</Formy.Label>
{children}
{Errors}
</Formy.Group>
);
};

View File

@@ -39,7 +39,7 @@ export default function ToolsMcp() {
<div className="hidden md:flex flex-row gap-2 items-center bg-primary/5 rounded-full px-3 pr-3.5 py-2"> <div className="hidden md:flex flex-row gap-2 items-center bg-primary/5 rounded-full px-3 pr-3.5 py-2">
<TbWorld /> <TbWorld />
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<span className="block truncate text-sm font-mono leading-none"> <span className="block truncate text-sm font-mono leading-none select-text">
{window.location.origin + mcpPath} {window.location.origin + mcpPath}
</span> </span>
</div> </div>

View File

@@ -12,6 +12,7 @@ import * as Formy from "ui/components/form/Formy";
import { appShellStore } from "ui/store"; import { appShellStore } from "ui/store";
import { Icon } from "ui/components/display/Icon"; import { Icon } from "ui/components/display/Icon";
import { useMcpClient } from "./hooks/use-mcp-client"; import { useMcpClient } from "./hooks/use-mcp-client";
import { Tooltip } from "@mantine/core";
export function Sidebar({ open, toggle }) { export function Sidebar({ open, toggle }) {
const client = useMcpClient(); const client = useMcpClient();
@@ -48,7 +49,11 @@ export function Sidebar({ open, toggle }) {
toggle={toggle} toggle={toggle}
renderHeaderRight={() => ( renderHeaderRight={() => (
<div className="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
{error && <Icon.Err title={error} className="size-5 pointer-events-auto" />} {error && (
<Tooltip label={error}>
<Icon.Err className="size-5 pointer-events-auto" />
</Tooltip>
)}
<span className="flex-inline bg-primary/10 px-2 py-1.5 rounded-xl text-sm font-mono leading-none"> <span className="flex-inline bg-primary/10 px-2 py-1.5 rounded-xl text-sm font-mono leading-none">
{tools.length} {tools.length}
</span> </span>

View File

@@ -35,7 +35,7 @@
"hono": "4.8.3", "hono": "4.8.3",
"json-schema-library": "10.0.0-rc7", "json-schema-library": "10.0.0-rc7",
"json-schema-to-ts": "^3.1.1", "json-schema-to-ts": "^3.1.1",
"jsonv-ts": "0.8.6", "jsonv-ts": "0.9.1",
"kysely": "0.27.6", "kysely": "0.27.6",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"oauth4webapi": "^2.11.1", "oauth4webapi": "^2.11.1",
@@ -1243,7 +1243,7 @@
"@types/babel__traverse": ["@types/babel__traverse@7.20.6", "", { "dependencies": { "@babel/types": "^7.20.7" } }, "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg=="], "@types/babel__traverse": ["@types/babel__traverse@7.20.6", "", { "dependencies": { "@babel/types": "^7.20.7" } }, "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg=="],
"@types/bun": ["@types/bun@1.3.0", "", { "dependencies": { "bun-types": "1.3.0" } }, "sha512-+lAGCYjXjip2qY375xX/scJeVRmZ5cY0wyHYyCYxNcdEXrQ4AOe3gACgd4iQ8ksOslJtW4VNxBJ8llUwc3a6AA=="], "@types/bun": ["@types/bun@1.3.1", "", { "dependencies": { "bun-types": "1.3.1" } }, "sha512-4jNMk2/K9YJtfqwoAa28c8wK+T7nvJFOjxI4h/7sORWcypRNxBpr+TPNaCfVWq70tLCJsqoFwcf0oI0JU/fvMQ=="],
"@types/cookie": ["@types/cookie@0.6.0", "", {}, "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="], "@types/cookie": ["@types/cookie@0.6.0", "", {}, "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="],
@@ -2529,7 +2529,7 @@
"jsonpointer": ["jsonpointer@5.0.1", "", {}, "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ=="], "jsonpointer": ["jsonpointer@5.0.1", "", {}, "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ=="],
"jsonv-ts": ["jsonv-ts@0.8.6", "", { "optionalDependencies": { "hono": "*" }, "peerDependencies": { "typescript": "^5.0.0" } }, "sha512-z5jJ017LFOvAFFVodAIiCY024yW72RWc/K0Sct+OtuiLN+lKy+g0pI0jaz5JmuXaMIePc6HyopeeYHi8ffbYhw=="], "jsonv-ts": ["jsonv-ts@0.9.1", "", { "optionalDependencies": { "hono": "*" }, "peerDependencies": { "typescript": "^5.0.0" } }, "sha512-sQZn7kdSMK9m3hLWvTLyNk2zCUmte2lVWIcK02633EwMosk/VAdRgpMyfMDMV6/ZzSMI0/SwevkUbkxdGQrWtg=="],
"jsonwebtoken": ["jsonwebtoken@9.0.2", "", { "dependencies": { "jws": "^3.2.2", "lodash.includes": "^4.3.0", "lodash.isboolean": "^3.0.3", "lodash.isinteger": "^4.0.4", "lodash.isnumber": "^3.0.3", "lodash.isplainobject": "^4.0.6", "lodash.isstring": "^4.0.1", "lodash.once": "^4.0.0", "ms": "^2.1.1", "semver": "^7.5.4" } }, "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ=="], "jsonwebtoken": ["jsonwebtoken@9.0.2", "", { "dependencies": { "jws": "^3.2.2", "lodash.includes": "^4.3.0", "lodash.isboolean": "^3.0.3", "lodash.isinteger": "^4.0.4", "lodash.isnumber": "^3.0.3", "lodash.isplainobject": "^4.0.6", "lodash.isstring": "^4.0.1", "lodash.once": "^4.0.0", "ms": "^2.1.1", "semver": "^7.5.4" } }, "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ=="],
@@ -4095,7 +4095,7 @@
"@testing-library/jest-dom/chalk": ["chalk@3.0.0", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg=="], "@testing-library/jest-dom/chalk": ["chalk@3.0.0", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg=="],
"@types/bun/bun-types": ["bun-types@1.3.0", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-u8X0thhx+yJ0KmkxuEo9HAtdfgCBaM/aI9K90VQcQioAmkVp3SG3FkwWGibUFz3WdXAdcsqOcbU40lK7tbHdkQ=="], "@types/bun/bun-types": ["bun-types@1.3.1", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-NMrcy7smratanWJ2mMXdpatalovtxVggkj11bScuWuiOoXTiKIu2eVS1/7qbyI/4yHedtsn175n4Sm4JcdHLXw=="],
"@typescript-eslint/experimental-utils/eslint-utils": ["eslint-utils@2.1.0", "", { "dependencies": { "eslint-visitor-keys": "^1.1.0" } }, "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg=="], "@typescript-eslint/experimental-utils/eslint-utils": ["eslint-utils@2.1.0", "", { "dependencies": { "eslint-visitor-keys": "^1.1.0" } }, "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg=="],