diff --git a/ts/packages/chat-ui/README.AUTOGEN.md b/ts/packages/chat-ui/README.AUTOGEN.md
index 5aba2c0892..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=7191e8d7c94101c950d1de2226b1ff176f85c6ba27a92d65fe1fb2bd14edf01d -->
+<!-- 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 range of features to support dynamic and interactive chat interfaces:
+The `chat-ui` package offers a set of tools and components to build and manage 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 via `addAgentMessage`.
   - Updating display metadata with `setDisplayInfo`.
@@ -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 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
 
@@ -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.
@@ -120,6 +120,6 @@ External: `ansi_up`, `dompurify`, `markdown-it`
 
 ---
 
-_Auto-generated against commit `abfa7f206e497772254557b7d65cf9252a4728b2` on `2026-07-21T21:21:02.587Z` 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/chat-ui/src/chatPanel.ts b/ts/packages/chat-ui/src/chatPanel.ts
index 80319f024a..5d3e944c95 100644
--- a/ts/packages/chat-ui/src/chatPanel.ts
+++ b/ts/packages/chat-ui/src/chatPanel.ts
@@ -1874,11 +1874,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();
             }
         }
     }
@@ -2541,6 +2547,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);
@@ -2560,6 +2570,7 @@ export class ChatPanel {
                 for (const prior of priorSteps) {
                     if (prior !== stepContainer) {
                         prior.clearRunning();
+                        prior.collapseReasoning();
                     }
                 }
             }
@@ -2630,8 +2641,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
@@ -2670,6 +2690,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");
@@ -3722,6 +3745,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
@@ -5188,6 +5222,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
@@ -5593,12 +5629,31 @@ class AgentMessageContainer {
                 bodyDiv: this.messageDiv,
                 headerDiv: this.timestampDiv,
                 messageDiv: this.messageDiv,
+                openInWindow: this.platformAdapter.openMessageInWindow
+                    ? () => this.openMessageInWindow()
+                    : undefined,
             },
             controller,
             variant,
         );
     }
 
+    // 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.openMessageInWindow?.(
+                this.messageDiv.innerHTML,
+                this.nameSpan.textContent ?? undefined,
+            ) ?? false
+        );
+    }
+
     public setFeedbackState(entry: UserFeedbackEntry | null) {
         this.feedbackWidget?.setFeedbackState(entry);
     }
@@ -5634,6 +5689,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",
         )!;
@@ -5675,6 +5735,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/src/feedbackWidget.ts b/ts/packages/chat-ui/src/feedbackWidget.ts
index b75a6af2b4..d2eef05e70 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 / 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.
  */
 
 import type {
@@ -16,6 +16,7 @@ import type {
 import {
     iconCheck,
     iconCopy,
+    iconOpenInWindow,
     iconMore,
     iconThumbsDown,
     iconThumbsUp,
@@ -40,6 +41,15 @@ type FeedbackHost = {
     bodyDiv: HTMLElement;
     headerDiv: HTMLElement;
     messageDiv: HTMLElement;
+    /**
+     * 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).
+     */
+    openInWindow?: () => boolean;
 };
 
 type ActionRow = {
@@ -111,6 +121,26 @@ export class FeedbackWidget {
                 () => this.copyMessage(copyBtn),
             );
             root.appendChild(copyBtn);
+
+            // "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(
diff --git a/ts/packages/chat-ui/src/icons.ts b/ts/packages/chat-ui/src/icons.ts
index 253d7715d6..807d94f3ff 100644
--- a/ts/packages/chat-ui/src/icons.ts
+++ b/ts/packages/chat-ui/src/icons.ts
@@ -117,3 +117,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 iconOpenInWindow() {
+    // "maximize" window: four corner brackets forming a frame; reads as
+    // "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 7161ee2192..e8a590a8c4 100644
--- a/ts/packages/chat-ui/src/platformAdapter.ts
+++ b/ts/packages/chat-ui/src/platformAdapter.ts
@@ -10,6 +10,17 @@
 export interface PlatformAdapter {
     /** Handle a click on an <a> link in rendered content. */
     handleLinkClick(href: string, target: string | null): void;
+
+    /**
+     * Open a message's content (an HTML string, plus an optional title) in a
+     * 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.
+     */
+    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 32fd2af489..fb098c57dc 100644
--- a/ts/packages/chat-ui/styles/chat.css
+++ b/ts/packages/chat-ui/styles/chat.css
@@ -1032,6 +1032,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;
@@ -1684,6 +1722,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 (a blank line) that separates a reasoning answer (prose) from the
+   "Thinking"/tool trail above it. */
+.chat-reasoning-answer {
+  margin-top: 18px;
+}
+
 /* Clickable timestamp to toggle action details */
 .chat-timestamp-toggle {
   cursor: pointer;
@@ -1858,6 +1935,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/chat-ui/test/feedbackWidget.spec.ts b/ts/packages/chat-ui/test/feedbackWidget.spec.ts
new file mode 100644
index 0000000000..370de771d3
--- /dev/null
+++ b/ts/packages/chat-ui/test/feedbackWidget.spec.ts
@@ -0,0 +1,83 @@
+// 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 / open-in-window /
+// rate). These tests run under jsdom (see jest.config.cjs).
+
+function makeWidget(
+    messageHtml = "<p>hello</p>",
+    openInWindow?: () => boolean,
+) {
+    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,
+            openInWindow,
+        },
+        controller,
+        "footer-always",
+    );
+    return { container, messageDiv, widget };
+}
+
+afterEach(() => {
+    document.body.replaceChildren();
+});
+
+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",
+            "open-window",
+            "thumbs-up",
+            "thumbs-down",
+            "more",
+        ]);
+    });
+
+    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="open-window"]')!
+            .click();
+        expect(openInWindow).toHaveBeenCalledTimes(1);
+    });
+
+    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="open-window"]')!
+            .click();
+        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/shell/README.AUTOGEN.md b/ts/packages/shell/README.AUTOGEN.md
index d7fe610724..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=dbaa740e7ff735e14b9f9a6676ef77b467f1b53f27d42a0b2318258d3f39ecc8 -->
+<!-- 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,7 +12,7 @@
 
 ## Overview
 
-The `agent-shell` package is a TypeScript library that provides the graphical user interface (GUI) for the TypeAgent ecosystem. Built on Electron, it serves as a personal agent interface for processing user requests, managing conversations, and integrating with other components of the TypeAgent system. The shell supports both text and voice input, multi-conversation management, and can operate in either local or remote 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
 
@@ -176,6 +176,6 @@ _6 environment variables referenced from `./src/` (set in `ts/.env` or your shel
 
 ---
 
-_Auto-generated against commit `2353118509b02d4e8cf94303aea43ad6726f610c` on `2026-07-21T19:50:04.245Z` 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/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/README.AUTOGEN.md b/ts/packages/vscode-shell/README.AUTOGEN.md
index 2f05316f25..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=48492cc0b0a2aa8a4e0d5bc7cacb70fbd8b903c4448bedf64fb6b67f345bd40c -->
+<!-- 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,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, 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 enables a rich chat interface within Visual Studio Code, designed to interact with the TypeAgent ecosystem. Its 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**:
 
   - 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**:
 
@@ -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 14 more under `./src/`.
 
 ---
 
-_Auto-generated against commit `abfa7f206e497772254557b7d65cf9252a4728b2` on `2026-07-21T21:21:02.587Z` 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 -->
diff --git a/ts/packages/vscode-shell/esbuild.mjs b/ts/packages/vscode-shell/esbuild.mjs
index e7ce112677..767520a50e 100644
--- a/ts/packages/vscode-shell/esbuild.mjs
+++ b/ts/packages/vscode-shell/esbuild.mjs
@@ -41,16 +41,29 @@ const webviewConfig = {
     },
 };
 
+/** @type {import('esbuild').BuildOptions} */
+const messageWindowConfig = {
+    ...webviewConfig,
+    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);
-        await Promise.all([extCtx.watch(), webCtx.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(messageWindowConfig),
         ]);
         console.log("Build complete");
     }
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/agentServerBridge.ts b/ts/packages/vscode-shell/src/agentServerBridge.ts
index 9330f32d06..2fccbd35d5 100644
--- a/ts/packages/vscode-shell/src/agentServerBridge.ts
+++ b/ts/packages/vscode-shell/src/agentServerBridge.ts
@@ -194,6 +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 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
@@ -217,12 +222,14 @@ export class AgentServerBridge {
         defaultSessionName?: string;
         displayName?: string;
         restoreSessionId?: string;
+        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.onOpenMessageWindow = opts?.onOpenMessageWindow;
         if (this.ownsStatusBar) {
             this.statusBarItem = vscode.window.createStatusBarItem(
                 vscode.StatusBarAlignment.Left,
@@ -1484,6 +1491,11 @@ export class AgentServerBridge {
                     void vscode.env.openExternal(vscode.Uri.parse(msg.href));
                 }
                 break;
+            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
                 // 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..2148d1e995 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 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/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 f5280c5a07..021985089a 100644
--- a/ts/packages/vscode-shell/src/extension.ts
+++ b/ts/packages/vscode-shell/src/extension.ts
@@ -2,8 +2,10 @@
 // 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";
+import { stampedWebviewUri } from "./webviewResources.js";
 
 interface ChatEntry {
     bridge: AgentServerBridge;
@@ -39,6 +41,8 @@ export function activate(context: vscode.ExtensionContext): void {
         restoreSessionId: sidebarRestoreId,
         // Sidebar-only default; tab panels stay ephemeral.
         defaultSessionName: "VS Code",
+        onOpenMessageWindow: (html, title) =>
+            openMessageWindowPanel(context, html, title),
     });
 
     // Persist the sidebar's current session so reopening VS Code rejoins it
@@ -516,6 +520,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,
@@ -557,6 +577,78 @@ function openNewChatPanel(
     });
 }
 
+/**
+ * Open a message's rendered content in a standalone editor panel (a movable /
+ * 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 openMessageWindowPanel(
+    context: vscode.ExtensionContext,
+    html: string,
+    title?: string,
+): void {
+    const panel = vscode.window.createWebviewPanel(
+        "vscode-shell.messageWindow",
+        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 = panelIcon(context);
+
+    const webview = panel.webview;
+    const asUri = (...parts: string[]) =>
+        stampedWebviewUri(webview, context.extensionUri, ...parts);
+    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 "messageWindowReady".
+    const sub = webview.onDidReceiveMessage((msg) => {
+        if (msg?.type === "messageWindowReady") {
+            void webview.postMessage({ type: "messageWindowContent", 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-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>`;
+}
+
 function attachChatPanel(
     context: vscode.ExtensionContext,
     provider: ChatViewProvider,
@@ -567,18 +659,15 @@ 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,
         ephemeralSessionName: opts.ephemeralSessionName,
         displayName: opts.displayName,
         restoreSessionId: opts.restoreSessionId,
+        onOpenMessageWindow: (html, title) =>
+            openMessageWindowPanel(context, html, title),
     });
 
     const entry: ChatEntry = {
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 e77651e4ca..fbf94a6532 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();
 
@@ -194,6 +184,13 @@ const chatPanel = new ChatPanel(rootEl, {
         handleLinkClick: (href: string, _target: string | null) => {
             vscode.postMessage({ type: "openExternal", href });
         },
+        // 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;
+        },
     },
     // Mic + camera providers (see WEBVIEW_MEDIA_CAPTURE_SUPPORTED). Both are
     // undefined while getUserMedia is blocked in VS Code webviews, so neither
diff --git a/ts/packages/vscode-shell/src/webview/messageWindow.ts b/ts/packages/vscode-shell/src/webview/messageWindow.ts
new file mode 100644
index 0000000000..dfecfd8c49
--- /dev/null
+++ b/ts/packages/vscode-shell/src/webview/messageWindow.ts
@@ -0,0 +1,56 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// 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";
+import vscodeThemeStyles from "./vscode-theme.css";
+import { injectStyle } from "./injectStyle.js";
+
+injectStyle(chatPanelStyles as unknown as string);
+injectStyle(vscodeThemeStyles as unknown as string);
+
+const vscode = acquireVsCodeApi();
+
+const root = document.getElementById("message-window-root")!;
+
+window.addEventListener("message", (event) => {
+    const msg = event.data;
+    if (
+        msg &&
+        msg.type === "messageWindowContent" &&
+        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: "messageWindowReady" });
diff --git a/ts/packages/vscode-shell/src/webview/vscode-theme.css b/ts/packages/vscode-shell/src/webview/vscode-theme.css
index df7f76c597..45b808d2b1 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
@@ -399,6 +389,27 @@
   background-color: transparent;
 }
 
+/* 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) ──────────
    Mirrors the Electron shell's CameraView. Built by webview/cameraView.ts and
    toggled by the ChatPanel camera button (chat-ui imageCaptureProvider.
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}`;
+}