chrome-devtools-frontend 1.0.1543082 → 1.0.1544076

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -193,20 +193,24 @@ interface ViewInput {
   renderer: MarkdownView.MarkdownView.MarkdownInsightRenderer;
   selectedRating?: boolean;
   noLogging: boolean;
-  onClose: () => void;
-  onSearch: () => void;
-  onRating: (event: Event) => void;
-  onReport: () => void;
-  onGoToSignIn: () => void;
-  onConsentReminderConfirmed: () => Promise<void>;
-  onToggleReferenceDetails: () => void;
-  onDisclaimerSettingsLink: () => void;
-  onReminderSettingsLink: () => void;
-  onEnableInsightsInSettingsLink: () => void;
+  callbacks: {
+    onClose: () => void,
+    onSearch: () => void,
+    onRating: (isPositive: boolean) => void,
+    onReport: () => void,
+    onGoToSignIn: () => void,
+    onConsentReminderConfirmed: () => Promise<void>,
+    onToggleReferenceDetails: () => void,
+    onDisclaimerSettingsLink: () => void,
+    onReminderSettingsLink: () => void,
+    onEnableInsightsInSettingsLink: () => void,
+  };
 }
 
 interface ViewOutput {
   referenceDetailsRef: Lit.Directives.Ref<HTMLDetailsElement>;
+  headerRef: Lit.Directives.Ref<HTMLHeadingElement>;
+  citationLinks: HTMLElement[];
 }
 
 const enum State {
@@ -274,10 +278,10 @@ function isSearchRagResponse(metadata: Host.AidaClient.ResponseMetadata): boolea
   return Boolean(metadata.factualityMetadata?.facts.length);
 }
 
-function renderSearchButton(input: ViewInput): Lit.TemplateResult {
+function renderSearchButton(onSearch: ViewInput['callbacks']['onSearch']): Lit.TemplateResult {
   // clang-format off
   return html`<devtools-button
-    @click=${input.onSearch}
+    @click=${onSearch}
     class="search-button"
     .variant=${Buttons.Button.Variant.OUTLINED}
     .jslogContext=${'search'}
@@ -295,21 +299,21 @@ function renderLearnMoreAboutInsights(): Lit.TemplateResult {
   // clang-format on
 }
 
-function maybeRenderSources(state: StateData): Lit.LitTemplate {
-  if (state.type !== State.INSIGHT || !state.directCitationUrls.length) {
+function maybeRenderSources(directCitationUrls: string[], output: ViewOutput): Lit.LitTemplate {
+  if (!directCitationUrls.length) {
     return Lit.nothing;
   }
 
   // clang-format off
   return html`
     <ol class="sources-list">
-      ${state.directCitationUrls.map((url, index) => html`
+      ${directCitationUrls.map((url, index) => html`
         <li>
           <x-link
             href=${url}
             class="link"
-            data-index=${index + 1}
             jslog=${VisualLogging.link('references.console-insights').track({click: true})}
+            ${Directives.ref(e => { output.citationLinks[index] = e as HTMLElement; })}
           >
             ${url}
           </x-link>
@@ -320,15 +324,15 @@ function maybeRenderSources(state: StateData): Lit.LitTemplate {
   // clang-format on
 }
 
-function maybeRenderRelatedContent(state: StateData): Lit.LitTemplate {
-  if (state.type !== State.INSIGHT || state.relatedUrls.length === 0) {
+function maybeRenderRelatedContent(relatedUrls: string[], directCitationUrls: string[]): Lit.LitTemplate {
+  if (relatedUrls.length === 0) {
     return Lit.nothing;
   }
   // clang-format off
   return html`
-    ${state.directCitationUrls.length ? html`<h3>${i18nString(UIStrings.relatedContent)}</h3>` : Lit.nothing}
+    ${directCitationUrls.length ? html`<h3>${i18nString(UIStrings.relatedContent)}</h3>` : Lit.nothing}
     <ul class="references-list">
-      ${state.relatedUrls.map(relatedUrl => html`
+      ${relatedUrls.map(relatedUrl => html`
         <li>
           <x-link
             href=${relatedUrl}
@@ -344,136 +348,135 @@ function maybeRenderRelatedContent(state: StateData): Lit.LitTemplate {
   // clang-format on
 }
 
-function renderMain(input: ViewInput, output: ViewOutput): Lit.TemplateResult {
-  const jslog = `${VisualLogging.section(input.state.type).track({resize: true})}`;
+function renderLoading(): Lit.TemplateResult {
+  // clang-format off
+  return html`
+    <div role="presentation" aria-label="Loading" class="loader" style="clip-path: url('#clipPath');">
+      <svg width="100%" height="64">
+        <clipPath id="clipPath">
+          <rect x="0" y="0" width="100%" height="16" rx="8"></rect>
+          <rect x="0" y="24" width="100%" height="16" rx="8"></rect>
+          <rect x="0" y="48" width="100%" height="16" rx="8"></rect>
+        </clipPath>
+      </svg>
+    </div>`;
+  // clang-format on
+}
 
+function renderInsight(
+    insight: Extract<StateData, {type: State.INSIGHT}>, renderer: ViewInput['renderer'],
+    disableAnimations: ViewInput['disableAnimations'], callbacks: ViewInput['callbacks'],
+    output: ViewOutput): Lit.TemplateResult {
   // clang-format off
-  switch (input.state.type) {
-    case State.LOADING:
-      return html`<main jslog=${jslog}>
-          <div role="presentation" aria-label="Loading" class="loader" style="clip-path: url('#clipPath');">
-            <svg width="100%" height="64">
-              <clipPath id="clipPath">
-                <rect x="0" y="0" width="100%" height="16" rx="8"></rect>
-                <rect x="0" y="24" width="100%" height="16" rx="8"></rect>
-                <rect x="0" y="48" width="100%" height="16" rx="8"></rect>
-              </clipPath>
-            </svg>
-          </div>
-        </main>`;
-    case State.INSIGHT:
       return html`
-      <main jslog=${jslog}>
         ${
-          input.state.validMarkdown ? html`<devtools-markdown-view
-            .data=${{tokens: input.state.tokens, renderer: input.renderer, animationEnabled: !input.disableAnimations} as MarkdownView.MarkdownView.MarkdownViewData}>
-          </devtools-markdown-view>`: input.state.explanation
+          insight.validMarkdown ? html`<devtools-markdown-view
+            .data=${{tokens: insight.tokens, renderer, animationEnabled: !disableAnimations} as MarkdownView.MarkdownView.MarkdownViewData}>
+          </devtools-markdown-view>`: insight.explanation
         }
-        ${input.state.timedOut ? html`<p class="error-message">${i18nString(UIStrings.timedOut)}</p>` : Lit.nothing}
-        ${isSearchRagResponse(input.state.metadata) ? html`
-          <details class="references" ${Lit.Directives.ref(output.referenceDetailsRef)} @toggle=${input.onToggleReferenceDetails} jslog=${VisualLogging.expand('references').track({click: true})}>
+        ${insight.timedOut ? html`<p class="error-message">${i18nString(UIStrings.timedOut)}</p>` : Lit.nothing}
+        ${isSearchRagResponse(insight.metadata) ? html`
+          <details class="references" ${Directives.ref(output.referenceDetailsRef)} @toggle=${callbacks.onToggleReferenceDetails} jslog=${VisualLogging.expand('references').track({click: true})}>
             <summary>${i18nString(UIStrings.references)}</summary>
-            ${maybeRenderSources(input.state)}
-            ${maybeRenderRelatedContent(input.state)}
+            ${maybeRenderSources(insight.directCitationUrls, output)}
+            ${maybeRenderRelatedContent(insight.relatedUrls, insight.directCitationUrls)}
           </details>
         ` : Lit.nothing}
         <details jslog=${VisualLogging.expand('sources').track({click: true})}>
           <summary>${i18nString(UIStrings.inputData)}</summary>
-          <devtools-console-insight-sources-list .sources=${input.state.sources} .isPageReloadRecommended=${input.state.isPageReloadRecommended}>
+          <devtools-console-insight-sources-list .sources=${insight.sources} .isPageReloadRecommended=${insight.isPageReloadRecommended}>
           </devtools-console-insight-sources-list>
         </details>
         <div class="buttons">
-          ${renderSearchButton(input)}
-        </div>
-      </main>`;
-    case State.ERROR:
-      return html`
-      <main jslog=${jslog}>
-        <div class="error">${i18nString(UIStrings.errorBody)}</div>
-      </main>`;
-    case State.CONSENT_REMINDER:
-      return html`
-        <main class="reminder-container" jslog=${jslog}>
-          <h3>Things to consider</h3>
-          <div class="reminder-items">
-            <div>
-              <devtools-icon name="google" class="medium">
-              </devtools-icon>
-            </div>
-            <div>The console message, associated stack trace, related source code, and the associated network headers are sent to Google to generate explanations. ${input.noLogging
-                ? 'The content you submit and that is generated by this feature will not be used to improve Google’s AI models.'
-                : 'This data may be seen by human reviewers to improve this feature. Avoid sharing sensitive or personal information.'}
-            </div>
-            <div>
-              <devtools-icon name="policy" class="medium">
-              </devtools-icon>
-            </div>
-            <div>Use of this feature is subject to the <x-link
-                href=${TERMS_OF_SERVICE_URL}
-                class="link"
-                jslog=${VisualLogging.link('terms-of-service.console-insights').track({click: true})}>
-              Google Terms of Service
-              </x-link> and <x-link
-                href=${PRIVACY_POLICY_URL}
-                class="link"
-                jslog=${VisualLogging.link('privacy-policy.console-insights').track({click: true})}>
-              Google Privacy Policy
-              </x-link>
-            </div>
-            <div>
-              <devtools-icon name="warning" class="medium">
-              </devtools-icon>
-            </div>
-            <div>
-              <x-link
-                href=${CODE_SNIPPET_WARNING_URL}
-                class="link"
-                jslog=${VisualLogging.link('code-snippets-explainer.console-insights').track({click: true})}
-              >Use generated code snippets with caution</x-link>
-            </div>
-          </div>
-        </main>
-      `;
-    case State.SETTING_IS_NOT_TRUE: {
-      const settingsLink = html`<button
-          class="link" role="link"
-          jslog=${VisualLogging.action('open-ai-settings').track({click: true})}
-          @click=${input.onEnableInsightsInSettingsLink}
-        >${i18nString(UIStrings.settingsLink)}</button>`;
-
-      return html`<main class="opt-in-teaser" jslog=${jslog}>
-        <div class="badge">
-          <devtools-icon name="lightbulb-spark" class="medium">
-          </devtools-icon>
-        </div>
-        <div>
-          ${i18nTemplate(UIStrings.turnOnInSettings, {PH1: settingsLink})} ${
-          renderLearnMoreAboutInsights()}
-        </div>
-      </main>`;
-    }
-    case State.NOT_LOGGED_IN:
-    case State.SYNC_IS_PAUSED:
-      return html`
-        <main jslog=${jslog}>
-          <div class="error">${Root.Runtime.hostConfig.isOffTheRecord ? i18nString(UIStrings.notAvailableInIncognitoMode) : i18nString(UIStrings.notLoggedIn)}</div>
-        </main>`;
-    case State.OFFLINE:
-      return html`
-        <main jslog=${jslog}>
-          <div class="error">${i18nString(UIStrings.offline)}</div>
-        </main>`;
-  }
+          ${renderSearchButton(callbacks.onSearch)}
+        </div>`;
+  // clang-format on
+}
+
+function renderError(message: string): Lit.TemplateResult {
+  // clang-format off
+  return html`<div class="error">${message}</div>`;
   // clang-format on
 }
 
-function renderDisclaimer(input: ViewInput): Lit.LitTemplate {
+function renderConsentReminder(noLogging: boolean): Lit.TemplateResult {
+  // clang-format off
+  return html`
+    <h3>Things to consider</h3>
+    <div class="reminder-items">
+      <div>
+        <devtools-icon name="google" class="medium">
+        </devtools-icon>
+      </div>
+      <div>The console message, associated stack trace, related source code, and the associated network headers are sent to Google to generate explanations. ${noLogging
+          ? 'The content you submit and that is generated by this feature will not be used to improve Google’s AI models.'
+          : 'This data may be seen by human reviewers to improve this feature. Avoid sharing sensitive or personal information.'}
+      </div>
+      <div>
+        <devtools-icon name="policy" class="medium">
+        </devtools-icon>
+      </div>
+      <div>Use of this feature is subject to the <x-link
+          href=${TERMS_OF_SERVICE_URL}
+          class="link"
+          jslog=${VisualLogging.link('terms-of-service.console-insights').track({click: true})}>
+        Google Terms of Service
+        </x-link> and <x-link
+          href=${PRIVACY_POLICY_URL}
+          class="link"
+          jslog=${VisualLogging.link('privacy-policy.console-insights').track({click: true})}>
+        Google Privacy Policy
+        </x-link>
+      </div>
+      <div>
+        <devtools-icon name="warning" class="medium">
+        </devtools-icon>
+      </div>
+      <div>
+        <x-link
+          href=${CODE_SNIPPET_WARNING_URL}
+          class="link"
+          jslog=${VisualLogging.link('code-snippets-explainer.console-insights').track({click: true})}
+        >Use generated code snippets with caution</x-link>
+      </div>
+    </div>`;
+  // clang-format on
+}
+
+function renderSettingIsNotTrue(onEnableInsightsInSettingsLink: () => void): Lit.TemplateResult {
+  // clang-format off
+  const settingsLink = html`
+    <button
+      class="link" role="link"
+      jslog=${VisualLogging.action('open-ai-settings').track({click: true})}
+      @click=${onEnableInsightsInSettingsLink}
+    >${i18nString(UIStrings.settingsLink)}</button>`;
+
+  return html`
+    <div class="badge">
+      <devtools-icon name="lightbulb-spark" class="medium">
+      </devtools-icon>
+    </div>
+    <div>
+      ${i18nTemplate(UIStrings.turnOnInSettings, {PH1: settingsLink})} ${
+      renderLearnMoreAboutInsights()}
+    </div>`;
+  // clang-format on
+}
+
+function renderNotLoggedIn(): Lit.TemplateResult {
+  return renderError(
+      Root.Runtime.hostConfig.isOffTheRecord ? i18nString(UIStrings.notAvailableInIncognitoMode) :
+                                               i18nString(UIStrings.notLoggedIn));
+}
+
+function renderDisclaimer(noLogging: boolean, onDisclaimerSettingsLink: () => void): Lit.LitTemplate {
   // clang-format off
   return html`<span>
-    AI tools may generate inaccurate info that doesn't represent Google's views. ${input.noLogging
+    AI tools may generate inaccurate info that doesn't represent Google's views. ${noLogging
       ? 'The content you submit and that is generated by this feature will not be used to improve Google’s AI models.'
       : 'Data sent to Google may be seen by human reviewers to improve this feature.'
-    } <button class="link" role="link" @click=${input.onDisclaimerSettingsLink}
+    } <button class="link" role="link" @click=${onDisclaimerSettingsLink}
               jslog=${VisualLogging.action('open-ai-settings').track({click: true})}>
       Open settings
     </button> or <x-link href=${LEARN_MORE_URL}
@@ -484,195 +487,144 @@ function renderDisclaimer(input: ViewInput): Lit.LitTemplate {
   // clang-format on
 }
 
-function renderFooter(input: ViewInput): Lit.LitTemplate {
-  const disclaimer = renderDisclaimer(input);
+function renderDisclaimerFooter(noLogging: boolean, onDisclaimerSettingsLink: () => void): Lit.LitTemplate {
   // clang-format off
-  switch (input.state.type) {
-    case State.LOADING:
-    case State.SETTING_IS_NOT_TRUE:
-      return Lit.nothing;
-    case State.ERROR:
-    case State.OFFLINE:
-      return html`<footer jslog=${VisualLogging.section('footer')}>
-        <div class="disclaimer">
-          ${disclaimer}
-        </div>
-      </footer>`;
-    case State.NOT_LOGGED_IN:
-    case State.SYNC_IS_PAUSED:
-      if (Root.Runtime.hostConfig.isOffTheRecord) {
-        return Lit.nothing;
-      }
-      return html`<footer jslog=${VisualLogging.section('footer')}>
-      <div class="filler"></div>
-      <div>
-        <devtools-button
-          @click=${input.onGoToSignIn}
-          .data=${
-            {
-              variant: Buttons.Button.Variant.PRIMARY,
-              jslogContext: 'update-settings',
-            } as Buttons.Button.ButtonData
-          }
-        >
-          ${UIStrings.signIn}
-        </devtools-button>
-      </div>
-    </footer>`;
-    case State.CONSENT_REMINDER:
-      return html`<footer jslog=${VisualLogging.section('footer')}>
-        <div class="filler"></div>
-        <div class="buttons">
-          <devtools-button
-            @click=${input.onReminderSettingsLink}
-            .data=${
-              {
-                variant: Buttons.Button.Variant.TONAL,
-                jslogContext: 'settings',
-                title: 'Settings',
-              } as Buttons.Button.ButtonData
-            }
-          >
-            Settings
-          </devtools-button>
-          <devtools-button
-            class='continue-button'
-            @click=${input.onConsentReminderConfirmed}
-            .data=${
-              {
-                variant: Buttons.Button.Variant.PRIMARY,
-                jslogContext: 'continue',
-                title: 'continue',
-              } as Buttons.Button.ButtonData
-            }
-            >
-            Continue
-          </devtools-button>
-        </div>
-      </footer>`;
-    case State.INSIGHT:
-      return html`<footer jslog=${VisualLogging.section('footer')}>
-      <div class="disclaimer">
-        ${disclaimer}
-      </div>
-      <div class="filler"></div>
-      <div class="rating">
-        <devtools-button
-          data-rating="true"
-          .data=${
-            {
-              variant: Buttons.Button.Variant.ICON_TOGGLE,
-              size: Buttons.Button.Size.SMALL,
-              iconName: 'thumb-up',
-              toggledIconName: 'thumb-up',
-              toggleOnClick: false,
-              toggleType: Buttons.Button.ToggleType.PRIMARY,
-              disabled: input.selectedRating !== undefined,
-              toggled: input.selectedRating === true,
-              title: i18nString(UIStrings.goodResponse),
-              jslogContext: 'thumbs-up',
-            } as Buttons.Button.ButtonData
-          }
-          @click=${input.onRating}
-        ></devtools-button>
-        <devtools-button
-          data-rating="false"
-          .data=${
-            {
-              variant: Buttons.Button.Variant.ICON_TOGGLE,
-              size: Buttons.Button.Size.SMALL,
-              iconName: 'thumb-down',
-              toggledIconName: 'thumb-down',
-              toggleOnClick: false,
-              toggleType: Buttons.Button.ToggleType.PRIMARY,
-              disabled: input.selectedRating !== undefined,
-              toggled: input.selectedRating === false,
-              title: i18nString(UIStrings.badResponse),
-              jslogContext: 'thumbs-down',
-            } as Buttons.Button.ButtonData
-          }
-          @click=${input.onRating}
-        ></devtools-button>
-        <devtools-button
-          .data=${
-            {
-              variant: Buttons.Button.Variant.ICON,
-              size: Buttons.Button.Size.SMALL,
-              iconName: 'report',
-              title: i18nString(UIStrings.report),
-              jslogContext: 'report',
-            } as Buttons.Button.ButtonData
-          }
-          @click=${input.onReport}
-        ></devtools-button>
-      </div>
-
-    </footer>`;
-  }
+  return html`
+    <div class="disclaimer">
+      ${renderDisclaimer(noLogging, onDisclaimerSettingsLink)}
+    </div>`;
   // clang-format on
 }
 
-function getHeader(state: StateData): string {
-  switch (state.type) {
-    case State.NOT_LOGGED_IN:
-    case State.SYNC_IS_PAUSED:
-      return i18nString(UIStrings.signInToUse);
-    case State.OFFLINE:
-      return i18nString(UIStrings.offlineHeader);
-    case State.LOADING:
-      return i18nString(UIStrings.generating);
-    case State.INSIGHT:
-      return i18nString(UIStrings.insight);
-    case State.ERROR:
-      return i18nString(UIStrings.error);
-    case State.CONSENT_REMINDER:
-      return 'Understand console messages with AI';
-    case State.SETTING_IS_NOT_TRUE:
-      return '';  // not reached
+function renderSignInFooter(onGoToSignIn: () => void): Lit.LitTemplate {
+  if (Root.Runtime.hostConfig.isOffTheRecord) {
+    return Lit.nothing;
   }
+  // clang-format off
+  return html`
+    <div class="filler"></div>
+    <div>
+      <devtools-button
+        @click=${onGoToSignIn}
+        .variant=${Buttons.Button.Variant.PRIMARY}
+        .jslogContext=${'update-settings'}
+      >
+        ${UIStrings.signIn}
+      </devtools-button>
+    </div>`;
 }
 
-function renderSpinner(state: StateData): Lit.LitTemplate {
+function renderConsentReminderFooter(onReminderSettingsLink: () => void, onConsentReminderConfirmed: () => void): Lit.LitTemplate {
   // clang-format off
-  if (state.type === State.INSIGHT && !state.completed) {
-    return html`<devtools-spinner></devtools-spinner>`;
-  }
-  return Lit.nothing;
+  return html`
+    <div class="filler"></div>
+    <div class="buttons">
+      <devtools-button
+        @click=${onReminderSettingsLink}
+          .variant=${Buttons.Button.Variant.TONAL}
+          jslogContext=${'settings'}
+          title=${'Settings'}
+      >
+        Settings
+      </devtools-button>
+      <devtools-button
+        class='continue-button'
+        @click=${onConsentReminderConfirmed}
+        .variant=${Buttons.Button.Variant.PRIMARY}
+        .jslogContext=${'continue'}
+        .title=${'continue'}
+      >
+        Continue
+      </devtools-button>
+    </div>`;
+}
+
+function renderInsightFooter(noLogging: ViewInput['noLogging'], selectedRating: ViewInput['selectedRating'], callbacks: ViewInput['callbacks']): Lit.LitTemplate {
+  // clang-format off
+  return html`
+  <div class="disclaimer">
+    ${renderDisclaimer(noLogging, callbacks.onDisclaimerSettingsLink)}
+  </div>
+  <div class="filler"></div>
+  <div class="rating">
+    <devtools-button
+      data-rating="true"
+      .iconName=${'thumb-up'}
+      .toggledIconName=${'thumb-up'}
+      .variant=${Buttons.Button.Variant.ICON_TOGGLE}
+      .size=${Buttons.Button.Size.SMALL}
+      .toggleOnClick=${false}
+      .toggleType=${Buttons.Button.ToggleType.PRIMARY}
+      .disabled=${selectedRating !== undefined}
+      .toggled=${selectedRating === true}
+      .title=${i18nString(UIStrings.goodResponse)}
+      .jslogContext=${'thumbs-up'}
+      @click=${() => callbacks.onRating(true)}
+    ></devtools-button>
+    <devtools-button
+      data-rating="false"
+      .iconName=${'thumb-down'}
+      .toggledIconName=${'thumb-down'}
+      .variant=${Buttons.Button.Variant.ICON_TOGGLE}
+      .size=${Buttons.Button.Size.SMALL}
+      .toggleOnClick=${false}
+      .toggleType=${Buttons.Button.ToggleType.PRIMARY}
+      .disabled=${selectedRating !== undefined}
+      .toggled=${selectedRating === false}
+      .title=${i18nString(UIStrings.badResponse)}
+      .jslogContext=${'thumbs-down'}
+      @click=${() => callbacks.onRating(false)}
+    ></devtools-button>
+    <devtools-button
+      .iconName=${'report'}
+      .variant=${Buttons.Button.Variant.ICON}
+      .size=${Buttons.Button.Size.SMALL}
+      .title=${i18nString(UIStrings.report)}
+      .jslogContext=${'report'}
+      @click=${callbacks.onReport}
+    ></devtools-button>
+  </div>`;
   // clang-format on
 }
 
-function renderHeader(input: ViewInput): Lit.LitTemplate {
-  if (input.state.type === State.SETTING_IS_NOT_TRUE) {
-    return Lit.nothing;
-  }
-  const hasIcon = input.state.type === State.CONSENT_REMINDER;
+function renderHeaderIcon(): Lit.LitTemplate {
+  // clang-format off
+  return html`
+    <div class="header-icon-container">
+      <devtools-icon name="lightbulb-spark" class="large">
+      </devtools-icon>
+    </div>`;
+  // clang-format on
+}
+
+interface HeaderInput {
+  headerText: string;
+  showIcon?: boolean;
+  showSpinner?: boolean;
+  onClose: ViewInput['callbacks']['onClose'];
+}
+
+function renderHeader(
+    {headerText, showIcon = false, showSpinner = false, onClose}: HeaderInput,
+    headerRef: Lit.Directives.Ref<HTMLHeadingElement>): Lit.LitTemplate {
   // clang-format off
   return html`
     <header>
-      ${hasIcon ? html`
-        <div class="header-icon-container">
-          <devtools-icon name="lightbulb-spark" class="large">
-          </devtools-icon>
-        </div>`
-      : Lit.nothing}
+      ${showIcon ? renderHeaderIcon() : Lit.nothing}
       <div class="filler">
-        <h2 tabindex="-1">
-          ${getHeader(input.state)}
+        <h2 tabindex="-1" ${Directives.ref(headerRef)}>
+          ${headerText}
         </h2>
-        ${renderSpinner(input.state)}
+        ${showSpinner ? html`<devtools-spinner></devtools-spinner>` : Lit.nothing}
       </div>
       <div class="close-button">
         <devtools-button
-          .data=${
-            {
-              variant: Buttons.Button.Variant.ICON,
-              size: Buttons.Button.Size.SMALL,
-              iconName: 'cross',
-              title: i18nString(UIStrings.closeInsight),
-            } as Buttons.Button.ButtonData
-          }
+          .iconName=${'cross'}
+          .variant=${Buttons.Button.Variant.ICON}
+          .size=${Buttons.Button.Size.SMALL}
+          .title=${i18nString(UIStrings.closeInsight)}
           jslog=${VisualLogging.close().track({click: true})}
-          @click=${input.onClose}
+          @click=${onClose}
         ></devtools-button>
       </div>
     </header>
@@ -696,7 +648,9 @@ export class ConsoleInsight extends HTMLElement {
 
   // Main state.
   #state: StateData;
-  #referenceDetailsRef = Lit.Directives.createRef<HTMLDetailsElement>();
+  #referenceDetailsRef = Directives.createRef<HTMLDetailsElement>();
+  #headerRef = Directives.createRef<HTMLHeadingElement>();
+  #citationLinks: HTMLElement[] = [];
   #areReferenceDetailsOpen = false;
 
   // Rating sub-form state.
@@ -746,8 +700,7 @@ export class ConsoleInsight extends HTMLElement {
     this.#areReferenceDetailsOpen = true;
     this.#render();
 
-    const highlightedElement =
-        this.#shadow.querySelector(`.sources-list x-link[data-index="${index}"]`) as HTMLElement | null;
+    const highlightedElement = this.#citationLinks[index - 1];
     if (highlightedElement) {
       UI.UIUtils.runCSSAnimationOnce(highlightedElement, 'highlighted');
       if (areDetailsAlreadyExpanded) {
@@ -908,7 +861,7 @@ export class ConsoleInsight extends HTMLElement {
     this.classList.add('closing');
   }
 
-  #onRating(event: Event): void {
+  #onRating(isPositive: boolean): void {
     if (this.#state.type !== State.INSIGHT) {
       throw new Error('Unexpected state');
     }
@@ -920,7 +873,7 @@ export class ConsoleInsight extends HTMLElement {
       return;
     }
 
-    this.#selectedRating = (event.target as HTMLElement).dataset.rating === 'true';
+    this.#selectedRating = isPositive;
     this.#render();
     if (this.#selectedRating) {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightRatedPositive);
@@ -1056,6 +1009,7 @@ export class ConsoleInsight extends HTMLElement {
       }
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightGenerated);
     } catch (err) {
+      console.error('[ConsoleInsight] Error in #generateInsight:', err);
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightErrored);
       if (err.message === 'doAidaConversation timed out' && this.#state.type === State.INSIGHT) {
         this.#state.timedOut = true;
@@ -1122,7 +1076,7 @@ export class ConsoleInsight extends HTMLElement {
 
   #focusHeader(): void {
     this.addEventListener('animationend', () => {
-      (this.#shadow.querySelector('header h2') as HTMLElement | undefined)?.focus();
+      this.#headerRef.value?.focus();
     }, {once: true});
   }
 
@@ -1154,29 +1108,88 @@ export class ConsoleInsight extends HTMLElement {
       selectedRating: this.#selectedRating,
       noLogging: Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
           Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING,
-      onClose: this.#onClose.bind(this),
-      onSearch: this.#onSearch.bind(this),
-      onRating: this.#onRating.bind(this),
-      onReport: this.#onReport.bind(this),
-      onGoToSignIn: this.#onGoToSignIn.bind(this),
-      onConsentReminderConfirmed: this.#onConsentReminderConfirmed.bind(this),
-      onToggleReferenceDetails: this.#onToggleReferenceDetails.bind(this),
-      onDisclaimerSettingsLink: this.#onDisclaimerSettingsLink.bind(this),
-      onReminderSettingsLink: this.#onReminderSettingsLink.bind(this),
-      onEnableInsightsInSettingsLink: this.#onEnableInsightsInSettingsLink.bind(this),
+      callbacks: {
+        onClose: this.#onClose.bind(this),
+        onSearch: this.#onSearch.bind(this),
+        onRating: this.#onRating.bind(this),
+        onReport: this.#onReport.bind(this),
+        onGoToSignIn: this.#onGoToSignIn.bind(this),
+        onConsentReminderConfirmed: this.#onConsentReminderConfirmed.bind(this),
+        onToggleReferenceDetails: this.#onToggleReferenceDetails.bind(this),
+        onDisclaimerSettingsLink: this.#onDisclaimerSettingsLink.bind(this),
+        onReminderSettingsLink: this.#onReminderSettingsLink.bind(this),
+        onEnableInsightsInSettingsLink: this.#onEnableInsightsInSettingsLink.bind(this),
+      },
     };
     const output: ViewOutput = {
       referenceDetailsRef: this.#referenceDetailsRef,
+      headerRef: this.#headerRef,
+      citationLinks: [],
     };
+
+    // Future Widget view function starts here.
+    const {state, noLogging, callbacks} = input;
+    const {onClose, onDisclaimerSettingsLink} = callbacks;
+
+    const jslog = `${VisualLogging.section(state.type).track({resize: true})}`;
+    let header: Lit.LitTemplate = Lit.nothing;
+    let main: Lit.LitTemplate = Lit.nothing;
+    const mainClasses: Record<string, true> = {};
+    let footer: Lit.LitTemplate|undefined;
+
+    switch (state.type) {
+      case State.LOADING:
+        header = renderHeader({headerText: i18nString(UIStrings.generating), onClose}, output.headerRef);
+        main = renderLoading();
+        break;
+      case State.INSIGHT:
+        header = renderHeader(
+            {headerText: i18nString(UIStrings.insight), onClose, showSpinner: !state.completed}, output.headerRef);
+        main = renderInsight(state, input.renderer, input.disableAnimations, callbacks, output);
+        footer = renderInsightFooter(noLogging, input.selectedRating, callbacks);
+        break;
+      case State.ERROR:
+        header = renderHeader({headerText: i18nString(UIStrings.error), onClose}, output.headerRef);
+        main = renderError(i18nString(UIStrings.errorBody));
+        footer = renderDisclaimerFooter(noLogging, onDisclaimerSettingsLink);
+        break;
+      case State.CONSENT_REMINDER:
+        header = renderHeader(
+            {headerText: 'Understand console messages with AI', onClose, showIcon: true}, output.headerRef);
+        mainClasses['reminder-container'] = true;
+        main = renderConsentReminder(noLogging);
+        footer = renderConsentReminderFooter(callbacks.onReminderSettingsLink, callbacks.onConsentReminderConfirmed);
+        break;
+      case State.SETTING_IS_NOT_TRUE:
+        mainClasses['opt-in-teaser'] = true;
+        main = renderSettingIsNotTrue(callbacks.onEnableInsightsInSettingsLink);
+        break;
+      case State.NOT_LOGGED_IN:
+      case State.SYNC_IS_PAUSED:
+        header = renderHeader({headerText: i18nString(UIStrings.signInToUse), onClose}, output.headerRef);
+        main = renderNotLoggedIn();
+        footer = renderSignInFooter(callbacks.onGoToSignIn);
+        break;
+      case State.OFFLINE:
+        header = renderHeader({headerText: i18nString(UIStrings.offlineHeader), onClose}, output.headerRef);
+        main = renderError(i18nString(UIStrings.offline));
+        footer = renderDisclaimerFooter(noLogging, onDisclaimerSettingsLink);
+        break;
+    }
+
     // clang-format off
     render(html`
       <style>${styles}</style>
       <style>${Input.checkboxStyles}</style>
       <div class="wrapper" jslog=${VisualLogging.pane('console-insights').track({resize: true})}>
         <div class="animation-wrapper">
-          ${renderHeader(input)}
-          ${renderMain(input, output)}
-          ${renderFooter(input)}
+          ${header}
+          <main jslog=${jslog} class=${Directives.classMap(mainClasses)}>
+            ${main}
+          </main>
+          ${footer?html`<footer jslog=${VisualLogging.section('footer')}>
+            ${footer}
+          </footer>`:Lit.nothing}
         </div>
       </div>
     `, this.#shadow, {
@@ -1184,6 +1197,8 @@ export class ConsoleInsight extends HTMLElement {
     });
     // clang-format on
 
+    this.#citationLinks = output.citationLinks;
+
     if (this.#referenceDetailsRef.value) {
       this.#referenceDetailsRef.value.open = this.#areReferenceDetailsOpen;
     }