chrome-devtools-frontend 1.0.1574367 → 1.0.1575635

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

@@ -0,0 +1,141 @@
+// 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 Host from '../../../core/host/host.js';
+import * as Platform from '../../../core/platform/platform.js';
+import * as Root from '../../../core/root/root.js';
+import * as Logs from '../../logs/logs.js';
+
+import {
+  type AgentOptions,
+  AiAgent,
+  type ContextResponse,
+  type RequestOptions,
+} from './AiAgent.js';
+
+/**
+ * WARNING: preamble defined in code is only used when userTier is
+ * TESTERS. Otherwise, a server-side preamble is used (see
+ * chrome_preambles.gcl). Sync local changes with the server-side.
+ */
+const preamble = `
+You are a Web Development Assistant integrated into Chrome DevTools. Your tone is educational, supportive, and technically precise.
+You aim to help developers of all levels, prioritizing teaching web concepts as the primary entry point for any solution.
+
+# Considerations
+* Determine what the question the domain of the question is - styling, network, sources, performance or other part of DevTools.
+* When possible proactively try to gather additional data and select context that they user may find relevant to the question they are asking utilizing the function calls available to you.
+* Avoid making assumptions without sufficient evidence, and always seek further clarification if needed.
+* Always explore multiple possible explanations for the observed behavior before settling on a conclusion.
+* When presenting solutions, clearly distinguish between the primary cause and contributing factors.
+* Please answer only if you are sure about the answer. Otherwise, explain why you're not able to answer.
+* When answering, always consider MULTIPLE possible solutions.
+* If you are unable to gather more information provide a comprehensive guide to how to fix the issue using Chrome DevTools and explain how and why.
+* You can suggest any panel or flow in Chrome DevTools that may help the user out
+
+# Formatting Guidelines
+* Use Markdown for all code snippets.
+* Always specify the language for code blocks (e.g., \`\`\`css, \`\`\`javascript).
+* Keep text responses concise and scannable.
+
+* 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.
+* **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** You are a debugging assistant in DevTools. 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.
+`;
+
+/**
+ * One agent instance handles one conversation. Create a new agent
+ * instance for a new conversation.
+ */
+export class ContextSelectionAgent extends AiAgent<never> {
+  readonly preamble = preamble;
+  readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_FILE_AGENT;
+  get userTier(): string|undefined {
+    // TODO: Make this depend on variable.
+    return Root.Runtime.hostConfig.devToolsFreestyler?.userTier;
+  }
+  get options(): RequestOptions {
+    const temperature = Root.Runtime.hostConfig.devToolsAiAssistanceFileAgent?.temperature;
+    const modelId = Root.Runtime.hostConfig.devToolsAiAssistanceFileAgent?.modelId;
+
+    return {
+      temperature,
+      modelId,
+    };
+  }
+
+  constructor(opts: AgentOptions) {
+    super(opts);
+
+    this.declareFunction<Record<string, never>>('listNetworkRequests', {
+      description: `Gives a list of network requests`,
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: true,
+        required: [],
+        properties: {},
+      },
+      handler: async (_params, options) => {
+        if (!options?.approved) {
+          return {
+            requiresApproval: true,
+          };
+        }
+
+        const requestURls = [];
+        for (const request of Logs.NetworkLog.NetworkLog.instance().requests()) {
+          requestURls.push(request.url());
+        }
+
+        return {
+          result: requestURls,
+        };
+      },
+    });
+
+    this.declareFunction<{url: string}>('selectNetworkRequest', {
+      description: `From the list of selected request select one to debug`,
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: true,
+        required: ['url'],
+        properties: {
+          url: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description: 'The url of the requests',
+            nullable: false,
+          },
+        },
+      },
+      handler: async ({url}) => {
+        // TODO: Switch to using IDs to make is easier to link to as well.
+        const request = Logs.NetworkLog.NetworkLog.instance().requests().find(req => {
+          return req.url() === Platform.DevToolsPath.urlString`${url}` ||
+              req.url() === Platform.DevToolsPath.urlString`${url.slice(0, -1)}` ||
+              req.url() === Platform.DevToolsPath.urlString`${url}/`;
+        });
+
+        if (request) {
+          return {
+            context: request,
+          };
+        }
+
+        return {
+          error: 'No request found',
+        };
+      },
+    });
+  }
+
+  async * handleContextDetails(): AsyncGenerator<ContextResponse, void, void> {
+  }
+
+  override async enhanceQuery(query: string): Promise<string> {
+    return query;
+  }
+}

package/front_end/models/ai_assistance/agents/StylingAgent.snapshot.txt

@@ -57,7 +57,7 @@ Content:
   "function_declarations": [
     {
       "name": "getStyles",
-      "description": "Get computed and source styles for one or multiple elements on the inspected page for multiple elements at once by uid.\n\n**CRITICAL** Use selectors to refer to elements in the text output. Do not use uids.\n**CRITICAL** Always provide the explanation argument to explain what and why you query.",
+      "description": "Get computed and source styles for one or multiple elements on the inspected page for multiple elements at once by uid.\n\n**CRITICAL** An element uid is a number, not a selector.\n**CRITICAL** Use selectors to refer to elements in the text output. Do not use uids.\n**CRITICAL** Always provide the explanation argument to explain what and why you query.",
       "parameters": {
         "type": 6,
         "description": "",
@@ -70,9 +70,9 @@ Content:
           },
           "elements": {
             "type": 5,
-            "description": "A list of element uids to get data for",
+            "description": "A list of element uids to get data for. These are numbers, not selectors.",
             "items": {
-              "type": 1,
+              "type": 3,
               "description": "An element uid."
             },
             "nullable": false

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

@@ -279,13 +279,14 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
                                  });
 
     this.declareFunction<{
-      elements: string[],
+      elements: number[],
       styleProperties: string[],
       explanation: string,
     }>('getStyles', {
       description:
           `Get computed and source styles for one or multiple elements on the inspected page for multiple elements at once by uid.
 
+**CRITICAL** An element uid is a number, not a selector.
 **CRITICAL** Use selectors to refer to elements in the text output. Do not use uids.
 **CRITICAL** Always provide the explanation argument to explain what and why you query.`,
       parameters: {
@@ -300,8 +301,8 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
           },
           elements: {
             type: Host.AidaClient.ParametersTypes.ARRAY,
-            description: 'A list of element uids to get data for',
-            items: {type: Host.AidaClient.ParametersTypes.STRING, description: `An element uid.`},
+            description: 'A list of element uids to get data for. These are numbers, not selectors.',
+            items: {type: Host.AidaClient.ParametersTypes.INTEGER, description: `An element uid.`},
             nullable: false,
           },
           styleProperties: {
@@ -605,7 +606,7 @@ const data = {
     return this.context?.getItem() ?? null;
   }
 
-  async getStyles(elements: string[], properties: string[]): Promise<FunctionCallHandlerResult<unknown>> {
+  async getStyles(elements: number[], properties: string[]): Promise<FunctionCallHandlerResult<unknown>> {
     const result:
         Record<string, {computed: Record<string, string|undefined>, authored: Record<string, string|undefined>}> = {};
     for (const uid of elements) {

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -4,6 +4,7 @@
 
 import * as AgentProject from './AgentProject.js';
 import * as AiAgent from './agents/AiAgent.js';
+import * as ContextSelectionAgent from './agents/ContextSelectionAgent.js';
 import * as FileAgent from './agents/FileAgent.js';
 import * as NetworkAgent from './agents/NetworkAgent.js';
 import * as PatchAgent from './agents/PatchAgent.js';
@@ -40,6 +41,7 @@ export {
   AiUtils,
   BuiltInAi,
   ChangeManager,
+  ContextSelectionAgent,
   ConversationHandler,
   Debug,
   EvaluateAction,

package/front_end/models/issues_manager/CorsIssue.ts

@@ -94,9 +94,6 @@ function getIssueCode(details: Protocol.Audits.CorsIssueDetails): IssueCode {
     case Protocol.Network.CorsError.LocalNetworkAccessPermissionDenied:
       return IssueCode.LOCAL_NETWORK_ACCESS_PERMISSION_DENIED;
   }
-  // TODO(b/394636065): Remove this once browser protocol has rolled, as we
-  // will never hit this case.
-  return null as unknown as IssueCode;
 }
 
 export class CorsIssue extends Issue<Protocol.Audits.CorsIssueDetails, IssueCode> {

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -6044,6 +6044,11 @@ export const NativeFunctions = [
     signatures: [["r"]],
     receivers: ["FetchEvent"]
   },
+  {
+    name: "respondWith",
+    signatures: [["agentResponse"]],
+    receivers: ["SubmitEvent"]
+  },
   {
     name: "respondWith",
     signatures: [["paymentAbortedResponse"]],

package/front_end/models/live-metrics/LiveMetrics.ts

@@ -62,7 +62,29 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
   private constructor() {
     super();
-    SDK.TargetManager.TargetManager.instance().observeTargets(this);
+    const targetManager = SDK.TargetManager.TargetManager.instance();
+    targetManager.observeTargets(this, {scoped: true});
+    // Listen for target info changes to detect prerender activation.
+    // Scoped observers don't receive events when a prerendered target becomes
+    // primary because setScopeTarget() isn't called during that transition.
+    targetManager.addEventListener(
+        SDK.TargetManager.Events.AVAILABLE_TARGETS_CHANGED, this.#onAvailableTargetsChanged, this);
+  }
+
+  #onAvailableTargetsChanged(): void {
+    const primaryTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    if (primaryTarget && primaryTarget !== this.#target) {
+      // Primary target changed (e.g., prerender activation). Switch to it.
+      void this.#switchToTarget(primaryTarget);
+    }
+  }
+
+  async #switchToTarget(newTarget: SDK.Target.Target): Promise<void> {
+    if (this.#target) {
+      await this.disable();
+    }
+    this.#target = newTarget;
+    await this.enable();
   }
 
   static instance(opts: {forceNew?: boolean} = {forceNew: false}): LiveMetrics {
@@ -371,31 +393,6 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     this.#sendStatusUpdate();
   }
 
-  async #getFrameForExecutionContextId(executionContextId: Protocol.Runtime.ExecutionContextId):
-      Promise<SDK.ResourceTreeModel.ResourceTreeFrame|null> {
-    if (!this.#target) {
-      return null;
-    }
-
-    const runtimeModel = this.#target.model(SDK.RuntimeModel.RuntimeModel);
-    if (!runtimeModel) {
-      return null;
-    }
-
-    const executionContext = runtimeModel.executionContext(executionContextId);
-    if (!executionContext) {
-      return null;
-    }
-
-    const frameId = executionContext.frameId;
-    if (!frameId) {
-      return null;
-    }
-
-    const frameManager = SDK.FrameManager.FrameManager.instance();
-    return await frameManager.getOrWaitForFrame(frameId);
-  }
-
   async #onBindingCalled(event: {data: Protocol.Runtime.BindingCalledEvent}): Promise<void> {
     const {data} = event;
     if (data.name !== Spec.EVENT_BINDING_NAME) {
@@ -407,22 +404,8 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     await this.#mutex.run(async () => {
       const webVitalsEvent = JSON.parse(data.payload) as Spec.WebVitalsEvent;
 
-      // This ensures that `#lastResetContextId` will always be an execution context on the
-      // primary frame. If we receive events from this execution context then we automatically
-      // know that they are for the primary frame.
-      if (this.#lastResetContextId !== data.executionContextId) {
-        if (webVitalsEvent.name !== 'reset') {
-          return;
-        }
-
-        // We should avoid calling this function for every event.
-        // If an interaction triggers a pre-rendered navigation then the old primary frame could
-        // be removed before we reach this point, and then it will hang forever.
-        const frame = await this.#getFrameForExecutionContextId(data.executionContextId);
-        if (!frame?.isPrimaryFrame()) {
-          return;
-        }
-
+      // Track the execution context from 'reset' events for logInteractionScripts().
+      if (webVitalsEvent.name === 'reset') {
         this.#lastResetContextId = data.executionContextId;
       }
 
@@ -464,6 +447,7 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   }
 
   async targetAdded(target: SDK.Target.Target): Promise<void> {
+    // Scoped observers can also receive events for OOPIFs and workers.
     if (target !== SDK.TargetManager.TargetManager.instance().primaryPageTarget()) {
       return;
     }
@@ -472,20 +456,12 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   }
 
   async targetRemoved(target: SDK.Target.Target): Promise<void> {
+    // Scoped observers can also receive events for OOPIFs and workers.
     if (target !== this.#target) {
       return;
     }
     await this.disable();
     this.#target = undefined;
-
-    // If the user navigates to a page that was pre-rendered then the primary page target
-    // will be swapped and the old target will be removed. We should ensure live metrics
-    // remain enabled on the new primary page target.
-    const primaryPageTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-    if (primaryPageTarget) {
-      this.#target = primaryPageTarget;
-      await this.enable();
-    }
   }
 
   async enable(): Promise<void> {
@@ -555,6 +531,10 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
       return;
     }
 
+    // Reset to ensure clean state when re-enabling on a new target.
+    // See crbug.com/478832430.
+    this.#lastResetContextId = undefined;
+
     await this.#killAllLiveMetricContexts();
 
     const runtimeModel = this.#target.model(SDK.RuntimeModel.RuntimeModel);

package/front_end/models/stack_trace/StackTrace.ts

@@ -62,3 +62,44 @@ export const enum Events {
 export interface EventTypes {
   [Events.UPDATED]: void;
 }
+
+/**
+ * A small wrapper around a DebuggableFrame usable as a UI.Context flavor.
+ * This is necessary as Frame and DebuggableFrame are updated in place, but
+ * for UI.Context we need a new instance.
+ */
+export class DebuggableFrameFlavor implements DebuggableFrame {
+  static #last?: DebuggableFrameFlavor;
+
+  readonly url?: string;
+  readonly uiSourceCode?: Workspace.UISourceCode.UISourceCode;
+  readonly name?: string;
+  readonly line: number;
+  readonly column: number;
+  readonly missingDebugInfo?: MissingDebugInfo;
+  readonly sdkFrame: SDK.DebuggerModel.CallFrame;
+
+  /** Use the static {@link for}. Only public to satisfy the `setFlavor` Ctor type  */
+  constructor(frame: DebuggableFrame) {
+    this.url = frame.url;
+    this.uiSourceCode = frame.uiSourceCode;
+    this.name = frame.name;
+    this.line = frame.line;
+    this.column = frame.column;
+    this.missingDebugInfo = frame.missingDebugInfo;
+    this.sdkFrame = frame.sdkFrame;
+  }
+
+  /** @returns the same instance of DebuggableFrameFlavor for repeated calls with the same (i.e. deep equal) DebuggableFrame */
+  static for(frame: DebuggableFrame): DebuggableFrameFlavor {
+    function equals(a: DebuggableFrame, b: DebuggableFrame): boolean {
+      return a.url === b.url && a.uiSourceCode === b.uiSourceCode && a.name === b.name && a.line === b.line &&
+          a.column === b.column && a.sdkFrame === b.sdkFrame;
+    }
+
+    if (!DebuggableFrameFlavor.#last || !equals(DebuggableFrameFlavor.#last, frame)) {
+      DebuggableFrameFlavor.#last = new DebuggableFrameFlavor(frame);
+    }
+    return DebuggableFrameFlavor.#last;
+  }
+}

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -44,10 +44,6 @@ import {MarkdownRendererWithCodeBlock} from './components/MarkdownRendererWithCo
 import {PerformanceAgentMarkdownRenderer} from './components/PerformanceAgentMarkdownRenderer.js';
 import {isAiAssistancePatchingEnabled} from './PatchWidget.js';
 
-// FIXME: this export is temporary to avoid rewriting tests.
-export {ChatMessageEntity} from './components/ChatMessage.js';
-export type {AnswerPart, ModelChatMessage, StepPart} from './components/ChatMessage.js';
-
 const {html} = Lit;
 
 const AI_ASSISTANCE_SEND_FEEDBACK = 'https://crbug.com/364805393' as Platform.DevToolsPath.UrlString;
@@ -164,6 +160,10 @@ const UIStringsNotTranslate = {
    *@description Placeholder text for the chat UI input.
    */
   inputPlaceholderForPerformanceTraceNoContext: 'Record or select a performance trace to ask a question',
+  /**
+   *@description Placeholder text for the chat UI input.
+   */
+  inputPlaceholderForNoContext: 'Ask AI Assistance',
   /**
    * @description Disclaimer text right after the chat input.
    */
@@ -204,6 +204,7 @@ const UIStringsNotTranslate = {
    */
   inputDisclaimerForPerformanceEnterpriseNoLogging:
       'Chat messages and data from your performance trace are sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
+
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/AiAssistancePanel.ts', UIStrings);
@@ -259,6 +260,14 @@ async function getEmptyStateSuggestions(conversation?: AiAssistanceModel.AiConve
       ];
     }
 
+    case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE: {
+      return [
+        {title: 'How can I use DevTools to debug?', jslogContext: 'empty'},
+        {title: 'What performance issues exist with my page?', jslogContext: 'empty'},
+        {title: 'What are the slowest requests on this page?', jslogContext: 'empty'},
+      ];
+    }
+
     default:
       Platform.assertNever(conversation.type, 'Unknown conversation type');
   }
@@ -395,7 +404,7 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
       return html`
         <devtools-ai-chat-view
           .props=${input.props}
-          ${Lit.Directives.ref((el: Element | undefined) => {
+          ${Lit.Directives.ref(el => {
             if (!el || !(el instanceof ChatView)) {
               return;
             }
@@ -490,6 +499,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #userInfo: {
     accountImage?: string,
     accountFullName?: string,
+    accountGivenName?: string,
   };
   #timelinePanelInstance: TimelinePanel.TimelinePanel.TimelinePanel|null = null;
   #runAbortController = new AbortController();
@@ -509,6 +519,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#userInfo = {
       accountImage: syncInfo.accountImage,
       accountFullName: syncInfo.accountFullName,
+      accountGivenName: syncInfo.accountGivenName,
     };
 
     if (UI.ActionRegistry.ActionRegistry.instance().hasAction('elements.toggle-element-search')) {
@@ -658,6 +669,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE;
     }
 
+    if (isAiAssistanceContextSelectionAgentEnabled() && !targetConversationType) {
+      return AiAssistanceModel.AiHistoryStorage.ConversationType.NONE;
+    }
+
     return targetConversationType;
   }
 
@@ -680,6 +695,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         new AiAssistanceModel.AiConversation.AiConversation(
             targetConversationType, [], undefined, false, this.#aidaClient, this.#changeManager) :
         undefined;
+
     this.#updateConversationState(conversation);
   }
 
@@ -807,6 +823,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       this.#userInfo = {
         accountImage: syncInfo.accountImage,
         accountFullName: syncInfo.accountFullName,
+        accountGivenName: syncInfo.accountGivenName,
       };
       this.requestUpdate();
     }
@@ -930,7 +947,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return true;
     }
 
-    if (!this.#conversation.selectedContext) {
+    if (!this.#conversation.selectedContext && !isAiAssistanceContextSelectionAgentEnabled()) {
       return true;
     }
 
@@ -982,6 +999,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
         return lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceWithNoRecording);
       }
+      case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
+        return lockedString(UIStringsNotTranslate.inputPlaceholderForNoContext);
     }
   }
 
@@ -1016,6 +1035,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           return lockedString(UIStringsNotTranslate.inputDisclaimerForPerformanceEnterpriseNoLogging);
         }
         return lockedString(UIStringsNotTranslate.inputDisclaimerForPerformance);
+
+      case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
+        return lockedString(UIStringsNotTranslate.inputDisclaimerForPerformance);
     }
   }
 
@@ -1249,9 +1271,41 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         return this.#selectedRequest;
       case AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE:
         return this.#selectedPerformanceTrace;
+      case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
+        return null;
     }
   }
 
+  #handleConversationContextChange = (data: unknown): void => {
+    if (data instanceof Workspace.UISourceCode.UISourceCode) {
+      if (this.#selectedFile?.getItem() === data) {
+        return;
+      }
+      this.#selectedFile = new AiAssistanceModel.FileAgent.FileContext(data);
+
+    } else if (data instanceof SDK.DOMModel.DOMNode) {
+      if (this.#selectedElement?.getItem() === data ||
+          // Ignore non node type like comments or html tags
+          data.nodeType() === Node.ELEMENT_NODE) {
+        return;
+      }
+      this.#selectedElement = new AiAssistanceModel.StylingAgent.NodeContext(data);
+    } else if (data instanceof SDK.NetworkRequest.NetworkRequest) {
+      if (this.#selectedRequest?.getItem() === data) {
+        return;
+      }
+      const calculator = NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator();
+      this.#selectedRequest = new AiAssistanceModel.NetworkAgent.RequestContext(data, calculator);
+    } else if (data instanceof AiAssistanceModel.AIContext.AgentFocus) {
+      if (this.#selectedPerformanceTrace?.getItem() === data) {
+        return;
+      }
+      this.#selectedPerformanceTrace = new AiAssistanceModel.PerformanceAgent.PerformanceTraceContext(data);
+    }
+
+    this.#updateConversationState(this.#conversation);
+  };
+
   async #startConversation(
       text: string,
       imageInput?: Host.AidaClient.Part,
@@ -1453,6 +1507,14 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             }
             break;
           }
+
+          case AiAssistanceModel.AiAgent.ResponseType.CONTEXT_CHANGE: {
+            this.#handleConversationContextChange(data.context);
+            step.isLoading = false;
+            commitStep();
+
+            break;
+          }
         }
 
         // Commit update intermediate step when not
@@ -1576,6 +1638,10 @@ function isAiAssistanceMultimodalInputEnabled(): boolean {
   return Boolean(Root.Runtime.hostConfig.devToolsFreestyler?.multimodal);
 }
 
+function isAiAssistanceContextSelectionAgentEnabled(): boolean {
+  return Boolean(Root.Runtime.hostConfig.devToolsAiAssistanceContextSelectionAgent?.enabled);
+}
+
 function isAiAssistanceServerSideLoggingEnabled(): boolean {
   return !Root.Runtime.hostConfig.aidaAvailability?.disallowLogging;
 }

package/front_end/panels/ai_assistance/ai_assistance-meta.ts

@@ -174,6 +174,7 @@ UI.ActionRegistration.registerActionExtension({
     return new AiAssistance.ActionDelegate();
   },
   condition: config => isAnyFeatureAvailable(config) && !isPolicyRestricted(config) && !isGeoRestricted(config),
+  featurePromotionId: 'debug-with-ai',
 });
 
 UI.ActionRegistration.registerActionExtension({

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

@@ -135,6 +135,8 @@ export interface ViewInput {
   onRemoveImageInput: () => void;
   onImageUpload: (ev: Event) => void;
   onImagePaste: (event: ClipboardEvent) => void;
+  onImageDragOver: (event: DragEvent) => void;
+  onImageDrop: (event: DragEvent) => void;
 }
 
 export type ViewOutput = undefined;
@@ -289,6 +291,8 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
               maxlength="10000"
               @keydown=${input.onTextAreaKeyDown}
               @paste=${input.onImagePaste}
+              @dragover=${input.onImageDragOver}
+              @drop=${input.onImageDrop}
               @input=${(event: KeyboardEvent) => {
                 input.onTextInputChange((event.target as HTMLInputElement).value);
               }}
@@ -550,12 +554,12 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
     });
   }
 
-  #handleImagePaste = (event: ClipboardEvent): void => {
+  #handleImageDataTransferEvent(dataTransfer: DataTransfer|null, event: Event): void {
     if (this.conversationType !== AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING) {
       return;
     }
 
-    const files = event.clipboardData?.files;
+    const files = dataTransfer?.files;
     if (!files || files.length === 0) {
       return;
     }
@@ -567,6 +571,22 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
 
     event.preventDefault();
     void this.#handleLoadImage(imageFile);
+  }
+
+  #handleImagePaste = (event: ClipboardEvent): void => {
+    this.#handleImageDataTransferEvent(event.clipboardData, event);
+  };
+
+  #handleImageDragOver = (event: DragEvent): void => {
+    if (this.conversationType !== AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING) {
+      return;
+    }
+
+    event.preventDefault();
+  };
+
+  #handleImageDrop = (event: DragEvent): void => {
+    this.#handleImageDataTransferEvent(event.dataTransfer, event);
   };
 
   async #handleLoadImage(file: File): Promise<void> {
@@ -663,6 +683,8 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
           onTextAreaKeyDown: this.onTextAreaKeyDown,
           onCancel: this.onCancel,
           onImageUpload: this.onImageUpload,
+          onImageDragOver: this.#handleImageDragOver,
+          onImageDrop: this.#handleImageDrop,
         },
         undefined, this.contentElement);
   }