feat: add optional activity header timestamps in chat settings

Add a new Chat checkbox to toggle timestamps for tool, reasoning, and justification headers (default off).
Keep assistant message footer timestamps visible and switch to a more readable compact date format.
Preserve hover timestamp overlays with chat-surface background when the new setting is enabled.

packages/ui/src/components/chat/message/MessageBody.tsx

@@ -1295,6 +1295,8 @@ const AssistantMessageBody: React.FC<Omit<MessageBodyProps, 'isUser'>> = ({
         return formatted.length > 0 ? formatted : null;
     }, [messageCompletedAt, messageCreatedAt]);
 
+    const footerTimestampClassName = 'text-sm text-muted-foreground/60 tabular-nums flex items-center gap-1';
+
     const footerButtons = (
          <>
               {onCopyMessage && (
@@ -1462,17 +1464,13 @@ const AssistantMessageBody: React.FC<Omit<MessageBodyProps, 'isUser'>> = ({
                                                 </span>
                                             ) : null}
                                             {footerTimestamp ? (
-                                                <Tooltip delayDuration={300}>
+                                                <span
-                                                    <TooltipTrigger asChild>
+                                                    className={footerTimestampClassName}
-                                                        <span
+                                                    aria-label={`Message time: ${footerTimestamp}`}
-                                                            className="text-sm text-muted-foreground/60 tabular-nums flex items-center"
+                                                >
-                                                            aria-label={`Message time: ${footerTimestamp}`}
+                                                    <RiTimeLine className="h-3.5 w-3.5" />
-                                                        >
+                                                    {footerTimestamp}
-                                                            <RiTimeLine className="h-3.5 w-3.5" />
+                                                </span>
-                                                        </span>
-                                                    </TooltipTrigger>
-                                                    <TooltipContent sideOffset={6}>{footerTimestamp}</TooltipContent>
-                                                </Tooltip>
                                             ) : null}
                                         </div>
                                     </div>
@@ -1495,17 +1493,13 @@ const AssistantMessageBody: React.FC<Omit<MessageBodyProps, 'isUser'>> = ({
                                 </span>
                             ) : null}
                             {footerTimestamp ? (
-                                <Tooltip delayDuration={300}>
+                                <span
-                                    <TooltipTrigger asChild>
+                                    className={footerTimestampClassName}
-                                        <span
+                                    aria-label={`Message time: ${footerTimestamp}`}
-                                            className="text-sm text-muted-foreground/60 tabular-nums flex items-center"
+                                >
-                                            aria-label={`Message time: ${footerTimestamp}`}
+                                    <RiTimeLine className="h-3.5 w-3.5" />
-                                        >
+                                    {footerTimestamp}
-                                            <RiTimeLine className="h-3.5 w-3.5" />
+                                </span>
-                                        </span>
-                                    </TooltipTrigger>
-                                    <TooltipContent sideOffset={6}>{footerTimestamp}</TooltipContent>
-                                </Tooltip>
                             ) : null}
                         </div>
                     </div>

packages/ui/src/components/chat/message/parts/ReasoningPart.tsx

@@ -83,9 +83,6 @@ const LiveDuration: React.FC<{ start: number; end?: number; active: boolean }> =
     return <>{formatDuration(start, end, now)}</>;
 };
 
-// TODO: Re-enable reasoning/justification header timestamps after hover UX is redesigned.
-const ENABLE_REASONING_HEADER_TIMESTAMPS = false;
-
 type ReasoningTimelineBlockProps = {
     text: string;
     variant: ReasoningVariant;
@@ -103,6 +100,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
 }) => {
     const [isExpanded, setIsExpanded] = React.useState(false);
     const isMobile = useUIStore((state) => state.isMobile);
+    const showActivityHeaderTimestamps = useUIStore((state) => state.showActivityHeaderTimestamps);
 
     const summary = React.useMemo(() => getReasoningSummary(text), [text]);
     const { label, Icon } = variantConfig[variant];
@@ -166,21 +164,21 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
                         {typeof timeStart === 'number' ? (
                             <span className="relative flex-shrink-0 tabular-nums text-right">
                                 <span
-                                    className={cn(
+                                        className={cn(
-                                        'text-muted-foreground/80 transition-opacity duration-150',
+                                            'text-muted-foreground/80 transition-opacity duration-150',
-                                        !isMobile && endedTimestampText && ENABLE_REASONING_HEADER_TIMESTAMPS && 'group-hover/tool:opacity-0'
+                                            !isMobile && endedTimestampText && showActivityHeaderTimestamps && 'group-hover/tool:opacity-0'
-                                    )}
+                                        )}
-                                >
+                                    >
                                     <LiveDuration
                                         start={timeStart}
                                         end={timeEnd}
                                         active={typeof timeEnd !== 'number'}
                                     />
                                 </span>
-                                {!isMobile && endedTimestampText && ENABLE_REASONING_HEADER_TIMESTAMPS ? (
+                                {!isMobile && endedTimestampText && showActivityHeaderTimestamps ? (
                                     <span
                                         className={cn(
-                                            'pointer-events-none absolute right-0 top-0 whitespace-nowrap text-muted-foreground/70 transition-opacity duration-150',
+                                            'pointer-events-none absolute right-0 top-0 z-10 whitespace-nowrap rounded-sm bg-[var(--surface-background)] px-1 text-muted-foreground/70 transition-opacity duration-150',
                                             'opacity-0 group-hover/tool:opacity-100'
                                         )}
                                     >
@@ -189,7 +187,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
                                 ) : null}
                             </span>
                         ) : null}
-                        {typeof timeStart !== 'number' && !isMobile && endedTimestampText && ENABLE_REASONING_HEADER_TIMESTAMPS ? (
+                        {typeof timeStart !== 'number' && !isMobile && endedTimestampText && showActivityHeaderTimestamps ? (
                             <span className="text-muted-foreground/70 flex-shrink-0 tabular-nums">
                                 {endedTimestampText}
                             </span>

packages/ui/src/components/chat/message/parts/ToolPart.tsx

@@ -141,9 +141,6 @@ const LiveDuration: React.FC<{ start: number; end?: number; active: boolean }> =
     return <>{formatDuration(start, end, now)}</>;
 };
 
-// TODO: Re-enable tool header timestamp display after hover UX is redesigned.
-const ENABLE_TOOL_HEADER_TIMESTAMPS = false;
-
 const parseDiffStats = (metadata?: Record<string, unknown>): { added: number; removed: number } | null => {
     if (!metadata?.diff || typeof metadata.diff !== 'string') return null;
 
@@ -1543,6 +1540,7 @@ const ToolPart: React.FC<ToolPartProps> = ({
 }) => {
     const state = part.state;
     const currentDirectory = useDirectoryStore((s) => s.currentDirectory);
+    const showActivityHeaderTimestamps = useUIStore((store) => store.showActivityHeaderTimestamps);
 
     const isTaskTool = part.tool.toLowerCase() === 'task';
 
@@ -1877,7 +1875,7 @@ const ToolPart: React.FC<ToolPartProps> = ({
                             <span
                                 className={cn(
                                     'text-muted-foreground/80 transition-opacity duration-150',
-                                    !isMobile && endedTimestampText && ENABLE_TOOL_HEADER_TIMESTAMPS && 'group-hover/tool:opacity-0'
+                                    !isMobile && endedTimestampText && showActivityHeaderTimestamps && 'group-hover/tool:opacity-0'
                                 )}
                             >
                                 <LiveDuration
@@ -1886,10 +1884,10 @@ const ToolPart: React.FC<ToolPartProps> = ({
                                     active={Boolean(isActive && typeof effectiveTimeEnd !== 'number')}
                                 />
                             </span>
-                            {!isMobile && endedTimestampText && ENABLE_TOOL_HEADER_TIMESTAMPS ? (
+                            {!isMobile && endedTimestampText && showActivityHeaderTimestamps ? (
                                 <span
                                     className={cn(
-                                        'pointer-events-none absolute right-0 top-0 whitespace-nowrap text-muted-foreground/70 transition-opacity duration-150',
+                                        'pointer-events-none absolute right-0 top-0 z-10 whitespace-nowrap rounded-sm bg-[var(--surface-background)] px-1 text-muted-foreground/70 transition-opacity duration-150',
                                         'opacity-0 group-hover/tool:opacity-100'
                                     )}
                                 >
@@ -1898,7 +1896,7 @@ const ToolPart: React.FC<ToolPartProps> = ({
                             ) : null}
                         </span>
                     ) : null}
-                    {typeof effectiveTimeStart !== 'number' && !isMobile && endedTimestampText && ENABLE_TOOL_HEADER_TIMESTAMPS ? (
+                    {typeof effectiveTimeStart !== 'number' && !isMobile && endedTimestampText && showActivityHeaderTimestamps ? (
                         <span className="ml-auto text-muted-foreground/70 flex-shrink-0 tabular-nums">
                             {endedTimestampText}
                         </span>

packages/ui/src/components/chat/message/timeFormat.ts

@@ -8,6 +8,12 @@ const isSameDay = (left: Date, right: Date): boolean => {
     );
 };
 
+const isYesterday = (date: Date, now: Date): boolean => {
+    const yesterday = new Date(now);
+    yesterday.setDate(now.getDate() - 1);
+    return isSameDay(date, yesterday);
+};
+
 const isValidTimestamp = (timestamp: number): boolean => {
     return Number.isFinite(timestamp) && !Number.isNaN(new Date(timestamp).getTime());
 };
@@ -20,15 +26,23 @@ export const formatTimestampForDisplay = (timestamp: number): string => {
     const date = new Date(timestamp);
     const now = new Date();
 
-    const timePart = `${pad2(date.getHours())}:${pad2(date.getMinutes())}:${pad2(date.getSeconds())}`;
+    const timePart = `${pad2(date.getHours())}:${pad2(date.getMinutes())}`;
 
     if (isSameDay(date, now)) {
         return timePart;
     }
 
-    const yearPart = String(date.getFullYear()).slice(-2);
+    if (isYesterday(date, now)) {
-    const monthPart = pad2(date.getMonth() + 1);
+        return `Yesterday ${timePart}`;
-    const dayPart = pad2(date.getDate());
+    }
 
-    return `${yearPart}-${monthPart}-${dayPart} ${timePart}`;
+    const monthPart = date.toLocaleString(undefined, { month: 'short' });
+    const dayPart = date.getDate();
+    const datePart = `${monthPart} ${dayPart}`;
+
+    if (date.getFullYear() === now.getFullYear()) {
+        return `${datePart}, ${timePart}`;
+    }
+
+    return `${datePart}, ${date.getFullYear()}, ${timePart}`;
 };

packages/ui/src/components/sections/openchamber/OpenChamberPage.tsx

@@ -115,9 +115,9 @@ const VisualSectionContent: React.FC = () => {
     ]} />;
 };
 
-// Chat section: Default Tool Output, User message rendering, Diff layout, Mobile status bar, Show reasoning traces, Queue mode, Persist draft
+// Chat section: Default Tool Output, User message rendering, Diff layout, Mobile status bar, Show reasoning traces, Justification activity, Activity header timestamps, Queue mode, Persist draft
 const ChatSectionContent: React.FC = () => {
-    return <OpenChamberVisualSettings visibleSettings={['toolOutput', 'mermaidRendering', 'userMessageRendering', 'stickyUserHeader', 'diffLayout', 'mobileStatusBar', 'dotfiles', 'reasoning', 'textJustificationActivity', 'queueMode', 'persistDraft']} />;
+    return <OpenChamberVisualSettings visibleSettings={['toolOutput', 'mermaidRendering', 'userMessageRendering', 'stickyUserHeader', 'diffLayout', 'mobileStatusBar', 'dotfiles', 'reasoning', 'textJustificationActivity', 'activityHeaderTimestamps', 'queueMode', 'persistDraft']} />;
 };
 
 // Sessions section: Default model & agent, Session retention, Memory limits

packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx

@@ -124,7 +124,7 @@ const normalizeUserMessageRenderingMode = (mode: unknown): 'markdown' | 'plain'
     return mode === 'markdown' ? 'markdown' : 'plain';
 };
 
-export type VisibleSetting = 'theme' | 'pwaInstallName' | 'fontSize' | 'terminalFontSize' | 'spacing' | 'cornerRadius' | 'inputBarOffset' | 'navRail' | 'toolOutput' | 'mermaidRendering' | 'userMessageRendering' | 'stickyUserHeader' | 'diffLayout' | 'mobileStatusBar' | 'dotfiles' | 'reasoning' | 'queueMode' | 'textJustificationActivity' | 'terminalQuickKeys' | 'persistDraft';
+export type VisibleSetting = 'theme' | 'pwaInstallName' | 'fontSize' | 'terminalFontSize' | 'spacing' | 'cornerRadius' | 'inputBarOffset' | 'navRail' | 'toolOutput' | 'mermaidRendering' | 'userMessageRendering' | 'stickyUserHeader' | 'diffLayout' | 'mobileStatusBar' | 'dotfiles' | 'reasoning' | 'queueMode' | 'textJustificationActivity' | 'activityHeaderTimestamps' | 'terminalQuickKeys' | 'persistDraft';
 
 interface OpenChamberVisualSettingsProps {
     /** Which settings to show. If undefined, shows all. */
@@ -139,6 +139,8 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
     const setShowReasoningTraces = useUIStore(state => state.setShowReasoningTraces);
     const showTextJustificationActivity = useUIStore(state => state.showTextJustificationActivity);
     const setShowTextJustificationActivity = useUIStore(state => state.setShowTextJustificationActivity);
+    const showActivityHeaderTimestamps = useUIStore(state => state.showActivityHeaderTimestamps);
+    const setShowActivityHeaderTimestamps = useUIStore(state => state.setShowActivityHeaderTimestamps);
     const toolCallExpansion = useUIStore(state => state.toolCallExpansion);
     const setToolCallExpansion = useUIStore(state => state.setToolCallExpansion);
     const mermaidRenderingMode = useUIStore(state => state.mermaidRenderingMode);
@@ -242,6 +244,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
         || shouldShow('reasoning')
         || shouldShow('queueMode')
         || shouldShow('textJustificationActivity')
+        || shouldShow('activityHeaderTimestamps')
         || shouldShow('persistDraft');
     const selectedToolExpansionOption = TOOL_EXPANSION_OPTIONS.find((option) => option.value === toolCallExpansion);
 
@@ -1056,6 +1059,29 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
                                             <span className="typography-ui-label text-foreground">Show Justification Activity</span>
                                         </div>
                                     )}
+
+                                    {shouldShow('activityHeaderTimestamps') && (
+                                        <div
+                                            className="group flex cursor-pointer items-center gap-2 py-1.5"
+                                            role="button"
+                                            tabIndex={0}
+                                            aria-pressed={showActivityHeaderTimestamps}
+                                            onClick={() => setShowActivityHeaderTimestamps(!showActivityHeaderTimestamps)}
+                                            onKeyDown={(event) => {
+                                                if (event.key === ' ' || event.key === 'Enter') {
+                                                    event.preventDefault();
+                                                    setShowActivityHeaderTimestamps(!showActivityHeaderTimestamps);
+                                                }
+                                            }}
+                                        >
+                                            <Checkbox
+                                                checked={showActivityHeaderTimestamps}
+                                                onChange={setShowActivityHeaderTimestamps}
+                                                ariaLabel="Show tool and reasoning header timestamps"
+                                            />
+                                            <span className="typography-ui-label text-foreground">Show Activity Header Timestamps</span>
+                                        </div>
+                                    )}
                                 </section>
                             )}
 

packages/ui/src/stores/useUIStore.ts

@@ -498,6 +498,7 @@ interface UIStore {
   eventStreamHint: string | null;
   showReasoningTraces: boolean;
   showTextJustificationActivity: boolean;
+  showActivityHeaderTimestamps: boolean;
   showDeletionDialog: boolean;
   autoDeleteEnabled: boolean;
   autoDeleteAfterDays: number;
@@ -613,6 +614,7 @@ interface UIStore {
   setEventStreamStatus: (status: EventStreamStatus, hint?: string | null) => void;
   setShowReasoningTraces: (value: boolean) => void;
   setShowTextJustificationActivity: (value: boolean) => void;
+  setShowActivityHeaderTimestamps: (value: boolean) => void;
   setShowDeletionDialog: (value: boolean) => void;
   setAutoDeleteEnabled: (value: boolean) => void;
   setAutoDeleteAfterDays: (days: number) => void;
@@ -721,6 +723,7 @@ export const useUIStore = create<UIStore>()(
         eventStreamHint: null,
         showReasoningTraces: true,
         showTextJustificationActivity: false,
+        showActivityHeaderTimestamps: false,
         showDeletionDialog: true,
         autoDeleteEnabled: false,
         autoDeleteAfterDays: 30,
@@ -1293,6 +1296,10 @@ export const useUIStore = create<UIStore>()(
           set({ showTextJustificationActivity: value });
         },
 
+        setShowActivityHeaderTimestamps: (value) => {
+          set({ showActivityHeaderTimestamps: value });
+        },
+
         setShowDeletionDialog: (value) => {
           set({ showDeletionDialog: value });
         },
@@ -1814,6 +1821,7 @@ export const useUIStore = create<UIStore>()(
           // Note: isSettingsDialogOpen intentionally NOT persisted
           showReasoningTraces: state.showReasoningTraces,
           showTextJustificationActivity: state.showTextJustificationActivity,
+          showActivityHeaderTimestamps: state.showActivityHeaderTimestamps,
           showDeletionDialog: state.showDeletionDialog,
           autoDeleteEnabled: state.autoDeleteEnabled,
           autoDeleteAfterDays: state.autoDeleteAfterDays,