feat: add theme sync, scroll-to-bottom, and navigation to chat embed

Support the Coder embed postMessage protocol for theme sync,
scroll-to-bottom, and navigation handling. The extension detects
the VS Code color theme and forwards it to the embedded iframe
via coder:set-theme, sends coder:scroll-to-bottom on chat-ready,
and opens coder:navigate URLs externally.

Also adds the coder.chat.refresh command, TTL expiry for pending
memento values, and eager agentsEnabled context for pending chats.

Author: EhabY

package.json

@@ -353,6 +353,12 @@
 				"category": "Coder",
 				"icon": "$(refresh)"
 			},
+			{
+				"command": "coder.chat.refresh",
+				"title": "Refresh Chat",
+				"category": "Coder",
+				"icon": "$(refresh)"
+			},
 			{
 				"command": "coder.applyRecommendedSettings",
 				"title": "Apply Recommended SSH Settings",
@@ -424,6 +430,10 @@
 					"command": "coder.tasks.refresh",
 					"when": "false"
 				},
+				{
+					"command": "coder.chat.refresh",
+					"when": "false"
+				},
 				{
 					"command": "coder.applyRecommendedSettings"
 				}
@@ -465,6 +475,11 @@
 					"command": "coder.tasks.refresh",
 					"when": "coder.authenticated && view == coder.tasksPanel",
 					"group": "navigation@1"
+				},
+				{
+					"command": "coder.chat.refresh",
+					"when": "view == coder.chatPanel",
+					"group": "navigation@1"
 				}
 			],
 			"view/item/context": [
@@ -579,7 +594,7 @@
 	"extensionPack": [
 		"ms-vscode-remote.remote-ssh"
 	],
-	"packageManager": "pnpm@10.32.1",
+	"packageManager": "pnpm@10.33.0",
 	"engines": {
 		"vscode": "^1.106.0",
 		"node": ">= 22"

src/core/mementoManager.ts

@@ -3,6 +3,15 @@ import type { Memento } from "vscode";
 // Maximum number of recent URLs to store.
 const MAX_URLS = 10;
 
+// Pending values expire after this duration to guard against stale
+// state from crashes or interrupted reloads.
+const PENDING_TTL_MS = 5 * 60 * 1000;
+
+interface Stamped<T> {
+	value: T;
+	setAt: number;
+}
+
 export class MementoManager {
 	constructor(private readonly memento: Memento) {}
 
@@ -42,7 +51,7 @@ export class MementoManager {
 	 * the workspace startup confirmation is shown to the user.
 	 */
 	public async setFirstConnect(): Promise<void> {
-		return this.memento.update("firstConnect", true);
+		return this.setStamped("firstConnect", true);
 	}
 
 	/**
@@ -51,21 +60,21 @@ export class MementoManager {
 	 * prompting the user for confirmation.
 	 */
 	public async getAndClearFirstConnect(): Promise<boolean> {
-		const isFirst = this.memento.get<boolean>("firstConnect");
-		if (isFirst !== undefined) {
+		const value = this.getStamped<boolean>("firstConnect");
+		if (value !== undefined) {
 			await this.memento.update("firstConnect", undefined);
 		}
-		return isFirst === true;
+		return value === true;
 	}
 
 	/** Store a chat ID to open after a remote-authority reload. */
 	public async setPendingChatId(chatId: string): Promise<void> {
-		await this.memento.update("pendingChatId", chatId);
+		await this.setStamped("pendingChatId", chatId);
 	}
 
 	/** Read and clear the pending chat ID (undefined if none). */
 	public async getAndClearPendingChatId(): Promise<string | undefined> {
-		const chatId = this.memento.get<string>("pendingChatId");
+		const chatId = this.getStamped<string>("pendingChatId");
 		if (chatId !== undefined) {
 			await this.memento.update("pendingChatId", undefined);
 		}
@@ -76,4 +85,20 @@ export class MementoManager {
 	public async clearPendingChatId(): Promise<void> {
 		await this.memento.update("pendingChatId", undefined);
 	}
+
+	private async setStamped<T>(key: string, value: T): Promise<void> {
+		await this.memento.update(key, { value, setAt: Date.now() });
+	}
+
+	private getStamped<T>(key: string): T | undefined {
+		const raw = this.memento.get<Stamped<T>>(key);
+		if (raw?.setAt !== undefined && Date.now() - raw.setAt <= PENDING_TTL_MS) {
+			return raw.value;
+		}
+		// Expired or legacy, clean up.
+		if (raw !== undefined) {
+			void this.memento.update(key, undefined);
+		}
+		return undefined;
+	}
 }

src/extension.ts

@@ -232,6 +232,9 @@ export async function activate(ctx: vscode.ExtensionContext): Promise<void> {
 			chatPanelProvider,
 			{ webviewOptions: { retainContextWhenHidden: true } },
 		),
+		vscode.commands.registerCommand("coder.chat.refresh", () =>
+			chatPanelProvider.refresh(),
+		),
 	);
 
 	ctx.subscriptions.push(
@@ -333,6 +336,8 @@ export async function activate(ctx: vscode.ExtensionContext): Promise<void> {
 				// deployment is configured.
 				const pendingChatId = await mementoManager.getAndClearPendingChatId();
 				if (pendingChatId) {
+					// Enable eagerly so the view is visible before focus.
+					contextManager.set("coder.agentsEnabled", true);
 					chatPanelProvider.openChat(pendingChatId);
 				}
 			}

src/webviews/chat/chatPanelProvider.ts

@@ -1,9 +1,8 @@
-import { randomBytes } from "node:crypto";
+import * as vscode from "vscode";
 
 import { type CoderApi } from "../../api/coderApi";
 import { type Logger } from "../../logging/logger";
-
-import type * as vscode from "vscode";
+import { getNonce } from "../util";
 
 /**
  * Provides a webview that embeds the Coder agent chat UI.
@@ -34,15 +33,38 @@ export class ChatPanelProvider
 		private readonly logger: Logger,
 	) {}
 
+	private getTheme(): "light" | "dark" {
+		const kind = vscode.window.activeColorTheme.kind;
+		return kind === vscode.ColorThemeKind.Light ||
+			kind === vscode.ColorThemeKind.HighContrastLight
+			? "light"
+			: "dark";
+	}
+
+	private sendScrollToBottom(): void {
+		this.view?.webview.postMessage({ type: "coder:scroll-to-bottom" });
+	}
+
+	private sendTheme(): void {
+		this.view?.webview.postMessage({
+			type: "coder:set-theme",
+			theme: this.getTheme(),
+		});
+	}
+
 	/**
 	 * Opens the chat panel for the given chat ID.
 	 * Called after a deep link reload via the persisted
 	 * pendingChatId, or directly for testing.
 	 */
 	public openChat(chatId: string): void {
+		if (this.chatId === chatId && this.view) {
+			this.view.show(true);
+			return;
+		}
 		this.chatId = chatId;
 		this.refresh();
-		this.view?.show(true);
+		void vscode.commands.executeCommand(`${ChatPanelProvider.viewType}.focus`);
 	}
 
 	resolveWebviewView(
@@ -56,9 +78,12 @@ export class ChatPanelProvider
 			webviewView.webview.onDidReceiveMessage((msg: unknown) => {
 				this.handleMessage(msg);
 			}),
+			vscode.window.onDidChangeActiveColorTheme(() => {
+				this.sendTheme();
+			}),
 		);
 		this.renderView();
-		webviewView.onDidDispose(() => this.dispose());
+		this.disposables.push(webviewView.onDidDispose(() => this.dispose()));
 	}
 
 	public refresh(): void {
@@ -85,17 +110,33 @@ export class ChatPanelProvider
 			return;
 		}
 
-		const embedUrl = `${coderUrl}/agents/${this.chatId}/embed`;
+		const embedUrl = `${coderUrl}/agents/${this.chatId}/embed?theme=${this.getTheme()}`;
 		webview.html = this.getIframeHtml(embedUrl, coderUrl);
 	}
 
 	private handleMessage(message: unknown): void {
 		if (typeof message !== "object" || message === null) {
 			return;
 		}
-		const msg = message as { type?: string };
-		if (msg.type === "coder:vscode-ready") {
-			this.sendAuthToken();
+		const msg = message as { type?: string; payload?: { url?: string } };
+		switch (msg.type) {
+			case "coder:vscode-ready":
+				this.sendAuthToken();
+				break;
+			case "coder:chat-ready":
+				this.sendTheme();
+				this.sendScrollToBottom();
+				break;
+			case "coder:navigate": {
+				const url = msg.payload?.url;
+				const coderUrl = this.client.getHost();
+				if (url && coderUrl) {
+					void vscode.env.openExternal(vscode.Uri.parse(coderUrl + url));
+				}
+				break;
+			}
+			default:
+				break;
 		}
 	}
 
@@ -142,7 +183,7 @@ export class ChatPanelProvider
 	}
 
 	private getIframeHtml(embedUrl: string, allowedOrigin: string): string {
-		const nonce = randomBytes(16).toString("base64");
+		const nonce = getNonce();
 
 		return /* html */ `<!DOCTYPE html>
 <html lang="en">
@@ -205,6 +246,12 @@ export class ChatPanelProvider
             status.textContent = 'Authenticating…';
             vscode.postMessage({ type: 'coder:vscode-ready' });
           }
+          if (data.type === 'coder:chat-ready') {
+            vscode.postMessage({ type: 'coder:chat-ready' });
+          }
+          if (data.type === 'coder:navigate') {
+            vscode.postMessage(data);
+          }
           return;
         }
 
@@ -216,6 +263,18 @@ export class ChatPanelProvider
           }, '${allowedOrigin}');
         }
 
+        if (data.type === 'coder:set-theme') {
+          iframe.contentWindow.postMessage({
+            type: 'coder:set-theme',
+            payload: { theme: data.theme },
+          }, '${allowedOrigin}');
+        }
+
+        if (data.type === 'coder:scroll-to-bottom') {
+          iframe.contentWindow.postMessage(
+            { type: 'coder:scroll-to-bottom' }, '${allowedOrigin}');
+        }
+
         if (data.type === 'coder:auth-error') {
           status.textContent = '';
           status.appendChild(document.createTextNode(data.error || 'Authentication failed.'));

src/webviews/util.ts

@@ -42,6 +42,6 @@ export function getWebviewHtml(
 </html>`;
 }
 
-function getNonce(): string {
+export function getNonce(): string {
 	return randomBytes(16).toString("base64");
 }

test/mocks/testHelpers.ts

@@ -509,6 +509,7 @@ export class MockCoderApi implements Pick<
 	| "setSessionToken"
 	| "setCredentials"
 	| "getHost"
+	| "getSessionToken"
 	| "getAuthenticatedUser"
 	| "dispose"
 	| "getExperiments"
@@ -534,6 +535,7 @@ export class MockCoderApi implements Pick<
 	);
 
 	readonly getHost = vi.fn(() => this._host);
+	readonly getSessionToken = vi.fn(() => this._token);
 
 	readonly getAuthenticatedUser = vi.fn((): Promise<User> => {
 		if (this.authenticatedUser instanceof Error) {

test/mocks/vscode.runtime.ts

@@ -26,6 +26,12 @@ export const TreeItemCollapsibleState = E({
 	Expanded: 2,
 });
 export const StatusBarAlignment = E({ Left: 1, Right: 2 });
+export const ColorThemeKind = E({
+	Light: 1,
+	Dark: 2,
+	HighContrast: 3,
+	HighContrastLight: 4,
+});
 export const ExtensionMode = E({ Production: 1, Development: 2, Test: 3 });
 export const UIKind = E({ Desktop: 1, Web: 2 });
 export const InputBoxValidationSeverity = E({
@@ -82,8 +88,13 @@ export class EventEmitter<T> {
 
 const onDidChangeConfiguration = new EventEmitter<unknown>();
 const onDidChangeWorkspaceFolders = new EventEmitter<unknown>();
+const onDidChangeActiveColorTheme = new EventEmitter<unknown>();
 
 export const window = {
+	activeColorTheme: { kind: ColorThemeKind.Dark } as { kind: number },
+	onDidChangeActiveColorTheme: onDidChangeActiveColorTheme.event,
+	__fireDidChangeActiveColorTheme: (e: unknown) =>
+		onDidChangeActiveColorTheme.fire(e),
 	showInformationMessage: vi.fn(),
 	showWarningMessage: vi.fn(),
 	showErrorMessage: vi.fn(),
@@ -151,6 +162,7 @@ const vscode = {
 	ConfigurationTarget,
 	TreeItemCollapsibleState,
 	StatusBarAlignment,
+	ColorThemeKind,
 	ExtensionMode,
 	UIKind,
 	InputBoxValidationSeverity,