It turns out using day.js was better

Author: Bruno Bergher

pnpm-lock.yaml

@@ -5,10 +5,15 @@ import crypto from "crypto"
 import EventEmitter from "events"
 
 import { Anthropic } from "@anthropic-ai/sdk"
+import dayjs from "dayjs"
+import relativeTime from "dayjs/plugin/relativeTime"
 import delay from "delay"
 import pWaitFor from "p-wait-for"
 import { serializeError } from "serialize-error"
 
+// Initialize day.js plugins
+dayjs.extend(relativeTime)
+
 import {
 	type TaskLike,
 	type TaskEvents,
@@ -1191,25 +1196,7 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 
 		let newUserContent: Anthropic.Messages.ContentBlockParam[] = [...modifiedOldUserContent]
 
-		const agoText = ((): string => {
-			const timestamp = lastClineMessage?.ts ?? Date.now()
-			const now = Date.now()
-			const diff = now - timestamp
-			const minutes = Math.floor(diff / 60000)
-			const hours = Math.floor(minutes / 60)
-			const days = Math.floor(hours / 24)
-
-			if (days > 0) {
-				return `${days} day${days > 1 ? "s" : ""} ago`
-			}
-			if (hours > 0) {
-				return `${hours} hour${hours > 1 ? "s" : ""} ago`
-			}
-			if (minutes > 0) {
-				return `${minutes} minute${minutes > 1 ? "s" : ""} ago`
-			}
-			return "just now"
-		})()
+		const agoText = dayjs(lastClineMessage?.ts ?? Date.now()).fromNow()
 
 		if (responseText) {
 			newUserContent.push({

src/core/task/Task.ts

@@ -431,6 +431,7 @@
 		"cheerio": "^1.0.0",
 		"chokidar": "^4.0.1",
 		"clone-deep": "^4.0.1",
+		"dayjs": "^1.11.13",
 		"default-shell": "^2.2.0",
 		"delay": "^6.0.0",
 		"diff": "^5.2.0",

src/package.json

@@ -39,6 +39,7 @@
 		"clsx": "^2.1.1",
 		"cmdk": "^1.0.0",
 		"date-fns": "^4.1.0",
+		"dayjs": "^1.11.13",
 		"debounce": "^2.1.1",
 		"fast-deep-equal": "^3.1.3",
 		"fzf": "^0.5.2",

webview-ui/package.json

@@ -1,6 +1,6 @@
 import React from "react"
 import type { HistoryItem } from "@roo-code/types"
-import { formatTimeAgo } from "@/utils/format"
+import { formatDate, formatTimeAgo } from "@/utils/format"
 import { CopyButton } from "./CopyButton"
 import { ExportButton } from "./ExportButton"
 import { DeleteButton } from "./DeleteButton"
@@ -17,20 +17,18 @@ const TaskItemFooter: React.FC<TaskItemFooterProps> = ({ item, variant, isSelect
 	return (
 		<div className="text-xs text-vscode-descriptionForeground flex justify-between items-center">
 			<div className="flex gap-2 items-center text-vscode-descriptionForeground/60">
-				{/* Datetime with time-ago format */}
-				<StandardTooltip content={new Date(item.ts).toLocaleString()}>
-					<span className="capitalize">{formatTimeAgo(item.ts)}</span>
+				<StandardTooltip content={formatDate(item.ts)}>
+					<span>{formatTimeAgo(item.ts)}</span>
 				</StandardTooltip>
 				<span>·</span>
-				{/* Cost */}
+
 				{!!item.totalCost && (
 					<span className="flex items-center" data-testid="cost-footer-compact">
 						{"$" + item.totalCost.toFixed(2)}
 					</span>
 				)}
 			</div>
 
-			{/* Action Buttons for non-compact view */}
 			{!isSelectionMode && (
 				<div className="flex flex-row gap-0 items-center text-vscode-descriptionForeground/60 hover:text-vscode-descriptionForeground">
 					<CopyButton itemTask={item.task} />

webview-ui/src/components/history/TaskItemFooter.tsx

@@ -67,21 +67,5 @@
 		"editMessage": "Edit Message",
 		"editWarning": "Editing this message will delete all subsequent messages in the conversation. Do you want to proceed?",
 		"proceed": "Proceed"
-	},
-	"time_ago": {
-		"just_now": "just now",
-		"seconds_ago": "{{count}} seconds ago",
-		"minute_ago": "a minute ago",
-		"minutes_ago": "{{count}} minutes ago",
-		"hour_ago": "an hour ago",
-		"hours_ago": "{{count}} hours ago",
-		"day_ago": "a day ago",
-		"days_ago": "{{count}} days ago",
-		"week_ago": "a week ago",
-		"weeks_ago": "{{count}} weeks ago",
-		"month_ago": "a month ago",
-		"months_ago": "{{count}} months ago",
-		"year_ago": "a year ago",
-		"years_ago": "{{count}} years ago"
 	}
 }