chrome-devtools-frontend 1.0.1592362 → 1.0.1593518

package/front_end/Images/src/tab-move.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#000000"><path d="M216-144q-29.7 0-50.85-21.5Q144-187 144-216v-120h72v120h528v-456H216v144h-72v-216q0-29 21.15-50.5T216-816h528q29.7 0 50.85 21.5Q816-773 816-744v528q0 29-21.15 50.5T744-144H216Zm240-120-51-51 81-81H144v-72h342l-81-81 51-51 168 168-168 168Z"/></svg>

package/front_end/application_tokens.css

@@ -180,8 +180,8 @@
   /**
    * Colors for Coverage visualization.
    */
-  --app-color-coverage-used: var(--ref-palette-neutral80);
-  --app-color-coverage-unused: var(--sys-color-error-bright);
+  --app-color-coverage-used: var(--sys-color-green-bright);
+    --app-color-coverage-unused: var(--ref-palette-neutral80);
   --app-color-toolbar-background: var(--sys-color-surface4);
 
   /**
@@ -372,8 +372,8 @@
     /**
      * Colors for Coverage visualization.
      */
-    --app-color-coverage-used: var(--ref-palette-neutral40);
-    --app-color-coverage-unused: var(--sys-color-error-bright);
+    --app-color-coverage-used: var(--sys-color-green-bright);
+      --app-color-coverage-unused: var(--ref-palette-neutral40);
     --app-color-toolbar-background: var(--sys-color-base);
 
     /**

package/front_end/core/protocol_client/InspectorBackend.ts

@@ -559,10 +559,6 @@ export class TargetBase {
     this.registerDispatcher('DOMStorage', dispatcher);
   }
 
-  registerEmulationDispatcher(dispatcher: ProtocolProxyApi.EmulationDispatcher): void {
-    this.registerDispatcher('Emulation', dispatcher);
-  }
-
   registerFetchDispatcher(dispatcher: ProtocolProxyApi.FetchDispatcher): void {
     this.registerDispatcher('Fetch', dispatcher);
   }

package/front_end/core/sdk/EmulationModel.ts

@@ -18,7 +18,7 @@ export const enum DataSaverOverride {
   DISABLED = 'disabled',
 }
 
-export class EmulationModel extends SDKModel<EmulationModelEventTypes> implements ProtocolProxyApi.EmulationDispatcher {
+export class EmulationModel extends SDKModel<void> {
   readonly #emulationAgent: ProtocolProxyApi.EmulationApi;
   readonly #deviceOrientationAgent: ProtocolProxyApi.DeviceOrientationApi;
   #cssModel: CSSModel|null;
@@ -33,15 +33,11 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
     enabled: boolean,
     configuration: Protocol.Emulation.SetEmitTouchEventsForMouseRequestConfiguration,
   };
-  #screenOrientationLocked: boolean;
-  #lockedOrientation: Protocol.Emulation.ScreenOrientation|null;
 
   constructor(target: Target) {
     super(target);
     this.#emulationAgent = target.emulationAgent();
     this.#deviceOrientationAgent = target.deviceOrientationAgent();
-    this.#screenOrientationLocked = false;
-    this.#lockedOrientation = null;
     this.#cssModel = target.model(CSSModel);
     this.#overlayModel = target.model(OverlayModel);
     if (this.#overlayModel) {
@@ -229,7 +225,6 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
       enabled: false,
       configuration: Protocol.Emulation.SetEmitTouchEventsForMouseRequestConfiguration.Mobile,
     };
-    target.registerEmulationDispatcher(this);
   }
 
   setTouchEmulationAllowed(touchEmulationAllowed: boolean): void {
@@ -483,41 +478,6 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
     ];
     return await this.emulateCSSMedia(type, features);
   }
-
-  // ProtocolProxyApi.EmulationDispatcher implementation
-
-  virtualTimeBudgetExpired(): void {
-    // No-op for now; not used by the frontend.
-  }
-
-  screenOrientationLockChanged(event: Protocol.Emulation.ScreenOrientationLockChangedEvent): void {
-    this.#screenOrientationLocked = event.locked;
-    this.#lockedOrientation = event.orientation ?? null;
-    this.dispatchEventToListeners(
-        EmulationModelEvents.SCREEN_ORIENTATION_LOCK_CHANGED,
-        {locked: event.locked, orientation: event.orientation ?? null});
-  }
-
-  isScreenOrientationLocked(): boolean {
-    return this.#screenOrientationLocked;
-  }
-
-  lockedOrientation(): Protocol.Emulation.ScreenOrientation|null {
-    return this.#lockedOrientation;
-  }
-}
-
-export const enum EmulationModelEvents {
-  SCREEN_ORIENTATION_LOCK_CHANGED = 'ScreenOrientationLockChanged',
-}
-
-export interface ScreenOrientationLockChangedEvent {
-  locked: boolean;
-  orientation: Protocol.Emulation.ScreenOrientation|null;
-}
-
-export interface EmulationModelEventTypes {
-  [EmulationModelEvents.SCREEN_ORIENTATION_LOCK_CHANGED]: ScreenOrientationLockChangedEvent;
 }
 
 export class Location {

package/front_end/generated/InspectorBackendCommands.ts

@@ -519,7 +519,7 @@ inspectorBackend.registerCommand("Emulation.setCPUThrottlingRate", [{"name": "ra
 inspectorBackend.registerCommand("Emulation.setDefaultBackgroundColorOverride", [{"name": "color", "type": "object", "optional": true, "description": "RGBA of the default background color. If not specified, any existing override will be cleared.", "typeRef": "DOM.RGBA"}], [], "Sets or clears an override of the default background color of the frame. This override is used if the content does not specify one.");
 inspectorBackend.registerCommand("Emulation.setSafeAreaInsetsOverride", [{"name": "insets", "type": "object", "optional": false, "description": "", "typeRef": "Emulation.SafeAreaInsets"}], [], "Overrides the values for env(safe-area-inset-*) and env(safe-area-max-inset-*). Unset values will cause the respective variables to be undefined, even if previously overridden.");
 inspectorBackend.registerEnum("Emulation.SetDeviceMetricsOverrideRequestScrollbarType", {Overlay: "overlay", Default: "default"});
-inspectorBackend.registerCommand("Emulation.setDeviceMetricsOverride", [{"name": "width", "type": "number", "optional": false, "description": "Overriding width value in pixels (minimum 0, maximum 10000000). 0 disables the override.", "typeRef": null}, {"name": "height", "type": "number", "optional": false, "description": "Overriding height value in pixels (minimum 0, maximum 10000000). 0 disables the override.", "typeRef": null}, {"name": "deviceScaleFactor", "type": "number", "optional": false, "description": "Overriding device scale factor value. 0 disables the override.", "typeRef": null}, {"name": "mobile", "type": "boolean", "optional": false, "description": "Whether to emulate mobile device. This includes viewport meta tag, overlay scrollbars, text autosizing and more.", "typeRef": null}, {"name": "scale", "type": "number", "optional": true, "description": "Scale to apply to resulting view image.", "typeRef": null}, {"name": "screenWidth", "type": "number", "optional": true, "description": "Overriding screen width value in pixels (minimum 0, maximum 10000000).", "typeRef": null}, {"name": "screenHeight", "type": "number", "optional": true, "description": "Overriding screen height value in pixels (minimum 0, maximum 10000000).", "typeRef": null}, {"name": "positionX", "type": "number", "optional": true, "description": "Overriding view X position on screen in pixels (minimum 0, maximum 10000000).", "typeRef": null}, {"name": "positionY", "type": "number", "optional": true, "description": "Overriding view Y position on screen in pixels (minimum 0, maximum 10000000).", "typeRef": null}, {"name": "dontSetVisibleSize", "type": "boolean", "optional": true, "description": "Do not set visible view size, rely upon explicit setVisibleSize call.", "typeRef": null}, {"name": "screenOrientation", "type": "object", "optional": true, "description": "Screen orientation override.", "typeRef": "Emulation.ScreenOrientation"}, {"name": "viewport", "type": "object", "optional": true, "description": "If set, the visible area of the page will be overridden to this viewport. This viewport change is not observed by the page, e.g. viewport-relative elements do not change positions.", "typeRef": "Page.Viewport"}, {"name": "displayFeature", "type": "object", "optional": true, "description": "If set, the display feature of a multi-segment screen. If not set, multi-segment support is turned-off. Deprecated, use Emulation.setDisplayFeaturesOverride.", "typeRef": "Emulation.DisplayFeature"}, {"name": "devicePosture", "type": "object", "optional": true, "description": "If set, the posture of a foldable device. If not set the posture is set to continuous. Deprecated, use Emulation.setDevicePostureOverride.", "typeRef": "Emulation.DevicePosture"}, {"name": "scrollbarType", "type": "string", "optional": true, "description": "Scrollbar type. Default: `default`.", "typeRef": "Emulation.SetDeviceMetricsOverrideRequestScrollbarType"}], [], "Overrides the values of device screen dimensions (window.screen.width, window.screen.height, window.innerWidth, window.innerHeight, and \"device-width\"/\"device-height\"-related CSS media query results).");
+inspectorBackend.registerCommand("Emulation.setDeviceMetricsOverride", [{"name": "width", "type": "number", "optional": false, "description": "Overriding width value in pixels (minimum 0, maximum 10000000). 0 disables the override.", "typeRef": null}, {"name": "height", "type": "number", "optional": false, "description": "Overriding height value in pixels (minimum 0, maximum 10000000). 0 disables the override.", "typeRef": null}, {"name": "deviceScaleFactor", "type": "number", "optional": false, "description": "Overriding device scale factor value. 0 disables the override.", "typeRef": null}, {"name": "mobile", "type": "boolean", "optional": false, "description": "Whether to emulate mobile device. This includes viewport meta tag, overlay scrollbars, text autosizing and more.", "typeRef": null}, {"name": "scale", "type": "number", "optional": true, "description": "Scale to apply to resulting view image.", "typeRef": null}, {"name": "screenWidth", "type": "number", "optional": true, "description": "Overriding screen width value in pixels (minimum 0, maximum 10000000).", "typeRef": null}, {"name": "screenHeight", "type": "number", "optional": true, "description": "Overriding screen height value in pixels (minimum 0, maximum 10000000).", "typeRef": null}, {"name": "positionX", "type": "number", "optional": true, "description": "Overriding view X position on screen in pixels (minimum 0, maximum 10000000).", "typeRef": null}, {"name": "positionY", "type": "number", "optional": true, "description": "Overriding view Y position on screen in pixels (minimum 0, maximum 10000000).", "typeRef": null}, {"name": "dontSetVisibleSize", "type": "boolean", "optional": true, "description": "Do not set visible view size, rely upon explicit setVisibleSize call.", "typeRef": null}, {"name": "screenOrientation", "type": "object", "optional": true, "description": "Screen orientation override.", "typeRef": "Emulation.ScreenOrientation"}, {"name": "viewport", "type": "object", "optional": true, "description": "If set, the visible area of the page will be overridden to this viewport. This viewport change is not observed by the page, e.g. viewport-relative elements do not change positions.", "typeRef": "Page.Viewport"}, {"name": "displayFeature", "type": "object", "optional": true, "description": "If set, the display feature of a multi-segment screen. If not set, multi-segment support is turned-off. Deprecated, use Emulation.setDisplayFeaturesOverride.", "typeRef": "Emulation.DisplayFeature"}, {"name": "devicePosture", "type": "object", "optional": true, "description": "If set, the posture of a foldable device. If not set the posture is set to continuous. Deprecated, use Emulation.setDevicePostureOverride.", "typeRef": "Emulation.DevicePosture"}, {"name": "scrollbarType", "type": "string", "optional": true, "description": "Scrollbar type. Default: `default`.", "typeRef": "Emulation.SetDeviceMetricsOverrideRequestScrollbarType"}, {"name": "screenOrientationLockEmulation", "type": "boolean", "optional": true, "description": "If set to true, enables screen orientation lock emulation, which intercepts screen.orientation.lock() calls from the page and reports orientation changes via screenOrientationLockChanged events. This is useful for emulating mobile device orientation lock behavior in responsive design mode.", "typeRef": null}], [], "Overrides the values of device screen dimensions (window.screen.width, window.screen.height, window.innerWidth, window.innerHeight, and \"device-width\"/\"device-height\"-related CSS media query results).");
 inspectorBackend.registerCommand("Emulation.setDevicePostureOverride", [{"name": "posture", "type": "object", "optional": false, "description": "", "typeRef": "Emulation.DevicePosture"}], [], "Start reporting the given posture value to the Device Posture API. This override can also be set in setDeviceMetricsOverride().");
 inspectorBackend.registerCommand("Emulation.clearDevicePostureOverride", [], [], "Clears a device posture override set with either setDeviceMetricsOverride() or setDevicePostureOverride() and starts using posture information from the platform again. Does nothing if no override is set.");
 inspectorBackend.registerCommand("Emulation.setDisplayFeaturesOverride", [{"name": "features", "type": "array", "optional": false, "description": "", "typeRef": "Emulation.DisplayFeature"}], [], "Start using the given display features to pupulate the Viewport Segments API. This override can also be set in setDeviceMetricsOverride().");
@@ -557,6 +557,7 @@ inspectorBackend.registerCommand("Emulation.setAutomationOverride", [{"name": "e
 inspectorBackend.registerCommand("Emulation.setSmallViewportHeightDifferenceOverride", [{"name": "difference", "type": "number", "optional": false, "description": "This will cause an element of size 100svh to be `difference` pixels smaller than an element of size 100lvh.", "typeRef": null}], [], "Allows overriding the difference between the small and large viewport sizes, which determine the value of the `svh` and `lvh` unit, respectively. Only supported for top-level frames.");
 inspectorBackend.registerCommand("Emulation.getScreenInfos", [], ["screenInfos"], "Returns device's screen configuration. In headful mode, the physical screens configuration is returned, whereas in headless mode, a virtual headless screen configuration is provided instead.");
 inspectorBackend.registerCommand("Emulation.addScreen", [{"name": "left", "type": "number", "optional": false, "description": "Offset of the left edge of the screen in pixels.", "typeRef": null}, {"name": "top", "type": "number", "optional": false, "description": "Offset of the top edge of the screen in pixels.", "typeRef": null}, {"name": "width", "type": "number", "optional": false, "description": "The width of the screen in pixels.", "typeRef": null}, {"name": "height", "type": "number", "optional": false, "description": "The height of the screen in pixels.", "typeRef": null}, {"name": "workAreaInsets", "type": "object", "optional": true, "description": "Specifies the screen's work area. Default is entire screen.", "typeRef": "Emulation.WorkAreaInsets"}, {"name": "devicePixelRatio", "type": "number", "optional": true, "description": "Specifies the screen's device pixel ratio. Default is 1.", "typeRef": null}, {"name": "rotation", "type": "number", "optional": true, "description": "Specifies the screen's rotation angle. Available values are 0, 90, 180 and 270. Default is 0.", "typeRef": null}, {"name": "colorDepth", "type": "number", "optional": true, "description": "Specifies the screen's color depth in bits. Default is 24.", "typeRef": null}, {"name": "label", "type": "string", "optional": true, "description": "Specifies the descriptive label for the screen. Default is none.", "typeRef": null}, {"name": "isInternal", "type": "boolean", "optional": true, "description": "Indicates whether the screen is internal to the device or external, attached to the device. Default is false.", "typeRef": null}], ["screenInfo"], "Add a new screen to the device. Only supported in headless mode.");
+inspectorBackend.registerCommand("Emulation.updateScreen", [{"name": "screenId", "type": "string", "optional": false, "description": "Target screen identifier.", "typeRef": "Emulation.ScreenId"}, {"name": "left", "type": "number", "optional": true, "description": "Offset of the left edge of the screen in pixels.", "typeRef": null}, {"name": "top", "type": "number", "optional": true, "description": "Offset of the top edge of the screen in pixels.", "typeRef": null}, {"name": "width", "type": "number", "optional": true, "description": "The width of the screen in pixels.", "typeRef": null}, {"name": "height", "type": "number", "optional": true, "description": "The height of the screen in pixels.", "typeRef": null}, {"name": "workAreaInsets", "type": "object", "optional": true, "description": "Specifies the screen's work area.", "typeRef": "Emulation.WorkAreaInsets"}, {"name": "devicePixelRatio", "type": "number", "optional": true, "description": "Specifies the screen's device pixel ratio.", "typeRef": null}, {"name": "rotation", "type": "number", "optional": true, "description": "Specifies the screen's rotation angle. Available values are 0, 90, 180 and 270.", "typeRef": null}, {"name": "colorDepth", "type": "number", "optional": true, "description": "Specifies the screen's color depth in bits.", "typeRef": null}, {"name": "label", "type": "string", "optional": true, "description": "Specifies the descriptive label for the screen.", "typeRef": null}, {"name": "isInternal", "type": "boolean", "optional": true, "description": "Indicates whether the screen is internal to the device or external, attached to the device. Default is false.", "typeRef": null}], ["screenInfo"], "Updates specified screen parameters. Only supported in headless mode.");
 inspectorBackend.registerCommand("Emulation.removeScreen", [{"name": "screenId", "type": "string", "optional": false, "description": "", "typeRef": "Emulation.ScreenId"}], [], "Remove screen from the device. Only supported in headless mode.");
 inspectorBackend.registerCommand("Emulation.setPrimaryScreen", [{"name": "screenId", "type": "string", "optional": false, "description": "", "typeRef": "Emulation.ScreenId"}], [], "Set primary screen. Only supported in headless mode. Note that this changes the coordinate system origin to the top-left of the new primary screen, updating the bounds and work areas of all existing screens accordingly.");
 inspectorBackend.registerType("Emulation.SafeAreaInsets", [{"name": "top", "type": "number", "optional": true, "description": "Overrides safe-area-inset-top.", "typeRef": null}, {"name": "topMax", "type": "number", "optional": true, "description": "Overrides safe-area-max-inset-top.", "typeRef": null}, {"name": "left", "type": "number", "optional": true, "description": "Overrides safe-area-inset-left.", "typeRef": null}, {"name": "leftMax", "type": "number", "optional": true, "description": "Overrides safe-area-max-inset-left.", "typeRef": null}, {"name": "bottom", "type": "number", "optional": true, "description": "Overrides safe-area-inset-bottom.", "typeRef": null}, {"name": "bottomMax", "type": "number", "optional": true, "description": "Overrides safe-area-max-inset-bottom.", "typeRef": null}, {"name": "right", "type": "number", "optional": true, "description": "Overrides safe-area-inset-right.", "typeRef": null}, {"name": "rightMax", "type": "number", "optional": true, "description": "Overrides safe-area-max-inset-right.", "typeRef": null}]);

package/front_end/generated/SupportedCSSProperties.js

@@ -4891,7 +4891,7 @@ export const generatedProperties = [
   "inherited": false,
   "keywords": [
    "none",
-   "auto"
+   "all"
   ],
   "name": "view-transition-scope"
  },
@@ -7267,7 +7267,7 @@ export const generatedPropertyValues = {
  "view-transition-scope": {
   "values": [
    "none",
-   "auto"
+   "all"
   ]
  },
  "visibility": {

package/front_end/generated/protocol-mapping.d.ts

@@ -2781,6 +2781,13 @@ export namespace ProtocolMapping {
       paramsType: [Protocol.Emulation.AddScreenRequest];
       returnType: Protocol.Emulation.AddScreenResponse;
     };
+    /**
+     * Updates specified screen parameters. Only supported in headless mode.
+     */
+    'Emulation.updateScreen': {
+      paramsType: [Protocol.Emulation.UpdateScreenRequest];
+      returnType: Protocol.Emulation.UpdateScreenResponse;
+    };
     /**
      * Remove screen from the device. Only supported in headless mode.
      */

package/front_end/generated/protocol-proxy-api.d.ts

@@ -1847,6 +1847,11 @@ declare namespace ProtocolProxyApi {
      */
     invoke_addScreen(params: Protocol.Emulation.AddScreenRequest): Promise<Protocol.Emulation.AddScreenResponse>;
 
+    /**
+     * Updates specified screen parameters. Only supported in headless mode.
+     */
+    invoke_updateScreen(params: Protocol.Emulation.UpdateScreenRequest): Promise<Protocol.Emulation.UpdateScreenResponse>;
+
     /**
      * Remove screen from the device. Only supported in headless mode.
      */

package/front_end/generated/protocol.ts

@@ -7205,6 +7205,14 @@ export namespace Emulation {
      * Scrollbar type. Default: `default`.
      */
     scrollbarType?: SetDeviceMetricsOverrideRequestScrollbarType;
+    /**
+     * If set to true, enables screen orientation lock emulation, which
+     * intercepts screen.orientation.lock() calls from the page and reports
+     * orientation changes via screenOrientationLockChanged events. This is
+     * useful for emulating mobile device orientation lock behavior in
+     * responsive design mode.
+     */
+    screenOrientationLockEmulation?: boolean;
   }
 
   export interface SetDevicePostureOverrideRequest {
@@ -7547,6 +7555,57 @@ export namespace Emulation {
     screenInfo: ScreenInfo;
   }
 
+  export interface UpdateScreenRequest {
+    /**
+     * Target screen identifier.
+     */
+    screenId: ScreenId;
+    /**
+     * Offset of the left edge of the screen in pixels.
+     */
+    left?: integer;
+    /**
+     * Offset of the top edge of the screen in pixels.
+     */
+    top?: integer;
+    /**
+     * The width of the screen in pixels.
+     */
+    width?: integer;
+    /**
+     * The height of the screen in pixels.
+     */
+    height?: integer;
+    /**
+     * Specifies the screen's work area.
+     */
+    workAreaInsets?: WorkAreaInsets;
+    /**
+     * Specifies the screen's device pixel ratio.
+     */
+    devicePixelRatio?: number;
+    /**
+     * Specifies the screen's rotation angle. Available values are 0, 90, 180 and 270.
+     */
+    rotation?: integer;
+    /**
+     * Specifies the screen's color depth in bits.
+     */
+    colorDepth?: integer;
+    /**
+     * Specifies the descriptive label for the screen.
+     */
+    label?: string;
+    /**
+     * Indicates whether the screen is internal to the device or external, attached to the device. Default is false.
+     */
+    isInternal?: boolean;
+  }
+
+  export interface UpdateScreenResponse extends ProtocolResponseWithError {
+    screenInfo: ScreenInfo;
+  }
+
   export interface RemoveScreenRequest {
     screenId: ScreenId;
   }

package/front_end/models/ai_assistance/agents/AiAgent.ts

@@ -5,6 +5,7 @@
 import * as Host from '../../../core/host/host.js';
 import * as Root from '../../../core/root/root.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../generated/protocol.js';
 import * as Greendev from '../../greendev/greendev.js';
 import {debugLog, isStructuredLogEnabled} from '../debug.js';
 
@@ -84,6 +85,7 @@ export interface ThoughtResponse {
 
 export interface SideEffectResponse {
   type: ResponseType.SIDE_EFFECT;
+  description: string|null;
   code?: string;
   confirm: (confirm: boolean) => void;
 }
@@ -105,6 +107,7 @@ export interface ActionResponse {
   code?: string;
   output?: string;
   canceled: boolean;
+  widgets?: AiWidget[];
 }
 
 export interface QueryingResponse {
@@ -215,10 +218,29 @@ export abstract class ConversationContext<T> {
   }
 }
 
+export interface ComputedStyleAiWidget {
+  name: 'COMPUTED_STYLES';
+  data: {
+    computedStyles: Map<string, string>,
+    backendNodeId: Protocol.DOM.BackendNodeId,
+    matchedCascade: SDK.CSSMatchedStyles.CSSMatchedStyles,
+    // The subset of CSS properties that the AI looked up.
+    properties: string[],
+  };
+}
+// This type will grow as we add more widgets.
+export type AiWidget = ComputedStyleAiWidget;
+
 export type FunctionCallHandlerResult<Result> = {
   requiresApproval: true,
+  /**
+   * Provides extra description of what the required
+   * approval is requesting.
+   */
+  description: string|null,
 }|{
   result: Result,
+  widgets?: AiWidget[],
 }|{
   context: ConversationContext<unknown>,
   description: string,
@@ -259,7 +281,6 @@ export interface FunctionDeclaration<Args extends Record<string, unknown>, Retur
   /**
    * Function implementation that the LLM will try to execute,
    */
-
   handler(args: Args, options?: FunctionHandlerOptions): Promise<FunctionCallHandlerResult<ReturnType>>;
 }
 
@@ -738,6 +759,7 @@ export abstract class AiAgent<T> {
       yield {
         type: ResponseType.SIDE_EFFECT,
         confirm: sideEffectConfirmationPromiseWithResolvers.resolve,
+        description: result.description,
       };
 
       const approvedRun = await sideEffectConfirmationPromiseWithResolvers.promise;
@@ -764,6 +786,7 @@ export abstract class AiAgent<T> {
         type: ResponseType.ACTION,
         code,
         output: typeof result.result === 'string' ? result.result : JSON.stringify(result.result),
+        widgets: result.widgets,
         canceled: false,
       };
     }

package/front_end/models/ai_assistance/agents/BreakpointDebuggerAgent.ts

@@ -4,6 +4,7 @@
 
 import type * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Bindings from '../../bindings/bindings.js';
@@ -31,6 +32,8 @@ import {
   removeOverlay,
 } from './BreakpointDebuggerAgentOverlay.js';
 
+const lockedString = i18n.i18n.lockedString;
+
 // This is a temporary agent for a GreenDev prototype.
 // The preamble is not on the server and you should not build on top of this.
 const preamble = `You are an expert Root Cause Analysis (RCA) specialist.
@@ -52,17 +55,18 @@ You have two modes of operation that you can switch between and control:
 6. **Step**: Use 'stepInto' to investigate function calls on the current line. Use 'stepOut' to return to the caller. Use 'stepOver' to move to the next line.
 7. **Trace Back**: If the current function isn't the root cause, use 'getCallStack' to find the caller, and repeat the analysis there.
 8. **Root Cause**: Explain exactly how the runtime state contradicts the expected logic and point to the specific line of code that is the root cause.
-9. **Test Fix**: Use the 'testFixInConsole' tool to run a JavaScript snippet in the current execution context to test your fix before making permanent changes. This will overwrite the problematic function or state. Follow the instructions to get the user's approval.
-10. **Verify**: IMMEDIATELY AFTER 'testFixInConsole' succeeds, you MUST call 'waitForUserActionToTriggerBreakpoint' (to pause and inspect) or 'resume' (if no inspection is needed), AND ask the user to trigger the buggy action again to verify the fix.
-11. **Patch**: Once the fix is successfully verified by the user, you MUST use the 'suggestFix' tool to apply the patch to the source code file. Provide the URL, the exact original code to change, and the new code. Finish the execution then.
+9. **Apply Fix**: Use the 'testFixInConsole' tool to overwrite the problematic code in the current session.
+10. **Verify**: The fix is applied but NOT verified. You MUST run the code again to verify the fix worked.
+11. **Finish**: If the fix worked, you may output the solution and finish the execution.
 
 **Rules**:
-- **NEVER FINISH** execution until you have found the root cause or answer.
+- **NEVER FINISH** execution until you have found the root cause and verified the fix.
 - **ACTION OVER TALK**: If you need the user to trigger a breakpoint, do NOT just ask them in text. You **MUST** call 'waitForUserActionToTriggerBreakpoint'. This tool will block and wait for the user to act.
 - **STATIC MODE**: If you are in STATIC MODE and need to see variables: 1. 'setBreakpoint', 2. 'waitForUserActionToTriggerBreakpoint'. **DO NOT STOP** to ask the user. Investigate code and set breakpoints to find the root cause.
 - **ALREADY PAUSED?**: If 'setBreakpoint' warns you that you are already paused, **DO NOT** call 'waitForUserActionToTriggerBreakpoint'. Start inspecting immediately. You can set more breakpoints while paused, but to call 'waitForUserActionToTriggerBreakpoint' again you MUST be in static state.
 - **USE TOOLS EXCESSIVELY**: checking one thing is often not enough. Check everything you can thinks of.
 - **CHECK LOCATION**: If you are not sure where you are, call 'getExecutionLocation' after 'waitForUserActionToTriggerBreakpoint' or any step command to confirm where you are.
+- **INITIAL CONTEXT**: The breakpoint provided in the context is ALREADY SET. Do NOT set it again. Start by setting additional breakpoints if needed, or, if no additional breakpoints within the code you see make sense, call 'waitForUserActionToTriggerBreakpoint'.
 
 **Execution Control when you are currently on a breakpoint**:
 - **stepInto**: ESSENTIAL for entering function calls on the current line. Use this heavily when you suspect the issue is inside a called function.
@@ -121,8 +125,10 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
         required: ['url', 'lineNumber'],
       },
       displayInfoFromArgs: (args: {url: string, lineNumber: number}) => {
+        const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(
+            args.url as Platform.DevToolsPath.UrlString);
         return {
-          title: `Reading function source for ${args.url}:${args.lineNumber}`,
+          title: `Reading function source for ${uiSourceCode?.displayName()}:${args.lineNumber}`,
         };
       },
       handler: async (args: {url: string, lineNumber: number}) => {
@@ -155,8 +161,10 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
         required: ['url', 'lineNumber', 'direction'],
       },
       displayInfoFromArgs: (args: {url: string, lineNumber: number, direction: 'before'|'after'}) => {
+        const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(
+            args.url as Platform.DevToolsPath.UrlString);
         return {
-          title: `Reading code ${args.direction} ${args.url}:${args.lineNumber}`,
+          title: `Reading code ${args.direction} ${uiSourceCode?.displayName()}:${args.lineNumber}`,
         };
       },
       handler: async (args: {url: string, lineNumber: number, direction: 'before'|'after'}) => {
@@ -240,8 +248,10 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
         required: ['url', 'lineNumber'],
       },
       displayInfoFromArgs: (args: {url: string, lineNumber: number}) => {
+        const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(
+            args.url as Platform.DevToolsPath.UrlString);
         return {
-          title: `Setting breakpoint at ${args.url}:${args.lineNumber}`,
+          title: `Setting breakpoint at ${uiSourceCode?.displayName() ?? args.url}:${args.lineNumber}`,
         };
       },
       handler: async (args: {url: string, lineNumber: number}) => {
@@ -269,8 +279,10 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
         required: ['url', 'lineNumber'],
       },
       displayInfoFromArgs: (args: {url: string, lineNumber: number}) => {
+        const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(
+            args.url as Platform.DevToolsPath.UrlString);
         return {
-          title: `Removing breakpoint at ${args.url}:${args.lineNumber}`,
+          title: `Removing breakpoint at ${uiSourceCode?.displayName() ?? args.url}:${args.lineNumber}`,
         };
       },
       handler: async (args: {url: string, lineNumber: number}) => {
@@ -429,7 +441,7 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
 
     this.declareFunction('testFixInConsole', {
       description:
-          'Tests a JavaScript code snippet in the current execution context to overwrite the problematic code or state. Use this to verify the fix works before patching the source file.',
+          'Tests a JavaScript code snippet in the current execution context to overwrite the problematic code or state. After running this, verify the fix worked.',
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: 'Provide the code to evaluate to test the fix',
@@ -458,7 +470,10 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
           return {error: 'Fix rejected by the user.'};
         }
         if (!options?.approved) {
-          return {requiresApproval: true};
+          return {
+            requiresApproval: true,
+            description: lockedString('This code may modify page content. Continue?'),
+          };
         }
 
         const targetManager = SDK.TargetManager.TargetManager.instance();
@@ -498,86 +513,11 @@ export class BreakpointDebuggerAgent extends AiAgent<Workspace.UISourceCode.UILo
         return {
           result: {
             status:
-                'Code evaluated successfully. You MUST now call waitForUserActionToTriggerBreakpoint or resume, and ask the user to trigger the action again to verify the fix.'
+                'Code evaluated successfully. Fix applied. PROCEED TO VERIFICATION: Call "resume" and ask the user to "run the code again" to verify.'
           }
         };
       },
     });
-
-    this.declareFunction('suggestFix', {
-      description:
-          'Suggests a JavaScript code snippet to fix the root cause of the issue and applies it to the source code file if the user approves. Call this function AFTER you have verified the fix works using testFixInConsole.',
-      parameters: {
-        type: Host.AidaClient.ParametersTypes.OBJECT,
-        description: 'Provide the fix to the user',
-        properties: {
-          url: {
-            type: Host.AidaClient.ParametersTypes.STRING,
-            description: 'The URL of the file to fix.',
-          },
-          originalCode: {
-            type: Host.AidaClient.ParametersTypes.STRING,
-            description:
-                'The exact original code to replace. Must match the file content exactly, including whitespace.',
-          },
-          suggestion: {
-            type: Host.AidaClient.ParametersTypes.STRING,
-            description: 'The new JavaScript code to replace the original code with.',
-          },
-          explanation: {
-            type: Host.AidaClient.ParametersTypes.STRING,
-            description: 'Explanation for why this code fixes the issue.',
-          },
-        },
-        required: ['url', 'originalCode', 'suggestion', 'explanation'],
-      },
-      displayInfoFromArgs: (args: {suggestion: string, explanation: string}) => {
-        return {
-          title: 'Suggesting a fix',
-          thought: args.explanation,
-          action: args.suggestion,
-        };
-      },
-      handler: async (
-          args: {url: string, originalCode: string, suggestion: string, explanation: string},
-          options?: FunctionHandlerOptions) => {
-        debugLog('suggestFix requested', args);
-        if (options?.approved === false) {
-          return {error: 'Fix rejected by the user.'};
-        }
-        if (!options?.approved) {
-          return {requiresApproval: true};
-        }
-
-        const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(
-            args.url as Platform.DevToolsPath.UrlString);
-        if (!uiSourceCode) {
-          return {error: `File not found: ${args.url}`};
-        }
-
-        const contentData = await uiSourceCode.requestContentData();
-        if ('error' in contentData || !contentData.isTextContent) {
-          return {error: `Could not read content for file: ${args.url}`};
-        }
-
-        let currentContent = uiSourceCode.workingCopy();
-        if (!uiSourceCode.isDirty()) {
-          currentContent = contentData.text;
-        }
-
-        if (!currentContent.includes(args.originalCode)) {
-          return {
-            error: 'originalCode not found in the file. Ensure the originalCode is an exact match including whitespace.'
-          };
-        }
-
-        const newContent = currentContent.replace(args.originalCode, args.suggestion);
-        uiSourceCode.setWorkingCopy(newContent);
-        uiSourceCode.commitWorkingCopy();
-
-        return {result: {status: 'Fix applied to the source file successfully.'}};
-      },
-    });
   }
 
   async #getFunctionSource(args: {url: string, lineNumber: number}):

package/front_end/models/ai_assistance/agents/ContextSelectionAgent.ts

@@ -123,6 +123,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
             url: request.url(),
             statusCode: request.statusCode,
             duration: i18n.TimeUtilities.secondsToString(request.duration),
+            transferSize: i18n.ByteUtilities.formatBytesToKb(request.transferSize),
           });
         }
 
@@ -290,14 +291,23 @@ export class ContextSelectionAgent extends AiAgent<never> {
       },
       displayInfoFromArgs: () => {
         return {
-          title: lockedString('Please select an element on the page…'),
-          action: 'selectElement()',
+          title: lockedString('Select an element on the page or in the Elements panel'),
         };
       },
-      handler: async () => {
+      handler: async (_params, options) => {
         if (!this.#onInspectElement) {
-          return {error: 'The inspect element action is not available.'};
+          return {
+            error: 'The inspect element action is not available.',
+          };
+        }
+
+        if (!options?.approved) {
+          return {
+            requiresApproval: true,
+            description: null,
+          };
         }
+
         const node = await this.#onInspectElement();
         if (node) {
           return {

package/front_end/models/ai_assistance/agents/StylingAgent.ts

@@ -18,6 +18,7 @@ import {FREESTYLER_WORLD_NAME} from '../injected.js';
 import {
   type AgentOptions as BaseAgentOptions,
   AiAgent,
+  type ComputedStyleAiWidget,
   type ContextResponse,
   ConversationContext,
   type ConversationSuggestions,
@@ -325,7 +326,7 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
         };
       },
       handler: async params => {
-        return await this.getStyles(params.elements, params.styleProperties);
+        return await this.#getStyles(params.elements, params.styleProperties);
       },
     });
 
@@ -606,7 +607,9 @@ const data = {
     return this.context?.getItem() ?? null;
   }
 
-  async getStyles(elements: number[], properties: string[]): Promise<FunctionCallHandlerResult<unknown>> {
+  async #getStyles(elements: number[], properties: string[]): Promise<FunctionCallHandlerResult<unknown>> {
+    const widgets: ComputedStyleAiWidget[] = [];
+
     const result:
         Record<string, {computed: Record<string, string|undefined>, authored: Record<string, string|undefined>}> = {};
     for (const uid of elements) {
@@ -630,6 +633,15 @@ const data = {
       if (!matchedStyles) {
         return {error: 'Error: Could not get authored styles.'};
       }
+      widgets.push({
+        name: 'COMPUTED_STYLES',
+        data: {
+          computedStyles: styles,
+          backendNodeId: node.backendNodeId(),
+          matchedCascade: matchedStyles,
+          properties,
+        }
+      });
       for (const prop of properties) {
         result[uid].computed[prop] = styles.get(prop);
       }
@@ -647,6 +659,7 @@ const data = {
     }
     return {
       result: JSON.stringify(result, null, 2),
+      widgets,
     };
   }
 
@@ -701,6 +714,7 @@ const data = {
 
         return {
           requiresApproval: true,
+          description: lockedString('This code may modify page content. Continue?'),
         };
       }
       if (result.canceled) {