chrome-devtools-frontend 1.0.1611825 → 1.0.1613465

package/front_end/ui/legacy/SplitWidget.ts

@@ -422,9 +422,9 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
    */
   #totalSizeDIP(): number {
     if (!this.#totalSizeCSS) {
-      this.#totalSizeCSS = this.#isVertical ? this.contentElement.offsetWidth : this.contentElement.offsetHeight;
-      this.#totalSizeOtherDimensionCSS =
-          this.#isVertical ? this.contentElement.offsetHeight : this.contentElement.offsetWidth;
+      const {width, height} = this.contentElement.getBoundingClientRect();
+      this.#totalSizeCSS = this.#isVertical ? width : height;
+      this.#totalSizeOtherDimensionCSS = this.#isVertical ? height : width;
     }
     return ZoomManager.instance().cssToDIP(this.#totalSizeCSS);
   }
@@ -457,9 +457,12 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     this.#removeAllLayoutProperties();
 
     // this.#totalSizeDIP is available below since we successfully applied constraints.
-    const roundSizeCSS = Math.round(ZoomManager.instance().dipToCSS(sizeDIP));
-    const sidebarSizeValue = roundSizeCSS + 'px';
-    const mainSizeValue = (this.#totalSizeCSS - roundSizeCSS) + 'px';
+    const sizeCSS = ZoomManager.instance().dipToCSS(sizeDIP);
+    const sidebarSizeValue = sizeCSS + 'px';
+    const mainSizeValue = (this.#totalSizeCSS - sizeCSS) + 'px';
+    // With `box-sizing: border-box` on the sidebar (set in splitWidget.css),
+    // flex-basis, width, and height all include the border, so the sidebar's
+    // border does not steal space from the main pane.
     this.#sidebarElement.style.flexBasis = sidebarSizeValue;
 
     // Make both sides relayout boundaries.

package/front_end/ui/legacy/components/settings_ui/SettingsUI.ts

@@ -105,7 +105,7 @@ export function renderSettingSelect(setting: Common.Settings.Setting<unknown>, s
 }
 
 export const renderControlForSetting = function(
-    setting: Common.Settings.Setting<unknown>, subtitle?: string): TemplateResult|null {
+    setting: Common.Settings.Setting<unknown>, subtitle?: string): TemplateResult|typeof nothing {
   switch (setting.type()) {
     case Common.Settings.SettingType.BOOLEAN: {
       const onchange = (): void => {
@@ -123,14 +123,14 @@ export const renderControlForSetting = function(
     }
     default:
       console.error('Invalid setting type: ' + setting.type());
-      return null;
+      return nothing;
   }
 };
 
 export const createControlForSetting = function(
     setting: Common.Settings.Setting<unknown>, subtitle?: string): HTMLElement|null {
   const template = renderControlForSetting(setting, subtitle);
-  if (template === null) {
+  if (template === nothing) {
     return null;
   }
   const fragment = document.createDocumentFragment();

package/front_end/ui/legacy/components/source_frame/FontView.ts

@@ -1,7 +1,6 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
@@ -34,6 +33,7 @@
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import {Directives, html, render} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
@@ -52,24 +52,70 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/source_frame/FontView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const FONT_PREVIEW_LINES = ['ABCDEFGHIJKLM', 'NOPQRSTUVWXYZ', 'abcdefghijklm', 'nopqrstuvwxyz', '1234567890'];
+const MEASURE_FONT_SIZE = 50;
+
+export interface ViewInput {
+  url: Platform.DevToolsPath.UrlString;
+  fontFaceRule: string;
+  fontFamily: string;
+  previewFontSize: string;
+  previewVisible: boolean;
+}
+
+export interface ViewOutput {
+  measureDimensions?: () => {
+    width: number, height: number,
+  };
+}
+
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+// clang-format off
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  let dummyEl: HTMLElement|undefined;
+  render(html`
+    <style>${fontViewStyles}</style>
+    <style>${input.fontFaceRule}</style>
+    <div class="font-view"
+      aria-label=${i18nString(UIStrings.previewOfFontFromS, {PH1: input.url})}
+      style="font-family: ${input.fontFamily}; font-size: ${input.previewFontSize}"
+      aria-hidden="true"
+      ?hidden=${!input.previewVisible}
+    >${FONT_PREVIEW_LINES.map((line, i) => html`${i > 0 ? html`<br>` : ''}${line}`)}</div>
+    <div ${Directives.ref(el => { dummyEl = el as HTMLElement; })}
+      style="visibility: hidden; z-index: -1; display: inline; position: absolute; font-family: ${input.fontFamily}; font-size: ${MEASURE_FONT_SIZE}px"
+    >${FONT_PREVIEW_LINES.map((line, i) => html`${i > 0 ? html`<br>` : ''}${line}`)}</div>
+  `, target);
+  output.measureDimensions = () => {
+    if (!dummyEl) {
+      return {width: 0, height: 0};
+    }
+    return {width: dummyEl.offsetWidth, height: dummyEl.offsetHeight};
+  };
+};
+// clang-format on
+
 export class FontView extends UI.View.SimpleView {
   private readonly url: Platform.DevToolsPath.UrlString;
   private readonly contentProvider: TextUtils.ContentProvider.ContentProvider;
   private readonly mimeTypeLabel: UI.Toolbar.ToolbarText;
-  fontPreviewElement!: HTMLElement|null;
-  private dummyElement!: HTMLElement|null;
-  fontStyleElement!: HTMLStyleElement|null;
-  private inResize!: boolean|null;
-  constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) {
+  readonly #view: View;
+  #fontFaceRule = '';
+  #fontFamily = '';
+  #previewFontSize = '';
+  #previewVisible = false;
+  #contentLoaded = false;
+
+  constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider, view: View = DEFAULT_VIEW) {
     super({
       title: i18nString(UIStrings.font),
       viewId: 'font',
       jslog: `${VisualLogging.pane('font-view')}`,
     });
-    this.registerRequiredCSS(fontViewStyles);
-    this.element.classList.add('font-view');
+    this.#view = view;
     this.url = contentProvider.contentURL();
-    UI.ARIAUtils.setLabel(this.element, i18nString(UIStrings.previewOfFontFromS, {PH1: this.url}));
     this.contentProvider = contentProvider;
     this.mimeTypeLabel = new UI.Toolbar.ToolbarText(mimeType);
   }
@@ -78,96 +124,39 @@ export class FontView extends UI.View.SimpleView {
     return [this.mimeTypeLabel];
   }
 
-  private onFontContentLoaded(uniqueFontName: string, contentData: TextUtils.ContentData.ContentDataOrError): void {
-    const url = TextUtils.ContentData.ContentData.isError(contentData) ? this.url : contentData.asDataUrl();
-    if (!this.fontStyleElement) {
-      return;
-    }
-    this.fontStyleElement.textContent =
-        Platform.StringUtilities.sprintf('@font-face { font-family: "%s"; src: url(%s); }', uniqueFontName, url);
-    this.updateFontPreviewSize();
-  }
-
-  private createContentIfNeeded(): void {
-    if (this.fontPreviewElement) {
+  #loadContentIfNeeded(): void {
+    if (this.#contentLoaded) {
       return;
     }
+    this.#contentLoaded = true;
 
-    const uniqueFontName = `WebInspectorFontPreview${++fontId}`;
-    this.fontStyleElement = document.createElement('style');
+    this.#fontFamily = `WebInspectorFontPreview${++fontId}`;
     void this.contentProvider.requestContentData().then(contentData => {
-      this.onFontContentLoaded(uniqueFontName, contentData);
+      const url = TextUtils.ContentData.ContentData.isError(contentData) ? this.url : contentData.asDataUrl();
+      this.#fontFaceRule =
+          Platform.StringUtilities.sprintf('@font-face { font-family: "%s"; src: url(%s); }', this.#fontFamily, url);
+      this.#previewVisible = true;
+      this.requestUpdate();
     });
-    this.element.appendChild(this.fontStyleElement);
-
-    const fontPreview = document.createElement('div');
-    for (let i = 0; i < FONT_PREVIEW_LINES.length; ++i) {
-      if (i > 0) {
-        fontPreview.createChild('br');
-      }
-      UI.UIUtils.createTextChild(fontPreview, FONT_PREVIEW_LINES[i]);
-    }
-    this.fontPreviewElement = (fontPreview.cloneNode(true) as HTMLDivElement);
-    if (!this.fontPreviewElement) {
-      return;
-    }
-    UI.ARIAUtils.setHidden(this.fontPreviewElement, true);
-    this.fontPreviewElement.style.overflow = 'hidden';
-    this.fontPreviewElement.style.setProperty('font-family', uniqueFontName);
-    this.fontPreviewElement.style.setProperty('visibility', 'hidden');
-
-    this.dummyElement = fontPreview;
-    this.dummyElement.style.visibility = 'hidden';
-    this.dummyElement.style.zIndex = '-1';
-    this.dummyElement.style.display = 'inline';
-    this.dummyElement.style.position = 'absolute';
-    this.dummyElement.style.setProperty('font-family', uniqueFontName);
-    this.dummyElement.style.setProperty('font-size', MEASUURE_FONT_SIZE + 'px');
-
-    this.element.appendChild(this.fontPreviewElement);
   }
 
   override wasShown(): void {
     super.wasShown();
-    this.createContentIfNeeded();
-
-    this.updateFontPreviewSize();
+    this.#loadContentIfNeeded();
+    this.requestUpdate();
   }
 
   override onResize(): void {
-    if (this.inResize) {
-      return;
-    }
-
-    this.inResize = true;
-    try {
-      this.updateFontPreviewSize();
-    } finally {
-      this.inResize = null;
-    }
+    this.requestUpdate();
   }
 
-  private measureElement(): {
+  #calculateFontPreviewSize(dimension: {
     width: number,
     height: number,
-  } {
-    if (!this.dummyElement) {
-      throw new Error('No font preview loaded');
+  }): string {
+    if (!this.#previewVisible || !this.isShowing()) {
+      return '';
     }
-    this.element.appendChild(this.dummyElement);
-    const result = {width: this.dummyElement.offsetWidth, height: this.dummyElement.offsetHeight};
-    this.element.removeChild(this.dummyElement);
-
-    return result;
-  }
-
-  updateFontPreviewSize(): void {
-    if (!this.fontPreviewElement || !this.isShowing()) {
-      return;
-    }
-
-    this.fontPreviewElement.style.removeProperty('visibility');
-    const dimension = this.measureElement();
 
     const height = dimension.height;
     const width = dimension.width;
@@ -177,18 +166,42 @@ export class FontView extends UI.View.SimpleView {
     const containerHeight = this.element.offsetHeight - 30;
 
     if (!height || !width || !containerWidth || !containerHeight) {
-      this.fontPreviewElement.style.removeProperty('font-size');
-      return;
+      return '';
     }
 
     const widthRatio = containerWidth / width;
     const heightRatio = containerHeight / height;
-    const finalFontSize = Math.floor(MEASUURE_FONT_SIZE * Math.min(widthRatio, heightRatio)) - 2;
+    const finalFontSize = Math.floor(MEASURE_FONT_SIZE * Math.min(widthRatio, heightRatio)) - 2;
 
-    this.fontPreviewElement.style.setProperty('font-size', finalFontSize + 'px', undefined);
+    return `${finalFontSize}px`;
+  }
+
+  override performUpdate(): void {
+    const output: ViewOutput = {};
+    this.#view(
+        {
+          url: this.url,
+          fontFaceRule: this.#fontFaceRule,
+          fontFamily: this.#fontFamily,
+          previewFontSize: this.#previewFontSize,
+          previewVisible: this.#previewVisible,
+        },
+        output,
+        this.contentElement,
+    );
+
+    if (!output.measureDimensions) {
+      return;
+    }
+
+    const requestedFontSize = this.#calculateFontPreviewSize(output.measureDimensions());
+    if (requestedFontSize === this.#previewFontSize) {
+      return;
+    }
+
+    this.#previewFontSize = requestedFontSize;
+    this.requestUpdate();
   }
 }
 
 let fontId = 0;
-const FONT_PREVIEW_LINES = ['ABCDEFGHIJKLM', 'NOPQRSTUVWXYZ', 'abcdefghijklm', 'nopqrstuvwxyz', '1234567890'];
-const MEASUURE_FONT_SIZE = 50;

package/front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -65,20 +65,20 @@ const UIStrings = {
    */
   doYouTrustThisCode: 'Do you trust this code?',
   /**
-   * @description Warning shown to users when pasting text/code into DevTools.
+   * @description Warning shown to users when pasting text/code into DevTools. IMPORTANT: keep double quotes around PH1 and do not use single quotes.
    * @example {allow pasting} PH1
    */
   doNotPaste:
-      'Don\'t paste code you do not understand or have not reviewed yourself into DevTools. This could allow attackers to steal your identity or take control of your computer. Please type \'\'{PH1}\'\' below to allow pasting.',
+      'Don\'t paste code you do not understand or have not reviewed yourself into DevTools. This could allow attackers to steal your identity or take control of your computer. Please type “{PH1}” below to allow pasting.',
   /**
    * @description Text a user needs to type in order to confirm that they are aware of the danger of pasting code into the DevTools console.
    */
   allowPasting: 'allow pasting',
   /**
-   * @description Input box placeholder which instructs the user to type 'allow pasting' into the input box.
+   * @description Input box placeholder which instructs the user to type 'allow pasting' into the input box. IMPORTANT: keep double quotes around PH1 and do not use single quotes.
    * @example {allow pasting} PH1
    */
-  typeAllowPasting: 'Type \'\'{PH1}\'\'',
+  typeAllowPasting: 'Type “{PH1}”',
   /**
    * @description Error message shown when the user tries to open a file that contains non-readable data. "Editor" refers to
    * a text editor.

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -345,6 +345,9 @@ export const knownContextValues = new Set([
   'ai-assistance-history-images',
   'ai-assistance-patching-fre-completed',
   'ai-assistance-patching-selected-project-id',
+  'ai-assistance-v2-opt-in-change-dialog-seen',
+  'ai-assistance-v2-opt-in.got-it',
+  'ai-assistance-v2-opt-in.manage-settings',
   'ai-code-completion-citations',
   'ai-code-completion-citations.citation-link',
   'ai-code-completion-disclaimer',
@@ -366,6 +369,7 @@ export const knownContextValues = new Set([
   'ai-export-for-agents.save-as-markdown',
   'ai-hide-walkthrough-sidebar',
   'ai-show-walkthrough-sidebar',
+  'ai-v2-opt-in-change-dialog',
   'ai_assistance',
   'align-content',
   'align-content-center',
@@ -1104,6 +1108,7 @@ export const knownContextValues = new Set([
   'css',
   'css-angle',
   'css-animation-name',
+  'css-animations-only-when-animations-tab-open',
   'css-font-palette',
   'css-function',
   'css-layers',
@@ -1809,6 +1814,7 @@ export const knownContextValues = new Set([
   'greendev',
   'greendev-ai-annotations-enabled',
   'greendev-artifact-viewer-enabled',
+  'greendev-beyond-styling-enabled',
   'greendev-breakpoint-debugger-agent-enabled',
   'greendev-copy-to-gemini-enabled',
   'greendev-emulation-capabilities-enabled',

package/package.json

@@ -104,5 +104,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1611825"
+  "version": "1.0.1613465"
 }

package/front_end/panels/common/CopyChangesToPrompt.ts

@@ -1,233 +0,0 @@
-// 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.
-`;