chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

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

@@ -6,15 +6,17 @@ 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 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 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,27 +25,32 @@ import {
   ErrorType,
   type ResponseData,
   ResponseType,
-} from './AiAgent.js';
+  type SerializedAgent,
+} from './agents/AiAgent.js';
+import {
+  FileAgent,
+  FileContext,
+} from './agents/FileAgent.js';
+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 {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;
 
@@ -80,13 +87,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.
    */
@@ -108,14 +115,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,
+  chatView?: ChatView,
 };
-type View = (input: FreestylerChatUiProps, output: ViewOutput, target: HTMLElement) => void;
+type View = (input: ChatViewProps, output: ViewOutput, target: HTMLElement) => void;
 
 function selectedElementFilter(maybeNode: SDK.DOMModel.DOMNode|null): SDK.DOMModel.DOMNode|null {
   if (maybeNode) {
@@ -125,17 +132,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)) {
+    <devtools-ai-chat-view .props=${input} ${LitHtml.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}); // eslint-disable-line rulesdir/lit-html-host-this
   // clang-format on
 }
 
@@ -153,6 +160,13 @@ 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;
@@ -167,17 +181,17 @@ function createCallTreeContext(callTree: TimelineUtils.AICallTree.AICallTree|nul
   return new CallTreeContext(callTree);
 }
 
-let freestylerPanelInstance: FreestylerPanel;
-export class FreestylerPanel extends UI.Panel.Panel {
+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();
 
   #newChatButton =
@@ -190,6 +204,8 @@ export class FreestylerPanel extends UI.Panel.Panel {
   #agents = new Set<AiAgent<unknown>>();
   #currentAgent?: AiAgent<unknown>;
 
+  #previousSameOriginContext?: ConversationContext<unknown>;
+  #project: ProjectContext|null = null;
   #selectedFile: FileContext|null = null;
   #selectedElement: NodeContext|null = null;
   #selectedCallTree: CallTreeContext|null = null;
@@ -200,14 +216,14 @@ 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.#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(),
@@ -223,7 +239,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
       onFeedbackSubmit: this.#handleFeedbackSubmit.bind(this),
       onCancelClick: this.#cancel.bind(this),
       onContextClick: this.#handleContextClick.bind(this),
-      onNewConversation: this.#newChat.bind(this),
+      onNewConversation: this.#handleNewChatRequest.bind(this),
       canShowFeedbackForm: this.#serverSideLoggingEnabled,
       userInfo: {
         accountImage: syncInfo.accountImage,
@@ -234,14 +250,19 @@ export class FreestylerPanel extends UI.Panel.Panel {
       stripLinks: false,
       isReadOnly: false,
     };
+
+    for (const historyEntry of AiHistoryStorage.instance().getHistory()) {
+      this.#createAgent(historyEntry.type, historyEntry);
+    }
   }
 
   #createToolbar(): void {
-    const toolbarContainer = this.contentElement.createChild('div', 'freestyler-toolbar-container');
+    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);
 
-    this.#newChatButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.#newChat.bind(this));
+    this.#newChatButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.#handleNewChatRequest.bind(this));
     leftToolbar.appendToolbarItem(this.#newChatButton);
     leftToolbar.appendSeparator();
 
@@ -257,8 +278,9 @@ export class FreestylerPanel extends UI.Panel.Panel {
         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)');
+    link.style.setProperty('color', 'var(--sys-color-primary)');
+    link.style.setProperty('margin', '0 var(--sys-size-3)');
+    link.style.setProperty('height', 'calc(100% - 6px)');
     const linkItem = new UI.Toolbar.ToolbarItem(link);
     rightToolbar.appendToolbarItem(linkItem);
 
@@ -277,11 +299,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 {
@@ -292,74 +314,64 @@ 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 {
-    const agent = new FreestylerAgent({
+  #createAgent(agentType: AgentType, history?: SerializedAgent): AiAgent<unknown> {
+    const options = {
       aidaClient: this.#aidaClient,
-      changeManager: this.#changeManager,
       serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
-    });
-    this.#agents.add(agent);
-    return agent;
-  }
+    };
+    let agent: AiAgent<unknown>;
+    switch (agentType) {
+      case AgentType.STYLING: {
+        agent = new StylingAgent({
+          ...options,
+          changeManager: this.#changeManager,
+        });
+        break;
+      }
+      case AgentType.NETWORK: {
+        agent = new NetworkAgent(options);
+        break;
+      }
+      case AgentType.FILE: {
+        agent = new FileAgent(options);
+        break;
+      }
+      case AgentType.PERFORMANCE: {
+        agent = new PerformanceAgent(options);
+        break;
+      }
+      case AgentType.PATCH: {
+        agent = new PatchAgent(options);
+        break;
+      }
+    }
 
-  #createDrJonesFileAgent(): DrJonesFileAgent {
-    const agent = new DrJonesFileAgent({
-      aidaClient: this.#aidaClient,
-      serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
-    });
-    this.#agents.add(agent);
-    return agent;
-  }
+    if (history) {
+      agent.populateHistoryFromStorage(history);
+    }
 
-  #createDrJonesNetworkAgent(): DrJonesNetworkAgent {
-    const agent = new DrJonesNetworkAgent({
-      aidaClient: this.#aidaClient,
-      serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
-    });
     this.#agents.add(agent);
     return agent;
   }
 
-  #createDrJonesPerformanceAgent(): DrJonesPerformanceAgent {
-    const agent = new DrJonesPerformanceAgent({
-      aidaClient: this.#aidaClient,
-      serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
-    });
-    this.#agents.add(agent);
-    return agent;
+  #updateToolbarState(): void {
+    this.#deleteHistoryEntryButton.setVisible(Boolean(this.#currentAgent && !this.#currentAgent.isEmpty));
   }
 
   static async instance(opts: {
     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
@@ -381,29 +393,41 @@ 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;
+    }
+
+    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.isLoading = false;
+      this.#viewProps.isReadOnly = this.#currentAgent?.isHistoryEntry ?? false;
     }
 
-    this.#currentAgent = targetAgentType ? this.#createAgent(targetAgentType) : undefined;
-    this.#viewProps.agentType = targetAgentType;
     this.#onContextSelectionChanged();
-    this.doUpdate();
+    void this.doUpdate();
   }
 
   override wasShown(): void {
-    this.registerCSSFiles([freestylerPanelStyles]);
-    this.#viewOutput.freestylerChatUi?.restoreScrollPosition();
-    this.#viewOutput.freestylerChatUi?.focusTextInput();
+    this.registerCSSFiles([styles]);
+    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 =
@@ -411,15 +435,17 @@ export class FreestylerPanel extends UI.Panel.Panel {
     this.#selectedCallTree =
         createCallTreeContext(UI.Context.Context.instance().flavor(TimelineUtils.AICallTree.AICallTree)),
     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,
       inspectElementToggled: this.#toggleSearchElementAction.toggled(),
       selectedContext: this.#getConversationContext(),
     };
-    this.doUpdate();
+    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(
@@ -431,6 +457,8 @@ export class FreestylerPanel extends UI.Panel.Panel {
         TimelineUtils.AICallTree.AICallTree, this.#handleTraceEntryNodeFlavorChange);
     UI.Context.Context.instance().addFlavorChangeListener(
         Workspace.UISourceCode.UISourceCode, this.#handleUISourceCodeFlavorChange);
+    UI.Context.Context.instance().addFlavorChangeListener(
+        Persistence.FileSystemWorkspaceBinding.FileSystem, this.#handlePersistenceFileSystemChange);
     UI.Context.Context.instance().addFlavorChangeListener(
         ElementsPanel.ElementsPanel.ElementsPanel, this.#selectDefaultAgentIfNeeded, this);
     UI.Context.Context.instance().addFlavorChangeListener(
@@ -439,11 +467,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(
@@ -463,6 +495,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> => {
@@ -476,7 +520,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
         accountFullName: syncInfo.accountFullName,
       };
       this.#viewProps.state = this.#getChatUiState();
-      this.doUpdate();
+      void this.doUpdate();
     }
   };
 
@@ -486,7 +530,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
     }
 
     this.#viewProps.inspectElementToggled = ev.data;
-    this.doUpdate();
+    void this.doUpdate();
   };
 
   #handleDOMNodeFlavorChange = (ev: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void => {
@@ -495,9 +539,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) {
@@ -505,7 +558,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 =
@@ -515,7 +568,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 =
@@ -528,20 +581,33 @@ export class FreestylerPanel extends UI.Panel.Panel {
           return;
         }
         this.#selectedFile = new FileContext(ev.data);
-        this.#onContextSelectionChanged();
+        this.#updateAgentState(this.#currentAgent);
       };
 
-  #handleFreestylerEnabledSettingChanged = (): void => {
+  #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) {
       return;
     }
 
     this.#viewProps.state = nextChatUiState;
-    this.doUpdate();
+    void this.doUpdate();
   };
 
-  doUpdate(): void {
+  override async doUpdate(): Promise<void> {
     this.#updateToolbarState();
     this.view(this.#viewProps, this.#viewOutput, this.#contentContainer);
   }
@@ -550,7 +616,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,
@@ -586,45 +652,50 @@ 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 'ai-assistance.filesystem': {
+        // TODO: metrics if needed.
+        targetAgentType = AgentType.PATCH;
+        break;
+      }
       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;
       }
     }
@@ -633,18 +704,13 @@ export class FreestylerPanel extends UI.Panel.Panel {
       return;
     }
 
+    let agent = this.#currentAgent;
     if (!this.#currentAgent || this.#currentAgent.type !== targetAgentType || this.#currentAgent.isHistoryEntry ||
-        targetAgentType === AgentType.DRJONES_PERFORMANCE) {
-      this.#currentAgent = this.#createAgent(targetAgentType);
+        targetAgentType === AgentType.PERFORMANCE) {
+      agent = 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());
+    this.#updateAgentState(agent);
+    this.#viewOutput.chatView?.focusTextInput();
   }
 
   #onHistoryClicked(event: Event): void {
@@ -652,6 +718,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
     const contextMenu = new UI.ContextMenu.ContextMenu(event, {
       x: boundingRect.left,
       y: boundingRect.bottom,
+      useSoftMenu: true,
     });
 
     for (const agent of [...this.#agents].reverse()) {
@@ -663,9 +730,9 @@ export class FreestylerPanel extends UI.Panel.Panel {
         continue;
       }
 
-      contextMenu.defaultSection().appendItem(title, () => {
+      contextMenu.defaultSection().appendCheckboxItem(title, () => {
         void this.#switchAgent(agent);
-      });
+      }, {checked: (this.#currentAgent === agent)});
     }
 
     const historyEmpty = contextMenu.defaultSection().items.length === 0;
@@ -690,23 +757,17 @@ export class FreestylerPanel extends UI.Panel.Panel {
 
   #clearHistory(): void {
     this.#agents = new Set();
-    this.#currentAgent = undefined;
-    this.#viewProps.messages = [];
-    this.#viewProps.agentType = undefined;
-    this.doUpdate();
+    void AiHistoryStorage.instance().deleteAll();
+    this.#updateAgentState();
   }
 
   #onDeleteClicked(): void {
     if (this.#currentAgent) {
       this.#agents.delete(this.#currentAgent);
-      this.#currentAgent = undefined;
+      void AiHistoryStorage.instance().deleteHistoryEntry(this.#currentAgent.id);
     }
-
-    this.#viewProps.messages = [];
-
+    this.#updateAgentState();
     this.#selectDefaultAgentIfNeeded();
-    this.#onContextSelectionChanged();
-    this.doUpdate();
     UI.ARIAUtils.alert(i18nString(UIStrings.chatDeleted));
   }
 
@@ -714,53 +775,53 @@ export class FreestylerPanel extends UI.Panel.Panel {
     if (this.#currentAgent === agent) {
       return;
     }
-
-    this.#currentAgent = agent;
-    this.#viewProps.messages = [];
-    this.#viewProps.agentType = agent.type;
-    this.#onContextSelectionChanged();
+    this.#updateAgentState(agent);
     this.#viewProps.isReadOnly = true;
     await this.#doConversation(agent.runFromHistory());
   }
 
-  #newChat(): void {
-    this.#viewProps.messages = [];
-    this.#viewProps.isLoading = false;
-    this.#currentAgent = undefined;
-    this.#cancel();
-
+  #handleNewChatRequest(): void {
+    this.#updateAgentState();
     this.#selectDefaultAgentIfNeeded();
-    this.doUpdate();
     UI.ARIAUtils.alert(i18nString(UIStrings.newChatCreated));
   }
 
+  #handleCrossOriginChatCancellation(): void {
+    if (this.#previousSameOriginContext) {
+      this.#onContextSelectionChanged(this.#previousSameOriginContext);
+      void this.doUpdate();
+    }
+  }
+
   #runAbortController = new AbortController();
   #cancel(): void {
     this.#runAbortController.abort();
     this.#viewProps.isLoading = false;
-    this.doUpdate();
+    void this.doUpdate();
   }
 
-  #onContextSelectionChanged(): void {
+  #onContextSelectionChanged(contextToRestore?: ConversationContext<unknown>): void {
     if (!this.#currentAgent) {
       this.#viewProps.blockedByCrossOrigin = false;
-      this.doUpdate();
       return;
     }
-    const currentContext = this.#getConversationContext();
+    const currentContext = contextToRestore ?? 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 &&
+    if (!this.#viewProps.blockedByCrossOrigin) {
+      this.#previousSameOriginContext = currentContext;
+    }
+    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.DRJONES_PERFORMANCE;
-    this.doUpdate();
+    this.#viewProps.stripLinks = this.#viewProps.agentType === AgentType.PERFORMANCE;
   }
 
   #getConversationContext(): ConversationContext<unknown>|null {
@@ -769,18 +830,21 @@ 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.PATCH:
+        context = this.#project;
+        break;
     }
     return context;
   }
@@ -813,6 +877,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
       steps: [],
     };
     let step: Step = {isLoading: true};
+    this.#viewProps.isLoading = true;
     for await (const data of generator) {
       step.sideEffect = undefined;
       switch (data.type) {
@@ -821,7 +886,6 @@ export class FreestylerPanel extends UI.Panel.Panel {
             entity: ChatMessageEntity.USER,
             text: data.query,
           });
-          this.#viewProps.isLoading = true;
           systemMessage = {
             entity: ChatMessageEntity.MODEL,
             steps: [],
@@ -891,13 +955,11 @@ export class FreestylerPanel extends UI.Panel.Panel {
             systemMessage.steps.pop();
           }
           step.isLoading = false;
-          this.#viewProps.isLoading = false;
           break;
         }
         case ResponseType.ERROR: {
           systemMessage.error = data.error;
           systemMessage.rpcId = undefined;
-          this.#viewProps.isLoading = false;
           const lastStep = systemMessage.steps.at(-1);
           if (lastStep) {
             // Mark the last step as cancelled to make the UI feel better.
@@ -908,12 +970,26 @@ export class FreestylerPanel extends UI.Panel.Panel {
               systemMessage.steps.pop();
             }
           }
+          if (data.error === ErrorType.BLOCK) {
+            systemMessage.answer = undefined;
+          }
         }
       }
 
-      this.doUpdate();
-      this.#viewOutput.freestylerChatUi?.scrollToLastMessage();
+      void this.doUpdate();
+
+      // This handles scrolling to the bottom for live conversations when:
+      // * User submits the query & the context step is shown.
+      // * There is a side effect dialog  shown.
+      if (!this.#viewProps.isReadOnly &&
+          (data.type === ResponseType.CONTEXT || data.type === ResponseType.SIDE_EFFECT)) {
+        this.#viewOutput.chatView?.scrollToBottom();
+      }
     }
+
+    this.#viewProps.isLoading = false;
+    this.#viewOutput.chatView?.finishTextAnimations();
+    void this.doUpdate();
   }
 }
 
@@ -929,17 +1005,18 @@ 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 'drjones.sources-panel-context':
+      case 'ai-assistance.filesystem': {
         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);
           }
         })();
@@ -951,21 +1028,21 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   }
 }
 
-function setFreestylerServerSideLoggingEnabled(enabled: boolean): void {
+function setAiAssistanceServerSideLoggingEnabled(enabled: boolean): void {
   if (enabled) {
-    localStorage.setItem('freestyler_enableServerSideLogging', 'true');
+    localStorage.setItem('aiAssistance_enableServerSideLogging', 'true');
   } else {
-    localStorage.setItem('freestyler_enableServerSideLogging', 'false');
+    localStorage.setItem('aiAssistance_enableServerSideLogging', 'false');
   }
 }
 
-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 localStorage.getItem('aiAssistance_enableServerSideLogging') !== 'false';
 }
 
 // @ts-ignore
-globalThis.setFreestylerServerSideLoggingEnabled = setFreestylerServerSideLoggingEnabled;
+globalThis.setAiAssistanceServerSideLoggingEnabled = setAiAssistanceServerSideLoggingEnabled;