@promptbook/cli 0.112.0-126 → 0.112.0-128

package/apps/agents-server/src/components/NewAgentDialog/ManGoNewAgentWizard/components/BookLanguagePanel.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import { useState } from 'react';
+
+import type { string_book } from '../../../../../../../src/book-2.0/agent-source/string_book';
+import { BookEditor } from '../../../../../../../src/book-components/BookEditor/BookEditor';
+import { convertToBook } from '../services/bookService';
+import { Badge } from './ui/Badge';
+import { Button } from './ui/Button';
+import { Spinner } from './ui/Spinner';
+
+type Phase = 'idle' | 'loading' | 'ready' | 'error';
+
+/**
+ * Converts the editor's markdown draft into canonical Book language via the `generateBook`
+ * endpoint and shows the validated result. Optional, on-demand — keeps the free-markdown
+ * editing flow intact while exposing the "real" Book artifact.
+ */
+export function BookLanguagePanel({ source }: { readonly source: string }) {
+    const [phase, setPhase] = useState<Phase>('idle');
+    const [book, setBook] = useState('');
+    const [isValid, setIsValid] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [generatedFrom, setGeneratedFrom] = useState('');
+    const [copied, setCopied] = useState(false);
+
+    async function generate() {
+        setPhase('loading');
+        setError(null);
+        try {
+            const result = await convertToBook(source);
+            setBook(result.book);
+            setIsValid(result.isValid);
+            setGeneratedFrom(source);
+            setPhase('ready');
+        } catch (caught) {
+            setError(caught instanceof Error ? caught.message : 'Převod na Book selhal.');
+            setPhase('error');
+        }
+    }
+
+    function copy() {
+        void navigator.clipboard?.writeText(book).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+        });
+    }
+
+    const isStale = phase === 'ready' && source !== generatedFrom;
+
+    return (
+        <div className="mt-5 rounded-2xl border border-zinc-200/60 bg-white p-5 shadow-[var(--ob-shadow-sm)]">
+            <div className="flex items-center justify-between gap-3">
+                <div className="min-w-0">
+                    <div className="text-sm font-semibold text-zinc-800">Book language</div>
+                    <div className="mt-0.5 text-xs text-zinc-400">
+                        Kanonická, validovaná podoba agenta vygenerovaná z vašeho draftu.
+                    </div>
+                </div>
+                {phase === 'ready' && (
+                    <Badge tone={isValid ? 'success' : 'warning'} dot>
+                        {isValid ? 'Validní book' : 'Nevalidní'}
+                    </Badge>
+                )}
+            </div>
+
+            {phase === 'idle' && (
+                <div className="mt-4">
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        disabled={!source.trim()}
+                        leadingIcon={<span aria-hidden>✨</span>}
+                        onClick={() => void generate()}
+                    >
+                        Převést na Book language
+                    </Button>
+                </div>
+            )}
+
+            {phase === 'loading' && (
+                <div className="mt-4 flex items-center gap-2 text-sm text-zinc-500">
+                    <Spinner className="h-4 w-4" /> Generuji Book…
+                </div>
+            )}
+
+            {phase === 'error' && (
+                <div className="mt-4 rounded-xl border border-amber-200 bg-amber-50 px-3.5 py-2.5 text-sm text-amber-800">
+                    <p>{error}</p>
+                    <button
+                        type="button"
+                        onClick={() => void generate()}
+                        className="mt-1 font-medium underline underline-offset-2"
+                    >
+                        Zkusit znovu
+                    </button>
+                </div>
+            )}
+
+            {phase === 'ready' && (
+                <div className="mt-4">
+                    <BookEditor value={book as string_book} isReadonly />
+                    {isStale && (
+                        <p className="mt-2 text-xs text-amber-600">
+                            Draft se od převodu změnil — přegenerujte pro aktuální book.
+                        </p>
+                    )}
+                    <div className="mt-3 flex items-center gap-2">
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            leadingIcon={<span aria-hidden>↻</span>}
+                            onClick={() => void generate()}
+                        >
+                            Přegenerovat
+                        </Button>
+                        <Button variant="ghost" size="sm" onClick={copy}>
+                            {copied ? '✓ Zkopírováno' : 'Kopírovat'}
+                        </Button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

package/apps/agents-server/src/components/NewAgentDialog/ManGoNewAgentWizard/components/DropZone.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { useRef, useState } from 'react';
+
+import { cn } from '../lib/cn';
+
+type DropZoneProps = {
+    readonly onFiles: (files: readonly File[]) => void;
+    readonly hint?: string;
+    readonly disabled?: boolean;
+};
+
+export function DropZone({ onFiles, hint, disabled }: DropZoneProps) {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [isDragging, setIsDragging] = useState(false);
+
+    function emit(fileList: FileList | null) {
+        const files = fileList ? Array.from(fileList) : [];
+        if (files.length > 0) {
+            onFiles(files);
+        }
+    }
+
+    return (
+        <div
+            role="button"
+            tabIndex={disabled ? -1 : 0}
+            aria-disabled={disabled}
+            onClick={() => !disabled && inputRef.current?.click()}
+            onKeyDown={(event) => {
+                if (!disabled && (event.key === 'Enter' || event.key === ' ')) {
+                    event.preventDefault();
+                    inputRef.current?.click();
+                }
+            }}
+            onDragEnter={(event) => {
+                event.preventDefault();
+                if (!disabled) setIsDragging(true);
+            }}
+            onDragOver={(event) => event.preventDefault()}
+            onDragLeave={() => setIsDragging(false)}
+            onDrop={(event) => {
+                event.preventDefault();
+                setIsDragging(false);
+                if (!disabled) emit(event.dataTransfer.files);
+            }}
+            className={cn(
+                'group flex flex-col items-center justify-center rounded-2xl border-2 border-dashed px-6 py-12 text-center transition-all duration-200',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ob-ring)] focus-visible:ring-offset-2',
+                disabled && 'cursor-not-allowed opacity-60',
+                !disabled && isDragging
+                    ? 'scale-[1.01] border-[color:var(--ob-accent-500)] bg-[color:var(--ob-accent-50)]'
+                    : 'cursor-pointer border-zinc-300 bg-zinc-50/60 hover:border-[color:var(--ob-accent-300)] hover:bg-[color:var(--ob-accent-50)]/50',
+            )}
+        >
+            <input
+                ref={inputRef}
+                type="file"
+                multiple
+                className="hidden"
+                onChange={(event) => {
+                    emit(event.target.files);
+                    event.target.value = '';
+                }}
+            />
+            <span
+                className={cn(
+                    'flex h-12 w-12 items-center justify-center rounded-full text-2xl transition-colors',
+                    isDragging
+                        ? 'bg-[color:var(--ob-accent-100)]'
+                        : 'bg-white shadow-[var(--ob-shadow-sm)] group-hover:bg-[color:var(--ob-accent-100)]',
+                )}
+                aria-hidden
+            >
+                📂
+            </span>
+            <p className="mt-3 text-sm text-zinc-700">
+                <strong className="font-semibold text-zinc-900">Přetáhněte soubory sem</strong> nebo klikněte pro výběr
+            </p>
+            {hint && <p className="mt-1 text-xs text-zinc-400">{hint}</p>}
+        </div>
+    );
+}

package/apps/agents-server/src/components/NewAgentDialog/ManGoNewAgentWizard/components/EmailTestRun.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+import { useState } from 'react';
+
+import { createId } from '../lib/id';
+import { cn } from '../lib/cn';
+import { agentTestService } from '../services/agentTestService';
+import { evaluateReply, type ReplyCheck } from '../services/agentEvalService';
+import type { KnowledgeItem } from '../types';
+import { Badge } from './ui/Badge';
+import { Button } from './ui/Button';
+import { CONTROL } from './ui/Field';
+import { Spinner } from './ui/Spinner';
+
+type Phase = 'idle' | 'running' | 'done' | 'error';
+
+type EmailTestRunProps = {
+    readonly email: string;
+    readonly onEmailChange: (value: string) => void;
+    readonly bookSource: string;
+    readonly knowledge: readonly KnowledgeItem[];
+    readonly onEditBook: () => void;
+};
+
+function RunStep({
+    icon,
+    title,
+    children,
+    done,
+}: {
+    readonly icon: string;
+    readonly title: string;
+    readonly children?: React.ReactNode;
+    readonly done?: boolean;
+}) {
+    return (
+        <div className="flex gap-3 border-b border-zinc-100 py-3.5 last:border-b-0">
+            <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-zinc-100 text-base" aria-hidden>
+                {icon}
+            </div>
+            <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                    <span className="text-[13px] font-semibold text-zinc-800">{title}</span>
+                    {done && (
+                        <span className="text-[color:var(--ob-accent-600)]" aria-hidden>
+                            ✓
+                        </span>
+                    )}
+                </div>
+                {children && <div className="mt-1 text-[13px] text-zinc-500">{children}</div>}
+            </div>
+        </div>
+    );
+}
+
+export function EmailTestRun({ email, onEmailChange, bookSource, knowledge, onEditBook }: EmailTestRunProps) {
+    const [phase, setPhase] = useState<Phase>('idle');
+    const [reply, setReply] = useState('');
+    const [error, setError] = useState<string | null>(null);
+    const [checks, setChecks] = useState<ReplyCheck[] | null>(null);
+    const [checksLoading, setChecksLoading] = useState(false);
+
+    const readyKnowledge = knowledge.filter((item) => item.status === 'ready').length;
+
+    async function run() {
+        const text = email.trim();
+        if (!text || phase === 'running') {
+            return;
+        }
+        setPhase('running');
+        setReply('');
+        setChecks(null);
+        setError(null);
+
+        try {
+            const result = await agentTestService.send({
+                bookSource,
+                knowledge,
+                messages: [{ id: createId(), role: 'user', content: text }],
+            });
+            setReply(result.content);
+            setPhase('done');
+
+            setChecksLoading(true);
+            try {
+                setChecks(await evaluateReply({ bookSource, customerEmail: text, reply: result.content }));
+            } catch {
+                setChecks([]);
+            } finally {
+                setChecksLoading(false);
+            }
+        } catch (caught) {
+            setError(caught instanceof Error ? caught.message : 'Testovací běh selhal.');
+            setPhase('error');
+        }
+    }
+
+    return (
+        <div className="space-y-4">
+            <div className="rounded-2xl border border-zinc-200/60 bg-white p-5 shadow-[var(--ob-shadow-sm)]">
+                <label htmlFor="email-test-input" className="mb-1.5 block text-[13px] font-semibold text-zinc-700">
+                    Testovací vstup — e-mail od zákazníka
+                </label>
+                <textarea
+                    id="email-test-input"
+                    rows={4}
+                    value={email}
+                    onChange={(event) => onEmailChange(event.target.value)}
+                    className={cn(CONTROL, 'resize-y')}
+                />
+                <div className="mt-3 flex items-center justify-between gap-3">
+                    <span className="text-xs text-zinc-400">Vlastní text, nebo klikněte na scénář vlevo.</span>
+                    <Button
+                        isLoading={phase === 'running'}
+                        leadingIcon={<span aria-hidden>▶</span>}
+                        onClick={() => void run()}
+                        disabled={email.trim().length === 0}
+                    >
+                        Spustit testovací běh
+                    </Button>
+                </div>
+            </div>
+
+            {phase === 'error' && (
+                <div className="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
+                    <div className="font-medium">Testovací běh se nezdařil.</div>
+                    <p className="mt-1">{error}</p>
+                    <button type="button" onClick={() => void run()} className="mt-1 font-medium underline underline-offset-2">
+                        Zkusit znovu
+                    </button>
+                </div>
+            )}
+
+            {(phase === 'running' || phase === 'done') && (
+                <div className="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-[var(--ob-shadow-md)]">
+                    <div className="flex items-center gap-2 border-b border-zinc-200 bg-zinc-50/80 px-4 py-2.5 text-[13px] font-medium text-zinc-600">
+                        <span className="relative flex h-2 w-2" aria-hidden>
+                            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
+                            <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500" />
+                        </span>
+                        Záznam testovacího běhu
+                        <span className="ml-auto">
+                            <Badge tone="success" dot>
+                                Naživo
+                            </Badge>
+                        </span>
+                    </div>
+
+                    <div className="px-4">
+                        <RunStep icon="📨" title="Vstup přijat: e-mail zákazníka" done>
+                            E-mail předán agentovi ke zpracování.
+                        </RunStep>
+                        <RunStep icon="🧠" title="Prohledání znalostí" done>
+                            {readyKnowledge > 0
+                                ? `${readyKnowledge} ${readyKnowledge === 1 ? 'zdroj' : 'zdroje/ů'} připojeno k agentovi.`
+                                : 'Bez znalostní báze — agent vychází jen z booku.'}
+                        </RunStep>
+                        <RunStep icon="✍️" title="Návrh odpovědi">
+                            {phase === 'running' ? (
+                                <span className="inline-flex items-center gap-2 text-zinc-500">
+                                    <Spinner className="h-4 w-4" /> Generuji odpověď…
+                                </span>
+                            ) : (
+                                <>
+                                    <div className="mt-1 whitespace-pre-wrap rounded-xl border border-zinc-200 bg-zinc-50 p-3.5 text-[13px] leading-relaxed text-zinc-700">
+                                        {reply}
+                                    </div>
+                                    <p className="mt-2 text-[11px] text-zinc-400">
+                                        Toto je návrh — agent nic neodesílá, odpověď schvaluje operátor.
+                                    </p>
+                                </>
+                            )}
+                        </RunStep>
+                    </div>
+
+                    {phase === 'done' && (
+                        <div className="border-t border-zinc-200 bg-zinc-50/60 px-4 py-3.5">
+                            <div className="mb-2 text-xs font-semibold text-zinc-500">Kontroly výsledku</div>
+                            {checksLoading ? (
+                                <div className="flex items-center gap-2 text-[13px] text-zinc-500">
+                                    <Spinner className="h-4 w-4" /> Hodnotím odpověď proti booku…
+                                </div>
+                            ) : checks && checks.length > 0 ? (
+                                <ul className="space-y-1.5">
+                                    {checks.map((check, index) => (
+                                        <li
+                                            key={index}
+                                            className={cn(
+                                                'flex items-start gap-2 text-[13px]',
+                                                check.status === 'ok' ? 'text-emerald-700' : 'text-amber-700',
+                                            )}
+                                        >
+                                            <span aria-hidden>{check.status === 'ok' ? '✓' : '⚠'}</span>
+                                            <span>{check.text}</span>
+                                        </li>
+                                    ))}
+                                </ul>
+                            ) : (
+                                <div className="text-[13px] text-zinc-400">Bez připomínek.</div>
+                            )}
+
+                            <div className="mt-3 flex flex-wrap gap-2">
+                                <Button variant="outline" size="sm" onClick={onEditBook}>
+                                    ✏️ Upravit book
+                                </Button>
+                                <Button variant="ghost" size="sm" leadingIcon={<span aria-hidden>↻</span>} onClick={() => void run()}>
+                                    Spustit znovu
+                                </Button>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

package/apps/agents-server/src/components/NewAgentDialog/ManGoNewAgentWizard/components/KnowledgeList.tsx

@@ -0,0 +1,79 @@
+import type { KnowledgeItem, KnowledgeItemStatus } from '../types';
+import { cn } from '../lib/cn';
+import { formatFileSize } from '../lib/format';
+import { Badge } from './ui/Badge';
+import { IconButton } from './ui/IconButton';
+import { Spinner } from './ui/Spinner';
+
+function StatusChip({ status }: { readonly status: KnowledgeItemStatus }) {
+    if (status === 'uploading') {
+        return (
+            <span className="inline-flex items-center gap-1.5 text-xs text-zinc-500">
+                <Spinner className="h-3.5 w-3.5" /> Nahrávám…
+            </span>
+        );
+    }
+    if (status === 'error') {
+        return <Badge tone="error">Chyba</Badge>;
+    }
+    return (
+        <Badge tone="success" dot>
+            Připraveno
+        </Badge>
+    );
+}
+
+type KnowledgeListProps = {
+    readonly items: readonly KnowledgeItem[];
+    readonly onRemove: (id: string) => void;
+};
+
+export function KnowledgeList({ items, onRemove }: KnowledgeListProps) {
+    if (items.length === 0) {
+        return null;
+    }
+
+    return (
+        <ul className="space-y-2">
+            {items.map((item) => (
+                <li
+                    key={item.id}
+                    className={cn(
+                        'group flex items-center justify-between gap-3 rounded-xl border bg-white px-3.5 py-2.5 shadow-[var(--ob-shadow-xs)] transition-colors',
+                        item.status === 'error'
+                            ? 'border-red-200 bg-red-50/40'
+                            : 'border-zinc-200 hover:border-zinc-300',
+                    )}
+                >
+                    <div className="flex min-w-0 items-center gap-2.5">
+                        <span
+                            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-zinc-100 text-base"
+                            aria-hidden
+                        >
+                            {item.kind === 'file' ? '📄' : '🔗'}
+                        </span>
+                        <div className="min-w-0">
+                            <div className="truncate text-sm font-medium text-zinc-800">
+                                {item.kind === 'file' ? item.name : item.url}
+                            </div>
+                            {item.kind === 'file' && (
+                                <div className="text-xs text-zinc-400">{formatFileSize(item.size)}</div>
+                            )}
+                        </div>
+                    </div>
+                    <div className="flex flex-shrink-0 items-center gap-2">
+                        <StatusChip status={item.status} />
+                        <IconButton
+                            size="sm"
+                            label="Odebrat zdroj"
+                            onClick={() => onRemove(item.id)}
+                            className="opacity-60 hover:text-red-600 group-hover:opacity-100"
+                        >
+                            ×
+                        </IconButton>
+                    </div>
+                </li>
+            ))}
+        </ul>
+    );
+}

package/apps/agents-server/src/components/NewAgentDialog/ManGoNewAgentWizard/components/Logo.tsx

@@ -0,0 +1,20 @@
+import Image from 'next/image';
+
+import { cn } from '../lib/cn';
+
+/**
+ * Official Promptbook logo (symbol PNG from the brand kit) + wordmark in Outfit.
+ * Per the brand rules the mark itself is never recolored — we only switch between the
+ * provided variants: `white` for dark surfaces, `blue` for light ones.
+ */
+export function Logo({ variant = 'white', className }: { readonly variant?: 'white' | 'blue'; readonly className?: string }) {
+    const src = variant === 'white' ? '/promptbook-logo-white.png' : '/promptbook-logo-blue.png';
+    return (
+        <span className={cn('inline-flex select-none items-center gap-2 text-lg tracking-tight', className)}>
+            <Image src={src} alt="Promptbook" width={28} height={28} className="h-7 w-7" />
+            <span className="ob-display font-medium">
+                Prompt<b className="font-semibold">book</b>
+            </span>
+        </span>
+    );
+}