[Amber] Fix: Feature: add timestamps to UI chat message (#416)

## Automated Fix by Amber Agent

This PR addresses issue #414 using the Amber background agent.

### Changes Summary
- **Action Type:** execute-proposal
- **Commit:** 4fd9364
- **Triggered by:** Issue label/command

### Pre-merge Checklist
- [ ] All linters pass
- [ ] All tests pass
- [ ] Changes follow project conventions (CLAUDE.md)
- [ ] No scope creep beyond issue description

### Reviewer Notes
This PR was automatically generated. Please review:
1. Code quality and adherence to standards
2. Test coverage for changes
3. No unintended side effects

---
🤖 Generated with [Amber Background
Agent](https://github.com/ambient-code/platform/blob/main/docs/amber-automation.md)

Closes #414

Co-authored-by: Amber Agent <amber@ambient-code.ai>
Co-authored-by: Claude <noreply@anthropic.com>

Author: 3 people

components/frontend/src/components/ui/message.tsx

@@ -5,6 +5,7 @@ import { cn } from "@/lib/utils";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import type { Components } from "react-markdown";
+import { formatTimestamp } from "@/lib/format-timestamp";
 
 export type MessageRole = "bot" | "user";
 
@@ -18,6 +19,7 @@ export type MessageProps = {
   components?: Components;
   borderless?: boolean;
   actions?: React.ReactNode;
+  timestamp?: string;
 };
 
 const defaultComponents: Components = {
@@ -169,12 +171,13 @@ export const LoadingDots = () => {
 
 export const Message = React.forwardRef<HTMLDivElement, MessageProps>(
   (
-    { role, content, isLoading, className, components, borderless, actions, ...props },
+    { role, content, isLoading, className, components, borderless, actions, timestamp, ...props },
     ref
   ) => {
     const isBot = role === "bot";
     const avatarBg = isBot ? "bg-blue-600" : "bg-green-600";
     const avatarText = isBot ? "AI" : "U";
+    const formattedTime = formatTimestamp(timestamp);
 
     const avatar = (
       <div className="flex-shrink-0">
@@ -200,10 +203,16 @@ export const Message = React.forwardRef<HTMLDivElement, MessageProps>(
 
           {/* Message Content */}
           <div className={cn("flex-1 min-w-0", !isBot && "max-w-[70%]")}>
+            {/* Timestamp */}
+            {formattedTime && (
+              <div className={cn("text-[10px] text-muted-foreground/60 mb-1", !isBot && "text-right")}>
+                {formattedTime}
+              </div>
+            )}
             <div className={cn(
               borderless ? "p-0" : "rounded-lg p-3",
               !borderless && (isBot ? "bg-card" : "bg-border/30")
-            )}> 
+            )}>
               {/* Content */}
               <div className="text-sm text-foreground">
                 {isLoading ? (

components/frontend/src/components/ui/stream-message.tsx

@@ -36,7 +36,7 @@ export const StreamMessage: React.FC<StreamMessageProps> = ({ message, onGoToRes
     m != null && typeof m === "object" && "toolUseBlock" in m && "resultBlock" in m;
 
   if (isToolUsePair(message)) {
-    return <ToolMessage toolUseBlock={message.toolUseBlock} resultBlock={message.resultBlock} />;
+    return <ToolMessage toolUseBlock={message.toolUseBlock} resultBlock={message.resultBlock} timestamp={message.timestamp} />;
   }
 
   const m = message as MessageObject;
@@ -54,13 +54,13 @@ export const StreamMessage: React.FC<StreamMessageProps> = ({ message, onGoToRes
     case "user_message":
     case "agent_message": {
       if (typeof m.content === "string") {
-        return <Message role={m.type === "agent_message" ? "bot" : "user"} content={m.content} name="Claude AI" borderless={plainCard}/>;
+        return <Message role={m.type === "agent_message" ? "bot" : "user"} content={m.content} name="Claude AI" borderless={plainCard} timestamp={m.timestamp}/>;
       }
       switch (m.content.type) {
         case "thinking_block":
           return <ThinkingMessage block={m.content} />
         case "text_block":
-          return <Message role={m.type === "agent_message" ? "bot" : "user"} content={m.content.text} name="Claude AI" borderless={plainCard}/>
+          return <Message role={m.type === "agent_message" ? "bot" : "user"} content={m.content.text} name="Claude AI" borderless={plainCard} timestamp={m.timestamp}/>
         case "tool_use_block":
           return <ToolMessage toolUseBlock={m.content} borderless={plainCard}/>
         case "tool_result_block":
@@ -78,6 +78,7 @@ export const StreamMessage: React.FC<StreamMessageProps> = ({ message, onGoToRes
           role="bot"
           content={m.is_error ? "Agent completed with errors." : "Agent completed successfully."}
           name="Claude AI"
+          timestamp={m.timestamp}
           actions={
             <div className="flex items-center justify-between">
               <div className="text-xs text-muted-foreground">

components/frontend/src/components/ui/tool-message.tsx

@@ -15,12 +15,14 @@ import {
 import ReactMarkdown from "react-markdown";
 import type { Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
+import { formatTimestamp } from "@/lib/format-timestamp";
 
 export type ToolMessageProps = {
   toolUseBlock?: ToolUseBlock;
   resultBlock?: ToolResultBlock;
   className?: string;
   borderless?: boolean;
+  timestamp?: string;
 };
 
 const formatToolName = (toolName?: string) => {
@@ -179,7 +181,7 @@ const extractTextFromResultContent = (content: unknown): string => {
 };
 
 export const ToolMessage = React.forwardRef<HTMLDivElement, ToolMessageProps>(
-  ({ toolUseBlock, resultBlock, className, borderless, ...props }, ref) => {
+  ({ toolUseBlock, resultBlock, className, borderless, timestamp, ...props }, ref) => {
     const [isExpanded, setIsExpanded] = useState(false);
 
     const toolResultBlock = resultBlock;
@@ -200,10 +202,12 @@ export const ToolMessage = React.forwardRef<HTMLDivElement, ToolMessageProps>(
     const isSubagent = Boolean(subagentType);
     const subagentClasses = subagentType ? getColorClassesForName(subagentType) : undefined;
     const displayName = isSubagent ? subagentType : toolName;
-    
+
     // Compact mode for simple tool calls (non-subagent)
     const isCompact = !isSubagent;
 
+    const formattedTime = formatTimestamp(timestamp);
+
     return (
       <div ref={ref} className={cn(isCompact ? "mb-1" : "mb-4", className)} {...props}>
         <div className="flex items-start space-x-3">
@@ -224,6 +228,12 @@ export const ToolMessage = React.forwardRef<HTMLDivElement, ToolMessageProps>(
 
           {/* Tool Message Content */}
           <div className="flex-1 min-w-0">
+            {/* Timestamp */}
+            {formattedTime && (
+              <div className="text-[10px] text-muted-foreground/60 mb-1">
+                {formattedTime}
+              </div>
+            )}
             <div
               className={cn(
                 isCompact ? "" : (borderless ? "p-0" : "rounded-lg border shadow-sm"),

components/frontend/src/lib/format-timestamp.ts

@@ -0,0 +1,54 @@
+/**
+ * Formats an ISO timestamp into a human-readable format
+ * @param timestamp ISO 8601 timestamp string
+ * @returns Formatted time string (HH:MM:SS)
+ */
+export function formatTimestamp(timestamp: string | undefined): string {
+  if (!timestamp) return "";
+
+  try {
+    const date = new Date(timestamp);
+
+    // Check if date is valid
+    if (isNaN(date.getTime())) {
+      return "";
+    }
+
+    // Format as HH:MM:SS in local timezone
+    const hours = date.getHours().toString().padStart(2, "0");
+    const minutes = date.getMinutes().toString().padStart(2, "0");
+    const seconds = date.getSeconds().toString().padStart(2, "0");
+
+    return `${hours}:${minutes}:${seconds}`;
+  } catch {
+    return "";
+  }
+}
+
+/**
+ * Formats an ISO timestamp into a human-readable format with date
+ * @param timestamp ISO 8601 timestamp string
+ * @returns Formatted datetime string (MM/DD HH:MM:SS)
+ */
+export function formatTimestampWithDate(timestamp: string | undefined): string {
+  if (!timestamp) return "";
+
+  try {
+    const date = new Date(timestamp);
+
+    // Check if date is valid
+    if (isNaN(date.getTime())) {
+      return "";
+    }
+
+    const month = (date.getMonth() + 1).toString().padStart(2, "0");
+    const day = date.getDate().toString().padStart(2, "0");
+    const hours = date.getHours().toString().padStart(2, "0");
+    const minutes = date.getMinutes().toString().padStart(2, "0");
+    const seconds = date.getSeconds().toString().padStart(2, "0");
+
+    return `${month}/${day} ${hours}:${minutes}:${seconds}`;
+  } catch {
+    return "";
+  }
+}