Chat: show a datetime on each message (bottom-right)

web/src/components/Chat/AssistantMessage.tsx

@@ -1,6 +1,7 @@
 import { Repeat } from 'lucide-react';
 import type { ChatMessage } from '../../types/chat';
 import { BlockRenderer } from './BlockRenderer';
+import { formatMessageTime } from '../../utils/messageTime';
 
 export function AssistantMessage({ message }: { message: ChatMessage }) {
   // Review-loop milestones are controller-written system entries, not the
@@ -30,6 +31,14 @@ export function AssistantMessage({ message }: { message: ChatMessage }) {
             <BlockRenderer blocks={message.blocks} />
           </div>
         </div>
+        {message.created_at && (
+          <div
+            className="mt-1 text-right text-[10px] text-text-faint/60 tabular-nums"
+            title={new Date(message.created_at).toLocaleString()}
+          >
+            {formatMessageTime(message.created_at)}
+          </div>
+        )}
       </div>
     </div>
   );

web/src/components/Chat/UserMessage.tsx

@@ -1,6 +1,7 @@
 import type { ChatMessage, ImageBlockData, FileBlockData } from '../../types/chat';
 import { Download, FileText } from 'lucide-react';
 import { getToken } from '../../api/client';
+import { formatMessageTime } from '../../utils/messageTime';
 
 function authUrl(url: string): string {
   const token = getToken();
@@ -63,6 +64,14 @@ export function UserMessage({ message }: { message: ChatMessage }) {
             )}
           </div>
         </div>
+        {message.created_at && (
+          <div
+            className="mt-1 text-right text-[10px] text-text-faint/60 tabular-nums"
+            title={new Date(message.created_at).toLocaleString()}
+          >
+            {formatMessageTime(message.created_at)}
+          </div>
+        )}
       </div>
     </div>
   );

web/src/stores/chatStore.ts

@@ -885,7 +885,7 @@ export const useChatStore = create<ChatState>((set, get) => ({
     // socket isn't open, send() returns 'queued' (will flush on reconnect)
     // or 'dropped' (revert below).
     set((state) => ({
-      messages: [...state.messages, { role: 'user' as const, blocks }],
+      messages: [...state.messages, { role: 'user' as const, blocks, created_at: new Date().toISOString() }],
       streamingBlocks: [],
       isStreaming: true,
       agentStatus: { state: 'thinking' as const },

web/src/stores/handlers/sessionHandlers.ts

@@ -266,7 +266,7 @@ export function handleSessionRunning(
       if (finalBlocks.length > 0) {
         updates.messages = [
           ...s.messages,
-          { role: 'assistant' as const, blocks: finalBlocks },
+          { role: 'assistant' as const, blocks: finalBlocks, created_at: new Date().toISOString() },
         ];
       }
       updates.streamingBlocks = [];
@@ -309,6 +309,7 @@ export function handleAnswerInjected(
       messages: [...s.messages, {
         role: 'user' as const,
         blocks: [{ type: 'text' as const, content: msg.content }],
+        created_at: new Date().toISOString(),
       }],
     }));
   }
@@ -323,6 +324,6 @@ export function handleUserMessage(
   // bubble live. The sender is excluded server-side, so this never duplicates
   // its own optimistic message. hydrateMessage rebuilds any image/file blocks.
   if (msg.session_id !== get().activeSession) return;
-  const hydrated = hydrateMessage({ role: 'user', content: msg.content, blocks: msg.blocks ?? undefined });
+  const hydrated = hydrateMessage({ role: 'user', content: msg.content, blocks: msg.blocks ?? undefined, created_at: new Date().toISOString() });
   set(s => ({ messages: [...s.messages, hydrated] }));
 }

web/src/stores/handlers/streamingHandlers.ts

@@ -463,7 +463,7 @@ export function handleDone(
         : b
     );
     set((s) => ({
-      messages: [...s.messages, { role: 'assistant' as const, blocks: finalBlocks }],
+      messages: [...s.messages, { role: 'assistant' as const, blocks: finalBlocks, created_at: new Date().toISOString() }],
       streamingBlocks: [],
       isStreaming: false,
       ...doneUpdate,
@@ -496,6 +496,7 @@ export function handleStopped(
       blocks: finalBlocks.length > 0
         ? finalBlocks
         : [{ type: 'text', content: '*[Stopped by user]*' }],
+      created_at: new Date().toISOString(),
     }],
     streamingBlocks: [],
     isStreaming: false,

web/src/utils/messageTime.ts

@@ -0,0 +1,16 @@
+/**
+ * Compact local datetime for a chat message's `created_at`,
+ * e.g. "Aug 13, 2:41 AM" (locale-aware; 24h where the locale uses it).
+ * Returns '' for missing/invalid input so callers can guard on falsy.
+ */
+export function formatMessageTime(input?: string): string {
+  if (!input) return '';
+  const date = new Date(input);
+  if (Number.isNaN(date.getTime())) return '';
+  return date.toLocaleString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+}