chrome-devtools-frontend 1.0.1526630 → 1.0.1529186

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -0,0 +1,369 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+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 {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
+   */
+  summarizing: 'Summarizing…',
+  /**
+   * @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;
+  headerText: string;
+  mainText: string;
+  isInactive: boolean;
+  dontShowChanged: (e: Event) => void;
+  hasTellMeMoreButton: boolean;
+}
+
+export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  if (input.isInactive) {
+    render(Lit.nothing, target);
+    return;
+  }
+
+  const showPlaceholder = !Boolean(input.mainText);
+  // clang-format off
+  render(html`
+    <style>${consoleInsightTeaserStyles}</style>
+    <devtools-tooltip
+      id=${'teaser-' + input.uuid}
+      hover-delay=500
+      variant="rich"
+      vertical-distance-increase=-6
+      prefer-span-left
+    >
+      <div class="teaser-tooltip-container">
+        ${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);
+  // clang-format on
+};
+
+export type View = typeof DEFAULT_VIEW;
+
+export class ConsoleInsightTeaser extends UI.Widget.Widget {
+  #view: View;
+  #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) {
+    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;
+    }
+    this.#isInactive = isInactive;
+    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,
+          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/ConsolePanel.ts

@@ -106,6 +106,7 @@ export class WrapperView extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     if (!ConsolePanel.instance().isShowing()) {
       this.showViewInWrapper();
     } else {
@@ -115,6 +116,7 @@ export class WrapperView extends UI.Widget.VBox {
   }
 
   override willHide(): void {
+    super.willHide();
     UI.InspectorView.InspectorView.instance().setDrawerMinimized(false);
     ConsolePanel.updateContextFlavor();
   }

package/front_end/panels/console/ConsolePrompt.ts

@@ -608,8 +608,18 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   private isAiCodeCompletionEnabled(): boolean {
-    return Boolean(
-        Root.Runtime.hostConfig.aidaAvailability?.enabled && Root.Runtime.hostConfig.devToolsAiCodeCompletion?.enabled);
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    const aidaAvailability = Root.Runtime.hostConfig.aidaAvailability;
+    if (!devtoolsLocale.locale.startsWith('en-')) {
+      return false;
+    }
+    if (aidaAvailability?.blockedByGeo) {
+      return false;
+    }
+    if (aidaAvailability?.blockedByAge) {
+      return false;
+    }
+    return Boolean(aidaAvailability?.enabled && Root.Runtime.hostConfig.devToolsAiCodeCompletion?.enabled);
   }
 
   private editorSetForTest(): void {

package/front_end/panels/console/ConsoleSidebar.ts

@@ -109,7 +109,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                         n: group.messageCount
                       })}
                   ${group.messageCount === 0 ? nothing : html`
-                  <ul role="group" ?hidden=${group.filter !== input.selectedFilter}>
+                  <ul role="group" hidden>
                     ${group.urlGroups.values().map(urlGroup => html`
                       <li
                         ${Directives.ref(element => element && nodeFilterMap.set(element, group.filter))}

package/front_end/panels/console/ConsoleView.ts

@@ -767,6 +767,7 @@ export class ConsoleView extends UI.Widget.VBox implements
   }
 
   override willHide(): void {
+    super.willHide();
     this.hidePromptSuggestBox();
   }
 
@@ -1698,6 +1699,17 @@ export class ConsoleView extends UI.Widget.VBox implements
   }
 
   private isAiCodeCompletionEnabled(): boolean {
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    const aidaAvailability = Root.Runtime.hostConfig.aidaAvailability;
+    if (!devtoolsLocale.locale.startsWith('en-')) {
+      return false;
+    }
+    if (aidaAvailability?.blockedByGeo) {
+      return false;
+    }
+    if (aidaAvailability?.blockedByAge) {
+      return false;
+    }
     return Boolean(Root.Runtime.hostConfig.devToolsAiCodeCompletion?.enabled);
   }
 }

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -41,6 +41,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Logs from '../../models/logs/logs.js';
@@ -61,6 +62,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as Security from '../security/security.js';
 
 import {format, updateStyle} from './ConsoleFormat.js';
+import {ConsoleInsightTeaser} from './ConsoleInsightTeaser.js';
 import consoleViewStyles from './consoleView.css.js';
 import type {ConsoleViewportElement} from './ConsoleViewport.js';
 import {augmentErrorStackWithScriptIds, parseSourcePositionsFromErrorStack} from './ErrorStackParser.js';
@@ -317,6 +319,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   private requestResolver: Logs.RequestResolver.RequestResolver;
   private issueResolver: IssuesManager.IssueResolver.IssueResolver;
   #adjacentUserCommandResult = false;
+  #teaser: ConsoleInsightTeaser|undefined = undefined;
 
   /** Formatting Error#stack is asynchronous. Allow tests to wait for the result */
   #formatErrorStackPromiseForTest = Promise.resolve();
@@ -365,7 +368,9 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightClosed);
       this.elementInternal?.classList.toggle('has-insight', false);
       this.elementInternal?.removeChild(insight);
+      this.#teaser?.setInactive(false);
     }, {once: true});
+    this.#teaser?.setInactive(true);
   }
 
   element(): HTMLElement {
@@ -374,6 +379,9 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
 
   wasShown(): void {
     this.isVisibleInternal = true;
+    if (this.elementInternal) {
+      this.#teaser?.show(this.elementInternal);
+    }
   }
 
   onResize(): void {
@@ -382,6 +390,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   willHide(): void {
     this.isVisibleInternal = false;
     this.cachedHeight = this.element().offsetHeight;
+    this.#teaser?.detach();
   }
 
   isVisible(): boolean {
@@ -1334,6 +1343,17 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return this.contentElementInternal;
   }
 
+  #onMouseEnter(_event: MouseEvent): void {
+    if (this.#teaser &&
+        Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').getIfNotDisabled()) {
+      this.#teaser.maybeGenerateTeaser();
+    }
+  }
+
+  #onMouseLeave(): void {
+    this.#teaser?.abortTeaserGeneration();
+  }
+
   toMessageElement(): HTMLElement {
     if (this.elementInternal) {
       return this.elementInternal;
@@ -1341,6 +1361,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     this.elementInternal = document.createElement('div');
     this.elementInternal.tabIndex = -1;
     this.elementInternal.addEventListener('keydown', (this.onKeyDown.bind(this) as EventListener));
+    this.elementInternal.addEventListener('mouseenter', this.#onMouseEnter.bind(this));
+    this.elementInternal.addEventListener('mouseleave', this.#onMouseLeave.bind(this));
     this.updateMessageElement();
     this.elementInternal.classList.toggle('console-adjacent-user-command-result', this.#adjacentUserCommandResult);
     return this.elementInternal;
@@ -1359,6 +1381,13 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     this.elementInternal.removeChildren();
     this.consoleRowWrapper = this.elementInternal.createChild('div');
     this.consoleRowWrapper.classList.add('console-row-wrapper');
+
+    if (this.shouldShowTeaser()) {
+      const uuid = crypto.randomUUID();
+      this.elementInternal.setAttribute('aria-details', `teaser-${uuid}`);
+      this.#teaser = new ConsoleInsightTeaser(uuid, this);
+    }
+
     if (this.message.isGroupStartMessage()) {
       this.elementInternal.classList.add('console-group-title');
     }
@@ -1430,6 +1459,21 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         this.message.level === Protocol.Log.LogEntryLevel.Warning;
   }
 
+  shouldShowTeaser(): boolean {
+    if (!this.shouldShowInsights()) {
+      return false;
+    }
+    if (!Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').getIfNotDisabled() ||
+        !AiAssistanceModel.BuiltInAi.BuiltInAi.cachedIsAvailable()) {
+      return false;
+    }
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    if (!devtoolsLocale.locale.startsWith('en-')) {
+      return false;
+    }
+    return true;
+  }
+
   getExplainLabel(): string {
     if (this.message.level === Protocol.Log.LogEntryLevel.Error) {
       return i18nString(UIStrings.explainThisError);

package/front_end/panels/{explain → console}/PromptBuilder.ts

@@ -9,7 +9,8 @@ import * as Formatter from '../../models/formatter/formatter.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
-import type * as Console from '../console/console.js';
+
+import type {ConsoleViewMessage} from './ConsoleViewMessage.js';
 
 const MAX_MESSAGE_SIZE = 1000;
 const MAX_STACK_TRACE_SIZE = 1000;
@@ -28,9 +29,9 @@ export interface Source {
 }
 
 export class PromptBuilder {
-  #consoleMessage: Console.ConsoleViewMessage.ConsoleViewMessage;
+  #consoleMessage: ConsoleViewMessage;
 
-  constructor(consoleMessage: Console.ConsoleViewMessage.ConsoleViewMessage) {
+  constructor(consoleMessage: ConsoleViewMessage) {
     this.#consoleMessage = consoleMessage;
   }
 
@@ -270,14 +271,18 @@ export function formatNetworkRequest(
     string {
   return `Request: ${request.url()}
 
-${AiAssistanceModel.NetworkRequestFormatter.formatHeaders('Request headers:', request.requestHeaders())}
+${
+      AiAssistanceModel.NetworkRequestFormatter.NetworkRequestFormatter.formatHeaders(
+          'Request headers:', request.requestHeaders())}
 
-${AiAssistanceModel.NetworkRequestFormatter.formatHeaders('Response headers:', request.responseHeaders)}
+${
+      AiAssistanceModel.NetworkRequestFormatter.NetworkRequestFormatter.formatHeaders(
+          'Response headers:', request.responseHeaders)}
 
 Response status: ${request.statusCode} ${request.statusText}`;
 }
 
-export function formatConsoleMessage(message: Console.ConsoleViewMessage.ConsoleViewMessage): string {
+export function formatConsoleMessage(message: ConsoleViewMessage): string {
   return message.toMessageTextString().substr(0, MAX_MESSAGE_SIZE);
 }
 
@@ -285,7 +290,7 @@ export function formatConsoleMessage(message: Console.ConsoleViewMessage.Console
  * This formats the stacktrace from the console message which might or might not
  * match the content of stacktrace(s) in the console message arguments.
  */
-export function formatStackTrace(message: Console.ConsoleViewMessage.ConsoleViewMessage): string {
+export function formatStackTrace(message: ConsoleViewMessage): string {
   const previewContainer = message.contentElement().querySelector('.stack-preview-container');
 
   if (!previewContainer) {

package/front_end/panels/console/console-meta.ts

@@ -133,6 +133,11 @@ const UIStrings = {
    * @description Title of a setting under the Console category in Settings that controls whether `console.trace()` messages appear collapsed by default.
    */
   collapseConsoleTraceMessagesByDefault: 'Do not automatically expand `console.trace()` messages',
+  /**
+   * @description Title of a setting under the Console category in Settings that controls whether AI summaries should
+   * be shown for console warnings/errors.
+   */
+  showConsoleInsightTeasers: 'Show AI summaries for console messages',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/console/console-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -437,6 +442,15 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.CONSOLE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.showConsoleInsightTeasers),
+  settingName: 'console-insight-teasers-enabled',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});
+
 Common.Revealer.registerRevealer({
   contextTypes() {
     return [

package/front_end/panels/console/console.ts

@@ -5,6 +5,7 @@
 import './ConsoleContextSelector.js';
 import './ConsoleFilter.js';
 import './ConsoleFormat.js';
+import './ConsoleInsightTeaser.js';
 import './ConsolePinPane.js';
 import './ConsoleSidebar.js';
 import './ConsoleViewport.js';
@@ -12,10 +13,12 @@ import './ConsoleViewMessage.js';
 import './ConsolePrompt.js';
 import './ConsoleView.js';
 import './ConsolePanel.js';
+import './PromptBuilder.js';
 
 import * as ConsoleContextSelector from './ConsoleContextSelector.js';
 import * as ConsoleFilter from './ConsoleFilter.js';
 import * as ConsoleFormat from './ConsoleFormat.js';
+import * as ConsoleInsightTeaser from './ConsoleInsightTeaser.js';
 import * as ConsolePanel from './ConsolePanel.js';
 import * as ConsolePinPane from './ConsolePinPane.js';
 import * as ConsolePrompt from './ConsolePrompt.js';
@@ -24,11 +27,13 @@ import * as ConsoleView from './ConsoleView.js';
 import * as ConsoleViewMessage from './ConsoleViewMessage.js';
 import * as ConsoleViewport from './ConsoleViewport.js';
 import * as ErrorStackParser from './ErrorStackParser.js';
+import * as PromptBuilder from './PromptBuilder.js';
 
 export {
   ConsoleContextSelector,
   ConsoleFilter,
   ConsoleFormat,
+  ConsoleInsightTeaser,
   ConsolePanel,
   ConsolePinPane,
   ConsolePrompt,
@@ -37,4 +42,5 @@ export {
   ConsoleViewMessage,
   ConsoleViewport,
   ErrorStackParser,
+  PromptBuilder,
 };