Mcp tool call revamp

.gitignore

@@ -35,10 +35,8 @@ test-output.json
 .github/CODENOTIFY
 .github/commands/
 .github/commands.json
-/extensions/roopik-roo
-/docs
-/docs
 
 # Roopik IDE metadata
+/docs
 .roopik/
-/TESTING-LAB
+/resources/mcp-binaries

eslint.config.js

@@ -2152,9 +2152,12 @@ export default tseslint.config(
 			],
 		}
 	},
-	// ROOPIK: Override header rule for roopik extension
+	// ROOPIK: Override header rule for roopik files (extension + core)
 	{
-		files: ['extensions/roopik/**/*.{ts,tsx,js,jsx}'],
+		files: [
+			'extensions/roopik/**/*.{ts,tsx,js,jsx}',
+			'src/vs/workbench/contrib/roopik/**/*.{ts,tsx,js,jsx}'
+		],
 		plugins: { header: pluginHeader },
 		rules: {
 			'header/header': [2, 'block', [

extensions/roopik-roo/packages/types/src/mode.ts

@@ -140,7 +140,7 @@ export const DEFAULT_MODES: readonly ModeConfig[] = [
 		roleDefinition:
 			"You are Dio, a highly skilled software engineer with extensive knowledge in many programming languages, frameworks, design patterns, and best practices.",
 		whenToUse:
-			"Use this mode when you need to write, modify, or refactor code. This includes backend, data processing, algorithms, AND frontend/UI work. Roopik tools (canvas, components, browser preview) are available in this mode - you can create and preview UI components without switching modes.",
+			"Use this mode when you need to write, modify, or refactor code. This includes backend, data processing, algorithms, AND frontend/UI work. Roopik tools (canvas, components, browser preview) are available in this mode - but use browser and project tools only in code mode, else for any canvas related task ask the user if theyw ant to swithc to Design mode.",
 		description: "Write, modify, and refactor code",
 		groups: ["read", "edit", "browser", "command", "mcp", "roopik"],
 	},
@@ -152,7 +152,7 @@ export const DEFAULT_MODES: readonly ModeConfig[] = [
 		whenToUse:
 			"Use this mode when you need explanations, documentation, or answers to technical questions. Best for understanding concepts, analyzing existing code, getting recommendations, or learning about technologies without making changes.",
 		description: "Get answers and explanations",
-		groups: ["read", "browser", "mcp", "roopik"],
+		groups: ["read", "browser", "mcp"],
 		customInstructions:
 			"You can analyze code, explain concepts, and access external resources. Always answer the user's questions thoroughly, and do not switch to implementing code unless explicitly requested by the user. Include Mermaid diagrams when they clarify your response.",
 	},
@@ -171,15 +171,46 @@ export const DEFAULT_MODES: readonly ModeConfig[] = [
 				- Project mode is used to build, run and preview full projects using the embedded chromium browser. It can also be used to preview existing vite based projects.
 				NOTE: If the project is not vite based, you can run them without project_start using terminal and other native tools and directly show them in the browser using navigate, else if its vite based supported, then you can let the Roopik IDE project mode start it internally by project tools.
 
-**DESIGN CREATIVITY (Be Professional, Not Generic):**
-- **Ask once** at the start of a design task: What's the vibe/aesthetic? Suggest 2-3 directions based on context. Don't repeat this question - remember their preference.
-- **Be creative** - Avoid the same safe patterns. Each component should feel intentional and polished:
-  - Fresh color palettes, not default blues
-  - Modern animations with framer-motion (hover states, transitions, micro-interactions)
-  - Interesting layouts (asymmetry, layering, creative spacing)
-  - Contemporary trends when appropriate (glassmorphism, gradients, mesh backgrounds)
-- **Use modern libraries freely**: framer-motion, lucide-react, @headlessui/react, @radix-ui/* - all auto-resolved
-- **Think like a designer**: Consider visual hierarchy, whitespace, typography pairing, subtle shadows, and polish
+**DESIGN AESTHETICS (Production-Grade, Not Generic AI Slop):**
+
+Before coding, commit to a BOLD aesthetic direction. Pick a tone: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian. Execute with precision.
+
+- **Ask once** at the start: What's the vibe/aesthetic? Suggest 2-3 directions based on context. Remember their preference.
+
+**Typography (CRITICAL - Avoid Generic):**
+- NEVER use: Inter, Roboto, Arial, system fonts, or overused choices like Space Grotesk
+- DO use: Distinctive, characterful fonts that elevate the design
+- Pair a display font (headings) with a refined body font
+- Google Fonts examples: Playfair Display, Cormorant, Bricolage Grotesque, Outfit, Syne, Cabinet Grotesk, Satoshi, General Sans
+
+**Color & Theme:**
+- Commit to a cohesive palette - use CSS variables for consistency
+- Dominant colors with sharp accents outperform timid, evenly-distributed palettes
+- AVOID: Cliched purple gradients on white, generic blue CTAs
+- Consider: Earthy tones, monochromatic schemes, unexpected color pairings, dark themes with vibrant accents
+
+**Motion & Animation:**
+- Use framer-motion for React components (auto-resolved via CDN)
+- Focus on high-impact moments: staggered page load reveals (animation-delay), orchestrated entrances
+- Scroll-triggered animations and hover states that surprise
+- Micro-interactions on buttons, cards, inputs - subtle but delightful
+
+**Spatial Composition:**
+- Unexpected layouts: asymmetry, overlap, diagonal flow, grid-breaking elements
+- Generous negative space OR controlled density - commit to one
+- Break the grid intentionally for visual interest
+
+**Backgrounds & Visual Details:**
+- Create atmosphere - never default to plain solid colors
+- Use: gradient meshes, noise/grain textures, geometric patterns, layered transparencies
+- Dramatic shadows, decorative borders, custom cursors when appropriate
+- Glassmorphism, mesh backgrounds, aurora effects - use trends tastefully
+
+**Libraries (All Auto-Resolved):**
+- framer-motion (animations), lucide-react (icons), @headlessui/react, @radix-ui/*
+- tailwindcss (utility-first CSS), clsx (conditional classes)
+
+REMEMBER: Bold maximalism and refined minimalism both work - the key is intentionality, not intensity. Each design should feel genuinely crafted for its context, never cookie-cutter.
 
 **CANVAS → PROJECT (When user has refined components):**
 - After building several related components in Canvas, briefly suggest: "Would you like to see these assembled in a running project?"
@@ -281,8 +312,8 @@ export default function LoginScreen() {
 - When in doubt → Default to component and ask: "I'll create this as a canvas component. Let me know if you need a full project with routing instead."
 
 **GRACEFUL MODE HANDLING:**
-- You can use Roopik tools (canvas, component, project, browser) in ANY mode if available, but ask the user first if they want to switch mode or stay in current mode for the same.
-- If user is in Code mode and asks to preview a component → Use component_add directly, no need to switch modes. But always ask once if they want to switch to Designer mode for extended design work or continue in same or relavent mode.
+- You can use Roopik tools (canvas, component, project, browser) in ANY mode if available, but always ask the user first if they want to switch mode to this designer mode or stay in current mode for the same.
+- If user is in Code mode and asks to preview a component → Use component_add directly, you have flexibility but if user insist on design relate things switch to this Design mode. But always ask once if they want to switch to Designer mode for extended design work or continue in same or relavent mode.
 - If user asks for UI work in Ask mode → You can still use roopik tools to demonstrate (preview related only), no mode switch required unless code changes are needed
 - Only suggest mode switch if user would benefit from the full Designer workflow (extended design session)
 
@@ -300,6 +331,7 @@ export default function LoginScreen() {
   - **NEVER** use browser_open, browser_screenshot, or any browser_* tools for canvas components
   - There is NO URL like /canvas/{id} to navigate to - the Canvas is a built-in IDE feature, not a web page
   - When user asks "show me the preview" of canvas components → Inform them: "The components are now visible in the Canvas view in your IDE"
+  - After component_add_batch or adding multiple components, ALWAYS use canvas_validate_components to verify all components are ready and built successfully or not to catch errors early or health status. For single component_add, you should rather use component_get_info to verify build status.
 
 - **Projects - Browser Preview**:
   - Use browser_open, browser_screenshot, browser_inspect_element ONLY after project_start (when dev server is running)
@@ -322,7 +354,7 @@ export default function LoginScreen() {
 		whenToUse:
 			"Use this mode when you need to plan, design, or strategize before implementation. Perfect for breaking down complex problems, creating technical specifications, designing system architecture, or brainstorming solutions before coding.",
 		description: "Plan and design before implementation",
-		groups: ["read", ["edit", { fileRegex: "\\.md$", description: "Markdown files only" }], "browser", "mcp", "roopik"],
+		groups: ["read", ["edit", { fileRegex: "\\.md$", description: "Markdown files only" }], "browser", "mcp"],
 		customInstructions:
 			"1. Do some information gathering (using provided tools) to get more context about the task.\n\n2. You should also ask the user clarifying questions to get a better understanding of the task.\n\n3. Once you've gained more context about the user's request, break down the task into clear, actionable steps and create a todo list using the `update_todo_list` tool. Each todo item should be:\n   - Specific and actionable\n   - Listed in logical execution order\n   - Focused on a single, well-defined outcome\n   - Clear enough that another mode could execute it independently\n\n   **Note:** If the `update_todo_list` tool is not available, write the plan to a markdown file (e.g., `plan.md` or `todo.md`) instead.\n\n4. As you gather more information or discover new requirements, update the todo list to reflect the current understanding of what needs to be accomplished.\n\n5. Ask the user if they are pleased with this plan, or if they would like to make any changes. Think of this as a brainstorming session where you can discuss the task and refine the todo list.\n\n6. Include Mermaid diagrams if they help clarify complex workflows or system architecture. Please avoid using double quotes (\"\") and parentheses () inside square brackets ([]) in Mermaid diagrams, as this can cause parsing errors.\n\n7. Use the switch_mode tool to request that the user switch to another mode to implement the solution.\n\n**IMPORTANT: Focus on creating clear, actionable todo lists rather than lengthy markdown documents. Use the todo list as your primary planning tool to track and organize the work that needs to be done.**\n\n**CRITICAL: Never provide level of effort time estimates (e.g., hours, days, weeks) for tasks. Focus solely on breaking down the work into clear, actionable steps without estimating how long they will take.**\n\nUnless told otherwise, if you want to save a plan file, put it in the /plans directory",
 	},

extensions/roopik-roo/packages/types/src/tool.ts

@@ -39,7 +39,7 @@ export const toolNames = [
 	"run_slash_command",
 	"generate_image",
 	"custom_tool",
-	// Roopik IDE Tools - Browser (12)
+	// Roopik IDE Tools - Browser (14)
 	"browser_open",
 	"browser_close",
 	"browser_action_input",
@@ -51,16 +51,19 @@ export const toolNames = [
 	"browser_get_errors",
 	"browser_get_console_logs",
 	"browser_get_performance",
-	"browser_get_cdp_info",
+	"browser_get_state",
+	"browser_set_viewport",
+	"browser_get_network_requests",
 	// Roopik IDE Tools - Project (3)
 	"project_get_active",
 	"project_start",
 	"project_stop",
-	// Roopik IDE Tools - Canvas (3)
+	// Roopik IDE Tools - Canvas (4)
 	"canvas_list",
 	"canvas_get_active",
 	"canvas_create",
-	// Roopik IDE Tools - Component (6)
+	"canvas_validate_components",
+	// Roopik IDE Tools - Component (7)
 	"component_add",
 	"component_add_batch",
 	"component_remove",

extensions/roopik-roo/src/core/assistant-message/NativeToolCallParser.ts

@@ -630,6 +630,29 @@ export class NativeToolCallParser {
 			case "browser_get_cdp_info":
 				nativeArgs = {}
 				break
+			// @ts-expect-error - Roopik-specific tool not in base ToolName type
+			case "browser_get_state":
+				nativeArgs = {}
+				break
+			// @ts-expect-error - Roopik-specific tool not in base ToolName type
+			case "browser_set_viewport":
+				nativeArgs = {
+					width: partialArgs.width,
+					height: partialArgs.height,
+					deviceScaleFactor: partialArgs.deviceScaleFactor,
+					mobile: partialArgs.mobile,
+				}
+				break
+			// @ts-expect-error - Roopik-specific tool not in base ToolName type
+			case "browser_get_network_requests":
+				nativeArgs = {
+					includeStaticAssets: partialArgs.includeStaticAssets,
+					urlFilter: partialArgs.urlFilter,
+					method: partialArgs.method,
+					statusFilter: partialArgs.statusFilter,
+					limit: partialArgs.limit,
+				}
+				break
 
 			// Project Tools (3)
 			case "project_get_active":
@@ -659,8 +682,12 @@ export class NativeToolCallParser {
 			case "canvas_create":
 				nativeArgs = { name: partialArgs.name }
 				break
+			// @ts-expect-error - Roopik-specific tool not in base ToolName type
+			case "canvas_validate_components":
+				nativeArgs = { canvasId: partialArgs.canvasId }
+				break
 
-			// Component Tools (6)
+			// Component Tools (8)
 			case "component_add":
 				nativeArgs = {
 					folderPath: partialArgs.folderPath,
@@ -1057,6 +1084,29 @@ export class NativeToolCallParser {
 				case "browser_get_cdp_info":
 					nativeArgs = {} as NativeArgsFor<TName>
 					break
+				// @ts-expect-error - Roopik-specific tool not in base ToolName type
+				case "browser_get_state":
+					nativeArgs = {} as NativeArgsFor<TName>
+					break
+				// @ts-expect-error - Roopik-specific tool not in base ToolName type
+				case "browser_set_viewport":
+					nativeArgs = {
+						width: args.width,
+						height: args.height,
+						deviceScaleFactor: args.deviceScaleFactor,
+						mobile: args.mobile,
+					} as unknown as NativeArgsFor<TName>
+					break
+				// @ts-expect-error - Roopik-specific tool not in base ToolName type
+				case "browser_get_network_requests":
+					nativeArgs = {
+						includeStaticAssets: args.includeStaticAssets,
+						urlFilter: args.urlFilter,
+						method: args.method,
+						statusFilter: args.statusFilter,
+						limit: args.limit,
+					} as unknown as NativeArgsFor<TName>
+					break
 
 				// Project Tools (3)
 				case "project_get_active":
@@ -1090,8 +1140,12 @@ export class NativeToolCallParser {
 						nativeArgs = { name: args.name } as NativeArgsFor<TName>
 					}
 					break
+				// @ts-expect-error - Roopik-specific tool not in base ToolName type
+				case "canvas_validate_components":
+					nativeArgs = { canvasId: args.canvasId } as unknown as NativeArgsFor<TName>
+					break
 
-				// Component Tools (6)
+				// Component Tools (8)
 				case "component_add":
 					if (args.folderPath !== undefined) {
 						nativeArgs = {

extensions/roopik-roo/src/core/assistant-message/presentAssistantMessage.ts

@@ -445,6 +445,12 @@ export async function presentAssistantMessage(cline: Task) {
 						return `[browser_get_performance]`
 					case "browser_get_cdp_info":
 						return `[browser_get_cdp_info]`
+					case "browser_get_state":
+						return `[browser_get_state]`
+					case "browser_set_viewport":
+						return `[browser_set_viewport${block.params.width && block.params.height ? ` ${block.params.width}x${block.params.height}` : ""}]`
+					case "browser_get_network_requests":
+						return `[browser_get_network_requests]`
 					// Roopik IDE Tools - Project (3)
 					case "project_get_active":
 						return `[project_get_active]`
@@ -459,7 +465,9 @@ export async function presentAssistantMessage(cline: Task) {
 						return `[canvas_get_active]`
 					case "canvas_create":
 						return `[canvas_create '${block.params.name}']`
-					// Roopik IDE Tools - Component (6)
+					case "canvas_validate_components":
+						return `[canvas_validate_components${block.params.canvasId ? ` '${block.params.canvasId}'` : ""}]`
+					// Roopik IDE Tools - Component (8)
 					case "component_add":
 						return `[component_add '${block.params.folderPath || block.params.path}']`
 					case "component_add_batch":
@@ -976,8 +984,8 @@ export async function presentAssistantMessage(cline: Task) {
 						pushToolResult,
 					})
 					break
-				// Roopik IDE Tools (24 tools)
-				// Browser (12)-// Project (3)-// Canvas (3)-// Component (6)
+				// Roopik IDE Tools (28 tools)
+				// Browser (14)-// Project (3)-// Canvas (4)-// Component (8)
 				case "browser_open":
 				case "browser_close":
 				case "browser_action_input":
@@ -990,12 +998,16 @@ export async function presentAssistantMessage(cline: Task) {
 				case "browser_get_console_logs":
 				case "browser_get_performance":
 				case "browser_get_cdp_info":
+				case "browser_get_state":
+				case "browser_set_viewport":
+				case "browser_get_network_requests":
 				case "project_get_active":
 				case "project_start":
 				case "project_stop":
 				case "canvas_list":
 				case "canvas_get_active":
 				case "canvas_create":
+				case "canvas_validate_components":
 				case "component_add":
 				case "component_add_batch":
 				case "component_remove":

extensions/roopik-roo/src/core/prompts/sections/capabilities.ts

@@ -14,6 +14,8 @@ CAPABILITIES
 `
       : ""
     }
-- **Roopik IDE**: You are "Dio", a full-featured AI coding assistant in this IDE. You excel at all software engineering tasks. For UI/UX and frontend work, you have access to specialized \`roopik\` tools (when available) that provide visual context, live browser and project preview, and element inspection with computed styles and source maps. Use these tools to iterate faster on design tasks and give users a better experience by showing them live previews of their work. For all other tasks, use standard tools effectively.
+- **Roopik IDE**: You are "Dio", a full-featured AI coding assistant in this IDE. You excel at all software engineering tasks. For UI/UX and frontend work, you have access to specialized \`roopik\` tools (when available) that provide visual context, live browser and project preview, and element inspection with computed styles and source maps. Use these tools to iterate faster on design tasks and give users a better experience by showing them live previews of their work.
+  - **Canvas Component Health Verification**: After using \`component_add_batch\` or adding multiple components sequentially, ALWAYS call \`canvas_validate_components\` to verify all components are 'ready' and catch build/runtime errors early. This is significantly more efficient than polling individual \`component_get_info\` calls. If errors are found, fix the code and use \`component_rebuild\` if necessary to ensure users see a working UI.
+  - **Tool Selection Logic**: For single \`component_add\`, use \`component_get_info\` (targeted). For batch operations or after major edits, use \`canvas_validate_components\` (comprehensive health check across all components).
 `
 }