chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/panels/freestyler/FreestylerPanel.ts

@@ -6,16 +6,26 @@ 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 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';
 
-import {ErrorType, type ResponseData, ResponseType} from './AiAgent.js';
-import {ChangeManager} from './ChangeManager.js';
 import {
   AgentType,
+  type AiAgent,
+  type ConversationContext,
+  ErrorType,
+  type ResponseData,
+  ResponseType,
+} from './AiAgent.js';
+import {ChangeManager} from './ChangeManager.js';
+import {
   ChatMessageEntity,
   FreestylerChatUi,
   type ModelChatMessage,
@@ -25,12 +35,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;
@@ -38,14 +50,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.
    */
@@ -59,9 +68,36 @@ const UIStringsNotTranslate = {
    */
   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.
    */
-  chatCleared: 'Chat cleared',
+  newChatCreated: 'New chat created',
+  /**
+   *@description Announcement text for screen readers when the chat is deleted.
+   */
+  chatDeleted: 'Chat deleted',
+  /**
+   *@description AI assistance UI text creating selecting a history entry.
+   */
+  history: 'History',
+  /**
+   *@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.
+   */
+  noPastConversations: 'No past conversations',
+};
+
+/*
+* 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 +108,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,40 +117,12 @@ type ViewOutput = {
 };
 type View = (input: FreestylerChatUiProps, output: ViewOutput, target: HTMLElement) => void;
 
-// TODO(ergunsh): Use the WidgetElement instead of separately creating the toolbar.
-function createToolbar(target: HTMLElement, {onClearClick}: {onClearClick: () => void}): void {
-  const toolbarContainer = target.createChild('div', 'freestyler-toolbar-container');
-  const leftToolbar = new UI.Toolbar.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);
-  leftToolbar.appendToolbarItem(clearButton);
-
-  const link = UI.XLink.XLink.create(
-      AI_ASSISTANCE_SEND_FEEDBACK, lockedString(UIStringsNotTranslate.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(lockedString(UIStringsNotTranslate.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');
-  settingsButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
-    void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
-  });
-  rightToolbar.appendToolbarItem(settingsButton);
+function selectedElementFilter(maybeNode: SDK.DOMModel.DOMNode|null): SDK.DOMModel.DOMNode|null {
+  if (maybeNode) {
+    return maybeNode.nodeType() === Node.ELEMENT_NODE ? maybeNode : null;
+  }
+
+  return null;
 }
 
 function defaultView(input: FreestylerChatUiProps, output: ViewOutput, target: HTMLElement): void {
@@ -129,27 +139,62 @@ 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';
 
   #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;
-  #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>;
+
+  #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,
     aidaAvailability: Host.AidaClient.AidaAccessPreconditions,
@@ -158,91 +203,85 @@ export class FreestylerPanel extends UI.Panel.Panel {
     super(FreestylerPanel.panelName);
     this.#freestylerEnabledSetting = this.#getAiAssistanceEnabledSetting();
 
-    createToolbar(this.contentElement, {onClearClick: this.#clearMessages.bind(this)});
+    this.#createToolbar();
     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),
-      onSelectedNetworkRequestClick: this.#handleSelectedNetworkRequestClick.bind(this),
-      onSelectedFileRequestClick: this.#handleSelectedFileClick.bind(this),
+      onContextClick: this.#handleContextClick.bind(this),
+      onNewConversation: this.#newChat.bind(this),
       canShowFeedbackForm: this.#serverSideLoggingEnabled,
       userInfo: {
         accountImage: syncInfo.accountImage,
         accountFullName: syncInfo.accountFullName,
       },
-      agentType: AgentType.FREESTYLER,
+      selectedContext: null,
+      blockedByCrossOrigin: false,
+      stripLinks: false,
+      isReadOnly: false,
     };
-    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();
+  #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);
 
-    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, ev => {
-      if (this.#viewProps.selectedElement === ev.data) {
-        return;
-      }
+    this.#newChatButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.#newChat.bind(this));
+    leftToolbar.appendToolbarItem(this.#newChatButton);
+    leftToolbar.appendSeparator();
 
-      this.#viewProps.selectedElement = selectedElementFilter(ev.data);
-      this.doUpdate();
+    this.#historyEntriesButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, event => {
+      this.#onHistoryClicked(event.data);
     });
-    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();
+    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('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);
     });
-    UI.Context.Context.instance().addFlavorChangeListener(Trace.Helpers.TreeHelpers.TraceEntryNodeForAI, ev => {
-      if (this.#viewProps.selectedStackTrace === ev.data) {
-        return;
-      }
+    rightToolbar.appendToolbarItem(helpButton);
 
-      this.#viewProps.selectedStackTrace = Boolean(ev.data) ? ev.data : null;
-      this.doUpdate();
+    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');
     });
-    UI.Context.Context.instance().addFlavorChangeListener(Workspace.UISourceCode.UISourceCode, ev => {
-      if (this.#viewProps.selectedFile === ev.data) {
-        return;
-      }
+    rightToolbar.appendToolbarItem(settingsButton);
+  }
 
-      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 {
@@ -253,33 +292,58 @@ export class FreestylerPanel extends UI.Panel.Panel {
     }
   }
 
+  #createAgent(agentType: AgentType): AiAgent<unknown> {
+    switch (agentType) {
+      case AgentType.FREESTYLER:
+        return this.#createFreestylerAgent();
+      case AgentType.DRJONES_FILE:
+        return this.#createDrJonesFileAgent();
+      case AgentType.DRJONES_NETWORK_REQUEST:
+        return this.#createDrJonesNetworkAgent();
+      case AgentType.DRJONES_PERFORMANCE:
+        return this.#createDrJonesPerformanceAgent();
+    }
+  }
+
+  #updateToolbarState(): void {
+    this.#deleteHistoryEntryButton.setVisible(Boolean(this.#currentAgent && !this.#currentAgent.isEmpty));
+  }
+
   #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,35 +351,198 @@ 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});
     }
 
     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();
+    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(),
+      selectedContext: this.#getConversationContext(),
+    };
+    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);
+    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);
   }
 
   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);
+    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);
   }
 
-  #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.#selectedElement?.getItem() === ev.data) {
+      return;
+    }
+
+    this.#selectedElement = createNodeContext(selectedElementFilter(ev.data));
+    this.#onContextSelectionChanged();
+  };
+
+  #handleNetworkRequestFlavorChange =
+      (ev: Common.EventTarget.EventTargetEvent<SDK.NetworkRequest.NetworkRequest>): void => {
+        if (this.#selectedRequest?.getItem() === ev.data) {
+          return;
+        }
+
+        this.#selectedRequest = Boolean(ev.data) ? new RequestContext(ev.data) : null;
+        this.#onContextSelectionChanged();
+      };
+
+  #handleTraceEntryNodeFlavorChange =
+      (ev: Common.EventTarget.EventTargetEvent<TimelineUtils.AICallTree.AICallTree>): void => {
+        if (this.#selectedCallTree?.getItem() === ev.data) {
+          return;
+        }
+
+        this.#selectedCallTree = Boolean(ev.data) ? new CallTreeContext(ev.data) : null;
+        this.#onContextSelectionChanged();
+      };
+
+  #handleUISourceCodeFlavorChange =
+      (ev: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void => {
+        const newFile = ev.data;
+        if (!newFile) {
+          return;
+        }
+        if (this.#selectedFile?.getItem() === newFile) {
+          return;
+        }
+        this.#selectedFile = new FileContext(ev.data);
+        this.#onContextSelectionChanged();
+      };
+
+  #handleFreestylerEnabledSettingChanged = (): void => {
+    const nextChatUiState = this.#getChatUiState();
+    if (this.#viewProps.state === nextChatUiState) {
+      return;
+    }
+
+    this.#viewProps.state = nextChatUiState;
+    this.doUpdate();
+  };
 
   doUpdate(): void {
+    this.#updateToolbarState();
     this.view(this.#viewProps, this.#viewOutput, this.#contentContainer);
   }
 
@@ -338,117 +565,270 @@ 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.doUpdate();
+        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.doUpdate();
+        targetAgentType = AgentType.FREESTYLER;
+        break;
+      }
+      case 'drjones.network-floating-button': {
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.DrJonesOpenedFromNetworkPanelFloatingButton);
+        targetAgentType = AgentType.DRJONES_NETWORK_REQUEST;
         break;
       }
       case 'drjones.network-panel-context': {
-        // TODO(samiyac): Add UMA
-        this.#viewOutput.freestylerChatUi?.focusTextInput();
-        this.#viewProps.agentType = AgentType.DRJONES_NETWORK_REQUEST;
-        this.doUpdate();
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.DrJonesOpenedFromNetworkPanel);
+        targetAgentType = AgentType.DRJONES_NETWORK_REQUEST;
         break;
       }
       case 'drjones.performance-panel-context': {
-        // TODO(samiyac): Add UMA
-        this.#viewOutput.freestylerChatUi?.focusTextInput();
-        this.#viewProps.agentType = AgentType.DRJONES_PERFORMANCE;
-        this.doUpdate();
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.DrJonesOpenedFromPerformancePanel);
+        targetAgentType = AgentType.DRJONES_PERFORMANCE;
+        break;
+      }
+      case 'drjones.sources-floating-button': {
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.DrJonesOpenedFromSourcesPanelFloatingButton);
+        targetAgentType = AgentType.DRJONES_FILE;
         break;
       }
       case 'drjones.sources-panel-context': {
-        // TODO(samiyac): Add UMA
-        this.#viewOutput.freestylerChatUi?.focusTextInput();
-        this.#viewProps.agentType = AgentType.DRJONES_FILE;
-        this.doUpdate();
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.DrJonesOpenedFromSourcesPanel);
+        targetAgentType = AgentType.DRJONES_FILE;
         break;
       }
     }
+
+    if (!targetAgentType) {
+      return;
+    }
+
+    if (!this.#currentAgent || this.#currentAgent.type !== targetAgentType || this.#currentAgent.isHistoryEntry ||
+        targetAgentType === AgentType.DRJONES_PERFORMANCE) {
+      this.#currentAgent = this.#createAgent(targetAgentType);
+    }
+    this.#viewProps.agentType = this.#currentAgent.type;
+    this.#viewOutput.freestylerChatUi?.focusTextInput();
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.FreestylerOpenedFromElementsPanelFloatingButton);
+    this.#viewProps.messages = [];
+    this.#onContextSelectionChanged();
+    this.doUpdate();
+    this.#viewProps.isReadOnly = false;
+    void this.#doConversation(this.#currentAgent.runFromHistory());
   }
 
-  #clearMessages(): void {
+  #onHistoryClicked(event: Event): void {
+    const boundingRect = this.#historyEntriesButton.element.getBoundingClientRect();
+    const contextMenu = new UI.ContextMenu.ContextMenu(event, {
+      x: boundingRect.left,
+      y: boundingRect.bottom,
+    });
+
+    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);
+      });
+    }
+
+    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.doUpdate();
+  }
+
+  #onDeleteClicked(): void {
+    if (this.#currentAgent) {
+      this.#agents.delete(this.#currentAgent);
+      this.#currentAgent = undefined;
+    }
+
+    this.#viewProps.messages = [];
+
+    this.#selectDefaultAgentIfNeeded();
+    this.#onContextSelectionChanged();
+    this.doUpdate();
+    UI.ARIAUtils.alert(i18nString(UIStrings.chatDeleted));
+  }
+
+  async #switchAgent(agent: AiAgent<unknown>): Promise<void> {
+    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());
+  }
+
+  #newChat(): void {
     this.#viewProps.messages = [];
     this.#viewProps.isLoading = false;
-    this.#freestylerAgent = this.#createFreestylerAgent();
-    this.#drJonesFileAgent = this.#createDrJonesFileAgent();
-    this.#drJonesNetworkAgent = this.#createDrJonesNetworkAgent();
+    this.#currentAgent = undefined;
     this.#cancel();
+
+    this.#selectDefaultAgentIfNeeded();
     this.doUpdate();
-    UI.ARIAUtils.alert(lockedString(UIStringsNotTranslate.chatCleared));
+    UI.ARIAUtils.alert(i18nString(UIStrings.newChatCreated));
   }
 
   #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);
+  #onContextSelectionChanged(): void {
+    if (!this.#currentAgent) {
+      this.#viewProps.blockedByCrossOrigin = false;
+      this.doUpdate();
+      return;
+    }
+    const currentContext = this.#getConversationContext();
+    this.#viewProps.selectedContext = currentContext;
+    if (!currentContext) {
+      this.#viewProps.blockedByCrossOrigin = false;
+      this.#viewProps.requiresNewConversation = false;
+      this.doUpdate();
+      return;
+    }
+    this.#viewProps.blockedByCrossOrigin = !currentContext.isOriginAllowed(this.#currentAgent.origin);
+    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;
     this.doUpdate();
+  }
 
-    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});
+  #getConversationContext(): ConversationContext<unknown>|null {
+    if (!this.#currentAgent) {
+      return null;
+    }
+    let context: ConversationContext<unknown>|null;
+    switch (this.#currentAgent.type) {
+      case AgentType.FREESTYLER:
+        context = this.#selectedElement;
+        break;
+      case AgentType.DRJONES_FILE:
+        context = this.#selectedFile;
+        break;
+      case AgentType.DRJONES_NETWORK_REQUEST:
+        context = this.#selectedRequest;
+        break;
+      case AgentType.DRJONES_PERFORMANCE:
+        context = this.#selectedCallTree;
+        break;
     }
+    return context;
+  }
 
-    if (!runner) {
+  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));
+  }
 
+  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 +837,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 +856,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 +894,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 +914,6 @@ export class FreestylerPanel extends UI.Panel.Panel {
       this.doUpdate();
       this.#viewOutput.freestylerChatUi?.scrollToLastMessage();
     }
-    UI.ARIAUtils.alert(lockedString(UIStringsNotTranslate.answerReady));
   }
 }
 
@@ -540,8 +925,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(