From 4f7693322e181137049b7af9ff36387934d81930 Mon Sep 17 00:00:00 2001
From: George Ng <georgeng@Microsoft.com>
Date: Mon, 20 Jul 2026 17:34:24 -0700
Subject: [PATCH 01/15] Add standard ctrl/cmd + C or + x commands for vscode
 shell

---
 ts/packages/chat-ui/src/contextMenu.ts       |  74 ++++++++
 ts/packages/chat-ui/src/index.ts             |   6 +-
 ts/packages/chat-ui/test/contextMenu.spec.ts | 175 +++++++++++++++++++
 ts/packages/vscode-shell/src/webview/main.ts |  13 ++
 4 files changed, 267 insertions(+), 1 deletion(-)
 create mode 100644 ts/packages/chat-ui/test/contextMenu.spec.ts

diff --git a/ts/packages/chat-ui/src/contextMenu.ts b/ts/packages/chat-ui/src/contextMenu.ts
index 8bd5c3fcf8..1452fe2054 100644
--- a/ts/packages/chat-ui/src/contextMenu.ts
+++ b/ts/packages/chat-ui/src/contextMenu.ts
@@ -277,3 +277,77 @@ function selectAll(target: HTMLElement) {
     sel?.removeAllRanges();
     sel?.addRange(range);
 }
+
+/**
+ * Copy or cut the active selection for a Ctrl/Cmd+C or Ctrl/Cmd+X
+ * keyboard shortcut, using the same clipboard path as the right-click
+ * menu (getSelection + navigator.clipboard, with an execCommand
+ * fallback).
+ *
+ * VS Code webviews don't run the native clipboard action on the DOM
+ * selection for these keys, so only the JS path works - that is why the
+ * right-click menu copies but the keyboard doesn't. A host can call this
+ * from a keydown listener to restore keyboard copy/cut over the chat
+ * history and the message input. The Electron shell gets these natively
+ * and does not need it.
+ *
+ * Returns true when it acted on a non-empty selection, so the caller can
+ * call preventDefault().
+ */
+export function handleClipboardShortcut(e: KeyboardEvent): boolean {
+    if (
+        e.defaultPrevented ||
+        e.altKey ||
+        e.shiftKey ||
+        !(e.ctrlKey || e.metaKey)
+    ) {
+        return false;
+    }
+    const key = e.key.toLowerCase();
+    const isCopy = key === "c";
+    const isCut = key === "x";
+    if (!isCopy && !isCut) {
+        return false;
+    }
+
+    // Native <input>/<textarea> keep their selection outside of
+    // window.getSelection(), so read it off the focused element.
+    const active = document.activeElement;
+    if (
+        active instanceof HTMLInputElement ||
+        active instanceof HTMLTextAreaElement
+    ) {
+        const start = active.selectionStart ?? 0;
+        const end = active.selectionEnd ?? 0;
+        if (end <= start) {
+            return false;
+        }
+        copyText(active.value.slice(start, end));
+        if (isCut && !active.readOnly && !active.disabled) {
+            active.setRangeText("", start, end, "end");
+            active.dispatchEvent(new Event("input", { bubbles: true }));
+        }
+        return true;
+    }
+
+    const sel = window.getSelection();
+    const text = sel ? sel.toString() : "";
+    if (!text) {
+        return false;
+    }
+    if (isCut && isEditableSelection(sel)) {
+        cutSelection(text);
+    } else {
+        copyText(text);
+    }
+    return true;
+}
+
+// True when the selection sits inside editable content (the message
+// input) rather than the read-only chat history, so Ctrl+X only deletes
+// where deletion is valid.
+function isEditableSelection(sel: Selection | null): boolean {
+    const node = sel?.anchorNode ?? null;
+    const el = node instanceof Element ? node : (node?.parentElement ?? null);
+    return el instanceof HTMLElement && el.isContentEditable;
+}
diff --git a/ts/packages/chat-ui/src/index.ts b/ts/packages/chat-ui/src/index.ts
index b56d0880fa..58cb40660a 100644
--- a/ts/packages/chat-ui/src/index.ts
+++ b/ts/packages/chat-ui/src/index.ts
@@ -61,7 +61,11 @@ export {
     type StatusNoticeLevel,
 } from "./statusNotice.js";
 
-export { ChatContextMenu, ContextMenuTargetOptions } from "./contextMenu.js";
+export {
+    ChatContextMenu,
+    ContextMenuTargetOptions,
+    handleClipboardShortcut,
+} from "./contextMenu.js";
 
 export type {
     SpeechState,
diff --git a/ts/packages/chat-ui/test/contextMenu.spec.ts b/ts/packages/chat-ui/test/contextMenu.spec.ts
new file mode 100644
index 0000000000..7ba6051178
--- /dev/null
+++ b/ts/packages/chat-ui/test/contextMenu.spec.ts
@@ -0,0 +1,175 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import {
+    describe,
+    it,
+    expect,
+    afterEach,
+    beforeEach,
+    jest,
+} from "@jest/globals";
+import { handleClipboardShortcut } from "../src/contextMenu.js";
+
+// handleClipboardShortcut restores keyboard copy/cut in hosts (VS Code
+// webviews) where the native Ctrl/Cmd+C|X doesn't act on the DOM
+// selection. These tests run under jsdom (see jest.config.cjs) and mock
+// the clipboard write since jsdom has no real clipboard.
+
+function keyEvent(
+    key: string,
+    mods: {
+        ctrlKey?: boolean;
+        metaKey?: boolean;
+        altKey?: boolean;
+        shiftKey?: boolean;
+    } = {},
+): KeyboardEvent {
+    return new KeyboardEvent("keydown", {
+        key,
+        cancelable: true,
+        bubbles: true,
+        ...mods,
+    });
+}
+
+let writeText: ReturnType<typeof jest.fn>;
+
+beforeEach(() => {
+    writeText = jest.fn(() => Promise.resolve());
+    Object.defineProperty(navigator, "clipboard", {
+        value: { writeText },
+        configurable: true,
+    });
+});
+
+afterEach(() => {
+    document.body.replaceChildren();
+    jest.restoreAllMocks();
+});
+
+describe("handleClipboardShortcut", () => {
+    it("ignores keys that are not copy/cut shortcuts", () => {
+        expect(handleClipboardShortcut(keyEvent("a", { ctrlKey: true }))).toBe(
+            false,
+        );
+        expect(handleClipboardShortcut(keyEvent("v", { ctrlKey: true }))).toBe(
+            false,
+        );
+        expect(writeText).not.toHaveBeenCalled();
+    });
+
+    it("ignores C without ctrl or meta", () => {
+        expect(handleClipboardShortcut(keyEvent("c"))).toBe(false);
+        expect(writeText).not.toHaveBeenCalled();
+    });
+
+    it("ignores shift chords such as Ctrl+Shift+C", () => {
+        jest.spyOn(window, "getSelection").mockReturnValue({
+            toString: () => "text",
+            anchorNode: document.body,
+            rangeCount: 1,
+        } as unknown as Selection);
+        expect(
+            handleClipboardShortcut(
+                keyEvent("c", { ctrlKey: true, shiftKey: true }),
+            ),
+        ).toBe(false);
+        expect(writeText).not.toHaveBeenCalled();
+    });
+
+    it("ignores an already-consumed event", () => {
+        const e = keyEvent("c", { ctrlKey: true });
+        e.preventDefault();
+        expect(handleClipboardShortcut(e)).toBe(false);
+        expect(writeText).not.toHaveBeenCalled();
+    });
+
+    it("copies the document selection on Ctrl+C", () => {
+        const div = document.createElement("div");
+        div.textContent = "history text";
+        document.body.appendChild(div);
+        jest.spyOn(window, "getSelection").mockReturnValue({
+            toString: () => "history text",
+            anchorNode: div.firstChild,
+            rangeCount: 1,
+        } as unknown as Selection);
+
+        expect(handleClipboardShortcut(keyEvent("c", { ctrlKey: true }))).toBe(
+            true,
+        );
+        expect(writeText).toHaveBeenCalledWith("history text");
+    });
+
+    it("copies the document selection on Cmd+C (meta)", () => {
+        jest.spyOn(window, "getSelection").mockReturnValue({
+            toString: () => "mac text",
+            anchorNode: document.body,
+            rangeCount: 1,
+        } as unknown as Selection);
+
+        expect(handleClipboardShortcut(keyEvent("c", { metaKey: true }))).toBe(
+            true,
+        );
+        expect(writeText).toHaveBeenCalledWith("mac text");
+    });
+
+    it("does nothing when the selection is empty", () => {
+        jest.spyOn(window, "getSelection").mockReturnValue({
+            toString: () => "",
+            anchorNode: null,
+            rangeCount: 0,
+        } as unknown as Selection);
+
+        expect(handleClipboardShortcut(keyEvent("c", { ctrlKey: true }))).toBe(
+            false,
+        );
+        expect(writeText).not.toHaveBeenCalled();
+    });
+
+    it("copies the selection from a focused input without mutating it", () => {
+        const input = document.createElement("input");
+        input.value = "abcdef";
+        document.body.appendChild(input);
+        input.focus();
+        input.setSelectionRange(1, 4); // "bcd"
+
+        expect(handleClipboardShortcut(keyEvent("c", { ctrlKey: true }))).toBe(
+            true,
+        );
+        expect(writeText).toHaveBeenCalledWith("bcd");
+        expect(input.value).toBe("abcdef");
+    });
+
+    it("cuts the selection from a focused textarea and fires input", () => {
+        const ta = document.createElement("textarea");
+        ta.value = "abcdef";
+        document.body.appendChild(ta);
+        ta.focus();
+        ta.setSelectionRange(1, 4); // "bcd"
+        const inputEvents = jest.fn();
+        ta.addEventListener("input", inputEvents);
+
+        expect(handleClipboardShortcut(keyEvent("x", { ctrlKey: true }))).toBe(
+            true,
+        );
+        expect(writeText).toHaveBeenCalledWith("bcd");
+        expect(ta.value).toBe("aef");
+        expect(inputEvents).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not cut from a read-only input", () => {
+        const input = document.createElement("input");
+        input.value = "abcdef";
+        input.readOnly = true;
+        document.body.appendChild(input);
+        input.focus();
+        input.setSelectionRange(1, 4);
+
+        expect(handleClipboardShortcut(keyEvent("x", { ctrlKey: true }))).toBe(
+            true,
+        );
+        expect(writeText).toHaveBeenCalledWith("bcd");
+        expect(input.value).toBe("abcdef");
+    });
+});
diff --git a/ts/packages/vscode-shell/src/webview/main.ts b/ts/packages/vscode-shell/src/webview/main.ts
index 91868d32d0..9ac426b86e 100644
--- a/ts/packages/vscode-shell/src/webview/main.ts
+++ b/ts/packages/vscode-shell/src/webview/main.ts
@@ -12,6 +12,7 @@ import {
     ConversationBar,
     HistoryEntry,
     formatHistorySeparatorLabel,
+    handleClipboardShortcut,
     STATUS_NOTICE_EVENT,
     parseStatusNotice,
     type ConnectionStatus,
@@ -1349,6 +1350,18 @@ document.addEventListener("keydown", (e) => {
     }
 });
 
+// VS Code webviews don't perform the native clipboard action on the DOM
+// selection for Ctrl/Cmd+C|X the way the Electron shell does - only the
+// JS clipboard path runs, which is why the right-click menu copies but
+// the keyboard doesn't. Route these keys through chat-ui's shared
+// clipboard logic so keyboard copy/cut work over the chat history and
+// the message input.
+document.addEventListener("keydown", (e) => {
+    if (handleClipboardShortcut(e)) {
+        e.preventDefault();
+    }
+});
+
 // Report focus changes so the extension can drive a context key for keybindings.
 const reportFocus = (focused: boolean) => {
     vscode.postMessage({ type: "focus", focused });

From f9c3a7f855a1fad1c9b2a4c0ffb306d2e7654a52 Mon Sep 17 00:00:00 2001
From: George Ng <georgeng@Microsoft.com>
Date: Mon, 20 Jul 2026 18:08:02 -0700
Subject: [PATCH 02/15] Make chat input drag-selectable from the box padding

The message input is a display:inline contentEditable span, so its flex
wrapper is wider than the text run. A press in that empty padding landed
on the wrapper (not the editable), so a selection couldn't begin there -
you could only select by starting the drag on the text itself. Forward
padding presses to the editable via pointer capture: focus it, anchor a
caret at the pointer, and extend the selection as the pointer moves, so
the whole box up to the buttons is drag-selectable.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 679cef00-4867-4bba-8efe-3daac6103863
---
 ts/packages/chat-ui/src/chatPanel.ts | 132 +++++++++++++++++++++++----
 1 file changed, 113 insertions(+), 19 deletions(-)

diff --git a/ts/packages/chat-ui/src/chatPanel.ts b/ts/packages/chat-ui/src/chatPanel.ts
index 26f1cc0ab3..986e98e973 100644
--- a/ts/packages/chat-ui/src/chatPanel.ts
+++ b/ts/packages/chat-ui/src/chatPanel.ts
@@ -506,6 +506,12 @@ export interface ChatPanelOptions {
     ) => void;
 }
 
+/**
+ * A caret position inside a contentEditable, as accepted by
+ * Selection.setBaseAndExtent / Range boundary APIs.
+ */
+type CaretPoint = { node: Node; offset: number };
+
 /**
  * A lightweight chat panel that renders user and agent messages.
  * Designed for embedding in a Chrome extension side panel or any
@@ -879,25 +885,7 @@ export class ChatPanel {
         textWrapper.className = "chat-input-text-wrapper";
         textWrapper.appendChild(this.textInput);
         textWrapper.appendChild(this.ghostSpan);
-        // The contentEditable .user-textarea has display:inline and
-        // min-width:1px, so when empty its native click target is a
-        // 1px stripe at the top-left of the wrapper. Clicking
-        // elsewhere in the wrapper would land on the flex container
-        // and never focus the input — leaving no caret. Forward those
-        // clicks to focus the input and place the caret at the end.
-        textWrapper.addEventListener("mousedown", (event) => {
-            const target = event.target as Node | null;
-            if (target === this.textInput) return;
-            if (target && this.textInput.contains(target)) return;
-            event.preventDefault();
-            this.textInput.focus();
-            const range = document.createRange();
-            range.selectNodeContents(this.textInput);
-            range.collapse(false);
-            const sel = window.getSelection();
-            sel?.removeAllRanges();
-            sel?.addRange(range);
-        });
+        this.setupInputPaddingSelection(textWrapper);
 
         this.inputArea.appendChild(textWrapper);
         this.inputArea.appendChild(this.sendButton);
@@ -1293,6 +1281,112 @@ export class ChatPanel {
         menu.attach(this.messageDiv, { editable: false });
     }
 
+    // The contentEditable .user-textarea is display:inline with min-width:1px,
+    // so the input box (its flex wrapper) is wider than the text run. A press
+    // in that empty padding lands on the wrapper, not the editable, so the
+    // browser can't start a text selection there - the user could only select
+    // by starting the drag on the text itself. Forward presses in the padding
+    // to the editable: focus it, anchor a caret at the position nearest the
+    // pointer, and extend the selection as the pointer moves, so the whole box
+    // (up to the buttons) is click-to-focus and drag-selectable.
+    private setupInputPaddingSelection(textWrapper: HTMLElement) {
+        // Anchor of an in-progress padding drag; null when not dragging.
+        let anchor: CaretPoint | null = null;
+        textWrapper.addEventListener("pointerdown", (event) => {
+            const target = event.target as Node | null;
+            // Presses on the text run: let the browser select natively.
+            if (
+                target === this.textInput ||
+                (target && this.textInput.contains(target))
+            ) {
+                return;
+            }
+            // Only a primary-button press drives caret placement / selection.
+            if (event.button !== 0) {
+                return;
+            }
+            event.preventDefault();
+            this.textInput.focus();
+            anchor = this.caretPointInInput(event.clientX, event.clientY);
+            this.applyInputSelection(anchor, anchor);
+            // Capture the pointer so move/up still reach us when the drag
+            // leaves the box, and so the listeners can't leak on a lost
+            // mouseup (capture is released automatically on up/cancel).
+            textWrapper.setPointerCapture(event.pointerId);
+        });
+        textWrapper.addEventListener("pointermove", (event) => {
+            if (anchor === null) {
+                return;
+            }
+            this.applyInputSelection(
+                anchor,
+                this.caretPointInInput(event.clientX, event.clientY),
+            );
+        });
+        const endDrag = () => {
+            anchor = null;
+        };
+        textWrapper.addEventListener("pointerup", endDrag);
+        textWrapper.addEventListener("pointercancel", endDrag);
+    }
+
+    private applyInputSelection(anchor: CaretPoint, focus: CaretPoint) {
+        window
+            .getSelection()
+            ?.setBaseAndExtent(
+                anchor.node,
+                anchor.offset,
+                focus.node,
+                focus.offset,
+            );
+    }
+
+    // Map a viewport point to a caret position (node + offset) inside the
+    // editable. When the point falls outside the editable (empty padding, the
+    // ghost preview, or off the input mid-drag), clamp to the nearest text
+    // edge by geometry - so dragging left/above the text selects toward the
+    // start and right/below toward the end - returning a text-node boundary
+    // that matches a real caret rather than an element-index boundary.
+    private caretPointInInput(clientX: number, clientY: number): CaretPoint {
+        const doc = document as Document & {
+            caretRangeFromPoint?(x: number, y: number): Range | null;
+            caretPositionFromPoint?(
+                x: number,
+                y: number,
+            ): { offsetNode: Node; offset: number } | null;
+        };
+        let node: Node | null = null;
+        let offset = 0;
+        const range = doc.caretRangeFromPoint?.(clientX, clientY);
+        if (range) {
+            node = range.startContainer;
+            offset = range.startOffset;
+        } else {
+            const pos = doc.caretPositionFromPoint?.(clientX, clientY);
+            if (pos) {
+                node = pos.offsetNode;
+                offset = pos.offset;
+            }
+        }
+        if (node && this.textInput.contains(node)) {
+            return { node, offset };
+        }
+        const rect = this.textInput.getBoundingClientRect();
+        const atEnd =
+            clientY > rect.bottom ||
+            (clientY >= rect.top && clientX >= rect.left);
+        const edge = atEnd
+            ? this.textInput.lastChild
+            : this.textInput.firstChild;
+        if (edge && edge.nodeType === Node.TEXT_NODE) {
+            return { node: edge, offset: atEnd ? (edge as Text).length : 0 };
+        }
+        return {
+            node: this.textInput,
+            offset: atEnd ? this.textInput.childNodes.length : 0,
+        };
+    }
+
     private setupInputHandlers() {
         this.textInput.addEventListener("keydown", (e) => {
             // Give the partial-completion (host-driven) controller first

From e1016bc0dd04f4c27fe9c080c493717effd42676 Mon Sep 17 00:00:00 2001
From: George Ng <georgeng@Microsoft.com>
Date: Mon, 20 Jul 2026 21:13:25 -0700
Subject: [PATCH 03/15] Improve reasoning action UI (Thinking blocks, working
 rail, spacing)

Shared chat-ui changes so both the VS Code webview and the Electron shell
benefit:

- Auto-minimize completed reasoning: AgentMessageContainer.collapseReasoning()
  drops the <details> 'open' when a step is superseded or the request
  completes, so finished 'Thinking' blocks collapse while the active step
  stays expanded. Guarded per-element (WeakSet) so a user-reopened block is
  not re-collapsed. Not triggered on the reconnect-to-queued path.
- Reasoning working rail is light purple (data-variant='reasoning') instead
  of the generic blue, detected from the reasoning source in
  getOrCreateAgentContainer so streaming/step/block bubbles all read as
  reasoning.
- Moved the '.reasoning-thinking' box structure + padding into shared
  chat.css (more inner padding so wrapped bullet/list lines are not clipped);
  vscode-theme.css keeps only VS Code color/font theming.
- Final reasoning answer gets a separating gap ('.chat-reasoning-answer'),
  applied to the last committed step so a post-answer status block does not
  steal it.

Adds chat-ui unit tests for the rail variant, supersede/completion collapse,
the answer gap, and the reconnect no-collapse case.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 679cef00-4867-4bba-8efe-3daac6103863
---
 ts/packages/chat-ui/src/chatPanel.ts          |  92 +++++++++-
 ts/packages/chat-ui/styles/chat.css           |  44 +++++
 ts/packages/chat-ui/test/chatPanel.spec.ts    | 163 ++++++++++++++++++
 .../vscode-shell/src/webview/vscode-theme.css |  24 +--
 4 files changed, 305 insertions(+), 18 deletions(-)

diff --git a/ts/packages/chat-ui/src/chatPanel.ts b/ts/packages/chat-ui/src/chatPanel.ts
index 986e98e973..69e54aed46 100644
--- a/ts/packages/chat-ui/src/chatPanel.ts
+++ b/ts/packages/chat-ui/src/chatPanel.ts
@@ -1822,11 +1822,17 @@ export class ChatPanel {
      */
     private clearAgentRunning(threadId: string): void {
         this.agentRunningRequestIds.delete(threadId);
-        this.threadContainers.get(threadId)?.clearRunning();
+        // The request finished: collapse every step's reasoning "Thinking"
+        // block (including the last, still-expanded one) so completed reasoning
+        // minimizes.
+        const current = this.threadContainers.get(threadId);
+        current?.clearRunning();
+        current?.collapseReasoning();
         const all = this.requestAgentContainers.get(threadId);
         if (all) {
             for (const container of all) {
                 container.clearRunning();
+                container.collapseReasoning();
             }
         }
     }
@@ -2489,6 +2495,10 @@ export class ChatPanel {
                 source.startsWith("dispatcher.reasoningAction")
             ) {
                 stepContainer.overrideSource(source, sourceIcon);
+                // Also covers a reused existing bubble (e.g. a generic
+                // "Executing action" temporary) that never passed through the
+                // reasoning detection in getOrCreateAgentContainer.
+                stepContainer.markReasoning();
             }
             if (requestId) {
                 const start = this.requestStartByRequestId.get(requestId);
@@ -2508,6 +2518,7 @@ export class ChatPanel {
                 for (const prior of priorSteps) {
                     if (prior !== stepContainer) {
                         prior.clearRunning();
+                        prior.collapseReasoning();
                     }
                 }
             }
@@ -2578,8 +2589,17 @@ export class ChatPanel {
         requestId: string | undefined,
     ): AgentMessageContainer {
         const threadId = this.resolveThreadId(requestId);
+        // A reasoning display carries a "dispatcher.reasoningAction.*" source;
+        // mark the bubble so its working rail reads as reasoning (purple)
+        // whether the content streams (temporary), commits as a step, or
+        // arrives as a block.
+        const isReasoning =
+            source?.startsWith("dispatcher.reasoningAction") ?? false;
         const existing = this.threadContainers.get(threadId);
         if (existing) {
+            if (isReasoning) {
+                existing.markReasoning();
+            }
             return existing;
         }
         // sourceIcon="🤖"). Without this, the bubble would be created with
@@ -2618,6 +2638,9 @@ export class ChatPanel {
             anchor,
         );
         this.threadContainers.set(threadId, container);
+        if (isReasoning) {
+            container.markReasoning();
+        }
         container.div.dataset.requestId = threadId;
         if (this.developerMode) {
             this.attachDeleteControl(container.div, threadId, "agent");
@@ -3510,6 +3533,17 @@ export class ChatPanel {
             (requestContainers.length > 0
                 ? requestContainers[requestContainers.length - 1]
                 : undefined);
+        // For a reasoning thread with a trail of "Thinking"/tool steps, give
+        // the final answer step a gap separating it from the reasoning above.
+        // Target the last committed STEP (the answer), not the newest
+        // container, which can be a post-answer status block (e.g. copilot's
+        // "Task flow registered").
+        const answerStep = requestContainers.find(
+            (c) => c.div === this.lastStepAnchorByThread.get(threadId),
+        );
+        if (requestContainers.length > 1 && answerStep?.isReasoning()) {
+            answerStep.setReasoningAnswer(true);
+        }
         const firstMessageMs = this.firstMessageMsByRequestId.get(threadId);
         if (result?.cancelled) {
             // Mirror Electron's "⚠ Cancelled" status, anchored to the
@@ -4976,6 +5010,8 @@ class AgentMessageContainer {
     private readonly timestampDiv: HTMLDivElement;
     private feedbackWidget?: FeedbackWidget;
     private statusRail?: HTMLDivElement;
+    private reasoning = false;
+    private readonly collapsedReasoning = new WeakSet<HTMLDetailsElement>();
     private lastAppendMode?: DisplayAppendMode;
     // Mirrors the shell's swapContent pattern: when action JSON is set,
     // clicking the agent name toggles the message body between the
@@ -5422,6 +5458,11 @@ class AgentMessageContainer {
         // Ensure the rail reads as "running" even if it was previously showing
         // the muted "unknown" state (setUnknown reuses this same rail element).
         rail.dataset.status = "running";
+        if (this.reasoning) {
+            rail.dataset.variant = "reasoning";
+        } else {
+            delete rail.dataset.variant;
+        }
         const stateZone = rail.querySelector<HTMLElement>(
             ":scope > .chat-status-state-zone",
         )!;
@@ -5463,6 +5504,55 @@ class AgentMessageContainer {
         this.statusRail = undefined;
     }
 
+    /**
+     * Mark this bubble as part of a reasoning ("Thinking") flow so its working
+     * rail reads as reasoning (light purple) rather than a generic running
+     * request (blue). Updates an already-rendered rail immediately, since the
+     * rail is stamped before the reasoning source is known.
+     */
+    public markReasoning() {
+        this.reasoning = true;
+        if (this.statusRail) {
+            this.statusRail.dataset.variant = "reasoning";
+        }
+    }
+
+    /** Whether this bubble belongs to a reasoning ("Thinking") flow. */
+    public isReasoning(): boolean {
+        return this.reasoning;
+    }
+
+    /**
+     * Collapse this step's reasoning "Thinking" blocks once it is no longer
+     * active (superseded by the next step, or the request completed) so
+     * finished reasoning minimizes while the active step stays expanded. Each
+     * block is collapsed at most once - tracked per element - so a block the
+     * user manually re-opens is not re-collapsed by a later pass, while a block
+     * added after an earlier collapse still minimizes.
+     */
+    public collapseReasoning() {
+        this.bodyDiv
+            .querySelectorAll<HTMLDetailsElement>(
+                "details.reasoning-thinking[open]",
+            )
+            .forEach((details) => {
+                if (this.collapsedReasoning.has(details)) {
+                    return;
+                }
+                this.collapsedReasoning.add(details);
+                details.removeAttribute("open");
+            });
+    }
+
+    /**
+     * Tag this reasoning step as the final prose answer rather than a
+     * "Thinking"/tool trail step, so it renders with a gap separating it from
+     * the reasoning above it.
+     */
+    public setReasoningAnswer(isAnswer: boolean) {
+        this.div.classList.toggle("chat-reasoning-answer", isAnswer);
+    }
+
     /**
      * Swap the "working" rail for a muted "status unknown" state: no spinner,
      * no Stop button. Used when the connection drops mid-request — we can't
diff --git a/ts/packages/chat-ui/styles/chat.css b/ts/packages/chat-ui/styles/chat.css
index ea937abb7c..d50c7991af 100644
--- a/ts/packages/chat-ui/styles/chat.css
+++ b/ts/packages/chat-ui/styles/chat.css
@@ -1601,6 +1601,45 @@ table.sc-kv-table.sc-card-fields {
   margin-left: 6px;
 }
 
+/* Reasoning "Thinking" block (shared). The reasoning engine emits
+   <details class="reasoning-thinking" open><summary>Thinking</summary>
+   <pre>...</pre></details> (dispatcher reasoning/*.ts). Group it into a
+   subtle box and wrap the prose (it is prose, not code) with room so wrapped
+   bullet/list lines are not clipped against the border. chat-ui owns this
+   default structure + padding; hosts (the VS Code theme overlay, the Electron
+   shell) override the colors/font. Completed blocks are collapsed in JS
+   (AgentMessageContainer.collapseReasoning drops the `open` attribute). */
+.reasoning-thinking {
+  margin: 4px 0;
+  border: 1px solid rgba(127, 127, 127, 0.25);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.reasoning-thinking > summary {
+  padding: 4px 12px;
+  cursor: pointer;
+  font-size: 12px;
+  color: #7a7a7a;
+  background-color: rgba(127, 127, 127, 0.08);
+  user-select: none;
+}
+.reasoning-thinking > pre {
+  margin: 0;
+  padding: 10px 14px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-x: hidden;
+  max-height: none;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+/* Gap that separates a reasoning answer (prose) from the "Thinking"/tool
+   trail above it. */
+.chat-reasoning-answer {
+  margin-top: 12px;
+}
+
 /* Clickable timestamp to toggle action details */
 .chat-timestamp-toggle {
   cursor: pointer;
@@ -1775,6 +1814,11 @@ table.sc-kv-table.sc-card-fields {
 .chat-message-status-rail[data-status="running"] {
   background: #70b0e0;
 }
+/* Reasoning requests read as reasoning (light purple) rather than a generic
+   running request (blue). */
+.chat-message-status-rail[data-status="running"][data-variant="reasoning"] {
+  background: #b39ddb;
+}
 .chat-message-status-rail[data-status="queued"] {
   background: #eabf63;
 }
diff --git a/ts/packages/chat-ui/test/chatPanel.spec.ts b/ts/packages/chat-ui/test/chatPanel.spec.ts
index de719a70b6..27fca0e912 100644
--- a/ts/packages/chat-ui/test/chatPanel.spec.ts
+++ b/ts/packages/chat-ui/test/chatPanel.spec.ts
@@ -317,6 +317,169 @@ describe("agent running rail", () => {
     });
 });
 
+describe("reasoning UI", () => {
+    const REASONING = "dispatcher.reasoningAction.copilot";
+    const thinking = (text = "reasoning") => ({
+        type: "html" as const,
+        content:
+            `<details class="reasoning-thinking" open><summary>Thinking</summary>` +
+            `<pre>${text}</pre></details>`,
+    });
+
+    function reasoningBubbles(root: HTMLElement): HTMLElement[] {
+        return Array.from(
+            root.querySelectorAll<HTMLElement>(
+                '.chat-message-container-agent[data-request-id="req-1"]',
+            ),
+        );
+    }
+
+    function thinkingByText(
+        root: HTMLElement,
+    ): Map<string, HTMLDetailsElement> {
+        const map = new Map<string, HTMLDetailsElement>();
+        root.querySelectorAll<HTMLDetailsElement>(
+            "details.reasoning-thinking",
+        ).forEach((d) => map.set(d.querySelector("pre")?.textContent ?? "", d));
+        return map;
+    }
+
+    it("marks the reasoning working rail as reasoning (purple), not a plain one", () => {
+        const { root, panel } = makePanel({ onCancel: jest.fn() });
+        panel.addUserMessage("hi", "req-1");
+        panel.setProcessing("req-1");
+        panel.addAgentMessage(
+            thinking(),
+            REASONING,
+            undefined,
+            "step",
+            "req-1",
+        );
+        expect(
+            root.querySelector(
+                '.chat-message-status-rail[data-status="running"][data-variant="reasoning"]',
+            ),
+        ).not.toBeNull();
+
+        const plain = makePanel({ onCancel: jest.fn() });
+        plain.panel.addUserMessage("hi", "req-1");
+        plain.panel.setProcessing("req-1");
+        plain.panel.addAgentMessage("hi", "agent", undefined, "step", "req-1");
+        expect(
+            plain.root.querySelector(".chat-message-status-rail[data-variant]"),
+        ).toBeNull();
+    });
+
+    it("collapses a superseded Thinking block but keeps the active one open", () => {
+        const { root, panel } = makePanel({ onCancel: jest.fn() });
+        panel.addUserMessage("hi", "req-1");
+        panel.setProcessing("req-1");
+        panel.addAgentMessage(
+            thinking("first"),
+            REASONING,
+            undefined,
+            "step",
+            "req-1",
+        );
+        panel.addAgentMessage(
+            thinking("second"),
+            REASONING,
+            undefined,
+            "step",
+            "req-1",
+        );
+
+        const details = thinkingByText(root);
+        expect(details.get("first")?.hasAttribute("open")).toBe(false);
+        expect(details.get("second")?.hasAttribute("open")).toBe(true);
+    });
+
+    it("collapses all Thinking blocks and gaps the answer on completion", () => {
+        const { root, panel } = makePanel({ onCancel: jest.fn() });
+        panel.addUserMessage("hi", "req-1");
+        panel.setProcessing("req-1");
+        panel.addAgentMessage(
+            thinking(),
+            REASONING,
+            undefined,
+            "step",
+            "req-1",
+        );
+        panel.addAgentMessage(
+            "the answer",
+            REASONING,
+            undefined,
+            "step",
+            "req-1",
+        );
+        panel.completeRequest("req-1");
+
+        for (const d of root.querySelectorAll<HTMLDetailsElement>(
+            "details.reasoning-thinking",
+        )) {
+            expect(d.hasAttribute("open")).toBe(false);
+        }
+        // The answer bubble (prose) gets the separating gap; the "Thinking"
+        // trail bubble does not.
+        const bubbles = reasoningBubbles(root);
+        const answer = bubbles.find((b) =>
+            b.textContent?.includes("the answer"),
+        );
+        const trail = bubbles.find((b) =>
+            b.querySelector("details.reasoning-thinking"),
+        );
+        expect(answer?.classList.contains("chat-reasoning-answer")).toBe(true);
+        expect(trail?.classList.contains("chat-reasoning-answer")).toBe(false);
+    });
+
+    it("collapses a still-active Thinking block on completion", () => {
+        const { root, panel } = makePanel({ onCancel: jest.fn() });
+        panel.addUserMessage("hi", "req-1");
+        panel.setProcessing("req-1");
+        // A single step is never superseded, so completion is the only thing
+        // that can collapse it.
+        panel.addAgentMessage(
+            thinking(),
+            REASONING,
+            undefined,
+            "step",
+            "req-1",
+        );
+        const details = root.querySelector<HTMLDetailsElement>(
+            "details.reasoning-thinking",
+        );
+        expect(details?.hasAttribute("open")).toBe(true);
+
+        panel.completeRequest("req-1");
+        expect(details?.hasAttribute("open")).toBe(false);
+    });
+
+    it("keeps Thinking expanded when a request is marked/cleared unknown", () => {
+        const { root, panel } = makePanel({ onCancel: jest.fn() });
+        panel.addUserMessage("hi", "req-1");
+        panel.setProcessing("req-1");
+        panel.addAgentMessage(
+            thinking(),
+            REASONING,
+            undefined,
+            "step",
+            "req-1",
+        );
+        expect(
+            root
+                .querySelector<HTMLDetailsElement>("details.reasoning-thinking")
+                ?.hasAttribute("open"),
+        ).toBe(true);
+        panel.setRequestUnknown("req-1");
+        panel.clearRequestUnknown("req-1");
+        expect(
+            root
+                .querySelector<HTMLDetailsElement>("details.reasoning-thinking")
+                ?.hasAttribute("open"),
+        ).toBe(true);
+    });
+});
+
 describe("roadrunner (explained) placement", () => {
     it("anchors the icon inside the content and tooltip on the bubble body", () => {
         const { root, panel } = makePanel();
diff --git a/ts/packages/vscode-shell/src/webview/vscode-theme.css b/ts/packages/vscode-shell/src/webview/vscode-theme.css
index df7f76c597..d81375d4a9 100644
--- a/ts/packages/vscode-shell/src/webview/vscode-theme.css
+++ b/ts/packages/vscode-shell/src/webview/vscode-theme.css
@@ -342,28 +342,20 @@
   overflow-y: auto;
 }
 
-/* 5. Reasoning "Thinking" is prose, not code. The engine emits it as
-      <details class="reasoning-thinking"><summary>Thinking</summary>
-      <pre>...</pre></details> (dispatcher reasoning/copilot.ts) and the
-      base leaves the <pre> at the UA `white-space: pre` default, so long
-      lines scroll. Group it into a subtle box and wrap the text (more
-      specific than rule 4, so wrapping wins over the code-scroll rule). */
+/* 5. Reasoning "Thinking" box: the shared chat-ui base (chat.css) owns the
+      box, padding and prose wrapping (so the Electron shell gets them too).
+      Here we (a) theme the border/summary/font to match VS Code, and
+      (b) re-assert the prose wrapping on the <pre> at a higher specificity
+      than rule 4 above, so the reasoning text wraps instead of inheriting the
+      code-block horizontal scroll. */
 .chat-message-content .reasoning-thinking {
-  margin: 2px 0;
-  border: 1px solid var(--vscode-editorWidget-border, rgba(127, 127, 127, 0.25));
-  border-radius: 6px;
-  overflow: hidden;
+  border-color: var(--vscode-editorWidget-border, rgba(127, 127, 127, 0.25));
 }
 .chat-message-content .reasoning-thinking > summary {
-  padding: 3px 8px;
-  cursor: pointer;
-  font-size: 12px;
   color: var(--vscode-descriptionForeground, gray);
   background-color: rgba(127, 127, 127, 0.06);
 }
 .chat-message-content .reasoning-thinking > pre {
-  margin: 0;
-  padding: 8px;
   white-space: pre-wrap;
   word-break: break-word;
   overflow-x: hidden;
@@ -374,8 +366,6 @@
     "Courier New",
     monospace
   );
-  font-size: 12px;
-  line-height: 1.4;
 }
 
 /* 6. Slim, theme-colored scrollbars for the remaining scroll areas: code

From 468b43934dbc02608d4e231afb4b2e90e86eb881 Mon Sep 17 00:00:00 2001
From: George Ng <georgeng@Microsoft.com>
Date: Mon, 20 Jul 2026 23:47:46 -0700
Subject: [PATCH 04/15] Reasoning UI: list/heading spacing, bigger answer gap,
 expand-message view

- Markdown list markers now align with the paragraph text (they were
  clipped/too tight): restore list indent + heading margins that the
  vscode-shell global reset stripped, using list-style-position:inside so
  bullets/numbers start at the text's left edge. Scoped to classless
  (Markdown) lists so structured-content .sc-list is untouched.
- Bump the gap before the reasoning answer (12px -> 18px) so the final
  response reads as separated from the Thinking/tool trail.
- Add an 'Expand message' action button (maximize icon) between copy and
  thumbs-up that opens the message in a full-window overlay for easier
  reading. The live content is moved into the overlay (not cloned) so links
  and other interactivity keep working, then moved back on close; dialog
  semantics, single-overlay guard, Escape/backdrop/close dismissal, and
  focus restore. Electron gets a dark panel override.

Shared in chat-ui so the Electron shell benefits too. Adds feedbackWidget
tests for the expand button + overlay lifecycle.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 679cef00-4867-4bba-8efe-3daac6103863
---
 ts/packages/chat-ui/src/feedbackWidget.ts     |  79 +++++++++-
 ts/packages/chat-ui/src/icons.ts              |   8 ++
 ts/packages/chat-ui/styles/chat.css           |  91 +++++++++++-
 .../chat-ui/test/feedbackWidget.spec.ts       | 136 ++++++++++++++++++
 .../shell/src/renderer/assets/styles.less     |   8 ++
 .../vscode-shell/src/webview/vscode-theme.css |   8 ++
 6 files changed, 323 insertions(+), 7 deletions(-)
 create mode 100644 ts/packages/chat-ui/test/feedbackWidget.spec.ts

diff --git a/ts/packages/chat-ui/src/feedbackWidget.ts b/ts/packages/chat-ui/src/feedbackWidget.ts
index b75a6af2b4..9b3a3a02b0 100644
--- a/ts/packages/chat-ui/src/feedbackWidget.ts
+++ b/ts/packages/chat-ui/src/feedbackWidget.ts
@@ -2,10 +2,10 @@
 // Licensed under the MIT License.
 
 /**
- * Feedback widget. Mirrors packages/shell/src/renderer/src/feedbackWidget.ts —
- * keep these in sync when changing trigger DOM, popover layout, or the
- * CSS class names so the styling can stay shared between the Electron
- * shell and the Chrome / vscode webview hosts.
+ * Feedback widget. Renders the per-message action row (copy / expand / rate)
+ * plus the feedback popover. Shared by the Electron shell (via chat-ui's
+ * ChatPanel) and the Chrome / vscode webview hosts, so keep the trigger DOM and
+ * CSS class names stable when changing it.
  */
 
 import type {
@@ -16,9 +16,11 @@ import type {
 import {
     iconCheck,
     iconCopy,
+    iconExpand,
     iconMore,
     iconThumbsDown,
     iconThumbsUp,
+    iconX,
 } from "./icons.js";
 
 export type FeedbackUIVariant = "footer-always";
@@ -111,6 +113,14 @@ export class FeedbackWidget {
                 () => this.copyMessage(copyBtn),
             );
             root.appendChild(copyBtn);
+
+            const expandBtn = makeIconButton(
+                "expand",
+                "Expand message",
+                iconExpand(),
+                () => openMessageExpand(this.host.messageDiv),
+            );
+            root.appendChild(expandBtn);
         }
 
         const thumbsUp = makeIconButton(
@@ -311,6 +321,67 @@ function makeIconButton(
     return btn;
 }
 
+// The single expand overlay currently open (its disposer), so a second click
+// replaces rather than stacks overlays.
+let activeExpand: (() => void) | undefined;
+
+// Open a message's rendered content in a full-window overlay for easier reading
+// of long responses. The live content nodes are moved into the overlay (not
+// cloned) so links, tables and other interactivity keep working, then moved
+// back when it closes. Dismissed by the close button, Escape, or a backdrop
+// click.
+function openMessageExpand(sourceEl: HTMLElement) {
+    activeExpand?.();
+    const previousFocus = document.activeElement as HTMLElement | null;
+
+    const overlay = document.createElement("div");
+    overlay.className = "chat-expand-overlay";
+    overlay.tabIndex = -1;
+
+    const body = document.createElement("div");
+    body.className = "chat-expand-body chat-message-content";
+    body.append(...Array.from(sourceEl.childNodes));
+
+    const close = () => {
+        document.removeEventListener("keydown", onKey, true);
+        // Return the content to its bubble before removing the overlay.
+        sourceEl.append(...Array.from(body.childNodes));
+        overlay.remove();
+        activeExpand = undefined;
+        previousFocus?.focus?.();
+    };
+    const onKey = (e: KeyboardEvent) => {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            close();
+        }
+    };
+
+    const panel = document.createElement("div");
+    panel.className = "chat-expand-panel";
+    panel.setAttribute("role", "dialog");
+    panel.setAttribute("aria-modal", "true");
+    panel.setAttribute("aria-label", "Expanded message");
+
+    const header = document.createElement("div");
+    header.className = "chat-expand-header";
+    const title = document.createElement("span");
+    title.textContent = "Message";
+    const closeBtn = makeIconButton("close", "Close", iconX(), close);
+    header.append(title, closeBtn);
+
+    panel.append(header, body);
+    overlay.appendChild(panel);
+    overlay.addEventListener("click", (e) => {
+        if (e.target === overlay) close();
+    });
+
+    document.addEventListener("keydown", onKey, true);
+    document.body.appendChild(overlay);
+    activeExpand = close;
+    closeBtn.focus();
+}
+
 function formatCategory(c: UserFeedbackCategory): string {
     switch (c) {
         case "wrong-agent":
diff --git a/ts/packages/chat-ui/src/icons.ts b/ts/packages/chat-ui/src/icons.ts
index 9d93fcceca..2bcb7e05e0 100644
--- a/ts/packages/chat-ui/src/icons.ts
+++ b/ts/packages/chat-ui/src/icons.ts
@@ -86,3 +86,11 @@ export function iconStop() {
         `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true"><rect x="6" y="6" width="12" height="12" rx="2"></rect></svg>`,
     );
 }
+
+export function iconExpand() {
+    // "maximize": diagonal arrows to the corners; reads as "open in a
+    // larger view".
+    return fromSvg(
+        `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>`,
+    );
+}
diff --git a/ts/packages/chat-ui/styles/chat.css b/ts/packages/chat-ui/styles/chat.css
index d50c7991af..91a4227afa 100644
--- a/ts/packages/chat-ui/styles/chat.css
+++ b/ts/packages/chat-ui/styles/chat.css
@@ -949,6 +949,44 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
+/* Markdown typography inside a message. Some hosts (the vscode-shell) reset
+   element margins/padding globally (media/chat.css `* {}`), which strips the
+   UA list indent and heading spacing, so set them here (shared, so the
+   Electron shell stays consistent too). Markers sit at the paragraph's left
+   edge (list-style-position: inside) so bullets/numbers line up with the text
+   rather than hanging into - and getting clipped by - the bubble padding.
+   Scoped to classless (Markdown) lists so structured-content lists (.sc-list,
+   which owns its own indent) are left alone. */
+.chat-message-content ul:not([class]),
+.chat-message-content ol:not([class]) {
+  margin: 0.4em 0;
+  padding-left: 0;
+  list-style-position: inside;
+}
+.chat-message-content ul:not([class]) > li,
+.chat-message-content ol:not([class]) > li {
+  margin: 0.15em 0;
+}
+/* Loose lists wrap each item's text in a <p>; keep it on the marker's line. */
+.chat-message-content ul:not([class]) > li > p,
+.chat-message-content ol:not([class]) > li > p {
+  display: inline;
+  margin: 0;
+}
+.chat-message-content h1,
+.chat-message-content h2,
+.chat-message-content h3,
+.chat-message-content h4,
+.chat-message-content h5,
+.chat-message-content h6 {
+  margin: 0.9em 0 0.3em;
+  line-height: 1.3;
+}
+/* No leading gap when a heading opens the message. */
+.chat-message-content > :is(h1, h2, h3, h4, h5, h6):first-child {
+  margin-top: 0;
+}
+
 .chat-message-kind-status {
   font-style: italic;
   color: grey;
@@ -1019,6 +1057,53 @@
 }
 
 /* Full-window image lightbox (click an image in a bubble to open). */
+/* =========================================================================
+   Message expand overlay: a full-window view of a single message's content,
+   opened from the "Expand" action button for easier reading of long replies.
+   ========================================================================= */
+.chat-expand-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: var(--chat-lightbox-backdrop, rgba(0, 0, 0, 0.6));
+  outline: none;
+}
+.chat-expand-panel {
+  display: flex;
+  flex-direction: column;
+  width: min(900px, 100%);
+  max-height: 100%;
+  background: var(--chat-expand-background, #fff);
+  color: inherit;
+  border: 1px solid var(--chat-expand-border, rgba(127, 127, 127, 0.3));
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  overflow: hidden;
+}
+.chat-expand-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex: 0 0 auto;
+  padding: 6px 6px 6px 14px;
+  border-bottom: 1px solid var(--chat-expand-border, rgba(127, 127, 127, 0.25));
+  font-weight: 600;
+}
+/* The body reuses .chat-message-content for typography; flatten its bubble
+   chrome and give it room to scroll. */
+.chat-expand-body {
+  flex: 1 1 auto;
+  overflow: auto;
+  padding: 16px 18px;
+  box-shadow: none;
+  border-radius: 0;
+}
+
 .chat-lightbox-overlay {
   position: fixed;
   inset: 0;
@@ -1634,10 +1719,10 @@ table.sc-kv-table.sc-card-fields {
   line-height: 1.5;
 }
 
-/* Gap that separates a reasoning answer (prose) from the "Thinking"/tool
-   trail above it. */
+/* Gap (a blank line) that separates a reasoning answer (prose) from the
+   "Thinking"/tool trail above it. */
 .chat-reasoning-answer {
-  margin-top: 12px;
+  margin-top: 18px;
 }
 
 /* Clickable timestamp to toggle action details */
diff --git a/ts/packages/chat-ui/test/feedbackWidget.spec.ts b/ts/packages/chat-ui/test/feedbackWidget.spec.ts
new file mode 100644
index 0000000000..dc84db4d03
--- /dev/null
+++ b/ts/packages/chat-ui/test/feedbackWidget.spec.ts
@@ -0,0 +1,136 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { describe, it, expect, afterEach, jest } from "@jest/globals";
+import { FeedbackWidget } from "../src/feedbackWidget.js";
+import type { FeedbackController } from "../src/feedbackWidget.js";
+
+// FeedbackWidget renders the per-message action row (copy / expand / rate).
+// These tests run under jsdom (see jest.config.cjs).
+
+function makeWidget(messageHtml = "<p>hello</p>") {
+    const container = document.createElement("div");
+    const messageDiv = document.createElement("div");
+    messageDiv.innerHTML = messageHtml;
+    document.body.appendChild(container);
+    const controller: FeedbackController = {
+        getCurrentFeedback: jest.fn(() => null),
+        submit: jest.fn(async () => undefined),
+    };
+    const widget = new FeedbackWidget(
+        {
+            container,
+            bodyDiv: document.createElement("div"),
+            headerDiv: document.createElement("div"),
+            messageDiv,
+        },
+        controller,
+        "footer-always",
+    );
+    return { container, messageDiv, widget };
+}
+
+afterEach(() => {
+    document.body.replaceChildren();
+});
+
+describe("FeedbackWidget expand", () => {
+    it("places the expand button after copy and before thumbs-up", () => {
+        const { container } = makeWidget();
+        const actions = Array.from(
+            container.querySelectorAll<HTMLElement>(".chat-action-button"),
+        ).map((b) => b.dataset.action);
+        expect(actions).toEqual([
+            "copy",
+            "expand",
+            "thumbs-up",
+            "thumbs-down",
+            "more",
+        ]);
+    });
+
+    it("moves the message content into the overlay and back when closed", () => {
+        const { container, messageDiv } = makeWidget("<p>expanded content</p>");
+        container
+            .querySelector<HTMLButtonElement>('[data-action="expand"]')!
+            .click();
+
+        const overlay = document.querySelector(".chat-expand-overlay");
+        expect(overlay?.textContent).toContain("expanded content");
+        // Content is moved out of the bubble while expanded...
+        expect(messageDiv.textContent).toBe("");
+
+        document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+        expect(document.querySelector(".chat-expand-overlay")).toBeNull();
+        // ...and returned to it on close.
+        expect(messageDiv.textContent).toContain("expanded content");
+    });
+
+    it("closes on a backdrop click but stays open on a panel click", () => {
+        const { container } = makeWidget();
+        container
+            .querySelector<HTMLButtonElement>('[data-action="expand"]')!
+            .click();
+        const overlay = document.querySelector<HTMLElement>(
+            ".chat-expand-overlay",
+        )!;
+        // Click inside the panel: stays open.
+        overlay
+            .querySelector(".chat-expand-panel")!
+            .dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        expect(document.querySelector(".chat-expand-overlay")).not.toBeNull();
+        // Click the backdrop (the overlay itself): closes.
+        overlay.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        expect(document.querySelector(".chat-expand-overlay")).toBeNull();
+    });
+
+    it("closes on the close button", () => {
+        const { container } = makeWidget();
+        container
+            .querySelector<HTMLButtonElement>('[data-action="expand"]')!
+            .click();
+        document
+            .querySelector<HTMLButtonElement>(
+                '.chat-expand-overlay [data-action="close"]',
+            )!
+            .click();
+        expect(document.querySelector(".chat-expand-overlay")).toBeNull();
+    });
+
+    it("replaces rather than stacks a second overlay", () => {
+        const { container } = makeWidget();
+        const btn = container.querySelector<HTMLButtonElement>(
+            '[data-action="expand"]',
+        )!;
+        btn.click();
+        btn.click();
+        expect(document.querySelectorAll(".chat-expand-overlay").length).toBe(
+            1,
+        );
+    });
+
+    it("preserves interactivity by moving (not cloning) the content", () => {
+        const clicked = jest.fn();
+        const { container, messageDiv } = makeWidget("");
+        const action = document.createElement("button");
+        action.textContent = "action";
+        action.addEventListener("click", () => clicked());
+        messageDiv.appendChild(action);
+
+        container
+            .querySelector<HTMLButtonElement>('[data-action="expand"]')!
+            .click();
+        const overlay = document.querySelector<HTMLElement>(
+            ".chat-expand-overlay",
+        )!;
+        const moved = Array.from(overlay.querySelectorAll("button")).find(
+            (b) => b.textContent === "action",
+        )!;
+        // Same node moved in (not a clone), so its listener still fires.
+        expect(moved).toBe(action);
+        moved.click();
+        expect(clicked).toHaveBeenCalledTimes(1);
+
+        document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+    });
+});
diff --git a/ts/packages/shell/src/renderer/assets/styles.less b/ts/packages/shell/src/renderer/assets/styles.less
index c42fad8777..610001589e 100644
--- a/ts/packages/shell/src/renderer/assets/styles.less
+++ b/ts/packages/shell/src/renderer/assets/styles.less
@@ -168,6 +168,14 @@ body {
     color: #ccc;
   }
 
+  // Expand-message overlay panel: chat-ui's shared base only ships a
+  // light-mode fallback, so give the panel the dark shell surface here.
+  .chat-expand-panel {
+    background-color: #232338;
+    color: #e8e8f0;
+    border-color: #3a3a50;
+  }
+
   .chat-message-metrics-agent {
     background-color: #232338;
   }
diff --git a/ts/packages/vscode-shell/src/webview/vscode-theme.css b/ts/packages/vscode-shell/src/webview/vscode-theme.css
index d81375d4a9..8f1cfd73be 100644
--- a/ts/packages/vscode-shell/src/webview/vscode-theme.css
+++ b/ts/packages/vscode-shell/src/webview/vscode-theme.css
@@ -389,6 +389,14 @@
   background-color: transparent;
 }
 
+/* Message expand overlay: theme the panel to match the editor (the shared
+   base in chat-ui/styles/chat.css only sets a light-mode fallback). */
+.chat-expand-panel {
+  background: var(--vscode-editor-background);
+  color: var(--vscode-foreground);
+  border-color: var(--vscode-widget-border, rgba(127, 127, 127, 0.3));
+}
+
 /* ── In-webview camera capture overlay (vscode-shell only) ──────────
    Mirrors the Electron shell's CameraView. Built by webview/cameraView.ts and
    toggled by the ChatPanel camera button (chat-ui imageCaptureProvider.

From f22a17dadf56cb37905b665aad3c062a4d39a0e8 Mon Sep 17 00:00:00 2001
From: George Ng <georgeng@Microsoft.com>
Date: Tue, 21 Jul 2026 01:37:59 -0700
Subject: [PATCH 05/15] Expand message: open in a movable VS Code editor panel

- Change the expand icon to a window-maximize (corner-bracket) glyph.
- Add an optional PlatformAdapter.expandMessage host hook. The feedback
  widget's expand button calls it and only falls back to the in-page
  overlay when the host doesn't handle it (Electron / Chrome keep the
  overlay). Messages backed by an <iframe> also stay on the overlay
  (they don't survive re-sanitization).
- vscode-shell: the webview posts the (already-sanitized) content to the
  extension, which opens a separate editor panel (ViewColumn.Beside) the
  user can move/snap. The panel HTML is static; a dedicated expand.js
  bundle receives the content over postMessage and re-sanitizes it with
  DOMPurify before rendering, so no HTML is built from the message on the
  extension side. Strict CSP (img-src self+data only, form-action/base-uri
  none), mtime cache-busting, links routed to openExternal, and paginated
  table rows revealed for a complete static read view.

Adds chat-ui tests for the host-callback path + overlay fallback.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 679cef00-4867-4bba-8efe-3daac6103863
---
 ts/packages/chat-ui/src/chatPanel.ts          | 13 +++
 ts/packages/chat-ui/src/feedbackWidget.ts     | 14 ++-
 ts/packages/chat-ui/src/icons.ts              |  6 +-
 ts/packages/chat-ui/src/platformAdapter.ts    |  9 ++
 ts/packages/chat-ui/styles/chat.css           | 20 ++++
 .../chat-ui/test/feedbackWidget.spec.ts       | 27 +++++-
 ts/packages/vscode-shell/esbuild.mjs          | 11 ++-
 .../vscode-shell/src/agentServerBridge.ts     |  9 ++
 .../vscode-shell/src/bridge/messages.ts       |  2 +
 ts/packages/vscode-shell/src/extension.ts     | 91 +++++++++++++++++++
 .../vscode-shell/src/webview/expand.ts        | 60 ++++++++++++
 ts/packages/vscode-shell/src/webview/main.ts  |  7 ++
 12 files changed, 263 insertions(+), 6 deletions(-)
 create mode 100644 ts/packages/vscode-shell/src/webview/expand.ts

diff --git a/ts/packages/chat-ui/src/chatPanel.ts b/ts/packages/chat-ui/src/chatPanel.ts
index 69e54aed46..c7921e868f 100644
--- a/ts/packages/chat-ui/src/chatPanel.ts
+++ b/ts/packages/chat-ui/src/chatPanel.ts
@@ -5417,6 +5417,19 @@ class AgentMessageContainer {
                 bodyDiv: this.messageDiv,
                 headerDiv: this.timestampDiv,
                 messageDiv: this.messageDiv,
+                expandMessage: this.platformAdapter.expandMessage
+                    ? () =>
+                          // Messages backed by an <iframe> (script-driven
+                          // image/video/settings displays) don't survive
+                          // re-sanitization in a separate panel; keep those on
+                          // the live overlay by declining here.
+                          this.messageDiv.querySelector("iframe")
+                              ? false
+                              : this.platformAdapter.expandMessage!(
+                                    this.messageDiv.innerHTML,
+                                    this.nameSpan.textContent ?? undefined,
+                                )
+                    : undefined,
             },
             controller,
             variant,
diff --git a/ts/packages/chat-ui/src/feedbackWidget.ts b/ts/packages/chat-ui/src/feedbackWidget.ts
index 9b3a3a02b0..1794cc832b 100644
--- a/ts/packages/chat-ui/src/feedbackWidget.ts
+++ b/ts/packages/chat-ui/src/feedbackWidget.ts
@@ -42,6 +42,12 @@ type FeedbackHost = {
     bodyDiv: HTMLElement;
     headerDiv: HTMLElement;
     messageDiv: HTMLElement;
+    /**
+     * Optional host-native "expand" (e.g. open in a separate VS Code editor
+     * panel). Returns true if the host handled it; otherwise the widget falls
+     * back to the in-page overlay.
+     */
+    expandMessage?: () => boolean;
 };
 
 type ActionRow = {
@@ -118,7 +124,13 @@ export class FeedbackWidget {
                 "expand",
                 "Expand message",
                 iconExpand(),
-                () => openMessageExpand(this.host.messageDiv),
+                () => {
+                    // Prefer a host-native window (e.g. a VS Code editor
+                    // panel); fall back to the in-page overlay.
+                    if (!this.host.expandMessage?.()) {
+                        openMessageExpand(this.host.messageDiv);
+                    }
+                },
             );
             root.appendChild(expandBtn);
         }
diff --git a/ts/packages/chat-ui/src/icons.ts b/ts/packages/chat-ui/src/icons.ts
index 2bcb7e05e0..cad4c5e033 100644
--- a/ts/packages/chat-ui/src/icons.ts
+++ b/ts/packages/chat-ui/src/icons.ts
@@ -88,9 +88,9 @@ export function iconStop() {
 }
 
 export function iconExpand() {
-    // "maximize": diagonal arrows to the corners; reads as "open in a
-    // larger view".
+    // "maximize" window: four corner brackets forming a frame; reads as
+    // "open in a bigger window".
     return fromSvg(
-        `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>`,
+        `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="4 9 4 4 9 4"></polyline><polyline points="15 4 20 4 20 9"></polyline><polyline points="20 15 20 20 15 20"></polyline><polyline points="9 20 4 20 4 15"></polyline></svg>`,
     );
 }
diff --git a/ts/packages/chat-ui/src/platformAdapter.ts b/ts/packages/chat-ui/src/platformAdapter.ts
index 7161ee2192..b7e2fe6ef5 100644
--- a/ts/packages/chat-ui/src/platformAdapter.ts
+++ b/ts/packages/chat-ui/src/platformAdapter.ts
@@ -10,6 +10,15 @@
 export interface PlatformAdapter {
     /** Handle a click on an <a> link in rendered content. */
     handleLinkClick(href: string, target: string | null): void;
+
+    /**
+     * Open a message's rendered content in a host-native separate window
+     * (e.g. a VS Code editor panel the user can move/snap). Given the message
+     * content as an HTML string plus an optional title. Return true if the host
+     * handled it; when absent or returning false, chat-ui falls back to an
+     * in-page overlay.
+     */
+    expandMessage?(html: string, title?: string): boolean;
 }
 
 /**
diff --git a/ts/packages/chat-ui/styles/chat.css b/ts/packages/chat-ui/styles/chat.css
index 91a4227afa..982b6d6ba0 100644
--- a/ts/packages/chat-ui/styles/chat.css
+++ b/ts/packages/chat-ui/styles/chat.css
@@ -1104,6 +1104,26 @@
   border-radius: 0;
 }
 
+/* Standalone expanded message page (a host-native window, e.g. a VS Code
+   editor panel). Reuses .chat-message-content for typography but drops the
+   bubble chrome and centers a readable column. */
+.chat-expand-page {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 16px 20px;
+  box-shadow: none;
+  border-radius: 0;
+}
+/* The expand panel is a standalone scrollable page; some hosts set the chat
+   body to a fixed-height, overflow-hidden flex layout (media/chat.css), so
+   restore normal document scrolling for the panel body. */
+body.chat-expand-standalone {
+  height: auto;
+  min-height: 100vh;
+  overflow: auto;
+  display: block;
+}
+
 .chat-lightbox-overlay {
   position: fixed;
   inset: 0;
diff --git a/ts/packages/chat-ui/test/feedbackWidget.spec.ts b/ts/packages/chat-ui/test/feedbackWidget.spec.ts
index dc84db4d03..de62cbf740 100644
--- a/ts/packages/chat-ui/test/feedbackWidget.spec.ts
+++ b/ts/packages/chat-ui/test/feedbackWidget.spec.ts
@@ -8,7 +8,10 @@ import type { FeedbackController } from "../src/feedbackWidget.js";
 // FeedbackWidget renders the per-message action row (copy / expand / rate).
 // These tests run under jsdom (see jest.config.cjs).
 
-function makeWidget(messageHtml = "<p>hello</p>") {
+function makeWidget(
+    messageHtml = "<p>hello</p>",
+    expandMessage?: () => boolean,
+) {
     const container = document.createElement("div");
     const messageDiv = document.createElement("div");
     messageDiv.innerHTML = messageHtml;
@@ -23,6 +26,7 @@ function makeWidget(messageHtml = "<p>hello</p>") {
             bodyDiv: document.createElement("div"),
             headerDiv: document.createElement("div"),
             messageDiv,
+            expandMessage,
         },
         controller,
         "footer-always",
@@ -49,6 +53,27 @@ describe("FeedbackWidget expand", () => {
         ]);
     });
 
+    it("delegates to a host expand callback instead of the overlay", () => {
+        const expandMessage = jest.fn(() => true);
+        const { container } = makeWidget("<p>x</p>", expandMessage);
+        container
+            .querySelector<HTMLButtonElement>('[data-action="expand"]')!
+            .click();
+        expect(expandMessage).toHaveBeenCalledTimes(1);
+        expect(document.querySelector(".chat-expand-overlay")).toBeNull();
+    });
+
+    it("falls back to the overlay when the host callback returns false", () => {
+        const expandMessage = jest.fn(() => false);
+        const { container } = makeWidget("<p>x</p>", expandMessage);
+        container
+            .querySelector<HTMLButtonElement>('[data-action="expand"]')!
+            .click();
+        expect(expandMessage).toHaveBeenCalledTimes(1);
+        expect(document.querySelector(".chat-expand-overlay")).not.toBeNull();
+        document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+    });
+
     it("moves the message content into the overlay and back when closed", () => {
         const { container, messageDiv } = makeWidget("<p>expanded content</p>");
         container
diff --git a/ts/packages/vscode-shell/esbuild.mjs b/ts/packages/vscode-shell/esbuild.mjs
index e7ce112677..3ca35eab7b 100644
--- a/ts/packages/vscode-shell/esbuild.mjs
+++ b/ts/packages/vscode-shell/esbuild.mjs
@@ -41,16 +41,25 @@ const webviewConfig = {
     },
 };
 
+/** @type {import('esbuild').BuildOptions} */
+const expandConfig = {
+    ...webviewConfig,
+    entryPoints: ["src/webview/expand.ts"],
+    outfile: "dist/expand.js",
+};
+
 async function build() {
     if (watch) {
         const extCtx = await esbuild.context(extensionConfig);
         const webCtx = await esbuild.context(webviewConfig);
-        await Promise.all([extCtx.watch(), webCtx.watch()]);
+        const expandCtx = await esbuild.context(expandConfig);
+        await Promise.all([extCtx.watch(), webCtx.watch(), expandCtx.watch()]);
         console.log("Watching for changes...");
     } else {
         await Promise.all([
             esbuild.build(extensionConfig),
             esbuild.build(webviewConfig),
+            esbuild.build(expandConfig),
         ]);
         console.log("Build complete");
     }
diff --git a/ts/packages/vscode-shell/src/agentServerBridge.ts b/ts/packages/vscode-shell/src/agentServerBridge.ts
index 9330f32d06..1580e3a03b 100644
--- a/ts/packages/vscode-shell/src/agentServerBridge.ts
+++ b/ts/packages/vscode-shell/src/agentServerBridge.ts
@@ -194,6 +194,8 @@ export class AgentServerBridge {
     private onWebviewFocusChanged?: (focused: boolean) => void;
     /** If set, connect() will join this existing session instead of creating one. */
     private restoreSessionId: string | undefined;
+    /** Host callback that opens a message's content in a separate editor panel. */
+    private readonly onExpandMessage?: (html: string, title?: string) => void;
 
     // Per-session command-completion controller (lazy).  Each webview that
     // requests completions is tracked here; replies are sent only to the
@@ -217,12 +219,14 @@ export class AgentServerBridge {
         defaultSessionName?: string;
         displayName?: string;
         restoreSessionId?: string;
+        onExpandMessage?: (html: string, title?: string) => void;
     }) {
         this.ownsStatusBar = opts?.ownsStatusBar ?? true;
         this.ephemeralSessionName = opts?.ephemeralSessionName;
         this.defaultSessionName = opts?.defaultSessionName;
         this.displayName = opts?.displayName ?? "TypeAgent";
         this.restoreSessionId = opts?.restoreSessionId;
+        this.onExpandMessage = opts?.onExpandMessage;
         if (this.ownsStatusBar) {
             this.statusBarItem = vscode.window.createStatusBarItem(
                 vscode.StatusBarAlignment.Left,
@@ -1484,6 +1488,11 @@ export class AgentServerBridge {
                     void vscode.env.openExternal(vscode.Uri.parse(msg.href));
                 }
                 break;
+            case "expandMessage":
+                // Open the message content in a separate editor panel (a
+                // movable window). The extension owns the panel.
+                this.onExpandMessage?.(msg.html, msg.title);
+                break;
             case "getSpeechToken": {
                 // Relay a speech-token request to the agent server (which owns
                 // the `speech:` config) so the webview can run Azure Speech
diff --git a/ts/packages/vscode-shell/src/bridge/messages.ts b/ts/packages/vscode-shell/src/bridge/messages.ts
index 5e03782709..e99e00fe8a 100644
--- a/ts/packages/vscode-shell/src/bridge/messages.ts
+++ b/ts/packages/vscode-shell/src/bridge/messages.ts
@@ -307,6 +307,8 @@ export type BridgeFromWebviewMessage =
     // Double-Esc gesture: cancel every queued + running entry on the session.
     | { type: "cancelAllQueuedAndRunning" }
     | { type: "openExternal"; href: string }
+    // Open a message's content in a separate editor panel (a movable window).
+    | { type: "expandMessage"; html: string; title?: string }
     // Request a fresh Azure Speech authorization token from the server
     // (relayed via the bridge). Correlated by `id`.
     | { type: "getSpeechToken"; id: number }
diff --git a/ts/packages/vscode-shell/src/extension.ts b/ts/packages/vscode-shell/src/extension.ts
index f5280c5a07..57a575e677 100644
--- a/ts/packages/vscode-shell/src/extension.ts
+++ b/ts/packages/vscode-shell/src/extension.ts
@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 
 import * as vscode from "vscode";
+import { createWebviewNonce } from "@typeagent/core/webview";
 import { ChatViewProvider } from "./chatViewProvider.js";
 import { AgentServerBridge } from "./agentServerBridge.js";
 
@@ -39,6 +40,7 @@ export function activate(context: vscode.ExtensionContext): void {
         restoreSessionId: sidebarRestoreId,
         // Sidebar-only default; tab panels stay ephemeral.
         defaultSessionName: "VS Code",
+        onExpandMessage: (html, title) => openExpandPanel(context, html, title),
     });
 
     // Persist the sidebar's current session so reopening VS Code rejoins it
@@ -557,6 +559,94 @@ function openNewChatPanel(
     });
 }
 
+/**
+ * Open a message's rendered content in a standalone editor panel (a movable /
+ * snappable window) for easier reading. The panel HTML is static; the content
+ * is delivered over postMessage and re-sanitized in the webview (expand.ts), so
+ * no HTML is constructed from the message on the extension side.
+ */
+function openExpandPanel(
+    context: vscode.ExtensionContext,
+    html: string,
+    title?: string,
+): void {
+    const panel = vscode.window.createWebviewPanel(
+        "vscode-shell.expandPanel",
+        title && title.trim() ? title : "TypeAgent Message",
+        vscode.ViewColumn.Beside,
+        {
+            enableScripts: true,
+            localResourceRoots: [
+                vscode.Uri.joinPath(context.extensionUri, "dist"),
+                vscode.Uri.joinPath(context.extensionUri, "media"),
+            ],
+        },
+    );
+    panel.iconPath = vscode.Uri.joinPath(
+        context.extensionUri,
+        "media",
+        "icons",
+        "typeagent.svg",
+    );
+
+    const webview = panel.webview;
+    // Append each resource's mtime so a redeploy/reload doesn't serve a stale
+    // cached bundle/stylesheet (mirrors ChatViewProvider).
+    const fs: typeof import("fs") = require("fs");
+    const asUri = (...parts: string[]) => {
+        const fsUri = vscode.Uri.joinPath(context.extensionUri, ...parts);
+        let stamp: number;
+        try {
+            stamp = fs.statSync(fsUri.fsPath).mtimeMs | 0;
+        } catch {
+            stamp = Date.now();
+        }
+        return `${webview.asWebviewUri(fsUri)}?v=${stamp}`;
+    };
+    const scriptUri = asUri("dist", "expand.js");
+    const styleUri = asUri("media", "chat.css");
+    const codiconUri = asUri("media", "codicon.css");
+    const nonce = createWebviewNonce();
+
+    // Register the listener before setting the HTML so we can't miss the
+    // webview's initial "expandReady". expand.js re-sanitizes the content
+    // before rendering, so no HTML is built from the message here.
+    const sub = webview.onDidReceiveMessage((msg) => {
+        if (msg?.type === "expandReady") {
+            void webview.postMessage({ type: "expandContent", html });
+        } else if (
+            msg?.type === "openExternal" &&
+            typeof msg.href === "string"
+        ) {
+            void vscode.env.openExternal(vscode.Uri.parse(msg.href));
+        }
+    });
+    panel.onDidDispose(() => sub.dispose());
+
+    webview.html = /* html */ `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Content-Security-Policy"
+          content="default-src 'none';
+                   style-src ${webview.cspSource} 'unsafe-inline';
+                   script-src 'nonce-${nonce}';
+                   img-src ${webview.cspSource} data:;
+                   font-src ${webview.cspSource};
+                   form-action 'none';
+                   base-uri 'none';">
+    <link href="${codiconUri}" rel="stylesheet">
+    <link href="${styleUri}" rel="stylesheet">
+    <title>TypeAgent Message</title>
+</head>
+<body class="chat-expand-standalone">
+    <div id="expand-root" class="chat-expand-page chat-message-content"></div>
+    <script nonce="${nonce}" src="${scriptUri}"></script>
+</body>
+</html>`;
+}
+
 function attachChatPanel(
     context: vscode.ExtensionContext,
     provider: ChatViewProvider,
@@ -579,6 +669,7 @@ function attachChatPanel(
         ephemeralSessionName: opts.ephemeralSessionName,
         displayName: opts.displayName,
         restoreSessionId: opts.restoreSessionId,
+        onExpandMessage: (html, title) => openExpandPanel(context, html, title),
     });
 
     const entry: ChatEntry = {
diff --git a/ts/packages/vscode-shell/src/webview/expand.ts b/ts/packages/vscode-shell/src/webview/expand.ts
new file mode 100644
index 0000000000..e4a629ad22
--- /dev/null
+++ b/ts/packages/vscode-shell/src/webview/expand.ts
@@ -0,0 +1,60 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// Standalone "expanded message" webview. Runs in a separate VS Code editor
+// panel (which the user can move/snap) and shows one chat message's rendered
+// content at full size. The extension host sends the (already-sanitized)
+// content over postMessage; we re-sanitize with DOMPurify before rendering as
+// defense in depth, so no HTML is constructed from input on the extension side.
+
+import DOMPurify from "dompurify";
+import chatPanelStyles from "chat-ui/styles";
+import vscodeThemeStyles from "./vscode-theme.css";
+
+function injectStyles(css: string): void {
+    const styleEl = document.createElement("style");
+    styleEl.textContent = css;
+    document.head.appendChild(styleEl);
+}
+injectStyles(chatPanelStyles as unknown as string);
+injectStyles(vscodeThemeStyles as unknown as string);
+
+declare function acquireVsCodeApi(): {
+    postMessage(message: unknown): void;
+    getState(): unknown;
+    setState(state: unknown): void;
+};
+const vscode = acquireVsCodeApi();
+
+const root = document.getElementById("expand-root")!;
+
+window.addEventListener("message", (event) => {
+    const msg = event.data;
+    if (msg && msg.type === "expandContent" && typeof msg.html === "string") {
+        root.innerHTML = DOMPurify.sanitize(msg.html, {
+            ADD_ATTR: ["target"],
+        }) as string;
+        // This is a static read view: reveal rows hidden behind a table's
+        // "Show more" pager and drop the now-dead pager/sort controls so the
+        // full content is readable.
+        root.querySelectorAll(".sc-row-hidden").forEach((r) =>
+            r.classList.remove("sc-row-hidden"),
+        );
+        root.querySelectorAll(".sc-show-more, .sc-sort-btn").forEach((b) =>
+            b.remove(),
+        );
+    }
+});
+
+// Links can't navigate inside this static panel; hand them to the host.
+root.addEventListener("click", (event) => {
+    const anchor = (event.target as HTMLElement | null)?.closest("a");
+    const href = anchor?.getAttribute("href");
+    if (href && /^(https?|mailto):/i.test(href)) {
+        event.preventDefault();
+        vscode.postMessage({ type: "openExternal", href });
+    }
+});
+
+// Signal the host that we're ready to receive the content.
+vscode.postMessage({ type: "expandReady" });
diff --git a/ts/packages/vscode-shell/src/webview/main.ts b/ts/packages/vscode-shell/src/webview/main.ts
index 9ac426b86e..9dc00ec5f8 100644
--- a/ts/packages/vscode-shell/src/webview/main.ts
+++ b/ts/packages/vscode-shell/src/webview/main.ts
@@ -194,6 +194,13 @@ const chatPanel = new ChatPanel(rootEl, {
         handleLinkClick: (href: string, _target: string | null) => {
             vscode.postMessage({ type: "openExternal", href });
         },
+        // Open the message in a separate VS Code editor panel (movable /
+        // snappable) rather than the in-page overlay. The extension host owns
+        // the panel; it re-sanitizes the content before rendering.
+        expandMessage: (html: string, title?: string) => {
+            vscode.postMessage({ type: "expandMessage", html, title });
+            return true;
+        },
     },
     // Mic + camera providers (see WEBVIEW_MEDIA_CAPTURE_SUPPORTED). Both are
     // undefined while getUserMedia is blocked in VS Code webviews, so neither

From a8c261b4e1dbe79c5889c88a77ff005c039b7b7d Mon Sep 17 00:00:00 2001
From: George Ng <georgeng@Microsoft.com>
Date: Tue, 21 Jul 2026 01:47:32 -0700
Subject: [PATCH 06/15] Make webview panel tab icon visible on dark themes

VS Code renders a custom SVG panel iconPath literally and does not recolor
currentColor (unlike ThemeIcons), so the currentColor robot showed black and
was invisible on dark editor tabs. Add a light-colored typeagent-dark.svg and
give both the expand panel and the chat editor panels a theme-aware
{ light, dark } iconPath via a shared panelIcon() helper.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 679cef00-4867-4bba-8efe-3daac6103863
---
 .../media/icons/typeagent-dark.svg            | 10 +++++++
 ts/packages/vscode-shell/src/extension.ts     | 30 +++++++++++--------
 2 files changed, 28 insertions(+), 12 deletions(-)
 create mode 100644 ts/packages/vscode-shell/media/icons/typeagent-dark.svg

diff --git a/ts/packages/vscode-shell/media/icons/typeagent-dark.svg b/ts/packages/vscode-shell/media/icons/typeagent-dark.svg
new file mode 100644
index 0000000000..16b5fc7ba0
--- /dev/null
+++ b/ts/packages/vscode-shell/media/icons/typeagent-dark.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#e8e8f0">
+  <path d="M9 0.5 H15 V2.5 H13 V7.05 H11 V2.5 H9 Z
+           M6.5 7.25 H17.5 A3.25 3.25 0 0 1 20.75 10.5 V19.5 A3.25 3.25 0 0 1 17.5 22.75 H6.5 A3.25 3.25 0 0 1 3.25 19.5 V10.5 A3.25 3.25 0 0 1 6.5 7.25 Z
+           M6.5 8.75 A1.75 1.75 0 0 0 4.75 10.5 V19.5 A1.75 1.75 0 0 0 6.5 21.25 H17.5 A1.75 1.75 0 0 0 19.25 19.5 V10.5 A1.75 1.75 0 0 0 17.5 8.75 Z
+           M2.25 11.5 A0.75 0.75 0 0 1 3.75 11.5 V16 A0.75 0.75 0 0 1 2.25 16 Z
+           M20.25 11.5 A0.75 0.75 0 0 1 21.75 11.5 V16 A0.75 0.75 0 0 1 20.25 16 Z
+           M7.5 12.75 A1.5 1.5 0 0 1 10.5 12.75 A1.5 1.5 0 0 1 7.5 12.75 Z
+           M13.5 12.75 A1.5 1.5 0 0 1 16.5 12.75 A1.5 1.5 0 0 1 13.5 12.75 Z
+           M9 17.25 H15 A0.75 0.75 0 0 1 15 18.75 H9 A0.75 0.75 0 0 1 9 17.25 Z"/>
+</svg>
diff --git a/ts/packages/vscode-shell/src/extension.ts b/ts/packages/vscode-shell/src/extension.ts
index 57a575e677..d78787db48 100644
--- a/ts/packages/vscode-shell/src/extension.ts
+++ b/ts/packages/vscode-shell/src/extension.ts
@@ -518,6 +518,22 @@ function refreshStatusBar(): void {
     statusBarItem.show();
 }
 
+/**
+ * Theme-aware tab icon for our webview panels. VS Code renders a custom SVG
+ * panel icon literally - it doesn't recolor `currentColor` the way it does for
+ * ThemeIcons - so the default (currentColor) robot renders black and is
+ * invisible on dark themes. Pair it with a light-colored variant for dark
+ * themes.
+ */
+function panelIcon(context: vscode.ExtensionContext): {
+    light: vscode.Uri;
+    dark: vscode.Uri;
+} {
+    const icon = (name: string) =>
+        vscode.Uri.joinPath(context.extensionUri, "media", "icons", name);
+    return { light: icon("typeagent.svg"), dark: icon("typeagent-dark.svg") };
+}
+
 function openNewChatPanel(
     context: vscode.ExtensionContext,
     provider: ChatViewProvider,
@@ -582,12 +598,7 @@ function openExpandPanel(
             ],
         },
     );
-    panel.iconPath = vscode.Uri.joinPath(
-        context.extensionUri,
-        "media",
-        "icons",
-        "typeagent.svg",
-    );
+    panel.iconPath = panelIcon(context);
 
     const webview = panel.webview;
     // Append each resource's mtime so a redeploy/reload doesn't serve a stale
@@ -657,12 +668,7 @@ function attachChatPanel(
         restoreSessionId?: string;
     },
 ): void {
-    panel.iconPath = vscode.Uri.joinPath(
-        context.extensionUri,
-        "media",
-        "icons",
-        "typeagent.svg",
-    );
+    panel.iconPath = panelIcon(context);
 
     const bridge = new AgentServerBridge({
         ownsStatusBar: false,

From 4d8a2db0ac6ccdc896489bde78899ae395bbcc3d Mon Sep 17 00:00:00 2001
From: typeagent-bot <typeagent-bot[bot]@users.noreply.github.com>
Date: Tue, 21 Jul 2026 08:52:27 +0000
Subject: [PATCH 07/15] docs: regenerate README.AUTOGEN.md, command reference,
 and action browser

---
 ts/packages/chat-ui/README.AUTOGEN.md      | 17 +++++++++--------
 ts/packages/shell/README.AUTOGEN.md        | 10 ++++++----
 ts/packages/vscode-shell/README.AUTOGEN.md | 10 +++++-----
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/ts/packages/chat-ui/README.AUTOGEN.md b/ts/packages/chat-ui/README.AUTOGEN.md
index 13b2542a66..a8fa4ead7a 100644
--- a/ts/packages/chat-ui/README.AUTOGEN.md
+++ b/ts/packages/chat-ui/README.AUTOGEN.md
@@ -3,7 +3,7 @@
 
 <!-- AUTOGEN:DOCS:START -->
 
-<!-- AUTOGEN:DOCS:HASH:sha256=d8430538e64a37606c4ce524d9103b2cc75302e1c9e5845804f7dc526ba1ee3c -->
+<!-- AUTOGEN:DOCS:HASH:sha256=96fdd92c82f0f7184f4cc4e918fbfc16c26aeaaf8ec49d8db56d73f142910935 -->
 <!-- AUTOGEN:DOCS:SOURCE: ./README.md (hand-written documentation; this file is the AI-generated companion) -->
 
 # chat-ui — AI-generated documentation
@@ -16,12 +16,12 @@ The `chat-ui` package provides a shared, framework-free chat user interface for
 
 ## What it does
 
-The `chat-ui` package offers a comprehensive set of features to support dynamic and interactive chat interfaces:
+The `chat-ui` package offers a range of features to support dynamic and interactive chat interfaces:
 
-- **ChatPanel**: The core component for rendering the chat interface. It provides methods for:
+- **ChatPanel**: The primary component for rendering the chat interface. It supports:
 
-  - Adding user and agent messages using `addAgentMessage`.
-  - Updating display metadata with `setDisplayInfo`.
+  - Adding user and agent messages with `addAgentMessage`.
+  - Updating display metadata using `setDisplayInfo`.
   - Replaying historical chat entries via `replayHistory`.
   - Streaming updates for dynamic content display.
 
@@ -29,7 +29,7 @@ The `chat-ui` package offers a comprehensive set of features to support dynamic
 
 - **PartialCompletion**: Integrates with the `@typeagent/completion-ui` package to handle command completions, including input updates, acceptance, and dismissal.
 
-- **Connection Status Management**: A shared model and UI for displaying the connection status between the chat client and the server. This includes reconnect options and error handling.
+- **Connection Status Management**: Provides a shared model and UI for displaying the connection status between the chat client and the server. This includes reconnect options and error handling.
 
 - **PlatformAdapter**: Abstracts platform-specific behaviors, such as handling link clicks and settings, to ensure compatibility across different environments.
 
@@ -56,7 +56,7 @@ For additional details on usage and integration, refer to the hand-written READM
 
 ## Key Files
 
-The `chat-ui` package is structured into several key files, each responsible for specific functionality:
+The `chat-ui` package is organized into several key files, each responsible for specific functionality:
 
 - **[index.ts](./src/index.ts)**: The main entry point, exporting the package's primary components and utilities.
 - **[chatPanel.ts](./src/chatPanel.ts)**: Implements the `ChatPanel` component, which is the core of the chat UI. It handles user input, agent messages, and display updates.
@@ -108,6 +108,7 @@ External: `ansi_up`, `dompurify`, `markdown-it`
 
 ### Used by
 
+- [@typeagent/browser-extension](../../packages/agents/browserExtension/README.md)
 - [agent-shell](../../packages/shell/README.md)
 - [browser-typeagent](../../packages/agents/browser/README.md)
 - visualstudio-extension-webview
@@ -119,6 +120,6 @@ External: `ansi_up`, `dompurify`, `markdown-it`
 
 ---
 
-_Auto-generated against commit `d9ee555d43867e97462e8fa147f7ef73b8da05ec` on `2026-07-19T20:27:13.071Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter chat-ui docs:verify-links` to spot-check._
+_Auto-generated against commit `f22a17dadf56cb37905b665aad3c062a4d39a0e8` on `2026-07-21T08:50:15.658Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter chat-ui docs:verify-links` to spot-check._
 
 <!-- AUTOGEN:DOCS:END -->
diff --git a/ts/packages/shell/README.AUTOGEN.md b/ts/packages/shell/README.AUTOGEN.md
index 7793785222..9e3ed68341 100644
--- a/ts/packages/shell/README.AUTOGEN.md
+++ b/ts/packages/shell/README.AUTOGEN.md
@@ -3,7 +3,7 @@
 
 <!-- AUTOGEN:DOCS:START -->
 
-<!-- AUTOGEN:DOCS:HASH:sha256=f3163713b44484c5dcdabee1cc1d7c587a97b13b528ae69e10819fd1270b1de6 -->
+<!-- AUTOGEN:DOCS:HASH:sha256=fc7bd591b36b63eea834baf240ca1c77859fa325f3d325be07bde547a8074e6a -->
 <!-- AUTOGEN:DOCS:SOURCE: ./README.md (hand-written documentation; this file is the AI-generated companion) -->
 
 # agent-shell — AI-generated documentation
@@ -12,11 +12,11 @@
 
 ## Overview
 
-The `agent-shell` package is a TypeScript library that serves as the graphical user interface (GUI) entry point for the TypeAgent ecosystem. It provides a personal agent interface for processing user requests, performing actions, answering questions, and managing conversations. Built on Electron, the shell integrates with other TypeAgent components, such as the dispatcher and agent server, to deliver an interactive and extensible experience. It supports both text and voice input, multi-conversation management, and local or remote operation modes.
+The `agent-shell` package is a TypeScript library that acts as the graphical user interface (GUI) entry point for the TypeAgent ecosystem. It provides a personal agent interface for handling user requests, performing actions, answering questions, and managing conversations. Built on Electron, the shell integrates with other TypeAgent components, such as the dispatcher and agent server, to deliver an interactive and extensible experience. It supports both text and voice input, multi-conversation management, and local or remote operation modes.
 
 ## What it does
 
-The `agent-shell` package offers a variety of features to enable interactive and conversational agent experiences:
+The `agent-shell` package provides a range of features to enable interactive and conversational agent experiences:
 
 ### Conversation Management
 
@@ -139,6 +139,8 @@ Workspace:
 - [@typeagent/agent-server-client](../../packages/agentServer/client/README.md)
 - [@typeagent/agent-server-protocol](../../packages/agentServer/protocol/README.md)
 - [@typeagent/aiclient](../../packages/aiclient/README.md)
+- [@typeagent/browser-control-rpc](../../packages/agents/browserControlRpc/README.md)
+- [@typeagent/browser-extension](../../packages/agents/browserExtension/README.md)
 - [@typeagent/common-utils](../../packages/utils/commonUtils/README.md)
 - [@typeagent/completion-ui](../../packages/completionUI/README.md)
 - [@typeagent/config](../../packages/config/README.md)
@@ -174,6 +176,6 @@ _6 environment variables referenced from `./src/` (set in `ts/.env` or your shel
 
 ---
 
-_Auto-generated against commit `c97eb42726a9196c7ac72138faa0777c5cbc1aab` on `2026-07-18T09:48:36.613Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter agent-shell docs:verify-links` to spot-check._
+_Auto-generated against commit `f22a17dadf56cb37905b665aad3c062a4d39a0e8` on `2026-07-21T08:50:15.658Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter agent-shell docs:verify-links` to spot-check._
 
 <!-- AUTOGEN:DOCS:END -->
diff --git a/ts/packages/vscode-shell/README.AUTOGEN.md b/ts/packages/vscode-shell/README.AUTOGEN.md
index e14c6b0d10..6311fc3187 100644
--- a/ts/packages/vscode-shell/README.AUTOGEN.md
+++ b/ts/packages/vscode-shell/README.AUTOGEN.md
@@ -3,7 +3,7 @@
 
 <!-- AUTOGEN:DOCS:START -->
 
-<!-- AUTOGEN:DOCS:HASH:sha256=240c2453bd87fa60f6a8c4e37fcd1fa88d72b5890b1251c256a9115a7046d48b -->
+<!-- AUTOGEN:DOCS:HASH:sha256=dba094fdae5bfbb19022455c5660fc68b4b9a91b1fa46ba599904681394bd1e0 -->
 <!-- AUTOGEN:DOCS:SOURCE: ./README.md (hand-written documentation; this file is the AI-generated companion) -->
 
 # vscode-shell — AI-generated documentation
@@ -12,11 +12,11 @@
 
 ## Overview
 
-The `vscode-shell` package integrates the TypeAgent shell chat into Visual Studio Code, allowing users to interact with TypeAgent conversations directly within the editor. It provides a side panel and editor tabs for managing conversations hosted by a running TypeAgent agent server.
+The `vscode-shell` package integrates the TypeAgent shell chat into Visual Studio Code, providing a chat-based interface for interacting with TypeAgent conversations. It allows users to manage and participate in conversations directly within the editor, using a side panel and editor tabs.
 
 ## What it does
 
-The `vscode-shell` package enables a chat-based interface within Visual Studio Code to interact with the TypeAgent ecosystem. Key features include:
+The `vscode-shell` package enables a rich chat interface within Visual Studio Code, tightly integrated with the TypeAgent ecosystem. Its key features include:
 
 - **Chat Interface**:
 
@@ -170,10 +170,10 @@ External: `ansi_up`, `debug`, `dompurify`, `isomorphic-ws`, `markdown-it`, `micr
 
 ### Files of interest
 
-`./src/webview/main.ts`, `./src/agentServerBridge.ts`, `./src/bridge/clientIO.ts`, …and 11 more under `./src/`.
+`./src/webview/main.ts`, `./src/agentServerBridge.ts`, `./src/bridge/clientIO.ts`, …and 12 more under `./src/`.
 
 ---
 
-_Auto-generated against commit `296dbc72b659a615918e97949f106f0fee2bb9db` on `2026-07-18T05:37:16.532Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter vscode-shell docs:verify-links` to spot-check._
+_Auto-generated against commit `f22a17dadf56cb37905b665aad3c062a4d39a0e8` on `2026-07-21T08:50:15.658Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter vscode-shell docs:verify-links` to spot-check._
 
 <!-- AUTOGEN:DOCS:END -->

From 1f5cea400fae942d7fecc1f2ce800a397cfdf8eb Mon Sep 17 00:00:00 2001
From: typeagent-bot <typeagent-bot[bot]@users.noreply.github.com>
Date: Tue, 21 Jul 2026 08:55:52 +0000
Subject: [PATCH 08/15] docs: regenerate README.AUTOGEN.md, command reference,
 and action browser

---
 ts/packages/chat-ui/README.AUTOGEN.md      | 15 ++++++++-------
 ts/packages/vscode-shell/README.AUTOGEN.md |  8 ++++----
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/ts/packages/chat-ui/README.AUTOGEN.md b/ts/packages/chat-ui/README.AUTOGEN.md
index 13b2542a66..91b887c143 100644
--- a/ts/packages/chat-ui/README.AUTOGEN.md
+++ b/ts/packages/chat-ui/README.AUTOGEN.md
@@ -3,7 +3,7 @@
 
 <!-- AUTOGEN:DOCS:START -->
 
-<!-- AUTOGEN:DOCS:HASH:sha256=d8430538e64a37606c4ce524d9103b2cc75302e1c9e5845804f7dc526ba1ee3c -->
+<!-- AUTOGEN:DOCS:HASH:sha256=c5399ef3c2ea2a1a6a110eb5f81e2fe0184a7a051313c74c4346c19c1655f942 -->
 <!-- AUTOGEN:DOCS:SOURCE: ./README.md (hand-written documentation; this file is the AI-generated companion) -->
 
 # chat-ui — AI-generated documentation
@@ -16,20 +16,20 @@ The `chat-ui` package provides a shared, framework-free chat user interface for
 
 ## What it does
 
-The `chat-ui` package offers a comprehensive set of features to support dynamic and interactive chat interfaces:
+The `chat-ui` package offers a range of features to support dynamic and interactive chat interfaces:
 
-- **ChatPanel**: The core component for rendering the chat interface. It provides methods for:
+- **ChatPanel**: The primary component for rendering the chat interface. It supports:
 
-  - Adding user and agent messages using `addAgentMessage`.
+  - Adding user and agent messages via `addAgentMessage`.
   - Updating display metadata with `setDisplayInfo`.
-  - Replaying historical chat entries via `replayHistory`.
+  - Replaying historical chat entries using `replayHistory`.
   - Streaming updates for dynamic content display.
 
 - **FeedbackWidget**: A component for collecting user feedback, including thumbs-up/thumbs-down ratings, comments, and contextual information.
 
 - **PartialCompletion**: Integrates with the `@typeagent/completion-ui` package to handle command completions, including input updates, acceptance, and dismissal.
 
-- **Connection Status Management**: A shared model and UI for displaying the connection status between the chat client and the server. This includes reconnect options and error handling.
+- **Connection Status Management**: Provides a shared model and UI for displaying the connection status between the chat client and the server. This includes reconnect options and error handling.
 
 - **PlatformAdapter**: Abstracts platform-specific behaviors, such as handling link clicks and settings, to ensure compatibility across different environments.
 
@@ -108,6 +108,7 @@ External: `ansi_up`, `dompurify`, `markdown-it`
 
 ### Used by
 
+- [@typeagent/browser-extension](../../packages/agents/browserExtension/README.md)
 - [agent-shell](../../packages/shell/README.md)
 - [browser-typeagent](../../packages/agents/browser/README.md)
 - visualstudio-extension-webview
@@ -119,6 +120,6 @@ External: `ansi_up`, `dompurify`, `markdown-it`
 
 ---
 
-_Auto-generated against commit `d9ee555d43867e97462e8fa147f7ef73b8da05ec` on `2026-07-19T20:27:13.071Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter chat-ui docs:verify-links` to spot-check._
+_Auto-generated against commit `4f7693322e181137049b7af9ff36387934d81930` on `2026-07-21T08:52:40.173Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter chat-ui docs:verify-links` to spot-check._
 
 <!-- AUTOGEN:DOCS:END -->
diff --git a/ts/packages/vscode-shell/README.AUTOGEN.md b/ts/packages/vscode-shell/README.AUTOGEN.md
index e14c6b0d10..4d1dc85ac0 100644
--- a/ts/packages/vscode-shell/README.AUTOGEN.md
+++ b/ts/packages/vscode-shell/README.AUTOGEN.md
@@ -3,7 +3,7 @@
 
 <!-- AUTOGEN:DOCS:START -->
 
-<!-- AUTOGEN:DOCS:HASH:sha256=240c2453bd87fa60f6a8c4e37fcd1fa88d72b5890b1251c256a9115a7046d48b -->
+<!-- AUTOGEN:DOCS:HASH:sha256=d80f9cff5bbc7127e980fb0fa3354f9348c52ef5e6c4af1b4c6f9ecfcb13304c -->
 <!-- AUTOGEN:DOCS:SOURCE: ./README.md (hand-written documentation; this file is the AI-generated companion) -->
 
 # vscode-shell — AI-generated documentation
@@ -12,11 +12,11 @@
 
 ## Overview
 
-The `vscode-shell` package integrates the TypeAgent shell chat into Visual Studio Code, allowing users to interact with TypeAgent conversations directly within the editor. It provides a side panel and editor tabs for managing conversations hosted by a running TypeAgent agent server.
+The `vscode-shell` package integrates the TypeAgent shell chat into Visual Studio Code, providing a chat-based interface for interacting with TypeAgent conversations. It allows users to manage conversations directly within the editor through a side panel and editor tabs, all backed by a running TypeAgent agent server.
 
 ## What it does
 
-The `vscode-shell` package enables a chat-based interface within Visual Studio Code to interact with the TypeAgent ecosystem. Key features include:
+The `vscode-shell` package enables a rich chat interface within Visual Studio Code to interact with the TypeAgent ecosystem. Its key features include:
 
 - **Chat Interface**:
 
@@ -174,6 +174,6 @@ External: `ansi_up`, `debug`, `dompurify`, `isomorphic-ws`, `markdown-it`, `micr
 
 ---
 
-_Auto-generated against commit `296dbc72b659a615918e97949f106f0fee2bb9db` on `2026-07-18T05:37:16.532Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter vscode-shell docs:verify-links` to spot-check._
+_Auto-generated against commit `4f7693322e181137049b7af9ff36387934d81930` on `2026-07-21T08:52:40.173Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter vscode-shell docs:verify-links` to spot-check._
 
 <!-- AUTOGEN:DOCS:END -->

From ccf9841438d0f4aa4020311bbc98476ae2320c46 Mon Sep 17 00:00:00 2001
From: George Ng <georgeng@Microsoft.com>
Date: Tue, 21 Jul 2026 02:02:15 -0700
Subject: [PATCH 09/15] Clean up reasoning/expand PR: DRY helpers, tighter
 comments

Review-driven polish, no behavior change:
- Extract stampedWebviewUri() (webviewResources.ts) and route both
  ChatViewProvider and openExpandPanel through it, removing the duplicated
  mtime cache-busting logic.
- Extract the shared webview injectStyle() helper (main.ts + expand.ts) and
  hoist the acquireVsCodeApi() ambient declaration into globals.d.ts instead
  of re-declaring it per entry.
- Replace the dense inline expandMessage ternary with a named
  AgentMessageContainer.expandInHost() method (drops a non-null assertion).
- Collapse the shared .chat-expand-body/.chat-expand-page CSS resets and
  tighten a few over-long comments.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 679cef00-4867-4bba-8efe-3daac6103863
---
 ts/packages/chat-ui/src/chatPanel.ts          | 28 +++++++++++--------
 ts/packages/chat-ui/src/platformAdapter.ts    |  9 +++---
 ts/packages/chat-ui/styles/chat.css           | 19 +++++++------
 .../vscode-shell/src/chatViewProvider.ts      | 28 +++++--------------
 ts/packages/vscode-shell/src/extension.ts     | 19 +++----------
 .../vscode-shell/src/webview/expand.ts        | 17 +++--------
 .../vscode-shell/src/webview/globals.d.ts     |  7 +++++
 .../vscode-shell/src/webview/injectStyle.ts   |  9 ++++++
 ts/packages/vscode-shell/src/webview/main.ts  | 18 +++---------
 .../vscode-shell/src/webviewResources.ts      | 26 +++++++++++++++++
 10 files changed, 92 insertions(+), 88 deletions(-)
 create mode 100644 ts/packages/vscode-shell/src/webview/injectStyle.ts
 create mode 100644 ts/packages/vscode-shell/src/webviewResources.ts

diff --git a/ts/packages/chat-ui/src/chatPanel.ts b/ts/packages/chat-ui/src/chatPanel.ts
index c7921e868f..c053b8573a 100644
--- a/ts/packages/chat-ui/src/chatPanel.ts
+++ b/ts/packages/chat-ui/src/chatPanel.ts
@@ -5418,17 +5418,7 @@ class AgentMessageContainer {
                 headerDiv: this.timestampDiv,
                 messageDiv: this.messageDiv,
                 expandMessage: this.platformAdapter.expandMessage
-                    ? () =>
-                          // Messages backed by an <iframe> (script-driven
-                          // image/video/settings displays) don't survive
-                          // re-sanitization in a separate panel; keep those on
-                          // the live overlay by declining here.
-                          this.messageDiv.querySelector("iframe")
-                              ? false
-                              : this.platformAdapter.expandMessage!(
-                                    this.messageDiv.innerHTML,
-                                    this.nameSpan.textContent ?? undefined,
-                                )
+                    ? () => this.expandInHost()
                     : undefined,
             },
             controller,
@@ -5436,6 +5426,22 @@ class AgentMessageContainer {
         );
     }
 
+    // Ask the host to open this message in a separate window. Messages backed
+    // by an <iframe> (script-driven image/video/settings displays) don't
+    // survive re-sanitization in a separate panel, so decline and let the
+    // feedback widget fall back to the in-page overlay.
+    private expandInHost(): boolean {
+        if (this.messageDiv.querySelector("iframe")) {
+            return false;
+        }
+        return (
+            this.platformAdapter.expandMessage?.(
+                this.messageDiv.innerHTML,
+                this.nameSpan.textContent ?? undefined,
+            ) ?? false
+        );
+    }
+
     public setFeedbackState(entry: UserFeedbackEntry | null) {
         this.feedbackWidget?.setFeedbackState(entry);
     }
diff --git a/ts/packages/chat-ui/src/platformAdapter.ts b/ts/packages/chat-ui/src/platformAdapter.ts
index b7e2fe6ef5..b36a8ba706 100644
--- a/ts/packages/chat-ui/src/platformAdapter.ts
+++ b/ts/packages/chat-ui/src/platformAdapter.ts
@@ -12,11 +12,10 @@ export interface PlatformAdapter {
     handleLinkClick(href: string, target: string | null): void;
 
     /**
-     * Open a message's rendered content in a host-native separate window
-     * (e.g. a VS Code editor panel the user can move/snap). Given the message
-     * content as an HTML string plus an optional title. Return true if the host
-     * handled it; when absent or returning false, chat-ui falls back to an
-     * in-page overlay.
+     * Open a message's content (an HTML string, plus an optional title) in a
+     * host-native separate window, e.g. a movable VS Code editor panel. Return
+     * true if handled; when absent or false, chat-ui falls back to an in-page
+     * overlay.
      */
     expandMessage?(html: string, title?: string): boolean;
 }
diff --git a/ts/packages/chat-ui/styles/chat.css b/ts/packages/chat-ui/styles/chat.css
index 982b6d6ba0..f3da772eba 100644
--- a/ts/packages/chat-ui/styles/chat.css
+++ b/ts/packages/chat-ui/styles/chat.css
@@ -1094,25 +1094,26 @@
   border-bottom: 1px solid var(--chat-expand-border, rgba(127, 127, 127, 0.25));
   font-weight: 600;
 }
-/* The body reuses .chat-message-content for typography; flatten its bubble
-   chrome and give it room to scroll. */
+/* Both expand surfaces reuse .chat-message-content for typography; flatten its
+   bubble chrome (shadow + rounding). */
+.chat-expand-body,
+.chat-expand-page {
+  box-shadow: none;
+  border-radius: 0;
+}
+/* Overlay body: fills the panel and scrolls. */
 .chat-expand-body {
   flex: 1 1 auto;
   overflow: auto;
   padding: 16px 18px;
-  box-shadow: none;
-  border-radius: 0;
 }
 
-/* Standalone expanded message page (a host-native window, e.g. a VS Code
-   editor panel). Reuses .chat-message-content for typography but drops the
-   bubble chrome and centers a readable column. */
+/* Standalone page (a host-native window, e.g. a VS Code editor panel): a
+   centered, readable column. */
 .chat-expand-page {
   max-width: 900px;
   margin: 0 auto;
   padding: 16px 20px;
-  box-shadow: none;
-  border-radius: 0;
 }
 /* The expand panel is a standalone scrollable page; some hosts set the chat
    body to a fixed-height, overflow-hidden flex layout (media/chat.css), so
diff --git a/ts/packages/vscode-shell/src/chatViewProvider.ts b/ts/packages/vscode-shell/src/chatViewProvider.ts
index 10fccd6b0b..03ed9d112f 100644
--- a/ts/packages/vscode-shell/src/chatViewProvider.ts
+++ b/ts/packages/vscode-shell/src/chatViewProvider.ts
@@ -4,6 +4,7 @@
 import * as vscode from "vscode";
 import { createWebviewNonce } from "@typeagent/core/webview";
 import { AgentServerBridge } from "./agentServerBridge.js";
+import { stampedWebviewUri } from "./webviewResources.js";
 
 /**
  * Provides the chat webview for the sidebar (uses primary bridge) and
@@ -89,39 +90,24 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
     }
 
     private _getHtmlForWebview(webview: vscode.Webview): string {
-        const scriptPath = vscode.Uri.joinPath(
+        const scriptUri = stampedWebviewUri(
+            webview,
             this._extensionUri,
             "dist",
             "webview.js",
         );
-        const stylePath = vscode.Uri.joinPath(
+        const styleUri = stampedWebviewUri(
+            webview,
             this._extensionUri,
             "media",
             "chat.css",
         );
-        const codiconPath = vscode.Uri.joinPath(
+        const codiconUri = stampedWebviewUri(
+            webview,
             this._extensionUri,
             "media",
             "codicon.css",
         );
-        // Append each bundle's mtime as a query string so VS Code's
-        // webview cache doesn't serve a stale resource after a deploy.
-        // The base URI is the same after a rebuild, so without this the
-        // browser re-uses the cached copy across "Reload Window". Use a
-        // separate stamp per file so a CSS-only change still invalidates
-        // the CSS cache (deriving both from the JS mtime would mask
-        // CSS-only deploys).
-        const fs: typeof import("fs") = require("fs");
-        const stamp = (uri: vscode.Uri): number => {
-            try {
-                return fs.statSync(uri.fsPath).mtimeMs | 0;
-            } catch {
-                return Date.now();
-            }
-        };
-        const scriptUri = `${webview.asWebviewUri(scriptPath)}?v=${stamp(scriptPath)}`;
-        const styleUri = `${webview.asWebviewUri(stylePath)}?v=${stamp(stylePath)}`;
-        const codiconUri = `${webview.asWebviewUri(codiconPath)}?v=${stamp(codiconPath)}`;
         const nonce = createWebviewNonce();
 
         return /* html */ `<!DOCTYPE html>
diff --git a/ts/packages/vscode-shell/src/extension.ts b/ts/packages/vscode-shell/src/extension.ts
index d78787db48..5da1daee81 100644
--- a/ts/packages/vscode-shell/src/extension.ts
+++ b/ts/packages/vscode-shell/src/extension.ts
@@ -5,6 +5,7 @@ import * as vscode from "vscode";
 import { createWebviewNonce } from "@typeagent/core/webview";
 import { ChatViewProvider } from "./chatViewProvider.js";
 import { AgentServerBridge } from "./agentServerBridge.js";
+import { stampedWebviewUri } from "./webviewResources.js";
 
 interface ChatEntry {
     bridge: AgentServerBridge;
@@ -601,27 +602,15 @@ function openExpandPanel(
     panel.iconPath = panelIcon(context);
 
     const webview = panel.webview;
-    // Append each resource's mtime so a redeploy/reload doesn't serve a stale
-    // cached bundle/stylesheet (mirrors ChatViewProvider).
-    const fs: typeof import("fs") = require("fs");
-    const asUri = (...parts: string[]) => {
-        const fsUri = vscode.Uri.joinPath(context.extensionUri, ...parts);
-        let stamp: number;
-        try {
-            stamp = fs.statSync(fsUri.fsPath).mtimeMs | 0;
-        } catch {
-            stamp = Date.now();
-        }
-        return `${webview.asWebviewUri(fsUri)}?v=${stamp}`;
-    };
+    const asUri = (...parts: string[]) =>
+        stampedWebviewUri(webview, context.extensionUri, ...parts);
     const scriptUri = asUri("dist", "expand.js");
     const styleUri = asUri("media", "chat.css");
     const codiconUri = asUri("media", "codicon.css");
     const nonce = createWebviewNonce();
 
     // Register the listener before setting the HTML so we can't miss the
-    // webview's initial "expandReady". expand.js re-sanitizes the content
-    // before rendering, so no HTML is built from the message here.
+    // webview's initial "expandReady".
     const sub = webview.onDidReceiveMessage((msg) => {
         if (msg?.type === "expandReady") {
             void webview.postMessage({ type: "expandContent", html });
diff --git a/ts/packages/vscode-shell/src/webview/expand.ts b/ts/packages/vscode-shell/src/webview/expand.ts
index e4a629ad22..a0674142ed 100644
--- a/ts/packages/vscode-shell/src/webview/expand.ts
+++ b/ts/packages/vscode-shell/src/webview/expand.ts
@@ -10,20 +10,11 @@
 import DOMPurify from "dompurify";
 import chatPanelStyles from "chat-ui/styles";
 import vscodeThemeStyles from "./vscode-theme.css";
+import { injectStyle } from "./injectStyle.js";
+
+injectStyle(chatPanelStyles as unknown as string);
+injectStyle(vscodeThemeStyles as unknown as string);
 
-function injectStyles(css: string): void {
-    const styleEl = document.createElement("style");
-    styleEl.textContent = css;
-    document.head.appendChild(styleEl);
-}
-injectStyles(chatPanelStyles as unknown as string);
-injectStyles(vscodeThemeStyles as unknown as string);
-
-declare function acquireVsCodeApi(): {
-    postMessage(message: unknown): void;
-    getState(): unknown;
-    setState(state: unknown): void;
-};
 const vscode = acquireVsCodeApi();
 
 const root = document.getElementById("expand-root")!;
diff --git a/ts/packages/vscode-shell/src/webview/globals.d.ts b/ts/packages/vscode-shell/src/webview/globals.d.ts
index 8e454cddda..34d97b5afe 100644
--- a/ts/packages/vscode-shell/src/webview/globals.d.ts
+++ b/ts/packages/vscode-shell/src/webview/globals.d.ts
@@ -21,3 +21,10 @@ declare module "@typeagent/completion-ui/styles.css" {
     const css: string;
     export default css;
 }
+
+// The VS Code webview API, injected into every webview at runtime.
+declare function acquireVsCodeApi(): {
+    postMessage(message: unknown): void;
+    getState(): unknown;
+    setState(state: unknown): void;
+};
diff --git a/ts/packages/vscode-shell/src/webview/injectStyle.ts b/ts/packages/vscode-shell/src/webview/injectStyle.ts
new file mode 100644
index 0000000000..1f0a56becc
--- /dev/null
+++ b/ts/packages/vscode-shell/src/webview/injectStyle.ts
@@ -0,0 +1,9 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** Append a `<style>` element with the given CSS to the document head. */
+export function injectStyle(css: string): void {
+    const styleEl = document.createElement("style");
+    styleEl.textContent = css;
+    document.head.appendChild(styleEl);
+}
diff --git a/ts/packages/vscode-shell/src/webview/main.ts b/ts/packages/vscode-shell/src/webview/main.ts
index 9dc00ec5f8..b09326c540 100644
--- a/ts/packages/vscode-shell/src/webview/main.ts
+++ b/ts/packages/vscode-shell/src/webview/main.ts
@@ -24,6 +24,7 @@ import type {
 } from "chat-ui";
 import { VsCodeAzureSpeechProvider } from "./azureSpeechProvider.js";
 import { CameraView } from "./cameraView.js";
+import { injectStyle } from "./injectStyle.js";
 import type { SpeechToken } from "@typeagent/agent-server-protocol";
 import chatPanelStyles from "chat-ui/styles";
 import completionUiStyles from "@typeagent/completion-ui/styles.css";
@@ -39,20 +40,9 @@ import type {
 // Inject the chat-ui base styles first, then the completion-ui dropdown
 // styles, then the VS Code theme overlay so it can override defaults via
 // --vscode-* CSS variables.
-function injectStyles(css: string): void {
-    const styleEl = document.createElement("style");
-    styleEl.textContent = css;
-    document.head.appendChild(styleEl);
-}
-injectStyles(chatPanelStyles as unknown as string);
-injectStyles(completionUiStyles as unknown as string);
-injectStyles(vscodeThemeStyles as unknown as string);
-
-declare function acquireVsCodeApi(): {
-    postMessage(message: unknown): void;
-    getState(): unknown;
-    setState(state: unknown): void;
-};
+injectStyle(chatPanelStyles as unknown as string);
+injectStyle(completionUiStyles as unknown as string);
+injectStyle(vscodeThemeStyles as unknown as string);
 
 const vscode = acquireVsCodeApi();
 
diff --git a/ts/packages/vscode-shell/src/webviewResources.ts b/ts/packages/vscode-shell/src/webviewResources.ts
new file mode 100644
index 0000000000..cbc56ecda1
--- /dev/null
+++ b/ts/packages/vscode-shell/src/webviewResources.ts
@@ -0,0 +1,26 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import * as vscode from "vscode";
+
+/**
+ * Build a webview resource URI stamped with the file's mtime. The base URI is
+ * unchanged after a rebuild, so without the stamp VS Code's webview cache
+ * serves a stale bundle/stylesheet across "Reload Window". Stamping per file
+ * means a CSS-only change still busts the CSS cache.
+ */
+export function stampedWebviewUri(
+    webview: vscode.Webview,
+    extensionUri: vscode.Uri,
+    ...parts: string[]
+): string {
+    const fs: typeof import("fs") = require("fs");
+    const fsUri = vscode.Uri.joinPath(extensionUri, ...parts);
+    let mtime: number;
+    try {
+        mtime = fs.statSync(fsUri.fsPath).mtimeMs | 0;
+    } catch {
+        mtime = Date.now();
+    }
+    return `${webview.asWebviewUri(fsUri)}?v=${mtime}`;
+}

From 313585d197ea4f87bb86017eed39df67379eca40 Mon Sep 17 00:00:00 2001
From: typeagent-bot <typeagent-bot[bot]@users.noreply.github.com>
Date: Tue, 21 Jul 2026 19:33:32 +0000
Subject: [PATCH 10/15] docs: regenerate README.AUTOGEN.md, command reference,
 and action browser

---
 ts/packages/chat-ui/README.AUTOGEN.md      | 14 +++++++-------
 ts/packages/vscode-shell/README.AUTOGEN.md |  8 ++++----
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/ts/packages/chat-ui/README.AUTOGEN.md b/ts/packages/chat-ui/README.AUTOGEN.md
index a8fa4ead7a..d27306f06a 100644
--- a/ts/packages/chat-ui/README.AUTOGEN.md
+++ b/ts/packages/chat-ui/README.AUTOGEN.md
@@ -3,7 +3,7 @@
 
 <!-- AUTOGEN:DOCS:START -->
 
-<!-- AUTOGEN:DOCS:HASH:sha256=96fdd92c82f0f7184f4cc4e918fbfc16c26aeaaf8ec49d8db56d73f142910935 -->
+<!-- AUTOGEN:DOCS:HASH:sha256=662d8456f5c043e23268a20fab6825320688af212176e17d8366f32449c95fe1 -->
 <!-- AUTOGEN:DOCS:SOURCE: ./README.md (hand-written documentation; this file is the AI-generated companion) -->
 
 # chat-ui — AI-generated documentation
@@ -16,12 +16,12 @@ The `chat-ui` package provides a shared, framework-free chat user interface for
 
 ## What it does
 
-The `chat-ui` package offers a range of features to support dynamic and interactive chat interfaces:
+The `chat-ui` package is a comprehensive library for building and managing chat interfaces. Its primary features include:
 
-- **ChatPanel**: The primary component for rendering the chat interface. It supports:
+- **ChatPanel**: The core component for rendering the chat interface. It supports:
 
-  - Adding user and agent messages with `addAgentMessage`.
-  - Updating display metadata using `setDisplayInfo`.
+  - Adding user and agent messages using `addAgentMessage`.
+  - Updating display metadata with `setDisplayInfo`.
   - Replaying historical chat entries via `replayHistory`.
   - Streaming updates for dynamic content display.
 
@@ -35,7 +35,7 @@ The `chat-ui` package offers a range of features to support dynamic and interact
 
 - **Shared Styles**: A CSS file (`styles/chat.css`) is included to provide a consistent appearance for the chat UI across all host applications.
 
-The package is used by several TypeAgent components, such as the VS Code shell, the browser extension, and the Visual Studio extension webview.
+The package is utilized by several TypeAgent components, such as the VS Code shell, the browser extension, and the Visual Studio extension webview, ensuring a unified user experience across these platforms.
 
 ## Setup
 
@@ -120,6 +120,6 @@ External: `ansi_up`, `dompurify`, `markdown-it`
 
 ---
 
-_Auto-generated against commit `f22a17dadf56cb37905b665aad3c062a4d39a0e8` on `2026-07-21T08:50:15.658Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter chat-ui docs:verify-links` to spot-check._
+_Auto-generated against commit `17ffbd73665bd7b4aa7ead4f43e8dcb298a62700` on `2026-07-21T19:31:32.401Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter chat-ui docs:verify-links` to spot-check._
 
 <!-- AUTOGEN:DOCS:END -->
diff --git a/ts/packages/vscode-shell/README.AUTOGEN.md b/ts/packages/vscode-shell/README.AUTOGEN.md
index 6311fc3187..604e6038f6 100644
--- a/ts/packages/vscode-shell/README.AUTOGEN.md
+++ b/ts/packages/vscode-shell/README.AUTOGEN.md
@@ -3,7 +3,7 @@
 
 <!-- AUTOGEN:DOCS:START -->
 
-<!-- AUTOGEN:DOCS:HASH:sha256=dba094fdae5bfbb19022455c5660fc68b4b9a91b1fa46ba599904681394bd1e0 -->
+<!-- AUTOGEN:DOCS:HASH:sha256=f34120aaf8fa8e2296ff87a95ac7f464ab9d1441f84b25b6ba60cbc1e333742a -->
 <!-- AUTOGEN:DOCS:SOURCE: ./README.md (hand-written documentation; this file is the AI-generated companion) -->
 
 # vscode-shell — AI-generated documentation
@@ -16,7 +16,7 @@ The `vscode-shell` package integrates the TypeAgent shell chat into Visual Studi
 
 ## What it does
 
-The `vscode-shell` package enables a rich chat interface within Visual Studio Code, tightly integrated with the TypeAgent ecosystem. Its key features include:
+The `vscode-shell` package provides a feature-rich chat interface within Visual Studio Code, tightly integrated with the TypeAgent ecosystem. Its primary capabilities include:
 
 - **Chat Interface**:
 
@@ -170,10 +170,10 @@ External: `ansi_up`, `debug`, `dompurify`, `isomorphic-ws`, `markdown-it`, `micr
 
 ### Files of interest
 
-`./src/webview/main.ts`, `./src/agentServerBridge.ts`, `./src/bridge/clientIO.ts`, …and 12 more under `./src/`.
+`./src/webview/main.ts`, `./src/agentServerBridge.ts`, `./src/bridge/clientIO.ts`, …and 14 more under `./src/`.
 
 ---
 
-_Auto-generated against commit `f22a17dadf56cb37905b665aad3c062a4d39a0e8` on `2026-07-21T08:50:15.658Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter vscode-shell docs:verify-links` to spot-check._
+_Auto-generated against commit `17ffbd73665bd7b4aa7ead4f43e8dcb298a62700` on `2026-07-21T19:31:32.401Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter vscode-shell docs:verify-links` to spot-check._
 
 <!-- AUTOGEN:DOCS:END -->

From 2c30376e7c64d637818336b4eb2e056078b5254c Mon Sep 17 00:00:00 2001
From: George Ng <georgeng@Microsoft.com>
Date: Tue, 21 Jul 2026 12:40:09 -0700
Subject: [PATCH 11/15] Refactor: dedupe input-event dispatch, drop dead isCopy
 var

Extract fireInputEvent() helper for the three identical programmatic 'input' event dispatches in contextMenu.ts, and remove the unused isCopy local in handleClipboardShortcut (it only fed the guard). No behavior change.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 679cef00-4867-4bba-8efe-3daac6103863
---
 ts/packages/chat-ui/src/contextMenu.ts | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/ts/packages/chat-ui/src/contextMenu.ts b/ts/packages/chat-ui/src/contextMenu.ts
index 1452fe2054..926cfc342e 100644
--- a/ts/packages/chat-ui/src/contextMenu.ts
+++ b/ts/packages/chat-ui/src/contextMenu.ts
@@ -215,6 +215,12 @@ function fallbackCopy(text: string) {
     ta.remove();
 }
 
+// Notify listeners (send-button enable state, completion fetch) that an
+// element's value changed from a programmatic edit.
+function fireInputEvent(el: EventTarget | null | undefined) {
+    el?.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
 function cutSelection(text: string) {
     if (!text) return;
     copyText(text);
@@ -222,10 +228,7 @@ function cutSelection(text: string) {
     if (sel && sel.rangeCount > 0) {
         const range = sel.getRangeAt(0);
         range.deleteContents();
-        // Fire an input event so listeners (e.g. send-button enable
-        // state, completion fetch) react to the deletion.
-        const active = document.activeElement as HTMLElement | null;
-        active?.dispatchEvent(new Event("input", { bubbles: true }));
+        fireInputEvent(document.activeElement);
     }
 }
 
@@ -267,7 +270,7 @@ async function pasteInto(target: HTMLElement) {
     range.setEndAfter(node);
     sel?.removeAllRanges();
     sel?.addRange(range);
-    target.dispatchEvent(new Event("input", { bubbles: true }));
+    fireInputEvent(target);
 }
 
 function selectAll(target: HTMLElement) {
@@ -304,11 +307,10 @@ export function handleClipboardShortcut(e: KeyboardEvent): boolean {
         return false;
     }
     const key = e.key.toLowerCase();
-    const isCopy = key === "c";
-    const isCut = key === "x";
-    if (!isCopy && !isCut) {
+    if (key !== "c" && key !== "x") {
         return false;
     }
+    const isCut = key === "x";
 
     // Native <input>/<textarea> keep their selection outside of
     // window.getSelection(), so read it off the focused element.
@@ -325,7 +327,7 @@ export function handleClipboardShortcut(e: KeyboardEvent): boolean {
         copyText(active.value.slice(start, end));
         if (isCut && !active.readOnly && !active.disabled) {
             active.setRangeText("", start, end, "end");
-            active.dispatchEvent(new Event("input", { bubbles: true }));
+            fireInputEvent(active);
         }
         return true;
     }

From 658b843901aacd910bf242066ac41680270d3f2b Mon Sep 17 00:00:00 2001
From: typeagent-bot <typeagent-bot[bot]@users.noreply.github.com>
Date: Tue, 21 Jul 2026 20:16:46 +0000
Subject: [PATCH 12/15] docs: regenerate README.AUTOGEN.md, command reference,
 and action browser

---
 ts/packages/chat-ui/README.AUTOGEN.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/ts/packages/chat-ui/README.AUTOGEN.md b/ts/packages/chat-ui/README.AUTOGEN.md
index d27306f06a..851ae33a92 100644
--- a/ts/packages/chat-ui/README.AUTOGEN.md
+++ b/ts/packages/chat-ui/README.AUTOGEN.md
@@ -3,7 +3,7 @@
 
 <!-- AUTOGEN:DOCS:START -->
 
-<!-- AUTOGEN:DOCS:HASH:sha256=662d8456f5c043e23268a20fab6825320688af212176e17d8366f32449c95fe1 -->
+<!-- AUTOGEN:DOCS:HASH:sha256=d14b554feb1cea830cf6bf49cb142526c72e246c1c48db2074408f74042572f7 -->
 <!-- AUTOGEN:DOCS:SOURCE: ./README.md (hand-written documentation; this file is the AI-generated companion) -->
 
 # chat-ui — AI-generated documentation
@@ -12,17 +12,17 @@
 
 ## Overview
 
-The `chat-ui` package provides a shared, framework-free chat user interface for TypeAgent applications. It is designed to deliver a consistent and interactive chat experience across multiple platforms, including the VS Code shell extension, the browser extension chat panel, and the Visual Studio extension webview. The package includes components for rendering user and agent messages, handling streaming updates, replaying chat history, managing connection status, and collecting user feedback.
+The `chat-ui` package provides a shared, framework-free chat user interface for TypeAgent applications. It is designed to ensure a consistent and interactive chat experience across various platforms, including the VS Code shell extension, the browser extension chat panel, and the Visual Studio extension webview. The package includes components for rendering user and agent messages, handling streaming updates, replaying chat history, managing connection status, and collecting user feedback.
 
 ## What it does
 
-The `chat-ui` package is a comprehensive library for building and managing chat interfaces. Its primary features include:
+The `chat-ui` package offers a set of tools and components to build and manage chat interfaces. Its key features include:
 
-- **ChatPanel**: The core component for rendering the chat interface. It supports:
+- **ChatPanel**: The primary component for rendering the chat interface. It supports:
 
-  - Adding user and agent messages using `addAgentMessage`.
+  - Adding user and agent messages via `addAgentMessage`.
   - Updating display metadata with `setDisplayInfo`.
-  - Replaying historical chat entries via `replayHistory`.
+  - Replaying historical chat entries using `replayHistory`.
   - Streaming updates for dynamic content display.
 
 - **FeedbackWidget**: A component for collecting user feedback, including thumbs-up/thumbs-down ratings, comments, and contextual information.
@@ -35,7 +35,7 @@ The `chat-ui` package is a comprehensive library for building and managing chat
 
 - **Shared Styles**: A CSS file (`styles/chat.css`) is included to provide a consistent appearance for the chat UI across all host applications.
 
-The package is utilized by several TypeAgent components, such as the VS Code shell, the browser extension, and the Visual Studio extension webview, ensuring a unified user experience across these platforms.
+The package is used by several TypeAgent components, such as the VS Code shell, the browser extension, and the Visual Studio extension webview, ensuring a unified user experience across these platforms.
 
 ## Setup
 
@@ -120,6 +120,6 @@ External: `ansi_up`, `dompurify`, `markdown-it`
 
 ---
 
-_Auto-generated against commit `17ffbd73665bd7b4aa7ead4f43e8dcb298a62700` on `2026-07-21T19:31:32.401Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter chat-ui docs:verify-links` to spot-check._
+_Auto-generated against commit `783ea6a09419d40cb4abf1764012ddcf531b7ab6` on `2026-07-21T20:14:55.487Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter chat-ui docs:verify-links` to spot-check._
 
 <!-- AUTOGEN:DOCS:END -->

From 3f128cb3c30353716f11888f1a67cde857f38fce Mon Sep 17 00:00:00 2001
From: typeagent-bot <typeagent-bot[bot]@users.noreply.github.com>
Date: Wed, 22 Jul 2026 00:07:37 +0000
Subject: [PATCH 13/15] docs: regenerate README.AUTOGEN.md, command reference,
 and action browser

---
 ts/packages/chat-ui/README.AUTOGEN.md      | 10 +++++-----
 ts/packages/shell/README.AUTOGEN.md        |  8 ++++----
 ts/packages/vscode-shell/README.AUTOGEN.md | 10 +++++-----
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/ts/packages/chat-ui/README.AUTOGEN.md b/ts/packages/chat-ui/README.AUTOGEN.md
index 851ae33a92..73b843a4ae 100644
--- a/ts/packages/chat-ui/README.AUTOGEN.md
+++ b/ts/packages/chat-ui/README.AUTOGEN.md
@@ -3,7 +3,7 @@
 
 <!-- AUTOGEN:DOCS:START -->
 
-<!-- AUTOGEN:DOCS:HASH:sha256=d14b554feb1cea830cf6bf49cb142526c72e246c1c48db2074408f74042572f7 -->
+<!-- AUTOGEN:DOCS:HASH:sha256=92386c624517a2f053db71598075498dc14acc5ce47853112616b61cfbd18a05 -->
 <!-- AUTOGEN:DOCS:SOURCE: ./README.md (hand-written documentation; this file is the AI-generated companion) -->
 
 # chat-ui — AI-generated documentation
@@ -12,13 +12,13 @@
 
 ## Overview
 
-The `chat-ui` package provides a shared, framework-free chat user interface for TypeAgent applications. It is designed to ensure a consistent and interactive chat experience across various platforms, including the VS Code shell extension, the browser extension chat panel, and the Visual Studio extension webview. The package includes components for rendering user and agent messages, handling streaming updates, replaying chat history, managing connection status, and collecting user feedback.
+The `chat-ui` package provides a shared, framework-free chat user interface for TypeAgent applications. It is designed to deliver a consistent and interactive chat experience across multiple platforms, including the VS Code shell extension, the browser extension chat panel, and the Visual Studio extension webview. The package includes components for rendering user and agent messages, handling streaming updates, replaying chat history, managing connection status, and collecting user feedback.
 
 ## What it does
 
-The `chat-ui` package offers a set of tools and components to build and manage chat interfaces. Its key features include:
+The `chat-ui` package offers a comprehensive set of tools and components to build and manage chat interfaces. Its key features include:
 
-- **ChatPanel**: The primary component for rendering the chat interface. It supports:
+- **ChatPanel**: The central component for rendering the chat interface. It supports:
 
   - Adding user and agent messages via `addAgentMessage`.
   - Updating display metadata with `setDisplayInfo`.
@@ -120,6 +120,6 @@ External: `ansi_up`, `dompurify`, `markdown-it`
 
 ---
 
-_Auto-generated against commit `783ea6a09419d40cb4abf1764012ddcf531b7ab6` on `2026-07-21T20:14:55.487Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter chat-ui docs:verify-links` to spot-check._
+_Auto-generated against commit `8ec451103180b2a383dfb4e1c7f80c1ad50e9d35` on `2026-07-22T00:05:15.961Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter chat-ui docs:verify-links` to spot-check._
 
 <!-- AUTOGEN:DOCS:END -->
diff --git a/ts/packages/shell/README.AUTOGEN.md b/ts/packages/shell/README.AUTOGEN.md
index 9e3ed68341..4a8eb1e849 100644
--- a/ts/packages/shell/README.AUTOGEN.md
+++ b/ts/packages/shell/README.AUTOGEN.md
@@ -3,7 +3,7 @@
 
 <!-- AUTOGEN:DOCS:START -->
 
-<!-- AUTOGEN:DOCS:HASH:sha256=fc7bd591b36b63eea834baf240ca1c77859fa325f3d325be07bde547a8074e6a -->
+<!-- AUTOGEN:DOCS:HASH:sha256=7959ae9242254859bcf3c0b91fb2e38446304bf0918c5c71012cfb816f27c1a8 -->
 <!-- AUTOGEN:DOCS:SOURCE: ./README.md (hand-written documentation; this file is the AI-generated companion) -->
 
 # agent-shell — AI-generated documentation
@@ -12,11 +12,11 @@
 
 ## Overview
 
-The `agent-shell` package is a TypeScript library that acts as the graphical user interface (GUI) entry point for the TypeAgent ecosystem. It provides a personal agent interface for handling user requests, performing actions, answering questions, and managing conversations. Built on Electron, the shell integrates with other TypeAgent components, such as the dispatcher and agent server, to deliver an interactive and extensible experience. It supports both text and voice input, multi-conversation management, and local or remote operation modes.
+The `agent-shell` package is a TypeScript library that serves as the graphical user interface (GUI) entry point for the TypeAgent ecosystem. Built on Electron, it provides a personal agent interface for handling user requests, performing actions, answering questions, and managing conversations. The shell integrates with other TypeAgent components, such as the dispatcher and agent server, to deliver an interactive and extensible experience. It supports both text and voice input, multi-conversation management, and local or remote operation modes.
 
 ## What it does
 
-The `agent-shell` package provides a range of features to enable interactive and conversational agent experiences:
+The `agent-shell` package offers a range of features to enable interactive and conversational agent experiences:
 
 ### Conversation Management
 
@@ -176,6 +176,6 @@ _6 environment variables referenced from `./src/` (set in `ts/.env` or your shel
 
 ---
 
-_Auto-generated against commit `f22a17dadf56cb37905b665aad3c062a4d39a0e8` on `2026-07-21T08:50:15.658Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter agent-shell docs:verify-links` to spot-check._
+_Auto-generated against commit `8ec451103180b2a383dfb4e1c7f80c1ad50e9d35` on `2026-07-22T00:05:15.961Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter agent-shell docs:verify-links` to spot-check._
 
 <!-- AUTOGEN:DOCS:END -->
diff --git a/ts/packages/vscode-shell/README.AUTOGEN.md b/ts/packages/vscode-shell/README.AUTOGEN.md
index 604e6038f6..bd15136e5d 100644
--- a/ts/packages/vscode-shell/README.AUTOGEN.md
+++ b/ts/packages/vscode-shell/README.AUTOGEN.md
@@ -3,7 +3,7 @@
 
 <!-- AUTOGEN:DOCS:START -->
 
-<!-- AUTOGEN:DOCS:HASH:sha256=f34120aaf8fa8e2296ff87a95ac7f464ab9d1441f84b25b6ba60cbc1e333742a -->
+<!-- AUTOGEN:DOCS:HASH:sha256=7344d6fb9f826f6f6d2223226d5a8e917929c544cbc089f4e3aa6e26c0a13372 -->
 <!-- AUTOGEN:DOCS:SOURCE: ./README.md (hand-written documentation; this file is the AI-generated companion) -->
 
 # vscode-shell — AI-generated documentation
@@ -12,16 +12,16 @@
 
 ## Overview
 
-The `vscode-shell` package integrates the TypeAgent shell chat into Visual Studio Code, providing a chat-based interface for interacting with TypeAgent conversations. It allows users to manage and participate in conversations directly within the editor, using a side panel and editor tabs.
+The `vscode-shell` package integrates the TypeAgent shell chat into Visual Studio Code, enabling users to interact with TypeAgent conversations directly within the editor. It provides a chat interface accessible via a side panel and editor tabs, allowing for efficient conversation management and interaction.
 
 ## What it does
 
-The `vscode-shell` package provides a feature-rich chat interface within Visual Studio Code, tightly integrated with the TypeAgent ecosystem. Its primary capabilities include:
+The `vscode-shell` package offers a comprehensive chat interface within Visual Studio Code, designed to work with the TypeAgent ecosystem. Key features include:
 
 - **Chat Interface**:
 
   - A **Chat** side panel accessible from the activity bar.
-  - Support for multiple editor-tab chats, each representing a separate conversation.
+  - Support for multiple editor-tab chats, each representing a distinct conversation.
 
 - **Command Palette Integration**:
 
@@ -174,6 +174,6 @@ External: `ansi_up`, `debug`, `dompurify`, `isomorphic-ws`, `markdown-it`, `micr
 
 ---
 
-_Auto-generated against commit `17ffbd73665bd7b4aa7ead4f43e8dcb298a62700` on `2026-07-21T19:31:32.401Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter vscode-shell docs:verify-links` to spot-check._
+_Auto-generated against commit `8ec451103180b2a383dfb4e1c7f80c1ad50e9d35` on `2026-07-22T00:05:15.961Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter vscode-shell docs:verify-links` to spot-check._
 
 <!-- AUTOGEN:DOCS:END -->

From 2f86f9c2f9256de15dd5b57c34ba8129b48fe9fd Mon Sep 17 00:00:00 2001
From: George Ng <georgeng@Microsoft.com>
Date: Tue, 21 Jul 2026 21:39:28 -0700
Subject: [PATCH 14/15] Rename expand to openInNewWindow and clean up unused
 chat-ui changes

---
 ts/packages/chat-ui/src/chatPanel.ts          |  16 +--
 ts/packages/chat-ui/src/feedbackWidget.ts     | 111 ++++-----------
 ts/packages/chat-ui/src/icons.ts              |   4 +-
 ts/packages/chat-ui/src/platformAdapter.ts    |  11 +-
 ts/packages/chat-ui/styles/chat.css           |  68 ---------
 .../chat-ui/test/feedbackWidget.spec.ts       | 132 ++++--------------
 ts/packages/vscode-shell/esbuild.mjs          |  16 ++-
 .../vscode-shell/src/agentServerBridge.ts     |  19 +--
 .../vscode-shell/src/bridge/messages.ts       |   4 +-
 ts/packages/vscode-shell/src/extension.ts     |  29 ++--
 ts/packages/vscode-shell/src/webview/main.ts  |  10 +-
 .../webview/{expand.ts => messageWindow.ts}   |  21 +--
 .../vscode-shell/src/webview/vscode-theme.css |  25 +++-
 13 files changed, 149 insertions(+), 317 deletions(-)
 rename ts/packages/vscode-shell/src/webview/{expand.ts => messageWindow.ts} (70%)

diff --git a/ts/packages/chat-ui/src/chatPanel.ts b/ts/packages/chat-ui/src/chatPanel.ts
index c053b8573a..d56feafaba 100644
--- a/ts/packages/chat-ui/src/chatPanel.ts
+++ b/ts/packages/chat-ui/src/chatPanel.ts
@@ -5417,8 +5417,8 @@ class AgentMessageContainer {
                 bodyDiv: this.messageDiv,
                 headerDiv: this.timestampDiv,
                 messageDiv: this.messageDiv,
-                expandMessage: this.platformAdapter.expandMessage
-                    ? () => this.expandInHost()
+                openInWindow: this.platformAdapter.openMessageInWindow
+                    ? () => this.openMessageInWindow()
                     : undefined,
             },
             controller,
@@ -5426,16 +5426,16 @@ class AgentMessageContainer {
         );
     }
 
-    // Ask the host to open this message in a separate window. Messages backed
-    // by an <iframe> (script-driven image/video/settings displays) don't
-    // survive re-sanitization in a separate panel, so decline and let the
-    // feedback widget fall back to the in-page overlay.
-    private expandInHost(): boolean {
+    // Ask the host to open this message in a new window. Messages backed by an
+    // <iframe> (script-driven image/video/settings displays) don't survive
+    // re-sanitization in a separate panel, so decline them; there's no in-page
+    // fallback, so the button is simply inert for those.
+    private openMessageInWindow(): boolean {
         if (this.messageDiv.querySelector("iframe")) {
             return false;
         }
         return (
-            this.platformAdapter.expandMessage?.(
+            this.platformAdapter.openMessageInWindow?.(
                 this.messageDiv.innerHTML,
                 this.nameSpan.textContent ?? undefined,
             ) ?? false
diff --git a/ts/packages/chat-ui/src/feedbackWidget.ts b/ts/packages/chat-ui/src/feedbackWidget.ts
index 1794cc832b..d2eef05e70 100644
--- a/ts/packages/chat-ui/src/feedbackWidget.ts
+++ b/ts/packages/chat-ui/src/feedbackWidget.ts
@@ -2,8 +2,8 @@
 // Licensed under the MIT License.
 
 /**
- * Feedback widget. Renders the per-message action row (copy / expand / rate)
- * plus the feedback popover. Shared by the Electron shell (via chat-ui's
+ * Feedback widget. Renders the per-message action row (copy / open-in-window /
+ * rate) plus the feedback popover. Shared by the Electron shell (via chat-ui's
  * ChatPanel) and the Chrome / vscode webview hosts, so keep the trigger DOM and
  * CSS class names stable when changing it.
  */
@@ -16,11 +16,10 @@ import type {
 import {
     iconCheck,
     iconCopy,
-    iconExpand,
+    iconOpenInWindow,
     iconMore,
     iconThumbsDown,
     iconThumbsUp,
-    iconX,
 } from "./icons.js";
 
 export type FeedbackUIVariant = "footer-always";
@@ -43,11 +42,14 @@ type FeedbackHost = {
     headerDiv: HTMLElement;
     messageDiv: HTMLElement;
     /**
-     * Optional host-native "expand" (e.g. open in a separate VS Code editor
-     * panel). Returns true if the host handled it; otherwise the widget falls
-     * back to the in-page overlay.
+     * Optional host-native "open in new window" (e.g. a movable VS Code editor
+     * panel). When provided, the widget shows the "Open in new window" action;
+     * hosts without it don't show the action at all. Returns true if the host
+     * handled it; a host may decline a specific message (false, e.g. iframe-
+     * backed content that can't be serialized into a window), in which case
+     * nothing happens (there's no in-page fallback).
      */
-    expandMessage?: () => boolean;
+    openInWindow?: () => boolean;
 };
 
 type ActionRow = {
@@ -120,19 +122,25 @@ export class FeedbackWidget {
             );
             root.appendChild(copyBtn);
 
-            const expandBtn = makeIconButton(
-                "expand",
-                "Expand message",
-                iconExpand(),
-                () => {
-                    // Prefer a host-native window (e.g. a VS Code editor
-                    // panel); fall back to the in-page overlay.
-                    if (!this.host.expandMessage?.()) {
-                        openMessageExpand(this.host.messageDiv);
-                    }
-                },
-            );
-            root.appendChild(expandBtn);
+            // "Open in new window" is an opt-in, host-native capability: only
+            // render it when the host provides openInWindow (e.g. the VS Code
+            // shell, which opens a movable editor panel). Hosts without it (the
+            // Electron shell, web) show no button. The host may decline a
+            // specific message (returns false, e.g. iframe-backed content that
+            // can't be serialized into a window); there's no in-page fallback,
+            // so the click is simply a no-op in that case.
+            const openInWindow = this.host.openInWindow;
+            if (openInWindow) {
+                const openWindowBtn = makeIconButton(
+                    "open-window",
+                    "Open in new window",
+                    iconOpenInWindow(),
+                    () => {
+                        openInWindow();
+                    },
+                );
+                root.appendChild(openWindowBtn);
+            }
         }
 
         const thumbsUp = makeIconButton(
@@ -333,67 +341,6 @@ function makeIconButton(
     return btn;
 }
 
-// The single expand overlay currently open (its disposer), so a second click
-// replaces rather than stacks overlays.
-let activeExpand: (() => void) | undefined;
-
-// Open a message's rendered content in a full-window overlay for easier reading
-// of long responses. The live content nodes are moved into the overlay (not
-// cloned) so links, tables and other interactivity keep working, then moved
-// back when it closes. Dismissed by the close button, Escape, or a backdrop
-// click.
-function openMessageExpand(sourceEl: HTMLElement) {
-    activeExpand?.();
-    const previousFocus = document.activeElement as HTMLElement | null;
-
-    const overlay = document.createElement("div");
-    overlay.className = "chat-expand-overlay";
-    overlay.tabIndex = -1;
-
-    const body = document.createElement("div");
-    body.className = "chat-expand-body chat-message-content";
-    body.append(...Array.from(sourceEl.childNodes));
-
-    const close = () => {
-        document.removeEventListener("keydown", onKey, true);
-        // Return the content to its bubble before removing the overlay.
-        sourceEl.append(...Array.from(body.childNodes));
-        overlay.remove();
-        activeExpand = undefined;
-        previousFocus?.focus?.();
-    };
-    const onKey = (e: KeyboardEvent) => {
-        if (e.key === "Escape") {
-            e.preventDefault();
-            close();
-        }
-    };
-
-    const panel = document.createElement("div");
-    panel.className = "chat-expand-panel";
-    panel.setAttribute("role", "dialog");
-    panel.setAttribute("aria-modal", "true");
-    panel.setAttribute("aria-label", "Expanded message");
-
-    const header = document.createElement("div");
-    header.className = "chat-expand-header";
-    const title = document.createElement("span");
-    title.textContent = "Message";
-    const closeBtn = makeIconButton("close", "Close", iconX(), close);
-    header.append(title, closeBtn);
-
-    panel.append(header, body);
-    overlay.appendChild(panel);
-    overlay.addEventListener("click", (e) => {
-        if (e.target === overlay) close();
-    });
-
-    document.addEventListener("keydown", onKey, true);
-    document.body.appendChild(overlay);
-    activeExpand = close;
-    closeBtn.focus();
-}
-
 function formatCategory(c: UserFeedbackCategory): string {
     switch (c) {
         case "wrong-agent":
diff --git a/ts/packages/chat-ui/src/icons.ts b/ts/packages/chat-ui/src/icons.ts
index cad4c5e033..96317983cb 100644
--- a/ts/packages/chat-ui/src/icons.ts
+++ b/ts/packages/chat-ui/src/icons.ts
@@ -87,9 +87,9 @@ export function iconStop() {
     );
 }
 
-export function iconExpand() {
+export function iconOpenInWindow() {
     // "maximize" window: four corner brackets forming a frame; reads as
-    // "open in a bigger window".
+    // "open in a new window".
     return fromSvg(
         `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="4 9 4 4 9 4"></polyline><polyline points="15 4 20 4 20 9"></polyline><polyline points="20 15 20 20 15 20"></polyline><polyline points="9 20 4 20 4 15"></polyline></svg>`,
     );
diff --git a/ts/packages/chat-ui/src/platformAdapter.ts b/ts/packages/chat-ui/src/platformAdapter.ts
index b36a8ba706..e8a590a8c4 100644
--- a/ts/packages/chat-ui/src/platformAdapter.ts
+++ b/ts/packages/chat-ui/src/platformAdapter.ts
@@ -13,11 +13,14 @@ export interface PlatformAdapter {
 
     /**
      * Open a message's content (an HTML string, plus an optional title) in a
-     * host-native separate window, e.g. a movable VS Code editor panel. Return
-     * true if handled; when absent or false, chat-ui falls back to an in-page
-     * overlay.
+     * host-native new window, e.g. a movable VS Code editor panel. Return true
+     * if handled. This is an opt-in capability: chat-ui only shows the "open in
+     * new window" action when a host provides it. A host may decline a specific
+     * message (return false, e.g. iframe-backed content that can't be
+     * serialized into a window); there's no in-page fallback, so the click is
+     * simply a no-op in that case.
      */
-    expandMessage?(html: string, title?: string): boolean;
+    openMessageInWindow?(html: string, title?: string): boolean;
 }
 
 /**
diff --git a/ts/packages/chat-ui/styles/chat.css b/ts/packages/chat-ui/styles/chat.css
index f3da772eba..bdc1e16004 100644
--- a/ts/packages/chat-ui/styles/chat.css
+++ b/ts/packages/chat-ui/styles/chat.css
@@ -1057,74 +1057,6 @@
 }
 
 /* Full-window image lightbox (click an image in a bubble to open). */
-/* =========================================================================
-   Message expand overlay: a full-window view of a single message's content,
-   opened from the "Expand" action button for easier reading of long replies.
-   ========================================================================= */
-.chat-expand-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 9000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  background: var(--chat-lightbox-backdrop, rgba(0, 0, 0, 0.6));
-  outline: none;
-}
-.chat-expand-panel {
-  display: flex;
-  flex-direction: column;
-  width: min(900px, 100%);
-  max-height: 100%;
-  background: var(--chat-expand-background, #fff);
-  color: inherit;
-  border: 1px solid var(--chat-expand-border, rgba(127, 127, 127, 0.3));
-  border-radius: 8px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-  overflow: hidden;
-}
-.chat-expand-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  flex: 0 0 auto;
-  padding: 6px 6px 6px 14px;
-  border-bottom: 1px solid var(--chat-expand-border, rgba(127, 127, 127, 0.25));
-  font-weight: 600;
-}
-/* Both expand surfaces reuse .chat-message-content for typography; flatten its
-   bubble chrome (shadow + rounding). */
-.chat-expand-body,
-.chat-expand-page {
-  box-shadow: none;
-  border-radius: 0;
-}
-/* Overlay body: fills the panel and scrolls. */
-.chat-expand-body {
-  flex: 1 1 auto;
-  overflow: auto;
-  padding: 16px 18px;
-}
-
-/* Standalone page (a host-native window, e.g. a VS Code editor panel): a
-   centered, readable column. */
-.chat-expand-page {
-  max-width: 900px;
-  margin: 0 auto;
-  padding: 16px 20px;
-}
-/* The expand panel is a standalone scrollable page; some hosts set the chat
-   body to a fixed-height, overflow-hidden flex layout (media/chat.css), so
-   restore normal document scrolling for the panel body. */
-body.chat-expand-standalone {
-  height: auto;
-  min-height: 100vh;
-  overflow: auto;
-  display: block;
-}
-
 .chat-lightbox-overlay {
   position: fixed;
   inset: 0;
diff --git a/ts/packages/chat-ui/test/feedbackWidget.spec.ts b/ts/packages/chat-ui/test/feedbackWidget.spec.ts
index de62cbf740..370de771d3 100644
--- a/ts/packages/chat-ui/test/feedbackWidget.spec.ts
+++ b/ts/packages/chat-ui/test/feedbackWidget.spec.ts
@@ -5,12 +5,12 @@ import { describe, it, expect, afterEach, jest } from "@jest/globals";
 import { FeedbackWidget } from "../src/feedbackWidget.js";
 import type { FeedbackController } from "../src/feedbackWidget.js";
 
-// FeedbackWidget renders the per-message action row (copy / expand / rate).
-// These tests run under jsdom (see jest.config.cjs).
+// FeedbackWidget renders the per-message action row (copy / open-in-window /
+// rate). These tests run under jsdom (see jest.config.cjs).
 
 function makeWidget(
     messageHtml = "<p>hello</p>",
-    expandMessage?: () => boolean,
+    openInWindow?: () => boolean,
 ) {
     const container = document.createElement("div");
     const messageDiv = document.createElement("div");
@@ -26,7 +26,7 @@ function makeWidget(
             bodyDiv: document.createElement("div"),
             headerDiv: document.createElement("div"),
             messageDiv,
-            expandMessage,
+            openInWindow,
         },
         controller,
         "footer-always",
@@ -38,124 +38,46 @@ afterEach(() => {
     document.body.replaceChildren();
 });
 
-describe("FeedbackWidget expand", () => {
-    it("places the expand button after copy and before thumbs-up", () => {
+describe("FeedbackWidget open-in-window", () => {
+    it("omits the open-in-window button when the host has no native window", () => {
         const { container } = makeWidget();
         const actions = Array.from(
             container.querySelectorAll<HTMLElement>(".chat-action-button"),
         ).map((b) => b.dataset.action);
+        expect(actions).toEqual(["copy", "thumbs-up", "thumbs-down", "more"]);
+    });
+
+    it("places the open-in-window button after copy when the host supports it", () => {
+        const { container } = makeWidget("<p>x</p>", () => true);
+        const actions = Array.from(
+            container.querySelectorAll<HTMLElement>(".chat-action-button"),
+        ).map((b) => b.dataset.action);
         expect(actions).toEqual([
             "copy",
-            "expand",
+            "open-window",
             "thumbs-up",
             "thumbs-down",
             "more",
         ]);
     });
 
-    it("delegates to a host expand callback instead of the overlay", () => {
-        const expandMessage = jest.fn(() => true);
-        const { container } = makeWidget("<p>x</p>", expandMessage);
-        container
-            .querySelector<HTMLButtonElement>('[data-action="expand"]')!
-            .click();
-        expect(expandMessage).toHaveBeenCalledTimes(1);
-        expect(document.querySelector(".chat-expand-overlay")).toBeNull();
-    });
-
-    it("falls back to the overlay when the host callback returns false", () => {
-        const expandMessage = jest.fn(() => false);
-        const { container } = makeWidget("<p>x</p>", expandMessage);
-        container
-            .querySelector<HTMLButtonElement>('[data-action="expand"]')!
-            .click();
-        expect(expandMessage).toHaveBeenCalledTimes(1);
-        expect(document.querySelector(".chat-expand-overlay")).not.toBeNull();
-        document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
-    });
-
-    it("moves the message content into the overlay and back when closed", () => {
-        const { container, messageDiv } = makeWidget("<p>expanded content</p>");
+    it("invokes the host callback when the button is clicked", () => {
+        const openInWindow = jest.fn(() => true);
+        const { container } = makeWidget("<p>x</p>", openInWindow);
         container
-            .querySelector<HTMLButtonElement>('[data-action="expand"]')!
+            .querySelector<HTMLButtonElement>('[data-action="open-window"]')!
             .click();
-
-        const overlay = document.querySelector(".chat-expand-overlay");
-        expect(overlay?.textContent).toContain("expanded content");
-        // Content is moved out of the bubble while expanded...
-        expect(messageDiv.textContent).toBe("");
-
-        document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
-        expect(document.querySelector(".chat-expand-overlay")).toBeNull();
-        // ...and returned to it on close.
-        expect(messageDiv.textContent).toContain("expanded content");
+        expect(openInWindow).toHaveBeenCalledTimes(1);
     });
 
-    it("closes on a backdrop click but stays open on a panel click", () => {
-        const { container } = makeWidget();
+    it("does nothing when the host declines the message (no fallback)", () => {
+        const openInWindow = jest.fn(() => false);
+        const { container } = makeWidget("<p>x</p>", openInWindow);
         container
-            .querySelector<HTMLButtonElement>('[data-action="expand"]')!
+            .querySelector<HTMLButtonElement>('[data-action="open-window"]')!
             .click();
-        const overlay = document.querySelector<HTMLElement>(
-            ".chat-expand-overlay",
-        )!;
-        // Click inside the panel: stays open.
-        overlay
-            .querySelector(".chat-expand-panel")!
-            .dispatchEvent(new MouseEvent("click", { bubbles: true }));
-        expect(document.querySelector(".chat-expand-overlay")).not.toBeNull();
-        // Click the backdrop (the overlay itself): closes.
-        overlay.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-        expect(document.querySelector(".chat-expand-overlay")).toBeNull();
-    });
-
-    it("closes on the close button", () => {
-        const { container } = makeWidget();
-        container
-            .querySelector<HTMLButtonElement>('[data-action="expand"]')!
-            .click();
-        document
-            .querySelector<HTMLButtonElement>(
-                '.chat-expand-overlay [data-action="close"]',
-            )!
-            .click();
-        expect(document.querySelector(".chat-expand-overlay")).toBeNull();
-    });
-
-    it("replaces rather than stacks a second overlay", () => {
-        const { container } = makeWidget();
-        const btn = container.querySelector<HTMLButtonElement>(
-            '[data-action="expand"]',
-        )!;
-        btn.click();
-        btn.click();
-        expect(document.querySelectorAll(".chat-expand-overlay").length).toBe(
-            1,
-        );
-    });
-
-    it("preserves interactivity by moving (not cloning) the content", () => {
-        const clicked = jest.fn();
-        const { container, messageDiv } = makeWidget("");
-        const action = document.createElement("button");
-        action.textContent = "action";
-        action.addEventListener("click", () => clicked());
-        messageDiv.appendChild(action);
-
-        container
-            .querySelector<HTMLButtonElement>('[data-action="expand"]')!
-            .click();
-        const overlay = document.querySelector<HTMLElement>(
-            ".chat-expand-overlay",
-        )!;
-        const moved = Array.from(overlay.querySelectorAll("button")).find(
-            (b) => b.textContent === "action",
-        )!;
-        // Same node moved in (not a clone), so its listener still fires.
-        expect(moved).toBe(action);
-        moved.click();
-        expect(clicked).toHaveBeenCalledTimes(1);
-
-        document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+        expect(openInWindow).toHaveBeenCalledTimes(1);
+        // The click is a no-op: no modal/dialog fallback surface appears.
+        expect(document.querySelector('[role="dialog"]')).toBeNull();
     });
 });
diff --git a/ts/packages/vscode-shell/esbuild.mjs b/ts/packages/vscode-shell/esbuild.mjs
index 3ca35eab7b..767520a50e 100644
--- a/ts/packages/vscode-shell/esbuild.mjs
+++ b/ts/packages/vscode-shell/esbuild.mjs
@@ -42,24 +42,28 @@ const webviewConfig = {
 };
 
 /** @type {import('esbuild').BuildOptions} */
-const expandConfig = {
+const messageWindowConfig = {
     ...webviewConfig,
-    entryPoints: ["src/webview/expand.ts"],
-    outfile: "dist/expand.js",
+    entryPoints: ["src/webview/messageWindow.ts"],
+    outfile: "dist/messageWindow.js",
 };
 
 async function build() {
     if (watch) {
         const extCtx = await esbuild.context(extensionConfig);
         const webCtx = await esbuild.context(webviewConfig);
-        const expandCtx = await esbuild.context(expandConfig);
-        await Promise.all([extCtx.watch(), webCtx.watch(), expandCtx.watch()]);
+        const messageWindowCtx = await esbuild.context(messageWindowConfig);
+        await Promise.all([
+            extCtx.watch(),
+            webCtx.watch(),
+            messageWindowCtx.watch(),
+        ]);
         console.log("Watching for changes...");
     } else {
         await Promise.all([
             esbuild.build(extensionConfig),
             esbuild.build(webviewConfig),
-            esbuild.build(expandConfig),
+            esbuild.build(messageWindowConfig),
         ]);
         console.log("Build complete");
     }
diff --git a/ts/packages/vscode-shell/src/agentServerBridge.ts b/ts/packages/vscode-shell/src/agentServerBridge.ts
index 1580e3a03b..2fccbd35d5 100644
--- a/ts/packages/vscode-shell/src/agentServerBridge.ts
+++ b/ts/packages/vscode-shell/src/agentServerBridge.ts
@@ -194,8 +194,11 @@ export class AgentServerBridge {
     private onWebviewFocusChanged?: (focused: boolean) => void;
     /** If set, connect() will join this existing session instead of creating one. */
     private restoreSessionId: string | undefined;
-    /** Host callback that opens a message's content in a separate editor panel. */
-    private readonly onExpandMessage?: (html: string, title?: string) => void;
+    /** Host callback that opens a message's content in a new editor panel. */
+    private readonly onOpenMessageWindow?: (
+        html: string,
+        title?: string,
+    ) => void;
 
     // Per-session command-completion controller (lazy).  Each webview that
     // requests completions is tracked here; replies are sent only to the
@@ -219,14 +222,14 @@ export class AgentServerBridge {
         defaultSessionName?: string;
         displayName?: string;
         restoreSessionId?: string;
-        onExpandMessage?: (html: string, title?: string) => void;
+        onOpenMessageWindow?: (html: string, title?: string) => void;
     }) {
         this.ownsStatusBar = opts?.ownsStatusBar ?? true;
         this.ephemeralSessionName = opts?.ephemeralSessionName;
         this.defaultSessionName = opts?.defaultSessionName;
         this.displayName = opts?.displayName ?? "TypeAgent";
         this.restoreSessionId = opts?.restoreSessionId;
-        this.onExpandMessage = opts?.onExpandMessage;
+        this.onOpenMessageWindow = opts?.onOpenMessageWindow;
         if (this.ownsStatusBar) {
             this.statusBarItem = vscode.window.createStatusBarItem(
                 vscode.StatusBarAlignment.Left,
@@ -1488,10 +1491,10 @@ export class AgentServerBridge {
                     void vscode.env.openExternal(vscode.Uri.parse(msg.href));
                 }
                 break;
-            case "expandMessage":
-                // Open the message content in a separate editor panel (a
-                // movable window). The extension owns the panel.
-                this.onExpandMessage?.(msg.html, msg.title);
+            case "openMessageWindow":
+                // Open the message content in a new editor panel (a movable
+                // window). The extension owns the panel.
+                this.onOpenMessageWindow?.(msg.html, msg.title);
                 break;
             case "getSpeechToken": {
                 // Relay a speech-token request to the agent server (which owns
diff --git a/ts/packages/vscode-shell/src/bridge/messages.ts b/ts/packages/vscode-shell/src/bridge/messages.ts
index e99e00fe8a..2148d1e995 100644
--- a/ts/packages/vscode-shell/src/bridge/messages.ts
+++ b/ts/packages/vscode-shell/src/bridge/messages.ts
@@ -307,8 +307,8 @@ export type BridgeFromWebviewMessage =
     // Double-Esc gesture: cancel every queued + running entry on the session.
     | { type: "cancelAllQueuedAndRunning" }
     | { type: "openExternal"; href: string }
-    // Open a message's content in a separate editor panel (a movable window).
-    | { type: "expandMessage"; html: string; title?: string }
+    // Open a message's content in a new editor panel (a movable window).
+    | { type: "openMessageWindow"; html: string; title?: string }
     // Request a fresh Azure Speech authorization token from the server
     // (relayed via the bridge). Correlated by `id`.
     | { type: "getSpeechToken"; id: number }
diff --git a/ts/packages/vscode-shell/src/extension.ts b/ts/packages/vscode-shell/src/extension.ts
index 5da1daee81..021985089a 100644
--- a/ts/packages/vscode-shell/src/extension.ts
+++ b/ts/packages/vscode-shell/src/extension.ts
@@ -41,7 +41,8 @@ export function activate(context: vscode.ExtensionContext): void {
         restoreSessionId: sidebarRestoreId,
         // Sidebar-only default; tab panels stay ephemeral.
         defaultSessionName: "VS Code",
-        onExpandMessage: (html, title) => openExpandPanel(context, html, title),
+        onOpenMessageWindow: (html, title) =>
+            openMessageWindowPanel(context, html, title),
     });
 
     // Persist the sidebar's current session so reopening VS Code rejoins it
@@ -578,17 +579,18 @@ function openNewChatPanel(
 
 /**
  * Open a message's rendered content in a standalone editor panel (a movable /
- * snappable window) for easier reading. The panel HTML is static; the content
- * is delivered over postMessage and re-sanitized in the webview (expand.ts), so
- * no HTML is constructed from the message on the extension side.
+ * snappable new window) for easier reading. The panel HTML is static; the
+ * content is delivered over postMessage and re-sanitized in the webview
+ * (messageWindow.ts), so no HTML is constructed from the message on the
+ * extension side.
  */
-function openExpandPanel(
+function openMessageWindowPanel(
     context: vscode.ExtensionContext,
     html: string,
     title?: string,
 ): void {
     const panel = vscode.window.createWebviewPanel(
-        "vscode-shell.expandPanel",
+        "vscode-shell.messageWindow",
         title && title.trim() ? title : "TypeAgent Message",
         vscode.ViewColumn.Beside,
         {
@@ -604,16 +606,16 @@ function openExpandPanel(
     const webview = panel.webview;
     const asUri = (...parts: string[]) =>
         stampedWebviewUri(webview, context.extensionUri, ...parts);
-    const scriptUri = asUri("dist", "expand.js");
+    const scriptUri = asUri("dist", "messageWindow.js");
     const styleUri = asUri("media", "chat.css");
     const codiconUri = asUri("media", "codicon.css");
     const nonce = createWebviewNonce();
 
     // Register the listener before setting the HTML so we can't miss the
-    // webview's initial "expandReady".
+    // webview's initial "messageWindowReady".
     const sub = webview.onDidReceiveMessage((msg) => {
-        if (msg?.type === "expandReady") {
-            void webview.postMessage({ type: "expandContent", html });
+        if (msg?.type === "messageWindowReady") {
+            void webview.postMessage({ type: "messageWindowContent", html });
         } else if (
             msg?.type === "openExternal" &&
             typeof msg.href === "string"
@@ -640,8 +642,8 @@ function openExpandPanel(
     <link href="${styleUri}" rel="stylesheet">
     <title>TypeAgent Message</title>
 </head>
-<body class="chat-expand-standalone">
-    <div id="expand-root" class="chat-expand-page chat-message-content"></div>
+<body class="chat-message-window-standalone">
+    <div id="message-window-root" class="chat-message-window-page chat-message-content"></div>
     <script nonce="${nonce}" src="${scriptUri}"></script>
 </body>
 </html>`;
@@ -664,7 +666,8 @@ function attachChatPanel(
         ephemeralSessionName: opts.ephemeralSessionName,
         displayName: opts.displayName,
         restoreSessionId: opts.restoreSessionId,
-        onExpandMessage: (html, title) => openExpandPanel(context, html, title),
+        onOpenMessageWindow: (html, title) =>
+            openMessageWindowPanel(context, html, title),
     });
 
     const entry: ChatEntry = {
diff --git a/ts/packages/vscode-shell/src/webview/main.ts b/ts/packages/vscode-shell/src/webview/main.ts
index b09326c540..aa219072be 100644
--- a/ts/packages/vscode-shell/src/webview/main.ts
+++ b/ts/packages/vscode-shell/src/webview/main.ts
@@ -184,11 +184,11 @@ const chatPanel = new ChatPanel(rootEl, {
         handleLinkClick: (href: string, _target: string | null) => {
             vscode.postMessage({ type: "openExternal", href });
         },
-        // Open the message in a separate VS Code editor panel (movable /
-        // snappable) rather than the in-page overlay. The extension host owns
-        // the panel; it re-sanitizes the content before rendering.
-        expandMessage: (html: string, title?: string) => {
-            vscode.postMessage({ type: "expandMessage", html, title });
+        // Open the message in a new VS Code editor panel (movable / snappable)
+        // rather than an in-page overlay. The extension host owns the panel; it
+        // re-sanitizes the content before rendering.
+        openMessageInWindow: (html: string, title?: string) => {
+            vscode.postMessage({ type: "openMessageWindow", html, title });
             return true;
         },
     },
diff --git a/ts/packages/vscode-shell/src/webview/expand.ts b/ts/packages/vscode-shell/src/webview/messageWindow.ts
similarity index 70%
rename from ts/packages/vscode-shell/src/webview/expand.ts
rename to ts/packages/vscode-shell/src/webview/messageWindow.ts
index a0674142ed..dfecfd8c49 100644
--- a/ts/packages/vscode-shell/src/webview/expand.ts
+++ b/ts/packages/vscode-shell/src/webview/messageWindow.ts
@@ -1,11 +1,12 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-// Standalone "expanded message" webview. Runs in a separate VS Code editor
-// panel (which the user can move/snap) and shows one chat message's rendered
-// content at full size. The extension host sends the (already-sanitized)
-// content over postMessage; we re-sanitize with DOMPurify before rendering as
-// defense in depth, so no HTML is constructed from input on the extension side.
+// Standalone "open in new window" message view. Runs in a separate VS Code
+// editor panel (which the user can move/snap) and shows one chat message's
+// rendered content at full size. The extension host sends the (already-
+// sanitized) content over postMessage; we re-sanitize with DOMPurify before
+// rendering as defense in depth, so no HTML is constructed from input on the
+// extension side.
 
 import DOMPurify from "dompurify";
 import chatPanelStyles from "chat-ui/styles";
@@ -17,11 +18,15 @@ injectStyle(vscodeThemeStyles as unknown as string);
 
 const vscode = acquireVsCodeApi();
 
-const root = document.getElementById("expand-root")!;
+const root = document.getElementById("message-window-root")!;
 
 window.addEventListener("message", (event) => {
     const msg = event.data;
-    if (msg && msg.type === "expandContent" && typeof msg.html === "string") {
+    if (
+        msg &&
+        msg.type === "messageWindowContent" &&
+        typeof msg.html === "string"
+    ) {
         root.innerHTML = DOMPurify.sanitize(msg.html, {
             ADD_ATTR: ["target"],
         }) as string;
@@ -48,4 +53,4 @@ root.addEventListener("click", (event) => {
 });
 
 // Signal the host that we're ready to receive the content.
-vscode.postMessage({ type: "expandReady" });
+vscode.postMessage({ type: "messageWindowReady" });
diff --git a/ts/packages/vscode-shell/src/webview/vscode-theme.css b/ts/packages/vscode-shell/src/webview/vscode-theme.css
index 8f1cfd73be..45b808d2b1 100644
--- a/ts/packages/vscode-shell/src/webview/vscode-theme.css
+++ b/ts/packages/vscode-shell/src/webview/vscode-theme.css
@@ -389,12 +389,25 @@
   background-color: transparent;
 }
 
-/* Message expand overlay: theme the panel to match the editor (the shared
-   base in chat-ui/styles/chat.css only sets a light-mode fallback). */
-.chat-expand-panel {
-  background: var(--vscode-editor-background);
-  color: var(--vscode-foreground);
-  border-color: var(--vscode-widget-border, rgba(127, 127, 127, 0.3));
+/* Standalone "open in new window" page (a movable VS Code editor panel; see
+   webview/messageWindow.ts). This host is the only one that renders the page,
+   so its layout lives here rather than in chat-ui's shared stylesheet. Reuses
+   .chat-message-content typography but flattens the bubble chrome (shadow +
+   rounding) into a centered, readable column. */
+.chat-message-window-page {
+  box-shadow: none;
+  border-radius: 0;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 16px 20px;
+}
+/* The page is a standalone scrollable document; the chat body's fixed-height,
+   overflow-hidden flex layout doesn't apply here, so restore normal scrolling. */
+body.chat-message-window-standalone {
+  height: auto;
+  min-height: 100vh;
+  overflow: auto;
+  display: block;
 }
 
 /* ── In-webview camera capture overlay (vscode-shell only) ──────────

From 9ab74c3e46b01202a4f087cde60be2ead6992def Mon Sep 17 00:00:00 2001
From: typeagent-bot <typeagent-bot[bot]@users.noreply.github.com>
Date: Wed, 22 Jul 2026 04:47:06 +0000
Subject: [PATCH 15/15] docs: regenerate README.AUTOGEN.md, command reference,
 and action browser

---
 ts/packages/chat-ui/README.AUTOGEN.md      | 10 +++++-----
 ts/packages/vscode-shell/README.AUTOGEN.md |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/ts/packages/chat-ui/README.AUTOGEN.md b/ts/packages/chat-ui/README.AUTOGEN.md
index 73b843a4ae..8e699568f4 100644
--- a/ts/packages/chat-ui/README.AUTOGEN.md
+++ b/ts/packages/chat-ui/README.AUTOGEN.md
@@ -3,7 +3,7 @@
 
 <!-- AUTOGEN:DOCS:START -->
 
-<!-- AUTOGEN:DOCS:HASH:sha256=92386c624517a2f053db71598075498dc14acc5ce47853112616b61cfbd18a05 -->
+<!-- AUTOGEN:DOCS:HASH:sha256=64bf1c607a43b00bcabebf7ffcf8af46af0d2498888c1f6576ff46ca3c7a14fb -->
 <!-- AUTOGEN:DOCS:SOURCE: ./README.md (hand-written documentation; this file is the AI-generated companion) -->
 
 # chat-ui — AI-generated documentation
@@ -12,13 +12,13 @@
 
 ## Overview
 
-The `chat-ui` package provides a shared, framework-free chat user interface for TypeAgent applications. It is designed to deliver a consistent and interactive chat experience across multiple platforms, including the VS Code shell extension, the browser extension chat panel, and the Visual Studio extension webview. The package includes components for rendering user and agent messages, handling streaming updates, replaying chat history, managing connection status, and collecting user feedback.
+The `chat-ui` package provides a shared, framework-free chat user interface for TypeAgent applications. It is designed to ensure a consistent and interactive chat experience across multiple platforms, including the VS Code shell extension, the browser extension chat panel, and the Visual Studio extension webview. The package includes components for rendering user and agent messages, handling streaming updates, replaying chat history, managing connection status, and collecting user feedback.
 
 ## What it does
 
-The `chat-ui` package offers a comprehensive set of tools and components to build and manage chat interfaces. Its key features include:
+The `chat-ui` package offers a set of tools and components to build and manage chat interfaces. Its primary features include:
 
-- **ChatPanel**: The central component for rendering the chat interface. It supports:
+- **ChatPanel**: The core component for rendering the chat interface. It supports:
 
   - Adding user and agent messages via `addAgentMessage`.
   - Updating display metadata with `setDisplayInfo`.
@@ -120,6 +120,6 @@ External: `ansi_up`, `dompurify`, `markdown-it`
 
 ---
 
-_Auto-generated against commit `8ec451103180b2a383dfb4e1c7f80c1ad50e9d35` on `2026-07-22T00:05:15.961Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter chat-ui docs:verify-links` to spot-check._
+_Auto-generated against commit `0b06d6a1cc9d93888e91e217057d9c148b3cc49f` on `2026-07-22T04:45:01.388Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter chat-ui docs:verify-links` to spot-check._
 
 <!-- AUTOGEN:DOCS:END -->
diff --git a/ts/packages/vscode-shell/README.AUTOGEN.md b/ts/packages/vscode-shell/README.AUTOGEN.md
index bd15136e5d..12f187e849 100644
--- a/ts/packages/vscode-shell/README.AUTOGEN.md
+++ b/ts/packages/vscode-shell/README.AUTOGEN.md
@@ -3,7 +3,7 @@
 
 <!-- AUTOGEN:DOCS:START -->
 
-<!-- AUTOGEN:DOCS:HASH:sha256=7344d6fb9f826f6f6d2223226d5a8e917929c544cbc089f4e3aa6e26c0a13372 -->
+<!-- AUTOGEN:DOCS:HASH:sha256=e8d3ae3208d6e72dbfc73b40036923060e4a18350a5e57fc396f8bc2160c61d6 -->
 <!-- AUTOGEN:DOCS:SOURCE: ./README.md (hand-written documentation; this file is the AI-generated companion) -->
 
 # vscode-shell — AI-generated documentation
@@ -12,11 +12,11 @@
 
 ## Overview
 
-The `vscode-shell` package integrates the TypeAgent shell chat into Visual Studio Code, enabling users to interact with TypeAgent conversations directly within the editor. It provides a chat interface accessible via a side panel and editor tabs, allowing for efficient conversation management and interaction.
+The `vscode-shell` package integrates the TypeAgent shell chat into Visual Studio Code, allowing users to interact with TypeAgent conversations directly within the editor. It provides a chat interface accessible via a side panel and editor tabs, enabling efficient conversation management and interaction.
 
 ## What it does
 
-The `vscode-shell` package offers a comprehensive chat interface within Visual Studio Code, designed to work with the TypeAgent ecosystem. Key features include:
+The `vscode-shell` package provides a rich chat interface within Visual Studio Code, designed to work with the TypeAgent ecosystem. Its key features include:
 
 - **Chat Interface**:
 
@@ -174,6 +174,6 @@ External: `ansi_up`, `debug`, `dompurify`, `isomorphic-ws`, `markdown-it`, `micr
 
 ---
 
-_Auto-generated against commit `8ec451103180b2a383dfb4e1c7f80c1ad50e9d35` on `2026-07-22T00:05:15.961Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter vscode-shell docs:verify-links` to spot-check._
+_Auto-generated against commit `0b06d6a1cc9d93888e91e217057d9c148b3cc49f` on `2026-07-22T04:45:01.388Z` by `docs-generate.yml`. Links validated at that commit; the working tree may have drifted by up to 24h. Re-run `pnpm --filter vscode-shell docs:verify-links` to spot-check._
 
 <!-- AUTOGEN:DOCS:END -->