@promptbook/cli 0.112.0-99 → 0.113.0-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/AgentCapabilityChips.tsx

@@ -18,6 +18,7 @@ import {
     Users,
 } from 'lucide-react';
 import NextLink from 'next/link';
+import { isVoidPseudoAgentReference } from '../../../../../src/book-2.0/agent-source/pseudoAgentReferences';
 import { simplifyKnowledgeLabel } from '@/src/utils/knowledge/simplifyKnowledgeLabel';
 import { buildFreshAgentChatHrefFromAgentUrl } from '../../utils/agentRouting/agentRouteHrefs';
 import { TeamCommitmentChip } from './TeamCommitmentChip';
@@ -32,6 +33,11 @@ export const HOMEPAGE_CAPABILITY_CHIPS_LIMIT = 3;
  */
 export const AGENT_PROFILE_CAPABILITY_CHIPS_LIMIT = 7;
 
+/**
+ * Capability types omitted from homepage agent cards.
+ */
+export const AGENT_CARD_HIDDEN_CAPABILITY_TYPES: ReadonlyArray<AgentCapability['type']> = ['time'];
+
 /**
  * Constant for max individual knowledge chips.
  */
@@ -82,6 +88,11 @@ type AgentCapabilityChipsProps = {
      * Visual size preset for chip rendering.
      */
     readonly size?: AgentCapabilityChipsSize;
+
+    /**
+     * Capability types that should be omitted from this chip list.
+     */
+    readonly hiddenCapabilityTypes?: ReadonlyArray<AgentCapability['type']>;
 };
 
 /**
@@ -107,13 +118,23 @@ type OrderedCapability = {
 /**
  * Render capability chips for an agent with priority, grouping, and limits.
  */
-export function AgentCapabilityChips({ agent, className, maxChips, size = 'default' }: AgentCapabilityChipsProps) {
+export function AgentCapabilityChips({
+    agent,
+    className,
+    maxChips,
+    size = 'default',
+    hiddenCapabilityTypes = [],
+}: AgentCapabilityChipsProps) {
     if (!agent.capabilities || agent.capabilities.length === 0) {
         return null;
     }
 
     const maxChipsToDisplay = maxChips ?? AGENT_PROFILE_CAPABILITY_CHIPS_LIMIT;
-    const displayedCapabilities = selectCapabilitiesForDisplay(agent.capabilities, maxChipsToDisplay);
+    const displayedCapabilities = selectCapabilitiesForDisplay(
+        agent.capabilities,
+        maxChipsToDisplay,
+        hiddenCapabilityTypes,
+    );
 
     if (displayedCapabilities.length === 0) {
         return null;
@@ -228,12 +249,13 @@ export function AgentCapabilityChips({ agent, className, maxChips, size = 'defau
 function selectCapabilitiesForDisplay(
     capabilities: Array<AgentCapability>,
     maxChips: number,
+    hiddenCapabilityTypes: ReadonlyArray<AgentCapability['type']>,
 ): Array<AgentCapability> {
     if (maxChips <= 0) {
         return [];
     }
 
-    const normalizedCapabilities = normalizeCapabilities(capabilities);
+    const normalizedCapabilities = normalizeCapabilities(capabilities, hiddenCapabilityTypes);
     const groupedCapabilities = groupKnowledgeCapabilities(normalizedCapabilities);
     const prioritizedCapabilities = groupedCapabilities
         .map((item, index) => ({
@@ -263,11 +285,23 @@ function selectCapabilitiesForDisplay(
  * @param capabilities - Raw capability list from the agent.
  * @returns Normalized capabilities with ordering metadata.
  */
-function normalizeCapabilities(capabilities: Array<AgentCapability>): Array<OrderedCapability> {
+function normalizeCapabilities(
+    capabilities: Array<AgentCapability>,
+    hiddenCapabilityTypes: ReadonlyArray<AgentCapability['type']>,
+): Array<OrderedCapability> {
+    const hiddenCapabilityTypeSet = new Set(hiddenCapabilityTypes);
+
     return capabilities
         .map((capability, index) => ({ capability, order: index }))
         .filter((item) => {
-            if (item.capability.type === 'inheritance' && item.capability.agentUrl === 'VOID') {
+            if (hiddenCapabilityTypeSet.has(item.capability.type)) {
+                return false;
+            }
+
+            if (
+                item.capability.type === 'inheritance' &&
+                isVoidPseudoAgentReference(item.capability.agentUrl || item.capability.label)
+            ) {
                 return false;
             }
 

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" />