chrome-devtools-frontend 1.0.1550444 → 1.0.1553956

package/front_end/panels/common/AnnotationManager.ts

@@ -6,12 +6,20 @@ import type * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Annotations from '../../ui/components/annotations/annotations.js';
 
+import {Annotation} from './Annotation.js';
+
+interface AnnotationData {
+  id: number;
+  type: Annotations.AnnotationType;
+  annotation: Annotation;
+}
+
 interface AnnotationPlacement {
   parentElement: Element;
   insertBefore?: Node|null;
-  resolveRelativePosition:
-      (parentElement: Element, revealNode: boolean, lookupId: string,
-       node?: SDK.DOMModel.DOMNode) => Promise<{x: number, y: number}|null>;
+  resolveInitialState:
+      (parentElement: Element, reveal: boolean, lookupId: string,
+       anchor?: SDK.DOMModel.DOMNode|SDK.NetworkRequest.NetworkRequest) => Promise<{x: number, y: number}|null>;
 }
 
 // This class handles general management of Annotations, the data needed to display them and any panel-specific things
@@ -23,6 +31,8 @@ export class AnnotationManager {
   static #instance: AnnotationManager|null = null;
 
   #annotationPlacements: Map<Annotations.AnnotationType, AnnotationPlacement>|null = null;
+  #annotations = new Map<number, AnnotationData>();
+  #synced = false;
 
   constructor() {
     if (!Annotations.AnnotationRepository.annotationsEnabled()) {
@@ -32,6 +42,10 @@ export class AnnotationManager {
 
     Annotations.AnnotationRepository.instance().addEventListener(
         Annotations.Events.ANNOTATION_ADDED, this.#onAnnotationAdded, this);
+    Annotations.AnnotationRepository.instance().addEventListener(
+        Annotations.Events.ANNOTATION_DELETED, this.#onAnnotationDeleted, this);
+    Annotations.AnnotationRepository.instance().addEventListener(
+        Annotations.Events.ALL_ANNOTATIONS_DELETED, this.#onAllAnnotationsDeleted, this);
   }
 
   static instance(): AnnotationManager {
@@ -43,9 +57,9 @@ export class AnnotationManager {
 
   initializePlacementForAnnotationType(
       type: Annotations.AnnotationType,
-      resolveRelativePosition:
-          (parentElement: Element, revealNode: boolean, lookupId: string,
-           node?: SDK.DOMModel.DOMNode) => Promise<{x: number, y: number}|null>,
+      resolveInitialState:
+          (parentElement: Element, reveal: boolean, lookupId: string,
+           anchor?: SDK.DOMModel.DOMNode|SDK.NetworkRequest.NetworkRequest) => Promise<{x: number, y: number}|null>,
       parentElement: Element, insertBefore: Node|null = null): void {
     if (!Annotations.AnnotationRepository.annotationsEnabled()) {
       return;
@@ -54,18 +68,141 @@ export class AnnotationManager {
     if (!this.#annotationPlacements) {
       this.#annotationPlacements = new Map();
     }
-    this.#annotationPlacements.set(type, {parentElement, insertBefore, resolveRelativePosition});
+    this.#annotationPlacements.set(type, {parentElement, insertBefore, resolveInitialState});
 
     // eslint-disable-next-line no-console
     console.log(
         `[AnnotationManager] initializing placement for ${Annotations.AnnotationType[type]}`, {parentElement},
         'placement count:', this.#annotationPlacements);
+
+    this.#syncAnnotations();
+  }
+
+  #syncAnnotations(): void {
+    if (this.#synced) {
+      return;
+    }
+
+    // eslint-disable-next-line no-console
+    console.log('[AnnotationManager] **** SYNC STARTED ***');
+    const repository = Annotations.AnnotationRepository.instance();
+    for (const type of Object.values(Annotations.AnnotationType)) {
+      for (const annotation of repository.getAnnotationDataByType(type as Annotations.AnnotationType)) {
+        // eslint-disable-next-line no-console
+        console.log(
+            '[AnnotationManager] Available annotation:', annotation,
+            'need sync:', !this.#annotations.has(annotation.id));
+        if (!this.#annotations.has(annotation.id)) {
+          this.#addAnnotation(annotation);
+        }
+      }
+    }
+    this.#synced = true;
+  }
+
+  #onAllAnnotationsDeleted(): void {
+    for (const annotation of this.#annotations.values()) {
+      annotation.annotation.hide();
+    }
+    this.#annotations = new Map();
+    // eslint-disable-next-line no-console
+    console.log('[AnnotationManager] deleted all annotations');
+  }
+
+  #onAnnotationDeleted(
+      event: Common.EventTarget.EventTargetEvent<Annotations.EventTypes[Annotations.Events.ANNOTATION_DELETED]>): void {
+    const {id} = event.data;
+    const annotation = this.#annotations.get(id);
+    if (annotation) {
+      annotation.annotation.hide();
+      this.#annotations.delete(id);
+    }
+    // eslint-disable-next-line no-console
+    console.log(`[AnnotationManager] Deleted annotation with id ${id}`);
   }
 
-  async #onAnnotationAdded(
-      event: Common.EventTarget.EventTargetEvent<Annotations.EventTypes[Annotations.Events.ANNOTATION_ADDED]>):
-      Promise<void> {
+  #onAnnotationAdded(
+      event: Common.EventTarget.EventTargetEvent<Annotations.EventTypes[Annotations.Events.ANNOTATION_ADDED]>): void {
+    const annotationData = event.data;
     // eslint-disable-next-line no-console
-    console.log('[AnnotationManager] received event onAnnotationAdded', event);
+    console.log('[AnnotationManager] handleAddAnnotation', annotationData);
+    this.#addAnnotation(annotationData);
+  }
+
+  #addAnnotation(annotationData: Annotations.BaseAnnotationData): void {
+    const expandable = annotationData.type !== Annotations.AnnotationType.NETWORK_REQUEST;
+    const showExpanded = annotationData.type !== Annotations.AnnotationType.NETWORK_REQUEST;
+    const showAnchored = annotationData.type !== Annotations.AnnotationType.NETWORK_REQUEST;
+    const showCloseButton = annotationData.type !== Annotations.AnnotationType.NETWORK_REQUEST;
+    const annotation = new Annotation(
+        annotationData.id, annotationData.message, showExpanded, showAnchored, expandable, showCloseButton);
+    this.#annotations.set(annotationData.id, {id: annotationData.id, type: annotationData.type, annotation});
+    // eslint-disable-next-line no-console
+    console.log('[AnnotationManager] addAnnotation called. Annotations now', this.#annotations);
+    requestAnimationFrame(async () => {
+      await this.#resolveAnnotationWithId(annotationData.id);
+    });
+  }
+
+  async resolveAnnotationsOfType(type: Annotations.AnnotationType): Promise<void> {
+    for (const annotationData of this.#annotations.values()) {
+      if (annotationData.type === type) {
+        await this.#resolveAnnotationWithId(annotationData.id);
+      }
+    }
+  }
+
+  async #resolveAnnotationWithId(id: number): Promise<void> {
+    const annotation = this.#annotations.get(id);
+    if (!annotation) {
+      console.warn('Unable to find annotation with id', id, ' in annotations map', this.#annotations);
+      return;
+    }
+
+    const placement = this.#annotationPlacements?.get(annotation.type);
+    if (!placement) {
+      console.warn(
+          'Unable to find placement for annotation with id', id,
+          '(note: this is expected if its panel hasn\'t been shown yet).');
+      return;
+    }
+
+    let position = undefined;
+    const annotationRegistration = Annotations.AnnotationRepository.instance().getAnnotationDataById(id);
+    const reveal = !annotation.annotation.hasShown();
+    switch (annotationRegistration?.type) {
+      case Annotations.AnnotationType.ELEMENT_NODE: {
+        const elementData = annotationRegistration as Annotations.ElementsAnnotationData;
+        position = await placement.resolveInitialState(
+            placement.parentElement, reveal, elementData.lookupId, elementData.anchor);
+        break;
+      }
+      case Annotations.AnnotationType.NETWORK_REQUEST: {
+        const networkRequestData = annotationRegistration as Annotations.NetworkRequestAnnotationData;
+        position = await placement.resolveInitialState(
+            placement.parentElement, reveal, networkRequestData.lookupId, networkRequestData.anchor);
+        break;
+      }
+      case Annotations.AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS: {
+        const networkRequestDetailsData = annotationRegistration as Annotations.NetworkRequestDetailsAnnotationData;
+        position = await placement.resolveInitialState(
+            placement.parentElement, reveal, networkRequestDetailsData.lookupId, networkRequestDetailsData.anchor);
+        break;
+      }
+      default:
+        console.warn('[AnnotationManager] Unknown AnnotationType', annotationRegistration?.type);
+    }
+
+    if (!position) {
+      // eslint-disable-next-line no-console
+      console.log(`Unable to calculate position for annotation with id ${annotationRegistration?.id}`);
+      return;
+    }
+
+    annotation.annotation.setCoordinates(position.x, position.y);
+
+    if (!annotation.annotation.isShowing()) {
+      annotation.annotation.show(placement.parentElement, placement.insertBefore);
+    }
   }
 }

package/front_end/panels/common/ExtensionView.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Extensions from '../../models/extensions/extensions.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 
@@ -110,3 +111,49 @@ export class ExtensionNotifierView extends UI.Widget.VBox {
     this.server.notifyViewHidden(this.id);
   }
 }
+
+export class ExtensionIframe {
+  #descriptor: Extensions.RecorderPluginManager.ViewDescriptor;
+  #iframe: HTMLIFrameElement;
+  #isShowing = false;
+  #isLoaded = false;
+
+  constructor(descriptor: Extensions.RecorderPluginManager.ViewDescriptor) {
+    this.#descriptor = descriptor;
+    // We are creating a single iframe here.
+    /* eslint-disable-next-line @devtools/no-imperative-dom-api */
+    this.#iframe = document.createElement('iframe');
+    this.#iframe.src = descriptor.pagePath;
+    this.#iframe.onload = this.#onIframeLoad;
+  }
+
+  #onIframeLoad = (): void => {
+    this.#isLoaded = true;
+    if (this.#isShowing) {
+      this.#descriptor.onShown();
+    }
+  };
+
+  show(): void {
+    if (this.#isShowing) {
+      return;
+    }
+    this.#isShowing = true;
+    if (this.#isLoaded) {
+      this.#descriptor.onShown();
+    }
+  }
+
+  hide(): void {
+    if (!this.#isShowing) {
+      return;
+    }
+    this.#isShowing = false;
+    this.#isLoaded = false;
+    this.#descriptor.onHidden();
+  }
+
+  frame(): HTMLIFrameElement {
+    return this.#iframe;
+  }
+}

package/front_end/panels/common/PersistenceUtils.ts

@@ -2,14 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/kit/kit.js';
+
 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 {Icon} from '../../ui/kit/kit.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
-import * as UI from '../../ui/legacy/legacy.js';
+import {html, type LitTemplate} from '../../ui/lit/lit.js';
 
 const UIStrings = {
   /**
@@ -42,23 +43,21 @@ export class PersistenceUtils {
     return i18nString(UIStrings.linkedToS, {PH1: Platform.StringUtilities.trimMiddle(binding.network.url(), 150)});
   }
 
-  static iconForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): Icon|null {
+  static iconForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): LitTemplate|null {
     const binding = Persistence.Persistence.PersistenceImpl.instance().binding(uiSourceCode);
     if (binding) {
       if (!Common.ParsedURL.schemeIs(binding.fileSystem.url(), 'file:')) {
         return null;
       }
-      const icon = new Icon();
-      icon.name = 'document';
-      icon.classList.add('small');
-      UI.Tooltip.Tooltip.install(icon, PersistenceUtils.tooltipForUISourceCode(binding.network));
-      if (Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().project() ===
-          binding.fileSystem.project()) {
-        icon.classList.add('dot', 'purple');
-      } else {
-        icon.classList.add('dot', 'green');
-      }
-      return icon;
+      const dotClass = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().project() ===
+              binding.fileSystem.project() ?
+          'purple' :
+          'green';
+      // clang-format off
+      return html`<devtools-icon class="small dot ${dotClass}" name="document"
+                                 title=${PersistenceUtils.tooltipForUISourceCode(binding.network)}>
+                  </devtools-icon>`;
+      // clang-format on
     }
 
     if (uiSourceCode.project().type() !== Workspace.Workspace.projectTypes.FileSystem ||
@@ -68,18 +67,16 @@ export class PersistenceUtils {
 
     if (Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().isActiveHeaderOverrides(
             uiSourceCode)) {
-      const icon = new Icon();
-      icon.name = 'document';
-      icon.classList.add('small');
-      icon.classList.add('dot', 'purple');
-      return icon;
+      // clang-format off
+      return html`<devtools-icon class="small dot purple" name="document"></devtools-icon>`;
+      // clang-format on
     }
 
-    const icon = new Icon();
-    icon.name = 'document';
-    icon.classList.add('small');
-    UI.Tooltip.Tooltip.install(icon, PersistenceUtils.tooltipForUISourceCode(uiSourceCode));
-    return icon;
+    // clang-format off
+    return html`<devtools-icon class="small" name="document"
+                               title=${PersistenceUtils.tooltipForUISourceCode(uiSourceCode)}>
+                </devtools-icon>`;
+    // clang-format on
   }
 }
 
@@ -96,7 +93,7 @@ export class LinkDecorator extends Common.ObjectWrapper.ObjectWrapper<Components
     this.dispatchEventToListeners(Components.Linkifier.LinkDecorator.Events.LINK_ICON_CHANGED, binding.network);
   }
 
-  linkIcon(uiSourceCode: Workspace.UISourceCode.UISourceCode): Icon|null {
+  linkIcon(uiSourceCode: Workspace.UISourceCode.UISourceCode): LitTemplate|null {
     return PersistenceUtils.iconForUISourceCode(uiSourceCode);
   }
 }

package/front_end/panels/common/annotation.css

@@ -0,0 +1,40 @@
+/**
+ * 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.
+ */
+
+.overlay {
+  position: absolute;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  /* From the other bubble */
+  background-color: var(--color-background-inverted);
+  color: var(--color-background);
+  pointer-events: auto;
+  border-radius: var(--sys-shape-corner-extra-small);
+  white-space: pre-wrap;
+  max-width: 300px;
+  width: max-content;
+  padding: var(--sys-size-3) var(--sys-size-4);
+  font-family: var(--default-font-family);
+  font-size: var(--sys-typescale-body2-size);
+  font-weight: var(--ref-typeface-weight-medium);
+  outline: 2px solid var(--color-background);
+}
+
+.connectorContainer {
+  z-index: 1000;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.close-button {
+  position: absolute;
+  top:1px;
+  z-index: 1000;
+  cursor: pointer;
+}

package/front_end/panels/common/common.ts

@@ -107,3 +107,4 @@ export * as ExtensionServer from './ExtensionServer.js';
 export * as ExtensionView from './ExtensionView.js';
 export * as PersistenceUtils from './PersistenceUtils.js';
 export * as DOMLinkifier from './DOMLinkifier.js';
+export * as ExtensionIframe from './ExtensionView.js';

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -8,6 +8,7 @@ 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 Protocol from '../../generated/protocol.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';
@@ -21,6 +22,8 @@ import {PromptBuilder} from './PromptBuilder.js';
 
 const {render, html} = Lit;
 
+const BUILT_IN_AI_DOCUMENTATION = 'https://developer.chrome.com/docs/ai/built-in';
+
 const UIStringsNotTranslate = {
   /**
    * @description Link text in the disclaimer dialog, linking to a settings page containing more information
@@ -85,6 +88,35 @@ const UIStringsNotTranslate = {
    * @description Header text if there was an error during AI summary generation
    */
   summaryNotAvailable: 'Summary not available',
+  /**
+   * @description Header text informing the user that they can get an AI-generated explanation
+   */
+  getHelpForWarning: 'Get help understanding this warning',
+  /**
+   * @description Header text informing the user that they can get an AI-generated explanation
+   */
+  getHelpForError: 'Get help understanding this error',
+  /**
+   * @description Call to action for downloading an AI model
+   */
+  toUseDownload: 'To use Chrome’s Built-in AI here and elsewhere, download the AI model (~4 GB).',
+  /**
+   * @description Button text to trigger model download
+   */
+  downloadModel: 'Download model',
+  /**
+   * @description Header text while the model download is in progress
+   */
+  downloadingAiModel: 'Downloading AI model',
+  /**
+   * @description Label for a progress bar for the AI model download
+   */
+  progress: 'Progress',
+  /**
+   * @description Progress indicator when the progress status is unknown. If the
+   * progress status is known, this is replaced by a progress bar.
+   */
+  progressUnknown: 'Progress: unknown',
 } as const;
 
 const lockedString = i18n.i18n.lockedString;
@@ -95,6 +127,8 @@ const EXPLAIN_TEASER_ACTION_ID = 'explain.console-message.teaser';
 const SLOW_GENERATION_CUTOFF_MILLISECONDS = 3500;
 
 const enum State {
+  NO_MODEL = 'no-model',
+  DOWNLOADING = 'downloading',
   READY = 'ready',
   GENERATING = 'generating',          // Before receiving first chunk
   PARTIAL_TEASER = 'partial-teaser',  // After receiving first chunk
@@ -113,7 +147,91 @@ interface ViewInput {
   dontShowChanged: (e: Event) => void;
   hasTellMeMoreButton: boolean;
   isSlowGeneration: boolean;
+  onDownloadModelClick: (event: Event) => void;
+  downloadProgress: number|null;
   state: State;
+  isForWarning: boolean;
+}
+
+function renderNoModel(input: ViewInput): Lit.TemplateResult {
+  // clang-format off
+  return html`
+    <div class="teaser-tooltip-container">
+      <div class="response-container">
+        <h2>${input.isForWarning ?
+          lockedString(UIStringsNotTranslate.getHelpForWarning) :
+          lockedString(UIStringsNotTranslate.getHelpForError)}
+        </h2>
+        <div>You can get quick answers from
+          <x-link
+            .jslog=${VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context('insights-teaser-built-in-ai-documentation')}
+            class="link"
+            href=${BUILT_IN_AI_DOCUMENTATION}
+          >
+            Chrome’s Built-in AI
+          </x-link>
+          , without any data leaving your device.
+        </div>
+        <div>${lockedString(UIStringsNotTranslate.toUseDownload)}</div>
+      </div>
+      <div class="tooltip-footer">
+        <devtools-button
+          title=${lockedString(UIStringsNotTranslate.downloadModel)}
+          .jslogContext=${'insights-teaser-download-model'}
+          .variant=${Buttons.Button.Variant.PRIMARY}
+          @click=${input.onDownloadModelClick}
+          @focusout=${(e: Event) => {
+            e.stopPropagation();
+          }}
+        >
+          ${lockedString(UIStringsNotTranslate.downloadModel)}
+        </devtools-button>
+        ${renderDontShowCheckbox(input)}
+      </div>
+    </div>
+  `;
+  // clang-format on
+}
+
+function renderDownloading(input: ViewInput): Lit.TemplateResult {
+  const percent = ((input.downloadProgress || 0) * 100).toFixed(0);
+  // clang-format off
+  return html`
+    <div class="teaser-tooltip-container">
+      <div class="response-container">
+        <h2>${lockedString(UIStringsNotTranslate.downloadingAiModel)}</h2>
+        <div class="progress-line">
+          ${input.downloadProgress === null ?
+            html`
+              <div class="label">${lockedString(UIStringsNotTranslate.progressUnknown)}</div>
+            ` : html`
+              <div class="label">${lockedString(UIStringsNotTranslate.progress)}</div>
+              <div class="indicator-container">
+                <div
+                  class="indicator"
+                  role="progressbar"
+                  aria-valuemin="0"
+                  aria-valuemax="100"
+                  aria-valuenow=${percent}
+                  style="width: ${percent}%"
+                ></div>
+              </div>
+          `}
+        </div>
+      </div>
+      <div class="tooltip-footer">
+        <devtools-button
+          title=${lockedString(UIStringsNotTranslate.downloadModel)}
+          .jslogContext=${'insights-teaser-download-model'}
+          .variant=${Buttons.Button.Variant.PRIMARY}
+          .disabled=${true}
+        >
+          ${lockedString(UIStringsNotTranslate.downloadModel)}
+        </devtools-button>
+      </div>
+    </div>
+  `;
+  // clang-format on
 }
 
 function renderGenerating(input: ViewInput): Lit.TemplateResult {
@@ -249,6 +367,10 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
     >
       ${(() => {
         switch (input.state) {
+          case State.NO_MODEL:
+            return renderNoModel(input);
+          case State.DOWNLOADING:
+            return renderDownloading(input);
           case State.READY:
           case State.GENERATING:
             return renderGenerating(input);
@@ -280,7 +402,12 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
   #timeoutId: ReturnType<typeof setTimeout>|null = null;
   #aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
   #boundOnAidaAvailabilityChange: () => Promise<void>;
+  #boundOnDownloadProgressChange: (event: Common.EventTarget.EventTargetEvent<number>) => void;
+  #boundOnSessionCreation: () => void;
+  #downloadProgress: number|null = null;
   #state: State;
+  #eventListeners: Common.EventTarget.EventDescriptor[] = [];
+  #isForWarning: boolean;
 
   constructor(uuid: string, consoleViewMessage: ConsoleViewMessage, element?: HTMLElement, view?: View) {
     super(element);
@@ -288,9 +415,12 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     this.#uuid = uuid;
     this.#promptBuilder = new PromptBuilder(consoleViewMessage);
     this.#consoleViewMessage = consoleViewMessage;
+    this.#isForWarning = this.#consoleViewMessage.consoleMessage().level === Protocol.Log.LogEntryLevel.Warning;
     this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
+    this.#boundOnDownloadProgressChange = this.#onDownloadProgressChange.bind(this);
+    this.#boundOnSessionCreation = this.#onSessionCreation.bind(this);
     this.#builtInAi = AiAssistanceModel.BuiltInAi.BuiltInAi.instance();
-    this.#state = State.READY;
+    this.#state = this.#builtInAi.hasSession() ? State.READY : State.NO_MODEL;
     this.requestUpdate();
   }
 
@@ -330,6 +460,27 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     void this.#showFreDialog();
   }
 
+  #onDownloadModelClick(event: Event): void {
+    event.stopPropagation();
+    this.#state = State.DOWNLOADING;
+    this.#builtInAi.startDownloadingModel();
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserModelDownloadStarted);
+    this.requestUpdate();
+  }
+
+  #onDownloadProgressChange(event: Common.EventTarget.EventTargetEvent<number>): void {
+    this.#downloadProgress = event.data;
+    this.requestUpdate();
+  }
+
+  #onSessionCreation(): void {
+    if (this.#builtInAi.hasSession() && (this.#state === State.NO_MODEL || this.#state === State.DOWNLOADING)) {
+      this.#state = State.READY;
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserModelDownloadCompleted);
+      this.maybeGenerateTeaser();
+    }
+  }
+
   async #showFreDialog(): Promise<void> {
     const noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
         Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
@@ -373,14 +524,41 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
   }
 
   maybeGenerateTeaser(): void {
+    const startGeneratingTeaser = (): void => {
+      if (!this.#isInactive &&
+          Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').get()) {
+        void this.#generateTeaserText();
+      }
+    };
+
+    const hasSession = this.#builtInAi.hasSession();
+
     switch (this.#state) {
-      case State.READY:
-        if (!this.#isInactive &&
-            Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').get()) {
-          void this.#generateTeaserText();
+      case State.NO_MODEL:
+      case State.DOWNLOADING:
+        if (hasSession) {
+          this.#state = State.READY;
+          startGeneratingTeaser();
+        } else {
+          if (this.#eventListeners.length === 0) {
+            this.#eventListeners = [
+              this.#builtInAi.addEventListener(
+                  AiAssistanceModel.BuiltInAi.Events.DOWNLOAD_PROGRESS_CHANGED, this.#boundOnDownloadProgressChange),
+              this.#builtInAi.addEventListener(
+                  AiAssistanceModel.BuiltInAi.Events.DOWNLOADED_AND_SESSION_CREATED, this.#boundOnSessionCreation),
+            ];
+          }
+          if (this.#builtInAi.isDownloading()) {
+            this.#state = State.DOWNLOADING;
+            this.#downloadProgress = this.#builtInAi.getDownloadProgress();
+          }
         }
         this.requestUpdate();
         return;
+      case State.READY:
+        startGeneratingTeaser();
+        this.requestUpdate();
+        return;
       case State.GENERATING:
         console.error('Trying trigger teaser generation when state is "GENERATING"');
         return;
@@ -406,6 +584,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     if (this.#timeoutId) {
       clearTimeout(this.#timeoutId);
     }
+    Common.EventTarget.removeEventListeners(this.#eventListeners);
   }
 
   setInactive(isInactive: boolean): void {
@@ -502,7 +681,10 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
           dontShowChanged: this.#dontShowChanged.bind(this),
           hasTellMeMoreButton: this.#hasTellMeMoreButton(),
           isSlowGeneration: this.#isSlow,
+          onDownloadModelClick: this.#onDownloadModelClick.bind(this),
+          downloadProgress: this.#downloadProgress,
           state: this.#state,
+          isForWarning: this.#isForWarning,
         },
         undefined, this.contentElement);
   }