Update agent framework structure (#43)

- New Features
  - Introduced rich AI Chat UI: message list, input bar, model selector, tool call/result cards, agent session header, and live session timeline with nesting.
  - Added structured response viewing with auto-open and “View Full Report.”
  - OAuth connect panel and version update banner.
- Improvements
  - Real-time agent progress events (session/tool start, completion, child sessions).
  - Provider-aware, vision-capable message handling and tool executions.
  - Enhanced Markdown rendering (TOC, CSS blocks).
  - Centralized scroll-to-bottom behavior; wider input and better autosizing.
- Bug Fixes
  - Normalized tool call data and content for Groq models.
  - Input clears after send (Enter or button).

Author: tysonthomas9

config/gni/devtools_grd_files.gni

@@ -617,6 +617,11 @@ grd_files_bundled_sources = [
   "front_end/panels/ai_assistance/ai_assistance.js",
   "front_end/panels/ai_chat/ui/AIChatPanel.js",
   "front_end/panels/ai_chat/ui/ChatView.js",
+  "front_end/panels/ai_chat/ui/LiveAgentSessionComponent.js",
+  "front_end/panels/ai_chat/ui/ToolCallComponent.js",
+  "front_end/panels/ai_chat/ui/ToolResultComponent.js",
+  "front_end/panels/ai_chat/ui/AgentSessionHeaderComponent.js",
+  "front_end/panels/ai_chat/ui/ToolDescriptionFormatter.js",
   "front_end/panels/ai_chat/ui/chatView.css.js",
   "front_end/panels/ai_chat/ui/HelpDialog.js",
   "front_end/panels/ai_chat/ui/PromptEditDialog.js",
@@ -648,7 +653,9 @@ grd_files_bundled_sources = [
   "front_end/panels/ai_chat/LLM/GroqProvider.js",
   "front_end/panels/ai_chat/LLM/OpenRouterProvider.js",
   "front_end/panels/ai_chat/LLM/LLMClient.js",
+  "front_end/panels/ai_chat/LLM/MessageSanitizer.js",
   "front_end/panels/ai_chat/tools/Tools.js",
+  "front_end/panels/ai_chat/tools/SequentialThinkingTool.js",
   "front_end/panels/ai_chat/tools/CombinedExtractionTool.js",
   "front_end/panels/ai_chat/tools/CritiqueTool.js",
   "front_end/panels/ai_chat/tools/FetcherTool.js",
@@ -661,12 +668,27 @@ grd_files_bundled_sources = [
   "front_end/panels/ai_chat/tools/VectorDBClient.js",
   "front_end/panels/ai_chat/tools/BookmarkStoreTool.js",
   "front_end/panels/ai_chat/tools/DocumentSearchTool.js",
-  "front_end/panels/ai_chat/tools/SequentialThinkingTool.js",
   "front_end/panels/ai_chat/tools/ThinkingTool.js",
   "front_end/panels/ai_chat/common/utils.js",
   "front_end/panels/ai_chat/common/log.js",
   "front_end/panels/ai_chat/common/context.js",
   "front_end/panels/ai_chat/common/page.js",
+  "front_end/panels/ai_chat/core/structured_response.js",
+  "front_end/panels/ai_chat/models/ChatTypes.js",
+  "front_end/panels/ai_chat/ui/input/ChatInput.js",
+  "front_end/panels/ai_chat/ui/input/InputBar.js",
+  "front_end/panels/ai_chat/ui/markdown/MarkdownRenderers.js",
+  "front_end/panels/ai_chat/ui/message/MessageList.js",
+  "front_end/panels/ai_chat/ui/message/ModelMessage.js",
+  "front_end/panels/ai_chat/ui/message/MessageCombiner.js",
+  "front_end/panels/ai_chat/ui/message/StructuredResponseRender.js",
+  "front_end/panels/ai_chat/ui/message/StructuredResponseController.js",
+  "front_end/panels/ai_chat/ui/message/GlobalActionsRow.js",
+  "front_end/panels/ai_chat/ui/message/ToolResultMessage.js",
+  "front_end/panels/ai_chat/ui/message/UserMessage.js",
+  "front_end/panels/ai_chat/ui/model_selector/ModelSelector.js",
+  "front_end/panels/ai_chat/ui/oauth/OAuthConnectPanel.js",
+  "front_end/panels/ai_chat/ui/version/VersionBanner.js",
   "front_end/panels/ai_chat/common/WebSocketRPCClient.js",
   "front_end/panels/ai_chat/common/EvaluationConfig.js",
   "front_end/panels/ai_chat/evaluation/remote/EvaluationProtocol.js",
@@ -680,6 +702,7 @@ grd_files_bundled_sources = [
   "front_end/panels/ai_chat/ai_chat.js",
   "front_end/panels/ai_chat/ai_chat_impl.js",
   "front_end/panels/ai_chat/agent_framework/AgentRunner.js",
+  "front_end/panels/ai_chat/agent_framework/AgentRunnerEventBus.js",
   "front_end/panels/ai_chat/agent_framework/AgentSessionTypes.js",
   "front_end/panels/ai_chat/agent_framework/ConfigurableAgentTool.js",
   "front_end/panels/ai_chat/agent_framework/implementation/ConfiguredAgents.js",

front_end/BUILD.gn

@@ -29,6 +29,8 @@ group("front_end") {
     "entrypoints/shell",
     "entrypoints/wasmparser_worker:worker_entrypoint",
     "entrypoints/worker_app:entrypoint",
+    "panels/ai_chat:ai_chat_release_js_metadata",
+    "panels/ai_chat:ai_chat_release_css_metadata",
     "third_party/vscode.web-custom-data:web_custom_data",
   ]
 }

front_end/panels/ai_assistance/BUILD.gn

@@ -24,6 +24,7 @@ devtools_module("ai_assistance") {
     "PatchWidget.ts",
     "SelectWorkspaceDialog.ts",
     "components/ChatView.ts",
+    "components/ScrollPinHelper.ts",
     "components/ExploreWidget.ts",
     "components/MarkdownRendererWithCodeBlock.ts",
     "components/UserActionRow.ts",

front_end/panels/ai_assistance/components/ChatView.ts

@@ -15,6 +15,7 @@ import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
 import * as UI from '../../../ui/legacy/legacy.js';
+import { ScrollPinHelper } from './ScrollPinHelper.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import {PatchWidget} from '../PatchWidget.js';
@@ -304,29 +305,13 @@ export interface Props {
 export class ChatView extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #markdownRenderer = new MarkdownRendererWithCodeBlock();
-  #scrollTop?: number;
+  // Scroll management helper replaces ad-hoc state/logic
+  #scrollHelper = new ScrollPinHelper();
   #props: Props;
   #messagesContainerElement?: Element;
   #mainElementRef?: Lit.Directives.Ref<Element> = Lit.Directives.createRef();
   #messagesContainerResizeObserver = new ResizeObserver(() => this.#handleMessagesContainerResize());
   #popoverHelper: UI.PopoverHelper.PopoverHelper|null = null;
-  /**
-   * Indicates whether the chat scroll position should be pinned to the bottom.
-   *
-   * This is true when:
-   *   - The scroll is at the very bottom, allowing new messages to push the scroll down automatically.
-   *   - The panel is initially rendered and the user hasn't scrolled yet.
-   *
-   * It is set to false when the user scrolls up to view previous messages.
-   */
-  #pinScrollToBottom = true;
-  /**
-   * Indicates whether the scroll event originated from code
-   * or a user action. When set to `true`, `handleScroll` will ignore the event,
-   * allowing it to only handle user-driven scrolls and correctly decide
-   * whether to pin the content to the bottom.
-   */
-  #isProgrammaticScroll = false;
 
   constructor(props: Props) {
     super();
@@ -351,16 +336,21 @@ export class ChatView extends HTMLElement {
     this.#messagesContainerResizeObserver.disconnect();
   }
 
+  // Centralize access to the textarea to avoid repeated querySelector casts
+  #getTextArea(): HTMLTextAreaElement|null {
+    return this.#shadow.querySelector('.chat-input') as HTMLTextAreaElement | null;
+  }
+
   clearTextInput(): void {
-    const textArea = this.#shadow.querySelector('.chat-input') as HTMLTextAreaElement;
+    const textArea = this.#getTextArea();
     if (!textArea) {
       return;
     }
     textArea.value = '';
   }
 
   focusTextInput(): void {
-    const textArea = this.#shadow.querySelector('.chat-input') as HTMLTextAreaElement;
+    const textArea = this.#getTextArea();
     if (!textArea) {
       return;
     }
@@ -369,23 +359,18 @@ export class ChatView extends HTMLElement {
   }
 
   restoreScrollPosition(): void {
-    if (this.#scrollTop === undefined) {
-      return;
-    }
-
-    if (!this.#mainElementRef?.value) {
-      return;
+    // Ensure helper has latest element
+    if (this.#mainElementRef?.value) {
+      this.#scrollHelper.setElement(this.#mainElementRef.value as HTMLElement);
     }
-
-    this.#setMainElementScrollTop(this.#scrollTop);
+    this.#scrollHelper.restoreLastPosition();
   }
 
   scrollToBottom(): void {
-    if (!this.#mainElementRef?.value) {
-      return;
+    if (this.#mainElementRef?.value) {
+      this.#scrollHelper.setElement(this.#mainElementRef.value as HTMLElement);
     }
-
-    this.#setMainElementScrollTop(this.#mainElementRef.value.scrollHeight);
+    this.#scrollHelper.scrollToBottom();
   }
 
   #handleChatUiRef(el: Element|undefined): void {
@@ -446,31 +431,16 @@ export class ChatView extends HTMLElement {
   }
 
   #handleMessagesContainerResize(): void {
-    if (!this.#pinScrollToBottom) {
-      return;
-    }
-
-    if (!this.#mainElementRef?.value) {
-      return;
-    }
-
-    if (this.#pinScrollToBottom) {
-      this.#setMainElementScrollTop(this.#mainElementRef.value.scrollHeight);
+    if (this.#mainElementRef?.value) {
+      this.#scrollHelper.setElement(this.#mainElementRef.value as HTMLElement);
     }
+    this.#scrollHelper.handleResize();
   }
 
-  #setMainElementScrollTop(scrollTop: number): void {
-    if (!this.#mainElementRef?.value) {
-      return;
-    }
-
-    this.#scrollTop = scrollTop;
-    this.#isProgrammaticScroll = true;
-    this.#mainElementRef.value.scrollTop = scrollTop;
-  }
+  // Removed ad-hoc scroll setter in favor of ScrollPinHelper
 
   #setInputText(text: string): void {
-    const textArea = this.#shadow.querySelector('.chat-input') as HTMLTextAreaElement;
+    const textArea = this.#getTextArea();
     if (!textArea) {
       return;
     }
@@ -485,7 +455,6 @@ export class ChatView extends HTMLElement {
     if (el) {
       this.#messagesContainerResizeObserver.observe(el);
     } else {
-      this.#pinScrollToBottom = true;
       this.#messagesContainerResizeObserver.disconnect();
     }
   }
@@ -494,18 +463,10 @@ export class ChatView extends HTMLElement {
     if (!ev.target || !(ev.target instanceof HTMLElement)) {
       return;
     }
-
-    // Do not handle scroll events caused by programmatically
-    // updating the scroll position. We want to know whether user
-    // did scroll the container from the user interface.
-    if (this.#isProgrammaticScroll) {
-      this.#isProgrammaticScroll = false;
-      return;
+    if (this.#mainElementRef?.value) {
+      this.#scrollHelper.setElement(this.#mainElementRef.value as HTMLElement);
     }
-
-    this.#scrollTop = ev.target.scrollTop;
-    this.#pinScrollToBottom =
-        ev.target.scrollTop + ev.target.clientHeight + SCROLL_ROUNDING_OFFSET > ev.target.scrollHeight;
+    this.#scrollHelper.handleScroll(ev.target);
   };
 
   #handleSubmit = (ev: SubmitEvent): void => {
@@ -514,7 +475,7 @@ export class ChatView extends HTMLElement {
       return;
     }
 
-    const textArea = this.#shadow.querySelector('.chat-input') as HTMLTextAreaElement;
+    const textArea = this.#getTextArea();
     if (!textArea?.value) {
       return;
     }
@@ -569,42 +530,44 @@ export class ChatView extends HTMLElement {
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceDynamicSuggestionClicked);
   };
 
+  #renderFooter(): Lit.LitTemplate {
+    const classes = Lit.Directives.classMap({
+      'chat-view-footer': true,
+      'has-conversation': !!this.#props.conversationType,
+      'is-read-only': this.#props.isReadOnly,
+    });
+
+    // clang-format off
+    const footerContents = this.#props.conversationType
+      ? renderRelevantDataDisclaimer({
+          isLoading: this.#props.isLoading,
+          blockedByCrossOrigin: this.#props.blockedByCrossOrigin,
+        })
+      : html`<p>
+          ${lockedString(UIStringsNotTranslate.inputDisclaimerForEmptyState)}
+          <button
+            class="link"
+            role="link"
+            jslog=${VisualLogging.link('open-ai-settings').track({
+              click: true,
+            })}
+            @click=${() => {
+              void UI.ViewManager.ViewManager.instance().showView(
+                'chrome-ai',
+              );
+            }}
+          >${i18nString(UIStrings.learnAbout)}</button>
+        </p>`;
+
+    return html`
+      <footer class=${classes} jslog=${VisualLogging.section('footer')}>
+        ${footerContents}
+      </footer>
+    `;
+    // clang-format on
+  }
+
   #render(): void {
-    const renderFooter = (): Lit.LitTemplate => {
-      const classes = Lit.Directives.classMap({
-        'chat-view-footer': true,
-        'has-conversation': !!this.#props.conversationType,
-        'is-read-only': this.#props.isReadOnly,
-      });
-
-      // clang-format off
-      const footerContents = this.#props.conversationType
-        ? renderRelevantDataDisclaimer({
-            isLoading: this.#props.isLoading,
-            blockedByCrossOrigin: this.#props.blockedByCrossOrigin,
-          })
-        : html`<p>
-            ${lockedString(UIStringsNotTranslate.inputDisclaimerForEmptyState)}
-            <button
-              class="link"
-              role="link"
-              jslog=${VisualLogging.link('open-ai-settings').track({
-                click: true,
-              })}
-              @click=${() => {
-                void UI.ViewManager.ViewManager.instance().showView(
-                  'chrome-ai',
-                );
-              }}
-            >${i18nString(UIStrings.learnAbout)}</button>
-          </p>`;
-
-      return html`
-        <footer class=${classes} jslog=${VisualLogging.section('footer')}>
-          ${footerContents}
-        </footer>
-      `;
-    };
     // clang-format off
     Lit.render(html`
       <style>${chatViewStyles}</style>
@@ -661,7 +624,7 @@ export class ChatView extends HTMLElement {
               })
           }
         </main>
-       ${renderFooter()}
+       ${this.#renderFooter()}
       </div>
     `, this.#shadow, {host: this});
     // clang-format on

front_end/panels/ai_assistance/components/ScrollPinHelper.ts

@@ -0,0 +1,59 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * Utility to manage scroll pin-to-bottom behavior for a scrollable container.
+ */
+export class ScrollPinHelper {
+  #el: HTMLElement | null = null;
+  #scrollTop?: number;
+  #pinToBottom = true;
+  #isProgrammatic = false;
+  static readonly ROUNDING_OFFSET = 1;
+
+  setElement(el: HTMLElement | undefined): void {
+    if (el) {
+      this.#el = el;
+    } else {
+      this.#el = null;
+      this.#pinToBottom = true;
+    }
+  }
+
+  handleResize(): void {
+    if (!this.#el) return;
+    if (this.#pinToBottom) {
+      this.setScrollTop(this.#el.scrollHeight);
+    }
+  }
+
+  handleScroll(target: HTMLElement): void {
+    if (this.#isProgrammatic) {
+      this.#isProgrammatic = false;
+      return;
+    }
+    this.#scrollTop = target.scrollTop;
+    this.#pinToBottom = target.scrollTop + target.clientHeight + ScrollPinHelper.ROUNDING_OFFSET > target.scrollHeight;
+  }
+
+  setScrollTop(value: number): void {
+    if (!this.#el) return;
+    this.#scrollTop = value;
+    this.#isProgrammatic = true;
+    this.#el.scrollTop = value;
+  }
+
+  scrollToBottom(): void {
+    if (!this.#el) return;
+    this.setScrollTop(this.#el.scrollHeight);
+  }
+
+  restoreLastPosition(): void {
+    if (this.#scrollTop === undefined) {
+      return;
+    }
+    this.setScrollTop(this.#scrollTop);
+  }
+}
+