@promptbook/cli 0.103.0-46 → 0.103.0-47

package/apps/agents-server/config.ts.todo

@@ -187,21 +187,21 @@ export const AZURE_COMPUTER_VISION_KEY = config.get('AZURE_COMPUTER_VISION_KEY')
 
 // TODO: [🧠] How to do required only on server
 export const CDN_BUCKET = config.get('CDN_BUCKET') /*.required([📐])*/.value;
-export const CDN_PATH_PREFIX = config.get('CDN_PATH_PREFIX') /*.required([📐])*/.value;
+export const NEXT_PUBLIC_CDN_PATH_PREFIX = config.get('NEXT_PUBLIC_CDN_PATH_PREFIX') /*.required([📐])*/.value;
 export const CDN_ENDPOINT = config.get('CDN_ENDPOINT') /*.required([📐])*/.value;
 export const CDN_ACCESS_KEY_ID = config.get('CDN_ACCESS_KEY_ID') /*.required([📐])*/.value;
 export const CDN_SECRET_ACCESS_KEY = config.get('CDN_SECRET_ACCESS_KEY') /*.required([📐])*/.value;
-export const CDN_PUBLIC_URL = config.get('CDN_PUBLIC_URL').url() /*.required([📐])*/.value;
+export const NEXT_PUBLIC_CDN_PUBLIC_URL = config.get('NEXT_PUBLIC_CDN_PUBLIC_URL').url() /*.required([📐])*/.value;
 
 export const CDN = (CDN_BUCKET &&
     // [📐]
     new DigitalOceanSpaces({
         bucket: CDN_BUCKET!,
-        pathPrefix: CDN_PATH_PREFIX!,
+        pathPrefix: NEXT_PUBLIC_CDN_PATH_PREFIX!,
         endpoint: CDN_ENDPOINT!,
         accessKeyId: CDN_ACCESS_KEY_ID!,
         secretAccessKey: CDN_SECRET_ACCESS_KEY!,
-        cdnPublicUrl: CDN_PUBLIC_URL!,
+        cdnPublicUrl: NEXT_PUBLIC_CDN_PUBLIC_URL!,
         gzip: false /* <- TODO: Maybe just remove this functionality from WebGPT repository */,
     })) as DigitalOceanSpaces;
 

package/apps/agents-server/next.config.ts

@@ -2,6 +2,9 @@ import type { NextConfig } from 'next';
 import path from 'path';
 
 const nextConfig: NextConfig = {
+    output: 'standalone',
+    // <- TODO: !!!! How to propperly build Next.js app
+
     experimental: {
         externalDir: true,
     },

package/apps/agents-server/src/app/agents/[agentName]/api/book/route.ts

@@ -14,7 +14,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
         const collection = await $provideAgentCollectionForServer();
         const agentSource = await collection.getAgentSource(agentName);
 
-        return new Response(agentSource.getValue(), {
+        return new Response(agentSource, {
             status: 200,
             headers: { 'Content-Type': 'text/plain' /* <- TODO: [🎳] Mime type of book */ },
         });

package/apps/agents-server/src/app/agents/[agentName]/api/book/test.http

@@ -15,7 +15,7 @@ Content-Type: text/plain
 
 Gabriel Gray
 
-META COLOR #c9c9c9ff
+META COLOR #c9c9c9
 PERSONA Friendly and helpful AI agent.
 RULE Be kind and respectful.
 
@@ -32,6 +32,6 @@ Content-Type: text/plain
 
 Gabriel Gray
 
-META COLOR #242424ff
+META COLOR #242424
 PERSONA Strict and professional AI agent.
 RULE Be strict and professional.

package/apps/agents-server/src/app/agents/[agentName]/api/chat/route.ts

@@ -5,7 +5,8 @@ import { serializeError } from '@promptbook-local/utils';
 import { assertsError } from '../../../../../../../../src/errors/assertsError';
 
 export async function GET(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
-    const { agentName } = await params;
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
     const { searchParams } = new URL(request.url);
     const message = searchParams.get('message') || 'Tell me more about yourself.';
     //                                               <- TODO: !!!! To configuration DEFAULT_INITIAL_HIDDEN_MESSAGE
@@ -23,9 +24,8 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
             },
             agentSource,
         });
-        const llmTools = agent.getLlmExecutionTools();
 
-        const response = await llmTools.callChatModel!({
+        const response = await agent.callChatModel!({
             title: `Chat with agent ${agentName}`,
             parameters: {},
             modelRequirements: {
@@ -34,9 +34,11 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
             content: message,
         });
 
+        // TODO: [🐚] Implement streaming
+
         return new Response(response.content, {
             status: 200,
-            headers: { 'Content-Type': 'text/plain' },
+            headers: { 'Content-Type': 'text/markdown' },
         });
     } catch (error) {
         assertsError(error);

package/apps/agents-server/src/app/agents/[agentName]/api/modelRequirements/TODO.txt

@@ -0,0 +1 @@
+TODO: [🎣][🧠] Maybe do API / Page for transpilers, Allow to export each agent

package/apps/agents-server/src/app/agents/[agentName]/api/modelRequirements/route.ts

@@ -0,0 +1,53 @@
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { createAgentModelRequirements } from '@promptbook-local/core';
+import { serializeError } from '@promptbook-local/utils';
+import { assertsError } from '../../../../../../../../src/errors/assertsError';
+import { keepUnused } from '../../../../../../../../src/utils/organization/keepUnused';
+
+export async function GET(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
+    keepUnused(request /* <- Note: We dont need `request` parameter */);
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
+
+    try {
+        const collection = await $provideAgentCollectionForServer();
+        const agentSource = await collection.getAgentSource(agentName);
+        const modelRequirements = await createAgentModelRequirements(agentSource);
+
+        return new Response(
+            JSON.stringify(
+                modelRequirements,
+                // <- TODO: !!! Rename `serializeError` to `errorToJson`
+                null,
+                4,
+                // <- TODO: !!! Allow to configure pretty print for agent server
+            ),
+            {
+                status: 200,
+                headers: { 'Content-Type': 'application/json' },
+            },
+        );
+    } 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 - Make some common utility for API on one agent
+ */

package/apps/agents-server/src/app/agents/[agentName]/api/modelRequirements/systemMessage/route.ts

@@ -0,0 +1,45 @@
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { createAgentModelRequirements } from '@promptbook-local/core';
+import { serializeError } from '@promptbook-local/utils';
+import { assertsError } from '../../../../../../../../../src/errors/assertsError';
+import { keepUnused } from '../../../../../../../../../src/utils/organization/keepUnused';
+
+export async function GET(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
+    keepUnused(request /* <- Note: We dont need `request` parameter */);
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
+
+    try {
+        const collection = await $provideAgentCollectionForServer();
+        const agentSource = await collection.getAgentSource(agentName);
+        const modelRequirements = await createAgentModelRequirements(agentSource);
+        const { systemMessage } = modelRequirements;
+
+        return new Response(systemMessage, {
+            status: 200,
+            headers: { 'Content-Type': 'text/markdown' },
+        });
+    } 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 - Make some common utility for API on one agent
+ */

package/apps/agents-server/src/app/agents/[agentName]/api/profile/route.ts

@@ -0,0 +1,54 @@
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { parseAgentSource } from '@promptbook-local/core';
+import { serializeError } from '@promptbook-local/utils';
+import { assertsError } from '../../../../../../../../src/errors/assertsError';
+import { keepUnused } from '../../../../../../../../src/utils/organization/keepUnused';
+
+export async function GET(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
+    keepUnused(request /* <- Note: We dont need `request` parameter */);
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
+
+    try {
+        const collection = await $provideAgentCollectionForServer();
+        const agentSource = await collection.getAgentSource(agentName);
+        const agentProfile = parseAgentSource(agentSource);
+
+        return new Response(
+            JSON.stringify(
+                agentProfile,
+                // <- TODO: !!! Rename `serializeError` to `errorToJson`
+                null,
+                4,
+                // <- TODO: !!! Allow to configure pretty print for agent server
+            ),
+            {
+                status: 200,
+                headers: { 'Content-Type': 'application/json' },
+            },
+        );
+    } 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 - Make some common utility for API on one agent
+ */

package/apps/agents-server/src/app/agents/[agentName]/book/BookEditorWrapper.tsx

@@ -2,7 +2,7 @@
 
 import { BookEditor } from '@promptbook-local/components';
 import { string_book } from '@promptbook-local/types';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 type BookEditorWrapperProps = {
     agentName: string;
@@ -15,23 +15,22 @@ export function BookEditorWrapper({ agentName, initialAgentSource }: BookEditorW
     const [agentSource, setAgentSource] = useState<string_book>(initialAgentSource);
     const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
 
-    const handleChange = async (newSource: string_book) => {
-        setAgentSource(newSource);
-        setSaveStatus('saving');
+    // Debounce timer ref so we can clear previous pending save
+    const debounceTimerRef = useRef<number | null>(null);
+    // Configurable debounce delay (ms) - tweak if needed
+    const DEBOUNCE_DELAY = 600;
 
+    const performSave = async (sourceToSave: string_book) => {
+        setSaveStatus('saving');
         try {
             const response = await fetch(`/agents/${encodeURIComponent(agentName)}/api/book`, {
                 method: 'PUT',
-                headers: {
-                    'Content-Type': 'text/plain',
-                },
-                body: newSource,
+                headers: { 'Content-Type': 'text/plain' },
+                body: sourceToSave,
             });
-
             if (!response.ok) {
                 throw new Error(`Failed to save: ${response.statusText}`);
             }
-
             setSaveStatus('saved');
             setTimeout(() => setSaveStatus('idle'), 2000); // Reset status after 2 seconds
         } catch (error) {
@@ -41,11 +40,39 @@ export function BookEditorWrapper({ agentName, initialAgentSource }: BookEditorW
         }
     };
 
+    const scheduleSave = (nextSource: string_book) => {
+        // Clear existing pending save
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        // We stay 'idle' while typing; could add a 'pending' status in future if desired
+        // Schedule new save
+        debounceTimerRef.current = window.setTimeout(() => {
+            performSave(nextSource);
+        }, DEBOUNCE_DELAY);
+    };
+
+    const handleChange = (newSource: string_book) => {
+        setAgentSource(newSource);
+        scheduleSave(newSource);
+    };
+
+    // Cleanup on unmount to avoid lingering timeouts
+    useEffect(() => {
+        return () => {
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
+            }
+        };
+    }, []);
+
     return (
-        <div className="w-full h-screen flex flex-col">
+        <div className="w-full h-full">
             {saveStatus !== 'idle' && (
                 <div
-                    className={`px-4 py-2 text-sm ${
+                    role="status"
+                    aria-live="polite"
+                    className={`fixed top-5 right-28 z-50 px-4 py-2 text-sm rounded shadow-md ${
                         saveStatus === 'saving'
                             ? 'bg-blue-100 text-blue-800'
                             : saveStatus === 'saved'
@@ -54,20 +81,59 @@ export function BookEditorWrapper({ agentName, initialAgentSource }: BookEditorW
                     }`}
                 >
                     {saveStatus === 'saving' && '💾 Saving...'}
-                    {saveStatus === 'saved' && '✅ Saved successfully'}
+                    {saveStatus === 'saved' && '✅ Saved'}
                     {saveStatus === 'error' && '❌ Failed to save'}
                 </div>
             )}
-            <div className="flex-1">
-                <BookEditor value={agentSource} onChange={handleChange} />
-            </div>
+
+            <BookEditor
+                className="w-full h-full"
+                height={null}
+                value={agentSource}
+                onChange={handleChange}
+                onFileUpload={async (file) => {
+                    const formData = new FormData();
+                    formData.append('file', file);
+
+                    const response = await fetch('/api/upload', {
+                        method: 'POST',
+                        body: formData,
+                    });
+
+                    if (!response.ok) {
+                        throw new Error(`Failed to upload file: ${response.statusText}`);
+                    }
+
+                    const { fileUrl: longFileUrl } = await response.json();
+
+                    const LONG_URL = `${process.env.NEXT_PUBLIC_CDN_PUBLIC_URL!}/${process.env
+                        .NEXT_PUBLIC_CDN_PATH_PREFIX!}/user/files/`;
+                    const SHORT_URL = `https://ptbk.io/k/`;
+                    // <- TODO: [🌍] Unite this logic in one place
+
+                    const shortFileUrl = longFileUrl.split(LONG_URL).join(SHORT_URL);
+
+                    console.log(`File uploaded:`, {
+                        LONG_URL,
+                        SHORT_URL,
+                        longFileUrl,
+                        shortFileUrl,
+                        file,
+                        formData,
+                        response,
+                    });
+
+                    return shortFileUrl;
+                }}
+                // <- TODO: !!!! Create two-state solution for `<BookEditor onFileUpload={...} />`
+            />
         </div>
     );
 }
 
 /**
  * TODO: [🚗] Transfer the saving logic to `<BookEditor/>` be aware of CRDT / yjs approach to be implementable in future
- * TODO: !!! Implement debouncing for auto-save
+ * DONE: Implement debouncing for auto-save (600ms delay) ✅
  * TODO: !!! Add error handling and retry logic
  * TODO: !!! Show save status indicator
  * TODO: !!!!! Add file upload capability

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

@@ -5,15 +5,19 @@ import { headers } from 'next/headers';
 import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
 import { BookEditorWrapper } from './BookEditorWrapper';
 
-export default async function AgentPage({ params }: { params: Promise<{ agentName: string }> }) {
+export default async function AgentBookPage({ params }: { params: Promise<{ agentName: string }> }) {
     $sideEffect(headers());
 
-    const { agentName } = await params;
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
     const collection = await $provideAgentCollectionForServer();
-    const agentSourceSubject = await collection.getAgentSource(decodeURIComponent(agentName));
-    const agentSource = agentSourceSubject.getValue();
+    const agentSource = await collection.getAgentSource(decodeURIComponent(agentName));
 
-    return <BookEditorWrapper agentName={agentName} initialAgentSource={agentSource} />;
+    return (
+        <main className={`w-screen h-screen`}>
+            <BookEditorWrapper agentName={agentName} initialAgentSource={agentSource} />
+        </main>
+    );
 }
 
 /**

package/apps/agents-server/src/app/agents/[agentName]/book+chat/{SelfLearningBook.tsx → AgentBookAndChatComponent.tsx}

@@ -2,15 +2,14 @@
 
 import { ResizablePanelsAuto } from '@common/components/ResizablePanelsAuto/ResizablePanelsAuto';
 import { useStateInLocalStorage } from '@common/hooks/useStateInLocalStorage';
-import { BookEditor, LlmChat } from '@promptbook-local/components';
+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 { spaceTrim } from '@promptbook-local/utils';
 import { useMemo, useState } from 'react';
 
-export function SelfLearningBook() {
+export function AgentBookAndChatComponent() {
     const [apiKey, setApiKey] = useStateInLocalStorage<string>('openai-apiKey', () => '');
     const [isApiKeyVisible, setIsApiKeyVisible] = useState(false);
     const [isApiKeySectionCollapsed, setIsApiKeySectionCollapsed] = useState(!!apiKey);
@@ -85,10 +84,7 @@ export function SelfLearningBook() {
         return agent;
     }, [agentSource, setAgentSource, apiKey]);
 
-    const llmTools = useMemo(() => {
-        const llmTools = agent.getLlmExecutionTools();
-        return llmTools;
-    }, [agent]);
+
 
     return (
         <div className="min-h-screen relative">
@@ -153,45 +149,8 @@ export function SelfLearningBook() {
                         return file.name;
                     }}
                 />
-                {/*
-                <AgentChat className="w-full h-full" persistenceKey="marigold-chat" {...{ agent }} />
-                TODO: !!! Move to `AgentChat` component
-                */}
-                <LlmChat
-                    title={`Chat with ${agent.agentName || 'Agent'}`}
-                    // TODO: !!! Pass persistenceKey="chat-with-pavol-hejny"
-                    userParticipantName="USER"
-                    llmParticipantName="AGENT" // <- TODO: [🧠] Maybe dynamic agent id
-                    initialMessages={[
-                        {
-                            from: 'AGENT',
-                            content: spaceTrim(`
-                                
-                                Hello! I am ${agent.agentName || 'an AI Agent'}.
-                                
-                                [Hello](?message=Hello, can you tell me about yourself?)
-                            `),
-                        },
-                    ]}
-                    participants={[
-                        {
-                            name: 'AGENT',
-                            fullname: agent.agentName || 'Agent',
-                            avatarSrc: agent.meta.image,
-                            color: agent.meta.color,
-                            isMe: false,
-                            agentSource,
-                        },
-                        {
-                            name: 'USER',
-                            fullname: 'User',
-                            color: '#115EB6',
-                            isMe: true,
-                        },
-                    ]}
-                    {...{ llmTools }}
-                    className={`h-full flex flex-col`}
-                />
+        
+                <AgentChat className={`h-full flex flex-col`} {...{ agent }} />
             </ResizablePanelsAuto>
         </div>
     );

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

@@ -2,11 +2,14 @@
 
 import dynamic from 'next/dynamic';
 
-const SelfLearningBook = dynamic(() => import('./SelfLearningBook').then((module) => module.SelfLearningBook), {
-    ssr: false,
-});
+const SelfLearningBook = dynamic(
+    () => import('./AgentBookAndChatComponent').then((module) => module.AgentBookAndChatComponent),
+    {
+        ssr: false,
+    },
+);
 
-export default function SelfLearningBookPage() {
+export default function AgentBookAndChatPage() {
     return <SelfLearningBook />;
 }
 

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

@@ -0,0 +1,38 @@
+'use client';
+
+import { usePromise } from '@common/hooks/usePromise';
+import { AgentChat } from '@promptbook-local/components';
+import { RemoteAgent } from '@promptbook-local/core';
+import { 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]);
+
+    if (!agent) {
+        return <>{/* <- TODO: !!! <PromptbookLoading /> */}</>;
+    }
+
+    return <AgentChat className={`w-full h-full`} agent={agent} />;
+}
+
+/**
+ * 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,23 @@
+'use server';
+
+import { headers } from 'next/headers';
+import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
+import { AgentChatWrapper } from './AgentChatWrapper';
+
+export default async function AgentChatPage({ params }: { params: Promise<{ agentName: string }> }) {
+    $sideEffect(headers());
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
+
+    const agentUrl = `/agents/${agentName}`;
+
+    return (
+        <main className={`w-screen h-screen`}>
+            <AgentChatWrapper agentUrl={agentUrl} />
+        </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]/page.tsx

@@ -18,14 +18,15 @@ export default async function AgentPage({ params }: { params: Promise<{ agentNam
 
     $sideEffect(headers());
 
-    const { agentName } = await params;
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
+
     const collection = await $provideAgentCollectionForServer();
-    const agentSourceSubject = await collection.getAgentSource(decodeURIComponent(agentName));
-    const agentSource = agentSourceSubject.getValue();
+    const agentSource = await collection.getAgentSource(agentName);
     const agentProfile = parseAgentSource(agentSource);
 
     // Build agent page URL for QR and copy
-    const pageUrl = `https://s6.ptbk.io/agents/${encodeURIComponent(agentName)}`;
+    const pageUrl = `${process.env.NEXT_PUBLIC_URL}/agents/${encodeURIComponent(agentName)}`;
     // <- TODO: !!! Better
 
     // Extract brand color from meta
@@ -157,4 +158,5 @@ export default async function AgentPage({ params }: { params: Promise<{ agentNam
  * TODO: !!! Make this page look nice - 🃏
  * TODO: !!! Show usage of LLM
  * TODO: [🚗] Components and pages here should be just tiny UI wraper around proper agent logic and conponents
+ * TODO: [🎣][🧠] Maybe do API / Page for transpilers, Allow to export each agent
  */

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

@@ -0,0 +1,11 @@
+'use server';
+
+import HomePage from '../page';
+
+export default async function AgentsPage() {
+    return <HomePage />;
+}
+
+/**
+ * TODO: !!! Distinguish between `/` and `/agents` pages
+ */

package/apps/agents-server/src/app/api/chat/route.ts

@@ -27,6 +27,6 @@ export async function GET(request: Request) {
 
     return new Response(response.content, {
         status: 200,
-        headers: { 'Content-Type': 'text/plain' },
+        headers: { 'Content-Type': 'text/markdown' },
     });
 }

package/apps/agents-server/src/app/api/chat-streaming/route.ts

@@ -39,6 +39,10 @@ export async function GET(request: Request) {
 
     return new Response(readableStream, {
         status: 200,
-        headers: { 'Content-Type': 'text/plain' },
+        headers: { 'Content-Type': 'text/markdown' },
     });
 }
+
+/**
+ * Note: [🐚] This is how streaming is implemented correctly
+ */