chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

package/front_end/panels/freestyler/FreestylerPanel.ts

@@ -7,7 +7,11 @@ 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 Workspace from '../../models/workspace/workspace.js';
+import * as ElementsPanel from '../../panels/elements/elements.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
+import * as NetworkPanel from '../../panels/network/network.js';
+import * as SourcesPanel from '../../panels/sources/sources.js';
+import * as TimelinePanel from '../../panels/timeline/timeline.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';
@@ -15,10 +19,15 @@ import * as LitHtml from '../../ui/lit-html/lit-html.js';
 import {
   AgentType,
   type AiAgent,
+  type ConversationContext,
   ErrorType,
   type ResponseData,
   ResponseType,
+  type SerializedAgent,
 } from './AiAgent.js';
+import {
+  AiHistoryStorage,
+} from './AiHistoryStorage.js';
 import {ChangeManager} from './ChangeManager.js';
 import {
   ChatMessageEntity,
@@ -30,12 +39,14 @@ import {
 } from './components/FreestylerChatUi.js';
 import {
   DrJonesFileAgent,
+  FileContext,
 } from './DrJonesFileAgent.js';
 import {
   DrJonesNetworkAgent,
+  RequestContext,
 } from './DrJonesNetworkAgent.js';
-import {DrJonesPerformanceAgent} from './DrJonesPerformanceAgent.js';
-import {FreestylerAgent} from './FreestylerAgent.js';
+import {CallTreeContext, DrJonesPerformanceAgent} from './DrJonesPerformanceAgent.js';
+import {FreestylerAgent, NodeContext} from './FreestylerAgent.js';
 import freestylerPanelStyles from './freestylerPanel.css.js';
 
 const {html} = LitHtml;
@@ -61,17 +72,29 @@ const UIStrings = {
    */
   sendFeedback: 'Send feedback',
   /**
-   *@description Announcement text for screen readers when the chat is cleared.
+   *@description Announcement text for screen readers when a new chat is created.
+   */
+  newChatCreated: 'New chat created',
+  /**
+   *@description Announcement text for screen readers when the chat is deleted.
    */
-  chatCleared: 'Chat cleared',
+  chatDeleted: 'Chat deleted',
   /**
    *@description AI assistance UI text creating selecting a history entry.
    */
   history: 'History',
   /**
-   *@description AI assistance UI text clearing the current chat session.
+   *@description AI assistance UI text deleting the current chat session.
+   */
+  deleteChat: 'Delete chat',
+  /**
+   *@description AI assistance UI text that deletes all history entries.
+   */
+  clearChatHistory: 'Clear chat history',
+  /**
+   *@description AI assistance UI text explains that he user had no pas conversations.
    */
-  clearChat: 'Clear chat',
+  noPastConversations: 'No past conversations',
 };
 
 /*
@@ -106,55 +129,6 @@ function selectedElementFilter(maybeNode: SDK.DOMModel.DOMNode|null): SDK.DOMMod
   return null;
 }
 
-// TODO(ergunsh): Use the WidgetElement instead of separately creating the toolbar.
-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('freestyler-left-toolbar', toolbarContainer);
-  const rightToolbar = new UI.Toolbar.Toolbar('freestyler-right-toolbar', toolbarContainer);
-
-  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, i18nString(UIStrings.sendFeedback), undefined, undefined,
-      'freestyler.send-feedback');
-  link.style.setProperty('display', null);
-  link.style.setProperty('text-decoration', 'none');
-  link.style.setProperty('padding', '0 var(--sys-size-3)');
-  const linkItem = new UI.Toolbar.ToolbarItem(link);
-  rightToolbar.appendToolbarItem(linkItem);
-
-  rightToolbar.appendSeparator();
-  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(i18nString(UIStrings.settings), 'gear', undefined, 'freestyler.settings');
-  settingsButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
-    void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
-  });
-  rightToolbar.appendToolbarItem(settingsButton);
-}
-
 function defaultView(input: FreestylerChatUiProps, output: ViewOutput, target: HTMLElement): void {
   // clang-format off
   LitHtml.render(html`
@@ -169,6 +143,34 @@ function defaultView(input: FreestylerChatUiProps, output: ViewOutput, target: H
   // clang-format on
 }
 
+function createNodeContext(node: SDK.DOMModel.DOMNode|null): NodeContext|null {
+  if (!node) {
+    return null;
+  }
+  return new NodeContext(node);
+}
+
+function createFileContext(file: Workspace.UISourceCode.UISourceCode|null): FileContext|null {
+  if (!file) {
+    return null;
+  }
+  return new FileContext(file);
+}
+
+function createRequestContext(request: SDK.NetworkRequest.NetworkRequest|null): RequestContext|null {
+  if (!request) {
+    return null;
+  }
+  return new RequestContext(request);
+}
+
+function createCallTreeContext(callTree: TimelineUtils.AICallTree.AICallTree|null): CallTreeContext|null {
+  if (!callTree) {
+    return null;
+  }
+  return new CallTreeContext(callTree);
+}
+
 let freestylerPanelInstance: FreestylerPanel;
 export class FreestylerPanel extends UI.Panel.Panel {
   static panelName = 'freestyler';
@@ -176,17 +178,27 @@ export class FreestylerPanel extends UI.Panel.Panel {
   #toggleSearchElementAction: UI.ActionRegistration.Action;
   #contentContainer: HTMLElement;
   #aidaClient: Host.AidaClient.AidaClient;
-  #freestylerAgent: FreestylerAgent;
-  #drJonesFileAgent: DrJonesFileAgent;
-  #drJonesNetworkAgent: DrJonesNetworkAgent;
-  #drJonesPerformanceAgent: DrJonesPerformanceAgent;
   #viewProps: FreestylerChatUiProps;
   #viewOutput: ViewOutput = {};
   #serverSideLoggingEnabled = isFreestylerServerSideLoggingEnabled();
   #freestylerEnabledSetting: Common.Settings.Setting<boolean>|undefined;
   #changeManager = new ChangeManager();
 
+  #newChatButton =
+      new UI.Toolbar.ToolbarButton(i18nString(UIStrings.newChat), 'plus', undefined, 'freestyler.new-chat');
+  #historyEntriesButton =
+      new UI.Toolbar.ToolbarButton(i18nString(UIStrings.history), 'history', undefined, 'freestyler.history');
+  #deleteHistoryEntryButton =
+      new UI.Toolbar.ToolbarButton(i18nString(UIStrings.deleteChat), 'bin', undefined, 'freestyler.delete');
+
   #agents = new Set<AiAgent<unknown>>();
+  #currentAgent?: AiAgent<unknown>;
+
+  #previousSameOriginContext?: ConversationContext<unknown>;
+  #selectedFile: FileContext|null = null;
+  #selectedElement: NodeContext|null = null;
+  #selectedCallTree: CallTreeContext|null = null;
+  #selectedRequest: RequestContext|null = null;
 
   constructor(private view: View = defaultView, {aidaClient, aidaAvailability, syncInfo}: {
     aidaClient: Host.AidaClient.AidaClient,
@@ -196,11 +208,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
     super(FreestylerPanel.panelName);
     this.#freestylerEnabledSetting = this.#getAiAssistanceEnabledSetting();
 
-    createToolbar(this.contentElement, {
-      onNewAgentClick: this.#clearMessages.bind(this),
-      onHistoryClick: this.#onHistoryClicked.bind(this),
-      onDeleteClick: this.#onDeleteClicked.bind(this),
-    });
+    this.#createToolbar();
     this.#toggleSearchElementAction =
         UI.ActionRegistry.ActionRegistry.instance().getAction('elements.toggle-element-search');
     this.#aidaClient = aidaClient;
@@ -219,23 +227,64 @@ export class FreestylerPanel extends UI.Panel.Panel {
       onInspectElementClick: this.#handleSelectElementClick.bind(this),
       onFeedbackSubmit: this.#handleFeedbackSubmit.bind(this),
       onCancelClick: this.#cancel.bind(this),
-      onSelectedNetworkRequestClick: this.#handleSelectedNetworkRequestClick.bind(this),
-      onSelectedFileRequestClick: this.#handleSelectedFileClick.bind(this),
+      onContextClick: this.#handleContextClick.bind(this),
+      onNewConversation: this.#handleNewChatRequest.bind(this),
       canShowFeedbackForm: this.#serverSideLoggingEnabled,
       userInfo: {
         accountImage: syncInfo.accountImage,
         accountFullName: syncInfo.accountFullName,
       },
-      selectedElement: null,
-      selectedFile: null,
-      selectedNetworkRequest: null,
-      selectedAiCallTree: null,
+      selectedContext: null,
+      blockedByCrossOrigin: false,
+      stripLinks: false,
+      isReadOnly: false,
     };
 
-    this.#freestylerAgent = this.#createFreestylerAgent();
-    this.#drJonesFileAgent = this.#createDrJonesFileAgent();
-    this.#drJonesNetworkAgent = this.#createDrJonesNetworkAgent();
-    this.#drJonesPerformanceAgent = this.#createDrJonesPerformanceAgent();
+    for (const historyEntry of AiHistoryStorage.instance().getHistory()) {
+      this.#createAgent(historyEntry.type, historyEntry);
+    }
+  }
+
+  #createToolbar(): void {
+    const toolbarContainer = this.contentElement.createChild('div', 'freestyler-toolbar-container');
+    const leftToolbar = new UI.Toolbar.Toolbar('freestyler-left-toolbar', toolbarContainer);
+    const rightToolbar = new UI.Toolbar.Toolbar('freestyler-right-toolbar', toolbarContainer);
+
+    this.#newChatButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.#handleNewChatRequest.bind(this));
+    leftToolbar.appendToolbarItem(this.#newChatButton);
+    leftToolbar.appendSeparator();
+
+    this.#historyEntriesButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, event => {
+      this.#onHistoryClicked(event.data);
+    });
+    leftToolbar.appendToolbarItem(this.#historyEntriesButton);
+    this.#deleteHistoryEntryButton.addEventListener(
+        UI.Toolbar.ToolbarButton.Events.CLICK, this.#onDeleteClicked.bind(this));
+    leftToolbar.appendToolbarItem(this.#deleteHistoryEntryButton);
+
+    const link = UI.XLink.XLink.create(
+        AI_ASSISTANCE_SEND_FEEDBACK, i18nString(UIStrings.sendFeedback), undefined, undefined,
+        'freestyler.send-feedback');
+    link.style.setProperty('display', null);
+    link.style.setProperty('color', 'var(--sys-color-primary)');
+    link.style.setProperty('margin', '0 var(--sys-size-3)');
+    link.style.setProperty('height', 'calc(100% - 6px)');
+    const linkItem = new UI.Toolbar.ToolbarItem(link);
+    rightToolbar.appendToolbarItem(linkItem);
+
+    rightToolbar.appendSeparator();
+    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(i18nString(UIStrings.settings), 'gear', undefined, 'freestyler.settings');
+    settingsButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
+      void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
+    });
+    rightToolbar.appendToolbarItem(settingsButton);
   }
 
   #getChatUiState(): FreestylerChatUiState {
@@ -253,41 +302,44 @@ export class FreestylerPanel extends UI.Panel.Panel {
     }
   }
 
-  #createFreestylerAgent(): FreestylerAgent {
-    const agent = new FreestylerAgent({
+  #createAgent(agentType: AgentType, history?: SerializedAgent): AiAgent<unknown> {
+    const options = {
       aidaClient: this.#aidaClient,
-      changeManager: this.#changeManager,
       serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
-    });
-    this.#agents.add(agent);
-    return agent;
-  }
+    };
+    let agent: AiAgent<unknown>;
+    switch (agentType) {
+      case AgentType.FREESTYLER: {
+        agent = new FreestylerAgent({
+          ...options,
+          changeManager: this.#changeManager,
+        });
+        break;
+      }
+      case AgentType.DRJONES_NETWORK_REQUEST: {
+        agent = new DrJonesNetworkAgent(options);
+        break;
+      }
+      case AgentType.DRJONES_FILE: {
+        agent = new DrJonesFileAgent(options);
+        break;
+      }
+      case AgentType.DRJONES_PERFORMANCE: {
+        agent = new DrJonesPerformanceAgent(options);
+        break;
+      }
+    }
 
-  #createDrJonesFileAgent(): DrJonesFileAgent {
-    const agent = new DrJonesFileAgent({
-      aidaClient: this.#aidaClient,
-      serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
-    });
-    this.#agents.add(agent);
-    return agent;
-  }
+    if (history) {
+      agent.populateHistoryFromStorage(history);
+    }
 
-  #createDrJonesNetworkAgent(): DrJonesNetworkAgent {
-    const agent = new DrJonesNetworkAgent({
-      aidaClient: this.#aidaClient,
-      serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
-    });
     this.#agents.add(agent);
     return agent;
   }
 
-  #createDrJonesPerformanceAgent(): DrJonesPerformanceAgent {
-    const agent = new DrJonesPerformanceAgent({
-      aidaClient: this.#aidaClient,
-      serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
-    });
-    this.#agents.add(agent);
-    return agent;
+  #updateToolbarState(): void {
+    this.#deleteHistoryEntryButton.setVisible(Boolean(this.#currentAgent && !this.#currentAgent.isEmpty));
   }
 
   static async instance(opts: {
@@ -306,22 +358,62 @@ export class FreestylerPanel extends UI.Panel.Panel {
     return freestylerPanelInstance;
   }
 
+  // We select the default agent based on the open panels if
+  // there isn't any active conversation.
+  #selectDefaultAgentIfNeeded(): void {
+    // If there already is an agent and not it is not empty,
+    // we don't automatically change the agent.
+    if (this.#currentAgent && !this.#currentAgent.isEmpty) {
+      return;
+    }
+
+    const config = Common.Settings.Settings.instance().getHostConfig();
+    const isElementsPanelVisible =
+        Boolean(UI.Context.Context.instance().flavor(ElementsPanel.ElementsPanel.ElementsPanel));
+    const isNetworkPanelVisible = Boolean(UI.Context.Context.instance().flavor(NetworkPanel.NetworkPanel.NetworkPanel));
+    const isSourcesPanelVisible = Boolean(UI.Context.Context.instance().flavor(SourcesPanel.SourcesPanel.SourcesPanel));
+    const isPerformancePanelVisible =
+        Boolean(UI.Context.Context.instance().flavor(TimelinePanel.TimelinePanel.TimelinePanel));
+
+    let targetAgentType: AgentType|undefined = undefined;
+    if (isElementsPanelVisible && config.devToolsFreestyler?.enabled) {
+      targetAgentType = AgentType.FREESTYLER;
+    } else if (isNetworkPanelVisible && config.devToolsAiAssistanceNetworkAgent?.enabled) {
+      targetAgentType = AgentType.DRJONES_NETWORK_REQUEST;
+    } else if (isSourcesPanelVisible && config.devToolsAiAssistanceFileAgent?.enabled) {
+      targetAgentType = AgentType.DRJONES_FILE;
+    } else if (isPerformancePanelVisible && config.devToolsAiAssistancePerformanceAgent?.enabled) {
+      targetAgentType = AgentType.DRJONES_PERFORMANCE;
+    }
+
+    this.#currentAgent = targetAgentType ? this.#createAgent(targetAgentType) : undefined;
+    this.#viewProps.agentType = targetAgentType;
+    this.#onContextSelectionChanged();
+    void this.doUpdate();
+  }
+
   override wasShown(): void {
     this.registerCSSFiles([freestylerPanelStyles]);
     this.#viewOutput.freestylerChatUi?.restoreScrollPosition();
     this.#viewOutput.freestylerChatUi?.focusTextInput();
+    this.#selectDefaultAgentIfNeeded();
     void this.#handleAidaAvailabilityChange();
     void this
         .#handleFreestylerEnabledSettingChanged();  // If the setting was switched on/off while the FreestylerPanel was not shown.
+    this.#selectedElement =
+        createNodeContext(selectedElementFilter(UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode))),
+    this.#selectedRequest =
+        createRequestContext(UI.Context.Context.instance().flavor(SDK.NetworkRequest.NetworkRequest)),
+    this.#selectedCallTree =
+        createCallTreeContext(UI.Context.Context.instance().flavor(TimelineUtils.AICallTree.AICallTree)),
+    this.#selectedFile = createFileContext(UI.Context.Context.instance().flavor(Workspace.UISourceCode.UISourceCode)),
     this.#viewProps = {
       ...this.#viewProps,
+      agentType: this.#currentAgent?.type,
       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),
+      selectedContext: this.#getConversationContext(),
     };
-    this.doUpdate();
+    void this.doUpdate();
 
     this.#freestylerEnabledSetting?.addChangeListener(this.#handleFreestylerEnabledSettingChanged, this);
     Host.AidaClient.HostConfigTracker.instance().addEventListener(
@@ -335,7 +427,14 @@ export class FreestylerPanel extends UI.Panel.Panel {
         TimelineUtils.AICallTree.AICallTree, this.#handleTraceEntryNodeFlavorChange);
     UI.Context.Context.instance().addFlavorChangeListener(
         Workspace.UISourceCode.UISourceCode, this.#handleUISourceCodeFlavorChange);
-
+    UI.Context.Context.instance().addFlavorChangeListener(
+        ElementsPanel.ElementsPanel.ElementsPanel, this.#selectDefaultAgentIfNeeded, this);
+    UI.Context.Context.instance().addFlavorChangeListener(
+        NetworkPanel.NetworkPanel.NetworkPanel, this.#selectDefaultAgentIfNeeded, this);
+    UI.Context.Context.instance().addFlavorChangeListener(
+        SourcesPanel.SourcesPanel.SourcesPanel, this.#selectDefaultAgentIfNeeded, this);
+    UI.Context.Context.instance().addFlavorChangeListener(
+        TimelinePanel.TimelinePanel.TimelinePanel, this.#selectDefaultAgentIfNeeded, this);
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistancePanelOpened);
   }
 
@@ -352,6 +451,14 @@ export class FreestylerPanel extends UI.Panel.Panel {
         TimelineUtils.AICallTree.AICallTree, this.#handleTraceEntryNodeFlavorChange);
     UI.Context.Context.instance().removeFlavorChangeListener(
         Workspace.UISourceCode.UISourceCode, this.#handleUISourceCodeFlavorChange);
+    UI.Context.Context.instance().removeFlavorChangeListener(
+        ElementsPanel.ElementsPanel.ElementsPanel, this.#selectDefaultAgentIfNeeded, this);
+    UI.Context.Context.instance().removeFlavorChangeListener(
+        NetworkPanel.NetworkPanel.NetworkPanel, this.#selectDefaultAgentIfNeeded, this);
+    UI.Context.Context.instance().removeFlavorChangeListener(
+        SourcesPanel.SourcesPanel.SourcesPanel, this.#selectDefaultAgentIfNeeded, this);
+    UI.Context.Context.instance().removeFlavorChangeListener(
+        TimelinePanel.TimelinePanel.TimelinePanel, this.#selectDefaultAgentIfNeeded, this);
   }
 
   #handleAidaAvailabilityChange = async(): Promise<void> => {
@@ -365,7 +472,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
         accountFullName: syncInfo.accountFullName,
       };
       this.#viewProps.state = this.#getChatUiState();
-      this.doUpdate();
+      void this.doUpdate();
     }
   };
 
@@ -375,46 +482,49 @@ export class FreestylerPanel extends UI.Panel.Panel {
     }
 
     this.#viewProps.inspectElementToggled = ev.data;
-    this.doUpdate();
+    void this.doUpdate();
   };
 
   #handleDOMNodeFlavorChange = (ev: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void => {
-    if (this.#viewProps.selectedElement === ev.data) {
+    if (this.#selectedElement?.getItem() === ev.data) {
       return;
     }
 
-    this.#viewProps.selectedElement = selectedElementFilter(ev.data);
-    this.doUpdate();
+    this.#selectedElement = createNodeContext(selectedElementFilter(ev.data));
+    this.#onContextSelectionChanged();
   };
 
   #handleNetworkRequestFlavorChange =
       (ev: Common.EventTarget.EventTargetEvent<SDK.NetworkRequest.NetworkRequest>): void => {
-        if (this.#viewProps.selectedNetworkRequest === ev.data) {
+        if (this.#selectedRequest?.getItem() === ev.data) {
           return;
         }
 
-        this.#viewProps.selectedNetworkRequest = Boolean(ev.data) ? ev.data : null;
-        this.doUpdate();
+        this.#selectedRequest = Boolean(ev.data) ? new RequestContext(ev.data) : null;
+        this.#onContextSelectionChanged();
       };
 
   #handleTraceEntryNodeFlavorChange =
       (ev: Common.EventTarget.EventTargetEvent<TimelineUtils.AICallTree.AICallTree>): void => {
-        if (this.#viewProps.selectedAiCallTree === ev.data) {
+        if (this.#selectedCallTree?.getItem() === ev.data) {
           return;
         }
 
-        this.#viewProps.selectedAiCallTree = Boolean(ev.data) ? ev.data : null;
-        this.doUpdate();
+        this.#selectedCallTree = Boolean(ev.data) ? new CallTreeContext(ev.data) : null;
+        this.#onContextSelectionChanged();
       };
 
   #handleUISourceCodeFlavorChange =
       (ev: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void => {
-        if (this.#viewProps.selectedFile === ev.data) {
+        const newFile = ev.data;
+        if (!newFile) {
           return;
         }
-
-        this.#viewProps.selectedFile = Boolean(ev.data) ? ev.data : null;
-        this.doUpdate();
+        if (this.#selectedFile?.getItem() === newFile) {
+          return;
+        }
+        this.#selectedFile = new FileContext(ev.data);
+        this.#onContextSelectionChanged();
       };
 
   #handleFreestylerEnabledSettingChanged = (): void => {
@@ -424,10 +534,11 @@ export class FreestylerPanel extends UI.Panel.Panel {
     }
 
     this.#viewProps.state = nextChatUiState;
-    this.doUpdate();
+    void this.doUpdate();
   };
 
-  doUpdate(): void {
+  override async doUpdate(): Promise<void> {
+    this.#updateToolbarState();
     this.view(this.#viewProps, this.#viewOutput, this.#contentContainer);
   }
 
@@ -450,90 +561,98 @@ export class FreestylerPanel extends UI.Panel.Panel {
     });
   }
 
-  #handleSelectedNetworkRequestClick(): void|Promise<void> {
-    if (this.#viewProps.selectedNetworkRequest) {
+  #handleContextClick(): void|Promise<void> {
+    const context = this.#viewProps.selectedContext;
+    if (context instanceof RequestContext) {
       const requestLocation = NetworkForward.UIRequestLocation.UIRequestLocation.tab(
-          this.#viewProps.selectedNetworkRequest, NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT);
+          context.getItem(), NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT);
       return Common.Revealer.reveal(requestLocation);
     }
-  }
-
-  #handleSelectedFileClick(): void|Promise<void> {
-    if (this.#viewProps.selectedFile) {
-      return Common.Revealer.reveal(this.#viewProps.selectedFile.uiLocation(0, 0));
+    if (context instanceof FileContext) {
+      return Common.Revealer.reveal(context.getItem().uiLocation(0, 0));
     }
+    if (context instanceof CallTreeContext) {
+      const trace = new SDK.TraceObject.RevealableEvent(context.getItem().selectedNode.event);
+      return Common.Revealer.reveal(trace);
+    }
+    // Node picker is using linkifier.
   }
 
   handleAction(actionId: string): void {
+    if (this.#viewProps.isLoading) {
+      // If running some queries already, focus the input with the abort
+      // button and do nothing.
+      this.#viewOutput.freestylerChatUi?.focusTextInput();
+      return;
+    }
+
+    let targetAgentType: AgentType|undefined;
     switch (actionId) {
       case 'freestyler.elements-floating-button': {
-        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());
+        targetAgentType = AgentType.FREESTYLER;
         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());
+        targetAgentType = AgentType.FREESTYLER;
         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());
+        targetAgentType = AgentType.DRJONES_NETWORK_REQUEST;
         break;
       }
       case 'drjones.network-panel-context': {
-        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());
+        targetAgentType = AgentType.DRJONES_NETWORK_REQUEST;
         break;
       }
       case 'drjones.performance-panel-context': {
-        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());
+        targetAgentType = AgentType.DRJONES_PERFORMANCE;
         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());
+        targetAgentType = AgentType.DRJONES_FILE;
         break;
       }
       case 'drjones.sources-panel-context': {
-        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());
+        targetAgentType = AgentType.DRJONES_FILE;
         break;
       }
     }
+
+    if (!targetAgentType) {
+      return;
+    }
+
+    let newAgent = false;
+    if (!this.#currentAgent || this.#currentAgent.type !== targetAgentType || this.#currentAgent.isHistoryEntry ||
+        targetAgentType === AgentType.DRJONES_PERFORMANCE) {
+      this.#currentAgent = this.#createAgent(targetAgentType);
+      newAgent = true;
+    }
+    this.#viewProps.agentType = this.#currentAgent.type;
+    this.#viewOutput.freestylerChatUi?.focusTextInput();
+    this.#onContextSelectionChanged();
+    void this.doUpdate();
+    if (newAgent) {
+      this.#viewProps.messages = [];
+      this.#viewProps.isReadOnly = false;
+      void this.#doConversation(this.#currentAgent.runFromHistory());
+    }
   }
 
   #onHistoryClicked(event: Event): void {
-    const contextMenu = new UI.ContextMenu.ContextMenu(event);
+    const boundingRect = this.#historyEntriesButton.element.getBoundingClientRect();
+    const contextMenu = new UI.ContextMenu.ContextMenu(event, {
+      x: boundingRect.left,
+      y: boundingRect.bottom,
+      useSoftMenu: true,
+    });
 
     for (const agent of [...this.#agents].reverse()) {
       if (agent.isEmpty) {
@@ -544,130 +663,161 @@ export class FreestylerPanel extends UI.Panel.Panel {
         continue;
       }
 
-      contextMenu.defaultSection().appendItem(
-          title,
-          () => {
-            void this.#switchAgent(agent);
-          },
-      );
+      contextMenu.defaultSection().appendItem(title, () => {
+        void this.#switchAgent(agent);
+      });
+    }
+
+    const historyEmpty = contextMenu.defaultSection().items.length === 0;
+    if (historyEmpty) {
+      contextMenu.defaultSection().appendItem(i18nString(UIStrings.noPastConversations), () => {}, {
+        disabled: true,
+      });
     }
 
+    contextMenu.footerSection().appendItem(
+        i18nString(UIStrings.clearChatHistory),
+        () => {
+          this.#clearHistory();
+        },
+        {
+          disabled: historyEmpty,
+        },
+    );
+
     void contextMenu.show();
   }
 
+  #clearHistory(): void {
+    this.#agents = new Set();
+    this.#currentAgent = undefined;
+    this.#viewProps.messages = [];
+    this.#viewProps.agentType = undefined;
+    this.#runAbortController.abort();
+    void AiHistoryStorage.instance().deleteAll();
+    void this.doUpdate();
+  }
+
   #onDeleteClicked(): void {
-    if (!this.#viewProps.agentType) {
-      return;
+    if (this.#currentAgent) {
+      this.#agents.delete(this.#currentAgent);
+      void AiHistoryStorage.instance().deleteHistoryEntry(this.#currentAgent.id);
+      this.#currentAgent = undefined;
+      this.#cancel();
     }
 
-    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();
+
+    this.#selectDefaultAgentIfNeeded();
+    this.#onContextSelectionChanged();
+    void this.doUpdate();
+    UI.ARIAUtils.alert(i18nString(UIStrings.chatDeleted));
   }
 
   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;
+    if (this.#currentAgent === agent) {
+      return;
     }
+
+    this.#currentAgent = agent;
     this.#viewProps.messages = [];
     this.#viewProps.agentType = agent.type;
+    this.#onContextSelectionChanged();
+    this.#viewProps.isReadOnly = true;
     await this.#doConversation(agent.runFromHistory());
   }
 
-  #clearMessages(): void {
+  #handleNewChatRequest(): void {
     this.#viewProps.messages = [];
     this.#viewProps.isLoading = false;
-    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.#currentAgent = undefined;
     this.#cancel();
-    this.doUpdate();
-    UI.ARIAUtils.alert(i18nString(UIStrings.chatCleared));
+
+    this.#selectDefaultAgentIfNeeded();
+    void this.doUpdate();
+    UI.ARIAUtils.alert(i18nString(UIStrings.newChatCreated));
+  }
+
+  #handleCrossOriginChatCancellation(): void {
+    if (this.#previousSameOriginContext) {
+      this.#onContextSelectionChanged(this.#previousSameOriginContext);
+    }
   }
 
   #runAbortController = new AbortController();
   #cancel(): void {
     this.#runAbortController.abort();
     this.#viewProps.isLoading = false;
-    this.doUpdate();
+    void this.doUpdate();
   }
 
-  async #startConversation(text: string): Promise<void> {
-    if (!this.#viewProps.agentType) {
+  #onContextSelectionChanged(contextToRestore?: ConversationContext<unknown>): void {
+    if (!this.#currentAgent) {
+      this.#viewProps.blockedByCrossOrigin = false;
+      void this.doUpdate();
       return;
     }
-    this.#runAbortController = new AbortController();
-    const signal = this.#runAbortController.signal;
+    const currentContext = contextToRestore ?? this.#getConversationContext();
+    this.#viewProps.selectedContext = currentContext;
+    if (!currentContext) {
+      this.#viewProps.blockedByCrossOrigin = false;
+      this.#viewProps.requiresNewConversation = false;
+      void this.doUpdate();
+      return;
+    }
+    this.#viewProps.blockedByCrossOrigin = !currentContext.isOriginAllowed(this.#currentAgent.origin);
+    if (!this.#viewProps.blockedByCrossOrigin) {
+      this.#previousSameOriginContext = currentContext;
+    }
+    if (this.#viewProps.blockedByCrossOrigin && this.#previousSameOriginContext) {
+      this.#viewProps.onCancelCrossOriginChat = this.#handleCrossOriginChatCancellation.bind(this);
+    }
+    this.#viewProps.isReadOnly = this.#currentAgent.isHistoryEntry;
+    this.#viewProps.requiresNewConversation = this.#currentAgent.type === AgentType.DRJONES_PERFORMANCE &&
+        Boolean(this.#currentAgent.context) && this.#currentAgent.context !== currentContext;
+    this.#viewProps.stripLinks = this.#viewProps.agentType === AgentType.DRJONES_PERFORMANCE;
+    void this.doUpdate();
+  }
 
-    let runner: AsyncGenerator<ResponseData, void, void>|undefined;
-    switch (this.#viewProps.agentType) {
+  #getConversationContext(): ConversationContext<unknown>|null {
+    if (!this.#currentAgent) {
+      return null;
+    }
+    let context: ConversationContext<unknown>|null;
+    switch (this.#currentAgent.type) {
       case AgentType.FREESTYLER:
-        runner = this.#freestylerAgent.run(text, {signal, selected: this.#viewProps.selectedElement});
+        context = this.#selectedElement;
         break;
       case AgentType.DRJONES_FILE:
-        runner = this.#drJonesFileAgent.run(text, {signal, selected: this.#viewProps.selectedFile});
+        context = this.#selectedFile;
         break;
       case AgentType.DRJONES_NETWORK_REQUEST:
-        runner = this.#drJonesNetworkAgent.run(text, {signal, selected: this.#viewProps.selectedNetworkRequest});
+        context = this.#selectedRequest;
         break;
       case AgentType.DRJONES_PERFORMANCE:
-        runner = this.#drJonesPerformanceAgent.run(text, {signal, selected: this.#viewProps.selectedAiCallTree});
+        context = this.#selectedCallTree;
         break;
     }
+    return context;
+  }
 
+  async #startConversation(text: string): Promise<void> {
+    if (!this.#currentAgent) {
+      return;
+    }
+    this.#runAbortController = new AbortController();
+    const signal = this.#runAbortController.signal;
+    const context = this.#getConversationContext();
+    // If a different context is provided, it must be from the same origin.
+    if (context && !context.isOriginAllowed(this.#currentAgent.origin)) {
+      // This error should not be reached. If it happens, some
+      // invariants do not hold anymore.
+      throw new Error('cross-origin context data should not be included');
+    }
+    const runner = this.#currentAgent.run(text, {
+      signal,
+      selected: context,
+    });
     UI.ARIAUtils.alert(lockedString(UIStringsNotTranslate.answerLoading));
     await this.#doConversation(runner);
     UI.ARIAUtils.alert(lockedString(UIStringsNotTranslate.answerReady));
@@ -679,6 +829,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
       steps: [],
     };
     let step: Step = {isLoading: true};
+    this.#viewProps.isLoading = true;
     for await (const data of generator) {
       step.sideEffect = undefined;
       switch (data.type) {
@@ -687,7 +838,6 @@ export class FreestylerPanel extends UI.Panel.Panel {
             entity: ChatMessageEntity.USER,
             text: data.query,
           });
-          this.#viewProps.isLoading = true;
           systemMessage = {
             entity: ChatMessageEntity.MODEL,
             steps: [],
@@ -757,13 +907,11 @@ export class FreestylerPanel extends UI.Panel.Panel {
             systemMessage.steps.pop();
           }
           step.isLoading = false;
-          this.#viewProps.isLoading = false;
           break;
         }
         case ResponseType.ERROR: {
           systemMessage.error = data.error;
           systemMessage.rpcId = undefined;
-          this.#viewProps.isLoading = false;
           const lastStep = systemMessage.steps.at(-1);
           if (lastStep) {
             // Mark the last step as cancelled to make the UI feel better.
@@ -777,9 +925,20 @@ export class FreestylerPanel extends UI.Panel.Panel {
         }
       }
 
-      this.doUpdate();
-      this.#viewOutput.freestylerChatUi?.scrollToLastMessage();
+      void this.doUpdate();
+
+      // This handles scrolling to the bottom for live conversations when:
+      // * User submits the query & the context step is shown.
+      // * There is a side effect dialog  shown.
+      if (!this.#viewProps.isReadOnly &&
+          (data.type === ResponseType.CONTEXT || data.type === ResponseType.SIDE_EFFECT)) {
+        this.#viewOutput.freestylerChatUi?.scrollToBottom();
+      }
     }
+
+    this.#viewProps.isLoading = false;
+    this.#viewOutput.freestylerChatUi?.finishTextAnimations();
+    void this.doUpdate();
   }
 }