modelcontextprotocol · cliffhall · Mar 16, 2026 · Mar 15, 2026 · Mar 15, 2026
diff --git a/clients/tui/package.json b/clients/tui/package.json
@@ -29,15 +29,15 @@
     "pino": "^9.6.0",
     "commander": "^13.1.0",
     "@modelcontextprotocol/sdk": "^1.25.2",
-    "ink": "^5.2.1",
+    "ink": "^6.0.0",
     "ink-form": "^2.0.1",
     "ink-scroll-view": "^0.3.6",
     "open": "^10.2.0",
-    "react": "^18.3.1"
+    "react": "^19.0.0"
   },
   "devDependencies": {
     "@types/node": "^25.0.3",
-    "@types/react": "^18.3.23",
+    "@types/react": "^19.0.0",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vitest": "^4.0.17"

diff --git a/clients/tui/src/App.tsx b/clients/tui/src/App.tsx
@@ -1133,15 +1133,28 @@ function App({
     inspectorStderrLogs,
   ]);
 
-  // Set focus to the default for the active tab whenever the tab changes
+  // Keep focus state consistent when switching tabs (only adjust if focus is already in tab content)
   useEffect(() => {
     if (activeTab === "messages") {
-      setFocus("messagesList");
+      if (focus === "tabContentList" || focus === "tabContentDetails") {
+        setFocus("messagesList");
+      }
     } else if (activeTab === "requests") {
-      setFocus("requestsList");
+      if (focus === "tabContentList" || focus === "tabContentDetails") {
+        setFocus("requestsList");
+      }
     } else {
-      setFocus("tabContentList");
+      if (
+        focus === "messagesList" ||
+        focus === "messagesDetail" ||
+        focus === "requestsList" ||
+        focus === "requestsDetail"
+      ) {
+        setFocus("tabContentList");
+      }
     }
+    // Intentionally not depending on focus to avoid loops
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeTab]);
 
   // Switch away from logging tab if server is not stdio
@@ -1428,7 +1441,12 @@ function App({
           </Box>
 
           {/* Fixed footer */}
-          <Box flexShrink={0} height={1} justifyContent="center">
+          <Box
+            flexShrink={0}
+            height={1}
+            justifyContent="center"
+            backgroundColor="gray"
+          >
             <Text bold color="white">
               ESC to exit
             </Text>

diff --git a/clients/tui/src/components/AuthTab.tsx b/clients/tui/src/components/AuthTab.tsx
@@ -371,7 +371,12 @@ export function AuthTab({
       </Box>
 
       {focused && (
-        <Box flexShrink={0} height={1} justifyContent="center">
+        <Box
+          flexShrink={0}
+          height={1}
+          justifyContent="center"
+          backgroundColor="gray"
+        >
           <Text bold color="white">
             ←/→ select, G/Q/S or Enter run, ↑/↓ scroll
           </Text>

diff --git a/clients/tui/src/components/DetailsModal.tsx b/clients/tui/src/components/DetailsModal.tsx
@@ -1,7 +1,6 @@
 import React, { useRef } from "react";
 import { Box, Text, useInput, type Key } from "ink";
 import { ScrollView, type ScrollViewRef } from "ink-scroll-view";
-import { ModalBackdrop } from "./ModalBackdrop.js";
 
 interface DetailsModalProps {
   title: string;
@@ -73,10 +72,6 @@ export function DetailsModal({
       justifyContent="center"
       alignItems="center"
     >
-      <ModalBackdrop
-        width={terminalDimensions.width}
-        height={terminalDimensions.height}
-      />
       {/* Modal Content */}
       <Box
         width={modalWidth}
@@ -86,6 +81,7 @@ export function DetailsModal({
         flexDirection="column"
         paddingX={1}
         paddingY={1}
+        backgroundColor="black"
       >
         {/* Header */}
         <Box flexShrink={0} marginBottom={1}>

diff --git a/clients/tui/src/components/HistoryTab.tsx b/clients/tui/src/components/HistoryTab.tsx
@@ -303,7 +303,12 @@ export function HistoryTab({
 
             {/* Fixed footer - only show when details pane is focused */}
             {focusedPane === "details" && (
-              <Box flexShrink={0} height={1} justifyContent="center">
+              <Box
+                flexShrink={0}
+                height={1}
+                justifyContent="center"
+                backgroundColor="gray"
+              >
                 <Text bold color="white">
                   ↑/↓ to scroll, + to zoom
                 </Text>

diff --git a/clients/tui/src/components/InfoTab.tsx b/clients/tui/src/components/InfoTab.tsx
@@ -208,7 +208,12 @@ export function InfoTab({
 
           {/* Fixed keyboard help footer at bottom - only show when focused */}
           {focused && (
-            <Box flexShrink={0} height={1} justifyContent="center">
+            <Box
+              flexShrink={0}
+              height={1}
+              justifyContent="center"
+              backgroundColor="gray"
+            >
               <Text bold color="white">
                 ↑/↓ to scroll, + to zoom
               </Text>

diff --git a/clients/tui/src/components/ModalBackdrop.tsx b/clients/tui/src/components/ModalBackdrop.tsx
diff --git a/clients/tui/src/components/PromptTestModal.tsx b/clients/tui/src/components/PromptTestModal.tsx
@@ -8,7 +8,6 @@ import type {
 } from "@modelcontextprotocol/sdk/types.js";
 import { promptArgsToForm } from "../utils/promptArgsToForm.js";
 import { ScrollView, type ScrollViewRef } from "ink-scroll-view";
-import { ModalBackdrop } from "./ModalBackdrop.js";
 
 // Helper to extract error message from various error types
 function getErrorMessage(error: unknown): string {
@@ -186,10 +185,6 @@ export function PromptTestModal({
       justifyContent="center"
       alignItems="center"
     >
-      <ModalBackdrop
-        width={terminalDimensions.width}
-        height={terminalDimensions.height}
-      />
       {/* Modal Content */}
       <Box
         width={modalWidth}
@@ -199,6 +194,7 @@ export function PromptTestModal({
         flexDirection="column"
         paddingX={1}
         paddingY={1}
+        backgroundColor="black"
       >
         {/* Header */}
         <Box flexShrink={0} marginBottom={1}>

diff --git a/clients/tui/src/components/PromptsTab.tsx b/clients/tui/src/components/PromptsTab.tsx
@@ -253,7 +253,12 @@ export function PromptsTab({
 
             {/* Fixed footer - only show when details pane is focused */}
             {focusedPane === "details" && (
-              <Box flexShrink={0} height={1} justifyContent="center">
+              <Box
+                flexShrink={0}
+                height={1}
+                justifyContent="center"
+                backgroundColor="gray"
+              >
                 <Text bold color="white">
                   ↑/↓ to scroll, + to zoom
                 </Text>

diff --git a/clients/tui/src/components/RequestsTab.tsx b/clients/tui/src/components/RequestsTab.tsx
@@ -347,7 +347,12 @@ export function RequestsTab({
 
             {/* Fixed footer - only show when details pane is focused */}
             {focusedPane === "details" && (
-              <Box flexShrink={0} height={1} justifyContent="center">
+              <Box
+                flexShrink={0}
+                height={1}
+                justifyContent="center"
+                backgroundColor="gray"
+              >
                 <Text bold color="white">
                   ↑/↓ to scroll, + to zoom
                 </Text>

diff --git a/clients/tui/src/components/ResourceTestModal.tsx b/clients/tui/src/components/ResourceTestModal.tsx
@@ -5,7 +5,6 @@ import { InspectorClient } from "@modelcontextprotocol/inspector-core/mcp/index.
 import type { ReadResourceResult } from "@modelcontextprotocol/sdk/types.js";
 import { uriTemplateToForm } from "../utils/uriTemplateToForm.js";
 import { ScrollView, type ScrollViewRef } from "ink-scroll-view";
-import { ModalBackdrop } from "./ModalBackdrop.js";
 
 // Helper to extract error message from various error types
 function getErrorMessage(error: unknown): string {
@@ -200,10 +199,6 @@ export function ResourceTestModal({
       justifyContent="center"
       alignItems="center"
     >
-      <ModalBackdrop
-        width={terminalDimensions.width}
-        height={terminalDimensions.height}
-      />
       {/* Modal Content */}
       <Box
         width={modalWidth}
@@ -213,6 +208,7 @@ export function ResourceTestModal({
         flexDirection="column"
         paddingX={1}
         paddingY={1}
+        backgroundColor="black"
       >
         {/* Header */}
         <Box flexShrink={0} marginBottom={1}>

diff --git a/clients/tui/src/components/ResourcesTab.tsx b/clients/tui/src/components/ResourcesTab.tsx
@@ -343,7 +343,12 @@ export function ResourcesTab({
 
             {/* Fixed footer - only show when details pane is focused */}
             {focusedPane === "details" && (
-              <Box flexShrink={0} height={1} justifyContent="center">
+              <Box
+                flexShrink={0}
+                height={1}
+                justifyContent="center"
+                backgroundColor="gray"
+              >
                 <Text bold color="white">
                   {resourceContent
                     ? "↑/↓ to scroll, + to zoom"
@@ -402,7 +407,12 @@ export function ResourcesTab({
 
             {/* Fixed footer - only show when details pane is focused */}
             {focusedPane === "details" && (
-              <Box flexShrink={0} height={1} justifyContent="center">
+              <Box
+                flexShrink={0}
+                height={1}
+                justifyContent="center"
+                backgroundColor="gray"
+              >
                 <Text bold color="white">
                   Enter to fetch
                 </Text>

diff --git a/clients/tui/src/components/ToolTestModal.tsx b/clients/tui/src/components/ToolTestModal.tsx
@@ -6,7 +6,6 @@ import type { Tool, CallToolResult } from "@modelcontextprotocol/sdk/types.js";
 import type { JsonValue } from "@modelcontextprotocol/inspector-core/mcp/index.js";
 import { schemaToForm } from "../utils/schemaToForm.js";
 import { ScrollView, type ScrollViewRef } from "ink-scroll-view";
-import { ModalBackdrop } from "./ModalBackdrop.js";
 
 interface ToolTestModalProps {
   tool: Tool;
@@ -181,10 +180,6 @@ export function ToolTestModal({
       justifyContent="center"
       alignItems="center"
     >
-      <ModalBackdrop
-        width={terminalDimensions.width}
-        height={terminalDimensions.height}
-      />
       {/* Modal Content */}
       <Box
         width={modalWidth}
@@ -194,6 +189,7 @@ export function ToolTestModal({
         flexDirection="column"
         paddingX={1}
         paddingY={1}
+        backgroundColor="black"
       >
         {/* Header */}
         <Box flexShrink={0} marginBottom={1}>

diff --git a/clients/tui/src/components/ToolsTab.tsx b/clients/tui/src/components/ToolsTab.tsx
@@ -224,7 +224,12 @@ export function ToolsTab({
 
             {/* Fixed footer - only show when details pane is focused */}
             {focusedPane === "details" && (
-              <Box flexShrink={0} height={1} justifyContent="center">
+              <Box
+                flexShrink={0}
+                height={1}
+                justifyContent="center"
+                backgroundColor="gray"
+              >
                 <Text bold color="white">
                   ↑/↓ to scroll, + to zoom
                 </Text>

diff --git a/clients/web/package.json b/clients/web/package.json
@@ -29,31 +29,31 @@
     "cleanup:e2e": "node e2e/global-teardown.js"
   },
   "dependencies": {
-    "@mcp-ui/client": "^6.0.0",
+    "@mcp-ui/client": "^7.0.0",
     "@modelcontextprotocol/ext-apps": "^1.0.0",
     "@hono/node-server": "^1.19.0",
     "@modelcontextprotocol/inspector-core": "*",
     "@modelcontextprotocol/sdk": "^1.25.2",
-    "@radix-ui/react-checkbox": "^1.1.4",
-    "@radix-ui/react-dialog": "^1.1.3",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-popover": "^1.1.3",
-    "@radix-ui/react-select": "^2.1.2",
-    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.1",
-    "@radix-ui/react-toast": "^1.2.6",
-    "@radix-ui/react-tooltip": "^1.1.8",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "ajv": "^6.12.6",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
     "lucide-react": "^0.523.0",
     "pkce-challenge": "^4.1.0",
     "prismjs": "^1.30.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-simple-code-editor": "^0.14.1",
     "tailwind-merge": "^2.5.3",
     "zod": "^3.25.76",
@@ -68,8 +68,8 @@
     "@testing-library/react": "^16.2.0",
     "@types/node": "^22.17.0",
     "@types/prismjs": "^1.26.5",
-    "@types/react": "^18.3.23",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^5.0.4",
     "autoprefixer": "^10.4.20",
     "co": "^4.6.0",