chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -7,21 +7,20 @@ 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 Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import * as UI from '../../ui/legacy/legacy.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';
 
@@ -49,43 +48,47 @@ const JPEG_MIME_TYPE = 'image/jpeg';
 
 const UIStrings = {
   /**
-   *@description AI assistance UI text creating a new chat.
+   * @description AI assistance UI text creating a new chat.
    */
   newChat: 'New chat',
   /**
-   *@description AI assistance UI tooltip text for the help button.
+   * @description AI assistance UI tooltip text for the help button.
    */
   help: 'Help',
   /**
-   *@description AI assistant UI tooltip text for the settings button (gear icon).
+   * @description AI assistant UI tooltip text for the settings button (gear icon).
    */
   settings: 'Settings',
   /**
-   *@description AI assistant UI tooltip sending feedback.
+   * @description AI assistant UI tooltip sending feedback.
    */
   sendFeedback: 'Send feedback',
   /**
-   *@description Announcement text for screen readers when a new chat is created.
+   * @description Announcement text for screen readers when a new chat is created.
    */
   newChatCreated: 'New chat created',
   /**
-   *@description Announcement text for screen readers when the chat is deleted.
+   * @description Announcement text for screen readers when the chat is deleted.
    */
   chatDeleted: 'Chat deleted',
   /**
-   *@description AI assistance UI text creating selecting a history entry.
+   * @description AI assistance UI text creating selecting a history entry.
    */
   history: 'History',
   /**
-   *@description AI assistance UI text deleting the current chat session from local history.
+   * @description AI assistance UI text deleting the current chat session from local history.
    */
   deleteChat: 'Delete local chat',
   /**
-   *@description AI assistance UI text that deletes all local history entries.
+   * @description AI assistance UI text that deletes all local history entries.
    */
   clearChatHistory: 'Clear local chats',
   /**
-   *@description AI assistance UI text explains that he user had no pas conversations.
+   *@description AI assistance UI text for the export conversation button.
+   */
+  exportConversation: 'Export conversation',
+  /**
+   * @description AI assistance UI text explains that he user had no pas conversations.
    */
   noPastConversations: 'No past conversations',
   /**
@@ -93,13 +96,13 @@ const UIStrings = {
    */
   followTheSteps: 'Follow the steps above to ask a question',
   /**
-   *@description Disclaimer text right after the chat input.
+   * @description Disclaimer text right after the chat input.
    */
   inputDisclaimerForEmptyState: 'This is an experimental AI feature and won\'t always get it right.',
   /**
-   *@description Notification shown to the user whenever DevTools receives an external request.
+   * @description The message shown in a toast when the response is copied to the clipboard.
    */
-  externalRequestReceived: '`DevTools` received an external request',
+  responseCopiedToClipboard: 'Response copied to clipboard',
 } as const;
 
 /*
@@ -107,11 +110,11 @@ const UIStrings = {
 */
 const UIStringsNotTranslate = {
   /**
-   *@description Announcement text for screen readers when the conversation starts.
+   * @description Announcement text for screen readers when the conversation starts.
    */
   answerLoading: 'Answer loading',
   /**
-   *@description Announcement text for screen readers when the answer comes.
+   * @description Announcement text for screen readers when the answer comes.
    */
   answerReady: 'Answer ready',
   /**
@@ -119,86 +122,94 @@ const UIStringsNotTranslate = {
    */
   crossOriginError: 'To talk about data from another origin, start a new chat',
   /**
-   *@description Placeholder text for the chat UI input.
+   * @description Placeholder text for the chat UI input.
    */
   inputPlaceholderForStyling: 'Ask a question about the selected element',
   /**
-   *@description Placeholder text for the chat UI input.
+   * @description Placeholder text for the chat UI input.
    */
   inputPlaceholderForNetwork: 'Ask a question about the selected network request',
   /**
-   *@description Placeholder text for the chat UI input.
+   * @description Placeholder text for the chat UI input.
    */
   inputPlaceholderForFile: 'Ask a question about the selected file',
   /**
-   *@description Placeholder text for the chat UI input.
+   * @description Placeholder text for the chat UI input.
    */
   inputPlaceholderForPerformance: 'Ask a question about the selected item and its call tree',
   /**
-   *@description Placeholder text for the chat UI input.
+   * @description Placeholder text for the chat UI input.
    */
   inputPlaceholderForPerformanceWithNoRecording: 'Record a performance trace and select an item to ask a question',
   /**
-   *@description Placeholder text for the chat UI input when there is no context selected.
+   * @description Placeholder text for the chat UI input when there is no context selected.
    */
   inputPlaceholderForStylingNoContext: 'Select an element to ask a question',
   /**
-   *@description Placeholder text for the chat UI input when there is no context selected.
+   * @description Placeholder text for the chat UI input when there is no context selected.
    */
   inputPlaceholderForNetworkNoContext: 'Select a network request to ask a question',
   /**
-   *@description Placeholder text for the chat UI input when there is no context selected.
+   * @description Placeholder text for the chat UI input when there is no context selected.
    */
   inputPlaceholderForFileNoContext: 'Select a file to ask a question',
   /**
-   *@description Placeholder text for the chat UI input when there is no context selected.
+   * @description Placeholder text for the chat UI input when there is no context selected.
    */
   inputPlaceholderForPerformanceNoContext: 'Select an item to ask a question',
   /**
-   *@description Placeholder text for the chat UI input.
+   * @description Placeholder text for the chat UI input.
    */
   inputPlaceholderForPerformanceInsights: 'Ask a question about the selected performance insight',
   /**
-   *@description Placeholder text for the chat UI input.
+   * @description Placeholder text for the chat UI input.
    */
   inputPlaceholderForPerformanceInsightsNoContext: 'Select a performance insight to ask a question',
   /**
-   *@description Disclaimer text right after the chat input.
+   * @description Placeholder text for the chat UI input.
+   */
+  inputPlaceholderForPerformanceTrace: 'Ask a question about the selected performance trace',
+  /**
+   *@description Placeholder text for the chat UI input.
+   */
+  inputPlaceholderForPerformanceTraceNoContext: 'Select a performance trace to ask a question',
+  /**
+   * @description Disclaimer text right after the chat input.
    */
   inputDisclaimerForStyling:
       'Chat messages and any data the inspected page can access via Web APIs are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won’t always get it right.',
   /**
-   *@description Disclaimer text right after the chat input.
+   * @description Disclaimer text right after the chat input.
    */
   inputDisclaimerForStylingEnterpriseNoLogging:
       'Chat messages and any data the inspected page can access via Web APIs are sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
   /**
-   *@description Disclaimer text right after the chat input.
+   * @description Disclaimer text right after the chat input.
    */
   inputDisclaimerForNetwork:
       'Chat messages and the selected network request are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won’t always get it right.',
   /**
-   *@description Disclaimer text right after the chat input.
+   * @description Disclaimer text right after the chat input.
    */
   inputDisclaimerForNetworkEnterpriseNoLogging:
       'Chat messages and the selected network request are sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
   /**
-   *@description Disclaimer text right after the chat input.
+   * @description Disclaimer text right after the chat input.
    */
   inputDisclaimerForFile:
       'Chat messages and the selected file are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won\'t always get it right.',
   /**
-   *@description Disclaimer text right after the chat input.
+   * @description Disclaimer text right after the chat input.
    */
   inputDisclaimerForFileEnterpriseNoLogging:
       'Chat messages and the selected file are sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
   /**
-   *@description Disclaimer text right after the chat input.
+   * @description Disclaimer text right after the chat input.
    */
   inputDisclaimerForPerformance:
       'Chat messages and trace data from your performance trace are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won\'t always get it right.',
   /**
-   *@description Disclaimer text right after the chat input.
+   * @description Disclaimer text right after the chat input.
    */
   inputDisclaimerForPerformanceEnterpriseNoLogging:
       'Chat messages and data from your performance trace are sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
@@ -210,10 +221,6 @@ const UIStringsNotTranslate = {
    * @description Message displayed in toast in case of any failures while uploading an image file as input.
    */
   uploadImageFailureMessage: 'Failed to upload image. Please try again.',
-  /**
-   * @description Error message shown when AI assistance is not enabled in DevTools settings.
-   */
-  enableInSettings: 'For AI features to be available, you need to enable AI assistance in DevTools settings.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/AiAssistancePanel.ts', UIStrings);
@@ -262,16 +269,28 @@ async function getEmptyStateSuggestions(
         {title: 'Are there any security headers present?', jslogContext: 'network-default'},
         {title: 'Why is the request failing?', jslogContext: 'network-default'},
       ];
-    case AiAssistanceModel.ConversationType.PERFORMANCE:
+    case AiAssistanceModel.ConversationType.PERFORMANCE_FULL:
       return [
-        {title: 'What\'s the purpose of this work?', jslogContext: 'performance-default'},
-        {title: 'Where is time being spent?', jslogContext: 'performance-default'},
-        {title: 'How can I optimize this?', jslogContext: 'performance-default'},
+        {title: 'What performance issues exist with my page?', jslogContext: 'performance-default'},
       ];
     case AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT:
+    case AiAssistanceModel.ConversationType.PERFORMANCE_CALL_TREE: {
+      const focus = context?.getItem() as TimelineUtils.AIContext.AgentFocus | null;
+      if (focus?.data.type === 'call-tree') {
+        return [
+          {title: 'What\'s the purpose of this work?', jslogContext: 'performance-default'},
+          {title: 'Where is time being spent?', jslogContext: 'performance-default'},
+          {title: 'How can I optimize this?', jslogContext: 'performance-default'},
+        ];
+      }
+
       return [
         {title: 'Help me optimize my page load performance', jslogContext: 'performance-insights-default'},
       ];
+    }
+
+    default:
+      Platform.assertNever(conversationType, 'Unknown conversation type');
   }
 }
 
@@ -279,10 +298,12 @@ interface ToolbarViewInput {
   onNewChatClick: () => void;
   populateHistoryMenu: (contextMenu: UI.ContextMenu.ContextMenu) => void;
   onDeleteClick: () => void;
+  onExportConversationClick: () => void;
   onHelpClick: () => void;
   onSettingsClick: () => void;
-  showDeleteHistoryAction: boolean;
+  isLoading: boolean;
   showChatActions: boolean;
+  showActiveConversationActions: boolean;
 }
 
 export type ViewInput = ChatViewProps&ToolbarViewInput;
@@ -295,7 +316,7 @@ type View = (input: ViewInput, output: PanelViewOutput, target: HTMLElement) =>
 function toolbarView(input: ToolbarViewInput): Lit.LitTemplate {
   // clang-format off
   return html`
-    <div class="toolbar-container" role="toolbar" .jslogContext=${VisualLogging.toolbar()}>
+    <div class="toolbar-container" role="toolbar" jslog=${VisualLogging.toolbar()}>
       <devtools-toolbar class="freestyler-left-toolbar" role="presentation">
       ${input.showChatActions
         ? html`<devtools-button
@@ -311,17 +332,28 @@ function toolbarView(input: ToolbarViewInput): Lit.LitTemplate {
           aria-label=${i18nString(UIStrings.history)}
           .iconName=${'history'}
           .jslogContext=${'freestyler.history'}
-          .populateMenuCall=${input.populateHistoryMenu}></devtools-menu-button>`
+          .populateMenuCall=${input.populateHistoryMenu}
+        ></devtools-menu-button>`
           : Lit.nothing}
-        ${input.showDeleteHistoryAction
-          ? html`<devtools-button
+        ${input.showActiveConversationActions ? html`
+          <devtools-button
               title=${i18nString(UIStrings.deleteChat)}
               aria-label=${i18nString(UIStrings.deleteChat)}
               .iconName=${'bin'}
               .jslogContext=${'freestyler.delete'}
               .variant=${Buttons.Button.Variant.TOOLBAR}
-              @click=${input.onDeleteClick}></devtools-button>`
-          : Lit.nothing}
+              @click=${input.onDeleteClick}>
+          </devtools-button>
+          <devtools-button
+            title=${i18nString(UIStrings.exportConversation)}
+            aria-label=${i18nString(UIStrings.exportConversation)}
+            .iconName=${'download'}
+            .disabled=${input.isLoading}
+            .jslogContext=${'export-ai-conversation'}
+            .variant=${Buttons.Button.Variant.TOOLBAR}
+            @click=${input.onExportConversationClick}>
+          </devtools-button>`
+           : Lit.nothing}
       </devtools-toolbar>
       <devtools-toolbar class="freestyler-right-toolbar" role="presentation">
         <x-link
@@ -375,7 +407,6 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
       </div>
     `,
     target,
-    { host: input },
   );
   // clang-format on
 }
@@ -398,22 +429,16 @@ function createRequestContext(request: SDK.NetworkRequest.NetworkRequest|null):
   if (!request) {
     return null;
   }
-  return new AiAssistanceModel.RequestContext(request);
+  const calculator = NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator();
+  return new AiAssistanceModel.RequestContext(request, calculator);
 }
 
-function createCallTreeContext(callTree: TimelineUtils.AICallTree.AICallTree|null): AiAssistanceModel.CallTreeContext|
-    null {
-  if (!callTree) {
-    return null;
-  }
-  return new AiAssistanceModel.CallTreeContext(callTree);
-}
-function createPerfInsightContext(insight: TimelineUtils.InsightAIContext.ActiveInsight|null):
-    AiAssistanceModel.InsightContext|null {
-  if (!insight) {
+function createPerformanceTraceContext(focus: TimelineUtils.AIContext.AgentFocus|null):
+    AiAssistanceModel.PerformanceTraceContext|null {
+  if (!focus) {
     return null;
   }
-  return new AiAssistanceModel.InsightContext(insight);
+  return new AiAssistanceModel.PerformanceTraceContext(focus);
 }
 
 function agentToConversationType(agent: AiAssistanceModel.AiAgent<unknown>): AiAssistanceModel.ConversationType {
@@ -429,54 +454,12 @@ function agentToConversationType(agent: AiAssistanceModel.AiAgent<unknown>): AiA
   }
 
   if (agent instanceof AiAssistanceModel.PerformanceAgent) {
-    return AiAssistanceModel.ConversationType.PERFORMANCE;
-  }
-
-  if (agent instanceof AiAssistanceModel.PerformanceInsightsAgent) {
-    return AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT;
+    return agent.getConversationType();
   }
 
   throw new Error('Provided agent does not have a corresponding conversation type');
 }
 
-// TODO(crbug.com/416134018): Add piercing of shadow roots and handling of child frames
-async function inspectElementBySelector(selector: string): Promise<void> {
-  const primaryPageTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-  const runtimeModel = primaryPageTarget?.model(SDK.RuntimeModel.RuntimeModel);
-  const executionContext = runtimeModel?.defaultExecutionContext();
-  if (!executionContext) {
-    throw new Error('Could not find execution context for executing code');
-  }
-
-  // `inspect()` is not available in `callFunctionOn()`, but it is in `evaluate()`.
-  // We therefore get a reference to `inspect()` via `evaluate()` and then pass
-  // this reference as an argument to `callFunctionOn()`.
-  const inspectReference = await executionContext.evaluate(
-      {
-        expression: 'window.inspect',
-        includeCommandLineAPI: true,
-        returnByValue: false,
-      },
-      /* userGesture */ false,
-      /* awaitPromise */ false,
-  );
-  if ('error' in inspectReference || inspectReference.exceptionDetails) {
-    throw new Error('Cannot find \'window.inspect\'');
-  }
-
-  const inspectResult = await executionContext.callFunctionOn({
-    functionDeclaration: 'async function (inspect, selector) { return inspect(document.querySelector(selector)); }',
-    arguments: [{objectId: inspectReference.object.objectId}, {value: selector}],
-    userGesture: false,
-    awaitPromise: true,
-    returnByValue: false,
-  });
-  if ('error' in inspectResult || inspectResult.exceptionDetails ||
-      SDK.RemoteObject.RemoteObject.isNullOrUndefined(inspectResult.object)) {
-    throw new Error(`'document.querySelector()' could not find matching element for '${selector}' selector`);
-  }
-}
-
 let panelInstance: AiAssistancePanel;
 export class AiAssistancePanel extends UI.Panel.Panel {
   static panelName = 'freestyler';
@@ -492,12 +475,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   #conversationAgent?: AiAssistanceModel.AiAgent<unknown>;
   #conversation?: AiAssistanceModel.Conversation;
-  #historicalConversations: AiAssistanceModel.Conversation[] = [];
 
   #selectedFile: AiAssistanceModel.FileContext|null = null;
   #selectedElement: AiAssistanceModel.NodeContext|null = null;
-  #selectedCallTree: AiAssistanceModel.CallTreeContext|null = null;
-  #selectedPerformanceInsight: AiAssistanceModel.InsightContext|null = null;
+  #selectedPerformanceTrace: AiAssistanceModel.PerformanceTraceContext|null = null;
   #selectedRequest: AiAssistanceModel.RequestContext|null = null;
 
   // Messages displayed in the `ChatView` component.
@@ -525,6 +506,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   // Used to disable send button when there is not text input.
   #isTextInputEmpty = true;
   #timelinePanelInstance: TimelinePanel.TimelinePanel.TimelinePanel|null = null;
+  #conversationHandler: AiAssistanceModel.ConversationHandler;
+  #runAbortController = new AbortController();
 
   constructor(private view: View = defaultView, {aidaClient, aidaAvailability, syncInfo}: {
     aidaClient: Host.AidaClient.AidaClient,
@@ -541,15 +524,15 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       accountImage: syncInfo.accountImage,
       accountFullName: syncInfo.accountFullName,
     };
-
-    this.#historicalConversations = AiAssistanceModel.AiHistoryStorage.instance().getHistory().map(item => {
-      return new AiAssistanceModel.Conversation(item.type, item.history, item.id, true, item.isExternal);
-    });
+    this.#conversationHandler =
+        AiAssistanceModel.ConversationHandler.instance({aidaClient: this.#aidaClient, aidaAvailability});
 
     if (UI.ActionRegistry.ActionRegistry.instance().hasAction('elements.toggle-element-search')) {
       this.#toggleSearchElementAction =
           UI.ActionRegistry.ActionRegistry.instance().getAction('elements.toggle-element-search');
     }
+    AiAssistanceModel.AiHistoryStorage.instance().addEventListener(
+        AiAssistanceModel.Events.HISTORY_DELETED, this.#onHistoryDeleted, this);
   }
 
   #getChatUiState(): ChatViewState {
@@ -579,47 +562,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
   }
 
-  #createAgent(conversationType: AiAssistanceModel.ConversationType): AiAssistanceModel.AiAgent<unknown> {
-    const options = {
-      aidaClient: this.#aidaClient,
-      serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
-    };
-    let agent: AiAssistanceModel.AiAgent<unknown>;
-    switch (conversationType) {
-      case AiAssistanceModel.ConversationType.STYLING: {
-        agent = new AiAssistanceModel.StylingAgent({
-          ...options,
-          changeManager: this.#changeManager,
-        });
-        if (isAiAssistanceStylingWithFunctionCallingEnabled()) {
-          agent = new AiAssistanceModel.StylingAgentWithFunctionCalling({
-            ...options,
-            changeManager: this.#changeManager,
-          });
-        }
-
-        break;
-      }
-      case AiAssistanceModel.ConversationType.NETWORK: {
-        agent = new AiAssistanceModel.NetworkAgent(options);
-        break;
-      }
-      case AiAssistanceModel.ConversationType.FILE: {
-        agent = new AiAssistanceModel.FileAgent(options);
-        break;
-      }
-      case AiAssistanceModel.ConversationType.PERFORMANCE: {
-        agent = new AiAssistanceModel.PerformanceAgent(options);
-        break;
-      }
-      case AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT: {
-        agent = new AiAssistanceModel.PerformanceInsightsAgent(options);
-        break;
-      }
-    }
-    return agent;
-  }
-
   static async instance(opts: {
     forceNew: boolean|null,
   }|undefined = {forceNew: null}): Promise<AiAssistancePanel> {
@@ -672,12 +614,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return;
     }
     const {hostConfig} = Root.Runtime;
-    const isElementsPanelVisible =
-        Boolean(UI.Context.Context.instance().flavor(ElementsPanel.ElementsPanel.ElementsPanel));
-    const isNetworkPanelVisible = Boolean(UI.Context.Context.instance().flavor(NetworkPanel.NetworkPanel.NetworkPanel));
-    const isSourcesPanelVisible = Boolean(UI.Context.Context.instance().flavor(SourcesPanel.SourcesPanel.SourcesPanel));
-    const isPerformancePanelVisible =
-        Boolean(UI.Context.Context.instance().flavor(TimelinePanel.TimelinePanel.TimelinePanel));
+    const viewManager = UI.ViewManager.ViewManager.instance();
+    const isElementsPanelVisible = viewManager.isViewVisible('elements');
+    const isNetworkPanelVisible = viewManager.isViewVisible('network');
+    const isSourcesPanelVisible = viewManager.isViewVisible('sources');
+    const isPerformancePanelVisible = viewManager.isViewVisible('timeline');
 
     // Check if the user has an insight expanded in the performance panel sidebar.
     // If they have, we default to the Insights agent; otherwise we fallback to
@@ -700,7 +641,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         hostConfig.devToolsAiAssistancePerformanceAgent?.insightsEnabled && userHasExpandedPerfInsight) {
       targetConversationType = AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT;
     } else if (isPerformancePanelVisible && hostConfig.devToolsAiAssistancePerformanceAgent?.enabled) {
-      targetConversationType = AiAssistanceModel.ConversationType.PERFORMANCE;
+      targetConversationType = AiAssistanceModel.ConversationType.PERFORMANCE_CALL_TREE;
     }
 
     if (this.#conversation?.type === targetConversationType) {
@@ -709,44 +650,45 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return;
     }
 
-    const agent = targetConversationType ? this.#createAgent(targetConversationType) : undefined;
-    this.#updateConversationState(agent);
+    const agent = targetConversationType ?
+        this.#conversationHandler.createAgent(targetConversationType, this.#changeManager) :
+        undefined;
+    this.#updateConversationState({agent});
   }
 
-  #updateConversationState(input?: AiAssistanceModel.AiAgent<unknown>|AiAssistanceModel.Conversation): void {
-    const agent = input instanceof AiAssistanceModel.AiAgent ? input : undefined;
-    const conversation = input instanceof AiAssistanceModel.Conversation ? input : undefined;
-
-    if (this.#conversationAgent !== agent) {
+  #updateConversationState(opts?: {
+    agent?: AiAssistanceModel.AiAgent<unknown>,
+    conversation?: AiAssistanceModel.Conversation,
+  }): void {
+    if (this.#conversationAgent !== opts?.agent) {
       // Cancel any previous conversation
       this.#cancel();
       this.#messages = [];
       this.#isLoading = false;
       this.#conversation?.archiveConversation();
-      this.#conversationAgent = agent;
+      this.#conversationAgent = opts?.agent;
 
       // If we get a new agent we need to
       // create a new conversation along side it
-      if (agent) {
+      if (opts?.agent) {
         this.#conversation = new AiAssistanceModel.Conversation(
-            agentToConversationType(agent),
+            agentToConversationType(opts?.agent),
             [],
-            agent.id,
+            opts?.agent.id,
             false,
         );
-        this.#historicalConversations.push(this.#conversation);
       }
     }
 
-    if (!agent) {
+    if (!opts?.agent) {
       this.#conversation = undefined;
       // We need to run doConversation separately
       this.#messages = [];
       // If a no new agent is provided
       // but conversation is
       // update with history conversation
-      if (conversation) {
-        this.#conversation = conversation;
+      if (opts?.conversation) {
+        this.#conversation = opts?.conversation;
       }
     }
 
@@ -767,12 +709,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         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.#selectedPerformanceInsight =
-        createPerfInsightContext(UI.Context.Context.instance().flavor(TimelineUtils.InsightAIContext.ActiveInsight));
+    this.#selectedPerformanceTrace =
+        createPerformanceTraceContext(UI.Context.Context.instance().flavor(TimelineUtils.AIContext.AgentFocus));
     this.#selectedFile = createFileContext(UI.Context.Context.instance().flavor(Workspace.UISourceCode.UISourceCode));
-    this.#updateConversationState(this.#conversationAgent);
+    this.#updateConversationState({agent: this.#conversationAgent});
 
     this.#aiAssistanceEnabledSetting?.addChangeListener(this.requestUpdate, this);
     Host.AidaClient.HostConfigTracker.instance().addEventListener(
@@ -783,20 +723,12 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     UI.Context.Context.instance().addFlavorChangeListener(
         SDK.NetworkRequest.NetworkRequest, this.#handleNetworkRequestFlavorChange);
     UI.Context.Context.instance().addFlavorChangeListener(
-        TimelineUtils.AICallTree.AICallTree, this.#handleTraceEntryNodeFlavorChange);
+        TimelineUtils.AIContext.AgentFocus, this.#handlePerformanceTraceFlavorChange);
     UI.Context.Context.instance().addFlavorChangeListener(
         Workspace.UISourceCode.UISourceCode, this.#handleUISourceCodeFlavorChange);
-    UI.Context.Context.instance().addFlavorChangeListener(
-        TimelineUtils.InsightAIContext.ActiveInsight, this.#handlePerfInsightFlavorChange);
 
-    UI.Context.Context.instance().addFlavorChangeListener(
-        ElementsPanel.ElementsPanel.ElementsPanel, this.#selectDefaultAgentIfNeeded, this);
-    UI.Context.Context.instance().addFlavorChangeListener(
-        NetworkPanel.NetworkPanel.NetworkPanel, this.#selectDefaultAgentIfNeeded, this);
-    UI.Context.Context.instance().addFlavorChangeListener(
-        SourcesPanel.SourcesPanel.SourcesPanel, this.#selectDefaultAgentIfNeeded, this);
-    UI.Context.Context.instance().addFlavorChangeListener(
-        TimelinePanel.TimelinePanel.TimelinePanel, this.#selectDefaultAgentIfNeeded, this);
+    UI.ViewManager.ViewManager.instance().addEventListener(
+        UI.ViewManager.Events.VIEW_VISIBILITY_CHANGED, this.#selectDefaultAgentIfNeeded, this);
 
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DOMModel.DOMModel, SDK.DOMModel.Events.AttrModified, this.#handleDOMNodeAttrChange, this);
@@ -813,6 +745,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     UI.Context.Context.instance().addFlavorChangeListener(
         TimelinePanel.TimelinePanel.TimelinePanel, this.#bindTimelineTraceListener, this);
     this.#bindTimelineTraceListener();
+    this.#selectDefaultAgentIfNeeded();
 
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistancePanelOpened);
   }
@@ -827,19 +760,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     UI.Context.Context.instance().removeFlavorChangeListener(
         SDK.NetworkRequest.NetworkRequest, this.#handleNetworkRequestFlavorChange);
     UI.Context.Context.instance().removeFlavorChangeListener(
-        TimelineUtils.AICallTree.AICallTree, this.#handleTraceEntryNodeFlavorChange);
-    UI.Context.Context.instance().removeFlavorChangeListener(
-        TimelineUtils.InsightAIContext.ActiveInsight, this.#handlePerfInsightFlavorChange);
+        TimelineUtils.AIContext.AgentFocus, this.#handlePerformanceTraceFlavorChange);
     UI.Context.Context.instance().removeFlavorChangeListener(
         Workspace.UISourceCode.UISourceCode, this.#handleUISourceCodeFlavorChange);
-    UI.Context.Context.instance().removeFlavorChangeListener(
-        ElementsPanel.ElementsPanel.ElementsPanel, this.#selectDefaultAgentIfNeeded, this);
-    UI.Context.Context.instance().removeFlavorChangeListener(
-        NetworkPanel.NetworkPanel.NetworkPanel, this.#selectDefaultAgentIfNeeded, this);
-    UI.Context.Context.instance().removeFlavorChangeListener(
-        SourcesPanel.SourcesPanel.SourcesPanel, this.#selectDefaultAgentIfNeeded, this);
-    UI.Context.Context.instance().removeFlavorChangeListener(
-        TimelinePanel.TimelinePanel.TimelinePanel, this.#selectDefaultAgentIfNeeded, this);
+    UI.ViewManager.ViewManager.instance().removeEventListener(
+        UI.ViewManager.Events.VIEW_VISIBILITY_CHANGED, this.#selectDefaultAgentIfNeeded, this);
     UI.Context.Context.instance().removeFlavorChangeListener(
         TimelinePanel.TimelinePanel.TimelinePanel, this.#bindTimelineTraceListener, this);
     SDK.TargetManager.TargetManager.instance().removeModelListener(
@@ -885,7 +810,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
 
     this.#selectedElement = createNodeContext(selectedElementFilter(ev.data));
-    this.#updateConversationState(this.#conversationAgent);
+    this.#updateConversationState({agent: this.#conversationAgent});
   };
 
   #handleDOMNodeAttrChange =
@@ -903,28 +828,44 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           return;
         }
 
-        this.#selectedRequest = Boolean(ev.data) ? new AiAssistanceModel.RequestContext(ev.data) : null;
-        this.#updateConversationState(this.#conversationAgent);
+        if (Boolean(ev.data)) {
+          const calculator = NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator();
+          this.#selectedRequest = new AiAssistanceModel.RequestContext(ev.data, calculator);
+        } else {
+          this.#selectedRequest = null;
+        }
+        this.#updateConversationState({agent: this.#conversationAgent});
       };
 
-  #handleTraceEntryNodeFlavorChange =
-      (ev: Common.EventTarget.EventTargetEvent<TimelineUtils.AICallTree.AICallTree>): void => {
-        if (this.#selectedCallTree?.getItem() === ev.data) {
+  #handlePerformanceTraceFlavorChange =
+      (ev: Common.EventTarget.EventTargetEvent<TimelineUtils.AIContext.AgentFocus>): void => {
+        if (this.#selectedPerformanceTrace?.getItem() === ev.data) {
           return;
         }
 
-        this.#selectedCallTree = Boolean(ev.data) ? new AiAssistanceModel.CallTreeContext(ev.data) : null;
-        this.#updateConversationState(this.#conversationAgent);
-      };
+        this.#selectedPerformanceTrace =
+            Boolean(ev.data) ? new AiAssistanceModel.PerformanceTraceContext(ev.data) : null;
+
+        let conversationType: AiAssistanceModel.ConversationType|undefined;
+        if (ev.data) {
+          if (ev.data.data.type === 'full') {
+            conversationType = AiAssistanceModel.ConversationType.PERFORMANCE_FULL;
+          } else if (ev.data.data.type === 'insight') {
+            conversationType = AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT;
+          } else if (ev.data.data.type === 'call-tree') {
+            conversationType = AiAssistanceModel.ConversationType.PERFORMANCE_CALL_TREE;
+          } else {
+            Platform.assertNever(ev.data.data, 'Unknown agent focus');
+          }
+        }
 
-  #handlePerfInsightFlavorChange =
-      (ev: Common.EventTarget.EventTargetEvent<TimelineUtils.InsightAIContext.ActiveInsight>): void => {
-        if (this.#selectedPerformanceInsight?.getItem() === ev.data) {
-          return;
+        let agent = this.#conversationAgent;
+        if (conversationType && agent instanceof AiAssistanceModel.PerformanceAgent &&
+            agent.getConversationType() !== conversationType) {
+          agent = this.#conversationHandler.createAgent(conversationType);
         }
 
-        this.#selectedPerformanceInsight = Boolean(ev.data) ? new AiAssistanceModel.InsightContext(ev.data) : null;
-        this.#updateConversationState(this.#conversationAgent);
+        this.#updateConversationState({agent: this.#conversationAgent});
       };
 
   #handleUISourceCodeFlavorChange =
@@ -937,7 +878,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           return;
         }
         this.#selectedFile = new AiAssistanceModel.FileContext(ev.data);
-        this.#updateConversationState(this.#conversationAgent);
+        this.#updateConversationState({agent: this.#conversationAgent});
       };
 
   #onPrimaryPageChanged(): void {
@@ -977,8 +918,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           multimodalInputEnabled: isAiAssistanceMultimodalInputEnabled() &&
               this.#conversation?.type === AiAssistanceModel.ConversationType.STYLING,
           imageInput: this.#imageInput,
-          showDeleteHistoryAction: Boolean(this.#conversation && !this.#conversation.isEmpty),
           showChatActions: this.#shouldShowChatActions(),
+          showActiveConversationActions: Boolean(this.#conversation && !this.#conversation.isEmpty),
           isTextInputDisabled: this.#isTextInputDisabled(),
           emptyStateSuggestions,
           inputPlaceholder: this.#getChatInputPlaceholder(),
@@ -990,6 +931,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           onNewChatClick: this.#handleNewChatRequest.bind(this),
           populateHistoryMenu: this.#populateHistoryMenu.bind(this),
           onDeleteClick: this.#onDeleteClicked.bind(this),
+          onExportConversationClick: this.#onExportConversationClick.bind(this),
           onHelpClick: () => {
             UI.UIUtils.openInNewTab(AI_ASSISTANCE_HELP);
           },
@@ -1012,13 +954,26 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           onTakeScreenshot: isAiAssistanceMultimodalInputEnabled() ? this.#handleTakeScreenshot.bind(this) : undefined,
           onRemoveImageInput: isAiAssistanceMultimodalInputEnabled() ? this.#handleRemoveImageInput.bind(this) :
                                                                        undefined,
+          onCopyResponseClick: this.#onCopyResponseClick.bind(this),
           onTextInputChange: this.#handleTextInputChange.bind(this),
           onLoadImage: isAiAssistanceMultimodalUploadInputEnabled() ? this.#handleLoadImage.bind(this) : undefined,
         },
         this.#viewOutput, this.contentElement);
   }
 
+  #onCopyResponseClick(message: ModelChatMessage): void {
+    const markdown = getResponseMarkdown(message);
+    if (markdown) {
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(markdown);
+      Snackbars.Snackbar.Snackbar.show({
+        message: i18nString(UIStrings.responseCopiedToClipboard),
+      });
+    }
+  }
+
   #handleSelectElementClick(): void {
+    UI.Context.Context.instance().setFlavor(
+        Common.ReturnToPanel.ReturnToPanelFlavor, new Common.ReturnToPanel.ReturnToPanelFlavor(this.panelName));
     void this.#toggleSearchElementAction?.execute();
   }
 
@@ -1085,7 +1040,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       case AiAssistanceModel.ConversationType.NETWORK:
         return this.#selectedContext ? lockedString(UIStringsNotTranslate.inputPlaceholderForNetwork) :
                                        lockedString(UIStringsNotTranslate.inputPlaceholderForNetworkNoContext);
-      case AiAssistanceModel.ConversationType.PERFORMANCE: {
+      case AiAssistanceModel.ConversationType.PERFORMANCE_CALL_TREE: {
         const perfPanel = UI.Context.Context.instance().flavor(TimelinePanel.TimelinePanel.TimelinePanel);
         if (perfPanel?.hasActiveTrace()) {
           return this.#selectedContext ? lockedString(UIStringsNotTranslate.inputPlaceholderForPerformance) :
@@ -1097,6 +1052,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         return this.#selectedContext ?
             lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceInsights) :
             lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceInsightsNoContext);
+      case AiAssistanceModel.ConversationType.PERFORMANCE_FULL:
+        return this.#selectedContext ? lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceTrace) :
+                                       lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceTraceNoContext);
     }
   }
 
@@ -1127,7 +1085,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
       // It is deliberate that both Performance agents use the same disclaimer
       // text and this has been approved by Privacy.
-      case AiAssistanceModel.ConversationType.PERFORMANCE:
+      case AiAssistanceModel.ConversationType.PERFORMANCE_FULL:
+      case AiAssistanceModel.ConversationType.PERFORMANCE_CALL_TREE:
       case AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT:
         if (noLogging) {
           return lockedString(UIStringsNotTranslate.inputDisclaimerForPerformanceEnterpriseNoLogging);
@@ -1161,22 +1120,27 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     if (context instanceof AiAssistanceModel.FileContext) {
       return Common.Revealer.reveal(context.getItem().uiLocation(0, 0));
     }
-    if (context instanceof AiAssistanceModel.CallTreeContext) {
-      const item = context.getItem();
-      const event = item.selectedNode?.event ?? item.rootNode.event;
-      const trace = new SDK.TraceObject.RevealableEvent(event);
-      return Common.Revealer.reveal(trace);
-    }
-    if (context instanceof AiAssistanceModel.InsightContext) {
-      const item = context.getItem();
-      return Common.Revealer.reveal(item);
+    if (context instanceof AiAssistanceModel.PerformanceTraceContext) {
+      const focus = context.getItem().data;
+      if (focus.type === 'full') {
+        return;
+      }
+      if (focus.type === 'call-tree') {
+        const event = focus.callTree.selectedNode?.event ?? focus.callTree.rootNode.event;
+        const trace = new SDK.TraceObject.RevealableEvent(event);
+        return Common.Revealer.reveal(trace);
+      }
+      if (focus.type === 'insight') {
+        return Common.Revealer.reveal(focus.insight);
+      }
+      Platform.assertNever(focus, 'Unknown agent focus');
     }
     // Node picker is using linkifier.
   }
 
-  handleAction(actionId: string): void {
-    if (this.#isLoading) {
-      // If running some queries already, focus the input with the abort
+  handleAction(actionId: string, opts?: Record<string, unknown>): void {
+    if (this.#isLoading && !opts?.['prompt']) {
+      // If running some queries already, and this action doesn't contain a predefined prompt, focus the input with the abort
       // button and do nothing.
       this.#viewOutput.chatView?.focusTextInput();
       return;
@@ -1205,8 +1169,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         break;
       }
       case 'drjones.performance-panel-context': {
-        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceOpenedFromPerformancePanel);
-        targetConversationType = AiAssistanceModel.ConversationType.PERFORMANCE;
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceOpenedFromPerformancePanelCallTree);
+        targetConversationType = AiAssistanceModel.ConversationType.PERFORMANCE_CALL_TREE;
         break;
       }
       case 'drjones.performance-insight-context': {
@@ -1214,6 +1178,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         targetConversationType = AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT;
         break;
       }
+      case 'drjones.performance-panel-full-context': {
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceOpenedFromPerformanceFullButton);
+        targetConversationType = AiAssistanceModel.ConversationType.PERFORMANCE_FULL;
+        break;
+      }
       case 'drjones.sources-floating-button': {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceOpenedFromSourcesPanelFloatingButton);
         targetConversationType = AiAssistanceModel.ConversationType.FILE;
@@ -1232,15 +1201,31 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
     let agent = this.#conversationAgent;
     if (!this.#conversation || !this.#conversationAgent || this.#conversation.type !== targetConversationType ||
-        this.#conversation?.isEmpty || targetConversationType === AiAssistanceModel.ConversationType.PERFORMANCE) {
-      agent = this.#createAgent(targetConversationType);
+        this.#conversation?.isEmpty ||
+        targetConversationType === AiAssistanceModel.ConversationType.PERFORMANCE_CALL_TREE ||
+        (agent instanceof AiAssistanceModel.PerformanceAgent &&
+         agent.getConversationType() !== targetConversationType)) {
+      agent = this.#conversationHandler.createAgent(targetConversationType, this.#changeManager);
+    }
+    this.#updateConversationState({agent});
+    const predefinedPrompt = opts?.['prompt'];
+    if (predefinedPrompt && typeof predefinedPrompt === 'string') {
+      this.#imageInput = undefined;
+      this.#isTextInputEmpty = true;
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceQuerySubmitted);
+      if (this.#blockedByCrossOrigin) {
+        this.#handleNewChatRequest();
+      }
+      void this.#startConversation(predefinedPrompt);
+    } else {
+      this.#viewOutput.chatView?.focusTextInput();
     }
-    this.#updateConversationState(agent);
-    this.#viewOutput.chatView?.focusTextInput();
   }
 
   #populateHistoryMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
-    for (const conversation of [...this.#historicalConversations].reverse()) {
+    const historicalConversations = AiAssistanceModel.AiHistoryStorage.instance().getHistory().map(
+        serializedConversation => AiAssistanceModel.Conversation.fromSerializedConversation(serializedConversation));
+    for (const conversation of historicalConversations.reverse()) {
       if (conversation.isEmpty) {
         continue;
       }
@@ -1250,7 +1235,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       }
 
       contextMenu.defaultSection().appendCheckboxItem(title, () => {
-        void this.#openConversation(conversation);
+        void this.#openHistoricConversation(conversation);
       }, {checked: (this.#conversation === conversation)});
     }
 
@@ -1264,7 +1249,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     contextMenu.footerSection().appendItem(
         i18nString(UIStrings.clearChatHistory),
         () => {
-          this.#clearHistory();
+          void AiAssistanceModel.AiHistoryStorage.instance().deleteAll();
         },
         {
           disabled: historyEmpty,
@@ -1272,9 +1257,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     );
   }
 
-  #clearHistory(): void {
-    this.#historicalConversations = [];
-    void AiAssistanceModel.AiHistoryStorage.instance().deleteAll();
+  #onHistoryDeleted(): void {
     this.#updateConversationState();
   }
 
@@ -1283,25 +1266,45 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return;
     }
 
-    this.#historicalConversations =
-        this.#historicalConversations.filter(conversation => conversation !== this.#conversation);
     void AiAssistanceModel.AiHistoryStorage.instance().deleteHistoryEntry(this.#conversation.id);
     this.#updateConversationState();
-    UI.ARIAUtils.alert(i18nString(UIStrings.chatDeleted));
+    UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.chatDeleted));
+  }
+
+  async #onExportConversationClick(): Promise<void> {
+    if (!this.#conversation) {
+      return;
+    }
+
+    const markdownContent = this.#conversation.getConversationMarkdown();
+    const contentData = new TextUtils.ContentData.ContentData(markdownContent, false, 'text/markdown');
+
+    const titleFormatted = Platform.StringUtilities.toSnakeCase(this.#conversation.title || '');
+    const prefix = 'devtools_';
+    const suffix = '.md';
+    const maxTitleLength = 64 - prefix.length - suffix.length;
+    let finalTitle = titleFormatted || 'conversation';
+    if (finalTitle.length > maxTitleLength) {
+      finalTitle = finalTitle.substring(0, maxTitleLength);
+    }
+    const filename = `${prefix}${finalTitle}${suffix}` as Platform.DevToolsPath.RawPathString;
+
+    await Workspace.FileManager.FileManager.instance().save(filename, contentData, true);
+    Workspace.FileManager.FileManager.instance().close(filename);
   }
 
-  async #openConversation(conversation: AiAssistanceModel.Conversation): Promise<void> {
+  async #openHistoricConversation(conversation: AiAssistanceModel.Conversation): Promise<void> {
     if (this.#conversation === conversation) {
       return;
     }
 
-    this.#updateConversationState(conversation);
+    this.#updateConversationState({conversation});
     await this.#doConversation(conversation.history);
   }
 
   #handleNewChatRequest(): void {
     this.#updateConversationState();
-    UI.ARIAUtils.alert(i18nString(UIStrings.newChatCreated));
+    UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.newChatCreated));
   }
 
   async #handleTakeScreenshot(): Promise<void> {
@@ -1408,7 +1411,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     });
   }
 
-  #runAbortController = new AbortController();
   #cancel(): void {
     this.#runAbortController.abort();
     this.#runAbortController = new AbortController();
@@ -1447,11 +1449,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       case AiAssistanceModel.ConversationType.NETWORK:
         context = this.#selectedRequest;
         break;
-      case AiAssistanceModel.ConversationType.PERFORMANCE:
-        context = this.#selectedCallTree;
-        break;
+      case AiAssistanceModel.ConversationType.PERFORMANCE_FULL:
+      case AiAssistanceModel.ConversationType.PERFORMANCE_CALL_TREE:
       case AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT:
-        context = this.#selectedPerformanceInsight;
+        context = this.#selectedPerformanceTrace;
         break;
     }
     return context;
@@ -1485,29 +1486,15 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     if (this.#conversation) {
       void VisualLogging.logFunctionCall(`start-conversation-${this.#conversation.type}`, 'ui');
     }
-    const runner = this.#conversationAgent.run(
+
+    const generator = this.#conversationAgent.run(
         text, {
           signal,
           selected: context,
         },
         multimodalInput);
-    UI.ARIAUtils.alert(lockedString(UIStringsNotTranslate.answerLoading));
-    await this.#doConversation(this.#saveResponsesToCurrentConversation(runner));
-    UI.ARIAUtils.alert(lockedString(UIStringsNotTranslate.answerReady));
-  }
-
-  async *
-      #saveResponsesToCurrentConversation(items: AsyncIterable<AiAssistanceModel.ResponseData, void, void>):
-          AsyncGenerator<AiAssistanceModel.ResponseData, void, void> {
-    const currentConversation = this.#conversation;
-
-    for await (const data of items) {
-      // We don't want to save partial responses to the conversation history.
-      if (data.type !== AiAssistanceModel.ResponseType.ANSWER || data.complete) {
-        void currentConversation?.addHistoryItem(data);
-      }
-      yield data;
-    }
+    const generatorWithHistory = this.#conversationHandler.handleConversationWithHistory(generator, this.#conversation);
+    await this.#doConversation(generatorWithHistory);
   }
 
   async #doConversation(
@@ -1531,6 +1518,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       }
 
       this.#isLoading = true;
+      let announcedAnswerLoading = false;
+      let announcedAnswerReady = false;
       for await (const data of items) {
         step.sideEffect = undefined;
         switch (data.type) {
@@ -1628,7 +1617,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           }
         }
 
-        // Commit update intermediated step when not
+        // Commit update intermediate step when not
         // in read only mode.
         if (!this.#conversation?.isReadOnly) {
           this.requestUpdate();
@@ -1640,6 +1629,25 @@ export class AiAssistancePanel extends UI.Panel.Panel {
               data.type === AiAssistanceModel.ResponseType.SIDE_EFFECT) {
             this.#viewOutput.chatView?.scrollToBottom();
           }
+
+          // Announce as status update to screen readers when:
+          // * Context is received (e.g. Analyzing the prompt)
+          // * Answer started streaming
+          // * Answer finished streaming
+          switch (data.type) {
+            case AiAssistanceModel.ResponseType.CONTEXT:
+              UI.ARIAUtils.LiveAnnouncer.status(data.title);
+              break;
+            case AiAssistanceModel.ResponseType.ANSWER: {
+              if (!data.complete && !announcedAnswerLoading) {
+                announcedAnswerLoading = true;
+                UI.ARIAUtils.LiveAnnouncer.status(lockedString(UIStringsNotTranslate.answerLoading));
+              } else if (data.complete && !announcedAnswerReady) {
+                announcedAnswerReady = true;
+                UI.ARIAUtils.LiveAnnouncer.status(lockedString(UIStringsNotTranslate.answerReady));
+              }
+            }
+          }
         }
       }
 
@@ -1649,78 +1657,42 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       release();
     }
   }
+}
 
-  async handleExternalRequest(prompt: string, conversationType: AiAssistanceModel.ConversationType, selector?: string):
-      Promise<{response: string, devToolsLogs: object[]}> {
-    Snackbars.Snackbar.Snackbar.show({message: i18nString(UIStrings.externalRequestReceived)});
-    const disabledReasons = AiAssistanceModel.getDisabledReasons(this.#aidaAvailability);
-    const aiAssistanceSetting = this.#aiAssistanceEnabledSetting?.getIfNotDisabled();
-    if (!aiAssistanceSetting) {
-      disabledReasons.push(lockedString(UIStringsNotTranslate.enableInSettings));
+export function getResponseMarkdown(message: ModelChatMessage): string {
+  const contentParts = ['## AI'];
+
+  for (const step of message.steps) {
+    if (step.title) {
+      contentParts.push(`### ${step.title}`);
     }
-    if (disabledReasons.length > 0) {
-      throw new Error(disabledReasons.join(' '));
+    if (step.contextDetails) {
+      contentParts.push(AiAssistanceModel.Conversation.generateContextDetailsMarkdown(step.contextDetails));
     }
-
-    void VisualLogging.logFunctionCall(`start-conversation-${conversationType}`, 'external');
-    switch (conversationType) {
-      case AiAssistanceModel.ConversationType.STYLING:
-        return await this.handleExternalStylingRequest(prompt, selector);
-      default:
-        throw new Error(`Debugging with an agent of type '${conversationType}' is not implemented yet.`);
+    if (step.thought) {
+      contentParts.push(step.thought);
     }
-  }
-
-  async handleExternalStylingRequest(prompt: string, selector?: string):
-      Promise<{response: string, devToolsLogs: object[]}> {
-    const stylingAgent = this.#createAgent(AiAssistanceModel.ConversationType.STYLING);
-    const externalConversation = new AiAssistanceModel.Conversation(
-        agentToConversationType(stylingAgent),
-        [],
-        stylingAgent.id,
-        /* isReadOnly */ true,
-        /* isExternal */ true,
-    );
-    this.#historicalConversations.push(externalConversation);
-
-    if (selector !== undefined) {
-      await inspectElementBySelector(selector);
+    if (step.code) {
+      contentParts.push(`**Code executed:**\n\`\`\`\n${step.code.trim()}\n\`\`\``);
     }
-
-    const runner = stylingAgent.run(
-        prompt,
-        {
-          selected: this.#getConversationContext(externalConversation),
-        },
-    );
-    const devToolsLogs: object[] = [];
-    for await (const data of runner) {
-      // We don't want to save partial responses to the conversation history.
-      if (data.type !== AiAssistanceModel.ResponseType.ANSWER || data.complete) {
-        void externalConversation.addHistoryItem(data);
-        devToolsLogs.push(data);
-      }
-      if (data.type === AiAssistanceModel.ResponseType.SIDE_EFFECT) {
-        data.confirm(true);
-      }
-      if (data.type === AiAssistanceModel.ResponseType.ANSWER && data.complete) {
-        return {response: data.text, devToolsLogs};
-      }
+    if (step.output) {
+      contentParts.push(`**Data returned:**\n\`\`\`\n${step.output}\n\`\`\``);
     }
-    throw new Error('Something went wrong. No answer was generated.');
   }
+  if (message.answer) {
+    contentParts.push(`### Answer\n\n${message.answer}`);
+  }
+  return contentParts.join('\n\n');
 }
 
 export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
-  handleAction(
-      _context: UI.Context.Context,
-      actionId: string,
-      ): boolean {
+  handleAction(_context: UI.Context.Context, actionId: string, opts?: Record<string, unknown>): boolean {
     switch (actionId) {
       case 'freestyler.elements-floating-button':
       case 'freestyler.element-panel-context':
       case 'drjones.network-floating-button':
       case 'drjones.network-panel-context':
+      case 'drjones.performance-panel-full-context':
       case 'drjones.performance-panel-context':
       case 'drjones.performance-insight-context':
       case 'drjones.sources-floating-button':
@@ -1746,7 +1718,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
           }
 
           const widget = (await view.widget()) as AiAssistancePanel;
-          widget.handleAction(actionId);
+          widget.handleAction(actionId, opts);
         })();
         return true;
       }
@@ -1768,7 +1740,3 @@ function isAiAssistanceMultimodalInputEnabled(): boolean {
 function isAiAssistanceServerSideLoggingEnabled(): boolean {
   return !Root.Runtime.hostConfig.aidaAvailability?.disallowLogging;
 }
-
-function isAiAssistanceStylingWithFunctionCallingEnabled(): boolean {
-  return Boolean(Root.Runtime.hostConfig.devToolsFreestyler?.functionCalling);
-}