@promptbook/cli 0.104.0-1 → 0.104.0-2

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

@@ -2,13 +2,10 @@
 
 import { AgentBasicInformation } from '@promptbook-local/types';
 import { RepeatIcon } from 'lucide-react';
-import { useMemo, useState } from 'react';
-import spaceTrim from 'spacetrim';
-import { Color } from '../../../../../src/utils/color/Color';
-import { darken } from '../../../../../src/utils/color/operators/darken';
-import { lighten } from '../../../../../src/utils/color/operators/lighten';
+import { useState } from 'react';
 import { AgentQrCode } from './AgentQrCode';
 import { QrCodeModal } from './QrCodeModal';
+import { useAgentBackground } from './useAgentBackground';
 
 type AgentProfileProps = {
     /**
@@ -88,95 +85,7 @@ export function AgentProfile(props: AgentProfileProps) {
     }
 
     // Compute Colors and Background
-    const { brandColorHex, brandColorLightHex, brandColorDarkHex, backgroundImage } = useMemo(() => {
-        // [🧠] Default color should be imported constant, but for now hardcoded fallback
-        const PROMPTBOOK_COLOR_HEX = '#f15b24'; // TODO: Import PROMPTBOOK_COLOR
-        const brandColorString = meta.color || PROMPTBOOK_COLOR_HEX;
-
-        let brandColor;
-        try {
-            brandColor = Color.fromSafe(brandColorString.split(',')[0].trim());
-        } catch {
-            brandColor = Color.fromHex(PROMPTBOOK_COLOR_HEX);
-        }
-
-        const brandColorHex = brandColor.toHex();
-        const brandColorLightHex = brandColor.then(lighten(0.2)).toHex();
-        const brandColorDarkHex = brandColor.then(darken(0.15)).toHex();
-
-        // Generate Noisy SVG Background
-        const color1 = brandColor;
-        // const color2 = brandColors[1] || brandColors[0]!; // Use secondary color if available?
-        // For simplicity using primary color for now or derive second one
-        const color2 = brandColor;
-
-        // [🧠] Make colors much lighter for the background
-        const color1Light = color1.then(lighten(0.3)).toHex();
-        const color1Main = color1.toHex();
-        const color1Dark = color1.then(darken(0.3)).toHex();
-
-        const color2Light = color2.then(lighten(0.3)).toHex();
-        const color2Main = color2.toHex();
-        const color2Dark = color2.then(darken(0.3)).toHex();
-
-        const svgContent = spaceTrim(`
-            <svg xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 1920 1080"
-              width="1920" height="1080"
-              preserveAspectRatio="xMidYMid slice">
-              <defs>
-                <!-- Bottom-left -->
-                <radialGradient id="grad1" cx="0%" cy="100%" r="90%">
-                  <stop offset="0%" stop-color="${color1Light}" />
-                  <stop offset="50%" stop-color="${color1Main}" />
-                  <stop offset="100%" stop-color="${color1Dark}" />
-                </radialGradient>
-
-                <!-- Bottom-right -->
-                <radialGradient id="grad2" cx="100%" cy="100%" r="90%">
-                  <stop offset="0%" stop-color="${color2Light}" />
-                  <stop offset="50%" stop-color="${color2Main}" />
-                  <stop offset="100%" stop-color="${color2Dark}" />
-                </radialGradient>
-
-                <!-- White top fade -->
-                <linearGradient id="whiteTopGrad" x1="0%" y1="0%" x2="0%" y2="100%">
-                  <stop offset="0%" stop-color="#ffffff" stop-opacity="1" />
-                  <stop offset="100%" stop-color="#ffffff" stop-opacity="0.3" />
-                </linearGradient>
-
-                <!-- Strong grain -->
-                <filter id="grain" x="-10%" y="-10%" width="120%" height="120%">
-                  <feTurbulence type="fractalNoise" baseFrequency="3.5" numOctaves="3" seed="8" result="noise" />
-                  <feComponentTransfer>
-                    <feFuncR type="linear" slope="3.5" intercept="-1.2" />
-                    <feFuncG type="linear" slope="3.5" intercept="-1.2" />
-                    <feFuncB type="linear" slope="3.5" intercept="-1.2" />
-                    <feFuncA type="table" tableValues="0 0.8" />
-                  </feComponentTransfer>
-                </filter>
-              </defs>
-
-              <!-- White base -->
-              <rect width="100%" height="100%" fill="#ffffff" />
-
-              <!-- Gradients -->
-              <rect width="100%" height="100%" fill="url(#grad1)" />
-              <rect width="100%" height="100%" fill="url(#grad2)" style="mix-blend-mode:screen; opacity:0.85" />
-
-              <!-- White fade on top -->
-              <rect width="100%" height="100%" fill="url(#whiteTopGrad)" />
-
-              <!-- Strong visible noise -->
-              <rect width="100%" height="100%" filter="url(#grain)"
-                style="mix-blend-mode:soft-light; opacity:1.2" />
-            </svg>
-        `);
-
-        const backgroundImage = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgContent)}`;
-
-        return { brandColorHex, brandColorLightHex, brandColorDarkHex, backgroundImage };
-    }, [meta.color]);
+    const { brandColorHex, brandColorLightHex, brandColorDarkHex, backgroundImage } = useAgentBackground(meta.color);
 
     return (
         <>
@@ -230,6 +139,8 @@ export function AgentProfile(props: AgentProfileProps) {
                                     backfaceVisibility: 'hidden',
                                     backgroundColor: brandColorDarkHex,
                                     boxShadow: `0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px ${brandColorLightHex}40`,
+                                    // borderRadius: '50%',
+                                    // ['cornerShape' as really_any]: 'squircle ',
                                 }}
                             >
                                 {imageUrl ? (
@@ -298,9 +209,7 @@ export function AgentProfile(props: AgentProfileProps) {
                     </div>
 
                     {/* Chat Area */}
-                    <div className="col-span-2 md:col-span-1 md:col-start-2 w-full mt-2 md:mt-0">
-                        {children}
-                    </div>
+                    <div className="col-span-2 md:col-span-1 md:col-start-2 w-full mt-2 md:mt-0">{children}</div>
 
                     {/* Secondary Actions */}
                     {!isHeadless && (

package/apps/agents-server/src/components/AgentProfile/useAgentBackground.ts

@@ -0,0 +1,97 @@
+import { Color } from '../../../../../src/utils/color/Color';
+import { darken } from '../../../../../src/utils/color/operators/darken';
+import { lighten } from '../../../../../src/utils/color/operators/lighten';
+import { useMemo } from 'react';
+import spaceTrim from 'spacetrim';
+
+export function useAgentBackground(colorString: string | undefined) {
+    return useMemo(() => {
+        // [🧠] Default color should be imported constant, but for now hardcoded fallback
+        const PROMPTBOOK_COLOR_HEX = '#f15b24'; // TODO: Import PROMPTBOOK_COLOR
+        const brandColorString = colorString || PROMPTBOOK_COLOR_HEX;
+
+        let brandColor;
+        try {
+            brandColor = Color.fromSafe(brandColorString.split(',')[0].trim());
+        } catch {
+            brandColor = Color.fromHex(PROMPTBOOK_COLOR_HEX);
+        }
+
+        const brandColorHex = brandColor.toHex();
+        const brandColorLightHex = brandColor.then(lighten(0.2)).toHex();
+        const brandColorDarkHex = brandColor.then(darken(0.15)).toHex();
+
+        // Generate Noisy SVG Background
+        const color1 = brandColor;
+        // const color2 = brandColors[1] || brandColors[0]!; // Use secondary color if available?
+        // For simplicity using primary color for now or derive second one
+        const color2 = brandColor;
+
+        // [🧠] Make colors much lighter for the background
+        const color1Light = color1.then(lighten(0.3)).toHex();
+        const color1Main = color1.toHex();
+        const color1Dark = color1.then(darken(0.3)).toHex();
+
+        const color2Light = color2.then(lighten(0.3)).toHex();
+        const color2Main = color2.toHex();
+        const color2Dark = color2.then(darken(0.3)).toHex();
+
+        const svgContent = spaceTrim(`
+            <svg xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 1920 1080"
+              width="1920" height="1080"
+              preserveAspectRatio="xMidYMid slice">
+              <defs>
+                <!-- Bottom-left -->
+                <radialGradient id="grad1" cx="0%" cy="100%" r="90%">
+                  <stop offset="0%" stop-color="${color1Light}" />
+                  <stop offset="50%" stop-color="${color1Main}" />
+                  <stop offset="100%" stop-color="${color1Dark}" />
+                </radialGradient>
+
+                <!-- Bottom-right -->
+                <radialGradient id="grad2" cx="100%" cy="100%" r="90%">
+                  <stop offset="0%" stop-color="${color2Light}" />
+                  <stop offset="50%" stop-color="${color2Main}" />
+                  <stop offset="100%" stop-color="${color2Dark}" />
+                </radialGradient>
+
+                <!-- White top fade -->
+                <linearGradient id="whiteTopGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+                  <stop offset="0%" stop-color="#ffffff" stop-opacity="1" />
+                  <stop offset="100%" stop-color="#ffffff" stop-opacity="0.3" />
+                </linearGradient>
+
+                <!-- Strong grain -->
+                <filter id="grain" x="-10%" y="-10%" width="120%" height="120%">
+                  <feTurbulence type="fractalNoise" baseFrequency="3.5" numOctaves="3" seed="8" result="noise" />
+                  <feComponentTransfer>
+                    <feFuncR type="linear" slope="3.5" intercept="-1.2" />
+                    <feFuncG type="linear" slope="3.5" intercept="-1.2" />
+                    <feFuncB type="linear" slope="3.5" intercept="-1.2" />
+                    <feFuncA type="table" tableValues="0 0.8" />
+                  </feComponentTransfer>
+                </filter>
+              </defs>
+
+              <!-- White base -->
+              <rect width="100%" height="100%" fill="#ffffff" />
+
+              <!-- Gradients -->
+              <rect width="100%" height="100%" fill="url(#grad1)" />
+              <rect width="100%" height="100%" fill="url(#grad2)" style="mix-blend-mode:screen; opacity:0.85" />
+
+              <!-- White fade on top -->
+              <rect width="100%" height="100%" fill="url(#whiteTopGrad)" />
+
+              <!-- Strong visible noise -->
+              <rect width="100%" height="100%" filter="url(#grain)"
+                style="mix-blend-mode:soft-light; opacity:1.2" />
+            </svg>
+        `);
+
+        const backgroundImage = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgContent)}`;
+
+        return { brandColorHex, brandColorLightHex, brandColorDarkHex, backgroundImage };
+    }, [colorString]);
+}

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

@@ -0,0 +1,26 @@
+'use client';
+
+type DeletedAgentBannerProps = {
+    message?: string;
+};
+
+export function DeletedAgentBanner({
+    message = "This agent has been deleted. You can restore it from the Recycle Bin."
+}: DeletedAgentBannerProps) {
+    return (
+        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
+            <div className="flex">
+                <div className="flex-shrink-0">
+                    <svg className="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
+                        <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                    </svg>
+                </div>
+                <div className="ml-3">
+                    <p className="text-sm text-yellow-700">
+                        {message}
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,38 @@
+'use client';
+
+import { Download, PrinterIcon } from 'lucide-react';
+import Link from 'next/link';
+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 items-center gap-2">
+                <OpenMojiIcon icon="📚" className="text-2xl" />
+                <span className="font-semibold text-gray-700">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"
+                    title="Print this page or save as PDF"
+                >
+                    <PrinterIcon className="w-4 h-4" />
+                    Print / Save as PDF
+                </button>
+
+                <Link
+                    href="/api/docs/book.md"
+                    download="book.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"
+                    title="Download raw Markdown documentation"
+                >
+                    <Download className="w-4 h-4" />
+                    Download Markdown
+                </Link>
+            </div>
+        </div>
+    );
+}

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

@@ -17,34 +17,36 @@ export function DocumentationContent({ primary, aliases = [], isPrintOnly = fals
         <div
             className={`bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden ${
                 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 ${
                     isPrintOnly ? 'border-none bg-white p-0 mb-4' : ''
-                }`}
+                } print:p-0 print:border-none print:bg-white print:mb-4`}
             >
                 <div className="flex items-center gap-4 mb-4">
-                    <h1 className="text-4xl font-bold text-gray-900 tracking-tight">
-                        <OpenMojiIcon icon={primary.icon} className="mr-3" />
+                    <h1 className="text-4xl font-bold text-gray-900 tracking-tight print:text-3xl">
+                        <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">/ {aliases.join(' / ')}</span>
+                            <span className="text-gray-400 font-normal ml-4 text-2xl 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">
+                        <span className="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700 print:hidden">
                             Commitment
                         </span>
                     )}
                 </div>
                 {primary.description && (
-                    <p className="text-xl text-gray-600 leading-relaxed max-w-3xl">{primary.description}</p>
+                    <p className="text-xl text-gray-600 leading-relaxed max-w-3xl print:text-lg">{primary.description}</p>
                 )}
             </div>
 
-            <div className={`p-8 ${isPrintOnly ? '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">
+            <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">
                     <MarkdownContent
                         content={primary.documentation}
                         /* TODO: !!!!

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

@@ -114,10 +114,7 @@ export function Footer(props: FooterProps) {
                                 </a>
                             </li>
                             <li>
-                                <a
-                                    href="https://discord.gg/x3QWNaa89N"
-                                    className="text-gray-500 hover:text-gray-900"
-                                >
+                                <a href="https://discord.gg/x3QWNaa89N" className="text-gray-500 hover:text-gray-900">
                                     Discord
                                 </a>
                             </li>
@@ -160,8 +157,10 @@ export function Footer(props: FooterProps) {
                         💜
                     </p>
                 </div>
+                {/*
+                TODO: [🧠] Should we show this in the footer?
                 <div className="flex flex-col items-center mt-8">
-                    {/* <Image src={TechnologyIncubation} alt="Our Sponsor" className="h-32 w-auto" /> */}
+                    {/* <Image src={TechnologyIncubation} alt="Our Sponsor" className="h-32 w-auto" /> * /}
                     <p className="text-center text-sm text-gray-500 mt-4 max-w-lg">
                         This project was implemented with funding from the national budget
                         <br />
@@ -169,6 +168,7 @@ export function Footer(props: FooterProps) {
                         Incubation programme.
                     </p>
                 </div>
+                */}
             </div>
         </footer>
     );

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

@@ -0,0 +1,61 @@
+'use client';
+
+import { X } from 'lucide-react';
+import { Portal } from '../Portal/Portal';
+
+type ForgottenPasswordDialogProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    adminEmail: string;
+};
+
+export function ForgottenPasswordDialog(props: ForgottenPasswordDialogProps) {
+    const { isOpen, onClose, adminEmail } = props;
+
+    if (!isOpen) {
+        return null;
+    }
+
+    return (
+        <Portal>
+            <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm animate-in fade-in duration-200">
+                <div className="relative w-full max-w-md bg-white rounded-lg shadow-lg border border-gray-200 p-6 animate-in zoom-in-95 duration-200">
+                    <button
+                        onClick={onClose}
+                        className="absolute top-4 right-4 text-gray-400 hover:text-gray-500 transition-colors"
+                    >
+                        <X className="w-5 h-5" />
+                        <span className="sr-only">Close</span>
+                    </button>
+
+                    <div className="mb-6">
+                        <h2 className="text-xl font-semibold text-gray-900">Forgotten Password</h2>
+                        <p className="text-sm text-gray-500 mt-1">Reset your password</p>
+                    </div>
+
+                    <div className="space-y-4">
+                        <div className="p-4 bg-blue-50 border border-blue-200 rounded-md">
+                            <p className="text-sm text-blue-800">
+                                This Promptbook server has no email capability. Please contact the administrator at{' '}
+                                <a
+                                    href={`mailto:${adminEmail}`}
+                                    className="font-medium text-blue-900 underline hover:text-blue-800"
+                                >
+                                    {adminEmail}
+                                </a>{' '}
+                                to reset your password.
+                            </p>
+                        </div>
+
+                        <button
+                            onClick={onClose}
+                            className="w-full inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 bg-gray-100 text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
+                        >
+                            Close
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </Portal>
+    );
+}

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

@@ -9,6 +9,7 @@ import { useRouter } from 'next/navigation';
 import { ReactNode, useState } from 'react';
 import { AgentBasicInformation } from '../../../../../src/book-2.0/agent-source/AgentBasicInformation';
 import { HamburgerMenu } from '../../../../../src/book-components/_common/HamburgerMenu/HamburgerMenu';
+import { useMenuHoisting } from '../../../../../src/book-components/_common/MenuHoisting/MenuHoistingContext';
 import { just } from '../../../../../src/utils/organization/just';
 import type { UserInfo } from '../../utils/getCurrentUser';
 import { getVisibleCommitmentDefinitions } from '../../utils/getVisibleCommitmentDefinitions';
@@ -92,6 +93,7 @@ export function Header(props: HeaderProps) {
     const [isCreatingAgent, setIsCreatingAgent] = useState(false);
     const router = useRouter();
     const isHeadless = useIsHeadless();
+    const menuHoisting = useMenuHoisting();
 
     const { users: adminUsers } = useUsersAdmin();
 
@@ -320,44 +322,46 @@ export function Header(props: HeaderProps) {
 
                     {/* Desktop Navigation */}
                     <nav className="hidden lg:flex items-center gap-8">
-                        {/* Federated servers dropdown */}
-                        <div className="relative">
-                            <button
-                                className="flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors cursor-pointer"
-                                onClick={() => setIsFederatedOpen(!isFederatedOpen)}
-                                onBlur={() => setTimeout(() => setIsFederatedOpen(false), 200)}
-                            >
-                                <ChevronDown className="w-4 h-4" />
-                                <span>Switch server</span>
-                            </button>
-                            {isFederatedOpen && (
-                                <div className="absolute top-full left-0 mt-2 w-56 bg-white rounded-md shadow-lg border border-gray-100 py-1 z-50 animate-in fade-in zoom-in-95 duration-200 max-h-[80vh] overflow-y-auto">
-                                    {federatedDropdownItems.map((subItem, subIndex) => {
-                                        const className = `block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-gray-900 ${
-                                            subItem.isBold ? 'font-medium' : ''
-                                        } ${subItem.isBordered ? 'border-b border-gray-100' : ''}`;
-
-                                        if (subItem.href) {
+                        {/* Federated servers dropdown - only show if there are federated servers */}
+                        {federatedServers.length > 0 && (
+                            <div className="relative">
+                                <button
+                                    className="flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors cursor-pointer"
+                                    onClick={() => setIsFederatedOpen(!isFederatedOpen)}
+                                    onBlur={() => setTimeout(() => setIsFederatedOpen(false), 200)}
+                                >
+                                    <ChevronDown className="w-4 h-4" />
+                                    <span>Switch server</span>
+                                </button>
+                                {isFederatedOpen && (
+                                    <div className="absolute top-full left-0 mt-2 w-56 bg-white rounded-md shadow-lg border border-gray-100 py-1 z-50 animate-in fade-in zoom-in-95 duration-200 max-h-[80vh] overflow-y-auto">
+                                        {federatedDropdownItems.map((subItem, subIndex) => {
+                                            const className = `block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-gray-900 ${
+                                                subItem.isBold ? 'font-medium' : ''
+                                            } ${subItem.isBordered ? 'border-b border-gray-100' : ''}`;
+
+                                            if (subItem.href) {
+                                                return (
+                                                    <HeadlessLink
+                                                        key={subIndex}
+                                                        href={subItem.href}
+                                                        className={className}
+                                                        onClick={() => setIsFederatedOpen(false)}
+                                                    >
+                                                        {subItem.label}
+                                                    </HeadlessLink>
+                                                );
+                                            }
                                             return (
-                                                <HeadlessLink
-                                                    key={subIndex}
-                                                    href={subItem.href}
-                                                    className={className}
-                                                    onClick={() => setIsFederatedOpen(false)}
-                                                >
+                                                <span key={subIndex} className={className}>
                                                     {subItem.label}
-                                                </HeadlessLink>
+                                                </span>
                                             );
-                                        }
-                                        return (
-                                            <span key={subIndex} className={className}>
-                                                {subItem.label}
-                                            </span>
-                                        );
-                                    })}
-                                </div>
-                            )}
-                        </div>
+                                        })}
+                                    </div>
+                                )}
+                            </div>
+                        )}
                         {menuItems.map((item, index) => {
                             if (item.type === 'link') {
                                 return (
@@ -433,6 +437,24 @@ export function Header(props: HeaderProps) {
                         )}
                     </nav>
 
+                    {/* Hoisted Menu Items */}
+                    {menuHoisting && menuHoisting.menu.length > 0 && (
+                        <div className="hidden lg:flex items-center gap-2 border-r border-gray-200 pr-4 mr-2">
+                            {menuHoisting.menu.map((item, index) => (
+                                <button
+                                    key={index}
+                                    onClick={item.onClick}
+                                    className={`p-2 rounded-md hover:bg-gray-100 transition-colors text-gray-600 hover:text-gray-900 ${
+                                        item.isActive ? 'bg-gray-100 text-gray-900' : ''
+                                    }`}
+                                    title={item.name}
+                                >
+                                    {item.icon}
+                                </button>
+                            ))}
+                        </div>
+                    )}
+
                     {/* CTA Button & Mobile Menu Toggle */}
                     <div className="flex items-center gap-4">
                         {just(false /* TODO: [🧠] Figure out what to do with call to action */) && (
@@ -531,6 +553,28 @@ export function Header(props: HeaderProps) {
                         }}
                     >
                         <nav className="container mx-auto flex flex-col gap-4 px-6">
+                            {/* Hoisted Menu Items for Mobile */}
+                            {menuHoisting && menuHoisting.menu.length > 0 && (
+                                <div className="py-2 border-b border-gray-100 mb-2 flex gap-2 overflow-x-auto">
+                                    {menuHoisting.menu.map((item, index) => (
+                                        <button
+                                            key={index}
+                                            onClick={() => {
+                                                item.onClick();
+                                                setIsMenuOpen(false);
+                                            }}
+                                            className={`p-2 rounded-md hover:bg-gray-100 transition-colors text-gray-600 hover:text-gray-900 ${
+                                                item.isActive ? 'bg-gray-100 text-gray-900' : ''
+                                            }`}
+                                            title={item.name}
+                                        >
+                                            {item.icon}
+                                            <span className="sr-only">{item.name}</span>
+                                        </button>
+                                    ))}
+                                </div>
+                            )}
+
                             {/* Login Status for Mobile */}
                             <div className="py-2 border-b border-gray-100 mb-2">
                                 {!currentUser && !isAdmin && (