fix mcp auth, styling fixes

app/package.json

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

app/src/modules/ModuleManager.ts

@@ -1,13 +1,5 @@
-import {
-   mark,
-   stripMark,
-   $console,
-   s,
-   objectEach,
-   transformObject,
-   McpServer,
-   DebugLogger,
-} from "bknd/utils";
+import { mark, stripMark, $console, s, objectEach, transformObject, McpServer } from "bknd/utils";
+import { DebugLogger } from "core/utils/DebugLogger";
 import { Guard } from "auth/authorize/Guard";
 import { env } from "core/env";
 import { BkndError } from "core/errors";

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

@@ -20,8 +20,9 @@ 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",
+   stringValue:
+      "text-emerald-600 dark:text-emerald-500 font-mono select-text text-wrap whitespace-wrap break-words",
+   numberValue: "text-sky-500 dark:text-sky-400 font-mono select-text",
    nullValue: "text-zinc-400 font-mono",
    undefinedValue: "text-zinc-400 font-mono",
    otherValue: "text-zinc-400 font-mono",

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

@@ -1,6 +1,6 @@
 import { useClickOutside, useHotkeys } from "@mantine/hooks";
 import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
-import { clampNumber } from "core/utils/numbers";
+import { transformObject, clampNumber } from "bknd/utils";
 import { throttle } from "lodash-es";
 import { ScrollArea } from "radix-ui";
 import {
@@ -19,9 +19,21 @@ import { appShellStore } from "ui/store";
 import { useLocation } from "wouter";
 
 export function Root({ children }: { children: React.ReactNode }) {
+   const sidebarWidths = appShellStore((store) => store.sidebars);
+   const style = transformObject(sidebarWidths, (value) => value.width);
    return (
       <AppShellProvider>
-         <div id="app-shell" data-shell="root" className="flex flex-1 flex-col select-none h-dvh">
+         <div
+            id="app-shell"
+            data-shell="root"
+            className="flex flex-1 flex-col select-none h-dvh"
+            style={Object.fromEntries(
+               Object.entries(style).map(([key, value]) => [
+                  `--sidebar-width-${key}`,
+                  `${value}px`,
+               ]),
+            )}
+         >
             {children}
          </div>
       </AppShellProvider>

app/src/ui/main.css

@@ -74,7 +74,7 @@
    @apply bg-background text-primary overflow-hidden h-dvh w-dvw;
 
    ::selection {
-      @apply bg-muted;
+      @apply bg-primary/15;
    }
 
    input {

app/src/ui/main.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom/client";
 import Admin from "./Admin";
-import "./main.css";
+//import "./main.css";
 import "./styles.css";
 
 function render() {

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

@@ -129,7 +129,7 @@ export function Content() {
 
    return (
       <Form
-         className="flex flex-grow flex-col max-w-screen"
+         className="flex flex-grow flex-col min-w-0 max-w-screen"
          key={content.name}
          schema={{
             title: "InputSchema",
@@ -170,7 +170,12 @@ export function Content() {
             </AppShell.SectionHeaderTitle>
          </AppShell.SectionHeader>
          <div className="flex flex-grow flex-row w-vw">
-            <div className="flex flex-grow flex-col w-full">
+            <div
+               className="flex flex-grow flex-col max-w-full"
+               style={{
+                  width: "calc(100% - var(--sidebar-width-right) - 1px)",
+               }}
+            >
                <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>