chrome-devtools-frontend 1.0.1362775 → 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 */
@@ -59,11 +57,10 @@ const MAX_HEADERS_SIZE = 1000;
 * Strings that don't need to be translated at this time.
 */
 const UIStringsNotTranslate = {
-  inspectingNetworkData: 'Inspecting network data',
   /**
-   *@description Thought text for thinking step of DrJones Network agent.
+   *@description Title 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.
    */
@@ -95,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;
@@ -104,92 +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_FREESTYLER;
-  // TODO(b/369822364): use a feature param instead.
-  readonly userTier = 'BETA';
+  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;
+  }
   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> {
-    yield {
-      type: ResponseType.TITLE,
-      title: lockedString(UIStringsNotTranslate.inspectingNetworkData),
-    };
+          AsyncGenerator<ContextResponse, void, void> {
+    if (!selectedNetworkRequest) {
+      return;
+    }
+
     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'));
-    }
   }
 }
 
@@ -205,81 +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 {
-  const formatHeaders = (title: string, headers: SDK.NetworkRequest.NameValue[]): string => formatLines(
-      title, headers.filter(allowHeader).map(header => header.name + ': ' + header.value + '\n'), MAX_HEADERS_SIZE);
-  // TODO: anything else that might be relavant?
-  // TODO: handle missing headers
   return `Request: ${request.url()}
 
 ${formatHeaders('Request headers:', request.requestHeaders())}
@@ -288,37 +395,35 @@ ${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|null): ContextDetail[] {
-  if (request) {
-    const requestContextDetail: ContextDetail = {
-      title: lockedString(UIStringsNotTranslate.request),
-      text: lockedString(UIStringsNotTranslate.requestUrl) + ': ' + request.url() + '\n\n' +
-          formatHeaders(lockedString(UIStringsNotTranslate.requestHeaders), request.requestHeaders()),
-    };
-    const responseContextDetail: ContextDetail = {
-      title: lockedString(UIStringsNotTranslate.response),
-      text: lockedString(UIStringsNotTranslate.responseStatus) + ': ' + request.statusCode + ' ' + request.statusText +
-          '\n\n' + formatHeaders(lockedString(UIStringsNotTranslate.responseHeaders), request.responseHeaders),
-    };
-    const timingContextDetail: ContextDetail = {
-      title: lockedString(UIStringsNotTranslate.timing),
-      text: formatNetworkRequestTiming(request),
-    };
-    const initiatorChainContextDetail: ContextDetail = {
-      title: lockedString(UIStringsNotTranslate.requestInitiatorChain),
-      text: formatRequestInitiatorChain(request),
-    };
-    return [
-      requestContextDetail,
-      responseContextDetail,
-      timingContextDetail,
-      initiatorChainContextDetail,
-    ];
-  }
-  return [];
+function createContextDetailsForDrJonesNetworkAgent(request: SDK.NetworkRequest.NetworkRequest):
+    [ContextDetail, ...ContextDetail[]] {
+  const requestContextDetail: ContextDetail = {
+    title: lockedString(UIStringsNotTranslate.request),
+    text: lockedString(UIStringsNotTranslate.requestUrl) + ': ' + request.url() + '\n\n' +
+        formatHeaders(lockedString(UIStringsNotTranslate.requestHeaders), request.requestHeaders()),
+  };
+  const responseContextDetail: ContextDetail = {
+    title: lockedString(UIStringsNotTranslate.response),
+    text: lockedString(UIStringsNotTranslate.responseStatus) + ': ' + request.statusCode + ' ' + request.statusText +
+        '\n\n' + formatHeaders(lockedString(UIStringsNotTranslate.responseHeaders), request.responseHeaders),
+  };
+  const timingContextDetail: ContextDetail = {
+    title: lockedString(UIStringsNotTranslate.timing),
+    text: formatNetworkRequestTiming(request),
+  };
+  const initiatorChainContextDetail: ContextDetail = {
+    title: lockedString(UIStringsNotTranslate.requestInitiatorChain),
+    text: formatRequestInitiatorChain(request),
+  };
+  return [
+    requestContextDetail,
+    responseContextDetail,
+    timingContextDetail,
+    initiatorChainContextDetail,
+  ];
 }