chrome-devtools-frontend 1.0.1611390 → 1.0.1613465

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -44,6 +44,7 @@ import {
 import {DisabledWidget} from './components/DisabledWidget.js';
 import {ExploreWidget} from './components/ExploreWidget.js';
 import {MarkdownRendererWithCodeBlock} from './components/MarkdownRendererWithCodeBlock.js';
+import {OptInChangeDialog} from './components/OptInChangeDialog.js';
 import {PerformanceAgentMarkdownRenderer} from './components/PerformanceAgentMarkdownRenderer.js';
 import {StylingAgentMarkdownRenderer} from './components/StylingAgentMarkdownRenderer.js';
 import {
@@ -252,6 +253,16 @@ const UIStringsNotTranslate = {
    */
   inputDisclaimerForAccessibilityEnterpriseNoLogging:
       'Chat messages and the selected Lighthouse report are sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
+  /**
+   * @description Disclaimer text right after the chat input when V2 is enabled.
+   */
+  inputDisclaimerV2:
+      'Chat messages, data accessible for this site via DevTools panels and Web APIs, and items you select such as network requests, files, and performance traces are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won’t always get it right.',
+  /**
+   * @description Disclaimer text right after the chat input when V2 is enabled and enterprise logging is off.
+   */
+  inputDisclaimerEnterpriseNoLoggingV2:
+      'Chat messages, data accessible for this site via DevTools panels and Web APIs, and items you select such as network requests, files, and performance traces are sent to Google. The content submitted to and generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/AiAssistancePanel.ts', UIStrings);
@@ -306,9 +317,8 @@ async function getEmptyStateSuggestions(conversation?: AiAssistanceModel.AiConve
       ];
     case AiAssistanceModel.AiHistoryStorage.ConversationType.ACCESSIBILITY:
       return [
-        {title: 'What are the accessibility issues on this page?', jslogContext: 'accessibility-default'},
-        {title: 'How can I fix these accessibility issues?', jslogContext: 'accessibility-default'},
-        {title: 'What does this Lighthouse report say about accessibility?', jslogContext: 'accessibility-default'},
+        {title: 'How can I fix accessibility issues on my page?', jslogContext: 'accessibility-default'},
+        {title: 'What accessibility issues exist on my page?', jslogContext: 'accessibility-default'},
       ];
     case AiAssistanceModel.AiHistoryStorage.ConversationType.NETWORK:
 
@@ -780,11 +790,32 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             return await this.#conversationSummaryAgent.summarizeConversation(markdown);
           },
           onTextSubmit: async (
-
               text: string, imageInput?: Host.AidaClient.Part,
               multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType) => {
-            Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceQuerySubmitted);
-            await this.#startConversation(text, imageInput, multimodalInputType);
+            const submit = (): void => {
+              Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceQuerySubmitted);
+              void this.#startConversation(text, imageInput, multimodalInputType);
+            };
+
+            const isAIV2Enabled = Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled;
+            const seenSetting =
+                Common.Settings.Settings.instance().moduleSetting('ai-assistance-v2-opt-in-change-dialog-seen');
+            if (isAIV2Enabled && !seenSetting.get()) {
+              OptInChangeDialog.show({
+                onGotIt: () => {
+                  seenSetting.set(true);
+                  submit();
+                },
+                onManageSettings: () => {
+                  seenSetting.set(true);
+                  this.#viewOutput.chatView?.setInputValue(text);
+                  void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
+                },
+              });
+              return;
+            }
+
+            submit();
           },
           onInspectElementClick: this.#handleSelectElementClick.bind(this),
           onFeedbackSubmit: this.#handleFeedbackSubmit.bind(this),
@@ -1397,46 +1428,54 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return i18nString(UIStrings.inputDisclaimerForEmptyState);
     }
 
-    const noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
+    const loggingEnabled = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue !==
         Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
+
+    if (Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled) {
+      if (loggingEnabled) {
+        return lockedString(UIStringsNotTranslate.inputDisclaimerV2);
+      }
+      return lockedString(UIStringsNotTranslate.inputDisclaimerEnterpriseNoLoggingV2);
+    }
+
     switch (this.#conversation.type) {
       case AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING:
-        if (noLogging) {
-          return lockedString(UIStringsNotTranslate.inputDisclaimerForStylingEnterpriseNoLogging);
+        if (loggingEnabled) {
+          return lockedString(UIStringsNotTranslate.inputDisclaimerForStyling);
         }
-        return lockedString(UIStringsNotTranslate.inputDisclaimerForStyling);
+        return lockedString(UIStringsNotTranslate.inputDisclaimerForStylingEnterpriseNoLogging);
       case AiAssistanceModel.AiHistoryStorage.ConversationType.FILE:
-        if (noLogging) {
-          return lockedString(UIStringsNotTranslate.inputDisclaimerForFileEnterpriseNoLogging);
+        if (loggingEnabled) {
+          return lockedString(UIStringsNotTranslate.inputDisclaimerForFile);
         }
-        return lockedString(UIStringsNotTranslate.inputDisclaimerForFile);
+        return lockedString(UIStringsNotTranslate.inputDisclaimerForFileEnterpriseNoLogging);
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NETWORK:
-        if (noLogging) {
-          return lockedString(UIStringsNotTranslate.inputDisclaimerForNetworkEnterpriseNoLogging);
+        if (loggingEnabled) {
+          return lockedString(UIStringsNotTranslate.inputDisclaimerForNetwork);
         }
-        return lockedString(UIStringsNotTranslate.inputDisclaimerForNetwork);
+        return lockedString(UIStringsNotTranslate.inputDisclaimerForNetworkEnterpriseNoLogging);
 
       // It is deliberate that both Performance agents use the same disclaimer
       // text and this has been approved by Privacy.
       case AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE:
-        if (noLogging) {
-          return lockedString(UIStringsNotTranslate.inputDisclaimerForPerformanceEnterpriseNoLogging);
+        if (loggingEnabled) {
+          return lockedString(UIStringsNotTranslate.inputDisclaimerForPerformance);
         }
-        return lockedString(UIStringsNotTranslate.inputDisclaimerForPerformance);
+        return lockedString(UIStringsNotTranslate.inputDisclaimerForPerformanceEnterpriseNoLogging);
 
       case AiAssistanceModel.AiHistoryStorage.ConversationType.ACCESSIBILITY:
-        if (noLogging) {
-          return lockedString(UIStringsNotTranslate.inputDisclaimerForAccessibilityEnterpriseNoLogging);
+        if (loggingEnabled) {
+          return lockedString(UIStringsNotTranslate.inputDisclaimerForAccessibility);
         }
-        return lockedString(UIStringsNotTranslate.inputDisclaimerForAccessibility);
+        return lockedString(UIStringsNotTranslate.inputDisclaimerForAccessibilityEnterpriseNoLogging);
 
       case AiAssistanceModel.AiHistoryStorage.ConversationType.BREAKPOINT:
 
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
-        if (noLogging) {
-          return lockedString(UIStringsNotTranslate.inputDisclaimerForNoContextEnterpriseNoLogging);
+        if (loggingEnabled) {
+          return lockedString(UIStringsNotTranslate.inputDisclaimerForNoContext);
         }
-        return lockedString(UIStringsNotTranslate.inputDisclaimerForNoContext);
+        return lockedString(UIStringsNotTranslate.inputDisclaimerForNoContextEnterpriseNoLogging);
     }
   }
 

package/front_end/panels/ai_assistance/PatchWidget.ts

@@ -13,7 +13,6 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
-import * as GreenDev from '../../models/greendev/greendev.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as WorkspaceDiff from '../../models/workspace_diff/workspace_diff.js';
@@ -273,20 +272,6 @@ const DEFAULT_VIEW: View = (input, output, target) => {
             nothing}`;
   }
 
-  function renderCopyPrompt(changedCode?: string): LitTemplate {
-    if (!GreenDev.Prototypes.instance().isEnabled('copyToGemini') || !changedCode) {
-      return nothing;
-    }
-
-    // clang-format off
-    return html`<devtools-widget class="copy-to-prompt"
-      ${widget(PanelCommon.CopyChangesToPrompt, {
-        workspaceDiff: input.workspaceDiff,
-        patchAgentCSSChange: changedCode,
-      })}></devtools-widget>`;
-    // clang-format on
-  }
-
   function renderFooter(): LitTemplate {
     if (input.savedToDisk) {
       return nothing;
@@ -357,7 +342,6 @@ const DEFAULT_VIEW: View = (input, output, target) => {
               </div>
             ` :
             html`
-               ${renderCopyPrompt(input.changeSummary)}
                 <devtools-button
                 @click=${input.onApplyToWorkspace}
                 .jslogContext=${'patch-widget.apply-to-workspace'}
@@ -435,7 +419,7 @@ export class PatchWidget extends UI.Widget.Widget {
   #project?: Workspace.Workspace.Project;
   #patchSources?: string;
   #savedToDisk?: boolean;
-  #noLogging: boolean;  // Whether the enterprise setting is `ALLOW_WITHOUT_LOGGING` or not.
+  #loggingEnabled: boolean;  // Whether the enterprise setting is `ALLOW_WITHOUT_LOGGING` or not.
   #patchSuggestionState = PatchSuggestionState.INITIAL;
   #workspaceDiff = WorkspaceDiff.WorkspaceDiff.workspaceDiff();
   #workspace = Workspace.Workspace.WorkspaceImpl.instance();
@@ -450,7 +434,7 @@ export class PatchWidget extends UI.Widget.Widget {
   }) {
     super(element);
     this.#aidaClient = opts?.aidaClient ?? new Host.AidaClient.AidaClient();
-    this.#noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
+    this.#loggingEnabled = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue !==
         Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
     this.#view = view;
 
@@ -514,9 +498,9 @@ export class PatchWidget extends UI.Widget.Widget {
           projectPath,
           projectType: this.#getSelectedProjectType(projectPath),
           savedToDisk: this.#savedToDisk,
-          applyToWorkspaceTooltipText: this.#noLogging ?
-              lockedString(UIStringsNotTranslate.applyToWorkspaceTooltipNoLogging) :
-              lockedString(UIStringsNotTranslate.applyToWorkspaceTooltip),
+          applyToWorkspaceTooltipText: this.#loggingEnabled ?
+              lockedString(UIStringsNotTranslate.applyToWorkspaceTooltip) :
+              lockedString(UIStringsNotTranslate.applyToWorkspaceTooltipNoLogging),
           onLearnMoreTooltipClick: this.#onLearnMoreTooltipClick.bind(this),
           onApplyToWorkspace: this.#onApplyToWorkspace.bind(this),
           onCancel: () => {
@@ -566,8 +550,8 @@ export class PatchWidget extends UI.Widget.Widget {
         },
         {
           iconName: 'google',
-          content: this.#noLogging ? lockedString(UIStringsNotTranslate.freDisclaimerTextPrivacyNoLogging) :
-                                     lockedString(UIStringsNotTranslate.freDisclaimerTextPrivacy),
+          content: this.#loggingEnabled ? lockedString(UIStringsNotTranslate.freDisclaimerTextPrivacy) :
+                                          lockedString(UIStringsNotTranslate.freDisclaimerTextPrivacyNoLogging),
         },
         {
           iconName: 'warning',

package/front_end/panels/ai_assistance/SelectWorkspaceDialog.ts

@@ -233,14 +233,14 @@ export class SelectWorkspaceDialog extends UI.Widget.VBox {
   }
 
   override performUpdate(): void {
-    const noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
+    const loggingEnabled = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue !==
         Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
 
     const viewInput = {
       folders: this.#folders,
       selectedIndex: this.#selectedIndex,
-      selectProjectRootText: noLogging ? lockedString(UIStringsNotTranslate.selectProjectRootNoLogging) :
-                                         lockedString(UIStringsNotTranslate.selectProjectRoot),
+      selectProjectRootText: loggingEnabled ? lockedString(UIStringsNotTranslate.selectProjectRoot) :
+                                              lockedString(UIStringsNotTranslate.selectProjectRootNoLogging),
       showAutomaticWorkspaceNudge: this.#automaticFileSystemManager.automaticFileSystem === null &&
           this.#automaticFileSystemManager.availability === 'available',
       onProjectSelected: (index: number) => {

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

@@ -161,6 +161,13 @@ Common.Settings.registerSettingExtension({
   },
 });
 
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.AI,
+  settingName: 'ai-assistance-v2-opt-in-change-dialog-seen',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});
+
 UI.ActionRegistration.registerActionExtension({
   actionId: 'freestyler.main-menu',
   contextTypes(): [] {

package/front_end/panels/ai_assistance/ai_assistance.ts

@@ -11,6 +11,7 @@ export * from './SelectWorkspaceDialog.js';
 export * as ChatMessage from './components/ChatMessage.js';
 export * as ExploreWidget from './components/ExploreWidget.js';
 export * as ExportForAgentsDialog from './components/ExportForAgentsDialog.js';
+export * as OptInChangeDialog from './components/OptInChangeDialog.js';
 export * as PatchWidget from './PatchWidget.js';
 export * as DisabledWidget from './components/DisabledWidget.js';
 export * as WalkthroughView from './components/WalkthroughView.js';

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -157,9 +157,13 @@ const UIStringsNotTranslate = {
    */
   completed: 'Completed',
   /**
-   * @description Aria label for the cancel icon to be read by screen reader
+   * @description Aria label for the spinner to be read by screen reader when a step is in progress.
    */
-  canceled: 'Canceled',
+  inProgress: 'In progress',
+  /**
+   * @description Aria label for the aborted icon to be read by screen reader
+   */
+  aborted: 'Aborted',
   /**
    * @description Alt text for the image input (displayed in the chat messages) that has been sent to the model.
    */
@@ -208,6 +212,10 @@ const UIStringsNotTranslate = {
    * @description Accessilility label for the button that shows the walkthrough when there are no widgets in the walkthrough.
    */
   showThinking: 'Show thinking',
+  /**
+   * @description Accessilility label for the button that hides the walkthrough when there are no widgets in the walkthrough.
+   */
+  hideThinking: 'Hide thinking',
 } as const;
 
 export interface Step {
@@ -467,7 +475,7 @@ function renderTitle(step: Step): Lit.LitTemplate {
       html`<span class="paused">${lockedString(UIStringsNotTranslate.paused)}: </span>` :
       Lit.nothing;
 
-  return html`<span class="title">${paused}${titleForStep(step)}</span>`;
+  return html`<span class="title" aria-label=${titleForStep(step)}>${paused}${titleForStep(step)}</span>`;
 }
 
 function renderStepCode(step: Step): Lit.LitTemplate {
@@ -577,10 +585,10 @@ function renderWalkthroughSidebarButton(
   });
 
   let accessibleLabel = title;
-  if (!isExpanded) {
-    if (input.isLoading || lastStep.requestApproval) {
-      accessibleLabel = `${titleForStep(lastStep)} ${i18n.i18n.lockedString(UIStringsNotTranslate.showThinking)}`;
-    }
+  // If the agent is still thinking we want the accessibility label to include the current step title followed by Show/Hide thinking.
+  if (input.isLoading) {
+    const suffix = isExpanded ? UIStringsNotTranslate.hideThinking : UIStringsNotTranslate.showThinking;
+    accessibleLabel = `${titleForStep(lastStep)} ${i18n.i18n.lockedString(suffix)}`;
   }
 
   // clang-format off
@@ -683,7 +691,7 @@ function renderStepBadge({step, isLoading, isLast}: {
   isLast: boolean,
 }): Lit.LitTemplate {
   if (isLoading && isLast && !step.requestApproval) {
-    return html`<devtools-spinner></devtools-spinner>`;
+    return html`<devtools-spinner aria-label=${lockedString(UIStringsNotTranslate.inProgress)}></devtools-spinner>`;
   }
 
   let iconName = 'checkmark';
@@ -691,10 +699,10 @@ function renderStepBadge({step, isLoading, isLast}: {
   let role: 'button'|undefined = 'button';
   if (isLast && step.requestApproval) {
     role = undefined;
-    ariaLabel = undefined;
+    ariaLabel = lockedString(UIStringsNotTranslate.paused);
     iconName = 'pause-circle';
   } else if (step.canceled) {
-    ariaLabel = lockedString(UIStringsNotTranslate.canceled);
+    ariaLabel = lockedString(UIStringsNotTranslate.aborted);
     iconName = 'cross';
   }
 
@@ -938,6 +946,7 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
   const revealButton = html`
     <devtools-button class="widget-reveal-button"
       .variant=${Buttons.Button.Variant.TEXT}
+      .accessibleLabel=${lockedString(UIStringsNotTranslate.reveal)}
       @click=${onReveal}
     >
       ${response.customRevealTitle ?? lockedString(UIStringsNotTranslate.reveal)}
@@ -950,7 +959,7 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
     <div class=${classes}>
       ${response.title ? html`
         <div class="widget-header">
-          <div class="widget-name">${response.title}</div>
+          <h3 class="widget-name">${response.title}</h3>
           <div class="widget-reveal-container">
             ${revealButton}
           </div>
@@ -1255,6 +1264,7 @@ function renderActions(input: ChatMessageViewInput, output: ViewOutput): Lit.Lit
             .jslogContext=${'ai-export-for-agents'}
             .variant=${Buttons.Button.Variant.OUTLINED}
             .iconName=${'copy'}
+            aria-label=${lockedString(UIStringsNotTranslate.exportForAgents)}
             @click=${input.onExportClick}
           >${lockedString(UIStringsNotTranslate.exportForAgents)}</devtools-button>
           ${input.suggestions ? html`<div class="vertical-separator"></div>` : Lit.nothing}

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -282,6 +282,10 @@ export class ChatView extends HTMLElement {
     textArea.focus();
   }
 
+  setInputValue(text: string): void {
+    this.#output.input?.getWidget()?.setInputValue(text);
+  }
+
   restoreScrollPosition(): void {
     if (this.#scrollTop === undefined) {
       return;

package/front_end/panels/ai_assistance/components/ExportForAgentsDialog.ts

@@ -59,6 +59,8 @@ export const enum StateType {
   CONVERSATION = 'conversation',
 }
 
+const DEFAULT_STATE_TYPE = StateType.PROMPT;
+
 export interface State {
   activeType: StateType;
   promptText: string;
@@ -78,26 +80,25 @@ type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 export const DEFAULT_VIEW: View = (input, _output, target): void => {
   const isPrompt = input.state.activeType === StateType.PROMPT;
   const buttonText = isPrompt ? i18nString(UIStrings.copyToClipboard) : i18nString(UIStrings.saveAsMarkdown);
-  const exportText = isPrompt && input.state.isPromptLoading ?
-      i18nString(UIStrings.generatingSummary) :
-      (isPrompt ? input.state.promptText : input.state.conversationText);
+  const exportText = isPrompt ? input.state.promptText : input.state.conversationText;
   // clang-format off
 
   render(html`
     <style>${styles}</style>
     <div class="export-for-agents-dialog">
       <header>
-        <h2 tabindex="-1">
+        <h1 id="export-for-agents-dialog-title" tabindex="-1">
           ${i18nString(UIStrings.exportForAgents)}
-        </h2>
+        </h1>
       </header>
-      <div class="state-selection">
+      <div class="state-selection" role="radiogroup" aria-labelledby="export-for-agents-dialog-title">
         <label>
           <input
             type="radio"
             value="prompt"
             name="export-state"
             .checked=${isPrompt}
+            aria-label=${i18nString(UIStrings.asPrompt)}
             @change=${() => input.onStateChange(StateType.PROMPT)}
           >
           ${i18nString(UIStrings.asPrompt)}
@@ -108,19 +109,20 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
             value="conversation"
             name="export-state"
             .checked=${!isPrompt}
+            aria-label=${i18nString(UIStrings.asMarkdown)}
             @change=${() => input.onStateChange(StateType.CONVERSATION)}
           >
           ${i18nString(UIStrings.asMarkdown)}
         </label>
       </div>
       <main>
-        ${input.state.isPromptLoading ? html`
+        ${isPrompt && input.state.isPromptLoading ? html`
           <span class="prompt-loading">
             <devtools-spinner></devtools-spinner>
             ${i18nString(UIStrings.generatingSummary)}
           </span>
           ` : Lit.nothing}
-        <textarea readonly .value=${input.state.isPromptLoading ? '' : exportText}></textarea>
+        <textarea readonly .value=${isPrompt && input.state.isPromptLoading ? '' : exportText}></textarea>
       </main>
       <div class="disclaimer">${i18nString(UIStrings.disclaimer)}</div>
       <footer>
@@ -130,6 +132,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
             .jslogContext=${input.jslogContext}
             .variant=${Buttons.Button.Variant.PRIMARY}
             .disabled=${isPrompt && input.state.isPromptLoading}
+            .accessibleLabel=${buttonText}
           >
             ${buttonText}
           </devtools-button>
@@ -141,6 +144,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
 };
 
 export class ExportForAgentsDialog extends UI.Widget.VBox {
+  static #lastSelectedType: StateType = DEFAULT_STATE_TYPE;
   readonly #view: View;
   readonly #dialog: UI.Dialog.Dialog;
   #state: State;
@@ -157,7 +161,7 @@ export class ExportForAgentsDialog extends UI.Widget.VBox {
     super();
     this.#dialog = options.dialog;
     this.#state = {
-      activeType: StateType.PROMPT,
+      activeType: ExportForAgentsDialog.#lastSelectedType,
       promptText: typeof options.promptText === 'string' ? options.promptText : '',
       conversationText: options.markdownText,
       isPromptLoading: typeof options.promptText !== 'string',
@@ -176,8 +180,13 @@ export class ExportForAgentsDialog extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
+  static clearPersistedViewState(): void {
+    ExportForAgentsDialog.#lastSelectedType = DEFAULT_STATE_TYPE;
+  }
+
   #onStateChange = (newState: StateType): void => {
     this.#state.activeType = newState;
+    ExportForAgentsDialog.#lastSelectedType = newState;
     this.requestUpdate();
   };
 
@@ -191,9 +200,10 @@ export class ExportForAgentsDialog extends UI.Widget.VBox {
         onButtonClick = (event: Event): void => {
           event.preventDefault();
           Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.#state.promptText);
-          Snackbars.Snackbar.Snackbar.show({
+          const snackbar = Snackbars.Snackbar.Snackbar.show({
             message: i18nString(UIStrings.copiedToClipboard),
           });
+          snackbar.setAttribute('aria-label', i18nString(UIStrings.copiedToClipboard));
           this.#dialog.hide();
         };
         break;

package/front_end/panels/ai_assistance/components/OptInChangeDialog.ts

@@ -0,0 +1,179 @@
+// 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 * as i18n from '../../../core/i18n/i18n.js';
+import * as Root from '../../../core/root/root.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import * as Lit from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
+
+import styles from './optInChangeDialog.css.js';
+
+const {html, render} = Lit;
+
+const UIStrings = {
+  /**
+   * @description Title for the opt-in change dialog.
+   */
+  title: 'AI assistance just got better',
+  /**
+   * @description First point in the opt-in change dialog, describing the new integration.
+   */
+  integrationPoint:
+      'AI assistance is now integrated with Application and Lighthouse panels, and pulls context from data sources simultaneously',
+  /**
+   * @description Second point in the opt-in change dialog, describing the new widgets.
+   */
+  widgetPoint: 'Use widgets to verify results or jump to source data for select debugging cases',
+  /**
+   * @description Third point in the opt-in change dialog (disclaimer) for regular users.
+   */
+  privacyDisclaimer:
+      'Chat messages, data accessible for this site via DevTools panels and Web APIs, and items you select such as network requests, files, and performance traces are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won’t always get it right.',
+  /**
+   * @description Third point in the opt-in change dialog (disclaimer) for enterprise users with logging disabled.
+   */
+  privacyDisclaimerEnterpriseNoLogging:
+      'Chat messages, data accessible for this site via DevTools panels and Web APIs, and items you select such as network requests, files, and performance traces are sent to Google. The content submitted to and generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
+  /**
+   * @description Button text for managing settings.
+   */
+  manageSettings: 'Manage in settings',
+  /**
+   * @description Button text for acknowledging the changes.
+   */
+  gotIt: 'Got it',
+} as const;
+
+const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/OptInChangeDialog.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+interface ViewInput {
+  onGotIt: () => void;
+  onManageSettings: () => void;
+  loggingEnabled: boolean;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target): void => {
+  const disclaimer = input.loggingEnabled ? i18nString(UIStrings.privacyDisclaimer) :
+                                            i18nString(UIStrings.privacyDisclaimerEnterpriseNoLogging);
+  // clang-format off
+  render(html`
+    <style>${styles}</style>
+    <div class="opt-in-change-dialog" jslog=${VisualLogging.dialog('ai-v2-opt-in-change-dialog')}>
+      <header>
+        <div class="header-icon-container">
+          <devtools-icon name="smart-assistant" role="presentation"></devtools-icon>
+        </div>
+        <h1 tabindex="-1">
+          ${i18nString(UIStrings.title)}
+        </h1>
+      </header>
+      <main>
+        <div class="item">
+          <devtools-icon name="lightbulb-spark" role="presentation"></devtools-icon>
+          <div class="text">${i18nString(UIStrings.integrationPoint)}</div>
+        </div>
+        <div class="item">
+          <devtools-icon name="flowsheet" role="presentation"></devtools-icon>
+          <div class="text">${i18nString(UIStrings.widgetPoint)}</div>
+        </div>
+        <div class="item">
+          <devtools-icon name="google" role="presentation"></devtools-icon>
+          <div class="text">${disclaimer}</div>
+        </div>
+      </main>
+      <footer>
+        <div class="right-buttons">
+          <devtools-button
+            @click=${input.onManageSettings}
+            .jslogContext=${'ai-assistance-v2-opt-in.manage-settings'}
+            .variant=${Buttons.Button.Variant.OUTLINED}
+            .accessibleLabel=${i18nString(UIStrings.manageSettings)}
+          >
+            ${i18nString(UIStrings.manageSettings)}
+          </devtools-button>
+          <devtools-button
+            @click=${input.onGotIt}
+            .jslogContext=${'ai-assistance-v2-opt-in.got-it'}
+            .variant=${Buttons.Button.Variant.PRIMARY}
+            .accessibleLabel=${i18nString(UIStrings.gotIt)}
+          >
+            ${i18nString(UIStrings.gotIt)}
+          </devtools-button>
+        </div>
+      </footer>
+    </div>
+  `, target);
+  // clang-format on
+};
+
+export class OptInChangeDialog extends UI.Widget.VBox {
+  readonly #view: View;
+  readonly #onGotIt: () => void;
+  readonly #onManageSettings: () => void;
+
+  constructor(
+      options: {
+        onGotIt: () => void,
+        onManageSettings: () => void,
+      },
+      view: View = DEFAULT_VIEW) {
+    super();
+    this.#onGotIt = options.onGotIt;
+    this.#onManageSettings = options.onManageSettings;
+    this.#view = view;
+
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const loggingEnabled = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue !==
+        Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
+
+    const viewInput = {
+      onGotIt: this.#onGotIt,
+      onManageSettings: this.#onManageSettings,
+      loggingEnabled,
+    };
+
+    this.#view(viewInput, undefined, this.contentElement);
+  }
+
+  focusTitle(): void {
+    this.contentElement.querySelector('h1')?.focus();
+  }
+
+  static show(options: {
+    onGotIt: () => void,
+    onManageSettings: () => void,
+  }): void {
+    const dialog = new UI.Dialog.Dialog();
+    dialog.setAriaLabel(i18nString(UIStrings.title));
+    dialog.setOutsideClickCallback(event => event.consume(true));
+    dialog.setCloseOnEscape(false);
+    dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
+    dialog.setDimmed(true);
+
+    const optInChangeDialog = new OptInChangeDialog({
+      onGotIt: () => {
+        dialog.hide();
+        options.onGotIt();
+      },
+      onManageSettings: () => {
+        dialog.hide();
+        options.onManageSettings();
+      },
+    });
+    optInChangeDialog.show(dialog.contentElement);
+
+    void optInChangeDialog.updateComplete.then(() => {
+      dialog.show();
+      optInChangeDialog.focusTitle();
+    });
+  }
+}