chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -1,15 +1,17 @@
 // 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 Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.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';
@@ -25,7 +27,6 @@ import {
   ErrorType,
   type ResponseData,
   ResponseType,
-  type SerializedAgent,
 } from './agents/AiAgent.js';
 import {
   FileAgent,
@@ -35,13 +36,11 @@ import {
   NetworkAgent,
   RequestContext,
 } from './agents/NetworkAgent.js';
-import {PatchAgent, ProjectContext} from './agents/PatchAgent.js';
 import {CallTreeContext, PerformanceAgent} from './agents/PerformanceAgent.js';
-import {NodeContext, StylingAgent} from './agents/StylingAgent.js';
-import styles from './aiAssistancePanel.css.js';
-import {
-  AiHistoryStorage,
-} from './AiHistoryStorage.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,
@@ -52,7 +51,7 @@ import {
   type Step,
 } 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;
@@ -119,9 +118,9 @@ const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/AiAssistancePanel
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const lockedString = i18n.i18n.lockedString;
 
-type ViewOutput = {
-  chatView?: ChatView,
-};
+interface ViewOutput {
+  chatView?: ChatView;
+}
 type View = (input: ChatViewProps, output: ViewOutput, target: HTMLElement) => void;
 
 function selectedElementFilter(maybeNode: SDK.DOMModel.DOMNode|null): SDK.DOMModel.DOMNode|null {
@@ -134,15 +133,15 @@ function selectedElementFilter(maybeNode: SDK.DOMModel.DOMNode|null): SDK.DOMMod
 
 function defaultView(input: ChatViewProps, output: ViewOutput, target: HTMLElement): void {
   // clang-format off
-  LitHtml.render(html`
-    <devtools-ai-chat-view .props=${input} ${LitHtml.Directives.ref((el: Element|undefined) => {
+  Lit.render(html`
+    <devtools-ai-chat-view .props=${input} ${Lit.Directives.ref((el: Element|undefined) => {
       if (!el || !(el instanceof ChatView)) {
         return;
       }
 
       output.chatView = el;
     })}></devtools-ai-chat-view>
-  `, target, {host: input}); // eslint-disable-line rulesdir/lit-html-host-this
+  `, target, {host: input});
   // clang-format on
 }
 
@@ -160,13 +159,6 @@ function createFileContext(file: Workspace.UISourceCode.UISourceCode|null): File
   return new FileContext(file);
 }
 
-function createProjectContext(project: Persistence.FileSystemWorkspaceBinding.FileSystem|null): ProjectContext|null {
-  if (!project) {
-    return null;
-  }
-  return new ProjectContext(project);
-}
-
 function createRequestContext(request: SDK.NetworkRequest.NetworkRequest|null): RequestContext|null {
   if (!request) {
     return null;
@@ -180,6 +172,29 @@ 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);
+}
+
+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 {
@@ -193,6 +208,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #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');
@@ -201,14 +217,15 @@ export class AiAssistancePanel 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>;
-  #project: ProjectContext|null = null;
   #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}: {
@@ -217,6 +234,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     syncInfo: Host.InspectorFrontendHostAPI.SyncInformation,
   }) {
     super(AiAssistancePanel.panelName);
+    this.registerRequiredCSS(aiAssistancePanelStyles);
     this.#aiAssistanceEnabledSetting = this.#getAiAssistanceEnabledSetting();
 
     this.#createToolbar();
@@ -251,16 +269,17 @@ export class AiAssistancePanel 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', 'toolbar-container');
     toolbarContainer.setAttribute('jslog', VisualLogging.toolbar().toString());
-    const leftToolbar = new UI.Toolbar.Toolbar('freestyler-left-toolbar', toolbarContainer);
-    const rightToolbar = new UI.Toolbar.Toolbar('freestyler-right-toolbar', toolbarContainer);
+    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);
@@ -314,7 +333,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
   }
 
-  #createAgent(agentType: AgentType, history?: SerializedAgent): AiAgent<unknown> {
+  #createAgent(agentType: AgentType): AiAgent<unknown> {
     const options = {
       aidaClient: this.#aidaClient,
       serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
@@ -326,6 +345,13 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           ...options,
           changeManager: this.#changeManager,
         });
+        if (isAiAssistanceStylingWithFunctionCallingEnabled()) {
+          agent = new StylingAgentWithFunctionCalling({
+            ...options,
+            changeManager: this.#changeManager,
+          });
+        }
+
         break;
       }
       case AgentType.NETWORK: {
@@ -340,22 +366,19 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         agent = new PerformanceAgent(options);
         break;
       }
-      case AgentType.PATCH: {
-        agent = new PatchAgent(options);
+      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: {
@@ -377,9 +400,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   // 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;
     }
 
@@ -400,6 +424,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       targetAgentType = AgentType.FILE;
     } else if (isPerformancePanelVisible && config.devToolsAiAssistancePerformanceAgent?.enabled) {
       targetAgentType = AgentType.PERFORMANCE;
+    } else if (
+        isPerformancePanelVisible && config.devToolsAiAssistancePerformanceAgent?.enabled &&
+        config.devToolsAiAssistancePerformanceAgent?.insightsEnabled) {
+      targetAgentType = AgentType.PERFORMANCE_INSIGHT;
     }
 
     const agent = targetAgentType ? this.#createAgent(targetAgentType) : undefined;
@@ -412,8 +440,14 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       this.#currentAgent = agent;
       this.#viewProps.agentType = this.#currentAgent?.type;
       this.#viewProps.messages = [];
+      this.#viewProps.changeSummary = undefined;
       this.#viewProps.isLoading = false;
-      this.#viewProps.isReadOnly = this.#currentAgent?.isHistoryEntry ?? 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.#onContextSelectionChanged();
@@ -421,7 +455,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   }
 
   override wasShown(): void {
-    this.registerCSSFiles([styles]);
+    super.wasShown();
     this.#viewOutput.chatView?.restoreScrollPosition();
     this.#viewOutput.chatView?.focusTextInput();
     this.#selectDefaultAgentIfNeeded();
@@ -434,9 +468,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         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.#project =
-        createProjectContext(UI.Context.Context.instance().flavor(Persistence.FileSystemWorkspaceBinding.FileSystem)),
     this.#viewProps = {
       ...this.#viewProps,
       agentType: this.#currentAgent?.type,
@@ -457,8 +491,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         TimelineUtils.AICallTree.AICallTree, this.#handleTraceEntryNodeFlavorChange);
     UI.Context.Context.instance().addFlavorChangeListener(
         Workspace.UISourceCode.UISourceCode, this.#handleUISourceCodeFlavorChange);
-    UI.Context.Context.instance().addFlavorChangeListener(
-        Persistence.FileSystemWorkspaceBinding.FileSystem, this.#handlePersistenceFileSystemChange);
     UI.Context.Context.instance().addFlavorChangeListener(
         ElementsPanel.ElementsPanel.ElementsPanel, this.#selectDefaultAgentIfNeeded, this);
     UI.Context.Context.instance().addFlavorChangeListener(
@@ -584,19 +616,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         this.#updateAgentState(this.#currentAgent);
       };
 
-  #handlePersistenceFileSystemChange =
-      (ev: Common.EventTarget.EventTargetEvent<Persistence.FileSystemWorkspaceBinding.FileSystem>): void => {
-        const newProject = ev.data;
-        if (!newProject) {
-          return;
-        }
-        if (this.#project?.getItem() === newProject) {
-          return;
-        }
-        this.#project = new ProjectContext(ev.data as Workspace.Workspace.Project);
-        this.#updateAgentState(this.#currentAgent);
-      };
-
   #handleAiAssistanceEnabledSettingChanged = (): void => {
     const nextChatUiState = this.#getChatUiState();
     if (this.#viewProps.state === nextChatUiState) {
@@ -607,7 +626,7 @@ export class AiAssistancePanel 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);
   }
@@ -658,11 +677,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
     let targetAgentType: AgentType|undefined;
     switch (actionId) {
-      case 'ai-assistance.filesystem': {
-        // TODO: metrics if needed.
-        targetAgentType = AgentType.PATCH;
-        break;
-      }
       case 'freestyler.elements-floating-button': {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceOpenedFromElementsPanelFloatingButton);
         targetAgentType = AgentType.STYLING;
@@ -705,8 +719,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
 
     let agent = this.#currentAgent;
-    if (!this.#currentAgent || this.#currentAgent.type !== targetAgentType || this.#currentAgent.isHistoryEntry ||
-        targetAgentType === AgentType.PERFORMANCE) {
+    if (!this.#currentConversation || !this.#currentAgent || this.#currentAgent.type !== targetAgentType ||
+        this.#currentConversation?.isEmpty || targetAgentType === AgentType.PERFORMANCE) {
       agent = this.#createAgent(targetAgentType);
     }
     this.#updateAgentState(agent);
@@ -721,18 +735,18 @@ export class AiAssistancePanel 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().appendCheckboxItem(title, () => {
-        void this.#switchAgent(agent);
-      }, {checked: (this.#currentAgent === agent)});
+        void this.#openConversation(conversation);
+      }, {checked: (this.#currentConversation === conversation)});
     }
 
     const historyEmpty = contextMenu.defaultSection().items.length === 0;
@@ -756,14 +770,16 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   }
 
   #clearHistory(): void {
-    this.#agents = new Set();
+    this.#conversations = [];
+    this.#currentConversation = undefined;
     void AiHistoryStorage.instance().deleteAll();
     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.#updateAgentState();
@@ -771,13 +787,14 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     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.#updateAgentState(agent);
-    this.#viewProps.isReadOnly = true;
-    await this.#doConversation(agent.runFromHistory());
+    this.#currentConversation = conversation;
+    this.#viewProps.messages = [];
+    this.#viewProps.isReadOnly = this.#currentConversation?.isReadOnly ?? false;
+    await this.#doConversation(conversation.history);
   }
 
   #handleNewChatRequest(): void {
@@ -809,7 +826,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#viewProps.selectedContext = currentContext;
     if (!currentContext) {
       this.#viewProps.blockedByCrossOrigin = false;
-      this.#viewProps.requiresNewConversation = false;
       return;
     }
     this.#viewProps.blockedByCrossOrigin = !currentContext.isOriginAllowed(this.#currentAgent.origin);
@@ -819,8 +835,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     if (this.#viewProps.blockedByCrossOrigin && this.#previousSameOriginContext) {
       this.#viewProps.onCancelCrossOriginChat = this.#handleCrossOriginChatCancellation.bind(this);
     }
-    this.#viewProps.requiresNewConversation = this.#currentAgent.type === AgentType.PERFORMANCE &&
-        Boolean(this.#currentAgent.context) && this.#currentAgent.context !== currentContext;
     this.#viewProps.stripLinks = this.#viewProps.agentType === AgentType.PERFORMANCE;
   }
 
@@ -842,9 +856,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       case AgentType.PERFORMANCE:
         context = this.#selectedCallTree;
         break;
-      case AgentType.PATCH:
-        context = this.#project;
+      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;
   }
@@ -853,6 +869,8 @@ export class AiAssistancePanel 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();
@@ -867,129 +885,158 @@ export class AiAssistancePanel 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;
           }
-          if (data.error === ErrorType.BLOCK) {
-            systemMessage.answer = undefined;
+          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.chatView?.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.chatView?.finishTextAnimations();
-    void this.doUpdate();
+      this.#viewProps.isLoading = false;
+      this.#viewOutput.chatView?.finishTextAnimations();
+      void this.doUpdate();
+    } finally {
+      release();
+    }
   }
 }
 
@@ -1005,8 +1052,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
       case 'drjones.network-panel-context':
       case 'drjones.performance-panel-context':
       case 'drjones.sources-floating-button':
-      case 'drjones.sources-panel-context':
-      case 'ai-assistance.filesystem': {
+      case 'drjones.sources-panel-context': {
         void (async () => {
           const view = UI.ViewManager.ViewManager.instance().view(
               AiAssistancePanel.panelName,
@@ -1028,21 +1074,17 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   }
 }
 
-function setAiAssistanceServerSideLoggingEnabled(enabled: boolean): void {
-  if (enabled) {
-    localStorage.setItem('aiAssistance_enableServerSideLogging', 'true');
-  } else {
-    localStorage.setItem('aiAssistance_enableServerSideLogging', 'false');
-  }
+function isAiAssistancePatchingEnabled(): boolean {
+  const config = Common.Settings.Settings.instance().getHostConfig();
+  return Boolean(config.devToolsFreestyler?.patching);
 }
 
 function isAiAssistanceServerSideLoggingEnabled(): boolean {
   const config = Common.Settings.Settings.instance().getHostConfig();
-  if (config.aidaAvailability?.disallowLogging) {
-    return false;
-  }
-  return localStorage.getItem('aiAssistance_enableServerSideLogging') !== 'false';
+  return !config.aidaAvailability?.disallowLogging;
 }
 
-// @ts-ignore
-globalThis.setAiAssistanceServerSideLoggingEnabled = setAiAssistanceServerSideLoggingEnabled;
+function isAiAssistanceStylingWithFunctionCallingEnabled(): boolean {
+  const config = Common.Settings.Settings.instance().getHostConfig();
+  return Boolean(config.devToolsFreestyler?.functionCalling);
+}