@promptbook/cli 0.112.0-101 → 0.112.0-102

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

@@ -46,6 +46,10 @@ import {
     CONTROL_PANEL_OPTION_AVAILABILITY_METADATA_KEYS,
     getControlPanelOptionAvailability,
 } from '../utils/getControlPanelOptionAvailability';
+import {
+    SHIBBOLETH_AUTHENTICATION_METADATA_KEYS,
+    resolveShibbolethAuthenticationMenuStatus,
+} from '../constants/shibbolethAuth';
 import '@prisma/studio-core/ui/index.css';
 import './globals.css';
 
@@ -257,6 +261,7 @@ 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();
@@ -380,6 +385,7 @@ export default async function RootLayout({
         metadata: layoutMetadata,
         isPushNotificationsConfigured: Boolean(webPushPublicKey),
     });
+    const shibbolethAuthenticationStatus = resolveShibbolethAuthenticationMenuStatus(layoutMetadata);
     const themeModeBootstrapScript = createThemeModeBootstrapScript(defaultThemeMode);
 
     return (
@@ -414,6 +420,7 @@ export default async function RootLayout({
                     defaultIsNotificationsOn={defaultIsNotificationsOn}
                     isExperimental={isExperimental}
                     feedbackMode={feedbackMode}
+                    shibbolethAuthenticationStatus={shibbolethAuthenticationStatus}
                     isExperimentalPwaAppEnabled={isExperimentalPwaAppEnabled}
                     controlPanelOptionAvailability={controlPanelOptionAvailability}
                     defaultServerLanguage={serverLanguage}

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/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/components/AdminTerminal/useAdminTerminalSession.ts

@@ -264,7 +264,9 @@ export function useAdminTerminalSession<TSession extends AdminTerminalSession>(
                 }
 
                 if (payload.session) {
-                    setSession(payload.session);
+                    setSession((currentSession) =>
+                        mergeAdminTerminalSessionSnapshot(currentSession, payload.session as TSession),
+                    );
                 }
             } catch (error) {
                 setErrorMessage(error instanceof Error ? error.message : options.sendErrorMessage);
@@ -346,3 +348,29 @@ export function useAdminTerminalSession<TSession extends AdminTerminalSession>(
         stopSession,
     };
 }
+
+/**
+ * Merges a terminal API snapshot without letting a stale write acknowledgement hide newer SSE output.
+ *
+ * @private internal utility of `useAdminTerminalSession`
+ */
+export function mergeAdminTerminalSessionSnapshot<TSession extends AdminTerminalSession>(
+    currentSession: TSession | null,
+    nextSession: TSession,
+): TSession {
+    if (!currentSession || currentSession.id !== nextSession.id) {
+        return nextSession;
+    }
+
+    const isStaleSessionOutput =
+        currentSession.output.length > nextSession.output.length && currentSession.output.startsWith(nextSession.output);
+
+    if (!isStaleSessionOutput) {
+        return nextSession;
+    }
+
+    return {
+        ...nextSession,
+        output: currentSession.output,
+    };
+}

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

@@ -177,9 +177,9 @@ export function AgentProfile(props: AgentProfileProps) {
                                     <AgentProfileImage
                                         src={resolvedAgentAvatar.imageUrl}
                                         alt={fullname}
-                                        className="w-full h-full object-cover"
+                                        className="w-full h-full"
+                                        imageClassName="agent-avatar-pixelated w-full h-full object-contain"
                                         style={{
-                                            objectFit: 'cover',
                                             backgroundImage: `url(${colorToDataUrl(brandColorLightHex)})`,
                                         }}
                                     />
@@ -196,7 +196,7 @@ export function AgentProfile(props: AgentProfileProps) {
                                                 surface="transparent"
                                                 size={420}
                                                 alt={fullname}
-                                                className="h-full w-full pointer-events-none select-none"
+                                                className="!h-full !w-full pointer-events-none select-none"
                                                 style={{
                                                     width: '100%',
                                                     height: '100%',

package/apps/agents-server/src/components/AgentProfile/AgentProfileImage.tsx

@@ -8,13 +8,19 @@ type AgentProfileImageProps = {
     readonly src: string;
     readonly alt: string;
     readonly className?: string;
+    readonly imageClassName?: string;
     readonly style?: React.CSSProperties;
 };
 
+/**
+ * Default image sizing used by compact profile-image surfaces.
+ */
+const DEFAULT_AGENT_PROFILE_IMAGE_CLASS_NAME = 'agent-avatar-pixelated w-full h-full object-cover';
+
 /**
  * Handles agent profile image.
  */
-export function AgentProfileImage({ src, alt, className, style }: AgentProfileImageProps) {
+export function AgentProfileImage({ src, alt, className, imageClassName, style }: AgentProfileImageProps) {
     const [imageSrc, setImageSrc] = useState<string | null>(null);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState<Error | null>(null);
@@ -99,7 +105,7 @@ export function AgentProfileImage({ src, alt, className, style }: AgentProfileIm
                 <img
                     src={imageSrc}
                     alt={alt}
-                    className="agent-avatar-pixelated w-full h-full object-cover"
+                    className={imageClassName || DEFAULT_AGENT_PROFILE_IMAGE_CLASS_NAME}
                     // We don't pass style here because it is applied to container
                 />
             )}

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

@@ -9,16 +9,16 @@ import { OpenMojiIcon } from '../OpenMojiIcon/OpenMojiIcon';
  */
 export function DocsToolbar() {
     return (
-        <div className="flex flex-wrap items-center justify-between gap-4 p-4 mb-8 bg-white rounded-xl shadow-sm border border-gray-100 print:hidden">
+        <div className="flex flex-wrap items-center justify-between gap-4 p-4 mb-8 bg-white rounded-xl shadow-sm border border-gray-100 print:hidden dark:border-slate-700 dark:bg-slate-900/92 dark:shadow-slate-950/30">
             <div className="flex items-center gap-2">
                 <OpenMojiIcon icon="📚" className="text-2xl" />
-                <span className="font-semibold text-gray-700">Documentation</span>
+                <span className="font-semibold text-gray-700 dark:text-slate-100">Documentation</span>
             </div>
 
             <div className="flex flex-wrap gap-2">
                 <button
                     onClick={() => window.print()}
-                    className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+                    className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors dark:border-slate-600 dark:bg-slate-950 dark:text-slate-100 dark:hover:bg-slate-800 dark:focus:ring-offset-slate-950"
                     title="Print this page or save as PDF"
                 >
                     <PrinterIcon className="w-4 h-4" />
@@ -29,7 +29,7 @@ export function DocsToolbar() {
                     href="/api/docs/book-language.md"
                     download="book-language.md"
                     target="_blank"
-                    className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+                    className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors dark:border-blue-500/40 dark:bg-blue-500/15 dark:text-blue-100 dark:hover:bg-blue-500/25 dark:focus:ring-offset-slate-950"
                     title="Download raw Markdown documentation"
                 >
                     <Download className="w-4 h-4" />

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

@@ -40,12 +40,12 @@ export function DocumentationContent({ primary, aliases = [], isPrintOnly = fals
 
     return (
         <div
-            className={`bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden ${
+            className={`bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden dark:border-slate-700 dark:bg-slate-900/92 dark:shadow-slate-950/40 ${
                 isPrintOnly ? 'shadow-none border-none' : ''
             } print:shadow-none print:border-none print:rounded-none`}
         >
             <div
-                className={`p-8 border-b border-gray-100 bg-gray-50/50 ${
+                className={`p-8 border-b border-gray-100 bg-gray-50/50 dark:border-slate-700 dark:bg-slate-800/72 ${
                     isPrintOnly ? 'border-none bg-white p-0 mb-4' : ''
                 } ${
                     isLowVisibilityNotice ? 'opacity-90 print:opacity-100' : ''
@@ -56,23 +56,23 @@ export function DocumentationContent({ primary, aliases = [], isPrintOnly = fals
                         <OpenMojiIcon icon={primary.icon} variant="color" className="mr-3" />
                         {primary.type}
                         {aliases.length > 0 && (
-                            <span className="text-gray-400 font-normal ml-4 text-2xl print:text-xl">
+                            <span className="text-gray-400 font-normal ml-4 text-2xl dark:text-slate-500 print:text-xl">
                                 / {aliases.join(' / ')}
                             </span>
                         )}
                     </h1>
                     {!isPrintOnly && (
-                        <span className="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700 print:hidden">
+                        <span className="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-100 print:hidden">
                             Commitment
                         </span>
                     )}
                     {!isPrintOnly && notice?.kind === 'deprecated' && (
-                        <span className="px-3 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-800 print:hidden">
+                        <span className="px-3 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-500/20 dark:text-amber-100 print:hidden">
                             Deprecated
                         </span>
                     )}
                     {!isPrintOnly && isLowVisibilityNotice && (
-                        <span className="px-3 py-1 rounded-full text-xs font-medium bg-slate-100 text-slate-700 print:hidden">
+                        <span className="px-3 py-1 rounded-full text-xs font-medium bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-100 print:hidden">
                             {notice?.badgeLabel}
                         </span>
                     )}
@@ -86,8 +86,8 @@ export function DocumentationContent({ primary, aliases = [], isPrintOnly = fals
                     <div
                         className={`mt-4 rounded-xl border px-4 py-3 text-sm print:border ${
                             isLowVisibilityNotice
-                                ? 'border-slate-200 bg-slate-50 text-slate-700 print:border-slate-200'
-                                : 'border-amber-200 bg-amber-50 text-amber-900 print:border-amber-200'
+                                ? 'border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-700 dark:bg-slate-950/72 dark:text-slate-200 print:border-slate-200'
+                                : 'border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-500/40 dark:bg-amber-950/35 dark:text-amber-100 print:border-amber-200'
                         }`}
                     >
                         <div className="font-semibold mb-1">{notice?.detailLabel || 'Deprecated'}</div>
@@ -105,7 +105,7 @@ export function DocumentationContent({ primary, aliases = [], isPrintOnly = fals
             </div>
 
             <div className={`p-8 ${isPrintOnly ? 'p-0' : ''} print:p-0`}>
-                <article className="prose prose-lg prose-slate max-w-none prose-headings:font-bold prose-headings:tracking-tight prose-headings:text-gray-900 prose-h1:text-4xl prose-h1:mb-8 prose-h2:text-2xl prose-h2:mt-12 prose-h2:mb-6 prose-h2:pb-2 prose-h2:border-b prose-h2:border-gray-200 prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-4 prose-h3:text-gray-800 prose-p:text-gray-600 prose-p:leading-relaxed prose-p:mb-6 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:text-blue-700 hover:prose-a:underline prose-a:transition-colors prose-strong:font-bold prose-strong:text-gray-900 prose-code:text-blue-600 prose-code:bg-blue-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:content-none prose-code:after:content-none prose-code:font-medium prose-pre:bg-gray-900 prose-pre:text-gray-100 prose-pre:shadow-lg prose-pre:rounded-xl prose-pre:p-6 prose-ul:list-disc prose-ul:pl-6 prose-li:marker:text-gray-400 prose-li:mb-2 prose-ol:list-decimal prose-ol:pl-6 prose-li:mb-2 prose-blockquote:border-l-4 prose-blockquote:border-blue-500 prose-blockquote:bg-blue-50/50 prose-blockquote:py-2 prose-blockquote:px-4 prose-blockquote:rounded-r-lg prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-blockquote:my-8 prose-img:rounded-xl prose-img:shadow-md prose-img:my-8 prose-hr:border-gray-200 prose-hr:my-10 prose-table:w-full prose-th:text-left prose-th:py-2 prose-th:px-3 prose-th:bg-gray-100 prose-th:font-semibold prose-th:text-gray-900 prose-td:py-2 prose-td:px-3 prose-td:border-b prose-td:border-gray-200 prose-tr:hover:bg-gray-50 print:prose-base print:max-w-none">
+                <article className="prose prose-lg prose-slate max-w-none prose-headings:font-bold prose-headings:tracking-tight prose-headings:text-gray-900 prose-h1:text-4xl prose-h1:mb-8 prose-h2:text-2xl prose-h2:mt-12 prose-h2:mb-6 prose-h2:pb-2 prose-h2:border-b prose-h2:border-gray-200 prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-4 prose-h3:text-gray-800 prose-p:text-gray-600 prose-p:leading-relaxed prose-p:mb-6 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:text-blue-700 hover:prose-a:underline prose-a:transition-colors prose-strong:font-bold prose-strong:text-gray-900 prose-code:text-blue-600 prose-code:bg-blue-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:content-none prose-code:after:content-none prose-code:font-medium prose-pre:bg-gray-900 prose-pre:text-gray-100 prose-pre:shadow-lg prose-pre:rounded-xl prose-pre:p-6 prose-ul:list-disc prose-ul:pl-6 prose-li:marker:text-gray-400 prose-li:mb-2 prose-ol:list-decimal prose-ol:pl-6 prose-li:mb-2 prose-blockquote:border-l-4 prose-blockquote:border-blue-500 prose-blockquote:bg-blue-50/50 prose-blockquote:py-2 prose-blockquote:px-4 prose-blockquote:rounded-r-lg prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-blockquote:my-8 prose-img:rounded-xl prose-img:shadow-md prose-img:my-8 prose-hr:border-gray-200 prose-hr:my-10 prose-table:w-full prose-th:text-left prose-th:py-2 prose-th:px-3 prose-th:bg-gray-100 prose-th:font-semibold prose-th:text-gray-900 prose-td:py-2 prose-td:px-3 prose-td:border-b prose-td:border-gray-200 prose-tr:hover:bg-gray-50 dark:prose-invert dark:prose-headings:text-slate-100 dark:prose-h2:border-slate-700 dark:prose-h3:text-slate-100 dark:prose-p:text-slate-300 dark:prose-a:text-sky-300 dark:prose-strong:text-slate-100 dark:prose-code:bg-slate-800 dark:prose-code:text-sky-200 dark:prose-blockquote:border-sky-400 dark:prose-blockquote:bg-slate-950/60 dark:prose-blockquote:text-slate-200 dark:prose-hr:border-slate-700 dark:prose-th:bg-slate-800 dark:prose-th:text-slate-100 dark:prose-td:border-slate-700 dark:prose-tr:hover:bg-slate-800/60 print:prose-base print:max-w-none">
                     <MarkdownContent
                         content={documentationMarkdown}
                         /* TODO: !!!!

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

@@ -34,18 +34,18 @@ export function Footer(props: FooterProps) {
     const { t } = useServerLanguage();
 
     return (
-        <footer className="border-t bg-white">
+        <footer className="border-t border-gray-200 bg-white dark:border-slate-700 dark:bg-slate-950">
             <div className="container mx-auto px-6 py-12">
                 <div className="grid grid-cols-1 md:grid-cols-5 gap-8">
                     {/* Company Info */}
                     <div className="space-y-4">
-                        <h3 className="font-bold">{NAME}</h3>
+                        <h3 className="font-bold text-gray-900 dark:text-slate-100">{NAME}</h3>
                         <p className="text-sm text-muted-foreground text-gray-500">{CLAIM}</p>
                     </div>
 
                     {/* Products */}
                     <div className="space-y-4">
-                        <h3 className="font-bold">{t('footer.productSectionTitle')}</h3>
+                        <h3 className="font-bold text-gray-900 dark:text-slate-100">{t('footer.productSectionTitle')}</h3>
                         <ul className="space-y-2 text-sm">
                             <li>
                                 <HeadlessLink href="/get-started" className="text-gray-500 hover:text-gray-900">
@@ -80,7 +80,7 @@ export function Footer(props: FooterProps) {
 
                     {/* Company */}
                     <div className="space-y-4">
-                        <h3 className="font-bold">{t('footer.companySectionTitle')}</h3>
+                        <h3 className="font-bold text-gray-900 dark:text-slate-100">{t('footer.companySectionTitle')}</h3>
                         <ul className="space-y-2 text-sm">
                             <li>
                                 <a
@@ -110,7 +110,7 @@ export function Footer(props: FooterProps) {
 
                     {/* Social */}
                     <div className="space-y-4">
-                        <h3 className="font-bold">{t('footer.connectSectionTitle')}</h3>
+                        <h3 className="font-bold text-gray-900 dark:text-slate-100">{t('footer.connectSectionTitle')}</h3>
                         <ul className="space-y-2 text-sm">
                             <li>
                                 <a
@@ -144,7 +144,7 @@ export function Footer(props: FooterProps) {
                     {/* Extra Links from Metadata */}
                     {extraLinks.length > 0 && (
                         <div className="space-y-4">
-                            <h3 className="font-bold">{t('footer.linksSectionTitle')}</h3>
+                            <h3 className="font-bold text-gray-900 dark:text-slate-100">{t('footer.linksSectionTitle')}</h3>
                             <ul className="space-y-2 text-sm">
                                 {extraLinks.map((link, index) => (
                                     <li key={index}>
@@ -163,7 +163,7 @@ export function Footer(props: FooterProps) {
                     )}
                 </div>
 
-                <div className="border-t mt-8 pt-8 text-center text-sm text-gray-500">
+                <div className="border-t border-gray-200 mt-8 pt-8 text-center text-sm text-gray-500 dark:border-slate-700 dark:text-slate-400">
                     <p>
                         &copy; {new Date().getFullYear()} Promptbook
                         <br />

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

@@ -2,7 +2,7 @@
 
 import { logoutAction } from '@/src/app/actions';
 import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
-import { ArrowRight } from 'lucide-react';
+import { ArrowRight, TriangleAlert } from 'lucide-react';
 import { usePathname, useRouter } from 'next/navigation';
 import { useCallback, useMemo, useState } from 'react';
 import { HamburgerMenu } from '../../../../../src/book-components/_common/HamburgerMenu/HamburgerMenu';
@@ -56,6 +56,7 @@ export function Header(props: HeaderProps) {
         federatedServers,
         isExperimental = false,
         feedbackMode = 'stars',
+        shibbolethAuthenticationStatus,
     } = props;
 
     const [isChangePasswordOpen, setIsChangePasswordOpen] = useState(false);
@@ -248,6 +249,9 @@ export function Header(props: HeaderProps) {
     );
 
     const hasMenuAccess = Boolean(currentUser || isAdmin);
+    const isShibbolethConfigurationWarningShown = Boolean(
+        shibbolethAuthenticationStatus?.isActive && !shibbolethAuthenticationStatus.isConfigured,
+    );
     const systemMenuEntries = useMemo(
         () =>
             buildHeaderSystemMenuItems({
@@ -257,8 +261,21 @@ export function Header(props: HeaderProps) {
                 isGlobalAdmin,
                 isExperimental,
                 feedbackMode,
+                shibbolethAuthenticationStatus,
             }),
-        [currentUser, feedbackMode, isAdmin, isExperimental, isGlobalAdmin, t],
+        [currentUser, feedbackMode, isAdmin, isExperimental, isGlobalAdmin, shibbolethAuthenticationStatus, t],
+    );
+    const systemLabel = useMemo(
+        () =>
+            isShibbolethConfigurationWarningShown ? (
+                <span className="inline-flex items-center gap-2">
+                    {t('header.systemMenuLabel')}
+                    <TriangleAlert className="h-4 w-4 text-amber-500" aria-label="Warning" />
+                </span>
+            ) : (
+                t('header.systemMenuLabel')
+            ),
+        [isShibbolethConfigurationWarningShown, t],
     );
     const menuItems = useMemo(
         () =>
@@ -274,7 +291,7 @@ export function Header(props: HeaderProps) {
                 setIsMobileDocsOpen,
                 setIsMobileSystemOpen,
                 setIsSystemOpen,
-                systemLabel: t('header.systemMenuLabel'),
+                systemLabel,
                 systemMenuEntries,
             }),
         [
@@ -288,6 +305,7 @@ export function Header(props: HeaderProps) {
             setIsMobileDocsOpen,
             setIsMobileSystemOpen,
             setIsSystemOpen,
+            systemLabel,
             systemMenuEntries,
             t,
         ],
@@ -389,7 +407,9 @@ export function Header(props: HeaderProps) {
                                         key={index}
                                         onClick={item.onClick}
                                         className={`rounded-md p-2 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-slate-100 ${
-                                            item.isActive ? 'bg-gray-100 text-gray-900 dark:bg-slate-800 dark:text-slate-100' : ''
+                                            item.isActive
+                                                ? 'bg-gray-100 text-gray-900 dark:bg-slate-800 dark:text-slate-100'
+                                                : ''
                                         }`}
                                         title={item.name}
                                     >

package/apps/agents-server/src/components/Header/HeaderTypes.ts

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import type { AgentOrganizationAgent, AgentOrganizationFolder } from '../../utils/agentOrganization/types';
 import type { ChatFeedbackMode } from '../../utils/chatFeedbackMode';
 import type { UserInfo } from '../../utils/getCurrentUser';
+import type { ShibbolethAuthenticationMenuStatus } from '../../constants/shibbolethAuth';
 import type { SubMenuItem } from './SubMenuItem';
 
 /**
@@ -57,6 +58,11 @@ export type HeaderProps = {
      * Determines which chat feedback mode is active.
      */
     feedbackMode?: ChatFeedbackMode;
+
+    /**
+     * Shibboleth authentication status used to show login-method menu entries and warnings.
+     */
+    shibbolethAuthenticationStatus?: ShibbolethAuthenticationMenuStatus;
 };
 
 /**

package/apps/agents-server/src/components/Header/buildHeaderSystemMenuItems.ts

@@ -5,11 +5,15 @@ import {
     KeyRound,
     RefreshCw,
     Settings2,
+    ShieldCheck,
+    TriangleAlert,
     UserRound,
     Wrench,
     type LucideIcon,
 } from 'lucide-react';
+import { createElement } from 'react';
 import type { ServerTranslationKey } from '../../languages/ServerTranslationKeys';
+import type { ShibbolethAuthenticationMenuStatus } from '../../constants/shibbolethAuth';
 import type { ChatFeedbackMode } from '../../utils/chatFeedbackMode';
 import type { UserInfo } from '../../utils/getCurrentUser';
 import type { SubMenuItem } from './SubMenuItem';
@@ -31,6 +35,7 @@ type SystemCategoryLabel =
     | 'Utilities'
     | 'Super Admin'
     | 'Administration'
+    | 'Login Methods'
     | 'Monitoring & Usage'
     | 'Integrations & Keys'
     | 'Developer / Debug'
@@ -48,6 +53,7 @@ type BuildHeaderSystemMenuItemsOptions = {
     readonly isGlobalAdmin: boolean;
     readonly isExperimental: boolean;
     readonly feedbackMode: ChatFeedbackMode;
+    readonly shibbolethAuthenticationStatus?: ShibbolethAuthenticationMenuStatus;
 };
 
 /**
@@ -58,6 +64,7 @@ const SYSTEM_CATEGORY_ICON_MAP: Record<SystemCategoryLabel, LucideIcon> = {
     Utilities: Wrench,
     'Super Admin': Settings2,
     Administration: Settings2,
+    'Login Methods': KeyRound,
     'Monitoring & Usage': BarChart3,
     'Integrations & Keys': KeyRound,
     'Developer / Debug': Code2,
@@ -72,6 +79,7 @@ const SYSTEM_CATEGORY_TRANSLATION_KEY_MAP: Record<SystemCategoryLabel, ServerTra
     Utilities: 'header.utilities',
     'Super Admin': 'header.superAdmin',
     Administration: 'header.administration',
+    'Login Methods': 'header.loginMethods',
     'Monitoring & Usage': 'header.monitoringAndUsage',
     'Integrations & Keys': 'header.integrationsAndKeys',
     'Developer / Debug': 'header.developerDebug',
@@ -95,6 +103,21 @@ function applyFallbackSubMenuIcon(
     });
 }
 
+/**
+ * Decorates a menu label with the warning indicator used for misconfigured login methods.
+ */
+function createWarningMenuLabel(label: string) {
+    return createElement(
+        'span',
+        { className: 'inline-flex items-center gap-2' },
+        label,
+        createElement(TriangleAlert, {
+            className: 'h-4 w-4 text-amber-500',
+            'aria-label': 'Warning',
+        }),
+    );
+}
+
 /**
  * Creates one category entry inside the System dropdown when there are items to show.
  */
@@ -102,6 +125,7 @@ function createSystemCategory(
     label: SystemCategoryLabel,
     items: ReadonlyArray<SubMenuItem>,
     translate: HeaderTranslate,
+    isWarningShown = false,
 ): SubMenuItem[] {
     if (items.length === 0) {
         return [];
@@ -110,7 +134,9 @@ function createSystemCategory(
     const categoryIcon = SYSTEM_CATEGORY_ICON_MAP[label];
     return [
         {
-            label: translate(SYSTEM_CATEGORY_TRANSLATION_KEY_MAP[label]),
+            label: isWarningShown
+                ? createWarningMenuLabel(translate(SYSTEM_CATEGORY_TRANSLATION_KEY_MAP[label]))
+                : translate(SYSTEM_CATEGORY_TRANSLATION_KEY_MAP[label]),
             icon: categoryIcon,
             items: applyFallbackSubMenuIcon(items, categoryIcon),
         },
@@ -129,6 +155,7 @@ export function buildHeaderSystemMenuItems({
     isGlobalAdmin,
     isExperimental,
     feedbackMode,
+    shibbolethAuthenticationStatus,
 }: BuildHeaderSystemMenuItemsOptions): SubMenuItem[] {
     const userAccountSystemItems: SubMenuItem[] = [
         {
@@ -274,6 +301,23 @@ export function buildHeaderSystemMenuItems({
         },
     ];
 
+    const isShibbolethConfigurationWarningShown = Boolean(
+        shibbolethAuthenticationStatus?.isActive && !shibbolethAuthenticationStatus.isConfigured,
+    );
+    const loginMethodsSystemItems: SubMenuItem[] = shibbolethAuthenticationStatus?.isActive
+        ? [
+              {
+                  label: isShibbolethConfigurationWarningShown
+                      ? createWarningMenuLabel(translate('header.shibboleth'))
+                      : translate('header.shibboleth'),
+                  href: isShibbolethConfigurationWarningShown
+                      ? '/admin/login-methods/shibboleth#setup-instructions'
+                      : '/admin/login-methods/shibboleth',
+                  icon: ShieldCheck,
+              },
+          ]
+        : [];
+
     const monitoringAndUsageSystemItems: SubMenuItem[] = [
         {
             label: translate('header.usageAnalytics'),
@@ -345,6 +389,12 @@ export function buildHeaderSystemMenuItems({
         ...createSystemCategory('Utilities', utilitiesSystemItems, translate),
         ...createSystemCategory('Super Admin', superAdminSystemItems, translate),
         ...createSystemCategory('Administration', administrationSystemItems, translate),
+        ...createSystemCategory(
+            'Login Methods',
+            loginMethodsSystemItems,
+            translate,
+            isShibbolethConfigurationWarningShown,
+        ),
         ...createSystemCategory('Monitoring & Usage', monitoringAndUsageSystemItems, translate),
         ...createSystemCategory('Integrations & Keys', integrationsAndKeysSystemItems, translate),
         ...createSystemCategory('Developer / Debug', developerDebugSystemItems, translate),

package/apps/agents-server/src/components/Homepage/Card.tsx

@@ -15,7 +15,7 @@ type CardProps = {
 export function Card({ children, className = '', style }: CardProps) {
     return (
         <div
-            className={`block h-full p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 border border-gray-200 hover:border-blue-400 ${className}`}
+            className={`block h-full p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 border border-gray-200 hover:border-blue-400 dark:border-slate-700 dark:bg-slate-900/90 dark:text-slate-100 dark:shadow-slate-950/30 dark:hover:border-blue-400/70 ${className}`}
             style={style}
         >
             {children}

package/apps/agents-server/src/components/Homepage/Section.tsx

@@ -51,7 +51,9 @@ export function Section({
 }: SectionProps) {
     return (
         <section className={`mt-16 first:mt-4 mb-4 ${sectionClassName || ''}`.trim()}>
-            <h2 className={`text-3xl text-gray-900 mb-6 font-light ${titleClassName || ''}`.trim()}>{title}</h2>
+            <h2 className={`text-3xl text-gray-900 mb-6 font-light dark:text-slate-100 ${titleClassName || ''}`.trim()}>
+                {title}
+            </h2>
             <div className={gridClassName}>{children}</div>
         </section>
     );

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

@@ -7,6 +7,7 @@ import type { AgentNaming } from '../../utils/agentNaming';
 import type { AgentOrganizationAgent, AgentOrganizationFolder } from '../../utils/agentOrganization/types';
 import type { ChatFeedbackMode } from '../../utils/chatFeedbackMode';
 import type { UserInfo } from '../../utils/getCurrentUser';
+import type { ShibbolethAuthenticationMenuStatus } from '../../constants/shibbolethAuth';
 import { AgentNamingProvider } from '../AgentNaming/AgentNamingContext';
 import { DefaultAgentAvatarVisualProvider } from '../AgentAvatar/DefaultAgentAvatarVisualProvider';
 import { LegacyUiAutoTranslator } from '../AgentNaming/LegacyUiAutoTranslator';
@@ -48,6 +49,10 @@ type LayoutWrapperProps = {
     federatedServers: Array<{ url: string; title: string }>;
     isExperimental: boolean;
     feedbackMode: ChatFeedbackMode;
+    /**
+     * Shibboleth authentication status used by the header menu.
+     */
+    readonly shibbolethAuthenticationStatus: ShibbolethAuthenticationMenuStatus;
     /**
      * Indicates if the install-as-app option should be shown in agent menus.
      */
@@ -88,6 +93,7 @@ export function LayoutWrapper({
     federatedServers,
     isExperimental,
     feedbackMode,
+    shibbolethAuthenticationStatus,
     isExperimentalPwaAppEnabled,
     controlPanelOptionAvailability,
     defaultIsSoundsOn,
@@ -152,7 +158,9 @@ export function LayoutWrapper({
                                                                     }}
                                                                 >
                                                                     {shouldRenderMinimalShell ? (
-                                                                        <main className={minimalMainClassName}>{children}</main>
+                                                                        <main className={minimalMainClassName}>
+                                                                            {children}
+                                                                        </main>
                                                                     ) : (
                                                                         <div className="agents-server-app-shell flex flex-col">
                                                                             <Header
@@ -166,6 +174,9 @@ export function LayoutWrapper({
                                                                                 federatedServers={federatedServers}
                                                                                 isExperimental={isExperimental}
                                                                                 feedbackMode={feedbackMode}
+                                                                                shibbolethAuthenticationStatus={
+                                                                                    shibbolethAuthenticationStatus
+                                                                                }
                                                                             />
                                                                             <main className={mainClassName}>
                                                                                 <HomepageOptimisticNavigation