@promptbook/cli 0.112.0-125 → 0.112.0-127

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

@@ -0,0 +1,154 @@
+'use client';
+
+import { useRef, useState } from 'react';
+
+import { BOOK_SECTION_PRESETS } from '../config/bookSections';
+import { cn } from '../lib/cn';
+import { MarkdownPreview } from './MarkdownPreview';
+import { Badge } from './ui/Badge';
+import { Spinner } from './ui/Spinner';
+
+type MarkdownBookEditorProps = {
+    readonly value: string;
+    readonly onChange: (value: string) => void;
+    readonly onRegenerate?: () => void;
+    readonly isRegenerating?: boolean;
+};
+
+type ViewMode = 'edit' | 'split' | 'preview';
+
+const VIEW_MODES: ReadonlyArray<{ id: ViewMode; label: string; icon: string }> = [
+    { id: 'edit', label: 'Editor', icon: '✎' },
+    { id: 'split', label: 'Obojí', icon: '⊟' },
+    { id: 'preview', label: 'Náhled', icon: '◳' },
+];
+
+const PANE_HEIGHT = 'h-[28rem]';
+
+export function MarkdownBookEditor({ value, onChange, onRegenerate, isRegenerating }: MarkdownBookEditorProps) {
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const [mode, setMode] = useState<ViewMode>('edit');
+
+    function appendSection(markdown: string) {
+        const trimmed = value.replace(/\s+$/, '');
+        const next = trimmed ? `${trimmed}\n\n${markdown}\n` : `${markdown}\n`;
+        onChange(next);
+
+        // Make sure the new section is visible to edit.
+        if (mode === 'preview') {
+            setMode('split');
+        }
+
+        const textarea = textareaRef.current;
+        if (textarea) {
+            textarea.focus();
+            requestAnimationFrame(() => {
+                textarea.scrollTop = textarea.scrollHeight;
+                textarea.setSelectionRange(next.length, next.length);
+            });
+        }
+    }
+
+    const isEditorShown = mode !== 'preview';
+    const isPreviewShown = mode !== 'edit';
+
+    return (
+        <div>
+            <div className="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-[var(--ob-shadow-md)] transition-shadow focus-within:shadow-[var(--ob-shadow-lg)] focus-within:ring-1 focus-within:ring-[color:var(--ob-accent-200)]">
+                <div className="flex flex-wrap items-center justify-between gap-3 border-b border-zinc-200 bg-zinc-50/80 px-4 py-2.5">
+                    <span className="flex items-center gap-2 text-[13px] text-zinc-600">
+                        <span aria-hidden>📄</span>
+                        <strong className="font-semibold text-zinc-800">book.md</strong>
+                        <span className="hidden sm:inline">
+                            <Badge tone="accent">Plně editovatelný</Badge>
+                        </span>
+                    </span>
+                    <span className="flex items-center gap-2">
+                        <ViewToggle mode={mode} onChange={setMode} />
+                        {onRegenerate && (
+                            <button
+                                type="button"
+                                onClick={onRegenerate}
+                                disabled={isRegenerating}
+                                title="Přegenerovat ze zadání"
+                                className="inline-flex items-center gap-1.5 rounded-lg px-1.5 py-1 text-xs font-medium text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-[color:var(--ob-accent-700)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ob-ring)] disabled:cursor-not-allowed disabled:opacity-50"
+                            >
+                                {isRegenerating ? <Spinner className="h-3.5 w-3.5" /> : <span aria-hidden>↻</span>}
+                                <span className="hidden md:inline">Přegenerovat</span>
+                            </button>
+                        )}
+                    </span>
+                </div>
+
+                <div className={cn('grid', mode === 'split' && 'md:grid-cols-2 md:divide-x md:divide-zinc-200')}>
+                    {isEditorShown && (
+                        <textarea
+                            ref={textareaRef}
+                            value={value}
+                            spellCheck={false}
+                            onChange={(event) => onChange(event.target.value)}
+                            aria-label="Obsah booku v markdownu"
+                            className={cn(
+                                'block w-full resize-none border-0 bg-white p-4 font-mono text-[13px] leading-relaxed text-zinc-800 focus:outline-none focus:ring-0',
+                                mode === 'edit' ? 'min-h-[28rem] resize-y' : PANE_HEIGHT,
+                            )}
+                        />
+                    )}
+                    {isPreviewShown && (
+                        <div className={cn('overflow-y-auto bg-white p-4', mode === 'preview' ? 'min-h-[28rem]' : PANE_HEIGHT)}>
+                            {value.trim() ? (
+                                <MarkdownPreview source={value} />
+                            ) : (
+                                <p className="text-sm text-zinc-400">Náhled se zobrazí, jakmile book nebude prázdný.</p>
+                            )}
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            <div className="mt-4">
+                <div className="mb-2 text-xs font-semibold text-zinc-500">Přidat předepsanou sekci:</div>
+                <div className="flex flex-wrap gap-2">
+                    {BOOK_SECTION_PRESETS.map((preset) => (
+                        <button
+                            key={preset.key}
+                            type="button"
+                            onClick={() => appendSection(preset.markdown)}
+                            className="inline-flex items-center gap-1 rounded-full border border-dashed border-zinc-300 bg-white px-3 py-1.5 text-xs font-medium text-zinc-500 transition-colors hover:border-[color:var(--ob-accent-400)] hover:bg-[color:var(--ob-accent-50)] hover:text-[color:var(--ob-accent-700)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ob-ring)]"
+                        >
+                            + {preset.label}
+                        </button>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function ViewToggle({ mode, onChange }: { readonly mode: ViewMode; readonly onChange: (mode: ViewMode) => void }) {
+    return (
+        <div className="inline-flex rounded-lg border border-zinc-200 bg-white p-0.5" role="tablist" aria-label="Zobrazení editoru">
+            {VIEW_MODES.map((view) => {
+                const isActive = view.id === mode;
+                return (
+                    <button
+                        key={view.id}
+                        type="button"
+                        role="tab"
+                        aria-selected={isActive}
+                        onClick={() => onChange(view.id)}
+                        className={cn(
+                            'inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ob-ring)]',
+                            isActive
+                                ? 'bg-[color:var(--ob-accent-600)] text-white'
+                                : 'text-zinc-500 hover:bg-zinc-100 hover:text-zinc-800',
+                        )}
+                    >
+                        <span aria-hidden>{view.icon}</span>
+                        <span className="hidden sm:inline">{view.label}</span>
+                    </button>
+                );
+            })}
+        </div>
+    );
+}

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

@@ -0,0 +1,188 @@
+import type { ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+
+/**
+ * Tiny, dependency-free Markdown renderer for the book preview. Renders to React nodes
+ * (no `dangerouslySetInnerHTML`), covering the subset used in agent books: headings,
+ * bold/italic/inline-code/links, unordered & ordered lists, blockquotes, horizontal rules
+ * and paragraphs. Anything it doesn't recognize falls through as plain paragraph text.
+ */
+export function MarkdownPreview({ source, className }: { readonly source: string; readonly className?: string }) {
+    return <div className={cn('text-sm leading-relaxed text-zinc-700', className)}>{renderBlocks(source)}</div>;
+}
+
+function renderBlocks(source: string): ReactNode[] {
+    const lines = source.replace(/\r\n/g, '\n').split('\n');
+    const blocks: ReactNode[] = [];
+    let index = 0;
+    let key = 0;
+
+    while (index < lines.length) {
+        const line = lines[index];
+
+        if (line.trim() === '') {
+            index += 1;
+            continue;
+        }
+
+        const heading = /^(#{1,4})\s+(.*)$/.exec(line);
+        if (heading) {
+            blocks.push(renderHeading(heading[1].length, heading[2], key++));
+            index += 1;
+            continue;
+        }
+
+        if (/^(-{3,}|\*{3,}|_{3,})\s*$/.test(line)) {
+            blocks.push(<hr key={key++} className="my-4 border-zinc-200" />);
+            index += 1;
+            continue;
+        }
+
+        if (line.startsWith('>')) {
+            const quote: string[] = [];
+            while (index < lines.length && lines[index].startsWith('>')) {
+                quote.push(lines[index].replace(/^>\s?/, ''));
+                index += 1;
+            }
+            blocks.push(
+                <blockquote key={key++} className="my-3 border-l-2 border-[color:var(--ob-accent-300)] pl-3 italic text-zinc-500">
+                    {renderInline(quote.join(' '))}
+                </blockquote>,
+            );
+            continue;
+        }
+
+        if (/^[-*+]\s+/.test(line)) {
+            const items: string[] = [];
+            while (index < lines.length && /^[-*+]\s+/.test(lines[index])) {
+                items.push(lines[index].replace(/^[-*+]\s+/, ''));
+                index += 1;
+            }
+            blocks.push(
+                <ul key={key++} className="my-2 list-disc space-y-1 pl-5">
+                    {items.map((item, itemIndex) => (
+                        <li key={itemIndex}>{renderInline(item)}</li>
+                    ))}
+                </ul>,
+            );
+            continue;
+        }
+
+        if (/^\d+\.\s+/.test(line)) {
+            const items: string[] = [];
+            while (index < lines.length && /^\d+\.\s+/.test(lines[index])) {
+                items.push(lines[index].replace(/^\d+\.\s+/, ''));
+                index += 1;
+            }
+            blocks.push(
+                <ol key={key++} className="my-2 list-decimal space-y-1 pl-5">
+                    {items.map((item, itemIndex) => (
+                        <li key={itemIndex}>{renderInline(item)}</li>
+                    ))}
+                </ol>,
+            );
+            continue;
+        }
+
+        // Paragraph: gather consecutive plain lines.
+        const paragraph: string[] = [];
+        while (index < lines.length && lines[index].trim() !== '' && !isBlockStart(lines[index])) {
+            paragraph.push(lines[index]);
+            index += 1;
+        }
+        blocks.push(
+            <p key={key++} className="my-2">
+                {paragraph.map((text, lineIndex) => (
+                    <span key={lineIndex}>
+                        {lineIndex > 0 && <br />}
+                        {renderInline(text)}
+                    </span>
+                ))}
+            </p>,
+        );
+    }
+
+    return blocks;
+}
+
+function isBlockStart(line: string): boolean {
+    return (
+        /^(#{1,4})\s+/.test(line) ||
+        /^(-{3,}|\*{3,}|_{3,})\s*$/.test(line) ||
+        line.startsWith('>') ||
+        /^[-*+]\s+/.test(line) ||
+        /^\d+\.\s+/.test(line)
+    );
+}
+
+function renderHeading(level: number, text: string, key: number): ReactNode {
+    const content = renderInline(text);
+    const className = {
+        1: 'mt-5 mb-2 text-xl font-bold text-zinc-900 first:mt-0',
+        2: 'mt-5 mb-1.5 text-base font-bold text-zinc-900 first:mt-0',
+        3: 'mt-4 mb-1 text-sm font-semibold text-zinc-900 first:mt-0',
+        4: 'mt-3 mb-1 text-[13px] font-semibold tracking-wide text-zinc-500 first:mt-0',
+    }[level as 1 | 2 | 3 | 4];
+
+    if (level === 1) return <h1 key={key} className={className}>{content}</h1>;
+    if (level === 2) return <h2 key={key} className={className}>{content}</h2>;
+    if (level === 3) return <h3 key={key} className={className}>{content}</h3>;
+    return <h4 key={key} className={className}>{content}</h4>;
+}
+
+const INLINE_PATTERN = /(`[^`]+`)|(\*\*[^*]+?\*\*)|(\*[^*]+?\*)|(_[^_]+?_)|(\[[^\]]+?\]\([^)]+?\))/g;
+
+function renderInline(text: string): ReactNode[] {
+    const nodes: ReactNode[] = [];
+    const pattern = new RegExp(INLINE_PATTERN.source, 'g');
+    let lastIndex = 0;
+    let key = 0;
+    let match: RegExpExecArray | null;
+
+    while ((match = pattern.exec(text)) !== null) {
+        if (match.index > lastIndex) {
+            nodes.push(text.slice(lastIndex, match.index));
+        }
+
+        const token = match[0];
+        if (token.startsWith('`')) {
+            nodes.push(
+                <code key={key++} className="rounded bg-zinc-100 px-1 py-0.5 font-mono text-[12px] text-zinc-700">
+                    {token.slice(1, -1)}
+                </code>,
+            );
+        } else if (token.startsWith('**')) {
+            nodes.push(<strong key={key++} className="font-semibold text-zinc-900">{token.slice(2, -2)}</strong>);
+        } else if (token.startsWith('*')) {
+            nodes.push(<em key={key++}>{token.slice(1, -1)}</em>);
+        } else if (token.startsWith('_')) {
+            nodes.push(<em key={key++}>{token.slice(1, -1)}</em>);
+        } else {
+            const link = /^\[([^\]]+)\]\(([^)]+)\)$/.exec(token);
+            if (link) {
+                nodes.push(
+                    <a
+                        key={key++}
+                        href={link[2]}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="text-[color:var(--ob-accent-700)] underline underline-offset-2"
+                    >
+                        {link[1]}
+                    </a>,
+                );
+            } else {
+                nodes.push(token);
+            }
+        }
+
+        lastIndex = match.index + token.length;
+    }
+
+    if (lastIndex < text.length) {
+        nodes.push(text.slice(lastIndex));
+    }
+
+    return nodes;
+}

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

@@ -0,0 +1,115 @@
+import { Fragment } from 'react';
+
+import { ONBOARDING_FLOW } from '../config/steps';
+import { cn } from '../lib/cn';
+import { useManGoOnboardingNavigation } from '../ManGoOnboardingNavigation';
+
+type StepStatus = 'done' | 'active' | 'upcoming';
+
+function statusFor(index: number, activeIndex: number): StepStatus {
+    if (index < activeIndex) {
+        return 'done';
+    }
+    return index === activeIndex ? 'active' : 'upcoming';
+}
+
+function Check() {
+    return (
+        <svg viewBox="0 0 16 16" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth={2.5} aria-hidden>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M3.5 8.5l3 3 6-7" />
+        </svg>
+    );
+}
+
+const DOT_BASE = 'flex flex-shrink-0 items-center justify-center rounded-full transition-all duration-300';
+
+function dotClass(status: StepStatus): string {
+    return cn(
+        DOT_BASE,
+        status === 'active' &&
+            'bg-[color:var(--ob-brand-blue)] text-[color:var(--ob-ink)] font-bold shadow-[0_0_0_4px_rgba(122,235,255,0.20)]',
+        status === 'done' && 'bg-white/20 text-white',
+        status === 'upcoming' && 'border-2 border-white/40 text-white/60',
+    );
+}
+
+/** Wizard progress shown inside the accent rail — clickable so steps double as navigation.
+ * Vertical on desktop, a compact row on mobile. */
+export function RailStepper({
+    activeIndex,
+    orientation = 'vertical',
+}: {
+    readonly activeIndex: number;
+    readonly orientation?: 'vertical' | 'horizontal';
+}) {
+    const { navigateToPath } = useManGoOnboardingNavigation();
+
+    if (orientation === 'horizontal') {
+        return (
+            <ol className="flex items-center" aria-label="Průběh onboardingu">
+                {ONBOARDING_FLOW.map((step, index) => {
+                    const status = statusFor(index, activeIndex);
+                    const isLast = index === ONBOARDING_FLOW.length - 1;
+                    return (
+                        <Fragment key={step.id}>
+                            <li>
+                                <button
+                                    type="button"
+                                    onClick={() => navigateToPath(step.path)}
+                                    aria-current={status === 'active' ? 'step' : undefined}
+                                    className="flex items-center gap-2 rounded-lg p-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40"
+                                >
+                                    <span className={cn(dotClass(status), 'h-6 w-6 text-[11px]')}>
+                                        {status === 'done' ? <Check /> : index + 1}
+                                    </span>
+                                    <span
+                                        className={cn(
+                                            'whitespace-nowrap text-[13px] font-medium text-white',
+                                            status !== 'active' && 'hidden',
+                                        )}
+                                    >
+                                        {step.label}
+                                    </span>
+                                </button>
+                            </li>
+                            {!isLast && <span aria-hidden className="mx-1 h-px w-3.5 bg-white/30" />}
+                        </Fragment>
+                    );
+                })}
+            </ol>
+        );
+    }
+
+    return (
+        <ol className="relative flex flex-col gap-0.5" aria-label="Průběh onboardingu">
+            <span aria-hidden className="absolute bottom-4 left-[11px] top-4 w-0.5 bg-white/20" />
+            {ONBOARDING_FLOW.map((step, index) => {
+                const status = statusFor(index, activeIndex);
+                return (
+                    <li key={step.id} className="relative">
+                        <button
+                            type="button"
+                            onClick={() => navigateToPath(step.path)}
+                            aria-current={status === 'active' ? 'step' : undefined}
+                            className="group -mx-2 flex w-full items-center gap-3 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40"
+                        >
+                            <span className={cn(dotClass(status), 'h-6 w-6 text-[12px]')}>
+                                {status === 'done' ? <Check /> : index + 1}
+                            </span>
+                            <span
+                                className={cn(
+                                    'text-sm transition-colors',
+                                    status === 'active' && 'font-semibold text-white',
+                                    status === 'done' && 'font-medium text-white/80 group-hover:text-white',
+                                    status === 'upcoming' && 'text-white/55 group-hover:text-white/80',
+                                )}
+                            >
+                                {step.label}
+                            </span>
+                        </button>
+                    </li>
+                );
+            })}
+        </ol>
+    );
+}

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

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { Card } from './ui/Card';
+
+export function StepHeader({
+    title,
+    subtitle,
+    eyebrow,
+}: {
+    readonly title: string;
+    readonly subtitle?: ReactNode;
+    /** Optional small uppercase label above the title. */
+    readonly eyebrow?: ReactNode;
+}) {
+    return (
+        <header className="mb-8">
+            {eyebrow && (
+                <div className="mb-2 text-[13px] font-semibold text-[color:var(--ob-accent-600)]">{eyebrow}</div>
+            )}
+            <h1 className="ob-display text-balance text-[28px] font-bold tracking-tight text-zinc-900">{title}</h1>
+            {subtitle && <p className="mt-2.5 max-w-prose text-sm leading-relaxed text-zinc-500">{subtitle}</p>}
+        </header>
+    );
+}
+
+/** White padded card used as the body of form-like steps. */
+export function StepCard({ className, children }: { readonly className?: string; readonly children: ReactNode }) {
+    return <Card className={cn('p-8 sm:p-10', className)}>{children}</Card>;
+}
+
+/** Section heading inside a card — small uppercase label for grouped content. */
+export function SectionLabel({ className, children }: { readonly className?: string; readonly children: ReactNode }) {
+    return (
+        <div className={cn('text-xs font-semibold text-zinc-400', className)}>{children}</div>
+    );
+}
+
+/** Footer row with a divider — typically "back" on the left, primary action on the right. */
+export function StepFooter({ left, right }: { readonly left?: ReactNode; readonly right?: ReactNode }) {
+    return (
+        <div className="mt-9 flex items-center justify-between gap-4 border-t border-zinc-100 pt-6">
+            <div>{left}</div>
+            <div className="flex items-center gap-3">{right}</div>
+        </div>
+    );
+}

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

@@ -0,0 +1,159 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+
+import type { ChatMessage } from '../types';
+import { cn } from '../lib/cn';
+import { Badge } from './ui/Badge';
+import { Button } from './ui/Button';
+import { CONTROL } from './ui/Field';
+
+const GREETING = '👋 Jsem připravený. Vložte zadání — třeba popis e-mailu od zákazníka — a ukážu vám, jak odpovím.';
+
+type TestChatProps = {
+    readonly messages: readonly ChatMessage[];
+    readonly isSending: boolean;
+    readonly onSend: (text: string) => void;
+    readonly onStop?: () => void;
+    readonly onRetry?: () => void;
+};
+
+function Bubble({
+    role,
+    children,
+    footer,
+}: {
+    readonly role: 'user' | 'agent';
+    readonly children: ReactNode;
+    readonly footer?: ReactNode;
+}) {
+    return (
+        <div className={cn('group flex max-w-[85%] flex-col gap-1', role === 'user' ? 'items-end self-end' : 'items-start self-start')}>
+            <div
+                className={cn(
+                    'whitespace-pre-wrap rounded-2xl px-3.5 py-2.5 text-[13px] leading-relaxed',
+                    role === 'user'
+                        ? 'rounded-br-sm bg-[color:var(--ob-accent-600)] text-white shadow-[var(--ob-shadow-accent)]'
+                        : 'rounded-bl-sm bg-zinc-100 text-zinc-800',
+                )}
+            >
+                {children}
+            </div>
+            {footer}
+        </div>
+    );
+}
+
+export function TestChat({ messages, isSending, onSend, onStop, onRetry }: TestChatProps) {
+    const [text, setText] = useState('');
+    const [copiedId, setCopiedId] = useState<string | null>(null);
+    const scrollRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' });
+    }, [messages, isSending]);
+
+    function submit() {
+        const trimmed = text.trim();
+        if (!trimmed || isSending) {
+            return;
+        }
+        onSend(trimmed);
+        setText('');
+    }
+
+    function copy(id: string, content: string) {
+        void navigator.clipboard?.writeText(content).then(() => {
+            setCopiedId(id);
+            setTimeout(() => setCopiedId((current) => (current === id ? null : current)), 1500);
+        });
+    }
+
+    const lastMessage = messages[messages.length - 1];
+    const isRetryShown = Boolean(onRetry) && !isSending && lastMessage?.role === 'agent';
+
+    return (
+        <div className="flex h-full flex-col 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>
+                Testovací prostředí
+                <span className="ml-auto">
+                    <Badge tone="success" dot>
+                        Naživo
+                    </Badge>
+                </span>
+            </div>
+
+            <div ref={scrollRef} className="flex max-h-[420px] min-h-[300px] flex-1 flex-col gap-3.5 overflow-y-auto p-4">
+                <Bubble role="agent">{GREETING}</Bubble>
+                {messages.map((message) =>
+                    message.role === 'agent' ? (
+                        <Bubble
+                            key={message.id}
+                            role="agent"
+                            footer={
+                                <button
+                                    type="button"
+                                    onClick={() => copy(message.id, message.content)}
+                                    className="text-[11px] font-medium text-zinc-400 opacity-0 transition-opacity hover:text-zinc-700 focus-visible:opacity-100 group-hover:opacity-100"
+                                >
+                                    {copiedId === message.id ? '✓ Zkopírováno' : 'Kopírovat'}
+                                </button>
+                            }
+                        >
+                            {message.content}
+                        </Bubble>
+                    ) : (
+                        <Bubble key={message.id} role="user">
+                            {message.content}
+                        </Bubble>
+                    ),
+                )}
+                {isSending && (
+                    <Bubble role="agent">
+                        <span className="inline-flex gap-1">
+                            <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-zinc-400 [animation-delay:-0.2s]" />
+                            <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-zinc-400 [animation-delay:-0.1s]" />
+                            <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-zinc-400" />
+                        </span>
+                    </Bubble>
+                )}
+                {isRetryShown && (
+                    <button
+                        type="button"
+                        onClick={onRetry}
+                        className="mx-auto mt-1 inline-flex items-center gap-1.5 rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs font-medium text-zinc-500 transition-colors hover:border-zinc-300 hover:text-zinc-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ob-ring)]"
+                    >
+                        <span aria-hidden>↻</span> Zkusit znovu
+                    </button>
+                )}
+            </div>
+
+            <div className="flex gap-2 border-t border-zinc-200 bg-zinc-50/50 p-3">
+                <input
+                    type="text"
+                    value={text}
+                    aria-label="Testovací zadání pro agenta"
+                    placeholder="Vložte testovací zadání pro agenta…"
+                    disabled={isSending}
+                    onChange={(event) => setText(event.target.value)}
+                    onKeyDown={(event) => event.key === 'Enter' && submit()}
+                    className={cn(CONTROL, 'py-2 disabled:opacity-60')}
+                />
+                {isSending ? (
+                    <Button variant="outline" size="sm" onClick={onStop}>
+                        Stop
+                    </Button>
+                ) : (
+                    <Button size="sm" onClick={submit} disabled={text.trim().length === 0}>
+                        Odeslat
+                    </Button>
+                )}
+            </div>
+        </div>
+    );
+}