@promptbook/cli 0.112.0-98 → 0.112.0

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

@@ -0,0 +1,114 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+import { ONBOARDING_FLOW, getFlowIndexByPath } from '../config/steps';
+import { useManGoOnboardingNavigation } from '../ManGoOnboardingNavigation';
+import { useOnboarding } from '../state/OnboardingProvider';
+import { Logo } from './Logo';
+import { RailStepper } from './RailStepper';
+import { RailArtwork } from './brand/RailArtwork';
+
+const RAIL_GRADIENT: CSSProperties = {
+    backgroundImage: 'var(--ob-grad-ink)',
+};
+
+/**
+ * Split-screen wizard chrome: a persistent accent rail (brand identity, agent name,
+ * vertical stepper, progress) beside the active step. The rail collapses to a compact
+ * top bar on small screens.
+ */
+export function WizardShell({ children }: { readonly children: ReactNode }) {
+    const { currentPath, requestClose } = useManGoOnboardingNavigation();
+    const { state } = useOnboarding();
+
+    const activeIndex = getFlowIndexByPath(currentPath);
+    const total = ONBOARDING_FLOW.length;
+    const progress = Math.round(((activeIndex + 1) / total) * 100);
+    const agentName = state.agentName.trim() || 'Váš nový agent';
+
+    return (
+        <div data-onboarding-ui className="flex min-h-screen flex-col bg-zinc-50 text-zinc-900 lg:flex-row">
+            {/* Mobile: compact top bar */}
+            <div className="relative overflow-hidden text-white lg:hidden" style={RAIL_GRADIENT}>
+                <div className="relative z-10 flex items-center justify-between px-5 py-3.5">
+                    <button
+                        type="button"
+                        onClick={requestClose}
+                        className="rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50"
+                    >
+                        <Logo className="text-white" />
+                    </button>
+                    <span className="max-w-[40%] truncate text-[13px] text-white/80">{agentName}</span>
+                    <button
+                        type="button"
+                        onClick={requestClose}
+                        aria-label="Zavřít průvodce"
+                        className="flex h-8 w-8 items-center justify-center rounded-lg text-xl leading-none text-white/70 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50"
+                    >
+                        ×
+                    </button>
+                </div>
+                <div className="relative z-10 overflow-x-auto px-5 pb-3.5">
+                    <RailStepper activeIndex={activeIndex} orientation="horizontal" />
+                </div>
+            </div>
+
+            {/* Desktop: persistent side rail */}
+            <aside
+                className="relative hidden w-80 flex-shrink-0 overflow-hidden p-7 text-white lg:sticky lg:top-0 lg:flex lg:h-screen lg:flex-col"
+                style={RAIL_GRADIENT}
+            >
+                <RailArtwork />
+                <div className="relative z-10 flex h-full flex-col">
+                    <div className="flex items-center justify-between gap-3">
+                        <button
+                            type="button"
+                            onClick={requestClose}
+                            className="inline-flex w-fit rounded-lg transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50"
+                        >
+                            <Logo className="text-white" />
+                        </button>
+                        <button
+                            type="button"
+                            onClick={requestClose}
+                            aria-label="Zavřít průvodce"
+                            className="flex h-9 w-9 items-center justify-center rounded-lg text-2xl leading-none text-white/55 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50"
+                        >
+                            ×
+                        </button>
+                    </div>
+
+                    <div className="mt-10">
+                        <div className="text-xs font-medium text-white/60">Tvorba agenta</div>
+                        <div className="ob-display mt-1 text-[19px] font-semibold leading-snug">{agentName}</div>
+                    </div>
+
+                    <div className="mt-9 flex-1">
+                        <RailStepper activeIndex={activeIndex} orientation="vertical" />
+                    </div>
+
+                    <div className="relative z-10 mt-6">
+                        <div className="mb-1.5 flex justify-between text-xs text-white/75">
+                            <span>Průběh</span>
+                            <span>
+                                {activeIndex + 1} z {total}
+                            </span>
+                        </div>
+                        <div className="h-1.5 overflow-hidden rounded-full bg-white/20">
+                            <div
+                                className="h-full rounded-full bg-[color:var(--ob-brand-blue)] transition-[width] duration-500 ease-out"
+                                style={{ width: `${progress}%` }}
+                            />
+                        </div>
+                        <p className="ob-display mt-5 text-[12px] leading-relaxed text-white/45">
+                            Vytvořte AI, která skutečně rozumí vaší firmě.
+                        </p>
+                    </div>
+                </div>
+            </aside>
+
+            <main className="flex-1 px-5 py-8 sm:px-8 sm:py-12">
+                <div className="ob-animate-rise">{children}</div>
+            </main>
+        </div>
+    );
+}

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

@@ -0,0 +1,60 @@
+import { cn } from '../../lib/cn';
+
+/**
+ * Ambient identity artwork woven into the accent rail — a large, faint "book → spark"
+ * motif (the same story as the logomark) that bleeds off the panel edges rather than
+ * sitting in a box. Purely decorative; white line art over the indigo gradient.
+ */
+export function RailArtwork({ className }: { readonly className?: string }) {
+    return (
+        <svg
+            viewBox="0 0 320 480"
+            preserveAspectRatio="xMidYMax slice"
+            className={cn('pointer-events-none absolute inset-0 h-full w-full', className)}
+            fill="none"
+            aria-hidden="true"
+        >
+            <g stroke="#7aebff">
+                {/* faint concentric rings around the spark */}
+                <g strokeOpacity="0.14" strokeWidth="1">
+                    <circle cx="232" cy="150" r="34" />
+                    <circle cx="232" cy="150" r="58" />
+                    <circle cx="232" cy="150" r="86" />
+                </g>
+
+                {/* large open book, bleeding off the bottom */}
+                <g strokeOpacity="0.28" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round">
+                    <path d="M150 360 L40 388 L40 500 L150 478 Z" />
+                    <path d="M150 360 L260 388 L260 500 L150 478 Z" />
+                    <line x1="150" y1="360" x2="150" y2="478" />
+                    <g strokeOpacity="0.18" strokeWidth="1.3">
+                        <line x1="60" y1="402" x2="128" y2="416" />
+                        <line x1="60" y1="420" x2="128" y2="434" />
+                        <line x1="172" y1="416" x2="240" y2="402" />
+                        <line x1="172" y1="434" x2="240" y2="420" />
+                    </g>
+                </g>
+
+                {/* flow rising from the spine to the spark */}
+                <g strokeOpacity="0.24" strokeWidth="1.5" strokeLinecap="round">
+                    <path d="M150 356 C 178 286, 196 232, 232 158" />
+                    <path d="M150 352 C 200 300, 214 226, 230 160" />
+                </g>
+
+                {/* spark */}
+                <g strokeOpacity="0.6" strokeWidth="1.6" strokeLinecap="round">
+                    <line x1="232" y1="132" x2="232" y2="144" />
+                    <line x1="232" y1="156" x2="232" y2="168" />
+                    <line x1="214" y1="150" x2="226" y2="150" />
+                    <line x1="238" y1="150" x2="250" y2="150" />
+                </g>
+            </g>
+            <circle cx="232" cy="150" r="5.5" fill="#7aebff" fillOpacity="0.7" />
+            <g fill="#7aebff" fillOpacity="0.35">
+                <circle cx="196" cy="206" r="2.5" />
+                <circle cx="262" cy="104" r="2" />
+                <circle cx="150" cy="318" r="2" />
+            </g>
+        </svg>
+    );
+}

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

@@ -0,0 +1,135 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { ONBOARDING_ENTRY_PATH, ONBOARDING_STEPS } from '../../config/steps';
+import { useManGoOnboardingNavigation } from '../../ManGoOnboardingNavigation';
+import { generateBookDraft } from '../../services/draftService';
+import { useOnboarding } from '../../state/OnboardingProvider';
+import { BookLanguagePanel } from '../BookLanguagePanel';
+import { MarkdownBookEditor } from '../MarkdownBookEditor';
+import { StepFooter, StepHeader } from '../StepFrame';
+import { Banner } from '../ui/Banner';
+import { Button } from '../ui/Button';
+import { Card } from '../ui/Card';
+import { Spinner } from '../ui/Spinner';
+
+type Phase = 'init' | 'generating' | 'ready' | 'error';
+
+export function BookStep() {
+    const { navigateToPath } = useManGoOnboardingNavigation();
+    const { state, isHydrated, update } = useOnboarding();
+    const [phase, setPhase] = useState<Phase>('init');
+    const [error, setError] = useState<string | null>(null);
+    const startedRef = useRef(false);
+
+    const isBriefAvailable = state.agentName.trim().length > 0 && state.agentBrief.trim().length > 0;
+
+    const generate = useCallback(async () => {
+        setPhase('generating');
+        setError(null);
+        try {
+            const draft = await generateBookDraft({ agentName: state.agentName, agentBrief: state.agentBrief });
+            update({ bookSource: draft });
+            setPhase('ready');
+        } catch (caught) {
+            setError(caught instanceof Error ? caught.message : 'Generování draftu selhalo.');
+            setPhase('error');
+        }
+    }, [state.agentName, state.agentBrief, update]);
+
+    // Generate the draft once, after hydration completes — so we read the persisted
+    // name/brief rather than the initial empty state. Runs a single time (startedRef),
+    // reading the latest values from the closure captured when hydration flips true.
+    useEffect(() => {
+        if (!isHydrated || startedRef.current) {
+            return;
+        }
+        startedRef.current = true;
+
+        if (state.bookSource.trim().length > 0) {
+            setPhase('ready');
+        } else if (isBriefAvailable) {
+            void generate();
+        } else {
+            setPhase('ready');
+        }
+    }, [generate, isBriefAvailable, isHydrated, state.bookSource]);
+
+    if (phase === 'init' || phase === 'generating') {
+        return (
+            <div className="mx-auto max-w-2xl">
+                <StepHeader eyebrow="Definice agenta" title="Připravujeme draft booku" />
+                <Card variant="elevated" className="flex flex-col items-center justify-center gap-5 px-8 py-20 text-center">
+                    <span className="relative flex h-14 w-14 items-center justify-center">
+                        <span className="absolute inset-0 animate-ping rounded-full bg-[color:var(--ob-accent-200)] opacity-60" />
+                        <span className="relative flex h-14 w-14 items-center justify-center rounded-full bg-[color:var(--ob-accent-50)]">
+                            <Spinner className="h-7 w-7" />
+                        </span>
+                    </span>
+                    <div>
+                        <p className="text-sm font-semibold text-zinc-800">Čtu vaše zadání a píšu draft book.md…</p>
+                        <p className="mt-1 text-xs text-zinc-400">Chvíli to může trvat — generuje skutečný model.</p>
+                    </div>
+                </Card>
+            </div>
+        );
+    }
+
+    const isContinueEnabled = state.bookSource.trim().length > 0;
+
+    return (
+        <div className="mx-auto max-w-4xl">
+            <StepHeader
+                eyebrow="Definice agenta"
+                title="Draft booku je hotový"
+                subtitle="Je to jen výchozí návrh — cokoli přepište, smažte nebo doplňte, klidně přímo na schůzce s klientem."
+            />
+
+            {phase === 'error' && (
+                <Banner tone="warning" title="Draft se nepodařilo vygenerovat." className="mb-5">
+                    <p>{error}</p>
+                    <p className="mt-1">Book můžete napsat i ručně níže, nebo to zkuste znovu.</p>
+                </Banner>
+            )}
+
+            {!isBriefAvailable && state.bookSource.trim().length === 0 && phase !== 'error' && (
+                <Banner tone="info" className="mb-5">
+                    Nejprve vyplňte zadání, ať můžeme draft vygenerovat — nebo book napište ručně níže.{' '}
+                    <button
+                        type="button"
+                        className="font-semibold text-[color:var(--ob-accent-700)] underline underline-offset-2 hover:text-[color:var(--ob-accent-800)]"
+                        onClick={() => navigateToPath(ONBOARDING_ENTRY_PATH)}
+                    >
+                        Zpět na zadání
+                    </button>
+                </Banner>
+            )}
+
+            <MarkdownBookEditor
+                value={state.bookSource}
+                onChange={(value) => update({ bookSource: value })}
+                onRegenerate={isBriefAvailable ? () => void generate() : undefined}
+            />
+
+            {state.bookSource.trim().length > 0 && <BookLanguagePanel source={state.bookSource} />}
+
+            <StepFooter
+                left={
+                    <Button variant="ghost" onClick={() => navigateToPath(ONBOARDING_ENTRY_PATH)}>
+                        ← Zadání
+                    </Button>
+                }
+                right={
+                    <Button
+                        disabled={!isContinueEnabled}
+                        trailingIcon={<span aria-hidden>→</span>}
+                        onClick={() => navigateToPath(ONBOARDING_STEPS[1].path)}
+                    >
+                        Pokračovat: Znalosti
+                    </Button>
+                }
+            />
+        </div>
+    );
+}

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

@@ -0,0 +1,215 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { useEffect, useRef } from 'react';
+import { useState } from 'react';
+
+import type { AgentVisibility } from '../../../../../utils/agentVisibility';
+import { ONBOARDING_ENTRY_PATH, ONBOARDING_STEPS } from '../../config/steps';
+import { useManGoOnboardingNavigation } from '../../ManGoOnboardingNavigation';
+import { createManGoAgentSource } from '../../services/createManGoAgentSource';
+import { useOnboarding } from '../../state/OnboardingProvider';
+import { SectionLabel, StepCard } from '../StepFrame';
+import { Banner } from '../ui/Banner';
+import { Badge } from '../ui/Badge';
+import { Button } from '../ui/Button';
+
+/**
+ * Created-agent payload returned by the host Agents Server dialog controller.
+ */
+export type ManGoCreatedAgentPayload = {
+    /**
+     * Permanent id of the created agent.
+     */
+    readonly permanentId: string;
+
+    /**
+     * Route opened when the user leaves the completion screen.
+     */
+    readonly targetPath: string;
+};
+
+/**
+ * Props accepted by the completion step.
+ */
+type DoneStepProps = {
+    /**
+     * Default visibility resolved from server metadata.
+     */
+    readonly defaultVisibility: AgentVisibility;
+
+    /**
+     * Creates the real Agents Server agent.
+     */
+    readonly onCreate: (request: {
+        readonly agentSource: ReturnType<typeof createManGoAgentSource>;
+        readonly visibility: AgentVisibility;
+        readonly knowledgeCount: number;
+    }) => Promise<ManGoCreatedAgentPayload>;
+
+    /**
+     * Opens the created agent route selected by the host dialog controller.
+     */
+    readonly onOpenCreatedAgent: (targetPath: string) => void;
+};
+
+function SummaryRow({ label, value }: { readonly label: string; readonly value: ReactNode }) {
+    return (
+        <div className="flex items-center justify-between gap-4 border-b border-zinc-100 py-2.5 last:border-b-0">
+            <span className="text-sm text-zinc-500">{label}</span>
+            <span className="text-sm font-medium text-zinc-900">{value}</span>
+        </div>
+    );
+}
+
+export function DoneStep(props: DoneStepProps) {
+    const { defaultVisibility, onCreate, onOpenCreatedAgent } = props;
+    const { navigateToPath } = useManGoOnboardingNavigation();
+    const { state, isHydrated, update, reset } = useOnboarding();
+    const savedRef = useRef(false);
+    const [isCreatingAgent, setIsCreatingAgent] = useState(false);
+    const [creationError, setCreationError] = useState<string | null>(null);
+    const [creationAttempt, setCreationAttempt] = useState(0);
+
+    const knowledgeCount = state.knowledge.length;
+    const isTested = state.testMessages.some((message) => message.role === 'user');
+    const isBookAvailable = state.bookSource.trim().length > 0;
+    const isCreated = Boolean(state.savedAgentId && state.savedAgentTargetPath);
+
+    // Create the real agent once. Guarded by both a ref (single run) and the session's
+    // saved permanent id (don't re-create on revisit).
+    useEffect(() => {
+        if (!isHydrated || savedRef.current) {
+            return;
+        }
+        savedRef.current = true;
+
+        if (state.agentName.trim().length === 0 && state.bookSource.trim().length === 0) {
+            return;
+        }
+
+        if (state.savedAgentId && state.savedAgentTargetPath) {
+            return;
+        }
+
+        const agentSource = createManGoAgentSource(state);
+        const readyKnowledgeCount = state.knowledge.filter((item) => item.status === 'ready').length;
+
+        setIsCreatingAgent(true);
+        setCreationError(null);
+        void onCreate({
+            agentSource,
+            visibility: defaultVisibility,
+            knowledgeCount: readyKnowledgeCount,
+        })
+            .then((agent) => {
+                update({
+                    savedAgentId: agent.permanentId,
+                    savedAgentTargetPath: agent.targetPath,
+                });
+            })
+            .catch((error) => {
+                savedRef.current = false;
+                setCreationError(error instanceof Error ? error.message : 'Vytvoření agenta selhalo.');
+            })
+            .finally(() => {
+                setIsCreatingAgent(false);
+            });
+    }, [creationAttempt, defaultVisibility, isHydrated, onCreate, state, update]);
+
+    function startOver() {
+        reset();
+        navigateToPath(ONBOARDING_ENTRY_PATH);
+    }
+
+    return (
+        <div className="mx-auto max-w-xl text-center">
+            <div className="relative mx-auto mb-6 flex h-20 w-20 items-center justify-center">
+                <span className="absolute inset-0 rounded-full bg-emerald-100/70 blur-md" aria-hidden />
+                <span className="relative flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-emerald-50 to-emerald-100 text-4xl shadow-[var(--ob-shadow-md)] ring-1 ring-emerald-200/60">
+                    🎉
+                </span>
+            </div>
+            <h1 className="ob-display text-[28px] font-bold tracking-tight text-zinc-900">Agent v1 je uložen!</h1>
+            <p className="mt-2 text-sm text-zinc-500">
+                {state.agentName.trim()
+                    ? `${state.agentName.trim()} je připraven k dalšímu rozvoji.`
+                    : 'Agent je připraven k dalšímu rozvoji.'}
+            </p>
+
+            {isCreatingAgent && (
+                <Banner tone="info" className="mt-6 text-left" title="Ukládám agenta">
+                    První verze se ukládá do Agents Serveru.
+                </Banner>
+            )}
+
+            {creationError && (
+                <Banner tone="error" className="mt-6 text-left" title="Agenta se nepodařilo uložit">
+                    {creationError}
+                </Banner>
+            )}
+
+            <StepCard className="mt-8 text-left">
+                <SectionLabel className="mb-3">Shrnutí první verze</SectionLabel>
+                <SummaryRow label="Název agenta" value={state.agentName.trim() || '—'} />
+                <SummaryRow
+                    label="Book"
+                    value={
+                        <Badge tone={isBookAvailable ? 'success' : 'neutral'} dot={isBookAvailable}>
+                            {isBookAvailable ? 'Definován' : 'Prázdný'}
+                        </Badge>
+                    }
+                />
+                <SummaryRow
+                    label="Znalostní báze"
+                    value={
+                        <Badge tone={knowledgeCount > 0 ? 'accent' : 'neutral'}>
+                            {knowledgeCount === 0 ? 'Žádné zdroje' : `${knowledgeCount} zdroje/ů`}
+                        </Badge>
+                    }
+                />
+                <SummaryRow
+                    label="Testování"
+                    value={
+                        <Badge tone={isTested ? 'success' : 'neutral'} dot={isTested}>
+                            {isTested ? 'Provedeno' : 'Neproběhlo'}
+                        </Badge>
+                    }
+                />
+                <SummaryRow
+                    label="Uložení"
+                    value={
+                        <Badge tone={isCreated ? 'success' : creationError ? 'error' : 'neutral'} dot={isCreated}>
+                            {isCreated ? 'Uloženo' : creationError ? 'Chyba' : 'Probíhá'}
+                        </Badge>
+                    }
+                />
+            </StepCard>
+
+            <div className="mt-7 flex flex-col gap-3">
+                <Button
+                    trailingIcon={<span aria-hidden>→</span>}
+                    disabled={(!state.savedAgentTargetPath && !creationError) || isCreatingAgent}
+                    onClick={() => {
+                        if (creationError) {
+                            setCreationAttempt((previousAttempt) => previousAttempt + 1);
+                            return;
+                        }
+
+                        if (state.savedAgentTargetPath) {
+                            onOpenCreatedAgent(state.savedAgentTargetPath);
+                        }
+                    }}
+                >
+                    {creationError ? 'Zkusit uložit znovu' : 'Přejít na chat agenta'}
+                </Button>
+                <Button variant="outline" disabled={isCreatingAgent} onClick={() => navigateToPath(ONBOARDING_STEPS[0].path)}>
+                    Upravit agenta
+                </Button>
+                <Button variant="ghost" disabled={isCreatingAgent} onClick={startOver}>
+                    Začít nový onboarding
+                </Button>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,152 @@
+'use client';
+
+import { useState } from 'react';
+
+import { ONBOARDING_STEPS } from '../../config/steps';
+import { createId } from '../../lib/id';
+import { uploadKnowledgeFile } from '../../services/uploadService';
+import { useManGoOnboardingNavigation } from '../../ManGoOnboardingNavigation';
+import { useOnboarding } from '../../state/OnboardingProvider';
+import type { KnowledgeFileItem } from '../../types';
+import { cn } from '../../lib/cn';
+import { DropZone } from '../DropZone';
+import { KnowledgeList } from '../KnowledgeList';
+import { StepCard, StepFooter, StepHeader } from '../StepFrame';
+import { Button } from '../ui/Button';
+import { CONTROL, CONTROL_ERROR } from '../ui/Field';
+
+const MAX_FILE_SIZE_BYTES = 25 * 1024 * 1024;
+
+function normalizeUrl(raw: string): string | null {
+    const trimmed = raw.trim();
+    if (!trimmed) {
+        return null;
+    }
+    const withProtocol = /^https?:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`;
+    try {
+        return new URL(withProtocol).href;
+    } catch {
+        return null;
+    }
+}
+
+export function KnowledgeStep() {
+    const { navigateToPath } = useManGoOnboardingNavigation();
+    const { state, update } = useOnboarding();
+    const [urlInput, setUrlInput] = useState('');
+    const [urlError, setUrlError] = useState<string | null>(null);
+
+    function uploadOne(file: File) {
+        const id = createId();
+        const item: KnowledgeFileItem = {
+            kind: 'file',
+            id,
+            name: file.name,
+            size: file.size,
+            publicUrl: '',
+            objectKey: '',
+            status: 'uploading',
+        };
+        update((prev) => ({ knowledge: [...prev.knowledge, item] }));
+
+        uploadKnowledgeFile(file)
+            .then(({ publicUrl, objectKey }) => {
+                update((prev) => ({
+                    knowledge: prev.knowledge.map((entry) =>
+                        entry.id === id ? { ...entry, publicUrl, objectKey, status: 'ready' } : entry,
+                    ),
+                }));
+            })
+            .catch(() => {
+                update((prev) => ({
+                    knowledge: prev.knowledge.map((entry) =>
+                        entry.id === id ? { ...entry, status: 'error' } : entry,
+                    ),
+                }));
+            });
+    }
+
+    function handleFiles(files: readonly File[]) {
+        files.filter((file) => file.size <= MAX_FILE_SIZE_BYTES).forEach(uploadOne);
+    }
+
+    function handleAddUrl() {
+        const normalized = normalizeUrl(urlInput);
+        if (!normalized) {
+            setUrlError('Zadejte platnou adresu, např. https://firma.cz/napoveda');
+            return;
+        }
+        setUrlError(null);
+        setUrlInput('');
+        update((prev) => ({
+            knowledge: [...prev.knowledge, { kind: 'url', id: createId(), url: normalized, status: 'ready' }],
+        }));
+    }
+
+    function handleRemove(id: string) {
+        update((prev) => ({ knowledge: prev.knowledge.filter((entry) => entry.id !== id) }));
+    }
+
+    return (
+        <div className="mx-auto max-w-2xl">
+            <StepHeader
+                eyebrow="Znalostní báze"
+                title="Přidejte znalosti agenta"
+                subtitle="Agent čerpá odpovědi ze souborů a odkazů, které mu dáte. Čím relevantnější materiály, tím přesnější výstupy."
+            />
+
+            <StepCard className="space-y-6">
+                <DropZone onFiles={handleFiles} hint="PDF, DOCX, TXT, XLSX · max. 25 MB na soubor" />
+
+                <KnowledgeList items={state.knowledge} onRemove={handleRemove} />
+
+                <div className="border-t border-zinc-100 pt-6">
+                    <label htmlFor="knowledge-url" className="mb-1.5 block text-[13px] font-semibold text-zinc-700">
+                        Nebo přidejte odkaz na web / dokumentaci
+                    </label>
+                    <div className="flex gap-2.5">
+                        <input
+                            id="knowledge-url"
+                            type="text"
+                            value={urlInput}
+                            placeholder="https://firma.cz/napoveda"
+                            aria-invalid={urlError ? true : undefined}
+                            onChange={(event) => setUrlInput(event.target.value)}
+                            onKeyDown={(event) => event.key === 'Enter' && handleAddUrl()}
+                            className={cn(CONTROL, urlError && CONTROL_ERROR)}
+                        />
+                        <Button
+                            variant="outline"
+                            onClick={handleAddUrl}
+                            className="whitespace-nowrap"
+                            leadingIcon={<span aria-hidden>+</span>}
+                        >
+                            Přidat
+                        </Button>
+                    </div>
+                    {urlError ? (
+                        <p className="mt-1 text-xs text-red-600">{urlError}</p>
+                    ) : (
+                        <p className="mt-1 text-xs text-zinc-400">Agent si stránku přečte a zahrne do znalostní báze.</p>
+                    )}
+                </div>
+            </StepCard>
+
+            <StepFooter
+                left={
+                    <Button variant="ghost" onClick={() => navigateToPath(ONBOARDING_STEPS[0].path)}>
+                        ← Book
+                    </Button>
+                }
+                right={
+                    <Button
+                        trailingIcon={<span aria-hidden>→</span>}
+                        onClick={() => navigateToPath(ONBOARDING_STEPS[2].path)}
+                    >
+                        Pokračovat: Test
+                    </Button>
+                }
+            />
+        </div>
+    );
+}