chrome-devtools-frontend 1.0.1675430 → 1.0.1678416

package/front_end/models/ai_assistance/AiAgent2.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Host from '../../core/host/host.js';
+import * as SDK from '../../core/sdk/sdk.js';
 import type * as LHModel from '../lighthouse/lighthouse.js';
 import type * as Trace from '../trace/trace.js';
 
@@ -30,6 +31,8 @@ const SKILL_DISPLAY_NAMES: Record<SkillName, string> = {
   network: 'Network requests',
   accessibility: 'Accessibility',
   performance: 'Performance',
+  storage: 'Storage',
+  sources: 'Workspace files and sources',
 };
 
 const preamble = `You are the most advanced unified AI assistant integrated into Chrome DevTools.
@@ -81,6 +84,33 @@ export class AiAgent2 extends AiAgent<unknown> {
     return {};
   }
 
+  protected override async preRun(): Promise<void> {
+    if (this.context && !this.context.isLoggingEnabled()) {
+      this.setServerSideLoggingActive(false);
+    }
+    const target = this.targetManager.primaryPageTarget();
+    const domModel = target?.model(SDK.DOMModel.DOMModel);
+    // Ensure the DOM document is requested and cached in DOMModel so that
+    // subsequent synchronous lookups via domModel.existingDocument() (e.g.,
+    // in #getDocumentBodyNode()) resolve the document and body immediately.
+    if (domModel) {
+      if (!domModel.existingDocument()) {
+        try {
+          await domModel.requestDocument();
+        } catch (e) {
+          debugLog('AiAgent2: Failed to request document', e);
+        }
+      }
+      if (!domModel.existingDocument()?.body) {
+        try {
+          await domModel.pushNodeByPathToFrontend('1,HTML,1,BODY');
+        } catch (e) {
+          debugLog('AiAgent2: Failed to push body node to frontend', e);
+        }
+      }
+    }
+  }
+
   readonly #activeSkills = new Set<SkillName>();
   readonly #declaredTools = new Set<string>();
 
@@ -213,7 +243,8 @@ User query: ${enhancedQuery}`;
   }
 
   #createExtensionScope(changes: ChangeManager): {install(): Promise<void>, uninstall(): Promise<void>} {
-    const selectedNode = this.context && this.context instanceof DOMNodeContext ? this.context.getItem() : null;
+    const selectedNode =
+        this.context && this.context instanceof DOMNodeContext ? this.context.getItem() : this.#getDocumentBodyNode();
     return new ExtensionScope(changes, this.sessionId, selectedNode);
   }
 
@@ -237,17 +268,31 @@ User query: ${enhancedQuery}`;
           changeManager: this.#changes,
           createExtensionScope: this.#createExtensionScope.bind(this),
           execJs: this.#execJs,
-          getExecutionContextNode: () => this.context instanceof DOMNodeContext ? this.context.getItem() : null,
+          getExecutionContextNode: () =>
+              (this.context instanceof DOMNodeContext ? this.context.getItem() : this.#getDocumentBodyNode()),
           getTarget: () => this.targetManager.primaryPageTarget(),
           getEstablishedOrigin: () => this.#getConversationOrigin(),
           lighthouseRecording: this.#lighthouseRecording,
           performanceRecordAndReload: this.#performanceRecordAndReload,
+          setLoggingEnabled: (enabled: boolean) => {
+            this.setServerSideLoggingActive(enabled);
+          },
         };
         return tool.handler(args, context, options);
       },
     });
   }
 
+  /**
+   * For non-DOM contexts (e.g., Lighthouse accessibility reports or storage items),
+   * there is no user-selected DOM node. We fall back to the document body as the
+   * default execution context node so scripts have a valid `$0` target.
+   */
+  #getDocumentBodyNode(): SDK.DOMModel.DOMNode|null {
+    const document = this.targetManager.primaryPageTarget()?.model(SDK.DOMModel.DOMModel)?.existingDocument();
+    return document?.body ?? null;
+  }
+
   #getConversationOrigin(): string|undefined {
     const allowed = this.#allowedOrigin?.();
     return allowed && 'origin' in allowed ? allowed.origin : undefined;

package/front_end/models/ai_assistance/AiConversation.ts

@@ -27,7 +27,7 @@ import {ContextSelectionAgent} from './agents/ContextSelectionAgent.js';
 import {FileAgent} from './agents/FileAgent.js';
 import {NetworkAgent} from './agents/NetworkAgent.js';
 import {PerformanceAgent} from './agents/PerformanceAgent.js';
-import {StorageAgent, StorageContext} from './agents/StorageAgent.js';
+import {StorageAgent} from './agents/StorageAgent.js';
 import {StylingAgent} from './agents/StylingAgent.js';
 import {AiAgent2} from './AiAgent2.js';
 import {AiHistoryStorage, ConversationType, type SerializedConversation} from './AiHistoryStorage.js';
@@ -37,6 +37,9 @@ import {DOMNodeContext} from './contexts/DOMNodeContext.js';
 import {FileContext} from './contexts/FileContext.js';
 import {PerformanceTraceContext} from './contexts/PerformanceTraceContext.js';
 import {RequestContext} from './contexts/RequestContext.js';
+import {StorageContext} from './contexts/StorageContext.js';
+import {ToolAnnotation} from './tools/Tool.js';
+import {ToolRegistry} from './tools/ToolRegistry.js';
 
 export const NOT_FOUND_IMAGE_DATA = '';
 export const CONTEXT_TITLE = 'Analyzing data';
@@ -324,10 +327,18 @@ export class AiConversation {
                        case ResponseType.SIDE_EFFECT: {
                          return {...item, confirm: undefined};
                        }
-                       case ResponseType.CONTEXT:
-                       case ResponseType.ACTION: {
+                       case ResponseType.CONTEXT: {
                          return {...item, widgets: undefined};
                        }
+                       case ResponseType.ACTION: {
+                         const tool = item.toolName ? ToolRegistry.get(item.toolName) : undefined;
+                         const shouldRedact = tool?.annotations?.includes(ToolAnnotation.REDACT_FROM_HISTORY);
+                         return {
+                           ...item,
+                           output: shouldRedact ? '<redacted>' : item.output,
+                           widgets: undefined,
+                         };
+                       }
                        default:
                          return item;
                      }
@@ -361,7 +372,7 @@ export class AiConversation {
 
     const options = {
       aidaClient: this.#aidaClient,
-      serverSideLoggingEnabled: isAiAssistanceServerSideLoggingEnabled(),
+      serverSideLoggingAllowed: isAiAssistanceServerSideLoggingAllowed(),
       sessionId: this.id,
       changeManager: this.#changeManager,
       performanceRecordAndReload: this.#performanceRecordAndReload,
@@ -540,7 +551,13 @@ export class AiConversation {
   };
 }
 
-function isAiAssistanceServerSideLoggingEnabled(): boolean {
+/**
+ * Checks whether server-side logging is allowed by the global system policy.
+ * Note that even if this returns true, individual agents can still dynamically
+ * deactivate/activate logging during their execution (e.g., when handling
+ * sensitive tools).
+ */
+function isAiAssistanceServerSideLoggingAllowed(): boolean {
   return !Root.Runtime.hostConfig.aidaAvailability?.disallowLogging;
 }
 

package/front_end/models/ai_assistance/README.md

@@ -1,8 +1,15 @@
 # AI in DevTools
 
-## High level architecture
+## Architecture Overview
 
-When the user interacts with AI via the AI Assistance Panel, they are having a _conversation_ with an agent.
+When the user interacts with AI via the AI Assistance Panel, they are having a _conversation_ with an agent. DevTools currently contains two architectural generations for AI assistance:
+
+- **Legacy V1 (Multi-Agent Architecture)**: Implemented in `agents/`. Each domain is handled by a specialized agent subclass extending `AiAgent` (for example, `PerformanceAgent`, `StylingAgent`, `NetworkAgent`).
+- **AIAgentV2 (Unified Single-Agent Architecture)**: Implemented in `AiAgent2.ts`. We are migrating from the siloed multi-agent architecture to a unified, skill-based single-agent architecture. In V2, a single agent (`AiAgent2`) handles multiple domains by dynamically loading **Skills** (`skills/`) and calling type-safe **Tools** (`tools/`).
+
+Both architectures share the core **Contexts**, **Formatters**, and **Security & Origin Isolation** mechanisms described below.
+
+## Core Concepts & Lifecycle
 
 ### Contexts
 
@@ -24,21 +31,47 @@ Encapsulating prompt formatting and UI generation within the context classes sim
 
 To deal with the work to take an object that is the AI agent's context and turn it into a text representation that can be sent to the AI, we use _formatters_. These are typically classes with `static` methods that can take in objects and return their text representation that we want to pass to the AI.
 
-## Future Architecture (V2) - WIP
+### Lifecycle & Cache Clearing
+
+AI Agents can maintain internal stateful variables to optimize performance or store context (such as stashed tool results, formatters, or instruction flags). However, this state must be carefully managed to prevent security leaks (such as cross-origin data leaks after page navigation) or stale results.
+
+The `AiAgent` base class defines a `clearCache()` method. This method is automatically invoked by the system when:
+- An execution error occurs.
+- The user aborts the execution.
+- A cross-origin navigation is detected (via the top-level origin blocking mechanism).
+
+If you introduce new stateful member variables in an `AiAgent` subclass, you **must** override `clearCache()` to reset them:
+1. Always call `super.clearCache()` to ensure base class cleanup is executed.
+2. Reset any subclass-specific state (such as setting formatters to `null`, clearing lists, or resetting boolean flags).
+
+Example from `PerformanceAgent`:
+```typescript
+  override clearCache(): void {
+    super.clearCache();
+    this.#functionCallCacheForFocus.clear();
+    this.#formatter = null;
+    this.#traceFacts = [];
+    // ... reset other stateful fields
+  }
+```
+
+### Security & Origin Isolation
 
-We are migrating the DevTools AI Assistance from a siloed multi-agent architecture to a unified, skill-based single-agent architecture (`AIAgent2`).
+To prevent prompt injection attacks and cross-origin data leaks, the AI Assistance panel enforces strict origin-lock boundaries:
+
+- **Origin Locking**: Once a conversation session begins, it locks to the origin of the initial data context (e.g. `https://google.com` or a specific file path).
+- **Opaque Origins**: Any origin classified as opaque (e.g. `data:`, `about:`, `detached` nodes, unparsed `undefined://` or empty origins) is blocked from starting AI assistance (`isOpaqueOrigin()`).
+- **File Isolation**: Local files (`file://`) do not share a single wildcard origin. Instead, the path is appended (e.g. `file:///path/to/file.js`) to treat each local file as its own unique origin. Swapping local files in the same conversation is blocked.
+- **Trace Isolation**: Imported performance trace recordings are isolated using the virtual origin `imported-trace://${domain}`. This ensures that loaded local trace files do not share origins with live pages, preventing potential cross-origin prompt injection attacks when switching contexts.
+- **Equivalence**: `areOriginsEquivalent()` ensures opaque origins are never equivalent to anything (including themselves), forcing a conversation reset on transitions.
 
-In this new architecture:
-- A single agent (`AIAgent2`) handles multiple domains.
-- Capabilities are defined as **Skills** in Markdown files.
-- The agent can dynamically load skills as needed via a `learnSkill` tool.
+## AIAgentV2 (Unified Architecture)
 
-This work is currently in progress and behind a feature flag.
+We are migrating DevTools AI Assistance from a siloed multi-agent architecture to a unified, skill-based single-agent architecture (`AiAgent2`). In this new architecture, capabilities are defined as **Skills** in Markdown files, and the agent can dynamically load skills as needed via a `learnSkills` tool.
 
 ### Skills Build System
 
-To support dynamic loading of skills, we generate JavaScript files from Markdown files containing skill definitions.
-We use a nested `BUILD.gn` file in the `skills/` subdirectory specifically for this purpose. This ensures that GN's `target_gen_dir` points to `gen/front_end/models/ai_assistance/skills/`, placing the generated `.skill.js` files in the same relative structure as their source `.md` files. This allows TypeScript files in the `skills/` directory (like `map.ts`) to import the generated files using relative paths (e.g., `./styling.skill.js`) seamlessly. See the [Skills README](skills/README.md) for full details.
+To support dynamic loading of skills, we generate JavaScript files from Markdown files containing skill definitions. We use a nested `BUILD.gn` file in the `skills/` subdirectory specifically for this purpose. This ensures that GN's `target_gen_dir` points to `gen/front_end/models/ai_assistance/skills/`, placing the generated `.skill.js` files in the same relative structure as their source `.md` files. This allows TypeScript files in the `skills/` directory (like `map.ts`) to import the generated files using relative paths (e.g., `./styling.skill.js`) seamlessly. See the [Skills README](skills/README.md) for full details.
 
 ### Tools and ToolRegistry
 
@@ -49,9 +82,13 @@ To support skills requiring execution of code or fetching page state (like compu
 - **Capability Contexts**: Instead of passing a monolithic grab-bag context to all tools, dependencies are broken into narrow capability interfaces (e.g. `PageExecutionCapability`, `StyleMutationCapability`, `TargetCapability`, `OriginLockCapability`). Tools declare their required dependencies by intersecting these interfaces on their generic `ContextType` definition. The caller/Agent fulfills the complete capability context (`AllToolsCapabilities`), guaranteeing 100% compile-time type safety for dependencies without runtime checks.
 - **ToolRegistry**: A static registry (`ToolRegistry`) storing instantiated tools. It uses TypeScript function overloading and generic lookups (`static get<K extends keyof typeof TOOLS>(name: K): typeof TOOLS[K]`) to return the precise class type of each tool, preventing type-erasure and escape-hatches (such as `any` or `as unknown` type assertions) at integration points like `AiAgent2.ts`. See the [Tools README](tools/README.md) for authoring instructions.
 
-## Performance specific documentation
+### Adding a new skill
+
+See the [Skills README](skills/README.md) for detailed instructions.
 
-### `PerformanceTraceContext`
+## Extending Domain Support (Performance Insights)
+
+### PerformanceTraceContext
 
 The context for `PerformanceAgent` is `PerformanceTraceContext`, which wraps `AgentFocus`. `AgentFocus` supports different behavior for different entry-points of the "Ask AI" feature for a trace (such as a specific performance insight, flame chart call tree, trace event, or the whole parsed trace). `PerformanceTraceContext` implements `ConversationContext<AgentFocus>` to fetch prompt details, user-facing accordion details, and context-specific AI suggestions.
 
@@ -73,16 +110,15 @@ In general, the trace bounds are defined by the insight's overlays. If there are
 
 See the `insightBounds` function in `InsightAIContext.ts`.
 
-
 ### Testing the new Insight
 
 Once it's working, it's a good idea to manually experiment with the new Insight and ask a bunch of questions on different traces. Try to find (or create) websites that cause the insight to identify a variety of outputs and see how far you can push the AI. Look for instances where you can perhaps clarify the data you are passing into it, or tweak your wording, to try to make it clearer. You can also take the data you are sending and paste it into Gemini to get feedback on your prompt from the AI.
 
 (We are working on a better, more automated way, of evaluating these responses).
 
-## Debugging tips
+## Debugging & Local Development
 
-To test the AI code, you must be running DevTools in a branded Chrome (e.g. official Chrome Canary) and be signed in. You can use the `npm start` with a canary flag in this repository to run against Chromium, or by running Chrome Canary and pointing it to your local DevTools.":
+To test the AI code, you must be running DevTools in a branded Chrome (e.g. official Chrome Canary) and be signed in. You can use the `npm start` with a canary flag in this repository to run against Chromium, or by running Chrome Canary and pointing it to your local DevTools:
 
 ```
 npm start -- --browser=canary
@@ -108,13 +144,3 @@ Now, when interacting with the AI and sending requests, you will see output logg
 ### Testing the Accessibility Skill
 
 The accessibility skill (`accessibility.md`) relies on an active Lighthouse report. Before interacting with the agent using this skill, ensure you have run a Lighthouse audit on the page you are inspecting so that the `getLighthouseAudits` tool can retrieve the report data.
-
-## Security & Origin Isolation
-
-To prevent prompt injection attacks and cross-origin data leaks, the AI Assistance panel enforces strict origin-lock boundaries:
-
-*   **Origin Locking**: Once a conversation session begins, it locks to the origin of the initial data context (e.g. `https://google.com` or a specific file path).
-*   **Opaque Origins**: Any origin classified as opaque (e.g. `data:`, `about:`, `detached` nodes, unparsed `undefined://` or empty origins) is blocked from starting AI assistance (`isOpaqueOrigin()`).
-*   **File Isolation**: Local files (`file://`) do not share a single wildcard origin. Instead, the path is appended (e.g. `file:///path/to/file.js`) to treat each local file as its own unique origin. Swapping local files in the same conversation is blocked.
-*   **Trace Isolation**: Imported performance trace recordings are isolated using the virtual origin `imported-trace://${domain}`. This ensures that loaded local trace files do not share origins with live pages, preventing potential cross-origin prompt injection attacks when switching contexts.
-*   **Equivalence**: `areOriginsEquivalent()` ensures opaque origins are never equivalent to anything (including themselves), forcing a conversation reset on transitions.

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

@@ -122,6 +122,10 @@ export interface ActionResponse {
   output?: string;
   canceled: boolean;
   widgets?: AiWidget[];
+  /**
+   * The name of the executed tool. Only populated for AI v2.
+   */
+  toolName?: string;
 }
 
 export interface QueryingResponse {
@@ -161,7 +165,7 @@ export type AllowedOriginResult = {
 
 export interface AgentOptions {
   aidaClient: Host.AidaClient.AidaClient;
-  serverSideLoggingEnabled?: boolean;
+  serverSideLoggingAllowed?: boolean;
   sessionId?: string;
   confirmSideEffectForTest?: typeof Promise.withResolvers;
   onInspectElement?: () => Promise<SDK.DOMModel.DOMNode|null>;
@@ -193,6 +197,14 @@ export abstract class ConversationContext<T> {
   abstract getItem(): T;
   abstract getTitle(): string;
 
+  /**
+   * Returns true if the server-side logging is enabled when this context is active.
+   * Currently only used for AI v2.
+   */
+  isLoggingEnabled(): boolean {
+    return true;
+  }
+
   getOrigin(): string {
     return extractContextOrigin(this.getURL());
   }
@@ -387,10 +399,22 @@ export interface SourceCodeAiWidget {
   };
 }
 
+export interface StorageBreakdownAiWidget {
+  name: 'STORAGE_BREAKDOWN';
+  data: {
+    totalUsageBytes: number,
+    totalQuotaBytes: number,
+    usageBreakdown: Array<{
+      storageType: string,
+      bytes: number,
+    }>,
+  };
+}
+
 export type AiWidget = ComputedStyleAiWidget|CoreVitalsAiWidget|StylePropertiesAiWidget|DomTreeAiWidget|
     PerformanceTraceAiWidget|PerfInsightAiWidget|TimelineRangeSummaryAiWidget|BottomUpTreeAiWidget|SourceFileAiWidget|
     LighthouseReportAiWidget|TimelineEventSummaryAiWidget|NetworkRequestGeneralHeadersAiWidget|SourceCodeAiWidget|
-    SourceFilesListAiWidget|NetworkRequestsListAiWidget|NetworkTrackAiWidget;
+    SourceFilesListAiWidget|NetworkRequestsListAiWidget|NetworkTrackAiWidget|StorageBreakdownAiWidget;
 
 /**
  * @deprecated Used for v1 agents. Once v2 is shipped, this can be removed.
@@ -472,7 +496,16 @@ export abstract class AiAgent<T> {
 
   readonly #sessionId: string;
   readonly #aidaClient: Host.AidaClient.AidaClient;
-  #serverSideLoggingEnabled: boolean;
+  /**
+   * Whether server-side logging is permitted by the system policy (based on
+   * user preferences, feature flags, or branding configurations).
+   */
+  readonly #serverSideLoggingAllowed: boolean;
+  /**
+   * Tracks the dynamic runtime state of logging. Even if logging is allowed
+   * by policy, tools can temporarily deactivate this to avoid logging sensitive data.
+   */
+  #serverSideLoggingActive: boolean;
   readonly confirmSideEffect: typeof Promise.withResolvers;
   readonly #functionDeclarations = new Map<string, FunctionDeclaration<Record<string, unknown>, unknown>>();
   readonly #allowedOrigin?: () => AllowedOriginResult;
@@ -499,13 +532,15 @@ export abstract class AiAgent<T> {
 
   constructor(opts: AgentOptions) {
     this.#aidaClient = opts.aidaClient;
-    this.#serverSideLoggingEnabled = opts.serverSideLoggingEnabled ?? false;
+    let serverSideLoggingAllowed = opts.serverSideLoggingAllowed ?? false;
     // Disable logging for now.
     // For context, see b/454563259#comment35.
     // We should be able to remove this ~end of April.
     if (Root.Runtime.hostConfig.devToolsGeminiRebranding?.enabled) {
-      this.#serverSideLoggingEnabled = false;
+      serverSideLoggingAllowed = false;
     }
+    this.#serverSideLoggingAllowed = serverSideLoggingAllowed;
+    this.#serverSideLoggingActive = serverSideLoggingAllowed;
     this.#sessionId = opts.sessionId ?? crypto.randomUUID();
     this.confirmSideEffect = opts.confirmSideEffectForTest ?? (() => Promise.withResolvers());
     this.#history = opts.history ?? [];
@@ -558,8 +593,17 @@ export abstract class AiAgent<T> {
   clearCache(): void {
   }
 
-  protected disableServerSideLogging(): void {
-    this.#serverSideLoggingEnabled = false;
+  /**
+   * Toggles whether server-side logging is active.
+   * Note that logging can only be activated if it was allowed by policy/configuration
+   * at startup (i.e., `#serverSideLoggingAllowed` is true).
+   */
+  protected setServerSideLoggingActive(active: boolean): void {
+    if (active && this.#serverSideLoggingAllowed) {
+      this.#serverSideLoggingActive = true;
+    } else {
+      this.#serverSideLoggingActive = false;
+    }
   }
 
   popPendingMultimodalInput(): MultimodalInput|undefined {
@@ -618,7 +662,7 @@ export abstract class AiAgent<T> {
         model_id: this.options.modelId || undefined,
       },
       metadata: {
-        disable_user_content_logging: !(this.#serverSideLoggingEnabled ?? false),
+        disable_user_content_logging: !(this.#serverSideLoggingActive ?? false),
         string_session_id: this.#sessionId,
         user_tier: userTier,
         client_version:
@@ -1027,6 +1071,7 @@ export abstract class AiAgent<T> {
         output: typeof result.result === 'string' ? result.result : JSON.stringify(result.result),
         widgets: result.widgets,
         canceled: false,
+        toolName: name,
       };
     }
 
@@ -1036,6 +1081,7 @@ export abstract class AiAgent<T> {
         code,
         output: result.error,
         canceled: false,
+        toolName: name,
       };
     }
 

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

@@ -19,6 +19,7 @@ import {DOMNodeContext} from '../contexts/DOMNodeContext.js';
 import {FileContext} from '../contexts/FileContext.js';
 import {PerformanceTraceContext} from '../contexts/PerformanceTraceContext.js';
 import {getRequestContextOrigin, RequestContext} from '../contexts/RequestContext.js';
+import {StorageContext} from '../contexts/StorageContext.js';
 import {formatBytesToKb, seconds} from '../data_formatters/UnitFormatters.js';
 import {debugLog} from '../debug.js';
 import {StorageItem} from '../StorageItem.js';
@@ -30,7 +31,6 @@ import {
   type ContextResponse,
   type RequestOptions,
 } from './AiAgent.js';
-import {StorageContext} from './StorageAgent.js';
 
 const lockedString = i18n.i18n.lockedString;
 /**