@promptbook/cli 0.112.0-99 → 0.112.0

package/apps/agents-server/src/components/NewAgentDialog/ManGoNewAgentWizard/state/OnboardingProvider.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { NotAllowed } from '../../../../../../../src/errors/NotAllowed';
+
+import type { OnboardingState } from '../types';
+
+/** sessionStorage key for the wizard session — exported so callers (e.g. the dashboard's
+ * "Nový onboarding") can clear a stale draft before starting fresh. */
+export const ONBOARDING_STORAGE_KEY = 'onboarding:v1';
+const STORAGE_KEY = ONBOARDING_STORAGE_KEY;
+
+const INITIAL_STATE: OnboardingState = {
+    agentName: '',
+    agentBrief: '',
+    bookSource: '',
+    knowledge: [],
+    testMessages: [],
+    savedAgentId: null,
+    savedAgentTargetPath: null,
+};
+
+type OnboardingPatch = Partial<OnboardingState> | ((previous: OnboardingState) => Partial<OnboardingState>);
+
+type OnboardingContextValue = {
+    readonly state: OnboardingState;
+    /** True once the initial `sessionStorage` hydration has run (client-only). */
+    readonly isHydrated: boolean;
+    /**
+     * Shallow-merges a patch into the state and writes it through to `sessionStorage`.
+     * Accepts a function form for updates that depend on the latest state (e.g. mutating
+     * the knowledge list from several concurrent uploads).
+     */
+    readonly update: (patch: OnboardingPatch) => void;
+    /** Clears the session (state + storage). */
+    readonly reset: () => void;
+};
+
+const OnboardingContext = createContext<OnboardingContextValue | null>(null);
+
+function readPersistedState(): OnboardingState | null {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+
+    try {
+        const raw = window.sessionStorage.getItem(STORAGE_KEY);
+        return raw ? { ...INITIAL_STATE, ...(JSON.parse(raw) as Partial<OnboardingState>) } : null;
+    } catch {
+        return null;
+    }
+}
+
+function writePersistedState(state: OnboardingState): void {
+    if (typeof window === 'undefined') {
+        return;
+    }
+
+    try {
+        window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+    } catch {
+        // Ignore storage failures (private mode, quota) — state still lives in memory.
+    }
+}
+
+/**
+ * Holds the whole wizard state for one onboarding session.
+ *
+ * Mounted by the `/onboarding` layout route so the state survives navigation between
+ * steps. Hydration from `sessionStorage` happens after the first client render to avoid
+ * an SSR/CSR mismatch; subsequent writes are write-through.
+ */
+export function OnboardingProvider({ children }: { readonly children: React.ReactNode }) {
+    const [state, setState] = useState<OnboardingState>(INITIAL_STATE);
+    const [isHydrated, setIsHydrated] = useState(false);
+
+    useEffect(() => {
+        const persisted = readPersistedState();
+        if (persisted) {
+            setState(persisted);
+        }
+        setIsHydrated(true);
+    }, []);
+
+    const update = useCallback((patch: OnboardingPatch) => {
+        setState((previous) => {
+            const resolved = typeof patch === 'function' ? patch(previous) : patch;
+            const next = { ...previous, ...resolved };
+            writePersistedState(next);
+            return next;
+        });
+    }, []);
+
+    const reset = useCallback(() => {
+        setState(INITIAL_STATE);
+        if (typeof window !== 'undefined') {
+            try {
+                window.sessionStorage.removeItem(STORAGE_KEY);
+            } catch {
+                // Ignore.
+            }
+        }
+    }, []);
+
+    const value = useMemo<OnboardingContextValue>(
+        () => ({ state, isHydrated, update, reset }),
+        [state, isHydrated, update, reset],
+    );
+
+    return <OnboardingContext.Provider value={value}>{children}</OnboardingContext.Provider>;
+}
+
+export function useOnboarding(): OnboardingContextValue {
+    const context = useContext(OnboardingContext);
+
+    if (!context) {
+        throw new NotAllowed('useOnboarding must be used within an <OnboardingProvider>.');
+    }
+
+    return context;
+}

package/apps/agents-server/src/components/NewAgentDialog/ManGoNewAgentWizard/types.ts

@@ -0,0 +1,52 @@
+/**
+ * Domain types for the onboarding wizard (Phase 1).
+ *
+ * These are the module's own types — anything coming from the outside (API responses,
+ * server functions) is mapped onto these in `services/` so the UI never depends on
+ * external shapes directly.
+ */
+
+export type KnowledgeItemStatus = 'uploading' | 'ready' | 'error';
+
+export type KnowledgeFileItem = {
+    readonly kind: 'file';
+    readonly id: string;
+    readonly name: string;
+    readonly size: number;
+    readonly publicUrl: string;
+    readonly objectKey: string;
+    readonly status: KnowledgeItemStatus;
+};
+
+export type KnowledgeUrlItem = {
+    readonly kind: 'url';
+    readonly id: string;
+    readonly url: string;
+    readonly status: KnowledgeItemStatus;
+};
+
+export type KnowledgeItem = KnowledgeFileItem | KnowledgeUrlItem;
+
+export type ChatRole = 'user' | 'agent';
+
+export type ChatMessage = {
+    readonly id: string;
+    readonly role: ChatRole;
+    readonly content: string;
+};
+
+/**
+ * The full in-memory state of one onboarding session. Persisted to `sessionStorage`
+ * so a refresh does not throw away work-in-progress. No server-side persistence in v1.
+ */
+export type OnboardingState = {
+    readonly agentName: string;
+    readonly agentBrief: string;
+    readonly bookSource: string;
+    readonly knowledge: readonly KnowledgeItem[];
+    readonly testMessages: readonly ChatMessage[];
+    /** Permanent id of the created agent once this session reached "Hotovo" (so we save it exactly once). */
+    readonly savedAgentId: string | null;
+    /** Route opened by the final CTA after the agent is created. */
+    readonly savedAgentTargetPath: string | null;
+};

package/apps/agents-server/src/components/NewAgentDialog/NewAgentDialog.tsx

@@ -6,6 +6,8 @@ import { useCallback, useState } from 'react';
 import { BookEditor } from '../../../../../src/book-components/BookEditor/BookEditor';
 import { bookEditorUploadHandler } from '../../utils/upload/createBookEditorUploadHandler';
 import { useAgentNaming } from '../AgentNaming/AgentNamingContext';
+import { FileUploadUnavailableNotice } from '../FileUploadAvailability/FileUploadUnavailableNotice';
+import { useFileUploadAvailability } from '../FileUploadAvailability/FileUploadAvailabilityContext';
 import { Dialog } from '../Portal/Dialog';
 import { useServerLanguage } from '../ServerLanguage/ServerLanguageProvider';
 import { usePromptbookTheme } from '../ThemeMode/usePromptbookTheme';
@@ -29,6 +31,7 @@ export function NewAgentDialog(props: NewAgentDialogProps) {
     const [isCreating, setIsCreating] = useState(false);
     const { formatText } = useAgentNaming();
     const { t } = useServerLanguage();
+    const fileUploadAvailability = useFileUploadAvailability();
     const { promptbookTheme } = usePromptbookTheme();
     const { requestClose } = useDirtyModalGuard({
         hasUnsavedChanges: agentSource !== initialAgentSource,
@@ -79,9 +82,10 @@ export function NewAgentDialog(props: NewAgentDialogProps) {
             </div>
 
             <div
-                className="relative flex-1 overflow-hidden bg-slate-50/60 p-4 dark:bg-slate-950/55" /* [✨🧬] onDragEnter={() => setIsInteracted(true)} */
+                className="relative flex flex-1 flex-col overflow-hidden bg-slate-50/60 p-4 dark:bg-slate-950/55" /* [✨🧬] onDragEnter={() => setIsInteracted(true)} */
             >
-                <div className="h-full overflow-hidden rounded-2xl border border-slate-200/80 shadow-inner dark:border-slate-800/80">
+                {!fileUploadAvailability.isUploadAvailable && <FileUploadUnavailableNotice className="mb-3" />}
+                <div className="min-h-0 flex-1 overflow-hidden rounded-2xl border border-slate-200/80 shadow-inner dark:border-slate-800/80">
                     <BookEditor
                         className="h-full w-full"
                         agentSource={agentSource}
@@ -92,7 +96,7 @@ export function NewAgentDialog(props: NewAgentDialogProps) {
                         height="100%"
                         isBorderRadiusDisabled
                         isVerbose={false}
-                        onFileUpload={bookEditorUploadHandler}
+                        onFileUpload={fileUploadAvailability.isUploadAvailable ? bookEditorUploadHandler : undefined}
                         theme={promptbookTheme}
                     />
                 </div>

package/apps/agents-server/src/components/NewAgentDialog/NewAgentWizardKnowledgeStep.tsx

@@ -1,5 +1,7 @@
 import { Upload } from 'lucide-react';
 import type { ChangeEvent, Dispatch, KeyboardEvent, RefObject, SetStateAction } from 'react';
+import { FileUploadUnavailableNotice } from '../FileUploadAvailability/FileUploadUnavailableNotice';
+import { useFileUploadAvailability } from '../FileUploadAvailability/FileUploadAvailabilityContext';
 import { NewAgentWizardClassNames } from './NewAgentWizardClassNames';
 import type { NewAgentWizardState } from './NewAgentWizardState';
 import type { NewAgentWizardTranslate } from './NewAgentWizardTranslate';
@@ -58,6 +60,7 @@ type NewAgentWizardKnowledgeStepProps = {
  * @private internal component of <NewAgentWizard/>.
  */
 export function NewAgentWizardKnowledgeStep(props: NewAgentWizardKnowledgeStepProps) {
+    const fileUploadAvailability = useFileUploadAvailability();
     const {
         state,
         setState,
@@ -80,18 +83,21 @@ export function NewAgentWizardKnowledgeStep(props: NewAgentWizardKnowledgeStepPr
                     <button
                         type="button"
                         onClick={() => fileInputRef.current?.click()}
+                        disabled={!fileUploadAvailability.isUploadAvailable}
                         className={NewAgentWizardClassNames.primaryButton}
                     >
                         <Upload className="h-4 w-4" />
                         {t('agentCreation.wizard.uploadAction')}
                     </button>
                 </div>
+                {!fileUploadAvailability.isUploadAvailable && <FileUploadUnavailableNotice className="mt-3" />}
                 <input
                     ref={fileInputRef}
                     type="file"
                     multiple
                     className="hidden"
                     onChange={handleKnowledgeFileSelection}
+                    disabled={!fileUploadAvailability.isUploadAvailable}
                 />
             </div>
 

package/apps/agents-server/src/components/NewAgentDialog/createNewAgentWizardSource.ts

@@ -213,7 +213,7 @@ export function createNewAgentWizardSource(options: CreateNewAgentWizardSourceOp
         }))
         .filter((item) => item.label !== '' && item.source !== '');
     const noteLines = [
-        'NOTE This agent was created via the NEW_AGENT_WIZZARD flow',
+        'NOTE This agent was created via the NEW_AGENT_WIZARD flow',
         `- Goal: ${summarizedGoal || 'Guided default goal'}`,
         `- Personality: ${formatSummaryList(personaTraits, 'Default guided persona')}`,
         `- Learning: ${options.isOpenToLearning ? 'Open to learning' : 'Fixed after creation'}`,

package/apps/agents-server/src/components/NewAgentDialog/trackNewAgentCreationEvent.ts

@@ -21,7 +21,7 @@ export type TrackNewAgentCreationEventOptions = {
     /**
      * Concrete surface the user interacted with.
      */
-    readonly surface?: 'editor' | 'wizard';
+    readonly surface?: 'editor' | 'wizard' | 'mango-wizard';
     /**
      * Folder scope where the flow started.
      */

package/apps/agents-server/src/components/NewAgentDialog/useNewAgentDialog.tsx

@@ -3,7 +3,10 @@
 import type { string_book } from '@promptbook-local/types';
 import type { ReactElement } from 'react';
 import { useCallback, useState } from 'react';
+import { NotAllowed } from '../../../../../src/errors/NotAllowed';
+import { appendHeadlessParam, useIsHeadless } from '../_utils/headlessParam';
 import type { AgentVisibility } from '../../utils/agentVisibility';
+import { buildFreshAgentChatHref } from '../../utils/agentRouting/agentRouteHrefs';
 import {
     $createAgentFromBookAction,
     $generateAgentBoilerplateAction,
@@ -16,6 +19,10 @@ import type {
     NewAgentWizardOpenEditorRequest,
 } from './NewAgentWizard';
 import { NewAgentWizard } from './NewAgentWizard';
+import {
+    ManGoNewAgentWizard,
+    type ManGoNewAgentWizardCreateRequest,
+} from './ManGoNewAgentWizard/ManGoNewAgentWizard';
 import { trackNewAgentCreationEvent } from './trackNewAgentCreationEvent';
 
 /**
@@ -51,9 +58,9 @@ type CreatedAgentPayload = {
  */
 type UseNewAgentDialogOptions = {
     /**
-     * Called after a new agent is created successfully.
+     * Optional callback invoked after the new agent payload is prepared and before navigation starts.
      */
-    readonly onCreated: (agent: CreatedAgentPayload) => Promise<void> | void;
+    readonly onCreated?: (agent: CreatedAgentPayload) => Promise<void> | void;
     /**
      * Optional callback invoked when creating an agent fails.
      */
@@ -103,6 +110,12 @@ type NewAgentDialogState =
           readonly defaultVisibility: AgentVisibility;
           readonly initialAgentName?: string;
           readonly targetFolderId: number | null | undefined;
+      }
+    | {
+          readonly surface: 'mango-wizard';
+          readonly mode: NewAgentWizardMode;
+          readonly defaultVisibility: AgentVisibility;
+          readonly targetFolderId: number | null | undefined;
       };
 
 /**
@@ -120,11 +133,27 @@ function extractAgentNameFromBoilerplate(boilerplate: string_book): string {
     );
 }
 
+/**
+ * Creates the navigation payload returned after one agent is persisted.
+ *
+ * @param agentName - Persisted display name of the agent.
+ * @param permanentId - Canonical immutable identifier of the agent.
+ * @returns Shared created-agent payload used by all creation surfaces.
+ */
+function createCreatedAgentPayload(agentName: string, permanentId: string): CreatedAgentPayload {
+    return {
+        agentName,
+        permanentId,
+        targetPath: buildFreshAgentChatHref(permanentId),
+    };
+}
+
 /**
  * Provides a shared "create new agent" workflow with boilerplate loading and a book-editing dialog.
  */
 export function useNewAgentDialog(options: UseNewAgentDialogOptions): UseNewAgentDialogResult {
     const { onCreated, onCreateFailed, onPrepareFailed } = options;
+    const isHeadless = useIsHeadless();
     const [isPreparingDialog, setIsPreparingDialog] = useState(false);
     const [dialogState, setDialogState] = useState<NewAgentDialogState | null>(null);
 
@@ -132,6 +161,21 @@ export function useNewAgentDialog(options: UseNewAgentDialogOptions): UseNewAgen
         setDialogState(null);
     }, []);
 
+    /**
+     * Finalizes one successful creation by hard-navigating to the new chat route.
+     *
+     * The App Router can transiently keep the just-created dynamic route in a stale not-found
+     * state, so new-agent creation intentionally uses a full navigation once the route is ready.
+     */
+    const handleCreatedAgent = useCallback(
+        async (agent: CreatedAgentPayload) => {
+            await onCreated?.(agent);
+            setDialogState(null);
+            window.location.assign(appendHeadlessParam(agent.targetPath, isHeadless));
+        },
+        [isHeadless, onCreated],
+    );
+
     const openNewAgentDialog = useCallback(
         async (openOptions?: OpenNewAgentDialogOptions) => {
             setIsPreparingDialog(true);
@@ -143,6 +187,21 @@ export function useNewAgentDialog(options: UseNewAgentDialogOptions): UseNewAgen
                     folderId: openOptions?.folderId,
                 });
 
+                if (settings.mode === 'MANGO_WIZARD') {
+                    setDialogState({
+                        surface: 'mango-wizard',
+                        mode: settings.mode,
+                        defaultVisibility: settings.defaultVisibility,
+                        targetFolderId: openOptions?.folderId,
+                    });
+                    trackNewAgentCreationEvent('new_agent_wizard_shown', {
+                        mode: settings.mode,
+                        surface: 'mango-wizard',
+                        folderId: openOptions?.folderId,
+                    });
+                    return;
+                }
+
                 if (settings.mode === 'WIZARD') {
                     let initialAgentName = '';
                     try {
@@ -200,17 +259,12 @@ export function useNewAgentDialog(options: UseNewAgentDialogOptions): UseNewAgen
                     surface: 'editor',
                     folderId: dialogState.targetFolderId,
                 });
-                await onCreated({
-                    agentName,
-                    permanentId,
-                    targetPath: `/agents/${encodeURIComponent(permanentId)}`,
-                });
-                setDialogState(null);
+                await handleCreatedAgent(createCreatedAgentPayload(agentName, permanentId));
             } catch (error) {
                 await onCreateFailed?.(error);
             }
         },
-        [dialogState, onCreateFailed, onCreated],
+        [dialogState, handleCreatedAgent, onCreateFailed],
     );
 
     const handleCreateFromWizard = useCallback(
@@ -232,19 +286,55 @@ export function useNewAgentDialog(options: UseNewAgentDialogOptions): UseNewAgen
                     knowledgeCount: request.knowledgeCount,
                 });
 
-                await onCreated({
-                    agentName,
-                    permanentId,
-                    targetPath: `/agents/${encodeURIComponent(permanentId)}`,
+                await handleCreatedAgent(createCreatedAgentPayload(agentName, permanentId));
+            } catch (error) {
+                await onCreateFailed?.(error);
+            }
+        },
+        [dialogState, handleCreatedAgent, onCreateFailed],
+    );
+
+    const handleCreateFromManGoWizard = useCallback(
+        async (request: ManGoNewAgentWizardCreateRequest) => {
+            if (!dialogState || dialogState.surface !== 'mango-wizard') {
+                throw new NotAllowed('The manGo wizard is not currently open.');
+            }
+
+            try {
+                const { agentName, permanentId } = await $createAgentFromBookAction(
+                    request.agentSource,
+                    dialogState.targetFolderId,
+                    request.visibility,
+                );
+                const createdAgent = createCreatedAgentPayload(agentName, permanentId);
+                trackNewAgentCreationEvent('new_agent_created', {
+                    mode: dialogState.mode,
+                    surface: 'mango-wizard',
+                    folderId: dialogState.targetFolderId,
+                    knowledgeCount: request.knowledgeCount,
                 });
-                setDialogState(null);
+                await onCreated?.(createdAgent);
+
+                return {
+                    permanentId,
+                    targetPath: createdAgent.targetPath,
+                };
             } catch (error) {
                 await onCreateFailed?.(error);
+                throw error;
             }
         },
         [dialogState, onCreateFailed, onCreated],
     );
 
+    const handleOpenCreatedManGoAgent = useCallback(
+        (targetPath: string) => {
+            setDialogState(null);
+            window.location.assign(appendHeadlessParam(targetPath, isHeadless));
+        },
+        [isHeadless],
+    );
+
     const handleOpenEditorFromWizard = useCallback((request: NewAgentWizardOpenEditorRequest) => {
         setDialogState((currentDialogState) => {
             if (!currentDialogState || currentDialogState.surface !== 'wizard') {
@@ -282,6 +372,15 @@ export function useNewAgentDialog(options: UseNewAgentDialogOptions): UseNewAgen
                     onCreate={handleCreateFromWizard}
                     onOpenEditor={handleOpenEditorFromWizard}
                 />
+            ) : dialogState?.surface === 'mango-wizard' ? (
+                <ManGoNewAgentWizard
+                    mode={dialogState.mode}
+                    defaultVisibility={dialogState.defaultVisibility}
+                    folderId={dialogState.targetFolderId}
+                    onClose={closeNewAgentDialog}
+                    onCreate={handleCreateFromManGoWizard}
+                    onOpenCreatedAgent={handleOpenCreatedManGoAgent}
+                />
             ) : null,
     };
 }

package/apps/agents-server/src/components/NewAgentDialog/useNewAgentWizardKnowledgeState.ts

@@ -9,6 +9,7 @@ import {
     type KeyboardEvent,
     type SetStateAction,
 } from 'react';
+import { useFileUploadAvailability } from '../FileUploadAvailability/FileUploadAvailabilityContext';
 import { simplifyKnowledgeLabel } from '../../utils/knowledge/simplifyKnowledgeLabel';
 import { bookEditorUploadHandler } from '../../utils/upload/createBookEditorUploadHandler';
 import {
@@ -144,6 +145,7 @@ function updateKnowledgeItem(
  */
 export function useNewAgentWizardKnowledgeState(options: UseNewAgentWizardKnowledgeStateOptions) {
     const { state, setState, setStep, knowledgeStepIndex, t } = options;
+    const fileUploadAvailability = useFileUploadAvailability();
     const fileInputRef = useRef<HTMLInputElement | null>(null);
     const dragDepthRef = useRef(0);
     const [knowledgeFeedback, setKnowledgeFeedback] = useState<string | null>(null);
@@ -160,6 +162,11 @@ export function useNewAgentWizardKnowledgeState(options: UseNewAgentWizardKnowle
             return;
         }
 
+        if (!fileUploadAvailability.isUploadAvailable) {
+            setKnowledgeFeedback(fileUploadAvailability.message || t('agentCreation.wizard.uploadFailed'));
+            return;
+        }
+
         setKnowledgeFeedback(null);
 
         for (const file of files) {
@@ -297,7 +304,7 @@ export function useNewAgentWizardKnowledgeState(options: UseNewAgentWizardKnowle
         }
 
         event.preventDefault();
-        event.dataTransfer.dropEffect = 'copy';
+        event.dataTransfer.dropEffect = fileUploadAvailability.isUploadAvailable ? 'copy' : 'none';
         setIsDragOverDialog(true);
     }
 

package/apps/agents-server/src/components/PrintHeader/PrintHeader.tsx

@@ -1,5 +1,7 @@
 import { formatAgentNamingText } from '../../utils/agentNaming';
 import { getAgentNaming } from '../../utils/getAgentNaming';
+import { formatServerLanguageHumanReadableDate } from '../../utils/localization/formatServerLanguageHumanReadableDate';
+import { getRequestServerLanguage } from '../../utils/localization/getRequestServerLanguage';
 
 /**
  * Renders a print-only header with server branding.
@@ -8,7 +10,7 @@ import { getAgentNaming } from '../../utils/getAgentNaming';
  * @returns Print header markup.
  */
 export async function PrintHeader({ title }: { title?: string }) {
-    const agentNaming = await getAgentNaming();
+    const [agentNaming, language] = await Promise.all([getAgentNaming(), getRequestServerLanguage()]);
     return (
         <div className="hidden print:block mb-6 border-b-2 border-blue-600 pb-2">
             <div className="flex justify-between items-end">
@@ -23,7 +25,7 @@ export async function PrintHeader({ title }: { title?: string }) {
                 {title && <h2 className="text-lg font-semibold text-gray-700">{title}</h2>}
             </div>
             <div className="text-xs text-gray-400 mt-1 text-right">
-                {new Date().toLocaleDateString()}
+                {formatServerLanguageHumanReadableDate(new Date(), language, { isExactDateIncluded: true })}
             </div>
         </div>
     );

package/apps/agents-server/src/components/Skeleton/ConsolePageLoadingSkeleton.tsx

@@ -44,7 +44,7 @@ export function ConsolePageLoadingSkeleton({
     const normalizedPanelHeights = panelHeights.length > 0 ? panelHeights : DEFAULT_PANEL_HEIGHTS;
 
     return (
-        <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50">
+        <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50 dark:from-slate-950 dark:via-slate-950 dark:to-slate-900">
             <div
                 className={`mx-auto w-full px-4 py-8 sm:px-6 sm:py-10 ${maxWidthClassName}`}
                 role="status"

package/apps/agents-server/src/components/Skeleton/DocumentationRouteLoadingSkeleton.tsx

@@ -32,7 +32,7 @@ export function DocumentationRouteLoadingSkeleton({
     showSidebar = false,
 }: DocumentationRouteLoadingSkeletonProps) {
     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"
                 role="status"

package/apps/agents-server/src/components/Skeleton/HomepageLoadingSkeleton.tsx

@@ -17,7 +17,7 @@ type HomepageLoadingSkeletonProps = {
  */
 export function HomepageLoadingSkeleton({ showGraphPlaceholder = true }: HomepageLoadingSkeletonProps) {
     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"
                 role="status"

package/apps/agents-server/src/components/UsersList/UsersList.tsx

@@ -1,10 +1,12 @@
 'use client';
 
+import Link from 'next/link';
 import { FormEvent, useState } from 'react';
 import { Card } from '../Homepage/Card';
 import { Section } from '../Homepage/Section';
 import { useServerLanguage } from '../ServerLanguage/ServerLanguageProvider';
 import { SecretInput } from '@/src/components/SecretInput/SecretInput';
+import { formatServerLanguageHumanReadableDate } from '@/src/utils/localization/formatServerLanguageHumanReadableDate';
 import { useUsersAdmin } from './useUsersAdmin';
 
 /**
@@ -25,7 +27,7 @@ type UsersListProps = {
  */
 export function UsersList({ allowCreate = true }: UsersListProps) {
     const { users, loading, error, createUser, deleteUser, toggleAdmin } = useUsersAdmin();
-    const { t } = useServerLanguage();
+    const { language, t } = useServerLanguage();
 
     const [newUsername, setNewUsername] = useState('');
     const [newPassword, setNewPassword] = useState('');
@@ -69,13 +71,29 @@ export function UsersList({ allowCreate = true }: UsersListProps) {
                         <div className="flex justify-between items-start">
                             <div>
                                 <h3 className="text-xl font-semibold text-gray-900">{user.username}</h3>
-                                {user.isAdmin && (
-                                    <span className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mt-1">
-                                        {t('users.adminRole')}
-                                    </span>
+                                <div className="mt-1 flex flex-wrap gap-2">
+                                    {user.isAdmin && (
+                                        <span className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">
+                                            {t('users.adminRole')}
+                                        </span>
+                                    )}
+                                    {user.authenticationProvider?.includes('SHIBBOLETH') && (
+                                        <Link
+                                            href="/admin/login-methods/shibboleth"
+                                            className="inline-block bg-emerald-100 text-emerald-800 text-xs px-2 py-1 rounded hover:bg-emerald-200"
+                                        >
+                                            Shibboleth
+                                        </Link>
+                                    )}
+                                </div>
+                                {(user.displayName || user.email) && (
+                                    <p className="text-gray-600 text-sm mt-2">
+                                        {[user.displayName, user.email].filter(Boolean).join(' / ')}
+                                    </p>
                                 )}
                                 <p className="text-gray-500 text-sm mt-2">
-                                    {t('users.createdLabel')}: {new Date(user.createdAt).toLocaleDateString()}
+                                    {t('users.createdLabel')}:{' '}
+                                    {formatServerLanguageHumanReadableDate(user.createdAt, language)}
                                 </p>
                             </div>
                             <div className="space-x-2">

package/apps/agents-server/src/components/UsersList/useUsersAdmin.ts

@@ -1,17 +1,12 @@
 import { useCallback, useEffect, useState } from 'react';
+import type { PublicUser } from '../../utils/publicUser';
 import { showConfirm } from '../AsyncDialogs/asyncDialogs';
 import { useServerLanguage } from '../ServerLanguage/ServerLanguageProvider';
 
 /**
  * Type describing admin user.
  */
-export type AdminUser = {
-    id: number;
-    username: string;
-    createdAt: string;
-    updatedAt: string;
-    isAdmin: boolean;
-};
+export type AdminUser = PublicUser;
 
 /**
  * Payload for create user.

package/apps/agents-server/src/constants/defaultAgentAvatarVisual.ts

@@ -53,7 +53,7 @@ export const DEFAULT_AGENT_AVATAR_VISUAL_METADATA_VALUES = DEFAULT_AGENT_AVATAR_
 export const DEFAULT_AGENT_AVATAR_VISUAL_METADATA_VALUE =
     DEFAULT_AGENT_AVATAR_VISUAL_METADATA_OPTIONS.find(
         ({ visualId }) => visualId === SHARED_DEFAULT_AGENT_AVATAR_VISUAL_ID,
-    )?.metadataValue || 'OCTOPUS3';
+    )?.metadataValue || 'OCTOPUS3D4';
 
 /**
  * Resolves one raw metadata value to a supported built-in avatar visual id.