chrome-devtools-frontend 1.0.1547147 → 1.0.1548870

package/front_end/panels/application/FrameDetailsView.ts

@@ -12,6 +12,7 @@ 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 Bindings from '../../models/bindings/bindings.js';
+import type * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
@@ -21,14 +22,13 @@ import type * as ExpandableList from '../../ui/components/expandable_list/expand
 import type * as ReportView from '../../ui/components/report_view/report_view.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
+import {html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as ApplicationComponents from './components/components.js';
 import frameDetailsReportViewStyles from './frameDetailsReportView.css.js';
 import {OriginTrialTreeView} from './OriginTrialTreeView.js';
 
-const {until} = Directives;
 const {widgetConfig} = UI.Widget;
 
 const UIStrings = {
@@ -270,12 +270,14 @@ export interface FrameDetailsReportViewData {
 interface FrameDetailsViewInput {
   frame: SDK.ResourceTreeModel.ResourceTreeFrame;
   target: SDK.Target.Target|null;
+  creationStackTrace: StackTrace.StackTrace.StackTrace|null;
+  creationTarget: SDK.Target.Target|null;
   adScriptAncestry: Protocol.Page.AdScriptAncestry|null;
-  linkTargetDOMNode?: Promise<SDK.DOMModel.DOMNode|null>;
-  permissionsPolicies: Promise<Protocol.Page.PermissionsPolicyFeatureState[]|null>|null;
+  linkTargetDOMNode: SDK.DOMModel.DOMNode|null;
+  permissionsPolicies: Protocol.Page.PermissionsPolicyFeatureState[]|null;
   protocolMonitorExperimentEnabled: boolean;
   trials: Protocol.Page.OriginTrial[]|null;
-  securityIsolationInfo?: Promise<Protocol.Network.SecurityIsolationStatus|null>;
+  securityIsolationInfo: Protocol.Network.SecurityIsolationStatus|null;
   onRevealInNetwork?: () => void;
   onRevealInSources: () => void;
 }
@@ -295,11 +297,12 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
       ${renderIsolationSection(input)}
       ${renderApiAvailabilitySection(input.frame)}
       ${renderOriginTrial(input.trials)}
-      ${until(input.permissionsPolicies?.then?.(policies =>
+      ${input.permissionsPolicies ?
         html`
-          <devtools-resources-permissions-policy-section .data=${{policies, showDetails: false} as ApplicationComponents.PermissionsPolicySection.PermissionsPolicySectionData}>
+          <devtools-resources-permissions-policy-section
+             .data=${{policies: input.permissionsPolicies, showDetails: false} as ApplicationComponents.PermissionsPolicySection.PermissionsPolicySectionData}>
           </devtools-resources-permissions-policy-section>
-        `), nothing)}
+        ` : nothing}
       ${input.protocolMonitorExperimentEnabled ? renderAdditionalInfoSection(input.frame) : nothing}
     </devtools-report>
   `, target);
@@ -337,6 +340,7 @@ function renderDocumentSection(input: FrameDetailsViewInput): LitTemplate {
     return nothing;
   }
 
+  // clang-format off
   return html`
       <devtools-report-section-header>${i18nString(UIStrings.document)}</devtools-report-section-header>
       <devtools-report-key>${i18nString(UIStrings.url)}</devtools-report-key>
@@ -349,12 +353,12 @@ function renderDocumentSection(input: FrameDetailsViewInput): LitTemplate {
       </devtools-report-value>
       ${maybeRenderUnreachableURL(input.frame?.unreachableUrl())}
       ${maybeRenderOrigin(input.frame?.securityOrigin)}
-      ${until(input.linkTargetDOMNode?.then?.(value => renderOwnerElement(value)), nothing)}
-      ${maybeRenderCreationStacktrace(input.frame.getCreationStackTraceData())}
+      ${renderOwnerElement(input.linkTargetDOMNode)}
+      ${maybeRenderCreationStacktrace(input.creationStackTrace, input.creationTarget)}
       ${maybeRenderAdStatus(input.frame?.adFrameType(), input.frame?.adFrameStatus())}
       ${maybeRenderCreatorAdScriptAncestry(input.frame?.adFrameType(), input.target, input.adScriptAncestry)}
-      <devtools-report-divider></devtools-report-divider>
-    `;
+      <devtools-report-divider></devtools-report-divider>`;
+  // clang-format on
 }
 
 function renderSourcesLinkForURL(onRevealInSources: () => void): LitTemplate {
@@ -444,22 +448,16 @@ function renderOwnerElement(linkTargetDOMNode: SDK.DOMModel.DOMNode|null): LitTe
 }
 
 function maybeRenderCreationStacktrace(
-    creationStackTraceData:
-        {creationStackTrace: Protocol.Runtime.StackTrace|null, creationStackTraceTarget: SDK.Target.Target}|
-    null): LitTemplate {
-  if (creationStackTraceData?.creationStackTrace) {
+    stackTrace: StackTrace.StackTrace.StackTrace|null, target: SDK.Target.Target|null): LitTemplate {
+  if (stackTrace && target) {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
       return html`
         <devtools-report-key title=${i18nString(UIStrings.creationStackTraceExplanation)}>${
           i18nString(UIStrings.creationStackTrace)}</devtools-report-key>
         <devtools-report-value jslog=${VisualLogging.section('frame-creation-stack-trace')}>
-          <devtools-widget .widgetConfig=${widgetConfig(
-            ApplicationComponents.StackTrace.StackTrace, { data: {
-              creationStackTraceData,
-              buildStackTraceRows: Components.JSPresentationUtils.buildStackTraceRowsForLegacyRuntimeStackTrace }
-            }
-          )}>
+          <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(
+              Components.JSPresentationUtils.StackTracePreviewContent, {target, stackTrace, options: {expandable: true}})}>
           </devtools-widget>
         </devtools-report-value>
       `;
@@ -569,7 +567,7 @@ function renderIsolationSection(input: FrameDetailsViewInput): LitTemplate {
       <devtools-report-value>
         ${input.frame.isCrossOriginIsolated() ? i18nString(UIStrings.yes) : i18nString(UIStrings.no)}
       </devtools-report-value>
-      ${until(input.securityIsolationInfo?.then?.(value => maybeRenderCoopCoepCSPStatus(value)), nothing)}
+      ${maybeRenderCoopCoepCSPStatus(input.securityIsolationInfo)}
       <devtools-report-divider></devtools-report-divider>
     `;
 }
@@ -597,7 +595,7 @@ function getSecureContextExplanation(frame: SDK.ResourceTreeModel.ResourceTreeFr
   return null;
 }
 
-async function maybeRenderCoopCoepCSPStatus(info: Protocol.Network.SecurityIsolationStatus|null): Promise<LitTemplate> {
+function maybeRenderCoopCoepCSPStatus(info: Protocol.Network.SecurityIsolationStatus|null): LitTemplate {
   if (info) {
     return html`
           ${
@@ -845,8 +843,13 @@ function renderAdditionalInfoSection(frame: SDK.ResourceTreeModel.ResourceTreeFr
 export class FrameDetailsReportView extends UI.Widget.Widget {
   #frame?: SDK.ResourceTreeModel.ResourceTreeFrame;
   #target: SDK.Target.Target|null = null;
+  #creationStackTrace: StackTrace.StackTrace.StackTrace|null = null;
+  #creationTarget: SDK.Target.Target|null = null;
+  #securityIsolationInfo: Protocol.Network.SecurityIsolationStatus|null = null;
+  #linkTargetDOMNode: SDK.DOMModel.DOMNode|null = null;
+  #trials: Protocol.Page.OriginTrial[]|null = null;
   #protocolMonitorExperimentEnabled = false;
-  #permissionsPolicies: Promise<Protocol.Page.PermissionsPolicyFeatureState[]|null>|null = null;
+  #permissionsPolicies: Protocol.Page.PermissionsPolicyFeatureState[]|null = null;
   #linkifier = new Components.Linkifier.Linkifier();
   #adScriptAncestry: Protocol.Page.AdScriptAncestry|null = null;
   #view: View;
@@ -859,6 +862,34 @@ export class FrameDetailsReportView extends UI.Widget.Widget {
 
   set frame(frame: SDK.ResourceTreeModel.ResourceTreeFrame) {
     this.#frame = frame;
+    void this.#frame.getPermissionsPolicyState().then(permissionsPolicies => {
+      this.#permissionsPolicies = permissionsPolicies;
+      this.requestUpdate();
+    });
+    const {creationStackTrace: rawCreationStackTrace, creationStackTraceTarget: creationTarget} =
+        frame.getCreationStackTraceData();
+    this.#creationTarget = creationTarget;
+    if (rawCreationStackTrace) {
+      void Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
+          .createStackTraceFromProtocolRuntime(rawCreationStackTrace, creationTarget)
+          .then(creationStackTrace => {
+            this.#creationStackTrace = creationStackTrace;
+            this.requestUpdate();
+          });
+    }
+    const networkManager = frame.resourceTreeModel().target().model(SDK.NetworkManager.NetworkManager);
+    void networkManager?.getSecurityIsolationStatus(frame.id).then(securityIsolationInfo => {
+      this.#securityIsolationInfo = securityIsolationInfo;
+      this.requestUpdate();
+    });
+    void frame.getOwnerDOMNodeOrDocument().then(linkTargetDOMNode => {
+      this.#linkTargetDOMNode = linkTargetDOMNode;
+      this.requestUpdate();
+    });
+    void frame.getOriginTrials().then(trials => {
+      this.#trials = trials;
+      this.requestUpdate();
+    });
     this.requestUpdate();
   }
 
@@ -882,27 +913,24 @@ export class FrameDetailsReportView extends UI.Widget.Widget {
       this.#target = debuggerModel?.target() ?? null;
     }
 
-    if (!this.#permissionsPolicies && this.#frame) {
-      this.#permissionsPolicies = this.#frame.getPermissionsPolicyState();
-    }
     const frame = this.#frame;
     if (!frame) {
       return;
     }
-    const networkManager = frame.resourceTreeModel().target().model(SDK.NetworkManager.NetworkManager);
-    const securityIsolationInfo = networkManager?.getSecurityIsolationStatus(frame.id);
-    const linkTargetDOMNode = frame.getOwnerDOMNodeOrDocument();
     const frameRequest = frame.resourceForURL(frame.url)?.request;
+
     const input = {
       frame,
       target: this.#target,
+      creationStackTrace: this.#creationStackTrace,
+      creationTarget: this.#creationTarget,
       protocolMonitorExperimentEnabled: this.#protocolMonitorExperimentEnabled,
       permissionsPolicies: this.#permissionsPolicies,
       adScriptAncestry: this.#adScriptAncestry,
       linkifier: this.#linkifier,
-      linkTargetDOMNode,
-      trials: await frame.getOriginTrials(),
-      securityIsolationInfo,
+      linkTargetDOMNode: this.#linkTargetDOMNode,
+      trials: this.#trials,
+      securityIsolationInfo: this.#securityIsolationInfo,
       onRevealInNetwork: frameRequest ?
           () => {
             const requestLocation = NetworkForward.UIRequestLocation.UIRequestLocation.tab(

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -410,7 +410,7 @@ export class ServiceWorkerCacheView extends UI.View.SimpleView {
     }
 
     // It is possible that table selection changes before the preview opens.
-    if (this.dataGrid?.selectedNode && request === this.dataGrid.selectedNode.data) {
+    if (request === this.dataGrid?.selectedNode?.data) {
       this.showPreview(preview);
     }
   }

package/front_end/panels/application/components/components.ts

@@ -12,7 +12,6 @@ import * as ReportsGrid from './ReportsGrid.js';
 import * as ServiceWorkerRouterView from './ServiceWorkerRouterView.js';
 import * as SharedStorageAccessGrid from './SharedStorageAccessGrid.js';
 import * as SharedStorageMetadataView from './SharedStorageMetadataView.js';
-import * as StackTrace from './StackTrace.js';
 import * as StorageMetadataView from './StorageMetadataView.js';
 import * as TrustTokensView from './TrustTokensView.js';
 
@@ -27,7 +26,6 @@ export {
   ServiceWorkerRouterView,
   SharedStorageAccessGrid,
   SharedStorageMetadataView,
-  StackTrace,
   StorageMetadataView,
   TrustTokensView,
 };

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -94,6 +94,14 @@ const DATA_USAGE_URL = 'https://developer.chrome.com/docs/devtools/ai-assistance
 const EXPLAIN_TEASER_ACTION_ID = 'explain.console-message.teaser';
 const SLOW_GENERATION_CUTOFF_MILLISECONDS = 3500;
 
+const enum State {
+  READY = 'ready',
+  GENERATING = 'generating',          // Before receiving first chunk
+  PARTIAL_TEASER = 'partial-teaser',  // After receiving first chunk
+  TEASER = 'teaser',
+  ERROR = 'error',
+}
+
 interface ViewInput {
   onTellMeMoreClick: (event: Event) => void;
   // If multiple ConsoleInsightTeasers exist, each one needs a unique id. Otherwise showing and
@@ -105,7 +113,121 @@ interface ViewInput {
   dontShowChanged: (e: Event) => void;
   hasTellMeMoreButton: boolean;
   isSlowGeneration: boolean;
-  isError: boolean;
+  state: State;
+}
+
+function renderGenerating(input: ViewInput): Lit.TemplateResult {
+  // clang-format off
+  return html`
+    <div class="teaser-tooltip-container">
+      <div class="response-container">
+        <h2>${input.isSlowGeneration ?
+          lockedString(UIStringsNotTranslate.summarizingTakesABitLonger) :
+          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="58">
+            <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>
+      </div>
+      ${renderFooter(input)}
+    </div>
+  `;
+  // clang-format on
+}
+
+function renderError(input: ViewInput): Lit.TemplateResult {
+  // clang-format off
+  return html`
+    <div class="teaser-tooltip-container">
+      <h2>${lockedString(UIStringsNotTranslate.summaryNotAvailable)}</h2>
+      ${renderFooter(input)}
+    </div>
+  `;
+  // clang-format on
+}
+
+function renderDontShowCheckbox(input: ViewInput): Lit.TemplateResult {
+  // clang-format off
+  return html`
+    <devtools-checkbox
+      aria-label=${lockedString(UIStringsNotTranslate.dontShow)}
+      @change=${input.dontShowChanged}
+      jslog=${VisualLogging.toggle('explain.teaser.dont-show').track({ change: true })}>
+      ${lockedString(UIStringsNotTranslate.dontShow)}
+    </devtools-checkbox>
+  `;
+  // clang-format on
+}
+
+function renderFooter(input: ViewInput): Lit.TemplateResult {
+  // clang-format off
+  return html`
+    <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-button
+        .iconName=${'info'}
+        .variant=${Buttons.Button.Variant.ICON}
+        aria-details=${'teaser-info-tooltip-' + input.uuid}
+        .accessibleLabel=${lockedString(UIStringsNotTranslate.learnDataUsage)}
+      ></devtools-button>
+      <devtools-tooltip
+        id=${'teaser-info-tooltip-' + input.uuid}
+        variant="rich"
+        jslogContext="teaser-info-tooltip"
+        trigger="both"
+        hover-delay=500
+      >
+        <div class="info-tooltip-text">${lockedString(UIStringsNotTranslate.infoTooltipText)}</div>
+        <div class="learn-more">
+          <x-link
+            class="devtools-link"
+            title=${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}
+            href=${DATA_USAGE_URL}
+            jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('explain.teaser.learn-more')}
+          >${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}</x-link>
+        </div>
+      </devtools-tooltip>
+      ${renderDontShowCheckbox(input)}
+    </div>
+  `;
+  // clang-format on
+}
+
+function renderTeaser(input: ViewInput): Lit.TemplateResult {
+  // clang-format off
+  return html`
+    <div class="teaser-tooltip-container">
+      <div class="response-container">
+        <h2>${input.headerText}</h2>
+        <div class="main-text">${input.mainText}</div>
+      </div>
+      ${renderFooter(input)}
+    </div>
+  `;
+  // clang-format on
 }
 
 export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
@@ -114,7 +236,6 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
     return;
   }
 
-  const showPlaceholder = !Boolean(input.mainText);
   // clang-format off
   render(html`
     <style>${consoleInsightTeaserStyles}</style>
@@ -126,83 +247,18 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
       prefer-span-left
       jslogContext="console-insight-teaser"
     >
-      <div class="teaser-tooltip-container">
-        ${input.isError ? html`
-          <h2>${lockedString(UIStringsNotTranslate.summaryNotAvailable)}</h2>
-        ` :
-          showPlaceholder ? html`
-            <div class="response-container">
-              <h2>${input.isSlowGeneration ?
-                lockedString(UIStringsNotTranslate.summarizingTakesABitLonger) :
-                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="58">
-                  <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>
-            </div>
-          ` : html`
-            <div class="response-container">
-              <h2>${input.headerText}</h2>
-              <div class="main-text">${input.mainText}</div>
-            </div>
-          `
+      ${(() => {
+        switch (input.state) {
+          case State.READY:
+          case State.GENERATING:
+            return renderGenerating(input);
+          case State.ERROR:
+            return renderError(input);
+          case State.PARTIAL_TEASER:
+          case State.TEASER:
+            return renderTeaser(input);
         }
-        <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-button
-            .iconName=${'info'}
-            .variant=${Buttons.Button.Variant.ICON}
-            aria-details=${'teaser-info-tooltip-' + input.uuid}
-            .accessibleLabel=${lockedString(UIStringsNotTranslate.learnDataUsage)}
-          ></devtools-button>
-          <devtools-tooltip
-            id=${'teaser-info-tooltip-' + input.uuid}
-            variant="rich"
-            jslogContext="teaser-info-tooltip"
-            trigger="both"
-            hover-delay=500
-          >
-            <div class="info-tooltip-text">${lockedString(UIStringsNotTranslate.infoTooltipText)}</div>
-            <div class="learn-more">
-              <x-link
-                class="devtools-link"
-                title=${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}
-                href=${DATA_USAGE_URL}
-                jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('explain.teaser.learn-more')}
-              >${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}</x-link>
-            </div>
-          </devtools-tooltip>
-          <devtools-checkbox
-            aria-label=${lockedString(UIStringsNotTranslate.dontShow)}
-            @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
@@ -213,8 +269,7 @@ export type View = typeof DEFAULT_VIEW;
 export class ConsoleInsightTeaser extends UI.Widget.Widget {
   #view: View;
   #uuid: string;
-  #isGenerating = false;
-  #builtInAi: AiAssistanceModel.BuiltInAi.BuiltInAi|undefined;
+  #builtInAi: AiAssistanceModel.BuiltInAi.BuiltInAi;
   #promptBuilder: PromptBuilder;
   #headerText = '';
   #mainText = '';
@@ -223,9 +278,9 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
   #abortController: null|AbortController = null;
   #isSlow = false;
   #timeoutId: ReturnType<typeof setTimeout>|null = null;
-  #isError = false;
   #aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
   #boundOnAidaAvailabilityChange: () => Promise<void>;
+  #state: State;
 
   constructor(uuid: string, consoleViewMessage: ConsoleViewMessage, element?: HTMLElement, view?: View) {
     super(element);
@@ -234,6 +289,8 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     this.#promptBuilder = new PromptBuilder(consoleViewMessage);
     this.#consoleViewMessage = consoleViewMessage;
     this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
+    this.#builtInAi = AiAssistanceModel.BuiltInAi.BuiltInAi.instance();
+    this.#state = State.READY;
     this.requestUpdate();
   }
 
@@ -316,10 +373,24 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
   }
 
   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();
+    switch (this.#state) {
+      case State.READY:
+        if (!this.#isInactive &&
+            Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').get()) {
+          void this.#generateTeaserText();
+        }
+        this.requestUpdate();
+        return;
+      case State.GENERATING:
+        console.error('Trying trigger teaser generation when state is "GENERATING"');
+        return;
+      case State.PARTIAL_TEASER:
+        console.error('Trying trigger teaser generation when state is "PARTIAL_TEASER"');
+        return;
+      // These are terminal states. No need to update anything.
+      case State.TEASER:
+      case State.ERROR:
+        return;
     }
   }
 
@@ -327,11 +398,11 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     if (this.#abortController) {
       this.#abortController.abort();
     }
-    if (this.#isGenerating) {
+    if (this.#state === State.GENERATING || this.#state === State.PARTIAL_TEASER) {
       this.#mainText = '';
+      this.#state = State.READY;
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationAborted);
     }
-    this.#isGenerating = false;
     if (this.#timeoutId) {
       clearTimeout(this.#timeoutId);
     }
@@ -352,7 +423,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
 
   async #generateTeaserText(): Promise<void> {
     this.#headerText = this.#consoleViewMessage.toMessageTextString().substring(0, 70);
-    this.#isGenerating = true;
+    this.#state = State.GENERATING;
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationStarted);
     this.#timeoutId = setTimeout(this.#setSlow.bind(this), SLOW_GENERATION_CUTOFF_MILLISECONDS);
     const startTime = performance.now();
@@ -362,6 +433,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
       for await (const chunk of this.#getOnDeviceInsight()) {
         teaserText += chunk;
         this.#mainText = teaserText;
+        this.#state = State.PARTIAL_TEASER;
         this.requestUpdate();
         if (!firstChunkReceived) {
           firstChunkReceived = true;
@@ -370,12 +442,13 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
       }
     } catch (err) {
       // Ignore `AbortError` errors, which are thrown on mouse leave.
-      if (err.name !== 'AbortError') {
+      if (err.name === 'AbortError') {
+        this.#state = State.READY;
+      } else {
         console.error(err.name, err.message);
-        this.#isError = true;
+        this.#state = State.ERROR;
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationErrored);
       }
-      this.#isGenerating = false;
       clearTimeout(this.#timeoutId);
       this.requestUpdate();
       return;
@@ -383,7 +456,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
 
     clearTimeout(this.#timeoutId);
     Host.userMetrics.consoleInsightTeaserGenerated(performance.now() - startTime);
-    this.#isGenerating = false;
+    this.#state = State.TEASER;
     this.#mainText = teaserText;
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationCompleted);
     this.requestUpdate();
@@ -391,13 +464,6 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
 
   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) {
@@ -436,7 +502,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
           dontShowChanged: this.#dontShowChanged.bind(this),
           hasTellMeMoreButton: this.#hasTellMeMoreButton(),
           isSlowGeneration: this.#isSlow,
-          isError: this.#isError,
+          state: this.#state,
         },
         undefined, this.contentElement);
   }

package/front_end/panels/console/ConsolePrompt.ts

@@ -285,7 +285,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     if (preview.deepTextContent() !== TextEditor.Config.contentIncludingHint(this.editor.editor).trim()) {
       this.innerPreviewElement.appendChild(preview);
     }
-    if (result && 'object' in result && result.object && result.object.subtype === 'node') {
+    if (result && 'object' in result && result.object?.subtype === 'node') {
       this.highlightingNode = true;
       SDK.OverlayModel.OverlayModel.highlightObjectAsDOMNode(result.object);
     } else if (this.highlightingNode) {