@promptbook/cli 0.103.0-52 → 0.103.0-54

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

@@ -2,8 +2,10 @@
 
 import { ResizablePanelsAuto } from '@common/components/ResizablePanelsAuto/ResizablePanelsAuto';
 import { string_agent_url, string_book } from '@promptbook-local/types';
-import { BookEditorWrapper } from '../book/BookEditorWrapper';
+import { Book, MessageSquare } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import { AgentChatWrapper } from '../AgentChatWrapper';
+import { BookEditorWrapper } from '../book/BookEditorWrapper';
 
 type AgentBookAndChatProps = {
     agentName: string;
@@ -13,6 +15,56 @@ type AgentBookAndChatProps = {
 
 export function AgentBookAndChat(props: AgentBookAndChatProps) {
     const { agentName, initialAgentSource, agentUrl } = props;
+    const [isMobile, setIsMobile] = useState(false);
+    const [activeTab, setActiveTab] = useState<'book' | 'chat'>('chat');
+    const [isMounted, setIsMounted] = useState(false);
+
+    useEffect(() => {
+        setIsMounted(true);
+        const checkMobile = () => setIsMobile(window.innerWidth < 1024);
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
+
+    if (!isMounted) {
+        return <div className="w-full h-full bg-white" />;
+    }
+
+    if (isMobile) {
+        return (
+            <div className="flex flex-col h-full w-full bg-white">
+                <div className="flex-grow overflow-hidden relative">
+                    <div className={`w-full h-full ${activeTab === 'book' ? 'block' : 'hidden'}`}>
+                        <BookEditorWrapper agentName={agentName} initialAgentSource={initialAgentSource} />
+                    </div>
+                    <div className={`w-full h-full ${activeTab === 'chat' ? 'block' : 'hidden'}`}>
+                        <AgentChatWrapper agentUrl={agentUrl} />
+                    </div>
+                </div>
+                <div className="flex-shrink-0 h-16 bg-white border-t border-gray-200 flex shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)] z-10">
+                    <button
+                        onClick={() => setActiveTab('book')}
+                        className={`flex-1 flex flex-col items-center justify-center gap-1 transition-colors ${
+                            activeTab === 'book' ? 'text-blue-600 bg-blue-50/50' : 'text-gray-500 hover:bg-gray-50'
+                        }`}
+                    >
+                        <Book className="w-5 h-5" />
+                        <span className="text-xs font-medium">Info</span>
+                    </button>
+                    <button
+                        onClick={() => setActiveTab('chat')}
+                        className={`flex-1 flex flex-col items-center justify-center gap-1 transition-colors ${
+                            activeTab === 'chat' ? 'text-blue-600 bg-blue-50/50' : 'text-gray-500 hover:bg-gray-50'
+                        }`}
+                    >
+                        <MessageSquare className="w-5 h-5" />
+                        <span className="text-xs font-medium">Chat</span>
+                    </button>
+                </div>
+            </div>
+        );
+    }
 
     return (
         <ResizablePanelsAuto name={`agent-book-and-chat-${agentName}`} className="w-full h-full">

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

@@ -1,15 +1,13 @@
-import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
-import { parseAgentSource } from '@promptbook-local/core';
+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> {
-    let { agentName } = await params;
-    agentName = decodeURIComponent(agentName);
+    const { publicUrl } = await $provideServer();
+    const agentName = await getAgentName(params);
 
     try {
-        const collection = await $provideAgentCollectionForServer();
-        const agentSource = await collection.getAgentSource(agentName);
-        const agentProfile = parseAgentSource(agentSource);
+        const agentProfile = await getAgentProfile(agentName);
 
         const title = agentProfile.meta.fullname || agentProfile.agentName;
         const description = agentProfile.meta.description || agentProfile.personaDescription || undefined;
@@ -17,22 +15,24 @@ export async function generateAgentMetadata({ params }: { params: Promise<{ agen
         // Extract image from meta
         const image = agentProfile.meta.image;
 
-        return {
+        const metadata = {
+            metadataBase: publicUrl,
             title,
             description,
+            icons: image ? { icon: image } : undefined,
             openGraph: {
                 title,
                 description,
                 type: 'website',
-                images: image ? [{ url: image }] : undefined,
             },
             twitter: {
                 card: 'summary_large_image',
                 title,
                 description,
-                images: image ? [image] : undefined,
             },
-        };
+        } satisfies Metadata;
+
+        return metadata;
     } catch (error) {
         console.warn(`Failed to generate metadata for agent ${agentName}`, error);
         return {

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
+ */

package/apps/agents-server/src/app/agents/[agentName]/images/screenshot-phone.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: 1080,
+    height: 1920,
+};
+
+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
+ */

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

@@ -0,0 +1,61 @@
+'use server';
+
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $provideServer } from '@/src/tools/$provideServer';
+import { PromptbookAgent } from '@promptbook-local/components';
+import { parseAgentSource } from '@promptbook-local/core';
+import { headers } from 'next/headers';
+import spaceTrim from 'spacetrim';
+import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
+import { CodePreview } from '../../../../../../_common/components/CodePreview/CodePreview';
+import { generateAgentMetadata } from '../generateAgentMetadata';
+
+export const generateMetadata = generateAgentMetadata;
+
+export default async function AgentChatPage({ params }: { params: Promise<{ agentName: string }> }) {
+    $sideEffect(headers());
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
+
+    const collection = await $provideAgentCollectionForServer();
+    const agentSource = await collection.getAgentSource(agentName);
+    const { meta } = parseAgentSource(agentSource);
+    const { fullname, color, image, ...restMeta } = meta;
+    const { publicUrl } = await $provideServer();
+    const agentUrl = `${publicUrl.href}agents/${encodeURIComponent(agentName)}`;
+
+    const code = spaceTrim(
+        (block) => `
+
+            import { PromptbookAgent } from '@promptbook/components';
+
+            export function YourComponent() {
+                return(
+                    <PromptbookAgent
+                        agentUrl="${agentUrl}"
+                        meta={${block(JSON.stringify({ fullname, color, image, ...restMeta }, null, 4))}}
+                    />
+                );
+            }
+            
+        `,
+    );
+
+    return (
+        <main className="w-screen h-screen p-4">
+            <h1 className="text-2xl font-bold p-4 border-b">{meta.fullname || agentName} Integration Code</h1>
+            <p className="mt-4 mb-8 text-gray-600">
+                Use the following code to integrate the <strong>{meta.fullname || agentName}</strong> agent into your
+                React application using the <code>{'<PromptbookAgent />'}</code> component.
+            </p>
+
+            <CodePreview code={code} />
+            <PromptbookAgent agentUrl={agentUrl} meta={meta} />
+        </main>
+    );
+}
+
+/**
+ * TODO: Make this page better, bring from Promptbook.Studio
+ * 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]/opengraph-image.tsx

@@ -0,0 +1,102 @@
+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 { getAgentName, getAgentProfile } from './_utils';
+
+// export const runtime = 'edge';
+// <- Note: On Vercel Edge runtime some modules are not working *(like `crypto`)*
+
+export const alt = 'Agent Profile';
+export const size = {
+    width: 1200,
+    height: 630,
+};
+
+export const contentType = 'image/png';
+
+export default async function Image({ params }: { params: Promise<{ agentName: string }> }) {
+    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: '50%',
+                            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: '50%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            textAlign: 'center',
+                        }}
+                    >
+                        <h1 style={{ fontSize: '100px' }}>{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
+ */