@promptbook/cli 0.112.0-99 → 0.113.0-0

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

@@ -3,18 +3,33 @@
 import { $generateBookBoilerplate } from '@promptbook-local/core';
 import { string_agent_name, string_book } from '@promptbook-local/types';
 import { revalidatePath } from 'next/cache';
+import { headers } from 'next/headers';
 import { string_agent_permanent_id } from '../../../../src/types/typeAliases';
 import { DEFAULT_NAME_POOL, NAME_POOL_METADATA_KEY, parseNamePool } from '../constants/namePool';
-import { NEW_AGENT_WIZZARD_METADATA_KEY, parseNewAgentWizardMode } from '../constants/newAgentWizard';
+import { NEW_AGENT_WIZARD_METADATA_KEY, parseNewAgentWizardMode } from '../constants/newAgentWizard';
 import { getMetadata } from '../database/getMetadata';
 import { $provideAgentCollectionForServer } from '../tools/$provideAgentCollectionForServer';
+import { invalidateCachedActiveOrganizationSnapshots } from '../utils/agentOrganization/loadAgentOrganizationState';
+import { resolveAgentRouteTarget } from '../utils/agentRouting/resolveAgentRouteTarget';
+import { buildAgentChatHref, buildAgentProfileHref } from '../utils/agentRouting/agentRouteHrefs';
 import { type AgentVisibility, parseAgentVisibility } from '../utils/agentVisibility';
-import { authenticateUser } from '../utils/authenticateUser';
+import { authenticateUserWithRateLimit } from '../utils/authenticateUser';
+import { resolveAuthenticationAttemptHeaderIp } from '../utils/authenticationAttemptRateLimit';
 import { createAgentWithDefaultVisibility } from '../utils/createAgentWithDefaultVisibility';
 import { resolveCurrentUserIdentity } from '../utils/currentUserIdentity';
 import { isUserAdmin } from '../utils/isUserAdmin';
 import { clearSession, setSession } from '../utils/session';
 
+/**
+ * Maximum attempts used to confirm a freshly created agent route resolves before navigation starts.
+ */
+const CREATED_AGENT_ROUTE_READY_ATTEMPTS = 20;
+
+/**
+ * Delay between created-agent route-resolution retries.
+ */
+const CREATED_AGENT_ROUTE_READY_DELAY_MS = 100;
+
 /**
  * Creates a new agent from the generated boilerplate template.
  *
@@ -34,6 +49,8 @@ export async function $createAgentAction(): Promise<{ agentName: string_agent_na
     const { agentName, permanentId } = await createAgentWithDefaultVisibility(collection, agentSource, {
         userId: currentUserIdentity?.userId,
     });
+    revalidateCreatedAgentPaths(permanentId);
+    await waitForCreatedAgentRoute(permanentId);
 
     return { agentName, permanentId };
 }
@@ -58,11 +75,44 @@ export async function $getNewAgentCreationSettingsAction(): Promise<{
     defaultVisibility: AgentVisibility;
 }> {
     return {
-        mode: parseNewAgentWizardMode(await getMetadata(NEW_AGENT_WIZZARD_METADATA_KEY)),
+        mode: parseNewAgentWizardMode(await getMetadata(NEW_AGENT_WIZARD_METADATA_KEY)),
         defaultVisibility: parseAgentVisibility(await getMetadata('DEFAULT_VISIBILITY')),
     };
 }
 
+/**
+ * Clears cached organization snapshots and route payloads after a new agent is created.
+ *
+ * @param permanentId - Canonical identifier of the newly created agent.
+ */
+function revalidateCreatedAgentPaths(permanentId: string_agent_permanent_id): void {
+    invalidateCachedActiveOrganizationSnapshots();
+    revalidatePath('/', 'layout');
+    revalidatePath('/');
+    revalidatePath('/agents');
+    revalidatePath('/dashboard');
+    revalidatePath(buildAgentProfileHref(permanentId));
+    revalidatePath(buildAgentChatHref(permanentId));
+}
+
+/**
+ * Waits until the new agent can be resolved by the same routing helper the chat page uses.
+ *
+ * @param permanentId - Canonical identifier of the newly created agent.
+ */
+async function waitForCreatedAgentRoute(permanentId: string_agent_permanent_id): Promise<void> {
+    for (let attempt = 0; attempt < CREATED_AGENT_ROUTE_READY_ATTEMPTS; attempt++) {
+        const routeTarget = await resolveAgentRouteTarget(permanentId, { forceRefresh: true });
+        if (routeTarget?.kind === 'local' && routeTarget.canonicalAgentId === permanentId) {
+            return;
+        }
+
+        await new Promise((resolve) => setTimeout(resolve, CREATED_AGENT_ROUTE_READY_DELAY_MS));
+    }
+
+    throw new Error(`Created agent "${permanentId}" could not be resolved for routing immediately after creation.`);
+}
+
 /**
  * Creates a new agent using provided book content.
  *
@@ -89,6 +139,8 @@ export async function $createAgentFromBookAction(
         visibility: visibility ?? undefined,
         userId: currentUserIdentity?.userId,
     });
+    revalidateCreatedAgentPaths(permanentId);
+    await waitForCreatedAgentRoute(permanentId);
 
     return { agentName, permanentId };
 }
@@ -100,15 +152,24 @@ export async function $createAgentFromBookAction(
  * @returns Success state for the login attempt.
  */
 export async function loginAction(formData: FormData) {
-    const username = formData.get('username') as string;
-    const password = formData.get('password') as string;
+    const username = formData.get('username');
+    const password = formData.get('password');
 
-    console.info(`Login attempt for user: ${username}`);
+    if (typeof username !== 'string' || typeof password !== 'string' || !username || !password) {
+        return { success: false, message: 'Username and password are required' };
+    }
 
-    const user = await authenticateUser(username, password);
+    const requestIp = resolveAuthenticationAttemptHeaderIp(await headers());
+    const authenticationResult = await authenticateUserWithRateLimit(username, password, {
+        requestIp,
+    });
+
+    if (authenticationResult.isRateLimited) {
+        return { success: false, message: authenticationResult.message };
+    }
 
-    if (user) {
-        await setSession(user);
+    if (authenticationResult.user) {
+        await setSession(authenticationResult.user);
         revalidatePath('/', 'layout');
         return { success: true };
     } else {

package/apps/agents-server/src/app/admin/about/page.tsx

@@ -413,7 +413,7 @@ export default async function AdminAboutPage() {
     ];
 
     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">
                 <Card className="mb-10 space-y-4">
                     <div>

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-feedback/page.tsx

@@ -1,5 +1,5 @@
 import { ForbiddenPage } from '../../../components/ForbiddenPage/ForbiddenPage';
-import { getCurrentUser } from '../../../utils/getCurrentUser';
+import { isUserAdmin } from '../../../utils/isUserAdmin';
 import { ChatFeedbackClient } from './ChatFeedbackClient';
 
 /**
@@ -15,9 +15,7 @@ type AdminChatFeedbackPageProps = {
  * Handles admin chat feedback page.
  */
 export default async function AdminChatFeedbackPage({ searchParams }: AdminChatFeedbackPageProps) {
-    const currentUser = await getCurrentUser();
-
-    if (!currentUser) {
+    if (!(await isUserAdmin())) {
         return <ForbiddenPage />;
     }
 

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/chat-history/page.tsx

@@ -1,5 +1,5 @@
 import { ForbiddenPage } from '../../../components/ForbiddenPage/ForbiddenPage';
-import { getCurrentUser } from '../../../utils/getCurrentUser';
+import { isUserAdmin } from '../../../utils/isUserAdmin';
 import { ChatHistoryClient } from './ChatHistoryClient';
 
 /**
@@ -15,9 +15,7 @@ type AdminChatHistoryPageProps = {
  * Handles admin chat history page.
  */
 export default async function AdminChatHistoryPage({ searchParams }: AdminChatHistoryPageProps) {
-    const currentUser = await getCurrentUser();
-
-    if (!currentUser) {
+    if (!(await isUserAdmin())) {
         return <ForbiddenPage />;
     }
 

package/apps/agents-server/src/app/admin/cli-access/CliAccessClient.tsx

@@ -33,6 +33,7 @@ export function CliAccessClient() {
         startSuccessMessage: 'CLI access terminal started.',
         finishSuccessMessage: 'CLI access session finished.',
         finishErrorMessage: 'CLI access session ended with an error.',
+        isAutoStartEnabled: true,
     });
 
     return (
@@ -74,8 +75,6 @@ export function CliAccessClient() {
                 description="Start one shared shell session in the managed installation directory, run any command you need, and stop the session when you are done."
                 hint={`Shell: ${terminal.session?.shell || 'bash'}${terminal.session?.workingDirectory ? ` • Working directory: ${terminal.session.workingDirectory}` : ''}`}
                 session={terminal.session}
-                input={terminal.input}
-                onInputChange={terminal.setInput}
                 onStart={() => void terminal.startSession()}
                 onStop={() => void terminal.stopSession()}
                 onSend={(input) => void terminal.sendInput(input)}
@@ -88,7 +87,6 @@ export function CliAccessClient() {
                 stopLabel="Stop session"
                 outputLabel="Live shell output"
                 outputEmptyState="No shell output yet. Start the CLI session to see the live server console here."
-                inputPlaceholder="Type any shell command, for example pm2 status, git pull, npm run build, or bash scripts"
                 quickActions={[
                     { label: 'Send Enter', input: '\n' },
                     { label: 'Send Ctrl+C', input: '\u0003' },

package/apps/agents-server/src/app/admin/code-runners/CodeRunnersClient.tsx

@@ -3,6 +3,7 @@
 import { Loader2, Save, ServerCog } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { AdminTerminalCard } from '../../../components/AdminTerminal/AdminTerminalCard';
+import { AdminXtermTerminal } from '../../../components/AdminTerminal/AdminXtermTerminal';
 import { useAdminTerminalSession } from '../../../components/AdminTerminal/useAdminTerminalSession';
 import { Card } from '../../../components/Homepage/Card';
 
@@ -93,8 +94,6 @@ export function CodeRunnersClient() {
     });
     const {
         session: authenticationSession,
-        input: authenticationInput,
-        setInput: setAuthenticationInput,
         isStarting: isStartingAuthentication,
         isSending: isSendingAuthenticationInput,
         isStopping: isStoppingAuthentication,
@@ -279,9 +278,15 @@ export function CodeRunnersClient() {
             </Card>
 
             {applyOutput ? (
-                <pre className="max-h-72 overflow-auto rounded-xl border border-slate-200 bg-slate-950 p-4 text-xs text-slate-100">
-                    {applyOutput}
-                </pre>
+                <AdminXtermTerminal
+                    terminalId="code-runner-apply-output"
+                    output={applyOutput}
+                    emptyState="No apply output returned."
+                    isReadOnly
+                    isPlainTextOutput
+                    heightClassName="h-72"
+                    ariaLabel="Code-runner apply output"
+                />
             ) : null}
 
             <AdminTerminalCard
@@ -289,8 +294,6 @@ export function CodeRunnersClient() {
                 description="Save runner changes first if you want to authenticate a different CLI, then start the saved-runner terminal here instead of SSHing into the VPS."
                 hint={authenticationHint}
                 session={authenticationSession}
-                input={authenticationInput}
-                onInputChange={setAuthenticationInput}
                 onStart={() => void startAuthenticationSession()}
                 onStop={() => void stopAuthenticationSession()}
                 onSend={(input) => void sendAuthenticationInput(input)}
@@ -303,12 +306,17 @@ export function CodeRunnersClient() {
                 stopLabel="Stop terminal"
                 outputLabel="Live authentication terminal"
                 outputEmptyState="No authentication session output yet. Start the saved-runner terminal to see the live authentication log here."
-                inputPlaceholder="Type a terminal command such as /login and send it to the running runner CLI"
                 quickActions={[{ label: 'Send Enter', input: '\n' }]}
             >
-                <pre className="max-h-64 overflow-auto rounded-xl border border-slate-200 bg-slate-950 p-4 text-xs text-slate-100">
-                    {status || 'Runner status was not available.'}
-                </pre>
+                <AdminXtermTerminal
+                    terminalId="code-runner-status"
+                    output={status || 'Runner status was not available.'}
+                    emptyState="Runner status was not available."
+                    isReadOnly
+                    isPlainTextOutput
+                    heightClassName="h-64"
+                    ariaLabel="Runner status"
+                />
             </AdminTerminalCard>
         </div>
     );

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,
@@ -53,6 +55,13 @@ export function CustomJsClient() {
                 Scripts entered here are concatenated and injected on every Agents Server page. Use them to add helpers,
                 integrations, or instrumentation, but keep them lean since runtime errors can impact the UI.
             </p>
+            <p className="text-sm text-gray-600 mb-6">
+                Scripts run inside a strict Content Security Policy: they are loaded via a per-request{' '}
+                <code>nonce</code> on the inline <code>&lt;script&gt;</code> tag, and any extra scripts they create at
+                runtime inherit that trust via <code>script-src &apos;strict-dynamic&apos;</code>. Closing{' '}
+                <code>&lt;/script&gt;</code> sequences are no longer rewritten — write valid JavaScript and avoid raw
+                HTML payloads here.
+            </p>
 
             {error && (
                 <div className="mb-4 rounded-md border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700">
@@ -67,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}
@@ -74,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>