chrome-devtools-frontend 1.0.1510848 → 1.0.1512349

package/front_end/models/ai_assistance/data_formatters/UnitFormatters.ts

@@ -0,0 +1,151 @@
+// 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.
+
+/**
+ * This module contains unit formatters that are only to be used within
+ * the AI models because they do not account for locales other than en-US.
+ */
+const defaultTimeFormatterOptions: Intl.NumberFormatOptions = {
+  style: 'unit',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+} as const;
+
+const defaultByteFormatterOptions: Intl.NumberFormatOptions = {
+  style: 'unit',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+} as const;
+
+const timeFormatters = {
+  milli: new Intl.NumberFormat('en-US', {
+    ...defaultTimeFormatterOptions,
+    unit: 'millisecond',
+  }),
+  second: new Intl.NumberFormat('en-US', {
+    ...defaultTimeFormatterOptions,
+    unit: 'second',
+  }),
+  micro: new Intl.NumberFormat('en-US', {
+    ...defaultTimeFormatterOptions,
+    unit: 'microsecond',
+  }),
+} as const;
+
+const byteFormatters = {
+  bytes: new Intl.NumberFormat('en-US', {
+    ...defaultByteFormatterOptions,
+    // Don't need as much precision on bytes.
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+    unit: 'byte',
+  }),
+  kilobytes: new Intl.NumberFormat('en-US', {
+    ...defaultByteFormatterOptions,
+    unit: 'kilobyte',
+  }),
+  megabytes: new Intl.NumberFormat('en-US', {
+    ...defaultByteFormatterOptions,
+    unit: 'megabyte',
+  }),
+} as const;
+
+function numberIsTooLarge(x: number): boolean {
+  return !Number.isFinite(x) || x === Number.MAX_VALUE;
+}
+
+export function seconds(x: number): string {
+  if (numberIsTooLarge(x)) {
+    return '-';
+  }
+  if (x === 0) {
+    return formatAndEnsureSpace(timeFormatters.second, x);
+  }
+
+  const asMilli = x * 1_000;
+
+  if (asMilli < 1) {
+    return micros(x * 1_000_000);
+  }
+
+  if (asMilli < 1_000) {
+    return millis(asMilli);
+  }
+  return formatAndEnsureSpace(timeFormatters.second, x);
+}
+
+export function millis(x: number): string {
+  if (numberIsTooLarge(x)) {
+    return '-';
+  }
+  return formatAndEnsureSpace(timeFormatters.milli, x);
+}
+
+export function micros(x: number): string {
+  if (numberIsTooLarge(x)) {
+    return '-';
+  }
+
+  if (x < 100) {
+    return formatAndEnsureSpace(timeFormatters.micro, x);
+  }
+
+  const asMilli = x / 1_000;
+  return millis(asMilli);
+}
+
+export function bytes(x: number): string {
+  if (x < 1_000) {
+    return formatAndEnsureSpace(byteFormatters.bytes, x);
+  }
+  const kilobytes = x / 1_000;
+  if (kilobytes < 1_000) {
+    return formatAndEnsureSpace(byteFormatters.kilobytes, kilobytes);
+  }
+
+  const megabytes = kilobytes / 1_000;
+  return formatAndEnsureSpace(byteFormatters.megabytes, megabytes);
+}
+
+/**
+ * When using 'narrow' unitDisplay, many locales exclude the space between the literal and the unit.
+ * We don't like that, so when there is no space literal we inject the provided separator manually.
+ */
+function formatAndEnsureSpace(formatter: Intl.NumberFormat, value: number, separator = '\xA0'): string {
+  const parts = formatter.formatToParts(value);
+
+  let hasSpace = false;
+  for (const part of parts) {
+    if (part.type === 'literal') {
+      if (part.value === ' ') {
+        hasSpace = true;
+        part.value = separator;
+      } else if (part.value === separator) {
+        hasSpace = true;
+      }
+    }
+  }
+
+  if (hasSpace) {
+    return parts.map(part => part.value).join('');
+  }
+
+  const unitIndex = parts.findIndex(part => part.type === 'unit');
+
+  // Unexpected for there to be no unit, but just in case, handle that.
+  if (unitIndex === -1) {
+    return parts.map(part => part.value).join('');
+  }
+
+  // For locales where the unit comes first (sw), the space has to come after the unit.
+  if (unitIndex === 0) {
+    return parts[0].value + separator + parts.slice(1).map(part => part.value).join('');
+  }
+
+  // Otherwise, it comes before.
+  return parts.slice(0, unitIndex).map(part => part.value).join('') + separator +
+      parts.slice(unitIndex).map(part => part.value).join('');
+}

package/front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -377,6 +377,9 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
       clearTimeout(this.#renderingTimeout);
       this.#renderingTimeout = undefined;
     }
+    this.#editor.dispatch({
+      effects: TextEditor.Config.setAiAutoCompleteSuggestion.of(null),
+    });
   }
 }
 

package/front_end/models/badges/Badge.ts

@@ -6,29 +6,32 @@ import * as Common from '../../core/common/common.js';
 
 export enum BadgeAction {
   CSS_RULE_MODIFIED = 'css-rule-modified',
+  DOM_ELEMENT_OR_ATTRIBUTE_EDITED = 'dom-element-or-attribute-edited',
+  MODERN_DOM_BADGE_CLICKED = 'modern-dom-badge-clicked',
   PERFORMANCE_INSIGHT_CLICKED = 'performance-insight-clicked',
 }
 
 export type BadgeActionEvents = Record<BadgeAction, void>;
 
 export interface BadgeContext {
-  dispatchBadgeTriggeredEvent: (badge: Badge) => void;
+  onTriggerBadge: (badge: Badge) => void;
   badgeActionEventTarget: Common.ObjectWrapper.ObjectWrapper<BadgeActionEvents>;
 }
 
 export abstract class Badge {
-  #dispatchBadgeTriggeredEvent: (badge: Badge) => void;
+  #onTriggerBadge: (badge: Badge) => void;
   #badgeActionEventTarget: Common.ObjectWrapper.ObjectWrapper<BadgeActionEvents>;
   #eventListeners: Common.EventTarget.EventDescriptor[] = [];
   #triggeredBefore = false;
 
   abstract readonly name: string;
   abstract readonly title: string;
+  abstract readonly imageUri: string;
   abstract readonly interestedActions: readonly BadgeAction[];
   readonly isStarterBadge: boolean = false;
 
   constructor(context: BadgeContext) {
-    this.#dispatchBadgeTriggeredEvent = context.dispatchBadgeTriggeredEvent;
+    this.#onTriggerBadge = context.onTriggerBadge;
     this.#badgeActionEventTarget = context.badgeActionEventTarget;
   }
 
@@ -40,7 +43,7 @@ export abstract class Badge {
 
     this.#triggeredBefore = true;
     this.deactivate();
-    this.#dispatchBadgeTriggeredEvent(this);
+    this.#onTriggerBadge(this);
   }
 
   activate(): void {

package/front_end/models/badges/DOMDetectiveBadge.ts

@@ -0,0 +1,20 @@
+// 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 {Badge, BadgeAction} from './Badge.js';
+
+const DOM_DETECTIVE_BADGE_IMAGE_URI = new URL('../../Images/gdp-logo-standalone.svg', import.meta.url).toString();
+export class DOMDetectiveBadge extends Badge {
+  override readonly name = 'awards/dom-detective-badge';
+  override readonly title = 'DOM Detective';
+  override readonly imageUri = DOM_DETECTIVE_BADGE_IMAGE_URI;
+
+  override readonly interestedActions = [
+    BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED,
+  ] as const;
+
+  handleAction(_action: BadgeAction): void {
+    this.trigger();
+  }
+}

package/front_end/models/badges/SpeedsterBadge.ts

@@ -4,10 +4,13 @@
 
 import {Badge, BadgeAction} from './Badge.js';
 
+const SPEEDSTER_BADGE_URI = new URL('../../Images/gdp-logo-standalone.svg', import.meta.url).toString();
 export class SpeedsterBadge extends Badge {
-  override readonly name = 'awards/speedster';
+  // TODO(ergunsh): Update the name to be the actual badge for DevTools.
+  override readonly name = 'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Flegacy%2Ftest';
   override readonly title = 'Speedster';
   override readonly interestedActions = [BadgeAction.PERFORMANCE_INSIGHT_CLICKED] as const;
+  override readonly imageUri = SPEEDSTER_BADGE_URI;
 
   handleAction(_action: BadgeAction): void {
     this.trigger();

package/front_end/models/badges/StarterBadge.ts

@@ -4,14 +4,18 @@
 
 import {Badge, BadgeAction} from './Badge.js';
 
+const STARTER_BADGE_IMAGE_URI = new URL('../../Images/gdp-logo-standalone.svg', import.meta.url).toString();
 export class StarterBadge extends Badge {
   override readonly isStarterBadge = true;
-  override readonly name = 'awards/chrome-devtools-user';
+  // TODO(ergunsh): Update the name to be the actual badge for DevTools.
+  override readonly name = 'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Fprofile%2Fcreated-profile';
   override readonly title = 'Chrome DevTools User';
+  override readonly imageUri = STARTER_BADGE_IMAGE_URI;
 
   // TODO(ergunsh): Add remaining non-trivial event definitions
   override readonly interestedActions = [
     BadgeAction.CSS_RULE_MODIFIED,
+    BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED,
   ] as const;
 
   handleAction(_action: BadgeAction): void {

package/front_end/models/badges/UserBadges.ts

@@ -6,6 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 
 import type {Badge, BadgeAction, BadgeActionEvents, BadgeContext} from './Badge.js';
+import {DOMDetectiveBadge} from './DOMDetectiveBadge.js';
 import {SpeedsterBadge} from './SpeedsterBadge.js';
 import {StarterBadge} from './StarterBadge.js';
 
@@ -23,12 +24,13 @@ let userBadgesInstance: UserBadges|undefined = undefined;
 export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   readonly #badgeActionEventTarget = new Common.ObjectWrapper.ObjectWrapper<BadgeActionEvents>();
 
-  #receiveBadgesSetting?: Common.Settings.Setting<Boolean>;
+  #receiveBadgesSetting: Common.Settings.Setting<Boolean>;
   #allBadges: Badge[];
 
   static readonly BADGE_REGISTRY: BadgeClass[] = [
     StarterBadge,
     SpeedsterBadge,
+    DOMDetectiveBadge,
   ];
 
   private constructor() {
@@ -37,11 +39,10 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     this.#receiveBadgesSetting = Common.Settings.Settings.instance().moduleSetting('receive-gdp-badges');
     this.#receiveBadgesSetting.addChangeListener(this.#reconcileBadges, this);
 
-    this.#allBadges =
-        UserBadges.BADGE_REGISTRY.map(badgeCtor => new badgeCtor({
-                                        dispatchBadgeTriggeredEvent: this.#dispatchBadgeTriggeredEvent.bind(this),
-                                        badgeActionEventTarget: this.#badgeActionEventTarget,
-                                      }));
+    this.#allBadges = UserBadges.BADGE_REGISTRY.map(badgeCtor => new badgeCtor({
+                                                      onTriggerBadge: this.#onTriggerBadge.bind(this),
+                                                      badgeActionEventTarget: this.#badgeActionEventTarget,
+                                                    }));
   }
 
   static instance({forceNew}: {forceNew: boolean} = {forceNew: false}): UserBadges {
@@ -65,7 +66,28 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     this.#badgeActionEventTarget.dispatchEventToListeners(action);
   }
 
-  #dispatchBadgeTriggeredEvent(badge: Badge): void {
+  async #onTriggerBadge(badge: Badge): Promise<void> {
+    let shouldAwardBadge = false;
+    // By default, we award non-starter badges directly when they are triggered.
+    if (!badge.isStarterBadge) {
+      shouldAwardBadge = true;
+    } else {
+      const gdpProfile = await Host.GdpClient.GdpClient.instance().getProfile();
+      const receiveBadgesSettingEnabled = Boolean(this.#receiveBadgesSetting.get());
+      // If there is a GDP profile and the user has enabled receiving badges, we award the starter badge as well.
+      if (gdpProfile && receiveBadgesSettingEnabled) {
+        shouldAwardBadge = true;
+      }
+    }
+
+    // Awarding was needed and not successful, we don't show the notification
+    if (shouldAwardBadge) {
+      const result = await Host.GdpClient.GdpClient.instance().createAward({name: badge.name});
+      if (!result) {
+        return;
+      }
+    }
+
     this.dispatchEventToListeners(Events.BADGE_TRIGGERED, badge);
   }
 
@@ -115,4 +137,8 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
 
   reconcileBadgesFinishedForTest(): void {
   }
+
+  isReceiveBadgesSettingEnabled(): boolean {
+    return Boolean(this.#receiveBadgesSetting?.get());
+  }
 }

package/front_end/models/trace/ModelImpl.ts

@@ -118,19 +118,6 @@ export class Model extends EventTarget {
         metadata,
         resolveSourceMap: config?.resolveSourceMap,
       };
-      if (!parseConfig.logger &&
-          (window.location.href.includes('devtools/bundled') || window.location.search.includes('debugFrontend'))) {
-        // Someone is debugging DevTools, enable the logger.
-        const times: Record<string, number> = {};
-        parseConfig.logger = {
-          start(id) {
-            times[id] = performance.now();
-          },
-          end(id) {
-            performance.measure(id, {start: times[id]});
-          },
-        };
-      }
       await this.#processor.parse(traceEvents, parseConfig);
       this.#storeParsedFileData(file, this.#processor.parsedTrace, this.#processor.insights);
       // We only push the file onto this.#traces here once we know it's valid

package/front_end/models/trace/insights/Common.ts

@@ -12,6 +12,7 @@ import * as Types from '../types/types.js';
 import {getLogNormalScore} from './Statistics.js';
 import {
   InsightKeys,
+  type InsightModel,
   type InsightModels,
   type InsightSet,
   type InsightSetContext,
@@ -432,3 +433,21 @@ export function calculateDocFirstByteTs(docRequest: Types.Events.SyntheticNetwor
       Helpers.Timing.secondsToMicro(timing.requestTime) +
       Helpers.Timing.milliToMicro(timing.receiveHeadersStart ?? timing.receiveHeadersEnd));
 }
+
+/**
+ * Calculates the trace bounds for the given insight that are relevant.
+ *
+ * Uses the insight's overlays to determine the relevant trace bounds. If there are
+ * no overlays, falls back to the insight set's navigation bounds.
+ */
+export function insightBounds(
+    insight: InsightModel, insightSetBounds: Types.Timing.TraceWindowMicro): Types.Timing.TraceWindowMicro {
+  const overlays = insight.createOverlays?.() ?? [];
+  const windows = overlays.map(Helpers.Timing.traceWindowFromOverlay).filter(bounds => !!bounds);
+  const overlaysBounds = Helpers.Timing.combineTraceWindowsMicro(windows);
+  if (overlaysBounds) {
+    return overlaysBounds;
+  }
+
+  return insightSetBounds;
+}

package/front_end/panels/common/AiCodeCompletionDisclaimer.ts

@@ -5,6 +5,7 @@
 import '../../ui/components/spinners/spinners.js';
 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 UI from '../../ui/legacy/legacy.js';
@@ -47,6 +48,7 @@ const lockedString = i18n.i18n.lockedString;
 export interface ViewInput {
   disclaimerTooltipId?: string;
   noLogging: boolean;
+  aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
   onManageInSettingsTooltipClick: () => void;
 }
 
@@ -57,13 +59,12 @@ export interface ViewOutput {
 
 export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
 
-export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View =
-    (input, output, target) => {
-      if (!input.disclaimerTooltipId) {
-        render(nothing, target);
-        return;
-      }
-      // clang-format off
+export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, output, target) => {
+  if (input.aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE || !input.disclaimerTooltipId) {
+    render(nothing, target);
+    return;
+  }
+  // clang-format off
   render(
     html`
         <style>${styles}</style>
@@ -114,8 +115,8 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View =
                 >${lockedString(UIStringsNotTranslate.manageInSettings)}</span></div></devtools-tooltip>
           </div>
         `, target);
-      // clang-format on
-    };
+  // clang-format on
+};
 
 const MINIMUM_LOADING_STATE_TIMEOUT = 1000;
 
@@ -129,11 +130,15 @@ export class AiCodeCompletionDisclaimer extends UI.Widget.Widget {
   #loadingStartTime = 0;
   #spinnerLoadingTimeout: number|undefined;
 
+  #aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
+  #boundOnAidaAvailabilityChange: () => Promise<void>;
+
   constructor(element?: HTMLElement, view: View = DEFAULT_SUMMARY_TOOLBAR_VIEW) {
     super(element);
     this.markAsExternallyManaged();
     this.#noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
         Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
+    this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
     this.#view = view;
   }
 
@@ -169,6 +174,14 @@ export class AiCodeCompletionDisclaimer extends UI.Widget.Widget {
     }
   }
 
+  async #onAidaAvailabilityChange(): Promise<void> {
+    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+    if (currentAidaAvailability !== this.#aidaAvailability) {
+      this.#aidaAvailability = currentAidaAvailability;
+      this.requestUpdate();
+    }
+  }
+
   #onManageInSettingsTooltipClick(): void {
     this.#viewOutput.hideTooltip?.();
     void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
@@ -179,8 +192,22 @@ export class AiCodeCompletionDisclaimer extends UI.Widget.Widget {
         {
           disclaimerTooltipId: this.#disclaimerTooltipId,
           noLogging: this.#noLogging,
+          aidaAvailability: this.#aidaAvailability,
           onManageInSettingsTooltipClick: this.#onManageInSettingsTooltipClick.bind(this),
         },
         this.#viewOutput, this.contentElement);
   }
+
+  override wasShown(): void {
+    super.wasShown();
+    Host.AidaClient.HostConfigTracker.instance().addEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
+    void this.#onAidaAvailabilityChange();
+  }
+
+  override willHide(): void {
+    super.willHide();
+    Host.AidaClient.HostConfigTracker.instance().removeEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
+  }
 }

package/front_end/panels/common/AiCodeCompletionSummaryToolbar.ts

@@ -5,6 +5,7 @@
 import '../../ui/components/spinners/spinners.js';
 import '../../ui/components/tooltips/tooltips.js';
 
+import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
@@ -38,11 +39,16 @@ export interface ViewInput {
   citationsTooltipId: string;
   loading: boolean;
   hasTopBorder: boolean;
+  aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
 }
 
 export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 
 export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, _output, target) => {
+  if (input.aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
+    render(nothing, target);
+    return;
+  }
   const toolbarClasses = Directives.classMap({
     'ai-code-completion-summary-toolbar': true,
     'has-disclaimer': Boolean(input.disclaimerTooltipId),
@@ -101,15 +107,27 @@ export class AiCodeCompletionSummaryToolbar extends UI.Widget.Widget {
   #loading = false;
   #hasTopBorder = false;
 
+  #aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
+  #boundOnAidaAvailabilityChange: () => Promise<void>;
+
   constructor(props: AiCodeCompletionSummaryToolbarProps, view?: View) {
     super();
     this.#disclaimerTooltipId = props.disclaimerTooltipId;
     this.#citationsTooltipId = props.citationsTooltipId;
     this.#hasTopBorder = props.hasTopBorder ?? false;
+    this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
     this.#view = view ?? DEFAULT_SUMMARY_TOOLBAR_VIEW;
     this.requestUpdate();
   }
 
+  async #onAidaAvailabilityChange(): Promise<void> {
+    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+    if (currentAidaAvailability !== this.#aidaAvailability) {
+      this.#aidaAvailability = currentAidaAvailability;
+      this.requestUpdate();
+    }
+  }
+
   setLoading(loading: boolean): void {
     this.#loading = loading;
     this.requestUpdate();
@@ -133,7 +151,21 @@ export class AiCodeCompletionSummaryToolbar extends UI.Widget.Widget {
           citationsTooltipId: this.#citationsTooltipId,
           loading: this.#loading,
           hasTopBorder: this.#hasTopBorder,
+          aidaAvailability: this.#aidaAvailability,
         },
         undefined, this.contentElement);
   }
+
+  override wasShown(): void {
+    super.wasShown();
+    Host.AidaClient.HostConfigTracker.instance().addEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
+    void this.#onAidaAvailabilityChange();
+  }
+
+  override willHide(): void {
+    super.willHide();
+    Host.AidaClient.HostConfigTracker.instance().removeEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
+  }
 }

package/front_end/panels/common/AiCodeCompletionTeaser.ts

@@ -88,7 +88,7 @@ const lockedString = i18n.i18n.lockedString;
 const CODE_SNIPPET_WARNING_URL = 'https://support.google.com/legal/answer/13505487';
 
 export interface ViewInput {
-  aidaAvailability: Host.AidaClient.AidaAccessPreconditions;
+  aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
   onAction: (event: Event) => void;
   onDismiss: (event: Event) => void;
 }
@@ -134,8 +134,9 @@ interface AiCodeCompletionTeaserConfig {
 export class AiCodeCompletionTeaser extends UI.Widget.Widget {
   readonly #view: View;
 
-  #aidaAvailability = Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL;
+  #aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
   #boundOnAidaAvailabilityChange: () => Promise<void>;
+  #boundOnAiCodeCompletionSettingChanged: () => void;
   #onDetach: () => void;
 
   // Whether the user completed first run experience dialog or not.
@@ -153,6 +154,7 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
     this.#onDetach = config.onDetach;
     this.#view = view ?? DEFAULT_VIEW;
     this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
+    this.#boundOnAiCodeCompletionSettingChanged = this.#onAiCodeCompletionSettingChanged.bind(this);
     this.#noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
         Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
     this.requestUpdate();
@@ -179,6 +181,12 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
     }
   }
 
+  #onAiCodeCompletionSettingChanged(): void {
+    if (this.#aiCodeCompletionFreCompletedSetting.get() || this.#aiCodeCompletionTeaserDismissedSetting.get()) {
+      this.detach();
+    }
+  }
+
   onAction = async(event: Event): Promise<void> => {
     event.preventDefault();
     const result = await FreDialog.show({
@@ -243,6 +251,8 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
     super.wasShown();
     Host.AidaClient.HostConfigTracker.instance().addEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
+    this.#aiCodeCompletionFreCompletedSetting.addChangeListener(this.#boundOnAiCodeCompletionSettingChanged);
+    this.#aiCodeCompletionTeaserDismissedSetting.addChangeListener(this.#boundOnAiCodeCompletionSettingChanged);
     void this.#onAidaAvailabilityChange();
   }
 
@@ -250,6 +260,8 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
     super.willHide();
     Host.AidaClient.HostConfigTracker.instance().removeEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
+    this.#aiCodeCompletionFreCompletedSetting.removeChangeListener(this.#boundOnAiCodeCompletionSettingChanged);
+    this.#aiCodeCompletionTeaserDismissedSetting.removeChangeListener(this.#boundOnAiCodeCompletionSettingChanged);
   }
 
   override onDetach(): void {