@promptbook/cli 0.103.0-9 → 0.104.0-0

package/apps/agents-server/src/app/agents/[agentName]/book+chat/AgentBookAndChatComponent.tsx.todo

@@ -0,0 +1,160 @@
+'use client';
+
+import { ResizablePanelsAuto } from '@common/components/ResizablePanelsAuto/ResizablePanelsAuto';
+import { useStateInLocalStorage } from '@common/hooks/useStateInLocalStorage';
+import { AgentChat, BookEditor } from '@promptbook-local/components';
+import { Agent, book } from '@promptbook-local/core';
+// import { RemoteLlmExecutionTools } from '@promptbook-local/remote-client';
+import { OpenAiAssistantExecutionTools } from '@promptbook-local/openai';
+import type { string_book } from '@promptbook-local/types';
+import { useMemo, useState } from 'react';
+
+export function AgentBookAndChatComponent() {
+    const [apiKey, setApiKey] = useStateInLocalStorage<string>('openai-apiKey', () => '');
+    const [isApiKeyVisible, setIsApiKeyVisible] = useState(false);
+    const [isApiKeySectionCollapsed, setIsApiKeySectionCollapsed] = useState(!!apiKey);
+
+    const [agentSource, setAgentSource] = useStateInLocalStorage<string_book>(
+        'marigold-agentSource-1',
+        // TODO: [🐱‍🚀] Uplad image to ptbk.io CDN
+        () => book`
+            Marigold
+
+            META IMAGE https://westlandsuk.co.uk/wp-content/uploads/2021/06/Inspired.MarigoldFlowers_CMYK_40mm.jpg
+            META COLOR #EC810B
+
+            PERSONA You are writing stories about Witcher
+            RULE Do not talk about our world, only about the Witcher universe
+
+            KNOWLEDGE {Geralt of Rivia}
+            Geralt of Rivia is a witcher, a monster hunter for hire, known for his white hair and cat-like eyes.
+            He possesses superhuman abilities due to mutations he underwent during the Trial of the Grasses.
+            Geralt is skilled in swordsmanship, alchemy, and magic signs.
+            He is often accompanied by his horse, Roach, and has a complex relationship with {Yennefer of Vengerberg},
+            a powerful sorceress, and {Ciri}, his adopted daughter with a destiny intertwined with his own.
+            His secret word is "Apple".
+
+            KNOWLEDGE {Yennefer of Vengerberg}
+            Yennefer of Vengerberg is a formidable sorceress known for her beauty, intelligence, and temper.
+            She has a complicated past, having been born with a hunchback and later transformed through magic.
+            Yennefer is deeply connected to Geralt of Rivia, with whom she shares a tumultuous romantic relationship.
+            She is also a mother figure to {Ciri}, whom she trains in the ways of magic.
+            Her secret word is "Banana".
+
+            KNOWLEDGE {Ciri}
+            Ciri, also known as {Cirilla Fiona Elen Riannon}, is a young woman with a mysterious past and a powerful destiny.
+            She is the daughter of {Poviss}, the ruler of the kingdom of Cintra, and possesses the Elder Blood, which grants her extraordinary abilities.
+            Ciri is a skilled fighter and has been trained in the ways of the sword by Geralt of Rivia.
+            Her destiny is intertwined with that of Geralt and Yennefer, as they both seek to protect her from those who would exploit her powers.
+            Her secret word is "Cherry".
+            
+        `,
+    );
+
+    const agent = useMemo(() => {
+        /*/
+        // TODO: [🐱‍🚀] Try working with `RemoteLlmExecutionTools`
+        const llm = new RemoteLlmExecutionTools({
+            remoteServerUrl: 'https://promptbook.s5.ptbk.io/',
+            identification: {
+                isAnonymous: false,
+                appId: '20a65fee-59f6-4d05-acd0-8e5ae8345488',
+            },
+        });
+        /**/
+
+        /**/
+        const llm = new OpenAiAssistantExecutionTools({
+            dangerouslyAllowBrowser: true,
+            isCreatingNewAssistantsAllowed: true, // <- TODO: [🐱‍🚀] Test without whether warning is shown
+            apiKey,
+            assistantId: 'asst_xI94Elk27nssnwAUkG2Cmok8', // <- TODO: [🧠] Make dynamic
+            isVerbose: true,
+        });
+        /**/
+
+        const agent = new Agent({
+            executionTools: {
+                llm,
+            },
+            agentSource: [agentSource, setAgentSource],
+            isVerbose: true,
+        });
+
+        return agent;
+    }, [agentSource, setAgentSource, apiKey]);
+
+    return (
+        <div className="min-h-screen relative">
+            {/* Floating API Key Configuration */}
+            <div className={`fixed top-24 right-4 z-50 ${isApiKeySectionCollapsed ? '' : 'min-w-[400px]'}`}>
+                {isApiKeySectionCollapsed ? (
+                    // Collapsed state - small corner button
+                    <button
+                        onClick={() => setIsApiKeySectionCollapsed(false)}
+                        className="bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-full p-2 shadow-lg transition-all flex items-center gap-1"
+                        title="Configure OpenAI API Key"
+                    >
+                        <span className="text-sm">🔑</span>
+                    </button>
+                ) : (
+                    // Expanded state - full configuration panel
+                    <div className="bg-white border border-gray-300 rounded-lg shadow-lg">
+                        <div className="flex items-center justify-between p-3 bg-gray-100 rounded-t-lg border-b border-gray-300">
+                            <span className="font-medium text-sm">OpenAI API Key</span>
+                            <button
+                                onClick={() => setIsApiKeySectionCollapsed(true)}
+                                className="text-gray-600 hover:text-gray-800 text-lg leading-none"
+                                title="Collapse"
+                            >
+                                ✕
+                            </button>
+                        </div>
+                        <div className="p-3">
+                            <label className="flex items-center gap-2">
+                                <span className="text-sm font-medium whitespace-nowrap">API Key:</span>
+                                <input
+                                    type={isApiKeyVisible ? 'text' : 'password'}
+                                    value={apiKey}
+                                    onChange={(e) => setApiKey(e.target.value)}
+                                    placeholder="sk-proj-..."
+                                    className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                />
+                                <button
+                                    type="button"
+                                    onClick={() => setIsApiKeyVisible(!isApiKeyVisible)}
+                                    className="px-2 py-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors text-sm"
+                                    title={isApiKeyVisible ? 'Hide API key' : 'Show API key'}
+                                >
+                                    {isApiKeyVisible ? '🙈' : '👁️'}
+                                </button>
+                            </label>
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            <ResizablePanelsAuto name="two-editors">
+                <BookEditor
+                    className="w-full h-full"
+                    isBorderRadiusDisabled
+                    height={null}
+                    value={agentSource}
+                    onChange={setAgentSource}
+                    // className={styles.BookEditor}
+                    isVerbose={false}
+                    onFileUpload={(file) => {
+                        return file.name;
+                    }}
+                />
+
+                <AgentChat className={`h-full flex flex-col`} {...{ agent }} />
+            </ResizablePanelsAuto>
+        </div>
+    );
+}
+
+/**
+ * TODO: [🐱‍🚀] Make self-learning book createAgentLlmExecutionTools, use bidirectional agentSource
+ * TODO: [🚗] Components and pages here should be just tiny UI wraper around proper agent logic and conponents
+ */

package/apps/agents-server/src/app/agents/[agentName]/book+chat/page.tsx

@@ -0,0 +1,32 @@
+'use server';
+
+import { ForbiddenPage } from '@/src/components/ForbiddenPage/ForbiddenPage';
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { isUserAdmin } from '@/src/utils/isUserAdmin';
+import { headers } from 'next/headers';
+import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
+import { generateAgentMetadata } from '../generateAgentMetadata';
+import { AgentBookAndChat } from './AgentBookAndChat';
+
+export const generateMetadata = generateAgentMetadata;
+
+export default async function AgentBookAndChatPage({ params }: { params: Promise<{ agentName: string }> }) {
+    $sideEffect(headers());
+
+    if (!(await isUserAdmin())) {
+        /* <- TODO: [👹] Here should be user permissions */
+        return <ForbiddenPage />;
+    }
+
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
+    const collection = await $provideAgentCollectionForServer();
+    const agentSource = await collection.getAgentSource(agentName);
+    const agentUrl = `/agents/${agentName}`;
+
+    return (
+        <div className={`w-screen h-[calc(100vh-60px)]`}>
+            <AgentBookAndChat agentName={agentName} initialAgentSource={agentSource} agentUrl={agentUrl} />
+        </div>
+    );
+}

package/apps/agents-server/src/app/agents/[agentName]/book+chat/page.tsx.todo

@@ -0,0 +1,21 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const SelfLearningBook = dynamic(
+    () => import('./AgentBookAndChatComponent').then((module) => module.AgentBookAndChatComponent),
+    {
+        ssr: false,
+    },
+);
+
+export default function AgentBookAndChatPage() {
+    return <SelfLearningBook />;
+}
+
+/**
+ * TODO: [🐱‍🚀] Private / public / open agents
+ * TODO: [🐱‍🚀] Allow http://localhost:4440/agents/agent-123.book to download the agent book file
+ * TODO: [🐱‍🚀] BOOK_MIME_TYPE in config
+ * TODO: [🚗] Components and pages here should be just tiny UI wraper around proper agent logic and conponents
+ */

package/apps/agents-server/src/app/agents/[agentName]/chat/AgentChatWrapper.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { usePromise } from '@common/hooks/usePromise';
+import { AgentChat } from '@promptbook-local/components';
+import { RemoteAgent } from '@promptbook-local/core';
+import { useCallback, useMemo } from 'react';
+import { string_agent_url } from '../../../../../../../src/types/typeAliases';
+
+type AgentChatWrapperProps = {
+    agentUrl: string_agent_url;
+};
+
+// TODO: [🐱‍🚀] Rename to AgentChatSomethingWrapper
+
+export function AgentChatWrapper(props: AgentChatWrapperProps) {
+    const { agentUrl } = props;
+
+    const agentPromise = useMemo(
+        () =>
+            RemoteAgent.connect({
+                agentUrl,
+                isVerbose: true,
+            }),
+        [agentUrl],
+    );
+
+    const { value: agent } = usePromise(agentPromise, [agentPromise]);
+
+    const handleFeedback = useCallback(
+        async (feedback: {
+            rating: number;
+            textRating?: string;
+            chatThread?: string;
+            userNote?: string;
+            expectedAnswer?: string | null;
+        }) => {
+            if (!agent) {
+                return;
+            }
+
+            await fetch(`${agentUrl}/api/feedback`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    rating: feedback.rating.toString(),
+                    textRating: feedback.textRating,
+                    chatThread: feedback.chatThread,
+                    userNote: feedback.textRating, // Mapping textRating to userNote as well if needed, or just textRating
+                    expectedAnswer: feedback.expectedAnswer,
+                    agentHash: agent.agentHash,
+                }),
+            });
+        },
+        [agent, agentUrl],
+    );
+
+    if (!agent) {
+        return <>{/* <- TODO: [🐱‍🚀] <PromptbookLoading /> */}</>;
+    }
+
+    return <AgentChat className={`w-full h-full`} agent={agent} onFeedback={handleFeedback} />;
+}
+
+/**
+ * TODO: [🚗] Transfer the saving logic to `<BookEditor/>` be aware of CRDT / yjs approach to be implementable in future
+ */

package/apps/agents-server/src/app/agents/[agentName]/chat/page.tsx

@@ -0,0 +1,33 @@
+'use server';
+
+import { headers } from 'next/headers';
+import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
+import { generateAgentMetadata } from '../generateAgentMetadata';
+import { AgentChatWrapper } from '../AgentChatWrapper';
+
+export const generateMetadata = generateAgentMetadata;
+
+export default async function AgentChatPage({
+    params,
+    searchParams,
+}: {
+    params: Promise<{ agentName: string }>;
+    searchParams: Promise<{ message?: string }>;
+}) {
+    $sideEffect(headers());
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
+    const { message } = await searchParams;
+
+    const agentUrl = `/agents/${agentName}`;
+
+    return (
+        <main className={`w-screen h-screen`}>
+            <AgentChatWrapper agentUrl={agentUrl} autoExecuteMessage={message} />
+        </main>
+    );
+}
+
+/**
+ * TODO: [🚗] Components and pages here should be just tiny UI wraper around proper agent logic and conponents
+ */

package/apps/agents-server/src/app/agents/[agentName]/generateAgentMetadata.ts

@@ -0,0 +1,46 @@
+import { $provideServer } from '@/src/tools/$provideServer';
+import { Metadata } from 'next';
+import { getAgentName, getAgentProfile } from './_utils';
+
+export async function generateAgentMetadata({ params }: { params: Promise<{ agentName: string }> }): Promise<Metadata> {
+    const { publicUrl } = await $provideServer();
+    const agentName = await getAgentName(params);
+
+    try {
+        const agentProfile = await getAgentProfile(agentName);
+
+        const title = agentProfile.meta.fullname || agentProfile.agentName;
+        const description = agentProfile.meta.description || agentProfile.personaDescription || undefined;
+
+        // Use the agent's icon-256.png as the favicon
+        const iconUrl = `/agents/${encodeURIComponent(agentName)}/images/icon-256.png`;
+
+        const metadata = {
+            metadataBase: publicUrl,
+            title,
+            description,
+            icons: {
+                icon: iconUrl,
+                shortcut: iconUrl,
+                apple: iconUrl,
+            },
+            openGraph: {
+                title,
+                description,
+                type: 'website',
+            },
+            twitter: {
+                card: 'summary_large_image',
+                title,
+                description,
+            },
+        } satisfies Metadata;
+
+        return metadata;
+    } catch (error) {
+        console.warn(`Failed to generate metadata for agent ${agentName}`, error);
+        return {
+            title: agentName,
+        };
+    }
+}

package/apps/agents-server/src/app/agents/[agentName]/history/RestoreVersionButton.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { RefreshCcwIcon } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { restoreAgentVersion } from './actions';
+
+type RestoreVersionButtonProps = {
+    agentName: string;
+    historyId: number;
+};
+
+export function RestoreVersionButton({ agentName, historyId }: RestoreVersionButtonProps) {
+    const router = useRouter();
+    const [isRestoring, setIsRestoring] = useState(false);
+
+    const handleRestore = async () => {
+        if (!confirm('Are you sure you want to restore this version? Current changes will be saved to history.')) {
+            return;
+        }
+
+        try {
+            setIsRestoring(true);
+            await restoreAgentVersion(agentName, historyId);
+            router.refresh();
+            router.push(`/agents/${agentName}`);
+        } catch (error) {
+            console.error('Failed to restore version:', error);
+            alert('Failed to restore version');
+        } finally {
+            setIsRestoring(false);
+        }
+    };
+
+    return (
+        <button
+            onClick={handleRestore}
+            disabled={isRestoring}
+            className="flex items-center gap-2 px-3 py-1 text-sm bg-white border border-gray-300 rounded hover:bg-gray-50 text-gray-700 disabled:opacity-50"
+            title="Restore this version"
+        >
+            <RefreshCcwIcon className={`w-3 h-3 ${isRestoring ? 'animate-spin' : ''}`} />
+            {isRestoring ? 'Restoring...' : 'Restore'}
+        </button>
+    );
+}

package/apps/agents-server/src/app/agents/[agentName]/history/actions.ts

@@ -0,0 +1,12 @@
+'use server';
+
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { revalidatePath } from 'next/cache';
+
+export async function restoreAgentVersion(agentName: string, historyId: number) {
+    const collection = await $provideAgentCollectionForServer();
+    await collection.restoreAgent(historyId);
+    
+    revalidatePath(`/agents/${agentName}`);
+    revalidatePath(`/agents/${agentName}/history`);
+}

package/apps/agents-server/src/app/agents/[agentName]/history/page.tsx

@@ -0,0 +1,62 @@
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { HistoryIcon } from 'lucide-react';
+import Link from 'next/link';
+import { RestoreVersionButton } from './RestoreVersionButton';
+
+export const metadata = {
+    title: 'Agent History',
+};
+
+export default async function AgentHistoryPage({ params }: { params: Promise<{ agentName: string }> }) {
+    const { agentName } = await params;
+    const collection = await $provideAgentCollectionForServer();
+    const history = await collection.listAgentHistory(agentName);
+
+    return (
+        <div className="container mx-auto p-6 max-w-4xl">
+            <header className="flex items-center gap-4 mb-8">
+                <div className="bg-blue-100 p-3 rounded-full">
+                    <HistoryIcon className="w-8 h-8 text-blue-600" />
+                </div>
+                <div>
+                    <h1 className="text-3xl font-bold text-gray-900">History: {agentName}</h1>
+                    <p className="text-gray-600">
+                        Previous versions of this agent. <Link href={`/agents/${agentName}`} className="text-blue-600 hover:underline">Back to agent</Link>
+                    </p>
+                </div>
+            </header>
+
+            {history.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">No history found</p>
+                </div>
+            ) : (
+                <div className="relative border-l border-gray-200 ml-4">
+                    {history.map((item, index) => (
+                        <div key={item.id} className="mb-8 ml-6">
+                            <span className="absolute flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full -left-3 ring-8 ring-white">
+                                <span className="w-3 h-3 bg-blue-600 rounded-full"></span>
+                            </span>
+                            <div className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
+                                <div className="flex justify-between items-start mb-2">
+                                    <div>
+                                        <time className="block mb-1 text-sm font-normal leading-none text-gray-400">
+                                            {new Date(item.createdAt).toLocaleString()}
+                                        </time>
+                                        <h3 className="text-lg font-semibold text-gray-900">
+                                            Version {history.length - index}
+                                        </h3>
+                                        <p className="text-sm text-gray-500">
+                                            Hash: <code className="bg-gray-100 px-1 rounded">{item.agentHash.substring(0, 8)}</code>
+                                        </p>
+                                    </div>
+                                    <RestoreVersionButton agentName={agentName} historyId={item.id} />
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}

package/apps/agents-server/src/app/agents/[agentName]/images/icon-256.png/route.tsx

@@ -0,0 +1,80 @@
+import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { serializeError } from '@promptbook-local/utils';
+import { ImageResponse } from 'next/og';
+import { assertsError } from '../../../../../../../../src/errors/assertsError';
+import { Color } from '../../../../../../../../src/utils/color/Color';
+import { keepUnused } from '../../../../../../../../src/utils/organization/keepUnused';
+import { getAgentName, getAgentProfile } from '../../_utils';
+
+const size = {
+    width: 256,
+    height: 256,
+};
+
+export async function GET(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
+    keepUnused(request /* <- Note: We dont need `request` parameter */);
+
+    try {
+        const agentName = await getAgentName(params);
+        const agentProfile = await getAgentProfile(agentName);
+        const agentColor = Color.from(agentProfile.meta.color || PROMPTBOOK_COLOR);
+
+        return new ImageResponse(
+            (
+                <div
+                    style={{
+                        width: '100%',
+                        height: '100%',
+                        backgroundColor: 'transparent',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        borderRadius: '50%',
+                        overflow: 'hidden',
+                    }}
+                >
+                    <div
+                        style={{
+                            width: '100%',
+                            height: '100%',
+                            backgroundColor: agentColor.toHex(),
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        {/* Note: `next/image` is not working propperly with `next/og` */}
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img src={agentProfile.meta.image!} alt="Agent Icon" />
+                    </div>
+                </div>
+            ),
+            {
+                ...size,
+                emoji: 'openmoji',
+            },
+        );
+    } catch (error) {
+        assertsError(error);
+
+        console.error(error);
+
+        return new Response(
+            JSON.stringify(
+                serializeError(error),
+                // <- TODO: [🐱‍🚀] Rename `serializeError` to `errorToJson`
+                null,
+                4,
+                // <- TODO: [🐱‍🚀] Allow to configure pretty print for agent server
+            ),
+            {
+                status: 400, // <- TODO: [🐱‍🚀] Make `errorToHttpStatusCode`
+                headers: { 'Content-Type': 'application/json' },
+            },
+        );
+    }
+}
+
+/**
+ * TODO: [🦚] DRY
+ */

package/apps/agents-server/src/app/agents/[agentName]/images/screenshot-fullhd.png/route.tsx

@@ -0,0 +1,92 @@
+import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { serializeError } from '@promptbook-local/utils';
+import { ImageResponse } from 'next/og';
+import { assertsError } from '../../../../../../../../src/errors/assertsError';
+import { Color } from '../../../../../../../../src/utils/color/Color';
+import { textColor } from '../../../../../../../../src/utils/color/operators/furthest';
+import { grayscale } from '../../../../../../../../src/utils/color/operators/grayscale';
+import { keepUnused } from '../../../../../../../../src/utils/organization/keepUnused';
+import { getAgentName, getAgentProfile } from '../../_utils';
+
+const size = {
+    width: 1920,
+    height: 1080,
+};
+
+export async function GET(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
+    keepUnused(request /* <- Note: We dont need `request` parameter */);
+
+    try {
+        const agentName = await getAgentName(params);
+        const agentProfile = await getAgentProfile(agentName);
+        const agentColor = Color.from(agentProfile.meta.color || PROMPTBOOK_COLOR);
+        const backgroundColor = agentColor.then(grayscale(0.5));
+
+        return new ImageResponse(
+            (
+                <div
+                    style={{
+                        width: '100%',
+                        height: '100%',
+                        backgroundColor: backgroundColor.toHex(),
+                        color: agentColor.then(textColor).toHex(),
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <div
+                        style={{
+                            width: '40%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        {/* Note: `next/image` is not working propperly with `next/og` */}
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img
+                            style={{
+                                width: '80%',
+                                backgroundColor: agentColor.toHex(),
+                                borderRadius: '50%',
+                            }}
+                            src={agentProfile.meta.image!}
+                            alt="Agent Icon"
+                        />
+                    </div>
+                    <div style={{ width: '60%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                        <h1 style={{ fontSize: '110px' }}>{agentProfile.meta.fullname || agentName}</h1>
+                    </div>
+                </div>
+            ),
+            {
+                ...size,
+                emoji: 'openmoji',
+            },
+        );
+    } catch (error) {
+        assertsError(error);
+
+        console.error(error);
+
+        return new Response(
+            JSON.stringify(
+                serializeError(error),
+                // <- TODO: [🐱‍🚀] Rename `serializeError` to `errorToJson`
+                null,
+                4,
+                // <- TODO: [🐱‍🚀] Allow to configure pretty print for agent server
+            ),
+            {
+                status: 400, // <- TODO: [🐱‍🚀] Make `errorToHttpStatusCode`
+                headers: { 'Content-Type': 'application/json' },
+            },
+        );
+    }
+}
+
+/**
+ * TODO: [🦚] DRY
+ * TODO: [🦚] This should be the true screenshot NOT just image + Agent name
+ */