@theia/ai-chat-ui 1.76.0-next.7 → 1.76.0

package/src/browser/chat-response-renderer/index.ts

@@ -22,6 +22,7 @@ export * from './markdown-part-renderer';
 export * from './mcp-app-frame';
 export * from './mermaid-part-renderer';
 export * from './mermaid-rendering';
+export * from './spinner';
 export * from './text-part-renderer';
 export * from './toolcall-part-renderer';
 export * from './server-toolcall-part-renderer';

package/src/browser/chat-response-renderer/markdown-part-renderer.tsx

@@ -77,6 +77,39 @@ export class MarkdownPartRenderer implements ChatResponsePartRenderer<MarkdownCh
     }
 }
 
+export namespace MarkdownRendering {
+    /**
+     * Renders markdown into a detached fragment, exactly as {@link useMarkdownRendering} does before mounting it.
+     * Also used to read the rendered text of markdown that is not mounted, e.g. to search a chat session.
+     */
+    export function renderToFragment(markdown: string, skipSurroundingParagraph: boolean = false, blockExternalResourceLoading: boolean = true): DocumentFragment {
+        const markdownIt = markdownit({ html: true }).use(markdownitemoji.full);
+        const template = document.createElement('template');
+
+        // markdownIt always puts the content in a paragraph element, so we remove it if we don't want that
+        const html = skipSurroundingParagraph ? markdownIt.render(markdown).replace(/^<p>|<\/p>|<p><\/p>$/g, '') : markdownIt.render(markdown);
+
+        template.innerHTML = DOMPurify.sanitize(html, {
+            // DOMPurify usually strips non http(s) links from hrefs
+            // but we want to allow them (see handleClick via OpenerService in useMarkdownRendering)
+            ALLOW_UNKNOWN_PROTOCOLS: true,
+            ADD_TAGS: ['iframe', 'frame'],
+            ADD_ATTR: ['src', 'srcset', 'srcdoc', 'poster', 'href', 'xlink:href', 'data']
+        });
+        // Active embedded content is always blocked; trusted content (blockExternalResourceLoading=false)
+        // still renders its external URL resources directly.
+        blockExternalResources(template.content, blockExternalResourceLoading);
+        return template.content;
+    }
+
+    /** Prepares the text of a chat request text part for inline rendering. */
+    export function prepareRequestText(text: string): string {
+        return text
+            .replace(/^[\r\n]+|[\r\n]+$/g, '') // remove excessive new lines
+            .replace(/(^ )/g, '&nbsp;'); // enforce keeping space before
+    }
+}
+
 export interface DeclaredEventsEventListenerObject extends EventListenerObject {
     handledEvents?: (keyof HTMLElementEventMap)[];
 }
@@ -113,24 +146,8 @@ export const useMarkdownRendering = (
     const ref = useRef<HTMLDivElement | null>(null);
     const markdownString = typeof markdown === 'string' ? markdown : markdown.value;
     useEffect(() => {
-        const markdownIt = markdownit({ html: true }).use(markdownitemoji.full);
         const host = document.createElement('div');
-        const template = document.createElement('template');
-
-        // markdownIt always puts the content in a paragraph element, so we remove it if we don't want that
-        const html = skipSurroundingParagraph ? markdownIt.render(markdownString).replace(/^<p>|<\/p>|<p><\/p>$/g, '') : markdownIt.render(markdownString);
-
-        template.innerHTML = DOMPurify.sanitize(html, {
-            // DOMPurify usually strips non http(s) links from hrefs
-            // but we want to allow them (see handleClick via OpenerService below)
-            ALLOW_UNKNOWN_PROTOCOLS: true,
-            ADD_TAGS: ['iframe', 'frame'],
-            ADD_ATTR: ['src', 'srcset', 'srcdoc', 'poster', 'href', 'xlink:href', 'data']
-        });
-        // Active embedded content is always blocked; trusted content (blockExternalResourceLoading=false)
-        // still renders its external URL resources directly.
-        blockExternalResources(template.content, blockExternalResourceLoading);
-        host.appendChild(template.content);
+        host.appendChild(MarkdownRendering.renderToFragment(markdownString, skipSurroundingParagraph, blockExternalResourceLoading));
         while (ref?.current?.firstChild) {
             ref.current.removeChild(ref.current.firstChild);
         }

package/src/browser/chat-response-renderer/server-toolcall-part-renderer.tsx

@@ -20,9 +20,10 @@ import { ChatResponseContent, ServerToolCallChatResponseContent } from '@theia/a
 import * as React from '@theia/core/shared/react';
 import { ReactNode } from '@theia/core/shared/react';
 import { nls } from '@theia/core/lib/common/nls';
-import { codicon, HoverService, OpenerService } from '@theia/core/lib/browser';
+import { HoverService, OpenerService } from '@theia/core/lib/browser';
 import { renderToolCallResult } from './toolcall-result';
 import { condenseArguments, formatArgsForTooltip } from './toolcall-utils';
+import { Spinner } from './spinner';
 
 /**
  * Renders a {@link ServerToolCallChatResponseContent}: a tool the provider executed on its own
@@ -90,10 +91,6 @@ export class ServerToolCallPartRenderer implements ChatResponsePartRenderer<Serv
     }
 }
 
-const Spinner = () => (
-    <span className={`${codicon('loading')} theia-animation-spin`}></span>
-);
-
 interface ServerToolCallContentProps {
     response: ServerToolCallChatResponseContent;
     getArgumentsLabel: (args: string | undefined) => string;

package/src/browser/chat-response-renderer/spinner.tsx

@@ -0,0 +1,22 @@
+// *****************************************************************************
+// Copyright (C) 2026 EclipseSource GmbH.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { codicon } from '@theia/core/lib/browser';
+
+/** Spinning indicator shared by the chat response part renderers to signal ongoing activity. */
+export const Spinner = () => (
+    <span className={`${codicon('loading')} theia-animation-spin`}></span>
+);

package/src/browser/chat-response-renderer/thinking-part-renderer.spec.tsx

@@ -0,0 +1,104 @@
+// *****************************************************************************
+// Copyright (C) 2026 EclipseSource GmbH.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { enableJSDOM } from '@theia/core/lib/browser/test/jsdom';
+
+let disableJSDOM = enableJSDOM();
+
+import { FrontendApplicationConfigProvider } from '@theia/core/lib/browser/frontend-application-config-provider';
+FrontendApplicationConfigProvider.set({});
+
+import { ChatResponseContent, ThinkingChatResponseContent } from '@theia/ai-chat';
+import { expect } from 'chai';
+import * as React from '@theia/core/shared/react';
+import { ResponseNode } from '../chat-tree-view';
+import { ThinkingPartRenderer } from './thinking-part-renderer';
+
+const thinking = (content: string): ThinkingChatResponseContent => ({
+    kind: 'thinking',
+    content,
+    signature: 'signature',
+    asString: () => content,
+    asDisplayString: () => content,
+    merge: () => true
+} as unknown as ThinkingChatResponseContent);
+
+const responseNode = (
+    content: ChatResponseContent[],
+    state: { isComplete?: boolean, isCanceled?: boolean, isError?: boolean } = {}
+): ResponseNode => ({
+    id: 'response-1',
+    sessionId: 'session-1',
+    parent: undefined,
+    response: {
+        isComplete: false,
+        isCanceled: false,
+        isError: false,
+        ...state,
+        response: { content }
+    }
+} as unknown as ResponseNode);
+
+/** The rendered element is a `ThinkingContent`; its `active` prop is what drives expand/collapse. */
+const isActive = (node: React.ReactNode): boolean => (node as React.ReactElement<{ active: boolean }>).props.active;
+
+disableJSDOM();
+
+describe('ThinkingPartRenderer', () => {
+
+    before(() => disableJSDOM = enableJSDOM());
+    after(() => disableJSDOM());
+
+    it('only handles thinking parts', () => {
+        const renderer = new ThinkingPartRenderer();
+        expect(renderer.canHandle(thinking('...'))).to.be.greaterThan(0);
+        expect(renderer.canHandle({ kind: 'text' } as ChatResponseContent)).to.be.lessThan(0);
+    });
+
+    it('renders the thinking content', () => {
+        const renderer = new ThinkingPartRenderer();
+        const part = thinking('Let me check the imports first.');
+        const node = renderer.render(part, responseNode([part]));
+        expect(JSON.stringify(node)).to.contain('Let me check the imports first.');
+    });
+
+    it('is active while it is the last part of a running response', () => {
+        const renderer = new ThinkingPartRenderer();
+        const part = thinking('...');
+        expect(isActive(renderer.render(part, responseNode([part])))).to.be.true;
+    });
+
+    it('is inactive once a later part has arrived', () => {
+        const renderer = new ThinkingPartRenderer();
+        const part = thinking('...');
+        const node = responseNode([part, { kind: 'text' } as ChatResponseContent]);
+        expect(isActive(renderer.render(part, node))).to.be.false;
+    });
+
+    it('is inactive for a completed, canceled or failed response', () => {
+        const renderer = new ThinkingPartRenderer();
+        const part = thinking('...');
+        expect(isActive(renderer.render(part, responseNode([part], { isComplete: true })))).to.be.false;
+        expect(isActive(renderer.render(part, responseNode([part], { isCanceled: true })))).to.be.false;
+        expect(isActive(renderer.render(part, responseNode([part], { isError: true })))).to.be.false;
+    });
+
+    it('is inactive without a parent node', () => {
+        const renderer = new ThinkingPartRenderer();
+        expect(isActive(renderer.render(thinking('...')))).to.be.false;
+    });
+
+});

package/src/browser/chat-response-renderer/thinking-part-renderer.tsx

@@ -19,6 +19,19 @@ import { injectable } from '@theia/core/shared/inversify';
 import { ChatResponseContent, ThinkingChatResponseContent } from '@theia/ai-chat/lib/common';
 import { ReactNode } from '@theia/core/shared/react';
 import { nls } from '@theia/core/lib/common/nls';
+import * as React from '@theia/core/shared/react';
+import { ResponseNode } from '../chat-tree-view';
+import { Spinner } from './spinner';
+
+/**
+ * Number of trailing characters of the reasoning the live preview keeps at least. Far more than its
+ * few visible lines, so that the dropped text is always well above them, while the browser never has
+ * to lay out the whole reasoning.
+ */
+const PREVIEW_LENGTH = 2000;
+
+/** Duration in milliseconds of the slide that moves the live preview up when a new line starts. */
+const PREVIEW_SCROLL_DURATION = 600;
 
 @injectable()
 export class ThinkingPartRenderer implements ChatResponsePartRenderer<ThinkingChatResponseContent> {
@@ -30,14 +43,121 @@ export class ThinkingPartRenderer implements ChatResponsePartRenderer<ThinkingCh
         return -1;
     }
 
-    render(response: ThinkingChatResponseContent): ReactNode {
-        return (
-            <div className='theia-thinking'>
-                <details>
-                    <summary>{nls.localizeByDefault('Thinking')}</summary>
-                    <pre>{response.content}</pre>
-                </details>
-            </div>
-        );
+    render(response: ThinkingChatResponseContent, parentNode?: ResponseNode): ReactNode {
+        return <ThinkingContent response={response} active={this.isThinking(response, parentNode)} />;
+    }
+
+    /**
+     * A thinking part is still being written iff it is the last content part of a response that is
+     * still running: as soon as the answer text or a tool call arrives, a new part becomes the last
+     * one. `ThinkingChatResponseContent` carries no completion flag of its own, and chunks are
+     * merged into the existing part, so its position in the response is the reliable signal.
+     */
+    protected isThinking(response: ThinkingChatResponseContent, parentNode?: ResponseNode): boolean {
+        const model = parentNode?.response;
+        if (!model || model.isComplete || model.isCanceled || model.isError) {
+            return false;
+        }
+        const contents = model.response.content;
+        return contents[contents.length - 1] === response;
     }
 }
+
+/**
+ * Renders the reasoning of an agent. While the agent is still thinking, a spinner and a preview of
+ * the last few lines of the streaming reasoning show that it is working, without the reasoning
+ * taking over the response. Once the thinking is done, the full reasoning becomes available in a
+ * collapsed block the user can expand.
+ */
+const ThinkingContent: React.FC<{ response: ThinkingChatResponseContent, active: boolean }> = ({ response, active }) => active
+    ? <div className='theia-thinking active'>
+        <div className='theia-thinking-status'>
+            <Spinner /> {nls.localizeByDefault('Thinking')}
+        </div>
+        <ThinkingPreview content={response.content} />
+    </div>
+    : <div className='theia-thinking'>
+        <details>
+            <summary>{nls.localizeByDefault('Thinking')}</summary>
+            <pre>{response.content}</pre>
+        </details>
+    </div>;
+
+interface PreviewParagraph {
+    /** Offset of the paragraph in the reasoning; stays the same while the reasoning grows. */
+    start: number;
+    text: string;
+}
+
+/**
+ * Splits the tail of the reasoning into its non-empty paragraphs. Only whole paragraphs are dropped
+ * from the start, never parts of one, so that the visible lines never re-wrap as the reasoning grows.
+ */
+const previewParagraphs = (content: string): PreviewParagraph[] => {
+    const cut = content.length - PREVIEW_LENGTH;
+    let start = cut > 0 ? content.lastIndexOf('\n', cut) + 1 : 0;
+    const paragraphs: PreviewParagraph[] = [];
+    for (const text of content.slice(start).split('\n')) {
+        if (text.trim()) {
+            paragraphs.push({ start, text });
+        }
+        start += text.length + 1;
+    }
+    return paragraphs;
+};
+
+/**
+ * The last few lines of the reasoning as it streams in, hidden from assistive technology because the
+ * streaming text carries no information on its own. The text is anchored to the bottom, so the newest
+ * reasoning always stays visible, while the oldest line dissolves at the top.
+ *
+ * New text within a line simply appears. When a new line starts, the lines slide up instead of jumping,
+ * and a line starting mid-slide continues from the current position rather than restarting.
+ */
+const ThinkingPreview: React.FC<{ content: string }> = ({ content }) => {
+    const boxRef = React.useRef<HTMLDivElement | undefined>(undefined);
+    const textRef = React.useRef<HTMLDivElement | undefined>(undefined);
+    // The last paragraph of the previous render and its position; how far it has moved up since is
+    // how far the lines have to slide.
+    const anchorRef = React.useRef<{ start: number, top: number } | undefined>(undefined);
+    const [overflowing, setOverflowing] = React.useState(false);
+    const paragraphs = React.useMemo(() => previewParagraphs(content), [content]);
+
+    React.useLayoutEffect(() => {
+        const box = boxRef.current;
+        const text = textRef.current;
+        const last = text?.lastElementChild;
+        if (!box || !text || !(last instanceof HTMLElement)) {
+            return;
+        }
+        setOverflowing(text.offsetHeight > box.clientHeight);
+        const previous = anchorRef.current;
+        anchorRef.current = { start: Number(last.dataset.start), top: last.offsetTop };
+        const anchor = previous && text.querySelector<HTMLElement>(`[data-start="${previous.start}"]`);
+        if (!previous || !anchor || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            return;
+        }
+        const shift = Math.min(previous.top - anchor.offsetTop, box.clientHeight);
+        if (shift <= 0) {
+            return;
+        }
+        // Where a running slide currently is, so that the next one picks up from there.
+        const transform = getComputedStyle(text).transform;
+        const currentOffset = transform === 'none' ? 0 : new DOMMatrixReadOnly(transform).m42;
+        text.getAnimations().forEach(animation => animation.cancel());
+        text.animate(
+            [{ transform: `translateY(${currentOffset + shift}px)` }, { transform: 'none' }],
+            { duration: PREVIEW_SCROLL_DURATION, easing: 'ease-out' }
+        );
+    }, [paragraphs]);
+
+    return <div
+        className={`theia-thinking-preview${overflowing ? ' overflowing' : ''}`}
+        aria-hidden={true}
+        ref={(element: HTMLDivElement | null) => { boxRef.current = element ?? undefined; }}
+    >
+        <div className='theia-thinking-preview-text' ref={(element: HTMLDivElement | null) => { textRef.current = element ?? undefined; }}>
+            {paragraphs.map(paragraph => <div key={paragraph.start} data-start={paragraph.start}>{paragraph.text}</div>)}
+        </div>
+    </div>;
+};

package/src/browser/chat-response-renderer/toolcall-part-renderer.spec.ts

@@ -40,6 +40,22 @@ describe('condenseArguments', () => {
         expect(condenseArguments('{invalid}')).to.equal('{invalid}');
     });
 
+    it('returns the raw string without attempting JSON.parse while an arguments object is still streaming', () => {
+        const originalParse = JSON.parse;
+        let parseCalls = 0;
+        JSON.parse = ((text: string, reviver?: Parameters<typeof originalParse>[1]) => {
+            parseCalls++;
+            return originalParse(text, reviver);
+        }) as typeof JSON.parse;
+        try {
+            const streaming = '{"path": "src/index.ts", "content": "partial';
+            expect(condenseArguments(streaming)).to.equal(streaming);
+            expect(parseCalls).to.equal(0);
+        } finally {
+            JSON.parse = originalParse;
+        }
+    });
+
     it('condenses single string parameter as value only', () => {
         const result = condenseArguments('{"query": "search term"}');
         expect(result).to.equal('search term');

package/src/browser/chat-response-renderer/toolcall-part-renderer.tsx

@@ -33,6 +33,7 @@ import {
     DENY_LATEST_TOOL_CONFIRMATION_COMMAND
 } from '../tool-confirmation-keybinding-contribution';
 import { condenseArguments, formatArgsForTooltip } from './toolcall-utils';
+import { Spinner } from './spinner';
 
 @injectable()
 export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallChatResponseContent> {
@@ -165,10 +166,6 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
     }
 }
 
-const Spinner = () => (
-    <span className={`${codicon('loading')} theia-animation-spin`}></span>
-);
-
 interface ToolCallContentProps {
     response: ToolCallChatResponseContent;
     confirmationMode: ToolConfirmationMode;

package/src/browser/chat-response-renderer/toolcall-utils.ts

@@ -15,6 +15,7 @@
 // *****************************************************************************
 
 import { MarkdownStringImpl } from '@theia/core/lib/common/markdown-rendering/markdown-string';
+import { mayBeCompleteJson } from '../../common/toolcall-utils';
 
 export { extractJsonStringField } from '../../common/toolcall-utils';
 
@@ -168,6 +169,10 @@ export function condenseArguments(args: string): string | undefined {
     if (!args || !args.trim() || args.trim() === '{}') {
         return undefined;
     }
+    if (!mayBeCompleteJson(args)) {
+        // still streaming: parsing could only fail, so show the raw text right away
+        return truncateString(args, MAX_CONDENSED_LENGTH);
+    }
     let parsed: unknown;
     try {
         parsed = JSON.parse(args);

package/src/browser/chat-tree-view/chat-view-tree-container.ts

@@ -16,6 +16,8 @@
 
 import { createTreeContainer, TreeProps } from '@theia/core/lib/browser';
 import { interfaces } from '@theia/core/shared/inversify';
+import { ChatFindHighlighter } from '../chat-find/chat-find-highlighter';
+import { ChatFindWidget } from '../chat-find/chat-find-widget';
 import { ChatViewTreeWidget } from './chat-view-tree-widget';
 
 const CHAT_VIEW_TREE_PROPS = {
@@ -28,5 +30,7 @@ export function createChatViewTreeWidget(parent: interfaces.Container): ChatView
         props: CHAT_VIEW_TREE_PROPS,
         widget: ChatViewTreeWidget,
     });
+    child.bind(ChatFindWidget).toSelf().inSingletonScope();
+    child.bind(ChatFindHighlighter).toSelf().inSingletonScope();
     return child.get(ChatViewTreeWidget);
 }

package/src/browser/chat-tree-view/chat-view-tree-widget.tsx

@@ -38,16 +38,21 @@ import {
     HoverService,
     Key,
     KeyCode,
+    Message,
     NodeProps,
     OpenerService,
     TreeModel,
     TreeNode,
     TreeProps,
     TreeWidget,
+    UnsafeWidgetUtilities,
     Widget,
     type ReactWidget
 } from '@theia/core/lib/browser';
 import { ContextKey, ContextKeyService } from '@theia/core/lib/browser/context-key-service';
+import { ChatFindHighlighter } from '../chat-find/chat-find-highlighter';
+import { ChatFindMatch } from '../chat-find/chat-find-matcher';
+import { ChatFindWidget } from '../chat-find/chat-find-widget';
 import { nls } from '@theia/core/lib/common/nls';
 import {
     inject,
@@ -61,7 +66,7 @@ import { MarkdownStringImpl } from '@theia/core/lib/common/markdown-rendering';
 import { ChatNodeToolbarActionContribution } from '../chat-node-toolbar-action-contribution';
 import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
 import { formatTokenCount } from '../chat-token-usage-indicator-util';
-import { useMarkdownRendering } from '../chat-response-renderer/markdown-part-renderer';
+import { MarkdownRendering, useMarkdownRendering } from '../chat-response-renderer/markdown-part-renderer';
 import { ProgressMessage } from '../chat-progress-message';
 import { AIChatTreeInputFactory, type AIChatTreeInputWidget } from './chat-view-tree-input-widget';
 import { PromptVariantBadge } from './prompt-variant-badge';
@@ -150,6 +155,12 @@ export class ChatViewTreeWidget extends TreeWidget {
 
     protected chatResponseFocusKey: ContextKey<boolean>;
 
+    @inject(ChatFindWidget)
+    protected readonly findWidget: ChatFindWidget;
+
+    @inject(ChatFindHighlighter)
+    protected readonly findHighlighter: ChatFindHighlighter;
+
     protected readonly onDidSubmitEditEmitter = new Emitter<ChatRequest>();
     onDidSubmitEdit = this.onDidSubmitEditEmitter.event;
 
@@ -208,8 +219,14 @@ export class ChatViewTreeWidget extends TreeWidget {
         this.chatResponseFocusKey = this.contextKeyService.createKey<boolean>('chatResponseFocus', false);
         this.node.setAttribute('tabindex', '0');
         this.node.setAttribute('aria-label', nls.localize('theia/ai/chat-ui/chatResponses', 'Chat responses'));
-        this.addEventListener(this.node, 'focusin', () => this.chatResponseFocusKey.set(true));
-        this.addEventListener(this.node, 'focusout', () => this.chatResponseFocusKey.set(false));
+
+        this.findWidget.fallbackFocusTarget = this.node;
+        this.toDispose.pushAll([
+            this.findWidget,
+            this.findHighlighter,
+            this.findWidget.onDidChangeState(state => this.findHighlighter.update(this.node, state.regexp, state.matches, state.current)),
+            this.findWidget.onDidRequestReveal(match => this.revealFindMatch(match))
+        ]);
 
         this.toDispose.pushAll([
             this.toDisposeOnChatModelChange,
@@ -245,9 +262,79 @@ export class ChatViewTreeWidget extends TreeWidget {
 
     public setEnabled(enabled: boolean): void {
         this.isEnabled = enabled;
+        if (!enabled) {
+            this.findWidget.dismiss();
+        }
         this.update();
     }
 
+    /** Opens the find bar over the response tree (or refocuses it when already open). */
+    showFind(): void {
+        this.findWidget.open();
+    }
+
+    hideFind(): void {
+        this.findWidget.dismiss();
+    }
+
+    get isFindVisible(): boolean {
+        return this.findWidget.isOpen;
+    }
+
+    /** Whether the tracked session has content to search; false while the welcome/session-list screen shows. */
+    get canFind(): boolean {
+        return this.findWidget.canFind;
+    }
+
+    /**
+     * Reveals a match: mounts the owning row via virtuoso when it is not rendered yet, then re-applies the highlights
+     * and scrolls the matched text itself into view (rows can be taller than the viewport).
+     */
+    protected revealFindMatch(match: ChatFindMatch): void {
+        const row = this.rows.get(match.nodeId);
+        if (row === undefined) {
+            return;
+        }
+        const settle = (): void => {
+            this.findHighlighter.refresh();
+            this.findHighlighter.scrollCurrentIntoView(this.node);
+        };
+        if (this.findHighlighter.findRow(this.node, match.nodeId)) {
+            requestAnimationFrame(settle);
+            return;
+        }
+        this.view?.list?.scrollIntoView({
+            index: row.index,
+            align: 'center',
+            done: settle
+        });
+    }
+
+    protected override onAfterAttach(msg: Message): void {
+        super.onAfterAttach(msg);
+        // Registered per attach, not in `init()`: `addEventListener` disposes on detach, so listeners registered
+        // once would be lost the first time the view is moved (e.g. to the main area), leaving `chatResponseFocus`
+        // stuck and every keybinding scoped to it dead until the page is reloaded.
+        this.addEventListener(this.node, 'focusin', () => this.chatResponseFocusKey.set(true));
+        this.addEventListener(this.node, 'focusout', () => this.chatResponseFocusKey.set(false));
+        // The tree node is a React root, so the find bar is attached as a sibling right before it,
+        // the same way the core TreeWidget hosts its SearchBox.
+        if (this.findWidget.isAttached) {
+            Widget.detach(this.findWidget);
+        }
+        if (this.node.parentElement) {
+            UnsafeWidgetUtilities.attach(this.findWidget, this.node.parentElement, this.node);
+        }
+    }
+
+    protected override onBeforeDetach(msg: Message): void {
+        this.chatResponseFocusKey.set(false);
+        if (this.findWidget.isAttached) {
+            Widget.detach(this.findWidget);
+        }
+        super.onBeforeDetach(msg);
+    }
+
     /** Toggles auto-scroll and the scroll-to-bottom button based on whether the viewport includes the bottom of the list. */
     protected handleAtBottomStateChange(isAtBottom: boolean): void {
         if (isAtBottom !== this.atBottom) {
@@ -390,6 +477,7 @@ export class ChatViewTreeWidget extends TreeWidget {
     public trackChatModel(chatModel: ChatModel): void {
         this.toDisposeOnChatModelChange.dispose();
         this.recreateModelTree(chatModel);
+        this.findWidget.setChatModel(chatModel);
 
         chatModel.getRequests().forEach(request => {
             if (!request.response.isComplete) {
@@ -439,6 +527,12 @@ export class ChatViewTreeWidget extends TreeWidget {
         }
     }
 
+    protected override doUpdateRows(): void {
+        super.doUpdateRows();
+        // Follow new requests and responses to the end of the chat, unless auto-scroll is locked.
+        this.scheduleUpdateScrollToRow();
+    }
+
     protected override getScrollToRow(): number | undefined {
         // Only scroll to end if auto-scroll is enabled (not locked)
         if (this.shouldScrollToEnd) {
@@ -478,6 +572,7 @@ export class ChatViewTreeWidget extends TreeWidget {
         return <React.Fragment key={node.id}>
             <div
                 className='theia-ChatNode'
+                data-node-id={node.id}
                 role='article'
                 aria-label={ariaLabel}
                 onContextMenu={e => this.handleContextMenu(node, e)}
@@ -880,9 +975,7 @@ export const ChatRequestRender = (
                         );
                     } else {
                         const ref = useMarkdownRendering(
-                            part.text
-                                .replace(/^[\r\n]+|[\r\n]+$/g, '') // remove excessive new lines
-                                .replace(/(^ )/g, '&nbsp;'), // enforce keeping space before
+                            MarkdownRendering.prepareRequestText(part.text),
                             openerService,
                             true,
                             undefined,