chrome-devtools-frontend 1.0.1618066 → 1.0.1621064

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

@@ -272,6 +272,12 @@ export interface StepPart {
   step: Step;
 }
 
+/**
+ * Represents a part of the message that consists of one or more widgets.
+ * The agent can yield widgets directly as part of its response, separate
+ * from those returned by a specific tool call (which are encapsulated
+ * within a StepPart).
+ */
 export interface WidgetPart {
   type: 'widget';
   widgets: AiWidget[];
@@ -1111,8 +1117,82 @@ async function makeDomTreeWidget(widgetData: DomTreeAiWidget): Promise<WidgetMak
  *
  * This allows for a flexible and extensible system where new widget types
  * can be added to the AI responses and rendered in DevTools by adding
- * corresponding \`make...Widget\` functions and handling them here.
+ * corresponding `make...Widget` functions and handling them here.
+ */
+/**
+ * Generates a deterministic unique identifier for a given AiWidget based on
+ * its name and identifying data. This signature is used for widget deduplication.
  */
+export function getWidgetSignature(widget: AiWidget): string {
+  switch (widget.name) {
+    case 'COMPUTED_STYLES':
+      return `${widget.name}:${widget.data.backendNodeId}`;
+    case 'CORE_VITALS':
+      return `${widget.name}:${widget.data.insightSetKey}`;
+    case 'STYLE_PROPERTIES':
+      return `${widget.name}:${widget.data.backendNodeId}:${widget.data.selector ?? ''}`;
+    case 'DOM_TREE':
+      return `${widget.name}:${widget.data.root.backendNodeId()}`;
+    case 'PERFORMANCE_TRACE':
+      return `${widget.name}`;
+    case 'PERF_INSIGHT':
+      return `${widget.name}:${widget.data.insight}:${widget.data.insightData.insightKey}:${
+          widget.data.insightData.navigation?.args?.data?.navigationId ?? 'no-nav-id'}`;
+    case 'TIMELINE_RANGE_SUMMARY':
+      return `${widget.name}:${widget.data.track}:${widget.data.bounds.min}-${widget.data.bounds.max}`;
+    case 'BOTTOM_UP_TREE':
+      return `${widget.name}:${widget.data.bounds.min}-${widget.data.bounds.max}`;
+    default:
+      Platform.assertNever(widget, 'Unknown AiWidget name');
+  }
+}
+
+/**
+ * Returns a new ModelChatMessage where widgets have been deduplicated
+ * across all parts and steps of the message. The first occurrence of each
+ * unique widget (determined by its signature) is preserved.
+ */
+export function getDeduplicatedWidgetsMessage(message: ModelChatMessage): ModelChatMessage {
+  const seenWidgets = new Set<string>();
+
+  const filterWidgets = (widgets: AiWidget[]): AiWidget[] => {
+    return widgets.filter(widget => {
+      const signature = getWidgetSignature(widget);
+      if (seenWidgets.has(signature)) {
+        return false;
+      }
+      seenWidgets.add(signature);
+      return true;
+    });
+  };
+
+  const deduplicatedParts = message.parts.map(part => {
+    if (part.type === 'widget') {
+      return {
+        ...part,
+        widgets: filterWidgets(part.widgets),
+      };
+    }
+
+    if (part.type === 'step' && part.step.widgets) {
+      return {
+        ...part,
+        step: {
+          ...part.step,
+          widgets: filterWidgets(part.step.widgets),
+        },
+      };
+    }
+
+    return part;
+  });
+
+  return {
+    ...message,
+    parts: deduplicatedParts,
+  };
+}
+
 async function renderWidgets(
     widgets: AiWidget[]|undefined, options: {wrapperClass?: string} = {}): Promise<Lit.LitTemplate> {
   if (!Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled || !widgets || widgets.length === 0) {
@@ -1464,9 +1544,11 @@ export class ChatMessage extends UI.Widget.Widget {
   }
 
   override performUpdate(): Promise<void>|void {
+    const message =
+        this.message.entity === ChatMessageEntity.MODEL ? getDeduplicatedWidgetsMessage(this.message) : this.message;
     this.#view(
         {
-          message: this.message,
+          message,
           isLoading: this.isLoading,
           isReadOnly: this.isReadOnly,
           canShowFeedbackForm: this.canShowFeedbackForm,

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

@@ -70,5 +70,5 @@ export function getButtonLabel(input: {
   const TARGET_LENGTH = 50;
   const {truncatedText, moreCharacters} = smartTruncate(input.prompt, TARGET_LENGTH);
   const promptSuffix = moreCharacters > 0 ? ` (and ${moreCharacters} more characters)` : '';
-  return `${labelBase} for prompt '${truncatedText}'${promptSuffix}`;
+  return `${labelBase} for prompt ${truncatedText}${promptSuffix}`;
 }

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

@@ -12,7 +12,13 @@ import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import chatMessageStyles from './chatMessage.css.js';
-import {type ModelChatMessage, renderStep, type Step, titleForStep} from './ChatMessage.js';
+import {
+  getDeduplicatedWidgetsMessage,
+  type ModelChatMessage,
+  renderStep,
+  type Step,
+  titleForStep
+} from './ChatMessage.js';
 import {getButtonLabel} from './WalkthroughUtils.js';
 import walkthroughViewStyles from './walkthroughView.css.js';
 
@@ -411,6 +417,7 @@ export class WalkthroughView extends UI.Widget.Widget {
     if (!this.#markdownRenderer) {
       return;
     }
+    const message = this.#message ? getDeduplicatedWidgetsMessage(this.#message) : null;
     this.#view(
         {
           isLoading: this.#isLoading,
@@ -420,7 +427,7 @@ export class WalkthroughView extends UI.Widget.Widget {
           isInlined: this.#isInlined,
           isExpanded: this.#isExpanded,
           prompt: this.#prompt,
-          message: this.#message,
+          message,
           handleScroll: this.#handleScroll,
         },
         this.#output, this.contentElement);

package/front_end/panels/application/WebMCPView.ts

@@ -171,6 +171,22 @@ const UIStrings = {
    * @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_);
@@ -186,6 +202,7 @@ export interface FilterState {
     completed?: boolean,
     error?: boolean,
     pending?: boolean,
+    canceled?: boolean,
   };
 }
 
@@ -198,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;
@@ -210,6 +232,7 @@ export interface ViewInput {
   onFilterChange: (filters: FilterState) => void;
   toolCalls: WebMCP.WebMCPModel.Call[];
   onRunTool: (event: Common.EventTarget.EventTargetEvent<ProtocolMonitor.JSONEditor.Command>) => void;
+  onPaste: () => void;
 }
 
 export function filterToolCalls(
@@ -219,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;
       }
@@ -259,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),
-    });
+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'};
   }
-  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),
-    });
-  }
-  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): {
@@ -360,7 +377,7 @@ export function getJSONEditorParameters(tool: WebMCP.WebMCPModel.Tool): {
 export const DEFAULT_VIEW: View = (input, output, target) => {
   const tools = input.tools;
   let editorWidget: ProtocolMonitor.JSONEditor.JSONEditor|null = null;
-  const stats = calculateToolStats(input.toolCalls);
+  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 => {
@@ -370,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 '';
     }
@@ -387,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), () => {
@@ -412,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}
@@ -453,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>`
@@ -485,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"
@@ -506,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`
@@ -532,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>
@@ -565,10 +632,18 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           </div>
           ${input.selectedTool ? html`
             <div class="sidebar-tool-details">
-              ${widget(ToolDetailsWidget, {tool: input.selectedTool})}
+              ${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"
@@ -576,9 +651,12 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                 displayTargetSelector: false,
                 displayCommandInput: false,
                 displayToolbar: false,
-                ...getJSONEditorParameters(input.selectedTool),
-                commandToDisplay: input.selectedTool.name,
-              })}
+                ...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>
@@ -592,7 +670,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   const params = editorWidget.getParameters();
                   input.onRunTool({
                     data: {
-                      command: input.selectedTool.name,
+                      command: input.selectedTool.tool.name,
                       parameters: params,
                     } as ProtocolMonitor.JSONEditor.Command
                   });
@@ -608,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 = {
@@ -686,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});
@@ -702,6 +780,9 @@ 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'});
@@ -721,7 +802,7 @@ export class WebMCPView extends UI.Widget.VBox {
   }
 
   #toolsRemoved(event: Common.EventTarget.EventTargetEvent<readonly WebMCP.WebMCPModel.Tool[]>): void {
-    if (this.#selectedTool && event.data.includes(this.#selectedTool)) {
+    if (this.#selectedTool && event.data.includes(this.#selectedTool.tool)) {
       this.#selectedTool = null;
     }
     this.requestUpdate();
@@ -763,7 +844,11 @@ export class WebMCPView extends UI.Widget.VBox {
       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,
@@ -778,7 +863,21 @@ export class WebMCPView extends UI.Widget.VBox {
       onFilterChange: this.#handleFilterChange,
       onRunTool: event => {
         if (this.#selectedTool) {
-          void this.#selectedTool.invoke(event.data.parameters || {});
+          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 {
         }
       },
     };
@@ -964,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;
@@ -1020,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
@@ -1027,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;
 
@@ -1035,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;
@@ -1076,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,