From d72b693fd6f540de11f3a4220309165b726f0c31 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Fri, 24 Apr 2026 08:11:23 -0500
Subject: [PATCH] Add raw transcript timestamp tooltips

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 .../transcript/RunTranscriptView.test.tsx     | 29 ++++++++++++++++++-
 .../transcript/RunTranscriptView.tsx          | 13 +++++++--
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/transcript/RunTranscriptView.test.tsx b/ui/src/components/transcript/RunTranscriptView.test.tsx
index 41f635d2b3f..3e5a42c7bbb 100644
--- a/ui/src/components/transcript/RunTranscriptView.test.tsx
+++ b/ui/src/components/transcript/RunTranscriptView.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment node
 
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { renderToStaticMarkup } from "react-dom/server";
 import type { TranscriptEntry } from "../../adapters";
 import { ThemeProvider } from "../../context/ThemeContext";
@@ -110,4 +110,31 @@ describe("RunTranscriptView", () => {
     expect(html).toMatch(/<li[^>]*>posted issue update<\/li>/);
     expect(html).not.toContain("result");
   });
+
+  it("adds timestamp and age tooltip to raw mode labels", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-03-12T00:03:00.000Z"));
+    try {
+      const html = renderToStaticMarkup(
+        <ThemeProvider>
+          <RunTranscriptView
+            mode="raw"
+            entries={[
+              {
+                kind: "stdout",
+                ts: "2026-03-12T00:00:00.000Z",
+                text: "hello",
+              },
+            ]}
+          />
+        </ThemeProvider>,
+      );
+
+      expect(html).toContain("Timestamp:");
+      expect(html).toContain("Ago: 3m ago");
+      expect(html).toContain(">stdout</span>");
+    } finally {
+      vi.useRealTimers();
+    }
+  });
 });
diff --git a/ui/src/components/transcript/RunTranscriptView.tsx b/ui/src/components/transcript/RunTranscriptView.tsx
index fee3a561e89..887f42f41b6 100644
--- a/ui/src/components/transcript/RunTranscriptView.tsx
+++ b/ui/src/components/transcript/RunTranscriptView.tsx
@@ -1,7 +1,8 @@
 import { useMemo, useState } from "react";
 import type { TranscriptEntry } from "../../adapters";
 import { MarkdownBody } from "../MarkdownBody";
-import { cn, formatTokens } from "../../lib/utils";
+import { timeAgo } from "../../lib/timeAgo";
+import { cn, formatDateTime, formatTokens } from "../../lib/utils";
 import {
   Check,
   ChevronDown,
@@ -136,6 +137,11 @@ function truncate(value: string, max: number): string {
   return value.length > max ? `${value.slice(0, Math.max(0, max - 1))}…` : value;
 }
 
+function formatRawEntryTimestampTooltip(ts: string): string {
+  if (Number.isNaN(new Date(ts).getTime())) return ts;
+  return `Timestamp: ${formatDateTime(ts)}; Ago: ${timeAgo(ts)}`;
+}
+
 function humanizeLabel(value: string): string {
   return value
     .replace(/[_-]+/g, " ")
@@ -1365,7 +1371,10 @@ function RawTranscriptView({
             "grid-cols-[auto_1fr]",
           )}
         >
-          <span className="text-[10px] uppercase tracking-[0.18em] text-muted-foreground">
+          <span
+            className="text-[10px] uppercase tracking-[0.18em] text-muted-foreground"
+            title={formatRawEntryTimestampTooltip(entry.ts)}
+          >
             {entry.kind}
           </span>
           <pre className="min-w-0 whitespace-pre-wrap break-words text-foreground/80">