chrome-devtools-frontend 1.0.1559913 → 1.0.1561528

package/front_end/panels/ai_assistance/components/userActionRow.css

@@ -118,4 +118,234 @@
       padding: 0 var(--sys-size-4);
     }
   }
+
+  .chat-message {
+    user-select: text;
+    cursor: initial;
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-size-5);
+    width: 100%;
+    padding: var(--sys-size-7) var(--sys-size-5);
+    font-size: 12px;
+    word-break: normal;
+    overflow-wrap: anywhere;
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+
+    &.is-last-message {
+      border-bottom: 0;
+    }
+
+    .message-info {
+      display: flex;
+      align-items: center;
+      height: var(--sys-size-11);
+      gap: var(--sys-size-4);
+      font: var(--sys-typescale-body4-bold);
+
+      img {
+        border: 0;
+        border-radius: var(--sys-shape-corner-full);
+        display: block;
+        height: var(--sys-size-9);
+        width: var(--sys-size-9);
+      }
+
+      h2 {
+        font: var(--sys-typescale-body4-bold);
+      }
+    }
+
+    .actions {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sys-size-8);
+      max-width: 100%;
+    }
+
+    .aborted {
+      color: var(--sys-color-on-surface-subtle);
+    }
+
+    .image-link {
+      width: fit-content;
+      border-radius: var(--sys-shape-corner-small);
+      outline-offset: var(--sys-size-2);
+
+      img {
+        max-height: var(--sys-size-20);
+        max-width: 100%;
+        border-radius: var(--sys-shape-corner-small);
+        border: 1px solid var(--sys-color-neutral-outline);
+        width: fit-content;
+        vertical-align: bottom;
+      }
+    }
+
+    .unavailable-image {
+      margin: var(--sys-size-4) 0;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      height: var(--sys-size-17);
+      width: var(--sys-size-18);
+      background-color: var(--sys-color-surface3);
+      border-radius: var(--sys-shape-corner-small);
+      border: 1px solid var(--sys-color-neutral-outline);
+
+      devtools-icon {
+        color: var(--sys-color-state-disabled);
+      }
+    }
+  }
+
+  .indicator {
+    color: var(--sys-color-green-bright);
+  }
+
+  .summary {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    padding: var(--sys-size-3);
+    line-height: var(--sys-size-9);
+    cursor: default;
+    gap: var(--sys-size-3);
+    justify-content: center;
+    align-items: center;
+
+    .title {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      font: var(--sys-typescale-body4-regular);
+
+      .paused {
+        font: var(--sys-typescale-body4-bold);
+      }
+    }
+  }
+
+  .step-code {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-size-2);
+  }
+
+  .js-code-output {
+    devtools-code-block {
+      --code-block-max-code-height: 50px;
+    }
+  }
+
+  .context-details {
+    devtools-code-block {
+      --code-block-max-code-height: 80px;
+    }
+  }
+
+  .step {
+    width: fit-content;
+    background-color: var(--sys-color-surface3);
+    border-radius: var(--sys-size-6);
+    position: relative;
+
+    &.empty {
+      pointer-events: none;
+
+      .arrow {
+        display: none;
+      }
+    }
+
+    &:not(&[open]):hover::after {
+      content: '';
+      height: 100%;
+      width: 100%;
+      border-radius: inherit;
+      position: absolute;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      background-color: var(--sys-color-state-hover-on-subtle);
+    }
+
+    &.paused {
+      .indicator {
+        color: var(--sys-color-on-surface-subtle);
+      }
+    }
+
+    &.canceled {
+      .summary {
+        color: var(--sys-color-state-disabled);
+        text-decoration: line-through;
+      }
+
+      .indicator {
+        color: var(--sys-color-state-disabled);
+      }
+    }
+
+    devtools-markdown-view {
+      --code-background-color: var(--sys-color-surface1);
+    }
+
+    devtools-icon {
+      vertical-align: bottom;
+    }
+
+    devtools-spinner {
+      width: var(--sys-size-9);
+      height: var(--sys-size-9);
+      padding: var(--sys-size-2);
+    }
+
+    &[open] {
+      width: auto;
+
+      .summary .title {
+        white-space: normal;
+        overflow: unset;
+      }
+
+      .summary .arrow {
+        transform: rotate(180deg);
+      }
+    }
+
+    summary::marker {
+      content: '';
+    }
+
+    summary {
+      border-radius: var(--sys-size-6);
+    }
+
+    .step-details {
+      padding: 0 var(--sys-size-5) var(--sys-size-4) var(--sys-size-12);
+      display: flex;
+      flex-direction: column;
+      gap: var(--sys-size-6);
+
+      devtools-code-block {
+        --code-block-background-color: var(--sys-color-surface1);
+      }
+    }
+  }
+
+  .error-step {
+    color: var(--sys-color-error);
+  }
+
+  .side-effect-confirmation {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-size-5);
+    padding-bottom: var(--sys-size-4);
+  }
+
+  .side-effect-buttons-container {
+    display: flex;
+    gap: var(--sys-size-4);
+  }
 }

package/front_end/panels/autofill/AutofillView.ts

@@ -198,11 +198,11 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
                   <td>
                       ${field.autofillType}
                       ${field.fillingStrategy === FillingStrategy.AutocompleteAttribute ?
-                            html`<devtools-adorner title=${i18nString(UIStrings.autocompleteAttribute)} .data=${{name: field.fillingStrategy}}>
+                            html`<devtools-adorner .name=${field.fillingStrategy} title=${i18nString(UIStrings.autocompleteAttribute)}>
                               <span>${i18nString(UIStrings.attr)}</span>
                             </devtools-adorner>` :
                         field.fillingStrategy === FillingStrategy.AutofillInferred ?
-                            html`<devtools-adorner title=${i18nString(UIStrings.inferredByHeuristics)} .data=${{name: field.fillingStrategy}}>
+                            html`<devtools-adorner .name=${field.fillingStrategy} title=${i18nString(UIStrings.inferredByHeuristics)}>
                               <span>${i18nString(UIStrings.heur)}</span>
                             </devtools-adorner>` :
                             Lit.nothing}

package/front_end/panels/changes/ChangesView.ts

@@ -6,11 +6,13 @@ import '../../ui/legacy/legacy.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
+import * as GreenDev from '../../models/greendev/greendev.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
 import * as WorkspaceDiff from '../../models/workspace_diff/workspace_diff.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 * as PanelsCommon from '../common/common.js';
 
 import {ChangesSidebar, Events} from './ChangesSidebar.js';
 import changesViewStyles from './changesView.css.js';
@@ -27,6 +29,7 @@ const UIStrings = {
    * @description Text in Changes View of the Changes tab to explain the Changes panel.
    */
   changesViewDescription: 'On this page you can track code changes made within DevTools.',
+
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/changes/ChangesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -37,11 +40,14 @@ interface ViewInput {
   workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl;
 }
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
-export const DEFAULT_VIEW: View = (input, output, target) => {
+export const DEFAULT_VIEW: View = (input, _output, target) => {
   const onSidebar = (sidebar: ChangesSidebar): void => {
     sidebar.addEventListener(
         Events.SELECTED_UI_SOURCE_CODE_CHANGED, () => input.onSelect(sidebar.selectedUISourceCode()));
   };
+
+  const hasCopyToPrompt = GreenDev.Prototypes.instance().isEnabled('copyToGemini');
+
   render(
       // clang-format off
       html`
@@ -62,6 +68,14 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                                               workspaceDiff: input.workspaceDiff
                                             })}></devtools-widget>
           </div>
+          ${hasCopyToPrompt ? html`
+            <devtools-widget class="copy-to-prompt"
+              .widgetConfig=${UI.Widget.widgetConfig(PanelsCommon.CopyChangesToPrompt, {
+                workspaceDiff: input.workspaceDiff,
+                patchAgentCSSChange: null,
+              })}
+            ></devtools-widget>
+          ` : Lit.nothing}
         </div>
         <devtools-widget
           slot="sidebar"

package/front_end/panels/changes/changesView.css

@@ -40,3 +40,9 @@
 [hidden] {
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
+
+.copy-to-prompt {
+  margin: var(--sys-size-4);
+  /* Got to override the default flex properties for widgets */
+  flex-grow: 0 !important; /* stylelint-disable-line declaration-no-important */
+}

package/front_end/panels/common/BadgeNotification.ts

@@ -50,9 +50,9 @@ const UIStrings = {
   starterBadgeAwardMessageNoGdpProfile:
       'You earned the {PH1} badge for the {PH2}! Create a profile to claim your badge.',
   /**
-   * @description Action title for snoozing the starter badge.
+   * @description Action title for dismissing the badge notification.
    */
-  remindMeLater: 'Remind me later',
+  noThanks: 'No thanks',
   /**
    * @description Action title for enabling the "Receive badges" setting
    */
@@ -157,11 +157,17 @@ export class BadgeNotification extends UI.Widget.Widget {
     this.markAsRoot();
   }
 
-  async present(badge: Badges.Badge): Promise<void> {
-    if (badge.isStarterBadge) {
-      await this.#presentStarterBadge(badge);
-    } else {
-      this.#presentActivityBasedBadge(badge);
+  async present(badge: Badges.Badge, reason: Badges.BadgeTriggerReason): Promise<void> {
+    switch (reason) {
+      case Badges.BadgeTriggerReason.AWARD:
+        this.#presentActivityBasedBadge(badge);
+        return;
+      case Badges.BadgeTriggerReason.STARTER_BADGE_SETTINGS_NUDGE:
+        this.#presentStarterBadgeSettingsNudge(badge);
+        return;
+      case Badges.BadgeTriggerReason.STARTER_BADGE_PROFILE_NUDGE:
+        this.#presentStarterBadgeProfileNudge(badge);
+        return;
     }
   }
 
@@ -191,70 +197,50 @@ export class BadgeNotification extends UI.Widget.Widget {
     this.#autoCloseTimeout = window.setTimeout(this.#onAutoClose, AUTO_CLOSE_TIME_IN_MS);
   }
 
-  async #presentStarterBadge(badge: Badges.Badge): Promise<void> {
-    const getProfileResponse = await Host.GdpClient.GdpClient.instance().getProfile();
-    // The `getProfile` call failed and returned a `null`.
-    // For that case, we don't show anything.
-    if (!getProfileResponse) {
-      return;
-    }
-
-    const hasGdpProfile = Boolean(getProfileResponse.profile);
-    const receiveBadgesSettingEnabled = Badges.UserBadges.instance().isReceiveBadgesSettingEnabled();
+  #presentStarterBadgeSettingsNudge(badge: Badges.Badge): void {
     const googleDeveloperProgramLink = UI.XLink.XLink.create(
         'https://developers.google.com/program', lockedString('Google Developer Program'), 'badge-link', undefined,
         'program-link');
-
-    // If the user already has a GDP profile and the receive badges setting enabled,
-    // starter badge behaves as if it's an activity based badge.
-    if (hasGdpProfile && receiveBadgesSettingEnabled) {
-      this.#presentActivityBasedBadge(badge);
-      return;
-    }
-
-    // If the user already has a GDP profile and the receive badges setting disabled,
-    // starter badge behaves as a nudge for opting into receiving badges.
-    if (hasGdpProfile && !receiveBadgesSettingEnabled) {
-      this.#show({
-        message: i18nFormatString(
-            UIStrings.starterBadgeAwardMessageSettingDisabled, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
-        jslogContext: badge.jslogContext,
-        actions: [
-          {
-            label: i18nString(UIStrings.remindMeLater),
-            jslogContext: 'remind-me-later',
-            onClick: () => {
-              this.detach();
-              Badges.UserBadges.instance().snoozeStarterBadge();
-            },
+    this.#show({
+      message: i18nFormatString(
+          UIStrings.starterBadgeAwardMessageSettingDisabled, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
+      jslogContext: badge.jslogContext,
+      actions: [
+        {
+          label: i18nString(UIStrings.noThanks),
+          jslogContext: 'no-thanks',
+          onClick: () => {
+            this.#onDismissClick();
           },
-          {
-            label: i18nString(UIStrings.receiveBadges),
-            jslogContext: 'receive-badges',
-            onClick: () => {
-              this.detach();
-              revealBadgeSettings();
-            }
+        },
+        {
+          label: i18nString(UIStrings.receiveBadges),
+          jslogContext: 'receive-badges',
+          onClick: () => {
+            this.detach();
+            revealBadgeSettings();
           }
-        ],
-        imageUri: badge.imageUri,
-        isStarterBadge: true,
-      });
-      return;
-    }
+        }
+      ],
+      imageUri: badge.imageUri,
+      isStarterBadge: true,
+    });
+  }
 
-    // The user does not have a GDP profile, starter badge acts as a nudge for creating a GDP profile.
+  #presentStarterBadgeProfileNudge(badge: Badges.Badge): void {
+    const googleDeveloperProgramLink = UI.XLink.XLink.create(
+        'https://developers.google.com/program', lockedString('Google Developer Program'), 'badge-link', undefined,
+        'program-link');
     this.#show({
       message: i18nFormatString(
           UIStrings.starterBadgeAwardMessageNoGdpProfile, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
       jslogContext: badge.jslogContext,
       actions: [
         {
-          label: i18nString(UIStrings.remindMeLater),
-          jslogContext: 'remind-me-later',
+          label: i18nString(UIStrings.noThanks),
+          jslogContext: 'no-thanks',
           onClick: () => {
-            this.detach();
-            Badges.UserBadges.instance().snoozeStarterBadge();
+            this.#onDismissClick();
           },
         },
         {

package/front_end/panels/common/CopyChangesToPrompt.ts

@@ -0,0 +1,233 @@
+// 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 * as Host from '../../core/host/host.js';
+import * as i18n from '../../core/i18n/i18n.js';
+import * as GreenDev from '../../models/greendev/greendev.js';
+import type * as Workspace from '../../models/workspace/workspace.js';
+import * as WorkspaceDiff from '../../models/workspace_diff/workspace_diff.js';
+import * as Diff from '../../third_party/diff/diff.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
+
+const {render, html} = Lit;
+
+const UIStrings = {
+  /**
+   * @description The message shown in a toast when the response is copied to the clipboard.
+   */
+  responseCopiedToClipboard: 'Response copied to clipboard',
+} as const;
+
+const str_ = i18n.i18n.registerUIStrings('panels/common/CopyChangesToPrompt.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+interface CopyChangesDiff {
+  diff: Diff.Diff.DiffArray|undefined;
+  uiSourceCode: Workspace.UISourceCode.UISourceCode;
+}
+
+interface GeminiChangesViewInput {
+  /**
+   * These are the set of diffs tracked by the Changes Panel.
+   */
+  diffs: CopyChangesDiff[];
+  /**
+   * Supplied by the Patch Agent if it has made any changes on behalf of the
+   * user.
+   */
+  patchAgentCSSChange: string|null;
+  onCopyToClipboard: (text: string) => void;
+}
+
+type GeminiChangesView = (input: GeminiChangesViewInput, output: object, target: HTMLElement) => void;
+
+export class CopyChangesToPrompt extends UI.Widget.Widget {
+  #workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl;
+  readonly #view: GeminiChangesView;
+  #patchAgentCSSChange: string|null = null;
+
+  constructor(target?: HTMLElement, view = GEMINI_CHANGES_VIEW) {
+    super(target);
+    this.#view = view;
+    this.#workspaceDiff = WorkspaceDiff.WorkspaceDiff.workspaceDiff();
+  }
+
+  get patchAgentCSSChange(): string|null {
+    return this.#patchAgentCSSChange;
+  }
+  set patchAgentCSSChange(code: string) {
+    this.#patchAgentCSSChange = code;
+    this.requestUpdate();
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.#workspaceDiff.addEventListener(
+        WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED, this.#onDiffChange, this);
+  }
+
+  override willHide(): void {
+    super.willHide();
+    this.#workspaceDiff.removeEventListener(
+        WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED, this.#onDiffChange, this);
+  }
+
+  #getModifiledFiles(): Workspace.UISourceCode.UISourceCode[] {
+    return this.#workspaceDiff.modifiedUISourceCodes().filter(modified => {
+      return !modified.url().startsWith('inspector://');
+    });
+  }
+
+  #onDiffChange(): void {
+    // TODO: track this and unsubscribe to files?
+    for (const file of this.#getModifiledFiles()) {
+      this.#workspaceDiff.subscribeToDiffChange(file, this.requestUpdate, this);
+    }
+    this.requestUpdate();
+  }
+
+  set workspaceDiff(diff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl) {
+    this.#workspaceDiff = diff;
+    this.requestUpdate();
+  }
+
+  override async performUpdate(): Promise<void> {
+    if (!GreenDev.Prototypes.instance().isEnabled('copyToGemini')) {
+      // We expect code that renders this component to only do so based on this flag, but this is a double-check.
+      return;
+    }
+
+    const diffs = await Promise.all(this.#getModifiledFiles().map(async modifiedUISourceCode => {
+      const diffResponse = await this.#workspaceDiff?.requestDiff(modifiedUISourceCode);
+      return {diff: diffResponse?.diff ?? [], uiSourceCode: modifiedUISourceCode};
+    }));
+    this.#view(
+        {
+          diffs,
+          patchAgentCSSChange: this.#patchAgentCSSChange,
+          onCopyToClipboard: (text: string) => {
+            Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(text);
+            Snackbars.Snackbar.Snackbar.show({
+              message: i18nString(UIStrings.responseCopiedToClipboard),
+            });
+          }
+        },
+        {}, this.contentElement);
+  }
+}
+const GEMINI_CHANGES_VIEW: GeminiChangesView = (input, _output, target) => {
+  const hasDiffs = input.diffs.some(d => {
+    return d.diff !== undefined && d.diff.length > 0;
+  });
+
+  if (!hasDiffs && !input.patchAgentCSSChange) {
+    render(Lit.nothing, target);
+    return;
+  }
+
+  const promptForChangesPanel = hasDiffs ? buildGeminiCommand(input.diffs) : '';
+  const promptForPatchAgentCSS = input.patchAgentCSSChange ? buildPatchAgentCSSPrompt(input.patchAgentCSSChange) : '';
+
+  const finalPrompt = [PREAMBLE, promptForChangesPanel, promptForPatchAgentCSS].filter(x => x.length > 0).join(`\n`);
+
+  function copyClick(): void {
+    input.onCopyToClipboard(finalPrompt);
+  }
+  // clang-format off
+  render(html`<devtools-button
+      .iconName=${'copy'}
+      .variant=${Buttons.Button.Variant.OUTLINED}
+      @click=${copyClick}>Copy prompt to clipboard</devtools-button>
+    `, target);
+  // clang-format on
+};
+
+function buildPatchAgentCSSPrompt(code: string): string {
+  // clang-format off
+  return `The DevTools CSS Patching Agent has also made some CSS changes on behalf of the user. These changes are listed below. Think carefully about how best to apply these changes.
+
+**DevTools Patch Agent changes**
+\`\`\`
+${code}
+\`\`\``;
+  // clang-format on
+}
+
+function buildGeminiCommand(diffs: readonly CopyChangesDiff[]): string {
+  // clang-format off
+  const output = `Below this line are a list of files and the diff for each of them. Consider this diff and apply it to the codebase but remembering that the changes in DevTools may not be the most accurate fixes and you should not necessarily apply them directly as DevTools works with the deployed code and not the source code.
+
+Within the diffs you will often see lines of code commented out. If the diff contains a new line that was some code being wrapped in comments, treat that as if the intent is to delete the code.
+
+How to read a diff:
+* If a line starts with \`-\` , DevTools removed it.
+* If a line starts with \`+\` , DevTools added it.
+* If a line starts with neither a \`+\` or \`-\` , DevTools did not change the line and you can safely ignore it.
+
+${diffs.map(diff => {
+    if (!diff.diff || diff.diff.length === 0) {
+      return '';
+    }
+    return `Filename: ${diff.uiSourceCode.fullDisplayName()}
+
+Diff:
+${formatDiffForLLM(diff.diff)}`;
+  }).filter(x => x.length).join('\n')}`;
+  // clang-format on
+  return output;
+}
+
+function formatDiffForLLM(diffArray: Diff.Diff.DiffArray): string {
+  let formattedDiff = '';
+  for (const diffItem of diffArray) {
+    const operation = diffItem[0];
+    const lines = diffItem[1];
+
+    for (const line of lines) {
+      if (operation === Diff.Diff.Operation.Equal) {
+        formattedDiff += '  ' + line + '\n';
+      } else if (operation === Diff.Diff.Operation.Insert) {
+        formattedDiff += '+ ' + line + '\n';
+      } else if (operation === Diff.Diff.Operation.Delete) {
+        formattedDiff += '- ' + line + '\n';
+      }
+    }
+  }
+  return formattedDiff;
+}
+
+const PREAMBLE =
+    `You are receiving a set of runtime changes (CSS, HTML, and JS) captured via Browser DevTools. Your goal is to persist these changes into the local source code by identifying the original source-of-truth.
+
+Because DevTools reflects the "Flattened Result" of complex build logic, you must follow this "Source-Aware" strategy:
+
+1. **Structural Mapping (HTML/DOM):**
+    - If a DOM element was added/removed, identify the source template (JSX, Vue, Svelte, HTML) responsible.
+    - **Logic Check:** Determine if the change should be a static element or if it requires a new conditional (\`if/else\`) or loop (\`map\`) based on existing component patterns.
+
+2. **Style Mapping (CSS/Attributes):**
+    - Map raw styles to the project's specific styling architecture (Tailwind, SCSS, Styled-Components).
+    - Replace hard-coded values with existing Design Tokens or Theme Variables (\`var(--color-primary)\`, etc.) found in the codebase.
+    - CSS changes may not be applied to CSS files directly. Consider that CSS could be applied via JavaScript, especially if the codebase is using a component based frontend framework or web components.
+
+
+3. **Behavioral Mapping (JS/Event Listeners):**
+    - If logic or event handlers were modified, locate the corresponding functions or hooks in the source.
+    - Ensure new logic follows the project's state management patterns (e.g., React \`useState\`, Redux, or standard ES6+ modules).
+
+4. **Safety & Ambiguity Protocol:**
+    - **Third-Party Code:** If a change targets a DOM element or style generated by an external library (e.g., a UI kit's internal wrapper), do not modify the library's source. Instead, find the appropriate override mechanism in the codebase.
+    - **Uncertainty:** If a DevTools change cannot be mapped to the source with 100% confidence (e.g., minified selectors or ambiguous origin), stop and report the conflict rather than guessing.
+
+5. **Agentic Execution Workflow:**
+    - **Discovery:** Use your tools (\`grep\`, \`find\`, etc.) to locate unique strings or class names from the DevTools log.
+    - **Analysis:** Determine if the target is a reusable component or a specific page instance.
+    - **Implementation:** Execute file edits using the project's idiomatic syntax and formatting standards.
+
+**INSTRUCTION:**
+Begin by searching for the relevant source files. Explain your mapping logic before performing the edits.
+`;

package/front_end/panels/common/common.ts

@@ -108,3 +108,4 @@ export * as ExtensionView from './ExtensionView.js';
 export * as PersistenceUtils from './PersistenceUtils.js';
 export * as DOMLinkifier from './DOMLinkifier.js';
 export * as ExtensionIframe from './ExtensionView.js';
+export {CopyChangesToPrompt} from './CopyChangesToPrompt.js';