chrome-devtools-frontend 1.0.1533544 → 1.0.1534251

package/front_end/Images/src/justify-content-stretch.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 18V14H9V6H3.5V2H2V18H3.5Z" fill="black"/>
+<path d="M18 18V2H16.5V6H11V14H16.5V18H18Z" fill="black"/>
+</svg>

package/front_end/core/host/InspectorFrontendHost.ts

@@ -569,7 +569,7 @@ class InspectorFrontendAPIImpl {
   constructor() {
     for (const descriptor of EventDescriptors) {
       // @ts-expect-error Dispatcher magic
-      this[descriptor[1]] = this.dispatch.bind(this, descriptor[0], descriptor[2], descriptor[3]);
+      this[descriptor[0]] = this.dispatch.bind(this, descriptor[0], descriptor[1], descriptor[2]);
     }
   }
 
@@ -600,9 +600,13 @@ class InspectorFrontendAPIImpl {
     resourceLoaderStreamWrite(id, chunk);
   }
 }
+/**
+ * Used in `front_end/devtools_compatibility.js` to verify that calls from there
+ * are valid.
+ */
+export type InspectorFrontendAPIImplMethods = keyof InspectorFrontendAPIImpl;
 
 (function(): void {
-
 function initializeInspectorFrontendHost(): void {
   if (!InspectorFrontendHostInstance) {
     // Instantiate stub for web-hosted mode if necessary.

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -6,6 +6,9 @@ import type * as Platform from '../../core/platform/platform.js';
 import type * as Common from '../common/common.js';
 import type * as Root from '../root/root.js';
 
+/**
+ * This values should match the one getting called from Chromium
+ */
 export enum Events {
   /* eslint-disable @typescript-eslint/naming-convention -- Accessed from web_tests */
   AppendedToURL = 'appendedToURL',
@@ -24,7 +27,7 @@ export enum Events {
   FileSystemsLoaded = 'fileSystemsLoaded',
   FileSystemRemoved = 'fileSystemRemoved',
   FileSystemAdded = 'fileSystemAdded',
-  FileSystemFilesChangedAddedRemoved = 'FileSystemFilesChangedAddedRemoved',
+  FileSystemFilesChangedAddedRemoved = 'fileSystemFilesChangedAddedRemoved',
   IndexingTotalWorkCalculated = 'indexingTotalWorkCalculated',
   IndexingWorked = 'indexingWorked',
   IndexingDone = 'indexingDone',
@@ -40,34 +43,34 @@ export enum Events {
 }
 
 export const EventDescriptors = [
-  [Events.AppendedToURL, 'appendedToURL', ['url']],
-  [Events.CanceledSaveURL, 'canceledSaveURL', ['url']],
-  [Events.ColorThemeChanged, 'colorThemeChanged', []],
-  [Events.ContextMenuCleared, 'contextMenuCleared', []],
-  [Events.ContextMenuItemSelected, 'contextMenuItemSelected', ['id']],
-  [Events.DeviceCountUpdated, 'deviceCountUpdated', ['count']],
-  [Events.DevicesDiscoveryConfigChanged, 'devicesDiscoveryConfigChanged', ['config']],
-  [Events.DevicesPortForwardingStatusChanged, 'devicesPortForwardingStatusChanged', ['status']],
-  [Events.DevicesUpdated, 'devicesUpdated', ['devices']],
-  [Events.DispatchMessage, 'dispatchMessage', ['messageObject']],
-  [Events.DispatchMessageChunk, 'dispatchMessageChunk', ['messageChunk', 'messageSize']],
-  [Events.EnterInspectElementMode, 'enterInspectElementMode', []],
-  [Events.EyeDropperPickedColor, 'eyeDropperPickedColor', ['color']],
-  [Events.FileSystemsLoaded, 'fileSystemsLoaded', ['fileSystems']],
-  [Events.FileSystemRemoved, 'fileSystemRemoved', ['fileSystemPath']],
-  [Events.FileSystemAdded, 'fileSystemAdded', ['errorMessage', 'fileSystem']],
-  [Events.FileSystemFilesChangedAddedRemoved, 'fileSystemFilesChangedAddedRemoved', ['changed', 'added', 'removed']],
-  [Events.IndexingTotalWorkCalculated, 'indexingTotalWorkCalculated', ['requestId', 'fileSystemPath', 'totalWork']],
-  [Events.IndexingWorked, 'indexingWorked', ['requestId', 'fileSystemPath', 'worked']],
-  [Events.IndexingDone, 'indexingDone', ['requestId', 'fileSystemPath']],
-  [Events.KeyEventUnhandled, 'keyEventUnhandled', ['event']],
-  [Events.ReloadInspectedPage, 'reloadInspectedPage', ['hard']],
-  [Events.RevealSourceLine, 'revealSourceLine', ['url', 'lineNumber', 'columnNumber']],
-  [Events.SavedURL, 'savedURL', ['url', 'fileSystemPath']],
-  [Events.SearchCompleted, 'searchCompleted', ['requestId', 'fileSystemPath', 'files']],
-  [Events.SetInspectedTabId, 'setInspectedTabId', ['tabId']],
-  [Events.SetUseSoftMenu, 'setUseSoftMenu', ['useSoftMenu']],
-  [Events.ShowPanel, 'showPanel', ['panelName']],
+  [Events.AppendedToURL, ['url']],
+  [Events.CanceledSaveURL, ['url']],
+  [Events.ColorThemeChanged, []],
+  [Events.ContextMenuCleared, []],
+  [Events.ContextMenuItemSelected, ['id']],
+  [Events.DeviceCountUpdated, ['count']],
+  [Events.DevicesDiscoveryConfigChanged, ['config']],
+  [Events.DevicesPortForwardingStatusChanged, ['status']],
+  [Events.DevicesUpdated, ['devices']],
+  [Events.DispatchMessage, ['messageObject']],
+  [Events.DispatchMessageChunk, ['messageChunk', 'messageSize']],
+  [Events.EnterInspectElementMode, []],
+  [Events.EyeDropperPickedColor, ['color']],
+  [Events.FileSystemsLoaded, ['fileSystems']],
+  [Events.FileSystemRemoved, ['fileSystemPath']],
+  [Events.FileSystemAdded, ['errorMessage', 'fileSystem']],
+  [Events.FileSystemFilesChangedAddedRemoved, ['changed', 'added', 'removed']],
+  [Events.IndexingTotalWorkCalculated, , ['requestId', 'fileSystemPath', 'totalWork']],
+  [Events.IndexingWorked, ['requestId', 'fileSystemPath', 'worked']],
+  [Events.IndexingDone, ['requestId', 'fileSystemPath']],
+  [Events.KeyEventUnhandled, ['event']],
+  [Events.ReloadInspectedPage, ['hard']],
+  [Events.RevealSourceLine, ['url', 'lineNumber', 'columnNumber']],
+  [Events.SavedURL, ['url', 'fileSystemPath']],
+  [Events.SearchCompleted, ['requestId', 'fileSystemPath', 'files']],
+  [Events.SetInspectedTabId, ['tabId']],
+  [Events.SetUseSoftMenu, ['useSoftMenu']],
+  [Events.ShowPanel, ['panelName']],
 ] as const;
 
 export interface DispatchMessageChunkEvent {

package/front_end/core/host/UserMetrics.ts

@@ -1195,7 +1195,8 @@ export const enum SwatchType {
   LENGTH = 8,
   POSITION_TRY_LINK = 10,
   ATTR_LINK = 11,
-  MAX_VALUE = 12,
+  MASONRY = 12,
+  MAX_VALUE = 13,
 }
 
 export const enum BadgeType {

package/front_end/core/protocol_client/CDPConnection.ts

@@ -0,0 +1,39 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type {ProtocolMapping} from '../../generated/protocol-mapping.js';
+
+/**
+ * Allows the sending and receiving of CDP commands and the notification of CDP events to observers.
+ *
+ * An instance of a CDPConnection "owns" the full transport channel and no other CDP traffic must
+ * be proxied over it. This is because each implementation needs to manage "message IDs", which
+ * would conflict with any other shared traffic.
+ */
+export interface CDPConnection {
+  send<T extends keyof ProtocolMapping.Commands>(
+      method: T, params: ProtocolMapping.Commands[T]['paramsType'][0],
+      sessionId: string|undefined): Promise<ProtocolMapping.Commands[T]['returnType']|{getError(): string}>;
+
+  observe(observer: CDPConnectionObserver): void;
+  unobserve(observer: CDPConnectionObserver): void;
+}
+
+export interface CDPConnectionObserver {
+  onEvent<T extends keyof ProtocolMapping.Events>(event: ProtocolMapping.Events[T]): void;
+  onDisconnect(reason: string): void;
+}
+
+/**
+ * The protocol monitor and test harness require inspection of raw CDP message traffic.
+ */
+export interface DebuggableCDPConnection extends CDPConnection {
+  observeMessages(observer: RawMessageObserver): void;
+  unobserveMessages(observer: RawMessageObserver): void;
+}
+
+export interface RawMessageObserver {
+  onMessageReceived(message: unknown): void;
+  onMessageSent(message: unknown): void;
+}

package/front_end/core/protocol_client/InspectorBackend.ts

@@ -75,7 +75,6 @@ interface CallbackWithDebugInfo {
 
 export class InspectorBackend {
   readonly agentPrototypes = new Map<ProtocolDomainName, AgentPrototype>();
-  #initialized = false;
   #eventParameterNamesForDomain = new Map<ProtocolDomainName, EventParameterNames>();
   readonly typeMap = new Map<QualifiedName, CommandParameter[]>();
   readonly enumMap = new Map<QualifiedName, Record<string, string>>();
@@ -114,10 +113,6 @@ export class InspectorBackend {
     console.warn(error + ': ' + JSON.stringify(messageObject));
   }
 
-  isInitialized(): boolean {
-    return this.#initialized;
-  }
-
   private agentPrototype(domain: ProtocolDomainName): AgentPrototype {
     let prototype = this.agentPrototypes.get(domain);
     if (!prototype) {
@@ -131,7 +126,6 @@ export class InspectorBackend {
       void {
     const [domain, command] = splitQualifiedName(method);
     this.agentPrototype(domain as ProtocolDomainName).registerCommand(command, parameters, replyArgs, description);
-    this.#initialized = true;
   }
 
   registerEnum(type: QualifiedName, values: Record<string, string>): void {
@@ -145,19 +139,16 @@ export class InspectorBackend {
     // @ts-expect-error globalThis global namespace pollution
     globalThis.Protocol[domain][name] = values;
     this.enumMap.set(type, values);
-    this.#initialized = true;
   }
 
   registerType(method: QualifiedName, parameters: CommandParameter[]): void {
     this.typeMap.set(method, parameters);
-    this.#initialized = true;
   }
 
   registerEvent(eventName: QualifiedName, params: string[]): void {
     const domain = eventName.split('.')[0];
     const eventParameterNames = this.getOrCreateEventParameterNamesForDomain(domain as ProtocolDomainName);
     eventParameterNames.set(eventName, params);
-    this.#initialized = true;
   }
 }
 

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -24,7 +24,7 @@ import {
   CustomFunctionMatcher,
   defaultValueForCSSType,
   EnvFunctionMatcher,
-  FlexGridMatcher,
+  FlexGridMasonryMatcher,
   GridTemplateMatcher,
   LengthMatcher,
   LightDarkColorMatcher,
@@ -939,7 +939,7 @@ export class CSSMatchedStyles {
       new LinearGradientMatcher(),
       new AnchorFunctionMatcher(),
       new PositionAnchorMatcher(),
-      new FlexGridMatcher(),
+      new FlexGridMasonryMatcher(),
       new PositionTryMatcher(),
       new LengthMatcher(),
       new MathFunctionMatcher(),

package/front_end/core/sdk/CSSPropertyParserMatchers.ts

@@ -1072,21 +1072,28 @@ export class CustomFunctionMatcher extends matcherBase(CustomFunctionMatch) {
   }
 }
 
-export class FlexGridMatch implements Match {
-  constructor(readonly text: string, readonly node: CodeMirror.SyntaxNode, readonly isFlex: boolean) {
+export const enum LayoutType {
+  FLEX = 'flex',
+  GRID = 'grid',
+  MASONRY = 'masonry'
+}
+
+export class FlexGridMasonryMatch implements Match {
+  constructor(readonly text: string, readonly node: CodeMirror.SyntaxNode, readonly layoutType: LayoutType) {
   }
 }
 
 // clang-format off
-export class FlexGridMatcher extends matcherBase(FlexGridMatch) {
+export class FlexGridMasonryMatcher extends matcherBase(FlexGridMasonryMatch) {
   // clang-format on
   static readonly FLEX = ['flex', 'inline-flex', 'block flex', 'inline flex'];
   static readonly GRID = ['grid', 'inline-grid', 'block grid', 'inline grid'];
+  static readonly MASONRY = ['masonry', 'inline-masonry', 'block masonry', 'inline masonry'];
   override accepts(propertyName: string): boolean {
     return propertyName === 'display';
   }
 
-  override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): FlexGridMatch|null {
+  override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): FlexGridMasonryMatch|null {
     if (node.name !== 'Declaration') {
       return null;
     }
@@ -1098,11 +1105,14 @@ export class FlexGridMatcher extends matcherBase(FlexGridMatch) {
                        .map(node => matching.getComputedText(node).trim())
                        .filter(value => value);
     const text = values.join(' ');
-    if (FlexGridMatcher.FLEX.includes(text)) {
-      return new FlexGridMatch(matching.ast.text(node), node, true);
+    if (FlexGridMasonryMatcher.FLEX.includes(text)) {
+      return new FlexGridMasonryMatch(matching.ast.text(node), node, LayoutType.FLEX);
+    }
+    if (FlexGridMasonryMatcher.GRID.includes(text)) {
+      return new FlexGridMasonryMatch(matching.ast.text(node), node, LayoutType.GRID);
     }
-    if (FlexGridMatcher.GRID.includes(text)) {
-      return new FlexGridMatch(matching.ast.text(node), node, false);
+    if (FlexGridMasonryMatcher.MASONRY.includes(text)) {
+      return new FlexGridMasonryMatch(matching.ast.text(node), node, LayoutType.MASONRY);
     }
     return null;
   }

package/front_end/core/sdk/NetworkManager.ts

@@ -1520,22 +1520,6 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
     request.setTrustTokenOperationDoneEvent(event);
   }
 
-  subresourceWebBundleMetadataReceived(): void {
-    // TODO: remove implementation after deleting this methods from definition in Network.pdl
-  }
-
-  subresourceWebBundleMetadataError(): void {
-    // TODO: remove implementation after deleting this methods from definition in Network.pdl
-  }
-
-  subresourceWebBundleInnerResponseParsed(): void {
-    // TODO: remove implementation after deleting this methods from definition in Network.pdl
-  }
-
-  subresourceWebBundleInnerResponseError(): void {
-    // TODO: remove implementation after deleting this methods from definition in Network.pdl
-  }
-
   reportingApiReportAdded(data: Protocol.Network.ReportingApiReportAddedEvent): void {
     this.#manager.dispatchEventToListeners(Events.ReportingApiReportAdded, data.report);
   }

package/front_end/devtools_compatibility.js

@@ -7,6 +7,10 @@
 // https://crsrc.org/c/third_party/blink/renderer/controller/dev_tools_frontend_impl.cc;l=107
 (window => {
   /**
+   * A function that tries to check the remotely connected instance
+   * major version. You should check against this to provide
+   * forward and backwards compatibility.
+   *
    * @returns {number|null}
    */
   function getRemoteMajorVersion() {
@@ -20,8 +24,6 @@
       return null;
     }
   }
-  // eslint-disable-next-line no-unused-vars
-  const majorVersion = getRemoteMajorVersion();
 
   // DevToolsAPI ----------------------------------------------------------------
   /**
@@ -87,7 +89,9 @@
     }
 
     /**
-     * @param method
+     * @typedef {import('./core/host/InspectorFrontendHostAPI.js').Events} Events
+     * @typedef {import('./core/host/InspectorFrontendHost.js').InspectorFrontendAPIImplMethods} Methods
+     * @param method {`${Events|Methods}`}
      * @param args
      */
     _dispatchOnInspectorFrontendAPI(method, args) {
@@ -157,7 +161,7 @@
     }
 
     /**
-     * @param count
+     * @param count {number}
      */
     deviceCountUpdated(count) {
       this._dispatchOnInspectorFrontendAPI('deviceCountUpdated', [count]);
@@ -1108,6 +1112,7 @@
   function installBackwardsCompatibility() {
     // Any polyfill that we need for backwards compatibility should be
     // Added in this function
+    // Use getRemoteMajorVersion to get the correct Major Chrome version
   }
 
   installBackwardsCompatibility();

package/front_end/generated/protocol-mapping.d.ts

@@ -7,6 +7,9 @@
  * Re-generate with: npm run generate-protocol-resources.
  */
 
+
+import type * as Protocol from './protocol.js'
+
 /**
  * Mappings from protocol event and command names to the types required for them.
  */

package/front_end/models/ai_assistance/BuiltInAi.ts

@@ -7,24 +7,8 @@ import * as Root from '../../core/root/root.js';
 let builtInAiInstance: BuiltInAi|undefined;
 let availability = '';
 
-const RESPONSE_SCHEMA = {
-  type: 'object',
-  properties: {
-    header: {type: 'string', maxLength: 60, description: 'Label for the console message which is being analyzed'},
-    // No hard `maxLength` for `explanation`. This would often result in responses which are cut off in the middle of a
-    // sentence. Instead provide a soft `maxLength` via the prompt.
-    explanation: {
-      type: 'string',
-      description: 'Actual explanation of the console message being analyzed',
-    },
-  },
-  required: ['header', 'explanation'],
-  additionalProperties: false,
-};
-
 export interface LanguageModel {
   promptStreaming: (arg0: string, opts?: {
-    responseConstraint: Object,
     signal?: AbortSignal,
   }) => AsyncGenerator<string>;
   clone: () => LanguageModel;
@@ -101,7 +85,6 @@ Your instructions are as follows:
     const session = await this.#consoleInsightsSession.clone();
     const stream = session.promptStreaming(prompt, {
       signal: abortController.signal,
-      responseConstraint: RESPONSE_SCHEMA,
     });
     for await (const chunk of stream) {
       yield chunk;

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -130,29 +130,33 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
           <h2>${lockedString(UIStringsNotTranslate.summaryNotAvailable)}</h2>
         ` :
           showPlaceholder ? html`
-            <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 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`
-            <h2>${input.headerText}</h2>
-            <div class="main-text">${input.mainText}</div>
+            <div class="response-container">
+              <h2>${input.headerText}</h2>
+              <div class="main-text">${input.mainText}</div>
+            </div>
           `
         }
         <div class="tooltip-footer">
@@ -167,25 +171,23 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
               ${lockedString(UIStringsNotTranslate.tellMeMore)}
             </devtools-button>
           ` : Lit.nothing}
-          ${showPlaceholder ? Lit.nothing : html`
-            <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">
-              <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-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">
+            <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}
@@ -215,6 +217,8 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
   #isSlow = false;
   #timeoutId: ReturnType<typeof setTimeout>|null = null;
   #isError = false;
+  #aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
+  #boundOnAidaAvailabilityChange: () => Promise<void>;
 
   constructor(uuid: string, consoleViewMessage: ConsoleViewMessage, element?: HTMLElement, view?: View) {
     super(element);
@@ -222,6 +226,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     this.#uuid = uuid;
     this.#promptBuilder = new PromptBuilder(consoleViewMessage);
     this.#consoleViewMessage = consoleViewMessage;
+    this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
     this.requestUpdate();
   }
 
@@ -237,6 +242,14 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     return Common.Settings.Settings.instance().createLocalSetting('console-insights-onboarding-finished', true);
   }
 
+  async #onAidaAvailabilityChange(): Promise<void> {
+    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+    if (currentAidaAvailability !== this.#aidaAvailability) {
+      this.#aidaAvailability = currentAidaAvailability;
+      this.requestUpdate();
+    }
+  }
+
   #executeConsoleInsightAction(): void {
     UI.Context.Context.instance().setFlavor(ConsoleViewMessage, this.#consoleViewMessage);
     const action = UI.ActionRegistry.ActionRegistry.instance().getAction(EXPLAIN_TEASER_ACTION_ID);
@@ -307,6 +320,9 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     if (this.#abortController) {
       this.#abortController.abort();
     }
+    if (this.#isGenerating) {
+      this.#mainText = '';
+    }
     this.#isGenerating = false;
     if (this.#timeoutId) {
       clearTimeout(this.#timeoutId);
@@ -327,12 +343,15 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
   }
 
   async #generateTeaserText(): Promise<void> {
+    this.#headerText = this.#consoleViewMessage.toMessageTextString().substring(0, 70);
     this.#isGenerating = true;
     this.#timeoutId = setTimeout(this.#setSlow.bind(this), SLOW_GENERATION_CUTOFF_MILLISECONDS);
     let teaserText = '';
     try {
       for await (const chunk of this.#getOnDeviceInsight()) {
         teaserText += chunk;
+        this.#mainText = teaserText;
+        this.requestUpdate();
       }
     } catch (err) {
       // Ignore `AbortError` errors, which are thrown on mouse leave.
@@ -348,25 +367,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
 
     clearTimeout(this.#timeoutId);
     this.#isGenerating = false;
-    let responseObject = {
-      header: null,
-      explanation: null,
-    };
-    try {
-      responseObject = JSON.parse(teaserText);
-    } catch (err) {
-      console.error(err.name, err.message);
-      this.#isError = true;
-      this.requestUpdate();
-      return;
-    }
-    if (responseObject.header && typeof responseObject.header === 'string' && responseObject.explanation &&
-        typeof responseObject.explanation === 'string') {
-      this.#headerText = responseObject.header;
-      this.#mainText = responseObject.explanation;
-    } else {
-      this.#isError = true;
-    }
+    this.#mainText = teaserText;
     this.requestUpdate();
   }
 
@@ -399,7 +400,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     if (Root.Runtime.hostConfig.aidaAvailability?.blockedByAge || Root.Runtime.hostConfig.isOffTheRecord) {
       return false;
     }
-    if (!Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
+    if (this.#aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
       return false;
     }
     return true;
@@ -421,4 +422,17 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
         },
         undefined, this.contentElement);
   }
+
+  override wasShown(): void {
+    super.wasShown();
+    Host.AidaClient.HostConfigTracker.instance().addEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
+    void this.#onAidaAvailabilityChange();
+  }
+
+  override willHide(): void {
+    super.willHide();
+    Host.AidaClient.HostConfigTracker.instance().removeEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
+  }
 }

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -711,8 +711,10 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     if (icon) {
       clickableElement.appendChild(icon);
     }
-    // Intercept focus to avoid highlight on click.
-    clickableElement.tabIndex = -1;
+    if (stackTrace) {
+      // Intercept focus to avoid highlight on click.
+      clickableElement.tabIndex = -1;
+    }
     clickableElement.appendChild(messageElement);
     const stackTraceElement = contentElement.createChild('div');
     const stackTracePreview = new Components.JSPresentationUtils.StackTracePreviewContent(

package/front_end/panels/console/consoleInsightTeaser.css

@@ -11,6 +11,10 @@
     margin-top: var(--sys-size-2);
   }
 
+  .response-container {
+    height: 85px;
+  }
+
   @keyframes gradient {
     0% { background-position: 100% 0; }
     100% { background-position: -100% 0; }

package/front_end/panels/console/consoleView.css

@@ -220,7 +220,7 @@
   --console-color-lightcyan: #5ff;
   --console-color-white: #fff;
 
-  &.console-selected {
+  &:focus {
     background-color: var(--sys-color-state-focus-highlight);
   }
 }