Prettier backfill

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

@@ -7,7 +7,7 @@ const McpEnabledToggle = () => {
 	const { mcpEnabled, setMcpEnabled } = useExtensionState()
 
 	const handleChange = (e: Event | FormEvent<HTMLElement>) => {
-		const target = ('target' in e ? e.target : null) as HTMLInputElement | null
+		const target = ("target" in e ? e.target : null) as HTMLInputElement | null
 		if (!target) return
 		setMcpEnabled(target.checked)
 		vscode.postMessage({ type: "mcpEnabled", bool: target.checked })
@@ -15,20 +15,20 @@ const McpEnabledToggle = () => {
 
 	return (
 		<div style={{ marginBottom: "20px" }}>
-			<VSCodeCheckbox
-				checked={mcpEnabled}
-				onChange={handleChange}>
+			<VSCodeCheckbox checked={mcpEnabled} onChange={handleChange}>
 				<span style={{ fontWeight: "500" }}>Enable MCP Servers</span>
 			</VSCodeCheckbox>
-			<p style={{
-				fontSize: "12px",
-				marginTop: "5px",
-				color: "var(--vscode-descriptionForeground)",
-			}}>
-				When enabled, Cline will be able to interact with MCP servers for advanced functionality. If you're not using MCP, you can disable this to reduce Cline's token usage.
+			<p
+				style={{
+					fontSize: "12px",
+					marginTop: "5px",
+					color: "var(--vscode-descriptionForeground)",
+				}}>
+				When enabled, Cline will be able to interact with MCP servers for advanced functionality. If you're not
+				using MCP, you can disable this to reduce Cline's token usage.
 			</p>
 		</div>
 	)
 }
 
-export default McpEnabledToggle
+export default McpEnabledToggle

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

@@ -10,14 +10,14 @@ type McpToolRowProps = {
 
 const McpToolRow = ({ tool, serverName, alwaysAllowMcp }: McpToolRowProps) => {
 	const handleAlwaysAllowChange = () => {
-		if (!serverName) return;
-		
+		if (!serverName) return
+
 		vscode.postMessage({
 			type: "toggleToolAlwaysAllow",
 			serverName,
 			toolName: tool.name,
-			alwaysAllow: !tool.alwaysAllow
-		});
+			alwaysAllow: !tool.alwaysAllow,
+		})
 	}
 
 	return (
@@ -35,10 +35,7 @@ const McpToolRow = ({ tool, serverName, alwaysAllowMcp }: McpToolRowProps) => {
 					<span style={{ fontWeight: 500 }}>{tool.name}</span>
 				</div>
 				{serverName && alwaysAllowMcp && (
-					<VSCodeCheckbox
-						checked={tool.alwaysAllow}
-						onChange={handleAlwaysAllowChange}
-						data-tool={tool.name}>
+					<VSCodeCheckbox checked={tool.alwaysAllow} onChange={handleAlwaysAllowChange} data-tool={tool.name}>
 						Always allow
 					</VSCodeCheckbox>
 				)}

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

@@ -159,7 +159,7 @@ const McpView = ({ onDone }: McpViewProps) => {
 }
 
 // Server Row Component
-const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer, alwaysAllowMcp?: boolean }) => {
+const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowMcp?: boolean }) => {
 	const [isExpanded, setIsExpanded] = useState(false)
 
 	const getStatusColor = () => {
@@ -216,9 +216,9 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer, alwaysAllowM
 						style={{
 							width: "20px",
 							height: "10px",
-							backgroundColor: server.disabled ?
-								"var(--vscode-titleBar-inactiveForeground)" :
-								"var(--vscode-button-background)",
+							backgroundColor: server.disabled
+								? "var(--vscode-titleBar-inactiveForeground)"
+								: "var(--vscode-button-background)",
 							borderRadius: "5px",
 							position: "relative",
 							cursor: "pointer",
@@ -229,30 +229,31 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer, alwaysAllowM
 							vscode.postMessage({
 								type: "toggleMcpServer",
 								serverName: server.name,
-								disabled: !server.disabled
-							});
+								disabled: !server.disabled,
+							})
 						}}
 						onKeyDown={(e) => {
 							if (e.key === "Enter" || e.key === " ") {
-								e.preventDefault();
+								e.preventDefault()
 								vscode.postMessage({
 									type: "toggleMcpServer",
 									serverName: server.name,
-									disabled: !server.disabled
-								});
+									disabled: !server.disabled,
+								})
 							}
-						}}
-					>
-						<div style={{
-							width: "6px",
-							height: "6px",
-							backgroundColor: "var(--vscode-titleBar-activeForeground)",
-							borderRadius: "50%",
-							position: "absolute",
-							top: "2px",
-							left: server.disabled ? "2px" : "12px",
-							transition: "left 0.2s",
-						}} />
+						}}>
+						<div
+							style={{
+								width: "6px",
+								height: "6px",
+								backgroundColor: "var(--vscode-titleBar-activeForeground)",
+								borderRadius: "50%",
+								position: "absolute",
+								top: "2px",
+								left: server.disabled ? "2px" : "12px",
+								transition: "left 0.2s",
+							}}
+						/>
 					</div>
 				</div>
 				<div

webview-ui/src/components/mcp/__tests__/McpToolRow.test.tsx

@@ -1,132 +1,128 @@
-import React from 'react'
-import { render, fireEvent, screen } from '@testing-library/react'
-import McpToolRow from '../McpToolRow'
-import { vscode } from '../../../utils/vscode'
+import React from "react"
+import { render, fireEvent, screen } from "@testing-library/react"
+import McpToolRow from "../McpToolRow"
+import { vscode } from "../../../utils/vscode"
 
-jest.mock('../../../utils/vscode', () => ({
-  vscode: {
-    postMessage: jest.fn()
-  }
+jest.mock("../../../utils/vscode", () => ({
+	vscode: {
+		postMessage: jest.fn(),
+	},
 }))
 
-jest.mock('@vscode/webview-ui-toolkit/react', () => ({
-  VSCodeCheckbox: function MockVSCodeCheckbox({
-    children,
-    checked,
-    onChange
-  }: {
-    children?: React.ReactNode;
-    checked?: boolean;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  }) {
-    return (
-      <label>
-        <input
-          type="checkbox"
-          checked={checked}
-          onChange={onChange}
-        />
-        {children}
-      </label>
-    )
-  }
+jest.mock("@vscode/webview-ui-toolkit/react", () => ({
+	VSCodeCheckbox: function MockVSCodeCheckbox({
+		children,
+		checked,
+		onChange,
+	}: {
+		children?: React.ReactNode
+		checked?: boolean
+		onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+	}) {
+		return (
+			<label>
+				<input type="checkbox" checked={checked} onChange={onChange} />
+				{children}
+			</label>
+		)
+	},
 }))
 
-describe('McpToolRow', () => {
-  const mockTool = {
-    name: 'test-tool',
-    description: 'A test tool',
-    alwaysAllow: false
-  }
+describe("McpToolRow", () => {
+	const mockTool = {
+		name: "test-tool",
+		description: "A test tool",
+		alwaysAllow: false,
+	}
 
-  beforeEach(() => {
-    jest.clearAllMocks()
-  })
+	beforeEach(() => {
+		jest.clearAllMocks()
+	})
 
-  it('renders tool name and description', () => {
-    render(<McpToolRow tool={mockTool} />)
-    
-    expect(screen.getByText('test-tool')).toBeInTheDocument()
-    expect(screen.getByText('A test tool')).toBeInTheDocument()
-  })
+	it("renders tool name and description", () => {
+		render(<McpToolRow tool={mockTool} />)
 
-  it('does not show always allow checkbox when serverName is not provided', () => {
-    render(<McpToolRow tool={mockTool} />)
-    
-    expect(screen.queryByText('Always allow')).not.toBeInTheDocument()
-  })
+		expect(screen.getByText("test-tool")).toBeInTheDocument()
+		expect(screen.getByText("A test tool")).toBeInTheDocument()
+	})
 
-  it('shows always allow checkbox when serverName and alwaysAllowMcp are provided', () => {
-    render(<McpToolRow tool={mockTool} serverName="test-server" alwaysAllowMcp={true} />)
-    
-    expect(screen.getByText('Always allow')).toBeInTheDocument()
-  })
-  
-  it('sends message to toggle always allow when checkbox is clicked', () => {
-    render(<McpToolRow tool={mockTool} serverName="test-server" alwaysAllowMcp={true} />)
-    
-    const checkbox = screen.getByRole('checkbox')
-    fireEvent.click(checkbox)
-  
-    expect(vscode.postMessage).toHaveBeenCalledWith({
-      type: 'toggleToolAlwaysAllow',
-      serverName: 'test-server',
-      toolName: 'test-tool',
-      alwaysAllow: true
-    })
-  })
-  
-  it('reflects always allow state in checkbox', () => {
-    const alwaysAllowedTool = {
-      ...mockTool,
-      alwaysAllow: true
-    }
-  
-    render(<McpToolRow tool={alwaysAllowedTool} serverName="test-server" alwaysAllowMcp={true} />)
-    
-    const checkbox = screen.getByRole('checkbox') as HTMLInputElement
-    expect(checkbox.checked).toBe(true)
-  })
-  
-  it('prevents event propagation when clicking the checkbox', () => {
-    const mockOnClick = jest.fn()
-    render(
-      <div onClick={mockOnClick}>
-        <McpToolRow tool={mockTool} serverName="test-server" alwaysAllowMcp={true} />
-      </div>
-    )
-    
-    const container = screen.getByTestId('tool-row-container')
-    fireEvent.click(container)
-    
-    expect(mockOnClick).not.toHaveBeenCalled()
-  })
+	it("does not show always allow checkbox when serverName is not provided", () => {
+		render(<McpToolRow tool={mockTool} />)
 
-  it('displays input schema parameters when provided', () => {
-    const toolWithSchema = {
-      ...mockTool,
-      inputSchema: {
-        type: 'object',
-        properties: {
-          param1: {
-            type: 'string',
-            description: 'First parameter'
-          },
-          param2: {
-            type: 'number',
-            description: 'Second parameter'
-          }
-        },
-        required: ['param1']
-      }
-    }
+		expect(screen.queryByText("Always allow")).not.toBeInTheDocument()
+	})
 
-    render(<McpToolRow tool={toolWithSchema} serverName="test-server" />)
-    
-    expect(screen.getByText('Parameters')).toBeInTheDocument()
-    expect(screen.getByText('param1')).toBeInTheDocument()
-    expect(screen.getByText('param2')).toBeInTheDocument()
-    expect(screen.getByText('First parameter')).toBeInTheDocument()
-    expect(screen.getByText('Second parameter')).toBeInTheDocument()
-  })
-})
+	it("shows always allow checkbox when serverName and alwaysAllowMcp are provided", () => {
+		render(<McpToolRow tool={mockTool} serverName="test-server" alwaysAllowMcp={true} />)
+
+		expect(screen.getByText("Always allow")).toBeInTheDocument()
+	})
+
+	it("sends message to toggle always allow when checkbox is clicked", () => {
+		render(<McpToolRow tool={mockTool} serverName="test-server" alwaysAllowMcp={true} />)
+
+		const checkbox = screen.getByRole("checkbox")
+		fireEvent.click(checkbox)
+
+		expect(vscode.postMessage).toHaveBeenCalledWith({
+			type: "toggleToolAlwaysAllow",
+			serverName: "test-server",
+			toolName: "test-tool",
+			alwaysAllow: true,
+		})
+	})
+
+	it("reflects always allow state in checkbox", () => {
+		const alwaysAllowedTool = {
+			...mockTool,
+			alwaysAllow: true,
+		}
+
+		render(<McpToolRow tool={alwaysAllowedTool} serverName="test-server" alwaysAllowMcp={true} />)
+
+		const checkbox = screen.getByRole("checkbox") as HTMLInputElement
+		expect(checkbox.checked).toBe(true)
+	})
+
+	it("prevents event propagation when clicking the checkbox", () => {
+		const mockOnClick = jest.fn()
+		render(
+			<div onClick={mockOnClick}>
+				<McpToolRow tool={mockTool} serverName="test-server" alwaysAllowMcp={true} />
+			</div>,
+		)
+
+		const container = screen.getByTestId("tool-row-container")
+		fireEvent.click(container)
+
+		expect(mockOnClick).not.toHaveBeenCalled()
+	})
+
+	it("displays input schema parameters when provided", () => {
+		const toolWithSchema = {
+			...mockTool,
+			inputSchema: {
+				type: "object",
+				properties: {
+					param1: {
+						type: "string",
+						description: "First parameter",
+					},
+					param2: {
+						type: "number",
+						description: "Second parameter",
+					},
+				},
+				required: ["param1"],
+			},
+		}
+
+		render(<McpToolRow tool={toolWithSchema} serverName="test-server" />)
+
+		expect(screen.getByText("Parameters")).toBeInTheDocument()
+		expect(screen.getByText("param1")).toBeInTheDocument()
+		expect(screen.getByText("param2")).toBeInTheDocument()
+		expect(screen.getByText("First parameter")).toBeInTheDocument()
+		expect(screen.getByText("Second parameter")).toBeInTheDocument()
+	})
+})