@promptbook/cli 0.112.0-99 → 0.112.0

package/apps/agents-server/src/components/AdminTerminal/useAdminTerminalSession.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 /**
  * Minimal terminal-session shape used by the shared admin terminal hook.
@@ -100,6 +100,11 @@ type UseAdminTerminalSessionOptions = {
      * Error message shown when the process exits with a non-zero code.
      */
     readonly finishErrorMessage: string;
+
+    /**
+     * Whether the hook should start a session after the initial load finds none.
+     */
+    readonly isAutoStartEnabled?: boolean;
 };
 
 /**
@@ -112,13 +117,13 @@ export function useAdminTerminalSession<TSession extends AdminTerminalSession>(
     options: UseAdminTerminalSessionOptions,
 ) {
     const [session, setSession] = useState<TSession | null>(null);
-    const [input, setInput] = useState('');
     const [isLoadingSession, setIsLoadingSession] = useState(true);
     const [isStarting, setIsStarting] = useState(false);
     const [isSending, setIsSending] = useState(false);
     const [isStopping, setIsStopping] = useState(false);
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
     const [successMessage, setSuccessMessage] = useState<string | null>(null);
+    const hasAutoStartedReference = useRef(false);
 
     /**
      * Loads the latest session snapshot for the current terminal.
@@ -259,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);
@@ -307,6 +314,15 @@ export function useAdminTerminalSession<TSession extends AdminTerminalSession>(
         }
     }, [options.basePath, options.stopErrorMessage, session]);
 
+    useEffect(() => {
+        if (!options.isAutoStartEnabled || hasAutoStartedReference.current || isLoadingSession || session) {
+            return;
+        }
+
+        hasAutoStartedReference.current = true;
+        void startSession();
+    }, [isLoadingSession, options.isAutoStartEnabled, session, startSession]);
+
     /**
      * Clears any terminal status messages shown above the panel.
      */
@@ -317,8 +333,6 @@ export function useAdminTerminalSession<TSession extends AdminTerminalSession>(
 
     return {
         session,
-        input,
-        setInput,
         isLoadingSession,
         isStarting,
         isSending,
@@ -334,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/AgentContextMenu/useAgentContextMenuItems.ts

@@ -300,6 +300,7 @@ function createManagementMenuItems(
  * @param formatText - Agent-aware text formatter.
  * @param handleRequestVisibilityUpdate - Visibility dialog action.
  * @param integrationLink - Generated integration link metadata.
+ * @param isAdmin - Whether the current user is an administrator (gates admin-only links).
  * @param isAuthenticated - Whether the current user is logged in.
  * @param shouldShowVisibilityAction - Whether visibility editing is available.
  * @param usageAnalyticsHref - Usage analytics URL for the current agent.
@@ -311,6 +312,7 @@ function createAdminMenuItems(
     formatText: FormatAgentContextMenuText,
     handleRequestVisibilityUpdate: () => Promise<void>,
     integrationLink: AgentContextMenuNavigationLink,
+    isAdmin: boolean,
     isAuthenticated: boolean,
     shouldShowVisibilityAction: boolean,
     usageAnalyticsHref: string,
@@ -333,26 +335,31 @@ function createAdminMenuItems(
         );
     }
 
+    if (isAdmin) {
+        menuItems.push(
+            {
+                type: 'link',
+                href: `/admin/chat-history?agentName=${encodeURIComponent(agentName)}`,
+                icon: MessageSquareIcon,
+                label: formatText('Chat History'),
+            },
+            {
+                type: 'link',
+                href: usageAnalyticsHref,
+                icon: BarChart3Icon,
+                label: formatText('Usage Analytics'),
+            },
+            {
+                type: 'link',
+                href: `/admin/chat-feedback?agentName=${encodeURIComponent(agentName)}`,
+                icon: MessageCircleQuestionIcon,
+                label: formatText('Chat Feedback'),
+            },
+            createDividerItem(),
+        );
+    }
+
     menuItems.push(
-        {
-            type: 'link',
-            href: `/admin/chat-history?agentName=${encodeURIComponent(agentName)}`,
-            icon: MessageSquareIcon,
-            label: formatText('Chat History'),
-        },
-        {
-            type: 'link',
-            href: usageAnalyticsHref,
-            icon: BarChart3Icon,
-            label: formatText('Usage Analytics'),
-        },
-        {
-            type: 'link',
-            href: `/admin/chat-feedback?agentName=${encodeURIComponent(agentName)}`,
-            icon: MessageCircleQuestionIcon,
-            label: formatText('Chat Feedback'),
-        },
-        createDividerItem(),
         {
             type: 'link',
             href: integrationLink.href,
@@ -437,6 +444,7 @@ export function useAgentContextMenuItems(props: AgentContextMenuBaseProps): Cont
         formatText,
         handleRequestVisibilityUpdate,
         integrationLink,
+        isAdmin,
         isAuthenticated,
         shouldShowVisibilityAction,
         usageAnalyticsHref,

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

@@ -177,26 +177,23 @@ 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)})`,
                                         }}
                                     />
                                 ) : (
                                     <div className="flex h-full w-full items-center justify-center overflow-hidden p-4 md:p-8">
                                         {/* Keep built-in visuals inside a centered square stage so different avatar renderers fit the tall profile card consistently. */}
-                                        <div
-                                            className="flex h-full w-full max-h-[80%] max-w-[80%] items-center justify-center"
-                                            style={{ aspectRatio: '1 / 1' }}
-                                        >
+                                        <div className="flex aspect-square w-[80%] items-center justify-center">
                                             <AgentAvatar
                                                 agent={agent}
                                                 baseUrl={publicUrl}
                                                 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/ApplicationErrorPage/ApplicationErrorPage.tsx

@@ -14,8 +14,10 @@ import {
     createApplicationErrorHeadline,
     createApplicationErrorReportPayload,
     describeApplicationError,
+    isApplicationErrorRecoverableByHardRefresh,
     resolveApplicationErrorVariant,
 } from '../../utils/errorReporting/applicationErrorHandling';
+import { refreshApplicationDocument } from '../../utils/errorReporting/refreshApplicationDocument';
 import { ErrorPageButtonAction, ErrorPageLinkAction } from '../ErrorPage/ErrorPage';
 import { InternalServerErrorPage } from '../InternalServerErrorPage/InternalServerErrorPage';
 
@@ -27,7 +29,7 @@ import { InternalServerErrorPage } from '../InternalServerErrorPage/InternalServ
 const troubleshootingSteps = [
     {
         title: 'Refresh the route',
-        detail: 'Try "Try again" so the last navigation runs with fresh cookies, network state, and session data.',
+        detail: 'Use the primary action so the page can retry with fresh cookies, network state, and build assets.',
     },
     {
         title: 'Share the digest',
@@ -46,6 +48,20 @@ const troubleshootingSteps = [
  */
 const REPORT_ACTION_FEEDBACK_DURATION_MS = 2500;
 
+/**
+ * Delay before one recoverable stale-asset error triggers an automatic full-document refresh.
+ *
+ * @private
+ */
+const APPLICATION_ERROR_AUTO_REFRESH_DELAY_MS = 1500;
+
+/**
+ * Prefix used for session-scoped stale-asset refresh guards.
+ *
+ * @private
+ */
+const APPLICATION_ERROR_AUTO_REFRESH_STORAGE_KEY_PREFIX = 'promptbook.application-error-hard-refresh';
+
 /**
  * Writes plain text to the user clipboard.
  *
@@ -82,17 +98,25 @@ function downloadMarkdownReport(reportMarkdown: string, filename: string): void
     URL.revokeObjectURL(reportUrl);
 }
 
+/**
+ * Builds the session-storage key used to ensure one stale-asset error only auto-refreshes once per URL and digest.
+ *
+ * @param pageUrl - Browser URL where the error happened.
+ * @param digest - Deterministic digest rendered for the error.
+ * @returns Stable session-storage key for the current recoverable error.
+ *
+ * @private
+ */
+function createApplicationErrorAutoRefreshStorageKey(pageUrl: string, digest: string): string {
+    return `${APPLICATION_ERROR_AUTO_REFRESH_STORAGE_KEY_PREFIX}:${pageUrl}:${digest}`;
+}
+
 /**
  * Props accepted by shared action controls used across error variants.
  *
  * @private
  */
 type ApplicationErrorActionsProps = {
-    /**
-     * Callback that retries the failed route transition.
-     */
-    reset: () => void;
-
     /**
      * Digest value displayed for operator correlation.
      */
@@ -107,6 +131,16 @@ type ApplicationErrorActionsProps = {
      * Default filename used by the markdown save action.
      */
     reportFilename: string;
+
+    /**
+     * Primary action label rendered on the left-most action button.
+     */
+    primaryActionLabel: string;
+
+    /**
+     * Callback used by the left-most primary action button.
+     */
+    onPrimaryAction: () => void;
 };
 
 /**
@@ -117,10 +151,11 @@ type ApplicationErrorActionsProps = {
  * @private
  */
 function ApplicationErrorActions({
-    reset,
     digest,
     reportMarkdown,
     reportFilename,
+    primaryActionLabel,
+    onPrimaryAction,
 }: ApplicationErrorActionsProps) {
     const [reportFeedback, setReportFeedback] = useState<string | null>(null);
     const reportFeedbackTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -179,9 +214,7 @@ function ApplicationErrorActions({
     return (
         <div className="flex flex-col items-center gap-3">
             <div className="flex flex-wrap justify-center gap-3">
-                <ErrorPageButtonAction onClick={() => reset()}>
-                    Try again
-                </ErrorPageButtonAction>
+                <ErrorPageButtonAction onClick={onPrimaryAction}>{primaryActionLabel}</ErrorPageButtonAction>
                 <ErrorPageLinkAction href="/" tone="secondary">
                     Go to homepage
                 </ErrorPageLinkAction>
@@ -245,10 +278,25 @@ type ApplicationErrorViewProps = {
      */
     size?: 'default' | 'wide';
 
+    /**
+     * Primary action label rendered on the left-most action button.
+     */
+    primaryActionLabel: string;
+
+    /**
+     * Callback used by the left-most primary action button.
+     */
+    onPrimaryAction: () => void;
+
     /**
      * Optional supplementary content rendered beneath shared actions.
      */
     supplementaryContent?: ReactNode;
+
+    /**
+     * Optional recovery note rendered between the actions and supplementary content.
+     */
+    recoveryNotice?: ReactNode;
 };
 
 /**
@@ -264,18 +312,22 @@ function ApplicationErrorView({
     digest,
     reportMarkdown,
     reportFilename,
-    reset,
     size = 'default',
+    primaryActionLabel,
+    onPrimaryAction,
+    recoveryNotice,
     supplementaryContent,
 }: ApplicationErrorViewProps) {
     return (
         <InternalServerErrorPage headline={headline} description={description} size={size}>
             <ApplicationErrorActions
-                reset={reset}
                 digest={digest}
                 reportMarkdown={reportMarkdown}
                 reportFilename={reportFilename}
+                primaryActionLabel={primaryActionLabel}
+                onPrimaryAction={onPrimaryAction}
             />
+            {recoveryNotice}
             {supplementaryContent}
         </InternalServerErrorPage>
     );
@@ -374,9 +426,11 @@ export function ApplicationErrorPage({ error, reset }: ApplicationErrorPageProps
     );
     const digest = createApplicationErrorDigest(error);
     const serverName = process.env.NEXT_PUBLIC_SERVER_NAME ?? DEFAULT_APPLICATION_ERROR_SERVER_NAME;
+    const isRecoverableByHardRefresh = isApplicationErrorRecoverableByHardRefresh(error);
     const headline = createApplicationErrorHeadline(serverName);
     const description = describeApplicationError(error, serverName);
     const [pageUrl, setPageUrl] = useState<string | undefined>(undefined);
+    const [hasAutomaticRefreshAlreadyBeenAttempted, setHasAutomaticRefreshAlreadyBeenAttempted] = useState(false);
     const reportPayload = useMemo(
         () => createApplicationErrorReportPayload(error, digest, serverName, variant, pageUrl),
         [digest, error, pageUrl, serverName, variant],
@@ -392,6 +446,35 @@ export function ApplicationErrorPage({ error, reset }: ApplicationErrorPageProps
         setPageUrl(window.location.href);
     }, []);
 
+    useEffect(() => {
+        if (!pageUrl || !isRecoverableByHardRefresh) {
+            setHasAutomaticRefreshAlreadyBeenAttempted(false);
+            return undefined;
+        }
+
+        const storageKey = createApplicationErrorAutoRefreshStorageKey(pageUrl, digest);
+
+        try {
+            const hasStoredRefreshAttempt = window.sessionStorage.getItem(storageKey) === 'done';
+            if (hasStoredRefreshAttempt) {
+                setHasAutomaticRefreshAlreadyBeenAttempted(true);
+                return undefined;
+            }
+
+            window.sessionStorage.setItem(storageKey, 'done');
+        } catch {
+            // Some browser privacy modes may block session storage; the one-shot reload remains best-effort.
+        }
+
+        const timeout = window.setTimeout(() => {
+            refreshApplicationDocument();
+        }, APPLICATION_ERROR_AUTO_REFRESH_DELAY_MS);
+
+        return () => {
+            window.clearTimeout(timeout);
+        };
+    }, [digest, isRecoverableByHardRefresh, pageUrl]);
+
     useEffect(() => {
         if (!pageUrl) {
             return;
@@ -408,6 +491,23 @@ export function ApplicationErrorPage({ error, reset }: ApplicationErrorPageProps
         });
     }, [error, pageUrl, reportPayload]);
 
+    const primaryActionLabel = isRecoverableByHardRefresh ? 'Refresh now' : 'Try again';
+    const handlePrimaryAction = () => {
+        if (isRecoverableByHardRefresh) {
+            refreshApplicationDocument();
+            return;
+        }
+
+        reset();
+    };
+    const recoveryNotice = isRecoverableByHardRefresh ? (
+        <p className="mt-6 text-center text-sm text-gray-600">
+            {hasAutomaticRefreshAlreadyBeenAttempted
+                ? 'Automatic refresh already ran once. If the newest assets still do not load, use "Refresh now" or share the digest with your administrator.'
+                : 'Refreshing this page automatically once so the latest application files can be loaded.'}
+        </p>
+    ) : undefined;
+
     if (variant === 'simple') {
         return (
             <SimpleApplicationErrorView
@@ -417,6 +517,9 @@ export function ApplicationErrorPage({ error, reset }: ApplicationErrorPageProps
                 reportMarkdown={reportMarkdown}
                 reportFilename={reportFilename}
                 reset={reset}
+                recoveryNotice={recoveryNotice}
+                primaryActionLabel={primaryActionLabel}
+                onPrimaryAction={handlePrimaryAction}
             />
         );
     }
@@ -429,6 +532,9 @@ export function ApplicationErrorPage({ error, reset }: ApplicationErrorPageProps
             reportMarkdown={reportMarkdown}
             reportFilename={reportFilename}
             reset={reset}
+            recoveryNotice={recoveryNotice}
+            primaryActionLabel={primaryActionLabel}
+            onPrimaryAction={handlePrimaryAction}
         />
     );
 }

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/FileUploadAvailability/FileUploadAvailabilityContext.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { createContext, useContext, type ReactNode } from 'react';
+import {
+    AVAILABLE_FILE_UPLOAD,
+    type FileUploadAvailability,
+} from '../../utils/upload/fileUploadAvailability';
+
+/**
+ * Context carrying file upload availability for the current server/domain.
+ */
+const FileUploadAvailabilityContext = createContext<FileUploadAvailability>(AVAILABLE_FILE_UPLOAD);
+
+/**
+ * Props consumed by `FileUploadAvailabilityProvider`.
+ */
+type FileUploadAvailabilityProviderProps = {
+    /**
+     * Current upload availability state.
+     */
+    readonly value: FileUploadAvailability;
+
+    /**
+     * Nested app content.
+     */
+    readonly children: ReactNode;
+};
+
+/**
+ * Provides file upload availability to upload controls.
+ *
+ * @param props - Provider props.
+ * @returns Provider-wrapped children.
+ */
+export function FileUploadAvailabilityProvider(props: FileUploadAvailabilityProviderProps) {
+    return (
+        <FileUploadAvailabilityContext.Provider value={props.value}>
+            {props.children}
+        </FileUploadAvailabilityContext.Provider>
+    );
+}
+
+/**
+ * Reads the current file upload availability state.
+ *
+ * @returns Current upload availability state.
+ */
+export function useFileUploadAvailability(): FileUploadAvailability {
+    return useContext(FileUploadAvailabilityContext);
+}