@promptbook/cli 0.103.0-52 → 0.103.0-53

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

@@ -0,0 +1,41 @@
+'use client';
+
+import { CopyIcon } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+
+type CloneAgentButtonProps = {
+    agentName: string;
+};
+
+export function CloneAgentButton({ agentName }: CloneAgentButtonProps) {
+    const router = useRouter();
+
+    const handleClone = async () => {
+        if (!window.confirm(`Clone agent "${agentName}"?`)) return;
+        
+        try {
+            const response = await fetch(`/api/agents/${encodeURIComponent(agentName)}/clone`, { method: 'POST' });
+            
+            if (!response.ok) {
+                throw new Error('Failed to clone agent');
+            }
+
+            const newAgent = await response.json();
+            router.push(`/${newAgent.agentName}`);
+            router.refresh();
+        } catch (error) {
+            alert('Failed to clone agent');
+            console.error(error);
+        }
+    };
+
+    return (
+        <button
+            onClick={handleClone}
+            className="flex-1 inline-flex items-center justify-center whitespace-nowrap bg-white hover:bg-gray-100 text-gray-800 px-4 py-2 rounded shadow font-semibold transition border border-gray-200"
+        >
+            <CopyIcon className="ml-2 w-4 h-4 mr-2" />
+            Clone
+        </button>
+    );
+}

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

@@ -0,0 +1,74 @@
+'use client';
+
+import { TODO_any } from '@promptbook-local/types';
+import { ShoppingBagIcon } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+
+type BeforeInstallPromptEvent = Event & {
+    prompt: () => Promise<void>;
+    userChoice: Promise<{ outcome: 'accepted' | 'dismissed'; platform: string }>;
+};
+
+export function InstallPwaButton() {
+    const [installPromptEvent, setInstallPromptEvent] = useState<BeforeInstallPromptEvent | null>(null);
+    const [isInstalled, setIsInstalled] = useState(false);
+    const [hasPrompted, setHasPrompted] = useState(false);
+
+    useEffect(() => {
+        function handleBeforeInstallPrompt(e: Event) {
+            // Some browsers (Chrome) fire this event when PWA is installable
+            e.preventDefault();
+            setInstallPromptEvent(e as BeforeInstallPromptEvent);
+        }
+
+        function updateInstalledStatus() {
+            const mediaMatch = window.matchMedia('(display-mode: standalone)');
+            const standalone = mediaMatch.matches || (window.navigator as TODO_any).standalone === true;
+            setIsInstalled(standalone);
+        }
+
+        window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+        updateInstalledStatus();
+        window.matchMedia('(display-mode: standalone)').addEventListener('change', updateInstalledStatus);
+
+        return () => {
+            window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+            window.matchMedia('(display-mode: standalone)').removeEventListener('change', updateInstalledStatus);
+        };
+    }, []);
+
+    const onInstall = useCallback(async () => {
+        if (!installPromptEvent) return;
+        try {
+            installPromptEvent.prompt();
+            setHasPrompted(true);
+            const choice = await installPromptEvent.userChoice.catch(() => null);
+            if (choice?.outcome === 'accepted') {
+                setIsInstalled(true);
+            }
+        } finally {
+            // Clear stored event so button hides if dismissed
+            setInstallPromptEvent(null);
+        }
+    }, [installPromptEvent]);
+
+    if (isInstalled || (!installPromptEvent && hasPrompted)) return null;
+
+    return (
+        <button
+            type="button"
+            onClick={onInstall}
+            className="flex-1 inline-flex items-center justify-center whitespace-nowrap bg-white hover:bg-gray-100 text-gray-800 px-4 py-2 rounded shadow font-semibold transition border border-gray-200"
+            style={{
+                opacity: installPromptEvent ? 1 : 0.5,
+                cursor: installPromptEvent ? 'pointer' : 'wait',
+            }}
+            aria-label="Install App"
+            disabled={!installPromptEvent}
+        >
+            {/* Simple icon substitute: download arrow */}
+            <ShoppingBagIcon className="ml-2 w-4 h-4 mr-2" />
+            Install
+        </button>
+    );
+}

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

@@ -0,0 +1,24 @@
+'use client';
+
+import { useEffect } from 'react';
+
+type ServiceWorkerRegisterProps = {
+    scope: string;
+};
+
+export function ServiceWorkerRegister({ scope }: ServiceWorkerRegisterProps) {
+    useEffect(() => {
+        if ('serviceWorker' in navigator) {
+            navigator.serviceWorker
+                .register('/sw.js', { scope })
+                .then((registration) => {
+                    console.log('Service Worker registered with scope:', registration.scope);
+                })
+                .catch((error) => {
+                    console.error('Service Worker registration failed:', error);
+                });
+        }
+    }, [scope]);
+
+    return null;
+}

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

@@ -0,0 +1,19 @@
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { parseAgentSource } from '@promptbook-local/core';
+
+export const AGENT_ACTIONS = ['Emails', 'Web chat', 'Read documents', 'Browser', 'WhatsApp', '<Coding/>'];
+
+export async function getAgentName(params: Promise<{ agentName: string }>) {
+    const { agentName } = await params;
+    return decodeURIComponent(agentName);
+}
+
+export async function getAgentProfile(agentName: string) {
+    const collection = await $provideAgentCollectionForServer();
+    const agentSource = await collection.getAgentSource(agentName);
+    return parseAgentSource(agentSource);
+}
+
+/**
+ * TODO: Split to multiple files
+ */

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

@@ -0,0 +1,67 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(
+    request: NextRequest,
+    { params }: { params: Promise<{ agentName: string }> }
+) {
+    try {
+        const { agentName } = await params;
+        // agentName is likely the federated server URL (e.g., "https://s6.ptbk.io")
+        // It comes decoded from the URL params if it was encoded in the request path
+        
+        let serverUrl = agentName;
+
+        // If the serverUrl doesn't look like a URL, it might be just a hostname or something else
+        // But the requirement says we look for /agents/[federated-server]/api/agents
+        // The client will likely pass the full URL or hostname.
+        // We'll assume if it doesn't start with http, we might need to prepend it, or it's invalid.
+        // However, the current federated servers list contains full URLs.
+        
+        // If it was somehow double encoded or something, we might need to handle it, but standard Next.js behavior is single decode.
+        
+        if (!serverUrl.startsWith('http')) {
+             // Maybe it is just a hostname?
+             // Let's try to assume https if missing
+             if (serverUrl.includes('.')) {
+                 serverUrl = `https://${serverUrl}`;
+             } else {
+                 return NextResponse.json(
+                    { error: 'Invalid federated server URL' },
+                    { status: 400 }
+                );
+             }
+        }
+
+        // Normalize URL (remove trailing slash)
+        serverUrl = serverUrl.replace(/\/$/, '');
+
+        const response = await fetch(`${serverUrl}/api/agents`, {
+            // Forward relevant headers if necessary, or just basic fetch
+            headers: {
+                'Content-Type': 'application/json',
+                // Add any other needed headers
+            },
+            next: { revalidate: 600 }, // Cache for 10 minutes
+        });
+
+        if (!response.ok) {
+            console.warn(`Proxy failed to fetch agents from ${serverUrl}: ${response.status} ${response.statusText}`);
+            return NextResponse.json(
+                { error: `Failed to fetch from ${serverUrl}` },
+                { status: response.status }
+            );
+        }
+
+        const data = await response.json();
+        return NextResponse.json(data);
+
+    } catch (error) {
+        console.error('Proxy error fetching federated agents:', error);
+        return NextResponse.json(
+            { error: 'Internal Server Error' },
+            { status: 500 }
+        );
+    }
+}

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

@@ -1,3 +1,4 @@
+import { getMetadata } from '@/src/database/getMetadata';
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
 import { computeAgentHash, parseAgentSource } from '@promptbook-local/core';
 import { serializeError } from '@promptbook-local/utils';
@@ -26,6 +27,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
         const agentSource = await collection.getAgentSource(agentName);
         const agentProfile = parseAgentSource(agentSource);
         const agentHash = computeAgentHash(agentSource);
+        const isVoiceCallingEnabled = (await getMetadata('IS_VOICE_CALLING_ENABLED')) === 'true';
 
         return new Response(
             JSON.stringify(
@@ -33,6 +35,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
                     ...agentProfile,
                     agentHash,
                     parameters: [], // <- TODO: [😰] Implement parameters
+                    isVoiceCallingEnabled, // [✨✷] Add voice calling status
                 },
                 // <- TODO: [🐱‍🚀] Rename `serializeError` to `errorToJson`
                 null,

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

@@ -0,0 +1,177 @@
+import { $getTableName } from '@/src/database/$getTableName';
+import { $provideSupabaseForServer } from '@/src/database/$provideSupabaseForServer';
+import { getMetadata } from '@/src/database/getMetadata';
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $provideOpenAiAssistantExecutionToolsForServer } from '@/src/tools/$provideOpenAiAssistantExecutionToolsForServer';
+import { Agent, computeAgentHash, PROMPTBOOK_ENGINE_VERSION } from '@promptbook-local/core';
+import { computeHash, serializeError } from '@promptbook-local/utils';
+import { assertsError } from '../../../../../../../../src/errors/assertsError';
+
+export const maxDuration = 300;
+
+export async function OPTIONS(request: Request) {
+    return new Response(null, {
+        status: 200,
+        headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type',
+        },
+    });
+}
+
+export async function POST(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
+    // Check if voice calling is enabled
+    const isVoiceCallingEnabled = (await getMetadata('IS_VOICE_CALLING_ENABLED')) === 'true';
+    if (!isVoiceCallingEnabled) {
+        return new Response(JSON.stringify({ error: 'Voice calling is disabled on this server' }), {
+            status: 403,
+            headers: { 'Content-Type': 'application/json' },
+        });
+    }
+
+    let { agentName } = await params;
+    agentName = decodeURIComponent(agentName);
+
+    // Note: Parse FormData for audio file
+    const formData = await request.formData();
+    const audioFile = formData.get('audio') as File | null;
+    const threadString = formData.get('thread') as string | null;
+    const thread = threadString ? JSON.parse(threadString) : undefined;
+    const messageContext = formData.get('message') as string | null; // Optional text context or previous message?
+
+    if (!audioFile) {
+        return new Response(JSON.stringify({ error: 'No audio file provided' }), {
+            status: 400,
+            headers: { 'Content-Type': 'application/json' },
+        });
+    }
+
+    try {
+        const collection = await $provideAgentCollectionForServer();
+        const openAiAssistantExecutionTools = await $provideOpenAiAssistantExecutionToolsForServer();
+        const agentSource = await collection.getAgentSource(agentName);
+        const agent = new Agent({
+            isVerbose: true,
+            executionTools: {
+                llm: openAiAssistantExecutionTools,
+            },
+            agentSource,
+        });
+
+        // 1. Transcribe Audio (STT)
+        const client = await openAiAssistantExecutionTools.getClient();
+        const transcription = await client.audio.transcriptions.create({
+            file: audioFile,
+            model: 'whisper-1',
+        });
+        const message = transcription.text;
+
+        // --- Common Chat Logic Start (TODO: Extract) ---
+
+        const agentHash = computeAgentHash(agentSource);
+        const userAgent = request.headers.get('user-agent');
+        const ip =
+            request.headers.get('x-forwarded-for') ||
+            request.headers.get('x-real-ip') ||
+            request.headers.get('x-client-ip');
+        const language = request.headers.get('accept-language');
+        const platform = userAgent ? userAgent.match(/\(([^)]+)\)/)?.[1] : undefined;
+
+        // Identify and Record User Message
+        const userMessageContent = {
+            role: 'USER',
+            content: message,
+            isVoiceCall: true, // Mark as voice call
+        };
+        const supabase = $provideSupabaseForServer();
+        await supabase.from(await $getTableName('ChatHistory')).insert({
+            createdAt: new Date().toISOString(),
+            messageHash: computeHash(userMessageContent),
+            previousMessageHash: null,
+            agentName,
+            agentHash,
+            message: userMessageContent,
+            promptbookEngineVersion: PROMPTBOOK_ENGINE_VERSION,
+            url: request.url,
+            ip,
+            userAgent,
+            language,
+            platform,
+        });
+
+        // Call Agent
+        const response = await agent.callChatModel({
+            title: `Voice Chat with agent ${agentName}`,
+            parameters: {},
+            modelRequirements: {
+                modelVariant: 'CHAT',
+            },
+            content: message,
+            thread,
+        });
+
+        const agentMessageContent = {
+            role: 'MODEL',
+            content: response.content,
+            isVoiceCall: true,
+        };
+
+        // Record Agent Message
+        await supabase.from(await $getTableName('ChatHistory')).insert({
+            createdAt: new Date().toISOString(),
+            messageHash: computeHash(agentMessageContent),
+            previousMessageHash: computeHash(userMessageContent),
+            agentName,
+            agentHash,
+            message: agentMessageContent,
+            promptbookEngineVersion: PROMPTBOOK_ENGINE_VERSION,
+            url: request.url,
+            ip,
+            userAgent,
+            language,
+            platform,
+        });
+
+        // Learning
+        const newAgentSource = agent.agentSource.value;
+        if (newAgentSource !== agentSource) {
+            await collection.updateAgentSource(agentName, newAgentSource);
+        }
+
+        // --- Common Chat Logic End ---
+
+        // 2. Synthesize Audio (TTS)
+        const mp3 = await client.audio.speech.create({
+            model: 'tts-1',
+            voice: 'alloy',
+            input: response.content,
+        });
+
+        const buffer = Buffer.from(await mp3.arrayBuffer());
+        const base64Audio = buffer.toString('base64');
+
+        return new Response(
+            JSON.stringify({
+                userMessage: message,
+                agentMessage: response.content,
+                audio: base64Audio,
+                audioFormat: 'mp3',
+            }),
+            {
+                status: 200,
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Access-Control-Allow-Origin': '*',
+                },
+            },
+        );
+    } catch (error) {
+        assertsError(error);
+        console.error(error);
+        return new Response(JSON.stringify(serializeError(error), null, 4), {
+            status: 400,
+            headers: { 'Content-Type': 'application/json' },
+        });
+    }
+}

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

@@ -5,8 +5,11 @@ import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentColle
 import { isUserAdmin } from '@/src/utils/isUserAdmin';
 import { headers } from 'next/headers';
 import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
+import { generateAgentMetadata } from '../generateAgentMetadata';
 import { BookEditorWrapper } from './BookEditorWrapper';
 
+export const generateMetadata = generateAgentMetadata;
+
 export default async function AgentBookPage({ params }: { params: Promise<{ agentName: string }> }) {
     $sideEffect(headers());
 

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