chrome-devtools-frontend 1.0.1528866 → 1.0.1529904

package/front_end/models/persistence/NetworkPersistenceManager.ts

@@ -7,9 +7,6 @@ import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-// TODO(crbug.com/442509324): remove UI dependency
-// eslint-disable-next-line rulesdir/no-imports-in-directory
-import * as UI from '../../ui/legacy/legacy.js';
 import * as Breakpoints from '../breakpoints/breakpoints.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
@@ -400,8 +397,7 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     // No overrides folder, set it up
     if (this.#shouldPromptSaveForOverridesDialog(uiSourceCode)) {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.OverrideContentContextMenuSetup);
-      await new Promise<void>(
-          resolve => UI.InspectorView.InspectorView.instance().displaySelectOverrideFolderInfobar(resolve));
+      await new Promise<void>(resolve => this.dispatchEventToListeners(Events.LOCAL_OVERRIDES_REQUESTED, resolve));
       await IsolatedFileSystemManager.instance().addFileSystem('overrides');
     }
 
@@ -980,12 +976,14 @@ export const enum Events {
   PROJECT_CHANGED = 'ProjectChanged',
   REQUEST_FOR_HEADER_OVERRIDES_FILE_CHANGED = 'RequestsForHeaderOverridesFileChanged',
   LOCAL_OVERRIDES_PROJECT_UPDATED = 'LocalOverridesProjectUpdated',
+  LOCAL_OVERRIDES_REQUESTED = 'LocalOverridesRequested',
 }
 
 export interface EventTypes {
   [Events.PROJECT_CHANGED]: Workspace.Workspace.Project|null;
   [Events.REQUEST_FOR_HEADER_OVERRIDES_FILE_CHANGED]: Workspace.UISourceCode.UISourceCode;
   [Events.LOCAL_OVERRIDES_PROJECT_UPDATED]: boolean;
+  [Events.LOCAL_OVERRIDES_REQUESTED]: () => void;
 }
 
 export interface HeaderOverride {

package/front_end/models/persistence/PersistenceImpl.ts

@@ -6,14 +6,12 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as Bindings from '../bindings/bindings.js';
 import * as BreakpointManager from '../breakpoints/breakpoints.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
 
 import {Automapping, type AutomappingStatus} from './Automapping.js';
-import {LinkDecorator} from './PersistenceUtils.js';
 
 let persistenceInstance: PersistenceImpl;
 
@@ -33,9 +31,6 @@ export class PersistenceImpl extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.#breakpointManager = breakpointManager;
     this.#breakpointManager.addUpdateBindingsCallback(this.#setupBindings.bind(this));
 
-    const linkDecorator = new LinkDecorator(this);
-    Components.Linkifier.Linkifier.setLinkDecorator(linkDecorator);
-
     this.#mapping = new Automapping(this.#workspace, this.onStatusAdded.bind(this), this.onStatusRemoved.bind(this));
   }
 

package/front_end/models/persistence/persistence-meta.ts

@@ -4,13 +4,6 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as SDK from '../../core/sdk/sdk.js';
-import * as Workspace from '../../models/workspace/workspace.js';
-// TODO(crbug.com/442509324): remove UI dependency
-// eslint-disable-next-line rulesdir/no-imports-in-directory
-import * as UI from '../../ui/legacy/legacy.js';
-
-import type * as Persistence from './persistence.js';
 
 const UIStrings = {
   /**
@@ -50,15 +43,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('models/persistence/persistence-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-let loadedPersistenceModule: (typeof Persistence|undefined);
-
-async function loadPersistenceModule(): Promise<typeof Persistence> {
-  if (!loadedPersistenceModule) {
-    loadedPersistenceModule = await import('./persistence.js');
-  }
-  return loadedPersistenceModule;
-}
-
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.PERSISTENCE,
   title: i18nLazyString(UIStrings.enableLocalOverrides),
@@ -83,18 +67,3 @@ Common.Settings.registerSettingExtension({
     },
   ],
 });
-
-UI.ContextMenu.registerProvider({
-  contextTypes() {
-    return [
-      Workspace.UISourceCode.UISourceCode,
-      SDK.Resource.Resource,
-      SDK.NetworkRequest.NetworkRequest,
-    ];
-  },
-  async loadProvider() {
-    const Persistence = await loadPersistenceModule();
-    return new Persistence.PersistenceActions.ContextMenuProvider();
-  },
-  experiment: undefined,
-});

package/front_end/models/persistence/persistence.ts

@@ -5,27 +5,21 @@
 import * as Automapping from './Automapping.js';
 import * as AutomaticFileSystemManager from './AutomaticFileSystemManager.js';
 import * as AutomaticFileSystemWorkspaceBinding from './AutomaticFileSystemWorkspaceBinding.js';
-import * as EditFileSystemView from './EditFileSystemView.js';
 import * as FileSystemWorkspaceBinding from './FileSystemWorkspaceBinding.js';
 import * as IsolatedFileSystem from './IsolatedFileSystem.js';
 import * as IsolatedFileSystemManager from './IsolatedFileSystemManager.js';
 import * as NetworkPersistenceManager from './NetworkPersistenceManager.js';
-import * as PersistenceActions from './PersistenceActions.js';
 import * as Persistence from './PersistenceImpl.js';
-import * as PersistenceUtils from './PersistenceUtils.js';
 import * as PlatformFileSystem from './PlatformFileSystem.js';
 
 export {
   Automapping,
   AutomaticFileSystemManager,
   AutomaticFileSystemWorkspaceBinding,
-  EditFileSystemView,
   FileSystemWorkspaceBinding,
   IsolatedFileSystem,
   IsolatedFileSystemManager,
   NetworkPersistenceManager,
   Persistence,
-  PersistenceActions,
-  PersistenceUtils,
   PlatformFileSystem,
 };

package/front_end/{models/persistence → panels/common}/PersistenceUtils.ts

@@ -6,16 +6,11 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as Persistence from '../../models/persistence/persistence.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
-// TODO(crbug.com/442509324): remove UI dependency
-// eslint-disable-next-line rulesdir/no-imports-in-directory
 import * as UI from '../../ui/legacy/legacy.js';
-import * as Workspace from '../workspace/workspace.js';
-
-import {FileSystemWorkspaceBinding} from './FileSystemWorkspaceBinding.js';
-import {NetworkPersistenceManager} from './NetworkPersistenceManager.js';
-import {Events, type PersistenceBinding, PersistenceImpl} from './PersistenceImpl.js';
 
 const UIStrings = {
   /**
@@ -29,16 +24,17 @@ const UIStrings = {
    */
   linkedToS: 'Linked to {PH1}',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('models/persistence/PersistenceUtils.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/common/PersistenceUtils.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class PersistenceUtils {
   static tooltipForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): string {
-    const binding = PersistenceImpl.instance().binding(uiSourceCode);
+    const binding = Persistence.Persistence.PersistenceImpl.instance().binding(uiSourceCode);
     if (!binding) {
       return '';
     }
     if (uiSourceCode === binding.network) {
-      return FileSystemWorkspaceBinding.tooltipForUISourceCode(binding.fileSystem);
+      return Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.tooltipForUISourceCode(
+          binding.fileSystem);
     }
     if (binding.network.contentType().isFromSourceMap()) {
       return i18nString(
@@ -48,7 +44,7 @@ export class PersistenceUtils {
   }
 
   static iconForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): IconButton.Icon.Icon|null {
-    const binding = PersistenceImpl.instance().binding(uiSourceCode);
+    const binding = Persistence.Persistence.PersistenceImpl.instance().binding(uiSourceCode);
     if (binding) {
       if (!Common.ParsedURL.schemeIs(binding.fileSystem.url(), 'file:')) {
         return null;
@@ -57,7 +53,8 @@ export class PersistenceUtils {
       icon.name = 'document';
       icon.classList.add('small');
       UI.Tooltip.Tooltip.install(icon, PersistenceUtils.tooltipForUISourceCode(binding.network));
-      if (NetworkPersistenceManager.instance().project() === binding.fileSystem.project()) {
+      if (Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().project() ===
+          binding.fileSystem.project()) {
         icon.classList.add('dot', 'purple');
       } else {
         icon.classList.add('dot', 'green');
@@ -70,7 +67,8 @@ export class PersistenceUtils {
       return null;
     }
 
-    if (NetworkPersistenceManager.instance().isActiveHeaderOverrides(uiSourceCode)) {
+    if (Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().isActiveHeaderOverrides(
+            uiSourceCode)) {
       const icon = new IconButton.Icon.Icon();
       icon.name = 'document';
       icon.classList.add('small');
@@ -88,13 +86,13 @@ export class PersistenceUtils {
 
 export class LinkDecorator extends Common.ObjectWrapper.ObjectWrapper<Components.Linkifier.LinkDecorator.EventTypes>
     implements Components.Linkifier.LinkDecorator {
-  constructor(persistence: PersistenceImpl) {
+  constructor(persistence: Persistence.Persistence.PersistenceImpl) {
     super();
-    persistence.addEventListener(Events.BindingCreated, this.bindingChanged, this);
-    persistence.addEventListener(Events.BindingRemoved, this.bindingChanged, this);
+    persistence.addEventListener(Persistence.Persistence.Events.BindingCreated, this.bindingChanged, this);
+    persistence.addEventListener(Persistence.Persistence.Events.BindingRemoved, this.bindingChanged, this);
   }
 
-  private bindingChanged(event: Common.EventTarget.EventTargetEvent<PersistenceBinding>): void {
+  private bindingChanged(event: Common.EventTarget.EventTargetEvent<Persistence.Persistence.PersistenceBinding>): void {
     const binding = event.data;
     this.dispatchEventToListeners(Components.Linkifier.LinkDecorator.Events.LINK_ICON_CHANGED, binding.network);
   }

package/front_end/panels/common/common.ts

@@ -100,3 +100,4 @@ export {GdpSignUpDialog} from './GdpSignUpDialog.js';
 export {AiCodeCompletionDisclaimer} from './AiCodeCompletionDisclaimer.js';
 export {AiCodeCompletionSummaryToolbar} from './AiCodeCompletionSummaryToolbar.js';
 export * from './BadgeNotification.js';
+export * as PersistenceUtils from './PersistenceUtils.js';

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -4,16 +4,55 @@
 
 import '../../ui/components/tooltips/tooltips.js';
 
+import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Root from '../../core/root/root.js';
+import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as PanelCommon from '../common/common.js';
 
 import consoleInsightTeaserStyles from './consoleInsightTeaser.css.js';
-import type {ConsoleViewMessage} from './ConsoleViewMessage.js';
+import {ConsoleViewMessage} from './ConsoleViewMessage.js';
+import {PromptBuilder} from './PromptBuilder.js';
 
 const {render, html} = Lit;
 
 const UIStringsNotTranslate = {
+  /**
+   * @description Link text in the disclaimer dialog, linking to a settings page containing more information
+   */
+  learnMore: 'Learn more about AI summaries',
+  /**
+   * @description Description of the console insights feature
+   */
+  freDisclaimerHeader: 'Get explanations for console warnings and errors',
+  /**
+   * @description First item in the first-run experience dialog
+   */
+  freDisclaimerTextAiWontAlwaysGetItRight: 'This feature uses AI and won’t always get it right',
+  /**
+   * @description Explainer for which data is being sent by the console insights feature
+   */
+  consoleInsightsSendsData:
+      'To generate explanations, the console message, associated stack trace, related source code, and the associated network headers are sent to Google. This data may be seen by human reviewers to improve this feature.',
+  /**
+   * @description Explainer for which data is being sent by the console insights feature
+   */
+  consoleInsightsSendsDataNoLogging:
+      'To generate explanations, the console message, associated stack trace, related source code, and the associated network headers are sent to Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time.',
+  /**
+   * @description Third item in the first-run experience dialog
+   */
+  freDisclaimerTextUseWithCaution: 'Use generated code snippets with caution',
+  /**
+   * @description Tooltip text for the console insights teaser
+   */
+  infoTooltipText:
+      'The text above has been generated with AI on your local device. Clicking the button will send the console message, stack trace, related source code, and the associated network headers to Google to generate a more detailed explanation.',
   /**
    * @description Header text during loading state while an AI summary is being generated
    */
@@ -22,15 +61,32 @@ const UIStringsNotTranslate = {
    * @description Label for an animation shown while an AI response is being generated
    */
   loading: 'Loading',
+  /**
+   * @description Label for a button which generates a more detailed explanation
+   */
+  tellMeMore: 'Tell me more',
+  /**
+   * @description Label for a checkbox which turns off the teaser explanation feature
+   */
+  dontShow: 'Don’t show',
 } as const;
 
 const lockedString = i18n.i18n.lockedString;
 
+const CODE_SNIPPET_WARNING_URL = 'https://support.google.com/legal/answer/13505487';
+const DATA_USAGE_URL = 'https://developer.chrome.com/docs/devtools/ai-assistance/get-started#data-use';
+const EXPLAIN_TEASER_ACTION_ID = 'explain.console-message.teaser';
+
 interface ViewInput {
+  onTellMeMoreClick: (event: Event) => void;
   // If multiple ConsoleInsightTeasers exist, each one needs a unique id. Otherwise showing and
   // hiding of the tooltip, and rendering the loading animation, does not work correctly.
-  uuid: String;
+  uuid: string;
+  headerText: string;
+  mainText: string;
   isInactive: boolean;
+  dontShowChanged: (e: Event) => void;
+  hasTellMeMoreButton: boolean;
 }
 
 export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
@@ -39,6 +95,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
     return;
   }
 
+  const showPlaceholder = !Boolean(input.mainText);
   // clang-format off
   render(html`
     <style>${consoleInsightTeaserStyles}</style>
@@ -50,23 +107,62 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
       prefer-span-left
     >
       <div class="teaser-tooltip-container">
-        <h2 tabindex="-1">${lockedString(UIStringsNotTranslate.summarizing)}</h2>
-        <div
-          role="presentation"
-          aria-label=${lockedString(UIStringsNotTranslate.loading)}
-          class="loader"
-          style="clip-path: url(${'#clipPath-' + input.uuid});"
-        >
-          <svg width="100%" height="52">
-            <defs>
-            <clipPath id=${'clipPath-' + input.uuid}>
-              <rect x="0" y="0" width="100%" height="12" rx="8"></rect>
-              <rect x="0" y="20" width="100%" height="12" rx="8"></rect>
-              <rect x="0" y="40" width="100%" height="12" rx="8"></rect>
-            </clipPath>
-          </defs>
-          </svg>
-        </div>
+        ${showPlaceholder ? html`
+          <h2 tabindex="-1">${lockedString(UIStringsNotTranslate.summarizing)}</h2>
+          <div
+            role="presentation"
+            aria-label=${lockedString(UIStringsNotTranslate.loading)}
+            class="loader"
+            style="clip-path: url(${'#clipPath-' + input.uuid});"
+          >
+            <svg width="100%" height="52">
+              <defs>
+              <clipPath id=${'clipPath-' + input.uuid}>
+                <rect x="0" y="0" width="100%" height="12" rx="8"></rect>
+                <rect x="0" y="20" width="100%" height="12" rx="8"></rect>
+                <rect x="0" y="40" width="100%" height="12" rx="8"></rect>
+              </clipPath>
+            </defs>
+            </svg>
+          </div>
+        ` : html`
+          <h2 tabindex="-1">${input.headerText}</h2>
+          <div>${input.mainText}</div>
+          <div class="tooltip-footer">
+            ${input.hasTellMeMoreButton ? html`
+              <devtools-button
+                title=${lockedString(UIStringsNotTranslate.tellMeMore)}
+                .jslogContext=${'insights-teaser-tell-me-more'},
+                .variant=${Buttons.Button.Variant.PRIMARY}
+                @click=${input.onTellMeMoreClick}
+              >
+                <devtools-icon class="lightbulb-icon" name="lightbulb-spark"></devtools-icon>
+                ${lockedString(UIStringsNotTranslate.tellMeMore)}
+              </devtools-button>
+            ` : Lit.nothing}
+            <devtools-icon
+              name="info"
+              class="info-icon"
+              aria-details=${'teaser-info-tooltip-' + input.uuid}
+            ></devtools-icon>
+            <devtools-tooltip id=${'teaser-info-tooltip-' + input.uuid} variant="rich">
+              <div class="info-tooltip-text">${lockedString(UIStringsNotTranslate.infoTooltipText)}</div>
+              <div class="learn-more">
+                <x-link
+                  class="devtools-link"
+                  title=${lockedString(UIStringsNotTranslate.learnMore)}
+                  href=${DATA_USAGE_URL}
+                  jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('explain.teaser.learn-more')}
+                >${lockedString(UIStringsNotTranslate.learnMore)}</x-link>
+              </div>
+            </devtools-tooltip>
+            <devtools-checkbox
+              @change=${input.dontShowChanged}
+              jslog=${VisualLogging.toggle('explain.teaser.dont-show').track({ change: true })}>
+              ${lockedString(UIStringsNotTranslate.dontShow)}
+            </devtools-checkbox>
+          </div>
+        `}
       </div>
     </devtools-tooltip>
   `, target);
@@ -77,16 +173,110 @@ export type View = typeof DEFAULT_VIEW;
 
 export class ConsoleInsightTeaser extends UI.Widget.Widget {
   #view: View;
-  #uuid: String;
+  #uuid: string;
+  #isGenerating = false;
+  #builtInAi: AiAssistanceModel.BuiltInAi.BuiltInAi|undefined;
+  #promptBuilder: PromptBuilder;
+  #headerText = '';
+  #mainText = '';
+  #consoleViewMessage: ConsoleViewMessage;
   #isInactive = false;
+  #abortController: null|AbortController = null;
 
-  constructor(uuid: String, consoleViewMessage: ConsoleViewMessage, element?: HTMLElement, view?: View) {
+  constructor(uuid: string, consoleViewMessage: ConsoleViewMessage, element?: HTMLElement, view?: View) {
     super(element);
     this.#view = view ?? DEFAULT_VIEW;
     this.#uuid = uuid;
+    this.#promptBuilder = new PromptBuilder(consoleViewMessage);
+    this.#consoleViewMessage = consoleViewMessage;
     this.requestUpdate();
   }
 
+  #getConsoleInsightsEnabledSetting(): Common.Settings.Setting<boolean>|undefined {
+    try {
+      return Common.Settings.moduleSetting('console-insights-enabled') as Common.Settings.Setting<boolean>;
+    } catch {
+      return;
+    }
+  }
+
+  #getOnboardingCompletedSetting(): Common.Settings.Setting<boolean> {
+    return Common.Settings.Settings.instance().createLocalSetting('console-insights-onboarding-finished', true);
+  }
+
+  #executeConsoleInsightAction(): void {
+    UI.Context.Context.instance().setFlavor(ConsoleViewMessage, this.#consoleViewMessage);
+    const action = UI.ActionRegistry.ActionRegistry.instance().getAction(EXPLAIN_TEASER_ACTION_ID);
+    void action.execute();
+  }
+
+  #onTellMeMoreClick(event: Event): void {
+    event.stopPropagation();
+    if (this.#getConsoleInsightsEnabledSetting()?.getIfNotDisabled() &&
+        this.#getOnboardingCompletedSetting()?.getIfNotDisabled()) {
+      this.#executeConsoleInsightAction();
+      return;
+    }
+    void this.#showFreDialog();
+  }
+
+  async #showFreDialog(): Promise<void> {
+    const noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
+        Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
+    const result = await PanelCommon.FreDialog.show({
+      header: {iconName: 'smart-assistant', text: lockedString(UIStringsNotTranslate.freDisclaimerHeader)},
+      reminderItems: [
+        {
+          iconName: 'psychiatry',
+          content: lockedString(UIStringsNotTranslate.freDisclaimerTextAiWontAlwaysGetItRight),
+        },
+        {
+          iconName: 'google',
+          content: noLogging ? lockedString(UIStringsNotTranslate.consoleInsightsSendsDataNoLogging) :
+                               lockedString(UIStringsNotTranslate.consoleInsightsSendsData),
+        },
+        {
+          iconName: 'warning',
+          // clang-format off
+          content: html`<x-link
+            href=${CODE_SNIPPET_WARNING_URL}
+            class="link devtools-link"
+            jslog=${VisualLogging.link('explain.teaser.code-snippets-explainer').track({
+              click: true
+            })}
+          >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</x-link>`,
+          // clang-format on
+        }
+      ],
+      onLearnMoreClick: () => {
+        void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
+      },
+      ariaLabel: lockedString(UIStringsNotTranslate.freDisclaimerHeader),
+      learnMoreButtonText: lockedString(UIStringsNotTranslate.learnMore),
+    });
+
+    if (result) {
+      this.#getConsoleInsightsEnabledSetting()?.set(true);
+      this.#getOnboardingCompletedSetting()?.set(true);
+      this.#executeConsoleInsightAction();
+    }
+  }
+
+  maybeGenerateTeaser(): void {
+    this.requestUpdate();
+    if (!this.#isInactive && !this.#isGenerating && !Boolean(this.#mainText) &&
+        Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').get()) {
+      void this.#generateTeaserText();
+    }
+  }
+
+  abortTeaserGeneration(): void {
+    if (this.#abortController) {
+      this.#abortController.abort();
+    }
+    this.#isGenerating = false;
+  }
+
   setInactive(isInactive: boolean): void {
     if (this.#isInactive === isInactive) {
       return;
@@ -95,11 +285,84 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
+  async #generateTeaserText(): Promise<void> {
+    this.#isGenerating = true;
+    let teaserText = '';
+    try {
+      for await (const chunk of this.#getOnDeviceInsight()) {
+        teaserText += chunk;
+      }
+    } catch (err) {
+      // Ignore `AbortError` errors, which are thrown on mouse leave.
+      if (err.name !== 'AbortError') {
+        console.error(err.name, err.message);
+      }
+      this.#isGenerating = false;
+      return;
+    }
+
+    // TODO(crbug.com/443618746): Add user-facing error message instead of staying in loading state
+    let responseObject = {
+      header: null,
+      explanation: null,
+    };
+    try {
+      responseObject = JSON.parse(teaserText);
+    } catch (err) {
+      console.error(err.name, err.message);
+    }
+    this.#headerText = responseObject.header || '';
+    this.#mainText = responseObject.explanation || '';
+    this.#isGenerating = false;
+    this.requestUpdate();
+  }
+
+  async * #getOnDeviceInsight(): AsyncGenerator<string> {
+    const {prompt} = await this.#promptBuilder.buildPrompt();
+    if (!this.#builtInAi) {
+      this.#builtInAi = await AiAssistanceModel.BuiltInAi.BuiltInAi.instance();
+      if (!this.#builtInAi) {
+        this.#isInactive = true;
+        throw new Error('Cannot instantiate BuiltInAi');
+      }
+    }
+    this.#abortController = new AbortController();
+    const stream = this.#builtInAi.getConsoleInsight(prompt, this.#abortController);
+    for await (const chunk of stream) {
+      yield chunk;
+    }
+    this.#abortController = null;
+  }
+
+  #dontShowChanged(e: Event): void {
+    const showTeasers = !(e.target as HTMLInputElement).checked;
+    Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').set(showTeasers);
+  }
+
+  #hasTellMeMoreButton(): boolean {
+    if (!UI.ActionRegistry.ActionRegistry.instance().hasAction(EXPLAIN_TEASER_ACTION_ID)) {
+      return false;
+    }
+    if (Root.Runtime.hostConfig.aidaAvailability?.blockedByAge || Root.Runtime.hostConfig.isOffTheRecord) {
+      return false;
+    }
+    if (!Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
+      return false;
+    }
+    return true;
+  }
+
   override performUpdate(): Promise<void>|void {
     this.#view(
         {
+          onTellMeMoreClick: this.#onTellMeMoreClick.bind(this),
           uuid: this.#uuid,
-          isInactive: this.#isInactive,
+          headerText: this.#headerText,
+          mainText: this.#mainText,
+          isInactive: this.#isInactive ||
+              !Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').get(),
+          dontShowChanged: this.#dontShowChanged.bind(this),
+          hasTellMeMoreButton: this.#hasTellMeMoreButton(),
         },
         undefined, this.contentElement);
   }

package/front_end/panels/console/ConsolePrompt.ts

@@ -170,8 +170,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
           Common.Settings.Settings.instance().createSetting('ai-code-completion-teaser-dismissed', false);
       if (!this.aiCodeCompletionSetting.get() && !aiCodeCompletionTeaserDismissedSetting.get()) {
         this.teaser = new PanelCommon.AiCodeCompletionTeaser({onDetach: this.detachAiCodeCompletionTeaser.bind(this)});
-        extensions.push(this.placeholderCompartment.of(
-            TextEditor.AiCodeCompletionTeaserPlaceholder.aiCodeCompletionTeaserPlaceholder(this.teaser)));
+        extensions.push(this.placeholderCompartment.of([]));
       }
       extensions.push(TextEditor.Config.aiAutoCompleteSuggestion);
     }
@@ -580,9 +579,18 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       this.aidaAvailability = currentAidaAvailability;
       if (this.aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
         this.onAiCodeCompletionSettingChanged();
+        if (this.teaser) {
+          this.editor.dispatch({
+            effects: this.placeholderCompartment.reconfigure(
+                [TextEditor.AiCodeCompletionTeaserPlaceholder.aiCodeCompletionTeaserPlaceholder(this.teaser)])
+          });
+        }
       } else if (this.aiCodeCompletion) {
         this.aiCodeCompletion.remove();
         this.aiCodeCompletion = undefined;
+        if (this.teaser) {
+          this.detachAiCodeCompletionTeaser();
+        }
       }
     }
   }