@promptbook/cli 0.112.0-99 → 0.112.0

package/apps/agents-server/src/app/agents/[agentName]/chat/useAgentChatHistorySyncEffects.ts

@@ -22,13 +22,6 @@ const USER_CHAT_STREAM_RECONNECT_DELAY_MS = 1_500;
  */
 const DISCONNECTED_CHAT_REFRESH_INTERVAL_MS = 4_000;
 
-/**
- * Periodic sidebar/list refresh cadence while the active chat stream is healthy.
- *
- * @private function of useAgentChatHistoryClientState
- */
-const CHAT_LIST_REFRESH_INTERVAL_MS = 20_000;
-
 /**
  * Inputs required to register side effects for durable chat-history synchronization.
  *
@@ -504,7 +497,7 @@ function keepActiveChatStreamConnected(params: {
 }
 
 /**
- * Refreshes the selected chat periodically and on tab visibility/focus changes.
+ * Refreshes the selected chat on disconnect polling and on tab visibility/focus changes.
  *
  * @private function of useAgentChatHistoryClientState
  */
@@ -529,9 +522,6 @@ function registerActiveChatRefreshPolling(params: {
         return undefined;
     }
 
-    const pollIntervalMs = isActiveChatStreamConnected
-        ? CHAT_LIST_REFRESH_INTERVAL_MS
-        : DISCONNECTED_CHAT_REFRESH_INTERVAL_MS;
     const runRefresh = () => {
         if (typeof document !== 'undefined' && document.hidden) {
             return;
@@ -540,7 +530,9 @@ function registerActiveChatRefreshPolling(params: {
         void refreshActiveChat({ preserveDirtyDraft: true });
     };
 
-    const interval = window.setInterval(runRefresh, pollIntervalMs);
+    const interval = isActiveChatStreamConnected
+        ? null
+        : window.setInterval(runRefresh, DISCONNECTED_CHAT_REFRESH_INTERVAL_MS);
     const handleVisibilityChange = () => {
         if (typeof document !== 'undefined' && !document.hidden) {
             runRefresh();
@@ -554,7 +546,9 @@ function registerActiveChatRefreshPolling(params: {
     window.addEventListener('focus', handleFocus);
 
     return () => {
-        window.clearInterval(interval);
+        if (interval !== null) {
+            window.clearInterval(interval);
+        }
         document.removeEventListener('visibilitychange', handleVisibilityChange);
         window.removeEventListener('focus', handleFocus);
     };

package/apps/agents-server/src/app/agents/[agentName]/chat/useCanonicalAgentChatPanelState.ts

@@ -60,6 +60,23 @@ type CanonicalAgentChatFeedback = {
     url: string;
 };
 
+/**
+ * Knowledge source metadata passed from the remote agent profile into Chat participants.
+ *
+ * @private type of CanonicalAgentChatPanel
+ */
+type CanonicalAgentKnowledgeSource = {
+    /**
+     * Fetchable source URL.
+     */
+    readonly url: string;
+
+    /**
+     * Filename used by model citations.
+     */
+    readonly filename: string;
+};
+
 /**
  * Inputs required to orchestrate the canonical durable-chat panel state.
  *
@@ -109,6 +126,7 @@ export type CanonicalAgentChatPanelState = {
         readonly agentAvatarSrc: string | null;
         readonly agentAvatarVisualId: AvatarVisualId | null;
         readonly agentDisplayName: string;
+        readonly agentKnowledgeSources: ReadonlyArray<CanonicalAgentKnowledgeSource>;
         readonly elevenLabsVoiceId: string | undefined;
         readonly initialMessage: string | undefined;
         readonly isSpeechPlaybackEnabled: boolean;
@@ -343,6 +361,7 @@ export function useCanonicalAgentChatPanelState(
     });
 
     const agentDisplayName = useMemo(() => resolveAgentDisplayName(agent, agentName), [agent, agentName]);
+    const agentKnowledgeSources = useMemo(() => resolveAgentKnowledgeSources(agent), [agent]);
     const resolvedAgentAvatar = useMemo(
         () => resolveResolvedAgentAvatar(agent, agentName, agentUrl),
         [agent, agentName, agentUrl],
@@ -400,11 +419,11 @@ export function useCanonicalAgentChatPanelState(
 
     return {
         surface: {
-            agentAvatarDefinition:
-                resolvedAgentAvatar?.type === 'visual' ? resolvedAgentAvatar.avatarDefinition : null,
+            agentAvatarDefinition: resolvedAgentAvatar?.type === 'visual' ? resolvedAgentAvatar.avatarDefinition : null,
             agentAvatarSrc: resolvedAgentAvatar?.type === 'image' ? resolvedAgentAvatar.imageUrl : null,
             agentAvatarVisualId: resolvedAgentAvatar?.type === 'visual' ? resolvedAgentAvatar.visualId : null,
             agentDisplayName,
+            agentKnowledgeSources,
             elevenLabsVoiceId: agent?.meta.voice,
             initialMessage,
             isSpeechPlaybackEnabled: agent?.isVoiceTtsSttEnabled ?? false,
@@ -658,15 +677,47 @@ function resolveAgentDisplayName(agent: RemoteAgent | null | undefined, agentNam
 }
 
 /**
- * Resolves the avatar shown for the agent participant in the chat thread.
+ * Resolves valid knowledge sources exposed by the remote agent profile.
+ *
+ * @param agent - Connected remote agent.
+ * @returns Knowledge sources usable by the shared Chat citation URL resolver.
  *
  * @private function of CanonicalAgentChatPanel
  */
-function resolveResolvedAgentAvatar(
+function resolveAgentKnowledgeSources(
     agent: RemoteAgent | null | undefined,
-    agentName: string,
-    agentUrl: string,
-) {
+): ReadonlyArray<CanonicalAgentKnowledgeSource> {
+    const knowledgeSources = (agent as { knowledgeSources?: unknown } | null | undefined)?.knowledgeSources;
+    if (!Array.isArray(knowledgeSources)) {
+        return [];
+    }
+
+    return knowledgeSources.filter(isCanonicalAgentKnowledgeSource);
+}
+
+/**
+ * Checks whether one remote profile value is a usable knowledge source.
+ *
+ * @param value - Candidate knowledge source.
+ * @returns True when the candidate has URL and filename strings.
+ *
+ * @private function of CanonicalAgentChatPanel
+ */
+function isCanonicalAgentKnowledgeSource(value: unknown): value is CanonicalAgentKnowledgeSource {
+    return (
+        typeof value === 'object' &&
+        value !== null &&
+        typeof (value as CanonicalAgentKnowledgeSource).url === 'string' &&
+        typeof (value as CanonicalAgentKnowledgeSource).filename === 'string'
+    );
+}
+
+/**
+ * Resolves the avatar shown for the agent participant in the chat thread.
+ *
+ * @private function of CanonicalAgentChatPanel
+ */
+function resolveResolvedAgentAvatar(agent: RemoteAgent | null | undefined, agentName: string, agentUrl: string) {
     return resolveAgentAvatar({
         agent: {
             agentName: agent?.agentName || agentName,

package/apps/agents-server/src/app/agents/[agentName]/history/page.tsx

@@ -3,6 +3,8 @@ import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentColle
 import { formatAgentNamingText } from '@/src/utils/agentNaming';
 import { getCurrentUser } from '@/src/utils/getCurrentUser';
 import { getAgentNaming } from '@/src/utils/getAgentNaming';
+import { formatServerLanguageHumanReadableDate } from '@/src/utils/localization/formatServerLanguageHumanReadableDate';
+import { getRequestServerLanguage } from '@/src/utils/localization/getRequestServerLanguage';
 import { HistoryIcon } from 'lucide-react';
 import { RestoreVersionButton } from './RestoreVersionButton';
 import { enforceCanonicalLocalAgentId, getAgentName } from '../_utils';
@@ -39,6 +41,7 @@ export default async function AgentHistoryPage({ params }: { params: Promise<{ a
     const collection = await $provideAgentCollectionForServer();
     const history = await collection.listAgentHistory(agentName);
     const agentNaming = await getAgentNaming();
+    const language = await getRequestServerLanguage();
 
     return (
         <div className="container mx-auto p-6 max-w-4xl">
@@ -69,7 +72,9 @@ export default async function AgentHistoryPage({ params }: { params: Promise<{ a
                                 <div className="flex justify-between items-start mb-2">
                                     <div>
                                         <time className="block mb-1 text-sm font-normal leading-none text-gray-400">
-                                            {new Date(item.createdAt).toLocaleString()}
+                                            {formatServerLanguageHumanReadableDate(item.createdAt, language, {
+                                                isExactDateIncluded: true,
+                                            })}
                                         </time>
                                         <h3 className="text-lg font-semibold text-gray-900">
                                             {item.versionName || `Version ${history.length - index}`}

package/apps/agents-server/src/app/agents/[agentName]/images/default-avatar.png/route.ts

@@ -4,8 +4,9 @@ import {
     resolveDefaultAgentAvatarVisualId,
 } from '@/src/constants/defaultAgentAvatarVisual';
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
-import { $provideCdnForServer } from '@/src/tools/$provideCdnForServer';
+import { $provideCdnForServer, resolveCdnPublicUrlForServer } from '@/src/tools/$provideCdnForServer';
 import { $provideExecutionToolsForServer } from '@/src/tools/$provideExecutionToolsForServer';
+import { $provideServer } from '@/src/tools/$provideServer';
 import { $provideAgentReferenceResolver } from '@/src/utils/agentReferenceResolver/$provideAgentReferenceResolver';
 import { resolveServerAgentContext } from '@/src/utils/resolveServerAgentContext';
 import { computeHash, serializeError } from '@promptbook-local/utils';
@@ -71,6 +72,7 @@ async function renderGeneratedDefaultAvatar(
     agentProfile: Awaited<ReturnType<typeof resolveAgentProfileForDefaultAvatar>>,
 ) {
     const prompt = getAgentDefaultAvatarPrompt(agentProfile);
+    const providedServer = await $provideServer();
 
     // Use hash of the prompt as cache key - this ensures regeneration when prompt changes
     const promptHash = computeHash(prompt);
@@ -112,7 +114,9 @@ async function renderGeneratedDefaultAvatar(
 
             const imageBuffer = await imageResponse.arrayBuffer();
             const buffer = Buffer.from(imageBuffer);
-            const cdn = $provideCdnForServer();
+            const cdn = $provideCdnForServer({
+                cdnPublicUrl: resolveCdnPublicUrlForServer(providedServer.publicUrl),
+            });
             const cdnKey = getGeneratedImageCdnKey({
                 filename: internalFilename,
                 pathPrefix: cdn.pathPrefix,

package/apps/agents-server/src/app/agents/[agentName]/integration/CalendarIntegrationSection.tsx

@@ -1,7 +1,10 @@
 'use client';
 
 import { showConfirm } from '@/src/components/AsyncDialogs/asyncDialogs';
+import { useServerLanguage } from '@/src/components/ServerLanguage/ServerLanguageProvider';
+import type { ServerLanguageCode } from '@/src/languages/ServerLanguageRegistry';
 import { buildCalendarOAuthConnectUrl } from '@/src/utils/calendarOAuthClient';
+import { formatServerLanguageHumanReadableDate } from '@/src/utils/localization/formatServerLanguageHumanReadableDate';
 import { Calendar, Link2, RefreshCw, Unlink } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
@@ -71,6 +74,7 @@ type CalendarIntegrationSectionProps = {
  * Renders connected-calendar settings for one agent, including re-auth/disconnect and activity timeline.
  */
 export function CalendarIntegrationSection({ agentName, agentPermanentId }: CalendarIntegrationSectionProps) {
+    const { language } = useServerLanguage();
     const {
         activeConnections,
         disconnectConnection,
@@ -124,7 +128,7 @@ export function CalendarIntegrationSection({ agentName, agentPermanentId }: Cale
                         onDisconnect={(connection) => void disconnectConnection(connection)}
                     />
 
-                    <CalendarActivitySection activity={payload?.activity || []} />
+                    <CalendarActivitySection activity={payload?.activity || []} language={language} />
                 </>
             )}
         </div>
@@ -497,7 +501,13 @@ function CalendarConnectionCard({
 /**
  * Renders the recent calendar activity section.
  */
-function CalendarActivitySection({ activity }: { activity: ReadonlyArray<CalendarActivityItem> }) {
+function CalendarActivitySection({
+    activity,
+    language,
+}: {
+    activity: ReadonlyArray<CalendarActivityItem>;
+    language: ServerLanguageCode;
+}) {
     return (
         <div className="mt-6 space-y-3">
             <h3 className="text-sm font-semibold uppercase tracking-wide text-gray-700">Recent activity</h3>
@@ -506,7 +516,7 @@ function CalendarActivitySection({ activity }: { activity: ReadonlyArray<Calenda
             ) : (
                 <div className="space-y-2">
                     {activity.map((item) => (
-                        <CalendarActivityCard key={item.id} activity={item} />
+                        <CalendarActivityCard key={item.id} activity={item} language={language} />
                     ))}
                 </div>
             )}
@@ -517,7 +527,13 @@ function CalendarActivitySection({ activity }: { activity: ReadonlyArray<Calenda
 /**
  * Renders one recent calendar activity row.
  */
-function CalendarActivityCard({ activity }: { activity: CalendarActivityItem }) {
+function CalendarActivityCard({
+    activity,
+    language,
+}: {
+    activity: CalendarActivityItem;
+    language: ServerLanguageCode;
+}) {
     return (
         <div className="rounded-lg border border-blue-100 bg-white/90 px-3 py-2">
             <div className="flex flex-wrap items-center gap-2 text-xs">
@@ -529,7 +545,9 @@ function CalendarActivityCard({ activity }: { activity: CalendarActivityItem })
                 >
                     {activity.status}
                 </span>
-                <span className="text-gray-500">{new Date(activity.createdAt).toLocaleString()}</span>
+                <span className="text-gray-500">
+                    {formatServerLanguageHumanReadableDate(activity.createdAt, language)}
+                </span>
             </div>
             {activity.calendarUrl && (
                 <p className="mt-1 text-[11px] text-gray-600 break-all font-mono">{activity.calendarUrl}</p>

package/apps/agents-server/src/app/agents/[agentName]/layout.tsx

@@ -1,7 +1,11 @@
 'use server';
 
 import type { Metadata } from 'next';
+import { resolveAgentRouteTarget } from '../../../utils/agentRouting/resolveAgentRouteTarget';
+import { ActiveAgentBreadcrumbBinder } from './ActiveAgentBreadcrumbBinder';
+import { getAgentName, getAgentProfile } from './_utils';
 import { generateAgentMetadata } from './generateAgentMetadata';
+import type { ActiveAgentBreadcrumbInfo } from '../../../components/Header/ActiveAgentBreadcrumbContext';
 
 /**
  * Generates shared branded metadata for all pages under `/agents/[agentName]`.
@@ -13,13 +17,55 @@ export async function generateMetadata({ params }: { params: Promise<{ agentName
     return generateAgentMetadata({ params });
 }
 
+/**
+ * Resolves the breadcrumb info for the route's active agent so the Header can show its name
+ * instead of falling back to the URL identifier. Failures are swallowed because the layout
+ * must keep rendering even when the agent cannot be resolved (the page will handle the error).
+ *
+ * @param rawAgentIdentifier - Decoded route parameter for the active agent.
+ * @returns Breadcrumb info for the active agent or `null` when unavailable.
+ *
+ * @private function of agent routes
+ */
+async function tryResolveActiveAgentBreadcrumbInfo(
+    rawAgentIdentifier: string,
+): Promise<ActiveAgentBreadcrumbInfo | null> {
+    try {
+        const routeTarget = await resolveAgentRouteTarget(rawAgentIdentifier);
+        if (!routeTarget || routeTarget.kind !== 'local') {
+            return null;
+        }
+
+        const agentProfile = await getAgentProfile(routeTarget.canonicalAgentId);
+
+        return {
+            agentName: agentProfile.agentName,
+            agentHash: agentProfile.agentHash,
+            permanentId: agentProfile.permanentId,
+            meta: agentProfile.meta,
+        };
+    } catch {
+        return null;
+    }
+}
+
 /**
  * Shared route layout for all pages under `/agents/[agentName]`.
  */
 export default async function AgentLayout({
     children,
+    params,
 }: Readonly<{
     children: React.ReactNode;
+    params: Promise<{ agentName: string }>;
 }>) {
-    return <>{children}</>;
+    const rawAgentIdentifier = await getAgentName(params);
+    const activeAgentBreadcrumbInfo = await tryResolveActiveAgentBreadcrumbInfo(rawAgentIdentifier);
+
+    return (
+        <>
+            {activeAgentBreadcrumbInfo && <ActiveAgentBreadcrumbBinder agent={activeAgentBreadcrumbInfo} />}
+            {children}
+        </>
+    );
 }

package/apps/agents-server/src/app/agents/[agentName]/timeouts/AgentTimeoutsClient.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useServerLanguage } from '@/src/components/ServerLanguage/ServerLanguageProvider';
 import { AgentTimeoutsEditDialog } from './AgentTimeoutsEditDialog';
 import { AgentTimeoutsFiltersCard } from './AgentTimeoutsFiltersCard';
 import { AgentTimeoutsHeader } from './AgentTimeoutsHeader';
@@ -20,13 +21,14 @@ type AgentTimeoutsClientProps = {
  * @private route component of AgentTimeoutsPage
  */
 export function AgentTimeoutsClient({ agentName }: AgentTimeoutsClientProps) {
+    const { language } = useServerLanguage();
     const state = useAgentTimeoutsClientState({ agentName });
 
     return (
         <div className="container mx-auto mt-20 space-y-6 px-4 py-8">
             <AgentTimeoutsHeader state={state} />
             <AgentTimeoutsSummaryMetrics state={state} />
-            <AgentTimeoutsFiltersCard state={state} />
+            <AgentTimeoutsFiltersCard language={language} state={state} />
 
             {state.errorMessage ? (
                 <div className="rounded-2xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">
@@ -34,7 +36,7 @@ export function AgentTimeoutsClient({ agentName }: AgentTimeoutsClientProps) {
                 </div>
             ) : null}
 
-            <AgentTimeoutsTableCard agentName={agentName} state={state} />
+            <AgentTimeoutsTableCard agentName={agentName} language={language} state={state} />
             <AgentTimeoutsEditDialog state={state} />
         </div>
     );

package/apps/agents-server/src/app/agents/[agentName]/timeouts/AgentTimeoutsFiltersCard.tsx

@@ -1,3 +1,5 @@
+import type { ServerLanguageCode } from '@/src/languages/ServerLanguageRegistry';
+import { formatServerLanguageHumanReadableDate } from '@/src/utils/localization/formatServerLanguageHumanReadableDate';
 import type { useAgentTimeoutsClientState } from './useAgentTimeoutsClientState';
 
 /**
@@ -6,6 +8,7 @@ import type { useAgentTimeoutsClientState } from './useAgentTimeoutsClientState'
  * @private function of AgentTimeoutsClient
  */
 type AgentTimeoutsFiltersCardProps = {
+    language: ServerLanguageCode;
     state: ReturnType<typeof useAgentTimeoutsClientState>;
 };
 
@@ -36,8 +39,10 @@ const TIMEOUT_MANAGER_FILTER_OPTIONS: ReadonlyArray<TimeoutManagerFilterOption>
  *
  * @private function of AgentTimeoutsFiltersCard
  */
-function resolveLastRefreshedLabel(generatedAt: string | null): string {
-    return generatedAt ? `Last refreshed ${new Date(generatedAt).toLocaleString()}` : 'Waiting for first refresh...';
+function resolveLastRefreshedLabel(generatedAt: string | null, language: ServerLanguageCode): string {
+    return generatedAt
+        ? `Last refreshed ${formatServerLanguageHumanReadableDate(generatedAt, language)}`
+        : 'Waiting for first refresh...';
 }
 
 /**
@@ -45,7 +50,7 @@ function resolveLastRefreshedLabel(generatedAt: string | null): string {
  *
  * @private function of AgentTimeoutsClient
  */
-export function AgentTimeoutsFiltersCard({ state }: AgentTimeoutsFiltersCardProps) {
+export function AgentTimeoutsFiltersCard({ language, state }: AgentTimeoutsFiltersCardProps) {
     return (
         <div className="rounded-2xl border border-gray-200 bg-white p-4 shadow-sm">
             <div className="flex flex-wrap gap-2">
@@ -64,7 +69,7 @@ export function AgentTimeoutsFiltersCard({ state }: AgentTimeoutsFiltersCardProp
                     </button>
                 ))}
             </div>
-            <div className="mt-3 text-xs text-gray-500">{resolveLastRefreshedLabel(state.generatedAt)}</div>
+            <div className="mt-3 text-xs text-gray-500">{resolveLastRefreshedLabel(state.generatedAt, language)}</div>
         </div>
     );
 }

package/apps/agents-server/src/app/agents/[agentName]/timeouts/AgentTimeoutsTableCard.tsx

@@ -1,3 +1,4 @@
+import type { ServerLanguageCode } from '@/src/languages/ServerLanguageRegistry';
 import type { useAgentTimeoutsClientState } from './useAgentTimeoutsClientState';
 import { AgentTimeoutsTableRow } from './AgentTimeoutsTableRow';
 
@@ -8,6 +9,7 @@ import { AgentTimeoutsTableRow } from './AgentTimeoutsTableRow';
  */
 type AgentTimeoutsTableCardProps = {
     agentName: string;
+    language: ServerLanguageCode;
     state: ReturnType<typeof useAgentTimeoutsClientState>;
 };
 
@@ -16,7 +18,7 @@ type AgentTimeoutsTableCardProps = {
  *
  * @private function of AgentTimeoutsClient
  */
-export function AgentTimeoutsTableCard({ agentName, state }: AgentTimeoutsTableCardProps) {
+export function AgentTimeoutsTableCard({ agentName, language, state }: AgentTimeoutsTableCardProps) {
     return (
         <div className="rounded-2xl border border-gray-200 bg-white shadow-sm">
             {state.isLoading ? (
@@ -42,6 +44,7 @@ export function AgentTimeoutsTableCard({ agentName, state }: AgentTimeoutsTableC
                                 <AgentTimeoutsTableRow
                                     key={timeout.timeoutId}
                                     agentName={agentName}
+                                    language={language}
                                     state={state}
                                     timeout={timeout}
                                 />

package/apps/agents-server/src/app/agents/[agentName]/timeouts/AgentTimeoutsTableRow.tsx

@@ -1,4 +1,6 @@
 import type { UserChatTimeout } from '@/src/utils/userChatClient';
+import type { ServerLanguageCode } from '@/src/languages/ServerLanguageRegistry';
+import { formatServerLanguageHumanReadableDate } from '@/src/utils/localization/formatServerLanguageHumanReadableDate';
 import Link from 'next/link';
 import type { useAgentTimeoutsClientState } from './useAgentTimeoutsClientState';
 
@@ -9,6 +11,7 @@ import type { useAgentTimeoutsClientState } from './useAgentTimeoutsClientState'
  */
 type AgentTimeoutsTableRowProps = {
     agentName: string;
+    language: ServerLanguageCode;
     state: ReturnType<typeof useAgentTimeoutsClientState>;
     timeout: UserChatTimeout;
 };
@@ -141,7 +144,7 @@ function truncateText(value: string, maxLength: number): string {
  *
  * @private function of AgentTimeoutsClient
  */
-export function AgentTimeoutsTableRow({ agentName, state, timeout }: AgentTimeoutsTableRowProps) {
+export function AgentTimeoutsTableRow({ agentName, language, state, timeout }: AgentTimeoutsTableRowProps) {
     const isBusy = state.busyTimeoutId === timeout.timeoutId;
     const isPaused = isTimeoutPaused(timeout);
     const isEditable = isTimeoutEditable(timeout);
@@ -152,7 +155,9 @@ export function AgentTimeoutsTableRow({ agentName, state, timeout }: AgentTimeou
         <tr>
             <td className="px-4 py-3 align-top">
                 <div className="font-mono text-[11px] font-semibold text-gray-900">{timeout.timeoutId}</div>
-                <div className="mt-1 text-[11px] text-gray-500">Updated {new Date(timeout.updatedAt).toLocaleString()}</div>
+                <div className="mt-1 text-[11px] text-gray-500">
+                    Updated {formatServerLanguageHumanReadableDate(timeout.updatedAt, language)}
+                </div>
             </td>
             <td className="px-4 py-3 align-top">
                 <Link
@@ -167,7 +172,9 @@ export function AgentTimeoutsTableRow({ agentName, state, timeout }: AgentTimeou
                     {statusPresentation.label}
                 </span>
             </td>
-            <td className="px-4 py-3 align-top">{new Date(timeout.dueAt).toLocaleString()}</td>
+            <td className="px-4 py-3 align-top">
+                {formatServerLanguageHumanReadableDate(timeout.dueAt, language, { isExactDateIncluded: true })}
+            </td>
             <td className="px-4 py-3 align-top">
                 {timeout.recurrenceIntervalMs ? `Every ${formatDuration(timeout.recurrenceIntervalMs)}` : 'One-shot'}
             </td>