chrome-devtools-frontend 1.0.1603822 → 1.0.1605219

package/front_end/panels/application/WebMCPView.ts

@@ -0,0 +1,118 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '../../ui/components/icon_button/icon_button.js';
+import '../../ui/components/lists/lists.js';
+import '../../ui/legacy/legacy.js';
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import {
+  html,
+  render,
+} from '../../ui/lit/lit.js';
+
+import webMCPViewStyles from './webMCPView.css.js';
+
+const UIStrings = {
+  /**
+   * @description Text for the header of the tool registry section
+   */
+  toolRegistry: 'Available Tools',
+  /**
+   * @description Title of text to display when no tools are registered
+   */
+  noToolsPlaceholderTitle: 'Available `WebMCP` Tools',
+  /**
+   * @description Text to display when no tools are registered
+   */
+  noToolsPlaceholder:
+      'Registered `WebMCP` tools for this page will appear here. No tools have been registered or detected yet.',
+  /**
+   * @description Title of text to display when no calls have been made
+   */
+  noCallsPlaceholderTitle: 'Tool Activity',
+  /**
+   * @description Text to display when no calls have been made
+   */
+  noCallsPlaceholder: 'Start interacting with your `WebMCP` agent to see real-time tool calls and executions here.'
+} as const;
+const str_ = i18n.i18n.registerUIStrings('panels/application/WebMCPView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface ViewInput {
+  tools: Protocol.WebMCP.Tool[];
+}
+
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const tools = input.tools;
+  // clang-format off
+  render(html`
+    <style>${webMCPViewStyles}</style>
+    <devtools-split-view class="webmcp-view" direction="row" sidebar-position="second" name="webmcp-split-view">
+      <div slot="main" class="call-log">
+        ${UI.Widget.widget(UI.EmptyWidget.EmptyWidget, {header: i18nString(UIStrings.noCallsPlaceholderTitle),
+                                                        text: i18nString(UIStrings.noCallsPlaceholder)})}
+      </div>
+      <div slot="sidebar" class="tool-list">
+        <div class="section-title">${i18nString(UIStrings.toolRegistry)}</div>
+        ${tools.length === 0 ? html`
+        ${UI.Widget.widget(UI.EmptyWidget.EmptyWidget, {header: i18nString(UIStrings.noToolsPlaceholderTitle),
+                                                        text: i18nString(UIStrings.noToolsPlaceholder)})}
+        ` : html`
+          <devtools-list>
+            ${tools.map(tool => html`
+                <div class="tool-item">
+                  <div class="tool-name-container">
+                    <div class="tool-name source-code">${tool.name}</div>
+                  </div>
+                  <div class="tool-description">${tool.description}</div>
+                </div>
+              `)}
+          </devtools-list>
+        `}
+      </div>
+    </devtools-split-view>
+  `, target);
+  // clang-format on
+};
+
+export class WebMCPView extends UI.Widget.VBox {
+  readonly #view: View;
+
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super();
+    this.#view = view;
+    SDK.TargetManager.TargetManager.instance().observeModels(SDK.WebMCPModel.WebMCPModel, {
+      modelAdded: (model: SDK.WebMCPModel.WebMCPModel) => this.#webMCPModelAdded(model),
+      modelRemoved: (model: SDK.WebMCPModel.WebMCPModel) => this.#webMCPModelRemoved(model),
+    });
+    this.requestUpdate();
+  }
+
+  #webMCPModelAdded(model: SDK.WebMCPModel.WebMCPModel): void {
+    model.addEventListener(SDK.WebMCPModel.Events.TOOLS_ADDED, this.requestUpdate, this);
+    model.addEventListener(SDK.WebMCPModel.Events.TOOLS_REMOVED, this.requestUpdate, this);
+  }
+
+  #webMCPModelRemoved(model: SDK.WebMCPModel.WebMCPModel): void {
+    model.removeEventListener(SDK.WebMCPModel.Events.TOOLS_ADDED, this.requestUpdate, this);
+    model.removeEventListener(SDK.WebMCPModel.Events.TOOLS_REMOVED, this.requestUpdate, this);
+  }
+
+  override performUpdate(): void {
+    const tools = SDK.TargetManager.TargetManager.instance()
+                      .models(SDK.WebMCPModel.WebMCPModel)
+                      .flatMap(m => m.tools.toArray())
+                      .sort((a, b) => a.name.localeCompare(b.name));
+    this.#view(
+        {
+          tools,
+        },
+        {}, this.contentElement);
+  }
+}

package/front_end/panels/application/application.ts

@@ -40,6 +40,8 @@ import * as StorageBucketsTreeElement from './StorageBucketsTreeElement.js';
 import * as StorageItemsToolbar from './StorageItemsToolbar.js';
 import * as StorageView from './StorageView.js';
 import * as TrustTokensTreeElement from './TrustTokensTreeElement.js';
+import * as WebMCPTreeElement from './WebMCPTreeElement.js';
+import * as WebMCPView from './WebMCPView.js';
 
 export {
   ApplicationPanelSidebar,
@@ -80,4 +82,6 @@ export {
   StorageItemsToolbar,
   StorageView,
   TrustTokensTreeElement,
+  WebMCPTreeElement,
+  WebMCPView,
 };

package/front_end/panels/application/webMCPView.css

@@ -0,0 +1,65 @@
+/*
+ * Copyright 2026 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+@scope to (devtools-widget > *) {
+    .webmcp-view {
+        height: 100%;
+        width: 100%;
+    }
+
+    .call-log,
+    .tool-list {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+        padding: 0;
+    }
+
+    .empty-view-scroller {
+        flex: auto;
+    }
+
+    .section-title {
+        background-color: var(--sys-color-surface1);
+        padding: 0 5px;
+        line-height: 22px;
+        overflow: hidden;
+        align-items: center;
+        flex: none;
+        color: var(--sys-color-on-surface);
+    }
+
+    devtools-list {
+      flex: 1 1 auto;
+      margin: var(--sys-size-4);
+    }
+
+    .tool-item {
+        display: flex;
+        flex-direction: column;
+        padding: 8px 0;
+        gap: 4px;
+        width: 100%;
+        border-bottom: 1px solid var(--sys-color-divider);
+    }
+
+    .tool-name-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .tool-name.source-code {
+        color: var(--sys-color-token-string);
+    }
+
+    .tool-description {
+        color: var(--sys-color-on-surface);
+    }
+
+
+}

package/front_end/panels/common/aiCodeCompletionSummaryToolbar.css

@@ -49,7 +49,7 @@
       border-left: var(--sys-size-1) solid var(--sys-color-divider);
     }
 
-    @media (width < 545px) {
+    @container (width < 545px) {
       &.has-disclaimer.has-recitation-notice {
         height: 46px;
         flex-direction: column;

package/front_end/panels/console/consoleView.css

@@ -633,6 +633,10 @@
   }
 }
 
+.ai-code-completion-summary-toolbar-container {
+  container-type: inline-size;
+}
+
 @media (forced-colors: active) {
   .console-message-expand-icon,
   .console-warning-level .expand-group-icon {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -78,9 +78,25 @@ const {animateOn} = UI.UIUtils;
 
 const UIStrings = {
   /**
-   * @description Title for Ad adorner. This iframe is marked as advertisement frame.
+   * @description Title for Ad adorner. This element is marked as advertisement element.
    */
-  thisFrameWasIdentifiedAsAnAd: 'This frame was identified as an ad frame',
+  thisElementWasIdentifiedAsAnAd: 'This element was identified as an ad',
+  /**
+   * @description Title of a section in the Ad adorner tooltip. Lists the ad script(s) responsible for generating this element.
+   */
+  creatorAdScriptAncestry: 'Creator ad script ancestry',
+  /**
+   * @description Title of a section in the Ad adorner tooltip. The filter list rule that flagged the root script in 'Creator ad script ancestry' as an ad.
+   */
+  rootScriptFilterListRule: 'Root script filter list rule',
+  /**
+   * @description Title of a section in the Ad adorner tooltip. The filter list rule that flagged the element's current resource.
+   */
+  filterListRule: 'Filter list rule',
+  /**
+   * @description Title of a section in the Ad adorner tooltip. This element was identified as an ad, but no provenance data is available.
+   */
+  noProvenanceAvailable: 'No provenance data is available',
   /**
    * @description A context menu item in the Elements panel. Force is used as a verb, indicating intention to make the state change.
    */
@@ -399,7 +415,10 @@ export interface ViewInput {
   gridAdornerActive: boolean;
   popoverAdornerActive: boolean;
 
-  showAdAdorner: boolean;
+  adProvenance?: Protocol.Network.AdProvenance;
+  target?: SDK.Target.Target;
+  adTooltipId: string;
+
   showContainerAdorner: boolean;
   containerType?: string;
   showFlexAdorner: boolean;
@@ -851,8 +870,66 @@ function renderTag(
       attributes.map(attr => html` ${renderAttribute(attr, updateRecord, false, node)}`)}&gt;</span>\u200B`;
 }
 
+function maybeRenderAdAdorner(input: ViewInput): Lit.TemplateResult|typeof nothing {
+  if (!input.adProvenance) {
+    return nothing;
+  }
+
+  // clang-format off
+  return html`
+    <devtools-adorner
+      aria-describedby=${input.adTooltipId}
+      aria-label=${i18nString(UIStrings.thisElementWasIdentifiedAsAnAd)}
+      .name=${ElementsComponents.AdornerManager.RegisteredAdorners.AD}
+      jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.AD)}
+      ${adornerRef()}>
+      <span>${ElementsComponents.AdornerManager.RegisteredAdorners.AD}</span>
+    </devtools-adorner>
+
+    <!--
+      Prevent the copy event from bubbling up to the Elements tree outline. Otherwise, DevTools
+      copies the underlying DOM node's HTML instead of the user's highlighted text.
+    -->
+    <devtools-tooltip id=${input.adTooltipId} variant=rich @copy=${(e: Event) => e.stopPropagation()}>
+      <div class="ad-provenance-tooltip">
+        ${input.adProvenance.filterlistRule ? html`
+          <div class="ad-provenance-tooltip-title">${i18nString(UIStrings.filterListRule)}</div>
+          <div class="ad-provenance-tooltip-content">${input.adProvenance.filterlistRule}</div>
+        ` : nothing}
+
+        ${input.adProvenance.adScriptAncestry && input.target ? html`
+          <div class="ad-provenance-tooltip-title">${i18nString(UIStrings.creatorAdScriptAncestry)}</div>
+          <div class="ad-provenance-tooltip-content">
+            ${input.adProvenance.adScriptAncestry.ancestryChain.map(script => html`
+              <div>
+                ${UI.Widget.widget(Components.Linkifier.ScriptLocationLink, {
+                  target: input.target,
+                  scriptId: script.scriptId,
+                  options: { jslogContext: 'ad-script' },
+                })}
+              </div>
+            `)}
+          </div>
+
+          ${input.adProvenance.adScriptAncestry.rootScriptFilterlistRule ? html`
+            <div class="ad-provenance-tooltip-title">${i18nString(UIStrings.rootScriptFilterListRule)}</div>
+            <div class="ad-provenance-tooltip-content">
+              ${input.adProvenance.adScriptAncestry.rootScriptFilterlistRule}
+            </div>
+          ` : nothing}
+        ` : nothing}
+
+        ${!input.adProvenance.adScriptAncestry && !input.adProvenance.filterlistRule ? html`
+            <div class="ad-provenance-tooltip-title">${i18nString(UIStrings.noProvenanceAvailable)}</div>
+          ` : nothing}
+      </div>
+    </devtools-tooltip>
+  `;
+  // clang-format on
+}
+
 export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
-  const hasAdorners = input.showAdAdorner || input.showContainerAdorner || input.showFlexAdorner ||
+  const hasAdorners = !!input.adProvenance || input.showContainerAdorner || input.showFlexAdorner ||
       input.showGridAdorner || input.showGridLanesAdorner || input.showMediaAdorner || input.showPopoverAdorner ||
       input.showTopLayerAdorner || input.showViewSourceAdorner || input.showScrollAdorner ||
       input.showScrollSnapAdorner || input.showSlotAdorner || input.showStartingStyleAdorner;
@@ -888,13 +965,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         </div>` : nothing}
       </div>
       ${hasAdorners ? html`<div class="adorner-container ${!hasAdorners ? 'hidden' : ''}">
-        ${input.showAdAdorner ? html`<devtools-adorner
-          aria-label=${i18nString(UIStrings.thisFrameWasIdentifiedAsAnAd)}
-          .name=${ElementsComponents.AdornerManager.RegisteredAdorners.AD}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.AD)}
-          ${adornerRef()}>
-          <span>${ElementsComponents.AdornerManager.RegisteredAdorners.AD}</span>
-        </devtools-adorner>` : nothing}
+        ${maybeRenderAdAdorner(input)}
         ${input.showViewSourceAdorner ? html`<devtools-adorner
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE}
           jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE)}
@@ -1102,6 +1173,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   #descendantDecorations: Decoration[] = [];
   #decorationsTooltip = '';
 
+  static #adTooltipIdCounter = 0;
+  #adTooltipId = `ad-tooltip-${++ElementsTreeElement.#adTooltipIdCounter}`;
+
   #updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null = null;
 
   // Used to add the content to TreeElement's title element.
@@ -1230,7 +1304,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           onExpand: () => this.expand(),
 
           containerAdornerActive: this.#containerAdornerActive,
-          showAdAdorner: this.nodeInternal.isAdRelatedNode(),
+          adProvenance: this.nodeInternal.adProvenance(),
+          adTooltipId: this.#adTooltipId,
+          target: this.nodeInternal.domModel().target(),
           showContainerAdorner: Boolean(this.#layout?.containerType) && !this.isClosingTag(),
           containerType: this.#layout?.containerType,
           showFlexAdorner: Boolean(this.#layout?.isFlex) && !this.isClosingTag(),
@@ -1565,7 +1641,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           onHighlightSearchResults: () => {},
           onExpand: () => {},
           containerAdornerActive: false,
-          showAdAdorner: false,
+          adProvenance: undefined,
+          target: undefined,
+          adTooltipId: '',
           showContainerAdorner: false,
           containerType: this.#layout?.containerType,
           showFlexAdorner: false,

package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -16,6 +16,18 @@ export class StylesAiCodeCompletionProvider {
   #aiCodeCompletion?: AiCodeCompletion.AiCodeCompletion.AiCodeCompletion;
   #aiCodeCompletionConfig?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
 
+  getCompletionHint?: () => string | null;
+  setAiAutoCompletion?: (args: {
+    text: string,
+    from: number,
+    startTime: number,
+    onImpression: (rpcGlobalId: Host.AidaClient.RpcGlobalId, latency: number, sampleId?: number) => void,
+    clearCachedRequest: () => void,
+    citations: Host.AidaClient.Citation[],
+    rpcGlobalId?: Host.AidaClient.RpcGlobalId,
+    sampleId?: number,
+  }|null) => void;
+
   #boundOnUpdateAiCodeCompletionState = this.#updateAiCodeCompletionState.bind(this);
 
   private constructor(aiCodeCompletionConfig: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig) {
@@ -123,7 +135,7 @@ export class StylesAiCodeCompletionProvider {
       return;
     }
 
-    this.#aiCodeCompletionConfig?.setAiAutoCompletion?.({
+    this.setAiAutoCompletion?.({
       text: currentPropertyString + aidaSuggestion.suggestionText,
       from: cursorPosition,
       rpcGlobalId: aidaSuggestion.rpcGlobalId,
@@ -131,6 +143,7 @@ export class StylesAiCodeCompletionProvider {
       startTime,
       clearCachedRequest: this.clearCache.bind(this),
       onImpression: this.#aiCodeCompletion.registerUserImpression.bind(this.#aiCodeCompletion),
+      citations: aidaSuggestion.citations,
     });
   }
 
@@ -206,7 +219,7 @@ export class StylesAiCodeCompletionProvider {
       return null;
     }
 
-    const completionHint = this.#aiCodeCompletionConfig?.getCompletionHint?.();
+    const completionHint = this.getCompletionHint?.();
     if (!completionHint) {
       return response.generatedSamples[0];
     }
@@ -216,4 +229,12 @@ export class StylesAiCodeCompletionProvider {
   clearCache(): void {
     this.#aiCodeCompletion?.clearCachedRequest();
   }
+
+  onSuggestionAccepted(
+      citations: Host.AidaClient.Citation[], rpcGlobalId?: Host.AidaClient.RpcGlobalId, sampleId?: number): void {
+    this.#aiCodeCompletionConfig?.onSuggestionAccepted(citations);
+    if (rpcGlobalId) {
+      this.#aiCodeCompletion?.registerUserAcceptance(rpcGlobalId, sampleId);
+    }
+  }
 }

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -169,6 +169,10 @@ const HIGHLIGHTABLE_PROPERTIES = [
   {mode: 'flexibility', properties: ['flex', 'flex-basis', 'flex-grow', 'flex-shrink']},
 ];
 
+const DISCLAIMER_TOOLTIP_ID = 'styles-ai-code-completion-disclaimer-tooltip';
+const SPINNER_TOOLTIP_ID = 'styles-ai-code-completion-spinner-tooltip';
+const CITATIONS_TOOLTIP_ID = 'styles-ai-code-completion-citations-tooltip';
+
 export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventTypes, typeof ElementsSidebarPane>(
     ElementsSidebarPane) implements StylesContainer {
   private matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null = null;
@@ -214,6 +218,11 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   #updateAbortController?: AbortController;
   #updateComputedStylesAbortController?: AbortController;
 
+  aiCodeCompletionConfig?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
+  aiCodeCompletionProvider?: StylesAiCodeCompletionProvider.StylesAiCodeCompletionProvider;
+  #aiCodeCompletionSummaryToolbarContainer?: HTMLElement;
+  #aiCodeCompletionSummaryToolbar?: PanelsCommon.AiCodeCompletionSummaryToolbar;
+
   constructor(computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel) {
     super(computedStyleModel, {delegatesFocus: true});
     this.setMinimumSize(96, 26);
@@ -259,6 +268,26 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
         this.#scheduleResetUpdateIfNotEditing();
       }
     });
+
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    if (AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesEnabled(devtoolsLocale.locale)) {
+      this.aiCodeCompletionConfig = {
+        completionContext: {},
+        generationContext: {},
+        onFeatureEnabled: () => {
+          this.#createAiCodeCompletionSummaryToolbar();
+        },
+        onFeatureDisabled: () => {
+          this.#cleanupAiCodeCompletion();
+        },
+        onSuggestionAccepted: this.#onAiCodeCompletionSuggestionAccepted.bind(this),
+        onRequestTriggered: this.#onAiCodeCompletionRequestTriggered.bind(this),
+        onResponseReceived: this.#onAiCodeCompletionResponseReceived.bind(this),
+        panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES,
+      };
+      this.aiCodeCompletionProvider =
+          StylesAiCodeCompletionProvider.StylesAiCodeCompletionProvider.createInstance(this.aiCodeCompletionConfig);
+    }
   }
 
   get webCustomData(): WebCustomData|undefined {
@@ -1528,6 +1557,45 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
     return button;
   }
+
+  #cleanupAiCodeCompletion(): void {
+    this.#aiCodeCompletionSummaryToolbarContainer?.remove();
+    this.#aiCodeCompletionSummaryToolbarContainer = undefined;
+    this.#aiCodeCompletionSummaryToolbar = undefined;
+  }
+
+  #createAiCodeCompletionSummaryToolbar(): void {
+    if (this.#aiCodeCompletionSummaryToolbar) {
+      return;
+    }
+    this.#aiCodeCompletionSummaryToolbar = new PanelsCommon.AiCodeCompletionSummaryToolbar({
+      citationsTooltipId: CITATIONS_TOOLTIP_ID,
+      disclaimerTooltipId: DISCLAIMER_TOOLTIP_ID,
+      spinnerTooltipId: SPINNER_TOOLTIP_ID,
+      panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES,
+    });
+    const containingPane = this.contentElement.enclosingNodeOrSelfWithClass('style-panes-wrapper') as HTMLElement;
+    this.#aiCodeCompletionSummaryToolbarContainer =
+        containingPane.createChild('div', 'ai-code-completion-summary-toolbar-container');
+    this.#aiCodeCompletionSummaryToolbarContainer.role = 'toolbar';
+    this.#aiCodeCompletionSummaryToolbar.show(this.#aiCodeCompletionSummaryToolbarContainer, undefined, true);
+  }
+
+  #onAiCodeCompletionSuggestionAccepted(citations: Host.AidaClient.Citation[]): void {
+    if (!this.#aiCodeCompletionSummaryToolbar || citations.length === 0) {
+      return;
+    }
+    const citationsUri = citations.map(citation => citation.uri).filter((uri): uri is string => Boolean(uri));
+    this.#aiCodeCompletionSummaryToolbar.updateCitations(citationsUri);
+  }
+
+  #onAiCodeCompletionRequestTriggered(): void {
+    this.#aiCodeCompletionSummaryToolbar?.setLoading(true);
+  }
+
+  #onAiCodeCompletionResponseReceived(): void {
+    this.#aiCodeCompletionSummaryToolbar?.setLoading(false);
+  }
 }
 
 export const enum Events {
@@ -1757,8 +1825,9 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
   private treeElement: StylePropertyTreeElement;
   private isEditingName: boolean;
   private readonly cssVariables: string[];
-  aiCodeCompletionConfig?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
   aiCodeCompletionProvider?: StylesAiCodeCompletionProvider.StylesAiCodeCompletionProvider;
+  private activeAiSuggestionInfo?:
+      {citations: Host.AidaClient.Citation[], rpcGlobalId?: Host.AidaClient.RpcGlobalId, sampleId?: number};
 
   #debouncedTriggerAiCodeCompletion = Common.Debouncer.debounce(() => {
     void this.triggerAiCodeCompletion();
@@ -1822,25 +1891,13 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
       }
     }
 
-    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
-    if (AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesEnabled(devtoolsLocale.locale)) {
-      this.aiCodeCompletionConfig = {
-        completionContext: {},
-        generationContext: {},
-        onFeatureEnabled: () => {},
-        onFeatureDisabled: () => {},
-        onSuggestionAccepted: () => {},
-        onRequestTriggered: () => {},
-        onResponseReceived: () => {},
-        panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES,
-        getCompletionHint: this.getCompletionHint.bind(this),
-        getCurrentText: () => {
-          return this.text();
-        },
-        setAiAutoCompletion: this.setAiAutoCompletion.bind(this),
-      };
-      this.aiCodeCompletionProvider =
-          StylesAiCodeCompletionProvider.StylesAiCodeCompletionProvider.createInstance(this.aiCodeCompletionConfig);
+    const stylesContainer = this.treeElement.stylesContainer();
+    if (stylesContainer instanceof StylesSidebarPane) {
+      this.aiCodeCompletionProvider = stylesContainer.aiCodeCompletionProvider;
+      if (this.aiCodeCompletionProvider) {
+        this.aiCodeCompletionProvider.getCompletionHint = this.getCompletionHint.bind(this);
+        this.aiCodeCompletionProvider.setAiAutoCompletion = this.setAiAutoCompletion.bind(this);
+      }
     }
   }
 
@@ -2192,11 +2249,13 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
     startTime: number,
     onImpression: (rpcGlobalId: Host.AidaClient.RpcGlobalId, latency: number, sampleId?: number) => void,
     clearCachedRequest: () => void,
+    citations: Host.AidaClient.Citation[],
     rpcGlobalId?: Host.AidaClient.RpcGlobalId,
     sampleId?: number,
   }|null): void {
     if (!args) {
       this.treeElement.section().activeAiSuggestion = undefined;
+      this.activeAiSuggestionInfo = undefined;
       return;
     }
 
@@ -2207,6 +2266,7 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
       clearCachedRequest: args.clearCachedRequest,
       cssProperty: this.treeElement.property,
     };
+    this.activeAiSuggestionInfo = {citations: args.citations, rpcGlobalId: args.rpcGlobalId, sampleId: args.sampleId};
     const latency = performance.now() - args.startTime;
     if (args.rpcGlobalId) {
       args.onImpression(args.rpcGlobalId, latency, args.sampleId);
@@ -2305,6 +2365,11 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
 
   async commitAiSuggestion(): Promise<void> {
     await this.treeElement.section().commitActiveAiSuggestion();
+    if (this.activeAiSuggestionInfo) {
+      this.aiCodeCompletionProvider?.onSuggestionAccepted(
+          this.activeAiSuggestionInfo.citations, this.activeAiSuggestionInfo.rpcGlobalId,
+          this.activeAiSuggestionInfo.sampleId);
+    }
     // Clear state and return
     this.setAiAutoCompletion(null);
   }

package/front_end/panels/elements/elementsPanel.css

@@ -47,6 +47,20 @@
     border-bottom: 1px solid var(--sys-color-divider);
 }
 
+.style-panes-wrapper > div:has(+ .ai-code-completion-summary-toolbar-container) {
+  border-bottom: 0;
+}
+
+.style-panes-wrapper .ai-code-completion-summary-toolbar-container {
+  container-type: inline-size;
+  flex-shrink: 0;
+  overflow: hidden;
+  position: fixed;
+  bottom: 0;
+  background-color: var(--sys-color-cdt-base-container);
+  width: 100%;
+}
+
 #elements-content:not(.elements-wrap) > div {
   display: inline-block;
   min-width: 100%;

package/front_end/panels/elements/elementsTreeOutline.css

@@ -384,3 +384,21 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
   background-position: bottom;
   padding-bottom: 1px;
 }
+
+/* Ad Provenance Tooltip */
+.ad-provenance-tooltip {
+  user-select: text;
+}
+
+.ad-provenance-tooltip-title {
+  color: var(--sys-color-on-surface-subtle);
+  margin-top: 4px;
+}
+
+.ad-provenance-tooltip-title:first-child {
+  margin-top: 0;
+}
+
+.ad-provenance-tooltip-content {
+  padding-left: 16px;
+}

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -236,13 +236,13 @@ export class NetworkLogViewColumns {
     const title = columnConfig.title instanceof Function ? columnConfig.title() : columnConfig.title;
     return {
       id: columnConfig.id,
-      title,
+      title: title as Common.UIString.LocalizedString,
       sortable: columnConfig.sortable,
       align: columnConfig.align,
       nonSelectable: columnConfig.nonSelectable,
       weight: columnConfig.weight,
       allowInSortByEvenWhenHidden: columnConfig.allowInSortByEvenWhenHidden,
-    } as DataGrid.DataGrid.ColumnDescriptor;
+    };
   }
 
   wasShown(): void {
@@ -1251,7 +1251,7 @@ export interface Descriptor {
   hideableGroup: string|null;
   nonSelectable: boolean;
   sortable: boolean;
-  align?: string|null;
+  align?: DataGrid.DataGrid.Align|null;
   isResponseHeader: boolean;
   isRequestHeader: boolean;
   sortingFunction: (arg0: NetworkNode, arg1: NetworkNode) => number | undefined;