chrome-devtools-frontend 1.0.1675430 → 1.0.1676824

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

@@ -14,8 +14,7 @@ import {
   type AgentOptions,
   AiAgent,
   type ContextResponse,
-  ConversationContext,
-  type ConversationSuggestions,
+  type ConversationContext,
   type RequestOptions,
   ResponseType,
 } from './AiAgent.js';
@@ -68,7 +67,7 @@ function isSamePrimaryPageOrigin(targetManager: SDK.TargetManager.TargetManager,
   return isSamePageOrigin(primaryPageTarget, context);
 }
 
-export function isSamePageOrigin(target: SDK.Target.Target|null, context?: ConversationContext<StorageItem>): boolean {
+export function isSamePageOrigin(target: SDK.Target.Target|null, context?: ConversationContext<unknown>): boolean {
   if (!target || !context) {
     return false;
   }
@@ -85,84 +84,6 @@ function resolveTargetOrigins(context?: ConversationContext<StorageItem>, origin
   return uniqueOrigins.slice(0, MAX_TARGET_ORIGINS);
 }
 
-export class StorageContext extends ConversationContext<StorageItem> {
-  #item: StorageItem;
-
-  constructor(item: StorageItem) {
-    super();
-    this.#item = item;
-  }
-
-  override getURL(): string {
-    return this.#item.primaryTargetOrigin;
-  }
-
-  override getItem(): StorageItem {
-    return this.#item;
-  }
-
-  override getTitle(): string {
-    if (this.#item instanceof CookieItem) {
-      if (this.#item.name) {
-        return `cookie: ${this.#item.name}${this.#item.origin ? ` ${this.#item.origin}` : ''}`;
-      }
-      return `cookies${this.#item.isGenericContext ? '' : `: ${this.#item.origin}`}`;
-    }
-    if (this.#item instanceof DOMStorageItem) {
-      if (this.#item.key) {
-        return `entry: ${this.#item.key}${this.#item.origin ? ` ${this.#item.origin}` : ''}`;
-      }
-      const prefix = this.#item.type === 'localStorage' ? 'local storage' : 'session storage';
-      return `${prefix}${this.#item.isGenericContext ? '' : `: ${this.#item.origin}`}`;
-    }
-    return `Storage: ${this.getOrigin()}`;
-  }
-
-  override async getSuggestions(): Promise<ConversationSuggestions|undefined> {
-    if (this.#item instanceof CookieItem) {
-      if (this.#item.name) {
-        return [
-          {
-            title: 'Why is this cookie set?',
-            jslogContext: 'storage-cookie',
-          },
-          {
-            title: 'Explain the value of this cookie',
-            jslogContext: 'storage-cookie',
-          },
-        ];
-      }
-      return [
-        {
-          title: 'Explain the cookies set by this page',
-          jslogContext: 'storage-cookie',
-        },
-      ];
-    }
-    if (this.#item instanceof DOMStorageItem) {
-      if (this.#item.key) {
-        return [
-          {
-            title: 'What is the purpose of this storage entry?',
-            jslogContext: 'storage-domstorage',
-          },
-          {
-            title: 'Explain the value of this storage entry',
-            jslogContext: 'storage-domstorage',
-          },
-        ];
-      }
-      return [
-        {
-          title: 'Explain these storage items',
-          jslogContext: 'storage-domstorage',
-        },
-      ];
-    }
-    return undefined;
-  }
-}
-
 // Maximum character length of values allowed.
 const MAX_NUM_CHAR_LENGTH = 10000;
 
@@ -281,7 +202,7 @@ export class StorageAgent extends AiAgent<StorageItem> {
       },
 
       handler: async args => {
-        this.disableServerSideLogging();
+        this.setServerSideLoggingActive(false);
         if (!isSamePrimaryPageOrigin(this.targetManager, this.context)) {
           return {error: 'No origin available or not allowed.'};
         }
@@ -367,7 +288,7 @@ export class StorageAgent extends AiAgent<StorageItem> {
       },
 
       handler: async (args, options) => {
-        this.disableServerSideLogging();
+        this.setServerSideLoggingActive(false);
         if (!isSamePrimaryPageOrigin(this.targetManager, this.context)) {
           return {error: 'No origin available or not allowed.'};
         }
@@ -467,7 +388,7 @@ export class StorageAgent extends AiAgent<StorageItem> {
         };
       },
       handler: async args => {
-        this.disableServerSideLogging();
+        this.setServerSideLoggingActive(false);
         if (!isSamePrimaryPageOrigin(this.targetManager, this.context)) {
           return {error: 'No origin available or not allowed.'};
         }
@@ -527,7 +448,7 @@ export class StorageAgent extends AiAgent<StorageItem> {
         };
       },
       handler: async (args, options) => {
-        this.disableServerSideLogging();
+        this.setServerSideLoggingActive(false);
         if (!isSamePrimaryPageOrigin(this.targetManager, this.context)) {
           return {error: 'No origin available or not allowed.'};
         }
@@ -684,9 +605,9 @@ export class StorageAgent extends AiAgent<StorageItem> {
   protected override async preRun(): Promise<void> {
     const item = this.context?.getItem();
     if (item instanceof CookieItem && Boolean(item.name)) {
-      this.disableServerSideLogging();
+      this.setServerSideLoggingActive(false);
     } else if (item instanceof DOMStorageItem && Boolean(item.key)) {
-      this.disableServerSideLogging();
+      this.setServerSideLoggingActive(false);
     }
   }
 

package/front_end/models/ai_assistance/agents/StylingAgent.snapshot.txt

@@ -365,7 +365,8 @@ Content:
     "type": "action",
     "code": "console.log('hello');",
     "output": "hello",
-    "canceled": false
+    "canceled": false,
+    "toolName": "executeJavaScript"
   },
   {
     "type": "querying"

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -22,6 +22,7 @@ import * as DOMNodeContext from './contexts/DOMNodeContext.js';
 import * as FileContext from './contexts/FileContext.js';
 import * as PerformanceTraceContext from './contexts/PerformanceTraceContext.js';
 import * as RequestContext from './contexts/RequestContext.js';
+import * as StorageContext from './contexts/StorageContext.js';
 import * as ConversationSummary from './ConversationSummary.js';
 import * as FileFormatter from './data_formatters/FileFormatter.js';
 import * as LighthouseFormatter from './data_formatters/LighthouseFormatter.js';
@@ -42,10 +43,17 @@ import * as ExecuteJavaScript from './tools/ExecuteJavaScript.js';
 import * as GetElementAccessibilityDetails from './tools/GetElementAccessibilityDetails.js';
 import * as GetLighthouseAudits from './tools/GetLighthouseAudits.js';
 import * as GetNetworkRequestDetails from './tools/GetNetworkRequestDetails.js';
+import * as GetSourceContent from './tools/GetSourceContent.js';
 import * as GetStyles from './tools/GetStyles.js';
+import * as GetTraceEventByKey from './tools/GetTraceEventByKey.js';
+import * as GetTraceMainThreadSummary from './tools/GetTraceMainThreadSummary.js';
+import * as GetTraceNetworkSummary from './tools/GetTraceNetworkSummary.js';
 import * as ListNetworkRequests from './tools/ListNetworkRequests.js';
+import * as ListPageOrigins from './tools/ListPageOrigins.js';
+import * as ListSources from './tools/ListSources.js';
 import * as RecordPerformanceTrace from './tools/RecordPerformanceTrace.js';
 import * as ResolveDevtoolsNodePath from './tools/ResolveDevtoolsNodePath.js';
+import * as SelectTraceEventByKey from './tools/SelectTraceEventByKey.js';
 import * as Tool from './tools/Tool.js';
 import * as ToolRegistry from './tools/ToolRegistry.js';
 
@@ -77,10 +85,16 @@ export {
   GetElementAccessibilityDetails,
   GetLighthouseAudits,
   GetNetworkRequestDetails,
+  GetSourceContent,
   GetStyles,
+  GetTraceEventByKey,
+  GetTraceMainThreadSummary,
+  GetTraceNetworkSummary,
   Injected,
   LighthouseFormatter,
   ListNetworkRequests,
+  ListPageOrigins,
+  ListSources,
   NetworkAgent,
   NetworkRequestFormatter,
   PerformanceAgent,
@@ -91,7 +105,9 @@ export {
   RecordPerformanceTrace,
   RequestContext,
   ResolveDevtoolsNodePath,
+  SelectTraceEventByKey,
   StorageAgent,
+  StorageContext,
   StorageItem,
   StylingAgent,
   Tool,

package/front_end/models/ai_assistance/contexts/PerformanceTraceContext.ts

@@ -23,6 +23,13 @@ import {PerformanceTraceFormatter} from '../data_formatters/PerformanceTraceForm
 import type {AICallTree} from '../performance/AICallTree.js';
 import {AgentFocus} from '../performance/AIContext.js';
 
+/**
+ * Labels used to identify specific periods or categories in the trace for getting main thread summary.
+ * Supports hardcoded phases, dynamic navigation IDs (`NAVIGATION_X`), and insight models.
+ */
+export type MainThreadSectionLabel = 'nav-to-lcp'|'lcp-ttfb'|'lcp-render-delay'|'trace-bounds'|'NO_NAVIGATION'|
+                                     `NAVIGATION_${string}`|keyof Trace.Insights.Types.InsightModels;
+
 /**
  * The conversation context for AI queries regarding performance traces.
  * Encapsulates the user's active trace selection/focus and handles formatting
@@ -339,4 +346,121 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
 
     return details.length > 0 ? (details as [ContextDetail, ...ContextDetail[]]) : null;
   }
+
+  getBoundsForLabel(label: MainThreadSectionLabel): Trace.Types.Timing.TraceWindowMicro|null {
+    const focus = this.#focus;
+    const {parsedTrace} = focus;
+    const insightSet = focus.primaryInsightSet;
+
+    if (label === 'nav-to-lcp') {
+      if (insightSet) {
+        const lcp = Trace.Insights.Common.getLCP(insightSet);
+        if (lcp) {
+          return Trace.Helpers.Timing.traceWindowFromMicroSeconds(insightSet.bounds.min,
+                                                                  lcp.event.ts as Trace.Types.Timing.Micro);
+        }
+      }
+      return null;
+    }
+
+    if (label === 'lcp-ttfb') {
+      if (insightSet) {
+        const subparts = insightSet.model.LCPBreakdown?.subparts;
+        if (subparts?.ttfb) {
+          return subparts.ttfb;
+        }
+      }
+      return null;
+    }
+
+    if (label === 'lcp-render-delay') {
+      if (insightSet) {
+        const subparts = insightSet.model.LCPBreakdown?.subparts;
+        if (subparts?.renderDelay) {
+          return subparts.renderDelay;
+        }
+      }
+      return null;
+    }
+
+    if (label === 'trace-bounds') {
+      return parsedTrace.data.Meta.traceBounds;
+    }
+
+    const insightSetById = parsedTrace.insights?.get(label as Trace.Types.Events.NavigationId);
+    if (insightSetById) {
+      return insightSetById.bounds;
+    }
+
+    if (insightSet) {
+      const model = getInsightModel(insightSet.model, label);
+      if (model) {
+        return Trace.Insights.Common.insightBounds(model, insightSet.bounds);
+      }
+    }
+
+    for (const is of parsedTrace.insights?.values() ?? []) {
+      const model = getInsightModel(is.model, label);
+      if (model) {
+        return Trace.Insights.Common.insightBounds(model, is.bounds);
+      }
+    }
+
+    return null;
+  }
+
+  getLabelName(label: MainThreadSectionLabel): string {
+    return getLabelName(label, this.#focus.parsedTrace);
+  }
+
+  createBounds(min?: number, max?: number): Trace.Types.Timing.TraceWindowMicro|null {
+    const {min: bMin, max: bMax} = this.#focus.parsedTrace.data.Meta.traceBounds;
+    const clampedMin = Math.round(Math.max(min ?? bMin, bMin));
+    const clampedMax = Math.round(Math.min(max ?? bMax, bMax));
+
+    if (clampedMin > clampedMax) {
+      return null;
+    }
+
+    return Trace.Helpers.Timing.traceWindowFromMicroSeconds(clampedMin as Trace.Types.Timing.Micro,
+                                                            clampedMax as Trace.Types.Timing.Micro);
+  }
+}
+
+const STATIC_LABEL_NAMES: Record<string, string> = {
+  'nav-to-lcp': 'navigation to LCP',
+  'lcp-ttfb': 'LCP to TTFB',
+  'lcp-render-delay': 'LCP render delay',
+  'trace-bounds': 'the entire trace',
+  NO_NAVIGATION: 'the period before the first navigation',
+};
+
+function getInsightModel(
+    model: Trace.Insights.Types.InsightModels,
+    key: string,
+    ): Trace.Insights.Types.InsightModels[keyof Trace.Insights.Types.InsightModels]|undefined {
+  if (Object.prototype.hasOwnProperty.call(model, key)) {
+    return model[key as keyof Trace.Insights.Types.InsightModels];
+  }
+  return undefined;
+}
+
+function getLabelName(label: MainThreadSectionLabel, parsedTrace: Trace.TraceModel.ParsedTrace): string {
+  if (Object.prototype.hasOwnProperty.call(STATIC_LABEL_NAMES, label)) {
+    return STATIC_LABEL_NAMES[label];
+  }
+
+  const insightSetById = parsedTrace.insights?.get(label as Trace.Types.Events.NavigationId);
+  if (insightSetById) {
+    return `navigation to ${insightSetById.url.href}`;
+  }
+
+  for (const insightSet of parsedTrace.insights?.values() ?? []) {
+    const model = getInsightModel(insightSet.model, label);
+    if (model) {
+      return `${model.title} insight`;
+    }
+  }
+
+  return label;
 }

package/front_end/models/ai_assistance/contexts/StorageContext.ts

@@ -0,0 +1,111 @@
+// 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.
+
+import * as Common from '../../../core/common/common.js';
+import type * as SDK from '../../../core/sdk/sdk.js';
+import {
+  ConversationContext,
+  type ConversationSuggestions,
+} from '../agents/AiAgent.js';
+import {areOriginsEquivalent} from '../AiOrigins.js';
+import {CookieItem, DOMStorageItem, type StorageItem} from '../StorageItem.js';
+
+export class StorageContext extends ConversationContext<StorageItem> {
+  #item: StorageItem;
+
+  constructor(item: StorageItem) {
+    super();
+    this.#item = item;
+  }
+
+  override getURL(): string {
+    return this.#item.primaryTargetOrigin;
+  }
+
+  override getItem(): StorageItem {
+    return this.#item;
+  }
+
+  override getTitle(): string {
+    if (this.#item instanceof CookieItem) {
+      if (this.#item.name) {
+        return `cookie: ${this.#item.name}${this.#item.origin ? ` ${this.#item.origin}` : ''}`;
+      }
+      return `cookies${this.#item.isGenericContext ? '' : `: ${this.#item.origin}`}`;
+    }
+    if (this.#item instanceof DOMStorageItem) {
+      if (this.#item.key) {
+        return `entry: ${this.#item.key}${this.#item.origin ? ` ${this.#item.origin}` : ''}`;
+      }
+      const prefix = this.#item.type === 'localStorage' ? 'local storage' : 'session storage';
+      return `${prefix}${this.#item.isGenericContext ? '' : `: ${this.#item.origin}`}`;
+    }
+    return `Storage: ${this.getOrigin()}`;
+  }
+
+  /**
+   * @override
+   */
+  override isLoggingEnabled(): boolean {
+    if (this.#item instanceof CookieItem && Boolean(this.#item.name)) {
+      return false;
+    }
+    if (this.#item instanceof DOMStorageItem && Boolean(this.#item.key)) {
+      return false;
+    }
+    return true;
+  }
+
+  override async getSuggestions(): Promise<ConversationSuggestions|undefined> {
+    if (this.#item instanceof CookieItem) {
+      if (this.#item.name) {
+        return [
+          {
+            title: 'Why is this cookie set?',
+            jslogContext: 'storage-cookie',
+          },
+          {
+            title: 'Explain the value of this cookie',
+            jslogContext: 'storage-cookie',
+          },
+        ];
+      }
+      return [
+        {
+          title: 'Explain the cookies set by this page',
+          jslogContext: 'storage-cookie',
+        },
+      ];
+    }
+    if (this.#item instanceof DOMStorageItem) {
+      if (this.#item.key) {
+        return [
+          {
+            title: 'What is the purpose of this storage entry?',
+            jslogContext: 'storage-domstorage',
+          },
+          {
+            title: 'Explain the value of this storage entry',
+            jslogContext: 'storage-domstorage',
+          },
+        ];
+      }
+      return [
+        {
+          title: 'Explain these storage items',
+          jslogContext: 'storage-domstorage',
+        },
+      ];
+    }
+    return undefined;
+  }
+}
+
+export function isSamePageOrigin(target: SDK.Target.Target|null, allowedOrigin: string): boolean {
+  if (!target) {
+    return false;
+  }
+  const pageOrigin = Common.ParsedURL.ParsedURL.extractOrigin(target.inspectedURL());
+  return pageOrigin !== '' && areOriginsEquivalent(pageOrigin, allowedOrigin);
+}

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts

@@ -11,7 +11,7 @@ import type {AICallTree} from '../performance/AICallTree.js';
 import type {AgentFocus} from '../performance/AIContext.js';
 import {AIQueries} from '../performance/AIQueries.js';
 
-import {NetworkRequestFormatter} from './NetworkRequestFormatter.js';
+import {NetworkRequestFormatter, sanitizeHeaders} from './NetworkRequestFormatter.js';
 import {PerformanceInsightFormatter} from './PerformanceInsightFormatter.js';
 import {bytes, micros, millis} from './UnitFormatters.js';
 
@@ -1036,3 +1036,71 @@ The order of headers corresponds to an internal fixed list. If a header is not p
     ].join('\n\n');
   }
 }
+
+/**
+ * Serializes a trace event to a JSON string for AI consumption,
+ * ensuring sensitive data (like headers and raw script source code)
+ * is sanitized or redacted.
+ */
+export function formatEventForAI(event: Trace.Types.Events.Event): string {
+  if (Trace.Types.Events.isSyntheticNetworkRequest(event)) {
+    return JSON.stringify({
+      ...event,
+      args: {
+        ...event.args,
+        data: {
+          ...event.args.data,
+          responseHeaders: event.args.data.responseHeaders ? sanitizeHeaders(event.args.data.responseHeaders) : null,
+        },
+      },
+    });
+  }
+
+  if (Trace.Types.Events.isResourceReceiveResponse(event)) {
+    return JSON.stringify({
+      ...event,
+      args: {
+        ...event.args,
+        data: {
+          ...event.args.data,
+          headers: event.args.data.headers ? sanitizeHeaders(event.args.data.headers) : undefined,
+        },
+      },
+    });
+  }
+
+  if (Trace.Types.Events.isRundownScriptSource(event)) {
+    // Redact sensitive cross-origin script source text.
+    const safeData: Omit<Trace.Types.Events.RundownScriptSource['args']['data'], 'sourceText'> = {
+      isolate: event.args.data.isolate,
+      scriptId: event.args.data.scriptId,
+      length: event.args.data.length,
+    };
+    return JSON.stringify({
+      ...event,
+      args: {
+        ...event.args,
+        data: safeData,
+      },
+    });
+  }
+
+  if (Trace.Types.Events.isRundownScriptSourceLarge(event)) {
+    // Redact sensitive cross-origin script source text.
+    const safeData: Omit<Trace.Types.Events.RundownScriptSourceLarge['args']['data'], 'sourceText'> = {
+      isolate: event.args.data.isolate,
+      scriptId: event.args.data.scriptId,
+      splitIndex: event.args.data.splitIndex,
+      splitCount: event.args.data.splitCount,
+    };
+    return JSON.stringify({
+      ...event,
+      args: {
+        ...event.args,
+        data: safeData,
+      },
+    });
+  }
+
+  return JSON.stringify(event);
+}

package/front_end/models/ai_assistance/skills/README.md

@@ -10,7 +10,7 @@ Example:
 ```markdown
 ---
 name: styling
-allowed-tools: [search_web]
+allowed-tools: [executeJavaScript]
 ---
 You are a CSS expert...
 ```
@@ -38,3 +38,65 @@ To use a skill in TypeScript:
 2.  Register it in `SkillRegistry.ts`.
 
 Types are provided globally in `front_end/global_typings/global_defs.d.ts` via a wildcard module declaration (`*.skill.js`). This avoids the need to generate `tsconfig.json` files for the generated skills.
+
+## Building a skill for AIv2
+
+_Note: some of this is a bit rough around the edges and subject to change as we build V2 out._
+
+If you want to add a new skill to DevTools AI v2 you should:
+
+Firstly, consider if we need it or not. Can we test the AI to see how it can handle relevant prompts without a new skill? (We are currently working on eval architecture to make this easier in the future too).
+
+Assuming we do want it, then we should create the new skill in `models/ai_assistance/skills/<NAME>.md`.
+
+This skill must have YAML frontmatter that defines its name and description, and optionally any tools that it is allowed to call (more on tools below):
+
+```
+---
+name: performance
+description: Web performance analysis, trace inspection, and trace recording.
+allowed-tools:
+  - recordPerformanceTrace
+---
+
+<body of the skill goes here>
+```
+
+The name and description are important. These are given to the AI in its context window so it knows that this tool exists and understands when to use it. You should think carefully about producing a very clear description and ideally evaluate this to check if the AI uses the tool in the right scenarios.
+
+To have the skill built as JavaScript and available to the AI:
+
+1. Update `models/ai_assistance/skills/BUILD.gn` to add the new skill file as a source.
+2. Update `models/ai_assistance/skills/Skill.ts` to add the new skill name to the `SkillName` union type.
+3. Update `models/ai_assistance/skills/SkillRegistry.ts` to import the generated skill file and register it in the `SKILLS` object.
+4. Add the generated skill file (`front_end/models/ai_assistance/skills/<NAME>.skill.js`) to the list of release sources in `config/gni/devtools_grd_files.gni`.
+
+If your skill does not need to call any tools, then you are done. The AI can now learn your skill and use it.
+
+### Using existing tools
+
+If your new skill needs to use tools that are already implemented:
+
+1. **Find the tool name**: Locate the tool's registration name in the `ToolName` enum (e.g., `executeJavaScript`, `listNetworkRequests`, `getStyles`) from `models/ai_assistance/tools/Tool.ts`.
+2. **Bind the tool to the skill**: Add the tool name to the `allowed-tools` list in your skill's Markdown frontmatter:
+   ```yaml
+   ---
+   name: my-skill
+   allowed-tools:
+     - executeJavaScript
+   ---
+   ```
+
+By doing this you ensure that if the AI learns you skill, those functions are learned and added to the active conversation for the AI to invoke.
+
+Even if other skills list the tool you need, you should list it also. Tools are not learned more than once; any subsequent skills that use the same tool do not cause it to be redeclared.
+
+### Implementing and binding tools
+
+If your new skill requires tools that do not exist yet, you should:
+
+1. Implement your new tool under `models/ai_assistance/tools/` extending the `BaseTool` class and implementing the `Tool` interface. Use the existing tools as guidance.
+2. Register the tool in the build system:
+   - Add the tool's source file to the `sources` list in `models/ai_assistance/BUILD.gn`.
+   - Import and register it inside `models/ai_assistance/tools/ToolRegistry.ts`.
+3. List the tool's name under the `allowed-tools` section of your skill's markdown frontmatter.

package/front_end/models/ai_assistance/skills/Skill.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 // This will become a union type as we add more skills (e.g. 'styling' | 'network').
-export type SkillName = 'styling'|'network'|'accessibility'|'performance';
+export type SkillName = 'styling'|'network'|'accessibility'|'performance'|'storage'|'sources';
 
 export interface Skill {
   name: SkillName;

package/front_end/models/ai_assistance/skills/SkillRegistry.ts

@@ -6,6 +6,8 @@ import {skill as accessibilitySkill} from './accessibility.skill.js';
 import {skill as networkSkill} from './network.skill.js';
 import {skill as performanceSkill} from './performance.skill.js';
 import type {Skill, SkillName} from './Skill.js';
+import {skill as sourcesSkill} from './sources.skill.js';
+import {skill as storageSkill} from './storage.skill.js';
 import {skill as stylingSkill} from './styling.skill.js';
 
 export const SKILLS: Record<SkillName, Skill> = {
@@ -13,4 +15,6 @@ export const SKILLS: Record<SkillName, Skill> = {
   network: networkSkill,
   accessibility: accessibilitySkill,
   performance: performanceSkill,
+  storage: storageSkill,
+  sources: sourcesSkill,
 };

package/front_end/models/ai_assistance/skills/performance.md

@@ -3,8 +3,16 @@ name: performance
 description: Web performance analysis, trace inspection, and trace recording.
 allowed-tools:
   - recordPerformanceTrace
+  - getTraceEventByKey
+  - selectTraceEventByKey
+  - getTraceMainThreadSummary
+  - getTraceNetworkSummary
 ---
 You are an expert web performance assistant integrated into Chrome DevTools.
 Your goal is to help users analyze, measure, and improve web page performance.
 
 Use `recordPerformanceTrace` to record a new performance trace when requested by the user or when live measurement is required.
+- Trace events in the provided insights or summaries may have an `eventKey`. Use `getTraceEventByKey` with this key to retrieve detailed event data for verification.
+- If the user asks to see, locate, or show a specific event, use `selectTraceEventByKey` to reveal and select it in the Flamechart.
+- Use `getTraceMainThreadSummary` to get a bottom-up activity summary of the main thread for a specific labeled period.
+- Use `getTraceNetworkSummary` to get a summary of network requests within a specific microsecond time range.

package/front_end/models/ai_assistance/skills/sources.md

@@ -0,0 +1,16 @@
+---
+name: sources
+description: Analyzing workspace sources, inspecting code files, reading script contents, and viewing files in the workspace.
+allowed-tools:
+  - listSources
+  - getSourceContent
+---
+You are the most advanced source code analysis and debugging assistant integrated into Chrome DevTools.
+Provide a comprehensive analysis of source files, focusing on areas crucial for a software engineer. Your analysis should include:
+* Briefly explain the purpose and architecture of the file or script.
+* Analyze code blocks to identify potential bugs, logic issues, or areas for optimization.
+* Walk through execution flow if requested, pointing to key lines or functions.
+
+# Considerations
+* Never leak sensitive user data or API keys found in source code files. Redact or generalize them in your analysis.
+* Provide clean code snippets and direct line references where helpful.