chrome-devtools-frontend 1.0.1555174 → 1.0.1556696

package/front_end/models/stack_trace/StackTraceModel.ts

@@ -7,7 +7,14 @@ import type * as Protocol from '../../generated/protocol.js';
 
 // eslint-disable-next-line @devtools/es-modules-import
 import * as StackTrace from './stack_trace.js';
-import {AsyncFragmentImpl, FragmentImpl, FrameImpl, StackTraceImpl} from './StackTraceImpl.js';
+import {
+  type AnyStackTraceImpl,
+  AsyncFragmentImpl,
+  DebuggableFragmentImpl,
+  FragmentImpl,
+  FrameImpl,
+  StackTraceImpl
+} from './StackTraceImpl.js';
 import {type FrameNode, type RawFrame, Trie} from './Trie.js';
 
 /**
@@ -45,10 +52,21 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
     return new StackTraceImpl(syncFragment, asyncFragments);
   }
 
+  async createFromDebuggerPaused(
+      pausedDetails: SDK.DebuggerModel.DebuggerPausedDetails,
+      rawFramesToUIFrames: TranslateRawFrames): Promise<StackTrace.StackTrace.DebuggableStackTrace> {
+    const [syncFragment, asyncFragments] = await Promise.all([
+      this.#createDebuggableFragment(pausedDetails, rawFramesToUIFrames),
+      this.#createAsyncFragments(pausedDetails, rawFramesToUIFrames),
+    ]);
+
+    return new StackTraceImpl(syncFragment, asyncFragments);
+  }
+
   /** Trigger re-translation of all fragments with the provide script in their call stack */
   async scriptInfoChanged(script: SDK.Script.Script, translateRawFrames: TranslateRawFrames): Promise<void> {
     const translatePromises: Array<Promise<unknown>> = [];
-    let stackTracesToUpdate = new Set<StackTraceImpl>();
+    let stackTracesToUpdate = new Set<AnyStackTraceImpl>();
 
     for (const fragment of this.#affectedFragments(script)) {
       // We trigger re-translation only for fragments of leaf-nodes. Any fragment along the ancestor-chain
@@ -75,8 +93,22 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
     return fragment;
   }
 
+  async #createDebuggableFragment(
+      pausedDetails: SDK.DebuggerModel.DebuggerPausedDetails,
+      rawFramesToUIFrames: TranslateRawFrames): Promise<DebuggableFragmentImpl> {
+    const fragment = this.#createFragment(pausedDetails.callFrames.map(frame => ({
+                                                                         scriptId: frame.script.scriptId,
+                                                                         url: frame.script.sourceURL,
+                                                                         functionName: frame.functionName,
+                                                                         lineNumber: frame.location().lineNumber,
+                                                                         columnNumber: frame.location().columnNumber,
+                                                                       })));
+    await this.#translateFragment(fragment, rawFramesToUIFrames);
+    return new DebuggableFragmentImpl(fragment, pausedDetails.callFrames);
+  }
+
   async #createAsyncFragments(
-      stackTraceOrPausedEvent: Protocol.Runtime.StackTrace|Protocol.Debugger.PausedEvent,
+      stackTraceOrPausedEvent: Protocol.Runtime.StackTrace|SDK.DebuggerModel.DebuggerPausedDetails,
       rawFramesToUIFrames: TranslateRawFrames): Promise<AsyncFragmentImpl[]> {
     const asyncFragments: AsyncFragmentImpl[] = [];
     const translatePromises: Array<Promise<unknown>> = [];

package/front_end/models/trace/extras/TraceTree.ts

@@ -493,8 +493,10 @@ export class BottomUpRootNode extends Node {
         node.totalTime += totalTimeById.get(id) || 0;
         totalTimeById.delete(id);
       }
-      // TODO: this may be wrong. See the skipped test in TraceTree.test.ts.
-      if (firstNodeStack.length) {
+
+      // An item on this stack means that this current node has a caller. Therefore,
+      // in a bottom-up view it has children.
+      if (idStack.length > 0) {
         node.setHasChildren(true);
       }
     }

package/front_end/models/trace/insights/LCPDiscovery.ts

@@ -129,8 +129,6 @@ export function generateInsight(
   }
 
   const initiatorUrl = lcpRequest.args.data.initiator?.url;
-  // TODO(b/372319476): Explore using trace event HTMLDocumentParser::FetchQueuedPreloads to determine if the request
-  // is discovered by the preload scanner.
   const initiatedByMainDoc =
       lcpRequest?.args.data.initiator?.type === 'parser' && docRequest.args.data.url === initiatorUrl;
   const imgPreloadedOrFoundInHTML = lcpRequest?.args.data.isLinkPreload || initiatedByMainDoc;

package/front_end/models/trace/types/TraceEvents.ts

@@ -1078,7 +1078,6 @@ export interface ResourceSendRequest extends Instant {
       resourceType?: Protocol.Network.ResourceType,
       /** Added Feb 2024. https://crrev.com/c/5297615 */
       fetchPriorityHint?: FetchPriorityHint,
-      // TODO(crbug.com/1457985): change requestMethod to enum when confirm in the backend code.
       requestMethod?: string,
       renderBlocking?: RenderBlocking,
       initiator?: Initiator,

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -12,10 +12,11 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 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 Annotations from '../../ui/components/annotations/annotations.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import * as UIHelpers from '../../ui/helpers/helpers.js';
@@ -27,6 +28,7 @@ import * as NetworkPanel from '../network/network.js';
 import * as TimelinePanel from '../timeline/timeline.js';
 
 import aiAssistancePanelStyles from './aiAssistancePanel.css.js';
+import {ArtifactsViewer} from './components/ArtifactsViewer.js';
 import {
   type AnswerPart,
   type ChatMessage,
@@ -224,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();
 
@@ -270,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();
@@ -294,6 +297,8 @@ interface ToolbarViewInput {
   onExportConversationClick: () => void;
   onHelpClick: () => void;
   onSettingsClick: () => void;
+  onArtifactsSidebarToggle: () => void;
+  artifactsSidebarVisible: boolean;
   isLoading: boolean;
   showChatActions: boolean;
   showActiveConversationActions: boolean;
@@ -386,6 +391,13 @@ function toolbarView(input: ToolbarViewInput): Lit.LitTemplate {
           .jslogContext=${'freestyler.settings'}
           .variant=${Buttons.Button.Variant.TOOLBAR}
           @click=${input.onSettingsClick}></devtools-button>
+        <!-- If the green experiment is enabled, render the artifacts sidebar toggle 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'}
+          .variant=${Buttons.Button.Variant.TOOLBAR}
+          @click=${input.onArtifactsSidebarToggle}></devtools-button>` : Lit.nothing}
       </devtools-toolbar>
     </div>
   `;
@@ -396,8 +408,9 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
   // clang-format off
   function renderState(): Lit.TemplateResult {
     switch (input.state) {
-      case ViewState.CHAT_VIEW:
-        return html`<devtools-ai-chat-view
+      case ViewState.CHAT_VIEW: {
+      return html`
+        <devtools-ai-chat-view
           .props=${input.props}
           ${Lit.Directives.ref((el: Element | undefined) => {
             if (!el || !(el instanceof ChatView)) {
@@ -407,6 +420,7 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
             output.chatView = el;
           })}
         ></devtools-ai-chat-view>`;
+      }
       case ViewState.EXPLORE_VIEW:
         return html`<devtools-widget
           class="fill-panel"
@@ -421,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
 }
 
@@ -482,18 +523,12 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #selectedElement: AiAssistanceModel.StylingAgent.NodeContext|null = null;
   #selectedPerformanceTrace: AiAssistanceModel.PerformanceAgent.PerformanceTraceContext|null = null;
   #selectedRequest: AiAssistanceModel.NetworkAgent.RequestContext|null = null;
-
+  #isArtifactsSidebarOpen = false;
   // Messages displayed in the `ChatView` component.
   #messages: ChatMessage[] = [];
 
   // 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.
@@ -530,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> {
@@ -546,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(),
@@ -574,6 +613,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           uploadImageInputEnabled: isAiAssistanceMultimodalUploadInputEnabled() &&
               this.#conversation.type === AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING,
           markdownRenderer,
+          isArtifactsSidebarOpen: this.#isArtifactsSidebarOpen,
           onTextSubmit: async (
               text: string, imageInput?: Host.AidaClient.Part,
               multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType) => {
@@ -726,6 +766,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       this.#conversation = conversation;
     }
 
+    this.#conversation?.setContext(this.#getConversationContext(this.#conversation));
+
     this.requestUpdate();
   }
 
@@ -778,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);
@@ -927,6 +976,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       onSettingsClick: () => {
         void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
       },
+      onArtifactsSidebarToggle: () => {
+        this.#isArtifactsSidebarOpen = !this.#isArtifactsSidebarOpen;
+        this.requestUpdate();
+      },
+      artifactsSidebarVisible: this.#isArtifactsSidebarOpen,
     };
   }
 
@@ -958,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;
     }
 
@@ -989,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);
         }
@@ -1066,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);
@@ -1164,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);
@@ -1358,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(
@@ -1407,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');
@@ -1427,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

@@ -0,0 +1,159 @@
+// Copyright 2025 The Chromium Authors
+// 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: 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,
+    _output: Record<string, unknown>,
+    target: HTMLElement,
+    ): void => {
+  // clang-format off
+  render(
+    html`
+      <style>${artifactsViewerStyles}</style>
+      <div class="artifacts-viewer">
+        ${input.artifacts.map(artifact => renderArtifact(artifact, input.parsedTrace))}
+      </div>
+    `,
+    target
+  );
+  // clang-format on
+};
+
+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();
+    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(): void {
+    if (!this.#parsedTrace) {
+      return;
+    }
+    this.#view(
+        {
+          artifacts: AiAssistanceModel.ArtifactsManager.ArtifactsManager.instance().artifacts,
+          parsedTrace: this.#parsedTrace,
+        },
+        {},
+        this.contentElement,
+    );
+  }
+}