@promptbook/cli 0.112.0-99 → 0.112.0

package/apps/agents-server/src/app/api/v1/agents/route.ts

@@ -4,6 +4,7 @@ import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentColle
 import { $provideServer } from '@/src/tools/$provideServer';
 import { findOwnedFolderById, findOwnedAgentByIdentifier } from '@/src/utils/agentOwnership';
 import { createAgentWithDefaultVisibility } from '@/src/utils/createAgentWithDefaultVisibility';
+import { invalidateCachedActiveOrganizationSnapshots } from '@/src/utils/agentOrganization/loadAgentOrganizationState';
 import {
     searchOwnedAgents,
     getNextOwnedAgentSortOrder,
@@ -141,6 +142,7 @@ export async function POST(request: NextRequest) {
             sortOrder,
             userId: identityResult.identity.userId,
         });
+        invalidateCachedActiveOrganizationSnapshots();
         const persistedRow = await findOwnedAgentByIdentifier(identityResult.identity.userId, createdAgent.permanentId);
 
         if (!persistedRow) {

package/apps/agents-server/src/app/dashboard/page.tsx

@@ -4,7 +4,6 @@
 export const dynamic = 'force-dynamic';
 
 import { getSingleLlmExecutionTools } from '@promptbook-local/core';
-import moment from 'moment';
 import { headers } from 'next/headers';
 import { AboutPromptbookInformation } from '../../../../../src/utils/misc/xAboutPromptbookInformation';
 import { HomepagePrimarySections } from '../../components/Homepage/HomepagePrimarySections';
@@ -17,21 +16,10 @@ import { getLongRunningTask } from '../../deamons/longRunningTask';
 import { $provideExecutionToolsForServer } from '../../tools/$provideExecutionToolsForServer';
 import { $provideServer } from '../../tools/$provideServer';
 import { isUserAdmin } from '../../utils/isUserAdmin';
+import { formatServerLanguageHumanReadableDate } from '../../utils/localization/formatServerLanguageHumanReadableDate';
+import { getRequestServerLanguage } from '../../utils/localization/getRequestServerLanguage';
 import { getHomePageAgents } from '../_data/getHomePageAgents';
 
-// Add calendar formats that include seconds
-/**
- * Map of calendar with seconds.
- */
-const calendarWithSeconds = {
-    sameDay: '[Today at] LTS',
-    nextDay: '[Tomorrow at] LTS',
-    nextWeek: 'dddd [at] LTS',
-    lastDay: '[Yesterday at] LTS',
-    lastWeek: '[Last] dddd [at] LTS',
-    sameElse: 'L [at] LTS',
-};
-
 /**
  * Renders the legacy dashboard with system and admin details.
  */
@@ -40,6 +28,7 @@ export default async function DashboardPage() {
     const { publicUrl } = server;
     const isAdmin = await isUserAdmin(); /* <- TODO: [??] Here should be user permissions */
     const { agents, folders, homepageMessage, currentUser } = await getHomePageAgents();
+    const language = await getRequestServerLanguage();
 
     const longRunningTask = getLongRunningTask();
 
@@ -56,7 +45,7 @@ export default async function DashboardPage() {
     const host = (await headers()).get('host') || 'unknown';
 
     return (
-        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
+        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-slate-950 dark:via-slate-950 dark:to-slate-900">
             <div className="container mx-auto px-4 py-16">
                 <HomepagePrimarySections
                     agents={agents}
@@ -92,10 +81,16 @@ export default async function DashboardPage() {
                         <TechInfoCard title={`Long running task ${longRunningTask.taskId}`}>
                             <p className="text-gray-600">Tick: {longRunningTask.tick}</p>
                             <p className="text-gray-600">
-                                Created At: {moment(longRunningTask.createdAt).calendar(undefined, calendarWithSeconds)}
+                                Created At:{' '}
+                                {formatServerLanguageHumanReadableDate(longRunningTask.createdAt, language, {
+                                    isExactDateIncluded: true,
+                                })}
                             </p>
                             <p className="text-gray-600">
-                                Updated At: {moment(longRunningTask.updatedAt).calendar(undefined, calendarWithSeconds)}
+                                Updated At:{' '}
+                                {formatServerLanguageHumanReadableDate(longRunningTask.updatedAt, language, {
+                                    isExactDateIncluded: true,
+                                })}
                             </p>
                         </TechInfoCard>
 

package/apps/agents-server/src/app/docs/[docId]/page.tsx

@@ -32,7 +32,7 @@ export default async function DocPage(props: DocPageProps) {
     const { primary, aliases } = group;
 
     return (
-        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
+        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-slate-950 dark:via-slate-950 dark:to-slate-900">
             <div className="container mx-auto px-4 py-16">
                 <DocsToolbar />
                 <PrintHeader title={primary.type} />

package/apps/agents-server/src/app/docs/page.tsx

@@ -19,7 +19,7 @@ export default function DocsPage() {
     const groupedCommitments = getVisibleCommitmentDefinitions();
 
     return (
-        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
+        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-slate-950 dark:via-slate-950 dark:to-slate-900">
             <div className="container mx-auto px-4 py-16">
                 <DocsToolbar />
                 <PrintHeader title="Full Documentation" />

package/apps/agents-server/src/app/globals.css

@@ -1,6 +1,67 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
+@import '@xterm/xterm/css/xterm.css';
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
+
+/**
+ * Scoped design tokens for the imported manGo onboarding wizard.
+ */
+[data-onboarding-ui] {
+    --ob-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
+    --ob-font-display: 'Outfit', 'Inter', ui-sans-serif, system-ui, sans-serif;
+    --ob-brand-blue: #7aebff;
+    --ob-brand-blue-dark: #30a8bd;
+    --ob-brand-green: #7affeb;
+    --ob-brand-green-dark: #30bda8;
+    --ob-ink: #111827;
+    --ob-mist: #f3f4f6;
+    --ob-accent-50: #ecfdff;
+    --ob-accent-100: #d2f8ff;
+    --ob-accent-200: #a8f1fd;
+    --ob-accent-300: #7aebff;
+    --ob-accent-400: #43d3e6;
+    --ob-accent-500: #30a8bd;
+    --ob-accent-600: #2491a4;
+    --ob-accent-700: #1d7686;
+    --ob-accent-800: #1a5e6b;
+    --ob-accent-900: #164a55;
+    --ob-shadow-xs: 0 1px 2px 0 rgb(17 24 39 / 0.04);
+    --ob-shadow-sm: 0 1px 2px 0 rgb(17 24 39 / 0.05), 0 1px 3px 0 rgb(17 24 39 / 0.05);
+    --ob-shadow-md: 0 2px 4px -1px rgb(17 24 39 / 0.05), 0 4px 12px -2px rgb(17 24 39 / 0.08);
+    --ob-shadow-lg: 0 4px 8px -2px rgb(17 24 39 / 0.06), 0 12px 28px -6px rgb(17 24 39 / 0.12);
+    --ob-shadow-accent: 0 1px 2px 0 rgb(48 168 189 / 0.2), 0 6px 16px -4px rgb(48 168 189 / 0.32);
+    --ob-grad-primary: linear-gradient(135deg, var(--ob-brand-blue) 0%, var(--ob-brand-green) 100%);
+    --ob-grad-ink: linear-gradient(160deg, #1b2435 0%, #111827 55%, #0b0f19 100%);
+    --ob-ring: rgb(48 168 189 / 0.5);
+    font-family: var(--ob-font-sans);
+}
+
+[data-onboarding-ui] .ob-display {
+    font-family: var(--ob-font-display);
+    letter-spacing: 0;
+}
+
+@keyframes ob-rise {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+[data-onboarding-ui] .ob-animate-rise {
+    animation: ob-rise 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    [data-onboarding-ui] .ob-animate-rise {
+        animation: none;
+    }
+}
 
 /**
  * OpenMoji black and white CSS
@@ -639,6 +700,26 @@ html.dark .agent-chat-route-surface .agent-chat-sidebar-toggle.agent-chat-solid-
     box-shadow: 0 20px 38px rgba(2, 6, 23, 0.6), inset 1px 0 0 rgba(191, 219, 254, 0.18);
 }
 
+html.dark .agent-chat-sidebar-item-active {
+    border-color: rgba(125, 211, 252, 0.52) !important;
+    background: linear-gradient(145deg, rgba(8, 47, 73, 0.88), rgba(15, 23, 42, 0.96)) !important;
+    color: #e0f2fe !important;
+    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.4), inset 0 0 0 1px rgba(125, 211, 252, 0.16) !important;
+}
+
+html.dark .agent-chat-sidebar-item-active .agent-chat-sidebar-item-preview-card {
+    border-color: rgba(125, 211, 252, 0.34) !important;
+    background: rgba(15, 23, 42, 0.82) !important;
+}
+
+html.dark .agent-chat-sidebar-item-active .agent-chat-sidebar-item-title {
+    color: #f8fafc !important;
+}
+
+html.dark .agent-chat-sidebar-item-active .agent-chat-sidebar-item-preview {
+    color: #bae6fd !important;
+}
+
 .agent-chat-route-surface .chat-scrollToBottom.chat-scrollToBottom + [role='status'] {
     top: auto;
     right: auto;
@@ -806,6 +887,36 @@ html.dark .bg-slate-100\/80 {
     background-color: #111827 !important;
 }
 
+html.dark .bg-gray-200,
+html.dark .bg-slate-200 {
+    background-color: rgba(30, 41, 59, 0.92) !important;
+}
+
+html.dark .bg-gray-300,
+html.dark .bg-slate-300 {
+    background-color: rgba(51, 65, 85, 0.94) !important;
+}
+
+html.dark .bg-blue-50,
+html.dark .bg-blue-100 {
+    background-color: rgba(30, 64, 175, 0.24) !important;
+}
+
+html.dark .bg-amber-50,
+html.dark .bg-amber-100 {
+    background-color: rgba(120, 53, 15, 0.28) !important;
+}
+
+html.dark .bg-red-50,
+html.dark .bg-red-100 {
+    background-color: rgba(127, 29, 29, 0.3) !important;
+}
+
+html.dark .bg-emerald-50,
+html.dark .bg-emerald-100 {
+    background-color: rgba(6, 78, 59, 0.28) !important;
+}
+
 html.dark .border-gray-100,
 html.dark .border-gray-200,
 html.dark .border-slate-100,
@@ -843,9 +954,34 @@ html.dark .text-slate-400 {
     color: #64748b !important;
 }
 
+html.dark .text-blue-600,
+html.dark .text-blue-700,
+html.dark .hover\:text-blue-700:hover {
+    color: #93c5fd !important;
+}
+
+html.dark .text-amber-700,
+html.dark .text-amber-800,
+html.dark .text-amber-900 {
+    color: #fcd34d !important;
+}
+
+html.dark .text-red-600,
+html.dark .text-red-700,
+html.dark .text-red-800,
+html.dark .text-red-900 {
+    color: #fca5a5 !important;
+}
+
+html.dark .text-emerald-600,
+html.dark .text-emerald-700 {
+    color: #86efac !important;
+}
+
 html.dark .hover\:bg-white:hover,
 html.dark .hover\:bg-gray-50:hover,
 html.dark .hover\:bg-gray-100:hover,
+html.dark .hover\:bg-gray-300:hover,
 html.dark .hover\:bg-slate-50:hover,
 html.dark .hover\:bg-slate-100:hover {
     background-color: #0f172a !important;
@@ -863,6 +999,31 @@ html.dark .hover\:border-slate-400:hover {
     border-color: rgba(125, 211, 252, 0.45) !important;
 }
 
+html.dark input:not([type='checkbox']):not([type='radio']):not([type='range']),
+html.dark textarea,
+html.dark select {
+    background-color: #0f172a;
+    color: #e2e8f0;
+    border-color: rgba(71, 85, 105, 0.92);
+}
+
+html.dark input:not([type='checkbox']):not([type='radio']):not([type='range'])::placeholder,
+html.dark textarea::placeholder {
+    color: #94a3b8;
+}
+
+html.dark input:not([type='checkbox']):not([type='radio']):not([type='range']):disabled,
+html.dark textarea:disabled,
+html.dark select:disabled {
+    background-color: #111827;
+    color: #64748b;
+}
+
+html.dark option {
+    background-color: #0f172a;
+    color: #e2e8f0;
+}
+
 html.dark .prose {
     color: #cbd5e1;
 }
@@ -936,6 +1097,24 @@ html.dark [data-chat-modal='tool-call'][data-chat-theme='dark'] button {
     color: inherit;
 }
 
+html.dark [data-onboarding-ui] .bg-white,
+html.dark [data-onboarding-ui] .bg-white\/80 {
+    background-color: #ffffff !important;
+}
+
+html.dark [data-onboarding-ui] input:not([type='checkbox']):not([type='radio']):not([type='range']),
+html.dark [data-onboarding-ui] textarea,
+html.dark [data-onboarding-ui] select {
+    background-color: #ffffff;
+    color: #18181b;
+    border-color: #d4d4d8;
+}
+
+html.dark [data-onboarding-ui] input:not([type='checkbox']):not([type='radio']):not([type='range'])::placeholder,
+html.dark [data-onboarding-ui] textarea::placeholder {
+    color: #a1a1aa;
+}
+
 /* Print styles */
 @media print {
     @page {

package/apps/agents-server/src/app/layout.tsx

@@ -3,7 +3,8 @@ import { LayoutWrapper } from '@/src/components/LayoutWrapper/LayoutWrapper';
 import { createThemeModeBootstrapScript } from '@/src/components/ThemeMode/createThemeModeBootstrapScript';
 import { APPLICATION_FONT_VARIABLE_CLASS_NAME } from '@/src/utils/applicationFonts';
 import type { Metadata } from 'next';
-import { cookies } from 'next/headers';
+import { cookies, headers } from 'next/headers';
+import { CONTENT_SECURITY_POLICY_NONCE_REQUEST_HEADER } from '../middleware/contentSecurityPolicy';
 import { getCustomJavascriptWithIntegrations } from '../database/customJavascript';
 import { getAggregatedCustomStylesheetCss } from '../database/customStylesheet';
 import { getMetadataMap } from '../database/getMetadata';
@@ -16,6 +17,7 @@ import {
     SERVER_LANGUAGE_METADATA_KEY,
 } from '../languages/ServerLanguageRegistry';
 import { $provideServer } from '../tools/$provideServer';
+import { isSelfContainedS3StorageSelected } from '../tools/$provideCdnForServer';
 import { loadAgentOrganizationState } from '../utils/agentOrganization/loadAgentOrganizationState';
 import type { AgentOrganizationAgent, AgentOrganizationFolder } from '../utils/agentOrganization/types';
 import { getAgentNaming } from '../utils/getAgentNaming';
@@ -46,6 +48,11 @@ import {
     CONTROL_PANEL_OPTION_AVAILABILITY_METADATA_KEYS,
     getControlPanelOptionAvailability,
 } from '../utils/getControlPanelOptionAvailability';
+import {
+    SHIBBOLETH_AUTHENTICATION_METADATA_KEYS,
+    resolveShibbolethAuthenticationMenuStatus,
+} from '../constants/shibbolethAuth';
+import { resolveFileUploadAvailability } from '../utils/upload/fileUploadAvailability';
 import '@prisma/studio-core/ui/index.css';
 import './globals.css';
 
@@ -142,7 +149,7 @@ async function getLayoutFederatedServers(options: {
     }
 
     try {
-        const federatedServerUrls = await getFederatedServers({ excludeHiddenCoreServer: true });
+        const federatedServerUrls = await getFederatedServers();
         return Promise.all(
             federatedServerUrls.map(async (url) => ({
                 title: `Federated: ${new URL(url).hostname}`,
@@ -257,11 +264,13 @@ export default async function RootLayout({
         DEFAULT_THEME_METADATA_KEY,
         SERVER_LANGUAGE_METADATA_KEY,
         IS_SERVER_LANGUAGE_ENFORCED_METADATA_KEY,
+        ...SHIBBOLETH_AUTHENTICATION_METADATA_KEYS,
         ...CONTROL_PANEL_OPTION_AVAILABILITY_METADATA_KEYS,
     ]);
     const currentUserPromise = getCurrentUser();
     const isAdminPromise = isUserAdmin();
     const isGlobalAdminPromise = isUserGlobalAdmin();
+    const providedServerPromise = $provideServer();
     const serverVisibilityPromise = getServerVisibility();
     const agentNamingPromise = getAgentNaming();
     const organizationStatePromise = isAdminPromise.then((isAdmin) =>
@@ -269,6 +278,13 @@ export default async function RootLayout({
     );
     const chatPreferencesPromise = getDefaultChatPreferences();
     const defaultIsNotificationsOnPromise = getDefaultIsNotificationsOn();
+    const fileUploadAvailabilityPromise = providedServerPromise.then((providedServer) =>
+        resolveFileUploadAvailability({
+            serverId: providedServer.id,
+            serverPublicUrl: providedServer.publicUrl,
+            isSelfContainedS3StorageSelected: isSelfContainedS3StorageSelected(),
+        }),
+    );
     const customStylesheetCssPromise = resolveOptionalLayoutText(
         'custom stylesheet CSS',
         getAggregatedCustomStylesheetCss,
@@ -278,6 +294,7 @@ export default async function RootLayout({
         getCustomJavascriptWithIntegrations,
     );
     const cookieStorePromise = cookies();
+    const requestHeadersPromise = headers();
     const defaultThemeModePromise = Promise.all([currentUserPromise, cookieStorePromise, layoutMetadataPromise]).then(
         async ([currentUser, cookieStore, layoutMetadata]) => {
             const cookieThemeMode = cookieStore.get(THEME_MODE_COOKIE_NAME)?.value || null;
@@ -331,10 +348,12 @@ export default async function RootLayout({
         customStylesheetCss,
         customJavascript,
         cookieStore,
+        requestHeaders,
         defaultThemeMode,
         federatedServers,
         footerLinks,
         serverVisibility,
+        fileUploadAvailability,
     ] = await Promise.all([
         isAdminPromise,
         isGlobalAdminPromise,
@@ -347,10 +366,12 @@ export default async function RootLayout({
         customStylesheetCssPromise,
         customJavascriptPromise,
         cookieStorePromise,
+        requestHeadersPromise,
         defaultThemeModePromise,
         federatedServersPromise,
         footerLinksPromise,
         serverVisibilityPromise,
+        fileUploadAvailabilityPromise,
     ]);
 
     const serverName = layoutMetadata.SERVER_NAME || 'Promptbook Agents Server';
@@ -362,7 +383,10 @@ export default async function RootLayout({
     const feedbackMode = parseChatFeedbackMode(layoutMetadata.CHAT_FEEDBACK_MODE, layoutMetadata.IS_FEEDBACK_ENABLED);
     const isExperimentalPwaAppEnabled = (layoutMetadata.IS_EXPERIMENTAL_PWA_APP_ENABLED ?? 'true') === 'true';
     const isPublicServer = isPublicServerVisibility(serverVisibility);
-    const safeCustomJavascript = customJavascript.replace(/<\/script>/gi, '<\\/script>');
+    // Note: The custom JavaScript is executed only when the browser sees the matching
+    //       `script-src 'nonce-...'` directive that the middleware sets per request, so a
+    //       fragile string-level sanitization is intentionally not applied here.
+    const contentSecurityPolicyNonce = requestHeaders.get(CONTENT_SECURITY_POLICY_NONCE_REQUEST_HEADER) ?? undefined;
     const webPushPublicKey = process.env.NEXT_PUBLIC_WEB_PUSH_PUBLIC_KEY?.trim() || null;
     const chatVisualModeCookie = cookieStore.get(CHAT_VISUAL_MODE_COOKIE_NAME)?.value || null;
     const cookieLanguage = cookieStore.get(SERVER_LANGUAGE_COOKIE_NAME)?.value || null;
@@ -380,6 +404,7 @@ export default async function RootLayout({
         metadata: layoutMetadata,
         isPushNotificationsConfigured: Boolean(webPushPublicKey),
     });
+    const shibbolethAuthenticationStatus = resolveShibbolethAuthenticationMenuStatus(layoutMetadata);
     const themeModeBootstrapScript = createThemeModeBootstrapScript(defaultThemeMode);
 
     return (
@@ -394,6 +419,7 @@ export default async function RootLayout({
             <body className={`${APPLICATION_FONT_VARIABLE_CLASS_NAME} bg-background text-foreground antialiased`}>
                 <script
                     id="agents-server-theme-mode"
+                    nonce={contentSecurityPolicyNonce}
                     dangerouslySetInnerHTML={{ __html: themeModeBootstrapScript }}
                 />
                 {customStylesheetCss && <style id="agents-server-custom-css">{customStylesheetCss}</style>}
@@ -414,6 +440,7 @@ export default async function RootLayout({
                     defaultIsNotificationsOn={defaultIsNotificationsOn}
                     isExperimental={isExperimental}
                     feedbackMode={feedbackMode}
+                    shibbolethAuthenticationStatus={shibbolethAuthenticationStatus}
                     isExperimentalPwaAppEnabled={isExperimentalPwaAppEnabled}
                     controlPanelOptionAvailability={controlPanelOptionAvailability}
                     defaultServerLanguage={serverLanguage}
@@ -422,13 +449,15 @@ export default async function RootLayout({
                     defaultChatVisualMode={defaultChatVisualMode}
                     defaultAgentAvatarVisualId={defaultAgentAvatarVisualId}
                     webPushPublicKey={webPushPublicKey}
+                    fileUploadAvailability={fileUploadAvailability}
                 >
                     {children}
                 </LayoutWrapper>
                 {customJavascript && (
                     <script
                         id="agents-server-custom-js"
-                        dangerouslySetInnerHTML={{ __html: safeCustomJavascript }}
+                        nonce={contentSecurityPolicyNonce}
+                        dangerouslySetInnerHTML={{ __html: customJavascript }}
                     />
                 )}
                 {/* Global portal root for modals/popups */}

package/apps/agents-server/src/app/recycle-bin/actions.ts

@@ -4,6 +4,7 @@ import { restoreAgentAndFolders } from '@/src/utils/agentOrganization/restoreAge
 import { revalidatePath } from 'next/cache';
 import { isUserAdmin } from '../../utils/isUserAdmin';
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { invalidateCachedActiveOrganizationSnapshots } from '@/src/utils/agentOrganization/loadAgentOrganizationState';
 
 /**
  * Restores a deleted agent from the recycle bin.
@@ -16,6 +17,7 @@ export async function restoreDeletedAgent(agentName: string) {
     }
 
     await restoreAgentAndFolders(agentName);
+    invalidateCachedActiveOrganizationSnapshots();
 
     revalidatePath('/recycle-bin');
     revalidatePath(`/agents/${agentName}`);
@@ -35,6 +37,7 @@ export async function deleteAgent(agentName: string) {
     const collection = await $provideAgentCollectionForServer();
 
     await collection.deleteAgent(agentName);
+    invalidateCachedActiveOrganizationSnapshots();
 
     revalidatePath('/recycle-bin');
     revalidatePath(`/agents/${agentName}`);

package/apps/agents-server/src/app/recycle-bin/page.tsx

@@ -22,7 +22,7 @@ export default async function RecycleBinPage() {
     const canRestore = Boolean(currentUser);
 
     return (
-        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
+        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-slate-950 dark:via-slate-950 dark:to-slate-900">
             <div className="container mx-auto px-4 py-16">
                 <header className="flex items-center gap-4 mb-8">
                     <div className="bg-red-100 p-3 rounded-full">

package/apps/agents-server/src/app/s3/[first]/[second]/[hash]/[filename]/route.ts

@@ -0,0 +1,52 @@
+import { NextRequest, NextResponse } from 'next/server';
+import {
+    $provideCdnForServer,
+    resolveCdnPublicUrlForServer,
+} from '../../../../../../tools/$provideCdnForServer';
+import { $provideServer } from '../../../../../../tools/$provideServer';
+
+/**
+ * Serves files stored under the hash-based CDN key format:
+ * `{hash[0]}/{hash[1]}/{sha256-hash}/{filename}`
+ *
+ * This route is reached when nginx routes a request matching
+ * `^/s3/[0-9a-f]/[0-9a-f]/[0-9a-f]{64}/` to Next.js instead of VersityGW,
+ * which keeps the internal S3 bucket and path prefix hidden from the public URL.
+ *
+ * [✨🏣] Companion route for `getUserFileCdnKey` and the `publicCdnBaseUrl`
+ * configuration in `$provideCdnForServer`.
+ */
+export async function GET(
+    _request: NextRequest,
+    {
+        params,
+    }: {
+        params: Promise<{
+            first: string;
+            second: string;
+            hash: string;
+            filename: string;
+        }>;
+    },
+) {
+    const { first, second, hash, filename } = await params;
+    const key = `${first}/${second}/${hash}/${filename}`;
+
+    const providedServer = await $provideServer();
+    const cdn = $provideCdnForServer({
+        cdnPublicUrl: resolveCdnPublicUrlForServer(providedServer.publicUrl),
+    });
+
+    const file = await cdn.getItem(key);
+
+    if (!file) {
+        return new NextResponse(null, { status: 404 });
+    }
+
+    return new NextResponse(file.data, {
+        headers: {
+            'Content-Type': file.type,
+            'Cache-Control': 'public, max-age=31536000, immutable',
+        },
+    });
+}

package/apps/agents-server/src/app/swagger/SwaggerApiKeysPanel.tsx

@@ -3,9 +3,11 @@
 import Link from 'next/link';
 import { Plus } from 'lucide-react';
 import { useEffect, useState } from 'react';
+import { useServerLanguage } from '@/src/components/ServerLanguage/ServerLanguageProvider';
 import { SecretInput } from '@/src/components/SecretInput/SecretInput';
 import type { ApiTokenEntry } from '@/src/utils/apiTokensClient';
 import { createApiToken, fetchApiTokens } from '@/src/utils/apiTokensClient';
+import { formatServerLanguageHumanReadableDate } from '@/src/utils/localization/formatServerLanguageHumanReadableDate';
 
 /**
  * Props for the compact Swagger API-key panel.
@@ -21,6 +23,7 @@ type SwaggerApiKeysPanelProps = {
  * Compact API-key panel shown above Swagger UI.
  */
 export function SwaggerApiKeysPanel({ isAdmin }: SwaggerApiKeysPanelProps) {
+    const { language } = useServerLanguage();
     const [tokens, setTokens] = useState<ApiTokenEntry[]>([]);
     const [isLoading, setIsLoading] = useState(isAdmin);
     const [isCreating, setIsCreating] = useState(false);
@@ -110,7 +113,7 @@ export function SwaggerApiKeysPanel({ isAdmin }: SwaggerApiKeysPanelProps) {
                                                 {token.note || `API key #${token.id}`}
                                             </span>
                                             <span className="text-xs text-slate-400">
-                                                {new Date(token.createdAt).toLocaleString()}
+                                                {formatServerLanguageHumanReadableDate(token.createdAt, language)}
                                             </span>
                                         </div>
                                         <SecretInput value={token.token} readOnly aria-label={`API key ${token.id}`} />

package/apps/agents-server/src/app/system/settings/KeybindingsSettingsClient.tsx

@@ -14,19 +14,25 @@ export function KeybindingsSettingsClient() {
     return (
         <div className="space-y-8">
             <div className="space-y-2">
-                <p className="text-xs uppercase tracking-[0.4em] text-gray-400">{t('header.systemMenuLabel')}</p>
-                <h1 className="text-3xl font-semibold text-gray-900">{t('header.settings')}</h1>
-                <p className="max-w-3xl text-sm text-gray-600">{t('systemSettings.pageDescription')}</p>
+                <p className="text-xs uppercase tracking-[0.4em] text-gray-400 dark:text-slate-500">
+                    {t('header.systemMenuLabel')}
+                </p>
+                <h1 className="text-3xl font-semibold text-gray-900 dark:text-slate-100">{t('header.settings')}</h1>
+                <p className="max-w-3xl text-sm text-gray-600 dark:text-slate-300">
+                    {t('systemSettings.pageDescription')}
+                </p>
             </div>
 
-            <section className="rounded-[32px] border border-slate-200 bg-[radial-gradient(circle_at_top_left,_rgba(191,219,254,0.4),_transparent_34%),linear-gradient(155deg,_rgba(255,255,255,0.98),_rgba(248,250,252,0.96))] p-6 shadow-[0_20px_60px_rgba(15,23,42,0.08)]">
+            <section className="rounded-[32px] border border-slate-200 bg-[radial-gradient(circle_at_top_left,_rgba(191,219,254,0.4),_transparent_34%),linear-gradient(155deg,_rgba(255,255,255,0.98),_rgba(248,250,252,0.96))] p-6 shadow-[0_20px_60px_rgba(15,23,42,0.08)] dark:border-slate-700 dark:bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.14),_transparent_34%),linear-gradient(155deg,_rgba(15,23,42,0.98),_rgba(8,15,28,0.96))] dark:shadow-[0_24px_70px_rgba(2,6,23,0.42)]">
                 <div className="space-y-3">
-                    <p className="text-[0.7rem] font-semibold uppercase tracking-[0.34em] text-slate-500">
+                    <p className="text-[0.7rem] font-semibold uppercase tracking-[0.34em] text-slate-500 dark:text-slate-400">
                         {t('chatEnterBehavior.sectionEyebrow')}
                     </p>
                     <div className="space-y-2">
-                        <h2 className="text-2xl font-semibold text-slate-950">{t('chatEnterBehavior.sectionTitle')}</h2>
-                        <p className="max-w-3xl text-sm leading-7 text-slate-600">
+                        <h2 className="text-2xl font-semibold text-slate-950 dark:text-slate-100">
+                            {t('chatEnterBehavior.sectionTitle')}
+                        </h2>
+                        <p className="max-w-3xl text-sm leading-7 text-slate-600 dark:text-slate-300">
                             {t('chatEnterBehavior.sectionDescription')}
                         </p>
                     </div>

package/apps/agents-server/src/app/system/user-memory/UserMemoryClient.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { showConfirm } from '@/src/components/AsyncDialogs/asyncDialogs';
+import { useServerLanguage } from '@/src/components/ServerLanguage/ServerLanguageProvider';
+import { formatServerLanguageHumanReadableDate } from '@/src/utils/localization/formatServerLanguageHumanReadableDate';
 import { useEffect, useMemo, useState } from 'react';
 
 /**
@@ -42,6 +44,7 @@ type UserMemoryClientProps = {
  */
 export function UserMemoryClient(props: UserMemoryClientProps) {
     const { agents } = props;
+    const { language } = useServerLanguage();
     const [memories, setMemories] = useState<UserMemoryEntry[]>([]);
     const [loading, setLoading] = useState<boolean>(true);
     const [saving, setSaving] = useState<boolean>(false);
@@ -445,7 +448,7 @@ export function UserMemoryClient(props: UserMemoryClientProps) {
                                             )}
                                         </td>
                                         <td className="px-4 py-3 text-xs text-gray-500">
-                                            {new Date(memory.updatedAt).toLocaleString()}
+                                            {formatServerLanguageHumanReadableDate(memory.updatedAt, language)}
                                         </td>
                                         <td className="px-4 py-3 text-right text-sm">
                                             {isEditing ? (
@@ -491,4 +494,3 @@ export function UserMemoryClient(props: UserMemoryClientProps) {
         </div>
     );
 }
-