From 29fdb7d628acdc2ccd008285723e538717f2ab9e Mon Sep 17 00:00:00 2001
From: chengyongru <chengyongru.ai@gmail.com>
Date: Tue, 4 Aug 2026 18:17:52 +0800
Subject: [PATCH] fix(webui): align timestamp tooltip styles

---
 webui/src/components/MessageBubble.tsx  | 55 ++++++++++++++++++++-----
 webui/src/tests/message-bubble.test.tsx | 19 ++++++---
 2 files changed, 59 insertions(+), 15 deletions(-)

diff --git a/webui/src/components/MessageBubble.tsx b/webui/src/components/MessageBubble.tsx
index ce372f652..373a088cf 100644
--- a/webui/src/components/MessageBubble.tsx
+++ b/webui/src/components/MessageBubble.tsx
@@ -4,6 +4,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type ComponentPropsWithoutRef,
   type ReactNode,
 } from "react";
 import {
@@ -80,6 +81,42 @@ function ForkArrowIcon({ className }: { className?: string }) {
   );
 }
 
+type MessageTimestampProps = Omit<
+  ComponentPropsWithoutRef<"time">,
+  "dateTime" | "title"
+> & {
+  timestamp: number;
+  tooltipLabel: string;
+};
+
+function MessageTimestamp({
+  timestamp,
+  tooltipLabel,
+  className,
+  children,
+  ...props
+}: MessageTimestampProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <time
+          {...props}
+          dateTime={new Date(timestamp).toISOString()}
+          tabIndex={0}
+          className={cn(
+            "cursor-help text-[11px] leading-none text-muted-foreground/70 tabular-nums",
+            "focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            className,
+          )}
+        >
+          {children}
+        </time>
+      </TooltipTrigger>
+      <TooltipContent side="top" align="center">{tooltipLabel}</TooltipContent>
+    </Tooltip>
+  );
+}
+
 function MessageCopyButton({ content }: { content: string }) {
   const { t } = useTranslation();
   const [copied, setCopied] = useState(false);
@@ -307,14 +344,13 @@ export function MessageBubble({
           <TooltipProvider delayDuration={220} skipDelayDuration={80}>
             <div className="flex min-h-8 items-center justify-end gap-1.5 text-muted-foreground">
               {showCreatedAt ? (
-                <time
+                <MessageTimestamp
                   data-message-created-at
-                  dateTime={new Date(message.createdAt).toISOString()}
-                  className="text-[11px] leading-none text-muted-foreground/70 tabular-nums"
-                  title={createdAtTitle}
+                  timestamp={message.createdAt}
+                  tooltipLabel={createdAtTitle}
                 >
                   {createdAtLabel}
-                </time>
+                </MessageTimestamp>
               ) : null}
               <UserDeliveryStatus
                 status={message.deliveryStatus}
@@ -436,15 +472,14 @@ export function MessageBubble({
               </Tooltip>
             ) : null}
             {showAssistantTimestamp ? (
-              <time
+              <MessageTimestamp
                 {...(showCompletedAt ? { "data-assistant-completed-at": true } : {})}
                 data-message-timestamp
-                dateTime={new Date(assistantTimestamp).toISOString()}
-                className="text-[11px] leading-none text-muted-foreground/70 tabular-nums"
-                title={assistantTimestampTitle}
+                timestamp={assistantTimestamp}
+                tooltipLabel={assistantTimestampTitle}
               >
                 {assistantTimestampLabel}
-              </time>
+              </MessageTimestamp>
             ) : null}
             {showAutomationTrigger ? (
               <AutomationTriggerMeta
diff --git a/webui/src/tests/message-bubble.test.tsx b/webui/src/tests/message-bubble.test.tsx
index 1804d699c..db423d486 100644
--- a/webui/src/tests/message-bubble.test.tsx
+++ b/webui/src/tests/message-bubble.test.tsx
@@ -347,7 +347,7 @@ describe("MessageBubble", () => {
     expect(onForkFromHere).toHaveBeenCalledTimes(1);
   });
 
-  it("shows the assistant completion time in the former latency slot", () => {
+  it("shows the assistant completion time in the former latency slot", async () => {
     const completedAt = Date.UTC(2026, 6, 25, 12, 34, 56);
     const { container } = render(
       <MessageBubble
@@ -366,13 +366,18 @@ describe("MessageBubble", () => {
     const time = container.querySelector("[data-assistant-completed-at]");
     expect(time).toHaveTextContent(formatMessageEndTime(completedAt));
     expect(time).toHaveAttribute("dateTime", new Date(completedAt).toISOString());
-    expect(time).toHaveAttribute("title", fmtDateTime(completedAt));
+    expect(time).not.toHaveAttribute("title");
+    expect(time).toHaveAttribute("tabIndex", "0");
     expect(time).toHaveClass(
+      "cursor-help",
       "text-[11px]",
       "leading-none",
       "text-muted-foreground/70",
       "tabular-nums",
     );
+
+    fireEvent.pointerMove(time!);
+    expect(await screen.findByRole("tooltip")).toHaveTextContent(fmtDateTime(completedAt));
   });
 
   it("falls back to the assistant creation time when replay has no completion time", () => {
@@ -391,11 +396,11 @@ describe("MessageBubble", () => {
     const time = container.querySelector("[data-message-timestamp]");
     expect(time).toHaveTextContent(formatMessageEndTime(createdAt));
     expect(time).toHaveAttribute("dateTime", new Date(createdAt).toISOString());
-    expect(time).toHaveAttribute("title", fmtDateTime(createdAt));
+    expect(time).not.toHaveAttribute("title");
     expect(time).not.toHaveAttribute("data-assistant-completed-at");
   });
 
-  it("renders the creation time for user messages", () => {
+  it("renders the creation time for user messages", async () => {
     const createdAt = Date.UTC(2026, 6, 25, 12, 34, 56);
     const { container } = render(
       <MessageBubble
@@ -411,7 +416,11 @@ describe("MessageBubble", () => {
     const time = container.querySelector("[data-message-created-at]");
     expect(time).toHaveTextContent(formatMessageEndTime(createdAt));
     expect(time).toHaveAttribute("dateTime", new Date(createdAt).toISOString());
-    expect(time).toHaveAttribute("title", fmtDateTime(createdAt));
+    expect(time).not.toHaveAttribute("title");
+    expect(time).toHaveAttribute("tabIndex", "0");
+
+    fireEvent.pointerMove(time!);
+    expect(await screen.findByRole("tooltip")).toHaveTextContent(fmtDateTime(createdAt));
   });
 
   it("does not infer completion time from the assistant creation timestamp", () => {