chrome-devtools-frontend 1.0.1603822 → 1.0.1605219

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -379,12 +379,6 @@ interface ToolbarViewInput {
   showChatActions: boolean;
   showActiveConversationActions: boolean;
   isLoading: boolean;
-
-  walkthrough: {
-    isExpanded: boolean,
-    isInlined: boolean,
-    onToggle: (isOpen: boolean) => void,
-  };
 }
 
 export const enum ViewState {
@@ -512,7 +506,7 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
   if (Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled ||
     Greendev.Prototypes.instance().isEnabled('breakpointDebuggerAgent')) {
 
-    const shouldShowWalkthrough = input.state === ViewState.CHAT_VIEW && input.walkthrough.isExpanded;
+    const shouldShowWalkthrough = input.state === ViewState.CHAT_VIEW && input.props.walkthrough.isExpanded;
     /**
      * We want to mark the walkthrough as loading only if it's showing the last
      * message. Otherwise, a previous walkthrough will show as loading if we
@@ -521,7 +515,7 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
     let walkthroughIsForLastMessage = false;
     if(input.state === ViewState.CHAT_VIEW) {
       const lastMessage = input.props.messages.at(-1);
-      if(lastMessage && input.props.walkthrough.activeMessage === lastMessage) {
+      if(lastMessage && input.props.walkthrough.activeSidebarMessage === lastMessage) {
         walkthroughIsForLastMessage = true;
       }
     }
@@ -533,7 +527,7 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
           name="ai-assistance-split-view-state"
           direction="column"
           sidebar-position="second"
-          sidebar-visibility=${shouldShowWalkthrough && !input.walkthrough.isInlined ? 'visible' : 'hidden'}
+          sidebar-visibility=${shouldShowWalkthrough && !input.props.walkthrough.isInlined ? 'visible' : 'hidden'}
           sidebar-initial-size=${WALKTHROUGH_SIDEBAR_INITIAL_WIDTH}
         >
           <div slot="main" class="main-view">
@@ -542,7 +536,7 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
           <div slot="sidebar" class="sidebar-view">
             ${shouldShowWalkthrough ? html`
               <devtools-widget ${widget(WalkthroughView, {
-                message: input.props.walkthrough.activeMessage,
+                message: input.props.walkthrough.activeSidebarMessage,
                 isLoading: input.props.isLoading && walkthroughIsForLastMessage,
                 markdownRenderer: input.props.markdownRenderer,
                 onToggle: input.props.walkthrough.onToggle,
@@ -610,10 +604,15 @@ function createPerformanceTraceContext(focus: AiAssistanceModel.AIContext.AgentF
 
 /**
  * State relating to the visibility of the Walkthrough.
- * Note that we have to track the active message and the visibility as distinct
- * state, because you can toggle the walkthrough via the sidebar, in which case
- * we need to make it visible/hidden but keep track of the active message for
- * when the user expands it again.
+ *
+ * We track both an `activeSidebarMessage` and a list of `inlineExpandedMessages` because:
+ * 1. In Narrow (inline) mode, multiple walkthroughs can be expanded at once,
+ *    so we need to track them all to render them correctly in the chat.
+ * 2. In Wide (sidebar) mode, only one walkthrough can be visible at a time.
+ *    The `activeSidebarMessage` tracks which one is shown in the sidebar.
+ * 3. When transitioning from Narrow to Wide, we use the last message in
+ *    `inlineExpandedMessages` to determine which one should stay expanded
+ *    in the sidebar.
  */
 interface WalkthroughState {
   /**
@@ -625,11 +624,15 @@ interface WalkthroughState {
    */
   isExpanded: boolean;
   /**
-   * The message that the walkthrough is showing all the steps for. A
-   * conversation can have many Model messages (1 per each user prompt) so we
-   * need to track which one we are showing for the walkthrough.
+   * The message that the walkthrough is showing all the steps for. In Wide mode,
+   * this is the message shown in the sidebar. In Narrow mode, it tracks the
+   * most recently interacted message.
+   */
+  activeSidebarMessage: ModelChatMessage|null;
+  /**
+   * Tracks which messages are expanded in inline mode.
    */
-  activeMessage: ModelChatMessage|null;
+  inlineExpandedMessages: ModelChatMessage[];
 }
 
 let panelInstance: AiAssistancePanel;
@@ -667,7 +670,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #walkthrough: WalkthroughState = {
     isInlined: false,
     isExpanded: false,
-    activeMessage: null,
+    activeSidebarMessage: null,
+    inlineExpandedMessages: [],
   };
 
   constructor(private view: View = defaultView, {aidaClient, aidaAvailability}: {
@@ -704,11 +708,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       onSettingsClick: () => {
         void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
       },
-      walkthrough: {
-        isExpanded: this.#walkthrough.isExpanded,
-        isInlined: this.#walkthrough.isInlined,
-        onToggle: this.#toggleWalkthrough.bind(this),
-      }
     };
   }
 
@@ -796,7 +795,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             onOpen: this.#openWalkthrough.bind(this),
             isExpanded: this.#walkthrough.isExpanded,
             isInlined: this.#walkthrough.isInlined,
-            activeMessage: this.#walkthrough.activeMessage,
+            activeSidebarMessage: this.#walkthrough.activeSidebarMessage,
+            inlineExpandedMessages: this.#walkthrough.inlineExpandedMessages,
           },
         }
       };
@@ -820,20 +820,73 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     if (isNarrow === this.#walkthrough.isInlined) {
       return;
     }
-    // If the UI changed, we reset the visibility of the AI Walkthrough.
-    this.#resetWalkthrough();
+
     this.#walkthrough.isInlined = isNarrow;
+
+    if (!this.#walkthrough.isExpanded) {
+      // If nothing was expanded, we just ensure the state is clean.
+      this.#walkthrough.activeSidebarMessage = null;
+      this.#walkthrough.inlineExpandedMessages = [];
+      this.requestUpdate();
+      return;
+    }
+
+    if (isNarrow) {
+      // Wide -> Inline: the walkthrough that was open stays expanded
+      this.#walkthrough.inlineExpandedMessages =
+          this.#walkthrough.activeSidebarMessage ? [this.#walkthrough.activeSidebarMessage] : [];
+    } else {
+      // Inline -> Wide: the last walkthrough that the user opened stays expanded
+      this.#walkthrough.activeSidebarMessage = this.#walkthrough.inlineExpandedMessages.at(-1) ?? null;
+    }
+
     this.requestUpdate();
   }
 
   #openWalkthrough(message: ModelChatMessage): void {
-    this.#walkthrough.activeMessage = message;
+    if (!this.#walkthrough.inlineExpandedMessages.includes(message)) {
+      this.#walkthrough.inlineExpandedMessages.push(message);
+    }
+    this.#walkthrough.activeSidebarMessage = message;
     this.#walkthrough.isExpanded = true;
     this.requestUpdate();
   }
 
-  #toggleWalkthrough(isOpen: boolean): void {
-    this.#walkthrough.isExpanded = isOpen;
+  /**
+   * Toggles the expanded state of a walkthrough.
+   *
+   * In Wide (sidebar) mode:
+   * - Opening a message's walkthrough shows the sidebar for that message.
+   * - Closing the sidebar hides the walkthrough for the currently active message.
+   *
+   * In Narrow (inline) mode:
+   * - Any number of walkthroughs can be open at once.
+   * - Opening/closing a message's walkthrough only affects that message's inline display.
+   */
+  #toggleWalkthrough(isOpen: boolean, message: ModelChatMessage): void {
+    if (isOpen) {  // If we are opening a walkthrough, ensure it's in our list of expanded messages.
+      this.#openWalkthrough(message);
+      return;
+    }
+
+    // If we are closing a walkthrough, remove it from the list of expanded messages.
+    this.#walkthrough.inlineExpandedMessages = this.#walkthrough.inlineExpandedMessages.filter(m => m !== message);
+
+    if (this.#walkthrough.isInlined) {
+      // In Narrow mode, the global expanded state tracks if at least one walkthrough is open.
+      this.#walkthrough.isExpanded = this.#walkthrough.inlineExpandedMessages.length > 0;
+      // If the message we just closed was the active one, we pick a new active message
+      // from the remaining open ones (if any). This ensures that if the user
+      // re-opens the sidebar later, it shows the most recently opened walkthrough.
+      if (this.#walkthrough.activeSidebarMessage === message) {
+        this.#walkthrough.activeSidebarMessage = this.#walkthrough.inlineExpandedMessages.at(-1) ?? null;
+      }
+    } else {
+      // In Wide mode, closing the sidebar means we are no longer expanded globally.
+      this.#walkthrough.isExpanded = false;
+      this.#walkthrough.activeSidebarMessage = null;
+    }
+
     this.requestUpdate();
   }
 
@@ -1565,7 +1618,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   #resetWalkthrough(): void {
     this.#walkthrough.isExpanded = false;
-    this.#walkthrough.activeMessage = null;
+    this.#walkthrough.activeSidebarMessage = null;
+    this.#walkthrough.inlineExpandedMessages = [];
   }
 
   #onDeleteClicked(): void {

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

@@ -36,7 +36,7 @@ import * as TimelineUtils from '../../timeline/utils/utils.js';
 import {PanelUtils} from '../../utils/utils.js';
 
 import chatMessageStyles from './chatMessage.css.js';
-import {walkthroughTitle, WalkthroughView} from './WalkthroughView.js';
+import {walkthroughCloseTitle, walkthroughTitle, WalkthroughView} from './WalkthroughView.js';
 
 const {html, Directives: {ref, ifDefined}} = Lit;
 const lockedString = i18n.i18n.lockedString;
@@ -49,10 +49,6 @@ const SCROLL_ROUNDING_OFFSET = 1;
 * Strings that don't need to be translated at this time.
 */
 const UIStringsNotTranslate = {
-  /**
-   * @description Text used in the button to close an open walkthrough
-   */
-  closeAgentWalkthrough: 'Close agent walkthrough',
   /**
    * @description The title of the button that allows submitting positive
    * feedback about the response for AI assistance.
@@ -174,11 +170,6 @@ const UIStringsNotTranslate = {
    * @description Alt text for image when it is not available.
    */
   imageUnavailable: 'Image unavailable',
-  /**
-   * @description Title for the button that shows the thinking process (walkthrough).
-   */
-  showThinking: 'Show thinking',
-
   /**
    * @description Title for the button that takes the user into other DevTools panels to reveal items the AI references.
    */
@@ -310,9 +301,10 @@ export interface MessageInput {
   walkthrough: {
     onOpen: (message: ModelChatMessage) => void,
     isExpanded: boolean,
-    onToggle: (isOpen: boolean) => void,
+    onToggle: (isOpen: boolean, message: ModelChatMessage) => void,
     isInlined: boolean,
-    activeMessage: ModelChatMessage|null,
+    activeSidebarMessage: ModelChatMessage|null,
+    inlineExpandedMessages: ModelChatMessage[],
   };
 }
 
@@ -350,12 +342,13 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
       class="chat-message answer ${input.isLastMessage ? 'is-last-message' : ''}"
       jslog=${VisualLogging.section('answer')}
     >
-      <div class="message-info">
-        <devtools-icon name=${icon}></devtools-icon>
-        <div class="message-name">
-          <h2>${AiAssistanceModel.AiUtils.isGeminiBranding() ? lockedString(UIStringsNotTranslate.gemini) : lockedString(UIStringsNotTranslate.ai)}</h2>
-        </div>
-      </div>
+      ${aiAssistanceV2 ? Lit.nothing : html`
+        <div class="message-info">
+          <devtools-icon name=${icon}></devtools-icon>
+          <div class="message-name">
+            <h2>${AiAssistanceModel.AiUtils.isGeminiBranding() ? lockedString(UIStringsNotTranslate.gemini) : lockedString(UIStringsNotTranslate.ai)}</h2>
+          </div>
+        </div>`}
       ${aiAssistanceV2 ? renderWalkthroughUI(input, steps) : Lit.nothing}
       ${Lit.Directives.repeat(
         message.parts,
@@ -516,9 +509,8 @@ function renderWalkthroughSidebarButton(
   }
 
   const hasOneStepWithWidget = steps.some(step => step.widgets?.length);
-  const isOpen = input.message === input.walkthrough.activeMessage;
-
-  const title = isOpen ? lockedString(UIStringsNotTranslate.closeAgentWalkthrough) : walkthroughTitle({
+  const isExpanded = walkthrough.isExpanded && input.message === input.walkthrough.activeSidebarMessage;
+  const title = isExpanded ? walkthroughCloseTitle({hasWidgets: hasOneStepWithWidget}) : walkthroughTitle({
     isLoading: input.isLoading,
     hasWidgets: hasOneStepWithWidget,
     lastStep,
@@ -528,20 +520,23 @@ function renderWalkthroughSidebarButton(
   // want to change it visually at the end once everything has stopped
   // loading.
   const variant = hasOneStepWithWidget && !input.isLoading ? Buttons.Button.Variant.TONAL : Buttons.Button.Variant.TEXT;
+  const icon = AiAssistanceModel.AiUtils.getIconName();
 
   // clang-format off
   return html`
-    <div class="walkthrough-toggle-container">
-      ${input.isLoading ? html`<devtools-spinner></devtools-spinner>` : Lit.nothing}
+    <div class="walkthrough-toggle-container ${hasOneStepWithWidget ? 'has-widgets' : ''}">
+      ${input.isLoading ?
+        html`<devtools-spinner></devtools-spinner>` :
+        html`<devtools-icon name=${icon}></devtools-icon>`}
       <devtools-button
         .variant=${variant}
         .size=${Buttons.Button.Size.SMALL}
-        .title=${lastStep.isLoading ? titleForStep(lastStep) : lockedString(UIStringsNotTranslate.showThinking)}
+        .title=${lastStep.isLoading ? titleForStep(lastStep) : title}
         .jslogContext=${walkthrough.isExpanded ? 'ai-hide-walkthrough-sidebar' : 'ai-show-walkthrough-sidebar'}
         data-show-walkthrough
         @click=${() => {
-          if(walkthrough.activeMessage === input.message && walkthrough.isExpanded) {
-            walkthrough.onToggle(false);
+          if(walkthrough.activeSidebarMessage === input.message && walkthrough.isExpanded) {
+            walkthrough.onToggle(false, message as ModelChatMessage);
           } else {
             // Can't just toggle the visibility here; we need to ensure we
             // update the state with this message as the user could have had
@@ -549,8 +544,8 @@ function renderWalkthroughSidebarButton(
             walkthrough.onOpen(message as ModelChatMessage);
           }
         }}
-      >
-        ${title}<devtools-icon class="chevron" .name=${'chevron-right'}></devtools-icon>
+>
+        ${title}<devtools-icon class="chevron" .name=${isExpanded ? 'cross' : 'chevron-right'}></devtools-icon>
       </devtools-button>
     </div>
   `;
@@ -577,7 +572,9 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
   // A message's walkthrough is considered expanded if the walkthrough is
   // open and it is specifically targeting this message. This is necessary
   // because the walkthrough state is shared across all messages in the chat.
-  const isExpanded = (input.walkthrough.isExpanded && input.walkthrough.activeMessage === input.message);
+  const isExpanded = input.walkthrough.isInlined ?
+      input.walkthrough.inlineExpandedMessages.includes(input.message as ModelChatMessage) :
+      (input.walkthrough.isExpanded && input.walkthrough.activeSidebarMessage === input.message);
 
   // When a side-effect step is present, it's shown in the main chat UI if the
   // walkthrough is closed, allowing the user to approve it without opening
@@ -1238,11 +1235,12 @@ export class ChatMessage extends UI.Widget.Widget {
     onToggle: () => {},
     isInlined: false,
     isExpanded: false,
-    activeMessage: null,
+    activeSidebarMessage: null,
+    inlineExpandedMessages: [],
   };
 
   #suggestionsResizeObserver = new ResizeObserver(() => this.#handleSuggestionsScrollOrResize());
-  #suggestionsEvaluateLayoutThrottler = new Common.Throttler.Throttler(50);
+  #suggestionsEvaluateLayoutThrottler = new Common.Throttler.Throttler(100);
 
   #feedbackValue = '';
   #currentRating: Host.AidaClient.Rating|undefined;
@@ -1252,6 +1250,8 @@ export class ChatMessage extends UI.Widget.Widget {
   #view: View;
   #viewOutput: ViewOutput = {};
 
+  #isObservingSuggestions = false;
+
   constructor(element?: HTMLElement, view?: View) {
     super(element);
     this.#view = view ?? DEFAULT_VIEW;
@@ -1261,10 +1261,6 @@ export class ChatMessage extends UI.Widget.Widget {
     super.wasShown();
     void this.performUpdate();
     this.#evaluateSuggestionsLayout();
-
-    if (this.#viewOutput.suggestionsScrollContainer) {
-      this.#suggestionsResizeObserver.observe(this.#viewOutput.suggestionsScrollContainer);
-    }
   }
 
   override performUpdate(): Promise<void>|void {
@@ -1303,6 +1299,11 @@ export class ChatMessage extends UI.Widget.Widget {
           walkthrough: this.walkthrough,
         },
         this.#viewOutput, this.contentElement);
+
+    if (this.#viewOutput.suggestionsScrollContainer && !this.#isObservingSuggestions) {
+      this.#suggestionsResizeObserver.observe(this.#viewOutput.suggestionsScrollContainer);
+      this.#isObservingSuggestions = true;
+    }
   }
 
   #handleInputChange(value: string): void {
@@ -1326,6 +1327,7 @@ export class ChatMessage extends UI.Widget.Widget {
     const shouldShowRightButton = suggestionsScrollContainer.scrollLeft +
             (suggestionsScrollContainer as HTMLElement).offsetWidth + SCROLL_ROUNDING_OFFSET <
         suggestionsScrollContainer.scrollWidth;
+
     leftScrollButtonContainer.classList.toggle('hidden', !shouldShowLeftButton);
     rightScrollButtonContainer.classList.toggle('hidden', !shouldShowRightButton);
   };
@@ -1333,6 +1335,7 @@ export class ChatMessage extends UI.Widget.Widget {
   override willHide(): void {
     super.willHide();
     this.#suggestionsResizeObserver.disconnect();
+    this.#isObservingSuggestions = false;
   }
 
   #handleSuggestionsScrollOrResize(): void {
@@ -1416,8 +1419,8 @@ async function makeTimelineRangeSummaryWidget(widgetData: TimelineRangeSummaryAi
 
   const thirdPartyTree = new Timeline.ThirdPartyTreeView.ThirdPartyTreeViewWidget();
   const mapper = new Trace.EntityMapper.EntityMapper(parsedTrace);
-  thirdPartyTree.setModelWithEvents(eventsArray, parsedTrace, mapper);
-  thirdPartyTree.updateContents(Timeline.TimelineSelection.selectionFromRangeMicroSeconds(bounds.min, bounds.max));
+  thirdPartyTree.model = {selectedEvents: eventsArray, parsedTrace, entityMapper: mapper};
+  thirdPartyTree.activeSelection = Timeline.TimelineSelection.selectionFromRangeMicroSeconds(bounds.min, bounds.max);
   thirdPartyTree.refreshTree(true);
 
   // clang-format off
@@ -1429,9 +1432,16 @@ async function makeTimelineRangeSummaryWidget(widgetData: TimelineRangeSummaryAi
           events,
           startTime: Trace.Helpers.Timing.microToMilli(bounds.min),
           endTime: Trace.Helpers.Timing.microToMilli(bounds.max),
-          thirdPartyTreeTemplate: html`<devtools-performance-third-party-tree-view
-            max-rows="10"
-            .treeView=${thirdPartyTree}></devtools-performance-third-party-tree-view>`,
+          thirdPartyTreeTemplate: html`${
+            widget(Timeline.ThirdPartyTreeView.ThirdPartyTreeViewWidget, {
+              maxRows: 10,
+              model: {
+                selectedEvents: thirdPartyTree.selectedEvents() ?? null,
+                parsedTrace,
+                entityMapper: thirdPartyTree.entityMapper(),
+              },
+              activeSelection: { bounds },
+            })}`,
         } as TimelineComponents.TimelineRangeSummaryView.TimelineRangeSummaryViewData,
       })}
     ></devtools-widget>`;

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

@@ -88,10 +88,11 @@ export interface Props {
   generateConversationSummary: (markdown: string) => Promise<string>;
   walkthrough: {
     onOpen: (message: ModelChatMessage) => void,
-    onToggle: (isOpen: boolean) => void,
+    onToggle: (isOpen: boolean, message: ModelChatMessage) => void,
     isExpanded: boolean,
     isInlined: boolean,
-    activeMessage: ModelChatMessage|null,
+    activeSidebarMessage: ModelChatMessage|null,
+    inlineExpandedMessages: ModelChatMessage[],
   };
 }
 

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

@@ -36,6 +36,14 @@ const UIStrings = {
    * @description Title for the button that shows the walkthrough when there are widgets in the walkthrough.
    */
   showAgentWalkthrough: 'Show agent walkthrough',
+  /**
+   * @description Title for the button that hides the walkthrough when there are no widgets in the walkthrough.
+   */
+  hideThinking: 'Hide thinking',
+  /**
+   * @description Title for the button that hides the walkthrough when there are widgets in the walkthrough.
+   */
+  hideAgentWalkthrough: 'Hide agent walkthrough',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/WalkthroughView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -46,7 +54,7 @@ export interface ViewInput {
   markdownRenderer: MarkdownLitRenderer;
   isInlined: boolean;
   isExpanded: boolean;
-  onToggle: (isOpen: boolean) => void;
+  onToggle: (isOpen: boolean, message: ModelChatMessage) => void;
   onOpen: (message: ModelChatMessage) => void;
   handleScroll: (ev: Event) => void;
 }
@@ -70,6 +78,19 @@ export function walkthroughTitle(input: {
   return lockedString(UIStrings.showThinking);
 }
 
+export function walkthroughCloseTitle(input: {
+  hasWidgets: boolean,
+  isInlined?: boolean,
+}): string {
+  if (input.isInlined) {
+    return i18nString(UIStrings.title);
+  }
+  if (input.hasWidgets) {
+    return lockedString(UIStrings.hideAgentWalkthrough);
+  }
+  return lockedString(UIStrings.hideThinking);
+}
+
 function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate, steps: Step[]): Lit.LitTemplate {
   const lastStep = steps.at(-1);
   if (!input.isInlined || !lastStep) {
@@ -78,10 +99,13 @@ function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate,
 
   function onToggle(event: Event): void {
     const isOpen = (event.target as HTMLDetailsElement).open;
-    if (isOpen && input.message) {
+    if (!input.message) {
+      return;
+    }
+    if (isOpen) {
       input.onOpen(input.message);
     } else {
-      input.onToggle(isOpen);
+      input.onToggle(isOpen, input.message);
     }
   }
 
@@ -92,7 +116,7 @@ function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate,
     <details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle}>
       <summary ?data-has-widgets=${!input.isLoading && hasWidgets}>
         ${input.isLoading ? html`<devtools-spinner></devtools-spinner>` : Lit.nothing}
-        ${walkthroughTitle({isLoading: input.isLoading, lastStep, hasWidgets})}
+        ${input.isExpanded ? walkthroughCloseTitle({hasWidgets, isInlined: true}) : walkthroughTitle({isLoading: input.isLoading, lastStep, hasWidgets})}
         <devtools-icon name="chevron-right"></devtools-icon>
       </summary>
       ${stepsOutput}
@@ -118,7 +142,11 @@ function renderSidebarWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate
             title: i18nString(UIStrings.close),
             jslogContext: 'close-walkthrough',
           } as Buttons.Button.ButtonData}
-          @click=${() => input.onToggle(false)}
+          @click=${() => {
+            if (input.message) {
+              input.onToggle(false, input.message);
+            }
+          }}
         ></devtools-button>
       </div>
       ${stepsOutput}
@@ -184,7 +212,7 @@ export class WalkthroughView extends UI.Widget.Widget {
   #message: ModelChatMessage|null = null;
   #isLoading = false;
   #markdownRenderer: MarkdownLitRenderer|null = null;
-  #onToggle: (isOpen: boolean) => void = () => {};
+  #onToggle: (isOpen: boolean, message: ModelChatMessage) => void = () => {};
   #onOpen: (message: ModelChatMessage) => void = () => {};
   #isInlined = false;
   #isExpanded = false;
@@ -318,7 +346,7 @@ export class WalkthroughView extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
-  set onToggle(onToggle: (isOpen: boolean) => void) {
+  set onToggle(onToggle: (isOpen: boolean, message: ModelChatMessage) => void) {
     this.#onToggle = onToggle;
     this.requestUpdate();
   }

package/front_end/panels/ai_assistance/components/chatMessage.css

@@ -344,9 +344,13 @@
 
   .walkthrough-toggle-container {
     display: flex;
-    gap: var(--sys-size-4);
+    gap: var(--sys-size-2);
     align-items: center;
 
+    &.has-widgets {
+      gap: var(--sys-size-6);
+    }
+
     .chevron {
       color: var(--sys-color-primary);
       width: var(--sys-size-8);

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -92,6 +92,7 @@ import {SharedStorageTreeElement} from './SharedStorageTreeElement.js';
 import {StorageBucketsTreeParentElement} from './StorageBucketsTreeElement.js';
 import {StorageView} from './StorageView.js';
 import {TrustTokensTreeElement} from './TrustTokensTreeElement.js';
+import {WebMCPTreeElement} from './WebMCPTreeElement.js';
 
 const UIStrings = {
   /**
@@ -346,6 +347,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   periodicBackgroundSyncTreeElement: BackgroundServiceTreeElement;
   pushMessagingTreeElement: BackgroundServiceTreeElement;
   reportingApiTreeElement: ReportingApiTreeElement;
+  webMcpTreeElement?: WebMCPTreeElement;
   deviceBoundSessionsRootTreeElement: DeviceBoundSessionsRootTreeElement|undefined;
   deviceBoundSessionsModel: DeviceBoundSessionsModel|undefined;
   preloadingSummaryTreeElement: PreloadingSummaryTreeElement|undefined;
@@ -390,6 +392,10 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.applicationTreeElement.appendChild(this.serviceWorkersTreeElement);
     const clearStorageTreeElement = new ClearStorageTreeElement(panel);
     this.applicationTreeElement.appendChild(clearStorageTreeElement);
+    if (Root.Runtime.hostConfig.devToolsWebMCPSupport?.enabled) {
+      this.webMcpTreeElement = new WebMCPTreeElement(panel);
+      this.applicationTreeElement.appendChild(this.webMcpTreeElement);
+    }
 
     const storageSectionTitle = i18nString(UIStrings.storage);
     const storageTreeElement = this.addSidebarSection(storageSectionTitle, 'storage');

package/front_end/panels/application/IndexedDBViews.ts

@@ -321,27 +321,19 @@ export class IDBDataView extends UI.View.SimpleView {
     const keyPath = this.isIndex && this.index ? this.index.keyPath : this.objectStore.keyPath;
 
     const columns: DataGrid.DataGrid.ColumnDescriptor[] = [];
-
-    // Create column defaults so that we avoid repetition below.
-    const columnDefaults: Partial<DataGrid.DataGrid.ColumnDescriptor> = {
-      sortable: false,
-    };
     columns.push({
-      ...columnDefaults,
       id: 'number',
       title: '#' as Platform.UIString.LocalizedString,
       sortable: false,
       width: '50px',
     });
     columns.push({
-      ...columnDefaults,
       id: 'key',
       titleDOMFragment: this.keyColumnHeaderFragment(i18nString(UIStrings.keyString), keyPath),
       sortable: false,
     });
     if (this.isIndex) {
       columns.push({
-        ...columnDefaults,
         id: 'primary-key',
         titleDOMFragment: this.keyColumnHeaderFragment(i18nString(UIStrings.primaryKey), this.objectStore.keyPath),
         sortable: false,
@@ -349,7 +341,6 @@ export class IDBDataView extends UI.View.SimpleView {
     }
     const title = i18nString(UIStrings.valueString);
     columns.push({
-      ...columnDefaults,
       id: 'value',
       title,
       sortable: false,

package/front_end/panels/application/WebMCPTreeElement.ts

@@ -0,0 +1,35 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Host from '../../core/host/host.js';
+import type * as Platform from '../../core/platform/platform.js';
+import {createIcon} from '../../ui/kit/kit.js';
+
+import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
+import type {ResourcesPanel} from './ResourcesPanel.js';
+import {WebMCPView} from './WebMCPView.js';
+
+export class WebMCPTreeElement extends ApplicationPanelTreeElement {
+  #view?: WebMCPView;
+
+  constructor(storagePanel: ResourcesPanel) {
+    super(storagePanel, 'WebMCP', false, 'web-mcp');
+    const icon = createIcon('document');
+    this.setLeadingIcons([icon]);
+  }
+
+  override get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'webMcp://' as Platform.DevToolsPath.UrlString;
+  }
+
+  override onselect(selectedByUser?: boolean): boolean {
+    super.onselect(selectedByUser);
+    if (!this.#view) {
+      this.#view = new WebMCPView();
+    }
+    this.showView(this.#view);
+    Host.userMetrics.panelShown('web-mcp');
+    return false;
+  }
+}