chrome-devtools-frontend 1.0.1616061 → 1.0.1621064

package/front_end/panels/application/StorageItemsToolbar.ts

@@ -106,9 +106,6 @@ export class StorageItemsToolbar extends
   #deleteAllButtonIconName = 'clear';
   #deleteAllButtonTitle: string = i18nString(UIStrings.clearAll);
   #mainToolbarItems: UI.Toolbar.ToolbarItem[] = [];
-  #onRefreshCallback?: () => void;
-  #onDeleteAllCallback?: () => void;
-  #onDeleteSelectedCallback?: () => void;
 
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
@@ -116,18 +113,6 @@ export class StorageItemsToolbar extends
     this.filterRegex = null;
   }
 
-  set onRefreshCallback(callback: () => void) {
-    this.#onRefreshCallback = callback;
-  }
-
-  set onDeleteAllCallback(callback: () => void) {
-    this.#onDeleteAllCallback = callback;
-  }
-
-  set onDeleteSelectedCallback(callback: () => void) {
-    this.#onDeleteSelectedCallback = callback;
-  }
-
   set metadataView(view: ApplicationComponents.StorageMetadataView.StorageMetadataView) {
     this.#metadataView = view;
   }
@@ -150,16 +135,13 @@ export class StorageItemsToolbar extends
       metadataView: this.metadataView,
       onFilterChanged: this.filterChanged.bind(this),
       onRefresh: () => {
-        this.#onRefreshCallback?.();
         this.dispatchEventToListeners(StorageItemsToolbar.Events.REFRESH);
         UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.refreshedStatus));
       },
       onDeleteAll: () => {
-        this.#onDeleteAllCallback?.();
         this.dispatchEventToListeners(StorageItemsToolbar.Events.DELETE_ALL);
       },
       onDeleteSelected: () => {
-        this.#onDeleteSelectedCallback?.();
         this.dispatchEventToListeners(StorageItemsToolbar.Events.DELETE_SELECTED);
       },
     };
@@ -187,7 +169,6 @@ export class StorageItemsToolbar extends
 
   filterChanged({detail: text}: CustomEvent<string|null>): void {
     this.filterRegex = text ? new RegExp(Platform.StringUtilities.escapeForRegExp(text), 'i') : null;
-    this.#onRefreshCallback?.();
     this.dispatchEventToListeners(StorageItemsToolbar.Events.REFRESH);
   }
 

package/front_end/panels/application/WebMCPView.ts

@@ -167,6 +167,26 @@ const UIStrings = {
    * @description Context menu action to copy the description of a tool
    */
   copyDescription: 'Copy description',
+  /**
+   * @description Text for the header of the tool run section
+   */
+  runTool: 'Run Tool',
+  /**
+   * @description Context menu action to reveal the tool in the tool list
+   */
+  revealTool: 'Reveal tool',
+  /**
+   * @description Context menu action to edit and run the tool
+   */
+  editAndRun: 'Edit and run',
+  /**
+   * @description Tooltip for the paste button
+   */
+  paste: 'Paste',
+  /**
+   * @description Notice to display when a tool has been unregistered
+   */
+  toolUnregisteredNotice: 'This tool has been unregistered',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/WebMCPView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -182,6 +202,7 @@ export interface FilterState {
     completed?: boolean,
     error?: boolean,
     pending?: boolean,
+    canceled?: boolean,
   };
 }
 
@@ -194,10 +215,15 @@ export interface FilterMenuButtons {
   toolTypes: FilterMenuButton;
   statusTypes: FilterMenuButton;
 }
+export interface SelectedTool {
+  tool: WebMCP.WebMCPModel.Tool;
+  parameters?: Record<string, unknown>;
+}
 export interface ViewInput {
   tools: WebMCP.WebMCPModel.Tool[];
-  selectedTool: WebMCP.WebMCPModel.Tool|null;
+  selectedTool: SelectedTool|null;
   onToolSelect: (tool: WebMCP.WebMCPModel.Tool|null) => void;
+  onRevealTool: (tool: WebMCP.WebMCPModel.Tool, parameters?: Record<string, unknown>) => void;
   selectedCall: WebMCP.WebMCPModel.Call|null;
   onCallSelect: (call: WebMCP.WebMCPModel.Call|null) => void;
   filters: FilterState;
@@ -205,6 +231,8 @@ export interface ViewInput {
   onClearLogClick: () => void;
   onFilterChange: (filters: FilterState) => void;
   toolCalls: WebMCP.WebMCPModel.Call[];
+  onRunTool: (event: Common.EventTarget.EventTargetEvent<ProtocolMonitor.JSONEditor.Command>) => void;
+  onPaste: () => void;
 }
 
 export function filterToolCalls(
@@ -214,13 +242,16 @@ export function filterToolCalls(
   const statusTypes = filterState.statusTypes;
   if (statusTypes) {
     filtered = filtered.filter(call => {
-      const {completed, error, pending} = statusTypes;
+      const {completed, error, pending, canceled} = statusTypes;
       if (completed && call.result?.status === Protocol.WebMCP.InvocationStatus.Completed) {
         return true;
       }
       if (error && call.result?.status === Protocol.WebMCP.InvocationStatus.Error) {
         return true;
       }
+      if (canceled && call.result?.status === Protocol.WebMCP.InvocationStatus.Canceled) {
+        return true;
+      }
       if (pending && call.result === undefined) {
         return true;
       }
@@ -254,63 +285,54 @@ export function filterToolCalls(
   return filtered;
 }
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+
+type ToolStats = Map<Protocol.WebMCP.InvocationStatus|undefined, number>;
+
 function calculateToolStats(calls: WebMCP.WebMCPModel.Call[]):
-    {total: number, completed: number, failed: number, canceled: number, inProgress: number} {
-  let total = 0, completed = 0, failed = 0, canceled = 0, inProgress = 0;
+    {stats: Map<WebMCP.WebMCPModel.Tool, ToolStats>, totals: ToolStats} {
+  const stats = new Map<WebMCP.WebMCPModel.Tool, ToolStats>();
+  const totals: ToolStats = new Map();
+
   for (const call of calls) {
-    total++;
-    if (call.result?.status === Protocol.WebMCP.InvocationStatus.Error) {
-      failed++;
-    } else if (call.result?.status === Protocol.WebMCP.InvocationStatus.Canceled) {
-      canceled++;
-    } else if (call.result?.status === Protocol.WebMCP.InvocationStatus.Completed) {
-      completed++;
-    } else if (call.result === undefined) {
-      inProgress++;
+    let toolStats = stats.get(call.tool);
+    if (!toolStats) {
+      toolStats = new Map();
+      stats.set(call.tool, toolStats);
     }
+    toolStats.set(call.result?.status, (toolStats.get(call.result?.status) ?? 0) + 1);
+    totals.set(call.result?.status, (totals.get(call.result?.status) ?? 0) + 1);
   }
-  return {total, completed, failed, canceled, inProgress};
+  return {totals, stats};
 }
 
-function getIconGroupsFromStats(toolStats: ReturnType<typeof calculateToolStats>):
-    IconButton.IconButton.IconWithTextData[] {
-  const groups = [];
-  if (toolStats.completed > 0) {
-    groups.push({
-      iconName: 'check-circle',
-      iconColor: 'var(--sys-color-green)',
-      iconWidth: '16px',
-      iconHeight: '16px',
-      text: String(toolStats.completed),
-    });
-  }
-  if (toolStats.failed > 0) {
-    groups.push({
-      iconName: 'cross-circle-filled',
-      iconColor: 'var(--sys-color-error)',
-      iconWidth: '16px',
-      iconHeight: '16px',
-      text: String(toolStats.failed),
-    });
-  }
-  if (toolStats.canceled > 0) {
-    groups.push({
-      iconName: 'record-stop',
-      iconColor: 'var(--sys-color-on-surface-light)',
-      iconWidth: '16px',
-      iconHeight: '16px',
-      text: String(toolStats.canceled),
-    });
-  }
-  if (toolStats.inProgress > 0) {
-    groups.push({
-      iconName: 'dots-circle',
-      iconWidth: '16px',
-      iconHeight: '16px',
-      text: String(toolStats.inProgress),
-    });
+function toolStatsIcon(status: Protocol.WebMCP.InvocationStatus|undefined): {iconName: string, iconColor?: string} {
+  switch (status) {
+    case Protocol.WebMCP.InvocationStatus.Completed:
+      return {iconName: 'check-circle', iconColor: 'var(--sys-color-green)'};
+    case Protocol.WebMCP.InvocationStatus.Error:
+      return {iconName: 'cross-circle-filled', iconColor: 'var(--sys-color-error)'};
+    case Protocol.WebMCP.InvocationStatus.Canceled:
+      return {iconName: 'record-stop', iconColor: 'var(--sys-color-on-surface-light)'};
+    case undefined:
+      return {iconName: 'watch'};
   }
-  return groups;
+}
+
+function getIconGroupsFromStats(toolStats?: ToolStats):
+    Array<IconButton.IconButton.IconWithTextData&{status: Protocol.WebMCP.InvocationStatus | undefined}> {
+  const status = [
+    Protocol.WebMCP.InvocationStatus.Completed, Protocol.WebMCP.InvocationStatus.Error,
+    Protocol.WebMCP.InvocationStatus.Canceled, undefined
+  ];
+  return status
+      .map(status => ({
+             ...toolStatsIcon(status),
+             iconWidth: 'var(--sys-size-8)',
+             iconHeight: 'var(--sys-size-8)',
+             text: String(toolStats?.get(status) ?? 0),
+             status,
+           }))
+      .filter(({text}) => text !== '0');
 }
 
 export function parsePayload(payload?: unknown): {
@@ -330,9 +352,32 @@ export function parsePayload(payload?: unknown): {
   return {valueObject: payload, valueString: undefined};
 }
 
+export function getJSONEditorParameters(tool: WebMCP.WebMCPModel.Tool): {
+  metadataByCommand: Map<string, {
+    parameters: ProtocolMonitor.JSONEditor.Parameter[],
+    description: string,
+    replyArgs: string[],
+  }>,
+  typesByName: Map<string, ProtocolMonitor.JSONEditor.Parameter[]>,
+  enumsByName: Map<string, Record<string, string>>,
+} {
+  const parsedSchema = parseToolSchema(tool.inputSchema);
+  const metadataByCommand = new Map();
+  metadataByCommand.set(tool.name, {
+    parameters: parsedSchema.parameters,
+    description: tool.description,
+    replyArgs: [],
+  });
+  return {
+    metadataByCommand,
+    typesByName: parsedSchema.typesByName,
+    enumsByName: parsedSchema.enumsByName,
+  };
+}
 export const DEFAULT_VIEW: View = (input, output, target) => {
   const tools = input.tools;
-  const stats = calculateToolStats(input.toolCalls);
+  let editorWidget: ProtocolMonitor.JSONEditor.JSONEditor|null = null;
+  const toolStats = calculateToolStats(input.toolCalls);
   const isFilterActive =
       Boolean(input.filters.text) || Boolean(input.filters.toolTypes) || Boolean(input.filters.statusTypes);
   const iconName = (call: WebMCP.WebMCPModel.Call): string => {
@@ -342,7 +387,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       case Protocol.WebMCP.InvocationStatus.Canceled:
         return 'record-stop';
       case undefined:
-        return 'dots-circle';
+        return 'watch';
       default:
         return '';
     }
@@ -359,6 +404,23 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         return i18nString(UIStrings.inProgress);
     }
   };
+  const onIconClick = (toolName: string, status: Protocol.WebMCP.InvocationStatus|undefined): void => {
+    let statusTypes: FilterState['statusTypes'] = undefined;
+    if (status === Protocol.WebMCP.InvocationStatus.Completed) {
+      statusTypes = {completed: true};
+    } else if (status === Protocol.WebMCP.InvocationStatus.Error) {
+      statusTypes = {error: true};
+    } else if (status === Protocol.WebMCP.InvocationStatus.Canceled) {
+      statusTypes = {canceled: true};
+    } else if (status === undefined) {
+      statusTypes = {pending: true};
+    }
+    input.onFilterChange({
+      ...input.filters,
+      text: toolName,
+      statusTypes,
+    });
+  };
   const onToolContextMenu = (event: Event, tool: WebMCP.WebMCPModel.Tool): void => {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     contextMenu.defaultSection().appendItem(i18nString(UIStrings.copyName), () => {
@@ -384,9 +446,9 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
             <div class="toolbar-divider"></div>
             <devtools-toolbar-input type="filter"
                                     placeholder=${i18nString(UIStrings.filter)}
-                                    .value=${input.filters.text}
                                     @change=${(e: CustomEvent<string>) =>
-                                      input.onFilterChange({...input.filters, text: e.detail})}>
+                                      input.onFilterChange({...input.filters, text: e.detail})}
+                                    .value=${input.filters.text}>
             </devtools-toolbar-input>
             <div class="toolbar-divider"></div>
             ${input.filterButtons.toolTypes.button.element}
@@ -425,8 +487,34 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                       'status-error': call.result?.status === Protocol.WebMCP.InvocationStatus.Error,
                       'status-cancelled': call.result?.status === Protocol.WebMCP.InvocationStatus.Canceled,
                       selected: call === input.selectedCall,
-                    })} @click=${() => input.onCallSelect(call)}>
-                      <td>${call.tool.name}</td>
+                    })} @click=${() => input.onCallSelect(call)}
+                        @contextmenu=${(e: CustomEvent<UI.ContextMenu.ContextMenu>) => {
+                          const contextMenu = e.detail;
+                          const isUnregistered = !input.tools.includes(call.tool);
+                          contextMenu.defaultSection().appendItem(i18nString(UIStrings.revealTool), () => {
+                            input.onRevealTool(call.tool);
+                          }, {jslogContext: 'webmcp.reveal-tool', disabled: isUnregistered});
+                          contextMenu.defaultSection().appendItem(i18nString(UIStrings.editAndRun), () => {
+                            const payload = parsePayload(call.input);
+                            input.onRevealTool(call.tool, payload.valueObject as Record<string, unknown> | undefined);
+                          }, {jslogContext: 'webmcp.edit-and-run', disabled: isUnregistered});
+                        }}>
+                      <td>
+                        <div class="name-cell">
+                          <span>${call.tool.name}</span>
+                          <button class="run-tool-action-button"
+                                  title=${i18nString(UIStrings.editAndRun)}
+                                  aria-label=${i18nString(UIStrings.editAndRun)}
+                                  @click=${(e: Event) => {
+                                    e.stopPropagation();
+                                    const payload = parsePayload(call.input);
+                                    input.onRevealTool(call.tool,
+                                                       payload.valueObject as Record<string, unknown> | undefined);
+                                  }}>
+                            <devtools-icon name="goto-filled"></devtools-icon>
+                          </button>
+                        </div>
+                      </td>
                       <td>
                         <div class="status-cell">
                           ${iconName(call) ? html`<devtools-icon class="small" name=${iconName(call)}></devtools-icon>`
@@ -457,7 +545,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                 <devtools-widget
                   id="webmcp.tool-details"
                   title=${i18nString(UIStrings.toolDetails)}
-                  ${widget(ToolDetailsWidget, {tool: input.selectedCall?.tool})}>
+                  ${widget(ToolDetailsWidget, {tool: input.selectedCall?.tool, isUnregistered: input.selectedCall ? !input.tools.includes(input.selectedCall.tool) : false})}>
                 </devtools-widget>
                 <devtools-widget
                   id="webmcp.call-inputs"
@@ -478,14 +566,18 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           </devtools-split-view>
           <div class="webmcp-toolbar-container" role="toolbar">
             <devtools-toolbar class="webmcp-toolbar" role="presentation" wrappable>
-              <span class="toolbar-text">${i18nString(UIStrings.totalCalls, {PH1: stats.total})}</span>
+              <span class="toolbar-text">${i18nString(UIStrings.totalCalls, {PH1: input.toolCalls.length})}</span>
               <div class="toolbar-divider"></div>
-              <span class="toolbar-text status-error-text">${i18nString(UIStrings.failed, {PH1: stats.failed})}</span>
+              <span class="toolbar-text status-error-text">${
+                i18nString(UIStrings.failed,
+                           {PH1: toolStats.totals.get(Protocol.WebMCP.InvocationStatus.Error) ?? 0})}</span>
               <div class="toolbar-divider"></div>
               <span class="toolbar-text status-cancelled-text">${
-                  i18nString(UIStrings.canceledCount, {PH1: stats.canceled})}</span>
+                  i18nString(UIStrings.canceledCount,
+                             {PH1: toolStats.totals.get(Protocol.WebMCP.InvocationStatus.Canceled) ?? 0})}</span>
               <div class="toolbar-divider"></div>
-              <span class="toolbar-text">${i18nString(UIStrings.inProgressCount, {PH1: stats.inProgress})}</span>
+              <span class="toolbar-text">${i18nString(UIStrings.inProgressCount,
+                                                      {PH1: toolStats.totals.get(undefined) ?? 0})}</span>
             </devtools-toolbar>
           </div>
         ` : html`
@@ -504,23 +596,26 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           ${UI.Widget.widget(UI.EmptyWidget.EmptyWidget, {header: i18nString(UIStrings.noToolsPlaceholderTitle),
                                                           text: i18nString(UIStrings.noToolsPlaceholder)})}
           ` : html`
-            <devtools-list>
-              ${tools.map(tool => {
-                const toolStats = calculateToolStats(input.toolCalls.filter(c => c.tool === tool));
-                const groups = getIconGroupsFromStats(toolStats);
-                return html`
-                    <div class=${Directives.classMap({'tool-item': true, selected: tool === input.selectedTool})}
-                         @click=${() => input.onToolSelect(tool)}
-                         @contextmenu=${(e: Event) => onToolContextMenu(e, tool)}>
-                    <div class="tool-name-container">
-                      <div class="tool-name source-code">${tool.name}</div>
-                      ${groups.length > 0 ? html`<icon-button .data=${
-                          {groups, compact: false} as IconButton.IconButton.IconButtonData}></icon-button>` : ''}
+            <devtools-list class="square-corners">
+              ${tools.map(tool => html`
+                <div class=${Directives.classMap({'tool-item': true, selected: tool === input.selectedTool?.tool})}
+                     @click=${() => input.onToolSelect(tool)}
+                     @contextmenu=${(e: Event) => onToolContextMenu(e, tool)}>
+                  <div class="tool-name-container">
+                    <div class="tool-name source-code">${tool.name}</div>
+                    <div class="tool-icons">
+                      ${getIconGroupsFromStats(toolStats.stats.get(tool)).map(group => html`
+                        <icon-button
+                          .data=${{
+                            groups: [group],
+                            compact: false,
+                            clickHandler: () => onIconClick(tool.name, group.status),
+                          } as IconButton.IconButton.IconButtonData}
+                          @click=${(e: Event) => e.stopPropagation()}></icon-button>`)}
                     </div>
-                    <div class="tool-description">${tool.description}</div>
                   </div>
-                `;
-              })}
+                  <div class="tool-description">${tool.description}</div>
+                </div>`)}
             </devtools-list>
           `}
         </div>
@@ -535,7 +630,53 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
             ></devtools-button>
             <span>${i18nString(UIStrings.toolDetails)}</span>
           </div>
-          ${widget(ToolDetailsWidget, {tool: input.selectedTool})}
+          ${input.selectedTool ? html`
+            <div class="sidebar-tool-details">
+              ${widget(ToolDetailsWidget, {tool: input.selectedTool.tool})}
+            </div>
+            <div class="section-title">
+              <span>${i18nString(UIStrings.runTool)}</span>
+              <div style="flex: auto;"></div>
+              <devtools-button
+                .iconName=${'import'}
+                .size=${Buttons.Button.Size.SMALL}
+                .variant=${Buttons.Button.Variant.TEXT}
+                title=${i18nString(UIStrings.paste)}
+                @click=${input.onPaste}
+              >${i18nString(UIStrings.paste)}</devtools-button>
+            </div>
+            <devtools-widget
+              class="json-editor-widget"
+              ${widget(ProtocolMonitor.JSONEditor.JSONEditor, {
+                displayTargetSelector: false,
+                displayCommandInput: false,
+                displayToolbar: false,
+                ...getJSONEditorParameters(input.selectedTool.tool),
+                commandToDisplay: {
+                  command: input.selectedTool.tool.name,
+                  parameters: input.selectedTool.parameters || {}
+                },
+                })}
+              ${UI.Widget.widgetRef(ProtocolMonitor.JSONEditor.JSONEditor, e => { editorWidget = e; })}
+              @submiteditor=${(e: CustomEvent<ProtocolMonitor.JSONEditor.Command>) => input.onRunTool({data: e.detail})}
+            ></devtools-widget>
+            <devtools-button
+              class="webmcp-run-tool-button"
+              .variant=${Buttons.Button.Variant.OUTLINED}
+              .size=${Buttons.Button.Size.SMALL}
+              jslogContext="webmcp.run-tool"
+              @click=${() => {
+                if (editorWidget && input.selectedTool) {
+                  const params = editorWidget.getParameters();
+                  input.onRunTool({
+                    data: {
+                      command: input.selectedTool.tool.name,
+                      parameters: params,
+                    } as ProtocolMonitor.JSONEditor.Command
+                  });
+                }
+              }}>Run tool</devtools-button>
+          ` : nothing}
         </div>
       </devtools-split-view>
     </devtools-split-view>
@@ -545,7 +686,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 
 export class WebMCPView extends UI.Widget.VBox {
   readonly #view: View;
-  #selectedTool: WebMCP.WebMCPModel.Tool|null = null;
+  #selectedTool: SelectedTool|null = null;
   #selectedCall: WebMCP.WebMCPModel.Call|null = null;
 
   #filterState: FilterState = {
@@ -623,11 +764,11 @@ export class WebMCPView extends UI.Widget.VBox {
   }
 
   #showStatusTypesContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
-    const toggle = (key: 'completed'|'error'|'pending'): void => {
+    const toggle = (key: 'completed'|'error'|'pending'|'canceled'): void => {
       const current = this.#filterState.statusTypes ?? {};
       const next = {...current, [key]: !current[key]};
       let statusTypesToPass: FilterState['statusTypes'] = next;
-      if (!next.completed && !next.error && !next.pending) {
+      if (!next.completed && !next.error && !next.pending && !next.canceled) {
         statusTypesToPass = undefined;
       }
       this.#handleFilterChange({...this.#filterState, statusTypes: statusTypesToPass});
@@ -639,24 +780,34 @@ export class WebMCPView extends UI.Widget.VBox {
     contextMenu.defaultSection().appendCheckboxItem(
         i18nString(UIStrings.error), () => toggle('error'),
         {checked: this.#filterState.statusTypes?.['error'] ?? false, jslogContext: 'webmcp.error'});
+    contextMenu.defaultSection().appendCheckboxItem(
+        i18nString(UIStrings.canceled), () => toggle('canceled'),
+        {checked: this.#filterState.statusTypes?.['canceled'] ?? false, jslogContext: 'webmcp.canceled'});
     contextMenu.defaultSection().appendCheckboxItem(
         i18nString(UIStrings.pending), () => toggle('pending'),
         {checked: this.#filterState.statusTypes?.['pending'] ?? false, jslogContext: 'webmcp.pending'});
   }
   #webMCPModelAdded(model: WebMCP.WebMCPModel.WebMCPModel): void {
     model.addEventListener(WebMCP.WebMCPModel.Events.TOOLS_ADDED, this.requestUpdate, this);
-    model.addEventListener(WebMCP.WebMCPModel.Events.TOOLS_REMOVED, this.requestUpdate, this);
+    model.addEventListener(WebMCP.WebMCPModel.Events.TOOLS_REMOVED, this.#toolsRemoved, this);
     model.addEventListener(WebMCP.WebMCPModel.Events.TOOL_INVOKED, this.requestUpdate, this);
     model.addEventListener(WebMCP.WebMCPModel.Events.TOOL_RESPONDED, this.requestUpdate, this);
   }
 
   #webMCPModelRemoved(model: WebMCP.WebMCPModel.WebMCPModel): void {
     model.removeEventListener(WebMCP.WebMCPModel.Events.TOOLS_ADDED, this.requestUpdate, this);
-    model.removeEventListener(WebMCP.WebMCPModel.Events.TOOLS_REMOVED, this.requestUpdate, this);
+    model.removeEventListener(WebMCP.WebMCPModel.Events.TOOLS_REMOVED, this.#toolsRemoved, this);
     model.removeEventListener(WebMCP.WebMCPModel.Events.TOOL_INVOKED, this.requestUpdate, this);
     model.removeEventListener(WebMCP.WebMCPModel.Events.TOOL_RESPONDED, this.requestUpdate, this);
   }
 
+  #toolsRemoved(event: Common.EventTarget.EventTargetEvent<readonly WebMCP.WebMCPModel.Tool[]>): void {
+    if (this.#selectedTool && event.data.includes(this.#selectedTool.tool)) {
+      this.#selectedTool = null;
+    }
+    this.requestUpdate();
+  }
+
   #handleClearLogClick = (): void => {
     const models = SDK.TargetManager.TargetManager.instance().models(WebMCP.WebMCPModel.WebMCPModel);
     for (const model of models) {
@@ -688,11 +839,16 @@ export class WebMCPView extends UI.Widget.VBox {
     const models = SDK.TargetManager.TargetManager.instance().models(WebMCP.WebMCPModel.WebMCPModel);
     const toolCalls = models.flatMap(model => model.toolCalls);
     const filteredCalls = filterToolCalls(toolCalls, this.#filterState);
+    const tools = this.#getTools();
     const input: ViewInput = {
-      tools: this.#getTools(),
+      tools,
       selectedTool: this.#selectedTool,
       onToolSelect: tool => {
-        this.#selectedTool = tool;
+        this.#selectedTool = tool ? {tool} : null;
+        this.requestUpdate();
+      },
+      onRevealTool: (tool, parameters) => {
+        this.#selectedTool = {tool, parameters};
         this.requestUpdate();
       },
       selectedCall: this.#selectedCall,
@@ -705,6 +861,25 @@ export class WebMCPView extends UI.Widget.VBox {
       filterButtons: this.#filterButtons,
       onClearLogClick: this.#handleClearLogClick,
       onFilterChange: this.#handleFilterChange,
+      onRunTool: event => {
+        if (this.#selectedTool) {
+          void this.#selectedTool.tool.invoke(event.data.parameters || {});
+        }
+      },
+      onPaste: async () => {
+        try {
+          const text = await navigator.clipboard.readText();
+          const json = JSON.parse(text);
+          if (typeof json !== 'object' || json === null || Array.isArray(json)) {
+            throw new Error('Pasted JSON must be an object');
+          }
+          if (this.#selectedTool) {
+            this.#selectedTool.parameters = json as Record<string, unknown>;
+            this.requestUpdate();
+          }
+        } catch {
+        }
+      },
     };
     this.#view(input, {}, this.contentElement);
   }
@@ -888,6 +1063,7 @@ export class PayloadWidget extends UI.Widget.Widget {
 
 export interface ToolDetailsViewInput {
   tool: WebMCP.WebMCPModel.Tool|null|undefined;
+  isUnregistered?: boolean;
   origin: SDK.DOMModel.DOMNode|StackTrace.StackTrace.StackTrace|undefined;
   highlightNode: (node: SDK.DOMModel.DOMNode) => void;
   clearHighlight: () => void;
@@ -944,6 +1120,16 @@ const TOOL_DETAILS_VIEW = (input: ToolDetailsViewInput, output: undefined, targe
                  {stackTrace: origin, options: { expandable: true}})}
       </div>` : nothing}
     </div>
+    ${input.isUnregistered ? html`
+      <div class="call-to-action">
+        <div class="call-to-action-body">
+          <div class="explanation">
+            <devtools-icon class="inline-icon medium" name="warning-filled"></devtools-icon>
+            ${i18nString(UIStrings.toolUnregisteredNotice)}
+          </div>
+        </div>
+      </div>
+    ` : nothing}
   `, target);
 };
 // clang-format on
@@ -951,6 +1137,7 @@ const TOOL_DETAILS_VIEW = (input: ToolDetailsViewInput, output: undefined, targe
 export class ToolDetailsWidget extends UI.Widget.Widget {
   #tool: WebMCP.WebMCPModel.Tool|null|undefined = null;
   #origin: SDK.DOMModel.DOMNode|StackTrace.StackTrace.StackTrace|undefined;
+  #isUnregistered = false;
 
   #view: typeof TOOL_DETAILS_VIEW;
 
@@ -959,6 +1146,17 @@ export class ToolDetailsWidget extends UI.Widget.Widget {
     this.#view = view;
   }
 
+  set isUnregistered(isUnregistered: boolean) {
+    if (this.#isUnregistered === isUnregistered) {
+      return;
+    }
+    this.#isUnregistered = isUnregistered;
+    this.requestUpdate();
+  }
+
+  get isUnregistered(): boolean {
+    return this.#isUnregistered;
+  }
   set tool(tool: WebMCP.WebMCPModel.Tool|null|undefined) {
     if (this.#tool === tool) {
       return;
@@ -1000,6 +1198,7 @@ export class ToolDetailsWidget extends UI.Widget.Widget {
   override performUpdate(): void {
     const viewInput = {
       tool: this.#tool,
+      isUnregistered: this.#isUnregistered,
       origin: this.#origin,
       highlightNode: this.#highlightNode,
       clearHighlight: this.#clearHighlight,

package/front_end/panels/application/components/BounceTrackingMitigationsView.ts

@@ -167,7 +167,7 @@ const renderMainFrameInformation = (input: ViewInput): Lit.LitTemplate => {
   // clang-format on
 };
 
-export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement|DocumentFragment): void => {
   // clang-format off
   Lit.render(html`
     <style>${bounceTrackingMitigationsViewStyles}</style>
@@ -176,20 +176,20 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
                       jslog=${VisualLogging.pane('bounce-tracking-mitigations')}>
       ${renderMainFrameInformation(input)}
     </devtools-report>
-  `, target);
+  `, target, {container: {classes: ['overflow-auto']}});
   // clang-format on
 };
 
 type ViewFunction = typeof DEFAULT_VIEW;
 
-export class BounceTrackingMitigationsView extends UI.Widget.Widget {
+export class BounceTrackingMitigationsView extends UI.Widget.Widget<ShadowRoot> {
   #trackingSites: string[] = [];
   #screenStatus = ScreenStatusType.INITIALIZING;
   #seenButtonClick = false;
   #view: ViewFunction;
 
   constructor(element?: HTMLElement, view: ViewFunction = DEFAULT_VIEW) {
-    super(element, {useShadowDom: true, classes: ['overflow-auto']});
+    super(element, {useShadowDom: 'pure'});
 
     this.#view = view;