chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

package/front_end/models/trace/helpers/Timing.ts

@@ -85,7 +85,7 @@ export function expandWindowByPercentOrToOneMillisecond(
   return expandedWindow;
 }
 
-export interface EventTimingsData<ValueType extends Types.Timing.Micro|Types.Timing.Milli|Types.Timing.Seconds, > {
+export interface EventTimingsData<ValueType extends Types.Timing.Micro|Types.Timing.Milli|Types.Timing.Seconds> {
   startTime: ValueType;
   endTime: ValueType;
   duration: ValueType;

package/front_end/models/trace/insights/Common.ts

@@ -175,7 +175,7 @@ export function getFieldMetricsForInsightSet(
       loadDelay: getMetricTimingResult(pageResult, 'largest_contentful_paint_image_resource_load_delay', scope),
       loadDuration: getMetricTimingResult(pageResult, 'largest_contentful_paint_image_resource_load_duration', scope),
       renderDelay: getMetricTimingResult(pageResult, 'largest_contentful_paint_image_element_render_delay', scope),
-    }
+    },
   };
 }
 

package/front_end/models/trace/insights/DocumentLatency.ts

@@ -242,18 +242,18 @@ export function generateInsight(
             PH1: documentRequest.args.data.redirects.length,
             PH2: millisToString(redirectDuration),
           }),
-          value: noRedirects
+          value: noRedirects,
         },
         serverResponseIsFast: {
           label: serverResponseIsFast ?
               i18nString(UIStrings.passingServerResponseTime, {PH1: millisToString(serverResponseTime)}) :
               i18nString(UIStrings.failedServerResponseTime, {PH1: millisToString(serverResponseTime)}),
-          value: serverResponseIsFast
+          value: serverResponseIsFast,
         },
         usesCompression: {
           label: usesCompression ? i18nString(UIStrings.passingTextCompression) :
                                    i18nString(UIStrings.failedTextCompression),
-          value: usesCompression
+          value: usesCompression,
         },
       },
     },

package/front_end/models/trace/insights/LCPDiscovery.ts

@@ -156,7 +156,7 @@ export function generateInsight(
     checklist: {
       priorityHinted: {
         label: priorityHintFound ? i18nString(UIStrings.fetchPriorityApplied) : missingPriorityHintLabel,
-        value: priorityHintFound
+        value: priorityHintFound,
       },
       requestDiscoverable: {label: i18nString(UIStrings.requestDiscoverable), value: imgPreloadedOrFoundInHTML},
       eagerlyLoaded: {label: i18nString(UIStrings.lazyLoadNotApplied), value: lcpNotLazyLoaded},

package/front_end/models/trace/insights/ModernHTTP.ts

@@ -40,7 +40,7 @@ export const UIStrings = {
    * @description Text explaining that there were not requests that were slowed down by using HTTP/1.1. "HTTP/1.1" should not be translated.
    */
   noOldProtocolRequests:
-      'No requests used HTTP/1.1, or its current use of HTTP/1.1 does not present a significant optimization opportunity. HTTP/1.1 requests are only flagged if six or more static assets originate from the same origin, and they are not served from a local development environment or a third-party source.'
+      'No requests used HTTP/1.1, or its current use of HTTP/1.1 does not present a significant optimization opportunity. HTTP/1.1 requests are only flagged if six or more static assets originate from the same origin, and they are not served from a local development environment or a third-party source.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/ModernHTTP.ts', UIStrings);

package/front_end/models/trace_source_maps_resolver/SourceMapsResolver.ts

@@ -216,8 +216,8 @@ export class SourceMapsResolver extends EventTarget {
           continue;
         }
         for (const node of nodes) {
-          const resolvedFunctionName =
-              await SourceMapScopes.NamesResolver.resolveProfileFrameFunctionName(node.callFrame, target);
+          const resolvedFunctionName = await SourceMapScopes.NamesResolver.resolveProfileFrameFunctionName(
+              node.callFrame, target, this.#debuggerWorkspaceBinding);
           updatedMappings ||= Boolean(resolvedFunctionName);
           node.setOriginalFunctionName(resolvedFunctionName);
 

package/front_end/models/workspace_diff/WorkspaceDiff.ts

@@ -28,10 +28,9 @@ export class WorkspaceDiffImpl extends Common.ObjectWrapper.ObjectWrapper<EventT
 
   constructor(
       workspace: Workspace.Workspace.WorkspaceImpl,
-      persistence: Persistence.Persistence.PersistenceImpl = Persistence.Persistence.PersistenceImpl.instance(),
-      networkPersistenceManager: Persistence.NetworkPersistenceManager.NetworkPersistenceManager =
-          Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance(),
-      settings: Common.Settings.Settings = Common.Settings.Settings.instance(),
+      persistence: Persistence.Persistence.PersistenceImpl,
+      networkPersistenceManager: Persistence.NetworkPersistenceManager.NetworkPersistenceManager,
+      settings: Common.Settings.Settings,
   ) {
     super();
     this.#persistence = persistence;
@@ -156,8 +155,8 @@ export class WorkspaceDiffImpl extends Common.ObjectWrapper.ObjectWrapper<EventT
 
     const contentsPromise = Promise.all([
       this.requestOriginalContentForUISourceCode(uiSourceCode),
-      uiSourceCode.requestContentData().then(
-          contentDataOrError => TextUtils.ContentData.ContentData.textOr(contentDataOrError, null))
+      uiSourceCode.requestContentData().then(contentDataOrError =>
+                                                 TextUtils.ContentData.ContentData.textOr(contentDataOrError, null)),
     ]);
 
     this.loadingUISourceCodes.set(uiSourceCode, contentsPromise);
@@ -215,7 +214,7 @@ export class UISourceCodeDiff extends Common.ObjectWrapper.ObjectWrapper<UISourc
   constructor(
       uiSourceCode: Workspace.UISourceCode.UISourceCode,
       networkPersistenceManager: Persistence.NetworkPersistenceManager.NetworkPersistenceManager,
-      settings: Common.Settings.Settings = Common.Settings.Settings.instance(),
+      settings: Common.Settings.Settings,
   ) {
     super();
     this.#uiSourceCode = uiSourceCode;
@@ -325,8 +324,14 @@ export interface UISourceCodeDiffEventTypes {
 
 export function workspaceDiff({forceNew}: {forceNew?: boolean} = {}): WorkspaceDiffImpl {
   if (!Root.DevToolsContext.globalInstance().has(WorkspaceDiffImpl) || forceNew) {
-    Root.DevToolsContext.globalInstance().set(WorkspaceDiffImpl,
-                                              new WorkspaceDiffImpl(Workspace.Workspace.WorkspaceImpl.instance()));
+    Root.DevToolsContext.globalInstance().set(
+        WorkspaceDiffImpl,
+        new WorkspaceDiffImpl(
+            Workspace.Workspace.WorkspaceImpl.instance(),
+            Persistence.Persistence.PersistenceImpl.instance(),
+            Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance(),
+            Common.Settings.Settings.instance(),
+            ));
   }
   return Root.DevToolsContext.globalInstance().get(WorkspaceDiffImpl);
 }

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -53,7 +53,6 @@ import {
   WalkthroughView,
 } from './components/WalkthroughView.js';
 import {saveToDisk} from './ExportConversation.js';
-import {isAiAssistancePatchingEnabled} from './PatchWidget.js';
 
 const {html} = Lit;
 const {widget} = UI.Widget;
@@ -422,7 +421,7 @@ interface ToolbarViewInput {
 export const enum ViewState {
   DISABLED_VIEW = 'disabled-view',
   CHAT_VIEW = 'chat-view',
-  EXPLORE_VIEW = 'explore-view'
+  EXPLORE_VIEW = 'explore-view',
 }
 
 type PanelViewInput = {
@@ -788,7 +787,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           isContextSelected: Boolean(this.#conversation.selectedContext),
           conversationType: this.#conversation.type,
           isReadOnly: this.#conversation.isReadOnly ?? false,
-          changeSummary: this.#getChangeSummary(),
           inspectElementToggled: this.#toggleSearchElementAction?.toggled() ?? false,
           canShowFeedbackForm: this.#serverSideLoggingEnabled,
           multimodalInputEnabled: isAiAssistanceMultimodalInputEnabled() &&
@@ -798,7 +796,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           inputPlaceholder: this.#getChatInputPlaceholder(),
           disclaimerText: this.#getDisclaimerText(),
           onExportConversation: this.#onExportConversationClick.bind(this),
-          changeManager: this.#changeManager,
           uploadImageInputEnabled: isAiAssistanceMultimodalUploadInputEnabled() &&
               this.#conversation.type === AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING,
           markdownRenderer,
@@ -855,7 +852,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             activeSidebarMessage: this.#walkthrough.activeSidebarMessage,
             inlineExpandedMessages: this.#walkthrough.inlineExpandedMessages,
           },
-        }
+        },
       };
     }
 
@@ -1313,16 +1310,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         this.#selectedAccessibility = createAccessibilityContext(newReport);
         this.#updateConversationState(this.#conversation);
       };
-
-  #getChangeSummary(): string|undefined {
-    if (!isAiAssistancePatchingEnabled() || !this.#conversation || this.#conversation?.isReadOnly) {
-      return;
-    }
-
-    const hasAiV2 = Boolean(Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled);
-    return this.#changeManager.formatChangesForPatching(this.#conversation.id, /* includeMetadata= */ !hasAiV2);
-  }
-
   override async performUpdate(): Promise<void> {
     const viewInput: ViewInput = {
       ...this.#getToolbarInput(),

package/front_end/panels/ai_assistance/ai_assistance.ts

@@ -8,13 +8,12 @@ export * from './components/AccessibilityAgentMarkdownRenderer.js';
 export * from './components/AIv2MarkdownRenderer.js';
 export * as ChatInput from './components/ChatInput.js';
 export * from './components/MarkdownRendererWithCodeBlock.js';
-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 WalkthroughUtils from './components/WalkthroughUtils.js';
 export * as WalkthroughView from './components/WalkthroughView.js';
 export * as ExportConversation from './ExportConversation.js';
+export * as ImageResize from './components/ImageResize.js';

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

@@ -20,6 +20,7 @@ import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import chatInputStyles from './chatInput.css.js';
+import * as ImageResize from './ImageResize.js';
 
 const {html, Directives: {createRef, ref}} = Lit;
 const {widget} = UI.Widget;
@@ -83,6 +84,10 @@ const UIStringsNotTranslate = {
    * @description Message displayed in toast in case of any failures while uploading an image file as input.
    */
   uploadImageFailureMessage: 'Failed to upload image. Please try again.',
+  /**
+   * @description Message displayed in toast in case of uploaded image being too large.
+   */
+  fileTooLargeMessage: 'File is too large. Please select an image under 10MB.',
   /**
    * @description Label added to the button that add selected context from the current panel in AI Assistance panel.
    */
@@ -121,6 +126,11 @@ const SCREENSHOT_QUALITY = 80;
 const JPEG_MIME_TYPE = 'image/jpeg';
 const SHOW_LOADING_STATE_TIMEOUT = 100;
 
+/**
+ * Maximum allowed size for raw images uploaded by the user to prevent browser tab out-of-memory crashes.
+ */
+export const MAX_IMAGE_FILE_SIZE_BYTES = 10 * 1024 * 1024;  // 10MB
+
 const RELEVANT_DATA_LINK_CHAT_ID = 'relevant-data-link-chat';
 const RELEVANT_DATA_LINK_FOOTER_ID = 'relevant-data-link-footer';
 
@@ -493,7 +503,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
     >
       ${renderRelevantDataDisclaimer(RELEVANT_DATA_LINK_FOOTER_ID)}
     </footer>
-  `, target,);
+  `, target);
   // clang-format on
 };
 
@@ -516,6 +526,7 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
 
   #textAreaRef = createRef<HTMLTextAreaElement>();
   #imageInput?: ImageInputData;
+
   /**
    * Tracks the user's position when navigating through prompt history.
    * -1 means the user is at the newest "uncommitted" position (the current input).
@@ -606,7 +617,7 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
         isLoading: false,
         data: bytes,
         mimeType: JPEG_MIME_TYPE,
-        inputType: AiAssistanceModel.AiAgent.MultimodalInputType.SCREENSHOT
+        inputType: AiAssistanceModel.AiAgent.MultimodalInputType.SCREENSHOT,
       };
       this.performUpdate();
       void this.updateComplete.then(() => {
@@ -668,31 +679,24 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
   };
 
   async #handleLoadImage(file: File): Promise<void> {
+    if (file.size > MAX_IMAGE_FILE_SIZE_BYTES) {
+      Snackbars.Snackbar.Snackbar.show({message: lockedString(UIStringsNotTranslate.fileTooLargeMessage)});
+      return;
+    }
     const showLoadingTimeout = setTimeout(() => {
       this.#imageInput = {isLoading: true};
       this.performUpdate();
     }, SHOW_LOADING_STATE_TIMEOUT);
     try {
-      const reader = new FileReader();
-      const dataUrl = await new Promise<string>((resolve, reject) => {
-        reader.onload = () => {
-          if (typeof reader.result === 'string') {
-            resolve(reader.result);
-          } else {
-            reject(new Error('FileReader result was not a string.'));
-          }
-        };
-        reader.readAsDataURL(file);
-      });
-      const commaIndex = dataUrl.indexOf(',');
-      const bytes = dataUrl.substring(commaIndex + 1);
+      const compressed = await ImageResize.compress(file);
       this.#imageInput = {
         isLoading: false,
-        data: bytes,
-        mimeType: file.type,
-        inputType: AiAssistanceModel.AiAgent.MultimodalInputType.UPLOADED_IMAGE
+        data: compressed.data,
+        mimeType: compressed.mimeType,
+        inputType: AiAssistanceModel.AiAgent.MultimodalInputType.UPLOADED_IMAGE,
       };
-    } catch {
+    } catch (err) {
+      console.error('Failed to compress image:', err);
       this.#imageInput = undefined;
       Snackbars.Snackbar.Snackbar.show({message: lockedString(UIStringsNotTranslate.uploadImageFailureMessage)});
     }

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

@@ -56,7 +56,6 @@ const {widget} = UI.Widget;
 
 const REPORT_URL = 'https://crbug.com/508304827' as Platform.DevToolsPath.UrlString;
 const SCROLL_ROUNDING_OFFSET = 1;
-const MAX_NUM_LINES_IN_CODEBLOCK = 11;
 
 /*
 * Strings that don't need to be translated at this time.
@@ -127,6 +126,10 @@ const UIStringsNotTranslate = {
    * @description The error message when the LLM selects context from a different origin.
    */
   crossOriginError: 'I have selected the new context but you will have to start a new chat.',
+  /**
+   * @description The error message when the request payload is too large.
+   */
+  payloadTooLargeError: 'The request payload is too large. Please try a smaller image or a screenshot.',
   /**
    * @description Displayed when the user stop the response
    */
@@ -541,14 +544,12 @@ export interface MessageInput {
   isLastMessage: boolean;
   isFirstMessage: boolean;
   prompt: string;
-  shouldShowCSSChangeSummary: boolean;
   canShowFeedbackForm: boolean;
   markdownRenderer: MarkdownLitRenderer;
   onSuggestionClick: (suggestion: string) => void;
   onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void;
   onCopyResponseClick: (message: ModelChatMessage) => void;
   onExportClick?: () => void;
-  changeSummary?: string;
   walkthrough: {
     onOpen: (message: ModelChatMessage) => void,
     isExpanded: boolean,
@@ -579,7 +580,7 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
     const userQueryWrapperClasses = Lit.Directives.classMap({
       // Don't need to style at all unless we are on the V2 flag.
       // Once we ship this can be removed entirely.
-      'user-query-wrapper': hasAiV2
+      'user-query-wrapper': hasAiV2,
     });
     // clang-format off
     Lit.render(html`
@@ -643,15 +644,6 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
           },
         )}
         ${renderError(message)}
-        ${input.shouldShowCSSChangeSummary && hasAiV2 && input.changeSummary ? html`
-          <devtools-code-block
-            .code=${input.changeSummary}
-            .codeLang=${'css'}
-            .displayLimit=${MAX_NUM_LINES_IN_CODEBLOCK}
-            .displayNotice=${true}
-            class="ai-css-change"
-          ></devtools-code-block>
-        ` : Lit.nothing}
         ${input.showActions ? renderActions(input, output) : Lit.nothing}
       </div>
       ${hasAiV2 ? renderSideEffectStepsUI(input, steps) : Lit.nothing}
@@ -905,7 +897,7 @@ function renderSideEffectStepsUI(input: ChatMessageViewInput, steps: Step[]): Li
            step,
            isLoading: input.isLoading,
            markdownRenderer: input.markdownRenderer,
-           isLast: true
+           isLast: true,
         })}
       </div> `)}
   `;
@@ -1856,6 +1848,9 @@ function renderError(message: ModelChatMessage): Lit.LitTemplate {
       case AiAssistanceModel.AiAgent.ErrorType.CROSS_ORIGIN:
         errorMessage = UIStringsNotTranslate.crossOriginError;
         break;
+      case AiAssistanceModel.AiAgent.ErrorType.PAYLOAD_TOO_LARGE:
+        errorMessage = UIStringsNotTranslate.payloadTooLargeError;
+        break;
       case AiAssistanceModel.AiAgent.ErrorType.ABORT:
         return html`<p class="aborted" jslog=${VisualLogging.section('aborted')}>${
             lockedString(UIStringsNotTranslate.stoppedResponse)}</p>`;
@@ -2066,14 +2061,12 @@ export class ChatMessage extends UI.Widget.Widget {
   canShowFeedbackForm = false;
   isLastMessage = false;
   isFirstMessage = false;
-  shouldShowCSSChangeSummary = false;
   markdownRenderer!: MarkdownLitRenderer;
   onSuggestionClick: (suggestion: string) => void = () => {};
   onFeedbackSubmit:
       (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void = () => {};
   onCopyResponseClick: (message: ModelChatMessage) => void = () => {};
   onExportClick: () => void = () => {};
-  changeSummary?: string;
   walkthrough: MessageInput['walkthrough'] = {
     onOpen: () => {},
     onToggle: () => {},
@@ -2120,7 +2113,6 @@ export class ChatMessage extends UI.Widget.Widget {
           isLastMessage: this.isLastMessage,
           isFirstMessage: this.isFirstMessage,
           prompt: this.prompt,
-          shouldShowCSSChangeSummary: this.shouldShowCSSChangeSummary,
           onSuggestionClick: this.onSuggestionClick,
           onRatingClick: this.#handleRateClick.bind(this),
           onReportClick: () => UIHelpers.openInNewTab(REPORT_URL),
@@ -2146,7 +2138,6 @@ export class ChatMessage extends UI.Widget.Widget {
           currentRating: this.#currentRating,
           isShowingFeedbackForm: this.#isShowingFeedbackForm,
           onFeedbackSubmit: this.onFeedbackSubmit,
-          changeSummary: this.changeSummary,
           walkthrough: this.walkthrough,
         },
         this.#viewOutput, this.contentElement);

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

@@ -12,8 +12,7 @@ import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
 import * as UI from '../../../ui/legacy/legacy.js';
-import {Directives, html, nothing, render} from '../../../ui/lit/lit.js';
-import {PatchWidget} from '../PatchWidget.js';
+import {Directives, html, render} from '../../../ui/lit/lit.js';
 
 import {ChatInput} from './ChatInput.js';
 import {ChatMessage, ChatMessageEntity, type Message, type ModelChatMessage} from './ChatMessage.js';
@@ -54,26 +53,6 @@ const SCROLL_ROUNDING_OFFSET = 1;
  * last completed model response. Otherwise, it's anchored to the latest model
  * message.
  */
-export function getCSSChangeSummaryMessage(messages: Message[], isLoading: boolean): Message|undefined {
-  const modelMessages = messages.filter(m => m.entity === ChatMessageEntity.MODEL);
-  const lastModelMessage = modelMessages.at(-1);
-
-  if (!lastModelMessage) {
-    return undefined;
-  }
-
-  // If we are loading and the last message in the list is the one being loaded,
-  // we anchor the summary to the previous model message.
-  // If the last message is NOT a model message (e.g. it's the user's follow-up),
-  // we keep the summary on the current last model message until the new response
-  // starts appearing.
-  if (isLoading && messages.at(-1) === lastModelMessage) {
-    return modelMessages.at(-2);
-  }
-
-  return lastModelMessage;
-}
-
 interface ViewOutput {
   mainElement?: HTMLElement;
   input?: UI.Widget.WidgetElement<ChatInput>;
@@ -94,7 +73,6 @@ export interface Props {
   onContextAdd: (() => void)|null;
   conversationMarkdown: string;
   onExportConversation: (() => void)|null;
-  changeManager: AiAssistanceModel.ChangeManager.ChangeManager;
   inspectElementToggled: boolean;
   messages: Message[];
   context: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null;
@@ -104,7 +82,6 @@ export interface Props {
   conversationType: AiAssistanceModel.AiHistoryStorage.ConversationType;
   isReadOnly: boolean;
   blockedByCrossOrigin: boolean;
-  changeSummary?: string;
   multimodalInputEnabled?: boolean;
   isTextInputDisabled: boolean;
   emptyStateSuggestions: AiAssistanceModel.AiAgent.ConversationSuggestion[];
@@ -144,10 +121,6 @@ const DEFAULT_VIEW: View = (input, output, target) => {
     sticky: !input.isReadOnly,
   });
 
-  const shouldShowPatchWidget = !hasAiV2 && !input.isLoading;
-
-  const cssChangeSummaryMessage = getCSSChangeSummaryMessage(input.messages, input.isLoading);
-
   // clang-format off
     render(html`
       <style>${chatViewStyles}</style>
@@ -169,21 +142,15 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                   isLastMessage: index === input.messages.length - 1,
                   isFirstMessage: index === 0,
                   prompt,
-                  shouldShowCSSChangeSummary: message.id === cssChangeSummaryMessage?.id,
                   onSuggestionClick: input.handleSuggestionClick,
                   onFeedbackSubmit: input.onFeedbackSubmit,
                   onCopyResponseClick: input.onCopyResponseClick,
                   onExportClick: input.exportForAgentsClick,
-                  changeSummary: input.changeSummary,
                   walkthrough: {
                     ...input.walkthrough,
-                  }
+                  },
                 });
               })}
-              ${shouldShowPatchWidget ? widget(PatchWidget, {
-                changeSummary: input.changeSummary ?? '',
-                changeManager: input.changeManager,
-              }) : nothing}
             </div>
           ` : html`
             <div class="empty-state-container">

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

@@ -134,7 +134,7 @@ export const DEFAULT_VIEW = (
         </div>
       </div>
     `,
-    target
+    target,
   );
   // clang-format on
 };

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

@@ -136,7 +136,7 @@ export class ExploreWidget extends UI.Widget.Widget {
           );
         },
         panelName: 'Elements',
-        text: 'to ask about CSS styles'
+        text: 'to ask about CSS styles',
       });
     }
     if (config.devToolsAiAssistanceNetworkAgent?.enabled && UI.ViewManager.ViewManager.instance().hasView('network')) {
@@ -150,7 +150,7 @@ export class ExploreWidget extends UI.Widget.Widget {
           );
         },
         panelName: 'Network',
-        text: 'to ask about a request\'s details'
+        text: 'to ask about a request\'s details',
       });
     }
     if (config.devToolsAiAssistanceFileAgent?.enabled && UI.ViewManager.ViewManager.instance().hasView('sources')) {
@@ -164,7 +164,7 @@ export class ExploreWidget extends UI.Widget.Widget {
           );
         },
         panelName: 'Sources',
-        text: 'to ask about a file\'s content'
+        text: 'to ask about a file\'s content',
       });
     }
     if (config.devToolsAiAssistancePerformanceAgent?.enabled &&
@@ -179,7 +179,7 @@ export class ExploreWidget extends UI.Widget.Widget {
           );
         },
         panelName: 'Performance',
-        text: 'to ask about a trace item'
+        text: 'to ask about a trace item',
       });
     }
 

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

@@ -0,0 +1,74 @@
+// 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.
+
+const MAX_DIMENSION_PX = 1024;
+
+let compressImplementation = realCompress;
+
+export function setCompressImplementationForTest(impl: typeof realCompress|null): void {
+  compressImplementation = impl ?? realCompress;
+}
+
+/**
+ * Decodes and scales an image file so that its largest dimension does not exceed 1024 pixels,
+ * preserving the original aspect ratio. The image is then compressed to a JPEG format at 80% quality.
+ *
+ * This reduces the payload size for base64 encoding and prevents out-of-memory errors in the AIDA API.
+ *
+ * @param file The raw Image file to be resized and compressed.
+ * @returns A promise resolving to the base64-encoded string and MIME type.
+ */
+export async function compress(file: File): Promise<{data: string, mimeType: string}> {
+  return await compressImplementation(file);
+}
+
+async function realCompress(file: File): Promise<{data: string, mimeType: string}> {
+  const bitmap = await createImageBitmap(file);
+  try {
+    let width = bitmap.width;
+    let height = bitmap.height;
+
+    if (width > MAX_DIMENSION_PX || height > MAX_DIMENSION_PX) {
+      if (width > height) {
+        height = Math.round((height * MAX_DIMENSION_PX) / width);
+        width = MAX_DIMENSION_PX;
+      } else {
+        width = Math.round((width * MAX_DIMENSION_PX) / height);
+        height = MAX_DIMENSION_PX;
+      }
+    }
+
+    const canvas = new OffscreenCanvas(width, height);
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      throw new Error('Failed to get 2d context');
+    }
+
+    ctx.drawImage(bitmap, 0, 0, width, height);
+
+    const blob = await canvas.convertToBlob({
+      type: 'image/jpeg',
+      quality: 0.8,
+    });
+
+    const base64 = await new Promise<string>((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const result = reader.result as string;
+        const base64Data = result.split(',')[1];
+        resolve(base64Data);
+      };
+      reader.onerror = () => reject(new Error('Failed to read compressed blob'));
+      reader.readAsDataURL(blob);
+    });
+
+    return {
+      data: base64,
+      mimeType: 'image/jpeg',
+    };
+  } finally {
+    // Explicitly close the ImageBitmap to prevent GPU/graphics memory leaks.
+    bitmap.close();
+  }
+}

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

@@ -17,7 +17,7 @@ import {
   type ModelChatMessage,
   renderStep,
   type Step,
-  titleForStep
+  titleForStep,
 } from './ChatMessage.js';
 import {getButtonLabel} from './WalkthroughUtils.js';
 import walkthroughViewStyles from './walkthroughView.css.js';
@@ -224,7 +224,7 @@ export const DEFAULT_VIEW = (
                 step,
                 isLoading: input.isLoading,
                 markdownRenderer: input.markdownRenderer,
-                isLast: index === renderableSteps.length - 1
+                isLast: index === renderableSteps.length - 1,
               })}
             </div>
           </div>