AI: improve document latency insight & reduce verboseness

Fixed: 401232558
Bug: 404834406
Change-Id: Ia49bef486d6486768693f84e3491ac889199664f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6373424
Auto-Submit: Jack Franklin <[email protected]>
Commit-Queue: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Jack Franklin <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>

Author: jackfranklin

front_end/models/ai_assistance/agents/PerformanceInsightsAgent.ts

@@ -42,7 +42,7 @@ const lockedString = i18n.i18n.lockedString;
 /* clang-format off */
 const preamble = `You are a performance expert deeply integrated within Chrome DevTools. You specialize in analyzing web application behaviour captured by Chrome DevTools Performance Panel.
 
-You will be provided with an Insight from the Chrome Performance Panel. This Insight will contain information about part of the performance of the web site. It is your task to analyze the data available to you and suggest solutions to improve the performance of the page.
+You will be provided with an Insight from the Chrome Performance Panel. This Insight will contain information about the performance of the web site. It is your task to analyze the data available to you and suggest solutions to improve the performance of the page.
 
 You will be told the following information about the Insight:
 - The 'Insight name' which is the title of the Insight
@@ -53,12 +53,17 @@ You will also be provided with external resources. Use the contents of these res
 
 ## Step-by-step instructions
 
-- Think about what the user wants.
 - Call any of the available functions to help you gather more information to inform your suggestions.
 - Ensure that you call all relevant functions to receive full information about relevant network requests.
-- Make suggestions that you are confident will improve the performance of the page.
-
-## General considerations
+- Your response should be concise and to the point. Avoid lengthy explanations or unnecessary details.
+- Prefer lists of bullet points over long paragraphs of text.
+- Your response should be formatted via markdown. If you want to add headings to your response, don’t just mark the text as bold, use markdown’s heading syntax instead.
+- Your answer should contain the following sections:
+  1) Understanding the insight: explain the problems that the Insight is highlighting to the user and why they are important.
+  2) Suggested fix: A suggestion describing how the user can fix the problem. Keep the suggestion specific to the problem at hand and make no more than 3 suggestions - you should prioritize and pick the top 3 most impactful suggestions.
+- Your response should immediately start with the "Understanding the insight" section.
+
+## Critical requirements
 
 - *CRITICAL* never make the same function call twice.
 - *CRITICAL* make sure you are thorough and call the functions you have access to to give yourself the most information possible to make accurate recommendations.

front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.test.ts

@@ -167,6 +167,9 @@ The result of the checks for this insight are:
       const formatter = new PerformanceInsightFormatter(new ActiveInsight(insight, parsedTrace));
       const output = formatter.formatInsight();
 
+      const request = insight.data?.documentRequest;
+      assert.isOk(request);
+
       const expected = `*IMPORTANT*: all time units given to you are in milliseconds.
 ## Insight title: Document request latency
 
@@ -183,6 +186,11 @@ This insight checks that the first request is responded to promptly. We use the
 The Largest Contentful Paint (LCP) time for this navigation was 3,604.15 ms.
 The LCP is text based and was not fetched from the network.
 
+${TraceEventFormatter.networkRequest(request, parsedTrace, {
+        verbose: true,
+        customTitle: 'Document network request'
+      })}
+
 The result of the checks for this insight are:
 - The request was not redirected: FAILED
 - Server responded quickly: FAILED

front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.ts

@@ -178,7 +178,10 @@ ${requestSummary.join('\n\n')}`;
       if (!this.#insight.data) {
         return '';
       }
-      const {checklist} = this.#insight.data;
+      const {checklist, documentRequest} = this.#insight.data;
+      if (!documentRequest) {
+        return '';
+      }
       const checklistBulletPoints: Array<{name: string, passed: boolean}> = [];
       checklistBulletPoints.push({
         name: 'The request was not redirected',
@@ -192,8 +195,14 @@ ${requestSummary.join('\n\n')}`;
         name: 'Compression was applied',
         passed: checklist.usesCompression.value,
       });
+
       return `${this.#lcpMetricSharedContext()}
 
+${TraceEventFormatter.networkRequest(documentRequest, this.#parsedTrace, {
+        verbose: true,
+        customTitle: 'Document network request'
+      })}
+
 The result of the checks for this insight are:
 ${checklistBulletPoints.map(point => `- ${point.name}: ${point.passed ? 'PASSED' : 'FAILED'}`).join('\n')}`;
     }
@@ -289,6 +298,7 @@ It is important that all of these checks pass to minimize the delay between the
 
 export interface NetworkRequestFormatOptions {
   verbose: boolean;
+  customTitle?: string;
 }
 
 export class TraceEventFormatter {
@@ -306,6 +316,8 @@ export class TraceEventFormatter {
     const {url, statusCode, initialPriority, priority, fromServiceWorker, mimeType, responseHeaders, syntheticData} =
         request.args.data;
 
+    const titlePrefix = `## ${options.customTitle ?? 'Network request'}`;
+
     // Note: unlike other agents, we do have the ability to include
     // cross-origins, hence why we do not sanitize the URLs here.
     const navigationForEvent = Trace.Helpers.Trace.getNavigationForTraceEvent(
@@ -349,13 +361,13 @@ export class TraceEventFormatter {
     });
 
     if (!options.verbose) {
-      return `## Network request: ${url}
+      return `${titlePrefix}: ${url}
 - Start time: ${formatMicro(startTimesForLifecycle.start)}
 - Duration: ${formatMicro(request.dur)}
 - MIME type: ${mimeType}${renderBlocking ? '\n- This request was render blocking' : ''}`;
     }
 
-    return `## Network request: ${url}
+    return `${titlePrefix}: ${url}
 Timings:
 - Start time: ${formatMicro(startTimesForLifecycle.start)}
 - Queued at: ${formatMicro(startTimesForLifecycle.queueing)}