render vm in webview

ianjennings · ianjennings · commit 3f8d0b9c69ca · 2025-07-15T16:24:39.000-05:00
diff --git a/src/cli.ts b/src/cli.ts
@@ -2,6 +2,7 @@ import path from 'path';
 import * as vscode from 'vscode';
 import EventEmitter from 'node:events';
 import { logger } from './utils/logger';
+import { openTestDriverWebview } from './utils/webview';
 
 // Import the TestDriver agent directly from the package (npm link preferred for local dev)
 // eslint-disable-next-line @typescript-eslint/no-require-imports
@@ -121,8 +122,22 @@ export class TDInstance extends EventEmitter<EventsMap> {
 
   private setupEventListeners() {
     this.agent.emitter.on('**', (data: any) => {
-      console.log('event', this.agent.emitter.event, JSON.stringify(data ));
-      this.emit(this.agent.emitter.event, data);
+      const eventName = this.agent.emitter.event;
+      console.log('event', eventName, JSON.stringify(data));
+      this.emit(eventName, data);
+
+      // Listen for the show-window event and open a webview
+      if (eventName === 'show-window') {
+        try {
+          const encodedData = encodeURIComponent(JSON.stringify(data));
+          const urlToOpen = this.agent.debuggerUrl
+            ? `${this.agent.debuggerUrl}?data=${encodedData}`
+            : `${data.url}?data=${encodedData}`;
+          openTestDriverWebview(urlToOpen, 'TestDriver Window');
+        } catch (err) {
+          logger.error('Failed to open TestDriver webview', { error: err });
+        }
+      }
     });
 
 
diff --git a/src/tests.ts b/src/tests.ts
@@ -147,18 +147,31 @@ const setupRunProfiles = (controller: vscode.TestController, context?: vscode.Ex
       )!;
 
       const relativePath = vscode.workspace.asRelativePath(test.uri!, false);
+
+      let instance: TDInstance | undefined;
       const abortController = new AbortController();
-      token.onCancellationRequested(() => abortController.abort());
+
+      // Register cancellation handler to destroy the TDInstance
+      const cancelListener = token.onCancellationRequested(() => {
+        abortController.abort();
+        if (instance && typeof instance.destroy === 'function') {
+          try {
+            instance.destroy();
+          } catch (e) {
+            logger.error('Error destroying TDInstance on cancel', e);
+          }
+        }
+      });
 
       try {
         await new Promise<void>((resolve) => {
           // Compose params with selected flags
           // params removed, now using command/flags in TDInstance
-          const instance = new TDInstance(workspaceFolder.uri.fsPath, {
+          instance = new TDInstance(workspaceFolder.uri.fsPath, {
             focus: false,
             command: 'run',
-            flags: {'new-sandbox': true},
             file: relativePath.replace('testdriver/', ''),
+            flags: {'new-sandbox': true},
             context,
           });
 
@@ -196,6 +209,7 @@ const setupRunProfiles = (controller: vscode.TestController, context?: vscode.Ex
         });
       } finally {
         logger.info(`Test ${test.id} finished`);
+        cancelListener.dispose();
       }
     });
 
diff --git a/src/utils/webview.ts b/src/utils/webview.ts
@@ -0,0 +1,34 @@
+import * as vscode from 'vscode';
+
+export function openTestDriverWebview(url: string, title = 'TestDriver Window') {
+  const panel = vscode.window.createWebviewPanel(
+    'testdriverWebview',
+    title,
+    vscode.ViewColumn.Active,
+    {
+      enableScripts: true,
+      retainContextWhenHidden: true,
+    }
+  );
+
+  // Simple HTML to embed the external URL in an iframe
+  panel.webview.html = `
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>${title}</title>
+      <style>
+        html, body, iframe { height: 100%; width: 100%; margin: 0; padding: 0; border: none; }
+        iframe { border: none; }
+      </style>
+    </head>
+    <body>
+      <iframe src="${url}" width="100%" height="100%" allowfullscreen></iframe>
+    </body>
+    </html>
+  `;
+
+  return panel;
+}
