chrome-devtools-frontend 1.0.1571573 → 1.0.1573331

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

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
-
 import '../../../ui/components/spinners/spinners.js';
 
 import * as Host from '../../../core/host/host.js';
@@ -13,7 +11,7 @@ import type * as AiAssistanceModel from '../../../models/ai_assistance/ai_assist
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
 import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import {Directives, html, nothing, render} from '../../../ui/lit/lit.js';
 import {PatchWidget} from '../PatchWidget.js';
 
 import {ChatInput} from './ChatInput.js';
@@ -22,7 +20,7 @@ import chatViewStyles from './chatView.css.js';
 
 export {ChatInput, type ImageInputData} from './ChatInput.js';
 
-const {html, Directives: {ref, repeat, createRef}} = Lit;
+const {ref, repeat, classMap} = Directives;
 
 /*
 * Strings that don't need to be translated at this time.
@@ -38,6 +36,12 @@ const lockedString = i18n.i18n.lockedString;
 
 const SCROLL_ROUNDING_OFFSET = 1;
 
+interface ViewOutput {
+  mainElement?: HTMLElement;
+  input?: UI.Widget.WidgetElement<ChatInput>;
+}
+type View = (input: ChatWidgetInput, output: ViewOutput, target: HTMLElement|ShadowRoot) => void;
+
 export interface Props {
   onTextSubmit:
       (text: string, imageInput?: Host.AidaClient.Part,
@@ -64,18 +68,110 @@ export interface Props {
   emptyStateSuggestions: AiAssistanceModel.AiAgent.ConversationSuggestion[];
   inputPlaceholder: Platform.UIString.LocalizedString;
   disclaimerText: Platform.UIString.LocalizedString;
-  isArtifactsSidebarOpen: boolean;
   uploadImageInputEnabled?: boolean;
   markdownRenderer: MarkdownLitRenderer;
   additionalFloatyContext: UI.Floaty.FloatyContextSelection[];
 }
 
+interface ChatWidgetInput extends Props {
+  handleScroll: (ev: Event) => void;
+  handleSuggestionClick: (title: string) => void;
+  handleMessageContainerRef: (el: Element|undefined) => void;
+}
+
+const DEFAULT_VIEW: View = (input, output, target) => {
+  const inputWidgetClasses = classMap({
+    'chat-input-widget': true,
+    sticky: !input.isReadOnly,
+  });
+
+  // clang-format off
+    render(html`
+      <style>${chatViewStyles}</style>
+      <div class="chat-ui">
+        <main @scroll=${input.handleScroll} ${ref(element => { output.mainElement = element as HTMLElement; } )}>
+          ${input.messages.length > 0 ? html`
+            <div class="messages-container" ${ref(input.handleMessageContainerRef)}>
+              ${repeat(input.messages, message =>
+                html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(ChatMessage, {
+                  message,
+                  isLoading: input.isLoading,
+                  isReadOnly: input.isReadOnly,
+                  canShowFeedbackForm: input.canShowFeedbackForm,
+                  userInfo: input.userInfo,
+                  markdownRenderer: input.markdownRenderer,
+                  isLastMessage: input.messages.at(-1) === message,
+                  onSuggestionClick: input.handleSuggestionClick,
+                  onFeedbackSubmit: input.onFeedbackSubmit,
+                  onCopyResponseClick: input.onCopyResponseClick,
+                })}></devtools-widget>`
+              )}
+              ${input.isLoading ? nothing : html`<devtools-widget
+                .widgetConfig=${UI.Widget.widgetConfig(PatchWidget, {
+                  changeSummary: input.changeSummary ?? '',
+                  changeManager: input.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">
+                ${input.emptyStateSuggestions.map(({title, jslogContext}) => {
+                  return html`<devtools-button
+                    class="suggestion"
+                    @click=${() => input.handleSuggestionClick(title)}
+                    .data=${
+                      {
+                        variant: Buttons.Button.Variant.OUTLINED,
+                        size: Buttons.Button.Size.REGULAR,
+                        title,
+                        jslogContext: jslogContext ?? 'suggestion',
+                        disabled: input.isTextInputDisabled,
+                      } as Buttons.Button.ButtonData
+                    }
+                  >${title}</devtools-button>`;
+                })}
+              </div>
+            </div>
+          `}
+          <devtools-widget class=${inputWidgetClasses} .widgetConfig=${UI.Widget.widgetConfig(ChatInput, {
+            isLoading: input.isLoading,
+            blockedByCrossOrigin: input.blockedByCrossOrigin,
+            isTextInputDisabled: input.isTextInputDisabled,
+            inputPlaceholder: input.inputPlaceholder,
+            disclaimerText: input.disclaimerText,
+            selectedContext: input.selectedContext,
+            inspectElementToggled: input.inspectElementToggled,
+            multimodalInputEnabled: input.multimodalInputEnabled ?? false,
+            conversationType: input.conversationType,
+            uploadImageInputEnabled: input.uploadImageInputEnabled ?? false,
+            isReadOnly: input.isReadOnly,
+            additionalFloatyContext: input.additionalFloatyContext,
+            onContextClick: input.onContextClick,
+            onInspectElementClick: input.onInspectElementClick,
+            onTextSubmit: input.onTextSubmit,
+            onCancelClick: input.onCancelClick,
+            onNewConversation: input.onNewConversation,
+          })} ${ref(element => { output.input = element as UI.Widget.WidgetElement<ChatInput>; } )}></devtools-widget>
+        </main>
+      </div>
+    `, target);
+  // clang-format on
+};
 export class ChatView extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #scrollTop?: number;
   #props: Props;
   #messagesContainerElement?: Element;
-  #mainElementRef = createRef<HTMLElement>();
+  #output: ViewOutput = {};
   #messagesContainerResizeObserver = new ResizeObserver(() => this.#handleMessagesContainerResize());
   /**
    * Indicates whether the chat scroll position should be pinned to the bottom.
@@ -94,11 +190,12 @@ export class ChatView extends HTMLElement {
    * whether to pin the content to the bottom.
    */
   #isProgrammaticScroll = false;
-  #inputRef = createRef<UI.Widget.WidgetElement<ChatInput>>();
+  #view: View;
 
-  constructor(props: Props) {
+  constructor(props: Props, view = DEFAULT_VIEW) {
     super();
     this.#props = props;
+    this.#view = view;
   }
 
   set props(props: Props) {
@@ -132,7 +229,7 @@ export class ChatView extends HTMLElement {
       return;
     }
 
-    if (!this.#mainElementRef?.value) {
+    if (!this.#output.mainElement) {
       return;
     }
 
@@ -140,11 +237,11 @@ export class ChatView extends HTMLElement {
   }
 
   scrollToBottom(): void {
-    if (!this.#mainElementRef?.value) {
+    if (!this.#output.mainElement) {
       return;
     }
 
-    this.#setMainElementScrollTop(this.#mainElementRef.value.scrollHeight);
+    this.#setMainElementScrollTop(this.#output.mainElement.scrollHeight);
   }
 
   #handleMessagesContainerResize(): void {
@@ -152,26 +249,26 @@ export class ChatView extends HTMLElement {
       return;
     }
 
-    if (!this.#mainElementRef?.value) {
+    if (!this.#output.mainElement) {
       return;
     }
 
     if (this.#pinScrollToBottom) {
-      this.#setMainElementScrollTop(this.#mainElementRef.value.scrollHeight);
+      this.#setMainElementScrollTop(this.#output.mainElement.scrollHeight);
     }
   }
 
   #setMainElementScrollTop(scrollTop: number): void {
-    if (!this.#mainElementRef?.value) {
+    if (!this.#output.mainElement) {
       return;
     }
 
     this.#scrollTop = scrollTop;
     this.#isProgrammaticScroll = true;
-    this.#mainElementRef.value.scrollTop = scrollTop;
+    this.#output.mainElement.scrollTop = scrollTop;
   }
 
-  #handleMessageContainerRef(el: Element|undefined): void {
+  #handleMessageContainerRef = (el: Element|undefined): void => {
     this.#messagesContainerElement = el;
 
     if (el) {
@@ -180,7 +277,7 @@ export class ChatView extends HTMLElement {
       this.#pinScrollToBottom = true;
       this.#messagesContainerResizeObserver.disconnect();
     }
-  }
+  };
 
   #handleScroll = (ev: Event): void => {
     if (!ev.target || !(ev.target instanceof HTMLElement)) {
@@ -201,103 +298,21 @@ export class ChatView extends HTMLElement {
   };
 
   #handleSuggestionClick = (suggestion: string): void => {
-    this.#inputRef.value?.getWidget()?.setInputValue(suggestion);
+    this.#output.input?.getWidget()?.setInputValue(suggestion);
     this.#render();
     this.focusTextInput();
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceDynamicSuggestionClicked);
   };
 
   #render(): void {
-    const inputWidgetClasses = Lit.Directives.classMap({
-      'chat-input-widget': true,
-      sticky: !this.#props.isReadOnly,
-    });
-
-    // clang-format off
-    Lit.render(html`
-      <style>${chatViewStyles}</style>
-      <div class="chat-ui">
-        <main @scroll=${this.#handleScroll} ${ref(this.#mainElementRef)}>
-          ${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,
-            isTextInputDisabled: this.#props.isTextInputDisabled,
-            inputPlaceholder: this.#props.inputPlaceholder,
-            disclaimerText: this.#props.disclaimerText,
-            selectedContext: this.#props.selectedContext,
-            inspectElementToggled: this.#props.inspectElementToggled,
-            multimodalInputEnabled: this.#props.multimodalInputEnabled ?? false,
-            conversationType: this.#props.conversationType,
-            uploadImageInputEnabled: this.#props.uploadImageInputEnabled ?? false,
-            isReadOnly: this.#props.isReadOnly,
-            additionalFloatyContext: this.#props.additionalFloatyContext,
-            onContextClick: this.#props.onContextClick,
-            onInspectElementClick: this.#props.onInspectElementClick,
-            onTextSubmit: (
-                text: string, imageInput?: Host.AidaClient.Part,
-                multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType) => {
-              this.#props.onTextSubmit(text, imageInput, multimodalInputType);
-              this.#render();
-            },
-            onCancelClick: this.#props.onCancelClick,
-            onNewConversation: this.#props.onNewConversation,
-          })} ${ref(this.#inputRef)}></devtools-widget>
-        </main>
-      </div>
-    `, this.#shadow, {host: this});
-    // clang-format on
+    this.#view(
+        {
+          ...this.#props,
+          handleScroll: this.#handleScroll,
+          handleSuggestionClick: this.#handleSuggestionClick,
+          handleMessageContainerRef: this.#handleMessageContainerRef,
+        },
+        this.#output, this.#shadow);
   }
 }
 

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

@@ -2,171 +2,27 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-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';
 import type * as Protocol from '../../../generated/protocol.js';
-import * as GreenDev from '../../../models/greendev/greendev.js';
-import * as Logs from '../../../models/logs/logs.js';
-import * as NetworkTimeCalculator from '../../../models/network_time_calculator/network_time_calculator.js';
-import * as Helpers from '../../../models/trace/helpers/helpers.js';
 import * as Trace from '../../../models/trace/trace.js';
 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';
 
 const {html} = Lit.StaticHtml;
 const {ref, createRef} = Lit.Directives;
-const {widgetConfig} = UI.Widget;
 
 export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBlock {
-  #insightRenderer = new Insights.InsightRenderer.InsightRenderer();
-
   constructor(
       private mainFrameId = '',
-      private lookupEvent: (key: Trace.Types.File.SerializableKey) => Trace.Types.Events.Event | null = () => null,
-      private parsedTrace: Trace.TraceModel.ParsedTrace|null = null) {
+      private lookupEvent: (key: Trace.Types.File.SerializableKey) => Trace.Types.Events.Event | null = () => null) {
     super();
   }
 
   override templateForToken(token: Marked.Marked.MarkedToken): Lit.LitTemplate|null {
-    if (!this.parsedTrace) {
-      return null;
-    }
-
-    // NOTE: The custom tag handling below (e.g., <ai-insight>, <network-request-widget>)
-    // is part of a prototype for the GreenDev project and is only rendered when the GreenDev
-    // feature is enabled.
-    if (token.type === 'html' && GreenDev.Prototypes.instance().isEnabled('inlineWidgets')) {
-      if (token.text.includes('<flame-chart-widget')) {
-        const startMatch = token.text.match(/start="?(\d+)"?/);
-        const endMatch = token.text.match(/end="?(\d+)"?/);
-        const start = startMatch ? Number(startMatch[1]) : this.parsedTrace.data.Meta.traceBounds.min;
-        const end = endMatch ? Number(endMatch[1]) : this.parsedTrace.data.Meta.traceBounds.max;
-        return html`<devtools-performance-agent-flame-chart .data=${{
-          parsedTrace: this.parsedTrace,
-          start,
-          end,
-        } as PerformanceAgentFlameChart.PerformanceAgentFlameChartData}
-          }></devtools-performance-agent-flame-chart>`;
-      }
-
-      // Flexible regex to match the tag name and a value a.
-      // match[1]: tagName (e.g., 'ai-insight', 'network-request-widget')
-      // match[2]: value (value needed to display the widget)
-      const regex = /<([a-z-]+)\s+value="([^"]+)">/;
-      const match = token.text.match(regex);
-
-      if (!match) {
-        return null;
-      }
-
-      const tagName = match[1];
-      const value = match[2];
-
-      if (tagName === 'ai-insight' && value) {
-        const componentName = value;
-
-        const insightSet = this.parsedTrace.insights?.values().next().value;
-        const insightM = insightSet?.model[componentName as Trace.Insights.Types.InsightKeys];
-
-        if (!insightM) {
-          return null;
-        }
-
-        return html`<devtools-collapsible-assistance-content-widget  .data=${{
-          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, {
-          selected: true,
-          isAIAssistanceContext: true
-        })}
-        </devtools-collapsible-assistance-content-widget>`;
-      }
-      if (tagName === 'network-request-widget' && value) {
-        const rawTraceEvent =
-            Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getRawTraceEvents().at(Number(value));
-
-        // Rendering RequestTimingView widget only works for fresh traces where the network log is in sync.
-        // If the trace is uploaded, we need to use the synthetic events and
-        // render the network request tooltip that uses the synthetic events.
-        if (rawTraceEvent && Trace.Types.Events.isSyntheticNetworkRequest(rawTraceEvent)) {
-          const rawTraceEventId = rawTraceEvent?.args?.data?.requestId;
-          const rawTraceEventUrl = rawTraceEvent?.args?.data?.url;
-          const networkRequest = rawTraceEvent ? Logs.NetworkLog.NetworkLog.instance()
-                                                     .requestsForId(rawTraceEventId)
-                                                     .find(r => r.url() === rawTraceEventUrl) :
-                                                 null;
-
-          if (networkRequest) {
-            const calculator = new NetworkTimeCalculator.NetworkTimeCalculator(true);
-            return html`<devtools-collapsible-assistance-content-widget
-            .data=${{
-              headerText: `Network Request: ${
-                  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=${
-                UI.Widget.widgetConfig(Network.RequestTimingView.RequestTimingView, {
-                  request: networkRequest,
-                  calculator,
-                })}></devtools-widget>
-            </devtools-collapsible-assistance-content-widget>`;
-          }
-        }
-
-        const syntheticRequest =
-            Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().syntheticEventForRawEventIndex(
-                Number(value));
-
-        let networkTooltip = null;
-        if (syntheticRequest && Trace.Types.Events.isSyntheticNetworkRequest(syntheticRequest)) {
-          // clang-format off
-          networkTooltip = html`<devtools-widget .widgetConfig=${widgetConfig(TimelineComponents.NetworkRequestTooltip.NetworkRequestTooltip, {
-            networkRequest: syntheticRequest,
-          })}></devtools-widget>`;
-          // clang-format on
-        }
-
-        return html`<devtools-collapsible-assistance-content-widget
-        .data=${{
-          headerText: 'Network Request', onReveal: () => {
-            // eslint-disable-next-line no-console
-            console.log('Reveal network request', value);
-          },
-        }
-        }>
-          ${networkTooltip}
-          </devtools-collapsible-assistance-content-widget>`;
-      }
-
-      return null;
-    }
-
     if (token.type === 'link' && token.href.startsWith('#')) {
       if (token.href.startsWith('#node-')) {
         const nodeId = Number(token.href.replace('#node-', '')) as Protocol.DOM.BackendNodeId;

package/front_end/panels/application/AppManifestView.ts

@@ -644,7 +644,7 @@ function renderIdentity(identityData: IdentitySectionData, onCopy: () => void, o
             jslog=${VisualLogging.action('help').track({hover: true})}>
         </devtools-icon>
         <devtools-link href="https://developer.chrome.com/blog/pwa-manifest-id/"
-                      .jslogContext=${'learn-more'}
+                      jslogcontext="learn-more"
                       ${ref(setFocusOnSection(i18nString(UIStrings.identity), output))}>
           ${i18nString(UIStrings.learnMore)}
         </devtools-link>
@@ -766,7 +766,7 @@ function renderIcons(
       <div class="report-row">
         ${i18nTemplate(str_, UIStrings.needHelpReadOurS, {
           PH1: html`
-            <devtools-link href="https://web.dev/maskable-icon/" .jslogContext=${'learn-more'}>
+            <devtools-link href="https://web.dev/maskable-icon/" jslogcontext="learn-more">
               ${i18nString(UIStrings.documentationOnMaskableIcons)}
             </devtools-link>`,
         })}
@@ -866,7 +866,7 @@ function renderWindowControlsSection(
             PH2: html`<code>
               <devtools-link
                 href="https://developer.mozilla.org/en-US/docs/Web/Manifest/display_override"
-                .jslogContext=${'display-override'}
+                jslogcontext="display-override"
                 ${ref(setFocusOnSection(i18nString(UIStrings.windowControlsOverlay), output))}>
                 display-override
               </devtools-link>
@@ -882,7 +882,7 @@ function renderWindowControlsSection(
             ${i18nTemplate(str_, UIStrings.wcoNotFound, {PH1: html`<code>
                 <devtools-link
                     href="https://developer.mozilla.org/en-US/docs/Web/Manifest/display_override"
-                    .jslogContext=${'display-override'}
+                    jslogcontext="display-override"
                     ${ref(setFocusOnSection(i18nString(UIStrings.windowControlsOverlay), output))}>
                   display-override
                 </devtools-link>
@@ -891,7 +891,7 @@ function renderWindowControlsSection(
         <div class="report-row">
           ${i18nTemplate(str_, UIStrings.wcoNeedHelpReadMore, {PH1: html`<devtools-link
               href="https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay"
-              .jslogContext=${'customize-pwa-tittle-bar'}>
+              jslogcontext="customize-pwa-tittle-bar">
             ${i18nString(UIStrings.customizePwaTitleBar)}
           </devtools-link>`})}
         </div>

package/front_end/panels/application/DeviceBoundSessionsModel.ts

@@ -12,6 +12,8 @@ interface EventWithTimestamp {
 }
 export interface SessionAndEvents {
   session?: Protocol.Network.DeviceBoundSession;
+  isSessionTerminated: boolean;
+  hasErrors: boolean;
   eventsById: Map<string, EventWithTimestamp>;
 }
 type SessionIdToSessionMap = Map<string|undefined, SessionAndEvents>;
@@ -60,11 +62,21 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
       return;
     }
     const emptySessions = new Map<string, Array<string|undefined>>();
+    const noLongerFailedSessions = new Map<string, Array<string|undefined>>();
     const emptySites = new Set<string>();
     for (const [site, sessionIdToSessionMap] of [...this.#siteSessions]) {
       let emptySessionsSiteEntry = emptySessions.get(site);
+      let noLongerFailedSessionsSiteEntry = noLongerFailedSessions.get(site);
       for (const [sessionId, sessionAndEvents] of sessionIdToSessionMap) {
         sessionAndEvents.eventsById.clear();
+        if (sessionAndEvents.hasErrors) {
+          sessionAndEvents.hasErrors = false;
+          if (!noLongerFailedSessionsSiteEntry) {
+            noLongerFailedSessionsSiteEntry = [];
+            noLongerFailedSessions.set(site, noLongerFailedSessionsSiteEntry);
+          }
+          noLongerFailedSessionsSiteEntry.push(sessionId);
+        }
         if (sessionAndEvents.session) {
           continue;
         }
@@ -84,13 +96,30 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
       }
     }
 
-    this.dispatchEventToListeners(DeviceBoundSessionModelEvents.CLEAR_EVENTS, {emptySessions, emptySites});
+    this.dispatchEventToListeners(
+        DeviceBoundSessionModelEvents.CLEAR_EVENTS, {emptySessions, emptySites, noLongerFailedSessions});
   }
 
   isSiteVisible(site: string): boolean {
     return this.#visibleSites.has(site);
   }
 
+  isSessionTerminated(site: string, sessionId?: string): boolean {
+    const session = this.getSession(site, sessionId);
+    if (session === undefined) {
+      return false;
+    }
+    return session.isSessionTerminated;
+  }
+
+  sessionHasErrors(site: string, sessionId?: string): boolean {
+    const session = this.getSession(site, sessionId);
+    if (session === undefined) {
+      return false;
+    }
+    return session.hasErrors;
+  }
+
   getSession(site: string, sessionId?: string): SessionAndEvents|undefined {
     return this.#siteSessions.get(site)?.get(sessionId);
   }
@@ -116,7 +145,12 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
 
     let sessionAndEvent = sessionIdToSessionMap.get(sessionId);
     if (!sessionAndEvent) {
-      sessionAndEvent = {session: undefined, eventsById: new Map<string, EventWithTimestamp>()};
+      sessionAndEvent = {
+        session: undefined,
+        isSessionTerminated: false,
+        hasErrors: false,
+        eventsById: new Map<string, EventWithTimestamp>()
+      };
       sessionIdToSessionMap.set(sessionId, sessionAndEvent);
     }
     return sessionAndEvent;
@@ -145,6 +179,20 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
       sessionAndEvent.session.cachedChallenge = event.challengeEventDetails.challenge;
     }
 
+    // Set the session's terminated status based on the event.
+    if (event.succeeded) {
+      if (event.terminationEventDetails) {
+        sessionAndEvent.isSessionTerminated = true;
+      } else if (event.creationEventDetails) {
+        sessionAndEvent.isSessionTerminated = false;
+      }
+    }
+
+    // Set that the session has errors if the latest event failed.
+    if (!event.succeeded) {
+      sessionAndEvent.hasErrors = true;
+    }
+
     this.dispatchEventToListeners(
         DeviceBoundSessionModelEvents.EVENT_OCCURRED,
         {site: eventWithTimestamp.event.site, sessionId: eventWithTimestamp.event.sessionId});
@@ -164,6 +212,9 @@ export interface DeviceBoundSessionModelEventTypes {
   [DeviceBoundSessionModelEvents.ADD_VISIBLE_SITE]: {site: string};
   [DeviceBoundSessionModelEvents.CLEAR_VISIBLE_SITES]: void;
   [DeviceBoundSessionModelEvents.EVENT_OCCURRED]: {site: string, sessionId?: string};
-  [DeviceBoundSessionModelEvents.CLEAR_EVENTS]:
-      {emptySessions: Map<string, Array<string|undefined>>, emptySites: Set<string>};
+  [DeviceBoundSessionModelEvents.CLEAR_EVENTS]: {
+    emptySessions: Map<string, Array<string|undefined>>,
+    emptySites: Set<string>,
+    noLongerFailedSessions: Map<string, Array<string|undefined>>,
+  };
 }