chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/panels/freestyler/components/FreestylerChatUi.ts

@@ -2,24 +2,30 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/spinners/spinners.js';
+import './UserActionRow.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 type * as SDK from '../../../core/sdk/sdk.js';
+import * as SDK from '../../../core/sdk/sdk.js';
+import type * as Workspace from '../../../models/workspace/workspace.js';
+import * as TimelineUtils from '../../../panels/timeline/utils/utils.js';
 import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
-import * as Spinners from '../../../ui/components/spinners/spinners.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 {PanelUtils} from '../../utils/utils.js';
-import {type ContextDetail, ErrorType} from '../AiAgent.js';
+import {AgentType, type ContextDetail, ErrorType} from '../AiAgent.js';
 
 import freestylerChatUiStyles from './freestylerChatUi.css.js';
-import {ProvideFeedback, type ProvideFeedbackProps} from './ProvideFeedback.js';
+import type {UserActionRowProps} from './UserActionRow.js';
+
+const {html, Directives: {ifDefined}} = LitHtml;
 
 const UIStrings = {
   /**
@@ -52,6 +58,21 @@ const UIStrings = {
    *@example {AI assistance in Settings} PH1
    */
   turnOnForStylesAndRequests: 'Turn on {PH1} to get help with styles and network requests',
+  /**
+   *@description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
+   *@example {AI assistance in Settings} PH1
+   */
+  turnOnForStylesRequestsAndFiles: 'Turn on {PH1} to get help with styles, network requests, and files',
+  /**
+   *@description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
+   *@example {AI assistance in Settings} PH1
+   */
+  turnOnForStylesRequestsPerformanceAndFiles:
+      'Turn on {PH1} to get help with styles, network requests, performance, and files',
+  /**
+   *@description The footer disclaimer that links to more information about the AI feature.
+   */
+  learnAbout: 'Learn about AI in DevTools',
 };
 
 /*
@@ -68,6 +89,16 @@ const UIStringsNotTranslate = {
    */
   inputDisclaimerForDrJonesNetworkAgent:
       '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.
+   */
+  inputDisclaimerForDrJonesFileAgent:
+      '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.
+   */
+  inputDisclaimerForDrJonesPerformanceAgent:
+      'Chat messages and the selected call tree 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 Placeholder text for the chat UI input.
    */
@@ -76,6 +107,14 @@ const UIStringsNotTranslate = {
    *@description Placeholder text for the chat UI input.
    */
   inputPlaceholderForDrJonesNetworkAgent: 'Ask a question about the selected network request',
+  /**
+   *@description Placeholder text for the chat UI input.
+   */
+  inputPlaceholderForDrJonesFileAgent: 'Ask a question about the selected file',
+  /**
+   *@description Placeholder text for the chat UI input.
+   */
+  inputPlaceholderForDrJonesPerformanceAgent: 'Ask a question about the selected item and its call tree',
   /**
    *@description Title for the send icon button.
    */
@@ -121,14 +160,6 @@ const UIStringsNotTranslate = {
    * @description Button text that cancels code execution that may affect the page.
    */
   negativeSideEffectConfirmation: 'Cancel',
-  /**
-   *@description Link text for redirecting to feedback form
-   */
-  feedbackLink: 'Send feedback',
-  /**
-   *@description Button text for "Fix this issue" button
-   */
-  fixThisIssue: 'Fix this issue',
   /**
    *@description The generic name of the AI agent (do not translate)
    */
@@ -158,42 +189,76 @@ const UIStringsNotTranslate = {
    */
   dataReturned: 'Data returned',
   /**
-   *@description The footer disclaimer that links to more information about the AI feature.
+   *@description Aria label for the check mark icon to be read by screen reader
    */
-  learnAbout: 'Learn about AI in DevTools',
+  completed: 'Completed',
   /**
-   * @description Text for a link to Chrome DevTools Settings.
+   *@description Aria label for the loading icon to be read by screen reader
    */
-  settingsLink: 'AI assistance in Settings',
+  inProgress: 'In progress',
   /**
-   * @description Placeholder text for an inactive text field. When active, it's used for the user's input to the GenAI assistance.
+   *@description Aria label for the cancel icon to be read by screen reader
    */
-  followTheSteps: 'Follow the steps above to ask a question',
+  canceled: 'Canceled',
+  /*
+   * @description Header text for instructions on how to use the AI assistance feature.
+   */
+  getStarted: 'Hi! Here’s how to get started:',
+  /**
+   * @description AI assistance for CSS.
+   */
+  cssHelp: 'CSS help:',
+  /**
+   * @description Explanation on how to use AI assistance for DOM elements.
+   */
+  cssHelpExplainer:
+      'Navigate to the Elements panel, right-click a DOM element, and select "Ask AI assistant". I’ll be happy to explain its styles or behavior.',
+  /**
+   * @description AI assistance for files.
+   */
+  fileHelp: 'File insights:',
+  /**
+   * @description Explanation on how to use AI assistance for files in the Sources panel.
+   */
+  fileHelpExplainer:
+      'Open the Sources panel, right-click a file, and select "Ask AI". I can provide insights into its purpose or origin.',
+  /**
+   * @description AI assistance for network requests.
+   */
+  networkHelp: 'Network request insights:',
+  /**
+   * @description Explanation on how to use AI assistance for network requests.
+   */
+  networkHelpExplainer:
+      'In the Network panel, right-click any request and select "Ask AI assistant". I’ll help break down what’s happening with each request.',
+  /**
+   * @description AI assistance for performance traces.
+   */
+  performanceHelp: 'Performance analysis:',
+  /**
+   * @description Explanation on how to use AI assistance for performance traces.
+   */
+  performanceHelpExplainer:
+      'In the Performance panel, run a trace. Then, right-click any function in the timeline and select "Ask AI". I’ll help you analyze its performance impact and suggest improvements.',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/freestyler/components/FreestylerChatUi.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const lockedString = i18n.i18n.lockedString;
 
-function getInputPlaceholderString(
-    aidaAvailability: Host.AidaClient.AidaAccessPreconditions, agentType: AgentType,
-    state: State): Platform.UIString.LocalizedString {
-  if (state === State.CONSENT_VIEW) {
+function getInputPlaceholderString(state: State, agentType?: AgentType): Platform.UIString.LocalizedString {
+  if (state === State.CONSENT_VIEW || !agentType) {
     return i18nString(UIStrings.followTheSteps);
   }
-  switch (aidaAvailability) {
-    case Host.AidaClient.AidaAccessPreconditions.AVAILABLE:
-      switch (agentType) {
-        case AgentType.FREESTYLER:
-          return lockedString(UIStringsNotTranslate.inputPlaceholderForFreestylerAgent);
-        case AgentType.DRJONES_NETWORK_REQUEST:
-          return lockedString(UIStringsNotTranslate.inputPlaceholderForDrJonesNetworkAgent);
-      }
-    case Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL:
-    case Host.AidaClient.AidaAccessPreconditions.SYNC_IS_PAUSED:
-      return i18nString(UIStrings.notLoggedIn);
-    case Host.AidaClient.AidaAccessPreconditions.NO_INTERNET:
-      return i18nString(UIStrings.offline);
+  switch (agentType) {
+    case AgentType.FREESTYLER:
+      return lockedString(UIStringsNotTranslate.inputPlaceholderForFreestylerAgent);
+    case AgentType.DRJONES_FILE:
+      return lockedString(UIStringsNotTranslate.inputPlaceholderForDrJonesFileAgent);
+    case AgentType.DRJONES_NETWORK_REQUEST:
+      return lockedString(UIStringsNotTranslate.inputPlaceholderForDrJonesNetworkAgent);
+    case AgentType.DRJONES_PERFORMANCE:
+      return lockedString(UIStringsNotTranslate.inputPlaceholderForDrJonesPerformanceAgent);
   }
 }
 
@@ -205,7 +270,7 @@ export interface Step {
   output?: string;
   canceled?: boolean;
   sideEffect?: ConfirmSideEffectDialog;
-  contextDetails?: ContextDetail[];
+  contextDetails?: [ContextDetail, ...ContextDetail[]];
 }
 
 interface ConfirmSideEffectDialog {
@@ -224,7 +289,7 @@ export interface UserChatMessage {
 export interface ModelChatMessage {
   entity: ChatMessageEntity.MODEL;
   steps: Step[];
-  suggestions?: string[];
+  suggestions?: [string, ...string[]];
   answer?: string;
   error?: ErrorType;
   rpcId?: number;
@@ -237,27 +302,25 @@ export const enum State {
   CHAT_VIEW = 'chat-view',
 }
 
-export const enum AgentType {
-  FREESTYLER = 'freestyler',
-  DRJONES_NETWORK_REQUEST = 'drjones-network-request',
-}
-
 export interface Props {
   onTextSubmit: (text: string) => void;
   onInspectElementClick: () => void;
   onFeedbackSubmit: (rpcId: number, rate: Host.AidaClient.Rating, feedback?: string) => void;
   onCancelClick: () => void;
   onSelectedNetworkRequestClick: () => void | Promise<void>;
+  onSelectedFileRequestClick: () => void | Promise<void>;
   inspectElementToggled: boolean;
   state: State;
   aidaAvailability: Host.AidaClient.AidaAccessPreconditions;
   messages: ChatMessage[];
   selectedElement: SDK.DOMModel.DOMNode|null;
+  selectedFile: Workspace.UISourceCode.UISourceCode|null;
   selectedNetworkRequest: SDK.NetworkRequest.NetworkRequest|null;
+  selectedAiCallTree: TimelineUtils.AICallTree.AICallTree|null;
   isLoading: boolean;
   canShowFeedbackForm: boolean;
   userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>;
-  agentType: AgentType;
+  agentType?: AgentType;
 }
 
 // The model returns multiline code blocks in an erroneous way with the language being in new line.
@@ -271,7 +334,7 @@ export interface Props {
 // }
 // ```
 class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.MarkdownInsightRenderer {
-  override templateForToken(token: Marked.Marked.Token): LitHtml.TemplateResult|null {
+  override templateForToken(token: Marked.Marked.MarkedToken): LitHtml.TemplateResult|null {
     if (token.type === 'code') {
       const lines = (token.text as string).split('\n');
       if (lines[0]?.trim() === 'css') {
@@ -285,7 +348,6 @@ class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.MarkdownIn
 }
 
 export class FreestylerChatUi extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-freestyler-chat-ui`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #markdownRenderer = new MarkdownRendererWithCodeBlock();
   #scrollTop?: number;
@@ -320,7 +382,7 @@ export class FreestylerChatUi extends HTMLElement {
       return;
     }
 
-    const scrollContainer = this.#shadow.querySelector('.messages-scroll-container') as HTMLElement;
+    const scrollContainer = this.#shadow.querySelector('.chat-ui main') as HTMLElement;
     if (!scrollContainer) {
       return;
     }
@@ -353,11 +415,16 @@ export class FreestylerChatUi extends HTMLElement {
         return Boolean(step.sideEffect);
       });
     });
+
     const isInputDisabledCheckForFreestylerAgent = !Boolean(this.#props.selectedElement) || showsSideEffects;
     const isInputDisabledCheckForDrJonesNetworkAgent = !Boolean(this.#props.selectedNetworkRequest);
+    const isInputDisabledCheckForDrJonesFileAgent =
+        !Boolean(this.#props.selectedFile) || !this.#props.selectedFile?.contentType().isTextType();
+
     return (this.#props.agentType === AgentType.FREESTYLER && isInputDisabledCheckForFreestylerAgent) ||
         (this.#props.agentType === AgentType.DRJONES_NETWORK_REQUEST && isInputDisabledCheckForDrJonesNetworkAgent) ||
-        !isAidaAvailable || isConsentView;
+        (this.#props.agentType === AgentType.DRJONES_FILE && isInputDisabledCheckForDrJonesFileAgent) ||
+        !isAidaAvailable || isConsentView || !this.#props.agentType;
   };
 
   #handleScroll = (ev: Event): void => {
@@ -407,18 +474,25 @@ export class FreestylerChatUi extends HTMLElement {
   #handleSuggestionClick = (suggestion: string): void => {
     this.#setInputText(suggestion);
     this.focusTextInput();
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceDynamicSuggestionClicked);
   };
 
-  #renderRateButtons(rpcId: number): LitHtml.TemplateResult {
+  #renderUserActionRow(rpcId?: number, suggestions?: [string, ...string[]]): LitHtml.TemplateResult {
     // clang-format off
-    return LitHtml.html`<${ProvideFeedback.litTagName}
+    return html`<devtools-user-action-row
       .props=${{
+        showRateButtons: rpcId !== undefined,
         onFeedbackSubmit: (rating, feedback) => {
+          if (!rpcId) {
+            return;
+          }
           this.#props.onFeedbackSubmit(rpcId, rating, feedback);
         },
+        suggestions,
+        handleSuggestionClick: this.#handleSuggestionClick,
         canShowFeedbackForm: this.#props.canShowFeedbackForm,
-      } as ProvideFeedbackProps}
-      ></${ProvideFeedback.litTagName}>`;
+      } as UserActionRowProps}
+      ></devtools-user-action-row>`;
     // clang-format on
   }
 
@@ -437,75 +511,88 @@ export class FreestylerChatUi extends HTMLElement {
       // The tokens were not parsed correctly or
       // one of the tokens are not supported, so we
       // continue to render this as text.
-      return LitHtml.html`${text}`;
+      return html`${text}`;
     }
 
     // clang-format off
-    return LitHtml.html`<${MarkdownView.MarkdownView.MarkdownView.litTagName}
+    return html`<devtools-markdown-view
       .data=${{tokens, renderer: this.#markdownRenderer} as MarkdownView.MarkdownView.MarkdownViewData}>
-    </${MarkdownView.MarkdownView.MarkdownView.litTagName}>`;
+    </devtools-markdown-view>`;
     // clang-format on
   }
 
   #renderTitle(step: Step): LitHtml.LitTemplate {
-    const paused = step.sideEffect ?
-        LitHtml.html`<span class="paused">${lockedString(UIStringsNotTranslate.paused)}: </span>` :
-        LitHtml.nothing;
+    const paused = step.sideEffect ? html`<span class="paused">${lockedString(UIStringsNotTranslate.paused)}: </span>` :
+                                     LitHtml.nothing;
     const actionTitle = step.title ?? `${lockedString(UIStringsNotTranslate.investigating)}…`;
 
-    return LitHtml.html`<span class="title">${paused}${actionTitle}</span>`;
+    return html`<span class="title">${paused}${actionTitle}</span>`;
   }
 
-  #renderStepDetails(step: Step, options: {isLast: boolean}): LitHtml.LitTemplate {
-    const sideEffects =
-        options.isLast && step.sideEffect ? this.#renderSideEffectConfirmationUi(step) : LitHtml.nothing;
-    const thought = step.thought ? LitHtml.html`<p>${this.#renderTextAsMarkdown(step.thought)}</p>` : LitHtml.nothing;
+  #renderStepCode(step: Step): LitHtml.LitTemplate {
+    if (!step.code && !step.output) {
+      return LitHtml.nothing;
+    }
+
     // If there is no "output" yet, it means we didn't execute the code yet (e.g. maybe it is still waiting for confirmation from the user)
     // thus we show "Code to execute" text rather than "Code executed" text on the heading of the code block.
     const codeHeadingText = (step.output && !step.canceled) ? lockedString(UIStringsNotTranslate.codeExecuted) :
                                                               lockedString(UIStringsNotTranslate.codeToExecute);
+
     // If there is output, we don't show notice on this code block and instead show
     // it in the data returned code block.
     // clang-format off
-    const code = step.code ? LitHtml.html`<div class="action-result">
-        <${MarkdownView.CodeBlock.CodeBlock.litTagName}
+    const code = step.code ? html`<div class="action-result">
+        <devtools-code-block
           .code=${step.code.trim()}
           .codeLang=${'js'}
           .displayNotice=${!Boolean(step.output)}
           .header=${codeHeadingText}
           .showCopyButton=${true}
-        ></${MarkdownView.CodeBlock.CodeBlock.litTagName}>
-    </div>` : LitHtml.nothing;
-    const output = step.output ? LitHtml.html`<div class="js-code-output">
-      <${MarkdownView.CodeBlock.CodeBlock.litTagName}
+        ></devtools-code-block>
+    </div>` :
+                             LitHtml.nothing;
+    const output = step.output ? html`<div class="js-code-output">
+      <devtools-code-block
         .code=${step.output}
         .codeLang=${'js'}
         .displayNotice=${true}
         .header=${lockedString(UIStringsNotTranslate.dataReturned)}
         .showCopyButton=${false}
-      ></${MarkdownView.CodeBlock.CodeBlock.litTagName}>
-    </div>` : LitHtml.nothing;
-    const contextDetails = step.contextDetails && step.contextDetails?.length > 0 ?
-    LitHtml.html`${LitHtml.Directives.repeat(
+      ></devtools-code-block>
+    </div>` :
+                                 LitHtml.nothing;
+
+    return html`<div class="step-code">${code}${output}</div>`;
+    // clang-format on
+  }
+
+  #renderStepDetails(step: Step, options: {isLast: boolean}): LitHtml.LitTemplate {
+    const sideEffects =
+        options.isLast && step.sideEffect ? this.#renderSideEffectConfirmationUi(step) : LitHtml.nothing;
+    const thought = step.thought ? html`<p>${this.#renderTextAsMarkdown(step.thought)}</p>` : LitHtml.nothing;
+
+    // clang-format off
+    const contextDetails = step.contextDetails ?
+    html`${LitHtml.Directives.repeat(
       step.contextDetails,
         contextDetail => {
-          return LitHtml.html`<div class="context-details">
-        <${MarkdownView.CodeBlock.CodeBlock.litTagName}
+          return html`<div class="context-details">
+        <devtools-code-block
           .code=${contextDetail.text}
-          .codeLang=${'js'}
+          .codeLang=${contextDetail.codeLang || ''}
           .displayNotice=${false}
           .header=${contextDetail.title}
           .showCopyButton=${true}
-        ></${MarkdownView.CodeBlock.CodeBlock.litTagName}>
+        ></devtools-code-block>
       </div>`;
         },
       )}` : LitHtml.nothing;
 
-    return LitHtml.html`<div class="step-details">
+    return html`<div class="step-details">
       ${thought}
-      ${code}
+      ${this.#renderStepCode(step)}
       ${sideEffects}
-      ${output}
       ${contextDetails}
     </div>`;
     // clang-format on
@@ -513,31 +600,38 @@ export class FreestylerChatUi extends HTMLElement {
 
   #renderStepBadge(step: Step, options: {isLast: boolean}): LitHtml.LitTemplate {
     if (this.#props.isLoading && options.isLast && !step.sideEffect) {
-      return LitHtml.html`<${Spinners.Spinner.Spinner.litTagName}></${Spinners.Spinner.Spinner.litTagName}>`;
+      return html`<devtools-spinner></devtools-spinner>`;
     }
 
     let iconName: string = 'checkmark';
+    let ariaLabel: string|undefined = lockedString(UIStringsNotTranslate.completed);
+    let role: 'button'|undefined = 'button';
     if (options.isLast && step.sideEffect) {
+      role = undefined;
+      ariaLabel = undefined;
       iconName = 'pause-circle';
     } else if (step.canceled) {
+      ariaLabel = lockedString(UIStringsNotTranslate.canceled);
       iconName = 'cross';
     }
 
-    return LitHtml.html`<${IconButton.Icon.Icon.litTagName}
+    return html`<devtools-icon
         class="indicator"
+        role=${ifDefined(role)}
+        aria-label=${ifDefined(ariaLabel)}
         .name=${iconName}
-      ></${IconButton.Icon.Icon.litTagName}>`;
+      ></devtools-icon>`;
   }
 
   #renderStep(step: Step, options: {isLast: boolean}): LitHtml.LitTemplate {
     const stepClasses = LitHtml.Directives.classMap({
       step: true,
-      empty: !step.thought && !step.code,
+      empty: !step.thought && !step.code && !step.contextDetails,
       paused: Boolean(step.sideEffect),
       canceled: Boolean(step.canceled),
     });
     // clang-format off
-    return LitHtml.html`
+    return html`
       <details class=${stepClasses}
         jslog=${VisualLogging.section('step')}
         .open=${Boolean(step.sideEffect)}>
@@ -545,10 +639,10 @@ export class FreestylerChatUi extends HTMLElement {
           <div class="summary">
             ${this.#renderStepBadge(step, options)}
             ${this.#renderTitle(step)}
-            <${IconButton.Icon.Icon.litTagName}
+            <devtools-icon
               class="arrow"
               .name=${'chevron-down'}
-            ></${IconButton.Icon.Icon.litTagName}>
+            ></devtools-icon>
           </div>
         </summary>
         ${this.#renderStepDetails(step, {
@@ -562,16 +656,21 @@ export class FreestylerChatUi extends HTMLElement {
     if (!step.sideEffect) {
       return LitHtml.nothing;
     }
-    const sideEffectAction = step.sideEffect.onAnswer;
+
+    const sideEffectAction = (answer: boolean): void => {
+      step.sideEffect?.onAnswer(answer);
+      step.sideEffect = undefined;
+      this.#render();
+    };
 
     // clang-format off
-    return LitHtml.html`<div
+    return html`<div
       class="side-effect-confirmation"
       jslog=${VisualLogging.section('side-effect-confirmation')}
     >
       <p>${lockedString(UIStringsNotTranslate.sideEffectConfirmationDescription)}</p>
       <div class="side-effect-buttons-container">
-        <${Buttons.Button.Button.litTagName}
+        <devtools-button
           .data=${
             {
               variant: Buttons.Button.Variant.OUTLINED,
@@ -581,8 +680,8 @@ export class FreestylerChatUi extends HTMLElement {
           @click=${() => sideEffectAction(false)}
         >${lockedString(
           UIStringsNotTranslate.negativeSideEffectConfirmation,
-        )}</${Buttons.Button.Button.litTagName}>
-        <${Buttons.Button.Button.litTagName}
+        )}</devtools-button>
+        <devtools-button
           .data=${
             {
               variant: Buttons.Button.Variant.PRIMARY,
@@ -593,7 +692,7 @@ export class FreestylerChatUi extends HTMLElement {
           @click=${() => sideEffectAction(true)}
         >${
             lockedString(UIStringsNotTranslate.positiveSideEffectConfirmation)
-        }</${Buttons.Button.Button.litTagName}>
+        }</devtools-button>
       </div>
     </div>`;
     // clang-format on
@@ -610,11 +709,11 @@ export class FreestylerChatUi extends HTMLElement {
           errorMessage = UIStringsNotTranslate.maxStepsError;
           break;
         case ErrorType.ABORT:
-          return LitHtml.html`<p class="aborted" jslog=${VisualLogging.section('aborted')}>${
+          return html`<p class="aborted" jslog=${VisualLogging.section('aborted')}>${
               lockedString(UIStringsNotTranslate.stoppedResponse)}</p>`;
       }
 
-      return LitHtml.html`<p class="error" jslog=${VisualLogging.section('error')}>${lockedString(errorMessage)}</p>`;
+      return html`<p class="error" jslog=${VisualLogging.section('error')}>${lockedString(errorMessage)}</p>`;
     }
 
     return LitHtml.nothing;
@@ -624,12 +723,12 @@ export class FreestylerChatUi extends HTMLElement {
     if (message.entity === ChatMessageEntity.USER) {
       const name = this.#props.userInfo.accountFullName || lockedString(UIStringsNotTranslate.you);
       const image = this.#props.userInfo.accountImage ?
-          LitHtml.html`<img src="data:image/png;base64, ${this.#props.userInfo.accountImage}" alt="Account avatar" />` :
-          LitHtml.html`<${IconButton.Icon.Icon.litTagName}
+          html`<img src="data:image/png;base64, ${this.#props.userInfo.accountImage}" alt="Account avatar" />` :
+          html`<devtools-icon
             .name=${'profile'}
-          ></${IconButton.Icon.Icon.litTagName}>`;
+          ></devtools-icon>`;
       // clang-format off
-      return LitHtml.html`<section
+      return html`<section
         class="chat-message query"
         jslog=${VisualLogging.section('question')}
       >
@@ -644,15 +743,14 @@ export class FreestylerChatUi extends HTMLElement {
       // clang-format on
     }
 
-    const shouldShowSuggestions =
-        (isLast && !this.#props.isLoading && message.suggestions && message.suggestions?.length > 0);
+    const shouldShowSuggestions = (isLast && !this.#props.isLoading && message.suggestions);
     // clang-format off
-    return LitHtml.html`
+    return html`
       <section class="chat-message answer" jslog=${VisualLogging.section('answer')}>
         <div class="message-info">
-          <${IconButton.Icon.Icon.litTagName}
+          <devtools-icon
             name="smart-assistant"
-          ></${IconButton.Icon.Icon.litTagName}>
+          ></devtools-icon>
           <div class="message-name">
             <h2>${lockedString(UIStringsNotTranslate.ai)}</h2>
           </div>
@@ -668,41 +766,55 @@ export class FreestylerChatUi extends HTMLElement {
         )}
         ${
           message.answer
-            ? LitHtml.html`<p>${this.#renderTextAsMarkdown(message.answer)}</p>`
+            ? html`<p>${this.#renderTextAsMarkdown(message.answer)}</p>`
             : LitHtml.nothing
         }
         ${this.#renderError(message)}
         <div class="actions">
-          ${
-            message.rpcId !== undefined
-              ? this.#renderRateButtons(message.rpcId)
-              : LitHtml.nothing
-          }
-          ${shouldShowSuggestions ?
-            LitHtml.html`<div class="suggestions">
-              ${message.suggestions?.map(suggestion => LitHtml.html`<${Buttons.Button.Button.litTagName}
-                  .data=${{
-                      variant: Buttons.Button.Variant.OUTLINED,
-                      jslogContext: 'fix-this-issue',
-                  } as Buttons.Button.ButtonData}
-                  @click=${() => this.#handleSuggestionClick(suggestion)}
-                >${suggestion}</${Buttons.Button.Button.litTagName}>`)}
-            </div>` : LitHtml.nothing}
+          ${this.#renderUserActionRow(message.rpcId, shouldShowSuggestions ? message.suggestions : undefined)}
         </div>
       </section>
     `;
     // clang-format on
   };
 
-  #renderSelection(): LitHtml.TemplateResult {
+  #renderSelection(): LitHtml.LitTemplate {
+    if (!this.#props.agentType) {
+      return LitHtml.nothing;
+    }
     switch (this.#props.agentType) {
       case AgentType.FREESTYLER:
         return this.#renderSelectAnElement();
+      case AgentType.DRJONES_FILE:
+        return this.#renderSelectedFileName();
       case AgentType.DRJONES_NETWORK_REQUEST:
         return this.#renderSelectedNetworkRequest();
+      case AgentType.DRJONES_PERFORMANCE:
+        return this.#renderSelectedTask();
     }
   }
 
+  #renderSelectedFileName(): LitHtml.TemplateResult {
+    const resourceClass = LitHtml.Directives.classMap({
+      'not-selected': !this.#props.selectedFile,
+      'resource-link': true,
+    });
+
+    if (!this.#props.selectedFile) {
+      return html`${LitHtml.nothing}`;
+    }
+
+    const icon = PanelUtils.getIconForSourceFile(this.#props.selectedFile);
+
+    // clang-format off
+    return html`<div class="select-element">
+    <div role=button class=${resourceClass}
+    @click=${this.#props.onSelectedFileRequestClick}>
+      ${icon}${this.#props.selectedFile?.displayName()}
+    </div></div>`;
+    // clang-format on
+  }
+
   #renderSelectedNetworkRequest = (): LitHtml.TemplateResult => {
     const resourceClass = LitHtml.Directives.classMap({
       'not-selected': !this.#props.selectedNetworkRequest,
@@ -710,13 +822,13 @@ export class FreestylerChatUi extends HTMLElement {
     });
 
     if (!this.#props.selectedNetworkRequest) {
-      return LitHtml.html`${LitHtml.nothing}`;
+      return html`${LitHtml.nothing}`;
     }
 
     const icon = PanelUtils.getIconForNetworkRequest(this.#props.selectedNetworkRequest);
     // clang-format off
-    return LitHtml.html`<div class="select-element">
-    <div class=${resourceClass}
+    return html`<div class="select-element">
+    <div role=button class=${resourceClass}
     @click=${this.#props.onSelectedNetworkRequestClick}>
       ${icon}${this.#props.selectedNetworkRequest?.name()}
     </div></div>`;
@@ -730,9 +842,9 @@ export class FreestylerChatUi extends HTMLElement {
     });
 
     // clang-format off
-    return LitHtml.html`
+    return html`
       <div class="select-element">
-        <${Buttons.Button.Button.litTagName}
+        <devtools-button
           .data=${{
               variant: Buttons.Button.Variant.ICON_TOGGLE,
               size: Buttons.Button.Size.REGULAR,
@@ -744,13 +856,13 @@ export class FreestylerChatUi extends HTMLElement {
               jslogContext: 'select-element',
           } as Buttons.Button.ButtonData}
           @click=${this.#props.onInspectElementClick}
-        ></${Buttons.Button.Button.litTagName}>
+        ></devtools-button>
         <div class=${resourceClass}>${
           this.#props.selectedElement
             ? LitHtml.Directives.until(
                   Common.Linkifier.Linkifier.linkify(this.#props.selectedElement),
                 )
-            : LitHtml.html`<span>${
+            : html`<span>${
               lockedString(UIStringsNotTranslate.noElementSelected)
             }</span>`
         }</div>
@@ -758,38 +870,73 @@ export class FreestylerChatUi extends HTMLElement {
     // clang-format on
   };
 
+  #renderSelectedTask = (): LitHtml.TemplateResult => {
+    const resourceClass = LitHtml.Directives.classMap({
+      'not-selected': !this.#props.selectedAiCallTree,
+      'resource-task': true,
+    });
+
+    if (!this.#props.selectedAiCallTree) {
+      return html`${LitHtml.nothing}`;
+    }
+
+    const {event} = this.#props.selectedAiCallTree.selectedNode;
+    if (!event) {
+      return html`${LitHtml.nothing}`;
+    }
+
+    const displayName = TimelineUtils.EntryName.nameForEntry(event);
+    const handleClick = (): void => {
+      const trace = new SDK.TraceObject.RevealableEvent(event);
+      void Common.Revealer.reveal(trace);
+    };
+
+    const iconData = {
+      iconName: 'performance',
+      color: 'var(--sys-color-on-surface-subtle)',
+    };
+    const icon = PanelUtils.createIconElement(iconData, 'Performance');
+    icon.classList.add('icon');
+
+    // clang-format off
+    return html`<div class="select-element">
+      <div role=button class=${resourceClass} @click=${handleClick}>
+        ${icon}${displayName}
+      </div>
+    </div>`;
+    // clang-format on
+  };
+
   #renderMessages = (): LitHtml.TemplateResult => {
     // clang-format off
-    return LitHtml.html`
-      <main class="messages-scroll-container" @scroll=${this.#handleScroll}>
-        <div class="messages-container">
-          ${this.#props.messages.map((message, _, array) =>
-            this.#renderChatMessage(message, {
-              isLast: array.at(-1) === message,
-            }),
-          )}
-        </div>
-      </main>
+    return html`
+      <div class="messages-container">
+        ${this.#props.messages.map((message, _, array) =>
+          this.#renderChatMessage(message, {
+            isLast: array.at(-1) === message,
+          }),
+        )}
+      </div>
     `;
     // clang-format on
   };
 
   #renderEmptyState = (): LitHtml.TemplateResult => {
-    const suggestions = this.#getSuggestions();
+    const suggestions = this.#getEmptyStateSuggestions();
 
     // clang-format off
-    return LitHtml.html`<main class="empty-state-container messages-scroll-container">
+    return html`<div class="empty-state-container">
       <div class="header">
         <div class="icon">
-          <${IconButton.Icon.Icon.litTagName}
+          <devtools-icon
             name="smart-assistant"
-          ></${IconButton.Icon.Icon.litTagName}>
+          ></devtools-icon>
         </div>
-        <h2>${lockedString(UIStringsNotTranslate.emptyStateText)}</h2>
+        <h1>${lockedString(UIStringsNotTranslate.emptyStateText)}</h1>
       </div>
       <div class="suggestions">
         ${suggestions.map(suggestion => {
-          return LitHtml.html`<${Buttons.Button.Button.litTagName}
+          return html`<devtools-button
             class="suggestion"
             @click=${() => this.#handleSuggestionClick(suggestion)}
             .data=${
@@ -801,40 +948,57 @@ export class FreestylerChatUi extends HTMLElement {
                 disabled: this.#isTextInputDisabled(),
               } as Buttons.Button.ButtonData
             }
-          >${suggestion}</${Buttons.Button.Button.litTagName}>`;
+          >${suggestion}</devtools-button>`;
         })}
       </div>
     </div>`;
     // clang-format on
   };
 
-  #getSuggestions = (): string[] => {
+  #getEmptyStateSuggestions = (): string[] => {
+    if (!this.#props.agentType) {
+      return [];
+    }
     switch (this.#props.agentType) {
       case AgentType.FREESTYLER:
         return [
+          'What can you help me with?',
           'Why isn’t this element visible?',
-          'Why does this element overlap another?',
           'How do I center this element?',
         ];
+      case AgentType.DRJONES_FILE:
+        return [
+          'What does this script do?',
+          'Is the script optimized for performance?',
+          'Does the script handle user input safely?',
+        ];
       case AgentType.DRJONES_NETWORK_REQUEST:
         return [
-          'Why is this network request taking longer to complete?',
+          'Why is this network request taking so long?',
+          'Are there any security headers present?',
+          'Why is the request failing?',
+        ];
+      case AgentType.DRJONES_PERFORMANCE:
+        return [
+          'Identify performance issues in this call tree',
+          'Where is most of the time being spent in this call tree?',
+          'How can I reduce the time of this call tree?',
         ];
     }
   };
 
   #renderChatInput = (): LitHtml.TemplateResult => {
     // clang-format off
-    return LitHtml.html`
+    return html`
       <div class="chat-input-container">
         <textarea class="chat-input"
           .disabled=${this.#isTextInputDisabled()}
           wrap="hard"
           @keydown=${this.#handleTextAreaKeyDown}
-          placeholder=${getInputPlaceholderString(this.#props.aidaAvailability, this.#props.agentType, this.#props.state)}
+          placeholder=${getInputPlaceholderString(this.#props.state, this.#props.agentType)}
           jslog=${VisualLogging.textField('query').track({ keydown: 'Enter' })}></textarea>
           ${this.#props.isLoading
-            ? LitHtml.html`<${Buttons.Button.Button.litTagName}
+            ? html`<devtools-button
               class="chat-input-button"
               aria-label=${lockedString(UIStringsNotTranslate.cancelButtonTitle)}
               @click=${this.#handleCancel}
@@ -848,8 +1012,8 @@ export class FreestylerChatUi extends HTMLElement {
                   jslogContext: 'stop',
                 } as Buttons.Button.ButtonData
               }
-            ></${Buttons.Button.Button.litTagName}>`
-            : LitHtml.html`<${Buttons.Button.Button.litTagName}
+            ></devtools-button>`
+            : html`<devtools-button
               class="chat-input-button"
               aria-label=${lockedString(UIStringsNotTranslate.sendButtonTitle)}
               .data=${
@@ -863,24 +1027,28 @@ export class FreestylerChatUi extends HTMLElement {
                   jslogContext: 'send',
                 } as Buttons.Button.ButtonData
               }
-            ></${Buttons.Button.Button.litTagName}>`}
+            ></devtools-button>`}
       </div>`;
     // clang-format on
   };
 
   #getDisclaimerText = (): Platform.UIString.LocalizedString => {
-    if (this.#props.state === State.CONSENT_VIEW) {
+    if (this.#props.state === State.CONSENT_VIEW || !this.#props.agentType) {
       return i18nString(UIStrings.inputDisclaimerForEmptyState);
     }
     switch (this.#props.agentType) {
       case AgentType.FREESTYLER:
         return lockedString(UIStringsNotTranslate.inputDisclaimerForFreestylerAgent);
+      case AgentType.DRJONES_FILE:
+        return lockedString(UIStringsNotTranslate.inputDisclaimerForDrJonesFileAgent);
       case AgentType.DRJONES_NETWORK_REQUEST:
         return lockedString(UIStringsNotTranslate.inputDisclaimerForDrJonesNetworkAgent);
+      case AgentType.DRJONES_PERFORMANCE:
+        return lockedString(UIStringsNotTranslate.inputDisclaimerForDrJonesPerformanceAgent);
     }
   };
 
-  #renderOptIn(): LitHtml.TemplateResult {
+  #getConsentViewContents(): LitHtml.TemplateResult {
     const settingsLink = document.createElement('button');
     settingsLink.textContent = i18nString(UIStrings.settingsLink);
     settingsLink.classList.add('link');
@@ -889,24 +1057,54 @@ export class FreestylerChatUi extends HTMLElement {
       void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
     });
     settingsLink.setAttribute('jslog', `${VisualLogging.action('open-ai-settings').track({click: true})}`);
+    return html`${i18n.i18n.getFormatLocalizedString(str_, this.#getStringForConsentView(), {PH1: settingsLink})}`;
+  }
+
+  #getStringForConsentView(): string {
     const config = Common.Settings.Settings.instance().getHostConfig();
+    if (config.devToolsAiAssistancePerformanceAgent?.enabled ||
+        config.devToolsAiAssistancePerformanceAgentDogfood?.enabled) {
+      return UIStrings.turnOnForStylesRequestsPerformanceAndFiles;
+    }
+    if (config.devToolsAiAssistanceFileAgent?.enabled || config.devToolsAiAssistanceFileAgentDogfood?.enabled) {
+      return UIStrings.turnOnForStylesRequestsAndFiles;
+    }
+    if (config.devToolsAiAssistanceNetworkAgent?.enabled || config.devToolsExplainThisResourceDogfood?.enabled) {
+      return UIStrings.turnOnForStylesAndRequests;
+    }
+    return UIStrings.turnOnForStyles;
+  }
 
+  #getUnavailableAidaAvailabilityContents(
+      aidaAvailability:
+          Exclude<Host.AidaClient.AidaAccessPreconditions, Host.AidaClient.AidaAccessPreconditions.AVAILABLE>):
+      LitHtml.TemplateResult {
+    switch (aidaAvailability) {
+      case Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL:
+      case Host.AidaClient.AidaAccessPreconditions.SYNC_IS_PAUSED: {
+        return html`${i18nString(UIStrings.notLoggedIn)}`;
+      }
+      case Host.AidaClient.AidaAccessPreconditions.NO_INTERNET: {
+        return html`${i18nString(UIStrings.offline)}`;
+      }
+    }
+  }
+
+  #renderDisabledState(contents: LitHtml.TemplateResult): LitHtml.TemplateResult {
     // clang-format off
-    return LitHtml.html`
+    return html`
       <div class="empty-state-container">
-        <div class="opt-in">
-          <div class="opt-in-icon-container">
-            <${IconButton.Icon.Icon.litTagName} .data=${{
+        <div class="disabled-view">
+          <div class="disabled-view-icon-container">
+            <devtools-icon .data=${{
               iconName: 'smart-assistant',
               width: 'var(--sys-size-8)',
               height: 'var(--sys-size-8)',
             } as IconButton.Icon.IconData}>
+            </devtools-icon>
           </div>
           <div>
-            ${config.devToolsExplainThisResourceDogfood?.enabled ?
-              i18n.i18n.getFormatLocalizedString(str_, UIStrings.turnOnForStylesAndRequests, {PH1: settingsLink}) :
-              i18n.i18n.getFormatLocalizedString(str_, UIStrings.turnOnForStyles, {PH1: settingsLink})
-            }
+            ${contents}
           </div>
         </div>
       </div>
@@ -914,43 +1112,88 @@ export class FreestylerChatUi extends HTMLElement {
     // clang-format on
   }
 
+  #renderNoAgentState(): LitHtml.TemplateResult {
+    const config = Common.Settings.Settings.instance().getHostConfig();
+
+    // clang-format off
+    return html`
+      <div class="messages-container">
+        <section class="no-agent-message" jslog=${VisualLogging.section('no-agent-entrypoint')}>
+          <div class="header">
+            <devtools-icon name="smart-assistant"></devtools-icon>
+            <h2>${lockedString(UIStringsNotTranslate.ai)}</h2>
+          </div>
+          <div class="instructions">
+            <p>${lockedString(UIStringsNotTranslate.getStarted)}</p>
+            ${config.devToolsFreestyler?.enabled ? html`
+              <p><strong>${lockedString(UIStringsNotTranslate.cssHelp)}</strong> ${lockedString(UIStringsNotTranslate.cssHelpExplainer)}</p>
+            ` : LitHtml.nothing}
+            ${(config.devToolsAiAssistanceFileAgent?.enabled || config.devToolsAiAssistanceFileAgentDogfood?.enabled) ? html`
+              <p><strong>${lockedString(UIStringsNotTranslate.fileHelp)}</strong> ${lockedString(UIStringsNotTranslate.fileHelpExplainer)}</p>
+            ` : LitHtml.nothing}
+            ${(config.devToolsAiAssistanceNetworkAgent?.enabled  || config.devToolsExplainThisResourceDogfood?.enabled) ? html`
+              <p><strong>${lockedString(UIStringsNotTranslate.networkHelp)}</strong> ${lockedString(UIStringsNotTranslate.networkHelpExplainer)}</p>
+            ` : LitHtml.nothing}
+            ${(config.devToolsAiAssistancePerformanceAgent?.enabled || config.devToolsAiAssistancePerformanceAgentDogfood?.enabled) ? html`
+              <p><strong>${lockedString(UIStringsNotTranslate.performanceHelp)}</strong> ${lockedString(UIStringsNotTranslate.performanceHelpExplainer)}</p>
+            ` : LitHtml.nothing}
+          </div>
+        </section>
+      </div>
+    `;
+    // clang-format on
+  }
+
+  #renderMainContents(): LitHtml.TemplateResult {
+    if (this.#props.state === State.CONSENT_VIEW) {
+      return this.#renderDisabledState(this.#getConsentViewContents());
+    }
+
+    if (this.#props.aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
+      return this.#renderDisabledState(this.#getUnavailableAidaAvailabilityContents(this.#props.aidaAvailability));
+    }
+
+    if (!this.#props.agentType) {
+      return this.#renderNoAgentState();
+    }
+
+    if (this.#props.messages.length > 0) {
+      return this.#renderMessages();
+    }
+
+    return this.#renderEmptyState();
+  }
+
   #render(): void {
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <div class="chat-ui">
-        ${
-          this.#props.state === State.CONSENT_VIEW ? this.#renderOptIn()
-            : (this.#props.messages.length > 0
-              ? this.#renderMessages()
-              : this.#renderEmptyState()
-            )
-        }
-        <form class="input-form" @submit=${this.#handleSubmit}>
-          ${this.#props.state !== State.CONSENT_VIEW ? LitHtml.html`
-            <div class="input-header">
-              <div class="header-link-container">
-                ${this.#renderSelection()}
+        <main @scroll=${this.#handleScroll}>
+          ${this.#renderMainContents()}
+          <form class="input-form" @submit=${this.#handleSubmit}>
+            ${this.#props.state !== State.CONSENT_VIEW ? html`
+              <div class="input-header">
+                <div class="header-link-container">
+                  ${this.#renderSelection()}
+                </div>
               </div>
-            </div>
-          ` : LitHtml.nothing}
-          ${this.#renderChatInput()}
-        </form>
+            ` : LitHtml.nothing}
+            ${this.#renderChatInput()}
+          </form>
+        </main>
         <footer class="disclaimer">
-          <p class="disclaimer-text">${lockedString(
-            this.#getDisclaimerText(),
-          )} <x-link
-              href="#"
+          <p class="disclaimer-text">
+            ${this.#getDisclaimerText()}
+            <button
               class="link"
+              role="link"
               jslog=${VisualLogging.link('open-ai-settings').track({
                 click: true,
               })}
-              @click=${(event: Event) => {
-                event.preventDefault();
-                void UI.ViewManager.ViewManager.instance().showView(
-                  'chrome-ai',
-                );
+              @click=${() => {
+                void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
               }}
-            >${lockedString(UIStringsNotTranslate.learnAbout)}</x-link>
+            >${i18nString(UIStrings.learnAbout)}</button>
           </p>
         </footer>
       </div>