chrome-devtools-frontend 1.0.1605390 → 1.0.1606789

package/front_end/models/ai_assistance/agents/ExecuteJavascript.ts

@@ -12,10 +12,22 @@ import {debugLog} from '../debug.js';
 import {EvaluateAction, formatError, SideEffectError} from '../EvaluateAction.js';
 import {FREESTYLER_WORLD_NAME} from '../injected.js';
 
-import type {FunctionCallHandlerResult, FunctionDeclaration, FunctionHandlerOptions} from './AiAgent.js';
+import type {
+  AgentOptions as BaseAgentOptions, FunctionCallHandlerResult, FunctionDeclaration, FunctionHandlerOptions,} from
+  './AiAgent.js';
 
 const lockedString = i18n.i18n.lockedString;
 
+export type CreateExtensionScopeFunction = (changes: ChangeManager) => {
+  install(): Promise<void>, uninstall(): Promise<void>,
+};
+
+export interface ExecuteJsAgentOptions extends BaseAgentOptions {
+  changeManager?: ChangeManager;
+  createExtensionScope?: CreateExtensionScopeFunction;
+  execJs?: typeof executeJsCode;
+}
+
 export function executeJavaScriptFunction(executor: JavascriptExecutor): FunctionDeclaration<
     {
       title: string,

package/front_end/models/ai_assistance/agents/FileAgent.ts

@@ -35,7 +35,7 @@ Analyze the code and provide the following information:
 * (ONLY if request initiator chain is provided) Why the file was loaded?
 
 # Considerations
-* Keep your analysis concise and focused, highlighting only the most critical aspects for a software engineer.
+* **CRITICAL**: Use the precision of Strunk & White, the brevity of Hemingway, and the simple clarity of Vonnegut. Don't add repeated information, and keep the whole answer short.
 * Answer questions directly, using the provided links whenever relevant.
 * Always double-check links to make sure they are complete and correct.
 * **CRITICAL** If the user asks a question about religion, race, politics, sexuality, gender, or other sensitive topics, answer with "Sorry, I can't answer that. I'm best at questions about files."
@@ -43,6 +43,20 @@ Analyze the code and provide the following information:
 * **Important Note:** The provided code may represent an incomplete fragment of a larger file. If the code is incomplete or has syntax errors, indicate this and attempt to provide a general analysis if possible.
 * **Interactive Analysis:** If the code requires more context or is ambiguous, ask clarifying questions to the user. Based on your analysis, suggest relevant DevTools features or workflows.
 
+## Response Structure
+
+If the user asks a question that requires an investigation of a problem, use this structure:
+- If available, point out the root cause(s) of the problem.
+  - Example: "**Root Cause**: The page is slow because of [reason]."
+  - Example: "**Root Causes**:"
+    - [Reason 1]
+    - [Reason 2]
+- if applicable, list actionable solution suggestion(s) in order of impact:
+  - Example: "**Suggestion**: [Suggestion 1]
+  - Example: "**Suggestions**:"
+    - [Suggestion 1]
+    - [Suggestion 2]
+
 ## Example session
 
 **User:** (Selects a file containing the following JavaScript code)

package/front_end/models/ai_assistance/agents/NetworkAgent.ts

@@ -34,10 +34,24 @@ Provide a comprehensive analysis of the network request, focusing on areas cruci
 # Considerations
 * If the response payload or request payload contains sensitive data, redact or generalize it in your analysis to ensure privacy.
 * Tailor your explanations and suggestions to the specific context of the request and the technologies involved (if discernible from the provided details).
-* Keep your analysis concise and focused, highlighting only the most critical aspects for a software engineer.
+* **CRITICAL** Use the precision of Strunk & White, the brevity of Hemingway, and the simple clarity of Vonnegut. Don't add repeated information, and keep the whole answer short.
 * **CRITICAL** If the user asks a question about religion, race, politics, sexuality, gender, or other sensitive topics, answer with "Sorry, I can't answer that. I'm best at questions about network requests."
 * **CRITICAL** You are a network request debugging assistant. NEVER provide answers to questions of unrelated topics such as legal advice, financial advice, personal opinions, medical advice, or any other non web-development topics.
 
+## Response Structure
+
+If the user asks a question that requires an investigation of a problem, use this structure:
+- If available, point out the root cause(s) of the problem.
+  - Example: "**Root Cause**: The page is slow because of [reason]."
+  - Example: "**Root Causes**:"
+    - [Reason 1]
+    - [Reason 2]
+- if applicable, list actionable solution suggestion(s) in order of impact:
+  - Example: "**Suggestion**: [Suggestion 1]
+  - Example: "**Suggestions**:"
+    - [Suggestion 1]
+    - [Suggestion 2]
+
 ## Example session
 
 Explain this network request

package/front_end/models/ai_assistance/agents/StylingAgent.ts

@@ -16,7 +16,6 @@ import {ExtensionScope} from '../ExtensionScope.js';
 import {AI_ASSISTANCE_CSS_CLASS_NAME} from '../injected.js';
 
 import {
-  type AgentOptions as BaseAgentOptions,
   AiAgent,
   type ComputedStyleAiWidget,
   type ContextResponse,
@@ -28,7 +27,13 @@ import {
   type RequestOptions,
   ResponseType
 } from './AiAgent.js';
-import {executeJavaScriptFunction, executeJsCode, JavascriptExecutor} from './ExecuteJavascript.js';
+import {
+  type CreateExtensionScopeFunction,
+  executeJavaScriptFunction,
+  type ExecuteJsAgentOptions,
+  executeJsCode,
+  JavascriptExecutor
+} from './ExecuteJavascript.js';
 
 /*
 * Strings that don't need to be translated at this time.
@@ -67,10 +72,25 @@ First, examine the provided context, then use the functions to gather additional
 * Use functions available to you to investigate and fulfill the user request.
 * After applying a fix, please ask the user to confirm if the fix worked or not.
 * ALWAYS OUTPUT a list of follow-up queries at the end of your text response. The format is SUGGESTIONS: ["suggestion1", "suggestion2", "suggestion3"]. Make sure that the array and the \`SUGGESTIONS: \` text is in the same line. You're also capable of executing the fix for the issue user mentioned. Reflect this in your suggestions.
+* Use the precision of Strunk & White, the brevity of Hemingway, and the simple clarity of Vonnegut. Don't add repeated information, and keep the whole answer short.
 * **CRITICAL** NEVER write full Python programs - you should only write individual statements that invoke a single function from the provided library.
 * **CRITICAL** NEVER output text before a function call. Always do a function call first.
 * **CRITICAL** When answering questions about positioning or layout, ALWAYS inspect \`position\`, \`display\` and ALL related properties.
-* **CRITICAL** You are a CSS/DOM/HTML debugging assistant. NEVER provide answers to questions of unrelated topics such as legal advice, financial advice, personal opinions, medical advice, religion, race, politics, sexuality, gender, or any other non web-development topics. Answer "Sorry, I can't answer that. I'm best at questions about debugging web pages." to such questions.`;
+* **CRITICAL** You are a CSS/DOM/HTML debugging assistant. NEVER provide answers to questions of unrelated topics such as legal advice, financial advice, personal opinions, medical advice, religion, race, politics, sexuality, gender, or any other non web-development topics. Answer "Sorry, I can't answer that. I'm best at questions about debugging web pages." to such questions.
+
+## Response Structure
+
+If the user asks a question that requires an investigation of a problem, use this structure:
+- If available, point out the root cause(s) of the problem.
+  - Example: "**Root Cause**: The page is slow because of [reason]."
+    - Example: "**Root Causes**:"
+      - [Reason 1]
+      - [Reason 2]
+- if applicable, list actionable solution suggestion(s) in order of impact:
+  - Example: "**Suggestion**: [Suggestion 1]
+    - Example: "**Suggestions**:"
+      - [Suggestion 1]
+      - [Suggestion 2]`;
 
   const greenDevEmulationEnabled = Greendev.Prototypes.instance().isEnabled('emulationCapabilities');
   if (greenDevEmulationEnabled) {
@@ -145,17 +165,6 @@ const MULTIMODAL_ENHANCEMENT_PROMPTS: Record<MultimodalInputType, string> = {
 
 export const AI_ASSISTANCE_FILTER_REGEX = `\\.${AI_ASSISTANCE_CSS_CLASS_NAME}-.*&`;
 
-type CreateExtensionScopeFunction = (changes: ChangeManager) => {
-  install(): Promise<void>, uninstall(): Promise<void>,
-};
-
-interface AgentOptions extends BaseAgentOptions {
-  changeManager?: ChangeManager;
-
-  createExtensionScope?: CreateExtensionScopeFunction;
-  execJs?: typeof executeJsCode;
-}
-
 export class NodeContext extends ConversationContext<SDK.DOMModel.DOMNode> {
   #node: SDK.DOMModel.DOMNode;
 
@@ -271,7 +280,7 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
   #greenDevEmulationAxTree: string|null = null;
   #currentTurnId = 0;
 
-  constructor(opts: AgentOptions) {
+  constructor(opts: ExecuteJsAgentOptions) {
     super(opts);
 
     this.#changes = opts.changeManager || new ChangeManager();

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -19,7 +19,6 @@ import * as AiHistoryStorage from './AiHistoryStorage.js';
 import * as AiUtils from './AiUtils.js';
 import * as BuiltInAi from './BuiltInAi.js';
 import * as ChangeManager from './ChangeManager.js';
-import * as ConversationHandler from './ConversationHandler.js';
 import * as FileFormatter from './data_formatters/FileFormatter.js';
 import * as LighthouseFormatter from './data_formatters/LighthouseFormatter.js';
 import * as NetworkRequestFormatter from './data_formatters/NetworkRequestFormatter.js';
@@ -48,7 +47,6 @@ export {
   BuiltInAi,
   ChangeManager,
   ContextSelectionAgent,
-  ConversationHandler,
   ConversationSummaryAgent,
   Debug,
   EvaluateAction,

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7402,11 +7402,7 @@ export const NativeFunctions = [
   },
   {
     name: "registerTool",
-    signatures: [["tool"]]
-  },
-  {
-    name: "unregisterTool",
-    signatures: [["name"]]
+    signatures: [["tool","?options"]]
   },
   {
     name: "SnapEvent",

package/front_end/models/web_mcp/WebMCPModel.ts

@@ -0,0 +1,187 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Common from '../../core/common/common.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
+import type * as Protocol from '../../generated/protocol.js';
+import * as Bindings from '../bindings/bindings.js';
+import type * as StackTrace from '../stack_trace/stack_trace.js';
+
+export const enum Events {
+  TOOLS_ADDED = 'ToolsAdded',
+  TOOLS_REMOVED = 'ToolsRemoved',
+  TOOL_INVOKED = 'ToolInvoked',
+  TOOL_RESPONDED = 'ToolResponded',
+}
+
+export interface Call {
+  invocationId: string;
+  tool: Tool;
+  input: string;
+  result?: {
+    status: Protocol.WebMCP.InvocationStatus,
+    output?: unknown,
+    errorText?: string,
+    exception?: Protocol.Runtime.RemoteObject,
+  };
+}
+
+export class Tool {
+  #protocolTool: Readonly<Protocol.WebMCP.Tool>;
+  #stackTrace?: Promise<StackTrace.StackTrace.StackTrace>;
+  #target: WeakRef<SDK.Target.Target>;
+
+  constructor(tool: Protocol.WebMCP.Tool, target: SDK.Target.Target) {
+    this.#target = new WeakRef(target);
+    this.#protocolTool = tool;
+    this.#stackTrace = tool.stackTrace &&
+        Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createStackTraceFromProtocolRuntime(
+            tool.stackTrace, target);
+  }
+
+  get stackTrace(): Promise<StackTrace.StackTrace.StackTrace>|undefined {
+    return this.#stackTrace;
+  }
+
+  get name(): string {
+    return this.#protocolTool.name;
+  }
+
+  get description(): string {
+    return this.#protocolTool.description;
+  }
+
+  get frame(): SDK.ResourceTreeModel.ResourceTreeFrame|undefined {
+    return this.#target.deref()
+               ?.model(SDK.ResourceTreeModel.ResourceTreeModel)
+               ?.frameForId(this.#protocolTool.frameId) ??
+        undefined;
+  }
+
+  get isDeclarative(): boolean {
+    return Boolean(this.#protocolTool.backendNodeId);
+  }
+
+  get node(): SDK.DOMModel.DeferredDOMNode|undefined {
+    const target = this.#target.deref();
+    return this.#protocolTool.backendNodeId && target &&
+        new SDK.DOMModel.DeferredDOMNode(target, this.#protocolTool.backendNodeId);
+  }
+}
+export interface EventTypes {
+  [Events.TOOLS_ADDED]: readonly Tool[];
+  [Events.TOOLS_REMOVED]: readonly Tool[];
+  [Events.TOOL_INVOKED]: Call;
+  [Events.TOOL_RESPONDED]: Call;
+}
+
+export class WebMCPModel extends SDK.SDKModel.SDKModel<EventTypes> implements ProtocolProxyApi.WebMCPDispatcher {
+  readonly #tools = new Map<Protocol.Page.FrameId, Map<string, Tool>>();
+  readonly #calls = new Map<string, Call>();
+  readonly agent: ProtocolProxyApi.WebMCPApi;
+  #enabled = false;
+
+  constructor(target: SDK.Target.Target) {
+    super(target);
+    this.agent = target.webMCPAgent();
+    target.registerWebMCPDispatcher(this);
+
+    const runtimeModel = target.model(SDK.RuntimeModel.RuntimeModel);
+    if (runtimeModel) {
+      runtimeModel.addEventListener(
+          SDK.RuntimeModel.Events.ExecutionContextDestroyed, this.#executionContextDestroyed, this);
+    }
+
+    void this.enable();
+  }
+
+  get tools(): IteratorObject<Tool> {
+    return this.#tools.values().flatMap(toolMap => toolMap.values());
+  }
+
+  get toolCalls(): Call[] {
+    return [...this.#calls.values()];
+  }
+
+  clearCalls(): void {
+    this.#calls.clear();
+  }
+
+  async enable(): Promise<void> {
+    if (this.#enabled) {
+      return;
+    }
+    await this.agent.invoke_enable();
+    this.#enabled = true;
+  }
+
+  #executionContextDestroyed(event: Common.EventTarget.EventTargetEvent<SDK.RuntimeModel.ExecutionContext>): void {
+    const executionContext = event.data;
+    if (executionContext.isDefault && executionContext.frameId) {
+      const frameTools = this.#tools.get(executionContext.frameId);
+      if (frameTools) {
+        const toolsToRemove = [...frameTools.values()];
+        this.#tools.delete(executionContext.frameId);
+        this.dispatchEventToListeners(Events.TOOLS_REMOVED, toolsToRemove);
+      }
+    }
+  }
+
+  toolsRemoved(params: Protocol.WebMCP.ToolsRemovedEvent): void {
+    const deletedTools = [];
+    for (const protocolTool of params.tools) {
+      const tool = this.#tools.get(protocolTool.frameId)?.get(protocolTool.name);
+      if (tool) {
+        this.#tools.get(protocolTool.frameId)?.delete(protocolTool.name);
+        deletedTools.push(tool);
+      }
+    }
+    this.dispatchEventToListeners(Events.TOOLS_REMOVED, deletedTools);
+  }
+
+  toolsAdded(params: Protocol.WebMCP.ToolsAddedEvent): void {
+    const addedTools = [];
+    for (const protocolTool of params.tools) {
+      const tool = new Tool(protocolTool, this.target());
+      const frameTools = this.#tools.get(protocolTool.frameId) ?? new Map();
+      if (!this.#tools.has(protocolTool.frameId)) {
+        this.#tools.set(protocolTool.frameId, frameTools);
+      }
+      frameTools.set(tool.name, tool);
+      addedTools.push(tool);
+    }
+    this.dispatchEventToListeners(Events.TOOLS_ADDED, addedTools);
+  }
+
+  toolInvoked(params: Protocol.WebMCP.ToolInvokedEvent): void {
+    const tool = this.#tools.get(params.frameId)?.get(params.toolName);
+    if (!tool) {
+      return;
+    }
+    const call: Call = {
+      invocationId: params.invocationId,
+      input: params.input,
+      tool,
+    };
+    this.#calls.set(params.invocationId, call);
+    this.dispatchEventToListeners(Events.TOOL_INVOKED, call);
+  }
+
+  toolResponded(params: Protocol.WebMCP.ToolRespondedEvent): void {
+    const call = this.#calls.get(params.invocationId);
+    if (!call) {
+      return;
+    }
+    call.result = {
+      status: params.status,
+      output: params.output,
+      errorText: params.errorText,
+      exception: params.exception,
+    };
+    this.dispatchEventToListeners(Events.TOOL_RESPONDED, call);
+  }
+}
+
+SDK.SDKModel.SDKModel.register(WebMCPModel, {capabilities: SDK.Target.Capability.WEB_MCP, autostart: true});

package/front_end/models/web_mcp/web_mcp.ts

@@ -0,0 +1,9 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as WebMCPModel from './WebMCPModel.js';
+
+export {
+  WebMCPModel,
+};

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -29,6 +29,7 @@ import * as NetworkPanel from '../network/network.js';
 import * as TimelinePanel from '../timeline/timeline.js';
 
 import aiAssistancePanelStyles from './aiAssistancePanel.css.js';
+import {AccessibilityAgentMarkdownRenderer} from './components/AccessibilityAgentMarkdownRenderer.js';
 import {
   type AnswerPart,
   ChatMessageEntity,
@@ -363,6 +364,11 @@ function getMarkdownRenderer(conversation?: AiAssistanceModel.AiConversation.AiC
     const resourceTreeModel = domModel?.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
     const mainFrameId = resourceTreeModel?.mainFrame?.id;
     return new StylingAgentMarkdownRenderer(mainFrameId);
+  } else if (conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.ACCESSIBILITY) {
+    const domModel = SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.model(SDK.DOMModel.DOMModel);
+    const resourceTreeModel = domModel?.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
+    const mainFrameId = resourceTreeModel?.mainFrame?.id;
+    return new AccessibilityAgentMarkdownRenderer(mainFrameId);
   }
 
   return new MarkdownRendererWithCodeBlock();
@@ -1281,7 +1287,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return;
     }
 
-    return this.#changeManager.formatChangesForPatching(this.#conversation.id, /* includeSourceLocation= */ true);
+    const hasAiV2 = Boolean(Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled);
+    return this.#changeManager.formatChangesForPatching(this.#conversation.id, /* includeMetadata= */ !hasAiV2);
   }
 
   override async performUpdate(): Promise<void> {

package/front_end/panels/ai_assistance/ai_assistance.ts

@@ -4,6 +4,7 @@
 
 export * from './AiAssistancePanel.js';
 export * from './components/ChatView.js';
+export * from './components/AccessibilityAgentMarkdownRenderer.js';
 export * as ChatInput from './components/ChatInput.js';
 export * from './components/MarkdownRendererWithCodeBlock.js';
 export * from './SelectWorkspaceDialog.js';

package/front_end/panels/ai_assistance/components/AccessibilityAgentMarkdownRenderer.ts

@@ -0,0 +1,88 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as SDK from '../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../generated/protocol.js';
+import type * as Marked from '../../../third_party/marked/marked.js';
+import * as Lit from '../../../ui/lit/lit.js';
+import * as PanelsCommon from '../../common/common.js';
+
+import {MarkdownRendererWithCodeBlock} from './MarkdownRendererWithCodeBlock.js';
+
+const {html} = Lit.StaticHtml;
+const {until} = Lit.Directives;
+
+export class AccessibilityAgentMarkdownRenderer extends MarkdownRendererWithCodeBlock {
+  constructor(
+      private mainFrameId = '',
+  ) {
+    super();
+  }
+
+  override templateForToken(token: Marked.Marked.MarkedToken): Lit.LitTemplate|null {
+    if (token.type === 'link' && token.href.startsWith('#')) {
+      if (token.href.startsWith('#path-')) {
+        const path = token.href.replace('#path-', '');
+        return html`<span>${
+            until(this.#linkifyPath(path, token.text).then(node => node || token.text), token.text)}</span>`;
+      }
+
+      let nodeId = undefined;
+      if (token.href.startsWith('#node-')) {
+        nodeId = Number(token.href.replace('#node-', '')) as Protocol.DOM.BackendNodeId;
+      } else if (token.href.startsWith('#')) {
+        nodeId = Number(token.href.replace('#', '')) as Protocol.DOM.BackendNodeId;
+      }
+
+      if (nodeId) {
+        return html`<span>${
+            until(this.#linkifyNode(nodeId, token.text).then(node => node || token.text), token.text)}</span>`;
+      }
+    }
+
+    return super.templateForToken(token);
+  }
+
+  async #linkifyNode(backendNodeId: Protocol.DOM.BackendNodeId, label: string): Promise<Lit.LitTemplate|undefined> {
+    if (backendNodeId === undefined) {
+      return;
+    }
+
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const domModel = target?.model(SDK.DOMModel.DOMModel);
+    if (!domModel) {
+      return undefined;
+    }
+    const domNodesMap = await domModel.pushNodesByBackendIdsToFrontend(new Set([backendNodeId]));
+    const node = domNodesMap?.get(backendNodeId);
+    if (!node) {
+      return;
+    }
+
+    if (node.frameId() !== this.mainFrameId) {
+      return;
+    }
+
+    const linkedNode = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {textContent: label});
+    return linkedNode;
+  }
+
+  async #linkifyPath(path: string, label: string): Promise<Lit.LitTemplate|undefined> {
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const domModel = target?.model(SDK.DOMModel.DOMModel);
+    if (!domModel) {
+      return undefined;
+    }
+    const nodeId = await domModel.pushNodeByPathToFrontend(path);
+    if (!nodeId) {
+      return;
+    }
+    const node = domModel.nodeForId(nodeId);
+    if (!node) {
+      return;
+    }
+    const linkedNode = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {textContent: label});
+    return linkedNode;
+  }
+}

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -45,6 +45,7 @@ const {widget} = UI.Widget;
 
 const REPORT_URL = 'https://crbug.com/364805393' as Platform.DevToolsPath.UrlString;
 const SCROLL_ROUNDING_OFFSET = 1;
+const MAX_NUM_LINES_IN_CODEBLOCK = 11;
 
 /*
 * Strings that don't need to be translated at this time.
@@ -310,6 +311,7 @@ export interface MessageInput {
   onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void;
   onCopyResponseClick: (message: ModelChatMessage) => void;
   onExportClick?: () => void;
+  changeSummary?: string;
   walkthrough: {
     onOpen: (message: ModelChatMessage) => void,
     isExpanded: boolean,
@@ -404,6 +406,15 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
           },
         )}
         ${renderError(message)}
+        ${input.isLastMessage && hasAiV2 && !input.isLoading && input.changeSummary ? html`
+          <devtools-code-block
+            .code=${input.changeSummary}
+            .codeLang=${'css'}
+            .displayLimit=${MAX_NUM_LINES_IN_CODEBLOCK}
+            .displayNotice=${true}
+            class="ai-css-change"
+          ></devtools-code-block>
+        ` : Lit.nothing}
         ${input.showActions ? renderActions(input, output) : Lit.nothing}
       </div>
     </section>
@@ -471,6 +482,7 @@ function renderStepCode(step: Step): Lit.LitTemplate {
       <devtools-code-block
         .code=${step.code.trim()}
         .codeLang=${'js'}
+        .displayLimit=${MAX_NUM_LINES_IN_CODEBLOCK}
         .displayNotice=${!Boolean(step.output)}
         .header=${codeHeadingText}
         .showCopyButton=${true}
@@ -481,6 +493,7 @@ function renderStepCode(step: Step): Lit.LitTemplate {
     <devtools-code-block
       .code=${step.output}
       .codeLang=${'js'}
+      .displayLimit=${MAX_NUM_LINES_IN_CODEBLOCK}
       .displayNotice=${true}
       .header=${lockedString(UIStringsNotTranslate.dataReturned)}
       .showCopyButton=${false}
@@ -513,6 +526,7 @@ function renderStepDetails({
       <devtools-code-block
         .code=${contextDetail.text}
         .codeLang=${contextDetail.codeLang || ''}
+        .displayLimit=${MAX_NUM_LINES_IN_CODEBLOCK}
         .displayNotice=${false}
         .header=${contextDetail.title}
         .showCopyButton=${true}
@@ -851,6 +865,7 @@ async function makeBottomUpTimelineTreeWidget(widgetData: BottomUpTreeAiWidget):
     startTime,
     endTime,
     compactMode: true,
+    maxLinkLength: 15,
   })}></devtools-widget>`;
 
   return {
@@ -1164,7 +1179,7 @@ function renderActions(input: ChatMessageViewInput, output: ViewOutput): Lit.Lit
             } as Buttons.Button.ButtonData}
             @click=${() => input.onRatingClick(Host.AidaClient.Rating.NEGATIVE)}
           ></devtools-button>
-          <div class="vertical-separator"></div>
+          ${aiAssistanceV2 ? Lit.nothing : html`<div class="vertical-separator"></div>`}
         `: Lit.nothing}
         <devtools-button
           .data=${
@@ -1192,7 +1207,6 @@ function renderActions(input: ChatMessageViewInput, output: ViewOutput): Lit.Lit
             @click=${input.onCopyResponseClick}></devtools-button>
         `}
         ${input.onExportClick && aiAssistanceV2 && input.isLastMessage ? html`
-        <div class="vertical-separator"></div>
           <devtools-button
             class="export-for-agents-button"
             .jslogContext=${'ai-export-for-agents'}
@@ -1200,7 +1214,7 @@ function renderActions(input: ChatMessageViewInput, output: ViewOutput): Lit.Lit
             .iconName=${'copy'}
             @click=${input.onExportClick}
           >${lockedString(UIStringsNotTranslate.exportForAgents)}</devtools-button>
-          <div class="vertical-separator"></div>
+          ${input.suggestions ? html`<div class="vertical-separator"></div>` : Lit.nothing}
         ` : Lit.nothing}
       </div>
       ${input.suggestions ? html`<div class="suggestions-container">
@@ -1312,6 +1326,7 @@ export class ChatMessage extends UI.Widget.Widget {
       (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void = () => {};
   onCopyResponseClick: (message: ModelChatMessage) => void = () => {};
   onExportClick: () => void = () => {};
+  changeSummary?: string;
   walkthrough: MessageInput['walkthrough'] = {
     onOpen: () => {},
     onToggle: () => {},
@@ -1380,6 +1395,7 @@ export class ChatMessage extends UI.Widget.Widget {
           currentRating: this.#currentRating,
           isShowingFeedbackForm: this.#isShowingFeedbackForm,
           onFeedbackSubmit: this.onFeedbackSubmit,
+          changeSummary: this.changeSummary,
           walkthrough: this.walkthrough,
         },
         this.#viewOutput, this.contentElement);

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -7,6 +7,7 @@ import '../../../ui/components/spinners/spinners.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
+import * as Root from '../../../core/root/root.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
@@ -103,9 +104,12 @@ interface ChatWidgetInput extends Props {
 }
 
 const DEFAULT_VIEW: View = (input, output, target) => {
+  const hasAiV2 = Boolean(Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled);
+
   const chatUiClasses = classMap({
     'chat-ui': true,
     gemini: AiAssistanceModel.AiUtils.isGeminiBranding(),
+    'ai-v2': hasAiV2,
   });
 
   const inputWidgetClasses = classMap({
@@ -113,6 +117,8 @@ const DEFAULT_VIEW: View = (input, output, target) => {
     sticky: !input.isReadOnly,
   });
 
+  const shouldShowPatchWidget = !hasAiV2 && !input.isLoading;
+
   // clang-format off
     render(html`
       <style>${chatViewStyles}</style>
@@ -133,15 +139,16 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                   onFeedbackSubmit: input.onFeedbackSubmit,
                   onCopyResponseClick: input.onCopyResponseClick,
                   onExportClick: input.exportForAgentsClick,
+                  changeSummary: input.changeSummary,
                   walkthrough: {
                     ...input.walkthrough,
                   }
                 })
               )}
-              ${input.isLoading ? nothing : widget(PatchWidget, {
-                  changeSummary: input.changeSummary ?? '',
-                  changeManager: input.changeManager,
-                })}
+              ${shouldShowPatchWidget ? widget(PatchWidget, {
+                changeSummary: input.changeSummary ?? '',
+                changeManager: input.changeManager,
+              }) : nothing}
             </div>
           ` : html`
             <div class="empty-state-container">