Use gr-date-formatter in chat history Previously, the chat history panel used a custom date formatting helper. This change replaces it with the standard `gr-date-formatter` component to ensure visual consistency with other parts of the application and enable standard tooltip behavior. To support this, a new `dateToTimestamp` utility function is added to convert JavaScript Date objects into the timestamp string format expected by the formatter. Google-Bug-Id: b/437944720 Release-Notes: skip Change-Id: I633bf7b0b1ee462791ef39a719f6c6c38f9d5653

diff --git a/polygerrit-ui/app/elements/chat-panel/chat-history.ts b/polygerrit-ui/app/elements/chat-panel/chat-history.ts
index 4fee186..6d34d0f 100644
--- a/polygerrit-ui/app/elements/chat-panel/chat-history.ts
+++ b/polygerrit-ui/app/elements/chat-panel/chat-history.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import '../shared/gr-date-formatter/gr-date-formatter';
 import '../shared/gr-icon/gr-icon';
 
 import {css, html, LitElement} from 'lit';
@@ -12,7 +13,7 @@
 import {Conversation} from '../../api/ai-code-review';
 import {chatModelToken} from '../../models/chat/chat-model';
 import {resolve} from '../../models/dependency';
-import {formatDate} from '../../utils/date-util';
+import {dateToTimestamp} from '../../utils/date-util';
 import {subscribe} from '../lit/subscription-controller';
 
 @customElement('chat-history')
@@ -89,7 +90,12 @@
             <div class="conversation-content">
               <p>${conversation.title}</p>
               <p class="ts">
-                ${this.renderTimestamp(new Date(conversation.timestamp_millis))}
+                <gr-date-formatter
+                  withTooltip
+                  .dateStr=${dateToTimestamp(
+                    new Date(conversation.timestamp_millis)
+                  )}
+                ></gr-date-formatter>
               </p>
             </div>
           </div>
@@ -98,10 +104,6 @@
     `;
   }
 
-  private renderTimestamp(timestamp: Date) {
-    return formatDate(timestamp, 'YYYY-MM-DD hh:mm a');
-  }
-
   // visible for testing
   loadConversation(conversation: Conversation) {
     this.getChatModel().loadConversation(conversation.id);

diff --git a/polygerrit-ui/app/elements/chat-panel/chat-history_test.ts b/polygerrit-ui/app/elements/chat-panel/chat-history_test.ts
index 42854cf..a9b3025 100644
--- a/polygerrit-ui/app/elements/chat-panel/chat-history_test.ts
+++ b/polygerrit-ui/app/elements/chat-panel/chat-history_test.ts

@@ -3,6 +3,7 @@
  * Copyright 2025 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+import {GrDateFormatter} from '../../elements/shared/gr-date-formatter/gr-date-formatter';
 import '../../test/common-test-setup';
 import './chat-history';
 import {ChatHistory} from './chat-history';
@@ -64,9 +65,10 @@
     assert.equal(title, 'Test Conversation 1');
 
     const timestamp = firstCard.querySelector(
-      '.conversation-content p.ts'
-    )?.textContent;
-    assert.include(timestamp?.trim(), '2024-01-01');
+      '.conversation-content p.ts gr-date-formatter'
+    ) as GrDateFormatter;
+    assert.isOk(timestamp);
+    assert.include(timestamp.dateStr, '2024-01-01');
   });
 
   test('clicking conversation calls loadConversation', async () => {

diff --git a/polygerrit-ui/app/elements/chat-panel/chat-panel_screenshot_test.ts b/polygerrit-ui/app/elements/chat-panel/chat-panel_screenshot_test.ts
index 9d3eef2..9773f40 100644
--- a/polygerrit-ui/app/elements/chat-panel/chat-panel_screenshot_test.ts
+++ b/polygerrit-ui/app/elements/chat-panel/chat-panel_screenshot_test.ts

@@ -13,6 +13,7 @@
 import {
   ChatModel,
   chatModelToken,
+  ChatPanelMode,
   ResponsePartType,
   Turn,
   UserType,
@@ -235,4 +236,26 @@
     await visualDiff(element, 'chat-panel-chat-mode-with-citations');
     await visualDiffDarkTheme(element, 'chat-panel-chat-mode-with-citations');
   });
+
+  test('chat mode history', async () => {
+    chatModel.updateState({
+      ...chatModel.getState(),
+      mode: ChatPanelMode.HISTORY,
+      conversations: [
+        {
+          id: '1',
+          title: 'Test Conversation 1',
+          timestamp_millis: 1704110400000, // 2024-01-01 12:00:00 UTC
+        },
+        {
+          id: '2',
+          title: 'Test Conversation 2',
+          timestamp_millis: 1704024000000, // 2023-12-31 12:00:00 UTC
+        },
+      ],
+    });
+    await element.updateComplete;
+    await visualDiff(element, 'chat-panel-history');
+    await visualDiffDarkTheme(element, 'chat-panel-history');
+  });
 });

diff --git a/polygerrit-ui/app/utils/date-util.ts b/polygerrit-ui/app/utils/date-util.ts
index a078b1d..7bb8d36 100644
--- a/polygerrit-ui/app/utils/date-util.ts
+++ b/polygerrit-ui/app/utils/date-util.ts

@@ -19,6 +19,10 @@
   return new Date(dateStr.replace(' ', 'T') + 'Z');
 }
 
+export function dateToTimestamp(date: Date): Timestamp {
+  return date.toISOString().replace('T', ' ').replace('Z', '') as Timestamp;
+}
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isValidDate(date: any): date is Date {
   return date instanceof Date && !isNaN(date.valueOf());

diff --git a/polygerrit-ui/screenshots/Chromium/baseline/chat-panel-history-dark.png b/polygerrit-ui/screenshots/Chromium/baseline/chat-panel-history-dark.png
new file mode 100644
index 0000000..9b48f82
--- /dev/null
+++ b/polygerrit-ui/screenshots/Chromium/baseline/chat-panel-history-dark.png
Binary files differ

diff --git a/polygerrit-ui/screenshots/Chromium/baseline/chat-panel-history.png b/polygerrit-ui/screenshots/Chromium/baseline/chat-panel-history.png
new file mode 100644
index 0000000..8d80cba
--- /dev/null
+++ b/polygerrit-ui/screenshots/Chromium/baseline/chat-panel-history.png
Binary files differ