@promptbook/cli 0.104.0-0 → 0.104.0-10

package/apps/agents-server/src/app/recycle-bin/page.tsx

@@ -1,58 +1,44 @@
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $provideServer } from '@/src/tools/$provideServer';
 import { TrashIcon } from 'lucide-react';
 import Link from 'next/link';
-import { RestoreAgentButton } from './RestoreAgentButton';
+import { DeletedAgentsList } from '../../components/Homepage/DeletedAgentsList';
+import { isUserAdmin } from '../../utils/isUserAdmin';
 
 export const metadata = {
     title: 'Recycle Bin',
 };
 
 export default async function RecycleBinPage() {
+    const { publicUrl } = await $provideServer();
     const collection = await $provideAgentCollectionForServer();
     const deletedAgents = await collection.listDeletedAgents();
+    const isAdmin = await isUserAdmin();
 
     return (
-        <div className="container mx-auto p-6 max-w-4xl">
-            <header className="flex items-center gap-4 mb-8">
-                <div className="bg-red-100 p-3 rounded-full">
-                    <TrashIcon className="w-8 h-8 text-red-600" />
-                </div>
-                <div>
-                    <h1 className="text-3xl font-bold text-gray-900">Recycle Bin</h1>
-                    <p className="text-gray-600">Restore deleted agents from here.</p>
-                </div>
-            </header>
+        <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
+            <div className="container mx-auto px-4 py-16">
+                <header className="flex items-center gap-4 mb-8">
+                    <div className="bg-red-100 p-3 rounded-full">
+                        <TrashIcon className="w-8 h-8 text-red-600" />
+                    </div>
+                    <div>
+                        <h1 className="text-3xl font-bold text-gray-900">Recycle Bin</h1>
+                        <p className="text-gray-600">Restore deleted agents from here.</p>
+                    </div>
+                </header>
 
-            {deletedAgents.length === 0 ? (
-                <div className="text-center py-12 bg-gray-50 rounded-lg border border-dashed border-gray-300">
-                    <p className="text-gray-500 text-lg">Recycle bin is empty</p>
-                    <Link href="/" className="text-blue-600 hover:underline mt-2 inline-block">
-                        Go back to agents
-                    </Link>
-                </div>
-            ) : (
-                <div className="grid gap-4">
-                    {deletedAgents.map((agentName) => (
-                        <div
-                            key={agentName}
-                            className="bg-white p-4 rounded-lg shadow-sm border border-gray-200 flex items-center justify-between hover:shadow-md transition-shadow"
-                        >
-                            <div className="flex items-center gap-3">
-                                <div className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-500 font-bold text-lg">
-                                    {agentName.charAt(0).toUpperCase()}
-                                </div>
-                                <div>
-                                    <h3 className="font-semibold text-lg text-gray-900">{agentName}</h3>
-                                    <p className="text-sm text-gray-500">Deleted agent</p>
-                                </div>
-                            </div>
-                            <div className="flex gap-2">
-                                <RestoreAgentButton agentName={agentName} />
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            )}
+                {deletedAgents.length === 0 ? (
+                    <div className="text-center py-12 bg-gray-50 rounded-lg border border-dashed border-gray-300">
+                        <p className="text-gray-500 text-lg">Recycle bin is empty</p>
+                        <Link href="/" className="text-blue-600 hover:underline mt-2 inline-block">
+                            Go back to agents
+                        </Link>
+                    </div>
+                ) : (
+                    <DeletedAgentsList agents={deletedAgents} isAdmin={isAdmin} publicUrl={publicUrl} />
+                )}
+            </div>
         </div>
     );
 }

package/apps/agents-server/src/app/robots.txt/route.ts

@@ -6,7 +6,7 @@ import { NextResponse } from 'next/server';
 export const dynamic = 'force-dynamic';
 
 export async function GET() {
-    const txt = generateRobotsTxt();
+    const txt = await generateRobotsTxt();
     return new NextResponse(txt, {
         headers: {
             'Content-Type': 'text/plain',

package/apps/agents-server/src/app/security.txt/route.ts

@@ -6,7 +6,7 @@ import { NextResponse } from 'next/server';
 export const dynamic = 'force-dynamic';
 
 export async function GET() {
-    const txt = generateSecurityTxt();
+    const txt = await generateSecurityTxt();
     return new NextResponse(txt, {
         headers: {
             'Content-Type': 'text/plain',

package/apps/agents-server/src/app/sitemap.xml/route.ts

@@ -1,23 +1,25 @@
 // Dynamic sitemap.xml for Agents Server
 
-import { NEXT_PUBLIC_SITE_URL } from '@/config';
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $provideServer } from '@/src/tools/$provideServer';
 import { spaceTrim } from '@promptbook-local/utils';
 import { NextResponse } from 'next/server';
 
 export const dynamic = 'force-dynamic';
 
 export async function GET() {
+    const { publicUrl } = await $provideServer();
+
     const collection = await $provideAgentCollectionForServer();
 
     // Assume collection.listAgents() returns an array of agent names
-    const agentNames = await collection.listAgents();
-
-    // Get base URL from environment or config
-    const baseUrl = NEXT_PUBLIC_SITE_URL?.href || process.env.PUBLIC_URL || 'https://ptbk.io';
+    const agents = await collection.listAgents();
 
-    const urls = agentNames
-        .map(({ agentName }) => `<url><loc>${baseUrl}agents/${encodeURIComponent(agentName)}</loc></url>`)
+    const urls = agents
+        .map(
+            ({ permanentId, agentName }) =>
+                `<url><loc>${publicUrl.href}agents/${encodeURIComponent(permanentId || agentName)}</loc></url>`,
+        )
         .join('\n');
 
     const xml = spaceTrim(

package/apps/agents-server/src/app/swagger/page.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import 'swagger-ui-react/swagger-ui.css';
+
+const SwaggerUI = dynamic(() => import('swagger-ui-react'), { ssr: false });
+
+export default function SwaggerPage() {
+  return (
+    <div className="swagger-container bg-white min-h-screen">
+      <SwaggerUI url="/swagger.json" />
+    </div>
+  );
+}

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

@@ -1,14 +1,14 @@
 'use client';
 
-import { AgentBasicInformation } from '@promptbook-local/types';
+import { colorToDataUrl } from '@promptbook-local/color';
+import { generatePlaceholderAgentProfileImageUrl } from '@promptbook-local/core';
+import { AgentBasicInformation, string_agent_permanent_id } 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 { AgentProfileImage } from './AgentProfileImage';
 import { AgentQrCode } from './AgentQrCode';
 import { QrCodeModal } from './QrCodeModal';
+import { useAgentBackground } from './useAgentBackground';
 
 type AgentProfileProps = {
     /**
@@ -16,6 +16,11 @@ type AgentProfileProps = {
      */
     readonly agent: AgentBasicInformation;
 
+    /**
+     * The permanent ID of the agent
+     */
+    readonly permanentId: string_agent_permanent_id;
+
     /**
      * URL of the agent page
      *
@@ -23,6 +28,11 @@ type AgentProfileProps = {
      */
     readonly agentUrl?: string;
 
+    /**
+     * Base URL of the agents server
+     */
+    readonly publicUrl: URL;
+
     /**
      * Email of the agent
      */
@@ -61,16 +71,19 @@ export function AgentProfile(props: AgentProfileProps) {
         agent,
         agentUrl = '',
         agentEmail = '',
+        publicUrl,
+        permanentId,
         renderMenu,
         children,
         actions,
         isHeadless = false,
         className,
     } = props;
+
     const { meta, agentName } = agent;
     const fullname = (meta.fullname as string) || agentName || 'Agent';
     const personaDescription = agent.personaDescription || '';
-    const imageUrl = (meta.image as string) || null;
+    const imageUrl = meta.image || generatePlaceholderAgentProfileImageUrl(permanentId, publicUrl);
 
     const [isQrModalOpen, setIsQrModalOpen] = useState(false);
     const [isFlipped, setIsFlipped] = useState(false);
@@ -81,102 +94,14 @@ export function AgentProfile(props: AgentProfileProps) {
 
     if (fontString) {
         // [🧠] TODO: Properly parse font string to get family name
-        const primaryFont = fontString.split(',')[0].trim().replace(/['"]/g, '');
+        // const primaryFont = fontString.split(',')[0].trim().replace(/['"]/g, '');
         fontStyle = {
             fontFamily: fontString,
         };
     }
 
     // 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 (
         <>
@@ -208,14 +133,14 @@ export function AgentProfile(props: AgentProfileProps) {
                 )}
 
                 {/* Main profile content */}
-                <div className="relative z-10 grid grid-cols-[auto_1fr] gap-x-6 gap-y-4 md:gap-12 max-w-5xl w-full items-start">
+                <div className="relative z-10 flex flex-col md:grid md:grid-cols-[auto_1fr] gap-y-6 md:gap-y-4 md:gap-x-12 max-w-5xl w-full items-center md:items-start">
                     {/* Agent image card (Flippable) */}
                     <div
-                        className="flex-shrink-0 perspective-1000 group row-start-1 col-start-1 md:row-span-3"
+                        className="flex-shrink-0 perspective-1000 group w-full md:w-auto md:row-start-1 md:col-start-1 md:row-span-3"
                         style={{ perspective: '1000px' }}
                     >
                         <div
-                            className="relative w-24 md:w-80 transition-all duration-700 transform-style-3d cursor-pointer"
+                            className="relative w-full md:w-80 transition-all duration-700 transform-style-3d cursor-pointer max-w-sm mx-auto md:max-w-none md:mx-0"
                             style={{
                                 aspectRatio: '1 / 1.618', // Golden Ratio
                                 transformStyle: 'preserve-3d',
@@ -230,19 +155,21 @@ 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`,
+
+                                    // Note: Make it squircle
+                                    // borderRadius: '50%',
+                                    // ['cornerShape' as really_any /* <- Note: `cornerShape` is non standard CSS property */]: 'squircle ',
                                 }}
                             >
-                                {imageUrl ? (
-                                    // eslint-disable-next-line @next/next/no-img-element
-                                    <img src={imageUrl} alt={fullname} className="w-full h-full object-cover" />
-                                ) : (
-                                    <div
-                                        className="w-full h-full flex items-center justify-center text-3xl md:text-8xl font-bold text-white/80"
-                                        style={{ backgroundColor: brandColorDarkHex }}
-                                    >
-                                        {fullname.charAt(0).toUpperCase()}
-                                    </div>
-                                )}
+                                <AgentProfileImage
+                                    src={imageUrl}
+                                    alt={fullname}
+                                    className="w-full h-full object-cover"
+                                    style={{
+                                        objectFit: 'cover',
+                                        backgroundImage: `url(${colorToDataUrl(brandColorLightHex)})`,
+                                    }}
+                                />
 
                                 {/* Flip hint icon */}
                                 <div className="absolute bottom-2 md:bottom-4 right-2 md:right-4 bg-black/30 p-1 md:p-2 rounded-full text-white/80 backdrop-blur-md opacity-0 group-hover:opacity-100 transition-opacity">
@@ -280,7 +207,7 @@ export function AgentProfile(props: AgentProfileProps) {
                     </div>
 
                     {/* Agent info - Header Area */}
-                    <div className="row-start-1 col-start-2 flex flex-col justify-center md:justify-start h-full md:h-auto gap-1 md:gap-6">
+                    <div className="w-full md:w-auto md:row-start-1 md:col-start-2 flex flex-col justify-center md:justify-start items-center md:items-start h-auto gap-4 md:gap-6 text-center md:text-left">
                         {/* Agent name with custom font */}
                         <h1
                             className="text-2xl md:text-5xl lg:text-6xl font-bold text-gray-900 tracking-tight leading-tight"
@@ -298,13 +225,11 @@ 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="w-full md:col-span-1 md:col-start-2 mt-4 md:mt-0">{children}</div>
 
                     {/* Secondary Actions */}
                     {!isHeadless && (
-                        <div className="col-span-2 md:col-span-1 md:col-start-2 flex flex-wrap justify-center md:justify-start items-center gap-4 md:gap-6 mt-2">
+                        <div className="w-full md:col-span-1 md:col-start-2 flex flex-wrap justify-center md:justify-start items-center gap-4 md:gap-6 mt-4 md:mt-2">
                             {actions}
                         </div>
                     )}

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

@@ -0,0 +1,92 @@
+import { Loader2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+type AgentProfileImageProps = {
+    readonly src: string;
+    readonly alt: string;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+};
+
+export function AgentProfileImage({ src, alt, className, style }: AgentProfileImageProps) {
+    const [imageSrc, setImageSrc] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        let isMounted = true;
+        let timeoutId: NodeJS.Timeout;
+        let objectUrl: string | null = null;
+
+        const fetchImage = async () => {
+            try {
+                const response = await fetch(src);
+                if (response.ok) {
+                    const blob = await response.blob();
+                    if (!isMounted) {
+                        return;
+                    }
+
+                    objectUrl = URL.createObjectURL(blob);
+                    setImageSrc(objectUrl);
+                    setIsLoading(false);
+                } else {
+                    // Retry on non-200
+                    if (isMounted) {
+                        timeoutId = setTimeout(fetchImage, 2000);
+                    }
+                }
+            } catch (error) {
+                console.warn('Failed to fetch image, retrying...', error);
+                if (isMounted) {
+                    timeoutId = setTimeout(fetchImage, 2000);
+                }
+            }
+        };
+
+        const isExternal = (() => {
+            try {
+                return new URL(src, window.location.href).origin !== window.location.origin;
+            } catch {
+                return false;
+            }
+        })();
+
+        if (isExternal) {
+            setImageSrc(src);
+            setIsLoading(false);
+        } else {
+            setIsLoading(true);
+            fetchImage();
+        }
+
+        return () => {
+            isMounted = false;
+            clearTimeout(timeoutId);
+            if (objectUrl) {
+                URL.revokeObjectURL(objectUrl);
+            }
+        };
+    }, [src]);
+
+    return (
+        <div className={`relative ${className}`} style={style}>
+            {/* Note: We apply style to the container, so backgroundImage works here */}
+
+            {isLoading && (
+                <div className="absolute inset-0 flex items-center justify-center">
+                    <Loader2 className="w-8 h-8 animate-spin text-white/50" />
+                </div>
+            )}
+
+            {imageSrc && (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                    src={imageSrc}
+                    alt={alt}
+                    className="w-full h-full object-cover"
+                    // We don't pass style here because it is applied to container
+                />
+            )}
+        </div>
+    );
+}

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

@@ -24,7 +24,6 @@ export function QrCodeModal({
     personaDescription,
     agentUrl,
     agentEmail,
-    brandColorHex,
 }: QrCodeModalProps) {
     useEffect(() => {
         if (isOpen) {

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/Auth/AuthControls.tsx

@@ -1,15 +1,14 @@
 'use client';
 
 import { useState } from 'react';
-import { useRouter } from 'next/navigation';
 
 type AuthControlsProps = {
     initialUser: { username: string; isAdmin: boolean } | null;
 };
 
 export function AuthControls({ initialUser }: AuthControlsProps) {
-    const router = useRouter();
-    const [user, setUser] = useState(initialUser);
+    // const router = useRouter();
+    const [user] = useState(initialUser);
     const [isLoginOpen, setIsLoginOpen] = useState(false);
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
@@ -52,7 +51,9 @@ export function AuthControls({ initialUser }: AuthControlsProps) {
             <div className="flex items-center space-x-4">
                 <span className="text-gray-600">
                     Logged in as <strong>{user.username}</strong>
-                    {user.isAdmin && <span className="ml-2 bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Admin</span>}
+                    {user.isAdmin && (
+                        <span className="ml-2 bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Admin</span>
+                    )}
                 </span>
                 <button
                     onClick={handleLogout}

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>
+    );
+}