Enable retainContextWhenHidden to keep webview from having to be reloaded everytime it's closed; fix issues with text input focusing

src/extension.ts

@@ -31,7 +31,11 @@ export function activate(context: vscode.ExtensionContext) {
 
 	const provider = new SidebarProvider(context)
 
-	context.subscriptions.push(vscode.window.registerWebviewViewProvider(SidebarProvider.viewType, provider))
+	context.subscriptions.push(
+		vscode.window.registerWebviewViewProvider(SidebarProvider.viewType, provider, {
+			webviewOptions: { retainContextWhenHidden: true },
+		})
+	)
 
 	context.subscriptions.push(
 		vscode.commands.registerCommand("claude-dev.plusButtonTapped", async () => {
@@ -39,7 +43,7 @@ export function activate(context: vscode.ExtensionContext) {
 			//vscode.window.showInformationMessage(message)
 			await provider.clearTask()
 			await provider.postStateToWebview()
-			await provider.postMessageToWebview({ type: "action", action: "plusButtonTapped"})
+			await provider.postMessageToWebview({ type: "action", action: "plusButtonTapped" })
 		})
 	)
 
@@ -47,10 +51,9 @@ export function activate(context: vscode.ExtensionContext) {
 		vscode.commands.registerCommand("claude-dev.settingsButtonTapped", () => {
 			//const message = "claude-dev.settingsButtonTapped!"
 			//vscode.window.showInformationMessage(message)
-			provider.postMessageToWebview({ type: "action", action: "settingsButtonTapped"})
+			provider.postMessageToWebview({ type: "action", action: "settingsButtonTapped" })
 		})
 	)
-
 }
 
 // This method is called when your extension is deactivated

src/providers/SidebarProvider.ts

@@ -41,15 +41,14 @@ export class SidebarProvider implements vscode.WebviewViewProvider {
 		// and executes code based on the message that is recieved
 		this.setWebviewMessageListener(webviewView.webview)
 
+		// Logs show up in bottom panel > Debug Console
+		//console.log("registering listener")
+
 		// Listen for when the panel becomes visible
 		// https://github.com/microsoft/vscode-discussions/discussions/840
 		webviewView.onDidChangeVisibility((e: any) => {
-			if (e && e.visible) {
-				// Your view is visible
-				this.postMessageToWebview({ type: "action", action: "didBecomeVisible" })
-			} else {
-				// Your view is hidden
-			}
+			// we don't get any event back (so can't do e.visible), but this function does get called when the view changes visibility
+			this.postMessageToWebview({ type: "action", action: "didBecomeVisible" })
 		})
 
 		// Listen for when color changes

webview-ui/src/components/ChatView.tsx

@@ -3,7 +3,7 @@ import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import { KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import vsDarkPlus from "react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus"
 import DynamicTextArea from "react-textarea-autosize"
-import { useEvent } from "react-use"
+import { useEvent, useMount } from "react-use"
 import { combineApiRequests } from "../utilities/combineApiRequests"
 import { combineCommandSequences } from "../utilities/combineCommandSequences"
 import { getApiMetrics } from "../utilities/getApiMetrics"
@@ -264,14 +264,10 @@ const ChatView = ({ messages, isHidden, vscodeThemeName }: ChatViewProps) => {
 
 	useEvent("message", handleMessage)
 
-	useEffect(() => {
-		const timer = setTimeout(() => {
-			textAreaRef.current?.focus()
-		}, 20)
-		return () => {
-			clearTimeout(timer)
-		}
-	}, [])
+	useMount(() => {
+		// NOTE: the vscode window needs to be focused for this to work
+		textAreaRef.current?.focus()
+	})
 
 	useEffect(() => {
 		if (textAreaRef.current && !textAreaHeight) {