chrome-devtools-frontend 1.0.1386602 → 1.0.1418433

package/front_end/panels/{freestyler/FreestylerPanel.ts → ai_assistance/AiAssistancePanel.ts}

@@ -1,20 +1,24 @@
 // Copyright 2024 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+
+import '../../ui/legacy/legacy.js';
+
 import * as Common from '../../core/common/common.js';
 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 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 * as Lit from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as ElementsPanel from '../elements/elements.js';
+import * as NetworkForward from '../network/forward/forward.js';
+import * as NetworkPanel from '../network/network.js';
+import * as SourcesPanel from '../sources/sources.js';
+import * as TimelinePanel from '../timeline/timeline.js';
+import * as TimelineUtils from '../timeline/utils/utils.js';
 
 import {
   AgentType,
@@ -23,33 +27,31 @@ import {
   ErrorType,
   type ResponseData,
   ResponseType,
-  type SerializedAgent,
-} from './AiAgent.js';
+} from './agents/AiAgent.js';
+import {
+  FileAgent,
+  FileContext,
+} from './agents/FileAgent.js';
 import {
-  AiHistoryStorage,
-} from './AiHistoryStorage.js';
+  NetworkAgent,
+  RequestContext,
+} from './agents/NetworkAgent.js';
+import {CallTreeContext, PerformanceAgent} from './agents/PerformanceAgent.js';
+import {InsightContext, PerformanceInsightsAgent} from './agents/PerformanceInsightsAgent.js';
+import {NodeContext, StylingAgent, StylingAgentWithFunctionCalling} from './agents/StylingAgent.js';
+import aiAssistancePanelStyles from './aiAssistancePanel.css.js';
+import {AiHistoryStorage, Conversation, ConversationType} from './AiHistoryStorage.js';
 import {ChangeManager} from './ChangeManager.js';
 import {
   ChatMessageEntity,
-  FreestylerChatUi,
+  ChatView,
   type ModelChatMessage,
-  type Props as FreestylerChatUiProps,
-  State as FreestylerChatUiState,
+  type Props as ChatViewProps,
+  State as ChatViewState,
   type Step,
-} from './components/FreestylerChatUi.js';
-import {
-  DrJonesFileAgent,
-  FileContext,
-} from './DrJonesFileAgent.js';
-import {
-  DrJonesNetworkAgent,
-  RequestContext,
-} from './DrJonesNetworkAgent.js';
-import {CallTreeContext, DrJonesPerformanceAgent} from './DrJonesPerformanceAgent.js';
-import {FreestylerAgent, NodeContext} from './FreestylerAgent.js';
-import freestylerPanelStyles from './freestylerPanel.css.js';
+} from './components/ChatView.js';
 
-const {html} = LitHtml;
+const {html} = Lit;
 
 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;
@@ -84,13 +86,13 @@ const UIStrings = {
    */
   history: 'History',
   /**
-   *@description AI assistance UI text deleting the current chat session.
+   *@description AI assistance UI text deleting the current chat session from local history.
    */
-  deleteChat: 'Delete chat',
+  deleteChat: 'Delete local chat',
   /**
-   *@description AI assistance UI text that deletes all history entries.
+   *@description AI assistance UI text that deletes all local history entries.
    */
-  clearChatHistory: 'Clear chat history',
+  clearChatHistory: 'Clear local chats',
   /**
    *@description AI assistance UI text explains that he user had no pas conversations.
    */
@@ -112,14 +114,14 @@ const UIStringsNotTranslate = {
   answerReady: 'Answer ready',
 };
 
-const str_ = i18n.i18n.registerUIStrings('panels/freestyler/FreestylerPanel.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/AiAssistancePanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const lockedString = i18n.i18n.lockedString;
 
-type ViewOutput = {
-  freestylerChatUi?: FreestylerChatUi,
-};
-type View = (input: FreestylerChatUiProps, output: ViewOutput, target: HTMLElement) => void;
+interface ViewOutput {
+  chatView?: ChatView;
+}
+type View = (input: ChatViewProps, output: ViewOutput, target: HTMLElement) => void;
 
 function selectedElementFilter(maybeNode: SDK.DOMModel.DOMNode|null): SDK.DOMModel.DOMNode|null {
   if (maybeNode) {
@@ -129,17 +131,17 @@ function selectedElementFilter(maybeNode: SDK.DOMModel.DOMNode|null): SDK.DOMMod
   return null;
 }
 
-function defaultView(input: FreestylerChatUiProps, output: ViewOutput, target: HTMLElement): void {
+function defaultView(input: ChatViewProps, output: ViewOutput, target: HTMLElement): void {
   // clang-format off
-  LitHtml.render(html`
-    <devtools-freestyler-chat-ui .props=${input} ${LitHtml.Directives.ref((el: Element|undefined) => {
-      if (!el || !(el instanceof FreestylerChatUi)) {
+  Lit.render(html`
+    <devtools-ai-chat-view .props=${input} ${Lit.Directives.ref((el: Element|undefined) => {
+      if (!el || !(el instanceof ChatView)) {
         return;
       }
 
-      output.freestylerChatUi = el;
-    })}></devtools-freestyler-chat-ui>
-  `, target, {host: input}); // eslint-disable-line rulesdir/lit_html_host_this
+      output.chatView = el;
+    })}></devtools-ai-chat-view>
+  `, target, {host: input});
   // clang-format on
 }
 
@@ -170,19 +172,43 @@ function createCallTreeContext(callTree: TimelineUtils.AICallTree.AICallTree|nul
   }
   return new CallTreeContext(callTree);
 }
+function createPerfInsightContext(insight: TimelineUtils.InsightAIContext.InsightAIContext|null): InsightContext|null {
+  if (!insight) {
+    return null;
+  }
+  return new InsightContext(insight);
+}
 
-let freestylerPanelInstance: FreestylerPanel;
-export class FreestylerPanel extends UI.Panel.Panel {
+function agentTypeToConversationType(type: AgentType): ConversationType {
+  switch (type) {
+    case AgentType.STYLING:
+      return ConversationType.STYLING;
+    case AgentType.NETWORK:
+      return ConversationType.NETWORK;
+    case AgentType.FILE:
+      return ConversationType.FILE;
+    case AgentType.PERFORMANCE:
+      return ConversationType.PERFORMANCE;
+    case AgentType.PERFORMANCE_INSIGHT:
+      return ConversationType.PERFORMANCE_INSIGHT;
+    case AgentType.PATCH:
+      throw new Error('PATCH AgentType does not have a corresponding ConversationType.');
+  }
+}
+
+let panelInstance: AiAssistancePanel;
+export class AiAssistancePanel extends UI.Panel.Panel {
   static panelName = 'freestyler';
 
   #toggleSearchElementAction: UI.ActionRegistration.Action;
   #contentContainer: HTMLElement;
   #aidaClient: Host.AidaClient.AidaClient;
-  #viewProps: FreestylerChatUiProps;
+  #viewProps: ChatViewProps;
   #viewOutput: ViewOutput = {};
-  #serverSideLoggingEnabled = isFreestylerServerSideLoggingEnabled();
-  #freestylerEnabledSetting: Common.Settings.Setting<boolean>|undefined;
+  #serverSideLoggingEnabled = isAiAssistanceServerSideLoggingEnabled();
+  #aiAssistanceEnabledSetting: Common.Settings.Setting<boolean>|undefined;
   #changeManager = new ChangeManager();
+  #mutex = new Common.Mutex.Mutex();
 
   #newChatButton =
       new UI.Toolbar.ToolbarButton(i18nString(UIStrings.newChat), 'plus', undefined, 'freestyler.new-chat');
@@ -191,13 +217,15 @@ export class FreestylerPanel extends UI.Panel.Panel {
   #deleteHistoryEntryButton =
       new UI.Toolbar.ToolbarButton(i18nString(UIStrings.deleteChat), 'bin', undefined, 'freestyler.delete');
 
-  #agents = new Set<AiAgent<unknown>>();
   #currentAgent?: AiAgent<unknown>;
+  #currentConversation?: Conversation;
+  #conversations: Conversation[] = [];
 
   #previousSameOriginContext?: ConversationContext<unknown>;
   #selectedFile: FileContext|null = null;
   #selectedElement: NodeContext|null = null;
   #selectedCallTree: CallTreeContext|null = null;
+  #selectedInsight: InsightContext|null = null;
   #selectedRequest: RequestContext|null = null;
 
   constructor(private view: View = defaultView, {aidaClient, aidaAvailability, syncInfo}: {
@@ -205,14 +233,15 @@ export class FreestylerPanel extends UI.Panel.Panel {
     aidaAvailability: Host.AidaClient.AidaAccessPreconditions,
     syncInfo: Host.InspectorFrontendHostAPI.SyncInformation,
   }) {
-    super(FreestylerPanel.panelName);
-    this.#freestylerEnabledSetting = this.#getAiAssistanceEnabledSetting();
+    super(AiAssistancePanel.panelName);
+    this.registerRequiredCSS(aiAssistancePanelStyles);
+    this.#aiAssistanceEnabledSetting = this.#getAiAssistanceEnabledSetting();
 
     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');
+    this.#contentContainer = this.contentElement.createChild('div', 'chat-container');
 
     this.#viewProps = {
       state: this.#getChatUiState(),
@@ -240,15 +269,17 @@ export class FreestylerPanel extends UI.Panel.Panel {
       isReadOnly: false,
     };
 
-    for (const historyEntry of AiHistoryStorage.instance().getHistory()) {
-      this.#createAgent(historyEntry.type, historyEntry);
-    }
+    this.#conversations = AiHistoryStorage.instance().getHistory().map(item => Conversation.fromSerialized(item));
   }
 
   #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);
+    const toolbarContainer = this.contentElement.createChild('div', 'toolbar-container');
+    toolbarContainer.setAttribute('jslog', VisualLogging.toolbar().toString());
+    toolbarContainer.role = 'toolbar';
+    const leftToolbar = toolbarContainer.createChild('devtools-toolbar', 'freestyler-left-toolbar');
+    leftToolbar.role = 'presentation';
+    const rightToolbar = toolbarContainer.createChild('devtools-toolbar', 'freestyler-right-toolbar');
+    rightToolbar.role = 'presentation';
 
     this.#newChatButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.#handleNewChatRequest.bind(this));
     leftToolbar.appendToolbarItem(this.#newChatButton);
@@ -287,11 +318,11 @@ export class FreestylerPanel extends UI.Panel.Panel {
     rightToolbar.appendToolbarItem(settingsButton);
   }
 
-  #getChatUiState(): FreestylerChatUiState {
+  #getChatUiState(): ChatViewState {
     const config = Common.Settings.Settings.instance().getHostConfig();
     const blockedByAge = config.aidaAvailability?.blockedByAge === true;
-    return (this.#freestylerEnabledSetting?.getIfNotDisabled() && !blockedByAge) ? FreestylerChatUiState.CHAT_VIEW :
-                                                                                   FreestylerChatUiState.CONSENT_VIEW;
+    return (this.#aiAssistanceEnabledSetting?.getIfNotDisabled() && !blockedByAge) ? ChatViewState.CHAT_VIEW :
+                                                                                     ChatViewState.CONSENT_VIEW;
   }
 
   #getAiAssistanceEnabledSetting(): Common.Settings.Setting<boolean>|undefined {
@@ -302,68 +333,77 @@ export class FreestylerPanel extends UI.Panel.Panel {
     }
   }
 
-  #createAgent(agentType: AgentType, history?: SerializedAgent): AiAgent<unknown> {
+  #createAgent(agentType: AgentType): AiAgent<unknown> {
     const options = {
       aidaClient: this.#aidaClient,
       serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
     };
     let agent: AiAgent<unknown>;
     switch (agentType) {
-      case AgentType.FREESTYLER: {
-        agent = new FreestylerAgent({
+      case AgentType.STYLING: {
+        agent = new StylingAgent({
           ...options,
           changeManager: this.#changeManager,
         });
+        if (isAiAssistanceStylingWithFunctionCallingEnabled()) {
+          agent = new StylingAgentWithFunctionCalling({
+            ...options,
+            changeManager: this.#changeManager,
+          });
+        }
+
         break;
       }
-      case AgentType.DRJONES_NETWORK_REQUEST: {
-        agent = new DrJonesNetworkAgent(options);
+      case AgentType.NETWORK: {
+        agent = new NetworkAgent(options);
         break;
       }
-      case AgentType.DRJONES_FILE: {
-        agent = new DrJonesFileAgent(options);
+      case AgentType.FILE: {
+        agent = new FileAgent(options);
         break;
       }
-      case AgentType.DRJONES_PERFORMANCE: {
-        agent = new DrJonesPerformanceAgent(options);
+      case AgentType.PERFORMANCE: {
+        agent = new PerformanceAgent(options);
         break;
       }
+      case AgentType.PERFORMANCE_INSIGHT: {
+        agent = new PerformanceInsightsAgent(options);
+        break;
+      }
+      case AgentType.PATCH: {
+        throw new Error('AI Assistance does not support direct usage of the patch agent');
+      }
     }
-
-    if (history) {
-      agent.populateHistoryFromStorage(history);
-    }
-
-    this.#agents.add(agent);
     return agent;
   }
 
   #updateToolbarState(): void {
-    this.#deleteHistoryEntryButton.setVisible(Boolean(this.#currentAgent && !this.#currentAgent.isEmpty));
+    this.#deleteHistoryEntryButton.setVisible(Boolean(this.#currentConversation && !this.#currentConversation.isEmpty));
   }
 
   static async instance(opts: {
     forceNew: boolean|null,
-  }|undefined = {forceNew: null}): Promise<FreestylerPanel> {
+  }|undefined = {forceNew: null}): Promise<AiAssistancePanel> {
     const {forceNew} = opts;
-    if (!freestylerPanelInstance || forceNew) {
+    if (!panelInstance || forceNew) {
       const aidaClient = new Host.AidaClient.AidaClient();
       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});
+      panelInstance = new AiAssistancePanel(defaultView, {aidaClient, aidaAvailability, syncInfo});
     }
 
-    return freestylerPanelInstance;
+    return panelInstance;
   }
 
   // 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) {
+    // If there already is an agent and if it is not empty,
+    // we don't automatically change the agent. In addition to this,
+    // we don't change the current agent when there is a message in flight.
+    if ((this.#currentAgent && !this.#currentAgent.isEmpty) || this.#viewProps.isLoading) {
       return;
     }
 
@@ -377,35 +417,59 @@ export class FreestylerPanel extends UI.Panel.Panel {
 
     let targetAgentType: AgentType|undefined = undefined;
     if (isElementsPanelVisible && config.devToolsFreestyler?.enabled) {
-      targetAgentType = AgentType.FREESTYLER;
+      targetAgentType = AgentType.STYLING;
     } else if (isNetworkPanelVisible && config.devToolsAiAssistanceNetworkAgent?.enabled) {
-      targetAgentType = AgentType.DRJONES_NETWORK_REQUEST;
+      targetAgentType = AgentType.NETWORK;
     } else if (isSourcesPanelVisible && config.devToolsAiAssistanceFileAgent?.enabled) {
-      targetAgentType = AgentType.DRJONES_FILE;
+      targetAgentType = AgentType.FILE;
     } else if (isPerformancePanelVisible && config.devToolsAiAssistancePerformanceAgent?.enabled) {
-      targetAgentType = AgentType.DRJONES_PERFORMANCE;
+      targetAgentType = AgentType.PERFORMANCE;
+    } else if (
+        isPerformancePanelVisible && config.devToolsAiAssistancePerformanceAgent?.enabled &&
+        config.devToolsAiAssistancePerformanceAgent?.insightsEnabled) {
+      targetAgentType = AgentType.PERFORMANCE_INSIGHT;
+    }
+
+    const agent = targetAgentType ? this.#createAgent(targetAgentType) : undefined;
+    this.#updateAgentState(agent);
+  }
+
+  #updateAgentState(agent?: AiAgent<unknown>): void {
+    if (this.#currentAgent !== agent) {
+      this.#cancel();
+      this.#currentAgent = agent;
+      this.#viewProps.agentType = this.#currentAgent?.type;
+      this.#viewProps.messages = [];
+      this.#viewProps.changeSummary = undefined;
+      this.#viewProps.isLoading = false;
+      if (this.#currentAgent?.type) {
+        this.#currentConversation =
+            new Conversation(agentTypeToConversationType(this.#currentAgent.type), [], agent?.id, false);
+        this.#conversations.push(this.#currentConversation);
+        this.#viewProps.isReadOnly = false;
+      }
     }
 
-    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();
+    super.wasShown();
+    this.#viewOutput.chatView?.restoreScrollPosition();
+    this.#viewOutput.chatView?.focusTextInput();
     this.#selectDefaultAgentIfNeeded();
     void this.#handleAidaAvailabilityChange();
     void this
-        .#handleFreestylerEnabledSettingChanged();  // If the setting was switched on/off while the FreestylerPanel was not shown.
+        .#handleAiAssistanceEnabledSettingChanged();  // If the setting was switched on/off while the AiAssistancePanel 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.#selectedInsight =
+        createPerfInsightContext(UI.Context.Context.instance().flavor(TimelineUtils.InsightAIContext.InsightAIContext));
     this.#selectedFile = createFileContext(UI.Context.Context.instance().flavor(Workspace.UISourceCode.UISourceCode)),
     this.#viewProps = {
       ...this.#viewProps,
@@ -415,7 +479,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
     };
     void this.doUpdate();
 
-    this.#freestylerEnabledSetting?.addChangeListener(this.#handleFreestylerEnabledSettingChanged, this);
+    this.#aiAssistanceEnabledSetting?.addChangeListener(this.#handleAiAssistanceEnabledSettingChanged, this);
     Host.AidaClient.HostConfigTracker.instance().addEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#handleAidaAvailabilityChange);
     this.#toggleSearchElementAction.addEventListener(
@@ -435,11 +499,15 @@ export class FreestylerPanel extends UI.Panel.Panel {
         SourcesPanel.SourcesPanel.SourcesPanel, this.#selectDefaultAgentIfNeeded, this);
     UI.Context.Context.instance().addFlavorChangeListener(
         TimelinePanel.TimelinePanel.TimelinePanel, this.#selectDefaultAgentIfNeeded, this);
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.DOMModel.DOMModel, SDK.DOMModel.Events.AttrModified, this.#handleDOMNodeAttrChange, this);
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.DOMModel.DOMModel, SDK.DOMModel.Events.AttrRemoved, this.#handleDOMNodeAttrChange, this);
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistancePanelOpened);
   }
 
   override willHide(): void {
-    this.#freestylerEnabledSetting?.removeChangeListener(this.#handleFreestylerEnabledSettingChanged, this);
+    this.#aiAssistanceEnabledSetting?.removeChangeListener(this.#handleAiAssistanceEnabledSettingChanged, this);
     Host.AidaClient.HostConfigTracker.instance().removeEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#handleAidaAvailabilityChange);
     this.#toggleSearchElementAction.removeEventListener(
@@ -459,6 +527,18 @@ export class FreestylerPanel extends UI.Panel.Panel {
         SourcesPanel.SourcesPanel.SourcesPanel, this.#selectDefaultAgentIfNeeded, this);
     UI.Context.Context.instance().removeFlavorChangeListener(
         TimelinePanel.TimelinePanel.TimelinePanel, this.#selectDefaultAgentIfNeeded, this);
+    SDK.TargetManager.TargetManager.instance().removeModelListener(
+        SDK.DOMModel.DOMModel,
+        SDK.DOMModel.Events.AttrModified,
+        this.#handleDOMNodeAttrChange,
+        this,
+    );
+    SDK.TargetManager.TargetManager.instance().removeModelListener(
+        SDK.DOMModel.DOMModel,
+        SDK.DOMModel.Events.AttrRemoved,
+        this.#handleDOMNodeAttrChange,
+        this,
+    );
   }
 
   #handleAidaAvailabilityChange = async(): Promise<void> => {
@@ -491,9 +571,18 @@ export class FreestylerPanel extends UI.Panel.Panel {
     }
 
     this.#selectedElement = createNodeContext(selectedElementFilter(ev.data));
-    this.#onContextSelectionChanged();
+    this.#updateAgentState(this.#currentAgent);
   };
 
+  #handleDOMNodeAttrChange =
+      (ev: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode, name: string}>): void => {
+        if (this.#selectedElement?.getItem() === ev.data.node) {
+          if (ev.data.name === 'class' || ev.data.name === 'id') {
+            void this.doUpdate();
+          }
+        }
+      };
+
   #handleNetworkRequestFlavorChange =
       (ev: Common.EventTarget.EventTargetEvent<SDK.NetworkRequest.NetworkRequest>): void => {
         if (this.#selectedRequest?.getItem() === ev.data) {
@@ -501,7 +590,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
         }
 
         this.#selectedRequest = Boolean(ev.data) ? new RequestContext(ev.data) : null;
-        this.#onContextSelectionChanged();
+        this.#updateAgentState(this.#currentAgent);
       };
 
   #handleTraceEntryNodeFlavorChange =
@@ -511,7 +600,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
         }
 
         this.#selectedCallTree = Boolean(ev.data) ? new CallTreeContext(ev.data) : null;
-        this.#onContextSelectionChanged();
+        this.#updateAgentState(this.#currentAgent);
       };
 
   #handleUISourceCodeFlavorChange =
@@ -524,10 +613,10 @@ export class FreestylerPanel extends UI.Panel.Panel {
           return;
         }
         this.#selectedFile = new FileContext(ev.data);
-        this.#onContextSelectionChanged();
+        this.#updateAgentState(this.#currentAgent);
       };
 
-  #handleFreestylerEnabledSettingChanged = (): void => {
+  #handleAiAssistanceEnabledSettingChanged = (): void => {
     const nextChatUiState = this.#getChatUiState();
     if (this.#viewProps.state === nextChatUiState) {
       return;
@@ -537,7 +626,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
     void this.doUpdate();
   };
 
-  override async doUpdate(): Promise<void> {
+  async doUpdate(): Promise<void> {
     this.#updateToolbarState();
     this.view(this.#viewProps, this.#viewOutput, this.#contentContainer);
   }
@@ -546,7 +635,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
     void this.#toggleSearchElementAction.execute();
   }
 
-  #handleFeedbackSubmit(rpcId: number, rating: Host.AidaClient.Rating, feedback?: string): void {
+  #handleFeedbackSubmit(rpcId: Host.AidaClient.RpcGlobalId, rating: Host.AidaClient.Rating, feedback?: string): void {
     void this.#aidaClient.registerClientEvent({
       corresponding_aida_rpc_global_id: rpcId,
       disable_user_content_logging: !this.#serverSideLoggingEnabled,
@@ -582,45 +671,45 @@ export class FreestylerPanel extends UI.Panel.Panel {
     if (this.#viewProps.isLoading) {
       // If running some queries already, focus the input with the abort
       // button and do nothing.
-      this.#viewOutput.freestylerChatUi?.focusTextInput();
+      this.#viewOutput.chatView?.focusTextInput();
       return;
     }
 
     let targetAgentType: AgentType|undefined;
     switch (actionId) {
       case 'freestyler.elements-floating-button': {
-        Host.userMetrics.actionTaken(Host.UserMetrics.Action.FreestylerOpenedFromElementsPanelFloatingButton);
-        targetAgentType = AgentType.FREESTYLER;
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceOpenedFromElementsPanelFloatingButton);
+        targetAgentType = AgentType.STYLING;
         break;
       }
       case 'freestyler.element-panel-context': {
-        Host.userMetrics.actionTaken(Host.UserMetrics.Action.FreestylerOpenedFromElementsPanel);
-        targetAgentType = AgentType.FREESTYLER;
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceOpenedFromElementsPanel);
+        targetAgentType = AgentType.STYLING;
         break;
       }
       case 'drjones.network-floating-button': {
-        Host.userMetrics.actionTaken(Host.UserMetrics.Action.DrJonesOpenedFromNetworkPanelFloatingButton);
-        targetAgentType = AgentType.DRJONES_NETWORK_REQUEST;
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceOpenedFromNetworkPanelFloatingButton);
+        targetAgentType = AgentType.NETWORK;
         break;
       }
       case 'drjones.network-panel-context': {
-        Host.userMetrics.actionTaken(Host.UserMetrics.Action.DrJonesOpenedFromNetworkPanel);
-        targetAgentType = AgentType.DRJONES_NETWORK_REQUEST;
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceOpenedFromNetworkPanel);
+        targetAgentType = AgentType.NETWORK;
         break;
       }
       case 'drjones.performance-panel-context': {
-        Host.userMetrics.actionTaken(Host.UserMetrics.Action.DrJonesOpenedFromPerformancePanel);
-        targetAgentType = AgentType.DRJONES_PERFORMANCE;
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceOpenedFromPerformancePanel);
+        targetAgentType = AgentType.PERFORMANCE;
         break;
       }
       case 'drjones.sources-floating-button': {
-        Host.userMetrics.actionTaken(Host.UserMetrics.Action.DrJonesOpenedFromSourcesPanelFloatingButton);
-        targetAgentType = AgentType.DRJONES_FILE;
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceOpenedFromSourcesPanelFloatingButton);
+        targetAgentType = AgentType.FILE;
         break;
       }
       case 'drjones.sources-panel-context': {
-        Host.userMetrics.actionTaken(Host.UserMetrics.Action.DrJonesOpenedFromSourcesPanel);
-        targetAgentType = AgentType.DRJONES_FILE;
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceOpenedFromSourcesPanel);
+        targetAgentType = AgentType.FILE;
         break;
       }
     }
@@ -629,21 +718,13 @@ export class FreestylerPanel extends UI.Panel.Panel {
       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());
+    let agent = this.#currentAgent;
+    if (!this.#currentConversation || !this.#currentAgent || this.#currentAgent.type !== targetAgentType ||
+        this.#currentConversation?.isEmpty || targetAgentType === AgentType.PERFORMANCE) {
+      agent = this.#createAgent(targetAgentType);
     }
+    this.#updateAgentState(agent);
+    this.#viewOutput.chatView?.focusTextInput();
   }
 
   #onHistoryClicked(event: Event): void {
@@ -654,18 +735,18 @@ export class FreestylerPanel extends UI.Panel.Panel {
       useSoftMenu: true,
     });
 
-    for (const agent of [...this.#agents].reverse()) {
-      if (agent.isEmpty) {
+    for (const conversation of [...this.#conversations].reverse()) {
+      if (conversation.isEmpty) {
         continue;
       }
-      const title = agent.title;
+      const title = conversation.title;
       if (!title) {
         continue;
       }
 
-      contextMenu.defaultSection().appendItem(title, () => {
-        void this.#switchAgent(agent);
-      });
+      contextMenu.defaultSection().appendCheckboxItem(title, () => {
+        void this.#openConversation(conversation);
+      }, {checked: (this.#currentConversation === conversation)});
     }
 
     const historyEmpty = contextMenu.defaultSection().items.length === 0;
@@ -689,58 +770,43 @@ export class FreestylerPanel extends UI.Panel.Panel {
   }
 
   #clearHistory(): void {
-    this.#agents = new Set();
-    this.#currentAgent = undefined;
-    this.#viewProps.messages = [];
-    this.#viewProps.agentType = undefined;
-    this.#runAbortController.abort();
+    this.#conversations = [];
+    this.#currentConversation = undefined;
     void AiHistoryStorage.instance().deleteAll();
-    void this.doUpdate();
+    this.#updateAgentState();
   }
 
   #onDeleteClicked(): void {
     if (this.#currentAgent) {
-      this.#agents.delete(this.#currentAgent);
+      this.#conversations = this.#conversations.filter(conversation => conversation !== this.#currentConversation);
+      this.#currentConversation = undefined;
       void AiHistoryStorage.instance().deleteHistoryEntry(this.#currentAgent.id);
-      this.#currentAgent = undefined;
-      this.#cancel();
     }
-
-    this.#viewProps.messages = [];
-
+    this.#updateAgentState();
     this.#selectDefaultAgentIfNeeded();
-    this.#onContextSelectionChanged();
-    void this.doUpdate();
     UI.ARIAUtils.alert(i18nString(UIStrings.chatDeleted));
   }
 
-  async #switchAgent(agent: AiAgent<unknown>): Promise<void> {
-    if (this.#currentAgent === agent) {
+  async #openConversation(conversation: Conversation): Promise<void> {
+    if (this.#currentConversation === conversation) {
       return;
     }
-
-    this.#currentAgent = agent;
+    this.#currentConversation = conversation;
     this.#viewProps.messages = [];
-    this.#viewProps.agentType = agent.type;
-    this.#onContextSelectionChanged();
-    this.#viewProps.isReadOnly = true;
-    await this.#doConversation(agent.runFromHistory());
+    this.#viewProps.isReadOnly = this.#currentConversation?.isReadOnly ?? false;
+    await this.#doConversation(conversation.history);
   }
 
   #handleNewChatRequest(): void {
-    this.#viewProps.messages = [];
-    this.#viewProps.isLoading = false;
-    this.#currentAgent = undefined;
-    this.#cancel();
-
+    this.#updateAgentState();
     this.#selectDefaultAgentIfNeeded();
-    void this.doUpdate();
     UI.ARIAUtils.alert(i18nString(UIStrings.newChatCreated));
   }
 
   #handleCrossOriginChatCancellation(): void {
     if (this.#previousSameOriginContext) {
       this.#onContextSelectionChanged(this.#previousSameOriginContext);
+      void this.doUpdate();
     }
   }
 
@@ -754,15 +820,12 @@ export class FreestylerPanel extends UI.Panel.Panel {
   #onContextSelectionChanged(contextToRestore?: ConversationContext<unknown>): void {
     if (!this.#currentAgent) {
       this.#viewProps.blockedByCrossOrigin = false;
-      void this.doUpdate();
       return;
     }
     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);
@@ -772,11 +835,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
     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();
+    this.#viewProps.stripLinks = this.#viewProps.agentType === AgentType.PERFORMANCE;
   }
 
   #getConversationContext(): ConversationContext<unknown>|null {
@@ -785,18 +844,23 @@ export class FreestylerPanel extends UI.Panel.Panel {
     }
     let context: ConversationContext<unknown>|null;
     switch (this.#currentAgent.type) {
-      case AgentType.FREESTYLER:
+      case AgentType.STYLING:
         context = this.#selectedElement;
         break;
-      case AgentType.DRJONES_FILE:
+      case AgentType.FILE:
         context = this.#selectedFile;
         break;
-      case AgentType.DRJONES_NETWORK_REQUEST:
+      case AgentType.NETWORK:
         context = this.#selectedRequest;
         break;
-      case AgentType.DRJONES_PERFORMANCE:
+      case AgentType.PERFORMANCE:
         context = this.#selectedCallTree;
         break;
+      case AgentType.PERFORMANCE_INSIGHT:
+        context = this.#selectedInsight;
+        break;
+      case AgentType.PATCH:
+        throw new Error('AI Assistance does not support direct usage of the patch agent');
     }
     return context;
   }
@@ -805,6 +869,8 @@ export class FreestylerPanel extends UI.Panel.Panel {
     if (!this.#currentAgent) {
       return;
     }
+    // Cancel any previous in-flight conversation.
+    this.#cancel();
     this.#runAbortController = new AbortController();
     const signal = this.#runAbortController.signal;
     const context = this.#getConversationContext();
@@ -819,126 +885,158 @@ export class FreestylerPanel extends UI.Panel.Panel {
       selected: context,
     });
     UI.ARIAUtils.alert(lockedString(UIStringsNotTranslate.answerLoading));
-    await this.#doConversation(runner);
+    await this.#doConversation(this.#saveResponsesToCurrentConversation(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};
-    this.#viewProps.isLoading = true;
-    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,
-          });
-          systemMessage = {
-            entity: ChatMessageEntity.MODEL,
-            steps: [],
-          };
-          this.#viewProps.messages.push(systemMessage);
-          break;
+  async *
+      #saveResponsesToCurrentConversation(items: AsyncIterable<ResponseData, void, void>):
+          AsyncGenerator<ResponseData, void, void> {
+    for await (const data of items) {
+      this.#currentConversation?.addHistoryItem(data);
+      yield data;
+    }
+  }
+
+  async #doConversation(items: Iterable<ResponseData, void, void>|AsyncIterable<ResponseData, void, void>):
+      Promise<void> {
+    const release = await this.#mutex.acquire();
+    try {
+      let systemMessage: ModelChatMessage = {
+        entity: ChatMessageEntity.MODEL,
+        steps: [],
+      };
+      let step: Step = {isLoading: true};
+
+      /**
+       * Commits the step to props only if necessary.
+       */
+      function commitStep(): void {
+        if (systemMessage.steps.at(-1) !== step) {
+          systemMessage.steps.push(step);
         }
-        case ResponseType.QUERYING: {
-          step = {isLoading: true};
-          if (!systemMessage.steps.length) {
-            systemMessage.steps.push(step);
+      }
+
+      this.#viewProps.isLoading = true;
+      for await (const data of items) {
+        step.sideEffect = undefined;
+        switch (data.type) {
+          case ResponseType.USER_QUERY: {
+            this.#viewProps.messages.push({
+              entity: ChatMessageEntity.USER,
+              text: data.query,
+            });
+            systemMessage = {
+              entity: ChatMessageEntity.MODEL,
+              steps: [],
+            };
+            this.#viewProps.messages.push(systemMessage);
+            break;
           }
+          case ResponseType.QUERYING: {
+            step = {isLoading: true};
+            if (!systemMessage.steps.length) {
+              systemMessage.steps.push(step);
+            }
 
-          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;
           }
-          break;
-        }
-        case ResponseType.TITLE: {
-          step.title = data.title;
-          if (systemMessage.steps.at(-1) !== step) {
-            systemMessage.steps.push(step);
+          case ResponseType.CONTEXT: {
+            step.title = data.title;
+            step.contextDetails = data.details;
+            step.isLoading = false;
+            commitStep();
+            break;
           }
-          break;
-        }
-        case ResponseType.THOUGHT: {
-          step.isLoading = false;
-          step.thought = data.thought;
-          if (systemMessage.steps.at(-1) !== step) {
-            systemMessage.steps.push(step);
+          case ResponseType.TITLE: {
+            step.title = data.title;
+            commitStep();
+            break;
           }
-          break;
-        }
-        case ResponseType.SIDE_EFFECT: {
-          step.isLoading = false;
-          step.code = data.code;
-          step.sideEffect = {
-            onAnswer: data.confirm,
-          };
-          if (systemMessage.steps.at(-1) !== step) {
-            systemMessage.steps.push(step);
+          case ResponseType.THOUGHT: {
+            step.isLoading = false;
+            step.thought = data.thought;
+            commitStep();
+            break;
           }
-          break;
-        }
-        case ResponseType.ACTION: {
-          step.isLoading = false;
-          step.code = data.code;
-          step.output = data.output;
-          step.canceled = data.canceled;
-          if (systemMessage.steps.at(-1) !== step) {
-            systemMessage.steps.push(step);
+          case ResponseType.SUGGESTIONS: {
+            systemMessage.suggestions = data.suggestions;
+            break;
           }
-          break;
-        }
-        case ResponseType.ANSWER: {
-          systemMessage.suggestions = data.suggestions;
-          systemMessage.answer = data.text;
-          systemMessage.rpcId = data.rpcId;
-          // When there is an answer without any thinking steps, we don't want to show the thinking step.
-          if (systemMessage.steps.length === 1 && systemMessage.steps[0].isLoading) {
-            systemMessage.steps.pop();
+          case ResponseType.SIDE_EFFECT: {
+            step.isLoading = false;
+            step.code ??= data.code;
+            step.sideEffect = {
+              onAnswer: (result: boolean) => {
+                data.confirm(result);
+                step.sideEffect = undefined;
+                void this.doUpdate();
+              },
+            };
+            commitStep();
+            break;
           }
-          step.isLoading = false;
-          break;
-        }
-        case ResponseType.ERROR: {
-          systemMessage.error = data.error;
-          systemMessage.rpcId = undefined;
-          const lastStep = systemMessage.steps.at(-1);
-          if (lastStep) {
-            // Mark the last step as cancelled to make the UI feel better.
-            if (data.error === ErrorType.ABORT) {
-              lastStep.canceled = true;
-              // If error happens while the step is still loading remove it.
-            } else if (lastStep.isLoading) {
+          case ResponseType.ACTION: {
+            step.isLoading = false;
+            step.code ??= data.code;
+            step.output ??= data.output;
+            step.canceled = data.canceled;
+            if (isAiAssistancePatchingEnabled() && this.#currentAgent && !this.#currentConversation?.isReadOnly) {
+              this.#viewProps.changeSummary = this.#changeManager.formatChanges(this.#currentAgent.id);
+            }
+            commitStep();
+            break;
+          }
+          case ResponseType.ANSWER: {
+            systemMessage.suggestions ??= data.suggestions;
+            systemMessage.answer = data.text;
+            systemMessage.rpcId = data.rpcId;
+            // When there is an answer without any thinking steps, we don't want to show the thinking step.
+            if (systemMessage.steps.length === 1 && systemMessage.steps[0].isLoading) {
               systemMessage.steps.pop();
             }
+            step.isLoading = false;
+            break;
+          }
+          case ResponseType.ERROR: {
+            systemMessage.error = data.error;
+            systemMessage.rpcId = undefined;
+            const lastStep = systemMessage.steps.at(-1);
+            if (lastStep) {
+              // Mark the last step as cancelled to make the UI feel better.
+              if (data.error === ErrorType.ABORT) {
+                lastStep.canceled = true;
+                // If error happens while the step is still loading remove it.
+              } else if (lastStep.isLoading) {
+                systemMessage.steps.pop();
+              }
+            }
+            if (data.error === ErrorType.BLOCK) {
+              systemMessage.answer = undefined;
+            }
           }
         }
-      }
 
-      void this.doUpdate();
+        // Commit update intermediated step when not
+        // in read only mode.
+        if (!this.#viewProps.isReadOnly) {
+          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 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 (data.type === ResponseType.CONTEXT || data.type === ResponseType.SIDE_EFFECT) {
+            this.#viewOutput.chatView?.scrollToBottom();
+          }
+        }
       }
-    }
 
-    this.#viewProps.isLoading = false;
-    this.#viewOutput.freestylerChatUi?.finishTextAnimations();
-    void this.doUpdate();
+      this.#viewProps.isLoading = false;
+      this.#viewOutput.chatView?.finishTextAnimations();
+      void this.doUpdate();
+    } finally {
+      release();
+    }
   }
 }
 
@@ -957,14 +1055,14 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
       case 'drjones.sources-panel-context': {
         void (async () => {
           const view = UI.ViewManager.ViewManager.instance().view(
-              FreestylerPanel.panelName,
+              AiAssistancePanel.panelName,
           );
 
           if (view) {
             await UI.ViewManager.ViewManager.instance().showView(
-                FreestylerPanel.panelName,
+                AiAssistancePanel.panelName,
             );
-            const widget = (await view.widget()) as FreestylerPanel;
+            const widget = (await view.widget()) as AiAssistancePanel;
             widget.handleAction(actionId);
           }
         })();
@@ -976,21 +1074,17 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   }
 }
 
-function setFreestylerServerSideLoggingEnabled(enabled: boolean): void {
-  if (enabled) {
-    localStorage.setItem('freestyler_enableServerSideLogging', 'true');
-  } else {
-    localStorage.setItem('freestyler_enableServerSideLogging', 'false');
-  }
+function isAiAssistancePatchingEnabled(): boolean {
+  const config = Common.Settings.Settings.instance().getHostConfig();
+  return Boolean(config.devToolsFreestyler?.patching);
 }
 
-function isFreestylerServerSideLoggingEnabled(): boolean {
+function isAiAssistanceServerSideLoggingEnabled(): boolean {
   const config = Common.Settings.Settings.instance().getHostConfig();
-  if (config.aidaAvailability?.disallowLogging) {
-    return false;
-  }
-  return localStorage.getItem('freestyler_enableServerSideLogging') !== 'false';
+  return !config.aidaAvailability?.disallowLogging;
 }
 
-// @ts-ignore
-globalThis.setFreestylerServerSideLoggingEnabled = setFreestylerServerSideLoggingEnabled;
+function isAiAssistanceStylingWithFunctionCallingEnabled(): boolean {
+  const config = Common.Settings.Settings.instance().getHostConfig();
+  return Boolean(config.devToolsFreestyler?.functionCalling);
+}