chrome-devtools-frontend 1.0.1555430 → 1.0.1558690

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -14,6 +14,7 @@ import * as Protocol from '../../generated/protocol.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as Annotations from '../../models/annotations/annotations.js';
 import * as Badges from '../../models/badges/badges.js';
+import * as GreenDev from '../../models/greendev/greendev.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
@@ -225,10 +226,10 @@ function selectedElementFilter(maybeNode: SDK.DOMModel.DOMNode|null): SDK.DOMMod
   return null;
 }
 
-async function getEmptyStateSuggestions(
-    context: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null,
-    conversation?: AiAssistanceModel.AiConversation.AiConversation):
+async function getEmptyStateSuggestions(conversation?: AiAssistanceModel.AiConversation.AiConversation):
     Promise<AiAssistanceModel.AiAgent.ConversationSuggestion[]> {
+  const context = conversation?.selectedContext;
+
   if (context) {
     const specialSuggestions = await context.getSuggestions();
 
@@ -271,9 +272,10 @@ async function getEmptyStateSuggestions(
   }
 }
 
-function getMarkdownRenderer(
-    context: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null,
-    conversation?: AiAssistanceModel.AiConversation.AiConversation): MarkdownRendererWithCodeBlock {
+function getMarkdownRenderer(conversation?: AiAssistanceModel.AiConversation.AiConversation):
+    MarkdownRendererWithCodeBlock {
+  const context = conversation?.selectedContext;
+
   if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
     if (!context.external) {
       const focus = context.getItem();
@@ -390,7 +392,7 @@ function toolbarView(input: ToolbarViewInput): Lit.LitTemplate {
           .variant=${Buttons.Button.Variant.TOOLBAR}
           @click=${input.onSettingsClick}></devtools-button>
         <!-- If the green experiment is enabled, render the artifacts sidebar toggle button -->
-        ${Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled ? html`<devtools-button
+        ${GreenDev.Prototypes.instance().isEnabled('artifactViewer') ? html`<devtools-button
           title=${i18nString(UIStrings.settings)}
           aria-label=${i18nString(UIStrings.settings)}
           .iconName=${input.artifactsSidebarVisible ? 'left-panel-open' : 'left-panel-close'}
@@ -407,7 +409,7 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
   function renderState(): Lit.TemplateResult {
     switch (input.state) {
       case ViewState.CHAT_VIEW: {
-      const aiChatView = html`
+      return html`
         <devtools-ai-chat-view
           .props=${input.props}
           ${Lit.Directives.ref((el: Element | undefined) => {
@@ -418,29 +420,6 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
             output.chatView = el;
           })}
         ></devtools-ai-chat-view>`;
-        // If the green experiment is enabled, render the chat view inside
-        // a split view to also have an artifacts viewer sidebar.
-        if(Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled) {
-            return html`
-            <devtools-split-view
-            direction="column"
-            sidebar-visibility=${input.props.isArtifactsSidebarOpen ? 'visible' : 'hidden'}
-            sidebar-position="second"
-            style="width: 100%;"
-          >
-            <div slot="main">
-              ${aiChatView}
-            </div>
-            <div slot="sidebar">
-              <devtools-widget
-              class="fill-panel"
-              .widgetConfig=${UI.Widget.widgetConfig(ArtifactsViewer)}
-              ></devtools-widget>
-            </div>
-          </devtools-split-view>`;
-        }
-
-        return aiChatView;
       }
       case ViewState.EXPLORE_VIEW:
         return html`<devtools-widget
@@ -456,13 +435,40 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
     }
   }
 
-  Lit.render(
-    html`
-      ${toolbarView(input)}
-      <div class="ai-assistance-view-container">${renderState()}</div>
-    `,
-    target
-  );
+  const panelWithToolbar = html`
+    ${toolbarView(input)}
+    <div class="ai-assistance-view-container">${renderState()}</div>`;
+
+  // If the green experiment is enabled, render the chat view inside
+  // a split view to also have an artifacts viewer sidebar.
+  if(GreenDev.Prototypes.instance().isEnabled('artifactViewer')) {
+    Lit.render(
+      html`
+        <devtools-split-view
+          direction="column"
+          sidebar-visibility=${input.artifactsSidebarVisible ? 'visible' : 'hidden'}
+          sidebar-position="second"
+          sidebar-initial-size="520"
+          style="width: 100%;">
+          <div slot="main" class="assistance-view-wrapper-with-sidebar">
+            ${panelWithToolbar}
+          </div>
+          <div slot="sidebar">
+            <div class="artifacts-toolbar-container" role="toolbar">
+              <div>Artifacts Viewer</div>
+            </div>
+            <devtools-widget
+              class="fill-panel"
+              .widgetConfig=${UI.Widget.widgetConfig(ArtifactsViewer)}
+            ></devtools-widget>
+          </div>
+        </devtools-split-view>
+      `,
+      target
+    );
+  } else {
+    Lit.render(panelWithToolbar, target);
+  }
   // clang-format on
 }
 
@@ -523,12 +529,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   // Whether the UI should show loading or not.
   #isLoading = false;
-  // Selected conversation context. The reason we keep this as a
-  // state field rather than using `#getConversationContext` is that,
-  // there is a case where the context differs from the selectedElement (or other selected context type).
-  // Specifically, it allows restoring the previous context when a new selection is cross-origin.
-  // See `#onContextSelectionChanged` for details.
-  #selectedContext: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null = null;
   // Stores the availability status of the `AidaClient` and the reason for unavailability, if any.
   #aidaAvailability: Host.AidaClient.AidaAccessPreconditions;
   // Info of the currently logged in user.
@@ -565,6 +565,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
     AiAssistanceModel.AiHistoryStorage.AiHistoryStorage.instance().addEventListener(
         AiAssistanceModel.AiHistoryStorage.Events.HISTORY_DELETED, this.#onHistoryDeleted, this);
+    if (GreenDev.Prototypes.instance().isEnabled('artifactViewer')) {
+      AiAssistanceModel.ArtifactsManager.ArtifactsManager.instance().addEventListener(
+          AiAssistanceModel.ArtifactsManager.ArtifactAddedEvent.eventName, this.#onArtifactAdded.bind(this));
+    }
   }
 
   async #getPanelViewInput(): Promise<PanelViewInput> {
@@ -581,16 +585,16 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
 
     if (this.#conversation) {
-      const emptyStateSuggestions = await getEmptyStateSuggestions(this.#selectedContext, this.#conversation);
-      const markdownRenderer = getMarkdownRenderer(this.#selectedContext, this.#conversation);
+      const emptyStateSuggestions = await getEmptyStateSuggestions(this.#conversation);
+      const markdownRenderer = getMarkdownRenderer(this.#conversation);
       return {
         state: ViewState.CHAT_VIEW,
         props: {
           additionalFloatyContext: this.#additionalContextItemsFromFloaty,
-          blockedByCrossOrigin: this.#blockedByCrossOrigin,
+          blockedByCrossOrigin: this.#conversation.isBlockedByOrigin,
           isLoading: this.#isLoading,
           messages: this.#messages,
-          selectedContext: this.#selectedContext,
+          selectedContext: this.#conversation.selectedContext ?? null,
           conversationType: this.#conversation.type,
           isReadOnly: this.#conversation.isReadOnly ?? false,
           changeSummary: this.#getChangeSummary(),
@@ -762,6 +766,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       this.#conversation = conversation;
     }
 
+    this.#conversation?.setContext(this.#getConversationContext(this.#conversation));
+
     this.requestUpdate();
   }
 
@@ -814,12 +820,19 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistancePanelOpened);
 
-    if (Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled) {
+    if (GreenDev.Prototypes.instance().isEnabled('inDevToolsFloaty')) {
       UI.Context.Context.instance().addFlavorChangeListener(UI.Floaty.FloatyFlavor, this.#bindFloatyListener, this);
       this.#bindFloatyListener();
     }
   }
 
+  #onArtifactAdded(): void {
+    if (AiAssistanceModel.ArtifactsManager.ArtifactsManager.instance().artifacts.length > 0) {
+      this.#isArtifactsSidebarOpen = true;
+      this.requestUpdate();
+    }
+  }
+
   override willHide(): void {
     super.willHide();
     this.#aiAssistanceEnabledSetting?.removeChangeListener(this.requestUpdate, this);
@@ -999,13 +1012,15 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #isTextInputDisabled(): boolean {
     // If sending a new message is blocked by cross origin context
     // the text input is disabled.
-    if (this.#blockedByCrossOrigin) {
+    if (this.#conversation && this.#conversation.isBlockedByOrigin) {
       return true;
     }
 
-    // If there is no current agent if there is no selected context
-    // the text input is disabled.
-    if (!this.#conversation || !this.#selectedContext) {
+    if (!this.#conversation) {
+      return true;
+    }
+
+    if (!this.#conversation.selectedContext) {
       return true;
     }
 
@@ -1030,24 +1045,27 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return i18nString(UIStrings.followTheSteps);
     }
 
-    if (this.#blockedByCrossOrigin) {
+    if (this.#conversation && this.#conversation.isBlockedByOrigin) {
       return lockedString(UIStringsNotTranslate.crossOriginError);
     }
 
     switch (this.#conversation.type) {
       case AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING:
-        return this.#selectedContext ? lockedString(UIStringsNotTranslate.inputPlaceholderForStyling) :
-                                       lockedString(UIStringsNotTranslate.inputPlaceholderForStylingNoContext);
+        return this.#conversation.selectedContext ?
+            lockedString(UIStringsNotTranslate.inputPlaceholderForStyling) :
+            lockedString(UIStringsNotTranslate.inputPlaceholderForStylingNoContext);
       case AiAssistanceModel.AiHistoryStorage.ConversationType.FILE:
-        return this.#selectedContext ? lockedString(UIStringsNotTranslate.inputPlaceholderForFile) :
-                                       lockedString(UIStringsNotTranslate.inputPlaceholderForFileNoContext);
+        return this.#conversation.selectedContext ?
+            lockedString(UIStringsNotTranslate.inputPlaceholderForFile) :
+            lockedString(UIStringsNotTranslate.inputPlaceholderForFileNoContext);
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NETWORK:
-        return this.#selectedContext ? lockedString(UIStringsNotTranslate.inputPlaceholderForNetwork) :
-                                       lockedString(UIStringsNotTranslate.inputPlaceholderForNetworkNoContext);
+        return this.#conversation.selectedContext ?
+            lockedString(UIStringsNotTranslate.inputPlaceholderForNetwork) :
+            lockedString(UIStringsNotTranslate.inputPlaceholderForNetworkNoContext);
       case AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE: {
         const perfPanel = UI.Context.Context.instance().flavor(TimelinePanel.TimelinePanel.TimelinePanel);
         if (perfPanel?.hasActiveTrace()) {
-          return this.#selectedContext ?
+          return this.#conversation.selectedContext ?
               lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceTrace) :
               lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceTraceNoContext);
         }
@@ -1107,7 +1125,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   }
 
   #handleContextClick(): void|Promise<void> {
-    const context = this.#selectedContext;
+    if (!this.#conversation) {
+      return;
+    }
+
+    const context = this.#conversation.selectedContext;
     if (context instanceof AiAssistanceModel.NetworkAgent.RequestContext) {
       const requestLocation = NetworkForward.UIRequestLocation.UIRequestLocation.tab(
           context.getItem(), NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT);
@@ -1205,7 +1227,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       this.#imageInput = undefined;
       this.#isTextInputEmpty = true;
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceQuerySubmitted);
-      if (this.#blockedByCrossOrigin) {
+      if (this.#conversation && this.#conversation.isBlockedByOrigin) {
         this.#handleNewChatRequest();
       }
       await this.#startConversation(predefinedPrompt);
@@ -1399,41 +1421,21 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#runAbortController = new AbortController();
   }
 
-  // Indicates whether the new conversation context is blocked due to cross-origin restrictions.
-  // This happens when the conversation's context has a different
-  // origin than the selected context.
-  get #blockedByCrossOrigin(): boolean {
-    if (!this.#conversation) {
-      return false;
-    }
-    this.#selectedContext = this.#getConversationContext(this.#conversation);
-    if (!this.#selectedContext) {
-      return false;
-    }
-    return !this.#selectedContext.isOriginAllowed(this.#conversation.origin);
-  }
-
   #getConversationContext(conversation?: AiAssistanceModel.AiConversation.AiConversation):
       AiAssistanceModel.AiAgent.ConversationContext<unknown>|null {
     if (!conversation) {
       return null;
     }
-    let context: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null;
     switch (conversation.type) {
       case AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING:
-        context = this.#selectedElement;
-        break;
+        return this.#selectedElement;
       case AiAssistanceModel.AiHistoryStorage.ConversationType.FILE:
-        context = this.#selectedFile;
-        break;
+        return this.#selectedFile;
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NETWORK:
-        context = this.#selectedRequest;
-        break;
+        return this.#selectedRequest;
       case AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE:
-        context = this.#selectedPerformanceTrace;
-        break;
+        return this.#selectedPerformanceTrace;
     }
-    return context;
   }
 
   async #startConversation(
@@ -1448,8 +1450,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#cancel();
     const signal = this.#runAbortController.signal;
     const context = this.#getConversationContext(this.#conversation);
+    this.#conversation.setContext(context);
+
     // If a different context is provided, it must be from the same origin.
-    if (context && !context.isOriginAllowed(this.#conversation.origin)) {
+    if (this.#conversation.isBlockedByOrigin) {
       // This error should not be reached. If it happens, some
       // invariants do not hold anymore.
       throw new Error('cross-origin context data should not be included');
@@ -1468,12 +1472,13 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
     await this.#doConversation(
         this.#conversation.run(
-            text, {
+            text,
+            {
               signal,
-              selected: context,
               extraContext: this.#additionalContextItemsFromFloaty,
+              multimodalInput,
             },
-            multimodalInput),
+            ),
     );
   }
 

package/front_end/panels/ai_assistance/aiAssistancePanel.css

@@ -13,6 +13,22 @@
   justify-content: space-between;
 }
 
+.artifacts-toolbar-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 27px;
+  padding: 5px;
+  border-bottom: 1px solid var(--sys-color-divider);
+}
+
+.assistance-view-wrapper-with-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
 .ai-assistance-view-container {
   display: flex;
   flex-direction: column;

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

@@ -2,19 +2,92 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './CollapsibleAssistanceContentWidget.js';
+import './PerformanceAgentFlameChart.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 Network from '../../network/network.js';
+import * as Insights from '../../timeline/components/insights/insights.js';
 
 import artifactsViewerStyles from './artifactsViewer.css.js';
+import type * as PerformanceAgentFlameChart from './PerformanceAgentFlameChart.js';
 
 const {html, render} = Lit;
 
 export interface ViewInput {
-  artifacts: [];
+  artifacts: AiAssistanceModel.ArtifactsManager.Artifact[];
+  parsedTrace: Trace.TraceModel.ParsedTrace;
+}
+
+export function renderArtifact(
+    artifact: AiAssistanceModel.ArtifactsManager.Artifact, parsedTrace: Trace.TraceModel.ParsedTrace): Lit.LitTemplate {
+  switch (artifact.type) {
+      // clang-format off
+    case 'insight': {
+      const insightRenderer = new Insights.InsightRenderer.InsightRenderer();
+      const componentName = artifact.insightType;
+      const insightSet = parsedTrace.insights?.values().next().value;
+      const insightModel = insightSet?.model[componentName as Trace.Insights.Types.InsightKeys];
+
+      if (!insightModel) {
+        return Lit.nothing;
+      }
+
+      return html`
+        <devtools-collapsible-assistance-content-widget .data=${{headerText: `Insight - ${componentName}`}}>
+          ${insightRenderer.renderInsightToWidgetElement(parsedTrace, insightSet, insightModel, componentName, {
+            selected: true,
+            isAIAssistanceContext: true,
+          })}
+        </devtools-collapsible-assistance-content-widget>`;
+    }
+    case 'network-request': {
+      const networkRequest = artifact.request;
+      if ('args' in networkRequest && Trace.Types.Events.isSyntheticNetworkRequest(networkRequest)) {
+        const calculator = new NetworkTimeCalculator.NetworkTimeCalculator(true);
+        const sdkRequest = Logs.NetworkLog.NetworkLog.instance()
+                               .requestsForId(networkRequest.args.data.requestId)
+                               .find(r => r.url() === networkRequest.args.data.url) ??
+            null;
+        if (!sdkRequest) {
+          return Lit.nothing;
+        }
+        return html`
+        <devtools-collapsible-assistance-content-widget
+          .data=${{headerText: `Network Request: ${
+              sdkRequest.url().length > 80 ? sdkRequest.url().slice(0, 80) + '...' : sdkRequest.url()}`}}>
+          <devtools-widget class="actions" .widgetConfig=${UI.Widget.widgetConfig(Network.RequestTimingView.RequestTimingView, {
+            request: sdkRequest,
+            calculator,
+          })}></devtools-widget>
+        </devtools-collapsible-assistance-content-widget>`;
+      }
+      return Lit.nothing;
+    }
+    case 'flamechart': {
+      return html`
+        <devtools-collapsible-assistance-content-widget .data=${{headerText: `Flamechart`}}>
+          <devtools-performance-agent-flame-chart .data=${{
+            parsedTrace,
+            start: artifact.start,
+            end: artifact.end,
+          } as PerformanceAgentFlameChart.PerformanceAgentFlameChartData}>
+          </devtools-performance-agent-flame-chart>
+        </devtools-collapsible-assistance-content-widget>`;
+    }
+    default:
+      return Lit.nothing;
+      // clang-format on
+  }
 }
 
 export const DEFAULT_VIEW = (
-    _input: ViewInput,
+    input: ViewInput,
     _output: Record<string, unknown>,
     target: HTMLElement,
     ): void => {
@@ -22,8 +95,8 @@ export const DEFAULT_VIEW = (
   render(
     html`
       <style>${artifactsViewerStyles}</style>
-      <div>
-        Artifacts Viewer
+      <div class="artifacts-viewer">
+        ${input.artifacts.map(artifact => renderArtifact(artifact, input.parsedTrace))}
       </div>
     `,
     target
@@ -35,20 +108,49 @@ export type View = typeof DEFAULT_VIEW;
 
 export class ArtifactsViewer extends UI.Widget.Widget {
   #view: View;
+  #parsedTrace: Trace.TraceModel.ParsedTrace|null;
   constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
+    this.#parsedTrace = null;
   }
 
   override wasShown(): void {
     super.wasShown();
-    void this.requestUpdate();
+    AiAssistanceModel.ArtifactsManager.ArtifactsManager.instance().addEventListener(
+        AiAssistanceModel.ArtifactsManager.ArtifactAddedEvent.eventName,
+        () => {
+          if (this.#parsedTrace) {
+            this.performUpdate();
+          }
+        },
+    );
+
+    UI.Context.Context.instance().addFlavorChangeListener(
+        AiAssistanceModel.AIContext.AgentFocus,
+        ({data}) => {
+          this.#parsedTrace = data.parsedTrace;
+          if (this.#parsedTrace) {
+            this.performUpdate();
+          }
+        },
+    );
+
+    const focus = UI.Context.Context.instance().flavor(AiAssistanceModel.AIContext.AgentFocus);
+    if (focus) {
+      this.#parsedTrace = focus.parsedTrace;
+      this.performUpdate();
+    }
   }
 
-  override performUpdate(): Promise<void>|void {
+  override performUpdate(): void {
+    if (!this.#parsedTrace) {
+      return;
+    }
     this.#view(
         {
-          artifacts: [],
+          artifacts: AiAssistanceModel.ArtifactsManager.ArtifactsManager.instance().artifacts,
+          parsedTrace: this.#parsedTrace,
         },
         {},
         this.contentElement,

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

@@ -9,9 +9,9 @@ import '../../../ui/components/spinners/spinners.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
-import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
+import * as GreenDev from '../../../models/greendev/greendev.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
 import * as PanelsCommon from '../../../panels/common/common.js';
@@ -1472,7 +1472,7 @@ function renderChatInput({
 }
 
 function renderFloatyExtraContext(contexts: UI.Floaty.FloatyContextSelection[]): Lit.LitTemplate {
-  if (!Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled) {
+  if (!GreenDev.Prototypes.instance().isEnabled('inDevToolsFloaty')) {
     return Lit.nothing;
   }
 

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

@@ -16,7 +16,7 @@ export interface CollapsibleAssistanceContentWidgetData {
 
 export class CollapsibleAssistanceContentWidget extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
-  #isCollapsed = true;
+  #isCollapsed = false;
   #headerText = 'Details';
 
   set data(data: CollapsibleAssistanceContentWidgetData) {
@@ -42,16 +42,15 @@ export class CollapsibleAssistanceContentWidget extends HTMLElement {
           event.preventDefault();
           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',
+            iconName: this.#isCollapsed ? 'triangle-right' : 'triangle-down',
+            color: 'var(--sys-color-on-surface)',
+            width: '14px',
+            height: '14px',
             } as Buttons.Button.ButtonData}
-          >
-          </devtools-button>
-          ${this.#headerText}
+          ></devtools-button>
         </summary>
         <div class="content">
           <slot></slot>

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

@@ -11,8 +11,8 @@ const {html} = Lit;
 
 export interface PerformanceAgentFlameChartData {
   parsedTrace: Trace.TraceModel.ParsedTrace|null;
-  start: number;
-  end: number;
+  start: Trace.Types.Timing.Micro;
+  end: Trace.Types.Timing.Micro;
 }
 
 export class PerformanceAgentFlameChart extends HTMLElement implements PerfUI.FlameChart.FlameChartDelegate {
@@ -30,6 +30,8 @@ export class PerformanceAgentFlameChart extends HTMLElement implements PerfUI.Fl
     this.#flameChart = new PerfUI.FlameChart.FlameChart(this.#dataProvider, this);
     this.#flameChart.markAsRoot();
     this.#flameChart.show(this.#flameChartContainer);
+    const observer = new ResizeObserver(this.#onResize.bind(this));
+    observer.observe(this.#flameChartContainer);
   }
 
   set data(data: PerformanceAgentFlameChartData) {
@@ -59,15 +61,20 @@ export class PerformanceAgentFlameChart extends HTMLElement implements PerfUI.Fl
     }
 
     const bounds = Trace.Helpers.Timing.traceWindowMicroSecondsToMilliSeconds({
-      min: Trace.Types.Timing.Micro(start),
-      max: Trace.Types.Timing.Micro(end),
+      min: start,
+      max: end,
       range: Trace.Types.Timing.Micro(end - start),
     });
     this.#flameChart.setWindowTimes(bounds.min, bounds.max);
-    this.#flameChart.setSize(600, 200);
+    this.#flameChart.setSize(600, 300);
     this.#render();
   }
 
+  #onResize(entries: ResizeObserverEntry[]): void {
+    const container = entries[0];
+    this.#flameChart.setSize(container.contentRect.width, 600);
+  }
+
   #render(): void {
     if (!this.#parsedTrace) {
       return;
@@ -80,8 +87,8 @@ export class PerformanceAgentFlameChart extends HTMLElement implements PerfUI.Fl
 
           .container {
             display: flex;
-            width: 600px;
-            height: 200px;
+            width: 100%;
+            height: 300px;
           }
 
           .flex-auto {
@@ -100,7 +107,7 @@ export class PerformanceAgentFlameChart extends HTMLElement implements PerfUI.Fl
     Lit.render(output, this.#shadow, {host: this});
 
     this.#flameChart.update();
-    this.#flameChart.setSize(600, 200);
+    this.#flameChart.setSize(600, 300);
   }
   windowChanged(startTime: number, endTime: number, animate: boolean): void {
     this.#flameChart.setWindowTimes(startTime, endTime, animate);