Fix retrying connection

src/services/mcp/McpHub.ts

@@ -147,20 +147,22 @@ export class McpHub {
 				},
 			})
 
-			transport.onerror = (error) => {
+			transport.onerror = async (error) => {
 				console.error(`Transport error for "${name}":`, error)
 				const connection = this.connections.find((conn) => conn.server.name === name)
 				if (connection) {
 					connection.server.status = "disconnected"
 					connection.server.error = error.message
 				}
+				await this.notifyWebviewOfServerChanges()
 			}
 
-			transport.onclose = () => {
+			transport.onclose = async () => {
 				const connection = this.connections.find((conn) => conn.server.name === name)
 				if (connection) {
 					connection.server.status = "disconnected"
 				}
+				await this.notifyWebviewOfServerChanges()
 			}
 
 			// If the config is invalid, show an error
@@ -180,7 +182,7 @@ export class McpHub {
 				return
 			}
 
-			await client.connect(transport)
+			// valid schema
 			const connection: McpConnection = {
 				server: {
 					name,
@@ -191,6 +193,8 @@ export class McpHub {
 				transport,
 			}
 			this.connections.push(connection)
+
+			await client.connect(transport)
 			connection.server.status = "connected"
 
 			// // Set up notification handlers
@@ -335,9 +339,13 @@ export class McpHub {
 			connection.server.status = "connecting"
 			await this.notifyWebviewOfServerChanges()
 			await delay(500) // artificial delay to show user that server is restarting
+			try {
 				await this.deleteConnection(serverName)
 				// Try to connect again using existing config
 				await this.connectToServer(serverName, JSON.parse(config))
+			} catch (error) {
+				console.error(`Failed to restart connection for ${serverName}:`, error)
+			}
 		}
 
 		await this.notifyWebviewOfServerChanges()

webview-ui/src/components/chat/ChatRow.tsx

@@ -141,7 +141,8 @@ export const ChatRowContent = ({
 							style={{ color: normalColor, marginBottom: "-1.5px" }}></span>
 					),
 					<span style={{ color: normalColor, fontWeight: "bold" }}>
-						Cline wants to use the <code>{mcpServerUse.serverName}</code> MCP server:
+						Cline wants to {mcpServerUse.type === "use_mcp_tool" ? "use a tool" : "access a resource"} on
+						the <code>{mcpServerUse.serverName}</code> MCP server:
 					</span>,
 				]
 			case "completion_result":

webview-ui/src/components/mcp/McpView.tsx

@@ -190,16 +190,19 @@ const ServerRow = ({ server }: { server: McpServer }) => {
 			{server.error ? (
 				<div
 					style={{
-						padding: "8px",
 						fontSize: "13px",
 						background: "var(--vscode-textCodeBlock-background)",
 						borderRadius: "0 0 4px 4px",
+						width: "100%",
 					}}>
-					<div style={{ color: "var(--vscode-testing-iconFailed)", marginBottom: "8px" }}>{server.error}</div>
+					<div style={{ color: "var(--vscode-testing-iconFailed)", marginBottom: "8px", padding: "0 10px" }}>
+						{server.error}
+					</div>
 					<VSCodeButton
 						appearance="secondary"
 						onClick={handleRestart}
-						disabled={server.status === "connecting"}>
+						disabled={server.status === "connecting"}
+						style={{ width: "calc(100% - 20px)", margin: "0 10px 10px 10px" }}>
 						{server.status === "connecting" ? "Retrying..." : "Retry Connection"}
 					</VSCodeButton>
 				</div>
@@ -208,7 +211,7 @@ const ServerRow = ({ server }: { server: McpServer }) => {
 					<div
 						style={{
 							background: "var(--vscode-textCodeBlock-background)",
-							padding: "0 12px 12px 12px",
+							padding: "0 10px 10px 10px",
 							fontSize: "13px",
 							borderRadius: "0 0 4px 4px",
 						}}>