chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

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

@@ -2,16 +2,20 @@
 // 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 './ProvideFeedback.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 Trace from '../../../models/trace/trace.js';
+import type * as Workspace from '../../../models/workspace/workspace.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';
@@ -19,7 +23,9 @@ import {PanelUtils} from '../../utils/utils.js';
 import {type ContextDetail, ErrorType} from '../AiAgent.js';
 
 import freestylerChatUiStyles from './freestylerChatUi.css.js';
-import {ProvideFeedback, type ProvideFeedbackProps} from './ProvideFeedback.js';
+import type {ProvideFeedbackProps} from './ProvideFeedback.js';
+
+const {html, Directives: {ifDefined}} = LitHtml;
 
 const UIStrings = {
   /**
@@ -52,6 +58,10 @@ const UIStrings = {
    *@example {AI assistance in Settings} PH1
    */
   turnOnForStylesAndRequests: 'Turn on {PH1} to get help with styles and network requests',
+  /**
+   *@description The footer disclaimer that links to more information about the AI feature.
+   */
+  learnAbout: 'Learn about AI in DevTools',
 };
 
 /*
@@ -68,6 +78,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 stack 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 +96,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 stack trace',
   /**
    *@description Title for the send icon button.
    */
@@ -121,14 +149,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 +178,36 @@ 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',
 };
 
 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 {
+function getInputPlaceholderString(agentType: AgentType, state: State): Platform.UIString.LocalizedString {
   if (state === State.CONSENT_VIEW) {
     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 +219,7 @@ export interface Step {
   output?: string;
   canceled?: boolean;
   sideEffect?: ConfirmSideEffectDialog;
-  contextDetails?: ContextDetail[];
+  contextDetails?: [ContextDetail, ...ContextDetail[]];
 }
 
 interface ConfirmSideEffectDialog {
@@ -239,7 +253,9 @@ export const enum State {
 
 export const enum AgentType {
   FREESTYLER = 'freestyler',
+  DRJONES_FILE = 'drjones-file',
   DRJONES_NETWORK_REQUEST = 'drjones-network-request',
+  DRJONES_PERFORMANCE = 'drjones-performance',
 }
 
 export interface Props {
@@ -248,12 +264,15 @@ export interface Props {
   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;
+  selectedStackTrace: Trace.Helpers.TreeHelpers.TraceEntryNodeForAI|null;
   isLoading: boolean;
   canShowFeedbackForm: boolean;
   userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>;
@@ -271,7 +290,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') {
@@ -353,10 +372,15 @@ 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) ||
+        (this.#props.agentType === AgentType.DRJONES_FILE && isInputDisabledCheckForDrJonesFileAgent) ||
         !isAidaAvailable || isConsentView;
   };
 
@@ -411,14 +435,14 @@ export class FreestylerChatUi extends HTMLElement {
 
   #renderRateButtons(rpcId: number): LitHtml.TemplateResult {
     // clang-format off
-    return LitHtml.html`<${ProvideFeedback.litTagName}
+    return html`<devtools-provide-feedback
       .props=${{
         onFeedbackSubmit: (rating, feedback) => {
           this.#props.onFeedbackSubmit(rpcId, rating, feedback);
         },
         canShowFeedbackForm: this.#props.canShowFeedbackForm,
       } as ProvideFeedbackProps}
-      ></${ProvideFeedback.litTagName}>`;
+      ></devtools-provide-feedback>`;
     // clang-format on
   }
 
@@ -437,75 +461,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 +550,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 +589,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, {
@@ -565,13 +609,13 @@ export class FreestylerChatUi extends HTMLElement {
     const sideEffectAction = step.sideEffect.onAnswer;
 
     // 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 +625,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 +637,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 +654,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 +668,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')}
       >
@@ -647,12 +691,12 @@ export class FreestylerChatUi extends HTMLElement {
     const shouldShowSuggestions =
         (isLast && !this.#props.isLoading && message.suggestions && message.suggestions?.length > 0);
     // 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,7 +712,7 @@ 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)}
@@ -679,14 +723,15 @@ export class FreestylerChatUi extends HTMLElement {
               : LitHtml.nothing
           }
           ${shouldShowSuggestions ?
-            LitHtml.html`<div class="suggestions">
-              ${message.suggestions?.map(suggestion => LitHtml.html`<${Buttons.Button.Button.litTagName}
+            html`<div class="suggestions">
+              ${message.suggestions?.map(suggestion => html`<devtools-button
                   .data=${{
                       variant: Buttons.Button.Variant.OUTLINED,
-                      jslogContext: 'fix-this-issue',
+                      title: suggestion,
+                      jslogContext: 'suggestion',
                   } as Buttons.Button.ButtonData}
                   @click=${() => this.#handleSuggestionClick(suggestion)}
-                >${suggestion}</${Buttons.Button.Button.litTagName}>`)}
+                >${suggestion}</devtools-button>`)}
             </div>` : LitHtml.nothing}
         </div>
       </section>
@@ -698,9 +743,33 @@ export class FreestylerChatUi extends HTMLElement {
     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}`;
     }
+
+    // TODO(b/371947238): Add icon
+    // clang-format off
+    return html`<div class="select-element">
+    <div role=button class=${resourceClass}
+    @click=${this.#props.onSelectedFileRequestClick}>
+      ${this.#props.selectedFile?.displayName()}
+    </div></div>`;
+    // clang-format on
   }
 
   #renderSelectedNetworkRequest = (): LitHtml.TemplateResult => {
@@ -710,13 +779,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 +799,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 +813,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,10 +827,48 @@ export class FreestylerChatUi extends HTMLElement {
     // clang-format on
   };
 
+  #renderSelectedTask = (): LitHtml.TemplateResult => {
+    const resourceClass = LitHtml.Directives.classMap({
+      'not-selected': !this.#props.selectedStackTrace,
+      'resource-task': true,
+    });
+
+    if (!this.#props.selectedStackTrace) {
+      return html`${LitHtml.nothing}`;
+    }
+
+    const selectedNode = Trace.Helpers.TreeHelpers.TraceEntryNodeForAI.getSelectedNodeForTraceEntryTreeForAI(
+        this.#props.selectedStackTrace);
+
+    if (!selectedNode) {
+      return html`${LitHtml.nothing}`;
+    }
+
+    let displayName = selectedNode.type;
+    if (selectedNode.type === 'ProfileCall' && selectedNode.function) {
+      displayName = selectedNode.function;
+    }
+
+    const iconData = {
+      iconName: 'performance',
+      color: 'var(--sys-color-on-surface-subtle)',
+    };
+    const icon = PanelUtils.createIconElement(iconData, 'Performance');
+    icon.classList.add('icon');
+
+    // TODO(b/371118936): Make the div clickable
+    // clang-format off
+    return html`<div class="select-element">
+    <div class=${resourceClass}>
+      ${icon}${displayName}
+    </div></div>`;
+    // clang-format on
+  };
+
   #renderMessages = (): LitHtml.TemplateResult => {
     // clang-format off
-    return LitHtml.html`
-      <main class="messages-scroll-container" @scroll=${this.#handleScroll}>
+    return html`
+      <div class="messages-scroll-container" @scroll=${this.#handleScroll}>
         <div class="messages-container">
           ${this.#props.messages.map((message, _, array) =>
             this.#renderChatMessage(message, {
@@ -769,7 +876,7 @@ export class FreestylerChatUi extends HTMLElement {
             }),
           )}
         </div>
-      </main>
+      </div>
     `;
     // clang-format on
   };
@@ -778,18 +885,18 @@ export class FreestylerChatUi extends HTMLElement {
     const suggestions = this.#getSuggestions();
 
     // clang-format off
-    return LitHtml.html`<main class="empty-state-container messages-scroll-container">
+    return html`<div class="empty-state-container messages-scroll-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,7 +908,7 @@ export class FreestylerChatUi extends HTMLElement {
                 disabled: this.#isTextInputDisabled(),
               } as Buttons.Button.ButtonData
             }
-          >${suggestion}</${Buttons.Button.Button.litTagName}>`;
+          >${suggestion}</devtools-button>`;
         })}
       </div>
     </div>`;
@@ -816,25 +923,33 @@ export class FreestylerChatUi extends HTMLElement {
           'Why does this element overlap another?',
           'How do I center this element?',
         ];
+      case AgentType.DRJONES_FILE:
+        return [
+          'What are the key functions in this file and what are they doing?',
+        ];
       case AgentType.DRJONES_NETWORK_REQUEST:
         return [
           'Why is this network request taking longer to complete?',
         ];
+      case AgentType.DRJONES_PERFORMANCE:
+        return [
+          'Is this item on the critical rendering path?',
+        ];
     }
   };
 
   #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.agentType, this.#props.state)}
           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 +963,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,7 +978,7 @@ export class FreestylerChatUi extends HTMLElement {
                   jslogContext: 'send',
                 } as Buttons.Button.ButtonData
               }
-            ></${Buttons.Button.Button.litTagName}>`}
+            ></devtools-button>`}
       </div>`;
     // clang-format on
   };
@@ -875,12 +990,16 @@ export class FreestylerChatUi extends HTMLElement {
     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');
@@ -890,23 +1009,42 @@ export class FreestylerChatUi extends HTMLElement {
     });
     settingsLink.setAttribute('jslog', `${VisualLogging.action('open-ai-settings').track({click: true})}`);
     const config = Common.Settings.Settings.instance().getHostConfig();
+    return html`${
+        config.devToolsExplainThisResourceDogfood?.enabled ?
+            i18n.i18n.getFormatLocalizedString(str_, UIStrings.turnOnForStylesAndRequests, {PH1: settingsLink}) :
+            i18n.i18n.getFormatLocalizedString(str_, UIStrings.turnOnForStyles, {PH1: settingsLink})}`;
+  }
+
+  #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`
-      <div class="empty-state-container">
-        <div class="opt-in">
-          <div class="opt-in-icon-container">
-            <${IconButton.Icon.Icon.litTagName} .data=${{
+    return html`
+      <div class="empty-state-container messages-scroll-container">
+        <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,32 +1052,43 @@ export class FreestylerChatUi extends HTMLElement {
     // 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.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>
+          ${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()}
+            <x-link
               class="link"
               jslog=${VisualLogging.link('open-ai-settings').track({
                 click: true,
@@ -950,7 +1099,7 @@ export class FreestylerChatUi extends HTMLElement {
                   'chrome-ai',
                 );
               }}
-            >${lockedString(UIStringsNotTranslate.learnAbout)}</x-link>
+            >${i18nString(UIStrings.learnAbout)}</x-link>
           </p>
         </footer>
       </div>