Add debug logs for AI code completion

This CL also removes stop sequence for Sources panel code completion
requests

Bug: 438462595
Bypass-Check-License: Only updates files, no new files are added.
Change-Id: Ie1eee829423899368cdcfc6c98fa2854a77d6e7f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6846799
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Samiya Caur <[email protected]>

Author: Samiya Caur

front_end/models/ai_code_completion/AiCodeCompletion.test.ts

@@ -37,6 +37,7 @@ describeWithEnvironment('AiCodeCompletion', () => {
     const aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion(
         {aidaClient: mockAidaClient},
         sinon.createStubInstance(TextEditor.TextEditor.TextEditor),
+        ['\n'],
     );
 
     aiCodeCompletion.onTextChanged('prefix', 'suffix', 6);

front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -7,6 +7,8 @@ import * as Host from '../../core/host/host.js';
 import * as Root from '../../core/root/root.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 
+import {debugLog} from './debug.js';
+
 export const DELAY_BEFORE_SHOWING_RESPONSE_MS = 500;
 export const AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS = 200;
 
@@ -40,17 +42,19 @@ interface RequestOptions {
  */
 export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   #editor: TextEditor.TextEditor.TextEditor;
+  #stopSequences: string[];
   #renderingTimeout?: number;
 
   readonly #sessionId: string = crypto.randomUUID();
   readonly #aidaClient: Host.AidaClient.AidaClient;
   readonly #serverSideLoggingEnabled: boolean;
 
-  constructor(opts: AgentOptions, editor: TextEditor.TextEditor.TextEditor) {
+  constructor(opts: AgentOptions, editor: TextEditor.TextEditor.TextEditor, stopSequences?: string[]) {
     super();
     this.#aidaClient = opts.aidaClient;
     this.#serverSideLoggingEnabled = opts.serverSideLoggingEnabled ?? false;
     this.#editor = editor;
+    this.#stopSequences = stopSequences ?? [];
   }
 
   #debouncedRequestAidaSuggestion = Common.Debouncer.debounce(
@@ -75,7 +79,7 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
         inference_language: inferenceLanguage,
         temperature: validTemperature(this.#options.temperature),
         model_id: this.#options.modelId || undefined,
-        stop_sequences: ['\n'],  // We are prioritizing single line suggestions to reduce noise
+        stop_sequences: this.#stopSequences,
       },
       metadata: {
         disable_user_content_logging: !(this.#serverSideLoggingEnabled ?? false),
@@ -92,6 +96,7 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
 
     try {
       const response = await this.#aidaClient.completeCode(request);
+      debugLog('At cursor position', cursor, {request, response});
       if (response && response.generatedSamples.length > 0 && response.generatedSamples[0].generationString) {
         if (response.generatedSamples[0].attributionMetadata?.attributionAction ===
             Host.AidaClient.RecitationAction.BLOCK) {
@@ -116,6 +121,7 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
               sampleId: response.generatedSamples[0].sampleId,
             })
           });
+          debugLog('Suggestion dispatched to the editor', response.generatedSamples[0], 'at cursor position', cursor);
           if (response.metadata.rpcGlobalId) {
             const latency = performance.now() - startTime;
             this.#registerUserImpression(response.metadata.rpcGlobalId, response.generatedSamples[0].sampleId, latency);
@@ -167,6 +173,7 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
         },
       },
     });
+    debugLog('Registered user impression with latency {seconds:', seconds, ', nanos:', nanos, '}');
   }
 
   registerUserAcceptance(rpcGlobalId: Host.AidaClient.RpcGlobalId, sampleId: number): void {
@@ -181,6 +188,7 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
         },
       },
     });
+    debugLog('Registered user acceptance');
   }
 
   onTextChanged(

front_end/models/ai_code_completion/BUILD.gn

@@ -8,7 +8,10 @@ import("../../../scripts/build/typescript/typescript.gni")
 import("../visibility.gni")
 
 devtools_module("ai_code_completion") {
-  sources = [ "AiCodeCompletion.ts" ]
+  sources = [
+    "AiCodeCompletion.ts",
+    "debug.ts",
+  ]
 
   deps = [
     "../../core/common:bundle",

front_end/models/ai_code_completion/ai_code_completion.ts

@@ -2,8 +2,5 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as AiCodeCompletion from './AiCodeCompletion.js';
-
-export {
-  AiCodeCompletion,
-};
+export * from './debug.js';
+export * as AiCodeCompletion from './AiCodeCompletion.js';

front_end/models/ai_code_completion/debug.ts

@@ -0,0 +1,30 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @file Local debugging utilities.
+ */
+
+export function isDebugMode(): boolean {
+  return Boolean(localStorage.getItem('debugAiCodeCompletionEnabled'));
+}
+
+export function debugLog(...log: unknown[]): void {
+  if (!isDebugMode()) {
+    return;
+  }
+
+  // eslint-disable-next-line no-console
+  console.log(...log);
+}
+
+function setDebugAiCodeCompletionEnabled(enabled: boolean): void {
+  if (enabled) {
+    localStorage.setItem('debugAiCodeCompletionEnabled', 'true');
+  } else {
+    localStorage.removeItem('debugAiCodeCompletionEnabled');
+  }
+}
+// @ts-expect-error
+globalThis.setDebugAiCodeCompletionEnabled = setDebugAiCodeCompletionEnabled;

front_end/panels/console/ConsolePrompt.ts

@@ -511,8 +511,9 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       this.detachAiCodeCompletionTeaser();
       this.teaser = undefined;
     }
+    // We are prioritizing single line suggestions in Console panel to reduce noise.
     this.aiCodeCompletion =
-        new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion({aidaClient: this.aidaClient}, this.editor);
+        new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion({aidaClient: this.aidaClient}, this.editor, ['\n']);
     this.aiCodeCompletion.addEventListener(AiCodeCompletion.AiCodeCompletion.Events.RESPONSE_RECEIVED, event => {
       this.aiCodeCompletionCitations = event.data.citations;
       this.dispatchEventToListeners(Events.AI_CODE_COMPLETION_RESPONSE_RECEIVED, event.data);