mcp: sorting tools, fixed cloudflare example, fixed some styling

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

@@ -5,11 +5,15 @@ import { TbWorld } from "react-icons/tb";
 import { McpIcon } from "./components/mcp-icon";
 import { useBknd } from "ui/client/bknd";
 import { Empty } from "ui/components/display/Empty";
+import { Button } from "ui/components/buttons/Button";
+import { appShellStore } from "ui/store";
 
 export default function ToolsMcp() {
    const { config, options } = useBknd();
    const feature = useMcpStore((state) => state.feature);
    const setFeature = useMcpStore((state) => state.setFeature);
+   const content = useMcpStore((state) => state.content);
+   const openSidebar = appShellStore((store) => store.toggleSidebar("default"));
 
    if (!config.server.mcp.enabled) {
       return (
@@ -25,15 +29,20 @@ export default function ToolsMcp() {
          <AppShell.SectionHeader>
             <div className="flex flex-row gap-4 items-center">
                <McpIcon />
-               <AppShell.SectionHeaderTitle>MCP UI</AppShell.SectionHeaderTitle>
-               <div className="flex flex-row gap-2 items-center bg-primary/5 rounded-full px-3 pr-3.5 py-2">
+               <AppShell.SectionHeaderTitle className="whitespace-nowrap truncate">
+                  MCP UI
+               </AppShell.SectionHeaderTitle>
+               <div className="hidden md:flex flex-row gap-2 items-center bg-primary/5 rounded-full px-3 pr-3.5 py-2">
                   <TbWorld />
-                  <span className="text-sm font-mono leading-none">
-                     {window.location.origin + "/mcp"}
-                  </span>
+                  <div className="min-w-0 flex-1">
+                     <span className="block truncate text-sm font-mono leading-none">
+                        {window.location.origin + "/mcp"}
+                     </span>
+                  </div>
                </div>
             </div>
          </AppShell.SectionHeader>
+
          <div className="flex h-full">
             <AppShell.Sidebar>
                <AppShell.MaxHeightContainer className="overflow-y-scroll md:overflow-auto">
@@ -50,6 +59,18 @@ export default function ToolsMcp() {
                </AppShell.MaxHeightContainer>
             </AppShell.Sidebar>
             {feature === "tools" && <Tools.Content />}
+
+            {!content && (
+               <Empty title="No tool selected" description="Please select a tool to continue.">
+                  <Button
+                     variant="primary"
+                     onClick={() => openSidebar()}
+                     className="block md:hidden"
+                  >
+                     Open Tools
+                  </Button>
+               </Empty>
+            )}
          </div>
       </div>
    );

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

@@ -6,15 +6,14 @@ 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 { Form } from "ui/components/form/json-schema-form";
 import { Button } from "ui/components/buttons/Button";
 import * as Formy from "ui/components/form/Formy";
-import { JsonEditor } from "ui/components/code/JsonEditor";
+import { appShellStore } from "ui/store";
 
 export function Sidebar({ open, toggle }) {
    const client = getClient();
+   const closeSidebar = appShellStore((store) => store.closeSidebar("default"));
    const tools = useMcpStore((state) => state.tools);
    const setTools = useMcpStore((state) => state.setTools);
    const setContent = useMcpStore((state) => state.setContent);
@@ -56,7 +55,7 @@ export function Sidebar({ open, toggle }) {
             />
             <nav className="flex flex-col flex-1 gap-1">
                {tools
-                  .filter((tool) => tool.name.includes(query))
+                  .filter((tool) => tool.name.toLowerCase().includes(query.toLowerCase()))
                   .map((tool) => {
                      return (
                         <AppShell.SidebarLink
@@ -65,7 +64,10 @@ export function Sidebar({ open, toggle }) {
                               "flex flex-col items-start h-auto py-3 gap-px",
                               content?.name === tool.name ? "active" : "",
                            )}
-                           onClick={() => setContent(tool)}
+                           onClick={() => {
+                              setContent(tool);
+                              closeSidebar();
+                           }}
                         >
                            <span className="font-mono">{tool.name}</span>
                            <span className="text-sm text-primary/50">{tool.description}</span>
@@ -124,6 +126,7 @@ export function Content() {
    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
@@ -135,17 +138,18 @@ export function Content() {
                      disabled={!content?.name}
                      variant="primary"
                      onClick={handleSubmit}
+                     className="whitespace-nowrap"
                   >
                      Call Tool
                   </Button>
                </div>
             }
          >
-            <AppShell.SectionHeaderTitle className="">
+            <AppShell.SectionHeaderTitle className="leading-tight">
                <span className="opacity-50">
                   Tools <span className="opacity-70">/</span>
                </span>{" "}
-               {content?.name}
+               <span className="truncate">{content?.name}</span>
             </AppShell.SectionHeaderTitle>
          </AppShell.SectionHeader>
          <div className="flex flex-grow flex-row w-full">