feat(chat-thread): show hover timestamps on agent messages and tool calls (#3081)

Author: frankh

packages/ui/src/features/sessions/components/buildConversationItems.test.ts

@@ -757,6 +757,53 @@ describe("buildConversationItems", () => {
       );
     });
   });
+
+  describe("session_update timestamps", () => {
+    const toolCallMsg = (ts: number, toolCallId: string): AcpMessage => ({
+      type: "acp_message",
+      ts,
+      message: {
+        jsonrpc: "2.0",
+        method: "session/update",
+        params: {
+          update: {
+            sessionUpdate: "tool_call",
+            toolCallId,
+            kind: "execute",
+            status: "pending",
+            title: toolCallId,
+          },
+        },
+      },
+    });
+
+    const firstSessionUpdate = (items: ConversationItem[]) =>
+      items.find((i) => i.type === "session_update") as
+        | Extract<ConversationItem, { type: "session_update" }>
+        | undefined;
+
+    it("stamps an agent message with the first chunk's ts and keeps it across merges", () => {
+      const events = [
+        userPromptMsg(1, 1, "hi"),
+        agentMessageMsg(5, "Hello"),
+        agentMessageMsg(9, " there"),
+      ];
+      const item = firstSessionUpdate(
+        buildConversationItems(events, true).items,
+      );
+      expect(item?.update.sessionUpdate).toBe("agent_message_chunk");
+      expect(item?.timestamp).toBe(5);
+    });
+
+    it("stamps a tool call with its ts", () => {
+      const events = [userPromptMsg(1, 1, "go"), toolCallMsg(4, "t1")];
+      const item = firstSessionUpdate(
+        buildConversationItems(events, true).items,
+      );
+      expect(item?.update.sessionUpdate).toBe("tool_call");
+      expect(item?.timestamp).toBe(4);
+    });
+  });
 });
 
 // Local alias kept intentionally narrow to the shape we care about in tests.

packages/ui/src/features/sessions/components/buildConversationItems.ts

@@ -55,6 +55,7 @@ export type ConversationItem =
       update: RenderItem;
       turnContext: TurnContext;
       thoughtComplete?: boolean;
+      timestamp?: number;
     }
   | {
       type: "git_action_result";
@@ -188,7 +189,7 @@ export function markThoughtCompletion(items: ConversationItem[]) {
   }
 }
 
-function pushItem(b: ItemBuilder, update: RenderItem) {
+function pushItem(b: ItemBuilder, update: RenderItem, ts?: number) {
   const turn = b.currentTurn;
   if (!turn) return;
   turn.itemCount++;
@@ -197,6 +198,7 @@ function pushItem(b: ItemBuilder, update: RenderItem) {
     id: `${turn.id}-item-${b.nextId()}`,
     update,
     turnContext: turn.context,
+    timestamp: ts,
   });
 }
 
@@ -460,7 +462,7 @@ function handleNotification(
     if (!b.currentTurn) {
       ensureImplicitTurn(b, ts);
     }
-    processSessionUpdate(b, update);
+    processSessionUpdate(b, update, ts);
     return;
   }
 
@@ -783,7 +785,11 @@ function appendTextChunkToChildren(
   }
 }
 
-function processSessionUpdate(b: ItemBuilder, update: SessionUpdate) {
+function processSessionUpdate(
+  b: ItemBuilder,
+  update: SessionUpdate,
+  ts: number,
+) {
   switch (update.sessionUpdate) {
     case "user_message_chunk":
       break;
@@ -795,7 +801,7 @@ function processSessionUpdate(b: ItemBuilder, update: SessionUpdate) {
       if (parentId) {
         appendTextChunkToChildren(b, parentId, update);
       } else {
-        appendTextChunk(b, update);
+        appendTextChunk(b, update, ts);
       }
       break;
     }
@@ -820,7 +826,7 @@ function processSessionUpdate(b: ItemBuilder, update: SessionUpdate) {
         if (parentId) {
           pushChildItem(b, parentId, toolCall);
         } else {
-          pushItem(b, toolCall);
+          pushItem(b, toolCall, ts);
         }
       }
       break;
@@ -857,16 +863,20 @@ function processSessionUpdate(b: ItemBuilder, update: SessionUpdate) {
       };
       if (customUpdate.sessionUpdate === "agent_message") {
         if (customUpdate.content?.type === "text") {
-          appendTextChunk(b, {
-            sessionUpdate: "agent_message_chunk" as const,
-            content: customUpdate.content as { type: "text"; text: string },
-          });
+          appendTextChunk(
+            b,
+            {
+              sessionUpdate: "agent_message_chunk" as const,
+              content: customUpdate.content as { type: "text"; text: string },
+            },
+            ts,
+          );
         }
       } else if (
         customUpdate.sessionUpdate === "status" ||
         customUpdate.sessionUpdate === "error"
       ) {
-        pushItem(b, customUpdate as unknown as SessionUpdate);
+        pushItem(b, customUpdate as unknown as SessionUpdate, ts);
       }
       break;
     }
@@ -878,6 +888,7 @@ function appendTextChunk(
   update: SessionUpdate & {
     sessionUpdate: "agent_message_chunk" | "agent_thought_chunk";
   },
+  ts: number,
 ) {
   if (update.content.type !== "text") return;
 
@@ -899,6 +910,6 @@ function appendTextChunk(
       },
     };
   } else {
-    pushItem(b, { ...update, content: { ...update.content } });
+    pushItem(b, { ...update, content: { ...update.content } }, ts);
   }
 }

packages/ui/src/features/sessions/components/chat-thread/ChatThread.tsx

@@ -29,6 +29,7 @@ import { ChatMarkdown } from "@posthog/ui/features/sessions/components/chat-thre
 import { ChatThreadFooter } from "@posthog/ui/features/sessions/components/chat-thread/ChatThreadFooter";
 import { ChatThreadChromeProvider } from "@posthog/ui/features/sessions/components/chat-thread/chatThreadChrome";
 import {
+  isToolActive,
   ToolGroup,
   type ToolGroupItem,
 } from "@posthog/ui/features/sessions/components/chat-thread/ToolGroup";
@@ -168,6 +169,19 @@ function formatTimestamp(ts: number): string {
   });
 }
 
+/**
+ * Send-time footer revealed on hover. Sits inside a `group` container (a `ChatMessage` for prose, a
+ * wrapper div for tool rows) so it fades in only while that row is hovered.
+ */
+function RowTimestamp({ timestamp }: { timestamp?: number }) {
+  if (timestamp == null) return null;
+  return (
+    <ChatMessageFooter className="opacity-0 transition-opacity group-hover:opacity-100">
+      {formatTimestamp(timestamp)}
+    </ChatMessageFooter>
+  );
+}
+
 /**
  * End-aligned user bubble. The text is clamped to two lines (`max-height: 2lh` + `overflow-hidden`,
  * which — unlike `-webkit-line-clamp` — reliably clamps markdown's block `<p>` children); a "Show
@@ -475,7 +489,16 @@ const ThreadRow = memo(function ThreadRow({
       style={{ maxWidth: CHAT_CONTENT_MAX_WIDTH }}
     >
       {item.type === "tool_group" ? (
-        <ToolGroup tools={item.tools} />
+        <div className="group flex flex-col gap-2">
+          <ToolGroup tools={item.tools} />
+          <RowTimestamp
+            timestamp={
+              item.tools.some(isToolActive)
+                ? undefined
+                : item.tools[0]?.timestamp
+            }
+          />
+        </div>
       ) : item.type === "user_message" ? (
         <UserBubble
           content={item.content}
@@ -596,18 +619,23 @@ export function ChatThread({
             update.content.type === "text"
           ) {
             return (
-              <ChatMessage align="start">
+              <ChatMessage align="start" className="group">
                 <ChatMessageContent>
                   <ChatBubble variant="ghost">
                     <ChatBubbleContent>
                       <ChatMarkdown content={update.content.text} />
                     </ChatBubbleContent>
                   </ChatBubble>
+                  <RowTimestamp
+                    timestamp={
+                      item.turnContext.turnComplete ? item.timestamp : undefined
+                    }
+                  />
                 </ChatMessageContent>
               </ChatMessage>
             );
           }
-          return (
+          const rendered = (
             <SessionUpdateView
               item={item.update}
               toolCalls={item.turnContext.toolCalls}
@@ -617,6 +645,17 @@ export function ChatThread({
               thoughtComplete={item.thoughtComplete}
             />
           );
+          if (update.sessionUpdate === "tool_call") {
+            return (
+              <div className="group flex flex-col gap-2">
+                {rendered}
+                <RowTimestamp
+                  timestamp={isToolActive(item) ? undefined : item.timestamp}
+                />
+              </div>
+            );
+          }
+          return rendered;
         }
         case "git_action_result":
           return repoPath ? (

packages/ui/src/features/sessions/components/chat-thread/ToolGroup.tsx

@@ -57,7 +57,7 @@ function friendlyName(key: string): string {
   return spaced.charAt(0).toUpperCase() + spaced.slice(1).toLowerCase();
 }
 
-function isToolActive(item: ToolGroupItem["tools"][number]): boolean {
+export function isToolActive(item: ToolGroupItem["tools"][number]): boolean {
   const { toolCall } = resolveTool(item);
   const incomplete =
     toolCall.status === "pending" || toolCall.status === "in_progress";