@promptbook/cli 0.112.0-132 → 0.112.0-134

package/apps/agents-server/src/app/admin/api-tokens/ApiTokensClient.tsx

@@ -2,9 +2,11 @@
 
 import { Copy, Plus, Trash } from 'lucide-react';
 import { useEffect, useState } from 'react';
+import { useServerLanguage } from '../../../components/ServerLanguage/ServerLanguageProvider';
 import { SecretInput } from '../../../components/SecretInput/SecretInput';
 import { showConfirm } from '../../../components/AsyncDialogs/asyncDialogs';
 import { ApiTokenEntry, createApiToken, deleteApiToken, fetchApiTokens } from '../../../utils/apiTokensClient';
+import { formatServerLanguageHumanReadableDate } from '../../../utils/localization/formatServerLanguageHumanReadableDate';
 
 /**
  * Props for rendering a single API token in a masked input.
@@ -44,6 +46,7 @@ function TokenSecretField({ token, onCopy }: TokenSecretFieldProps) {
  * Renders the admin API token management UI.
  */
 export function ApiTokensClient() {
+    const { language } = useServerLanguage();
     const [tokens, setTokens] = useState<ApiTokenEntry[]>([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
@@ -182,7 +185,7 @@ export function ApiTokensClient() {
                                     </td>
                                     <td className="px-6 py-4 text-sm text-gray-500">{entry.note || '-'}</td>
                                     <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                                        {new Date(entry.createdAt).toLocaleDateString()}
+                                        {formatServerLanguageHumanReadableDate(entry.createdAt, language)}
                                     </td>
                                     <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                         <button

package/apps/agents-server/src/app/admin/chat-feedback/ChatFeedbackClient.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useAgentNaming } from '../../../components/AgentNaming/AgentNamingContext';
+import { useServerLanguage } from '../../../components/ServerLanguage/ServerLanguageProvider';
 import { ChatFeedbackFiltersCard } from './ChatFeedbackFiltersCard';
 import { ChatFeedbackTable } from './ChatFeedbackTable';
 import { ChatFeedbackThreadDialog } from './ChatFeedbackThreadDialog';
@@ -21,6 +22,7 @@ type ChatFeedbackClientProps = {
  */
 export function ChatFeedbackClient({ initialAgentName }: ChatFeedbackClientProps) {
     const { formatText } = useAgentNaming();
+    const { language } = useServerLanguage();
     const chatFeedbackState = useChatFeedbackState({ initialAgentName, formatText });
 
     return (
@@ -68,6 +70,7 @@ export function ChatFeedbackClient({ initialAgentName }: ChatFeedbackClientProps
 
             <ChatFeedbackTable
                 formatText={formatText}
+                language={language}
                 items={chatFeedbackState.items}
                 total={chatFeedbackState.total}
                 loading={chatFeedbackState.loading}

package/apps/agents-server/src/app/admin/chat-feedback/ChatFeedbackTable.tsx

@@ -1,4 +1,6 @@
 import { Card } from '../../../components/Homepage/Card';
+import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
+import { formatServerLanguageHumanReadableDate } from '../../../utils/localization/formatServerLanguageHumanReadableDate';
 import type { UseChatFeedbackState } from './useChatFeedbackState';
 
 /**
@@ -25,18 +27,18 @@ type ChatFeedbackTableProps = Pick<
      * Active text formatter for agent naming.
      */
     formatText: (text: string) => string;
+
+    /**
+     * Active UI language used for date formatting.
+     */
+    language: ServerLanguageCode;
 };
 
 /**
  * Formats date.
  */
-function formatDate(dateString: string | null | undefined): string {
-    if (!dateString) return '-';
-
-    const date = new Date(dateString);
-    if (Number.isNaN(date.getTime())) return dateString;
-
-    return date.toLocaleString();
+function formatDate(dateString: string | null | undefined, language: ServerLanguageCode): string {
+    return formatServerLanguageHumanReadableDate(dateString, language, { fallbackLabel: '-' });
 }
 
 /**
@@ -71,6 +73,7 @@ function ChatFeedbackPreviewCell({ value }: { value: unknown }) {
  */
 export function ChatFeedbackTable({
     formatText,
+    language,
     items,
     total,
     loading,
@@ -136,7 +139,9 @@ export function ChatFeedbackTable({
                         <tbody className="divide-y divide-gray-200 bg-white">
                             {items.map((row) => (
                                 <tr key={row.id}>
-                                    <td className="whitespace-nowrap px-4 py-3 text-gray-700">{formatDate(row.createdAt)}</td>
+                                    <td className="whitespace-nowrap px-4 py-3 text-gray-700">
+                                        {formatDate(row.createdAt, language)}
+                                    </td>
                                     <td className="whitespace-nowrap px-4 py-3 text-gray-700">{row.agentName}</td>
                                     <td className="whitespace-nowrap px-4 py-3 text-gray-700">{row.rating || '-'}</td>
                                     <td className="max-w-xs px-4 py-3 text-gray-700">

package/apps/agents-server/src/app/admin/chat-history/ChatHistoryClient.tsx

@@ -2,6 +2,7 @@
 
 import { MockedChat } from '@promptbook-local/components';
 import { useAgentNaming } from '../../../components/AgentNaming/AgentNamingContext';
+import { useServerLanguage } from '../../../components/ServerLanguage/ServerLanguageProvider';
 import { ChatHistoryFiltersCard } from './ChatHistoryFiltersCard';
 import { ChatHistoryPagination } from './ChatHistoryPagination';
 import { ChatHistoryTable } from './ChatHistoryTable';
@@ -22,6 +23,7 @@ type ChatHistoryClientProps = {
  */
 export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps) {
     const { formatText } = useAgentNaming();
+    const { language } = useServerLanguage();
     const chatHistoryState = useChatHistoryState({ initialAgentName, formatText });
 
     return (
@@ -116,6 +118,7 @@ export function ChatHistoryClient({ initialAgentName }: ChatHistoryClientProps)
             ) : (
                 <ChatHistoryTable
                     formatText={formatText}
+                    language={language}
                     items={chatHistoryState.items}
                     total={chatHistoryState.total}
                     loading={chatHistoryState.loading}

package/apps/agents-server/src/app/admin/chat-history/ChatHistoryTable.tsx

@@ -1,4 +1,6 @@
 import { Card } from '../../../components/Homepage/Card';
+import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
+import { formatServerLanguageHumanReadableDate } from '../../../utils/localization/formatServerLanguageHumanReadableDate';
 import { ChatHistoryPagination } from './ChatHistoryPagination';
 import type { UseChatHistoryState } from './useChatHistoryState';
 
@@ -25,18 +27,18 @@ type ChatHistoryTableProps = Pick<
      * Active text formatter for agent naming.
      */
     formatText: (text: string) => string;
+
+    /**
+     * Active UI language used for date formatting.
+     */
+    language: ServerLanguageCode;
 };
 
 /**
  * Formats date.
  */
-function formatDate(dateString: string | null | undefined): string {
-    if (!dateString) return '-';
-
-    const date = new Date(dateString);
-    if (Number.isNaN(date.getTime())) return dateString;
-
-    return date.toLocaleString();
+function formatDate(dateString: string | null | undefined, language: ServerLanguageCode): string {
+    return formatServerLanguageHumanReadableDate(dateString, language, { fallbackLabel: '-' });
 }
 
 /**
@@ -92,6 +94,7 @@ function ChatHistoryPreviewCell({ message }: { message: unknown }) {
  */
 export function ChatHistoryTable({
     formatText,
+    language,
     items,
     total,
     loading,
@@ -154,7 +157,9 @@ export function ChatHistoryTable({
                         <tbody className="divide-y divide-gray-200 bg-white">
                             {items.map((row) => (
                                 <tr key={row.id}>
-                                    <td className="whitespace-nowrap px-4 py-3 text-gray-700">{formatDate(row.createdAt)}</td>
+                                    <td className="whitespace-nowrap px-4 py-3 text-gray-700">
+                                        {formatDate(row.createdAt, language)}
+                                    </td>
                                     <td className="whitespace-nowrap px-4 py-3 text-gray-700">{row.agentName}</td>
                                     <td className="whitespace-nowrap px-4 py-3 text-gray-700">{getMessageRole(row.message)}</td>
                                     <td className="max-w-xs px-4 py-3 text-gray-700">

package/apps/agents-server/src/app/admin/custom-css/CustomCssClient.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useServerLanguage } from '../../../components/ServerLanguage/ServerLanguageProvider';
 import { CustomCssEditorPanel } from './CustomCssEditorPanel';
 import { CustomCssFilesPanel } from './CustomCssFilesPanel';
 import { CustomCssSelectorsPanel } from './CustomCssSelectorsPanel';
@@ -11,6 +12,7 @@ import { useCustomCssClientState } from './useCustomCssClientState';
  * @private route component of CustomCssPage
  */
 export function CustomCssClient() {
+    const { language } = useServerLanguage();
     const {
         addNewFile,
         currentFile,
@@ -60,6 +62,7 @@ export function CustomCssClient() {
                 <section className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
                     <div className="grid gap-4 lg:grid-cols-[260px_1fr]">
                         <CustomCssFilesPanel
+                            language={language}
                             files={files}
                             selectedFileLocalId={currentFile?.localId ?? ''}
                             onAddNewFile={addNewFile}
@@ -67,6 +70,7 @@ export function CustomCssClient() {
                         />
 
                         <CustomCssEditorPanel
+                            language={language}
                             currentFile={currentFile}
                             remainingCharacters={remainingCharacters}
                             maxLength={maxLength}

package/apps/agents-server/src/app/admin/custom-css/CustomCssEditorPanel.tsx

@@ -3,6 +3,8 @@
 import type { ChangeEvent } from 'react';
 import { MonacoEditorWithShadowDom } from '../../../components/_utils/MonacoEditorWithShadowDom';
 import { usePromptbookTheme } from '../../../components/ThemeMode/usePromptbookTheme';
+import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
+import { formatServerLanguageHumanReadableDate } from '../../../utils/localization/formatServerLanguageHumanReadableDate';
 import {
     CUSTOM_RESOURCE_INPUT_CLASS_NAME,
     CUSTOM_RESOURCE_PRIMARY_BUTTON_CLASS_NAME,
@@ -16,6 +18,7 @@ import type { CustomStylesheetFileState } from './CustomStylesheetFileState';
  * @private function of CustomCssClient
  */
 type CustomCssEditorPanelProps = {
+    readonly language: ServerLanguageCode;
     readonly currentFile: CustomStylesheetFileState | null;
     readonly remainingCharacters: number;
     readonly maxLength: number;
@@ -38,6 +41,7 @@ type CustomCssEditorPanelProps = {
  * @private function of CustomCssClient
  */
 export function CustomCssEditorPanel({
+    language,
     currentFile,
     remainingCharacters,
     maxLength,
@@ -60,7 +64,9 @@ export function CustomCssEditorPanel({
             <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
                 <h2 className="text-lg font-semibold text-gray-900 dark:text-slate-100">Stylesheet editor</h2>
                 {currentFile?.updatedAt && (
-                    <div className="text-xs text-gray-500 dark:text-slate-400">Last saved: {new Date(currentFile.updatedAt).toLocaleString()}</div>
+                    <div className="text-xs text-gray-500 dark:text-slate-400">
+                        Last saved: {formatServerLanguageHumanReadableDate(currentFile.updatedAt, language)}
+                    </div>
                 )}
             </div>
 

package/apps/agents-server/src/app/admin/custom-css/CustomCssFilesPanel.tsx

@@ -1,3 +1,5 @@
+import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
+import { formatServerLanguageHumanReadableDate } from '../../../utils/localization/formatServerLanguageHumanReadableDate';
 import type { CustomStylesheetFileState } from './CustomStylesheetFileState';
 
 /**
@@ -6,6 +8,7 @@ import type { CustomStylesheetFileState } from './CustomStylesheetFileState';
  * @private function of CustomCssClient
  */
 type CustomCssFilesPanelProps = {
+    readonly language: ServerLanguageCode;
     readonly files: ReadonlyArray<CustomStylesheetFileState>;
     readonly selectedFileLocalId: string;
     readonly onAddNewFile: () => void;
@@ -18,6 +21,7 @@ type CustomCssFilesPanelProps = {
  * @private function of CustomCssClient
  */
 export function CustomCssFilesPanel({
+    language,
     files,
     selectedFileLocalId,
     onAddNewFile,
@@ -59,7 +63,9 @@ export function CustomCssFilesPanel({
                         >
                             <div className="text-sm font-medium text-gray-900">{file.scope || 'Untitled stylesheet'}</div>
                             <div className="text-xs text-gray-500">
-                                {file.updatedAt ? `Saved ${new Date(file.updatedAt).toLocaleString()}` : 'Not saved yet'}
+                                {file.updatedAt
+                                    ? `Saved ${formatServerLanguageHumanReadableDate(file.updatedAt, language)}`
+                                    : 'Not saved yet'}
                             </div>
                         </button>
                     );

package/apps/agents-server/src/app/admin/custom-js/CustomJsClient.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useServerLanguage } from '../../../components/ServerLanguage/ServerLanguageProvider';
 import { CustomJsAnalyticsPanel } from './CustomJsAnalyticsPanel';
 import { CustomJsEditorPanel } from './CustomJsEditorPanel';
 import { CustomJsFilesPanel } from './CustomJsFilesPanel';
@@ -11,6 +12,7 @@ import { useCustomJsClientState } from './useCustomJsClientState';
  * @private route component of CustomJsPage
  */
 export function CustomJsClient() {
+    const { language } = useServerLanguage();
     const {
         addNewFile,
         analyticsHasChanges,
@@ -74,6 +76,7 @@ export function CustomJsClient() {
 
             <div className="grid gap-4 lg:grid-cols-[260px_1fr]">
                 <CustomJsFilesPanel
+                    language={language}
                     files={files}
                     selectedFileLocalId={currentFile?.localId ?? ''}
                     onAddNewFile={addNewFile}
@@ -81,6 +84,7 @@ export function CustomJsClient() {
                 />
 
                 <CustomJsEditorPanel
+                    language={language}
                     currentFile={currentFile}
                     remainingCharacters={remainingCharacters}
                     maxLength={maxLength}

package/apps/agents-server/src/app/admin/custom-js/CustomJsEditorPanel.tsx

@@ -3,6 +3,8 @@
 import type { ChangeEvent } from 'react';
 import { MonacoEditorWithShadowDom } from '../../../components/_utils/MonacoEditorWithShadowDom';
 import { usePromptbookTheme } from '../../../components/ThemeMode/usePromptbookTheme';
+import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
+import { formatServerLanguageHumanReadableDate } from '../../../utils/localization/formatServerLanguageHumanReadableDate';
 import {
     CUSTOM_RESOURCE_INPUT_CLASS_NAME,
     CUSTOM_RESOURCE_PRIMARY_BUTTON_CLASS_NAME,
@@ -16,6 +18,7 @@ import type { CustomJavascriptFileState } from './CustomJavascriptFileState';
  * @private function of CustomJsClient
  */
 type CustomJsEditorPanelProps = {
+    readonly language: ServerLanguageCode;
     readonly currentFile: CustomJavascriptFileState | null;
     readonly remainingCharacters: number;
     readonly maxLength: number;
@@ -38,6 +41,7 @@ type CustomJsEditorPanelProps = {
  * @private function of CustomJsClient
  */
 export function CustomJsEditorPanel({
+    language,
     currentFile,
     remainingCharacters,
     maxLength,
@@ -60,7 +64,9 @@ export function CustomJsEditorPanel({
             <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
                 <h2 className="text-lg font-semibold text-gray-900 dark:text-slate-100">Script editor</h2>
                 {currentFile?.updatedAt && (
-                    <div className="text-xs text-gray-500 dark:text-slate-400">Last saved: {new Date(currentFile.updatedAt).toLocaleString()}</div>
+                    <div className="text-xs text-gray-500 dark:text-slate-400">
+                        Last saved: {formatServerLanguageHumanReadableDate(currentFile.updatedAt, language)}
+                    </div>
                 )}
             </div>
 

package/apps/agents-server/src/app/admin/custom-js/CustomJsFilesPanel.tsx

@@ -1,3 +1,5 @@
+import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
+import { formatServerLanguageHumanReadableDate } from '../../../utils/localization/formatServerLanguageHumanReadableDate';
 import type { CustomJavascriptFileState } from './CustomJavascriptFileState';
 
 /**
@@ -6,6 +8,7 @@ import type { CustomJavascriptFileState } from './CustomJavascriptFileState';
  * @private function of CustomJsClient
  */
 type CustomJsFilesPanelProps = {
+    readonly language: ServerLanguageCode;
     readonly files: ReadonlyArray<CustomJavascriptFileState>;
     readonly selectedFileLocalId: string;
     readonly onAddNewFile: () => void;
@@ -18,6 +21,7 @@ type CustomJsFilesPanelProps = {
  * @private function of CustomJsClient
  */
 export function CustomJsFilesPanel({
+    language,
     files,
     selectedFileLocalId,
     onAddNewFile,
@@ -59,7 +63,9 @@ export function CustomJsFilesPanel({
                         >
                             <div className="text-sm font-medium text-gray-900">{file.scope || 'Untitled script'}</div>
                             <div className="text-xs text-gray-500">
-                                {file.updatedAt ? `Saved ${new Date(file.updatedAt).toLocaleString()}` : 'Not saved yet'}
+                                {file.updatedAt
+                                    ? `Saved ${formatServerLanguageHumanReadableDate(file.updatedAt, language)}`
+                                    : 'Not saved yet'}
                             </div>
                         </button>
                     );

package/apps/agents-server/src/app/admin/files/FilesGalleryClient.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useAgentNaming } from '../../../components/AgentNaming/AgentNamingContext';
+import { useServerLanguage } from '../../../components/ServerLanguage/ServerLanguageProvider';
 import { FilesGalleryGrid } from './FilesGalleryGrid';
 import { FilesGalleryTable } from './FilesGalleryTable';
 import { FilesGalleryViewModeToggle } from './FilesGalleryViewModeToggle';
@@ -11,6 +12,7 @@ import { useFilesGalleryState } from './useFilesGalleryState';
  */
 export function FilesGalleryClient() {
     const { formatText } = useAgentNaming();
+    const { language } = useServerLanguage();
     const filesGalleryState = useFilesGalleryState();
 
     return (
@@ -26,6 +28,7 @@ export function FilesGalleryClient() {
             {filesGalleryState.viewMode === 'TABLE' ? (
                 <FilesGalleryTable
                     formatText={formatText}
+                    language={language}
                     files={filesGalleryState.files}
                     total={filesGalleryState.total}
                     isLoading={filesGalleryState.isLoading}
@@ -36,6 +39,7 @@ export function FilesGalleryClient() {
             ) : (
                 <FilesGalleryGrid
                     formatText={formatText}
+                    language={language}
                     files={filesGalleryState.files}
                     isLoading={filesGalleryState.isLoading}
                     hasMore={filesGalleryState.hasMore}

package/apps/agents-server/src/app/admin/files/FilesGalleryGrid.tsx

@@ -1,6 +1,8 @@
 import { File, Loader2 } from 'lucide-react';
 import Link from 'next/link';
+import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
 import { buildAgentProfileHref } from '../../../utils/agentRouting/agentRouteHrefs';
+import { formatServerLanguageHumanReadableDate } from '../../../utils/localization/formatServerLanguageHumanReadableDate';
 import { FilesGalleryStatusBadge } from './FilesGalleryStatusBadge';
 import type { UseFilesGalleryState } from './useFilesGalleryState';
 
@@ -12,6 +14,11 @@ type FilesGalleryGridProps = Pick<UseFilesGalleryState, 'files' | 'isLoading' |
      * Active text formatter for agent naming.
      */
     readonly formatText: (text: string) => string;
+
+    /**
+     * Active UI language used for date formatting.
+     */
+    readonly language: ServerLanguageCode;
 };
 
 /**
@@ -21,16 +28,6 @@ function formatFilesGalleryCompactFileSize(fileSize: number): string {
     return `${(fileSize / 1024).toFixed(1)} KB`;
 }
 
-/**
- * Formats one created-at value for the compact grid view.
- */
-function formatFilesGalleryCompactCreatedAt(createdAt: string): string {
-    return new Date(createdAt).toLocaleDateString(undefined, {
-        month: 'short',
-        day: 'numeric',
-    });
-}
-
 /**
  * Renders the grid view of the files gallery, including infinite-scroll feedback.
  *
@@ -38,6 +35,7 @@ function formatFilesGalleryCompactCreatedAt(createdAt: string): string {
  */
 export function FilesGalleryGrid({
     formatText,
+    language,
     files,
     isLoading,
     hasMore,
@@ -82,7 +80,7 @@ export function FilesGalleryGrid({
                                     <span className="text-xs text-gray-400">{formatText('No agent')}</span>
                                 )}
                                 <span className="text-[10px] text-gray-400 whitespace-nowrap">
-                                    {formatFilesGalleryCompactCreatedAt(file.createdAt)}
+                                    {formatServerLanguageHumanReadableDate(file.createdAt, language)}
                                 </span>
                             </div>
                             <p className="text-xs text-gray-600 truncate" title={file.fileName}>

package/apps/agents-server/src/app/admin/files/FilesGalleryTable.tsx

@@ -1,6 +1,8 @@
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import Link from 'next/link';
+import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
 import { buildAgentProfileHref } from '../../../utils/agentRouting/agentRouteHrefs';
+import { formatServerLanguageHumanReadableDate } from '../../../utils/localization/formatServerLanguageHumanReadableDate';
 import { FilesGalleryStatusBadge } from './FilesGalleryStatusBadge';
 import type { UseFilesGalleryState } from './useFilesGalleryState';
 
@@ -15,6 +17,11 @@ type FilesGalleryTableProps = Pick<
      * Active text formatter for agent naming.
      */
     readonly formatText: (text: string) => string;
+
+    /**
+     * Active UI language used for date formatting.
+     */
+    readonly language: ServerLanguageCode;
 };
 
 /**
@@ -24,13 +31,6 @@ function formatFilesGalleryFileSize(fileSize: number): string {
     return `${(fileSize / 1024).toFixed(2)} KB`;
 }
 
-/**
- * Formats one created-at value for the table view.
- */
-function formatFilesGalleryCreatedAt(createdAt: string): string {
-    return new Date(createdAt).toLocaleString();
-}
-
 /**
  * Renders the table view of the files gallery, including pagination.
  *
@@ -38,6 +38,7 @@ function formatFilesGalleryCreatedAt(createdAt: string): string {
  */
 export function FilesGalleryTable({
     formatText,
+    language,
     files,
     total,
     isLoading,
@@ -105,7 +106,7 @@ export function FilesGalleryTable({
                                     <FilesGalleryStatusBadge status={file.status} />
                                 </td>
                                 <td className="px-6 py-4 whitespace-nowrap">
-                                    {formatFilesGalleryCreatedAt(file.createdAt)}
+                                    {formatServerLanguageHumanReadableDate(file.createdAt, language)}
                                 </td>
                             </tr>
                         ))}

package/apps/agents-server/src/app/admin/images/ImagesGalleryClient.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useAgentNaming } from '../../../components/AgentNaming/AgentNamingContext';
+import { useServerLanguage } from '../../../components/ServerLanguage/ServerLanguageProvider';
 import { ImagesGalleryGrid } from './ImagesGalleryGrid';
 import { ImagesGalleryTable } from './ImagesGalleryTable';
 import { ImagesGalleryViewModeToggle } from './ImagesGalleryViewModeToggle';
@@ -11,6 +12,7 @@ import { useImagesGalleryState } from './useImagesGalleryState';
  */
 export function ImagesGalleryClient() {
     const { formatText } = useAgentNaming();
+    const { language } = useServerLanguage();
     const imagesGalleryState = useImagesGalleryState();
 
     return (
@@ -26,6 +28,7 @@ export function ImagesGalleryClient() {
             {imagesGalleryState.viewMode === 'TABLE' ? (
                 <ImagesGalleryTable
                     formatText={formatText}
+                    language={language}
                     images={imagesGalleryState.images}
                     total={imagesGalleryState.total}
                     isLoading={imagesGalleryState.isLoading}
@@ -38,6 +41,7 @@ export function ImagesGalleryClient() {
             ) : (
                 <ImagesGalleryGrid
                     formatText={formatText}
+                    language={language}
                     images={imagesGalleryState.images}
                     isLoading={imagesGalleryState.isLoading}
                     hasMore={imagesGalleryState.hasMore}

package/apps/agents-server/src/app/admin/images/ImagesGalleryGrid.tsx

@@ -1,6 +1,8 @@
 import { Loader2 } from 'lucide-react';
 import Link from 'next/link';
+import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
 import { buildAgentProfileHref } from '../../../utils/agentRouting/agentRouteHrefs';
+import { formatServerLanguageHumanReadableDate } from '../../../utils/localization/formatServerLanguageHumanReadableDate';
 import type { ImageWithAgent } from './actions';
 import { ImagesGalleryParametersBadges } from './ImagesGalleryParametersBadges';
 import { ImagesGalleryPromptCopyButton } from './ImagesGalleryPromptCopyButton';
@@ -18,6 +20,11 @@ type ImagesGalleryGridProps = Pick<
      * Active text formatter for agent naming.
      */
     readonly formatText: (text: string) => string;
+
+    /**
+     * Active UI language used for date formatting.
+     */
+    readonly language: ServerLanguageCode;
 };
 
 /**
@@ -33,17 +40,12 @@ type ImagesGalleryGridCardProps = Pick<UseImagesGalleryState, 'copiedId' | 'hand
      * Active text formatter for agent naming.
      */
     readonly formatText: (text: string) => string;
-};
 
-/**
- * Formats one created-at value for the compact grid view.
- */
-function formatImagesGalleryCompactCreatedAt(createdAt: string): string {
-    return new Date(createdAt).toLocaleDateString(undefined, {
-        month: 'short',
-        day: 'numeric',
-    });
-}
+    /**
+     * Active UI language used for date formatting.
+     */
+    readonly language: ServerLanguageCode;
+};
 
 /**
  * Renders one image card inside the gallery grid.
@@ -51,6 +53,7 @@ function formatImagesGalleryCompactCreatedAt(createdAt: string): string {
 function ImagesGalleryGridCard({
     image,
     formatText,
+    language,
     copiedId,
     handlePromptCopy,
 }: ImagesGalleryGridCardProps) {
@@ -91,7 +94,7 @@ function ImagesGalleryGridCard({
                         <span className="text-xs text-gray-400">{formatText('No agent')}</span>
                     )}
                     <span className="text-[10px] text-gray-400 whitespace-nowrap">
-                        {formatImagesGalleryCompactCreatedAt(image.createdAt)}
+                        {formatServerLanguageHumanReadableDate(image.createdAt, language)}
                     </span>
                 </div>
                 <div className="relative group/prompt">
@@ -119,6 +122,7 @@ function ImagesGalleryGridCard({
  */
 export function ImagesGalleryGrid({
     formatText,
+    language,
     images,
     isLoading,
     hasMore,
@@ -134,6 +138,7 @@ export function ImagesGalleryGrid({
                         key={image.id}
                         image={image}
                         formatText={formatText}
+                        language={language}
                         copiedId={copiedId}
                         handlePromptCopy={handlePromptCopy}
                     />