Add browser viewport and network tools

Author: HumbleBee14

.gitignore

@@ -41,3 +41,4 @@ test-output.json
 
 # Roopik IDE metadata
 .roopik/
+/TESTING-LAB

src/vs/workbench/contrib/roopik/browser/commands/roopikToolsCommands.ts

@@ -89,7 +89,7 @@ export function registerRoopikToolsCommands(): void {
 	// ============================================================================
 
 	// --------------------------------------------------------------------------
-	// Browser Tools (12)
+	// Browser Tools (14)
 	// --------------------------------------------------------------------------
 
 	registerAction2(class extends Action2 {
@@ -359,8 +359,8 @@ export function registerRoopikToolsCommands(): void {
 	registerAction2(class extends Action2 {
 		constructor() {
 			super({
-				id: 'roopik.tools.browserGetCdpInfo',
-				title: { value: 'Get Browser CDP Info', original: 'Get Browser CDP Info' },
+				id: 'roopik.tools.browserGetState',
+				title: { value: 'Get Browser State', original: 'Get Browser State' },
 				category: { value: 'Roopik', original: 'Roopik' },
 				f1: false
 			});
@@ -369,7 +369,51 @@ export function registerRoopikToolsCommands(): void {
 		async run(accessor: ServicesAccessor): Promise<RoopikToolResult> {
 			const mainProcessService = accessor.get(IMainProcessService);
 			const channel = getToolsChannel(mainProcessService);
-			return channel.call('browser_get_cdp_info');
+			return channel.call('browser_get_state');
+		}
+	});
+
+	registerAction2(class extends Action2 {
+		constructor() {
+			super({
+				id: 'roopik.tools.browserSetViewport',
+				title: { value: 'Set Browser Viewport', original: 'Set Browser Viewport' },
+				category: { value: 'Roopik', original: 'Roopik' },
+				f1: false
+			});
+		}
+
+		async run(accessor: ServicesAccessor, args?: {
+			width?: number;
+			height?: number;
+			deviceScaleFactor?: number;
+			mobile?: boolean;
+		}): Promise<RoopikToolResult> {
+			const mainProcessService = accessor.get(IMainProcessService);
+			const channel = getToolsChannel(mainProcessService);
+			return channel.call('browser_set_viewport', args || {});
+		}
+	});
+
+	registerAction2(class extends Action2 {
+		constructor() {
+			super({
+				id: 'roopik.tools.browserGetNetworkRequests',
+				title: { value: 'Get Network Requests', original: 'Get Network Requests' },
+				category: { value: 'Roopik', original: 'Roopik' },
+				f1: false
+			});
+		}
+
+		async run(accessor: ServicesAccessor, args?: {
+			urlFilter?: string;
+			method?: string;
+			statusFilter?: string;
+			limit?: number;
+		}): Promise<RoopikToolResult> {
+			const mainProcessService = accessor.get(IMainProcessService);
+			const channel = getToolsChannel(mainProcessService);
+			return channel.call('browser_get_network_requests', args || {});
 		}
 	});
 

src/vs/workbench/contrib/roopik/electron-main/mcp/executor/browserExecutor.ts

@@ -109,6 +109,8 @@ export class BrowserExecutor {
 			// Browser is already open - navigate if URL provided
 			if (url) {
 				await this.browserViewService.navigate(browserViewId, url);
+				// Enable CDP monitoring proactively to capture errors from page load
+				await this.ensureCDPMonitoring(browserViewId);
 				return {
 					success: true,
 					data: {
@@ -119,6 +121,9 @@ export class BrowserExecutor {
 				};
 			}
 
+			// Enable CDP monitoring even if not navigating (browser already open)
+			await this.ensureCDPMonitoring(browserViewId);
+
 			return {
 				success: true,
 				data: {
@@ -186,6 +191,9 @@ export class BrowserExecutor {
 
 			await this.browserViewService.navigate(browserViewId, url);
 
+			// Enable CDP monitoring proactively to capture errors from page load
+			await this.ensureCDPMonitoring(browserViewId);
+
 			return {
 				success: true,
 				data: {
@@ -218,6 +226,9 @@ export class BrowserExecutor {
 
 			await this.browserViewService.reload(browserViewId, hardReload);
 
+			// Enable CDP monitoring proactively to capture errors from reload
+			await this.ensureCDPMonitoring(browserViewId);
+
 			return {
 				success: true,
 				data: {

src/vs/workbench/contrib/roopik/electron-main/mcp/prompts/mcpPrompts.ts

@@ -55,7 +55,7 @@ Call **project_start** with the project path:
 
 ### 3. Verify the Server is Running
 The browser should automatically open. You can verify with:
-- Call **browser_get_cdp_info** to check browser state
+- Call **browser_get_state** to check browser state
 - Call **browser_screenshot** to see the rendered page
 
 ### 4. Navigate to Specific Pages (Optional)
@@ -132,7 +132,7 @@ canvas_get_active → canvas_create (if needed) → component_add → component_
 		description: 'Step-by-step guide for inspecting CSS and finding source files to edit',
 		content: `# How to Inspect & Fix CSS in Roopik
 
-This workflow teaches you THE MOAT capability - CSS inspection with source resolution.
+This workflow teaches you how to inspect CSS and resolve styles to their source files.
 
 ## Step-by-Step Process:
 
@@ -183,10 +183,10 @@ Call **browser_reload** with ignoreCache: true:
 - Take another screenshot to verify the fix
 - Re-inspect if needed to confirm CSS changes
 
-## Why This Is THE MOAT:
-- Traditional: "This element has color: red" (but where from?)
-- Roopik: "color: red is in button.scss at line 45:3"
-- Includes source maps: SCSS/LESS resolve to original files
+## Key Benefit - Source File Resolution:
+- Traditional tools: "This element has color: red" (but where is it defined?)
+- With source maps: "color: red is defined in button.scss at line 45:3"
+- SCSS/LESS files resolve to original source locations
 - Shows full cascade: what's overridden and why
 
 ## Example Tool Chain:
@@ -334,8 +334,9 @@ This workflow teaches you the complete cycle for frontend development.
 - browser_execute_script, browser_inspect_element
 - browser_get_errors, browser_get_console_logs
 
-**Browser Info** (2):
-- browser_get_performance, browser_get_cdp_info
+**Browser Info** (4):
+- browser_get_performance, browser_get_state
+- browser_set_viewport, browser_get_network_requests
 
 **Canvas Tools** (3):
 - canvas_list, canvas_get_active, canvas_create
@@ -344,13 +345,13 @@ This workflow teaches you the complete cycle for frontend development.
 - component_add, component_add_batch, component_remove
 - component_get_info, component_list, component_rebuild
 
-## Total: 24 Tools
+## Total: 26 Tools
 
 ## Key Tips:
 - Always check project_get_active before starting
 - Take screenshots frequently for visual verification
 - Use browser_get_errors after any page load
-- browser_inspect_element is THE MOAT for CSS work
+- browser_inspect_element provides CSS source file resolution
 - Use ignoreCache: true when reloading after code changes`
 	}
 ];

src/vs/workbench/contrib/roopik/electron-main/mcp/toolSchemas.ts

@@ -198,7 +198,7 @@ export const TOOL_DEFINITIONS: ToolDefinition[] = [
 	},
 	{
 		name: 'browser_inspect_element',
-		description: 'Inspect CSS styles of an element with source file resolution. THE MOAT capability - returns exact file:line:column where styles are defined.',
+		description: 'Inspect CSS styles of an element with source file resolution. Returns exact file:line:column where styles are defined (requires source maps).',
 		schema: browserInspectElementSchema
 	},
 	{

src/vs/workbench/contrib/roopik/electron-main/mcp/tools/browserTools.ts

@@ -383,6 +383,8 @@ export function registerBrowserTools(
 				// URL normalization is done in browserViewService.navigate()
 				if (url) {
 					await browserViewService.navigate(browserViewId, url);
+					// Enable CDP monitoring proactively to capture errors from page load
+					await ensureCDPMonitoring(browserViewId, browserViewService);
 					return {
 						content: [{
 							type: 'text' as const,
@@ -396,6 +398,9 @@ export function registerBrowserTools(
 					};
 				}
 
+				// Enable CDP monitoring even if not navigating (browser already open)
+				await ensureCDPMonitoring(browserViewId, browserViewService);
+
 				return {
 					content: [{
 						type: 'text' as const,
@@ -802,6 +807,9 @@ Actions:
 				// URL normalization is done in browserViewService.navigate()
 				await browserViewService.navigate(browserViewId, url);
 
+				// Enable CDP monitoring proactively to capture errors from page load
+				await ensureCDPMonitoring(browserViewId, browserViewService);
+
 				return {
 					content: [{
 						type: 'text' as const,
@@ -858,6 +866,9 @@ Actions:
 
 				await browserViewService.reload(browserViewId, ignoreCache);
 
+				// Enable CDP monitoring proactively to capture errors from reload
+				await ensureCDPMonitoring(browserViewId, browserViewService);
+
 				return {
 					content: [{
 						type: 'text' as const,

src/vs/workbench/contrib/roopik/electron-main/mcp/tools/contextPrompts.ts

@@ -156,7 +156,7 @@ getActiveCanvas → createComponent → (wait) → getComponentStatus → takeSc
 						type: 'text' as const,
 						text: `# How to Inspect & Fix CSS in Roopik
 
-This workflow teaches you THE MOAT capability - CSS inspection with source resolution that competitors can't match.
+This workflow teaches you how to inspect CSS and resolve styles to their source files.
 
 ## Step-by-Step Process:
 
@@ -179,7 +179,7 @@ Call **roopik_inspectElement** with:
 - includeUserAgent: false (usually don't need browser defaults)
 
 ### 4. Analyze the CSS Data
-The response gives you THE MOAT - file:line:column precision:
+The response provides precise source file information:
 - **matchedRules**: Array of CSS rules that apply to this element
   - Each rule has: selector, file (absolute path), location { line, column }
   - Properties with isOverridden: true are being overridden by more specific rules
@@ -208,10 +208,10 @@ Call **roopik_reload** to see the changes:
 - ignoreCache: true (for hard reload)
 - Then call takeScreenshot or inspectElement again to verify the fix
 
-## Why This Is THE MOAT:
-- Traditional tools: "This element has color: red" (but where does it come from?)
-- Roopik: "color: red is defined in button.scss at line 45:3, overriding button.css line 12:5"
-- Includes source maps: SCSS/LESS/PostCSS files, not just compiled CSS
+## Key Benefit - Source File Resolution:
+- Traditional tools: "This element has color: red" (but where is it defined?)
+- With source maps: "color: red is defined in button.scss at line 45:3, overriding button.css line 12:5"
+- Resolves SCSS/LESS/PostCSS to original source files
 - Detects CSS-in-JS with component file locations
 - Shows the full cascade: what's overridden and why
 

tools/roopik/mcp-stdio-server/README.md

@@ -79,21 +79,23 @@ roopik-mcp [--ws-port <port>] [--ws-url <url>]
 3. `ROOPIK_MCP_WS_URL` environment variable
 4. Auto-discovery (tries ports 9876-9880)
 
-## Available Tools (24)
+## Available Tools (26)
 
-### Browser Tools (12)
+### Browser Tools (14)
 - `browser_open` - Open the browser view
 - `browser_close` - Close the browser view
 - `browser_screenshot` - Take a screenshot
 - `browser_navigate` - Navigate to URL
 - `browser_reload` - Reload the page
 - `browser_action_input` - Click, type, scroll, etc.
 - `browser_execute_script` - Run JavaScript
-- `browser_inspect_element` - **THE MOAT** - CSS inspection with source resolution
+- `browser_inspect_element` - CSS inspection with source file resolution
 - `browser_get_errors` - Get console + network errors
 - `browser_get_console_logs` - Get console logs
 - `browser_get_performance` - Get Web Vitals metrics
-- `browser_get_cdp_info` - Get browser state
+- `browser_get_state` - Get browser state (open/closed, URL, title)
+- `browser_set_viewport` - Set/clear viewport for responsive testing
+- `browser_get_network_requests` - Get captured network traffic
 
 ### Canvas Tools (3)
 - `canvas_list` - List all canvases
@@ -117,6 +119,6 @@ roopik-mcp [--ws-port <port>] [--ws-url <url>]
 
 - `how-to-start-project` - Guide for starting a dev server
 - `how-to-create-component` - Guide for adding components to canvas
-- `how-to-inspect-css` - Guide for CSS inspection (THE MOAT)
+- `how-to-inspect-css` - Guide for CSS inspection with source resolution
 - `how-to-debug-errors` - Guide for debugging browser errors
 - `full-dev-workflow` - Complete development workflow

tools/roopik/mcp-stdio-server/src/tools.ts

@@ -202,7 +202,7 @@ export const TOOL_DEFINITIONS: ToolDefinition[] = [
 	},
 	{
 		name: 'browser_inspect_element',
-		description: 'Inspect CSS styles of an element with source file resolution. THE MOAT capability - returns exact file:line:column where styles are defined.',
+		description: 'Inspect CSS styles of an element with source file resolution. Returns exact file:line:column where styles are defined (requires source maps).',
 		schema: browserInspectElementSchema
 	},
 	{
@@ -377,7 +377,7 @@ canvas_get_active → canvas_create (if needed) → component_add → component_
 		description: 'Step-by-step guide for inspecting CSS and finding source files to edit',
 		content: `# How to Inspect & Fix CSS in Roopik
 
-This workflow teaches you THE MOAT capability - CSS inspection with source resolution.
+This workflow teaches you how to inspect CSS and resolve styles to their source files.
 
 ## Step-by-Step Process:
 
@@ -403,9 +403,9 @@ Look at matchedRules to find where to make changes:
 - Use the **file** path to know which file to edit
 - Use **location.line** for exact position
 
-## Why This Is THE MOAT:
-- Traditional: "This element has color: red" (but where from?)
-- Roopik: "color: red is in button.scss at line 45:3"
+## Key Benefit - Source File Resolution:
+- Traditional tools: "This element has color: red" (but where is it defined?)
+- With source maps: "color: red is defined in button.scss at line 45:3"
 
 ## Example Tool Chain:
 browser_screenshot → browser_inspect_element → (edit file) → browser_reload → browser_screenshot`