feat(kilo-vscode): add dev reload and cache busting for webview

markijbema · markijbema · commit c4d31b57ef7c · 2026-02-10T15:47:52.000+01:00
- Watch dist/webview.* for changes in development mode and auto-reload
  the webview HTML so changes during `pnpm watch` are reflected without
  manually reloading the extension host window.
- Append ?v=&lt;timestamp&gt; cache-buster to script/style URIs so the
  webview browser doesn't serve stale bundles after a rebuild.
- Pass extensionMode to KiloProvider so dev reload is only active
  when running from the Extension Development Host.
diff --git a/packages/kilo-vscode/src/KiloProvider.ts b/packages/kilo-vscode/src/KiloProvider.ts
@@ -16,10 +16,12 @@ export class KiloProvider implements vscode.WebviewViewProvider {
   private unsubscribeEvent: (() => void) | null = null
   private unsubscribeState: (() => void) | null = null
   private webviewMessageDisposable: vscode.Disposable | null = null
+  private devReloadWatcher: vscode.FileSystemWatcher | null = null
 
   constructor(
     private readonly extensionUri: vscode.Uri,
     private readonly connectionService: KiloConnectionService,
+    private readonly extensionMode: vscode.ExtensionMode = vscode.ExtensionMode.Production,
   ) {}
 
   /**
@@ -105,6 +107,11 @@ export class KiloProvider implements vscode.WebviewViewProvider {
     // Handle messages from webview (shared handler)
     this.setupWebviewMessageHandler(webviewView.webview)
 
+    // In development, watch for webview dist changes and auto-reload
+    if (this.extensionMode === vscode.ExtensionMode.Development) {
+      this.setupDevReload(webviewView.webview)
+    }
+
     // Initialize connection to CLI backend
     this.initializeConnection()
   }
@@ -127,9 +134,37 @@ export class KiloProvider implements vscode.WebviewViewProvider {
     // Handle messages from webview (shared handler)
     this.setupWebviewMessageHandler(panel.webview)
 
+    // In development, watch for webview dist changes and auto-reload
+    if (this.extensionMode === vscode.ExtensionMode.Development) {
+      this.setupDevReload(panel.webview)
+    }
+
     this.initializeConnection()
   }
 
+  /**
+   * Watch for changes to the webview dist files and auto-reload the webview.
+   * Only active in development mode so changes during `pnpm watch` are
+   * reflected without manually reloading the extension host window.
+   */
+  private setupDevReload(webview: vscode.Webview): void {
+    this.devReloadWatcher?.dispose()
+
+    const pattern = new vscode.RelativePattern(vscode.Uri.joinPath(this.extensionUri, "dist"), "webview.*")
+    const watcher = vscode.workspace.createFileSystemWatcher(pattern)
+
+    const reload = () => {
+      console.log("[Kilo New] KiloProvider: 🔄 Dev reload — webview dist changed, reloading HTML")
+      webview.html = ""
+      webview.html = this._getHtmlForWebview(webview)
+    }
+
+    watcher.onDidChange(reload)
+    watcher.onDidCreate(reload)
+
+    this.devReloadWatcher = watcher
+  }
+
   /**
    * Set up the shared message handler for both sidebar and tab webviews.
    * Handles ALL message types so tabs have full functionality.
@@ -766,6 +801,9 @@ export class KiloProvider implements vscode.WebviewViewProvider {
     const styleUri = webview.asWebviewUri(vscode.Uri.joinPath(this.extensionUri, "dist", "webview.css"))
 
     const nonce = getNonce()
+    // Cache-bust so the browser inside the webview doesn't serve stale bundles
+    // after a rebuild (especially useful during development with watch mode).
+    const bust = Date.now()
 
     // CSP allows:
     // - default-src 'none': Block everything by default
@@ -788,7 +826,7 @@ export class KiloProvider implements vscode.WebviewViewProvider {
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="Content-Security-Policy" content="${csp}">
 	<title>Kilo Code</title>
-	<link rel="stylesheet" href="${styleUri}">
+	<link rel="stylesheet" href="${styleUri}?v=${bust}">
 	<style>
 		html, body {
 			margin: 0;
@@ -813,7 +851,7 @@ export class KiloProvider implements vscode.WebviewViewProvider {
 </head>
 <body>
 	<div id="root"></div>
-	<script nonce="${nonce}" src="${scriptUri}"></script>
+	<script nonce="${nonce}" src="${scriptUri}?v=${bust}"></script>
 </body>
 </html>`
   }
@@ -826,6 +864,7 @@ export class KiloProvider implements vscode.WebviewViewProvider {
     this.unsubscribeEvent?.()
     this.unsubscribeState?.()
     this.webviewMessageDisposable?.dispose()
+    this.devReloadWatcher?.dispose()
     this.trackedSessionIds.clear()
   }
 }
diff --git a/packages/kilo-vscode/src/extension.ts b/packages/kilo-vscode/src/extension.ts
@@ -11,7 +11,7 @@ export function activate(context: vscode.ExtensionContext) {
   const connectionService = new KiloConnectionService(context)
 
   // Create the provider with shared service
-  const provider = new KiloProvider(context.extensionUri, connectionService)
+  const provider = new KiloProvider(context.extensionUri, connectionService, context.extensionMode)
 
   // Register the webview view provider for the sidebar
   context.subscriptions.push(vscode.window.registerWebviewViewProvider(KiloProvider.viewType, provider))
@@ -77,7 +77,7 @@ async function openKiloInNewTab(context: vscode.ExtensionContext, connectionServ
     dark: vscode.Uri.joinPath(context.extensionUri, "assets", "icons", "kilo-dark.svg"),
   }
 
-  const tabProvider = new KiloProvider(context.extensionUri, connectionService)
+  const tabProvider = new KiloProvider(context.extensionUri, connectionService, context.extensionMode)
   tabProvider.resolveWebviewPanel(panel)
 
   // Wait for the new panel to become active before locking the editor group.
