chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/panels/freestyler/DrJonesNetworkAgent.ts

@@ -7,18 +7,16 @@ import * as Host from '../../core/host/host.js';
 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 {
+  AgentType,
   AiAgent,
   type AidaRequestOptions,
   type ContextDetail,
-  debugLog,
-  ErrorType,
-  isDebugMode,
-  type ResponseData,
+  type ContextResponse,
+  type ParsedResponse,
   ResponseType,
-  type ThoughtResponse,
-  type TitleResponse,
 } from './AiAgent.js';
 
 /* clang-format off */
@@ -62,11 +60,7 @@ const UIStringsNotTranslate = {
   /**
    *@description Title for thinking step of DrJones Network agent.
    */
-  inspectingNetworkData: 'Inspecting network data',
-  /**
-   *@description Thought text for thinking step of DrJones Network agent.
-   */
-  dataUsedToGenerateThisResponse: 'Data used to generate this response',
+  analyzingNetworkData: 'Analyzing network data',
   /**
    *@description Heading text for the block that shows the network request details.
    */
@@ -98,7 +92,7 @@ const UIStringsNotTranslate = {
   /**
    *@description Title text for request initiator chain.
    */
-  requestInitiatorChain: 'Request Initiator Chain',
+  requestInitiatorChain: 'Request initiator chain',
 };
 
 const lockedString = i18n.i18n.lockedString;
@@ -107,96 +101,53 @@ const lockedString = i18n.i18n.lockedString;
  * One agent instance handles one conversation. Create a new agent
  * instance for a new conversation.
  */
-export class DrJonesNetworkAgent extends AiAgent {
+export class DrJonesNetworkAgent extends AiAgent<SDK.NetworkRequest.NetworkRequest> {
+  override type = AgentType.DRJONES_NETWORK_REQUEST;
   readonly preamble = preamble;
   readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_DRJONES_NETWORK_AGENT;
-  // TODO(b/369822364): use a feature param instead.
-  readonly userTier = 'BETA';
+  get userTier(): string|undefined {
+    const config = Common.Settings.Settings.instance().getHostConfig();
+    return config.devToolsAiAssistanceNetworkAgent?.userTier ?? config.devToolsExplainThisResourceDogfood?.userTier;
+  }
   get options(): AidaRequestOptions {
     const config = Common.Settings.Settings.instance().getHostConfig();
-    const temperature = AiAgent.validTemperature(config.devToolsExplainThisResourceDogfood?.temperature);
-    const modelId = config.devToolsExplainThisResourceDogfood?.modelId;
+    const temperature =
+        config.devToolsAiAssistanceNetworkAgent?.temperature ?? config.devToolsExplainThisResourceDogfood?.temperature;
+    const modelId =
+        config.devToolsAiAssistanceNetworkAgent?.modelId ?? config.devToolsExplainThisResourceDogfood?.modelId;
 
     return {
       temperature,
-      model_id: modelId,
+      modelId,
     };
   }
 
-  *
+  async *
       handleContextDetails(selectedNetworkRequest: SDK.NetworkRequest.NetworkRequest|null):
-          Generator<ThoughtResponse|TitleResponse, void, void> {
+          AsyncGenerator<ContextResponse, void, void> {
     if (!selectedNetworkRequest) {
       return;
     }
 
     yield {
-      type: ResponseType.TITLE,
-      title: lockedString(UIStringsNotTranslate.inspectingNetworkData),
-    };
-    yield {
-      type: ResponseType.THOUGHT,
-      thought: lockedString(UIStringsNotTranslate.dataUsedToGenerateThisResponse),
-      contextDetails: createContextDetailsForDrJonesNetworkAgent(selectedNetworkRequest),
+      type: ResponseType.CONTEXT,
+      title: lockedString(UIStringsNotTranslate.analyzingNetworkData),
+      details: createContextDetailsForDrJonesNetworkAgent(selectedNetworkRequest),
     };
   }
 
-  async enhanceQuery(query: string, selectedNetworkRequest: SDK.NetworkRequest.NetworkRequest|null): Promise<string> {
+  override async enhanceQuery(query: string, selectedNetworkRequest: SDK.NetworkRequest.NetworkRequest|null):
+      Promise<string> {
     const networkEnchantmentQuery = selectedNetworkRequest ?
         `# Selected network request \n${formatNetworkRequest(selectedNetworkRequest)}\n\n# User request\n\n` :
         '';
     return `${networkEnchantmentQuery}${query}`;
   }
 
-  #runId = 0;
-  async * run(query: string, options: {
-    signal?: AbortSignal, selectedNetworkRequest: SDK.NetworkRequest.NetworkRequest|null,
-  }): AsyncGenerator<ResponseData, void, void> {
-    yield* this.handleContextDetails(options.selectedNetworkRequest);
-
-    query = await this.enhanceQuery(query, options.selectedNetworkRequest);
-    const currentRunId = ++this.#runId;
-
-    let response: string;
-    let rpcId: number|undefined;
-    try {
-      const fetchResult = await this.aidaFetch(query, {signal: options.signal});
-      response = fetchResult.response;
-      rpcId = fetchResult.rpcId;
-    } catch (err) {
-      debugLog('Error calling the AIDA API', err);
-      if (err instanceof Host.AidaClient.AidaAbortError) {
-        this.removeHistoryRun(currentRunId);
-        yield {
-          type: ResponseType.ERROR,
-          error: ErrorType.ABORT,
-          rpcId,
-        };
-        return;
-      }
-
-      yield {
-        type: ResponseType.ERROR,
-        error: ErrorType.UNKNOWN,
-        rpcId,
-      };
-      return;
-    }
-
-    this.addToHistory({
-      id: currentRunId,
-      query,
-      output: response,
-    });
-
-    yield {
-      type: ResponseType.ANSWER,
-      text: response,
-      rpcId,
+  override parseResponse(response: string): ParsedResponse {
+    return {
+      answer: response,
     };
-    if (isDebugMode()) {
-      window.dispatchEvent(new CustomEvent('freestylerdone'));
-    }
   }
 }
 
@@ -212,79 +163,230 @@ function formatLines(title: string, lines: string[], maxLength: number): string
   return result && title ? title + '\n' + result : result;
 }
 
+// Header names that could be included in the prompt, lowercase.
+const allowedHeaders = new Set([
+  'a-im',
+  'accept-ch',
+  'accept-charset',
+  'accept-datetime',
+  'accept-encoding',
+  'accept-language',
+  'accept-patch',
+  'accept-ranges',
+  'accept',
+  'access-control-allow-credentials',
+  'access-control-allow-headers',
+  'access-control-allow-methods',
+  'access-control-allow-origin',
+  'access-control-expose-headers',
+  'access-control-max-age',
+  'access-control-request-headers',
+  'access-control-request-method',
+  'age',
+  'allow',
+  'alt-svc',
+  'cache-control',
+  'connection',
+  'content-disposition',
+  'content-encoding',
+  'content-language',
+  'content-length',
+  'content-location',
+  'content-md5',
+  'content-range',
+  'content-security-policy',
+  'content-type',
+  'correlation-id',
+  'date',
+  'delta-base',
+  'dnt',
+  'etag',
+  'expect-ct',
+  'expect',
+  'expires',
+  'forwarded',
+  'front-end-https',
+  'host',
+  'http2-settings',
+  'if-match',
+  'if-modified-since',
+  'if-none-match',
+  'if-range',
+  'if-unmodified-source',
+  'im',
+  'last-modified',
+  'link',
+  'location',
+  'max-forwards',
+  'nel',
+  'origin',
+  'permissions-policy',
+  'pragma',
+  'preference-applied',
+  'proxy-connection',
+  'public-key-pins',
+  'range',
+  'referer',
+  'refresh',
+  'report-to',
+  'retry-after',
+  'save-data',
+  'sec-gpc',
+  'server',
+  'status',
+  'strict-transport-security',
+  'te',
+  'timing-allow-origin',
+  'tk',
+  'trailer',
+  'transfer-encoding',
+  'upgrade-insecure-requests',
+  'upgrade',
+  'user-agent',
+  'vary',
+  'via',
+  'warning',
+  'www-authenticate',
+  'x-att-deviceid',
+  'x-content-duration',
+  'x-content-security-policy',
+  'x-content-type-options',
+  'x-correlation-id',
+  'x-forwarded-for',
+  'x-forwarded-host',
+  'x-forwarded-proto',
+  'x-frame-options',
+  'x-http-method-override',
+  'x-powered-by',
+  'x-redirected-by',
+  'x-request-id',
+  'x-requested-with',
+  'x-ua-compatible',
+  'x-wap-profile',
+  'x-webkit-csp',
+  'x-xss-protection',
+]);
+
 export function allowHeader(header: SDK.NetworkRequest.NameValue): boolean {
-  const normalizedName = header.name.toLowerCase().trim();
-  // Skip custom headers.
-  if (normalizedName.startsWith('x-')) {
-    return false;
-  }
-  // Skip cookies as they might contain auth.
-  if (normalizedName === 'cookie' || normalizedName === 'set-cookie') {
-    return false;
-  }
-  if (normalizedName === 'authorization') {
-    return false;
-  }
-  return true;
+  return allowedHeaders.has(header.name.toLowerCase().trim());
 }
 
 export function formatHeaders(title: string, headers: SDK.NetworkRequest.NameValue[]): string {
   return formatLines(
-      title, headers.filter(allowHeader).map(header => header.name + ': ' + header.value + '\n'), MAX_HEADERS_SIZE);
+      title,
+      headers
+          .map(header => {
+            if (allowHeader(header)) {
+              return header;
+            }
+            return {
+              name: header.name,
+              value: '<redacted>',
+            };
+          })
+          .map(header => header.name + ': ' + header.value + '\n'),
+      MAX_HEADERS_SIZE);
 }
 
 export function formatNetworkRequestTiming(request: SDK.NetworkRequest.NetworkRequest): string {
-  const timing = request.timing;
-
-  return `Request start time: ${request.startTime}
-Request end time: ${request.endTime}
-Receiving response headers start time: ${timing?.receiveHeadersStart}
-Receiving response headers end time: ${timing?.receiveHeadersEnd}
-Proxy negotiation start time: ${timing?.proxyStart}
-Proxy negotiation end time: ${timing?.proxyEnd}
-DNS lookup start time: ${timing?.dnsStart}
-DNS lookup end time: ${timing?.dnsEnd}
-TCP start time: ${timing?.connectStart}
-TCP end time: ${timing?.connectEnd}
-SSL start time: ${timing?.sslStart}
-SSL end time: ${timing?.sslEnd}
-Sending start: ${timing?.sendStart}
-Sending end: ${timing?.sendEnd}
-`;
+  const calculator = Network.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator();
+  const results =
+      Network.RequestTimingView.RequestTimingView.calculateRequestTimeRanges(request, calculator.minimumBoundary());
+
+  function getDuration(name: string): string|undefined {
+    const result = results.find(r => r.name === name);
+    if (!result) {
+      return;
+    }
+    return i18n.TimeUtilities.secondsToString(result.end - result.start, true);
+  }
+
+  const labels = [
+    {
+      label: 'Queued at (timestamp)',
+      value: calculator.formatValue(request.issueTime(), 2),
+    },
+    {
+      label: 'Started at (timestamp)',
+      value: calculator.formatValue(request.startTime, 2),
+    },
+    {
+      label: 'Queueing (duration)',
+      value: getDuration('queueing'),
+    },
+    {
+      label: 'Connection start (stalled) (duration)',
+      value: getDuration('blocking'),
+    },
+    {
+      label: 'Request sent (duration)',
+      value: getDuration('sending'),
+    },
+    {
+      label: 'Waiting for server response (duration)',
+      value: getDuration('waiting'),
+    },
+    {
+      label: 'Content download (duration)',
+      value: getDuration('receiving'),
+    },
+    {
+      label: 'Duration (duration)',
+      value: getDuration('total'),
+    },
+  ];
+
+  return labels.filter(label => Boolean(label.value)).map(label => `${label.label}: ${label.value}`).join('\n');
+}
+
+export function formatInitiatorUrl(initiatorUrl: string, allowedOrigin: string): string {
+  const initiatorOrigin = new URL(initiatorUrl).origin;
+  if (initiatorOrigin === allowedOrigin) {
+    return initiatorUrl;
+  }
+  return '<redacted cross-origin initiator URL>';
 }
 
 function formatRequestInitiated(
-    request: SDK.NetworkRequest.NetworkRequest, initiatorChain: string, lineStart: string): string {
+    request: SDK.NetworkRequest.NetworkRequest, initiatorChain: string, lineStart: string,
+    allowedOrigin: string): string {
   const initiated = Logs.NetworkLog.NetworkLog.instance().initiatorGraphForRequest(request).initiated;
   initiated.forEach((v, initiatedRequest) => {
     if (request === v) {
-      initiatorChain = initiatorChain + lineStart + initiatedRequest.url() + '\n';
-      initiatorChain = formatRequestInitiated(initiatedRequest, initiatorChain, '\t' + lineStart);
+      initiatorChain = initiatorChain + lineStart + formatInitiatorUrl(initiatedRequest.url(), allowedOrigin) + '\n';
+      initiatorChain = formatRequestInitiated(initiatedRequest, initiatorChain, '\t' + lineStart, allowedOrigin);
     }
   });
   return initiatorChain;
 }
 
+/**
+ * Note: nothing here should include information from origins other than
+ * the request's origin.
+ */
 function formatRequestInitiatorChain(request: SDK.NetworkRequest.NetworkRequest): string {
+  const allowedOrigin = new URL(request.url()).origin;
   let initiatorChain = '';
   let lineStart = '- URL: ';
   const initiators = Logs.NetworkLog.NetworkLog.instance().initiatorGraphForRequest(request).initiators;
 
   for (const initator of Array.from(initiators).reverse()) {
-    initiatorChain = initiatorChain + lineStart + initator.url() + '\n';
+    initiatorChain = initiatorChain + lineStart + formatInitiatorUrl(initator.url(), allowedOrigin) + '\n';
     lineStart = '\t' + lineStart;
     if (initator === request) {
-      initiatorChain = formatRequestInitiated(initator, initiatorChain, lineStart);
+      initiatorChain = formatRequestInitiated(initator, initiatorChain, lineStart, allowedOrigin);
       break;
     }
   }
 
-  return initiatorChain;
+  return initiatorChain.trim();
 }
 
+/**
+ * Note: nothing here should include information from origins other than
+ * the request's origin.
+ */
 export function formatNetworkRequest(request: SDK.NetworkRequest.NetworkRequest): string {
-  // TODO: anything else that might be relavant?
-  // TODO: handle missing headers
   return `Request: ${request.url()}
 
 ${formatHeaders('Request headers:', request.requestHeaders())}
@@ -293,9 +395,9 @@ ${formatHeaders('Response headers:', request.responseHeaders)}
 
 Response status: ${request.statusCode} ${request.statusText}
 
-Request Timing:\n${formatNetworkRequestTiming(request)}
+Request timing:\n${formatNetworkRequestTiming(request)}
 
-Request Initiator Chain:\n${formatRequestInitiatorChain(request)}`;
+Request initiator chain:\n${formatRequestInitiatorChain(request)}`;
 }
 
 function createContextDetailsForDrJonesNetworkAgent(request: SDK.NetworkRequest.NetworkRequest):

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

@@ -2,12 +2,10 @@
 // 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 Trace from '../../models/trace/trace.js';
-import {
-  describeWithEnvironment,
-  getGetHostConfigStub,
-} from '../../testing/EnvironmentHelpers.js';
+import type * as Host from '../../core/host/host.js';
+import {describeWithEnvironment, getGetHostConfigStub} from '../../testing/EnvironmentHelpers.js';
+import {TraceLoader} from '../../testing/TraceLoader.js';
+import * as TimelineUtils from '../timeline/utils/utils.js';
 
 import {DrJonesPerformanceAgent, ResponseType} from './freestyler.js';
 
@@ -65,20 +63,16 @@ describeWithEnvironment('DrJonesPerformanceAgent', () => {
         serverSideLoggingEnabled: true,
       });
       sinon.stub(agent, 'preamble').value('preamble');
-      agent.chatHistoryForTesting = new Map([[
+      agent.chatNewHistoryForTesting = new Map([[
         0,
         [
           {
-            text: 'first',
-            entity: Host.AidaClient.Entity.UNKNOWN,
+            type: ResponseType.QUERYING,
+            query: 'question',
           },
           {
-            text: 'second',
-            entity: Host.AidaClient.Entity.SYSTEM,
-          },
-          {
-            text: 'third',
-            entity: Host.AidaClient.Entity.USER,
+            type: ResponseType.ANSWER,
+            text: 'answer',
           },
         ],
       ]]);
@@ -92,16 +86,12 @@ describeWithEnvironment('DrJonesPerformanceAgent', () => {
             preamble: 'preamble',
             chat_history: [
               {
-                entity: 0,
-                text: 'first',
+                entity: 1,
+                text: 'question',
               },
               {
                 entity: 2,
-                text: 'second',
-              },
-              {
-                entity: 1,
-                text: 'third',
+                text: 'answer',
               },
             ],
             metadata: {
@@ -113,33 +103,22 @@ describeWithEnvironment('DrJonesPerformanceAgent', () => {
               model_id: 'test model',
               temperature: undefined,
             },
-            client_feature: 2,
+            client_feature: 8,
             functionality_type: 1,
           },
       );
     });
   });
-  describe('run', () => {
-    const rootNodeEntry =
-        new Trace.Helpers.TreeHelpers.TraceEntryNodeForAI('RunTask', Trace.Types.Timing.MilliSeconds(0));
-    const node1 = new Trace.Helpers.TreeHelpers.TraceEntryNodeForAI('ProfileCall', Trace.Types.Timing.MilliSeconds(1));
-    const node2 = new Trace.Helpers.TreeHelpers.TraceEntryNodeForAI('ProfileCall', Trace.Types.Timing.MilliSeconds(2));
-    const node3 = new Trace.Helpers.TreeHelpers.TraceEntryNodeForAI('ProfileCall', Trace.Types.Timing.MilliSeconds(10));
-    const node4 = new Trace.Helpers.TreeHelpers.TraceEntryNodeForAI('ProfileCall', Trace.Types.Timing.MilliSeconds(11));
-    const node5 = new Trace.Helpers.TreeHelpers.TraceEntryNodeForAI('ProfileCall', Trace.Types.Timing.MilliSeconds(15));
+  describe('run', function() {
+    it('generates an answer', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-outermost-frames.json.gz');
+      // A basic Layout.
+      const layoutEvt = parsedTrace.Renderer.allTraceEntries.find(event => event.ts === 465457096322);
+      assert.exists(layoutEvt);
+      const aiCallTree =
+          TimelineUtils.AICallTree.AICallTree.from(layoutEvt, parsedTrace.Renderer.allTraceEntries, parsedTrace);
+      assert.exists(aiCallTree);
 
-    beforeEach(() => {
-      rootNodeEntry.children = [node1, node3];
-      node1.function = 'foo';
-      node1.children = [node2];
-      node2.function = 'foofoo';
-      node3.function = 'foo2';
-      node3.children = [node4, node5];
-      node4.function = 'foo2foo';
-      node5.function = 'foo2foo2';
-    });
-
-    it('generates an answer', async () => {
       async function* generateAnswer() {
         yield {
           explanation: 'This is the answer',
@@ -154,28 +133,44 @@ describeWithEnvironment('DrJonesPerformanceAgent', () => {
         aidaClient: mockAidaClient(generateAnswer),
       });
 
-      // Select node3
-      node3.selected = true;
-      const responses = await Array.fromAsync(agent.run('test', {selectedStackTrace: rootNodeEntry}));
+      const responses = await Array.fromAsync(agent.run('test', {selected: aiCallTree}));
+      const expectedData = '\n\n' +
+          `
+
+
+# Call tree:
+
+Node: 1 – Task
+dur: 3
+Children:
+  * 2 – Layout
+
+Node: 2 – Layout
+Selected: true
+dur: 3
+self: 3
+`.trim();
 
       assert.deepStrictEqual(responses, [
         {
-          type: ResponseType.TITLE,
-          title: 'Analyzing stack trace',
+          type: ResponseType.USER_QUERY,
+          query: 'test',
         },
         {
-          type: ResponseType.THOUGHT,
-          thought: 'Data used to generate this response',
-          contextDetails: [
-            {
-              title: 'Selected stack trace',
-              text: JSON.stringify(rootNodeEntry),
-            },
+          type: ResponseType.CONTEXT,
+          title: 'Analyzing call tree',
+          details: [
+            {title: 'Selected call tree', text: expectedData},
           ],
         },
+        {
+          type: ResponseType.QUERYING,
+          query: `${expectedData}\n\n# User request\n\ntest`,
+        },
         {
           type: ResponseType.ANSWER,
           text: 'This is the answer',
+          suggestions: undefined,
           rpcId: 123,
         },
       ]);
@@ -183,7 +178,7 @@ describeWithEnvironment('DrJonesPerformanceAgent', () => {
       assert.deepStrictEqual(agent.chatHistoryForTesting, [
         {
           entity: 1,
-          text: `# Selected stack trace\n${JSON.stringify(rootNodeEntry)}\n\n# User request\n\ntest`,
+          text: `${aiCallTree.serialize()}\n\n# User request\n\ntest`,
         },
         {
           entity: 2,
@@ -192,4 +187,55 @@ describeWithEnvironment('DrJonesPerformanceAgent', () => {
       ]);
     });
   });
+
+  describe('enhanceQuery', () => {
+    it('does not send the serialized calltree again if it is a followup chat about the same calltree', async () => {
+      const agent = new DrJonesPerformanceAgent({
+        aidaClient: {} as Host.AidaClient.AidaClient,
+      });
+
+      const mockAiCallTree = {
+        serialize: () => 'Mock call tree',
+      } as unknown as TimelineUtils.AICallTree.AICallTree;
+
+      const enhancedQuery1 = await agent.enhanceQuery('What is this?', mockAiCallTree);
+      assert.strictEqual(enhancedQuery1, 'Mock call tree\n\n# User request\n\nWhat is this?');
+
+      // Create history state of the above query
+      agent.chatNewHistoryForTesting = new Map([[
+        0,
+        [
+          {
+            type: ResponseType.CONTEXT,
+            title: 'Analyzing call tree',
+            details: [
+              {
+                title: 'Selected call tree',
+                text: mockAiCallTree.serialize(),
+              },
+            ],
+          },
+          {
+            type: ResponseType.QUERYING,
+            query: enhancedQuery1,
+          },
+          {
+            type: ResponseType.ANSWER,
+            text: 'test answer',
+          },
+        ],
+      ]]);
+
+      const query2 = 'But what about this follow-up question?';
+      const enhancedQuery2 = await agent.enhanceQuery(query2, 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);
+      assert.strictEqual(enhancedQuery3, query3);
+      assert.isFalse(enhancedQuery3.includes(mockAiCallTree.serialize()));
+    });
+  });
 });