chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/panels/freestyler/DrJonesFileAgent.ts

@@ -5,35 +5,37 @@
 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 * as Bindings from '../../models/bindings/bindings.js';
 import type * as Workspace from '../../models/workspace/workspace.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';
 
 const preamble =
     `You are a highly skilled software engineer with expertise in various programming languages and frameworks.
-You are provided with the content of a file from the Chrome DevTools Sources panel.
-
-**Important Note:** The provided code may represent an incomplete fragment of a larger file.
+You are provided with the content of a file from the Chrome DevTools Sources panel. To aid your analysis, you've been given the below links to understand the context of the code and its relationship to other files. When answering questions, prioritize providing these links directly.
+* Source-mapped from: If this code is the source for a mapped file, you'll have a link to that generated file.
+* Source map: If this code has an associated source map, you'll have link to the source map.
 
 Analyze the code and provide the following information:
-* Describe the primary functionality of the code. What does it do? Be specific and concise.
+* Describe the primary functionality of the code. What does it do? Be specific and concise. If the code snippet is too small or unclear to determine the functionality, state that explicitly.
 * If possible, identify the framework or library the code is associated with (e.g., React, Angular, jQuery). List any key technologies, APIs, or patterns used in the code (e.g., Fetch API, WebSockets, object-oriented programming).
 * (Only provide if available and accessible externally) External Resources: Suggest relevant documentation that could help a developer understand the code better. Prioritize official documentation if available. Do not provide any internal resources.
 
 # Considerations
 * Keep your analysis concise and focused, highlighting only the most critical aspects for a software engineer.
+* Answer questions directly, using the provided links whenever relevant.
+* Always double-check links to make sure they are complete and correct.
 * **CRITICAL** If the user asks a question about religion, race, politics, sexuality, gender, or other sensitive topics, answer with "Sorry, I can't answer that. I'm best at questions about files."
+* **Important Note:** The provided code may represent an incomplete fragment of a larger file. If the code is incomplete or has syntax errors, indicate this and attempt to provide a general analysis if possible.
+* **Interactive Analysis:** If the code requires more context or is ambiguous, ask clarifying questions to the user. Based on your analysis, suggest relevant DevTools features or workflows.
 
 ## Example session
 
@@ -61,109 +63,61 @@ const UIStringsNotTranslate = {
    *@description Title for thinking step of DrJones File agent.
    */
   analyzingFile: 'Analyzing file',
-  /**
-   *@description Thought text for thinking step of DrJones File agent.
-   */
-  dataUsedToGenerateThisResponse: 'Data used to generate this response',
 };
 
 const lockedString = i18n.i18n.lockedString;
 
-const MAX_FILE_SIZE = 50000;
+const MAX_FILE_SIZE = 10000;
 
 /**
  * One agent instance handles one conversation. Create a new agent
  * instance for a new conversation.
  */
-export class DrJonesFileAgent extends AiAgent {
+export class DrJonesFileAgent extends AiAgent<Workspace.UISourceCode.UISourceCode> {
+  override type = AgentType.DRJONES_FILE;
   readonly preamble = preamble;
   readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_DRJONES_FILE_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.devToolsAiAssistanceFileAgent?.userTier ?? config.devToolsAiAssistanceFileAgentDogfood?.userTier;
+  }
   get options(): AidaRequestOptions {
     const config = Common.Settings.Settings.instance().getHostConfig();
-    const temperature = AiAgent.validTemperature(config.devToolsAiAssistanceFileAgentDogfood?.temperature);
-    const modelId = config.devToolsAiAssistanceFileAgentDogfood?.modelId;
+    const temperature =
+        config.devToolsAiAssistanceFileAgent?.temperature ?? config.devToolsAiAssistanceFileAgentDogfood?.temperature;
+    const modelId =
+        config.devToolsAiAssistanceFileAgent?.modelId ?? config.devToolsAiAssistanceFileAgentDogfood?.modelId;
 
     return {
       temperature,
-      model_id: modelId,
+      modelId,
     };
   }
 
-  *
+  async *
       handleContextDetails(selectedFile: Workspace.UISourceCode.UISourceCode|null):
-          Generator<ThoughtResponse|TitleResponse, void, void> {
+          AsyncGenerator<ContextResponse, void, void> {
     if (!selectedFile) {
       return;
     }
 
     yield {
-      type: ResponseType.TITLE,
+      type: ResponseType.CONTEXT,
       title: lockedString(UIStringsNotTranslate.analyzingFile),
-    };
-    yield {
-      type: ResponseType.THOUGHT,
-      thought: lockedString(UIStringsNotTranslate.dataUsedToGenerateThisResponse),
-      contextDetails: createContextDetailsForDrJonesFileAgent(selectedFile),
+      details: createContextDetailsForDrJonesFileAgent(selectedFile),
     };
   }
 
-  async enhanceQuery(query: string, selectedFile: Workspace.UISourceCode.UISourceCode|null): Promise<string> {
+  override async enhanceQuery(query: string, selectedFile: Workspace.UISourceCode.UISourceCode|null): Promise<string> {
     const fileEnchantmentQuery =
         selectedFile ? `# Selected file\n${formatFile(selectedFile)}\n\n# User request\n\n` : '';
     return `${fileEnchantmentQuery}${query}`;
   }
 
-  #runId = 0;
-  async * run(query: string, options: {
-    signal?: AbortSignal, selectedFile: Workspace.UISourceCode.UISourceCode|null,
-  }): AsyncGenerator<ResponseData, void, void> {
-    yield* this.handleContextDetails(options.selectedFile);
-
-    query = await this.enhanceQuery(query, options.selectedFile);
-    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'));
-    }
   }
 }
 
@@ -178,10 +132,52 @@ function createContextDetailsForDrJonesFileAgent(selectedFile: Workspace.UISourc
 }
 
 function formatFile(selectedFile: Workspace.UISourceCode.UISourceCode): string {
+  const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
   return `File Name: ${selectedFile.displayName()}
 URL: ${selectedFile.url()}
+${formatSourceMapDetails(selectedFile, debuggerWorkspaceBinding)}
 File Content:
-${selectedFile.content().slice(0, MAX_FILE_SIZE)}`;
+${formatFileContent(selectedFile.content())}`;
+}
+
+function formatFileContent(content: string): string {
+  const formattedContent = content.length > MAX_FILE_SIZE ? content.slice(0, MAX_FILE_SIZE) + '...\n' : content + '\n';
+  return '```' + formattedContent + '```';
+}
+
+export function formatSourceMapDetails(
+    selectedFile: Workspace.UISourceCode.UISourceCode,
+    debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding): string {
+  const mappedFileUrls = [];
+  const sourceMapUrls = [];
+  if (selectedFile.contentType().isFromSourceMap()) {
+    for (const script of debuggerWorkspaceBinding.scriptsForUISourceCode(selectedFile)) {
+      const uiSourceCode = debuggerWorkspaceBinding.uiSourceCodeForScript(script);
+      if (uiSourceCode) {
+        mappedFileUrls.push(uiSourceCode.url());
+        if (script.sourceMapURL !== undefined) {
+          sourceMapUrls.push(script.sourceMapURL);
+        }
+      }
+    }
+    for (const originURL of Bindings.SASSSourceMapping.SASSSourceMapping.uiSourceOrigin(selectedFile)) {
+      mappedFileUrls.push(originURL);
+    }
+  } else if (selectedFile.contentType().isScript()) {
+    for (const script of debuggerWorkspaceBinding.scriptsForUISourceCode(selectedFile)) {
+      if (script.sourceMapURL !== undefined) {
+        sourceMapUrls.push(script.sourceMapURL);
+      }
+    }
+  }
+  if (sourceMapUrls.length === 0) {
+    return '';
+  }
+  let sourceMapDetails = 'Source map: ' + sourceMapUrls;
+  if (mappedFileUrls.length > 0) {
+    sourceMapDetails += '\nSource mapped from: ' + mappedFileUrls;
+  }
+  return sourceMapDetails;
 }
 
 function setDebugFreestylerEnabled(enabled: boolean): void {

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

@@ -2,28 +2,44 @@
 // 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 type * as Host from '../../core/host/host.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Logs from '../../models/logs/logs.js';
+import type * as Network from '../../panels/network/network.js';
 import {
-  describeWithEnvironment,
   getGetHostConfigStub,
 } from '../../testing/EnvironmentHelpers.js';
+import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import {createNetworkPanelForMockConnection} from '../../testing/NetworkHelpers.js';
+import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 
-import {DrJonesNetworkAgent, ResponseType} from './freestyler.js';
+import {allowHeader, DrJonesNetworkAgent, formatHeaders, formatInitiatorUrl, ResponseType} from './freestyler.js';
+
+const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
+
+describeWithMockConnection('DrJonesNetworkAgent', () => {
+  let networkPanel: Network.NetworkPanel.NetworkPanel;
 
-describeWithEnvironment('DrJonesNetworkAgent', () => {
   function mockHostConfig(modelId?: string, temperature?: number) {
     getGetHostConfigStub({
-      devToolsExplainThisResourceDogfood: {
+      devToolsAiAssistanceNetworkAgent: {
         modelId,
         temperature,
       },
     });
   }
 
+  beforeEach(async () => {
+    networkPanel = await createNetworkPanelForMockConnection();
+  });
+
+  afterEach(async () => {
+    await coordinator.done();
+    networkPanel.detach();
+  });
+
   describe('buildRequest', () => {
     beforeEach(() => {
       sinon.restore();
@@ -59,20 +75,16 @@ describeWithEnvironment('DrJonesNetworkAgent', () => {
         serverSideLoggingEnabled: true,
       });
       sinon.stub(agent, 'preamble').value('preamble');
-      agent.chatHistoryForTesting = new Map([[
+      agent.chatNewHistoryForTesting = new Map([[
         0,
         [
           {
-            text: 'first',
-            entity: Host.AidaClient.Entity.UNKNOWN,
-          },
-          {
-            text: 'second',
-            entity: Host.AidaClient.Entity.SYSTEM,
+            type: ResponseType.QUERYING,
+            query: 'questions',
           },
           {
-            text: 'third',
-            entity: Host.AidaClient.Entity.USER,
+            type: ResponseType.ANSWER,
+            text: 'answer',
           },
         ],
       ]]);
@@ -86,16 +98,12 @@ describeWithEnvironment('DrJonesNetworkAgent', () => {
             preamble: 'preamble',
             chat_history: [
               {
-                entity: 0,
-                text: 'first',
+                entity: 1,
+                text: 'questions',
               },
               {
                 entity: 2,
-                text: 'second',
-              },
-              {
-                entity: 1,
-                text: 'third',
+                text: 'answer',
               },
             ],
             metadata: {
@@ -138,8 +146,9 @@ describeWithEnvironment('DrJonesNetworkAgent', () => {
           'requestId' as Protocol.Network.RequestId, 'https://www.example.com' as Platform.DevToolsPath.UrlString,
           '' as Platform.DevToolsPath.UrlString, null, null, null);
       selectedNetworkRequest.statusCode = 200;
-      selectedNetworkRequest.setRequestHeaders([{name: 'foo1', value: 'bar1'}]);
-      selectedNetworkRequest.responseHeaders = [{name: 'foo2', value: 'bar2'}, {name: 'foo3', value: 'bar3'}];
+      selectedNetworkRequest.setRequestHeaders([{name: 'content-type', value: 'bar1'}]);
+      selectedNetworkRequest.responseHeaders =
+          [{name: 'content-type', value: 'bar2'}, {name: 'x-forwarded-for', value: 'bar3'}];
       selectedNetworkRequest.timing = timingInfo;
 
       const initiatorNetworkRequest = SDK.NetworkRequest.NetworkRequest.create(
@@ -206,55 +215,47 @@ describeWithEnvironment('DrJonesNetworkAgent', () => {
         aidaClient: mockAidaClient(generateAnswer),
       });
 
-      const responses = await Array.fromAsync(agent.run('test', {selectedNetworkRequest}));
+      const responses = await Array.fromAsync(agent.run('test', {selected: selectedNetworkRequest}));
       assert.deepStrictEqual(responses, [
         {
-          type: ResponseType.TITLE,
-          title: 'Inspecting network data',
+          type: ResponseType.USER_QUERY,
+          query: 'test',
         },
         {
-          type: ResponseType.THOUGHT,
-          thought: 'Data used to generate this response',
-          contextDetails: [
+          type: ResponseType.CONTEXT,
+          title: 'Analyzing network data',
+          details: [
             {
               title: 'Request',
-              text: 'Request URL: https://www.example.com\n\nRequest Headers\nfoo1: bar1',
+              text: 'Request URL: https://www.example.com\n\nRequest Headers\ncontent-type: bar1',
             },
             {
               title: 'Response',
-              text: 'Response Status: 200 \n\nResponse Headers\nfoo2: bar2\nfoo3: bar3',
+              text: 'Response Status: 200 \n\nResponse Headers\ncontent-type: bar2\nx-forwarded-for: bar3',
             },
             {
               title: 'Timing',
-              text: `Request start time: 500
-Request end time: -1
-Receiving response headers start time: 1000
-Receiving response headers end time: 0
-Proxy negotiation start time: 0
-Proxy negotiation end time: 0
-DNS lookup start time: 0
-DNS lookup end time: 0
-TCP start time: 0
-TCP end time: 0
-SSL start time: 0
-SSL end time: 0
-Sending start: 800
-Sending end: 900
-`,
+              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',
             },
             {
-              title: 'Request Initiator Chain',
-              text: `- URL: https://www.initiator.com
+              title: 'Request initiator chain',
+              text: `- URL: <redacted cross-origin initiator URL>
 \t- URL: https://www.example.com
 \t\t- URL: https://www.example.com/1
-\t\t- URL: https://www.example.com/2
-`,
+\t\t- URL: https://www.example.com/2`,
             },
           ],
         },
+        {
+          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',
+        },
         {
           type: ResponseType.ANSWER,
           text: 'This is the answer',
+          suggestions: undefined,
           rpcId: 123,
         },
       ]);
@@ -264,37 +265,27 @@ Sending end: 900
           text: `# Selected network request \nRequest: https://www.example.com
 
 Request headers:
-foo1: bar1
+content-type: bar1
 
 Response headers:
-foo2: bar2
-foo3: bar3
+content-type: bar2
+x-forwarded-for: bar3
 
 Response status: 200 \n
-Request Timing:
-Request start time: 500
-Request end time: -1
-Receiving response headers start time: 1000
-Receiving response headers end time: 0
-Proxy negotiation start time: 0
-Proxy negotiation end time: 0
-DNS lookup start time: 0
-DNS lookup end time: 0
-TCP start time: 0
-TCP end time: 0
-SSL start time: 0
-SSL end time: 0
-Sending start: 800
-Sending end: 900
+Request timing:
+Queued at (timestamp): 0 μs
+Started at (timestamp): 8.3 min
+Queueing (duration): 8.3 min
+Connection start (stalled) (duration): 800.00 ms
+Request sent (duration): 100.00 ms
+Duration (duration): 8.3 min
 
-
-Request Initiator Chain:
-- URL: https://www.initiator.com
+Request initiator chain:
+- URL: <redacted cross-origin initiator URL>
 \t- URL: https://www.example.com
 \t\t- URL: https://www.example.com/1
 \t\t- URL: https://www.example.com/2
 
-
 # User request
 
 test`,
@@ -306,4 +297,76 @@ test`,
       ]);
     });
   });
+
+  describe('allowHeader', () => {
+    it('allows a header from the list', () => {
+      assert.isTrue(allowHeader({name: 'content-type', value: 'foo'}));
+    });
+
+    it('disallows headers not on the list', () => {
+      assert.isFalse(allowHeader({name: 'cookie', value: 'foo'}));
+      assert.isFalse(allowHeader({name: 'set-cookie', value: 'foo'}));
+      assert.isFalse(allowHeader({name: 'authorization', value: 'foo'}));
+    });
+  });
+
+  describe('formatInitiatorUrl', () => {
+    const tests = [
+      {
+        allowedResource: 'https://example.test',
+        targetResource: 'https://example.test',
+        shouldBeRedacted: false,
+      },
+      {
+        allowedResource: 'https://example.test',
+        targetResource: 'https://another-example.test',
+        shouldBeRedacted: true,
+      },
+      {
+        allowedResource: 'file://test',
+        targetResource: 'https://another-example.test',
+        shouldBeRedacted: true,
+      },
+      {
+        allowedResource: 'https://another-example.test',
+        targetResource: 'file://test',
+        shouldBeRedacted: true,
+      },
+      {
+        allowedResource: 'https://test.example.test',
+        targetResource: 'https://example.test',
+        shouldBeRedacted: true,
+      },
+      {
+        allowedResource: 'https://test.example.test:9900',
+        targetResource: 'https://test.example.test:9901',
+        shouldBeRedacted: true,
+      },
+    ];
+
+    for (const t of tests) {
+      it(`${t.targetResource} test when allowed resource is ${t.allowedResource}`, () => {
+        const formatted = formatInitiatorUrl(new URL(t.targetResource).origin, new URL(t.allowedResource).origin);
+        if (t.shouldBeRedacted) {
+          assert.strictEqual(
+              formatted, '<redacted cross-origin initiator URL>', `${JSON.stringify(t)} was not redacted`);
+        } else {
+          assert.strictEqual(formatted, t.targetResource, `${JSON.stringify(t)} was redacted`);
+        }
+      });
+    }
+  });
+
+  describe('formatHeaders', () => {
+    it('does not redact a header from the list', () => {
+      assert.strictEqual(formatHeaders('test:', [{name: 'content-type', value: 'foo'}]), 'test:\ncontent-type: foo');
+    });
+
+    it('disallows headers not on the list', () => {
+      assert.strictEqual(formatHeaders('test:', [{name: 'cookie', value: 'foo'}]), 'test:\ncookie: <redacted>');
+      assert.strictEqual(formatHeaders('test:', [{name: 'set-cookie', value: 'foo'}]), 'test:\nset-cookie: <redacted>');
+      assert.strictEqual(
+          formatHeaders('test:', [{name: 'authorization', value: 'foo'}]), 'test:\nauthorization: <redacted>');
+    });
+  });
 });