chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/panels/freestyler/FreestylerPanel.ts

@@ -6,16 +6,21 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
+import * as TimelineUtils from '../../panels/timeline/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.js';
 
-import {ErrorType, type ResponseData, ResponseType} from './AiAgent.js';
-import {ChangeManager} from './ChangeManager.js';
 import {
   AgentType,
+  type AiAgent,
+  ErrorType,
+  type ResponseData,
+  ResponseType,
+} from './AiAgent.js';
+import {ChangeManager} from './ChangeManager.js';
+import {
   ChatMessageEntity,
   FreestylerChatUi,
   type ModelChatMessage,
@@ -38,14 +43,11 @@ const {html} = LitHtml;
 const AI_ASSISTANCE_SEND_FEEDBACK = 'https://crbug.com/364805393' as Platform.DevToolsPath.UrlString;
 const AI_ASSISTANCE_HELP = 'https://goo.gle/devtools-ai-assistance' as Platform.DevToolsPath.UrlString;
 
-/*
-* Strings that don't need to be translated at this time.
-*/
-const UIStringsNotTranslate = {
+const UIStrings = {
   /**
-   *@description AI assistance UI text for clearing the chat.
+   *@description AI assistance UI text creating a new chat.
    */
-  clearChat: 'Clear chat',
+  newChat: 'New chat',
   /**
    *@description AI assistance UI tooltip text for the help button.
    */
@@ -62,6 +64,21 @@ const UIStringsNotTranslate = {
    *@description Announcement text for screen readers when the chat is cleared.
    */
   chatCleared: 'Chat cleared',
+  /**
+   *@description AI assistance UI text creating selecting a history entry.
+   */
+  history: 'History',
+  /**
+   *@description AI assistance UI text clearing the current chat session.
+   */
+  clearChat: 'Clear chat',
+};
+
+/*
+* Strings that don't need to be translated at this time.
+*/
+const UIStringsNotTranslate = {
+
   /**
    *@description Announcement text for screen readers when the conversation starts.
    */
@@ -72,6 +89,8 @@ const UIStringsNotTranslate = {
   answerReady: 'Answer ready',
 };
 
+const str_ = i18n.i18n.registerUIStrings('panels/freestyler/FreestylerPanel.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const lockedString = i18n.i18n.lockedString;
 
 type ViewOutput = {
@@ -79,19 +98,41 @@ type ViewOutput = {
 };
 type View = (input: FreestylerChatUiProps, output: ViewOutput, target: HTMLElement) => void;
 
+function selectedElementFilter(maybeNode: SDK.DOMModel.DOMNode|null): SDK.DOMModel.DOMNode|null {
+  if (maybeNode) {
+    return maybeNode.nodeType() === Node.ELEMENT_NODE ? maybeNode : null;
+  }
+
+  return null;
+}
+
 // TODO(ergunsh): Use the WidgetElement instead of separately creating the toolbar.
-function createToolbar(target: HTMLElement, {onClearClick}: {onClearClick: () => void}): void {
+function createToolbar(
+    target: HTMLElement,
+    {onHistoryClick, onNewAgentClick, onDeleteClick}:
+        {onHistoryClick: (event: Event) => void, onNewAgentClick: () => void, onDeleteClick: () => void}): void {
   const toolbarContainer = target.createChild('div', 'freestyler-toolbar-container');
-  const leftToolbar = new UI.Toolbar.Toolbar('', toolbarContainer);
+  const leftToolbar = new UI.Toolbar.Toolbar('freestyler-left-toolbar', toolbarContainer);
   const rightToolbar = new UI.Toolbar.Toolbar('freestyler-right-toolbar', toolbarContainer);
 
-  const clearButton = new UI.Toolbar.ToolbarButton(
-      lockedString(UIStringsNotTranslate.clearChat), 'clear', undefined, 'freestyler.clear');
-  clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, onClearClick);
+  const clearButton =
+      new UI.Toolbar.ToolbarButton(i18nString(UIStrings.newChat), 'plus', undefined, 'freestyler.new-chat');
+  clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, onNewAgentClick);
   leftToolbar.appendToolbarItem(clearButton);
+  leftToolbar.appendSeparator();
+  const historyButton =
+      new UI.Toolbar.ToolbarButton(i18nString(UIStrings.history), 'history', undefined, 'freestyler.history');
+  historyButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, event => {
+    onHistoryClick(event.data);
+  });
+  leftToolbar.appendToolbarItem(historyButton);
+  const deleteButton =
+      new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clearChat), 'bin', undefined, 'freestyler.delete');
+  deleteButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, onDeleteClick);
+  leftToolbar.appendToolbarItem(deleteButton);
 
   const link = UI.XLink.XLink.create(
-      AI_ASSISTANCE_SEND_FEEDBACK, lockedString(UIStringsNotTranslate.sendFeedback), undefined, undefined,
+      AI_ASSISTANCE_SEND_FEEDBACK, i18nString(UIStrings.sendFeedback), undefined, undefined,
       'freestyler.send-feedback');
   link.style.setProperty('display', null);
   link.style.setProperty('text-decoration', 'none');
@@ -100,15 +141,14 @@ function createToolbar(target: HTMLElement, {onClearClick}: {onClearClick: () =>
   rightToolbar.appendToolbarItem(linkItem);
 
   rightToolbar.appendSeparator();
-  const helpButton =
-      new UI.Toolbar.ToolbarButton(lockedString(UIStringsNotTranslate.help), 'help', undefined, 'freestyler.help');
+  const helpButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.help), 'help', undefined, 'freestyler.help');
   helpButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(AI_ASSISTANCE_HELP);
   });
   rightToolbar.appendToolbarItem(helpButton);
 
-  const settingsButton = new UI.Toolbar.ToolbarButton(
-      lockedString(UIStringsNotTranslate.settings), 'gear', undefined, 'freestyler.settings');
+  const settingsButton =
+      new UI.Toolbar.ToolbarButton(i18nString(UIStrings.settings), 'gear', undefined, 'freestyler.settings');
   settingsButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
     void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
   });
@@ -134,10 +174,6 @@ export class FreestylerPanel extends UI.Panel.Panel {
   static panelName = 'freestyler';
 
   #toggleSearchElementAction: UI.ActionRegistration.Action;
-  #selectedElement: SDK.DOMModel.DOMNode|null;
-  #selectedFile: Workspace.UISourceCode.UISourceCode|null;
-  #selectedNetworkRequest: SDK.NetworkRequest.NetworkRequest|null;
-  #selectedStackTrace: Trace.Helpers.TreeHelpers.TraceEntryNodeForAI|null;
   #contentContainer: HTMLElement;
   #aidaClient: Host.AidaClient.AidaClient;
   #freestylerAgent: FreestylerAgent;
@@ -150,6 +186,8 @@ export class FreestylerPanel extends UI.Panel.Panel {
   #freestylerEnabledSetting: Common.Settings.Setting<boolean>|undefined;
   #changeManager = new ChangeManager();
 
+  #agents = new Set<AiAgent<unknown>>();
+
   constructor(private view: View = defaultView, {aidaClient, aidaAvailability, syncInfo}: {
     aidaClient: Host.AidaClient.AidaClient,
     aidaAvailability: Host.AidaClient.AidaAccessPreconditions,
@@ -158,36 +196,26 @@ export class FreestylerPanel extends UI.Panel.Panel {
     super(FreestylerPanel.panelName);
     this.#freestylerEnabledSetting = this.#getAiAssistanceEnabledSetting();
 
-    createToolbar(this.contentElement, {onClearClick: this.#clearMessages.bind(this)});
+    createToolbar(this.contentElement, {
+      onNewAgentClick: this.#clearMessages.bind(this),
+      onHistoryClick: this.#onHistoryClicked.bind(this),
+      onDeleteClick: this.#onDeleteClicked.bind(this),
+    });
     this.#toggleSearchElementAction =
         UI.ActionRegistry.ActionRegistry.instance().getAction('elements.toggle-element-search');
     this.#aidaClient = aidaClient;
     this.#contentContainer = this.contentElement.createChild('div', 'freestyler-chat-ui-container');
 
-    const selectedElementFilter = (maybeNode: SDK.DOMModel.DOMNode|null): SDK.DOMModel.DOMNode|null => {
-      if (maybeNode) {
-        return maybeNode.nodeType() === Node.ELEMENT_NODE ? maybeNode : null;
-      }
-
-      return null;
-    };
-
-    this.#selectedElement = selectedElementFilter(UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode));
-    this.#selectedNetworkRequest = UI.Context.Context.instance().flavor(SDK.NetworkRequest.NetworkRequest);
-    this.#selectedStackTrace = UI.Context.Context.instance().flavor(Trace.Helpers.TreeHelpers.TraceEntryNodeForAI);
-    this.#selectedFile = UI.Context.Context.instance().flavor(Workspace.UISourceCode.UISourceCode);
     this.#viewProps = {
-      state: this.#freestylerEnabledSetting?.getIfNotDisabled() ? FreestylerChatUiState.CHAT_VIEW :
-                                                                  FreestylerChatUiState.CONSENT_VIEW,
+      state: this.#getChatUiState(),
       aidaAvailability,
       messages: [],
       inspectElementToggled: this.#toggleSearchElementAction.toggled(),
-      selectedElement: this.#selectedElement,
-      selectedNetworkRequest: this.#selectedNetworkRequest,
-      selectedStackTrace: this.#selectedStackTrace,
-      selectedFile: this.#selectedFile,
       isLoading: false,
-      onTextSubmit: this.#startConversation.bind(this),
+      onTextSubmit: (text: string) => {
+        void this.#startConversation(text);
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceQuerySubmitted);
+      },
       onInspectElementClick: this.#handleSelectElementClick.bind(this),
       onFeedbackSubmit: this.#handleFeedbackSubmit.bind(this),
       onCancelClick: this.#cancel.bind(this),
@@ -198,51 +226,23 @@ export class FreestylerPanel extends UI.Panel.Panel {
         accountImage: syncInfo.accountImage,
         accountFullName: syncInfo.accountFullName,
       },
-      agentType: AgentType.FREESTYLER,
+      selectedElement: null,
+      selectedFile: null,
+      selectedNetworkRequest: null,
+      selectedAiCallTree: null,
     };
-    this.#toggleSearchElementAction.addEventListener(UI.ActionRegistration.Events.TOGGLED, ev => {
-      this.#viewProps.inspectElementToggled = ev.data;
-      this.doUpdate();
-    });
 
     this.#freestylerAgent = this.#createFreestylerAgent();
     this.#drJonesFileAgent = this.#createDrJonesFileAgent();
     this.#drJonesNetworkAgent = this.#createDrJonesNetworkAgent();
     this.#drJonesPerformanceAgent = this.#createDrJonesPerformanceAgent();
+  }
 
-    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, ev => {
-      if (this.#viewProps.selectedElement === ev.data) {
-        return;
-      }
-
-      this.#viewProps.selectedElement = selectedElementFilter(ev.data);
-      this.doUpdate();
-    });
-    UI.Context.Context.instance().addFlavorChangeListener(SDK.NetworkRequest.NetworkRequest, ev => {
-      if (this.#viewProps.selectedNetworkRequest === ev.data) {
-        return;
-      }
-
-      this.#viewProps.selectedNetworkRequest = Boolean(ev.data) ? ev.data : null;
-      this.doUpdate();
-    });
-    UI.Context.Context.instance().addFlavorChangeListener(Trace.Helpers.TreeHelpers.TraceEntryNodeForAI, ev => {
-      if (this.#viewProps.selectedStackTrace === ev.data) {
-        return;
-      }
-
-      this.#viewProps.selectedStackTrace = Boolean(ev.data) ? ev.data : null;
-      this.doUpdate();
-    });
-    UI.Context.Context.instance().addFlavorChangeListener(Workspace.UISourceCode.UISourceCode, ev => {
-      if (this.#viewProps.selectedFile === ev.data) {
-        return;
-      }
-
-      this.#viewProps.selectedFile = Boolean(ev.data) ? ev.data : null;
-      this.doUpdate();
-    });
-    this.doUpdate();
+  #getChatUiState(): FreestylerChatUiState {
+    const config = Common.Settings.Settings.instance().getHostConfig();
+    const blockedByAge = config.aidaAvailability?.blockedByAge === true;
+    return (this.#freestylerEnabledSetting?.getIfNotDisabled() && !blockedByAge) ? FreestylerChatUiState.CHAT_VIEW :
+                                                                                   FreestylerChatUiState.CONSENT_VIEW;
   }
 
   #getAiAssistanceEnabledSetting(): Common.Settings.Setting<boolean>|undefined {
@@ -254,32 +254,40 @@ export class FreestylerPanel extends UI.Panel.Panel {
   }
 
   #createFreestylerAgent(): FreestylerAgent {
-    return new FreestylerAgent({
+    const agent = new FreestylerAgent({
       aidaClient: this.#aidaClient,
       changeManager: this.#changeManager,
       serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
     });
+    this.#agents.add(agent);
+    return agent;
   }
 
   #createDrJonesFileAgent(): DrJonesFileAgent {
-    return new DrJonesFileAgent({
+    const agent = new DrJonesFileAgent({
       aidaClient: this.#aidaClient,
       serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
     });
+    this.#agents.add(agent);
+    return agent;
   }
 
   #createDrJonesNetworkAgent(): DrJonesNetworkAgent {
-    return new DrJonesNetworkAgent({
+    const agent = new DrJonesNetworkAgent({
       aidaClient: this.#aidaClient,
       serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
     });
+    this.#agents.add(agent);
+    return agent;
   }
 
   #createDrJonesPerformanceAgent(): DrJonesPerformanceAgent {
-    return new DrJonesPerformanceAgent({
+    const agent = new DrJonesPerformanceAgent({
       aidaClient: this.#aidaClient,
       serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
     });
+    this.#agents.add(agent);
+    return agent;
   }
 
   static async instance(opts: {
@@ -287,11 +295,11 @@ export class FreestylerPanel extends UI.Panel.Panel {
   }|undefined = {forceNew: null}): Promise<FreestylerPanel> {
     const {forceNew} = opts;
     if (!freestylerPanelInstance || forceNew) {
-      const aidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
       const aidaClient = new Host.AidaClient.AidaClient();
-      const syncInfo = await new Promise<Host.InspectorFrontendHostAPI.SyncInformation>(
-          resolve => Host.InspectorFrontendHost.InspectorFrontendHostInstance.getSyncInformation(
-              syncInfo => resolve(syncInfo)));
+      const syncInfoPromise = new Promise<Host.InspectorFrontendHostAPI.SyncInformation>(
+          resolve => Host.InspectorFrontendHost.InspectorFrontendHostInstance.getSyncInformation(resolve));
+      const [aidaAvailability, syncInfo] =
+          await Promise.all([Host.AidaClient.AidaClient.checkAccessPreconditions(), syncInfoPromise]);
       freestylerPanelInstance = new FreestylerPanel(defaultView, {aidaClient, aidaAvailability, syncInfo});
     }
 
@@ -302,18 +310,122 @@ export class FreestylerPanel extends UI.Panel.Panel {
     this.registerCSSFiles([freestylerPanelStyles]);
     this.#viewOutput.freestylerChatUi?.restoreScrollPosition();
     this.#viewOutput.freestylerChatUi?.focusTextInput();
+    void this.#handleAidaAvailabilityChange();
+    void this
+        .#handleFreestylerEnabledSettingChanged();  // If the setting was switched on/off while the FreestylerPanel was not shown.
+    this.#viewProps = {
+      ...this.#viewProps,
+      inspectElementToggled: this.#toggleSearchElementAction.toggled(),
+      selectedElement: selectedElementFilter(UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode)),
+      selectedNetworkRequest: UI.Context.Context.instance().flavor(SDK.NetworkRequest.NetworkRequest),
+      selectedAiCallTree: UI.Context.Context.instance().flavor(TimelineUtils.AICallTree.AICallTree),
+      selectedFile: UI.Context.Context.instance().flavor(Workspace.UISourceCode.UISourceCode),
+    };
+    this.doUpdate();
+
     this.#freestylerEnabledSetting?.addChangeListener(this.#handleFreestylerEnabledSettingChanged, this);
+    Host.AidaClient.HostConfigTracker.instance().addEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#handleAidaAvailabilityChange);
+    this.#toggleSearchElementAction.addEventListener(
+        UI.ActionRegistration.Events.TOGGLED, this.#handleSearchElementActionToggled);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.#handleDOMNodeFlavorChange);
+    UI.Context.Context.instance().addFlavorChangeListener(
+        SDK.NetworkRequest.NetworkRequest, this.#handleNetworkRequestFlavorChange);
+    UI.Context.Context.instance().addFlavorChangeListener(
+        TimelineUtils.AICallTree.AICallTree, this.#handleTraceEntryNodeFlavorChange);
+    UI.Context.Context.instance().addFlavorChangeListener(
+        Workspace.UISourceCode.UISourceCode, this.#handleUISourceCodeFlavorChange);
+
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistancePanelOpened);
   }
 
   override willHide(): void {
     this.#freestylerEnabledSetting?.removeChangeListener(this.#handleFreestylerEnabledSettingChanged, this);
+    Host.AidaClient.HostConfigTracker.instance().removeEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#handleAidaAvailabilityChange);
+    this.#toggleSearchElementAction.removeEventListener(
+        UI.ActionRegistration.Events.TOGGLED, this.#handleSearchElementActionToggled);
+    UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.#handleDOMNodeFlavorChange);
+    UI.Context.Context.instance().removeFlavorChangeListener(
+        SDK.NetworkRequest.NetworkRequest, this.#handleNetworkRequestFlavorChange);
+    UI.Context.Context.instance().removeFlavorChangeListener(
+        TimelineUtils.AICallTree.AICallTree, this.#handleTraceEntryNodeFlavorChange);
+    UI.Context.Context.instance().removeFlavorChangeListener(
+        Workspace.UISourceCode.UISourceCode, this.#handleUISourceCodeFlavorChange);
   }
 
-  #handleFreestylerEnabledSettingChanged(): void {
-    this.#viewProps.state =
-        this.#freestylerEnabledSetting?.get() ? FreestylerChatUiState.CHAT_VIEW : FreestylerChatUiState.CONSENT_VIEW;
+  #handleAidaAvailabilityChange = async(): Promise<void> => {
+    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+    if (currentAidaAvailability !== this.#viewProps.aidaAvailability) {
+      this.#viewProps.aidaAvailability = currentAidaAvailability;
+      const syncInfo = await new Promise<Host.InspectorFrontendHostAPI.SyncInformation>(
+          resolve => Host.InspectorFrontendHost.InspectorFrontendHostInstance.getSyncInformation(resolve));
+      this.#viewProps.userInfo = {
+        accountImage: syncInfo.accountImage,
+        accountFullName: syncInfo.accountFullName,
+      };
+      this.#viewProps.state = this.#getChatUiState();
+      this.doUpdate();
+    }
+  };
+
+  #handleSearchElementActionToggled = (ev: Common.EventTarget.EventTargetEvent<boolean>): void => {
+    if (this.#viewProps.inspectElementToggled === ev.data) {
+      return;
+    }
+
+    this.#viewProps.inspectElementToggled = ev.data;
     this.doUpdate();
-  }
+  };
+
+  #handleDOMNodeFlavorChange = (ev: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void => {
+    if (this.#viewProps.selectedElement === ev.data) {
+      return;
+    }
+
+    this.#viewProps.selectedElement = selectedElementFilter(ev.data);
+    this.doUpdate();
+  };
+
+  #handleNetworkRequestFlavorChange =
+      (ev: Common.EventTarget.EventTargetEvent<SDK.NetworkRequest.NetworkRequest>): void => {
+        if (this.#viewProps.selectedNetworkRequest === ev.data) {
+          return;
+        }
+
+        this.#viewProps.selectedNetworkRequest = Boolean(ev.data) ? ev.data : null;
+        this.doUpdate();
+      };
+
+  #handleTraceEntryNodeFlavorChange =
+      (ev: Common.EventTarget.EventTargetEvent<TimelineUtils.AICallTree.AICallTree>): void => {
+        if (this.#viewProps.selectedAiCallTree === ev.data) {
+          return;
+        }
+
+        this.#viewProps.selectedAiCallTree = Boolean(ev.data) ? ev.data : null;
+        this.doUpdate();
+      };
+
+  #handleUISourceCodeFlavorChange =
+      (ev: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void => {
+        if (this.#viewProps.selectedFile === ev.data) {
+          return;
+        }
+
+        this.#viewProps.selectedFile = Boolean(ev.data) ? ev.data : null;
+        this.doUpdate();
+      };
+
+  #handleFreestylerEnabledSettingChanged = (): void => {
+    const nextChatUiState = this.#getChatUiState();
+    if (this.#viewProps.state === nextChatUiState) {
+      return;
+    }
+
+    this.#viewProps.state = nextChatUiState;
+    this.doUpdate();
+  };
 
   doUpdate(): void {
     this.view(this.#viewProps, this.#viewOutput, this.#contentContainer);
@@ -358,97 +470,231 @@ export class FreestylerPanel extends UI.Panel.Panel {
         this.#viewOutput.freestylerChatUi?.focusTextInput();
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.FreestylerOpenedFromElementsPanelFloatingButton);
         this.#viewProps.agentType = AgentType.FREESTYLER;
+        this.#viewProps.messages = [];
         this.doUpdate();
+        void this.#doConversation(this.#freestylerAgent.runFromHistory());
         break;
       }
       case 'freestyler.element-panel-context': {
         this.#viewOutput.freestylerChatUi?.focusTextInput();
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.FreestylerOpenedFromElementsPanel);
         this.#viewProps.agentType = AgentType.FREESTYLER;
+        this.#viewProps.messages = [];
+        this.doUpdate();
+        void this.#doConversation(this.#freestylerAgent.runFromHistory());
+        break;
+      }
+      case 'drjones.network-floating-button': {
+        this.#viewOutput.freestylerChatUi?.focusTextInput();
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.DrJonesOpenedFromNetworkPanelFloatingButton);
+        this.#viewProps.agentType = AgentType.DRJONES_NETWORK_REQUEST;
+        this.#viewProps.messages = [];
         this.doUpdate();
+        void this.#doConversation(this.#drJonesNetworkAgent.runFromHistory());
         break;
       }
       case 'drjones.network-panel-context': {
-        // TODO(samiyac): Add UMA
         this.#viewOutput.freestylerChatUi?.focusTextInput();
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.DrJonesOpenedFromNetworkPanel);
         this.#viewProps.agentType = AgentType.DRJONES_NETWORK_REQUEST;
+        this.#viewProps.messages = [];
         this.doUpdate();
+        void this.#doConversation(this.#drJonesNetworkAgent.runFromHistory());
         break;
       }
       case 'drjones.performance-panel-context': {
-        // TODO(samiyac): Add UMA
         this.#viewOutput.freestylerChatUi?.focusTextInput();
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.DrJonesOpenedFromPerformancePanel);
         this.#viewProps.agentType = AgentType.DRJONES_PERFORMANCE;
+        this.#viewProps.messages = [];
         this.doUpdate();
+        void this.#doConversation(this.#drJonesPerformanceAgent.runFromHistory());
+        break;
+      }
+      case 'drjones.sources-floating-button': {
+        this.#viewOutput.freestylerChatUi?.focusTextInput();
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.DrJonesOpenedFromSourcesPanelFloatingButton);
+        this.#viewProps.agentType = AgentType.DRJONES_FILE;
+        this.#viewProps.messages = [];
+        this.doUpdate();
+        void this.#doConversation(this.#drJonesFileAgent.runFromHistory());
         break;
       }
       case 'drjones.sources-panel-context': {
-        // TODO(samiyac): Add UMA
         this.#viewOutput.freestylerChatUi?.focusTextInput();
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.DrJonesOpenedFromSourcesPanel);
         this.#viewProps.agentType = AgentType.DRJONES_FILE;
+        this.#viewProps.messages = [];
         this.doUpdate();
+        void this.#doConversation(this.#drJonesFileAgent.runFromHistory());
         break;
       }
     }
   }
 
+  #onHistoryClicked(event: Event): void {
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
+
+    for (const agent of [...this.#agents].reverse()) {
+      if (agent.isEmpty) {
+        continue;
+      }
+      const title = agent.title;
+      if (!title) {
+        continue;
+      }
+
+      contextMenu.defaultSection().appendItem(
+          title,
+          () => {
+            void this.#switchAgent(agent);
+          },
+      );
+    }
+
+    void contextMenu.show();
+  }
+
+  #onDeleteClicked(): void {
+    if (!this.#viewProps.agentType) {
+      return;
+    }
+
+    switch (this.#viewProps.agentType) {
+      case AgentType.FREESTYLER:
+        this.#agents.delete(this.#freestylerAgent);
+        this.#freestylerAgent = this.#createFreestylerAgent();
+        break;
+      case AgentType.DRJONES_FILE:
+        this.#agents.delete(this.#drJonesFileAgent);
+        this.#drJonesFileAgent = this.#createDrJonesFileAgent();
+        break;
+      case AgentType.DRJONES_NETWORK_REQUEST:
+        this.#agents.delete(this.#drJonesNetworkAgent);
+        this.#drJonesNetworkAgent = this.#createDrJonesNetworkAgent();
+        break;
+      case AgentType.DRJONES_PERFORMANCE:
+        this.#agents.delete(this.#drJonesPerformanceAgent);
+        this.#drJonesPerformanceAgent = this.#createDrJonesPerformanceAgent();
+        break;
+    }
+    this.#viewProps.messages = [];
+    this.#viewProps.agentType = undefined;
+    this.doUpdate();
+  }
+
+  async #switchAgent(agent: AiAgent<unknown>): Promise<void> {
+    switch (agent.type) {
+      case AgentType.FREESTYLER:
+        if (this.#freestylerAgent === agent && agent.type === this.#viewProps.agentType) {
+          return;
+        }
+        this.#freestylerAgent = agent as FreestylerAgent;
+        break;
+      case AgentType.DRJONES_FILE:
+        if (this.#drJonesFileAgent === agent && agent.type === this.#viewProps.agentType) {
+          return;
+        }
+        this.#drJonesFileAgent = agent as DrJonesFileAgent;
+        break;
+      case AgentType.DRJONES_NETWORK_REQUEST:
+        if (this.#drJonesNetworkAgent === agent && agent.type === this.#viewProps.agentType) {
+          return;
+        }
+        this.#drJonesNetworkAgent = agent as DrJonesNetworkAgent;
+        break;
+      case AgentType.DRJONES_PERFORMANCE:
+        if (this.#drJonesPerformanceAgent === agent && agent.type === this.#viewProps.agentType) {
+          return;
+        }
+        this.#drJonesPerformanceAgent = agent as DrJonesPerformanceAgent;
+        break;
+    }
+    this.#viewProps.messages = [];
+    this.#viewProps.agentType = agent.type;
+    await this.#doConversation(agent.runFromHistory());
+  }
+
   #clearMessages(): void {
     this.#viewProps.messages = [];
     this.#viewProps.isLoading = false;
-    this.#freestylerAgent = this.#createFreestylerAgent();
-    this.#drJonesFileAgent = this.#createDrJonesFileAgent();
-    this.#drJonesNetworkAgent = this.#createDrJonesNetworkAgent();
+    switch (this.#viewProps.agentType) {
+      case AgentType.FREESTYLER:
+        this.#freestylerAgent = this.#createFreestylerAgent();
+        break;
+      case AgentType.DRJONES_FILE:
+        this.#drJonesFileAgent = this.#createDrJonesFileAgent();
+        break;
+      case AgentType.DRJONES_NETWORK_REQUEST:
+        this.#drJonesNetworkAgent = this.#createDrJonesNetworkAgent();
+        break;
+      case AgentType.DRJONES_PERFORMANCE:
+        this.#drJonesPerformanceAgent = this.#createDrJonesPerformanceAgent();
+        break;
+    }
+
     this.#cancel();
     this.doUpdate();
-    UI.ARIAUtils.alert(lockedString(UIStringsNotTranslate.chatCleared));
+    UI.ARIAUtils.alert(i18nString(UIStrings.chatCleared));
   }
 
   #runAbortController = new AbortController();
   #cancel(): void {
     this.#runAbortController.abort();
-    this.#runAbortController = new AbortController();
     this.#viewProps.isLoading = false;
     this.doUpdate();
   }
 
   async #startConversation(text: string): Promise<void> {
-    this.#viewProps.messages.push({
-      entity: ChatMessageEntity.USER,
-      text,
-    });
-    this.#viewProps.isLoading = true;
-    const systemMessage: ModelChatMessage = {
-      entity: ChatMessageEntity.MODEL,
-      steps: [],
-    };
-    this.#viewProps.messages.push(systemMessage);
-    this.doUpdate();
-
+    if (!this.#viewProps.agentType) {
+      return;
+    }
     this.#runAbortController = new AbortController();
     const signal = this.#runAbortController.signal;
 
     let runner: AsyncGenerator<ResponseData, void, void>|undefined;
-    if (this.#viewProps.agentType === AgentType.FREESTYLER) {
-      runner = this.#freestylerAgent.run(text, {signal, selectedElement: this.#viewProps.selectedElement});
-    } else if (this.#viewProps.agentType === AgentType.DRJONES_FILE) {
-      runner = this.#drJonesFileAgent.run(text, {signal, selectedFile: this.#viewProps.selectedFile});
-    } else if (this.#viewProps.agentType === AgentType.DRJONES_NETWORK_REQUEST) {
-      runner =
-          this.#drJonesNetworkAgent.run(text, {signal, selectedNetworkRequest: this.#viewProps.selectedNetworkRequest});
-    } else if (this.#viewProps.agentType === AgentType.DRJONES_PERFORMANCE) {
-      runner =
-          this.#drJonesPerformanceAgent.run(text, {signal, selectedStackTrace: this.#viewProps.selectedStackTrace});
+    switch (this.#viewProps.agentType) {
+      case AgentType.FREESTYLER:
+        runner = this.#freestylerAgent.run(text, {signal, selected: this.#viewProps.selectedElement});
+        break;
+      case AgentType.DRJONES_FILE:
+        runner = this.#drJonesFileAgent.run(text, {signal, selected: this.#viewProps.selectedFile});
+        break;
+      case AgentType.DRJONES_NETWORK_REQUEST:
+        runner = this.#drJonesNetworkAgent.run(text, {signal, selected: this.#viewProps.selectedNetworkRequest});
+        break;
+      case AgentType.DRJONES_PERFORMANCE:
+        runner = this.#drJonesPerformanceAgent.run(text, {signal, selected: this.#viewProps.selectedAiCallTree});
+        break;
     }
 
-    if (!runner) {
-      return;
-    }
+    UI.ARIAUtils.alert(lockedString(UIStringsNotTranslate.answerLoading));
+    await this.#doConversation(runner);
+    UI.ARIAUtils.alert(lockedString(UIStringsNotTranslate.answerReady));
+  }
 
+  async #doConversation(generator: AsyncGenerator<ResponseData, void, void>): Promise<void> {
+    let systemMessage: ModelChatMessage = {
+      entity: ChatMessageEntity.MODEL,
+      steps: [],
+    };
     let step: Step = {isLoading: true};
-    UI.ARIAUtils.alert(lockedString(UIStringsNotTranslate.answerLoading));
-    for await (const data of runner) {
+    for await (const data of generator) {
       step.sideEffect = undefined;
       switch (data.type) {
+        case ResponseType.USER_QUERY: {
+          this.#viewProps.messages.push({
+            entity: ChatMessageEntity.USER,
+            text: data.query,
+          });
+          this.#viewProps.isLoading = true;
+          systemMessage = {
+            entity: ChatMessageEntity.MODEL,
+            steps: [],
+          };
+          this.#viewProps.messages.push(systemMessage);
+          break;
+        }
         case ResponseType.QUERYING: {
           step = {isLoading: true};
           if (!systemMessage.steps.length) {
@@ -457,6 +703,15 @@ export class FreestylerPanel extends UI.Panel.Panel {
 
           break;
         }
+        case ResponseType.CONTEXT: {
+          step.title = data.title;
+          step.contextDetails = data.details;
+          step.isLoading = false;
+          if (systemMessage.steps.at(-1) !== step) {
+            systemMessage.steps.push(step);
+          }
+          break;
+        }
         case ResponseType.TITLE: {
           step.title = data.title;
           if (systemMessage.steps.at(-1) !== step) {
@@ -467,7 +722,6 @@ export class FreestylerPanel extends UI.Panel.Panel {
         case ResponseType.THOUGHT: {
           step.isLoading = false;
           step.thought = data.thought;
-          step.contextDetails = data.contextDetails;
           if (systemMessage.steps.at(-1) !== step) {
             systemMessage.steps.push(step);
           }
@@ -506,10 +760,8 @@ export class FreestylerPanel extends UI.Panel.Panel {
           this.#viewProps.isLoading = false;
           break;
         }
-
         case ResponseType.ERROR: {
           systemMessage.error = data.error;
-          systemMessage.suggestions = [];
           systemMessage.rpcId = undefined;
           this.#viewProps.isLoading = false;
           const lastStep = systemMessage.steps.at(-1);
@@ -528,7 +780,6 @@ export class FreestylerPanel extends UI.Panel.Panel {
       this.doUpdate();
       this.#viewOutput.freestylerChatUi?.scrollToLastMessage();
     }
-    UI.ARIAUtils.alert(lockedString(UIStringsNotTranslate.answerReady));
   }
 }
 
@@ -540,8 +791,10 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
     switch (actionId) {
       case 'freestyler.elements-floating-button':
       case 'freestyler.element-panel-context':
+      case 'drjones.network-floating-button':
       case 'drjones.network-panel-context':
       case 'drjones.performance-panel-context':
+      case 'drjones.sources-floating-button':
       case 'drjones.sources-panel-context': {
         void (async () => {
           const view = UI.ViewManager.ViewManager.instance().view(