Himanshu main

.gitignore

@@ -15,3 +15,6 @@ roo-cline-*.vsix
 # Test environment
 .test_env
 .vscode-test/
+
+# aider
+.aider*

.vscode/launch.json

@@ -10,20 +10,30 @@
 			"type": "extensionHost",
 			"request": "launch",
 			"runtimeExecutable": "${execPath}",
-			"args": [
-				"--extensionDevelopmentPath=${workspaceFolder}",
-			],
+			"args": ["--extensionDevelopmentPath=${workspaceFolder}"],
 			"sourceMaps": true,
 			"outFiles": ["${workspaceFolder}/dist/**/*.js"],
 			"preLaunchTask": "compile",
 			"env": {
 				"NODE_ENV": "development",
 				"VSCODE_DEBUG_MODE": "true"
 			},
-			"resolveSourceMapLocations": [
-				"${workspaceFolder}/**",
-				"!**/node_modules/**"
-			]
+			"resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"]
 		},
+		{
+			"name": "Run Extension - no build",
+			"type": "extensionHost",
+			"request": "launch",
+			"runtimeExecutable": "${execPath}",
+			"args": ["--extensionDevelopmentPath=${workspaceFolder}"],
+			"sourceMaps": true,
+			"outFiles": ["${workspaceFolder}/dist/**/*.js"],
+			"preLaunchTask": "dev",
+			"env": {
+				"NODE_ENV": "development",
+				"VSCODE_DEBUG_MODE": "true"
+			},
+			"resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"]
+		}
 	]
 }

.vscode/notes for llms.txt

@@ -0,0 +1,15 @@
+in tasks.json, the labels on the tasks are just for human readability.
+labels dont uniquely identify the npm type tasks.
+
+for npm type tasks, if you have two tasks with different labels but same script, 
+the one defined last will be registered as the task or override the previous one.
+
+A simple workaround is to duplicate the script in package.json with a different name but the same command and use that. 
+This allows you to have multiple tasks referencing different script names that execute the same command.
+
+another workaround is add 
+"path": "."
+'.', or './.' or '././.' etc.
+to the task definition. though this might stop working in the future if vscode changes how it handles tasks.
+reference: https://github.com/microsoft/vscode/issues/93001
+

.vscode/tasks.json

@@ -18,9 +18,25 @@
 			},
 			"problemMatcher": ["$tsc", "$eslint-stylish"]
 		},
+		{
+			"label": "dev",
+			"type": "npm",
+			"path": ".",
+			"script": "compile",
+			"dependsOn": ["npm: watch:tsc", "npm: watch:esbuild", "npm: watch-webview"],
+			"group": {
+				"kind": "build",
+				"isDefault": false
+			},
+			"presentation": {
+				"reveal": "silent",
+				"panel": "shared"
+			},
+			"problemMatcher": ["$tsc", "$eslint-stylish"]
+		},
 		{
 			"label": "watch",
-			"dependsOn": ["npm: build:webview", "npm: watch:tsc", "npm: watch:esbuild"],
+			"dependsOn": ["npm: build:webview", "npm: watch:tsc", "npm: watch:esbuild", "npm: watch-webview"],
 			"presentation": {
 				"reveal": "never"
 			},
@@ -65,6 +81,35 @@
 				"reveal": "never"
 			}
 		},
+		{
+			"type": "npm",
+			"script": "watch-webview",
+			"problemMatcher": {
+				"owner": "custom",
+				"fileLocation": ["relative", "${workspaceFolder}"],
+				"pattern": [
+					{
+						"regexp": "^(.*):\\s*(\\d+):(\\d+)\\s*-\\s*(error|warning)\\s*(.*)$",
+						"file": 1,
+						"line": 2,
+						"column": 3,
+						"severity": 4,
+						"message": 5
+					}
+				],
+				"background": {
+					"activeOnStart": true,
+					"beginsPattern": "watch-webview",
+					"endsPattern": "Compiled successfully"
+				}
+			},
+			"isBackground": true,
+			"label": "npm: watch-webview",
+			"presentation": {
+				"group": "watch",
+				"reveal": "never"
+			}
+		},
 		{
 			"type": "npm",
 			"script": "watch-tests",

package.json

@@ -49,7 +49,7 @@
 	"main": "./dist/extension.js",
 	"contributes": {
 		"viewsContainers": {
-			"activitybar": [
+			"auxiliarybar": [
 				{
 					"id": "roo-cline-ActivityBar",
 					"title": "Roo Code",
@@ -228,6 +228,7 @@
 		"watch": "npm-run-all -p watch:*",
 		"watch:esbuild": "node esbuild.js --watch",
 		"watch:tsc": "tsc --noEmit --watch --project tsconfig.json",
+		"watch-webview": "cd webview-ui && npm run dev",
 		"watch-tests": "tsc -p . -w --outDir out"
 	},
 	"devDependencies": {

src/core/webview/ClineProvider.ts

@@ -265,6 +265,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		webviewView.webview.options = {
 			// Allow scripts in the webview
 			enableScripts: true,
+			enableCommandUris: true,
 			localResourceRoots: [this.context.extensionUri],
 		}
 		webviewView.webview.html = this.getHtmlContent(webviewView.webview)
@@ -405,17 +406,31 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 	private getHtmlContent(webview: vscode.Webview): string {
 		// Get the local path to main script run in the webview,
 		// then convert it to a uri we can use in the webview.
+		let scriptUri: string
+		let stylesUri: string
+		const inDevelopmentMode = this.context.extensionMode === vscode.ExtensionMode.Development
 
-		// The CSS file from the React build output
-		const stylesUri = getUri(webview, this.context.extensionUri, [
-			"webview-ui",
-			"build",
-			"static",
-			"css",
-			"main.css",
-		])
-		// The JS file from the React build output
-		const scriptUri = getUri(webview, this.context.extensionUri, ["webview-ui", "build", "static", "js", "main.js"])
+		if (inDevelopmentMode) {
+			scriptUri = "http://localhost:3000/static/js/bundle.js"
+			stylesUri = "http://localhost:3000/static/css/main.css"
+		} else {
+			// The CSS file from the React build output
+			stylesUri = getUri(webview, this.context.extensionUri, [
+				"webview-ui",
+				"build",
+				"static",
+				"css",
+				"main.css",
+			]).toString()
+			// The JS file from the React build output
+			scriptUri = getUri(webview, this.context.extensionUri, [
+				"webview-ui",
+				"build",
+				"static",
+				"js",
+				"main.js",
+			]).toString()
+		}
 
 		// The codicon font from the React build output
 		// https://github.com/microsoft/vscode-extension-samples/blob/main/webview-codicons-sample/src/extension.ts
@@ -450,23 +465,40 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		*/
 		const nonce = getNonce()
 
-		// Tip: Install the es6-string-html VS Code extension to enable code highlighting below
+		// Update the CSP to allow localhost in development mode
+		const csp = inDevelopmentMode
+			? `default-src 'none';
+		   font-src ${webview.cspSource};
+		   style-src ${webview.cspSource} 'unsafe-inline' http://localhost:3000;
+		   img-src ${webview.cspSource} data:;
+		   script-src 'unsafe-eval' 'unsafe-inline' http://localhost:3000;
+		   connect-src http://localhost:3000 ws://localhost:3000 ws://localhost:3000/ws ws://0.0.0.0:3000 ws://0.0.0.0:3000/ws http://0.0.0.0:3000`
+			: `default-src 'none';
+		   font-src ${webview.cspSource};
+		   style-src ${webview.cspSource} 'unsafe-inline';
+		   img-src ${webview.cspSource} data:;
+		   script-src 'nonce-${nonce}'`
+
 		return /*html*/ `
         <!DOCTYPE html>
         <html lang="en">
           <head>
             <meta charset="utf-8">
             <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
             <meta name="theme-color" content="#000000">
-            <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource}; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} data:; script-src 'nonce-${nonce}';">
+            <meta http-equiv="Content-Security-Policy" content="${csp}">
             <link rel="stylesheet" type="text/css" href="${stylesUri}">
 			<link href="${codiconsUri}" rel="stylesheet" />
             <title>Roo Code</title>
           </head>
           <body>
             <noscript>You need to enable JavaScript to run this app.</noscript>
             <div id="root"></div>
-            <script nonce="${nonce}" src="${scriptUri}"></script>
+            ${
+				inDevelopmentMode
+					? `<script src="${scriptUri}"></script>`
+					: `<script nonce="${nonce}" src="${scriptUri}"></script>`
+			}
           </body>
         </html>
       `

webview-ui/package.json

@@ -25,11 +25,14 @@
 		"rewire": "^7.0.0",
 		"shell-quote": "^1.8.2",
 		"styled-components": "^6.1.13",
+		"tailwind-merge": "^2.5.4",
+		"tailwindcss-animate": "^1.0.7",
 		"typescript": "^4.9.5",
 		"vscrui": "^0.2.0",
 		"web-vitals": "^2.1.4"
 	},
 	"scripts": {
+		"dev": "node scripts/dev-react.js",
 		"start": "react-app-rewired start",
 		"build": "node ./scripts/build-react-no-split.js",
 		"test": "react-app-rewired test --watchAll=false",
@@ -58,9 +61,13 @@
 		"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
 		"@types/shell-quote": "^1.7.5",
 		"@types/vscode-webview": "^1.57.5",
+		"@types/styled-components": "^5.1.26",
+		"autoprefixer": "^10.4.20",
 		"customize-cra": "^1.0.0",
 		"eslint": "^8.57.0",
 		"jest-simple-dot-reporter": "^1.0.5",
-		"react-app-rewired": "^2.2.1"
+		"react-app-rewired": "^2.2.1",
+		"postcss": "^8.4.47",
+		"tailwindcss": "^3.4.14"
 	}
 }