1- import { useState } from "react"
2- import { Button } from "@/components/ui/button "
1+ import React , { useState } from "react"
2+ import { Trans } from "react-i18next "
33import {
4+ VSCodeButton ,
45 VSCodeCheckbox ,
56 VSCodeLink ,
67 VSCodePanels ,
@@ -10,13 +11,21 @@ import {
1011
1112import { McpServer } from "@roo/shared/mcp"
1213
13- import { vscode } from "@/utils/vscode"
14- import { Dialog , DialogContent , DialogHeader , DialogTitle , DialogDescription , DialogFooter } from "@/components/ui"
15-
14+ import { vscode } from "@src/utils/vscode"
1615import { useExtensionState } from "@src/context/ExtensionStateContext"
1716import { useAppTranslation } from "@src/i18n/TranslationContext"
18- import { Trans } from "react-i18next"
17+ import {
18+ Button ,
19+ Dialog ,
20+ DialogContent ,
21+ DialogHeader ,
22+ DialogTitle ,
23+ DialogDescription ,
24+ DialogFooter ,
25+ } from "@src/components/ui"
26+
1927import { Tab , TabContent , TabHeader } from "../common/Tab"
28+
2029import McpToolRow from "./McpToolRow"
2130import McpResourceRow from "./McpResourceRow"
2231import McpEnabledToggle from "./McpEnabledToggle"
@@ -158,7 +167,7 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
158167 }
159168
160169 const handleRowClick = ( ) => {
161- if ( ! server . error ) {
170+ if ( server . status === "connected" ) {
162171 setIsExpanded ( ! isExpanded )
163172 }
164173 }
@@ -199,12 +208,12 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
199208 alignItems : "center" ,
200209 padding : "8px" ,
201210 background : "var(--vscode-textCodeBlock-background)" ,
202- cursor : server . error ? "default " : "pointer " ,
203- borderRadius : isExpanded || server . error ? "4px 4px 0 0" : "4px" ,
211+ cursor : server . status === "connected" ? "pointer " : "default " ,
212+ borderRadius : isExpanded || server . status === "connected" ? "4px" : "4px 4px 0 0 " ,
204213 opacity : server . disabled ? 0.6 : 1 ,
205214 } }
206215 onClick = { handleRowClick } >
207- { ! server . error && (
216+ { server . status === "connected" && (
208217 < span
209218 className = { `codicon codicon-chevron-${ isExpanded ? "down" : "right" } ` }
210219 style = { { marginRight : "8px" } }
@@ -304,35 +313,7 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
304313 />
305314 </ div >
306315
307- { server . error ? (
308- < div
309- style = { {
310- fontSize : "13px" ,
311- background : "var(--vscode-textCodeBlock-background)" ,
312- borderRadius : "0 0 4px 4px" ,
313- width : "100%" ,
314- } } >
315- < div
316- style = { {
317- color : "var(--vscode-testing-iconFailed)" ,
318- marginBottom : "8px" ,
319- padding : "0 10px" ,
320- overflowWrap : "break-word" ,
321- wordBreak : "break-word" ,
322- } } >
323- { server . error }
324- </ div >
325- < Button
326- variant = "secondary"
327- onClick = { handleRestart }
328- disabled = { server . status === "connecting" }
329- style = { { width : "calc(100% - 20px)" , margin : "0 10px 10px 10px" } } >
330- { server . status === "connecting"
331- ? t ( "mcp:serverStatus.retrying" )
332- : t ( "mcp:serverStatus.retryConnection" ) }
333- </ Button >
334- </ div >
335- ) : (
316+ { server . status === "connected" ? (
336317 isExpanded && (
337318 < div
338319 style = { {
@@ -434,6 +415,38 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
434415 </ div >
435416 </ div >
436417 )
418+ ) : (
419+ < div
420+ style = { {
421+ fontSize : "13px" ,
422+ background : "var(--vscode-textCodeBlock-background)" ,
423+ borderRadius : "0 0 4px 4px" ,
424+ width : "100%" ,
425+ } } >
426+ < div
427+ style = { {
428+ color : "var(--vscode-testing-iconFailed)" ,
429+ marginBottom : "8px" ,
430+ padding : "0 10px" ,
431+ overflowWrap : "break-word" ,
432+ wordBreak : "break-word" ,
433+ } } >
434+ { server . error &&
435+ server . error . split ( "\n" ) . map ( ( item , index ) => (
436+ < React . Fragment key = { index } >
437+ { index > 0 && < br /> }
438+ { item }
439+ </ React . Fragment >
440+ ) ) }
441+ </ div >
442+ < VSCodeButton
443+ appearance = "secondary"
444+ onClick = { handleRestart }
445+ disabled = { server . status === "connecting" }
446+ style = { { width : "calc(100% - 20px)" , margin : "0 10px 10px 10px" } } >
447+ { server . status === "connecting" ? "Retrying..." : "Retry Connection" }
448+ </ VSCodeButton >
449+ </ div >
437450 ) }
438451
439452 { /* Delete Confirmation Dialog */ }
0 commit comments