chrome-devtools-frontend 1.0.1563104 → 1.0.1563377

package/AUTHORS

@@ -36,6 +36,7 @@ Douglas Chiang <douglasdothnc@gmail.com>
 Dragonish <no.web.developer@outlook.com>
 Eden Wang <nedenwang@gmail.com>
 Edward Trist <edwardtrist@gmail.com>
+Emir D <emrd434@gmail.com>
 Ergün Erdoğmuş <erdogmusergun@gmail.com>
 Eric Rannaud <eric.rannaud@gmail.com>
 Faisal Salman <fyzlman@gmail.com>

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -649,12 +649,13 @@ export class CSSMatchedStyles {
     // DOMInheritanceCascades.
     for (const [pseudoType, nodeCascade] of pseudoCascades.entries()) {
       pseudoInheritanceCascades.set(
-          pseudoType, new DOMInheritanceCascade(this, nodeCascade, this.#registeredProperties));
+          pseudoType, new DOMInheritanceCascade(this, nodeCascade, this.#registeredProperties, this.#mainDOMCascade));
     }
 
     for (const [highlightName, nodeCascade] of customHighlightPseudoCascades.entries()) {
       customHighlightPseudoInheritanceCascades.set(
-          highlightName, new DOMInheritanceCascade(this, nodeCascade, this.#registeredProperties));
+          highlightName,
+          new DOMInheritanceCascade(this, nodeCascade, this.#registeredProperties, this.#mainDOMCascade));
     }
 
     return [pseudoInheritanceCascades, customHighlightPseudoInheritanceCascades];
@@ -959,17 +960,15 @@ class NodeCascade {
   #matchedStyles: CSSMatchedStyles;
   readonly styles: CSSStyleDeclaration[];
   readonly #isInherited: boolean;
-  readonly #isHighlightPseudoCascade: boolean;
   readonly propertiesState = new Map<CSSProperty, PropertyState>();
   readonly activeProperties = new Map<string, CSSProperty>();
   readonly #node: DOMNode;
   constructor(
       matchedStyles: CSSMatchedStyles, styles: CSSStyleDeclaration[], node: DOMNode, isInherited: boolean,
-      isHighlightPseudoCascade = false) {
+      readonly isHighlightPseudoCascade = false) {
     this.#matchedStyles = matchedStyles;
     this.styles = styles;
     this.#isInherited = isInherited;
-    this.#isHighlightPseudoCascade = isHighlightPseudoCascade;
     this.#node = node;
   }
 
@@ -992,9 +991,16 @@ class NodeCascade {
         // Do not pick non-inherited properties from inherited styles.
         const metadata = cssMetadata();
 
-        // All properties are inherited for highlight pseudos.
-        if (this.#isInherited && !this.#isHighlightPseudoCascade && !metadata.isPropertyInherited(property.name)) {
-          continue;
+        if (this.#isInherited) {
+          if (this.isHighlightPseudoCascade) {
+            // All properties are inherited for highlight pseudos, but custom
+            // variables do not come from the inherited pseudo elements.
+            if (property.name.startsWith('--')) {
+              continue;
+            }
+          } else if (!metadata.isPropertyInherited(property.name)) {
+            continue;
+          }
         }
 
         // When a property does not have a range in an otherwise ranged CSSStyleDeclaration,
@@ -1085,6 +1091,7 @@ class NodeCascade {
 function isRegular(declaration: CSSProperty|CSSRegisteredProperty): declaration is CSSProperty {
   return 'ownerStyle' in declaration;
 }
+
 export class CSSValueSource {
   readonly declaration: CSSProperty|CSSRegisteredProperty;
   constructor(declaration: CSSProperty|CSSRegisteredProperty) {
@@ -1176,15 +1183,27 @@ class DOMInheritanceCascade {
   readonly #nodeCascades: NodeCascade[];
   #registeredProperties: CSSRegisteredProperty[];
   readonly #matchedStyles: CSSMatchedStyles;
+  readonly #fallbackCascade: DOMInheritanceCascade|null = null;
+  readonly #styles: CSSStyleDeclaration[] = [];
   constructor(
-      matchedStyles: CSSMatchedStyles, nodeCascades: NodeCascade[], registeredProperties: CSSRegisteredProperty[]) {
+      matchedStyles: CSSMatchedStyles, nodeCascades: NodeCascade[], registeredProperties: CSSRegisteredProperty[],
+      fallbackCascade: DOMInheritanceCascade|null = null) {
     this.#nodeCascades = nodeCascades;
     this.#matchedStyles = matchedStyles;
     this.#registeredProperties = registeredProperties;
+    this.#fallbackCascade = fallbackCascade;
 
     for (const nodeCascade of nodeCascades) {
       for (const style of nodeCascade.styles) {
         this.#styleToNodeCascade.set(style, nodeCascade);
+        this.#styles.push(style);
+      }
+    }
+    if (fallbackCascade) {
+      for (const [style, nodeCascade] of fallbackCascade.#styleToNodeCascade) {
+        if (!this.#styles.includes(style)) {
+          this.#styleToNodeCascade.set(style, nodeCascade);
+        }
       }
     }
   }
@@ -1248,6 +1267,9 @@ class DOMInheritanceCascade {
         }
       }
     }
+    if (this.#fallbackCascade && (!nodeCascade.isHighlightPseudoCascade || property.name.startsWith('--'))) {
+      return this.#fallbackCascade.resolveProperty(property.name, property.ownerStyle);
+    }
     return null;
   }
 
@@ -1538,7 +1560,7 @@ class DOMInheritanceCascade {
   }
 
   styles(): CSSStyleDeclaration[] {
-    return Array.from(this.#styleToNodeCascade.keys());
+    return this.#styles;
   }
 
   propertyState(property: CSSProperty): PropertyState|null {
@@ -1610,6 +1632,20 @@ class DOMInheritanceCascade {
           rule.propertyName(),
           initialValue !== null ? {value: initialValue, declaration: new CSSValueSource(rule)} : null);
     }
+    if (this.#fallbackCascade) {
+      this.#fallbackCascade.ensureInitialized();
+      for (const [cascade, available] of this.#fallbackCascade.#availableCSSVariables) {
+        this.#availableCSSVariables.set(cascade, available);
+      }
+      for (const [cascade, computed] of this.#fallbackCascade.#computedCSSVariables) {
+        this.#computedCSSVariables.set(cascade, computed);
+      }
+      for (const [key, value] of this.#fallbackCascade.#availableCSSVariables.get(
+               this.#fallbackCascade.#nodeCascades[0]) ??
+           []) {
+        accumulatedCSSVariables.set(key, value);
+      }
+    }
     for (let i = this.#nodeCascades.length - 1; i >= 0; --i) {
       const nodeCascade = this.#nodeCascades[i];
       const variableNames = [];

package/front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -2,15 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as Root from '../../core/root/root.js';
 
 import {debugLog} from './debug.js';
 
-export const DELAY_BEFORE_SHOWING_RESPONSE_MS = 500;
-export const AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS = 200;
-
 /**
  * TODO(b/404796739): Remove these definitions of AgentOptions and RequestOptions and
  * use the existing ones which are used for AI assistance panel agents.
@@ -140,20 +136,9 @@ const console = {
 
 /**
  * The AiCodeCompletion class is responsible for fetching code completion suggestions
- * from the AIDA backend and displaying them in the text editor.
- *
- * 1. **Debouncing requests:** As the user types, we don't want to send a request
- *    for every keystroke. Instead, we use debouncing to schedule a request
- *    only after the user has paused typing for a short period
- *    (AIDA_REQUEST_THROTTLER_TIMEOUT_MS). This prevents spamming the backend with
- *    requests for intermediate typing states.
- *
- * 2. **Delaying suggestions:** When a suggestion is received from the AIDA
- *    backend, we don't show it immediately. There is a minimum delay
- *    (DELAY_BEFORE_SHOWING_RESPONSE_MS) from when the request was sent to when
- *    the suggestion is displayed.
+ * from the AIDA backend.
  */
-export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
+export class AiCodeCompletion {
   #stopSequences: string[];
   #renderingTimeout?: number;
   #aidaRequestCache?: CachedRequest;
@@ -166,7 +151,6 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
   readonly #serverSideLoggingEnabled: boolean;
 
   constructor(opts: AgentOptions, panel: ContextFlavor, callbacks?: Callbacks, stopSequences?: string[]) {
-    super();
     this.#aidaClient = opts.aidaClient;
     this.#serverSideLoggingEnabled = opts.serverSideLoggingEnabled ?? false;
     this.#panel = panel;
@@ -174,14 +158,6 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     this.#callbacks = callbacks;
   }
 
-  #debouncedRequestAidaSuggestion = Common.Debouncer.debounce(
-      (prefix: string, suffix: string, cursorPositionAtRequest: number,
-       inferenceLanguage?: Host.AidaClient.AidaInferenceLanguage) => {
-        void this.#requestAidaSuggestion(
-            this.#buildRequest(prefix, suffix, inferenceLanguage), cursorPositionAtRequest);
-      },
-      AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS);
-
   #buildRequest(
       prefix: string, suffix: string,
       inferenceLanguage: Host.AidaClient.AidaInferenceLanguage = Host.AidaClient.AidaInferenceLanguage.JAVASCRIPT,
@@ -246,125 +222,6 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     };
   }
 
-  #pickSampleFromResponse(response: Host.AidaClient.CompletionResponse): Host.AidaClient.GenerationSample|null {
-    if (!response.generatedSamples.length) {
-      return null;
-    }
-
-    // `currentHint` is the portion of a standard autocomplete suggestion that the user has not yet typed.
-    // For example, if the user types `document.queryS` and the autocomplete suggests `document.querySelector`,
-    // the `currentHint` is `elector`.
-    const currentHintInMenu = this.#callbacks?.getCompletionHint();
-    // TODO(ergunsh): We should not do this check here. Instead, the AI code suggestions should be provided
-    // as it is to the view plugin. The view plugin should choose which one to use based on the completion hint
-    // and selected completion.
-    if (!currentHintInMenu) {
-      return response.generatedSamples[0];
-    }
-
-    // TODO(ergunsh): This does not handle looking for `selectedCompletion`. The `currentHint` is `null`
-    // for the Sources panel case.
-    // Even though there is no match, we still return the first suggestion which will be displayed
-    // when the traditional autocomplete menu is closed.
-    return response.generatedSamples.find(sample => sample.generationString.startsWith(currentHintInMenu)) ??
-        response.generatedSamples[0];
-  }
-
-  async #generateSampleForRequest(request: Host.AidaClient.CompletionRequest, cursor: number): Promise<{
-    suggestionText: string,
-    fromCache: boolean,
-    citations: Host.AidaClient.Citation[],
-    rpcGlobalId?: Host.AidaClient.RpcGlobalId,
-    sampleId?: number,
-  }|null> {
-    const {response, fromCache} = await this.#completeCodeCached(request);
-    debugLog('At cursor position', cursor, {request, response, fromCache});
-    if (!response) {
-      return null;
-    }
-
-    const suggestionSample = this.#pickSampleFromResponse(response);
-    if (!suggestionSample) {
-      return null;
-    }
-
-    const shouldBlock =
-        suggestionSample.attributionMetadata?.attributionAction === Host.AidaClient.RecitationAction.BLOCK;
-    if (shouldBlock) {
-      return null;
-    }
-
-    const isRepetitive = this.#checkIfSuggestionRepeatsExistingText(suggestionSample.generationString, request);
-    if (isRepetitive) {
-      return null;
-    }
-
-    const suggestionText = this.#trimSuggestionOverlap(suggestionSample.generationString, request);
-    if (suggestionText.length === 0) {
-      return null;
-    }
-
-    return {
-      suggestionText,
-      sampleId: suggestionSample.sampleId,
-      fromCache,
-      citations: suggestionSample.attributionMetadata?.citations ?? [],
-      rpcGlobalId: response.metadata.rpcGlobalId,
-    };
-  }
-
-  async #requestAidaSuggestion(request: Host.AidaClient.CompletionRequest, cursorPositionAtRequest: number):
-      Promise<void> {
-    const startTime = performance.now();
-    this.dispatchEventToListeners(Events.REQUEST_TRIGGERED, {});
-    // Registering AiCodeCompletionRequestTriggered metric even if the request is served from cache
-    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionRequestTriggered);
-
-    try {
-      const sampleResponse = await this.#generateSampleForRequest(request, cursorPositionAtRequest);
-      if (!sampleResponse) {
-        this.dispatchEventToListeners(Events.RESPONSE_RECEIVED, {});
-        return;
-      }
-
-      const {
-        suggestionText,
-        sampleId,
-        fromCache,
-        citations,
-        rpcGlobalId,
-      } = sampleResponse;
-      const remainingDelay = Math.max(DELAY_BEFORE_SHOWING_RESPONSE_MS - (performance.now() - startTime), 0);
-      this.#renderingTimeout = window.setTimeout(() => {
-        const currentCursorPosition = this.#callbacks?.getSelectionHead();
-        if (currentCursorPosition !== cursorPositionAtRequest) {
-          this.dispatchEventToListeners(Events.RESPONSE_RECEIVED, {});
-          return;
-        }
-        this.#callbacks?.setAiAutoCompletion({
-          text: suggestionText,
-          from: cursorPositionAtRequest,
-          rpcGlobalId,
-          sampleId,
-          startTime,
-          onImpression: this.registerUserImpression.bind(this),
-          clearCachedRequest: this.clearCachedRequest.bind(this),
-        });
-
-        if (fromCache) {
-          Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionResponseServedFromCache);
-        }
-
-        debugLog('Suggestion dispatched to the editor', suggestionText, 'at cursor position', cursorPositionAtRequest);
-        this.dispatchEventToListeners(Events.RESPONSE_RECEIVED, {citations});
-      }, remainingDelay);
-    } catch (e) {
-      debugLog('Error while fetching code completion suggestions from AIDA', e);
-      this.dispatchEventToListeners(Events.RESPONSE_RECEIVED, {});
-      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionError);
-    }
-  }
-
   get #userTier(): string|undefined {
     return Root.Runtime.hostConfig.devToolsAiCodeCompletion?.userTier;
   }
@@ -379,30 +236,6 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     };
   }
 
-  /**
-   * Removes the end of a suggestion if it overlaps with the start of the suffix.
-   */
-  #trimSuggestionOverlap(generationString: string, request: Host.AidaClient.CompletionRequest): string {
-    const suffix = request.suffix;
-    if (!suffix) {
-      return generationString;
-    }
-
-    // Iterate from the longest possible overlap down to the shortest
-    for (let i = Math.min(generationString.length, suffix.length); i > 0; i--) {
-      const overlapCandidate = suffix.substring(0, i);
-      if (generationString.endsWith(overlapCandidate)) {
-        return generationString.slice(0, -i);
-      }
-    }
-    return generationString;
-  }
-
-  #checkIfSuggestionRepeatsExistingText(generationString: string, request: Host.AidaClient.CompletionRequest): boolean {
-    const {prefix, suffix} = request;
-    return Boolean(prefix.includes(generationString.trim()) || suffix?.includes(generationString.trim()));
-  }
-
   #checkCachedRequestForResponse(request: Host.AidaClient.CompletionRequest): Host.AidaClient.CompletionResponse|null {
     if (!this.#aidaRequestCache || this.#aidaRequestCache.request.suffix !== request.suffix ||
         JSON.stringify(this.#aidaRequestCache.request.options) !== JSON.stringify(request.options)) {
@@ -476,12 +309,6 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     this.#aidaRequestCache = undefined;
   }
 
-  onTextChanged(
-      prefix: string, suffix: string, cursorPositionAtRequest: number,
-      inferenceLanguage?: Host.AidaClient.AidaInferenceLanguage): void {
-    this.#debouncedRequestAidaSuggestion(prefix, suffix, cursorPositionAtRequest, inferenceLanguage);
-  }
-
   async completeCode(
       prefix: string, suffix: string, cursorPositionAtRequest: number,
       inferenceLanguage?: Host.AidaClient.AidaInferenceLanguage,
@@ -525,18 +352,3 @@ export const enum ContextFlavor {
   CONSOLE = 'console',  // generated code can contain console specific APIs like `$0`.
   SOURCES = 'sources',
 }
-
-export const enum Events {
-  RESPONSE_RECEIVED = 'ResponseReceived',
-  REQUEST_TRIGGERED = 'RequestTriggered',
-}
-
-export interface ResponseReceivedEvent {
-  citations?: Host.AidaClient.Citation[];
-}
-
-export interface EventTypes {
-  [Events.RESPONSE_RECEIVED]: ResponseReceivedEvent;
-  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-  [Events.REQUEST_TRIGGERED]: {};
-}

package/front_end/panels/ai_assistance/components/ChatInput.ts

@@ -134,6 +134,7 @@ export interface ViewInput {
   onTakeScreenshot: () => void;
   onRemoveImageInput: () => void;
   onImageUpload: (ev: Event) => void;
+  onImagePaste: (event: ClipboardEvent) => void;
 }
 
 export type ViewOutput = undefined;
@@ -287,6 +288,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
               wrap="hard"
               maxlength="10000"
               @keydown=${input.onTextAreaKeyDown}
+              @paste=${input.onImagePaste}
               @input=${(event: KeyboardEvent) => {
                 input.onTextInputChange((event.target as HTMLInputElement).value);
               }}
@@ -548,6 +550,25 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
     });
   }
 
+  #handleImagePaste = (event: ClipboardEvent): void => {
+    if (this.conversationType !== AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING) {
+      return;
+    }
+
+    const files = event.clipboardData?.files;
+    if (!files || files.length === 0) {
+      return;
+    }
+
+    const imageFile = Array.from(files).find(file => file.type.startsWith('image/'));
+    if (!imageFile) {
+      return;
+    }
+
+    event.preventDefault();
+    void this.#handleLoadImage(imageFile);
+  };
+
   async #handleLoadImage(file: File): Promise<void> {
     const showLoadingTimeout = setTimeout(() => {
       this.#imageInput = {isLoading: true};
@@ -631,6 +652,7 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
           textAreaRef: this.#textAreaRef,
           onContextClick: this.onContextClick,
           onInspectElementClick: this.onInspectElementClick,
+          onImagePaste: this.#handleImagePaste,
           onNewConversation: this.onNewConversation,
           onTextInputChange: () => {
             this.requestUpdate();

package/front_end/panels/common/AiCodeCompletionDisclaimer.ts

@@ -8,6 +8,7 @@ import '../../ui/components/tooltips/tooltips.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
+import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -26,13 +27,23 @@ const UIStringsNotTranslate = {
   /**
    * @description Text for tooltip shown on hovering over "Relevant Data" in the disclaimer text for AI code completion.
    */
-  tooltipDisclaimerTextForAiCodeCompletion:
+  tooltipDisclaimerTextForAiCodeCompletionInConsole:
       'To generate code suggestions, your console input and the history of your current console session are shared with Google. This data may be seen by human reviewers to improve this feature.',
   /**
    * @description Text for tooltip shown on hovering over "Relevant Data" in the disclaimer text for AI code completion.
    */
-  tooltipDisclaimerTextForAiCodeCompletionNoLogging:
-      'To generate code suggestions, your console input and the history of your current console session are shared with Google. This data will not be used to improve Google’s AI models.',
+  tooltipDisclaimerTextForAiCodeCompletionNoLoggingInConsole:
+      'To generate code suggestions, your console input and the history of your current console session are shared with Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time.',
+  /**
+   * @description Text for tooltip shown on hovering over "Relevant Data" in the disclaimer text for AI code generation in Sources panel.
+   */
+  tooltipDisclaimerTextForAiCodeCompletionInSources:
+      'To generate code suggestions, the contents of the currently open file are shared with Google. This data may be seen by human reviewers to improve this feature.',
+  /**
+   * @description Text for tooltip shown on hovering over "Relevant Data" in the disclaimer text for AI code generation in Sources panel.
+   */
+  tooltipDisclaimerTextForAiCodeCompletionNoLoggingInSources:
+      'To generate code suggestions, the contents of the currently open file are shared with Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time.',
   /**
    * Text for tooltip shown on hovering over spinner.
    */
@@ -49,12 +60,27 @@ const UIStringsNotTranslate = {
 
 const lockedString = i18n.i18n.lockedString;
 
+function getTooltipDisclaimerText(noLogging: boolean, panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor): string {
+  switch (panel) {
+    case AiCodeCompletion.AiCodeCompletion.ContextFlavor.CONSOLE:
+      return noLogging ?
+          lockedString(UIStringsNotTranslate.tooltipDisclaimerTextForAiCodeCompletionNoLoggingInConsole) :
+          lockedString(UIStringsNotTranslate.tooltipDisclaimerTextForAiCodeCompletionInConsole);
+    case AiCodeCompletion.AiCodeCompletion.ContextFlavor.SOURCES:
+      return noLogging ?
+          lockedString(UIStringsNotTranslate.tooltipDisclaimerTextForAiCodeCompletionNoLoggingInSources) :
+          lockedString(UIStringsNotTranslate.tooltipDisclaimerTextForAiCodeCompletionInSources);
+  }
+}
+
 export interface ViewInput {
   disclaimerTooltipId?: string;
   spinnerTooltipId?: string;
   noLogging: boolean;
   aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
   onManageInSettingsTooltipClick: () => void;
+  // TODO(b/472268298): Remove ContextFlavor explicitly and pass required values
+  panel?: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
 }
 
 export interface ViewOutput {
@@ -67,10 +93,11 @@ export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) =
 export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View =
     (input, output, target) => {
       if (input.aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE || !input.disclaimerTooltipId ||
-          !input.spinnerTooltipId) {
+          !input.spinnerTooltipId || !input.panel) {
         render(nothing, target);
         return;
       }
+      const tooltipDisclaimerText = getTooltipDisclaimerText(input.noLogging, input.panel);
       // clang-format off
   render(
     html`
@@ -118,7 +145,7 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View =
                 }
               })}>
             <div class="disclaimer-tooltip-container"><div class="tooltip-text">
-                ${input.noLogging ? lockedString(UIStringsNotTranslate.tooltipDisclaimerTextForAiCodeCompletionNoLogging) : lockedString(UIStringsNotTranslate.tooltipDisclaimerTextForAiCodeCompletion)}
+                ${tooltipDisclaimerText}
                 </div>
                 <span
                     tabIndex="0"
@@ -146,6 +173,7 @@ export class AiCodeCompletionDisclaimer extends UI.Widget.Widget {
   #loading = false;
   #loadingStartTime = 0;
   #spinnerLoadingTimeout: number|undefined;
+  #panel?: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
 
   #aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
   #boundOnAidaAvailabilityChange: () => Promise<void>;
@@ -196,6 +224,11 @@ export class AiCodeCompletionDisclaimer extends UI.Widget.Widget {
     }
   }
 
+  set panel(panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor) {
+    this.#panel = panel;
+    this.requestUpdate();
+  }
+
   async #onAidaAvailabilityChange(): Promise<void> {
     const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
     if (currentAidaAvailability !== this.#aidaAvailability) {
@@ -217,6 +250,7 @@ export class AiCodeCompletionDisclaimer extends UI.Widget.Widget {
           noLogging: this.#noLogging,
           aidaAvailability: this.#aidaAvailability,
           onManageInSettingsTooltipClick: this.#onManageInSettingsTooltipClick.bind(this),
+          panel: this.#panel,
         },
         this.#viewOutput, this.contentElement);
   }

package/front_end/panels/common/AiCodeCompletionSummaryToolbar.ts

@@ -7,6 +7,7 @@ import '../../ui/components/tooltips/tooltips.js';
 
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -32,6 +33,7 @@ export interface AiCodeCompletionSummaryToolbarProps {
   disclaimerTooltipId?: string;
   spinnerTooltipId?: string;
   hasTopBorder?: boolean;
+  panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
 }
 
 export interface ViewInput {
@@ -42,6 +44,7 @@ export interface ViewInput {
   loading: boolean;
   hasTopBorder: boolean;
   aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
+  panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
 }
 
 export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
@@ -65,6 +68,7 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, _output, target) => {
       disclaimerTooltipId: input.disclaimerTooltipId,
       spinnerTooltipId: input.spinnerTooltipId,
       loading: input.loading,
+      panel: input.panel,
     })} class="disclaimer-widget"></devtools-widget>` : nothing;
 
   const recitationNotice = input.citations && input.citations.size > 0 ?
@@ -110,6 +114,7 @@ export class AiCodeCompletionSummaryToolbar extends UI.Widget.Widget {
   #citations = new Set<string>();
   #loading = false;
   #hasTopBorder = false;
+  #panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
 
   #aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
   #boundOnAidaAvailabilityChange: () => Promise<void>;
@@ -120,6 +125,7 @@ export class AiCodeCompletionSummaryToolbar extends UI.Widget.Widget {
     this.#spinnerTooltipId = props.spinnerTooltipId;
     this.#citationsTooltipId = props.citationsTooltipId;
     this.#hasTopBorder = props.hasTopBorder ?? false;
+    this.#panel = props.panel;
     this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
     this.#view = view ?? DEFAULT_SUMMARY_TOOLBAR_VIEW;
     this.requestUpdate();
@@ -158,6 +164,7 @@ export class AiCodeCompletionSummaryToolbar extends UI.Widget.Widget {
           loading: this.#loading,
           hasTopBorder: this.#hasTopBorder,
           aidaAvailability: this.#aidaAvailability,
+          panel: this.#panel,
         },
         undefined, this.contentElement);
   }

package/front_end/panels/common/AiCodeGenerationTeaser.ts

@@ -24,13 +24,21 @@ const UIStringsNotTranslate = {
    */
   cmdItoGenerateCode: 'Cmd+I to generate code',
   /**
-   * Text for teaser when generating suggestion.
+   * @description Text for teaser when generating suggestion.
    */
   generating: 'Generating... (esc to cancel)',
   /**
-   * Text for teaser for discoverability.
+   * @description Text for teaser for discoverability.
    */
   writeACommentToGenerateCode: 'Write a comment to generate code',
+  /**
+   * @description Text for teaser when suggestion has been generated.
+   */
+  tab: 'tab',
+  /**
+   * @description Text for teaser when suggestion has been generated.
+   */
+  toAccept: 'to accept',
   /**
    * @description Text for tooltip shown on hovering over "Relevant Data" in the disclaimer text for AI code generation in Console panel.
    */
@@ -68,6 +76,7 @@ export enum AiCodeGenerationTeaserDisplayState {
   TRIGGER = 'trigger',
   DISCOVERY = 'discovery',
   LOADING = 'loading',
+  GENERATED = 'generated',
 }
 
 function getTooltipDisclaimerText(noLogging: boolean, panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor): string {
@@ -94,6 +103,7 @@ export interface ViewInput {
 
 export interface ViewOutput {
   hideTooltip?: () => void;
+  setTimerText?: (text: string) => void;
 }
 
 export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
@@ -165,7 +175,27 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     }
 
     case AiCodeGenerationTeaserDisplayState.LOADING: {
-      teaserLabel = html`${lockedString(UIStringsNotTranslate.generating)}`;
+      // clang-format off
+      teaserLabel = html`
+        <span class="ai-code-generation-spinner"></span>&nbsp;${lockedString(UIStringsNotTranslate.generating)}&nbsp;
+        <span class="ai-code-generation-timer" ${Directives.ref(el => {
+          if (el) {
+            output.setTimerText = (text: string) => {
+              el.textContent = text;
+            };
+          }
+        })}></span>`;
+      // clang-format on
+      break;
+    }
+
+    case AiCodeGenerationTeaserDisplayState.GENERATED: {
+      // clang-format off
+      teaserLabel = html`<div class="ai-code-generation-teaser-generated">
+          <span>${lockedString(UIStringsNotTranslate.tab)}</span>
+          &nbsp;${lockedString(UIStringsNotTranslate.toAccept)}
+        </div>`;
+      // clang-format on
       break;
     }
   }
@@ -192,6 +222,8 @@ export class AiCodeGenerationTeaser extends UI.Widget.Widget {
   #disclaimerTooltipId?: string;
   #noLogging: boolean;  // Whether the enterprise setting is `ALLOW_WITHOUT_LOGGING` or not.
   #panel?: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
+  #timerIntervalId?: number;
+  #loadStartTime?: number;
 
   constructor(view?: View) {
     super();
@@ -214,6 +246,11 @@ export class AiCodeGenerationTeaser extends UI.Widget.Widget {
         this.#viewOutput, this.contentElement);
   }
 
+  override willHide(): void {
+    super.willHide();
+    this.#stopLoadingAnimation();
+  }
+
   get displayState(): AiCodeGenerationTeaserDisplayState {
     return this.#displayState;
   }
@@ -224,6 +261,36 @@ export class AiCodeGenerationTeaser extends UI.Widget.Widget {
     }
     this.#displayState = displayState;
     this.requestUpdate();
+    if (this.#displayState === AiCodeGenerationTeaserDisplayState.LOADING) {
+      // wait update to complete so that setTimerText has been set properly
+      void this.updateComplete.then(() => {
+        void this.#startLoadingAnimation();
+      });
+    } else if (this.#loadStartTime) {
+      this.#stopLoadingAnimation();
+    }
+  }
+
+  #startLoadingAnimation(): void {
+    this.#stopLoadingAnimation();
+    this.#loadStartTime = performance.now();
+
+    this.#viewOutput.setTimerText?.('(0s)');
+
+    this.#timerIntervalId = window.setInterval(() => {
+      if (this.#loadStartTime) {
+        const elapsedSeconds = Math.floor((performance.now() - this.#loadStartTime) / 1000);
+        this.#viewOutput.setTimerText?.(`(${elapsedSeconds}s)`);
+      }
+    }, 1000);
+  }
+
+  #stopLoadingAnimation(): void {
+    if (this.#timerIntervalId) {
+      clearInterval(this.#timerIntervalId);
+      this.#timerIntervalId = undefined;
+    }
+    this.#loadStartTime = undefined;
   }
 
   set disclaimerTooltipId(disclaimerTooltipId: string) {

package/front_end/panels/common/aiCodeGenerationTeaser.css

@@ -16,6 +16,18 @@
             align-items: center;
         }
 
+        .ai-code-generation-teaser-generated {
+            display: inline-flex;
+            gap: var(--sys-size-2);
+            color: var(--sys-color-primary);
+
+            span {
+                border: var(--sys-size-1) solid var(--sys-color-primary);
+                border-radius: var(--sys-shape-corner-extra-small);
+                padding: 0 var(--sys-size-3);
+            }
+        }
+
         .new-badge {
             font-style: normal;
             display: inline-block;
@@ -44,5 +56,23 @@
                 }
             }
         }
+
+        .ai-code-generation-spinner::before {
+            content: "⠋";
+            animation: teaser-spinner-animation 1s linear infinite;
+        }
+    }
+
+    @keyframes teaser-spinner-animation {
+        0% { content: "⠋"; }
+        10% { content: "⠙"; }
+        20% { content: "⠹"; }
+        30% { content: "⠸"; }
+        40% { content: "⠼"; }
+        50% { content: "⠴"; }
+        60% { content: "⠦"; }
+        70% { content: "⠧"; }
+        80% { content: "⠇"; }
+        90% { content: "⠏"; }
     }
 }

package/front_end/panels/console/ConsoleView.ts

@@ -649,7 +649,8 @@ export class ConsoleView extends UI.Widget.VBox implements
     this.aiCodeCompletionSummaryToolbar = new AiCodeCompletionSummaryToolbar({
       citationsTooltipId: CITATIONS_TOOLTIP_ID,
       disclaimerTooltipId: DISCLAIMER_TOOLTIP_ID,
-      spinnerTooltipId: SPINNER_TOOLTIP_ID
+      spinnerTooltipId: SPINNER_TOOLTIP_ID,
+      panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.CONSOLE,
     });
     this.aiCodeCompletionSummaryToolbarContainer =
         this.element.createChild('div', 'ai-code-completion-summary-toolbar-container');

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -102,6 +102,7 @@ export class AiCodeCompletionPlugin extends Plugin {
     this.#aiCodeCompletionDisclaimer = new PanelCommon.AiCodeCompletionDisclaimer();
     this.#aiCodeCompletionDisclaimer.disclaimerTooltipId = DISCLAIMER_TOOLTIP_ID;
     this.#aiCodeCompletionDisclaimer.spinnerTooltipId = SPINNER_TOOLTIP_ID;
+    this.#aiCodeCompletionDisclaimer.panel = AiCodeCompletion.AiCodeCompletion.ContextFlavor.SOURCES;
     this.#aiCodeCompletionDisclaimer.show(this.#aiCodeCompletionDisclaimerContainer, undefined, true);
   }
 
@@ -109,8 +110,11 @@ export class AiCodeCompletionPlugin extends Plugin {
     if (this.#aiCodeCompletionCitationsToolbar) {
       return;
     }
-    this.#aiCodeCompletionCitationsToolbar =
-        new PanelCommon.AiCodeCompletionSummaryToolbar({citationsTooltipId: CITATIONS_TOOLTIP_ID, hasTopBorder: true});
+    this.#aiCodeCompletionCitationsToolbar = new PanelCommon.AiCodeCompletionSummaryToolbar({
+      citationsTooltipId: CITATIONS_TOOLTIP_ID,
+      hasTopBorder: true,
+      panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.SOURCES
+    });
     this.#aiCodeCompletionCitationsToolbar.show(this.#aiCodeCompletionCitationsToolbarContainer, undefined, true);
   }
 

package/front_end/ui/components/text_editor/AiCodeCompletionProvider.ts

@@ -122,21 +122,25 @@ export class AiCodeCompletionProvider {
     this.#aiCodeCompletion?.clearCachedRequest();
   }
 
-  // TODO(b/445394511): Update setup and cleanup method so that config callbacks are not
-  // called twice.
   #setupAiCodeCompletion(): void {
     if (!this.#editor || !this.#aiCodeCompletionConfig) {
       return;
     }
-    if (!this.#aiCodeCompletion) {
-      this.#aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
-          {aidaClient: this.#aidaClient}, this.#aiCodeCompletionConfig.panel, undefined,
-          this.#aiCodeCompletionConfig.completionContext.stopSequences);
+    if (this.#aiCodeCompletion) {
+      // early return as this means that code completion was previously setup
+      return;
     }
+    this.#aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
+        {aidaClient: this.#aidaClient}, this.#aiCodeCompletionConfig.panel, undefined,
+        this.#aiCodeCompletionConfig.completionContext.stopSequences);
     this.#aiCodeCompletionConfig.onFeatureEnabled();
   }
 
   #cleanupAiCodeCompletion(): void {
+    if (!this.#aiCodeCompletion) {
+      // early return as this means there is no code completion to clean up
+      return;
+    }
     if (this.#suggestionRenderingTimeout) {
       clearTimeout(this.#suggestionRenderingTimeout);
       this.#suggestionRenderingTimeout = undefined;
@@ -208,6 +212,21 @@ export class AiCodeCompletionProvider {
     this.#editor?.editor.dispatch({effects: this.#teaserCompartment.reconfigure([])});
   }
 
+  /**
+   * This method is responsible for fetching code completion suggestions and
+   * displaying them in the text editor.
+   *
+   * 1. **Debouncing requests:** As the user types, we don't want to send a request
+   *    for every keystroke. Instead, we use debouncing to schedule a request
+   *    only after the user has paused typing for a short period
+   *    (AIDA_REQUEST_THROTTLER_TIMEOUT_MS). This prevents spamming the backend with
+   *    requests for intermediate typing states.
+   *
+   * 2. **Delaying suggestions:** When a suggestion is received from the AIDA
+   *    backend, we don't show it immediately. There is a minimum delay
+   *    (DELAY_BEFORE_SHOWING_RESPONSE_MS) from when the request was sent to when
+   *    the suggestion is displayed.
+   */
   #triggerAiCodeCompletion(update: CodeMirror.ViewUpdate): void {
     if (!update.docChanged || !this.#editor || !this.#aiCodeCompletion) {
       return;
@@ -287,8 +306,7 @@ export class AiCodeCompletionProvider {
         citations,
         rpcGlobalId,
       } = sampleResponse;
-      const remainingDelay = Math.max(
-          AiCodeCompletion.AiCodeCompletion.DELAY_BEFORE_SHOWING_RESPONSE_MS - (performance.now() - startTime), 0);
+      const remainingDelay = Math.max(DELAY_BEFORE_SHOWING_RESPONSE_MS - (performance.now() - startTime), 0);
       this.#suggestionRenderingTimeout = window.setTimeout(() => {
         const currentCursorPosition = this.#editor?.editor.state.selection.main.head;
         if (currentCursorPosition !== cursorPositionAtRequest) {

package/front_end/ui/components/text_editor/AiCodeGenerationParser.ts

@@ -0,0 +1,77 @@
+// 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.
+
+import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
+
+const LINE_COMMENT_PATTERN = /^(?:\/\/|#)\s*/;
+const BLOCK_COMMENT_START_PATTERN = /^\/\*+\s*/;
+const BLOCK_COMMENT_END_PATTERN = /\s*\*+\/$/;
+const BLOCK_COMMENT_LINE_PREFIX_PATTERN = /^\s*\*\s?/;
+
+function findLastNonWhitespacePos(state: CodeMirror.EditorState, cursorPosition: number): number {
+  const line = state.doc.lineAt(cursorPosition);
+  const textBefore = line.text.substring(0, cursorPosition - line.from);
+  const effectiveEnd = line.from + textBefore.trimEnd().length;
+  return effectiveEnd;
+}
+
+function resolveCommentNode(state: CodeMirror.EditorState, cursorPosition: number): CodeMirror.SyntaxNode|undefined {
+  const tree = CodeMirror.syntaxTree(state);
+  const lookupPos = findLastNonWhitespacePos(state, cursorPosition);
+  // Find the innermost syntax node at the last non-whitespace character position.
+  // The bias of -1 makes it check the character to the left of the position.
+  const node = tree.resolveInner(lookupPos, -1);
+  const nodeType = node.type.name;
+  // Check if the node type is a comment AND the cursor is within the node's range.
+  if (nodeType.includes('Comment') && cursorPosition >= node.to) {
+    if (!nodeType.includes('BlockComment')) {
+      return node;
+    }
+    // An unclosed block comment can result in the parser inserting an error.
+    let hasInternalError = false;
+    tree.iterate({
+      from: node.from,
+      to: node.to,
+      enter: n => {
+        if (n.type.isError) {
+          hasInternalError = true;
+          return false;
+        }
+        return true;
+      },
+    });
+    return hasInternalError ? undefined : node;
+  }
+  return;
+}
+
+function extractBlockComment(rawText: string): string|undefined {
+  // Remove /* and */, whitespace, and common leading asterisks on new lines
+  let cleaned = rawText.replace(BLOCK_COMMENT_START_PATTERN, '').replace(BLOCK_COMMENT_END_PATTERN, '');
+  // Remove leading " * " from multi-line block comments
+  cleaned = cleaned.split('\n').map(line => line.replace(BLOCK_COMMENT_LINE_PREFIX_PATTERN, '')).join('\n').trim();
+  return cleaned;
+}
+
+function extractLineComment(rawText: string): string {
+  return rawText.replace(LINE_COMMENT_PATTERN, '').trim();
+}
+
+export class AiCodeGenerationParser {
+  static extractCommentText(state: CodeMirror.EditorState, cursorPosition: number): string|undefined {
+    const node = resolveCommentNode(state, cursorPosition);
+    if (!node) {
+      return;
+    }
+    const nodeType = node.type.name;
+    const rawText = state.doc.sliceString(node.from, node.to);
+    if (nodeType.includes('LineComment')) {
+      return extractLineComment(rawText);
+    }
+    if (nodeType.includes('BlockComment')) {
+      return extractBlockComment(rawText);
+    }
+    return rawText;
+  }
+}

package/front_end/ui/components/text_editor/AiCodeGenerationProvider.ts

@@ -13,6 +13,7 @@ import * as UI from '../../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 
 import {AiCodeCompletionTeaserPlaceholder} from './AiCodeCompletionTeaserPlaceholder.js';
+import {AiCodeGenerationParser} from './AiCodeGenerationParser.js';
 import {
   acceptAiAutoCompleteSuggestion,
   aiAutoCompleteSuggestion,
@@ -79,11 +80,11 @@ export class AiCodeGenerationProvider {
   extension(): CodeMirror.Extension[] {
     return [
       CodeMirror.EditorView.updateListener.of(update => this.#activateTeaser(update)),
-      CodeMirror.EditorView.updateListener.of(update => this.#abortGenerationDuringUpdate(update)),
+      CodeMirror.EditorView.updateListener.of(update => this.#abortOrDismissGenerationDuringUpdate(update)),
       aiAutoCompleteSuggestion,
       aiAutoCompleteSuggestionState,
       aiCodeGenerationTeaserModeState,
-      this.#generationTeaserCompartment.of([]),
+      CodeMirror.Prec.highest(this.#generationTeaserCompartment.of([])),
       CodeMirror.Prec.highest(CodeMirror.keymap.of(this.#editorKeymap())),
     ];
   }
@@ -142,9 +143,7 @@ export class AiCodeGenerationProvider {
             return false;
           }
           if (hasActiveAiSuggestion(this.#editor.state)) {
-            this.#editor.dispatch({
-              effects: setAiAutoCompleteSuggestion.of(null),
-            });
+            this.#dismissTeaserAndSuggestion();
             return true;
           }
           const generationTeaserIsLoading = this.#generationTeaser.displayState ===
@@ -152,7 +151,7 @@ export class AiCodeGenerationProvider {
           if (this.#generationTeaser.isShowing() && generationTeaserIsLoading) {
             this.#controller.abort();
             this.#controller = new AbortController();
-            this.#dismissTeaser();
+            this.#dismissTeaserAndSuggestion();
             return true;
           }
           return false;
@@ -194,9 +193,14 @@ export class AiCodeGenerationProvider {
     ];
   }
 
-  #dismissTeaser(): void {
+  #dismissTeaserAndSuggestion(): void {
     this.#generationTeaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.TRIGGER;
-    this.#editor?.dispatch({effects: setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.DISMISSED)});
+    this.#editor?.dispatch({
+      effects: [
+        setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.DISMISSED),
+        setAiAutoCompleteSuggestion.of(null),
+      ]
+    });
   }
 
   #activateTeaser(update: CodeMirror.ViewUpdate): void {
@@ -211,26 +215,35 @@ export class AiCodeGenerationProvider {
   }
 
   /**
-   * Monitors editor changes to cancel an ongoing AI generation.
-   * We abort the request and dismiss the teaser if the user modifies the
-   * document or moves their cursor/selection. These actions indicate the user
-   * is no longer focused on the current generation point or has manually
-   * resumed editing, making the pending suggestion irrelevant.
+   * Monitors editor changes to cancel an ongoing AI generation or dismiss one
+   * if it already exists.
+   * We abort the request (or dismiss suggestion) and dismiss the teaser if the
+   * user modifies the document or moves their cursor/selection. These actions
+   * indicate the user is no longer focused on the current generation point or
+   * has manually resumed editing, making the suggestion irrelevant.
    */
-  #abortGenerationDuringUpdate(update: CodeMirror.ViewUpdate): void {
+  #abortOrDismissGenerationDuringUpdate(update: CodeMirror.ViewUpdate): void {
     if (!update.docChanged && update.state.selection.main.head === update.startState.selection.main.head) {
       return;
     }
     const currentTeaserMode = update.state.field(aiCodeGenerationTeaserModeState);
-    const generationTeaserIsLoading = this.#generationTeaser.displayState ===
-        PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING;
-    // Generation should be in progress
-    if (currentTeaserMode === AiCodeGenerationTeaserMode.DISMISSED || !generationTeaserIsLoading) {
+    if (currentTeaserMode === AiCodeGenerationTeaserMode.DISMISSED) {
+      return;
+    }
+    if (this.#generationTeaser.displayState ===
+        PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING) {
+      this.#controller.abort();
+      this.#controller = new AbortController();
+      this.#dismissTeaserAndSuggestion();
+      return;
+    }
+    if (this.#generationTeaser.displayState ===
+        PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.GENERATED) {
+      update.view.dispatch({effects: setAiAutoCompleteSuggestion.of(null)});
+      this.#generationTeaser.displayState =
+          PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.TRIGGER;
       return;
     }
-    this.#controller.abort();
-    this.#controller = new AbortController();
-    this.#dismissTeaser();
   }
 
   async #triggerAiCodeGeneration(options?: {signal?: AbortSignal}): Promise<void> {
@@ -240,9 +253,8 @@ export class AiCodeGenerationProvider {
 
     this.#generationTeaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING;
     const cursor = this.#editor.state.selection.main.head;
-    // TODO(b/445899453): Detect all types of comments
-    const query = this.#editor.state.doc.lineAt(cursor).text;
-    if (query.trim().length === 0) {
+    const query = AiCodeGenerationParser.extractCommentText(this.#editor.state, cursor);
+    if (!query || query.trim().length === 0) {
       return;
     }
 
@@ -256,7 +268,7 @@ export class AiCodeGenerationProvider {
           this.#aiCodeGenerationConfig?.generationContext.inferenceLanguage, options);
 
       if (this.#generationTeaser) {
-        this.#dismissTeaser();
+        this.#dismissTeaserAndSuggestion();
       }
 
       if (!generationResponse || generationResponse.samples.length === 0) {
@@ -275,19 +287,25 @@ export class AiCodeGenerationProvider {
       const suggestionText = matchArray ? matchArray[1].trim() : topSample.generationString;
 
       this.#editor.dispatch({
-        effects: setAiAutoCompleteSuggestion.of({
-          text: '\n' + suggestionText,
-          from: cursor,
-          rpcGlobalId: generationResponse.metadata.rpcGlobalId,
-          sampleId: topSample.sampleId,
-          startTime,
-          onImpression: this.#aiCodeGeneration?.registerUserImpression.bind(this.#aiCodeGeneration),
-        })
+        effects: [
+          setAiAutoCompleteSuggestion.of({
+            text: '\n' + suggestionText,
+            from: cursor,
+            rpcGlobalId: generationResponse.metadata.rpcGlobalId,
+            sampleId: topSample.sampleId,
+            startTime,
+            onImpression: this.#aiCodeGeneration?.registerUserImpression.bind(this.#aiCodeGeneration),
+          }),
+          setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.ACTIVE)
+        ]
       });
+      this.#generationTeaser.displayState =
+          PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.GENERATED;
 
       AiCodeGeneration.debugLog('Suggestion dispatched to the editor', suggestionText);
       const citations = topSample.attributionMetadata?.citations ?? [];
       this.#aiCodeGenerationConfig?.onResponseReceived(citations);
+      return;
     } catch (e) {
       AiCodeGeneration.debugLog('Error while fetching code generation suggestions from AIDA', e);
       this.#aiCodeGenerationConfig?.onResponseReceived([]);
@@ -295,7 +313,7 @@ export class AiCodeGenerationProvider {
     }
 
     if (this.#generationTeaser) {
-      this.#dismissTeaser();
+      this.#dismissTeaserAndSuggestion();
     }
   }
 }
@@ -327,8 +345,7 @@ function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTea
       const line = this.#view.state.doc.lineAt(cursorPosition);
 
       const isEmptyLine = line.length === 0;
-      // TODO(b/445899453): Detect all types of comments
-      const isComment = line.text.startsWith('//');
+      const isComment = Boolean(AiCodeGenerationParser.extractCommentText(this.#view.state, cursorPosition));
       const isCursorAtEndOfLine = cursorPosition >= line.to;
 
       if ((isEmptyLine) || (isComment && isCursorAtEndOfLine)) {
@@ -341,9 +358,10 @@ function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTea
     }
 
     #updateTeaserState(state: CodeMirror.EditorState): void {
-      // Only handle non loading states, as updates during generation are handled by
-      // #abortGenerationDuringUpdate in AiCodeGenerationProvider
-      if (teaser.displayState === PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING) {
+      // Only handle non loading and non generated states, as updates during and after generation are handled by
+      // #abortOrDismissGenerationDuringUpdate in AiCodeGenerationProvider
+      if (teaser.displayState === PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING ||
+          teaser.displayState === PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.GENERATED) {
         return;
       }
       const cursorPosition = state.selection.main.head;

package/front_end/ui/components/text_editor/text_editor.ts

@@ -4,6 +4,7 @@
 
 export * as AiCodeCompletionProvider from './AiCodeCompletionProvider.js';
 export * as AiCodeCompletionTeaserPlaceholder from './AiCodeCompletionTeaserPlaceholder.js';
+export * as AiCodeGenerationParser from './AiCodeGenerationParser.js';
 export * as AiCodeGenerationProvider from './AiCodeGenerationProvider.js';
 export * as AutocompleteHistory from './AutocompleteHistory.js';
 export * as Config from './config.js';

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1563104"
+  "version": "1.0.1563377"
 }