chrome-devtools-frontend 1.0.1566234 → 1.0.1567721

package/front_end/models/formatter/FormatterWorkerPool.ts

@@ -13,15 +13,18 @@ let formatterWorkerPoolInstance: FormatterWorkerPool|undefined;
 export class FormatterWorkerPool {
   private taskQueue: Task[];
   private workerTasks: Map<PlatformApi.HostRuntime.Worker, Task|null>;
+  private entrypointURL: string;
 
-  constructor() {
+  constructor(entrypointURL?: string) {
     this.taskQueue = [];
     this.workerTasks = new Map();
+    this.entrypointURL =
+        entrypointURL ?? import.meta.resolve('../../entrypoints/formatter_worker/formatter_worker-entrypoint.js');
   }
 
-  static instance(): FormatterWorkerPool {
-    if (!formatterWorkerPoolInstance) {
-      formatterWorkerPoolInstance = new FormatterWorkerPool();
+  static instance(opts?: {forceNew: true, entrypointURL: string}): FormatterWorkerPool {
+    if (!formatterWorkerPoolInstance || opts?.forceNew) {
+      formatterWorkerPoolInstance = new FormatterWorkerPool(opts?.entrypointURL);
     }
 
     return formatterWorkerPoolInstance;
@@ -44,8 +47,7 @@ export class FormatterWorkerPool {
   }
 
   private createWorker(): PlatformApi.HostRuntime.Worker {
-    const worker = Platform.HostRuntime.HOST_RUNTIME.createWorker(
-        new URL('../../entrypoints/formatter_worker/formatter_worker-entrypoint.js', import.meta.url).toString());
+    const worker = Platform.HostRuntime.HOST_RUNTIME.createWorker(this.entrypointURL);
     worker.onmessage = this.onWorkerMessage.bind(this, worker);
     worker.onerror = this.onWorkerError.bind(this, worker);
     return worker;

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -170,7 +170,7 @@ export const NativeFunctions = [
   {
     name: "set",
     signatures: [["key","value"]],
-    receivers: ["Map","WeakMap","CrashReportStorage"]
+    receivers: ["Map","WeakMap","CrashReportContext"]
   },
   {
     name: "set",
@@ -1493,7 +1493,7 @@ export const NativeFunctions = [
   {
     name: "item",
     signatures: [["index"]],
-    receivers: ["CSSRuleList","CSSStyleDeclaration","DOMRectList","DOMStringList","DOMTokenList","FileList","HTMLCollectionBase","HTMLCollectionOf","HTMLSelectElement","MediaList","MimeTypeArray","NamedNodeMap","NodeList","NodeListOf","Plugin","PluginArray","SpeechRecognitionResult","SpeechRecognitionResultList","StyleSheetList","TouchList","HTMLCollection","SpeechGrammarList"]
+    receivers: ["CSSRuleList","CSSStyleDeclaration","DOMRectList","DOMStringList","DOMTokenList","FileList","HTMLCollectionBase","HTMLCollectionOf","HTMLSelectElement","MediaList","MimeTypeArray","NamedNodeMap","NodeList","NodeListOf","Plugin","PluginArray","SpeechRecognitionResult","SpeechRecognitionResultList","StyleSheetList","TouchList","TimelineTriggerRangeList","HTMLCollection","SpeechGrammarList"]
   },
   {
     name: "item",
@@ -1575,7 +1575,7 @@ export const NativeFunctions = [
   {
     name: "delete",
     signatures: [["key"]],
-    receivers: ["Map","WeakMap"]
+    receivers: ["Map","WeakMap","CrashReportContext"]
   },
   {
     name: "delete",
@@ -1998,11 +1998,6 @@ export const NativeFunctions = [
     signatures: [["start","end"]],
     receivers: ["SourceBuffer"]
   },
-  {
-    name: "remove",
-    signatures: [["key"]],
-    receivers: ["CrashReportStorage"]
-  },
   {
     name: "remove",
     signatures: [["?options"]],
@@ -3863,7 +3858,7 @@ export const NativeFunctions = [
   {
     name: "initialize",
     signatures: [["length"]],
-    receivers: ["CrashReportStorage"]
+    receivers: ["CrashReportContext"]
   },
   {
     name: "initialize",

package/front_end/models/persistence/PersistenceImpl.ts

@@ -285,6 +285,14 @@ export class PersistenceImpl extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return bindings.get(uiSourceCode) || null;
   }
 
+  /**
+   * Returns whether the UISourceCode has editable content - either its project
+   * supports file content changes, or it has a persistence binding to a file system.
+   */
+  hasEditableContent(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
+    return uiSourceCode.project().canSetFileContent() || this.binding(uiSourceCode) !== null;
+  }
+
   subscribeForBindingEvent(uiSourceCode: Workspace.UISourceCode.UISourceCode, listener: () => void): void {
     this.#subscribedBindingEventListeners.set(uiSourceCode, listener);
   }

package/front_end/models/text_utils/TextUtils.snapshot.txt

@@ -0,0 +1,83 @@
+Title: TextUtils BalancedJSONTokenizer matches quotes
+Content:
+Parsing {"odd back slashes with text around":"tes\\\"t"}
+{"odd back slashes with text around":"tes\\\"t"}
+Parsing {"escaped double quotes":"\"test\""}
+{"escaped double quotes":"\"test\""}
+Parsing {"escaped back slash before double quote":"test\\"}
+{"escaped back slash before double quote":"test\\"}
+Parsing {"1":2}
+{"1":2}
+Parsing {"":""}
+{"":""}
+Parsing {"nested brackets":{}}
+{"nested brackets":{}}
+Parsing {"nested brackets with double quotes":{"":""}}
+{"nested brackets with double quotes":{"":""}}
+Parsing {"etc":{"\\":"\""}}
+{"etc":{"\\":"\""}}
+Parsing {"etc":{"\\\\":"\\"}}
+{"etc":{"\\\\":"\\"}}
+Parsing {"etc":{"\\\\\"":"\\\\\""}}
+{"etc":{"\\\\\"":"\\\\\""}}
+=== end content
+
+Title: TextUtils BalancedJSONTokenizer matches sequence using one shot
+Content:
+Parsing {"one":"one"}
+{"one":"one"}
+Parsing [{"one":"one"},{"two":"two"}]
+[{"one":"one"}
+Parsing [{"one":"one"},{"two":"two"},{"three":"three"}]
+[{"one":"one"}
+=== end content
+
+Title: TextUtils BalancedJSONTokenizer matches sequence using multiple
+Content:
+Parsing {"one":"one"}
+{"one":"one"}
+Parsing [{"one":"one"},{"two":"two"}]
+[{"one":"one"},{"two":"two"}
+Parsing [{"one":"one"},{"two":"two"},{"three":"three"}]
+[{"one":"one"},{"two":"two"},{"three":"three"}
+=== end content
+
+Title: TextUtils BalancedJSONTokenizer incremental writes
+Content:
+Running at once:
+[{"odd back slashes with text around":"tes\\\"t"},{"escaped double quotes":"\"test\""},{"escaped back slash before double quote":"test\\"},{"1":2},{"":""},{"nested brackets":{}},{"nested brackets with double quotes":{"":""}},{"etc":{"\\":"\""}},{"etc":{"\\\\":"\\"}},{"etc":{"\\\\\"":"\\\\\""}}
+Running by 3:
+[{"odd back slashes with text around":"tes\\\"t"}
+,{"escaped double quotes":"\"test\""}
+,{"escaped back slash before double quote":"test\\"}
+,{"1":2}
+,{"":""}
+,{"nested brackets":{}}
+,{"nested brackets with double quotes":{"":""}}
+,{"etc":{"\\":"\""}}
+,{"etc":{"\\\\":"\\"}}
+,{"etc":{"\\\\\"":"\\\\\""}}
+Running by 15:
+[{"odd back slashes with text around":"tes\\\"t"}
+,{"escaped double quotes":"\"test\""}
+,{"escaped back slash before double quote":"test\\"},{"1":2}
+,{"":""}
+,{"nested brackets":{}}
+,{"nested brackets with double quotes":{"":""}}
+,{"etc":{"\\":"\""}}
+,{"etc":{"\\\\":"\\"}}
+,{"etc":{"\\\\\"":"\\\\\""}}
+Running by 50:
+[{"odd back slashes with text around":"tes\\\"t"}
+,{"escaped double quotes":"\"test\""}
+,{"escaped back slash before double quote":"test\\"},{"1":2}
+,{"":""},{"nested brackets":{}}
+,{"nested brackets with double quotes":{"":""}},{"etc":{"\\":"\""}}
+,{"etc":{"\\\\":"\\"}},{"etc":{"\\\\\"":"\\\\\""}}
+=== end content
+
+Title: TextUtils BalancedJSONTokenizer garbage after object
+Content:
+Parsing [{a: 'b'}], {'x': {a: 'b'}}
+[{a: 'b'}
+=== end content

package/front_end/panels/ai_assistance/ai_assistance-meta.ts

@@ -148,7 +148,6 @@ UI.ActionRegistration.registerActionExtension({
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
   title: i18nLazyString(UIStrings.debugWithAi),
   configurableBindings: false,
-  featurePromotionId: 'ai-assistance',
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();

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

@@ -5,14 +5,17 @@
 import './CollapsibleAssistanceContentWidget.js';
 import './PerformanceAgentFlameChart.js';
 
+import * as Common from '../../../core/common/common.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as Logs from '../../../models/logs/logs.js';
 import * as NetworkTimeCalculator from '../../../models/network_time_calculator/network_time_calculator.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
+import * as NetworkForward from '../../network/forward/forward.js';
 import * as Network from '../../network/network.js';
 import * as Insights from '../../timeline/components/insights/insights.js';
+import * as Timeline from '../../timeline/timeline.js';
 
 import artifactsViewerStyles from './artifactsViewer.css.js';
 import type * as PerformanceAgentFlameChart from './PerformanceAgentFlameChart.js';
@@ -39,7 +42,14 @@ export function renderArtifact(
       }
 
       return html`
-        <devtools-collapsible-assistance-content-widget .data=${{headerText: `Insight - ${componentName}`}}>
+        <devtools-collapsible-assistance-content-widget .data=${{
+          headerText: `Insight - ${componentName}`,
+          onReveal: () => {
+            void UI.InspectorView.InspectorView.instance().showPanel('timeline').then(() => {
+              Timeline.TimelinePanel.TimelinePanel.instance().revealInsight(insightModel);
+            });
+          },
+        }}>
           ${insightRenderer.renderInsightToWidgetElement(parsedTrace, insightSet, insightModel, componentName, {
             selected: true,
             isAIAssistanceContext: true,
@@ -59,8 +69,16 @@ export function renderArtifact(
         }
         return html`
         <devtools-collapsible-assistance-content-widget
-          .data=${{headerText: `Network Request: ${
-              sdkRequest.url().length > 80 ? sdkRequest.url().slice(0, 80) + '...' : sdkRequest.url()}`}}>
+          .data=${{
+            headerText: `Network Request: ${
+              sdkRequest.url().length > 80 ? sdkRequest.url().slice(0, 80) + '...' : sdkRequest.url()}`,
+            onReveal: () => {
+              void UI.InspectorView.InspectorView.instance().showPanel('network').then(() => {
+                void Common.Revealer.reveal(NetworkForward.UIRequestLocation.UIRequestLocation.tab(
+                    sdkRequest, NetworkForward.UIRequestLocation.UIRequestTabs.TIMING));
+              });
+            },
+          }}>
           <devtools-widget class="actions" .widgetConfig=${UI.Widget.widgetConfig(Network.RequestTimingView.RequestTimingView, {
             request: sdkRequest,
             calculator,
@@ -71,7 +89,13 @@ export function renderArtifact(
     }
     case 'flamechart': {
       return html`
-        <devtools-collapsible-assistance-content-widget .data=${{headerText: `Flamechart`}}>
+        <devtools-collapsible-assistance-content-widget .data=${{
+          headerText: `Flamechart`,
+          onReveal: () => {
+            // eslint-disable-next-line no-console
+            console.log('Reveal flamechart', artifact.start, artifact.end);
+          },
+        }}>
           <devtools-performance-agent-flame-chart .data=${{
             parsedTrace,
             start: artifact.start,

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

@@ -208,7 +208,6 @@ export class ChatView extends HTMLElement {
   };
 
   #render(): void {
-
     const inputWidgetClasses = Lit.Directives.classMap({
       'chat-input-widget': true,
       sticky: !this.#props.isReadOnly,
@@ -219,22 +218,58 @@ export class ChatView extends HTMLElement {
       <style>${chatViewStyles}</style>
       <div class="chat-ui">
         <main @scroll=${this.#handleScroll} ${ref(this.#mainElementRef)}>
-          ${renderMainContents({
-            messages: this.#props.messages,
-            isLoading: this.#props.isLoading,
-            isReadOnly: this.#props.isReadOnly,
-            canShowFeedbackForm: this.#props.canShowFeedbackForm,
-            isTextInputDisabled: this.#props.isTextInputDisabled,
-            suggestions: this.#props.emptyStateSuggestions,
-            userInfo: this.#props.userInfo,
-            markdownRenderer: this.#props.markdownRenderer,
-            changeSummary: this.#props.changeSummary,
-            changeManager: this.#props.changeManager,
-            onSuggestionClick: this.#handleSuggestionClick,
-            onFeedbackSubmit: this.#props.onFeedbackSubmit,
-            onMessageContainerRef: this.#handleMessageContainerRef,
-            onCopyResponseClick: this.#props.onCopyResponseClick,
-          })}
+          ${this.#props.messages.length > 0 ? html`
+            <div class="messages-container" ${ref(this.#handleMessageContainerRef)}>
+              ${repeat(this.#props.messages, message =>
+                html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(ChatMessage, {
+                  message,
+                  isLoading: this.#props.isLoading,
+                  isReadOnly: this.#props.isReadOnly,
+                  canShowFeedbackForm: this.#props.canShowFeedbackForm,
+                  userInfo: this.#props.userInfo,
+                  markdownRenderer: this.#props.markdownRenderer,
+                  isLastMessage: this.#props.messages.at(-1) === message,
+                  onSuggestionClick: this.#handleSuggestionClick,
+                  onFeedbackSubmit: this.#props.onFeedbackSubmit,
+                  onCopyResponseClick: this.#props.onCopyResponseClick,
+                })}></devtools-widget>`
+              )}
+              ${this.#props.isLoading ? Lit.nothing : html`<devtools-widget
+                .widgetConfig=${UI.Widget.widgetConfig(PatchWidget, {
+                  changeSummary: this.#props.changeSummary ?? '',
+                  changeManager: this.#props.changeManager,
+                })}
+              ></devtools-widget>`}
+            </div>
+          ` : html`
+            <div class="empty-state-container">
+              <div class="header">
+                <div class="icon">
+                  <devtools-icon
+                    name="smart-assistant"
+                  ></devtools-icon>
+                </div>
+                <h1>${lockedString(UIStringsNotTranslate.emptyStateText)}</h1>
+              </div>
+              <div class="empty-state-content">
+                ${this.#props.emptyStateSuggestions.map(({title, jslogContext}) => {
+                  return html`<devtools-button
+                    class="suggestion"
+                    @click=${() => this.#handleSuggestionClick(title)}
+                    .data=${
+                      {
+                        variant: Buttons.Button.Variant.OUTLINED,
+                        size: Buttons.Button.Size.REGULAR,
+                        title,
+                        jslogContext: jslogContext ?? 'suggestion',
+                        disabled: this.#props.isTextInputDisabled,
+                      } as Buttons.Button.ButtonData
+                    }
+                  >${title}</devtools-button>`;
+                })}
+              </div>
+            </div>
+          `}
           <devtools-widget class=${inputWidgetClasses} .widgetConfig=${UI.Widget.widgetConfig(ChatInput, {
             isLoading: this.#props.isLoading,
             blockedByCrossOrigin: this.#props.blockedByCrossOrigin,
@@ -266,158 +301,6 @@ export class ChatView extends HTMLElement {
   }
 }
 
-function renderMainContents({
-  messages,
-  isLoading,
-  isReadOnly,
-  canShowFeedbackForm,
-  isTextInputDisabled,
-  suggestions,
-  userInfo,
-  markdownRenderer,
-  changeSummary,
-  changeManager,
-  onSuggestionClick,
-  onFeedbackSubmit,
-  onCopyResponseClick,
-  onMessageContainerRef,
-}: {
-  messages: Message[],
-  isLoading: boolean,
-  isReadOnly: boolean,
-  canShowFeedbackForm: boolean,
-  isTextInputDisabled: boolean,
-  suggestions: AiAssistanceModel.AiAgent.ConversationSuggestion[],
-  userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>,
-  markdownRenderer: MarkdownLitRenderer,
-  changeManager: AiAssistanceModel.ChangeManager.ChangeManager,
-  onSuggestionClick: (suggestion: string) => void,
-  onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void,
-  onCopyResponseClick: (message: ModelChatMessage) => void,
-  onMessageContainerRef: (el: Element|undefined) => void,
-  changeSummary?: string,
-}): Lit.LitTemplate {
-  if (messages.length > 0) {
-    return renderMessages({
-      messages,
-      isLoading,
-      isReadOnly,
-      canShowFeedbackForm,
-      userInfo,
-      markdownRenderer,
-      changeSummary,
-      changeManager,
-      onSuggestionClick,
-      onFeedbackSubmit,
-      onMessageContainerRef,
-      onCopyResponseClick
-    });
-  }
-
-  return renderEmptyState({isTextInputDisabled, suggestions, onSuggestionClick});
-}
-
-function renderMessages({
-  messages,
-  isLoading,
-  isReadOnly,
-  canShowFeedbackForm,
-  userInfo,
-  markdownRenderer,
-  changeSummary,
-  changeManager,
-  onSuggestionClick,
-  onFeedbackSubmit,
-  onCopyResponseClick,
-  onMessageContainerRef,
-}: {
-  messages: Message[],
-  isLoading: boolean,
-  isReadOnly: boolean,
-  canShowFeedbackForm: boolean,
-  userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>,
-  markdownRenderer: MarkdownLitRenderer,
-  onSuggestionClick: (suggestion: string) => void,
-  onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void,
-  onCopyResponseClick: (message: ModelChatMessage) => void,
-  onMessageContainerRef: (el: Element|undefined) => void,
-  changeSummary?: string,
-  changeManager?: AiAssistanceModel.ChangeManager.ChangeManager,
-}): Lit.TemplateResult {
-  function renderPatchWidget(): Lit.LitTemplate {
-    if (isLoading) {
-      return Lit.nothing;
-    }
-
-    // clang-format off
-    return html`<devtools-widget
-      .widgetConfig=${UI.Widget.widgetConfig(PatchWidget, {
-        changeSummary: changeSummary ?? '',
-        changeManager,
-      })}
-    ></devtools-widget>`;
-    // clang-format on
-  }
-
-  // clang-format off
-  return html`
-    <div class="messages-container" ${ref(onMessageContainerRef)}>
-      ${repeat(messages, message =>
-        html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(ChatMessage, {
-          message,
-          isLoading,
-          isReadOnly,
-          canShowFeedbackForm,
-          userInfo,
-          markdownRenderer,
-          isLastMessage: messages.at(-1) === message,
-          onSuggestionClick,
-          onFeedbackSubmit,
-          onCopyResponseClick,
-        })}></devtools-widget>`
-      )}
-      ${renderPatchWidget()}
-    </div>
-  `;
-  // clang-format on
-}
-
-function renderEmptyState({isTextInputDisabled, suggestions, onSuggestionClick}: {
-  isTextInputDisabled: boolean,
-  suggestions: AiAssistanceModel.AiAgent.ConversationSuggestion[],
-  onSuggestionClick: (suggestion: string) => void,
-}): Lit.TemplateResult {
-  // clang-format off
-  return html`<div class="empty-state-container">
-    <div class="header">
-      <div class="icon">
-        <devtools-icon
-          name="smart-assistant"
-        ></devtools-icon>
-      </div>
-      <h1>${lockedString(UIStringsNotTranslate.emptyStateText)}</h1>
-    </div>
-    <div class="empty-state-content">
-      ${suggestions.map(({title, jslogContext}) => {
-        return html`<devtools-button
-          class="suggestion"
-          @click=${() => onSuggestionClick(title)}
-          .data=${
-            {
-              variant: Buttons.Button.Variant.OUTLINED,
-              size: Buttons.Button.Size.REGULAR,
-              title,
-              jslogContext: jslogContext ?? 'suggestion',
-              disabled: isTextInputDisabled,
-            } as Buttons.Button.ButtonData
-          }
-        >${title}</devtools-button>`;
-      })}
-    </div>
-  </div>`;
-  // clang-format on
-}
-
 declare global {
   interface HTMLElementTagNameMap {
     'devtools-ai-chat-view': ChatView;

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

@@ -12,15 +12,18 @@ const {render, html} = Lit;
 
 export interface CollapsibleAssistanceContentWidgetData {
   headerText: string;
+  onReveal?: () => void;
 }
 
 export class CollapsibleAssistanceContentWidget extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #isCollapsed = false;
   #headerText = 'Details';
+  #onReveal?: () => void;
 
   set data(data: CollapsibleAssistanceContentWidgetData) {
     this.#headerText = data.headerText;
+    this.#onReveal = data.onReveal;
     this.#render();
   }
 
@@ -43,14 +46,30 @@ export class CollapsibleAssistanceContentWidget extends HTMLElement {
           this.#toggleCollapse();
         }}>
           ${this.#headerText}
-          <devtools-button .data=${{
-            variant: Buttons.Button.Variant.ICON,
-            iconName: this.#isCollapsed ? 'triangle-right' : 'triangle-down',
-            color: 'var(--sys-color-on-surface)',
-            width: '14px',
-            height: '14px',
-            } as Buttons.Button.ButtonData}
-          ></devtools-button>
+          <div>
+            <devtools-button .data=${{
+              variant: Buttons.Button.Variant.ICON,
+              iconName: 'select-element',
+              color: 'var(--sys-color-on-surface)',
+              width: '14px',
+              height: '14px',
+              title: 'reveal',
+              } as Buttons.Button.ButtonData}
+              @click=${(event: Event) => {
+                event.stopPropagation();
+                this.#onReveal?.();
+              }}
+            ></devtools-button>
+            <devtools-button .data=${{
+              variant: Buttons.Button.Variant.ICON,
+              iconName: this.#isCollapsed ? 'triangle-right' : 'triangle-down',
+              color: 'var(--sys-color-on-surface)',
+              width: '14px',
+              height: '14px',
+              title: 'expand',
+              } as Buttons.Button.ButtonData}
+            ></devtools-button>
+          </div>
         </summary>
         <div class="content">
           <slot></slot>

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

@@ -2,10 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './CollapsibleAssistanceContentWidget.js';
 import '../../../models/trace/insights/insights.js';
 import '../../../panels/timeline/components/components.js';
 import './PerformanceAgentFlameChart.js';
+import './CollapsibleAssistanceContentWidget.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as SDK from '../../../core/sdk/sdk.js';
@@ -19,9 +19,11 @@ import type * as Marked from '../../../third_party/marked/marked.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as PanelsCommon from '../../common/common.js';
+import * as NetworkForward from '../../network/forward/forward.js';
 import * as Network from '../../network/network.js';
 import * as TimelineComponents from '../../timeline/components/components.js';
 import * as Insights from '../../timeline/components/insights/insights.js';
+import * as Timeline from '../../timeline/timeline.js';
 
 import {MarkdownRendererWithCodeBlock} from './MarkdownRendererWithCodeBlock.js';
 import type * as PerformanceAgentFlameChart from './PerformanceAgentFlameChart.js';
@@ -86,7 +88,11 @@ export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBl
         }
 
         return html`<devtools-collapsible-assistance-content-widget  .data=${{
-          headerText: `Insight - ${componentName}`
+          headerText: `Insight - ${componentName}`, onReveal: () => {
+            void UI.InspectorView.InspectorView.instance().showPanel('timeline').then(() => {
+              Timeline.TimelinePanel.TimelinePanel.instance().revealInsight(insightM);
+            });
+          },
         }
         }>
         ${this.#insightRenderer.renderInsightToWidgetElement(this.parsedTrace, insightSet, insightM, componentName, {
@@ -115,7 +121,13 @@ export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBl
             return html`<devtools-collapsible-assistance-content-widget
             .data=${{
               headerText: `Network Request: ${
-                  networkRequest.url().length > 80 ? networkRequest.url().slice(0, 80) + '...' : networkRequest.url()}`
+                  networkRequest.url().length > 80 ? networkRequest.url().slice(0, 80) + '...' : networkRequest.url()}`,
+                  onReveal: () => {
+                    void UI.InspectorView.InspectorView.instance().showPanel('network').then(() => {
+                      void Common.Revealer.reveal(NetworkForward.UIRequestLocation.UIRequestLocation.tab(
+                          networkRequest, NetworkForward.UIRequestLocation.UIRequestTabs.TIMING));
+                    });
+                  },
             }
             }>
             <devtools-widget class="actions" .widgetConfig=${
@@ -142,7 +154,10 @@ export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBl
 
         return html`<devtools-collapsible-assistance-content-widget
         .data=${{
-          headerText: 'Network Request'
+          headerText: 'Network Request', onReveal: () => {
+            // eslint-disable-next-line no-console
+            console.log('Reveal network request', value);
+          },
         }
         }>
           ${networkTooltip}

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -773,6 +773,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.cookieListTreeElement.removeChildren();
     this.interestGroupTreeElement.clearEvents();
     this.deviceBoundSessionsModel?.clearVisibleSites();
+    this.deviceBoundSessionsModel?.clearEvents();
   }
 
   private frameNavigated(event: Common.EventTarget.EventTargetEvent<SDK.ResourceTreeModel.ResourceTreeFrame>): void {