From 08a04282dd7e13d6497b1d2bee3830b2673a1219 Mon Sep 17 00:00:00 2001
From: Yumechi <yume@yumechi.jp>
Date: Thu, 1 Jan 2026 10:12:45 +0800
Subject: [PATCH 1/2] fix: always use English for TimeAgo

---
 ui/src/common/LastUsedCell.tsx    | 3 ++-
 ui/src/common/TimeAgoConfig.ts    | 7 +++++++
 ui/src/message/Message.tsx        | 6 +++---
 ui/src/typedef/react-timeago.d.ts | 1 +
 4 files changed, 13 insertions(+), 4 deletions(-)
 create mode 100644 ui/src/common/TimeAgoConfig.ts

diff --git a/ui/src/common/LastUsedCell.tsx b/ui/src/common/LastUsedCell.tsx
index 45d21999..0bbfc44a 100644
--- a/ui/src/common/LastUsedCell.tsx
+++ b/ui/src/common/LastUsedCell.tsx
@@ -1,6 +1,7 @@
 import {Typography} from '@mui/material';
 import React from 'react';
 import TimeAgo from 'react-timeago';
+import {TimeAgoFormatter} from './TimeAgoConfig';
 
 export const LastUsedCell: React.FC<{lastUsed: string | null}> = ({lastUsed}) => {
     if (lastUsed === null) {
@@ -11,5 +12,5 @@ export const LastUsedCell: React.FC<{lastUsed: string | null}> = ({lastUsed}) =>
         return <Typography title={lastUsed}>Recently</Typography>;
     }
 
-    return <TimeAgo date={lastUsed} />;
+    return <TimeAgo date={lastUsed} formatter={TimeAgoFormatter.get('long')} />;
 };
diff --git a/ui/src/common/TimeAgoConfig.ts b/ui/src/common/TimeAgoConfig.ts
new file mode 100644
index 00000000..0356258d
--- /dev/null
+++ b/ui/src/common/TimeAgoConfig.ts
@@ -0,0 +1,7 @@
+import {Formatter} from 'react-timeago';
+import {makeIntlFormatter} from 'react-timeago/defaultFormatter';
+
+export const TimeAgoFormatter: Map<'long' | 'narrow', Formatter> = new Map([
+    ['long', makeIntlFormatter({style: 'long', locale: 'en'})],
+    ['narrow', makeIntlFormatter({style: 'narrow', locale: 'en'})],
+]);
diff --git a/ui/src/message/Message.tsx b/ui/src/message/Message.tsx
index e6e6af30..44535bce 100644
--- a/ui/src/message/Message.tsx
+++ b/ui/src/message/Message.tsx
@@ -11,7 +11,7 @@ import {Markdown} from '../common/Markdown';
 import * as config from '../config';
 import {IMessageExtras} from '../types';
 import {contentType, RenderMode} from './extras';
-import {makeIntlFormatter} from 'react-timeago/defaultFormatter';
+import {TimeAgoFormatter} from '../common/TimeAgoConfig';
 
 const PREVIEW_LENGTH = 500;
 
@@ -248,7 +248,7 @@ const HeaderWide = ({
                 </Typography>
             </div>
             <Typography variant="body1" className={classes.date}>
-                <TimeAgo date={date} formatter={makeIntlFormatter({style: 'narrow'})} />
+                <TimeAgo date={date} formatter={TimeAgoFormatter.get('narrow')} />
             </Typography>
             <IconButton
                 onClick={fDelete}
@@ -279,7 +279,7 @@ const HeaderSmall = ({
                     {appName}
                 </Typography>
                 <Typography variant="body1" className={classes.date}>
-                    <TimeAgo date={date} formatter={makeIntlFormatter({style: 'long'})} />
+                    <TimeAgo date={date} formatter={TimeAgoFormatter.get('long')} />
                 </Typography>
             </div>
             <div style={{display: 'flex', alignItems: 'end', flexDirection: 'column'}}>
diff --git a/ui/src/typedef/react-timeago.d.ts b/ui/src/typedef/react-timeago.d.ts
index bd7acf80..f3c0e8d9 100644
--- a/ui/src/typedef/react-timeago.d.ts
+++ b/ui/src/typedef/react-timeago.d.ts
@@ -3,6 +3,7 @@ declare module 'react-timeago' {
 
     export type FormatterOptions = {
         style?: 'long' | 'short' | 'narrow';
+        locale?: void | string;
     };
     export type Formatter = (options: FormatterOptions) => React.ReactNode;
 

From fa4d50e6e299b598fbf0711a37134253af9bcf52 Mon Sep 17 00:00:00 2001
From: Yumechi <yume@yumechi.jp>
Date: Thu, 1 Jan 2026 23:04:52 +0800
Subject: [PATCH 2/2] apply suggestions

---
 ui/src/common/LastUsedCell.tsx    | 4 ++--
 ui/src/common/TimeAgoConfig.ts    | 7 -------
 ui/src/common/TimeAgoFormatter.ts | 7 +++++++
 ui/src/message/Message.tsx        | 6 +++---
 ui/src/typedef/react-timeago.d.ts | 2 +-
 5 files changed, 13 insertions(+), 13 deletions(-)
 delete mode 100644 ui/src/common/TimeAgoConfig.ts
 create mode 100644 ui/src/common/TimeAgoFormatter.ts

diff --git a/ui/src/common/LastUsedCell.tsx b/ui/src/common/LastUsedCell.tsx
index 0bbfc44a..9103bffa 100644
--- a/ui/src/common/LastUsedCell.tsx
+++ b/ui/src/common/LastUsedCell.tsx
@@ -1,7 +1,7 @@
 import {Typography} from '@mui/material';
 import React from 'react';
 import TimeAgo from 'react-timeago';
-import {TimeAgoFormatter} from './TimeAgoConfig';
+import {TimeAgoFormatter} from './TimeAgoFormatter';
 
 export const LastUsedCell: React.FC<{lastUsed: string | null}> = ({lastUsed}) => {
     if (lastUsed === null) {
@@ -12,5 +12,5 @@ export const LastUsedCell: React.FC<{lastUsed: string | null}> = ({lastUsed}) =>
         return <Typography title={lastUsed}>Recently</Typography>;
     }
 
-    return <TimeAgo date={lastUsed} formatter={TimeAgoFormatter.get('long')} />;
+    return <TimeAgo date={lastUsed} formatter={TimeAgoFormatter.long} />;
 };
diff --git a/ui/src/common/TimeAgoConfig.ts b/ui/src/common/TimeAgoConfig.ts
deleted file mode 100644
index 0356258d..00000000
--- a/ui/src/common/TimeAgoConfig.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {Formatter} from 'react-timeago';
-import {makeIntlFormatter} from 'react-timeago/defaultFormatter';
-
-export const TimeAgoFormatter: Map<'long' | 'narrow', Formatter> = new Map([
-    ['long', makeIntlFormatter({style: 'long', locale: 'en'})],
-    ['narrow', makeIntlFormatter({style: 'narrow', locale: 'en'})],
-]);
diff --git a/ui/src/common/TimeAgoFormatter.ts b/ui/src/common/TimeAgoFormatter.ts
new file mode 100644
index 00000000..cccc4934
--- /dev/null
+++ b/ui/src/common/TimeAgoFormatter.ts
@@ -0,0 +1,7 @@
+import {Formatter} from 'react-timeago';
+import {makeIntlFormatter} from 'react-timeago/defaultFormatter';
+
+export const TimeAgoFormatter: Record<'long' | 'narrow', Formatter> = {
+    long: makeIntlFormatter({style: 'long', locale: 'en'}),
+    narrow: makeIntlFormatter({style: 'narrow', locale: 'en'}),
+};
diff --git a/ui/src/message/Message.tsx b/ui/src/message/Message.tsx
index 44535bce..da036528 100644
--- a/ui/src/message/Message.tsx
+++ b/ui/src/message/Message.tsx
@@ -11,7 +11,7 @@ import {Markdown} from '../common/Markdown';
 import * as config from '../config';
 import {IMessageExtras} from '../types';
 import {contentType, RenderMode} from './extras';
-import {TimeAgoFormatter} from '../common/TimeAgoConfig';
+import {TimeAgoFormatter} from '../common/TimeAgoFormatter';
 
 const PREVIEW_LENGTH = 500;
 
@@ -248,7 +248,7 @@ const HeaderWide = ({
                 </Typography>
             </div>
             <Typography variant="body1" className={classes.date}>
-                <TimeAgo date={date} formatter={TimeAgoFormatter.get('narrow')} />
+                <TimeAgo date={date} formatter={TimeAgoFormatter.narrow} />
             </Typography>
             <IconButton
                 onClick={fDelete}
@@ -279,7 +279,7 @@ const HeaderSmall = ({
                     {appName}
                 </Typography>
                 <Typography variant="body1" className={classes.date}>
-                    <TimeAgo date={date} formatter={TimeAgoFormatter.get('long')} />
+                    <TimeAgo date={date} formatter={TimeAgoFormatter.long} />
                 </Typography>
             </div>
             <div style={{display: 'flex', alignItems: 'end', flexDirection: 'column'}}>
diff --git a/ui/src/typedef/react-timeago.d.ts b/ui/src/typedef/react-timeago.d.ts
index f3c0e8d9..d5d1c4f0 100644
--- a/ui/src/typedef/react-timeago.d.ts
+++ b/ui/src/typedef/react-timeago.d.ts
@@ -3,7 +3,7 @@ declare module 'react-timeago' {
 
     export type FormatterOptions = {
         style?: 'long' | 'short' | 'narrow';
-        locale?: void | string;
+        locale?: string;
     };
     export type Formatter = (options: FormatterOptions) => React.ReactNode;