@promptbook/cli 0.104.0-4 → 0.104.0-6

package/apps/agents-server/src/app/admin/messages/MessagesClient.tsx

@@ -0,0 +1,294 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { Card } from '../../../components/Homepage/Card';
+import {
+    $fetchMessages,
+    type MessageRow,
+    type MessageSendAttemptRow,
+} from '../../../utils/messagesAdmin';
+
+function formatDate(dateString: string | null | undefined): string {
+    if (!dateString) return '-';
+    const date = new Date(dateString);
+    if (Number.isNaN(date.getTime())) return dateString;
+    return date.toLocaleString();
+}
+
+function getMessagePreview(content: string, maxLength = 120): string {
+    if (!content) return '-';
+    return content.length > maxLength ? `${content.slice(0, maxLength)}…` : content;
+}
+
+function getStatusBadge(attempts: MessageSendAttemptRow[] | undefined) {
+    if (!attempts || attempts.length === 0) {
+        return <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">Pending</span>;
+    }
+    const success = attempts.find(a => a.isSuccessful);
+    if (success) {
+        return <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">Sent ({success.providerName})</span>;
+    }
+    return <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">Failed ({attempts.length})</span>;
+}
+
+export function MessagesClient() {
+    const [items, setItems] = useState<MessageRow[]>([]);
+    const [total, setTotal] = useState(0);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(20);
+    const [searchInput, setSearchInput] = useState('');
+    const [search, setSearch] = useState('');
+    const [channel, setChannel] = useState('');
+    const [direction, setDirection] = useState('');
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    // Load messages whenever filters / pagination change
+    useEffect(() => {
+        let isCancelled = false;
+
+        async function loadData() {
+            try {
+                setLoading(true);
+                setError(null);
+
+                const response = await $fetchMessages({
+                    page,
+                    pageSize,
+                    search: search || undefined,
+                    channel: channel || undefined,
+                    direction: direction || undefined,
+                });
+
+                if (isCancelled) return;
+
+                setItems(response.items);
+                setTotal(response.total);
+            } catch (err) {
+                if (isCancelled) return;
+                setError(err instanceof Error ? err.message : 'Failed to load messages');
+            } finally {
+                if (!isCancelled) {
+                    setLoading(false);
+                }
+            }
+        }
+
+        loadData();
+
+        return () => {
+            isCancelled = true;
+        };
+    }, [page, pageSize, search, channel, direction]);
+
+    const totalPages = useMemo(() => {
+        if (total <= 0 || pageSize <= 0) return 1;
+        return Math.max(1, Math.ceil(total / pageSize));
+    }, [total, pageSize]);
+
+    const handleSearchSubmit = (event: React.FormEvent) => {
+        event.preventDefault();
+        setPage(1);
+        setSearch(searchInput.trim());
+    };
+
+    const handlePageSizeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        const next = parseInt(event.target.value, 10);
+        if (!Number.isNaN(next) && next > 0) {
+            setPageSize(next);
+            setPage(1);
+        }
+    };
+
+    const pagination = (
+        <div className="mt-4 flex flex-col items-center justify-between gap-3 border-t border-gray-100 pt-4 text-xs text-gray-600 md:flex-row">
+            <div>
+                {total > 0 ? (
+                    <>
+                        Showing <span className="font-semibold">{Math.min((page - 1) * pageSize + 1, total)}</span> –{' '}
+                        <span className="font-semibold">{Math.min(page * pageSize, total)}</span> of{' '}
+                        <span className="font-semibold">{total}</span> messages
+                    </>
+                ) : (
+                    'No messages'
+                )}
+            </div>
+            <div className="flex items-center gap-2">
+                <button
+                    type="button"
+                    onClick={() => setPage((prev) => Math.max(1, prev - 1))}
+                    disabled={page <= 1}
+                    className="inline-flex items-center justify-center rounded-md border border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                    Previous
+                </button>
+                <span>
+                    Page <span className="font-semibold">{page}</span> of{' '}
+                    <span className="font-semibold">{totalPages}</span>
+                </span>
+                <button
+                    type="button"
+                    onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
+                    disabled={page >= totalPages}
+                    className="inline-flex items-center justify-center rounded-md border border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                    Next
+                </button>
+            </div>
+        </div>
+    );
+
+    return (
+        <div className="container mx-auto px-4 py-8 space-y-6">
+            <div className="mt-20 mb-4 flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
+                <div>
+                    <h1 className="text-3xl text-gray-900 font-light">Messages</h1>
+                    <p className="mt-1 text-sm text-gray-500">
+                        Inspect all inbound and outbound messages and their statuses.
+                    </p>
+                </div>
+                <div className="flex items-end gap-4 text-sm text-gray-500 md:text-right">
+                    <div>
+                        <div className="text-xl font-semibold text-gray-900">{total.toLocaleString()}</div>
+                        <div className="text-xs uppercase tracking-wide text-gray-400">Total messages</div>
+                    </div>
+                </div>
+            </div>
+            <Card>
+                <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
+                    <form onSubmit={handleSearchSubmit} className="flex flex-col gap-2 md:flex-row md:items-end">
+                        <div className="flex flex-col gap-1">
+                            <label htmlFor="search" className="text-sm font-medium text-gray-700">
+                                Search
+                            </label>
+                            <input
+                                id="search"
+                                type="text"
+                                value={searchInput}
+                                onChange={(event) => setSearchInput(event.target.value)}
+                                placeholder="Search in content..."
+                                className="w-full md:w-72 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            />
+                        </div>
+                        <button
+                            type="submit"
+                            className="mt-2 inline-flex items-center justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 md:mt-0 md:ml-3"
+                        >
+                            Apply
+                        </button>
+                    </form>
+
+                    <div className="flex flex-col gap-2 md:flex-row md:items-end md:gap-4">
+                        <div className="flex flex-col gap-1">
+                            <label htmlFor="channelFilter" className="text-sm font-medium text-gray-700">
+                                Channel
+                            </label>
+                            <select
+                                id="channelFilter"
+                                value={channel}
+                                onChange={(e) => { setChannel(e.target.value); setPage(1); }}
+                                className="w-full md:w-40 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            >
+                                <option value="">All</option>
+                                <option value="EMAIL">Email</option>
+                                <option value="PROMPTBOOK_CHAT">Chat</option>
+                            </select>
+                        </div>
+
+                        <div className="flex flex-col gap-1">
+                            <label htmlFor="directionFilter" className="text-sm font-medium text-gray-700">
+                                Direction
+                            </label>
+                            <select
+                                id="directionFilter"
+                                value={direction}
+                                onChange={(e) => { setDirection(e.target.value); setPage(1); }}
+                                className="w-full md:w-40 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            >
+                                <option value="">All</option>
+                                <option value="INBOUND">Inbound</option>
+                                <option value="OUTBOUND">Outbound</option>
+                            </select>
+                        </div>
+
+                        <div className="flex flex-col gap-1">
+                            <label htmlFor="pageSize" className="text-sm font-medium text-gray-700">
+                                Page size
+                            </label>
+                            <select
+                                id="pageSize"
+                                value={pageSize}
+                                onChange={handlePageSizeChange}
+                                className="w-28 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            >
+                                <option value={10}>10</option>
+                                <option value={20}>20</option>
+                                <option value={50}>50</option>
+                                <option value={100}>100</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </Card>
+
+            <Card>
+                <div className="flex items-center justify-between mb-4">
+                    <h2 className="text-lg font-medium text-gray-900">Message list</h2>
+                </div>
+                {error && <div className="mb-4 rounded-md bg-red-50 px-4 py-3 text-sm text-red-800">{error}</div>}
+
+                {loading && items.length === 0 ? (
+                    <div className="py-8 text-center text-gray-500">Loading messages…</div>
+                ) : items.length === 0 ? (
+                    <div className="py-8 text-center text-gray-500">No messages found.</div>
+                ) : (
+                    <div className="overflow-x-auto">
+                        <table className="min-w-full divide-y divide-gray-200 text-sm">
+                            <thead className="bg-gray-50">
+                                <tr>
+                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Time</th>
+                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Channel</th>
+                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Direction</th>
+                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Sender/Recipients</th>
+                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Content</th>
+                                    <th className="px-4 py-3 text-left font-medium text-gray-500">Status</th>
+                                </tr>
+                            </thead>
+                            <tbody className="divide-y divide-gray-200 bg-white">
+                                {items.map((row) => (
+                                    <tr key={row.id}>
+                                        <td className="whitespace-nowrap px-4 py-3 text-gray-700">
+                                            {formatDate(row.createdAt)}
+                                        </td>
+                                        <td className="whitespace-nowrap px-4 py-3 text-gray-700">
+                                            {row.channel}
+                                        </td>
+                                        <td className="whitespace-nowrap px-4 py-3 text-gray-700">
+                                            {row.direction}
+                                        </td>
+                                        <td className="max-w-xs px-4 py-3 text-gray-700">
+                                            <div className="truncate" title={JSON.stringify({ sender: row.sender, recipients: row.recipients }, null, 2)}>
+                                                {/* Simple preview of sender/recipients */}
+                                                S: {JSON.stringify(row.sender)}<br/>
+                                                R: {JSON.stringify(row.recipients)}
+                                            </div>
+                                        </td>
+                                        <td className="max-w-md px-4 py-3 text-gray-700">
+                                            <div className="max-h-24 overflow-hidden overflow-ellipsis text-xs leading-snug">
+                                                {getMessagePreview(row.content)}
+                                            </div>
+                                        </td>
+                                        <td className="whitespace-nowrap px-4 py-3 text-gray-700">
+                                            {getStatusBadge(row.sendAttempts)}
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                )}
+                {pagination}
+            </Card>
+        </div>
+    );
+}

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

@@ -0,0 +1,13 @@
+import { ForbiddenPage } from '../../../components/ForbiddenPage/ForbiddenPage';
+import { isUserAdmin } from '../../../utils/isUserAdmin';
+import { MessagesClient } from './MessagesClient';
+
+export default async function AdminMessagesPage() {
+    const isAdmin = await isUserAdmin();
+
+    if (!isAdmin) {
+        return <ForbiddenPage />;
+    }
+
+    return <MessagesClient />;
+}

package/apps/agents-server/src/app/admin/messages/send-email/SendEmailClient.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { useState } from 'react';
+import { assertsError } from '../../../../../../../src/errors/assertsError';
+import { sendEmailAction } from './actions';
+
+export function SendEmailClient() {
+    const [status, setStatus] = useState<'IDLE' | 'LOADING' | 'SUCCESS' | 'ERROR'>('IDLE');
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        setStatus('LOADING');
+        setErrorMessage(null);
+
+        const formData = new FormData(event.currentTarget);
+
+        try {
+            await sendEmailAction(formData);
+            setStatus('SUCCESS');
+        } catch (error) {
+            assertsError(error);
+            console.error(error);
+            setStatus('ERROR');
+            setErrorMessage(error.message);
+        }
+    };
+
+    return (
+        <div className="container mx-auto p-4">
+            <h1 className="text-2xl font-bold mb-4">Send Email (Test)</h1>
+
+            {status === 'SUCCESS' && (
+                <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
+                    Email sent successfully!
+                </div>
+            )}
+
+            {status === 'ERROR' && (
+                <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+                    Error: {errorMessage}
+                </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4 max-w-lg">
+                <div>
+                    <label className="block text-sm font-medium text-gray-700">From</label>
+                    <input
+                        name="from"
+                        type="text"
+                        defaultValue="Test Promptbook <test@ptbk.io>"
+                        required
+                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-sm font-medium text-gray-700">To</label>
+                    <input
+                        name="to"
+                        type="text"
+                        placeholder="recipient@example.com"
+                        defaultValue="Pavol Hejný <pavol@ptbk.io>"
+                        required
+                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2"
+                    />
+                    <p className="text-xs text-gray-500 mt-1">Separate multiple addresses with commas</p>
+                </div>
+
+                <div>
+                    <label className="block text-sm font-medium text-gray-700">Subject</label>
+                    <input
+                        name="subject"
+                        type="text"
+                        placeholder="Test Email"
+                        defaultValue="Test Email"
+                        required
+                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2"
+                    />
+                </div>
+
+                <div>
+                    <label className="block text-sm font-medium text-gray-700">Body</label>
+                    <textarea
+                        name="body"
+                        rows={6}
+                        placeholder="Hello, this is a test email."
+                        defaultValue="Hello, this is a test email."
+                        required
+                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border p-2"
+                    />
+                </div>
+
+                <button
+                    type="submit"
+                    disabled={status === 'LOADING'}
+                    className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
+                >
+                    {status === 'LOADING' ? 'Sending...' : 'Send Email'}
+                </button>
+            </form>
+        </div>
+    );
+}

package/apps/agents-server/src/app/admin/messages/send-email/actions.ts

@@ -0,0 +1,35 @@
+'use server';
+
+import type { string_email, string_emails, string_html } from '@promptbook-local/types';
+import { parseEmailAddress } from '../../../../message-providers/email/_common/utils/parseEmailAddress';
+import { parseEmailAddresses } from '../../../../message-providers/email/_common/utils/parseEmailAddresses';
+import { stringifyEmailAddress } from '../../../../message-providers/email/_common/utils/stringifyEmailAddress';
+import { sendMessage } from '../../../../utils/messages/sendMessage';
+
+export async function sendEmailAction(formData: FormData) {
+    const from = formData.get('from') as string;
+    const to = formData.get('to') as string;
+    const subject = formData.get('subject') as string;
+    const body = formData.get('body') as string;
+
+    if (!from || !to || !subject || !body) {
+        throw new Error('All fields are required');
+    }
+
+    const sender = stringifyEmailAddress(parseEmailAddress(from as string_email));
+    const recipients = parseEmailAddresses(to as string_emails).map(stringifyEmailAddress);
+
+    await sendMessage({
+        channel: 'EMAIL',
+        direction: 'OUTBOUND',
+        sender,
+        recipients,
+        subject,
+        content: body as string_html,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        threadId: crypto.randomUUID() as any,
+        cc: [],
+        attachments: [],
+        metadata: {},
+    });
+}

package/apps/agents-server/src/app/admin/messages/send-email/page.tsx

@@ -0,0 +1,13 @@
+import { ForbiddenPage } from '../../../../components/ForbiddenPage/ForbiddenPage';
+import { isUserAdmin } from '../../../../utils/isUserAdmin';
+import { SendEmailClient } from './SendEmailClient';
+
+export default async function AdminSendEmailPage() {
+    const isAdmin = await isUserAdmin();
+
+    if (!isAdmin) {
+        return <ForbiddenPage />;
+    }
+
+    return <SendEmailClient />;
+}

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { AgentBasicInformation } from '@promptbook-local/types';
+import { AgentBasicInformation, string_agent_name } from '@promptbook-local/types';
 import { AgentProfile } from '../../../components/AgentProfile/AgentProfile';
 import { AgentOptionsMenu } from './AgentOptionsMenu';
 
@@ -8,7 +8,7 @@ type AgentProfileWrapperProps = {
     agent: AgentBasicInformation;
     agentUrl: string;
     agentEmail: string;
-    agentName: string;
+    agentName: string_agent_name;
     brandColorHex: string;
     isAdmin: boolean;
     isHeadless: boolean;
@@ -27,6 +27,7 @@ export function AgentProfileWrapper(props: AgentProfileWrapperProps) {
         <AgentProfile
             agent={agent}
             agentUrl={agentUrl}
+            permanentId={permanentId || agentName}
             agentEmail={agentEmail}
             isHeadless={isHeadless}
             renderMenu={({ onShowQrCode }) => (

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

@@ -13,7 +13,11 @@ export async function getAgentName(params: Promise<{ agentName: string }>) {
 export async function getAgentProfile(agentName: string) {
     const collection = await $provideAgentCollectionForServer();
     const agentSource = await collection.getAgentSource(agentName);
-    return parseAgentSource(agentSource);
+    const agentProfile = parseAgentSource(agentSource);
+
+    console.log('!!!!', { agentSource, agentProfile });
+
+    return agentProfile;
 }
 
 export async function isAgentDeleted(agentName: string): Promise<boolean> {
@@ -33,5 +37,5 @@ export async function isAgentDeleted(agentName: string): Promise<boolean> {
 }
 
 /**
- * TODO: Split to multiple files
+ * TODO: Split to multiple files, refactor
  */

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

@@ -29,6 +29,10 @@ export async function GET(request: Request, { params }: { params: Promise<{ agen
         const agentHash = computeAgentHash(agentSource);
         const isVoiceCallingEnabled = (await getMetadata('IS_EXPERIMENTAL_VOICE_CALLING_ENABLED')) === 'true';
 
+        if (!agentProfile.meta.image) {
+            agentProfile.meta.image = `/agents/${encodeURIComponent(agentName)}/images/default-avatar.png`;
+        }
+
         return new Response(
             JSON.stringify(
                 {

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

@@ -1,6 +1,8 @@
 'use client';
 
 import Editor from '@monaco-editor/react';
+import { generatePlaceholderAgentProfileImageUrl } from '@promptbook-local/core';
+import { AgentBasicInformation } from '@promptbook-local/types';
 import { ArrowLeftIcon, ChevronDownIcon, CodeIcon } from 'lucide-react';
 import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
@@ -29,7 +31,7 @@ function getLanguageFromTranspiler(transpilerName?: string): string {
 
 export default function AgentCodePage({ params }: { params: Promise<{ agentName: string }> }) {
     const [agentName, setAgentName] = useState<string>('');
-    const [agentProfile, setAgentProfile] = useState<unknown>(null);
+    const [agentProfile, setAgentProfile] = useState<AgentBasicInformation | null>(null);
     const [transpilers, setTranspilers] = useState<Transpiler[]>([]);
     const [selectedTranspiler, setSelectedTranspiler] = useState<Transpiler | null>(null);
     const [transpiledCode, setTranspiledCode] = useState<string>('');
@@ -114,13 +116,17 @@ export default function AgentCodePage({ params }: { params: Promise<{ agentName:
                 {/* Header */}
                 <div className="p-6 border-b border-gray-200 flex items-center gap-4">
                     {/* eslint-disable @typescript-eslint/no-explicit-any, @next/next/no-img-element */}
-                    {(agentProfile as any)?.meta?.image && (
-                        <img
-                            src={(agentProfile as any).meta.image as string}
-                            alt={(agentProfile as any).meta.fullname || agentName}
-                            className="w-16 h-16 rounded-full object-cover border-2 border-gray-200"
-                        />
-                    )}
+
+                    <img
+                        src={
+                            agentProfile.meta.image ||
+                            agentProfile.permanentId ||
+                            generatePlaceholderAgentProfileImageUrl(agentName)
+                        }
+                        alt={agentProfile.meta.fullname || agentName}
+                        className="w-16 h-16 rounded-full object-cover border-2 border-gray-200"
+                    />
+
                     <div className="flex-1">
                         {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
                         <h1 className="text-2xl font-bold text-gray-900">