Add output logging to better debug extension outside of development

.vscodeignore

@@ -13,7 +13,11 @@ vsc-extension-quickstart.md
 **/*.map
 **/*.ts
 **/.vscode-test.*
+
+# Custom
 demo.gif
+.nvmrc
+.gitattributes
 
 # Ignore all webview-ui files except the build directory (https://github.com/microsoft/vscode-webview-ui-toolkit-samples/blob/main/frameworks/hello-world-react-cra/.vscodeignore)
 webview-ui/src/**

package.json

@@ -2,7 +2,7 @@
   "name": "claude-dev",
   "displayName": "Claude Dev",
   "description": "Autonomous software engineer right in your IDE, capable of reading/writing files, executing commands, and more with your permission every step of the way.",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "icon": "icon.png",
   "engines": {
     "vscode": "^1.84.0"

src/extension.ts

@@ -12,6 +12,8 @@ https://github.com/microsoft/vscode-webview-ui-toolkit-samples/tree/main/framewo
 
 */
 
+let outputChannel: vscode.OutputChannel
+
 // This method is called when your extension is activated
 // Your extension is activated the very first time the command is executed
 export function activate(context: vscode.ExtensionContext) {
@@ -19,6 +21,11 @@ export function activate(context: vscode.ExtensionContext) {
 	// This line of code will only be executed once when your extension is activated
 	//console.log('Congratulations, your extension "claude-dev" is now active!')
 
+	outputChannel = vscode.window.createOutputChannel("Claude Dev")
+	context.subscriptions.push(outputChannel)
+
+	outputChannel.appendLine("Claude Dev extension activated")
+
 	// The command has been defined in the package.json file
 	// Now provide the implementation of the command with registerCommand
 	// The commandId parameter must match the command field in package.json
@@ -29,7 +36,7 @@ export function activate(context: vscode.ExtensionContext) {
 	// })
 	// context.subscriptions.push(disposable)
 
-	const sidebarProvider = new ClaudeDevProvider(context)
+	const sidebarProvider = new ClaudeDevProvider(context, outputChannel)
 
 	context.subscriptions.push(
 		vscode.window.registerWebviewViewProvider(ClaudeDevProvider.viewType, sidebarProvider, {
@@ -39,8 +46,7 @@ export function activate(context: vscode.ExtensionContext) {
 
 	context.subscriptions.push(
 		vscode.commands.registerCommand("claude-dev.plusButtonTapped", async () => {
-			//const message = "claude-dev.plusButtonTapped!"
+			outputChannel.appendLine("Plus button tapped")
-			//vscode.window.showInformationMessage(message)
 			await sidebarProvider.clearTask()
 			await sidebarProvider.postStateToWebview()
 			await sidebarProvider.postMessageToWebview({ type: "action", action: "plusButtonTapped" })
@@ -48,9 +54,10 @@ export function activate(context: vscode.ExtensionContext) {
 	)
 
 	const openClaudeDevInNewTab = () => {
+		outputChannel.appendLine("Opening Claude Dev in new tab")
 		// (this example uses webviewProvider activation event which is necessary to deserialize cached webview, but since we use retainContextWhenHidden, we don't need to use that event)
 		// https://github.com/microsoft/vscode-extension-samples/blob/main/webview-sample/src/extension.ts
-		const tabProvider = new ClaudeDevProvider(context)
+		const tabProvider = new ClaudeDevProvider(context, outputChannel)
 		//const column = vscode.window.activeTextEditor ? vscode.window.activeTextEditor.viewColumn : undefined
 		const lastCol = Math.max(...vscode.window.visibleTextEditors.map((editor) => editor.viewColumn || 0))
 		const targetCol = Math.max(lastCol + 1, 1)
@@ -82,4 +89,6 @@ export function activate(context: vscode.ExtensionContext) {
 }
 
 // This method is called when your extension is deactivated
-export function deactivate() {}
+export function deactivate() {
+	outputChannel.appendLine("Claude Dev extension deactivated")
+}

src/providers/ClaudeDevProvider.ts

@@ -20,7 +20,12 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 	private claudeDev?: ClaudeDev
 	private latestAnnouncementId = "jul-25-2024" // update to some unique identifier when we add a new announcement
 
-	constructor(private readonly context: vscode.ExtensionContext) {}
+	constructor(
+		private readonly context: vscode.ExtensionContext,
+		private readonly outputChannel: vscode.OutputChannel
+	) {
+		this.outputChannel.appendLine("ClaudeDevProvider instantiated")
+	}
 
 	/*
 	VSCode extensions use the disposable pattern to clean up resources when the sidebar/editor tab is closed by the user or system. This applies to event listening, commands, interacting with the UI, etc.
@@ -28,12 +33,12 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 	- https://github.com/microsoft/vscode-extension-samples/blob/main/webview-sample/src/extension.ts
 	*/
 	async dispose() {
-		console.log("Disposing provider...")
+		this.outputChannel.appendLine("Disposing ClaudeDevProvider...")
-		await this.clearTask() // clears claudeDev, api conversation history, and webview claude messages
+		await this.clearTask()
-		console.log("Cleared task")
+		this.outputChannel.appendLine("Cleared task")
 		if (this.view && "dispose" in this.view) {
 			this.view.dispose()
-			console.log("Disposed webview")
+			this.outputChannel.appendLine("Disposed webview")
 		}
 		while (this.disposables.length) {
 			const x = this.disposables.pop()
@@ -41,7 +46,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 				x.dispose()
 			}
 		}
-		console.log("Disposed disposables")
+		this.outputChannel.appendLine("Disposed all disposables")
 	}
 
 	resolveWebviewView(
@@ -49,6 +54,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 		//context: vscode.WebviewViewResolveContext<unknown>, used to recreate a deallocated webview, but we don't need this since we use retainContextWhenHidden
 		//token: vscode.CancellationToken
 	): void | Thenable<void> {
+		this.outputChannel.appendLine("Resolving webview view")
 		this.view = webviewView
 
 		webviewView.webview.options = {
@@ -105,7 +111,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 		// Listen for when color changes
 		vscode.workspace.onDidChangeConfiguration(
 			(e) => {
-				if (e.affectsConfiguration("workbench.colorTheme")) {
+				if (e && e.affectsConfiguration("workbench.colorTheme")) {
 					// Sends latest theme name to webview
 					this.postStateToWebview()
 				}
@@ -119,6 +125,8 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 
 		// Clear previous version's (0.0.6) claudeMessage cache from workspace state. We now store in global state with a unique identifier for each provider instance. We need to store globally rather than per workspace to eventually implement task history
 		this.updateWorkspaceState("claudeMessages", undefined)
+
+		this.outputChannel.appendLine("Webview view resolved")
 	}
 
 	async tryToInitClaudeDevWithTask(task: string) {