@promptbook/cli 0.112.0-99 → 0.113.0-0

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

@@ -0,0 +1,262 @@
+'use client';
+
+import { useRef, useState } from 'react';
+
+import { EMAIL_SCENARIOS } from '../../config/emailScenarios';
+import { ONBOARDING_STEPS } from '../../config/steps';
+import { createId } from '../../lib/id';
+import { cn } from '../../lib/cn';
+import { agentTestService } from '../../services/agentTestService';
+import { useManGoOnboardingNavigation } from '../../ManGoOnboardingNavigation';
+import { useOnboarding } from '../../state/OnboardingProvider';
+import type { ChatMessage } from '../../types';
+import { EmailTestRun } from '../EmailTestRun';
+import { SectionLabel, StepFooter, StepHeader } from '../StepFrame';
+import { TestChat } from '../TestChat';
+import { Badge } from '../ui/Badge';
+import { Button } from '../ui/Button';
+import { Card } from '../ui/Card';
+
+type TestMode = 'email' | 'chat';
+
+const SAMPLE_PROMPTS = [
+    'Zákazník reklamuje zboží, které přišlo poškozené.',
+    'Zákazník se ptá, proč mu nedorazilo zboží objednané před 3 dny.',
+];
+
+export function TestStep() {
+    const { navigateToPath } = useManGoOnboardingNavigation();
+    const { state, update } = useOnboarding();
+
+    const [mode, setMode] = useState<TestMode>('email');
+    const [email, setEmail] = useState(EMAIL_SCENARIOS[1].email);
+
+    const [isSending, setIsSending] = useState(false);
+    const requestRef = useRef(0);
+
+    async function runAgent(history: readonly ChatMessage[]) {
+        const requestId = (requestRef.current += 1);
+        setIsSending(true);
+        try {
+            const reply = await agentTestService.send({
+                bookSource: state.bookSource,
+                knowledge: state.knowledge,
+                messages: history,
+            });
+            if (requestRef.current !== requestId) {
+                return;
+            }
+            update((prev) => ({
+                testMessages: [...prev.testMessages, { id: createId(), role: 'agent', content: reply.content }],
+            }));
+        } catch {
+            if (requestRef.current !== requestId) {
+                return;
+            }
+            update((prev) => ({
+                testMessages: [
+                    ...prev.testMessages,
+                    { id: createId(), role: 'agent', content: 'Omlouvám se, něco se pokazilo. Zkuste to prosím znovu.' },
+                ],
+            }));
+        } finally {
+            if (requestRef.current === requestId) {
+                setIsSending(false);
+            }
+        }
+    }
+
+    function send(text: string) {
+        const trimmed = text.trim();
+        if (!trimmed || isSending) {
+            return;
+        }
+        const history = [...state.testMessages, { id: createId(), role: 'user' as const, content: trimmed }];
+        update(() => ({ testMessages: history }));
+        void runAgent(history);
+    }
+
+    function retry() {
+        if (isSending) {
+            return;
+        }
+        const messages = state.testMessages;
+        let lastUser = -1;
+        for (let index = messages.length - 1; index >= 0; index -= 1) {
+            if (messages[index].role === 'user') {
+                lastUser = index;
+                break;
+            }
+        }
+        if (lastUser < 0) {
+            return;
+        }
+        const history = messages.slice(0, lastUser + 1);
+        update(() => ({ testMessages: history }));
+        void runAgent(history);
+    }
+
+    function stop() {
+        requestRef.current += 1;
+        setIsSending(false);
+    }
+
+    const agentName = state.agentName.trim() || 'Nepojmenovaný agent';
+    const readyKnowledge = state.knowledge.filter((item) => item.status === 'ready').length;
+    const isRetryAvailable = !isSending && state.testMessages.some((message) => message.role === 'user');
+
+    return (
+        <div className="mx-auto max-w-4xl">
+            <StepHeader
+                eyebrow="Ověření agenta"
+                title="Otestujte agenta"
+                subtitle="Vyzkoušejte, jak agent reaguje na reálná zadání. Odpovídá naživo přes model — je to testovací režim, nic se zákazníkům neodesílá."
+            />
+
+            <div className="mb-6">
+                <ModeToggle mode={mode} onChange={setMode} />
+            </div>
+
+            <div className="grid items-start gap-6 md:grid-cols-[1fr_1.4fr]">
+                <div className="space-y-4">
+                    <Card className="p-5">
+                        <SectionLabel className="mb-3">Konfigurace agenta</SectionLabel>
+                        <div className="text-sm font-bold text-zinc-900">{agentName}</div>
+                        <div className="mt-4 space-y-2.5 border-t border-zinc-100 pt-4 text-sm">
+                            <div className="flex items-center justify-between">
+                                <span className="text-zinc-500">Book</span>
+                                <button
+                                    type="button"
+                                    onClick={() => navigateToPath(ONBOARDING_STEPS[0].path)}
+                                    className="inline-flex items-center gap-1 rounded-full bg-[color:var(--ob-accent-50)] px-2.5 py-0.5 text-xs font-medium text-[color:var(--ob-accent-700)] transition-colors hover:bg-[color:var(--ob-accent-100)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ob-ring)]"
+                                >
+                                    <span aria-hidden>✏️</span> Upravit
+                                </button>
+                            </div>
+                            <div className="flex items-center justify-between">
+                                <span className="text-zinc-500">Znalosti</span>
+                                <Badge tone={readyKnowledge > 0 ? 'success' : 'neutral'} dot={readyKnowledge > 0}>
+                                    {readyKnowledge} {readyKnowledge === 1 ? 'zdroj' : 'zdroje/ů'}
+                                </Badge>
+                            </div>
+                        </div>
+                    </Card>
+
+                    {mode === 'email' ? (
+                        <div>
+                            <div className="mb-2 text-[13px] font-semibold text-zinc-600">Simulace vstupu:</div>
+                            <div className="space-y-2">
+                                {EMAIL_SCENARIOS.map((scenario) => (
+                                    <button
+                                        key={scenario.id}
+                                        type="button"
+                                        onClick={() => setEmail(scenario.email)}
+                                        className="flex w-full items-start gap-2.5 rounded-xl border border-zinc-200 bg-white px-3.5 py-2.5 text-left shadow-[var(--ob-shadow-xs)] transition-all hover:-translate-y-px hover:border-[color:var(--ob-accent-300)] hover:shadow-[var(--ob-shadow-sm)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ob-ring)]"
+                                    >
+                                        <span className="text-base" aria-hidden>
+                                            {scenario.icon}
+                                        </span>
+                                        <span>
+                                            <span className="block text-[13px] font-semibold text-zinc-800">
+                                                {scenario.label}
+                                            </span>
+                                            <span className="block text-[11px] text-zinc-400">
+                                                Vzorový e-mail — předvyplní vstup
+                                            </span>
+                                        </span>
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+                    ) : (
+                        <div>
+                            <div className="mb-2 text-[13px] font-semibold text-zinc-600">Zkuste zadat:</div>
+                            <div className="space-y-2">
+                                {SAMPLE_PROMPTS.map((prompt) => (
+                                    <button
+                                        key={prompt}
+                                        type="button"
+                                        disabled={isSending}
+                                        onClick={() => send(prompt)}
+                                        className="group flex w-full items-start gap-2 rounded-xl border border-zinc-200 bg-white px-3.5 py-2.5 text-left text-[13px] leading-relaxed text-zinc-600 shadow-[var(--ob-shadow-xs)] transition-all hover:-translate-y-px hover:border-[color:var(--ob-accent-300)] hover:text-zinc-900 hover:shadow-[var(--ob-shadow-sm)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ob-ring)] disabled:cursor-not-allowed disabled:opacity-60"
+                                    >
+                                        <span
+                                            className="mt-0.5 text-[color:var(--ob-accent-400)] transition-colors group-hover:text-[color:var(--ob-accent-600)]"
+                                            aria-hidden
+                                        >
+                                            ↳
+                                        </span>
+                                        <span>„{prompt}“</span>
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                </div>
+
+                {mode === 'email' ? (
+                    <EmailTestRun
+                        email={email}
+                        onEmailChange={setEmail}
+                        bookSource={state.bookSource}
+                        knowledge={state.knowledge}
+                        onEditBook={() => navigateToPath(ONBOARDING_STEPS[0].path)}
+                    />
+                ) : (
+                    <TestChat
+                        messages={state.testMessages}
+                        isSending={isSending}
+                        onSend={send}
+                        onStop={stop}
+                        onRetry={isRetryAvailable ? retry : undefined}
+                    />
+                )}
+            </div>
+
+            <StepFooter
+                left={
+                    <Button variant="ghost" onClick={() => navigateToPath(ONBOARDING_STEPS[1].path)}>
+                        ← Znalosti
+                    </Button>
+                }
+                right={
+                    <Button trailingIcon={<span aria-hidden>→</span>} onClick={() => navigateToPath(ONBOARDING_STEPS[3].path)}>
+                        Uložit první verzi
+                    </Button>
+                }
+            />
+        </div>
+    );
+}
+
+function ModeToggle({ mode, onChange }: { readonly mode: TestMode; readonly onChange: (mode: TestMode) => void }) {
+    const options: ReadonlyArray<{ id: TestMode; label: string; icon: string }> = [
+        { id: 'email', label: 'E-mailový test', icon: '📨' },
+        { id: 'chat', label: 'Konverzace', icon: '💬' },
+    ];
+    return (
+        <div className="inline-flex rounded-xl border border-zinc-200 bg-white p-0.5 shadow-[var(--ob-shadow-xs)]" role="tablist" aria-label="Režim testu">
+            {options.map((option) => {
+                const isActive = option.id === mode;
+                return (
+                    <button
+                        key={option.id}
+                        type="button"
+                        role="tab"
+                        aria-selected={isActive}
+                        onClick={() => onChange(option.id)}
+                        className={cn(
+                            'inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-[13px] 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>{option.icon}</span>
+                        {option.label}
+                    </button>
+                );
+            })}
+        </div>
+    );
+}

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

@@ -0,0 +1,64 @@
+'use client';
+
+import { ONBOARDING_STEPS } from '../../config/steps';
+import { useManGoOnboardingNavigation } from '../../ManGoOnboardingNavigation';
+import { useOnboarding } from '../../state/OnboardingProvider';
+import { SectionLabel, StepCard, StepFooter } from '../StepFrame';
+import { Button } from '../ui/Button';
+import { InputField, TextareaField } from '../ui/Field';
+
+/**
+ * Entry screen of the wizard ("Řekněte mi o agentovi"). Captures the agent name + a
+ * one-sentence brief, then continues to the Book step where the draft is generated.
+ */
+export function ZadaniStep() {
+    const { navigateToPath } = useManGoOnboardingNavigation();
+    const { state, update } = useOnboarding();
+    const isContinueEnabled = state.agentName.trim().length > 0 && state.agentBrief.trim().length > 0;
+
+    return (
+        <div className="mx-auto max-w-2xl">
+            <StepCard>
+                <SectionLabel className="text-[color:var(--ob-accent-600)]">Začněme</SectionLabel>
+                <h1 className="mt-2 text-balance text-3xl font-extrabold tracking-tight text-zinc-900">
+                    Řekněte mi o agentovi
+                </h1>
+                <p className="mt-2.5 text-sm leading-relaxed text-zinc-500">
+                    Stačí název a jedna věta o tom, co má agent dělat. Z toho připravíme draft booku, který si pak
+                    libovolně upravíte.
+                </p>
+
+                <div className="mt-8 space-y-6">
+                    <InputField
+                        label="Název agenta"
+                        placeholder="např. E-mail asistent pro Alzu"
+                        value={state.agentName}
+                        hint="Vyberte název srozumitelný pro klienta, ne pro technika."
+                        onChange={(event) => update({ agentName: event.target.value })}
+                    />
+                    <TextareaField
+                        label="Co má agent dělat?"
+                        labelSuffix={<span className="font-normal text-zinc-400">(jedna věta stačí)</span>}
+                        rows={2}
+                        placeholder="např. Pomáhá zákaznickému servisu odpovídat na příchozí e-maily od zákazníků."
+                        value={state.agentBrief}
+                        onChange={(event) => update({ agentBrief: event.target.value })}
+                    />
+                </div>
+
+                <StepFooter
+                    right={
+                        <Button
+                            disabled={!isContinueEnabled}
+                            leadingIcon={<span aria-hidden>✨</span>}
+                            trailingIcon={<span aria-hidden>→</span>}
+                            onClick={() => navigateToPath(ONBOARDING_STEPS[0].path)}
+                        >
+                            Vygenerovat draft booku
+                        </Button>
+                    }
+                />
+            </StepCard>
+        </div>
+    );
+}

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

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+
+import { cn } from '../../lib/cn';
+
+export type BadgeTone = 'neutral' | 'accent' | 'success' | 'warning' | 'error';
+
+type BadgeProps = {
+    readonly tone?: BadgeTone;
+    /** Renders a small leading status dot. */
+    readonly dot?: boolean;
+    readonly children: ReactNode;
+    readonly className?: string;
+};
+
+const TONES: Record<BadgeTone, { chip: string; dot: string }> = {
+    neutral: { chip: 'bg-zinc-100 text-zinc-600', dot: 'bg-zinc-400' },
+    accent: {
+        chip: 'bg-[color:var(--ob-accent-50)] text-[color:var(--ob-accent-700)] ring-1 ring-inset ring-[color:var(--ob-accent-100)]',
+        dot: 'bg-[color:var(--ob-accent-500)]',
+    },
+    success: { chip: 'bg-emerald-100 text-emerald-700', dot: 'bg-emerald-500' },
+    warning: { chip: 'bg-amber-100 text-amber-700', dot: 'bg-amber-500' },
+    error: { chip: 'bg-red-100 text-red-700', dot: 'bg-red-500' },
+};
+
+/** Compact status pill / chip. */
+export function Badge({ tone = 'neutral', dot = false, children, className }: BadgeProps) {
+    const t = TONES[tone];
+    return (
+        <span
+            className={cn(
+                'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium',
+                t.chip,
+                className,
+            )}
+        >
+            {dot && <span className={cn('h-1.5 w-1.5 rounded-full', t.dot)} aria-hidden />}
+            {children}
+        </span>
+    );
+}

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

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react';
+
+import { cn } from '../../lib/cn';
+
+export type BannerTone = 'info' | 'success' | 'warning' | 'error';
+
+type BannerProps = {
+    readonly tone?: BannerTone;
+    /** Optional bold heading shown above the body. */
+    readonly title?: ReactNode;
+    readonly children?: ReactNode;
+    /** Override the default emoji/icon for the tone. Pass `null` to hide it. */
+    readonly icon?: ReactNode;
+    readonly className?: string;
+};
+
+const TONES: Record<BannerTone, { wrap: string; icon: string; title: string; defaultIcon: string }> = {
+    info: {
+        wrap: 'border-[color:var(--ob-accent-200)] bg-[color:var(--ob-accent-50)] text-[color:var(--ob-accent-900)]',
+        icon: 'text-[color:var(--ob-accent-600)]',
+        title: 'text-[color:var(--ob-accent-900)]',
+        defaultIcon: 'ℹ️',
+    },
+    success: {
+        wrap: 'border-emerald-200 bg-emerald-50 text-emerald-800',
+        icon: 'text-emerald-600',
+        title: 'text-emerald-900',
+        defaultIcon: '✓',
+    },
+    warning: {
+        wrap: 'border-amber-200 bg-amber-50 text-amber-800',
+        icon: 'text-amber-600',
+        title: 'text-amber-900',
+        defaultIcon: '⚠️',
+    },
+    error: {
+        wrap: 'border-red-200 bg-red-50 text-red-800',
+        icon: 'text-red-600',
+        title: 'text-red-900',
+        defaultIcon: '⚠️',
+    },
+};
+
+/** Inline contextual message — info / success / warning / error. */
+export function Banner({ tone = 'info', title, children, icon, className }: BannerProps) {
+    const t = TONES[tone];
+    const isIconShown = icon !== null;
+    return (
+        <div
+            role={tone === 'error' || tone === 'warning' ? 'alert' : 'status'}
+            className={cn(
+                'flex gap-3 rounded-xl border px-4 py-3 text-sm leading-relaxed',
+                'shadow-[var(--ob-shadow-xs)]',
+                t.wrap,
+                className,
+            )}
+        >
+            {isIconShown && (
+                <span className={cn('mt-px shrink-0 text-base leading-none', t.icon)} aria-hidden>
+                    {icon ?? t.defaultIcon}
+                </span>
+            )}
+            <div className="min-w-0">
+                {title && <div className={cn('font-semibold', t.title)}>{title}</div>}
+                {children && <div className={cn(Boolean(title) && 'mt-0.5 opacity-90')}>{children}</div>}
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,77 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+import { cn } from '../../lib/cn';
+import { Spinner } from './Spinner';
+import { FOCUS_RING } from './tokens';
+
+export type ButtonVariant = 'primary' | 'outline' | 'ghost' | 'inverted';
+export type ButtonSize = 'md' | 'sm';
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    readonly variant?: ButtonVariant;
+    readonly size?: ButtonSize;
+    /** When true, shows a spinner and disables the button (additive — defaults to false). */
+    readonly isLoading?: boolean;
+    /** Optional icon rendered before the label. */
+    readonly leadingIcon?: ReactNode;
+    /** Optional icon rendered after the label. */
+    readonly trailingIcon?: ReactNode;
+};
+
+const BASE =
+    'inline-flex select-none items-center justify-center gap-2 rounded-xl font-semibold ' +
+    'transition-[box-shadow,transform,filter,color,border-color,background-color] duration-150 ease-out ' +
+    'active:translate-y-px disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-45 ' +
+    FOCUS_RING;
+
+const VARIANTS: Record<ButtonVariant, string> = {
+    primary:
+        'text-[color:var(--ob-ink)] bg-[image:var(--ob-grad-primary)] ' +
+        'shadow-[var(--ob-shadow-accent)] hover:shadow-[var(--ob-shadow-lg)] hover:brightness-[1.04] active:brightness-95',
+    outline:
+        'border border-zinc-200/80 bg-white text-zinc-700 shadow-[var(--ob-shadow-xs)] ' +
+        'hover:border-zinc-300 hover:bg-zinc-50 hover:text-zinc-900 active:bg-zinc-100',
+    ghost: 'text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 active:bg-zinc-200/70',
+    inverted:
+        'bg-white text-[color:var(--ob-accent-700)] shadow-[var(--ob-shadow-sm)] ' +
+        'hover:bg-white/90 active:bg-white/80',
+};
+
+const SIZES: Record<ButtonSize, string> = {
+    md: 'h-10 px-5 text-sm',
+    sm: 'h-8 px-3.5 text-[13px]',
+};
+
+export function Button({
+    variant = 'primary',
+    size = 'md',
+    isLoading = false,
+    leadingIcon,
+    trailingIcon,
+    className,
+    type = 'button',
+    disabled,
+    children,
+    ...props
+}: ButtonProps) {
+    const spinnerSize = size === 'sm' ? 'h-3.5 w-3.5' : 'h-4 w-4';
+    return (
+        <button
+            type={type}
+            disabled={disabled || isLoading}
+            aria-busy={isLoading || undefined}
+            className={cn(BASE, VARIANTS[variant], SIZES[size], className)}
+            {...props}
+        >
+            {isLoading ? (
+                <Spinner className={cn(spinnerSize, variant === 'primary' && 'border-white/40 border-t-white')} />
+            ) : (
+                leadingIcon && <span className="-ml-0.5 inline-flex shrink-0 items-center">{leadingIcon}</span>
+            )}
+            {children}
+            {!isLoading && trailingIcon && (
+                <span className="-mr-0.5 inline-flex shrink-0 items-center">{trailingIcon}</span>
+            )}
+        </button>
+    );
+}

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

@@ -0,0 +1,33 @@
+import type { HTMLAttributes } from 'react';
+
+import { cn } from '../../lib/cn';
+import { FOCUS_RING } from './tokens';
+
+export type CardVariant = 'default' | 'elevated' | 'interactive';
+
+type CardProps = HTMLAttributes<HTMLDivElement> & {
+    /** Visual weight. `elevated` lifts off the page; `interactive` adds hover feedback. */
+    readonly variant?: CardVariant;
+};
+
+const VARIANTS: Record<CardVariant, string> = {
+    default: 'shadow-[var(--ob-shadow-sm)]',
+    elevated: 'shadow-[var(--ob-shadow-lg)]',
+    interactive:
+        'shadow-[var(--ob-shadow-sm)] cursor-pointer transition-[box-shadow,border-color,transform] ' +
+        'duration-200 hover:-translate-y-0.5 hover:border-[color:var(--ob-accent-200)] hover:shadow-[var(--ob-shadow-md)] ' +
+        FOCUS_RING,
+};
+
+export function Card({ variant = 'default', className, ...props }: CardProps) {
+    return (
+        <div
+            className={cn(
+                'rounded-2xl border border-zinc-200/60 bg-white',
+                VARIANTS[variant],
+                className,
+            )}
+            {...props}
+        />
+    );
+}

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

@@ -0,0 +1,103 @@
+import { useId } from 'react';
+import type { InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
+
+import { cn } from '../../lib/cn';
+import { FOCUS_RING_INPUT } from './tokens';
+
+/**
+ * Shared control styling for text inputs / textareas. Exported so hand-rolled inputs
+ * elsewhere in the module (URL field, chat composer) stay visually identical — DRY.
+ */
+export const CONTROL =
+    'w-full rounded-xl border border-zinc-300 bg-white px-3.5 py-2.5 text-sm text-zinc-900 ' +
+    'shadow-[var(--ob-shadow-xs)] placeholder:text-zinc-400 transition-[border-color,box-shadow] ' +
+    'disabled:cursor-not-allowed disabled:bg-zinc-50 disabled:text-zinc-400 ' +
+    FOCUS_RING_INPUT;
+
+/** Applied on top of CONTROL when a field is in an error state. */
+export const CONTROL_ERROR =
+    'border-red-300 focus:border-red-400 focus:ring-red-500/15';
+
+type FieldShellProps = {
+    readonly label: string;
+    readonly hint?: ReactNode;
+    readonly htmlFor: string;
+    readonly children: ReactNode;
+    readonly labelSuffix?: ReactNode;
+    readonly error?: ReactNode;
+    readonly describedById?: string;
+};
+
+function FieldShell({ label, hint, htmlFor, children, labelSuffix, error, describedById }: FieldShellProps) {
+    return (
+        <div className="space-y-1.5">
+            <label htmlFor={htmlFor} className="flex items-center gap-2 text-[13px] font-semibold text-zinc-700">
+                {label}
+                {labelSuffix}
+            </label>
+            {children}
+            {error ? (
+                <p id={describedById} className="flex items-center gap-1.5 text-xs font-medium text-red-600">
+                    <svg viewBox="0 0 16 16" className="h-3.5 w-3.5 shrink-0" fill="currentColor" aria-hidden>
+                        <path d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM7.25 5a.75.75 0 011.5 0v3.5a.75.75 0 01-1.5 0V5zM8 10.25a.9.9 0 100 1.8.9.9 0 000-1.8z" />
+                    </svg>
+                    {error}
+                </p>
+            ) : (
+                hint && (
+                    <p id={describedById} className="text-xs leading-relaxed text-zinc-400">
+                        {hint}
+                    </p>
+                )
+            )}
+        </div>
+    );
+}
+
+type InputFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id'> & {
+    readonly label: string;
+    readonly hint?: ReactNode;
+    readonly labelSuffix?: ReactNode;
+    /** When set, the control turns red and this message replaces the hint. Additive. */
+    readonly error?: ReactNode;
+};
+
+export function InputField({ label, hint, labelSuffix, error, className, ...props }: InputFieldProps) {
+    const id = useId();
+    const descId = `${id}-desc`;
+    return (
+        <FieldShell label={label} hint={hint} htmlFor={id} labelSuffix={labelSuffix} error={error} describedById={descId}>
+            <input
+                id={id}
+                aria-invalid={error ? true : undefined}
+                aria-describedby={error || hint ? descId : undefined}
+                className={cn(CONTROL, Boolean(error) && CONTROL_ERROR, className)}
+                {...props}
+            />
+        </FieldShell>
+    );
+}
+
+type TextareaFieldProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'> & {
+    readonly label: string;
+    readonly hint?: ReactNode;
+    readonly labelSuffix?: ReactNode;
+    /** When set, the control turns red and this message replaces the hint. Additive. */
+    readonly error?: ReactNode;
+};
+
+export function TextareaField({ label, hint, labelSuffix, error, className, ...props }: TextareaFieldProps) {
+    const id = useId();
+    const descId = `${id}-desc`;
+    return (
+        <FieldShell label={label} hint={hint} htmlFor={id} labelSuffix={labelSuffix} error={error} describedById={descId}>
+            <textarea
+                id={id}
+                aria-invalid={error ? true : undefined}
+                aria-describedby={error || hint ? descId : undefined}
+                className={cn(CONTROL, 'resize-y', Boolean(error) && CONTROL_ERROR, className)}
+                {...props}
+            />
+        </FieldShell>
+    );
+}