Create walkthrough webview panel in activity bar

- Add walkthrough view to dialectic activity bar container in package.json
- Create WalkthroughWebviewProvider with basic webview setup
- Register webview provider in extension activation
- Update DaemonClient to pass walkthrough messages to webview
- Add placeholder HTML with walkthrough data display

Completes Commit 2 of Phase 2 for issue #23 walkthrough system.
Next: Implement walkthrough content rendering.

Author: nikomatsakis

extension/package.json

@@ -73,6 +73,11 @@
         {
           "id": "dialectic.syntheticPR",
           "name": "Code Review"
+        },
+        {
+          "id": "dialectic.walkthrough",
+          "name": "Walkthrough",
+          "type": "webview"
         }
       ]
     },

extension/src/extension.ts

@@ -5,6 +5,7 @@ import * as fs from 'fs';
 import * as crypto from 'crypto';
 import { ReviewWebviewProvider } from './reviewWebview';
 import { SyntheticPRProvider } from './syntheticPRProvider';
+import { WalkthroughWebviewProvider } from './walkthroughWebview';
 
 // TEST TEST TEST 
 
@@ -192,7 +193,8 @@ class DaemonClient implements vscode.Disposable {
         private context: vscode.ExtensionContext,
         private reviewProvider: ReviewWebviewProvider,
         private outputChannel: vscode.OutputChannel,
-        private syntheticPRProvider: SyntheticPRProvider
+        private syntheticPRProvider: SyntheticPRProvider,
+        private walkthroughProvider: WalkthroughWebviewProvider
     ) { }
 
     start(): void {
@@ -293,11 +295,11 @@ class DaemonClient implements vscode.Disposable {
             try {
                 const walkthroughPayload = message.payload as PresentWalkthroughPayload;
 
-                // For now, just log the received walkthrough data
                 this.outputChannel.appendLine(`Received walkthrough with base_uri: ${walkthroughPayload.base_uri}`);
                 this.outputChannel.appendLine(`Walkthrough sections: ${Object.keys(walkthroughPayload).filter(k => k !== 'base_uri' && walkthroughPayload[k as keyof PresentWalkthroughPayload]).join(', ')}`);
 
-                // TODO: Implement walkthrough webview rendering
+                // Show walkthrough in webview
+                this.walkthroughProvider.showWalkthrough(walkthroughPayload);
 
                 // Send success response back through daemon
                 this.sendResponse(message.id, { success: true });
@@ -849,10 +851,16 @@ export function activate(context: vscode.ExtensionContext) {
     // Create synthetic PR provider for AI-generated pull requests
     const syntheticPRProvider = new SyntheticPRProvider(context);
 
+    // Create walkthrough webview provider
+    const walkthroughProvider = new WalkthroughWebviewProvider(context.extensionUri);
+    context.subscriptions.push(
+        vscode.window.registerWebviewViewProvider(WalkthroughWebviewProvider.viewType, walkthroughProvider)
+    );
+
     console.log('Webview provider created successfully');
 
     // 💡: Set up daemon client connection for message bus communication
-    const daemonClient = new DaemonClient(context, reviewProvider, outputChannel, syntheticPRProvider);
+    const daemonClient = new DaemonClient(context, reviewProvider, outputChannel, syntheticPRProvider, walkthroughProvider);
     daemonClient.start();
 
     // Set up comment callback to send comments as feedback

extension/src/walkthroughWebview.ts

@@ -0,0 +1,62 @@
+import * as vscode from 'vscode';
+
+export class WalkthroughWebviewProvider implements vscode.WebviewViewProvider {
+    public static readonly viewType = 'dialectic.walkthrough';
+
+    private _view?: vscode.WebviewView;
+
+    constructor(private readonly _extensionUri: vscode.Uri) {}
+
+    public resolveWebviewView(
+        webviewView: vscode.WebviewView,
+        context: vscode.WebviewViewResolveContext,
+        _token: vscode.CancellationToken,
+    ) {
+        this._view = webviewView;
+
+        webviewView.webview.options = {
+            enableScripts: true,
+            localResourceRoots: [this._extensionUri]
+        };
+
+        webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);
+    }
+
+    public showWalkthrough(walkthrough: any) {
+        if (this._view) {
+            this._view.show?.(true);
+            this._view.webview.postMessage({
+                type: 'walkthrough',
+                data: walkthrough
+            });
+        }
+    }
+
+    private _getHtmlForWebview(webview: vscode.Webview) {
+        return `<!DOCTYPE html>
+            <html lang="en">
+            <head>
+                <meta charset="UTF-8">
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                <title>Walkthrough</title>
+            </head>
+            <body>
+                <div id="content">
+                    <p>Walkthrough received - rendering coming soon!</p>
+                </div>
+                <script>
+                    const vscode = acquireVsCodeApi();
+                    window.addEventListener('message', event => {
+                        const message = event.data;
+                        if (message.type === 'walkthrough') {
+                            document.getElementById('content').innerHTML = 
+                                '<h3>Walkthrough Received</h3><pre>' + 
+                                JSON.stringify(message.data, null, 2) + 
+                                '</pre>';
+                        }
+                    });
+                </script>
+            </body>
+            </html>`;
+    }
+}