AI: Improve ConversationSummaryAgent preamble and output

Update the preamble to be stricter about process narration, encourage
grouping findings by element, and require identification of side-effects
and technical constraints. This makes the generated summaries more
impactful, succinct, and useful for IDE agents.

Bug: 503335484,503336971
Change-Id: I6c864a02c3307259ffe70551b2a02091f616b6e1
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7771354
Commit-Queue: Kim-Anh Tran <kimanh@chromium.org>
Reviewed-by: Kim-Anh Tran <kimanh@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>

Author: jackfranklin

front_end/models/ai_assistance/agents/ConversationSummaryAgent.test.ts

@@ -17,7 +17,9 @@ describeWithEnvironment('ConversationSummaryAgent', () => {
     });
 
     const summary = await agent.summarizeConversation('User: Hello\nAssistant: Hi');
-    assert.strictEqual(summary, 'Summary of the conversation');
+    assert.isTrue(summary.startsWith('Summary of the conversation'));
+    assert.isTrue(
+        summary.includes('Note: The code fixes and findings above were identified on a live page in DevTools'));
   });
 
   it('summarizes a conversation using a context', async () => {

front_end/models/ai_assistance/agents/ConversationSummaryAgent.ts

@@ -19,21 +19,23 @@ You are a Conversation Summarizer. Your task is to take a transcript of a conver
     - **No UIDs/Internal IDs:** Never refer to elements by internal IDs (e.g., \`uid=123\`).
     - **Standard Selectors:** Identify elements using HTML tags, classes, or IDs (e.g., \`button.submit-form\`).
     - **No Metadata:** Remove internal constants like \`NAVIGATION_0\` or \`INSIGHT_0\`.
-- **No Process Narration:** Do not describe internal "thinking" or API calls. Skip phrases like "The agent investigated..." or "The user then asked...". Jump straight to the findings and their technical context.
+- **No Process Narration:** Do not describe internal "thinking" or API calls. Skip phrases like "The agent investigated..." or "The user then asked...". Jump straight to the final findings and their technical context. **DO NOT** use chronological or narrative language (e.g., "Initially...", "Next...", "Then...", "After that...", "An attempt to...").
 - **No Internal Function Calls:** Never mention internal DevTools function names or API calls (e.g., \`setElementStyles\`, \`executeScript\`). Instead, describe the actual CSS changes or state modifications in plain technical terms or standard CSS.
 - **Suggest, Don't Prescribe:** When summarizing code changes made during the session (e.g., CSS edits), frame them as technical guidance rather than definitive instructions. Since DevTools operates on the live page, the summary must acknowledge that these fixes may need to be adapted for the actual source code.
 
 ### Objectives
 1. **Identify Intent:** Define the core technical goal of the session.
-2. **Value-Only Diagnostics:** List only the technical data points and findings discovered during the conversation. Omit steps that didn't yield a result and NEVER include information that wasn't explicitly mentioned in the conversation.
-3. **Summarize Code Changes:** When code is executed or suggested in the logs, summarize the **purpose** and the **result**. Include specific code snippets if they are a specific fix for the user to implement.
-4. **Actionable Recommendations:** Provide specific code/strategy fixes based on the findings as guidance for the user's source code.
+2. **Technical Context & Constraints:** Describe the environment and any technical constraints discovered during the session (e.g., "The parent container has a fixed height, which might conflict with wrapping children").
+3. **Actionable Findings:** Group all findings and suggested fixes by the affected element. For each element:
+    - **Diagnostics:** List technical data points discovered (e.g., current style values, layout properties).
+    - **Suggested Fixes:** Provide specific code snippets or strategies identified.
+    - **Side-Effects:** Explicitly call out potential side-effects or risks of the proposed changes discovered during the session.
 
 ### Formatting Rules
 - **Header:** Use ## [Brief Topic Title]
 - **Context:** Describe the target element/page and the core issue or technical goal being analyzed.
-- **Diagnostics:** A bulleted list of technical findings.
 - **Tabular Data:** Use a **Markdown Table** for any lists of URLs, metrics, or comparison data.
+- **Element Sections:** Use **bold text** or a sub-header for each element being discussed.
 - **Code Fixes:** Use fenced code blocks for suggested code optimizations. Use language that frames them as illustrative examples or context (e.g., "The following changes were identified as a potential fix for the live page...") rather than strict instructions.
 
 ---
@@ -48,39 +50,47 @@ You are a Conversation Summarizer. Your task is to take a transcript of a conver
 **Context**
 Analysis of the web.dev landing page focusing on render-blocking resources and hero element positioning.
 
-**Diagnostics**
+**Technical Context & Constraints**
+* **Network:** Slow 3G throttling was active during diagnostics.
+
+**Actionable Findings**
+
 The following resources were identified as render-blocking:
 
 | Resource URL | Load Duration |
 | :--- | :--- |
 | \`app.css\` | 36 ms |
 | \`fonts.css\` | 80 ms |
 
-**Actionable Findings**
-* **Hero Element:** The \`div.hero\` container is correctly positioned but lacks an explicit \`aspect-ratio\`, contributing to layout shift.
-* **Optimization:** Inline critical CSS from \`app.css\` to improve First Contentful Paint.
+**Element: \`div.hero\`**
+* **Diagnostics:** The container is correctly positioned but lacks an explicit \`aspect-ratio\`.
+* **Suggested Fix:** Add \`aspect-ratio: 16 / 9\` to reserve space and prevent layout shift.
 
 ---
 
-### Example 2 (CSS Changes)
+### Example 2 (Style Adjustments)
 
-**User Input:** "The agent checked the styles of \`div.sidebar\` and then called \`setElementStyles\` to set \`display: none\` and \`color: red\`."
+**User Input:** "The agent checked the styles of \`div.sidebar\` and then called \`setElementStyles\` to set \`display: flex\` and \`color: red\`. It also noted the parent \`nav\` has a fixed height."
 
 **Desired Agent Output:**
 ## Style Adjustments: Sidebar
 
 **Context**
 Updating styles for the sidebar element to fix layout or visibility issues.
 
-**Diagnostics**
-The sidebar was investigated for visibility issues.
+**Technical Context & Constraints**
+* **Parent Container:** The \`nav\` element has a fixed height, which may cause overflow if the sidebar's layout changes.
 
 **Actionable Findings**
-* **Style Changes:** The following CSS changes were identified as a potential fix for the live page:
+
+**Element: \`div.sidebar\`**
+* **Diagnostics:** Found \`display: block\`, which prevents flex-based child alignment.
+* **Suggested Fix:**
 \`\`\`css
-display: none;
+display: flex;
 color: red;
 \`\`\`
+* **Side-Effects:** Changing to flex may require adjusting width or margin of child elements to maintain horizontal alignment.
 
 ---
 
@@ -168,7 +178,9 @@ export class ConversationSummaryAgent extends AiAgent<string> {
     const response = await Array.fromAsync(this.run('', {selected: context}));
     const lastResponse = response.at(-1);
     if (lastResponse && lastResponse.type === ResponseType.ANSWER && lastResponse.complete === true) {
-      return lastResponse.text.trim();
+      const disclaimer =
+          '*Note: The code fixes and findings above were identified on a live page in DevTools. When applying them to your codebase, please adapt them to your project\'s specific technical stack (e.g., Tailwind CSS classes, CSS modules, framework components) rather than applying them as literal CSS overrides.*';
+      return `${lastResponse.text.trim()}\n\n${disclaimer}`;
     }
     throw new Error('Failed to summarize conversation');
   }