chrome-devtools-frontend 1.0.1598808 → 1.0.1601661

package/.agents/README.md

@@ -0,0 +1,13 @@
+# .agents
+
+This directory contains workspace-specific agent expertise and skills.
+
+## Skills
+
+Workspace skills are located in `.agents/skills/`. These represent on-demand expertise that the AI agent can activate to complete specialized tasks.
+
+To use a skill, the agent will autonomously identify it based on its description and pull in the instructions using the `activate_skill` tool.
+
+## Contributing
+
+Contributions to existing skills or adding new ones are encouraged via CLs.

package/{agents/prompts/creating-a-model.md → .agents/skills/creating-a-model/SKILL.md}

@@ -1,3 +1,9 @@
+```
+---
+name: devtools-model-management
+description: Guidelines for creating, migrating, and registering models in front_end/models/. Covers BUILD.gn, devtools_grd_files.gni, and entrypoints.
+---
+
 # Creating or Migrating a Model in DevTools
 
 This guide outlines the standard procedure for creating a new model or migrating an existing one to `front_end/models/`.
@@ -48,4 +54,4 @@ The build system does not auto-detect new modules. You must manually register th
 *   **Circular Dependencies:** Occur when internal files import from the directory's own barrel file.
 *   **Missing Tests:** Failing to add the target to `front_end/BUILD.gn` means tests exist but never run.
 *   **Legacy Exports:** Forgetting to remove the class from the old location's `files` or `exports` allows old patterns to persist.
-*   **Build Errors:** Including the barrel file in `devtools_module` sources causes duplicate definition errors.
+*   **Build Errors:** Including the barrel file in `devtools_module` sources causes duplicate definition errors.

package/{agents/prompts/devtools-imports.md → .agents/skills/devtools-imports/SKILL.md}

@@ -1,3 +1,8 @@
+---
+name: devtools-imports
+description: Conventions for importing code in Devtools to avoid build errors. Covers cross-module imports, internal imports, and the "import * as" requirement.
+---
+
 # Imports
 
 This codebase follows a special convention for importing code that must be followed to avoid build errors.
@@ -16,23 +21,23 @@ Within each module there are multiple TypeScript files. *The file that is named
 
 When you want to reuse code from other modules, *you must import that module via its entrypoint*. Imagine we are in `front_end/panels/timeline/TimelinePanel.ts`. This import is GOOD:
 
-```
+```ts
 import * as Trace from '../models/trace/trace.js'; // import the entrypoint
 ```
 
 This import is BAD because we import a file that is NOT the entrypoint:
 
-```
+```ts
 import * as ModelImpl from '../models/trace/ModelImpl.js' // NEVER ALLOWED
 ```
 
 Additionally, you **must import using the `import * as` syntax**.
 
-```
+```ts
 import {ModelImpl, X, Y} from '../models/trace/trace.js'; // BAD
 ```
 
-```
+```ts
 import * as Trace from '../models/trace/trace.js'; // GOOD
 ```
 
@@ -42,6 +47,6 @@ If you are within the same module, it is OK to import from files directly rather
 
 For example, if you are editing `front_end/models/trace/ModelImpl.ts` this would be acceptable:
 
-```
+```ts
 import {Foo} from './Foo.js'; // allowed because Foo.ts is in the same directory.
 ```

package/{agents/prompts/merging-devtools-module.md → .agents/skills/merging-devtools-module/SKILL.md}

@@ -1,3 +1,8 @@
+---
+name: devtools-module-merging
+description: Workflow for merging a DevTools submodule into its parent module. Covers BUILD.gn consolidation and updating devtools_grd_files.gni.
+---
+
 # Workflow: Merging a DevTools Submodule into its Parent
 
 This document outlines the process for merging a submodule (e.g., `panels/timeline/extensions`) into its parent module (e.g., `panels/timeline`) within the DevTools build system. The goal is to simplify the build configuration by consolidating `BUILD.gn` files while keeping the original source file directory structure.

package/{agents/prompts/ui-widgets.md → .agents/skills/ui-widgets/SKILL.md}

@@ -1,3 +1,8 @@
+---
+name: devtools-ui-widgets
+description: Guidelines for building UI widgets using the MVP architecture in DevTools. Covers Widget lifecycle, lit-html views, and state management.
+---
+
 ## UI Widget Framework Guide (MVP Architecture)
 
 Adhere strictly to the Model-View-Presenter (MVP) architecture.

package/{agents/prompts/verification.md → .agents/skills/verification/SKILL.md}

@@ -1,3 +1,8 @@
+---
+name: devtools-verification
+description: MANDATORY: Activate this skill ANY TIME you need to build the project, run tests, or verify code health in DevTools. You MUST use this skill before executing commands like npm test, npm run build, autoninja, or linters, as it contains critical, repository-specific instructions on how to correctly format these commands, filter test runs, and interpret failures.
+---
+
 # Instructions on how to verify your changes
 
 ## Testing

package/front_end/core/common/Settings.ts

@@ -688,7 +688,7 @@ export class VersionController {
   static readonly SYNCED_VERSION_SETTING_NAME = 'syncedInspectorVersion';
   static readonly LOCAL_VERSION_SETTING_NAME = 'localInspectorVersion';
 
-  static readonly CURRENT_VERSION = 41;
+  static readonly CURRENT_VERSION = 42;
 
   readonly #settings: Settings;
   readonly #globalVersionSetting: Setting<number>;
@@ -1480,6 +1480,29 @@ export class VersionController {
     }
   }
 
+  /**
+   * The recording in recorder panel may have unreasonably long titles
+   * or a lot of steps which can cause renderer crashes.
+   * Similar to https://crbug.com/40918380
+   */
+  updateVersionFrom41To42(): void {
+    const recordingsSetting = this.#settings.createSetting<Array<{flow: {steps: unknown[], title: string}}>>(
+        'recorder-recordings-ng',
+        [],
+    );
+    const recordings = recordingsSetting.get();
+    if (recordings.length === 0) {
+      return;
+    }
+
+    for (const recording of recordings) {
+      recording.flow.title = Platform.StringUtilities.trimEndWithMaxLength(recording.flow.title, 300);
+      recording.flow.steps = recording.flow.steps.slice(0, 4096);
+    }
+
+    recordingsSetting.set(recordings);
+  }
+
   /*
    * Any new migration should be added before this comment.
    *

package/front_end/core/dom_extension/DOMExtension.ts

@@ -36,6 +36,7 @@
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck This file is not checked by TypeScript Compiler as it has a lot of legacy code.
+/* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as Platform from '../platform/platform.js';
 

package/front_end/core/host/AidaClient.ts

@@ -67,10 +67,10 @@ interface BaseFunctionParam {
 }
 
 export interface FunctionPrimitiveParams extends BaseFunctionParam {
-  type: ParametersTypes.BOOLEAN|ParametersTypes.INTEGER|ParametersTypes.STRING|ParametersTypes.BOOLEAN;
+  type: ParametersTypes.BOOLEAN|ParametersTypes.INTEGER|ParametersTypes.STRING;
 }
 
-interface FunctionArrayParam extends BaseFunctionParam {
+export interface FunctionArrayParam extends BaseFunctionParam {
   type: ParametersTypes.ARRAY;
   items: FunctionPrimitiveParams;
 }
@@ -301,6 +301,9 @@ export enum UseCase {
 
   // Code generation use case is expected to generate code from scratch
   CODE_GENERATION = 1,
+
+  // Code transformation or code editing use case.
+  CODE_TRANSFORMATION = 2,
 }
 
 /* eslint-disable @typescript-eslint/naming-convention */

package/front_end/core/host/AidaGcaTranslation.ts

@@ -0,0 +1,377 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as AIDA from './AidaClient.js';
+import * as GCA from './GcaTypes.js';
+
+type AidaRequest = AIDA.DoConversationRequest|AIDA.CompletionRequest|AIDA.GenerateCodeRequest;
+
+function createBaseGcaRequest(request: AidaRequest, contents: GCA.Content[]): GCA.GenerateContentRequest {
+  const gcaRequest: GCA.GenerateContentRequest = {contents};
+  mapCommonAidaRequestFields(request, gcaRequest);
+  buildLabels(request, gcaRequest);
+
+  if ('preamble' in request && request.preamble) {
+    gcaRequest.system_instruction = {
+      role: 'user',
+      parts: [{text: request.preamble}],
+    };
+  }
+
+  return gcaRequest;
+}
+
+export function aidaDoConversationRequestToGcaRequest(request: AIDA.DoConversationRequest): GCA.GenerateContentRequest {
+  const contents: GCA.Content[] = [];
+
+  if (request.historical_contexts) {
+    contents.push(...request.historical_contexts.map(convertAidaContentToGcaContent));
+  }
+  contents.push(convertAidaContentToGcaContent(request.current_message));
+
+  const gcaRequest = createBaseGcaRequest(request, contents);
+
+  if (request.function_declarations) {
+    gcaRequest.tools = [{
+      function_declarations: request.function_declarations.map(fd => ({
+                                                                 name: fd.name,
+                                                                 description: fd.description,
+                                                                 parameters: convertAidaParamToGcaSchema(fd.parameters),
+                                                               })),
+    }];
+  }
+
+  return gcaRequest;
+}
+
+function mapCommonAidaRequestFields(aidaRequest: AidaRequest, gcaRequest: GCA.GenerateContentRequest): void {
+  if (aidaRequest.options?.model_id) {
+    gcaRequest.model = aidaRequest.options.model_id;
+  }
+  if (aidaRequest.metadata.string_session_id) {
+    gcaRequest.session_id = aidaRequest.metadata.string_session_id;
+  }
+  if (aidaRequest.options?.temperature !== undefined) {
+    gcaRequest.generation_config = {
+      ...gcaRequest.generation_config,
+      temperature: aidaRequest.options.temperature,
+    };
+  }
+}
+
+export function gcaResponseToAidaDoConversationResponse(response: GCA.GenerateContentResponse):
+    AIDA.DoConversationResponse {
+  const candidate = response.candidates[0];
+  const functionCalls: AIDA.AidaFunctionCallResponse[] = [];
+
+  if (candidate?.content?.parts) {
+    for (const part of candidate.content.parts) {
+      if (part.function_call) {
+        functionCalls.push({
+          name: part.function_call.name,
+          args: part.function_call.args || {},
+        });
+      }
+    }
+  }
+
+  return {
+    explanation: extractTextFromGcaParts(candidate?.content?.parts),
+    metadata: {
+      rpcGlobalId: response.response_id,
+    },
+    functionCalls: functionCalls.length > 0 ?
+        (functionCalls as [AIDA.AidaFunctionCallResponse, ...AIDA.AidaFunctionCallResponse[]]) :
+        undefined,
+    completed: true,
+  };
+}
+
+function extractTextFromGcaParts(parts: GCA.Part[]|undefined): string {
+  if (!parts) {
+    return '';
+  }
+  return parts.map(p => p.text || '').join('');
+}
+
+export function aidaEventToGcaTelemetryRequest(clientEvent: AIDA.AidaRegisterClientEvent): GCA.SendTelemetryRequest {
+  const feedbackMetrics: GCA.FeedbackMetric[] = [];
+  const responseId = String(clientEvent.corresponding_aida_rpc_global_id);
+  const eventTime = new Date().toISOString();
+
+  if (clientEvent.do_conversation_client_event) {
+    const feedback = clientEvent.do_conversation_client_event.user_feedback;
+    if (feedback.sentiment) {
+      let interaction: GCA.InteractionType = GCA.InteractionType.INTERACTION_TYPE_UNSPECIFIED;
+      if (feedback.sentiment === AIDA.Rating.POSITIVE) {
+        interaction = GCA.InteractionType.THUMBS_UP;
+      } else if (feedback.sentiment === AIDA.Rating.NEGATIVE) {
+        interaction = GCA.InteractionType.THUMBS_DOWN;
+      }
+      feedbackMetrics.push({
+        event_time: eventTime,
+        response_id: responseId,
+        suggestion_interaction: {interaction},
+      });
+    }
+  }
+
+  feedbackMetrics.push(
+      ...convertCodeTelemetry(clientEvent.complete_code_client_event, GCA.Method.COMPLETE_CODE, responseId, eventTime));
+  feedbackMetrics.push(
+      ...convertCodeTelemetry(clientEvent.generate_code_client_event, GCA.Method.GENERATE_CODE, responseId, eventTime));
+
+  return {feedback_metrics: feedbackMetrics};
+}
+
+/* eslint-disable @typescript-eslint/naming-convention */
+function convertCodeTelemetry(
+    event: {user_acceptance?: AIDA.UserAcceptance, user_impression?: AIDA.UserImpression}|undefined, method: GCA.Method,
+    responseId: string, eventTime: string): GCA.FeedbackMetric[] {
+  if (!event) {
+    return [];
+  }
+  if ('user_impression' in event && event.user_impression) {
+    const impression = event.user_impression;
+    return [{
+      event_time: eventTime,
+      response_id: responseId,
+      suggestion_offered: {
+        method,
+        status: GCA.SuggestionStatus.NO_ERROR,
+        response_latency: `${impression.latency.duration.seconds + impression.latency.duration.nanos / 1e9}s`,
+      },
+    }];
+  }
+  if ('user_acceptance' in event && event.user_acceptance) {
+    const acceptance = event.user_acceptance;
+    return [{
+      event_time: eventTime,
+      response_id: responseId,
+      suggestion_interaction: {
+        interaction: GCA.InteractionType.ACCEPT,
+        candidate_index: acceptance.sample.sample_id,
+      },
+    }];
+  }
+  return [];
+}
+/* eslint-enable @typescript-eslint/naming-convention */
+
+export function aidaCompletionRequestToGcaRequest(request: AIDA.CompletionRequest): GCA.GenerateContentRequest {
+  const contents: GCA.Content[] = [
+    {
+      role: 'user',
+      parts: [{text: request.prefix + (request.suffix || '')}],
+    },
+  ];
+
+  const gcaRequest = createBaseGcaRequest(request, contents);
+
+  if (request.options?.stop_sequences) {
+    gcaRequest.generation_config = {
+      ...gcaRequest.generation_config,
+      stop_sequences: request.options.stop_sequences,
+    };
+  }
+
+  if (request.additional_files) {
+    gcaRequest.aicode = {
+      experience: 'completion',
+      files: request.additional_files.map(f => ({
+                                            file_uri: f.path,
+                                            inclusion_reason: [AidaReasonToGcaInclusionReason[f.included_reason]],
+                                          })),
+    };
+  }
+
+  return gcaRequest;
+}
+
+/* eslint-disable @typescript-eslint/naming-convention */
+function buildLabels(request: AidaRequest, gcaRequest: GCA.GenerateContentRequest): void {
+  const labels: Record<string, string> = {};
+  if (request.client) {
+    labels['client'] = request.client;
+  }
+  if ('functionality_type' in request && request.functionality_type !== undefined) {
+    labels['functionality_type'] = AIDA.FunctionalityType[request.functionality_type];
+  }
+  if ('client_feature' in request && request.client_feature !== undefined) {
+    labels['client_feature'] = AIDA.ClientFeature[request.client_feature];
+  }
+  if ('last_user_action' in request && request.last_user_action !== undefined) {
+    labels['last_user_action'] = AIDA.EditType[request.last_user_action];
+  }
+  if ('use_case' in request && request.use_case !== undefined) {
+    labels['use_case'] = AIDA.UseCase[request.use_case];
+  }
+  const options = request.options as {
+    inference_language?: string,
+    expect_code_output?: boolean,
+  } | undefined;
+  if (options?.inference_language) {
+    labels['inference_language'] = options.inference_language;
+  }
+  if (options?.expect_code_output !== undefined) {
+    labels['expect_code_output'] = String(options.expect_code_output);
+  }
+
+  if (Object.keys(labels).length > 0) {
+    gcaRequest.labels = labels;
+  }
+}
+/* eslint-enable @typescript-eslint/naming-convention */
+
+const AidaReasonToGcaInclusionReason: Record<AIDA.Reason, GCA.InclusionReason> = {
+  [AIDA.Reason.UNKNOWN]: GCA.InclusionReason.INCLUSION_REASON_UNSPECIFIED,
+  [AIDA.Reason.CURRENTLY_OPEN]: GCA.InclusionReason.OPEN,
+  // Intentional mapping due to type mismatch
+  // TODO(liviurau): find a way to validate this mapping
+  [AIDA.Reason.RECENTLY_OPENED]: GCA.InclusionReason.RECENTLY_CLOSED,
+  [AIDA.Reason.RECENTLY_EDITED]: GCA.InclusionReason.RECENTLY_EDITED,
+  [AIDA.Reason.COLOCATED]: GCA.InclusionReason.COLOCATED,
+  [AIDA.Reason.RELATED_FILE]: GCA.InclusionReason.RELATED,
+};
+
+export function gcaResponseToAidaCompletionResponse(response: GCA.GenerateContentResponse): AIDA.CompletionResponse {
+  const {samples, metadata} = gcaResponseToAidaSamplesAndMetadata(response);
+  return {
+    generatedSamples: samples,
+    metadata,
+  };
+}
+
+function gcaResponseToAidaSamplesAndMetadata(response: GCA.GenerateContentResponse): {
+  samples: AIDA.GenerationSample[],
+  metadata: AIDA.ResponseMetadata,
+} {
+  return {
+    samples: response.candidates.map(gcaCandidateToAidaGenerationSample),
+    metadata: {
+      rpcGlobalId: response.response_id,
+    },
+  };
+}
+
+export function aidaGenerateCodeRequestToGcaRequest(request: AIDA.GenerateCodeRequest): GCA.GenerateContentRequest {
+  const gcaRequest = createBaseGcaRequest(request, [convertAidaContentToGcaContent(request.current_message)]);
+
+  if (request.context_files) {
+    gcaRequest.aicode = {
+      experience: 'generate_code',
+      files: request.context_files.map(f => ({
+                                         file_uri: f.path,
+                                         programming_language: f.programming_language,
+                                       })),
+    };
+  }
+
+  return gcaRequest;
+}
+
+export function gcaResponseToAidaGenerateCodeResponse(response: GCA.GenerateContentResponse):
+    AIDA.GenerateCodeResponse {
+  return gcaResponseToAidaSamplesAndMetadata(response);
+}
+
+function gcaCandidateToAidaGenerationSample(candidate: GCA.Candidate): AIDA.GenerationSample {
+  const generationSample: AIDA.GenerationSample = {
+    generationString: extractTextFromGcaParts(candidate.content?.parts),
+    score: 0,
+    sampleId: candidate.index,
+  };
+  if (candidate.citation_metadata) {
+    generationSample.attributionMetadata = {
+      attributionAction: AIDA.RecitationAction.CITE,
+      citations: candidate.citation_metadata.citations.map(c => ({
+                                                             startIndex: c.start_index,
+                                                             endIndex: c.end_index,
+                                                             uri: c.uri,
+                                                           })),
+    };
+  }
+  return generationSample;
+}
+
+function convertAidaContentToGcaContent(content: AIDA.Content): GCA.Content {
+  // TODO(liviurau): decide how to map AIDA.Role.SYSTEM
+  // currently it will default to 'user'
+  let role: GCA.Role = 'user';
+
+  if (content.role === AIDA.Role.MODEL) {
+    role = 'model';
+  }
+  return {
+    role,
+    parts: content.parts.map(convertAidaPartToGcaPart),
+  };
+}
+
+function convertAidaPartToGcaPart(part: AIDA.Part): GCA.Part {
+  if ('text' in part) {
+    return {text: part.text};
+  }
+  if ('functionCall' in part) {
+    return {
+      function_call: {
+        name: part.functionCall.name,
+        args: part.functionCall.args,
+      },
+    };
+  }
+  if ('functionResponse' in part) {
+    const fResponse: Record<string, unknown> = {};
+    if ('result' in part.functionResponse.response) {
+      fResponse.output = part.functionResponse.response['result'];
+    } else if ('output' in part.functionResponse.response) {
+      fResponse.output = part.functionResponse.response['output'];
+    } else if (!('error' in part.functionResponse.response)) {
+      fResponse.output = part.functionResponse.response;
+    }
+    if ('error' in part.functionResponse.response) {
+      fResponse.error = part.functionResponse.response['error'];
+    }
+    return {
+      function_response: {
+        name: part.functionResponse.name,
+        response: fResponse,
+      },
+    };
+  }
+  if ('inlineData' in part) {
+    return {
+      inline_data: {
+        mime_type: part.inlineData.mimeType,
+        data: part.inlineData.data,
+      },
+    };
+  }
+  return {};
+}
+
+type FunctionParam<T extends string|number|symbol = string> =
+    AIDA.FunctionObjectParam<T>|AIDA.FunctionArrayParam|AIDA.FunctionPrimitiveParams;
+
+function convertAidaParamToGcaSchema<T extends string|number|symbol = string>(param: FunctionParam<T>): GCA.Schema {
+  const schema: GCA.Schema = {
+    type: param.type as unknown as GCA.Type,
+    description: param.description,
+  };
+  if (param.nullable) {
+    schema.nullable = param.nullable;
+  }
+
+  if (param.type === AIDA.ParametersTypes.ARRAY && param.items) {
+    schema.items = convertAidaParamToGcaSchema(param.items);
+  } else if (param.type === AIDA.ParametersTypes.OBJECT && param.properties) {
+    schema.properties = {};
+    for (const [key, value] of Object.entries(param.properties)) {
+      schema.properties[key] = convertAidaParamToGcaSchema(value as FunctionParam);
+    }
+    schema.required = param.required.map(r => r.toString());
+  }
+
+  return schema;
+}