chrome-devtools-frontend 1.0.1376716 → 1.0.1380117

package/front_end/panels/freestyler/DrJonesNetworkAgent.test.ts

@@ -15,7 +15,14 @@ import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import {createNetworkPanelForMockConnection} from '../../testing/NetworkHelpers.js';
 import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 
-import {allowHeader, DrJonesNetworkAgent, formatHeaders, formatInitiatorUrl, ResponseType} from './freestyler.js';
+import {
+  allowHeader,
+  DrJonesNetworkAgent,
+  formatHeaders,
+  formatInitiatorUrl,
+  RequestContext,
+  ResponseType,
+} from './freestyler.js';
 
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
@@ -215,7 +222,8 @@ describeWithMockConnection('DrJonesNetworkAgent', () => {
         aidaClient: mockAidaClient(generateAnswer),
       });
 
-      const responses = await Array.fromAsync(agent.run('test', {selected: selectedNetworkRequest}));
+      const responses =
+          await Array.fromAsync(agent.run('test', {selected: new RequestContext(selectedNetworkRequest)}));
       assert.deepStrictEqual(responses, [
         {
           type: ResponseType.USER_QUERY,
@@ -236,7 +244,7 @@ describeWithMockConnection('DrJonesNetworkAgent', () => {
             {
               title: 'Timing',
               text:
-                  'Queued at (timestamp): 0 μs\nStarted at (timestamp): 8.3 min\nQueueing (duration): 8.3 min\nConnection start (stalled) (duration): 800.00 ms\nRequest sent (duration): 100.00 ms\nDuration (duration): 8.3 min',
+                  'Queued at (timestamp): 0 μs\nStarted at (timestamp): 8.4 min\nQueueing (duration): 8.4 min\nConnection start (stalled) (duration): 800.00 ms\nRequest sent (duration): 100.00 ms\nDuration (duration): 8.4 min',
             },
             {
               title: 'Request initiator chain',
@@ -250,7 +258,7 @@ describeWithMockConnection('DrJonesNetworkAgent', () => {
         {
           type: ResponseType.QUERYING,
           query:
-              '# Selected network request \nRequest: https://www.example.com\n\nRequest headers:\ncontent-type: bar1\n\nResponse headers:\ncontent-type: bar2\nx-forwarded-for: bar3\n\nResponse status: 200 \n\nRequest timing:\nQueued at (timestamp): 0 μs\nStarted at (timestamp): 8.3 min\nQueueing (duration): 8.3 min\nConnection start (stalled) (duration): 800.00 ms\nRequest sent (duration): 100.00 ms\nDuration (duration): 8.3 min\n\nRequest initiator chain:\n- URL: <redacted cross-origin initiator URL>\n\t- URL: https://www.example.com\n\t\t- URL: https://www.example.com/1\n\t\t- URL: https://www.example.com/2\n\n# User request\n\ntest',
+              '# Selected network request \nRequest: https://www.example.com\n\nRequest headers:\ncontent-type: bar1\n\nResponse headers:\ncontent-type: bar2\nx-forwarded-for: bar3\n\nResponse status: 200 \n\nRequest timing:\nQueued at (timestamp): 0 μs\nStarted at (timestamp): 8.4 min\nQueueing (duration): 8.4 min\nConnection start (stalled) (duration): 800.00 ms\nRequest sent (duration): 100.00 ms\nDuration (duration): 8.4 min\n\nRequest initiator chain:\n- URL: <redacted cross-origin initiator URL>\n\t- URL: https://www.example.com\n\t\t- URL: https://www.example.com/1\n\t\t- URL: https://www.example.com/2\n\n# User request\n\ntest',
         },
         {
           type: ResponseType.ANSWER,
@@ -274,11 +282,11 @@ x-forwarded-for: bar3
 Response status: 200 \n
 Request timing:
 Queued at (timestamp): 0 μs
-Started at (timestamp): 8.3 min
-Queueing (duration): 8.3 min
+Started at (timestamp): 8.4 min
+Queueing (duration): 8.4 min
 Connection start (stalled) (duration): 800.00 ms
 Request sent (duration): 100.00 ms
-Duration (duration): 8.3 min
+Duration (duration): 8.4 min
 
 Request initiator chain:
 - URL: <redacted cross-origin initiator URL>

package/front_end/panels/freestyler/DrJonesNetworkAgent.ts

@@ -8,6 +8,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as Network from '../../panels/network/network.js';
+import * as PanelUtils from '../utils/utils.js';
 
 import {
   AgentType,
@@ -15,6 +16,7 @@ import {
   type AidaRequestOptions,
   type ContextDetail,
   type ContextResponse,
+  ConversationContext,
   type ParsedResponse,
   ResponseType,
 } from './AiAgent.js';
@@ -97,6 +99,31 @@ const UIStringsNotTranslate = {
 
 const lockedString = i18n.i18n.lockedString;
 
+export class RequestContext extends ConversationContext<SDK.NetworkRequest.NetworkRequest> {
+  #request: SDK.NetworkRequest.NetworkRequest;
+
+  constructor(request: SDK.NetworkRequest.NetworkRequest) {
+    super();
+    this.#request = request;
+  }
+
+  override getOrigin(): string {
+    return new URL(this.#request.url()).origin;
+  }
+
+  override getItem(): SDK.NetworkRequest.NetworkRequest {
+    return this.#request;
+  }
+
+  override getIcon(): HTMLElement {
+    return PanelUtils.PanelUtils.getIconForNetworkRequest(this.#request);
+  }
+
+  override getTitle(): string {
+    return this.#request.name();
+  }
+}
+
 /**
  * One agent instance handles one conversation. Create a new agent
  * instance for a new conversation.
@@ -107,14 +134,12 @@ export class DrJonesNetworkAgent extends AiAgent<SDK.NetworkRequest.NetworkReque
   readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_DRJONES_NETWORK_AGENT;
   get userTier(): string|undefined {
     const config = Common.Settings.Settings.instance().getHostConfig();
-    return config.devToolsAiAssistanceNetworkAgent?.userTier ?? config.devToolsExplainThisResourceDogfood?.userTier;
+    return config.devToolsAiAssistanceNetworkAgent?.userTier;
   }
   get options(): AidaRequestOptions {
     const config = Common.Settings.Settings.instance().getHostConfig();
-    const temperature =
-        config.devToolsAiAssistanceNetworkAgent?.temperature ?? config.devToolsExplainThisResourceDogfood?.temperature;
-    const modelId =
-        config.devToolsAiAssistanceNetworkAgent?.modelId ?? config.devToolsExplainThisResourceDogfood?.modelId;
+    const temperature = config.devToolsAiAssistanceNetworkAgent?.temperature;
+    const modelId = config.devToolsAiAssistanceNetworkAgent?.modelId;
 
     return {
       temperature,
@@ -123,7 +148,7 @@ export class DrJonesNetworkAgent extends AiAgent<SDK.NetworkRequest.NetworkReque
   }
 
   async *
-      handleContextDetails(selectedNetworkRequest: SDK.NetworkRequest.NetworkRequest|null):
+      handleContextDetails(selectedNetworkRequest: ConversationContext<SDK.NetworkRequest.NetworkRequest>|null):
           AsyncGenerator<ContextResponse, void, void> {
     if (!selectedNetworkRequest) {
       return;
@@ -132,14 +157,15 @@ export class DrJonesNetworkAgent extends AiAgent<SDK.NetworkRequest.NetworkReque
     yield {
       type: ResponseType.CONTEXT,
       title: lockedString(UIStringsNotTranslate.analyzingNetworkData),
-      details: createContextDetailsForDrJonesNetworkAgent(selectedNetworkRequest),
+      details: createContextDetailsForDrJonesNetworkAgent(selectedNetworkRequest.getItem()),
     };
   }
 
-  override async enhanceQuery(query: string, selectedNetworkRequest: SDK.NetworkRequest.NetworkRequest|null):
-      Promise<string> {
+  override async enhanceQuery(
+      query: string,
+      selectedNetworkRequest: ConversationContext<SDK.NetworkRequest.NetworkRequest>|null): Promise<string> {
     const networkEnchantmentQuery = selectedNetworkRequest ?
-        `# Selected network request \n${formatNetworkRequest(selectedNetworkRequest)}\n\n# User request\n\n` :
+        `# Selected network request \n${formatNetworkRequest(selectedNetworkRequest.getItem())}\n\n# User request\n\n` :
         '';
     return `${networkEnchantmentQuery}${query}`;
   }
@@ -190,9 +216,7 @@ const allowedHeaders = new Set([
   'content-disposition',
   'content-encoding',
   'content-language',
-  'content-length',
   'content-location',
-  'content-md5',
   'content-range',
   'content-security-policy',
   'content-type',
@@ -200,7 +224,6 @@ const allowedHeaders = new Set([
   'date',
   'delta-base',
   'dnt',
-  'etag',
   'expect-ct',
   'expect',
   'expires',
@@ -208,9 +231,7 @@ const allowedHeaders = new Set([
   'front-end-https',
   'host',
   'http2-settings',
-  'if-match',
   'if-modified-since',
-  'if-none-match',
   'if-range',
   'if-unmodified-source',
   'im',

package/front_end/panels/freestyler/DrJonesPerformanceAgent.test.ts

@@ -7,12 +7,12 @@ import {describeWithEnvironment, getGetHostConfigStub} from '../../testing/Envir
 import {TraceLoader} from '../../testing/TraceLoader.js';
 import * as TimelineUtils from '../timeline/utils/utils.js';
 
-import {DrJonesPerformanceAgent, ResponseType} from './freestyler.js';
+import {CallTreeContext, DrJonesPerformanceAgent, ResponseType} from './freestyler.js';
 
 describeWithEnvironment('DrJonesPerformanceAgent', () => {
   function mockHostConfig(modelId?: string, temperature?: number) {
     getGetHostConfigStub({
-      devToolsAiAssistancePerformanceAgentDogfood: {
+      devToolsAiAssistancePerformanceAgent: {
         modelId,
         temperature,
       },
@@ -133,7 +133,7 @@ describeWithEnvironment('DrJonesPerformanceAgent', () => {
         aidaClient: mockAidaClient(generateAnswer),
       });
 
-      const responses = await Array.fromAsync(agent.run('test', {selected: aiCallTree}));
+      const responses = await Array.fromAsync(agent.run('test', {selected: new CallTreeContext(aiCallTree)}));
       const expectedData = '\n\n' +
           `
 
@@ -198,7 +198,7 @@ self: 3
         serialize: () => 'Mock call tree',
       } as unknown as TimelineUtils.AICallTree.AICallTree;
 
-      const enhancedQuery1 = await agent.enhanceQuery('What is this?', mockAiCallTree);
+      const enhancedQuery1 = await agent.enhanceQuery('What is this?', new CallTreeContext(mockAiCallTree));
       assert.strictEqual(enhancedQuery1, 'Mock call tree\n\n# User request\n\nWhat is this?');
 
       // Create history state of the above query
@@ -227,13 +227,13 @@ self: 3
       ]]);
 
       const query2 = 'But what about this follow-up question?';
-      const enhancedQuery2 = await agent.enhanceQuery(query2, mockAiCallTree);
+      const enhancedQuery2 = await agent.enhanceQuery(query2, new CallTreeContext(mockAiCallTree));
       assert.strictEqual(enhancedQuery2, query2);
       assert.isFalse(enhancedQuery2.includes(mockAiCallTree.serialize()));
 
       // Just making sure any subsequent chat doesnt include it either.
       const query3 = 'And this 3rd question?';
-      const enhancedQuery3 = await agent.enhanceQuery(query3, mockAiCallTree);
+      const enhancedQuery3 = await agent.enhanceQuery(query3, new CallTreeContext(mockAiCallTree));
       assert.strictEqual(enhancedQuery3, query3);
       assert.isFalse(enhancedQuery3.includes(mockAiCallTree.serialize()));
     });

package/front_end/panels/freestyler/DrJonesPerformanceAgent.ts

@@ -5,13 +5,15 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as TimelineUtils from '../../panels/timeline/utils/utils.js';
+import * as TimelineUtils from '../../panels/timeline/utils/utils.js';
+import * as PanelUtils from '../utils/utils.js';
 
 import {
   AgentType,
   AiAgent,
   type AidaRequestOptions,
   type ContextResponse,
+  ConversationContext,
   type ParsedResponse,
   ResponseType,
 } from './AiAgent.js';
@@ -120,6 +122,43 @@ const UIStringsNotTranslate = {
 
 const lockedString = i18n.i18n.lockedString;
 
+export class CallTreeContext extends ConversationContext<TimelineUtils.AICallTree.AICallTree> {
+  #callTree: TimelineUtils.AICallTree.AICallTree;
+
+  constructor(callTree: TimelineUtils.AICallTree.AICallTree) {
+    super();
+    this.#callTree = callTree;
+  }
+
+  override getOrigin(): string {
+    // TODO: implement cross-origin checks for the PerformanceAgent.
+    return '';
+  }
+
+  override getItem(): TimelineUtils.AICallTree.AICallTree {
+    return this.#callTree;
+  }
+
+  override getIcon(): HTMLElement {
+    const iconData = {
+      iconName: 'performance',
+      color: 'var(--sys-color-on-surface-subtle)',
+    };
+    const icon = PanelUtils.PanelUtils.createIconElement(iconData, 'Performance');
+    icon.classList.add('icon');
+    return icon;
+  }
+
+  override getTitle(): string {
+    const {event} = this.#callTree.selectedNode;
+    if (!event) {
+      return 'unknown';
+    }
+
+    return TimelineUtils.EntryName.nameForEntry(event);
+  }
+}
+
 /**
  * One agent instance handles one conversation. Create a new agent
  * instance for a new conversation.
@@ -130,12 +169,12 @@ export class DrJonesPerformanceAgent extends AiAgent<TimelineUtils.AICallTree.AI
   readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_DRJONES_PERFORMANCE_AGENT;
   get userTier(): string|undefined {
     const config = Common.Settings.Settings.instance().getHostConfig();
-    return config.devToolsAiAssistancePerformanceAgentDogfood?.userTier;
+    return config.devToolsAiAssistancePerformanceAgent?.userTier;
   }
   get options(): AidaRequestOptions {
     const config = Common.Settings.Settings.instance().getHostConfig();
-    const temperature = config.devToolsAiAssistancePerformanceAgentDogfood?.temperature;
-    const modelId = config.devToolsAiAssistancePerformanceAgentDogfood?.modelId;
+    const temperature = config.devToolsAiAssistancePerformanceAgent?.temperature;
+    const modelId = config.devToolsAiAssistancePerformanceAgent?.modelId;
 
     return {
       temperature,
@@ -144,7 +183,7 @@ export class DrJonesPerformanceAgent extends AiAgent<TimelineUtils.AICallTree.AI
   }
 
   async *
-      handleContextDetails(aiCallTree: TimelineUtils.AICallTree.AICallTree|null):
+      handleContextDetails(aiCallTree: ConversationContext<TimelineUtils.AICallTree.AICallTree>|null):
           AsyncGenerator<ContextResponse, void, void> {
     yield {
       type: ResponseType.CONTEXT,
@@ -152,14 +191,15 @@ export class DrJonesPerformanceAgent extends AiAgent<TimelineUtils.AICallTree.AI
       details: [
         {
           title: 'Selected call tree',
-          text: aiCallTree?.serialize() ?? '',
+          text: aiCallTree?.getItem().serialize() ?? '',
         },
       ],
     };
   }
 
-  override async enhanceQuery(query: string, aiCallTree: TimelineUtils.AICallTree.AICallTree|null): Promise<string> {
-    const treeStr = aiCallTree?.serialize();
+  override async enhanceQuery(query: string, aiCallTree: ConversationContext<TimelineUtils.AICallTree.AICallTree>|null):
+      Promise<string> {
+    const treeStr = aiCallTree?.getItem().serialize();
 
     // Collect the queries from previous messages in this session
     const prevQueries: string[] = [];

package/front_end/panels/freestyler/FreestylerAgent.test.ts

@@ -616,7 +616,7 @@ c`;
         });
 
         promise.resolve(true);
-        await Array.fromAsync(agent.run('test', {selected: element}));
+        await Array.fromAsync(agent.run('test', {selected: new Freestyler.NodeContext(element)}));
 
         sinon.assert.match(execJs.getCall(0).args[1], sinon.match({throwOnSideEffect: true}));
       });
@@ -655,7 +655,7 @@ c`;
 
         });
         promise.resolve(true);
-        await Array.fromAsync(agent.run('test', {selected: element}));
+        await Array.fromAsync(agent.run('test', {selected: new Freestyler.NodeContext(element)}));
 
         assert.strictEqual(execJs.getCalls().length, 2);
         sinon.assert.match(execJs.getCall(1).args[1], sinon.match({throwOnSideEffect: false}));
@@ -694,7 +694,7 @@ c`;
 
         });
         promise.resolve(false);
-        const responses = await Array.fromAsync(agent.run('test', {selected: element}));
+        const responses = await Array.fromAsync(agent.run('test', {selected: new Freestyler.NodeContext(element)}));
 
         const actionStep = responses.find(response => response.type === Freestyler.ResponseType.ACTION)!;
 
@@ -732,7 +732,7 @@ c`;
 
         });
 
-        const result = await Array.fromAsync(agent.run('test', {selected: element}));
+        const result = await Array.fromAsync(agent.run('test', {selected: new Freestyler.NodeContext(element)}));
         const actionSteps = result.filter(step => {
           return step.type === Freestyler.ResponseType.ACTION;
         });
@@ -757,7 +757,7 @@ c`;
         execJs,
       });
 
-      const responses = await Array.fromAsync(agent.run('test', {selected: element}));
+      const responses = await Array.fromAsync(agent.run('test', {selected: new Freestyler.NodeContext(element)}));
       assert.deepStrictEqual(responses, [
         {
           type: Freestyler.ResponseType.USER_QUERY,
@@ -814,7 +814,7 @@ c`;
 
       });
 
-      const responses = await Array.fromAsync(agent.run('test', {selected: element}));
+      const responses = await Array.fromAsync(agent.run('test', {selected: new Freestyler.NodeContext(element)}));
       assert.deepStrictEqual(responses, [
         {
           type: Freestyler.ResponseType.USER_QUERY,
@@ -864,7 +864,7 @@ c`;
 
       });
 
-      const responses = await Array.fromAsync(agent.run('test', {selected: element}));
+      const responses = await Array.fromAsync(agent.run('test', {selected: new Freestyler.NodeContext(element)}));
       assert.deepStrictEqual(responses, [
         {
           type: Freestyler.ResponseType.USER_QUERY,
@@ -913,7 +913,7 @@ c`;
 
       });
 
-      const responses = await Array.fromAsync(agent.run('test', {selected: element}));
+      const responses = await Array.fromAsync(agent.run('test', {selected: new Freestyler.NodeContext(element)}));
       assert.deepStrictEqual(responses, [
         {
           type: Freestyler.ResponseType.USER_QUERY,
@@ -956,7 +956,7 @@ c`;
         aidaClient: mockAidaClient(generateNothing),
         execJs,
       });
-      const responses = await Array.fromAsync(agent.run('test', {selected: element}));
+      const responses = await Array.fromAsync(agent.run('test', {selected: new Freestyler.NodeContext(element)}));
       assert.deepStrictEqual(responses, [
         {
           type: Freestyler.ResponseType.USER_QUERY,
@@ -1019,7 +1019,7 @@ ANSWER: this is the answer`,
         execJs,
 
       });
-      const responses = await Array.fromAsync(agent.run('test', {selected: element}));
+      const responses = await Array.fromAsync(agent.run('test', {selected: new Freestyler.NodeContext(element)}));
       assert.deepStrictEqual(responses, [
         {
           type: Freestyler.ResponseType.USER_QUERY,
@@ -1092,7 +1092,7 @@ ANSWER: this is the answer`,
 
       });
 
-      await Array.fromAsync(agent.run('test', {selected: element}));
+      await Array.fromAsync(agent.run('test', {selected: new Freestyler.NodeContext(element)}));
 
       assert.deepStrictEqual(agent.chatHistoryForTesting, [
         {
@@ -1161,7 +1161,8 @@ ANSWER: this is the answer`,
 
       const controller = new AbortController();
       controller.abort();
-      await Array.fromAsync(agent.run('test', {selected: element, signal: controller.signal}));
+      await Array.fromAsync(
+          agent.run('test', {selected: new Freestyler.NodeContext(element), signal: controller.signal}));
 
       assert.deepStrictEqual(agent.chatHistoryForTesting, []);
     });
@@ -1209,7 +1210,7 @@ ANSWER: this is the answer`,
           createExtensionScope,
           execJs,
         });
-        const responses = await Array.fromAsync(agent.run('test', {selected: element}));
+        const responses = await Array.fromAsync(agent.run('test', {selected: new Freestyler.NodeContext(element)}));
         const actionStep = responses.find(response => response.type === Freestyler.ResponseType.ACTION)!;
         assert.strictEqual(actionStep.output, 'Error: JavaScript execution is currently disabled.');
         assert.strictEqual(execJs.getCalls().length, 0);
@@ -1231,7 +1232,7 @@ ANSWER: this is the answer`,
           createExtensionScope,
           execJs,
         });
-        const responses = await Array.fromAsync(agent.run('test', {selected: element}));
+        const responses = await Array.fromAsync(agent.run('test', {selected: new Freestyler.NodeContext(element)}));
         const actionStep = responses.find(response => response.type === Freestyler.ResponseType.ACTION)!;
         assert.strictEqual(
             actionStep.output, 'Error: JavaScript execution that modifies the page is currently disabled.');

package/front_end/panels/freestyler/FreestylerAgent.ts

@@ -9,6 +9,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as LitHtml from '../../ui/lit-html/lit-html.js';
 
 import {
   type ActionResponse,
@@ -16,6 +17,7 @@ import {
   AiAgent,
   type AidaRequestOptions,
   type ContextResponse,
+  ConversationContext,
   debugLog,
   isDebugMode,
   type ParsedResponse,
@@ -193,6 +195,7 @@ async function executeJsCode(
 }
 
 const MAX_OBSERVATION_BYTE_LENGTH = 25_000;
+const OBSERVATION_TIMEOUT = 5_000;
 
 type CreateExtensionScopeFunction = (changes: ChangeManager) => {
   install(): Promise<void>, uninstall(): Promise<void>,
@@ -207,6 +210,38 @@ type AgentOptions = {
   execJs?: typeof executeJsCode,
 };
 
+export class NodeContext extends ConversationContext<SDK.DOMModel.DOMNode> {
+  #node: SDK.DOMModel.DOMNode;
+
+  constructor(node: SDK.DOMModel.DOMNode) {
+    super();
+    this.#node = node;
+  }
+
+  getOrigin(): string {
+    const ownerDocument = this.#node.ownerDocument;
+    if (!ownerDocument) {
+      // The node is detached from a document.
+      return 'detached';
+    }
+    return new URL(ownerDocument.documentURL).origin;
+  }
+
+  getItem(): SDK.DOMModel.DOMNode {
+    return this.#node;
+  }
+
+  override getIcon(): HTMLElement {
+    return document.createElement('span');
+  }
+
+  override getTitle(): string|ReturnType<typeof LitHtml.Directives.until> {
+    return LitHtml.Directives.until(
+        Common.Linkifier.Linkifier.linkify(this.#node),
+    );
+  }
+}
+
 /**
  * One agent instance handles one conversation. Create a new agent
  * instance for a new conversation.
@@ -430,10 +465,16 @@ export class FreestylerAgent extends AiAgent<SDK.DOMModel.DOMNode> {
           canceled: true,
         };
       }
-      const result = await this.#execJs(
-          functionDeclaration,
-          {throwOnSideEffect},
-      );
+      const result = await Promise.race([
+        this.#execJs(
+            functionDeclaration,
+            {throwOnSideEffect},
+            ),
+        new Promise<never>((_, reject) => {
+          setTimeout(
+              () => reject(new Error('Script execution exceeded the maximum allowed time.')), OBSERVATION_TIMEOUT);
+        }),
+      ]);
       const byteCount = Platform.StringUtilities.countWtf8Bytes(result);
       Host.userMetrics.freestylerEvalResponseSize(byteCount);
       if (byteCount > MAX_OBSERVATION_BYTE_LENGTH) {
@@ -606,7 +647,8 @@ export class FreestylerAgent extends AiAgent<SDK.DOMModel.DOMNode> {
   }
 
   override async *
-      handleContextDetails(selectedElement: SDK.DOMModel.DOMNode|null): AsyncGenerator<ContextResponse, void, void> {
+      handleContextDetails(selectedElement: ConversationContext<SDK.DOMModel.DOMNode>|null):
+          AsyncGenerator<ContextResponse, void, void> {
     if (!selectedElement) {
       return;
     }
@@ -615,14 +657,16 @@ export class FreestylerAgent extends AiAgent<SDK.DOMModel.DOMNode> {
       title: lockedString(UIStringsNotTranslate.analyzingThePrompt),
       details: [{
         title: lockedString(UIStringsNotTranslate.dataUsed),
-        text: await FreestylerAgent.describeElement(selectedElement),
+        text: await FreestylerAgent.describeElement(selectedElement.getItem()),
       }],
     };
   }
 
-  override async enhanceQuery(query: string, selectedElement: SDK.DOMModel.DOMNode|null): Promise<string> {
+  override async enhanceQuery(query: string, selectedElement: ConversationContext<SDK.DOMModel.DOMNode>|null):
+      Promise<string> {
     const elementEnchantmentQuery = selectedElement ?
-        `# Inspected element\n\n${await FreestylerAgent.describeElement(selectedElement)}\n\n# User request\n\n` :
+        `# Inspected element\n\n${
+            await FreestylerAgent.describeElement(selectedElement.getItem())}\n\n# User request\n\n` :
         '';
     return `${elementEnchantmentQuery}QUERY: ${query}`;
   }